diff --git a/.circleci/OWNERS b/.circleci/OWNERS
new file mode 100644
index 0000000000000..002922bb9cc93
--- /dev/null
+++ b/.circleci/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'ampproject/wg-infra'}, {name: 'rsimha', notify: true}],
+    },
+  ],
+}
diff --git a/.circleci/check_config.sh b/.circleci/check_config.sh
new file mode 100755
index 0000000000000..45441bfccf399
--- /dev/null
+++ b/.circleci/check_config.sh
@@ -0,0 +1,71 @@
+#!/bin/bash
+#
+# Copyright 2021 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.
+
+# This script checks if a PR branch is using the most recent CircleCI config.
+# Reference: https://circleci.com/docs/2.0/env-vars/#built-in-environment-variables
+
+set -e
+err=0
+
+GREEN() { echo -e "\n\033[0;32m$1\033[0m"; }
+RED() { echo -e "\n\033[0;31m$1\033[0m"; }
+YELLOW() { echo -e "\033[0;33m$1\033[0m"; }
+CYAN() { echo -e "\033[0;36m$1\033[0m"; }
+
+# Push builds are only run against the main branch and amp-release branches.
+if [[ "$CIRCLE_BRANCH" == "main" || "$CIRCLE_BRANCH" =~ ^amp-release-* ]]; then
+  echo $(GREEN "Nothing to do because $CIRCLE_BRANCH is not a PR branch.")
+  exit 0
+fi
+
+# Check if the PR branch contains the most recent revision the CircleCI config.
+CONFIG_REV=`git rev-list main -1 -- .circleci/config.yml`
+(set -x && git merge-base --is-ancestor $CONFIG_REV $CIRCLE_SHA1) || err=$?
+
+if [[ "$err" -ne "0" ]]; then
+  echo "$(RED "ERROR:") $(CYAN $CIRCLE_BRANCH) is missing the latest CircleCI config revision $(CYAN $CONFIG_REV)."
+  echo -e "\n"
+
+  echo $(YELLOW "This can be fixed in three ways:")
+  echo -e "\n"
+
+  echo "1. Click the $(CYAN "\"Update branch\"") button on GitHub and follow instructions."
+  echo "   ⤷ It can be found towards the bottom of the PR, after the list of checks."
+  echo -e "\n"
+
+  echo "2. Pull the latest commits from $(CYAN "main") and re-push the PR branch."
+  echo "   ⤷ Follow these steps:"
+  echo ""
+  echo "      $(CYAN "git checkout main")"
+  echo "      $(CYAN "git pull")"
+  echo "      $(CYAN "git checkout <PR branch>")"
+  echo "      $(CYAN "git merge main")"
+  echo "      $(CYAN "git push origin")"
+  echo -e "\n"
+
+  echo "3. Rebase on $(CYAN "main") and re-push the PR branch."
+  echo "   ⤷ Follow these steps:"
+  echo ""
+  echo "      $(CYAN "git checkout main")"
+  echo "      $(CYAN "git pull")"
+  echo "      $(CYAN "git checkout <PR branch>")"
+  echo "      $(CYAN "git rebase main")"
+  echo "      $(CYAN "git push origin --force")"
+  echo -e "\n"
+  exit 1
+fi
+
+echo $(GREEN "$CIRCLE_BRANCH is using the latest CircleCI config.")
diff --git a/.circleci/compute_merge_commit.sh b/.circleci/compute_merge_commit.sh
new file mode 100755
index 0000000000000..b1c143ab24135
--- /dev/null
+++ b/.circleci/compute_merge_commit.sh
@@ -0,0 +1,50 @@
+#!/bin/bash
+#
+# Copyright 2021 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.
+
+# This script establishes the merge commit at the start of a CircleCI build so
+# all stages use the same commit.
+
+set -e
+err=0
+
+GREEN() { echo -e "\n\033[0;32m$1\033[0m"; }
+
+# Ensure the CircleCI workspace directory exists.
+mkdir -p /tmp/workspace
+
+# Try to determine the PR number.
+curl -sS https://raw.githubusercontent.com/ampproject/amphtml/main/.circleci/get_pr_number.sh | bash
+if [[ -f "$BASH_ENV" ]]; then
+  source $BASH_ENV
+fi
+
+# If PR_NUMBER doesn't exist, there is nothing more to do.
+if [[ -z "$PR_NUMBER" ]]; then
+  exit 0
+fi
+
+# GitHub provides refs/pull/<PR_NUMBER>/merge, an up-to-date merge branch for
+# every PR branch that can be cleanly merged to the main branch. For more
+# details, see: https://discuss.circleci.com/t/show-test-results-for-prospective-merge-of-a-github-pr/1662
+MERGE_BRANCH="refs/pull/$PR_NUMBER/merge"
+echo $(GREEN "Computing merge SHA of $MERGE_BRANCH...")
+CIRCLE_MERGE_SHA="$(git ls-remote https://github.com/ampproject/amphtml.git "$MERGE_BRANCH" | awk '{print $1}')"
+
+# Store the merge commit info in the CircleCI workspace for use by followup
+# jobs.
+echo "$CIRCLE_MERGE_SHA" > /tmp/workspace/.CIRCLECI_MERGE_COMMIT
+echo $(GREEN "Stored merge SHA $CIRCLE_MERGE_SHA in /tmp/workspace/.CIRCLECI_MERGE_COMMIT.")
+exit 0
diff --git a/.circleci/config.yml b/.circleci/config.yml
new file mode 100644
index 0000000000000..685f613d10ca5
--- /dev/null
+++ b/.circleci/config.yml
@@ -0,0 +1,414 @@
+version: 2.1
+
+orbs:
+  browser-tools: circleci/browser-tools@1.1.3
+
+push_and_pr_builds: &push_and_pr_builds
+  filters:
+    branches:
+      ignore:
+        - nightly
+
+push_builds_only: &push_builds_only
+  filters:
+    branches:
+      only:
+        - main
+        - /^amp-release-.*$/
+
+executors:
+  amphtml-docker-small-executor:
+    docker:
+      - image: cimg/base:2021.05
+    resource_class: small
+  amphtml-medium-executor:
+    machine:
+      image: ubuntu-2004:202010-01
+    resource_class: medium
+  amphtml-large-executor:
+    machine:
+      image: ubuntu-2004:202010-01
+    resource_class: large
+  amphtml-xlarge-executor:
+    machine:
+      image: ubuntu-2004:202010-01
+    resource_class: xlarge
+
+commands:
+  restore_workspace:
+    steps:
+      - attach_workspace:
+          at: /tmp
+      - run:
+          name: 'Rename Restored Workspace'
+          command: |
+            if [[ -d /tmp/workspace ]]; then
+              mv /tmp/workspace /tmp/restored-workspace
+            fi
+  maybe_gracefully_halt:
+    steps:
+      - run:
+          name: 'Maybe Gracefully Halt'
+          command: curl -sS https://raw.githubusercontent.com/ampproject/amphtml/main/.circleci/maybe_gracefully_halt.sh | bash
+  setup_vm:
+    steps:
+      - run:
+          name: 'Create Workspace'
+          command: mkdir -p /tmp/workspace
+      - checkout
+      - run:
+          name: 'Fetch Merge Commit'
+          command: ./.circleci/fetch_merge_commit.sh
+      - run:
+          name: 'Check Config'
+          command: ./.circleci/check_config.sh
+      - run:
+          name: 'Configure Hosts'
+          command: cat ./build-system/test-configs/hosts | sudo tee -a /etc/hosts
+      - run:
+          name: 'Install Dependencies'
+          command: ./.circleci/install_dependencies.sh
+      - run:
+          name: 'Restore Build Output'
+          command: ./.circleci/restore_build_output.sh
+  teardown_vm:
+    steps:
+      - persist_to_workspace:
+          root: /tmp
+          paths:
+            - workspace
+  install_chrome:
+    steps:
+      - browser-tools/install-chrome:
+          replace-existing: true
+  fail_fast:
+    steps:
+      - run:
+          name: 'Fail Fast'
+          when: on_fail
+          command: ./.circleci/fail_fast.sh
+  store_test_output:
+    steps:
+      - store_artifacts:
+          path: result-reports
+      - store_test_results:
+          path: result-reports
+
+jobs:
+  'Compute Merge Commit':
+    executor:
+      name: amphtml-docker-small-executor
+    steps:
+      - run:
+          name: 'Compute Merge Commit'
+          command: curl -sS https://raw.githubusercontent.com/ampproject/amphtml/main/.circleci/compute_merge_commit.sh | bash
+      - teardown_vm
+  'Checks':
+    executor:
+      name: amphtml-medium-executor
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - run:
+          name: 'Checks'
+          command: node build-system/pr-check/checks.js
+      - fail_fast
+      - teardown_vm
+  'Unminified Build':
+    executor:
+      name: amphtml-xlarge-executor
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - run:
+          name: 'Unminified Build'
+          command: node build-system/pr-check/unminified-build.js
+      - fail_fast
+      - teardown_vm
+  'Nomodule Build':
+    executor:
+      name: amphtml-xlarge-executor
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - run:
+          name: 'Create Artifacts Directory'
+          command: mkdir -p /tmp/artifacts
+      - run:
+          name: 'Nomodule Build'
+          command: node build-system/pr-check/nomodule-build.js
+      - store_artifacts:
+          path: /tmp/artifacts/amp_nomodule_build.tar.gz
+      - fail_fast
+      - teardown_vm
+  'Module Build':
+    executor:
+      name: amphtml-xlarge-executor
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - run:
+          name: 'Module Build'
+          command: node build-system/pr-check/module-build.js
+      - fail_fast
+      - teardown_vm
+  'Bundle Size':
+    executor:
+      name: amphtml-xlarge-executor
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - run:
+          name: 'Bundle Size'
+          command: node build-system/pr-check/bundle-size.js
+      - fail_fast
+      - teardown_vm
+  'Validator Tests':
+    executor:
+      name: amphtml-xlarge-executor
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - run:
+          name: 'Install Validator Dependencies'
+          command: ./.circleci/install_validator_dependencies.sh
+      - run:
+          name: 'Validator Tests'
+          command: node build-system/pr-check/validator-tests.js
+      - store_test_output
+      - fail_fast
+      - teardown_vm
+  'Visual Diff Tests':
+    executor:
+      name: amphtml-large-executor
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - install_chrome
+      - run:
+          name: 'Visual Diff Tests'
+          command: node build-system/pr-check/visual-diff-tests.js
+      - store_test_output
+      - fail_fast
+      - teardown_vm
+  'Unit Tests':
+    executor:
+      name: amphtml-large-executor
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - install_chrome
+      - run:
+          name: 'Unit Tests'
+          command: node build-system/pr-check/unit-tests.js
+      - store_test_output
+      - fail_fast
+      - teardown_vm
+  'Unminified Tests':
+    executor:
+      name: amphtml-large-executor
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - install_chrome
+      - run:
+          name: 'Unminified Tests'
+          command: node build-system/pr-check/unminified-tests.js
+      - store_test_output
+      - fail_fast
+      - teardown_vm
+  'Nomodule Tests':
+    executor:
+      name: amphtml-large-executor
+    parameters:
+      config:
+        description: 'Which config file to use'
+        type: enum
+        enum: ['prod', 'canary']
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - install_chrome
+      - run:
+          name: 'Nomodule Tests (<< parameters.config >>)'
+          command: node build-system/pr-check/nomodule-tests.js --config=<< parameters.config >>
+      - store_test_output
+      - fail_fast
+      - teardown_vm
+  'Module Tests':
+    executor:
+      name: amphtml-large-executor
+    parameters:
+      config:
+        description: 'Which config file to use'
+        type: enum
+        enum: ['prod', 'canary']
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - install_chrome
+      - run:
+          name: 'Module Tests (<< parameters.config >>)'
+          command: node build-system/pr-check/module-tests.js --config=<< parameters.config >>
+      - store_test_output
+      - fail_fast
+      - teardown_vm
+  'End-to-End Tests':
+    executor:
+      name: amphtml-large-executor
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - install_chrome
+      - run:
+          name: 'End-to-End Tests'
+          command: node build-system/pr-check/e2e-tests.js
+      - store_test_output
+      - fail_fast
+      - teardown_vm
+  'Performance Tests':
+    executor:
+      name: amphtml-xlarge-executor
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - install_chrome
+      - run:
+          name: 'Performance Tests'
+          command: node build-system/pr-check/performance-tests.js
+      - store_test_output
+      - fail_fast
+      - teardown_vm
+  'Experiment Build':
+    executor:
+      name: amphtml-xlarge-executor
+    parameters:
+      exp:
+        description: 'Which of the three (A/B/C) experiments to use'
+        type: enum
+        enum: ['A', 'B', 'C']
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - run:
+          name: 'Experiment << parameters.exp >> Build'
+          command: node build-system/pr-check/experiment-build.js --experiment=experiment<< parameters.exp >>
+      - fail_fast
+      - teardown_vm
+  'Experiment Tests':
+    executor:
+      name: amphtml-large-executor
+    parameters:
+      exp:
+        description: 'Which of the three (A/B/C) experiments to use'
+        type: enum
+        enum: ['A', 'B', 'C']
+    steps:
+      - restore_workspace
+      - maybe_gracefully_halt
+      - setup_vm
+      - install_chrome
+      - run:
+          name: 'Experiment << parameters.exp >> Tests'
+          command: node build-system/pr-check/experiment-tests.js --experiment=experiment<< parameters.exp >>
+      - store_test_output
+      - fail_fast
+      - teardown_vm
+
+workflows:
+  'CircleCI':
+    jobs:
+      - 'Compute Merge Commit':
+          <<: *push_and_pr_builds
+      - 'Checks':
+          <<: *push_and_pr_builds
+          requires:
+            - 'Compute Merge Commit'
+      - 'Unminified Build':
+          <<: *push_and_pr_builds
+          requires:
+            - 'Compute Merge Commit'
+      - 'Nomodule Build':
+          <<: *push_and_pr_builds
+          requires:
+            - 'Compute Merge Commit'
+      - 'Module Build':
+          <<: *push_and_pr_builds
+          requires:
+            - 'Compute Merge Commit'
+      - 'Bundle Size':
+          <<: *push_and_pr_builds
+          requires:
+            - 'Compute Merge Commit'
+      - 'Validator Tests':
+          <<: *push_and_pr_builds
+          requires:
+            - 'Compute Merge Commit'
+      - 'Visual Diff Tests':
+          <<: *push_and_pr_builds
+          requires:
+            - 'Nomodule Build'
+      - 'Unit Tests':
+          <<: *push_and_pr_builds
+          requires:
+            - 'Compute Merge Commit'
+      - 'Unminified Tests':
+          <<: *push_and_pr_builds
+          requires:
+            - 'Unminified Build'
+      - 'Nomodule Tests':
+          name: 'Nomodule Tests (<< matrix.config >>)'
+          matrix:
+            parameters:
+              config: ['prod', 'canary']
+          <<: *push_and_pr_builds
+          requires:
+            - 'Nomodule Build'
+      - 'Module Tests':
+          name: 'Module Tests (<< matrix.config >>)'
+          matrix:
+            parameters:
+              config: ['prod', 'canary']
+          <<: *push_and_pr_builds
+          requires:
+            - 'Nomodule Build'
+            - 'Module Build'
+      - 'End-to-End Tests':
+          <<: *push_and_pr_builds
+          requires:
+            - 'Nomodule Build'
+      - 'Experiment Build':
+          name: 'Experiment << matrix.exp >> Build'
+          matrix:
+            parameters:
+              exp: ['A', 'B', 'C']
+          <<: *push_and_pr_builds
+          requires:
+            - 'Compute Merge Commit'
+      - 'Experiment Tests':
+          name: 'Experiment << matrix.exp >> Tests'
+          matrix:
+            parameters:
+              exp: ['A', 'B', 'C']
+          <<: *push_and_pr_builds
+          requires:
+            - 'Experiment << matrix.exp >> Build'
+      # TODO(wg-performance, #12128): This takes 30 mins and fails regularly.
+      # - 'Performance Tests':
+      #     <<: *push_builds_only
+      #     requires:
+      #       - 'Nomodule Build'
diff --git a/.circleci/fail_fast.sh b/.circleci/fail_fast.sh
new file mode 100755
index 0000000000000..710e7e009dca8
--- /dev/null
+++ b/.circleci/fail_fast.sh
@@ -0,0 +1,74 @@
+#!/bin/bash
+#
+# Copyright 2021 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.
+
+# This script early-exits CircleCI PR builds when one of its jobs fails.
+# Reference: https://support.circleci.com/hc/en-us/articles/360052058811-Exit-build-early-if-any-test-fails
+# In case of the `main` or a release branch, it emails the build/release-on-duty
+# team using Twilio SendGrid: https://sendgrid.com/
+
+set -e
+
+RED() { echo -e "\n\033[0;31m$1\033[0m"; }
+YELLOW() { echo -e "\n\033[0;33m$1\033[0m"; }
+
+send_email() {
+  curl --request POST \
+    --url https://api.sendgrid.com/v3/mail/send \
+    --header "Authorization: Bearer ${SENDGRID_API_KEY}" \
+    --header "Content-Type: application/json" \
+    --data '{
+        "from": {
+          "email": "bot+noreply@amp.dev"
+        },
+        "template_id": "d-5a6b574506534ab3aad1da13a78cdeb4",
+        "personalizations": [
+          {
+            "to": [
+              {
+                "email": "'"${1}"'",
+                "name": "'"${2}"'"
+              }
+            ],
+            "dynamic_template_data": {
+              "branch": "'"${CIRCLE_BRANCH}"'",
+              "name": "'"${2}"'",
+              "build_url": "'"${CIRCLE_BUILD_URL}"'"
+            }
+          }
+        ]
+      }'
+}
+
+# For push builds, continue in spite of failures so that other jobs like
+# bundle-size and visual-diff can establish their baselines for this commit.
+# Without this, our custom bots will not be able to function correctly.
+if [[ "$CIRCLE_BRANCH" == "main" ]]; then
+  echo $(YELLOW "Not canceling build in spite of failures because ${CIRCLE_BRANCH} is not a PR branch.")
+  echo $(YELLOW "This main branch build failed, notifying @ampproject/build-on-duty.")
+  send_email "amp-build-on-duty@grotations.appspotmail.com" "AMP Build On-Duty"
+  exit 0
+elif [[ "$CIRCLE_BRANCH" =~ ^amp-release-* ]]; then
+  echo $(YELLOW "Not canceling build in spite of failures because ${CIRCLE_BRANCH} is not a PR branch.")
+  echo $(YELLOW "This release branch build failed, notifying @ampproject/release-on-duty.")
+  send_email "amp-release-on-duty@grotations.appspotmail.com" "AMP Release On-Duty"
+  exit 0
+fi
+
+# For PR builds, cancel when the first job fails.
+echo $(RED "Canceling PR build because a job failed.")
+curl -X POST \
+--header "Content-Type: application/json" \
+"https://circleci.com/api/v2/workflow/${CIRCLE_WORKFLOW_ID}/cancel?circle-token=${CIRCLE_TOKEN}"
diff --git a/.circleci/fetch_merge_commit.sh b/.circleci/fetch_merge_commit.sh
new file mode 100755
index 0000000000000..7921eab05b388
--- /dev/null
+++ b/.circleci/fetch_merge_commit.sh
@@ -0,0 +1,59 @@
+#!/bin/bash
+#
+# Copyright 2021 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.
+
+# This script fetches the merge commit of a PR branch with the main branch to
+# make sure PRs are tested against all the latest changes on CircleCI.
+
+set -e
+err=0
+
+GREEN() { echo -e "\n\033[0;32m$1\033[0m"; }
+RED() { echo -e "\n\033[0;31m$1\033[0m"; }
+
+# Try to determine the PR number.
+./.circleci/get_pr_number.sh
+if [[ -f "$BASH_ENV" ]]; then
+  source $BASH_ENV
+fi
+
+# If PR_NUMBER doesn't exist, there is nothing more to do.
+if [[ -z "$PR_NUMBER" ]]; then
+  exit 0
+fi
+
+# If PR_NUMBER exists, but the merge commit file doesn't exist, the PR was
+# created after the first stage of CI was run. There is nothing more to do.
+if [[ ! -f /tmp/restored-workspace/.CIRCLECI_MERGE_COMMIT ]]; then
+  exit 0
+fi
+
+# Extract the merge commit for this workflow and make it visible to other steps.
+CIRCLECI_MERGE_COMMIT="$(cat /tmp/restored-workspace/.CIRCLECI_MERGE_COMMIT)"
+echo "export CIRCLECI_MERGE_COMMIT=$CIRCLECI_MERGE_COMMIT" >> $BASH_ENV
+
+# Fetch the merge commit. This ensures that all CI stages use the same commit.
+echo $(GREEN "Fetching merge commit $CIRCLECI_MERGE_COMMIT...")
+(set -x && git pull --ff-only origin "$CIRCLECI_MERGE_COMMIT") || err=$?
+
+# If a clean merge is not possible, do not proceed with the build. GitHub's UI
+# will show an error indicating there was a merge conflict.
+if [[ "$err" -ne "0" ]]; then
+  echo $(RED "Detected a merge conflict between $CIRCLE_BRANCH and the main branch.")
+  echo $(RED "Please rebase your PR branch.")
+  exit $err
+fi
+
+echo $(GREEN "Successfully fetched merge commit of $CIRCLE_BRANCH with the main branch.")
diff --git a/.circleci/get_pr_number.sh b/.circleci/get_pr_number.sh
new file mode 100755
index 0000000000000..31cd5ec8de408
--- /dev/null
+++ b/.circleci/get_pr_number.sh
@@ -0,0 +1,55 @@
+#!/bin/bash
+#
+# Copyright 2021 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.
+
+# This script extracts the PR number (if there is one) for a CircleCI build.
+# Reference: https://circleci.com/docs/2.0/env-vars/#built-in-environment-variables
+
+set -e
+err=0
+
+GREEN() { echo -e "\n\033[0;32m$1\033[0m"; }
+YELLOW() { echo -e "\n\033[0;33m$1\033[0m"; }
+
+# Push builds are only run against the main branch and amp-release branches.
+if [[ "$CIRCLE_BRANCH" == "main" || "$CIRCLE_BRANCH" =~ ^amp-release-* ]]; then
+  echo $(GREEN "Nothing to do because $CIRCLE_BRANCH is not a PR branch.")
+  # Warn if the build is linked to a PR on a different repo (known CircleCI bug).
+  if [[ -n "$CIRCLE_PULL_REQUEST" && ! "$CIRCLE_PULL_REQUEST" =~ ^https://github.com/ampproject/amphtml* ]]; then
+    echo $(YELLOW "WARNING: Build is incorrectly linked to a PR outside ampproject/amphtml:")
+    echo $(YELLOW "$CIRCLE_PULL_REQUEST")
+  fi
+  exit 0
+fi
+
+# CIRCLE_PR_NUMBER is present for PRs originating from forks, but absent for PRs
+# originating from a branch on the main repo. In such cases, extract the PR
+# number from CIRCLE_PULL_REQUEST.
+if [[ "$CIRCLE_PR_NUMBER" ]]; then
+  PR_NUMBER=$CIRCLE_PR_NUMBER
+else
+  PR_NUMBER=${CIRCLE_PULL_REQUEST#"https://github.com/ampproject/amphtml/pull/"}
+fi
+
+# If neither CIRCLE_PR_NUMBER nor CIRCLE_PULL_REQUEST are available, it's
+# possible this is a PR branch that is yet to be associated with a PR. Exit
+# early becaue there is no merge commit to fetch.
+if [[ -z "$PR_NUMBER" ]]; then
+  echo $(GREEN "Nothing to do because $CIRCLE_BRANCH is not yet linked to a PR.")
+  exit 0
+fi
+
+echo "export PR_NUMBER=$PR_NUMBER" >> $BASH_ENV
+echo $(GREEN "This is a PR build for #$PR_NUMBER.")
diff --git a/.circleci/install_dependencies.sh b/.circleci/install_dependencies.sh
new file mode 100755
index 0000000000000..5f46966fce2ab
--- /dev/null
+++ b/.circleci/install_dependencies.sh
@@ -0,0 +1,41 @@
+#!/bin/bash
+#
+# Copyright 2021 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.
+
+# Script used by AMP's CI builds to install project dependencies on CircleCI.
+
+set -e
+
+GREEN() { echo -e "\033[0;32m$1\033[0m"; }
+
+echo $(GREEN "Installing NVM...")
+curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
+
+echo $(GREEN "Setting up NVM environment...")
+export NVM_DIR="/opt/circleci/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+
+echo $(GREEN "Installing Node LTS...")
+nvm install 'lts/*'
+
+echo $(GREEN "Installing dependencies...")
+npm ci
+
+echo $(GREEN "Setting up environment...")
+NPM_BIN_DIR="`npm config get prefix`/bin"
+(set -x && echo "export PATH=$NPM_BIN_DIR:$PATH" >> $BASH_ENV)
+
+echo $(GREEN "Successfully installed all project dependencies.")
diff --git a/.circleci/install_validator_dependencies.sh b/.circleci/install_validator_dependencies.sh
new file mode 100755
index 0000000000000..360c573f1d9d3
--- /dev/null
+++ b/.circleci/install_validator_dependencies.sh
@@ -0,0 +1,37 @@
+#!/bin/bash
+#
+# Copyright 2021 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.
+
+# Script used by AMP's CI builds to install AMP Validator dependencies on
+# CircleCI.
+
+set -e
+
+GREEN() { echo -e "\033[0;32m$1\033[0m"; }
+
+echo $(GREEN "Adding Bazel repo...")
+curl -fsSL https://bazel.build/bazel-release.pub.gpg | gpg --dearmor > bazel.gpg
+sudo mv bazel.gpg /etc/apt/trusted.gpg.d/
+echo "deb [arch=amd64] https://storage.googleapis.com/bazel-apt stable jdk1.8" | sudo tee /etc/apt/sources.list.d/bazel.list
+
+echo $(GREEN "Installing Bazel...")
+sudo apt update
+sudo apt install bazel
+
+echo $(GREEN "Installing Clang...")
+sudo apt install clang
+
+echo $(GREEN "Installing Protobuf...")
+pip3 install --user protobuf
diff --git a/.circleci/maybe_gracefully_halt.sh b/.circleci/maybe_gracefully_halt.sh
new file mode 100755
index 0000000000000..cb674c5a89f1b
--- /dev/null
+++ b/.circleci/maybe_gracefully_halt.sh
@@ -0,0 +1,61 @@
+#!/bin/bash
+#
+# Copyright 2021 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.
+
+# Script used by AMP's CI builds to gracefully halt unnecessary jobs, before
+# executing time-consuming steps such as checking out the code or installing
+# dependencies.
+
+set -e
+
+GREEN() { echo -e "\n\033[0;32m$1\033[0m"; }
+YELLOW() { echo -e "\n\033[0;33m$1\033[0m"; }
+
+if ls /tmp/restored-workspace/.CI_GRACEFULLY_HALT_* 1>/dev/null 2>&1; then
+  echo $(GREEN "Gracefully halting this job.")
+  circleci-agent step halt
+  exit 0
+fi
+
+if [[ $CIRCLE_JOB == Experiment* ]]; then
+  # Extract the experiment name from the job name in `config.yml`.
+  EXP=$(echo $CIRCLE_JOB | awk '{print $2}')
+
+  # Extract the commit SHA. For PR jobs, this is written to .CIRCLECI_MERGE_COMMIT.
+  if [[ -f /tmp/restored-workspace/.CIRCLECI_MERGE_COMMIT ]]; then
+    COMMIT_SHA="$(cat /tmp/restored-workspace/.CIRCLECI_MERGE_COMMIT)"
+  else
+    COMMIT_SHA="${CIRCLE_SHA1}"
+  fi
+
+  # Do not proceed if the experiment config is missing a valid name, constant, or date.
+  EXPERIMENT_JSON=$(curl -sS "https://raw.githubusercontent.com/ampproject/amphtml/${COMMIT_SHA}/build-system/global-configs/experiments-config.json" | jq ".experiment${EXP}")
+  if ! echo "${EXPERIMENT_JSON}" | jq -e '.name,.define_experiment_constant,.expiration_date_utc'; then
+    echo $(YELLOW "Experiment ${EXP} is misconfigured, or does not exist.")
+    echo $(GREEN "Gracefully halting this job")
+    circleci-agent step halt
+    exit 0
+  fi
+
+  # Do not proceed if the experiment is expired (config date is in the past).
+  CURRENT_TIMESTAMP=$(date --utc +'%s')
+  EXPERIMENT_EXPIRATION_TIMESTAMP=$(date --utc --date $(echo "${EXPERIMENT_JSON}" | jq -er '.expiration_date_utc') +'%s')
+  if [[ $CURRENT_TIMESTAMP -gt $EXPERIMENT_EXPIRATION_TIMESTAMP ]]; then
+    echo $(YELLOW "Experiment ${EXP} is expired.")
+    echo $(GREEN "Gracefully halting this job")
+    circleci-agent step halt
+    exit 0
+  fi
+fi
diff --git a/.circleci/restore_build_output.sh b/.circleci/restore_build_output.sh
new file mode 100755
index 0000000000000..c37d065576bcd
--- /dev/null
+++ b/.circleci/restore_build_output.sh
@@ -0,0 +1,44 @@
+#!/bin/bash
+#
+# Copyright 2021 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.
+
+# Script used by AMP's CI builds to restore any build outputs from previous jobs
+# in the workflow.
+
+set -e
+
+GREEN() { echo -e "\033[0;32m$1\033[0m"; }
+YELLOW() { echo -e "\033[0;33m$1\033[0m"; }
+CYAN() { echo -e "\033[0;36m$1\033[0m"; }
+
+MERGABLE_OUTPUT_DIRS="build dist dist.3p dist.tools"
+
+# TODO(danielrozenberg): remove conditional after #33708 is merged.
+WORKSPACE_DIR=$(if [[ -d /tmp/restored-workspace ]]; then echo "/tmp/restored-workspace"; else echo "/tmp/workspace"; fi)
+
+if [[ -d "${WORKSPACE_DIR}/builds" ]]; then
+  echo $(GREEN "Restoring build output from workspace")
+  for CONTAINER_DIR in ${WORKSPACE_DIR}/builds/*; do
+    for OUTPUT_DIR in ${MERGABLE_OUTPUT_DIRS}; do
+      RESTORED_DIR="${CONTAINER_DIR}/${OUTPUT_DIR}"
+      if [[ -d "${RESTORED_DIR}" ]]; then
+        echo "*" $(GREEN "Merging") $(CYAN "${RESTORED_DIR}") $(GREEN "into") $(CYAN "./${OUTPUT_DIR}")
+        rsync -a "${RESTORED_DIR}/" "./${OUTPUT_DIR}"
+      fi
+    done
+  done
+else
+  echo $(YELLOW "Workspace does not contain any build outputs to restore")
+fi
diff --git a/.codecov.yml b/.codecov.yml
index 95023199dd738..24c5fc928f729 100644
--- a/.codecov.yml
+++ b/.codecov.yml
@@ -2,8 +2,6 @@
 # See https://docs.codecov.io/docs/codecovyml-reference
 codecov:
   bot: 'amp-coverage-bot'
-  ci:
-    - 'travis.org'
   max_report_age: 24
   require_ci_to_pass: no
   notify:
@@ -13,20 +11,14 @@ codecov:
 # See https://docs.codecov.io/docs/pull-request-comments
 comment: false
 
-# Separate PR statuses for project-level and patch-level coverage
+# PR status for patch-level coverage
 # See https://docs.codecov.io/docs/commit-status
 coverage:
   precision: 2
   round: down
   range: '75...100'
   status:
-    project:
-      default:
-        base: auto
-        if_not_found: success
-        only_pulls: true
-        target: 75%
-        threshold: 1%
+    project: off
     patch:
       default:
         base: auto
diff --git a/.eslintignore b/.eslintignore
index 905a1ff9ff317..2b32663eb6a7d 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,19 +1,39 @@
+# Local cache directories
+# Keep this list in sync with .gitignore, .prettierignore, and build-system/tasks/clean.js
+.babel-cache
+.css-cache
+.pre-closure-cache
+
 # Output directories
-node_modules
-build/**
-dist/**
-dist.3p/**
-dist.tools/**
-firebase/**
-out/**
-test/coverage/**
+# Keep this list in sync with .gitignore, .prettierignore, and build-system/tasks/clean.js
+.amp-dep-check
+build
+build-system/dist
+build-system/server/new-server/transforms/dist
+build-system/tasks/performance/cache
+build-system/tasks/performance/results.json
+build-system/global-configs/custom-config.json
+dist
+dist.3p
+dist.tools
+export
+examples/storybook
+extensions/**/dist
+/release
+result-reports
+src/purifier/dist
+test/coverage
+test/coverage-e2e
+validator/**/dist
+validator/export
 
-# Code directories
-build-system/tasks/visual-diff/snippets/*.js
+# Files and directories explicitly ignored by eslint
 build-system/babel-plugins/**/fixtures/**/*.js
 build-system/babel-plugins/**/fixtures/**/*.mjs
-build-system/server/app-index/test/*.js
-examples/**
+build-system/tasks/make-extension/template/**/*
+build-system/tasks/visual-diff/snippets/*.js
+examples/amp-script/todomvc.ssr.js
+examples/amp-script/vue-todomvc.js
 extensions/amp-a4a/0.1/test/testdata/**
 src/purifier/noop.js
 testing/local-amp-chrome-extension/**
diff --git a/.eslintrc.js b/.eslintrc.js
index 1e928f4b5d950..02b361af84480 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,6 +15,10 @@
  */
 
 const fs = require('fs');
+const {
+  forbiddenTermsGlobal,
+  forbiddenTermsSrcInclusive,
+} = require('./build-system/test-configs/forbidden-terms');
 
 /**
  * Dynamically extracts experiment globals from the config file.
@@ -34,16 +38,18 @@ function getExperimentGlobals() {
 
 module.exports = {
   'root': true,
-  'parser': 'babel-eslint',
+  'parser': '@babel/eslint-parser',
   'plugins': [
     'chai-expect',
     'google-camelcase',
+    'import',
     'jsdoc',
     'local',
     'notice',
     'prettier',
     'react',
     'react-hooks',
+    'sort-destructure-keys',
     'sort-imports-es6-autofix',
     'sort-requires',
   ],
@@ -59,6 +65,7 @@ module.exports = {
   'globals': {
     ...getExperimentGlobals(),
     'IS_ESM': 'readonly',
+    'IS_SXG': 'readonly',
     'AMP': 'readonly',
     'context': 'readonly',
     'global': 'readonly',
@@ -79,6 +86,7 @@ module.exports = {
       'pragma': 'Preact',
     },
   },
+  'reportUnusedDisableDirectives': true,
   'rules': {
     'chai-expect/missing-assertion': 2,
     'chai-expect/no-inner-compare': 2,
@@ -96,7 +104,6 @@ module.exports = {
           'export',
           'final',
           'nocollapse',
-          'noinline',
           'package',
           'record',
           'restricted',
@@ -127,6 +134,7 @@ module.exports = {
     'local/html-template': 2,
     'local/is-experiment-on': 2,
     'local/json-configuration': 2,
+    'local/jss-animation-name': 2,
     'local/no-array-destructuring': 2,
     'local/no-arrow-on-register-functions': 2,
     'local/no-bigint': 2,
@@ -136,7 +144,11 @@ module.exports = {
     'local/no-dynamic-import': 2,
     'local/no-es2015-number-props': 2,
     'local/no-export-side-effect': 2,
-    'local/no-for-of-statement': 2,
+    'local/no-forbidden-terms': [
+      2,
+      forbiddenTermsGlobal,
+      forbiddenTermsSrcInclusive,
+    ],
     'local/no-function-async': 2,
     'local/no-function-generator': 2,
     'local/no-global': 0,
@@ -144,17 +156,19 @@ module.exports = {
     'local/no-import': 2,
     'local/no-import-meta': 2,
     'local/no-import-rename': 2,
-    'local/no-is-amp-alt': 2,
+    'local/no-invalid-this': 2,
     'local/no-log-array': 2,
     'local/no-mixed-interpolation': 2,
     'local/no-mixed-operators': 2,
     'local/no-module-exports': 2,
     'local/no-rest': 2,
     'local/no-spread': 2,
+    'local/no-static-this': 2,
     'local/no-style-display': 2,
     'local/no-style-property-setting': 2,
     'local/no-swallow-return-from-allow-console-error': 2,
     'local/no-unload-listener': 2,
+    'local/objstr-literal': 2,
     'local/preact': 2,
     'local/prefer-deferred-promise': 0,
     'local/prefer-destructuring': 2,
@@ -185,7 +199,7 @@ module.exports = {
     'no-lone-blocks': 2,
     'no-native-reassign': 2,
     'no-redeclare': 2,
-    'no-restricted-globals': [2, 'error', 'event'],
+    'no-restricted-globals': [2, 'error', 'event', 'Animation'],
     'no-script-url': 2,
     'no-self-compare': 2,
     'no-sequences': 2,
@@ -202,13 +216,6 @@ module.exports = {
     'no-useless-concat': 2,
     'no-undef': 2,
     'no-var': 2,
-    'no-warning-comments': [
-      2,
-      {
-        'terms': ['do not submit'],
-        'location': 'anywhere',
-      },
-    ],
     'notice/notice': [
       2,
       {
@@ -245,6 +252,7 @@ module.exports = {
         },
       },
     ],
+    'sort-destructure-keys/sort-destructure-keys': 2,
     'sort-imports-es6-autofix/sort-imports-es6': [
       2,
       {
@@ -263,6 +271,7 @@ module.exports = {
         'extensions/**/test-e2e/*.js',
         'ads/**/test/**/*.js',
         'testing/**/*.js',
+        'build-system/**/test/*.js',
       ],
       'rules': {
         'require-jsdoc': 0,
@@ -272,6 +281,7 @@ module.exports = {
         'local/no-function-async': 0,
         'local/no-function-generator': 0,
         'local/no-import-meta': 0,
+        'local/no-invalid-this': 0,
         'jsdoc/check-param-names': 0,
         'jsdoc/check-tag-names': 0,
         'jsdoc/check-types': 0,
@@ -300,18 +310,37 @@ module.exports = {
       },
     },
     {
-      'files': ['babel.config.js', '**/.eslintrc.js'],
+      'files': ['**/test-*', '**/*_test.js', '**/testing/**'],
+      'rules': {
+        'local/no-forbidden-terms': [2, forbiddenTermsGlobal],
+      },
+    },
+    {
+      'files': ['**/storybook/*.js'],
+      'rules': {
+        'require-jsdoc': 0,
+        'local/no-forbidden-terms': [2, forbiddenTermsGlobal],
+      },
+    },
+    {
+      'files': [
+        '**/.eslintrc.js',
+        'amp.js',
+        'babel.config.js',
+        'package-scripts.js',
+      ],
       'globals': {
         'module': false,
         'process': false,
         'require': false,
       },
       'rules': {
+        'local/no-forbidden-terms': 0,
         'local/no-module-exports': 0,
       },
     },
     {
-      'files': ['**/*.extern.js'],
+      'files': ['**/*.extern.js', '**/*.type.js'],
       'rules': {
         'no-var': 0,
         'no-undef': 0,
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000000000..eda3c8538421c
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,5 @@
+# Force line endings to LF.
+# Specially useful for contributors on Windows machines.
+* text=auto eol=lf
+*.{cmd,[cC][mM][dD]} text eol=crlf
+*.{bat,[bB][aA][tT]} text eol=crlf
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
deleted file mode 100644
index a8e26832e299e..0000000000000
--- a/.github/ISSUE_TEMPLATE.md
+++ /dev/null
@@ -1,32 +0,0 @@
-**Please only file bugs/feature requests for AMP here.**
-
-- If you have questions about how to use AMP or other general questions about AMP please ask them on Stack Overflow under the AMP HTML tag instead of filing an issue here: http://stackoverflow.com/questions/tagged/amp-html
-- If you have questions/issues related to Google Search please ask them in Google's AMP forum instead of filing an issue here: https://goo.gl/utQ1KZ
-
-If you have a bug or feature request for AMP please fill in the following template. Delete everything except the headers (including this text).
-
-## What's the issue?
-
-Briefly describe the bug/feature request.
-
-## How do we reproduce the issue?
-
-If this is a bug please provide a public URL and ideally a reduced test case (e.g. on jsbin.com, codepen.io, or glitch.com) that exhibits only your issue and nothing else. Then provide step-by-step instructions for reproducing the issue:
-
-1. Step 1 to reproduce
-2. Step 2 to reproduce
-3. …
-
-If this is a feature request you can use this section to point to a prototype/mockup that will help us understand the request.
-
-### Tips on Rendering Bugs
-
-If you're reporting a bug that's the result of rendering data from an endpoint (e.g. with `<amp-list>` or `<amp-form>`), it's helpful to include sample JSON data from your endpoint. [JSONPlaceholder](https://jsonplaceholder.typicode.com/) is great for providing publicly accessible sample endpoint as well as dummy json endpoints.
-
-## What browsers are affected?
-
-All browsers? Some specific browser? What device type?
-
-## Which AMP version is affected?
-
-Is this a new issue? Or was it always broken? Paste your AMP version. You can find it in the browser dev tools.
diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
deleted file mode 100644
index 4b390fb2ea0af..0000000000000
--- a/.github/ISSUE_TEMPLATE/bug-report.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-name: Bug report
-about: Used to report bugs in AMP.
-title: ''
-labels: 'Type: Bug'
-assignees: ''
-
----
-
-**Please only file reports about bugs in AMP here.**
-
-- If you have questions about how to use AMP or other general questions about AMP please ask them on Stack Overflow under the AMP HTML tag instead of filing an issue here: http://stackoverflow.com/questions/tagged/amp-html
-- If you have questions/issues related to Google Search please ask them in Google's AMP forum instead of filing an issue here: https://goo.gl/utQ1KZ
-
-If you have a bug for AMP please fill in the following template. Delete everything except the headers (including this text).
-
-## What's the issue?
-
-Briefly describe the bug.
-
-## How do we reproduce the issue?
-
-Please provide a public URL and ideally a reduced test case (e.g. on jsbin.com) that exhibits only your issue and nothing else. Provide step-by-step instructions for reproducing the issue:
-
-1. Step 1 to reproduce
-2. Step 2 to reproduce
-3. …
-
-## What browsers are affected?
-
-All browsers? Some specific browser? What device type?
-
-## Which AMP version is affected?
-
-Is this a new issue? Or was it always broken? Paste the version of AMP where you saw this issue. (You can find the version printed in your browser's console.)
diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
new file mode 100644
index 0000000000000..0501127e131ac
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -0,0 +1,67 @@
+---
+name: Bug Report
+description: Report a bug in AMP.
+labels: 'Type: Bug'
+body:
+  - type: markdown
+    id: header
+    attributes:
+      value: |
+        Thanks for filling out this bug report.
+        - Bugs related to the [AMP](https://amp.dev) format and cache can be reported using the form below.
+        - Bugs related to the [AMP WordPress Plugin](https://wordpress.org/plugins/amp/) can be reported at the [support forum](https://wordpress.org/support/plugin/amp/) or at the [`amp-wp`](https://github.com/ampproject/amp-wp/issues) repository.
+        - Questions about AMP uage can be asked at the [`#using-amp`](https://amphtml.slack.com/archives/C9HPA6HGB) Slack channel or at the [`amp-html`](http://stackoverflow.com/questions/tagged/amp-html) tag at Stack Overflow.
+        - Questions about Google Search can be asked at Google's [Help Community](https://goo.gl/utQ1KZ).
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: A brief description of the bug.
+      placeholder: Describe the expected vs. the current behavior, so this issue can be directed to the correct working group for investigation.
+    validations:
+      required: true
+  - type: textarea
+    id: repro_steps
+    attributes:
+      label: Reproduction Steps
+      description: Step-by-step instructions for reproducing the issue.
+      placeholder: Provide a publicly accessible URL and a reduced set of steps that clearly demonstrate the issue.
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Relevant Logs
+      description: Relevant logging output.
+      placeholder: Paste any plain-text logs here (e.g. console warnings or errors from Chrome DevTools). They will automatically be formatted as code.
+      render: shell
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: Browser(s) Affected
+      description: If applicable, specify which browser(s) are affected. Select one or more options below.
+      multiple: true
+      options:
+        - Chrome
+        - Firefox
+        - Safari
+        - Edge
+        - UC Browser
+  - type: input
+    id: operating_systems
+    attributes:
+      label: OS(s) Affected
+      description: If applicable, specify which operating system(s) are affected.
+      placeholder: e.g. Android 11
+  - type: input
+    id: devices
+    attributes:
+      label: Device(s) Affected
+      description: If applicable, specify which device(s) are affected.
+      placeholder: e.g. Pixel 3
+  - type: input
+    id: version
+    attributes:
+      label: AMP Version Affected
+      description: If applicable, specify which version is affected, in the format YYMMDDHHMMXXX.
+      placeholder: e.g. 2101280515000
diff --git a/.github/ISSUE_TEMPLATE/cherry-pick-request.yml b/.github/ISSUE_TEMPLATE/cherry-pick-request.yml
new file mode 100644
index 0000000000000..ba71d5a81911e
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/cherry-pick-request.yml
@@ -0,0 +1,134 @@
+---
+name: Cherry-Pick Request
+description: Request a cherry-pick to an AMP release.
+labels:
+  [
+    'Type: Release',
+    'Cherry-pick: Beta',
+    'Cherry-pick: Experimental',
+    'Cherry-pick: LTS',
+    'Cherry-pick: Stable',
+  ]
+title: "\U0001F338 Cherry-pick request for #ISSUE into #RELEASE"
+body:
+  - type: markdown
+    id: header
+    attributes:
+      value: |
+        Thanks for filling out this cherry-pick request.
+        - See AMP's [release schedule](https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md) to learn about how releases work.
+        - See AMP's [release calendar](https://amp-release-calendar.appspot.com) for information about past releases (e.g. versions, dates, submission times, notes).
+        - See AMP's [code contribution docs](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#Cherry-picks) for an overview of the cherry-pick process.
+  - type: input
+    id: issue
+    attributes:
+      label: Issue (P0 Bug)
+      description: The P0 bug that necessitates this cherry-pick. Remember to update the issue title with this info.
+      placeholder: 'e.g. #11111'
+    validations:
+      required: true
+  - type: input
+    id: pull_request
+    attributes:
+      label: Pull Request(s)
+      description: The PR(s) that fix the bug. Make sure they are merged and have passing [CI builds](https://app.circleci.com/pipelines/github/ampproject/amphtml?branch=main).
+      placeholder: 'e.g. #22222, #33333'
+    validations:
+      required: true
+  - type: input
+    id: release_tracker
+    attributes:
+      label: Release Tracker(s)
+      description: The [tracker issue(s)](https://github.com/ampproject/amphtml/labels/Type%3A%20Release) for the release to which the cherry-pick will be applied. Remember to update the issue title with this info.
+      placeholder: 'e.g. #44444, #55555'
+    validations:
+      required: true
+  - type: dropdown
+    id: channels
+    attributes:
+      label: Channels
+      description: The [release channels](https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md#release-channels) to which the cherry-pick will be applied. Remember to update the issue labels with this info.
+      multiple: true
+      options:
+        - Beta / Experimental
+        - Stable
+        - LTS
+    validations:
+      required: true
+  - type: textarea
+    id: justification
+    attributes:
+      label: Justification
+      description: Why you believe this issue meets the [cherry-pick criteria](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#Cherry-picks).
+      placeholder: Provide a specific rationale for why this fix cannot wait until the next Stable release.
+    validations:
+      required: true
+  - type: textarea
+    id: verification_steps
+    attributes:
+      label: Verification Steps
+      description: How the fix can be verified once the cherry-pick has been performed.
+      placeholder: Provide detailed steps to manually verify the changes in this cherry-pick. They will be run by a developer or a QA expert to ensure that the bug was indeed fixed.
+    validations:
+      required: true
+  - type: markdown
+    id: mini_postmortem
+    attributes:
+      value: |
+        ## Mini Postmortem
+        For cherry-picks to Stable or LTS, the following sections serve as a postmortem, and are meant to document things like the bug summary, its root causes, user impact, and action items. Fill in these sections to the best of your knowledge so that similar issues can be prevented in future. For cherry-picks to only Beta / Experimental, these sections can be ignored.
+  - type: textarea
+    id: summary
+    attributes:
+      label: Summary
+      description: A summary of the problem and its root cause(s).
+      placeholder: |
+        For Stable or LTS cherry-picks, provide answers to questions like:
+        - What is the bug being fixed?
+        - What are its root cause(s)?
+        - Could it have been detected by error reports, error / performance graphs, or CI checks?
+        If details are as yet unknown, put down "TODO" in this section and remember to fill it in later.
+  - type: textarea
+    id: impact
+    attributes:
+      label: Impact
+      description: How users were impacted.
+      placeholder: |
+        For Stable or LTS cherry-picks, provide answers to questions like:
+        - Which users were affected? E.g. Users of Firefox version XXX.
+        - Roughly how many users? E.g. O(YYY) users.
+        - How were they affected? E.g. ZZZ feature did not work.
+        If details are as yet unknown, put down "TODO" in this section and remember to fill it in later.
+  - type: textarea
+    id: action_items
+    attributes:
+      label: Action Items
+      description: What can be done to prevent this in future.
+      placeholder: |
+        For Stable or LTS cherry-picks, provide answers to questions like:
+        - How can this class of bugs be prevented in the future?
+        - How do we detect them sooner and mitigate their impact?
+        - How could we make the investigation of these issues easier?
+        If details are as yet unknown, put down "TODO" in this section and remember to fill it in later.
+  - type: textarea
+    id: cherry_pick_progress
+    attributes:
+      label: Cherry-Pick Progress
+      description: Progress details for this cherry-pick.
+      value: |
+        <!-- Leave this section as it is for now. -->
+
+        To be updated by @ampproject/release-on-duty as each stage is completed.
+        - [x] Cherry-pick request created
+        - [ ] Cherry-pick request approved
+        - [ ] New version released to Beta / Experimental channels
+        - [ ] New version released to Stable channel
+        - [ ] New version released to LTS channel
+        - [ ] Release tracker updated
+        - [ ] Cherry-pick completed
+  - type: textarea
+    id: notifications
+    attributes:
+      label: Notifications
+      description: Add working groups or individuals you want to notify about this cherry-pick.
+      value: /cc @ampproject/release-on-duty @ampproject/wg-approvers @ampproject/cherry-pick-approvers
diff --git a/.github/ISSUE_TEMPLATE/cherry_pick_template.md b/.github/ISSUE_TEMPLATE/cherry_pick_template.md
deleted file mode 100644
index 75e9f7b1d4cd6..0000000000000
--- a/.github/ISSUE_TEMPLATE/cherry_pick_template.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-name: Cherry-pick request
-about: Used to request a cherry-pick. See go.amp.dev/cherry-picks
-title: "\U0001F338 Cherry-pick request for #<ISSUE_NUMBER> into #<RELEASE_ISSUE> (Pending)"
-labels:
-  'Cherry-pick: Beta, Cherry-pick: Experimental, Cherry-pick: LTS, Cherry-pick: Stable, Type:
-  Release'
-assignees: ''
----
-
-<!--
-MUST: Replace *everything* in angle brackets in the title AND body of this issue.
-MUST: Update issue labels to indicate which channels the cherry-pick is going into.
-
-If you have any questions see the [cherry-pick documentation](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#Cherry-picks).
--->
-
-# Cherry-pick request
-
-<!--
-TIP: Cherry-picks into Stable most likely require a cherry-pick into Beta / Experimental too. Otherwise, your fix will be lost when Beta is promoted.
--->
-
-|       Issue       |       PR       | Beta / Experimental? |   Stable?    |     LTS?     | [Release issue](https://github.com/ampproject/amphtml/labels/Type%3A%20Release) |
-| :---------------: | :------------: | :------------------: | :----------: | :----------: | ------------------------------------------------------------------------------- |
-| #<_ISSUE_NUMBER_> | #<_PR_NUMBER_> |     **<YES/NO>**     | **<YES/NO>** | **<YES/NO>** | #<_RELEASE_ISSUE_>                                                              |
-
-## Why does this issue meet the [cherry-pick criteria](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#Cherry-picks)?
-
-<!--
-TIP: Be specific.
--->
-
-<_YOUR_REASONS_>
-
-<!--
-CONDITION: Cherry-picking into Stable but _not_ Beta / Experimental. Otherwise, delete.
--->
-
-## Why is a Beta / Experimental cherry-pick not needed?
-
-<_YOUR_REASONS_>
-
-<!--
-CONDITION: Cherry-picking into LTS. Otherwise, delete.
--->
-
-## Why is an LTS cherry-pick needed?
-
-<_YOUR_REASONS_>
-
-<!--
-MUST: Filling out the mini-PM template is required _after_ the deployment of a stable cherry-pick. If this cherry-pick does not include stable, the mini-PM section can be deleted.
-
-MUST: This issue cannot be closed until the mini-PM is written and its action items are completed.
--->
-
-# Mini-postmortem
-
-> **TODO:** This postmortem will be written after the cherry-pick deployment and before this issue is closed. Delete this TODO when the postmortem is ready.
-
-## Summary
-
-<_1-2 sentences summarizing the problem and root causes._>
-
-## Impact
-
-- <_Which users were affected? Roughly how many?_>
-- <_How were users affected? E.g. partial or complete loss of functionality?_>
-
-## Action Items
-
-<!--
-TIP: How can we:
-- Prevent this class of bugs in the future?
-- Mitigate impact by detecting them sooner?
-- Make investigating these issues easier?
--->
-
-- #<_ISSUE_NUMBER_>: <_Add unit/integration/end-to-end test_>
-- #<_ISSUE_NUMBER_>: <_Add monitoring for edge case via error logging_>
-- #<_ISSUE_NUMBER_>: <_Refactor an easily misused API_>
-
----
-
-/cc @ampproject/release-on-duty @ampproject/wg-approvers @ampproject/cherry-pick-approvers
diff --git a/.github/ISSUE_TEMPLATE/error-report.md b/.github/ISSUE_TEMPLATE/error-report.md
deleted file mode 100644
index be0b4c5e8e3d9..0000000000000
--- a/.github/ISSUE_TEMPLATE/error-report.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-name: Error report
-about: Used to report production errors seen in AMP Error Reporting.
-title: "\U0001F6A8 Error: [error message]"
-labels: 'Type: Error Report'
-assignees: ''
-
----
-
-<!--
-Please only file error reports from AMP Error Reporting here.
-Replace/remove all of the text in brackets, including this text.
--->
-
-Details
----
-
-<!--
-Remove the backticks around the link below and replace Error_ID with the ID from
-the Cloud Error Reporting URL.
--->
-**Error report:** `[link](go/ampe/<Error_ID>)`
-**First seen:** <First seen date> <!--
-Select "1 day" on the error details page for the error and record the
-occurrences.
--->
-**Frequency:** ~ <Daily occurrences>/day
-
-
-Stacktrace
----
-```
-<!-- Stacktrace here -->
-```
-
-<!--
-If there are other interesting trends to note (ex. all user-agent strings are
-from iPhones, sudden jump in volume with recent release, etc.),
-uncomment and include them in the section below.
--->
-
-<!--
-Notes
----
-<Additional notes>
--->
-
-/cc @ampproject/release-on-duty
diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml
new file mode 100644
index 0000000000000..5b2bc44c97c45
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature-request.yml
@@ -0,0 +1,36 @@
+---
+name: Feature Request
+description: Request a new feature in AMP.
+labels: 'Type: Feature Request'
+body:
+  - type: markdown
+    id: header
+    attributes:
+      value: |
+        Thanks for filling out this feature request.
+        - Feature requests related to the [AMP](https://amp.dev) format and cache can be reported using the form below.
+        - Feature requests related to the [AMP WordPress Plugin](https://wordpress.org/plugins/amp/) can be reported at the [support forum](https://wordpress.org/support/plugin/amp/) or at the [`amp-wp`](https://github.com/ampproject/amp-wp/issues) repository.
+        - Questions about AMP uage can be asked at the [`#using-amp`](https://amphtml.slack.com/archives/C9HPA6HGB) Slack channel or at the [`amp-html`](http://stackoverflow.com/questions/tagged/amp-html) tag at Stack Overflow.
+        - Questions about Google Search can be asked at Google's [Help Community](https://goo.gl/utQ1KZ).
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: A brief description of the feature request.
+      placeholder: Provide a clear and concise description of the new feature or change to an existing feature you'd like to see.
+    validations:
+      required: true
+  - type: textarea
+    id: alternatives_considered
+    attributes:
+      label: Alternatives Considered
+      description: Alternatives to this feature request.
+      placeholder: Provide details around any alternative solutions or features you've considered.
+    validations:
+      required: true
+  - type: textarea
+    id: additional_context
+    attributes:
+      label: Additional Context
+      description: Other relevant context.
+      placeholder: Add any other context about your feature request here. E.g. paste a screenshot, or provide a link.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
deleted file mode 100644
index 62d84276f6efa..0000000000000
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Used to report a feature request for AMP.
-title: ''
-labels: 'Type: Feature Request'
-assignees: ''
-
----
-
-## Describe the new feature or change to an existing feature you'd like to see
-
-A clear and concise description of what you want to happen.
-
-## Describe alternatives you've considered
-
-Provide a clear and concise description of any alternative solutions or features you've considered.
-
-## Additional context
-
-Add any other context or screenshots about the feature request here.
diff --git a/.github/ISSUE_TEMPLATE/intent-to-deprecate--i2d-.md b/.github/ISSUE_TEMPLATE/intent-to-deprecate--i2d-.md
deleted file mode 100644
index 133f5d21822c9..0000000000000
--- a/.github/ISSUE_TEMPLATE/intent-to-deprecate--i2d-.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-name: Intent-to-deprecate (I2D)
-about: Proposes deprecating an existing AMP feature.
-title: 'Intent-to-Deprecate: <feature being deprecated>'
-labels: INTENT TO DEPRECATE
-assignees: ''
-
----
-
-<!--
-Replace/remove all of the text in brackets, including this text.
-
-See https://github.com/ampproject/amphtml/blob/master/spec/amp-versioning-policy.md for details on AMP's deprecation policy, instructions on filling out this I2D template and how to get help if you have questions.
-
-If your feature can be removed immediately after deprecation, you can use this issue to track removal as well (changing the title to "Intent-to-Deprecate-and-Remove" and adding the "INTENT TO REMOVE" label).  Otherwise you will file a separate Intent-to-Remove (I2R) issue after the feature has been deprecated and you are ready to remove the feature.
--->
-
-## Summary
-
-<!--
-Provide a brief description of the feature you are planning on deprecating and a concrete plan for deprecating the feature.  Provide the detailed removal plan if the feature is ready for immediate removal after deprecation, otherwise provide an initial plan for removing the deprecated feature and file a separate Intent-to-Remove issue after this issue is approved.
--->
-
-## Motivation
-
-<!--
-Explain why this feature needs to be deprecated and eventually removed.
--->
-
-## Impact on existing users
-
-<!--
-How seriously would the removal of this feature break sites that currently use AMP?  If available what is the estimated usage of this feature?
--->
-
-## Alternative implementation suggestion for developers using AMP
-
-<!--
-When the feature you are deprecating is removed, how would developers using AMP achieve similar functionality?
--->
-
-## Additional context
-
-<!--
-Add any other information that may help people understand your I2D.
--->
-
-<!--
-Add anyone to this cc line that you want to notify about this I2D.
--->
-
-/cc @ampproject/wg-approvers
diff --git a/.github/ISSUE_TEMPLATE/intent-to-deprecate.yml b/.github/ISSUE_TEMPLATE/intent-to-deprecate.yml
new file mode 100644
index 0000000000000..997b566a61f31
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/intent-to-deprecate.yml
@@ -0,0 +1,57 @@
+---
+name: Intent-to-Deprecate (I2D)
+description: Propose that an existing AMP feature be deprecated.
+labels: INTENT TO DEPRECATE
+body:
+  - type: markdown
+    id: header
+    attributes:
+      value: |
+        Thanks for creating this Intent-to-Deprecate (I2D) issue.
+        - See AMP's [versioning and deprecations policy](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-versioning-policy.md) for instructions on how to fill out this I2D template and how to get help.
+        - If the feature can be removed immediately after deprecation, add the "INTENT TO REMOVE" label to this issue.
+        - Otherwise, file a separate Intent-to-Remove (I2R) when the feature is ready for removal.
+  - type: textarea
+    id: summary
+    attributes:
+      label: Summary
+      description: A brief description of the feature to be deprecated.
+      placeholder: Provide the detailed removal plan if the feature is ready for immediate removal after deprecation. Otherwise provide an initial plan for removing the deprecated feature and file a separate Intent-to-Remove (I2R) issue after this issue is approved.
+    validations:
+      required: true
+  - type: textarea
+    id: motivation
+    attributes:
+      label: Motivation
+      description: The rationale behind this deprecation.
+      placeholder: Explain why this feature needs to be deprecated and eventually removed.
+    validations:
+      required: true
+  - type: textarea
+    id: impact
+    attributes:
+      label: Impact on Existing Users
+      description: How this will affect existing users.
+      placeholder: Explain how the removal of this feature will affect sites that currently use AMP. If available, provide the estimated usage of this feature.
+    validations:
+      required: true
+  - type: textarea
+    id: alternative_implementation
+    attributes:
+      label: Alternative Implementation
+      description: Alternative implementation suggestions for developers using AMP.
+      placeholder: Explain how developers using AMP can achieve similar functionality after the feature you are deprecating is removed.
+    validations:
+      required: true
+  - type: textarea
+    id: additional_context
+    attributes:
+      label: Additional Context
+      description: Any other relevant context.
+      placeholder: Add any other context that may help people understand your I2D. E.g. paste a screenshot, or provide a link.
+  - type: textarea
+    id: notifications
+    attributes:
+      label: Notifications
+      description: Add working groups or individuals you want to notify about this I2D.
+      value: /cc @ampproject/wg-approvers
diff --git a/.github/ISSUE_TEMPLATE/intent-to-implement--i2i-.md b/.github/ISSUE_TEMPLATE/intent-to-implement--i2i-.md
deleted file mode 100644
index 556581676751f..0000000000000
--- a/.github/ISSUE_TEMPLATE/intent-to-implement--i2i-.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-name: Intent-to-implement (I2I)
-about: Proposes a significant change/update to AMP. See https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md.
-title: 'I2I: <your feature/change>'
-labels: INTENT TO IMPLEMENT
-assignees: ''
-
----
-
-<!--
-Replace/remove all of the text in brackets, including this text.
-
-See https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md for help determining if you need to file an I2I for your change/fix, instructions on filling out this I2I template and how to get help if you have questions. Note that If you are implementing a minor change/fix, you likely do not need to file this I2I.
-
-If you haven't already done so, sign the Contributor License Agreement (CLA) as soon as possible to avoid delays merging your code. A signed CLA is not necessary to submit this I2I or to send a pull request, but it will be needed before your code can be merged. See https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#contributor-license-agreement for more information on CLAs.
--->
-
-## Summary
-
-<!--
-Provide a brief description of the feature/change you are planning on implementing.
--->
-
-## Design document
-
-<!--
-Provide a link to your design document once you have one. You do not need a design document to file this I2I.
--->
-
-## Motivation
-
-<!--
-Explain why AMP needs this change. It may be useful to describe what AMP developers/users are forced to do without it. When possible, include links to back up your claims.
--->
-
-A clear and concise description of any alternative solutions or features you've considered.
-
-## Additional context
-
-<!--
-Add any other information that may help people understand your I2I.
--->
-
-## Launch tracker
-
-<!--
-The launch tracker is meant to be an easy way of sharing a project's status with others on the AMP Project.
-You should add a link to the launch tracker for this work here if applicable. One ideal template and instructions can be found here: bit.ly/amp-launch-tracker
--->
-
-<!--
-Add anyone to this cc line that you want to notify about this I2I, including a reviewer once you have found one. See https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md for help in finding a reviewer.
--->
-
-/cc @ampproject/wg-approvers
diff --git a/.github/ISSUE_TEMPLATE/intent-to-implement.yml b/.github/ISSUE_TEMPLATE/intent-to-implement.yml
new file mode 100644
index 0000000000000..a202ef107c6a8
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/intent-to-implement.yml
@@ -0,0 +1,56 @@
+---
+name: Intent-to-Implement (I2I)
+description: Propose a significant feature or change to AMP.
+labels: INTENT TO IMPLEMENT
+body:
+  - type: markdown
+    id: header
+    attributes:
+      value: |
+        Thanks for creating this Intent-to-Implement (I2I) issue.
+        - See AMP's [code contribution guide](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md) for instructions on how to fill out this I2I form and how to get help.
+        - Note that if you are implementing a minor change or fix, you likely do not need to file an I2I.
+        - If you haven't already done so, sign AMP's [Contributor License Agreement (CLA)](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#contributor-license-agreement).
+        - A signed CLA is not required to submit this I2I or to create a PR, but is required before code can be merged.
+  - type: textarea
+    id: summary
+    attributes:
+      label: Summary
+      description: A brief description of the feature being implemented.
+      placeholder: Provide a brief description of the feature you are planning on implementing.
+    validations:
+      required: true
+  - type: textarea
+    id: design_doc
+    attributes:
+      label: Design Document
+      description: Document that describes the feature's design.
+      placeholder: Provide a link to your design document once you have one. You do not need a design document to file this I2I.
+  - type: textarea
+    id: motivation
+    attributes:
+      label: Motivation
+      description: The rationale behind this feature.
+      placeholder: Explain why AMP needs this change. It may be useful to describe what AMP developers/users are forced to do without it. When possible, include links to back up your claims.
+    validations:
+      required: true
+  - type: textarea
+    id: alternative_solutions
+    attributes:
+      label: Alternative Solutions
+      description: Alternative solutions for developers using AMP.
+      placeholder: Provide a clear and concise description of any alternative solutions or features you've considered.
+    validations:
+      required: true
+  - type: textarea
+    id: launch_tracker
+    attributes:
+      label: Launch Tracker
+      description: A tracker for the project's status.
+      placeholder: Provide a link to the launch tracker for this work here if applicable. A template with instructions can be found at bit.ly/amp-launch-tracker.
+  - type: textarea
+    id: notifications
+    attributes:
+      label: Notifications
+      description: Add working groups or individuals you want to notify about this I2I, including a code reviewer once you have found one. See [here](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md) for help.
+      value: /cc @ampproject/wg-approvers
diff --git a/.github/ISSUE_TEMPLATE/intent-to-remove--i2r-.md b/.github/ISSUE_TEMPLATE/intent-to-remove--i2r-.md
deleted file mode 100644
index 1fe02fc81e692..0000000000000
--- a/.github/ISSUE_TEMPLATE/intent-to-remove--i2r-.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-name: Intent-to-remove (I2R)
-about: Rollout plan for removal of a deprecated feature that was described in an I2D.
-title: 'Intent-to-Remove: <feature being removed>'
-labels: INTENT TO REMOVE
-assignees: ''
-
----
-
-<!--
-Replace/remove all of the text in brackets, including this text.
-
-See https://github.com/ampproject/amphtml/blob/master/spec/amp-versioning-policy.md for details on AMP's deprecation policy, instructions on filling out this I2R template and how to get help if you have questions.
-
-This I2R should be created after your Intent-to-Deprecate (I2D) for the feature was approved.
--->
-
-## Summary
-
-<!--
-Provide a brief description of the deprecated feature you are removing.
-
-Link to the Intent-to-Deprecate (I2D) describing more context on the deprecation.
--->
-
-## Rollout plan
-
-<!--
-Detail the steps you will use to remove this deprecated feature.
--->
-
-## Alternative implementation suggestion for developers using AMP
-
-<!--
-When the feature you are deprecating is removed, how can developers using AMP achieve similar functionality?
--->
-
-## Additional context
-
-<!--
-Add any other information that may help people understand the I2R.
--->
-
-<!--
-Add anyone to this cc line that you want to notify about this I2R.
--->
-
-/cc @ampproject/wg-approvers
diff --git a/.github/ISSUE_TEMPLATE/intent-to-remove.yml b/.github/ISSUE_TEMPLATE/intent-to-remove.yml
new file mode 100644
index 0000000000000..17ba6a11864f8
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/intent-to-remove.yml
@@ -0,0 +1,55 @@
+---
+name: Intent-to-Remove (I2R)
+description: Propose a rollout plan for the removal of a deprecated feature.
+labels: INTENT TO REMOVE
+body:
+  - type: markdown
+    id: header
+    attributes:
+      value: |
+        Thanks for creating this Intent-to-Remove (I2R) issue.
+        - See AMP's [versioning and deprecations policy](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-versioning-policy.md) for instructions on how to fill out this I2R template and how to get help.
+        - This I2R issue should be created after the Intent-to-Deprecate (I2D) issue for the feature was approved.
+  - type: textarea
+    id: summary
+    attributes:
+      label: Summary
+      description: A brief description of the feature being removed.
+      placeholder: Provide a brief description of the feature you are planning on removing.
+    validations:
+      required: true
+  - type: textarea
+    id: i2d_issue
+    attributes:
+      label: Intent-to-Deprecate (I2D) Issue
+      description: A link to the I2D issue.
+      placeholder: Provide a link to the I2D issue you filed to deprecate this feature.
+    validations:
+      required: true
+  - type: textarea
+    id: rollout_plan
+    attributes:
+      label: Rollout Plan
+      description: Steps to remove the feature.
+      placeholder: Provide details for the steps you will use to remove this previously deprecated feature.
+    validations:
+      required: true
+  - type: textarea
+    id: alternative_implementation
+    attributes:
+      label: Alternative Implementation
+      description: Alternative implementation suggestions for developers using AMP.
+      placeholder: Explain how developers using AMP can achieve similar functionality after the feature you are deprecating is removed.
+    validations:
+      required: true
+  - type: textarea
+    id: additional_context
+    attributes:
+      label: Additional Context
+      description: Any other relevant context.
+  - type: textarea
+    id: notifications
+    attributes:
+      label: Notifications
+      description: Add working groups or individuals you want to notify about this I2I.
+      value: /cc @ampproject/wg-approvers
diff --git a/.github/ISSUE_TEMPLATE/intent-to-ship--i2s-.md b/.github/ISSUE_TEMPLATE/intent-to-ship--i2s-.md
deleted file mode 100644
index 14f8b0fcdf579..0000000000000
--- a/.github/ISSUE_TEMPLATE/intent-to-ship--i2s-.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-name: Intent-to-ship (I2S)
-about: Proposes launching a significant change/update to AMP that has already been
-  implemented. https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md
-title: 'I2S: <your change/update>'
-labels: INTENT TO SHIP
-assignees: ''
-
----
-
-<!--
-Replace/remove all of the text in brackets, including this text.
-
-Use an Intent-to-ship (I2S) issue to request the launch of a significant change/update to AMP, generally those that required an Intent-to-implement (I2I) issue.
-See https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md for more information.
--->
-
-## Summary
-
-<!--
-Provide a brief description of the feature/change you have implemented.
--->
-
-## Intent-to-implement (I2I) issue
-
-<!--
-Provide a link to the I2I issue you filed for this feature/change.
--->
-
-## Experiment(s) to enable
-
-<!--
-List the experiment(s) that should be enabled to launch your feature.
--->
-
-## Required release version
-
-<!--
-Link to the "Type: Release" issue for the release that contains all of the changes necessary for your launch.
--->
-
-## Demo instructions
-
-<!--
-Provide instructions for how to demo your feature such as a link to a demo page.
--->
-
-## Additional context
-
-<!--
-Add any other information that may be relevant in determining if your feature can ship.
--->
-
-<!--
-Add anyone to this cc line that you want to notify about this I2S, including the reviewer who you worked with on the I2I.
--->
-
-/cc @ampproject/wg-approvers
diff --git a/.github/ISSUE_TEMPLATE/intent-to-ship.yml b/.github/ISSUE_TEMPLATE/intent-to-ship.yml
new file mode 100644
index 0000000000000..d42b6d31ca5ef
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/intent-to-ship.yml
@@ -0,0 +1,65 @@
+---
+name: Intent-to-Ship (I2S)
+description: Propose the launch of an already implemented significant feature or change to AMP.
+labels: INTENT TO SHIP
+body:
+  - type: markdown
+    id: header
+    attributes:
+      value: |
+        Thanks for creating this Intent-to-Ship (I2S) issue.
+        - See AMP's [code contribution guide](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md) for instructions on how to fill out this I2I form and how to get help.
+        - Note that if you are shipping a minor feature or change, you likely do not need to file an I2I.
+        - Typically, issues that require an I2S issue also required an Intent-to-implement (I2I) issue.
+  - type: textarea
+    id: summary
+    attributes:
+      label: Summary
+      description: A brief description of the feature being shipped.
+      placeholder: Provide a brief description of the feature you have implemented and are planning on shipping.
+    validations:
+      required: true
+  - type: textarea
+    id: i2i_issue
+    attributes:
+      label: Intent-to-Implement (I2I) Issue
+      description: A link to the I2I issue.
+      placeholder: Provide a link to the I2I issue you filed for this feature or change.
+    validations:
+      required: true
+  - type: textarea
+    id: experiments
+    attributes:
+      label: Experiment(s) to Enable
+      description: A list of experiments to enable.
+      placeholder: Provide a list of the experiment(s) that should be enabled to launch your feature.
+    validations:
+      required: true
+  - type: textarea
+    id: required_release
+    attributes:
+      label: Release Tracking Issue
+      description: AMP release containing the implementation of this feature.
+      placeholder: 'Provide a link to the "Type: Release" issue for the release that contains all of the changes necessary for your launch.'
+    validations:
+      required: true
+  - type: textarea
+    id: demo_instructions
+    attributes:
+      label: Demo Instructions
+      description: How to demo the feature.
+      placeholder: Provide instructions for how to demonstrate the feature. E.g. a link to an example page that uses the feature.
+    validations:
+      required: true
+  - type: textarea
+    id: additional_context
+    attributes:
+      label: Additional Context
+      description: Other relevant context.
+      placeholder: Add any other information that may be relevant in determining if your feature can ship.
+  - type: textarea
+    id: notifications
+    attributes:
+      label: Notifications
+      description: Add working groups or individuals you want to notify about this I2S, including the code reviewer you worked with on the I2I.
+      value: /cc @ampproject/wg-approvers
diff --git a/.github/ISSUE_TEMPLATE/release-tracker.yml b/.github/ISSUE_TEMPLATE/release-tracker.yml
new file mode 100644
index 0000000000000..c13b67afd6349
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/release-tracker.yml
@@ -0,0 +1,104 @@
+---
+name: Release Tracker
+description: Track a new AMP release.
+labels: 'Type: Release'
+title: "\U0001F684 Tracking issue for release VERSION"
+body:
+  - type: markdown
+    id: header
+    attributes:
+      value: |
+        This is AMP's release tracker form, meant to be used by on-duty engineers.
+        - See AMP's [release schedule](https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md) to learn about how releases work.
+        - See AMP's [release calendar](https://amp-release-calendar.appspot.com) for information about past releases (e.g. versions, dates, submission times, notes).
+        - See AMP's [pre-release documentation](https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md#beta-and-experimental-channels) to learn how to test changes in the Experimental channel.
+        - If you find a bug in this release, file a [bug report](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Bug&template=bug-report.yml).
+        - If you believe a bug should be fixed as part of this release, request a [cherry-pick](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#Cherry-picks).
+        - For updates that may be of interest to the community (e.g. bug fixes, delayed releases), post a comment to this issue.
+  - type: input
+    id: release_version
+    attributes:
+      label: Release Version
+      description: The version of the release being tracked, in the format YYMMDDHHMMXXX.
+      placeholder: e.g. 2105150310000
+    validations:
+      required: true
+  - type: input
+    id: previous_release_version
+    attributes:
+      label: Previous Release Version
+      description: The version of the previous stable channel release, in the format YYMMDDHHMMXXX. Copy it from [here](https://github.com/ampproject/amphtml/releases/latest).
+      placeholder: e.g. 2105072136000
+    validations:
+      required: true
+  - type: textarea
+    id: release_progress
+    attributes:
+      label: Release Progress
+      description: Progress details for this release.
+      value: |
+        <!-- Replace VERSION with the contents of the "Release Version" field. -->
+        <!-- Replace PREVIOUS_VERSION with the contents of the "Previous Release Version" field. -->
+        <!-- After creating this issue, check the appropriate checkbox at each stage and replace CL_SUBMIT_TIME with the "Submitted" time from the promotion CL. -->
+
+        This issue tracks release [VERSION](https://github.com/ampproject/amphtml/releases/tag/VERSION). See [new commits](https://github.com/ampproject/amphtml/compare/PREVIOUS_VERSION...VERSION) since the previous Stable channel release.
+
+        - [ ] Release VERSION promoted to Experimental and Beta (opt-in) channels (CL_SUBMIT_TIME)
+        - [ ] Release VERSION promoted to Experimental and Beta (1% traffic) channels (CL_SUBMIT_TIME)
+        - [ ] Release VERSION promoted to Stable channel (CL_SUBMIT_TIME)
+    validations:
+      required: true
+  - type: textarea
+    id: lts_release
+    attributes:
+      label: LTS Release
+      description: Details for the LTS promotion if necessary.
+      value: |
+        _To be updated if an LTS promotion is necessary._
+        <!-- Replace VERSION with the contents of the "Release Version" field. -->
+        <!-- After creating this issue, check the checkbox and replace CL_SUBMIT_TIME with the the "Submitted" time from the promotion CL. -->
+
+        - [ ] Release VERSION promoted to LTS channel (CL_SUBMIT_TIME)
+  - type: markdown
+    id: lts_release_instructions
+    attributes:
+      value: |
+        On the second Monday of each month, the current Stable channel version will be promoted to the LTS channel.
+        - Releases promoted to Stable channel on the first Tuesday of a given month are promoted to LTS channel on the second Monday of the same month.
+        - Releases promoted to Stable channel on the second, third, fourth, or fifth Tuesday of a given month are not LTS release candidates.
+
+        Based on the above, if this release must be promoted to LTS, fill out the "LTS Release" section.
+  - type: input
+    id: cherry_pick_version
+    attributes:
+      label: Cherry-Pick Release Version
+      description: The updated cherry-pick release version if necessary, in the format YYMMDDHHMMXXX.
+      placeholder: e.g. 2105150310001
+  - type: markdown
+    id: cherry_pick_instructions
+    attributes:
+      value: |
+        Sometimes, a bug in a release necessitates that a fix be cherry-picked before the release can progress. If this is the case, follow the instructions in the [cherry-picks documentation](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#Cherry-picks) and fill out this section.
+  - type: textarea
+    id: cherry_pick_progress
+    attributes:
+      label: Cherry-Pick Release Progress
+      description: Progress details for a cherry-pick release if necessary.
+      value: |
+        _To be updated if a cherry-pick release is necessary._
+        <!-- Replace CP_VERSION with the contents of the "Cherry-Pick Release Version" field. -->
+        <!-- Replace CP_ISSUE with one or more cherry-pick issue numbers. -->
+        <!-- After creating this issue, check the appropriate checkbox at each stage and replace CL_SUBMIT_TIME with the "Submitted" time from the promotion CL. -->
+
+        A cherry-pick release [CP_VERSION](https://github.com/ampproject/amphtml/releases/tag/CP_VERSION) was created with cherry-pick(s) #CP_ISSUE.
+
+        - [ ] Release CP_VERSION promoted to Experimental and Beta (opt-in) channels (CL_SUBMIT_TIME)
+        - [ ] Release CP_VERSION promoted to Experimental and Beta (1% traffic) channels (CL_SUBMIT_TIME)
+        - [ ] Release CP_VERSION promoted to Stable channel (CL_SUBMIT_TIME)
+        - [ ] Release CP_VERSION promoted to LTS channel (CL_SUBMIT_TIME)
+  - type: textarea
+    id: notifications
+    attributes:
+      label: Notifications
+      description: Add working groups or individuals you want to notify about this release.
+      value: /cc @ampproject/release-on-duty
diff --git a/.github/ISSUE_TEMPLATE/release-tracking-issue.md b/.github/ISSUE_TEMPLATE/release-tracking-issue.md
deleted file mode 100644
index 5010e6050d2bd..0000000000000
--- a/.github/ISSUE_TEMPLATE/release-tracking-issue.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-name: Release tracking issue
-about:
-  Create a tracking issue for a new AMP release (to be used by release on-duty
-  engineers)
-title: "\U0001F684 Release tracking issue for release <RELEASE_NUMBER>"
-labels: 'Type: Release'
-assignees: ''
----
-
-# Release tracking issue
-
-<!--
-Note to onduty:
-
-Use this issue to track a release from the initial Nightly release build, through promotions
-to Beta/Experimental opt-in, Beta/Experimental traffic, and Stable and LTS. The community
-uses this issue to keep track of what is going on with the release so please keep this issue
-up to date:
-
-- As you reach each stage of the release, check the appropriate checkbox and replace <CL submit time> with the "Submitted" text from the corresponding CL, e.g. "2:49 PM, Jul 25, 2018 UTC-4".
-- If you need to perform cherry picks, add new checkboxes here (by editing this
-  issue), making sure to use the release number for the new build. Link the
-  release number to the GitHub tag page the first time a given release number
-  appears in the checkboxes.
-- Add any updates that may be of interest to the community (such as delays) as
-  comments on this issue, including after the release is promoted to Stable (and, in some cases, LTS).
-
-Note: remove the backticks (``) from the link. They are there to allow the template file for this issue to pass `gulp check-links`.
--->
-
-This issue tracks release `[<RELEASE_NUMBER>](https://github.com/ampproject/amphtml/releases/tag/<RELEASE_NUMBER>)`
-
-- [ ] Release <RELEASE_NUMBER> promoted to Experimental and Beta (opt-in) channels (<CL submit time>)
-- [ ] Release <RELEASE_NUMBER> promoted to Experimental and Beta (1% traffic) channels (<CL submit time>)
-- [ ] Release <RELEASE_NUMBER> promoted to Stable channel (<CL submit time>)
-
-<!--
-On the second Monday of each month, the current Stable version will be promoted to the LTS release channel. In other words:
-
-- If this release is promoted to Stable on the first Tuesday of a given month, it needs to be promoted to LTS on the second Monday of the same month.
-- If this release is promoted to Stable on the second, third, fourth, or fifth Monday of a given month, it is not an LTS release candidate (but will be included in a later LTS release).
-
-Based on the above, if this release must be promoted to LTS, copy-paste the following checkbox into the list above.
-
-- [ ] Release <RELEASE_NUMBER> promoted to LTS (<CL submit time>)
-
-If you perform cherry picks, add/update the checkboxes above as needed e.g.
-
-- [ ] Release [<CHERRY_PICK_RELEASE_NUMBER>](https://github.com/ampproject/amphtml/releases/tag/<CHERRY_PICK_RELEASE_NUMBER>) created with cherry picks #<CHERRY_PICK_ISSUE_NUMBER>, [#<CHERRY_PICK_ISSUE_NUMBER>, ...]
-- [ ] Release <CHERRY_PICK_RELEASE_NUMBER> promoted to Experimental and Beta channels (<CL submit time>)
--->
-
-See the [release documentation](https://github.com/ampproject/amphtml/blob/master/contributing/release-schedule.md) for more information on the release process, including how to test changes in the Experimental channel.
-
-If you find a bug in this build, please file an [issue](https://github.com/ampproject/amphtml/issues/new). If you believe the bug should be fixed in this build, follow the instructions in the [cherry picks documentation](https://go.amp.dev/cherry-picks).
-
-/cc @ampproject/release-on-duty
diff --git a/.github/OWNERS b/.github/OWNERS
index 643f230b57d4e..a9f24fddf8a7f 100644
--- a/.github/OWNERS
+++ b/.github/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
deleted file mode 100644
index d8aea7c45d38e..0000000000000
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ /dev/null
@@ -1,37 +0,0 @@
-<!--
-# Instructions:
-
-- Pick a meaningful title for your pull request. (Use sentence case.)
-  - Prefix the title with an emoji to identify what is being done. (Copy-paste the emoji from the list below.)
-  - Do not overuse punctuation in the title (like `(chore):`).
-  - If it is helpful, use a simple prefix (like `ProjectX: Implement some feature`).
-- Enter a succinct description that says why the PR is necessary, and what it does.
-  - Mention the GitHub issue that is being addressed by the pull request.
-  - The keywords `Fixes`, `Closes`, or `Resolves` followed the issue number will automatically close the issue.
-
-> NOTE: All non-trivial changes (like introducing new features or components) should have an associated issue or reference an I2I (intent-to-implement: go.amp.dev/i2i). Please read through the contribution process (go.amp.dev/contributing/code) for more information.
-
-# Example of a good description:
-
-- Implement aspect X
-- Leave out feature Y because of A
-- Improve performance by B
-- Improve accessibility by C
-
-# Emojis for categorizing pull requests (copy-paste emoji into description):
-
-✨ New feature
-🐛 Bug fix
-🔥 P0 fix
-✅ Tests
-❄️ Flaky tests
-🚀 Performance improvements
-🖍 CSS / Styling
-♿ Accessibility
-🌐 Internationalization
-📖 Documentation
-🏗 Infrastructure / Tooling / Builds / CI
-⏪ Reverting a previous change
-♻️ Refactoring
-🚮 Deleting code
--->
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 0000000000000..83b0aed09b5fd
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,34 @@
+<!--
+# Instructions:
+
+1. Pick a meaningful title for your pull request.
+  a. Prefix the title with an emoji. (Copy-paste from the list below.)
+  b. If helpful, use a short prefix (e.g. `[Project XX] Implement feature YY`).
+2. Enter a description that explains why the PR is necessary, and what it does.
+  a. Mention the GitHub issue being addressed by this pull request.
+  b. Use keywords to auto-close linked issues during merge. (e.g. `Fixes #11111`, or `Closes #22222`)
+3. For substantial changes, first file an Intent-to-Implement (I2I) issue at go.amp.dev/i2i.
+
+# References:
+
+- AMP code contribution docs: go.amp.dev/contribute/code
+- First time setup (required for CI checks): go.amp.dev/getting-started
+
+# Emojis for categorizing pull requests (copy-paste emoji into description):
+
+✨ New feature
+🐛 Bug fix
+🔥 P0 fix
+✅ Tests
+❄️ Flaky tests
+🚀 Performance improvements
+🖍 CSS / Styling
+♿ Accessibility
+🌐 Internationalization
+📖 Documentation
+🏗 Infrastructure / Tooling / Builds / CI
+⏪ Revert
+♻️ Refactor
+🚮 Deletion
+🧪 Experimental code
+-->
diff --git a/.github/workflows/create-design-review-issue.js b/.github/workflows/create-design-review-issue.js
new file mode 100644
index 0000000000000..9906b461c2d8e
--- /dev/null
+++ b/.github/workflows/create-design-review-issue.js
@@ -0,0 +1,256 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview
+ * Creates a Github issue for an upcoming design review.
+ *
+ * https://go.amp.dev/design-reviews
+ *
+ * A Github Action runs this once a week. See create-design-review-issues.yml
+ */
+
+/*
+ * ⚠️ Only use standard node modules.
+ *
+ * This file runs by itself. It cannot depend on `npm install` nor file
+ * structure since the Github Action downloads this file only.
+ */
+const https = require('https');
+
+const dayOfWeek = /* wednesday */ 3; // sunday = 0, monday = 1, ...
+
+const sessionDurationHours = 1;
+
+// Times in this rotation are adjusted according to Daylight Savings
+const timeRotationUtc = [
+  ['Americas', '21:00'],
+  ['Asia/Oceania', '01:00'],
+  ['Africa/Europe/western Asia', '16:30'],
+];
+
+const timeRotationStartYyyyMmDd = '2021-03-31';
+
+// All previous weeks have already been handled.
+const generateWeeksFromNow = 3;
+
+const labels = ['Type: Design Review'];
+
+const createTitle = ({yyyyMmDd, timeUtc, region}) =>
+  `Design Review ${yyyyMmDd} ${timeUtc} UTC (${region})`;
+
+const vcUrl = 'https://bit.ly/amp-dr';
+const calendarEventTitle = 'AMP Project Design Review';
+const calendarEventDetails = vcUrl;
+
+const createBody = ({timeUtc, timeUrl, calendarUrl}) =>
+  `
+Time: [${timeUtc} UTC](${timeUrl}) ([add to Google Calendar](${calendarUrl}))
+Location: [Video conference via Google Meet](${vcUrl})
+
+The AMP community holds weekly engineering [design reviews](https://github.com/ampproject/amphtml/blob/main/docs/design-reviews.md). **We encourage everyone in the community to participate in these design reviews.**
+
+If you are interested in bringing your design to design review, read the [design review documentation](https://github.com/ampproject/amphtml/blob/main/docs/design-reviews.md) and add a link to your design doc or issue by the Monday before your design review.
+
+When attending a design review please read through the designs _before_ the design review starts. This allows us to spend more time on discussion of the design.
+
+We rotate our design review between times that work better for different parts of the world as described in our [design review documentation](https://github.com/ampproject/amphtml/blob/main/docs/design-reviews.md), but you are welcome to attend any design review. If you cannot make any of the design reviews but have a design to discuss please let mrjoro@ know on [Slack](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#discussion-channels) and we will find a time that works for you.
+`.trim();
+
+function leadingZero(number) {
+  return number.toString().padStart(2, '0');
+}
+
+function isDaylightSavingsUsa(date) {
+  // [start, end] ranges of Daylight Savings in (most of) the USA
+  // https://www.timeanddate.com/time/dst/2021.html
+  const ranges = [
+    ['2021/3/14', '2021/11/7'],
+    ['2022/3/13', '2022/11/6'],
+    ['2023/3/12', '2023/11/5'],
+    ['2024/3/10', '2024/11/3'],
+    ['2025/3/9', '2025/11/2'],
+    ['2026/3/8', '2026/11/1'],
+    ['2027/3/14', '2027/11/7'],
+    ['2028/3/12', '2028/11/5'],
+    ['2029/3/11', '2029/11/4'],
+  ];
+  return ranges.some(([start, end]) => {
+    const time = date.getTime();
+    return (
+      time > parseYyyyMmDd(start, /* hours */ 2, /* minutes */ 0).getTime() &&
+      time < parseYyyyMmDd(end, /* hours */ 2, /* minutes */ 0).getTime()
+    );
+  });
+}
+
+function parseYyyyMmDd(yyyyMmDd, hours = 0, minutes = 0) {
+  const [yyyy, mm, dd] = yyyyMmDd.split('/', 3).map(Number);
+  return new Date(yyyy, mm - 1, dd, hours, minutes);
+}
+
+function httpsRequest(url, options, data) {
+  return new Promise((resolve, reject) => {
+    const req = https.request(url, options, (res) => {
+      const chunks = [];
+      res.on('data', (chunk) => {
+        chunks.push(Buffer.from(chunk));
+      });
+      res.on('close', () => {
+        const body = Buffer.concat(chunks).toString('utf-8');
+        resolve({res, body});
+      });
+    });
+    req.on('error', (error) => {
+      reject(error);
+    });
+    req.write(data);
+    req.end();
+  });
+}
+
+async function postGithub(token, url, data) {
+  const {res, body} = await httpsRequest(
+    url,
+    {
+      method: 'POST',
+      headers: {
+        'Authorization': `token ${token}`,
+        'Content-Type': 'application/json',
+        'User-Agent': 'amphtml',
+        'Accept': 'application/vnd.github.v3+json',
+      },
+    },
+    JSON.stringify(data)
+  );
+
+  if (res.statusCode < 200 || res.statusCode > 299) {
+    console./*OK*/ error(body);
+    throw new Error(res.statusCode);
+  }
+
+  return JSON.parse(body);
+}
+
+function postGithubIssue(token, repo, data) {
+  const url = `https://api.github.com/repos/${repo}/issues`;
+  return postGithub(token, url, data);
+}
+
+function getNextDayOfWeek(date, dayOfWeek, weeks = 1) {
+  const resultDate = new Date(date.getTime());
+  resultDate.setDate(
+    resultDate.getDate() +
+      (weeks - 1) * 7 +
+      ((7 + dayOfWeek - date.getDay()) % 7)
+  );
+  return resultDate;
+}
+
+function getRotation(date, startYyyyMmDd) {
+  const [year, month, day] = startYyyyMmDd.split('-');
+  const start = new Date(year, month - 1, day);
+  const dateBeginningOfDay = new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate()
+  );
+  const weeks = Math.round(
+    (dateBeginningOfDay - start) / (7 * 24 * 60 * 60 * 1000)
+  );
+  return timeRotationUtc[weeks % timeRotationUtc.length];
+}
+
+const timeZ = (yyyy, mm, dd, hours, minutes) =>
+  `${yyyy + mm + dd}T${leadingZero(hours) + leadingZero(minutes)}Z`;
+
+function getNextIssueData() {
+  const today = new Date();
+
+  // if we run on the same day of week, we need to skip one day to calculate
+  // properly
+  today.setDate(today.getDate() + 1);
+
+  const nextDay = getNextDayOfWeek(today, dayOfWeek, generateWeeksFromNow);
+  const [region, timeUtcNoDst] = getRotation(
+    nextDay,
+    timeRotationStartYyyyMmDd
+  );
+
+  let [hours, minutes] = timeUtcNoDst.split(':').map(Number);
+  if (isDaylightSavingsUsa(nextDay)) {
+    hours -= 1;
+  }
+
+  const yyyy = nextDay.getFullYear();
+  const mm = leadingZero(nextDay.getMonth() + 1);
+  const dd = leadingZero(nextDay.getDate());
+
+  const timeUtc = `${leadingZero(hours)}:${leadingZero(minutes)}`;
+
+  const timeUrl = `https://www.timeanddate.com/worldclock/meeting.html?year=${yyyy}&month=${mm}&day=${dd}&iv=0`;
+
+  const startZ = timeZ(yyyy, mm, dd, hours, minutes);
+  const endZ = timeZ(yyyy, mm, dd, hours + sessionDurationHours, minutes);
+
+  const calendarUrl = `http://www.google.com/calendar/event?action=TEMPLATE&text=${encodeURIComponent(
+    calendarEventTitle
+  )}&dates=${startZ}/${endZ}&details=${encodeURIComponent(
+    calendarEventDetails
+  )}`;
+
+  const templateData = {
+    yyyyMmDd: `${yyyy}-${mm}-${dd}`,
+    timeUtc,
+    region,
+    timeUrl,
+    calendarUrl,
+  };
+
+  const title = createTitle(templateData);
+  const body = createBody(templateData);
+
+  return {title, labels, body};
+}
+
+function env(key) {
+  if (!(key in process.env)) {
+    throw new Error(`Missing env variable: ${key}`);
+  }
+  return process.env[key];
+}
+
+async function createDesignReviewIssue() {
+  const nextIssueData = getNextIssueData();
+
+  if (process.argv.includes('--dry-run')) {
+    console./*OK*/ log(nextIssueData);
+    return;
+  }
+
+  const {title, 'html_url': htmlUrl} = await postGithubIssue(
+    env('GITHUB_TOKEN'),
+    env('GITHUB_REPOSITORY'),
+    nextIssueData
+  );
+  console./*OK*/ log(title);
+  console./*OK*/ log(htmlUrl);
+}
+
+createDesignReviewIssue().catch((e) => {
+  console./*OK*/ error(e);
+  process.exit(1);
+});
diff --git a/.github/workflows/create-design-review-issue.yml b/.github/workflows/create-design-review-issue.yml
new file mode 100644
index 0000000000000..92bc07ac12ed7
--- /dev/null
+++ b/.github/workflows/create-design-review-issue.yml
@@ -0,0 +1,18 @@
+name: Create Design Review Issue
+
+on:
+  schedule:
+    # Every Wednesday at 00:00:00
+    - cron: '0 0 * * 3'
+
+jobs:
+  create-design-review-issue:
+    if: github.repository == 'ampproject/amphtml'
+    name: Create Design Review Issue
+    runs-on: ubuntu-latest
+    steps:
+      - name: Create Design Review Issue
+        run: |
+          wget -q -O - "https://raw.githubusercontent.com/ampproject/amphtml/main/.github/workflows/create-design-review-issue.js" | node
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/cross-browser-tests.yml b/.github/workflows/cross-browser-tests.yml
new file mode 100644
index 0000000000000..18d6a66bd4d50
--- /dev/null
+++ b/.github/workflows/cross-browser-tests.yml
@@ -0,0 +1,25 @@
+name: GitHub Actions
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    if: github.repository == 'ampproject/amphtml'
+    strategy:
+      matrix:
+        platform: [ubuntu-latest, macos-latest, windows-latest]
+    runs-on: ${{ matrix.platform }}
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Install Dependencies
+        run: bash ./.github/workflows/install_dependencies.sh
+      - name: Build and Test
+        run: node build-system/pr-check/cross-browser-tests.js
diff --git a/.github/workflows/install_dependencies.sh b/.github/workflows/install_dependencies.sh
new file mode 100755
index 0000000000000..a76800a27f368
--- /dev/null
+++ b/.github/workflows/install_dependencies.sh
@@ -0,0 +1,38 @@
+#!/bin/bash
+#
+# Copyright 2021 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.
+
+# Script used by AMP's CI builds to install project dependencies on GH Actions.
+
+set -e
+
+GREEN() { echo -e "\033[0;32m$1\033[0m"; }
+
+if [[ "$OSTYPE" == "linux-gnu"* || "$OSTYPE" == "darwin"* ]]; then
+  echo $(GREEN "Updating npm prefix...")
+  npm config set prefix "$HOME/.npm"
+
+  echo $(GREEN "Updating PATH...")
+  echo "export PATH=$HOME/.npm/bin:$PATH" >> $GITHUB_ENV && source $GITHUB_ENV # For now
+  echo "$HOME/.npm/bin" >> $GITHUB_PATH # For later
+fi
+
+echo $(GREEN "Enabling log coloring...")
+echo "FORCE_COLOR=1" >> $GITHUB_ENV
+
+echo $(GREEN "Installing dependencies...")
+npm ci
+
+echo $(GREEN "Successfully installed all project dependencies.")
diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml
new file mode 100644
index 0000000000000..f72a1e3b2a539
--- /dev/null
+++ b/.github/workflows/publish-npm-packages.yml
@@ -0,0 +1,56 @@
+name: Publish Bento Packages on npm
+on:
+  workflow_dispatch:
+    inputs:
+      ampversion:
+        description: 'AMP version'
+        required: true
+      tag:
+        description: 'npm package tag (latest | nightly)'
+        required: true
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    outputs:
+      extensions: ${{ steps.get-extensions.outputs.extensions }}
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.events.inputs.ampversion }}
+      - name: Get extensions to publish
+        id: get-extensions
+        run: |
+          EXTENSIONS=$(node ./build-system/npm-publish/get-extensions.js)
+          echo "::set-output name=extensions::{\"include\":${EXTENSIONS}}"
+  publish:
+    if: github.repository == 'ampproject/amphtml'
+    environment: NPM_TOKEN #TODO: change environment name in repo settings
+    needs: setup
+    runs-on: ubuntu-latest
+    strategy:
+      matrix: ${{ fromJson(needs.setup.outputs.extensions) }}
+      fail-fast: false
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.events.inputs.ampversion }}
+      - uses: actions/setup-node@v2
+        with:
+          check-latest: true
+          registry-url: https://registry.npmjs.org
+      - name: Build package
+        run: |
+          npm install
+          node ./build-system/npm-publish/build-npm-binaries.js ${{ matrix.extension }}
+          node ./build-system/npm-publish/write-package-files.js ${{ matrix.extension }} ${{ github.event.inputs.ampversion }}
+      - name: Publish v1
+        run: npm publish ./extensions/${{ matrix.extension }}/1.0 --access public --tag ${{ github.event.inputs.tag }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Publish v2 if it exists
+        run: |
+          if $(test -d ${{ github.workspace }}/extensions/${{ matrix.extension }}/2.0); then      
+            npm publish ./extensions/${{ matrix.extension }}/2.0 --access public --tag ${{ github.event.inputs.tag }}
+          fi
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/sweep-experiments.yml b/.github/workflows/sweep-experiments.yml
new file mode 100644
index 0000000000000..b9b7395df38bd
--- /dev/null
+++ b/.github/workflows/sweep-experiments.yml
@@ -0,0 +1,77 @@
+# Executes `amp sweep-experiments` on a schedule.
+# If experiments are swept, a PR is created.
+
+name: Sweep Experiments
+
+on:
+  schedule:
+    # First day of the month at 00:00:00
+    - cron: '0 0 1 * *'
+
+jobs:
+  sweep-experiments:
+    if: github.repository == 'ampproject/amphtml'
+    name: Sweep Experiments
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Set Up Node
+        uses: actions/setup-node@v2.1.5
+
+      - name: Set Up Environment
+        run: sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Sweep
+        id: sweep
+        run: |
+          git config --global user.name "${GITHUB_ACTOR}"
+          git config --global user.email "${GITHUB_ACTOR}@users.noreply.github.com"
+
+          amp sweep-experiments
+
+          title=$(git log -1 --format=%s)
+          title="${title//'%'/'%25'}"
+          title="${title//$'\n'/'%0A'}"
+          title="${title//$'\r'/'%0D'}"
+          echo "::set-output name=title::$(echo "$title")"
+
+          body=$(git log -1 --format=%b)
+          body="${body//'%'/'%25'}"
+          body="${body//$'\n'/'%0A'}"
+          body="${body//$'\r'/'%0D'}"
+          echo "::set-output name=body::$(echo "$body")"
+
+          hash=$(git log -1 --format=%h)
+          hash="${hash//'%'/'%25'}"
+          hash="${hash//$'\n'/'%0A'}"
+          hash="${hash//$'\r'/'%0D'}"
+          echo "::set-output name=branch::$(echo "sweep-experiments-${hash}")"
+
+      - name: Create Pull Request
+        id: pull-request
+        uses: peter-evans/create-pull-request@v3
+        with:
+          draft: true
+          title: ${{ steps.sweep.outputs.title }}
+          body: ${{ steps.sweep.outputs.body }}
+          branch: ${{ steps.sweep.outputs.branch }}
+
+      - name: Comment on Pull Request
+        if: ${{ steps.pull-request.outputs.pull-request-number }}
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          issue-number: ${{ steps.pull-request.outputs.pull-request-number }}
+          body: |
+            You may checkout this pull request to follow-up manually:
+
+            ```
+            git checkout -t upstream/${{ steps.sweep.outputs.branch }}
+            ```
diff --git a/.gitignore b/.gitignore
index 6516b78463468..c4eecdcc02d53 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,41 +1,44 @@
-.DS_Store
-.g4ignore
-build/
-.karma-cache
-.amp-build
-c
-/dist
+# Local cache directories
+# Keep this list in sync with .eslintignore, .prettierignore, and build-system/tasks/clean.js
+.babel-cache
+.css-cache
+.pre-closure-cache
+
+# Output directories
+# Keep this list in sync with .eslintignore, .prettierignore, and build-system/tasks/clean.js
+.amp-dep-check
+build
+build-system/dist
+build-system/server/new-server/transforms/dist
+build-system/tasks/performance/cache
+build-system/tasks/performance/results.json
+build-system/global-configs/custom-config.json
+dist
 dist.3p
 dist.tools
-examples.min
-node_modules
-npm-debug.log
-.idea
-.tm_properties
-.settings
-typings
-typings.json
-build-system/runner/dist
-/test/manual/amp-ad.adtech.html
+export
+examples/storybook
+extensions/**/dist
+/release
+result-reports
+src/purifier/dist
 test/coverage
-./package-lock.json
+test/coverage-e2e
+validator/**/dist
+validator/export
+
+# OS level files
+.DS_Store
+.g4ignore
 *.swp
 *.swo
-yarn-error.log
-sc-*-linux*
-sc-*-osx*
-sauce_connect_*
-deps.txt
-firebase
+
+# Development environment files
+**/node_modules
+npm-debug.log
+
+# Firebase directories
 .firebaserc
+.firebase
+firebase
 firebase.json
-.firebase/
-src/purifier/dist
-build-system/server/new-server/transforms/dist
-build-system/tasks/performance/cache
-build-system/tasks/performance/results.json
-build-system/global-configs/custom-config.json
-export
-validator/export
-validator/java/.classpath
-validator/java/.project
diff --git a/.lando.yml b/.lando.yml
index 190d9aefbf62a..8987a551405a4 100644
--- a/.lando.yml
+++ b/.lando.yml
@@ -1,6 +1,6 @@
 # This is a configuration file for a Lando-based local dev environment for amphtml.
 # It is an alternative to the existing local development environment to what is described in the Getting Started
-# End-to-end guide <https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md>.
+# End-to-end guide <https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md>.
 #
 # This environment allows you to encapsulate the amphtml development environment inside of a Docker container.
 # Instead of accessing <http://localhost:8000>, this environment can be accessed via <https://amphtml.lando.site>.
@@ -15,8 +15,8 @@
 # 5. You should then be able to access <https://amphtml.lando.site> in your browser.
 # 6. If using the Local AMP Chrome Extension, open the popup and configure the Base URL to be https://amphtml.lando.site/
 #
-# Now instead of running `gulp` commands directly, you instead run `lando gulp`. Additionally, some of the common gulp
-# commands have shortcuts, so you can run `lando watch` instead of `lando gulp build --watch`. For a full list of the
+# Now instead of running `amp` commands directly, you instead run `lando amp`. Additionally, some of the common amp
+# commands have shortcuts, so you can run `lando watch` instead of `lando amp build --watch`. For a full list of the
 # shortcuts run `lando help`.
 #
 # For details on the file format, see <https://docs.lando.dev/config/lando.html>.
@@ -28,53 +28,49 @@ services:
   appserver:
     type: node
     install_dependencies_as_root:
-      - curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
       - apt-get update && apt-get install -y openjdk-8-jdk && apt-get install -y ant && apt-get clean
       - apt-get install -y openjdk-7-jre protobuf-compiler python2.7 python-protobuf
     build:
-      - yarn global add gulp-cli
-      - yarn
+      - npm install
     run_as_root:
       - echo "127.0.0.1 amphtml.lndo.site" >> /etc/hosts
-    command: cd /app && yarn gulp serve --port=80 --host=0.0.0.0
+    command: cd /app && amp serve --port=80 --host=0.0.0.0
 
 tooling:
-  yarn:
+  amp:
     service: appserver
-  gulp:
-    service: appserver
-    cmd: 'yarn gulp'
+    cmd: 'amp'
   watch:
     service: appserver
-    cmd: 'yarn gulp build --watch'
+    cmd: 'amp build --watch'
     description: 'Builds unminified code, watches for changes in files, re-builds when detected'
   watch-minified:
     service: appserver
-    cmd: 'yarn gulp dist --watch'
+    cmd: 'amp dist --watch'
     description: 'Builds minified code, watches for changes in files, re-builds when detected'
   lint:
     service: appserver
-    cmd: 'yarn gulp lint'
+    cmd: 'amp lint'
     description: 'Validates against Google Closure Linter'
   check-types:
     service: appserver
-    cmd: 'yarn gulp check-types'
+    cmd: 'amp check-types'
     description: 'Check source code for JS type errors'
   dist:
     service: appserver
-    cmd: 'yarn gulp dist'
+    cmd: 'amp dist'
     description: 'Build production binaries'
   unit:
     service: appserver
-    cmd: 'yarn gulp unit'
+    cmd: 'amp unit'
     description: 'Run unit tests'
   integration:
     service: appserver
-    cmd: 'yarn gulp integration'
+    cmd: 'amp integration'
     description: 'Run integration tests'
   e2e:
     service: appserver
-    cmd: 'yarn gulp e2e'
+    cmd: 'amp e2e'
     description: 'Runs e2e tests'
 
 proxy:
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000000000..2e3285ff656e3
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,6 @@
+# npm configuration for amphtml
+
+audit=false # Speed up install by not running a full audit
+fund=false # Don't print the trailing funding message
+loglevel=error # Suppress verbose logging during installation
+save-exact=true # Use exact semver numbers
diff --git a/.prettierignore b/.prettierignore
index ec6d3cdd7f5b0..0fe74095da2dd 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1,32 @@
-package.json
+# Local cache directories
+# Keep this list in sync with .gitignore, .eslintignore, and build-system/tasks/clean.js
+.babel-cache
+.css-cache
+.pre-closure-cache
+
+# Output directories
+# Keep this list in sync with .gitignore, .eslintignore, and build-system/tasks/clean.js
+.amp-dep-check
+build
+build-system/dist
+build-system/server/new-server/transforms/dist
+build-system/tasks/performance/cache
+build-system/tasks/performance/results.json
+build-system/global-configs/custom-config.json
+dist
+dist.3p
+dist.tools
+export
+examples/storybook
+extensions/**/dist
+/release
+result-reports
+src/purifier/dist
+test/coverage
+test/coverage-e2e
+validator/**/dist
+validator/export
+
+# Files and directories explicitly ignored by prettier
+**/package*.json
+**/node_modules/**
diff --git a/.prettierrc b/.prettierrc
index d5a6bee8de619..ae6bf44db9904 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -8,17 +8,23 @@
       "files": "OWNERS",
       "options": {"parser": "json5"}
     },
+    {
+      "files": "build-system/tasks/make-extension/template/**",
+      "options": {
+        "requirePragma": true
+      }
+    },
     {
       "files": "*.md",
-      "options": {"parser": "markdown"}
+      "options": {
+        "parser": "markdown",
+        "embeddedLanguageFormatting": "off",
+        "tabWidth": 4
+      }
     },
     {
       "files": [".prettierrc", ".renovaterc.json", "*.json"],
       "options": {"parser": "json"}
-    },
-    {
-      "files": [".codecov.yml", ".lando.yml", ".lgtm.yml", ".travis.yml"],
-      "options": {"parser": "yaml"}
     }
   ]
 }
diff --git a/.renovaterc.json b/.renovaterc.json
index 1689316875165..f2ec776c0601a 100644
--- a/.renovaterc.json
+++ b/.renovaterc.json
@@ -1,109 +1,112 @@
 {
   "extends": ["config:base"],
   "node": {
-    "supportPolicy": ["lts_active"]
+    "supportPolicy": ["lts_latest"]
   },
-  "statusCheckVerify": true,
-  "ignorePaths": [],
-
+  "ignoreDeps": ["ubuntu-2004"],
   "commitMessagePrefix": "📦",
   "timezone": "America/Los_Angeles",
   "schedule": "after 12am every weekday",
-
-  "masterIssue": true,
+  "dependencyDashboard": true,
   "prBodyColumns": ["Package", "Update", "Type", "Change", "Package file"],
-  "separateMinorPatch": true,
+  "prBodyNotes": [
+    "<details>",
+    "<summary>How to resolve breaking changes</summary>",
+    "This PR may introduce breaking changes that require manual intervention. In such cases, you will need to check out this branch, fix the cause of the breakage, and commit the fix to ensure a green CI build. To check out and update this PR, follow the steps below:",
+    "```sh\n# Check out the PR branch (these steps are from GitHub)\ngit checkout -b renovate-bot-{{{branchName}}} main\ngit pull https://github.com/renovate-bot/amphtml.git {{{branchName}}}\n\n# Directly make fixes and commit them\namp lint --fix # For lint errors in JS files\namp prettify --fix # For prettier errors in non-JS files\n# Edit source code in case of new compiler warnings / errors\n\n# Push the changes to the branch\ngit push git@github.com:renovate-bot/amphtml.git renovate-bot-{{{branchName}}}:{{{branchName}}}\n```",
+    "</details>"
+  ],
   "packageRules": [
     {
-      "paths": ["**/*"],
       "groupName": "subpackage devDependencies",
-      "major": {
-        "groupName": null,
-        "managerBranchPrefix": "subpackage-"
-      }
+      "matchPaths": ["**/*"],
+      "major": {"automerge": false, "assignAutomerge": false},
+      "automerge": true,
+      "assignAutomerge": true
     },
     {
-      "paths": ["src/**"],
-      "labels": ["WG: runtime"],
-
-      "groupName": "runtime devDependencies",
-      "major": {
-        "groupName": null,
-        "managerBranchPrefix": "runtime-"
-      }
-    },
-
-    {
-      "paths": ["build-system/**"],
+      "groupName": "build-system devDependencies",
+      "matchPaths": ["build-system/**"],
+      "major": {"automerge": false, "assignAutomerge": false},
       "labels": ["WG: infra"],
-
-      "groupName": "build system devDependencies",
-      "major": {
-        "groupName": null,
-        "managerBranchPrefix": "build-system-"
-      }
+      "automerge": true,
+      "assignAutomerge": true
     },
-
     {
-      "paths": ["validator/**"],
-      "labels": ["WG: caching"],
-
       "groupName": "validator devDependencies",
-      "major": {
-        "groupName": null,
-        "managerBranchPrefix": "validator-"
-      }
+      "matchPaths": ["validator/**"],
+      "major": {"automerge": false, "assignAutomerge": false},
+      "labels": ["WG: caching"],
+      "automerge": true,
+      "assignAutomerge": true
+    },
+    {
+      "groupName": "validator webui",
+      "matchPaths": ["validator/js/webui/**"],
+      "enabled": false
     },
-
     {
-      "paths": ["+(package.json)"],
-
       "groupName": "core devDependencies",
-      "major": {
-        "groupName": null,
-        "managerBranchPrefix": "core-"
-      }
+      "matchFiles": ["package.json"],
+      "major": {"automerge": false, "assignAutomerge": false},
+      "labels": ["WG: infra"],
+      "automerge": true,
+      "assignAutomerge": true
     },
-
     {
-      "packagePatterns": ["\\b(prettier|eslint)\\b"],
-      "prBodyNotes": [
-        "This PR upgrades one or more packages used to ensure code formatting. In case there are new errors, you will need to check out this branch, make sure `gulp lint` and `gulp prettify` pass (try using `--fix`), and commit the fixes to ensure a green Travis build."
-      ],
-
       "groupName": "linting devDependencies",
-      "major": {
-        "groupName": null,
-        "managerBranchPrefix": "linting-"
-      }
+      "matchFiles": ["package.json"],
+      "matchPackagePatterns": ["\\b(prettier|eslint)\\b"],
+      "major": {"automerge": false, "assignAutomerge": false},
+      "labels": ["WG: infra"],
+      "automerge": true,
+      "assignAutomerge": true
     },
-
     {
-      "excludePackagePatterns": ["^@ampproject/"],
-      "depTypeList": ["dependencies"],
-      "enabled": false
+      "groupName": "babel devDependencies",
+      "matchFiles": ["package.json"],
+      "matchPackagePatterns": ["\\bbabel"],
+      "major": {"automerge": false, "assignAutomerge": false},
+      "labels": ["WG: infra", "WG: performance"],
+      "automerge": true,
+      "assignAutomerge": true
+    },
+    {
+      "groupName": "esbuild devDependencies",
+      "matchFiles": ["package.json"],
+      "matchPackagePatterns": ["\\besbuild\\b"],
+      "major": {"automerge": false, "assignAutomerge": false},
+      "labels": ["WG: infra", "WG: performance"],
+      "automerge": true,
+      "assignAutomerge": true
     },
-
     {
-      "packagePatterns": ["^@ampproject/"],
-      "depTypeList": ["devDependencies"],
-
       "groupName": "ampproject devDependencies",
-      "major": {
-        "groupName": null,
-        "managerBranchPrefix": "ampproject-"
-      }
+      "matchFiles": ["package.json"],
+      "matchPackagePatterns": ["^@ampproject/"],
+      "matchDepTypes": ["devDependencies"],
+      "major": {"automerge": false, "assignAutomerge": false},
+      "labels": ["WG: bento", "WG: components", "WG: performance"],
+      "automerge": true,
+      "assignAutomerge": true
     },
-
     {
-      "packagePatterns": ["^@ampproject/"],
-      "depTypeList": ["dependencies"],
-
       "groupName": "ampproject dependencies",
-      "major": {
-        "groupName": null,
-        "managerBranchPrefix": "ampproject-"
-      }
+      "matchFiles": ["package.json"],
+      "matchPackagePatterns": ["^@ampproject/"],
+      "matchDepTypes": ["dependencies"],
+      "labels": ["WG: bento", "WG: components", "WG: performance"],
+      "automerge": false,
+      "assignAutomerge": false
+    },
+    {
+      "groupName": "core dependencies",
+      "matchFiles": ["package.json"],
+      "excludePackagePatterns": ["^@ampproject/"],
+      "matchDepTypes": ["dependencies"],
+      "labels": ["WG: bento", "WG: components", "WG: performance"],
+      "automerge": false,
+      "assignAutomerge": false
     }
   ]
 }
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index 42b8d861a0898..0000000000000
--- a/.travis.yml
+++ /dev/null
@@ -1,145 +0,0 @@
-language: node_js
-dist: xenial
-node_js:
-  - '12'
-notifications:
-  email:
-    recipients:
-      - amp-build-cop@grotations.appspotmail.com
-    on_success: change
-    on_failure: change
-before_install:
-  # Install the latest version of Yarn (Xenial's built-in version v1.15.2 is outdated)
-  - curl -o- -L https://yarnpkg.com/install.sh | bash
-  - export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"
-  # Override Xenial's default Java version (github.com/travis-ci/travis-ci/issues/10290)
-  - export PATH=$(echo "$PATH" | sed -e 's/:\/usr\/local\/lib\/jvm\/openjdk11\/bin//')
-  - export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-amd64
-  # Ensure python v2 and v3 are available, and "python" defaults to v3 (docs.travis-ci.com/user/reference/xenial/#python-support)
-  - pyenv global 3.6.7 2.7.15
-  - python3 --version
-  - python2 --version
-  - python --version
-  # Xenial's version of python-protobuf is outdated (github.com/ampproject/amphtml/pull/22528)
-  - pip3 install --user protobuf
-branches:
-  only:
-    - master
-    - /^amp-release-.*$/
-addons:
-  apt:
-    packages:
-      # Use unbuffer (from expect-dev) for log coloring (github.com/travis-ci/travis-ci/issues/7967)
-      - expect-dev
-      - google-cloud-sdk
-      - openssl
-      - protobuf-compiler
-  chrome: stable
-  hosts:
-    - ads.localhost
-    - iframe.localhost
-    # CURLs amp subdomain for the amp-recaptcha-input integration test. The hash
-    # is the CURLS subdomain for localhost:9876
-    - jgla3zmib2ggq5buc4hwi5taloh6jlvzukddfr4zltz3vay5s5rq.recaptcha.localhost
-    # Requested by some tests because they need a valid font host,
-    # but should not resolve in tests.
-    - fonts.googleapis.com
-env:
-  jobs:
-    - CACHENAME=AMPHTMLJOB
-stages:
-  - name: build
-  - name: test
-  - name: experiment
-    if: type = push
-jobs:
-  include:
-    - stage: build
-      name: 'Build'
-      script:
-        - unbuffer node build-system/pr-check/build.js
-    - stage: build
-      name: 'Checks'
-      script:
-        - unbuffer node build-system/pr-check/checks.js
-    - stage: build
-      name: 'Validator Tests'
-      script:
-        - unbuffer node build-system/pr-check/validator-tests.js
-    - stage: build
-      name: 'Dist, Bundle Size'
-      script:
-        - unbuffer node build-system/pr-check/dist-bundle-size.js
-    - stage: build
-      name: 'Module Dist, Bundle Size'
-      script:
-        - unbuffer node build-system/pr-check/module-dist-bundle-size.js
-    - stage: test
-      name: 'Visual Diff Tests'
-      script:
-        - unbuffer node build-system/pr-check/visual-diff-tests.js
-      env:
-        - CACHE_NAME=VISUALDIFFJOB
-    - stage: test
-      name: 'Local Tests'
-      script:
-        - unbuffer node build-system/pr-check/local-tests.js
-    - stage: test
-      name: 'Dist Tests'
-      script:
-        - unbuffer node build-system/pr-check/dist-tests.js
-    - stage: test
-      name: 'Remote (Sauce Labs) Tests'
-      script:
-        - unbuffer node build-system/pr-check/remote-tests.js
-      after_script:
-        - build-system/sauce_connect/stop_sauce_connect.sh
-        - ps -ef
-    - stage: test
-      name: 'End to End Tests'
-      script:
-        - unbuffer node build-system/pr-check/e2e-tests.js
-      env:
-        - CACHE_NAME=E2EJOB
-    - stage: experiment
-      name: 'Experiment A Tests'
-      script:
-        - unbuffer node build-system/pr-check/experiment-tests.js --experiment=experimentA
-      cache: false
-    - stage: experiment
-      name: 'Experiment B Tests'
-      script:
-        - unbuffer node build-system/pr-check/experiment-tests.js --experiment=experimentB
-      cache: false
-    - stage: experiment
-      name: 'Experiment C Tests'
-      script:
-        - unbuffer node build-system/pr-check/experiment-tests.js --experiment=experimentC
-      cache: false
-    - stage: experiment
-      name: 'Performance Tests'
-      script:
-        - unbuffer node build-system/pr-check/performance-tests.js
-      env:
-        - CACHE_NAME=PERFORMANCEJOB
-  allow_failures:
-    - script: unbuffer node build-system/pr-check/performance-tests.js # See #28148
-    - script: unbuffer node build-system/pr-check/remote-tests.js # See #28343
-  fast_finish: true
-before_cache:
-  # do not store cache for pr builds or experiment stage builds
-  - if [[ $TRAVIS_EVENT_TYPE == pull_request ]] || [[ $TRAVIS_BUILD_STAGE_NAME == experiment ]]; then exit $TRAVIS_TEST_RESULT ; fi
-cache:
-  directories:
-    - node_modules
-    - build-system/tasks/e2e/node_modules
-    - build-system/tasks/performance/node_modules
-    - build-system/tasks/visual-diff/node_modules
-    - sauce_connect
-    - validator/node_modules
-    - validator/nodejs/node_modules
-    - validator/webui/node_modules
-    - validator/java/bazel-installer
-    - $HOME/.m2
-    - .karma-cache
-  yarn: true
diff --git a/.vscode/OWNERS b/.vscode/OWNERS
index 8425845cae3ee..002922bb9cc93 100644
--- a/.vscode/OWNERS
+++ b/.vscode/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1e5ee029ced85..e65a2f0e79e10 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,13 +7,7 @@
 
     // Enable JSON auto-formatting for these files.
     ".prettierrc": "json",
-    ".renovaterc.json": "json",
-
-    // Enable YAML auto-formatting for these files.
-    ".codecov.yml": "yaml",
-    ".lando.yml": "yaml",
-    ".lgtm.yml": "yaml",
-    ".travis.yml": "yaml"
+    ".renovaterc.json": "json"
   },
 
   // Auto-fix JS files with ESLint using amphtml's custom settings. Needs
diff --git a/.yarnrc b/.yarnrc
deleted file mode 100644
index 1333f4e0284ce..0000000000000
--- a/.yarnrc
+++ /dev/null
@@ -1 +0,0 @@
---add.exact true
diff --git a/3p/3d-gltf/index.js b/3p/3d-gltf/index.js
index 623ba1b83c0f6..b2fcec99da9f0 100644
--- a/3p/3d-gltf/index.js
+++ b/3p/3d-gltf/index.js
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import {dict} from '../../src/utils/object';
+import {dict} from '../../src/core/types/object';
 import {listenParent, nonSensitiveDataPostMessage} from '../messaging';
 import {loadScript} from '../3p';
-import {parseJson} from '../../src/json';
+import {parseJson} from '../../src/core/types/object/json';
 import {user} from '../../src/log';
 
 import GltfViewer from './viewer';
diff --git a/3p/3d-gltf/viewer.js b/3p/3d-gltf/viewer.js
index 1ee91bde01f97..b1c89772b10d5 100644
--- a/3p/3d-gltf/viewer.js
+++ b/3p/3d-gltf/viewer.js
@@ -58,8 +58,7 @@ export default class GltfViewer {
     this.ampPlay_ = true;
 
     /** @private */
-    this.ampInViewport_ =
-      options['initialIntersection']['intersectionRatio'] > 0;
+    this.ampInViewport_ = false;
 
     /** @private */
     this.setSize_ = this.setupSize_();
diff --git a/3p/3p.js b/3p/3p.js
index 0611bbd1099a7..5e4132744b9e0 100644
--- a/3p/3p.js
+++ b/3p/3p.js
@@ -21,9 +21,10 @@
 
 // Note: loaded by 3p system. Cannot rely on babel polyfills.
 
-import {devAssert, rethrowAsync, userAssert} from '../src/log';
-import {hasOwn, map} from '../src/utils/object';
-import {isArray} from '../src/types';
+import {devAssert, userAssert} from '../src/log';
+import {hasOwn, map} from '../src/core/types/object';
+import {isArray} from '../src/core/types';
+import {rethrowAsync} from '../src/core/error';
 
 /** @typedef {function(!Window, !Object)}  */
 let ThirdPartyFunctionDef;
diff --git a/3p/OWNERS b/3p/OWNERS
index a8918c00443a9..07a473cf02aee 100644
--- a/3p/OWNERS
+++ b/3p/OWNERS
@@ -1,12 +1,12 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [
         {name: 'ampproject/wg-ads-reviewers'},
-        {name: 'ampproject/wg-ui-and-a11y'},
+        {name: 'ampproject/wg-components'},
       ],
     },
   ],
diff --git a/3p/README.md b/3p/README.md
index c61ccb4d7d3fb..56047f6fe7041 100644
--- a/3p/README.md
+++ b/3p/README.md
@@ -1,6 +1,6 @@
 # Inclusion of third party software, embeds, and services into AMP
 
-In general all inclusions are subject to [CONTRIBUTING.md](../CONTRIBUTING.md). This files outlines specific rules for certain types of external embed and other software inclusions.
+In general all inclusions are subject to [docs/contributing.md](../docs/contributing.md). This files outlines specific rules for certain types of external embed and other software inclusions.
 
 In order to qualify for inclusion, an extended component that integrates a third-party service must generally meet the notability requirements of the English Wikipedia, and is in common use in Internet publishing. As a rough rule of thumb, it should be used or requested by 5% of the top 10,000 websites as noted on builtwith.com, or already integrated into [oEmbed](http://oembed.com/).
 
@@ -10,42 +10,42 @@ We highly prefer integrations that do not use iframes. JSONP cannot be used for
 
 Examples: Youtube, Vimeo videos; Tweets, Instagrams; comment systems; polls; quizzes; document viewers
 
-- Our intent is to provide first class support for all embeds that fulfill the notability guidelines laid out in [CONTRIBUTING.md](../CONTRIBUTING.md).
-- Consider whether a iframe-with-placeholder solution fits your use case where iframe generation is not done immediately (can be done before user action for instant loading of iframe).
-- Consider whether all that is needed is some documentation for how to use the embed with `amp-iframe`.
-- Iframes and all sub resources must be served from HTTPS.
-- Avoid client side rendering of iframe content.
-- If your use of iframes is for style isolation, consider that AMP might provide an iframe-free alternative.
-- If you can make it not-iframe-based that is much better. (See e.g. the pinterest embed). We will always ask to do this first. E.g. adding a CORS endpoint to your server might make this possible.
-- Must play well within [AMP's sizing framework](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md).
-- All JS on container page must be open source and bundled with AMP.
-- JavaScript loaded into iframe should be reasonable with respect to functionality.
-- Use the `sandbox` attribute on iframe if possible.
-- Provide unit and [integration tests](#adding-proper-integration-tests).
-- Embeds that require browser plugins, such as Flash, Java, ActiveX, Silverlight, etc. are disallowed unless necessary. Special review required. We cannot currently see a reason why these should be allowed.
+-   Our intent is to provide first class support for all embeds that fulfill the notability guidelines laid out in [docs/contributing.md](../docs/contributing.md).
+-   Consider whether a iframe-with-placeholder solution fits your use case where iframe generation is not done immediately (can be done before user action for instant loading of iframe).
+-   Consider whether all that is needed is some documentation for how to use the embed with `amp-iframe`.
+-   Iframes and all sub resources must be served from HTTPS.
+-   Avoid client side rendering of iframe content.
+-   If your use of iframes is for style isolation, consider that AMP might provide an iframe-free alternative.
+-   If you can make it not-iframe-based that is much better. (See e.g. the pinterest embed). We will always ask to do this first. E.g. adding a CORS endpoint to your server might make this possible.
+-   Must play well within [AMP's sizing framework](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md).
+-   All JS on container page must be open source and bundled with AMP.
+-   JavaScript loaded into iframe should be reasonable with respect to functionality.
+-   Use the `sandbox` attribute on iframe if possible.
+-   Provide unit and [integration tests](#adding-proper-integration-tests).
+-   Embeds that require browser plugins, such as Flash, Java, ActiveX, Silverlight, etc. are disallowed unless necessary. Special review required. We cannot currently see a reason why these should be allowed.
 
 ## Ads
 
-- We welcome pull requests by all ad networks for inclusion into AMP.
-- All ads and all sub resources must be served from HTTPS.
-- Must play well within [AMP's sizing framework](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md).
-- For display ads support, always implement amp-ad and instruct your client to use your amp-ad implementation instead of using amp-iframe. Althought amp-iframe will render the ad, ad clicks will break and viewability information is not available.
-- Providing an optional image only zero-iframe embed is appreciated.
-- Support viewability and other metrics/instrumentation as supplied by AMP (via postMessage API)
-- Try to keep overall iframe count at one per ad. Explain why more are needed.
-- Share JS between iframes on the same page.
-- Provide unit and [integration tests](#adding-proper-integration-tests).
-- Provide test accounts for inclusion in our open source repository for integration tests.
+-   We welcome pull requests by all ad networks for inclusion into AMP.
+-   All ads and all sub resources must be served from HTTPS.
+-   Must play well within [AMP's sizing framework](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md).
+-   For display ads support, always implement amp-ad and instruct your client to use your amp-ad implementation instead of using amp-iframe. Althought amp-iframe will render the ad, ad clicks will break and viewability information is not available.
+-   Providing an optional image only zero-iframe embed is appreciated.
+-   Support viewability and other metrics/instrumentation as supplied by AMP (via postMessage API)
+-   Try to keep overall iframe count at one per ad. Explain why more are needed.
+-   Share JS between iframes on the same page.
+-   Provide unit and [integration tests](#adding-proper-integration-tests).
+-   Provide test accounts for inclusion in our open source repository for integration tests.
 
 The following aren't hard requirements, but are performance optimizations we should strive to incorporate. Please provide a timeline as to when you expect to follow these guidelines:
 
-- Support pause and play APIs to turn animations on and off. Ideally also to interrupt loading.
-- Never block the UI thread for longer than 50ms, so that user action is never blocked for longer than that.
-  - Keep individual JS files small enough, so they compile in under 50ms on a 2013 Android phone.
-  - Split up other expensive work, so it can be interrupted at 50ms boundary.
-- Creatives should only use animations drive by CSS animation frame.
-- Creatives should only animate using CSS transforms and opacity.
-- When creatives animate they should not use more than 2ms time per frame to allow for other animations to have sufficient time for concurrent animations.
+-   Support pause and play APIs to turn animations on and off. Ideally also to interrupt loading.
+-   Never block the UI thread for longer than 50ms, so that user action is never blocked for longer than that.
+    -   Keep individual JS files small enough, so they compile in under 50ms on a 2013 Android phone.
+    -   Split up other expensive work, so it can be interrupted at 50ms boundary.
+-   Creatives should only use animations drive by CSS animation frame.
+-   Creatives should only animate using CSS transforms and opacity.
+-   When creatives animate they should not use more than 2ms time per frame to allow for other animations to have sufficient time for concurrent animations.
 
 The better an ad network does on the above requirements, the earlier ads from it will be loaded into AMP. In other words: _The slower the ad loads and the more it interferes with the page, the later AMP will load it._
 
@@ -55,16 +55,16 @@ Review the [ads/README](../ads/README.md) for further details on ad integration.
 
 ## Fonts
 
-- AMP allows inclusion of fonts via the `@font-face` directive.
-- JavaScript can not be involved with the initiation of font loading.
-- Font loading gets controlled (but not initiated) by [`<amp-font>`](https://github.com/ampproject/amphtml/issues/648).
-- AMP by default does not allow inclusion of external stylesheets, but it is happy to allow URL prefixes of font providers for font inclusion via link tags. These link tags and their fonts must be served via HTTPS.
-- If a font provider does referrer based "security" it needs to allow the AMP proxy origins before being included in the link tag allowlist. AMP proxy sends the appropriate referrer header such as `https://cdn.ampproject.org`.
+-   AMP allows inclusion of fonts via the `@font-face` directive.
+-   JavaScript can not be involved with the initiation of font loading.
+-   Font loading gets controlled (but not initiated) by [`<amp-font>`](https://github.com/ampproject/amphtml/issues/648).
+-   AMP by default does not allow inclusion of external stylesheets, but it is happy to allow URL prefixes of font providers for font inclusion via link tags. These link tags and their fonts must be served via HTTPS.
+-   If a font provider does referrer based "security" it needs to allow the AMP proxy origins before being included in the link tag allowlist. AMP proxy sends the appropriate referrer header such as `https://cdn.ampproject.org`.
 
 # Adding proper integration tests
 
 You should ensure there are integration tests for your extension. These should be added to the AMP
 repo where it makes sense. In some cases this won't be possible because it relies on bringing up
 third-party infrastructure. In these cases you should maintain testing for the extension on your
-infrastructure against both production AMP and [canary](https://github.com/ampproject/amphtml/blob/master/contributing/release-schedule.md#amp-experimental-and-beta-channels).
-Upon any monitored failures, an escalation can be raised in [regular AMP communication channel](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#discussion-channels).
+infrastructure against both production AMP and [canary](https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md#amp-experimental-and-beta-channels).
+Upon any monitored failures, an escalation can be raised in [regular AMP communication channel](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#discussion-channels).
diff --git a/3p/amp-script-proxy-iframe.js b/3p/amp-script-proxy-iframe.js
new file mode 100644
index 0000000000000..0bf32fead838a
--- /dev/null
+++ b/3p/amp-script-proxy-iframe.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * See IframeWorker within `worker-dom` for the iframe proxy contract.
+ */
+
+/**
+ * @enum {string}
+ */
+const MESSAGE_TYPE = {
+  iframeReady: 'iframe-ready',
+  workerReady: 'worker-ready',
+  init: 'init-worker',
+  onmessage: 'onmessage',
+  onerror: 'onerror',
+  onmessageerror: 'onmessageerror',
+  postMessage: 'postMessage',
+};
+
+let parentOrigin = '*';
+
+/**
+ * @param {MessageType} type
+ * @param {*} message
+ */
+function send(type, message) {
+  if (type !== MESSAGE_TYPE.iframeReady && parentOrigin === '*') {
+    throw new Error('Broadcast banned except for iframe-ready message.');
+  }
+  parent./*OK*/ postMessage({type, message}, parentOrigin);
+}
+
+/**
+ *
+ * @param {MessageType} type
+ * @param {*} handler
+ */
+function listen(type, handler) {
+  window.addEventListener('message', (event) => {
+    if (event.source !== parent) {
+      return;
+    }
+    parentOrigin = event.origin;
+
+    if (event.data.type === type) {
+      handler(event.data);
+    }
+  });
+}
+
+// Send initialization.
+send(MESSAGE_TYPE.iframeReady);
+
+let worker = null;
+// Listen for Worker Init.
+listen(MESSAGE_TYPE.init, ({code}) => {
+  if (worker) {
+    return;
+  }
+  worker = new Worker(URL.createObjectURL(new Blob([code])));
+
+  // Proxy messages Worker to parent Window.
+  worker.onmessage = (e) => send(MESSAGE_TYPE.onmessage, e.data);
+  worker.onmessageerror = (e) => send(MESSAGE_TYPE.onmessageerror, e.data);
+  worker.onerror = (e) =>
+    send(MESSAGE_TYPE.onerror, {
+      lineno: e.lineno,
+      colno: e.colno,
+      message: e.message,
+      filename: e.filename,
+    });
+
+  // Proxy message from parent Window to Worker.
+  listen(MESSAGE_TYPE./*OK*/ postMessage, ({message}) =>
+    worker./*OK*/ postMessage(message)
+  );
+
+  send(MESSAGE_TYPE.workerReady);
+});
diff --git a/3p/ampcontext-integration.js b/3p/ampcontext-integration.js
index e71a05e86c5ff..c84253b652141 100644
--- a/3p/ampcontext-integration.js
+++ b/3p/ampcontext-integration.js
@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 import {AbstractAmpContext} from './ampcontext';
-import {adConfig} from '../ads/_config';
 import {computeInMasterFrame} from './3p';
 import {dev, user, userAssert} from '../src/log';
-import {dict} from '../src/utils/object';
+import {dict} from '../src/core/types/object';
 
 /**
  * Returns the "master frame" for all widgets of a given type.
@@ -30,10 +29,8 @@ import {dict} from '../src/utils/object';
  */
 export function masterSelection(win, type) {
   type = type.toLowerCase();
-  const configType =
-    adConfig[type] && adConfig[type]['masterFrameAccessibleType'];
   // The master has a special name.
-  const masterName = 'frame_' + (configType || type) + '_master';
+  const masterName = 'frame_' + type + '_master';
   let master;
   try {
     // Try to get the master from the parent. If it does not
diff --git a/3p/ampcontext-lib.js b/3p/ampcontext-lib.js
index 84a8437f86a18..f2ba0e446ced0 100644
--- a/3p/ampcontext-lib.js
+++ b/3p/ampcontext-lib.js
@@ -15,7 +15,7 @@
  */
 
 // src/polyfills.js must be the first import.
-import './polyfills'; // eslint-disable-line sort-imports-es6-autofix/sort-imports-es6
+import './polyfills';
 
 import {AmpContext} from './ampcontext.js';
 import {initLogConstructor, setReportError} from '../src/log';
diff --git a/3p/ampcontext.js b/3p/ampcontext.js
index 9a87fe612bcb1..990d2e2768b19 100644
--- a/3p/ampcontext.js
+++ b/3p/ampcontext.js
@@ -13,14 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {AmpEvents} from '../src/amp-events';
+import {AmpEvents} from '../src/core/constants/amp-events';
+import {Deferred} from '../src/core/data-structures/promise';
 import {IframeMessagingClient} from './iframe-messaging-client';
 import {MessageType} from '../src/3p-frame-messaging';
 import {dev, devAssert} from '../src/log';
-import {dict} from '../src/utils/object';
-import {isObject} from '../src/types';
+import {dict, map} from '../src/core/types/object';
+import {isObject} from '../src/core/types';
 import {parseUrlDeprecated} from '../src/url';
-import {tryParseJson} from '../src/json';
+import {tryParseJson} from '../src/core/types/object/json';
 
 export class AbstractAmpContext {
   /**
@@ -77,6 +78,9 @@ export class AbstractAmpContext {
     /** @type {?string} */
     this.initialConsentValue = null;
 
+    /** @type {?Object} */
+    this.initialConsentMetadata = null;
+
     /** @type {?Object} */
     this.initialLayoutRect = null;
 
@@ -107,6 +111,12 @@ export class AbstractAmpContext {
     /** @type {?string} */
     this.tagName = null;
 
+    /** @type {!Object<number, Deferred>} */
+    this.resizeIdToDeferred_ = map();
+
+    /** @type {number} */
+    this.nextResizeRequestId_ = 0;
+
     this.findAndSetMetadata_();
 
     /** @protected {!IframeMessagingClient} */
@@ -114,6 +124,7 @@ export class AbstractAmpContext {
     this.client_.setSentinel(devAssert(this.sentinel));
 
     this.listenForPageVisibility_();
+    this.listenToResizeResponse_();
   }
 
   /**
@@ -207,19 +218,60 @@ export class AbstractAmpContext {
   /**
    *  Send message to runtime requesting to resize ad to height and width.
    *    This is not guaranteed to succeed. All this does is make the request.
-   *  @param {number} width The new width for the ad we are requesting.
-   *  @param {number} height The new height for the ad we are requesting.
+   *  @param {number|undefined} width The new width for the ad we are requesting.
+   *  @param {number|undefined} height The new height for the ad we are requesting.
    *  @param {boolean=} hasOverflow Whether the ad handles its own overflow ele
+   *  @return {Promise} Signify the success/failure of the request.
    */
   requestResize(width, height, hasOverflow) {
+    const requestId = this.nextResizeRequestId_++;
     this.client_.sendMessage(
       MessageType.EMBED_SIZE,
       dict({
+        'id': requestId,
         'width': width,
         'height': height,
         'hasOverflow': hasOverflow,
       })
     );
+    const deferred = new Deferred();
+    this.resizeIdToDeferred_[requestId] = deferred;
+    return deferred.promise;
+  }
+
+  /**
+   *  Set up listeners to handle responses from request size.
+   */
+  listenToResizeResponse_() {
+    this.client_.registerCallback(MessageType.EMBED_SIZE_CHANGED, (data) => {
+      const id = data['id'];
+      if (id !== undefined) {
+        this.resizeIdToDeferred_[id].resolve();
+        delete this.resizeIdToDeferred_[id];
+      }
+    });
+
+    this.client_.registerCallback(MessageType.EMBED_SIZE_DENIED, (data) => {
+      const id = data['id'];
+      if (id !== undefined) {
+        this.resizeIdToDeferred_[id].reject('Resizing is denied');
+        delete this.resizeIdToDeferred_[id];
+      }
+    });
+  }
+
+  /**
+   * @param {string} endpoint Method being called
+   * @private
+   */
+  sendDeprecationNotice_(endpoint) {
+    this.client_.sendMessage(
+      MessageType.USER_ERROR_IN_IFRAME,
+      dict({
+        'message': `${endpoint} is deprecated`,
+        'expected': true,
+      })
+    );
   }
 
   /**
@@ -233,6 +285,7 @@ export class AbstractAmpContext {
     this.client_.registerCallback(MessageType.EMBED_SIZE_CHANGED, (obj) => {
       callback(obj['requestedHeight'], obj['requestedWidth']);
     });
+    this.sendDeprecationNotice_('onResizeSuccess');
   }
 
   /**
@@ -246,6 +299,14 @@ export class AbstractAmpContext {
     this.client_.registerCallback(MessageType.EMBED_SIZE_DENIED, (obj) => {
       callback(obj['requestedHeight'], obj['requestedWidth']);
     });
+    this.sendDeprecationNotice_('onResizeDenied');
+  }
+
+  /**
+   *  Make the ad interactive.
+   */
+  signalInteractive() {
+    this.client_.sendMessage(MessageType.SIGNAL_INTERACTIVE);
   }
 
   /**
@@ -297,6 +358,7 @@ export class AbstractAmpContext {
     this.hidden = context.hidden;
     this.initialConsentState = context.initialConsentState;
     this.initialConsentValue = context.initialConsentValue;
+    this.initialConsentMetadata = context.initialConsentMetadata;
     this.initialLayoutRect = context.initialLayoutRect;
     this.initialIntersection = context.initialIntersection;
     this.location = parseUrlDeprecated(context.location.href);
diff --git a/3p/beopinion.js b/3p/beopinion.js
index 83da5b7144ae3..c5b255dc205fd 100644
--- a/3p/beopinion.js
+++ b/3p/beopinion.js
@@ -88,9 +88,6 @@ function createContainer(global, data) {
 function getBeOpinionAsyncInit(global, accountId) {
   const {context} = global;
   return function () {
-    context.onResizeDenied(function (requestedHeight, requestedWidth) {
-      context.requestResize(requestedWidth, requestedHeight);
-    });
     global.BeOpinionSDK.init({
       account: accountId,
       onContentReceive: function (hasContent) {
@@ -103,10 +100,14 @@ function getBeOpinionAsyncInit(global, accountId) {
       onHeightChange: function (newHeight) {
         const c = global.document.getElementById('c');
         const boundingClientRect = c./*REVIEW*/ getBoundingClientRect();
-        context.requestResize(boundingClientRect.width, newHeight);
+        context
+          .requestResize(boundingClientRect.width, newHeight)
+          .catch(function () {
+            context.requestResize(boundingClientRect.width, newHeight);
+          });
       },
     });
-    global.BeOpinionSDK['watch'](); // global.BeOpinionSDK.watch() fails 'gulp check-types' validation
+    global.BeOpinionSDK['watch'](); // global.BeOpinionSDK.watch() fails 'amp check-types' validation
   };
 }
 
diff --git a/3p/bodymovinanimation.js b/3p/bodymovinanimation.js
index 21e3e538fadda..bd6e95b012b23 100644
--- a/3p/bodymovinanimation.js
+++ b/3p/bodymovinanimation.js
@@ -14,12 +14,21 @@
  * limitations under the License.
  */
 
-import {dict} from '../src/utils/object';
+import {dict} from '../src/core/types/object';
 import {getData} from '../src/event-helper';
 import {loadScript} from './3p';
-import {parseJson} from '../src/json';
+import {parseJson} from '../src/core/types/object/json';
 import {setStyles} from '../src/style';
 
+const libSourceUrl = dict({
+  'canvas':
+    'https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.6/lottie_canvas.min.js',
+  'html':
+    'https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.6/lottie_html.min.js',
+  'svg':
+    'https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.6/lottie_svg.min.js',
+});
+
 /**
  * Produces the AirBnB Bodymovin Player SDK object for the passed in callback.
  * @param {!Window} global
@@ -34,10 +43,7 @@ let animationHandler;
  * @param {!Function} cb
  */
 function getBodymovinAnimationSdk(global, renderer, cb) {
-  const scriptToLoad =
-    renderer === 'svg'
-      ? 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin_light.min.js'
-      : 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin.min.js';
+  const scriptToLoad = libSourceUrl[renderer] ?? libSourceUrl['svg'];
   loadScript(global, scriptToLoad, function () {
     cb(global.bodymovin);
   });
diff --git a/3p/embedly.js b/3p/embedly.js
index 9824d601793db..757cabf0da024 100644
--- a/3p/embedly.js
+++ b/3p/embedly.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {hasOwn} from '../src/utils/object';
+import {hasOwn} from '../src/core/types/object';
 import {loadScript} from './3p';
 import {setStyle} from '../src/style';
 
diff --git a/3p/facebook.js b/3p/facebook.js
index 834c16a011ab1..b60d30e3f5215 100644
--- a/3p/facebook.js
+++ b/3p/facebook.js
@@ -14,11 +14,26 @@
  * limitations under the License.
  */
 
-import {dashToUnderline} from '../src/string';
-import {dict} from '../src/utils/object';
+import {dashToUnderline} from '../src/core/types/string';
+import {devAssert} from '../src/log';
+import {dict} from '../src/core/types/object';
+import {isEnumValue} from '../src/core/types/enum';
 import {loadScript} from './3p';
 import {setStyle} from '../src/style';
-import {userAssert} from '../src/log';
+
+/** @const @enum {string} */
+export const FacebookEmbedType = {
+  // Embeds a single comment or reply to a comment on a post rendered by
+  // amp-facebook.
+  COMMENT: 'comment',
+  // Allows users to comment on the embedded content using their Facebook
+  // accounts. Correlates to amp-facebook-comments.
+  COMMENTS: 'comments',
+  LIKE: 'like',
+  PAGE: 'page',
+  POST: 'post',
+  VIDEO: 'video',
+};
 
 /**
  * Produces the Facebook SDK object for the passed in callback.
@@ -120,32 +135,6 @@ function getDefaultEmbedAs(href) {
   return href.match(/\/videos\/\d+\/?$/) ? 'video' : 'post';
 }
 
-/**
- * Create DOM element for the Facebook embedded content plugin.
- * @param {!Window} global
- * @param {!Object} data The element data
- * @return {!Element} div
- */
-function getEmbedContainer(global, data) {
-  const embedAs = data.embedAs || getDefaultEmbedAs(data.href);
-
-  userAssert(
-    ['post', 'video', 'comment'].indexOf(embedAs) !== -1,
-    'Attribute data-embed-as  for <amp-facebook> value is wrong, should be' +
-      ' "post", "video" or "comment" but was: %s',
-    embedAs
-  );
-
-  switch (embedAs) {
-    case 'comment':
-      return getCommentContainer(global, data);
-    case 'video':
-      return getVideoContainer(global, data);
-    default:
-      return getPostContainer(global, data);
-  }
-}
-
 /**
  * Create DOM element for the Facebook embedded page plugin.
  * Reference: https://developers.facebook.com/docs/plugins/page-plugin
@@ -207,23 +196,40 @@ function getLikeContainer(global, data) {
 }
 
 /**
+ * Create DOM element for the Facebook embedded content plugin.
  * @param {!Window} global
- * @param {!Object} data
+ * @param {!Object} data The element data
+ * @param {string} embedAs
+ * @return {!Element} div
  */
-export function facebook(global, data) {
-  const extension = global.context.tagName;
-  let container;
-
-  if (extension === 'AMP-FACEBOOK-PAGE') {
-    container = getPageContainer(global, data);
-  } else if (extension === 'AMP-FACEBOOK-LIKE') {
-    container = getLikeContainer(global, data);
-  } else if (extension === 'AMP-FACEBOOK-COMMENTS') {
-    container = getCommentsContainer(global, data);
-  } /*AMP-FACEBOOK */ else {
-    container = getEmbedContainer(global, data);
+function getEmbedContainer(global, data, embedAs) {
+  devAssert(isEnumValue(FacebookEmbedType, embedAs));
+  switch (embedAs) {
+    case FacebookEmbedType.PAGE:
+      return getPageContainer(global, data);
+    case FacebookEmbedType.LIKE:
+      return getLikeContainer(global, data);
+    case FacebookEmbedType.COMMENTS:
+      return getCommentsContainer(global, data);
+    case FacebookEmbedType.COMMENT:
+      return getCommentContainer(global, data);
+    case FacebookEmbedType.VIDEO:
+      return getVideoContainer(global, data);
+    default:
+      return getPostContainer(global, data);
   }
+}
 
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function facebook(global, data) {
+  const container = getEmbedContainer(
+    global,
+    data,
+    data.embedAs || getDefaultEmbedAs(data.href)
+  );
   global.document.getElementById('c').appendChild(container);
 
   getFacebookSdk(
diff --git a/3p/frame-metadata.js b/3p/frame-metadata.js
index c1ba8732b3c75..7b6f0a62cf66d 100644
--- a/3p/frame-metadata.js
+++ b/3p/frame-metadata.js
@@ -15,10 +15,10 @@
  */
 
 import {dev} from '../src/log';
-import {dict} from '../src/utils/object.js';
+import {dict} from '../src/core/types/object';
 import {getMode} from '../src/mode';
-import {once} from '../src/utils/function.js';
-import {parseJson} from '../src/json';
+import {once} from '../src/core/types/function';
+import {parseJson} from '../src/core/types/object/json';
 import {parseUrlDeprecated} from '../src/url';
 
 /**
diff --git a/3p/frame.max.html b/3p/frame.max.html
index 19d77478edf5d..85783273e917b 100644
--- a/3p/frame.max.html
+++ b/3p/frame.max.html
@@ -2,7 +2,13 @@
 <head>
 <meta charset="utf-8">
 <meta name="robots" content="noindex">
-<script src="./integration.js"></script>
+<script>
+var url = './integration.js';
+try {
+  url = JSON.parse(window.name).bootstrap;
+} catch (e) {}
+document.write('<script src="' + url + '"><' + '/script>');
+</script>
 </head>
 <body style="margin:0">
 <div id="c" style="position:absolute;top:0;left:0;bottom:0;right:0;">
diff --git a/3p/iframe-messaging-client.js b/3p/iframe-messaging-client.js
index d81aa23b59767..89db922e8e0ac 100644
--- a/3p/iframe-messaging-client.js
+++ b/3p/iframe-messaging-client.js
@@ -19,9 +19,9 @@ import {
   listen,
   serializeMessage,
 } from '../src/3p-frame-messaging';
-import {Observable} from '../src/observable';
+import {Observable} from '../src/core/data-structures/observable';
 import {dev} from '../src/log';
-import {dict, map} from '../src/utils/object';
+import {dict, map} from '../src/core/types/object';
 import {getData} from '../src/event-helper';
 import {getMode} from '../src/mode';
 
diff --git a/3p/iframe-transport-client-lib.js b/3p/iframe-transport-client-lib.js
index 7a635e4a717b9..c43c4d7f8f5e5 100644
--- a/3p/iframe-transport-client-lib.js
+++ b/3p/iframe-transport-client-lib.js
@@ -15,7 +15,7 @@
  */
 
 // src/polyfills.js must be the first import.
-import './polyfills'; // eslint-disable-line sort-imports-es6-autofix/sort-imports-es6
+import './polyfills';
 
 import {IframeTransportClient} from './iframe-transport-client.js';
 import {initLogConstructor, setReportError} from '../src/log';
diff --git a/3p/iframe-transport-client.js b/3p/iframe-transport-client.js
index c45b9d588b21e..c36f64615bbca 100644
--- a/3p/iframe-transport-client.js
+++ b/3p/iframe-transport-client.js
@@ -17,7 +17,7 @@
 import {IframeMessagingClient} from './iframe-messaging-client';
 import {MessageType} from '../src/3p-frame-messaging';
 import {dev, devAssert, user, userAssert} from '../src/log';
-import {tryParseJson} from '../src/json';
+import {tryParseJson} from '../src/core/types/object/json';
 
 /** @private @const {string} */
 const TAG_ = 'iframe-transport-client';
diff --git a/3p/integration-lib.js b/3p/integration-lib.js
new file mode 100644
index 0000000000000..9f5aac71463cd
--- /dev/null
+++ b/3p/integration-lib.js
@@ -0,0 +1,369 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {IntegrationAmpContext} from './ampcontext-integration';
+import {dict} from '../src/core/types/object';
+import {endsWith} from '../src/core/types/string';
+import {getAmpConfig, getEmbedType, getLocation} from './frame-metadata';
+import {getSourceUrl, isProxyOrigin, parseUrlDeprecated} from '../src/url';
+import {
+  initLogConstructor,
+  isUserErrorMessage,
+  setReportError,
+  userAssert,
+} from '../src/log';
+import {installEmbedStateListener, manageWin} from './environment';
+import {internalRuntimeVersion} from '../src/internal-version';
+import {parseJson} from '../src/core/types/object/json';
+import {run, setExperimentToggles} from './3p';
+import {urls} from '../src/config';
+
+/**
+ * Whether the embed type may be used with amp-embed tag.
+ * @const {!Object<string, boolean>}
+ */
+const AMP_EMBED_ALLOWED = {
+  _ping_: true,
+  '1wo': true,
+  '24smi': true,
+  adsloom: true,
+  adstyle: true,
+  bringhub: true,
+  dable: true,
+  engageya: true,
+  epeex: true,
+  firstimpression: true,
+  forkmedia: true,
+  glomex: true,
+  idealmedia: true,
+  insticator: true,
+  jubna: true,
+  kuadio: true,
+  'mantis-recommend': true,
+  mediaad: true,
+  mgid: true,
+  miximedia: true,
+  mywidget: true,
+  nativery: true,
+  lentainform: true,
+  opinary: true,
+  outbrain: true,
+  plista: true,
+  postquare: true,
+  ppstudio: true,
+  pubexchange: true,
+  pulse: true,
+  rbinfox: true,
+  rcmwidget: true,
+  readmo: true,
+  recreativ: true,
+  runative: true,
+  smartclip: true,
+  smi2: true,
+  speakol: true,
+  strossle: true,
+  svknative: true,
+  taboola: true,
+  temedya: true,
+  vlyby: true,
+  whopainfeed: true,
+  yahoofedads: true,
+  yahoonativeads: true,
+  yektanet: true,
+  zen: true,
+  zergnet: true,
+};
+
+// For backward compat, we always allow these types without the iframe
+// opting in.
+const defaultAllowedTypesInCustomFrame = [
+  // Entries must be reasonably safe and not allow overriding the injected
+  // JS URL.
+  // Each custom iframe can override this through the second argument to
+  // draw3p. See amp-ad docs.
+  'facebook',
+  'twitter',
+  'doubleclick',
+  'yieldbot',
+  '_ping_',
+];
+
+/**
+ * Initialize 3p frame.
+ * @param {!Window} win
+ */
+export function init(win) {
+  initLogConstructor();
+  const config = getAmpConfig();
+
+  // Overriding to short-circuit src/mode#getMode()
+  win.__AMP_MODE = config.mode;
+
+  setReportError(console.error.bind(console));
+
+  setExperimentToggles(config.experimentToggles);
+}
+
+/**
+ * Visible for testing.
+ * Draws a 3p embed to the window. Expects the data to include the 3p type.
+ * @param {!Window} win
+ * @param {!Object} data
+ * @param {function(!Object, function(!Object))|undefined} configCallback
+ *     Optional callback that allows user code to manipulate the incoming
+ *     configuration. See
+ *     https://github.com/ampproject/amphtml/issues/1210 for some context
+ *     on this.
+ */
+export function draw3pInternal(win, data, configCallback) {
+  const type = data['type'];
+
+  userAssert(
+    isTagNameAllowed(type, win.context.tagName),
+    'Embed type %s not allowed with tag %s',
+    type,
+    win.context.tagName
+  );
+  if (configCallback) {
+    configCallback(data, (data) => {
+      userAssert(data, 'Expected configuration to be passed as first argument');
+      run(type, win, data);
+    });
+  } else {
+    run(type, win, data);
+  }
+}
+
+/**
+ * Draws an embed, optionally synchronously, to the DOM.
+ * @param {function(!Object, function(!Object))} opt_configCallback If provided
+ *     will be invoked with two arguments:
+ *     1. The configuration parameters supplied to this embed.
+ *     2. A callback that MUST be called for rendering to proceed. It takes
+ *        no arguments. Configuration is expected to be modified in-place.
+ * @param {!Array<string>=} opt_allowed3pTypes List of advertising network
+ *     types you expect.
+ * @param {!Array<string>=} opt_allowedEmbeddingOrigins List of domain suffixes
+ *     that are allowed to embed this frame.
+ */
+export function draw3p(
+  opt_configCallback,
+  opt_allowed3pTypes,
+  opt_allowedEmbeddingOrigins
+) {
+  try {
+    const location = getLocation();
+
+    ensureFramed(window);
+    validateParentOrigin(window, location);
+    validateAllowedTypes(window, getEmbedType(), opt_allowed3pTypes);
+    if (opt_allowedEmbeddingOrigins) {
+      validateAllowedEmbeddingOrigins(window, opt_allowedEmbeddingOrigins);
+    }
+    window.context = new IntegrationAmpContext(window);
+    manageWin(window);
+    installEmbedStateListener();
+
+    // Ugly type annotation is due to Event.prototype.data being denylisted
+    // and the compiler not being able to discern otherwise
+    // TODO(alanorozco): Do this more elegantly once old impl is cleaned up.
+    draw3pInternal(
+      window,
+      /** @type {!IntegrationAmpContext} */ (window.context).data || {},
+      opt_configCallback
+    );
+
+    window.context.bootstrapLoaded();
+  } catch (e) {
+    if (window.context && window.context.report3pError) {
+      // window.context has initiated yet
+      if (e.message && isUserErrorMessage(e.message)) {
+        // report user error to parent window
+        window.context.report3pError(e);
+      }
+    }
+
+    const c = window.context || {mode: {test: false}};
+    if (!c.mode.test) {
+      lightweightErrorReport(e, c.canary);
+      throw e;
+    }
+  }
+}
+
+/**
+ * Throws if the current frame's parent origin is not equal to
+ * the claimed origin.
+ * Only check for browsers that support ancestorOrigins
+ * @param {!Window} window
+ * @param {!Location} parentLocation
+ * @visibleForTesting
+ */
+export function validateParentOrigin(window, parentLocation) {
+  const ancestors = window.location.ancestorOrigins;
+  // Currently only webkit and blink based browsers support
+  // ancestorOrigins. In that case we proceed but mark the origin
+  // as non-validated.
+  if (!ancestors || !ancestors.length) {
+    return;
+  }
+  userAssert(
+    ancestors[0] == parentLocation.origin,
+    'Parent origin mismatch: %s, %s',
+    ancestors[0],
+    parentLocation.origin
+  );
+}
+
+/**
+ * Check that this iframe intended this particular ad type to run.
+ * @param {!Window} window
+ * @param {string} type 3p type
+ * @param {!Array<string>|undefined} allowedTypes May be undefined.
+ * @visibleForTesting
+ */
+export function validateAllowedTypes(window, type, allowedTypes) {
+  const thirdPartyHost = parseUrlDeprecated(urls.thirdParty).hostname;
+
+  // Everything allowed in default iframe.
+  if (window.location.hostname == thirdPartyHost) {
+    return;
+  }
+  if (urls.thirdPartyFrameRegex.test(window.location.hostname)) {
+    return;
+  }
+  if (window.location.hostname == 'ads.localhost') {
+    return;
+  }
+  if (defaultAllowedTypesInCustomFrame.indexOf(type) != -1) {
+    return;
+  }
+  userAssert(
+    allowedTypes && allowedTypes.indexOf(type) != -1,
+    '3p type for custom iframe not allowed: %s',
+    type
+  );
+}
+
+/**
+ * Check that parent host name was allowed.
+ * @param {!Window} window
+ * @param {!Array<string>} allowedHostnames Suffixes of allowed host names.
+ * @visibleForTesting
+ */
+export function validateAllowedEmbeddingOrigins(window, allowedHostnames) {
+  if (!window.document.referrer) {
+    throw new Error('Referrer expected: ' + window.location.href);
+  }
+  const ancestors = window.location.ancestorOrigins;
+  // We prefer the unforgable ancestorOrigins, but referrer is better than
+  // nothing.
+  const ancestor = ancestors ? ancestors[0] : window.document.referrer;
+  let {hostname} = parseUrlDeprecated(ancestor);
+  if (isProxyOrigin(ancestor)) {
+    // If we are on the cache domain, parse the source hostname from
+    // the referrer. The referrer is used because it should be
+    // trustable.
+    hostname = parseUrlDeprecated(
+      getSourceUrl(window.document.referrer)
+    ).hostname;
+  }
+  for (let i = 0; i < allowedHostnames.length; i++) {
+    // Either the hostname is allowed
+    if (allowedHostnames[i] == hostname) {
+      return;
+    }
+    // Or it ends in .$hostname (aka is a sub domain of an allowed domain.
+    if (endsWith(hostname, '.' + allowedHostnames[i])) {
+      return;
+    }
+  }
+  throw new Error(
+    'Invalid embedding hostname: ' + hostname + ' not in ' + allowedHostnames
+  );
+}
+
+/**
+ * Throws if this window is a top level window.
+ * @param {!Window} window
+ * @visibleForTesting
+ */
+export function ensureFramed(window) {
+  if (window == window.parent) {
+    throw new Error('Must be framed: ' + window.location.href);
+  }
+}
+
+/**
+ * Expects the fragment to contain JSON.
+ * @param {string} fragment Value of location.fragment
+ * @return {?JsonObject}
+ * @visibleForTesting
+ */
+export function parseFragment(fragment) {
+  try {
+    let json = fragment.substr(1);
+    // Some browser, notably Firefox produce an encoded version of the fragment
+    // while most don't. Since we know how the string should start, this is easy
+    // to detect.
+    if (json.startsWith('{%22')) {
+      json = decodeURIComponent(json);
+    }
+    return /** @type {!JsonObject} */ (json ? parseJson(json) : dict());
+  } catch (err) {
+    return null;
+  }
+}
+
+/**
+ * Not all types of embeds are allowed to be used with all tag names on the
+ * AMP side. This function checks whether the current usage is permissible.
+ * @param {string} type
+ * @param {string|undefined} tagName The tagName that was used to embed this
+ *     3p-frame.
+ * @return {boolean}
+ */
+export function isTagNameAllowed(type, tagName) {
+  if (tagName == 'AMP-EMBED') {
+    return !!AMP_EMBED_ALLOWED[type];
+  }
+  return true;
+}
+
+/**
+ * Reports an error to the server. Must only be called once per page.
+ * Not for use in event handlers.
+ *
+ * We don't use the default error in error.js handler because it has
+ * too many deps for this small JS binary.
+ *
+ * @param {!Error} e
+ * @param {boolean} isCanary
+ */
+function lightweightErrorReport(e, isCanary) {
+  new Image().src =
+    urls.errorReporting +
+    '?3p=1&v=' +
+    encodeURIComponent(internalRuntimeVersion()) +
+    '&m=' +
+    encodeURIComponent(e.message) +
+    '&ca=' +
+    (isCanary ? 1 : 0) +
+    '&r=' +
+    encodeURIComponent(document.referrer) +
+    '&s=' +
+    encodeURIComponent(e.stack || '');
+}
diff --git a/3p/integration.js b/3p/integration.js
index f295db37a3237..2cd949dfd4486 100644
--- a/3p/integration.js
+++ b/3p/integration.js
@@ -23,26 +23,11 @@
  */
 
 // src/polyfills.js must be the first import.
-import './polyfills'; // eslint-disable-line sort-imports-es6-autofix/sort-imports-es6
+import './polyfills';
 
-import {IntegrationAmpContext} from './ampcontext-integration';
-import {dict} from '../src/utils/object.js';
-import {endsWith} from '../src/string';
-import {getAmpConfig, getEmbedType, getLocation} from './frame-metadata';
+import {draw3p, init} from './integration-lib';
 import {getMode} from '../src/mode';
-import {getSourceUrl, isProxyOrigin, parseUrlDeprecated} from '../src/url';
-import {
-  initLogConstructor,
-  isUserErrorMessage,
-  setReportError,
-  userAssert,
-} from '../src/log';
-import {installEmbedStateListener, manageWin} from './environment';
-import {internalRuntimeVersion} from '../src/internal-version';
-import {parseJson} from '../src/json';
-import {register, run, setExperimentToggles} from './3p';
-import {startsWith} from '../src/string.js';
-import {urls} from '../src/config';
+import {register} from './3p';
 
 // 3P - please keep in alphabetic order
 import {beopinion} from './beopinion';
@@ -57,301 +42,276 @@ import {twitter} from './twitter';
 import {viqeoplayer} from './viqeoplayer';
 import {yotpo} from './yotpo';
 
-import {_ping_} from '../ads/_ping_';
+import {_ping_} from '../ads/vendors/_ping_';
 
 // 3P Ad Networks - please keep in alphabetic order
-import {_1wo} from '../ads/1wo';
-import {_24smi} from '../ads/24smi';
-import {a8} from '../ads/a8';
-import {a9} from '../ads/a9';
-import {accesstrade} from '../ads/accesstrade';
-import {adagio} from '../ads/adagio';
-import {adblade, industrybrains} from '../ads/adblade';
-import {adbutler} from '../ads/adbutler';
-import {adform} from '../ads/adform';
-import {adfox} from '../ads/adfox';
-import {adgeneration} from '../ads/adgeneration';
-import {adglare} from '../ads/adglare';
-import {adhese} from '../ads/adhese';
-import {adincube} from '../ads/adincube';
-import {adition} from '../ads/adition';
-import {adman} from '../ads/adman';
-import {admanmedia} from '../ads/admanmedia';
-import {admixer} from '../ads/admixer';
-import {adocean} from '../ads/adocean';
-import {adop} from '../ads/adop';
-import {adpicker} from '../ads/adpicker';
-import {adplugg} from '../ads/adplugg';
-import {adpon} from '../ads/adpon';
-import {adreactor} from '../ads/adreactor';
-import {adsensor} from '../ads/adsensor';
-import {adservsolutions} from '../ads/adservsolutions';
-import {adsloom} from '../ads/adsloom';
-import {adsnative} from '../ads/adsnative';
-import {adspeed} from '../ads/adspeed';
-import {adspirit} from '../ads/adspirit';
-import {adstir} from '../ads/adstir';
-import {adstyle} from '../ads/adstyle';
-import {adtech} from '../ads/adtech';
-import {adthrive} from '../ads/adthrive';
-import {adunity} from '../ads/adunity';
-import {aduptech} from '../ads/aduptech';
-import {adventive} from '../ads/adventive';
-import {adverline} from '../ads/adverline';
-import {adverticum} from '../ads/adverticum';
-import {advertserve} from '../ads/advertserve';
-import {adyoulike} from '../ads/adyoulike';
-import {affiliateb} from '../ads/affiliateb';
-import {aja} from '../ads/aja';
-import {amoad} from '../ads/amoad';
-import {aniview} from '../ads/aniview';
-import {anyclip} from '../ads/anyclip';
-import {appnexus} from '../ads/appnexus';
-import {appvador} from '../ads/appvador';
-import {atomx} from '../ads/atomx';
-import {baidu} from '../ads/baidu';
-import {beaverads} from '../ads/beaverads';
-import {bidtellect} from '../ads/bidtellect';
-import {blade} from '../ads/blade';
-import {brainy} from '../ads/brainy';
-import {bringhub} from '../ads/bringhub';
-import {broadstreetads} from '../ads/broadstreetads';
-import {byplay} from '../ads/byplay';
-import {caajainfeed} from '../ads/caajainfeed';
-import {capirs} from '../ads/capirs';
-import {caprofitx} from '../ads/caprofitx';
-import {cedato} from '../ads/cedato';
-import {chargeads, nws} from '../ads/nws';
-import {colombia} from '../ads/colombia';
-import {conative} from '../ads/conative';
-import {connatix} from '../ads/connatix';
-import {contentad} from '../ads/contentad';
-import {criteo} from '../ads/criteo';
-import {csa} from '../ads/google/csa';
-import {dable} from '../ads/dable';
-import {directadvert} from '../ads/directadvert';
-import {distroscale} from '../ads/distroscale';
-import {dotandads} from '../ads/dotandads';
-import {dynad} from '../ads/dynad';
-import {eadv} from '../ads/eadv';
-import {eas} from '../ads/eas';
-import {empower} from '../ads/empower';
-import {engageya} from '../ads/engageya';
-import {epeex} from '../ads/epeex';
-import {eplanning} from '../ads/eplanning';
-import {ezoic} from '../ads/ezoic';
-import {f1e} from '../ads/f1e';
-import {f1h} from '../ads/f1h';
-import {felmat} from '../ads/felmat';
-import {flite} from '../ads/flite';
-import {fluct} from '../ads/fluct';
-import {forkmedia} from '../ads/forkmedia';
-import {freewheel} from '../ads/freewheel';
-import {fusion} from '../ads/fusion';
-import {genieessp} from '../ads/genieessp';
-import {giraff} from '../ads/giraff';
-import {gmossp} from '../ads/gmossp';
-import {gumgum} from '../ads/gumgum';
-import {holder} from '../ads/holder';
-import {ibillboard} from '../ads/ibillboard';
-import {idealmedia} from '../ads/idealmedia';
-import {imaVideo} from '../ads/google/imaVideo';
-import {imedia} from '../ads/imedia';
-import {imobile} from '../ads/imobile';
-import {imonomy} from '../ads/imonomy';
-import {improvedigital} from '../ads/improvedigital';
-import {inmobi} from '../ads/inmobi';
-import {innity} from '../ads/innity';
-import {insticator} from '../ads/insticator';
-import {invibes} from '../ads/invibes';
-import {iprom} from '../ads/iprom';
-import {ix} from '../ads/ix';
-import {jubna} from '../ads/jubna';
-import {kargo} from '../ads/kargo';
-import {kiosked} from '../ads/kiosked';
-import {kixer} from '../ads/kixer';
-import {kuadio} from '../ads/kuadio';
-import {lentainform} from '../ads/lentainform';
-import {ligatus} from '../ads/ligatus';
-import {lockerdome} from '../ads/lockerdome';
-import {logly} from '../ads/logly';
-import {loka} from '../ads/loka';
-import {mads} from '../ads/mads';
-import {mantisDisplay, mantisRecommend} from '../ads/mantis';
-import {marfeel} from '../ads/marfeel';
-import {mediaad} from '../ads/mediaad';
-import {medianet} from '../ads/medianet';
-import {mediavine} from '../ads/mediavine';
-import {medyanet} from '../ads/medyanet';
-import {meg} from '../ads/meg';
-import {mgid} from '../ads/mgid';
-import {microad} from '../ads/microad';
-import {miximedia} from '../ads/miximedia';
-import {mixpo} from '../ads/mixpo';
-import {monetizer101} from '../ads/monetizer101';
-import {mox} from '../ads/mox';
-import {my6sense} from '../ads/my6sense';
-import {mytarget} from '../ads/mytarget';
-import {mywidget} from '../ads/mywidget';
-import {nativeroll} from '../ads/nativeroll';
-import {nativery} from '../ads/nativery';
-import {nativo} from '../ads/nativo';
-import {navegg} from '../ads/navegg';
-import {nend} from '../ads/nend';
-import {netletix} from '../ads/netletix';
-import {noddus} from '../ads/noddus';
-import {nokta} from '../ads/nokta';
-import {onead} from '../ads/onead';
-import {onnetwork} from '../ads/onnetwork';
-import {openadstream} from '../ads/openadstream';
-import {openx} from '../ads/openx';
-import {opinary} from '../ads/opinary';
-import {outbrain} from '../ads/outbrain';
-import {pixels} from '../ads/pixels';
-import {plista} from '../ads/plista';
-import {polymorphicads} from '../ads/polymorphicads';
-import {popin} from '../ads/popin';
-import {postquare} from '../ads/postquare';
-import {ppstudio} from '../ads/ppstudio';
-import {pressboard} from '../ads/pressboard';
-import {promoteiq} from '../ads/promoteiq';
-import {pubexchange} from '../ads/pubexchange';
-import {pubguru} from '../ads/pubguru';
-import {pubmatic} from '../ads/pubmatic';
-import {pubmine} from '../ads/pubmine';
-import {puffnetwork} from '../ads/puffnetwork';
-import {pulsepoint} from '../ads/pulsepoint';
-import {purch} from '../ads/purch';
-import {quoraad} from '../ads/quoraad';
-import {rakutenunifiedads} from '../ads/rakutenunifiedads';
-import {rbinfox} from '../ads/rbinfox';
-import {readmo} from '../ads/readmo';
-import {realclick} from '../ads/realclick';
-import {recomad} from '../ads/recomad';
-import {relap} from '../ads/relap';
-import {relappro} from '../ads/relappro';
-import {revcontent} from '../ads/revcontent';
-import {revjet} from '../ads/revjet';
-import {rfp} from '../ads/rfp';
-import {rnetplus} from '../ads/rnetplus';
-import {rubicon} from '../ads/rubicon';
-import {runative} from '../ads/runative';
-import {sas} from '../ads/sas';
-import {seedingalliance} from '../ads/seedingalliance';
-import {sekindo} from '../ads/sekindo';
-import {sharethrough} from '../ads/sharethrough';
-import {shemedia} from '../ads/shemedia';
-import {sklik} from '../ads/sklik';
-import {slimcutmedia} from '../ads/slimcutmedia';
-import {smartadserver} from '../ads/smartadserver';
-import {smartclip} from '../ads/smartclip';
-import {smi2} from '../ads/smi2';
-import {smilewanted} from '../ads/smilewanted';
-import {sogouad} from '../ads/sogouad';
-import {sortable} from '../ads/sortable';
-import {sovrn} from '../ads/sovrn';
-import {speakol} from '../ads/speakol';
-import {spotx} from '../ads/spotx';
-import {springAds} from '../ads/springAds';
-import {ssp} from '../ads/ssp';
-import {strossle} from '../ads/strossle';
-import {sulvo} from '../ads/sulvo';
-import {sunmedia} from '../ads/sunmedia';
-import {svknative} from '../ads/svknative';
-import {swoop} from '../ads/swoop';
-import {taboola} from '../ads/taboola';
-import {tcsemotion} from '../ads/tcsemotion';
-import {teads} from '../ads/teads';
-import {temedya} from '../ads/temedya';
-import {torimochi} from '../ads/torimochi';
-import {tracdelight} from '../ads/tracdelight';
-import {triplelift} from '../ads/triplelift';
-import {trugaze} from '../ads/trugaze';
-import {uas} from '../ads/uas';
-import {ucfunnel} from '../ads/ucfunnel';
-import {unruly} from '../ads/unruly';
-import {uzou} from '../ads/uzou';
-import {valuecommerce} from '../ads/valuecommerce';
-import {vdoai} from '../ads/vdoai';
-import {videointelligence} from '../ads/videointelligence';
-import {videonow} from '../ads/videonow';
-import {viralize} from '../ads/viralize';
-import {vmfive} from '../ads/vmfive';
-import {webediads} from '../ads/webediads';
-import {weboramaDisplay} from '../ads/weborama';
-import {whopainfeed} from '../ads/whopainfeed';
-import {widespace} from '../ads/widespace';
-import {wisteria} from '../ads/wisteria';
-import {wpmedia} from '../ads/wpmedia';
-import {xlift} from '../ads/xlift';
-import {yahoo} from '../ads/yahoo';
-import {yahoofedads} from '../ads/yahoofedads';
-import {yahoojp} from '../ads/yahoojp';
-import {yahoonativeads} from '../ads/yahoonativeads';
-import {yandex} from '../ads/yandex';
-import {yengo} from '../ads/yengo';
-import {yieldbot} from '../ads/yieldbot';
-import {yieldmo} from '../ads/yieldmo';
-import {yieldone} from '../ads/yieldone';
-import {yieldpro} from '../ads/yieldpro';
-import {zedo} from '../ads/zedo';
-import {zen} from '../ads/zen';
-import {zergnet} from '../ads/zergnet';
-import {zucks} from '../ads/zucks';
-
-/**
- * Whether the embed type may be used with amp-embed tag.
- * @const {!Object<string, boolean>}
- */
-const AMP_EMBED_ALLOWED = {
-  _ping_: true,
-  '1wo': true,
-  '24smi': true,
-  adsloom: true,
-  adstyle: true,
-  bringhub: true,
-  dable: true,
-  engageya: true,
-  epeex: true,
-  forkmedia: true,
-  idealmedia: true,
-  insticator: true,
-  jubna: true,
-  kuadio: true,
-  'mantis-recommend': true,
-  mediaad: true,
-  mgid: true,
-  miximedia: true,
-  mywidget: true,
-  nativery: true,
-  lentainform: true,
-  opinary: true,
-  outbrain: true,
-  plista: true,
-  postquare: true,
-  ppstudio: true,
-  pubexchange: true,
-  rbinfox: true,
-  readmo: true,
-  runative: true,
-  smartclip: true,
-  smi2: true,
-  speakol: true,
-  strossle: true,
-  svknative: true,
-  taboola: true,
-  temedya: true,
-  whopainfeed: true,
-  yahoofedads: true,
-  yahoonativeads: true,
-  zen: true,
-  zergnet: true,
-};
+import {_1wo} from '../ads/vendors/1wo';
+import {_24smi} from '../ads/vendors/24smi';
+import {a8} from '../ads/vendors/a8';
+import {a9} from '../ads/vendors/a9';
+import {accesstrade} from '../ads/vendors/accesstrade';
+import {adagio} from '../ads/vendors/adagio';
+import {adblade, industrybrains} from '../ads/vendors/adblade';
+import {adbutler} from '../ads/vendors/adbutler';
+import {adform} from '../ads/vendors/adform';
+import {adfox} from '../ads/vendors/adfox';
+import {adgeneration} from '../ads/vendors/adgeneration';
+import {adglare} from '../ads/vendors/adglare';
+import {adhese} from '../ads/vendors/adhese';
+import {adincube} from '../ads/vendors/adincube';
+import {adition} from '../ads/vendors/adition';
+import {adman} from '../ads/vendors/adman';
+import {admanmedia} from '../ads/vendors/admanmedia';
+import {admixer} from '../ads/vendors/admixer';
+import {adnuntius} from '../ads/vendors/adnuntius';
+import {adocean} from '../ads/vendors/adocean';
+import {adop} from '../ads/vendors/adop';
+import {adpicker} from '../ads/vendors/adpicker';
+import {adplugg} from '../ads/vendors/adplugg';
+import {adpon} from '../ads/vendors/adpon';
+import {adpushup} from '../ads/vendors/adpushup';
+import {adreactor} from '../ads/vendors/adreactor';
+import {adsensor} from '../ads/vendors/adsensor';
+import {adservsolutions} from '../ads/vendors/adservsolutions';
+import {adsloom} from '../ads/vendors/adsloom';
+import {adsnative} from '../ads/vendors/adsnative';
+import {adspeed} from '../ads/vendors/adspeed';
+import {adspirit} from '../ads/vendors/adspirit';
+import {adstir} from '../ads/vendors/adstir';
+import {adstyle} from '../ads/vendors/adstyle';
+import {adtech} from '../ads/vendors/adtech';
+import {adtelligent} from '../ads/vendors/adtelligent';
+import {adthrive} from '../ads/vendors/adthrive';
+import {adunity} from '../ads/vendors/adunity';
+import {aduptech} from '../ads/vendors/aduptech';
+import {adventive} from '../ads/vendors/adventive';
+import {adverline} from '../ads/vendors/adverline';
+import {adverticum} from '../ads/vendors/adverticum';
+import {advertserve} from '../ads/vendors/advertserve';
+import {adyoulike} from '../ads/vendors/adyoulike';
+import {affiliateb} from '../ads/vendors/affiliateb';
+import {aja} from '../ads/vendors/aja';
+import {amoad} from '../ads/vendors/amoad';
+import {aniview} from '../ads/vendors/aniview';
+import {anyclip} from '../ads/vendors/anyclip';
+import {appnexus} from '../ads/vendors/appnexus';
+import {appvador} from '../ads/vendors/appvador';
+import {atomx} from '../ads/vendors/atomx';
+import {baidu} from '../ads/vendors/baidu';
+import {beaverads} from '../ads/vendors/beaverads';
+import {bidtellect} from '../ads/vendors/bidtellect';
+import {blade} from '../ads/vendors/blade';
+import {brainy} from '../ads/vendors/brainy';
+import {bringhub} from '../ads/vendors/bringhub';
+import {broadstreetads} from '../ads/vendors/broadstreetads';
+import {byplay} from '../ads/vendors/byplay';
+import {caajainfeed} from '../ads/vendors/caajainfeed';
+import {capirs} from '../ads/vendors/capirs';
+import {caprofitx} from '../ads/vendors/caprofitx';
+import {cedato} from '../ads/vendors/cedato';
+import {chargeads, nws} from '../ads/vendors/nws';
+import {colombia} from '../ads/vendors/colombia';
+import {conative} from '../ads/vendors/conative';
+import {connatix} from '../ads/vendors/connatix';
+import {contentad} from '../ads/vendors/contentad';
+import {criteo} from '../ads/vendors/criteo';
+import {csa} from '../ads/vendors/csa';
+import {dable} from '../ads/vendors/dable';
+import {digiteka} from '../ads/vendors/digiteka';
+import {directadvert} from '../ads/vendors/directadvert';
+import {distroscale} from '../ads/vendors/distroscale';
+import {dotandads} from '../ads/vendors/dotandads';
+import {dynad} from '../ads/vendors/dynad';
+import {eadv} from '../ads/vendors/eadv';
+import {empower} from '../ads/vendors/empower';
+import {engageya} from '../ads/vendors/engageya';
+import {epeex} from '../ads/vendors/epeex';
+import {eplanning} from '../ads/vendors/eplanning';
+import {ezoic} from '../ads/vendors/ezoic';
+import {f1e} from '../ads/vendors/f1e';
+import {f1h} from '../ads/vendors/f1h';
+import {fakeDelayed} from '../ads/vendors/_fakedelayed_';
+import {feedad} from '../ads/vendors/feedad';
+import {felmat} from '../ads/vendors/felmat';
+import {finative} from '../ads/vendors/finative';
+import {firstimpression} from '../ads/vendors/firstimpression';
+import {flite} from '../ads/vendors/flite';
+import {fluct} from '../ads/vendors/fluct';
+import {forkmedia} from '../ads/vendors/forkmedia';
+import {freewheel} from '../ads/vendors/freewheel';
+import {fusion} from '../ads/vendors/fusion';
+import {genieessp} from '../ads/vendors/genieessp';
+import {giraff} from '../ads/vendors/giraff';
+import {glomex} from '../ads/vendors/glomex';
+import {gmossp} from '../ads/vendors/gmossp';
+import {gumgum} from '../ads/vendors/gumgum';
+import {holder} from '../ads/vendors/holder';
+import {ibillboard} from '../ads/vendors/ibillboard';
+import {idealmedia} from '../ads/vendors/idealmedia';
+import {imaVideo} from '../ads/google/ima/ima-video';
+import {imedia} from '../ads/vendors/imedia';
+import {imobile} from '../ads/vendors/imobile';
+import {imonomy} from '../ads/vendors/imonomy';
+import {improvedigital} from '../ads/vendors/improvedigital';
+import {inmobi} from '../ads/vendors/inmobi';
+import {innity} from '../ads/vendors/innity';
+import {insticator} from '../ads/vendors/insticator';
+import {invibes} from '../ads/vendors/invibes';
+import {iprom} from '../ads/vendors/iprom';
+import {ix} from '../ads/vendors/ix';
+import {jubna} from '../ads/vendors/jubna';
+import {kargo} from '../ads/vendors/kargo';
+import {ketshwa} from '../ads/vendors/ketshwa';
+import {kiosked} from '../ads/vendors/kiosked';
+import {kixer} from '../ads/vendors/kixer';
+import {kuadio} from '../ads/vendors/kuadio';
+import {lentainform} from '../ads/vendors/lentainform';
+import {ligatus} from '../ads/vendors/ligatus';
+import {lockerdome} from '../ads/vendors/lockerdome';
+import {logly} from '../ads/vendors/logly';
+import {loka} from '../ads/vendors/loka';
+import {luckyads} from '../ads/vendors/luckyads';
+import {macaw} from '../ads/vendors/macaw';
+import {mads} from '../ads/vendors/mads';
+import {mantisDisplay, mantisRecommend} from '../ads/vendors/mantis';
+import {marfeel} from '../ads/vendors/marfeel';
+import {mediaad} from '../ads/vendors/mediaad';
+import {medianet} from '../ads/vendors/medianet';
+import {mediavine} from '../ads/vendors/mediavine';
+import {medyanet} from '../ads/vendors/medyanet';
+import {meg} from '../ads/vendors/meg';
+import {mgid} from '../ads/vendors/mgid';
+import {microad} from '../ads/vendors/microad';
+import {miximedia} from '../ads/vendors/miximedia';
+import {mixpo} from '../ads/vendors/mixpo';
+import {monetizer101} from '../ads/vendors/monetizer101';
+import {mox} from '../ads/vendors/mox';
+import {my6sense} from '../ads/vendors/my6sense';
+import {myfinance} from '../ads/vendors/myfinance';
+import {myoffrz} from '../ads/vendors/myoffrz';
+import {mytarget} from '../ads/vendors/mytarget';
+import {mywidget} from '../ads/vendors/mywidget';
+import {nativeroll} from '../ads/vendors/nativeroll';
+import {nativery} from '../ads/vendors/nativery';
+import {nativo} from '../ads/vendors/nativo';
+import {navegg} from '../ads/vendors/navegg';
+import {nend} from '../ads/vendors/nend';
+import {netletix} from '../ads/vendors/netletix';
+import {noddus} from '../ads/vendors/noddus';
+import {nokta} from '../ads/vendors/nokta';
+import {oblivki} from '../ads/vendors/oblivki';
+import {onead} from '../ads/vendors/onead';
+import {onnetwork} from '../ads/vendors/onnetwork';
+import {openadstream} from '../ads/vendors/openadstream';
+import {openx} from '../ads/vendors/openx';
+import {opinary} from '../ads/vendors/opinary';
+import {outbrain} from '../ads/vendors/outbrain';
+import {pixels} from '../ads/vendors/pixels';
+import {playstream} from '../ads/vendors/playstream';
+import {plista} from '../ads/vendors/plista';
+import {polymorphicads} from '../ads/vendors/polymorphicads';
+import {popin} from '../ads/vendors/popin';
+import {postquare} from '../ads/vendors/postquare';
+import {ppstudio} from '../ads/vendors/ppstudio';
+import {pressboard} from '../ads/vendors/pressboard';
+import {promoteiq} from '../ads/vendors/promoteiq';
+import {pubexchange} from '../ads/vendors/pubexchange';
+import {pubguru} from '../ads/vendors/pubguru';
+import {pubmatic} from '../ads/vendors/pubmatic';
+import {pubmine} from '../ads/vendors/pubmine';
+import {puffnetwork} from '../ads/vendors/puffnetwork';
+import {pulse} from '../ads/vendors/pulse';
+import {pulsepoint} from '../ads/vendors/pulsepoint';
+import {purch} from '../ads/vendors/purch';
+import {quoraad} from '../ads/vendors/quoraad';
+import {rakutenunifiedads} from '../ads/vendors/rakutenunifiedads';
+import {rbinfox} from '../ads/vendors/rbinfox';
+import {rcmwidget} from '../ads/vendors/rcmwidget';
+import {readmo} from '../ads/vendors/readmo';
+import {realclick} from '../ads/vendors/realclick';
+import {recomad} from '../ads/vendors/recomad';
+import {recreativ} from '../ads/vendors/recreativ';
+import {relap} from '../ads/vendors/relap';
+import {relappro} from '../ads/vendors/relappro';
+import {remixd} from '../ads/vendors/remixd';
+import {revcontent} from '../ads/vendors/revcontent';
+import {revjet} from '../ads/vendors/revjet';
+import {rfp} from '../ads/vendors/rfp';
+import {rnetplus} from '../ads/vendors/rnetplus';
+import {rubicon} from '../ads/vendors/rubicon';
+import {runative} from '../ads/vendors/runative';
+import {sas} from '../ads/vendors/sas';
+import {seedingalliance} from '../ads/vendors/seedingalliance';
+import {sekindo} from '../ads/vendors/sekindo';
+import {sharethrough} from '../ads/vendors/sharethrough';
+import {shemedia} from '../ads/vendors/shemedia';
+import {sklik} from '../ads/vendors/sklik';
+import {slimcutmedia} from '../ads/vendors/slimcutmedia';
+import {smartadserver} from '../ads/vendors/smartadserver';
+import {smartclip} from '../ads/vendors/smartclip';
+import {smi2} from '../ads/vendors/smi2';
+import {smilewanted} from '../ads/vendors/smilewanted';
+import {sogouad} from '../ads/vendors/sogouad';
+import {sona} from '../ads/vendors/sona';
+import {sortable} from '../ads/vendors/sortable';
+import {sovrn} from '../ads/vendors/sovrn';
+import {speakol} from '../ads/vendors/speakol';
+import {spotx} from '../ads/vendors/spotx';
+import {springAds} from '../ads/vendors/springAds';
+import {ssp} from '../ads/vendors/ssp';
+import {strossle} from '../ads/vendors/strossle';
+import {sulvo} from '../ads/vendors/sulvo';
+import {sunmedia} from '../ads/vendors/sunmedia';
+import {svknative} from '../ads/vendors/svknative';
+import {swoop} from '../ads/vendors/swoop';
+import {taboola} from '../ads/vendors/taboola';
+import {tcsemotion} from '../ads/vendors/tcsemotion';
+import {teads} from '../ads/vendors/teads';
+import {temedya} from '../ads/vendors/temedya';
+import {torimochi} from '../ads/vendors/torimochi';
+import {tracdelight} from '../ads/vendors/tracdelight';
+import {triplelift} from '../ads/vendors/triplelift';
+import {trugaze} from '../ads/vendors/trugaze';
+import {uas} from '../ads/vendors/uas';
+import {ucfunnel} from '../ads/vendors/ucfunnel';
+import {unruly} from '../ads/vendors/unruly';
+import {uzou} from '../ads/vendors/uzou';
+import {valuecommerce} from '../ads/vendors/valuecommerce';
+import {vdoai} from '../ads/vendors/vdoai';
+import {verizonmedia} from '../ads/vendors/verizonmedia';
+import {videointelligence} from '../ads/vendors/videointelligence';
+import {videonow} from '../ads/vendors/videonow';
+import {viralize} from '../ads/vendors/viralize';
+import {vlyby} from '../ads/vendors/vlyby';
+import {vmfive} from '../ads/vendors/vmfive';
+import {webediads} from '../ads/vendors/webediads';
+import {weboramaDisplay} from '../ads/vendors/weborama';
+import {whopainfeed} from '../ads/vendors/whopainfeed';
+import {widespace} from '../ads/vendors/widespace';
+import {wisteria} from '../ads/vendors/wisteria';
+import {wpmedia} from '../ads/vendors/wpmedia';
+import {xlift} from '../ads/vendors/xlift';
+import {yahoo} from '../ads/vendors/yahoo';
+import {yahoofedads} from '../ads/vendors/yahoofedads';
+import {yahoojp} from '../ads/vendors/yahoojp';
+import {yahoonativeads} from '../ads/vendors/yahoonativeads';
+import {yandex} from '../ads/vendors/yandex';
+import {yektanet} from '../ads/vendors/yektanet';
+import {yengo} from '../ads/vendors/yengo';
+import {yieldbot} from '../ads/vendors/yieldbot';
+import {yieldmo} from '../ads/vendors/yieldmo';
+import {yieldone} from '../ads/vendors/yieldone';
+import {yieldpro} from '../ads/vendors/yieldpro';
+import {zedo} from '../ads/vendors/zedo';
+import {zen} from '../ads/vendors/zen';
+import {zergnet} from '../ads/vendors/zergnet';
+import {zucks} from '../ads/vendors/zucks';
 
 init(window);
 
 if (getMode().test || getMode().localDev) {
   register('_ping_', _ping_);
+  register('fake-delayed', fakeDelayed);
 }
 
 // Keep the list in alphabetic order
@@ -374,11 +334,13 @@ register('adition', adition);
 register('adman', adman);
 register('admanmedia', admanmedia);
 register('admixer', admixer);
+register('adnuntius', adnuntius);
 register('adocean', adocean);
 register('adop', adop);
 register('adpicker', adpicker);
 register('adplugg', adplugg);
 register('adpon', adpon);
+register('adpushup', adpushup);
 register('adreactor', adreactor);
 register('adsensor', adsensor);
 register('adservsolutions', adservsolutions);
@@ -389,6 +351,7 @@ register('adspirit', adspirit);
 register('adstir', adstir);
 register('adstyle', adstyle);
 register('adtech', adtech);
+register('adtelligent', adtelligent);
 register('adthrive', adthrive);
 register('adunity', adunity);
 register('aduptech', aduptech);
@@ -427,12 +390,12 @@ register('contentad', contentad);
 register('criteo', criteo);
 register('csa', csa);
 register('dable', dable);
+register('digiteka', digiteka);
 register('directadvert', directadvert);
 register('distroscale', distroscale);
 register('dotandads', dotandads);
 register('dynad', dynad);
 register('eadv', eadv);
-register('eas', eas);
 register('embedly', embedly);
 register('empower', empower);
 register('engageya', engageya);
@@ -442,7 +405,10 @@ register('ezoic', ezoic);
 register('f1e', f1e);
 register('f1h', f1h);
 register('facebook', facebook);
+register('feedad', feedad);
 register('felmat', felmat);
+register('finative', finative);
+register('firstimpression', firstimpression);
 register('flite', flite);
 register('fluct', fluct);
 register('forkmedia', forkmedia);
@@ -451,6 +417,7 @@ register('fusion', fusion);
 register('genieessp', genieessp);
 register('giraff', giraff);
 register('github', github);
+register('glomex', glomex);
 register('gmossp', gmossp);
 register('gumgum', gumgum);
 register('holder', holder);
@@ -470,6 +437,7 @@ register('iprom', iprom);
 register('ix', ix);
 register('jubna', jubna);
 register('kargo', kargo);
+register('ketshwa', ketshwa);
 register('kiosked', kiosked);
 register('kixer', kixer);
 register('kuadio', kuadio);
@@ -478,6 +446,8 @@ register('ligatus', ligatus);
 register('lockerdome', lockerdome);
 register('logly', logly);
 register('loka', loka);
+register('luckyads', luckyads);
+register('macaw', macaw);
 register('mads', mads);
 register('mantis-display', mantisDisplay);
 register('mantis-recommend', mantisRecommend);
@@ -495,6 +465,8 @@ register('mixpo', mixpo);
 register('monetizer101', monetizer101);
 register('mox', mox);
 register('my6sense', my6sense);
+register('myfinance', myfinance);
+register('myoffrz', myoffrz);
 register('mytarget', mytarget);
 register('mywidget', mywidget);
 register('nativeroll', nativeroll);
@@ -506,6 +478,7 @@ register('netletix', netletix);
 register('noddus', noddus);
 register('nokta', nokta);
 register('nws', nws);
+register('oblivki', oblivki);
 register('onead', onead);
 register('onnetwork', onnetwork);
 register('openadstream', openadstream);
@@ -513,6 +486,7 @@ register('openx', openx);
 register('opinary', opinary);
 register('outbrain', outbrain);
 register('pixels', pixels);
+register('playstream', playstream);
 register('plista', plista);
 register('polymorphicads', polymorphicads);
 register('popin', popin);
@@ -525,17 +499,21 @@ register('pubguru', pubguru);
 register('pubmatic', pubmatic);
 register('pubmine', pubmine);
 register('puffnetwork', puffnetwork);
+register('pulse', pulse);
 register('pulsepoint', pulsepoint);
 register('purch', purch);
 register('quoraad', quoraad);
 register('rakutenunifiedads', rakutenunifiedads);
 register('rbinfox', rbinfox);
+register('rcmwidget', rcmwidget);
 register('readmo', readmo);
 register('realclick', realclick);
 register('reddit', reddit);
 register('recomad', recomad);
+register('recreativ', recreativ);
 register('relap', relap);
 register('relappro', relappro);
+register('remixd', remixd);
 register('revcontent', revcontent);
 register('revjet', revjet);
 register('rfp', rfp);
@@ -555,8 +533,10 @@ register('smartclip', smartclip);
 register('smi2', smi2);
 register('smilewanted', smilewanted);
 register('sogouad', sogouad);
+register('sona', sona);
 register('sortable', sortable);
 register('sovrn', sovrn);
+register('speakol', speakol);
 register('spotx', spotx);
 register('springAds', springAds);
 register('strossle', strossle);
@@ -579,10 +559,12 @@ register('unruly', unruly);
 register('uzou', uzou);
 register('valuecommerce', valuecommerce);
 register('vdoai', vdoai);
+register('verizonmedia', verizonmedia);
 register('videointelligence', videointelligence);
 register('videonow', videonow);
 register('viqeoplayer', viqeoplayer);
 register('viralize', viralize);
+register('vlyby', vlyby);
 register('vmfive', vmfive);
 register('webediads', webediads);
 register('weborama-display', weboramaDisplay);
@@ -596,6 +578,7 @@ register('yahoofedads', yahoofedads);
 register('yahoojp', yahoojp);
 register('yahoonativeads', yahoonativeads);
 register('yandex', yandex);
+register('yektanet', yektanet);
 register('yengo', yengo);
 register('yieldbot', yieldbot);
 register('yieldmo', yieldmo);
@@ -606,284 +589,5 @@ register('zedo', zedo);
 register('zen', zen);
 register('zergnet', zergnet);
 register('zucks', zucks);
-register('speakol', speakol);
-
-// For backward compat, we always allow these types without the iframe
-// opting in.
-const defaultAllowedTypesInCustomFrame = [
-  // Entries must be reasonably safe and not allow overriding the injected
-  // JS URL.
-  // Each custom iframe can override this through the second argument to
-  // draw3p. See amp-ad docs.
-  'facebook',
-  'twitter',
-  'doubleclick',
-  'yieldbot',
-  '_ping_',
-];
-
-/**
- * Initialize 3p frame.
- * @param {!Window} win
- */
-function init(win) {
-  initLogConstructor();
-  const config = getAmpConfig();
-
-  // Overriding to short-circuit src/mode#getMode()
-  win.__AMP_MODE = config.mode;
-
-  setReportError(console.error.bind(console));
-
-  setExperimentToggles(config.experimentToggles);
-}
-
-/**
- * Visible for testing.
- * Draws a 3p embed to the window. Expects the data to include the 3p type.
- * @param {!Window} win
- * @param {!Object} data
- * @param {function(!Object, function(!Object))|undefined} configCallback
- *     Optional callback that allows user code to manipulate the incoming
- *     configuration. See
- *     https://github.com/ampproject/amphtml/issues/1210 for some context
- *     on this.
- */
-export function draw3p(win, data, configCallback) {
-  const type = data['type'];
-
-  userAssert(
-    isTagNameAllowed(type, win.context.tagName),
-    'Embed type %s not allowed with tag %s',
-    type,
-    win.context.tagName
-  );
-  if (configCallback) {
-    configCallback(data, (data) => {
-      userAssert(data, 'Expected configuration to be passed as first argument');
-      run(type, win, data);
-    });
-  } else {
-    run(type, win, data);
-  }
-}
-
-/**
- * Draws an embed, optionally synchronously, to the DOM.
- * @param {function(!Object, function(!Object))} opt_configCallback If provided
- *     will be invoked with two arguments:
- *     1. The configuration parameters supplied to this embed.
- *     2. A callback that MUST be called for rendering to proceed. It takes
- *        no arguments. Configuration is expected to be modified in-place.
- * @param {!Array<string>=} opt_allowed3pTypes List of advertising network
- *     types you expect.
- * @param {!Array<string>=} opt_allowedEmbeddingOrigins List of domain suffixes
- *     that are allowed to embed this frame.
- */
-window.draw3p = function (
-  opt_configCallback,
-  opt_allowed3pTypes,
-  opt_allowedEmbeddingOrigins
-) {
-  try {
-    const location = getLocation();
 
-    ensureFramed(window);
-    validateParentOrigin(window, location);
-    validateAllowedTypes(window, getEmbedType(), opt_allowed3pTypes);
-    if (opt_allowedEmbeddingOrigins) {
-      validateAllowedEmbeddingOrigins(window, opt_allowedEmbeddingOrigins);
-    }
-    window.context = new IntegrationAmpContext(window);
-    manageWin(window);
-    installEmbedStateListener();
-
-    // Ugly type annotation is due to Event.prototype.data being denylisted
-    // and the compiler not being able to discern otherwise
-    // TODO(alanorozco): Do this more elegantly once old impl is cleaned up.
-    draw3p(
-      window,
-      /** @type {!IntegrationAmpContext} */ (window.context).data || {},
-      opt_configCallback
-    );
-
-    window.context.bootstrapLoaded();
-  } catch (e) {
-    if (window.context && window.context.report3pError) {
-      // window.context has initiated yet
-      if (e.message && isUserErrorMessage(e.message)) {
-        // report user error to parent window
-        window.context.report3pError(e);
-      }
-    }
-
-    const c = window.context || {mode: {test: false}};
-    if (!c.mode.test) {
-      lightweightErrorReport(e, c.canary);
-      throw e;
-    }
-  }
-};
-
-/**
- * Throws if the current frame's parent origin is not equal to
- * the claimed origin.
- * Only check for browsers that support ancestorOrigins
- * @param {!Window} window
- * @param {!Location} parentLocation
- * @visibleForTesting
- */
-export function validateParentOrigin(window, parentLocation) {
-  const ancestors = window.location.ancestorOrigins;
-  // Currently only webkit and blink based browsers support
-  // ancestorOrigins. In that case we proceed but mark the origin
-  // as non-validated.
-  if (!ancestors || !ancestors.length) {
-    return;
-  }
-  userAssert(
-    ancestors[0] == parentLocation.origin,
-    'Parent origin mismatch: %s, %s',
-    ancestors[0],
-    parentLocation.origin
-  );
-}
-
-/**
- * Check that this iframe intended this particular ad type to run.
- * @param {!Window} window
- * @param {string} type 3p type
- * @param {!Array<string>|undefined} allowedTypes May be undefined.
- * @visibleForTesting
- */
-export function validateAllowedTypes(window, type, allowedTypes) {
-  const thirdPartyHost = parseUrlDeprecated(urls.thirdParty).hostname;
-
-  // Everything allowed in default iframe.
-  if (window.location.hostname == thirdPartyHost) {
-    return;
-  }
-  if (urls.thirdPartyFrameRegex.test(window.location.hostname)) {
-    return;
-  }
-  if (window.location.hostname == 'ads.localhost') {
-    return;
-  }
-  if (defaultAllowedTypesInCustomFrame.indexOf(type) != -1) {
-    return;
-  }
-  userAssert(
-    allowedTypes && allowedTypes.indexOf(type) != -1,
-    '3p type for custom iframe not allowed: %s',
-    type
-  );
-}
-
-/**
- * Check that parent host name was allowed.
- * @param {!Window} window
- * @param {!Array<string>} allowedHostnames Suffixes of allowed host names.
- * @visibleForTesting
- */
-export function validateAllowedEmbeddingOrigins(window, allowedHostnames) {
-  if (!window.document.referrer) {
-    throw new Error('Referrer expected: ' + window.location.href);
-  }
-  const ancestors = window.location.ancestorOrigins;
-  // We prefer the unforgable ancestorOrigins, but referrer is better than
-  // nothing.
-  const ancestor = ancestors ? ancestors[0] : window.document.referrer;
-  let {hostname} = parseUrlDeprecated(ancestor);
-  if (isProxyOrigin(ancestor)) {
-    // If we are on the cache domain, parse the source hostname from
-    // the referrer. The referrer is used because it should be
-    // trustable.
-    hostname = parseUrlDeprecated(getSourceUrl(window.document.referrer))
-      .hostname;
-  }
-  for (let i = 0; i < allowedHostnames.length; i++) {
-    // Either the hostname is allowed
-    if (allowedHostnames[i] == hostname) {
-      return;
-    }
-    // Or it ends in .$hostname (aka is a sub domain of an allowed domain.
-    if (endsWith(hostname, '.' + allowedHostnames[i])) {
-      return;
-    }
-  }
-  throw new Error(
-    'Invalid embedding hostname: ' + hostname + ' not in ' + allowedHostnames
-  );
-}
-
-/**
- * Throws if this window is a top level window.
- * @param {!Window} window
- * @visibleForTesting
- */
-export function ensureFramed(window) {
-  if (window == window.parent) {
-    throw new Error('Must be framed: ' + window.location.href);
-  }
-}
-
-/**
- * Expects the fragment to contain JSON.
- * @param {string} fragment Value of location.fragment
- * @return {?JsonObject}
- * @visibleForTesting
- */
-export function parseFragment(fragment) {
-  try {
-    let json = fragment.substr(1);
-    // Some browser, notably Firefox produce an encoded version of the fragment
-    // while most don't. Since we know how the string should start, this is easy
-    // to detect.
-    if (startsWith(json, '{%22')) {
-      json = decodeURIComponent(json);
-    }
-    return /** @type {!JsonObject} */ (json ? parseJson(json) : dict());
-  } catch (err) {
-    return null;
-  }
-}
-
-/**
- * Not all types of embeds are allowed to be used with all tag names on the
- * AMP side. This function checks whether the current usage is permissible.
- * @param {string} type
- * @param {string|undefined} tagName The tagName that was used to embed this
- *     3p-frame.
- * @return {boolean}
- */
-export function isTagNameAllowed(type, tagName) {
-  if (tagName == 'AMP-EMBED') {
-    return !!AMP_EMBED_ALLOWED[type];
-  }
-  return true;
-}
-
-/**
- * Reports an error to the server. Must only be called once per page.
- * Not for use in event handlers.
- *
- * We don't use the default error in error.js handler because it has
- * too many deps for this small JS binary.
- *
- * @param {!Error} e
- * @param {boolean} isCanary
- */
-function lightweightErrorReport(e, isCanary) {
-  new Image().src =
-    urls.errorReporting +
-    '?3p=1&v=' +
-    encodeURIComponent(internalRuntimeVersion()) +
-    '&m=' +
-    encodeURIComponent(e.message) +
-    '&ca=' +
-    (isCanary ? 1 : 0) +
-    '&r=' +
-    encodeURIComponent(document.referrer) +
-    '&s=' +
-    encodeURIComponent(e.stack || '');
-}
+window.draw3p = draw3p;
diff --git a/3p/mathml.js b/3p/mathml.js
index 25e1c590cec75..8231a28e2a368 100644
--- a/3p/mathml.js
+++ b/3p/mathml.js
@@ -59,6 +59,12 @@ export function mathml(global, data) {
       global.document.body.appendChild(div);
       mathjax.Hub.Config({
         showMathMenu: false,
+        // (#26082): From a11y perspective, user should not be able to tab to
+        // the math formula which has no functionality to interact with.  This
+        // configuration removes the formula from the tab-index.
+        menuSettings: {
+          inTabOrder: false,
+        },
       });
       mathjax.Hub.Queue(function () {
         const rendered = document.getElementById('MathJax-Element-1-Frame');
diff --git a/3p/messaging.js b/3p/messaging.js
index bf732de87b6ba..7f7f08a9334a6 100644
--- a/3p/messaging.js
+++ b/3p/messaging.js
@@ -15,7 +15,7 @@
  */
 
 import {getData} from '../src/event-helper';
-import {parseJson} from '../src/json';
+import {parseJson} from '../src/core/types/object/json';
 
 /**
  * Send messages to parent frame. These should not contain user data.
@@ -84,9 +84,9 @@ function startListening(win) {
       return;
     }
     // Parse JSON only once per message.
-    const data = /** @type {!JsonObject} */ (parseJson(
-      /**@type {string} */ (getData(event)).substr(4)
-    ));
+    const data = /** @type {!JsonObject} */ (
+      parseJson(/**@type {string} */ (getData(event)).substr(4))
+    );
     if (win.context.sentinel && data['sentinel'] != win.context.sentinel) {
       return;
     }
diff --git a/3p/polyfills.js b/3p/polyfills.js
index 9d2545379b7af..7c24b359df219 100644
--- a/3p/polyfills.js
+++ b/3p/polyfills.js
@@ -22,7 +22,13 @@
 import {install as installMathSign} from '../src/polyfills/math-sign';
 import {install as installObjectAssign} from '../src/polyfills/object-assign';
 import {install as installObjectValues} from '../src/polyfills/object-values';
+import {install as installPromise} from '../src/polyfills/promise';
+import {install as installStringStartsWith} from '../src/polyfills/string-starts-with';
 
-installMathSign(self);
-installObjectAssign(self);
-installObjectValues(self);
+if (!IS_ESM) {
+  installMathSign(self);
+  installObjectAssign(self);
+  installObjectValues(self);
+  installPromise(self);
+  installStringStartsWith(self);
+}
diff --git a/3p/recaptcha.js b/3p/recaptcha.js
index f172280336fee..41b77048db28b 100644
--- a/3p/recaptcha.js
+++ b/3p/recaptcha.js
@@ -15,7 +15,7 @@
  */
 
 // src/polyfills.js must be the first import.
-import './polyfills'; // eslint-disable-line sort-imports-es6-autofix/sort-imports-es6
+import './polyfills';
 
 import ampToolboxCacheUrl from '../third_party/amp-toolbox-cache-url/dist/amp-toolbox-cache-url.esm';
 
@@ -27,10 +27,10 @@ import {
   setReportError,
   user,
 } from '../src/log';
-import {dict, hasOwn} from '../src/utils/object';
+import {dict, hasOwn} from '../src/core/types/object';
 import {isProxyOrigin, parseUrlDeprecated} from '../src/url';
 import {loadScript} from './3p';
-import {parseJson} from '../src/json';
+import {parseJson} from '../src/core/types/object/json';
 
 /**
  * @fileoverview
diff --git a/3p/twitter.js b/3p/twitter.js
index 7bc39f784e602..55eff6e4a2555 100644
--- a/3p/twitter.js
+++ b/3p/twitter.js
@@ -18,7 +18,6 @@
 
 import {loadScript} from './3p';
 import {setStyles} from '../src/style';
-import {startsWith} from '../src/string';
 
 /**
  * Produces the Twitter API object for the passed in callback. If the current
@@ -75,7 +74,7 @@ export function twitter(global, data) {
     } else if (data.timelineSourceType) {
       // Extract properties starting with 'timeline'.
       const timelineData = Object.keys(data)
-        .filter((prop) => startsWith(prop, 'timeline'))
+        .filter((prop) => prop.startsWith('timeline'))
         .reduce((newData, prop) => {
           newData[stripPrefixCamelCase(prop, 'timeline')] = data[prop];
           return newData;
diff --git a/3p/vendors/1wo.js b/3p/vendors/1wo.js
new file mode 100644
index 0000000000000..927c9fd02cdb8
--- /dev/null
+++ b/3p/vendors/1wo.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {_1wo} from '../../ads/vendors/1wo';
+
+init(window);
+register('1wo', _1wo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/24smi.js b/3p/vendors/24smi.js
new file mode 100644
index 0000000000000..714a83ee5ca3b
--- /dev/null
+++ b/3p/vendors/24smi.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {_24smi} from '../../ads/vendors/24smi';
+
+init(window);
+register('24smi', _24smi);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/3d-gltf.js b/3p/vendors/3d-gltf.js
new file mode 100644
index 0000000000000..248bf1fdd2998
--- /dev/null
+++ b/3p/vendors/3d-gltf.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {gltfViewer} from '../3d-gltf/index';
+
+init(window);
+register('3d-gltf', gltfViewer);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/_ping_.js b/3p/vendors/_ping_.js
new file mode 100644
index 0000000000000..84c4af7c58a4a
--- /dev/null
+++ b/3p/vendors/_ping_.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {_ping_} from '../../ads/vendors/_ping_';
+
+init(window);
+register('_ping_', _ping_);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/a8.js b/3p/vendors/a8.js
new file mode 100644
index 0000000000000..725407dde89fe
--- /dev/null
+++ b/3p/vendors/a8.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {a8} from '../../ads/vendors/a8';
+
+init(window);
+register('a8', a8);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/a9.js b/3p/vendors/a9.js
new file mode 100644
index 0000000000000..f298ec03bb886
--- /dev/null
+++ b/3p/vendors/a9.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {a9} from '../../ads/vendors/a9';
+
+init(window);
+register('a9', a9);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/accesstrade.js b/3p/vendors/accesstrade.js
new file mode 100644
index 0000000000000..38e7ea7305970
--- /dev/null
+++ b/3p/vendors/accesstrade.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {accesstrade} from '../../ads/vendors/accesstrade';
+
+init(window);
+register('accesstrade', accesstrade);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adagio.js b/3p/vendors/adagio.js
new file mode 100644
index 0000000000000..fcf020e40c4af
--- /dev/null
+++ b/3p/vendors/adagio.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adagio} from '../../ads/vendors/adagio';
+
+init(window);
+register('adagio', adagio);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adblade.js b/3p/vendors/adblade.js
new file mode 100644
index 0000000000000..1e492b34abe82
--- /dev/null
+++ b/3p/vendors/adblade.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adblade} from '../../ads/vendors/adblade';
+
+init(window);
+register('adblade', adblade);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adbutler.js b/3p/vendors/adbutler.js
new file mode 100644
index 0000000000000..bcb46a88f845d
--- /dev/null
+++ b/3p/vendors/adbutler.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adbutler} from '../../ads/vendors/adbutler';
+
+init(window);
+register('adbutler', adbutler);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adform.js b/3p/vendors/adform.js
new file mode 100644
index 0000000000000..f220df8819efa
--- /dev/null
+++ b/3p/vendors/adform.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adform} from '../../ads/vendors/adform';
+
+init(window);
+register('adform', adform);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adfox.js b/3p/vendors/adfox.js
new file mode 100644
index 0000000000000..a0c918d9d899e
--- /dev/null
+++ b/3p/vendors/adfox.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adfox} from '../../ads/vendors/adfox';
+
+init(window);
+register('adfox', adfox);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adgeneration.js b/3p/vendors/adgeneration.js
new file mode 100644
index 0000000000000..dfec4cfc1bc1e
--- /dev/null
+++ b/3p/vendors/adgeneration.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adgeneration} from '../../ads/vendors/adgeneration';
+
+init(window);
+register('adgeneration', adgeneration);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adglare.js b/3p/vendors/adglare.js
new file mode 100644
index 0000000000000..1ffe44e528450
--- /dev/null
+++ b/3p/vendors/adglare.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adglare} from '../../ads/vendors/adglare';
+
+init(window);
+register('adglare', adglare);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adhese.js b/3p/vendors/adhese.js
new file mode 100644
index 0000000000000..261441a94f2ab
--- /dev/null
+++ b/3p/vendors/adhese.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adhese} from '../../ads/vendors/adhese';
+
+init(window);
+register('adhese', adhese);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adincube.js b/3p/vendors/adincube.js
new file mode 100644
index 0000000000000..d40b15836fd3f
--- /dev/null
+++ b/3p/vendors/adincube.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adincube} from '../../ads/vendors/adincube';
+
+init(window);
+register('adincube', adincube);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adition.js b/3p/vendors/adition.js
new file mode 100644
index 0000000000000..a7ad44eaeb10f
--- /dev/null
+++ b/3p/vendors/adition.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adition} from '../../ads/vendors/adition';
+
+init(window);
+register('adition', adition);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adman.js b/3p/vendors/adman.js
new file mode 100644
index 0000000000000..43aa1567c0b0d
--- /dev/null
+++ b/3p/vendors/adman.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adman} from '../../ads/vendors/adman';
+
+init(window);
+register('adman', adman);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/admanmedia.js b/3p/vendors/admanmedia.js
new file mode 100644
index 0000000000000..dd02b1c1b4b1f
--- /dev/null
+++ b/3p/vendors/admanmedia.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {admanmedia} from '../../ads/vendors/admanmedia';
+
+init(window);
+register('admanmedia', admanmedia);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/admixer.js b/3p/vendors/admixer.js
new file mode 100644
index 0000000000000..dc2ddf8ca827e
--- /dev/null
+++ b/3p/vendors/admixer.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {admixer} from '../../ads/vendors/admixer';
+
+init(window);
+register('admixer', admixer);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adnuntius.js b/3p/vendors/adnuntius.js
new file mode 100644
index 0000000000000..f030d96fe8a86
--- /dev/null
+++ b/3p/vendors/adnuntius.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adnuntius} from '../../ads/vendors/adnuntius';
+
+init(window);
+register('adnuntius', adnuntius);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adocean.js b/3p/vendors/adocean.js
new file mode 100644
index 0000000000000..5109db2e3973f
--- /dev/null
+++ b/3p/vendors/adocean.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adocean} from '../../ads/vendors/adocean';
+
+init(window);
+register('adocean', adocean);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adop.js b/3p/vendors/adop.js
new file mode 100644
index 0000000000000..203ff0cb70799
--- /dev/null
+++ b/3p/vendors/adop.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adop} from '../../ads/vendors/adop';
+
+init(window);
+register('adop', adop);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adpicker.js b/3p/vendors/adpicker.js
new file mode 100644
index 0000000000000..1acba0b228cc5
--- /dev/null
+++ b/3p/vendors/adpicker.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adpicker} from '../../ads/vendors/adpicker';
+
+init(window);
+register('adpicker', adpicker);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adplugg.js b/3p/vendors/adplugg.js
new file mode 100644
index 0000000000000..6255fc468dedf
--- /dev/null
+++ b/3p/vendors/adplugg.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adplugg} from '../../ads/vendors/adplugg';
+
+init(window);
+register('adplugg', adplugg);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adpon.js b/3p/vendors/adpon.js
new file mode 100644
index 0000000000000..f85596c99f4eb
--- /dev/null
+++ b/3p/vendors/adpon.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adpon} from '../../ads/vendors/adpon';
+
+init(window);
+register('adpon', adpon);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adpushup.js b/3p/vendors/adpushup.js
new file mode 100644
index 0000000000000..99bb2945011d6
--- /dev/null
+++ b/3p/vendors/adpushup.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adpushup} from '../../ads/vendors/adpushup';
+
+init(window);
+register('adpushup', adpushup);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adreactor.js b/3p/vendors/adreactor.js
new file mode 100644
index 0000000000000..5fb9a982eacab
--- /dev/null
+++ b/3p/vendors/adreactor.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adreactor} from '../../ads/vendors/adreactor';
+
+init(window);
+register('adreactor', adreactor);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adsensor.js b/3p/vendors/adsensor.js
new file mode 100644
index 0000000000000..d717f3e2d35ff
--- /dev/null
+++ b/3p/vendors/adsensor.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adsensor} from '../../ads/vendors/adsensor';
+
+init(window);
+register('adsensor', adsensor);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adservsolutions.js b/3p/vendors/adservsolutions.js
new file mode 100644
index 0000000000000..8563b1e0911f4
--- /dev/null
+++ b/3p/vendors/adservsolutions.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adservsolutions} from '../../ads/vendors/adservsolutions';
+
+init(window);
+register('adservsolutions', adservsolutions);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adsloom.js b/3p/vendors/adsloom.js
new file mode 100644
index 0000000000000..5ee7320636266
--- /dev/null
+++ b/3p/vendors/adsloom.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adsloom} from '../../ads/vendors/adsloom';
+
+init(window);
+register('adsloom', adsloom);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adsnative.js b/3p/vendors/adsnative.js
new file mode 100644
index 0000000000000..19e6b2724baf0
--- /dev/null
+++ b/3p/vendors/adsnative.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adsnative} from '../../ads/vendors/adsnative';
+
+init(window);
+register('adsnative', adsnative);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adspeed.js b/3p/vendors/adspeed.js
new file mode 100644
index 0000000000000..e289f9ff076c5
--- /dev/null
+++ b/3p/vendors/adspeed.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adspeed} from '../../ads/vendors/adspeed';
+
+init(window);
+register('adspeed', adspeed);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adspirit.js b/3p/vendors/adspirit.js
new file mode 100644
index 0000000000000..53037132ddb54
--- /dev/null
+++ b/3p/vendors/adspirit.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adspirit} from '../../ads/vendors/adspirit';
+
+init(window);
+register('adspirit', adspirit);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adstir.js b/3p/vendors/adstir.js
new file mode 100644
index 0000000000000..ec6cc67fb8365
--- /dev/null
+++ b/3p/vendors/adstir.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adstir} from '../../ads/vendors/adstir';
+
+init(window);
+register('adstir', adstir);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adstyle.js b/3p/vendors/adstyle.js
new file mode 100644
index 0000000000000..bb1e9c455eaa6
--- /dev/null
+++ b/3p/vendors/adstyle.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adstyle} from '../../ads/vendors/adstyle';
+
+init(window);
+register('adstyle', adstyle);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adtech.js b/3p/vendors/adtech.js
new file mode 100644
index 0000000000000..6cd78f318d6c7
--- /dev/null
+++ b/3p/vendors/adtech.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adtech} from '../../ads/vendors/adtech';
+
+init(window);
+register('adtech', adtech);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adtelligent.js b/3p/vendors/adtelligent.js
new file mode 100644
index 0000000000000..dd3b3eeb29cce
--- /dev/null
+++ b/3p/vendors/adtelligent.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adtelligent} from '../../ads/vendors/adtelligent';
+
+init(window);
+register('adtelligent', adtelligent);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adthrive.js b/3p/vendors/adthrive.js
new file mode 100644
index 0000000000000..b6244d97f4595
--- /dev/null
+++ b/3p/vendors/adthrive.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adthrive} from '../../ads/vendors/adthrive';
+
+init(window);
+register('adthrive', adthrive);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adunity.js b/3p/vendors/adunity.js
new file mode 100644
index 0000000000000..a93c420abc77c
--- /dev/null
+++ b/3p/vendors/adunity.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adunity} from '../../ads/vendors/adunity';
+
+init(window);
+register('adunity', adunity);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/aduptech.js b/3p/vendors/aduptech.js
new file mode 100644
index 0000000000000..ed0919338a053
--- /dev/null
+++ b/3p/vendors/aduptech.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {aduptech} from '../../ads/vendors/aduptech';
+
+init(window);
+register('aduptech', aduptech);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adventive.js b/3p/vendors/adventive.js
new file mode 100644
index 0000000000000..96dec8dc3f7fe
--- /dev/null
+++ b/3p/vendors/adventive.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adventive} from '../../ads/vendors/adventive';
+
+init(window);
+register('adventive', adventive);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adverline.js b/3p/vendors/adverline.js
new file mode 100644
index 0000000000000..427983bc3b9f7
--- /dev/null
+++ b/3p/vendors/adverline.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adverline} from '../../ads/vendors/adverline';
+
+init(window);
+register('adverline', adverline);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adverticum.js b/3p/vendors/adverticum.js
new file mode 100644
index 0000000000000..b47f8e1ce26e7
--- /dev/null
+++ b/3p/vendors/adverticum.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adverticum} from '../../ads/vendors/adverticum';
+
+init(window);
+register('adverticum', adverticum);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/advertserve.js b/3p/vendors/advertserve.js
new file mode 100644
index 0000000000000..29094382d7999
--- /dev/null
+++ b/3p/vendors/advertserve.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {advertserve} from '../../ads/vendors/advertserve';
+
+init(window);
+register('advertserve', advertserve);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/adyoulike.js b/3p/vendors/adyoulike.js
new file mode 100644
index 0000000000000..120951cb9948c
--- /dev/null
+++ b/3p/vendors/adyoulike.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {adyoulike} from '../../ads/vendors/adyoulike';
+
+init(window);
+register('adyoulike', adyoulike);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/affiliateb.js b/3p/vendors/affiliateb.js
new file mode 100644
index 0000000000000..80272857c4040
--- /dev/null
+++ b/3p/vendors/affiliateb.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {affiliateb} from '../../ads/vendors/affiliateb';
+
+init(window);
+register('affiliateb', affiliateb);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/aja.js b/3p/vendors/aja.js
new file mode 100644
index 0000000000000..3c37e52fc8b09
--- /dev/null
+++ b/3p/vendors/aja.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {aja} from '../../ads/vendors/aja';
+
+init(window);
+register('aja', aja);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/amoad.js b/3p/vendors/amoad.js
new file mode 100644
index 0000000000000..a1c58d4b823bc
--- /dev/null
+++ b/3p/vendors/amoad.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {amoad} from '../../ads/vendors/amoad';
+
+init(window);
+register('amoad', amoad);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/aniview.js b/3p/vendors/aniview.js
new file mode 100644
index 0000000000000..5bbe2810a1e9e
--- /dev/null
+++ b/3p/vendors/aniview.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {aniview} from '../../ads/vendors/aniview';
+
+init(window);
+register('aniview', aniview);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/anyclip.js b/3p/vendors/anyclip.js
new file mode 100644
index 0000000000000..729d3b3c328bb
--- /dev/null
+++ b/3p/vendors/anyclip.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {anyclip} from '../../ads/vendors/anyclip';
+
+init(window);
+register('anyclip', anyclip);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/appnexus.js b/3p/vendors/appnexus.js
new file mode 100644
index 0000000000000..15f8f288c4b7a
--- /dev/null
+++ b/3p/vendors/appnexus.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {appnexus} from '../../ads/vendors/appnexus';
+
+init(window);
+register('appnexus', appnexus);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/appvador.js b/3p/vendors/appvador.js
new file mode 100644
index 0000000000000..65ef84e0606d2
--- /dev/null
+++ b/3p/vendors/appvador.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {appvador} from '../../ads/vendors/appvador';
+
+init(window);
+register('appvador', appvador);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/atomx.js b/3p/vendors/atomx.js
new file mode 100644
index 0000000000000..5444e0a7dd47a
--- /dev/null
+++ b/3p/vendors/atomx.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {atomx} from '../../ads/vendors/atomx';
+
+init(window);
+register('atomx', atomx);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/baidu.js b/3p/vendors/baidu.js
new file mode 100644
index 0000000000000..11b13d3788bf4
--- /dev/null
+++ b/3p/vendors/baidu.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {baidu} from '../../ads/vendors/baidu';
+
+init(window);
+register('baidu', baidu);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/beaverads.js b/3p/vendors/beaverads.js
new file mode 100644
index 0000000000000..8fc1adaec6ebf
--- /dev/null
+++ b/3p/vendors/beaverads.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {beaverads} from '../../ads/vendors/beaverads';
+
+init(window);
+register('beaverads', beaverads);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/beopinion.js b/3p/vendors/beopinion.js
new file mode 100644
index 0000000000000..93a53519d1709
--- /dev/null
+++ b/3p/vendors/beopinion.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {beopinion} from '../beopinion';
+
+init(window);
+register('beopinion', beopinion);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/bidtellect.js b/3p/vendors/bidtellect.js
new file mode 100644
index 0000000000000..9f6a111e29a9a
--- /dev/null
+++ b/3p/vendors/bidtellect.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {bidtellect} from '../../ads/vendors/bidtellect';
+
+init(window);
+register('bidtellect', bidtellect);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/blade.js b/3p/vendors/blade.js
new file mode 100644
index 0000000000000..6cf64ebd4c67b
--- /dev/null
+++ b/3p/vendors/blade.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {blade} from '../../ads/vendors/blade';
+
+init(window);
+register('blade', blade);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/bodymovinanimation.js b/3p/vendors/bodymovinanimation.js
new file mode 100644
index 0000000000000..cf29c82e8a229
--- /dev/null
+++ b/3p/vendors/bodymovinanimation.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {bodymovinanimation} from '../bodymovinanimation';
+
+init(window);
+register('bodymovinanimation', bodymovinanimation);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/brainy.js b/3p/vendors/brainy.js
new file mode 100644
index 0000000000000..e538d511e8921
--- /dev/null
+++ b/3p/vendors/brainy.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {brainy} from '../../ads/vendors/brainy';
+
+init(window);
+register('brainy', brainy);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/bringhub.js b/3p/vendors/bringhub.js
new file mode 100644
index 0000000000000..adc0b6c2f9378
--- /dev/null
+++ b/3p/vendors/bringhub.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {bringhub} from '../../ads/vendors/bringhub';
+
+init(window);
+register('bringhub', bringhub);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/broadstreetads.js b/3p/vendors/broadstreetads.js
new file mode 100644
index 0000000000000..baaff4958b816
--- /dev/null
+++ b/3p/vendors/broadstreetads.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {broadstreetads} from '../../ads/vendors/broadstreetads';
+
+init(window);
+register('broadstreetads', broadstreetads);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/byplay.js b/3p/vendors/byplay.js
new file mode 100644
index 0000000000000..fb1d40d94d7d0
--- /dev/null
+++ b/3p/vendors/byplay.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {byplay} from '../../ads/vendors/byplay';
+
+init(window);
+register('byplay', byplay);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/caajainfeed.js b/3p/vendors/caajainfeed.js
new file mode 100644
index 0000000000000..2cf5c0ead9079
--- /dev/null
+++ b/3p/vendors/caajainfeed.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {caajainfeed} from '../../ads/vendors/caajainfeed';
+
+init(window);
+register('caajainfeed', caajainfeed);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/capirs.js b/3p/vendors/capirs.js
new file mode 100644
index 0000000000000..391e5706e6fb9
--- /dev/null
+++ b/3p/vendors/capirs.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {capirs} from '../../ads/vendors/capirs';
+
+init(window);
+register('capirs', capirs);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/caprofitx.js b/3p/vendors/caprofitx.js
new file mode 100644
index 0000000000000..0063aff1db6d9
--- /dev/null
+++ b/3p/vendors/caprofitx.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {caprofitx} from '../../ads/vendors/caprofitx';
+
+init(window);
+register('caprofitx', caprofitx);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/cedato.js b/3p/vendors/cedato.js
new file mode 100644
index 0000000000000..b0f3d7e43ef0e
--- /dev/null
+++ b/3p/vendors/cedato.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {cedato} from '../../ads/vendors/cedato';
+
+init(window);
+register('cedato', cedato);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/chargeads.js b/3p/vendors/chargeads.js
new file mode 100644
index 0000000000000..e7339dd7b5b62
--- /dev/null
+++ b/3p/vendors/chargeads.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {chargeads} from '../../ads/vendors/nws';
+
+init(window);
+register('chargeads', chargeads);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/colombia.js b/3p/vendors/colombia.js
new file mode 100644
index 0000000000000..d666480a70b8a
--- /dev/null
+++ b/3p/vendors/colombia.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {colombia} from '../../ads/vendors/colombia';
+
+init(window);
+register('colombia', colombia);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/conative.js b/3p/vendors/conative.js
new file mode 100644
index 0000000000000..07f8b5625c834
--- /dev/null
+++ b/3p/vendors/conative.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {conative} from '../../ads/vendors/conative';
+
+init(window);
+register('conative', conative);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/connatix.js b/3p/vendors/connatix.js
new file mode 100644
index 0000000000000..09330ea98dd61
--- /dev/null
+++ b/3p/vendors/connatix.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {connatix} from '../../ads/vendors/connatix';
+
+init(window);
+register('connatix', connatix);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/contentad.js b/3p/vendors/contentad.js
new file mode 100644
index 0000000000000..1af7ca3f5e1dd
--- /dev/null
+++ b/3p/vendors/contentad.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {contentad} from '../../ads/vendors/contentad';
+
+init(window);
+register('contentad', contentad);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/criteo.js b/3p/vendors/criteo.js
new file mode 100644
index 0000000000000..b1257b7b27f67
--- /dev/null
+++ b/3p/vendors/criteo.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {criteo} from '../../ads/vendors/criteo';
+
+init(window);
+register('criteo', criteo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/csa.js b/3p/vendors/csa.js
new file mode 100644
index 0000000000000..c031755eff805
--- /dev/null
+++ b/3p/vendors/csa.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {csa} from '../../ads/vendors/csa';
+
+init(window);
+register('csa', csa);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/dable.js b/3p/vendors/dable.js
new file mode 100644
index 0000000000000..fb68892181cc6
--- /dev/null
+++ b/3p/vendors/dable.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {dable} from '../../ads/vendors/dable';
+
+init(window);
+register('dable', dable);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/digiteka.js b/3p/vendors/digiteka.js
new file mode 100644
index 0000000000000..6909c62fc9762
--- /dev/null
+++ b/3p/vendors/digiteka.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {digiteka} from '../../ads/vendors/digiteka';
+
+init(window);
+register('digiteka', digiteka);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/directadvert.js b/3p/vendors/directadvert.js
new file mode 100644
index 0000000000000..d494b52f103c6
--- /dev/null
+++ b/3p/vendors/directadvert.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {directadvert} from '../../ads/vendors/directadvert';
+
+init(window);
+register('directadvert', directadvert);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/distroscale.js b/3p/vendors/distroscale.js
new file mode 100644
index 0000000000000..1cb3b4e5222e5
--- /dev/null
+++ b/3p/vendors/distroscale.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {distroscale} from '../../ads/vendors/distroscale';
+
+init(window);
+register('distroscale', distroscale);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/dotandads.js b/3p/vendors/dotandads.js
new file mode 100644
index 0000000000000..64a8dcb7c333e
--- /dev/null
+++ b/3p/vendors/dotandads.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {dotandads} from '../../ads/vendors/dotandads';
+
+init(window);
+register('dotandads', dotandads);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/dynad.js b/3p/vendors/dynad.js
new file mode 100644
index 0000000000000..dfd040c48fa84
--- /dev/null
+++ b/3p/vendors/dynad.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {dynad} from '../../ads/vendors/dynad';
+
+init(window);
+register('dynad', dynad);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/eadv.js b/3p/vendors/eadv.js
new file mode 100644
index 0000000000000..b131023a80f9b
--- /dev/null
+++ b/3p/vendors/eadv.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {eadv} from '../../ads/vendors/eadv';
+
+init(window);
+register('eadv', eadv);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/embedly.js b/3p/vendors/embedly.js
new file mode 100644
index 0000000000000..95b1666d00c79
--- /dev/null
+++ b/3p/vendors/embedly.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {embedly} from '../embedly';
+
+init(window);
+register('embedly', embedly);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/empower.js b/3p/vendors/empower.js
new file mode 100644
index 0000000000000..8110e2ba76893
--- /dev/null
+++ b/3p/vendors/empower.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {empower} from '../../ads/vendors/empower';
+
+init(window);
+register('empower', empower);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/engageya.js b/3p/vendors/engageya.js
new file mode 100644
index 0000000000000..45f80094b834b
--- /dev/null
+++ b/3p/vendors/engageya.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {engageya} from '../../ads/vendors/engageya';
+
+init(window);
+register('engageya', engageya);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/epeex.js b/3p/vendors/epeex.js
new file mode 100644
index 0000000000000..3a1716cf270da
--- /dev/null
+++ b/3p/vendors/epeex.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {epeex} from '../../ads/vendors/epeex';
+
+init(window);
+register('epeex', epeex);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/eplanning.js b/3p/vendors/eplanning.js
new file mode 100644
index 0000000000000..bd3a03ee63704
--- /dev/null
+++ b/3p/vendors/eplanning.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {eplanning} from '../../ads/vendors/eplanning';
+
+init(window);
+register('eplanning', eplanning);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/ezoic.js b/3p/vendors/ezoic.js
new file mode 100644
index 0000000000000..7efb4f4d1e101
--- /dev/null
+++ b/3p/vendors/ezoic.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {ezoic} from '../../ads/vendors/ezoic';
+
+init(window);
+register('ezoic', ezoic);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/f1e.js b/3p/vendors/f1e.js
new file mode 100644
index 0000000000000..54ec88c80517d
--- /dev/null
+++ b/3p/vendors/f1e.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {f1e} from '../../ads/vendors/f1e';
+
+init(window);
+register('f1e', f1e);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/f1h.js b/3p/vendors/f1h.js
new file mode 100644
index 0000000000000..498abf2c4373c
--- /dev/null
+++ b/3p/vendors/f1h.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {f1h} from '../../ads/vendors/f1h';
+
+init(window);
+register('f1h', f1h);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/facebook.js b/3p/vendors/facebook.js
new file mode 100644
index 0000000000000..0ba50372d2a48
--- /dev/null
+++ b/3p/vendors/facebook.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {facebook} from '../facebook';
+
+init(window);
+register('facebook', facebook);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/fake-delayed.js b/3p/vendors/fake-delayed.js
new file mode 100644
index 0000000000000..e217bcb26ca3e
--- /dev/null
+++ b/3p/vendors/fake-delayed.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {fakeDelayed} from '../../ads/vendors/_fakedelayed_';
+
+init(window);
+register('fake-delayed', fakeDelayed);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/feedad.js b/3p/vendors/feedad.js
new file mode 100644
index 0000000000000..9c7b353c870f4
--- /dev/null
+++ b/3p/vendors/feedad.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {feedad} from '../../ads/vendors/feedad';
+
+init(window);
+register('feedad', feedad);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/felmat.js b/3p/vendors/felmat.js
new file mode 100644
index 0000000000000..522c90a6db249
--- /dev/null
+++ b/3p/vendors/felmat.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {felmat} from '../../ads/vendors/felmat';
+
+init(window);
+register('felmat', felmat);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/finative.js b/3p/vendors/finative.js
new file mode 100644
index 0000000000000..3f71967a419bd
--- /dev/null
+++ b/3p/vendors/finative.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {finative} from '../../ads/vendors/finative';
+
+init(window);
+register('finative', finative);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/firstimpression.js b/3p/vendors/firstimpression.js
new file mode 100644
index 0000000000000..c4c93bc67eedb
--- /dev/null
+++ b/3p/vendors/firstimpression.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {firstimpression} from '../../ads/vendors/firstimpression';
+
+init(window);
+register('firstimpression', firstimpression);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/flite.js b/3p/vendors/flite.js
new file mode 100644
index 0000000000000..ba3949914a18a
--- /dev/null
+++ b/3p/vendors/flite.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {flite} from '../../ads/vendors/flite';
+
+init(window);
+register('flite', flite);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/fluct.js b/3p/vendors/fluct.js
new file mode 100644
index 0000000000000..9bca87e5162b3
--- /dev/null
+++ b/3p/vendors/fluct.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {fluct} from '../../ads/vendors/fluct';
+
+init(window);
+register('fluct', fluct);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/forkmedia.js b/3p/vendors/forkmedia.js
new file mode 100644
index 0000000000000..63f29c91bd66b
--- /dev/null
+++ b/3p/vendors/forkmedia.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {forkmedia} from '../../ads/vendors/forkmedia';
+
+init(window);
+register('forkmedia', forkmedia);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/freewheel.js b/3p/vendors/freewheel.js
new file mode 100644
index 0000000000000..13ca03c5863ae
--- /dev/null
+++ b/3p/vendors/freewheel.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {freewheel} from '../../ads/vendors/freewheel';
+
+init(window);
+register('freewheel', freewheel);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/fusion.js b/3p/vendors/fusion.js
new file mode 100644
index 0000000000000..186bf73d91ca9
--- /dev/null
+++ b/3p/vendors/fusion.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {fusion} from '../../ads/vendors/fusion';
+
+init(window);
+register('fusion', fusion);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/genieessp.js b/3p/vendors/genieessp.js
new file mode 100644
index 0000000000000..1faac44f70fc4
--- /dev/null
+++ b/3p/vendors/genieessp.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {genieessp} from '../../ads/vendors/genieessp';
+
+init(window);
+register('genieessp', genieessp);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/giraff.js b/3p/vendors/giraff.js
new file mode 100644
index 0000000000000..ee247afc0472d
--- /dev/null
+++ b/3p/vendors/giraff.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {giraff} from '../../ads/vendors/giraff';
+
+init(window);
+register('giraff', giraff);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/github.js b/3p/vendors/github.js
new file mode 100644
index 0000000000000..d017c72b8211c
--- /dev/null
+++ b/3p/vendors/github.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {github} from '../github';
+
+init(window);
+register('github', github);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/glomex.js b/3p/vendors/glomex.js
new file mode 100644
index 0000000000000..913f0750cf99f
--- /dev/null
+++ b/3p/vendors/glomex.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {glomex} from '../../ads/vendors/glomex';
+
+init(window);
+register('glomex', glomex);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/gmossp.js b/3p/vendors/gmossp.js
new file mode 100644
index 0000000000000..1f0cb14094bbd
--- /dev/null
+++ b/3p/vendors/gmossp.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {gmossp} from '../../ads/vendors/gmossp';
+
+init(window);
+register('gmossp', gmossp);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/gumgum.js b/3p/vendors/gumgum.js
new file mode 100644
index 0000000000000..496d198ecb1f3
--- /dev/null
+++ b/3p/vendors/gumgum.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {gumgum} from '../../ads/vendors/gumgum';
+
+init(window);
+register('gumgum', gumgum);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/holder.js b/3p/vendors/holder.js
new file mode 100644
index 0000000000000..a4aac0ef085d7
--- /dev/null
+++ b/3p/vendors/holder.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {holder} from '../../ads/vendors/holder';
+
+init(window);
+register('holder', holder);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/ibillboard.js b/3p/vendors/ibillboard.js
new file mode 100644
index 0000000000000..c20e8813d5a6b
--- /dev/null
+++ b/3p/vendors/ibillboard.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {ibillboard} from '../../ads/vendors/ibillboard';
+
+init(window);
+register('ibillboard', ibillboard);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/idealmedia.js b/3p/vendors/idealmedia.js
new file mode 100644
index 0000000000000..cacbd9bfd3f7c
--- /dev/null
+++ b/3p/vendors/idealmedia.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {idealmedia} from '../../ads/vendors/idealmedia';
+
+init(window);
+register('idealmedia', idealmedia);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/ima-video.js b/3p/vendors/ima-video.js
new file mode 100644
index 0000000000000..035493f8025b4
--- /dev/null
+++ b/3p/vendors/ima-video.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {imaVideo} from '../../ads/google/ima/ima-video';
+
+init(window);
+register('ima-video', imaVideo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/imedia.js b/3p/vendors/imedia.js
new file mode 100644
index 0000000000000..e41c220506600
--- /dev/null
+++ b/3p/vendors/imedia.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {imedia} from '../../ads/vendors/imedia';
+
+init(window);
+register('imedia', imedia);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/imobile.js b/3p/vendors/imobile.js
new file mode 100644
index 0000000000000..6ee9420c2db8b
--- /dev/null
+++ b/3p/vendors/imobile.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {imobile} from '../../ads/vendors/imobile';
+
+init(window);
+register('imobile', imobile);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/imonomy.js b/3p/vendors/imonomy.js
new file mode 100644
index 0000000000000..dcd8731d8679b
--- /dev/null
+++ b/3p/vendors/imonomy.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {imonomy} from '../../ads/vendors/imonomy';
+
+init(window);
+register('imonomy', imonomy);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/improvedigital.js b/3p/vendors/improvedigital.js
new file mode 100644
index 0000000000000..b7991c3e3f82a
--- /dev/null
+++ b/3p/vendors/improvedigital.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {improvedigital} from '../../ads/vendors/improvedigital';
+
+init(window);
+register('improvedigital', improvedigital);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/industrybrains.js b/3p/vendors/industrybrains.js
new file mode 100644
index 0000000000000..30b4c16e87a69
--- /dev/null
+++ b/3p/vendors/industrybrains.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {industrybrains} from '../../ads/vendors/adblade';
+
+init(window);
+register('industrybrains', industrybrains);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/inmobi.js b/3p/vendors/inmobi.js
new file mode 100644
index 0000000000000..196ac8788039b
--- /dev/null
+++ b/3p/vendors/inmobi.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {inmobi} from '../../ads/vendors/inmobi';
+
+init(window);
+register('inmobi', inmobi);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/innity.js b/3p/vendors/innity.js
new file mode 100644
index 0000000000000..70e3941842c64
--- /dev/null
+++ b/3p/vendors/innity.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {innity} from '../../ads/vendors/innity';
+
+init(window);
+register('innity', innity);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/insticator.js b/3p/vendors/insticator.js
new file mode 100644
index 0000000000000..99a095fcf1670
--- /dev/null
+++ b/3p/vendors/insticator.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {insticator} from '../../ads/vendors/insticator';
+
+init(window);
+register('insticator', insticator);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/invibes.js b/3p/vendors/invibes.js
new file mode 100644
index 0000000000000..92dbdbb5752ab
--- /dev/null
+++ b/3p/vendors/invibes.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {invibes} from '../../ads/vendors/invibes';
+
+init(window);
+register('invibes', invibes);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/iprom.js b/3p/vendors/iprom.js
new file mode 100644
index 0000000000000..8b2c314c6c1d5
--- /dev/null
+++ b/3p/vendors/iprom.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {iprom} from '../../ads/vendors/iprom';
+
+init(window);
+register('iprom', iprom);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/ix.js b/3p/vendors/ix.js
new file mode 100644
index 0000000000000..ccfa1b2503d07
--- /dev/null
+++ b/3p/vendors/ix.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {ix} from '../../ads/vendors/ix';
+
+init(window);
+register('ix', ix);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/jubna.js b/3p/vendors/jubna.js
new file mode 100644
index 0000000000000..32dc1199793a4
--- /dev/null
+++ b/3p/vendors/jubna.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {jubna} from '../../ads/vendors/jubna';
+
+init(window);
+register('jubna', jubna);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/kargo.js b/3p/vendors/kargo.js
new file mode 100644
index 0000000000000..eadb31aea9647
--- /dev/null
+++ b/3p/vendors/kargo.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {kargo} from '../../ads/vendors/kargo';
+
+init(window);
+register('kargo', kargo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/ketshwa.js b/3p/vendors/ketshwa.js
new file mode 100644
index 0000000000000..6ee96f4455235
--- /dev/null
+++ b/3p/vendors/ketshwa.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {ketshwa} from '../../ads/vendors/ketshwa';
+
+init(window);
+register('ketshwa', ketshwa);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/kiosked.js b/3p/vendors/kiosked.js
new file mode 100644
index 0000000000000..a09af6b923b2b
--- /dev/null
+++ b/3p/vendors/kiosked.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {kiosked} from '../../ads/vendors/kiosked';
+
+init(window);
+register('kiosked', kiosked);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/kixer.js b/3p/vendors/kixer.js
new file mode 100644
index 0000000000000..8f906f383666d
--- /dev/null
+++ b/3p/vendors/kixer.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {kixer} from '../../ads/vendors/kixer';
+
+init(window);
+register('kixer', kixer);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/kuadio.js b/3p/vendors/kuadio.js
new file mode 100644
index 0000000000000..b27f3c1d4fcb3
--- /dev/null
+++ b/3p/vendors/kuadio.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {kuadio} from '../../ads/vendors/kuadio';
+
+init(window);
+register('kuadio', kuadio);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/lentainform.js b/3p/vendors/lentainform.js
new file mode 100644
index 0000000000000..4cd2d968b671c
--- /dev/null
+++ b/3p/vendors/lentainform.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {lentainform} from '../../ads/vendors/lentainform';
+
+init(window);
+register('lentainform', lentainform);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/ligatus.js b/3p/vendors/ligatus.js
new file mode 100644
index 0000000000000..42ce103e78d40
--- /dev/null
+++ b/3p/vendors/ligatus.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {ligatus} from '../../ads/vendors/ligatus';
+
+init(window);
+register('ligatus', ligatus);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/lockerdome.js b/3p/vendors/lockerdome.js
new file mode 100644
index 0000000000000..e559ef4fe1431
--- /dev/null
+++ b/3p/vendors/lockerdome.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {lockerdome} from '../../ads/vendors/lockerdome';
+
+init(window);
+register('lockerdome', lockerdome);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/logly.js b/3p/vendors/logly.js
new file mode 100644
index 0000000000000..8615969f4cb91
--- /dev/null
+++ b/3p/vendors/logly.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {logly} from '../../ads/vendors/logly';
+
+init(window);
+register('logly', logly);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/loka.js b/3p/vendors/loka.js
new file mode 100644
index 0000000000000..8eb1be7da160f
--- /dev/null
+++ b/3p/vendors/loka.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {loka} from '../../ads/vendors/loka';
+
+init(window);
+register('loka', loka);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/luckyads.js b/3p/vendors/luckyads.js
new file mode 100644
index 0000000000000..26e3785654119
--- /dev/null
+++ b/3p/vendors/luckyads.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {luckyads} from '../../ads/vendors/luckyads';
+
+init(window);
+register('luckyads', luckyads);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/macaw.js b/3p/vendors/macaw.js
new file mode 100644
index 0000000000000..2cc9e4ed19787
--- /dev/null
+++ b/3p/vendors/macaw.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {macaw} from '../../ads/vendors/macaw';
+
+init(window);
+register('macaw', macaw);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/mads.js b/3p/vendors/mads.js
new file mode 100644
index 0000000000000..2f252e48e3843
--- /dev/null
+++ b/3p/vendors/mads.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {mads} from '../../ads/vendors/mads';
+
+init(window);
+register('mads', mads);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/mantis-display.js b/3p/vendors/mantis-display.js
new file mode 100644
index 0000000000000..2d9ee2bde8777
--- /dev/null
+++ b/3p/vendors/mantis-display.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {mantisDisplay} from '../../ads/vendors/mantis';
+
+init(window);
+register('mantis-display', mantisDisplay);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/mantis-recommend.js b/3p/vendors/mantis-recommend.js
new file mode 100644
index 0000000000000..8f34f1448c61a
--- /dev/null
+++ b/3p/vendors/mantis-recommend.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {mantisRecommend} from '../../ads/vendors/mantis';
+
+init(window);
+register('mantis-recommend', mantisRecommend);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/marfeel.js b/3p/vendors/marfeel.js
new file mode 100644
index 0000000000000..41693dd9707d9
--- /dev/null
+++ b/3p/vendors/marfeel.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {marfeel} from '../../ads/vendors/marfeel';
+
+init(window);
+register('marfeel', marfeel);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/mathml.js b/3p/vendors/mathml.js
new file mode 100644
index 0000000000000..fe84fc1231956
--- /dev/null
+++ b/3p/vendors/mathml.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {mathml} from '../mathml';
+
+init(window);
+register('mathml', mathml);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/mediaad.js b/3p/vendors/mediaad.js
new file mode 100644
index 0000000000000..e1461f6805a2d
--- /dev/null
+++ b/3p/vendors/mediaad.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {mediaad} from '../../ads/vendors/mediaad';
+
+init(window);
+register('mediaad', mediaad);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/medianet.js b/3p/vendors/medianet.js
new file mode 100644
index 0000000000000..1dd922a8d2816
--- /dev/null
+++ b/3p/vendors/medianet.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {medianet} from '../../ads/vendors/medianet';
+
+init(window);
+register('medianet', medianet);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/mediavine.js b/3p/vendors/mediavine.js
new file mode 100644
index 0000000000000..0be7231b2cf95
--- /dev/null
+++ b/3p/vendors/mediavine.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {mediavine} from '../../ads/vendors/mediavine';
+
+init(window);
+register('mediavine', mediavine);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/medyanet.js b/3p/vendors/medyanet.js
new file mode 100644
index 0000000000000..a2874e4643dfd
--- /dev/null
+++ b/3p/vendors/medyanet.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {medyanet} from '../../ads/vendors/medyanet';
+
+init(window);
+register('medyanet', medyanet);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/meg.js b/3p/vendors/meg.js
new file mode 100644
index 0000000000000..de68c9cef0757
--- /dev/null
+++ b/3p/vendors/meg.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {meg} from '../../ads/vendors/meg';
+
+init(window);
+register('meg', meg);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/mgid.js b/3p/vendors/mgid.js
new file mode 100644
index 0000000000000..bbf9cc8f7f579
--- /dev/null
+++ b/3p/vendors/mgid.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {mgid} from '../../ads/vendors/mgid';
+
+init(window);
+register('mgid', mgid);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/microad.js b/3p/vendors/microad.js
new file mode 100644
index 0000000000000..c2a916b917c1b
--- /dev/null
+++ b/3p/vendors/microad.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {microad} from '../../ads/vendors/microad';
+
+init(window);
+register('microad', microad);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/miximedia.js b/3p/vendors/miximedia.js
new file mode 100644
index 0000000000000..f7b30603283b6
--- /dev/null
+++ b/3p/vendors/miximedia.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {miximedia} from '../../ads/vendors/miximedia';
+
+init(window);
+register('miximedia', miximedia);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/mixpo.js b/3p/vendors/mixpo.js
new file mode 100644
index 0000000000000..5c1dfee431c47
--- /dev/null
+++ b/3p/vendors/mixpo.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {mixpo} from '../../ads/vendors/mixpo';
+
+init(window);
+register('mixpo', mixpo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/monetizer101.js b/3p/vendors/monetizer101.js
new file mode 100644
index 0000000000000..1be86a2dcfef2
--- /dev/null
+++ b/3p/vendors/monetizer101.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {monetizer101} from '../../ads/vendors/monetizer101';
+
+init(window);
+register('monetizer101', monetizer101);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/mox.js b/3p/vendors/mox.js
new file mode 100644
index 0000000000000..40ccaeb3798f7
--- /dev/null
+++ b/3p/vendors/mox.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {mox} from '../../ads/vendors/mox';
+
+init(window);
+register('mox', mox);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/my6sense.js b/3p/vendors/my6sense.js
new file mode 100644
index 0000000000000..9a6ca61df5cf0
--- /dev/null
+++ b/3p/vendors/my6sense.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {my6sense} from '../../ads/vendors/my6sense';
+
+init(window);
+register('my6sense', my6sense);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/myfinance.js b/3p/vendors/myfinance.js
new file mode 100644
index 0000000000000..a0246c05c2f7e
--- /dev/null
+++ b/3p/vendors/myfinance.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {myfinance} from '../../ads/vendors/myfinance';
+
+init(window);
+register('myfinance', myfinance);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/myoffrz.js b/3p/vendors/myoffrz.js
new file mode 100644
index 0000000000000..7377b14cb4353
--- /dev/null
+++ b/3p/vendors/myoffrz.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {myoffrz} from '../../ads/vendors/myoffrz';
+
+init(window);
+register('myoffrz', myoffrz);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/mytarget.js b/3p/vendors/mytarget.js
new file mode 100644
index 0000000000000..9c03b62f85a41
--- /dev/null
+++ b/3p/vendors/mytarget.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {mytarget} from '../../ads/vendors/mytarget';
+
+init(window);
+register('mytarget', mytarget);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/mywidget.js b/3p/vendors/mywidget.js
new file mode 100644
index 0000000000000..4d75f288874b8
--- /dev/null
+++ b/3p/vendors/mywidget.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {mywidget} from '../../ads/vendors/mywidget';
+
+init(window);
+register('mywidget', mywidget);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/nativeroll.js b/3p/vendors/nativeroll.js
new file mode 100644
index 0000000000000..5ffde83d29cb1
--- /dev/null
+++ b/3p/vendors/nativeroll.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {nativeroll} from '../../ads/vendors/nativeroll';
+
+init(window);
+register('nativeroll', nativeroll);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/nativery.js b/3p/vendors/nativery.js
new file mode 100644
index 0000000000000..c5da72800b97f
--- /dev/null
+++ b/3p/vendors/nativery.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {nativery} from '../../ads/vendors/nativery';
+
+init(window);
+register('nativery', nativery);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/nativo.js b/3p/vendors/nativo.js
new file mode 100644
index 0000000000000..1d20444c076a9
--- /dev/null
+++ b/3p/vendors/nativo.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {nativo} from '../../ads/vendors/nativo';
+
+init(window);
+register('nativo', nativo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/navegg.js b/3p/vendors/navegg.js
new file mode 100644
index 0000000000000..d734a339efb15
--- /dev/null
+++ b/3p/vendors/navegg.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {navegg} from '../../ads/vendors/navegg';
+
+init(window);
+register('navegg', navegg);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/nend.js b/3p/vendors/nend.js
new file mode 100644
index 0000000000000..180c4836fea03
--- /dev/null
+++ b/3p/vendors/nend.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {nend} from '../../ads/vendors/nend';
+
+init(window);
+register('nend', nend);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/netletix.js b/3p/vendors/netletix.js
new file mode 100644
index 0000000000000..f5830b0de4e04
--- /dev/null
+++ b/3p/vendors/netletix.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {netletix} from '../../ads/vendors/netletix';
+
+init(window);
+register('netletix', netletix);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/noddus.js b/3p/vendors/noddus.js
new file mode 100644
index 0000000000000..fd5bf079ce8f8
--- /dev/null
+++ b/3p/vendors/noddus.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {noddus} from '../../ads/vendors/noddus';
+
+init(window);
+register('noddus', noddus);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/nokta.js b/3p/vendors/nokta.js
new file mode 100644
index 0000000000000..d45245d49d701
--- /dev/null
+++ b/3p/vendors/nokta.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {nokta} from '../../ads/vendors/nokta';
+
+init(window);
+register('nokta', nokta);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/nws.js b/3p/vendors/nws.js
new file mode 100644
index 0000000000000..bf069b83449f0
--- /dev/null
+++ b/3p/vendors/nws.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {nws} from '../../ads/vendors/nws';
+
+init(window);
+register('nws', nws);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/oblivki.js b/3p/vendors/oblivki.js
new file mode 100644
index 0000000000000..35d987d3e911a
--- /dev/null
+++ b/3p/vendors/oblivki.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {oblivki} from '../../ads/vendors/oblivki';
+
+init(window);
+register('oblivki', oblivki);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/onead.js b/3p/vendors/onead.js
new file mode 100644
index 0000000000000..59a180198ae20
--- /dev/null
+++ b/3p/vendors/onead.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {onead} from '../../ads/vendors/onead';
+
+init(window);
+register('onead', onead);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/onnetwork.js b/3p/vendors/onnetwork.js
new file mode 100644
index 0000000000000..c25d31cb8a101
--- /dev/null
+++ b/3p/vendors/onnetwork.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {onnetwork} from '../../ads/vendors/onnetwork';
+
+init(window);
+register('onnetwork', onnetwork);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/openadstream.js b/3p/vendors/openadstream.js
new file mode 100644
index 0000000000000..035f3b177d073
--- /dev/null
+++ b/3p/vendors/openadstream.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {openadstream} from '../../ads/vendors/openadstream';
+
+init(window);
+register('openadstream', openadstream);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/openx.js b/3p/vendors/openx.js
new file mode 100644
index 0000000000000..8037534df17dd
--- /dev/null
+++ b/3p/vendors/openx.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {openx} from '../../ads/vendors/openx';
+
+init(window);
+register('openx', openx);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/opinary.js b/3p/vendors/opinary.js
new file mode 100644
index 0000000000000..7a461bc1cafda
--- /dev/null
+++ b/3p/vendors/opinary.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {opinary} from '../../ads/vendors/opinary';
+
+init(window);
+register('opinary', opinary);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/outbrain.js b/3p/vendors/outbrain.js
new file mode 100644
index 0000000000000..e7f99c7e83b5e
--- /dev/null
+++ b/3p/vendors/outbrain.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {outbrain} from '../../ads/vendors/outbrain';
+
+init(window);
+register('outbrain', outbrain);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/pixels.js b/3p/vendors/pixels.js
new file mode 100644
index 0000000000000..dfa7c6263f4e3
--- /dev/null
+++ b/3p/vendors/pixels.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {pixels} from '../../ads/vendors/pixels';
+
+init(window);
+register('pixels', pixels);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/playstream.js b/3p/vendors/playstream.js
new file mode 100644
index 0000000000000..af6bc99019d3c
--- /dev/null
+++ b/3p/vendors/playstream.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {playstream} from '../../ads/vendors/playstream';
+
+init(window);
+register('playstream', playstream);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/plista.js b/3p/vendors/plista.js
new file mode 100644
index 0000000000000..5d287daeda142
--- /dev/null
+++ b/3p/vendors/plista.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {plista} from '../../ads/vendors/plista';
+
+init(window);
+register('plista', plista);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/polymorphicads.js b/3p/vendors/polymorphicads.js
new file mode 100644
index 0000000000000..21b768bc528a1
--- /dev/null
+++ b/3p/vendors/polymorphicads.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {polymorphicads} from '../../ads/vendors/polymorphicads';
+
+init(window);
+register('polymorphicads', polymorphicads);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/popin.js b/3p/vendors/popin.js
new file mode 100644
index 0000000000000..a862f602fb907
--- /dev/null
+++ b/3p/vendors/popin.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {popin} from '../../ads/vendors/popin';
+
+init(window);
+register('popin', popin);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/postquare.js b/3p/vendors/postquare.js
new file mode 100644
index 0000000000000..be6e8b60c21a2
--- /dev/null
+++ b/3p/vendors/postquare.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {postquare} from '../../ads/vendors/postquare';
+
+init(window);
+register('postquare', postquare);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/ppstudio.js b/3p/vendors/ppstudio.js
new file mode 100644
index 0000000000000..c2b966a53b660
--- /dev/null
+++ b/3p/vendors/ppstudio.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {ppstudio} from '../../ads/vendors/ppstudio';
+
+init(window);
+register('ppstudio', ppstudio);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/pressboard.js b/3p/vendors/pressboard.js
new file mode 100644
index 0000000000000..b9ed1f55cacbc
--- /dev/null
+++ b/3p/vendors/pressboard.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {pressboard} from '../../ads/vendors/pressboard';
+
+init(window);
+register('pressboard', pressboard);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/promoteiq.js b/3p/vendors/promoteiq.js
new file mode 100644
index 0000000000000..93235230eaef9
--- /dev/null
+++ b/3p/vendors/promoteiq.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {promoteiq} from '../../ads/vendors/promoteiq';
+
+init(window);
+register('promoteiq', promoteiq);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/pubexchange.js b/3p/vendors/pubexchange.js
new file mode 100644
index 0000000000000..90b3477a1f6e0
--- /dev/null
+++ b/3p/vendors/pubexchange.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {pubexchange} from '../../ads/vendors/pubexchange';
+
+init(window);
+register('pubexchange', pubexchange);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/pubguru.js b/3p/vendors/pubguru.js
new file mode 100644
index 0000000000000..17ede73370b08
--- /dev/null
+++ b/3p/vendors/pubguru.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {pubguru} from '../../ads/vendors/pubguru';
+
+init(window);
+register('pubguru', pubguru);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/pubmatic.js b/3p/vendors/pubmatic.js
new file mode 100644
index 0000000000000..ccbd2a2fea7a7
--- /dev/null
+++ b/3p/vendors/pubmatic.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {pubmatic} from '../../ads/vendors/pubmatic';
+
+init(window);
+register('pubmatic', pubmatic);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/pubmine.js b/3p/vendors/pubmine.js
new file mode 100644
index 0000000000000..28c20b01397f1
--- /dev/null
+++ b/3p/vendors/pubmine.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {pubmine} from '../../ads/vendors/pubmine';
+
+init(window);
+register('pubmine', pubmine);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/puffnetwork.js b/3p/vendors/puffnetwork.js
new file mode 100644
index 0000000000000..cc92561cab091
--- /dev/null
+++ b/3p/vendors/puffnetwork.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {puffnetwork} from '../../ads/vendors/puffnetwork';
+
+init(window);
+register('puffnetwork', puffnetwork);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/pulse.js b/3p/vendors/pulse.js
new file mode 100644
index 0000000000000..08147e373c944
--- /dev/null
+++ b/3p/vendors/pulse.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {pulse} from '../../ads/vendors/pulse';
+
+init(window);
+register('pulse', pulse);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/pulsepoint.js b/3p/vendors/pulsepoint.js
new file mode 100644
index 0000000000000..cf562f4d92c17
--- /dev/null
+++ b/3p/vendors/pulsepoint.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {pulsepoint} from '../../ads/vendors/pulsepoint';
+
+init(window);
+register('pulsepoint', pulsepoint);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/purch.js b/3p/vendors/purch.js
new file mode 100644
index 0000000000000..ce257786b4715
--- /dev/null
+++ b/3p/vendors/purch.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {purch} from '../../ads/vendors/purch';
+
+init(window);
+register('purch', purch);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/quoraad.js b/3p/vendors/quoraad.js
new file mode 100644
index 0000000000000..35496944aecbe
--- /dev/null
+++ b/3p/vendors/quoraad.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {quoraad} from '../../ads/vendors/quoraad';
+
+init(window);
+register('quoraad', quoraad);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/rakutenunifiedads.js b/3p/vendors/rakutenunifiedads.js
new file mode 100644
index 0000000000000..bbc47b04fbb2c
--- /dev/null
+++ b/3p/vendors/rakutenunifiedads.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {rakutenunifiedads} from '../../ads/vendors/rakutenunifiedads';
+
+init(window);
+register('rakutenunifiedads', rakutenunifiedads);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/rbinfox.js b/3p/vendors/rbinfox.js
new file mode 100644
index 0000000000000..962a1bbbbcd40
--- /dev/null
+++ b/3p/vendors/rbinfox.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {rbinfox} from '../../ads/vendors/rbinfox';
+
+init(window);
+register('rbinfox', rbinfox);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/rcmwidget.js b/3p/vendors/rcmwidget.js
new file mode 100644
index 0000000000000..bd995c8cb2d78
--- /dev/null
+++ b/3p/vendors/rcmwidget.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {rcmwidget} from '../../ads/vendors/rcmwidget';
+
+init(window);
+register('rcmwidget', rcmwidget);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/readmo.js b/3p/vendors/readmo.js
new file mode 100644
index 0000000000000..2514201dbd391
--- /dev/null
+++ b/3p/vendors/readmo.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {readmo} from '../../ads/vendors/readmo';
+
+init(window);
+register('readmo', readmo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/realclick.js b/3p/vendors/realclick.js
new file mode 100644
index 0000000000000..be10ff227adab
--- /dev/null
+++ b/3p/vendors/realclick.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {realclick} from '../../ads/vendors/realclick';
+
+init(window);
+register('realclick', realclick);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/recomad.js b/3p/vendors/recomad.js
new file mode 100644
index 0000000000000..41548a9560fb8
--- /dev/null
+++ b/3p/vendors/recomad.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {recomad} from '../../ads/vendors/recomad';
+
+init(window);
+register('recomad', recomad);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/recreativ.js b/3p/vendors/recreativ.js
new file mode 100644
index 0000000000000..fd0e81f92dd0f
--- /dev/null
+++ b/3p/vendors/recreativ.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {recreativ} from '../../ads/vendors/recreativ';
+
+init(window);
+register('recreativ', recreativ);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/reddit.js b/3p/vendors/reddit.js
new file mode 100644
index 0000000000000..61147f80c4162
--- /dev/null
+++ b/3p/vendors/reddit.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {reddit} from '../reddit';
+
+init(window);
+register('reddit', reddit);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/relap.js b/3p/vendors/relap.js
new file mode 100644
index 0000000000000..02f80094c8a85
--- /dev/null
+++ b/3p/vendors/relap.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {relap} from '../../ads/vendors/relap';
+
+init(window);
+register('relap', relap);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/relappro.js b/3p/vendors/relappro.js
new file mode 100644
index 0000000000000..7163c7b92f00e
--- /dev/null
+++ b/3p/vendors/relappro.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {relappro} from '../../ads/vendors/relappro';
+
+init(window);
+register('relappro', relappro);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/remixd.js b/3p/vendors/remixd.js
new file mode 100644
index 0000000000000..36595eb552e57
--- /dev/null
+++ b/3p/vendors/remixd.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {remixd} from '../../ads/vendors/remixd';
+
+init(window);
+register('remixd', remixd);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/revcontent.js b/3p/vendors/revcontent.js
new file mode 100644
index 0000000000000..03d56b2ec0245
--- /dev/null
+++ b/3p/vendors/revcontent.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {revcontent} from '../../ads/vendors/revcontent';
+
+init(window);
+register('revcontent', revcontent);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/revjet.js b/3p/vendors/revjet.js
new file mode 100644
index 0000000000000..36b1a3248e203
--- /dev/null
+++ b/3p/vendors/revjet.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {revjet} from '../../ads/vendors/revjet';
+
+init(window);
+register('revjet', revjet);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/rfp.js b/3p/vendors/rfp.js
new file mode 100644
index 0000000000000..f22ac4cb5c6c5
--- /dev/null
+++ b/3p/vendors/rfp.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {rfp} from '../../ads/vendors/rfp';
+
+init(window);
+register('rfp', rfp);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/rnetplus.js b/3p/vendors/rnetplus.js
new file mode 100644
index 0000000000000..818cc88901165
--- /dev/null
+++ b/3p/vendors/rnetplus.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {rnetplus} from '../../ads/vendors/rnetplus';
+
+init(window);
+register('rnetplus', rnetplus);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/rubicon.js b/3p/vendors/rubicon.js
new file mode 100644
index 0000000000000..ce51714271cca
--- /dev/null
+++ b/3p/vendors/rubicon.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {rubicon} from '../../ads/vendors/rubicon';
+
+init(window);
+register('rubicon', rubicon);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/runative.js b/3p/vendors/runative.js
new file mode 100644
index 0000000000000..cef21d5c6aa2e
--- /dev/null
+++ b/3p/vendors/runative.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {runative} from '../../ads/vendors/runative';
+
+init(window);
+register('runative', runative);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/sas.js b/3p/vendors/sas.js
new file mode 100644
index 0000000000000..025fee4c1a3bf
--- /dev/null
+++ b/3p/vendors/sas.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {sas} from '../../ads/vendors/sas';
+
+init(window);
+register('sas', sas);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/seedingalliance.js b/3p/vendors/seedingalliance.js
new file mode 100644
index 0000000000000..b3ff421eb09e5
--- /dev/null
+++ b/3p/vendors/seedingalliance.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {seedingalliance} from '../../ads/vendors/seedingalliance';
+
+init(window);
+register('seedingalliance', seedingalliance);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/sekindo.js b/3p/vendors/sekindo.js
new file mode 100644
index 0000000000000..5d17dcb110eb8
--- /dev/null
+++ b/3p/vendors/sekindo.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {sekindo} from '../../ads/vendors/sekindo';
+
+init(window);
+register('sekindo', sekindo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/sharethrough.js b/3p/vendors/sharethrough.js
new file mode 100644
index 0000000000000..e40c44872f689
--- /dev/null
+++ b/3p/vendors/sharethrough.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {sharethrough} from '../../ads/vendors/sharethrough';
+
+init(window);
+register('sharethrough', sharethrough);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/shemedia.js b/3p/vendors/shemedia.js
new file mode 100644
index 0000000000000..fd18582d80857
--- /dev/null
+++ b/3p/vendors/shemedia.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {shemedia} from '../../ads/vendors/shemedia';
+
+init(window);
+register('shemedia', shemedia);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/sklik.js b/3p/vendors/sklik.js
new file mode 100644
index 0000000000000..ae2e145bd3096
--- /dev/null
+++ b/3p/vendors/sklik.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {sklik} from '../../ads/vendors/sklik';
+
+init(window);
+register('sklik', sklik);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/slimcutmedia.js b/3p/vendors/slimcutmedia.js
new file mode 100644
index 0000000000000..2f240a4052469
--- /dev/null
+++ b/3p/vendors/slimcutmedia.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {slimcutmedia} from '../../ads/vendors/slimcutmedia';
+
+init(window);
+register('slimcutmedia', slimcutmedia);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/smartadserver.js b/3p/vendors/smartadserver.js
new file mode 100644
index 0000000000000..0a3aadb3bbaee
--- /dev/null
+++ b/3p/vendors/smartadserver.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {smartadserver} from '../../ads/vendors/smartadserver';
+
+init(window);
+register('smartadserver', smartadserver);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/smartclip.js b/3p/vendors/smartclip.js
new file mode 100644
index 0000000000000..6061a51cb1aad
--- /dev/null
+++ b/3p/vendors/smartclip.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {smartclip} from '../../ads/vendors/smartclip';
+
+init(window);
+register('smartclip', smartclip);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/smi2.js b/3p/vendors/smi2.js
new file mode 100644
index 0000000000000..ba741fc2622f1
--- /dev/null
+++ b/3p/vendors/smi2.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {smi2} from '../../ads/vendors/smi2';
+
+init(window);
+register('smi2', smi2);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/smilewanted.js b/3p/vendors/smilewanted.js
new file mode 100644
index 0000000000000..94c6b8a65e05a
--- /dev/null
+++ b/3p/vendors/smilewanted.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {smilewanted} from '../../ads/vendors/smilewanted';
+
+init(window);
+register('smilewanted', smilewanted);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/sogouad.js b/3p/vendors/sogouad.js
new file mode 100644
index 0000000000000..b4445181d901b
--- /dev/null
+++ b/3p/vendors/sogouad.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {sogouad} from '../../ads/vendors/sogouad';
+
+init(window);
+register('sogouad', sogouad);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/sona.js b/3p/vendors/sona.js
new file mode 100644
index 0000000000000..d227994fc5b35
--- /dev/null
+++ b/3p/vendors/sona.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {sona} from '../../ads/vendors/sona';
+
+init(window);
+register('sona', sona);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/sortable.js b/3p/vendors/sortable.js
new file mode 100644
index 0000000000000..e4c8078843962
--- /dev/null
+++ b/3p/vendors/sortable.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {sortable} from '../../ads/vendors/sortable';
+
+init(window);
+register('sortable', sortable);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/sovrn.js b/3p/vendors/sovrn.js
new file mode 100644
index 0000000000000..360e488b78dd1
--- /dev/null
+++ b/3p/vendors/sovrn.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {sovrn} from '../../ads/vendors/sovrn';
+
+init(window);
+register('sovrn', sovrn);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/speakol.js b/3p/vendors/speakol.js
new file mode 100644
index 0000000000000..c7f81f92432ba
--- /dev/null
+++ b/3p/vendors/speakol.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {speakol} from '../../ads/vendors/speakol';
+
+init(window);
+register('speakol', speakol);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/spotx.js b/3p/vendors/spotx.js
new file mode 100644
index 0000000000000..d3b4b187274d4
--- /dev/null
+++ b/3p/vendors/spotx.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {spotx} from '../../ads/vendors/spotx';
+
+init(window);
+register('spotx', spotx);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/springAds.js b/3p/vendors/springAds.js
new file mode 100644
index 0000000000000..e154e7aaf5a19
--- /dev/null
+++ b/3p/vendors/springAds.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {springAds} from '../../ads/vendors/springAds';
+
+init(window);
+register('springAds', springAds);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/ssp.js b/3p/vendors/ssp.js
new file mode 100644
index 0000000000000..fe2609fd44ab0
--- /dev/null
+++ b/3p/vendors/ssp.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {ssp} from '../../ads/vendors/ssp';
+
+init(window);
+register('ssp', ssp);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/strossle.js b/3p/vendors/strossle.js
new file mode 100644
index 0000000000000..7234c6655f097
--- /dev/null
+++ b/3p/vendors/strossle.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {strossle} from '../../ads/vendors/strossle';
+
+init(window);
+register('strossle', strossle);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/sulvo.js b/3p/vendors/sulvo.js
new file mode 100644
index 0000000000000..7c53e41fdf32d
--- /dev/null
+++ b/3p/vendors/sulvo.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {sulvo} from '../../ads/vendors/sulvo';
+
+init(window);
+register('sulvo', sulvo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/sunmedia.js b/3p/vendors/sunmedia.js
new file mode 100644
index 0000000000000..2940dac15f987
--- /dev/null
+++ b/3p/vendors/sunmedia.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {sunmedia} from '../../ads/vendors/sunmedia';
+
+init(window);
+register('sunmedia', sunmedia);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/svknative.js b/3p/vendors/svknative.js
new file mode 100644
index 0000000000000..21a6c49d09696
--- /dev/null
+++ b/3p/vendors/svknative.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {svknative} from '../../ads/vendors/svknative';
+
+init(window);
+register('svknative', svknative);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/swoop.js b/3p/vendors/swoop.js
new file mode 100644
index 0000000000000..1ce656a495c7b
--- /dev/null
+++ b/3p/vendors/swoop.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {swoop} from '../../ads/vendors/swoop';
+
+init(window);
+register('swoop', swoop);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/taboola.js b/3p/vendors/taboola.js
new file mode 100644
index 0000000000000..ed40c7c7e4852
--- /dev/null
+++ b/3p/vendors/taboola.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {taboola} from '../../ads/vendors/taboola';
+
+init(window);
+register('taboola', taboola);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/tcsemotion.js b/3p/vendors/tcsemotion.js
new file mode 100644
index 0000000000000..4e0a8f6d8378a
--- /dev/null
+++ b/3p/vendors/tcsemotion.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {tcsemotion} from '../../ads/vendors/tcsemotion';
+
+init(window);
+register('tcsemotion', tcsemotion);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/teads.js b/3p/vendors/teads.js
new file mode 100644
index 0000000000000..1534c09977600
--- /dev/null
+++ b/3p/vendors/teads.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {teads} from '../../ads/vendors/teads';
+
+init(window);
+register('teads', teads);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/temedya.js b/3p/vendors/temedya.js
new file mode 100644
index 0000000000000..e5fa647b4780b
--- /dev/null
+++ b/3p/vendors/temedya.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {temedya} from '../../ads/vendors/temedya';
+
+init(window);
+register('temedya', temedya);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/torimochi.js b/3p/vendors/torimochi.js
new file mode 100644
index 0000000000000..02e3bfcda8541
--- /dev/null
+++ b/3p/vendors/torimochi.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {torimochi} from '../../ads/vendors/torimochi';
+
+init(window);
+register('torimochi', torimochi);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/tracdelight.js b/3p/vendors/tracdelight.js
new file mode 100644
index 0000000000000..75ce426dc2f20
--- /dev/null
+++ b/3p/vendors/tracdelight.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {tracdelight} from '../../ads/vendors/tracdelight';
+
+init(window);
+register('tracdelight', tracdelight);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/triplelift.js b/3p/vendors/triplelift.js
new file mode 100644
index 0000000000000..4a914bf479296
--- /dev/null
+++ b/3p/vendors/triplelift.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {triplelift} from '../../ads/vendors/triplelift';
+
+init(window);
+register('triplelift', triplelift);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/trugaze.js b/3p/vendors/trugaze.js
new file mode 100644
index 0000000000000..c95a1e3db542b
--- /dev/null
+++ b/3p/vendors/trugaze.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {trugaze} from '../../ads/vendors/trugaze';
+
+init(window);
+register('trugaze', trugaze);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/twitter.js b/3p/vendors/twitter.js
new file mode 100644
index 0000000000000..259b797829531
--- /dev/null
+++ b/3p/vendors/twitter.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {twitter} from '../twitter';
+
+init(window);
+register('twitter', twitter);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/uas.js b/3p/vendors/uas.js
new file mode 100644
index 0000000000000..b76bbd684dd2c
--- /dev/null
+++ b/3p/vendors/uas.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {uas} from '../../ads/vendors/uas';
+
+init(window);
+register('uas', uas);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/ucfunnel.js b/3p/vendors/ucfunnel.js
new file mode 100644
index 0000000000000..380958966c72f
--- /dev/null
+++ b/3p/vendors/ucfunnel.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {ucfunnel} from '../../ads/vendors/ucfunnel';
+
+init(window);
+register('ucfunnel', ucfunnel);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/unruly.js b/3p/vendors/unruly.js
new file mode 100644
index 0000000000000..a2ce910657a45
--- /dev/null
+++ b/3p/vendors/unruly.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {unruly} from '../../ads/vendors/unruly';
+
+init(window);
+register('unruly', unruly);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/uzou.js b/3p/vendors/uzou.js
new file mode 100644
index 0000000000000..d23c3d73387fb
--- /dev/null
+++ b/3p/vendors/uzou.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {uzou} from '../../ads/vendors/uzou';
+
+init(window);
+register('uzou', uzou);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/valuecommerce.js b/3p/vendors/valuecommerce.js
new file mode 100644
index 0000000000000..ad199f888964c
--- /dev/null
+++ b/3p/vendors/valuecommerce.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {valuecommerce} from '../../ads/vendors/valuecommerce';
+
+init(window);
+register('valuecommerce', valuecommerce);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/vdoai.js b/3p/vendors/vdoai.js
new file mode 100644
index 0000000000000..80f8c42c41aff
--- /dev/null
+++ b/3p/vendors/vdoai.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {vdoai} from '../../ads/vendors/vdoai';
+
+init(window);
+register('vdoai', vdoai);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/verizonmedia.js b/3p/vendors/verizonmedia.js
new file mode 100644
index 0000000000000..eb1a0db843d5a
--- /dev/null
+++ b/3p/vendors/verizonmedia.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {verizonmedia} from '../../ads/vendors/verizonmedia';
+
+init(window);
+register('verizonmedia', verizonmedia);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/videointelligence.js b/3p/vendors/videointelligence.js
new file mode 100644
index 0000000000000..89eee85da10ff
--- /dev/null
+++ b/3p/vendors/videointelligence.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {videointelligence} from '../../ads/vendors/videointelligence';
+
+init(window);
+register('videointelligence', videointelligence);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/videonow.js b/3p/vendors/videonow.js
new file mode 100644
index 0000000000000..d50ef18a61c90
--- /dev/null
+++ b/3p/vendors/videonow.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {videonow} from '../../ads/vendors/videonow';
+
+init(window);
+register('videonow', videonow);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/viqeoplayer.js b/3p/vendors/viqeoplayer.js
new file mode 100644
index 0000000000000..da93e2154465f
--- /dev/null
+++ b/3p/vendors/viqeoplayer.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {viqeoplayer} from '../viqeoplayer';
+
+init(window);
+register('viqeoplayer', viqeoplayer);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/viralize.js b/3p/vendors/viralize.js
new file mode 100644
index 0000000000000..1f9254bfad31f
--- /dev/null
+++ b/3p/vendors/viralize.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {viralize} from '../../ads/vendors/viralize';
+
+init(window);
+register('viralize', viralize);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/vlyby.js b/3p/vendors/vlyby.js
new file mode 100644
index 0000000000000..11dcb3bd08eaa
--- /dev/null
+++ b/3p/vendors/vlyby.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {vlyby} from '../../ads/vendors/vlyby';
+
+init(window);
+register('vlyby', vlyby);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/vmfive.js b/3p/vendors/vmfive.js
new file mode 100644
index 0000000000000..0870dd1875809
--- /dev/null
+++ b/3p/vendors/vmfive.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {vmfive} from '../../ads/vendors/vmfive';
+
+init(window);
+register('vmfive', vmfive);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/webediads.js b/3p/vendors/webediads.js
new file mode 100644
index 0000000000000..bfb065c8dd169
--- /dev/null
+++ b/3p/vendors/webediads.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {webediads} from '../../ads/vendors/webediads';
+
+init(window);
+register('webediads', webediads);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/weborama-display.js b/3p/vendors/weborama-display.js
new file mode 100644
index 0000000000000..98222ead7e6a7
--- /dev/null
+++ b/3p/vendors/weborama-display.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {weboramaDisplay} from '../../ads/vendors/weborama';
+
+init(window);
+register('weborama-display', weboramaDisplay);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/whopainfeed.js b/3p/vendors/whopainfeed.js
new file mode 100644
index 0000000000000..8a61ae9ae7f47
--- /dev/null
+++ b/3p/vendors/whopainfeed.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {whopainfeed} from '../../ads/vendors/whopainfeed';
+
+init(window);
+register('whopainfeed', whopainfeed);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/widespace.js b/3p/vendors/widespace.js
new file mode 100644
index 0000000000000..ec67960a2e853
--- /dev/null
+++ b/3p/vendors/widespace.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {widespace} from '../../ads/vendors/widespace';
+
+init(window);
+register('widespace', widespace);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/wisteria.js b/3p/vendors/wisteria.js
new file mode 100644
index 0000000000000..2f737de20553d
--- /dev/null
+++ b/3p/vendors/wisteria.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {wisteria} from '../../ads/vendors/wisteria';
+
+init(window);
+register('wisteria', wisteria);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/wpmedia.js b/3p/vendors/wpmedia.js
new file mode 100644
index 0000000000000..a4bd1607bd0e4
--- /dev/null
+++ b/3p/vendors/wpmedia.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {wpmedia} from '../../ads/vendors/wpmedia';
+
+init(window);
+register('wpmedia', wpmedia);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/xlift.js b/3p/vendors/xlift.js
new file mode 100644
index 0000000000000..3bcd2d72845ed
--- /dev/null
+++ b/3p/vendors/xlift.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {xlift} from '../../ads/vendors/xlift';
+
+init(window);
+register('xlift', xlift);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/yahoo.js b/3p/vendors/yahoo.js
new file mode 100644
index 0000000000000..a7e0ab13df0a9
--- /dev/null
+++ b/3p/vendors/yahoo.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {yahoo} from '../../ads/vendors/yahoo';
+
+init(window);
+register('yahoo', yahoo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/yahoofedads.js b/3p/vendors/yahoofedads.js
new file mode 100644
index 0000000000000..d00ec92604291
--- /dev/null
+++ b/3p/vendors/yahoofedads.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {yahoofedads} from '../../ads/vendors/yahoofedads';
+
+init(window);
+register('yahoofedads', yahoofedads);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/yahoojp.js b/3p/vendors/yahoojp.js
new file mode 100644
index 0000000000000..6a560b0d365ef
--- /dev/null
+++ b/3p/vendors/yahoojp.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {yahoojp} from '../../ads/vendors/yahoojp';
+
+init(window);
+register('yahoojp', yahoojp);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/yahoonativeads.js b/3p/vendors/yahoonativeads.js
new file mode 100644
index 0000000000000..5cfdc5f376db8
--- /dev/null
+++ b/3p/vendors/yahoonativeads.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {yahoonativeads} from '../../ads/vendors/yahoonativeads';
+
+init(window);
+register('yahoonativeads', yahoonativeads);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/yandex.js b/3p/vendors/yandex.js
new file mode 100644
index 0000000000000..86800fa8febc8
--- /dev/null
+++ b/3p/vendors/yandex.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {yandex} from '../../ads/vendors/yandex';
+
+init(window);
+register('yandex', yandex);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/yektanet.js b/3p/vendors/yektanet.js
new file mode 100644
index 0000000000000..f7055840ff3d3
--- /dev/null
+++ b/3p/vendors/yektanet.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {yektanet} from '../../ads/vendors/yektanet';
+
+init(window);
+register('yektanet', yektanet);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/yengo.js b/3p/vendors/yengo.js
new file mode 100644
index 0000000000000..df79bf89515cf
--- /dev/null
+++ b/3p/vendors/yengo.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {yengo} from '../../ads/vendors/yengo';
+
+init(window);
+register('yengo', yengo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/yieldbot.js b/3p/vendors/yieldbot.js
new file mode 100644
index 0000000000000..f6552a8db50a5
--- /dev/null
+++ b/3p/vendors/yieldbot.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {yieldbot} from '../../ads/vendors/yieldbot';
+
+init(window);
+register('yieldbot', yieldbot);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/yieldmo.js b/3p/vendors/yieldmo.js
new file mode 100644
index 0000000000000..961f882d77eca
--- /dev/null
+++ b/3p/vendors/yieldmo.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {yieldmo} from '../../ads/vendors/yieldmo';
+
+init(window);
+register('yieldmo', yieldmo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/yieldone.js b/3p/vendors/yieldone.js
new file mode 100644
index 0000000000000..bdaa477555261
--- /dev/null
+++ b/3p/vendors/yieldone.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {yieldone} from '../../ads/vendors/yieldone';
+
+init(window);
+register('yieldone', yieldone);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/yieldpro.js b/3p/vendors/yieldpro.js
new file mode 100644
index 0000000000000..aa67b6283f663
--- /dev/null
+++ b/3p/vendors/yieldpro.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {yieldpro} from '../../ads/vendors/yieldpro';
+
+init(window);
+register('yieldpro', yieldpro);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/yotpo.js b/3p/vendors/yotpo.js
new file mode 100644
index 0000000000000..39c3c5deb84f3
--- /dev/null
+++ b/3p/vendors/yotpo.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {yotpo} from '../yotpo';
+
+init(window);
+register('yotpo', yotpo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/zedo.js b/3p/vendors/zedo.js
new file mode 100644
index 0000000000000..2cbf478ec951a
--- /dev/null
+++ b/3p/vendors/zedo.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {zedo} from '../../ads/vendors/zedo';
+
+init(window);
+register('zedo', zedo);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/zen.js b/3p/vendors/zen.js
new file mode 100644
index 0000000000000..76d285fe636e4
--- /dev/null
+++ b/3p/vendors/zen.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {zen} from '../../ads/vendors/zen';
+
+init(window);
+register('zen', zen);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/zergnet.js b/3p/vendors/zergnet.js
new file mode 100644
index 0000000000000..3f70d5b453e44
--- /dev/null
+++ b/3p/vendors/zergnet.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {zergnet} from '../../ads/vendors/zergnet';
+
+init(window);
+register('zergnet', zergnet);
+
+window.draw3p = draw3p;
diff --git a/3p/vendors/zucks.js b/3p/vendors/zucks.js
new file mode 100644
index 0000000000000..2f570a1eb57bc
--- /dev/null
+++ b/3p/vendors/zucks.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// src/polyfills.js must be the first import.
+import '../polyfills';
+
+import {draw3p, init} from '../integration-lib';
+import {register} from '../3p';
+
+import {zucks} from '../../ads/vendors/zucks';
+
+init(window);
+register('zucks', zucks);
+
+window.draw3p = draw3p;
diff --git a/3p/viqeoplayer.js b/3p/viqeoplayer.js
index a04f8a1cbed28..a37336278cf4b 100644
--- a/3p/viqeoplayer.js
+++ b/3p/viqeoplayer.js
@@ -15,7 +15,7 @@
  */
 import {getData} from '../src/event-helper';
 import {loadScript} from './3p';
-import {tryDecodeUriComponent} from '../src/url';
+import {tryDecodeUriComponent} from '../src/core/types/string/url';
 
 /**
  * @param {Window} global
diff --git a/AMP_MODULE_BUILD.md b/AMP_MODULE_BUILD.md
deleted file mode 100644
index db65d64d3a1d7..0000000000000
--- a/AMP_MODULE_BUILD.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# AMP Module Build
-
-## Explainer
-
-ES Modules is an official, standardized module system for JavaScript. However, on the AMP Project and for many in the wider web community, they are also an inflection point for supported JavaScript features from user-agents that is declarative and well known. When a browser supports ES Modules we can infer it also supports other modern features that were implemented before ES Modules were introduced. These include classes, promises, async/await, css variables, custom elements, window.fetch, let/const, arrow functions, and Shadow DOM. Like others, we're using this signal to remove polyfills and leverage modern JavaScript syntax more closely mirroring our authored source. Even better, this output is significantly terser than our previous output (which was compiled to ~ECMAScript 5) and helps improve performance for all AMP Documents.
-
-The [module/nomodule pattern](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) is a way to load the modern "module" build of the AMP runtime in a way were there would still be a fallback "nomodule" build if the browser does not support ES Modules.
-
-The HTML markup would look like:
-
-```html
-<script type="module" async src="https://www.ampproject.org/v0.mjs"></script>
-<script nomodule async src="https://www.ampproject.org/v0.js"></script>
-```
-
-## Recommended Browser Support for Module build
-
-There are some idiosyncrasies to how the module/nomodule pattern is loaded in
-different browsers so we must take care in selecting the browsers we apply the
-module/nomodule pattern.
-
-Some AMP environments such as a normal web page, or an AMP story page may be
-OK with "double fetching" where the browser will request both the module and
-nomodule build, but environments like AMP for Ads are more sensitive to
-additional request and might not be OK with the double fetching.
-
-The Original documentation/source for the table and summary below can be found [here](https://gist.github.com/jakub-g/5fc11af85a061ca29cc84892f1059fec).
-
-| IE/Edge | Firefox | Chrome | Safari  | fetches module | fetches nomodule | executes |      |
-| :-----: | :-----: | :----: | :-----: | :------------: | :--------------: | :------: | ---- |
-|   15-   |   59-   |  55-   |  10.0-  |       v        |        v         | nomodule | ❌   |
-|   16    |         |        | 10.1/3  |       v        |        v         |  module  | ❌   |
-|  17-18  |         |        |         |    double!     |        v         |  module  | ❌❌ |
-|         |         | 56-60  |         |                |        v         | nomodule | ✅   |
-|         |   60+   |  61+   | 11.0+\* |       v        |                  |  module  | ✅   |
-
-Summary:
-
-- ✅ no browser does double execution (provided [the Safari hack](https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc))
-- ✅ modern Chrome and Firefox never fetch more than necessary
-- ⚠ Safari <11 may or may not double fetch (even with the hack); it does not on small test pages, but in real complex pages it does (it seems deterministic, but not clear what's the exact trigger)
-- ⚠ Safari 11+ may still double fetch in some cases (see https://bugs.webkit.org/show_bug.cgi?id=194337)
-- ❌ pre-2018 browsers do double fetches
-- ❌❌ latest Edge does triple fetch (2x module + 1x nomodule)
-
-The AMP Project recommends applying the module/nomodule pattern for Google Chrome, Microsoft Edge >= 79, Safari >= 11, and Firefox >= 60.
-
-For other user-agents, we recommend sticking with the traditional single script loading model as part of our standard boilerplate.
-
-Specifically, this will help avoid the double or triple fetching issues (denoted by an ❌in the table above).
-
-## High Level Detailed Difference in Output
-
-We use the [babel preset-env plugin](https://babeljs.io/blog/2020/03/16/7.9.0) with `{bugfixes: true}` enabled to support module builds.
-
-At a high level we now avoid compiling the following in the AMP "module" output:
-
-- classes
-- arrow functions
-- async/await
-- Object and Array spreads
-- Array destructuring
-
-We Also remove the following polyfills:
-
-- document.contains
-- DOMTokenList
-- window.fetch
-- Math.sign
-- Object.assign
-- Object.values
-- Promises
-- Array.includes
-- CSS.escape()
-
-## Report a bug
-
-[File an issue](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Bug&template=bug-report.md&title=) if you find a bug in AMP. Provide a detailed description and steps for reproducing the bug; screenshots and working examples that demonstrate the problem are appreciated!
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index b74de28e04b78..bdc2810b80918 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -1 +1 @@
-See https://github.com/ampproject/meta/blob/master/CODE_OF_CONDUCT.md
+See https://github.com/ampproject/meta/blob/main/CODE_OF_CONDUCT.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
deleted file mode 100644
index 78883b3ab4b9d..0000000000000
--- a/CONTRIBUTING.md
+++ /dev/null
@@ -1,71 +0,0 @@
-# Contributing to AMP HTML
-
-The AMP HTML project strongly encourages your participation and [contributions](https://www.ampproject.org/contribute/)!
-
-We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.
-
-How would you like to help?
-
-- [Report a bug](#report-a-bug)
-- [Make a suggestion](#make-a-suggestion)
-- [Contribute code/features](#contribute-codefeatures)
-- [Get started with open source](#get-started-with-open-source)
-- [Participate in ongoing discussions](#ongoing-participation)
-
-If you have questions about _using_ AMP or are _encountering problems using AMP_ on your site please visit our [support page](SUPPORT.md) for help.
-
-## Report a bug
-
-[File an issue](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Bug&template=bug-report.md&title=) if you find a bug in AMP. Provide a detailed description and steps for reproducing the bug; screenshots and working examples that demonstrate the problem are appreciated!
-
-The community regularly monitoring issues and will try to fix open bugs quickly according to our [prioritization guidelines](./contributing/issue-priorities.md).
-
-## Make a suggestion
-
-[File a "feature request" issue](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Feature+Request&template=feature_request.md&title=) if you have a suggestion for a way to improve AMP or a request for a new AMP feature.
-
-If you are suggesting a feature that you are intending to implement, please see the [Contributing code/features](#contribute-code-features) section below for next steps.
-
-## Contribute code/features
-
-We'd love to have your help contributing code and features to AMP!
-
-See the [Contributing code and features](contributing/contributing-code.md) document for details on the process you can use to add code/features.
-
-## Get started with open source
-
-If you are new to contributing to an open source project, Git/GitHub, etc. welcome! We are glad you're interested in contributing to AMP and we want to help make your open source experience a success.
-
-The [Getting Started End-to-End Guide](./contributing/getting-started-e2e.md) provides step-by-step instructions for everything from creating a GitHub account to getting your code reviewed and merged. Even if you've never contributed to an open source project before you'll soon be building AMP, making improvements and seeing your code live across the web.
-
-The community has created a list of [Good First Issues](https://github.com/ampproject/amphtml/labels/good%20first%20issue) specifically for new contributors to the project. Feel free to find one of the [unclaimed Good First Issues](https://github.com/ampproject/amphtml/issues?utf8=%E2%9C%93&q=is%3Aopen%20label%3A%22good%20first%20issue%22%20-label%3A%22GFI%20Claimed!%22) that interests you, claim it by adding a comment to it and jump in!
-
-If you're interested in helping out but can't find a Good First Issue that matches your skills/interests, [sign up for our Slack](https://bit.ly/amp-slack-signup) and then reach out in the [#welcome-contributors channel](https://amphtml.slack.com/messages/welcome-contributors/) or send a Direct Message to [mrjoro](https://amphtml.slack.com/team/mrjoro/).
-
-If you run into any problems we have plenty of people who are willing to help; see the [How to get help](./contributing/getting-started-e2e.md#how-to-get-help) section of the Getting Started guide.
-
-## Ongoing participation
-
-We actively encourage ongoing participation by community members.
-
-### Discussion channels
-
-Technical issues, designs, etc. are discussed using several different channels:
-
-- [GitHub issues](https://github.com/ampproject/amphtml/issues) and [pull requests](https://github.com/ampproject/amphtml/pulls)
-- [Slack](https://amphtml.slack.com) ([signup](https://bit.ly/amp-slack-signup))
-  - the [#contributing](https://amphtml.slack.com/messages/C9HRJ1GPN/details/) channel is the main channel for you to discuss/ask questions about _contributing_ to the open source project
-  - if you're _new to contributing_ to AMP stop by [#welcome-contributors](https://amphtml.slack.com/messages/C432AFMFE/details/) to say hi!
-  - **NOTE: if you have a question about _using AMP on your site_, use [Stack Overflow](https://stackoverflow.com/questions/tagged/amp-html) rather than Slack** as Stack Overflow is more actively monitored for these types of questions
-  - there are many other Slack channels for more specific topics; after you join our Slack click on the "Channels" header to find other channels you want to participate in
-- the [amphtml-discuss Google Group](https://groups.google.com/forum/#!forum/amphtml-discuss)
-
-### Working groups
-
-Most of the day-to-day work in building AMP happens in AMP's [Working Groups (WGs)](https://github.com/ampproject/meta/tree/master/working-groups). Getting involved in a WG is a great way to contribute to AMP.
-
-Most working groups post approximately bi-weekly [Status Update GitHub issues](https://github.com/search?q=org%3Aampproject+label%3A%22Type%3A+Status+Update%22&type=Issues).
-
-### Weekly design reviews
-
-The community holds weekly engineering [design reviews](./contributing/design-reviews.md) via video conference. We encourage everyone in the community to participate in these discussions and to bring their designs for new features and significant bug fixes to these reviews.
diff --git a/Dockerfile b/Dockerfile
index 923878fd7a083..22182552a6862 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,16 +1,14 @@
-FROM node:12
+FROM node:14
 
 MAINTAINER Format team <innov-format@teads.tv>
 
-RUN yarn global add gulp-cli
-
 ADD . /var/www
 WORKDIR /var/www
 
-RUN yarn
+RUN npm i gulp
+RUN amp build
 
-RUN gulp build
 
 EXPOSE 8000
 
-CMD gulp serve --host=0.0.0.0
+CMD amp serve
diff --git a/GOVERNANCE.md b/GOVERNANCE.md
deleted file mode 100644
index 87eac8cfb3bef..0000000000000
--- a/GOVERNANCE.md
+++ /dev/null
@@ -1 +0,0 @@
-See https://github.com/ampproject/meta/blob/master/GOVERNANCE.md
diff --git a/METRICS.md b/METRICS.md
deleted file mode 100644
index 198a9296cc651..0000000000000
--- a/METRICS.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Project Metrics
-
-## Absolute Code Coverage
-
-Test coverage for the repository as computed by CodeCov
-
-![Absolute Code Coverage](https://amp-project-metrics.appspot.com/api/plot/AbsoluteCoverageMetric.png)
-
-## Presubmit Latency
-
-Average Travis build time over the last 90 days
-
-![Presubmit Latency](https://amp-project-metrics.appspot.com/api/plot/PresubmitLatencyMetric.png)
-
-## Cherrypick Issue Count
-
-Number of cherry-pick issues in the last 90 days
-
-![Cherrypick Issue Count](https://amp-project-metrics.appspot.com/api/plot/CherrypickIssueCountMetric.png)
-
-## Release Granularity
-
-Average commits per release over the last 90 days
-
-![Release Granularity](https://amp-project-metrics.appspot.com/api/plot/ReleaseGranularityMetric.png)
-
-## Travis Greenness
-
-Percentage of green Travis builds over the last 90 days
-
-![Travis Greenness](https://amp-project-metrics.appspot.com/api/plot/TravisGreennessMetric.png)
-
-## Travis Flakiness
-
-Percentage of flaky Travis builds over the last 90 days
-
-![Travis Flakiness](https://amp-project-metrics.appspot.com/api/plot/TravisFlakinessMetric.png)
diff --git a/OWNERS b/OWNERS
index 7d5ce46475c02..28362bb9c6c7a 100644
--- a/OWNERS
+++ b/OWNERS
@@ -1,14 +1,15 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
-  reviewerTeam: 'ampproject/reviewers-amphtml',
+  reviewerPool: ['ampproject/reviewers-amphtml', 'renovate-approve[bot]'],
   rules: [
     {
       owners: [
         {name: 'cramforce', requestReviews: false},
         {name: 'dvoytenko', requestReviews: false},
         {name: 'jridgewell', requestReviews: false},
+        {name: 'kristoferbaxter', requestReviews: false},
       ],
     },
     {
@@ -17,20 +18,30 @@
     },
     {
       pattern: '**/*.md',
-      owners: [{name: 'mrjoro'}, {name: 'ampproject/wg-outreach'}],
+      owners: [{name: '*'}],
     },
     {
-      pattern: '{.*,gulpfile.js}',
+      pattern: '{.*,amp.js}',
       owners: [{name: 'ampproject/wg-infra'}],
     },
     {
-      pattern: '{babel.config.js,package.json,yarn.lock}',
+      pattern: '{babel.config.js,package-scripts.js}',
       owners: [
         {name: 'ampproject/wg-infra'},
-        {name: 'ampproject/wg-runtime'},
         {name: 'ampproject/wg-performance'},
       ],
     },
+    {
+      pattern: '{package.json,package-lock.json}',
+      owners: [
+        {name: 'ampproject/wg-infra', requestReviews: false},
+        {name: 'ampproject/wg-performance', requestReviews: false},
+      ],
+    },
+    {
+      pattern: '**/package{,-lock}.json',
+      owners: [{name: 'renovate-bot'}],
+    },
     {
       pattern: '**/OWNERS',
       owners: [{name: 'mrjoro', requestReviews: false}],
diff --git a/README.md b/README.md
index 3bf2174029e40..e5d29ea34c5a3 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 # AMP ⚡
 
-[![Build Status](https://img.shields.io/travis/ampproject/amphtml/master.svg?logo=Travis%20CI&logoColor=white&style=flat-square 'Build Status')](https://travis-ci.org/ampproject/amphtml/builds)
+⚡⚡⚡
+
+[![Build Status](https://img.shields.io/circleci/build/github/ampproject/amphtml/main 'Build Status')](https://app.circleci.com/pipelines/github/ampproject/amphtml?branch=main)
 [![GitHub Release](https://img.shields.io/github/release/ampproject/amphtml.svg?logo=GitHub&style=flat-square 'GitHub Release')](https://github.com/ampproject/amphtml/releases/latest)
 [![Commits](https://img.shields.io/github/commit-activity/m/ampproject/amphtml.svg?logo=GitHub&style=flat-square 'Commits')](https://github.com/ampproject/amphtml/pulse/monthly)
 [![Badges](https://img.shields.io/badge/badges-16-brightgreen?logo=GitHub&style=flat-square)](#)
@@ -12,11 +14,8 @@ Metrics
 </summary>
 
 [![Absolute Code Coverage](https://img.shields.io/endpoint.svg?logo=Codecov&logoColor=white&style=flat-square&url=https%3A%2F%2Famp-project-metrics.appspot.com%2Fapi%2Fbadge%2FAbsoluteCoverageMetric 'Test coverage for the repository as computed by CodeCov')](https://codecov.io/gh/ampproject/amphtml/)
-[![Presubmit Latency](https://img.shields.io/endpoint.svg?logo=Travis%20CI&logoColor=white&style=flat-square&url=https%3A%2F%2Famp-project-metrics.appspot.com%2Fapi%2Fbadge%2FPresubmitLatencyMetric 'Average Travis build time over the last 90 days')](https://travis-ci.org/ampproject/amphtml/builds)
 [![Cherrypick Issue Count](https://img.shields.io/endpoint.svg?logo=GitHub&logoColor=white&style=flat-square&url=https%3A%2F%2Famp-project-metrics.appspot.com%2Fapi%2Fbadge%2FCherrypickIssueCountMetric 'Number of cherry-pick issues in the last 90 days')](https://github.com/ampproject/amphtml/issues?utf8=%E2%9C%93&q=is%3Aissue+title%3A+%22Cherry-pick%22)
 [![Release Granularity](https://img.shields.io/endpoint.svg?logo=GitHub&logoColor=white&style=flat-square&url=https%3A%2F%2Famp-project-metrics.appspot.com%2Fapi%2Fbadge%2FReleaseGranularityMetric 'Average commits per release over the last 90 days')](https://github.com/ampproject/amphtml/releases)
-[![Travis Greenness](https://img.shields.io/endpoint.svg?logo=Travis%20CI&logoColor=white&style=flat-square&url=https%3A%2F%2Famp-project-metrics.appspot.com%2Fapi%2Fbadge%2FTravisGreennessMetric 'Percentage of green Travis builds over the last 90 days')](https://travis-ci.org/ampproject/amphtml/builds)
-[![Travis Flakiness](https://img.shields.io/endpoint.svg?logo=Travis%20CI&logoColor=white&style=flat-square&url=https%3A%2F%2Famp-project-metrics.appspot.com%2Fapi%2Fbadge%2FTravisFlakinessMetric 'Percentage of flaky Travis builds over the last 90 days')](https://travis-ci.org/ampproject/amphtml/builds)
 
 </details>
 
@@ -40,31 +39,31 @@ AMP is an open source project, and we'd love your help making it better!
 
 ## Want to know more about AMP?
 
-- [amp.dev](https://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](https://amp.dev/documentation/guides-and-tutorials/)
-  - [examples](https://amp.dev/documentation/examples/)
-  - [reference docs](https://amp.dev/documentation/components/?format=websites)
-  - [example templates](https://amp.dev/documentation/templates/)
-  - [tools to make using AMP easier](https://amp.dev/documentation/tools)
+-   [amp.dev](https://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](https://amp.dev/documentation/guides-and-tutorials/)
+    -   [examples](https://amp.dev/documentation/examples/)
+    -   [reference docs](https://amp.dev/documentation/components/?format=websites)
+    -   [example templates](https://amp.dev/documentation/templates/)
+    -   [tools to make using AMP easier](https://amp.dev/documentation/tools)
 
 ## Having a problem using AMP?
 
-- The [amp.dev Support page](https://amp.dev/support/) has resources for getting help.
-- Use [Stack Overflow](http://stackoverflow.com/questions/tagged/amp-html) to ask questions about using AMP and find answers to questions others have asked.
-- [Let us know about bugs](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#report-a-bug), and [file feature requests](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#make-a-suggestion) to suggest improvements.
-- AMP accepts responsible security disclosures through the [Google Application Security program](https://www.google.com/about/appsecurity/).
+-   The [amp.dev Support page](https://amp.dev/support/) has resources for getting help.
+-   Use [Stack Overflow](http://stackoverflow.com/questions/tagged/amp-html) to ask questions about using AMP and find answers to questions others have asked.
+-   [Let us know about bugs](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#report-a-bug), and [file feature requests](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#make-a-suggestion) to suggest improvements.
+-   AMP accepts responsible security disclosures through the [Google Application Security program](https://www.google.com/about/appsecurity/).
 
 ## Want to help make AMP better?
 
-- [CONTRIBUTING.md](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md) has information on how you can help improve AMP, including [ongoing participation](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#ongoing-participation) through Slack, weekly design reviews, etc.
-- We strongly encourage [code contributions](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md)!
-- **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](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#get-started-with-open-source).
-- Consider joining one of AMP's [Working Groups](https://github.com/ampproject/meta/tree/master/working-groups), where most of the day-to-day work in AMP gets done.
+-   [docs/contributing.md](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md) has information on how you can help improve AMP, including [ongoing participation](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#ongoing-participation) through Slack, weekly design reviews, etc.
+-   We strongly encourage [code contributions](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md)!
+-   **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](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#get-started-with-open-source).
+-   Consider joining one of AMP's [Working Groups](https://github.com/ampproject/meta/tree/main/working-groups), where most of the day-to-day work in AMP gets done.
 
 ## Other useful information
 
-- [AMP's release documentation](contributing/release-schedule.md) provides details on how and when AMP releases new versions, including [how to know when a change is live in a release](https://github.com/ampproject/amphtml/blob/master/contributing/release-schedule.md#determining-if-your-change-is-in-a-release).
-- [AMP's roadmap](https://amp.dev/community/roadmap) provides details on some of the significant projects we are working on.
-- The [AMP meta repository](https://github.com/ampproject/meta) has information _about_ the AMP open source project, including AMP's [governance](https://github.com/ampproject/meta/blob/master/GOVERNANCE.md).
-- [AMP's code of conduct](https://github.com/ampproject/meta/blob/master/CODE_OF_CONDUCT.md) 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.
+-   [AMP's release documentation](docs/release-schedule.md) provides details on how and when AMP releases new versions, including [how to know when a change is live in a release](https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md#determining-if-your-change-is-in-a-release).
+-   [AMP's roadmap](https://amp.dev/community/roadmap) provides details on some of the significant projects we are working on.
+-   The [AMP meta repository](https://github.com/ampproject/meta) has information _about_ the AMP open source project, including AMP's [governance](https://github.com/ampproject/meta/blob/main/docs/governance.md).
+-   [AMP's code of conduct](https://github.com/ampproject/meta/blob/main/CODE_OF_CONDUCT.md) 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.
diff --git a/SUPPORT.md b/SUPPORT.md
deleted file mode 100644
index dc432985105ec..0000000000000
--- a/SUPPORT.md
+++ /dev/null
@@ -1,26 +0,0 @@
-<!-- DO NOT RENAME OR REMOVE THIS FILE - it's hosted here https://amp.dev/support/ -->
-
-# Getting Support
-
-There are many ways to get help for questions and issues related to AMP:
-
-**Need help with AMP?**
-
-If you are looking for help to get started using AMP on your site or you are having issues using AMP, consult these resources:
-
-- [Official documentation](https://amp.dev/documentation/guides-and-tutorials/) with guides and tutorials to help you learn about AMP.
-- [Hands-on samples and demos](https://amp.dev/documentation/examples/) for using AMP components.
-- [Pre-styled templates and components](https://amp.dev/documentation/templates/) that you can use to create styled AMP sites from scratch.
-- [AMP tools](https://amp.dev/documentation/tools) helping you get started with building AMP pages.
-- [AMP supported browsers](https://amp.dev/support/faq/supported-browsers) to learn which browsers support AMP.
-- [Stack Overflow](http://stackoverflow.com/questions/tagged/amp-html) is our recommended way to find answers to questions about AMP; since members of the AMP Project community regularly monitor Stack Overflow you will probably receive the fastest response to your questions there.
-- For AMP on Google Search questions or issues, please use [Google's AMP forum](https://goo.gl/utQ1KZ).
-- To check the status of AMP serving and its related services, see the [AMP Status](https://status.ampproject.org/) page.
-
-**Found a bug? Suggest a feature?**
-
-If you encounter a bug in AMP or have a feature request for AMP, see [Reporting issues with AMP](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#reporting-issues-with-amp) for information on filing an issue or requesting features.
-
-**Contributing to AMP?**
-
-[Contributing to AMP HTML](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#ongoing-participation) is a great place to find out how you can make contributions to the AMP open source project and how you can get help if you run into questions when contributing to AMP.
diff --git a/ads/1wo.js b/ads/1wo.js
deleted file mode 100644
index 754569f2012bb..0000000000000
--- a/ads/1wo.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function _1wo(global, data) {
-  validateData(data, ['src', 'owoType', 'owoCode', 'owoMode']);
-  const {src} = data;
-  createContainer(global, data);
-  loadScript(global, src);
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-function createContainer(global, data) {
-  const d = global.document.createElement('div');
-  d.setAttribute('data-owo-type', data['owoType']);
-  d.setAttribute('data-owo-code', data['owoCode']);
-  d.setAttribute('data-owo-mode', data['owoMode']);
-  global.document.getElementById('c').appendChild(d);
-}
diff --git a/ads/24smi.js b/ads/24smi.js
deleted file mode 100644
index 6e5d5dbc65842..0000000000000
--- a/ads/24smi.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData, validateSrcPrefix} from '../3p/3p';
-
-const jsnPrefix = 'https://jsn.24smi.net/';
-const smiJs = `${jsnPrefix}smi.js`;
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function _24smi(global, data) {
-  validateData(data, [['blockid', 'src']]);
-  const {src} = data;
-  let blockId = data['blockid'];
-
-  if (!blockId) {
-    validateSrcPrefix(jsnPrefix, src);
-    blockId = getBlockId(src);
-  }
-
-  const element = createContainer(global);
-  (global.smiq = global.smiq || []).push({
-    element,
-    blockId,
-  });
-  loadScript(global, smiJs);
-}
-
-/**
- * @param {!Window} global
- * @return {Element}
- */
-function createContainer(global) {
-  const d = global.document.createElement('div');
-  global.document.getElementById('c').appendChild(d);
-  return d;
-}
-
-/**
- * @param {string} src
- * @return {string}
- */
-function getBlockId(src) {
-  const parts = src.split('/');
-  return parts[parts.length - 1].split('.')[0];
-}
diff --git a/ads/OWNERS b/ads/OWNERS
index 94b65ebe76929..1b8c3b93f6d99 100644
--- a/ads/OWNERS
+++ b/ads/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/ads/README.md b/ads/README.md
index 9e443f7c0f6c6..e6597dd4c67f8 100644
--- a/ads/README.md
+++ b/ads/README.md
@@ -4,24 +4,35 @@ This guide provides details for ad networks to create an `amp-ad` integration fo
 
 **Table of contents**
 
-- [Overview](#overview)
-- [Constraints](#constraints)
-- [The iframe sandbox](#the-iframe-sandbox)
-  - [Available information](#available-information)
-  - [Available APIs](#available-apis)
-  - [Exceptions to available APIs and information](#exceptions-to-available-apis-and-information)
-  - [Ad viewability](#ad-viewability)
-  - [Ad resizing](#ad-resizing)
-  - [Support for multi-size ad requests](#support-for-multi-size-ad-requests)
-  - [Optimizing ad performance](#optimizing-ad-performance)
-  - [Ad markup](#ad-markup)
-  - [1st party cookies](#1st-party-cookies)
-- [Developer guidelines for a pull request](#developer-guidelines-for-a-pull-request)
-  - [Files to change](#files-to-change)
-  - [Verify your examples](#verify-your-examples)
-  - [Tests](#tests)
-  - [Other tips](#other-tips)
-- [Developer announcements for ads related API changes ](#developer-announcements-for-ads-related-API-changes)
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+<!-- {"maxdepth": 2} -->
+
+-   [Overview](#overview)
+-   [Constraints](#constraints)
+-   [The iframe sandbox](#the-iframe-sandbox)
+    -   [Available information to the ad](#available-information-to-the-ad)
+    -   [Available APIs](#available-apis)
+    -   [Exceptions to available APIs and information](#exceptions-to-available-apis-and-information)
+    -   [Ad viewability](#ad-viewability)
+    -   [Ad resizing](#ad-resizing)
+    -   [Support for multi-size ad requests](#support-for-multi-size-ad-requests)
+    -   [amp-consent integration](#amp-consent-integration)
+    -   [Optimizing ad performance](#optimizing-ad-performance)
+    -   [Ad markup](#ad-markup)
+    -   [1st party cookies](#1st-party-cookies)
+-   [Developer guidelines for a pull request](#developer-guidelines-for-a-pull-request)
+    -   [Files to change](#files-to-change)
+    -   [Verify your examples](#verify-your-examples)
+    -   [Tests](#tests)
+    -   [Lint and type-check](#lint-and-type-check)
+    -   [Other tips](#other-tips)
+-   [Developer announcements for ads related API changes](#developer-announcements-for-ads-related-api-changes)
 
 ## Overview
 
@@ -33,15 +44,15 @@ If you are an ad technology provider looking to integrate with AMP HTML, please
 
 Below is a summary of constraints placed on external resources, such as ads in AMP HTML:
 
-- Because AMP pages are served on HTTPS and ads cannot be proxied, ads must be served over HTTPS.
-- The size of an ad unit must be static. It must be knowable without fetching the ad and it cannot change at runtime except through [iframe resizing](#ad-resizing).
-- If placing the ad requires running JavaScript (assumed to be true for 100% of ads served through networks), the ad must be placed on an origin different from the AMP document itself. Reasons include:
-  - Improved security.
-  - Takes synchronous HTTP requests made by the ad out of the critical rendering path of the primary page.
-  - Allows browsers to run the ad in a different process from the primary page (even better security and prevents JS inside the ad to block the main page UI thread).
-  - Prevents ads doing less than optimal things to measure user behavior and other interference with the primary page.
-- The AMP Runtime may at any moment decide that there are too many iframes on a page and that memory is low. In that case, the AMP Runtime unloads ads that were previously loaded and are no longer visible. It may later load new ads in the same slot if the user scrolls them back into view.
-- The AMP Runtime may decide to set an ad that is currently not visible to `display: none` to reduce browser layout and compositing cost.
+-   Because AMP pages are served on HTTPS and ads cannot be proxied, ads must be served over HTTPS.
+-   The size of an ad unit must be static. It must be knowable without fetching the ad and it cannot change at runtime except through [iframe resizing](#ad-resizing).
+-   If placing the ad requires running JavaScript (assumed to be true for 100% of ads served through networks), the ad must be placed on an origin different from the AMP document itself. Reasons include:
+    -   Improved security.
+    -   Takes synchronous HTTP requests made by the ad out of the critical rendering path of the primary page.
+    -   Allows browsers to run the ad in a different process from the primary page (even better security and prevents JS inside the ad to block the main page UI thread).
+    -   Prevents ads doing less than optimal things to measure user behavior and other interference with the primary page.
+-   The AMP Runtime may at any moment decide that there are too many iframes on a page and that memory is low. In that case, the AMP Runtime unloads ads that were previously loaded and are no longer visible. It may later load new ads in the same slot if the user scrolls them back into view.
+-   The AMP Runtime may decide to set an ad that is currently not visible to `display: none` to reduce browser layout and compositing cost.
 
 ## The iframe sandbox
 
@@ -78,7 +89,7 @@ The AMP runtime provides the following information to the ad:
     </ul>
   </dd>
   <dt><code>window.context.sourceUrl</code></dt>
-  <dd>Contains the source URL of the original AMP document. See details <a href="../spec/amp-var-substitutions.md#source-url">here</a></code>.</dd>
+  <dd>Contains the source URL of the original AMP document. See details <a href="../docs/spec/amp-var-substitutions.md#source-url">here</a></code>.</dd>
   <dt><code>window.context.startTime</code></dt>
   <dd>Contains the time at which processing of the amp-ad element started.</dd>
 </dl>
@@ -106,7 +117,7 @@ Depending on the ad server / provider, some methods of rendering ads involve a s
 
 #### Position in viewport
 
-Ads can call the special `window.context.observeIntersection(changesCallback)`API to receive IntersectionObserver style [change records](https://github.com/w3c/IntersectionObserver/blob/master/explainer.md) of the ad's intersection with the parent viewport.
+Ads can call the special `window.context.observeIntersection(changesCallback)`API to receive IntersectionObserver style [change records](https://github.com/w3c/IntersectionObserver/blob/main/explainer.md) of the ad's intersection with the parent viewport.
 
 The API allows you to specify a callback that fires with change records when AMP observes that an ad becomes visible and then while it is visible, changes are reported as they happen.
 
@@ -162,38 +173,33 @@ Once the request is processed the AMP runtime will try to accommodate this reque
 possible, but it will take into account where the reader is currently reading, whether the scrolling
 is ongoing and any other UX or performance factors.
 
-Ads can observe whether resize request were successful using the `window.context.onResizeSuccess` and `window.context.onResizeDenied` methods.
+The API will return a promise and the ads can observe whether resize request were successful by checking whether that promise resolves or rejects. `window.context.onResizeSuccess` and `window.context.onResizeDenied` methods are to be deprecated.
 
 The `opt_hasOverflow` is an optional boolean value, ads can specify `opt_hasOverflow` to `true` to let AMP runtime know that the ad context can handle overflow when attempt to resize is denied, and not to throw warning in such cases.
 
 _Example:_
 
 ```javascript
-var unlisten = window.context.onResizeSuccess(function (
-  requestedHeight,
-  requestedWidth
-) {
-  // Hide any overflow elements that were shown.
-  // The requestedHeight and requestedWidth arguments may be used to
-  // check which size change the request corresponds to.
-});
-
-var unlisten = window.context.onResizeDenied(function (
-  requestedHeight,
-  requestedWidth
-) {
-  // Show the overflow element and send a window.context.requestResize(width, height)
-  // when the overflow element is clicked.
-  // You may use the requestedHeight and requestedWidth to check which
-  // size change the request corresponds to.
-});
+window.context
+  .requestResize(requestedWidth, requestedHeight)
+  .then(function () {
+    // Hide any overflow elements that were shown.
+    // The requestedHeight and requestedWidth arguments may be used to
+    // check which size change the request corresponds to.
+  })
+  .catch(function () {
+    // Show the overflow element and send a window.context.requestResize(width, height)
+    // when the overflow element is clicked.
+    // You may use the requestedHeight and requestedWidth to check which
+    // size change the request corresponds to.
+  });
 ```
 
 Here are some factors that affect whether the resize will be executed:
 
-- Whether the resize is triggered by the user action;
-- Whether the resize is requested for a currently active ad;
-- Whether the resize is requested for an ad below the viewport or above the viewport.
+-   Whether the resize is triggered by the user action;
+-   Whether the resize is requested for a currently active ad;
+-   Whether the resize is requested for an ad below the viewport or above the viewport.
 
 #### Specifying an overflow element
 
@@ -227,7 +233,7 @@ Note that if the creative needs to resize on user interaction, the creative can
 
 ### amp-consent integration
 
-If [amp-consent](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md) extension is used on the page, `data-block-on-consent` attribute
+If [amp-consent](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md) extension is used on the page, `data-block-on-consent` attribute
 can be added to `amp-ad` element to respect the corresponding `amp-consent` policy.
 In that case, the `amp-ad` element will be blocked from loading until the consent accepted.
 Individual ad network can override this default consent handling by putting a `consentHandlingOverride: true` in `ads/_config.js`.
@@ -239,8 +245,8 @@ AMP runtime provides the following `window.context` APIs for ad network to acces
   <dt><code>window.context.initialConsentState</code></dt>
   <dd>
     Provides the initial consent state when the ad is unblocked.
-    The states are integers defined <a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/customizing-extension-behaviors-on-consent.md#advanced-blocking-behaviors">here</a>
-    (<a href="https://github.com/ampproject/amphtml/blob/master/src/consent-state.js#L23">code</a>).
+    The states are integers defined <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/customizing-extension-behaviors-on-consent.md#advanced-blocking-behaviors">here</a>
+    (<a href="https://github.com/ampproject/amphtml/blob/main/src/core/constants/consent-state.js#L23">code</a>).
   </dd>
   <dt><code>window.context.getConsentState(callback)</code></dt>
   <dd>
@@ -250,12 +256,22 @@ AMP runtime provides the following `window.context` APIs for ad network to acces
   <dt><code>window.context.consentSharedData</code></dt>
   <dd>
     Provides additional user privacy related data retrieved from publishers.
-    See <a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md#response">here</a> for details.
+    See <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md#response">here</a> for details.
+  </dd>
+  <dt><code>window.context.initialConsentState</code></dt>
+  <dd>
+    Provides the initial consent string when the ad is unblocked.
+    See <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/customizing-extension-behaviors-on-consent.md#on-consent-string">here</a> for details.
+  </dd>
+  <dt><code>window.context.initialConsentMetadata</code></dt>
+  <dd>
+    Provides initial consent metadata when the ad is unblocked.
+    See <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/customizing-extension-behaviors-on-consent.md#on-consent-metadata">here</a> for details.
   </dd>
 </dl>
 
 After overriding the default consent handling behavior, don't forget to update your publisher facing
-documentation with the new behaviors on user's consent choices. You can refer to our documentation example [here](https://github.com/ampproject/amphtml/blob/master/ads/_ping_.md#user-consent-integration).
+documentation with the new behaviors on user's consent choices. You can refer to our documentation example [here](https://github.com/ampproject/amphtml/blob/main/ads/vendors/_ping_.md#user-consent-integration).
 
 ### Optimizing ad performance
 
@@ -263,7 +279,7 @@ documentation with the new behaviors on user's consent choices. You can refer to
 
 To allow ads to bundle HTTP requests across multiple ad units on the same page the object `window.context.master` will contain the window object of the iframe being elected master iframe for the current page. The `window.context.isMaster` property is `true` when the current frame is the master frame.
 
-The `computeInMasterFrame` function is designed to make it easy to perform a task only in the master frame and provide the result to all frames. It is also available to custom ad iframes as `window.context.computeInMasterFrame`. See [3p.js](https://github.com/ampproject/amphtml/blob/master/3p/3p.js) for function signature.
+The `computeInMasterFrame` function is designed to make it easy to perform a task only in the master frame and provide the result to all frames. It is also available to custom ad iframes as `window.context.computeInMasterFrame`. See [3p.js](https://github.com/ampproject/amphtml/blob/main/3p/3p.js) for function signature.
 
 #### Preconnect and prefetch
 
@@ -273,7 +289,7 @@ This triggers prefetch/preconnect when the ad is first seen, so that loads are f
 
 ### Ad markup
 
-Ads are loaded using the `<amp-ad>` tag containing the specified `type` for the ad netowkr, and name value pairs of configuration.
+Ads are loaded using the `<amp-ad>` tag containing the specified `type` for the ad network, and name value pairs of configuration.
 
 This is an example for the A9 network:
 
@@ -307,7 +323,7 @@ For ad networks that support loading via a single script tag, this form is suppo
 </amp-ad>
 ```
 
-Note, that the network still needs to be white-listed and provide a prefix to valid URLs. AMP may add similar support for ad networks that support loading via an iframe tag.
+Note, that the network still needs to be allow-listed and provide a prefix to valid URLs. AMP may add similar support for ad networks that support loading via an iframe tag.
 
 Technically, the `<amp-ad>` tag loads an iframe to a generic bootstrap URL that knows how to render the ad given the parameters to the tag.
 
@@ -319,24 +335,24 @@ If the publisher would like to add custom JavaScript in the `remote.html` file t
 
 ## Developer guidelines for a pull request
 
-Please read through [DEVELOPING.md](../contributing/DEVELOPING.md) before contributing to this code repository.
+Please read through [developing.md](../docs/developing.md) before contributing to this code repository.
 
 ### Files to change
 
 If you're adding support for a new third-party ad service, changes to the following files are expected:
 
-- `/ads/yournetwork.js`: Implement the main logic here. This is the code that's invoked in the third-party iframe once loaded.
-- `/ads/yournetwork.md`: Documentation detailing yourr ad service for publishers to read.
-- `/ads/_config.js`: Add service specific configuration here.
-- `/3p/integration.js`: Register your service here.
-- `/extensions/amp-ad/amp-ad.md`: Add a link that points to your publisher doc.
-- `/examples/ads.amp.html`: Add publisher examples here. Since a real ad isn't guaranteed to fill, a consistently displayed fake ad is highly recommended here to help AMP developers confidently identify new bugs.
+-   `/ads/yournetwork.js`: Implement the main logic here. This is the code that's invoked in the third-party iframe once loaded.
+-   `/ads/yournetwork.md`: Documentation detailing yourr ad service for publishers to read.
+-   `/ads/_config.js`: Add service specific configuration here.
+-   `/3p/integration.js`: Register your service here.
+-   `/extensions/amp-ad/amp-ad.md`: Add a link that points to your publisher doc.
+-   `/examples/ads.amp.html`: Add publisher examples here. Since a real ad isn't guaranteed to fill, a consistently displayed fake ad is highly recommended here to help AMP developers confidently identify new bugs.
 
 ### Verify your examples
 
 To verify the examples that you have put in `/examples/ads.amp.html`:
 
-1. Start a local gulp web server by running command `gulp`.
+1. Start a local amp web server by running command `amp`.
 2. Visit `http://localhost:8000/examples/ads.amp.html?type=yournetwork` in your browser to make sure the examples load ads.
 
 Please consider having the example consistently load a fake ad (with ad targeting disabled). Not only will it be a more confident example for publishers to follow, but also allows the AMP team to catch any regression bug during AMP releases.
@@ -350,23 +366,23 @@ Please verify your ad is fully functioning, for example, by clicking on an ad. W
 Please make sure your changes pass the tests:
 
 ```sh
-gulp unit --watch --nobuild --files=test/unit/{test-ads-config.js,test-integration.js}
+amp unit --watch --nobuild --files=test/unit/{test-ads-config.js,test-integration.js}
 ```
 
 If you have non-trivial logic in `/ads/yournetwork.js`, adding a unit test at `/test/unit/ads/test-yournetwork.js` is highly recommended.
 
 ### Lint and type-check
 
-To speed up the review process, please run `gulp lint` and `gulp check-types`, then fix errors, if any, before sending out the PR.
+To speed up the review process, please run `amp lint` and `amp check-types`, then fix errors, if any, before sending out the PR.
 
 ### Other tips
 
-- Add **cc ampproject/wg-ads** in all pull request's descriptions.
-- It's highly recommended to maintain [an integration test outside AMP repo](../3p/README.md#adding-proper-integration-tests).
-- Please consider implementing the `render-start` and `no-content-available` APIs (see [Available APIs](#available-apis)), which helps AMP to provide user a much better ad loading experience.
-- [CLA](../CONTRIBUTING.md#contributing-code): for anyone who has trouble to pass the automatic CLA check in a pull request, try to follow the guidelines provided by the CLA Bot. Common mistakes are:
-  1. Using a different email address in the git commit.
-  2. Not providing the exact company name in the PR thread.
+-   Add **cc ampproject/wg-monetization** in all pull request's descriptions.
+-   It's highly recommended to maintain [an integration test outside AMP repo](../3p/README.md#adding-proper-integration-tests).
+-   Please consider implementing the `render-start` and `no-content-available` APIs (see [Available APIs](#available-apis)), which helps AMP to provide user a much better ad loading experience.
+-   [CLA](../docs/contributing.md#contributing-code): for anyone who has trouble to pass the automatic CLA check in a pull request, try to follow the guidelines provided by the CLA Bot. Common mistakes are:
+    1. Using a different email address in the git commit.
+    2. Not providing the exact company name in the PR thread.
 
 ## Developer announcements for ads related API changes
 
diff --git a/ads/_a4a-config.js b/ads/_a4a-config.js
index 6622b3ff7397f..75d47cbff9383 100644
--- a/ads/_a4a-config.js
+++ b/ads/_a4a-config.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {map} from '../src/utils/object';
+import {map} from '../src/core/types/object';
 
 /**
  * Registry for A4A (AMP Ads for AMPHTML pages) "is supported" predicates.
@@ -42,6 +42,8 @@ export function getA4ARegistry() {
       'adzerk': () => true,
       'doubleclick': () => true,
       'fake': () => true,
+      'nws': () => true,
+      'valueimpression': () => true,
       // TODO: Add new ad network implementation "is enabled" functions here.
       // Note: if you add a function here that requires a new "import", above,
       // you'll probably also need to add an exception to
diff --git a/ads/_config.js b/ads/_config.js
index cf6052c5ec69a..33cd80589c242 100755
--- a/ads/_config.js
+++ b/ads/_config.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {jsonConfiguration} from '../src/json';
+import {jsonConfiguration} from '../src/core/types/object/json';
 
 /**
  * @typedef {{
@@ -24,7 +24,6 @@ import {jsonConfiguration} from '../src/json';
  *   clientIdScope: (string|undefined),
  *   clientIdCookieName: (string|undefined),
  *   consentHandlingOverride: (boolean|undefined),
- *   remoteHTMLDisabled: (boolean|undefined),
  *   fullWidthHeightRatio: (number|undefined),
  * }}
  */
@@ -150,6 +149,11 @@ const adConfig = jsonConfiguration({
     preconnect: ['https://inv-nets.admixer.net', 'https://cdn.admixer.net'],
   },
 
+  'adnuntius': {
+    prefetch: 'https://cdn.adnuntius.com/adn.js',
+    renderStartImplemented: true,
+  },
+
   'adocean': {
     consentHandlingOverride: true,
   },
@@ -170,6 +174,11 @@ const adConfig = jsonConfiguration({
     clientIdScope: 'AMP_ECID_ADPON',
   },
 
+  'adpushup': {
+    prefetch: 'https://securepubads.g.doubleclick.net/tag/js/gpt.js',
+    preconnect: 'https://cdn.adpushup.com',
+  },
+
   'adreactor': {},
 
   'adsensor': {
@@ -210,6 +219,11 @@ const adConfig = jsonConfiguration({
     preconnect: ['https://mads.at.atwola.com', 'https://aka-cdn.adtechus.com'],
   },
 
+  'adtelligent': {
+    preconnect: ['https://s.adtelligent.com'],
+    renderStartImplemented: true,
+  },
+
   'adthrive': {
     prefetch: ['https://www.googletagservices.com/tag/js/gpt.js'],
     preconnect: [
@@ -227,8 +241,13 @@ const adConfig = jsonConfiguration({
 
   'aduptech': {
     prefetch: 'https://s.d.adup-tech.com/jsapi',
-    preconnect: ['https://d.adup-tech.com', 'https://m.adup-tech.com'],
+    preconnect: [
+      'https://d.adup-tech.com',
+      'https://m.adup-tech.com',
+      'https://v.adup-tech.com',
+    ],
     renderStartImplemented: true,
+    consentHandlingOverride: true,
   },
 
   'adventive': {
@@ -344,6 +363,7 @@ const adConfig = jsonConfiguration({
 
   'broadstreetads': {
     prefetch: 'https://cdn.broadstreetads.com/init-2.min.js',
+    renderStartImplemented: true,
   },
 
   'byplay': {},
@@ -403,6 +423,10 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'digiteka': {
+    renderStartImplemented: true,
+  },
+
   'directadvert': {
     renderStartImplemented: true,
   },
@@ -432,11 +456,6 @@ const adConfig = jsonConfiguration({
     ],
   },
 
-  'eas': {
-    prefetch: 'https://amp.emediate.eu/amp.v0.js',
-    renderStartImplemented: true,
-  },
-
   'empower': {
     prefetch: 'https://cdn.empower.net/sdk/amp-ad.min.js',
     renderStartImplemented: true,
@@ -470,17 +489,39 @@ const adConfig = jsonConfiguration({
 
   'fake': {},
 
+  'fake-delayed': {
+    renderStartImplemented: true,
+  },
+
+  'feedad': {
+    clientIdScope: '__fa_amp',
+    prefetch: 'https://web.feedad.com/sdk/feedad-async.js',
+    renderStartImplemented: true,
+    fullWidthHeightRatio: 16 / 9,
+    consentHandlingOverride: true,
+  },
+
   'felmat': {
     prefetch: 'https://t.felmat.net/js/fmamp.js',
     renderStartImplemented: true,
   },
 
+  'finative': {},
+
+  'firstimpression': {
+    prefetch: 'https://ecdn.firstimpression.io/static/js/fiamp.js',
+    preconnect: 'https://cdn.firstimpression.io',
+    renderStartImplemented: true,
+    consentHandlingOverride: true,
+  },
+
   'flite': {},
 
   'fluct': {
+    prefetch: ['https://pdn.adingo.jp/p.js'],
     preconnect: [
       'https://cdn-fluct.sh.adingo.jp',
-      'https://s.sh.adingo.jp',
+      'https://sh.adingo.jp',
       'https://i.adingo.jp',
     ],
   },
@@ -506,6 +547,10 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'glomex': {
+    prefetch: 'https://player.glomex.com/integration/1/amp-embed.js',
+  },
+
   'gmossp': {
     prefetch: 'https://cdn.gmossp-sp.jp/ads/amp.js',
   },
@@ -591,6 +636,8 @@ const adConfig = jsonConfiguration({
 
   'kargo': {},
 
+  'ketshwa': {},
+
   'kiosked': {
     renderStartImplemented: true,
   },
@@ -635,6 +682,14 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'luckyads': {
+    renderStartImplemented: true,
+  },
+
+  'macaw': {
+    renderStartImplemented: true,
+  },
+
   'mads': {
     prefetch: 'https://eu2.madsone.com/js/tags.js',
   },
@@ -649,8 +704,20 @@ const adConfig = jsonConfiguration({
   },
 
   'marfeel': {
-    prefetch: 'https://www.googletagservices.com/tag/js/gpt.js',
-    preconnect: 'https://live.mrf.io',
+    prefetch: 'https://securepubads.g.doubleclick.net/tag/js/gpt.js',
+    preconnect: [
+      'https://live.mrf.io',
+      'https://tpc.googlesyndication.com',
+      'https://fastlane.rubiconproject.com',
+      'https://htlb.casalemedia.com',
+      'https://prg.smartadserver.com',
+      'https://ib.adnxs.com',
+      'https://bidder.criteo.com',
+      'https://marfeel-d.openx.net',
+      'https://ice.360yield.com',
+      'https://mbid.marfeelrev.com',
+      'https://adservice.google.com',
+    ],
     consentHandlingOverride: true,
   },
 
@@ -733,6 +800,20 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'myfinance': {
+    preconnect: [
+      'https://a.myfidevs.io',
+      'https://static.myfinance.com',
+      'https://www.myfinance.com',
+    ],
+    renderStartImplemented: true,
+    clientIdScope: 'AMP_ECID_GOOGLE',
+  },
+
+  'myoffrz': {
+    renderStartImplemented: true,
+  },
+
   'mytarget': {
     prefetch: 'https://ad.mail.ru/static/ads-async.js',
     renderStartImplemented: true,
@@ -782,7 +863,9 @@ const adConfig = jsonConfiguration({
 
   'nws': {},
 
-  'oblivki': {},
+  'oblivki': {
+    renderStartImplemented: true,
+  },
 
   'onead': {
     prefetch: 'https://ad-specs.guoshipartners.com/static/js/onead-amp.min.js',
@@ -820,6 +903,11 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'playstream': {
+    prefetch: 'https://app.playstream.media/js/amp.js',
+    renderStartImplemented: true,
+  },
+
   'plista': {},
 
   'polymorphicads': {
@@ -868,6 +956,11 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'pulse': {
+    prefetch: 'https://static.pulse.mail.ru/pulse-widget-amp.js',
+    renderStartImplemented: true,
+  },
+
   'pulsepoint': {
     prefetch: 'https://ads.contextweb.com/TagPublish/getjs.static.js',
     preconnect: 'https://tag.contextweb.com',
@@ -893,6 +986,11 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'rcmwidget': {
+    prefetch: 'https://rcmjs.rambler.ru/static/rcmw/rcmw-amp.js',
+    renderStartImplemented: true,
+  },
+
   'readmo': {
     renderStartImplemented: true,
   },
@@ -905,6 +1003,11 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'recreativ': {
+    prefetch: 'https://go.rcvlink.com/static/amp.js',
+    renderStartImplemented: true,
+  },
+
   'relap': {
     renderStartImplemented: true,
   },
@@ -915,6 +1018,11 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'remixd': {
+    preconnect: 'https://tags.remixd.com',
+    renderStartImplemented: true,
+  },
+
   'revcontent': {
     prefetch:
       'https://labs-cdn.revcontent.com/build/amphtml/revcontent.amp.min.js',
@@ -986,6 +1094,10 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'smartads': {
+    prefetch: 'https://smart-ads.biz/amp.js',
+  },
+
   'smartadserver': {
     prefetch: 'https://ec-ns.sascdn.com/diff/js/amp.v0.js',
     preconnect: 'https://static.sascdn.com',
@@ -1024,6 +1136,10 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'sona': {
+    renderStartImplemented: true,
+  },
+
   'sovrn': {
     prefetch: 'https://ap.lijit.com/www/sovrn_amp/sovrn_ads.js',
   },
@@ -1038,7 +1154,6 @@ const adConfig = jsonConfiguration({
   },
 
   'springAds': {
-    prefetch: 'https://www.asadcdn.com/adlib/adlib_seq.js',
     preconnect: ['https://ib.adnxs.com'],
     renderStartImplemented: true,
   },
@@ -1145,6 +1260,12 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'verizonmedia': {
+    prefetch: 'https://jac.yahoosandbox.com/amp/jac.js',
+    preconnect: ['https://jill.fc.yahoo.com'],
+    renderStartImplemented: true,
+  },
+
   'videointelligence': {
     preconnect: 'https://s.vi-serve.com',
     renderStartImplemented: true,
@@ -1158,6 +1279,10 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'vlyby': {
+    prefetch: 'https://cdn.vlyby.com/amp/qad/qad-outer2.js',
+  },
+
   'vmfive': {
     prefetch: 'https://man.vm5apis.com/dist/adn-web-sdk.js',
     preconnect: ['https://vawpro.vm5apis.com', 'https://vahfront.vm5apis.com'],
@@ -1220,7 +1345,22 @@ const adConfig = jsonConfiguration({
   },
 
   'yandex': {
-    prefetch: 'https://yastatic.net/partner-code/loaders/context_amp.js',
+    prefetch: 'https://an.yandex.ru/system/context_amp.js',
+    renderStartImplemented: true,
+  },
+
+  'yektanet': {
+    preconnect: [
+      'https://cdn.yektanet.com',
+      'https://cg-sc.yektanet.com',
+      'https://native.yektanet.com',
+      'https://nfetch.yektanet.net',
+      'https://rfetch.yektanet.net',
+      'https://scrapper.yektanet.com',
+      'https://ua.yektanet.com',
+      'https://bfetch.yektanet.com',
+      'https://mostatil.cdn.yektanet.com',
+    ],
     renderStartImplemented: true,
   },
 
diff --git a/ads/_integration-guide.md b/ads/_integration-guide.md
index a58a9031e0fd2..37fcf48ebbc92 100644
--- a/ads/_integration-guide.md
+++ b/ads/_integration-guide.md
@@ -1,7 +1,7 @@
 # Guidelines for Integrating with AMP
 
 If you are an ad technology provider looking to integrate with AMP HTML, please see the guidelines below.
-To ensure minimum latency and quality, please follow the instructions listed [here](../3p/README.md#ads) before submitting a pull request to the AMP open-source project. For general guidance on how to get started with contributing to AMP, please see [CONTRIBUTING.md](../CONTRIBUTING.md).
+To ensure minimum latency and quality, please follow the instructions listed [here](../3p/README.md#ads) before submitting a pull request to the AMP open-source project. For general guidance on how to get started with contributing to AMP, please see [docs/contributing.md](../docs/contributing.md).
 
 ## Ad Server
 
@@ -27,7 +27,7 @@ For example : Amazon A9 server can be invoked by using following syntax:
 
 Note that each of the attributes that follow `type` are dependent on the parameters that the Amazon’s A9 server expects in order to deliver an ad. The [a9.js](./a9.js) file shows you how the parameters are mapped to making a JavaScript call which invokes the A9 server via the `https://c.amazon-adsystem.com/aax2/assoc.js` URL. The corresponding parameters passed by the AMP ad tag are appended to the URL to return an ad.
 
-For details on how to integrate your ad network with AMP, see [Integrating ad networks into AMP](https://github.com/ampproject/amphtml/blob/master/ads/README.md).
+For details on how to integrate your ad network with AMP, see [Integrating ad networks into AMP](https://github.com/ampproject/amphtml/blob/main/ads/README.md).
 
 ## Supply Side Platform (SSP) or an Ad Exchange
 
@@ -51,7 +51,7 @@ Some ad formats are not fully supported at the moment and we recommend testing t
 _Examples : Brightcove, Ooyala_
 
 A video player that works in regular HTML pages will not work in AMP and therefore a specific tag must be created that allows the AMP Runtime to load your player.
-Brightcove has created a custom [amp-brightcove](https://github.com/ampproject/amphtml/blob/master/extensions/amp-brightcove/amp-brightcove.md) tag that allows media and ads to be played in AMP pages.
+Brightcove has created a custom [amp-brightcove](https://github.com/ampproject/amphtml/blob/main/extensions/amp-brightcove/amp-brightcove.md) tag that allows media and ads to be played in AMP pages.
 
 A Brightcove player can be invoked by the following:
 
@@ -75,8 +75,8 @@ _Examples : Tremor, Brightroll_
 
 If you are a video ad network, please work with your publisher to ensure that:
 
-- All video assets are served over HTTPS
-- The publisher’s video player has AMP support
+-   All video assets are served over HTTPS
+-   The publisher’s video player has AMP support
 
 ## Data Management Platform (DMP)
 
@@ -94,10 +94,10 @@ Viewability providers typically integrate with publishers via the ad server’s
 
 For e.g. for MOAT, make sure `http://js.moatads.com` is switched to `https://z.moatads.com`
 
-Also, see the approach to using the [intersection observer pattern](https://github.com/ampproject/amphtml/blob/master/ads/README.md#ad-viewability).
+Also, see the approach to using the [intersection observer pattern](https://github.com/ampproject/amphtml/blob/main/ads/README.md#ad-viewability).
 
 ## Content-Recommendation Platform
 
 _Examples : Taboola, Outbrain_
 
-Useful if you have some piece of JavaScript embeded on the publisher website today but the approach will not work in AMP pages. If you would like to recommend content on an AMP page, we suggest that you use the [`amp-embed` extension](https://amp.dev/documentation/components/amp-ad) to request the content details. Please see the [Taboola](https://github.com/ampproject/amphtml/blob/master/ads/taboola.md) example.
+Useful if you have some piece of JavaScript embeded on the publisher website today but the approach will not work in AMP pages. If you would like to recommend content on an AMP page, we suggest that you use the [`amp-embed` extension](https://amp.dev/documentation/components/amp-ad) to request the content details. Please see the [Taboola](https://github.com/ampproject/amphtml/blob/main/ads/taboola.md) example.
diff --git a/ads/_ping_.js b/ads/_ping_.js
deleted file mode 100644
index d48b2e475694e..0000000000000
--- a/ads/_ping_.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {dev, devAssert, userAssert} from '../src/log';
-import {validateData} from '../3p/3p';
-
-/**
- * A fake ad network integration that is mainly used for testing
- * and demo purposes. This implementation gets stripped out in compiled
- * production code.
- * @param {!Window} global
- * @param {!Object} data
- */
-export function _ping_(global, data) {
-  // for testing only. see #10628
-  global.networkIntegrationDataParamForTesting = data;
-
-  validateData(data, ['url'], ['valid', 'adHeight', 'adWidth', 'enableIo']);
-  userAssert(!data['error'], 'Fake user error!');
-  global.document.getElementById('c').textContent = data.ping;
-  global.ping = Object.create(null);
-
-  global.context.onResizeSuccess(() => {
-    global.ping.resizeSuccess = true;
-  });
-
-  global.context.onResizeDenied(() => {
-    global.ping.resizeSuccess = false;
-  });
-
-  if (data.ad_container) {
-    devAssert(global.context.container == data.ad_container, 'wrong container');
-  }
-  if (data.valid == 'false') {
-    // Immediately send no-content for visual diff test
-    global.context.noContentAvailable();
-  }
-  if (data.valid && data.valid == 'true') {
-    const img = document.createElement('img');
-    if (data.url) {
-      img.setAttribute('src', data.url);
-      img.setAttribute('width', data.width);
-      img.setAttribute('height', data.height);
-    }
-    let width, height;
-    if (data.adHeight) {
-      img.setAttribute('height', data.adHeight);
-      height = Number(data.adHeight);
-    }
-    if (data.adWidth) {
-      img.setAttribute('width', data.adWidth);
-      width = Number(data.adWidth);
-    }
-    document.body.appendChild(img);
-    if (width || height) {
-      global.context.renderStart({width, height});
-    } else {
-      global.context.renderStart();
-    }
-    if (data.enableIo) {
-      global.context.observeIntersection(function (changes) {
-        /** @type {!Array} */ (changes).forEach(function (c) {
-          dev().info(
-            'AMP-AD',
-            'Intersection: (WxH)' +
-              `${c.intersectionRect.width}x${c.intersectionRect.height}`
-          );
-        });
-        // store changes to global.lastIO for testing purpose
-        global.ping.lastIO = changes[changes.length - 1];
-      });
-    }
-    global.context.getHtml('a', ['href'], function (html) {
-      dev().info('GET-HTML', html);
-    });
-    global.context.getConsentState(function (consentState) {
-      dev().info('GET-CONSENT-STATE', consentState);
-    });
-    if (global.context.consentSharedData) {
-      const TAG = 'consentSharedData';
-      dev().info(TAG, global.context.consentSharedData);
-    }
-    if (global.context.initialConsentValue) {
-      const TAG = 'consentStringValue';
-      dev().info(TAG, global.context.initialConsentValue);
-    }
-  } else {
-    global.setTimeout(() => {
-      global.context.noContentAvailable();
-    }, 1000);
-  }
-}
diff --git a/ads/_ping_.md b/ads/_ping_.md
deleted file mode 100644
index 323b328fb1aac..0000000000000
--- a/ads/_ping_.md
+++ /dev/null
@@ -1,57 +0,0 @@
-<!---
-Copyright 2018 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.
--->
-
-# \_PING\_
-
-A fake ad type that is only used for local development.
-
-## Example
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="_ping_"
-  data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
-  data-valid="true"
-  data-enable-io="true"
->
-</amp-ad>
-```
-
-## Configuration
-
-For details on the configuration semantics, please contact the [ad network](#configuration) or refer to their [documentation](#ping).
-
-### Required parameters
-
-- `data-url` : Image ad with the image.
-
-### Optional parameters
-
-- `data-valid` : Set to false to return a no fill ad.
-- `data-ad-height` : Ad image size.
-- `data-ad-width` : Ad image width.
-- `data-enable-io` : Enable logging IntersectionObserver entry.
-
-## User Consent Integration
-
-When [user consent](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md#blocking-behaviors) is required. \_Ping\_ ad approaches user consent in the following ways:
-
-- `CONSENT_POLICY_STATE.SUFFICIENT`: Serve a personalized ad to the user.
-- `CONSENT_POLICY_STATE.INSUFFICIENT`: Serve a non-personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Serve a personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN`: Will not serve an ad to the user.
diff --git a/ads/a8.js b/ads/a8.js
deleted file mode 100644
index 6c9ac98ddd98b..0000000000000
--- a/ads/a8.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function a8(global, data) {
-  validateData(data, ['aid'], ['wid', 'eno', 'mid', 'mat', 'type']);
-  global.a8Param = data;
-  writeScript(global, 'https://statics.a8.net/amp/ad.js');
-}
diff --git a/ads/a9.js b/ads/a9.js
deleted file mode 100644
index caeb9ff5cc610..0000000000000
--- a/ads/a9.js
+++ /dev/null
@@ -1,200 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {hasOwn} from '../src/utils/object';
-import {loadScript, validateData, writeScript} from '../3p/3p';
-import {parseJson} from '../src/json';
-
-const mandatoryParams = [],
-  optionalParams = [
-    'ad_mode',
-    'placement',
-    'tracking_id',
-    'ad_type',
-    'marketplace',
-    'region',
-    'title',
-    'default_search_phrase',
-    'default_category',
-    'linkid',
-    'search_bar',
-    'search_bar_position',
-    'rows',
-    'design',
-    'asins',
-    'debug',
-    'aax_src_id',
-    'header_style',
-    'link_style',
-    'link_hover_style',
-    'text_style',
-    'random_permute',
-    'render_full_page',
-    'axf_exp_name',
-    'axf_treatment',
-    'disable_borders',
-    'attributes',
-    'carousel',
-    'feedback_enable',
-    'max_ads_in_a_row',
-    'list_price',
-    'prime',
-    'prime_position',
-    'widget_padding',
-    'strike_text_style',
-    'brand_text_link',
-    'brand_position',
-    'large_rating',
-    'rating_position',
-    'max_title_height',
-    'enable_swipe_on_mobile',
-    'overrides',
-    'ead',
-    'force_win_bid',
-    'fallback_mode',
-    'url',
-    'regionurl',
-    'divid',
-    'recomtype',
-    'adinstanceid',
-  ];
-const prefix = 'amzn_assoc_';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function a9(global, data) {
-  let i;
-  for (i = 0; i < 46; i++) {
-    optionalParams[i] = prefix + optionalParams[i];
-  }
-
-  validateData(data, mandatoryParams, optionalParams);
-
-  const publisherUrl = global.context.canonicalUrl || global.context.sourceUrl;
-
-  if (data.amzn_assoc_ad_mode) {
-    if (data.amzn_assoc_ad_mode === 'auto') {
-      if (data.adinstanceid && data.adinstanceid !== '') {
-        loadRecTag(global, data, publisherUrl);
-      } else {
-        loadSearTag(global, data, publisherUrl);
-      }
-    } else if (
-      data.amzn_assoc_ad_mode === 'search' ||
-      data.amzn_assoc_ad_mode === 'manual'
-    ) {
-      loadSearTag(global, data, publisherUrl);
-    }
-  } else {
-    loadSearTag(global, data, publisherUrl);
-  }
-}
-
-/**
- * @param {!Object} data
- * @return {string}
- */
-function getURL(data) {
-  let url = 'https://z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US';
-  if (data.regionurl && data.regionurl !== '') {
-    url = data.regionurl;
-  }
-
-  return url;
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- * @param {string} publisherUrl
- */
-function loadRecTag(global, data, publisherUrl) {
-  let url = getURL(data);
-  url += '&adInstanceId=' + data['adinstanceid'];
-  global['amzn_assoc_URL'] = publisherUrl;
-
-  if (data['recomtype'] === 'sync') {
-    writeScript(global, url);
-  } else if (data['recomtype'] === 'async') {
-    const d = global.document.createElement('div');
-    d.setAttribute('id', data['divid']);
-    global.document.getElementById('c').appendChild(d);
-    loadScript(global, url);
-  }
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- * @param {string} publisherUrl
- */
-function loadSearTag(global, data, publisherUrl) {
-  /**
-   * Sets macro type.
-   * @param {string} type
-   */
-  function setMacro(type) {
-    if (!type) {
-      return;
-    }
-
-    if (hasOwn(data, type)) {
-      global[type] = data[type];
-    }
-  }
-
-  /**
-   * Sets the params.
-   */
-  function setParams() {
-    const url = getURL(data);
-    let i;
-
-    for (i = 0; i < 44; i++) {
-      setMacro(optionalParams[i]);
-    }
-
-    if (data.amzn_assoc_fallback_mode) {
-      const str = data.amzn_assoc_fallback_mode.split(',');
-      let types = str[0].split(':');
-      let typev = str[1].split(':');
-      types = parseJson(types[1]);
-      typev = parseJson(typev[1]);
-      global['amzn_assoc_fallback_mode'] = {
-        'type': types,
-        'value': typev,
-      };
-    }
-    if (data.amzn_assoc_url) {
-      global['amzn_assoc_URL'] = data['amzn_assoc_url'];
-    } else {
-      global['amzn_assoc_URL'] = publisherUrl;
-    }
-
-    writeScript(global, url);
-  }
-
-  /**
-   * Initializer.
-   */
-  function init() {
-    setParams();
-  }
-
-  init();
-}
diff --git a/ads/accesstrade.js b/ads/accesstrade.js
deleted file mode 100644
index 8d4bf0239fdc5..0000000000000
--- a/ads/accesstrade.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function accesstrade(global, data) {
-  validateData(data, ['atops', 'atrotid']);
-  global.atParams = data;
-  writeScript(global, 'https://h.accesstrade.net/js/amp/amp.js');
-}
diff --git a/ads/adagio.js b/ads/adagio.js
deleted file mode 100755
index eb072bef42135..0000000000000
--- a/ads/adagio.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adagio(global, data) {
-  validateData(data, ['sid', 'loc']);
-
-  const $neodata = global;
-
-  $neodata._adagio = {};
-  $neodata._adagio.amp = data;
-
-  loadScript($neodata, 'https://js-ssl.neodatagroup.com/adagio_amp.js');
-}
diff --git a/ads/adblade.js b/ads/adblade.js
deleted file mode 100644
index 495c63624d72e..0000000000000
--- a/ads/adblade.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-const adbladeFields = ['width', 'height', 'cid'];
-const adbladeHostname = 'web.adblade.com';
-const industrybrainsHostname = 'web.industrybrains.com';
-
-/**
- * @param {string} hostname
- * @param {!Window} global
- * @param {!Object} data
- */
-function addAdiantUnit(hostname, global, data) {
-  validateData(data, adbladeFields, []);
-
-  // create a data element so our script knows what to do
-  const ins = global.document.createElement('ins');
-  ins.setAttribute('class', 'adbladeads');
-  ins.setAttribute('data-width', data.width);
-  ins.setAttribute('data-height', data.height);
-  ins.setAttribute('data-cid', data.cid);
-  ins.setAttribute('data-host', hostname);
-  ins.setAttribute('data-protocol', 'https');
-  ins.setAttribute('data-tag-type', 1);
-  global.document.getElementById('c').appendChild(ins);
-
-  ins.parentNode.addEventListener(
-    'eventAdbladeRenderStart',
-    global.context.renderStart()
-  );
-
-  // run our JavaScript code to display the ad unit
-  writeScript(global, 'https://' + hostname + '/js/ads/async/show.js');
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adblade(global, data) {
-  addAdiantUnit(adbladeHostname, global, data);
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function industrybrains(global, data) {
-  addAdiantUnit(industrybrainsHostname, global, data);
-}
diff --git a/ads/adbutler.js b/ads/adbutler.js
deleted file mode 100644
index 51efddaff521e..0000000000000
--- a/ads/adbutler.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adbutler(global, data) {
-  validateData(
-    data,
-    ['account', 'zone', 'width', 'height'],
-    ['keyword', 'place']
-  );
-
-  data['place'] = data['place'] || 0;
-
-  const placeholderID = 'placement_' + data['zone'] + '_' + data['place'];
-
-  // placeholder div
-  const d = global.document.createElement('div');
-  d.setAttribute('id', placeholderID);
-  global.document.getElementById('c').appendChild(d);
-
-  global.AdButler = global.AdButler || {};
-  global.AdButler.ads = global.AdButler.ads || [];
-
-  global.AdButler.ads.push({
-    handler(opt) {
-      global.AdButler.register(
-        data['account'],
-        data['zone'],
-        [data['width'], data['height']],
-        placeholderID,
-        opt
-      );
-    },
-    opt: {
-      place: data['place'],
-      pageKey: global.context.pageViewId,
-      keywords: data['keyword'],
-      domain: 'servedbyadbutler.com',
-      click: 'CLICK_MACRO_PLACEHOLDER',
-    },
-  });
-  loadScript(global, 'https://servedbyadbutler.com/app.js');
-}
diff --git a/ads/adform.js b/ads/adform.js
deleted file mode 100644
index 7617b2d089b6a..0000000000000
--- a/ads/adform.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {validateData, validateSrcPrefix, writeScript} from '../3p/3p';
-
-// Valid adform ad source hosts
-const hosts = {
-  track: 'https://track.adform.net',
-  adx: 'https://adx.adform.net',
-  a2: 'https://a2.adform.net',
-  adx2: 'https://adx2.adform.net',
-  asia: 'https://asia.adform.net',
-  adx3: 'https://adx3.adform.net',
-};
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adform(global, data) {
-  validateData(data, [['src', 'bn', 'mid']]);
-  global.Adform = {ampData: data};
-  const {src, bn, mid} = data;
-  let url;
-
-  // Custom ad url using "data-src" attribute
-  if (src) {
-    validateSrcPrefix(
-      Object.keys(hosts).map((type) => hosts[type]),
-      src
-    );
-    url = src;
-  }
-  // Ad tag using "data-bn" attribute
-  else if (bn) {
-    url = hosts.track + '/adfscript/?bn=' + encodeURIComponent(bn) + ';msrc=1';
-  }
-  // Ad placement using "data-mid" attribute
-  else if (mid) {
-    url = hosts.adx + '/adx/?mid=' + encodeURIComponent(mid);
-  }
-
-  writeScript(global, url);
-}
diff --git a/ads/adfox.js b/ads/adfox.js
deleted file mode 100644
index 4027484825719..0000000000000
--- a/ads/adfox.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-import {yandex} from './yandex';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adfox(global, data) {
-  validateData(data, ['adfoxParams', 'ownerId']);
-  loadScript(global, 'https://yastatic.net/pcode/adfox/loader.js', () =>
-    initAdFox(global, data)
-  );
-}
-
-/**
- * @param {!Window} global
- * @param {Object} data
- */
-function initAdFox(global, data) {
-  const params = JSON.parse(data.adfoxParams);
-
-  createContainer(global, 'adfox_container');
-
-  global.Ya.adfoxCode.create({
-    ownerId: data.ownerId,
-    containerId: 'adfox_container',
-    params,
-    onLoad: (data, onRender, onError) => {
-      checkLoading(global, data, onRender, onError);
-    },
-    onRender: () => global.context.renderStart(),
-    onError: () => global.context.noContentAvailable(),
-    onStub: () => global.context.noContentAvailable(),
-  });
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- * @param {!Object} onRender
- * @param {!Object} onError
- * @return {boolean}
- */
-function checkLoading(global, data, onRender, onError) {
-  if (data.bundleName === 'banner.direct') {
-    const dblParams = {
-      blockId: data.bundleParams.blockId,
-      data: data.bundleParams.data,
-      onRender,
-      onError,
-    };
-
-    yandex(global, dblParams);
-    return false;
-  }
-  return true;
-}
-
-/**
- * @param {!Window} global
- * @param {string} id
- */
-function createContainer(global, id) {
-  const container = global.document.createElement('div');
-  container.setAttribute('id', id);
-  global.document.getElementById('c').appendChild(container);
-}
diff --git a/ads/adgeneration.js b/ads/adgeneration.js
deleted file mode 100644
index ef30d56be4657..0000000000000
--- a/ads/adgeneration.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adgeneration(global, data) {
-  validateData(data, ['id'], ['targetid', 'displayid', 'adtype', 'option']);
-
-  // URL encoding
-  const option = data.option ? encodeQueryValue(data.option) : null;
-
-  const url =
-    'https://i.socdm.com/sdk/js/adg-script-loader.js?' +
-    'id=' +
-    encodeURIComponent(data.id) +
-    '&width=' +
-    encodeURIComponent(data.width) +
-    '&height=' +
-    encodeURIComponent(data.height) +
-    '&async=true' +
-    '&adType=' +
-    validateAdType(data.adType) +
-    '&displayid=' +
-    (data.displayid ? encodeURIComponent(data.displayid) : '1') +
-    '&tagver=2.0.0' +
-    (data.targetid ? '&targetID=' + encodeURIComponent(data.targetid) : '') +
-    (option ? '&' + option : '');
-  writeScript(global, url);
-}
-
-/**
- * URL encoding of query string
- * @param {string} str
- * @return {string}
- */
-function encodeQueryValue(str) {
-  return str
-    .split('&')
-    .map((v) => {
-      const key = v.split('=')[0],
-        val = v.split('=')[1];
-      return encodeURIComponent(key) + '=' + encodeURIComponent(val);
-    })
-    .join('&');
-}
-/**
- * If adtype is "RECTANGLE", replace it with "RECT"
- * @param {string} str
- * @return {string}
- */
-function validateAdType(str) {
-  if (str != null) {
-    const upperStr = encodeURIComponent(str.toUpperCase());
-    if (upperStr === 'RECTANGLE') {
-      return 'RECT';
-    } else {
-      return upperStr;
-    }
-  }
-  return 'FREE';
-}
diff --git a/ads/adglare.js b/ads/adglare.js
deleted file mode 100644
index cd534ee4d6297..0000000000000
--- a/ads/adglare.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adglare(global, data) {
-  validateData(data, ['host', 'zid'], ['keywords']);
-
-  const adglareSpan = global.document.createElement('span');
-  adglareSpan.id = 'zone' + data.zid;
-  global.document.getElementById('c').appendChild(adglareSpan);
-
-  let url =
-    'https://' +
-    data.host +
-    '.engine.adglare.net/?' +
-    data.zid +
-    '&ampad&rnd=' +
-    Date.now() +
-    Math.random();
-  if (data.keywords) {
-    url = url + '&keywords=' + data.keywords;
-  }
-
-  writeScript(global, url);
-}
diff --git a/ads/adhese.js b/ads/adhese.js
deleted file mode 100644
index e7c74246434d7..0000000000000
--- a/ads/adhese.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adhese(global, data) {
-  validateData(data, ['location', 'format', 'account', 'requestType']);
-  let targetParam = '';
-  const gctx = global.context;
-
-  if (data['targeting']) {
-    const targetList = data['targeting'];
-    for (const category in targetList) {
-      targetParam += encodeURIComponent(category);
-      const targets = targetList[category];
-      for (let x = 0; x < targets.length; x++) {
-        targetParam +=
-          encodeURIComponent(targets[x]) + (targets.length - 1 > x ? ';' : '');
-      }
-      targetParam += '/';
-    }
-  }
-
-  if (gctx.consentSharedData) {
-    if (
-      gctx.consentSharedData.consentStateValue &&
-      gctx.consentSharedData.consentStateValue == 'accepted'
-    ) {
-      targetParam += 'tlall/';
-    }
-    if (
-      gctx.consentSharedData.consentString &&
-      gctx.consentSharedData.consentString !== ''
-    ) {
-      targetParam += 'xt' + gctx.consentSharedData.consentString + '/';
-    }
-  }
-
-  targetParam += '?t=' + Date.now();
-  writeScript(
-    window,
-    'https://ads-' +
-      encodeURIComponent(data['account']) +
-      '.adhese.com/' +
-      encodeURIComponent(data['requestType']) +
-      '/sl' +
-      encodeURIComponent(data['location']) +
-      encodeURIComponent(data['position']) +
-      '-' +
-      encodeURIComponent(data['format']) +
-      '/' +
-      targetParam
-  );
-
-  const co = global.document.querySelector('#c');
-  co.width = data['width'];
-  co.height = data['height'];
-  co.addEventListener('adhLoaded', getAdInfo.bind(null, global), false);
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} e
- */
-function getAdInfo(global, e) {
-  if (
-    e.detail.isReady &&
-    e.detail.width == e.target.width &&
-    e.detail.height == e.target.height
-  ) {
-    global.context.renderStart();
-  } else if (
-    e.detail.isReady &&
-    (e.detail.width != e.target.width || e.detail.height != e.target.height)
-  ) {
-    global.context.renderStart({
-      width: e.detail.width,
-      height: e.detail.height,
-    });
-  } else {
-    global.context.noContentAvailable();
-  }
-}
diff --git a/ads/adincube.js b/ads/adincube.js
deleted file mode 100644
index a82b0d135736a..0000000000000
--- a/ads/adincube.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {hasOwn} from '../src/utils/object';
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adincube(global, data) {
-  validateData(data, ['adType', 'siteKey'], ['params']);
-
-  let url = global.context.location.protocol;
-  url += '//tag.adincube.com/tag/1.0/next?';
-  url += 'ad_type=' + encodeURIComponent(String(data['adType']).toUpperCase());
-  url += '&ad_subtype=' + encodeURIComponent(data['width']);
-  url += 'x' + encodeURIComponent(data['height']);
-  url += '&site_key=' + encodeURIComponent(data['siteKey']);
-  url += '&r=' + encodeURIComponent(global.context.referrer);
-  url += '&h=' + encodeURIComponent(global.context.location.href);
-  url += '&c=amp';
-  url += '&t=' + Date.now();
-
-  if (data['params']) {
-    url += parseParams(data['params']);
-  }
-
-  loadScript(global, url);
-}
-
-/**
- * @param {string} data
- * @return {string}
- */
-function parseParams(data) {
-  try {
-    const params = JSON.parse(data);
-    let queryParams = '';
-    for (const p in params) {
-      if (hasOwn(params, p)) {
-        queryParams += '&' + p + '=' + encodeURIComponent(params[p]);
-      }
-    }
-    return queryParams;
-  } catch (e) {
-    return '';
-  }
-}
diff --git a/ads/adition.js b/ads/adition.js
deleted file mode 100644
index 92a258ccde886..0000000000000
--- a/ads/adition.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adition(global, data) {
-  validateData(data, ['version']);
-  global.data = data;
-  writeScript(
-    global,
-    'https://imagesrv.adition.com/js/amp/v' +
-      encodeURIComponent(data['version']) +
-      '.js'
-  );
-}
diff --git a/ads/adman.js b/ads/adman.js
deleted file mode 100644
index d52e3a40738cc..0000000000000
--- a/ads/adman.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adman(global, data) {
-  validateData(data, ['ws', 'host', 's'], []);
-
-  const script = global.document.createElement('script');
-  script.setAttribute('data-ws', data.ws);
-  script.setAttribute('data-h', data.host);
-  script.setAttribute('data-s', data.s);
-  script.setAttribute('data-tech', 'amp');
-
-  script.src = 'https://static.adman.gr/adman.js';
-
-  global.document.body.appendChild(script);
-}
diff --git a/ads/admanmedia.js b/ads/admanmedia.js
deleted file mode 100644
index 4a875550c0ea1..0000000000000
--- a/ads/admanmedia.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function admanmedia(global, data) {
-  validateData(data, ['id']);
-
-  const encodedId = encodeURIComponent(data.id);
-  loadScript(
-    global,
-    `https://mona.admanmedia.com/go?id=${encodedId}`,
-    () => {
-      const pattern = `script[src$="id=${encodedId}"]`;
-      const scriptTag = global.document.querySelector(pattern);
-      scriptTag.setAttribute('id', `hybs-${encodedId}`);
-      global.context.renderStart();
-    },
-    () => {
-      global.context.noContentAvailable();
-    }
-  );
-}
diff --git a/ads/admixer.js b/ads/admixer.js
deleted file mode 100644
index 34a47bc6e20e4..0000000000000
--- a/ads/admixer.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {tryParseJson} from '../src/json';
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function admixer(global, data) {
-  validateData(data, ['zone'], ['sizes']);
-  /**
-   * @type {Object}
-   */
-  const payload = {
-    imps: [],
-    referrer: window.context.referrer,
-  };
-  const imp = {
-    params: {
-      zone: data.zone,
-    },
-  };
-  if (data.sizes) {
-    imp.sizes = tryParseJson(data.sizes);
-  }
-  payload.imps.push(imp);
-  const json = JSON.stringify(/** @type {JsonObject} */ (payload));
-  writeScript(global, 'https://inv-nets.admixer.net/ampsrc.js?data=' + json);
-}
diff --git a/ads/adocean.js b/ads/adocean.js
deleted file mode 100644
index 7b3e87071952b..0000000000000
--- a/ads/adocean.js
+++ /dev/null
@@ -1,350 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {CONSENT_POLICY_STATE} from '../src/consent-state';
-import {computeInMasterFrame, validateData, writeScript} from '../3p/3p';
-import {parseJson} from '../src/json';
-
-/**
- * @const {Object<string, string>}
- */
-const ADO_JS_PATHS = {
-  'sync': '/files/js/ado.js',
-  'buffered': '/files/js/ado.FIF.test.js',
-};
-
-/**
- * @param {string} str
- * @return {boolean}
- */
-function isFalseString(str) {
-  return /^(?:false|off)?$/i.test(str);
-}
-
-/**
- * @param {string} mode
- * @param {!Window} global
- * @param {boolean} consent
- */
-function setupAdoConfig(mode, global, consent) {
-  if (global['ado']) {
-    const config = {
-      mode: mode == 'sync' ? 'old' : 'new',
-      protocol: 'https:',
-      fif: {
-        enabled: mode != 'sync',
-      },
-      consent,
-    };
-
-    global['ado']['config'](config);
-  }
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-function setupPreview(global, data) {
-  if (global.ado && data.aoPreview && !isFalseString(data.aoPreview)) {
-    global.ado.preview({
-      enabled: true,
-    });
-  }
-}
-
-/**
- * @param {string} str
- * @return {Object|undefined}
- * @throws {SyntaxError}
- */
-function parseJSONObj(str) {
-  return str.match(/^\s*{/) ? parseJson(str) : undefined;
-}
-
-/**
- * @param {string} keys
- * @return {string|undefined}
- */
-function buildKeys(keys) {
-  return keys || undefined;
-}
-
-/**
- * @param {string} vars
- * @return {Object|string|undefined}
- */
-function buildVars(vars) {
-  try {
-    return parseJSONObj(vars);
-  } catch (e) {
-    return vars || undefined;
-  }
-}
-
-/**
- * @param {string} clusters
- * @return {Object|undefined}
- */
-function buildClusters(clusters) {
-  try {
-    return parseJSONObj(clusters);
-  } catch (e) {
-    // return undefined
-  }
-}
-
-/** @type {number} */
-let runSyncCount = 0;
-
-/**
- * @param {!Window} global
- * @param {function()} cb
- */
-function runSync(global, cb) {
-  global['__aoPrivFnct' + ++runSyncCount] = cb;
-  global.document.write(
-    // eslint-disable-next-line no-useless-concat
-    '<' + 'script>__aoPrivFnct' + runSyncCount + '();<' + '/script>'
-  );
-}
-
-/**
- * @param {string} mode
- * @param {!Window} global
- * @param {!Object} data
- */
-function appendPlacement(mode, global, data) {
-  const doc = global.document;
-  const placement = doc.createElement('div');
-  placement.id = data['aoId'];
-
-  const dom = doc.getElementById('c');
-  dom.appendChild(placement);
-
-  const config = {
-    id: data['aoId'],
-    server: data['aoEmitter'],
-    keys: buildKeys(data['aoKeys']),
-    vars: buildVars(data['aoVars']),
-    clusters: buildClusters(data['aoClusters']),
-  };
-
-  if (global.ado) {
-    if (mode == 'sync') {
-      runSync(global, function () {
-        global['ado']['placement'](config);
-      });
-
-      runSync(global, function () {
-        if (!config['_hasAd']) {
-          window.context.noContentAvailable();
-        }
-      });
-    } else {
-      global['ado']['onAd'](data['aoId'], function (isAd) {
-        if (!isAd) {
-          window.context.noContentAvailable();
-        }
-      });
-      global['ado']['placement'](config);
-    }
-  }
-}
-
-/**
- * @param {string} masterId
- * @param {!Object} data
- * @param {!Window} global
- * @param {Function} callback
- */
-function executeMaster(masterId, data, global, callback) {
-  const config = {
-    id: masterId,
-    server: data['aoEmitter'],
-    keys: buildKeys(data['aoKeys']),
-    vars: buildVars(data['aoVars']),
-    clusters: buildClusters(data['aoClusters']),
-  };
-
-  if (global['ado']) {
-    global['ado']['onEmit']((masterId, instanceId, codes) => {
-      callback(codes);
-    });
-
-    global['ado']['master'](config);
-  }
-}
-
-/**
- *
- * @param {string} masterId
- * @param {!Object} data
- * @param {!Window} global
- * @param {Function} callback
- */
-function requestCodes(masterId, data, global, callback) {
-  const slaveId = data['aoId'];
-
-  computeInMasterFrame(
-    global,
-    'ao-master-exec',
-    (done) => {
-      executeMaster(masterId, data, global, (codes) => done(codes));
-    },
-    (codes) => {
-      const creative = codes[slaveId];
-      if (codes[slaveId + '_second_phase']) {
-        creative['code'] += '\n' + codes[slaveId + '_second_phase']['code'];
-      }
-      callback(creative);
-    }
-  );
-}
-
-class AdoBuffer {
-  /**
-   *
-   * @param {Object} container
-   * @param {!Window} global
-   */
-  constructor(container, global) {
-    this.container = container;
-    this.global = global;
-    this.callback = null;
-  }
-
-  /**
-   *
-   * @param {Function} callback
-   */
-  render(callback) {
-    this.callback = callback;
-
-    if (this.global.document.readyState === 'loading') {
-      this.global.document.addEventListener(
-        'DOMContentLoaded',
-        this._init.bind(this)
-      );
-    } else {
-      this._init();
-    }
-  }
-
-  /**
-   */
-  _init() {
-    const ado = this.global['ado'];
-    const gao = this.global['gao'];
-
-    if (ado['busy'] || (typeof gao !== 'undefined' && gao['busy'])) {
-      ado['queue'].unshift(this._execute.bind(this));
-    } else {
-      this._execute();
-    }
-  }
-
-  /**
-   */
-  _execute() {
-    const adoElement = new this.global['AdoElement']({
-      'id': this.container.id,
-      'orgId': this.container.id,
-      'clearId': this.container.id,
-      '_isBuffer': true,
-    });
-    this.global['AdoElems'] = this.global['AdoElems'] || [];
-    this.global['AdoElems'].push(adoElement);
-    adoElement['getDOMElement']();
-    adoElement['initBuffor']();
-    this.global['ado']['elems'][this.container.id] = adoElement;
-
-    this.callback(adoElement);
-
-    adoElement['rewriteBuffor']();
-    adoElement['dispatch']();
-  }
-}
-
-/**
- *
- * @param {string} slaveId
- * @param {!Object} config
- * @param {!Window} global
- */
-function executeSlave(slaveId, config, global) {
-  const doc = global.document;
-  const placement = doc.createElement('div');
-  placement['id'] = slaveId;
-
-  const dom = doc.getElementById('c');
-  dom.appendChild(placement);
-
-  if (global['ado']) {
-    if (!config || config['isEmpty']) {
-      global.context.noContentAvailable();
-    } else {
-      const buffer = new AdoBuffer(placement, global);
-      buffer.render(() => {
-        new Function(config['sendHitsDef'] + config['code'])();
-      });
-    }
-  }
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adocean(global, data) {
-  validateData(
-    data,
-    ['aoEmitter', 'aoId'],
-    ['aoMode', 'aoPreview', 'aoKeys', 'aoVars', 'aoClusters', 'aoMaster']
-  );
-
-  const masterId = data['aoMaster'];
-  const mode = data['aoMode'] !== 'sync' || masterId ? 'buffered' : 'sync';
-  const adoUrl = 'https://' + data['aoEmitter'] + ADO_JS_PATHS[mode];
-  const ctx = global.context;
-
-  /*
-   * INSUFFICIENT and UNKNOWN should be treated as INSUFFICIENT
-   * not defined states should be treated as INSUFFICIENT
-   */
-  const consent =
-    ctx.initialConsentState === null /* tags without data-block-on-consent */ ||
-    ctx.initialConsentState === CONSENT_POLICY_STATE.SUFFICIENT ||
-    ctx.initialConsentState === CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED;
-
-  writeScript(global, adoUrl, () => {
-    setupAdoConfig(mode, global, consent);
-    setupPreview(global, data);
-
-    if (masterId) {
-      const ado = global['ado'];
-      if (ado && ado['features'] && ado['features']['passback']) {
-        ado['features']['passback'] = false;
-      }
-
-      requestCodes(masterId, data, global, (codes) => {
-        executeSlave(data['aoId'], codes, global);
-      });
-    } else {
-      appendPlacement(mode, global, data);
-    }
-  });
-}
diff --git a/ads/adocean.md b/ads/adocean.md
deleted file mode 100644
index e640cc0b3a402..0000000000000
--- a/ads/adocean.md
+++ /dev/null
@@ -1,90 +0,0 @@
-<!---
-Copyright 2017 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.
--->
-
-# AdOcean
-
-## Example
-
-##### Single placement:
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="adocean"
-  data-ao-id="ado-bIVMPpCJPX0.5tjQbNyrWpnws_dbbTJ1fUnGjLeSqJ3.K7"
-  data-ao-emitter="myao.adocean.pl"
-  data-block-on-consent
->
-</amp-ad>
-```
-
-##### Master-Slave:
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="adocean"
-  data-ao-emitter="myao.adocean.pl"
-  data-ao-master="FDyQKk0qN2a9SxwCMal6Eove..r_lvBE3pPfr_Ier9..f7"
-  data-ao-id="adoceanmyaonhqnqukjtt"
-  data-ao-keys="key1,key2,key3"
-  data-block-on-consent
->
-</amp-ad>
-
-<amp-ad
-  width="300"
-  height="250"
-  type="adocean"
-  data-ao-emitter="myao.adocean.pl"
-  data-ao-master="FDyQKk0qN2a9SxwCMal6Eove..r_lvBE3pPfr_Ier9..f7"
-  data-ao-id="adoceanmyaokiheeseoko"
-  data-ao-keys="key1,key2,key3"
-  data-block-on-consent
->
-</amp-ad>
-```
-
-Do not define different values for slaves within one master for paramerters: data-ao-keys, data-ao-vars and data-block-on-consent. Otherwise, the behavior will be non-deterministic.
-
-## Configuration
-
-For details on the configuration semantics, see [AdOcean documentation](http://www.adocean-global.com).
-
-### Required parameters
-
-- `data-ao-id` - Ad unit unique id
-- `data-ao-emitter` - Ad server hostname
-
-### Optional parameters
-
-- `data-ao-mode` - sync|buffered - processing mode
-- `data-ao-preview` - true|false - whether livepreview is enabled
-- `data-ao-keys` - additional configuration, see adserver documentation, do not define different values for slaves within one master
-- `data-ao-vars` - additional configuration, see adserver documentation, do not define different values for slaves within one master
-- `data-ao-clusters` - additional configuration, see adserver documentation
-- `data-ao-master` - unique id of master placement
-
-## User Consent Integration
-
-When [user consent](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md#blocking-behaviors) is required. AdOcean ad approaches user consent in the following ways:
-
-- `CONSENT_POLICY_STATE.SUFFICIENT`: Serve a personalized ad to the user.
-- `CONSENT_POLICY_STATE.INSUFFICIENT`: Serve a non-personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Serve a personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN`: Serve a non-personalized ad to the user.
diff --git a/ads/adop.js b/ads/adop.js
deleted file mode 100755
index 7d90112377196..0000000000000
--- a/ads/adop.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adop(global, data) {
-  validateData(data, ['z']);
-  global.adop = data;
-  writeScript(global, 'https://compass.adop.cc/assets/js/adop/amp.js');
-}
diff --git a/ads/adpicker.js b/ads/adpicker.js
deleted file mode 100644
index fd2e703db4b55..0000000000000
--- a/ads/adpicker.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adpicker(global, data) {
-  validateData(data, ['ph']);
-  const url =
-    'https://cdn.adpicker.net' +
-    '/ads/main.js?et=amp' +
-    '&ph=' +
-    encodeURIComponent(data.ph) +
-    '&cb=' +
-    Math.floor(89999999 * Math.random() + 10000000);
-  writeScript(global, url);
-}
diff --git a/ads/adplugg.js b/ads/adplugg.js
deleted file mode 100644
index 2db95918f3815..0000000000000
--- a/ads/adplugg.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {hasOwn} from '../src/utils/object';
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * Make an AdPlugg iframe.
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adplugg(global, data) {
-  // Load ad.js
-  loadScript(global, 'https://www.adplugg.com/serve/js/ad.js');
-
-  // Validate the amp-ad attributes.
-  validateData(
-    data,
-    ['accessCode', 'width', 'height'], //required
-    ['zone'] //optional
-  );
-
-  // Get the amp wrapper element.
-  const ampwrapper = global.document.getElementById('c');
-
-  // Build and append the ad tag.
-  const adTag = global.document.createElement('div');
-  adTag.setAttribute('class', 'adplugg-tag');
-  adTag.setAttribute('data-adplugg-access-code', data['accessCode']);
-  if (data['zone']) {
-    adTag.setAttribute('data-adplugg-zone', data['zone']);
-  }
-  ampwrapper.appendChild(adTag);
-
-  // Get a handle on the AdPlugg SDK.
-  global.AdPlugg = global.AdPlugg || [];
-  const {AdPlugg} = global;
-
-  // Register event listeners (via async wrapper).
-  AdPlugg.push(function () {
-    const {AdPlugg} = global;
-    // Register the renderStart event listener.
-    AdPlugg.on(adTag, 'adplugg:renderStart', function (event) {
-      // Create the opt_data object.
-      const optData = {};
-      if (hasOwn(event, 'width')) {
-        optData.width = event.width;
-      }
-      if (hasOwn(event, 'height')) {
-        optData.height = event.height;
-      }
-      global.context.renderStart(optData);
-    });
-
-    // Register the noContentAvailable event listener.
-    AdPlugg.on(adTag, 'adplugg:noContentAvailable', function () {
-      global.context.noContentAvailable();
-    });
-  });
-
-  // Fill the tag.
-  AdPlugg.push({'command': 'run'});
-}
diff --git a/ads/adpon.js b/ads/adpon.js
deleted file mode 100644
index bddc65896ae96..0000000000000
--- a/ads/adpon.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adpon(global, data) {
-  validateData(data, ['fid'], ['debugScript']);
-
-  global._adpon = {fid: data['fid']};
-
-  writeScript(global, data['debugScript'] || 'https://ad.adpon.jp/amp.js');
-}
diff --git a/ads/adreactor.js b/ads/adreactor.js
deleted file mode 100644
index 91c9844576ec5..0000000000000
--- a/ads/adreactor.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adreactor(global, data) {
-  // TODO: check mandatory fields
-  validateData(data, [], ['zid', 'pid', 'custom3']);
-  const url =
-    'https://adserver.adreactor.com' +
-    '/servlet/view/banner/javascript/zone?' +
-    'zid=' +
-    encodeURIComponent(data.zid) +
-    '&pid=' +
-    encodeURIComponent(data.pid) +
-    '&custom3=' +
-    encodeURIComponent(data.custom3) +
-    '&random=' +
-    Math.floor(89999999 * Math.random() + 10000000) +
-    '&millis=' +
-    Date.now();
-  writeScript(global, url);
-}
diff --git a/ads/ads.extern.js b/ads/ads.extern.js
index 81cf0e51384bf..2f9b79b3f90b9 100644
--- a/ads/ads.extern.js
+++ b/ads/ads.extern.js
@@ -221,6 +221,10 @@ var google;
 google.ima;
 google.ima.Ad;
 google.ima.Ad.getSkipTimeOffset;
+google.ima.Ad.getAdPodInfo;
+google.ima.AdPodInfo;
+google.ima.AdPodInfo.getAdPosition;
+google.ima.AdPodInfo.getTotalAds;
 google.ima.AdDisplayContainer;
 google.ima.AdDisplayContainer.initialize;
 google.ima.ImaSdkSettings;
@@ -252,6 +256,8 @@ google.ima.AdEvent.Type.AD_PROGRESS;
 google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED;
 google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED;
 google.ima.AdEvent.Type.LOADED;
+google.ima.AdEvent.Type.PAUSED;
+google.ima.AdEvent.Type.RESUMED;
 google.ima.AdEvent.Type.ALL_ADS_COMPLETED;
 google.ima.AdsManager;
 google.ima.AdsManager.getRemainingTime;
@@ -303,6 +309,19 @@ data.s;
 // adpicker.js
 data.ph;
 
+// adpushup.js
+window.adpushup = {};
+window.adpushup.initAmp = function (
+  global,
+  width,
+  height,
+  siteid,
+  slotpath,
+  totalampslots,
+  jsontargeting,
+  extras
+) {};
+
 // adreactor.js
 data.zid;
 data.pid;
@@ -338,7 +357,15 @@ data.siteId;
 // aduptech.js
 window.uAd = {};
 window.uAd.embed;
+data.amp;
 data.responsive;
+data.placementkey;
+data.mincpc;
+data.query;
+data.pageurl;
+data.gdpr;
+data.gdpr_consent;
+data.adtest;
 data.onAds;
 data.onNoAds;
 
@@ -659,6 +686,9 @@ data.slot.setVisibility;
 data.slot.setTargeting;
 data.slot.setExtraParameters;
 
+// verizonmedia.js
+window.jacData;
+
 // webediads.js
 var wads;
 wads.init;
diff --git a/ads/adsensor.js b/ads/adsensor.js
deleted file mode 100644
index c15462c6e0b57..0000000000000
--- a/ads/adsensor.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * 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.
- */
-
-import {writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- */
-export function adsensor(global) {
-  writeScript(
-    global,
-    'https://wfpscripts.webspectator.com/amp/adsensor-amp.js'
-  );
-}
diff --git a/ads/adservsolutions.js b/ads/adservsolutions.js
deleted file mode 100644
index 2b504e9f435a0..0000000000000
--- a/ads/adservsolutions.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adservsolutions(global, data) {
-  validateData(data, [], ['client', 'zid']);
-  global['ABNS'] =
-    global['ABNS'] ||
-    function () {
-      (global['ABNSl'] = global['ABNSl'] || []).push(arguments);
-    };
-  global['ABNSh'] = data.client;
-  writeScript(global, 'https://cdn.' + global['ABNSh'] + '/libs/b.js');
-  global['ABNS']('c', {id: data.zid + '&o=a'});
-}
diff --git a/ads/adsloom.js b/ads/adsloom.js
deleted file mode 100644
index 70be06f90ce5a..0000000000000
--- a/ads/adsloom.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adsloom(global, data) {
-  validateData(data, ['widgetId']);
-  global._adsLoom = global._adsLoom || {
-    widgetId: data['widgetId'],
-    clientId: global.context.clientId,
-    sourceUrl: global.context.sourceUrl,
-  };
-  loadScript(
-    global,
-    'https://adsloomwebservices.adsloom.com/scripts/amp-loader.js'
-  );
-}
diff --git a/ads/adsnative.js b/ads/adsnative.js
deleted file mode 100644
index 5dd5b98928794..0000000000000
--- a/ads/adsnative.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adsnative(global, data) {
-  try {
-    validateData(data, ['anapiid'], ['ankv', 'ancat', 'antid']);
-  } catch (e) {
-    validateData(data, ['annid', 'anwid'], ['ankv', 'ancat', 'antid']);
-  }
-
-  // convert string to object
-  let actualkv = undefined;
-  if (data.ankv) {
-    actualkv = {};
-    const arraykv = data.ankv.split(',');
-    for (const k in arraykv) {
-      const kv = arraykv[k].split(':');
-      actualkv[kv.pop()] = kv.pop();
-    }
-  }
-
-  // convert string to array
-  const actualcat = data.ancat ? data.ancat.split(',') : undefined;
-
-  // populate settings
-  global._AdsNativeOpts = {
-    apiKey: data.anapiid,
-    networkKey: data.annid,
-    nativeAdElementId: 'adsnative_ampad',
-    currentPageUrl: global.context.location.href,
-    widgetId: data.anwid,
-    templateKey: data.antid,
-    categories: actualcat,
-    keyValues: actualkv,
-    amp: true,
-  };
-
-  // drop ad placeholder div
-  const ad = global.document.createElement('div');
-  const ampwrapper = global.document.getElementById('c');
-  ad.id = global._AdsNativeOpts.nativeAdElementId;
-  ampwrapper.appendChild(ad);
-
-  // load renderjs
-  writeScript(global, 'https://static.adsnative.com/static/js/render.v1.js');
-}
diff --git a/ads/adsnative.md b/ads/adsnative.md
deleted file mode 100644
index 7a0949578af17..0000000000000
--- a/ads/adsnative.md
+++ /dev/null
@@ -1,44 +0,0 @@
-<!---
-Copyright 2015 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.
--->
-
-# AdsNative
-
-## Example
-
-```html
-<amp-ad width="300" height="250" type="adsnative" data-anapiid="123456">
-</amp-ad>
-```
-
-## Configuration
-
-For configuration details, see [AdsNative's documentation](http://dev.adsnative.com).
-
-### Required parameters
-
-- `width`: required by amp
-- `height`: required by amp
-- `data-anapiid`: the api id may be used instead of network and widget id
-- `data-annid`: the network id must be paired with widget id
-- `data-anwid`: the widget id must be paired with network id
-
-### Optional parameters
-
-- `data-anapiid`: the api id
-- `data-anwid`: the widget id
-- `data-antid`: the template id
-- `data-ancat`: a comma separated list of categories
-- `data-ankv`: a list of key value pairs in the format `"key1:value1, key2:value2"`.
diff --git a/ads/adspeed.js b/ads/adspeed.js
deleted file mode 100644
index 91b5f7e9be05a..0000000000000
--- a/ads/adspeed.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adspeed(global, data) {
-  validateData(data, ['zone', 'client']);
-
-  const url =
-    'https://g.adspeed.net/ad.php?do=amphtml&zid=' +
-    data.zone +
-    '&oid=' +
-    data.client +
-    '&cb=' +
-    Math.random();
-
-  writeScript(global, url);
-}
diff --git a/ads/adspirit.js b/ads/adspirit.js
deleted file mode 100644
index 9aa21cfa12ef9..0000000000000
--- a/ads/adspirit.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {setStyles} from '../src/style';
-import {validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adspirit(global, data) {
-  // TODO: check mandatory fields
-  validateData(data, [], ['asmParams', 'asmHost']);
-  const i = global.document.createElement('ins');
-  i.setAttribute('data-asm-params', data['asmParams']);
-  i.setAttribute('data-asm-host', data['asmHost']);
-  i.setAttribute('class', 'asm_async_creative');
-  setStyles(i, {
-    display: 'inline-block',
-    'text-align': 'left',
-  });
-  global.document.getElementById('c').appendChild(i);
-  const s = global.document.createElement('script');
-  s.src = 'https://' + data['asmHost'] + '/adasync.js';
-  global.document.body.appendChild(s);
-}
diff --git a/ads/adstir.js b/ads/adstir.js
deleted file mode 100644
index 248210dad982e..0000000000000
--- a/ads/adstir.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adstir(global, data) {
-  // TODO: check mandatory fields
-  validateData(data, [], ['appId', 'adSpot']);
-
-  const v = '4.0';
-
-  const d = global.document.createElement('div');
-  d.setAttribute('class', 'adstir-ad-async');
-  d.setAttribute('data-ver', v);
-  d.setAttribute('data-app-id', data['appId']);
-  d.setAttribute('data-ad-spot', data['adSpot']);
-  d.setAttribute('data-amp', true);
-  d.setAttribute('data-origin', global.context.location.href);
-  global.document.getElementById('c').appendChild(d);
-
-  loadScript(global, 'https://js.ad-stir.com/js/adstir_async.js');
-}
diff --git a/ads/adstyle.js b/ads/adstyle.js
deleted file mode 100644
index 80c7eea066b33..0000000000000
--- a/ads/adstyle.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adstyle(global, data) {
-  validateData(data, ['widget']);
-
-  global._adstyle = global._adstyle || {
-    viewId: global.context.pageViewId,
-    widgetIds: [],
-    referrer: global.context.referrer,
-    url: global.context.canonicalUrl,
-    source: global.context.sourceUrl,
-  };
-
-  global._adstyle.widgetIds.push(data.widget);
-
-  const url = 'https://widgets.ad.style/amp.js';
-
-  window.context.observeIntersection(function (changes) {
-    /** @type {!Array} */ (changes).forEach(function (c) {
-      window['intersectionRect' + data.widget] = c.intersectionRect;
-      window['boundingClientRect' + data.widget] = c.boundingClientRect;
-    });
-  });
-
-  loadScript(global, url);
-}
diff --git a/ads/adtech.js b/ads/adtech.js
deleted file mode 100644
index 8df0e89190ee4..0000000000000
--- a/ads/adtech.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {
-  validateData,
-  validateSrcContains,
-  validateSrcPrefix,
-  writeScript,
-} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adtech(global, data) {
-  const adsrc = data.src;
-  if (typeof adsrc != 'undefined') {
-    validateSrcPrefix('https:', adsrc);
-    validateSrcContains('/addyn/', adsrc);
-    writeScript(global, adsrc);
-  } else {
-    validateData(
-      data,
-      ['atwmn', 'atwdiv'],
-      [
-        'atwco',
-        'atwheight',
-        'atwhtnmat',
-        'atwmoat',
-        'atwnetid',
-        'atwothat',
-        'atwplid',
-        'atwpolar',
-        'atwsizes',
-        'atwwidth',
-      ]
-    );
-    global.atwco = data.atwco;
-    global.atwdiv = data.atwdiv;
-    global.atwheight = data.atwheight;
-    global.atwhtnmat = data.atwhtnmat;
-    global.atwmn = data.atwmn;
-    global.atwmoat = data.atwmoat;
-    global.atwnetid = data.atwnetid;
-    global.atwothat = data.atwothat;
-    global.atwplid = data.atwplid;
-    global.atwpolar = data.atwpolar;
-    global.atwsizes = data.atwsizes;
-    global.atwwidth = data.atwwidth;
-    writeScript(global, 'https://s.aolcdn.com/os/ads/adsWrapper3.js');
-  }
-}
diff --git a/ads/adtech.md b/ads/adtech.md
deleted file mode 100644
index 2bc0f648aab4a..0000000000000
--- a/ads/adtech.md
+++ /dev/null
@@ -1,55 +0,0 @@
-<!---
-Copyright 2015 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.
--->
-
-# AdTech
-
-## Example
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="adtech"
-  data-atwMN="2842475"
-  data-atwDiv="adtech-ad-container"
->
-</amp-ad>
-```
-
-## Configuration
-
-For details on the configuration semantics, please contact the ad network or refer to their documentation.
-
-### Required parameters:
-
-- `data-atwMN` - magic number for the ad spot
-- `data-atwDiv` - div name of the ad spot; can be class or id
-
-### Optional parameters:
-
-- `data-atwPlId` - placement ID (instead of Magic Number)
-- `data-atwOthAT` - generic var to set key/value pairs to send with the ad call; accepts multiple values in a semi-colon delimited list
-- `data-atwCo` - override default country code
-- `data-atwHtNmAT` - override ad host name
-- `data-atwNetId` - network ID
-- `data-atwWidth` - ad width (use with atwHeight only if the ad is not 300x250)
-- `data-atwHeight`- ad height (use with atwWidth only if the ad is not 300x250)
-- `data-atwSizes` - this overrides atwWidth/atwHeight; use this to create a comma-separated list of possible ad sizes
-- 'data-atwPolar' - set to "1" to enable Polar.me ad in the ad spot
-
-### Direct URL call:
-
-- `src` - Value must start with `https:` and contain `/addyn/`. This should only be used in cases where a direct ad call is being used rather than a magic number (MN).
diff --git a/ads/adthrive.js b/ads/adthrive.js
deleted file mode 100644
index ad2c047a29bce..0000000000000
--- a/ads/adthrive.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adthrive(global, data) {
-  validateData(data, ['siteId', 'adUnit'], ['sizes']);
-  loadScript(
-    global,
-    'https://ads.adthrive.com/sites/' +
-      encodeURIComponent(data.siteId) +
-      '/amp.min.js'
-  );
-}
diff --git a/ads/adunity.js b/ads/adunity.js
deleted file mode 100644
index facccf4444a0c..0000000000000
--- a/ads/adunity.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-import {startsWith} from '../src/string';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adunity(global, data) {
-  const doc = global.document;
-
-  validateData(
-    data,
-    ['auAccount', 'auSite'],
-    [
-      'auSection',
-      'auZone',
-      'auDemo',
-      'auIsdemo',
-      'auAd',
-      'auOrder',
-      'auSegment',
-      'auOptions',
-      'auSources',
-      'auAds',
-      'auTriggerFn',
-      'auTriggerVal',
-      'auCallbackVal',
-      'auCallbackFn',
-      'auPassbackFn',
-      'auPassbackVal',
-      'auClick',
-      'auDual',
-      'auImpression',
-      'auVideo',
-    ]
-  );
-
-  //prepare tag structure
-  const tag = doc.createElement('div');
-  tag.classList.add('au-tag');
-  tag.setAttribute('data-au-width', data['width']);
-  tag.setAttribute('data-au-height', data['height']);
-
-  if (data != null) {
-    for (const key in data) {
-      //skip not valid attributes
-      if (!hasOwnProperty.call(data, key)) {
-        continue;
-      }
-
-      //skip if attribute is type or ampSlotIndex
-      if (startsWith(key, 'type') || startsWith(key, 'ampSlotIndex')) {
-        continue;
-      }
-
-      if (startsWith(key, 'au')) {
-        if (key == 'auVideo') {
-          tag.setAttribute('class', 'au-video');
-        } else {
-          const auKey = key.substring(2).toLowerCase();
-          tag.setAttribute('data-au-' + auKey, data[key]);
-        }
-      }
-    }
-  }
-
-  //make sure is executed only once
-  let libAd = false;
-
-  //execute tag only if in view
-  const inViewCb = global.context.observeIntersection(function (changes) {
-    /** @type {!Array} */ (changes).forEach(function (c) {
-      if (!libAd && c.intersectionRect.height > data['height'] / 2) {
-        libAd = true;
-        inViewCb();
-        renderTags(global, data);
-      }
-    });
-  });
-  const tagPh = doc.getElementById('c');
-  tagPh.appendChild(tag);
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-function renderTags(global, data) {
-  if (data == null) {
-    return;
-  }
-
-  global.context.renderStart({
-    width: data.width,
-    height: data.height,
-  });
-  loadScript(global, 'https://content.adunity.com/aulib.js');
-}
diff --git a/ads/aduptech.js b/ads/aduptech.js
deleted file mode 100644
index b69e9d606ce2d..0000000000000
--- a/ads/aduptech.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function aduptech(global, data) {
-  const elementId = 'aduptech';
-
-  validateData(data, ['placementkey'], ['query', 'mincpc', 'adtest']);
-
-  // add id attriubte to given container (required)
-  global.document.getElementById('c').setAttribute('id', elementId);
-
-  // load aduptech js api
-  loadScript(global, 'https://s.d.adup-tech.com/jsapi', () => {
-    // force responsive ads for amp
-    data.responsive = true;
-
-    // ads callback => render start
-    //
-    // NOTE: Not using "data.onAds = global.context.renderStart;"
-    //       because the "onAds()" callback returns our API object
-    //       as first parameter which will cause errors
-    data.onAds = () => {
-      global.context.renderStart();
-    };
-
-    // no ads callback => noContentAvailable
-    data.onNoAds = global.context.noContentAvailable;
-
-    // embed iframe
-    global.uAd.embed(elementId, data);
-  });
-}
diff --git a/ads/aduptech.md b/ads/aduptech.md
deleted file mode 100644
index 0de7971cb1288..0000000000000
--- a/ads/aduptech.md
+++ /dev/null
@@ -1,112 +0,0 @@
-<!---
-Copyright 2016 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.
--->
-
-# Ad Up Technology
-
-Please visit [www.adup-tech.com](http://www.adup-tech.com) for more information
-on how to get required ad tag or placement keys.
-
-## Examples
-
-### Fixed size
-
-Uses fixed size by the given `width` and `height`.
-
-```html
-<amp-ad
-  type="aduptech"
-  layout="fixed"
-  width="500"
-  height="200"
-  data-placementkey="ae7906d535ce47fbb29fc5f45ef910b4"
-  data-query="reisen;mallorca;spanien"
-  data-adtest="1"
->
-</amp-ad>
-```
-
-### Filled size
-
-Uses available space of parent html container.
-
-```html
-<style amp-custom>
-  #aduptech-container {
-    width: 350px;
-    height: 300px;
-    position: relative;
-  }
-</style>
-<div id="aduptech-container">
-  <amp-ad
-    type="aduptech"
-    layout="fill"
-    data-placementkey="ae7906d535ce47fbb29fc5f45ef910b4"
-    data-query="reisen;mallorca;spanien"
-    data-adtest="1"
-  >
-  </amp-ad>
-</div>
-```
-
-### Fixed height
-
-Uses available width and the given `height`.
-
-```html
-<amp-ad
-  type="aduptech"
-  layout="fixed-height"
-  height="100"
-  data-placementkey="ae7906d535ce47fbb29fc5f45ef910b4"
-  data-query="reisen;mallorca;spanien"
-  data-adtest="1"
->
-</amp-ad>
-```
-
-### Responsive
-
-Uses available space but respecting aspect ratio by given `width` and `height` (for example 10:3).
-
-```html
-<amp-ad
-  type="aduptech"
-  layout="responsive"
-  width="10"
-  height="3"
-  data-placementkey="ae7906d535ce47fbb29fc5f45ef910b4"
-  data-query="reisen;mallorca;spanien"
-  data-adtest="1"
->
-</amp-ad>
-```
-
-## Configuration
-
-### Required parameters
-
-- `data-placementkey`
-
-### Optional parameters
-
-- `data-query`
-- `data-mincpc`
-- `data-adtest`
-
-## Design/Layout
-
-Please visit [www.adup-tech.com](http://www.adup-tech.com) and sign up as publisher to create your own placement.
diff --git a/ads/adventive.js b/ads/adventive.js
deleted file mode 100644
index 471069c87f5b0..0000000000000
--- a/ads/adventive.js
+++ /dev/null
@@ -1,167 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {addParamsToUrl} from '../src/url.js';
-import {dict, hasOwn} from '../src/utils/object';
-import {endsWith, startsWith} from '../src/string';
-import {loadScript, validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adventive(global, data) {
-  if (hasOwn(data, 'isDev')) {
-    adventive_(global, data);
-  } else {
-    validateData(data, ['src'], ['isDev']);
-    writeScript(global, `${data.src}&isAmp=1`);
-  }
-}
-
-const adv = {
-    addInstance: () => {},
-    args: {},
-    isLibLoaded: false,
-    mode: {
-      dev: false,
-      live: false,
-      localDev: false,
-      preview: false,
-      prod: false,
-      testing: false,
-    },
-  },
-  requiredData = ['pid'],
-  optionalData = ['click', 'async', 'isDev'],
-  sld = {true: 'adventivedev', false: 'adventive'},
-  thld = {true: 'amp', false: 'ads'},
-  cacheTime = 5;
-
-/**
- * Future data:
- * - async
- * - click
- * - height
- * - isDev
- * - width
- * - pid
- *
- * Considerations:
- * - Recipe reuse for multi-placed Ads.
- * - Reduce request to only what is needed
- * - Mitigate risk of data corruption
- *
- * @todo implement multi-size handling for multi-slotted ads. @see doubleclick
- *
- * @param {!Window} global
- * @param {!Object} data
- */
-function adventive_(global, data) {
-  validateData(data, requiredData, optionalData);
-
-  if (!hasOwn(global, 'adventive')) {
-    global.adventive = adv;
-  }
-  const ns = global.adventive;
-  if (!hasOwn(ns, 'context')) {
-    ns.context = global.context;
-  }
-
-  if (!Object.isFrozen(ns.mode)) {
-    updateMode(ns.mode, global.context.location.hostname);
-  }
-
-  const cb = callback.bind(this, data.pid, ns),
-    url = getUrl(global.context, data, ns);
-  url
-    ? (hasOwn(data, 'async') ? loadScript : writeScript)(global, url, cb)
-    : cb();
-}
-
-/**
- * @param {!Object} mode
- * @param {string} hostname
- */
-function updateMode(mode, hostname) {
-  mode.localDev = hostname === 'localhost';
-  mode.dev = !mode.localDev && endsWith(hostname, `${sld[false]}.com`);
-  mode.prod = !mode.localDev && endsWith(hostname, `${sld[true]}.com`);
-  mode.preview = (mode.dev || mode.prod) && startsWith(hostname, '/ad');
-  mode.testing = (mode.dev || mode.prod) && startsWith(hostname, '/testing');
-  mode.live = (mode.testing || !mode.preview) && !mode.localDev;
-
-  Object.freeze(mode);
-}
-
-/**
- * @param {string} id
- * @param {!Object} ns
- */
-function callback(id, ns) {
-  ns.addInstance(id);
-}
-
-/**
- * @param {!Object} context
- * @param {!Object} data
- * @param {!Object} ns
- * @return {string|boolean} if a search query is generated, a full url is
- *    provided, otherwise false
- */
-function getUrl(context, data, ns) {
-  const {mode} = ns,
-    isDev = hasOwn(data, 'isDev'),
-    sld_ = sld[!mode.dev],
-    thld_ = thld[isDev && !mode.live],
-    search = reduceSearch(ns, data.pid, data.click, context.referrer),
-    url = search
-      ? addParamsToUrl(`https://${thld_}.${sld_}.com/ad`, search)
-      : false;
-  return url;
-}
-
-/**
- * @todo determine if we can reduce the request to nothing & return false
- * @todo usage of RTC may be applicable here for macros
- * @todo check if click-macros can be offloaded to amp-analytics (i.e recipe)
- *
- * @param {!Object} ns
- * @param {string} placementId
- * @param {string} click
- * @param {string} referrer
- * @return {JsonObject} if no more data is needed, false, otherwise JSON
- *    representation of the url search query.
- */
-function reduceSearch(ns, placementId, click, referrer) {
-  const isRecipeLoaded = hasOwn(ns.args, 'placementId');
-  let isRecipeStale = true;
-  if (isRecipeLoaded) {
-    const info = ns.args[placementId];
-    isRecipeStale = Date.now() - info['requestTime'] > 60 * cacheTime;
-  }
-  const needsRequest = !isRecipeLoaded || isRecipeStale;
-
-  return !needsRequest
-    ? null
-    : dict({
-        'click': click,
-        'referrer': referrer,
-        'isAmp': '1',
-        'lib': !ns.isLibLoaded ? '1' : '', // may be prefetchable via _config
-        'pid': needsRequest ? placementId : '',
-      });
-}
diff --git a/ads/adverline.js b/ads/adverline.js
deleted file mode 100644
index fa5dfc0f01eb1..0000000000000
--- a/ads/adverline.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adverline(global, data) {
-  validateData(data, ['id', 'plc'], ['s', 'section']);
-
-  writeScript(global, 'https://ads.adverline.com/richmedias/amp.js');
-}
diff --git a/ads/adverticum.js b/ads/adverticum.js
deleted file mode 100644
index 04f20a28683d3..0000000000000
--- a/ads/adverticum.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {setStyle} from '../src/style';
-import {validateData, writeScript} from '../3p/3p';
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adverticum(global, data) {
-  validateData(data, ['goa3zone'], ['costumetargetstring']);
-  const zoneid = 'zone' + data['goa3zone'];
-  const d = global.document.createElement('div');
-
-  d.id = zoneid;
-  d.classList.add('goAdverticum');
-
-  document.getElementById('c').appendChild(d);
-  if (data['costumetargetstring']) {
-    const s = global.document.createTextNode(data['costumetargetstring']);
-    const v = global.document.createElement('var');
-    v.setAttribute('id', 'cT');
-    v.setAttribute('class', 'customtarget');
-    setStyle(v, 'display', 'none');
-    v.appendChild(s);
-    document.getElementById(zoneid).appendChild(v);
-  }
-  writeScript(global, '//ad.adverticum.net/g3.js');
-}
diff --git a/ads/advertserve.js b/ads/advertserve.js
deleted file mode 100644
index 54d2f3f3ade5a..0000000000000
--- a/ads/advertserve.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function advertserve(global, data) {
-  validateData(data, [], ['zid', 'pid', 'client']);
-
-  const url =
-    'https://' +
-    data.client +
-    '.advertserve.com' +
-    '/servlet/view/banner/javascript/zone?amp=true' +
-    '&zid=' +
-    encodeURIComponent(data.zid) +
-    '&pid=' +
-    encodeURIComponent(data.pid) +
-    '&random=' +
-    Math.floor(89999999 * Math.random() + 10000000) +
-    '&millis=' +
-    Date.now();
-
-  writeScript(global, url);
-}
diff --git a/ads/advertserve.md b/ads/advertserve.md
deleted file mode 100644
index 0cd306cefc93a..0000000000000
--- a/ads/advertserve.md
+++ /dev/null
@@ -1,43 +0,0 @@
-<!---
-Copyright 2015 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.
--->
-
-# AdvertServe
-
-## Example
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="advertserve"
-  data-client="tester"
-  data-pid="0"
-  data-zid="68"
->
-  <div placeholder>Loading ad.</div>
-  <div fallback>Ad could not be loaded.</div>
-</amp-ad>
-```
-
-## Configuration
-
-For details on the configuration semantics, please contact the ad network or refer to their documentation.
-
-Supported parameters:
-
-- `data-client`: client id
-- `data-pid`: publisher id
-- `data-zid`: zone id
diff --git a/ads/adyoulike.js b/ads/adyoulike.js
deleted file mode 100644
index dc9afccf115f4..0000000000000
--- a/ads/adyoulike.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function adyoulike(global, data) {
-  validateData(data, ['placement'], ['dc', 'campaign']);
-  global.adyoulikeParams = data;
-
-  writeScript(global, 'https://fo-static.omnitagjs.com/amp.js');
-}
diff --git a/ads/affiliateb.js b/ads/affiliateb.js
deleted file mode 100644
index 5fbdf81dfe9f7..0000000000000
--- a/ads/affiliateb.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function affiliateb(global, data) {
-  validateData(data, ['afb_a', 'afb_p', 'afb_t']);
-  global.afbParam = data;
-  writeScript(global, 'https://track.affiliate-b.com/amp/a.js');
-}
diff --git a/ads/aja.js b/ads/aja.js
deleted file mode 100644
index d28d599c6a4f2..0000000000000
--- a/ads/aja.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function aja(global, data) {
-  validateData(data, ['asi']);
-
-  const {document} = global;
-  const asi = data['asi'];
-
-  const d = document.createElement('div');
-  d.dataset['ajaAd'] = '';
-  d.dataset['ajaAsi'] = asi;
-  document.getElementById('c').appendChild(d);
-
-  loadScript(global, 'https://cdn.as.amanad.adtdp.com/sdk/asot-amp.js');
-}
diff --git a/ads/alp/handler.js b/ads/alp/handler.js
index 6989dfa7426ae..f27654ca1ff51 100644
--- a/ads/alp/handler.js
+++ b/ads/alp/handler.js
@@ -18,13 +18,12 @@ import {
   addParamToUrl,
   isLocalhostOrigin,
   isProxyOrigin,
-  parseQueryString,
   parseUrlDeprecated,
 } from '../../src/url';
 import {closest, openWindowDialog} from '../../src/dom';
 import {dev} from '../../src/log';
-import {dict} from '../../src/utils/object';
-import {startsWith} from '../../src/string';
+import {dict} from '../../src/core/types/object';
+import {parseQueryString} from '../../src/core/types/string/url';
 import {urls} from '../../src/config';
 
 /**
@@ -140,7 +139,7 @@ function getEventualUrl(a) {
   }
   if (
     !isProxyOrigin(eventualUrl) ||
-    !startsWith(parseUrlDeprecated(eventualUrl).pathname, '/c/')
+    !parseUrlDeprecated(eventualUrl).pathname.startsWith('/c/')
   ) {
     return;
   }
diff --git a/ads/alp/install-alp.js b/ads/alp/install-alp.js
index 993d9d9712a93..7bed2cd9144c9 100644
--- a/ads/alp/install-alp.js
+++ b/ads/alp/install-alp.js
@@ -18,7 +18,7 @@
 
 import {initLogConstructor, setReportError} from '../../src/log';
 import {installAlpClickHandler, warmupStatic} from './handler';
-import {reportError} from '../../src/error';
+import {reportError} from '../../src/error-reporting';
 
 initLogConstructor();
 setReportError(reportError);
diff --git a/ads/amoad.js b/ads/amoad.js
deleted file mode 100644
index d0447724c15fa..0000000000000
--- a/ads/amoad.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function amoad(global, data) {
-  validateData(data, ['sid'], ['adType']);
-
-  let script;
-  const attrs = {};
-  if (data['adType'] === 'native') {
-    script = 'https://j.amoad.com/js/n.js';
-    attrs['class'] = 'amoad_native';
-    attrs['data-sid'] = data.sid;
-  } else {
-    script = 'https://j.amoad.com/js/a.js';
-    attrs['class'] = `amoad_frame sid_${data.sid} container_div sp`;
-  }
-  global.amoadOption = {ampData: data};
-
-  const d = global.document.createElement('div');
-  Object.keys(attrs).forEach((k) => {
-    d.setAttribute(k, attrs[k]);
-  });
-  global.document.getElementById('c').appendChild(d);
-
-  loadScript(global, script);
-}
diff --git a/ads/aniview.js b/ads/aniview.js
deleted file mode 100644
index fe19f0766f708..0000000000000
--- a/ads/aniview.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function aniview(global, data) {
-  const requiredParams = ['publisherid', 'channelid'];
-  validateData(data, requiredParams);
-  global.avampdata = data;
-  const scpdomain = data.scriptdomain || 'player.aniview.com';
-  const scpurl = 'https://' + scpdomain + '/script/6.1/ampaniview.js';
-  writeScript(global, scpurl);
-}
diff --git a/ads/aniview.md b/ads/aniview.md
deleted file mode 100644
index 22c413aded9f3..0000000000000
--- a/ads/aniview.md
+++ /dev/null
@@ -1,56 +0,0 @@
-<!---
-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.
--->
-
-# Aniview
-
-## Example
-
-```html
-<amp-ad
-  width="640"
-  height="360"
-  type="aniview"
-  data-publisherid="55b88d4a181f465b3e8b4567"
-  data-channelid="5a5f17a728a06102d14c2718"
->
-</amp-ad>
-```
-
-## Configuration
-
-For additional details and support contact support@aniview.com.
-
-### Required parameters
-
-- `data-publisherid`: the publisher or network id
-- `data-channelid`: the channel id
-
-### Optional parameters
-
-- `data-ref1`: ref1 extra AV\_ parameters
-- `data-loop`: set false to disable loop. Default is true
-- `data-vastretry`: vastretry configuration
-- `data-errorlimit`: errorlimit configuration
-- `data-maximp`: Max number of impressions.
-- `data-maxrun`: Max number of waterfall runs.
-- `data-preloader`: String of the preloader json object.
-- `data-customcss`: Custom css string.
-- `data-customlogo`: String of the customlogo json object.
-- `data-passbackurl`: passbackurl.
-- `data-av_gdpr`: '1' or '0'.
-- `data-av_consent`: Consent string.
-- `data-av_url`: Current url.
-- `data-av_subid`: Subid string.
diff --git a/ads/anyclip.js b/ads/anyclip.js
deleted file mode 100644
index 31d3608ac3b5d..0000000000000
--- a/ads/anyclip.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-const requiredParams = ['pubname', 'widgetname'];
-
-const scriptHost = 'player.anyclip.com';
-const scriptPath = 'anyclip-widget/lre-widget/prod/v1/src';
-const scriptName = 'aclre-amp-loader.js';
-const scriptUrl = `https://${scriptHost}/${scriptPath}/${scriptName}`;
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function anyclip(global, data) {
-  validateData(data, requiredParams);
-
-  global.addEventListener('message', () => {
-    global.context.renderStart();
-  });
-
-  loadScript(global, scriptUrl, () => {
-    global.anyclip = global.anyclip || {};
-    global.anyclip.getWidget = global.anyclip.getWidget || function () {};
-  });
-}
diff --git a/ads/anyclip.md b/ads/anyclip.md
deleted file mode 100644
index 31a377d7e682c..0000000000000
--- a/ads/anyclip.md
+++ /dev/null
@@ -1,51 +0,0 @@
-<!---
-Copyright 2020 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.
--->
-
-# AnyClip
-
-## Example
-
-```html
-<amp-ad
-  width="480"
-  height="300"
-  layout="responsive"
-  type="anyclip"
-  data-pubName="lre_qa_temp"
-  data-widgetName="amp_test_autoplay"
->
-</amp-ad>
-```
-
-## Configuration
-
-For additional details and support contact support@anyclip.com.
-
-### Required parameters
-
-- `data-pub-name`: the publisher name
-- `data-widget-name`: the widget id
-
-### Optional parameters
-
-- `data-widget-url`: the widget source url
-- `data-lre-body-bgc`: color of background of the widget
-- `data-ac-embed-mode`: the widget embed mode
-- `data-ourl`: override url
-- `data-plid`: playlist ID
-- `data-ar`: aspect ratio
-- `data-sid`: given session ID
-- `data-tm-*`: misc passthrough params
diff --git a/ads/appnexus.js b/ads/appnexus.js
deleted file mode 100644
index 6abede2b18ece..0000000000000
--- a/ads/appnexus.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData, writeScript} from '../3p/3p';
-import {setStyles} from '../src/style';
-
-const APPNEXUS_AST_URL = 'https://acdn.adnxs.com/ast/ast.js';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function appnexus(global, data) {
-  const args = [];
-  args.push('size=' + data.width + 'x' + data.height);
-  if (data.tagid) {
-    validateData(data, ['tagid']);
-    args.push('id=' + encodeURIComponent(data.tagid));
-    writeScript(global, constructTtj(args));
-    return;
-  } else if (data.member && data.code) {
-    validateData(data, ['member', 'code']);
-    args.push('member=' + encodeURIComponent(data.member));
-    args.push('inv_code=' + encodeURIComponent(data.code));
-    writeScript(global, constructTtj(args));
-    return;
-  }
-
-  /**
-   * Construct the TTJ URL.
-   * Note params should be properly encoded first (use encodeURIComponent);
-   * @param  {!Array<string>} args query string params to add to the base URL.
-   * @return {string}      Formated TTJ URL.
-   */
-  function constructTtj(args) {
-    let url = 'https://ib.adnxs.com/ttj?';
-    for (let i = 0; i < args.length; i++) {
-      //append arg to query. Please encode arg first.
-      url += args[i] + '&';
-    }
-
-    return url;
-  }
-
-  appnexusAst(global, data);
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-function appnexusAst(global, data) {
-  validateData(data, ['adUnits']);
-  let apntag;
-  if (context.isMaster) {
-    // in case we are in the master iframe, we load AST
-    context.master.apntag = context.master.apntag || {};
-    context.master.apntag.anq = context.master.apntag.anq || [];
-    apntag = context.master.apntag;
-
-    context.master.adUnitTargetIds = context.master.adUnitTargetIds || [];
-
-    context.master.adUnitTargetIds = data.adUnits.map(
-      (adUnit) => adUnit.targetId
-    );
-
-    apntag.anq.push(() => {
-      if (data.pageOpts) {
-        apntag.anq.push(() => {
-          //output console information
-          apntag.debug = data.debug || false;
-          apntag.setPageOpts(data.pageOpts);
-        });
-      }
-
-      /** @type {!Array} */ (data.adUnits).forEach((adUnit) => {
-        apntag.defineTag(adUnit);
-      });
-    });
-    loadScript(global, APPNEXUS_AST_URL, () => {
-      apntag.anq.push(() => {
-        apntag.loadTags();
-      });
-    });
-  }
-
-  const div = global.document.createElement('div');
-  div.setAttribute('id', data.target);
-  const divContainer = global.document.getElementById('c');
-  if (divContainer) {
-    divContainer.appendChild(div);
-    setStyles(divContainer, {
-      top: '50%',
-      left: '50%',
-      bottom: '',
-      right: '',
-      transform: 'translate(-50%, -50%)',
-    });
-  }
-
-  if (!apntag) {
-    apntag = context.master.apntag;
-    //preserve a global reference
-    /** @type {{showTag: function(string, Object)}} global.apntag */
-    global.apntag = context.master.apntag;
-  }
-
-  if (!context.isMaster && data.adUnits) {
-    const newAddUnits = data.adUnits.filter((adUnit) => {
-      return context.master.adUnitTargetIds.indexOf(adUnit.targetId) === -1;
-    });
-    if (newAddUnits.length) {
-      apntag.anq.push(() => {
-        /** @type {!Array} */ (newAddUnits).forEach((adUnit) => {
-          apntag.defineTag(adUnit);
-          context.master.adUnitTargetIds.push(adUnit.targetId);
-        });
-        apntag.loadTags();
-      });
-    }
-  }
-
-  // check for ad responses received for a slot but before listeners are
-  // registered, for example when an above-the-fold ad is scrolled into view
-  apntag.anq.push(() => {
-    if (typeof apntag.checkAdAvailable === 'function') {
-      const getAd = apntag.checkAdAvailable(data.target);
-      getAd({resolve: isAdAvailable, reject: context.noContentAvailable});
-    }
-  });
-
-  apntag.anq.push(() => {
-    apntag.onEvent('adAvailable', data.target, isAdAvailable);
-    apntag.onEvent('adNoBid', data.target, context.noContentAvailable);
-  });
-
-  /**
-   * resolve getAd with an available ad object
-   *
-   * @param {{targetId: string}} adObj
-   */
-  function isAdAvailable(adObj) {
-    global.context.renderStart({width: adObj.width, height: adObj.height});
-    global.apntag.showTag(adObj.targetId, global.window);
-  }
-}
diff --git a/ads/appvador.js b/ads/appvador.js
deleted file mode 100644
index 50c2dab325a6b..0000000000000
--- a/ads/appvador.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function appvador(global, data) {
-  validateData(data, ['id'], ['options', 'jsType', 'customScriptSrc']);
-
-  const container = global.document.getElementById('c');
-  const apvDiv = global.document.createElement('div');
-  apvDiv.setAttribute('id', 'apvad-' + data.id);
-  container.appendChild(apvDiv);
-
-  const scriptUrl = data.customScriptSrc
-    ? data.customScriptSrc
-    : 'https://cdn.apvdr.com/js/' +
-      (data.jsType ? encodeURIComponent(data.jsType) : 'VastAdUnit') +
-      '.min.js';
-  const apvScript =
-    'new APV.' +
-    (data.jsType ? data.jsType : 'VASTAdUnit') +
-    '({s:"' +
-    data.id +
-    '",isAmpAd:true' +
-    (data.options ? ',' + data.options : '') +
-    '}).load();';
-
-  const cb = function () {
-    const apvLoadScript = global.document.createElement('script');
-    apvLoadScript.text = apvScript;
-    container.appendChild(apvLoadScript);
-  };
-
-  writeScript(global, scriptUrl, cb);
-}
diff --git a/ads/atomx.js b/ads/atomx.js
deleted file mode 100644
index b44185aa8f41a..0000000000000
--- a/ads/atomx.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function atomx(global, data) {
-  const optionals = ['click', 'uv1', 'uv2', 'uv3', 'context'];
-
-  validateData(data, ['id'], optionals);
-
-  const args = [
-    'size=' + data.width + 'x' + data.height,
-    'id=' + encodeURIComponent(data.id),
-  ];
-
-  for (let i = 0; i < optionals.length; i++) {
-    const optional = optionals[i];
-    if (optional in data) {
-      args.push(optional + '=' + encodeURIComponent(data[optional]));
-    }
-  }
-
-  writeScript(global, 'https://s.ato.mx/p.js#' + args.join('&'));
-}
diff --git a/ads/atomx.md b/ads/atomx.md
deleted file mode 100644
index d52d5122f1e23..0000000000000
--- a/ads/atomx.md
+++ /dev/null
@@ -1,37 +0,0 @@
-<!---
-Copyright 2016 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.
--->
-
-# Atomx
-
-## Example
-
-```html
-<amp-ad width="300" height="250" type="atomx" data-id="1234"> </amp-ad>
-```
-
-## Configuration
-
-For configuration information, see [atomx documentation](https://wiki.atomx.com/tags).
-
-### Required Parameters
-
-- `data-id` - placement ID
-
-### Optional parameters
-
-- `data-click` - URL to pre-pend to the click URL to enable tracking.
-- `data-uv1`, `data-uv2`, `data-uv3` - User value to pass in to the tag. Can be used to track & report on custom values. Needs to be a whole number between 1 and 4,294,967,295.
-- `data-context` - Conversion Callback Context
diff --git a/ads/baidu.js b/ads/baidu.js
deleted file mode 100644
index 09cddba9cac9f..0000000000000
--- a/ads/baidu.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function baidu(global, data) {
-  validateData(data, ['cproid']);
-
-  const id = '_' + Math.random().toString(36).slice(2);
-  const container = global.document.createElement('div');
-  container.id = id;
-  global.document.getElementById('c').appendChild(container);
-
-  global.slotbydup = global.slotbydup || [];
-  global.slotbydup.push({
-    id: data['cproid'],
-    container: id,
-    display: 'inlay-fix',
-    async: true,
-  });
-
-  global.addEventListener('message', () => {
-    global.context.renderStart();
-  });
-
-  loadScript(
-    global,
-    'https://dup.baidustatic.com/js/dm.js',
-    () => {},
-    () => {
-      // noContentAvailable should be called,
-      // if parent iframe receives no message.
-      // setTimeout can work, but it's not that reliable.
-      // So, only the faliure of JS loading is dealed with for now.
-      global.context.noContentAvailable();
-    }
-  );
-}
diff --git a/ads/beaverads.js b/ads/beaverads.js
deleted file mode 100644
index dcd0aa99d0fb1..0000000000000
--- a/ads/beaverads.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function beaverads(global, data) {
-  validateData(data, ['blockId']);
-
-  const url =
-    'https://code.beaverads.com/data/' +
-    encodeURIComponent(data['blockId']) +
-    '.js?async=1&div=c';
-
-  loadScript(
-    global,
-    url,
-    () => {
-      global.context.renderStart();
-    },
-    () => {
-      global.context.noContentAvailable();
-    }
-  );
-}
diff --git a/ads/bidtellect.js b/ads/bidtellect.js
deleted file mode 100644
index 959d23f0d52ac..0000000000000
--- a/ads/bidtellect.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function bidtellect(global, data) {
-  const requiredParams = ['t', 'pid', 'sid'];
-  const optionalParams = [
-    'sname',
-    'pubid',
-    'pubname',
-    'renderid',
-    'bestrender',
-    'autoplay',
-    'playbutton',
-    'videotypeid',
-    'videocloseicon',
-    'targetid',
-    'bustframe',
-  ];
-  validateData(data, requiredParams, optionalParams);
-  let params = '?t=' + encodeURIComponent(data.t);
-  params += '&pid=' + encodeURIComponent(data.pid);
-  params += '&sid=' + encodeURIComponent(data.sid);
-  if (data.width) {
-    params += '&w=' + encodeURIComponent(data.width);
-  }
-  if (data.height) {
-    params += '&h=' + encodeURIComponent(data.height);
-  }
-  optionalParams.forEach(function (param) {
-    if (data[param]) {
-      params += '&' + param + '=' + encodeURIComponent(data[param]);
-    }
-  });
-  const url = 'https://cdn.bttrack.com/js/infeed/2.0/infeed.min.js' + params;
-  writeScript(global, url);
-}
diff --git a/ads/bidtellect.md b/ads/bidtellect.md
deleted file mode 100644
index e02042261ca68..0000000000000
--- a/ads/bidtellect.md
+++ /dev/null
@@ -1,55 +0,0 @@
-<!---
-Copyright 2017 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.
--->
-
-# Bidtellect
-
-## Example
-
-```html
-<amp-ad
-  width="320"
-  height="200"
-  type="bidtellect"
-  data-t="20bc0442-8vec-41f8-9892-04be6e6c3521"
-  data-pid="815676411"
-  data-sid="234022"
->
-</amp-ad>
-```
-
-## Configuration
-
-For details on the configuration semantics, contact [Bidtellect](mailto:technology@bidtellect.com).
-
-### Required parameters
-
-- `data-t`: Parent publisher security token.
-- `data-pid`: The unique identifier for your placement.
-- `data-sid`: Unique identifier for the site.
-
-### Optional Parameters:
-
-- `data-sname`: Name of site that corresponds to the Site ID.
-- `data-pubid`: Unique identifier for the publisher.
-- `data-pubname`: Name of publisher that corresponds to the Publisher ID.
-- `data-renderid`: Unique identifier of the placement widget.
-- `data-bestrender`: Provides the best size and cropping for the placement.
-- `data-autoplay`: Enables autoplay for video placements.
-- `data-playbutton`: Onscreen play button for video placements.
-- `data-videotypeid`: Defines how it will be rendered the video player.
-- `data-videocloseicon`: Enable close button on the video player.
-- `data-targetid`: Allows the placement to render inside a target HTML element.
-- `data-bustframe`: Allows the placement to bust out of nested iframes recursively.
diff --git a/ads/blade.js b/ads/blade.js
deleted file mode 100644
index 5286a352f53b0..0000000000000
--- a/ads/blade.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-import {tryParseJson} from '../src/json';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function blade(global, data) {
-  // ensure mandatory fields
-  validateData(data, [
-    'width',
-    'height',
-    'blade_api_key',
-    'blade_player_id',
-    'blade_player_type',
-  ]);
-
-  const marcosObj = tryParseJson(data['blade_macros']) || {};
-  marcosObj['rand'] = Math.random().toString();
-  marcosObj['page_url'] = marcosObj['page_url'] || global.context.canonicalUrl;
-  const macros = {...marcosObj};
-  macros.width = data.width;
-  macros.height = data.height;
-
-  const containerId = `player-${data['blade_api_key']}-${data['blade_player_id']}`;
-  createContainer(containerId);
-
-  const bladeConfig = `_bladeConfig-${containerId}`;
-  global[bladeConfig] = {
-    playerId: data['blade_player_id'],
-    apiKey: data['blade_api_key'],
-    version: '1.0',
-    macros,
-  };
-  const ctx = global.context;
-
-  const bladeOnLoad = `_bladeOnLoad-${containerId}`;
-  global[bladeOnLoad] = function (error, player) {
-    if (error) {
-      global.context.noContentAvailable();
-      return;
-    }
-    ctx.reportRenderedEntityIdentifier(containerId);
-    ctx.renderStart({
-      width: player.width,
-      height: player.height,
-    });
-  };
-
-  const servingDomain = data.servingDomain
-    ? encodeURIComponent(data.servingDomain)
-    : 'ssr.streamrail.net';
-
-  loadScript(
-    global,
-    `https://${servingDomain}/js/${data['blade_api_key']}/${data['blade_player_id']}/player.js?t=${data['blade_player_type']}&callback=${bladeOnLoad}&config=${bladeConfig}&c=${containerId}`,
-    undefined,
-    () => {
-      global.context.noContentAvailable();
-    }
-  );
-  /**
-   * @param {string} elemId
-   */
-  function createContainer(elemId) {
-    const d = global.document.createElement('div');
-    d.id = elemId;
-    d.classList.add('blade');
-    global.document.getElementById('c').appendChild(d);
-  }
-}
diff --git a/ads/brainy.js b/ads/brainy.js
deleted file mode 100644
index 7647906f77b09..0000000000000
--- a/ads/brainy.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function brainy(global, data) {
-  validateData(data, [], ['aid', 'slotId']);
-
-  const url =
-    'https://proparm.jp/ssp/p/js1' +
-    '?_aid=' +
-    encodeURIComponent(data['aid']) +
-    '&amp;_slot=' +
-    encodeURIComponent(data['slotId']);
-
-  writeScript(global, url);
-}
diff --git a/ads/bringhub.js b/ads/bringhub.js
deleted file mode 100644
index 0284f51e40a28..0000000000000
--- a/ads/bringhub.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function bringhub(global, data) {
-  global._bringhub = global._bringhub || {
-    viewId: global.context.pageViewId,
-    htmlURL: data['htmlurl'] || global.context.canonicalUrl,
-    ampURL: data['ampurl'] || global.context.sourceUrl,
-    referrer: data['referrer'] || global.context.referrer,
-  };
-
-  writeScript(
-    global,
-    `https://static.bh-cdn.com/msf/amp-loader.js?v=${Date.now()}`,
-    function () {
-      loadScript(
-        global,
-        `https://static.bh-cdn.com/msf/amp-widget.js?v=${global._bringhub.hash}`
-      );
-    }
-  );
-}
diff --git a/ads/bringhub.md b/ads/bringhub.md
deleted file mode 100644
index 2702db458528b..0000000000000
--- a/ads/bringhub.md
+++ /dev/null
@@ -1,40 +0,0 @@
-<!---
-Copyright 2015 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.
--->
-
-# Bringhub
-
-## Example installation of the Bringhub Mini-Storefront
-
-### Basic
-
-```html
-<amp-embed
-  width="600"
-  height="320"
-  type="bringhub"
-  layout="responsive"
-  heights="(max-width: 270px) 1280px, (max-width:553px) 640px, 338px"
->
-</amp-embed>
-```
-
-## Configuration
-
-### Optional parameters
-
-- `htmlURL`: The URL of the standard html version of the page. Defaults to `global.context.canonicalURL`.
-- `ampURL`: The URL of the AMP version of the page. Defaults to `global.context.sourceUrl`.
-- `articleSelector`: The CSS Selector of the article body on the page. Contact your Bringhub Account Manager for requirements.
diff --git a/ads/broadstreetads.js b/ads/broadstreetads.js
deleted file mode 100644
index 43942742cd08f..0000000000000
--- a/ads/broadstreetads.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function broadstreetads(global, data) {
-  validateData(
-    data,
-    ['network', 'zone', 'width', 'height'],
-    ['keywords', 'place']
-  );
-
-  data.place = data.place || 0;
-
-  const placeholderID = 'placement_' + data.zone + '_' + data.place;
-
-  // placeholder div
-  const d = global.document.createElement('div');
-  d.setAttribute('id', placeholderID);
-  global.document.getElementById('c').appendChild(d);
-
-  global.broadstreet = global.broadstreet || {};
-  global.broadstreet.loadZone = global.broadstreet.loadZone || (() => ({}));
-  global.broadstreet.run = global.broadstreet.run || [];
-  global.broadstreet.run.push(() => {
-    global.broadstreet.loadZone(d, {
-      amp: true,
-      height: data.height,
-      keywords: data.keywords,
-      networkId: data.network,
-      place: data.place,
-      softKeywords: true,
-      width: data.width,
-      zoneId: data.zone,
-    });
-  });
-  loadScript(global, 'https://cdn.broadstreetads.com/init-2.min.js');
-}
diff --git a/ads/byplay.js b/ads/byplay.js
deleted file mode 100644
index a70bde7501a4d..0000000000000
--- a/ads/byplay.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * 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.
- */
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function byplay(global, data) {
-  validateData(data, ['vastUrl']);
-
-  global.BYPLAY_VAST_URL = data['vastUrl'];
-
-  loadScript(global, 'https://cdn.byplay.net/amp-byplay-v2.js');
-}
diff --git a/ads/caajainfeed.js b/ads/caajainfeed.js
deleted file mode 100644
index ae07567aca7fc..0000000000000
--- a/ads/caajainfeed.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function caajainfeed(global, data) {
-  validateData(
-    data,
-    [],
-    [
-      'adSpot',
-      'format',
-      'test',
-      'optout',
-      'offset',
-      'ipv4',
-      'ipv6',
-      'networkReachability',
-      'osName',
-      'osVersion',
-      'osLang',
-      'osTimezone',
-      'deviceVersion',
-      'appId',
-      'appVersion',
-      'kv',
-      'uids',
-      'template',
-      'protocol',
-      'fields',
-    ]
-  );
-
-  global.caAjaInfeedConfig = data;
-  loadScript(global, 'https://cdn.amanad.adtdp.com/sdk/ajaamp.js');
-}
diff --git a/ads/caajainfeed.md b/ads/caajainfeed.md
deleted file mode 100644
index 70195c2ba86b7..0000000000000
--- a/ads/caajainfeed.md
+++ /dev/null
@@ -1,60 +0,0 @@
-<!---
-Copyright 2016 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.
--->
-
-# CA A.J.A. Infeed
-
-## Example
-
-```html
-<amp-ad
-  width="320"
-  height="120"
-  type="caajainfeed"
-  data-ad-spot="thtuegn1pAQ"
-  data-test="true"
->
-</amp-ad>
-```
-
-## Configuration
-
-For configuration details, please email amb-nad@cyberagent.co.jp.
-
-### Required parameters
-
-- `data-ad-spot`
-
-### Optional parameters
-
-- `data-format`
-- `data-test`
-- `data-optout`
-- `data-offset`
-- `data-ipv4`
-- `data-ipv6`
-- `data-network-reachability`
-- `data-os-name`
-- `data-os-version`
-- `data-os-lang`
-- `data-os-timezone`
-- `data-device-version`
-- `data-app-id`
-- `data-app-version`
-- `data-kv`
-- `data-uids`
-- `data-template`
-- `data-protocol`
-- `data-fields`
diff --git a/ads/capirs.js b/ads/capirs.js
deleted file mode 100644
index 864f5703f6daa..0000000000000
--- a/ads/capirs.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function capirs(global, data) {
-  validateData(data, ['begunAutoPad', 'begunBlockId']);
-
-  if (data['customCss']) {
-    const style = global.document.createElement('style');
-
-    if (style.styleSheet) {
-      style.styleSheet.cssText = data['customCss'];
-    } else {
-      style.appendChild(global.document.createTextNode(data['customCss']));
-    }
-
-    global.document.getElementById('c').appendChild(style);
-  }
-
-  global['begun_callbacks'] = {
-    lib: {
-      init: () => {
-        const block = global.document.createElement('div');
-        block.id = 'x-' + Math.round(Math.random() * 1e8).toString(36);
-
-        global.document.getElementById('c').appendChild(block);
-
-        global['Adf']['banner']['ssp'](block.id, data['params'], {
-          'begun-auto-pad': data['begunAutoPad'],
-          'begun-block-id': data['begunBlockId'],
-        });
-      },
-    },
-    block: {
-      draw: (feed) => {
-        const banner = feed['banners']['graph'][0];
-
-        global.context.renderStart({
-          width: getWidth(global, banner),
-          height: banner.height,
-        });
-
-        const reportId = 'capirs-' + banner['banner_id'];
-        global.context.reportRenderedEntityIdentifier(reportId);
-      },
-      unexist: function () {
-        global.context.noContentAvailable();
-      },
-    },
-  };
-
-  loadScript(global, '//ssp.rambler.ru/capirs_async.js');
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} banner
- * @return {*} TODO(#23582): Specify return type
- */
-function getWidth(global, banner) {
-  let width;
-
-  if (isResponsiveAd(banner)) {
-    width = Math.max(
-      global.document.documentElement./*OK*/ clientWidth,
-      global.window./*OK*/ innerWidth || 0
-    );
-  } else {
-    width = banner.width;
-  }
-
-  return width;
-}
-
-/**
- * @param {!Object} banner
- * @return {boolean}
- */
-function isResponsiveAd(banner) {
-  return banner.width.indexOf('%') !== -1;
-}
diff --git a/ads/caprofitx.js b/ads/caprofitx.js
deleted file mode 100644
index 759b28836622f..0000000000000
--- a/ads/caprofitx.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function caprofitx(global, data) {
-  global.caprofitxConfig = data;
-  loadScript(global, 'https://cdn.caprofitx.com/tags/amp/profitx_amp.js');
-}
diff --git a/ads/cedato.js b/ads/cedato.js
deleted file mode 100644
index eff6ffc11f1d4..0000000000000
--- a/ads/cedato.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {parseUrlDeprecated} from '../src/url';
-import {setStyles} from '../src/style';
-import {validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function cedato(global, data) {
-  const requiredParams = ['id'];
-  const optionalParams = [
-    'domain',
-    'servingDomain',
-    'subid',
-    'version',
-    'extraParams',
-  ];
-  validateData(data, requiredParams, optionalParams);
-
-  if (!data || !data.id) {
-    global.context.noContentAvailable();
-    return;
-  }
-
-  const cb = Math.floor(Math.random() * 10000);
-  const domain =
-    data.domain || parseUrlDeprecated(global.context.sourceUrl).origin;
-
-  /* Create div for ad to target */
-  const playerDiv = global.document.createElement('div');
-  playerDiv.id = 'video' + data.id + cb;
-  setStyles(playerDiv, {
-    width: '100%',
-    height: '100%',
-  });
-  const playerScript = global.document.createElement('script');
-  const servingDomain = data.servingDomain
-    ? encodeURIComponent(data.servingDomain)
-    : 'algovid.com';
-  const srcParams = [
-    'https://p.' + servingDomain + '/player/player.js',
-    '?p=' + encodeURIComponent(data.id),
-    '&cb=' + cb,
-    '&w=' + encodeURIComponent(data.width),
-    '&h=' + encodeURIComponent(data.height),
-    data.version ? '&pv=' + encodeURIComponent(data.version) : '',
-    data.subid ? '&subid=' + encodeURIComponent(data.subid) : '',
-    domain ? '&d=' + encodeURIComponent(domain) : '',
-    data.extraParams || '', // already encoded url query string
-  ];
-
-  playerScript.onload = () => {
-    global.context.renderStart();
-  };
-
-  playerScript.src = srcParams.join('');
-  playerDiv.appendChild(playerScript);
-  global.document.getElementById('c').appendChild(playerDiv);
-}
diff --git a/ads/cedato.md b/ads/cedato.md
deleted file mode 100644
index ecafdf1fc3380..0000000000000
--- a/ads/cedato.md
+++ /dev/null
@@ -1,46 +0,0 @@
-<!---
-Copyright 2018 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.
--->
-
-# Cedato
-
-## Example
-
-```html
-<amp-ad
-  width="640"
-  height="360"
-  type="cedato"
-  data-id="303084288"
-  data-subid="subid"
->
-</amp-ad>
-```
-
-## Configuration
-
-For additional details and support contact support@cedato.com.
-
-### Required parameters
-
-- `data-id`: the id of the player - supply ID
-
-### Optional parameters
-
-- `data-domain`: page domain reported to the player
-- `data-serving-domain`: the domain from which the player is served
-- `data-subid`: player subid
-- `data-version`: version of the player that is being used
-- `data-extra-params`: additional player tag parameters can be set in the 'extra-params' query string, all parts have to be encoded.
diff --git a/ads/colombia.js b/ads/colombia.js
deleted file mode 100644
index 4a9900fcb9dd2..0000000000000
--- a/ads/colombia.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function colombia(global, data) {
-  validateData(data, [
-    'clmb_slot',
-    'clmb_position',
-    'clmb_section',
-    'clmb_divid',
-    'loadingStrategy',
-  ]);
-  // push the two object into the '_colombia' global
-  (global._colombia = global._colombia || []).push({
-    clmbslot: data.clmb_slot,
-    clmbposition: data.clmb_position,
-    clmbsection: data.clmb_section,
-    clmbdivid: data.clmb_divid,
-  });
-  // install observation on entering/leaving the view
-  global.context.observeIntersection(function (newrequest) {
-    /** @type {!Array} */ (newrequest).forEach(function (d) {
-      if (d.intersectionRect.height > 0) {
-        global._colombia.push({
-          visible: true,
-          rect: d,
-        });
-      }
-    });
-  });
-  loadScript(
-    global,
-    'https://static.clmbtech.com/ad/commons/js/colombia-amp.js'
-  );
-}
diff --git a/ads/conative.js b/ads/conative.js
deleted file mode 100644
index 801dac02166c0..0000000000000
--- a/ads/conative.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function conative(global, data) {
-  validateData(data, ['domain', 'adslot', 'height'], ['preview']);
-
-  data.domain = data.domain || null;
-  data.adslot = data.adslot || null;
-  data.preview = data.preview || null;
-
-  window.dmConativeData = window.dmConativeData || {};
-  window.dmConativeData.domain = window.dmConativeData.domain || data.domain;
-  window.dmConativeData.adslot = window.dmConativeData.adslot || data.adslot;
-  window.dmConativeData.preview = window.dmConativeData.preview || data.preview;
-  window.dmConativeData.visibility = window.dmConativeData.visibility || 0;
-
-  window.context.observeIntersection(function (changes) {
-    /** @type {!Array} */ (changes).forEach(function (c) {
-      window.dmConativeData.visibility = parseInt(
-        (c.intersectionRect.height / c.boundingClientRect.height) * 100,
-        10
-      );
-    });
-  });
-
-  if (data.domain) {
-    writeScript(
-      global,
-      '//s3-eu-west-1.amazonaws.com/ccc-adscript/serve/domain/' +
-        data.domain +
-        '/config.js'
-    );
-  }
-}
diff --git a/ads/connatix.js b/ads/connatix.js
deleted file mode 100644
index 6d9fbb453b8bc..0000000000000
--- a/ads/connatix.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {hasOwn} from '../src/utils/object.js';
-import {tryParseJson} from '../src/json.js';
-import {validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function connatix(global, data) {
-  validateData(data, ['connatix']);
-
-  // Because 3p's loadScript does not allow for data attributes,
-  // we will write the JS tag ourselves.
-  const script = global.document.createElement('script');
-  const cnxData = Object.assign(Object(tryParseJson(data['connatix'])));
-  global.cnxAmpAd = true;
-  for (const key in cnxData) {
-    if (hasOwn(cnxData, key)) {
-      script.setAttribute(key, cnxData[key]);
-    }
-  }
-
-  window.addEventListener(
-    'connatix_no_content',
-    function () {
-      window.context.noContentAvailable();
-    },
-    false
-  );
-
-  script.onload = () => {
-    global.context.renderStart();
-  };
-
-  script.src = 'https://cdn.connatix.com/min/connatix.renderer.infeed.min.js';
-  global.document.getElementById('c').appendChild(script);
-}
diff --git a/ads/contentad.js b/ads/contentad.js
deleted file mode 100644
index 356906fca5dd1..0000000000000
--- a/ads/contentad.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {parseUrlDeprecated} from '../src/url';
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function contentad(global, data) {
-  validateData(data, [], ['id', 'd', 'wid', 'url']);
-  global.id = data.id;
-  global.d = data.d;
-  global.wid = data.wid;
-  global.url = data.url;
-
-  /* Create div for ad to target */
-  const cadDiv = window.document.createElement('div');
-  cadDiv.id = 'contentad' + global.wid;
-  window.document.body.appendChild(cadDiv);
-
-  /* Pass Source URL */
-  let {sourceUrl} = window.context;
-  if (data.url) {
-    const domain = data.url || window.atob(data.d);
-    sourceUrl = sourceUrl.replace(parseUrlDeprecated(sourceUrl).host, domain);
-  }
-
-  /* Build API URL */
-  const cadApi =
-    'https://api.content-ad.net/Scripts/widget2.aspx' +
-    '?id=' +
-    encodeURIComponent(global.id) +
-    '&d=' +
-    encodeURIComponent(global.d) +
-    '&wid=' +
-    global.wid +
-    '&url=' +
-    encodeURIComponent(sourceUrl) +
-    '&cb=' +
-    Date.now();
-
-  /* Call Content.ad Widget */
-  writeScript(global, cadApi);
-}
diff --git a/ads/criteo.js b/ads/criteo.js
deleted file mode 100644
index 07442661bfa42..0000000000000
--- a/ads/criteo.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {dev} from '../src/log';
-import {loadScript} from '../3p/3p';
-
-/* global Criteo: false */
-
-/** @const {string} */
-const TAG = 'CRITEO';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function criteo(global, data) {
-  loadScript(global, 'https://static.criteo.net/js/ld/publishertag.js', () => {
-    if (!data.tagtype || data.tagtype === 'passback') {
-      Criteo.DisplayAd({
-        zoneid: data.zone,
-        containerid: 'c',
-        integrationmode: 'amp',
-      });
-    } else if (data.tagtype === 'rta' || data.tagtype === 'standalone') {
-      dev().error(
-        TAG,
-        'You are using a deprecated Criteo integration',
-        data.tagtype
-      );
-    } else {
-      dev().error(
-        TAG,
-        'You are using an unknown Criteo integration',
-        data.tagtype
-      );
-    }
-  });
-}
diff --git a/ads/dable.js b/ads/dable.js
deleted file mode 100644
index 764e68c9e6b39..0000000000000
--- a/ads/dable.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function dable(global, data) {
-  // check required props
-  validateData(data, ['widgetId']);
-
-  global.dable =
-    global.dable ||
-    function () {
-      (global.dable.q = global.dable.q || []).push(arguments);
-    };
-  global.dable(
-    'setService',
-    data['serviceName'] || global.window.context.location.hostname
-  );
-  global.dable('setURL', global.window.context.sourceUrl);
-  global.dable('setRef', global.window.context.referrer);
-
-  const slot = global.document.createElement('div');
-  slot.id = '_dbl_' + Math.floor(Math.random() * 100000);
-  slot.setAttribute('data-widget_id', data['widgetId']);
-
-  const divContainer = global.document.getElementById('c');
-  if (divContainer) {
-    divContainer.appendChild(slot);
-  }
-
-  const itemId = data['itemId'] || '';
-  const opts = {};
-
-  if (itemId) {
-    global.dable('sendLog', 'view', {id: itemId});
-  } else {
-    opts.ignoreItems = true;
-  }
-
-  // call render widget
-  global.dable('renderWidget', slot.id, itemId, opts, function (hasAd) {
-    if (hasAd) {
-      global.context.renderStart();
-    } else {
-      global.context.noContentAvailable();
-    }
-  });
-
-  // load the Dable script asynchronously
-  loadScript(global, 'https://static.dable.io/dist/plugin.min.js');
-}
diff --git a/ads/directadvert.js b/ads/directadvert.js
deleted file mode 100644
index a27f8969380f2..0000000000000
--- a/ads/directadvert.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-import {serializeQueryString} from '../src/url';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function directadvert(global, data) {
-  validateData(data, ['blockId']);
-
-  const params = /** @type {!JsonObject} */ ({
-    'async': 1,
-    'div': 'c',
-  });
-
-  if (global.context.referrer) {
-    params['amp_rref'] = encodeURIComponent(global.context.referrer);
-  }
-
-  if (global.context.canonicalUrl) {
-    params['amp_rurl'] = encodeURIComponent(global.context.canonicalUrl);
-  }
-
-  const serverName = data['serverName'] || 'code.directadvert.ru';
-
-  const url =
-    '//' +
-    encodeURIComponent(serverName) +
-    '/data/' +
-    encodeURIComponent(data['blockId']) +
-    '.js?' +
-    serializeQueryString(params);
-
-  loadScript(
-    global,
-    url,
-    () => {
-      global.context.renderStart();
-    },
-    () => {
-      global.context.noContentAvailable();
-    }
-  );
-}
diff --git a/ads/distroscale.js b/ads/distroscale.js
deleted file mode 100644
index 3ad830f2f4b09..0000000000000
--- a/ads/distroscale.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function distroscale(global, data) {
-  validateData(data, ['pid'], ['zid', 'tid']);
-  let src = '//c.jsrdn.com/s/cs.js?p=' + encodeURIComponent(data.pid);
-
-  if (data.zid) {
-    src += '&z=' + encodeURIComponent(data.zid);
-  } else {
-    src += '&z=amp';
-  }
-
-  if (data.tid) {
-    src += '&t=' + encodeURIComponent(data.tid);
-  }
-
-  let srcUrl = global.context.sourceUrl;
-
-  srcUrl = srcUrl.replace(/#.+/, '').replace(/\?.+/, '');
-
-  src += '&f=' + encodeURIComponent(srcUrl);
-
-  global.dsAMPCallbacks = {
-    renderStart: global.context.renderStart,
-    noContentAvailable: global.context.noContentAvailable,
-  };
-  loadScript(
-    global,
-    src,
-    () => {},
-    () => {
-      global.context.noContentAvailable();
-    }
-  );
-}
diff --git a/ads/dotandads.js b/ads/dotandads.js
deleted file mode 100644
index 8c2e82f51eb95..0000000000000
--- a/ads/dotandads.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function dotandads(global, data) {
-  global.data = data;
-  writeScript(global, 'https://amp.ad.dotandad.com/dotandadsAmp.js');
-}
diff --git a/ads/dynad.js b/ads/dynad.js
deleted file mode 100644
index d30b8d1116b6e..0000000000000
--- a/ads/dynad.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * 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.
- */
-
-import {
-  validateData,
-  validateSrcContains,
-  validateSrcPrefix,
-  writeScript,
-} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function dynad(global, data) {
-  validateData(data, ['src'], []);
-  validateSrcPrefix('https:', data.src);
-  validateSrcContains('/t.dynad.net/', data.src);
-  writeScript(global, data.src);
-}
diff --git a/ads/eadv.js b/ads/eadv.js
deleted file mode 100644
index b61884465308a..0000000000000
--- a/ads/eadv.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function eadv(global, data) {
-  validateData(data, ['x', 'u'], []);
-  writeScript(
-    global,
-    'https://www.eadv.it/track/?x=' + data.x + '&u=' + data.u
-  );
-}
diff --git a/ads/eas.js b/ads/eas.js
deleted file mode 100644
index 8a689a0eb77f3..0000000000000
--- a/ads/eas.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function eas(global, data) {
-  validateData(data, ['easDomain']);
-  global.easAmpParams = data;
-  writeScript(global, 'https://amp.emediate.eu/amp.v0.js');
-}
diff --git a/ads/eas.md b/ads/eas.md
deleted file mode 100644
index f27481bdc7485..0000000000000
--- a/ads/eas.md
+++ /dev/null
@@ -1,59 +0,0 @@
-<!---
-Copyright 2017 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.
--->
-
-# CxenseDisplay
-
-## Example
-
-### Basic call
-
-Corresponds to `https://eas4.emediate.eu/eas?cu=12345`
-
-```html
-<amp-ad
-  width="320"
-  height="50"
-  type="eas"
-  data-eas-domain="eas4.emediate.eu"
-  data-eas-cu="12345"
->
-</amp-ad>
-```
-
-### With targeting parameters
-
-```html
-<amp-ad
-  width="320"
-  height="50"
-  type="eas"
-  data-eas-domain="eas4.emediate.eu"
-  data-eas-cu="12345"
-  data-eas-EASTsomename="somevalue"
-  data-eas-kw1="somekeyword"
->
-</amp-ad>
-```
-
-## Configuration
-
-### Required parameters
-
-- `data-eas-domain`: Specify your ad-server domain (e.g., `eas3.emediate.se`); If you're using a custom domain-name (like, `eas.somesite.com`) you should NOT use that one unless you already have an SSL-certificate installed on our ad servers.
-
-### Optional parameters
-
-- `data-eas-[parameter]`: Any ad-request parameter, like 'cu'.
diff --git a/ads/empower.js b/ads/empower.js
deleted file mode 100644
index 6e4ef2d04971a..0000000000000
--- a/ads/empower.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function empower(global, data) {
-  validateData(data, ['site', 'zone'], ['category']);
-  global.category = data.category || 'general';
-  global.site = data.site + ':general';
-  global.zone = data.zone;
-  global.iwidth = data.width;
-  global.iheight = data.height;
-  writeScript(global, 'https://cdn.empower.net/sdk/amp-ad.min.js');
-}
diff --git a/ads/engageya.js b/ads/engageya.js
deleted file mode 100644
index 8a8864b86695d..0000000000000
--- a/ads/engageya.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function engageya(global, data) {
-  validateData(data, ['widgetids']);
-
-  global._engageya = global._engageya || {
-    viewId: global.context.pageViewId,
-    widgetIds: data['widgetids'],
-    websiteId: data['websiteid'],
-    publisherId: data['publisherid'],
-    url: data['url'] || global.context.canonicalUrl,
-    ampURL: data['ampurl'] || global.context.sourceUrl,
-    mode: data['mode'] || 1,
-    style: data['stylecss'] || '',
-    referrer: global.context.referrer,
-  };
-
-  loadScript(global, 'https://widget.engageya.com/engageya_amp_loader.js');
-}
diff --git a/ads/epeex.js b/ads/epeex.js
deleted file mode 100644
index 160d3023d88f0..0000000000000
--- a/ads/epeex.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function epeex(global, data) {
-  global._epeex = global._epeex || {
-    account: data['account'] || 'demoepeex',
-    channel: data['channel'] || '1',
-    htmlURL: data['htmlurl'] || encodeURIComponent(global.context.canonicalUrl),
-    ampURL: data['ampurl'] || encodeURIComponent(global.context.sourceUrl),
-    testMode: data['testmode'] || 'false',
-  };
-
-  // load the epeex AMP remote js file
-  loadScript(global, 'https://epeex.com/related/service/widget/amp/remote.js');
-}
diff --git a/ads/eplanning.js b/ads/eplanning.js
deleted file mode 100644
index 7c50740779e13..0000000000000
--- a/ads/eplanning.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function eplanning(global, data) {
-  validateData(data, [
-    'epl_si',
-    'epl_isv',
-    'epl_sv',
-    'epl_sec',
-    'epl_kvs',
-    'epl_e',
-  ]);
-  // push the two object into the '_eplanning' global
-  (global._eplanning = global._eplanning || []).push({
-    sI: data.epl_si,
-    isV: data.epl_isv,
-    sV: data.epl_sv,
-    sec: data.epl_sec,
-    kVs: data.epl_kvs,
-    e: data.epl_e,
-  });
-  loadScript(global, 'https://us.img.e-planning.net/layers/epl-amp.js');
-}
diff --git a/ads/ezoic.js b/ads/ezoic.js
deleted file mode 100644
index f783c5777917a..0000000000000
--- a/ads/ezoic.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function ezoic(global, data) {
-  // TODO: check mandatory fields
-  validateData(data, [], ['slot', 'targeting', 'extras']);
-  loadScript(global, 'https://g.ezoic.net/ezoic/ampad.js', () => {
-    loadScript(
-      global,
-      'https://www.googletagservices.com/tag/js/gpt.js',
-      () => {
-        global.googletag.cmd.push(() => {
-          new window.EzoicAmpAd(global, data).createAd();
-        });
-      }
-    );
-  });
-}
diff --git a/ads/ezoic.md b/ads/ezoic.md
deleted file mode 100644
index 5f47b7d7fe27a..0000000000000
--- a/ads/ezoic.md
+++ /dev/null
@@ -1,56 +0,0 @@
-<!---
-Copyright 2016 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.
--->
-
-# Ezoic
-
-## Example
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="ezoic"
-  data-slot="slot-name"
-  data-json='{"targeting":{"compid":0}, "extras":{"adsense_text_color":"000000"}'
->
-</amp-ad>
-```
-
-## Ad size
-
-The ad size is the size of the ad that should be displayed. Make sure the `width` and `height` attributes of the `amp-ad` tag match the available ad size.
-
-## Configuration
-
-To generate tags, please visit https://svc.ezoic.com/publisher.php?login
-
-Supported parameters:
-
-- `data-slot`: the slot name corresponding to the ad position
-
-Supported via `json` attribute:
-
-- `targeting`
-- `extras`
-
-## Consent Support
-
-Ezoic amp-ad adhere to a user's consent in the following ways:
-
-- `CONSENT_POLICY_STATE.SUFFICIENT`: Ezoic amp-ad will display a personalized ad to the user.
-- `CONSENT_POLICY_STATE.INSUFFICIENT`: Ezoic amp-ad will display a non-personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Ezoic amp-ad will display a personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN`: Ezoic amp-ad will not display an ad.
diff --git a/ads/f1e.js b/ads/f1e.js
deleted file mode 100644
index 74fe9db6983d1..0000000000000
--- a/ads/f1e.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function f1e(global, data) {
-  validateData(data, ['url', 'target'], []);
-  global.f1eData = data;
-  writeScript(global, 'https://img.ak.impact-ad.jp/util/f1e_amp.min.js');
-}
diff --git a/ads/f1h.js b/ads/f1h.js
deleted file mode 100644
index 942219b53faa8..0000000000000
--- a/ads/f1h.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function f1h(global, data) {
-  validateData(data, ['sectionId', 'slot']);
-
-  const scriptUrl =
-    data['debugsrc'] || 'https://img.ak.impact-ad.jp/fh/f1h_amp.js';
-
-  global.f1hData = data;
-  loadScript(global, scriptUrl);
-}
diff --git a/ads/felmat.js b/ads/felmat.js
deleted file mode 100644
index 2bce7bf1ee79b..0000000000000
--- a/ads/felmat.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function felmat(global, data) {
-  validateData(data, ['host', 'fmt', 'fmk', 'fmp']);
-  global.fmParam = data;
-  writeScript(
-    global,
-    'https://t.' + encodeURIComponent(data.host) + '/js/fmamp.js'
-  );
-}
diff --git a/ads/flite.js b/ads/flite.js
deleted file mode 100644
index 95fbfbd91e4ee..0000000000000
--- a/ads/flite.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function flite(global, data) {
-  // TODO: check mandatory fields
-  validateData(data, [], ['guid', 'mixins']);
-  const {guid} = data,
-    o = global,
-    e = encodeURIComponent,
-    x = 0;
-  let r = '',
-    dep = '';
-  o.FLITE = o.FLITE || {};
-  o.FLITE.config = o.FLITE.config || {};
-  o.FLITE.config[guid] = o.FLITE.config[guid] || {};
-  o.FLITE.config[guid].cb = Math.random();
-  o.FLITE.config[guid].ts = +Number(new Date());
-  r = global.context.location.href;
-  const m = r.match(new RegExp('[A-Za-z]+:[/][/][A-Za-z0-9.-]+'));
-  dep = data.mixins ? '&dep=' + data.mixins : '';
-  const url = [
-    'https://r.flite.com/syndication/uscript.js?i=',
-    e(guid),
-    '&v=3',
-    dep,
-    '&x=us',
-    x,
-    '&cb=',
-    o.FLITE.config[guid].cb,
-    '&d=',
-    e((m && m[0]) || r),
-    '&tz=',
-    new Date().getTimezoneOffset(),
-  ].join('');
-  loadScript(o, url);
-}
diff --git a/ads/fluct.js b/ads/fluct.js
deleted file mode 100644
index 5eaa306f679f7..0000000000000
--- a/ads/fluct.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/* global adingoFluct: false */
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function fluct(global, data) {
-  validateData(data, ['g', 'u']);
-  writeScript(
-    global,
-    `https://cdn-fluct.sh.adingo.jp/f.js?G=${encodeURIComponent(data['g'])}`,
-    function () {
-      adingoFluct.showAd(data['u']);
-    }
-  );
-}
diff --git a/ads/forkmedia.js b/ads/forkmedia.js
deleted file mode 100644
index fa2ec2de793eb..0000000000000
--- a/ads/forkmedia.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function forkmedia(global, data) {
-  let src = null;
-  if (data.product === 'inread') {
-    src = 'https://delivery.forkcdn.com/rappio/inread/v1.1/amp/inread.js';
-  } else if (data.product === 'vibe') {
-    src = 'https://vibecdn.forkcdn.com/Inarticle/amp/iav.js';
-  } else {
-    src = 'https://delivery.forkcdn.com/amp/default.js';
-  }
-
-  loadScript(
-    global,
-    src,
-    () => {
-      global.context.renderStart();
-    },
-    () => {
-      global.context.noContentAvailable();
-    }
-  );
-}
diff --git a/ads/freewheel.js b/ads/freewheel.js
deleted file mode 100644
index b0e0757ab56a9..0000000000000
--- a/ads/freewheel.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function freewheel(global, data) {
-  /*eslint "google-camelcase/google-camelcase": 0*/
-  global._freewheel_amp = {
-    data,
-  };
-
-  validateData(
-    data,
-    ['zone'],
-    [
-      'zone',
-      'gdpr',
-      'gdpr_consent',
-      'useCMP',
-      'zIndex',
-      'blurDisplay',
-      'timeline',
-      'soundButton',
-      'defaultMute',
-      'onOver',
-      'closeAction',
-      'errorAction',
-      'pauseRatio',
-      'label',
-      'vastUrlParams',
-    ]
-  );
-
-  loadScript(global, 'https://cdn.stickyadstv.com/prime-time/fw-amp.min.js');
-}
diff --git a/ads/freewheel.md b/ads/freewheel.md
deleted file mode 100644
index 66759d16684be..0000000000000
--- a/ads/freewheel.md
+++ /dev/null
@@ -1,62 +0,0 @@
-<!---
-Copyright 2018 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.
--->
-
-# FreeWheel
-
-## Example
-
-### Expand-banner
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="freewheel"
-  data-zone="2003"
-  layout="responsive"
->
-</amp-ad>
-```
-
-### FloorAd
-
-```html
-<amp-sticky-ad layout="”nodisplay”">
-  <amp-ad width="350" height="150" type="freewheel" data-zone="2003"> </amp-ad>
-</amp-sticky-ad>
-```
-
-## Configuration
-
-For details on the configuration semantics, please contact the FreeWheel support team : clientsidesdk@freewheel.tv
-
-Supported parameters:  
-All parameters are optional, unless otherwise stated
-
-- `data-zone` [required]
-- `data-blurDisplay`
-- `data-timeline`
-- `data-soundButton`
-- `data-defaultMute`
-- `data-onOver`
-- `data-closeAction`
-- `data-errorAction`
-- `data-pauseRatio`
-- `data-label`
-- `data-vastUrlParams`
-- `data-gdpr`
-- `data-gdpr_consent`
-- `data-useCMP`
diff --git a/ads/fusion.js b/ads/fusion.js
deleted file mode 100644
index e4b06476ba689..0000000000000
--- a/ads/fusion.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {string=} input
- * @return {JsonObject|undefined}
- */
-function queryParametersToObject(input) {
-  if (!input) {
-    return undefined;
-  }
-  return input
-    .split('&')
-    .filter((_) => _)
-    .reduce((obj, val) => {
-      const kv = val.split('=');
-      return Object.assign(obj, {[kv[0]]: kv[1] || true});
-    }, {});
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function fusion(global, data) {
-  validateData(
-    data,
-    [],
-    ['mediaZone', 'layout', 'adServer', 'space', 'parameters']
-  );
-
-  const container = global.document.getElementById('c');
-  const ad = global.document.createElement('div');
-  ad.setAttribute('data-fusion-space', data.space);
-  container.appendChild(ad);
-  const parameters = queryParametersToObject(data.parameters);
-
-  writeScript(
-    global,
-    'https://assets.adtomafusion.net/fusion/latest/fusion-amp.min.js',
-    () => {
-      global.Fusion.apply(container, global.Fusion.loadAds(data, parameters));
-
-      global.Fusion.on.warning.run((ev) => {
-        if (ev.msg === 'Space not present in response.') {
-          global.context.noContentAvailable();
-        }
-      });
-    }
-  );
-}
diff --git a/ads/genieessp.js b/ads/genieessp.js
deleted file mode 100644
index 0eb920ac1fd63..0000000000000
--- a/ads/genieessp.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function genieessp(global, data) {
-  validateData(data, ['vid', 'zid']);
-
-  global.data = data;
-  writeScript(global, 'https://js.gsspcln.jp/l/amp.js');
-}
diff --git a/ads/giraff.js b/ads/giraff.js
deleted file mode 100644
index 4f317f3ffaa2a..0000000000000
--- a/ads/giraff.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function giraff(global, data) {
-  validateData(data, ['blockName']);
-
-  const serverName = data['serverName'] || 'code.giraff.io';
-  const url =
-    '//' +
-    encodeURIComponent(serverName) +
-    '/data/widget-' +
-    encodeURIComponent(data['blockName']) +
-    '.js';
-
-  loadScript(
-    global,
-    url,
-    () => {
-      global.context.renderStart();
-    },
-    () => {
-      global.context.noContentAvailable();
-    }
-  );
-
-  const anchorEl = global.document.createElement('div');
-  const widgetId = data['widgetId'] ? '_' + data['widgetId'] : '';
-  anchorEl.id = 'grf_' + data['blockName'] + widgetId;
-  global.document.getElementById('c').appendChild(anchorEl);
-}
diff --git a/ads/gmossp.js b/ads/gmossp.js
deleted file mode 100644
index 9b8ce85062e62..0000000000000
--- a/ads/gmossp.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-const gmosspFields = ['id'];
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function gmossp(global, data) {
-  validateData(data, gmosspFields, []);
-
-  global.gmosspParam = data;
-  writeScript(global, 'https://cdn.gmossp-sp.jp/ads/amp.js');
-}
diff --git a/ads/google/OWNERS b/ads/google/OWNERS
index 94b65ebe76929..1b8c3b93f6d99 100644
--- a/ads/google/OWNERS
+++ b/ads/google/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/ads/google/a4a/docs/Network-Impl-Guide.md b/ads/google/a4a/docs/Network-Impl-Guide.md
index 71597d2b7aae7..16f7d351e0d40 100644
--- a/ads/google/a4a/docs/Network-Impl-Guide.md
+++ b/ads/google/a4a/docs/Network-Impl-Guide.md
@@ -4,26 +4,31 @@ This guide outlines the requirements and steps for ad networks to implement Fast
 Fetch for early ad request and support for AMP ads returned by the ad network to
 be given preferential rendering.
 
-- _Status: Draft_
-- _Authors: [kjwright@google.com](mailto:kjwright@google.com),
-  [bradfrizzell@google.com](mailto:bradfrizzell@google.com)_
-- _Last Updated: 1-27-2016_
-
-## Contents
-
-- [Background](#background)
-- [Overview](#overview)
-- [Detailed design](#detailed-design)
-  - [Ad server requirements](#ad-server-requirements)
-    - [SSL](#ssl)
-    - [AMPHTML ad creative signature](#amphtml-ad-creative-signature)
-    - [Ad response headers](#ad-response-headers)
-  - [Creating an AMPHTML ad extension implementation](#creating-an-amphtml-ad-extension-implementation)
-    - [Create the implementation script](#create-the-implementation-script)
-    - [Create the configuration file](#create-the-configuration-file)
-    - [Create documentation](#create-documentation)
-    - [Create tests](#create-tests)
-- [Checklist for ad network implementation](#checklist-for-ad-network-implementation)
+-   _Status: Draft_
+-   _Authors: [kjwright@google.com](mailto:kjwright@google.com),
+    [bradfrizzell@google.com](mailto:bradfrizzell@google.com)_
+-   _Last Updated: 1-27-2016_
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+-   [Background](#background)
+-   [Overview](#overview)
+-   [Detailed design](#detailed-design)
+    -   [Ad server requirements](#ad-server-requirements)
+        -   [SSL](#ssl)
+        -   [AMPHTML ad creative signature](#amphtml-ad-creative-signature)
+        -   [Ad response headers](#ad-response-headers)
+    -   [Creating an AMPHTML ad extension implementation](#creating-an-amphtml-ad-extension-implementation)
+        -   [Create the implementation script](#create-the-implementation-script)
+        -   [Create the configuration file](#create-the-configuration-file)
+        -   [Create documentation](#create-documentation)
+        -   [Create tests](#create-tests)
+-   [Checklist for ad network implementation](#checklist-for-ad-network-implementation)
 
 ## Background
 
@@ -31,7 +36,7 @@ If you haven’t already, please read the [AMPHTML ads readme](./a4a-readme.md)
 learn about why all networks should implement Fast Fetch.
 
 Relevant design documents: [AMPHTML ads readme](./a4a-readme.md),
-[AMPHTML ads spec](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/amp-a4a-format.md)
+[AMPHTML ads spec](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/amp-a4a-format.md)
 & [intent to implement](https://github.com/ampproject/amphtml/issues/3133).
 
 ## Overview
@@ -49,8 +54,8 @@ To support Fast Fetch, ad networks are required to implement the following:
 1. An [XHR CORS](https://www.w3.org/TR/cors/) for the ad request.
 2. The JavaScript to build the ad request, which must be located within the AMP
    HTML GitHub repository (example implementations:
-   [AdSense](https://github.com/ampproject/amphtml/tree/master/extensions/amp-ad-network-adsense-impl)
-   & [Google Ad Manager](https://github.com/ampproject/amphtml/tree/master/extensions/amp-ad-network-doubleclick-impl)).
+   [AdSense](https://github.com/ampproject/amphtml/tree/main/extensions/amp-ad-network-adsense-impl)
+   & [Google Ad Manager](https://github.com/ampproject/amphtml/tree/main/extensions/amp-ad-network-doubleclick-impl)).
 
 ## Detailed design
 
@@ -71,11 +76,11 @@ All network communication via the AMP HTML runtime (resources or XHR) require SS
 
 #### AMPHTML ad creative signature
 
-For the AMP runtime to know that a creative is valid [AMP](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/amp-a4a-format.md),
+For the AMP runtime to know that a creative is valid [AMP](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/amp-a4a-format.md),
 and thus receive preferential ad rendering, it must pass a client-side,
 validation check. The creative must be sent by the ad network to a validation
 service which verifies that the creative conforms to the
-[AMPHTML ad specification](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/amp-a4a-format.md).
+[AMPHTML ad specification](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/amp-a4a-format.md).
 If the ad conforms, the creative is rewritten by the validation service and the
 rewritten creative and a cryptographic signature are returned to the ad network.
 The rewritten creative and signature must be included in the response to the AMP
@@ -112,7 +117,7 @@ is allowed by including the following headers in the response:
     custom headers are not included, they will be dropped by the browser.</dd>
 </dl>
 
-For details on CORS verification in AMP context, see [Verify CORS requests](https://github.com/ampproject/amphtml/blob/master/spec/amp-cors-requests.md#verify-cors-header).
+For details on CORS verification in AMP context, see [Verify CORS requests](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-cors-requests.md#verify-cors-header).
 
 ### Creating an AMPHTML ad extension implementation
 
@@ -133,7 +138,7 @@ ad network:
 To create an ad network implementation, you must perform the following:
 
 1.  Create a new extension in the `extensions` directory of the AMP HTML Github
-    [repository](https://github.com/ampproject/amphtml/tree/master/extensions)
+    [repository](https://github.com/ampproject/amphtml/tree/main/extensions)
     whose path and name match the `type` attribute given for the amp-ad element
     as follows:
 
@@ -151,7 +156,7 @@ To create an ad network implementation, you must perform the following:
     replaced by their own network. Files must implement all requirements as
     specified below. Anything not specified, i.e. helper functions etc are at the
     discretion of the ad network, but must be approved using the [process required
-    for all AMP contributions](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md).
+    for all AMP contributions](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md).
 
 #### Create the implementation script
 
@@ -159,7 +164,7 @@ _For reference, see [Figure 1 Parts B and D](#detailed-design)._
 
 1.  Create a file named `amp-ad-network-<TYPE>-impl.js`, which implement the
     `AmpAdNetwork<TYPE>Impl` class.
-2.  This class must extend [AmpA4A](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/0.1/amp-a4a.js).
+2.  This class must extend [AmpA4A](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/0.1/amp-a4a.js).
 3.  This class must overwrite the super class method **getAdUrl()**.
 
     ```javascript
@@ -167,9 +172,9 @@ _For reference, see [Figure 1 Parts B and D](#detailed-design)._
       // @return {string} - the ad url
     ```
 
-Examples of network implementations can be seen for [Google Ad Manager](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js) and [AdSense](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js).
+Examples of network implementations can be seen for [Google Ad Manager](https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js) and [AdSense](https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js).
 Usage of `getAdUrl` can be seen within the `this.adPromise_ promise` chain in
-[amp-a4a.js](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/0.1/amp-a4a.js).
+[amp-a4a.js](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/0.1/amp-a4a.js).
 
 #### Create the configuration file
 
@@ -185,7 +190,7 @@ _For reference, see [Figure 1: Part A](#figure-1-fast-fetch-rendering-flow)_.
       // @return (boolean) Whether or not A4A should be used in this context.
     ```
 
-2.  Once this file is implemented, you must also update [amphtml/ads/\_a4a-config.js](https://github.com/ampproject/amphtml/blob/master/ads/_a4a-config.js).
+2.  Once this file is implemented, you must also update [amphtml/ads/\_a4a-config.js](https://github.com/ampproject/amphtml/blob/main/ads/_a4a-config.js).
     Specifically, `<TYPE>IsA4AEnabled()` must be imported, and it must be mapped
     to the ad network type in the a4aRegistry mapping.
 
@@ -203,16 +208,16 @@ _For reference, see [Figure 1: Part A](#figure-1-fast-fetch-rendering-flow)_.
     });
     ```
 
-Example configs: [AdSense](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-network-adsense-impl/0.1/adsense-a4a-config.js#L68).
-Usage of Google Ad Manager and AdSense configs can be seen in [\_a4a-config.js](https://github.com/ampproject/amphtml/blob/master/ads/_a4a-config.js).
+Example configs: [AdSense](https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad-network-adsense-impl/0.1/adsense-a4a-config.js#L68).
+Usage of Google Ad Manager and AdSense configs can be seen in [\_a4a-config.js](https://github.com/ampproject/amphtml/blob/main/ads/_a4a-config.js).
 
 #### Create documentation
 
 Create a file named `amp-ad-network-<TYPE>-impl-internal.md`, and within this
 file provide thorough documentation for the use of your implementation.
 
-Examples: See [Google Ad Manager](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-network-doubleclick-impl/amp-ad-network-doubleclick-impl-internal.md)
-and [AdSense](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-network-adsense-impl/amp-ad-network-adsense-impl-internal.md).
+Examples: See [Google Ad Manager](https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad-network-doubleclick-impl/amp-ad-network-doubleclick-impl-internal.md)
+and [AdSense](https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad-network-adsense-impl/amp-ad-network-adsense-impl-internal.md).
 
 #### Create tests
 
@@ -221,14 +226,14 @@ for your AMP ad network implementation.
 
 ## Checklist for ad network implementation
 
-- [ ] All Server-AMP communication done with SSL
-- [ ] AMP ads sent to validation server
-- [ ] Validated AMP ads sent from network to AMP with signature
-- [ ] Validated AMP ads sent from network to AMP with appropriate headers
-- [ ] File hierarchy created within amphtml/extensions
-- [ ] Custom `amp-ad-network-<TYPE>-impl.js` overwrites `getAdUrl()`
-- [ ] `<TYPE>-a4a-config.js` implements `<TYPE>IsA4AEnabled()`
-- [ ] Mapping added for ad network to a4aRegistry map within `_a4a-config.js`
-- [ ] Documentation written in `amp-ad-network-<TYPE>-impl-internal.md`
-- [ ] Tests written in `test-amp-ad-network-<TYPE>-impl.js`
-- [ ] Pull request merged to master
+-   [ ] All Server-AMP communication done with SSL
+-   [ ] AMP ads sent to validation server
+-   [ ] Validated AMP ads sent from network to AMP with signature
+-   [ ] Validated AMP ads sent from network to AMP with appropriate headers
+-   [ ] File hierarchy created within amphtml/extensions
+-   [ ] Custom `amp-ad-network-<TYPE>-impl.js` overwrites `getAdUrl()`
+-   [ ] `<TYPE>-a4a-config.js` implements `<TYPE>IsA4AEnabled()`
+-   [ ] Mapping added for ad network to a4aRegistry map within `_a4a-config.js`
+-   [ ] Documentation written in `amp-ad-network-<TYPE>-impl-internal.md`
+-   [ ] Tests written in `test-amp-ad-network-<TYPE>-impl.js`
+-   [ ] Pull request merged to the repo
diff --git a/ads/google/a4a/docs/RTBExchangeGuide.md b/ads/google/a4a/docs/RTBExchangeGuide.md
index 79583abe66323..014f93f509a8b 100644
--- a/ads/google/a4a/docs/RTBExchangeGuide.md
+++ b/ads/google/a4a/docs/RTBExchangeGuide.md
@@ -20,9 +20,9 @@ Exchanges will need to indicate in the RTB bid request whether a page is built i
 
 A new field is added to the `Site` object of the OpenRTB standard to indicate whether a webpage is built on AMP. In OpenRTB 2.5, this is section 3.2.13.
 
-| Field | Scope    | Type    | Default | Description                                                                                                                                 |
-| ----- | -------- | ------- | :-----: | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| `amp` | optional | integer |    -    | Whether the request is for an Accelerated Mobile Page. 0 = page is non-AMP, 1 = page is built with AMP HTML. AMP status unknown if omitted. |
+| Field | Scope    | Type    | Default | Description                                                                                                                      |
+| ----- | -------- | ------- | :-----: | -------------------------------------------------------------------------------------------------------------------------------- |
+| `amp` | optional | integer |    -    | Whether the request is for an AMP Document. 0 = page is non-AMP, 1 = page is built with AMP HTML. AMP status unknown if omitted. |
 
 **`Imp` Object additional field: `ampad`**
 
@@ -55,29 +55,29 @@ SSPs will need to provide a new field in the bid response to allow bidders to re
 
 ### Verification of valid AMP
 
-- For AMPHTML ads to be rendered early, the exchange is required to verify and sign in real time that the ad is written in amp4ads `<html amp4ads>` creative format.
-- See "[Proposed Design](https://github.com/ampproject/amphtml/issues/3133)" for signing.
-- Ads that are valid AMPHTML ads will be allowed to render early by AMP pages. Ads that are not verified as valid AMPHTML ads will render at the same speed as non-AMPHTML ads.
-- Only AMPHTML ads should be returned in the `ampadurl`.
+-   For AMPHTML ads to be rendered early, the exchange is required to verify and sign in real time that the ad is written in amp4ads `<html amp4ads>` creative format.
+-   See "[Proposed Design](https://github.com/ampproject/amphtml/issues/3133)" for signing.
+-   Ads that are valid AMPHTML ads will be allowed to render early by AMP pages. Ads that are not verified as valid AMPHTML ads will render at the same speed as non-AMPHTML ads.
+-   Only AMPHTML ads should be returned in the `ampadurl`.
 
 ### Server-side fetch
 
-- For AMPHTML ads to be rendered early, AMPHTML ad content must be fetched with 0 additional "hops" from the client. This is designed to avoid poor user experiences due to ad latency and extra client-side calls.
-- The exchange's servers (not the client browser) will request the AMPHTML ad content located at the URL provided in `ampadurl` after a bidder wins the auction.
-- Creative servers must respond and return content within some reasonable SLA, recommended at 150ms.
-- The AMPHTML ad will be injected into the adslot and subsequently rendered. Note that since a valid AMPHTML ad cannot contain an iframe or another ad tag, the server-side fetch must retrieve the actual HTML of the creative.
+-   For AMPHTML ads to be rendered early, AMPHTML ad content must be fetched with 0 additional "hops" from the client. This is designed to avoid poor user experiences due to ad latency and extra client-side calls.
+-   The exchange's servers (not the client browser) will request the AMPHTML ad content located at the URL provided in `ampadurl` after a bidder wins the auction.
+-   Creative servers must respond and return content within some reasonable SLA, recommended at 150ms.
+-   The AMPHTML ad will be injected into the adslot and subsequently rendered. Note that since a valid AMPHTML ad cannot contain an iframe or another ad tag, the server-side fetch must retrieve the actual HTML of the creative.
 
 ### Impression Tracking and Billing URLs
 
-- RTB buyers often include impression trackers as a structured field in the bid response (for example `Bid.burl`, the "billing notice URL" in OpenRTB 2.5).
-- It is up to the exchange or publisher ad server to determine how these URLs are fired, but <code><[amp-pixel](https://amp.dev/documentation/components/amp-pixel)></code> and <code><[amp-analytics](https://amp.dev/documentation/components/amp-analytics)></code> can handle most impression tracking and analytics use cases.
+-   RTB buyers often include impression trackers as a structured field in the bid response (for example `Bid.burl`, the "billing notice URL" in OpenRTB 2.5).
+-   It is up to the exchange or publisher ad server to determine how these URLs are fired, but <code><[amp-pixel](https://amp.dev/documentation/components/amp-pixel)></code> and <code><[amp-analytics](https://amp.dev/documentation/components/amp-analytics)></code> can handle most impression tracking and analytics use cases.
 
 ## Background Docs
 
-- [AMPHTML Ads for AMP Pages (Github)](https://github.com/ampproject/amphtml/issues/3133)
-- [AMPHTML Ad Creative Format Spec (Github)](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/amp-a4a-format.md)
-- [AMPHTML Ads Overview (Github)](https://github.com/ampproject/amphtml/blob/master/ads/google/a4a/docs/a4a-readme.md)
-- [AMPHTML Ads Website from amp.dev](https://amp.dev/community/platform-and-vendor-partners)
-- [Example AMPHTML Ads](https://amp.dev/documentation/examples/)
-- [Speed comparison](https://amp.dev/documentation/examples/advertising-analytics/amphtml_ads_vs_non_amp_ads/?format=websites): see how fast an AMP Ad loads in comparison to a regular ad. Best viewed on a 3G connection.
-- [Discussion in OpenRTB Dev Forum](https://groups.google.com/forum/#!topic/openrtb-dev/0wyPsF5D07Q): RTB Specific Proposal
+-   [AMPHTML Ads for AMP Pages (Github)](https://github.com/ampproject/amphtml/issues/3133)
+-   [AMPHTML Ad Creative Format Spec (Github)](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/amp-a4a-format.md)
+-   [AMPHTML Ads Overview (Github)](https://github.com/ampproject/amphtml/blob/main/ads/google/a4a/docs/a4a-readme.md)
+-   [AMPHTML Ads Website from amp.dev](https://amp.dev/community/platform-and-vendor-partners)
+-   [Example AMPHTML Ads](https://amp.dev/documentation/examples/)
+-   [Speed comparison](https://amp.dev/documentation/examples/advertising-analytics/amphtml_ads_vs_non_amp_ads/?format=websites): see how fast an AMP Ad loads in comparison to a regular ad. Best viewed on a 3G connection.
+-   [Discussion in OpenRTB Dev Forum](https://groups.google.com/forum/#!topic/openrtb-dev/0wyPsF5D07Q): RTB Specific Proposal
diff --git a/ads/google/a4a/docs/a4a-readme.md b/ads/google/a4a/docs/a4a-readme.md
index fe47824ee5ac8..031566246785b 100644
--- a/ads/google/a4a/docs/a4a-readme.md
+++ b/ads/google/a4a/docs/a4a-readme.md
@@ -2,4 +2,4 @@
 
 For details, please update your link to point to the latest doc available at: https://amp.dev/documentation/guides-and-tutorials/learn/intro-to-amphtml-ads.
 
-_Need to make changes to the doc_? The doc is now hosted in the [docs repo](https://github.com/ampproject/docs/blob/master/content/docs/ads/amphtml_ads.md).
+_Need to make changes to the doc_? The doc is now hosted in the [amp.dev repo](https://github.com/ampproject/amp.dev/blob/future/pages/content/amp-dev/documentation/guides-and-tutorials/learn/intro-to-amphtml-ads.md).
diff --git a/ads/google/a4a/experiment-utils.js b/ads/google/a4a/experiment-utils.js
index c912da5c0e1fc..02fe75e2855cb 100644
--- a/ads/google/a4a/experiment-utils.js
+++ b/ads/google/a4a/experiment-utils.js
@@ -63,12 +63,13 @@ export class ExperimentUtils {
    * @return {?string}
    */
   maybeSelectExperiment(win, element, selectionBranches, experimentName) {
-    const experimentInfoMap = /** @type {!Object<string, !ExperimentInfo>} */ ({});
-    experimentInfoMap[experimentName] = {
+    const experimentInfoList = /** @type {!Array<!ExperimentInfo>} */ ([]);
+    experimentInfoList.push({
+      experimentId: experimentName,
       isTrafficEligible: () => true,
       branches: selectionBranches,
-    };
-    randomlySelectUnsetExperiments(win, experimentInfoMap);
+    });
+    randomlySelectUnsetExperiments(win, experimentInfoList);
     return getExperimentBranch(win, experimentName);
   }
 }
diff --git a/ads/google/a4a/line-delimited-response-handler.js b/ads/google/a4a/line-delimited-response-handler.js
index a7d2938a1c366..27d329624e1e0 100644
--- a/ads/google/a4a/line-delimited-response-handler.js
+++ b/ads/google/a4a/line-delimited-response-handler.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {tryParseJson} from '../../../src/json';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 /**
  * Handles an XHR response by calling lineCallback for each line delineation.
@@ -49,7 +49,9 @@ export function lineDelimitedStreamer(win, response, lineCallback) {
   }
 
   const decoder = new TextDecoder('utf-8');
-  const reader = /** @type {!ReadableStreamDefaultReader} */ (response.body.getReader());
+  const reader = /** @type {!ReadableStreamDefaultReader} */ (
+    response.body.getReader()
+  );
   reader.read().then(function chunk(result) {
     if (result.value) {
       streamer(
@@ -76,8 +78,9 @@ export function metaJsonCreativeGrouper(callback) {
   let first;
   return function (line, done) {
     if (first) {
-      const metadata = /** @type {!Object<string, *>} */ (tryParseJson(first) ||
-        {});
+      const metadata = /** @type {!Object<string, *>} */ (
+        tryParseJson(first) || {}
+      );
       const lowerCasedMetadata = Object.keys(metadata).reduce((newObj, key) => {
         newObj[key.toLowerCase()] = metadata[key];
         return newObj;
diff --git a/ads/google/a4a/shared/content-recommendation.js b/ads/google/a4a/shared/content-recommendation.js
index 943ba505ba108..b4eafb69312f7 100644
--- a/ads/google/a4a/shared/content-recommendation.js
+++ b/ads/google/a4a/shared/content-recommendation.js
@@ -143,7 +143,6 @@ const PUB_CONTROL_EXAMPLE =
  * @record
  */
 export class CoReConfig {
-  // eslint-disable-line no-unused-vars
   /** see comment on class */
   constructor() {
     /** @const {number} */
@@ -242,7 +241,7 @@ export function getAutoConfig(availableWidth, isMobile) {
  *   layoutType: (string|undefined),
  * }}
  */
-export let RawPublisherControlParams; // eslint-disable-line no-unused-vars
+export let RawPublisherControlParams;
 
 /**
  * Get CoRe Pub Control UI Sizes.
@@ -343,9 +342,8 @@ function validateAndParsePubControlParams(params) {
 
   const /** !Array<!LayoutType> */ layoutTypes = params.layoutType.split(',');
   const /** !Array<string> */ numberOfRows = params.numberOfRows.split(',');
-  const /** !Array<string> */ numberOfColumns = params.numberOfColumns.split(
-      ','
-    );
+  const /** !Array<string> */ numberOfColumns =
+      params.numberOfColumns.split(',');
 
   // Check all params have same length.
   if (
diff --git a/ads/google/a4a/shared/test/test-content-recommendation.js b/ads/google/a4a/shared/test/test-content-recommendation.js
index 6058e6d7f2686..ca5e4f4bf2837 100644
--- a/ads/google/a4a/shared/test/test-content-recommendation.js
+++ b/ads/google/a4a/shared/test/test-content-recommendation.js
@@ -20,7 +20,7 @@ import {
   getPubControlConfig,
 } from '../content-recommendation.js';
 
-describe('getAutoConfig', function () {
+describes.sandboxed('getAutoConfig', {}, function () {
   it('should use image_stacked on wide slots', function () {
     const runTest = (availableWidth, expectedWidth, expectedHeight) => {
       expect(
@@ -164,7 +164,7 @@ describe('getAutoConfig', function () {
   });
 });
 
-describe('getPubControlConfig', function () {
+describes.sandboxed('getPubControlConfig', {}, function () {
   it('should use setting when only one provided', function () {
     const rawPubControlParams = {
       numberOfColumns: '4',
diff --git a/ads/google/a4a/shared/test/test-url-builder.js b/ads/google/a4a/shared/test/test-url-builder.js
index 6cfd67fd6806e..f95ef55b61798 100644
--- a/ads/google/a4a/shared/test/test-url-builder.js
+++ b/ads/google/a4a/shared/test/test-url-builder.js
@@ -16,7 +16,7 @@
 
 import {buildUrl} from '../url-builder';
 
-describe('buildUrl', () => {
+describes.sandboxed('buildUrl', {}, () => {
   it('should build a simple URL', () => {
     expect(
       buildUrl('https://example.test', {'key': 'value'}, Infinity)
diff --git a/ads/google/a4a/test/test-line-delimited-response-handler.js b/ads/google/a4a/test/test-line-delimited-response-handler.js
index 9327181a8d3a3..6758989a66861 100644
--- a/ads/google/a4a/test/test-line-delimited-response-handler.js
+++ b/ads/google/a4a/test/test-line-delimited-response-handler.js
@@ -19,7 +19,7 @@ import {
   metaJsonCreativeGrouper,
 } from '../line-delimited-response-handler';
 
-describe('#line-delimited-response-handler', () => {
+describes.sandboxed('#line-delimited-response-handler', {}, (env) => {
   let chunkHandlerStub;
   let slotData;
   let win;
@@ -92,7 +92,7 @@ describe('#line-delimited-response-handler', () => {
   }
 
   beforeEach(() => {
-    chunkHandlerStub = window.sandbox.stub();
+    chunkHandlerStub = env.sandbox.stub();
   });
 
   describe('stream not supported', () => {
@@ -154,7 +154,7 @@ describe('#line-delimited-response-handler', () => {
     }
 
     beforeEach(() => {
-      readStub = window.sandbox.stub();
+      readStub = env.sandbox.stub();
       response = {
         text: () => Promise.resolve(),
         body: {
diff --git a/ads/google/a4a/test/test-traffic-experiments.js b/ads/google/a4a/test/test-traffic-experiments.js
index 3c09a1ffdbe4f..e7a93bc93189c 100644
--- a/ads/google/a4a/test/test-traffic-experiments.js
+++ b/ads/google/a4a/test/test-traffic-experiments.js
@@ -14,14 +14,15 @@
  * limitations under the License.
  */
 
-import {EXPERIMENT_ATTRIBUTE} from '../utils';
+import {AMP_EXPERIMENT_ATTRIBUTE, EXPERIMENT_ATTRIBUTE} from '../utils';
 import {
+  addAmpExperimentIdToElement,
   addExperimentIdToElement,
   isInExperiment,
   validateExperimentIds,
 } from '../traffic-experiments';
 
-describe('all-traffic-experiments-tests', () => {
+describes.sandboxed('all-traffic-experiments-tests', {}, () => {
   describe('#validateExperimentIds', () => {
     it('should return true for empty list', () => {
       expect(validateExperimentIds([])).to.be.true;
@@ -84,6 +85,45 @@ describe('all-traffic-experiments-tests', () => {
     });
   });
 
+  describe('#addAmpExperimentIdToElement', () => {
+    it('should add attribute when there is none present to begin with', () => {
+      const element = document.createElement('div');
+      expect(element.getAttribute(AMP_EXPERIMENT_ATTRIBUTE)).to.not.be.ok;
+      addAmpExperimentIdToElement('3', element);
+      expect(element.getAttribute(AMP_EXPERIMENT_ATTRIBUTE)).to.equal('3');
+    });
+
+    it('should append experiment to already valid single experiment', () => {
+      const element = document.createElement('div');
+      element.setAttribute(AMP_EXPERIMENT_ATTRIBUTE, '99');
+      addAmpExperimentIdToElement('3', element);
+      expect(element.getAttribute(AMP_EXPERIMENT_ATTRIBUTE)).to.equal('99,3');
+    });
+
+    it('should do nothing to already valid single experiment', () => {
+      const element = document.createElement('div');
+      element.setAttribute(AMP_EXPERIMENT_ATTRIBUTE, '99');
+      addAmpExperimentIdToElement(undefined, element);
+      expect(element.getAttribute(AMP_EXPERIMENT_ATTRIBUTE)).to.equal('99');
+    });
+
+    it('should append experiment to already valid multiple experiments', () => {
+      const element = document.createElement('div');
+      element.setAttribute(AMP_EXPERIMENT_ATTRIBUTE, '99,77,11,0122345');
+      addAmpExperimentIdToElement('3', element);
+      expect(element.getAttribute(AMP_EXPERIMENT_ATTRIBUTE)).to.equal(
+        '99,77,11,0122345,3'
+      );
+    });
+
+    it('should should replace existing invalid experiments', () => {
+      const element = document.createElement('div');
+      element.setAttribute(AMP_EXPERIMENT_ATTRIBUTE, '99,14,873,k,44');
+      addAmpExperimentIdToElement('3', element);
+      expect(element.getAttribute(AMP_EXPERIMENT_ATTRIBUTE)).to.equal('3');
+    });
+  });
+
   describe('#isInExperiment', () => {
     it('should return false for empty element and any query', () => {
       const element = document.createElement('div');
diff --git a/ads/google/a4a/test/test-utils.js b/ads/google/a4a/test/test-utils.js
index 3fe90f7578080..800f6965a72c3 100644
--- a/ads/google/a4a/test/test-utils.js
+++ b/ads/google/a4a/test/test-utils.js
@@ -17,8 +17,8 @@
 import '../../../../extensions/amp-ad/0.1/amp-ad-ui';
 import '../../../../extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler';
 import * as IniLoad from '../../../../src/ini-load';
-import {CONSENT_POLICY_STATE} from '../../../../src/consent-state';
 import {
+  AMP_EXPERIMENT_ATTRIBUTE,
   EXPERIMENT_ATTRIBUTE,
   TRUNCATION_PARAM,
   ValidAdContainerTypes,
@@ -32,11 +32,14 @@ import {
   getEnclosingContainerTypes,
   getIdentityToken,
   getIdentityTokenRequestUrl,
+  getServeNpaPromise,
   googleAdUrl,
   groupAmpAdsByType,
   maybeAppendErrorParameter,
   mergeExperimentIds,
 } from '../utils';
+import {CONSENT_POLICY_STATE} from '../../../../src/core/constants/consent-state';
+import {GEO_IN_GROUP} from '../../../../extensions/amp-geo/0.1/amp-geo-in-group';
 import {MockA4AImpl} from '../../../../extensions/amp-a4a/0.1/test/utils';
 import {Services} from '../../../../src/services';
 import {buildUrl} from '../shared/url-builder';
@@ -46,6 +49,7 @@ import {installDocService} from '../../../../src/service/ampdoc-impl';
 import {installExtensionsService} from '../../../../src/service/extensions-impl';
 import {installXhrService} from '../../../../src/service/xhr-impl';
 import {toggleExperiment} from '../../../../src/experiments';
+import {user} from '../../../../src/log';
 
 function setupForAdTesting(fixture) {
   installDocService(fixture.win, /* isSingleDoc */ true);
@@ -68,23 +72,25 @@ function noopMethods(
   ampdoc,
   sandbox,
   pageLayoutBox = {
-    top: 11,
-    left: 12,
-    right: 0,
-    bottom: 0,
+    top: 11.1,
+    left: 12.1,
     width: 0,
     height: 0,
   }
 ) {
   const noop = () => {};
-  impl.element.build = noop;
+  impl.element.buildInternal = noop;
   impl.element.getPlaceholder = noop;
   impl.element.createPlaceholder = noop;
   sandbox.stub(impl, 'getAmpDoc').returns(ampdoc);
-  sandbox.stub(impl, 'getPageLayoutBox').returns(pageLayoutBox);
+  sandbox.stub(impl.element, 'offsetParent').value(null);
+  sandbox.stub(impl.element, 'offsetTop').value(pageLayoutBox.top);
+  sandbox.stub(impl.element, 'offsetLeft').value(pageLayoutBox.left);
+  sandbox.stub(impl.element, 'offsetWidth').value(pageLayoutBox.width);
+  sandbox.stub(impl.element, 'offsetHeight').value(pageLayoutBox.height);
 }
 
-describe('Google A4A utils', () => {
+describes.sandboxed('Google A4A utils', {}, (env) => {
   //TODO: Add tests for other utils functions.
 
   describe('#additionalDimensions', () => {
@@ -132,14 +138,59 @@ describe('Google A4A utils', () => {
       },
     };
 
+    const btrConfig = {
+      transport: {beacon: false, xhrpost: false},
+      requests: {
+        btr1: 'https://example.test?id=1',
+        btr2: 'https://example.test?id=2',
+      },
+      triggers: {
+        beginToRender: {
+          on: 'ini-load',
+          request: ['btr1', 'btr2'],
+          selector: 'amp-ad',
+          selectionMethod: 'closest',
+        },
+      },
+    };
+
+    const fullConfig = {
+      transport: {beacon: false, xhrpost: false},
+      requests: {
+        visibility1: 'https://foo.com?hello=world',
+        visibility2: 'https://bar.com?a=b',
+        btr1: 'https://example.test?id=1',
+        btr2: 'https://example.test?id=2',
+      },
+      triggers: {
+        continuousVisible: {
+          on: 'visible',
+          request: ['visibility1', 'visibility2'],
+          visibilitySpec: {
+            selector: 'amp-ad',
+            selectionMethod: 'closest',
+            visiblePercentageMin: 50,
+            continuousTimeMin: 1000,
+          },
+        },
+        beginToRender: {
+          on: 'ini-load',
+          request: ['btr1', 'btr2'],
+          selector: 'amp-ad',
+          selectionMethod: 'closest',
+        },
+      },
+    };
+
     it('should extract correct config from header', () => {
       return createIframePromise().then((fixture) => {
         setupForAdTesting(fixture);
         let url;
+        let btrUrl;
         const headers = {
           get(name) {
             if (name == 'X-AmpAnalytics') {
-              return JSON.stringify({url});
+              return JSON.stringify({url, btrUrl});
             }
             if (name == 'X-QQID') {
               return 'qqid_string';
@@ -158,7 +209,7 @@ describe('Google A4A utils', () => {
           'width': '200',
           'height': '50',
           'type': 'adsense',
-          'data-experiment-id': '00000001,0000002',
+          [EXPERIMENT_ATTRIBUTE]: '00000001,0000002',
         });
         const a4a = new MockA4AImpl(element);
         url = 'not an array';
@@ -168,13 +219,27 @@ describe('Google A4A utils', () => {
         allowConsoleError(
           () => expect(extractAmpAnalyticsConfig(a4a, headers)).to.be.null
         );
+
         url = [];
+        btrUrl = [];
         expect(extractAmpAnalyticsConfig(a4a, headers)).to.not.be.ok;
         expect(extractAmpAnalyticsConfig(a4a, headers)).to.be.null;
 
         url = ['https://foo.com?hello=world', 'https://bar.com?a=b'];
-        const config = extractAmpAnalyticsConfig(a4a, headers);
+        btrUrl = [];
+        let config = extractAmpAnalyticsConfig(a4a, headers);
         expect(config).to.deep.equal(builtConfig);
+
+        url = [];
+        btrUrl = ['https://example.test?id=1', 'https://example.test?id=2'];
+        config = extractAmpAnalyticsConfig(a4a, headers);
+        expect(config).to.deep.equal(btrConfig);
+
+        url = ['https://foo.com?hello=world', 'https://bar.com?a=b'];
+        btrUrl = ['https://example.test?id=1', 'https://example.test?id=2'];
+        config = extractAmpAnalyticsConfig(a4a, headers);
+        expect(config).to.deep.equal(fullConfig);
+
         headers.has = function (name) {
           expect(name).to.equal('X-AmpAnalytics');
           return false;
@@ -184,7 +249,7 @@ describe('Google A4A utils', () => {
     });
 
     it('should add the correct CSI signals', () => {
-      window.sandbox
+      env.sandbox
         .stub(Services, 'documentInfoForDoc')
         .returns({pageViewId: 777});
       const mockElement = {
@@ -192,6 +257,8 @@ describe('Google A4A utils', () => {
           switch (name) {
             case EXPERIMENT_ATTRIBUTE:
               return '00000001,00000002';
+            case AMP_EXPERIMENT_ATTRIBUTE:
+              return '103,204';
             case 'type':
               return 'fake-type';
             case 'data-amp-slot-index':
@@ -226,6 +293,7 @@ describe('Google A4A utils', () => {
         new RegExp(`(\\?|&)met\\.a4a\\.0=${metricName}\\.-?[0-9]+(&|$)`),
         /(\?|&)dt=-?[0-9]+(&|$)/,
         /(\?|&)e\.0=00000001%2C00000002(&|$)/,
+        /(\?|&)aexp=103!204(&|$)/,
         /(\?|&)rls=\$internalRuntimeVersion\$(&|$)/,
         /(\?|&)adt.0=fake-type(&|$)/,
       ];
@@ -320,13 +388,13 @@ describe('Google A4A utils', () => {
           'height': '50',
         });
         const impl = new MockA4AImpl(elem);
-        noopMethods(impl, fixture.ampdoc, window.sandbox);
-        return fixture.addElement(elem).then(() => {
-          return googleAdUrl(impl, '', 0, [], []).then((url1) => {
+        noopMethods(impl, fixture.ampdoc, env.sandbox);
+        return fixture.addElement(elem).then(() =>
+          googleAdUrl(impl, '', 0, [], []).then((url1) => {
             expect(url1).to.match(/ady=11/);
             expect(url1).to.match(/adx=12/);
-          });
-        });
+          })
+        );
       });
     });
 
@@ -341,21 +409,19 @@ describe('Google A4A utils', () => {
           'height': '50',
         });
         const impl = new MockA4AImpl(elem);
-        noopMethods(impl, fixture.ampdoc, window.sandbox);
+        noopMethods(impl, fixture.ampdoc, env.sandbox);
         const getRect = () => {
           return {'width': 100, 'height': 200};
         };
         const getSize = () => {
           return {'width': 100, 'height': 200};
         };
-        const getScrollLeft = () => 12;
-        const getScrollTop = () => 34;
-        const viewportStub = window.sandbox.stub(Services, 'viewportForDoc');
+        const getScrollLeft = () => 12.1;
+        const getScrollTop = () => 34.2;
+        const viewportStub = env.sandbox.stub(Services, 'viewportForDoc');
         viewportStub.returns({getRect, getSize, getScrollTop, getScrollLeft});
-        return fixture.addElement(elem).then(() => {
-          return googleAdUrl(impl, '', 0, {}, []).then((url1) => {
-            expect(url1).to.match(/scr_x=12&scr_y=34/);
-          });
+        return googleAdUrl(impl, '', 0, {}, []).then((url1) => {
+          expect(url1).to.match(/scr_x=12&scr_y=34/);
         });
       });
     });
@@ -371,13 +437,15 @@ describe('Google A4A utils', () => {
           'type': 'adsense',
           'width': '320',
           'height': '50',
-          'data-experiment-id': '123,456',
+          [EXPERIMENT_ATTRIBUTE]: '123,456',
+          [AMP_EXPERIMENT_ATTRIBUTE]: '111,222',
         });
         const impl = new MockA4AImpl(elem);
-        noopMethods(impl, fixture.ampdoc, window.sandbox);
+        noopMethods(impl, fixture.ampdoc, env.sandbox);
         return fixture.addElement(elem).then(() => {
           return googleAdUrl(impl, '', 0, {}, ['789', '098']).then((url1) => {
             expect(url1).to.match(/eid=123%2C456%2C789%2C098/);
+            expect(url1).to.match(/aexp=111!222/);
           });
         });
       });
@@ -394,7 +462,7 @@ describe('Google A4A utils', () => {
           'height': '50',
         });
         const impl = new MockA4AImpl(elem);
-        noopMethods(impl, fixture.ampdoc, window.sandbox);
+        noopMethods(impl, fixture.ampdoc, env.sandbox);
         impl.win.AMP_CONFIG = {type: 'production'};
         impl.win.location.hash = 'foo,deid=123456,654321,bar';
         return fixture.addElement(elem).then(() => {
@@ -416,7 +484,7 @@ describe('Google A4A utils', () => {
           'height': '50',
         });
         const impl = new MockA4AImpl(elem);
-        noopMethods(impl, fixture.ampdoc, window.sandbox);
+        noopMethods(impl, fixture.ampdoc, env.sandbox);
         impl.win.gaGlobal = {cid: 'foo', hid: 'bar'};
         return fixture.addElement(elem).then(() => {
           return googleAdUrl(impl, '', 0, [], []).then((url) => {
@@ -438,8 +506,8 @@ describe('Google A4A utils', () => {
           'height': '50',
         });
         const impl = new MockA4AImpl(elem);
-        noopMethods(impl, fixture.ampdoc, window.sandbox);
-        const createElementStub = window.sandbox.stub(
+        noopMethods(impl, fixture.ampdoc, env.sandbox);
+        const createElementStub = env.sandbox.stub(
           impl.win.document,
           'createElement'
         );
@@ -467,8 +535,8 @@ describe('Google A4A utils', () => {
           'height': '50',
         });
         const impl = new MockA4AImpl(elem);
-        noopMethods(impl, fixture.ampdoc, window.sandbox);
-        const createElementStub = window.sandbox.stub(
+        noopMethods(impl, fixture.ampdoc, env.sandbox);
+        const createElementStub = env.sandbox.stub(
           impl.win.document,
           'createElement'
         );
@@ -494,9 +562,9 @@ describe('Google A4A utils', () => {
           'height': '50',
         });
         const impl = new MockA4AImpl(elem);
-        noopMethods(impl, fixture.ampdoc, window.sandbox);
+        noopMethods(impl, fixture.ampdoc, env.sandbox);
         impl.win.SVGElement = undefined;
-        const createElementStub = window.sandbox.stub(
+        const createElementStub = env.sandbox.stub(
           impl.win.document,
           'createElement'
         );
@@ -524,11 +592,11 @@ describe('Google A4A utils', () => {
           'height': '50',
         });
         const impl = new MockA4AImpl(elem);
-        noopMethods(impl, fixture.ampdoc, window.sandbox);
-        window.sandbox
+        noopMethods(impl, fixture.ampdoc, env.sandbox);
+        env.sandbox
           .stub(Services.viewerForDoc(impl.getAmpDoc()), 'getReferrerUrl')
           .returns(new Promise(() => {}));
-        const createElementStub = window.sandbox.stub(
+        const createElementStub = env.sandbox.stub(
           impl.win.document,
           'createElement'
         );
@@ -553,7 +621,7 @@ describe('Google A4A utils', () => {
         doc.win = fixture.win;
         const elem = createElementWithAttributes(doc, 'amp-a4a', {});
         const impl = new MockA4AImpl(elem);
-        noopMethods(impl, fixture.ampdoc, window.sandbox);
+        noopMethods(impl, fixture.ampdoc, env.sandbox);
         return fixture.addElement(elem).then(() => {
           return googleAdUrl(impl, '', Date.now(), [], []).then((url) => {
             expect(url).to.match(/[&?]bdt=[1-9][0-9]*[&$]/);
@@ -921,7 +989,7 @@ describe('Google A4A utils', () => {
     });
 
     it('should include viewer lastVisibleTime', () => {
-      window.sandbox.stub(ampdoc, 'getLastVisibleTime').returns(300);
+      env.sandbox.stub(ampdoc, 'getLastVisibleTime').returns(300);
 
       const vars = getCsiAmpAnalyticsVariables('trigger', a4a, null);
       expect(vars['viewerLastVisibleTime']).to.be.a('number');
@@ -985,6 +1053,71 @@ describe('Google A4A utils', () => {
       expect(correlator).to.be.above(0);
     });
   });
+
+  describes.realWin('#getServeNpaPromise', {}, (env) => {
+    let win, doc, element, geoService;
+
+    beforeEach(() => {
+      win = env.win;
+      doc = win.document;
+      element = doc.createElement('amp-ad');
+      geoService = {
+        isInCountryGroup(country) {
+          switch (country) {
+            case 'usca':
+              return GEO_IN_GROUP.IN;
+            case 'gdpr':
+              return GEO_IN_GROUP.NOT_IN;
+            default:
+              return GEO_IN_GROUP.NOT_DEFINED;
+          }
+        },
+      };
+    });
+
+    it('should return false if no attribute found', async () => {
+      expect(await getServeNpaPromise(element)).to.false;
+    });
+
+    it('should return true, regardless of geo location if empty string', async () => {
+      element.setAttribute('always-serve-npa', '');
+      expect(await getServeNpaPromise(element)).to.true;
+    });
+
+    it('should return if doc is served from a defined geo group', async () => {
+      env.sandbox
+        .stub(Services, 'geoForDocOrNull')
+        .returns(Promise.resolve(geoService));
+      element.setAttribute('always-serve-npa', 'gdpr,usca');
+      expect(await getServeNpaPromise(element)).to.true;
+    });
+
+    it('should return false when doc is in an undefined group or not in', async () => {
+      const warnSpy = env.sandbox.stub(user(), 'warn');
+      env.sandbox
+        .stub(Services, 'geoForDocOrNull')
+        .returns(Promise.resolve(geoService));
+
+      // Undefined group
+      element.setAttribute('always-serve-npa', 'tx');
+      expect(await getServeNpaPromise(element)).to.false;
+      expect(warnSpy.args[0][0]).to.match(/AMP-AD/);
+      expect(warnSpy.args[0][1]).to.match(/Geo group "tx" was not defined./);
+      expect(warnSpy).to.have.been.calledOnce;
+      // Not in
+      element.setAttribute('always-serve-npa', 'gdpr');
+      expect(await getServeNpaPromise(element)).to.false;
+    });
+
+    it('should return true when geoService is null', async () => {
+      geoService = null;
+      env.sandbox
+        .stub(Services, 'geoForDocOrNull')
+        .returns(Promise.resolve(geoService));
+      element.setAttribute('always-serve-npa', 'gdpr');
+      expect(await getServeNpaPromise(element)).to.true;
+    });
+  });
 });
 
 describes.realWin('#groupAmpAdsByType', {amp: true}, (env) => {
@@ -1080,14 +1213,13 @@ describes.realWin('#groupAmpAdsByType', {amp: true}, (env) => {
       expect(result['bar'].length).to.equal(2);
       expect(result['hello']).to.be.ok;
       expect(result['hello'].length).to.equal(1);
-      return Promise.all(
-        result['bar'].concat(result['hello'])
-      ).then((baseElements) =>
-        baseElements.forEach((baseElement) =>
-          expect(baseElement.element.getAttribute('type')).to.equal(
-            'doubleclick'
+      return Promise.all(result['bar'].concat(result['hello'])).then(
+        (baseElements) =>
+          baseElements.forEach((baseElement) =>
+            expect(baseElement.element.getAttribute('type')).to.equal(
+              'doubleclick'
+            )
           )
-        )
       );
     });
   });
diff --git a/ads/google/a4a/traffic-experiments.js b/ads/google/a4a/traffic-experiments.js
index 93e94c24fd0f1..94982fdfdb420 100644
--- a/ads/google/a4a/traffic-experiments.js
+++ b/ads/google/a4a/traffic-experiments.js
@@ -22,12 +22,13 @@
  * impacts on click-throughs.
  */
 
-import {EXPERIMENT_ATTRIBUTE, mergeExperimentIds} from './utils';
 import {
-  ExperimentInfo, // eslint-disable-line no-unused-vars
-} from '../../../src/experiments';
+  AMP_EXPERIMENT_ATTRIBUTE,
+  EXPERIMENT_ATTRIBUTE,
+  mergeExperimentIds,
+} from './utils';
 import {Services} from '../../../src/services';
-import {parseQueryString} from '../../../src/url';
+import {parseQueryString} from '../../../src/core/types/string/url';
 
 /** @typedef {{
  *    control: string,
@@ -141,18 +142,42 @@ export function validateExperimentIds(idList) {
  *
  * @param {string|undefined} experimentId  ID to add to the element.
  * @param {Element} element to add the experiment ID to.
+ * @param {string} attr the attribute name that holds the experiments
  */
-export function addExperimentIdToElement(experimentId, element) {
+function addExpIdToElement(experimentId, element, attr) {
   if (!experimentId) {
     return;
   }
-  const currentEids = element.getAttribute(EXPERIMENT_ATTRIBUTE);
+  const currentEids = element.getAttribute(attr);
   if (currentEids && validateExperimentIds(parseExperimentIds(currentEids))) {
-    element.setAttribute(
-      EXPERIMENT_ATTRIBUTE,
-      mergeExperimentIds([experimentId], currentEids)
-    );
+    element.setAttribute(attr, mergeExperimentIds([experimentId], currentEids));
   } else {
-    element.setAttribute(EXPERIMENT_ATTRIBUTE, experimentId);
+    element.setAttribute(attr, experimentId);
   }
 }
+
+/**
+ * Adds a single experimentID to an element iff it's a valid experiment ID.
+ * No-ops if the experimentId is undefined.
+ *
+ * @param {string|undefined} experimentId  ID to add to the element.
+ * @param {Element} element to add the experiment ID to.
+ */
+export function addExperimentIdToElement(experimentId, element) {
+  addExpIdToElement(experimentId, element, EXPERIMENT_ATTRIBUTE);
+}
+
+/**
+ * Adds a single AMP experimentID to an element iff it's a valid experiment ID.
+ * No-ops if the experimentId is undefined.
+ *
+ * Note that AMP experiment brances do not have their own unique IDs. Instead,
+ * we generate a pseudo ID for them by concatenating the id with the
+ * experiment's value.
+ *
+ * @param {string|undefined} experimentId  ID to add to the element.
+ * @param {Element} element to add the experiment ID to.
+ */
+export function addAmpExperimentIdToElement(experimentId, element) {
+  addExpIdToElement(experimentId, element, AMP_EXPERIMENT_ATTRIBUTE);
+}
diff --git a/ads/google/a4a/utils.js b/ads/google/a4a/utils.js
index 47ac02268f0ea..03444de5da966 100644
--- a/ads/google/a4a/utils.js
+++ b/ads/google/a4a/utils.js
@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import {CONSENT_POLICY_STATE} from '../../../src/consent-state';
-import {DomFingerprint} from '../../../src/utils/dom-fingerprint';
+import {CONSENT_POLICY_STATE} from '../../../src/core/constants/consent-state';
+import {DomFingerprint} from '../../../src/core/dom/fingerprint';
+import {GEO_IN_GROUP} from '../../../extensions/amp-geo/0.1/amp-geo-in-group';
 import {Services} from '../../../src/services';
 import {buildUrl} from './shared/url-builder';
-import {dev, devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dev, devAssert, user} from '../../../src/log';
+import {dict} from '../../../src/core/types/object';
 import {
   getBinaryType,
   isExperimentOn,
@@ -29,9 +30,10 @@ import {getConsentPolicyState} from '../../../src/consent';
 import {getMeasuredResources} from '../../../src/ini-load';
 import {getMode} from '../../../src/mode';
 import {getOrCreateAdCid} from '../../../src/ad-cid';
+import {getPageLayoutBoxBlocking} from '../../../src/utils/page-layout-box';
 import {getTimingDataSync} from '../../../src/service/variable-source';
 import {internalRuntimeVersion} from '../../../src/internal-version';
-import {parseJson} from '../../../src/json';
+import {parseJson} from '../../../src/core/types/object/json';
 import {whenUpgradedToCustomElement} from '../../../src/dom';
 
 /** @type {string}  */
@@ -47,20 +49,6 @@ const AmpAdImplementation = {
   AMP_AD_IFRAME_GET: '5',
 };
 
-/** @const {!{id: string, control: string, experiment: string}} */
-export const AMP_AD_NO_CENTER_CSS_EXP = {
-  id: 'amp-ad-no-center-css',
-  control: '21065897',
-  experiment: '21065898',
-};
-
-/** @const {!{id: string, control: string, experiment: string}} */
-export const RENDER_ON_IDLE_FIX_EXP = {
-  id: 'render-on-idle-fix',
-  control: '21066311',
-  experiment: '21066312',
-};
-
 /** @const {!Object} */
 export const ValidAdContainerTypes = {
   'AMP-CAROUSEL': 'ac',
@@ -87,7 +75,7 @@ export const QQID_HEADER = 'X-QQID';
 export const SANDBOX_HEADER = 'amp-ff-sandbox';
 
 /**
- * Element attribute that stores experiment IDs.
+ * Element attribute that stores Google ads experiment IDs.
  *
  * Note: This attribute should be used only for tracking experimental
  * implementations of AMP tags, e.g., by AMPHTML implementors.  It should not be
@@ -98,6 +86,18 @@ export const SANDBOX_HEADER = 'amp-ff-sandbox';
  */
 export const EXPERIMENT_ATTRIBUTE = 'data-experiment-id';
 
+/**
+ * Element attribute that stores AMP experiment IDs.
+ *
+ * Note: This attribute should be used only for tracking experimental
+ * implementations of AMP tags, e.g., by AMPHTML implementors.  It should not be
+ * added by a publisher page.
+ *
+ * @const {string}
+ * @visibleForTesting
+ */
+export const AMP_EXPERIMENT_ATTRIBUTE = 'data-amp-experiment-id';
+
 /** @typedef {{urls: !Array<string>}}
  */
 export let AmpAnalyticsConfigDef;
@@ -114,7 +114,8 @@ export let NameframeExperimentConfig;
 export const TRUNCATION_PARAM = {name: 'trunc', value: '1'};
 
 /** @const {Object} */
-const CDN_PROXY_REGEXP = /^https:\/\/([a-zA-Z0-9_-]+\.)?cdn\.ampproject\.org((\/.*)|($))+/;
+const CDN_PROXY_REGEXP =
+  /^https:\/\/([a-zA-Z0-9_-]+\.)?cdn\.ampproject\.org((\/.*)|($))+/;
 
 /**
  * Returns the value of some navigation timing parameter.
@@ -198,21 +199,24 @@ export function isReportingEnabled(ampElement) {
  */
 export function googleBlockParameters(a4a, opt_experimentIds) {
   const {element: adElement, win} = a4a;
-  const slotRect = a4a.getPageLayoutBox();
+  const slotRect = getPageLayoutBoxBlocking(adElement);
   const iframeDepth = iframeNestingDepth(win);
   const enclosingContainers = getEnclosingContainerTypes(adElement);
-  let eids = adElement.getAttribute('data-experiment-id');
+  let eids = adElement.getAttribute(EXPERIMENT_ATTRIBUTE);
   if (opt_experimentIds) {
     eids = mergeExperimentIds(opt_experimentIds, eids);
   }
+  const aexp = adElement.getAttribute(AMP_EXPERIMENT_ATTRIBUTE);
   return {
     'adf': DomFingerprint.generate(adElement),
     'nhd': iframeDepth,
     'eid': eids,
-    'adx': slotRect.left,
-    'ady': slotRect.top,
+    'adx': Math.round(slotRect.left),
+    'ady': Math.round(slotRect.top),
     'oid': '2',
     'act': enclosingContainers.length ? enclosingContainers.join() : null,
+    // aexp URL param is separated by `!`, not `,`.
+    'aexp': aexp ? aexp.replace(/,/g, '!') : null,
   };
 }
 
@@ -286,14 +290,18 @@ export function googlePageParameters(a4a, startTime) {
       dev().expectedError('AMP-A4A', 'Referrer timeout!');
       return '';
     });
-  const domLoading = getNavigationTiming(win, 'domLoading');
+  // Set dom loading time to first visible if page started in prerender state
+  // determined by truthy value for visibilityState param.
+  const domLoading = a4a.getAmpDoc().getParam('visibilityState')
+    ? a4a.getAmpDoc().getLastVisibleTime()
+    : getNavigationTiming(win, 'domLoading');
   return Promise.all([
     getOrCreateAdCid(ampDoc, 'AMP_ECID_GOOGLE', '_ga'),
     referrerPromise,
   ]).then((promiseResults) => {
     const clientId = promiseResults[0];
     const referrer = promiseResults[1];
-    const {pageViewId, canonicalUrl} = Services.documentInfoForDoc(ampDoc);
+    const {canonicalUrl, pageViewId} = Services.documentInfoForDoc(ampDoc);
     // Read by GPT for GA/GPT integration.
     win.gaGlobal = win.gaGlobal || {cid: clientId, hid: pageViewId};
     const {screen} = win;
@@ -324,8 +332,8 @@ export function googlePageParameters(a4a, startTime) {
       'ish': win != win.top ? viewportSize.height : null,
       'art': getAmpRuntimeTypeParameter(win),
       'vis': visibilityStateCodes[visibilityState] || '0',
-      'scr_x': viewport.getScrollLeft(),
-      'scr_y': viewport.getScrollTop(),
+      'scr_x': Math.round(viewport.getScrollLeft()),
+      'scr_y': Math.round(viewport.getScrollTop()),
       'bc': getBrowserCapabilitiesBitmap(win) || null,
       'debug_experiment_id':
         (/(?:#|,)deid=([\d,]+)/i.exec(win.location.hash) || [])[1] || null,
@@ -516,7 +524,7 @@ function makeCorrelator(pageViewId, opt_clientId) {
 /**
  * Collect additional dimensions for the brdim parameter.
  * @param {!Window} win The window for which we read the browser dimensions.
- * @param {{width: number, height: number}|null} viewportSize
+ * @param {?{width: number, height: number}} viewportSize
  * @return {string}
  * @visibleForTesting
  */
@@ -643,7 +651,8 @@ export function getCsiAmpAnalyticsVariables(analyticsTrigger, a4a, qqid) {
 }
 
 /**
- * Extracts configuration used to build amp-analytics element for active view.
+ * Extracts configuration used to build amp-analytics element for active view
+ * and begin to render.
  *
  * @param {!../../../extensions/amp-a4a/0.1/amp-a4a.AmpA4A} a4a
  * @param {!Headers} responseHeaders
@@ -659,36 +668,35 @@ export function extractAmpAnalyticsConfig(a4a, responseHeaders) {
     const analyticsConfig = parseJson(
       responseHeaders.get(AMP_ANALYTICS_HEADER)
     );
-    devAssert(Array.isArray(analyticsConfig['url']));
-    const urls = analyticsConfig['url'];
-    if (!urls.length) {
+
+    const acUrls = analyticsConfig['url'];
+    const btrUrls = analyticsConfig['btrUrl'];
+    if (
+      (acUrls && !Array.isArray(acUrls)) ||
+      (btrUrls && !Array.isArray(btrUrls))
+    ) {
+      dev().error(
+        'AMP-A4A',
+        'Invalid analytics',
+        responseHeaders.get(AMP_ANALYTICS_HEADER)
+      );
+    }
+    const hasActiveViewRequests = Array.isArray(acUrls) && acUrls.length;
+    const hasBeginToRenderRequests = Array.isArray(btrUrls) && btrUrls.length;
+    if (!hasActiveViewRequests && !hasBeginToRenderRequests) {
       return null;
     }
-
-    const config = /** @type {JsonObject}*/ ({
+    const config = dict({
       'transport': {'beacon': false, 'xhrpost': false},
-      'triggers': {
-        'continuousVisible': {
-          'on': 'visible',
-          'visibilitySpec': {
-            'selector': 'amp-ad',
-            'selectionMethod': 'closest',
-            'visiblePercentageMin': 50,
-            'continuousTimeMin': 1000,
-          },
-        },
-      },
+      'requests': {},
+      'triggers': {},
     });
-
-    // Discover and build visibility endpoints.
-    const requests = dict();
-    for (let idx = 1; idx <= urls.length; idx++) {
-      // TODO: Ensure url is valid and not freeform JS?
-      requests[`visibility${idx}`] = `${urls[idx - 1]}`;
+    if (hasActiveViewRequests) {
+      generateActiveViewRequest(config, acUrls);
+    }
+    if (hasBeginToRenderRequests) {
+      generateBeginToRenderRequest(config, btrUrls);
     }
-    // Security review needed here.
-    config['requests'] = requests;
-    config['triggers']['continuousVisible']['request'] = Object.keys(requests);
     return config;
   } catch (err) {
     dev().error(
@@ -701,6 +709,49 @@ export function extractAmpAnalyticsConfig(a4a, responseHeaders) {
   return null;
 }
 
+/**
+ * @param {!JsonObject} config
+ * @param {!Array<string>} urls
+ */
+function generateActiveViewRequest(config, urls) {
+  config['triggers']['continuousVisible'] = dict({
+    'request': [],
+    'on': 'visible',
+    'visibilitySpec': {
+      'selector': 'amp-ad',
+      'selectionMethod': 'closest',
+      'visiblePercentageMin': 50,
+      'continuousTimeMin': 1000,
+    },
+  });
+  for (let idx = 0; idx < urls.length; idx++) {
+    // TODO: Ensure url is valid and not freeform JS?
+    config['requests'][`visibility${idx + 1}`] = `${urls[idx]}`;
+    config['triggers']['continuousVisible']['request'].push(
+      `visibility${idx + 1}`
+    );
+  }
+}
+
+/**
+ * @param {!JsonObject} config
+ * @param {!Array<string>} urls
+ */
+function generateBeginToRenderRequest(config, urls) {
+  config['triggers']['beginToRender'] = dict({
+    'request': [],
+    'on': 'ini-load',
+    'selector': 'amp-ad',
+    'selectionMethod': 'closest',
+  });
+
+  for (let idx = 0; idx < urls.length; idx++) {
+    // TODO: Ensure url is valid and not freeform JS?
+    config['requests'][`btr${idx + 1}`] = `${urls[idx]}`;
+    config['triggers']['beginToRender']['request'].push(`btr${idx + 1}`);
+  }
+}
+
 /**
  * Add new experiment IDs to a (possibly empty) existing set of experiment IDs.
  * The {@code currentIdString} may be {@code null} or {@code ''}, but if it is
@@ -746,6 +797,11 @@ export function addCsiSignalsToAmpAnalyticsConfig(
   const correlator = getCorrelator(win, element);
   const slotId = Number(element.getAttribute('data-amp-slot-index'));
   const eids = encodeURIComponent(element.getAttribute(EXPERIMENT_ATTRIBUTE));
+  let aexp = element.getAttribute(AMP_EXPERIMENT_ATTRIBUTE);
+  if (aexp) {
+    // aexp URL param is separated by `!`, not `,`.
+    aexp = aexp.replace(/,/g, '!');
+  }
   const adType = element.getAttribute('type');
   const initTime = Number(
     getTimingDataSync(win, 'navigationStart') || Date.now()
@@ -760,6 +816,7 @@ export function addCsiSignalsToAmpAnalyticsConfig(
     `&c=${correlator}&slotId=${slotId}&qqid.${slotId}=${qqid}` +
     `&dt=${initTime}` +
     (eids != 'null' ? `&e.${slotId}=${eids}` : '') +
+    (aexp ? `&aexp=${aexp}` : '') +
     `&rls=${internalRuntimeVersion()}&adt.${slotId}=${adType}`;
   const isAmpSuffix = isVerifiedAmpCreative ? 'Friendly' : 'CrossDomain';
   config['triggers']['continuousVisibleIniLoad'] = {
@@ -846,6 +903,8 @@ export function getBinaryTypeNumericalCode(type) {
       'control': '1',
       'experimental': '2',
       'rc': '3',
+      'nightly': '4',
+      'nightly-control': '5',
       'experimentA': '10',
       'experimentB': '11',
       'experimentC': '12',
@@ -1051,3 +1110,37 @@ export function getAmpRuntimeTypeParameter(win) {
   const art = getBinaryTypeNumericalCode(getBinaryType(win));
   return isCdnProxy(win) && art != '0' ? art : null;
 }
+
+/**
+ * Checks if the `always-serve-npa` attribute is present and valid
+ * based on the geolocation.
+ * @param {!Element} element
+ * @return {!Promise<boolean>}
+ * @visibleForTesting
+ */
+export function getServeNpaPromise(element) {
+  if (!element.hasAttribute('always-serve-npa')) {
+    return Promise.resolve(false);
+  }
+  const npaSignal = element.getAttribute('always-serve-npa');
+  if (npaSignal == '') {
+    return Promise.resolve(true);
+  }
+  return Services.geoForDocOrNull(element).then((geoService) => {
+    if (!geoService) {
+      // Err on safe side and signal for NPA.
+      return true;
+    }
+    const locations = npaSignal.split(',');
+    for (let i = 0; i < locations.length; i++) {
+      const geoGroup = geoService.isInCountryGroup(locations[i]);
+      if (geoGroup === GEO_IN_GROUP.IN) {
+        return true;
+      } else if (geoGroup === GEO_IN_GROUP.NOT_DEFINED) {
+        user().warn('AMP-AD', `Geo group "${locations[i]}" was not defined.`);
+      }
+    }
+    // Not in any of the defined geo groups.
+    return false;
+  });
+}
diff --git a/ads/google/adsense.md b/ads/google/adsense.md
index bbd997992676c..a823bced88992 100644
--- a/ads/google/adsense.md
+++ b/ads/google/adsense.md
@@ -34,20 +34,20 @@ limitations under the License.
 
 ## Configuration
 
-For semantics of configuration, please see [ad network documentation](https://support.google.com/adsense/answer/7183212?hl=en). For AdSense for Search and AdSense for Shopping, please see the [CSA AMP ad type](https://github.com/ampproject/amphtml/blob/master/ads/google/csa.md).
+For semantics of configuration, please see [ad network documentation](https://support.google.com/adsense/answer/7183212?hl=en). For AdSense for Search and AdSense for Shopping, please see the [CSA AMP ad type](https://github.com/ampproject/amphtml/blob/main/ads/vendors/csa.md).
 
 Supported parameters:
 
-- data-ad-channel
-- data-ad-client
-- data-ad-slot
-- data-ad-host
-- data-adtest
-- data-auto-format
-- data-full-width
-- data-tag-origin
-- data-language
-- data-matched-content-ui-type
-- data-matched-content-rows-num
-- data-matched-content-columns-num
-- data-npa-on-unknown-consent
+-   data-ad-channel
+-   data-ad-client
+-   data-ad-slot
+-   data-ad-host
+-   data-adtest
+-   data-auto-format
+-   data-full-width
+-   data-tag-origin
+-   data-language
+-   data-matched-content-ui-type
+-   data-matched-content-rows-num
+-   data-matched-content-columns-num
+-   data-npa-on-unknown-consent
diff --git a/ads/google/csa.js b/ads/google/csa.js
deleted file mode 100644
index 0eea294220f38..0000000000000
--- a/ads/google/csa.js
+++ /dev/null
@@ -1,388 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-import {getStyle, setStyle, setStyles} from '../../src/style';
-import {loadScript, validateData} from '../../3p/3p';
-import {tryParseJson} from '../../src/json.js';
-
-// Keep track of current height of AMP iframe
-let currentAmpHeight = null;
-
-// Height of overflow element
-const overflowHeight = 40;
-
-/**
- * Enum for different AdSense Products
- * @enum {number}
- * @visibleForTesting
- */
-export const AD_TYPE = {
-  /** Value if we can't determine which product to request */
-  UNSUPPORTED: 0,
-  /** AdSense for Search */
-  AFS: 1,
-  /** AdSense for Shopping */
-  AFSH: 2,
-  /** AdSense for Shopping, backfilled with AdSense for Search */
-  AFSH_BACKFILL: 3,
-};
-
-/**
- * Request Custom Search Ads (Adsense for Search or AdSense for Shopping).
- * @param {!Window} global The window object of the iframe
- * @param {!Object} data
- */
-export function csa(global, data) {
-  // Get parent width in case we want to override
-  const width = global.document.body./*OK*/ clientWidth;
-
-  validateData(
-    data,
-    [],
-    [
-      'afshPageOptions',
-      'afshAdblockOptions',
-      'afsPageOptions',
-      'afsAdblockOptions',
-      'ampSlotIndex',
-    ]
-  );
-
-  // Add the ad container to the document
-  const containerDiv = global.document.createElement('div');
-  const containerId = 'csacontainer';
-  containerDiv.id = containerId;
-  global.document.getElementById('c').appendChild(containerDiv);
-
-  const pageOptions = {source: 'amp', referer: global.context.referrer};
-  const adblockOptions = {container: containerId};
-
-  // Parse all the options
-  const afshPage = Object.assign(
-    Object(tryParseJson(data['afshPageOptions'])),
-    pageOptions
-  );
-  const afsPage = Object.assign(
-    Object(tryParseJson(data['afsPageOptions'])),
-    pageOptions
-  );
-  const afshAd = Object.assign(
-    Object(tryParseJson(data['afshAdblockOptions'])),
-    adblockOptions
-  );
-  const afsAd = Object.assign(
-    Object(tryParseJson(data['afsAdblockOptions'])),
-    adblockOptions
-  );
-
-  // Special case for AFSh when "auto" is the requested width
-  if (afshAd['width'] == 'auto') {
-    afshAd['width'] = width;
-  }
-
-  // Event listener needed for iOS9 bug
-  global.addEventListener(
-    'orientationchange',
-    orientationChangeHandler.bind(null, global, containerDiv)
-  );
-
-  // Register resize callbacks
-  global.context.onResizeSuccess(
-    resizeSuccessHandler.bind(null, global, containerDiv)
-  );
-  global.context.onResizeDenied(
-    resizeDeniedHandler.bind(null, global, containerDiv)
-  );
-
-  // Only call for ads once the script has loaded
-  loadScript(
-    global,
-    'https://www.google.com/adsense/search/ads.js',
-    requestCsaAds.bind(null, global, data, afsPage, afsAd, afshPage, afshAd)
-  );
-}
-
-/**
- * Resize the AMP iframe if the CSA container changes in size upon rotation.
- * This is needed for an iOS bug found in versions 10.0.1 and below that
- * doesn't properly reflow the iframe upon orientation change.
- * @param {!Window} global The window object of the iframe
- * @param {!Element} containerDiv The CSA container
- */
-function orientationChangeHandler(global, containerDiv) {
-  // Save the height of the container before the event listener triggers
-  const oldHeight = getStyle(containerDiv, 'height');
-  global.setTimeout(() => {
-    // Force DOM reflow and repaint.
-    // eslint-disable-next-line no-unused-vars
-    const ignore = global.document.body./*OK*/ offsetHeight;
-    // Capture new height.
-    let newHeight = getStyle(containerDiv, 'height');
-    // In older versions of iOS, this height will be different because the
-    // container height is resized.
-    // In Chrome and iOS 10.0.2 the height is the same because
-    // the container isn't resized.
-    if (oldHeight != newHeight && newHeight != currentAmpHeight) {
-      // style.height returns "60px" (for example), so turn this into an int
-      newHeight = parseInt(newHeight, 10);
-      // Also update the onclick function to resize to the right height.
-      const overflow = global.document.getElementById('overflow');
-      if (overflow) {
-        overflow.onclick = () =>
-          global.context.requestResize(undefined, newHeight);
-      }
-      // Resize the container to the correct height.
-      global.context.requestResize(undefined, newHeight);
-    }
-  }, 250); /* 250 is time in ms to wait before executing orientation */
-}
-
-/**
- * Hanlder for when a resize request succeeds
- * Hide the overflow and resize the container
- * @param {!Window} global The window object of the iframe
- * @param {!Element} container The CSA container
- * @param {number} requestedHeight The height of the resize request
- * @visibleForTesting
- */
-export function resizeSuccessHandler(global, container, requestedHeight) {
-  currentAmpHeight = requestedHeight;
-  const overflow = global.document.getElementById('overflow');
-  if (overflow) {
-    setStyle(overflow, 'display', 'none');
-    resizeCsa(container, requestedHeight);
-  }
-}
-
-/**
- * Hanlder for When a resize request is denied
- * If the container is larger than the AMP container and an overflow already
- * exists, show the overflow and resize the container to fit inside the AMP
- * container.  If an overflow doesn't exist, create one.
- * @param {!Window} global The window object of the iframe
- * @param {!Element} container The CSA container
- * @param {number} requestedHeight The height of the resize request
- * @visibleForTesting
- */
-export function resizeDeniedHandler(global, container, requestedHeight) {
-  const overflow = global.document.getElementById('overflow');
-  const containerHeight = parseInt(getStyle(container, 'height'), 10);
-  if (containerHeight > currentAmpHeight) {
-    if (overflow) {
-      setStyle(overflow, 'display', '');
-      resizeCsa(container, currentAmpHeight - overflowHeight);
-    } else {
-      createOverflow(global, container, requestedHeight);
-    }
-  }
-}
-
-/**
- * Make a request for either AFS or AFSh
- * @param {!Window} global The window object of the iframe
- * @param {!Object} data The data passed in by the partner
- * @param {!Object} afsP The parsed AFS page options object
- * @param {!Object} afsA The parsed AFS adblock options object
- * @param {!Object} afshP The parsed AFSh page options object
- * @param {!Object} afshA The parsed AFSh adblock options object
- */
-function requestCsaAds(global, data, afsP, afsA, afshP, afshA) {
-  const type = getAdType(data);
-  const callback = callbackWithNoBackfill.bind(null, global);
-  const callbackBackfill = callbackWithBackfill.bind(null, global, afsP, afsA);
-
-  switch (type) {
-    case AD_TYPE.AFS:
-      /** Do not backfill, request AFS */
-      afsA['adLoadedCallback'] = callback;
-      global._googCsa('ads', afsP, afsA);
-      break;
-    case AD_TYPE.AFSH:
-      /** Do not backfill, request AFSh */
-      afshA['adLoadedCallback'] = callback;
-      global._googCsa('plas', afshP, afshA);
-      break;
-    case AD_TYPE.AFSH_BACKFILL:
-      /** Backfill with AFS, request AFSh */
-      afshA['adLoadedCallback'] = callbackBackfill;
-      global._googCsa('plas', afshP, afshA);
-      break;
-  }
-}
-
-/**
- * Helper function to determine which product to request
- * @param {!Object} data The data passed in by the partner
- * @return {number} Enum of ad type
- */
-function getAdType(data) {
-  if (data['afsPageOptions'] != null && data['afshPageOptions'] == null) {
-    return AD_TYPE.AFS;
-  }
-  if (data['afsPageOptions'] == null && data['afshPageOptions'] != null) {
-    return AD_TYPE.AFSH;
-  }
-  if (data['afsPageOptions'] != null && data['afshPageOptions'] != null) {
-    return AD_TYPE.AFSH_BACKFILL;
-  } else {
-    return AD_TYPE.UNSUPPORTED;
-  }
-}
-
-/**
- * The adsLoadedCallback for requests without a backfill.  If ads were returned,
- * resize the iframe.  If ads weren't returned, tell AMP we don't have ads.
- * @param {!Window} global The window object of the iframe
- * @param {string} containerName The name of the CSA container
- * @param {boolean} hasAd Whether or not CSA returned an ad
- * @visibleForTesting
- */
-export function callbackWithNoBackfill(global, containerName, hasAd) {
-  if (hasAd) {
-    resizeIframe(global, containerName);
-  } else {
-    global.context.noContentAvailable();
-  }
-}
-
-/**
- * The adsLoadedCallback for requests with a backfill.  If ads were returned,
- * resize the iframe.  If ads weren't returned, backfill the ads.
- * @param {!Window} global The window object of the iframe
- * @param {!Object} page The parsed AFS page options to backfill the unit with
- * @param {!Object} ad The parsed AFS page options to backfill the unit with
- * @param {string} containerName The name of the CSA container
- * @param {boolean} hasAd Whether or not CSA returned an ad
- * @visibleForTesting
- */
-export function callbackWithBackfill(global, page, ad, containerName, hasAd) {
-  if (hasAd) {
-    resizeIframe(global, containerName);
-  } else {
-    ad['adLoadedCallback'] = callbackWithNoBackfill.bind(null, global);
-    global['_googCsa']('ads', page, ad);
-  }
-}
-
-/**
- * CSA callback function to resize the iframe when ads were returned
- * @param {!Window} global
- * @param {string} containerName Name of the container ('csacontainer')
- * @visibleForTesting
- */
-export function resizeIframe(global, containerName) {
-  // Get actual height of container
-  const container = global.document.getElementById(containerName);
-  const height = container./*OK*/ offsetHeight;
-  // Set initial AMP height
-  currentAmpHeight =
-    global.context.initialIntersection.boundingClientRect.height;
-
-  // If the height of the container is larger than the height of the
-  // initially requested AMP tag, add the overflow element
-  if (height > currentAmpHeight) {
-    createOverflow(global, container, height);
-  }
-  // Attempt to resize to actual CSA container height
-  global.context.requestResize(undefined, height);
-}
-
-/**
- * Helper function to create an overflow element
- * @param {!Window} global The window object of the iframe
- * @param {!Element} container HTML element of the CSA container
- * @param {number} height The full height the CSA container should be when the
- * overflow element is clicked.
- */
-function createOverflow(global, container, height) {
-  const overflow = getOverflowElement(global);
-  // When overflow is clicked, resize to full height
-  overflow.onclick = () => global.context.requestResize(undefined, height);
-  global.document.getElementById('c').appendChild(overflow);
-  // Resize the CSA container to not conflict with overflow
-  resizeCsa(container, currentAmpHeight - overflowHeight);
-}
-
-/**
- * Helper function to create the base overflow element
- * @param {!Window} global The window object of the iframe
- * @return {!Element}
- */
-function getOverflowElement(global) {
-  const overflow = global.document.createElement('div');
-  overflow.id = 'overflow';
-  setStyles(overflow, {
-    position: 'absolute',
-    height: overflowHeight + 'px',
-    width: '100%',
-  });
-  overflow.appendChild(getOverflowLine(global));
-  overflow.appendChild(getOverflowChevron(global));
-  return overflow;
-}
-
-/**
- * Helper function to create a line element for the overflow element
- * @param {!Window} global The window object of the iframe
- * @return {!Element}
- */
-function getOverflowLine(global) {
-  const line = global.document.createElement('div');
-  setStyles(line, {
-    background: 'rgba(0,0,0,.16)',
-    height: '1px',
-  });
-  return line;
-}
-
-/**
- * Helper function to create a chevron element for the overflow element
- * @param {!Window} global The window object of the iframe
- * @return {!Element}
- */
-function getOverflowChevron(global) {
-  const svg =
-    '<svg xmlns="http://www.w3.org/2000/svg" width="36px" ' +
-    'height="36px" viewBox="0 0 48 48" fill="#757575"><path d="M14.83' +
-    ' 16.42L24 25.59l9.17-9.17L36 19.25l-12 12-12-12z"/>' +
-    '<path d="M0-.75h48v48H0z" fill="none"/> </svg>';
-
-  const chevron = global.document.createElement('div');
-  setStyles(chevron, {
-    width: '36px',
-    height: '36px',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    display: 'block',
-  });
-  chevron./*OK*/ innerHTML = svg;
-  return chevron;
-}
-
-/**
- * Helper function to resize the height of a CSA container and its child iframe
- * @param {!Element} container HTML element of the CSA container
- * @param {number} height Height to resize, in pixels
- */
-function resizeCsa(container, height) {
-  const iframe = container.firstElementChild;
-  if (iframe) {
-    setStyles(iframe, {
-      height: height + 'px',
-      width: '100%',
-    });
-  }
-  setStyle(container, 'height', height + 'px');
-}
diff --git a/ads/google/doubleclick.md b/ads/google/doubleclick.md
index d6cd6df532cc0..6d2dcf60e2ffc 100644
--- a/ads/google/doubleclick.md
+++ b/ads/google/doubleclick.md
@@ -16,4 +16,4 @@ limitations under the License.
 
 # Google Ad Manager
 
-Support for Google Ad Manager Delayed Fetch has been deprecated as of March 29, 2018. Please upgrade to Fast Fetch. Visit the <a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-network-doubleclick-impl/amp-ad-network-doubleclick-impl-internal.md">Google Ad Manager Fast Fetch documentation page</a> for more details.
+Support for Google Ad Manager Delayed Fetch has been deprecated as of March 29, 2018. Please upgrade to Fast Fetch. Visit the <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad-network-doubleclick-impl/amp-ad-network-doubleclick-impl-internal.md">Google Ad Manager Fast Fetch documentation page</a> for more details.
diff --git a/ads/google/ima/OWNERS b/ads/google/ima/OWNERS
new file mode 100644
index 0000000000000..cae983b4cc00d
--- /dev/null
+++ b/ads/google/ima/OWNERS
@@ -0,0 +1,14 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {name: 'ampproject/wg-bento'},
+        {name: 'ampproject/wg-components'},
+        {name: 'ampproject/wg-monetization'},
+      ],
+    },
+  ],
+}
diff --git a/ads/google/ima-player-data.js b/ads/google/ima/ima-player-data.js
similarity index 100%
rename from ads/google/ima-player-data.js
rename to ads/google/ima/ima-player-data.js
diff --git a/ads/google/ima/ima-video.js b/ads/google/ima/ima-video.js
new file mode 100644
index 0000000000000..495bdab26fa22
--- /dev/null
+++ b/ads/google/ima/ima-video.js
@@ -0,0 +1,1728 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {CONSENT_POLICY_STATE} from '../../../src/core/constants/consent-state';
+import {ImaPlayerData} from './ima-player-data';
+import {camelCaseToTitleCase, setStyle, toggle} from '../../../src/style';
+import {getData} from '../../../src/event-helper';
+import {htmlFor, htmlRefs, svgFor} from '../../../src/static-template';
+import {isArray, isObject} from '../../../src/core/types';
+import {loadScript} from '../../../3p/3p';
+import {throttle} from '../../../src/core/types/function';
+import {tryParseJson} from '../../../src/core/types/object/json';
+// Source for this constant is css/amp-ima-video-iframe.css
+import {cssText} from '../../../build/amp-ima-video-iframe.css';
+
+/**
+ * Possible player states.
+ * @enum {number}
+ * @private
+ */
+const PlayerStates = {
+  PLAYING: 1,
+  PAUSED: 2,
+};
+
+/**
+ * Icons from Google Material Icons
+ * https://material.io/tools/icons
+ */
+const icons = {
+  play: (svg) => svg`
+    <svg viewBox="0 0 24 24">
+      <path d="M8 5v14l11-7z"></path>
+    </svg>
+  `,
+  pause: (svg) => svg`
+    <svg viewBox="0 0 24 24">
+      <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path>
+      <path d="M0 0h24v24H0z" fill="none"></path>
+    </svg>
+  `,
+  fullscreen: (svg) => svg`
+    <svg viewBox="0 0 24 24">
+      <path d="M0 0h24v24H0z" fill="none"></path>
+      <path
+        d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+      ></path>
+    </svg>
+  `,
+  muted: (svg) => svg`
+    <svg viewBox="0 0 24 24">
+      <path
+        d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"
+      ></path>
+      <path d="M0 0h24v24H0z" fill="none"></path>
+    </svg>
+  `,
+  volumeMax: (svg) => svg`
+    <svg viewBox="0 0 24 24">
+      <path
+        d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
+      ></path>
+      <path d="M0 0h24v24H0z" fill="none"></path>
+    </svg>
+  `,
+};
+
+// References to rendered elements. See renderElements().
+let elements;
+
+// Event indicating user interaction.
+let interactEvent;
+
+// Event for mouse down.
+let mouseDownEvent;
+
+// Event for mouse move.
+let mouseMoveEvent;
+
+// Event for mouse up.
+let mouseUpEvent;
+
+// Percent of the way through the video the user has seeked. Used for seek
+// events.
+let seekPercent;
+
+// Flag tracking whether or not content has played to completion.
+let contentComplete;
+
+// Flag tracking whether or not all ads have been played and been completed.
+let allAdsCompleted;
+
+// Flag tracking if an ad request has failed.
+let adRequestFailed;
+
+// IMA SDK Ad object
+let currentAd;
+
+// IMA SDK AdDisplayContainer object.
+let adDisplayContainer;
+
+// IMA SDK AdsRequest object.
+let adsRequest;
+
+// IMA SDK AdsLoader object.
+let adsLoader;
+
+// IMA SDK AdsManager object;
+let adsManager;
+
+// Timer for UI updates.
+let uiTicker;
+
+// Tracks the current state of the player.
+let playerState;
+
+// Flag for whether or not we are currently in fullscreen mode.
+let fullscreen;
+
+// Width the player should be in fullscreen mode.
+let fullscreenWidth;
+
+// Height the player should be in fullscreen mode.
+let fullscreenHeight;
+
+// "Ad" label used in ad controls.
+let adLabel;
+
+// Flag tracking if ads are currently active.
+let adsActive;
+
+// Flag tracking if playback has started.
+let playbackStarted;
+
+// Flag for video's controls first being shown.
+let showControlsFirstCalled;
+
+// Flag to indicate that showControls() should
+// not take immediate effect: i.e. the case when
+// hideControls() is called before controls are
+// visible.
+let hideControlsQueued;
+
+// Boolean tracking if controls are hidden or shown
+let controlsVisible;
+
+// Timer used to hide controls after user action.
+let hideControlsTimeout;
+
+// Flag tracking if we need to mute the ads manager once it loads. Used for
+// autoplay.
+let muteAdsManagerOnLoaded;
+
+// Flag tracking if we are in native fullscreen mode. Used for iPhone.
+let nativeFullscreen;
+
+// Flag tracking if the IMA library was allowed to load. Will be set to false
+// when e.g. a user is using an ad blocker.
+let imaLoadAllowed;
+
+// Used if the adsManager needs to be resized on load.
+let adsManagerWidthOnLoad, adsManagerHeightOnLoad;
+
+// Initial video dimensions.
+let videoWidth, videoHeight;
+
+// IMASettings provided via <script> tag in parent element.
+let imaSettings;
+
+// Player data used for video analytics.
+const playerData = new ImaPlayerData();
+
+// Flag used to track if ads have been requested or not.
+let adsRequested;
+
+// Flag that tracks if the user tapped and dragged on the overlay button.
+let userTappedAndDragged;
+
+// User consent state.
+let consentState;
+
+// Throttle for the showControls() function
+let showControlsThrottled = throttle(window, showControls, 1000);
+
+/**
+ * @param {!Node} parent
+ * @param {string} css
+ */
+function insertCss(parent, css) {
+  const style = parent.ownerDocument.createElement('style');
+  style./*OK*/ textContent = css;
+  parent.appendChild(style);
+}
+
+/**
+ * @param {string} state
+ * @param {boolean} active
+ */
+function toggleRootDataAttribute(state, active) {
+  const {'root': root} = elements;
+  const attributeName = `data-${state}`;
+  if (active) {
+    root.setAttribute(attributeName, '');
+  } else {
+    root.removeAttribute(attributeName);
+  }
+}
+
+/**
+ * @param {Document} elementOrDoc
+ * @return {!Object<string, !Element>}
+ */
+function renderElements(elementOrDoc) {
+  const html = htmlFor(elementOrDoc);
+
+  // Elements annotated with `ref="name"` are referenced as `elements['name']`.
+  // They also have their `ref` copied as a classname, so they can be selected
+  // from CSS using that exact value.
+  const root = html`
+    <div class="fill">
+      <div class="fill">
+        <video
+          ref="video"
+          playsinline
+          controlslist="nodownload nofullscreen noremoteplayback"
+        >
+          <!-- Video children are later propagated from the iframe's name. -->
+        </video>
+      </div>
+
+      <div ref="adContainer" class="fill" hidden>
+        <!-- This subtree may be modified by the IMA SDK. -->
+      </div>
+
+      <div ref="controls" hidden>
+        <button ref="playButton"></button>
+
+        <div class="countdownWrapper">
+          <div ref="countdown">
+            <!-- Text content updated using data-ad-label onAdProgress(). -->
+          </div>
+        </div>
+
+        <div ref="time">
+          <!-- Text content must match format in updateTime(). -->
+          -:- / 0:00
+        </div>
+
+        <div ref="progress">
+          <div ref="progressLine"></div>
+          <div ref="progressMarker"></div>
+        </div>
+
+        <button ref="muteButton"></button>
+        <button ref="fullscreenButton"></button>
+      </div>
+
+      <button ref="overlayButton" class="fill"></button>
+    </div>
+  `;
+
+  const elements = htmlRefs(root);
+
+  // The root element cannot be referenced by `ref="root"`, so we insert it.
+  elements['root'] = root;
+
+  // For a smaller template, we copy each element's `ref` value as a classname.
+  for (const ref in elements) {
+    elements[ref].classList.add(ref);
+  }
+
+  // Adding SVGs separately because they require a different namespace, and the
+  // HTML template must be static.
+  const svg = svgFor(elementOrDoc);
+
+  elements['overlayButton'].appendChild(icons.play(svg));
+  elements['fullscreenButton'].appendChild(icons.fullscreen(svg));
+
+  // Buttons toggle SVGs by including two each, one is displayed at a time.
+  // See CSS selectors for buttons under .root[data-*].
+  const {'muteButton': muteButton, 'playButton': playButton} = elements;
+
+  playButton.appendChild(icons.play(svg));
+  playButton.appendChild(icons.pause(svg));
+
+  muteButton.appendChild(icons.volumeMax(svg));
+  muteButton.appendChild(icons.muted(svg));
+
+  return elements;
+}
+
+/**
+ * @param {!Document} document
+ * @param {!Element} parent
+ * @param {?Array<Array<string|Object>>} childrenDef
+ *   an array of [tagName, attributes] items like:
+ *     [
+ *       ['SOURCE', {'src': 'foo.mp4'}],
+ *       ['TRACK', {'src': 'bar.mp4'}],
+ *     ]
+ */
+function maybeAppendChildren(document, parent, childrenDef) {
+  if (!isArray(childrenDef)) {
+    return;
+  }
+  childrenDef.forEach((child) => {
+    const tagName = child[0];
+    const attributes = child[1];
+    if (
+      !(
+        typeof tagName === 'string' &&
+        typeof attributes === 'object' &&
+        attributes != null
+      )
+    ) {
+      throw new Error(child);
+    }
+    const element = document.createElement(tagName);
+    for (const attr in attributes) {
+      element.setAttribute(attr, attributes[attr]);
+    }
+    parent.appendChild(element);
+  });
+}
+
+/**
+ * @param {!Object} global
+ * @param {!Object} data
+ */
+export function imaVideo(global, data) {
+  insertCss(global.document.head, cssText);
+
+  videoWidth = global./*OK*/ innerWidth;
+  videoHeight = global./*OK*/ innerHeight;
+  adLabel = data.adLabel || 'Ad (%s of %s)';
+
+  elements = renderElements(global.document);
+
+  controlsVisible = false;
+
+  // Propagate settings and video element's children.
+  const {'video': video} = elements;
+  video.setAttribute('poster', data.poster);
+  if (data['crossorigin'] != null) {
+    video.setAttribute('crossorigin', data['crossorigin']);
+  }
+  if (data.src) {
+    const sourceElement = document.createElement('source');
+    sourceElement.setAttribute('src', data.src);
+    video.appendChild(sourceElement);
+  }
+  maybeAppendChildren(
+    global.document,
+    video,
+    tryParseJson(data['sourceChildren'])
+  );
+
+  if (data.imaSettings) {
+    imaSettings = tryParseJson(data.imaSettings);
+  }
+
+  global.document.getElementById('c').appendChild(elements['root']);
+
+  // Attach events and configure IMA SDK.
+
+  window.addEventListener('message', onMessage.bind(null, global));
+
+  hideControlsQueued = false;
+  showControlsFirstCalled = false;
+  contentComplete = false;
+  adsActive = false;
+  allAdsCompleted = false;
+  playbackStarted = false;
+  nativeFullscreen = false;
+  imaLoadAllowed = true;
+
+  const {
+    'fullscreenButton': fullscreenButton,
+    'muteButton': muteButton,
+    'playButton': playButton,
+    'progress': progress,
+  } = elements;
+
+  let mobileBrowser = false;
+  interactEvent = 'click';
+  mouseDownEvent = 'mousedown';
+  mouseMoveEvent = 'mousemove';
+  mouseUpEvent = 'mouseup';
+  if (
+    navigator.userAgent.match(/iPhone/i) ||
+    navigator.userAgent.match(/iPad/i) ||
+    navigator.userAgent.match(/Android/i)
+  ) {
+    mobileBrowser = true;
+    interactEvent = 'touchend';
+    mouseDownEvent = 'touchstart';
+    mouseMoveEvent = 'touchmove';
+    mouseUpEvent = 'touchend';
+  }
+  const {'overlayButton': overlayButton} = elements;
+  if (mobileBrowser) {
+    // Create our own tap listener that ignores tap and drag.
+    overlayButton.addEventListener(mouseMoveEvent, onOverlayButtonTouchMove);
+    overlayButton.addEventListener(mouseUpEvent, onOverlayButtonTouchEnd);
+    overlayButton.addEventListener(
+      'tapwithoutdrag',
+      onOverlayButtonInteract.bind(null, global)
+    );
+  } else {
+    overlayButton.addEventListener(
+      interactEvent,
+      onOverlayButtonInteract.bind(null, global)
+    );
+  }
+  playButton.addEventListener(interactEvent, onPlayPauseClick);
+  progress.addEventListener(mouseDownEvent, onProgressClick);
+  muteButton.addEventListener(interactEvent, onMuteUnmuteClick);
+  fullscreenButton.addEventListener(
+    interactEvent,
+    toggleFullscreen.bind(null, global)
+  );
+
+  // Timeout is 1s, because showControls will hide after 3s
+  showControlsThrottled = throttle(window, showControls, 1000);
+
+  const fullScreenEvents = [
+    'fullscreenchange',
+    'mozfullscreenchange',
+    'webkitfullscreenchange',
+  ];
+  fullScreenEvents.forEach((fsEvent) => {
+    global.document.addEventListener(
+      fsEvent,
+      onFullscreenChange.bind(null, global),
+      false
+    );
+  });
+
+  consentState = global.context.initialConsentState;
+
+  if (consentState == 4) {
+    // UNKNOWN
+    // On unknown consent state, do not load IMA. Treat this the same as if IMA
+    // failed to load.
+    onImaLoadFail();
+  } else {
+    // Set-up code that can't run until the IMA lib loads.
+    loadScript(
+      /** @type {!Window} */ (global),
+      'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
+      () => onImaLoadSuccess(global, data),
+      onImaLoadFail
+    );
+  }
+}
+
+/**
+ * Adds the appropriate event listener to an element
+ * to represent a hover state.
+ *
+ * NOTE: This does not add a throttler,
+ * since this is applied per element,
+ * and would require wrapping the callback.
+ * Thus, the callback passed should be,
+ * appropriately throttled. See showControlsThrottled.
+ *
+ * @param {!Element} element
+ * @param {!Function} callback
+ */
+export function addHoverEventToElement(element, callback) {
+  element.addEventListener(interactEvent, callback);
+  element.addEventListener(mouseMoveEvent, callback);
+}
+
+/**
+ * Removes the appropriate event listener from an element
+ * that represented a hover state.
+ * @param {!Element} element
+ * @param {!Function} callback
+ */
+export function removeHoverEventFromElement(element, callback) {
+  element.removeEventListener(interactEvent, callback);
+  element.removeEventListener(mouseMoveEvent, callback);
+}
+
+/**
+ * @param {!Object} global
+ * @param {!Object} data
+ */
+function onImaLoadSuccess(global, data) {
+  // This is the first place where we have access to any IMA objects.
+
+  // Handle settings that need to be set before the AdDisplayContainer is
+  // created.
+  if (imaSettings) {
+    if (imaSettings['locale']) {
+      global.google.ima.settings.setLocale(imaSettings['locale']);
+    }
+    if (imaSettings['vpaidMode']) {
+      global.google.ima.settings.setVpaidMode(imaSettings['vpaidMode']);
+    }
+  }
+
+  const {'adContainer': adContainer, 'video': video} = elements;
+
+  adDisplayContainer = new global.google.ima.AdDisplayContainer(
+    adContainer,
+    video
+  );
+
+  adsLoader = new global.google.ima.AdsLoader(adDisplayContainer);
+  adsLoader.getSettings().setPlayerType('amp-ima');
+  adsLoader.getSettings().setPlayerVersion('0.1');
+  // Propogate settings provided via child script tag.
+  // locale and vpaidMode are set above, as they must be set before we create
+  // an AdDisplayContainer.
+  // playerType and playerVersion are used by the developers to track usage,
+  // so we do not want to allow users to overwrite those values.
+  const skippedSettings = [
+    'locale',
+    'vpaidMode',
+    'playerType',
+    'playerVersion',
+  ];
+  for (const setting in imaSettings) {
+    if (!skippedSettings.includes(setting)) {
+      // Change e.g. 'ppid' to 'setPpid'.
+      const methodName = 'set' + camelCaseToTitleCase(setting);
+      if (typeof adsLoader.getSettings()[methodName] === 'function') {
+        adsLoader.getSettings()[methodName](imaSettings[setting]);
+      }
+    }
+  }
+  adsLoader.addEventListener(
+    global.google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
+    onAdsManagerLoaded.bind(null, global),
+    false
+  );
+  adsLoader.addEventListener(
+    global.google.ima.AdErrorEvent.Type.AD_ERROR,
+    onAdsLoaderError,
+    false
+  );
+
+  video.addEventListener('ended', onContentEnded);
+
+  adsRequest = new global.google.ima.AdsRequest();
+  adsRequest.adTagUrl = data.tag;
+  adsRequest.linearAdSlotWidth = videoWidth;
+  adsRequest.linearAdSlotHeight = videoHeight;
+  adsRequest.nonLinearAdSlotWidth = videoWidth;
+  adsRequest.nonLinearAdSlotHeight = videoHeight / 3;
+
+  if (!data['delayAdRequest']) {
+    requestAds();
+  } else {
+    // Let amp-ima-video know that we are done set-up.
+    postMessage({event: VideoEvents.LOAD});
+  }
+}
+
+/**
+ * Handler for on fail.
+ */
+function onImaLoadFail() {
+  // Something blocked ima3.js from loading - ignore all IMA stuff and just play
+  // content.
+  addHoverEventToElement(
+    /** @type {!Element} */ (elements['video']),
+    showControlsThrottled
+  );
+  imaLoadAllowed = false;
+  postMessage({event: VideoEvents.LOAD});
+}
+
+/**
+ * Triggered when the user clicks on the overlay button.
+ * @param {!Object} global
+ * @visibleForTesting
+ */
+export function onOverlayButtonInteract(global) {
+  const {'overlayButton': overlayButton, 'video': video} = elements;
+  if (playbackStarted) {
+    // Resart the video
+    playVideo();
+  } else {
+    // Play the video for the first time
+    playbackStarted = true;
+    uiTicker = setInterval(uiTickerClick, 500);
+    setInterval(playerDataTick, 1000);
+    if (adDisplayContainer) {
+      adDisplayContainer.initialize();
+    }
+    video.load();
+    playAds(global);
+  }
+
+  toggle(overlayButton, false);
+}
+
+// TODO(alanorozco): Update name on test's end.
+export const onBigPlayClick = onOverlayButtonInteract;
+
+/**
+ * Triggered when the user ends a tap on the overlay button.
+ * @param {Event} event
+ */
+function onOverlayButtonTouchEnd(event) {
+  if (userTappedAndDragged) {
+    // Reset state and ignore this tap.
+    userTappedAndDragged = false;
+  } else {
+    const tapWithoutDragEvent = new Event('tapwithoutdrag');
+    event.currentTarget.dispatchEvent(tapWithoutDragEvent);
+  }
+}
+
+/**
+ * Triggered when the user moves a tap on the overlay button.
+ */
+function onOverlayButtonTouchMove() {
+  userTappedAndDragged = true;
+}
+
+/**
+ * Requests ads.
+ */
+export function requestAds() {
+  adsRequested = true;
+  adRequestFailed = false;
+  if (consentState == CONSENT_POLICY_STATE.UNKNOWN) {
+    // We're unaware of the user's consent state - do not request ads.
+    imaLoadAllowed = false;
+    return;
+  } else if (consentState == CONSENT_POLICY_STATE.INSUFFICIENT) {
+    // User has provided consent state but has not consented to personalized
+    // ads.
+    adsRequest.adTagUrl += '&npa=1';
+  }
+  adsLoader.requestAds(adsRequest);
+}
+
+/**
+ * Starts ad playback. If the ad request has not yet resolved, calls itself
+ * again after 250ms.
+ * @param {!Object} global
+ * @visibleForTesting
+ */
+export function playAds(global) {
+  if (!imaLoadAllowed) {
+    playVideo();
+    return;
+  }
+
+  if (!adsRequested) {
+    requestAds();
+    playAds(global);
+    return;
+  } else if (adsManager) {
+    // Ad request resolved.
+    try {
+      adsManager.init(
+        videoWidth,
+        videoHeight,
+        global.google.ima.ViewMode.NORMAL
+      );
+      adsManager.start();
+    } catch (adError) {
+      playVideo();
+    }
+  } else if (!adRequestFailed) {
+    // Ad request did not yet resolve but also did not yet fail.
+    setTimeout(playAds.bind(null, global), 250);
+  } else {
+    // Ad request failed.
+    playVideo();
+  }
+}
+
+/**
+ * Called when the content completes.
+ *
+ * @visibleForTesting
+ */
+export function onContentEnded() {
+  contentComplete = true;
+  if (adsLoader) {
+    adsLoader.contentComplete();
+  }
+
+  // If all ads are not completed,
+  // onContentResume will show the elements['overlayButton']
+  if (allAdsCompleted) {
+    toggle(elements['overlayButton'], true);
+  }
+
+  postMessage({event: VideoEvents.PAUSE});
+  postMessage({event: VideoEvents.ENDED});
+}
+
+/**
+ * Called when the IMA SDK has an AdsManager ready for us.
+ * @param {!Object} global
+ * @param {*} adsManagerLoadedEvent
+ * @visibleForTesting
+ */
+export function onAdsManagerLoaded(global, adsManagerLoadedEvent) {
+  const adsRenderingSettings = new global.google.ima.AdsRenderingSettings();
+  adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
+  adsManager = adsManagerLoadedEvent.getAdsManager(
+    elements['video'],
+    adsRenderingSettings
+  );
+  adsManager.addEventListener(
+    global.google.ima.AdErrorEvent.Type.AD_ERROR,
+    onAdError
+  );
+  adsManager.addEventListener(global.google.ima.AdEvent.Type.LOADED, onAdLoad);
+  adsManager.addEventListener(
+    global.google.ima.AdEvent.Type.PAUSED,
+    onAdPaused
+  );
+  adsManager.addEventListener(
+    global.google.ima.AdEvent.Type.RESUMED,
+    onAdResumed
+  );
+  adsManager.addEventListener(
+    global.google.ima.AdEvent.Type.AD_PROGRESS,
+    onAdProgress
+  );
+  adsManager.addEventListener(
+    global.google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
+    onContentPauseRequested.bind(null, global)
+  );
+  adsManager.addEventListener(
+    global.google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
+    onContentResumeRequested
+  );
+  adsManager.addEventListener(
+    global.google.ima.AdEvent.Type.ALL_ADS_COMPLETED,
+    onAllAdsCompleted
+  );
+  if (muteAdsManagerOnLoaded) {
+    adsManager.setVolume(0);
+  }
+  postMessage({event: VideoEvents.LOAD});
+}
+
+/**
+ * Called when we encounter an error trying to load ads.
+ *
+ * @visibleForTesting
+ */
+export function onAdsLoaderError() {
+  adRequestFailed = true;
+  // Send this message to trigger auto-play for failed pre-roll requests -
+  // failing to load an ad is just as good as loading one as far as starting
+  // playback is concerned because our content will be ready to play.
+  postMessage({event: VideoEvents.LOAD});
+  addHoverEventToElement(
+    /** @type {!Element} */ (elements['video']),
+    showControlsThrottled
+  );
+  if (playbackStarted) {
+    playVideo();
+  }
+}
+
+/**
+ * Called when we encounter an error trying to play ads.
+ *
+ * @visibleForTesting
+ */
+export function onAdError() {
+  postMessage({event: VideoEvents.AD_END});
+  currentAd = null;
+  if (adsManager) {
+    adsManager.destroy();
+  }
+  addHoverEventToElement(
+    /** @type {!Element} */ (elements['video']),
+    showControlsThrottled
+  );
+  playVideo();
+}
+
+/**
+ * Called each time a new ad loads. Sets currentAd
+ * @param {!Object} global
+ * @visibleForTesting
+ */
+export function onAdLoad(global) {
+  currentAd = global.getAd();
+}
+
+/**
+ * Called intermittently as the ad plays, allowing us to display ad counter.
+ * @param {!Object} unusedEvent
+ * @visibleForTesting
+ */
+export function onAdProgress(unusedEvent) {
+  const adPodInfo = currentAd.getAdPodInfo();
+  const adPosition = adPodInfo.getAdPosition();
+  const totalAds = adPodInfo.getTotalAds();
+  const remainingTime = adsManager.getRemainingTime();
+  const remainingMinutes = Math.floor(remainingTime / 60);
+  let remainingSeconds = Math.floor(remainingTime % 60);
+  if (remainingSeconds.toString().length < 2) {
+    remainingSeconds = '0' + remainingSeconds;
+  }
+  const label = adLabel.replace('%s', adPosition).replace('%s', totalAds);
+  const {'countdown': countdown} = elements;
+  countdown.textContent = `${label}: ${remainingMinutes}:${remainingSeconds}`;
+}
+
+/**
+ * Called by the IMA SDK. Pauses the content and readies the player for ads.
+ * @param {!Object} global
+ * @visibleForTesting
+ */
+export function onContentPauseRequested(global) {
+  if (adsManagerWidthOnLoad) {
+    adsManager.resize(
+      adsManagerWidthOnLoad,
+      adsManagerHeightOnLoad,
+      global.google.ima.ViewMode.NORMAL
+    );
+    adsManagerWidthOnLoad = null;
+    adsManagerHeightOnLoad = null;
+  }
+  adsActive = true;
+  playerState = PlayerStates.PLAYING;
+  postMessage({event: VideoEvents.AD_START});
+  toggle(elements['adContainer'], true);
+  showAdControls();
+
+  const {'video': video} = elements;
+  video.removeEventListener('ended', onContentEnded);
+  video.pause();
+  removeHoverEventFromElement(
+    /** @type {!Element} */ (video),
+    showControlsThrottled
+  );
+}
+
+/**
+ * Called by the IMA SDK. Resumes content after an ad break.
+ *
+ * @visibleForTesting
+ */
+export function onContentResumeRequested() {
+  const {'overlayButton': overlayButton, 'video': video} = elements;
+  adsActive = false;
+  addHoverEventToElement(
+    /** @type {!Element} */ (video),
+    showControlsThrottled
+  );
+  postMessage({event: VideoEvents.AD_END});
+  resetControlsAfterAd();
+  if (!contentComplete) {
+    // CONTENT_RESUME will fire after post-rolls as well, and we don't want to
+    // resume content in that case.
+    playVideo();
+  } else {
+    toggle(overlayButton, true);
+  }
+
+  video.addEventListener('ended', onContentEnded);
+}
+
+/**
+ * Called when the IMA SDK emmitts the event: AdEvent.Type.PAUSED.
+ * Sets the (ads) controls to reflect a paused state.
+ * Does not need to set the big play pause since that is handled
+ * by the SDK generally.
+ * @visibleForTesting
+ */
+export function onAdPaused() {
+  toggleRootDataAttribute('playing', false);
+  playerState = PlayerStates.PAUSE;
+}
+
+/**
+ * Called when the IMA SDK emmitts the event: AdEvent.Type.RESUMED.
+ * Sets the (ads) controls to reflect a paused state.
+ * Does not need to set the big play pause since that is handled
+ * by the SDK generally.
+ * @visibleForTesting
+ */
+export function onAdResumed() {
+  toggleRootDataAttribute('playing', true);
+  playerState = PlayerStates.PLAYING;
+}
+
+/**
+ * Called by the IMA SDK. Signifies all ads have been played for the video.
+ *
+ * @visibleForTesting
+ */
+export function onAllAdsCompleted() {
+  currentAd = null;
+  allAdsCompleted = true;
+}
+
+/**
+ * Called when our ui timer goes off. Updates the player UI.
+ */
+function uiTickerClick() {
+  const {currentTime, duration} = elements['video'];
+  updateTime(currentTime, duration);
+}
+
+/**
+ *  Called when our player data timer goes off. Sends a message to the parent
+ *  iframe to update the player data.
+ */
+function playerDataTick() {
+  // Skip while ads are active in case of custom playback. No harm done for
+  // non-custom playback because content won't be progressing while ads are
+  // playing.
+  const {'video': video} = elements;
+  if (video && !adsActive) {
+    playerData.update(video);
+    postMessage({
+      event: ImaPlayerData.IMA_PLAYER_DATA,
+      data: playerData,
+    });
+  }
+}
+
+/**
+ * Updates the time and progress.
+ * @param {number} currentTime
+ * @param {number} duration
+ * @visibleForTesting
+ */
+export function updateTime(currentTime, duration) {
+  const {
+    'progressLine': progressLine,
+    'progressMarker': progressMarker,
+    'time': time,
+  } = elements;
+  time.textContent = formatTime(currentTime) + ' / ' + formatTime(duration);
+  const progressPercent = Math.floor((currentTime / duration) * 100);
+  setStyle(progressLine, 'width', progressPercent + '%');
+  setStyle(progressMarker, 'left', progressPercent - 1 + '%');
+}
+
+/**
+ * Formats an int in seconds into a string of the format X:XX:XX. Omits the
+ * hour if the content is less than one hour.
+ * @param {number} time
+ * @return {*} TODO(#23582): Specify return type
+ * @visibleForTesting
+ */
+export function formatTime(time) {
+  if (isNaN(time)) {
+    return '0:00';
+  }
+  let timeString = '';
+  const hours = Math.floor(time / 3600);
+  if (hours > 0) {
+    timeString += hours + ':';
+  }
+  const minutes = Math.floor((time % 3600) / 60);
+  if (hours > 0) {
+    timeString += zeroPad(minutes) + ':';
+  } else {
+    timeString += minutes + ':';
+  }
+  const seconds = Math.floor(time - (hours * 3600 + minutes * 60));
+  timeString += zeroPad(seconds);
+  return timeString;
+}
+
+/**
+ * Zero-pads the provided int and returns a string of length 2.
+ * @param {string|number} input
+ * @return {*} TODO(#23582): Specify return type
+ * @visibleForTesting
+ */
+export function zeroPad(input) {
+  input = String(input);
+  return input.length == 1 ? '0' + input : input;
+}
+
+/**
+ * Detects clicks on the progress bar.
+ * @param {!Event} event
+ */
+function onProgressClick(event) {
+  // Call this logic once to make sure we still seek if the user just clicks
+  // instead of clicking and dragging.
+  clearTimeout(hideControlsTimeout);
+  onProgressMove(event);
+  event.preventDefault();
+  event.stopPropagation();
+  clearInterval(uiTicker);
+  document.addEventListener(mouseMoveEvent, onProgressMove);
+  document.addEventListener(mouseUpEvent, onProgressClickEnd);
+}
+
+/**
+ * Detects the end of interaction on the progress bar.
+ */
+function onProgressClickEnd() {
+  document.removeEventListener(mouseMoveEvent, onProgressMove);
+  document.removeEventListener(mouseUpEvent, onProgressClickEnd);
+  uiTicker = setInterval(uiTickerClick, 500);
+  const {'video': video} = elements;
+  video.currentTime = video.duration * seekPercent;
+  // Reset hide controls timeout.
+  showControls();
+}
+
+/**
+ * Detects when the user clicks and drags on the progress bar.
+ * @param {!Event} event
+ */
+function onProgressMove(event) {
+  const {'progress': progress, 'video': video} = elements;
+  const progressWrapperPosition = getPagePosition(progress);
+  const progressListStart = progressWrapperPosition.x;
+  const progressListWidth = progress./*OK*/ offsetWidth;
+
+  // Handle Android Chrome touch events.
+  const eventX = event.clientX || event.touches[0].pageX;
+
+  seekPercent = (eventX - progressListStart) / progressListWidth;
+  if (seekPercent < 0) {
+    seekPercent = 0;
+  } else if (seekPercent > 1) {
+    seekPercent = 1;
+  }
+  updateTime(video.duration * seekPercent, video.duration);
+}
+
+/**
+ * Returns the x,y coordinates of the given element relative to the window.
+ * @param {!Element} el
+ * @return {{x: number, y: number}}
+ */
+function getPagePosition(el) {
+  let lx, ly;
+  for (
+    lx = 0, ly = 0;
+    el != null;
+    lx += el./*OK*/ offsetLeft,
+      ly += el./*OK*/ offsetTop,
+      el = el./*OK*/ offsetParent
+  ) {}
+  return {x: lx, y: ly};
+}
+
+/**
+ * Called when the user clicks on the play / pause button.
+ *
+ * @visibleForTesting
+ */
+export function onPlayPauseClick() {
+  if (playerState == PlayerStates.PLAYING) {
+    pauseVideo();
+  } else {
+    playVideo();
+  }
+}
+
+/**
+ * Plays the content video.
+ *
+ * @visibleForTesting
+ */
+export function playVideo() {
+  const {'adContainer': adContainer, 'video': video} = elements;
+  if (adsActive) {
+    adsManager.resume();
+  } else {
+    toggle(adContainer, false);
+    // Kick off the hide controls timer.
+    showControls();
+    video.play();
+  }
+  playerState = PlayerStates.PLAYING;
+  postMessage({event: VideoEvents.PLAYING});
+  toggleRootDataAttribute('playing', true);
+}
+
+/**
+ * Pauses the video player.
+ * @param {?Event} event
+ * @visibleForTesting
+ */
+export function pauseVideo(event = null) {
+  if (adsActive) {
+    adsManager.pause();
+  } else {
+    const {'video': video} = elements;
+    video.pause();
+    // Show controls and keep them there because we're paused.
+    clearTimeout(hideControlsTimeout);
+    showControls();
+    if (event && event.type == 'webkitendfullscreen') {
+      // Video was paused because we exited fullscreen.
+      video.removeEventListener('webkitendfullscreen', pauseVideo);
+      fullscreen = false;
+    }
+  }
+  playerState = PlayerStates.PAUSED;
+  postMessage({event: VideoEvents.PAUSE});
+  toggleRootDataAttribute('playing', false);
+}
+
+/**
+ * Handler when the mute/unmute button is clicked
+ */
+export function onMuteUnmuteClick() {
+  if (elements['video'].muted) {
+    unmuteVideo();
+  } else {
+    muteVideo();
+  }
+}
+
+/**
+ * Function to mute the video
+ */
+export function muteVideo() {
+  toggleMuted(elements['video'], true);
+}
+
+/**
+ * Function to unmute the video
+ */
+export function unmuteVideo() {
+  toggleMuted(elements['video'], false);
+}
+
+/**
+ * Mutes or unmutes the video.
+ * @param {!HTMLMediaElement} video
+ * @param {boolean} muted
+ */
+export function toggleMuted(video, muted) {
+  if (video.muted == muted) {
+    return;
+  }
+  const volume = muted ? 0 : 1;
+  video.volume = volume;
+  video.muted = muted;
+  if (adsManager) {
+    adsManager.setVolume(volume);
+  } else {
+    muteAdsManagerOnLoaded = muted;
+  }
+  toggleRootDataAttribute('muted', muted);
+  postMessage({event: muted ? VideoEvents.MUTED : VideoEvents.UNMUTED});
+}
+
+/**
+ * @param {Object} global
+ */
+function exitFullscreen(global) {
+  // The video is currently in fullscreen mode
+  const cancelFullscreen =
+    global.document.exitFullscreen ||
+    global.document.exitFullScreen ||
+    global.document.webkitCancelFullScreen ||
+    global.document.mozCancelFullScreen;
+  if (cancelFullscreen) {
+    cancelFullscreen.call(document);
+  }
+}
+
+/**
+ * @param {Object} global
+ */
+function enterFullscreen(global) {
+  // Try to enter fullscreen mode in the browser
+  const requestFullscreen =
+    global.document.documentElement.requestFullscreen ||
+    global.document.documentElement.webkitRequestFullscreen ||
+    global.document.documentElement.mozRequestFullscreen ||
+    global.document.documentElement.requestFullScreen ||
+    global.document.documentElement.webkitRequestFullScreen ||
+    global.document.documentElement.mozRequestFullScreen;
+  if (requestFullscreen) {
+    fullscreenWidth = window.screen.width;
+    fullscreenHeight = window.screen.height;
+    requestFullscreen.call(global.document.documentElement);
+  } else {
+    const {'video': video} = elements;
+    // Use native fullscreen (iPhone)
+    video.webkitEnterFullscreen();
+    // Pause the video when we leave fullscreen. iPhone does this
+    // automatically, but we still use pauseVideo as an event handler to
+    // sync the UI.
+    video.addEventListener('webkitendfullscreen', pauseVideo);
+    nativeFullscreen = true;
+    onFullscreenChange(global);
+  }
+}
+
+/**
+ * @param {Object} global
+ */
+function toggleFullscreen(global) {
+  if (fullscreen) {
+    exitFullscreen(global);
+    return;
+  }
+  enterFullscreen(global);
+}
+
+/**
+ * Called when the fullscreen mode of the browser or content player changes.
+ * @param {Object} global
+ */
+function onFullscreenChange(global) {
+  if (fullscreen) {
+    if (adsManager) {
+      // Resize the ad container
+      adsManager.resize(
+        videoWidth,
+        videoHeight,
+        global.google.ima.ViewMode.NORMAL
+      );
+      adsManagerWidthOnLoad = null;
+      adsManagerHeightOnLoad = null;
+    }
+    fullscreen = false;
+  } else {
+    // The user just entered fullscreen
+    if (!nativeFullscreen) {
+      if (adsManager) {
+        // Resize the ad container
+        adsManager.resize(
+          fullscreenWidth,
+          fullscreenHeight,
+          global.google.ima.ViewMode.FULLSCREEN
+        );
+        adsManagerWidthOnLoad = null;
+        adsManagerHeightOnLoad = null;
+      }
+      hideControls();
+    }
+    fullscreen = true;
+  }
+  postMessage({event: 'fullscreenchange', isFullscreen: fullscreen});
+}
+
+/**
+ * Show a subset of controls when ads are playing.
+ * See CSS for selectors affected by -controls-ads and -controls-ads-mini
+ *
+ * @visibleForTesting
+ */
+export function showAdControls() {
+  showControls(true);
+  toggleRootDataAttribute('playing', true);
+  toggleRootDataAttribute('ad', true);
+  toggleRootDataAttribute(
+    'skippable',
+    currentAd ? currentAd?.getSkipTimeOffset() !== -1 : false
+  );
+}
+
+/**
+ * Reinstate access to all controls when ads have ended.
+ *
+ * @visibleForTesting
+ */
+export function resetControlsAfterAd() {
+  toggleRootDataAttribute('ad', false);
+  toggleRootDataAttribute('skippable', false);
+}
+
+/**
+ * Show video controls and reset hide controls timeout.
+ * @param {boolean} opt_adsForce
+ * @visibleForTesting
+ */
+export function showControls(opt_adsForce) {
+  showControlsFirstCalled = true;
+  if (!controlsVisible) {
+    // Bail out if hideControls signal was queued before
+    // showControls (does not matter for ads case)
+    if (hideControlsQueued && !opt_adsForce) {
+      hideControlsQueued = false;
+      return;
+    }
+    toggle(elements['controls'], true);
+    controlsVisible = true;
+  }
+
+  // Hide controls after 3 seconds
+  if (playerState == PlayerStates.PLAYING) {
+    // Reset hide controls timer.
+    // Be sure to keep the timer greater than showControlsThrottled.
+    clearTimeout(hideControlsTimeout);
+    hideControlsTimeout = setTimeout(hideControls, 3000);
+  }
+}
+
+/**
+ * Hide video controls, except when ads are active.
+ *
+ * @visibleForTesting
+ */
+export function hideControls() {
+  if (controlsVisible && !adsActive) {
+    toggle(elements['controls'], false);
+    controlsVisible = false;
+  } else if (!showControlsFirstCalled) {
+    // showControls has not been called yet,
+    // so set flag to indicate first showControls
+    // should not take precedence.
+    hideControlsQueued = true;
+  }
+}
+
+/**
+ * Handles messages from the top window.
+ * @param {!Object} global
+ * @param {!Event} event
+ */
+function onMessage(global, event) {
+  const eventData = getData(event);
+  if (!eventData) {
+    return;
+  }
+  const msg = isObject(eventData) ? eventData : tryParseJson(eventData);
+  if (!msg) {
+    return; // We only process valid JSON.
+  }
+  if (!msg['event'] || !msg['func']) {
+    return;
+  }
+  switch (msg['func']) {
+    case 'play':
+      if (adsActive || playbackStarted) {
+        playVideo();
+      } else {
+        // Auto-play support
+        onOverlayButtonInteract(global);
+      }
+      break;
+    case 'pause':
+      pauseVideo();
+      break;
+    case 'mute':
+      muteVideo();
+      break;
+    case 'unmute':
+      unmuteVideo();
+      break;
+    case 'hideControls':
+      if (!adsActive) {
+        hideControls();
+      }
+      break;
+    case 'showControls':
+      if (!adsActive) {
+        showControls();
+      }
+      break;
+    case 'resize':
+      const args = msg['args'];
+      if (args && args.width && args.height) {
+        if (adsActive && !fullscreen) {
+          adsManager.resize(
+            args.width,
+            args.height,
+            global.google.ima.ViewMode.NORMAL
+          );
+        } else {
+          adsManagerWidthOnLoad = args.width;
+          adsManagerHeightOnLoad = args.height;
+        }
+      }
+      break;
+    case 'onFirstScroll':
+    case 'onAdRequestDelayTimeout':
+      if (!adsRequested && imaLoadAllowed) {
+        requestAds();
+      }
+      break;
+    case 'requestFullscreen':
+      if (fullscreen) {
+        return;
+      }
+      enterFullscreen(global);
+      break;
+    case 'exitFullscreen':
+      if (!fullscreen) {
+        return;
+      }
+      exitFullscreen(global);
+      break;
+  }
+}
+
+/**
+ * @param {!Object} data
+ */
+function postMessage(data) {
+  window.parent./*OK*/ postMessage(data, '*');
+}
+
+/**
+ * Returns the properties we need to access for testing.
+ *
+ * @return {*} TODO(#23582): Specify return type
+ * @visibleForTesting
+ */
+export function getPropertiesForTesting() {
+  return {
+    allAdsCompleted,
+    adRequestFailed,
+    adsActive,
+    adsManagerWidthOnLoad,
+    adsManagerHeightOnLoad,
+    adsRequest,
+    contentComplete,
+    controlsVisible,
+    hideControlsTimeout,
+    imaLoadAllowed,
+    interactEvent,
+    playbackStarted,
+    playerState,
+    PlayerStates,
+    uiTicker,
+    hideControlsQueued,
+    icons,
+    // TODO(alanorozco): Update names on test's end to pass `elements` instead.
+    elements,
+    videoPlayer: elements['video'],
+    adContainerDiv: elements['adContainer'],
+    controlsDiv: elements['controls'],
+    playPauseDiv: elements['playButton'],
+    countdownDiv: elements['countdown'],
+    timeDiv: elements['time'],
+    progressBarWrapper: elements['progress'],
+    progressLine: elements['progressLine'],
+    progressMarkerDiv: elements['progressMarker'],
+    muteUnmuteDiv: elements['muteButton'],
+    fullscreenDiv: elements['fullscreenButton'],
+    bigPlayDiv: elements['overlayButton'],
+  };
+}
+
+/**
+ * Gets the throttled show controls
+ * @return {Function}
+ * @visibleForTesting
+ */
+export function getShowControlsThrottledForTesting() {
+  return showControlsThrottled;
+}
+
+/**
+ * Sets the overlay button.
+ * @param {!Element} div
+ * @visibleForTesting
+ */
+export function setBigPlayDivForTesting(div) {
+  elements['overlayButton'] = div;
+}
+
+/**
+ * Sets the ad display container.
+ * @param {!Element} adc
+ * @visibleForTesting
+ */
+export function setAdDisplayContainerForTesting(adc) {
+  adDisplayContainer = adc;
+}
+
+/**
+ * Sets the video width and height.
+ * @param {number} width
+ * @param {number} height
+ * @visibleForTesting
+ */
+export function setVideoWidthAndHeightForTesting(width, height) {
+  videoWidth = width;
+  videoHeight = height;
+}
+
+/**
+ * Sets the video muted state
+ * @param {boolean} shouldMute
+ * @visibleForTesting
+ */
+export function setVideoPlayerMutedForTesting(shouldMute) {
+  elements['video'].muted = shouldMute;
+}
+
+/**
+ * Sets the allAdsCompleted flag.
+ * @param {boolean} newValue
+ * @visibleForTesting
+ */
+export function setAllAdsCompletedForTesting(newValue) {
+  allAdsCompleted = newValue;
+}
+
+/**
+ * Sets the ad request failed flag.
+ * @param {boolean} newValue
+ * @visibleForTesting
+ */
+export function setAdRequestFailedForTesting(newValue) {
+  adRequestFailed = newValue;
+}
+
+/**
+ * Sets the ads loader.
+ * @param {*} newAdsLoader
+ * @visibleForTesting
+ */
+export function setAdsLoaderForTesting(newAdsLoader) {
+  adsLoader = newAdsLoader;
+}
+
+/**
+ * Sets the ads request.
+ * @param {*} newAdsRequest
+ * @visibleForTesting
+ */
+export function setAdsRequestForTesting(newAdsRequest) {
+  adsRequest = newAdsRequest;
+}
+
+/**
+ * Sets the flag to mute the ads manager when it loads.
+ * @param {boolean} shouldMute
+ * @visibleForTesting
+ */
+export function setMuteAdsManagerOnLoadedForTesting(shouldMute) {
+  muteAdsManagerOnLoaded = shouldMute;
+}
+
+/**
+ * Sets the ads manager.
+ * @param {*} newAdsManager
+ * @visibleForTesting
+ */
+export function setAdsManagerForTesting(newAdsManager) {
+  adsManager = newAdsManager;
+}
+
+/**
+ * Sets the ads manager dimensions on load.
+ * @param {number} width
+ * @param {number} height
+ * @visibleForTesting
+ */
+export function setAdsManagerDimensionsOnLoadForTesting(width, height) {
+  adsManagerWidthOnLoad = width;
+  adsManagerHeightOnLoad = height;
+}
+
+/**
+ * Sets the content complete flag.
+ * @param {*} newContentComplete
+ * @visibleForTesting
+ */
+export function setContentCompleteForTesting(newContentComplete) {
+  contentComplete = newContentComplete;
+}
+
+/**
+ * Sets the video player.
+ * @param {*} newPlayer
+ * @visibleForTesting
+ */
+export function setVideoPlayerForTesting(newPlayer) {
+  elements['video'] = newPlayer;
+}
+
+/**
+ * Sets the player state.
+ * @param {*} newState
+ * @visibleForTesting
+ */
+export function setPlayerStateForTesting(newState) {
+  playerState = newState;
+}
+
+/**
+ * Sets the hideControlsTimeout
+ * @param {number} newTimeout
+ * @visibleForTesting
+ */
+export function setHideControlsTimeoutForTesting(newTimeout) {
+  hideControlsTimeout = newTimeout;
+}
+
+/**
+ * Sets the consent state.
+ * @param {*} newConsentState
+ * @visibleForTesting
+ */
+export function setConsentStateForTesting(newConsentState) {
+  consentState = newConsentState;
+}
+
+/**
+ * Events
+ *
+ * Copied from src/video-interface.js.
+ *
+ * @const {!Object<string, string>}
+ */
+// TODO(aghassemi, #9216): Use video-interface.js
+const VideoEvents = {
+  /**
+   * load
+   *
+   * Fired when the video player is loaded and calls to methods such as `play()`
+   * are allowed.
+   *
+   * @event load
+   */
+  LOAD: 'load',
+
+  /**
+   * play
+   *
+   * Fired when the video plays.
+   *
+   * @event play
+   */
+  PLAYING: 'playing',
+
+  /**
+   * pause
+   *
+   * Fired when the video pauses.
+   *
+   * @event pause
+   */
+  PAUSE: 'pause',
+
+  /**
+   * ended
+   *
+   * Fired when the video ends.
+   *
+   * This event should be fired in addition to `pause` when video ends.
+   *
+   * @event ended
+   */
+  ENDED: 'ended',
+
+  /**
+   * muted
+   *
+   * Fired when the video is muted.
+   *
+   * @event play
+   */
+  MUTED: 'muted',
+
+  /**
+   * unmuted
+   *
+   * Fired when the video is unmuted.
+   *
+   * @event unmuted
+   */
+  UNMUTED: 'unmuted',
+
+  /**
+   * amp:video:visibility
+   *
+   * Fired when the video's visibility changes.
+   *
+   * @event amp:video:visibility
+   * @property {boolean} visible Whether the video player is visible or not.
+   */
+  VISIBILITY: 'amp:video:visibility',
+
+  /**
+   * reload
+   *
+   * Fired when the video's src changes.
+   *
+   * @event reload
+   */
+  RELOAD: 'reloaded',
+  /**
+   * pre/mid/post Ad start
+   *
+   * Fired when an Ad starts playing.
+   *
+   * This is used to remove any overlay shims during Ad play during autoplay
+   * or minimized-to-corner version of the player.
+   *
+   * @event ad_start
+   */
+  AD_START: 'ad_start',
+
+  /**
+   * pre/mid/post Ad ends
+   *
+   * Fired when an Ad ends playing.
+   *
+   * This is used to restore any overlay shims during Ad play during autoplay
+   * or minimized-to-corner version of the player.
+   *
+   * @event ad_end
+   */
+  AD_END: 'ad_end',
+};
diff --git a/ads/google/imaVideo.js b/ads/google/imaVideo.js
deleted file mode 100644
index 99d6e2549d3c8..0000000000000
--- a/ads/google/imaVideo.js
+++ /dev/null
@@ -1,1796 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {CONSENT_POLICY_STATE} from '../../src/consent-state';
-import {ImaPlayerData} from './ima-player-data';
-import {camelCaseToTitleCase, px, setStyle, setStyles} from '../../src/style';
-import {getData} from '../../src/event-helper';
-import {isObject} from '../../src/types';
-import {loadScript} from '../../3p/3p';
-import {throttle} from '../../src/utils/rate-limit';
-import {tryParseJson} from '../../src/json';
-
-/**
- * Possible player states.
- * @enum {number}
- * @private
- */
-const PlayerStates = {
-  PLAYING: 1,
-  PAUSED: 2,
-};
-
-/**
- * Icons from Google Material Icons
- * https://material.io/tools/icons
- */
-/*eslint-disable*/
-const icons = {
-  'play': `<path d="M8 5v14l11-7z"></path>
-     <path d="M0 0h24v24H0z" fill="none"></path>`,
-  'pause': `<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path>
-     <path d="M0 0h24v24H0z" fill="none"></path>`,
-  'fullscreen': `<path d="M0 0h24v24H0z" fill="none"/>
-     <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>`,
-  'mute': `<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"></path>
-     <path d="M0 0h24v24H0z" fill="none"></path>`,
-  'volume_max': `<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path>
-     <path d="M0 0h24v24H0z" fill="none"></path>`,
-  'seek': `<circle cx="12" cy="12" r="12" />`,
-};
-
-/*eslint-enable */
-
-const bigPlayDivDisplayStyle = 'table-cell';
-
-// Div wrapping our entire DOM.
-let wrapperDiv;
-
-// Div containing big play button. Rendered before player starts.
-let bigPlayDiv;
-
-// Div contianing play button. Double-nested for alignment.
-let playButtonDiv;
-
-// Div containing player controls.
-let controlsDiv;
-
-// Wrapper for ad countdown element.
-let countdownWrapperDiv;
-
-// Div containing ad countdown timer.
-let countdownDiv;
-
-// Div containing play or pause button.
-let playPauseDiv;
-
-// Div containing player time.
-let timeDiv;
-
-// Node containing the player time text.
-let timeNode;
-
-// Wrapper for progress bar DOM elements.
-let progressBarWrapperDiv;
-
-// Line for progress bar.
-let progressLine;
-
-// Line for total time in progress bar.
-let totalTimeLine;
-
-// Div containing the marker for the progress.
-let progressMarkerDiv;
-
-// Div for fullscreen icon.
-let fullscreenDiv;
-
-// Div for mute/unmute icon.
-let muteUnmuteDiv;
-
-// Div for ad container.
-let adContainerDiv;
-
-// Div for content player.
-let contentDiv;
-
-// Content player.
-let videoPlayer;
-
-// Event indicating user interaction.
-let interactEvent;
-
-// Event for mouse down.
-let mouseDownEvent;
-
-// Event for mouse move.
-let mouseMoveEvent;
-
-// Event for mouse up.
-let mouseUpEvent;
-
-// Percent of the way through the video the user has seeked. Used for seek
-// events.
-let seekPercent;
-
-// Flag tracking whether or not content has played to completion.
-let contentComplete;
-
-// Flag tracking whether or not all ads have been played and been completed.
-let allAdsCompleted;
-
-// Flag tracking if an ad request has failed.
-let adRequestFailed;
-
-// IMA SDK Ad object
-let currentAd;
-
-// IMA SDK AdDisplayContainer object.
-let adDisplayContainer;
-
-// IMA SDK AdsRequest object.
-let adsRequest;
-
-// IMA SDK AdsLoader object.
-let adsLoader;
-
-// IMA SDK AdsManager object;
-let adsManager;
-
-// Timer for UI updates.
-let uiTicker;
-
-// Tracks the current state of the player.
-let playerState;
-
-// Flag for whether or not we are currently in fullscreen mode.
-let fullscreen;
-
-// Width the player should be in fullscreen mode.
-let fullscreenWidth;
-
-// Height the player should be in fullscreen mode.
-let fullscreenHeight;
-
-// "Ad" label used in ad controls.
-let adLabel;
-
-// Flag tracking if ads are currently active.
-let adsActive;
-
-// Flag tracking if playback has started.
-let playbackStarted;
-
-// Boolean tracking if controls are hidden or shown
-let controlsVisible;
-
-// Timer used to hide controls after user action.
-let hideControlsTimeout;
-
-// Flag tracking if we need to mute the ads manager once it loads. Used for
-// autoplay.
-let muteAdsManagerOnLoaded;
-
-// Flag tracking if we are in native fullscreen mode. Used for iPhone.
-let nativeFullscreen;
-
-// Flag tracking if the IMA library was allowed to load. Will be set to false
-// when e.g. a user is using an ad blocker.
-let imaLoadAllowed;
-
-// Used if the adsManager needs to be resized on load.
-let adsManagerWidthOnLoad, adsManagerHeightOnLoad;
-
-// Initial video dimensions.
-let videoWidth, videoHeight;
-
-// IMASettings provided via <script> tag in parent element.
-let imaSettings;
-
-// Player data used for video analytics.
-const playerData = new ImaPlayerData();
-
-// Flag used to track if ads have been requested or not.
-let adsRequested;
-
-// Flag that tracks if the user tapped and dragged on the big play button.
-let userTappedAndDragged;
-
-// User consent state.
-let consentState;
-
-// Throttle for the showControls() function
-let showControlsThrottled = throttle(window, showControls, 1000);
-
-/**
- * @param {!Object} global
- * @param {!Object} data
- */
-export function imaVideo(global, data) {
-  videoWidth = global./*OK*/ innerWidth;
-  videoHeight = global./*OK*/ innerHeight;
-  adLabel = data.adLabel || 'Ad (%s of %s)';
-
-  // Wraps *everything*.
-  wrapperDiv = global.document.createElement('div');
-  wrapperDiv.id = 'ima-wrapper';
-  setStyle(wrapperDiv, 'width', px(videoWidth));
-  setStyle(wrapperDiv, 'height', px(videoHeight));
-  setStyle(wrapperDiv, 'background-color', 'black');
-
-  // Wraps the big play button we show before video start.
-  bigPlayDiv = global.document.createElement('div');
-  bigPlayDiv.id = 'ima-big-play';
-  setStyles(bigPlayDiv, {
-    'position': 'relative',
-    'width': px(videoWidth),
-    'height': px(videoHeight),
-    'display': bigPlayDivDisplayStyle,
-    'vertical-align': 'middle',
-    'text-align': 'center',
-    'cursor': 'pointer',
-  });
-  // Inner div so we can v and h align.
-  playButtonDiv = createIcon(global, 'play');
-  playButtonDiv.id = 'ima-play-button';
-  setStyles(playButtonDiv, {
-    'display': 'inline-block',
-    'max-width': '120px',
-    'max-height': '120px',
-  });
-  bigPlayDiv.appendChild(playButtonDiv);
-
-  // Video controls.
-  controlsDiv = global.document.createElement('div');
-  controlsDiv.id = 'ima-controls';
-  setStyles(controlsDiv, {
-    'position': 'absolute',
-    'bottom': '0px',
-    'width': '100%',
-    'height': '100px',
-    'background-color': 'rgba(7, 20, 30, .7)',
-    'background':
-      'linear-gradient(0, rgba(7, 20, 30, .7) 0%, rgba(7, 20, 30, 0) 100%)',
-    'box-sizing': 'border-box',
-    'padding': '10px',
-    'padding-top': '60px',
-    'color': 'white',
-    'display': 'none',
-    'font-family': 'Helvetica, Arial, Sans-serif',
-    'justify-content': 'center',
-    'align-items': 'center',
-    'user-select': 'none',
-    'z-index': '1',
-  });
-  controlsVisible = false;
-
-  // Play button
-  playPauseDiv = createIcon(global, 'play');
-  playPauseDiv.id = 'ima-play-pause';
-  setStyles(playPauseDiv, {
-    'width': '30px',
-    'height': '30px',
-    'margin-right': '20px',
-    'font-size': '1.25em',
-    'cursor': 'pointer',
-  });
-  controlsDiv.appendChild(playPauseDiv);
-  // Ad progress
-  countdownWrapperDiv = global.document.createElement('div');
-  countdownWrapperDiv.id = 'ima-countdown';
-  setStyles(countdownWrapperDiv, {
-    'align-items': 'center',
-    'box-sizing': 'border-box',
-    'display': 'none',
-    'flex-grow': '1',
-    'font-size': '12px',
-    'height': '20px',
-    'overflow': 'hidden',
-    'padding': '5px',
-    'text-shadow': '0px 0px 10px black',
-    'white-space': 'nowrap',
-  });
-  countdownDiv = global.document.createElement('div');
-  countdownWrapperDiv.appendChild(countdownDiv);
-  controlsDiv.appendChild(countdownWrapperDiv);
-  // Current time and duration.
-  timeDiv = global.document.createElement('div');
-  timeDiv.id = 'ima-time';
-  setStyles(timeDiv, {
-    'margin-right': '20px',
-    'text-align': 'center',
-    'font-size': '14px',
-    'text-shadow': '0px 0px 10px black',
-  });
-  timeNode = global.document.createTextNode('-:- / 0:00');
-  timeDiv.appendChild(timeNode);
-  controlsDiv.appendChild(timeDiv);
-  // Progress bar.
-  progressBarWrapperDiv = global.document.createElement('div');
-  progressBarWrapperDiv.id = 'ima-progress-wrapper';
-  setStyles(progressBarWrapperDiv, {
-    'height': '30px',
-    'flex-grow': '1',
-    'position': 'relative',
-    'margin-right': '20px',
-  });
-  progressLine = global.document.createElement('div');
-  progressLine.id = 'progress-line';
-  setStyles(progressLine, {
-    'background-color': 'rgb(255, 255, 255)',
-    'height': '2px',
-    'margin-top': '14px',
-    'width': '0%',
-    'float': 'left',
-  });
-  totalTimeLine = global.document.createElement('div');
-  totalTimeLine.id = 'total-time-line';
-  setStyles(totalTimeLine, {
-    'background-color': 'rgba(255, 255, 255, 0.45)',
-    'height': '2px',
-    'width': '100%',
-    'margin-top': '14px',
-  });
-  progressMarkerDiv = global.document.createElement('div');
-  progressMarkerDiv.id = 'ima-progress-marker';
-  setStyles(progressMarkerDiv, {
-    'height': '14px',
-    'width': '14px',
-    'position': 'absolute',
-    'left': '0%',
-    'top': '50%',
-    'margin-top': '-7px',
-    'cursor': 'pointer',
-  });
-  progressMarkerDiv.appendChild(createIcon(global, 'seek'));
-  progressBarWrapperDiv.appendChild(progressLine);
-  progressBarWrapperDiv.appendChild(progressMarkerDiv);
-  progressBarWrapperDiv.appendChild(totalTimeLine);
-  controlsDiv.appendChild(progressBarWrapperDiv);
-
-  // Mute/Unmute button
-  muteUnmuteDiv = createIcon(global, 'volume_max');
-  muteUnmuteDiv.id = 'ima-mute-unmute';
-  setStyles(muteUnmuteDiv, {
-    'width': '30px',
-    'height': '30px',
-    'flex-shrink': '0',
-    'margin-right': '20px',
-    'font-size': '1.25em',
-    'cursor': 'pointer',
-  });
-  controlsDiv.appendChild(muteUnmuteDiv);
-
-  // Fullscreen button
-  fullscreenDiv = createIcon(global, 'fullscreen');
-  fullscreenDiv.id = 'ima-fullscreen';
-  setStyles(fullscreenDiv, {
-    'width': '30px',
-    'height': '30px',
-    'flex-shrink': '0',
-    'font-size': '1.25em',
-    'cursor': 'pointer',
-    'text-align': 'center',
-    'font-weight': 'bold',
-    'line-height': '1.4em',
-  });
-  controlsDiv.appendChild(fullscreenDiv);
-
-  // Ad container.
-  adContainerDiv = global.document.createElement('div');
-  adContainerDiv.id = 'ima-ad-container';
-  setStyles(adContainerDiv, {
-    'position': 'absolute',
-    'top': '0px',
-    'left': '0px',
-    'width': '100%',
-    'height': '100%',
-  });
-
-  // Wraps our content video.
-  contentDiv = global.document.createElement('div');
-  contentDiv.id = 'ima-content';
-  setStyles(contentDiv, {
-    'position': 'absolute',
-    'top': '0px',
-    'left': '0px',
-    'width': '100%',
-    'height': '100%',
-  });
-  // The video player
-  videoPlayer = global.document.createElement('video');
-  videoPlayer.id = 'ima-content-player';
-  setStyles(videoPlayer, {
-    'width': '100%',
-    'height': '100%',
-    'background-color': 'black',
-  });
-  videoPlayer.setAttribute('poster', data.poster);
-  if (data['crossorigin'] != null) {
-    videoPlayer.setAttribute('crossorigin', data['crossorigin']);
-  }
-  videoPlayer.setAttribute('playsinline', true);
-  videoPlayer.setAttribute(
-    'controlsList',
-    'nodownload nofullscreen noremoteplayback'
-  );
-  if (data.src) {
-    const sourceElement = document.createElement('source');
-    sourceElement.setAttribute('src', data.src);
-    videoPlayer.appendChild(sourceElement);
-  }
-  if (data.childElements) {
-    const children = JSON.parse(data.childElements);
-    /** @type {!Array} */ (children).forEach((child) => {
-      videoPlayer.appendChild(htmlToElement(child));
-    });
-  }
-  if (data.imaSettings) {
-    imaSettings = tryParseJson(data.imaSettings);
-  }
-
-  contentDiv.appendChild(videoPlayer);
-  wrapperDiv.appendChild(contentDiv);
-  wrapperDiv.appendChild(adContainerDiv);
-  wrapperDiv.appendChild(controlsDiv);
-  wrapperDiv.appendChild(bigPlayDiv);
-  global.document.getElementById('c').appendChild(wrapperDiv);
-
-  window.addEventListener('message', onMessage.bind(null, global));
-
-  contentComplete = false;
-  adsActive = false;
-  allAdsCompleted = false;
-  playbackStarted = false;
-  nativeFullscreen = false;
-  imaLoadAllowed = true;
-
-  let mobileBrowser = false;
-  interactEvent = 'click';
-  mouseDownEvent = 'mousedown';
-  mouseMoveEvent = 'mousemove';
-  mouseUpEvent = 'mouseup';
-  if (
-    navigator.userAgent.match(/iPhone/i) ||
-    navigator.userAgent.match(/iPad/i) ||
-    navigator.userAgent.match(/Android/i)
-  ) {
-    mobileBrowser = true;
-    interactEvent = 'touchend';
-    mouseDownEvent = 'touchstart';
-    mouseMoveEvent = 'touchmove';
-    mouseUpEvent = 'touchend';
-  }
-  if (mobileBrowser) {
-    // Create our own tap listener that ignores tap and drag.
-    bigPlayDiv.addEventListener(mouseMoveEvent, onBigPlayTouchMove);
-    bigPlayDiv.addEventListener(mouseUpEvent, onBigPlayTouchEnd);
-    bigPlayDiv.addEventListener(
-      'tapwithoutdrag',
-      onBigPlayClick.bind(null, global)
-    );
-  } else {
-    bigPlayDiv.addEventListener(
-      interactEvent,
-      onBigPlayClick.bind(null, global)
-    );
-  }
-  playPauseDiv.addEventListener(interactEvent, onPlayPauseClick);
-  progressBarWrapperDiv.addEventListener(mouseDownEvent, onProgressClick);
-  muteUnmuteDiv.addEventListener(interactEvent, onMuteUnmuteClick);
-  fullscreenDiv.addEventListener(
-    interactEvent,
-    toggleFullscreen.bind(null, global)
-  );
-
-  // Timeout is 1s, because showControls will hide after 3s
-  showControlsThrottled = throttle(window, showControls, 1000);
-
-  const fullScreenEvents = [
-    'fullscreenchange',
-    'mozfullscreenchange',
-    'webkitfullscreenchange',
-  ];
-  fullScreenEvents.forEach((fsEvent) => {
-    global.document.addEventListener(
-      fsEvent,
-      onFullscreenChange.bind(null, global),
-      false
-    );
-  });
-
-  consentState = global.context.initialConsentState;
-
-  if (consentState == 4) {
-    // UNKNOWN
-    // On unknown consent state, do not load IMA. Treat this the same as if IMA
-    // failed to load.
-    onImaLoadFail();
-  } else {
-    // Set-up code that can't run until the IMA lib loads.
-    loadScript(
-      /** @type {!Window} */ (global),
-      'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
-      () => onImaLoadSuccess(global, data),
-      onImaLoadFail
-    );
-  }
-}
-
-/**
- * Adds the appropriate event listener to an element
- * to represent a hover state.
- *
- * NOTE: This does not add a throttler,
- * since this is applied per element,
- * and would require wrapping the callback.
- * Thus, the callback passed should be,
- * appropriately throttled. See showControlsThrottled.
- *
- * @param {!Element} element
- * @param {!Function} callback
- */
-export function addHoverEventToElement(element, callback) {
-  element.addEventListener(interactEvent, callback);
-  element.addEventListener(mouseMoveEvent, callback);
-}
-
-/**
- * Removes the appropriate event listener from an element
- * that represented a hover state.
- * @param {!Element} element
- * @param {!Function} callback
- */
-export function removeHoverEventFromElement(element, callback) {
-  element.removeEventListener(interactEvent, callback);
-  element.removeEventListener(mouseMoveEvent, callback);
-}
-
-/**
- * @param {!Object} global
- * @param {!Object} data
- */
-function onImaLoadSuccess(global, data) {
-  // This is the first place where we have access to any IMA objects.
-
-  // Handle settings that need to be set before the AdDisplayContainer is
-  // created.
-  if (imaSettings) {
-    if (imaSettings['locale']) {
-      global.google.ima.settings.setLocale(imaSettings['locale']);
-    }
-    if (imaSettings['vpaidMode']) {
-      global.google.ima.settings.setVpaidMode(imaSettings['vpaidMode']);
-    }
-  }
-
-  adDisplayContainer = new global.google.ima.AdDisplayContainer(
-    adContainerDiv,
-    videoPlayer
-  );
-
-  adsLoader = new global.google.ima.AdsLoader(adDisplayContainer);
-  adsLoader.getSettings().setPlayerType('amp-ima');
-  adsLoader.getSettings().setPlayerVersion('0.1');
-  // Propogate settings provided via child script tag.
-  // locale and vpaidMode are set above, as they must be set before we create
-  // an AdDisplayContainer.
-  // playerType and playerVersion are used by the developers to track usage,
-  // so we do not want to allow users to overwrite those values.
-  const skippedSettings = [
-    'locale',
-    'vpaidMode',
-    'playerType',
-    'playerVersion',
-  ];
-  for (const setting in imaSettings) {
-    if (!skippedSettings.includes(setting)) {
-      // Change e.g. 'ppid' to 'setPpid'.
-      const methodName = 'set' + camelCaseToTitleCase(setting);
-      if (typeof adsLoader.getSettings()[methodName] === 'function') {
-        adsLoader.getSettings()[methodName](imaSettings[setting]);
-      }
-    }
-  }
-  adsLoader.addEventListener(
-    global.google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
-    onAdsManagerLoaded.bind(null, global),
-    false
-  );
-  adsLoader.addEventListener(
-    global.google.ima.AdErrorEvent.Type.AD_ERROR,
-    onAdsLoaderError,
-    false
-  );
-
-  videoPlayer.addEventListener('ended', onContentEnded);
-
-  adsRequest = new global.google.ima.AdsRequest();
-  adsRequest.adTagUrl = data.tag;
-  adsRequest.linearAdSlotWidth = videoWidth;
-  adsRequest.linearAdSlotHeight = videoHeight;
-  adsRequest.nonLinearAdSlotWidth = videoWidth;
-  adsRequest.nonLinearAdSlotHeight = videoHeight / 3;
-
-  if (!data['delayAdRequest']) {
-    requestAds();
-  } else {
-    // Let amp-ima-video know that we are done set-up.
-    postMessage({event: VideoEvents.LOAD});
-  }
-}
-
-/**
- * Handler for on fail.
- */
-function onImaLoadFail() {
-  // Something blocked ima3.js from loading - ignore all IMA stuff and just play
-  // content.
-  addHoverEventToElement(
-    /** @type {!Element} */ (videoPlayer),
-    showControlsThrottled
-  );
-  imaLoadAllowed = false;
-  postMessage({event: VideoEvents.LOAD});
-}
-
-/**
- * @param {string} html
- * @return {!Element}
- */
-function htmlToElement(html) {
-  const template = document.createElement('template');
-  template./*OK*/ innerHTML = html;
-  return template.content.firstChild;
-}
-
-/**
- * @param {!Object} global
- * @param {string} name
- * @param {string} [fill='#FFFFFF']
- * @return {!Element}
- */
-function createIcon(global, name, fill = '#FFFFFF') {
-  const doc = global.document;
-  const icon = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  icon.setAttributeNS(null, 'fill', fill);
-  icon.setAttributeNS(null, 'height', '100%');
-  icon.setAttributeNS(null, 'width', '100%');
-  icon.setAttributeNS(null, 'viewBox', '0 0 24 24');
-  setStyle(icon, 'filter', 'drop-shadow(0px 0px 14px rgba(0,0,0,0.4))');
-  icon./*OK*/ innerHTML = icons[name];
-  return icon;
-}
-
-/**
- * @param {!Element} element
- * @param {string} name
- * @param {string} [fill='#FFFFFF']
- */
-function changeIcon(element, name, fill = '#FFFFFF') {
-  element./*OK*/ innerHTML = icons[name];
-  if (fill != element.getAttributeNS(null, 'fill')) {
-    element.setAttributeNS(null, 'fill', fill);
-  }
-}
-
-/**
- * Triggered when the user clicks on the big play button div.
- * @param {!Object} global
- * @visibleForTesting
- */
-export function onBigPlayClick(global) {
-  if (playbackStarted) {
-    // Resart the video
-    playVideo();
-  } else {
-    // Play the video for the first time
-    playbackStarted = true;
-    uiTicker = setInterval(uiTickerClick, 500);
-    setInterval(playerDataTick, 1000);
-    if (adDisplayContainer) {
-      adDisplayContainer.initialize();
-    }
-    videoPlayer.load();
-    playAds(global);
-  }
-
-  setStyle(bigPlayDiv, 'display', 'none');
-}
-
-/**
- * Triggered when the user ends a tap on the big play button.
- */
-function onBigPlayTouchEnd() {
-  if (userTappedAndDragged) {
-    // Reset state and ignore this tap.
-    userTappedAndDragged = false;
-  } else {
-    const tapWithoutDragEvent = new Event('tapwithoutdrag');
-    bigPlayDiv.dispatchEvent(tapWithoutDragEvent);
-  }
-}
-
-/**
- * Triggered when the user moves a tap on the big play button.
- */
-function onBigPlayTouchMove() {
-  userTappedAndDragged = true;
-}
-
-/**
- * Requests ads.
- */
-export function requestAds() {
-  adsRequested = true;
-  adRequestFailed = false;
-  if (consentState == CONSENT_POLICY_STATE.UNKNOWN) {
-    // We're unaware of the user's consent state - do not request ads.
-    imaLoadAllowed = false;
-    return;
-  } else if (consentState == CONSENT_POLICY_STATE.INSUFFICIENT) {
-    // User has provided consent state but has not consented to personalized
-    // ads.
-    adsRequest.adTagUrl += '&npa=1';
-  }
-  adsLoader.requestAds(adsRequest);
-}
-
-/**
- * Starts ad playback. If the ad request has not yet resolved, calls itself
- * again after 250ms.
- * @param {!Object} global
- * @visibleForTesting
- */
-export function playAds(global) {
-  if (!imaLoadAllowed) {
-    playVideo();
-    return;
-  }
-
-  if (!adsRequested) {
-    requestAds();
-    playAds(global);
-    return;
-  } else if (adsManager) {
-    // Ad request resolved.
-    try {
-      adsManager.init(
-        videoWidth,
-        videoHeight,
-        global.google.ima.ViewMode.NORMAL
-      );
-      adsManager.start();
-    } catch (adError) {
-      playVideo();
-    }
-  } else if (!adRequestFailed) {
-    // Ad request did not yet resolve but also did not yet fail.
-    setTimeout(playAds.bind(null, global), 250);
-  } else {
-    // Ad request failed.
-    playVideo();
-  }
-}
-
-/**
- * Called when the content completes.
- *
- * @visibleForTesting
- */
-export function onContentEnded() {
-  contentComplete = true;
-  if (adsLoader) {
-    adsLoader.contentComplete();
-  }
-
-  // If all ads are not completed,
-  // onContentResume will show the bigPlayDiv
-  if (allAdsCompleted) {
-    setStyle(bigPlayDiv, 'display', bigPlayDivDisplayStyle);
-  }
-
-  postMessage({event: VideoEvents.PAUSE});
-  postMessage({event: VideoEvents.ENDED});
-}
-
-/**
- * Called when the IMA SDK has an AdsManager ready for us.
- * @param {!Object} global
- * @param {*} adsManagerLoadedEvent
- * @visibleForTesting
- */
-export function onAdsManagerLoaded(global, adsManagerLoadedEvent) {
-  const adsRenderingSettings = new global.google.ima.AdsRenderingSettings();
-  adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
-  adsManager = adsManagerLoadedEvent.getAdsManager(
-    videoPlayer,
-    adsRenderingSettings
-  );
-  adsManager.addEventListener(
-    global.google.ima.AdErrorEvent.Type.AD_ERROR,
-    onAdError
-  );
-  adsManager.addEventListener(global.google.ima.AdEvent.Type.LOADED, onAdLoad);
-  adsManager.addEventListener(
-    global.google.ima.AdEvent.Type.AD_PROGRESS,
-    onAdProgress
-  );
-  adsManager.addEventListener(
-    global.google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
-    onContentPauseRequested.bind(null, global)
-  );
-  adsManager.addEventListener(
-    global.google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
-    onContentResumeRequested
-  );
-  adsManager.addEventListener(
-    global.google.ima.AdEvent.Type.ALL_ADS_COMPLETED,
-    onAllAdsCompleted
-  );
-  if (muteAdsManagerOnLoaded) {
-    adsManager.setVolume(0);
-  }
-  postMessage({event: VideoEvents.LOAD});
-}
-
-/**
- * Called when we encounter an error trying to load ads.
- *
- * @visibleForTesting
- */
-export function onAdsLoaderError() {
-  adRequestFailed = true;
-  // Send this message to trigger auto-play for failed pre-roll requests -
-  // failing to load an ad is just as good as loading one as far as starting
-  // playback is concerned because our content will be ready to play.
-  postMessage({event: VideoEvents.LOAD});
-  addHoverEventToElement(
-    /** @type {!Element} */ (videoPlayer),
-    showControlsThrottled
-  );
-  if (playbackStarted) {
-    playVideo();
-  }
-}
-
-/**
- * Called when we encounter an error trying to play ads.
- *
- * @visibleForTesting
- */
-export function onAdError() {
-  postMessage({event: VideoEvents.AD_END});
-  currentAd = null;
-  if (adsManager) {
-    adsManager.destroy();
-  }
-  addHoverEventToElement(
-    /** @type {!Element} */ (videoPlayer),
-    showControlsThrottled
-  );
-  playVideo();
-}
-
-/**
- * Called each time a new ad loads. Sets currentAd
- * @param {!Object} global
- * @visibleForTesting
- */
-export function onAdLoad(global) {
-  currentAd = global.getAd();
-}
-
-/**
- * Called intermittently as the ad plays, allowing us to display ad counter.
- * @param {!Object} global
- * @visibleForTesting
- */
-export function onAdProgress(global) {
-  const {adPosition, totalAds} = global.getAdData();
-  const remainingTime = adsManager.getRemainingTime();
-  const remainingMinutes = Math.floor(remainingTime / 60);
-  let remainingSeconds = Math.floor(remainingTime % 60);
-  if (remainingSeconds.toString().length < 2) {
-    remainingSeconds = '0' + remainingSeconds;
-  }
-  const label = adLabel.replace('%s', adPosition).replace('%s', totalAds);
-  countdownDiv.textContent = `${label}: ${remainingMinutes}:${remainingSeconds}`;
-}
-
-/**
- * Called by the IMA SDK. Pauses the content and readies the player for ads.
- * @param {!Object} global
- * @visibleForTesting
- */
-export function onContentPauseRequested(global) {
-  if (adsManagerWidthOnLoad) {
-    adsManager.resize(
-      adsManagerWidthOnLoad,
-      adsManagerHeightOnLoad,
-      global.google.ima.ViewMode.NORMAL
-    );
-    adsManagerWidthOnLoad = null;
-    adsManagerHeightOnLoad = null;
-  }
-  adsActive = true;
-  postMessage({event: VideoEvents.AD_START});
-  removeHoverEventFromElement(
-    /** @type {!Element} */ (videoPlayer),
-    showControlsThrottled
-  );
-  setStyle(adContainerDiv, 'display', 'block');
-  videoPlayer.removeEventListener('ended', onContentEnded);
-  showAdControls();
-  videoPlayer.pause();
-}
-
-/**
- * Called by the IMA SDK. Resumes content after an ad break.
- *
- * @visibleForTesting
- */
-export function onContentResumeRequested() {
-  adsActive = false;
-  addHoverEventToElement(
-    /** @type {!Element} */ (videoPlayer),
-    showControlsThrottled
-  );
-  postMessage({event: VideoEvents.AD_END});
-  resetControlsAfterAd();
-  if (!contentComplete) {
-    // CONTENT_RESUME will fire after post-rolls as well, and we don't want to
-    // resume content in that case.
-    playVideo();
-  } else {
-    setStyle(bigPlayDiv, 'display', bigPlayDivDisplayStyle);
-  }
-
-  videoPlayer.addEventListener('ended', onContentEnded);
-}
-
-/**
- * Called by the IMA SDK. Signifies all ads have been played for the video.
- *
- * @visibleForTesting
- */
-export function onAllAdsCompleted() {
-  currentAd = null;
-  allAdsCompleted = true;
-}
-
-/**
- * Called when our ui timer goes off. Updates the player UI.
- */
-function uiTickerClick() {
-  updateUi(videoPlayer.currentTime, videoPlayer.duration);
-}
-
-/**
- *  Called when our player data timer goes off. Sends a message to the parent
- *  iframe to update the player data.
- */
-function playerDataTick() {
-  // Skip while ads are active in case of custom playback. No harm done for
-  // non-custom playback because content won't be progressing while ads are
-  // playing.
-  if (videoPlayer && !adsActive) {
-    playerData.update(videoPlayer);
-    postMessage({
-      event: ImaPlayerData.IMA_PLAYER_DATA,
-      data: playerData,
-    });
-  }
-}
-
-/**
- * Updates the video player UI.
- * @param {number} currentTime
- * @param {number} duration
- * @visibleForTesting
- */
-export function updateUi(currentTime, duration) {
-  timeNode.textContent = formatTime(currentTime) + ' / ' + formatTime(duration);
-  const progressPercent = Math.floor((currentTime / duration) * 100);
-  setStyle(progressLine, 'width', progressPercent + '%');
-  setStyle(progressMarkerDiv, 'left', progressPercent - 1 + '%');
-}
-
-/**
- * Formats an int in seconds into a string of the format X:XX:XX. Omits the
- * hour if the content is less than one hour.
- * @param {number} time
- * @return {*} TODO(#23582): Specify return type
- * @visibleForTesting
- */
-export function formatTime(time) {
-  if (isNaN(time)) {
-    return '0:00';
-  }
-  let timeString = '';
-  const hours = Math.floor(time / 3600);
-  if (hours > 0) {
-    timeString += hours + ':';
-  }
-  const minutes = Math.floor((time % 3600) / 60);
-  if (hours > 0) {
-    timeString += zeroPad(minutes) + ':';
-  } else {
-    timeString += minutes + ':';
-  }
-  const seconds = Math.floor(time - (hours * 3600 + minutes * 60));
-  timeString += zeroPad(seconds);
-  return timeString;
-}
-
-/**
- * Zero-pads the provided int and returns a string of length 2.
- * @param {string|number} input
- * @return {*} TODO(#23582): Specify return type
- * @visibleForTesting
- */
-export function zeroPad(input) {
-  input = String(input);
-  return input.length == 1 ? '0' + input : input;
-}
-
-/**
- * Detects clicks on the progress bar.
- * @param {!Event} event
- */
-function onProgressClick(event) {
-  // Call this logic once to make sure we still seek if the user just clicks
-  // instead of clicking and dragging.
-  clearInterval(hideControlsTimeout);
-  onProgressMove(event);
-  event.preventDefault();
-  event.stopPropagation();
-  clearInterval(uiTicker);
-  document.addEventListener(mouseMoveEvent, onProgressMove);
-  document.addEventListener(mouseUpEvent, onProgressClickEnd);
-}
-
-/**
- * Detects the end of interaction on the progress bar.
- */
-function onProgressClickEnd() {
-  document.removeEventListener(mouseMoveEvent, onProgressMove);
-  document.removeEventListener(mouseUpEvent, onProgressClickEnd);
-  uiTicker = setInterval(uiTickerClick, 500);
-  videoPlayer.currentTime = videoPlayer.duration * seekPercent;
-  // Reset hide controls timeout.
-  showControls();
-}
-
-/**
- * Detects when the user clicks and drags on the progress bar.
- * @param {!Event} event
- */
-function onProgressMove(event) {
-  const progressWrapperPosition = getPagePosition(progressBarWrapperDiv);
-  const progressListStart = progressWrapperPosition.x;
-  const progressListWidth = progressBarWrapperDiv./*OK*/ offsetWidth;
-
-  // Handle Android Chrome touch events.
-  const eventX = event.clientX || event.touches[0].pageX;
-
-  seekPercent = (eventX - progressListStart) / progressListWidth;
-  if (seekPercent < 0) {
-    seekPercent = 0;
-  } else if (seekPercent > 1) {
-    seekPercent = 1;
-  }
-  updateUi(videoPlayer.duration * seekPercent, videoPlayer.duration);
-}
-
-/**
- * Returns the x,y coordinates of the given element relative to the window.
- * @param {!Element} el
- * @return {{x: number, y: number}}
- */
-function getPagePosition(el) {
-  let lx, ly;
-  for (
-    lx = 0, ly = 0;
-    el != null;
-    lx += el./*OK*/ offsetLeft,
-      ly += el./*OK*/ offsetTop,
-      el = el./*OK*/ offsetParent
-  ) {}
-  return {x: lx, y: ly};
-}
-
-/**
- * Called when the user clicks on the play / pause button.
- *
- * @visibleForTesting
- */
-export function onPlayPauseClick() {
-  if (playerState == PlayerStates.PLAYING) {
-    pauseVideo();
-  } else {
-    playVideo();
-  }
-}
-
-/**
- * Plays the content video.
- *
- * @visibleForTesting
- */
-export function playVideo() {
-  if (adsActive) {
-    adsManager.resume();
-  } else {
-    setStyle(adContainerDiv, 'display', 'none');
-    // Kick off the hide controls timer.
-    showControls();
-    videoPlayer.play();
-  }
-  playerState = PlayerStates.PLAYING;
-  postMessage({event: VideoEvents.PLAYING});
-  changeIcon(playPauseDiv, 'pause');
-}
-
-/**
- * Pauses the video player.
- * @param {?Event} event
- * @visibleForTesting
- */
-export function pauseVideo(event = null) {
-  if (adsActive) {
-    adsManager.pause();
-  } else {
-    videoPlayer.pause();
-    // Show controls and keep them there because we're paused.
-    clearInterval(hideControlsTimeout);
-    showControls();
-    if (event && event.type == 'webkitendfullscreen') {
-      // Video was paused because we exited fullscreen.
-      videoPlayer.removeEventListener('webkitendfullscreen', pauseVideo);
-      fullscreen = false;
-    }
-  }
-  playerState = PlayerStates.PAUSED;
-  postMessage({event: VideoEvents.PAUSE});
-  changeIcon(playPauseDiv, 'play');
-}
-
-/**
- * Handler when the mute/unmute button is clicked
- */
-export function onMuteUnmuteClick() {
-  if (videoPlayer.muted) {
-    unmuteVideo();
-  } else {
-    muteVideo();
-  }
-}
-
-/**
- * Function to mute the video
- */
-export function muteVideo() {
-  if (!videoPlayer.muted) {
-    videoPlayer.volume = 0;
-    videoPlayer.muted = true;
-    if (adsManager) {
-      adsManager.setVolume(0);
-    } else {
-      muteAdsManagerOnLoaded = true;
-    }
-    changeIcon(muteUnmuteDiv, 'mute');
-    postMessage({event: VideoEvents.MUTED});
-  }
-}
-
-/**
- * Function to unmute the video
- */
-export function unmuteVideo() {
-  if (videoPlayer.muted) {
-    videoPlayer.volume = 1;
-    videoPlayer.muted = false;
-    if (adsManager) {
-      adsManager.setVolume(1);
-    } else {
-      muteAdsManagerOnLoaded = false;
-    }
-    changeIcon(muteUnmuteDiv, 'volume_max');
-    postMessage({event: VideoEvents.UNMUTED});
-  }
-}
-
-/**
- * @param {Object} global
- */
-function exitFullscreen(global) {
-  // The video is currently in fullscreen mode
-  const cancelFullscreen =
-    global.document.exitFullscreen ||
-    global.document.exitFullScreen ||
-    global.document.webkitCancelFullScreen ||
-    global.document.mozCancelFullScreen;
-  if (cancelFullscreen) {
-    cancelFullscreen.call(document);
-  }
-}
-
-/**
- * @param {Object} global
- */
-function enterFullscreen(global) {
-  // Try to enter fullscreen mode in the browser
-  const requestFullscreen =
-    global.document.documentElement.requestFullscreen ||
-    global.document.documentElement.webkitRequestFullscreen ||
-    global.document.documentElement.mozRequestFullscreen ||
-    global.document.documentElement.requestFullScreen ||
-    global.document.documentElement.webkitRequestFullScreen ||
-    global.document.documentElement.mozRequestFullScreen;
-  if (requestFullscreen) {
-    fullscreenWidth = window.screen.width;
-    fullscreenHeight = window.screen.height;
-    requestFullscreen.call(global.document.documentElement);
-  } else {
-    // Use native fullscreen (iPhone)
-    videoPlayer.webkitEnterFullscreen();
-    // Pause the video when we leave fullscreen. iPhone does this
-    // automatically, but we still use pauseVideo as an event handler to
-    // sync the UI.
-    videoPlayer.addEventListener('webkitendfullscreen', pauseVideo);
-    nativeFullscreen = true;
-    onFullscreenChange(global);
-  }
-}
-
-/**
- * @param {Object} global
- */
-function toggleFullscreen(global) {
-  if (fullscreen) {
-    exitFullscreen(global);
-    return;
-  }
-  enterFullscreen(global);
-}
-
-/**
- * Called when the fullscreen mode of the browser or content player changes.
- * @param {Object} global
- */
-function onFullscreenChange(global) {
-  if (fullscreen) {
-    if (adsManager) {
-      // Resize the ad container
-      adsManager.resize(
-        videoWidth,
-        videoHeight,
-        global.google.ima.ViewMode.NORMAL
-      );
-      adsManagerWidthOnLoad = null;
-      adsManagerHeightOnLoad = null;
-    }
-    // Return the video to its original size and position
-    setStyle(wrapperDiv, 'width', px(videoWidth));
-    setStyle(wrapperDiv, 'height', px(videoHeight));
-    fullscreen = false;
-  } else {
-    // The user just entered fullscreen
-    if (!nativeFullscreen) {
-      if (adsManager) {
-        // Resize the ad container
-        adsManager.resize(
-          fullscreenWidth,
-          fullscreenHeight,
-          global.google.ima.ViewMode.FULLSCREEN
-        );
-        adsManagerWidthOnLoad = null;
-        adsManagerHeightOnLoad = null;
-      }
-      // Make the video take up the entire screen
-      setStyle(wrapperDiv, 'width', px(fullscreenWidth));
-      setStyle(wrapperDiv, 'height', px(fullscreenHeight));
-      hideControls();
-    }
-    fullscreen = true;
-  }
-  postMessage({event: 'fullscreenchange', isFullscreen: fullscreen});
-}
-
-/**
- * Show a subset of controls when ads are playing.
- * Visible controls are countdownDiv, playPauseDiv, muteUnmuteDiv, and fullscreenDiv
- *
- * @visibleForTesting
- */
-export function showAdControls() {
-  const hasMobileStyles = videoWidth <= 400;
-  const isSkippable = currentAd ? currentAd.getSkipTimeOffset() !== -1 : false;
-  const miniControls = hasMobileStyles && isSkippable;
-  // hide non-ad controls
-  [timeDiv, progressBarWrapperDiv].forEach((button) => {
-    setStyle(button, 'display', 'none');
-  });
-  // set ad control styles
-  setStyles(controlsDiv, {
-    'height': miniControls ? '20px' : '30px',
-    'justify-content': 'flex-end',
-    'padding': '10px',
-  });
-  [fullscreenDiv, playPauseDiv, muteUnmuteDiv].forEach((button) => {
-    setStyles(button, {'height': miniControls ? '18px' : '22px'});
-  });
-  setStyles(muteUnmuteDiv, {'margin-right': '10px'});
-  // show pause button while ad begins playing
-  changeIcon(playPauseDiv, 'pause');
-  // show ad controls
-  setStyle(countdownWrapperDiv, 'display', 'flex');
-  showControls();
-}
-
-/**
- * Reinstate access to all controls when ads have ended.
- *
- * @visibleForTesting
- */
-export function resetControlsAfterAd() {
-  // hide ad controls
-  setStyle(countdownWrapperDiv, 'display', 'none');
-  // set non-ad control styles
-  setStyles(controlsDiv, {
-    'justify-content': 'center',
-    'height': '100px',
-    'padding': '60px 10px 10px',
-  });
-  [fullscreenDiv, playPauseDiv, muteUnmuteDiv].forEach((button) => {
-    setStyles(button, {'height': '30px'});
-  });
-  setStyles(muteUnmuteDiv, {'margin-right': '20px'});
-  // show non-ad controls
-  [timeDiv, progressBarWrapperDiv].forEach((button) => {
-    setStyle(button, 'display', 'block');
-  });
-}
-
-/**
- * Show video controls and reset hide controls timeout.
- *
- * @visibleForTesting
- */
-export function showControls() {
-  if (!controlsVisible) {
-    setStyle(controlsDiv, 'display', 'flex');
-    controlsVisible = true;
-  }
-
-  // Hide controls after 3 seconds
-  if (playerState == PlayerStates.PLAYING) {
-    // Reset hide controls timer.
-    // Be sure to keep the timer greater than showControlsThrottled.
-    clearInterval(hideControlsTimeout);
-    hideControlsTimeout = setTimeout(hideControls, 3000);
-  }
-}
-
-/**
- * Hide video controls, except when ads are active.
- *
- * @visibleForTesting
- */
-export function hideControls() {
-  if (controlsVisible && !adsActive) {
-    setStyle(controlsDiv, 'display', 'none');
-    controlsVisible = false;
-  }
-}
-
-/**
- * Handles messages from the top window.
- * @param {!Object} global
- * @param {!Event} event
- */
-function onMessage(global, event) {
-  const eventData = getData(event);
-  if (!eventData) {
-    return;
-  }
-  const msg = isObject(eventData) ? eventData : tryParseJson(eventData);
-  if (!msg) {
-    return; // We only process valid JSON.
-  }
-  if (!msg['event'] || !msg['func']) {
-    return;
-  }
-  switch (msg['func']) {
-    case 'playVideo':
-      if (adsActive || playbackStarted) {
-        playVideo();
-      } else {
-        // Auto-play support
-        onBigPlayClick(global);
-      }
-      break;
-    case 'pauseVideo':
-      pauseVideo();
-      break;
-    case 'mute':
-      muteVideo();
-      break;
-    case 'unMute':
-      unmuteVideo();
-      break;
-    case 'hideControls':
-      if (!adsActive) {
-        hideControls();
-      }
-      break;
-    case 'showControls':
-      if (!adsActive) {
-        showControls();
-      }
-      break;
-    case 'resize':
-      const args = msg['args'];
-      if (args && args.width && args.height) {
-        setStyles(wrapperDiv, {
-          'width': px(args.width),
-          'height': px(args.height),
-        });
-        setStyles(bigPlayDiv, {
-          'width': px(args.width),
-          'height': px(args.height),
-        });
-        if (adsActive && !fullscreen) {
-          adsManager.resize(
-            args.width,
-            args.height,
-            global.google.ima.ViewMode.NORMAL
-          );
-        } else {
-          adsManagerWidthOnLoad = args.width;
-          adsManagerHeightOnLoad = args.height;
-        }
-      }
-      break;
-    case 'onFirstScroll':
-    case 'onAdRequestDelayTimeout':
-      if (!adsRequested && imaLoadAllowed) {
-        requestAds();
-      }
-      break;
-    case 'enterFullscreen':
-      if (fullscreen) {
-        return;
-      }
-      enterFullscreen(global);
-      break;
-    case 'exitFullscreen':
-      if (!fullscreen) {
-        return;
-      }
-      exitFullscreen(global);
-      break;
-  }
-}
-
-/**
- * @param {!Object} data
- */
-function postMessage(data) {
-  window.parent./*OK*/ postMessage(data, '*');
-}
-
-/**
- * Returns the properties we need to access for testing.
- *
- * @return {*} TODO(#23582): Specify return type
- * @visibleForTesting
- */
-export function getPropertiesForTesting() {
-  return {
-    adContainerDiv,
-    allAdsCompleted,
-    adRequestFailed,
-    adsActive,
-    adsManagerWidthOnLoad,
-    adsManagerHeightOnLoad,
-    adsRequest,
-    bigPlayDiv,
-    contentComplete,
-    controlsDiv,
-    controlsVisible,
-    hideControlsTimeout,
-    imaLoadAllowed,
-    interactEvent,
-    playbackStarted,
-    playerState,
-    PlayerStates,
-    playPauseDiv,
-    progressLine,
-    progressMarkerDiv,
-    timeNode,
-    uiTicker,
-    videoPlayer,
-  };
-}
-
-/**
- * Gets the throttled show controls
- * @return {Function}
- * @visibleForTesting
- */
-export function getShowControlsThrottledForTesting() {
-  return showControlsThrottled;
-}
-
-/**
- * Sets the big play button div.
- * @param {!Element} div
- * @visibleForTesting
- */
-export function setBigPlayDivForTesting(div) {
-  bigPlayDiv = div;
-}
-
-/**
- * Sets the ad display container.
- * @param {!Element} adc
- * @visibleForTesting
- */
-export function setAdDisplayContainerForTesting(adc) {
-  adDisplayContainer = adc;
-}
-
-/**
- * Sets the video width and height.
- * @param {number} width
- * @param {number} height
- * @visibleForTesting
- */
-export function setVideoWidthAndHeightForTesting(width, height) {
-  videoWidth = width;
-  videoHeight = height;
-}
-
-/**
- * Sets the video muted state
- * @param {boolean} shouldMute
- * @visibleForTesting
- */
-export function setVideoPlayerMutedForTesting(shouldMute) {
-  videoPlayer.muted = shouldMute;
-}
-
-/**
- * Sets the allAdsCompleted flag.
- * @param {boolean} newValue
- * @visibleForTesting
- */
-export function setAllAdsCompletedForTesting(newValue) {
-  allAdsCompleted = newValue;
-}
-
-/**
- * Sets the ad request failed flag.
- * @param {boolean} newValue
- * @visibleForTesting
- */
-export function setAdRequestFailedForTesting(newValue) {
-  adRequestFailed = newValue;
-}
-
-/**
- * Sets the ads loader.
- * @param {*} newAdsLoader
- * @visibleForTesting
- */
-export function setAdsLoaderForTesting(newAdsLoader) {
-  adsLoader = newAdsLoader;
-}
-
-/**
- * Sets the ads request.
- * @param {*} newAdsRequest
- * @visibleForTesting
- */
-export function setAdsRequestForTesting(newAdsRequest) {
-  adsRequest = newAdsRequest;
-}
-
-/**
- * Sets the flag to mute the ads manager when it loads.
- * @param {boolean} shouldMute
- * @visibleForTesting
- */
-export function setMuteAdsManagerOnLoadedForTesting(shouldMute) {
-  muteAdsManagerOnLoaded = shouldMute;
-}
-
-/**
- * Sets the ads manager.
- * @param {*} newAdsManager
- * @visibleForTesting
- */
-export function setAdsManagerForTesting(newAdsManager) {
-  adsManager = newAdsManager;
-}
-
-/**
- * Sets the ads manager dimensions on load.
- * @param {number} width
- * @param {number} height
- * @visibleForTesting
- */
-export function setAdsManagerDimensionsOnLoadForTesting(width, height) {
-  adsManagerWidthOnLoad = width;
-  adsManagerHeightOnLoad = height;
-}
-
-/**
- * Sets the content complete flag.
- * @param {*} newContentComplete
- * @visibleForTesting
- */
-export function setContentCompleteForTesting(newContentComplete) {
-  contentComplete = newContentComplete;
-}
-
-/**
- * Sets the video player.
- * @param {*} newPlayer
- * @visibleForTesting
- */
-export function setVideoPlayerForTesting(newPlayer) {
-  videoPlayer = newPlayer;
-}
-
-/**
- * Sets the player state.
- * @param {*} newState
- * @visibleForTesting
- */
-export function setPlayerStateForTesting(newState) {
-  playerState = newState;
-}
-
-/**
- * Sets the hideControlsTimeout
- * @param {number} newTimeout
- * @visibleForTesting
- */
-export function setHideControlsTimeoutForTesting(newTimeout) {
-  hideControlsTimeout = newTimeout;
-}
-
-/**
- * Sets the consent state.
- * @param {*} newConsentState
- * @visibleForTesting
- */
-export function setConsentStateForTesting(newConsentState) {
-  consentState = newConsentState;
-}
-
-/**
- * Events
- *
- * Copied from src/video-interface.js.
- *
- * @const {!Object<string, string>}
- */
-// TODO(aghassemi, #9216): Use video-interface.js
-const VideoEvents = {
-  /**
-   * load
-   *
-   * Fired when the video player is loaded and calls to methods such as `play()`
-   * are allowed.
-   *
-   * @event load
-   */
-  LOAD: 'load',
-
-  /**
-   * play
-   *
-   * Fired when the video plays.
-   *
-   * @event play
-   */
-  PLAYING: 'playing',
-
-  /**
-   * pause
-   *
-   * Fired when the video pauses.
-   *
-   * @event pause
-   */
-  PAUSE: 'pause',
-
-  /**
-   * ended
-   *
-   * Fired when the video ends.
-   *
-   * This event should be fired in addition to `pause` when video ends.
-   *
-   * @event ended
-   */
-  ENDED: 'ended',
-
-  /**
-   * muted
-   *
-   * Fired when the video is muted.
-   *
-   * @event play
-   */
-  MUTED: 'muted',
-
-  /**
-   * unmuted
-   *
-   * Fired when the video is unmuted.
-   *
-   * @event unmuted
-   */
-  UNMUTED: 'unmuted',
-
-  /**
-   * amp:video:visibility
-   *
-   * Fired when the video's visibility changes. Normally fired
-   * from `viewportCallback`.
-   *
-   * @event amp:video:visibility
-   * @property {boolean} visible Whether the video player is visible or not.
-   */
-  VISIBILITY: 'amp:video:visibility',
-
-  /**
-   * reload
-   *
-   * Fired when the video's src changes.
-   *
-   * @event reload
-   */
-  RELOAD: 'reloaded',
-  /**
-   * pre/mid/post Ad start
-   *
-   * Fired when an Ad starts playing.
-   *
-   * This is used to remove any overlay shims during Ad play during autoplay
-   * or minimized-to-corner version of the player.
-   *
-   * @event ad_start
-   */
-  AD_START: 'ad_start',
-
-  /**
-   * pre/mid/post Ad ends
-   *
-   * Fired when an Ad ends playing.
-   *
-   * This is used to restore any overlay shims during Ad play during autoplay
-   * or minimized-to-corner version of the player.
-   *
-   * @event ad_end
-   */
-  AD_END: 'ad_end',
-};
diff --git a/ads/google/test/test-utils.js b/ads/google/test/test-utils.js
index a645d9dc3ceaa..831930661a26a 100644
--- a/ads/google/test/test-utils.js
+++ b/ads/google/test/test-utils.js
@@ -23,7 +23,7 @@ import {
   getMultiSizeDimensions,
 } from '../utils';
 
-describe('#getMultiSizeDimensions', () => {
+describes.sandboxed('#getMultiSizeDimensions', {}, () => {
   const multiSizes = [
     [300, 300],
     [300, 250],
@@ -143,35 +143,43 @@ describe('#getMultiSizeDimensions', () => {
   });
 });
 
-describe('#getMatchedContentResponsiveHeightAndUpdatePubParams', () => {
-  it('should use auto logic when no pub params present', () => {
-    const element = document.createElement('div');
-    expect(
-      getMatchedContentResponsiveHeightAndUpdatePubParams(400, element)
-    ).to.equal(1472);
-    expect(element.getAttribute(ExternalCorePubVars.ROWS_NUM)).to.equal('12');
-    expect(element.getAttribute(ExternalCorePubVars.COLUMNS_NUM)).to.equal('1');
-    expect(element.getAttribute(ExternalCorePubVars.UI_TYPE)).to.equal(
-      LayoutType.MOBILE_BANNER_IMAGE_SIDEBYSIDE
-    );
-  });
-
-  it('should use pub control logic when pub params present', () => {
-    const element = document.createElement('div');
-    element.setAttribute(ExternalCorePubVars.ROWS_NUM, '1,2');
-    element.setAttribute(ExternalCorePubVars.COLUMNS_NUM, '3,4');
-    element.setAttribute(
-      ExternalCorePubVars.UI_TYPE,
-      `${LayoutType.IMAGE_SIDEBYSIDE},${LayoutType.IMAGE_STACKED}`
-    );
-
-    expect(
-      getMatchedContentResponsiveHeightAndUpdatePubParams(800, element)
-    ).to.equal(382);
-    expect(element.getAttribute(ExternalCorePubVars.ROWS_NUM)).to.equal('2');
-    expect(element.getAttribute(ExternalCorePubVars.COLUMNS_NUM)).to.equal('4');
-    expect(element.getAttribute(ExternalCorePubVars.UI_TYPE)).to.equal(
-      LayoutType.PUB_CONTROL_IMAGE_STACKED
-    );
-  });
-});
+describes.sandboxed(
+  '#getMatchedContentResponsiveHeightAndUpdatePubParams',
+  {},
+  () => {
+    it('should use auto logic when no pub params present', () => {
+      const element = document.createElement('div');
+      expect(
+        getMatchedContentResponsiveHeightAndUpdatePubParams(400, element)
+      ).to.equal(1472);
+      expect(element.getAttribute(ExternalCorePubVars.ROWS_NUM)).to.equal('12');
+      expect(element.getAttribute(ExternalCorePubVars.COLUMNS_NUM)).to.equal(
+        '1'
+      );
+      expect(element.getAttribute(ExternalCorePubVars.UI_TYPE)).to.equal(
+        LayoutType.MOBILE_BANNER_IMAGE_SIDEBYSIDE
+      );
+    });
+
+    it('should use pub control logic when pub params present', () => {
+      const element = document.createElement('div');
+      element.setAttribute(ExternalCorePubVars.ROWS_NUM, '1,2');
+      element.setAttribute(ExternalCorePubVars.COLUMNS_NUM, '3,4');
+      element.setAttribute(
+        ExternalCorePubVars.UI_TYPE,
+        `${LayoutType.IMAGE_SIDEBYSIDE},${LayoutType.IMAGE_STACKED}`
+      );
+
+      expect(
+        getMatchedContentResponsiveHeightAndUpdatePubParams(800, element)
+      ).to.equal(382);
+      expect(element.getAttribute(ExternalCorePubVars.ROWS_NUM)).to.equal('2');
+      expect(element.getAttribute(ExternalCorePubVars.COLUMNS_NUM)).to.equal(
+        '4'
+      );
+      expect(element.getAttribute(ExternalCorePubVars.UI_TYPE)).to.equal(
+        LayoutType.PUB_CONTROL_IMAGE_STACKED
+      );
+    });
+  }
+);
diff --git a/ads/gumgum.js b/ads/gumgum.js
deleted file mode 100644
index 0f870284221cd..0000000000000
--- a/ads/gumgum.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-import {setStyles} from '../src/style';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function gumgum(global, data) {
-  validateData(data, ['zone', 'slot']);
-
-  const win = window,
-    ctx = win.context,
-    dom = global.document.getElementById('c'),
-    ampWidth = parseInt(data.width || '0', 10),
-    ampHeight = parseInt(data.height || '0', 10),
-    ggevents = global.ggevents || [];
-
-  const {max} = Math,
-    slotId = parseInt(data.slot, 10),
-    onLoad = function (type) {
-      return function (evt) {
-        const ad = {width: 0, height: 0, ...(evt.ad || {})},
-          identifier = ['GUMGUM', type, evt.id].join('_');
-        ctx.reportRenderedEntityIdentifier(identifier);
-        ctx.renderStart({
-          width: max(ampWidth, ad.width),
-          height: max(ampHeight, ad.height),
-        });
-      };
-    },
-    noFill = function () {
-      ctx.noContentAvailable();
-    };
-
-  // Ads logic starts
-  global.ggv2id = data.zone;
-  global.ggevents = ggevents;
-  global.sourceUrl = context.sourceUrl;
-  global.sourceReferrer = context.referrer;
-
-  if (slotId) {
-    // Slot Ad
-    const ins = global.document.createElement('div');
-    setStyles(ins, {
-      display: 'block',
-      width: '100%',
-      height: '100%',
-    });
-    ins.setAttribute('data-gg-slot', slotId);
-    ins.setAttribute('pl', 2);
-    dom.appendChild(ins);
-    // Events
-    ggevents.push({
-      'slot.nofill': noFill,
-      'slot.close': noFill,
-      'slot.load': onLoad('SLOT'),
-    });
-    // Main script
-    loadScript(global, 'https://js.gumgum.com/slot.js');
-  } else {
-    // No valid configuration
-    ctx.noContentAvailable();
-  }
-}
diff --git a/ads/holder.js b/ads/holder.js
deleted file mode 100644
index dc5e5c14ab21d..0000000000000
--- a/ads/holder.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function holder(global, data) {
-  validateData(data, ['block'], []);
-  const wcl = global.context.location;
-  const n = navigator.userAgent;
-  let l = '&r' + Math.round(Math.random() * 10000000) + '&h' + wcl.href;
-  if (!(n.indexOf('Safari') != -1 && n.indexOf('Chrome') == -1)) {
-    l += '&c1';
-  }
-  data.queue = l;
-  writeScript(global, 'https://i.holder.com.ua/js2/holder/ajax/ampv1.js');
-}
diff --git a/ads/ibillboard.js b/ads/ibillboard.js
deleted file mode 100644
index 93bec6106ff6c..0000000000000
--- a/ads/ibillboard.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, validateSrcPrefix, writeScript} from '../3p/3p';
-
-const validHosts = [
-  'https://go.eu.bbelements.com',
-  'https://go.idnes.bbelements.com',
-  'https://go.goldbachpoland.bbelements.com',
-  'https://go.pol.bbelements.com',
-  'https://go.idmnet.bbelements.com',
-];
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function ibillboard(global, data) {
-  validateData(data, ['src']);
-  const {src} = data;
-  validateSrcPrefix(validHosts, src);
-
-  writeScript(global, src);
-}
diff --git a/ads/idealmedia.js b/ads/idealmedia.js
deleted file mode 100644
index e3c02a4057f76..0000000000000
--- a/ads/idealmedia.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function idealmedia(global, data) {
-  validateData(data, ['publisher', 'widget', 'container'], ['url']);
-
-  const scriptRoot = document.createElement('div');
-  scriptRoot.id = data.container;
-
-  document.body.appendChild(scriptRoot);
-
-  /**
-   * Returns path for provided js filename
-   * @param {string} publisher The first number.
-   * @return {string} Path to provided filename.
-   */
-  function getResourceFilePath(publisher) {
-    const publisherStr = publisher.replace(/[^A-z0-9]/g, '');
-    return `${publisherStr[0]}/${publisherStr[1]}`;
-  }
-
-  const url =
-    `https://jsc.idealmedia.io/${getResourceFilePath(data.publisher)}/` +
-    `${encodeURIComponent(data.publisher)}.` +
-    `${encodeURIComponent(data.widget)}.js?t=` +
-    Math.floor(Date.now() / 36e5);
-
-  global.uniqId = (
-    '00000' + Math.round(Math.random() * 100000).toString(16)
-  ).slice(-5);
-
-  global.context.observeIntersection(function (changes) {
-    /** @type {!Array} */ (changes).forEach(function (c) {
-      window['intersectionRect' + data.widget + '_' + global.uniqId] =
-        c.intersectionRect;
-      window['boundingClientRect' + data.widget + '_' + global.uniqId] =
-        c.boundingClientRect;
-    });
-  });
-
-  loadScript(global, data.url || url);
-}
diff --git a/ads/imedia.js b/ads/imedia.js
deleted file mode 100644
index 6c422e9bcc0e3..0000000000000
--- a/ads/imedia.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {computeInMasterFrame, loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function imedia(global, data) {
-  validateData(data, ['id', 'positions']);
-  const positions = JSON.parse(data.positions);
-  const mW = context.isMaster ? global : context.master;
-
-  // create parent element
-  const parentElement = document.createElement('div');
-  parentElement.id = data.id;
-  global.document.getElementById('c').appendChild(parentElement);
-
-  // array of all ad elements and matching contexts through all iframes
-  if (!mW.inPagePositions) {
-    mW.inPagePositions = [];
-  }
-  mW.inPagePositions.push({parentElement, context: global.context});
-
-  computeInMasterFrame(
-    global,
-    'imedia-load',
-    (done) => {
-      loadScript(global, 'https://i.imedia.cz/js/im3.js', () => {
-        if (global.im != null) {
-          mW.im = global.im;
-          mW.im.conf.referer = context.canonicalUrl;
-
-          // send request to get all ads
-          mW.im.getAds(positions, {
-            AMPcallback: (ads) => {
-              mW.ads = ads;
-              done(null);
-            },
-          });
-        }
-      });
-    },
-    () => {
-      mW.inPagePositions = mW.inPagePositions.filter((inPagePostion) => {
-        let used = true;
-        positions.filter((position, index) => {
-          // match right element and zone to write advert from adserver
-          if (inPagePostion.parentElement.id == position.id) {
-            used = false;
-            position.id = inPagePostion.parentElement; // right element "c" to position obj.
-            if (mW.im.writeAd) {
-              mW.im.writeAd(mW.ads[index], position);
-
-              // inform AMP runtime when the ad starts rendering
-              if (mW.ads[index].impress) {
-                inPagePostion.context.renderStart();
-              } else {
-                inPagePostion.context.noContentAvailable();
-              }
-            }
-            return false;
-          }
-        });
-        return used; // remove (filter) element filled with add
-      });
-    }
-  );
-}
diff --git a/ads/imobile.js b/ads/imobile.js
deleted file mode 100644
index 0cd21111dc01a..0000000000000
--- a/ads/imobile.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {writeScript} from '../3p/3p';
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function imobile(global, data) {
-  global.imobileParam = data;
-  writeScript(global, 'https://spamp.i-mobile.co.jp/script/amp.js');
-}
diff --git a/ads/imonomy.js b/ads/imonomy.js
deleted file mode 100644
index 0f1575bd8a7a0..0000000000000
--- a/ads/imonomy.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {doubleclick} from '../ads/google/doubleclick';
-import {hasOwn} from '../src/utils/object';
-import {loadScript, writeScript} from '../3p/3p';
-
-const DEFAULT_TIMEOUT = 500; // ms
-const EVENT_SUCCESS = 0;
-const EVENT_TIMEOUT = 1;
-const EVENT_ERROR = 2;
-const EVENT_BADTAG = 3;
-const imonomyData = ['pid', 'subId', 'timeout'];
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function imonomy(global, data) {
-  if (!('slot' in data)) {
-    global.CasaleArgs = data;
-    writeScript(global, `//tag.imonomy.com/${data.pid}/indexJTag.js`);
-  } else {
-    //DFP ad request call
-    let calledDoubleclick = false;
-    data.timeout = isNaN(data.timeout) ? DEFAULT_TIMEOUT : data.timeout;
-    const timer = setTimeout(() => {
-      callDoubleclick(EVENT_TIMEOUT);
-    }, data.timeout);
-    const callDoubleclick = function (code) {
-      if (calledDoubleclick) {
-        return;
-      }
-      calledDoubleclick = true;
-      clearTimeout(timer);
-      reportStats(data, code);
-      prepareData(data);
-      doubleclick(global, data);
-    };
-
-    if (typeof data.pid === 'undefined' || isNaN(data.pid)) {
-      callDoubleclick(EVENT_BADTAG);
-      return;
-    }
-
-    global.IndexArgs = {
-      ampCallback: callDoubleclick,
-      ampSuccess: EVENT_SUCCESS,
-      ampError: EVENT_ERROR,
-    };
-
-    loadScript(
-      global,
-      `//tag.imonomy.com/amp/${data.pid}/amp.js`,
-      () => {
-        global.context.renderStart();
-      },
-      () => {
-        global.context.noContentAvailable();
-      }
-    );
-  }
-}
-
-/**
- * @param {*} data
- */
-function prepareData(data) {
-  for (const attr in data) {
-    if (hasOwn(data, attr) && imonomyData.indexOf(attr) >= 0) {
-      delete data[attr];
-    }
-  }
-  data.targeting = data.targeting || {};
-  data.targeting['IMONOMY_AMP'] = '1';
-}
-
-/**
- * @param {*} data
- * @param {number} code
- */
-function reportStats(data, code) {
-  try {
-    if (code == EVENT_BADTAG) {
-      return;
-    }
-    const xhttp = new XMLHttpRequest();
-    xhttp.withCredentials = true;
-    let unitFormat = '';
-    let pageLocation = '';
-    if (typeof window.context.location.href !== 'undefined') {
-      pageLocation = encodeURIComponent(window.context.location.href);
-    }
-    const {subId, pid} = data,
-      trackId = 'AMP',
-      notFirst = true,
-      cid = '',
-      abLabel = '',
-      rand = Math.random();
-    if (!isNaN(data.width) && !isNaN(data.height)) {
-      unitFormat = `${data.width}x${data.height}`;
-    }
-    const uid = '',
-      isLocked = false,
-      isTrackable = false,
-      isClient = false,
-      tier = 0;
-    const baseUrl = '//srv.imonomy.com/internal/reporter';
-    let unitCodeUrl = `${baseUrl}?v=2&subid=${subId}&sid=${pid}&`;
-    unitCodeUrl = unitCodeUrl + `format=${unitFormat}&ai=`;
-    unitCodeUrl = unitCodeUrl + `${trackId}&ctxu=${pageLocation}&`;
-    unitCodeUrl = unitCodeUrl + `fb=${notFirst}&`;
-    unitCodeUrl = unitCodeUrl + `cid=${cid} &ab=${abLabel}&cbs=${rand}`;
-    if (uid) {
-      unitCodeUrl = unitCodeUrl + `&uid=${uid}`;
-    }
-    if (isLocked) {
-      unitCodeUrl = unitCodeUrl + `&is_locked=${isLocked}`;
-    }
-    if (isTrackable) {
-      unitCodeUrl = unitCodeUrl + `&istrk=${isTrackable}`;
-    }
-    if (isClient) {
-      unitCodeUrl = unitCodeUrl + `&is_client=${isClient}`;
-      if (tier) {
-        unitCodeUrl = unitCodeUrl + `&tier=${tier}`;
-      }
-    }
-
-    xhttp.open('GET', unitCodeUrl, true);
-    xhttp.setRequestHeader('Content-Type', 'application/json');
-    xhttp.send();
-  } catch (e) {}
-}
diff --git a/ads/improvedigital.js b/ads/improvedigital.js
deleted file mode 100755
index 16419918b010c..0000000000000
--- a/ads/improvedigital.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function improvedigital(global, data) {
-  validateData(data, ['placement'], ['width', 'height', 'optin', 'keyvalue']);
-
-  let url =
-    'https://ad.360yield.com' +
-    '/adj?' +
-    'p=' +
-    encodeURIComponent(data.placement) +
-    '&w=' +
-    encodeURIComponent(data.width) +
-    '&h=' +
-    encodeURIComponent(data.height) +
-    '&optin=' +
-    encodeURIComponent(data.optin) +
-    '&tz=' +
-    new Date().getTimezoneOffset();
-
-  const value = data.keyvalue;
-  let newData = '';
-  const amps = '&';
-  let validKey = 0;
-
-  if (value && value.length > 0) {
-    const keys = value.split('&');
-    for (let i = 0; i < keys.length; i++) {
-      if (!keys[i]) {
-        continue;
-      }
-      const segment = keys[i].split('=');
-      const segment1 = segment[1] ? encodeURIComponent(segment[1]) : '';
-      if (validKey > 0) {
-        newData += amps;
-      }
-      validKey++;
-      newData += segment[0] + '=' + segment1;
-    }
-  }
-  if (newData) {
-    url += '&' + newData;
-  }
-  writeScript(global, url);
-}
diff --git a/ads/inabox/frame-overlay-helper.js b/ads/inabox/frame-overlay-helper.js
index 5b5734f841013..800a7f6eb3e19 100644
--- a/ads/inabox/frame-overlay-helper.js
+++ b/ads/inabox/frame-overlay-helper.js
@@ -17,7 +17,7 @@ import {
   LayoutRectDef,
   layoutRectFromDomRect,
   layoutRectLtwh,
-} from '../../src/layout-rect';
+} from '../../src/core/math/layout-rect';
 import {
   centerFrameUnderVsyncMutate,
   collapseFrameUnderVsyncMutate,
@@ -50,7 +50,7 @@ const expandFrameImpl = function (win, iframe, onFinish) {
         );
       },
       mutate(state) {
-        const {width, height} = state.viewportSize;
+        const {height, width} = state.viewportSize;
         const expandedRect = layoutRectLtwh(0, 0, width, height);
 
         centerFrameUnderVsyncMutate(
diff --git a/ads/inabox/inabox-host.js b/ads/inabox/inabox-host.js
index 4cf19ca032fef..4101425825ea0 100644
--- a/ads/inabox/inabox-host.js
+++ b/ads/inabox/inabox-host.js
@@ -22,7 +22,7 @@
 import {InaboxMessagingHost} from './inabox-messaging-host';
 import {dev, initLogConstructor, setReportError, user} from '../../src/log';
 import {getData} from '../../src/event-helper';
-import {reportError} from '../../src/error';
+import {reportError} from '../../src/error-reporting';
 
 /** @const {string} */
 const TAG = 'inabox-host';
@@ -69,13 +69,15 @@ export class InaboxHost {
       win.AMP[INABOX_UNREGISTER_IFRAME] = host.unregisterIframe.bind(host);
     }
     const queuedMsgs = win[PENDING_MESSAGES];
-    const processMessageFn = /** @type {function(Event)} */ ((evt) => {
-      try {
-        host.processMessage(evt);
-      } catch (err) {
-        dev().error(TAG, 'Error processing inabox message', evt, err);
+    const processMessageFn = /** @type {function(Event)} */ (
+      (evt) => {
+        try {
+          host.processMessage(evt);
+        } catch (err) {
+          dev().error(TAG, 'Error processing inabox message', evt, err);
+        }
       }
-    });
+    );
     if (queuedMsgs) {
       if (Array.isArray(queuedMsgs)) {
         /** @type {!Array} */ (queuedMsgs).forEach((message) => {
diff --git a/ads/inabox/inabox-host.md b/ads/inabox/inabox-host.md
index 24f950c3e6337..616e8d17a7165 100644
--- a/ads/inabox/inabox-host.md
+++ b/ads/inabox/inabox-host.md
@@ -100,7 +100,7 @@ Ideally, both should be implemented for defense-in-depth.
 It is a good idea to consider server side rendering for further
 performance optimization. For example, rewrite all script links with
 version number to get the browser cache benefit. For more details
-about server side rendering, please reach out to the @ampproject/wg-ads.
+about server side rendering, please reach out to the @ampproject/wg-monetization.
 
 ##### Cross-domain iframe
 
diff --git a/ads/inabox/inabox-messaging-host.js b/ads/inabox/inabox-messaging-host.js
index e9d09fbabc724..eb2d778861d55 100644
--- a/ads/inabox/inabox-messaging-host.js
+++ b/ads/inabox/inabox-messaging-host.js
@@ -21,7 +21,7 @@ import {
 } from '../../src/3p-frame-messaging';
 import {canInspectWindow} from '../../src/iframe-helper';
 import {dev, devAssert} from '../../src/log';
-import {dict} from '../../src/utils/object';
+import {dict} from '../../src/core/types/object';
 import {getData} from '../../src/event-helper';
 import {getFrameOverlayManager} from './frame-overlay-manager';
 import {getPositionObserver} from './position-observer';
diff --git a/ads/inabox/position-observer.js b/ads/inabox/position-observer.js
index dcb6aff372d6c..3ce6b23536a2c 100644
--- a/ads/inabox/position-observer.js
+++ b/ads/inabox/position-observer.js
@@ -19,9 +19,9 @@ import {
   layoutRectFromDomRect,
   layoutRectLtwh,
   moveLayoutRect,
-} from '../../src/layout-rect';
-import {Observable} from '../../src/observable';
-import {throttle} from '../../src/utils/rate-limit';
+} from '../../src/core/math/layout-rect';
+import {Observable} from '../../src/core/data-structures/observable';
+import {throttle} from '../../src/core/types/function';
 
 /**
  * @typedef {{
diff --git a/ads/inmobi.js b/ads/inmobi.js
deleted file mode 100644
index 2e21f2a1b5320..0000000000000
--- a/ads/inmobi.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {setStyle} from '../src/style';
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function inmobi(global, data) {
-  validateData(data, ['siteid', 'slotid'], []);
-
-  const inmobiConf = {
-    siteid: data.siteid,
-    slot: data.slotid,
-    manual: true,
-    onError: (code) => {
-      if (code == 'nfr') {
-        global.context.noContentAvailable();
-        setStyle(document.getElementById('my-ad-slot'), 'display', 'none');
-      }
-    },
-    onSuccess: () => {
-      global.context.renderStart();
-    },
-  };
-
-  writeScript(global, 'https://cf.cdn.inmobi.com/ad/inmobi.secure.js', () => {
-    global.document.write("<div id='my-ad-slot'></div>");
-    global._inmobi.getNewAd(document.getElementById('my-ad-slot'), inmobiConf);
-  });
-}
diff --git a/ads/innity.js b/ads/innity.js
deleted file mode 100644
index 26c1b88f95b5d..0000000000000
--- a/ads/innity.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function innity(global, data) {
-  validateData(data, ['pub', 'zone'], ['channel']);
-  writeScript(global, 'https://cdn.innity.net/admanager.js', () => {
-    const innityAMPZone = global.innity_adZone;
-    const innityAMPTag = new innityAMPZone(
-      encodeURIComponent(data.pub),
-      encodeURIComponent(data.zone),
-      {
-        width: data.width,
-        height: data.height,
-        channel: data.channel ? encodeURIComponent(data.channel) : '',
-      }
-    );
-    // AMP handling or noContentAvailable
-    innityAMPTag.amp(global.context);
-    // else renderStart (with at least house ad)
-    global.context.renderStart();
-  });
-}
diff --git a/ads/insticator.js b/ads/insticator.js
deleted file mode 100644
index 44e2aaa2a6215..0000000000000
--- a/ads/insticator.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * 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.
- */
-
-import {validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function insticator(global, data) {
-  // validate passed data attributes
-  validateData(data, ['siteId', 'embedId']);
-
-  // create insticator markup
-  global.document
-    .getElementById('c')
-    .appendChild(createTemplate(data['embedId']));
-
-  // create ads and embed
-  createAdsAndEmbed(data['siteId'], data['embedId']);
-}
-
-/**
- * Create HTML template to be populated later
- * @param {string} embedId The Unique Identifier of this particular Embed
- * @return {Element} HTML template
- */
-function createTemplate(embedId) {
-  const template = document.createElement('template');
-  template./*OK*/ innerHTML = `
-    <div id="insticator-container">
-      <div id="div-insticator-ad-1"></div>
-      <div id="insticator-embed" embed-id="${embedId}"></div>
-      <div id="div-insticator-ad-2"></div>
-    </div>
-  `;
-  return template.content;
-}
-
-/**
- * Generates Ads and Embed
- * @param {string} siteId Used to grab the ads file
- * @param {string} embedId Used to grab the unique embed requested
- */
-function createAdsAndEmbed(siteId, embedId) {
-  // helper vars
-  const a = window;
-  const c = document;
-  const s = 'script';
-  const u = `//d3lcz8vpax4lo2.cloudfront.net/ads-code/${siteId}.js`; // vars from preconnect urls and data attributes on amp-embed tag
-
-  // create insticator object on the window
-  'Insticator' in a ||
-    (a.Insticator = {
-      ad: {
-        loadAd: function (b) {
-          a.Insticator.ad.q.push(b);
-        },
-        q: [],
-      },
-      helper: {},
-      embed: {},
-      version: '4.0',
-      q: [],
-      amp: null, // this will get set to window.context which is the AMP API so we can access from our ads code
-      load: function (t, o) {
-        a.Insticator.amp = window.context; // set the Insticator object property amp to window.context which is the AMP API so we can access from our ads code
-        a.Insticator.q.push({t, o});
-      },
-    });
-
-  // load ads code
-  const b = c.createElement(s);
-  b.src = u;
-  b.async = !0;
-  const d = c.getElementsByTagName(s)[0];
-  d.parentNode.insertBefore(b, d);
-
-  // execute functions of insticator object on the window (load ads and embed)
-  a.Insticator.ad.loadAd('div-insticator-ad-1');
-  a.Insticator.ad.loadAd('div-insticator-ad-2');
-  a.Insticator.load('em', {id: embedId});
-
-  // now tell AMP runtime to start rendering ads
-  window.context.renderStart();
-}
diff --git a/ads/invibes.js b/ads/invibes.js
deleted file mode 100644
index 777d41f121921..0000000000000
--- a/ads/invibes.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function invibes(global, data) {
-  global.invibesAmp = {
-    allowedData: ['adCateg', 'pid', 'customEndpoint'],
-    mandatoryData: [],
-    data,
-  };
-
-  validateData(
-    data,
-    global.invibesAmp.mandatoryData,
-    global.invibesAmp.allowedData
-  );
-
-  let url = data.customEndpoint || 'https://k.r66net.com/GetAmpLink';
-
-  if (data.adCateg) {
-    url = addQueryParam(url, 'adCateg', data.adCateg);
-  }
-
-  if (data.pid) {
-    url = addQueryParam(url, 'pid', data.pid);
-  }
-
-  if (
-    window &&
-    window.context &&
-    window.context.location &&
-    window.context.location.href
-  ) {
-    url = addQueryParam(url, 'referrerUrl', window.context.location.href);
-  }
-
-  loadScript(global, url);
-}
-
-/**
- * @param {string} url
- * @param {string} param
- * @param {string} value
- * @return {string}
- */
-function addQueryParam(url, param, value) {
-  const paramValue =
-    encodeURIComponent(param) + '=' + encodeURIComponent(value);
-  if (url.indexOf('?') > -1) {
-    url += '&' + paramValue;
-  } else {
-    url += '?' + paramValue;
-  }
-  return url;
-}
diff --git a/ads/invibes.md b/ads/invibes.md
deleted file mode 100644
index 8b52a55134bc2..0000000000000
--- a/ads/invibes.md
+++ /dev/null
@@ -1,50 +0,0 @@
-<!---
-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.
--->
-
-# Invibes
-
-## Example
-
-```html
-<amp-ad
-  width="300"
-  height="300"
-  type="invibes"
-  data-pid="placement1"
-  data-ad-categ="infeed"
-  data-custom-endpoint="https://k.r66net.com/GetAmpLink"
->
-</amp-ad>
-```
-
-## Configuration
-
-For configuration semantics, please contact [Invibes](https://www.invibes.com/#section-contact-email)
-
-Supported parameters:
-
-- `data-pid`
-- `data-ad-categ`
-- `data-custom-endpoint`
-
-## User Consent Integration
-
-Invibes ad approaches user consent as follows:
-
-- `CONSENT_POLICY_STATE.UNKNOWN`: Serve a non-personalized ad to the user.
-- `CONSENT_POLICY_STATE.INSUFFICIENT`: Serve a non-personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Serve a non-personalized ad to the user.
-- `CONSENT_POLICY_STATE.SUFFICIENT`: Serve a personalized ad to the user.
diff --git a/ads/iprom.js b/ads/iprom.js
deleted file mode 100644
index 50ec822359a42..0000000000000
--- a/ads/iprom.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {parseJson} from '../src/json';
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function iprom(global, data) {
-  validateData(data, ['zone', 'sitepath'], ['keywords', 'channels']);
-
-  const ampdata = {
-    sitepath: '[]',
-    zone: [],
-    keywords: '',
-    channels: '',
-    ...data,
-  };
-
-  /**
-   * Callback for WriteScript
-   */
-  function namespaceLoaded() {
-    const ipromNS = window.ipromNS || {};
-
-    ipromNS.AdTag = ipromNS.AdTag || {};
-
-    const config = {
-      sitePath: parseJson(ampdata.sitepath),
-      containerId: 'c',
-      zoneId: ampdata.zone,
-      prebid: true,
-      amp: true,
-      keywords: ampdata.keywords ? ampdata.keywords.split(',') : [],
-      channels: ampdata.channels ? ampdata.channels.split(',') : [],
-    };
-
-    const tag = new ipromNS.AdTag(config);
-    tag.init();
-  }
-
-  writeScript(global, 'https://cdn.ipromcloud.com/ipromNS.js', namespaceLoaded);
-}
diff --git a/ads/ix.js b/ads/ix.js
deleted file mode 100644
index 333698576cc0a..0000000000000
--- a/ads/ix.js
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {doubleclick} from '../ads/google/doubleclick';
-import {hasOwn} from '../src/utils/object';
-import {loadScript, writeScript} from '../3p/3p';
-
-const DEFAULT_TIMEOUT = 500; // ms
-const EVENT_SUCCESS = 0;
-const EVENT_TIMEOUT = 1;
-const EVENT_ERROR = 2;
-const EVENT_BADTAG = 3;
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function ix(global, data) {
-  if (!('slot' in data)) {
-    global.CasaleArgs = data;
-    writeScript(global, 'https://js-sec.indexww.com/indexJTag.js');
-  } else {
-    //DFP ad request call
-
-    const start = Date.now();
-    let calledDoubleclick = false;
-    data.ixTimeout = isNaN(data.ixTimeout) ? DEFAULT_TIMEOUT : data.ixTimeout;
-    const timer = setTimeout(() => {
-      callDoubleclick(EVENT_TIMEOUT);
-    }, data.ixTimeout);
-
-    const callDoubleclick = function (code) {
-      if (calledDoubleclick) {
-        return;
-      }
-      calledDoubleclick = true;
-      clearTimeout(timer);
-      reportStats(data.ixId, data.ixSlot, data.slot, start, code);
-      prepareData(data);
-      doubleclick(global, data);
-    };
-
-    if (typeof data.ixId === 'undefined' || isNaN(data.ixId)) {
-      callDoubleclick(EVENT_BADTAG);
-      return;
-    }
-
-    global.IndexArgs = {
-      ampCallback: callDoubleclick,
-      ampSuccess: EVENT_SUCCESS,
-      ampError: EVENT_ERROR,
-    };
-
-    loadScript(
-      global,
-      'https://js-sec.indexww.com/apl/amp.js',
-      undefined,
-      () => {
-        callDoubleclick(EVENT_ERROR);
-      }
-    );
-  }
-}
-
-/**
- * @param {!Object} data
- */
-function prepareData(data) {
-  for (const attr in data) {
-    if (hasOwn(data, attr) && /^ix[A-Z]/.test(attr)) {
-      delete data[attr];
-    }
-  }
-  data.targeting = data.targeting || {};
-  data.targeting['IX_AMP'] = '1';
-}
-
-/**
- * @param {string} siteID
- * @param {string} slotID
- * @param {string} dfpSlot
- * @param {number} start
- * @param {number} code
- */
-function reportStats(siteID, slotID, dfpSlot, start, code) {
-  try {
-    if (code == EVENT_BADTAG) {
-      return;
-    }
-    const xhttp = new XMLHttpRequest();
-    xhttp.withCredentials = true;
-
-    const deltat = Date.now() - start;
-    const ts = (start / 1000) >> 0;
-    const ets = (Date.now() / 1000) >> 0;
-    let url = 'https://as-sec.casalemedia.com/headerstats?s=' + siteID;
-    if (typeof window.context.location.href !== 'undefined') {
-      url += '&u=' + encodeURIComponent(window.context.location.href);
-    }
-    let stats = '{"p":"display","d":"mobile","t":' + ts + ',';
-    stats += '"sl":[{"s": "' + slotID + '",';
-    stats += '"t":' + ets + ',';
-    stats += '"e": [{';
-    if (code == EVENT_SUCCESS) {
-      stats += '"n":"amp-s",';
-    } else if (code == EVENT_TIMEOUT) {
-      stats += '"n":"amp-t",';
-    } else {
-      stats += '"n":"amp-e",';
-    }
-    stats += '"v":"' + deltat + '",';
-    stats += '"b": "INDX","x": "' + dfpSlot.substring(0, 64) + '"}]}]}';
-
-    xhttp.open('POST', url, true);
-    xhttp.setRequestHeader('Content-Type', 'application/json');
-    xhttp.send(stats);
-  } catch (e) {}
-}
diff --git a/ads/ix.md b/ads/ix.md
deleted file mode 100644
index 27e488178a29b..0000000000000
--- a/ads/ix.md
+++ /dev/null
@@ -1,114 +0,0 @@
-<!---
-Copyright 2016 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.
--->
-
-# Index Exchange AMP RTC
-
-Index Exchange (IX) supports [AMP Real Time Config (RTC)](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/rtc-publisher-implementation-guide.md) which allows Publishers to augment their ad requests with targeting information that is retrieved at runtime. This document provides instructions on adding IX as a vendor to AMP pages.
-
-## Configuration
-
-Each [amp-ad](https://amp.dev/documentation/components/amp-ad/) element that uses RTC must have the `rtc-config` attribute set with valid JSON.
-
-**Attributes**
-
-- `<amp-ad>`: Required. IX `<amp-ad>` tags require the `width`, `height`, and `type="doubleclick"` parameters.</br>
-  **Note**: IX leverages AMP through Google Ad Manager (GAM, formerly DoubleClick for Publishers).
-
-- `data-slot`: Required. Data attributes to serve ads.
-
-- `data-multi-size`: Optional. A string of comma separated sizes, which if present, forces the tag to request an ad with all of the given sizes, including the primary size. The `width` and `height` attributes are always included as one of the valid sizes, unless overridden by `data-override-width` and `data-override-height` attributes which change the size of creatives eligible for the slot. For details refer to the [Multi-size Ad documentation](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-network-doubleclick-impl/multi-size.md).
-
-- `data-multi-size-validation`: Optional. If set to false, this allows secondary sizes specified in the `data-multi-size` attribute to be less than 2/3rds of the corresponding primary size. By default, this is assumed to be true.
-
-- `rtc-config`: JSON configuration data which handles the communication with AMP RTC.
-  - `vendors` : Required object. The key is `IndexExchange` and the value is the `SITE_ID`.</br>
-    **Note:** Refer to the materials provided by your account team for your specific SITE_ID details. We recommend one SITE_ID per domain, per unique slot and size. To use more than one SITE_ID, contact your IX Representative.
-  - `timeoutMillis`: Optional integer. Defines the timeout in milliseconds for each individual RTC callout. The configured timeout must be greater than 0 and less than 1000ms. If omitted, the timeout value defaults to 1000ms.
-
-### Example: RTC Specification on an amp-ad
-
-```
-<!-- Note: Default timeout is 1000ms -->
-<amp-ad
-  width="320"
-  height="50"
-  type="doubleclick"
-  data-slot="/1234/pos"
-  rtc-config='{
-                "vendors": {
-                  "IndexExchange": {"SITE_ID": "123456"}
-                },
-                "timeoutMillis": 1000
-              }'
->
-</amp-ad>
-```
-
-The value of `rtc-config` must conform to the following specification:
-
-```
-{
-  "vendors": {
-    "IndexExchange": {"SITE_ID": "123456"}
-  },
-  "timeoutMillis": 1000
-}
-```
-
-### Example: Multi-size request on an amp-ad
-
-```html
-<!-- Note: Default timeout is 1000ms -->
-<amp-ad
-  width="728"
-  height="90"
-  type="doubleclick"
-  data-slot="/1234/pos"
-  data-multi-size="700x90,700x60,500x60"
-  rtc-config='{
-                "vendors": {
-                  "IndexExchange": {"SITE_ID": "123456"}
-                },
-                "timeoutMillis": 1000
-              }'
->
-</amp-ad>
-```
-
-### Example: Multi-size request on an amp-ad ignoring size validation
-
-```html
-<!-- Note: Default timeout is 1000ms -->
-<amp-ad
-  width="728"
-  height="90"
-  type="doubleclick"
-  data-slot="/1234/pos"
-  data-multi-size="300x25"
-  data-multi-size-validation="false"
-  rtc-config='{
-                "vendors": {
-                  "IndexExchange": {"SITE_ID": "123456"}
-                },
-                "timeoutMillis": 1000
-              }'
->
-</amp-ad>
-```
-
-Additional parameters including JSON are passed through in the resulting call to GAM. For details refer to the [Google Ad Manager documentation](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-network-doubleclick-impl/amp-ad-network-doubleclick-impl-internal.md).
-
-To learn about the required Google Ad Manager (GAM) configuration, refer to [Index Exchange Knowledge Base](https://kb.indexexchange.com/Mobile/About_AMP.htm).
diff --git a/ads/jubna.js b/ads/jubna.js
deleted file mode 100644
index 8661f0cb855a0..0000000000000
--- a/ads/jubna.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function jubna(global, data) {
-  validateData(data, ['wid', 'pid']);
-  global._jubna = global._jubna || {
-    widgetID: data['wid'],
-    pubID: data['pid'],
-    referrer: global.context.referrer,
-  };
-  loadScript(global, 'https://cdn.jubna.com/adscripts/jb_amp_loader.js');
-}
diff --git a/ads/kargo.js b/ads/kargo.js
deleted file mode 100644
index a060211cf51c2..0000000000000
--- a/ads/kargo.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {computeInMasterFrame, loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function kargo(global, data) {
-  /*eslint "google-camelcase/google-camelcase": 0*/
-
-  validateData(data, ['site', 'slot'], ['options']);
-
-  // Kargo AdTag url
-  const kargoScriptUrl =
-    'https://storage.cloud.kargo.com/ad/network/tag/v3/' + data.site + '.js';
-
-  // parse extra ad call options (optional)
-  let options = {};
-  if (data.options != null) {
-    try {
-      options = JSON.parse(data.options);
-    } catch (e) {}
-  }
-
-  // Add window source reference to ad options
-  options.source_window = global;
-
-  computeInMasterFrame(
-    global,
-    'kargo-load',
-    function (done) {
-      // load AdTag in Master window
-      loadScript(this, kargoScriptUrl, () => {
-        let success = false;
-        if (this.Kargo != null && this.Kargo.loaded) {
-          success = true;
-        }
-
-        done(success);
-      });
-    },
-    (success) => {
-      if (success) {
-        const w = options.source_window;
-
-        // Add reference to Kargo api to this window if it's not the Master window
-        if (!w.context.isMaster) {
-          w.Kargo = w.context.master.Kargo;
-        }
-
-        w.Kargo.getAd(data.slot, options);
-      } else {
-        throw new Error('Kargo AdTag failed to load');
-      }
-    }
-  );
-}
diff --git a/ads/kiosked.js b/ads/kiosked.js
deleted file mode 100644
index b32d1e22a6725..0000000000000
--- a/ads/kiosked.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {hasOwn} from '../src/utils/object';
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function kiosked(global, data) {
-  let scriptId;
-  validateData(data, ['scriptid'], []);
-  if (hasOwn(data, 'scriptid')) {
-    scriptId = data['scriptid'];
-  }
-  window.addEventListener(
-    'kioskedAdRender',
-    function () {
-      global.context.renderStart();
-    },
-    false
-  );
-
-  window.addEventListener(
-    'kioskedAdNoFill',
-    function () {
-      global.context.noContentAvailable();
-    },
-    false
-  );
-
-  writeScript(
-    global,
-    'https://scripts.kiosked.com/loader/kiosked-ad.js?staticTagId=' + scriptId
-  );
-}
diff --git a/ads/kixer.js b/ads/kixer.js
deleted file mode 100644
index 5307e0ec5d711..0000000000000
--- a/ads/kixer.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-import {parseUrlDeprecated} from '../src/url';
-
-/* global
-__kxamp: false,
-__kx_ad_slots: false,
-__kx_ad_start: false,
-__kx_viewability: false,
-*/
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function kixer(global, data) {
-  /*eslint "google-camelcase/google-camelcase": 0*/
-
-  validateData(data, ['adslot'], []);
-
-  let inView = false;
-  let viewed = false;
-  let viewTimer = null;
-
-  const d = global.document.createElement('div');
-  d.id = '__kx_ad_' + data.adslot;
-  global.document.getElementById('c').appendChild(d);
-
-  const kxload = function () {
-    d.removeEventListener('load', kxload, false);
-    if (d.childNodes.length > 0) {
-      global.context.renderStart();
-    } else {
-      global.context.noContentAvailable();
-    }
-  };
-  d.addEventListener('load', kxload, false); // Listen for the kixer load event
-
-  const kxviewCheck = function (intersectionEntry) {
-    inView = intersectionEntry.intersectionRatio > 0.5; // Half of the unit is in the viewport
-    if (inView) {
-      if (!viewed && viewTimer == null) {
-        // If the ad hasn't been viewed and the timer is not set
-        viewTimer = setTimeout(kxviewFire, 900); // Set a Timeout to check the ad in 900ms and fire the view
-      }
-    } else {
-      if (viewTimer) {
-        // If the Timeout is set
-        clearTimeout(viewTimer); // Clear the Timeout
-        viewTimer = null;
-      }
-    }
-  };
-
-  const kxviewFire = function () {
-    if (inView) {
-      // if the ad is still in the viewport
-      if (typeof __kx_viewability.process_locked === 'function') {
-        viewed = true;
-        __kx_viewability.process_locked(data.adslot); // Fire kixer view
-      }
-    }
-  };
-
-  global.context.observeIntersection(function (changes) {
-    /** @type {!Array} */ (changes).forEach(function (c) {
-      kxviewCheck(c);
-    });
-  });
-
-  loadScript(global, 'https://cdn.kixer.com/ad/load.js', () => {
-    global.__kx_domain = parseUrlDeprecated(global.context.sourceUrl).hostname; // Get domain
-    __kxamp[data.adslot] = 1;
-    __kx_ad_slots.push(data.adslot);
-    __kx_ad_start();
-  });
-}
diff --git a/ads/kuadio.js b/ads/kuadio.js
deleted file mode 100644
index 94f13ea47142c..0000000000000
--- a/ads/kuadio.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function kuadio(global, data) {
-  validateData(
-    data,
-    ['widgetId'],
-    ['region', 'baseUrl', 'betaMode', 'debugMode', 'fastParse', 'ref']
-  );
-
-  global._pvmax = {
-    region: data.region,
-    baseUrl: data.baseUrl,
-    betaMode: data.betaMode === 'true',
-    debugMode: data.debugMode === 'true',
-    fastParse: data.fastParse !== 'false',
-  };
-
-  const e = global.document.createElement('div');
-  e.className = '_pvmax_recommend';
-  e.setAttribute('data-widget-id', data.widgetId);
-  e.setAttribute('data-ref', data.ref || global.context.canonicalUrl);
-  global.document.getElementById('c').appendChild(e);
-
-  loadScript(global, 'https://api.pvmax.net/v1.0/pvmax.js');
-}
diff --git a/ads/lentainform.js b/ads/lentainform.js
deleted file mode 100644
index 25c9034277818..0000000000000
--- a/ads/lentainform.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function lentainform(global, data) {
-  validateData(data, ['publisher', 'widget', 'container'], ['url']);
-
-  const scriptRoot = document.createElement('div');
-  scriptRoot.id = data.container;
-
-  document.body.appendChild(scriptRoot);
-
-  const publisherStr = data.publisher.replace(/[^A-z0-9]/g, '');
-
-  const url =
-    `https://jsc.lentainform.com/${encodeURIComponent(publisherStr[0])}/` +
-    `${encodeURIComponent(publisherStr[1])}/` +
-    `${encodeURIComponent(data.publisher)}.` +
-    `${encodeURIComponent(data.widget)}.js?t=` +
-    Math.floor(Date.now() / 36e5);
-
-  global.uniqId = (
-    '00000' + Math.round(Math.random() * 100000).toString(16)
-  ).slice(-5);
-
-  global.context.observeIntersection(function (changes) {
-    /** @type {!Array} */ (changes).forEach(function (c) {
-      window['intersectionRect' + data.widget + '_' + global.uniqId] =
-        c.intersectionRect;
-      window['boundingClientRect' + data.widget + '_' + global.uniqId] =
-        c.boundingClientRect;
-    });
-  });
-
-  loadScript(global, data.url || url);
-}
diff --git a/ads/ligatus.js b/ads/ligatus.js
deleted file mode 100644
index 7a01e2dd5ab2b..0000000000000
--- a/ads/ligatus.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateSrcPrefix, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function ligatus(global, data) {
-  const {src} = data;
-  validateSrcPrefix('https://a-ssl.ligatus.com/', src);
-  writeScript(global, src);
-}
diff --git a/ads/lockerdome.js b/ads/lockerdome.js
deleted file mode 100644
index e15c76077991f..0000000000000
--- a/ads/lockerdome.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function lockerdome(global, data) {
-  validateData(data, ['slot']);
-  global.SLOT = data.slot;
-  loadScript(global, 'https://cdn2.lockerdomecdn.com/_js/amp.js');
-}
diff --git a/ads/logly.js b/ads/logly.js
deleted file mode 100644
index 09024653c8b64..0000000000000
--- a/ads/logly.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function logly(global, data) {
-  validateData(data, ['adspotid']);
-
-  const d = global.document.createElement('div');
-  d.id = 'logly-lift-' + data['adspotid'];
-  global.document.getElementById('c').appendChild(d);
-
-  const url =
-    'https://l.logly.co.jp/lift_widget.js' +
-    `?adspot_id=${encodeURIComponent(data['adspotid'])}`;
-
-  loadScript(global, url);
-}
diff --git a/ads/loka.js b/ads/loka.js
deleted file mode 100644
index 57eedba1babaf..0000000000000
--- a/ads/loka.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function loka(global, data) {
-  validateData(data, ['unitParams'], []);
-
-  global.lokaParams = data;
-
-  const container = global.document.querySelector('#c');
-  container.addEventListener('lokaUnitLoaded', (e) => {
-    if (e.detail.isReady) {
-      global.context.renderStart();
-    } else {
-      global.context.noContentAvailable();
-    }
-  });
-
-  loadScript(global, 'https://loka-cdn.akamaized.net/scene/amp.js');
-}
diff --git a/ads/mads.js b/ads/mads.js
deleted file mode 100644
index d4ecb0e004b4b..0000000000000
--- a/ads/mads.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function mads(global, data) {
-  validateData(data, ['adrequest'], []);
-
-  writeScript(global, 'https://eu2.madsone.com/js/tags.js', function () {
-    window.MADSAdrequest.adrequest(JSON.parse(data.adrequest));
-  });
-}
diff --git a/ads/marfeel.js b/ads/marfeel.js
deleted file mode 100644
index 59f4d2dab2d35..0000000000000
--- a/ads/marfeel.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function marfeel(global, data) {
-  validateData(data, ['tenant']);
-
-  const {tenant, version} = data;
-  const versionQS = version ? `?v=${version}` : '';
-
-  loadScript(global, `https://live.mrf.io/amp-ad/${tenant}/index${versionQS}`);
-}
diff --git a/ads/marfeel.md b/ads/marfeel.md
deleted file mode 100644
index 0ca98f789aea2..0000000000000
--- a/ads/marfeel.md
+++ /dev/null
@@ -1,46 +0,0 @@
-<!---
-Copyright 2020 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.
--->
-
-# Marfeel
-
-## Example
-
-```html
-<amp-ad width="300" height="250" type="marfeel" data-tenant="demo.marfeel.com">
-</amp-ad>
-```
-
-## Configuration
-
-For additional details and support, please contact [Marfeel](https://marfeel.com).
-
-### Required parameters
-
-- `data-tenant`
-
-### Optional parameters
-
-- `data-multisize`
-- `data-version`
-
-## Consent Support
-
-When [user consent](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md#blocking-behaviors) is required, Marfeel ad approaches user consent in the following ways:
-
-- `CONSENT_POLICY_STATE.SUFFICIENT`: Marfeel amp-ad will display a personalized ad to the user.
-- `CONSENT_POLICY_STATE.INSUFFICIENT`: Marfeel amp-ad will display a non-personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Marfeel amp-ad will display a personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN`: Marfeel amp-ad will display a non-personalized ad to the user.
diff --git a/ads/mediaad.js b/ads/mediaad.js
deleted file mode 100644
index 77a9154a8891c..0000000000000
--- a/ads/mediaad.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function mediaad(global, data) {
-  // ensure we have vlid publisher, placement and mode
-  // and exactly one page-type
-  validateData(data, ['medtag', 'publisher']);
-
-  const d = document.getElementById('c');
-  const meddiv = document.createElement('div');
-  meddiv.setAttribute('id', data['medtag']);
-  d.appendChild(meddiv);
-
-  global._mediaad = global._mediaad || [];
-
-  // install observation on entering/leaving the view
-  global.context.observeIntersection(function (changes) {
-    /** @type {!Array} */ (changes).forEach(function (c) {
-      if (c.intersectionRect.height) {
-        global._mediaad.push({
-          medtag: data['medtag'],
-          publisher: data.publisher,
-        });
-      }
-    });
-  });
-
-  loadScript(
-    global,
-    `https://s1.mediaad.org/serve/${encodeURIComponent(
-      data.publisher
-    )}/loader.js`
-  );
-}
diff --git a/ads/medianet.js b/ads/medianet.js
deleted file mode 100644
index c4e4815908a8f..0000000000000
--- a/ads/medianet.js
+++ /dev/null
@@ -1,231 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {computeInMasterFrame, validateData, writeScript} from '../3p/3p';
-import {getSourceUrl, parseUrlDeprecated} from '../src/url';
-import {hasOwn} from '../src/utils/object';
-
-const mandatoryParams = ['tagtype', 'cid'],
-  optionalParams = [
-    'timeout',
-    'crid',
-    'misc',
-    'slot',
-    'targeting',
-    'categoryExclusions',
-    'tagForChildDirectedTreatment',
-    'cookieOptions',
-    'overrideWidth',
-    'overrideHeight',
-    'loadingStrategy',
-    'consentNotificationId',
-    'useSameDomainRenderingUntilDeprecated',
-    'experimentId',
-    'multiSize',
-    'multiSizeValidation',
-  ];
-// useSameDomainRenderingUntilDeprecated is included to ensure publisher
-// amp-tags don't break before 29th March
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function medianet(global, data) {
-  validateData(data, mandatoryParams, optionalParams);
-
-  const publisherUrl =
-      global.context.canonicalUrl || getSourceUrl(global.context.location.href),
-    referrerUrl = global.context.referrer;
-
-  if (data.tagtype === 'headerbidder') {
-    //parameter tagtype is used to identify the product the publisher is using. Going ahead we plan to support more product types.
-    loadHBTag(global, data, publisherUrl, referrerUrl);
-  } else if (data.tagtype === 'cm' && data.crid) {
-    loadCMTag(global, data, publisherUrl, referrerUrl);
-  } else {
-    global.context.noContentAvailable();
-  }
-}
-
-/**
- * @return {{renderStartCb: (function(*=)), reportRenderedEntityIdentifierCb: (function(*=)), noContentAvailableCb: (function())}}
- */
-function getCallbacksObject() {
-  return {
-    renderStartCb: (opt_data) => {
-      global.context.renderStart(opt_data);
-    },
-    reportRenderedEntityIdentifierCb: (ampId) => {
-      global.context.reportRenderedEntityIdentifier(ampId);
-    },
-    noContentAvailableCb: () => {
-      global.context.noContentAvailable();
-    },
-  };
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- * @param {string} publisherUrl
- * @param {?string} referrerUrl
- */
-function loadCMTag(global, data, publisherUrl, referrerUrl) {
-  /**
-   * Sets macro type.
-   * @param {string} type
-   */
-  function setMacro(type) {
-    if (!type) {
-      return;
-    }
-    const name = 'medianet_' + type;
-    if (hasOwn(data, type)) {
-      global[name] = data[type];
-    }
-  }
-
-  /**
-   * Sets additional data.
-   */
-  function setAdditionalData() {
-    data.requrl = publisherUrl || '';
-    data.refurl = referrerUrl || '';
-    data.versionId = '211213';
-
-    setMacro('width');
-    setMacro('height');
-    setMacro('crid');
-    setMacro('requrl');
-    setMacro('refurl');
-    setMacro('versionId');
-    setMacro('misc');
-  }
-
-  /**
-   * Sets callback.
-   */
-  function setCallbacks() {
-    global._mNAmp = getCallbacksObject();
-  }
-
-  /**
-   * Loads the script.
-   */
-  function loadScript() {
-    let url = 'https://contextual.media.net/ampnmedianet.js?';
-    url += 'cid=' + encodeURIComponent(data.cid);
-    url += '&https=1';
-    url += '&requrl=' + encodeURIComponent(data.requrl);
-    url += '&refurl=' + encodeURIComponent(data.refurl);
-    writeScript(global, url);
-  }
-
-  /**
-   * Initializer.
-   */
-  function init() {
-    setAdditionalData();
-    setCallbacks();
-    loadScript();
-  }
-
-  init();
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- * @param {string} publisherUrl
- * @param {?string} referrerUrl
- */
-function loadHBTag(global, data, publisherUrl, referrerUrl) {
-  /**
-   * Loads MNETAd.
-   */
-  function loadMNETAd() {
-    if (loadMNETAd.alreadyCalled) {
-      return;
-    }
-    loadMNETAd.alreadyCalled = true;
-
-    global.advBidxc = global.context.master.advBidxc;
-    if (global.advBidxc && typeof global.advBidxc.renderAmpAd === 'function') {
-      global.addEventListener('message', (event) => {
-        global.advBidxc.renderAmpAd(event, global);
-      });
-    }
-
-    data.targeting = data.targeting || {};
-
-    if (
-      global.advBidxc &&
-      typeof global.advBidxc.setAmpTargeting === 'function'
-    ) {
-      global.advBidxc.setAmpTargeting(global, data);
-    }
-    global.advBidxc.loadAmpAd(global, data);
-  }
-
-  /**
-   * Handler for mnet.
-   */
-  function mnetHBHandle() {
-    global.advBidxc = global.context.master.advBidxc;
-    if (
-      global.advBidxc &&
-      typeof global.advBidxc.registerAmpSlot === 'function'
-    ) {
-      global.advBidxc.registerAmpSlot({
-        cb: loadMNETAd,
-        data,
-        winObj: global,
-      });
-    }
-  }
-
-  computeInMasterFrame(
-    global,
-    'medianet-hb-load',
-    (done) => {
-      /*eslint "google-camelcase/google-camelcase": 0*/
-      global.advBidxc_requrl = publisherUrl;
-      global.advBidxc_refurl = referrerUrl;
-      global.advBidxc = {
-        registerAmpSlot: () => {},
-        setAmpTargeting: () => {},
-        renderAmpAd: () => {},
-        loadAmpAd: () => {
-          global.context.noContentAvailable();
-        },
-      };
-      global.advBidxc.amp = getCallbacksObject();
-      const publisherDomain = parseUrlDeprecated(publisherUrl).hostname;
-      writeScript(
-        global,
-        'https://contextual.media.net/bidexchange.js?https=1&amp=1&cid=' +
-          encodeURIComponent(data.cid) +
-          '&dn=' +
-          encodeURIComponent(publisherDomain),
-        () => {
-          done(null);
-        }
-      );
-    },
-    mnetHBHandle
-  );
-}
diff --git a/ads/medianet.md b/ads/medianet.md
deleted file mode 100644
index 455807cd64188..0000000000000
--- a/ads/medianet.md
+++ /dev/null
@@ -1,102 +0,0 @@
-<!---
-Copyright 2016 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.
--->
-
-# Media.net
-
-Media.net adapter supports the integration of both, its Contextual Monetization solution and the Header Bidding solution.
-The example listed below states the configuration and the implementation related details.
-
-## Example
-
-### Media.net Contextual Monetization
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="medianet"
-  data-tagtype="cm"
-  data-cid="8CUS8O7EX"
-  data-crid="112682482"
->
-</amp-ad>
-```
-
-### Media.net Header Bidder
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="medianet"
-  data-tagtype="headerbidder"
-  data-cid="8CU852274"
-  data-slot="/45361917/AMP_Header_Bidder"
-  json='{"targeting":{"mnetAmpTest":"1","pos":"mnetSlot1"}}'
->
-</amp-ad>
-```
-
-## Configuration
-
-### Dimensions
-
-The ad size depends on the `width` and `height` attributes specified in the `amp-ad` tag. The `amp-ad` component requires the following mandatory HTML attributes to be added before parsing the Ad.
-
-- `width`
-- `height`
-- `type = "medianet"`
-
-If you have questions, please feel free to reach out to your Media.net contact.
-
-## Supported Parameters
-
-### Media.net Contextual Monetization
-
-**Mandatory Parameters**
-
-- `data-tagtype` - This parameter represents the product the publisher is using; It should be **`cm`** for our **Contextual Monetization solution**
-- `data-cid` - Represents the unique customer identifier
-- `data-crid` - Media.net Ad unit
-
-**Optional Parameters**
-
-- `data-misc` - Accepts a json value & used to send additional data
-
-### Media.net Header Bidder
-
-**Mandatory Parameters**
-
-- `data-tagtype` - This parameter represents the product the publisher is using; It should be **`headerbidder`** for our **Header Bidding solution**
-- `data-cid` - Represents the unique customer identifier
-- `data-slot` - Ad unit as specified in DFP
-- `data-multi-size` - Multi-size support
-- `data-multi-size-validation` - Multi-size support
-
-**Some of the parameters supported via Json attribute (DFP Parameters)**
-
-- `targeting`
-- `categoryExclusions`
-- `cookieOptions`
-- `tagForChildDirectedTreatment`
-- `targeting`
-
-## Support
-
-For further queries, please feel free to reach out to your contact at Media.net.
-
-Otherwise you can write to our support team:
-Email: **pubsupport@media.net**
diff --git a/ads/mediavine.js b/ads/mediavine.js
deleted file mode 100644
index 4ff39cf9bc679..0000000000000
--- a/ads/mediavine.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function mediavine(global, data) {
-  validateData(data, ['site']);
-  global.$mediavine = {
-    slug: data.site,
-  };
-  loadScript(global, 'https://amp.mediavine.com/wrapper.min.js');
-}
diff --git a/ads/mediavine.md b/ads/mediavine.md
deleted file mode 100644
index 742c1d1561593..0000000000000
--- a/ads/mediavine.md
+++ /dev/null
@@ -1,41 +0,0 @@
-<!---
-Copyright 2016 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.
--->
-
-# Mediavine
-
-## Example
-
-```html
-<amp-ad width="300" height="250" type="mediavine" data-site="amp-project">
-</amp-ad>
-```
-
-## Configuration
-
-For details on the configuration semantics, please contact [Mediavine](http://www.mediavine.com). Each site must be approved and signed up with [Mediavine](http://www.mediavine.com) prior to launch. The site name will be the same as name in the Mediavine script wrapper. The site name `amp-project` can be used for testing and will serve placeholder ads.
-
-### Required parameters
-
-- `data-site` - The site's unique name this ad will be served on. This is the same name from your Mediavine script wrapper.
-
-## User Consent Integration
-
-When [user consent](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md#blocking-behaviors) is required. Mediavine approaches user consent in the following ways:
-
-- `CONSENT_POLICY_STATE.SUFFICIENT`: Personalized Ads.
-- `CONSENT_POLICY_STATE.INSUFFICIENT`: Non-Personalized Ads.
-- `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Personalized Ads.
-- `CONSENT_POLICY_STATE.UNKNOWN`: Non-Personalized Ads.
diff --git a/ads/medyanet.js b/ads/medyanet.js
deleted file mode 100644
index ca485ad1ebdd8..0000000000000
--- a/ads/medyanet.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {setStyles} from '../src/style';
-import {validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function medyanet(global, data) {
-  validateData(data, ['slot', 'domain']);
-
-  global.adunit = data.slot;
-  global.size = '[' + data.width + ',' + data.height + ']';
-  global.domain = data.domain;
-
-  medyanetAds(global, data);
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-function medyanetAds(global, data) {
-  const f = global.document.createElement('iframe');
-  f.setAttribute('id', 'adframe');
-  f.setAttribute('width', data.width);
-  f.setAttribute('height', data.height);
-  f.setAttribute('frameborder', '0');
-  f.setAttribute('marginheight', '0');
-  f.setAttribute('marginwidth', '0');
-  f.setAttribute('allowfullscreen', 'true');
-  f.setAttribute('scrolling', 'no');
-  setStyles(f, {
-    border: '0 none transparent',
-    position: 'relative',
-  });
-  f.onload = function () {
-    window.context.renderStart();
-  };
-  f.src = `https://app.medyanetads.com/amp/medyanetads.html?bidderData=${global.domain}&adunit=${global.adunit}&size=${global.size}`;
-  const url = window.top.location.search.substring(1);
-  if (url && url.indexOf('hb=true') !== -1) {
-    f.src = f.src + '&hb=true';
-  }
-  global.document.body.appendChild(f);
-}
diff --git a/ads/meg.js b/ads/meg.js
deleted file mode 100644
index 1355673c6f3c1..0000000000000
--- a/ads/meg.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function meg(global, data) {
-  validateData(data, ['code']);
-  const {code} = data;
-  const lang = global.encodeURIComponent(global.navigator.language);
-  const ref = global.encodeURIComponent(global.context.referrer);
-  const params = ['lang=' + lang, 'ref=' + ref].join('&');
-  const url = 'https://apps.meg.com/embedjs/' + code + '?' + params;
-  global._megAdsLoaderCallbacks = {
-    onSuccess: () => {
-      global.context.renderStart();
-    },
-    onError: () => {
-      global.context.noContentAvailable();
-    },
-  };
-  loadScript(
-    global,
-    url,
-    () => {
-      // Meg has been loaded
-    },
-    () => {
-      // Cannot load meg embed.js
-      global.context.noContentAvailable();
-    }
-  );
-}
diff --git a/ads/mgid.js b/ads/mgid.js
deleted file mode 100644
index 3086741a42890..0000000000000
--- a/ads/mgid.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function mgid(global, data) {
-  validateData(data, ['publisher', 'widget', 'container'], ['url']);
-
-  const scriptRoot = document.createElement('div');
-  scriptRoot.id = data.container;
-
-  document.body.appendChild(scriptRoot);
-
-  /**
-   * Returns path for provided js filename
-   * @param {string} publisher js filename
-   * @return {string} Path to provided filename.
-   */
-  function getResourceFilePath(publisher) {
-    const publisherStr = publisher.replace(/[^A-z0-9]/g, '');
-    return `${publisherStr[0]}/${publisherStr[1]}`;
-  }
-
-  const url =
-    `https://jsc.mgid.com/${getResourceFilePath(data.publisher)}/` +
-    `${encodeURIComponent(data.publisher)}.` +
-    `${encodeURIComponent(data.widget)}.js?t=` +
-    Math.floor(Date.now() / 36e5);
-
-  global.uniqId = (
-    '00000' + Math.round(Math.random() * 100000).toString(16)
-  ).slice(-5);
-
-  global.context.observeIntersection(function (changes) {
-    /** @type {!Array} */ (changes).forEach(function (c) {
-      window['intersectionRect' + data.widget + '_' + global.uniqId] =
-        c.intersectionRect;
-      window['boundingClientRect' + data.widget + '_' + global.uniqId] =
-        c.boundingClientRect;
-    });
-  });
-
-  loadScript(global, data.url || url);
-}
diff --git a/ads/microad.js b/ads/microad.js
deleted file mode 100644
index 616e86bc6536e..0000000000000
--- a/ads/microad.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/* global MicroAd: false */
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function microad(global, data) {
-  // TODO: check mandatory fields
-  validateData(data, [], ['spot', 'url', 'referrer', 'ifa', 'appid', 'geo']);
-
-  global.document.getElementById('c').setAttribute('id', data.spot);
-  loadScript(global, 'https://j.microad.net/js/camp.js', () => {
-    MicroAd.Compass.showAd(data);
-  });
-}
diff --git a/ads/miximedia.js b/ads/miximedia.js
deleted file mode 100644
index 96cd9ea2755f2..0000000000000
--- a/ads/miximedia.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function miximedia(global, data) {
-  validateData(data, ['blockid']);
-  global._miximedia = global._miximedia || {
-    viewId: global.context.pageViewId,
-    blockId: data['blockid'],
-    htmlURL: data['canonical'] || global.context.canonicalUrl,
-    ampURL: data['ampurl'] || global.context.sourceUrl,
-    testMode: data['testmode'] || 'false',
-    referrer: data['referrer'] || global.context.referrer,
-    hostname: global.window.context.location.hostname,
-    clientId: window.context.clientId,
-    domFingerprint: window.context.domFingerprint,
-    location: window.context.location,
-    startTime: window.context.startTime,
-  };
-  global._miximedia.AMPCallbacks = {
-    renderStart: global.context.renderStart,
-    noContentAvailable: global.context.noContentAvailable,
-  };
-  // load the miximedia  AMP JS file script asynchronously
-  const rand = Math.round(Math.random() * 100000000);
-  loadScript(
-    global,
-    'https://amp.mixi.media/ampclient/mixi.js?rand=' + rand,
-    () => {},
-    global.context.noContentAvailable
-  );
-}
diff --git a/ads/mixpo.js b/ads/mixpo.js
deleted file mode 100644
index a8367dc513fe5..0000000000000
--- a/ads/mixpo.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function mixpo(global, data) {
-  validateData(data, ['guid', 'subdomain']);
-
-  const g = global,
-    cdnSubdomain = data.subdomain == 'www' ? 'cdn' : data.subdomain + '-cdn',
-    url = data.loader || `https://${cdnSubdomain}.mixpo.com/js/loader.js`;
-
-  g.mixpoAd = {
-    amp: true,
-    noflash: true,
-    width: data.width,
-    height: data.height,
-    guid: data.guid,
-    subdomain: data.subdomain,
-    embedv: data.embedv,
-    clicktag: data.clicktag,
-    customTarget: data.customtarget,
-    dynClickthrough: data.dynclickthrough,
-    viewTracking: data.viewtracking,
-    customCSS: data.customcss,
-    local: data.local,
-    enableMRAID: data.enablemraid,
-    jsPlayer: data.jsplayer,
-  };
-
-  writeScript(g, url);
-}
diff --git a/ads/monetizer101.js b/ads/monetizer101.js
deleted file mode 100644
index fd9417ece96af..0000000000000
--- a/ads/monetizer101.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function monetizer101(global, data) {
-  validateData(data, ['widget', 'config']);
-  global.widget = data.widget;
-  global.config = data.config;
-  writeScript(global, 'https://link.monetizer101.com/widget/amp/amp.js');
-}
diff --git a/ads/mox.js b/ads/mox.js
deleted file mode 100644
index e10fc401e955a..0000000000000
--- a/ads/mox.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} config
- */
-export function mox(global, config) {
-  validateData(config, ['z', 'w', 'h'], ['u']);
-
-  global.config = config;
-
-  loadScript(global, config.u || 'https://ad.mox.tv/js/amp.min.js');
-}
diff --git a/ads/my6sense.js b/ads/my6sense.js
deleted file mode 100644
index c691b09004c54..0000000000000
--- a/ads/my6sense.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function my6sense(global, data) {
-  validateData(data, ['widgetKey']);
-
-  const widgetTag = global.document.createElement('script');
-  widgetTag.src = `//web-clients.mynativeplatform.com/web-clients/bootloaders/${data['widgetKey']}/bootloader.js`;
-  const url =
-    data['url'] && data['url'] !== '[PAGE_URL]'
-      ? data['url']
-      : global.context.sourceUrl;
-  widgetTag.setAttribute('async', 'true');
-  widgetTag.setAttribute('data-version', '3');
-  widgetTag.setAttribute('data-url', url);
-  widgetTag.setAttribute('data-zone', data['zone'] || '[ZONE]');
-  widgetTag.setAttribute('data-google-amp', 'true');
-  widgetTag.setAttribute(
-    'data-organic-clicks',
-    data['organicClicks'] || '[ORGANIC_TRACKING_PIXEL]'
-  );
-  widgetTag.setAttribute(
-    'data-paid-clicks',
-    data['paidClicks'] || '[PAID_TRACKING_PIXEL]'
-  );
-  widgetTag.setAttribute('data-display-within-iframe', 'true');
-  global.document.body.appendChild(widgetTag);
-}
diff --git a/ads/mytarget.js b/ads/mytarget.js
deleted file mode 100644
index 1d7c0b1744a28..0000000000000
--- a/ads/mytarget.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-import {setStyles} from '../src/style';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function mytarget(global, data) {
-  validateData(data, ['adSlot'], ['adQuery']);
-
-  // Create ad tag placeholder
-  const container = global.document.createElement('ins');
-
-  container.setAttribute('class', 'mrg-tag');
-  container.setAttribute('data-ad-slot', data['adSlot']);
-  if (data['adQuery']) {
-    container.setAttribute('data-ad-query', data['adQuery']);
-  }
-  setStyles(container, {
-    display: 'inline-block',
-    width: '100%',
-    height: '100%',
-  });
-  global.document.getElementById('c').appendChild(container);
-
-  // Add tag and callbacks to queue
-  (global.MRGtag = global.MRGtag || []).push({
-    onNoAds: () => global.context.noContentAvailable(),
-    onAdsSuccess: () => global.context.renderStart(),
-  });
-
-  // Load main js asynchronously
-  loadScript(global, 'https://ad.mail.ru/static/ads-async.js');
-}
diff --git a/ads/mywidget.js b/ads/mywidget.js
deleted file mode 100644
index 89d35d3492faa..0000000000000
--- a/ads/mywidget.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function mywidget(global, data) {
-  validateData(data, ['cid']);
-  global.myWidgetInit = data;
-
-  // load the myWidget initializer asynchronously
-  loadScript(global, 'https://likemore-go.imgsmail.ru/widget_amp.js');
-}
diff --git a/ads/nativeroll.js b/ads/nativeroll.js
deleted file mode 100644
index 88fbdcda4f57f..0000000000000
--- a/ads/nativeroll.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function nativeroll(global, data) {
-  validateData(data, ['gid']);
-  loadScript(
-    global,
-    'https://cdn01.nativeroll.tv/js/seedr-player.min.js',
-    () => {
-      initPlayer(global, data);
-    }
-  );
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-function initPlayer(global, data) {
-  const config = {
-    container: '#c',
-    desiredOffset: 50,
-    gid: data.gid,
-    onError: () => {
-      global.context.noContentAvailable();
-    },
-    onLoad: () => {
-      const height = global.document.getElementsByClassName('nr-player')[0]
-        ./* OK */ offsetHeight;
-      global.context.requestResize(undefined, height);
-    },
-    onDestroy: () => {
-      global.context.noContentAvailable();
-    },
-  };
-  // eslint-disable-next-line no-undef
-  SeedrPlayer(config);
-}
diff --git a/ads/nativery.js b/ads/nativery.js
deleted file mode 100644
index cafcc23f69c4d..0000000000000
--- a/ads/nativery.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {toArray} from '../src/types';
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function nativery(global, data) {
-  validateData(data, ['wid']);
-  const params = {...data};
-
-  // push the two object into the '_nativery' global
-  global._nativery = global._nativery || {
-    wid: data.wid,
-    referrer: data.referrer || global.context.referrer,
-    url: data.url || global.context.canonicalUrl,
-    viewId: global.context.pageViewId,
-    visible: 0,
-    params,
-  };
-
-  // must add listener for resize
-  global.addEventListener('amp-widgetCreated', function (e) {
-    if (e && e.detail) {
-      global.context.requestResize(undefined, e.detail.height);
-    }
-  });
-
-  // install observation to check if is in viewport
-  const unlisten = global.context.observeIntersection(function (changes) {
-    toArray(changes).forEach(function (c) {
-      global._nativery.visible = Math.floor(
-        (c.intersectionRect.height / c.boundingClientRect.height) * 100
-      );
-      if (global._nativery.visible) {
-        unlisten();
-      }
-    });
-  });
-
-  // load the nativery loader asynchronously
-  writeScript(global, `https://cdn.nativery.com/widget/js/natamp.js`);
-}
diff --git a/ads/nativo.js b/ads/nativo.js
deleted file mode 100644
index badb0e07785be..0000000000000
--- a/ads/nativo.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-import {loadScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function nativo(global, data) {
-  let ntvAd;
-  (function (ntvAd, global, data) {
-    global.history.replaceState(
-      null,
-      '',
-      location.pathname + location.hash.replace(/({).*(})/, '')
-    );
-    // Private
-    let delayedAdLoad = false;
-    let percentageOfadViewed;
-    const loc = global.context.location;
-    /**
-     * @param {number} delay
-     * @return {boolean}
-     */
-    function isValidDelayTime(delay) {
-      return (
-        typeof delay != 'undefined' && !isNaN(delay) && parseInt(delay, 10) >= 0
-      );
-    }
-    /**
-     * @param {!Object} data
-     * @return {boolean}
-     */
-    function isDelayedTimeStart(data) {
-      return (
-        isValidDelayTime(data.delayByTime) &&
-        'delay' in data &&
-        !('delayByView' in data)
-      );
-    }
-    /**
-     * @param {!Object} data
-     * @return {boolean}
-     */
-    function isDelayedViewStart(data) {
-      return isValidDelayTime(data.delayByTime) && 'delayByView' in data;
-    }
-    /**
-     * Loads ad when done.
-     */
-    function loadAdWhenViewed() {
-      const g = global;
-      global.context.observeIntersection(function (positions) {
-        const coordinates = getLastPositionCoordinates(positions);
-        if (
-          typeof coordinates.rootBounds != 'undefined' &&
-          coordinates.intersectionRect.top ==
-            coordinates.rootBounds.top + coordinates.boundingClientRect.y
-        ) {
-          if (isDelayedViewStart(data) && !delayedAdLoad) {
-            g.PostRelease.Start();
-            delayedAdLoad = true;
-          }
-        }
-      });
-    }
-    /**
-     * Loads ad when timeouts.
-     */
-    function loadAdWhenTimedout() {
-      const g = global;
-      setTimeout(function () {
-        g.PostRelease.Start();
-        delayedAdLoad = true;
-      }, parseInt(data.delayByTime, 10));
-    }
-    /**
-     * @param {*} positions
-     * @return {*} TODO(#23582): Specify return type
-     */
-    function getLastPositionCoordinates(positions) {
-      return positions[positions.length - 1];
-    }
-    /**
-     * @param {number} percentage
-     */
-    function setPercentageOfadViewed(percentage) {
-      percentageOfadViewed = percentage;
-    }
-    /**
-     * Used to track ad during scrolling event and trigger checkIsAdVisible
-     * method on PostRelease instance
-     * @param {*} positions
-     */
-    function viewabilityConfiguration(positions) {
-      const coordinates = getLastPositionCoordinates(positions);
-      setPercentageOfadViewed(
-        (coordinates.intersectionRect.height * 100) /
-          coordinates.boundingClientRect.height /
-          100
-      );
-      global.PostRelease.checkIsAdVisible();
-    }
-    // Public
-    ntvAd.getPercentageOfadViewed = function () {
-      return percentageOfadViewed;
-    };
-    ntvAd.getScriptURL = function () {
-      return 'https://s.ntv.io/serve/load.js';
-    };
-    // Configuration setup is based on the parameters/attributes associated with
-    // the amp-ad node
-    ntvAd.setupAd = function () {
-      global._prx = [['cfg.Amp']];
-      global._prx.push(['cfg.RequestUrl', data['requestUrl'] || loc.href]);
-      for (const key in data) {
-        switch (key) {
-          case 'premium':
-            global._prx.push(['cfg.SetUserPremium']);
-            break;
-          case 'debug':
-            global._prx.push(['cfg.Debug']);
-            break;
-          case 'delay':
-            if (isValidDelayTime(data.delayByTime)) {
-              global._prx.push(['cfg.SetNoAutoStart']);
-            }
-            break;
-        }
-      }
-    };
-    // Used to Delay Start and Initalize Tracking. This is a callback AMP will
-    // use once script is loaded
-    ntvAd.Start = function () {
-      if (isDelayedTimeStart(data)) {
-        loadAdWhenTimedout();
-      } else if (isDelayedViewStart(data)) {
-        loadAdWhenViewed();
-      }
-      global.PostRelease.checkAmpViewability = function () {
-        return ntvAd.getPercentageOfadViewed();
-      };
-      // ADD TRACKING HANDLER TO OBSERVER
-      global.context.observeIntersection(viewabilityConfiguration);
-    };
-  })(ntvAd || (ntvAd = {}), global, data);
-  // Setup Configurations
-  ntvAd.setupAd();
-  // Load Nativo Script
-  loadScript(global, ntvAd.getScriptURL(), ntvAd.Start);
-}
diff --git a/ads/navegg.js b/ads/navegg.js
deleted file mode 100644
index b9c84a94b05fd..0000000000000
--- a/ads/navegg.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {doubleclick} from '../ads/google/doubleclick';
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function navegg(global, data) {
-  validateData(data, ['acc']);
-  const {acc} = data;
-  let seg,
-    nvg = function () {};
-  delete data.acc;
-  nvg.prototype.getProfile = function () {};
-  data.targeting = data.targeting || {};
-  loadScript(global, 'https://tag.navdmp.com/amp.1.0.0.min.js', () => {
-    nvg = global[`nvg${acc}`] = new global['AMPNavegg']({
-      acc,
-    });
-    nvg.getProfile((nvgTargeting) => {
-      for (seg in nvgTargeting) {
-        data.targeting[seg] = nvgTargeting[seg];
-      }
-      doubleclick(global, data);
-    });
-  });
-}
diff --git a/ads/nend.js b/ads/nend.js
deleted file mode 100644
index 740d40ed6ebb6..0000000000000
--- a/ads/nend.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-const nendFields = ['nend_params'];
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function nend(global, data) {
-  validateData(data, nendFields, []);
-
-  global.nendParam = data;
-  writeScript(global, 'https://js1.nend.net/js/amp.js');
-}
diff --git a/ads/netletix.js b/ads/netletix.js
deleted file mode 100644
index c8e6e72d756ac..0000000000000
--- a/ads/netletix.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {addParamsToUrl, assertHttpsUrl} from '../src/url.js';
-import {dev} from '../src/log.js';
-import {dict} from '../src/utils/object';
-import {loadScript, validateData, writeScript} from '../3p/3p';
-import {startsWith} from '../src/string.js';
-
-const NX_URL_HOST = 'https://call.adadapter.netzathleten-media.de';
-const NX_URL_PATHPREFIX = '/pb/';
-const NX_URL_FULL = NX_URL_HOST + NX_URL_PATHPREFIX;
-const DEFAULT_NX_KEY = 'default';
-const DEFAULT_NX_UNIT = 'default';
-const DEFAULT_NX_WIDTH = 'fluid';
-const DEFAULT_NX_HEIGHT = 'fluid';
-const DEFAULT_NX_V = '0002';
-const DEFAULT_NX_SITE = 'none';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function netletix(global, data) {
-  /*eslint "google-camelcase/google-camelcase": 0*/
-  global._netletix_amp = {
-    allowed_data: ['nxasync', 'nxv', 'nxsite', 'nxid', 'nxscript'],
-    mandatory_data: ['nxkey', 'nxunit', 'nxwidth', 'nxheight'],
-    data,
-  };
-
-  validateData(
-    data,
-    global._netletix_amp.mandatory_data,
-    global._netletix_amp.allowed_data
-  );
-
-  const nxh = data.nxheight || DEFAULT_NX_HEIGHT;
-  const nxw = data.nxwidth || DEFAULT_NX_WIDTH;
-  const url = assertHttpsUrl(
-    addParamsToUrl(
-      NX_URL_FULL + encodeURIComponent(data.nxkey || DEFAULT_NX_KEY),
-      dict({
-        'unit': data.nxunit || DEFAULT_NX_UNIT,
-        'width': data.nxwidth || DEFAULT_NX_WIDTH,
-        'height': data.nxheight || DEFAULT_NX_HEIGHT,
-        'v': data.nxv || DEFAULT_NX_V,
-        'site': data.nxsite || DEFAULT_NX_SITE,
-        'ord': Math.round(Math.random() * 100000000),
-      })
-    ),
-    data.ampSlotIndex
-  );
-
-  window.addEventListener('message', (event) => {
-    if (
-      event.data.type &&
-      startsWith(dev().assertString(event.data.type), 'nx-')
-    ) {
-      switch (event.data.type) {
-        case 'nx-resize':
-          const renderconfig = {
-            'width': event.data.width,
-            'height': event.data.height,
-          };
-          global.context.renderStart(renderconfig);
-          if (
-            event.data.width &&
-            event.data.height &&
-            (event.data.width != nxw || event.data.height != nxh)
-          ) {
-            global.context.requestResize(event.data.width, event.data.height);
-          }
-          break;
-        case 'nx-empty':
-          global.context.noContentAvailable();
-          break;
-        case 'nx-identifier':
-          global.context.reportRenderedEntityIdentifier(event.data.identifier);
-          break;
-        default:
-          break;
-      }
-    }
-  });
-
-  if (data.async && data.async.toLowerCase() === 'true') {
-    loadScript(global, url);
-  } else {
-    writeScript(global, url);
-  }
-}
diff --git a/ads/noddus.js b/ads/noddus.js
deleted file mode 100644
index e2e6f62280bd5..0000000000000
--- a/ads/noddus.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function noddus(global, data) {
-  validateData(data, ['token']);
-
-  global.noddus = data;
-
-  writeScript(global, 'https://noddus.com/amp_loader.js');
-}
diff --git a/ads/nokta.js b/ads/nokta.js
deleted file mode 100644
index 8f8ee985de4c5..0000000000000
--- a/ads/nokta.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function nokta(global, data) {
-  validateData(data, ['category', 'site', 'zone']);
-  global.category = data.category;
-  global.site = data.site;
-  global.zone = data.zone;
-  global.iwidth = data.width;
-  global.iheight = data.height;
-  writeScript(
-    global,
-    'https://static.virgul.com/theme/mockups/noktaamp/ampjs.js'
-  );
-}
diff --git a/ads/nws.js b/ads/nws.js
deleted file mode 100644
index c7ed163fdf3cf..0000000000000
--- a/ads/nws.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateSrcPrefix, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function nws(global, data) {
-  const {src} = data;
-  validateSrcPrefix(
-    [
-      'https://tags.nws.ai/',
-      'https://echo.nws.press/',
-      'https://stories.nws.ai/',
-    ],
-    src
-  );
-  writeScript(global, src);
-}
-
-// Keep the following for backwards compatibility
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function chargeads(global, data) {
-  const {src} = data;
-  validateSrcPrefix(
-    ['https://www.chargeplatform.com/', 'https://tags.chargeplatform.com/'],
-    src
-  );
-  writeScript(global, src);
-}
diff --git a/ads/onead.js b/ads/onead.js
deleted file mode 100644
index 3eabd1e44f514..0000000000000
--- a/ads/onead.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function onead(global, data) {
-  validateData(data, [], ['playmode', 'uid', 'pid', 'host']);
-  global.Guoshi = {
-    queryAd: {
-      amp: {},
-    },
-  };
-  global.ONEAD_AMP = {
-    playmode: data.playmode,
-    uid: data.uid,
-    pid: data.pid,
-    host: data.host,
-  };
-  createOneadSlot(global);
-  createAdUnit(global);
-}
-/**
- * @param {!Window} win
- */
-function createOneadSlot(win) {
-  const slot = document.createElement('div');
-  slot.id = 'onead-amp';
-  win.document.getElementById('c').appendChild(slot);
-}
-/**
- * @param {!Window} win
- */
-function createAdUnit(win) {
-  win.ONEAD_AMP.isAMP = true;
-  const src = 'https://ad-specs.guoshipartners.com/static/js/onead-amp.min.js';
-  const jsLoadCb = () => {
-    win.Guoshi.queryAd.amp.setup({
-      playMode: win.ONEAD_AMP.playMode,
-      uid: win.ONEAD_AMP.uid,
-      pid: win.ONEAD_AMP.pid,
-      host: win.ONEAD_AMP.host,
-    });
-  };
-
-  loadScript(win, src, jsLoadCb);
-}
diff --git a/ads/onnetwork.js b/ads/onnetwork.js
deleted file mode 100644
index 24f8b00448c52..0000000000000
--- a/ads/onnetwork.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {validateData, validateSrcPrefix, writeScript} from '../3p/3p';
-
-// Valid OnNetwork movie and ad source hosts
-const hosts = {
-  video: 'https://video.onnetwork.tv',
-  cdn: 'https://cdn.onnetwork.tv',
-  cdnx: 'https://cdnx.onnetwork.tv',
-  vast: 'https://vast.onnetwork.tv',
-};
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function onnetwork(global, data) {
-  validateData(data, [['src', 'sid', 'mid']]);
-  global.onnetwork = {ampData: data};
-  const {src, sid, mid} = data;
-  let url;
-
-  // Custom movie url using "data-src" attribute
-  if (src) {
-    validateSrcPrefix(
-      Object.keys(hosts).map((type) => hosts[type]),
-      src
-    );
-    url = src;
-  }
-  // Movie tag using "data-sid" attribute
-  else if (sid) {
-    url = hosts.video + '/embed.php?ampsrc=1&sid=' + encodeURIComponent(sid);
-    // Movie placement using "data-mid" attribute
-  } else if (mid) {
-    url = hosts.video + '/embed.php?ampsrc=1&mid=' + encodeURIComponent(mid);
-  }
-
-  writeScript(global, url);
-}
diff --git a/ads/openadstream.js b/ads/openadstream.js
deleted file mode 100644
index cbd6bb0a2737e..0000000000000
--- a/ads/openadstream.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function openadstream(global, data) {
-  validateData(data, ['adhost', 'sitepage', 'pos'], ['query']);
-
-  let url =
-    'https://' +
-    encodeURIComponent(data.adhost) +
-    '/3/' +
-    data.sitepage +
-    '/1' +
-    String(Math.random()).substring(2, 11) +
-    '@' +
-    data.pos;
-
-  if (data.query) {
-    url = url + '?' + data.query;
-  }
-  writeScript(global, url);
-}
diff --git a/ads/openx.js b/ads/openx.js
deleted file mode 100644
index 60cd0744b9d25..0000000000000
--- a/ads/openx.js
+++ /dev/null
@@ -1,185 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {doubleclick} from '../ads/google/doubleclick';
-import {loadScript, validateData, writeScript} from '../3p/3p';
-import {startsWith} from '../src/string';
-
-const {hasOwnProperty} = Object.prototype;
-
-/**
- * Sort of like Object.assign.
- * @param {!Object} target
- * @param {!Object} source
- * @return {!Object}
- */
-function assign(target, source) {
-  for (const prop in source) {
-    if (hasOwnProperty.call(source, prop)) {
-      target[prop] = source[prop];
-    }
-  }
-
-  return target;
-}
-
-/* global OX: false */
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function openx(global, data) {
-  const openxData = ['host', 'nc', 'auid', 'dfpSlot', 'dfp', 'openx'];
-  const dfpData = assign({}, data); // Make a copy for dfp.
-
-  // TODO: check mandatory fields
-  validateData(data, [], openxData);
-  // Consolidate Doubleclick inputs for forwarding -
-  // conversion rules are explained in openx.md.
-  if (data.dfpSlot) {
-    // Anything starting with 'dfp' gets promoted.
-    openxData.forEach((openxKey) => {
-      if (openxKey in dfpData && openxKey !== 'dfp') {
-        if (startsWith(openxKey, 'dfp')) {
-          // Remove 'dfp' prefix, lowercase the first letter.
-          let fixKey = openxKey.substring(3);
-          fixKey = fixKey.substring(0, 1).toLowerCase() + fixKey.substring(1);
-          dfpData[fixKey] = data[openxKey];
-        }
-        delete dfpData[openxKey];
-      }
-    });
-
-    // Promote the whole 'dfp' object.
-    if ('dfp' in data) {
-      assign(dfpData, dfpData.dfp);
-      delete dfpData['dfp'];
-    }
-  }
-
-  // Decide how to render.
-  if (data.host) {
-    let jssdk = `https://${data.host}/mw/1.0/jstag`;
-
-    if (data.nc && data.dfpSlot) {
-      jssdk += '?nc=' + encodeURIComponent(data.nc);
-      if (data.auid) {
-        advanceImplementation(global, jssdk, dfpData, data);
-      } else {
-        standardImplementation(global, jssdk, dfpData);
-      }
-    } else if (data.auid) {
-      // Just show an ad.
-      global.OX_cmds = [
-        () => {
-          const oxRequest = OX();
-          const oxAnchor = global.document.createElement('div');
-          global.document.body.appendChild(oxAnchor);
-          /*eslint "google-camelcase/google-camelcase": 0*/
-          OX._requestArgs['bc'] = 'amp';
-          oxRequest.addAdUnit(data.auid);
-          oxRequest.setAdSizes([data.width + 'x' + data.height]);
-          if (data.openx && data.openx.customVars) {
-            setCustomVars(oxRequest, filterCustomVar(data.openx.customVars));
-          }
-          oxRequest.getOrCreateAdUnit(data.auid).set('anchor', oxAnchor);
-          global.context.renderStart();
-          oxRequest.load();
-        },
-      ];
-      loadScript(global, jssdk);
-    }
-  } else if (data.dfpSlot) {
-    // Fall back to a DFP ad.
-    doubleclick(global, dfpData);
-  }
-}
-
-/**
- * @param {!Window} global
- * @param {string} jssdk
- * @param {!Object} dfpData
- */
-function standardImplementation(global, jssdk, dfpData) {
-  writeScript(global, jssdk, () => {
-    /*eslint "google-camelcase/google-camelcase": 0*/
-    doubleclick(global, dfpData);
-  });
-}
-
-/**
- * @param {!Window} global
- * @param {string} jssdk
- * @param {!Object} dfpData
- * @param {*} data
- */
-function advanceImplementation(global, jssdk, dfpData, data) {
-  const size = [data.width + 'x' + data.height];
-  let customVars = {};
-  if (data.openx && data.openx.customVars) {
-    customVars = filterCustomVar(data.openx.customVars);
-  }
-  global.OX_bidder_options = {
-    bidderType: 'hb_amp',
-    callback: () => {
-      const priceMap = global.oxhbjs && global.oxhbjs.getPriceMap();
-      const slot = priceMap && priceMap['c'];
-      const targeting = slot
-        ? `${slot.size}_${slot.price},hb-bid-${slot.bid_id}`
-        : 'none_t';
-      dfpData.targeting = dfpData.targeting || {};
-      assign(dfpData.targeting, {oxb: targeting});
-      doubleclick(global, dfpData);
-    },
-  };
-  global.OX_bidder_ads = [[data.dfpSlot, size, 'c', customVars]];
-  loadScript(global, jssdk);
-}
-
-/**
- * @param {*} oxRequest
- * @param {!Object} customVars
- */
-function setCustomVars(oxRequest, customVars) {
-  const customVarKeys = Object.keys(customVars);
-  customVarKeys.forEach((customVarKey) => {
-    const customVarValue = customVars[customVarKey];
-    if (Array.isArray(customVarValue)) {
-      /** @type {!Array} */ (customVarValue).forEach((value) => {
-        oxRequest.addVariable(customVarKey, value);
-      });
-    } else {
-      oxRequest.addVariable(customVarKey, customVarValue);
-    }
-  });
-}
-
-/**
- * @param {!Object} customVars
- * @return {!Object}
- */
-function filterCustomVar(customVars) {
-  const filterPattern = /^[A-Za-z0-9._]{1,20}$/;
-  const filteredKeys = Object.keys(customVars).filter((key) =>
-    filterPattern.test(key)
-  );
-  const filteredCustomVar = {};
-  filteredKeys.forEach((key) => {
-    filteredCustomVar[key.toLowerCase()] = customVars[key];
-  });
-  return filteredCustomVar;
-}
diff --git a/ads/openx.md b/ads/openx.md
deleted file mode 100644
index 1662051b99ec3..0000000000000
--- a/ads/openx.md
+++ /dev/null
@@ -1,107 +0,0 @@
-<!---
-Copyright 2016 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.
--->
-
-# OpenX
-
-## Examples
-
-- All OpenX `<amp-ad>` tags require the `width`, `height`, and `type="openx"` parameters.
-- Secure tags (HTTPS) are required for AMP.
-
-### OpenX Ad Server
-
-Display an OpenX Ad Unit.
-
-**Required**:
-
-- `data-auid` - The ad unit ID to display
-- `data-host` - SSL-enabled OpenX delivery domain
-
-**Optional**:
-
-- `json` - Additional json options.
-
-  - `customVars` - please refer to the [documentation](https://docs.openx.com/Content/developers/ad_request_api/custom_variables_in_ad_calls.html).
-
-```html
-<amp-ad
-  width="728"
-  height="90"
-  type="openx"
-  data-host="domain.openx.net"
-  data-auid="12345"
-  json='{"dfp":{"targeting":{"sport":["rugby","cricket"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":1},"openx":{"customVars":{"marco":"polo","fates":["clothos","lachesis","atropos"]}}}'
->
-</amp-ad>
-```
-
-### OpenX Bidder
-
-OpenX header bidding. Parameters noted in the DoubleClick amp-ad [documentation](https://github.com/ampproject/amphtml/blob/master/ads/google/doubleclick.md) can be forwarded to DoubleClick by the following rules:
-
-1. Parameters like `data-dfp-{name}` will be converted to `data-{name}` and passed to DoubleClick
-2. Everything under the json "dfp" key will be passed to DoubleClick
-
-**Required**:
-
-- `data-host` - SSL-enabled OpenX delivery domain
-- `data-nc` - Network code '-' sitename
-- `data-auid` - Open X Ad unit id to display
-- `data-dfp-slot` - The DoubleClick slot
-
-**Optional**:
-
-- `json` - Additional json options.
-
-  - `customVars` - please refer to the [documentation](https://docs.openx.com/Content/developers/ad_request_api/custom_variables_in_ad_calls.html). Also note that OpenX bidder limits these keys by the **white listed keys** set on your publisher settings.
-
-```html
-<amp-ad
-  width="728"
-  height="90"
-  type="openx"
-  data-host="domain.openx.net"
-  data-auid="12345"
-  data-nc="56789-MySite"
-  data-dfp-slot="/12345/dfp_zone"
-  json='{"dfp":{"targeting":{"sport":["rugby","cricket"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":1},"openx":{"customVars":{"marco":"polo","fates":["clothos","lachesis","atropos"]}}}'
->
-</amp-ad>
-```
-
-### DoubleClick Fallback
-
-If no OpenX parameters are detected, the tag falls back to a proxy for the DoubleClick ad type. The same rules for
-parameter conversion apply here as for bidder.
-
-**Required**:
-
-- `data-dfp-slot` - The DoubleClick slot
-
-**Optional**:
-
-- `json` - Additional json options. Only the "dfp" is currently respected.
-
-```html
-<amp-ad
-  width="728"
-  height="90"
-  type="openx"
-  data-dfp-slot="12345/dfp_zone"
-  json='{"dfp":{"targeting":{"sport":["rugby","cricket"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":1}}'
->
-</amp-ad>
-```
diff --git a/ads/opinary.js b/ads/opinary.js
deleted file mode 100644
index ec157b9132365..0000000000000
--- a/ads/opinary.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function opinary(global, data) {
-  validateData(data, ['client']);
-
-  // create div for automatic poll placement
-  const div = global.document.createElement('div');
-  div.setAttribute('id', 'opinary-automation-placeholder');
-
-  // create div for internal event system AMP awknowledgement
-  const div2 = global.document.createElement('div');
-  div2.setAttribute('id', 'opinaryAMP');
-
-  // append divs to page
-  global.document.getElementById('c').appendChild(div).appendChild(div2);
-
-  if (!document.querySelector("link[rel='canonical']")) {
-    const link = document.createElement('link');
-    link.rel = 'canonical';
-    link.href = global.context.canonicalUrl;
-    global.document.head.appendChild(link);
-  }
-
-  const url = `https://widgets.opinary.com/a/${data.client}.js`;
-
-  loadScript(global, url);
-}
diff --git a/ads/opinary.md b/ads/opinary.md
deleted file mode 100644
index 93197ece039c2..0000000000000
--- a/ads/opinary.md
+++ /dev/null
@@ -1,38 +0,0 @@
-<!---
-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.
--->
-
-# Opinary
-
-## Example
-
-```html
-<amp-embed
-  width="500"
-  height="500"
-  type="opinary"
-  layout="intrinsic"
-  data-client="test-success"
->
-</amp-embed>
-```
-
-## Configuration
-
-For details on the configuration semantics, please contact the ad network or refer to their documentation.
-
-### Required parameters
-
-- `data-client` - the publishers name in the Opinary AMS system
diff --git a/ads/outbrain.js b/ads/outbrain.js
deleted file mode 100644
index 6251836949d9d..0000000000000
--- a/ads/outbrain.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function outbrain(global, data) {
-  // ensure we have valid widgetIds value
-  validateData(data, ['widgetids']);
-
-  global._outbrain = global._outbrain || {
-    viewId: global.context.pageViewId,
-    widgetIds: data['widgetids'],
-    htmlURL: data['htmlurl'] || global.context.canonicalUrl,
-    ampURL: data['ampurl'] || global.context.sourceUrl,
-    fbk: data['fbk'] || '',
-    testMode: data['testmode'] || 'false',
-    styleFile: data['stylefile'] || '',
-    referrer: data['referrer'] || global.context.referrer,
-  };
-
-  // load the Outbrain AMP JS file
-  loadScript(
-    global,
-    'https://widgets.outbrain.com/widgetAMP/outbrainAMP.min.js'
-  );
-}
diff --git a/ads/outbrain.md b/ads/outbrain.md
deleted file mode 100644
index c4e701965dcab..0000000000000
--- a/ads/outbrain.md
+++ /dev/null
@@ -1,91 +0,0 @@
-<!---
-Copyright 2015 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.
--->
-
-# Outbrain
-
-## Example installation of the Outbrain widget
-
-The examples below must be accompanied by AMP-enabled widgets delivered by Outbrain’s Account Management Team, do not directly install this code with existing widgets.
-
-### Basic
-
-```html
-<amp-embed
-  width="100"
-  height="100"
-  type="outbrain"
-  layout="responsive"
-  data-widgetIds="AMP_1,AMP_2"
->
-</amp-embed>
-```
-
-### Sticky Ad
-
-```html
-<amp-sticky-ad layout="nodisplay">
-  <amp-ad width="300" height="100" type="outbrain" data-widgetids="AMP_1">
-  </amp-ad>
-</amp-sticky-ad>
-```
-
-Note that `<amp-sticky-ad />` component requires the following script to be included in the page:
-
-```html
-<script
-  async
-  custom-element="amp-sticky-ad"
-  src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"
-></script>
-```
-
-See [AMP documentation](https://amp.dev/documentation/components/amp-sticky-ad) for more information regarding `<amp-sticky-ad />` component.
-
-## Configuration
-
-For details on the configuration semantics, please contact Outbrain’s Account Management Team.\
-These configurations are relevant for both `<amp-ad />` and `<amp-embed />`.
-
-### Required parameters
-
-- `data-widgetIds`: Widget Id/s Provided by Account Manager.
-
-### Optional parameters
-
-- `data-htmlURL`: The URL of the standard html version of the page.
-- `data-ampURL`: The URL of the AMP version of the page.
-- `data-styleFile`: Provide publisher an option to pass CSS file in order to inherit the design for the AMP displayed widget. **Consult with Account Manager regarding CSS options**.
-
-### User Consent
-
-The widget will check for user consent to decide whether personalized or non-personalized recommendations should be displayed.
-
-The following rules will be applied:
-
-- CONSENT_POLICY_STATE.SUFFICIENT - Show personalized recommendations
-- CONSENT_POLICY_STATE.INSUFFICIENT - Show non-personalized recommendations only
-- CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED - Show personalized recommendations
-- CONSENT_POLICY_STATE.UNKNOWN - Show non-personalized recommendations only
-
-## Troubleshooting
-
-### Widget is cut off
-
-According to the AMP API, "resizes are honored when the resize will not adjust the content the user is currently reading. That is, if the ad is above the viewport's contents, it'll resize. Same if it's below. If it's in the viewport, it ignores it."
-
-**Resolution**
-
-You can set an initial height of what the widget height is supposed to be. That is, instead of `height="100"`, if the widget's final height is 600px, then set `height="600"`. Setting the initial height **_will not_** finalize the widget height if it's different from the actual. The widget will resize to it's true dimensions after the widget leaves the viewport.
diff --git a/ads/pixels.js b/ads/pixels.js
deleted file mode 100644
index afe513a47f481..0000000000000
--- a/ads/pixels.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function pixels(global, data) {
-  validateData(data, ['origin', 'sid', 'tag'], ['clickTracker', 'viewability']);
-  data.tag = data.tag.toString().toLowerCase();
-  global._pixelsParam = data;
-  if (data.tag === 'sync') {
-    writeScript(
-      global,
-      'https://cdn.adsfactor.net/amp/pixels-amp.min.js',
-      () => {
-        const pixelsAMPAd = global.pixelsAd;
-        const pixelsAMPTag = new pixelsAMPAd(data);
-        pixelsAMPTag.renderAmp(global.context);
-        global.context.renderStart();
-      }
-    );
-  } else {
-    global.context.noContentAvailable();
-  }
-}
diff --git a/ads/pixels.md b/ads/pixels.md
deleted file mode 100644
index 0f0194c213a15..0000000000000
--- a/ads/pixels.md
+++ /dev/null
@@ -1,48 +0,0 @@
-<!---
-Copyright 2018 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.
--->
-
-# Pixels
-
-## Example
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="pixels"
-  data-origin="af"
-  data-sid="2847717911664"
-  data-tag="sync"
-  data-click-tracker="false"
-  data-viewability="true"
->
-</amp-ad>
-```
-
-## Configuration
-
-For additional details and support contact techteam@pixels.asia
-
-Required parameters:
-
-- data-origin - Specify which ad server group to handle the ad request.
-- data-sid - Unique ad tag identifier.
-- data-tag - Specify whether this tag is a sync tag.
-
-Optional parameters:
-
-- data-click-tracker - Specify whether there is a third party click-tracker.
-- data-viewability - Specify whether the tag should record viewability statistics.
diff --git a/ads/plista.js b/ads/plista.js
deleted file mode 100644
index b7a8390fa53a5..0000000000000
--- a/ads/plista.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function plista(global, data) {
-  // TODO: check mandatory fields
-  validateData(
-    data,
-    [],
-    [
-      'publickey',
-      'widgetname',
-      'urlprefix',
-      'item',
-      'geo',
-      'categories',
-      'countrycode',
-    ]
-  );
-  const div = global.document.createElement('div');
-  div.setAttribute('data-display', 'plista_widget_' + data.widgetname);
-  // container with id "c" is provided by amphtml
-  global.document.getElementById('c').appendChild(div);
-  window.PLISTA = {
-    publickey: data.publickey,
-    widgets: [
-      {
-        name: data.widgetname,
-        pre: data.urlprefix,
-      },
-    ],
-    item: data.item,
-    geo: data.geo,
-    categories: data.categories,
-    noCache: true,
-    useDocumentReady: false,
-    dataMode: 'data-display',
-  };
-
-  // load the plista modules asynchronously
-  loadScript(
-    global,
-    'https://static' +
-      (data.countrycode ? '-' + encodeURIComponent(data.countrycode) : '') +
-      '.plista.com/async.js'
-  );
-}
diff --git a/ads/polymorphicads.js b/ads/polymorphicads.js
deleted file mode 100644
index a4021f3c3c5f4..0000000000000
--- a/ads/polymorphicads.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function polymorphicads(global, data) {
-  validateData(data, ['adunit', 'params']);
-  global.polyParam = data;
-  writeScript(global, 'https://www.polymorphicads.jp/js/amp.js');
-}
diff --git a/ads/popin.js b/ads/popin.js
deleted file mode 100644
index b16f4fc5bf979..0000000000000
--- a/ads/popin.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function popin(global, data) {
-  validateData(data, ['mediaid']);
-
-  const d = global.document.createElement('div');
-  d.id = '_popIn_amp_recommend';
-  global.document.getElementById('c').appendChild(d);
-
-  const url =
-    'https://api.popin.cc/searchbox/' +
-    encodeURIComponent(data['mediaid']) +
-    '.js';
-
-  loadScript(global, url);
-}
diff --git a/ads/postquare.js b/ads/postquare.js
deleted file mode 100644
index c4e50182fbf7a..0000000000000
--- a/ads/postquare.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function postquare(global, data) {
-  validateData(data, ['widgetids']);
-
-  global._postquare = global._postquare || {
-    viewId: global.context.pageViewId,
-    widgetIds: data['widgetids'],
-    websiteId: data['websiteid'],
-    publisherId: data['publisherid'],
-    url: data['url'] || global.context.canonicalUrl,
-    ampURL: data['ampurl'] || global.context.sourceUrl,
-    mode: data['mode'] || 1,
-    style: data['stylecss'] || '',
-    referrer: global.context.referrer,
-  };
-
-  if (data['mode'] == 100) {
-    loadScript(global, 'https://widget.engageya.com/pos_amp_loader.js');
-  } else {
-    loadScript(global, 'https://widget.postquare.com/postquare_amp_loader.js');
-  }
-}
diff --git a/ads/ppstudio.js b/ads/ppstudio.js
deleted file mode 100644
index b385000e9bd4a..0000000000000
--- a/ads/ppstudio.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function ppstudio(global, data) {
-  validateData(data, ['crid', 'width', 'height', 'holderScript'], []);
-
-  global._ppstudio = {
-    crid: data.crid,
-    width: data.width,
-    height: data.height,
-    holderScript: data.holderScript,
-  };
-
-  const e = global.document.createElement('script');
-  e.id = 'pps-script-' + data.crid;
-  e.setAttribute('data-width', data.width);
-  e.setAttribute('data-height', data.height);
-  e.setAttribute('data-click-url', '');
-  e.src = data.holderScript;
-  global.document.getElementById('c').appendChild(e);
-
-  const i = global.document.createElement('ins');
-  i.classList.add('ppstudio');
-  i.setAttribute('data-pps-target-id', 'cr-' + data.crid);
-  global.document.getElementById('c').appendChild(i);
-
-  loadScript(global, 'https://ads-cdn.tenmax.io/code/ppstudio.js', () => {
-    global.context.renderStart();
-  });
-}
diff --git a/ads/pressboard.js b/ads/pressboard.js
deleted file mode 100644
index a68bc8fc969f4..0000000000000
--- a/ads/pressboard.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function pressboard(global, data) {
-  validateData(data, ['media']);
-  data.baseUrl = 'https://adserver.pressboard.ca';
-  global.pbParams = data;
-  loadScript(
-    global,
-    data.baseUrl + '/js/amp-ad.js',
-    () => {
-      global.context.renderStart();
-    },
-    () => {
-      global.context.noContentAvailable();
-    }
-  );
-}
diff --git a/ads/promoteiq.js b/ads/promoteiq.js
deleted file mode 100644
index e31c646d24442..0000000000000
--- a/ads/promoteiq.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-import {parseJson} from '../src/json';
-import {user} from '../src/log';
-
-const TAG = 'PROMOTEIQ';
-const mandatoryDataFields = ['src', 'params', 'sfcallback'];
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function promoteiq(global, data) {
-  validateData(data, mandatoryDataFields, []);
-  const sfInputs = parseJson(data['params']);
-
-  loadScript(global, data['src'], () => {
-    if (!!global['TagDeliveryContent']) {
-      const sfCallback = new Function('response', data['sfcallback']);
-      global['TagDeliveryContent']['request'](sfInputs, sfCallback);
-    } else {
-      user().error(TAG, 'TagDeliveryContent object not loaded on page');
-    }
-  });
-}
diff --git a/ads/pubexchange.js b/ads/pubexchange.js
deleted file mode 100644
index a002281e00248..0000000000000
--- a/ads/pubexchange.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function pubexchange(global, data) {
-  // ensure we have valid widgetIds value
-  validateData(data, ['publication', 'moduleId', 'moduleNum'], ['test']);
-
-  global.PUBX = global.PUBX || {
-    pub: data['publication'],
-    modNum: data['moduleNum'],
-    modId: data['moduleId'],
-    test: data['test'],
-  };
-
-  // load the Outbrain AMP JS file
-  loadScript(global, 'https://main.pubexchange.com/loader-amp.min.js');
-}
diff --git a/ads/pubguru.js b/ads/pubguru.js
deleted file mode 100644
index 6d6c2fdb36386..0000000000000
--- a/ads/pubguru.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function pubguru(global, data) {
-  validateData(data, ['publisher', 'slot']);
-
-  global.$pubguru = data;
-
-  const el = global.document.createElement('div');
-  el.setAttribute('id', 'the-ad-unit');
-
-  global.document.getElementById('c').appendChild(el);
-  loadScript(
-    global,
-    'https://amp.pubguru.org/amp.' +
-      encodeURIComponent(data.publisher) +
-      '.min.js'
-  );
-}
diff --git a/ads/pubmatic.js b/ads/pubmatic.js
deleted file mode 100644
index 251619f2624fa..0000000000000
--- a/ads/pubmatic.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript} from '../3p/3p';
-
-/* global PubMatic: false */
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function pubmatic(global, data) {
-  loadScript(global, 'https://ads.pubmatic.com/AdServer/js/amp.js', () => {
-    data.kadpageurl = global.context.sourceUrl || global.context.location.href;
-    PubMatic.showAd(data);
-  });
-}
diff --git a/ads/pubmine.js b/ads/pubmine.js
deleted file mode 100644
index c5096d6ef937d..0000000000000
--- a/ads/pubmine.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {CONSENT_POLICY_STATE} from '../src/consent-state';
-import {loadScript, validateData} from '../3p/3p';
-
-const pubmineOptional = ['section', 'pt', 'ht', 'npaOnUnknownConsent'],
-  pubmineRequired = ['siteid'],
-  pubmineURL = 'https://s.pubmine.com/head.js';
-
-/**
- * @param {!Object} data
- * @param {!Window} global
- */
-function initMasterFrame(data, global) {
-  /*
-   * INSUFFICIENT and UNKNOWN should be treated as INSUFFICIENT
-   * unless state is UNKNOWN and `data-npa-on-unknown-consent=false`
-   */
-  const paUnknown =
-    data['npaOnUnknownConsent'] !== undefined &&
-    'false' == data['npaOnUnknownConsent'];
-  const ctxt = global.context;
-  const consent =
-    ctxt.initialConsentState === null ||
-    ctxt.initialConsentState === CONSENT_POLICY_STATE.SUFFICIENT ||
-    ctxt.initialConsentState === CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED ||
-    (ctxt.initialConsentState === CONSENT_POLICY_STATE.UNKNOWN && paUnknown);
-
-  global['__ATA_PP'] = {
-    pt: data['pt'] || 1,
-    ht: data['ht'] || 1,
-    tn: 'amp',
-    amp: true,
-    consent: consent ? 1 : 0,
-    siteid: Number(data['siteid']) || undefined,
-  };
-  global['__ATA'] = global['__ATA'] || {};
-  global['__ATA']['cmd'] = global['__ATA']['cmd'] || [];
-  loadScript(global, pubmineURL);
-}
-
-/**
- * @param {string} slotId
- * @param {!Window} global
- */
-function createSlot(slotId, global) {
-  const containerEl = global.document.getElementById('c');
-  const adSlot = global.document.createElement('div');
-  adSlot.setAttribute('id', slotId);
-  containerEl.appendChild(adSlot);
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function pubmine(global, data) {
-  validateData(data, pubmineRequired, pubmineOptional);
-
-  const sectionId = data['siteid'] + (data['section'] || '1');
-
-  const slotConfig = {
-    sectionId,
-    height: data.height == 250 ? 250 : data.height - 15,
-    width: data.width,
-    window: global,
-  };
-
-  const slotId = `atatags-${sectionId}`;
-
-  createSlot(slotId, global);
-  const {isMaster} = global.context;
-  if (isMaster) {
-    initMasterFrame(data, global);
-  }
-  const master = isMaster ? global : global.context.master;
-  master['__ATA']['cmd']['push'](function () {
-    master['__ATA']['insertStyles'](global);
-    master['__ATA']['initSlot'](slotId, slotConfig);
-  });
-}
diff --git a/ads/pubmine.md b/ads/pubmine.md
deleted file mode 100644
index d9539a70dfc17..0000000000000
--- a/ads/pubmine.md
+++ /dev/null
@@ -1,69 +0,0 @@
-<!---
-Copyright 2016 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.
--->
-
-# Pubmine
-
-## Example
-
-### Basic
-
-```html
-<amp-ad width="300" height="265" type="pubmine" data-siteid="37790885">
-</amp-ad>
-```
-
-### With all attributes
-
-```html
-<amp-ad
-  width="300"
-  height="265"
-  type="pubmine"
-  data-section="1"
-  data-pt="1"
-  data-ht="1"
-  data-siteid="37790885"
->
-</amp-ad>
-```
-
-## Configuration
-
-For further configuration information, please [contact Pubmine](https://wordpress.com/help/contact).
-
-Please note that the height parameter should be 15 greater than your ad size to ensure there is enough room for the "Report this ad" link.
-
-### Required parameters
-
-- `data-siteid`: Pubmine publisher site number.
-
-### Optional parameters
-
-- `data-section`: Pubmine slot identifier
-- `data-pt`: Enum value for page type
-- `data-ht`: Enum value for hosting type
-- `data-npa-on-unknown-consent`: Flag for allowing/prohibiting non-personalized-ads on unknown consent.
-
-## Consent Support
-
-Pubmine's amp-ad adheres to a user's consent in the following ways:
-
-- No `data-block-on-consent` attribute: Pubmine amp-ad will display a personalized ad to the user.
-- `CONSENT_POLICY_STATE.SUFFICIENT`: Pubmine amp-ad will display a personalized ad to the user.
-- `CONSENT_POLICY_STATE.INSUFFICIENT`: Pubmine amp-ad will display a non-personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Pubmine amp-ad will display a personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN`: Pubmine amp-ad will display a non-personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN` and `data-npa-on-unknown-consent=false`: Pubmine amp-ad will display a personalized ad to the user.
diff --git a/ads/puffnetwork.js b/ads/puffnetwork.js
deleted file mode 100644
index c04f1a9f00638..0000000000000
--- a/ads/puffnetwork.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function puffnetwork(global, data) {
-  validateData(data, ['chid']);
-  global.pn = data;
-  writeScript(global, 'https://static.puffnetwork.com/amp_ad.js');
-}
diff --git a/ads/pulsepoint.js b/ads/pulsepoint.js
deleted file mode 100644
index 586756e329d9b..0000000000000
--- a/ads/pulsepoint.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {doubleclick} from '../ads/google/doubleclick';
-import {loadScript, validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function pulsepoint(global, data) {
-  // TODO: check mandatory fields
-  validateData(data, [], ['pid', 'tagid', 'tagtype', 'slot', 'timeout']);
-  if (data.tagtype === 'hb') {
-    headerBidding(global, data);
-  } else {
-    tag(global, data);
-  }
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-function tag(global, data) {
-  writeScript(
-    global,
-    'https://tag.contextweb.com/getjs.aspx?action=VIEWAD' +
-      '&cwpid=' +
-      encodeURIComponent(data.pid) +
-      '&cwtagid=' +
-      encodeURIComponent(data.tagid) +
-      '&cwadformat=' +
-      encodeURIComponent(data.width + 'X' + data.height)
-  );
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-function headerBidding(global, data) {
-  loadScript(global, 'https://ads.contextweb.com/ht.js', () => {
-    const hbConfig = {
-      timeout: data.timeout || 1000,
-      slots: [
-        {
-          cp: data.pid,
-          ct: data.tagid,
-          cf: data.width + 'x' + data.height,
-          placement: data.slot,
-          elementId: 'c',
-        },
-      ],
-      done(targeting) {
-        doubleclick(global, {
-          width: data.width,
-          height: data.height,
-          slot: data.slot,
-          targeting: targeting[data.slot],
-        });
-      },
-    };
-    new window.PulsePointHeaderTag(hbConfig).init();
-  });
-}
diff --git a/ads/purch.js b/ads/purch.js
deleted file mode 100644
index 64ed76c97ca5e..0000000000000
--- a/ads/purch.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, validateSrcPrefix, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function purch(global, data) {
-  validateData(data, [], ['pid', 'divid', 'config']);
-  global.data = data;
-
-  const adsrc = 'https://ramp.purch.com/serve/creative_amp.js';
-  validateSrcPrefix('https:', adsrc);
-  writeScript(global, adsrc);
-}
diff --git a/ads/quoraad.js b/ads/quoraad.js
deleted file mode 100644
index d7fd0f7891aad..0000000000000
--- a/ads/quoraad.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function quoraad(global, data) {
-  validateData(data, ['adid']);
-  global.ampAdParam = data;
-  writeScript(global, 'https://a.quora.com/amp_ad.js');
-}
diff --git a/ads/rakutenunifiedads.js b/ads/rakutenunifiedads.js
deleted file mode 100644
index 4d04beaf76ba4..0000000000000
--- a/ads/rakutenunifiedads.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {hasOwn} from '../src/utils/object';
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function rakutenunifiedads(global, data) {
-  validateData(data, ['id']);
-  if (hasOwn(data, 'env')) {
-    data.env = `${data.env}-`;
-  } else {
-    data.env = '';
-  }
-  global.runa = data;
-  writeScript(global, `https://${data.env}s-cdn.rmp.rakuten.co.jp/js/amp.js`);
-}
diff --git a/ads/rakutenunifiedads.md b/ads/rakutenunifiedads.md
deleted file mode 100644
index 8561b8b679f3a..0000000000000
--- a/ads/rakutenunifiedads.md
+++ /dev/null
@@ -1,68 +0,0 @@
-<!---
-Copyright 2020 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.
--->
-
-# Rakuten Unified Ads
-
-## Example
-
-```html
-<amp-ad width="300" height="250" type="rakutenunifiedads" data-id="63">
-</amp-ad>
-```
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="rakutenunifiedads"
-  data-id="63"
-  data-env="dev"
-  data-genre='{"master_id":1,"code":"100371","match":"children"}'
-  data-ifa="DUMMY_IFA"
-  data-targeting='{"k1":"string type","k2":["male", "female"]}'
->
-</amp-ad>
-```
-
-## Configuration
-
-### Required parameters
-
-- `data-id` : Your adspot id
-- `type` : fixed value `rakutenunifiedads`
-
-### Optional parameters
-
-- `data-env` : Environment of server for Not production. e.g. `dev`, `stg`, `tst`
-- `data-genre` : Genre object
-- `data-ifa` : IFA string
-- `data-targeting` : Targeting object
-
-### How to handle responsive design
-
-Please refer to [Create responsive AMP pages](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design/)
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="rakutenunifiedads"
-  data-id="63"
-  data-env="dev"
-  layout="responsive"
->
-</amp-ad>
-```
diff --git a/ads/rbinfox.js b/ads/rbinfox.js
deleted file mode 100644
index e0fb1a66aeb89..0000000000000
--- a/ads/rbinfox.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {loadScript, validateData, validateSrcPrefix} from '../3p/3p';
-
-const jsnPrefix = 'https://rb.infox.sg/';
-const n = 'infoxContextAsyncCallbacks';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function rbinfox(global, data) {
-  validateData(data, ['src']);
-  const {src} = data;
-  validateSrcPrefix(jsnPrefix, src);
-
-  addToQueue(global, src);
-  loadScript(global, src);
-}
-
-/**
- * @param {!Window} global
- * @param {string} renderTo
- */
-function createContainer(global, renderTo) {
-  const d = global.document.createElement('div');
-  d.id = renderTo;
-  global.document.getElementById('c').appendChild(d);
-}
-
-/**
- * @param {string} src
- * @return {string}
- */
-function getBlockId(src) {
-  const parts = src.split('/');
-  return parts[parts.length - 1];
-}
-
-/**
- * @param {!Window} global
- * @param {string} src
- */
-function addToQueue(global, src) {
-  const blockId = getBlockId(src);
-  const ctx = n + blockId;
-  global[ctx] = global[ctx] || [];
-  global[ctx].push(() => {
-    const renderTo = 'infox_' + blockId;
-    // Create container
-    createContainer(global, renderTo);
-    global['INFOX' + blockId].renderTo(renderTo);
-  });
-}
diff --git a/ads/readmo.js b/ads/readmo.js
deleted file mode 100644
index 91c1694f2ea93..0000000000000
--- a/ads/readmo.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function readmo(global, data) {
-  validateData(data, ['section']);
-
-  const config = {
-    container: '#c',
-    amp: true,
-  };
-
-  if (data.url) {
-    global.publisherUrl = data.url;
-  }
-
-  Object.keys(data).forEach((property) => {
-    config[property] = data[property];
-  });
-
-  (global.readmo = global.readmo || []).push(config);
-
-  loadScript(global, 'https://s.yimg.com/dy/ads/readmo.js', () =>
-    global.context.renderStart()
-  );
-}
diff --git a/ads/readmo.md b/ads/readmo.md
deleted file mode 100644
index 0a4c3dc7d5794..0000000000000
--- a/ads/readmo.md
+++ /dev/null
@@ -1,48 +0,0 @@
-<!---
-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.
--->
-
-# ReadMo
-
-## Example
-
-ReadMo only requires a section code to run. Please work with your account manager to properly configure your AMP section.
-
-### Basic
-
-```html
-<amp-embed
-  width="400"
-  height="320"
-  type="readmo"
-  layout="responsive"
-  data-infinite="true"
-  data-section="1234567"
->
-</amp-embed>
-```
-
-### Required parameters
-
-- `data-section` : A unique identifier that represents your site and placement
-
-### Optional parameters
-
-- `data-module` : Defines the type of module to render (`end-of-article`, `smart-feed`, `smart-feed-video`, `side-rail`)
-- `data-infinite` : If true, enables infinite feed for your module
-- `data-title` : The title that appears above the module (defaults to "You May Like")
-- `data-sponsored-by-label` : Text override to the default "Sponsored by" label that appears next to the sponsors name
-- `data-url` : Publisher url override
-- `json` : Use this to pass additional configuration properties (ex: `json='{ "contentId": 1234 }'`)
diff --git a/ads/realclick.js b/ads/realclick.js
deleted file mode 100644
index 24fb1d5f2cd4b..0000000000000
--- a/ads/realclick.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function realclick(global, data) {
-  validateData(data, ['mcode']);
-  global.rcParams = data;
-  loadScript(global, 'https://ssp.realclick.co.kr/amp/ad.js');
-}
diff --git a/ads/recomad.js b/ads/recomad.js
deleted file mode 100644
index 911544fc65f0d..0000000000000
--- a/ads/recomad.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * Add a container for the recomAD widget,
- * which will be discovered by the script automatically.
- *
- * @param {Element} container
- * @param {string} appId
- * @param {string} widgetId
- * @param {string} searchTerm
- * @param {string} origin
- * @param {string} baseUrl
- * @param {string} puid
- */
-function createWidgetContainer(
-  container,
-  appId,
-  widgetId,
-  searchTerm,
-  origin,
-  baseUrl,
-  puid
-) {
-  container.className = 's24widget';
-
-  container.setAttribute('data-app-id', appId);
-  container.setAttribute('data-widget-id', widgetId);
-  searchTerm && container.setAttribute('data-search-term', searchTerm);
-  origin && container.setAttribute('data-origin', origin);
-  baseUrl && container.setAttribute('data-base-url', baseUrl);
-  puid && container.setAttribute('data-puid', puid);
-
-  window.document.body.appendChild(container);
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function recomad(global, data) {
-  validateData(data, ['appId', 'widgetId', ['searchTerm', 'origin']]);
-
-  createWidgetContainer(
-    window.document.createElement('div'),
-    data['appId'],
-    data['widgetId'],
-    data['searchTerm'] || '',
-    data['origin'] || '',
-    data['baseUrl'] || '',
-    data['puid'] || ''
-  );
-
-  loadScript(window, 'https://widget.s24.com/js/s24widget.min.js');
-}
diff --git a/ads/relap.js b/ads/relap.js
deleted file mode 100644
index 8fa8a5d60cccf..0000000000000
--- a/ads/relap.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function relap(global, data) {
-  validateData(data, [], ['token', 'url', 'anchorid', 'version']);
-
-  const urlParam = data['url'] || window.context.canonicalUrl;
-
-  if (data['version'] === 'v7') {
-    window.onRelapAPIReady = function (relapAPI) {
-      relapAPI['init']({
-        token: data['token'],
-        url: urlParam,
-      });
-    };
-
-    window.onRelapAPIInit = function (relapAPI) {
-      relapAPI['addWidget']({
-        cfgId: data['anchorid'],
-        anchorEl: global.document.getElementById('c'),
-        position: 'append',
-        events: {
-          onReady: function () {
-            window.context.renderStart();
-          },
-          onNoContent: function () {
-            window.context.noContentAvailable();
-          },
-        },
-      });
-    };
-
-    loadScript(global, 'https://relap.io/v7/relap.js');
-  } else {
-    window.relapV6WidgetReady = function () {
-      window.context.renderStart();
-    };
-
-    window.relapV6WidgetNoSimilarPages = function () {
-      window.context.noContentAvailable();
-    };
-
-    const anchorEl = global.document.createElement('div');
-    anchorEl.id = data['anchorid'];
-    global.document.getElementById('c').appendChild(anchorEl);
-
-    const url = `https://relap.io/api/v6/head.js?token=${encodeURIComponent(
-      data['token']
-    )}&url=${encodeURIComponent(urlParam)}`;
-    loadScript(global, url);
-  }
-}
diff --git a/ads/relappro.js b/ads/relappro.js
deleted file mode 100644
index 624867b55377b..0000000000000
--- a/ads/relappro.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function relappro(global, data) {
-  validateData(data, [], ['slotId', 'nameAdUnit', 'requirements']);
-  global.params = data;
-
-  loadScript(
-    global,
-    'https://cdn.relappro.com/adservices/amp/relappro.amp.min.js'
-  );
-}
diff --git a/ads/revcontent.js b/ads/revcontent.js
deleted file mode 100644
index ebe88e30b0ecb..0000000000000
--- a/ads/revcontent.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function revcontent(global, data) {
-  let endpoint =
-    'https://labs-cdn.revcontent.com/build/amphtml/revcontent.amp.min.js';
-
-  if (typeof data.revcontent !== 'undefined') {
-    if (typeof data.env === 'undefined') {
-      endpoint = 'https://assets.revcontent.com/master/delivery.js';
-    } else if (data.env == 'dev') {
-      endpoint = 'https://performante.revcontent.dev/delivery.js';
-    } else {
-      endpoint = 'https://assets.revcontent.com/' + data.env + '/delivery.js';
-    }
-  }
-
-  const required = ['id', 'height'];
-  const optional = [
-    'wrapper',
-    'subIds',
-    'revcontent',
-    'env',
-    'loadscript',
-    'api',
-    'key',
-    'ssl',
-    'adxw',
-    'adxh',
-    'rows',
-    'cols',
-    'domain',
-    'source',
-    'testing',
-    'endpoint',
-    'publisher',
-    'branding',
-    'font',
-    'css',
-    'sizer',
-    'debug',
-    'ampcreative',
-  ];
-
-  data.endpoint = data.endpoint ? data.endpoint : 'trends.revcontent.com';
-
-  validateData(data, required, optional);
-  global.data = data;
-  if (data.loadscript) {
-    loadScript(window, endpoint);
-  } else {
-    writeScript(window, endpoint);
-  }
-}
diff --git a/ads/revjet.js b/ads/revjet.js
deleted file mode 100644
index 50af0213fc017..0000000000000
--- a/ads/revjet.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function revjet(global, data) {
-  validateData(data, ['tag', 'key'], ['plc', 'opts', 'params']);
-
-  global._revjetData = {...data};
-
-  loadScript(
-    global,
-    'https://cdn.revjet.com/~cdn/JS/03/amp.js',
-    /* opt_cb */ undefined,
-    () => {
-      global.context.noContentAvailable();
-    }
-  );
-}
diff --git a/ads/rfp.js b/ads/rfp.js
deleted file mode 100644
index 624b36f769028..0000000000000
--- a/ads/rfp.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function rfp(global, data) {
-  validateData(data, ['adspotId'], ['stylesheetUrl', 'country']);
-  global.rfpData = data;
-  writeScript(global, 'https://js.rfp.fout.jp/rfp-amp.js');
-}
diff --git a/ads/rnetplus.js b/ads/rnetplus.js
deleted file mode 100644
index bf54c0dedef8e..0000000000000
--- a/ads/rnetplus.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData, validateSrcPrefix} from '../3p/3p';
-
-const jsnPrefix = 'https://api.rnet.plus/';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function rnetplus(global, data) {
-  validateData(data, ['src']);
-  const {src} = data;
-  validateSrcPrefix(jsnPrefix, src);
-  createContainer(global, 'rnetplus_' + getBlockId(src));
-  loadScript(global, src);
-}
-
-/**
- * @param {!Window} global
- * @param {string} renderTo
- */
-function createContainer(global, renderTo) {
-  const d = global.document.createElement('div');
-  d.id = renderTo;
-  global.document.getElementById('c').appendChild(d);
-}
-
-/**
- * @param {string} src
- * @return {string}
- */
-function getBlockId(src) {
-  const parts = src.split('?');
-  const vars = parts[1].split('&');
-  for (let j = 0; j < vars.length; ++j) {
-    const pair = vars[j].split('=');
-    if (pair[0] == 'blockId') {
-      return pair[1];
-    }
-  }
-  return '660';
-}
diff --git a/ads/rubicon.js b/ads/rubicon.js
deleted file mode 100644
index 2e331cbd35360..0000000000000
--- a/ads/rubicon.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function rubicon(global, data) {
-  // TODO: check mandatory fields
-  validateData(
-    data,
-    [],
-    [
-      'account',
-      'site',
-      'zone',
-      'size',
-      'kw',
-      'visitor',
-      'inventory',
-      'method',
-      'callback',
-    ]
-  );
-
-  if (data.method === 'smartTag') {
-    smartTag(global, data);
-  }
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-function smartTag(global, data) {
-  /* eslint-disable */
-  global.rp_account = data.account;
-  global.rp_site = data.site;
-  global.rp_zonesize = data.zone + '-' + data.size;
-  global.rp_adtype = 'js';
-  global.rp_page = context.sourceUrl;
-  global.rp_kw = data.kw;
-  global.rp_visitor = data.visitor;
-  global.rp_inventory = data.inventory;
-  global.rp_amp = 'st';
-  global.rp_callback = data.callback;
-  /* eslint-enable */
-  writeScript(
-    global,
-    'https://ads.rubiconproject.com/ad/' +
-      encodeURIComponent(data.account) +
-      '.js'
-  );
-}
diff --git a/ads/runative.js b/ads/runative.js
deleted file mode 100644
index 69e783a073f21..0000000000000
--- a/ads/runative.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-import {parseJson} from '../src/json';
-
-const requiredParams = ['spot'];
-const optionsParams = [
-  'keywords',
-  'adType',
-  'param1',
-  'param2',
-  'param3',
-  'subid',
-  'cols',
-  'rows',
-  'title',
-  'titlePosition',
-  'adsByPosition',
-];
-const adContainerId = 'runative_id';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function runative(global, data) {
-  // ensure we have valid widgetIds value
-  validateData(data, requiredParams, optionsParams);
-
-  const adContainer = global.document.getElementById('c');
-  const adNativeContainer = getAdContainer(global);
-  const initScript = getInitAdScript(global, data);
-
-  adContainer.appendChild(adNativeContainer);
-
-  // load the RUNative AMP JS file
-  loadScript(global, '//cdn.run-syndicate.com/sdk/v1/n.js', () => {
-    global.document.body.appendChild(initScript);
-  });
-}
-
-/**
- * @param {!Object} data
- * @return {JsonObject}
- */
-function getInitData(data) {
-  const initKeys = requiredParams.concat(optionsParams);
-  const initParams = {};
-
-  initKeys.forEach((key) => {
-    if (key in data) {
-      const initKey = key === 'adType' ? 'type' : key;
-
-      initParams[initKey] = data[key];
-    }
-  });
-
-  initParams['element_id'] = adContainerId;
-
-  return parseJson(initParams);
-}
-
-/**
- * @param {!Window} global
- * @return {?Node}
- */
-function getAdContainer(global) {
-  const container = global.document.createElement('div');
-
-  container['id'] = adContainerId;
-
-  return container;
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- * @return {?Node}
- */
-function getInitAdScript(global, data) {
-  const scriptElement = global.document.createElement('script');
-  const initData = getInitData(data);
-  const initScript = global.document.createTextNode(
-    `NativeAd(${JSON.stringify(initData)});`
-  );
-
-  scriptElement.appendChild(initScript);
-
-  return scriptElement;
-}
diff --git a/ads/runative.md b/ads/runative.md
deleted file mode 100644
index 7c090de74052a..0000000000000
--- a/ads/runative.md
+++ /dev/null
@@ -1,55 +0,0 @@
-<!---
-Copyright 2018 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.
--->
-
-# RUNative
-
-Serves ads from the [RUNative](https://www.runative.com/).
-
-## Example
-
-```html
-<amp-embed
-  width="640"
-  height="320"
-  layout="responsive"
-  type="runative"
-  data-spot="{spotcode}"
-  data-ad-type="{ad type}label-over"
-  data-cols="{number cols}"
-  data-rows="{number rows}"
-  data-title="{title of ad}"
-  data-keywords="{keywords}"
->
-</amp-embed>
-```
-
-## Configuration
-
-For details on the configuration semantics, please contact the ad network or refer to their documentation.
-
-### Required parameters
-
-- `data-spot` - code spot
-
-### Optional parameters
-
-- `data-ad-type` - types of ads: `img-left`, `img-right`, `label-over`, `label-under`
-- `data-keywords` - title of ad
-- `data-title` - title of ad
-- `data-cols` - number of cols 1 till 6
-- `data-rows` - number of rows 1 till 6
-- `data-title-position` - position of ad title (`left` or `right`)
-- `data-ads-by-position` - position of runative logo (`left` or `right`)
diff --git a/ads/sas.js b/ads/sas.js
deleted file mode 100644
index 87e039207dd50..0000000000000
--- a/ads/sas.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * 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.
- */
-
-import {parseJson} from '../src/json';
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function sas(global, data) {
-  let url, adHost;
-  const fields = ['site', 'size', 'area'];
-  validateData(
-    data,
-    ['customerName'],
-    ['adHost', 'site', 'size', 'area', 'mid', 'tags']
-  );
-
-  if (typeof data.adHost === 'undefined') {
-    adHost = encodeURIComponent(data['customerName']) + '-ads.aimatch.com';
-  } else {
-    adHost = encodeURIComponent(data['adHost']);
-  }
-
-  url = '//' + adHost + '/' + data['customerName'] + '/jserver';
-
-  for (let idx = 0; idx < fields.length; idx++) {
-    if (data[fields[idx]]) {
-      if (typeof data[fields[idx]] !== 'undefined') {
-        url += '/' + fields[idx] + '=' + encodeURIComponent(data[fields[idx]]);
-      }
-    }
-  }
-
-  if (typeof data.tags !== 'undefined') {
-    const tags = parseJson(data.tags);
-    for (const tag in tags) {
-      url += '/' + tag + '=' + encodeURIComponent(tags[tag]);
-    }
-  }
-  writeScript(global, url, () => {
-    global.context.renderStart();
-  });
-}
diff --git a/ads/seedingalliance.js b/ads/seedingalliance.js
deleted file mode 100644
index 41861ecc527f3..0000000000000
--- a/ads/seedingalliance.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function seedingalliance(global, data) {
-  writeScript(
-    global,
-    'https://d.nativendo.de/cds/delivery/init?url=' +
-      encodeURIComponent(data.url)
-  );
-}
diff --git a/ads/sekindo.js b/ads/sekindo.js
deleted file mode 100644
index cd49c1df1e471..0000000000000
--- a/ads/sekindo.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {hasOwn} from '../src/utils/object';
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function sekindo(global, data) {
-  validateData(data, ['spaceid']);
-  const pubUrl = encodeURIComponent(global.context.sourceUrl);
-  const excludesSet = {ampSlotIndex: 1, type: 1};
-  const customParamMap = {spaceid: 's', width: 'x', height: 'y'};
-  let query =
-    'isAmpProject=1&pubUrl=' +
-    pubUrl +
-    '&cbuster=' +
-    global.context.startTime +
-    '&';
-  let getParam = '';
-  for (const key in data) {
-    if (hasOwn(data, key)) {
-      if (typeof excludesSet[key] == 'undefined') {
-        getParam =
-          typeof customParamMap[key] == 'undefined' ? key : customParamMap[key];
-        query += getParam + '=' + encodeURIComponent(data[key]) + '&';
-      }
-    }
-  }
-  loadScript(
-    global,
-    'https://live.sekindo.com/live/liveView.php?' + query,
-    () => {
-      global.context.renderStart();
-    },
-    () => {
-      global.context.noContentAvailable();
-    }
-  );
-}
diff --git a/ads/sharethrough.js b/ads/sharethrough.js
deleted file mode 100644
index baa152d1bef93..0000000000000
--- a/ads/sharethrough.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function sharethrough(global, data) {
-  validateData(data, ['pkey'], []);
-  global.pkey = data.pkey;
-  writeScript(global, 'https://native.sharethrough.com/iframe/amp.js');
-}
diff --git a/ads/shemedia.js b/ads/shemedia.js
deleted file mode 100644
index 3a9f0c53bb32c..0000000000000
--- a/ads/shemedia.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function shemedia(global, data) {
-  validateData(data, ['slotType', 'boomerangPath']);
-
-  loadScript(global, 'https://ads.shemedia.com/static/amp.js');
-}
diff --git a/ads/sklik.js b/ads/sklik.js
deleted file mode 100644
index d4fe68ff4a8c2..0000000000000
--- a/ads/sklik.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript} from '../3p/3p';
-
-/* global sklikProvider: false */
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function sklik(global, data) {
-  loadScript(global, 'https://c.imedia.cz/js/amp.js', () => {
-    const parentId = 'sklik_parent';
-
-    const parentElement = document.createElement('div');
-    parentElement.id = parentId;
-    window.document.body.appendChild(parentElement);
-
-    data.elm = parentId;
-    data.url = global.context.canonicalUrl;
-
-    sklikProvider.show(data);
-  });
-}
diff --git a/ads/slimcutmedia.js b/ads/slimcutmedia.js
deleted file mode 100644
index 7622a77f8e102..0000000000000
--- a/ads/slimcutmedia.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function slimcutmedia(global, data) {
-  /*eslint "google-camelcase/google-camelcase": 0*/
-  global._scm_amp = {
-    allowed_data: ['pid', 'ffc'],
-    mandatory_data: ['pid'],
-    data,
-  };
-
-  validateData(
-    data,
-    global._scm_amp.mandatory_data,
-    global._scm_amp.allowed_data
-  );
-
-  loadScript(
-    global,
-    'https://static.freeskreen.com/publisher/' +
-      encodeURIComponent(data.pid) +
-      '/freeskreen.min.js'
-  );
-}
diff --git a/ads/smartadserver.js b/ads/smartadserver.js
deleted file mode 100644
index 03983799f1990..0000000000000
--- a/ads/smartadserver.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function smartadserver(global, data) {
-  // For more flexibility, we construct the call to SmartAdServer's URL in the
-  // external loader, based on the data received from the AMP tag.
-  loadScript(global, 'https://ec-ns.sascdn.com/diff/js/amp.v0.js', () => {
-    global.sas.callAmpAd(data);
-  });
-}
diff --git a/ads/smartclip.js b/ads/smartclip.js
deleted file mode 100644
index e5a5594e24fb8..0000000000000
--- a/ads/smartclip.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function smartclip(global, data) {
-  /*eslint "google-camelcase/google-camelcase": 0*/
-  global._smartclip_amp = {
-    allowed_data: ['extra'],
-    mandatory_data: ['plc', 'sz'],
-    data,
-  };
-
-  validateData(
-    data,
-    global._smartclip_amp.mandatory_data,
-    global._smartclip_amp.allowed_data
-  );
-
-  const rand = Math.round(Math.random() * 100000000);
-
-  loadScript(
-    global,
-    'https://des.smartclip.net/ads?type=dyn&plc=' +
-      encodeURIComponent(data.plc) +
-      '&sz=' +
-      encodeURIComponent(data.sz) +
-      (data.extra ? '&' + encodeURI(data.extra) : '') +
-      '&rnd=' +
-      rand
-  );
-}
diff --git a/ads/smi2.js b/ads/smi2.js
deleted file mode 100644
index 443321cf2e574..0000000000000
--- a/ads/smi2.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function smi2(global, data) {
-  validateData(data, ['blockid']);
-  global._smi2 = global._smi2 || {
-    viewId: global.context.pageViewId,
-    blockId: data['blockid'],
-    htmlURL: data['canonical'] || global.context.canonicalUrl,
-    ampURL: data['ampurl'] || global.context.sourceUrl,
-    testMode: data['testmode'] || 'false',
-    referrer: data['referrer'] || global.context.referrer,
-    hostname: global.window.context.location.hostname,
-    clientId: window.context.clientId,
-    domFingerprint: window.context.domFingerprint,
-    location: window.context.location,
-    startTime: window.context.startTime,
-  };
-  global._smi2.AMPCallbacks = {
-    renderStart: global.context.renderStart,
-    noContentAvailable: global.context.noContentAvailable,
-  };
-  // load the smi2  AMP JS file script asynchronously
-  const rand = Math.round(Math.random() * 100000000);
-  loadScript(
-    global,
-    'https://amp.smi2.ru/ampclient/ampfecth.js?rand=' + rand,
-    () => {},
-    global.context.noContentAvailable
-  );
-}
diff --git a/ads/smilewanted.js b/ads/smilewanted.js
deleted file mode 100644
index ef15c13fd8653..0000000000000
--- a/ads/smilewanted.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function smilewanted(global, data) {
-  // For more flexibility, we construct the call to SmileWanted's URL in the external loader, based on the data received from the AMP tag.
-  global.smilewantedConfig = data;
-  loadScript(global, 'https://prebid.smilewanted.com/amp/amp.js');
-}
diff --git a/ads/sogouad.js b/ads/sogouad.js
deleted file mode 100644
index f9d1058c0d4c1..0000000000000
--- a/ads/sogouad.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function sogouad(global, data) {
-  validateData(data, ['slot', 'w', 'h'], ['responsive']);
-  const slot = global.document.getElementById('c');
-  const ad = global.document.createElement('div');
-  const sogouUn = 'sogou_un';
-  global[sogouUn] = window[sogouUn] || [];
-  if (data.w === '100%') {
-    global[sogouUn].push({
-      id: data.slot,
-      ele: ad,
-    });
-  } else {
-    global[sogouUn].push({
-      id: data.slot,
-      ele: ad,
-      w: data.w,
-      h: data.h,
-    });
-  }
-  slot.appendChild(ad);
-  loadScript(global, 'https://theta.sogoucdn.com/wap/js/aw.js');
-}
diff --git a/ads/sortable.js b/ads/sortable.js
deleted file mode 100644
index 35b7ec85b6d66..0000000000000
--- a/ads/sortable.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function sortable(global, data) {
-  validateData(data, ['site', 'name'], ['responsive']);
-
-  const slot = global.document.getElementById('c');
-  const ad = global.document.createElement('div');
-  const size =
-    data.responsive === 'true' ? 'auto' : data.width + 'x' + data.height;
-  ad.className = 'ad-tag';
-  ad.setAttribute('data-ad-name', data.name);
-  ad.setAttribute('data-ad-size', size);
-  slot.appendChild(ad);
-  loadScript(
-    global,
-    'https://tags-cdn.deployads.com/a/' + encodeURIComponent(data.site) + '.js'
-  );
-}
diff --git a/ads/sovrn.js b/ads/sovrn.js
deleted file mode 100644
index 183ad0c0951f2..0000000000000
--- a/ads/sovrn.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-/*
- *********
- * Existing sovrn customers feel free to contact amp-implementations@sovrn.com
- * for assistance with setting up your amp-ad tagid New customers please see
- * www.sovrn.com to sign up and get started!
- *********
- */
-import {writeScript} from '../3p/3p';
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function sovrn(global, data) {
-  /*eslint "google-camelcase/google-camelcase": 0*/
-  global.width = data.width;
-  global.height = data.height;
-  global.domain = data.domain;
-  global.u = data.u;
-  global.iid = data.iid;
-  global.aid = data.aid;
-  global.z = data.z;
-  global.tf = data.tf;
-  writeScript(global, 'https://ap.lijit.com/www/sovrn_amp/sovrn_ads.js');
-}
diff --git a/ads/speakol.js b/ads/speakol.js
deleted file mode 100644
index dd757920e0f6a..0000000000000
--- a/ads/speakol.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/* eslint-disable indent */
-/* eslint-disable require-jsdoc */
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-
-export function speakol(global, data) {
-  validateData(data, ['widgetid']);
-
-  (global.spksdk = global.spksdk || []).push({
-    // eslint-disable-next-line google-camelcase/google-camelcase
-    widget_id: `wi-${data['widgetid']}`,
-    element: `wi-${data['widgetid']}`,
-  });
-  const d = global.document.createElement('div');
-  d.classList.add('speakol-widget');
-  d.id = 'wi-' + data['widgetid'];
-
-  global.document.getElementById('c').appendChild(d);
-
-  loadScript(global, 'https://cdn.speakol.com/widget/js/speakol-widget-v2.js');
-}
diff --git a/ads/spotx.js b/ads/spotx.js
deleted file mode 100644
index d56ef90d6dd81..0000000000000
--- a/ads/spotx.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {hasOwn} from '../src/utils/object';
-import {startsWith} from '../src/string';
-import {validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function spotx(global, data) {
-  // ensure we have valid channel id
-  validateData(data, ['spotx_channel_id', 'width', 'height']);
-
-  // Because 3p's loadScript does not allow for data attributes,
-  // we will write the JS tag ourselves.
-  const script = global.document.createElement('script');
-
-  data['spotx_content_width'] = data.spotx_content_width || data.width;
-  data['spotx_content_height'] = data.spotx_content_height || data.height;
-  data['spotx_content_page_url'] =
-    global.context.location.href || global.context.sourceUrl;
-
-  // Add data-* attribute for each data value passed in.
-  for (const key in data) {
-    if (hasOwn(data, key) && startsWith(key, 'spotx_')) {
-      script.setAttribute(`data-${key}`, data[key]);
-    }
-  }
-
-  global['spotx_ad_done_function'] = function (spotxAdFound) {
-    if (!spotxAdFound) {
-      global.context.noContentAvailable();
-    }
-  };
-
-  // TODO(KenneyE): Implement AdLoaded callback in script to accurately trigger
-  // renderStart()
-  script.onload = global.context.renderStart;
-
-  script.src = `//js.spotx.tv/easi/v1/${data['spotx_channel_id']}.js`;
-  global.document.body.appendChild(script);
-}
diff --git a/ads/springAds.js b/ads/springAds.js
deleted file mode 100644
index 069e1a9548e31..0000000000000
--- a/ads/springAds.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {computeInMasterFrame, loadScript} from '../3p/3p';
-import {parseJson} from '../src/json';
-
-/**
- * @param context
- */
-
-const initSlotList = function (context) {
-  context.master.availableSlots = context.master.availableSlots || {};
-};
-
-const registerSlot = function (slot) {
-  context.master.availableSlots[slot.slotName] = slot;
-};
-
-// eslint-disable-next-line require-jsdoc
-export function springAds(global, data) {
-  computeInMasterFrame(
-    global,
-    'springAds',
-    function () {
-      initSlotList(context);
-    },
-    () => {}
-  );
-  if (data.adssetup) {
-    const adSSetup = parseJson(data.adssetup);
-    adSSetup['isAMP'] = !0;
-    adSSetup['availableSlots'] = context.master.availableSlots;
-    context.master.adSSetup = global.adSSetup = adSSetup;
-    const sitename = adSSetup['publisher'].match(/(.*)\..*/)[1];
-    loadScript(
-      global,
-      'https://www.asadcdn.com/adlib/pages/' + sitename + '_amp.js'
-    );
-  } else {
-    computeInMasterFrame(
-      global,
-      'springAds',
-      function () {
-        registerSlot({
-          window,
-          document,
-          context,
-          slotName: data['adslot'],
-        });
-        if (context.master.ASCDP) {
-          context.master.ASCDP.adS.renderAd(data.adslot);
-        }
-      },
-      () => {}
-    );
-  }
-}
diff --git a/ads/springAds.md b/ads/springAds.md
deleted file mode 100644
index d84bb10885713..0000000000000
--- a/ads/springAds.md
+++ /dev/null
@@ -1,62 +0,0 @@
-<!---
-Copyright 2015 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.
--->
-
-# Spring AdTechnology AmpAd Integration
-
-## Example
-
-```html
-<amp-ad
-  width="0"
-  height="0"
-  type="springAds"
-  data-adssetup='{
-    "view": "amp",
-    "partners": true,
-    "adPlacements": ["banner","mrec"],
-    "adSlotSizes": {
-      "banner": [{
-        "minWidth": 1,
-        "sizes": [[320, 50], [320, 160]]
-      }],
-      "mrec": [{
-        "minWidth": 1,
-        "sizes": [[300, 250], [300, 300], [250, 250], [320, 160], [300, 150], [320, 50], [320, 75], [320, 80], [320, 100], [300, 100], [300, 50], [300, 75]]
-      }]
-    },
-    "pageName": "demo_story",
-    "publisher": "adtechnology.axelspringer.com",
-    "target": "singleAds;multiAds;you;me;team=adtech,MIT;"
-  }'
->
-</amp-ad>
-<amp-ad width="320" height="50" type="springAds" data-adslot="banner"></amp-ad>
-<amp-ad width="300" height="250" type="springAds" data-adslot="mrec"></amp-ad>
-```
-
-## Configuration
-
-for further information regarding this implementation, please contact adtechnology@axelspringer.de
-
-Supported parameters:
-
-- `data-site`: siteid given by mediaimpact
-- `data-page`: pageName given by mediaimpact
-
-## Optional features
-
-- Loading placeholder for ads, see [Placeholders in amp-ad](https://amp.dev/documentation/components/amp-ad#placeholder).
-- No ad fallback for ads, see [No ad in amp-ad](https://amp.dev/documentation/components/amp-ad#no-ad-available).
diff --git a/ads/ssp.js b/ads/ssp.js
deleted file mode 100644
index b94e7dde9ba51..0000000000000
--- a/ads/ssp.js
+++ /dev/null
@@ -1,140 +0,0 @@
-/**
- * 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.
- */
-
-import {computeInMasterFrame, loadScript, validateData} from '../3p/3p';
-import {parseJson} from '../src/json';
-
-/*
- * How to develop:
- * https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md
- */
-
-/**
- * @param {!Array.<!Object>} array
- * @param {!Function} iteratee
- *
- * @return {Object}
- */
-function keyBy(array, iteratee) {
-  return array.reduce(
-    (itemById, item) => Object.assign(itemById, {[iteratee(item)]: item}),
-    {}
-  );
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function ssp(global, data) {
-  // validate AMP input data- attributes
-  validateData(data, ['position'], ['site']);
-
-  let position = {id: -1};
-
-  try {
-    position = parseJson(data.position);
-
-    if (position['id'] === undefined) {
-      position = {id: -1};
-    }
-  } catch (error) {}
-
-  if (position['id'] === -1) {
-    global.context.noContentAvailable();
-
-    return;
-  }
-
-  // This is super important. Without this any variables on context are not shared
-  const mW = global.context.isMaster ? global : global.context.master;
-
-  // create parent element
-  const parentElement = document.createElement('div');
-
-  parentElement.id = position['id'];
-
-  // https://github.com/ampproject/amphtml/tree/master/ads#the-iframe-sandbox
-  global.document.getElementById('c').appendChild(parentElement);
-
-  // https://github.com/ampproject/amphtml/blob/master/3p/3p.js#L186
-  computeInMasterFrame(
-    global,
-    'ssp-load',
-    (done) => {
-      loadScript(global, 'https://ssp.imedia.cz/static/js/ssp.js', () => {
-        // This callback is run just once for amp-ad with same type
-        // Script will inject "sssp" object on Window
-        if (!global['sssp']) {
-          done(false);
-
-          return;
-        }
-
-        /** @type {{config: Function, getAds: Function, writeAd: Function}} */
-        const ssp = global['sssp'];
-
-        ssp.config({
-          site: data.site || global.context.canonicalUrl,
-        });
-
-        mW.ssp = ssp;
-
-        done(true);
-      });
-    },
-    (loaded) => {
-      if (!loaded) {
-        global.context.noContentAvailable();
-
-        return;
-      }
-
-      mW.ssp.getAds([position], {
-        requestErrorCallback: () => global.context.noContentAvailable(),
-        AMPcallback: (ads) => {
-          /** @suppress {checkTypes} */
-          const adById = keyBy(ads, (item) => item.id);
-          const ad = adById[position['id']];
-
-          if (!ad || ['error', 'empty'].includes(ad.type)) {
-            global.context.noContentAvailable();
-
-            return;
-          }
-
-          // SSP need parentElement as value in "position.id"
-          mW.ssp.writeAd(ad, {...position, id: parentElement});
-
-          parentElement.setAttribute(
-            'style',
-            [
-              'position: absolute',
-              'top: 50%',
-              'left: 50%',
-              'transform: translate(-50%, -50%)',
-              '-ms-transform: translate(-50%, -50%)',
-            ].join('; ')
-          );
-
-          const {width, height} = ad;
-
-          global.context.renderStart({width, height});
-        },
-      });
-    }
-  );
-}
diff --git a/ads/strossle.js b/ads/strossle.js
deleted file mode 100644
index e24a75fac4c78..0000000000000
--- a/ads/strossle.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-const renderTo = 'strossle-widget';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function strossle(global, data) {
-  validateData(data, ['widgetid']);
-  global._strossle = global._strossle || {
-    widgetId: data['widgetid'],
-  };
-
-  createContainer(global, data);
-  loadScript(
-    global,
-    'https://widgets.sprinklecontent.com/v2/sprinkle.js',
-    () => {}
-  );
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-function createContainer(global, data) {
-  const d = global.document.createElement('div');
-  d.className = renderTo;
-  d.setAttribute('data-spklw-widget', data['widgetid']);
-  global.document.getElementById('c').appendChild(d);
-}
diff --git a/ads/sulvo.js b/ads/sulvo.js
deleted file mode 100644
index 7827f47ed7a61..0000000000000
--- a/ads/sulvo.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * 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.
- */
-import {loadScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function sulvo(global, data) {
-  global.sulvoAmpAdData = data;
-  loadScript(global, 'https://live.demand.supply/up.amp.js');
-}
diff --git a/ads/sunmedia.js b/ads/sunmedia.js
deleted file mode 100644
index 4bf2c62f4d92f..0000000000000
--- a/ads/sunmedia.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function sunmedia(global, data) {
-  /*eslint "google-camelcase/google-camelcase": 0*/
-  global._sunmedia_amp = {
-    allowed_data: ['cskp', 'crst', 'cdb', 'cid'],
-    mandatory_data: ['cid'],
-    data,
-  };
-
-  validateData(
-    data,
-    global._sunmedia_amp.mandatory_data,
-    global._sunmedia_amp.allowed_data
-  );
-
-  loadScript(
-    global,
-    'https://vod.addevweb.com/sunmedia/amp/ads/SMIntextAMP.js'
-  );
-}
diff --git a/ads/svknative.js b/ads/svknative.js
deleted file mode 100644
index 62e50afb49509..0000000000000
--- a/ads/svknative.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function svknative(global, data) {
-  // ensure we have valid widgetid value
-  validateData(data, ['widgetid']);
-
-  const s = global.document.createElement('script');
-  const scriptKey =
-    'svknativeampwidget_' + Math.floor(Math.random() * 10000000);
-
-  s.setAttribute('data-key', scriptKey);
-  global.document.getElementById('c').appendChild(s);
-
-  (function (w, a) {
-    (w[a] = w[a] || []).push({
-      'script_key': scriptKey,
-      'settings': {
-        'w': data['widgetid'],
-        'amp': true,
-      },
-    });
-  })(global, '_svk_n_widgets');
-
-  // load the SVK Native AMP JS file
-  loadScript(global, 'https://widget.svk-native.ru/js/embed.js');
-}
diff --git a/ads/swoop.js b/ads/swoop.js
deleted file mode 100644
index 849eed02011ef..0000000000000
--- a/ads/swoop.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {computeInMasterFrame, loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function swoop(global, data) {
-  // Required properties
-  validateData(data, ['layout', 'placement', 'publisher', 'slot']);
-
-  computeInMasterFrame(
-    global,
-    'swoop-load',
-    (done) => {
-      global.swoopIabConfig = data;
-
-      loadScript(global, 'https://www.swoop-amp.com/amp.js', () =>
-        done(global.Swoop != null)
-      );
-    },
-    (success) => {
-      if (success) {
-        if (!global.context.isMaster) {
-          global.context.master.Swoop.announcePlace(global, data);
-        }
-      } else {
-        global.context.noContentAvailable();
-        throw new Error('Swoop failed to load');
-      }
-    }
-  );
-}
diff --git a/ads/taboola.js b/ads/taboola.js
deleted file mode 100644
index 4fe48edca40d6..0000000000000
--- a/ads/taboola.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function taboola(global, data) {
-  // do not copy the following attributes from the 'data' object
-  // to _tablloa global object
-  const denylist = ['height', 'type', 'width', 'placement', 'mode'];
-
-  // ensure we have vlid publisher, placement and mode
-  // and exactly one page-type
-  validateData(data, [
-    'publisher',
-    'placement',
-    'mode',
-    ['article', 'video', 'photo', 'search', 'category', 'homepage', 'other'],
-  ]);
-
-  // setup default values for referrer and url
-  const params = {
-    referrer: data.referrer || global.context.referrer,
-    url: data.url || global.context.canonicalUrl,
-  };
-
-  // copy none denylisted attribute to the 'params' map
-  Object.keys(data).forEach((k) => {
-    if (denylist.indexOf(k) === -1) {
-      params[k] = data[k];
-    }
-  });
-
-  // push the two object into the '_taboola' global
-  (global._taboola = global._taboola || []).push([
-    {
-      viewId: global.context.pageViewId,
-      publisher: data.publisher,
-      placement: data.placement,
-      mode: data.mode,
-      framework: 'amp',
-      container: 'c',
-    },
-    params,
-    {flush: true},
-  ]);
-
-  // install observation on entering/leaving the view
-  global.context.observeIntersection(function (changes) {
-    /** @type {!Array} */ (changes).forEach(function (c) {
-      if (c.intersectionRect.height) {
-        global._taboola.push({
-          visible: true,
-          rects: c,
-          placement: data.placement,
-        });
-      }
-    });
-  });
-
-  // load the taboola loader asynchronously
-  loadScript(
-    global,
-    `https://cdn.taboola.com/libtrc/${encodeURIComponent(
-      data.publisher
-    )}/loader.js`
-  );
-}
diff --git a/ads/tcsemotion.js b/ads/tcsemotion.js
deleted file mode 100644
index 98d7c866f01be..0000000000000
--- a/ads/tcsemotion.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * 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.
- */
-import {validateData, writeScript} from '../3p/3p';
-/**
- * @param {!Window} global
- * @param {!Object} d
- */
-export function tcsemotion(global, d) {
-  validateData(d, ['zone', 'delhost']);
-  global.djaxData = d;
-  if (d.hb && d.hb == 'true') {
-    global.djaxData.hb = true;
-  } else {
-    global.djaxData.hb = false;
-  }
-  writeScript(global, 'https://ads.tcsemotion.com/www/delivery/amphb.js');
-}
diff --git a/ads/tcsemotion.md b/ads/tcsemotion.md
deleted file mode 100644
index e7975b8dcd3ea..0000000000000
--- a/ads/tcsemotion.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# TcsEmotion
-
-## Example
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="tcsemotion"
-  data-hb="false"
-  data-zone="1"
-  data-delhost="https://hb.tcsemotion.com/www/delivery/amphb.php"
->
-</amp-ad>
-```
-
-## Configuration
-
-Please refer to [Tcsemotion](https://tcsemotion.com/) for more
-information on how to get zone id and other details
-
-### Required parameters
-
-- `data-zone`: the id of the zone provided by adserver
-- `data-delhost`: target domain url
-
-### Optional parameters
-
-- `data-hb`: enable this field to true when you are using header bidding
diff --git a/ads/teads.js b/ads/teads.js
deleted file mode 100644
index dcbca82831779..0000000000000
--- a/ads/teads.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function teads(global, data) {
-  /*eslint "google-camelcase/google-camelcase": 0*/
-  global._teads_amp = {
-    allowed_data: ['pid', 'tag'],
-    mandatory_data: ['pid'],
-    mandatory_tag_data: ['tta', 'ttp'],
-    data,
-  };
-
-  validateData(
-    data,
-    global._teads_amp.mandatory_data,
-    global._teads_amp.allowed_data
-  );
-
-  const QueryString = function () {
-    // This function is anonymous, is executed immediately and
-    // the return value is assigned to QueryString!
-    const query_string = {}
-    const a = document.createElement('a')
-    a.href = global.context.sourceUrl
-    const query = a.search.substring(1)
-    const vars = query.split("&")
-    for (var i = 0; i < vars.length; i++) {
-      const pair = vars[i].split("=")
-      // If first entry with this name
-      if (typeof query_string[pair[0]] === "undefined") {
-        query_string[pair[0]] = decodeURIComponent(pair[1])
-        // If second entry with this name
-      } else if (typeof query_string[pair[0]] === "string") {
-        const arr = [query_string[pair[0]], decodeURIComponent(pair[1])]
-        query_string[pair[0]] = arr
-        // If third or later entry with this name
-      } else {
-        query_string[pair[0]].push(decodeURIComponent(pair[1]))
-      }
-    }
-    return query_string
-  }()
-
-  if (
-    QueryString.js ||
-    QueryString.second_asset_url ||
-    QueryString.pid ||
-    QueryString.page ||
-    QueryString.content
-  ) {
-
-    if (QueryString.tracking) {
-      (global.teads || (global.teads = {})).TRACKING_URL = QueryString.tracking
-    }
-
-    // FOR-3052: Split teads-format into 2 assets
-    if (QueryString.second_asset_url) {
-      (global.teads || (global.teads = {})).FORMAT_WITH_PLAYER_URL = QueryString.second_asset_url
-    }
-
-    const ttag = () => {
-      global.teads
-      .ad(QueryString.pid || 47405, {
-        type: 'VastUrl',
-        content: QueryString.content || 'https://a.teads.tv/vast/preview/50221',
-        settings: {
-          values: {
-            pageId: QueryString.page || 42266,
-            placementId: QueryString.pid || 47405,
-            adType: QueryString.adtype || 'video'
-          },
-          components: {
-            progressBar: QueryString.pb || false
-          }
-        },
-        headerBiddingProvider: 'debugFormat'
-      })
-      .page(QueryString.page || 42266)
-      .placement(QueryString.pid || 47405, { format: 'inread', slot: { selector: 'body' } })
-      .serve()
-    }
-
-    loadScript(global, `//${QueryString.js || 's8t.teads.tv/media/format/v3/teads-format.min.js'}`, ttag)
-  } else if (data.tag) {
-    validateData(data.tag, global._teads_amp.mandatory_tag_data);
-    global._tta = data.tag.tta;
-    global._ttp = data.tag.ttp;
-
-    loadScript(
-      global,
-      'https://s8t.teads.tv/media/format/' +
-        encodeURI(data.tag.js || 'v3/teads-format.min.js')
-    );
-  } else {
-    loadScript(
-      global,
-      'https://a.teads.tv/page/' + encodeURIComponent(data.pid) + '/tag'
-    );
-  }
-}
diff --git a/ads/teads.md b/ads/teads.md
deleted file mode 100644
index c59461585f7f6..0000000000000
--- a/ads/teads.md
+++ /dev/null
@@ -1,47 +0,0 @@
-<!---
-Copyright 2015 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.
--->
-
-# Teads
-
-## Example
-
-```html
-<amp-ad
-  width="300"
-  height="1"
-  type="teads"
-  data-pid="42266"
-  layout="responsive"
->
-</amp-ad>
-```
-
-## Configuration
-
-For configuration semantics, please contact [Teads](http://teads.tv/fr/contact/).
-
-Supported parameters:
-
-- `data-pid`
-
-## User Consent Integration
-
-When [user consent](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md#blocking-behaviors) is required, Teads ad approaches user consent in the following ways:
-
-- `CONSENT_POLICY_STATE.SUFFICIENT`: Serve a personalized ad to the user.
-- `CONSENT_POLICY_STATE.INSUFFICIENT`: Serve a non-personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Serve a personalized ad to the user.
-- `CONSENT_POLICY_STATE.UNKNOWN`: Serve a non-personalized ad to the user..
diff --git a/ads/temedya.js b/ads/temedya.js
deleted file mode 100644
index f239a9dedb3ea..0000000000000
--- a/ads/temedya.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function temedya(global, data) {
-  validateData(data, ['widgetid']);
-  global._temedya = global._temedya || {
-    widgetId: data['widgetid'],
-  };
-  global._temedya.AMPCallbacks = {
-    renderStart: global.context.renderStart,
-    noContentAvailable: global.context.noContentAvailable,
-  };
-  // load the temedya  AMP JS file script asynchronously
-  loadScript(
-    global,
-    'https://widget.cdn.vidyome.com/builds/loader-amp.js',
-    () => {},
-    global.context.noContentAvailable
-  );
-}
diff --git a/ads/torimochi.js b/ads/torimochi.js
deleted file mode 100644
index 2e628a5a54a6e..0000000000000
--- a/ads/torimochi.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * 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.
- */
-
-import {parseJson} from '../src/json';
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function torimochi(global, data) {
-  validateData(data, ['area', 'adtype']);
-
-  if (data.width < global.width) {
-    global.width = data.width;
-  }
-  global.height = data.height;
-  global.area = data['area'];
-  global.adtype = data['adtype'];
-  global.tcid = data['tcid'];
-  global.wid = data['wid'];
-  global.extra = parseJson(data['extra'] || '{}');
-  global.context.renderStart({width: global.width, height: global.height});
-
-  const url =
-    'https://asset.torimochi-ad.net/js/torimochi_ad_amp.min.js?v=' + Date.now();
-
-  writeScript(global, url);
-}
diff --git a/ads/tracdelight.js b/ads/tracdelight.js
deleted file mode 100644
index 0bc7568465ffa..0000000000000
--- a/ads/tracdelight.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function tracdelight(global, data) {
-  const mandatoryFields = ['widget_id', 'access_key'];
-  const optionalFields = ['mode'];
-
-  validateData(data, mandatoryFields, optionalFields);
-
-  global.tdData = data;
-  writeScript(global, 'https://scripts.tracdelight.io/amp.js');
-}
diff --git a/ads/triplelift.js b/ads/triplelift.js
deleted file mode 100644
index cddd6af052a1a..0000000000000
--- a/ads/triplelift.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateSrcPrefix} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function triplelift(global, data) {
-  const {src} = data;
-  validateSrcPrefix('https://ib.3lift.com/', src);
-  loadScript(global, src);
-}
diff --git a/ads/trugaze.js b/ads/trugaze.js
deleted file mode 100644
index c2d7683e18e7e..0000000000000
--- a/ads/trugaze.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- */
-export function trugaze(global) {
-  // For simplicity and flexibility, all validations are performed in the
-  // Trugaze's URL based on the data received
-  loadScript(global, 'https://cdn.trugaze.io/amp-init-v1.js');
-}
diff --git a/ads/uas.js b/ads/uas.js
deleted file mode 100644
index 81400f4fec4b5..0000000000000
--- a/ads/uas.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {hasOwn} from '../src/utils/object';
-import {loadScript, validateData} from '../3p/3p';
-import {setStyles} from '../src/style';
-
-/**
- * @param {!Object} theObject
- * @param {!Function} callback
- */
-function forEachOnObject(theObject, callback) {
-  if (typeof theObject === 'object' && theObject !== null) {
-    if (typeof callback === 'function') {
-      for (const key in theObject) {
-        if (hasOwn(theObject, key)) {
-          callback(key, theObject[key]);
-        }
-      }
-    }
-  }
-}
-
-/**
- * @param {!Window} global
- */
-function centerAd(global) {
-  const e = global.document.getElementById('c');
-  if (e) {
-    setStyles(e, {
-      top: '50%',
-      left: '50%',
-      bottom: '',
-      right: '',
-      transform: 'translate(-50%, -50%)',
-    });
-  }
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function uas(global, data) {
-  validateData(
-    data,
-    ['accId', 'adUnit', 'sizes'],
-    [
-      'locLat',
-      'locLon',
-      'locSrc',
-      'pageURL',
-      'targetings',
-      'extraParams',
-      'visibility',
-    ]
-  );
-  global.Phoenix = {EQ: []};
-  const uasDivId = 'uas-amp-slot';
-  global.document.write('<div id="' + uasDivId + '"></div>');
-  loadScript(global, 'https://ads.pubmatic.com/AdServer/js/phoenix.js', () => {
-    global.Phoenix.EQ.push(function () {
-      global.Phoenix.enableSingleRequestCallMode();
-      global.Phoenix.setInfo('AMP', 1); // Need to set the AMP flag
-      global.Phoenix.setInfo('ACCID', data.accId);
-      // Reading PAGEURL from sourceUrl or location.href
-      global.Phoenix.setInfo(
-        'PAGEURL',
-        global.context.sourceUrl || global.context.location.href
-      ); // eslint-disable-line max-len
-      data.pageURL && global.Phoenix.setInfo('PAGEURL', data.pageURL);
-      data.locLat && global.Phoenix.setInfo('LAT', data.locLat);
-      data.locLon && global.Phoenix.setInfo('LON', data.locLon);
-      data.locSrc && global.Phoenix.setInfo('LOC_SRC', data.locSrc);
-      const slot = global.Phoenix.defineAdSlot(
-        data.adUnit,
-        data.sizes,
-        uasDivId
-      );
-      slot.setVisibility(1);
-      forEachOnObject(data.targetings, function (key, value) {
-        slot.setTargeting(key, value);
-      });
-      forEachOnObject(data.extraParams, function (key, value) {
-        slot.setExtraParameters(key, value);
-      });
-      global.Phoenix.display(uasDivId);
-    });
-  });
-  centerAd(global);
-}
diff --git a/ads/ucfunnel.js b/ads/ucfunnel.js
deleted file mode 100644
index 20df072c10f33..0000000000000
--- a/ads/ucfunnel.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function ucfunnel(global, data) {
-  validateData(data, ['siteId']);
-  loadScript(window, 'https://ads.aralego.com/ampsdk');
-  window.context.renderStart();
-}
diff --git a/ads/unruly.js b/ads/unruly.js
deleted file mode 100644
index f75916aa8da6c..0000000000000
--- a/ads/unruly.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- * @param {!Function} [scriptLoader=loadScript]
- */
-export function unruly(global, data, scriptLoader = loadScript) {
-  validateData(data, ['siteId']);
-
-  global.unruly = global.unruly || {};
-  global.unruly.native = {
-    siteId: data.siteId,
-  };
-
-  scriptLoader(global, 'https://video.unrulymedia.com/native/native-loader.js');
-}
diff --git a/ads/uzou.js b/ads/uzou.js
deleted file mode 100644
index 3086c8008147c..0000000000000
--- a/ads/uzou.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-import {parseJson} from '../src/json';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function uzou(global, data) {
-  validateData(data, ['widgetParams'], []);
-
-  const prefixMap = {
-    test: 'dev-',
-    development: 'dev-',
-    staging: 'staging-',
-    production: '',
-  };
-
-  const widgetParams = parseJson(data['widgetParams']);
-  const akamaiHost = widgetParams['akamaiHost'] || 'speee-ad.akamaized.net';
-  const placementCode = widgetParams['placementCode'];
-  const mode = widgetParams['mode'] || 'production';
-  const entryPoint = `https://${prefixMap[mode]}${akamaiHost}/tag/${placementCode}/js/outer-frame.min.js`;
-
-  const d = global.document.createElement('div');
-  d.className = `uz-${placementCode} uz-ny`;
-
-  const container = global.document.getElementById('c');
-  container.appendChild(d);
-
-  const uzouInjector = {
-    url: fixedEncodeURIComponent(
-      widgetParams['url'] ||
-        global.context.canonicalUrl ||
-        global.context.sourceUrl
-    ),
-    referer: widgetParams['referer'] || global.context.referrer,
-  };
-  ['adServerHost', 'akamaiHost', 'iframeSrcPath'].forEach(function (elem) {
-    if (widgetParams[elem]) {
-      uzouInjector[elem] = widgetParams[elem];
-    }
-  });
-  global.UzouInjector = uzouInjector;
-
-  loadScript(global, entryPoint, () => {
-    global.context.renderStart();
-  });
-}
-
-/**
- * encode URI based on RFC 3986
- * @param {string} str url string
- * @return {*} TODO(#23582): Specify return type
- */
-function fixedEncodeURIComponent(str) {
-  return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
-    return '%' + c.charCodeAt(0).toString(16);
-  });
-}
diff --git a/ads/valuecommerce.js b/ads/valuecommerce.js
deleted file mode 100644
index 6bcf751b385a1..0000000000000
--- a/ads/valuecommerce.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function valuecommerce(global, data) {
-  validateData(data, ['pid'], ['sid', 'vcptn', 'om']);
-  global.vcParam = data;
-  writeScript(global, 'https://amp.valuecommerce.com/amp_bridge.js');
-}
diff --git a/ads/vdoai.js b/ads/vdoai.js
deleted file mode 100644
index 3535b62e879f2..0000000000000
--- a/ads/vdoai.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {loadScript} from '../3p/3p';
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function vdoai(global, data) {
-  /*eslint "google-camelcase/google-camelcase": 0*/
-  global.vdo_ai_ = {
-    unitData: data['unitid'],
-    unitTagname: data['tagname'],
-  };
-  loadScript(global, 'https://a.vdo.ai/core/dependencies_amp/remote.js');
-}
diff --git a/ads/vendors/1wo.js b/ads/vendors/1wo.js
new file mode 100644
index 0000000000000..726c80178bcd1
--- /dev/null
+++ b/ads/vendors/1wo.js
@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function _1wo(global, data) {
+  validateData(data, ['src', 'owoType', 'owoCode', 'owoMode']);
+  const {src} = data;
+  createContainer(global, data);
+  loadScript(global, src);
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function createContainer(global, data) {
+  const d = global.document.createElement('div');
+  d.setAttribute('data-owo-type', data['owoType']);
+  d.setAttribute('data-owo-code', data['owoCode']);
+  d.setAttribute('data-owo-mode', data['owoMode']);
+  global.document.getElementById('c').appendChild(d);
+}
diff --git a/ads/1wo.md b/ads/vendors/1wo.md
similarity index 93%
rename from ads/1wo.md
rename to ads/vendors/1wo.md
index 4897a5b0c97f7..6d9168553352d 100644
--- a/ads/1wo.md
+++ b/ads/vendors/1wo.md
@@ -20,10 +20,10 @@ Provides support for [1wo](https://welcome.1worldonline.com/) widgets.
 
 ### Required parameters
 
-- `src`
-- `data-owo-code`
-- `data-owo-type`
-- `data-owo-mode`
+-   `src`
+-   `data-owo-code`
+-   `data-owo-type`
+-   `data-owo-mode`
 
 ## Example
 
diff --git a/ads/vendors/24smi.js b/ads/vendors/24smi.js
new file mode 100644
index 0000000000000..f42eabc583e62
--- /dev/null
+++ b/ads/vendors/24smi.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData, validateSrcPrefix} from '../../3p/3p';
+
+const jsnPrefix = 'https://jsn.24smi.net/';
+const smiJs = `${jsnPrefix}smi.js`;
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function _24smi(global, data) {
+  validateData(data, [['blockid', 'src']]);
+  const {src} = data;
+  let blockId = data['blockid'];
+
+  if (!blockId) {
+    validateSrcPrefix(jsnPrefix, src);
+    blockId = getBlockId(src);
+  }
+
+  const element = createContainer(global);
+  (global.smiq = global.smiq || []).push({
+    element,
+    blockId,
+  });
+  loadScript(global, smiJs);
+}
+
+/**
+ * @param {!Window} global
+ * @return {Element}
+ */
+function createContainer(global) {
+  const d = global.document.createElement('div');
+  global.document.getElementById('c').appendChild(d);
+  return d;
+}
+
+/**
+ * @param {string} src
+ * @return {string}
+ */
+function getBlockId(src) {
+  const parts = src.split('/');
+  return parts[parts.length - 1].split('.')[0];
+}
diff --git a/ads/24smi.md b/ads/vendors/24smi.md
similarity index 98%
rename from ads/24smi.md
rename to ads/vendors/24smi.md
index 2a755dc04e3a5..5e5ea60b8c93f 100644
--- a/ads/24smi.md
+++ b/ads/vendors/24smi.md
@@ -35,4 +35,4 @@ For details on the configuration semantics, please contact [24smi](https://partn
 
 ### Required parameters
 
-- `src`
+-   `src`
diff --git a/ads/vendors/_fakedelayed_.js b/ads/vendors/_fakedelayed_.js
new file mode 100644
index 0000000000000..44461c5a00606
--- /dev/null
+++ b/ads/vendors/_fakedelayed_.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {setStyles} from '../../src/style';
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function fakeDelayed(global, data) {
+  validateData(data, ['src', 'bootstrapScript']);
+
+  const iframe = global.document.createElement('iframe');
+  iframe.setAttribute('id', 'creative');
+  iframe.setAttribute('frameborder', '0');
+  iframe.setAttribute('marginheight', '0');
+  iframe.setAttribute('marginwidth', '0');
+  iframe.setAttribute('scrolling', 'no');
+  iframe.setAttribute('src', data['src']);
+  setStyles(iframe, {
+    border: '0 none transparent',
+    position: 'relative',
+    height: '100%',
+    width: '100%',
+  });
+  global.document.getElementById('c').appendChild(iframe);
+
+  writeScript(global, data['bootstrapScript']);
+}
diff --git a/ads/vendors/_fakedelayed_.md b/ads/vendors/_fakedelayed_.md
new file mode 100644
index 0000000000000..9f96f17f49aee
--- /dev/null
+++ b/ads/vendors/_fakedelayed_.md
@@ -0,0 +1,39 @@
+<!---
+Copyright 2020 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.
+-->
+
+# fake-delayed
+
+A fake ad type that is used for local development and testing.
+
+## Example
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="fake-delayed"
+  data-bootstrap-script="/examples/amp-ad/sticky.js"
+  src="/examples/amp-ad/sticky-creative.html"
+>
+</amp-ad>
+```
+
+## Configuration
+
+### Required parameters
+
+-   `src` : The URL of the target creative to be displayed.
+-   `data-bootstrap-script` : The URL of a bootstraping JS code to be loaded in iframe s.
diff --git a/ads/vendors/_ping_.js b/ads/vendors/_ping_.js
new file mode 100644
index 0000000000000..b959624fe023a
--- /dev/null
+++ b/ads/vendors/_ping_.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {dev, devAssert, userAssert} from '../../src/log';
+import {validateData} from '../../3p/3p';
+
+/**
+ * A fake ad network integration that is mainly used for testing
+ * and demo purposes. This implementation gets stripped out in compiled
+ * production code.
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function _ping_(global, data) {
+  // for testing only. see #10628
+  global.networkIntegrationDataParamForTesting = data;
+
+  validateData(data, ['url'], ['valid', 'adHeight', 'adWidth', 'enableIo']);
+  userAssert(!data['error'], 'Fake user error!');
+  global.document.getElementById('c').textContent = data.ping;
+  global.ping = Object.create(null);
+
+  if (data.ad_container) {
+    devAssert(global.context.container == data.ad_container, 'wrong container');
+  }
+  if (data.valid == 'false') {
+    // Immediately send no-content for visual diff test
+    global.context.noContentAvailable();
+  }
+  if (data.valid && data.valid == 'true') {
+    const img = document.createElement('img');
+    if (data.url) {
+      img.setAttribute('src', data.url);
+      img.setAttribute('width', data.width);
+      img.setAttribute('height', data.height);
+    }
+    let width, height;
+    if (data.adHeight) {
+      img.setAttribute('height', data.adHeight);
+      height = Number(data.adHeight);
+    }
+    if (data.adWidth) {
+      img.setAttribute('width', data.adWidth);
+      width = Number(data.adWidth);
+    }
+    document.body.appendChild(img);
+    if (width || height) {
+      global.context.renderStart({width, height});
+    } else {
+      global.context.renderStart();
+    }
+    if (data.enableIo) {
+      global.context.observeIntersection(function (changes) {
+        /** @type {!Array} */ (changes).forEach(function (c) {
+          dev().info(
+            'AMP-AD',
+            'Intersection: (WxH)' +
+              `${c.intersectionRect.width}x${c.intersectionRect.height}`
+          );
+        });
+        // store changes to global.lastIO for testing purpose
+        global.ping.lastIO = changes[changes.length - 1];
+      });
+    }
+    global.context.getHtml('a', ['href'], function (html) {
+      dev().info('GET-HTML', html);
+    });
+    global.context.getConsentState(function (consentState) {
+      dev().info('GET-CONSENT-STATE', consentState);
+    });
+    if (global.context.consentSharedData) {
+      const TAG = 'consentSharedData';
+      dev().info(TAG, global.context.consentSharedData);
+    }
+    if (global.context.initialConsentValue) {
+      const TAG = 'consentStringValue';
+      dev().info(TAG, global.context.initialConsentValue);
+    }
+    if (global.context.initialConsentMetadata) {
+      const TAG = 'consentMetadata';
+      dev().info(TAG, global.context.initialConsentMetadata);
+    }
+  } else {
+    global.setTimeout(() => {
+      global.context.noContentAvailable();
+    }, 1000);
+  }
+}
diff --git a/ads/vendors/_ping_.md b/ads/vendors/_ping_.md
new file mode 100644
index 0000000000000..6e823d3a73724
--- /dev/null
+++ b/ads/vendors/_ping_.md
@@ -0,0 +1,57 @@
+<!---
+Copyright 2018 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.
+-->
+
+# \_PING\_
+
+A fake ad type that is only used for local development.
+
+## Example
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="_ping_"
+  data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+  data-valid="true"
+  data-enable-io="true"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact the [ad network](#configuration) or refer to their [documentation](#ping).
+
+### Required parameters
+
+-   `data-url` : Image ad with the image.
+
+### Optional parameters
+
+-   `data-valid` : Set to false to return a no fill ad.
+-   `data-ad-height` : Ad image size.
+-   `data-ad-width` : Ad image width.
+-   `data-enable-io` : Enable logging IntersectionObserver entry.
+
+## User Consent Integration
+
+When [user consent](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md#blocking-behaviors) is required. \_Ping\_ ad approaches user consent in the following ways:
+
+-   `CONSENT_POLICY_STATE.SUFFICIENT`: Serve a personalized ad to the user.
+-   `CONSENT_POLICY_STATE.INSUFFICIENT`: Serve a non-personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Serve a personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN`: Will not serve an ad to the user.
diff --git a/ads/vendors/a8.js b/ads/vendors/a8.js
new file mode 100644
index 0000000000000..ac0b72d12cf54
--- /dev/null
+++ b/ads/vendors/a8.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function a8(global, data) {
+  validateData(data, ['aid'], ['wid', 'eno', 'mid', 'mat', 'type']);
+  global.a8Param = data;
+  writeScript(global, 'https://statics.a8.net/amp/ad.js');
+}
diff --git a/ads/a8.md b/ads/vendors/a8.md
similarity index 92%
rename from ads/a8.md
rename to ads/vendors/a8.md
index 9c3840ed3cce2..e62312d4d879c 100644
--- a/ads/a8.md
+++ b/ads/vendors/a8.md
@@ -43,12 +43,12 @@ For configuration details and to generate your tags, please contact https://supp
 
 ### Required parameters
 
-- `data-aid`
+-   `data-aid`
 
 ### Optional parameters
 
-- `data-wid`
-- `data-eno`
-- `data-mid`
-- `data-mat`
-- `data-type`
+-   `data-wid`
+-   `data-eno`
+-   `data-mid`
+-   `data-mat`
+-   `data-type`
diff --git a/ads/vendors/a9.js b/ads/vendors/a9.js
new file mode 100644
index 0000000000000..a69833c4a9b50
--- /dev/null
+++ b/ads/vendors/a9.js
@@ -0,0 +1,200 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {hasOwn} from '../../src/core/types/object';
+import {loadScript, validateData, writeScript} from '../../3p/3p';
+import {parseJson} from '../../src/core/types/object/json';
+
+const mandatoryParams = [],
+  optionalParams = [
+    'ad_mode',
+    'placement',
+    'tracking_id',
+    'ad_type',
+    'marketplace',
+    'region',
+    'title',
+    'default_search_phrase',
+    'default_category',
+    'linkid',
+    'search_bar',
+    'search_bar_position',
+    'rows',
+    'design',
+    'asins',
+    'debug',
+    'aax_src_id',
+    'header_style',
+    'link_style',
+    'link_hover_style',
+    'text_style',
+    'random_permute',
+    'render_full_page',
+    'axf_exp_name',
+    'axf_treatment',
+    'disable_borders',
+    'attributes',
+    'carousel',
+    'feedback_enable',
+    'max_ads_in_a_row',
+    'list_price',
+    'prime',
+    'prime_position',
+    'widget_padding',
+    'strike_text_style',
+    'brand_text_link',
+    'brand_position',
+    'large_rating',
+    'rating_position',
+    'max_title_height',
+    'enable_swipe_on_mobile',
+    'overrides',
+    'ead',
+    'force_win_bid',
+    'fallback_mode',
+    'url',
+    'regionurl',
+    'divid',
+    'recomtype',
+    'adinstanceid',
+  ];
+const prefix = 'amzn_assoc_';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function a9(global, data) {
+  let i;
+  for (i = 0; i < 46; i++) {
+    optionalParams[i] = prefix + optionalParams[i];
+  }
+
+  validateData(data, mandatoryParams, optionalParams);
+
+  const publisherUrl = global.context.canonicalUrl || global.context.sourceUrl;
+
+  if (data.amzn_assoc_ad_mode) {
+    if (data.amzn_assoc_ad_mode === 'auto') {
+      if (data.adinstanceid && data.adinstanceid !== '') {
+        loadRecTag(global, data, publisherUrl);
+      } else {
+        loadSearTag(global, data, publisherUrl);
+      }
+    } else if (
+      data.amzn_assoc_ad_mode === 'search' ||
+      data.amzn_assoc_ad_mode === 'manual'
+    ) {
+      loadSearTag(global, data, publisherUrl);
+    }
+  } else {
+    loadSearTag(global, data, publisherUrl);
+  }
+}
+
+/**
+ * @param {!Object} data
+ * @return {string}
+ */
+function getURL(data) {
+  let url = 'https://z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US';
+  if (data.regionurl && data.regionurl !== '') {
+    url = data.regionurl;
+  }
+
+  return url;
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ * @param {string} publisherUrl
+ */
+function loadRecTag(global, data, publisherUrl) {
+  let url = getURL(data);
+  url += '&adInstanceId=' + data['adinstanceid'];
+  global['amzn_assoc_URL'] = publisherUrl;
+
+  if (data['recomtype'] === 'sync') {
+    writeScript(global, url);
+  } else if (data['recomtype'] === 'async') {
+    const d = global.document.createElement('div');
+    d.setAttribute('id', data['divid']);
+    global.document.getElementById('c').appendChild(d);
+    loadScript(global, url);
+  }
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ * @param {string} publisherUrl
+ */
+function loadSearTag(global, data, publisherUrl) {
+  /**
+   * Sets macro type.
+   * @param {string} type
+   */
+  function setMacro(type) {
+    if (!type) {
+      return;
+    }
+
+    if (hasOwn(data, type)) {
+      global[type] = data[type];
+    }
+  }
+
+  /**
+   * Sets the params.
+   */
+  function setParams() {
+    const url = getURL(data);
+    let i;
+
+    for (i = 0; i < 44; i++) {
+      setMacro(optionalParams[i]);
+    }
+
+    if (data.amzn_assoc_fallback_mode) {
+      const str = data.amzn_assoc_fallback_mode.split(',');
+      let types = str[0].split(':');
+      let typev = str[1].split(':');
+      types = parseJson(types[1]);
+      typev = parseJson(typev[1]);
+      global['amzn_assoc_fallback_mode'] = {
+        'type': types,
+        'value': typev,
+      };
+    }
+    if (data.amzn_assoc_url) {
+      global['amzn_assoc_URL'] = data['amzn_assoc_url'];
+    } else {
+      global['amzn_assoc_URL'] = publisherUrl;
+    }
+
+    writeScript(global, url);
+  }
+
+  /**
+   * Initializer.
+   */
+  function init() {
+    setParams();
+  }
+
+  init();
+}
diff --git a/ads/a9.md b/ads/vendors/a9.md
similarity index 97%
rename from ads/a9.md
rename to ads/vendors/a9.md
index 620cadce9c7d4..74a8a33fcdc2d 100644
--- a/ads/a9.md
+++ b/ads/vendors/a9.md
@@ -102,7 +102,7 @@ The A9 amp ad unit supports the Search, Recommendation and Custom ad widgets of
 
 ## Required parameters
 
-- `data-amzn_assoc_ad_mode` - specify the ad type as search, manual or auto (for recommendation ads)
+-   `data-amzn_assoc_ad_mode` - specify the ad type as search, manual or auto (for recommendation ads)
 
 ## Optional parameters
 
diff --git a/ads/vendors/accesstrade.js b/ads/vendors/accesstrade.js
new file mode 100644
index 0000000000000..c2bdfc053eab0
--- /dev/null
+++ b/ads/vendors/accesstrade.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function accesstrade(global, data) {
+  validateData(data, ['atops', 'atrotid']);
+  global.atParams = data;
+  writeScript(global, 'https://h.accesstrade.net/js/amp/amp.js');
+}
diff --git a/ads/accesstrade.md b/ads/vendors/accesstrade.md
similarity index 96%
rename from ads/accesstrade.md
rename to ads/vendors/accesstrade.md
index 49b14adcafdd3..c6356f47fdbfa 100644
--- a/ads/accesstrade.md
+++ b/ads/vendors/accesstrade.md
@@ -35,5 +35,5 @@ For configuration details and to generate your tags, please contact https://memb
 
 Supported parameters:
 
-- `data-atops`
-- `data-atrotid`
+-   `data-atops`
+-   `data-atrotid`
diff --git a/ads/vendors/adagio.js b/ads/vendors/adagio.js
new file mode 100755
index 0000000000000..6a2ba7d270b34
--- /dev/null
+++ b/ads/vendors/adagio.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adagio(global, data) {
+  validateData(data, ['sid', 'loc']);
+
+  const $neodata = global;
+
+  $neodata._adagio = {};
+  $neodata._adagio.amp = data;
+
+  loadScript($neodata, 'https://js-ssl.neodatagroup.com/adagio_amp.js');
+}
diff --git a/ads/adagio.md b/ads/vendors/adagio.md
similarity index 93%
rename from ads/adagio.md
rename to ads/vendors/adagio.md
index 46a90b589a656..360d1ce4e9ba6 100755
--- a/ads/adagio.md
+++ b/ads/vendors/adagio.md
@@ -37,7 +37,7 @@ For details on the configuration semantics, please contact the ad network or ref
 
 Supported parameters:
 
-- `data-sid`
-- `data-loc`
-- `data-keywords`
-- `data-uservars`
+-   `data-sid`
+-   `data-loc`
+-   `data-keywords`
+-   `data-uservars`
diff --git a/ads/vendors/adblade.js b/ads/vendors/adblade.js
new file mode 100644
index 0000000000000..60c10ffe56d92
--- /dev/null
+++ b/ads/vendors/adblade.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+const adbladeFields = ['width', 'height', 'cid'];
+const adbladeHostname = 'web.adblade.com';
+const industrybrainsHostname = 'web.industrybrains.com';
+
+/**
+ * @param {string} hostname
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function addAdiantUnit(hostname, global, data) {
+  validateData(data, adbladeFields, []);
+
+  // create a data element so our script knows what to do
+  const ins = global.document.createElement('ins');
+  ins.setAttribute('class', 'adbladeads');
+  ins.setAttribute('data-width', data.width);
+  ins.setAttribute('data-height', data.height);
+  ins.setAttribute('data-cid', data.cid);
+  ins.setAttribute('data-host', hostname);
+  ins.setAttribute('data-protocol', 'https');
+  ins.setAttribute('data-tag-type', 1);
+  global.document.getElementById('c').appendChild(ins);
+
+  ins.parentNode.addEventListener(
+    'eventAdbladeRenderStart',
+    global.context.renderStart()
+  );
+
+  // run our JavaScript code to display the ad unit
+  writeScript(global, 'https://' + hostname + '/js/ads/async/show.js');
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adblade(global, data) {
+  addAdiantUnit(adbladeHostname, global, data);
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function industrybrains(global, data) {
+  addAdiantUnit(industrybrainsHostname, global, data);
+}
diff --git a/ads/adblade.md b/ads/vendors/adblade.md
similarity index 94%
rename from ads/adblade.md
rename to ads/vendors/adblade.md
index 093cb27c4be31..620f791e9780b 100644
--- a/ads/adblade.md
+++ b/ads/vendors/adblade.md
@@ -36,6 +36,6 @@ For semantics of configuration, see [Adblade's documentation](https://www.adblad
 
 Supported parameters:
 
-- `data-cid`
-- `data-width`
-- `data-height`
+-   `data-cid`
+-   `data-width`
+-   `data-height`
diff --git a/ads/vendors/adbutler.js b/ads/vendors/adbutler.js
new file mode 100644
index 0000000000000..1c260a9e78d05
--- /dev/null
+++ b/ads/vendors/adbutler.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adbutler(global, data) {
+  validateData(
+    data,
+    ['account', 'zone', 'width', 'height'],
+    ['keyword', 'place']
+  );
+
+  data['place'] = data['place'] || 0;
+
+  const placeholderID = 'placement_' + data['zone'] + '_' + data['place'];
+
+  // placeholder div
+  const d = global.document.createElement('div');
+  d.setAttribute('id', placeholderID);
+  global.document.getElementById('c').appendChild(d);
+
+  global.AdButler = global.AdButler || {};
+  global.AdButler.ads = global.AdButler.ads || [];
+
+  global.AdButler.ads.push({
+    handler(opt) {
+      global.AdButler.register(
+        data['account'],
+        data['zone'],
+        [data['width'], data['height']],
+        placeholderID,
+        opt
+      );
+    },
+    opt: {
+      place: data['place'],
+      pageKey: global.context.pageViewId,
+      keywords: data['keyword'],
+      domain: 'servedbyadbutler.com',
+      click: 'CLICK_MACRO_PLACEHOLDER',
+    },
+  });
+  loadScript(global, 'https://servedbyadbutler.com/app.js');
+}
diff --git a/ads/adbutler.md b/ads/vendors/adbutler.md
similarity index 91%
rename from ads/adbutler.md
rename to ads/vendors/adbutler.md
index 889c1fcc388bb..777e20b2d9f57 100644
--- a/ads/adbutler.md
+++ b/ads/vendors/adbutler.md
@@ -37,12 +37,12 @@ For details on the configuration semantics, please see [AdButler's documentation
 
 ### Required parameters
 
-- `width`
-- `height`
-- `data-account`
-- `data-zone`
+-   `width`
+-   `height`
+-   `data-account`
+-   `data-zone`
 
 ### Optional parameters
 
-- `data-place`
-- `data-keyword`
+-   `data-place`
+-   `data-keyword`
diff --git a/ads/vendors/adform.js b/ads/vendors/adform.js
new file mode 100644
index 0000000000000..93c7be9452e06
--- /dev/null
+++ b/ads/vendors/adform.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {validateData, validateSrcPrefix, writeScript} from '../../3p/3p';
+
+// Valid adform ad source hosts
+const hosts = {
+  track: 'https://track.adform.net',
+  adx: 'https://adx.adform.net',
+  a2: 'https://a2.adform.net',
+  adx2: 'https://adx2.adform.net',
+  asia: 'https://asia.adform.net',
+  adx3: 'https://adx3.adform.net',
+};
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adform(global, data) {
+  validateData(data, [['src', 'bn', 'mid']]);
+  global.Adform = {ampData: data};
+  const {bn, mid, src} = data;
+  let url;
+
+  // Custom ad url using "data-src" attribute
+  if (src) {
+    validateSrcPrefix(
+      Object.keys(hosts).map((type) => hosts[type]),
+      src
+    );
+    url = src;
+  }
+  // Ad tag using "data-bn" attribute
+  else if (bn) {
+    url = hosts.track + '/adfscript/?bn=' + encodeURIComponent(bn) + ';msrc=1';
+  }
+  // Ad placement using "data-mid" attribute
+  else if (mid) {
+    url = hosts.adx + '/adx/?mid=' + encodeURIComponent(mid);
+  }
+
+  writeScript(global, url);
+}
diff --git a/ads/adform.md b/ads/vendors/adform.md
similarity index 91%
rename from ads/adform.md
rename to ads/vendors/adform.md
index 503c2fe76f602..70d82a8a1e183 100644
--- a/ads/adform.md
+++ b/ads/vendors/adform.md
@@ -51,7 +51,7 @@ information on how to get required ad tag or placement IDs.
 
 Only one of the mentioned parameters should be used at the same time.
 
-- `data-bn`
-- `data-mid`
-- `src`: must use https protocol and must be from one of the
-  allowed Adform hosts.
+-   `data-bn`
+-   `data-mid`
+-   `src`: must use https protocol and must be from one of the
+    allowed Adform hosts.
diff --git a/ads/vendors/adfox.js b/ads/vendors/adfox.js
new file mode 100644
index 0000000000000..ec5758f39cb68
--- /dev/null
+++ b/ads/vendors/adfox.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+import {yandex} from './yandex';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adfox(global, data) {
+  validateData(data, ['adfoxParams', 'ownerId']);
+  loadScript(global, 'https://yastatic.net/pcode/adfox/loader.js', () =>
+    initAdFox(global, data)
+  );
+}
+
+/**
+ * @param {!Window} global
+ * @param {Object} data
+ */
+function initAdFox(global, data) {
+  const params = JSON.parse(data.adfoxParams);
+
+  createContainer(global, 'adfox_container');
+
+  global.Ya.adfoxCode.create({
+    ownerId: data.ownerId,
+    containerId: 'adfox_container',
+    params,
+    onLoad: (data, onRender, onError) => {
+      checkLoading(global, data, onRender, onError);
+    },
+    onRender: () => global.context.renderStart(),
+    onError: () => global.context.noContentAvailable(),
+    onStub: () => global.context.noContentAvailable(),
+  });
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ * @param {!Object} onRender
+ * @param {!Object} onError
+ * @return {boolean}
+ */
+function checkLoading(global, data, onRender, onError) {
+  if (data.bundleName === 'banner.direct') {
+    const dblParams = {
+      blockId: data.bundleParams.blockId,
+      data: data.bundleParams.data,
+      onRender,
+      onError,
+    };
+
+    yandex(global, dblParams);
+    return false;
+  }
+  return true;
+}
+
+/**
+ * @param {!Window} global
+ * @param {string} id
+ */
+function createContainer(global, id) {
+  const container = global.document.createElement('div');
+  container.setAttribute('id', id);
+  global.document.getElementById('c').appendChild(container);
+}
diff --git a/ads/adfox.md b/ads/vendors/adfox.md
similarity index 95%
rename from ads/adfox.md
rename to ads/vendors/adfox.md
index 52c279952173c..46397e1f70e20 100644
--- a/ads/adfox.md
+++ b/ads/vendors/adfox.md
@@ -35,5 +35,5 @@ For details on the configuration semantics, please see [AdFox's documentation](h
 
 ### Required parameters
 
-- `data-owner-id`
-- `data-adfox-params`
+-   `data-owner-id`
+-   `data-adfox-params`
diff --git a/ads/vendors/adgeneration.js b/ads/vendors/adgeneration.js
new file mode 100644
index 0000000000000..6d53191c45e52
--- /dev/null
+++ b/ads/vendors/adgeneration.js
@@ -0,0 +1,78 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adgeneration(global, data) {
+  validateData(data, ['id'], ['targetid', 'displayid', 'adtype', 'option']);
+
+  // URL encoding
+  const option = data.option ? encodeQueryValue(data.option) : null;
+
+  const url =
+    'https://i.socdm.com/sdk/js/adg-script-loader.js?' +
+    'id=' +
+    encodeURIComponent(data.id) +
+    '&width=' +
+    encodeURIComponent(data.width) +
+    '&height=' +
+    encodeURIComponent(data.height) +
+    '&async=true' +
+    '&adType=' +
+    validateAdType(data.adType) +
+    '&displayid=' +
+    (data.displayid ? encodeURIComponent(data.displayid) : '1') +
+    '&tagver=2.0.0' +
+    (data.targetid ? '&targetID=' + encodeURIComponent(data.targetid) : '') +
+    (option ? '&' + option : '');
+  writeScript(global, url);
+}
+
+/**
+ * URL encoding of query string
+ * @param {string} str
+ * @return {string}
+ */
+function encodeQueryValue(str) {
+  return str
+    .split('&')
+    .map((v) => {
+      const key = v.split('=')[0],
+        val = v.split('=')[1];
+      return encodeURIComponent(key) + '=' + encodeURIComponent(val);
+    })
+    .join('&');
+}
+/**
+ * If adtype is "RECTANGLE", replace it with "RECT"
+ * @param {string} str
+ * @return {string}
+ */
+function validateAdType(str) {
+  if (str != null) {
+    const upperStr = encodeURIComponent(str.toUpperCase());
+    if (upperStr === 'RECTANGLE') {
+      return 'RECT';
+    } else {
+      return upperStr;
+    }
+  }
+  return 'FREE';
+}
diff --git a/ads/adgeneration.md b/ads/vendors/adgeneration.md
similarity index 90%
rename from ads/adgeneration.md
rename to ads/vendors/adgeneration.md
index 1c23a724f6e93..be67717dbec1e 100644
--- a/ads/adgeneration.md
+++ b/ads/vendors/adgeneration.md
@@ -28,8 +28,8 @@ For details on the configuration semantics, please see [Ad Generation's document
 
 Supported parameters:
 
-- `data-id`
-- `data-targetid`
-- `data-displayid`
-- `data-adtype`
-- `data-option`
+-   `data-id`
+-   `data-targetid`
+-   `data-displayid`
+-   `data-adtype`
+-   `data-option`
diff --git a/ads/vendors/adglare.js b/ads/vendors/adglare.js
new file mode 100644
index 0000000000000..5cf57c22268d1
--- /dev/null
+++ b/ads/vendors/adglare.js
@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adglare(global, data) {
+  validateData(data, ['host', 'zid'], ['keywords']);
+
+  const adglareSpan = global.document.createElement('span');
+  adglareSpan.id = 'zone' + data.zid;
+  global.document.getElementById('c').appendChild(adglareSpan);
+
+  let url =
+    'https://' +
+    data.host +
+    '.engine.adglare.net/?' +
+    data.zid +
+    '&ampad&rnd=' +
+    Date.now() +
+    Math.random();
+  if (data.keywords) {
+    url = url + '&keywords=' + data.keywords;
+  }
+
+  writeScript(global, url);
+}
diff --git a/ads/adglare.md b/ads/vendors/adglare.md
similarity index 95%
rename from ads/adglare.md
rename to ads/vendors/adglare.md
index 00c0adc62f97e..1ad848ac4f6f6 100644
--- a/ads/adglare.md
+++ b/ads/vendors/adglare.md
@@ -37,9 +37,9 @@ For more information, read AdGlare's blog article about [AMP Ad Tags](https://ww
 
 ### Required parameters
 
-- `data-host`
-- `data-zid`
+-   `data-host`
+-   `data-zid`
 
 ### Optional parameters
 
-- `data-keywords`
+-   `data-keywords`
diff --git a/ads/vendors/adhese.js b/ads/vendors/adhese.js
new file mode 100644
index 0000000000000..9cdff96194494
--- /dev/null
+++ b/ads/vendors/adhese.js
@@ -0,0 +1,100 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adhese(global, data) {
+  validateData(data, ['location', 'format', 'account', 'requestType']);
+  let targetParam = '';
+  const gctx = global.context;
+
+  if (data['targeting']) {
+    const targetList = data['targeting'];
+    for (const category in targetList) {
+      targetParam += encodeURIComponent(category);
+      const targets = targetList[category];
+      for (let x = 0; x < targets.length; x++) {
+        targetParam +=
+          encodeURIComponent(targets[x]) + (targets.length - 1 > x ? ';' : '');
+      }
+      targetParam += '/';
+    }
+  }
+
+  if (gctx.consentSharedData) {
+    if (
+      gctx.consentSharedData.consentStateValue &&
+      gctx.consentSharedData.consentStateValue == 'accepted'
+    ) {
+      targetParam += 'tlall/';
+    }
+    if (
+      gctx.consentSharedData.consentString &&
+      gctx.consentSharedData.consentString !== ''
+    ) {
+      targetParam += 'xt' + gctx.consentSharedData.consentString + '/';
+    }
+  }
+
+  targetParam += '?t=' + Date.now();
+  writeScript(
+    window,
+    'https://ads-' +
+      encodeURIComponent(data['account']) +
+      '.adhese.com/' +
+      encodeURIComponent(data['requestType']) +
+      '/sl' +
+      encodeURIComponent(data['location']) +
+      encodeURIComponent(data['position']) +
+      '-' +
+      encodeURIComponent(data['format']) +
+      '/' +
+      targetParam
+  );
+
+  const co = global.document.querySelector('#c');
+  co.width = data['width'];
+  co.height = data['height'];
+  co.addEventListener('adhLoaded', getAdInfo.bind(null, global), false);
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} e
+ */
+function getAdInfo(global, e) {
+  if (
+    e.detail.isReady &&
+    e.detail.width == e.target.width &&
+    e.detail.height == e.target.height
+  ) {
+    global.context.renderStart();
+  } else if (
+    e.detail.isReady &&
+    (e.detail.width != e.target.width || e.detail.height != e.target.height)
+  ) {
+    global.context.renderStart({
+      width: e.detail.width,
+      height: e.detail.height,
+    });
+  } else {
+    global.context.noContentAvailable();
+  }
+}
diff --git a/ads/adhese.md b/ads/vendors/adhese.md
similarity index 88%
rename from ads/adhese.md
rename to ads/vendors/adhese.md
index 5844ce2ecb79d..d59fcafaa45e9 100644
--- a/ads/adhese.md
+++ b/ads/vendors/adhese.md
@@ -59,24 +59,24 @@ For details on the configuration semantics, see the [Adhese website](https://www
 
 ### Required parameters
 
-- `data-account`
-- `data-request_type`
-- `data-location`
-- `data-position`
-- `data-format`
+-   `data-account`
+-   `data-request_type`
+-   `data-location`
+-   `data-position`
+-   `data-format`
 
 ### Optional parameter
 
 The following optional parameter is supported via the 'json' attribute:
 
-- `targeting`
+-   `targeting`
 
 ## User Consent Integration
 
 Adhese consent is linked to the window.context.consentSharedData object:
 
-- consentStateValue which contains the consent state
-- consentString which contains the IAB consent string
+-   consentStateValue which contains the consent state
+-   consentString which contains the IAB consent string
 
 If the consentStateValue is set to 'accepted', our consent parameter is set to 'all'.
 When avaiable, the consentString will always be send to the adserver.
diff --git a/ads/vendors/adincube.js b/ads/vendors/adincube.js
new file mode 100644
index 0000000000000..45641961dc8a6
--- /dev/null
+++ b/ads/vendors/adincube.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {hasOwn} from '../../src/core/types/object';
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adincube(global, data) {
+  validateData(data, ['adType', 'siteKey'], ['params']);
+
+  let url = global.context.location.protocol;
+  url += '//tag.adincube.com/tag/1.0/next?';
+  url += 'ad_type=' + encodeURIComponent(String(data['adType']).toUpperCase());
+  url += '&ad_subtype=' + encodeURIComponent(data['width']);
+  url += 'x' + encodeURIComponent(data['height']);
+  url += '&site_key=' + encodeURIComponent(data['siteKey']);
+  url += '&r=' + encodeURIComponent(global.context.referrer);
+  url += '&h=' + encodeURIComponent(global.context.location.href);
+  url += '&c=amp';
+  url += '&t=' + Date.now();
+
+  if (data['params']) {
+    url += parseParams(data['params']);
+  }
+
+  loadScript(global, url);
+}
+
+/**
+ * @param {string} data
+ * @return {string}
+ */
+function parseParams(data) {
+  try {
+    const params = JSON.parse(data);
+    let queryParams = '';
+    for (const p in params) {
+      if (hasOwn(params, p)) {
+        queryParams += '&' + p + '=' + encodeURIComponent(params[p]);
+      }
+    }
+    return queryParams;
+  } catch (e) {
+    return '';
+  }
+}
diff --git a/ads/adincube.md b/ads/vendors/adincube.md
similarity index 91%
rename from ads/adincube.md
rename to ads/vendors/adincube.md
index bb68deb2b32ca..23b7f2976d13f 100644
--- a/ads/adincube.md
+++ b/ads/vendors/adincube.md
@@ -60,9 +60,9 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-ad-type` - type of the ad
-- `data-site-key` - unique key attached to a website
+-   `data-ad-type` - type of the ad
+-   `data-site-key` - unique key attached to a website
 
 ### Optional parameters
 
-- `data-params` - additional config parameters
+-   `data-params` - additional config parameters
diff --git a/ads/vendors/adition.js b/ads/vendors/adition.js
new file mode 100644
index 0000000000000..ff71263c26b67
--- /dev/null
+++ b/ads/vendors/adition.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adition(global, data) {
+  validateData(data, ['version']);
+  global.data = data;
+  writeScript(
+    global,
+    'https://imagesrv.adition.com/js/amp/v' +
+      encodeURIComponent(data['version']) +
+      '.js'
+  );
+}
diff --git a/ads/adition.md b/ads/vendors/adition.md
similarity index 97%
rename from ads/adition.md
rename to ads/vendors/adition.md
index 35c512d42c9c0..c2dcdd3535342 100644
--- a/ads/adition.md
+++ b/ads/vendors/adition.md
@@ -39,5 +39,5 @@ For semantics of configuration and examples, sign-in and see the [ADITION docume
 
 Supported parameters:
 
-- `data-version`
-- `data-wp_id`
+-   `data-version`
+-   `data-wp_id`
diff --git a/ads/vendors/adman.js b/ads/vendors/adman.js
new file mode 100644
index 0000000000000..8148a232c85fd
--- /dev/null
+++ b/ads/vendors/adman.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adman(global, data) {
+  validateData(data, ['ws', 'host', 's'], []);
+
+  const script = global.document.createElement('script');
+  script.setAttribute('data-ws', data.ws);
+  script.setAttribute('data-h', data.host);
+  script.setAttribute('data-s', data.s);
+  script.setAttribute('data-tech', 'amp');
+
+  script.src = 'https://static.adman.gr/adman.js';
+
+  global.document.body.appendChild(script);
+}
diff --git a/ads/adman.md b/ads/vendors/adman.md
similarity index 88%
rename from ads/adman.md
rename to ads/vendors/adman.md
index 8c10d8dd2f44c..29cd5f818ea0d 100644
--- a/ads/adman.md
+++ b/ads/vendors/adman.md
@@ -36,6 +36,6 @@ For details on the configuration semantics, please see [Adman documentation](htt
 
 ### Required parameters
 
-- `data-ws` - Ad unit unique id
-- `data-s` - Ad unit size
-- `data-host` - SSL enabled Adman service domain
+-   `data-ws` - Ad unit unique id
+-   `data-s` - Ad unit size
+-   `data-host` - SSL enabled Adman service domain
diff --git a/ads/vendors/admanmedia.js b/ads/vendors/admanmedia.js
new file mode 100644
index 0000000000000..b2827f9415553
--- /dev/null
+++ b/ads/vendors/admanmedia.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function admanmedia(global, data) {
+  validateData(data, ['id']);
+
+  const encodedId = encodeURIComponent(data.id);
+  loadScript(
+    global,
+    `https://pub.admanmedia.com/go?id=${encodedId}`,
+    () => {
+      global.context.renderStart();
+    },
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/admanmedia.md b/ads/vendors/admanmedia.md
similarity index 88%
rename from ads/admanmedia.md
rename to ads/vendors/admanmedia.md
index d26f501172a14..903b6ce181961 100644
--- a/ads/admanmedia.md
+++ b/ads/vendors/admanmedia.md
@@ -21,7 +21,7 @@ Please visit [www.admanmedia.com](http://www.admanmedia.com) for more details.
 ## Example
 
 ```html
-<amp-ad width="300" height="250" type="admanmedia" data-id="8e916419"> </amp-ad>
+<amp-ad width="300" height="250" type="admanmedia" data-id="2967"> </amp-ad>
 ```
 
 ## Configuration
@@ -30,4 +30,4 @@ For details on the configuration semantics, see [Admanmedia documentation](http:
 
 ### Required parameters
 
-- `data-id` - Ad unit unique id
+-   `data-id` - Ad unit unique id
diff --git a/ads/vendors/admixer.js b/ads/vendors/admixer.js
new file mode 100644
index 0000000000000..66f3c3b74aed0
--- /dev/null
+++ b/ads/vendors/admixer.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {tryParseJson} from '../../src/core/types/object/json';
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function admixer(global, data) {
+  validateData(data, ['zone'], ['sizes']);
+  /**
+   * @type {Object}
+   */
+  const payload = {
+    imps: [],
+    referrer: window.context.referrer,
+  };
+  const imp = {
+    params: {
+      zone: data.zone,
+    },
+  };
+  if (data.sizes) {
+    imp.sizes = tryParseJson(data.sizes);
+  }
+  payload.imps.push(imp);
+  const json = JSON.stringify(/** @type {JsonObject} */ (payload));
+  writeScript(global, 'https://inv-nets.admixer.net/ampsrc.js?data=' + json);
+}
diff --git a/ads/admixer.md b/ads/vendors/admixer.md
similarity index 96%
rename from ads/admixer.md
rename to ads/vendors/admixer.md
index 33a845761a5a8..0211a527ba425 100644
--- a/ads/admixer.md
+++ b/ads/vendors/admixer.md
@@ -35,8 +35,8 @@ For configuration semantics, see [Admixer documentation](http://docs.admixer.net
 
 ### Required parameters
 
-- `data-zone`
+-   `data-zone`
 
 ### Optional parameters
 
-- `data-sizes`
+-   `data-sizes`
diff --git a/ads/vendors/adnuntius.js b/ads/vendors/adnuntius.js
new file mode 100644
index 0000000000000..23104f86c931b
--- /dev/null
+++ b/ads/vendors/adnuntius.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adnuntius(global, data) {
+  validateData(data, ['auId']);
+
+  loadScript(global, 'https://cdn.adnuntius.com/adn.js', () => {
+    global.adn = global.adn || {};
+    global.adn.calls = global.adn.calls || [];
+    global.adn.calls.push(() => {
+      global.adn.request({
+        amp: {data},
+      });
+    });
+  });
+}
diff --git a/ads/vendors/adnuntius.md b/ads/vendors/adnuntius.md
new file mode 100644
index 0000000000000..b5e57a2dd8374
--- /dev/null
+++ b/ads/vendors/adnuntius.md
@@ -0,0 +1,63 @@
+<!---
+Copyright 2020 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.
+-->
+
+# Adnuntius
+
+Adnuntius provides a wide array of features alongside their AMP integration.
+
+For configuration details and to generate your tags, please refer to
+[the Adnuntius documentation](https://docs.adnuntius.com) or [your account](https://admin.adnuntius.com).
+
+## Simplest Call
+
+```html
+<amp-ad width="300" height="250"
+        type="adnuntius"
+        data-au-id="00000000000dbf78">
+</amp-ad>
+```
+
+## Call with All Options Enabled
+
+```html
+<amp-ad width="300" height="250"
+        type="adnuntius"
+        data-au-id="00000000000dbf78"
+        data-user-id="12341234"
+        data-site-id="56785678"
+        data-floor-price='{"amount":1.213,"currency": "AUD"}'
+        data-kv='[{"colors": ["red", "blue"]}]'
+        data-c='["sport/golf", "news"]'
+        data-latitude="123.4567"
+        data-longitude="234.5678"
+        data-segments='["1234", "5678"]'>
+</amp-ad>
+```
+
+## Configuration
+
+### Required parameters
+
+-   `width`: Width of the ad unit that will be filled
+-   `height`: Height of the ad unit that will be filled
+-   `type`: Ensures the ad request goes via Adnuntius
+-   `data-au-id`: Specify your ad unit ID
+
+### Optional parameters
+
+For the remaining optional parameters listed above, refer to the
+[Adnuntius documentation](https://docs.adnuntius.com/adnuntius-advertising/requesting-ads/intro/adn-request) for the
+relevant information.
diff --git a/ads/vendors/adocean.js b/ads/vendors/adocean.js
new file mode 100644
index 0000000000000..787ed70fb64f3
--- /dev/null
+++ b/ads/vendors/adocean.js
@@ -0,0 +1,350 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {CONSENT_POLICY_STATE} from '../../src/core/constants/consent-state';
+import {computeInMasterFrame, validateData, writeScript} from '../../3p/3p';
+import {parseJson} from '../../src/core/types/object/json';
+
+/**
+ * @const {Object<string, string>}
+ */
+const ADO_JS_PATHS = {
+  'sync': '/files/js/ado.js',
+  'buffered': '/files/js/ado.FIF.test.js',
+};
+
+/**
+ * @param {string} str
+ * @return {boolean}
+ */
+function isFalseString(str) {
+  return /^(?:false|off)?$/i.test(str);
+}
+
+/**
+ * @param {string} mode
+ * @param {!Window} global
+ * @param {boolean} consent
+ */
+function setupAdoConfig(mode, global, consent) {
+  if (global['ado']) {
+    const config = {
+      mode: mode == 'sync' ? 'old' : 'new',
+      protocol: 'https:',
+      fif: {
+        enabled: mode != 'sync',
+      },
+      consent,
+    };
+
+    global['ado']['config'](config);
+  }
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function setupPreview(global, data) {
+  if (global.ado && data.aoPreview && !isFalseString(data.aoPreview)) {
+    global.ado.preview({
+      enabled: true,
+    });
+  }
+}
+
+/**
+ * @param {string} str
+ * @return {Object|undefined}
+ * @throws {SyntaxError}
+ */
+function parseJSONObj(str) {
+  return str.match(/^\s*{/) ? parseJson(str) : undefined;
+}
+
+/**
+ * @param {string} keys
+ * @return {string|undefined}
+ */
+function buildKeys(keys) {
+  return keys || undefined;
+}
+
+/**
+ * @param {string} vars
+ * @return {Object|string|undefined}
+ */
+function buildVars(vars) {
+  try {
+    return parseJSONObj(vars);
+  } catch (e) {
+    return vars || undefined;
+  }
+}
+
+/**
+ * @param {string} clusters
+ * @return {Object|undefined}
+ */
+function buildClusters(clusters) {
+  try {
+    return parseJSONObj(clusters);
+  } catch (e) {
+    // return undefined
+  }
+}
+
+/** @type {number} */
+let runSyncCount = 0;
+
+/**
+ * @param {!Window} global
+ * @param {function()} cb
+ */
+function runSync(global, cb) {
+  global['__aoPrivFnct' + ++runSyncCount] = cb;
+  global.document.write(
+    // eslint-disable-next-line no-useless-concat
+    '<' + 'script>__aoPrivFnct' + runSyncCount + '();<' + '/script>'
+  );
+}
+
+/**
+ * @param {string} mode
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function appendPlacement(mode, global, data) {
+  const doc = global.document;
+  const placement = doc.createElement('div');
+  placement.id = data['aoId'];
+
+  const dom = doc.getElementById('c');
+  dom.appendChild(placement);
+
+  const config = {
+    id: data['aoId'],
+    server: data['aoEmitter'],
+    keys: buildKeys(data['aoKeys']),
+    vars: buildVars(data['aoVars']),
+    clusters: buildClusters(data['aoClusters']),
+  };
+
+  if (global.ado) {
+    if (mode == 'sync') {
+      runSync(global, function () {
+        global['ado']['placement'](config);
+      });
+
+      runSync(global, function () {
+        if (!config['_hasAd']) {
+          window.context.noContentAvailable();
+        }
+      });
+    } else {
+      global['ado']['onAd'](data['aoId'], function (isAd) {
+        if (!isAd) {
+          window.context.noContentAvailable();
+        }
+      });
+      global['ado']['placement'](config);
+    }
+  }
+}
+
+/**
+ * @param {string} masterId
+ * @param {!Object} data
+ * @param {!Window} global
+ * @param {Function} callback
+ */
+function executeMaster(masterId, data, global, callback) {
+  const config = {
+    id: masterId,
+    server: data['aoEmitter'],
+    keys: buildKeys(data['aoKeys']),
+    vars: buildVars(data['aoVars']),
+    clusters: buildClusters(data['aoClusters']),
+  };
+
+  if (global['ado']) {
+    global['ado']['onEmit']((masterId, instanceId, codes) => {
+      callback(codes);
+    });
+
+    global['ado']['master'](config);
+  }
+}
+
+/**
+ *
+ * @param {string} masterId
+ * @param {!Object} data
+ * @param {!Window} global
+ * @param {Function} callback
+ */
+function requestCodes(masterId, data, global, callback) {
+  const slaveId = data['aoId'];
+
+  computeInMasterFrame(
+    global,
+    'ao-master-exec',
+    (done) => {
+      executeMaster(masterId, data, global, (codes) => done(codes));
+    },
+    (codes) => {
+      const creative = codes[slaveId];
+      if (codes[slaveId + '_second_phase']) {
+        creative['code'] += '\n' + codes[slaveId + '_second_phase']['code'];
+      }
+      callback(creative);
+    }
+  );
+}
+
+class AdoBuffer {
+  /**
+   *
+   * @param {Object} container
+   * @param {!Window} global
+   */
+  constructor(container, global) {
+    this.container = container;
+    this.global = global;
+    this.callback = null;
+  }
+
+  /**
+   *
+   * @param {Function} callback
+   */
+  render(callback) {
+    this.callback = callback;
+
+    if (this.global.document.readyState === 'loading') {
+      this.global.document.addEventListener(
+        'DOMContentLoaded',
+        this._init.bind(this)
+      );
+    } else {
+      this._init();
+    }
+  }
+
+  /**
+   */
+  _init() {
+    const ado = this.global['ado'];
+    const gao = this.global['gao'];
+
+    if (ado['busy'] || (typeof gao !== 'undefined' && gao['busy'])) {
+      ado['queue'].unshift(this._execute.bind(this));
+    } else {
+      this._execute();
+    }
+  }
+
+  /**
+   */
+  _execute() {
+    const adoElement = new this.global['AdoElement']({
+      'id': this.container.id,
+      'orgId': this.container.id,
+      'clearId': this.container.id,
+      '_isBuffer': true,
+    });
+    this.global['AdoElems'] = this.global['AdoElems'] || [];
+    this.global['AdoElems'].push(adoElement);
+    adoElement['getDOMElement']();
+    adoElement['initBuffor']();
+    this.global['ado']['elems'][this.container.id] = adoElement;
+
+    this.callback(adoElement);
+
+    adoElement['rewriteBuffor']();
+    adoElement['dispatch']();
+  }
+}
+
+/**
+ *
+ * @param {string} slaveId
+ * @param {!Object} config
+ * @param {!Window} global
+ */
+function executeSlave(slaveId, config, global) {
+  const doc = global.document;
+  const placement = doc.createElement('div');
+  placement['id'] = slaveId;
+
+  const dom = doc.getElementById('c');
+  dom.appendChild(placement);
+
+  if (global['ado']) {
+    if (!config || config['isEmpty']) {
+      global.context.noContentAvailable();
+    } else {
+      const buffer = new AdoBuffer(placement, global);
+      buffer.render(() => {
+        new Function(config['sendHitsDef'] + config['code'])();
+      });
+    }
+  }
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adocean(global, data) {
+  validateData(
+    data,
+    ['aoEmitter', 'aoId'],
+    ['aoMode', 'aoPreview', 'aoKeys', 'aoVars', 'aoClusters', 'aoMaster']
+  );
+
+  const masterId = data['aoMaster'];
+  const mode = data['aoMode'] !== 'sync' || masterId ? 'buffered' : 'sync';
+  const adoUrl = 'https://' + data['aoEmitter'] + ADO_JS_PATHS[mode];
+  const ctx = global.context;
+
+  /*
+   * INSUFFICIENT and UNKNOWN should be treated as INSUFFICIENT
+   * not defined states should be treated as INSUFFICIENT
+   */
+  const consent =
+    ctx.initialConsentState === null /* tags without data-block-on-consent */ ||
+    ctx.initialConsentState === CONSENT_POLICY_STATE.SUFFICIENT ||
+    ctx.initialConsentState === CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED;
+
+  writeScript(global, adoUrl, () => {
+    setupAdoConfig(mode, global, consent);
+    setupPreview(global, data);
+
+    if (masterId) {
+      const ado = global['ado'];
+      if (ado && ado['features'] && ado['features']['passback']) {
+        ado['features']['passback'] = false;
+      }
+
+      requestCodes(masterId, data, global, (codes) => {
+        executeSlave(data['aoId'], codes, global);
+      });
+    } else {
+      appendPlacement(mode, global, data);
+    }
+  });
+}
diff --git a/ads/vendors/adocean.md b/ads/vendors/adocean.md
new file mode 100644
index 0000000000000..cde6a61ff77d7
--- /dev/null
+++ b/ads/vendors/adocean.md
@@ -0,0 +1,90 @@
+<!---
+Copyright 2017 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.
+-->
+
+# AdOcean
+
+## Example
+
+##### Single placement:
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="adocean"
+  data-ao-id="ado-bIVMPpCJPX0.5tjQbNyrWpnws_dbbTJ1fUnGjLeSqJ3.K7"
+  data-ao-emitter="myao.adocean.pl"
+  data-block-on-consent
+>
+</amp-ad>
+```
+
+##### Master-Slave:
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="adocean"
+  data-ao-emitter="myao.adocean.pl"
+  data-ao-master="FDyQKk0qN2a9SxwCMal6Eove..r_lvBE3pPfr_Ier9..f7"
+  data-ao-id="adoceanmyaonhqnqukjtt"
+  data-ao-keys="key1,key2,key3"
+  data-block-on-consent
+>
+</amp-ad>
+
+<amp-ad
+  width="300"
+  height="250"
+  type="adocean"
+  data-ao-emitter="myao.adocean.pl"
+  data-ao-master="FDyQKk0qN2a9SxwCMal6Eove..r_lvBE3pPfr_Ier9..f7"
+  data-ao-id="adoceanmyaokiheeseoko"
+  data-ao-keys="key1,key2,key3"
+  data-block-on-consent
+>
+</amp-ad>
+```
+
+Do not define different values for slaves within one master for paramerters: data-ao-keys, data-ao-vars and data-block-on-consent. Otherwise, the behavior will be non-deterministic.
+
+## Configuration
+
+For details on the configuration semantics, see [AdOcean documentation](http://www.adocean-global.com).
+
+### Required parameters
+
+-   `data-ao-id` - Ad unit unique id
+-   `data-ao-emitter` - Ad server hostname
+
+### Optional parameters
+
+-   `data-ao-mode` - sync|buffered - processing mode
+-   `data-ao-preview` - true|false - whether livepreview is enabled
+-   `data-ao-keys` - additional configuration, see adserver documentation, do not define different values for slaves within one master
+-   `data-ao-vars` - additional configuration, see adserver documentation, do not define different values for slaves within one master
+-   `data-ao-clusters` - additional configuration, see adserver documentation
+-   `data-ao-master` - unique id of master placement
+
+## User Consent Integration
+
+When [user consent](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md#blocking-behaviors) is required. AdOcean ad approaches user consent in the following ways:
+
+-   `CONSENT_POLICY_STATE.SUFFICIENT`: Serve a personalized ad to the user.
+-   `CONSENT_POLICY_STATE.INSUFFICIENT`: Serve a non-personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Serve a personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN`: Serve a non-personalized ad to the user.
diff --git a/ads/vendors/adop.js b/ads/vendors/adop.js
new file mode 100755
index 0000000000000..ca1c7e63d678b
--- /dev/null
+++ b/ads/vendors/adop.js
@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adop(global, data) {
+  validateData(data, ['z']);
+  global.adop = data;
+  writeScript(global, 'https://compass.adop.cc/assets/js/adop/amp.js');
+}
diff --git a/ads/adop.md b/ads/vendors/adop.md
similarity index 98%
rename from ads/adop.md
rename to ads/vendors/adop.md
index 15bfac291b9d0..5f5b81b3fe630 100755
--- a/ads/adop.md
+++ b/ads/vendors/adop.md
@@ -36,4 +36,4 @@ For configuration details and to generate your tags, please contact http://adop.
 
 ### Required parameters
 
-- `data-z`
+-   `data-z`
diff --git a/ads/vendors/adpicker.js b/ads/vendors/adpicker.js
new file mode 100644
index 0000000000000..4faf2c90a8a63
--- /dev/null
+++ b/ads/vendors/adpicker.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adpicker(global, data) {
+  validateData(data, ['ph']);
+  const url =
+    'https://cdn.adpicker.net' +
+    '/ads/main.js?et=amp' +
+    '&ph=' +
+    encodeURIComponent(data.ph) +
+    '&cb=' +
+    Math.floor(89999999 * Math.random() + 10000000);
+  writeScript(global, url);
+}
diff --git a/ads/adpicker.md b/ads/vendors/adpicker.md
similarity index 96%
rename from ads/adpicker.md
rename to ads/vendors/adpicker.md
index affb6376affae..56aaada84dbaf 100644
--- a/ads/adpicker.md
+++ b/ads/vendors/adpicker.md
@@ -29,4 +29,4 @@ For details on the configuration semantics, visit [adpicker.net](https://adpicke
 
 ### Required parameters
 
-- `data-ph`: the placement id
+-   `data-ph`: the placement id
diff --git a/ads/vendors/adplugg.js b/ads/vendors/adplugg.js
new file mode 100644
index 0000000000000..15609b130da93
--- /dev/null
+++ b/ads/vendors/adplugg.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {hasOwn} from '../../src/core/types/object';
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * Make an AdPlugg iframe.
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adplugg(global, data) {
+  // Load ad.js
+  loadScript(global, 'https://www.adplugg.com/serve/js/ad.js');
+
+  // Validate the amp-ad attributes.
+  validateData(
+    data,
+    ['accessCode', 'width', 'height'], //required
+    ['zone'] //optional
+  );
+
+  // Get the amp wrapper element.
+  const ampwrapper = global.document.getElementById('c');
+
+  // Build and append the ad tag.
+  const adTag = global.document.createElement('div');
+  adTag.setAttribute('class', 'adplugg-tag');
+  adTag.setAttribute('data-adplugg-access-code', data['accessCode']);
+  if (data['zone']) {
+    adTag.setAttribute('data-adplugg-zone', data['zone']);
+  }
+  ampwrapper.appendChild(adTag);
+
+  // Get a handle on the AdPlugg SDK.
+  global.AdPlugg = global.AdPlugg || [];
+  const {AdPlugg} = global;
+
+  // Register event listeners (via async wrapper).
+  AdPlugg.push(function () {
+    const {AdPlugg} = global;
+    // Register the renderStart event listener.
+    AdPlugg.on(adTag, 'adplugg:renderStart', function (event) {
+      // Create the opt_data object.
+      const optData = {};
+      if (hasOwn(event, 'width')) {
+        optData.width = event.width;
+      }
+      if (hasOwn(event, 'height')) {
+        optData.height = event.height;
+      }
+      global.context.renderStart(optData);
+    });
+
+    // Register the noContentAvailable event listener.
+    AdPlugg.on(adTag, 'adplugg:noContentAvailable', function () {
+      global.context.noContentAvailable();
+    });
+  });
+
+  // Fill the tag.
+  AdPlugg.push({'command': 'run'});
+}
diff --git a/ads/adplugg.md b/ads/vendors/adplugg.md
similarity index 89%
rename from ads/adplugg.md
rename to ads/vendors/adplugg.md
index ea46980d0d632..f23e937c46f26 100644
--- a/ads/adplugg.md
+++ b/ads/vendors/adplugg.md
@@ -35,8 +35,8 @@ For additional info, see AdPlugg's [AMP Ad Help](https://www.adplugg.com/support
 
 ### Required parameters
 
-- `data-access-code`: your AdPlugg access code.
+-   `data-access-code`: your AdPlugg access code.
 
 ### Optional parameters
 
-- `data-zone`: your AdPlugg zone machine name. Recommended.
+-   `data-zone`: your AdPlugg zone machine name. Recommended.
diff --git a/ads/vendors/adpon.js b/ads/vendors/adpon.js
new file mode 100644
index 0000000000000..ea8a401914905
--- /dev/null
+++ b/ads/vendors/adpon.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adpon(global, data) {
+  validateData(data, ['fid'], ['debugScript']);
+
+  global._adpon = {fid: data['fid']};
+
+  writeScript(global, data['debugScript'] || 'https://ad.adpon.jp/amp.js');
+}
diff --git a/ads/adpon.md b/ads/vendors/adpon.md
similarity index 98%
rename from ads/adpon.md
rename to ads/vendors/adpon.md
index f6eb815a69ec8..35089bde34c3f 100644
--- a/ads/adpon.md
+++ b/ads/vendors/adpon.md
@@ -26,4 +26,4 @@ limitations under the License.
 
 Supported parameters:
 
-- `data-fid`
+-   `data-fid`
diff --git a/ads/vendors/adpushup.js b/ads/vendors/adpushup.js
new file mode 100644
index 0000000000000..fd4cf3a556113
--- /dev/null
+++ b/ads/vendors/adpushup.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adpushup(global, data) {
+  validateData(
+    data,
+    ['siteid', 'slotpath', 'width', 'height'],
+    ['totalampslots', 'jsontargeting', 'extras']
+  );
+  loadScript(
+    global,
+    'https://securepubads.g.doubleclick.net/tag/js/gpt.js',
+    () => {
+      loadScript(
+        global,
+        'https://cdn.adpushup.com/' + data.siteid + '/amp.js',
+        () => {
+          window.adpushup.initAmp(
+            global,
+            data.width,
+            data.height,
+            data.siteid,
+            data.slotpath,
+            data.totalampslots,
+            data.jsontargeting,
+            data.extras
+          );
+        }
+      );
+    }
+  );
+}
diff --git a/ads/vendors/adpushup.md b/ads/vendors/adpushup.md
new file mode 100644
index 0000000000000..9cf8216742466
--- /dev/null
+++ b/ads/vendors/adpushup.md
@@ -0,0 +1,34 @@
+<!---
+Copyright 2021 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.
+-->
+
+# Adpushup
+
+## Example
+
+```html
+<amp-ad width="300" height="250"
+    type="adpushup"
+    data-siteid="40827"
+    data-slotpath="/103512698/AMP_COMPONENT_TEST_1"
+    data-totalAmpSlots="1">
+</amp-ad>
+```
+
+## Configuration
+
+-   `data-slot`: The GAM ad unit path corresponding to the ad position
+-   `siteid`: Adpushup Site ID
+-   `totalAmpSlots`: Total adpushup amp-ad slots on the page
diff --git a/ads/vendors/adreactor.js b/ads/vendors/adreactor.js
new file mode 100644
index 0000000000000..1a1857ad8ee0b
--- /dev/null
+++ b/ads/vendors/adreactor.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adreactor(global, data) {
+  // TODO: check mandatory fields
+  validateData(data, [], ['zid', 'pid', 'custom3']);
+  const url =
+    'https://adserver.adreactor.com' +
+    '/servlet/view/banner/javascript/zone?' +
+    'zid=' +
+    encodeURIComponent(data.zid) +
+    '&pid=' +
+    encodeURIComponent(data.pid) +
+    '&custom3=' +
+    encodeURIComponent(data.custom3) +
+    '&random=' +
+    Math.floor(89999999 * Math.random() + 10000000) +
+    '&millis=' +
+    Date.now();
+  writeScript(global, url);
+}
diff --git a/ads/adreactor.md b/ads/vendors/adreactor.md
similarity index 94%
rename from ads/adreactor.md
rename to ads/vendors/adreactor.md
index a8626f0971d81..54ba981a68ad6 100644
--- a/ads/adreactor.md
+++ b/ads/vendors/adreactor.md
@@ -36,6 +36,6 @@ For details on the configuration semantics, please contact the ad network or ref
 
 Supported parameters:
 
-- `data-pid`
-- `data-zid`
-- `data-custom3`
+-   `data-pid`
+-   `data-zid`
+-   `data-custom3`
diff --git a/ads/vendors/adsensor.js b/ads/vendors/adsensor.js
new file mode 100644
index 0000000000000..cefcfdc413ae1
--- /dev/null
+++ b/ads/vendors/adsensor.js
@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+import {writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ */
+export function adsensor(global) {
+  writeScript(
+    global,
+    'https://wfpscripts.webspectator.com/amp/adsensor-amp.js'
+  );
+}
diff --git a/ads/adsensor.md b/ads/vendors/adsensor.md
similarity index 100%
rename from ads/adsensor.md
rename to ads/vendors/adsensor.md
diff --git a/ads/vendors/adservsolutions.js b/ads/vendors/adservsolutions.js
new file mode 100644
index 0000000000000..c54f751774372
--- /dev/null
+++ b/ads/vendors/adservsolutions.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adservsolutions(global, data) {
+  validateData(data, [], ['client', 'zid']);
+  global['ABNS'] =
+    global['ABNS'] ||
+    function () {
+      (global['ABNSl'] = global['ABNSl'] || []).push(arguments);
+    };
+  global['ABNSh'] = data.client;
+  writeScript(global, 'https://cdn.' + global['ABNSh'] + '/libs/b.js');
+  global['ABNS']('c', {id: data.zid + '&o=a'});
+}
diff --git a/ads/adservsolutions.md b/ads/vendors/adservsolutions.md
similarity index 93%
rename from ads/adservsolutions.md
rename to ads/vendors/adservsolutions.md
index 44ca351e89fd8..0fc2459a4794c 100644
--- a/ads/adservsolutions.md
+++ b/ads/vendors/adservsolutions.md
@@ -35,5 +35,5 @@ For details on the configuration semantics, please contact the ad network.
 
 Supported parameters:
 
-- `data-client`: ad server client
-- `data-zid`: ad zone id
+-   `data-client`: ad server client
+-   `data-zid`: ad zone id
diff --git a/ads/vendors/adsloom.js b/ads/vendors/adsloom.js
new file mode 100644
index 0000000000000..b490a8dc0ace7
--- /dev/null
+++ b/ads/vendors/adsloom.js
@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adsloom(global, data) {
+  validateData(data, ['widgetId']);
+  global._adsLoom = global._adsLoom || {
+    widgetId: data['widgetId'],
+    clientId: global.context.clientId,
+    sourceUrl: global.context.sourceUrl,
+  };
+  loadScript(
+    global,
+    'https://adsloomwebservices.adsloom.com/scripts/amp-loader.js'
+  );
+}
diff --git a/ads/adsloom.md b/ads/vendors/adsloom.md
similarity index 97%
rename from ads/adsloom.md
rename to ads/vendors/adsloom.md
index 623d01e562bbe..81461bcd12417 100644
--- a/ads/adsloom.md
+++ b/ads/vendors/adsloom.md
@@ -35,4 +35,4 @@ For details on the configuration, please contact AdsLoom.
 
 ### Required parameters
 
-- `widget-id`: Widget ID
+-   `widget-id`: Widget ID
diff --git a/ads/vendors/adsnative.js b/ads/vendors/adsnative.js
new file mode 100644
index 0000000000000..6dafdffba343c
--- /dev/null
+++ b/ads/vendors/adsnative.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adsnative(global, data) {
+  try {
+    validateData(data, ['anapiid'], ['ankv', 'ancat', 'antid']);
+  } catch (e) {
+    validateData(data, ['annid', 'anwid'], ['ankv', 'ancat', 'antid']);
+  }
+
+  // convert string to object
+  let actualkv = undefined;
+  if (data.ankv) {
+    actualkv = {};
+    const arraykv = data.ankv.split(',');
+    for (const k in arraykv) {
+      const kv = arraykv[k].split(':');
+      actualkv[kv.pop()] = kv.pop();
+    }
+  }
+
+  // convert string to array
+  const actualcat = data.ancat ? data.ancat.split(',') : undefined;
+
+  // populate settings
+  global._AdsNativeOpts = {
+    apiKey: data.anapiid,
+    networkKey: data.annid,
+    nativeAdElementId: 'adsnative_ampad',
+    currentPageUrl: global.context.location.href,
+    widgetId: data.anwid,
+    templateKey: data.antid,
+    categories: actualcat,
+    keyValues: actualkv,
+    amp: true,
+  };
+
+  // drop ad placeholder div
+  const ad = global.document.createElement('div');
+  const ampwrapper = global.document.getElementById('c');
+  ad.id = global._AdsNativeOpts.nativeAdElementId;
+  ampwrapper.appendChild(ad);
+
+  // load renderjs
+  writeScript(global, 'https://static.adsnative.com/static/js/render.v1.js');
+}
diff --git a/ads/vendors/adsnative.md b/ads/vendors/adsnative.md
new file mode 100644
index 0000000000000..164d02e19a91c
--- /dev/null
+++ b/ads/vendors/adsnative.md
@@ -0,0 +1,44 @@
+<!---
+Copyright 2015 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.
+-->
+
+# AdsNative
+
+## Example
+
+```html
+<amp-ad width="300" height="250" type="adsnative" data-anapiid="123456">
+</amp-ad>
+```
+
+## Configuration
+
+For configuration details, see [AdsNative's documentation](http://dev.adsnative.com).
+
+### Required parameters
+
+-   `width`: required by amp
+-   `height`: required by amp
+-   `data-anapiid`: the api id may be used instead of network and widget id
+-   `data-annid`: the network id must be paired with widget id
+-   `data-anwid`: the widget id must be paired with network id
+
+### Optional parameters
+
+-   `data-anapiid`: the api id
+-   `data-anwid`: the widget id
+-   `data-antid`: the template id
+-   `data-ancat`: a comma separated list of categories
+-   `data-ankv`: a list of key value pairs in the format `"key1:value1, key2:value2"`.
diff --git a/ads/vendors/adspeed.js b/ads/vendors/adspeed.js
new file mode 100644
index 0000000000000..faf5abe56eff3
--- /dev/null
+++ b/ads/vendors/adspeed.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adspeed(global, data) {
+  validateData(data, ['zone', 'client']);
+
+  const url =
+    'https://g.adspeed.net/ad.php?do=amphtml&zid=' +
+    data.zone +
+    '&oid=' +
+    data.client +
+    '&cb=' +
+    Math.random();
+
+  writeScript(global, url);
+}
diff --git a/ads/adspeed.md b/ads/vendors/adspeed.md
similarity index 94%
rename from ads/adspeed.md
rename to ads/vendors/adspeed.md
index ae893273a6e33..c3c72ee6f4ac4 100644
--- a/ads/adspeed.md
+++ b/ads/vendors/adspeed.md
@@ -37,5 +37,5 @@ For configuration semantics, please see [AdSpeed documentation](https://www.adsp
 
 Supported parameters:
 
-- `data-zone`: the zone ID
-- `data-client`: the publisher ID
+-   `data-zone`: the zone ID
+-   `data-client`: the publisher ID
diff --git a/ads/vendors/adspirit.js b/ads/vendors/adspirit.js
new file mode 100644
index 0000000000000..a5379ae1b51db
--- /dev/null
+++ b/ads/vendors/adspirit.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {setStyles} from '../../src/style';
+import {validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adspirit(global, data) {
+  // TODO: check mandatory fields
+  validateData(data, [], ['asmParams', 'asmHost']);
+  const i = global.document.createElement('ins');
+  i.setAttribute('data-asm-params', data['asmParams']);
+  i.setAttribute('data-asm-host', data['asmHost']);
+  i.setAttribute('class', 'asm_async_creative');
+  setStyles(i, {
+    display: 'inline-block',
+    'text-align': 'left',
+  });
+  global.document.getElementById('c').appendChild(i);
+  const s = global.document.createElement('script');
+  s.src = 'https://' + data['asmHost'] + '/adasync.js';
+  global.document.body.appendChild(s);
+}
diff --git a/ads/adspirit.md b/ads/vendors/adspirit.md
similarity index 95%
rename from ads/adspirit.md
rename to ads/vendors/adspirit.md
index 823f9ee9817ea..9eedea6b642d4 100644
--- a/ads/adspirit.md
+++ b/ads/vendors/adspirit.md
@@ -35,5 +35,5 @@ For details on the configuration semantics, please see [AdSpirit's documentation
 
 Supported parameters:
 
-- `data-asm-params`
-- `data-asm-host`
+-   `data-asm-params`
+-   `data-asm-host`
diff --git a/ads/vendors/adstir.js b/ads/vendors/adstir.js
new file mode 100644
index 0000000000000..a147567d8e4b0
--- /dev/null
+++ b/ads/vendors/adstir.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adstir(global, data) {
+  // TODO: check mandatory fields
+  validateData(data, [], ['appId', 'adSpot']);
+
+  const v = '4.0';
+
+  const d = global.document.createElement('div');
+  d.setAttribute('class', 'adstir-ad-async');
+  d.setAttribute('data-ver', v);
+  d.setAttribute('data-app-id', data['appId']);
+  d.setAttribute('data-ad-spot', data['adSpot']);
+  d.setAttribute('data-amp', true);
+  d.setAttribute('data-origin', global.context.location.href);
+  global.document.getElementById('c').appendChild(d);
+
+  loadScript(global, 'https://js.ad-stir.com/js/adstir_async.js');
+}
diff --git a/ads/adstir.md b/ads/vendors/adstir.md
similarity index 96%
rename from ads/adstir.md
rename to ads/vendors/adstir.md
index ada9514c2df91..7695ea32bf458 100644
--- a/ads/adstir.md
+++ b/ads/vendors/adstir.md
@@ -35,5 +35,5 @@ For configuration details and to generate your tags, please refer to [your publi
 
 Supported parameters:
 
-- `data-app-id`
-- `data-ad-spot`
+-   `data-app-id`
+-   `data-ad-spot`
diff --git a/ads/vendors/adstyle.js b/ads/vendors/adstyle.js
new file mode 100644
index 0000000000000..4dddb230c2c80
--- /dev/null
+++ b/ads/vendors/adstyle.js
@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adstyle(global, data) {
+  validateData(data, ['widget']);
+
+  global._adstyle = global._adstyle || {
+    viewId: global.context.pageViewId,
+    widgetIds: [],
+    referrer: global.context.referrer,
+    url: global.context.canonicalUrl,
+    source: global.context.sourceUrl,
+  };
+
+  global._adstyle.widgetIds.push(data.widget);
+
+  const url = 'https://widgets.ad.style/amp.js';
+
+  window.context.observeIntersection(function (changes) {
+    /** @type {!Array} */ (changes).forEach(function (c) {
+      window['intersectionRect' + data.widget] = c.intersectionRect;
+      window['boundingClientRect' + data.widget] = c.boundingClientRect;
+    });
+  });
+
+  loadScript(global, url);
+}
diff --git a/ads/adstyle.md b/ads/vendors/adstyle.md
similarity index 98%
rename from ads/adstyle.md
rename to ads/vendors/adstyle.md
index 0639ab4b3898a..20b2c23dd1872 100644
--- a/ads/adstyle.md
+++ b/ads/vendors/adstyle.md
@@ -50,4 +50,4 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-widget`
+-   `data-widget`
diff --git a/ads/vendors/adtech.js b/ads/vendors/adtech.js
new file mode 100644
index 0000000000000..7d9ffc6bf49d7
--- /dev/null
+++ b/ads/vendors/adtech.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {
+  validateData,
+  validateSrcContains,
+  validateSrcPrefix,
+  writeScript,
+} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adtech(global, data) {
+  const adsrc = data.src;
+  if (typeof adsrc != 'undefined') {
+    validateSrcPrefix('https:', adsrc);
+    validateSrcContains('/addyn/', adsrc);
+    writeScript(global, adsrc);
+  } else {
+    validateData(
+      data,
+      ['atwmn', 'atwdiv'],
+      [
+        'atwco',
+        'atwheight',
+        'atwhtnmat',
+        'atwmoat',
+        'atwnetid',
+        'atwothat',
+        'atwplid',
+        'atwpolar',
+        'atwsizes',
+        'atwwidth',
+      ]
+    );
+    global.atwco = data.atwco;
+    global.atwdiv = data.atwdiv;
+    global.atwheight = data.atwheight;
+    global.atwhtnmat = data.atwhtnmat;
+    global.atwmn = data.atwmn;
+    global.atwmoat = data.atwmoat;
+    global.atwnetid = data.atwnetid;
+    global.atwothat = data.atwothat;
+    global.atwplid = data.atwplid;
+    global.atwpolar = data.atwpolar;
+    global.atwsizes = data.atwsizes;
+    global.atwwidth = data.atwwidth;
+    writeScript(global, 'https://s.aolcdn.com/os/ads/adsWrapper3.js');
+  }
+}
diff --git a/ads/vendors/adtech.md b/ads/vendors/adtech.md
new file mode 100644
index 0000000000000..c081bd43e4f32
--- /dev/null
+++ b/ads/vendors/adtech.md
@@ -0,0 +1,55 @@
+<!---
+Copyright 2015 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.
+-->
+
+# AdTech
+
+## Example
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="adtech"
+  data-atwMN="2842475"
+  data-atwDiv="adtech-ad-container"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact the ad network or refer to their documentation.
+
+### Required parameters:
+
+-   `data-atwMN` - magic number for the ad spot
+-   `data-atwDiv` - div name of the ad spot; can be class or id
+
+### Optional parameters:
+
+-   `data-atwPlId` - placement ID (instead of Magic Number)
+-   `data-atwOthAT` - generic var to set key/value pairs to send with the ad call; accepts multiple values in a semi-colon delimited list
+-   `data-atwCo` - override default country code
+-   `data-atwHtNmAT` - override ad host name
+-   `data-atwNetId` - network ID
+-   `data-atwWidth` - ad width (use with atwHeight only if the ad is not 300x250)
+-   `data-atwHeight`- ad height (use with atwWidth only if the ad is not 300x250)
+-   `data-atwSizes` - this overrides atwWidth/atwHeight; use this to create a comma-separated list of possible ad sizes
+-   'data-atwPolar' - set to "1" to enable Polar.me ad in the ad spot
+
+### Direct URL call:
+
+-   `src` - Value must start with `https:` and contain `/addyn/`. This should only be used in cases where a direct ad call is being used rather than a magic number (MN).
diff --git a/ads/vendors/adtelligent.js b/ads/vendors/adtelligent.js
new file mode 100644
index 0000000000000..9f1efe21e6623
--- /dev/null
+++ b/ads/vendors/adtelligent.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adtelligent(global, data) {
+  validateData(
+    data,
+    [],
+    ['source', 'floor', 'hbmpPubId', 'hbmpSiteId', 'hbmpUnitId']
+  );
+
+  const doc = global.document;
+  const container = doc.createElement('div');
+  const ctx = window.context;
+  doc.body.appendChild(container);
+  if (data.source) {
+    const url =
+      `https://s.adtelligent.com/?floor=${data.floor || 0}` +
+      `&content_page_url=${encodeURIComponent(ctx.location)}` +
+      `&width=${data.width}` +
+      `&height=${data.height}` +
+      `&cb=${Date.now()}` +
+      `&aid=${data.source}`;
+    container.id = 'PDS' + data.source;
+    loadScript(global, url, () => {
+      ctx.renderStart({
+        width: data.width,
+        height: data.height,
+      });
+    });
+  } else {
+    const HTML_ELEMENT_ID = 'adt-placement';
+    const vpbSrc = `//player.adtelligent.com/prebid/wrapper_hb_${data['hbmpPubId']}_${data['hbmpSiteId']}.js`;
+    const pbSrc = vpbSrc.replace('wrapper_hb', 'hb');
+    container.id = HTML_ELEMENT_ID;
+    global.vpb = window.vpb || {
+      cmd: [],
+      fastLoad: true,
+      amp: true,
+      startAuction: 1,
+    };
+
+    loadScript(global, vpbSrc);
+    loadScript(global, pbSrc);
+
+    global.vpb.cmd.push(function () {
+      global.vpb.startAuction({
+        code: HTML_ELEMENT_ID,
+        adUnitId: parseInt(data['hbmpUnitId'], 10),
+        sizes: [[data.width, data.height]],
+        render: true,
+        onEnd(winner) {
+          ctx.renderStart({
+            width: winner.width,
+            height: winner.height,
+          });
+        },
+      });
+    });
+  }
+}
diff --git a/ads/vendors/adtelligent.md b/ads/vendors/adtelligent.md
new file mode 100644
index 0000000000000..8ecae7dca1868
--- /dev/null
+++ b/ads/vendors/adtelligent.md
@@ -0,0 +1,59 @@
+<!---
+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.
+-->
+
+# Adtelligent
+
+## Examples
+
+### For DSP/SSP Clients
+
+```
+<amp-ad width="300" height="250"
+    type="adtelligent"
+    data-source="350975">
+</amp-ad>
+```
+
+### For HBMP Clients
+
+```
+<amp-ad width="300" height="250"
+    type="adtelligent"
+    data-hbmp-site-id="29"
+    data-hbmp-pub-id="269911"
+    data-hbmp-unit-id="58">
+</amp-ad>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact the ad network or refer to their documentation.
+
+### Required parameters
+
+For DSP/SSP clients
+
+-   `data-source`
+
+For HBMP clients
+
+-   `data-hbmp-site-id`
+-   `data-hbmp-pub-id`
+-   `data-hbmp-unit-id`
+
+### Optional parameters
+
+-   `data-floor`
diff --git a/ads/vendors/adthrive.js b/ads/vendors/adthrive.js
new file mode 100644
index 0000000000000..e25c61023c35e
--- /dev/null
+++ b/ads/vendors/adthrive.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adthrive(global, data) {
+  validateData(data, ['siteId', 'adUnit'], ['sizes']);
+  loadScript(
+    global,
+    'https://ads.adthrive.com/sites/' +
+      encodeURIComponent(data.siteId) +
+      '/amp.min.js'
+  );
+}
diff --git a/ads/adthrive.md b/ads/vendors/adthrive.md
similarity index 94%
rename from ads/adthrive.md
rename to ads/vendors/adthrive.md
index d0fb751a8ad26..b43d2e116b87a 100644
--- a/ads/adthrive.md
+++ b/ads/vendors/adthrive.md
@@ -65,8 +65,8 @@ Your site must be approved and active with [AdThrive](http://www.adthrive.com) p
 
 ### Required parameters
 
-- `data-site-id` - Your AdThrive site id.
-- `data-ad-unit` - AdThrive provided ad unit.
+-   `data-site-id` - Your AdThrive site id.
+-   `data-ad-unit` - AdThrive provided ad unit.
 
 ### Optional parameters
 
diff --git a/ads/vendors/adunity.js b/ads/vendors/adunity.js
new file mode 100644
index 0000000000000..6776afba1d261
--- /dev/null
+++ b/ads/vendors/adunity.js
@@ -0,0 +1,113 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adunity(global, data) {
+  const doc = global.document;
+
+  validateData(
+    data,
+    ['auAccount', 'auSite'],
+    [
+      'auSection',
+      'auZone',
+      'auDemo',
+      'auIsdemo',
+      'auAd',
+      'auOrder',
+      'auSegment',
+      'auOptions',
+      'auSources',
+      'auAds',
+      'auTriggerFn',
+      'auTriggerVal',
+      'auCallbackVal',
+      'auCallbackFn',
+      'auPassbackFn',
+      'auPassbackVal',
+      'auClick',
+      'auDual',
+      'auImpression',
+      'auVideo',
+    ]
+  );
+
+  //prepare tag structure
+  const tag = doc.createElement('div');
+  tag.classList.add('au-tag');
+  tag.setAttribute('data-au-width', data['width']);
+  tag.setAttribute('data-au-height', data['height']);
+
+  if (data != null) {
+    for (const key in data) {
+      //skip not valid attributes
+      if (!hasOwnProperty.call(data, key)) {
+        continue;
+      }
+
+      //skip if attribute is type or ampSlotIndex
+      if (key.startsWith('type') || key.startsWith('ampSlotIndex')) {
+        continue;
+      }
+
+      if (key.startsWith('au')) {
+        if (key == 'auVideo') {
+          tag.setAttribute('class', 'au-video');
+        } else {
+          const auKey = key.substring(2).toLowerCase();
+          tag.setAttribute('data-au-' + auKey, data[key]);
+        }
+      }
+    }
+  }
+
+  //make sure is executed only once
+  let libAd = false;
+
+  //execute tag only if in view
+  const inViewCb = global.context.observeIntersection(function (changes) {
+    /** @type {!Array} */ (changes).forEach(function (c) {
+      if (!libAd && c.intersectionRect.height > data['height'] / 2) {
+        libAd = true;
+        inViewCb();
+        renderTags(global, data);
+      }
+    });
+  });
+  const tagPh = doc.getElementById('c');
+  tagPh.appendChild(tag);
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function renderTags(global, data) {
+  if (data == null) {
+    return;
+  }
+
+  global.context.renderStart({
+    width: data.width,
+    height: data.height,
+  });
+  loadScript(global, 'https://content.adunity.com/aulib.js');
+}
diff --git a/ads/adunity.md b/ads/vendors/adunity.md
similarity index 100%
rename from ads/adunity.md
rename to ads/vendors/adunity.md
diff --git a/ads/vendors/aduptech.js b/ads/vendors/aduptech.js
new file mode 100644
index 0000000000000..1878ccd0450d9
--- /dev/null
+++ b/ads/vendors/aduptech.js
@@ -0,0 +1,103 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * ID for the html container
+ *
+ * @const {string}
+ */
+export const ADUPTECH_ELEMENT_ID = 'aduptech';
+
+/**
+ * URL to the AdUp Technology javascript api
+ *
+ * @const {string}
+ */
+export const ADUPTECH_API_URL = 'https://s.d.adup-tech.com/jsapi';
+
+/**
+ * Logic for the AdUp Technology amp-ad tag
+ *
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function aduptech(global, data) {
+  const {context, document} = global;
+
+  validateData(
+    data,
+    ['placementkey'],
+    ['mincpc', 'query', 'pageurl', 'gdpr', 'gdpr_consent', 'adtest']
+  );
+
+  // add id attriubte to container
+  document.getElementById('c').setAttribute('id', ADUPTECH_ELEMENT_ID);
+
+  // init api options
+  const options = {
+    amp: true,
+    responsive: true,
+    placementkey: data.placementkey,
+    onAds: () => context.renderStart(),
+    onNoAds: () => context.noContentAvailable(),
+  };
+
+  if ('mincpc' in data) {
+    options.mincpc = data.mincpc;
+  }
+
+  if ('query' in data) {
+    options.query = data.query;
+  }
+
+  if ('adtest' in data) {
+    options.adtest = data.adtest;
+  }
+
+  if ('pageurl' in data) {
+    options.pageurl = data.pageurl;
+  } else if (context.sourceUrl) {
+    options.pageurl = context.sourceUrl;
+  } else if (context.location && context.location.href) {
+    options.pageurl = context.location.href;
+  }
+
+  if ('gdpr' in data) {
+    options.gdpr = data.gdpr;
+  }
+
+  // prefer consent string from consentSharedData (if defined)
+  // otherwise use consent string from optional tag attribute
+  if (
+    context.consentSharedData !== null &&
+    typeof context.consentSharedData === 'object' &&
+    context.consentSharedData.consentString &&
+    context.consentSharedData.consentString !== ''
+  ) {
+    // eslint-disable-next-line google-camelcase/google-camelcase
+    options.gdpr_consent = context.consentSharedData.consentString;
+  } else if ('gdpr_consent' in data) {
+    // eslint-disable-next-line google-camelcase/google-camelcase
+    options.gdpr_consent = data.gdpr_consent;
+  }
+
+  // load api and embed ads iframe
+  loadScript(global, ADUPTECH_API_URL, () =>
+    global.uAd.embed(ADUPTECH_ELEMENT_ID, options)
+  );
+}
diff --git a/ads/vendors/aduptech.md b/ads/vendors/aduptech.md
new file mode 100644
index 0000000000000..4ca6bce6e1d8c
--- /dev/null
+++ b/ads/vendors/aduptech.md
@@ -0,0 +1,120 @@
+<!---
+Copyright 2016 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.
+-->
+
+# AdUp Technology
+
+Please visit [www.adup-tech.com](http://www.adup-tech.com) for more information and sign up as publisher to create your placement.
+
+## Examples
+
+### Fixed size
+
+Uses fixed size by the given `width` and `height`.
+
+```html
+<amp-ad
+  type="aduptech"
+  layout="fixed"
+  width="500"
+  height="200"
+  data-placementkey="ae7906d535ce47fbb29fc5f45ef910b4"
+  data-query="reisen;mallorca;spanien"
+  data-adtest="1"
+>
+</amp-ad>
+```
+
+### Filled size
+
+Uses available space of parent html container.
+
+```html
+<style amp-custom>
+  #aduptech-container {
+    width: 350px;
+    height: 300px;
+    position: relative;
+  }
+</style>
+<div id="aduptech-container">
+  <amp-ad
+    type="aduptech"
+    layout="fill"
+    data-placementkey="ae7906d535ce47fbb29fc5f45ef910b4"
+    data-query="reisen;mallorca;spanien"
+    data-adtest="1"
+  >
+  </amp-ad>
+</div>
+```
+
+### Fixed height
+
+Uses available width and the given `height`.
+
+```html
+<amp-ad
+  type="aduptech"
+  layout="fixed-height"
+  height="100"
+  data-placementkey="ae7906d535ce47fbb29fc5f45ef910b4"
+  data-query="reisen;mallorca;spanien"
+  data-adtest="1"
+>
+</amp-ad>
+```
+
+### Responsive
+
+Uses available space but respecting aspect ratio by given `width` and `height` (for example 10:3).
+
+```html
+<amp-ad
+  type="aduptech"
+  layout="responsive"
+  width="10"
+  height="3"
+  data-placementkey="ae7906d535ce47fbb29fc5f45ef910b4"
+  data-query="reisen;mallorca;spanien"
+  data-adtest="1"
+>
+</amp-ad>
+```
+
+## Configuration
+
+| Attribute           | Optional | Description                                                                                   |
+| ------------------- | :------: | --------------------------------------------------------------------------------------------- |
+| `data-placementkey` |          | The unique placement key                                                                      |
+| `data-mincpc`       |    X     | The mininum price per click in €                                                              |
+| `data-query`        |    X     | Additional query keywords separated by semicolon                                              |
+| `data-pageurl`      |    X     | The page url (if different from current url)                                                  |
+| `data-gdpr`         |    X     | `1` = GDPR applies / `0` = GDPR does not apply / omit = unknown wether GDPR applies (default) |
+| `data-gdpr_consent` |    X     | The base64url-encoded IAB consent string                                                      |
+| `data-adtest`       |    X     | `1` = testing mode enabled / `0` = testing mode disabled (default)                            |
+
+## User Consent Integration
+
+If avaiable, the following consent data will always be send to our adserver:
+
+-   `window.context.consentSharedData.consentString` as IAB consent string
+
+Otherwise following (optional) tag attributes will be send to our adserver:
+
+-   `data-gdpr` as "GDPR applies" state
+-   `data-gdpr_consent` as IAB consent string
+
+If none of above values are given, we try to fetch users consent data via TCF API (if avaiable).
diff --git a/ads/vendors/adventive.js b/ads/vendors/adventive.js
new file mode 100644
index 0000000000000..e83389c49fa58
--- /dev/null
+++ b/ads/vendors/adventive.js
@@ -0,0 +1,167 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {addParamsToUrl} from '../../src/url';
+import {dict, hasOwn} from '../../src/core/types/object';
+import {endsWith} from '../../src/core/types/string';
+import {loadScript, validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adventive(global, data) {
+  if (hasOwn(data, 'isDev')) {
+    adventive_(global, data);
+  } else {
+    validateData(data, ['src'], ['isDev']);
+    writeScript(global, `${data.src}&isAmp=1`);
+  }
+}
+
+const adv = {
+    addInstance: () => {},
+    args: {},
+    isLibLoaded: false,
+    mode: {
+      dev: false,
+      live: false,
+      localDev: false,
+      preview: false,
+      prod: false,
+      testing: false,
+    },
+  },
+  requiredData = ['pid'],
+  optionalData = ['click', 'async', 'isDev'],
+  sld = {true: 'adventivedev', false: 'adventive'},
+  thld = {true: 'amp', false: 'ads'},
+  cacheTime = 5;
+
+/**
+ * Future data:
+ * - async
+ * - click
+ * - height
+ * - isDev
+ * - width
+ * - pid
+ *
+ * Considerations:
+ * - Recipe reuse for multi-placed Ads.
+ * - Reduce request to only what is needed
+ * - Mitigate risk of data corruption
+ *
+ * @todo implement multi-size handling for multi-slotted ads. @see doubleclick
+ *
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function adventive_(global, data) {
+  validateData(data, requiredData, optionalData);
+
+  if (!hasOwn(global, 'adventive')) {
+    global.adventive = adv;
+  }
+  const ns = global.adventive;
+  if (!hasOwn(ns, 'context')) {
+    ns.context = global.context;
+  }
+
+  if (!Object.isFrozen(ns.mode)) {
+    updateMode(ns.mode, global.context.location.hostname);
+  }
+
+  const cb = callback.bind(this, data.pid, ns),
+    url = getUrl(global.context, data, ns);
+  url
+    ? (hasOwn(data, 'async') ? loadScript : writeScript)(global, url, cb)
+    : cb();
+}
+
+/**
+ * @param {!Object} mode
+ * @param {string} hostname
+ */
+function updateMode(mode, hostname) {
+  mode.localDev = hostname === 'localhost';
+  mode.dev = !mode.localDev && endsWith(hostname, `${sld[false]}.com`);
+  mode.prod = !mode.localDev && endsWith(hostname, `${sld[true]}.com`);
+  mode.preview = (mode.dev || mode.prod) && hostname.startsWith('/ad');
+  mode.testing = (mode.dev || mode.prod) && hostname.startsWith('/testing');
+  mode.live = (mode.testing || !mode.preview) && !mode.localDev;
+
+  Object.freeze(mode);
+}
+
+/**
+ * @param {string} id
+ * @param {!Object} ns
+ */
+function callback(id, ns) {
+  ns.addInstance(id);
+}
+
+/**
+ * @param {!Object} context
+ * @param {!Object} data
+ * @param {!Object} ns
+ * @return {string|boolean} if a search query is generated, a full url is
+ *    provided, otherwise false
+ */
+function getUrl(context, data, ns) {
+  const {mode} = ns,
+    isDev = hasOwn(data, 'isDev'),
+    sld_ = sld[!mode.dev],
+    thld_ = thld[isDev && !mode.live],
+    search = reduceSearch(ns, data.pid, data.click, context.referrer),
+    url = search
+      ? addParamsToUrl(`https://${thld_}.${sld_}.com/ad`, search)
+      : false;
+  return url;
+}
+
+/**
+ * @todo determine if we can reduce the request to nothing & return false
+ * @todo usage of RTC may be applicable here for macros
+ * @todo check if click-macros can be offloaded to amp-analytics (i.e recipe)
+ *
+ * @param {!Object} ns
+ * @param {string} placementId
+ * @param {string} click
+ * @param {string} referrer
+ * @return {JsonObject} if no more data is needed, false, otherwise JSON
+ *    representation of the url search query.
+ */
+function reduceSearch(ns, placementId, click, referrer) {
+  const isRecipeLoaded = hasOwn(ns.args, 'placementId');
+  let isRecipeStale = true;
+  if (isRecipeLoaded) {
+    const info = ns.args[placementId];
+    isRecipeStale = Date.now() - info['requestTime'] > 60 * cacheTime;
+  }
+  const needsRequest = !isRecipeLoaded || isRecipeStale;
+
+  return !needsRequest
+    ? null
+    : dict({
+        'click': click,
+        'referrer': referrer,
+        'isAmp': '1',
+        'lib': !ns.isLibLoaded ? '1' : '', // may be prefetchable via _config
+        'pid': needsRequest ? placementId : '',
+      });
+}
diff --git a/ads/adventive.md b/ads/vendors/adventive.md
similarity index 96%
rename from ads/adventive.md
rename to ads/vendors/adventive.md
index e9f91a2991e82..8ea2b265a114e 100644
--- a/ads/adventive.md
+++ b/ads/vendors/adventive.md
@@ -36,4 +36,4 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-src`: provided ad url
+-   `data-src`: provided ad url
diff --git a/ads/vendors/adverline.js b/ads/vendors/adverline.js
new file mode 100644
index 0000000000000..631d753daa9fc
--- /dev/null
+++ b/ads/vendors/adverline.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adverline(global, data) {
+  validateData(data, ['id', 'plc'], ['s', 'section']);
+
+  writeScript(global, 'https://ads.adverline.com/richmedias/amp.js');
+}
diff --git a/ads/adverline.md b/ads/vendors/adverline.md
similarity index 83%
rename from ads/adverline.md
rename to ads/vendors/adverline.md
index efaea0c03a43c..c6862f6951257 100644
--- a/ads/adverline.md
+++ b/ads/vendors/adverline.md
@@ -38,10 +38,10 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-id`: site ID
-- `data-plc`: format ID (unique per page)
+-   `data-id`: site ID
+-   `data-plc`: format ID (unique per page)
 
 ### Optional parameters
 
-- `data-section`: tag list, separated by commas
-- `data-s`: dynamic sizing, allowed values: fixed, all, small (default), big
+-   `data-section`: tag list, separated by commas
+-   `data-s`: dynamic sizing, allowed values: fixed, all, small (default), big
diff --git a/ads/vendors/adverticum.js b/ads/vendors/adverticum.js
new file mode 100644
index 0000000000000..8621f1292092b
--- /dev/null
+++ b/ads/vendors/adverticum.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {setStyle} from '../../src/style';
+import {validateData, writeScript} from '../../3p/3p';
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adverticum(global, data) {
+  validateData(data, ['goa3zone'], ['costumetargetstring']);
+  const zoneid = 'zone' + data['goa3zone'];
+  const d = global.document.createElement('div');
+
+  d.id = zoneid;
+  d.classList.add('goAdverticum');
+
+  document.getElementById('c').appendChild(d);
+  if (data['costumetargetstring']) {
+    const s = global.document.createTextNode(data['costumetargetstring']);
+    const v = global.document.createElement('var');
+    v.setAttribute('id', 'cT');
+    v.setAttribute('class', 'customtarget');
+    setStyle(v, 'display', 'none');
+    v.appendChild(s);
+    document.getElementById(zoneid).appendChild(v);
+  }
+  writeScript(global, '//ad.adverticum.net/g3.js');
+}
diff --git a/ads/adverticum.md b/ads/vendors/adverticum.md
similarity index 88%
rename from ads/adverticum.md
rename to ads/vendors/adverticum.md
index 1236e82f40a39..6d795b56d3b1e 100644
--- a/ads/adverticum.md
+++ b/ads/vendors/adverticum.md
@@ -35,11 +35,11 @@ For details on the configuration semantics, please contact the Adverticum suppor
 
 ### Required parameters
 
-- `data-goa3zone`: The zoneID, which can be found at the Adverticum AdServer.
+-   `data-goa3zone`: The zoneID, which can be found at the Adverticum AdServer.
 
 ### Optional parameters
 
-- `data-costumetargetstring:`: The value must be Base64Encoded.
+-   `data-costumetargetstring:`: The value must be Base64Encoded.
 
 ## Support and contact
 
diff --git a/ads/vendors/advertserve.js b/ads/vendors/advertserve.js
new file mode 100644
index 0000000000000..e707c28cde18f
--- /dev/null
+++ b/ads/vendors/advertserve.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function advertserve(global, data) {
+  validateData(
+    data,
+    ['zid', 'pid', 'client'],
+    [
+      'custom1',
+      'custom2',
+      'custom3',
+      'custom4',
+      'custom5',
+      'custom6',
+      'custom7',
+      'custom8',
+      'custom9',
+      'custom10',
+    ]
+  );
+
+  const customFields = (function () {
+    let params = '';
+    for (let i = 1; i <= 10; i++) {
+      const fieldName = 'custom' + i;
+      if (data[fieldName] !== undefined) {
+        params += '&' + fieldName + '=' + encodeURIComponent(data[fieldName]);
+      }
+    }
+    return params;
+  })();
+
+  const url =
+    'https://' +
+    data.client +
+    '.advertserve.com' +
+    '/servlet/view/banner/javascript/zone?amp=true' +
+    '&zid=' +
+    encodeURIComponent(data.zid) +
+    '&pid=' +
+    encodeURIComponent(data.pid) +
+    customFields +
+    '&random=' +
+    Math.floor(89999999 * Math.random() + 10000000) +
+    '&millis=' +
+    Date.now();
+
+  writeScript(global, url);
+}
diff --git a/ads/vendors/advertserve.md b/ads/vendors/advertserve.md
new file mode 100644
index 0000000000000..87520f638380c
--- /dev/null
+++ b/ads/vendors/advertserve.md
@@ -0,0 +1,57 @@
+<!---
+Copyright 2015 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.
+-->
+
+# AdvertServe
+
+## Example
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="advertserve"
+  data-client="tester"
+  data-pid="0"
+  data-zid="68"
+  data-custom1="example"
+>
+  <div placeholder>Loading ad.</div>
+  <div fallback>Ad could not be loaded.</div>
+</amp-ad>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact the ad network or refer to their documentation.
+
+Required parameters:
+
+-   `data-client`: client id
+-   `data-pid`: publisher id
+-   `data-zid`: zone id
+
+Optional parameters:
+
+-   `data-custom1`: custom field 1
+-   `data-custom2`: custom field 2
+-   `data-custom3`: custom field 3
+-   `data-custom4`: custom field 4
+-   `data-custom5`: custom field 5
+-   `data-custom6`: custom field 6
+-   `data-custom7`: custom field 7
+-   `data-custom8`: custom field 8
+-   `data-custom9`: custom field 9
+-   `data-custom10`: custom field 10
diff --git a/ads/vendors/adyoulike.js b/ads/vendors/adyoulike.js
new file mode 100644
index 0000000000000..fdb59992ba51b
--- /dev/null
+++ b/ads/vendors/adyoulike.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adyoulike(global, data) {
+  validateData(data, ['placement'], ['dc', 'campaign']);
+  global.adyoulikeParams = data;
+
+  writeScript(global, 'https://fo-static.omnitagjs.com/amp.js');
+}
diff --git a/ads/adyoulike.md b/ads/vendors/adyoulike.md
similarity index 94%
rename from ads/adyoulike.md
rename to ads/vendors/adyoulike.md
index 52564630219a8..2967a7abcfc76 100644
--- a/ads/adyoulike.md
+++ b/ads/vendors/adyoulike.md
@@ -38,9 +38,9 @@ For configuration details and to generate your tags, please contact [Adyoulike](
 
 ### Required parameters
 
-- `data-placement`
+-   `data-placement`
 
 ### Optional parameters
 
-- `data-dc`
-- `data-campaign`
+-   `data-dc`
+-   `data-campaign`
diff --git a/ads/vendors/affiliateb.js b/ads/vendors/affiliateb.js
new file mode 100644
index 0000000000000..1dea3ca176136
--- /dev/null
+++ b/ads/vendors/affiliateb.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function affiliateb(global, data) {
+  validateData(data, ['afb_a', 'afb_p', 'afb_t']);
+  global.afbParam = data;
+  writeScript(global, 'https://track.affiliate-b.com/amp/a.js');
+}
diff --git a/ads/affiliateb.md b/ads/vendors/affiliateb.md
similarity index 97%
rename from ads/affiliateb.md
rename to ads/vendors/affiliateb.md
index dbb449b6ed2c2..c435ceeaab27b 100644
--- a/ads/affiliateb.md
+++ b/ads/vendors/affiliateb.md
@@ -36,4 +36,4 @@ For configuration details and to generate your tags, please contact [AffiliateB]
 
 Supported parameters:
 
-- `data-nend_params`
+-   `data-nend_params`
diff --git a/ads/vendors/aja.js b/ads/vendors/aja.js
new file mode 100644
index 0000000000000..32f2a93938a08
--- /dev/null
+++ b/ads/vendors/aja.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function aja(global, data) {
+  validateData(data, ['asi']);
+
+  const {document} = global;
+  const asi = data['asi'];
+
+  const d = document.createElement('div');
+  d.dataset['ajaAd'] = '';
+  d.dataset['ajaAsi'] = asi;
+  document.getElementById('c').appendChild(d);
+
+  loadScript(global, 'https://cdn.as.amanad.adtdp.com/sdk/asot-amp.js');
+}
diff --git a/ads/aja.md b/ads/vendors/aja.md
similarity index 97%
rename from ads/aja.md
rename to ads/vendors/aja.md
index 101f99ac261ec..0806b7e36c50c 100644
--- a/ads/aja.md
+++ b/ads/vendors/aja.md
@@ -38,5 +38,5 @@ You have to contact our account manager to create ad spot at first.
 
 Required parameters:
 
-- asi
-  - `data-asi`
+-   asi
+    -   `data-asi`
diff --git a/ads/vendors/amoad.js b/ads/vendors/amoad.js
new file mode 100644
index 0000000000000..6df54d826c77d
--- /dev/null
+++ b/ads/vendors/amoad.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function amoad(global, data) {
+  validateData(data, ['sid'], ['adType']);
+
+  let script;
+  const attrs = {};
+  if (data['adType'] === 'native') {
+    script = 'https://j.amoad.com/js/n.js';
+    attrs['class'] = 'amoad_native';
+    attrs['data-sid'] = data.sid;
+  } else {
+    script = 'https://j.amoad.com/js/a.js';
+    attrs['class'] = `amoad_frame sid_${data.sid} container_div sp`;
+  }
+  global.amoadOption = {ampData: data};
+
+  const d = global.document.createElement('div');
+  Object.keys(attrs).forEach((k) => {
+    d.setAttribute(k, attrs[k]);
+  });
+  global.document.getElementById('c').appendChild(d);
+
+  loadScript(global, script);
+}
diff --git a/ads/amoad.md b/ads/vendors/amoad.md
similarity index 95%
rename from ads/amoad.md
rename to ads/vendors/amoad.md
index b16219a1345f4..7364f29e0b1f8 100644
--- a/ads/amoad.md
+++ b/ads/vendors/amoad.md
@@ -50,7 +50,7 @@ For configuration details and to generate your tags, please contact [AMoAd](http
 
 Supported parameters:
 
-- `width`
-- `height`
-- `data-sid`
-- `data-ad-type`
+-   `width`
+-   `height`
+-   `data-sid`
+-   `data-ad-type`
diff --git a/ads/vendors/aniview.js b/ads/vendors/aniview.js
new file mode 100644
index 0000000000000..136f557ae01f0
--- /dev/null
+++ b/ads/vendors/aniview.js
@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function aniview(global, data) {
+  const requiredParams = ['publisherid', 'channelid'];
+  validateData(data, requiredParams);
+  global.avampdata = data;
+  const scpdomain = data.scriptdomain || 'player.aniview.com';
+  const scpurl = 'https://' + scpdomain + '/script/6.1/ampaniview.js';
+  writeScript(global, scpurl);
+}
diff --git a/ads/vendors/aniview.md b/ads/vendors/aniview.md
new file mode 100644
index 0000000000000..f50f2c009dd8c
--- /dev/null
+++ b/ads/vendors/aniview.md
@@ -0,0 +1,56 @@
+<!---
+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.
+-->
+
+# Aniview
+
+## Example
+
+```html
+<amp-ad
+  width="640"
+  height="360"
+  type="aniview"
+  data-publisherid="55b88d4a181f465b3e8b4567"
+  data-channelid="5a5f17a728a06102d14c2718"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For additional details and support contact support@aniview.com.
+
+### Required parameters
+
+-   `data-publisherid`: the publisher or network id
+-   `data-channelid`: the channel id
+
+### Optional parameters
+
+-   `data-ref1`: ref1 extra AV\_ parameters
+-   `data-loop`: set false to disable loop. Default is true
+-   `data-vastretry`: vastretry configuration
+-   `data-errorlimit`: errorlimit configuration
+-   `data-maximp`: Max number of impressions.
+-   `data-maxrun`: Max number of waterfall runs.
+-   `data-preloader`: String of the preloader json object.
+-   `data-customcss`: Custom css string.
+-   `data-customlogo`: String of the customlogo json object.
+-   `data-passbackurl`: passbackurl.
+-   `data-av_gdpr`: '1' or '0'.
+-   `data-av_consent`: Consent string.
+-   `data-av_url`: Current url.
+-   `data-av_subid`: Subid string.
diff --git a/ads/vendors/anyclip.js b/ads/vendors/anyclip.js
new file mode 100644
index 0000000000000..b851e0cfd7708
--- /dev/null
+++ b/ads/vendors/anyclip.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+const requiredParams = ['pubname', 'widgetname'];
+
+const scriptHost = 'player.anyclip.com';
+const scriptPath = 'anyclip-widget/lre-widget/prod/v1/src';
+const scriptName = 'aclre-amp-loader.js';
+const scriptUrl = `https://${scriptHost}/${scriptPath}/${scriptName}`;
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function anyclip(global, data) {
+  validateData(data, requiredParams);
+
+  global.addEventListener('message', () => {
+    global.context.renderStart();
+  });
+
+  loadScript(global, scriptUrl, () => {
+    global.anyclip = global.anyclip || {};
+    global.anyclip.getWidget = global.anyclip.getWidget || function () {};
+  });
+}
diff --git a/ads/vendors/anyclip.md b/ads/vendors/anyclip.md
new file mode 100644
index 0000000000000..362331d2aa9fd
--- /dev/null
+++ b/ads/vendors/anyclip.md
@@ -0,0 +1,51 @@
+<!---
+Copyright 2020 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.
+-->
+
+# AnyClip
+
+## Example
+
+```html
+<amp-ad
+  width="480"
+  height="300"
+  layout="responsive"
+  type="anyclip"
+  data-pubName="lre_qa_temp"
+  data-widgetName="amp_test_autoplay"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For additional details and support contact support@anyclip.com.
+
+### Required parameters
+
+-   `data-pub-name`: the publisher name
+-   `data-widget-name`: the widget id
+
+### Optional parameters
+
+-   `data-widget-url`: the widget source url
+-   `data-lre-body-bgc`: color of background of the widget
+-   `data-ac-embed-mode`: the widget embed mode
+-   `data-ourl`: override url
+-   `data-plid`: playlist ID
+-   `data-ar`: aspect ratio
+-   `data-sid`: given session ID
+-   `data-tm-*`: misc passthrough params
diff --git a/ads/vendors/appnexus.js b/ads/vendors/appnexus.js
new file mode 100644
index 0000000000000..5bee27ad8e317
--- /dev/null
+++ b/ads/vendors/appnexus.js
@@ -0,0 +1,159 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData, writeScript} from '../../3p/3p';
+import {setStyles} from '../../src/style';
+
+const APPNEXUS_AST_URL = 'https://acdn.adnxs.com/ast/ast.js';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function appnexus(global, data) {
+  const args = [];
+  args.push('size=' + data.width + 'x' + data.height);
+  if (data.tagid) {
+    validateData(data, ['tagid']);
+    args.push('id=' + encodeURIComponent(data.tagid));
+    writeScript(global, constructTtj(args));
+    return;
+  } else if (data.member && data.code) {
+    validateData(data, ['member', 'code']);
+    args.push('member=' + encodeURIComponent(data.member));
+    args.push('inv_code=' + encodeURIComponent(data.code));
+    writeScript(global, constructTtj(args));
+    return;
+  }
+
+  /**
+   * Construct the TTJ URL.
+   * Note params should be properly encoded first (use encodeURIComponent);
+   * @param  {!Array<string>} args query string params to add to the base URL.
+   * @return {string}      Formated TTJ URL.
+   */
+  function constructTtj(args) {
+    let url = 'https://ib.adnxs.com/ttj?';
+    for (let i = 0; i < args.length; i++) {
+      //append arg to query. Please encode arg first.
+      url += args[i] + '&';
+    }
+
+    return url;
+  }
+
+  appnexusAst(global, data);
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function appnexusAst(global, data) {
+  validateData(data, ['adUnits']);
+  let apntag;
+  if (context.isMaster) {
+    // in case we are in the master iframe, we load AST
+    context.master.apntag = context.master.apntag || {};
+    context.master.apntag.anq = context.master.apntag.anq || [];
+    apntag = context.master.apntag;
+
+    context.master.adUnitTargetIds = context.master.adUnitTargetIds || [];
+
+    context.master.adUnitTargetIds = data.adUnits.map(
+      (adUnit) => adUnit.targetId
+    );
+
+    apntag.anq.push(() => {
+      if (data.pageOpts) {
+        apntag.anq.push(() => {
+          //output console information
+          apntag.debug = data.debug || false;
+          apntag.setPageOpts(data.pageOpts);
+        });
+      }
+
+      /** @type {!Array} */ (data.adUnits).forEach((adUnit) => {
+        apntag.defineTag(adUnit);
+      });
+    });
+    loadScript(global, APPNEXUS_AST_URL, () => {
+      apntag.anq.push(() => {
+        apntag.loadTags();
+      });
+    });
+  }
+
+  const div = global.document.createElement('div');
+  div.setAttribute('id', data.target);
+  const divContainer = global.document.getElementById('c');
+  if (divContainer) {
+    divContainer.appendChild(div);
+    setStyles(divContainer, {
+      top: '50%',
+      left: '50%',
+      bottom: '',
+      right: '',
+      transform: 'translate(-50%, -50%)',
+    });
+  }
+
+  if (!apntag) {
+    apntag = context.master.apntag;
+    //preserve a global reference
+    /** @type {{showTag: function(string, Object)}} global.apntag */
+    global.apntag = context.master.apntag;
+  }
+
+  if (!context.isMaster && data.adUnits) {
+    const newAddUnits = data.adUnits.filter((adUnit) => {
+      return context.master.adUnitTargetIds.indexOf(adUnit.targetId) === -1;
+    });
+    if (newAddUnits.length) {
+      apntag.anq.push(() => {
+        /** @type {!Array} */ (newAddUnits).forEach((adUnit) => {
+          apntag.defineTag(adUnit);
+          context.master.adUnitTargetIds.push(adUnit.targetId);
+        });
+        apntag.loadTags();
+      });
+    }
+  }
+
+  // check for ad responses received for a slot but before listeners are
+  // registered, for example when an above-the-fold ad is scrolled into view
+  apntag.anq.push(() => {
+    if (typeof apntag.checkAdAvailable === 'function') {
+      const getAd = apntag.checkAdAvailable(data.target);
+      getAd({resolve: isAdAvailable, reject: context.noContentAvailable});
+    }
+  });
+
+  apntag.anq.push(() => {
+    apntag.onEvent('adAvailable', data.target, isAdAvailable);
+    apntag.onEvent('adNoBid', data.target, context.noContentAvailable);
+  });
+
+  /**
+   * resolve getAd with an available ad object
+   *
+   * @param {{targetId: string}} adObj
+   */
+  function isAdAvailable(adObj) {
+    global.context.renderStart({width: adObj.width, height: adObj.height});
+    global.apntag.showTag(adObj.targetId, global.window);
+  }
+}
diff --git a/ads/appnexus.md b/ads/vendors/appnexus.md
similarity index 100%
rename from ads/appnexus.md
rename to ads/vendors/appnexus.md
diff --git a/ads/vendors/appvador.js b/ads/vendors/appvador.js
new file mode 100644
index 0000000000000..427d86fc1340a
--- /dev/null
+++ b/ads/vendors/appvador.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function appvador(global, data) {
+  validateData(data, ['id'], ['options', 'jsType', 'customScriptSrc']);
+
+  const container = global.document.getElementById('c');
+  const apvDiv = global.document.createElement('div');
+  apvDiv.setAttribute('id', 'apvad-' + data.id);
+  container.appendChild(apvDiv);
+
+  const scriptUrl = data.customScriptSrc
+    ? data.customScriptSrc
+    : 'https://cdn.apvdr.com/js/' +
+      (data.jsType ? encodeURIComponent(data.jsType) : 'VastAdUnit') +
+      '.min.js';
+  const apvScript =
+    'new APV.' +
+    (data.jsType ? data.jsType : 'VASTAdUnit') +
+    '({s:"' +
+    data.id +
+    '",isAmpAd:true' +
+    (data.options ? ',' + data.options : '') +
+    '}).load();';
+
+  const cb = function () {
+    const apvLoadScript = global.document.createElement('script');
+    apvLoadScript.text = apvScript;
+    container.appendChild(apvLoadScript);
+  };
+
+  writeScript(global, scriptUrl, cb);
+}
diff --git a/ads/appvador.md b/ads/vendors/appvador.md
similarity index 91%
rename from ads/appvador.md
rename to ads/vendors/appvador.md
index a0ff9d4122943..efa942b76d57c 100644
--- a/ads/appvador.md
+++ b/ads/vendors/appvador.md
@@ -34,10 +34,10 @@ For configuration semantics, contact [AppVador](http://www.appvador.com/).
 
 ### Required Parameters
 
-- `data-id`
+-   `data-id`
 
 ### Optional parameters
 
-- `data-options`
-- `data-js-type`
-- `data-custom-script-src`
+-   `data-options`
+-   `data-js-type`
+-   `data-custom-script-src`
diff --git a/ads/vendors/atomx.js b/ads/vendors/atomx.js
new file mode 100644
index 0000000000000..6e6ee1b5ccd76
--- /dev/null
+++ b/ads/vendors/atomx.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function atomx(global, data) {
+  const optionals = ['click', 'uv1', 'uv2', 'uv3', 'context'];
+
+  validateData(data, ['id'], optionals);
+
+  const args = [
+    'size=' + data.width + 'x' + data.height,
+    'id=' + encodeURIComponent(data.id),
+  ];
+
+  for (let i = 0; i < optionals.length; i++) {
+    const optional = optionals[i];
+    if (optional in data) {
+      args.push(optional + '=' + encodeURIComponent(data[optional]));
+    }
+  }
+
+  writeScript(global, 'https://s.ato.mx/p.js#' + args.join('&'));
+}
diff --git a/ads/vendors/atomx.md b/ads/vendors/atomx.md
new file mode 100644
index 0000000000000..d043ec68efb40
--- /dev/null
+++ b/ads/vendors/atomx.md
@@ -0,0 +1,37 @@
+<!---
+Copyright 2016 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.
+-->
+
+# Atomx
+
+## Example
+
+```html
+<amp-ad width="300" height="250" type="atomx" data-id="1234"> </amp-ad>
+```
+
+## Configuration
+
+For configuration information, see [atomx documentation](https://wiki.atomx.com/tags).
+
+### Required Parameters
+
+-   `data-id` - placement ID
+
+### Optional parameters
+
+-   `data-click` - URL to pre-pend to the click URL to enable tracking.
+-   `data-uv1`, `data-uv2`, `data-uv3` - User value to pass in to the tag. Can be used to track & report on custom values. Needs to be a whole number between 1 and 4,294,967,295.
+-   `data-context` - Conversion Callback Context
diff --git a/ads/vendors/baidu.js b/ads/vendors/baidu.js
new file mode 100644
index 0000000000000..73b47602174cc
--- /dev/null
+++ b/ads/vendors/baidu.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function baidu(global, data) {
+  validateData(data, ['cproid']);
+
+  const id = '_' + Math.random().toString(36).slice(2);
+  const container = global.document.createElement('div');
+  container.id = id;
+  global.document.getElementById('c').appendChild(container);
+
+  global.slotbydup = global.slotbydup || [];
+  global.slotbydup.push({
+    id: data['cproid'],
+    container: id,
+    display: 'inlay-fix',
+    async: true,
+  });
+
+  global.addEventListener('message', () => {
+    global.context.renderStart();
+  });
+
+  loadScript(
+    global,
+    'https://dup.baidustatic.com/js/dm.js',
+    () => {},
+    () => {
+      // noContentAvailable should be called,
+      // if parent iframe receives no message.
+      // setTimeout can work, but it's not that reliable.
+      // So, only the faliure of JS loading is dealed with for now.
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/baidu.md b/ads/vendors/baidu.md
similarity index 95%
rename from ads/baidu.md
rename to ads/vendors/baidu.md
index 9ad1d51e17b82..ea3459bdb4a19 100644
--- a/ads/baidu.md
+++ b/ads/vendors/baidu.md
@@ -28,4 +28,4 @@ For additional detials and support, see [baidu ad union website](http://union.ba
 
 ### Required Parameters
 
-- `data-cproid` - baidu union ad id
+-   `data-cproid` - baidu union ad id
diff --git a/ads/vendors/beaverads.js b/ads/vendors/beaverads.js
new file mode 100644
index 0000000000000..d64ff843093ee
--- /dev/null
+++ b/ads/vendors/beaverads.js
@@ -0,0 +1,41 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function beaverads(global, data) {
+  validateData(data, ['blockId']);
+
+  const url =
+    'https://code.beaverads.com/data/' +
+    encodeURIComponent(data['blockId']) +
+    '.js?async=1&div=c';
+
+  loadScript(
+    global,
+    url,
+    () => {
+      global.context.renderStart();
+    },
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/beaverads.md b/ads/vendors/beaverads.md
similarity index 97%
rename from ads/beaverads.md
rename to ads/vendors/beaverads.md
index 467aa3d440604..aa221d9734c33 100644
--- a/ads/beaverads.md
+++ b/ads/vendors/beaverads.md
@@ -29,4 +29,4 @@ For more information, please [see FAQ](https://www.beaverads.com/faq).
 
 Required parameters:
 
-- data-block-id
+-   data-block-id
diff --git a/ads/vendors/bidtellect.js b/ads/vendors/bidtellect.js
new file mode 100644
index 0000000000000..7601facdfb69f
--- /dev/null
+++ b/ads/vendors/bidtellect.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function bidtellect(global, data) {
+  const requiredParams = ['t', 'pid', 'sid'];
+  const optionalParams = [
+    'sname',
+    'pubid',
+    'pubname',
+    'renderid',
+    'bestrender',
+    'autoplay',
+    'playbutton',
+    'videotypeid',
+    'videocloseicon',
+    'targetid',
+    'bustframe',
+  ];
+  validateData(data, requiredParams, optionalParams);
+  let params = '?t=' + encodeURIComponent(data.t);
+  params += '&pid=' + encodeURIComponent(data.pid);
+  params += '&sid=' + encodeURIComponent(data.sid);
+  if (data.width) {
+    params += '&w=' + encodeURIComponent(data.width);
+  }
+  if (data.height) {
+    params += '&h=' + encodeURIComponent(data.height);
+  }
+  optionalParams.forEach(function (param) {
+    if (data[param]) {
+      params += '&' + param + '=' + encodeURIComponent(data[param]);
+    }
+  });
+  const url = 'https://cdn.bttrack.com/js/infeed/2.0/infeed.min.js' + params;
+  writeScript(global, url);
+}
diff --git a/ads/vendors/bidtellect.md b/ads/vendors/bidtellect.md
new file mode 100644
index 0000000000000..fe011bdd8f3af
--- /dev/null
+++ b/ads/vendors/bidtellect.md
@@ -0,0 +1,55 @@
+<!---
+Copyright 2017 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.
+-->
+
+# Bidtellect
+
+## Example
+
+```html
+<amp-ad
+  width="320"
+  height="200"
+  type="bidtellect"
+  data-t="20bc0442-8vec-41f8-9892-04be6e6c3521"
+  data-pid="815676411"
+  data-sid="234022"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For details on the configuration semantics, contact [Bidtellect](mailto:technology@bidtellect.com).
+
+### Required parameters
+
+-   `data-t`: Parent publisher security token.
+-   `data-pid`: The unique identifier for your placement.
+-   `data-sid`: Unique identifier for the site.
+
+### Optional Parameters:
+
+-   `data-sname`: Name of site that corresponds to the Site ID.
+-   `data-pubid`: Unique identifier for the publisher.
+-   `data-pubname`: Name of publisher that corresponds to the Publisher ID.
+-   `data-renderid`: Unique identifier of the placement widget.
+-   `data-bestrender`: Provides the best size and cropping for the placement.
+-   `data-autoplay`: Enables autoplay for video placements.
+-   `data-playbutton`: Onscreen play button for video placements.
+-   `data-videotypeid`: Defines how it will be rendered the video player.
+-   `data-videocloseicon`: Enable close button on the video player.
+-   `data-targetid`: Allows the placement to render inside a target HTML element.
+-   `data-bustframe`: Allows the placement to bust out of nested iframes recursively.
diff --git a/ads/vendors/blade.js b/ads/vendors/blade.js
new file mode 100644
index 0000000000000..33f39b9218452
--- /dev/null
+++ b/ads/vendors/blade.js
@@ -0,0 +1,87 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+import {tryParseJson} from '../../src/core/types/object/json';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function blade(global, data) {
+  // ensure mandatory fields
+  validateData(data, [
+    'width',
+    'height',
+    'blade_api_key',
+    'blade_player_id',
+    'blade_player_type',
+  ]);
+
+  const marcosObj = tryParseJson(data['blade_macros']) || {};
+  marcosObj['rand'] = Math.random().toString();
+  marcosObj['page_url'] = marcosObj['page_url'] || global.context.canonicalUrl;
+  const macros = {...marcosObj};
+  macros.width = data.width;
+  macros.height = data.height;
+
+  const containerId = `player-${data['blade_api_key']}-${data['blade_player_id']}`;
+  createContainer(containerId);
+
+  const bladeConfig = `_bladeConfig-${containerId}`;
+  global[bladeConfig] = {
+    playerId: data['blade_player_id'],
+    apiKey: data['blade_api_key'],
+    version: '1.0',
+    macros,
+  };
+  const ctx = global.context;
+
+  const bladeOnLoad = `_bladeOnLoad-${containerId}`;
+  global[bladeOnLoad] = function (error, player) {
+    if (error) {
+      global.context.noContentAvailable();
+      return;
+    }
+    ctx.reportRenderedEntityIdentifier(containerId);
+    ctx.renderStart({
+      width: player.width,
+      height: player.height,
+    });
+  };
+
+  const servingDomain = data.servingDomain
+    ? encodeURIComponent(data.servingDomain)
+    : 'ssr.streamrail.net';
+
+  loadScript(
+    global,
+    `https://${servingDomain}/js/${data['blade_api_key']}/${data['blade_player_id']}/player.js?t=${data['blade_player_type']}&callback=${bladeOnLoad}&config=${bladeConfig}&c=${containerId}`,
+    undefined,
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+  /**
+   * @param {string} elemId
+   */
+  function createContainer(elemId) {
+    const d = global.document.createElement('div');
+    d.id = elemId;
+    d.classList.add('blade');
+    global.document.getElementById('c').appendChild(d);
+  }
+}
diff --git a/ads/blade.md b/ads/vendors/blade.md
similarity index 90%
rename from ads/blade.md
rename to ads/vendors/blade.md
index a160d6313dc98..95d724f622785 100644
--- a/ads/blade.md
+++ b/ads/vendors/blade.md
@@ -34,8 +34,8 @@ limitations under the License.
 
 ### Required parameters
 
-- `width`
-- `height`
-- `data-blade_player_type`
-- `data-blade_player_id`
-- `data-blade_api_key`
+-   `width`
+-   `height`
+-   `data-blade_player_type`
+-   `data-blade_player_id`
+-   `data-blade_api_key`
diff --git a/ads/vendors/brainy.js b/ads/vendors/brainy.js
new file mode 100644
index 0000000000000..38daff7a068ea
--- /dev/null
+++ b/ads/vendors/brainy.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function brainy(global, data) {
+  validateData(data, [], ['aid', 'slotId']);
+
+  const url =
+    'https://proparm.jp/ssp/p/js1' +
+    '?_aid=' +
+    encodeURIComponent(data['aid']) +
+    '&amp;_slot=' +
+    encodeURIComponent(data['slotId']);
+
+  writeScript(global, url);
+}
diff --git a/ads/brainy.md b/ads/vendors/brainy.md
similarity index 96%
rename from ads/brainy.md
rename to ads/vendors/brainy.md
index 30d8d1bc4acea..5718975e3592e 100644
--- a/ads/brainy.md
+++ b/ads/vendors/brainy.md
@@ -35,5 +35,5 @@ For configuration details and to generate your tags, contact http://www.opt.ne.j
 
 Supported parameters:
 
-- `data-aid`
-- `data-slot-id`
+-   `data-aid`
+-   `data-slot-id`
diff --git a/ads/vendors/bringhub.js b/ads/vendors/bringhub.js
new file mode 100644
index 0000000000000..6a77038a7ae99
--- /dev/null
+++ b/ads/vendors/bringhub.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function bringhub(global, data) {
+  global._bringhub = global._bringhub || {
+    viewId: global.context.pageViewId,
+    htmlURL: data['htmlurl'] || global.context.canonicalUrl,
+    ampURL: data['ampurl'] || global.context.sourceUrl,
+    referrer: data['referrer'] || global.context.referrer,
+  };
+
+  writeScript(
+    global,
+    `https://static.bh-cdn.com/msf/amp-loader.js?v=${Date.now()}`,
+    function () {
+      loadScript(
+        global,
+        `https://static.bh-cdn.com/msf/amp-widget.js?v=${global._bringhub.hash}`
+      );
+    }
+  );
+}
diff --git a/ads/vendors/bringhub.md b/ads/vendors/bringhub.md
new file mode 100644
index 0000000000000..66be2e3ba0942
--- /dev/null
+++ b/ads/vendors/bringhub.md
@@ -0,0 +1,40 @@
+<!---
+Copyright 2015 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.
+-->
+
+# Bringhub
+
+## Example installation of the Bringhub Mini-Storefront
+
+### Basic
+
+```html
+<amp-embed
+  width="600"
+  height="320"
+  type="bringhub"
+  layout="responsive"
+  heights="(max-width: 270px) 1280px, (max-width:553px) 640px, 338px"
+>
+</amp-embed>
+```
+
+## Configuration
+
+### Optional parameters
+
+-   `htmlURL`: The URL of the standard html version of the page. Defaults to `global.context.canonicalURL`.
+-   `ampURL`: The URL of the AMP version of the page. Defaults to `global.context.sourceUrl`.
+-   `articleSelector`: The CSS Selector of the article body on the page. Contact your Bringhub Account Manager for requirements.
diff --git a/ads/vendors/broadstreetads.js b/ads/vendors/broadstreetads.js
new file mode 100644
index 0000000000000..1a164d1bc71d5
--- /dev/null
+++ b/ads/vendors/broadstreetads.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function broadstreetads(global, data) {
+  validateData(
+    data,
+    ['network', 'zone', 'width', 'height'],
+    ['keywords', 'place']
+  );
+
+  data.place = data.place || 0;
+
+  const placeholderID = 'placement_' + data.zone + '_' + data.place;
+
+  // placeholder div
+  const d = global.document.createElement('div');
+  d.setAttribute('id', placeholderID);
+  global.document.getElementById('c').appendChild(d);
+
+  global.broadstreet = global.broadstreet || {};
+  global.broadstreet.loadAMPZone =
+    global.broadstreet.loadAMPZone || (() => ({}));
+  global.broadstreet.run = global.broadstreet.run || [];
+  global.broadstreet.run.push(() => {
+    global.broadstreet.loadAMPZone(d, {
+      amp: true,
+      ampGlobal: global,
+      ampData: data,
+      height: data.height,
+      keywords: data.keywords,
+      networkId: data.network,
+      place: data.place,
+      softKeywords: true,
+      width: data.width,
+      zoneId: data.zone,
+    });
+  });
+  loadScript(global, 'https://cdn.broadstreetads.com/init-2.min.js');
+}
diff --git a/ads/broadstreetads.md b/ads/vendors/broadstreetads.md
similarity index 90%
rename from ads/broadstreetads.md
rename to ads/vendors/broadstreetads.md
index 62df5c1e4922a..fb407399eaac5 100644
--- a/ads/broadstreetads.md
+++ b/ads/vendors/broadstreetads.md
@@ -35,12 +35,12 @@ For configuration semantics, see the [Broadstreet Ads documentation](https://inf
 
 ### Required parameters
 
-- `width`
-- `height`
-- `data-network`
-- `data-zone`
+-   `width`
+-   `height`
+-   `data-network`
+-   `data-zone`
 
 ### Optional parameters
 
-- `data-place`
-- `data-keywords`
+-   `data-place`
+-   `data-keywords`
diff --git a/ads/vendors/byplay.js b/ads/vendors/byplay.js
new file mode 100644
index 0000000000000..cddf4df14cd65
--- /dev/null
+++ b/ads/vendors/byplay.js
@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function byplay(global, data) {
+  validateData(data, ['vastUrl']);
+
+  global.BYPLAY_VAST_URL = data['vastUrl'];
+
+  loadScript(global, 'https://cdn.byplay.net/amp-byplay-v2.js');
+}
diff --git a/ads/byplay.md b/ads/vendors/byplay.md
similarity index 97%
rename from ads/byplay.md
rename to ads/vendors/byplay.md
index bd3f130382779..3885bd16c1d81 100644
--- a/ads/byplay.md
+++ b/ads/vendors/byplay.md
@@ -34,4 +34,4 @@ For configuration details and to generate your tags, please contact email: [bypl
 
 Required parameters:
 
-- `data-vast-url`
+-   `data-vast-url`
diff --git a/ads/vendors/caajainfeed.js b/ads/vendors/caajainfeed.js
new file mode 100644
index 0000000000000..e81602b937e63
--- /dev/null
+++ b/ads/vendors/caajainfeed.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function caajainfeed(global, data) {
+  validateData(
+    data,
+    [],
+    [
+      'adSpot',
+      'format',
+      'test',
+      'optout',
+      'offset',
+      'ipv4',
+      'ipv6',
+      'networkReachability',
+      'osName',
+      'osVersion',
+      'osLang',
+      'osTimezone',
+      'deviceVersion',
+      'appId',
+      'appVersion',
+      'kv',
+      'uids',
+      'template',
+      'protocol',
+      'fields',
+    ]
+  );
+
+  global.caAjaInfeedConfig = data;
+  loadScript(global, 'https://cdn.amanad.adtdp.com/sdk/ajaamp.js');
+}
diff --git a/ads/vendors/caajainfeed.md b/ads/vendors/caajainfeed.md
new file mode 100644
index 0000000000000..796c9a8d1fbff
--- /dev/null
+++ b/ads/vendors/caajainfeed.md
@@ -0,0 +1,60 @@
+<!---
+Copyright 2016 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.
+-->
+
+# CA A.J.A. Infeed
+
+## Example
+
+```html
+<amp-ad
+  width="320"
+  height="120"
+  type="caajainfeed"
+  data-ad-spot="thtuegn1pAQ"
+  data-test="true"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For configuration details, please email amb-nad@cyberagent.co.jp.
+
+### Required parameters
+
+-   `data-ad-spot`
+
+### Optional parameters
+
+-   `data-format`
+-   `data-test`
+-   `data-optout`
+-   `data-offset`
+-   `data-ipv4`
+-   `data-ipv6`
+-   `data-network-reachability`
+-   `data-os-name`
+-   `data-os-version`
+-   `data-os-lang`
+-   `data-os-timezone`
+-   `data-device-version`
+-   `data-app-id`
+-   `data-app-version`
+-   `data-kv`
+-   `data-uids`
+-   `data-template`
+-   `data-protocol`
+-   `data-fields`
diff --git a/ads/vendors/capirs.js b/ads/vendors/capirs.js
new file mode 100644
index 0000000000000..728c18300f7bf
--- /dev/null
+++ b/ads/vendors/capirs.js
@@ -0,0 +1,99 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function capirs(global, data) {
+  validateData(data, ['begunAutoPad', 'begunBlockId']);
+
+  if (data['customCss']) {
+    const style = global.document.createElement('style');
+
+    if (style.styleSheet) {
+      style.styleSheet.cssText = data['customCss'];
+    } else {
+      style.appendChild(global.document.createTextNode(data['customCss']));
+    }
+
+    global.document.getElementById('c').appendChild(style);
+  }
+
+  global['begun_callbacks'] = {
+    lib: {
+      init: () => {
+        const block = global.document.createElement('div');
+        block.id = 'x-' + Math.round(Math.random() * 1e8).toString(36);
+
+        global.document.getElementById('c').appendChild(block);
+
+        global['Adf']['banner']['ssp'](block.id, data['params'], {
+          'begun-auto-pad': data['begunAutoPad'],
+          'begun-block-id': data['begunBlockId'],
+        });
+      },
+    },
+    block: {
+      draw: (feed) => {
+        const banner = feed['banners']['graph'][0];
+
+        global.context.renderStart({
+          width: getWidth(global, banner),
+          height: banner.height,
+        });
+
+        const reportId = 'capirs-' + banner['banner_id'];
+        global.context.reportRenderedEntityIdentifier(reportId);
+      },
+      unexist: function () {
+        global.context.noContentAvailable();
+      },
+    },
+  };
+
+  loadScript(global, '//ssp.rambler.ru/capirs_async.js');
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} banner
+ * @return {*} TODO(#23582): Specify return type
+ */
+function getWidth(global, banner) {
+  let width;
+
+  if (isResponsiveAd(banner)) {
+    width = Math.max(
+      global.document.documentElement./*OK*/ clientWidth,
+      global.window./*OK*/ innerWidth || 0
+    );
+  } else {
+    width = banner.width;
+  }
+
+  return width;
+}
+
+/**
+ * @param {!Object} banner
+ * @return {boolean}
+ */
+function isResponsiveAd(banner) {
+  return banner.width.indexOf('%') !== -1;
+}
diff --git a/ads/capirs.md b/ads/vendors/capirs.md
similarity index 92%
rename from ads/capirs.md
rename to ads/vendors/capirs.md
index 06924ec99a7a8..09772b2770ac3 100644
--- a/ads/capirs.md
+++ b/ads/vendors/capirs.md
@@ -36,6 +36,6 @@ For semantics of configuration, please see Rambler SSP documentation.
 
 Supported parameters:
 
-- `data-begun-auto-pad`
-- `data-begun-block-id`
-- `data-custom-css`
+-   `data-begun-auto-pad`
+-   `data-begun-block-id`
+-   `data-custom-css`
diff --git a/ads/vendors/caprofitx.js b/ads/vendors/caprofitx.js
new file mode 100644
index 0000000000000..a995c841327ec
--- /dev/null
+++ b/ads/vendors/caprofitx.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function caprofitx(global, data) {
+  global.caprofitxConfig = data;
+  loadScript(global, 'https://cdn.caprofitx.com/tags/amp/profitx_amp.js');
+}
diff --git a/ads/caprofitx.md b/ads/vendors/caprofitx.md
similarity index 100%
rename from ads/caprofitx.md
rename to ads/vendors/caprofitx.md
diff --git a/ads/vendors/cedato.js b/ads/vendors/cedato.js
new file mode 100644
index 0000000000000..a55c93de7ded5
--- /dev/null
+++ b/ads/vendors/cedato.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {parseUrlDeprecated} from '../../src/url';
+import {setStyles} from '../../src/style';
+import {validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function cedato(global, data) {
+  const requiredParams = ['id'];
+  const optionalParams = [
+    'domain',
+    'servingDomain',
+    'subid',
+    'version',
+    'extraParams',
+  ];
+  validateData(data, requiredParams, optionalParams);
+
+  if (!data || !data.id) {
+    global.context.noContentAvailable();
+    return;
+  }
+
+  const cb = Math.floor(Math.random() * 10000);
+  const domain =
+    data.domain || parseUrlDeprecated(global.context.sourceUrl).origin;
+
+  /* Create div for ad to target */
+  const playerDiv = global.document.createElement('div');
+  playerDiv.id = 'video' + data.id + cb;
+  setStyles(playerDiv, {
+    width: '100%',
+    height: '100%',
+  });
+  const playerScript = global.document.createElement('script');
+  const servingDomain = data.servingDomain
+    ? encodeURIComponent(data.servingDomain)
+    : 'algovid.com';
+  const srcParams = [
+    'https://p.' + servingDomain + '/player/player.js',
+    '?p=' + encodeURIComponent(data.id),
+    '&cb=' + cb,
+    '&w=' + encodeURIComponent(data.width),
+    '&h=' + encodeURIComponent(data.height),
+    data.version ? '&pv=' + encodeURIComponent(data.version) : '',
+    data.subid ? '&subid=' + encodeURIComponent(data.subid) : '',
+    domain ? '&d=' + encodeURIComponent(domain) : '',
+    data.extraParams || '', // already encoded url query string
+  ];
+
+  playerScript.onload = () => {
+    global.context.renderStart();
+  };
+
+  playerScript.src = srcParams.join('');
+  playerDiv.appendChild(playerScript);
+  global.document.getElementById('c').appendChild(playerDiv);
+}
diff --git a/ads/vendors/cedato.md b/ads/vendors/cedato.md
new file mode 100644
index 0000000000000..844d78b50a3cb
--- /dev/null
+++ b/ads/vendors/cedato.md
@@ -0,0 +1,46 @@
+<!---
+Copyright 2018 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.
+-->
+
+# Cedato
+
+## Example
+
+```html
+<amp-ad
+  width="640"
+  height="360"
+  type="cedato"
+  data-id="303084288"
+  data-subid="subid"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For additional details and support contact support@cedato.com.
+
+### Required parameters
+
+-   `data-id`: the id of the player - supply ID
+
+### Optional parameters
+
+-   `data-domain`: page domain reported to the player
+-   `data-serving-domain`: the domain from which the player is served
+-   `data-subid`: player subid
+-   `data-version`: version of the player that is being used
+-   `data-extra-params`: additional player tag parameters can be set in the 'extra-params' query string, all parts have to be encoded.
diff --git a/ads/vendors/colombia.js b/ads/vendors/colombia.js
new file mode 100644
index 0000000000000..df5550d0ec2d6
--- /dev/null
+++ b/ads/vendors/colombia.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function colombia(global, data) {
+  validateData(data, [
+    'clmb_slot',
+    'clmb_position',
+    'clmb_section',
+    'clmb_divid',
+    'loadingStrategy',
+  ]);
+  // push the two object into the '_colombia' global
+  (global._colombia = global._colombia || []).push({
+    clmbslot: data.clmb_slot,
+    clmbposition: data.clmb_position,
+    clmbsection: data.clmb_section,
+    clmbdivid: data.clmb_divid,
+  });
+  // install observation on entering/leaving the view
+  global.context.observeIntersection(function (newrequest) {
+    /** @type {!Array} */ (newrequest).forEach(function (d) {
+      if (d.intersectionRect.height > 0) {
+        global._colombia.push({
+          visible: true,
+          rect: d,
+        });
+      }
+    });
+  });
+  loadScript(
+    global,
+    'https://static.clmbtech.com/ad/commons/js/colombia-amp.js'
+  );
+}
diff --git a/ads/colombia.md b/ads/vendors/colombia.md
similarity index 89%
rename from ads/colombia.md
rename to ads/vendors/colombia.md
index 7f3924862336f..26c53cc0e7e8f 100644
--- a/ads/colombia.md
+++ b/ads/vendors/colombia.md
@@ -37,6 +37,6 @@ For configuration semantics, contact care@timesadcenter.com.
 
 Supported parameters:
 
-- `data-clmb_slot`: Ad slot
-- `data-clmb_position` : Ad position
-- `data-clmb_section` : Ad sections
+-   `data-clmb_slot`: Ad slot
+-   `data-clmb_position` : Ad position
+-   `data-clmb_section` : Ad sections
diff --git a/ads/vendors/conative.js b/ads/vendors/conative.js
new file mode 100644
index 0000000000000..35ad61c113a98
--- /dev/null
+++ b/ads/vendors/conative.js
@@ -0,0 +1,53 @@
+/**
+ * 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function conative(global, data) {
+  validateData(data, ['domain', 'adslot', 'height'], ['preview']);
+
+  data.domain = data.domain || null;
+  data.adslot = data.adslot || null;
+  data.preview = data.preview || null;
+
+  window.dmConativeData = window.dmConativeData || {};
+  window.dmConativeData.domain = window.dmConativeData.domain || data.domain;
+  window.dmConativeData.adslot = window.dmConativeData.adslot || data.adslot;
+  window.dmConativeData.preview = window.dmConativeData.preview || data.preview;
+  window.dmConativeData.visibility = window.dmConativeData.visibility || 0;
+
+  window.context.observeIntersection(function (changes) {
+    /** @type {!Array} */ (changes).forEach(function (c) {
+      window.dmConativeData.visibility = parseInt(
+        (c.intersectionRect.height / c.boundingClientRect.height) * 100,
+        10
+      );
+    });
+  });
+
+  if (data.domain) {
+    writeScript(
+      global,
+      '//s3-eu-west-1.amazonaws.com/ccc-adscript/serve/domain/' +
+        data.domain +
+        '/config.js'
+    );
+  }
+}
diff --git a/ads/conative.md b/ads/vendors/conative.md
similarity index 85%
rename from ads/conative.md
rename to ads/vendors/conative.md
index 6c18dbd2fe158..020bc4cb3ba2b 100644
--- a/ads/conative.md
+++ b/ads/vendors/conative.md
@@ -20,7 +20,7 @@ CONATIVE support for AMP.
 
 ## Example
 
-- All CONATIVE `<amp-ad>` tags require the `width`, `height`, `layout`, `sizes` and `type="conative"` parameters.
+-   All CONATIVE `<amp-ad>` tags require the `width`, `height`, `layout`, `sizes` and `type="conative"` parameters.
 
 ```html
 <amp-ad
@@ -41,9 +41,9 @@ For configuration details and to generate your tags, please contact https://www.
 
 ### Required parameters
 
-- `data-domain`
-- `data-adslot`
+-   `data-domain`
+-   `data-adslot`
 
 ### Optional parameters
 
-- `data-preview`
+-   `data-preview`
diff --git a/ads/vendors/connatix.js b/ads/vendors/connatix.js
new file mode 100644
index 0000000000000..1a21956b3520e
--- /dev/null
+++ b/ads/vendors/connatix.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {hasOwn} from '../../src/core/types/object';
+import {tryParseJson} from '../../src/core/types/object/json';
+import {validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function connatix(global, data) {
+  validateData(data, ['connatix']);
+
+  // Because 3p's loadScript does not allow for data attributes,
+  // we will write the JS tag ourselves.
+  const script = global.document.createElement('script');
+  const cnxData = Object.assign(Object(tryParseJson(data['connatix'])));
+  global.cnxAmpAd = true;
+  for (const key in cnxData) {
+    if (hasOwn(cnxData, key)) {
+      script.setAttribute(key, cnxData[key]);
+    }
+  }
+
+  window.addEventListener(
+    'connatix_no_content',
+    function () {
+      window.context.noContentAvailable();
+    },
+    false
+  );
+
+  script.onload = () => {
+    global.context.renderStart();
+  };
+
+  script.src = 'https://cdn.connatix.com/min/connatix.renderer.infeed.min.js';
+  global.document.getElementById('c').appendChild(script);
+}
diff --git a/ads/connatix.md b/ads/vendors/connatix.md
similarity index 97%
rename from ads/connatix.md
rename to ads/vendors/connatix.md
index 4aa8b1ef01d76..9154452bef979 100644
--- a/ads/connatix.md
+++ b/ads/vendors/connatix.md
@@ -35,4 +35,4 @@ For configuration semantics, contact contact@connatix.com.
 
 ### Required parameters
 
-- `data-connatix`
+-   `data-connatix`
diff --git a/ads/vendors/contentad.js b/ads/vendors/contentad.js
new file mode 100644
index 0000000000000..0f5102e29cb1e
--- /dev/null
+++ b/ads/vendors/contentad.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {parseUrlDeprecated} from '../../src/url';
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function contentad(global, data) {
+  validateData(data, [], ['id', 'd', 'wid', 'url']);
+  global.id = data.id;
+  global.d = data.d;
+  global.wid = data.wid;
+  global.url = data.url;
+
+  /* Create div for ad to target */
+  const cadDiv = window.document.createElement('div');
+  cadDiv.id = 'contentad' + global.wid;
+  window.document.body.appendChild(cadDiv);
+
+  /* Pass Source URL */
+  let {sourceUrl} = window.context;
+  if (data.url) {
+    const domain = data.url || window.atob(data.d);
+    sourceUrl = sourceUrl.replace(parseUrlDeprecated(sourceUrl).host, domain);
+  }
+
+  /* Build API URL */
+  const cadApi =
+    'https://api.content-ad.net/Scripts/widget2.aspx' +
+    '?id=' +
+    encodeURIComponent(global.id) +
+    '&d=' +
+    encodeURIComponent(global.d) +
+    '&wid=' +
+    global.wid +
+    '&url=' +
+    encodeURIComponent(sourceUrl) +
+    '&cb=' +
+    Date.now();
+
+  /* Call Content.ad Widget */
+  writeScript(global, cadApi);
+}
diff --git a/ads/contentad.md b/ads/vendors/contentad.md
similarity index 91%
rename from ads/contentad.md
rename to ads/vendors/contentad.md
index d642384c55bd6..600ce7b96eba9 100644
--- a/ads/contentad.md
+++ b/ads/vendors/contentad.md
@@ -42,6 +42,6 @@ For configuration semantics, please see [Content.ad AMP Widget](http://help.cont
 
 Supported parameters:
 
-- `data-id`: Ad Widget GUID
-- `data-d`: Ad Widget Domain ID
-- `data-wid`: Ad Widget ID
+-   `data-id`: Ad Widget GUID
+-   `data-d`: Ad Widget Domain ID
+-   `data-wid`: Ad Widget ID
diff --git a/ads/vendors/criteo.js b/ads/vendors/criteo.js
new file mode 100644
index 0000000000000..32e50b1c2b9f5
--- /dev/null
+++ b/ads/vendors/criteo.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {dev} from '../../src/log';
+import {loadScript} from '../../3p/3p';
+
+/* global Criteo: false */
+
+/** @const {string} */
+const TAG = 'CRITEO';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function criteo(global, data) {
+  loadScript(global, 'https://static.criteo.net/js/ld/publishertag.js', () => {
+    if (!data.tagtype || data.tagtype === 'passback') {
+      Criteo.DisplayAd({
+        zoneid: data.zone,
+        containerid: 'c',
+        integrationmode: 'amp',
+      });
+    } else if (data.tagtype === 'rta' || data.tagtype === 'standalone') {
+      dev().error(
+        TAG,
+        'You are using a deprecated Criteo integration',
+        data.tagtype
+      );
+    } else {
+      dev().error(
+        TAG,
+        'You are using an unknown Criteo integration',
+        data.tagtype
+      );
+    }
+  });
+}
diff --git a/ads/criteo.md b/ads/vendors/criteo.md
similarity index 89%
rename from ads/criteo.md
rename to ads/vendors/criteo.md
index f73a2b690ad57..20a152e855485 100644
--- a/ads/criteo.md
+++ b/ads/vendors/criteo.md
@@ -43,5 +43,5 @@ The ad size is based on the setup of your Criteo zone. The `width` and `height`
 
 Supported parameters:
 
-- `data-tagtype`: identifies the used Criteo technology. Must be "passback". Required.
-- `data-zone`: your Criteo zone identifier. Required.
+-   `data-tagtype`: identifies the used Criteo technology. Must be "passback". Required.
+-   `data-zone`: your Criteo zone identifier. Required.
diff --git a/ads/vendors/csa.js b/ads/vendors/csa.js
new file mode 100644
index 0000000000000..b96a5581fee35
--- /dev/null
+++ b/ads/vendors/csa.js
@@ -0,0 +1,398 @@
+/**
+ * Copyright 2015 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.
+ */
+import {devAssert} from '../../src/log';
+import {getStyle, setStyle, setStyles} from '../../src/style';
+import {loadScript, validateData} from '../../3p/3p';
+import {tryParseJson} from '../../src/core/types/object/json';
+
+// Keep track of current height of AMP iframe
+let currentAmpHeight = null;
+
+// Height of overflow element
+const overflowHeight = 40;
+
+/**
+ * Enum for different AdSense Products
+ * @enum {number}
+ * @visibleForTesting
+ */
+export const AD_TYPE = {
+  /** Value if we can't determine which product to request */
+  UNSUPPORTED: 0,
+  /** AdSense for Search */
+  AFS: 1,
+  /** AdSense for Shopping */
+  AFSH: 2,
+  /** AdSense for Shopping, backfilled with AdSense for Search */
+  AFSH_BACKFILL: 3,
+};
+
+/**
+ * Request Custom Search Ads (Adsense for Search or AdSense for Shopping).
+ * @param {!Window} global The window object of the iframe
+ * @param {!Object} data
+ */
+export function csa(global, data) {
+  // Get parent width in case we want to override
+  const width = global.document.body./*OK*/ clientWidth;
+
+  validateData(
+    data,
+    [],
+    [
+      'afshPageOptions',
+      'afshAdblockOptions',
+      'afsPageOptions',
+      'afsAdblockOptions',
+      'ampSlotIndex',
+    ]
+  );
+
+  // Add the ad container to the document
+  const containerDiv = global.document.createElement('div');
+  const containerId = 'csacontainer';
+  containerDiv.id = containerId;
+  global.document.getElementById('c').appendChild(containerDiv);
+
+  const pageOptions = {source: 'amp', referer: global.context.referrer};
+  const adblockOptions = {container: containerId};
+
+  // Parse all the options
+  const afshPage = Object.assign(
+    Object(tryParseJson(data['afshPageOptions'])),
+    pageOptions
+  );
+  const afsPage = Object.assign(
+    Object(tryParseJson(data['afsPageOptions'])),
+    pageOptions
+  );
+  const afshAd = Object.assign(
+    Object(tryParseJson(data['afshAdblockOptions'])),
+    adblockOptions
+  );
+  const afsAd = Object.assign(
+    Object(tryParseJson(data['afsAdblockOptions'])),
+    adblockOptions
+  );
+
+  // Special case for AFSh when "auto" is the requested width
+  if (afshAd['width'] == 'auto') {
+    afshAd['width'] = width;
+  }
+
+  // Event listener needed for iOS9 bug
+  global.addEventListener(
+    'orientationchange',
+    orientationChangeHandler.bind(null, global, containerDiv)
+  );
+
+  // Only call for ads once the script has loaded
+  loadScript(
+    global,
+    'https://www.google.com/adsense/search/ads.js',
+    requestCsaAds.bind(null, global, data, afsPage, afsAd, afshPage, afshAd)
+  );
+}
+
+/**
+ * Resize the AMP iframe if the CSA container changes in size upon rotation.
+ * This is needed for an iOS bug found in versions 10.0.1 and below that
+ * doesn't properly reflow the iframe upon orientation change.
+ * @param {!Window} global The window object of the iframe
+ * @param {!Element} containerDiv The CSA container
+ */
+function orientationChangeHandler(global, containerDiv) {
+  // Save the height of the container before the event listener triggers
+  const oldHeight = getStyle(containerDiv, 'height');
+  global.setTimeout(() => {
+    // Force DOM reflow and repaint.
+    // eslint-disable-next-line no-unused-vars
+    const ignore = global.document.body./*OK*/ offsetHeight;
+    // Capture new height.
+    const newHeight = getStyle(containerDiv, 'height');
+    // In older versions of iOS, this height will be different because the
+    // container height is resized.
+    // In Chrome and iOS 10.0.2 the height is the same because
+    // the container isn't resized.
+    if (oldHeight != newHeight && newHeight != currentAmpHeight) {
+      // style.height returns "60px" (for example), so turn this into an int
+      const newHeightPx = parseInt(newHeight, 10);
+      // Also update the onclick function to resize to the right height.
+      const overflow = global.document.getElementById('overflow');
+      if (overflow) {
+        overflow.onclick = () =>
+          requestResizeInternal(global, containerDiv, newHeightPx);
+      }
+      // Resize the container to the correct height.
+      requestResizeInternal(global, containerDiv, newHeightPx);
+    }
+  }, 250); /* 250 is time in ms to wait before executing orientation */
+}
+
+/**
+ * Hanlder for when a resize request succeeds
+ * Hide the overflow and resize the container
+ * @param {!Window} global The window object of the iframe
+ * @param {!Element} container The CSA container
+ * @param {number} requestedHeight The height of the resize request
+ * @visibleForTesting
+ */
+export function resizeSuccessHandler(global, container, requestedHeight) {
+  currentAmpHeight = requestedHeight;
+  const overflow = global.document.getElementById('overflow');
+  if (overflow) {
+    setStyle(overflow, 'display', 'none');
+    resizeCsa(container, requestedHeight);
+  }
+}
+
+/**
+ * Hanlder for When a resize request is denied
+ * If the container is larger than the AMP container and an overflow already
+ * exists, show the overflow and resize the container to fit inside the AMP
+ * container.  If an overflow doesn't exist, create one.
+ * @param {!Window} global The window object of the iframe
+ * @param {!Element} container The CSA container
+ * @param {number} requestedHeight The height of the resize request
+ * @visibleForTesting
+ */
+export function resizeDeniedHandler(global, container, requestedHeight) {
+  const overflow = global.document.getElementById('overflow');
+  const containerHeight = parseInt(getStyle(container, 'height'), 10);
+  if (containerHeight > currentAmpHeight) {
+    if (overflow) {
+      setStyle(overflow, 'display', '');
+      resizeCsa(container, currentAmpHeight - overflowHeight);
+    } else {
+      createOverflow(global, container, requestedHeight);
+    }
+  }
+}
+
+/**
+ * Make a request for either AFS or AFSh
+ * @param {!Window} global The window object of the iframe
+ * @param {!Object} data The data passed in by the partner
+ * @param {!Object} afsP The parsed AFS page options object
+ * @param {!Object} afsA The parsed AFS adblock options object
+ * @param {!Object} afshP The parsed AFSh page options object
+ * @param {!Object} afshA The parsed AFSh adblock options object
+ */
+function requestCsaAds(global, data, afsP, afsA, afshP, afshA) {
+  const type = getAdType(data);
+  const callback = callbackWithNoBackfill.bind(null, global);
+  const callbackBackfill = callbackWithBackfill.bind(null, global, afsP, afsA);
+
+  switch (type) {
+    case AD_TYPE.AFS:
+      /** Do not backfill, request AFS */
+      afsA['adLoadedCallback'] = callback;
+      global._googCsa('ads', afsP, afsA);
+      break;
+    case AD_TYPE.AFSH:
+      /** Do not backfill, request AFSh */
+      afshA['adLoadedCallback'] = callback;
+      global._googCsa('plas', afshP, afshA);
+      break;
+    case AD_TYPE.AFSH_BACKFILL:
+      /** Backfill with AFS, request AFSh */
+      afshA['adLoadedCallback'] = callbackBackfill;
+      global._googCsa('plas', afshP, afshA);
+      break;
+  }
+}
+
+/**
+ * Helper function to determine which product to request
+ * @param {!Object} data The data passed in by the partner
+ * @return {number} Enum of ad type
+ */
+function getAdType(data) {
+  if (data['afsPageOptions'] != null && data['afshPageOptions'] == null) {
+    return AD_TYPE.AFS;
+  }
+  if (data['afsPageOptions'] == null && data['afshPageOptions'] != null) {
+    return AD_TYPE.AFSH;
+  }
+  if (data['afsPageOptions'] != null && data['afshPageOptions'] != null) {
+    return AD_TYPE.AFSH_BACKFILL;
+  } else {
+    return AD_TYPE.UNSUPPORTED;
+  }
+}
+
+/**
+ * The adsLoadedCallback for requests without a backfill.  If ads were returned,
+ * resize the iframe.  If ads weren't returned, tell AMP we don't have ads.
+ * @param {!Window} global The window object of the iframe
+ * @param {string} containerName The name of the CSA container
+ * @param {boolean} hasAd Whether or not CSA returned an ad
+ * @visibleForTesting
+ */
+export function callbackWithNoBackfill(global, containerName, hasAd) {
+  if (hasAd) {
+    resizeIframe(global, containerName);
+  } else {
+    global.context.noContentAvailable();
+  }
+}
+
+/**
+ * The adsLoadedCallback for requests with a backfill.  If ads were returned,
+ * resize the iframe.  If ads weren't returned, backfill the ads.
+ * @param {!Window} global The window object of the iframe
+ * @param {!Object} page The parsed AFS page options to backfill the unit with
+ * @param {!Object} ad The parsed AFS page options to backfill the unit with
+ * @param {string} containerName The name of the CSA container
+ * @param {boolean} hasAd Whether or not CSA returned an ad
+ * @visibleForTesting
+ */
+export function callbackWithBackfill(global, page, ad, containerName, hasAd) {
+  if (hasAd) {
+    resizeIframe(global, containerName);
+  } else {
+    ad['adLoadedCallback'] = callbackWithNoBackfill.bind(null, global);
+    global['_googCsa']('ads', page, ad);
+  }
+}
+
+/**
+ * CSA callback function to resize the iframe when ads were returned
+ * @param {!Window} global
+ * @param {string} containerName Name of the container ('csacontainer')
+ * @visibleForTesting
+ */
+export function resizeIframe(global, containerName) {
+  // Get actual height of container
+  const container = global.document.getElementById(containerName);
+  const height = container./*OK*/ offsetHeight;
+  // Set initial AMP height
+  currentAmpHeight =
+    global.context.initialIntersection.boundingClientRect.height;
+
+  // If the height of the container is larger than the height of the
+  // initially requested AMP tag, add the overflow element
+  if (height > currentAmpHeight) {
+    createOverflow(global, container, height);
+  }
+  // Attempt to resize to actual CSA container height
+  requestResizeInternal(global, devAssert(container), height);
+}
+
+/**
+ * Helper function to call requestResize
+ * @param {!Window} global
+ * @param {!Element} container
+ * @param {number} height
+ */
+function requestResizeInternal(global, container, height) {
+  global.context
+    .requestResize(undefined, height)
+    .then(() => {
+      resizeSuccessHandler(global, container, height);
+    })
+    .catch(() => {
+      resizeDeniedHandler(global, container, height);
+    });
+}
+
+/**
+ * Helper function to create an overflow element
+ * @param {!Window} global The window object of the iframe
+ * @param {!Element} container HTML element of the CSA container
+ * @param {number} height The full height the CSA container should be when the
+ * overflow element is clicked.
+ */
+function createOverflow(global, container, height) {
+  const overflow = getOverflowElement(global);
+  // When overflow is clicked, resize to full height
+  overflow.onclick = () => requestResizeInternal(global, container, height);
+  global.document.getElementById('c').appendChild(overflow);
+  // Resize the CSA container to not conflict with overflow
+  resizeCsa(container, currentAmpHeight - overflowHeight);
+}
+
+/**
+ * Helper function to create the base overflow element
+ * @param {!Window} global The window object of the iframe
+ * @return {!Element}
+ */
+function getOverflowElement(global) {
+  const overflow = global.document.createElement('div');
+  overflow.id = 'overflow';
+  setStyles(overflow, {
+    position: 'absolute',
+    height: overflowHeight + 'px',
+    width: '100%',
+  });
+  overflow.appendChild(getOverflowLine(global));
+  overflow.appendChild(getOverflowChevron(global));
+  return overflow;
+}
+
+/**
+ * Helper function to create a line element for the overflow element
+ * @param {!Window} global The window object of the iframe
+ * @return {!Element}
+ */
+function getOverflowLine(global) {
+  const line = global.document.createElement('div');
+  setStyles(line, {
+    background: 'rgba(0,0,0,.16)',
+    height: '1px',
+  });
+  return line;
+}
+
+/**
+ * Helper function to create a chevron element for the overflow element
+ * @param {!Window} global The window object of the iframe
+ * @return {!Element}
+ */
+function getOverflowChevron(global) {
+  const svg =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="36px" ' +
+    'height="36px" viewBox="0 0 48 48" fill="#757575"><path d="M14.83' +
+    ' 16.42L24 25.59l9.17-9.17L36 19.25l-12 12-12-12z"/>' +
+    '<path d="M0-.75h48v48H0z" fill="none"/> </svg>';
+
+  const chevron = global.document.createElement('div');
+  setStyles(chevron, {
+    width: '36px',
+    height: '36px',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    display: 'block',
+  });
+  chevron./*OK*/ innerHTML = svg;
+  return chevron;
+}
+
+/**
+ * Helper function to resize the height of a CSA container and its child iframe
+ * @param {!Element} container HTML element of the CSA container
+ * @param {number} height Height to resize, in pixels
+ */
+function resizeCsa(container, height) {
+  const iframe = container.firstElementChild;
+  if (iframe) {
+    setStyles(iframe, {
+      height: height + 'px',
+      width: '100%',
+    });
+  }
+  setStyle(container, 'height', height + 'px');
+}
diff --git a/ads/google/csa.md b/ads/vendors/csa.md
similarity index 77%
rename from ads/google/csa.md
rename to ads/vendors/csa.md
index 40c2d6362196c..50f8c2adac04c 100644
--- a/ads/google/csa.md
+++ b/ads/vendors/csa.md
@@ -27,7 +27,7 @@ Javascript object you would pass in the ad request of a standard CSA request.
 <amp-ad
   height="300"
   type="csa"
-  data-afs-page-options='{"pubId": "partner-pub-id", "query": "flowers"}'
+  data-afs-page-options='{"pubId": "partner-pub-id", "query": "flowers", "styleId": "123456789"}'
   data-afs-adblock-options='{"width": "auto", "number": 2}'
 >
 </amp-ad>
@@ -47,7 +47,7 @@ Javascript object you would pass in the ad request of a standard CSA request.
 <amp-ad
   height="300"
   type="csa"
-  data-afsh-page-options='{"pubId": "partner-vert-pla-pubid-pdp", "query": "flowers"}'
+  data-afsh-page-options='{"pubId": "partner-vert-pla-pubid-pdp", "query": "flowers", "styleId": "123456789"}'
   data-afsh-adblock-options='{"width": "auto", "height": 300}'
 >
 </amp-ad>
@@ -83,16 +83,10 @@ attributes.
 
 ## Requirements
 
-- Each amp-ad tag contains one adblock. Only one **data-afs-adblock-options**
-  and/or one **data-afsh-adblock-options** attribute can be specified in the tag.
-- Above the fold ads are required to have a minimum height of 300 pixels.
-- When requesting ads above the fold:
-- You must use the maxTop parameter instead of the number parameter to specify the number of ads.
-- You can only request one ad ("maxTop": 1) in an ad unit that is above the fold.
-- You must use a fallback div to show alternate content when no ads are returned. If no ads are returned the ad will not be collapsed because it is above the fold.
-
-<!-- TODO(#19207): Address missing demo -->
-<!--
-## Demos
-Please visit [google-ads-amp-demos.com](http://google-ads-amp-demos.com/) for demos and additional requirements when implementing these ads.
--->
+-   Each amp-ad tag contains one adblock. Only one **data-afs-adblock-options**
+    and/or one **data-afsh-adblock-options** attribute can be specified in the tag.
+-   Above the fold ads are required to have a minimum height of 300 pixels.
+-   When requesting ads above the fold:
+-   You must use the maxTop parameter instead of the number parameter to specify the number of ads.
+-   You can only request one ad ("maxTop": 1) in an ad unit that is above the fold.
+-   You must use a fallback div to show alternate content when no ads are returned. If no ads are returned the ad will not be collapsed because it is above the fold.
diff --git a/ads/custom.md b/ads/vendors/custom.md
similarity index 92%
rename from ads/custom.md
rename to ads/vendors/custom.md
index c6c99806066d9..2c9e7157d24bb 100644
--- a/ads/custom.md
+++ b/ads/vendors/custom.md
@@ -20,7 +20,7 @@ Custom does not represent a specific network. Rather, it provides a way for
 a site to display simple ads on a self-service basis. You must provide
 your own ad server to deliver the ads in json format as shown below.
 
-Each ad must contain a [mustache](https://github.com/ampproject/amphtml/blob/master/extensions/amp-mustache/amp-mustache.md)
+Each ad must contain a [mustache](https://github.com/ampproject/amphtml/blob/main/extensions/amp-mustache/amp-mustache.md)
 template.
 
 Each ad must contain the URL that will be used to fetch data from the server.
@@ -190,10 +190,10 @@ The ad server should return a json object containing a record for each slot in t
 slot id in `data-slot`. The record format is defined by your template. For the examples above,
 the record contains three fields:
 
-- src - string to go into the source parameter of the image to be displayed. This can be a
-  web reference (in which case it must be `https:` or a `data:` URI including the base64-encoded image.
-- href - URL to which the user is to be directed when he clicks on the ad
-- info - A string with additional info about the ad that was served, mmaybe for use with analytics
+-   src - string to go into the source parameter of the image to be displayed. This can be a
+    web reference (in which case it must be `https:` or a `data:` URI including the base64-encoded image.
+-   href - URL to which the user is to be directed when he clicks on the ad
+-   info - A string with additional info about the ad that was served, mmaybe for use with analytics
 
 Here is an example response, assuming two slots named simply 1 and 2:
 
@@ -222,7 +222,7 @@ If no slot was specified, the server returns a single template rather than an ar
 }
 ```
 
-The ad server must enforce [AMP CORS](https://github.com/ampproject/amphtml/blob/master/spec/amp-cors-requests.md#cors-security-in-amp).
+The ad server must enforce [AMP CORS](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-cors-requests.md#cors-security-in-amp).
 Here is an example set of the relevant response headers:
 
 ```html
@@ -231,7 +231,7 @@ Access-Control-Allow-Origin:https://my--ad--server-com.cdn.ampproject.org
 
 ## Analytics
 
-To get analytics of how your ads are performing, use the [amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md) tag.
+To get analytics of how your ads are performing, use the [amp-analytics](https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-analytics.md) tag.
 
 Here is an example of how to make it work with Google Analytics events. Note that the variables can be set either by the code
 that displays the page (as in `eventAction`) or in variables passed back by the ad server (as in `eventCategory` and `eventLabel`).
diff --git a/ads/vendors/dable.js b/ads/vendors/dable.js
new file mode 100644
index 0000000000000..d1c71de1e5ddb
--- /dev/null
+++ b/ads/vendors/dable.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function dable(global, data) {
+  // check required props
+  validateData(data, ['widgetId']);
+
+  global.dable =
+    global.dable ||
+    function () {
+      (global.dable.q = global.dable.q || []).push(arguments);
+    };
+  global.dable(
+    'setService',
+    data['serviceName'] || global.window.context.location.hostname
+  );
+  global.dable('setURL', global.window.context.sourceUrl);
+  global.dable('setRef', global.window.context.referrer);
+
+  const slot = global.document.createElement('div');
+  slot.id = '_dbl_' + Math.floor(Math.random() * 100000);
+  slot.setAttribute('data-widget_id', data['widgetId']);
+
+  const divContainer = global.document.getElementById('c');
+  if (divContainer) {
+    divContainer.appendChild(slot);
+  }
+
+  const itemId = data['itemId'] || '';
+  const opts = {};
+
+  if (itemId) {
+    global.dable('sendLog', 'view', {id: itemId});
+  } else {
+    opts.ignoreItems = true;
+  }
+
+  // call render widget
+  global.dable('renderWidget', slot.id, itemId, opts, function (hasAd) {
+    if (hasAd) {
+      global.context.renderStart();
+    } else {
+      global.context.noContentAvailable();
+    }
+  });
+
+  // load the Dable script asynchronously
+  loadScript(global, 'https://static.dable.io/dist/plugin.min.js');
+}
diff --git a/ads/dable.md b/ads/vendors/dable.md
similarity index 93%
rename from ads/dable.md
rename to ads/vendors/dable.md
index a69e9d7c98f87..0fc7b090ea5b0 100644
--- a/ads/dable.md
+++ b/ads/vendors/dable.md
@@ -37,9 +37,9 @@ For configuration details and to generate your tags, please contact https://admi
 
 ### Required parameters
 
-- `data-widget-id`
+-   `data-widget-id`
 
 ### Optional parameters
 
-- `data-item-id`
-- `data-service-name`
+-   `data-item-id`
+-   `data-service-name`
diff --git a/ads/vendors/digiteka.js b/ads/vendors/digiteka.js
new file mode 100644
index 0000000000000..d87b7bffc2122
--- /dev/null
+++ b/ads/vendors/digiteka.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function digiteka(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+  global._digiteka_amp = {
+    allowed_data: ['mdtk', 'zone', 'adunit', 'params'],
+    mandatory_data: ['mdtk', 'zone'],
+    data,
+  };
+
+  validateData(
+    data,
+    global._digiteka_amp.mandatory_data,
+    global._digiteka_amp.allowed_data
+  );
+
+  loadScript(global, 'https://ot.digiteka.com/amp.js');
+}
diff --git a/ads/vendors/digiteka.md b/ads/vendors/digiteka.md
new file mode 100644
index 0000000000000..bfad4c5d1fa22
--- /dev/null
+++ b/ads/vendors/digiteka.md
@@ -0,0 +1,46 @@
+<!---
+Copyright 2021 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.
+-->
+
+# Digiteka
+
+## Example
+
+### Basic
+
+```html
+<amp-ad
+  width="300"
+  height="1"
+  type="digiteka"
+  layout="responsive"
+  data-mdtk="01212121"
+  data-zone="1"
+  data-adunit="/accountId/AdUnitCode"
+  data-params="%7B%22key%22%3A%22value%22%7D"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For configuration semantics, please [contact Digiteka](http://digiteka.com).
+
+Supported parameters:
+
+-   `mdtk` (required)
+-   `zone` (required)
+-   `adunit` (optionnal)
+-   `params` (optionnal)
diff --git a/ads/vendors/directadvert.js b/ads/vendors/directadvert.js
new file mode 100644
index 0000000000000..33a9814a2d7bb
--- /dev/null
+++ b/ads/vendors/directadvert.js
@@ -0,0 +1,60 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+import {serializeQueryString} from '../../src/url';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function directadvert(global, data) {
+  validateData(data, ['blockId']);
+
+  const params = /** @type {!JsonObject} */ ({
+    'async': 1,
+    'div': 'c',
+  });
+
+  if (global.context.referrer) {
+    params['amp_rref'] = encodeURIComponent(global.context.referrer);
+  }
+
+  if (global.context.canonicalUrl) {
+    params['amp_rurl'] = encodeURIComponent(global.context.canonicalUrl);
+  }
+
+  const serverName = data['serverName'] || 'code.directadvert.ru';
+
+  const url =
+    '//' +
+    encodeURIComponent(serverName) +
+    '/data/' +
+    encodeURIComponent(data['blockId']) +
+    '.js?' +
+    serializeQueryString(params);
+
+  loadScript(
+    global,
+    url,
+    () => {
+      global.context.renderStart();
+    },
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/directadvert.md b/ads/vendors/directadvert.md
similarity index 95%
rename from ads/directadvert.md
rename to ads/vendors/directadvert.md
index 5fbcf2694d372..210fa5894a3cd 100644
--- a/ads/directadvert.md
+++ b/ads/vendors/directadvert.md
@@ -29,8 +29,8 @@ For more information, please [see the Directadvert FAQ](https://www.directadvert
 
 ### Required parameters
 
-- `data-block-id`
+-   `data-block-id`
 
 ### Optional parameters
 
-- `data-server-name`
+-   `data-server-name`
diff --git a/ads/vendors/distroscale.js b/ads/vendors/distroscale.js
new file mode 100644
index 0000000000000..386b6633cf832
--- /dev/null
+++ b/ads/vendors/distroscale.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function distroscale(global, data) {
+  validateData(data, ['pid'], ['zid', 'tid']);
+  let src = '//c.jsrdn.com/s/cs.js?p=' + encodeURIComponent(data.pid);
+
+  if (data.zid) {
+    src += '&z=' + encodeURIComponent(data.zid);
+  } else {
+    src += '&z=amp';
+  }
+
+  if (data.tid) {
+    src += '&t=' + encodeURIComponent(data.tid);
+  }
+
+  let srcUrl = global.context.sourceUrl;
+
+  srcUrl = srcUrl.replace(/#.+/, '').replace(/\?.+/, '');
+
+  src += '&f=' + encodeURIComponent(srcUrl);
+
+  global.dsAMPCallbacks = {
+    renderStart: global.context.renderStart,
+    noContentAvailable: global.context.noContentAvailable,
+  };
+  loadScript(
+    global,
+    src,
+    () => {},
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/distroscale.md b/ads/vendors/distroscale.md
similarity index 97%
rename from ads/distroscale.md
rename to ads/vendors/distroscale.md
index e41c0a4946d0d..7723720eab74b 100644
--- a/ads/distroscale.md
+++ b/ads/vendors/distroscale.md
@@ -32,4 +32,4 @@ For configuration semantics, please [contact DistroScale](http://www.distroscale
 
 ### Required parameters
 
-- `data-pid`: Partner ID
+-   `data-pid`: Partner ID
diff --git a/ads/vendors/dotandads.js b/ads/vendors/dotandads.js
new file mode 100644
index 0000000000000..e7f04ef210e01
--- /dev/null
+++ b/ads/vendors/dotandads.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function dotandads(global, data) {
+  global.data = data;
+  writeScript(global, 'https://amp.ad.dotandad.com/dotandadsAmp.js');
+}
diff --git a/ads/dotandads.md b/ads/vendors/dotandads.md
similarity index 85%
rename from ads/dotandads.md
rename to ads/vendors/dotandads.md
index 7a35f8f43bb06..c2e2c395beeeb 100644
--- a/ads/dotandads.md
+++ b/ads/vendors/dotandads.md
@@ -53,7 +53,7 @@ For details on the configuration semantics, please contact the ad network or ref
 
 Supported parameters:
 
-- `sp`: sizepos (the ad size and position code)
-- `mpo`: multipoint (an extraction parameter based on site)
-- `mpt`: mediapoint tag (the box where the ad will be shown)
-- `cid`: customer id
+-   `sp`: sizepos (the ad size and position code)
+-   `mpo`: multipoint (an extraction parameter based on site)
+-   `mpt`: mediapoint tag (the box where the ad will be shown)
+-   `cid`: customer id
diff --git a/ads/vendors/dynad.js b/ads/vendors/dynad.js
new file mode 100644
index 0000000000000..6092373793c10
--- /dev/null
+++ b/ads/vendors/dynad.js
@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+
+import {
+  validateData,
+  validateSrcContains,
+  validateSrcPrefix,
+  writeScript,
+} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function dynad(global, data) {
+  validateData(data, ['src'], []);
+  validateSrcPrefix('https:', data.src);
+  validateSrcContains('/t.dynad.net/', data.src);
+  writeScript(global, data.src);
+}
diff --git a/ads/dynad.md b/ads/vendors/dynad.md
similarity index 94%
rename from ads/dynad.md
rename to ads/vendors/dynad.md
index 9fdbfffbea490..0f34ff7c44d6e 100644
--- a/ads/dynad.md
+++ b/ads/vendors/dynad.md
@@ -34,4 +34,4 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Direct URL call:
 
-- `src` - Src value from script tag provided by the ad network.
+-   `src` - Src value from script tag provided by the ad network.
diff --git a/ads/vendors/eadv.js b/ads/vendors/eadv.js
new file mode 100644
index 0000000000000..4bda91a7a93a6
--- /dev/null
+++ b/ads/vendors/eadv.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function eadv(global, data) {
+  validateData(data, ['x', 'u'], []);
+  writeScript(
+    global,
+    'https://www.eadv.it/track/?x=' + data.x + '&u=' + data.u
+  );
+}
diff --git a/ads/eadv.md b/ads/vendors/eadv.md
similarity index 97%
rename from ads/eadv.md
rename to ads/vendors/eadv.md
index 2113dc2715b30..a63949d515f00 100644
--- a/ads/eadv.md
+++ b/ads/vendors/eadv.md
@@ -35,5 +35,5 @@ For details on the configuration semantics, please contact the ad network or ref
 
 Supported parameters:
 
-- `data-x`
-- `data-u`
+-   `data-x`
+-   `data-u`
diff --git a/ads/vendors/empower.js b/ads/vendors/empower.js
new file mode 100644
index 0000000000000..432ce3c7822fc
--- /dev/null
+++ b/ads/vendors/empower.js
@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function empower(global, data) {
+  validateData(data, ['site', 'zone'], ['category']);
+  global.category = data.category || 'general';
+  global.site = data.site + ':general';
+  global.zone = data.zone;
+  global.iwidth = data.width;
+  global.iheight = data.height;
+  writeScript(global, 'https://cdn.empower.net/sdk/amp-ad.min.js');
+}
diff --git a/ads/empower.md b/ads/vendors/empower.md
similarity index 85%
rename from ads/empower.md
rename to ads/vendors/empower.md
index 773458037f42f..b840cc2473efa 100644
--- a/ads/empower.md
+++ b/ads/vendors/empower.md
@@ -37,9 +37,9 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-site`: Site identifier provided by Empower.
-- `data-zone`: Zone ID of the ad space.
+-   `data-site`: Site identifier provided by Empower.
+-   `data-zone`: Zone ID of the ad space.
 
 ### Optional parameters
 
-- `data-category`: Category identifier provided by Empower.
+-   `data-category`: Category identifier provided by Empower.
diff --git a/ads/vendors/engageya.js b/ads/vendors/engageya.js
new file mode 100644
index 0000000000000..dc5112545a225
--- /dev/null
+++ b/ads/vendors/engageya.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function engageya(global, data) {
+  validateData(data, ['widgetids']);
+
+  global._engageya = global._engageya || {
+    viewId: global.context.pageViewId,
+    widgetIds: data['widgetids'],
+    websiteId: data['websiteid'],
+    publisherId: data['publisherid'],
+    url: data['url'] || global.context.canonicalUrl,
+    ampURL: data['ampurl'] || global.context.sourceUrl,
+    mode: data['mode'] || 1,
+    style: data['stylecss'] || '',
+    referrer: global.context.referrer,
+  };
+
+  loadScript(global, 'https://widget.engageya.com/engageya_amp_loader.js');
+}
diff --git a/ads/engageya.md b/ads/vendors/engageya.md
similarity index 82%
rename from ads/engageya.md
rename to ads/vendors/engageya.md
index f535341adfc36..fc7e73f4400ea 100644
--- a/ads/engageya.md
+++ b/ads/vendors/engageya.md
@@ -39,12 +39,12 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-widgetIds`: Widget ids
-- `data-websiteId`: Website Id
-- `data-publisherId`: Publisher Id
+-   `data-widgetIds`: Widget ids
+-   `data-websiteId`: Website Id
+-   `data-publisherId`: Publisher Id
 
 ### Optional parameters
 
-- `data-url`: Current none amp version URL
-- `data-ampUrl`: Current AMP page URL
-- `data-styleCSS`: Additional style
+-   `data-url`: Current none amp version URL
+-   `data-ampUrl`: Current AMP page URL
+-   `data-styleCSS`: Additional style
diff --git a/ads/vendors/epeex.js b/ads/vendors/epeex.js
new file mode 100644
index 0000000000000..70ece97215752
--- /dev/null
+++ b/ads/vendors/epeex.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function epeex(global, data) {
+  global._epeex = global._epeex || {
+    account: data['account'] || 'demoepeex',
+    channel: data['channel'] || '1',
+    htmlURL: data['htmlurl'] || encodeURIComponent(global.context.canonicalUrl),
+    ampURL: data['ampurl'] || encodeURIComponent(global.context.sourceUrl),
+    testMode: data['testmode'] || 'false',
+  };
+
+  // load the epeex AMP remote js file
+  loadScript(global, 'https://epeex.com/related/service/widget/amp/remote.js');
+}
diff --git a/ads/epeex.md b/ads/vendors/epeex.md
similarity index 91%
rename from ads/epeex.md
rename to ads/vendors/epeex.md
index 196d37fe19f63..afd0c27cd2391 100644
--- a/ads/epeex.md
+++ b/ads/vendors/epeex.md
@@ -35,11 +35,11 @@ For semantics of configuration, please contact info@epeex.com.
 
 ### Required parameters
 
-- `data-account`
-- `data-channel`
+-   `data-account`
+-   `data-channel`
 
 ### Optional parameters
 
-- `data-htmlurl`
-- `data-ampurl`
-- `data-testmode`
+-   `data-htmlurl`
+-   `data-ampurl`
+-   `data-testmode`
diff --git a/ads/vendors/eplanning.js b/ads/vendors/eplanning.js
new file mode 100644
index 0000000000000..836c4aa39fbec
--- /dev/null
+++ b/ads/vendors/eplanning.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function eplanning(global, data) {
+  validateData(data, [
+    'epl_si',
+    'epl_isv',
+    'epl_sv',
+    'epl_sec',
+    'epl_kvs',
+    'epl_e',
+  ]);
+  // push the two object into the '_eplanning' global
+  (global._eplanning = global._eplanning || []).push({
+    sI: data.epl_si,
+    isV: data.epl_isv,
+    sV: data.epl_sv,
+    sec: data.epl_sec,
+    kVs: data.epl_kvs,
+    e: data.epl_e,
+  });
+  loadScript(global, 'https://us.img.e-planning.net/layers/epl-amp.js');
+}
diff --git a/ads/eplanning.md b/ads/vendors/eplanning.md
similarity index 85%
rename from ads/eplanning.md
rename to ads/vendors/eplanning.md
index 06231eb3817f0..8e4490edc447e 100644
--- a/ads/eplanning.md
+++ b/ads/vendors/eplanning.md
@@ -40,9 +40,9 @@ For configuration semantics, please see [e-planning's documentation](https://www
 
 Supported parameters:
 
-- `data-epl_si`: Site ID
-- `data-epl_sv`: Default adserver
-- `data-epl_isv`: Default CDN
-- `data-epl_sec`: Section
-- `data-epl_kvs`: Data keywords
-- `data-epl_e`: Space name
+-   `data-epl_si`: Site ID
+-   `data-epl_sv`: Default adserver
+-   `data-epl_isv`: Default CDN
+-   `data-epl_sec`: Section
+-   `data-epl_kvs`: Data keywords
+-   `data-epl_e`: Space name
diff --git a/ads/vendors/ezoic.js b/ads/vendors/ezoic.js
new file mode 100644
index 0000000000000..1d75baf8b45e5
--- /dev/null
+++ b/ads/vendors/ezoic.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function ezoic(global, data) {
+  // TODO: check mandatory fields
+  validateData(data, [], ['slot', 'targeting', 'extras']);
+  loadScript(global, 'https://g.ezoic.net/ezoic/ampad.js', () => {
+    loadScript(
+      global,
+      'https://www.googletagservices.com/tag/js/gpt.js',
+      () => {
+        global.googletag.cmd.push(() => {
+          new window.EzoicAmpAd(global, data).createAd();
+        });
+      }
+    );
+  });
+}
diff --git a/ads/vendors/ezoic.md b/ads/vendors/ezoic.md
new file mode 100644
index 0000000000000..9a0a6cbcd7248
--- /dev/null
+++ b/ads/vendors/ezoic.md
@@ -0,0 +1,56 @@
+<!---
+Copyright 2016 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.
+-->
+
+# Ezoic
+
+## Example
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="ezoic"
+  data-slot="slot-name"
+  data-json='{"targeting":{"compid":0}, "extras":{"adsense_text_color":"000000"}'
+>
+</amp-ad>
+```
+
+## Ad size
+
+The ad size is the size of the ad that should be displayed. Make sure the `width` and `height` attributes of the `amp-ad` tag match the available ad size.
+
+## Configuration
+
+To generate tags, please visit https://svc.ezoic.com/publisher.php?login
+
+Supported parameters:
+
+-   `data-slot`: the slot name corresponding to the ad position
+
+Supported via `json` attribute:
+
+-   `targeting`
+-   `extras`
+
+## Consent Support
+
+Ezoic amp-ad adhere to a user's consent in the following ways:
+
+-   `CONSENT_POLICY_STATE.SUFFICIENT`: Ezoic amp-ad will display a personalized ad to the user.
+-   `CONSENT_POLICY_STATE.INSUFFICIENT`: Ezoic amp-ad will display a non-personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Ezoic amp-ad will display a personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN`: Ezoic amp-ad will not display an ad.
diff --git a/ads/vendors/f1e.js b/ads/vendors/f1e.js
new file mode 100644
index 0000000000000..03333f53646a8
--- /dev/null
+++ b/ads/vendors/f1e.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function f1e(global, data) {
+  validateData(data, ['url', 'target'], []);
+  global.f1eData = data;
+  writeScript(global, 'https://img.ak.impact-ad.jp/util/f1e_amp.min.js');
+}
diff --git a/ads/f1e.md b/ads/vendors/f1e.md
similarity index 94%
rename from ads/f1e.md
rename to ads/vendors/f1e.md
index 0b5c926222c19..c9030ffee0a69 100644
--- a/ads/f1e.md
+++ b/ads/vendors/f1e.md
@@ -35,5 +35,5 @@ For details on the configuration semantics, please contact the ad network or ref
 
 Supported parameters:
 
-- `data-url` - Must start with "https:"
-- `data-target`
+-   `data-url` - Must start with "https:"
+-   `data-target`
diff --git a/ads/vendors/f1h.js b/ads/vendors/f1h.js
new file mode 100644
index 0000000000000..b28a3c877176e
--- /dev/null
+++ b/ads/vendors/f1h.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function f1h(global, data) {
+  validateData(data, ['sectionId', 'slot']);
+
+  const scriptUrl =
+    data['debugsrc'] || 'https://img.ak.impact-ad.jp/fh/f1h_amp.js';
+
+  global.f1hData = data;
+  loadScript(global, scriptUrl);
+}
diff --git a/ads/f1h.md b/ads/vendors/f1h.md
similarity index 86%
rename from ads/f1h.md
rename to ads/vendors/f1h.md
index bc3777236237f..75aaf9dc3e879 100644
--- a/ads/f1h.md
+++ b/ads/vendors/f1h.md
@@ -52,13 +52,13 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `sectionId`: ID of this section in inventory system.
-- `slot`: ID of slot that will be showed in this ad block.
-- `pubnetwork-lib`: Filepath of ad library.
+-   `sectionId`: ID of this section in inventory system.
+-   `slot`: ID of slot that will be showed in this ad block.
+-   `pubnetwork-lib`: Filepath of ad library.
 
 ### Optional parameters
 
-- `custom`: usage example
+-   `custom`: usage example
 
 ```text
 {
diff --git a/ads/vendors/feedad.js b/ads/vendors/feedad.js
new file mode 100644
index 0000000000000..360263661584b
--- /dev/null
+++ b/ads/vendors/feedad.js
@@ -0,0 +1,102 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+import {setStyle} from '../../src/style';
+
+/**
+ * @typedef FeedAdGlobal
+ * @private
+ *
+ * @property {FeedAdAsync} feedad
+ */
+
+/**
+ * @typedef {Object} FeedAdAsync
+ * @private
+ *
+ * @property {FeedAd} [sdk]
+ * @property {!Function[]} cmd
+ */
+
+/**
+ * @typedef {Object} FeedAd
+ * @private
+ *
+ * @property {function(string)} init
+ * @property {function(string):Promise<FeedAdResponse>} requestAd
+ */
+
+/**
+ * @typedef {Object} FeedAdResponse
+ * @private
+ *
+ * @property {function():HTMLElement} createAdContainer()
+ */
+
+/**
+ * @typedef {Object} FeedAdData
+ * @private
+ *
+ * @property {string} clientToken
+ * @property {string} placementId
+ * @property {string} [background]
+ */
+
+/**
+ * @param {!FeedAdGlobal} global
+ * @param {!FeedAdData} data
+ */
+export function feedad(global, data) {
+  validateData(data, ['clientToken', 'placementId'], ['background']);
+
+  global.feedad = global.feedad || {cmd: []};
+  global.feedad.cmd.push(() => {
+    global.feedad.sdk
+      .init(data.clientToken)
+      .then(() => global.feedad.sdk.requestAd(data.placementId))
+      .then((response) => {
+        const ad = response.createAdContainer();
+        const container = global.document.getElementById('c');
+        applyContainerStyle(container, data);
+        container.appendChild(ad);
+        global.context.renderStart();
+        global.context.reportRenderedEntityIdentifier('FeedAd');
+        return response.promise;
+      })
+      .catch(() => {
+        global.context.noContentAvailable();
+      });
+  });
+  loadScript(global, 'https://web.feedad.com/sdk/feedad-async.js');
+}
+
+/**
+ * Centers the ad container within the AMP container.
+ * Applies the optional background color for the unfilled space.
+ *
+ * @param {HTMLElement} container
+ * @param {!FeedAdData} data
+ */
+function applyContainerStyle(container, data) {
+  setStyle(container, 'display', 'flex');
+  setStyle(container, 'flexDirection', 'row');
+  setStyle(container, 'justifyContent', 'stretch');
+  setStyle(container, 'alignItems', 'center');
+  if (data.background) {
+    setStyle(container, 'backgroundColor', data.background);
+  }
+}
diff --git a/ads/vendors/feedad.md b/ads/vendors/feedad.md
new file mode 100644
index 0000000000000..b842e6afb2933
--- /dev/null
+++ b/ads/vendors/feedad.md
@@ -0,0 +1,48 @@
+<!---
+Copyright 2016 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.
+-->
+
+# FeedAd
+
+## Example
+
+```html
+
+<amp-ad width="320" height="180"
+        type="feedad"
+        data-client-token="EiRjNjM3MGZlNy00NmQ2LTRmZGYtYjRmNy1jZGZlNWQ4OTgxYTU="
+        data-placement-id="amp-example"
+        data-backound="#000">
+</amp-ad>
+```
+
+## Configuration
+
+### Required parameters:
+
+-   `data-client-token`: The web client token for your FeedAd publisher account. It can be found in your publisher dashboard and was sent to you in your onboarding e-mail.
+-   `data-placement-id`: This identifies the placement within the FeedAd dashboard. We recommend giving it a meaningful name related to its position within the page, like "article-detail-sidebar". The name may consist of lowercase letters [a-z], numbers [0-9], and dashes [-]'. You can access your publisher dashboard at [https://admin.feedad.com](https://admin.feedad.com). If you do not yet have a FeedAd publisher account, please contact us via the contact form at [https://feedad.com/#contact](https://feedad.com/#contact).
+
+### Optional parameters:
+
+-   `background`: A CSS color value for the background of the ad, in case the amp-ad element is larger than the ad itself. The ad will always try to request an optimal size, but AMP may reject this request.
+
+### Recommended parameter values:
+
+-   `width` and `height`: Use values with a 16:9 aspect ratio, as most of our ads are videos of that same ratio.
+
+## Consent
+
+-   FeedAd is GDPR compliant and reads TCF 2.0 consent strings. Add the IAB vendor 'FeedAd' (#781) in your CMP to ask for your users' consent to our targeted ads.
diff --git a/ads/vendors/felmat.js b/ads/vendors/felmat.js
new file mode 100644
index 0000000000000..b97392700a7a9
--- /dev/null
+++ b/ads/vendors/felmat.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function felmat(global, data) {
+  validateData(data, ['host', 'fmt', 'fmk', 'fmp']);
+  global.fmParam = data;
+  writeScript(
+    global,
+    'https://t.' + encodeURIComponent(data.host) + '/js/fmamp.js'
+  );
+}
diff --git a/ads/felmat.md b/ads/vendors/felmat.md
similarity index 93%
rename from ads/felmat.md
rename to ads/vendors/felmat.md
index 79a1ffc06cfcb..d8ab2a4f4df56 100644
--- a/ads/felmat.md
+++ b/ads/vendors/felmat.md
@@ -37,7 +37,7 @@ For configuration details and to generate your tags, please contact https://www.
 
 Supported parameters:
 
-- `data-host`
-- `data-fmt`
-- `data-fmk`
-- `data-fmp`
+-   `data-host`
+-   `data-fmt`
+-   `data-fmk`
+-   `data-fmp`
diff --git a/ads/vendors/finative.js b/ads/vendors/finative.js
new file mode 100644
index 0000000000000..02ba5ce7b9d4a
--- /dev/null
+++ b/ads/vendors/finative.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function finative(global, data) {
+  writeScript(
+    global,
+    'https://d.finative.cloud/cds/delivery/init?url=' +
+      encodeURIComponent(data.url)
+  );
+}
diff --git a/ads/vendors/finative.md b/ads/vendors/finative.md
new file mode 100644
index 0000000000000..3bf1eadb4b686
--- /dev/null
+++ b/ads/vendors/finative.md
@@ -0,0 +1,44 @@
+<!---
+Copyright 2016 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.
+-->
+
+# finative
+
+​
+
+## Example
+
+​
+
+```html
+<amp-ad
+  height="250"
+  type="finative"
+  data-url="https://amp.yoursite.com/amp/"
+>
+</amp-ad>
+```
+
+​
+
+## Configuration
+
+​
+Before starting any finative AMP setup, please reach out to your account manager for the most up to date documentation or contact [support@finative.com](mailto:support@finative.com).
+​
+Supported parameters:
+​
+
+-   `url`: Domain or URL from your Project
diff --git a/ads/vendors/firstimpression.js b/ads/vendors/firstimpression.js
new file mode 100644
index 0000000000000..abad3fd0b0215
--- /dev/null
+++ b/ads/vendors/firstimpression.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {parseQueryString} from '../../src/core/types/string/url';
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function firstimpression(global, data) {
+  validateData(data, ['zoneId', 'websiteId']);
+
+  const {hash, search} = global.context.location;
+  const parameters = Object.assign(
+    parseQueryString(hash),
+    parseQueryString(search)
+  );
+
+  const cdnHost =
+    'https://' + (parameters['fi_ecdnhost'] || 'ecdn.firstimpression.io');
+
+  const cdnpath = parameters['fi_ecdnpath'] || '/static/js/fiamp.js';
+
+  global.params = data;
+
+  writeScript(global, cdnHost + cdnpath);
+}
diff --git a/ads/vendors/firstimpression.md b/ads/vendors/firstimpression.md
new file mode 100644
index 0000000000000..dbcb958df782b
--- /dev/null
+++ b/ads/vendors/firstimpression.md
@@ -0,0 +1,21 @@
+<!---
+Copyright 2020 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.
+-->
+
+# FirstImpression.io
+
+FirstImpression.io `amp-ad` tag is intended to be created dynamically by [`amp-auto-ads` extension](../extensions/amp-auto-ads/amp-auto-ads.md), which sets all the required parameters.
+
+For more information and integration instructions, please [contact your account manager](https://publishers.firstimpression.io) at FirstImpression.io.
diff --git a/ads/vendors/flite.js b/ads/vendors/flite.js
new file mode 100644
index 0000000000000..0db39ec3da388
--- /dev/null
+++ b/ads/vendors/flite.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function flite(global, data) {
+  // TODO: check mandatory fields
+  validateData(data, [], ['guid', 'mixins']);
+  const {guid} = data,
+    o = global,
+    e = encodeURIComponent,
+    x = 0;
+  let r = '',
+    dep = '';
+  o.FLITE = o.FLITE || {};
+  o.FLITE.config = o.FLITE.config || {};
+  o.FLITE.config[guid] = o.FLITE.config[guid] || {};
+  o.FLITE.config[guid].cb = Math.random();
+  o.FLITE.config[guid].ts = +Number(new Date());
+  r = global.context.location.href;
+  const m = r.match(new RegExp('[A-Za-z]+:[/][/][A-Za-z0-9.-]+'));
+  dep = data.mixins ? '&dep=' + data.mixins : '';
+  const url = [
+    'https://r.flite.com/syndication/uscript.js?i=',
+    e(guid),
+    '&v=3',
+    dep,
+    '&x=us',
+    x,
+    '&cb=',
+    o.FLITE.config[guid].cb,
+    '&d=',
+    e((m && m[0]) || r),
+    '&tz=',
+    new Date().getTimezoneOffset(),
+  ].join('');
+  loadScript(o, url);
+}
diff --git a/ads/flite.md b/ads/vendors/flite.md
similarity index 96%
rename from ads/flite.md
rename to ads/vendors/flite.md
index 23c5131e06cd4..8907abda11fba 100644
--- a/ads/flite.md
+++ b/ads/vendors/flite.md
@@ -35,5 +35,5 @@ For configuration and implementation details, please [contact Flite Support](htt
 
 Supported parameters:
 
-- `data-guid`
-- `data-mixins`
+-   `data-guid`
+-   `data-mixins`
diff --git a/ads/vendors/fluct.js b/ads/vendors/fluct.js
new file mode 100644
index 0000000000000..c0440c741650c
--- /dev/null
+++ b/ads/vendors/fluct.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData, writeScript} from '../../3p/3p';
+
+/* global adingoFluct: false */
+/* global fluctAdScript: false */
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function fluct(global, data) {
+  validateData(data, ['g', 'u']);
+
+  if (data['tagtype'] === 'api') {
+    const cls = `fluct-unit-${data['u']}`;
+    const d = global.document.createElement('div');
+    d.setAttribute('class', cls);
+    global.document.getElementById('c').appendChild(d);
+
+    loadScript(global, 'https://pdn.adingo.jp/p.js', function () {
+      fluctAdScript.cmd.push(function (cmd) {
+        cmd.loadByGroup(data['g']);
+        cmd.display(`.${cls}`, data['u']);
+      });
+    });
+  } else {
+    writeScript(
+      global,
+      `https://cdn-fluct.sh.adingo.jp/f.js?G=${encodeURIComponent(data['g'])}`,
+      function () {
+        adingoFluct.showAd(data['u']);
+      }
+    );
+  }
+}
diff --git a/ads/fluct.md b/ads/vendors/fluct.md
similarity index 87%
rename from ads/fluct.md
rename to ads/vendors/fluct.md
index af00705fbc5c7..06e21b20c81cb 100644
--- a/ads/fluct.md
+++ b/ads/vendors/fluct.md
@@ -25,15 +25,16 @@ limitations under the License.
   type="fluct"
   data-g="{GROUP-ID}"
   data-u="{UNIT-ID}"
+  data-tagtype="api"
 >
 </amp-ad>
 ```
 
 ## Configuration
 
-For more information, please [contact fluct](https://corp.fluct.jp/en/contact.php).
+For more information, please [contact fluct](https://en.fluct.jp/).
 
 ### Required parameters
 
-- `data-g`
-- `data-u`
+-   `data-g`
+-   `data-u`
diff --git a/ads/vendors/forkmedia.js b/ads/vendors/forkmedia.js
new file mode 100644
index 0000000000000..9cb16b3e90a35
--- /dev/null
+++ b/ads/vendors/forkmedia.js
@@ -0,0 +1,62 @@
+/**
+ * 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.
+ */
+
+import {loadScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function forkmedia(global, data) {
+  let src = null;
+  if (data.product === 'contextads') {
+    switch (data.format) {
+      case 'inread':
+        src = 'https://amp.contextads.live/inread/inread.js';
+        break;
+      case 'vibe':
+        src = 'https://amp.contextads.live/vibe/iav_ia.js';
+        break;
+      case 'display':
+        src = 'https://amp.contextads.live/display/display.js';
+        break;
+      case 'impulse':
+        src = 'https://amp.contextads.live/impulse/impulse.js';
+        break;
+      case 'interscroller':
+        src = 'https://amp.contextads.live/interscroller/fis.js';
+        break;
+      case 'spark':
+        src = 'https://amp.contextads.live/spark/spark.js';
+        break;
+      default:
+        src = 'https://amp.contextads.live/default.js';
+    }
+  } else {
+    src = 'https://amp.contextads.live/default.js';
+  }
+
+  loadScript(
+    global,
+    src,
+    () => {
+      global.context.renderStart();
+    },
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/forkmedia.md b/ads/vendors/forkmedia.md
similarity index 80%
rename from ads/forkmedia.md
rename to ads/vendors/forkmedia.md
index d1e0ffeb8c252..76f0711ed144b 100644
--- a/ads/forkmedia.md
+++ b/ads/vendors/forkmedia.md
@@ -20,11 +20,12 @@ limitations under the License.
 
 ```html
 <amp-ad
-  width="50"
-  height="66"
-  type="forkmedia"
-  data-product="inread"
-  data-html-access-allowed
+    width="300"
+    height="50"
+    type="forkmedia"
+    data-product="contextads"
+    data-format="impulse"
+    data-html-access-allowed
 >
 </amp-ad>
 ```
@@ -35,5 +36,5 @@ For details on the configuration semantics, please contact Fork Media.
 
 ### Required parameters
 
-- `data-product`
-- `data-html-access-allowed`
+-   `data-product`
+-   `data-html-access-allowed`
diff --git a/ads/vendors/freewheel.js b/ads/vendors/freewheel.js
new file mode 100644
index 0000000000000..26c85bcde83a0
--- /dev/null
+++ b/ads/vendors/freewheel.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function freewheel(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+  global._freewheel_amp = {
+    data,
+  };
+
+  validateData(
+    data,
+    ['zone'],
+    [
+      'zone',
+      'gdpr',
+      'gdpr_consent',
+      'gdpr_consented_providers',
+      'useCCPA_USPAPI',
+      '_fw_us_privacy',
+      'useCMP',
+      'zIndex',
+      'blurDisplay',
+      'timeline',
+      'soundButton',
+      'defaultMute',
+      'onOver',
+      'closeAction',
+      'errorAction',
+      'pauseRatio',
+      'label',
+      'vastUrlParams',
+    ]
+  );
+
+  loadScript(global, 'https://cdn.stickyadstv.com/prime-time/fw-amp.min.js');
+}
diff --git a/ads/vendors/freewheel.md b/ads/vendors/freewheel.md
new file mode 100644
index 0000000000000..008b975b78d0f
--- /dev/null
+++ b/ads/vendors/freewheel.md
@@ -0,0 +1,65 @@
+<!---
+Copyright 2018 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.
+-->
+
+# FreeWheel
+
+## Example
+
+### Expand-banner
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="freewheel"
+  data-zone="2003"
+  layout="responsive"
+>
+</amp-ad>
+```
+
+### FloorAd
+
+```html
+<amp-sticky-ad layout="”nodisplay”">
+  <amp-ad width="350" height="150" type="freewheel" data-zone="2003"> </amp-ad>
+</amp-sticky-ad>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact the FreeWheel support team : clientsidesdk@freewheel.tv
+
+Supported parameters:  
+All parameters are optional, unless otherwise stated
+
+-   `data-zone` [required]
+-   `data-blurDisplay`
+-   `data-timeline`
+-   `data-soundButton`
+-   `data-defaultMute`
+-   `data-onOver`
+-   `data-closeAction`
+-   `data-errorAction`
+-   `data-pauseRatio`
+-   `data-label`
+-   `data-vastUrlParams`
+-   `data-gdpr`
+-   `data-gdpr_consent`
+-   `data-gdpr_consented_providers`
+-   `data-useCCPA_USPAPI`
+-   `data-_fw_us_privacy`
+-   `data-useCMP`
diff --git a/ads/vendors/fusion.js b/ads/vendors/fusion.js
new file mode 100644
index 0000000000000..a4b77a1426c0e
--- /dev/null
+++ b/ads/vendors/fusion.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {string=} input
+ * @return {JsonObject|undefined}
+ */
+function queryParametersToObject(input) {
+  if (!input) {
+    return undefined;
+  }
+  return input
+    .split('&')
+    .filter(Boolean)
+    .reduce((obj, val) => {
+      const kv = val.split('=');
+      return Object.assign(obj, {[kv[0]]: kv[1] || true});
+    }, {});
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function fusion(global, data) {
+  validateData(
+    data,
+    [],
+    ['mediaZone', 'layout', 'adServer', 'space', 'parameters']
+  );
+
+  const container = global.document.getElementById('c');
+  const ad = global.document.createElement('div');
+  ad.setAttribute('data-fusion-space', data.space);
+  container.appendChild(ad);
+  const parameters = queryParametersToObject(data.parameters);
+
+  writeScript(
+    global,
+    'https://assets.adtomafusion.net/fusion/latest/fusion-amp.min.js',
+    () => {
+      global.Fusion.apply(container, global.Fusion.loadAds(data, parameters));
+
+      global.Fusion.on.warning.run((ev) => {
+        if (ev.msg === 'Space not present in response.') {
+          global.context.noContentAvailable();
+        }
+      });
+    }
+  );
+}
diff --git a/ads/fusion.md b/ads/vendors/fusion.md
similarity index 92%
rename from ads/fusion.md
rename to ads/vendors/fusion.md
index aa7ae0b0ecbbf..8ed9f3b8d6949 100644
--- a/ads/fusion.md
+++ b/ads/vendors/fusion.md
@@ -38,10 +38,10 @@ For configuration and implementation details, please contact the Fusion support
 
 Supported parameters:
 
-- `data-ad-server`
-- `data-media-zone`
-- `data-layout`
-- `data-space`
-- `data-parameters`
+-   `data-ad-server`
+-   `data-media-zone`
+-   `data-layout`
+-   `data-space`
+-   `data-parameters`
 
 Parameters should be passed as `key&value` pairs `&` separated. Missing value equals `true`. So `...&isMobile&...` from the example above stands for `...&isMobile=true&...`.
diff --git a/ads/vendors/genieessp.js b/ads/vendors/genieessp.js
new file mode 100644
index 0000000000000..4592ac220dcad
--- /dev/null
+++ b/ads/vendors/genieessp.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function genieessp(global, data) {
+  validateData(data, ['vid', 'zid']);
+
+  global.data = data;
+  writeScript(global, 'https://js.gsspcln.jp/l/amp.js');
+}
diff --git a/ads/genieessp.md b/ads/vendors/genieessp.md
similarity index 97%
rename from ads/genieessp.md
rename to ads/vendors/genieessp.md
index b98b447085259..c64bb1f881594 100644
--- a/ads/genieessp.md
+++ b/ads/vendors/genieessp.md
@@ -37,5 +37,5 @@ For semantics of configuration, please see Geniee SSP documentation or [contact
 
 Supported parameters:
 
-- `data-vid`
-- `data-zid`
+-   `data-vid`
+-   `data-zid`
diff --git a/ads/vendors/giraff.js b/ads/vendors/giraff.js
new file mode 100644
index 0000000000000..95bb79adeb523
--- /dev/null
+++ b/ads/vendors/giraff.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function giraff(global, data) {
+  validateData(data, ['blockName']);
+
+  const serverName = data['serverName'] || 'code.giraff.io';
+  const url =
+    '//' +
+    encodeURIComponent(serverName) +
+    '/data/widget-' +
+    encodeURIComponent(data['blockName']) +
+    '.js';
+
+  loadScript(
+    global,
+    url,
+    () => {
+      global.context.renderStart();
+    },
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+
+  const anchorEl = global.document.createElement('div');
+  const widgetId = data['widgetId'] ? '_' + data['widgetId'] : '';
+  anchorEl.id = 'grf_' + data['blockName'] + widgetId;
+  global.document.getElementById('c').appendChild(anchorEl);
+}
diff --git a/ads/giraff.md b/ads/vendors/giraff.md
similarity index 93%
rename from ads/giraff.md
rename to ads/vendors/giraff.md
index 83032e55f3313..42105fecdf4ad 100644
--- a/ads/giraff.md
+++ b/ads/vendors/giraff.md
@@ -35,9 +35,9 @@ For more information, see [Giraff's documentation](https://www.giraff.io/help).
 
 ### Optional parameters
 
-- `data-widget-id`
-- `data-server-name`
+-   `data-widget-id`
+-   `data-server-name`
 
 ### Required parameters
 
-- `data-block-name`
+-   `data-block-name`
diff --git a/ads/vendors/glomex.js b/ads/vendors/glomex.js
new file mode 100644
index 0000000000000..152c2162336aa
--- /dev/null
+++ b/ads/vendors/glomex.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function glomex(global, data) {
+  validateData(data, ['integrationId']);
+  loadScript(global, 'https://player.glomex.com/integration/1/amp-embed.js');
+}
diff --git a/ads/vendors/glomex.md b/ads/vendors/glomex.md
new file mode 100644
index 0000000000000..84ea63e78bb15
--- /dev/null
+++ b/ads/vendors/glomex.md
@@ -0,0 +1,47 @@
+<!---
+Copyright 2017 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.
+-->
+
+# Glomex
+
+## Example
+
+```html
+<amp-embed
+  width="16"
+  height="9"
+  layout="responsive"
+  type="glomex"
+  data-integration-id="my-integration-id"
+  data-playlist-id="my-playlist-id"
+>
+</amp-embed>
+```
+
+## Configuration
+
+For more information, see [Glomex's documentation](https://docs.glomex.com/publisher/video-player-integration/).
+
+### Optional parameters
+
+-   `data-playlist-id`
+-   `data-placement`
+-   `data-playlist-index`
+-   `data-article-id`
+-   `data-article-category`
+
+### Required parameters
+
+-   `data-integration-id`
diff --git a/ads/vendors/gmossp.js b/ads/vendors/gmossp.js
new file mode 100644
index 0000000000000..07f51e3ddb593
--- /dev/null
+++ b/ads/vendors/gmossp.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+const gmosspFields = ['id'];
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function gmossp(global, data) {
+  validateData(data, gmosspFields, []);
+
+  global.gmosspParam = data;
+  writeScript(global, 'https://cdn.gmossp-sp.jp/ads/amp.js');
+}
diff --git a/ads/gmossp.md b/ads/vendors/gmossp.md
similarity index 98%
rename from ads/gmossp.md
rename to ads/vendors/gmossp.md
index 07c219f432229..8fde5bf4c937d 100644
--- a/ads/gmossp.md
+++ b/ads/vendors/gmossp.md
@@ -28,4 +28,4 @@ For configuration details and to generate your tags, please contact dev@ml.gmo-a
 
 Supported parameters:
 
-- `data-id`
+-   `data-id`
diff --git a/ads/vendors/gumgum.js b/ads/vendors/gumgum.js
new file mode 100644
index 0000000000000..9df63369e22fb
--- /dev/null
+++ b/ads/vendors/gumgum.js
@@ -0,0 +1,80 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+import {setStyles} from '../../src/style';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function gumgum(global, data) {
+  validateData(data, ['zone', 'slot']);
+
+  const win = window,
+    ctx = win.context,
+    dom = global.document.getElementById('c'),
+    ampWidth = parseInt(data.width || '0', 10),
+    ampHeight = parseInt(data.height || '0', 10),
+    ggevents = global.ggevents || [];
+
+  const {max} = Math,
+    slotId = parseInt(data.slot, 10),
+    onLoad = function (type) {
+      return function (evt) {
+        const ad = {width: 0, height: 0, ...(evt.ad || {})},
+          identifier = ['GUMGUM', type, evt.id].join('_');
+        ctx.reportRenderedEntityIdentifier(identifier);
+        ctx.renderStart({
+          width: max(ampWidth, ad.width),
+          height: max(ampHeight, ad.height),
+        });
+      };
+    },
+    noFill = function () {
+      ctx.noContentAvailable();
+    };
+
+  // Ads logic starts
+  global.ggv2id = data.zone;
+  global.ggevents = ggevents;
+  global.sourceUrl = context.sourceUrl;
+  global.sourceReferrer = context.referrer;
+
+  if (slotId) {
+    // Slot Ad
+    const ins = global.document.createElement('div');
+    setStyles(ins, {
+      display: 'block',
+      width: '100%',
+      height: '100%',
+    });
+    ins.setAttribute('data-gg-slot', slotId);
+    ins.setAttribute('pl', 2);
+    dom.appendChild(ins);
+    // Events
+    ggevents.push({
+      'slot.nofill': noFill,
+      'slot.close': noFill,
+      'slot.load': onLoad('SLOT'),
+    });
+    // Main script
+    loadScript(global, 'https://js.gumgum.com/slot.js');
+  } else {
+    // No valid configuration
+    ctx.noContentAvailable();
+  }
+}
diff --git a/ads/gumgum.md b/ads/vendors/gumgum.md
similarity index 92%
rename from ads/gumgum.md
rename to ads/vendors/gumgum.md
index b0166ecc75615..d39aae2bedf82 100644
--- a/ads/gumgum.md
+++ b/ads/vendors/gumgum.md
@@ -37,5 +37,5 @@ For parameters, configuration or any questions, contact [GumGum](http://gumgum.c
 
 ### Required parameters
 
-- `data-zone`: GumGum Zone ID
-- `data-slot`: GumGum Slot Ad ID
+-   `data-zone`: GumGum Zone ID
+-   `data-slot`: GumGum Slot Ad ID
diff --git a/ads/vendors/holder.js b/ads/vendors/holder.js
new file mode 100644
index 0000000000000..b1e72cad50da8
--- /dev/null
+++ b/ads/vendors/holder.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function holder(global, data) {
+  validateData(data, ['block'], []);
+  const wcl = global.context.location;
+  const n = navigator.userAgent;
+  let l = '&r' + Math.round(Math.random() * 10000000) + '&h' + wcl.href;
+  if (!(n.indexOf('Safari') != -1 && n.indexOf('Chrome') == -1)) {
+    l += '&c1';
+  }
+  data.queue = l;
+  writeScript(global, 'https://i.holder.com.ua/js2/holder/ajax/ampv1.js');
+}
diff --git a/ads/holder.md b/ads/vendors/holder.md
similarity index 98%
rename from ads/holder.md
rename to ads/vendors/holder.md
index f330a49e0af5f..920d24d25abf8 100644
--- a/ads/holder.md
+++ b/ads/vendors/holder.md
@@ -28,4 +28,4 @@ For configuration details and to generate your tags, please contact techinfo@hol
 
 Supported parameters:
 
-- `data-block`
+-   `data-block`
diff --git a/ads/vendors/ibillboard.js b/ads/vendors/ibillboard.js
new file mode 100644
index 0000000000000..85c5cf2db4349
--- /dev/null
+++ b/ads/vendors/ibillboard.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, validateSrcPrefix, writeScript} from '../../3p/3p';
+
+const validHosts = [
+  'https://go.eu.bbelements.com',
+  'https://go.idnes.bbelements.com',
+  'https://go.goldbachpoland.bbelements.com',
+  'https://go.pol.bbelements.com',
+  'https://go.idmnet.bbelements.com',
+];
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function ibillboard(global, data) {
+  validateData(data, ['src']);
+  const {src} = data;
+  validateSrcPrefix(validHosts, src);
+
+  writeScript(global, src);
+}
diff --git a/ads/ibillboard.md b/ads/vendors/ibillboard.md
similarity index 91%
rename from ads/ibillboard.md
rename to ads/vendors/ibillboard.md
index e9ce5555a198a..c20e9826e028a 100644
--- a/ads/ibillboard.md
+++ b/ads/vendors/ibillboard.md
@@ -38,4 +38,4 @@ For details on the configuration semantics, visit the [ibillboard website](http:
 
 ### Supported parameters
 
-- `src`: Must use **https** protocol and must be from one of the allowed iBillboard hosts.
+-   `src`: Must use **https** protocol and must be from one of the allowed iBillboard hosts.
diff --git a/ads/vendors/idealmedia.js b/ads/vendors/idealmedia.js
new file mode 100644
index 0000000000000..b33cbb34a05b2
--- /dev/null
+++ b/ads/vendors/idealmedia.js
@@ -0,0 +1,62 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function idealmedia(global, data) {
+  validateData(data, ['publisher', 'widget', 'container'], ['url', 'options']);
+
+  const scriptRoot = document.createElement('div');
+  scriptRoot.id = data.container;
+
+  document.body.appendChild(scriptRoot);
+
+  /**
+   * Returns path for provided js filename
+   * @param {string} publisher The first number.
+   * @return {string} Path to provided filename.
+   */
+  function getResourceFilePath(publisher) {
+    const publisherStr = publisher.replace(/[^A-z0-9]/g, '');
+    return `${publisherStr[0]}/${publisherStr[1]}`;
+  }
+
+  const url =
+    `https://jsc.idealmedia.io/${getResourceFilePath(data.publisher)}/` +
+    `${encodeURIComponent(data.publisher)}.` +
+    `${encodeURIComponent(data.widget)}.js?t=` +
+    Math.floor(Date.now() / 36e5);
+
+  global.uniqId = (
+    '00000' + Math.round(Math.random() * 100000).toString(16)
+  ).slice(-5);
+  window['ampOptions' + data.widget + '_' + global.uniqId] = data.options;
+
+  global.context.observeIntersection(function (changes) {
+    /** @type {!Array} */ (changes).forEach(function (c) {
+      window['intersectionRect' + data.widget + '_' + global.uniqId] =
+        c.intersectionRect;
+      window['boundingClientRect' + data.widget + '_' + global.uniqId] =
+        c.boundingClientRect;
+    });
+  });
+
+  loadScript(global, data.url || url);
+}
diff --git a/ads/idealmedia.md b/ads/vendors/idealmedia.md
similarity index 92%
rename from ads/idealmedia.md
rename to ads/vendors/idealmedia.md
index 0f1620a32e205..e70d8eb9e8e1b 100644
--- a/ads/idealmedia.md
+++ b/ads/vendors/idealmedia.md
@@ -38,10 +38,10 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-publisher`
-- `data-widget`
-- `data-container`
+-   `data-publisher`
+-   `data-widget`
+-   `data-container`
 
 ### Optional parameters
 
-- `data-url`
+-   `data-url`
diff --git a/ads/vendors/imedia.js b/ads/vendors/imedia.js
new file mode 100644
index 0000000000000..7ae9c78c540b4
--- /dev/null
+++ b/ads/vendors/imedia.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {computeInMasterFrame, loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function imedia(global, data) {
+  validateData(data, ['id', 'positions']);
+  const positions = JSON.parse(data.positions);
+  const mW = context.isMaster ? global : context.master;
+
+  // create parent element
+  const parentElement = document.createElement('div');
+  parentElement.id = data.id;
+  global.document.getElementById('c').appendChild(parentElement);
+
+  // array of all ad elements and matching contexts through all iframes
+  if (!mW.inPagePositions) {
+    mW.inPagePositions = [];
+  }
+  mW.inPagePositions.push({parentElement, context: global.context});
+
+  computeInMasterFrame(
+    global,
+    'imedia-load',
+    (done) => {
+      loadScript(global, 'https://i.imedia.cz/js/im3.js', () => {
+        if (global.im != null) {
+          mW.im = global.im;
+          mW.im.conf.referer = context.canonicalUrl;
+
+          // send request to get all ads
+          mW.im.getAds(positions, {
+            AMPcallback: (ads) => {
+              mW.ads = ads;
+              done(null);
+            },
+          });
+        }
+      });
+    },
+    () => {
+      mW.inPagePositions = mW.inPagePositions.filter((inPagePostion) => {
+        let used = true;
+        positions.filter((position, index) => {
+          // match right element and zone to write advert from adserver
+          if (inPagePostion.parentElement.id == position.id) {
+            used = false;
+            position.id = inPagePostion.parentElement; // right element "c" to position obj.
+            if (mW.im.writeAd) {
+              mW.im.writeAd(mW.ads[index], position);
+
+              // inform AMP runtime when the ad starts rendering
+              if (mW.ads[index].impress) {
+                inPagePostion.context.renderStart();
+              } else {
+                inPagePostion.context.noContentAvailable();
+              }
+            }
+            return false;
+          }
+        });
+        return used; // remove (filter) element filled with add
+      });
+    }
+  );
+}
diff --git a/ads/imedia.md b/ads/vendors/imedia.md
similarity index 89%
rename from ads/imedia.md
rename to ads/vendors/imedia.md
index 143b9cd042320..daab648cf241c 100644
--- a/ads/imedia.md
+++ b/ads/vendors/imedia.md
@@ -35,10 +35,10 @@ For configuration semantics, see [Imedia's documentation](https://iimedia.sbeta.
 
 Required parameters:
 
-- `data-id`
-- `data-positions`: JSON value
+-   `data-id`
+-   `data-positions`: JSON value
 
 Required JSON fields:
 
-- `id`: unique element id
-- `zoneId`: advertisement identificator
+-   `id`: unique element id
+-   `zoneId`: advertisement identificator
diff --git a/ads/vendors/imobile.js b/ads/vendors/imobile.js
new file mode 100644
index 0000000000000..186376326f2de
--- /dev/null
+++ b/ads/vendors/imobile.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {writeScript} from '../../3p/3p';
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function imobile(global, data) {
+  global.imobileParam = data;
+  writeScript(global, 'https://spamp.i-mobile.co.jp/script/amp.js');
+}
diff --git a/ads/imobile.md b/ads/vendors/imobile.md
similarity index 94%
rename from ads/imobile.md
rename to ads/vendors/imobile.md
index e0d4562f9e089..723e7f9690e60 100644
--- a/ads/imobile.md
+++ b/ads/vendors/imobile.md
@@ -36,6 +36,6 @@ For configuration details and to generate your tags, please contact inquiry@i-mo
 
 Supported parameters:
 
-- `data-pid`
-- `data-asid`
-- `data-adtype`
+-   `data-pid`
+-   `data-asid`
+-   `data-adtype`
diff --git a/ads/vendors/imonomy.js b/ads/vendors/imonomy.js
new file mode 100644
index 0000000000000..c945cc8511afb
--- /dev/null
+++ b/ads/vendors/imonomy.js
@@ -0,0 +1,147 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {doubleclick} from '../../ads/google/doubleclick';
+import {hasOwn} from '../../src/core/types/object';
+import {loadScript, writeScript} from '../../3p/3p';
+
+const DEFAULT_TIMEOUT = 500; // ms
+const EVENT_SUCCESS = 0;
+const EVENT_TIMEOUT = 1;
+const EVENT_ERROR = 2;
+const EVENT_BADTAG = 3;
+const imonomyData = ['pid', 'subId', 'timeout'];
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function imonomy(global, data) {
+  if (!('slot' in data)) {
+    global.CasaleArgs = data;
+    writeScript(global, `//tag.imonomy.com/${data.pid}/indexJTag.js`);
+  } else {
+    //DFP ad request call
+    let calledDoubleclick = false;
+    data.timeout = isNaN(data.timeout) ? DEFAULT_TIMEOUT : data.timeout;
+    const timer = setTimeout(() => {
+      callDoubleclick(EVENT_TIMEOUT);
+    }, data.timeout);
+    const callDoubleclick = function (code) {
+      if (calledDoubleclick) {
+        return;
+      }
+      calledDoubleclick = true;
+      clearTimeout(timer);
+      reportStats(data, code);
+      prepareData(data);
+      doubleclick(global, data);
+    };
+
+    if (typeof data.pid === 'undefined' || isNaN(data.pid)) {
+      callDoubleclick(EVENT_BADTAG);
+      return;
+    }
+
+    global.IndexArgs = {
+      ampCallback: callDoubleclick,
+      ampSuccess: EVENT_SUCCESS,
+      ampError: EVENT_ERROR,
+    };
+
+    loadScript(
+      global,
+      `//tag.imonomy.com/amp/${data.pid}/amp.js`,
+      () => {
+        global.context.renderStart();
+      },
+      () => {
+        global.context.noContentAvailable();
+      }
+    );
+  }
+}
+
+/**
+ * @param {*} data
+ */
+function prepareData(data) {
+  for (const attr in data) {
+    if (hasOwn(data, attr) && imonomyData.indexOf(attr) >= 0) {
+      delete data[attr];
+    }
+  }
+  data.targeting = data.targeting || {};
+  data.targeting['IMONOMY_AMP'] = '1';
+}
+
+/**
+ * @param {*} data
+ * @param {number} code
+ */
+function reportStats(data, code) {
+  try {
+    if (code == EVENT_BADTAG) {
+      return;
+    }
+    const xhttp = new XMLHttpRequest();
+    xhttp.withCredentials = true;
+    let unitFormat = '';
+    let pageLocation = '';
+    if (typeof window.context.location.href !== 'undefined') {
+      pageLocation = encodeURIComponent(window.context.location.href);
+    }
+    const {pid, subId} = data,
+      trackId = 'AMP',
+      notFirst = true,
+      cid = '',
+      abLabel = '',
+      rand = Math.random();
+    if (!isNaN(data.width) && !isNaN(data.height)) {
+      unitFormat = `${data.width}x${data.height}`;
+    }
+    const uid = '',
+      isLocked = false,
+      isTrackable = false,
+      isClient = false,
+      tier = 0;
+    const baseUrl = '//srv.imonomy.com/internal/reporter';
+    let unitCodeUrl = `${baseUrl}?v=2&subid=${subId}&sid=${pid}&`;
+    unitCodeUrl = unitCodeUrl + `format=${unitFormat}&ai=`;
+    unitCodeUrl = unitCodeUrl + `${trackId}&ctxu=${pageLocation}&`;
+    unitCodeUrl = unitCodeUrl + `fb=${notFirst}&`;
+    unitCodeUrl = unitCodeUrl + `cid=${cid} &ab=${abLabel}&cbs=${rand}`;
+    if (uid) {
+      unitCodeUrl = unitCodeUrl + `&uid=${uid}`;
+    }
+    if (isLocked) {
+      unitCodeUrl = unitCodeUrl + `&is_locked=${isLocked}`;
+    }
+    if (isTrackable) {
+      unitCodeUrl = unitCodeUrl + `&istrk=${isTrackable}`;
+    }
+    if (isClient) {
+      unitCodeUrl = unitCodeUrl + `&is_client=${isClient}`;
+      if (tier) {
+        unitCodeUrl = unitCodeUrl + `&tier=${tier}`;
+      }
+    }
+
+    xhttp.open('GET', unitCodeUrl, true);
+    xhttp.setRequestHeader('Content-Type', 'application/json');
+    xhttp.send();
+  } catch (e) {}
+}
diff --git a/ads/imonomy.md b/ads/vendors/imonomy.md
similarity index 95%
rename from ads/imonomy.md
rename to ads/vendors/imonomy.md
index 02f02e677c04c..82839c471b289 100644
--- a/ads/imonomy.md
+++ b/ads/vendors/imonomy.md
@@ -42,8 +42,8 @@ Ad size is based on the `width` and `height` attributes of the `amp-ad` tag by d
 
 ### Required parameters
 
-- `data-pid`
-- `data-sub-id`
-- `data-slot`
+-   `data-pid`
+-   `data-sub-id`
+-   `data-slot`
 
-Additional parameters including `json` will be passed through in the resulting call to DFP. For details please see the [Doubleclick documentation](https://github.com/ampproject/amphtml/blob/master/ads/google/doubleclick.md).
+Additional parameters including `json` will be passed through in the resulting call to DFP. For details please see the [Doubleclick documentation](https://github.com/ampproject/amphtml/blob/main/ads/google/doubleclick.md).
diff --git a/ads/vendors/improvedigital.js b/ads/vendors/improvedigital.js
new file mode 100755
index 0000000000000..6345dbd214a54
--- /dev/null
+++ b/ads/vendors/improvedigital.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function improvedigital(global, data) {
+  validateData(data, ['placement'], ['width', 'height', 'optin', 'keyvalue']);
+
+  let url =
+    'https://ad.360yield.com' +
+    '/adj?' +
+    'p=' +
+    encodeURIComponent(data.placement) +
+    '&w=' +
+    encodeURIComponent(data.width) +
+    '&h=' +
+    encodeURIComponent(data.height) +
+    '&optin=' +
+    encodeURIComponent(data.optin) +
+    '&tz=' +
+    new Date().getTimezoneOffset();
+
+  const value = data.keyvalue;
+  let newData = '';
+  const amps = '&';
+  let validKey = 0;
+
+  if (value && value.length > 0) {
+    const keys = value.split('&');
+    for (let i = 0; i < keys.length; i++) {
+      if (!keys[i]) {
+        continue;
+      }
+      const segment = keys[i].split('=');
+      const segment1 = segment[1] ? encodeURIComponent(segment[1]) : '';
+      if (validKey > 0) {
+        newData += amps;
+      }
+      validKey++;
+      newData += segment[0] + '=' + segment1;
+    }
+  }
+  if (newData) {
+    url += '&' + newData;
+  }
+  writeScript(global, url);
+}
diff --git a/ads/improvedigital.md b/ads/vendors/improvedigital.md
similarity index 91%
rename from ads/improvedigital.md
rename to ads/vendors/improvedigital.md
index de732b05329c6..c3932ba6822d5 100755
--- a/ads/improvedigital.md
+++ b/ads/vendors/improvedigital.md
@@ -50,6 +50,6 @@ information on how to get the required placement IDs and [optional] keyvalue cas
 
 ### Supported parameters
 
-- `placement`: mandatory
-- `optin`
-- `keyvalue`: Fill in the keyvalues as written in the example.
+-   `placement`: mandatory
+-   `optin`
+-   `keyvalue`: Fill in the keyvalues as written in the example.
diff --git a/ads/industrybrains.md b/ads/vendors/industrybrains.md
similarity index 94%
rename from ads/industrybrains.md
rename to ads/vendors/industrybrains.md
index fc1f04bc42c14..5388519da7486 100644
--- a/ads/industrybrains.md
+++ b/ads/vendors/industrybrains.md
@@ -36,6 +36,6 @@ For configuration semantics, see [Industrybrains documentation](https://www.indu
 
 Supported parameters:
 
-- `data-cid`
-- `data-width`
-- `data-height`
+-   `data-cid`
+-   `data-width`
+-   `data-height`
diff --git a/ads/vendors/inmobi.js b/ads/vendors/inmobi.js
new file mode 100644
index 0000000000000..47b9fa947a2e0
--- /dev/null
+++ b/ads/vendors/inmobi.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {setStyle} from '../../src/style';
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function inmobi(global, data) {
+  validateData(data, ['siteid', 'slotid'], []);
+
+  const inmobiConf = {
+    siteid: data.siteid,
+    slot: data.slotid,
+    manual: true,
+    onError: (code) => {
+      if (code == 'nfr') {
+        global.context.noContentAvailable();
+        setStyle(document.getElementById('my-ad-slot'), 'display', 'none');
+      }
+    },
+    onSuccess: () => {
+      global.context.renderStart();
+    },
+  };
+
+  writeScript(global, 'https://cf.cdn.inmobi.com/ad/inmobi.secure.js', () => {
+    global.document.write("<div id='my-ad-slot'></div>");
+    global._inmobi.getNewAd(document.getElementById('my-ad-slot'), inmobiConf);
+  });
+}
diff --git a/ads/inmobi.md b/ads/vendors/inmobi.md
similarity index 90%
rename from ads/inmobi.md
rename to ads/vendors/inmobi.md
index ac89e47949abb..4dc11f65c6d52 100644
--- a/ads/inmobi.md
+++ b/ads/vendors/inmobi.md
@@ -60,8 +60,8 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-siteid`: Site Id is the InMobi property id. You can get this from InMobi dashboard.
-- `data-slotid`: Slot Id is the ad size.
+-   `data-siteid`: Site Id is the InMobi property id. You can get this from InMobi dashboard.
+-   `data-slotid`: Slot Id is the ad size.
 
 ### Test Ads
 
diff --git a/ads/vendors/innity.js b/ads/vendors/innity.js
new file mode 100644
index 0000000000000..d2b4d66f520cf
--- /dev/null
+++ b/ads/vendors/innity.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function innity(global, data) {
+  validateData(data, ['pub', 'zone'], ['channel']);
+  writeScript(global, 'https://cdn.innity.net/admanager.js', () => {
+    const innityAMPZone = global.innity_adZone;
+    const innityAMPTag = new innityAMPZone(
+      encodeURIComponent(data.pub),
+      encodeURIComponent(data.zone),
+      {
+        width: data.width,
+        height: data.height,
+        channel: data.channel ? encodeURIComponent(data.channel) : '',
+      }
+    );
+    // AMP handling or noContentAvailable
+    innityAMPTag.amp(global.context);
+    // else renderStart (with at least house ad)
+    global.context.renderStart();
+  });
+}
diff --git a/ads/innity.md b/ads/vendors/innity.md
similarity index 91%
rename from ads/innity.md
rename to ads/vendors/innity.md
index 517a6e1fd5e54..d322e90ddc761 100644
--- a/ads/innity.md
+++ b/ads/vendors/innity.md
@@ -35,9 +35,9 @@ For semantics of configuration, please reach out to your account manager.
 
 ### Required parameters
 
-- `data-pub`: Publisher ID
-- `data-zone`: Zone ID
+-   `data-pub`: Publisher ID
+-   `data-zone`: Zone ID
 
 ### Optional parameters
 
-- `data-channel`: Channel code
+-   `data-channel`: Channel code
diff --git a/ads/vendors/insticator.js b/ads/vendors/insticator.js
new file mode 100644
index 0000000000000..b86fd097fbcaf
--- /dev/null
+++ b/ads/vendors/insticator.js
@@ -0,0 +1,99 @@
+/**
+ * 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.
+ */
+
+import {validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function insticator(global, data) {
+  // validate passed data attributes
+  validateData(data, ['siteId', 'embedId']);
+
+  // create insticator markup
+  global.document
+    .getElementById('c')
+    .appendChild(createTemplate(data['embedId']));
+
+  // create ads and embed
+  createAdsAndEmbed(data['siteId'], data['embedId']);
+}
+
+/**
+ * Create HTML template to be populated later
+ * @param {string} embedId The Unique Identifier of this particular Embed
+ * @return {Element} HTML template
+ */
+function createTemplate(embedId) {
+  const template = document.createElement('template');
+  template./*OK*/ innerHTML = `
+    <div id="insticator-container">
+      <div id="div-insticator-ad-1"></div>
+      <div id="insticator-embed" embed-id="${embedId}"></div>
+      <div id="div-insticator-ad-2"></div>
+    </div>
+  `;
+  return template.content;
+}
+
+/**
+ * Generates Ads and Embed
+ * @param {string} siteId Used to grab the ads file
+ * @param {string} embedId Used to grab the unique embed requested
+ */
+function createAdsAndEmbed(siteId, embedId) {
+  // helper vars
+  const a = window;
+  const c = document;
+  const s = 'script';
+  const u = `//d3lcz8vpax4lo2.cloudfront.net/ads-code/${siteId}.js`; // vars from preconnect urls and data attributes on amp-embed tag
+
+  // create insticator object on the window
+  'Insticator' in a ||
+    (a.Insticator = {
+      ad: {
+        loadAd: function (b) {
+          a.Insticator.ad.q.push(b);
+        },
+        q: [],
+      },
+      helper: {},
+      embed: {},
+      version: '4.0',
+      q: [],
+      amp: null, // this will get set to window.context which is the AMP API so we can access from our ads code
+      load: function (t, o) {
+        a.Insticator.amp = window.context; // set the Insticator object property amp to window.context which is the AMP API so we can access from our ads code
+        a.Insticator.q.push({t, o});
+      },
+    });
+
+  // load ads code
+  const b = c.createElement(s);
+  b.src = u;
+  b.async = !0;
+  const d = c.getElementsByTagName(s)[0];
+  d.parentNode.insertBefore(b, d);
+
+  // execute functions of insticator object on the window (load ads and embed)
+  a.Insticator.ad.loadAd('div-insticator-ad-1');
+  a.Insticator.ad.loadAd('div-insticator-ad-2');
+  a.Insticator.load('em', {id: embedId});
+
+  // now tell AMP runtime to start rendering ads
+  window.context.renderStart();
+}
diff --git a/ads/insticator.md b/ads/vendors/insticator.md
similarity index 90%
rename from ads/insticator.md
rename to ads/vendors/insticator.md
index 8a2d15c770031..70b7c0e0ee606 100644
--- a/ads/insticator.md
+++ b/ads/vendors/insticator.md
@@ -37,5 +37,5 @@ For details on the configuration semantics, please contact [Insticator](https://
 
 ### Required parameters
 
-- `data-site-id`: ID of the site your Insticator Embed lives in
-- `data-embed-id`: ID of your Insticator Embed
+-   `data-site-id`: ID of the site your Insticator Embed lives in
+-   `data-embed-id`: ID of your Insticator Embed
diff --git a/ads/vendors/invibes.js b/ads/vendors/invibes.js
new file mode 100644
index 0000000000000..468ebeb1e4c1e
--- /dev/null
+++ b/ads/vendors/invibes.js
@@ -0,0 +1,73 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function invibes(global, data) {
+  global.invibesAmp = {
+    allowedData: ['adCateg', 'pid', 'customEndpoint'],
+    mandatoryData: [],
+    data,
+  };
+
+  validateData(
+    data,
+    global.invibesAmp.mandatoryData,
+    global.invibesAmp.allowedData
+  );
+
+  let url = data.customEndpoint || 'https://k.r66net.com/GetAmpLink';
+
+  if (data.adCateg) {
+    url = addQueryParam(url, 'adCateg', data.adCateg);
+  }
+
+  if (data.pid) {
+    url = addQueryParam(url, 'pid', data.pid);
+  }
+
+  if (
+    window &&
+    window.context &&
+    window.context.location &&
+    window.context.location.href
+  ) {
+    url = addQueryParam(url, 'referrerUrl', window.context.location.href);
+  }
+
+  loadScript(global, url);
+}
+
+/**
+ * @param {string} url
+ * @param {string} param
+ * @param {string} value
+ * @return {string}
+ */
+function addQueryParam(url, param, value) {
+  const paramValue =
+    encodeURIComponent(param) + '=' + encodeURIComponent(value);
+  if (url.indexOf('?') > -1) {
+    url += '&' + paramValue;
+  } else {
+    url += '?' + paramValue;
+  }
+  return url;
+}
diff --git a/ads/vendors/invibes.md b/ads/vendors/invibes.md
new file mode 100644
index 0000000000000..2b06e7d5bb170
--- /dev/null
+++ b/ads/vendors/invibes.md
@@ -0,0 +1,50 @@
+<!---
+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.
+-->
+
+# Invibes
+
+## Example
+
+```html
+<amp-ad
+  width="300"
+  height="300"
+  type="invibes"
+  data-pid="placement1"
+  data-ad-categ="infeed"
+  data-custom-endpoint="https://k.r66net.com/GetAmpLink"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For configuration semantics, please contact [Invibes](https://www.invibes.com/#section-contact-email)
+
+Supported parameters:
+
+-   `data-pid`
+-   `data-ad-categ`
+-   `data-custom-endpoint`
+
+## User Consent Integration
+
+Invibes ad approaches user consent as follows:
+
+-   `CONSENT_POLICY_STATE.UNKNOWN`: Serve a non-personalized ad to the user.
+-   `CONSENT_POLICY_STATE.INSUFFICIENT`: Serve a non-personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Serve a non-personalized ad to the user.
+-   `CONSENT_POLICY_STATE.SUFFICIENT`: Serve a personalized ad to the user.
diff --git a/ads/vendors/iprom.js b/ads/vendors/iprom.js
new file mode 100644
index 0000000000000..45da9c623d7f3
--- /dev/null
+++ b/ads/vendors/iprom.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {parseJson} from '../../src/core/types/object/json';
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function iprom(global, data) {
+  validateData(data, ['zone', 'sitepath'], ['keywords', 'channels']);
+
+  const ampdata = {
+    sitepath: '[]',
+    zone: [],
+    keywords: '',
+    channels: '',
+    ...data,
+  };
+
+  /**
+   * Callback for WriteScript
+   */
+  function namespaceLoaded() {
+    const ipromNS = window.ipromNS || {};
+
+    ipromNS.AdTag = ipromNS.AdTag || {};
+
+    const config = {
+      sitePath: parseJson(ampdata.sitepath),
+      containerId: 'c',
+      zoneId: ampdata.zone,
+      prebid: true,
+      amp: true,
+      keywords: ampdata.keywords ? ampdata.keywords.split(',') : [],
+      channels: ampdata.channels ? ampdata.channels.split(',') : [],
+    };
+
+    const tag = new ipromNS.AdTag(config);
+    tag.init();
+  }
+
+  writeScript(global, 'https://cdn.ipromcloud.com/ipromNS.js', namespaceLoaded);
+}
diff --git a/ads/iprom.md b/ads/vendors/iprom.md
similarity index 86%
rename from ads/iprom.md
rename to ads/vendors/iprom.md
index e9fada23591a4..79158a126ba1d 100644
--- a/ads/iprom.md
+++ b/ads/vendors/iprom.md
@@ -40,10 +40,10 @@ information on how to get the required ad tag.
 
 Required:
 
-- `data-zone`: Adserver zone ID
-- `data-sitepath`: Sitepath of your page
+-   `data-zone`: Adserver zone ID
+-   `data-sitepath`: Sitepath of your page
 
 Optional:
 
-- `data-keywords`: Comma delimited
-- `data-channels`: Comma delimited
+-   `data-keywords`: Comma delimited
+-   `data-channels`: Comma delimited
diff --git a/ads/vendors/ix.js b/ads/vendors/ix.js
new file mode 100644
index 0000000000000..7eb8627e21032
--- /dev/null
+++ b/ads/vendors/ix.js
@@ -0,0 +1,131 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {doubleclick} from '../../ads/google/doubleclick';
+import {hasOwn} from '../../src/core/types/object';
+import {loadScript, writeScript} from '../../3p/3p';
+
+const DEFAULT_TIMEOUT = 500; // ms
+const EVENT_SUCCESS = 0;
+const EVENT_TIMEOUT = 1;
+const EVENT_ERROR = 2;
+const EVENT_BADTAG = 3;
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function ix(global, data) {
+  if (!('slot' in data)) {
+    global.CasaleArgs = data;
+    writeScript(global, 'https://js-sec.indexww.com/indexJTag.js');
+  } else {
+    //DFP ad request call
+
+    const start = Date.now();
+    let calledDoubleclick = false;
+    data.ixTimeout = isNaN(data.ixTimeout) ? DEFAULT_TIMEOUT : data.ixTimeout;
+    const timer = setTimeout(() => {
+      callDoubleclick(EVENT_TIMEOUT);
+    }, data.ixTimeout);
+
+    const callDoubleclick = function (code) {
+      if (calledDoubleclick) {
+        return;
+      }
+      calledDoubleclick = true;
+      clearTimeout(timer);
+      reportStats(data.ixId, data.ixSlot, data.slot, start, code);
+      prepareData(data);
+      doubleclick(global, data);
+    };
+
+    if (typeof data.ixId === 'undefined' || isNaN(data.ixId)) {
+      callDoubleclick(EVENT_BADTAG);
+      return;
+    }
+
+    global.IndexArgs = {
+      ampCallback: callDoubleclick,
+      ampSuccess: EVENT_SUCCESS,
+      ampError: EVENT_ERROR,
+    };
+
+    loadScript(
+      global,
+      'https://js-sec.indexww.com/apl/amp.js',
+      undefined,
+      () => {
+        callDoubleclick(EVENT_ERROR);
+      }
+    );
+  }
+}
+
+/**
+ * @param {!Object} data
+ */
+function prepareData(data) {
+  for (const attr in data) {
+    if (hasOwn(data, attr) && /^ix[A-Z]/.test(attr)) {
+      delete data[attr];
+    }
+  }
+  data.targeting = data.targeting || {};
+  data.targeting['IX_AMP'] = '1';
+}
+
+/**
+ * @param {string} siteID
+ * @param {string} slotID
+ * @param {string} dfpSlot
+ * @param {number} start
+ * @param {number} code
+ */
+function reportStats(siteID, slotID, dfpSlot, start, code) {
+  try {
+    if (code == EVENT_BADTAG) {
+      return;
+    }
+    const xhttp = new XMLHttpRequest();
+    xhttp.withCredentials = true;
+
+    const deltat = Date.now() - start;
+    const ts = (start / 1000) >> 0;
+    const ets = (Date.now() / 1000) >> 0;
+    let url = 'https://as-sec.casalemedia.com/headerstats?s=' + siteID;
+    if (typeof window.context.location.href !== 'undefined') {
+      url += '&u=' + encodeURIComponent(window.context.location.href);
+    }
+    let stats = '{"p":"display","d":"mobile","t":' + ts + ',';
+    stats += '"sl":[{"s": "' + slotID + '",';
+    stats += '"t":' + ets + ',';
+    stats += '"e": [{';
+    if (code == EVENT_SUCCESS) {
+      stats += '"n":"amp-s",';
+    } else if (code == EVENT_TIMEOUT) {
+      stats += '"n":"amp-t",';
+    } else {
+      stats += '"n":"amp-e",';
+    }
+    stats += '"v":"' + deltat + '",';
+    stats += '"b": "INDX","x": "' + dfpSlot.substring(0, 64) + '"}]}]}';
+
+    xhttp.open('POST', url, true);
+    xhttp.setRequestHeader('Content-Type', 'application/json');
+    xhttp.send(stats);
+  } catch (e) {}
+}
diff --git a/ads/vendors/ix.md b/ads/vendors/ix.md
new file mode 100644
index 0000000000000..a3a32a3976dc0
--- /dev/null
+++ b/ads/vendors/ix.md
@@ -0,0 +1,114 @@
+<!---
+Copyright 2016 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.
+-->
+
+# Index Exchange AMP RTC
+
+Index Exchange (IX) supports [AMP Real Time Config (RTC)](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/rtc-publisher-implementation-guide.md) which allows Publishers to augment their ad requests with targeting information that is retrieved at runtime. This document provides instructions on adding IX as a vendor to AMP pages.
+
+## Configuration
+
+Each [amp-ad](https://amp.dev/documentation/components/amp-ad/) element that uses RTC must have the `rtc-config` attribute set with valid JSON.
+
+**Attributes**
+
+-   `<amp-ad>`: Required. IX `<amp-ad>` tags require the `width`, `height`, and `type="doubleclick"` parameters.</br>
+    **Note**: IX leverages AMP through Google Ad Manager (GAM, formerly DoubleClick for Publishers).
+
+-   `data-slot`: Required. Data attributes to serve ads.
+
+-   `data-multi-size`: Optional. A string of comma separated sizes, which if present, forces the tag to request an ad with all of the given sizes, including the primary size. The `width` and `height` attributes are always included as one of the valid sizes, unless overridden by `data-override-width` and `data-override-height` attributes which change the size of creatives eligible for the slot. For details refer to the [Multi-size Ad documentation](https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad-network-doubleclick-impl/multi-size.md).
+
+-   `data-multi-size-validation`: Optional. If set to false, this allows secondary sizes specified in the `data-multi-size` attribute to be less than 2/3rds of the corresponding primary size. By default, this is assumed to be true.
+
+-   `rtc-config`: JSON configuration data which handles the communication with AMP RTC.
+    -   `vendors` : Required object. The key is `IndexExchange` and the value is the `SITE_ID`.</br>
+        **Note:** Refer to the materials provided by your account team for your specific SITE_ID details. We recommend one SITE_ID per domain, per unique slot and size. To use more than one SITE_ID, contact your IX Representative.
+    -   `timeoutMillis`: Optional integer. Defines the timeout in milliseconds for each individual RTC callout. The configured timeout must be greater than 0 and less than 1000ms. If omitted, the timeout value defaults to 1000ms.
+
+### Example: RTC Specification on an amp-ad
+
+```
+<!-- Note: Default timeout is 1000ms -->
+<amp-ad
+  width="320"
+  height="50"
+  type="doubleclick"
+  data-slot="/1234/pos"
+  rtc-config='{
+                "vendors": {
+                  "IndexExchange": {"SITE_ID": "123456"}
+                },
+                "timeoutMillis": 1000
+              }'
+>
+</amp-ad>
+```
+
+The value of `rtc-config` must conform to the following specification:
+
+```
+{
+  "vendors": {
+    "IndexExchange": {"SITE_ID": "123456"}
+  },
+  "timeoutMillis": 1000
+}
+```
+
+### Example: Multi-size request on an amp-ad
+
+```html
+<!-- Note: Default timeout is 1000ms -->
+<amp-ad
+  width="728"
+  height="90"
+  type="doubleclick"
+  data-slot="/1234/pos"
+  data-multi-size="700x90,700x60,500x60"
+  rtc-config='{
+                "vendors": {
+                  "IndexExchange": {"SITE_ID": "123456"}
+                },
+                "timeoutMillis": 1000
+              }'
+>
+</amp-ad>
+```
+
+### Example: Multi-size request on an amp-ad ignoring size validation
+
+```html
+<!-- Note: Default timeout is 1000ms -->
+<amp-ad
+  width="728"
+  height="90"
+  type="doubleclick"
+  data-slot="/1234/pos"
+  data-multi-size="300x25"
+  data-multi-size-validation="false"
+  rtc-config='{
+                "vendors": {
+                  "IndexExchange": {"SITE_ID": "123456"}
+                },
+                "timeoutMillis": 1000
+              }'
+>
+</amp-ad>
+```
+
+Additional parameters including JSON are passed through in the resulting call to GAM. For details refer to the [Google Ad Manager documentation](https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad-network-doubleclick-impl/amp-ad-network-doubleclick-impl-internal.md).
+
+To learn about the required Google Ad Manager (GAM) configuration, refer to [Index Exchange Knowledge Base](https://kb.indexexchange.com/Mobile/About_AMP.htm).
diff --git a/ads/vendors/jubna.js b/ads/vendors/jubna.js
new file mode 100644
index 0000000000000..57655cfdbf599
--- /dev/null
+++ b/ads/vendors/jubna.js
@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function jubna(global, data) {
+  validateData(data, ['wid', 'pid']);
+  global._jubna = global._jubna || {
+    widgetID: data['wid'],
+    pubID: data['pid'],
+    referrer: global.context.referrer,
+  };
+  loadScript(global, 'https://cdn.jubna.com/adscripts/jb_amp_loader.js');
+}
diff --git a/ads/jubna.md b/ads/vendors/jubna.md
similarity index 92%
rename from ads/jubna.md
rename to ads/vendors/jubna.md
index 5c164aa3b2382..522a3c9bb4d8e 100644
--- a/ads/jubna.md
+++ b/ads/vendors/jubna.md
@@ -36,5 +36,5 @@ For details on the configuration semantics, please contact Jubna or refer to the
 
 ### Required parameters
 
-- `wid`: Widget ID
-- `pid`: Publisher ID || Uniquie ID of your account
+-   `wid`: Widget ID
+-   `pid`: Publisher ID || Uniquie ID of your account
diff --git a/ads/vendors/kargo.js b/ads/vendors/kargo.js
new file mode 100644
index 0000000000000..45743e8bd78b4
--- /dev/null
+++ b/ads/vendors/kargo.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {computeInMasterFrame, loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function kargo(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+
+  validateData(data, ['site', 'slot'], ['options']);
+
+  // Kargo AdTag url
+  const kargoScriptUrl =
+    'https://storage.cloud.kargo.com/ad/network/tag/v3/' + data.site + '.js';
+
+  // parse extra ad call options (optional)
+  let options = {};
+  if (data.options != null) {
+    try {
+      options = JSON.parse(data.options);
+    } catch (e) {}
+  }
+
+  // Add window source reference to ad options
+  options.source_window = global;
+
+  computeInMasterFrame(
+    global,
+    'kargo-load',
+    function (done) {
+      // load AdTag in Master window
+      loadScript(global, kargoScriptUrl, () => {
+        let success = false;
+        if (global.Kargo != null && global.Kargo.loaded) {
+          success = true;
+        }
+
+        done(success);
+      });
+    },
+    (success) => {
+      if (success) {
+        const w = options.source_window;
+
+        // Add reference to Kargo api to this window if it's not the Master window
+        if (!w.context.isMaster) {
+          w.Kargo = w.context.master.Kargo;
+        }
+
+        w.Kargo.getAd(data.slot, options);
+      } else {
+        throw new Error('Kargo AdTag failed to load');
+      }
+    }
+  );
+}
diff --git a/ads/kargo.md b/ads/vendors/kargo.md
similarity index 94%
rename from ads/kargo.md
rename to ads/vendors/kargo.md
index 7daa9256cf0c0..a2c0f4950a5c2 100644
--- a/ads/kargo.md
+++ b/ads/vendors/kargo.md
@@ -36,6 +36,6 @@ For configuration semantics, [contact Kargo](http://www.kargo.com/contact/).
 
 Supported parameters:
 
-- `data-site`
-- `data-slot`
-- `data-options`
+-   `data-site`
+-   `data-slot`
+-   `data-options`
diff --git a/ads/vendors/ketshwa.js b/ads/vendors/ketshwa.js
new file mode 100644
index 0000000000000..0e9a976b7df4b
--- /dev/null
+++ b/ads/vendors/ketshwa.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function ketshwa(global, data) {
+  validateData(data, ['widgetid', 'externalid'], []);
+
+  const {externalid, widgetid} = data;
+  const skey = `widget_${widgetid}`;
+
+  const dv = global.document.createElement('div');
+  dv.id = skey;
+  global.document.getElementById('c').appendChild(dv);
+
+  writeScript(
+    global,
+    `https://widget-cdn.ketshwa.com/m/p/${widgetid}/${externalid}.js`,
+    () => {
+      global.KetshwaSDK.showWidget(widgetid, skey);
+    }
+  );
+}
diff --git a/ads/vendors/ketshwa.md b/ads/vendors/ketshwa.md
new file mode 100644
index 0000000000000..f41bd06bec626
--- /dev/null
+++ b/ads/vendors/ketshwa.md
@@ -0,0 +1,38 @@
+<!---
+Copyright 2021 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.
+-->
+
+# Ketshwa
+
+Serves ads from [Ketshwa](https://www.ketshwa.com/).
+
+## Example
+
+### Widgets
+
+```html
+<amp-ad
+  type="ketshwa"
+  data-widgetid="5f4eb6bef383a2a8cf001a07"
+  data-externalid="1082"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact the ad network or refer to their documentation.
+
+#### Required parameters
+
+-   `widgetid`
+-   `externalid`
diff --git a/ads/vendors/kiosked.js b/ads/vendors/kiosked.js
new file mode 100644
index 0000000000000..15ca41854cd09
--- /dev/null
+++ b/ads/vendors/kiosked.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {hasOwn} from '../../src/core/types/object';
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function kiosked(global, data) {
+  let scriptId;
+  validateData(data, ['scriptid'], []);
+  if (hasOwn(data, 'scriptid')) {
+    scriptId = data['scriptid'];
+  }
+  window.addEventListener(
+    'kioskedAdRender',
+    function () {
+      global.context.renderStart();
+    },
+    false
+  );
+
+  window.addEventListener(
+    'kioskedAdNoFill',
+    function () {
+      global.context.noContentAvailable();
+    },
+    false
+  );
+
+  writeScript(
+    global,
+    'https://scripts.kiosked.com/loader/kiosked-ad.js?staticTagId=' + scriptId
+  );
+}
diff --git a/ads/kiosked.md b/ads/vendors/kiosked.md
similarity index 97%
rename from ads/kiosked.md
rename to ads/vendors/kiosked.md
index 7c4c8323d959a..1959888affca3 100644
--- a/ads/kiosked.md
+++ b/ads/vendors/kiosked.md
@@ -29,4 +29,4 @@ For testing purposes you can use `data-scriptid="91"`.
 
 ### Required parameters
 
-- `data-scriptid`
+-   `data-scriptid`
diff --git a/ads/vendors/kixer.js b/ads/vendors/kixer.js
new file mode 100644
index 0000000000000..4e47c1b9c6b6a
--- /dev/null
+++ b/ads/vendors/kixer.js
@@ -0,0 +1,92 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+import {parseUrlDeprecated} from '../../src/url';
+
+/* global
+__kxamp: false,
+__kx_ad_slots: false,
+__kx_ad_start: false,
+__kx_viewability: false,
+*/
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function kixer(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+
+  validateData(data, ['adslot'], []);
+
+  let inView = false;
+  let viewed = false;
+  let viewTimer = null;
+
+  const d = global.document.createElement('div');
+  d.id = '__kx_ad_' + data.adslot;
+  global.document.getElementById('c').appendChild(d);
+
+  const kxload = function () {
+    d.removeEventListener('load', kxload, false);
+    if (d.childNodes.length > 0) {
+      global.context.renderStart();
+    } else {
+      global.context.noContentAvailable();
+    }
+  };
+  d.addEventListener('load', kxload, false); // Listen for the kixer load event
+
+  const kxviewCheck = function (intersectionEntry) {
+    inView = intersectionEntry.intersectionRatio > 0.5; // Half of the unit is in the viewport
+    if (inView) {
+      if (!viewed && viewTimer == null) {
+        // If the ad hasn't been viewed and the timer is not set
+        viewTimer = setTimeout(kxviewFire, 900); // Set a Timeout to check the ad in 900ms and fire the view
+      }
+    } else {
+      if (viewTimer) {
+        // If the Timeout is set
+        clearTimeout(viewTimer); // Clear the Timeout
+        viewTimer = null;
+      }
+    }
+  };
+
+  const kxviewFire = function () {
+    if (inView) {
+      // if the ad is still in the viewport
+      if (typeof __kx_viewability.process_locked === 'function') {
+        viewed = true;
+        __kx_viewability.process_locked(data.adslot); // Fire kixer view
+      }
+    }
+  };
+
+  global.context.observeIntersection(function (changes) {
+    /** @type {!Array} */ (changes).forEach(function (c) {
+      kxviewCheck(c);
+    });
+  });
+
+  loadScript(global, 'https://cdn.kixer.com/ad/load.js', () => {
+    global.__kx_domain = parseUrlDeprecated(global.context.sourceUrl).hostname; // Get domain
+    __kxamp[data.adslot] = 1;
+    __kx_ad_slots.push(data.adslot);
+    __kx_ad_start();
+  });
+}
diff --git a/ads/kixer.md b/ads/vendors/kixer.md
similarity index 97%
rename from ads/kixer.md
rename to ads/vendors/kixer.md
index 8fe02dcdbb70b..2fdc94d62b414 100644
--- a/ads/kixer.md
+++ b/ads/vendors/kixer.md
@@ -28,4 +28,4 @@ For ad slot setup, please [contact Kixer](http://kixer.com).
 
 Supported parameters:
 
-- `data-adslot`
+-   `data-adslot`
diff --git a/ads/vendors/kuadio.js b/ads/vendors/kuadio.js
new file mode 100644
index 0000000000000..c713defcece94
--- /dev/null
+++ b/ads/vendors/kuadio.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function kuadio(global, data) {
+  validateData(
+    data,
+    ['widgetId'],
+    ['region', 'baseUrl', 'betaMode', 'debugMode', 'fastParse', 'ref']
+  );
+
+  global._pvmax = {
+    region: data.region,
+    baseUrl: data.baseUrl,
+    betaMode: data.betaMode === 'true',
+    debugMode: data.debugMode === 'true',
+    fastParse: data.fastParse !== 'false',
+  };
+
+  const e = global.document.createElement('div');
+  e.className = '_pvmax_recommend';
+  e.setAttribute('data-widget-id', data.widgetId);
+  e.setAttribute('data-ref', data.ref || global.context.canonicalUrl);
+  global.document.getElementById('c').appendChild(e);
+
+  loadScript(global, 'https://api.pvmax.net/v1.0/pvmax.js');
+}
diff --git a/ads/kuadio.md b/ads/vendors/kuadio.md
similarity index 89%
rename from ads/kuadio.md
rename to ads/vendors/kuadio.md
index 261fb675c581b..16c7d00538ea4 100644
--- a/ads/kuadio.md
+++ b/ads/vendors/kuadio.md
@@ -37,12 +37,12 @@ For configuration semantics, contact [Kuadio](https://www.tenmax.io/kuadio).
 
 ### Required parameters
 
-- `data-widget-id`
+-   `data-widget-id`
 
 ### Optional parameters
 
-- `data-region`
-- `data-debug-mode`
-- `data-beta-mode`
-- `data-fast-parse`
-- `data-ref`
+-   `data-region`
+-   `data-debug-mode`
+-   `data-beta-mode`
+-   `data-fast-parse`
+-   `data-ref`
diff --git a/ads/vendors/lentainform.js b/ads/vendors/lentainform.js
new file mode 100644
index 0000000000000..a23b562e58394
--- /dev/null
+++ b/ads/vendors/lentainform.js
@@ -0,0 +1,55 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function lentainform(global, data) {
+  validateData(data, ['publisher', 'widget', 'container'], ['url', 'options']);
+
+  const scriptRoot = document.createElement('div');
+  scriptRoot.id = data.container;
+
+  document.body.appendChild(scriptRoot);
+
+  const publisherStr = data.publisher.replace(/[^A-z0-9]/g, '');
+
+  const url =
+    `https://jsc.lentainform.com/${encodeURIComponent(publisherStr[0])}/` +
+    `${encodeURIComponent(publisherStr[1])}/` +
+    `${encodeURIComponent(data.publisher)}.` +
+    `${encodeURIComponent(data.widget)}.js?t=` +
+    Math.floor(Date.now() / 36e5);
+
+  global.uniqId = (
+    '00000' + Math.round(Math.random() * 100000).toString(16)
+  ).slice(-5);
+  window['ampOptions' + data.widget + '_' + global.uniqId] = data.options;
+
+  global.context.observeIntersection(function (changes) {
+    /** @type {!Array} */ (changes).forEach(function (c) {
+      window['intersectionRect' + data.widget + '_' + global.uniqId] =
+        c.intersectionRect;
+      window['boundingClientRect' + data.widget + '_' + global.uniqId] =
+        c.boundingClientRect;
+    });
+  });
+
+  loadScript(global, data.url || url);
+}
diff --git a/ads/lentainform.md b/ads/vendors/lentainform.md
similarity index 91%
rename from ads/lentainform.md
rename to ads/vendors/lentainform.md
index 2ce59e9b5f509..9fd78dd84b858 100644
--- a/ads/lentainform.md
+++ b/ads/vendors/lentainform.md
@@ -35,10 +35,11 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-publisher`
-- `data-widget`
-- `data-container`
+-   `data-publisher`
+-   `data-widget`
+-   `data-container`
 
 ### Optional parameters
 
-- `data-url`
+-   `data-url`
+-   `data-options`
diff --git a/ads/vendors/ligatus.js b/ads/vendors/ligatus.js
new file mode 100644
index 0000000000000..32f5ab263ab81
--- /dev/null
+++ b/ads/vendors/ligatus.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateSrcPrefix, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function ligatus(global, data) {
+  const {src} = data;
+  validateSrcPrefix('https://a-ssl.ligatus.com/', src);
+  writeScript(global, src);
+}
diff --git a/ads/ligatus.md b/ads/vendors/ligatus.md
similarity index 98%
rename from ads/ligatus.md
rename to ads/vendors/ligatus.md
index b6f02c0531110..73272755f5984 100644
--- a/ads/ligatus.md
+++ b/ads/vendors/ligatus.md
@@ -34,4 +34,4 @@ For further configuration details, please contact mobile@ligatus.com
 
 Supported parameters:
 
-- `src`
+-   `src`
diff --git a/ads/vendors/lockerdome.js b/ads/vendors/lockerdome.js
new file mode 100644
index 0000000000000..e9d9d0e92dcf3
--- /dev/null
+++ b/ads/vendors/lockerdome.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function lockerdome(global, data) {
+  validateData(data, ['slot']);
+  global.SLOT = data.slot;
+  loadScript(global, 'https://cdn2.lockerdomecdn.com/_js/amp.js');
+}
diff --git a/ads/lockerdome.md b/ads/vendors/lockerdome.md
similarity index 98%
rename from ads/lockerdome.md
rename to ads/vendors/lockerdome.md
index 13f38856944b9..4dc518a4fc8dc 100644
--- a/ads/lockerdome.md
+++ b/ads/vendors/lockerdome.md
@@ -34,4 +34,4 @@ For details on the configuration semantics, please contact [LockerDome](https://
 
 ### Required parameters
 
-- `data-slot`
+-   `data-slot`
diff --git a/ads/vendors/logly.js b/ads/vendors/logly.js
new file mode 100644
index 0000000000000..8fbe7ead5fd60
--- /dev/null
+++ b/ads/vendors/logly.js
@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function logly(global, data) {
+  validateData(data, ['adspotid']);
+
+  const d = global.document.createElement('div');
+  d.id = 'logly-lift-' + data['adspotid'];
+  global.document.getElementById('c').appendChild(d);
+
+  const url =
+    'https://l.logly.co.jp/lift_widget.js' +
+    `?adspot_id=${encodeURIComponent(data['adspotid'])}`;
+
+  loadScript(global, url);
+}
diff --git a/ads/logly.md b/ads/vendors/logly.md
similarity index 97%
rename from ads/logly.md
rename to ads/vendors/logly.md
index 2e04cb0158698..27f810a7a64a9 100644
--- a/ads/logly.md
+++ b/ads/vendors/logly.md
@@ -35,4 +35,4 @@ For configuration details, please contact [LOGLY](https://www.logly.co.jp/forms/
 
 Supported parameters:
 
-- `data-adspotid`
+-   `data-adspotid`
diff --git a/ads/vendors/loka.js b/ads/vendors/loka.js
new file mode 100644
index 0000000000000..b84d517e486fa
--- /dev/null
+++ b/ads/vendors/loka.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function loka(global, data) {
+  validateData(data, ['unitParams'], []);
+
+  global.lokaParams = data;
+
+  const container = global.document.querySelector('#c');
+  container.addEventListener('lokaUnitLoaded', (e) => {
+    if (e.detail.isReady) {
+      global.context.renderStart();
+    } else {
+      global.context.noContentAvailable();
+    }
+  });
+
+  loadScript(global, 'https://loka-cdn.akamaized.net/scene/amp.js');
+}
diff --git a/ads/loka.md b/ads/vendors/loka.md
similarity index 91%
rename from ads/loka.md
rename to ads/vendors/loka.md
index 4ed9fb4b797f5..92eccbce79490 100644
--- a/ads/loka.md
+++ b/ads/vendors/loka.md
@@ -46,16 +46,16 @@ For configuration details and to generate your tags, please contact https://loka
 
 Supported parameters:
 
-- `data-unit-params`: JSON value
+-   `data-unit-params`: JSON value
 
 Required JSON fields:
 
-- `unit`: Ad type
-- `id`: Delivery ID for Ad
+-   `unit`: Ad type
+-   `id`: Delivery ID for Ad
 
 Optional JSON fields:
 
-- `tag`: User specified value
+-   `tag`: User specified value
 
 ## Design information
 
diff --git a/ads/vendors/luckyads.js b/ads/vendors/luckyads.js
new file mode 100644
index 0000000000000..bea547bcecb03
--- /dev/null
+++ b/ads/vendors/luckyads.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function luckyads(global, data) {
+  validateData(data, ['src', 'laBlock']);
+  const {src} = data;
+  createContainer(global, data);
+  loadScript(global, src);
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function createContainer(global, data) {
+  const d = global.document.createElement('div');
+  d.setAttribute('data-la-block', data['laBlock']);
+  global.document.getElementById('c').appendChild(d);
+}
diff --git a/ads/vendors/luckyads.md b/ads/vendors/luckyads.md
new file mode 100644
index 0000000000000..d9d94c215477c
--- /dev/null
+++ b/ads/vendors/luckyads.md
@@ -0,0 +1,37 @@
+<!---
+Copyright 2020 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.
+-->
+
+# LuckyAds
+
+Provides support for [LuckyAds](https://luckyads.pro/) widgets.
+
+### Required parameters
+
+-   `src`
+-   `data-la-block`
+
+## Example
+
+```html
+<amp-ad
+  width="310"
+  height="340"
+  type="luckyads"
+  data-la-block="0b8b3a05-1061-4362-aefd-019fec9c2e0b"
+  src="https://gueobo.com/nhi7l1291/vli0pm3y0hq8768/vqu786pykrin.php"
+>
+</amp-ad>
+```
diff --git a/ads/vendors/macaw.js b/ads/vendors/macaw.js
new file mode 100644
index 0000000000000..4098357aceb0c
--- /dev/null
+++ b/ads/vendors/macaw.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function macaw(global, data) {
+  validateData(data, ['blockId']);
+
+  const url =
+    'https://code.macaw.is/data/' +
+    encodeURIComponent(data['blockId']) +
+    '.js?async=1&div=c';
+
+  loadScript(
+    global,
+    url,
+    () => {
+      global.context.renderStart();
+    },
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/vendors/macaw.md b/ads/vendors/macaw.md
new file mode 100644
index 0000000000000..a319f63745fd6
--- /dev/null
+++ b/ads/vendors/macaw.md
@@ -0,0 +1,31 @@
+<!---
+ Copyright 2020 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.
+ -->
+
+# Macaw
+
+## Example
+
+```html
+<amp-ad width="300" height="250" type="macaw" data-block-id="1023831"> </amp-ad>
+```
+
+## Configuration
+
+For more information, please [see FAQ](https://macaw.is/faq).
+
+Required parameters:
+
+-   data-block-id
diff --git a/ads/vendors/mads.js b/ads/vendors/mads.js
new file mode 100644
index 0000000000000..b3795979b4a2f
--- /dev/null
+++ b/ads/vendors/mads.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function mads(global, data) {
+  validateData(data, ['adrequest'], []);
+
+  writeScript(global, 'https://eu2.madsone.com/js/tags.js', function () {
+    window.MADSAdrequest.adrequest(JSON.parse(data.adrequest));
+  });
+}
diff --git a/ads/mads.md b/ads/vendors/mads.md
similarity index 94%
rename from ads/mads.md
rename to ads/vendors/mads.md
index a28d4815c06bb..2e1b222e38ffb 100644
--- a/ads/mads.md
+++ b/ads/vendors/mads.md
@@ -36,4 +36,4 @@ For semantics of configuration, please see [MADS documentation](http://wiki.mads
 
 Supported parameters:
 
-- `data-adrequest`: MADS ad request parameters
+-   `data-adrequest`: MADS ad request parameters
diff --git a/ads/mantis.js b/ads/vendors/mantis.js
similarity index 96%
rename from ads/mantis.js
rename to ads/vendors/mantis.js
index 5712ea12522b6..45978b9500008 100644
--- a/ads/mantis.js
+++ b/ads/vendors/mantis.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {loadScript, validateData} from '../3p/3p';
+import {loadScript, validateData} from '../../3p/3p';
 
 /**
  * @param {!Window} global
diff --git a/ads/mantis.md b/ads/vendors/mantis.md
similarity index 92%
rename from ads/mantis.md
rename to ads/vendors/mantis.md
index c709d2ee6d509..c9233e5ff2c02 100644
--- a/ads/mantis.md
+++ b/ads/vendors/mantis.md
@@ -35,8 +35,8 @@ Please visit the [MANTIS® Ad Network website](https://www.mantisadnetwork.com)
 
 Supported parameters:
 
-- `data-property`
-- `data-zone`
+-   `data-property`
+-   `data-zone`
 
 ### Content Recommendation
 
@@ -56,5 +56,5 @@ Depending on your page design, you may need to play with the `"heights="` parame
 
 Supported parameters:
 
-- `data-property`
-- `data-css` (Overrides the default CSS embedded by the script)
+-   `data-property`
+-   `data-css` (Overrides the default CSS embedded by the script)
diff --git a/ads/vendors/marfeel.js b/ads/vendors/marfeel.js
new file mode 100644
index 0000000000000..b33af862e62ae
--- /dev/null
+++ b/ads/vendors/marfeel.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function marfeel(global, data) {
+  validateData(data, ['tenant']);
+
+  const {tenant, version} = data;
+  const versionQS = version ? `?v=${version}` : '';
+
+  loadScript(global, `https://live.mrf.io/amp-ad/${tenant}/index${versionQS}`);
+}
diff --git a/ads/vendors/marfeel.md b/ads/vendors/marfeel.md
new file mode 100644
index 0000000000000..147fae7fbb615
--- /dev/null
+++ b/ads/vendors/marfeel.md
@@ -0,0 +1,46 @@
+<!---
+Copyright 2020 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.
+-->
+
+# Marfeel
+
+## Example
+
+```html
+<amp-ad width="300" height="250" type="marfeel" data-tenant="demo.marfeel.com">
+</amp-ad>
+```
+
+## Configuration
+
+For additional details and support, please contact [Marfeel](https://marfeel.com).
+
+### Required parameters
+
+-   `data-tenant`
+
+### Optional parameters
+
+-   `data-multisize`
+-   `data-version`
+
+## Consent Support
+
+When [user consent](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md#blocking-behaviors) is required, Marfeel ad approaches user consent in the following ways:
+
+-   `CONSENT_POLICY_STATE.SUFFICIENT`: Marfeel amp-ad will display a personalized ad to the user.
+-   `CONSENT_POLICY_STATE.INSUFFICIENT`: Marfeel amp-ad will display a non-personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Marfeel amp-ad will display a personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN`: Marfeel amp-ad will display a non-personalized ad to the user.
diff --git a/ads/vendors/mediaad.js b/ads/vendors/mediaad.js
new file mode 100644
index 0000000000000..dc19f44244f4f
--- /dev/null
+++ b/ads/vendors/mediaad.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function mediaad(global, data) {
+  // ensure we have vlid publisher, placement and mode
+  // and exactly one page-type
+  validateData(data, ['medtag', 'publisher']);
+
+  const d = document.getElementById('c');
+  const meddiv = document.createElement('div');
+  meddiv.setAttribute('id', data['medtag']);
+  d.appendChild(meddiv);
+
+  global._mediaad = global._mediaad || [];
+
+  // install observation on entering/leaving the view
+  global.context.observeIntersection(function (changes) {
+    /** @type {!Array} */ (changes).forEach(function (c) {
+      if (c.intersectionRect.height) {
+        global._mediaad.push({
+          medtag: data['medtag'],
+          publisher: data.publisher,
+        });
+      }
+    });
+  });
+
+  loadScript(
+    global,
+    `https://s1.mediaad.org/serve/${encodeURIComponent(
+      data.publisher
+    )}/loader.js`
+  );
+}
diff --git a/ads/mediaad.md b/ads/vendors/mediaad.md
similarity index 95%
rename from ads/mediaad.md
rename to ads/vendors/mediaad.md
index dcf319482099a..7d801cc0a85d8 100644
--- a/ads/mediaad.md
+++ b/ads/vendors/mediaad.md
@@ -37,5 +37,5 @@ For details on the configuration semantics, please contact the ad network or ref
 
 Supported parameters:
 
-- `data-publisher`
-- `data-medtag`
+-   `data-publisher`
+-   `data-medtag`
diff --git a/ads/vendors/medianet.js b/ads/vendors/medianet.js
new file mode 100644
index 0000000000000..ce3738f0a3b79
--- /dev/null
+++ b/ads/vendors/medianet.js
@@ -0,0 +1,231 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {computeInMasterFrame, validateData, writeScript} from '../../3p/3p';
+import {getSourceUrl, parseUrlDeprecated} from '../../src/url';
+import {hasOwn} from '../../src/core/types/object';
+
+const mandatoryParams = ['tagtype', 'cid'],
+  optionalParams = [
+    'timeout',
+    'crid',
+    'misc',
+    'slot',
+    'targeting',
+    'categoryExclusions',
+    'tagForChildDirectedTreatment',
+    'cookieOptions',
+    'overrideWidth',
+    'overrideHeight',
+    'loadingStrategy',
+    'consentNotificationId',
+    'useSameDomainRenderingUntilDeprecated',
+    'experimentId',
+    'multiSize',
+    'multiSizeValidation',
+  ];
+// useSameDomainRenderingUntilDeprecated is included to ensure publisher
+// amp-tags don't break before 29th March
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function medianet(global, data) {
+  validateData(data, mandatoryParams, optionalParams);
+
+  const publisherUrl =
+      global.context.canonicalUrl || getSourceUrl(global.context.location.href),
+    referrerUrl = global.context.referrer;
+
+  if (data.tagtype === 'headerbidder') {
+    //parameter tagtype is used to identify the product the publisher is using. Going ahead we plan to support more product types.
+    loadHBTag(global, data, publisherUrl, referrerUrl);
+  } else if (data.tagtype === 'cm' && data.crid) {
+    loadCMTag(global, data, publisherUrl, referrerUrl);
+  } else {
+    global.context.noContentAvailable();
+  }
+}
+
+/**
+ * @return {{renderStartCb: (function(*=)), reportRenderedEntityIdentifierCb: (function(*=)), noContentAvailableCb: (function())}}
+ */
+function getCallbacksObject() {
+  return {
+    renderStartCb: (opt_data) => {
+      global.context.renderStart(opt_data);
+    },
+    reportRenderedEntityIdentifierCb: (ampId) => {
+      global.context.reportRenderedEntityIdentifier(ampId);
+    },
+    noContentAvailableCb: () => {
+      global.context.noContentAvailable();
+    },
+  };
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ * @param {string} publisherUrl
+ * @param {?string} referrerUrl
+ */
+function loadCMTag(global, data, publisherUrl, referrerUrl) {
+  /**
+   * Sets macro type.
+   * @param {string} type
+   */
+  function setMacro(type) {
+    if (!type) {
+      return;
+    }
+    const name = 'medianet_' + type;
+    if (hasOwn(data, type)) {
+      global[name] = data[type];
+    }
+  }
+
+  /**
+   * Sets additional data.
+   */
+  function setAdditionalData() {
+    data.requrl = publisherUrl || '';
+    data.refurl = referrerUrl || '';
+    data.versionId = '211213';
+
+    setMacro('width');
+    setMacro('height');
+    setMacro('crid');
+    setMacro('requrl');
+    setMacro('refurl');
+    setMacro('versionId');
+    setMacro('misc');
+  }
+
+  /**
+   * Sets callback.
+   */
+  function setCallbacks() {
+    global._mNAmp = getCallbacksObject();
+  }
+
+  /**
+   * Loads the script.
+   */
+  function loadScript() {
+    let url = 'https://contextual.media.net/ampnmedianet.js?';
+    url += 'cid=' + encodeURIComponent(data.cid);
+    url += '&https=1';
+    url += '&requrl=' + encodeURIComponent(data.requrl);
+    url += '&refurl=' + encodeURIComponent(data.refurl);
+    writeScript(global, url);
+  }
+
+  /**
+   * Initializer.
+   */
+  function init() {
+    setAdditionalData();
+    setCallbacks();
+    loadScript();
+  }
+
+  init();
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ * @param {string} publisherUrl
+ * @param {?string} referrerUrl
+ */
+function loadHBTag(global, data, publisherUrl, referrerUrl) {
+  /**
+   * Loads MNETAd.
+   */
+  function loadMNETAd() {
+    if (loadMNETAd.alreadyCalled) {
+      return;
+    }
+    loadMNETAd.alreadyCalled = true;
+
+    global.advBidxc = global.context.master.advBidxc;
+    if (global.advBidxc && typeof global.advBidxc.renderAmpAd === 'function') {
+      global.addEventListener('message', (event) => {
+        global.advBidxc.renderAmpAd(event, global);
+      });
+    }
+
+    data.targeting = data.targeting || {};
+
+    if (
+      global.advBidxc &&
+      typeof global.advBidxc.setAmpTargeting === 'function'
+    ) {
+      global.advBidxc.setAmpTargeting(global, data);
+    }
+    global.advBidxc.loadAmpAd(global, data);
+  }
+
+  /**
+   * Handler for mnet.
+   */
+  function mnetHBHandle() {
+    global.advBidxc = global.context.master.advBidxc;
+    if (
+      global.advBidxc &&
+      typeof global.advBidxc.registerAmpSlot === 'function'
+    ) {
+      global.advBidxc.registerAmpSlot({
+        cb: loadMNETAd,
+        data,
+        winObj: global,
+      });
+    }
+  }
+
+  computeInMasterFrame(
+    global,
+    'medianet-hb-load',
+    (done) => {
+      /*eslint "google-camelcase/google-camelcase": 0*/
+      global.advBidxc_requrl = publisherUrl;
+      global.advBidxc_refurl = referrerUrl;
+      global.advBidxc = {
+        registerAmpSlot: () => {},
+        setAmpTargeting: () => {},
+        renderAmpAd: () => {},
+        loadAmpAd: () => {
+          global.context.noContentAvailable();
+        },
+      };
+      global.advBidxc.amp = getCallbacksObject();
+      const publisherDomain = parseUrlDeprecated(publisherUrl).hostname;
+      writeScript(
+        global,
+        'https://contextual.media.net/bidexchange.js?https=1&amp=1&cid=' +
+          encodeURIComponent(data.cid) +
+          '&dn=' +
+          encodeURIComponent(publisherDomain),
+        () => {
+          done(null);
+        }
+      );
+    },
+    mnetHBHandle
+  );
+}
diff --git a/ads/vendors/medianet.md b/ads/vendors/medianet.md
new file mode 100644
index 0000000000000..46ecd8738dc79
--- /dev/null
+++ b/ads/vendors/medianet.md
@@ -0,0 +1,102 @@
+<!---
+Copyright 2016 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.
+-->
+
+# Media.net
+
+Media.net adapter supports the integration of both, its Contextual Monetization solution and the Header Bidding solution.
+The example listed below states the configuration and the implementation related details.
+
+## Example
+
+### Media.net Contextual Monetization
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="medianet"
+  data-tagtype="cm"
+  data-cid="8CUS8O7EX"
+  data-crid="112682482"
+>
+</amp-ad>
+```
+
+### Media.net Header Bidder
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="medianet"
+  data-tagtype="headerbidder"
+  data-cid="8CU852274"
+  data-slot="/45361917/AMP_Header_Bidder"
+  json='{"targeting":{"mnetAmpTest":"1","pos":"mnetSlot1"}}'
+>
+</amp-ad>
+```
+
+## Configuration
+
+### Dimensions
+
+The ad size depends on the `width` and `height` attributes specified in the `amp-ad` tag. The `amp-ad` component requires the following mandatory HTML attributes to be added before parsing the Ad.
+
+-   `width`
+-   `height`
+-   `type = "medianet"`
+
+If you have questions, please feel free to reach out to your Media.net contact.
+
+## Supported Parameters
+
+### Media.net Contextual Monetization
+
+**Mandatory Parameters**
+
+-   `data-tagtype` - This parameter represents the product the publisher is using; It should be **`cm`** for our **Contextual Monetization solution**
+-   `data-cid` - Represents the unique customer identifier
+-   `data-crid` - Media.net Ad unit
+
+**Optional Parameters**
+
+-   `data-misc` - Accepts a json value & used to send additional data
+
+### Media.net Header Bidder
+
+**Mandatory Parameters**
+
+-   `data-tagtype` - This parameter represents the product the publisher is using; It should be **`headerbidder`** for our **Header Bidding solution**
+-   `data-cid` - Represents the unique customer identifier
+-   `data-slot` - Ad unit as specified in DFP
+-   `data-multi-size` - Multi-size support
+-   `data-multi-size-validation` - Multi-size support
+
+**Some of the parameters supported via Json attribute (DFP Parameters)**
+
+-   `targeting`
+-   `categoryExclusions`
+-   `cookieOptions`
+-   `tagForChildDirectedTreatment`
+-   `targeting`
+
+## Support
+
+For further queries, please feel free to reach out to your contact at Media.net.
+
+Otherwise you can write to our support team:
+Email: **pubsupport@media.net**
diff --git a/ads/vendors/mediavine.js b/ads/vendors/mediavine.js
new file mode 100644
index 0000000000000..c473eb98e0aaa
--- /dev/null
+++ b/ads/vendors/mediavine.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function mediavine(global, data) {
+  validateData(data, ['site']);
+  global.$mediavine = {
+    slug: data.site,
+  };
+  loadScript(global, 'https://amp.mediavine.com/wrapper.min.js');
+}
diff --git a/ads/vendors/mediavine.md b/ads/vendors/mediavine.md
new file mode 100644
index 0000000000000..9f70996ffe1d3
--- /dev/null
+++ b/ads/vendors/mediavine.md
@@ -0,0 +1,41 @@
+<!---
+Copyright 2016 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.
+-->
+
+# Mediavine
+
+## Example
+
+```html
+<amp-ad width="300" height="250" type="mediavine" data-site="amp-project">
+</amp-ad>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact [Mediavine](http://www.mediavine.com). Each site must be approved and signed up with [Mediavine](http://www.mediavine.com) prior to launch. The site name will be the same as name in the Mediavine script wrapper. The site name `amp-project` can be used for testing and will serve placeholder ads.
+
+### Required parameters
+
+-   `data-site` - The site's unique name this ad will be served on. This is the same name from your Mediavine script wrapper.
+
+## User Consent Integration
+
+When [user consent](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md#blocking-behaviors) is required. Mediavine approaches user consent in the following ways:
+
+-   `CONSENT_POLICY_STATE.SUFFICIENT`: Personalized Ads.
+-   `CONSENT_POLICY_STATE.INSUFFICIENT`: Non-Personalized Ads.
+-   `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Personalized Ads.
+-   `CONSENT_POLICY_STATE.UNKNOWN`: Non-Personalized Ads.
diff --git a/ads/vendors/medyanet.js b/ads/vendors/medyanet.js
new file mode 100644
index 0000000000000..62e405c23772b
--- /dev/null
+++ b/ads/vendors/medyanet.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {setStyles} from '../../src/style';
+import {validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function medyanet(global, data) {
+  validateData(data, ['slot', 'domain']);
+
+  global.adunit = data.slot;
+  global.size = '[' + data.width + ',' + data.height + ']';
+  global.domain = data.domain;
+
+  medyanetAds(global, data);
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function medyanetAds(global, data) {
+  const f = global.document.createElement('iframe');
+  f.setAttribute('id', 'adframe');
+  f.setAttribute('width', data.width);
+  f.setAttribute('height', data.height);
+  f.setAttribute('frameborder', '0');
+  f.setAttribute('marginheight', '0');
+  f.setAttribute('marginwidth', '0');
+  f.setAttribute('allowfullscreen', 'true');
+  f.setAttribute('scrolling', 'no');
+  setStyles(f, {
+    border: '0 none transparent',
+    position: 'relative',
+  });
+  f.onload = function () {
+    window.context.renderStart();
+  };
+  f.src = `https://app.medyanetads.com/amp/medyanetads.html?bidderData=${global.domain}&adunit=${global.adunit}&size=${global.size}`;
+  const url = window.top.location.search.substring(1);
+  if (url && url.indexOf('hb=true') !== -1) {
+    f.src = f.src + '&hb=true';
+  }
+  global.document.body.appendChild(f);
+}
diff --git a/ads/medyanet.md b/ads/vendors/medyanet.md
similarity index 96%
rename from ads/medyanet.md
rename to ads/vendors/medyanet.md
index b6c27a0d0883e..faf23f7fe795d 100644
--- a/ads/medyanet.md
+++ b/ads/vendors/medyanet.md
@@ -35,5 +35,5 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-slot`
-- `data-domain`
+-   `data-slot`
+-   `data-domain`
diff --git a/ads/vendors/meg.js b/ads/vendors/meg.js
new file mode 100644
index 0000000000000..6f2ba6e94fb6f
--- /dev/null
+++ b/ads/vendors/meg.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright 2016 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.
+ */
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function meg(global, data) {
+  validateData(data, ['code']);
+  const {code} = data;
+  const lang = global.encodeURIComponent(global.navigator.language);
+  const ref = global.encodeURIComponent(global.context.referrer);
+  const params = ['lang=' + lang, 'ref=' + ref].join('&');
+  const url = 'https://apps.meg.com/embedjs/' + code + '?' + params;
+  global._megAdsLoaderCallbacks = {
+    onSuccess: () => {
+      global.context.renderStart();
+    },
+    onError: () => {
+      global.context.noContentAvailable();
+    },
+  };
+  loadScript(
+    global,
+    url,
+    () => {
+      // Meg has been loaded
+    },
+    () => {
+      // Cannot load meg embed.js
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/meg.md b/ads/vendors/meg.md
similarity index 94%
rename from ads/meg.md
rename to ads/vendors/meg.md
index cc0b4574ec37a..c7f1df2e27acd 100644
--- a/ads/meg.md
+++ b/ads/vendors/meg.md
@@ -30,4 +30,4 @@ For details on the configuration semantics, please contact support@meg.com
 
 Supported parameters:
 
-- `data-code`: unique ad code given by Meg.com
+-   `data-code`: unique ad code given by Meg.com
diff --git a/ads/vendors/mgid.js b/ads/vendors/mgid.js
new file mode 100644
index 0000000000000..309df9c9ca208
--- /dev/null
+++ b/ads/vendors/mgid.js
@@ -0,0 +1,62 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function mgid(global, data) {
+  validateData(data, ['publisher', 'widget', 'container'], ['url', 'options']);
+
+  const scriptRoot = document.createElement('div');
+  scriptRoot.id = data.container;
+
+  document.body.appendChild(scriptRoot);
+
+  /**
+   * Returns path for provided js filename
+   * @param {string} publisher js filename
+   * @return {string} Path to provided filename.
+   */
+  function getResourceFilePath(publisher) {
+    const publisherStr = publisher.replace(/[^A-z0-9]/g, '');
+    return `${publisherStr[0]}/${publisherStr[1]}`;
+  }
+
+  const url =
+    `https://jsc.mgid.com/${getResourceFilePath(data.publisher)}/` +
+    `${encodeURIComponent(data.publisher)}.` +
+    `${encodeURIComponent(data.widget)}.js?t=` +
+    Math.floor(Date.now() / 36e5);
+
+  global.uniqId = (
+    '00000' + Math.round(Math.random() * 100000).toString(16)
+  ).slice(-5);
+  window['ampOptions' + data.widget + '_' + global.uniqId] = data.options;
+
+  global.context.observeIntersection(function (changes) {
+    /** @type {!Array} */ (changes).forEach(function (c) {
+      window['intersectionRect' + data.widget + '_' + global.uniqId] =
+        c.intersectionRect;
+      window['boundingClientRect' + data.widget + '_' + global.uniqId] =
+        c.boundingClientRect;
+    });
+  });
+
+  loadScript(global, data.url || url);
+}
diff --git a/ads/mgid.md b/ads/vendors/mgid.md
similarity index 91%
rename from ads/mgid.md
rename to ads/vendors/mgid.md
index 30175d7441d42..0ccd524a8e957 100644
--- a/ads/mgid.md
+++ b/ads/vendors/mgid.md
@@ -38,10 +38,11 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-publisher`
-- `data-widget`
-- `data-container`
+-   `data-publisher`
+-   `data-widget`
+-   `data-container`
 
 ### Optional parameters
 
-- `data-url`
+-   `data-url`
+-   `data-options`
diff --git a/ads/vendors/microad.js b/ads/vendors/microad.js
new file mode 100644
index 0000000000000..46cea764b8dbd
--- /dev/null
+++ b/ads/vendors/microad.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/* global MicroAd: false */
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function microad(global, data) {
+  // TODO: check mandatory fields
+  validateData(data, [], ['spot', 'url', 'referrer', 'ifa', 'appid', 'geo']);
+
+  global.document.getElementById('c').setAttribute('id', data.spot);
+  loadScript(global, 'https://j.microad.net/js/camp.js', () => {
+    MicroAd.Compass.showAd(data);
+  });
+}
diff --git a/ads/microad.md b/ads/vendors/microad.md
similarity index 89%
rename from ads/microad.md
rename to ads/vendors/microad.md
index 41b4ae9ad6394..567d5353fd98a 100644
--- a/ads/microad.md
+++ b/ads/vendors/microad.md
@@ -39,11 +39,11 @@ For configuration details and to generate your tags, contact compass-support@mic
 
 Supported parameters:
 
-- `width`
-- `height`
-- `data-spot`
-- `data-url`
-- `data-referrer`
-- `data-ifa`
-- `data-appid`
-- `data-geo`
+-   `width`
+-   `height`
+-   `data-spot`
+-   `data-url`
+-   `data-referrer`
+-   `data-ifa`
+-   `data-appid`
+-   `data-geo`
diff --git a/ads/vendors/miximedia.js b/ads/vendors/miximedia.js
new file mode 100644
index 0000000000000..d33e5cf124eed
--- /dev/null
+++ b/ads/vendors/miximedia.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function miximedia(global, data) {
+  validateData(data, ['blockid']);
+  global._miximedia = global._miximedia || {
+    viewId: global.context.pageViewId,
+    blockId: data['blockid'],
+    htmlURL: data['canonical'] || global.context.canonicalUrl,
+    ampURL: data['ampurl'] || global.context.sourceUrl,
+    testMode: data['testmode'] || 'false',
+    referrer: data['referrer'] || global.context.referrer,
+    hostname: global.window.context.location.hostname,
+    clientId: window.context.clientId,
+    domFingerprint: window.context.domFingerprint,
+    location: window.context.location,
+    startTime: window.context.startTime,
+  };
+  global._miximedia.AMPCallbacks = {
+    renderStart: global.context.renderStart,
+    noContentAvailable: global.context.noContentAvailable,
+  };
+  // load the miximedia  AMP JS file script asynchronously
+  const rand = Math.round(Math.random() * 100000000);
+  loadScript(
+    global,
+    'https://amp.mixi.media/ampclient/mixi.js?rand=' + rand,
+    () => {},
+    global.context.noContentAvailable
+  );
+}
diff --git a/ads/miximedia.md b/ads/vendors/miximedia.md
similarity index 95%
rename from ads/miximedia.md
rename to ads/vendors/miximedia.md
index 6b5127afc2b34..7af779eb74565 100644
--- a/ads/miximedia.md
+++ b/ads/vendors/miximedia.md
@@ -30,4 +30,4 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-blockid` - insert your block_id
+-   `data-blockid` - insert your block_id
diff --git a/ads/vendors/mixpo.js b/ads/vendors/mixpo.js
new file mode 100644
index 0000000000000..24223459a20e1
--- /dev/null
+++ b/ads/vendors/mixpo.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function mixpo(global, data) {
+  validateData(data, ['guid', 'subdomain']);
+
+  const g = global,
+    cdnSubdomain = data.subdomain == 'www' ? 'cdn' : data.subdomain + '-cdn',
+    url = data.loader || `https://${cdnSubdomain}.mixpo.com/js/loader.js`;
+
+  g.mixpoAd = {
+    amp: true,
+    noflash: true,
+    width: data.width,
+    height: data.height,
+    guid: data.guid,
+    subdomain: data.subdomain,
+    embedv: data.embedv,
+    clicktag: data.clicktag,
+    customTarget: data.customtarget,
+    dynClickthrough: data.dynclickthrough,
+    viewTracking: data.viewtracking,
+    customCSS: data.customcss,
+    local: data.local,
+    enableMRAID: data.enablemraid,
+    jsPlayer: data.jsplayer,
+  };
+
+  writeScript(g, url);
+}
diff --git a/ads/mixpo.md b/ads/vendors/mixpo.md
similarity index 79%
rename from ads/mixpo.md
rename to ads/vendors/mixpo.md
index 283a4901a6dbc..3533f0af0e4fc 100644
--- a/ads/mixpo.md
+++ b/ads/vendors/mixpo.md
@@ -35,18 +35,18 @@ For configuration and implementation details, please contact Mixpo support: `sup
 
 Required Attributes:
 
-- `data-guid`
-- `data-subdomain`
+-   `data-guid`
+-   `data-subdomain`
 
 Additional Supported Attributes:
 
-- `data-embedv`
-- `data-clicktag`
-- `data-customtarget`
-- `data-dynclickthrough`
-- `data-viewtracking`
-- `data-customcss`
-- `data-local`
-- `data-enablemraid`
-- `data-jsplayer`
-- `data-loader`
+-   `data-embedv`
+-   `data-clicktag`
+-   `data-customtarget`
+-   `data-dynclickthrough`
+-   `data-viewtracking`
+-   `data-customcss`
+-   `data-local`
+-   `data-enablemraid`
+-   `data-jsplayer`
+-   `data-loader`
diff --git a/ads/vendors/monetizer101.js b/ads/vendors/monetizer101.js
new file mode 100644
index 0000000000000..feacedf3cb602
--- /dev/null
+++ b/ads/vendors/monetizer101.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function monetizer101(global, data) {
+  validateData(data, ['widget', 'config']);
+  global.widget = data.widget;
+  global.config = data.config;
+  writeScript(global, 'https://link.monetizer101.com/widget/amp/amp.js');
+}
diff --git a/ads/monetizer101.md b/ads/vendors/monetizer101.md
similarity index 96%
rename from ads/monetizer101.md
rename to ads/vendors/monetizer101.md
index 3ccfa16de0072..c7415ab70c845 100644
--- a/ads/monetizer101.md
+++ b/ads/vendors/monetizer101.md
@@ -46,5 +46,5 @@ For more information, please [contact Monetizer101](http://monetizer101.com/appl
 
 Required parameters:
 
-- `data-widget`
-- `data-config`
+-   `data-widget`
+-   `data-config`
diff --git a/ads/vendors/mox.js b/ads/vendors/mox.js
new file mode 100644
index 0000000000000..04a768e2bb925
--- /dev/null
+++ b/ads/vendors/mox.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} config
+ */
+export function mox(global, config) {
+  validateData(config, ['z', 'w', 'h'], ['u']);
+
+  global.config = config;
+
+  loadScript(global, config.u || 'https://ad.mox.tv/js/amp.min.js');
+}
diff --git a/ads/mox.md b/ads/vendors/mox.md
similarity index 86%
rename from ads/mox.md
rename to ads/vendors/mox.md
index 371b88855fc7d..58130d4000486 100644
--- a/ads/mox.md
+++ b/ads/vendors/mox.md
@@ -28,10 +28,10 @@ Please visit our [website](https://mox.tv) for more information about us.
 
 #### Required parameters:
 
-- `data-z` — Ad zone unique id
-- `data-w` — Ad unit width
-- `data-h` — Ad unit height
+-   `data-z` — Ad zone unique id
+-   `data-w` — Ad unit width
+-   `data-h` — Ad unit height
 
 #### Optional parameters:
 
-- `data-u` — URL of invocation script
+-   `data-u` — URL of invocation script
diff --git a/ads/vendors/my6sense.js b/ads/vendors/my6sense.js
new file mode 100644
index 0000000000000..361a562528eb3
--- /dev/null
+++ b/ads/vendors/my6sense.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function my6sense(global, data) {
+  validateData(data, ['widgetKey']);
+
+  const widgetTag = global.document.createElement('script');
+  widgetTag.src = `//web-clients.mynativeplatform.com/web-clients/bootloaders/${data['widgetKey']}/bootloader.js`;
+  const url =
+    data['url'] && data['url'] !== '[PAGE_URL]'
+      ? data['url']
+      : global.context.sourceUrl;
+  widgetTag.setAttribute('async', 'true');
+  widgetTag.setAttribute('data-version', '3');
+  widgetTag.setAttribute('data-url', url);
+  widgetTag.setAttribute('data-zone', data['zone'] || '[ZONE]');
+  widgetTag.setAttribute('data-google-amp', 'true');
+  widgetTag.setAttribute(
+    'data-organic-clicks',
+    data['organicClicks'] || '[ORGANIC_TRACKING_PIXEL]'
+  );
+  widgetTag.setAttribute(
+    'data-paid-clicks',
+    data['paidClicks'] || '[PAID_TRACKING_PIXEL]'
+  );
+  widgetTag.setAttribute('data-display-within-iframe', 'true');
+  global.document.body.appendChild(widgetTag);
+}
diff --git a/ads/my6sense.md b/ads/vendors/my6sense.md
similarity index 87%
rename from ads/my6sense.md
rename to ads/vendors/my6sense.md
index 6fefeb498ef0e..9e1b71e10e672 100644
--- a/ads/my6sense.md
+++ b/ads/vendors/my6sense.md
@@ -38,11 +38,11 @@ For semantics of configuration and examples, sign-in and see the [My6sense platf
 
 ## Required parameters:
 
-- `data-widget-key` : string, non-empty
+-   `data-widget-key` : string, non-empty
 
 ## Optional parameters:
 
-- `data-zone` : string, non-empty
-- `data-url` : string, non-empty
-- `data-organic-clicks` : string, non-empty
-- `data-paid-clicks` : string, non-empty
+-   `data-zone` : string, non-empty
+-   `data-url` : string, non-empty
+-   `data-organic-clicks` : string, non-empty
+-   `data-paid-clicks` : string, non-empty
diff --git a/ads/vendors/myfinance.js b/ads/vendors/myfinance.js
new file mode 100644
index 0000000000000..0a8d4ac6bfa5f
--- /dev/null
+++ b/ads/vendors/myfinance.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+const mandatoryFields = ['adType'];
+
+const adUrl = 'https://www.myfinance.com/amp/ad';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function myfinance(global, data) {
+  validateData(data, mandatoryFields);
+  if (!data['mf_referrer']) {
+    data['mf_referrer'] =
+      global.context.canonicalUrl || global.context.sourceUrl;
+  }
+  if (!data['ampClientId']) {
+    data['ampClientId'] = global.context.clientId;
+  }
+  const url = buildUrl(data);
+  global.MF_AMP_DATA = data;
+  writeScript(global, url);
+}
+
+/**
+ * Generates the url to call for the script content
+ * @param {!Object} data
+ * @return {string}
+ */
+function buildUrl(data) {
+  const url = new URL(adUrl);
+  Object.entries(data).forEach((entry) =>
+    url.searchParams.set(entry[0], entry[1])
+  );
+  return url.toString();
+}
diff --git a/ads/vendors/myfinance.md b/ads/vendors/myfinance.md
new file mode 100644
index 0000000000000..ec6c4af1df942
--- /dev/null
+++ b/ads/vendors/myfinance.md
@@ -0,0 +1,96 @@
+<!---
+Copyright 2021 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.
+-->
+
+# MyFinance
+
+Serves ads from [MyFinance](https://www.myfinance.com/).
+
+## Example
+
+### Widgets
+
+#### Dynamic based on page content
+
+```html
+<amp-ad
+  type="myfinance"
+  data-selector="myfi-content-end"
+  data-ad-type="widget"
+>
+</amp-ad>
+```
+
+#### Static from a Creative Set
+
+```html
+<amp-ad
+  type="myfinance"
+  data-creative-set="27cdb25b-5df4-4aca-8ef2-f63fd874e1f1"
+  data-ad-type="widget"
+>
+</amp-ad>
+```
+
+#### Static Widget
+
+```html
+<amp-ad
+  type="myfinance"
+  data-widget="0aec0151-4fa2-47cc-abfc-13d4f9861b7a"
+  data-ad-type="widget"
+>
+</amp-ad>
+```
+
+### CRU
+
+```html
+<amp-ad
+  type="myfinance"
+  data-campaign="test-campaign"
+  data-ad-type="cru"
+>
+</amp-ad>
+```
+
+## Configuration
+
+### Widgets
+
+#### Required parameters
+
+-   `data-ad-type` - set to `widget`
+
+#### Widgets require one of the following parameters to be set
+
+-   `data-selector` - corresponds to the div id on the canonical page that has dynamic ads configured
+-   `data-creative-set` - the id of the creative set to pull ads from
+-   `data-widget` - the id of the widget to serve
+
+#### Optional parameters
+
+-   `data-sub-id` - pass through for a partner sub id
+
+### Content Recommendation Unit
+
+#### Required parameters
+
+-   `data-ad-type` - set to `cru`
+-   `data-campaign` - set to a valid campaign
+
+#### Optional parameters
+
+-   `data-selector` - corresponds to the div id on the canonical page that has a pre-rendered cru configured
diff --git a/ads/vendors/myoffrz.js b/ads/vendors/myoffrz.js
new file mode 100644
index 0000000000000..b5ce9caddeb61
--- /dev/null
+++ b/ads/vendors/myoffrz.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function myoffrz(global, data) {
+  validateData(data, ['config'], ['script']);
+  global.config = data.config;
+  global.sourceUrl = global.context.sourceUrl;
+
+  // create an expected placeholder
+  const d = global.document.createElement('div');
+  d.setAttribute('id', 'myoffrz');
+  global.document.getElementById('c').appendChild(d);
+
+  writeScript(global, data.script || 'https://cdn.myoffrz.io/amp/script.js');
+}
diff --git a/ads/vendors/myoffrz.md b/ads/vendors/myoffrz.md
new file mode 100644
index 0000000000000..a2969fa16d2f0
--- /dev/null
+++ b/ads/vendors/myoffrz.md
@@ -0,0 +1,40 @@
+<!---
+Copyright 2020 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.
+-->
+
+# myoffrz
+
+## Example
+
+```html
+<amp-ad
+  width="320"
+  height="50"
+  type="myoffrz"
+  data-config='{"channel": "sample", "count": 1}'
+  layout="responsive"
+>
+</amp-ad>
+```
+
+## Configuration
+
+Supported parameters:
+
+-   `data-config`
+
+Optional parameters:
+
+-   `data-script`
diff --git a/ads/vendors/mytarget.js b/ads/vendors/mytarget.js
new file mode 100644
index 0000000000000..6999cab0da2e9
--- /dev/null
+++ b/ads/vendors/mytarget.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+import {setStyles} from '../../src/style';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function mytarget(global, data) {
+  validateData(data, ['adSlot'], ['adQuery']);
+
+  // Create ad tag placeholder
+  const container = global.document.createElement('ins');
+
+  container.setAttribute('class', 'mrg-tag');
+  container.setAttribute('data-ad-slot', data['adSlot']);
+  if (data['adQuery']) {
+    container.setAttribute('data-ad-query', data['adQuery']);
+  }
+  setStyles(container, {
+    display: 'inline-block',
+    width: '100%',
+    height: '100%',
+  });
+  global.document.getElementById('c').appendChild(container);
+
+  // Add tag and callbacks to queue
+  (global.MRGtag = global.MRGtag || []).push({
+    onNoAds: () => global.context.noContentAvailable(),
+    onAdsSuccess: () => global.context.renderStart(),
+  });
+
+  // Load main js asynchronously
+  loadScript(global, 'https://ad.mail.ru/static/ads-async.js');
+}
diff --git a/ads/mytarget.md b/ads/vendors/mytarget.md
similarity index 96%
rename from ads/mytarget.md
rename to ads/vendors/mytarget.md
index 5e3056e4ea48d..671585b66023f 100644
--- a/ads/mytarget.md
+++ b/ads/vendors/mytarget.md
@@ -31,8 +31,8 @@ Please visit our [website](https://target.my.com) for more information about us.
 
 Required parameters:
 
-- data-ad-slot
+-   data-ad-slot
 
 Optional parameters:
 
-- data-ad-query
+-   data-ad-query
diff --git a/ads/vendors/mywidget.js b/ads/vendors/mywidget.js
new file mode 100644
index 0000000000000..7ae66d3373bc7
--- /dev/null
+++ b/ads/vendors/mywidget.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function mywidget(global, data) {
+  validateData(data, ['cid']);
+  global.myWidgetInit = data;
+
+  // load the myWidget initializer asynchronously
+  loadScript(global, 'https://likemore-go.imgsmail.ru/widget_amp.js');
+}
diff --git a/ads/mywidget.md b/ads/vendors/mywidget.md
similarity index 98%
rename from ads/mywidget.md
rename to ads/vendors/mywidget.md
index d1299233d6470..f843a40aca830 100644
--- a/ads/mywidget.md
+++ b/ads/vendors/mywidget.md
@@ -37,4 +37,4 @@ For semantics of configuration, please see [myWidget documentation](https://widg
 
 ### Required parameters
 
-- `data-cid`
+-   `data-cid`
diff --git a/ads/vendors/nativeroll.js b/ads/vendors/nativeroll.js
new file mode 100644
index 0000000000000..507550fee76af
--- /dev/null
+++ b/ads/vendors/nativeroll.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function nativeroll(global, data) {
+  validateData(data, ['gid']);
+  loadScript(
+    global,
+    'https://cdn01.nativeroll.tv/js/seedr-player.min.js',
+    () => {
+      initPlayer(global, data);
+    }
+  );
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function initPlayer(global, data) {
+  const config = {
+    container: '#c',
+    desiredOffset: 50,
+    gid: data.gid,
+    onError: () => {
+      global.context.noContentAvailable();
+    },
+    onLoad: () => {
+      const height =
+        global.document.getElementsByClassName('nr-player')[0]
+          ./* OK */ offsetHeight;
+      global.context.requestResize(undefined, height);
+    },
+    onDestroy: () => {
+      global.context.noContentAvailable();
+    },
+  };
+  // eslint-disable-next-line no-undef
+  SeedrPlayer(config);
+}
diff --git a/ads/nativeroll.md b/ads/vendors/nativeroll.md
similarity index 100%
rename from ads/nativeroll.md
rename to ads/vendors/nativeroll.md
diff --git a/ads/vendors/nativery.js b/ads/vendors/nativery.js
new file mode 100644
index 0000000000000..b3c9df4b5783c
--- /dev/null
+++ b/ads/vendors/nativery.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {toArray} from '../../src/core/types/array';
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function nativery(global, data) {
+  validateData(data, ['wid']);
+  const params = {...data};
+
+  // push the two object into the '_nativery' global
+  global._nativery = global._nativery || {
+    wid: data.wid,
+    referrer: data.referrer || global.context.referrer,
+    url: data.url || global.context.canonicalUrl,
+    viewId: global.context.pageViewId,
+    visible: 0,
+    params,
+  };
+
+  // must add listener for resize
+  global.addEventListener('amp-widgetCreated', function (e) {
+    if (e && e.detail) {
+      global.context.requestResize(undefined, e.detail.height);
+    }
+  });
+
+  // install observation to check if is in viewport
+  const unlisten = global.context.observeIntersection(function (changes) {
+    toArray(changes).forEach(function (c) {
+      global._nativery.visible = Math.floor(
+        (c.intersectionRect.height / c.boundingClientRect.height) * 100
+      );
+      if (global._nativery.visible) {
+        unlisten();
+      }
+    });
+  });
+
+  // load the nativery loader asynchronously
+  writeScript(global, `https://cdn.nativery.com/widget/js/natamp.js`);
+}
diff --git a/ads/nativery.md b/ads/vendors/nativery.md
similarity index 100%
rename from ads/nativery.md
rename to ads/vendors/nativery.md
diff --git a/ads/vendors/nativo.js b/ads/vendors/nativo.js
new file mode 100644
index 0000000000000..0caf78ffc9012
--- /dev/null
+++ b/ads/vendors/nativo.js
@@ -0,0 +1,164 @@
+/**
+ * Copyright 2016 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.
+ */
+import {loadScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function nativo(global, data) {
+  let ntvAd;
+  (function (ntvAd, global, data) {
+    global.history.replaceState(
+      null,
+      '',
+      location.pathname + location.hash.replace(/({).*(})/, '')
+    );
+    // Private
+    let delayedAdLoad = false;
+    let percentageOfadViewed;
+    const loc = global.context.location;
+    /**
+     * @param {number} delay
+     * @return {boolean}
+     */
+    function isValidDelayTime(delay) {
+      return (
+        typeof delay != 'undefined' && !isNaN(delay) && parseInt(delay, 10) >= 0
+      );
+    }
+    /**
+     * @param {!Object} data
+     * @return {boolean}
+     */
+    function isDelayedTimeStart(data) {
+      return (
+        isValidDelayTime(data.delayByTime) &&
+        'delay' in data &&
+        !('delayByView' in data)
+      );
+    }
+    /**
+     * @param {!Object} data
+     * @return {boolean}
+     */
+    function isDelayedViewStart(data) {
+      return isValidDelayTime(data.delayByTime) && 'delayByView' in data;
+    }
+    /**
+     * Loads ad when done.
+     */
+    function loadAdWhenViewed() {
+      const g = global;
+      global.context.observeIntersection(function (positions) {
+        const coordinates = getLastPositionCoordinates(positions);
+        if (
+          typeof coordinates.rootBounds != 'undefined' &&
+          coordinates.intersectionRect.top ==
+            coordinates.rootBounds.top + coordinates.boundingClientRect.y
+        ) {
+          if (isDelayedViewStart(data) && !delayedAdLoad) {
+            g.PostRelease.Start();
+            delayedAdLoad = true;
+          }
+        }
+      });
+    }
+    /**
+     * Loads ad when timeouts.
+     */
+    function loadAdWhenTimedout() {
+      const g = global;
+      setTimeout(function () {
+        g.PostRelease.Start();
+        delayedAdLoad = true;
+      }, parseInt(data.delayByTime, 10));
+    }
+    /**
+     * @param {*} positions
+     * @return {*} TODO(#23582): Specify return type
+     */
+    function getLastPositionCoordinates(positions) {
+      return positions[positions.length - 1];
+    }
+    /**
+     * @param {number} percentage
+     */
+    function setPercentageOfadViewed(percentage) {
+      percentageOfadViewed = percentage;
+    }
+    /**
+     * Used to track ad during scrolling event and trigger checkIsAdVisible
+     * method on PostRelease instance
+     * @param {*} positions
+     */
+    function viewabilityConfiguration(positions) {
+      const coordinates = getLastPositionCoordinates(positions);
+      setPercentageOfadViewed(
+        (coordinates.intersectionRect.height * 100) /
+          coordinates.boundingClientRect.height /
+          100
+      );
+      global.PostRelease.checkIsAdVisible();
+    }
+    // Public
+    ntvAd.getPercentageOfadViewed = function () {
+      return percentageOfadViewed;
+    };
+    ntvAd.getScriptURL = function () {
+      return 'https://s.ntv.io/serve/load.js';
+    };
+    // Configuration setup is based on the parameters/attributes associated with
+    // the amp-ad node
+    ntvAd.setupAd = function () {
+      global._prx = [['cfg.Amp']];
+      global._prx.push(['cfg.RequestUrl', data['requestUrl'] || loc.href]);
+      for (const key in data) {
+        switch (key) {
+          case 'premium':
+            global._prx.push(['cfg.SetUserPremium']);
+            break;
+          case 'debug':
+            global._prx.push(['cfg.Debug']);
+            break;
+          case 'delay':
+            if (isValidDelayTime(data.delayByTime)) {
+              global._prx.push(['cfg.SetNoAutoStart']);
+            }
+            break;
+        }
+      }
+    };
+    // Used to Delay Start and Initalize Tracking. This is a callback AMP will
+    // use once script is loaded
+    ntvAd.Start = function () {
+      if (isDelayedTimeStart(data)) {
+        loadAdWhenTimedout();
+      } else if (isDelayedViewStart(data)) {
+        loadAdWhenViewed();
+      }
+      global.PostRelease.checkAmpViewability = function () {
+        return ntvAd.getPercentageOfadViewed();
+      };
+      // ADD TRACKING HANDLER TO OBSERVER
+      global.context.observeIntersection(viewabilityConfiguration);
+    };
+  })(ntvAd || (ntvAd = {}), global, data);
+  // Setup Configurations
+  ntvAd.setupAd();
+  // Load Nativo Script
+  loadScript(global, ntvAd.getScriptURL(), ntvAd.Start);
+}
diff --git a/ads/nativo.md b/ads/vendors/nativo.md
similarity index 96%
rename from ads/nativo.md
rename to ads/vendors/nativo.md
index d5965308d6bcb..489a5c6f945d6 100644
--- a/ads/nativo.md
+++ b/ads/vendors/nativo.md
@@ -35,4 +35,4 @@ Before starting any Nativo AMP setup, please reach out to your account manager f
 
 ### Optional parameters
 
-- `data-premium`: Switches to premium.
+-   `data-premium`: Switches to premium.
diff --git a/ads/vendors/navegg.js b/ads/vendors/navegg.js
new file mode 100644
index 0000000000000..898e61b26c86c
--- /dev/null
+++ b/ads/vendors/navegg.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {doubleclick} from '../../ads/google/doubleclick';
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function navegg(global, data) {
+  validateData(data, ['acc']);
+  const {acc} = data;
+  let seg,
+    nvg = function () {};
+  delete data.acc;
+  nvg.prototype.getProfile = function () {};
+  data.targeting = data.targeting || {};
+  loadScript(global, 'https://tag.navdmp.com/amp.1.0.0.min.js', () => {
+    nvg = global[`nvg${acc}`] = new global['AMPNavegg']({
+      acc,
+    });
+    nvg.getProfile((nvgTargeting) => {
+      for (seg in nvgTargeting) {
+        data.targeting[seg] = nvgTargeting[seg];
+      }
+      doubleclick(global, data);
+    });
+  });
+}
diff --git a/ads/navegg.md b/ads/vendors/navegg.md
similarity index 95%
rename from ads/navegg.md
rename to ads/vendors/navegg.md
index 09a17d534593f..403c62ef8dd10 100644
--- a/ads/navegg.md
+++ b/ads/vendors/navegg.md
@@ -32,6 +32,6 @@ To get Navegg integration working you only need to specify the `rtc-config` para
 
 ### Configuration
 
-The Navegg adapter only supports DoubleClick for now. For the most up-to-date list of DoubleClick supported parameters and usage, refer to the [DoubleClick reference guide](https://github.com/ampproject/amphtml/blob/master/ads/google/doubleclick.md).
+The Navegg adapter only supports DoubleClick for now. For the most up-to-date list of DoubleClick supported parameters and usage, refer to the [DoubleClick reference guide](https://github.com/ampproject/amphtml/blob/main/ads/google/doubleclick.md).
 
 For any help, please contact [Navegg](https://www.navegg.com/en/institutional/#contact).
diff --git a/ads/vendors/nend.js b/ads/vendors/nend.js
new file mode 100644
index 0000000000000..96924e80d6a9c
--- /dev/null
+++ b/ads/vendors/nend.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+const nendFields = ['nend_params'];
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function nend(global, data) {
+  validateData(data, nendFields, []);
+
+  global.nendParam = data;
+  writeScript(global, 'https://js1.nend.net/js/amp.js');
+}
diff --git a/ads/nend.md b/ads/vendors/nend.md
similarity index 97%
rename from ads/nend.md
rename to ads/vendors/nend.md
index 00cdbcae01eca..1655d02cdda1f 100644
--- a/ads/nend.md
+++ b/ads/vendors/nend.md
@@ -34,4 +34,4 @@ For configuration details and to generate your tags, please contact https://www.
 
 Supported parameters:
 
-- `data-nend_params`
+-   `data-nend_params`
diff --git a/ads/vendors/netletix.js b/ads/vendors/netletix.js
new file mode 100644
index 0000000000000..be16593ea2477
--- /dev/null
+++ b/ads/vendors/netletix.js
@@ -0,0 +1,104 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {addParamsToUrl, assertHttpsUrl} from '../../src/url';
+import {dev} from '../../src/log.js';
+import {dict} from '../../src/core/types/object';
+import {loadScript, validateData, writeScript} from '../../3p/3p';
+
+const NX_URL_HOST = 'https://call.adadapter.netzathleten-media.de';
+const NX_URL_PATHPREFIX = '/pb/';
+const NX_URL_FULL = NX_URL_HOST + NX_URL_PATHPREFIX;
+const DEFAULT_NX_KEY = 'default';
+const DEFAULT_NX_UNIT = 'default';
+const DEFAULT_NX_WIDTH = 'fluid';
+const DEFAULT_NX_HEIGHT = 'fluid';
+const DEFAULT_NX_V = '0002';
+const DEFAULT_NX_SITE = 'none';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function netletix(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+  global._netletix_amp = {
+    allowed_data: ['nxasync', 'nxv', 'nxsite', 'nxid', 'nxscript'],
+    mandatory_data: ['nxkey', 'nxunit', 'nxwidth', 'nxheight'],
+    data,
+  };
+
+  validateData(
+    data,
+    global._netletix_amp.mandatory_data,
+    global._netletix_amp.allowed_data
+  );
+
+  const nxh = data.nxheight || DEFAULT_NX_HEIGHT;
+  const nxw = data.nxwidth || DEFAULT_NX_WIDTH;
+  const url = assertHttpsUrl(
+    addParamsToUrl(
+      NX_URL_FULL + encodeURIComponent(data.nxkey || DEFAULT_NX_KEY),
+      dict({
+        'unit': data.nxunit || DEFAULT_NX_UNIT,
+        'width': data.nxwidth || DEFAULT_NX_WIDTH,
+        'height': data.nxheight || DEFAULT_NX_HEIGHT,
+        'v': data.nxv || DEFAULT_NX_V,
+        'site': data.nxsite || DEFAULT_NX_SITE,
+        'ord': Math.round(Math.random() * 100000000),
+      })
+    ),
+    data.ampSlotIndex
+  );
+
+  window.addEventListener('message', (event) => {
+    if (
+      event.data.type &&
+      dev().assertString(event.data.type).startsWith('nx-')
+    ) {
+      switch (event.data.type) {
+        case 'nx-resize':
+          const renderconfig = {
+            'width': event.data.width,
+            'height': event.data.height,
+          };
+          global.context.renderStart(renderconfig);
+          if (
+            event.data.width &&
+            event.data.height &&
+            (event.data.width != nxw || event.data.height != nxh)
+          ) {
+            global.context.requestResize(event.data.width, event.data.height);
+          }
+          break;
+        case 'nx-empty':
+          global.context.noContentAvailable();
+          break;
+        case 'nx-identifier':
+          global.context.reportRenderedEntityIdentifier(event.data.identifier);
+          break;
+        default:
+          break;
+      }
+    }
+  });
+
+  if (data.async && data.async.toLowerCase() === 'true') {
+    loadScript(global, url);
+  } else {
+    writeScript(global, url);
+  }
+}
diff --git a/ads/netletix.md b/ads/vendors/netletix.md
similarity index 75%
rename from ads/netletix.md
rename to ads/vendors/netletix.md
index b8c65bd38c7e3..6835910fbdb82 100644
--- a/ads/netletix.md
+++ b/ads/vendors/netletix.md
@@ -37,15 +37,15 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-nxkey`: string, non-empty
-- `data-nxunit`: string, non-empty
-- `data-nxwidth`: string, non-empty
-- `data-nxheight`: string, non-empty
+-   `data-nxkey`: string, non-empty
+-   `data-nxunit`: string, non-empty
+-   `data-nxwidth`: string, non-empty
+-   `data-nxheight`: string, non-empty
 
 ### Optional parameters
 
-- `data-nxasync`: string, non-empty
-- `data-nxv`: string, non-empty
-- `data-nxsite`: string, non-empty
-- `data-nxid`: string, non-empty
-- `data-nxscript`: string, non-empty
+-   `data-nxasync`: string, non-empty
+-   `data-nxv`: string, non-empty
+-   `data-nxsite`: string, non-empty
+-   `data-nxid`: string, non-empty
+-   `data-nxscript`: string, non-empty
diff --git a/ads/vendors/noddus.js b/ads/vendors/noddus.js
new file mode 100644
index 0000000000000..750b548babfbe
--- /dev/null
+++ b/ads/vendors/noddus.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function noddus(global, data) {
+  validateData(data, ['token']);
+
+  global.noddus = data;
+
+  writeScript(global, 'https://noddus.com/amp_loader.js');
+}
diff --git a/ads/noddus.md b/ads/vendors/noddus.md
similarity index 95%
rename from ads/noddus.md
rename to ads/vendors/noddus.md
index 8eae70d8456c6..253c7a63b653c 100644
--- a/ads/noddus.md
+++ b/ads/vendors/noddus.md
@@ -34,4 +34,4 @@ For details on the configuration semantics, see [Noddus documentation](https://w
 
 ### Required parameters
 
-- `data-token` - Publishers placement token
+-   `data-token` - Publishers placement token
diff --git a/ads/vendors/nokta.js b/ads/vendors/nokta.js
new file mode 100644
index 0000000000000..39a1e428a74d5
--- /dev/null
+++ b/ads/vendors/nokta.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function nokta(global, data) {
+  validateData(data, ['category', 'site', 'zone']);
+  global.category = data.category;
+  global.site = data.site;
+  global.zone = data.zone;
+  global.iwidth = data.width;
+  global.iheight = data.height;
+  writeScript(
+    global,
+    'https://static.virgul.com/theme/mockups/noktaamp/ampjs.js'
+  );
+}
diff --git a/ads/nokta.md b/ads/vendors/nokta.md
similarity index 88%
rename from ads/nokta.md
rename to ads/vendors/nokta.md
index 16f70bc60138b..d0f1803cacf95 100644
--- a/ads/nokta.md
+++ b/ads/vendors/nokta.md
@@ -38,6 +38,6 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-category`: Site category for ad unit.
-- `data-site`: Site descriptor for ad.
-- `data-zone`: Zone id to show related ad.
+-   `data-category`: Site category for ad unit.
+-   `data-site`: Site descriptor for ad.
+-   `data-zone`: Zone id to show related ad.
diff --git a/ads/vendors/nws.js b/ads/vendors/nws.js
new file mode 100644
index 0000000000000..9d09b4a370e5e
--- /dev/null
+++ b/ads/vendors/nws.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateSrcPrefix, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function nws(global, data) {
+  const {src} = data;
+  validateSrcPrefix(
+    [
+      'https://tags.nws.ai/',
+      'https://echo.nws.press/',
+      'https://stories.nws.ai/',
+    ],
+    src
+  );
+  writeScript(global, src);
+}
+
+// Keep the following for backwards compatibility
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function chargeads(global, data) {
+  const {src} = data;
+  validateSrcPrefix(
+    ['https://www.chargeplatform.com/', 'https://tags.chargeplatform.com/'],
+    src
+  );
+  writeScript(global, src);
+}
diff --git a/ads/nws.md b/ads/vendors/nws.md
similarity index 98%
rename from ads/nws.md
rename to ads/vendors/nws.md
index 773f643679dfa..f21f96f93232e 100644
--- a/ads/nws.md
+++ b/ads/vendors/nws.md
@@ -37,4 +37,4 @@ For configuration semantics, please [contact Newsroom AI](https://www.nws.ai).
 
 Supported parameters:
 
-- `src`
+-   `src`
diff --git a/ads/vendors/oblivki.js b/ads/vendors/oblivki.js
new file mode 100644
index 0000000000000..684c29e19e1f1
--- /dev/null
+++ b/ads/vendors/oblivki.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+const oblivkiFields = ['id'];
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function oblivki(global, data) {
+  validateData(data, oblivkiFields, []);
+
+  global.oblivkiParam = data;
+  writeScript(global, 'https://oblivki.biz/ads/amp.js');
+}
diff --git a/ads/vendors/oblivki.md b/ads/vendors/oblivki.md
new file mode 100644
index 0000000000000..0d43de91b689f
--- /dev/null
+++ b/ads/vendors/oblivki.md
@@ -0,0 +1,39 @@
+<!---
+Copyright 2016 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.
+-->
+
+# Oblivki
+
+## Example
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="oblivki"
+  data-use-a4a="true"
+  data-block-key="XgSNxZnGpAmULblp9d23"
+  src="https://oblivki.biz/amp_a4a?key=XgSNxZnGpAmULblp9d23"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For configuration details and to generate your tags, please contact support@oblivki.biz
+
+Supported parameters:
+
+-   `data-block-key`
diff --git a/ads/vendors/onead.js b/ads/vendors/onead.js
new file mode 100644
index 0000000000000..eca2d5e1b59a5
--- /dev/null
+++ b/ads/vendors/onead.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function onead(global, data) {
+  validateData(data, [], ['playmode', 'uid', 'pid', 'host']);
+  global.Guoshi = {
+    queryAd: {
+      amp: {},
+    },
+  };
+  global.ONEAD_AMP = {
+    playmode: data.playmode,
+    uid: data.uid,
+    pid: data.pid,
+    host: data.host,
+  };
+  createOneadSlot(global);
+  createAdUnit(global);
+}
+/**
+ * @param {!Window} win
+ */
+function createOneadSlot(win) {
+  const slot = document.createElement('div');
+  slot.id = 'onead-amp';
+  win.document.getElementById('c').appendChild(slot);
+}
+/**
+ * @param {!Window} win
+ */
+function createAdUnit(win) {
+  win.ONEAD_AMP.isAMP = true;
+  const src = 'https://ad-specs.guoshipartners.com/static/js/onead-amp.min.js';
+  const jsLoadCb = () => {
+    win.Guoshi.queryAd.amp.setup({
+      playMode: win.ONEAD_AMP.playMode,
+      uid: win.ONEAD_AMP.uid,
+      pid: win.ONEAD_AMP.pid,
+      host: win.ONEAD_AMP.host,
+    });
+  };
+
+  loadScript(win, src, jsLoadCb);
+}
diff --git a/ads/onead.md b/ads/vendors/onead.md
similarity index 91%
rename from ads/onead.md
rename to ads/vendors/onead.md
index 112ae526e8a9e..fced1385e5f00 100644
--- a/ads/onead.md
+++ b/ads/vendors/onead.md
@@ -36,9 +36,9 @@ limitations under the License.
 
 Supported parameters:
 
-- `data-playmode`
-- `data-uid`
-- `data-pid` (optional)
-- `data-host` (optional)
+-   `data-playmode`
+-   `data-uid`
+-   `data-pid` (optional)
+-   `data-host` (optional)
 
 For configuration details, please contact [OneAD](https://www.onead.com.tw/)
diff --git a/ads/vendors/onnetwork.js b/ads/vendors/onnetwork.js
new file mode 100644
index 0000000000000..513837e9b1fd2
--- /dev/null
+++ b/ads/vendors/onnetwork.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {validateData, validateSrcPrefix, writeScript} from '../../3p/3p';
+
+// Valid OnNetwork movie and ad source hosts
+const hosts = {
+  video: 'https://video.onnetwork.tv',
+  cdn: 'https://cdn.onnetwork.tv',
+  cdnx: 'https://cdnx.onnetwork.tv',
+  vast: 'https://vast.onnetwork.tv',
+};
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function onnetwork(global, data) {
+  validateData(data, [['src', 'sid', 'mid']]);
+  global.onnetwork = {ampData: data};
+  const {mid, sid, src} = data;
+  let url;
+
+  // Custom movie url using "data-src" attribute
+  if (src) {
+    validateSrcPrefix(
+      Object.keys(hosts).map((type) => hosts[type]),
+      src
+    );
+    url = src;
+  }
+  // Movie tag using "data-sid" attribute
+  else if (sid) {
+    url = hosts.video + '/embed.php?ampsrc=1&sid=' + encodeURIComponent(sid);
+    // Movie placement using "data-mid" attribute
+  } else if (mid) {
+    url = hosts.video + '/embed.php?ampsrc=1&mid=' + encodeURIComponent(mid);
+  }
+
+  writeScript(global, url);
+}
diff --git a/ads/onnetwork.md b/ads/vendors/onnetwork.md
similarity index 91%
rename from ads/onnetwork.md
rename to ads/vendors/onnetwork.md
index d1af60235c45c..198ef44390fab 100644
--- a/ads/onnetwork.md
+++ b/ads/vendors/onnetwork.md
@@ -53,7 +53,7 @@ information on how to get required movie tag or placement IDs.
 
 Only one of the mentioned parameters should be used at the same time.
 
-- `data-sid`
-- `data-mid`
-- `src`: must use https protocol and must be from one of the
-  allowed OnNetwork hosts.
+-   `data-sid`
+-   `data-mid`
+-   `src`: must use https protocol and must be from one of the
+    allowed OnNetwork hosts.
diff --git a/ads/vendors/openadstream.js b/ads/vendors/openadstream.js
new file mode 100644
index 0000000000000..8ccae5aedc093
--- /dev/null
+++ b/ads/vendors/openadstream.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function openadstream(global, data) {
+  validateData(data, ['adhost', 'sitepage', 'pos'], ['query']);
+
+  let url =
+    'https://' +
+    encodeURIComponent(data.adhost) +
+    '/3/' +
+    data.sitepage +
+    '/1' +
+    String(Math.random()).substring(2, 11) +
+    '@' +
+    data.pos;
+
+  if (data.query) {
+    url = url + '?' + data.query;
+  }
+  writeScript(global, url);
+}
diff --git a/ads/openadstream.md b/ads/vendors/openadstream.md
similarity index 86%
rename from ads/openadstream.md
rename to ads/vendors/openadstream.md
index b35b678471a33..8110a6c7fa652 100644
--- a/ads/openadstream.md
+++ b/ads/vendors/openadstream.md
@@ -62,10 +62,10 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `adhost`: OAS cname. Must start with HTTPS.
-- `sitepage`: Sitepage configured for this ad spot.
-- `pos`: Position for the this ad spot.
+-   `adhost`: OAS cname. Must start with HTTPS.
+-   `sitepage`: Sitepage configured for this ad spot.
+-   `pos`: Position for the this ad spot.
 
 ### Optional parameters
 
-- `query`: Query parameter to be sent with request. Keywords and keynames, taxonomy etc.
+-   `query`: Query parameter to be sent with request. Keywords and keynames, taxonomy etc.
diff --git a/ads/vendors/openx.js b/ads/vendors/openx.js
new file mode 100644
index 0000000000000..f51ccabde197f
--- /dev/null
+++ b/ads/vendors/openx.js
@@ -0,0 +1,184 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {doubleclick} from '../../ads/google/doubleclick';
+import {loadScript, validateData, writeScript} from '../../3p/3p';
+
+const {hasOwnProperty} = Object.prototype;
+
+/**
+ * Sort of like Object.assign.
+ * @param {!Object} target
+ * @param {!Object} source
+ * @return {!Object}
+ */
+function assign(target, source) {
+  for (const prop in source) {
+    if (hasOwnProperty.call(source, prop)) {
+      target[prop] = source[prop];
+    }
+  }
+
+  return target;
+}
+
+/* global OX: false */
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function openx(global, data) {
+  const openxData = ['host', 'nc', 'auid', 'dfpSlot', 'dfp', 'openx'];
+  const dfpData = assign({}, data); // Make a copy for dfp.
+
+  // TODO: check mandatory fields
+  validateData(data, [], openxData);
+  // Consolidate Doubleclick inputs for forwarding -
+  // conversion rules are explained in openx.md.
+  if (data.dfpSlot) {
+    // Anything starting with 'dfp' gets promoted.
+    openxData.forEach((openxKey) => {
+      if (openxKey in dfpData && openxKey !== 'dfp') {
+        if (openxKey.startsWith('dfp')) {
+          // Remove 'dfp' prefix, lowercase the first letter.
+          let fixKey = openxKey.substring(3);
+          fixKey = fixKey.substring(0, 1).toLowerCase() + fixKey.substring(1);
+          dfpData[fixKey] = data[openxKey];
+        }
+        delete dfpData[openxKey];
+      }
+    });
+
+    // Promote the whole 'dfp' object.
+    if ('dfp' in data) {
+      assign(dfpData, dfpData.dfp);
+      delete dfpData['dfp'];
+    }
+  }
+
+  // Decide how to render.
+  if (data.host) {
+    let jssdk = `https://${data.host}/mw/1.0/jstag`;
+
+    if (data.nc && data.dfpSlot) {
+      jssdk += '?nc=' + encodeURIComponent(data.nc);
+      if (data.auid) {
+        advanceImplementation(global, jssdk, dfpData, data);
+      } else {
+        standardImplementation(global, jssdk, dfpData);
+      }
+    } else if (data.auid) {
+      // Just show an ad.
+      global.OX_cmds = [
+        () => {
+          const oxRequest = OX();
+          const oxAnchor = global.document.createElement('div');
+          global.document.body.appendChild(oxAnchor);
+          /*eslint "google-camelcase/google-camelcase": 0*/
+          OX._requestArgs['bc'] = 'amp';
+          oxRequest.addAdUnit(data.auid);
+          oxRequest.setAdSizes([data.width + 'x' + data.height]);
+          if (data.openx && data.openx.customVars) {
+            setCustomVars(oxRequest, filterCustomVar(data.openx.customVars));
+          }
+          oxRequest.getOrCreateAdUnit(data.auid).set('anchor', oxAnchor);
+          global.context.renderStart();
+          oxRequest.load();
+        },
+      ];
+      loadScript(global, jssdk);
+    }
+  } else if (data.dfpSlot) {
+    // Fall back to a DFP ad.
+    doubleclick(global, dfpData);
+  }
+}
+
+/**
+ * @param {!Window} global
+ * @param {string} jssdk
+ * @param {!Object} dfpData
+ */
+function standardImplementation(global, jssdk, dfpData) {
+  writeScript(global, jssdk, () => {
+    /*eslint "google-camelcase/google-camelcase": 0*/
+    doubleclick(global, dfpData);
+  });
+}
+
+/**
+ * @param {!Window} global
+ * @param {string} jssdk
+ * @param {!Object} dfpData
+ * @param {*} data
+ */
+function advanceImplementation(global, jssdk, dfpData, data) {
+  const size = [data.width + 'x' + data.height];
+  let customVars = {};
+  if (data.openx && data.openx.customVars) {
+    customVars = filterCustomVar(data.openx.customVars);
+  }
+  global.OX_bidder_options = {
+    bidderType: 'hb_amp',
+    callback: () => {
+      const priceMap = global.oxhbjs && global.oxhbjs.getPriceMap();
+      const slot = priceMap && priceMap['c'];
+      const targeting = slot
+        ? `${slot.size}_${slot.price},hb-bid-${slot.bid_id}`
+        : 'none_t';
+      dfpData.targeting = dfpData.targeting || {};
+      assign(dfpData.targeting, {oxb: targeting});
+      doubleclick(global, dfpData);
+    },
+  };
+  global.OX_bidder_ads = [[data.dfpSlot, size, 'c', customVars]];
+  loadScript(global, jssdk);
+}
+
+/**
+ * @param {*} oxRequest
+ * @param {!Object} customVars
+ */
+function setCustomVars(oxRequest, customVars) {
+  const customVarKeys = Object.keys(customVars);
+  customVarKeys.forEach((customVarKey) => {
+    const customVarValue = customVars[customVarKey];
+    if (Array.isArray(customVarValue)) {
+      /** @type {!Array} */ (customVarValue).forEach((value) => {
+        oxRequest.addVariable(customVarKey, value);
+      });
+    } else {
+      oxRequest.addVariable(customVarKey, customVarValue);
+    }
+  });
+}
+
+/**
+ * @param {!Object} customVars
+ * @return {!Object}
+ */
+function filterCustomVar(customVars) {
+  const filterPattern = /^[A-Za-z0-9._]{1,20}$/;
+  const filteredKeys = Object.keys(customVars).filter((key) =>
+    filterPattern.test(key)
+  );
+  const filteredCustomVar = {};
+  filteredKeys.forEach((key) => {
+    filteredCustomVar[key.toLowerCase()] = customVars[key];
+  });
+  return filteredCustomVar;
+}
diff --git a/ads/vendors/openx.md b/ads/vendors/openx.md
new file mode 100644
index 0000000000000..ec302565bfa48
--- /dev/null
+++ b/ads/vendors/openx.md
@@ -0,0 +1,107 @@
+<!---
+Copyright 2016 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.
+-->
+
+# OpenX
+
+## Examples
+
+-   All OpenX `<amp-ad>` tags require the `width`, `height`, and `type="openx"` parameters.
+-   Secure tags (HTTPS) are required for AMP.
+
+### OpenX Ad Server
+
+Display an OpenX Ad Unit.
+
+**Required**:
+
+-   `data-auid` - The ad unit ID to display
+-   `data-host` - SSL-enabled OpenX delivery domain
+
+**Optional**:
+
+-   `json` - Additional json options.
+
+    -   `customVars` - please refer to the [documentation](https://docs.openx.com/Content/developers/ad_request_api/custom_variables_in_ad_calls.html).
+
+```html
+<amp-ad
+  width="728"
+  height="90"
+  type="openx"
+  data-host="domain.openx.net"
+  data-auid="12345"
+  json='{"dfp":{"targeting":{"sport":["rugby","cricket"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":1},"openx":{"customVars":{"marco":"polo","fates":["clothos","lachesis","atropos"]}}}'
+>
+</amp-ad>
+```
+
+### OpenX Bidder
+
+OpenX header bidding. Parameters noted in the DoubleClick amp-ad [documentation](https://github.com/ampproject/amphtml/blob/main/ads/google/doubleclick.md) can be forwarded to DoubleClick by the following rules:
+
+1. Parameters like `data-dfp-{name}` will be converted to `data-{name}` and passed to DoubleClick
+2. Everything under the json "dfp" key will be passed to DoubleClick
+
+**Required**:
+
+-   `data-host` - SSL-enabled OpenX delivery domain
+-   `data-nc` - Network code '-' sitename
+-   `data-auid` - Open X Ad unit id to display
+-   `data-dfp-slot` - The DoubleClick slot
+
+**Optional**:
+
+-   `json` - Additional json options.
+
+    -   `customVars` - please refer to the [documentation](https://docs.openx.com/Content/developers/ad_request_api/custom_variables_in_ad_calls.html). Also note that OpenX bidder limits these keys by the **allowlisted keys** set on your publisher settings.
+
+```html
+<amp-ad
+  width="728"
+  height="90"
+  type="openx"
+  data-host="domain.openx.net"
+  data-auid="12345"
+  data-nc="56789-MySite"
+  data-dfp-slot="/12345/dfp_zone"
+  json='{"dfp":{"targeting":{"sport":["rugby","cricket"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":1},"openx":{"customVars":{"marco":"polo","fates":["clothos","lachesis","atropos"]}}}'
+>
+</amp-ad>
+```
+
+### DoubleClick Fallback
+
+If no OpenX parameters are detected, the tag falls back to a proxy for the DoubleClick ad type. The same rules for
+parameter conversion apply here as for bidder.
+
+**Required**:
+
+-   `data-dfp-slot` - The DoubleClick slot
+
+**Optional**:
+
+-   `json` - Additional json options. Only the "dfp" is currently respected.
+
+```html
+<amp-ad
+  width="728"
+  height="90"
+  type="openx"
+  data-dfp-slot="12345/dfp_zone"
+  json='{"dfp":{"targeting":{"sport":["rugby","cricket"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":1}}'
+>
+</amp-ad>
+```
diff --git a/ads/vendors/opinary.js b/ads/vendors/opinary.js
new file mode 100644
index 0000000000000..85597f54b9ce6
--- /dev/null
+++ b/ads/vendors/opinary.js
@@ -0,0 +1,77 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @description Make canonicalUrl available from iframe
+ */
+function addCanonicalLinkTag(global) {
+  if (global.context.canonicalUrl) {
+    const link = global.document.createElement('link');
+    link.setAttribute('rel', 'canonical');
+    link.setAttribute('href', global.context.canonicalUrl);
+    global.document.head.appendChild(link);
+  }
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ * @return {?Node}
+ */
+function createContainer(global, data) {
+  // create div
+  const div = global.document.createElement('div');
+  if (data.poll) {
+    div.className = 'opinary-widget-embed';
+    div.dataset.customer = data.client;
+    div.dataset.poll = data.poll;
+  } else {
+    div.setAttribute('id', 'opinary-automation-placeholder');
+  }
+
+  return div;
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function opinary(global, data) {
+  validateData(data, ['client']);
+
+  addCanonicalLinkTag(global);
+
+  // c element is created by AMP
+  const c = global.document.getElementById('c');
+
+  // create div to detect if we are in AMP context
+  const isAmp = global.document.createElement('div');
+  isAmp.setAttribute('id', 'opinaryAMP');
+  c.appendChild(isAmp);
+
+  // create div where poll should be shown
+  c.appendChild(createContainer(global, data));
+
+  // load script
+  if (data.poll) {
+    loadScript(global, `https://widgets.opinary.com/embed.js`);
+  } else {
+    loadScript(global, `https://widgets.opinary.com/a/${data.client}.js`);
+  }
+}
diff --git a/ads/vendors/opinary.md b/ads/vendors/opinary.md
new file mode 100644
index 0000000000000..d278cc3391e37
--- /dev/null
+++ b/ads/vendors/opinary.md
@@ -0,0 +1,62 @@
+<!---
+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.
+-->
+
+# Opinary
+
+## Example
+
+### AMS / Automated Matching System
+
+The automated matching system is an algorithm developed by Opinary which matches polls to articles.
+
+```html
+<amp-embed
+  width="500"
+  height="500"
+  type="opinary"
+  layout="intrinsic"
+  data-client="test-success"
+>
+</amp-embed>
+```
+
+### Embed / Manual Integration
+
+If you want to show a specific poll, you need to include the poll parameter, as shown in the example below.
+
+```html
+<amp-embed
+  width="500"
+  height="500"
+  type="opinary"
+  layout="intrinsic"
+  data-client="test-success"
+  data-poll="freuen-sie-sich-ber-schnee_production-at-bKwLEv"
+>
+</amp-embed>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact the Opinary account manager or refer to their documentation.
+
+### Required parameters
+
+-   `data-client` - the customer name
+
+### Optional parameters
+
+-   `data-poll` - the ID of the poll you want to show
diff --git a/ads/vendors/outbrain.js b/ads/vendors/outbrain.js
new file mode 100644
index 0000000000000..7e70ac16a4919
--- /dev/null
+++ b/ads/vendors/outbrain.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function outbrain(global, data) {
+  // ensure we have valid widgetIds value
+  validateData(data, ['widgetids']);
+
+  global._outbrain = global._outbrain || {
+    viewId: global.context.pageViewId,
+    widgetIds: data['widgetids'],
+    htmlURL: data['htmlurl'] || global.context.canonicalUrl,
+    ampURL: data['ampurl'] || global.context.sourceUrl,
+    fbk: data['fbk'] || '',
+    testMode: data['testmode'] || 'false',
+    styleFile: data['stylefile'] || '',
+    referrer: data['referrer'] || global.context.referrer,
+  };
+
+  // load the Outbrain AMP JS file
+  loadScript(
+    global,
+    'https://widgets.outbrain.com/widgetAMP/outbrainAMP.min.js'
+  );
+}
diff --git a/ads/vendors/outbrain.md b/ads/vendors/outbrain.md
new file mode 100644
index 0000000000000..2dbe4d037a5b1
--- /dev/null
+++ b/ads/vendors/outbrain.md
@@ -0,0 +1,115 @@
+<!---
+Copyright 2015 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.
+-->
+
+# Outbrain
+
+## Example installation of the Outbrain widget
+
+The examples below must be accompanied by AMP-enabled widgets delivered by Outbrain’s Account Management Team, do not directly install this code with existing widgets.
+
+### Basic
+
+```html
+<amp-embed
+    width="100"
+    height="100"
+    type="outbrain"
+    layout="responsive"
+    data-widgetIds="AMP_1,AMP_2"
+>
+</amp-embed>
+```
+
+### Example code running our widget with a CMP & amp-consent module
+
+```html
+<amp-embed
+    width="100"
+    height="100"
+    type="outbrain"
+    layout="responsive"
+    data-block-on-consent
+    data-widgetIds="AMP_1"
+>
+</amp-embed>
+```
+
+### Sticky Ad
+
+```html
+<amp-sticky-ad layout="nodisplay">
+    <amp-ad width="300" height="100" type="outbrain" data-widgetids="AMP_1">
+    </amp-ad>
+</amp-sticky-ad>
+```
+
+Note that `<amp-sticky-ad />` component requires the following script to be included in the page:
+
+```html
+<script
+    async
+    custom-element="amp-sticky-ad"
+    src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"
+></script>
+```
+
+See [AMP documentation](https://amp.dev/documentation/components/amp-sticky-ad) for more information regarding `<amp-sticky-ad />` component.
+
+## Configuration
+
+For details on the configuration semantics, please contact Outbrain’s Account Management Team.\
+These configurations are relevant for both `<amp-ad />` and `<amp-embed />`.
+
+### Required parameters
+
+-   `data-widgetIds`: Widget Id/s Provided by Account Manager.
+
+### Optional parameters
+
+-   `data-htmlURL`: The URL of the standard html version of the page.
+-   `data-ampURL`: The URL of the AMP version of the page.
+-   `data-styleFile`: Provide publisher an option to pass CSS file in order to inherit the design for the AMP displayed widget. **Consult with Account Manager regarding CSS options**.
+-   `data-block-on-consent`: Set this attribute without value in case you are using a CMP & the amp-consent module in order to make sure the consent info gets passed to the Outbrain widget correctly.
+
+### User Consent handling
+
+Outbrains AMP widgets are fully compliant with the european data protection regulations GDPR. For all users from the EU you should use a Consent Management Platform (CMP) to get the users consent decision. The widget will react to the consent information from the CMP and serve personalized widgets only if the provided TC string grants the right to do so.
+If no TC string gets passed (because the widget is loaded before the user has made a choice or due to a wrong CMP implementation), the implementation code will render a non-personalized widget.
+
+While on regular pages Outbrain can access the user consent information directly from the CMP this info needs to get passed from the CMP to the widget element through the amp-consent module. In order to be able to send a personalized widget Outbrain needs to get the consent info (incl. the consent string) passed to it’s shared data object.
+
+If you are serving the Outbrain AMP widget to EU Users please make sure that:
+
+-   you have a IAB complaint CMP properly setup on your page together with the amp-consent module
+-   you have added Outbrain to your approved vendors for your CMP (Outbrains Vendor ID is 164) with purposes 1-10 allowed
+-   The CMP is properly connected to the amp-consent module (follow your CMP provider instructions)
+-   you add the data-block-on-consent attribute to the amp-embed widget element
+
+Furthermore we encourage you to make sure that the widget does not get loaded before the user has made his choice through your CMP!
+If this can’t be done you can also make sure that you send a TC String with non consent as a default value - in this case OB will be serving a non-personalized widget until the user has made a different choice. Please contact your CMP on how to set the no consent string for those cases.
+
+You’ll find more information on the official amp-consent documentation:
+https://amp.dev/documentation/components/amp-consent/
+
+## Troubleshooting
+
+### Widget is cut off
+
+According to the AMP API, "resizes are honored when the resize will not adjust the content the user is currently reading. That is, if the ad is above the viewport's contents, it'll resize. Same if it's below. If it's in the viewport, it ignores it."
+
+**Resolution**
+
+You can set an initial height of what the widget height is supposed to be. That is, instead of `height="100"`, if the widget's final height is 600px, then set `height="600"`. Setting the initial height **_will not_** finalize the widget height if it's different from the actual. The widget will resize to it's true dimensions after the widget leaves the viewport.
diff --git a/ads/vendors/pixels.js b/ads/vendors/pixels.js
new file mode 100644
index 0000000000000..01578210fef77
--- /dev/null
+++ b/ads/vendors/pixels.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function pixels(global, data) {
+  validateData(data, ['origin', 'sid', 'tag'], ['clickTracker', 'viewability']);
+  data.tag = data.tag.toString().toLowerCase();
+  global._pixelsParam = data;
+  if (data.tag === 'sync') {
+    writeScript(
+      global,
+      'https://cdn.adsfactor.net/amp/pixels-amp.min.js',
+      () => {
+        const pixelsAMPAd = global.pixelsAd;
+        const pixelsAMPTag = new pixelsAMPAd(data);
+        pixelsAMPTag.renderAmp(global.context);
+        global.context.renderStart();
+      }
+    );
+  } else {
+    global.context.noContentAvailable();
+  }
+}
diff --git a/ads/vendors/pixels.md b/ads/vendors/pixels.md
new file mode 100644
index 0000000000000..28dee798c468d
--- /dev/null
+++ b/ads/vendors/pixels.md
@@ -0,0 +1,48 @@
+<!---
+Copyright 2018 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.
+-->
+
+# Pixels
+
+## Example
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="pixels"
+  data-origin="af"
+  data-sid="2847717911664"
+  data-tag="sync"
+  data-click-tracker="false"
+  data-viewability="true"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For additional details and support contact techteam@pixels.asia
+
+Required parameters:
+
+-   data-origin - Specify which ad server group to handle the ad request.
+-   data-sid - Unique ad tag identifier.
+-   data-tag - Specify whether this tag is a sync tag.
+
+Optional parameters:
+
+-   data-click-tracker - Specify whether there is a third party click-tracker.
+-   data-viewability - Specify whether the tag should record viewability statistics.
diff --git a/ads/vendors/playstream.js b/ads/vendors/playstream.js
new file mode 100644
index 0000000000000..d75d0874b8334
--- /dev/null
+++ b/ads/vendors/playstream.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+const mandatoryParams = ['id'];
+const optionalParams = ['fluid'];
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function playstream(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+  global.playstream = {
+    unitData: data['id'],
+    fluid: data['fluid'],
+  };
+  validateData(data, mandatoryParams, optionalParams);
+  const searchParams = new URLSearchParams(data);
+  loadScript(
+    global,
+    'https://app.playstream.media/js/amp.js?' + searchParams.toString()
+  );
+}
diff --git a/ads/vendors/playstream.md b/ads/vendors/playstream.md
new file mode 100644
index 0000000000000..a8ecafb30c82d
--- /dev/null
+++ b/ads/vendors/playstream.md
@@ -0,0 +1,38 @@
+<!---
+Copyright 2020 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.
+-->
+
+# PlayStream
+
+## Example
+
+```html
+<amp-ad
+  width="300"
+  height="1"
+  type="playstream"
+  data-id="playstream_ad_id"
+  data-fluid="true"
+  layout="responsive"
+>
+</amp-ad>
+```
+
+## Configuration
+
+Supported parameters:
+
+-   `data-id`
+-   `data-fluid`
diff --git a/ads/vendors/plista.js b/ads/vendors/plista.js
new file mode 100644
index 0000000000000..7cc27a353e521
--- /dev/null
+++ b/ads/vendors/plista.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function plista(global, data) {
+  // TODO: check mandatory fields
+  validateData(
+    data,
+    [],
+    [
+      'publickey',
+      'widgetname',
+      'urlprefix',
+      'item',
+      'geo',
+      'categories',
+      'countrycode',
+    ]
+  );
+  const div = global.document.createElement('div');
+  div.setAttribute('data-display', 'plista_widget_' + data.widgetname);
+  // container with id "c" is provided by amphtml
+  global.document.getElementById('c').appendChild(div);
+  window.PLISTA = {
+    publickey: data.publickey,
+    widgets: [
+      {
+        name: data.widgetname,
+        pre: data.urlprefix,
+      },
+    ],
+    item: data.item,
+    geo: data.geo,
+    categories: data.categories,
+    noCache: true,
+    useDocumentReady: false,
+    dataMode: 'data-display',
+  };
+
+  // load the plista modules asynchronously
+  loadScript(
+    global,
+    'https://static' +
+      (data.countrycode ? '-' + encodeURIComponent(data.countrycode) : '') +
+      '.plista.com/async.js'
+  );
+}
diff --git a/ads/plista.md b/ads/vendors/plista.md
similarity index 92%
rename from ads/plista.md
rename to ads/vendors/plista.md
index 18cf6e1faa4ef..48c4281fe578b 100644
--- a/ads/plista.md
+++ b/ads/vendors/plista.md
@@ -59,16 +59,16 @@ For semantics of configuration, please see [Plista's documentation](https://goo.
 
 Supported parameters:
 
-- `data-countrycode`
-- `data-publickey`
-- `data-widgetname`
-- `data-geo`
-- `data-urlprefix`
-- `data-categories`
+-   `data-countrycode`
+-   `data-publickey`
+-   `data-widgetname`
+-   `data-geo`
+-   `data-urlprefix`
+-   `data-categories`
 
 Supported via `json` attribute:
 
-- `item`
+-   `item`
 
 ## Layout
 
diff --git a/ads/vendors/polymorphicads.js b/ads/vendors/polymorphicads.js
new file mode 100644
index 0000000000000..6c7ee66b8d0fc
--- /dev/null
+++ b/ads/vendors/polymorphicads.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function polymorphicads(global, data) {
+  validateData(data, ['adunit', 'params']);
+  global.polyParam = data;
+  writeScript(global, 'https://www.polymorphicads.jp/js/amp.js');
+}
diff --git a/ads/polymorphicads.md b/ads/vendors/polymorphicads.md
similarity index 94%
rename from ads/polymorphicads.md
rename to ads/vendors/polymorphicads.md
index 090a7606a0368..ef25eb93959fe 100644
--- a/ads/polymorphicads.md
+++ b/ads/vendors/polymorphicads.md
@@ -35,5 +35,5 @@ For configuration details and to generate your tags, please contact [Polymorphic
 
 Supported parameters:
 
-- `data-adunit`: adUnitId
-- `data-params`: parameters
+-   `data-adunit`: adUnitId
+-   `data-params`: parameters
diff --git a/ads/vendors/popin.js b/ads/vendors/popin.js
new file mode 100644
index 0000000000000..0ab9fddd27488
--- /dev/null
+++ b/ads/vendors/popin.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function popin(global, data) {
+  validateData(data, ['mediaid']);
+
+  const d = global.document.createElement('div');
+  d.id = '_popIn_amp_recommend';
+  global.document.getElementById('c').appendChild(d);
+
+  const url =
+    'https://api.popin.cc/searchbox/' +
+    encodeURIComponent(data['mediaid']) +
+    '.js';
+
+  loadScript(global, url);
+}
diff --git a/ads/popin.md b/ads/vendors/popin.md
similarity index 95%
rename from ads/popin.md
rename to ads/vendors/popin.md
index 6809a26038e7a..caebdad7fc58a 100644
--- a/ads/popin.md
+++ b/ads/vendors/popin.md
@@ -36,6 +36,6 @@ For configuration details, please contact http://www.popin.cc/discovery/#contact
 
 Supported parameters:
 
-- `height`
-- `width`
-- `data-mediaid`
+-   `height`
+-   `width`
+-   `data-mediaid`
diff --git a/ads/vendors/postquare.js b/ads/vendors/postquare.js
new file mode 100644
index 0000000000000..8e6055c3874b3
--- /dev/null
+++ b/ads/vendors/postquare.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function postquare(global, data) {
+  validateData(data, ['widgetids']);
+
+  global._postquare = global._postquare || {
+    viewId: global.context.pageViewId,
+    widgetIds: data['widgetids'],
+    websiteId: data['websiteid'],
+    publisherId: data['publisherid'],
+    url: data['url'] || global.context.canonicalUrl,
+    ampURL: data['ampurl'] || global.context.sourceUrl,
+    mode: data['mode'] || 1,
+    style: data['stylecss'] || '',
+    referrer: global.context.referrer,
+  };
+
+  if (data['mode'] == 100) {
+    loadScript(global, 'https://widget.engageya.com/pos_amp_loader.js');
+  } else {
+    loadScript(global, 'https://widget.postquare.com/postquare_amp_loader.js');
+  }
+}
diff --git a/ads/postquare.md b/ads/vendors/postquare.md
similarity index 83%
rename from ads/postquare.md
rename to ads/vendors/postquare.md
index 643c6286976c0..d6a35f0a8aca4 100644
--- a/ads/postquare.md
+++ b/ads/vendors/postquare.md
@@ -37,12 +37,12 @@ For details on the configuration semantics, please contact Postquare or refer to
 
 ### Required parameters
 
-- `widgetIds`: Widget ids
-- `websiteId`: Website Id
-- `publisherId`: Publisher Id
+-   `widgetIds`: Widget ids
+-   `websiteId`: Website Id
+-   `publisherId`: Publisher Id
 
 ### Optional parameters
 
-- `url`: Current none amp version URL
-- `ampUrl`: Current AMP page URL
-- `styleCSS`: Additional style
+-   `url`: Current none amp version URL
+-   `ampUrl`: Current AMP page URL
+-   `styleCSS`: Additional style
diff --git a/ads/vendors/ppstudio.js b/ads/vendors/ppstudio.js
new file mode 100644
index 0000000000000..d905fb863d7c7
--- /dev/null
+++ b/ads/vendors/ppstudio.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function ppstudio(global, data) {
+  validateData(data, ['crid', 'width', 'height', 'holderScript'], []);
+
+  global._ppstudio = {
+    crid: data.crid,
+    width: data.width,
+    height: data.height,
+    holderScript: data.holderScript,
+  };
+
+  const e = global.document.createElement('script');
+  e.id = 'pps-script-' + data.crid;
+  e.setAttribute('data-width', data.width);
+  e.setAttribute('data-height', data.height);
+  e.setAttribute('data-click-url', '');
+  e.src = data.holderScript;
+  global.document.getElementById('c').appendChild(e);
+
+  const i = global.document.createElement('ins');
+  i.classList.add('ppstudio');
+  i.setAttribute('data-pps-target-id', 'cr-' + data.crid);
+  global.document.getElementById('c').appendChild(i);
+
+  loadScript(global, 'https://ads-cdn.tenmax.io/code/ppstudio.js', () => {
+    global.context.renderStart();
+  });
+}
diff --git a/ads/ppstudio.md b/ads/vendors/ppstudio.md
similarity index 92%
rename from ads/ppstudio.md
rename to ads/vendors/ppstudio.md
index d4337768cb1ac..9fea374cfa4fe 100644
--- a/ads/ppstudio.md
+++ b/ads/vendors/ppstudio.md
@@ -35,9 +35,9 @@ For configuration semantics, contact [TenMax](https://www.tenmax.io/en/).
 
 ### Required parameters
 
-- `data-crid`
-- `data-width`
-- `data-height`
-- `data-holderScript`
+-   `data-crid`
+-   `data-width`
+-   `data-height`
+-   `data-holderScript`
 
 ### Optional parameters
diff --git a/ads/vendors/pressboard.js b/ads/vendors/pressboard.js
new file mode 100644
index 0000000000000..061c7c28cc3b8
--- /dev/null
+++ b/ads/vendors/pressboard.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function pressboard(global, data) {
+  validateData(data, ['media']);
+  data.baseUrl = 'https://sr.studiostack.com';
+  global.pbParams = data;
+  loadScript(
+    global,
+    data.baseUrl + '/js/amp-ad.js',
+    () => {
+      global.context.renderStart();
+    },
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/pressboard.md b/ads/vendors/pressboard.md
similarity index 88%
rename from ads/pressboard.md
rename to ads/vendors/pressboard.md
index 812e011b40745..69986fcae8bfc 100644
--- a/ads/pressboard.md
+++ b/ads/vendors/pressboard.md
@@ -25,8 +25,8 @@ limitations under the License.
 
 ## Configuration
 
-For details on configuration, see [Pressboard documentation](http://help.pressboard.ca/publisher-resources/getting-started/implementing-google-amp).
+For details on configuration, see [Pressboard documentation](https://help.pressboardmedia.com/implementing-google-amp).
 
 ### Required parameters
 
-- `data-media` - Media ID
+-   `data-media` - Media ID
diff --git a/ads/vendors/promoteiq.js b/ads/vendors/promoteiq.js
new file mode 100644
index 0000000000000..630fdeddee282
--- /dev/null
+++ b/ads/vendors/promoteiq.js
@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+import {parseJson} from '../../src/core/types/object/json';
+import {user} from '../../src/log';
+
+const TAG = 'PROMOTEIQ';
+const mandatoryDataFields = ['src', 'params', 'sfcallback'];
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function promoteiq(global, data) {
+  validateData(data, mandatoryDataFields, []);
+  const sfInputs = parseJson(data['params']);
+
+  loadScript(global, data['src'], () => {
+    if (!!global['TagDeliveryContent']) {
+      const sfCallback = new Function('response', data['sfcallback']);
+      global['TagDeliveryContent']['request'](sfInputs, sfCallback);
+    } else {
+      user().error(TAG, 'TagDeliveryContent object not loaded on page');
+    }
+  });
+}
diff --git a/ads/promoteiq.md b/ads/vendors/promoteiq.md
similarity index 86%
rename from ads/promoteiq.md
rename to ads/vendors/promoteiq.md
index 12b9ee313dbee..53d173fea3768 100644
--- a/ads/promoteiq.md
+++ b/ads/vendors/promoteiq.md
@@ -34,9 +34,9 @@ Provides support for AMP integration with [PromoteIQ](https://www.promoteiq.com/
 
 ### Required parameters
 
-- `data-src`: Publisher specific PromoteIQ CDN file.
-- `data-input`: JSON stringified inputs.
-- `data-sfcallback`: Stringified publisher rendering function.
+-   `data-src`: Publisher specific PromoteIQ CDN file.
+-   `data-input`: JSON stringified inputs.
+-   `data-sfcallback`: Stringified publisher rendering function.
 
 # Support
 
diff --git a/ads/vendors/pubexchange.js b/ads/vendors/pubexchange.js
new file mode 100644
index 0000000000000..610c8d01fc21b
--- /dev/null
+++ b/ads/vendors/pubexchange.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function pubexchange(global, data) {
+  // ensure we have valid widgetIds value
+  validateData(data, ['publication', 'moduleId', 'moduleNum'], ['test']);
+
+  global.PUBX = global.PUBX || {
+    pub: data['publication'],
+    modNum: data['moduleNum'],
+    modId: data['moduleId'],
+    test: data['test'],
+  };
+
+  // load the Outbrain AMP JS file
+  loadScript(global, 'https://main.pubexchange.com/loader-amp.min.js');
+}
diff --git a/ads/pubexchange.md b/ads/vendors/pubexchange.md
similarity index 75%
rename from ads/pubexchange.md
rename to ads/vendors/pubexchange.md
index a29890cd94ad8..b60d05c943b36 100644
--- a/ads/pubexchange.md
+++ b/ads/vendors/pubexchange.md
@@ -41,10 +41,10 @@ For semantics of configuration, please see [PubExchange's documentation](https:/
 
 ### Required parameters
 
-- `data-publication`: Shortcode identifying publication provided by PubExchange account manager
-- `data-module-id`: Shortcode identifying module provided by PubExchange account manager
-- `data-module-num`: ID identifying module provided by PubExchange account manager
+-   `data-publication`: Shortcode identifying publication provided by PubExchange account manager
+-   `data-module-id`: Shortcode identifying module provided by PubExchange account manager
+-   `data-module-num`: ID identifying module provided by PubExchange account manager
 
 ### Optional parameters
 
-- `data-test`: Pass the parameter with the "true" value to test the PubExchange module
+-   `data-test`: Pass the parameter with the "true" value to test the PubExchange module
diff --git a/ads/vendors/pubguru.js b/ads/vendors/pubguru.js
new file mode 100644
index 0000000000000..a84a18e5115e0
--- /dev/null
+++ b/ads/vendors/pubguru.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function pubguru(global, data) {
+  validateData(data, ['publisher', 'slot']);
+
+  global.$pubguru = data;
+
+  const el = global.document.createElement('div');
+  el.setAttribute('id', 'the-ad-unit');
+
+  global.document.getElementById('c').appendChild(el);
+  loadScript(
+    global,
+    'https://amp.pubguru.org/amp.' +
+      encodeURIComponent(data.publisher) +
+      '.min.js'
+  );
+}
diff --git a/ads/pubguru.md b/ads/vendors/pubguru.md
similarity index 100%
rename from ads/pubguru.md
rename to ads/vendors/pubguru.md
diff --git a/ads/vendors/pubmatic.js b/ads/vendors/pubmatic.js
new file mode 100644
index 0000000000000..16f0d3e089ad3
--- /dev/null
+++ b/ads/vendors/pubmatic.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript} from '../../3p/3p';
+
+/* global PubMatic: false */
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function pubmatic(global, data) {
+  loadScript(global, 'https://ads.pubmatic.com/AdServer/js/amp.js', () => {
+    data.kadpageurl = global.context.sourceUrl || global.context.location.href;
+    PubMatic.showAd(data);
+  });
+}
diff --git a/ads/pubmatic.md b/ads/vendors/pubmatic.md
similarity index 96%
rename from ads/pubmatic.md
rename to ads/vendors/pubmatic.md
index 97e04587972a3..86bbfde79e757 100644
--- a/ads/pubmatic.md
+++ b/ads/vendors/pubmatic.md
@@ -34,6 +34,6 @@ For details on the configuration semantics, please contact the ad network or ref
 
 Supported parameters:
 
-- `json`
-- `width`
-- `height`
+-   `json`
+-   `width`
+-   `height`
diff --git a/ads/vendors/pubmine.js b/ads/vendors/pubmine.js
new file mode 100644
index 0000000000000..65a229bfa238b
--- /dev/null
+++ b/ads/vendors/pubmine.js
@@ -0,0 +1,95 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {CONSENT_POLICY_STATE} from '../../src/core/constants/consent-state';
+import {loadScript, validateData} from '../../3p/3p';
+
+const pubmineOptional = ['section', 'pt', 'ht', 'npaOnUnknownConsent'],
+  pubmineRequired = ['siteid'],
+  pubmineURL = 'https://s.pubmine.com/head.js';
+
+/**
+ * @param {!Object} data
+ * @param {!Window} global
+ */
+function initMasterFrame(data, global) {
+  /*
+   * INSUFFICIENT and UNKNOWN should be treated as INSUFFICIENT
+   * unless state is UNKNOWN and `data-npa-on-unknown-consent=false`
+   */
+  const paUnknown =
+    data['npaOnUnknownConsent'] !== undefined &&
+    'false' == data['npaOnUnknownConsent'];
+  const ctxt = global.context;
+  const consent =
+    ctxt.initialConsentState === null ||
+    ctxt.initialConsentState === CONSENT_POLICY_STATE.SUFFICIENT ||
+    ctxt.initialConsentState === CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED ||
+    (ctxt.initialConsentState === CONSENT_POLICY_STATE.UNKNOWN && paUnknown);
+
+  global['__ATA_PP'] = {
+    pt: data['pt'] || 1,
+    ht: data['ht'] || 1,
+    tn: 'amp',
+    amp: true,
+    consent: consent ? 1 : 0,
+    siteid: Number(data['siteid']) || undefined,
+  };
+  global['__ATA'] = global['__ATA'] || {};
+  global['__ATA']['cmd'] = global['__ATA']['cmd'] || [];
+  loadScript(global, pubmineURL);
+}
+
+/**
+ * @param {string} slotId
+ * @param {!Window} global
+ */
+function createSlot(slotId, global) {
+  const containerEl = global.document.getElementById('c');
+  const adSlot = global.document.createElement('div');
+  adSlot.setAttribute('id', slotId);
+  containerEl.appendChild(adSlot);
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function pubmine(global, data) {
+  validateData(data, pubmineRequired, pubmineOptional);
+
+  const sectionId = data['siteid'] + (data['section'] || '1');
+
+  const slotConfig = {
+    sectionId,
+    height: data.height == 250 ? 250 : data.height - 15,
+    width: data.width,
+    window: global,
+  };
+
+  const slotId = `atatags-${sectionId}`;
+
+  createSlot(slotId, global);
+  const {isMaster} = global.context;
+  if (isMaster) {
+    initMasterFrame(data, global);
+  }
+  const master = isMaster ? global : global.context.master;
+  master['__ATA']['cmd']['push'](function () {
+    master['__ATA']['insertStyles'](global);
+    master['__ATA']['initSlot'](slotId, slotConfig);
+  });
+}
diff --git a/ads/vendors/pubmine.md b/ads/vendors/pubmine.md
new file mode 100644
index 0000000000000..b9f56d73ff8ec
--- /dev/null
+++ b/ads/vendors/pubmine.md
@@ -0,0 +1,69 @@
+<!---
+Copyright 2016 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.
+-->
+
+# Pubmine
+
+## Example
+
+### Basic
+
+```html
+<amp-ad width="300" height="265" type="pubmine" data-siteid="37790885">
+</amp-ad>
+```
+
+### With all attributes
+
+```html
+<amp-ad
+  width="300"
+  height="265"
+  type="pubmine"
+  data-section="1"
+  data-pt="1"
+  data-ht="1"
+  data-siteid="37790885"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For further configuration information, please [contact Pubmine](https://wordpress.com/help/contact).
+
+Please note that the height parameter should be 15 greater than your ad size to ensure there is enough room for the "Report this ad" link.
+
+### Required parameters
+
+-   `data-siteid`: Pubmine publisher site number.
+
+### Optional parameters
+
+-   `data-section`: Pubmine slot identifier
+-   `data-pt`: Enum value for page type
+-   `data-ht`: Enum value for hosting type
+-   `data-npa-on-unknown-consent`: Flag for allowing/prohibiting non-personalized-ads on unknown consent.
+
+## Consent Support
+
+Pubmine's amp-ad adheres to a user's consent in the following ways:
+
+-   No `data-block-on-consent` attribute: Pubmine amp-ad will display a personalized ad to the user.
+-   `CONSENT_POLICY_STATE.SUFFICIENT`: Pubmine amp-ad will display a personalized ad to the user.
+-   `CONSENT_POLICY_STATE.INSUFFICIENT`: Pubmine amp-ad will display a non-personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Pubmine amp-ad will display a personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN`: Pubmine amp-ad will display a non-personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN` and `data-npa-on-unknown-consent=false`: Pubmine amp-ad will display a personalized ad to the user.
diff --git a/ads/vendors/puffnetwork.js b/ads/vendors/puffnetwork.js
new file mode 100644
index 0000000000000..6fdfb0287c8ff
--- /dev/null
+++ b/ads/vendors/puffnetwork.js
@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function puffnetwork(global, data) {
+  validateData(data, ['chid']);
+  global.pn = data;
+  writeScript(global, 'https://static.puffnetwork.com/amp_ad.js');
+}
diff --git a/ads/puffnetwork.md b/ads/vendors/puffnetwork.md
similarity index 95%
rename from ads/puffnetwork.md
rename to ads/vendors/puffnetwork.md
index 44b99d1e4e869..48866f3395606 100644
--- a/ads/puffnetwork.md
+++ b/ads/vendors/puffnetwork.md
@@ -28,6 +28,6 @@ For details on the configuration semantics, please contact the ad network or ref
 
 Supported parameters:
 
-- `data-chid`
-- `width`
-- `height`
+-   `data-chid`
+-   `width`
+-   `height`
diff --git a/ads/vendors/pulse.js b/ads/vendors/pulse.js
new file mode 100644
index 0000000000000..0a8aaaae63faf
--- /dev/null
+++ b/ads/vendors/pulse.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function pulse(global, data) {
+  validateData(data, ['sid']);
+  global.pulseInit = data;
+  // load the pulse initializer asynchronously
+  loadScript(global, 'https://static.pulse.mail.ru/pulse-widget-amp.js');
+}
diff --git a/ads/vendors/pulse.md b/ads/vendors/pulse.md
new file mode 100644
index 0000000000000..c192b52115a13
--- /dev/null
+++ b/ads/vendors/pulse.md
@@ -0,0 +1,27 @@
+<!---
+Copyright 2017 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.
+-->
+
+# Pulse
+
+## Example
+
+```html
+<amp-embed height="300" type="pulse" data-sid="your-stream-id"></amp-embed>
+```
+
+### Required parameters
+
+-   `data-sid`
diff --git a/ads/vendors/pulsepoint.js b/ads/vendors/pulsepoint.js
new file mode 100644
index 0000000000000..e23d3d4daf890
--- /dev/null
+++ b/ads/vendors/pulsepoint.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {doubleclick} from '../../ads/google/doubleclick';
+import {loadScript, validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function pulsepoint(global, data) {
+  // TODO: check mandatory fields
+  validateData(data, [], ['pid', 'tagid', 'tagtype', 'slot', 'timeout']);
+  if (data.tagtype === 'hb') {
+    headerBidding(global, data);
+  } else {
+    tag(global, data);
+  }
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function tag(global, data) {
+  writeScript(
+    global,
+    'https://tag.contextweb.com/getjs.aspx?action=VIEWAD' +
+      '&cwpid=' +
+      encodeURIComponent(data.pid) +
+      '&cwtagid=' +
+      encodeURIComponent(data.tagid) +
+      '&cwadformat=' +
+      encodeURIComponent(data.width + 'X' + data.height)
+  );
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function headerBidding(global, data) {
+  loadScript(global, 'https://ads.contextweb.com/ht.js', () => {
+    const hbConfig = {
+      timeout: data.timeout || 1000,
+      slots: [
+        {
+          cp: data.pid,
+          ct: data.tagid,
+          cf: data.width + 'x' + data.height,
+          placement: data.slot,
+          elementId: 'c',
+        },
+      ],
+      done(targeting) {
+        doubleclick(global, {
+          width: data.width,
+          height: data.height,
+          slot: data.slot,
+          targeting: targeting[data.slot],
+        });
+      },
+    };
+    new window.PulsePointHeaderTag(hbConfig).init();
+  });
+}
diff --git a/ads/pulsepoint.md b/ads/vendors/pulsepoint.md
similarity index 78%
rename from ads/pulsepoint.md
rename to ads/vendors/pulsepoint.md
index dcb85edebcb24..d0987ade21505 100644
--- a/ads/pulsepoint.md
+++ b/ads/vendors/pulsepoint.md
@@ -52,9 +52,9 @@ For semantics of configuration, please see [PulsePoint's documentation](https://
 
 Supported parameters:
 
-- `pid`: Publisher Id
-- `tagid`: Tag Id
-- `tagtype`: Tag Type. "hb" represents Header bidding, otherwise treated as regular tag.
-- `size`: Ad Size represented 'widthxheight'
-- `slot`: DFP slot id, required for header bidding tag
-- `timeout`: optional timeout for header bidding, default is 1000ms.
+-   `pid`: Publisher Id
+-   `tagid`: Tag Id
+-   `tagtype`: Tag Type. "hb" represents Header bidding, otherwise treated as regular tag.
+-   `size`: Ad Size represented 'widthxheight'
+-   `slot`: DFP slot id, required for header bidding tag
+-   `timeout`: optional timeout for header bidding, default is 1000ms.
diff --git a/ads/vendors/purch.js b/ads/vendors/purch.js
new file mode 100644
index 0000000000000..975c8d2fa8fa6
--- /dev/null
+++ b/ads/vendors/purch.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, validateSrcPrefix, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function purch(global, data) {
+  validateData(data, [], ['pid', 'divid', 'config']);
+  global.data = data;
+
+  const adsrc = 'https://ramp.purch.com/serve/creative_amp.js';
+  validateSrcPrefix('https:', adsrc);
+  writeScript(global, adsrc);
+}
diff --git a/ads/purch.md b/ads/vendors/purch.md
similarity index 81%
rename from ads/purch.md
rename to ads/vendors/purch.md
index 1ea077fa1f5c9..b14768de99ac1 100644
--- a/ads/purch.md
+++ b/ads/vendors/purch.md
@@ -36,7 +36,7 @@ For details on the configuration semantics, please contact the ad network or ref
 
 Supported parameters:
 
-- `data-pid`: placement id
-- `data-divid`: div id of unit
-- `data-config`: Optinal parameter to control the ad behaviour.
-- `data-config.targeting`: Optinal config parameter to pass key-values to DFP/GAM.
+-   `data-pid`: placement id
+-   `data-divid`: div id of unit
+-   `data-config`: Optinal parameter to control the ad behaviour.
+-   `data-config.targeting`: Optinal config parameter to pass key-values to DFP/GAM.
diff --git a/ads/vendors/quoraad.js b/ads/vendors/quoraad.js
new file mode 100644
index 0000000000000..9f6c722c3a5cb
--- /dev/null
+++ b/ads/vendors/quoraad.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function quoraad(global, data) {
+  validateData(data, ['adid']);
+  global.ampAdParam = data;
+  writeScript(global, 'https://a.quora.com/amp_ad.js');
+}
diff --git a/ads/quoraad.md b/ads/vendors/quoraad.md
similarity index 98%
rename from ads/quoraad.md
rename to ads/vendors/quoraad.md
index 1142472f49403..7f0c6af75d7f5 100644
--- a/ads/quoraad.md
+++ b/ads/vendors/quoraad.md
@@ -30,4 +30,4 @@ Please consult internal reference documents on AMP. This is used only for first-
 
 Required parameter:
 
-- `data-aid`
+-   `data-aid`
diff --git a/ads/vendors/rakutenunifiedads.js b/ads/vendors/rakutenunifiedads.js
new file mode 100644
index 0000000000000..c0f89bf21d71a
--- /dev/null
+++ b/ads/vendors/rakutenunifiedads.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {hasOwn} from '../../src/core/types/object';
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function rakutenunifiedads(global, data) {
+  validateData(data, ['id']);
+  if (hasOwn(data, 'env')) {
+    data.env = `${data.env}-`;
+  } else {
+    data.env = '';
+  }
+  global.runa = data;
+  writeScript(global, `https://${data.env}s-cdn.rmp.rakuten.co.jp/js/amp.js`);
+}
diff --git a/ads/vendors/rakutenunifiedads.md b/ads/vendors/rakutenunifiedads.md
new file mode 100644
index 0000000000000..f3251b39363fc
--- /dev/null
+++ b/ads/vendors/rakutenunifiedads.md
@@ -0,0 +1,86 @@
+<!---
+Copyright 2020 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.
+-->
+
+# Rakuten Unified Ads
+
+## Example
+
+```html
+<amp-ad width="300" height="250" type="rakutenunifiedads" data-id="63">
+</amp-ad>
+```
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="rakutenunifiedads"
+  data-id="63"
+  data-env="dev"
+  data-genre='{"master_id":1,"code":"100371","match":"children"}'
+  data-ifa="DUMMY_IFA"
+  data-targeting='{"k1":"string type","k2":["male", "female"]}'
+>
+</amp-ad>
+```
+
+## Configuration
+
+### Required parameters
+
+-   `data-id` : Your adspot id
+-   `type` : fixed value `rakutenunifiedads`
+
+### Optional parameters
+
+-   `data-env` : Environment of server for Not production. e.g. `dev`, `stg`, `tst`
+-   `data-genre` : Genre object
+-   `data-ifa` : IFA string
+-   `data-targeting` : Targeting object
+-   `data-iscode` : ID type. 'true': `data-id` works as code
+
+### Set id as adSpot code
+
+-   `data-id` : Your code with `data-iscode`
+-   `data-iscode` : ID type. 'true': id works as code
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="rakutenunifiedads"
+  data-id="aabbcc"
+  data-iscode="true"
+  data-env="dev"
+>
+</amp-ad>
+```
+
+### How to handle responsive design
+
+Please refer to [Create responsive AMP pages](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design/)
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="rakutenunifiedads"
+  data-id="63"
+  data-env="dev"
+  layout="responsive"
+>
+</amp-ad>
+```
diff --git a/ads/vendors/rbinfox.js b/ads/vendors/rbinfox.js
new file mode 100644
index 0000000000000..8b3e92fcf4062
--- /dev/null
+++ b/ads/vendors/rbinfox.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright 2017 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.
+ */
+import {loadScript, validateData, validateSrcPrefix} from '../../3p/3p';
+
+const jsnPrefix = 'https://rb.infox.sg/';
+const n = 'infoxContextAsyncCallbacks';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function rbinfox(global, data) {
+  validateData(data, ['src']);
+  const {src} = data;
+  validateSrcPrefix(jsnPrefix, src);
+
+  addToQueue(global, src);
+  loadScript(global, src);
+}
+
+/**
+ * @param {!Window} global
+ * @param {string} renderTo
+ */
+function createContainer(global, renderTo) {
+  const d = global.document.createElement('div');
+  d.id = renderTo;
+  global.document.getElementById('c').appendChild(d);
+}
+
+/**
+ * @param {string} src
+ * @return {string}
+ */
+function getBlockId(src) {
+  const parts = src.split('/');
+  return parts[parts.length - 1];
+}
+
+/**
+ * @param {!Window} global
+ * @param {string} src
+ */
+function addToQueue(global, src) {
+  const blockId = getBlockId(src);
+  const ctx = n + blockId;
+  global[ctx] = global[ctx] || [];
+  global[ctx].push(() => {
+    const renderTo = 'infox_' + blockId;
+    // Create container
+    createContainer(global, renderTo);
+    global['INFOX' + blockId].renderTo(renderTo);
+  });
+}
diff --git a/ads/rbinfox.md b/ads/vendors/rbinfox.md
similarity index 98%
rename from ads/rbinfox.md
rename to ads/vendors/rbinfox.md
index cea03e39d9ab4..efee0c8e3345b 100644
--- a/ads/rbinfox.md
+++ b/ads/vendors/rbinfox.md
@@ -34,4 +34,4 @@ For semantics of configuration, please see [Rb.Infox documentation](https://adm.
 
 ### Required parameters
 
-- `src`
+-   `src`
diff --git a/ads/vendors/rcmwidget.js b/ads/vendors/rcmwidget.js
new file mode 100644
index 0000000000000..0a01dd1a142a1
--- /dev/null
+++ b/ads/vendors/rcmwidget.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+const WIDGET_DEFAULT_NODE_ID = 'rcm-widget';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function rcmwidget(global, data) {
+  validateData(
+    data,
+    ['rcmId', 'nodeId', 'blockId', 'templateName', 'projectId'],
+    ['contextItemId']
+  );
+
+  global.rcmWidgetInit = data;
+
+  createContainer(global, data.nodeId);
+
+  // load the rcmwidget initializer asynchronously
+  loadScript(global, 'https://rcmjs.rambler.ru/static/rcmw/rcmw-amp.js');
+}
+
+/**
+ * @param {!Window} global
+ * @param {string} nodeId
+ */
+function createContainer(global, nodeId = WIDGET_DEFAULT_NODE_ID) {
+  const container = global.document.createElement('div');
+  container.id = nodeId;
+
+  global.document.getElementById('c').appendChild(container);
+}
diff --git a/ads/vendors/rcmwidget.md b/ads/vendors/rcmwidget.md
new file mode 100644
index 0000000000000..3a8e7fdcf2b70
--- /dev/null
+++ b/ads/vendors/rcmwidget.md
@@ -0,0 +1,31 @@
+<!---
+Copyright 2021 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.
+-->
+
+# Rcmwidget
+
+## Example
+
+```html
+<amp-embed width="auto" height="300" type="rcmwidget"></amp-embed>
+```
+
+### Required parameters
+
+-   `data-rcm-id`
+-   `data-node-id`
+-   `data-block-id`
+-   `data-template-name`
+-   `data-project-id`
diff --git a/ads/vendors/readmo.js b/ads/vendors/readmo.js
new file mode 100644
index 0000000000000..bfb6caca78e9d
--- /dev/null
+++ b/ads/vendors/readmo.js
@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function readmo(global, data) {
+  validateData(data, ['section']);
+
+  const config = {
+    container: '#c',
+    amp: true,
+  };
+
+  if (data.url) {
+    global.publisherUrl = data.url;
+  }
+
+  Object.keys(data).forEach((property) => {
+    config[property] = data[property];
+  });
+
+  (global.readmo = global.readmo || []).push(config);
+
+  loadScript(global, 'https://s.yimg.com/dy/ads/readmo.js', () =>
+    global.context.renderStart()
+  );
+}
diff --git a/ads/vendors/readmo.md b/ads/vendors/readmo.md
new file mode 100644
index 0000000000000..310acea1a1a1e
--- /dev/null
+++ b/ads/vendors/readmo.md
@@ -0,0 +1,48 @@
+<!---
+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.
+-->
+
+# ReadMo
+
+## Example
+
+ReadMo only requires a section code to run. Please work with your account manager to properly configure your AMP section.
+
+### Basic
+
+```html
+<amp-embed
+  width="400"
+  height="320"
+  type="readmo"
+  layout="responsive"
+  data-infinite="true"
+  data-section="1234567"
+>
+</amp-embed>
+```
+
+### Required parameters
+
+-   `data-section` : A unique identifier that represents your site and placement
+
+### Optional parameters
+
+-   `data-module` : Defines the type of module to render (`end-of-article`, `smart-feed`, `smart-feed-video`, `side-rail`)
+-   `data-infinite` : If true, enables infinite feed for your module
+-   `data-title` : The title that appears above the module (defaults to "You May Like")
+-   `data-sponsored-by-label` : Text override to the default "Sponsored by" label that appears next to the sponsors name
+-   `data-url` : Publisher url override
+-   `json` : Use this to pass additional configuration properties (ex: `json='{ "contentId": 1234 }'`)
diff --git a/ads/vendors/realclick.js b/ads/vendors/realclick.js
new file mode 100644
index 0000000000000..730a3bf5a0acd
--- /dev/null
+++ b/ads/vendors/realclick.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function realclick(global, data) {
+  validateData(data, ['mcode']);
+  global.rcParams = data;
+  loadScript(global, 'https://ssp.realclick.co.kr/amp/ad.js');
+}
diff --git a/ads/realclick.md b/ads/vendors/realclick.md
similarity index 98%
rename from ads/realclick.md
rename to ads/vendors/realclick.md
index a088fa6a6b3ab..803ad613c76fc 100644
--- a/ads/realclick.md
+++ b/ads/vendors/realclick.md
@@ -34,4 +34,4 @@ For configuration details and to generate your tags, please contact [Realclick](
 
 Supported parameters:
 
-- `data-mcode`
+-   `data-mcode`
diff --git a/ads/vendors/recomad.js b/ads/vendors/recomad.js
new file mode 100644
index 0000000000000..bb40d498d3c9e
--- /dev/null
+++ b/ads/vendors/recomad.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * Add a container for the recomAD widget,
+ * which will be discovered by the script automatically.
+ *
+ * @param {Element} container
+ * @param {string} appId
+ * @param {string} widgetId
+ * @param {string} searchTerm
+ * @param {string} origin
+ * @param {string} baseUrl
+ * @param {string} puid
+ */
+function createWidgetContainer(
+  container,
+  appId,
+  widgetId,
+  searchTerm,
+  origin,
+  baseUrl,
+  puid
+) {
+  container.className = 's24widget';
+
+  container.setAttribute('data-app-id', appId);
+  container.setAttribute('data-widget-id', widgetId);
+  searchTerm && container.setAttribute('data-search-term', searchTerm);
+  origin && container.setAttribute('data-origin', origin);
+  baseUrl && container.setAttribute('data-base-url', baseUrl);
+  puid && container.setAttribute('data-puid', puid);
+
+  window.document.body.appendChild(container);
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function recomad(global, data) {
+  validateData(data, ['appId', 'widgetId', ['searchTerm', 'origin']]);
+
+  createWidgetContainer(
+    window.document.createElement('div'),
+    data['appId'],
+    data['widgetId'],
+    data['searchTerm'] || '',
+    data['origin'] || '',
+    data['baseUrl'] || '',
+    data['puid'] || ''
+  );
+
+  loadScript(window, 'https://widget.s24.com/js/s24widget.min.js');
+}
diff --git a/ads/recomad.md b/ads/vendors/recomad.md
similarity index 81%
rename from ads/recomad.md
rename to ads/vendors/recomad.md
index e1006e2cf5056..d168a5133ac93 100644
--- a/ads/recomad.md
+++ b/ads/vendors/recomad.md
@@ -44,16 +44,16 @@ For details on the configuration semantics, please contact the [ad network](#con
 
 ### Required parameters
 
-- `data-app-id` : Your app id
-- `data-widget-id` : Your widget id
+-   `data-app-id` : Your app id
+-   `data-widget-id` : Your widget id
 
 Please contact us at cooperations@s24.com to receive an `app id` and a `widget id`.
 
 ### Required _at least one of these two_ parameters
 
-- `data-search-term` : Required if _recomAD Search_. The search term you would like to get products for
-- `data-origin` : Required if _recomAD Semantic_. Your canonical link of your original page
+-   `data-search-term` : Required if _recomAD Search_. The search term you would like to get products for
+-   `data-origin` : Required if _recomAD Semantic_. Your canonical link of your original page
 
 ### Optional parameters
 
-- `data-puid` : Your tracking id for the end user
+-   `data-puid` : Your tracking id for the end user
diff --git a/ads/vendors/recreativ.js b/ads/vendors/recreativ.js
new file mode 100644
index 0000000000000..0da417a2f387d
--- /dev/null
+++ b/ads/vendors/recreativ.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function recreativ(global, data) {
+  validateData(data, ['bn']);
+  const target = global.document.createElement('div');
+  target.id = 'bn_' + data['bn'];
+  global.document.getElementById('c').appendChild(target);
+
+  loadScript(
+    global,
+    'https://go.rcvlink.com/static/amp.js',
+    () => {
+      global.context.renderStart();
+    },
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/vendors/recreativ.md b/ads/vendors/recreativ.md
new file mode 100644
index 0000000000000..c9a2ddc7bf072
--- /dev/null
+++ b/ads/vendors/recreativ.md
@@ -0,0 +1,46 @@
+<!---
+Copyright 2020 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.
+-->
+
+# Recreativ
+
+Provides support for [Recreativ](https://recreativ.com/) widgets.
+
+## Example
+
+### With fixed height
+
+```html
+<amp-embed
+  height="240"
+  type="recreativ"
+  layout="fixed-height"
+  data-bn="vesx25SZIB"
+></amp-embed>
+```
+
+### With fixed size
+
+```html
+<amp-ad width="300" height="250" type="recreativ" data-bn="TBnVruGGjp"></amp-ad>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact [Recreativ](https://recreativ.com/help#contacts).
+
+### Required parameters
+
+-   `data-bn`
diff --git a/ads/vendors/relap.js b/ads/vendors/relap.js
new file mode 100644
index 0000000000000..0897b1eb6be14
--- /dev/null
+++ b/ads/vendors/relap.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function relap(global, data) {
+  validateData(data, [], ['token', 'url', 'anchorid', 'version']);
+
+  const urlParam = data['url'] || window.context.canonicalUrl;
+
+  if (data['version'] === 'v7') {
+    window.onRelapAPIReady = function (relapAPI) {
+      relapAPI['init']({
+        token: data['token'],
+        url: urlParam,
+      });
+    };
+
+    window.onRelapAPIInit = function (relapAPI) {
+      relapAPI['addWidget']({
+        cfgId: data['anchorid'],
+        anchorEl: global.document.getElementById('c'),
+        position: 'append',
+        events: {
+          onReady: function () {
+            window.context.renderStart();
+          },
+          onNoContent: function () {
+            window.context.noContentAvailable();
+          },
+        },
+      });
+    };
+
+    loadScript(global, 'https://relap.io/v7/relap.js');
+  } else {
+    window.relapV6WidgetReady = function () {
+      window.context.renderStart();
+    };
+
+    window.relapV6WidgetNoSimilarPages = function () {
+      window.context.noContentAvailable();
+    };
+
+    const anchorEl = global.document.createElement('div');
+    anchorEl.id = data['anchorid'];
+    global.document.getElementById('c').appendChild(anchorEl);
+
+    const url = `https://relap.io/api/v6/head.js?token=${encodeURIComponent(
+      data['token']
+    )}&url=${encodeURIComponent(urlParam)}`;
+    loadScript(global, url);
+  }
+}
diff --git a/ads/relap.md b/ads/vendors/relap.md
similarity index 93%
rename from ads/relap.md
rename to ads/vendors/relap.md
index 1f80091a2741e..72f590a1d0315 100644
--- a/ads/relap.md
+++ b/ads/vendors/relap.md
@@ -37,7 +37,7 @@ For semantics of configuration, please see Relap's documentation. Currently supp
 
 Supported parameters:
 
-- `data-token`
-- `data-url`
-- `data-anchorid`
-- `data-version`
+-   `data-token`
+-   `data-url`
+-   `data-anchorid`
+-   `data-version`
diff --git a/ads/vendors/relappro.js b/ads/vendors/relappro.js
new file mode 100644
index 0000000000000..d5b6c47af9331
--- /dev/null
+++ b/ads/vendors/relappro.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function relappro(global, data) {
+  validateData(data, [], ['slotId', 'nameAdUnit', 'requirements']);
+  global.params = data;
+
+  loadScript(
+    global,
+    'https://cdn.relappro.com/adservices/amp/relappro.amp.min.js'
+  );
+}
diff --git a/ads/relappro.md b/ads/vendors/relappro.md
similarity index 93%
rename from ads/relappro.md
rename to ads/vendors/relappro.md
index 9afc64c3347b3..d92edcd8e3ca8 100644
--- a/ads/relappro.md
+++ b/ads/vendors/relappro.md
@@ -34,6 +34,6 @@ For configuration details and to generate your tags, please contact us at [Relap
 
 Supported parameters:
 
-- `data-slot-id`
-- `data-name-ad-unit`
-- `data-requirements`
+-   `data-slot-id`
+-   `data-name-ad-unit`
+-   `data-requirements`
diff --git a/ads/vendors/remixd.js b/ads/vendors/remixd.js
new file mode 100644
index 0000000000000..8bc4aad12e8b2
--- /dev/null
+++ b/ads/vendors/remixd.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function remixd(global, data) {
+  global._rmxd = {};
+  global._rmxd.url = data.url || global.context.sourceUrl;
+  global._rmxd.amp = true;
+  const sriptVersion = data.version || '5';
+  const tagUrl =
+    'https://tags.remixd.com/player/v' +
+    sriptVersion +
+    '/index.js?cb=' +
+    Math.random();
+
+  document.write(
+    '<' +
+      'script src="' +
+      encodeURI(tagUrl) +
+      '" id="remixd-audio-player-script"><' +
+      '/script>'
+  );
+  global.context.renderStart();
+}
diff --git a/ads/vendors/remixd.md b/ads/vendors/remixd.md
new file mode 100644
index 0000000000000..30fd3d26c118f
--- /dev/null
+++ b/ads/vendors/remixd.md
@@ -0,0 +1,39 @@
+<!---
+Copyright 2020 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.
+-->
+
+# Remixd
+
+## Example
+
+```html
+<amp-ad
+  type="remixd"
+  height="375"
+  width="120"
+  layout="responsive"
+  data-version="5"
+  data-url="https://amp.yoursite.com/amp/content"
+>
+</amp-ad>
+```
+
+## Configuration
+
+Before starting any Remixd AMP setup, please reach out to your account manager for the most up to date documentation or contact [contact@remixd.com](mailto:contact@remixd.com).
+
+### Optional parameters
+
+-   `data-url`: The amp page source URL.
diff --git a/ads/vendors/revcontent.js b/ads/vendors/revcontent.js
new file mode 100644
index 0000000000000..8a05d8b5bd650
--- /dev/null
+++ b/ads/vendors/revcontent.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function revcontent(global, data) {
+  let endpoint =
+    'https://labs-cdn.revcontent.com/build/amphtml/revcontent.amp.min.js';
+
+  if (typeof data.revcontent !== 'undefined') {
+    if (typeof data.env === 'undefined') {
+      endpoint = 'https://assets.revcontent.com/master/delivery.js';
+    } else if (data.env == 'dev') {
+      endpoint = 'https://performante.revcontent.dev/delivery.js';
+    } else {
+      endpoint = 'https://assets.revcontent.com/' + data.env + '/delivery.js';
+    }
+  }
+
+  const required = ['id', 'height'];
+  const optional = [
+    'wrapper',
+    'subIds',
+    'revcontent',
+    'env',
+    'loadscript',
+    'api',
+    'key',
+    'ssl',
+    'adxw',
+    'adxh',
+    'rows',
+    'cols',
+    'domain',
+    'source',
+    'testing',
+    'endpoint',
+    'publisher',
+    'branding',
+    'font',
+    'css',
+    'sizer',
+    'debug',
+    'ampcreative',
+    'gdpr',
+    'gdprConsent',
+    'usPrivacy',
+  ];
+
+  data.endpoint = data.endpoint ? data.endpoint : 'trends.revcontent.com';
+
+  validateData(data, required, optional);
+  global.data = data;
+  if (data.loadscript) {
+    loadScript(window, endpoint);
+  } else {
+    writeScript(window, endpoint);
+  }
+}
diff --git a/ads/revcontent.md b/ads/vendors/revcontent.md
similarity index 90%
rename from ads/revcontent.md
rename to ads/vendors/revcontent.md
index d4d18beb7df53..1570c8318a8db 100644
--- a/ads/revcontent.md
+++ b/ads/vendors/revcontent.md
@@ -50,15 +50,15 @@ For semantics of configuration, please see [Revcontent's documentation](https://
 
 Supported parameters:
 
-- `data-id`
-- `data-revcontent`
-- `data-env`
-- `data-wrapper`
-- `data-endpoint`
-- `data-ssl`
-- `data-testing`
-- `data-loadscript`
-- `data-sub-ids`
+-   `data-id`
+-   `data-revcontent`
+-   `data-env`
+-   `data-wrapper`
+-   `data-endpoint`
+-   `data-ssl`
+-   `data-testing`
+-   `data-loadscript`
+-   `data-sub-ids`
 
 ## Auto-sizing of Ads
 
diff --git a/ads/vendors/revjet.js b/ads/vendors/revjet.js
new file mode 100644
index 0000000000000..77fe80d9141f1
--- /dev/null
+++ b/ads/vendors/revjet.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function revjet(global, data) {
+  validateData(data, ['tag', 'key'], ['plc', 'opts', 'params']);
+
+  global._revjetData = {...data};
+
+  loadScript(
+    global,
+    'https://cdn.revjet.com/~cdn/JS/03/amp.js',
+    /* opt_cb */ undefined,
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/revjet.md b/ads/vendors/revjet.md
similarity index 92%
rename from ads/revjet.md
rename to ads/vendors/revjet.md
index ad3a15ee8f5b9..a85fa64296117 100644
--- a/ads/revjet.md
+++ b/ads/vendors/revjet.md
@@ -38,11 +38,11 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-tag`
-- `data-key`
+-   `data-tag`
+-   `data-key`
 
 ### Optional parameters
 
-- `data-plc`
-- `data-opts`
-- `data-params`
+-   `data-plc`
+-   `data-opts`
+-   `data-params`
diff --git a/ads/vendors/rfp.js b/ads/vendors/rfp.js
new file mode 100644
index 0000000000000..85ecb824c15d7
--- /dev/null
+++ b/ads/vendors/rfp.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function rfp(global, data) {
+  validateData(data, ['adspotId'], ['stylesheetUrl', 'country']);
+  global.rfpData = data;
+  writeScript(global, 'https://js.rfp.fout.jp/rfp-amp.js');
+}
diff --git a/ads/rfp.md b/ads/vendors/rfp.md
similarity index 93%
rename from ads/rfp.md
rename to ads/vendors/rfp.md
index 9aa552b2991ef..ee76efebe2302 100644
--- a/ads/rfp.md
+++ b/ads/vendors/rfp.md
@@ -28,9 +28,9 @@ For configuration details and to generate your tags, please contact https://www.
 
 ### Required parameters
 
-- `data-adspot-id`
+-   `data-adspot-id`
 
 ### Optional parameters
 
-- `data-stylesheet-url`
-- `data-country`
+-   `data-stylesheet-url`
+-   `data-country`
diff --git a/ads/vendors/rnetplus.js b/ads/vendors/rnetplus.js
new file mode 100644
index 0000000000000..ee62af8cc9667
--- /dev/null
+++ b/ads/vendors/rnetplus.js
@@ -0,0 +1,57 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData, validateSrcPrefix} from '../../3p/3p';
+
+const jsnPrefix = 'https://api.rnet.plus/';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function rnetplus(global, data) {
+  validateData(data, ['src']);
+  const {src} = data;
+  validateSrcPrefix(jsnPrefix, src);
+  createContainer(global, 'rnetplus_' + getBlockId(src));
+  loadScript(global, src);
+}
+
+/**
+ * @param {!Window} global
+ * @param {string} renderTo
+ */
+function createContainer(global, renderTo) {
+  const d = global.document.createElement('div');
+  d.id = renderTo;
+  global.document.getElementById('c').appendChild(d);
+}
+
+/**
+ * @param {string} src
+ * @return {string}
+ */
+function getBlockId(src) {
+  const parts = src.split('?');
+  const vars = parts[1].split('&');
+  for (let j = 0; j < vars.length; ++j) {
+    const pair = vars[j].split('=');
+    if (pair[0] == 'blockId') {
+      return pair[1];
+    }
+  }
+  return '660';
+}
diff --git a/ads/rnetplus.md b/ads/vendors/rnetplus.md
similarity index 99%
rename from ads/rnetplus.md
rename to ads/vendors/rnetplus.md
index 24ce03b240c6d..26bc61bcd33f5 100644
--- a/ads/rnetplus.md
+++ b/ads/vendors/rnetplus.md
@@ -36,4 +36,4 @@ For details on the configuration semantics, please contact [Rambler](https://adm
 
 ### Required parameters
 
-- `src`
+-   `src`
diff --git a/ads/vendors/rubicon.js b/ads/vendors/rubicon.js
new file mode 100644
index 0000000000000..2d727e5f8db0f
--- /dev/null
+++ b/ads/vendors/rubicon.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function rubicon(global, data) {
+  // TODO: check mandatory fields
+  validateData(
+    data,
+    [],
+    [
+      'account',
+      'site',
+      'zone',
+      'size',
+      'kw',
+      'visitor',
+      'inventory',
+      'method',
+      'callback',
+    ]
+  );
+
+  if (data.method === 'smartTag') {
+    smartTag(global, data);
+  }
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function smartTag(global, data) {
+  /* eslint-disable */
+  global.rp_account = data.account;
+  global.rp_site = data.site;
+  global.rp_zonesize = data.zone + '-' + data.size;
+  global.rp_adtype = 'js';
+  global.rp_page = context.sourceUrl;
+  global.rp_kw = data.kw;
+  global.rp_visitor = data.visitor;
+  global.rp_inventory = data.inventory;
+  global.rp_amp = 'st';
+  global.rp_callback = data.callback;
+  /* eslint-enable */
+  writeScript(
+    global,
+    'https://ads.rubiconproject.com/ad/' +
+      encodeURIComponent(data.account) +
+      '.js'
+  );
+}
diff --git a/ads/rubicon.md b/ads/vendors/rubicon.md
similarity index 92%
rename from ads/rubicon.md
rename to ads/vendors/rubicon.md
index 8dcb0be6d0bfa..be67d9ff31508 100644
--- a/ads/rubicon.md
+++ b/ads/vendors/rubicon.md
@@ -71,13 +71,13 @@ By default the ad size is based on the `width` and `height` attributes of the `a
 
 #### Smart Tag
 
-- `data-method`
-- `data-account`
-- `data-site`
-- `data-zone`
-- `data-size`
+-   `data-method`
+-   `data-account`
+-   `data-site`
+-   `data-zone`
+-   `data-size`
 
 ##### First Party Data & Keywords
 
-- `data-kw`
-- `json` - for visitor and inventory data
+-   `data-kw`
+-   `json` - for visitor and inventory data
diff --git a/ads/vendors/runative.js b/ads/vendors/runative.js
new file mode 100644
index 0000000000000..ead1eb4b214a0
--- /dev/null
+++ b/ads/vendors/runative.js
@@ -0,0 +1,104 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+import {parseJson} from '../../src/core/types/object/json';
+
+const requiredParams = ['spot'];
+const optionsParams = [
+  'keywords',
+  'adType',
+  'param1',
+  'param2',
+  'param3',
+  'subid',
+  'cols',
+  'rows',
+  'title',
+  'titlePosition',
+  'adsByPosition',
+];
+const adContainerId = 'runative_id';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function runative(global, data) {
+  // ensure we have valid widgetIds value
+  validateData(data, requiredParams, optionsParams);
+
+  const adContainer = global.document.getElementById('c');
+  const adNativeContainer = getAdContainer(global);
+  const initScript = getInitAdScript(global, data);
+
+  adContainer.appendChild(adNativeContainer);
+
+  // load the RUNative AMP JS file
+  loadScript(global, '//cdn.run-syndicate.com/sdk/v1/n.js', () => {
+    global.document.body.appendChild(initScript);
+  });
+}
+
+/**
+ * @param {!Object} data
+ * @return {JsonObject}
+ */
+function getInitData(data) {
+  const initKeys = requiredParams.concat(optionsParams);
+  const initParams = {};
+
+  initKeys.forEach((key) => {
+    if (key in data) {
+      const initKey = key === 'adType' ? 'type' : key;
+
+      initParams[initKey] = data[key];
+    }
+  });
+
+  initParams['element_id'] = adContainerId;
+
+  return parseJson(initParams);
+}
+
+/**
+ * @param {!Window} global
+ * @return {?Node}
+ */
+function getAdContainer(global) {
+  const container = global.document.createElement('div');
+
+  container['id'] = adContainerId;
+
+  return container;
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ * @return {?Node}
+ */
+function getInitAdScript(global, data) {
+  const scriptElement = global.document.createElement('script');
+  const initData = getInitData(data);
+  const initScript = global.document.createTextNode(
+    `NativeAd(${JSON.stringify(initData)});`
+  );
+
+  scriptElement.appendChild(initScript);
+
+  return scriptElement;
+}
diff --git a/ads/vendors/runative.md b/ads/vendors/runative.md
new file mode 100644
index 0000000000000..7464ff81909b3
--- /dev/null
+++ b/ads/vendors/runative.md
@@ -0,0 +1,55 @@
+<!---
+Copyright 2018 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.
+-->
+
+# RUNative
+
+Serves ads from the [RUNative](https://www.runative.com/).
+
+## Example
+
+```html
+<amp-embed
+  width="640"
+  height="320"
+  layout="responsive"
+  type="runative"
+  data-spot="{spotcode}"
+  data-ad-type="{ad type}label-over"
+  data-cols="{number cols}"
+  data-rows="{number rows}"
+  data-title="{title of ad}"
+  data-keywords="{keywords}"
+>
+</amp-embed>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact the ad network or refer to their documentation.
+
+### Required parameters
+
+-   `data-spot` - code spot
+
+### Optional parameters
+
+-   `data-ad-type` - types of ads: `img-left`, `img-right`, `label-over`, `label-under`
+-   `data-keywords` - title of ad
+-   `data-title` - title of ad
+-   `data-cols` - number of cols 1 till 6
+-   `data-rows` - number of rows 1 till 6
+-   `data-title-position` - position of ad title (`left` or `right`)
+-   `data-ads-by-position` - position of runative logo (`left` or `right`)
diff --git a/ads/vendors/sas.js b/ads/vendors/sas.js
new file mode 100644
index 0000000000000..98fa2a8131ea6
--- /dev/null
+++ b/ads/vendors/sas.js
@@ -0,0 +1,100 @@
+/**
+ * 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.
+ */
+
+import {getMultiSizeDimensions} from '../../ads/google/utils';
+import {parseJson} from '../../src/core/types/object/json';
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function sas(global, data) {
+  let url, adHost, whSize;
+  const plainFields = ['site', 'area', 'mid'];
+  validateData(
+    data,
+    ['customerName'],
+    ['adHost', 'site', 'size', 'area', 'mid', 'tags', 'multiSize']
+  );
+
+  if (typeof data.adHost === 'undefined') {
+    adHost = encodeURIComponent(data['customerName']) + '-ads.aimatch.com';
+  } else {
+    adHost = encodeURIComponent(data['adHost']);
+  }
+
+  url = '//' + adHost + '/' + data['customerName'] + '/jserver';
+
+  const {multiSize} = data;
+  const primaryWidth = parseInt(data.width, 10);
+  const primaryHeight = parseInt(data.height, 10);
+  let dimensions;
+  let multiSizeValid = false;
+
+  if (multiSize) {
+    try {
+      dimensions = getMultiSizeDimensions(
+        multiSize,
+        primaryWidth,
+        primaryHeight,
+        true
+      );
+      multiSizeValid = true;
+      dimensions.unshift([primaryWidth, primaryHeight]);
+    } catch (e) {
+      // okay to error here
+    }
+  }
+
+  for (let idx = 0; idx < plainFields.length; idx++) {
+    if (data[plainFields[idx]]) {
+      if (typeof data[plainFields[idx]] !== 'undefined') {
+        url +=
+          '/' +
+          plainFields[idx] +
+          '=' +
+          encodeURIComponent(data[plainFields[idx]]);
+      }
+    }
+  }
+
+  //Size and multi-size
+  if (typeof data.size !== 'undefined') {
+    url += '/SIZE=' + encodeURIComponent(data.size);
+    if (typeof multiSize !== 'undefined' && multiSizeValid) {
+      url += ',' + encodeURIComponent(multiSize);
+    }
+  } else if (typeof multiSize !== 'undefined' && multiSizeValid) {
+    whSize = primaryWidth + 'x' + primaryHeight;
+    url +=
+      '/SIZE=' +
+      encodeURIComponent(whSize) +
+      ',' +
+      encodeURIComponent(multiSize);
+  }
+
+  // Tags
+  if (typeof data.tags !== 'undefined') {
+    const tags = parseJson(data.tags);
+    for (const tag in tags) {
+      url += '/' + tag + '=' + encodeURIComponent(tags[tag]);
+    }
+  }
+  writeScript(global, url, () => {
+    global.context.renderStart();
+  });
+}
diff --git a/ads/sas.md b/ads/vendors/sas.md
similarity index 82%
rename from ads/sas.md
rename to ads/vendors/sas.md
index 19106f6666073..b549fdc94b11c 100644
--- a/ads/sas.md
+++ b/ads/vendors/sas.md
@@ -20,15 +20,16 @@ limitations under the License.
 
 ```html
 <amp-ad
-  width="468"
-  height="60"
+  width="728"
+  height="90"
   type="sas"
   layout="fixed"
   data-customer-name="canary"
-  data-size="320x50"
+  data-size="728x90"
   data-area="areaname"
   data-site="sitename"
   data-tags='{"CAT":"SYLVESTER","POSITION":"TOP"}'
+  data-multi-size="700x90,700x60,500x60"
 >
 </amp-ad>
 ```
@@ -39,11 +40,12 @@ For configuration details, please email support@sas.com.
 
 ### Required parameters
 
-- `data-customer-name`
+-   `data-customer-name`
 
 ### Optional parameters
 
-- `data-size`
-- `data-site`
-- `data-area`
-- `data-tags`
+-   `data-size`
+-   `data-site`
+-   `data-area`
+-   `data-tags`
+-   `data-multi-size`
diff --git a/ads/vendors/seedingalliance.js b/ads/vendors/seedingalliance.js
new file mode 100644
index 0000000000000..b643139aaa6d3
--- /dev/null
+++ b/ads/vendors/seedingalliance.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function seedingalliance(global, data) {
+  writeScript(
+    global,
+    'https://d.nativendo.de/cds/delivery/init?url=' +
+      encodeURIComponent(data.url)
+  );
+}
diff --git a/ads/seedingalliance.md b/ads/vendors/seedingalliance.md
similarity index 95%
rename from ads/seedingalliance.md
rename to ads/vendors/seedingalliance.md
index ae982365df75b..9516a3d8cdf30 100644
--- a/ads/seedingalliance.md
+++ b/ads/vendors/seedingalliance.md
@@ -41,4 +41,4 @@ Before starting any Seeding Alliance AMP setup, please reach out to your account
 Supported parameters:
 ​
 
-- `url`: Domain or URL from your Project
+-   `url`: Domain or URL from your Project
diff --git a/ads/vendors/sekindo.js b/ads/vendors/sekindo.js
new file mode 100644
index 0000000000000..721c34d090bb3
--- /dev/null
+++ b/ads/vendors/sekindo.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {hasOwn} from '../../src/core/types/object';
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function sekindo(global, data) {
+  validateData(data, ['spaceid']);
+  const pubUrl = encodeURIComponent(global.context.sourceUrl);
+  const excludesSet = {ampSlotIndex: 1, type: 1};
+  const customParamMap = {spaceid: 's', width: 'x', height: 'y'};
+  let query =
+    'isAmpProject=1&pubUrl=' +
+    pubUrl +
+    '&cbuster=' +
+    global.context.startTime +
+    '&';
+  let getParam = '';
+  for (const key in data) {
+    if (hasOwn(data, key)) {
+      if (typeof excludesSet[key] == 'undefined') {
+        getParam =
+          typeof customParamMap[key] == 'undefined' ? key : customParamMap[key];
+        query += getParam + '=' + encodeURIComponent(data[key]) + '&';
+      }
+    }
+  }
+  loadScript(
+    global,
+    'https://live.sekindo.com/live/liveView.php?' + query,
+    () => {
+      global.context.renderStart();
+    },
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/sekindo.md b/ads/vendors/sekindo.md
similarity index 95%
rename from ads/sekindo.md
rename to ads/vendors/sekindo.md
index 73f9e3e03f3f5..2cec7b3c15599 100644
--- a/ads/sekindo.md
+++ b/ads/vendors/sekindo.md
@@ -28,4 +28,4 @@ For details on the configuration semantics, please visit [www.sekindo.com](http:
 
 ### Required parameters
 
-- `data-spaceId` - Ad unit unique id
+-   `data-spaceId` - Ad unit unique id
diff --git a/ads/vendors/sharethrough.js b/ads/vendors/sharethrough.js
new file mode 100644
index 0000000000000..6a7f11faf5a1b
--- /dev/null
+++ b/ads/vendors/sharethrough.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function sharethrough(global, data) {
+  validateData(data, ['pkey'], []);
+  global.pkey = data.pkey;
+  writeScript(global, 'https://sdk.sharethrough.com/amp.js');
+}
diff --git a/ads/sharethrough.md b/ads/vendors/sharethrough.md
similarity index 92%
rename from ads/sharethrough.md
rename to ads/vendors/sharethrough.md
index 601ed7a41db6a..2d5e7dc3980ff 100644
--- a/ads/sharethrough.md
+++ b/ads/vendors/sharethrough.md
@@ -37,4 +37,4 @@ For semantics of configuration, please [contact Sharethrough](mailto:pubsupport@
 
 ### Required parameters
 
-- `data-pkey`: (String, non-empty) The unique identifier for your placement
+-   `data-pkey`: (String, non-empty) The unique identifier for your placement
diff --git a/ads/vendors/shemedia.js b/ads/vendors/shemedia.js
new file mode 100644
index 0000000000000..46704e373572d
--- /dev/null
+++ b/ads/vendors/shemedia.js
@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function shemedia(global, data) {
+  validateData(data, ['slotType', 'boomerangPath']);
+
+  loadScript(global, 'https://ads.shemedia.com/static/amp.js');
+}
diff --git a/ads/shemedia.md b/ads/vendors/shemedia.md
similarity index 81%
rename from ads/shemedia.md
rename to ads/vendors/shemedia.md
index aaae53e054beb..bc58eef22683a 100644
--- a/ads/shemedia.md
+++ b/ads/vendors/shemedia.md
@@ -36,12 +36,12 @@ Your site must be an active member of the [SHE Media Partner Network](http://www
 
 ### Required parameters
 
-- `data-slot-type` - SHE Media slot type.
-- `data-boomerang-path` - Boomerang path.
+-   `data-slot-type` - SHE Media slot type.
+-   `data-boomerang-path` - Boomerang path.
 
 ### Optional parameters
 
-- `json` - Boomerang configuration key values can be passed using the `boomerangConfig` property. Custom targeting key values can be passed to Boomerang using the `targeting` property.
+-   `json` - Boomerang configuration key values can be passed using the `boomerangConfig` property. Custom targeting key values can be passed to Boomerang using the `targeting` property.
 
 ### Support
 
diff --git a/ads/vendors/sklik.js b/ads/vendors/sklik.js
new file mode 100644
index 0000000000000..d089b84ba6cf6
--- /dev/null
+++ b/ads/vendors/sklik.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript} from '../../3p/3p';
+
+/* global sklikProvider: false */
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function sklik(global, data) {
+  loadScript(global, 'https://c.imedia.cz/js/amp.js', () => {
+    const parentId = 'sklik_parent';
+
+    const parentElement = document.createElement('div');
+    parentElement.id = parentId;
+    window.document.body.appendChild(parentElement);
+
+    data.elm = parentId;
+    data.url = global.context.canonicalUrl;
+
+    sklikProvider.show(data);
+  });
+}
diff --git a/ads/sklik.md b/ads/vendors/sklik.md
similarity index 96%
rename from ads/sklik.md
rename to ads/vendors/sklik.md
index adc3fb4b2b7a3..927d92def7d4e 100644
--- a/ads/sklik.md
+++ b/ads/vendors/sklik.md
@@ -34,6 +34,6 @@ For semantics of configuration, please see [Sklik.czdocumentation](https://napov
 
 Supported parameters:
 
-- `width`
-- `height`
-- `json`
+-   `width`
+-   `height`
+-   `json`
diff --git a/ads/vendors/slimcutmedia.js b/ads/vendors/slimcutmedia.js
new file mode 100644
index 0000000000000..7a6898bebfc98
--- /dev/null
+++ b/ads/vendors/slimcutmedia.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function slimcutmedia(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+  global._scm_amp = {
+    allowed_data: ['pid', 'ffc'],
+    mandatory_data: ['pid'],
+    data,
+  };
+
+  validateData(
+    data,
+    global._scm_amp.mandatory_data,
+    global._scm_amp.allowed_data
+  );
+
+  loadScript(
+    global,
+    'https://static.freeskreen.com/publisher/' +
+      encodeURIComponent(data.pid) +
+      '/freeskreen.min.js'
+  );
+}
diff --git a/ads/slimcutmedia.md b/ads/vendors/slimcutmedia.md
similarity index 96%
rename from ads/slimcutmedia.md
rename to ads/vendors/slimcutmedia.md
index 5a4cb3d20d4f7..3258d07aeb36f 100644
--- a/ads/slimcutmedia.md
+++ b/ads/vendors/slimcutmedia.md
@@ -35,8 +35,8 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-pid`
+-   `data-pid`
 
 ### Optional parameters
 
-- `data-ffc`
+-   `data-ffc`
diff --git a/ads/vendors/smartadserver.js b/ads/vendors/smartadserver.js
new file mode 100644
index 0000000000000..7327207735bca
--- /dev/null
+++ b/ads/vendors/smartadserver.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function smartadserver(global, data) {
+  // For more flexibility, we construct the call to SmartAdServer's URL in the
+  // external loader, based on the data received from the AMP tag.
+  loadScript(global, 'https://ec-ns.sascdn.com/diff/js/amp.v0.js', () => {
+    global.sas.callAmpAd(data);
+  });
+}
diff --git a/ads/smartadserver.md b/ads/vendors/smartadserver.md
similarity index 100%
rename from ads/smartadserver.md
rename to ads/vendors/smartadserver.md
diff --git a/ads/vendors/smartclip.js b/ads/vendors/smartclip.js
new file mode 100644
index 0000000000000..0a4dc58b5c8a4
--- /dev/null
+++ b/ads/vendors/smartclip.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function smartclip(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+  global._smartclip_amp = {
+    allowed_data: ['extra'],
+    mandatory_data: ['plc', 'sz'],
+    data,
+  };
+
+  validateData(
+    data,
+    global._smartclip_amp.mandatory_data,
+    global._smartclip_amp.allowed_data
+  );
+
+  const rand = Math.round(Math.random() * 100000000);
+
+  loadScript(
+    global,
+    'https://des.smartclip.net/ads?type=dyn&plc=' +
+      encodeURIComponent(data.plc) +
+      '&sz=' +
+      encodeURIComponent(data.sz) +
+      (data.extra ? '&' + encodeURI(data.extra) : '') +
+      '&rnd=' +
+      rand
+  );
+}
diff --git a/ads/smartclip.md b/ads/vendors/smartclip.md
similarity index 90%
rename from ads/smartclip.md
rename to ads/vendors/smartclip.md
index af94aeb0fee7b..5d044049534e9 100644
--- a/ads/smartclip.md
+++ b/ads/vendors/smartclip.md
@@ -37,6 +37,6 @@ Supported parameters:
 
 All parameters are mandatory, only `data-extra` is optional.
 
-- `data-plc` (String, non-empty)
-- `data-sz` (String, non-empty)
-- `data-extra` (String)
+-   `data-plc` (String, non-empty)
+-   `data-sz` (String, non-empty)
+-   `data-extra` (String)
diff --git a/ads/vendors/smi2.js b/ads/vendors/smi2.js
new file mode 100644
index 0000000000000..8326dc74c1e8c
--- /dev/null
+++ b/ads/vendors/smi2.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function smi2(global, data) {
+  validateData(data, ['blockid']);
+  global._smi2 = global._smi2 || {
+    viewId: global.context.pageViewId,
+    blockId: data['blockid'],
+    htmlURL: data['canonical'] || global.context.canonicalUrl,
+    ampURL: data['ampurl'] || global.context.sourceUrl,
+    testMode: data['testmode'] || 'false',
+    referrer: data['referrer'] || global.context.referrer,
+    hostname: global.window.context.location.hostname,
+    clientId: window.context.clientId,
+    domFingerprint: window.context.domFingerprint,
+    location: window.context.location,
+    startTime: window.context.startTime,
+  };
+  global._smi2.AMPCallbacks = {
+    renderStart: global.context.renderStart,
+    noContentAvailable: global.context.noContentAvailable,
+  };
+  // load the smi2  AMP JS file script asynchronously
+  const rand = Math.round(Math.random() * 100000000);
+  loadScript(
+    global,
+    'https://amp.smi2.ru/ampclient/ampfecth.js?rand=' + rand,
+    () => {},
+    global.context.noContentAvailable
+  );
+}
diff --git a/ads/smi2.md b/ads/vendors/smi2.md
similarity index 94%
rename from ads/smi2.md
rename to ads/vendors/smi2.md
index 0d598563221f7..c7151529da808 100644
--- a/ads/smi2.md
+++ b/ads/vendors/smi2.md
@@ -30,5 +30,5 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `data-blockid` - insert your block_id
-- `height`
+-   `data-blockid` - insert your block_id
+-   `height`
diff --git a/ads/vendors/smilewanted.js b/ads/vendors/smilewanted.js
new file mode 100644
index 0000000000000..f33ff633ef65a
--- /dev/null
+++ b/ads/vendors/smilewanted.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function smilewanted(global, data) {
+  // For more flexibility, we construct the call to SmileWanted's URL in the external loader, based on the data received from the AMP tag.
+  global.smilewantedConfig = data;
+  loadScript(global, 'https://prebid.smilewanted.com/amp/amp.js');
+}
diff --git a/ads/smilewanted.md b/ads/vendors/smilewanted.md
similarity index 100%
rename from ads/smilewanted.md
rename to ads/vendors/smilewanted.md
diff --git a/ads/vendors/sogouad.js b/ads/vendors/sogouad.js
new file mode 100644
index 0000000000000..1ab3f5c9b3da0
--- /dev/null
+++ b/ads/vendors/sogouad.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function sogouad(global, data) {
+  validateData(data, ['slot', 'w', 'h'], ['responsive']);
+  const slot = global.document.getElementById('c');
+  const ad = global.document.createElement('div');
+  const sogouUn = 'sogou_un';
+  global[sogouUn] = window[sogouUn] || [];
+  if (data.w === '100%') {
+    global[sogouUn].push({
+      id: data.slot,
+      ele: ad,
+    });
+  } else {
+    global[sogouUn].push({
+      id: data.slot,
+      ele: ad,
+      w: data.w,
+      h: data.h,
+    });
+  }
+  slot.appendChild(ad);
+  loadScript(global, 'https://theta.sogoucdn.com/wap/js/aw.js');
+}
diff --git a/ads/sogouad.md b/ads/vendors/sogouad.md
similarity index 82%
rename from ads/sogouad.md
rename to ads/vendors/sogouad.md
index 6d89e41630214..50db68fa2c3b4 100644
--- a/ads/sogouad.md
+++ b/ads/vendors/sogouad.md
@@ -49,12 +49,12 @@ For details on the configuration semantics, please contact the ad network or ref
 
 Responsive mode:
 
-- `data-slot`: slot id of Sogou ads
-- `data-w`: always be 20
-- `data-h`: slot's height info from Sogou ads
+-   `data-slot`: slot id of Sogou ads
+-   `data-w`: always be 20
+-   `data-h`: slot's height info from Sogou ads
 
 Fixed-height mode:
 
-- `data-slot`: slot id of Sogou ads
-- `data-w`: always be 100%
-- `data-h` slot's height info from Sogou ads
+-   `data-slot`: slot id of Sogou ads
+-   `data-w`: always be 100%
+-   `data-h` slot's height info from Sogou ads
diff --git a/ads/vendors/sona.js b/ads/vendors/sona.js
new file mode 100644
index 0000000000000..b692f12679cba
--- /dev/null
+++ b/ads/vendors/sona.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+import {parseJson} from '../../src/core/types/object/json';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function sona(global, data) {
+  validateData(data, ['config'], ['responsive']);
+
+  // Additional validation
+  const dataConfig = data['config'];
+  const adConfig = parseJson(dataConfig);
+
+  // Add configuration
+  const configScript = global.document.createElement('SCRIPT');
+  const config = global.document.createTextNode(
+    '(sona = window.sona || ' + JSON.stringify(adConfig) + ')'
+  );
+  configScript.appendChild(config);
+
+  // Set up amp-ad
+  const slot = global.document.getElementById('c');
+  const ad = global.document.createElement('SONA-WIDGET');
+  ad.setAttribute('auto-responsive', '');
+  ad.className = 'ad-tag';
+
+  // setup ad from sona
+  slot.appendChild(ad);
+  slot.appendChild(configScript);
+
+  // Initialise sona widget and get Image/Video
+  const scriptUrl = 'https://cdn.sonaserve.com/v1.1/dist.js';
+  loadScript(global, scriptUrl);
+}
diff --git a/ads/vendors/sona.md b/ads/vendors/sona.md
new file mode 100644
index 0000000000000..982eed75a3b68
--- /dev/null
+++ b/ads/vendors/sona.md
@@ -0,0 +1,39 @@
+<!---
+Copyright 2020 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.
+-->
+
+# Sona
+
+## Examples
+
+```html
+<amp-ad
+  width="468"
+  height="60"
+  type="sona"
+  data-json="{clientId: 'your-client-id', options: {}}"
+>
+</amp-ad>
+```
+
+## Configuration
+
+Access your sona poral. After creating or updating the client, copy the snippet given an paste into your amp page.
+
+### Required parameters
+
+-   `data-json`: sona configuration in JSON format
+-   `width` + `height`: Required for all `<amp-ad>` units. Specifies the ad size.
+-   `type`: set to "sona"
diff --git a/ads/vendors/sortable.js b/ads/vendors/sortable.js
new file mode 100644
index 0000000000000..8b901e0693992
--- /dev/null
+++ b/ads/vendors/sortable.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function sortable(global, data) {
+  validateData(data, ['site', 'name'], ['responsive']);
+
+  const slot = global.document.getElementById('c');
+  const ad = global.document.createElement('div');
+  const size =
+    data.responsive === 'true' ? 'auto' : data.width + 'x' + data.height;
+  ad.className = 'ad-tag';
+  ad.setAttribute('data-ad-name', data.name);
+  ad.setAttribute('data-ad-size', size);
+  slot.appendChild(ad);
+  loadScript(
+    global,
+    'https://tags-cdn.deployads.com/a/' + encodeURIComponent(data.site) + '.js'
+  );
+}
diff --git a/ads/sortable.md b/ads/vendors/sortable.md
similarity index 79%
rename from ads/sortable.md
rename to ads/vendors/sortable.md
index 13465f90b7088..d6eb418e4ccc5 100644
--- a/ads/sortable.md
+++ b/ads/vendors/sortable.md
@@ -55,11 +55,11 @@ No explicit configuration is needed for a given sortable amp-ad, though each sit
 
 ### Required parameters
 
-- `data-name`: The name of the ad unit.
-- `data-site`: The site/domain this ad will be served on (effectively an account id)
-- `width` + `height`: Required for all `<amp-ad>` units. Specifies the ad size.
-- `type`: Always set to "sortable"
+-   `data-name`: The name of the ad unit.
+-   `data-site`: The site/domain this ad will be served on (effectively an account id)
+-   `width` + `height`: Required for all `<amp-ad>` units. Specifies the ad size.
+-   `type`: Always set to "sortable"
 
 ### Optional parameters
 
-- `data-reponsive`: When set to true indicates that the ad slot has multiple potential sizes.
+-   `data-reponsive`: When set to true indicates that the ad slot has multiple potential sizes.
diff --git a/ads/vendors/sovrn.js b/ads/vendors/sovrn.js
new file mode 100644
index 0000000000000..a77c63ad4964b
--- /dev/null
+++ b/ads/vendors/sovrn.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2016 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.
+ */
+/*
+ *********
+ * Existing sovrn customers feel free to contact amp-implementations@sovrn.com
+ * for assistance with setting up your amp-ad tagid New customers please see
+ * www.sovrn.com to sign up and get started!
+ *********
+ */
+import {writeScript} from '../../3p/3p';
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function sovrn(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+  global.width = data.width;
+  global.height = data.height;
+  global.domain = data.domain;
+  global.u = data.u;
+  global.iid = data.iid;
+  global.aid = data.aid;
+  global.z = data.z;
+  global.tf = data.tf;
+  writeScript(global, 'https://ap.lijit.com/www/sovrn_amp/sovrn_ads.js');
+}
diff --git a/ads/sovrn.md b/ads/vendors/sovrn.md
similarity index 85%
rename from ads/sovrn.md
rename to ads/vendors/sovrn.md
index a732f1d745e62..5f0c5f49f84d7 100644
--- a/ads/sovrn.md
+++ b/ads/vendors/sovrn.md
@@ -48,11 +48,11 @@ For new customers, please see www.sovrn.com to sign up and get started!
 
 Supported parameters:
 
-- `data-width`
-- `data-height`
-- `data-domain`
-- `data-u`
-- `data-iid`
-- `data-aid`
-- `data-tf: A Boolean value used only for testing. Either remove it or set it to false for real world production work.
-- `data-z`
+-   `data-width`
+-   `data-height`
+-   `data-domain`
+-   `data-u`
+-   `data-iid`
+-   `data-aid`
+-   `data-tf: A Boolean value used only for testing. Either remove it or set it to false for real world production work.
+-   `data-z`
diff --git a/ads/vendors/speakol.js b/ads/vendors/speakol.js
new file mode 100644
index 0000000000000..21b0dac810b83
--- /dev/null
+++ b/ads/vendors/speakol.js
@@ -0,0 +1,40 @@
+/* eslint-disable require-jsdoc */
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+
+export function speakol(global, data) {
+  validateData(data, ['widgetid']);
+
+  (global.spksdk = global.spksdk || []).push({
+    // eslint-disable-next-line google-camelcase/google-camelcase
+    widget_id: `wi-${data['widgetid']}`,
+    element: `wi-${data['widgetid']}`,
+  });
+  const d = global.document.createElement('div');
+  d.classList.add('speakol-widget');
+  d.id = 'wi-' + data['widgetid'];
+
+  global.document.getElementById('c').appendChild(d);
+
+  loadScript(global, 'https://cdn.speakol.com/widget/js/speakol-widget-v2.js');
+}
diff --git a/ads/speakol.md b/ads/vendors/speakol.md
similarity index 95%
rename from ads/speakol.md
rename to ads/vendors/speakol.md
index 712d5c7e9eaa6..db9f891ae43ba 100644
--- a/ads/speakol.md
+++ b/ads/vendors/speakol.md
@@ -35,4 +35,4 @@ For configuration details and to generate your tags, please refer to [your publi
 
 parameters:
 
-- `data-widgetid`: widget id. Required.
+-   `data-widgetid`: widget id. Required.
diff --git a/ads/vendors/spotx.js b/ads/vendors/spotx.js
new file mode 100644
index 0000000000000..9c1ce2a105875
--- /dev/null
+++ b/ads/vendors/spotx.js
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {hasOwn} from '../../src/core/types/object';
+import {validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function spotx(global, data) {
+  // ensure we have valid channel id
+  validateData(data, ['spotx_channel_id', 'width', 'height']);
+
+  // Because 3p's loadScript does not allow for data attributes,
+  // we will write the JS tag ourselves.
+  const script = global.document.createElement('script');
+
+  data['spotx_content_width'] = data.spotx_content_width || data.width;
+  data['spotx_content_height'] = data.spotx_content_height || data.height;
+  data['spotx_content_page_url'] =
+    global.context.location.href || global.context.sourceUrl;
+
+  // Add data-* attribute for each data value passed in.
+  for (const key in data) {
+    if (hasOwn(data, key) && key.startsWith('spotx_')) {
+      script.setAttribute(`data-${key}`, data[key]);
+    }
+  }
+
+  global['spotx_ad_done_function'] = function (spotxAdFound) {
+    if (!spotxAdFound) {
+      global.context.noContentAvailable();
+    }
+  };
+
+  // TODO(KenneyE): Implement AdLoaded callback in script to accurately trigger
+  // renderStart()
+  script.onload = global.context.renderStart;
+
+  script.src = `//js.spotx.tv/easi/v1/${data['spotx_channel_id']}.js`;
+  global.document.body.appendChild(script);
+}
diff --git a/ads/spotx.md b/ads/vendors/spotx.md
similarity index 96%
rename from ads/spotx.md
rename to ads/vendors/spotx.md
index 9f58adb0b3607..3cef336af9766 100644
--- a/ads/spotx.md
+++ b/ads/vendors/spotx.md
@@ -50,6 +50,6 @@ The SpotX `amp-ad` integration has many of the same capabilities and options as
 
 ### Required parameters
 
-- `data-spotx_channel_id`
-- `width`
-- `height`
+-   `data-spotx_channel_id`
+-   `width`
+-   `height`
diff --git a/ads/vendors/springAds.js b/ads/vendors/springAds.js
new file mode 100644
index 0000000000000..500e8382595d3
--- /dev/null
+++ b/ads/vendors/springAds.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {computeInMasterFrame, loadScript} from '../../3p/3p';
+import {parseJson} from '../../src/core/types/object/json';
+
+/**
+ * @param context
+ */
+
+const initSlotList = (context) => {
+  context.master.availableSlots = context.master.availableSlots || {};
+};
+
+const registerSlot = (slot) => {
+  context.master.availableSlots[slot.slotName] = slot;
+};
+
+// eslint-disable-next-line require-jsdoc
+export function springAds(global, data) {
+  computeInMasterFrame(
+    global,
+    'springAds',
+    () => {
+      initSlotList(context);
+    },
+    () => {}
+  );
+  if (data.adssetup) {
+    const adSSetup = parseJson(data.adssetup);
+    adSSetup['isAMP'] = !0;
+    adSSetup['availableSlots'] = context.master.availableSlots;
+    context.master.adSSetup = global.adSSetup = adSSetup;
+    const sitename = adSSetup['publisher'].match(/(.*)\..*/)[1];
+    loadScript(
+      global,
+      'https://www.asadcdn.com/adlib/pages/' + sitename + '_amp.js'
+    );
+  } else {
+    registerSlot({
+      global,
+      document,
+      context,
+      slotName: data['adslot'],
+    });
+    const adlib = window.ASCDP || context.master.ASCDP || '';
+    adlib && adlib.adS.renderAd(data.adslot);
+  }
+}
diff --git a/ads/vendors/springAds.md b/ads/vendors/springAds.md
new file mode 100644
index 0000000000000..546cd1b832f66
--- /dev/null
+++ b/ads/vendors/springAds.md
@@ -0,0 +1,64 @@
+<!---
+Copyright 2015 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.
+-->
+
+# Spring AdTechnology AmpAd Integration
+
+## Example
+
+```html
+<amp-ad
+  height="fluid"
+  type="springAds"
+  data-adssetup='{
+    "view": "amp",
+    "partners": true,
+    "adPlacements": ["banner","mrec"],
+    "adSlotSizes": {
+      "banner": [{
+        "minWidth": 1,
+        "sizes": [[320, 50]]
+      }],
+      "mrec": [{
+        "minWidth": 1,
+        "sizes": [[300, 250], [300, 300], [250, 250], [320, 160], [300, 150], [320, 50], [320, 75], [320, 80], [320, 100], [300, 100], [300, 50], [300, 75]]
+      }]
+    },
+    "pageName": "demo_story",
+    "publisher": "adtechnology.axelspringer.com",
+    "target": "singleAds;multiAds;you;me;team=adtech,MIT;"
+  }'
+>
+</amp-ad>
+<amp-ad width="320" height="50" type="springAds" data-adslot="banner"></amp-ad>
+<amp-ad
+  width="100vW"
+  height="fluid"
+  type="springAds"
+  data-adslot="mrec"
+></amp-ad>
+```
+
+For a maintenanced uptodate documentation please refer to our
+[official springAds document](https://github.com/spring-media/adsolutions-implementationReference/blob/master/publisher-amp-reference.md)
+
+## Configuration
+
+for further information regarding this implementation, please contact adtechnology@axelspringer.de
+
+## Optional features
+
+-   Loading placeholder for ads, see [Placeholders in amp-ad](https://amp.dev/documentation/components/amp-ad#placeholder).
+-   No ad fallback for ads, see [No ad in amp-ad](https://amp.dev/documentation/components/amp-ad#no-ad-available).
diff --git a/ads/vendors/ssp.js b/ads/vendors/ssp.js
new file mode 100644
index 0000000000000..0a249b69984af
--- /dev/null
+++ b/ads/vendors/ssp.js
@@ -0,0 +1,237 @@
+/**
+ * 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.
+ */
+
+import {computeInMasterFrame, loadScript, validateData} from '../../3p/3p';
+import {parseJson} from '../../src/core/types/object/json';
+import {setStyle, setStyles} from '../../src/style';
+
+/*
+ * How to develop:
+ * https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md
+ */
+
+/**
+ * @param {!Array.<!Object>} array
+ * @param {!Function} iteratee
+ *
+ * @return {Object}
+ */
+export function keyBy(array, iteratee) {
+  return array.reduce(
+    (itemById, item) => Object.assign(itemById, {[iteratee(item)]: item}),
+    {}
+  );
+}
+
+/**
+ * @param {!Object} fetchingSSPs
+ * @param {!Function} cb
+ */
+export function runWhenFetchingSettled(fetchingSSPs, cb) {
+  const sspCleanupInterval = setInterval(() => {
+    if (!Object.keys(fetchingSSPs).length) {
+      clearInterval(sspCleanupInterval);
+      cb();
+    }
+  }, 100);
+}
+
+/**
+ * @param {!Element} element
+ * @param {boolean} center
+ * @param {Object} dimensions
+ */
+export function handlePosition(element, center, dimensions) {
+  const styles = {
+    ...(center
+      ? {
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          'max-width': '100%',
+          transform: 'translate(-50%, -50%)',
+          '-ms-transform': 'translate(-50%, -50%)',
+        }
+      : {}),
+    ...(dimensions || {}),
+  };
+  setStyles(element, styles);
+}
+
+/**
+ * @param {!MessageEvent} e
+ * @param {!Element} element
+ */
+export function handlePositionResponsive(e, element) {
+  try {
+    const {height} = JSON.parse(e.data);
+    if (height) {
+      handlePosition(element, true, {
+        height: `${height}px`,
+      });
+    }
+  } catch (e) {
+    // no-op
+  }
+}
+
+/**
+ * @param {number} availableWidth
+ * @param {!Object} data
+ * @return {?Object}
+ */
+export function sizeAgainstWindow(availableWidth, data) {
+  if (data.width > availableWidth) {
+    const newWidth = availableWidth;
+    const newHeight = data.height / (data.width / availableWidth);
+    return {width: newWidth, height: newHeight};
+  }
+}
+
+/**
+ * @param {!Element} element
+ */
+export function forceElementReflow(element) {
+  // force reflow
+  setStyle(element, 'display', 'none');
+  element./*OK*/ offsetHeight;
+  setStyle(element, 'display', 'block');
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function ssp(global, data) {
+  // validate AMP input data- attributes
+  validateData(data, ['position'], ['site']);
+
+  let position = {id: -1};
+
+  try {
+    position = parseJson(data.position);
+
+    if (position['id'] === undefined) {
+      position = {id: -1};
+    }
+  } catch (error) {
+    global.context.noContentAvailable();
+    return;
+  }
+
+  if (position['id'] === -1) {
+    global.context.noContentAvailable();
+    return;
+  }
+
+  // This is super important. Without this any variables on context are not shared
+  const mW = global.context.isMaster ? global : global.context.master;
+
+  // create parent element
+  const parentElement = document.createElement('div');
+
+  parentElement.id = position['id'];
+
+  // https://github.com/ampproject/amphtml/tree/main/ads#the-iframe-sandbox
+  global.document.getElementById('c').appendChild(parentElement);
+
+  // validate dimensions against available space (window)
+  const sizing = sizeAgainstWindow(parentElement./*OK*/ clientWidth, data);
+
+  // https://github.com/ampproject/amphtml/blob/main/3p/3p.js#L186
+  computeInMasterFrame(
+    global,
+    'ssp-load',
+    (done) => {
+      loadScript(global, 'https://ssp.imedia.cz/static/js/ssp.js', () => {
+        // This callback is run just once for amp-ad with same type
+        // Script will inject "sssp" object on Window
+        if (!global['sssp']) {
+          done(false);
+          return;
+        }
+
+        /** @type {{config: Function, getAds: Function, writeAd: Function}} */
+        const sssp = global['sssp'];
+
+        sssp.config({
+          site: data.site || global.context.canonicalUrl,
+        });
+
+        // propagate relevant data across all ad units
+        mW.sssp = sssp;
+        mW.fetchingSSPs = {};
+
+        done(true);
+      });
+    },
+    (loaded) => {
+      if (!loaded) {
+        global.context.noContentAvailable();
+        return;
+      }
+
+      // perform cleanup only after all SSP XHRs are settled
+      const noContent = () => {
+        runWhenFetchingSettled(mW.fetchingSSPs, () =>
+          global.context.noContentAvailable()
+        );
+      };
+
+      // register XHR and start fetching
+      mW.fetchingSSPs[position.zoneId] = true;
+
+      mW.sssp.getAds([position], {
+        // todo on SSP side (option to register error callback)
+        // requestErrorCallback: () => {},
+        AMPcallback: (ads) => {
+          /** @suppress {checkTypes} */
+          const adById = keyBy(ads, (item) => item.id);
+          const ad = adById[position['id']];
+
+          if (!ad || ['error', 'empty'].includes(ad.type)) {
+            noContent();
+          } else {
+            // listen to message with "height" property -> for responsive ads (111x111) -> set new height / center
+            if (ad.responsive) {
+              global.addEventListener('message', (e) => {
+                handlePositionResponsive(e, parentElement);
+              });
+            }
+
+            // listen to intersections and force element reflow (external DSPs)
+            if (['APPNEXUS', 'PUBMATIC'].includes(ad.dsp)) {
+              global.context.observeIntersection(() => {
+                forceElementReflow(parentElement);
+              });
+            }
+
+            // SSP need parentElement as value in "position.id"
+            mW.sssp.writeAd(ad, {...position, id: parentElement});
+
+            // init dimensions / centering
+            const d = ad.responsive ? {width: '100%', height: '100%'} : null;
+            handlePosition(parentElement, true, d);
+            global.context.renderStart(sizing);
+          }
+
+          // unregister XHR
+          delete mW.fetchingSSPs[position.zoneId];
+        },
+      });
+    }
+  );
+}
diff --git a/ads/ssp.md b/ads/vendors/ssp.md
similarity index 82%
rename from ads/ssp.md
rename to ads/vendors/ssp.md
index 47ebcfd38cb69..9184e04e1374d 100644
--- a/ads/ssp.md
+++ b/ads/vendors/ssp.md
@@ -61,10 +61,10 @@ Required parameters:
 
 ### `data-position`
 
-- Object must have required keys `id`, `width`, `height`, `zoneId` (Watch out for uppercase "I" in "id").
-- Every position MUST have unique `id`, if you duplicate some id, Ad may be used from another position.
-- Attributes `width` and `height` are from AMP specification, and they will set fixed border around Ad.
-- Attributes `data-width` and `data-height` are used to fetch SSP Ads on the server (They can different).
+-   Object must have required keys `id`, `width`, `height`, `zoneId` (Watch out for uppercase "I" in "id").
+-   Every position MUST have unique `id`, if you duplicate some id, Ad may be used from another position.
+-   Attributes `width` and `height` are from AMP specification, and they will set fixed border around Ad.
+-   Attributes `data-width` and `data-height` are used to fetch SSP Ads on the server (They can different).
 
 ## Contact
 
diff --git a/ads/vendors/strossle.js b/ads/vendors/strossle.js
new file mode 100644
index 0000000000000..520713ea366aa
--- /dev/null
+++ b/ads/vendors/strossle.js
@@ -0,0 +1,48 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+const renderTo = 'strossle-widget';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function strossle(global, data) {
+  validateData(data, ['widgetid']);
+  global._strossle = global._strossle || {
+    widgetId: data['widgetid'],
+  };
+
+  createContainer(global, data);
+  loadScript(
+    global,
+    'https://widgets.sprinklecontent.com/v2/sprinkle.js',
+    () => {}
+  );
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function createContainer(global, data) {
+  const d = global.document.createElement('div');
+  d.className = renderTo;
+  d.setAttribute('data-spklw-widget', data['widgetid']);
+  global.document.getElementById('c').appendChild(d);
+}
diff --git a/ads/strossle.md b/ads/vendors/strossle.md
similarity index 93%
rename from ads/strossle.md
rename to ads/vendors/strossle.md
index 75b8da9cb2d42..d2a1f030a58bc 100644
--- a/ads/strossle.md
+++ b/ads/vendors/strossle.md
@@ -31,5 +31,5 @@ For details on the configuration semantics, please contact [Strossle](https://st
 
 ### Required parameters
 
-- `data-widgetid` - past your unique widget id here
-- `height` - widget height
+-   `data-widgetid` - past your unique widget id here
+-   `height` - widget height
diff --git a/ads/vendors/sulvo.js b/ads/vendors/sulvo.js
new file mode 100644
index 0000000000000..8e3492d8f7f9c
--- /dev/null
+++ b/ads/vendors/sulvo.js
@@ -0,0 +1,25 @@
+/**
+ * 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.
+ */
+import {loadScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function sulvo(global, data) {
+  global.sulvoAmpAdData = data;
+  loadScript(global, 'https://live.demand.supply/up.amp.js');
+}
diff --git a/ads/sulvo.md b/ads/vendors/sulvo.md
similarity index 96%
rename from ads/sulvo.md
rename to ads/vendors/sulvo.md
index adbc048e94714..cabaa549f803a 100644
--- a/ads/sulvo.md
+++ b/ads/vendors/sulvo.md
@@ -49,4 +49,4 @@ For further information, please contact [Sulvo](https://sulvo.com/).
 
 ### Required parameters
 
-- `data-ad`: Ad ID provided by Sulvo.
+-   `data-ad`: Ad ID provided by Sulvo.
diff --git a/ads/vendors/sunmedia.js b/ads/vendors/sunmedia.js
new file mode 100644
index 0000000000000..682826f4afa4c
--- /dev/null
+++ b/ads/vendors/sunmedia.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function sunmedia(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+  global._sunmedia_amp = {
+    allowed_data: ['cskp', 'crst', 'cdb', 'cid'],
+    mandatory_data: ['cid'],
+    data,
+  };
+
+  validateData(
+    data,
+    global._sunmedia_amp.mandatory_data,
+    global._sunmedia_amp.allowed_data
+  );
+
+  loadScript(
+    global,
+    'https://vod.addevweb.com/sunmedia/amp/ads/SMIntextAMP.js'
+  );
+}
diff --git a/ads/sunmedia.md b/ads/vendors/sunmedia.md
similarity index 86%
rename from ads/sunmedia.md
rename to ads/vendors/sunmedia.md
index b693debcf1673..41b2953263be8 100644
--- a/ads/sunmedia.md
+++ b/ads/vendors/sunmedia.md
@@ -37,9 +37,9 @@ For further information, please contact [SunMedia](http://sunmedia.tv/#contact).
 
 ### Required parameters
 
-- `data-cid`: Client ID provided by SunMedia
+-   `data-cid`: Client ID provided by SunMedia
 
 ### Optional parameters
 
-- `data-cskp`: Indicates skip button enabled
-- `data-crst`: Indicates restart option enabled
+-   `data-cskp`: Indicates skip button enabled
+-   `data-crst`: Indicates restart option enabled
diff --git a/ads/vendors/svknative.js b/ads/vendors/svknative.js
new file mode 100644
index 0000000000000..8e988a2f9c912
--- /dev/null
+++ b/ads/vendors/svknative.js
@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function svknative(global, data) {
+  // ensure we have valid widgetid value
+  validateData(data, ['widgetid']);
+
+  const s = global.document.createElement('script');
+  const scriptKey =
+    'svknativeampwidget_' + Math.floor(Math.random() * 10000000);
+
+  s.setAttribute('data-key', scriptKey);
+  global.document.getElementById('c').appendChild(s);
+
+  (function (w, a) {
+    (w[a] = w[a] || []).push({
+      'script_key': scriptKey,
+      'settings': {
+        'w': data['widgetid'],
+        'amp': true,
+      },
+    });
+  })(global, '_svk_n_widgets');
+
+  // load the SVK Native AMP JS file
+  loadScript(global, 'https://widget.svk-native.ru/js/embed.js');
+}
diff --git a/ads/svknative.md b/ads/vendors/svknative.md
similarity index 95%
rename from ads/svknative.md
rename to ads/vendors/svknative.md
index 458502c38ccf5..99c6357dc6d4b 100644
--- a/ads/svknative.md
+++ b/ads/vendors/svknative.md
@@ -34,4 +34,4 @@ For details on the configuration semantics, please contact your SVK Native perso
 
 ### Required parameters
 
-- `data-widgetid` - insert your WidgetId
+-   `data-widgetid` - insert your WidgetId
diff --git a/ads/vendors/swoop.js b/ads/vendors/swoop.js
new file mode 100644
index 0000000000000..1c89b293cfbb0
--- /dev/null
+++ b/ads/vendors/swoop.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {computeInMasterFrame, loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function swoop(global, data) {
+  // Required properties
+  validateData(data, ['layout', 'placement', 'publisher', 'slot']);
+
+  computeInMasterFrame(
+    global,
+    'swoop-load',
+    (done) => {
+      global.swoopIabConfig = data;
+
+      loadScript(global, 'https://www.swoop-amp.com/amp.js', () =>
+        done(global.Swoop != null)
+      );
+    },
+    (success) => {
+      if (success) {
+        if (!global.context.isMaster) {
+          global.context.master.Swoop.announcePlace(global, data);
+        }
+      } else {
+        global.context.noContentAvailable();
+        throw new Error('Swoop failed to load');
+      }
+    }
+  );
+}
diff --git a/ads/swoop.md b/ads/vendors/swoop.md
similarity index 85%
rename from ads/swoop.md
rename to ads/vendors/swoop.md
index c52c1df0a51b3..54fe3e6c113a5 100644
--- a/ads/swoop.md
+++ b/ads/vendors/swoop.md
@@ -40,7 +40,7 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Required parameters
 
-- `layout`: AMP layout style, should match the `layout` attribute of the `amp-ad` tag
-- `publisher`: Publisher ID
-- `placement`: Placement type
-- `slot`: Slot ID
+-   `layout`: AMP layout style, should match the `layout` attribute of the `amp-ad` tag
+-   `publisher`: Publisher ID
+-   `placement`: Placement type
+-   `slot`: Slot ID
diff --git a/ads/vendors/taboola.js b/ads/vendors/taboola.js
new file mode 100644
index 0000000000000..f5cf545a05be9
--- /dev/null
+++ b/ads/vendors/taboola.js
@@ -0,0 +1,84 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function taboola(global, data) {
+  // do not copy the following attributes from the 'data' object
+  // to _tablloa global object
+  const denylist = ['height', 'type', 'width', 'placement', 'mode'];
+
+  // ensure we have vlid publisher, placement and mode
+  // and exactly one page-type
+  validateData(data, [
+    'publisher',
+    'placement',
+    'mode',
+    ['article', 'video', 'photo', 'search', 'category', 'homepage', 'other'],
+  ]);
+
+  // setup default values for referrer and url
+  const params = {
+    referrer: data.referrer || global.context.referrer,
+    url: data.url || global.context.canonicalUrl,
+  };
+
+  // copy none denylisted attribute to the 'params' map
+  Object.keys(data).forEach((k) => {
+    if (denylist.indexOf(k) === -1) {
+      params[k] = data[k];
+    }
+  });
+
+  // push the two object into the '_taboola' global
+  (global._taboola = global._taboola || []).push([
+    {
+      viewId: global.context.pageViewId,
+      publisher: data.publisher,
+      placement: data.placement,
+      mode: data.mode,
+      framework: 'amp',
+      container: 'c',
+    },
+    params,
+    {flush: true},
+  ]);
+
+  // install observation on entering/leaving the view
+  global.context.observeIntersection(function (changes) {
+    /** @type {!Array} */ (changes).forEach(function (c) {
+      if (c.intersectionRect.height) {
+        global._taboola.push({
+          visible: true,
+          rects: c,
+          placement: data.placement,
+        });
+      }
+    });
+  });
+
+  // load the taboola loader asynchronously
+  loadScript(
+    global,
+    `https://cdn.taboola.com/libtrc/${encodeURIComponent(
+      data.publisher
+    )}/loader.js`
+  );
+}
diff --git a/ads/taboola.md b/ads/vendors/taboola.md
similarity index 84%
rename from ads/taboola.md
rename to ads/vendors/taboola.md
index a212b40fd0a1d..715a1825d6733 100644
--- a/ads/taboola.md
+++ b/ads/vendors/taboola.md
@@ -41,14 +41,14 @@ For details on the configuration semantics, please contact the ad network or ref
 
 Supported parameters:
 
-- `data-publisher`
-- `data-placement`
-- `data-mode`
-- `data-article`
-- `data-video`
-- `data-photo`
-- `data-home`
-- `data-category`
-- `data-others`
-- `data-url`
-- `data-referrer`
+-   `data-publisher`
+-   `data-placement`
+-   `data-mode`
+-   `data-article`
+-   `data-video`
+-   `data-photo`
+-   `data-home`
+-   `data-category`
+-   `data-others`
+-   `data-url`
+-   `data-referrer`
diff --git a/ads/vendors/tcsemotion.js b/ads/vendors/tcsemotion.js
new file mode 100644
index 0000000000000..6879718f71314
--- /dev/null
+++ b/ads/vendors/tcsemotion.js
@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+import {validateData, writeScript} from '../../3p/3p';
+/**
+ * @param {!Window} global
+ * @param {!Object} d
+ */
+export function tcsemotion(global, d) {
+  validateData(d, ['zone', 'delhost']);
+  global.djaxData = d;
+  if (d.hb && d.hb == 'true') {
+    global.djaxData.hb = true;
+  } else {
+    global.djaxData.hb = false;
+  }
+  writeScript(global, 'https://ads.tcsemotion.com/www/delivery/amphb.js');
+}
diff --git a/ads/vendors/tcsemotion.md b/ads/vendors/tcsemotion.md
new file mode 100644
index 0000000000000..9d1930de9b7c2
--- /dev/null
+++ b/ads/vendors/tcsemotion.md
@@ -0,0 +1,29 @@
+# TcsEmotion
+
+## Example
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="tcsemotion"
+  data-hb="false"
+  data-zone="1"
+  data-delhost="https://hb.tcsemotion.com/www/delivery/amphb.php"
+>
+</amp-ad>
+```
+
+## Configuration
+
+Please refer to [Tcsemotion](https://tcsemotion.com/) for more
+information on how to get zone id and other details
+
+### Required parameters
+
+-   `data-zone`: the id of the zone provided by adserver
+-   `data-delhost`: target domain url
+
+### Optional parameters
+
+-   `data-hb`: enable this field to true when you are using header bidding
diff --git a/ads/vendors/teads.js b/ads/vendors/teads.js
new file mode 100644
index 0000000000000..1d1ede92b9e08
--- /dev/null
+++ b/ads/vendors/teads.js
@@ -0,0 +1,119 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function teads(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+  global._teads_amp = {
+    allowed_data: ['pid', 'tag'],
+    mandatory_data: ['pid'],
+    mandatory_tag_data: ['tta', 'ttp'],
+    data,
+  };
+
+  validateData(
+    data,
+    global._teads_amp.mandatory_data,
+    global._teads_amp.allowed_data
+  );
+
+  const QueryString = function () {
+    // This function is anonymous, is executed immediately and
+    // the return value is assigned to QueryString!
+    const query_string = {}
+    const a = document.createElement('a')
+    a.href = global.context.sourceUrl
+    const query = a.search.substring(1)
+    const vars = query.split("&")
+    for (var i = 0; i < vars.length; i++) {
+      const pair = vars[i].split("=")
+      // If first entry with this name
+      if (typeof query_string[pair[0]] === "undefined") {
+        query_string[pair[0]] = decodeURIComponent(pair[1])
+        // If second entry with this name
+      } else if (typeof query_string[pair[0]] === "string") {
+        const arr = [query_string[pair[0]], decodeURIComponent(pair[1])]
+        query_string[pair[0]] = arr
+        // If third or later entry with this name
+      } else {
+        query_string[pair[0]].push(decodeURIComponent(pair[1]))
+      }
+    }
+    return query_string
+  }()
+
+  if (
+    QueryString.js ||
+    QueryString.second_asset_url ||
+    QueryString.pid ||
+    QueryString.page ||
+    QueryString.content
+  ) {
+
+    if (QueryString.tracking) {
+      (global.teads || (global.teads = {})).TRACKING_URL = QueryString.tracking
+    }
+
+    // FOR-3052: Split teads-format into 2 assets
+    if (QueryString.second_asset_url) {
+      (global.teads || (global.teads = {})).FORMAT_WITH_PLAYER_URL = QueryString.second_asset_url
+    }
+
+    const ttag = () => {
+      global.teads
+      .ad(QueryString.pid || 47405, {
+        type: 'VastUrl',
+        content: QueryString.content || 'https://a.teads.tv/vast/preview/50221',
+        settings: {
+          values: {
+            pageId: QueryString.page || 42266,
+            placementId: QueryString.pid || 47405,
+            adType: QueryString.adtype || 'video'
+          },
+          components: {
+            progressBar: QueryString.pb || false
+          }
+        },
+        headerBiddingProvider: 'debugFormat'
+      })
+      .page(QueryString.page || 42266)
+      .placement(QueryString.pid || 47405, { format: 'inread', slot: { selector: 'body' } })
+      .serve()
+    }
+
+    loadScript(global, `//${QueryString.js || 's8t.teads.tv/media/format/v3/teads-format.min.js'}`, ttag)
+  } else if (data.tag) {
+    validateData(data.tag, global._teads_amp.mandatory_tag_data);
+    global._tta = data.tag.tta;
+    global._ttp = data.tag.ttp;
+
+    loadScript(
+      global,
+      'https://s8t.teads.tv/media/format/' +
+        encodeURI(data.tag.js || 'v3/teads-format.min.js')
+    );
+  } else {
+    loadScript(
+      global,
+      'https://a.teads.tv/page/' + encodeURIComponent(data.pid) + '/tag'
+    );
+  }
+}
diff --git a/ads/vendors/teads.md b/ads/vendors/teads.md
new file mode 100644
index 0000000000000..d335fdf95c9ec
--- /dev/null
+++ b/ads/vendors/teads.md
@@ -0,0 +1,47 @@
+<!---
+Copyright 2015 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.
+-->
+
+# Teads
+
+## Example
+
+```html
+<amp-ad
+  width="300"
+  height="1"
+  type="teads"
+  data-pid="42266"
+  layout="responsive"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For configuration semantics, please contact [Teads](http://teads.tv/fr/contact/).
+
+Supported parameters:
+
+-   `data-pid`
+
+## User Consent Integration
+
+When [user consent](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md#blocking-behaviors) is required, Teads ad approaches user consent in the following ways:
+
+-   `CONSENT_POLICY_STATE.SUFFICIENT`: Serve a personalized ad to the user.
+-   `CONSENT_POLICY_STATE.INSUFFICIENT`: Serve a non-personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED`: Serve a personalized ad to the user.
+-   `CONSENT_POLICY_STATE.UNKNOWN`: Serve a non-personalized ad to the user..
diff --git a/ads/vendors/temedya.js b/ads/vendors/temedya.js
new file mode 100644
index 0000000000000..4f8b803da3d07
--- /dev/null
+++ b/ads/vendors/temedya.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function temedya(global, data) {
+  validateData(data, ['widgetid']);
+  global._temedya = global._temedya || {
+    widgetId: data['widgetid'],
+  };
+  global._temedya.AMPCallbacks = {
+    renderStart: global.context.renderStart,
+    noContentAvailable: global.context.noContentAvailable,
+  };
+  // load the temedya  AMP JS file script asynchronously
+  loadScript(
+    global,
+    'https://widget.cdn.vidyome.com/builds/loader-amp.js',
+    () => {},
+    global.context.noContentAvailable
+  );
+}
diff --git a/ads/temedya.md b/ads/vendors/temedya.md
similarity index 96%
rename from ads/temedya.md
rename to ads/vendors/temedya.md
index c651ea0cd72a5..f41d8c0b1d3ee 100644
--- a/ads/temedya.md
+++ b/ads/vendors/temedya.md
@@ -35,4 +35,4 @@ limitations under the License.
 
 ### Required parameters
 
-- `data-widgetId`: Widget ID
+-   `data-widgetId`: Widget ID
diff --git a/ads/vendors/torimochi.js b/ads/vendors/torimochi.js
new file mode 100644
index 0000000000000..c57bf616d9af2
--- /dev/null
+++ b/ads/vendors/torimochi.js
@@ -0,0 +1,42 @@
+/**
+ * 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.
+ */
+
+import {parseJson} from '../../src/core/types/object/json';
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function torimochi(global, data) {
+  validateData(data, ['area', 'adtype']);
+
+  if (data.width < global.width) {
+    global.width = data.width;
+  }
+  global.height = data.height;
+  global.area = data['area'];
+  global.adtype = data['adtype'];
+  global.tcid = data['tcid'];
+  global.wid = data['wid'];
+  global.extra = parseJson(data['extra'] || '{}');
+  global.context.renderStart({width: global.width, height: global.height});
+
+  const url =
+    'https://asset.torimochi-ad.net/js/torimochi_ad_amp.min.js?v=' + Date.now();
+
+  writeScript(global, url);
+}
diff --git a/ads/torimochi.md b/ads/vendors/torimochi.md
similarity index 92%
rename from ads/torimochi.md
rename to ads/vendors/torimochi.md
index d189026014068..ace3227abd9ee 100644
--- a/ads/torimochi.md
+++ b/ads/vendors/torimochi.md
@@ -37,11 +37,11 @@ Supported parameters:
 
 ### Required parameters
 
-- `data-adtype`
-- `data-area`
-- `data-wid`
+-   `data-adtype`
+-   `data-area`
+-   `data-wid`
 
 ### Optional parameters
 
-- `data-tcid`
-- `data-extra`
+-   `data-tcid`
+-   `data-extra`
diff --git a/ads/vendors/tracdelight.js b/ads/vendors/tracdelight.js
new file mode 100644
index 0000000000000..28b053493b415
--- /dev/null
+++ b/ads/vendors/tracdelight.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function tracdelight(global, data) {
+  const mandatoryFields = ['widget_id', 'access_key'];
+  const optionalFields = ['mode'];
+
+  validateData(data, mandatoryFields, optionalFields);
+
+  global.tdData = data;
+  writeScript(global, 'https://scripts.tracdelight.io/amp.js');
+}
diff --git a/ads/tracdelight.md b/ads/vendors/tracdelight.md
similarity index 85%
rename from ads/tracdelight.md
rename to ads/vendors/tracdelight.md
index f23a976b8ef9a..04f9a55f01359 100644
--- a/ads/tracdelight.md
+++ b/ads/vendors/tracdelight.md
@@ -36,12 +36,12 @@ For semantics of configuration, please see [ad network documentation](http://doc
 
 Required parameters:
 
-- data-widget_id: the id of the widget
-- data-access_key: the access key
+-   data-widget_id: the id of the widget
+-   data-access_key: the access key
 
 Optional parameters
 
-- data-mode: how to embed the widget. Possible values are "iframe" or "inline" (default: "iframe")
+-   data-mode: how to embed the widget. Possible values are "iframe" or "inline" (default: "iframe")
 
 ## Support
 
diff --git a/ads/vendors/triplelift.js b/ads/vendors/triplelift.js
new file mode 100644
index 0000000000000..71fed4bf318cf
--- /dev/null
+++ b/ads/vendors/triplelift.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateSrcPrefix} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function triplelift(global, data) {
+  const {src} = data;
+  validateSrcPrefix('https://ib.3lift.com/', src);
+  loadScript(global, src);
+}
diff --git a/ads/triplelift.md b/ads/vendors/triplelift.md
similarity index 98%
rename from ads/triplelift.md
rename to ads/vendors/triplelift.md
index c12e76ea1659f..3fca1effce99a 100644
--- a/ads/triplelift.md
+++ b/ads/vendors/triplelift.md
@@ -37,4 +37,4 @@ For configuration semantics, please [contact TripleLift](http://triplelift.com).
 
 Supported parameters:
 
-- `src`
+-   `src`
diff --git a/ads/vendors/trugaze.js b/ads/vendors/trugaze.js
new file mode 100644
index 0000000000000..d2b9acf094e25
--- /dev/null
+++ b/ads/vendors/trugaze.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ */
+export function trugaze(global) {
+  // For simplicity and flexibility, all validations are performed in the
+  // Trugaze's URL based on the data received
+  loadScript(global, 'https://cdn.trugaze.io/amp-init-v1.js');
+}
diff --git a/ads/trugaze.md b/ads/vendors/trugaze.md
similarity index 100%
rename from ads/trugaze.md
rename to ads/vendors/trugaze.md
diff --git a/ads/vendors/uas.js b/ads/vendors/uas.js
new file mode 100644
index 0000000000000..4a32b859b7c0c
--- /dev/null
+++ b/ads/vendors/uas.js
@@ -0,0 +1,104 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {hasOwn} from '../../src/core/types/object';
+import {loadScript, validateData} from '../../3p/3p';
+import {setStyles} from '../../src/style';
+
+/**
+ * @param {!Object} theObject
+ * @param {!Function} callback
+ */
+function forEachOnObject(theObject, callback) {
+  if (typeof theObject === 'object' && theObject !== null) {
+    if (typeof callback === 'function') {
+      for (const key in theObject) {
+        if (hasOwn(theObject, key)) {
+          callback(key, theObject[key]);
+        }
+      }
+    }
+  }
+}
+
+/**
+ * @param {!Window} global
+ */
+function centerAd(global) {
+  const e = global.document.getElementById('c');
+  if (e) {
+    setStyles(e, {
+      top: '50%',
+      left: '50%',
+      bottom: '',
+      right: '',
+      transform: 'translate(-50%, -50%)',
+    });
+  }
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function uas(global, data) {
+  validateData(
+    data,
+    ['accId', 'adUnit', 'sizes'],
+    [
+      'locLat',
+      'locLon',
+      'locSrc',
+      'pageURL',
+      'targetings',
+      'extraParams',
+      'visibility',
+    ]
+  );
+  global.Phoenix = {EQ: []};
+  const uasDivId = 'uas-amp-slot';
+  global.document.write('<div id="' + uasDivId + '"></div>');
+  loadScript(global, 'https://ads.pubmatic.com/AdServer/js/phoenix.js', () => {
+    global.Phoenix.EQ.push(function () {
+      global.Phoenix.enableSingleRequestCallMode();
+      global.Phoenix.setInfo('AMP', 1); // Need to set the AMP flag
+      global.Phoenix.setInfo('ACCID', data.accId);
+      // Reading PAGEURL from sourceUrl or location.href
+      global.Phoenix.setInfo(
+        'PAGEURL',
+        global.context.sourceUrl || global.context.location.href
+      );
+      data.pageURL && global.Phoenix.setInfo('PAGEURL', data.pageURL);
+      data.locLat && global.Phoenix.setInfo('LAT', data.locLat);
+      data.locLon && global.Phoenix.setInfo('LON', data.locLon);
+      data.locSrc && global.Phoenix.setInfo('LOC_SRC', data.locSrc);
+      const slot = global.Phoenix.defineAdSlot(
+        data.adUnit,
+        data.sizes,
+        uasDivId
+      );
+      slot.setVisibility(1);
+      forEachOnObject(data.targetings, function (key, value) {
+        slot.setTargeting(key, value);
+      });
+      forEachOnObject(data.extraParams, function (key, value) {
+        slot.setExtraParameters(key, value);
+      });
+      global.Phoenix.display(uasDivId);
+    });
+  });
+  centerAd(global);
+}
diff --git a/ads/uas.md b/ads/vendors/uas.md
similarity index 80%
rename from ads/uas.md
rename to ads/vendors/uas.md
index 637cd7f7f680c..963629f96e729 100644
--- a/ads/uas.md
+++ b/ads/vendors/uas.md
@@ -73,19 +73,19 @@ For details on the configuration semantics, please contact the ad network or ref
 
 ### Supported parameters via `json` attribute
 
-- `accId` Account Id (mandatory)
-- `adUnit` AdUnitId (mandatory)
-- `sizes` Array of sizes (mandatory)
-- `locLat` Geo-location latitude
-- `locLon` Geo-location longitude
-- `locSrc` Geo-location source
-- `pageURL` Set custom page URL
-- `targetings` key-value pairs
-- `extraParams` key-value pairs to be passed to PubMatic SSP
+-   `accId` Account Id (mandatory)
+-   `adUnit` AdUnitId (mandatory)
+-   `sizes` Array of sizes (mandatory)
+-   `locLat` Geo-location latitude
+-   `locLon` Geo-location longitude
+-   `locSrc` Geo-location source
+-   `pageURL` Set custom page URL
+-   `targetings` key-value pairs
+-   `extraParams` key-value pairs to be passed to PubMatic SSP
 
 ### Unsupported Ad Formats
 
-- Interstitials
-- Expandables. Work is in progress
-- Flash
-- Creatives served over HTTP
+-   Interstitials
+-   Expandables. Work is in progress
+-   Flash
+-   Creatives served over HTTP
diff --git a/ads/vendors/ucfunnel.js b/ads/vendors/ucfunnel.js
new file mode 100644
index 0000000000000..dc8c523fa967a
--- /dev/null
+++ b/ads/vendors/ucfunnel.js
@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function ucfunnel(global, data) {
+  validateData(data, ['siteId']);
+  loadScript(window, 'https://ads.aralego.com/ampsdk');
+  window.context.renderStart();
+}
diff --git a/ads/ucfunnel.md b/ads/vendors/ucfunnel.md
similarity index 88%
rename from ads/ucfunnel.md
rename to ads/vendors/ucfunnel.md
index 778bbd14717fa..33bffe5725592 100644
--- a/ads/ucfunnel.md
+++ b/ads/vendors/ucfunnel.md
@@ -31,8 +31,8 @@ limitations under the License.
 
 ### Required Ad Parameters
 
-- `data-site-id` - unique publisher identifier, supplied by ucfunnel.
+-   `data-site-id` - unique publisher identifier, supplied by ucfunnel.
 
 ### Optional parameters
 
-- `data-schain` - supply chain info.
+-   `data-schain` - supply chain info.
diff --git a/ads/vendors/unruly.js b/ads/vendors/unruly.js
new file mode 100644
index 0000000000000..f5a45f9ab3ce5
--- /dev/null
+++ b/ads/vendors/unruly.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ * @param {!Function} [scriptLoader=loadScript]
+ */
+export function unruly(global, data, scriptLoader = loadScript) {
+  validateData(data, ['siteId']);
+
+  global.unruly = global.unruly || {};
+  global.unruly.native = {
+    siteId: data.siteId,
+  };
+
+  scriptLoader(global, 'https://video.unrulymedia.com/native/native-loader.js');
+}
diff --git a/ads/unruly.md b/ads/vendors/unruly.md
similarity index 91%
rename from ads/unruly.md
rename to ads/vendors/unruly.md
index bb0352711dbaf..1d25b3b59fb09 100644
--- a/ads/unruly.md
+++ b/ads/vendors/unruly.md
@@ -31,4 +31,4 @@ limitations under the License.
 
 ### Required Ad Parameters
 
-- `data-site-id` - unique publisher identifier, supplied by Unruly.
+-   `data-site-id` - unique publisher identifier, supplied by Unruly.
diff --git a/ads/vendors/uzou.js b/ads/vendors/uzou.js
new file mode 100644
index 0000000000000..b98a1f805efcc
--- /dev/null
+++ b/ads/vendors/uzou.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+import {parseJson} from '../../src/core/types/object/json';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function uzou(global, data) {
+  validateData(data, ['widgetParams'], []);
+
+  const prefixMap = {
+    test: 'dev-',
+    development: 'dev-',
+    staging: 'staging-',
+    production: '',
+  };
+
+  const widgetParams = parseJson(data['widgetParams']);
+  const akamaiHost = widgetParams['akamaiHost'] || 'speee-ad.akamaized.net';
+  const placementCode = widgetParams['placementCode'];
+  const mode = widgetParams['mode'] || 'production';
+  const entryPoint = `https://${prefixMap[mode]}${akamaiHost}/tag/${placementCode}/js/outer-frame.min.js`;
+
+  const d = global.document.createElement('div');
+  d.className = `uz-${placementCode} uz-ny`;
+
+  const container = global.document.getElementById('c');
+  container.appendChild(d);
+
+  const uzouInjector = {
+    url: fixedEncodeURIComponent(
+      widgetParams['url'] ||
+        global.context.canonicalUrl ||
+        global.context.sourceUrl
+    ),
+    referer: widgetParams['referer'] || global.context.referrer,
+  };
+  ['adServerHost', 'akamaiHost', 'iframeSrcPath'].forEach(function (elem) {
+    if (widgetParams[elem]) {
+      uzouInjector[elem] = widgetParams[elem];
+    }
+  });
+  global.UzouInjector = uzouInjector;
+
+  loadScript(global, entryPoint, () => {
+    global.context.renderStart();
+  });
+}
+
+/**
+ * encode URI based on RFC 3986
+ * @param {string} str url string
+ * @return {*} TODO(#23582): Specify return type
+ */
+function fixedEncodeURIComponent(str) {
+  return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
+    return '%' + c.charCodeAt(0).toString(16);
+  });
+}
diff --git a/ads/uzou.md b/ads/vendors/uzou.md
similarity index 94%
rename from ads/uzou.md
rename to ads/vendors/uzou.md
index 54cd441632381..d36d1af9350e8 100644
--- a/ads/uzou.md
+++ b/ads/vendors/uzou.md
@@ -38,5 +38,5 @@ For the widget design or configuration details, please contact your account mana
 
 Supported parameters:
 
-- widget-params
-  - JSON string including your placement code.
+-   widget-params
+    -   JSON string including your placement code.
diff --git a/ads/vendors/valuecommerce.js b/ads/vendors/valuecommerce.js
new file mode 100644
index 0000000000000..de2ae81693242
--- /dev/null
+++ b/ads/vendors/valuecommerce.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function valuecommerce(global, data) {
+  validateData(data, ['pid'], ['sid', 'vcptn', 'om']);
+  global.vcParam = data;
+  writeScript(global, 'https://amp.valuecommerce.com/amp_bridge.js');
+}
diff --git a/ads/valuecommerce.md b/ads/vendors/valuecommerce.md
similarity index 100%
rename from ads/valuecommerce.md
rename to ads/vendors/valuecommerce.md
diff --git a/ads/vendors/vdoai.js b/ads/vendors/vdoai.js
new file mode 100644
index 0000000000000..958cf196bc547
--- /dev/null
+++ b/ads/vendors/vdoai.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript} from '../../3p/3p';
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function vdoai(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+  global.vdo_ai_ = {
+    unitData: data['unitid'],
+    unitTagname: data['tagname'],
+  };
+  loadScript(global, 'https://a.vdo.ai/core/dependencies_amp/remote.js');
+}
diff --git a/ads/vdoai.md b/ads/vendors/vdoai.md
similarity index 95%
rename from ads/vdoai.md
rename to ads/vendors/vdoai.md
index 5c86b26792e75..5e3a981381c67 100644
--- a/ads/vdoai.md
+++ b/ads/vendors/vdoai.md
@@ -34,5 +34,5 @@ limitations under the License.
 
 Supported parameters:
 
-- `data-unitid`
-- `data-tagname`
+-   `data-unitid`
+-   `data-tagname`
diff --git a/ads/vendors/verizonmedia.js b/ads/vendors/verizonmedia.js
new file mode 100644
index 0000000000000..73fbba4c33db3
--- /dev/null
+++ b/ads/vendors/verizonmedia.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+/**
+ * @param {!Window} global
+ * @param {{config: string}} data
+ */
+export function verizonmedia(global, data) {
+  validateData(data, ['config']);
+  global.jacData = data;
+  writeScript(global, 'https://jac.yahoosandbox.com/amp/jac.js');
+}
diff --git a/ads/vendors/verizonmedia.md b/ads/vendors/verizonmedia.md
new file mode 100644
index 0000000000000..b02b685ba2fa3
--- /dev/null
+++ b/ads/vendors/verizonmedia.md
@@ -0,0 +1,57 @@
+<!---
+Copyright 2021 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.
+-->
+
+# VerizonMedia
+
+## Example
+
+```html
+<amp-ad
+  type="verizonmedia"
+  width="300"
+  height="250"
+  data-config='{"adServer":{"1AS":{"region":"US"}},
+    "positions":{"FB":{"alias":"1111111","sizes":["300x250"]}},
+    "site":{name:{"autoblogAMP"}},"spaceId":"111111"}'
+  data-stylesheet="https://www.autoblog.com/static/styles.css"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For semantics of configuration, please see ad network documentation.
+
+### Required Parameters:
+
+`data-config` - Config for ad call
+
+### Optional parameters:
+
+`data-stylesheet` - stylesheet to use inside iframe
+
+### Configuration Details
+
+Required
+"adServer":{"1AS":{region":"US"}},
+"positions":{"FB":{alias:"1111111"},"sizes":["300x250"]}},
+"site":{name:{"autoblogAMP"}},"spaceId":"111111"}
+
+Alias, Sizes, SiteName and spaceId should be replaced by correct values.
+NOTE: SiteName should be site name + "AMP"
+
+Optional
+"params":{"name":"value"}
diff --git a/ads/vendors/videointelligence.js b/ads/vendors/videointelligence.js
new file mode 100644
index 0000000000000..80d91ed91cba6
--- /dev/null
+++ b/ads/vendors/videointelligence.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function videointelligence(global, data) {
+  validateData(data, ['publisherId', 'channelId']);
+
+  loadScript(global, 'https://s.vi-serve.com/tagLoaderAmp.js');
+}
diff --git a/ads/videointelligence.md b/ads/vendors/videointelligence.md
similarity index 89%
rename from ads/videointelligence.md
rename to ads/vendors/videointelligence.md
index bf8ff6995c2f1..f138259498578 100644
--- a/ads/videointelligence.md
+++ b/ads/vendors/videointelligence.md
@@ -36,11 +36,11 @@ For configuration information, please check [docs.vi.ai/](https://docs.vi.ai/gen
 
 ### Required parameters
 
-- `data-publisher-id`
-- `data-channel-id`
+-   `data-publisher-id`
+-   `data-channel-id`
 
 ### Optional parameters
 
-- `data-placement-id`
-- `data-iab-category`
-- `data-language`
+-   `data-placement-id`
+-   `data-iab-category`
+-   `data-language`
diff --git a/ads/vendors/videonow.js b/ads/vendors/videonow.js
new file mode 100644
index 0000000000000..5e5a35d57f158
--- /dev/null
+++ b/ads/vendors/videonow.js
@@ -0,0 +1,85 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+import {parseJson} from '../../src/core/types/object/json';
+import {tryDecodeUriComponent} from '../../src/core/types/string/url';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function videonow(global, data) {
+  const mandatoryAttributes = ['pid'];
+  const optionalAttributes = ['kind', 'src'];
+
+  let customTag = '';
+  let logLevel = null;
+  let vnModule = '';
+
+  if (global && global.name) {
+    const p = parseJson(global.name);
+    if (
+      p &&
+      p['attributes'] &&
+      p['attributes']['_context'] &&
+      p['attributes']['_context']['location'] &&
+      p['attributes']['_context']['location']['href']
+    ) {
+      const {href} = p['attributes']['_context']['location'];
+      const logLevelParsed = /[?&]vn_debug\b(?:=(\d+))?/.exec(href);
+      const vnModuleParsed = /vn_module=([^&]*)/.exec(href);
+      const customTagParsed = /vn_init_module=([^&]*)/.exec(href);
+
+      logLevel = (logLevelParsed && logLevelParsed[1]) || null;
+      vnModule = (vnModuleParsed && vnModuleParsed[1]) || '';
+      customTag = (customTagParsed && customTagParsed[1]) || '';
+    }
+  }
+  validateData(data, mandatoryAttributes, optionalAttributes);
+
+  const profileId = data.pid || 1;
+
+  // production version by default
+  let script =
+    (customTag && tryDecodeUriComponent(customTag)) ||
+    (data.src && tryDecodeUriComponent(data.src)) ||
+    'https://cdn.videonow.ru/vn_init_module.js';
+
+  script = addParam(script, 'amp', 1);
+  script = addParam(script, 'profileId', profileId);
+  if (logLevel !== null) {
+    script = addParam(script, 'vn_debug', String(logLevel));
+  }
+  if (vnModule) {
+    script = addParam(script, 'vn_module', vnModule);
+  }
+
+  loadScript(global, script);
+}
+
+/**
+ * @param {string} script
+ * @param {string} name
+ * @param {string|number}value
+ * @return {string}
+ */
+function addParam(script, name, value) {
+  if (script.indexOf(name) < 0) {
+    script += (~script.indexOf('?') ? '&' : '?') + name + '=' + value;
+  }
+  return script;
+}
diff --git a/ads/videonow.md b/ads/vendors/videonow.md
similarity index 98%
rename from ads/videonow.md
rename to ads/vendors/videonow.md
index 015486c0a1fc3..a8b9db776b776 100644
--- a/ads/videonow.md
+++ b/ads/vendors/videonow.md
@@ -35,4 +35,4 @@ For semantics of configuration, please contact [Videonow](http://videonow.ru/htm
 
 Supported parameters:
 
-- `data-pid`
+-   `data-pid`
diff --git a/ads/vendors/viralize.js b/ads/vendors/viralize.js
new file mode 100644
index 0000000000000..22916466521ed
--- /dev/null
+++ b/ads/vendors/viralize.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {addParamsToUrl} from '../../src/url';
+import {loadScript, validateData} from '../../3p/3p';
+import {parseJson} from '../../src/core/types/object/json';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function viralize(global, data) {
+  const endpoint = 'https://ads.viralize.tv/display/';
+  const required = ['zid'];
+  const optional = ['extra'];
+
+  validateData(data, required, optional);
+
+  const defaultLocation = 'sel-#c>script';
+  const pubPlatform = 'amp';
+
+  const queryParams = parseJson(data.extra || '{}');
+  queryParams['zid'] = data.zid;
+  queryParams['pub_platform'] = pubPlatform;
+  if (!queryParams['location']) {
+    queryParams['location'] = defaultLocation;
+  }
+  if (!queryParams['u']) {
+    queryParams['u'] = global.context.sourceUrl;
+  }
+
+  const scriptUrl = addParamsToUrl(endpoint, queryParams);
+
+  loadScript(
+    global,
+    scriptUrl,
+    () => global.context.renderStart(),
+    () => global.context.noContentAvailable()
+  );
+}
diff --git a/ads/viralize.md b/ads/vendors/viralize.md
similarity index 87%
rename from ads/viralize.md
rename to ads/vendors/viralize.md
index 250a343d164db..698ec2b882b87 100644
--- a/ads/viralize.md
+++ b/ads/vendors/viralize.md
@@ -35,8 +35,8 @@ For further configuration details, please contact [Viralize](https://viralize.co
 
 ## Required parameters
 
-- `data-zid`: Id of the unit.
+-   `data-zid`: Id of the unit.
 
 ## Optional parameters
 
-- `data-extra`: JSON object representing any other query parameter that could be passed to the unit.
+-   `data-extra`: JSON object representing any other query parameter that could be passed to the unit.
diff --git a/ads/vendors/vlyby.js b/ads/vendors/vlyby.js
new file mode 100644
index 0000000000000..f0ec8b2831d84
--- /dev/null
+++ b/ads/vendors/vlyby.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2016 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.
+ */
+/* eslint-disable require-jsdoc */
+import {validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function vlyby(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+  global._vlyby_amp = {
+    allowed_data: ['publisherid', 'placementid', 'pubref'],
+    mandatory_data: ['publisherid', 'placementid'],
+    data: {
+      pubref: '',
+      publisherid: '',
+      placementid: '',
+      ...data,
+    },
+  };
+
+  validateData(data, global._vlyby_amp.mandatory_data);
+
+  const rand = Math.round(Math.random() * 100000000);
+
+  // install observation on entering/leaving the view
+  global.context.observeIntersection(function (changes) {
+    /** @type {!Array} */ (changes).forEach(function (c) {
+      if (global._vlyby_amp) {
+        global._vlyby_amp.rects = c;
+      }
+    });
+  });
+
+  //create Container
+  const containerId = 'qad' + rand;
+  createContainer(global, containerId);
+
+  //create Script
+  createScript(global, containerId);
+
+  function createScript(global, id) {
+    const s = global.document.createElement('script');
+    const referrer = data['pubref'] || global.context.canonicalUrl;
+
+    s.setAttribute('type', 'text/javascript');
+    s.setAttribute('async', 'true');
+    s.setAttribute('src', '//cdn.vlyby.com/amp/qad/qad-outer2.js');
+    s.setAttribute('data-PubId', data['publisherid']);
+    s.setAttribute('data-PlacementId', data['placementid']);
+    s.setAttribute('data-DivId', id);
+    s.setAttribute('data-PubRef', referrer);
+    global.document.getElementById('c').appendChild(s);
+  }
+  function createContainer(global, id) {
+    const d = global.document.createElement('div');
+    d.id = id;
+    global.document.getElementById('c').appendChild(d);
+  }
+}
diff --git a/ads/vendors/vlyby.md b/ads/vendors/vlyby.md
new file mode 100644
index 0000000000000..5cc9ab9b1cf8e
--- /dev/null
+++ b/ads/vendors/vlyby.md
@@ -0,0 +1,43 @@
+<!---
+Copyright 2016 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.
+-->
+
+# vlyby
+
+## Example
+
+```html
+<amp-embed
+  width="300"
+  height="250"
+  type="vlyby"
+  layout="responsive"
+  heights="250px"
+  data-publisherid="f363eb2b75459b34592cc4"
+  data-placementid="default"
+  data-pubref="test.amp.com"
+>
+</amp-embed>
+```
+
+## Configuration
+
+Supported parameters:
+
+All parameters are mandatory, only `data-pubref` is optional.
+
+-   `data-publisherid` (String, non-empty)
+-   `data-placementid` (String, non-empty)
+-   `data-pubref` (String)
diff --git a/ads/vendors/vmfive.js b/ads/vendors/vmfive.js
new file mode 100644
index 0000000000000..0102c6c588d35
--- /dev/null
+++ b/ads/vendors/vmfive.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function vmfive(global, data) {
+  /*eslint "google-camelcase/google-camelcase": 0*/
+  const mandatory_fields = ['appKey', 'placementId', 'adType'];
+  const optional_fields = [];
+
+  const {adType, appKey, placementId} = data;
+
+  global._vmfive_amp = {appKey, placementId, adType};
+
+  validateData(data, mandatory_fields, optional_fields);
+
+  createAdUnit(global, placementId, adType);
+  setupSDKReadyCallback(global, appKey);
+  parallelDownloadScriptsAndExecuteInOrder(global);
+}
+
+/**
+ * @param {!Window} win
+ */
+function parallelDownloadScriptsAndExecuteInOrder(win) {
+  [
+    'https://vawpro.vm5apis.com/man.js',
+    'https://man.vm5apis.com/dist/adn-web-sdk.js',
+  ].forEach(function (src) {
+    const script = document.createElement('script');
+    script.src = src;
+    script.async = false;
+    win.document.head.appendChild(script);
+  });
+}
+
+/**
+ * @param {!Window} win
+ * @param {string} placementId
+ * @param {string} adType
+ */
+function createAdUnit(win, placementId, adType) {
+  const el = document.createElement('vmfive-ad-unit');
+  el.setAttribute('placement-id', placementId);
+  el.setAttribute('ad-type', adType);
+  win.document.getElementById('c').appendChild(el);
+}
+
+/**
+ * @param {!Window} win
+ * @param {string} appKey
+ */
+function setupSDKReadyCallback(win, appKey) {
+  win.onVM5AdSDKReady = (sdk) => sdk.init({appKey});
+}
diff --git a/ads/vmfive.md b/ads/vendors/vmfive.md
similarity index 95%
rename from ads/vmfive.md
rename to ads/vendors/vmfive.md
index d1942c172ec5d..de86731012c6f 100644
--- a/ads/vmfive.md
+++ b/ads/vendors/vmfive.md
@@ -66,6 +66,6 @@ For configuration details and to generate your tags, please contact http://vmfiv
 
 Supported parameters:
 
-- `data-app-key`
-- `data-placement-id`
-- `data-ad-type`
+-   `data-app-key`
+-   `data-placement-id`
+-   `data-ad-type`
diff --git a/ads/vendors/webediads.js b/ads/vendors/webediads.js
new file mode 100644
index 0000000000000..7908990ef4de8
--- /dev/null
+++ b/ads/vendors/webediads.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * Created by Webedia on 07/03/16 - last updated on 11/10/16
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function webediads(global, data) {
+  validateData(data, ['site', 'page', 'position'], ['query']);
+  loadScript(global, 'https://eu1.wbdds.com/amp.min.js', () => {
+    global.wads.amp.init({
+      'site': data.site,
+      'page': data.page,
+      'position': data.position,
+      'query': data.query ? data.query : '',
+    });
+  });
+}
diff --git a/ads/webediads.md b/ads/vendors/webediads.md
similarity index 84%
rename from ads/webediads.md
rename to ads/vendors/webediads.md
index a8740753a0215..96072c2827b6a 100644
--- a/ads/webediads.md
+++ b/ads/vendors/webediads.md
@@ -77,10 +77,10 @@ For details on the configuration semantics, please contact the ad network or ref
 
 All parameters are mandatory, only "query" can be empty.
 
-- `data-site` (String, non-empty)
-- `data-page` (String, non-empty)
-- `data-position` (String, non-empty)
-- `data-query` (String)
-  - `key` are separated with `&`
-  - `value` are separted with `|`
-  - **Example**: `key1=value1|value2|value3&key2=value4&key3=value5|value6`
+-   `data-site` (String, non-empty)
+-   `data-page` (String, non-empty)
+-   `data-position` (String, non-empty)
+-   `data-query` (String)
+    -   `key` are separated with `&`
+    -   `value` are separted with `|`
+    -   **Example**: `key1=value1|value2|value3&key2=value4&key3=value5|value6`
diff --git a/ads/weborama.js b/ads/vendors/weborama.js
similarity index 97%
rename from ads/weborama.js
rename to ads/vendors/weborama.js
index 86ad07de73d65..c26c2621ba1c3 100644
--- a/ads/weborama.js
+++ b/ads/vendors/weborama.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {validateData, writeScript} from '../3p/3p';
+import {validateData, writeScript} from '../../3p/3p';
 
 /**
  * @param {!Window} global
diff --git a/ads/vendors/weborama.md b/ads/vendors/weborama.md
new file mode 100644
index 0000000000000..10b7fd4a987e3
--- /dev/null
+++ b/ads/vendors/weborama.md
@@ -0,0 +1,106 @@
+<!---
+Copyright 2015 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.
+-->
+
+# Weborama
+
+## Example
+
+**Display tag:**
+
+See below for an example of usage or our display tag, adapted for use with AMP websites:
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="weborama-display"
+  data-wbo_account_id="51"
+  data-wbo_tracking_element_id="137"
+  data-wbo_fullhost="certification.solution.weborama.fr"
+  data-wbo_random="[RANDOM]"
+  data-wbo_publisherclick="[PUBLISHER_TRACKING_URL]"
+>
+  <div placeholder>Loading ad.</div>
+  <div fallback>Ad could not be loaded.</div>
+</amp-ad>
+```
+
+**Conversion tag:**
+
+In order to add conversion trackers to your page, please use the AMP pixel component that will be supplied to you by your Weborama contact.
+The values mentioned between brackets `[]` should be replaced by the proper values.
+
+`DOCUMENT_REFERRER`, `SOURCE_URL` and `RANDOM` should remain in the URL, as AMP takes care of the automatic substitution of these values.
+
+```html
+<amp-pixel
+  src="http://[YOUR_HOST].solution.weborama.fr/fcgi-bin/dispatch.fcgi?a.A=co&a.si=[SITE_ID]&a.cp=[CONVERSION_PAGE]&a.ct=b&g.ru=DOCUMENT_REFERRER&g.pu=SOURCE_URL&g.cb=RANDOM"
+></amp-pixel>
+```
+
+## Configuration
+
+**Placeholder and fallback:**
+
+The placeholder and fallback `div` elements are completely optional and can be left out.
+
+-   The placeholder is shown while the ad is loading.
+-   The fallback is served when there is no ad to show for some reason.
+
+**Dimensions:**
+
+By default the ad size is based on the `width` and `height` attributes of the `amp-ad` tag. These are listed as mandatory parameters.
+
+The AMP ad component requires the following HTML attributes to be added before the ad will be parsed as a Weborama ad:
+
+-   width
+-   height
+-   type="weborama-display"
+
+**Mandatory data parameters:**
+
+Without valid values for these parameters we won't be able to display an ad:
+
+-   `data-wbo_account_id`
+-   `data-wbo_tracking_element_id`
+-   `data-wbo_fullhost`
+
+**Examples of optional parameters:**
+
+Here are some extra parameters that might be set on the AMP ad:
+
+-   `data-wbo_random` - Used as session identifier by some 3rd party ad systems
+-   `data-wbo_publisherclick` - Adds a publisher redirect for the exit click.
+-   `data-wbo_vars` - Sends variables to the creative. e.g.: `color=green&weather=rainy`
+-   `data-wbo_debug` - Launch the ad in debug mode.
+-   ... ask your contact at Weborama for more details.
+
+## Current restrictions
+
+-   AMP ads are launched in a cross-origin iframe, so there currently is no support for some rich media, amongst which:
+    -   Expandables
+    -   Floorads, Interstitials and other types of layers
+    -   Flash ads
+    -   Creatives served over HTTP.
+-   Click and impression trackers can't be added to the tag. They need to be added through Weborama's ad platform: WCM.
+-   At the moment we don't support dynamic resizing of the iframe. Support for this will be added on request.
+
+## Support
+
+If you have any questions, please refer to your contact at Weborama. Otherwise you can contact our TIER 2 support:
+
+-   E: tier2support@weborama.nl
+-   T: +31 (0) 20 52 46 690
diff --git a/ads/vendors/whopainfeed.js b/ads/vendors/whopainfeed.js
new file mode 100644
index 0000000000000..cb4bd06a65138
--- /dev/null
+++ b/ads/vendors/whopainfeed.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function whopainfeed(global, data) {
+  validateData(data, ['siteid']);
+
+  global._whopainfeed = global._whopainfeed || {
+    viewId: global.context.pageViewId,
+    siteId: data['siteid'],
+    testMode: data['testmode'] || 'false',
+    template: data['template'] || 'default',
+  };
+
+  loadScript(global, 'https://widget.infeed.com.ar/widget/widget-amp.js');
+}
diff --git a/ads/whopainfeed.md b/ads/vendors/whopainfeed.md
similarity index 93%
rename from ads/whopainfeed.md
rename to ads/vendors/whopainfeed.md
index 4c644cfd10fbc..18e968d52bf97 100644
--- a/ads/whopainfeed.md
+++ b/ads/vendors/whopainfeed.md
@@ -40,11 +40,11 @@ These configurations are relevant for both `<amp-ad />` and `<amp-embed />`.
 
 ### Required parameters
 
-- `data-siteId`: Site ID provided by Whopa InFeed Team.
+-   `data-siteId`: Site ID provided by Whopa InFeed Team.
 
 ### Optional parameters
 
-- `data-template`: The Template of Widget.
+-   `data-template`: The Template of Widget.
 
 **Resolution**
 
diff --git a/ads/vendors/widespace.js b/ads/vendors/widespace.js
new file mode 100644
index 0000000000000..3ca0ab0bf4db5
--- /dev/null
+++ b/ads/vendors/widespace.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function widespace(global, data) {
+  const WS_AMP_CODE_VER = '1.0.1';
+  // Optional demography parameters.
+  let demo = [];
+
+  demo = ['Gender', 'Country', 'Region', 'City', 'Postal', 'Yob'].map((d) => {
+    return 'demo' + d;
+  });
+
+  validateData(data, ['sid'], demo);
+
+  const url =
+    'https://engine.widespace.com/map/engine/dynamic?isamp=1' +
+    '&ampver=' +
+    WS_AMP_CODE_VER +
+    '&#sid=' +
+    encodeURIComponent(data.sid);
+
+  writeScript(global, url);
+}
diff --git a/ads/widespace.md b/ads/vendors/widespace.md
similarity index 90%
rename from ads/widespace.md
rename to ads/vendors/widespace.md
index 6ff861e2908b9..95590e94e83d3 100644
--- a/ads/widespace.md
+++ b/ads/vendors/widespace.md
@@ -53,12 +53,12 @@ For configuration details, please contact integrations@widespace.com.
 
 ### Required parameters
 
-- `data-sid`
+-   `data-sid`
 
 ### Optional demography parameters
 
-- `data-demo-Gender`
-- `data-demo-Country`
-- `data-demo-Region`
-- `data-demo-City`
-- `data-demo-Yob`
+-   `data-demo-Gender`
+-   `data-demo-Country`
+-   `data-demo-Region`
+-   `data-demo-City`
+-   `data-demo-Yob`
diff --git a/ads/vendors/wisteria.js b/ads/vendors/wisteria.js
new file mode 100644
index 0000000000000..cf68071c75fe5
--- /dev/null
+++ b/ads/vendors/wisteria.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function wisteria(global, data) {
+  const d = global.document.createElement('div');
+  d.id = '_wisteria_recommend_contents';
+  global.document.getElementById('c').appendChild(d);
+  //get canonical url
+  const originalUrl = global.context.canonicalUrl;
+  validateData(data, ['siteId', 'templateNumber']);
+  loadScript(
+    global,
+    'https://wisteria-js.excite.co.jp/wisteria.js?site_id=' +
+      data['siteId'] +
+      '&template_no=' +
+      data['templateNumber'] +
+      '&original_url=' +
+      originalUrl
+  );
+}
diff --git a/ads/wisteria.md b/ads/vendors/wisteria.md
similarity index 89%
rename from ads/wisteria.md
rename to ads/vendors/wisteria.md
index 202fc33df7f31..949eb3c472f2e 100644
--- a/ads/wisteria.md
+++ b/ads/vendors/wisteria.md
@@ -36,7 +36,7 @@ For configuration details, please contact https://www.excite.co.jp/guide/wisteri
 
 Supported parameters:
 
-- data-site-id (required)
-- data-template-number (required)
-- height (optional)
-- width (optional)
+-   data-site-id (required)
+-   data-template-number (required)
+-   height (optional)
+-   width (optional)
diff --git a/ads/vendors/wpmedia.js b/ads/vendors/wpmedia.js
new file mode 100644
index 0000000000000..8e6f0e5b7198f
--- /dev/null
+++ b/ads/vendors/wpmedia.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function wpmedia(global, data) {
+  validateData(data, ['slot', 'bunch'], ['sn', 'slots']);
+
+  // const url = 'http://localhost/wpjslib.js';
+  const url = 'https://std.wpcdn.pl/wpjslib/wpjslib-amp.js';
+
+  writeScript(global, url, function () {
+    window.run(data);
+  });
+}
diff --git a/ads/wpmedia.md b/ads/vendors/wpmedia.md
similarity index 94%
rename from ads/wpmedia.md
rename to ads/vendors/wpmedia.md
index 27d7596040215..d1a48e9ff3cda 100644
--- a/ads/wpmedia.md
+++ b/ads/vendors/wpmedia.md
@@ -44,13 +44,13 @@ limitations under the License.
 
 ### Required parameter
 
-- `data-slot`
-- `data-bunch`
+-   `data-slot`
+-   `data-bunch`
 
 ### Optional parameters
 
-- `data-slots`
-- `data-sn`
+-   `data-slots`
+-   `data-sn`
 
 ## Configuration
 
diff --git a/ads/vendors/xlift.js b/ads/vendors/xlift.js
new file mode 100644
index 0000000000000..7d63a391dd749
--- /dev/null
+++ b/ads/vendors/xlift.js
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function xlift(global, data) {
+  validateData(data, ['mediaid']);
+
+  global.xliftParams = data;
+  const d = global.document.createElement('div');
+  d.id = '_XL_recommend';
+  global.document.getElementById('c').appendChild(d);
+
+  d.addEventListener('SuccessLoadedXliftAd', function (e) {
+    e.detail = e.detail || {adSizeInfo: {}};
+    global.context.renderStart(e.detail.adSizeInfo);
+  });
+  d.addEventListener('FailureLoadedXliftAd', function () {
+    global.context.noContentAvailable();
+  });
+
+  //assign XliftAmpHelper property to global(window)
+  global.XliftAmpHelper = null;
+
+  loadScript(
+    global,
+    'https://cdn.x-lift.jp/resources/common/xlift_amp.js',
+    () => {
+      if (!global.XliftAmpHelper) {
+        global.context.noContentAvailable();
+      } else {
+        global.XliftAmpHelper.show();
+      }
+    },
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/xlift.md b/ads/vendors/xlift.md
similarity index 93%
rename from ads/xlift.md
rename to ads/vendors/xlift.md
index 5af8d8077125d..9c80e466fe38f 100644
--- a/ads/xlift.md
+++ b/ads/vendors/xlift.md
@@ -28,4 +28,4 @@ For configuration details and to generate your tags, please contact https://www.
 
 #### Required parameters
 
-- `data-mediaid`: For loading JavaScript for each media.
+-   `data-mediaid`: For loading JavaScript for each media.
diff --git a/ads/vendors/yahoo.js b/ads/vendors/yahoo.js
new file mode 100644
index 0000000000000..6c25a437f5e73
--- /dev/null
+++ b/ads/vendors/yahoo.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function yahoo(global, data) {
+  validateData(data, ['sid', 'site', 'sa']);
+  global.yadData = data;
+  writeScript(global, 'https://s.yimg.com/aaq/ampad/display.js');
+}
diff --git a/ads/yahoo.md b/ads/vendors/yahoo.md
similarity index 93%
rename from ads/yahoo.md
rename to ads/vendors/yahoo.md
index a6d6e36faf8a7..a1be69bcda8df 100644
--- a/ads/yahoo.md
+++ b/ads/vendors/yahoo.md
@@ -36,8 +36,8 @@ For configuration details, please contact https://advertising.yahoo.com/contact.
 
 Supported parameters:
 
-- `height`
-- `width`
-- `data-sid`
-- `data-site`
-- `data-sa`
+-   `height`
+-   `width`
+-   `data-sid`
+-   `data-site`
+-   `data-sa`
diff --git a/ads/vendors/yahoofedads.js b/ads/vendors/yahoofedads.js
new file mode 100644
index 0000000000000..3c82c1cfc26e5
--- /dev/null
+++ b/ads/vendors/yahoofedads.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function yahoofedads(global, data) {
+  validateData(data, [
+    'adUnit',
+    'site',
+    'region',
+    'lang',
+    'sa',
+    'spaceId',
+    'url',
+  ]);
+
+  global.amp = true;
+  global.adConfig = {
+    'adPositionOverride': data.adPositionOverride,
+    'adUnit': data.adUnit,
+    'forceSource': data.forceSource,
+    'height': data.height,
+    'lang': data.lang,
+    'publisherUrl': data.url,
+    'region': data.region,
+    'sa': data.sa,
+    'sectionId': data.sectionId,
+    'site': data.site,
+    'spaceId': data.spaceId,
+    'width': data.width,
+  };
+
+  loadScript(
+    global,
+    'https://s.yimg.com/aaq/ampyahoofedads/yahoofedads.js',
+    () => global.context.renderStart()
+  );
+}
diff --git a/ads/vendors/yahoofedads.md b/ads/vendors/yahoofedads.md
new file mode 100644
index 0000000000000..da639216ba8d8
--- /dev/null
+++ b/ads/vendors/yahoofedads.md
@@ -0,0 +1,57 @@
+<!---
+Copyright 2020 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.
+-->
+
+# Yahoo Native-Display Ads Federation
+
+## Example
+
+Yahoo Native-Display Ads Federation only requires a configured section code to run. Please work with your account manager to configure your AMP sections.
+
+### Basic
+
+```html
+<amp-embed
+  width="320"
+  height="320"
+  layout="responsive"
+  type="yahoofedads"
+  data-site="finance"
+  data-region="US"
+  data-lang="en-US"
+
+  data-space-id="980771322"
+  data-ad-unit="pencil"
+  data-sa="{&quot;LREC&quot;:&quot;300x250&quot;,&quot;secure&quot;:&quot;true&quot;,&quot;content&quot;:&quot;no_expandable;&quot;,&quot;isSupplySegment&quot;:&quot;false&quot;,&quot;lang&quot;:&quot;en-US&quot;,&quot;region&quot;:&quot;US&quot;,&quot;site_attribute&quot;:&quot;wiki_topics=\&quot;Anthony_Joshua;Tyson_Fury;Eddie_Hearn;Deontay_Wilder;Kubrat_Pulev;Tottenham_Hotspur_Stadium;Dillian_Whyte\&quot; ctopid=\&quot;2074500;2078500;2083000;2212000;13311000\&quot; hashtag=\&quot;2074500;2078500;2083000;2212000;13311000\&quot; rs=\&quot;lmsid:a0ad000000AxDnbAAF;revsp:omnisport.uk;lpstaid:71ee6f14-9c73-3688-b4a9-32e6578057d0;pct:story\&quot;&quot;}"
+  data-url="https://techcrunch.com"
+  /* Optional override parameters */
+  data-ad-position-override="lrec"
+  data-section-id="5661957"
+>
+</amp-embed>
+```
+
+### Required parameters
+
+-   `data-site`, `data-region`, `data-lang`: Unique site/region/lang code that represents your site
+-   `data-ad-unit`: The AD position with federation config, valid value can be `pencil`, `moments` or `outstream`
+-   `data-sa`: The site-attribute used by display AD to render
+-   `data-url`: Url the AD is hosted in for tracking purpose
+-   `data-space-id`: Use this to provide what space id need to be used on picking up Display AD
+
+### Optional override parameters
+
+-   `data-ad-position-override`: The position which will be fetched from backend mandatorily, it can be `lrec`, `wfpad`, `reservedMoments`, `nativeMoments` or `nativeRegular`
+-   `data-section-id`: Use this ot override what section id need to be used on picking up Native AD
diff --git a/ads/vendors/yahoojp.js b/ads/vendors/yahoojp.js
new file mode 100644
index 0000000000000..aedb73c9fa89b
--- /dev/null
+++ b/ads/vendors/yahoojp.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function yahoojp(global, data) {
+  validateData(data, ['yadsid'], []);
+  global.yahoojpParam = data;
+  writeScript(
+    global,
+    'https://s.yimg.jp/images/listing/tool/yads/ydn/amp/amp.js'
+  );
+}
diff --git a/ads/yahoojp.md b/ads/vendors/yahoojp.md
similarity index 97%
rename from ads/yahoojp.md
rename to ads/vendors/yahoojp.md
index 3d3d8dc212bfd..49ac9792bddb5 100644
--- a/ads/yahoojp.md
+++ b/ads/vendors/yahoojp.md
@@ -29,4 +29,4 @@ For configuration details and to generate your tags, please contact http://marke
 
 Supported parameters:
 
-- `data-yadsid`
+-   `data-yadsid`
diff --git a/ads/vendors/yahoonativeads.js b/ads/vendors/yahoonativeads.js
new file mode 100644
index 0000000000000..261da680ae6db
--- /dev/null
+++ b/ads/vendors/yahoonativeads.js
@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function yahoonativeads(global, data) {
+  validateData(data, ['code', 'url']);
+
+  global.publisherUrl = data.url;
+  global.amp = true;
+
+  const config = {};
+
+  if (data.key) {
+    config.apiKey = data.key;
+  }
+
+  Object.keys(data).forEach((property) => {
+    config[property] = data[property];
+  });
+
+  (global.native = global.native || []).push(config);
+
+  loadScript(global, 'https://s.yimg.com/dy/ads/native.js', () =>
+    global.context.renderStart()
+  );
+}
diff --git a/ads/vendors/yahoonativeads.md b/ads/vendors/yahoonativeads.md
new file mode 100644
index 0000000000000..88dafd25cd234
--- /dev/null
+++ b/ads/vendors/yahoonativeads.md
@@ -0,0 +1,48 @@
+<!---
+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.
+-->
+
+# Yahoo Native Ads
+
+## Example
+
+Yahoo Native Ads requires a unique section code to run. Please reach out to your account manager with any questions about configuring your AMP placements or requesting new section codes.
+
+### Basic
+
+```html
+<amp-embed
+  width="320"
+  height="320"
+  type="yahoonativeads"
+  data-code="192b5193-edb2-31c0-88be-4022dhca1090"
+  data-api-key="P55VS9SY2WQXH7TTN8ZA"
+  data-url="https://techcrunch.com"
+>
+</amp-embed>
+```
+
+### Required parameters
+
+-   `data-code` : A unique section code that represents your site and placement.
+-   `data-url` : The URL of the site your section code is allowed to run on.
+
+### Optional parameters
+
+-   `data-key` : The API key assigned to your site. Used for legacy integrations.
+-   `data-api-key` : The API key assigned to your site. Used for legacy integrations.
+-   `data-enabled-ad-feedback` : If defined, a feedback indicator will be shown on eligable ad placements.
+-   `data-image-type` : The preferred image rendering "square", "rectangle" or "thumbnail".
+-   `json` : You can use this field to define your entire config, if desired (ex: `json='{ "imageType": "square" }'`)
diff --git a/ads/vendors/yandex.js b/ads/vendors/yandex.js
new file mode 100644
index 0000000000000..26c25c94dc463
--- /dev/null
+++ b/ads/vendors/yandex.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright 2017 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.
+ */
+import {loadScript, validateData} from '../../3p/3p';
+
+const n = 'yandexContextAsyncCallbacks';
+const renderTo = 'yandex_rtb';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function yandex(global, data) {
+  validateData(data, ['blockId'], ['data', 'onRender', 'onError']);
+
+  addToQueue(global, data);
+  loadScript(global, 'https://an.yandex.ru/system/context_amp.js');
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function addToQueue(global, data) {
+  global[n] = global[n] || [];
+  global[n].push(() => {
+    // Create container
+    createContainer(global, renderTo);
+
+    // Show Ad in container
+    global.Ya.Context.AdvManager.render(
+      {
+        blockId: data.blockId,
+        statId: data.statId,
+        renderTo,
+        data: data.data,
+        async: true,
+        onRender: () => {
+          if (typeof data.onRender === 'function') {
+            data.onRender();
+          }
+          global.context.renderStart();
+        },
+      },
+      () => {
+        if (typeof data.onError === 'function') {
+          data.onError();
+        } else {
+          global.context.noContentAvailable();
+        }
+      }
+    );
+  });
+}
+
+/**
+ * @param {!Window} global
+ * @param {string} id
+ */
+function createContainer(global, id) {
+  const d = global.document.createElement('div');
+  d.id = id;
+  global.document.getElementById('c').appendChild(d);
+}
diff --git a/ads/yandex.md b/ads/vendors/yandex.md
similarity index 89%
rename from ads/yandex.md
rename to ads/vendors/yandex.md
index b23601d06cf8a..cc4a41059c1b6 100644
--- a/ads/yandex.md
+++ b/ads/vendors/yandex.md
@@ -29,11 +29,11 @@ For semantics of configuration, please see [Yandex's documentation](https://yand
 
 ### Required parameters
 
-- `data-block-id`
+-   `data-block-id`
 
 ### Optional parameters
 
-- `data-data`
-- `data-html-access-allowed`
-- `data-on-render`
-- `data-on-error`
+-   `data-data`
+-   `data-html-access-allowed`
+-   `data-on-render`
+-   `data-on-error`
diff --git a/ads/vendors/yektanet.js b/ads/vendors/yektanet.js
new file mode 100644
index 0000000000000..3a510d021611a
--- /dev/null
+++ b/ads/vendors/yektanet.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function yektanet(global, data) {
+  validateData(data, ['publisherName', 'scriptName', 'posId'], ['adType']);
+
+  const isBanner = data['adType'] === 'banner';
+
+  const container = document.getElementById('c');
+  const adDiv = document.createElement('div');
+  adDiv.setAttribute('id', data['posId']);
+  if (isBanner) {
+    adDiv.setAttribute('class', 'yn-bnr');
+  }
+  container.appendChild(adDiv);
+
+  const now = new Date();
+  const version = [
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+    now.getHours(),
+  ].join('0');
+
+  const scriptSrc = isBanner
+    ? 'https://cdn.yektanet.com/template/bnrs/yn_bnr.min.js'
+    : `https://cdn.yektanet.com/js/${encodeURIComponent(
+        data['publisherName']
+      )}/${encodeURIComponent(data['scriptName'])}`;
+
+  loadScript(global, `${scriptSrc}?v=${version}`);
+}
diff --git a/ads/vendors/yektanet.md b/ads/vendors/yektanet.md
new file mode 100644
index 0000000000000..8594bf73f5299
--- /dev/null
+++ b/ads/vendors/yektanet.md
@@ -0,0 +1,70 @@
+<!---
+Copyright 2015 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.
+-->
+
+# Yektanet
+
+## Example
+
+### Native Ads
+
+```html
+<amp-ad
+  width="400"
+  height="400"
+  type="yektanet"
+  data-publisher-name="yektanet.com"
+  data-script-name="yektanet-article.js"
+  data-pos-id="pos-article-display-1"
+>
+</amp-ad>
+```
+
+### Banners
+
+```html
+<amp-ad width="300" height="250"
+    type="yektanet"
+    data-ad-type="banner"
+    data-publisher-name="yektanet-bnr"
+    data-script-name="uid.js"
+    data-pos-id="ynpos-1">
+</amp-ad>
+```
+
+### Sticky Banners
+
+```html
+<amp-sticky-ad layout="nodisplay">
+  <amp-ad width="468" height="60"
+      type="yektanet"
+      data-ad-type="banner"
+      data-publisher-name="yektanet-bnr"
+      data-script-name="uid.js"
+      data-pos-id="ynpos-8845">
+  </amp-ad>
+</amp-sticky-ad>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact the ad network or refer to their documentation.
+
+Supported parameters:
+
+-   `data-ad-type`
+-   `data-publisher-name`
+-   `data-script-name`
+-   `data-pos-id`
diff --git a/ads/vendors/yengo.js b/ads/vendors/yengo.js
new file mode 100644
index 0000000000000..79944fc50f682
--- /dev/null
+++ b/ads/vendors/yengo.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function yengo(global, data) {
+  validateData(data, ['blockId']);
+
+  const url =
+    'https://code.yengo.com/data/' +
+    encodeURIComponent(data['blockId']) +
+    '.js?async=1&div=c';
+
+  loadScript(
+    global,
+    url,
+    () => {
+      global.context.renderStart();
+    },
+    () => {
+      global.context.noContentAvailable();
+    }
+  );
+}
diff --git a/ads/yengo.md b/ads/vendors/yengo.md
similarity index 97%
rename from ads/yengo.md
rename to ads/vendors/yengo.md
index 255a0984a638a..651da4f92542e 100644
--- a/ads/yengo.md
+++ b/ads/vendors/yengo.md
@@ -28,4 +28,4 @@ For more information, please [see Yengo's FAQ](http://www.yengo.com/text/faqs?pu
 
 ### Required parameters
 
-- `data-block-id`
+-   `data-block-id`
diff --git a/ads/vendors/yieldbot.js b/ads/vendors/yieldbot.js
new file mode 100644
index 0000000000000..54c0bc46a0cfb
--- /dev/null
+++ b/ads/vendors/yieldbot.js
@@ -0,0 +1,88 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {getMultiSizeDimensions} from '../../ads/google/utils';
+import {loadScript, validateData} from '../../3p/3p';
+import {rethrowAsync} from '../../src/core/error';
+import {user} from '../../src/log';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function yieldbot(global, data) {
+  validateData(data, ['psn', 'ybSlot', 'slot']);
+
+  global.ybotq = global.ybotq || [];
+
+  loadScript(global, 'https://cdn.yldbt.com/js/yieldbot.intent.amp.js', () => {
+    global.ybotq.push(() => {
+      try {
+        const multiSizeDataStr = data.multiSize || null;
+        const primaryWidth = parseInt(data.overrideWidth || data.width, 10);
+        const primaryHeight = parseInt(data.overrideHeight || data.height, 10);
+        let dimensions;
+
+        if (multiSizeDataStr) {
+          dimensions = getMultiSizeDimensions(
+            multiSizeDataStr,
+            primaryWidth,
+            primaryHeight,
+            false
+          );
+          dimensions.unshift([primaryWidth, primaryHeight]);
+        } else {
+          dimensions = [[primaryWidth, primaryHeight]];
+        }
+
+        global.yieldbot.psn(data.psn);
+        global.yieldbot.enableAsync();
+        if (window.context.isMaster) {
+          global.yieldbot.defineSlot(data.ybSlot, {sizes: dimensions});
+          global.yieldbot.go();
+        } else {
+          const slots = {};
+          slots[data.ybSlot] = dimensions;
+          global.yieldbot.nextPageview(slots);
+        }
+      } catch (e) {
+        rethrowAsync(e);
+      }
+    });
+
+    global.ybotq.push(() => {
+      try {
+        const targeting = global.yieldbot.getSlotCriteria(data['ybSlot']);
+        data['targeting'] = data['targeting'] || {};
+        for (const key in targeting) {
+          data.targeting[key] = targeting[key];
+        }
+      } catch (e) {
+        rethrowAsync(e);
+      }
+      user().warn(
+        'AMP-AD',
+        'type="yieldbot" will no longer ' +
+          'be supported starting on March 29, 2018.' +
+          ' Please use your amp-ad-network and RTC to configure a' +
+          ' Yieldbot callout vendor. Refer to' +
+          ' https://github.com/ampproject/amphtml/blob/main/' +
+          'extensions/amp-a4a/rtc-publisher-implementation-guide.md' +
+          '#setting-up-rtc-config for more information.'
+      );
+    });
+  });
+}
diff --git a/ads/yieldbot.md b/ads/vendors/yieldbot.md
similarity index 79%
rename from ads/yieldbot.md
rename to ads/vendors/yieldbot.md
index 3292cb8763d2c..171fb9997938c 100644
--- a/ads/yieldbot.md
+++ b/ads/vendors/yieldbot.md
@@ -25,14 +25,14 @@ Yieldbot can be configured as a demand source by using the Real Time Config (RTC
 | **`YB_PSN`**  | Yieldbot publisher site number |
 | **`YB_SLOT`** | Yieldbot slot identifier       |
 
-For further information on RTC please see the [RTC Publisher Implementation Guide](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/rtc-publisher-implementation-guide.md) and see the example Doubleclick configuration below.
+For further information on RTC please see the [RTC Publisher Implementation Guide](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/rtc-publisher-implementation-guide.md) and see the example Doubleclick configuration below.
 
 ## Doubleclick RTC Configuration
 
 To specify a Doubleclick `amp-ad` integration with Yieldbot, include the vendor `"yieldbot"` in your `rtc-config` tag attributed as shown in the example below. This particular example shows that the Yieldbot demand configuration for the respective Doubleclick slot, `/2476204/medium-rectangle` where:
 
-- `"YB_PSN": "1234"`, Yieldbot publisher number
-- `"YB_SLOT": "medrec"`, Yieldbot slot name
+-   `"YB_PSN": "1234"`, Yieldbot publisher number
+-   `"YB_SLOT": "medrec"`, Yieldbot slot name
 
 ```html
 <amp-ad
@@ -58,15 +58,15 @@ To specify a Doubleclick `amp-ad` integration with Yieldbot, include the vendor
 
 For integration testing, the Yieldbot Platform can be set to always return a bid for requested slots.
 
-- **Enable** integration testing mode:
-  - http://i.yldbt.com/integration/start
-- **Disable** integration testing mode:
-  - http://i.yldbt.com/integration/stop
+-   **Enable** integration testing mode:
+    -   http://i.yldbt.com/integration/start
+-   **Disable** integration testing mode:
+    -   http://i.yldbt.com/integration/stop
 
 When Yieldbot testing mode is enabled, a cookie (`__ybot_test`) on the domain `.yldbt.com` tells the Yieldbot ad server to always return a bid and when creative is requested, return a static integration testing creative.
 
 **_Note:_**
 
-- No ad serving metrics are impacted when integration testing mode is enabled.
-- The `__ybot_test` cookie expires in 24 hours.
-- It is good practice to action the "Stop testing" Url when testing is complete to return to normal ad delivery.
+-   No ad serving metrics are impacted when integration testing mode is enabled.
+-   The `__ybot_test` cookie expires in 24 hours.
+-   It is good practice to action the "Stop testing" Url when testing is complete to return to normal ad delivery.
diff --git a/ads/vendors/yieldmo.js b/ads/vendors/yieldmo.js
new file mode 100644
index 0000000000000..1dace04f780a2
--- /dev/null
+++ b/ads/vendors/yieldmo.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function yieldmo(global, data) {
+  const ymElem = global.document.createElement('div');
+  ymElem.id = 'ym_' + data.ymid;
+  ymElem.className = 'ym';
+  ymElem.dataset['ampEnabled'] = true;
+  global.document.getElementById('c').appendChild(ymElem);
+
+  const swimLane = Math.round((5 * Math.random()) / 3);
+  const ymJs = 'https://static.yieldmo.com/ym.' + swimLane + '.js';
+
+  loadScript(global, ymJs);
+}
diff --git a/ads/yieldmo.md b/ads/vendors/yieldmo.md
similarity index 98%
rename from ads/yieldmo.md
rename to ads/vendors/yieldmo.md
index 8d10a3f50b52b..0f7145f7c7125 100644
--- a/ads/yieldmo.md
+++ b/ads/vendors/yieldmo.md
@@ -29,7 +29,7 @@ For semantics configuration, please [contact Yieldmo](https://yieldmo.com/#conta
 
 Supported parameters:
 
-- `data-ymid`
+-   `data-ymid`
 
 ## Multi-size Ad
 
diff --git a/ads/vendors/yieldone.js b/ads/vendors/yieldone.js
new file mode 100644
index 0000000000000..6d592ef6d7e2a
--- /dev/null
+++ b/ads/vendors/yieldone.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function yieldone(global, data) {
+  validateData(data, ['pubid', 'pid', 'width', 'height'], []);
+
+  global.yieldoneParam = data;
+  writeScript(
+    global,
+    'https://img.ak.impact-ad.jp/ic/pone/commonjs/yone-amp.js'
+  );
+}
diff --git a/ads/yieldone.md b/ads/vendors/yieldone.md
similarity index 96%
rename from ads/yieldone.md
rename to ads/vendors/yieldone.md
index e3ace8db50d75..c82d63528c63a 100644
--- a/ads/yieldone.md
+++ b/ads/vendors/yieldone.md
@@ -35,5 +35,5 @@ For configuration details and to generate your tags, please contact [YieldOne](h
 
 Supported parameters:
 
-- `data-pubid`
-- `data-pid`
+-   `data-pubid`
+-   `data-pid`
diff --git a/ads/vendors/yieldpro.js b/ads/vendors/yieldpro.js
new file mode 100644
index 0000000000000..1b8d2f2812721
--- /dev/null
+++ b/ads/vendors/yieldpro.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {computeInMasterFrame, loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function yieldpro(global, data) {
+  validateData(
+    data,
+    ['sectionId', 'slot', 'pubnetwork'],
+    [
+      'instance',
+      'custom',
+      'adServerUrl',
+      'cacheSafe',
+      'pageIdModifier',
+      'click3rd',
+      'debugsrc',
+    ]
+  );
+  //TODO support dmp and cookie
+
+  const SCRIPT_HOST = 'creatives.yieldpro.eu/showad_';
+
+  let scriptUrl = 'https://' + SCRIPT_HOST + data['pubnetwork'] + '.js';
+
+  if (data['debugsrc']) {
+    scriptUrl = data['debugsrc'];
+  }
+
+  computeInMasterFrame(
+    global,
+    'yieldpro-request',
+    (done) => {
+      let success = false;
+      if (!global.showadAMPAdapter) {
+        global.showadAMPAdapter = {
+          registerSlot: () => {},
+        };
+        loadScript(global, scriptUrl, () => {
+          if (global.showadAMPAdapter.inited) {
+            success = true;
+          }
+          done(success);
+        });
+      } else {
+        done(true);
+      }
+    },
+    (success) => {
+      if (success) {
+        global.showadAMPAdapter = global.context.master.showadAMPAdapter;
+        global.showadAMPAdapter.registerSlot(data, global);
+      } else {
+        throw new Error('Yieldpro AdTag failed to load');
+      }
+    }
+  );
+}
diff --git a/ads/vendors/yieldpro.md b/ads/vendors/yieldpro.md
new file mode 100644
index 0000000000000..3c6752e7b4675
--- /dev/null
+++ b/ads/vendors/yieldpro.md
@@ -0,0 +1,100 @@
+<!---
+Copyright 2015 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.
+-->
+
+# YieldPro
+
+## Examples
+
+### Single ad
+
+```html
+<amp-ad
+  width="728"
+  height="90"
+  type="yieldpro"
+  data-pubnetwork="12c6fc06"
+  data-section-id="100"
+  data-slot="107"
+>
+</amp-ad>
+```
+
+### Multi instance ads
+
+```html
+<amp-ad
+  width="250"
+  height="250"
+  type="yieldpro"
+  data-pubnetwork="12c6fc06"
+  data-section-id="475"
+  data-slot="650"
+  data-instance="1"
+>
+</amp-ad>
+<amp-ad
+  width="250"
+  height="250"
+  type="yieldpro"
+  data-pubnetwork="12c6fc06"
+  data-section-id="475"
+  data-slot="650"
+  data-instance="2"
+>
+</amp-ad>
+```
+
+### Using custom params and custom ad server url
+
+```html
+<amp-ad
+  width="728"
+  height="90"
+  type="yieldpro"
+  data-pubnetwork="12c6fc06"
+  data-section-id="100"
+  data-slot="107"
+  data-custom='{"my_custom_param":"my_custom_value"}'
+  data-ad-server-url="//creative.yieldpro.eu/ad"
+>
+</amp-ad>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact the ad network or refer to their documentation.
+
+### Required parameters
+
+-   `sectionId`: ID of this section in ad server.
+-   `slot`: ID of ad slot in ad server.
+-   `pubnetwork`: ID of the publisher that in ad server.
+
+### Optional parameters
+
+-   `instance`: ID of section instance in case we multiple times used the same section on the same page. Can contain only letters and numbers.Strictly required to use the same section multiple times per page.
+-   `click3rd`: 3rd party click watcher.
+-   `adServerUrl`
+-   `cacheSafe`
+-   `pageIdModifier`
+-   `custom`: Custom targeting properties. You may use 3 types for its properties: `{String}`, `{Number}` and `{Array}`. The following array usage example translates into: `arrayKey=value1&arrayKey=1&stringKey=stringValue...`
+
+    ```text
+    {
+        arrayKey: [ "value1", 1 ],
+        stringKey: 'stringValue'
+    }
+    ```
diff --git a/ads/vendors/zedo.js b/ads/vendors/zedo.js
new file mode 100644
index 0000000000000..1460a2581601d
--- /dev/null
+++ b/ads/vendors/zedo.js
@@ -0,0 +1,78 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function zedo(global, data) {
+  // check mandatory fields
+  validateData(
+    data,
+    ['superId', 'network', 'placementId', 'channel', 'publisher', 'dim'],
+    ['charset', 'callback', 'renderer']
+  );
+
+  loadScript(global, 'https://ss3.zedo.com/gecko/tag/Gecko.amp.min.js', () => {
+    const {ZGTag} = global;
+    const charset = data.charset || '';
+    const callback = data.callback || function () {};
+    const geckoTag = new ZGTag(
+      data.superId,
+      data.network,
+      '',
+      '',
+      charset,
+      callback
+    );
+    geckoTag.setAMP();
+    // define placement
+    const placement = geckoTag.addPlacement(
+      data.placementId,
+      data.channel,
+      data.publisher,
+      data.dim,
+      data.width,
+      data.height
+    );
+    if (data.renderer) {
+      for (const key in data.renderer) {
+        placement.includeRenderer(
+          data.renderer[key].name,
+          data.renderer[key].value
+        );
+      }
+    } else {
+      placement.includeRenderer('display', {});
+    }
+    //create a slot div to display ad
+    const slot = global.document.createElement('div');
+    slot.id = 'zdt_' + data.placementId;
+
+    const divContainer = global.document.getElementById('c');
+    if (divContainer) {
+      divContainer.appendChild(slot);
+    }
+
+    // call load ads
+    geckoTag.loadAds();
+
+    // call div ready
+    geckoTag.placementReady(data.placementId);
+  });
+}
diff --git a/ads/zedo.md b/ads/vendors/zedo.md
similarity index 84%
rename from ads/zedo.md
rename to ads/vendors/zedo.md
index 3d5f886219e01..ee1c7ba41c243 100644
--- a/ads/zedo.md
+++ b/ads/vendors/zedo.md
@@ -41,15 +41,15 @@ For semantics of configuration, please contact support@zedo.com.
 
 ### Required parameters
 
-- `data-super-id`
-- `data-network`
-- `data-placement-id`
-- `data-channel`
-- `data-publisher`
-- `data-dim`
+-   `data-super-id`
+-   `data-network`
+-   `data-placement-id`
+-   `data-channel`
+-   `data-publisher`
+-   `data-dim`
 
 ### Optional parameters
 
-- `data-charset`
-- `data-callback`
-- `data-renderer`
+-   `data-charset`
+-   `data-callback`
+-   `data-renderer`
diff --git a/ads/vendors/zen.js b/ads/vendors/zen.js
new file mode 100644
index 0000000000000..d2905b6c50e81
--- /dev/null
+++ b/ads/vendors/zen.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright 2017 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.
+ */
+import {loadScript, validateData} from '../../3p/3p';
+
+const n = 'yandexZenAsyncCallbacks';
+const renderTo = 'zen-widget';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function zen(global, data) {
+  validateData(
+    data,
+    ['clid'],
+    ['size', 'orientation', 'successCallback', 'failCallback']
+  );
+
+  addToQueue(global, data);
+  loadScript(global, 'https://zen.yandex.ru/widget-loader');
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function addToQueue(global, data) {
+  global[n] = global[n] || [];
+  global[n].push(() => {
+    // Create container
+    createContainer(global, renderTo);
+
+    const {YandexZen} = global;
+    const config = Object.assign(data, {
+      clid: JSON.parse(data.clid),
+      container: `#${renderTo}`,
+      isAMP: true,
+      successCallback: () => {
+        if (typeof data.successCallback === 'function') {
+          data.successCallback();
+        }
+      },
+      failCallback: () => {
+        if (typeof data.failCallback === 'function') {
+          data.failCallback();
+        }
+      },
+    });
+
+    YandexZen.renderWidget(config);
+  });
+}
+
+/**
+ * @param {!Window} global
+ * @param {string} id
+ */
+function createContainer(global, id) {
+  const d = global.document.createElement('div');
+  d.id = id;
+  global.document.getElementById('c').appendChild(d);
+}
diff --git a/ads/zen.md b/ads/vendors/zen.md
similarity index 89%
rename from ads/zen.md
rename to ads/vendors/zen.md
index 2b2b78d5aa677..b568d0ee9cc0c 100644
--- a/ads/zen.md
+++ b/ads/vendors/zen.md
@@ -28,12 +28,12 @@ For details on the configuration semantics, please see [Zen's documentation](htt
 
 ### Required parameters
 
-- `data-clid`
+-   `data-clid`
 
 ### Optional parameters
 
-- `width`
-- `data-size`
-- `data-orientation`
-- `data-on-render`
-- `data-on-error`
+-   `width`
+-   `data-size`
+-   `data-orientation`
+-   `data-on-render`
+-   `data-on-error`
diff --git a/ads/vendors/zergnet.js b/ads/vendors/zergnet.js
new file mode 100644
index 0000000000000..b63ae3407ab6e
--- /dev/null
+++ b/ads/vendors/zergnet.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function zergnet(global, data) {
+  validateData(data, ['zergid'], []);
+  global.zergnetWidgetId = data.zergid;
+  writeScript(global, 'https://www.zergnet.com/zerg-amp.js');
+}
diff --git a/ads/zergnet.md b/ads/vendors/zergnet.md
similarity index 98%
rename from ads/zergnet.md
rename to ads/vendors/zergnet.md
index 2e7cac91993d2..d0f73f768eee2 100644
--- a/ads/zergnet.md
+++ b/ads/vendors/zergnet.md
@@ -38,4 +38,4 @@ For details on the configuration semantics, please contact the ad network or ref
 
 Supported parameters:
 
-- `data-zergid`
+-   `data-zergid`
diff --git a/ads/vendors/zucks.js b/ads/vendors/zucks.js
new file mode 100644
index 0000000000000..630e3a6dcbb06
--- /dev/null
+++ b/ads/vendors/zucks.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {loadScript, validateData, writeScript} from '../../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function zucks(global, data) {
+  validateData(data, ['frameId']);
+  if (data['adtype'] === 'zoe') {
+    loadScript(global, 'https://j.zoe.zucks.net/zoe.min.js', function () {
+      const frameId = data['frameId'];
+      const elementId = 'zucks-widget-parent';
+
+      const d = global.document.createElement('ins');
+      d.id = elementId;
+      global.document.getElementById('c').appendChild(d);
+
+      if (data['zoeMultiAd'] !== 'true') {
+        (global.gZgokZoeQueue = global.gZgokZoeQueue || []).push({frameId});
+      }
+
+      (global.gZgokZoeWidgetQueue = global.gZgokZoeWidgetQueue || []).push({
+        frameId,
+        parent: `#${elementId}`,
+      });
+    });
+  } else if (data['adtype'] === 'native') {
+    const s = global.document.createElement('script');
+    s.src = `https://j.zucks.net.zimg.jp/n?f=${data['frameId']}`;
+    global.document.getElementById('c').appendChild(s);
+  } else {
+    writeScript(global, `https://j.zucks.net.zimg.jp/j?f=${data['frameId']}`);
+  }
+}
diff --git a/ads/zucks.md b/ads/vendors/zucks.md
similarity index 98%
rename from ads/zucks.md
rename to ads/vendors/zucks.md
index f722979815791..18c2bad6ff276 100644
--- a/ads/zucks.md
+++ b/ads/vendors/zucks.md
@@ -71,4 +71,4 @@ For more information, please [contact Zucks](https://zucks.co.jp/contact/).
 
 Supported parameters:
 
-- `data-frame-id`
+-   `data-frame-id`
diff --git a/ads/videointelligence.js b/ads/videointelligence.js
deleted file mode 100644
index 8f0b1090b9184..0000000000000
--- a/ads/videointelligence.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function videointelligence(global, data) {
-  validateData(data, ['publisherId', 'channelId']);
-
-  loadScript(global, 'https://s.vi-serve.com/tagLoaderAmp.js');
-}
diff --git a/ads/videonow.js b/ads/videonow.js
deleted file mode 100644
index 92cc8dd5a788f..0000000000000
--- a/ads/videonow.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-import {parseJson} from '../src/json';
-import {tryDecodeUriComponent} from '../src/url';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function videonow(global, data) {
-  const mandatoryAttributes = ['pid', 'width', 'height'];
-  const optionalAttributes = ['kind', 'src'];
-
-  let customTag = '';
-  let logLevel = null;
-  let vnModule = '';
-
-  if (global && global.name) {
-    const p = parseJson(global.name);
-    if (
-      p &&
-      p['attributes'] &&
-      p['attributes']['_context'] &&
-      p['attributes']['_context']['location'] &&
-      p['attributes']['_context']['location']['href']
-    ) {
-      const {href} = p['attributes']['_context']['location'];
-      const logLevelParsed = /[?&]vn_debug\b(?:=(\d+))?/.exec(href);
-      const vnModuleParsed = /vn_module=([^&]*)/.exec(href);
-      const customTagParsed = /vn_init_module=([^&]*)/.exec(href);
-
-      logLevel = (logLevelParsed && logLevelParsed[1]) || null;
-      vnModule = (vnModuleParsed && vnModuleParsed[1]) || '';
-      customTag = (customTagParsed && customTagParsed[1]) || '';
-    }
-  }
-  validateData(data, mandatoryAttributes, optionalAttributes);
-
-  const profileId = data.pid || 1;
-
-  // production version by default
-  let script =
-    (customTag && tryDecodeUriComponent(customTag)) ||
-    (data.src && tryDecodeUriComponent(data.src)) ||
-    'https://cdn.videonow.ru/vn_init_module.js';
-
-  script = addParam(script, 'amp', 1);
-  script = addParam(script, 'profileId', profileId);
-  if (logLevel !== null) {
-    script = addParam(script, 'vn_debug', String(logLevel));
-  }
-  if (vnModule) {
-    script = addParam(script, 'vn_module', vnModule);
-  }
-
-  loadScript(global, script);
-}
-
-/**
- * @param {string} script
- * @param {string} name
- * @param {string|number}value
- * @return {string}
- */
-function addParam(script, name, value) {
-  if (script.indexOf(name) < 0) {
-    script += (~script.indexOf('?') ? '&' : '?') + name + '=' + value;
-  }
-  return script;
-}
diff --git a/ads/viralize.js b/ads/viralize.js
deleted file mode 100644
index 8e3af774c044d..0000000000000
--- a/ads/viralize.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {addParamsToUrl} from '../src/url';
-import {loadScript, validateData} from '../3p/3p';
-import {parseJson} from '../src/json';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function viralize(global, data) {
-  const endpoint = 'https://ads.viralize.tv/display/';
-  const required = ['zid'];
-  const optional = ['extra'];
-
-  validateData(data, required, optional);
-
-  const defaultLocation = 'sel-#c>script';
-  const pubPlatform = 'amp';
-
-  const queryParams = parseJson(data.extra || '{}');
-  queryParams['zid'] = data.zid;
-  queryParams['pub_platform'] = pubPlatform;
-  if (!queryParams['location']) {
-    queryParams['location'] = defaultLocation;
-  }
-  if (!queryParams['u']) {
-    queryParams['u'] = global.context.sourceUrl;
-  }
-
-  const scriptUrl = addParamsToUrl(endpoint, queryParams);
-
-  loadScript(
-    global,
-    scriptUrl,
-    () => global.context.renderStart(),
-    () => global.context.noContentAvailable()
-  );
-}
diff --git a/ads/vmfive.js b/ads/vmfive.js
deleted file mode 100644
index b230b00f3d1cc..0000000000000
--- a/ads/vmfive.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function vmfive(global, data) {
-  /*eslint "google-camelcase/google-camelcase": 0*/
-  const mandatory_fields = ['appKey', 'placementId', 'adType'];
-  const optional_fields = [];
-
-  const {appKey, placementId, adType} = data;
-
-  global._vmfive_amp = {appKey, placementId, adType};
-
-  validateData(data, mandatory_fields, optional_fields);
-
-  createAdUnit(global, placementId, adType);
-  setupSDKReadyCallback(global, appKey);
-  parallelDownloadScriptsAndExecuteInOrder(global);
-}
-
-/**
- * @param {!Window} win
- */
-function parallelDownloadScriptsAndExecuteInOrder(win) {
-  [
-    'https://vawpro.vm5apis.com/man.js',
-    'https://man.vm5apis.com/dist/adn-web-sdk.js',
-  ].forEach(function (src) {
-    const script = document.createElement('script');
-    script.src = src;
-    script.async = false;
-    win.document.head.appendChild(script);
-  });
-}
-
-/**
- * @param {!Window} win
- * @param {string} placementId
- * @param {string} adType
- */
-function createAdUnit(win, placementId, adType) {
-  const el = document.createElement('vmfive-ad-unit');
-  el.setAttribute('placement-id', placementId);
-  el.setAttribute('ad-type', adType);
-  win.document.getElementById('c').appendChild(el);
-}
-
-/**
- * @param {!Window} win
- * @param {string} appKey
- */
-function setupSDKReadyCallback(win, appKey) {
-  win.onVM5AdSDKReady = (sdk) => sdk.init({appKey});
-}
diff --git a/ads/webediads.js b/ads/webediads.js
deleted file mode 100644
index c3942b607e3aa..0000000000000
--- a/ads/webediads.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * Created by Webedia on 07/03/16 - last updated on 11/10/16
- * @param {!Window} global
- * @param {!Object} data
- */
-export function webediads(global, data) {
-  validateData(data, ['site', 'page', 'position'], ['query']);
-  loadScript(global, 'https://eu1.wbdds.com/amp.min.js', () => {
-    global.wads.amp.init({
-      'site': data.site,
-      'page': data.page,
-      'position': data.position,
-      'query': data.query ? data.query : '',
-    });
-  });
-}
diff --git a/ads/weborama.md b/ads/weborama.md
deleted file mode 100644
index cbd3a9846016c..0000000000000
--- a/ads/weborama.md
+++ /dev/null
@@ -1,106 +0,0 @@
-<!---
-Copyright 2015 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.
--->
-
-# Weborama
-
-## Example
-
-**Display tag:**
-
-See below for an example of usage or our display tag, adapted for use with AMP websites:
-
-```html
-<amp-ad
-  width="300"
-  height="250"
-  type="weborama-display"
-  data-wbo_account_id="51"
-  data-wbo_tracking_element_id="137"
-  data-wbo_fullhost="certification.solution.weborama.fr"
-  data-wbo_random="[RANDOM]"
-  data-wbo_publisherclick="[PUBLISHER_TRACKING_URL]"
->
-  <div placeholder>Loading ad.</div>
-  <div fallback>Ad could not be loaded.</div>
-</amp-ad>
-```
-
-**Conversion tag:**
-
-In order to add conversion trackers to your page, please use the AMP pixel component that will be supplied to you by your Weborama contact.
-The values mentioned between brackets `[]` should be replaced by the proper values.
-
-`DOCUMENT_REFERRER`, `SOURCE_URL` and `RANDOM` should remain in the URL, as AMP takes care of the automatic substitution of these values.
-
-```html
-<amp-pixel
-  src="http://[YOUR_HOST].solution.weborama.fr/fcgi-bin/dispatch.fcgi?a.A=co&a.si=[SITE_ID]&a.cp=[CONVERSION_PAGE]&a.ct=b&g.ru=DOCUMENT_REFERRER&g.pu=SOURCE_URL&g.cb=RANDOM"
-></amp-pixel>
-```
-
-## Configuration
-
-**Placeholder and fallback:**
-
-The placeholder and fallback `div` elements are completely optional and can be left out.
-
-- The placeholder is shown while the ad is loading.
-- The fallback is served when there is no ad to show for some reason.
-
-**Dimensions:**
-
-By default the ad size is based on the `width` and `height` attributes of the `amp-ad` tag. These are listed as mandatory parameters.
-
-The AMP ad component requires the following HTML attributes to be added before the ad will be parsed as a Weborama ad:
-
-- width
-- height
-- type="weborama-display"
-
-**Mandatory data parameters:**
-
-Without valid values for these parameters we won't be able to display an ad:
-
-- `data-wbo_account_id`
-- `data-wbo_tracking_element_id`
-- `data-wbo_fullhost`
-
-**Examples of optional parameters:**
-
-Here are some extra parameters that might be set on the AMP ad:
-
-- `data-wbo_random` - Used as session identifier by some 3rd party ad systems
-- `data-wbo_publisherclick` - Adds a publisher redirect for the exit click.
-- `data-wbo_vars` - Sends variables to the creative. e.g.: `color=green&weather=rainy`
-- `data-wbo_debug` - Launch the ad in debug mode.
-- ... ask your contact at Weborama for more details.
-
-## Current restrictions
-
-- AMP ads are launched in a cross-origin iframe, so there currently is no support for some rich media, amongst which:
-  - Expandables
-  - Floorads, Interstitials and other types of layers
-  - Flash ads
-  - Creatives served over HTTP.
-- Click and impression trackers can't be added to the tag. They need to be added through Weborama's ad platform: WCM.
-- At the moment we don't support dynamic resizing of the iframe. Support for this will be added on request.
-
-## Support
-
-If you have any questions, please refer to your contact at Weborama. Otherwise you can contact our TIER 2 support:
-
-- E: tier2support@weborama.nl
-- T: +31 (0) 20 52 46 690
diff --git a/ads/whopainfeed.js b/ads/whopainfeed.js
deleted file mode 100644
index a202e786c3228..0000000000000
--- a/ads/whopainfeed.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function whopainfeed(global, data) {
-  validateData(data, ['siteid']);
-
-  global._whopainfeed = global._whopainfeed || {
-    viewId: global.context.pageViewId,
-    siteId: data['siteid'],
-    testMode: data['testmode'] || 'false',
-    template: data['template'] || 'default',
-  };
-
-  loadScript(global, 'https://widget.infeed.com.ar/widget/widget-amp.js');
-}
diff --git a/ads/widespace.js b/ads/widespace.js
deleted file mode 100644
index 3ceeb6e2ea136..0000000000000
--- a/ads/widespace.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function widespace(global, data) {
-  const WS_AMP_CODE_VER = '1.0.1';
-  // Optional demography parameters.
-  let demo = [];
-
-  demo = ['Gender', 'Country', 'Region', 'City', 'Postal', 'Yob'].map((d) => {
-    return 'demo' + d;
-  });
-
-  validateData(data, ['sid'], demo);
-
-  const url =
-    'https://engine.widespace.com/map/engine/dynamic?isamp=1' +
-    '&ampver=' +
-    WS_AMP_CODE_VER +
-    '&#sid=' +
-    encodeURIComponent(data.sid);
-
-  writeScript(global, url);
-}
diff --git a/ads/wisteria.js b/ads/wisteria.js
deleted file mode 100644
index a37282f909d8b..0000000000000
--- a/ads/wisteria.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function wisteria(global, data) {
-  const d = global.document.createElement('div');
-  d.id = '_wisteria_recommend_contents';
-  global.document.getElementById('c').appendChild(d);
-  //get canonical url
-  const originalUrl = global.context.canonicalUrl;
-  validateData(data, ['siteId', 'templateNumber']);
-  loadScript(
-    global,
-    'https://wisteria-js.excite.co.jp/wisteria.js?site_id=' +
-      data['siteId'] +
-      '&template_no=' +
-      data['templateNumber'] +
-      '&original_url=' +
-      originalUrl
-  );
-}
diff --git a/ads/wpmedia.js b/ads/wpmedia.js
deleted file mode 100644
index 75a4f8630d5a4..0000000000000
--- a/ads/wpmedia.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function wpmedia(global, data) {
-  validateData(data, ['slot', 'bunch'], ['sn', 'slots']);
-
-  // const url = 'http://localhost/wpjslib.js';
-  const url = 'https://std.wpcdn.pl/wpjslib/wpjslib-amp.js';
-
-  writeScript(global, url, function () {
-    window.run(data);
-  });
-}
diff --git a/ads/xlift.js b/ads/xlift.js
deleted file mode 100644
index 9fd982df6a53c..0000000000000
--- a/ads/xlift.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function xlift(global, data) {
-  validateData(data, ['mediaid']);
-
-  global.xliftParams = data;
-  const d = global.document.createElement('div');
-  d.id = '_XL_recommend';
-  global.document.getElementById('c').appendChild(d);
-
-  d.addEventListener('SuccessLoadedXliftAd', function (e) {
-    e.detail = e.detail || {adSizeInfo: {}};
-    global.context.renderStart(e.detail.adSizeInfo);
-  });
-  d.addEventListener('FailureLoadedXliftAd', function () {
-    global.context.noContentAvailable();
-  });
-
-  //assign XliftAmpHelper property to global(window)
-  global.XliftAmpHelper = null;
-
-  loadScript(
-    global,
-    'https://cdn.x-lift.jp/resources/common/xlift_amp.js',
-    () => {
-      if (!global.XliftAmpHelper) {
-        global.context.noContentAvailable();
-      } else {
-        global.XliftAmpHelper.show();
-      }
-    },
-    () => {
-      global.context.noContentAvailable();
-    }
-  );
-}
diff --git a/ads/yahoo.js b/ads/yahoo.js
deleted file mode 100644
index c427884f28aa9..0000000000000
--- a/ads/yahoo.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function yahoo(global, data) {
-  validateData(data, ['sid', 'site', 'sa']);
-  global.yadData = data;
-  writeScript(global, 'https://s.yimg.com/aaq/ampad/display.js');
-}
diff --git a/ads/yahoofedads.js b/ads/yahoofedads.js
deleted file mode 100644
index 37e53b0c2a68f..0000000000000
--- a/ads/yahoofedads.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function yahoofedads(global, data) {
-  validateData(data, [
-    'adUnit',
-    'site',
-    'region',
-    'lang',
-    'sa',
-    'spaceId',
-    'url',
-  ]);
-
-  global.amp = true;
-  global.adConfig = {
-    'adUnit': data.adUnit,
-    'forceSource': data.forceSource,
-    'lang': data.lang,
-    'publisherUrl': data.url,
-    'region': data.region,
-    'sa': data.sa,
-    'sectionId': data.sectionId,
-    'site': data.site,
-    'spaceId': data.spaceId,
-  };
-
-  loadScript(
-    global,
-    'https://s.yimg.com/cv/apiv2/dy/fedads/fedads.mock.js',
-    () => global.context.renderStart()
-  );
-}
diff --git a/ads/yahoofedads.md b/ads/yahoofedads.md
deleted file mode 100644
index e435008ace2a7..0000000000000
--- a/ads/yahoofedads.md
+++ /dev/null
@@ -1,55 +0,0 @@
-<!---
-Copyright 2020 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.
--->
-
-# Yahoo Native-Display Ads Federation
-
-## Example
-
-Yahoo Native-Display Ads Federation only requires a configured section code to run. Please work with your account manager to configure your AMP sections.
-
-### Basic
-
-```html
-<amp-embed
-  width="320"
-  height="320"
-  layout="responsive"
-  type="yahoofedads"
-  data-site="finance"
-  data-region="US"
-  data-lang="en-US"
-
-  data-ad-unit="pencil"
-  data-sa="{&quot;LREC&quot;:&quot;300x250&quot;,&quot;secure&quot;:&quot;true&quot;,&quot;content&quot;:&quot;no_expandable;&quot;,&quot;isSupplySegment&quot;:&quot;false&quot;,&quot;lang&quot;:&quot;en-US&quot;,&quot;region&quot;:&quot;US&quot;,&quot;site_attribute&quot;:&quot;wiki_topics=\&quot;Anthony_Joshua;Tyson_Fury;Eddie_Hearn;Deontay_Wilder;Kubrat_Pulev;Tottenham_Hotspur_Stadium;Dillian_Whyte\&quot; ctopid=\&quot;2074500;2078500;2083000;2212000;13311000\&quot; hashtag=\&quot;2074500;2078500;2083000;2212000;13311000\&quot; rs=\&quot;lmsid:a0ad000000AxDnbAAF;revsp:omnisport.uk;lpstaid:71ee6f14-9c73-3688-b4a9-32e6578057d0;pct:story\&quot;&quot;}"
-  data-url="https://techcrunch.com"
-  /* Optional override parameters */
-  data-space-id="980771322"
-  data-section-id="5661957"
->
-</amp-embed>
-```
-
-### Required parameters
-
-- `data-site`, `data-region`, `data-lang`: Unique site/region/lang code that represents your site
-- `data-ad-unit`: The template used by picked Native AD
-- `data-sa`: The site-attribute used by display AD to render
-- `data-url` : Url the AD is hosted in for tracking purpose
-
-### Optional override parameters
-
-- `data-space-id`: Use this to override what space id need to be used on picking up Display AD
-- `data-section-id`: Use this ot override what section id need to be used on picking up Native AD
diff --git a/ads/yahoojp.js b/ads/yahoojp.js
deleted file mode 100644
index a26a1c143c8e6..0000000000000
--- a/ads/yahoojp.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function yahoojp(global, data) {
-  validateData(data, ['yadsid'], []);
-  global.yahoojpParam = data;
-  writeScript(
-    global,
-    'https://s.yimg.jp/images/listing/tool/yads/ydn/amp/amp.js'
-  );
-}
diff --git a/ads/yahoonativeads.js b/ads/yahoonativeads.js
deleted file mode 100644
index 4d2c284d9ec07..0000000000000
--- a/ads/yahoonativeads.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function yahoonativeads(global, data) {
-  validateData(data, ['key', 'code', 'url']);
-
-  (global.native = global.native || []).push(data.code);
-
-  global.apiKey = data.key;
-  global.publisherUrl = data.url;
-  global.amp = true;
-
-  loadScript(global, 'https://s.yimg.com/dy/ads/native.js', () =>
-    global.context.renderStart()
-  );
-}
diff --git a/ads/yahoonativeads.md b/ads/yahoonativeads.md
deleted file mode 100644
index 764eb536c7ddc..0000000000000
--- a/ads/yahoonativeads.md
+++ /dev/null
@@ -1,41 +0,0 @@
-<!---
-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.
--->
-
-# Yahoo Native Ads
-
-## Example
-
-Yahoo Native Ads only requires a configured section code to run. Please work with your account manager to configure your AMP sections.
-
-### Basic
-
-```html
-<amp-embed
-  width="320"
-  height="320"
-  type="yahoonativeads"
-  data-code="192b5193-edb2-31c0-88be-4022dhca1090"
-  data-key="P55VS9SY2WQXH7TTN8ZA"
-  data-url="https://techcrunch.com"
->
-</amp-embed>
-```
-
-### Required parameters
-
-- `data-code` : Unique section code that represents your site and placement
-- `data-key` : Unique API key that was issued for your site
-- `data-url` : Url that your API key and section code are valid to run on
diff --git a/ads/yandex.js b/ads/yandex.js
deleted file mode 100644
index 33bf5ced20ddf..0000000000000
--- a/ads/yandex.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {loadScript, validateData} from '../3p/3p';
-
-const n = 'yandexContextAsyncCallbacks';
-const renderTo = 'yandex_rtb';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function yandex(global, data) {
-  validateData(data, ['blockId'], ['data', 'onRender', 'onError']);
-
-  addToQueue(global, data);
-  loadScript(
-    global,
-    'https://yastatic.net/partner-code/loaders/context_amp.js'
-  );
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-function addToQueue(global, data) {
-  global[n] = global[n] || [];
-  global[n].push(() => {
-    // Create container
-    createContainer(global, renderTo);
-
-    // Show Ad in container
-    global.Ya.Context.AdvManager.render(
-      {
-        blockId: data.blockId,
-        statId: data.statId,
-        renderTo,
-        data: data.data,
-        async: true,
-        onRender: () => {
-          if (typeof data.onRender === 'function') {
-            data.onRender();
-          }
-          global.context.renderStart();
-        },
-      },
-      () => {
-        if (typeof data.onError === 'function') {
-          data.onError();
-        } else {
-          global.context.noContentAvailable();
-        }
-      }
-    );
-  });
-}
-
-/**
- * @param {!Window} global
- * @param {string} id
- */
-function createContainer(global, id) {
-  const d = global.document.createElement('div');
-  d.id = id;
-  global.document.getElementById('c').appendChild(d);
-}
diff --git a/ads/yengo.js b/ads/yengo.js
deleted file mode 100644
index ed4bd3651a14b..0000000000000
--- a/ads/yengo.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function yengo(global, data) {
-  validateData(data, ['blockId']);
-
-  const url =
-    'https://code.yengo.com/data/' +
-    encodeURIComponent(data['blockId']) +
-    '.js?async=1&div=c';
-
-  loadScript(
-    global,
-    url,
-    () => {
-      global.context.renderStart();
-    },
-    () => {
-      global.context.noContentAvailable();
-    }
-  );
-}
diff --git a/ads/yieldbot.js b/ads/yieldbot.js
deleted file mode 100644
index 69ebf23ed21eb..0000000000000
--- a/ads/yieldbot.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {getMultiSizeDimensions} from '../ads/google/utils';
-import {loadScript, validateData} from '../3p/3p';
-import {rethrowAsync, user} from '../src/log';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function yieldbot(global, data) {
-  validateData(data, ['psn', 'ybSlot', 'slot']);
-
-  global.ybotq = global.ybotq || [];
-
-  loadScript(global, 'https://cdn.yldbt.com/js/yieldbot.intent.amp.js', () => {
-    global.ybotq.push(() => {
-      try {
-        const multiSizeDataStr = data.multiSize || null;
-        const primaryWidth = parseInt(data.overrideWidth || data.width, 10);
-        const primaryHeight = parseInt(data.overrideHeight || data.height, 10);
-        let dimensions;
-
-        if (multiSizeDataStr) {
-          dimensions = getMultiSizeDimensions(
-            multiSizeDataStr,
-            primaryWidth,
-            primaryHeight,
-            false
-          );
-          dimensions.unshift([primaryWidth, primaryHeight]);
-        } else {
-          dimensions = [[primaryWidth, primaryHeight]];
-        }
-
-        global.yieldbot.psn(data.psn);
-        global.yieldbot.enableAsync();
-        if (window.context.isMaster) {
-          global.yieldbot.defineSlot(data.ybSlot, {sizes: dimensions});
-          global.yieldbot.go();
-        } else {
-          const slots = {};
-          slots[data.ybSlot] = dimensions;
-          global.yieldbot.nextPageview(slots);
-        }
-      } catch (e) {
-        rethrowAsync(e);
-      }
-    });
-
-    global.ybotq.push(() => {
-      try {
-        const targeting = global.yieldbot.getSlotCriteria(data['ybSlot']);
-        data['targeting'] = data['targeting'] || {};
-        for (const key in targeting) {
-          data.targeting[key] = targeting[key];
-        }
-      } catch (e) {
-        rethrowAsync(e);
-      }
-      user().warn(
-        'AMP-AD',
-        'type="yieldbot" will no longer ' +
-          'be supported starting on March 29, 2018.' +
-          ' Please use your amp-ad-network and RTC to configure a' +
-          ' Yieldbot callout vendor. Refer to' +
-          ' https://github.com/ampproject/amphtml/blob/master/' +
-          'extensions/amp-a4a/rtc-publisher-implementation-guide.md' +
-          '#setting-up-rtc-config for more information.'
-      );
-    });
-  });
-}
diff --git a/ads/yieldmo.js b/ads/yieldmo.js
deleted file mode 100644
index 6cc66c83f1dec..0000000000000
--- a/ads/yieldmo.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function yieldmo(global, data) {
-  const ymElem = global.document.createElement('div');
-  ymElem.id = 'ym_' + data.ymid;
-  ymElem.className = 'ym';
-  ymElem.dataset['ampEnabled'] = true;
-  global.document.getElementById('c').appendChild(ymElem);
-
-  const swimLane = Math.round((5 * Math.random()) / 3);
-  const ymJs = 'https://static.yieldmo.com/ym.' + swimLane + '.js';
-
-  loadScript(global, ymJs);
-}
diff --git a/ads/yieldone.js b/ads/yieldone.js
deleted file mode 100644
index 14349502ef1a9..0000000000000
--- a/ads/yieldone.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function yieldone(global, data) {
-  validateData(data, ['pubid', 'pid', 'width', 'height'], []);
-
-  global.yieldoneParam = data;
-  writeScript(
-    global,
-    'https://img.ak.impact-ad.jp/ic/pone/commonjs/yone-amp.js'
-  );
-}
diff --git a/ads/yieldpro.js b/ads/yieldpro.js
deleted file mode 100644
index 92906fca39e26..0000000000000
--- a/ads/yieldpro.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {computeInMasterFrame, loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function yieldpro(global, data) {
-  validateData(
-    data,
-    ['sectionId', 'slot', 'pubnetwork'],
-    [
-      'instance',
-      'custom',
-      'adServerUrl',
-      'cacheSafe',
-      'pageIdModifier',
-      'click3rd',
-      'debugsrc',
-    ]
-  );
-  //TODO support dmp and cookie
-
-  const SCRIPT_HOST = 'creatives.yieldpro.eu/showad_';
-
-  let scriptUrl = 'https://' + SCRIPT_HOST + data['pubnetwork'] + '.js';
-
-  if (data['debugsrc']) {
-    scriptUrl = data['debugsrc'];
-  }
-
-  computeInMasterFrame(
-    global,
-    'yieldpro-request',
-    (done) => {
-      let success = false;
-      const masterWin = this;
-      if (!masterWin.showadAMPAdapter) {
-        masterWin.showadAMPAdapter = {
-          registerSlot: () => {},
-        };
-        loadScript(this, scriptUrl, () => {
-          if (masterWin.showadAMPAdapter.inited) {
-            success = true;
-          }
-          done(success);
-        });
-      } else {
-        done(true);
-      }
-    },
-    (success) => {
-      if (success) {
-        global.showadAMPAdapter = global.context.master.showadAMPAdapter;
-        global.showadAMPAdapter.registerSlot(data, global);
-      } else {
-        throw new Error('Yieldpro AdTag failed to load');
-      }
-    }
-  );
-}
diff --git a/ads/yieldpro.md b/ads/yieldpro.md
deleted file mode 100644
index 6c3bed5cdfccc..0000000000000
--- a/ads/yieldpro.md
+++ /dev/null
@@ -1,100 +0,0 @@
-<!---
-Copyright 2015 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.
--->
-
-# YieldPro
-
-## Examples
-
-### Single ad
-
-```html
-<amp-ad
-  width="728"
-  height="90"
-  type="yieldpro"
-  data-pubnetwork="12c6fc06"
-  data-section-id="100"
-  data-slot="107"
->
-</amp-ad>
-```
-
-### Multi instance ads
-
-```html
-<amp-ad
-  width="250"
-  height="250"
-  type="yieldpro"
-  data-pubnetwork="12c6fc06"
-  data-section-id="475"
-  data-slot="650"
-  data-instance="1"
->
-</amp-ad>
-<amp-ad
-  width="250"
-  height="250"
-  type="yieldpro"
-  data-pubnetwork="12c6fc06"
-  data-section-id="475"
-  data-slot="650"
-  data-instance="2"
->
-</amp-ad>
-```
-
-### Using custom params and custom ad server url
-
-```html
-<amp-ad
-  width="728"
-  height="90"
-  type="yieldpro"
-  data-pubnetwork="12c6fc06"
-  data-section-id="100"
-  data-slot="107"
-  data-custom='{"my_custom_param":"my_custom_value"}'
-  data-ad-server-url="//creative.yieldpro.eu/ad"
->
-</amp-ad>
-```
-
-## Configuration
-
-For details on the configuration semantics, please contact the ad network or refer to their documentation.
-
-### Required parameters
-
-- `sectionId`: ID of this section in ad server.
-- `slot`: ID of ad slot in ad server.
-- `pubnetwork`: ID of the publisher that in ad server.
-
-### Optional parameters
-
-- `instance`: ID of section instance in case we multiple times used the same section on the same page. Can contain only letters and numbers.Strictly required to use the same section multiple times per page.
-- `click3rd`: 3rd party click watcher.
-- `adServerUrl`
-- `cacheSafe`
-- `pageIdModifier`
-- `custom`: Custom targeting properties. You may use 3 types for its properties: `{String}`, `{Number}` and `{Array}`. The following array usage example translates into: `arrayKey=value1&arrayKey=1&stringKey=stringValue...`
-
-  ```text
-  {
-      arrayKey: [ "value1", 1 ],
-      stringKey: 'stringValue'
-  }
-  ```
diff --git a/ads/zedo.js b/ads/zedo.js
deleted file mode 100644
index 3a846e02e6631..0000000000000
--- a/ads/zedo.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function zedo(global, data) {
-  // check mandatory fields
-  validateData(
-    data,
-    ['superId', 'network', 'placementId', 'channel', 'publisher', 'dim'],
-    ['charset', 'callback', 'renderer']
-  );
-
-  loadScript(global, 'https://ss3.zedo.com/gecko/tag/Gecko.amp.min.js', () => {
-    const {ZGTag} = global;
-    const charset = data.charset || '';
-    const callback = data.callback || function () {};
-    const geckoTag = new ZGTag(
-      data.superId,
-      data.network,
-      '',
-      '',
-      charset,
-      callback
-    );
-    geckoTag.setAMP();
-    // define placement
-    const placement = geckoTag.addPlacement(
-      data.placementId,
-      data.channel,
-      data.publisher,
-      data.dim,
-      data.width,
-      data.height
-    );
-    if (data.renderer) {
-      for (const key in data.renderer) {
-        placement.includeRenderer(
-          data.renderer[key].name,
-          data.renderer[key].value
-        );
-      }
-    } else {
-      placement.includeRenderer('display', {});
-    }
-    //create a slot div to display ad
-    const slot = global.document.createElement('div');
-    slot.id = 'zdt_' + data.placementId;
-
-    const divContainer = global.document.getElementById('c');
-    if (divContainer) {
-      divContainer.appendChild(slot);
-    }
-
-    // call load ads
-    geckoTag.loadAds();
-
-    // call div ready
-    geckoTag.placementReady(data.placementId);
-  });
-}
diff --git a/ads/zen.js b/ads/zen.js
deleted file mode 100644
index 0ea812b3dc676..0000000000000
--- a/ads/zen.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {loadScript, validateData} from '../3p/3p';
-
-const n = 'yandexZenAsyncCallbacks';
-const renderTo = 'zen-widget';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function zen(global, data) {
-  validateData(
-    data,
-    ['clid'],
-    ['size', 'orientation', 'successCallback', 'failCallback']
-  );
-
-  addToQueue(global, data);
-  loadScript(global, 'https://zen.yandex.ru/widget-loader');
-}
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-function addToQueue(global, data) {
-  global[n] = global[n] || [];
-  global[n].push(() => {
-    // Create container
-    createContainer(global, renderTo);
-
-    const {YandexZen} = global;
-    const config = Object.assign(data, {
-      clid: JSON.parse(data.clid),
-      container: `#${renderTo}`,
-      isAMP: true,
-      successCallback: () => {
-        if (typeof data.successCallback === 'function') {
-          data.successCallback();
-        }
-      },
-      failCallback: () => {
-        if (typeof data.failCallback === 'function') {
-          data.failCallback();
-        }
-      },
-    });
-
-    YandexZen.renderWidget(config);
-  });
-}
-
-/**
- * @param {!Window} global
- * @param {string} id
- */
-function createContainer(global, id) {
-  const d = global.document.createElement('div');
-  d.id = id;
-  global.document.getElementById('c').appendChild(d);
-}
diff --git a/ads/zergnet.js b/ads/zergnet.js
deleted file mode 100644
index 10477ac43c42f..0000000000000
--- a/ads/zergnet.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function zergnet(global, data) {
-  validateData(data, ['zergid'], []);
-  global.zergnetWidgetId = data.zergid;
-  writeScript(global, 'https://www.zergnet.com/zerg-amp.js');
-}
diff --git a/ads/zucks.js b/ads/zucks.js
deleted file mode 100644
index 57b25b02e8cf0..0000000000000
--- a/ads/zucks.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {loadScript, validateData, writeScript} from '../3p/3p';
-
-/**
- * @param {!Window} global
- * @param {!Object} data
- */
-export function zucks(global, data) {
-  validateData(data, ['frameId']);
-  if (data['adtype'] === 'zoe') {
-    loadScript(global, 'https://j.zoe.zucks.net/zoe.min.js', function () {
-      const frameId = data['frameId'];
-      const elementId = 'zucks-widget-parent';
-
-      const d = global.document.createElement('ins');
-      d.id = elementId;
-      global.document.getElementById('c').appendChild(d);
-
-      if (data['zoeMultiAd'] !== 'true') {
-        (global.gZgokZoeQueue = global.gZgokZoeQueue || []).push({frameId});
-      }
-
-      (global.gZgokZoeWidgetQueue = global.gZgokZoeWidgetQueue || []).push({
-        frameId,
-        parent: `#${elementId}`,
-      });
-    });
-  } else if (data['adtype'] === 'native') {
-    const s = global.document.createElement('script');
-    s.src = `https://j.zucks.net.zimg.jp/n?f=${data['frameId']}`;
-    global.document.getElementById('c').appendChild(s);
-  } else {
-    writeScript(global, `https://j.zucks.net.zimg.jp/j?f=${data['frameId']}`);
-  }
-}
diff --git a/amp.js b/amp.js
new file mode 100755
index 0000000000000..727c5fae82e77
--- /dev/null
+++ b/amp.js
@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+/**
+ * Copyright 2021 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.
+ */
+
+const {
+  createTask,
+  finalizeRunner,
+} = require('./build-system/task-runner/amp-task-runner');
+
+/**
+ * All the AMP tasks. Keep this list alphabetized.
+ *
+ * The three params used below are:
+ * 1. Name of the amp task to be invoked.
+ *    E.g. amp default
+ * 2. Name of the function in the source file.
+ *    E.g. defaultTask()
+ *    If not specified, this is assumed to be the same as the task name.
+ * 3. Basename of the source file in build-system/tasks/.
+ *    E.g. build-system/tasks/default-task.js
+ *    If not specified, this is assumed to be the same as the task name.
+ */
+createTask('analytics-vendor-configs', 'analyticsVendorConfigs');
+createTask('ava');
+createTask('babel-plugin-tests', 'babelPluginTests');
+createTask('build');
+createTask('bundle-size', 'bundleSize');
+createTask('caches-json', 'cachesJson');
+createTask('check-analytics-vendors-list', 'checkAnalyticsVendorsList');
+createTask('check-asserts', 'checkAsserts');
+createTask('check-build-system', 'checkBuildSystem');
+createTask('check-exact-versions', 'checkExactVersions');
+createTask('check-invalid-whitespaces', 'checkInvalidWhitespaces');
+createTask('check-links', 'checkLinks');
+createTask('check-owners', 'checkOwners');
+createTask('check-renovate-config', 'checkRenovateConfig');
+createTask('check-sourcemaps', 'checkSourcemaps');
+createTask('check-types', 'checkTypes');
+createTask('check-video-interface-list', 'checkVideoInterfaceList');
+createTask('cherry-pick', 'cherryPick');
+createTask('clean');
+createTask('codecov-upload', 'codecovUpload');
+createTask('compile-jison', 'compileJison');
+createTask('coverage-map', 'coverageMap');
+createTask('css');
+createTask('default', 'defaultTask', 'default-task');
+createTask('dep-check', 'depCheck');
+createTask('dev-dashboard-tests', 'devDashboardTests');
+createTask('dist');
+createTask('e2e');
+createTask('firebase');
+createTask('get-zindex', 'getZindex');
+createTask('integration');
+createTask('lint');
+createTask('make-extension', 'makeExtension');
+createTask('markdown-toc', 'markdownToc');
+createTask('performance');
+createTask('performance-urls', 'performanceUrls');
+createTask('pr-check', 'prCheck');
+createTask('prepend-global', 'prependGlobal');
+createTask('presubmit', 'presubmit');
+createTask('prettify');
+createTask('release');
+createTask('serve');
+createTask('server-tests', 'serverTests');
+createTask('storybook');
+createTask('sweep-experiments', 'sweepExperiments');
+createTask('test-report-upload', 'testReportUpload');
+createTask('unit');
+createTask('validate-html-fixtures', 'validateHtmlFixtures');
+createTask('validator');
+createTask('validator-cpp', 'validatorCpp', 'validator');
+createTask('validator-webui', 'validatorWebui', 'validator');
+createTask('visual-diff', 'visualDiff');
+
+/**
+ * Finalize the task runner after all tasks have been created.
+ */
+finalizeRunner();
diff --git a/babel.config.js b/babel.config.js
index 37f85457a5a31..1d0e4f29d037e 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -25,31 +25,27 @@
 
 'use strict';
 
-const log = require('fancy-log');
-const {
-  getDepCheckConfig,
-  getPostClosureConfig,
-  getPreClosureConfig,
-  getTestConfig,
-  getUnminifiedConfig,
-} = require('./build-system/babel-config');
-const {cyan, yellow} = require('ansi-colors');
+const {cyan, yellow} = require('./build-system/common/colors');
+const {log} = require('./build-system/common/logging');
 
 /**
- * Mapping of babel transform callers to their corresponding babel configs.
+ * Mapping of each babel transform caller to the name of the function that
+ * returns its config.
  */
 const babelTransforms = new Map([
-  ['babel-jest', {}],
-  ['dep-check', getDepCheckConfig()],
-  ['post-closure', getPostClosureConfig()],
-  ['pre-closure', getPreClosureConfig()],
-  ['test', getTestConfig()],
-  ['unminified', getUnminifiedConfig()],
+  ['babel-jest', 'getEmptyConfig'],
+  ['post-closure', 'getPostClosureConfig'],
+  ['pre-closure', 'getPreClosureConfig'],
+  ['test', 'getTestConfig'],
+  ['unminified', 'getUnminifiedConfig'],
+  ['minified', 'getMinifiedConfig'],
+  ['@babel/eslint-parser', 'getEslintConfig'],
 ]);
 
 /**
- * Main entry point. Returns babel config corresponding to the caller, or a
- * blank config if the caller is unrecognized.
+ * Main entry point. Returns babel config corresponding to the caller, or an
+ * empty object if the caller is unrecognized. Configs are lazy-required when
+ * requested so we don't unnecessarily compute the entire set for all callers.
  *
  * @param {!Object} api
  * @return {!Object}
@@ -59,7 +55,8 @@ module.exports = function (api) {
     return callerObj ? callerObj.name : '<unnamed>';
   });
   if (callerName && babelTransforms.has(callerName)) {
-    return babelTransforms.get(callerName);
+    const configFunctionName = babelTransforms.get(callerName);
+    return require('./build-system/babel-config')[configFunctionName]();
   } else {
     log(
       yellow('WARNING:'),
diff --git a/build-system/.eslintrc.js b/build-system/.eslintrc.js
index 4916b987de2ce..c518208ea589a 100644
--- a/build-system/.eslintrc.js
+++ b/build-system/.eslintrc.js
@@ -39,14 +39,13 @@ module.exports = {
     'local/no-bigint': 0,
     'local/no-dynamic-import': 0,
     'local/no-export-side-effect': 0,
-    'local/no-for-of-statement': 0,
     'local/no-function-async': 0,
     'local/no-function-generator': 0,
     'local/no-has-own-property-method': 0,
     'local/no-import-meta': 0,
+    'local/no-invalid-this': 0,
     'local/no-module-exports': 0,
     'local/no-rest': 0,
     'local/no-spread': 0,
-    'require-jsdoc': 0,
   },
 };
diff --git a/build-system/OWNERS b/build-system/OWNERS
index 32c5ea6d75438..48bef26a3d1fc 100644
--- a/build-system/OWNERS
+++ b/build-system/OWNERS
@@ -1,10 +1,18 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [{name: 'ampproject/wg-infra'}],
     },
+    {
+      pattern: '{package.json,package-lock.json}',
+      owners: [{name: 'ampproject/wg-infra', requestReviews: false}],
+    },
+    {
+      pattern: 'tsconfig.json',
+      owners: [{name: 'rileyajones', notify: true}],
+    },
   ],
 }
diff --git a/build-system/babel-config/OWNERS b/build-system/babel-config/OWNERS
index f254838b68bcc..efc9b448a63bf 100644
--- a/build-system/babel-config/OWNERS
+++ b/build-system/babel-config/OWNERS
@@ -1,12 +1,11 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [
         {name: 'ampproject/wg-infra'},
-        {name: 'ampproject/wg-runtime'},
         {name: 'ampproject/wg-performance'},
       ],
     },
diff --git a/build-system/babel-config/dep-check-config.js b/build-system/babel-config/dep-check-config.js
deleted file mode 100644
index 2dc015349f118..0000000000000
--- a/build-system/babel-config/dep-check-config.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Copyright 2020 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';
-
-/**
- * Gets the config for babel transforms run during `gulp dep-check`.
- *
- * @return {!Object}
- */
-function getDepCheckConfig() {
-  const reactJsxPlugin = [
-    '@babel/plugin-transform-react-jsx',
-    {
-      pragma: 'Preact.createElement',
-      pragmaFrag: 'Preact.Fragment',
-      useSpread: true,
-    },
-  ];
-  const presetEnv = [
-    '@babel/preset-env',
-    {
-      bugfixes: true,
-      modules: 'commonjs',
-      loose: true,
-      targets: {'browsers': ['Last 2 versions']},
-    },
-  ];
-  const depCheckPlugins = [
-    './build-system/babel-plugins/babel-plugin-transform-fix-leading-comments',
-    './build-system/babel-plugins/babel-plugin-transform-promise-resolve',
-    '@babel/plugin-transform-react-constant-elements',
-    '@babel/plugin-transform-classes',
-    reactJsxPlugin,
-  ];
-  const depCheckPresets = [presetEnv];
-  return {
-    compact: false,
-    plugins: depCheckPlugins,
-    presets: depCheckPresets,
-  };
-}
-
-module.exports = {
-  getDepCheckConfig,
-};
diff --git a/build-system/babel-config/empty-config.js b/build-system/babel-config/empty-config.js
new file mode 100644
index 0000000000000..37e542bc8514f
--- /dev/null
+++ b/build-system/babel-config/empty-config.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2021 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';
+
+/**
+ * Helper that creates an empty babel config object.
+ *
+ * @return {!Object}
+ */
+const getEmptyConfig = () => ({});
+
+module.exports = {
+  getEmptyConfig,
+};
diff --git a/build-system/babel-config/eslint-config.js b/build-system/babel-config/eslint-config.js
new file mode 100644
index 0000000000000..aec6069dad16f
--- /dev/null
+++ b/build-system/babel-config/eslint-config.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2020 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';
+
+/**
+ * Gets the config for babel transforms run during `amp lint`.
+ *
+ * @return {!Object}
+ */
+function getEslintConfig() {
+  const presetEnv = [
+    '@babel/preset-env',
+    {
+      shippedProposals: true,
+      modules: false,
+      targets: {esmodules: true},
+    },
+  ];
+
+  return {
+    compact: false,
+    presets: [presetEnv],
+    plugins: [enableSyntax],
+  };
+}
+
+/**
+ * @return {{
+ *  manipulateOptions: {Function(_opts: *, parserOpts: *): void}
+ * }}
+ */
+function enableSyntax() {
+  return {
+    manipulateOptions(_opts, parserOpts) {
+      parserOpts.plugins.push('jsx', 'importAssertions');
+    },
+  };
+}
+
+module.exports = {
+  getEslintConfig,
+};
diff --git a/build-system/babel-config/helpers.js b/build-system/babel-config/helpers.js
index 1229d98192331..bc7c3ded89f30 100644
--- a/build-system/babel-config/helpers.js
+++ b/build-system/babel-config/helpers.js
@@ -39,7 +39,7 @@ function getExperimentConstant() {
 }
 
 /**
- * Computes options for the minify-replace plugin
+ * Computes options for minify-replace and returns the plugin object.
  *
  * @return {Array<string|Object>}
  */
@@ -56,7 +56,14 @@ function getReplacePlugin() {
     };
   }
 
-  const replacements = [createReplacement('IS_ESM', argv.esm)];
+  // We build on the idea that SxG is an upgrade to the ESM build.
+  // Therefore, all conditions set by ESM will also hold for SxG.
+  // However, we will also need to introduce a separate IS_SxG flag
+  // for conditions only true for SxG.
+  const replacements = [
+    createReplacement('IS_ESM', argv.esm || argv.sxg),
+    createReplacement('IS_SXG', argv.sxg),
+  ];
 
   const experimentConstant = getExperimentConstant();
   if (experimentConstant) {
@@ -91,7 +98,47 @@ function getReplacePlugin() {
   return ['minify-replace', {replacements}];
 }
 
+/**
+ * Returns a Babel plugin that replaces the global identifier with the correct
+ * alternative. Used before transforming test code with esbuild.
+ *
+ * @return {Array<string|Object>}
+ */
+function getReplaceGlobalsPlugin() {
+  return [
+    (babel) => {
+      const {types: t} = babel;
+      return {
+        visitor: {
+          ReferencedIdentifier(path) {
+            const {node, scope} = path;
+            if (node.name !== 'global') {
+              return;
+            }
+            if (scope.getBinding('global')) {
+              return;
+            }
+            const possibleNames = ['globalThis', 'self'];
+            // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis#browser_compatibility
+            if (argv.ie) {
+              possibleNames.shift();
+            }
+            const name = possibleNames.find((name) => !scope.getBinding(name));
+            if (!name) {
+              throw path.buildCodeFrameError(
+                'Could not replace `global` with globalThis identifier'
+              );
+            }
+            path.replaceWith(t.identifier(name));
+          },
+        },
+      };
+    },
+  ];
+}
+
 module.exports = {
   getExperimentConstant,
   getReplacePlugin,
+  getReplaceGlobalsPlugin,
 };
diff --git a/build-system/babel-config/minified-config.js b/build-system/babel-config/minified-config.js
new file mode 100644
index 0000000000000..cde17d0828615
--- /dev/null
+++ b/build-system/babel-config/minified-config.js
@@ -0,0 +1,98 @@
+/**
+ * Copyright 2021 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 argv = require('minimist')(process.argv.slice(2));
+const {getReplacePlugin} = require('./helpers');
+
+/**
+ * Gets the config for minified babel transforms run, used by 3p vendors.
+ *
+ * @return {!Object}
+ */
+function getMinifiedConfig() {
+  const replacePlugin = getReplacePlugin();
+  const reactJsxPlugin = [
+    '@babel/plugin-transform-react-jsx',
+    {
+      pragma: 'Preact.createElement',
+      pragmaFrag: 'Preact.Fragment',
+      useSpread: true,
+    },
+  ];
+
+  const plugins = [
+    'optimize-objstr',
+    './build-system/babel-plugins/babel-plugin-transform-fix-leading-comments',
+    './build-system/babel-plugins/babel-plugin-transform-promise-resolve',
+    '@babel/plugin-transform-react-constant-elements',
+    reactJsxPlugin,
+    argv.esm
+      ? './build-system/babel-plugins/babel-plugin-transform-dev-methods'
+      : null,
+    [
+      './build-system/babel-plugins/babel-plugin-transform-log-methods',
+      {replaceCallArguments: false},
+    ],
+    './build-system/babel-plugins/babel-plugin-transform-parenthesize-expression',
+    [
+      './build-system/babel-plugins/babel-plugin-transform-json-import',
+      {freeze: false},
+    ],
+    './build-system/babel-plugins/babel-plugin-is_minified-constant-transformer',
+    './build-system/babel-plugins/babel-plugin-transform-html-template',
+    './build-system/babel-plugins/babel-plugin-transform-jss',
+    './build-system/babel-plugins/babel-plugin-transform-version-call',
+    './build-system/babel-plugins/babel-plugin-transform-simple-array-destructure',
+    './build-system/babel-plugins/babel-plugin-transform-default-assignment',
+    replacePlugin,
+    './build-system/babel-plugins/babel-plugin-transform-amp-asserts',
+    // TODO(erwinm, #28698): fix this in fixit week
+    // argv.esm
+    //? './build-system/babel-plugins/babel-plugin-transform-function-declarations'
+    //: null,
+    argv.fortesting
+      ? null
+      : './build-system/babel-plugins/babel-plugin-transform-json-configuration',
+    argv.fortesting
+      ? null
+      : [
+          './build-system/babel-plugins/babel-plugin-amp-mode-transformer',
+          {isEsmBuild: !!argv.esm},
+        ],
+    argv.fortesting
+      ? null
+      : './build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer',
+  ].filter(Boolean);
+  const presetEnv = [
+    '@babel/preset-env',
+    {
+      bugfixes: true,
+      modules: false,
+      targets: argv.esm ? {esmodules: true} : {ie: 11, chrome: 41},
+    },
+  ];
+  return {
+    compact: false,
+    plugins,
+    presets: [presetEnv],
+    retainLines: true,
+  };
+}
+
+module.exports = {
+  getMinifiedConfig,
+};
diff --git a/build-system/babel-config/post-closure-config.js b/build-system/babel-config/post-closure-config.js
index 7e88a437c3033..73b0e9a2e453d 100644
--- a/build-system/babel-config/post-closure-config.js
+++ b/build-system/babel-config/post-closure-config.js
@@ -18,12 +18,12 @@
 const argv = require('minimist')(process.argv.slice(2));
 
 /**
- * Gets the config for post-closure babel transforms run during `gulp dist --esm`.
+ * Gets the config for post-closure babel transforms run during `amp dist --esm`.
  *
  * @return {!Object}
  */
 function getPostClosureConfig() {
-  if (!argv.esm) {
+  if (!argv.esm && !argv.sxg) {
     return {};
   }
 
diff --git a/build-system/babel-config/pre-closure-config.js b/build-system/babel-config/pre-closure-config.js
index c1b7bbd0e1c38..7ef22c1ce8ff0 100644
--- a/build-system/babel-config/pre-closure-config.js
+++ b/build-system/babel-config/pre-closure-config.js
@@ -16,10 +16,10 @@
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
-const {getExperimentConstant, getReplacePlugin} = require('./helpers');
+const {getReplacePlugin} = require('./helpers');
 
 /**
- * Gets the config for pre-closure babel transforms run during `gulp dist`.
+ * Gets the config for pre-closure babel transforms run during `amp dist`.
  *
  * @return {!Object}
  */
@@ -29,37 +29,6 @@ function getPreClosureConfig() {
   const isTestTask = testTasks.some((task) => argv._.includes(task));
   const isFortesting = argv.fortesting || isTestTask;
 
-  // For experiment, remove FixedLayer import from v0.js, otherwise remove
-  // from amp-viewer-integration
-  const fixedLayerImport =
-    getExperimentConstant() == 'MOVE_FIXED_LAYER'
-      ? './../fixed-layer'
-      : '../../../src/service/fixed-layer';
-  const filterImportsPlugin = [
-    'filter-imports',
-    {
-      imports: {
-        // Imports removed for all ESM builds.
-        './polyfills/document-contains': ['installDocContains'],
-        './polyfills/domtokenlist': ['installDOMTokenList'],
-        './polyfills/fetch': ['installFetch'],
-        './polyfills/math-sign': ['installMathSign'],
-        './polyfills/object-assign': ['installObjectAssign'],
-        './polyfills/object-values': ['installObjectValues'],
-        './polyfills/promise': ['installPromise'],
-        './polyfills/array-includes': ['installArrayIncludes'],
-        './ie-media-bug': ['ieMediaCheckAndFix'],
-        '../third_party/css-escape/css-escape': ['cssEscape'],
-        // Imports that are not needed for valid transformed documents.
-        '../build/ampshared.css': ['cssText', 'ampSharedCss'],
-        '../build/ampdoc.css': ['cssText', 'ampDocCss'],
-        // Srcset fallbacks aren't needed in ESM builds
-        '../src/utils/img': ['guaranteeSrcForSrcsetUnsupportedBrowsers'],
-        // Used by experiment
-        [fixedLayerImport]: ['FixedLayer'],
-      },
-    },
-  ];
   const reactJsxPlugin = [
     '@babel/plugin-transform-react-jsx',
     {
@@ -70,30 +39,36 @@ function getPreClosureConfig() {
   ];
   const replacePlugin = getReplacePlugin();
   const preClosurePlugins = [
+    'optimize-objstr',
+    argv.coverage ? 'babel-plugin-istanbul' : null,
     './build-system/babel-plugins/babel-plugin-transform-fix-leading-comments',
     './build-system/babel-plugins/babel-plugin-transform-promise-resolve',
     '@babel/plugin-transform-react-constant-elements',
     reactJsxPlugin,
-    './build-system/babel-plugins/babel-plugin-transform-inline-configure-component',
-    // TODO(alanorozco): Remove `replaceCallArguments` once serving infra is up.
-    argv.esm
+    argv.esm || argv.sxg
       ? './build-system/babel-plugins/babel-plugin-transform-dev-methods'
       : null,
+    // TODO(alanorozco): Remove `replaceCallArguments` once serving infra is up.
     [
       './build-system/babel-plugins/babel-plugin-transform-log-methods',
       {replaceCallArguments: false},
     ],
     './build-system/babel-plugins/babel-plugin-transform-parenthesize-expression',
+    [
+      './build-system/babel-plugins/babel-plugin-transform-json-import',
+      {freeze: false},
+    ],
     './build-system/babel-plugins/babel-plugin-is_minified-constant-transformer',
     './build-system/babel-plugins/babel-plugin-transform-amp-extension-call',
     './build-system/babel-plugins/babel-plugin-transform-html-template',
+    './build-system/babel-plugins/babel-plugin-transform-jss',
     './build-system/babel-plugins/babel-plugin-transform-version-call',
     './build-system/babel-plugins/babel-plugin-transform-simple-array-destructure',
+    './build-system/babel-plugins/babel-plugin-transform-default-assignment',
     replacePlugin,
     './build-system/babel-plugins/babel-plugin-transform-amp-asserts',
-    argv.esm ? filterImportsPlugin : null,
     // TODO(erwinm, #28698): fix this in fixit week
-    //argv.esm
+    // argv.esm
     //? './build-system/babel-plugins/babel-plugin-transform-function-declarations'
     //: null,
     !isCheckTypes
@@ -106,7 +81,7 @@ function getPreClosureConfig() {
         ]
       : null,
     !(isFortesting || isCheckTypes)
-      ? './build-system/babel-plugins/babel-plugin-is_dev-constant-transformer'
+      ? './build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer'
       : null,
   ].filter(Boolean);
   const presetEnv = [
@@ -117,12 +92,13 @@ function getPreClosureConfig() {
       targets: {esmodules: true},
     },
   ];
-  const preClosurePresets = argv.esm ? [presetEnv] : [];
+  const preClosurePresets = argv.esm || argv.sxg ? [presetEnv] : [];
   const preClosureConfig = {
     compact: false,
     plugins: preClosurePlugins,
     presets: preClosurePresets,
     retainLines: true,
+    sourceMaps: true,
   };
   return preClosureConfig;
 }
diff --git a/build-system/babel-config/test-config.js b/build-system/babel-config/test-config.js
index fd19a8b007edc..9af75f4871b15 100644
--- a/build-system/babel-config/test-config.js
+++ b/build-system/babel-config/test-config.js
@@ -16,10 +16,10 @@
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
-const {getReplacePlugin} = require('./helpers');
+const {getReplaceGlobalsPlugin, getReplacePlugin} = require('./helpers');
 
 /**
- * Gets the config for babel transforms run during `gulp [unit|integration]`.
+ * Gets the config for babel transforms run during `amp [unit|integration|e2e]`.
  *
  * @return {!Object}
  */
@@ -55,11 +55,15 @@ function getTestConfig() {
     },
   ];
   const replacePlugin = getReplacePlugin();
+  const replaceGlobalsPlugin = getReplaceGlobalsPlugin();
   const testPlugins = [
     argv.coverage ? instanbulPlugin : null,
     replacePlugin,
+    replaceGlobalsPlugin,
+    './build-system/babel-plugins/babel-plugin-transform-json-import',
     './build-system/babel-plugins/babel-plugin-transform-json-configuration',
     './build-system/babel-plugins/babel-plugin-transform-fix-leading-comments',
+    './build-system/babel-plugins/babel-plugin-transform-jss',
     './build-system/babel-plugins/babel-plugin-transform-promise-resolve',
     '@babel/plugin-transform-react-constant-elements',
     '@babel/plugin-transform-classes',
@@ -68,12 +72,9 @@ function getTestConfig() {
   const testPresets = [presetEnv];
   return {
     compact: false,
-    // We do not want to ignore our dependencies in test mode, since some may
-    // be using newer features that need to be transpiled down for our test
-    // browsers.
-    ignore: [],
     plugins: testPlugins,
     presets: testPresets,
+    sourceMaps: 'inline',
   };
 }
 
diff --git a/build-system/babel-config/unminified-config.js b/build-system/babel-config/unminified-config.js
index 1ef3ed2755192..2c7a40aa5f615 100644
--- a/build-system/babel-config/unminified-config.js
+++ b/build-system/babel-config/unminified-config.js
@@ -15,10 +15,14 @@
  */
 'use strict';
 
+const argv = require('minimist')(process.argv.slice(2));
+const {
+  VERSION: internalRuntimeVersion,
+} = require('../compile/internal-version');
 const {getReplacePlugin} = require('./helpers');
 
 /**
- * Gets the config for babel transforms run during `gulp build`.
+ * Gets the config for babel transforms run during `amp build`.
  *
  * @return {!Object}
  */
@@ -31,30 +35,41 @@ function getUnminifiedConfig() {
       useSpread: true,
     },
   ];
+
+  const targets =
+    argv.esm || argv.sxg ? {esmodules: true} : {browsers: ['Last 2 versions']};
   const presetEnv = [
     '@babel/preset-env',
     {
       bugfixes: true,
-      modules: 'commonjs',
+      modules: false,
       loose: true,
-      targets: {'browsers': ['Last 2 versions']},
+      targets,
     },
   ];
   const replacePlugin = getReplacePlugin();
   const unminifiedPlugins = [
+    argv.coverage ? 'babel-plugin-istanbul' : null,
     replacePlugin,
+    './build-system/babel-plugins/babel-plugin-transform-json-import',
+    [
+      './build-system/babel-plugins/babel-plugin-transform-internal-version',
+      {version: internalRuntimeVersion},
+    ],
     './build-system/babel-plugins/babel-plugin-transform-json-configuration',
+    './build-system/babel-plugins/babel-plugin-transform-jss',
     './build-system/babel-plugins/babel-plugin-transform-fix-leading-comments',
     './build-system/babel-plugins/babel-plugin-transform-promise-resolve',
     '@babel/plugin-transform-react-constant-elements',
     '@babel/plugin-transform-classes',
     reactJsxPlugin,
-  ];
+  ].filter(Boolean);
   const unminifiedPresets = [presetEnv];
   return {
     compact: false,
     plugins: unminifiedPlugins,
     presets: unminifiedPresets,
+    sourceMaps: 'inline',
   };
 }
 
diff --git a/build-system/babel-plugins/OWNERS b/build-system/babel-plugins/OWNERS
index 81b36bd711d79..eeccea4248aa8 100644
--- a/build-system/babel-plugins/OWNERS
+++ b/build-system/babel-plugins/OWNERS
@@ -1,12 +1,11 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [
         {name: 'ampproject/wg-infra'},
-        {name: 'ampproject/wg-runtime'},
         {name: 'ampproject/wg-performance'},
         {name: 'erwinmombay', notify: true},
         {name: 'jridgewell', notify: true},
diff --git a/build-system/babel-plugins/babel-plugin-amp-mode-transformer/index.js b/build-system/babel-plugins/babel-plugin-amp-mode-transformer/index.js
index c9040fea662e6..d686ef9c71315 100644
--- a/build-system/babel-plugins/babel-plugin-amp-mode-transformer/index.js
+++ b/build-system/babel-plugins/babel-plugin-amp-mode-transformer/index.js
@@ -19,7 +19,7 @@
  * and getMode().localDev to true.
  * @param {Object} babelTypes
  */
-const {resolve, dirname} = require('path');
+const {dirname, join, relative, resolve} = require('path').posix;
 
 let shouldResolveDevelopmentMode = true;
 
@@ -35,17 +35,17 @@ module.exports = function ({types: t}) {
     },
     visitor: {
       ImportDeclaration({node}, state) {
-        const {specifiers, source} = node;
+        const {source, specifiers} = node;
         if (!source.value.endsWith('/mode')) {
           return;
         }
         specifiers.forEach((specifier) => {
           if (specifier.imported && specifier.imported.name === 'getMode') {
-            const filepath = resolve(
-              dirname(state.file.opts.filename),
-              source.value
+            const filepath = relative(
+              join(__dirname, '../../../'),
+              resolve(dirname(state.file.opts.filename), source.value)
             );
-            if (filepath.endsWith('/amphtml/src/mode')) {
+            if (filepath.endsWith('src/mode')) {
               getModeFound = true;
             }
           }
diff --git a/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/index.js b/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/index.js
deleted file mode 100644
index 2e5638b6d1aa0..0000000000000
--- a/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-/**
- * Changes the values of IS_DEV to false and IS_MINIFIED to true.
- * The above said variables are in src/mode.js file.
- * @param {{types: string}} options
- * @return {!Object}
- */
-module.exports = function ({types: t}) {
-  return {
-    visitor: {
-      VariableDeclarator(path) {
-        const {node} = path;
-        const {id, init} = node;
-        if (
-          t.isIdentifier(id, {name: 'IS_DEV'}) &&
-          t.isBooleanLiteral(init, {value: true})
-        ) {
-          node.init = t.booleanLiteral(false);
-        }
-      },
-    },
-  };
-};
diff --git a/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/isdev-transform/input.js b/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/isdev-transform/input.js
deleted file mode 100644
index 21f1ed57dc773..0000000000000
--- a/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/isdev-transform/input.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-
-const IS_DEV = true;
-const IS_EXPANDED = false;
diff --git a/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/isdev-transform/output.js b/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/isdev-transform/output.js
deleted file mode 100644
index 9319a005fcae9..0000000000000
--- a/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/isdev-transform/output.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-const IS_DEV = false;
-const IS_EXPANDED = false;
diff --git a/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/index.js b/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/index.js
new file mode 100644
index 0000000000000..f2912031a0860
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/index.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2018 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.
+ */
+
+/**
+ * Changes the value of IS_FORTESTING to false.
+ * The above variable is in src/mode.js.
+ * @param {{types: string}} options
+ * @return {!Object}
+ */
+module.exports = function ({types: t}) {
+  return {
+    visitor: {
+      VariableDeclarator(path) {
+        const {node} = path;
+        const {id, init} = node;
+        if (
+          t.isIdentifier(id, {name: 'IS_FORTESTING'}) &&
+          t.isBooleanLiteral(init, {value: true})
+        ) {
+          node.init = t.booleanLiteral(false);
+        }
+      },
+    },
+  };
+};
diff --git a/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/isdev-transform/input.js b/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/isdev-transform/input.js
new file mode 100644
index 0000000000000..7eafb7e9bc9c8
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/isdev-transform/input.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2018 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.
+ */
+
+
+const IS_FORTESTING = true;
+const IS_EXPANDED = false;
diff --git a/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/isdev-transform/options.json b/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/isdev-transform/options.json
similarity index 100%
rename from build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/isdev-transform/options.json
rename to build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/isdev-transform/options.json
diff --git a/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/isdev-transform/output.js b/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/isdev-transform/output.js
new file mode 100644
index 0000000000000..addce9217cc80
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/isdev-transform/output.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright 2018 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.
+ */
+const IS_FORTESTING = false;
+const IS_EXPANDED = false;
diff --git a/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/no-transform/input.js b/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/no-transform/input.js
similarity index 100%
rename from build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/no-transform/input.js
rename to build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/no-transform/input.js
diff --git a/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/no-transform/options.json b/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/no-transform/options.json
similarity index 100%
rename from build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/no-transform/options.json
rename to build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/no-transform/options.json
diff --git a/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/no-transform/output.js b/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/no-transform/output.js
similarity index 100%
rename from build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/fixtures/transform-assertions/no-transform/output.js
rename to build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/fixtures/transform-assertions/no-transform/output.js
diff --git a/build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/index.js b/build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/index.js
similarity index 100%
rename from build-system/babel-plugins/babel-plugin-is_dev-constant-transformer/test/index.js
rename to build-system/babel-plugins/babel-plugin-is_fortesting-constant-transformer/test/index.js
diff --git a/build-system/babel-plugins/babel-plugin-is_minified-constant-transformer/index.js b/build-system/babel-plugins/babel-plugin-is_minified-constant-transformer/index.js
index 0e2beb39bbb1c..644f604ceaaf5 100644
--- a/build-system/babel-plugins/babel-plugin-is_minified-constant-transformer/index.js
+++ b/build-system/babel-plugins/babel-plugin-is_minified-constant-transformer/index.js
@@ -15,8 +15,8 @@
  */
 
 /**
- * Changes the values of IS_DEV to false and IS_MINIFIED to true.
- * The above said variables are in src/mode.js file.
+ * Changes the value of IS_MINIFIED to true.
+ * The above variable is in src/mode.js and src/core/minified-mode.js.
  * @param {Object} babelTypes
  * @return {!Object}
  */
diff --git a/build-system/babel-plugins/babel-plugin-transform-annotation-to-extern/index.js b/build-system/babel-plugins/babel-plugin-transform-annotation-to-extern/index.js
index 0ac66e70a3f17..10301ab9f0fbb 100644
--- a/build-system/babel-plugins/babel-plugin-transform-annotation-to-extern/index.js
+++ b/build-system/babel-plugins/babel-plugin-transform-annotation-to-extern/index.js
@@ -43,7 +43,7 @@ module.exports = function (babel) {
   let shouldEmitTypedefs;
   return {
     pre() {
-      const {writeToFile = false, emitTypedefs = false} = this.opts;
+      const {emitTypedefs = false, writeToFile = false} = this.opts;
       shouldWriteToFile = writeToFile;
       shouldEmitTypedefs = emitTypedefs;
     },
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/index.js b/build-system/babel-plugins/babel-plugin-transform-default-assignment/index.js
new file mode 100644
index 0000000000000..9434311e73a1b
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/index.js
@@ -0,0 +1,100 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * Injects alias identifiers for values with default assignments.
+ * Closure can't correctly type-narrow the defaulted value to exclude `undefined`,
+ * but it can figure out the aliased value correctly.
+ *
+ * @example
+ * In:
+ * ```
+ * function foo(foo = 1, { bar = 2 }) {
+ *   foo;
+ *   bar;
+ * }
+ * ```
+ *
+ * Out:
+ * ```
+ * function foo(foo = 1, { bar = 2 }) {
+ *   let _foo = foo;
+ *   let _bar = bar;
+ *   _foo;
+ *   _bar;
+ * }
+ * ```
+ */
+
+module.exports = function ({types: t}) {
+  return {
+    visitor: {
+      AssignmentPattern(path) {
+        const left = path.get('left');
+        if (!left.isIdentifier()) {
+          throw left.buildCodeFrameError(
+            [
+              'Can only fix default assignment type of identifiers.',
+              'Please replace with a parameter, and destructure in the function body.',
+            ].join('\n\t')
+          );
+        }
+
+        const root = path.find(
+          ({parentPath}) => parentPath.isStatement() || parentPath.isFunction()
+        );
+        if (!root.parentPath.isFunction()) {
+          // only transform param destructures
+          return;
+        }
+
+        const {scope} = path;
+        const {name} = left.node;
+        const newName = scope.generateUid(name);
+
+        const {referencePaths} = scope.getBinding(name);
+        const ancestry = path.getAncestry().slice().reverse();
+        for (const ref of referencePaths) {
+          const refAncestry = ref.getAncestry().slice().reverse();
+
+          const min = Math.min(ancestry.length, refAncestry.length);
+          for (let i = 0; i < min; i++) {
+            const a = ancestry[i];
+            const r = refAncestry[i];
+            if (a.container !== r.container) {
+              break;
+            }
+            if (a === root) {
+              throw ref.buildCodeFrameError(
+                'default assignment of default assignment'
+              );
+            }
+          }
+        }
+
+        scope.rename(name, newName);
+        scope.removeBinding(newName);
+        left.node.name = name;
+
+        scope.push({
+          id: t.identifier(newName),
+          init: t.identifier(name),
+          kind: 'let',
+        });
+      },
+    },
+  };
+};
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param-destructures/input.js b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param-destructures/input.js
new file mode 100644
index 0000000000000..569aff39effbc
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param-destructures/input.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2020 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.
+ */
+
+function test({a = 1, b: bb = 2}, [c = 3]) {
+  a;
+  bb
+  c;
+}
+
+class Foo {
+  test({a = 1, b: bb = 2}, [c = 3]) {
+    a;
+    bb
+    c;
+  }
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param-destructures/options.json b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param-destructures/options.json
new file mode 100644
index 0000000000000..a47282a6be9a9
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param-destructures/options.json
@@ -0,0 +1,3 @@
+{
+  "plugins": ["../../../.."]
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param-destructures/output.js b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param-destructures/output.js
new file mode 100644
index 0000000000000..b0e794741a1f1
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param-destructures/output.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2020 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.
+ */
+function test({
+  a = 1,
+  b: bb = 2
+}, [c = 3]) {
+  let _a = a,
+      _bb = bb,
+      _c = c;
+  _a;
+  _bb;
+  _c;
+}
+
+class Foo {
+  test({
+    a = 1,
+    b: bb = 2
+  }, [c = 3]) {
+    let _a2 = a,
+        _bb2 = bb,
+        _c2 = c;
+    _a2;
+    _bb2;
+    _c2;
+  }
+
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param/input.js b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param/input.js
new file mode 100644
index 0000000000000..f2bbfaf79ef5d
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param/input.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright 2020 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.
+ */
+
+function test(param = 1) {
+  param;
+}
+
+class Foo {
+  test(param = 1) {
+    param;
+  }
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param/options.json b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param/options.json
new file mode 100644
index 0000000000000..a47282a6be9a9
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param/options.json
@@ -0,0 +1,3 @@
+{
+  "plugins": ["../../../.."]
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param/output.js b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param/output.js
new file mode 100644
index 0000000000000..2c829122e4073
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/should-transform-param/output.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2020 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.
+ */
+function test(param = 1) {
+  let _param = param;
+  _param;
+}
+
+class Foo {
+  test(param = 1) {
+    let _param2 = param;
+    _param2;
+  }
+
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-on-param-assignment-with-destructure/input.js b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-on-param-assignment-with-destructure/input.js
new file mode 100644
index 0000000000000..26f47494019f9
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-on-param-assignment-with-destructure/input.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright 2020 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.
+ */
+
+function test({x} = {}) {
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-on-param-assignment-with-destructure/options.json b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-on-param-assignment-with-destructure/options.json
new file mode 100644
index 0000000000000..48839d18b2cff
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-on-param-assignment-with-destructure/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["../../../.."],
+  "throws": "Can only fix default assignment type of identifiers.\n\tPlease replace with a parameter, and destructure in the function body."
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-destructure-references-default-destructure/input.js b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-destructure-references-default-destructure/input.js
new file mode 100644
index 0000000000000..7204095eb60c5
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-destructure-references-default-destructure/input.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright 2020 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.
+ */
+
+function test({a = 1}, {b = a}) {
+  a;
+  b;
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-destructure-references-default-destructure/options.json b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-destructure-references-default-destructure/options.json
new file mode 100644
index 0000000000000..04f21c0863258
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-destructure-references-default-destructure/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["../../../.."],
+  "throws": "default assignment of default assignment"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-destructure-references-default/input.js b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-destructure-references-default/input.js
new file mode 100644
index 0000000000000..43817c0243bd3
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-destructure-references-default/input.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright 2020 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.
+ */
+
+function test(a = 1, {b = a}) {
+  a;
+  b;
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-destructure-references-default/options.json b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-destructure-references-default/options.json
new file mode 100644
index 0000000000000..04f21c0863258
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-destructure-references-default/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["../../../.."],
+  "throws": "default assignment of default assignment"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-references-default-destructure/input.js b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-references-default-destructure/input.js
new file mode 100644
index 0000000000000..3a944024fbc4c
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-references-default-destructure/input.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright 2020 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.
+ */
+
+function test({a = 1}, b = a) {
+  a;
+  b;
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-references-default-destructure/options.json b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-references-default-destructure/options.json
new file mode 100644
index 0000000000000..04f21c0863258
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-references-default-destructure/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["../../../.."],
+  "throws": "default assignment of default assignment"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-references-default/input.js b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-references-default/input.js
new file mode 100644
index 0000000000000..c32c1f2dc5aa0
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-references-default/input.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright 2020 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.
+ */
+
+function test(a = 1, b = a) {
+  a;
+  b;
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-references-default/options.json b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-references-default/options.json
new file mode 100644
index 0000000000000..04f21c0863258
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/fixtures/transform-assertions/throws-when-default-references-default/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["../../../.."],
+  "throws": "default assignment of default assignment"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/index.js b/build-system/babel-plugins/babel-plugin-transform-default-assignment/test/index.js
similarity index 100%
rename from build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/index.js
rename to build-system/babel-plugins/babel-plugin-transform-default-assignment/test/index.js
diff --git a/build-system/babel-plugins/babel-plugin-transform-dev-methods/index.js b/build-system/babel-plugins/babel-plugin-transform-dev-methods/index.js
index da99a4bc8212d..a52caaacf67d1 100644
--- a/build-system/babel-plugins/babel-plugin-transform-dev-methods/index.js
+++ b/build-system/babel-plugins/babel-plugin-transform-dev-methods/index.js
@@ -14,36 +14,38 @@
  * limitations under the License.
  */
 
-const {resolve, dirname} = require('path');
+const {dirname, join, relative, resolve} = require('path').posix;
 
-// Returns a new Map<string, {detected: boolean, removeable: Array<string>}
-// key is a valid callee name to potentially remove.
-// value.detected indicates if the callee name (key) was imported into the current module.
-// value.removeable is the array of property names that can be removed.
-// Example: ['dev', {detected: false, removeable: ['fine']}] would mean ... `dev().fine(...)` can be removed.
+/**
+ * Returns a new Map<string, {detected: boolean, removeable: Array<string>}
+ * key is a valid callee name to potentially remove.
+ * value.detected indicates if the callee name (key) was imported into the current module.
+ * value.removeable is the array of property names that can be removed.
+ * Example: ['dev', {detected: false, removeable: ['fine']}] would mean ... `dev().fine(...)` can be removed.
+ * @return {Map<string, {detected: boolean, removeable: Array<string>}}
+ */
 function defaultCalleeToPropertiesMap() {
   return new Map([
     [
       'dev',
       {
         detected: false,
-        removeable: ['info', 'fine'],
+        removeable: ['info', 'fine', 'warn'],
       },
     ],
     [
       'user',
       {
         detected: false,
-        removeable: ['fine'],
+        removeable: ['info', 'fine', 'warn'],
       },
     ],
   ]);
 }
 
 // This Babel Plugin removes
-// 1. `dev().info(...)`
-// 2. `dev().fine(...)`
-// 3. `user().fine(...)`
+// - `dev().(info|fine|warn)(...)`
+// - `user().(info|fine|warn)(...)`
 // CallExpressions for production ESM builds.
 module.exports = function () {
   let calleeToPropertiesMap = defaultCalleeToPropertiesMap();
@@ -60,18 +62,18 @@ module.exports = function () {
       },
       ImportDeclaration({node}, state) {
         // Only remove the CallExpressions if this module imported the correct method ('dev') from '/log'.
-        const {specifiers, source} = node;
+        const {source, specifiers} = node;
         if (!source.value.endsWith('/log')) {
           return;
         }
         specifiers.forEach((specifier) => {
           if (specifier.imported) {
-            const filepath = resolve(
-              dirname(state.file.opts.filename),
-              source.value
+            const filepath = relative(
+              join(__dirname, '../../../'),
+              resolve(dirname(state.file.opts.filename), source.value)
             );
 
-            if (filepath.endsWith('/amphtml/src/log')) {
+            if (filepath.endsWith('src/log')) {
               const propertyMapped = calleeToPropertiesMap.get(
                 specifier.imported.name
               );
diff --git a/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-both-usage/input.js b/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-both-usage/input.js
index 463b0cbbe4e64..64e84c83b99bf 100644
--- a/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-both-usage/input.js
+++ b/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-both-usage/input.js
@@ -34,7 +34,8 @@ function hello() {
   );
   dev().fine(TAG, 'fine');
   user().fine(TAG, 'fine');
-  user().info('Should not be removed');
+  user().info('Should be removed');
+  user().error('Should not be removed');
   return false;
 }
 
@@ -45,8 +46,8 @@ export function helloAgain() {
     fromLocation.search
   );
   dev().fine(TAG, 'fine');
-  user().fine(TAG, 'fine');
-  user().info('Should not be removed');
+  user().warn(TAG, 'warn');
+  user().error('Should not be removed');
   return false;
 }
 
@@ -59,6 +60,7 @@ class Foo {
     );
     dev().fine(TAG, 'fine');
     user().fine(TAG, 'fine');
-    user().info('Should not be removed');
+    dev().error(TAG, 'Should not be removed');
+    user().error('Should not be removed');
   }
 }
\ No newline at end of file
diff --git a/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-both-usage/output.mjs b/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-both-usage/output.mjs
index 717c30aa8aacf..c4cea728c8058 100644
--- a/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-both-usage/output.mjs
+++ b/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-both-usage/output.mjs
@@ -16,21 +16,21 @@
 import { dev, user } from '../../../../../../../src/log';
 dev().info;
 user().fine;
-user().info('Should not be removed');
 
 function hello() {
-  user().info('Should not be removed');
+  user().error('Should not be removed');
   return false;
 }
 
 export function helloAgain() {
-  user().info('Should not be removed');
+  user().error('Should not be removed');
   return false;
 }
 
 class Foo {
   method() {
-    user().info('Should not be removed');
+    dev().error(TAG, 'Should not be removed');
+    user().error('Should not be removed');
   }
 
 }
diff --git a/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-user-usage/input.js b/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-user-usage/input.js
index bcb67c20c55f3..92cccc555df79 100644
--- a/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-user-usage/input.js
+++ b/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-user-usage/input.js
@@ -18,23 +18,23 @@ import {user} from '../../../../../../../src/log';
 
 user().fine(TAG, 'fine');
 user().fine;
-user().info('Should not be removed');
+user().error('Should not be removed');
 
 function hello() {
   user().fine(TAG, 'fine');
-  user().info('Should not be removed');
+  user().info('Should be removed');
   return false;
 }
 
 export function helloAgain() {
   user().fine(TAG, 'fine');
-  user().info('Should not be removed');
+  user().error('Should not be removed');
   return false;
 }
 
 class Foo {
   method() {
     user().fine(TAG, 'fine');
-    user().info('Should not be removed');
+    user().info('Should be removed');
   }
 }
\ No newline at end of file
diff --git a/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-user-usage/output.mjs b/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-user-usage/output.mjs
index ce398914d8083..cb12412e75083 100644
--- a/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-user-usage/output.mjs
+++ b/build-system/babel-plugins/babel-plugin-transform-dev-methods/test/fixtures/transform-assertions/imported-user-usage/output.mjs
@@ -15,21 +15,18 @@
  */
 import { user } from '../../../../../../../src/log';
 user().fine;
-user().info('Should not be removed');
+user().error('Should not be removed');
 
 function hello() {
-  user().info('Should not be removed');
   return false;
 }
 
 export function helloAgain() {
-  user().info('Should not be removed');
+  user().error('Should not be removed');
   return false;
 }
 
 class Foo {
-  method() {
-    user().info('Should not be removed');
-  }
+  method() {}
 
 }
diff --git a/build-system/babel-plugins/babel-plugin-transform-fix-leading-comments/test/fixtures/transform/basic/input.js b/build-system/babel-plugins/babel-plugin-transform-fix-leading-comments/test/fixtures/transform/basic/input.js
index ce0be9e64d075..616cf306a57f4 100644
--- a/build-system/babel-plugins/babel-plugin-transform-fix-leading-comments/test/fixtures/transform/basic/input.js
+++ b/build-system/babel-plugins/babel-plugin-transform-fix-leading-comments/test/fixtures/transform/basic/input.js
@@ -15,7 +15,7 @@
  */
 
 /**
- * @protected {!Object<string, !ChildDef>|null}
+ * @protected {?Object<string, !ChildDef>}
  */
 foo().bar;
 
diff --git a/build-system/babel-plugins/babel-plugin-transform-fix-leading-comments/test/fixtures/transform/basic/output.js b/build-system/babel-plugins/babel-plugin-transform-fix-leading-comments/test/fixtures/transform/basic/output.js
index ce0be9e64d075..616cf306a57f4 100644
--- a/build-system/babel-plugins/babel-plugin-transform-fix-leading-comments/test/fixtures/transform/basic/output.js
+++ b/build-system/babel-plugins/babel-plugin-transform-fix-leading-comments/test/fixtures/transform/basic/output.js
@@ -15,7 +15,7 @@
  */
 
 /**
- * @protected {!Object<string, !ChildDef>|null}
+ * @protected {?Object<string, !ChildDef>}
  */
 foo().bar;
 
diff --git a/build-system/babel-plugins/babel-plugin-transform-function-declarations/index.js b/build-system/babel-plugins/babel-plugin-transform-function-declarations/index.js
index 591cfefc13bb6..d891dcaa3872f 100644
--- a/build-system/babel-plugins/babel-plugin-transform-function-declarations/index.js
+++ b/build-system/babel-plugins/babel-plugin-transform-function-declarations/index.js
@@ -19,7 +19,7 @@
 module.exports = function ({types: t}) {
   /**
    * This transform is targetted toward these types only.
-   * @param {*} path
+   * @param {BabelPath} path
    * @return {boolean}
    */
   function isNotFunction(path) {
@@ -30,7 +30,7 @@ module.exports = function ({types: t}) {
 
   /**
    * This transform cannot safely convert generator functions.
-   * @param {*} path
+   * @param {BabelPath} path
    * @return {boolean}
    */
   function isGenerator(path) {
@@ -39,7 +39,7 @@ module.exports = function ({types: t}) {
 
   /**
    * Only transform a body with a single return statement.
-   * @param {*} path
+   * @param {BabelPath} path
    * @return {boolean}
    */
   function isNotSingleReturnStatement(path) {
@@ -52,7 +52,7 @@ module.exports = function ({types: t}) {
 
   /**
    * Only convert functions that do not contains usage of `arguments`.
-   * @param {*} path
+   * @param {BabelPath} path
    * @return {boolean}
    */
   function containsArgumentsUsage(path) {
@@ -71,7 +71,7 @@ module.exports = function ({types: t}) {
   /**
    * If the FunctionDeclaration contains a ThisExpression, converting from a FunctionDeclaration to a
    * VariableDeclaration => VariableDeclarator => ArrowFunctionExpression isn't necessarily valid.
-   * @param {*} path
+   * @param {BabelPath} path
    * @return {boolean}
    */
   function containsThisExpression(path) {
@@ -87,7 +87,7 @@ module.exports = function ({types: t}) {
 
   /**
    * If the FunctionDeclaration identifier is used a manner besides a CallExpression, bail.
-   * @param {*} path
+   * @param {BabelPath} path
    * @param {string} name
    * @return {boolean}
    */
@@ -98,16 +98,29 @@ module.exports = function ({types: t}) {
     );
   }
 
+  /**
+   * @param {CompilerNode} node
+   * @return {ReturnType<t['arrowFunctionExpression']>}
+   */
   function createArrowFunctionExpression(node) {
-    const {params, body, async} = t.cloneNode(node);
+    const {async, body, params} = t.cloneNode(node);
     return t.arrowFunctionExpression(params, body.body[0].argument, async);
   }
 
+  /**
+   * @param {BabelPath} path
+   * @param {string} name
+   * @return {ReturnType<t['variableDeclarator']>}
+   */
   function createVariableDeclarator(path, name) {
     const arrowFunction = createArrowFunctionExpression(path.node);
     return t.variableDeclarator(t.identifier(name), arrowFunction);
   }
 
+  /**
+   * @param {BabelPath} path
+   * @return {ReturnType<t['variableDeclaration']>}
+   */
   function createVariableDeclaration(path) {
     const declarator = createVariableDeclarator(path, path.node.id.name);
     const declaration = t.variableDeclaration('let', [declarator]);
@@ -125,7 +138,7 @@ module.exports = function ({types: t}) {
     (path) => referencesAreOnlyCallExpressions(path, path.get('id').node.name),
   ];
 
-  // If CallExpression names should be exhempt from arrow conversion, denote them here.
+  // If CallExpression names should be exempt from arrow conversion, denote them here.
   const EXEMPTED_EXPRESSION_NAME_REGEXS = [/registerService/];
 
   const EXPRESSION_BAIL_OUT_CONDITIONS = [
@@ -137,11 +150,13 @@ module.exports = function ({types: t}) {
     (path) => {
       const callExpression = path.findParent((p) => p.isCallExpression());
       if (callExpression) {
-        const {name} = (callExpression.node && callExpression.node.callee) || {
+        const {name, property} = (callExpression.node &&
+          callExpression.node.callee) || {
           name: null,
+          property: null,
         };
-        return EXEMPTED_EXPRESSION_NAME_REGEXS.every((regexp) =>
-          regexp.test(name)
+        return EXEMPTED_EXPRESSION_NAME_REGEXS.every(
+          (regexp) => regexp.test(name) || regexp.test(property.name)
         );
       }
 
diff --git a/build-system/babel-plugins/babel-plugin-transform-function-declarations/test/fixtures/transform-assertions/argument-function/input.js b/build-system/babel-plugins/babel-plugin-transform-function-declarations/test/fixtures/transform-assertions/argument-function/input.js
index 2c74debd662cb..7aefb4c339b02 100644
--- a/build-system/babel-plugins/babel-plugin-transform-function-declarations/test/fixtures/transform-assertions/argument-function/input.js
+++ b/build-system/babel-plugins/babel-plugin-transform-function-declarations/test/fixtures/transform-assertions/argument-function/input.js
@@ -15,4 +15,7 @@
  */
 registerServiceBuilder(win, 'story-analytics', function() {
   return new StoryAnalyticsService();
-});
\ No newline at end of file
+});
+
+geoDeferred = new Deferred();
+AMP.registerServiceForDoc('foo', function(){return geoDeferred.promise;});
\ No newline at end of file
diff --git a/build-system/babel-plugins/babel-plugin-transform-function-declarations/test/fixtures/transform-assertions/argument-function/output.js b/build-system/babel-plugins/babel-plugin-transform-function-declarations/test/fixtures/transform-assertions/argument-function/output.js
index a22a7c0839bef..dfcca91b730cb 100644
--- a/build-system/babel-plugins/babel-plugin-transform-function-declarations/test/fixtures/transform-assertions/argument-function/output.js
+++ b/build-system/babel-plugins/babel-plugin-transform-function-declarations/test/fixtures/transform-assertions/argument-function/output.js
@@ -15,4 +15,8 @@
  */
 registerServiceBuilder(win, 'story-analytics', function () {
   return new StoryAnalyticsService();
-});
\ No newline at end of file
+});
+geoDeferred = new Deferred();
+AMP.registerServiceForDoc('foo', function () {
+  return geoDeferred.promise;
+});
diff --git a/build-system/babel-plugins/babel-plugin-transform-html-template/index.js b/build-system/babel-plugins/babel-plugin-transform-html-template/index.js
index 14b6dff5bd77c..f8e88c020f9ef 100644
--- a/build-system/babel-plugins/babel-plugin-transform-html-template/index.js
+++ b/build-system/babel-plugins/babel-plugin-transform-html-template/index.js
@@ -15,8 +15,8 @@
  */
 
 const {
-  staticTemplateTags,
   staticTemplateFactoryFns,
+  staticTemplateTags,
 } = require('../static-template-metadata');
 const {minify} = require('html-minifier');
 
@@ -97,9 +97,8 @@ module.exports = function ({types: t}) {
                 hoistedIdentifier = t.clone(INSERTED_TEMPLATES.get(template));
               } else {
                 // Template not hoisted. Hoist it.
-                hoistedIdentifier = path.scope.generateUidIdentifier(
-                  'template'
-                );
+                hoistedIdentifier =
+                  path.scope.generateUidIdentifier('template');
                 const program = path.findParent((path) => path.isProgram());
 
                 program.scope.push({
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/index.js b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/index.js
deleted file mode 100644
index e7593e76e504a..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/index.js
+++ /dev/null
@@ -1,223 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-const {dirname, relative, join} = require('path');
-const {transformFileSync} = require('@babel/core');
-
-/**
- * @fileoverview
- * Finds `configureComponent(MyConstructor, {foo: 'bar'})` calls and:
- *
- * 1. Inlines imported `MyConstructor` in current scope.
- *
- * 2. Replaces `*.STATIC_CONFIG_.foo` accesses to their value as
- *    defined in config object `{foo: 'bar'}`.
- *
- * 3. Replaces `configureComponent(...)` call with identifier for inlined, static
- *    `MyConstructor`.
- */
-
-const calleeName = 'configureComponent';
-const replacedMember = 'STATIC_CONFIG_';
-
-/**
- * Sub-plugin that transforms inlined file that exports wrapped constructor.
- * @param {{types: string}} options
- * @return {!Object}
- */
-function transformRedefineInline({types: t}) {
-  const propValueNode = (propValues, key, opt_default) =>
-    propValues[key] || opt_default || t.identifier('undefined');
-
-  function unjsdoc({leadingComments}) {
-    if (!leadingComments) {
-      return;
-    }
-    for (let i = 0; i < leadingComments.length; i++) {
-      const comment = leadingComments[i];
-      comment.value = comment.value.replace(/^\*/, ' [removed]');
-    }
-  }
-
-  function unexport(path) {
-    if (path.node.declaration) {
-      path.replaceWith(path.node.declaration);
-      return;
-    }
-    path.remove();
-  }
-
-  return {
-    name: 'transform-redefine-inline',
-    visitor: {
-      ExportDefaultDeclaration: unexport,
-      ExportNamedDeclaration: unexport,
-      ExportAllDeclaration: unexport,
-      ImportDeclaration(path, {opts}) {
-        const {source} = path.node;
-        if (source.value.startsWith('.')) {
-          source.value = join(opts.from, source.value).replace(/^[^.]/, './$&');
-        }
-      },
-      MemberExpression(path, {opts}) {
-        // Handle x.y.{...}.$replacedMember prop accesses
-        if (!t.isIdentifier(path.node.property, {name: replacedMember})) {
-          return;
-        }
-
-        const assignment = path.find(
-          ({parent, parentKey, parentPath}) =>
-            parentKey == 'left' &&
-            t.isAssignmentExpression(parent) &&
-            t.isExpressionStatement(parentPath.parent)
-        );
-
-        if (assignment) {
-          unjsdoc(assignment.parentPath.parent);
-          assignment.parentPath.parentPath.remove();
-          return;
-        }
-
-        if (
-          t.isMemberExpression(path.parent) &&
-          t.isIdentifier(path.parent.property)
-        ) {
-          const {name} = path.parent.property;
-          path.parentPath.replaceWith(propValueNode(opts.propValues, name));
-          return;
-        }
-
-        if (
-          t.isVariableDeclarator(path.parent) &&
-          t.isObjectPattern(path.parent.id) &&
-          t.isVariableDeclaration(path.parentPath.parent)
-        ) {
-          const assignments = path.parent.id.properties.map(({key, value}) =>
-            t.variableDeclarator(
-              value.left || value,
-              propValueNode(opts.propValues, key.name, value.right)
-            )
-          );
-          path.parentPath.replaceWithMultiple(assignments);
-        }
-      },
-    },
-  };
-}
-
-/**
- * Transforms using transformRedefineInline sub-plugin.
- * @param {string} sourceFilename
- * @param {!Object} opts
- * @return {!Object}
- */
-const redefineInline = (sourceFilename, opts) =>
-  transformFileSync(sourceFilename.toString(), {
-    configFile: false,
-    code: false,
-    ast: true,
-    sourceType: 'module',
-    plugins: [[transformRedefineInline, opts]],
-  });
-
-/**
- * Replaces `configureComponent()` wrapping calls.
- * @param {{types: string}} options
- * @return {!Object}
- */
-module.exports = function ({types: t}) {
-  function getImportPath(nodes, name) {
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
-      if (
-        t.isImportDeclaration(node) &&
-        node.specifiers.find(({imported}) => t.isIdentifier(imported, {name}))
-      ) {
-        return node.source.value;
-      }
-    }
-  }
-
-  return {
-    name: 'transform-inline-decl-extensions',
-    visitor: {
-      CallExpression(path, {file}) {
-        if (!t.isIdentifier(path.node.callee, {name: calleeName})) {
-          return;
-        }
-
-        const [importedId, propsObj] = path.node.arguments;
-        if (!t.isIdentifier(importedId) || !t.isObjectExpression(propsObj)) {
-          return;
-        }
-
-        const program = path.findParent((p) => t.isProgram(p));
-
-        const importPath = getImportPath(program.node.body, importedId.name);
-        if (!importPath) {
-          return;
-        }
-
-        for (const name in program.scope.bindings) {
-          if (name) {
-            path.scope.rename(name, program.scope.generateUid(name));
-          }
-        }
-
-        const propValues = Object.create(null);
-
-        for (const {key, value} of propsObj.properties) {
-          const {name} = key;
-
-          if (t.isMemberExpression(value)) {
-            throw path.buildCodeFrameError(
-              `${replacedMember} properties must not be assigned to members. ` +
-                'Set necessary values to program-level constants.'
-            );
-          }
-
-          if (t.isIdentifier(value)) {
-            const binding = path.scope.getBinding(value.name);
-            if (!binding || !t.isProgram(binding.scope.block)) {
-              throw path.buildCodeFrameError(
-                `ids used in ${replacedMember} must be defined as ` +
-                  'program-level constants.'
-              );
-            }
-            propValues[name] = value;
-            continue;
-          }
-
-          const id = program.scope.generateUidIdentifier(name);
-          program.scope.push({id, init: value, kind: 'const'});
-          propValues[name] = id;
-        }
-
-        const currentDirname = dirname(file.opts.filename);
-        const importedModule = join(currentDirname, importPath);
-
-        // TODO(go.amp.dev/issue/26948): sourcemaps
-        const importedInline = redefineInline(require.resolve(importedModule), {
-          propValues,
-          from: relative(currentDirname, dirname(importedModule)),
-        });
-
-        program.unshiftContainer('body', importedInline.ast.program.body);
-
-        path.replaceWith(t.identifier(importedId.name));
-      },
-    },
-  };
-};
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/destructuring/input-base-class.js b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/destructuring/input-base-class.js
deleted file mode 100644
index b6dc3ef7c861d..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/destructuring/input-base-class.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-const {a, b, c} = x.STATIC_CONFIG_;
-const {a: a1, b: b1, c: c1} = x.y.STATIC_CONFIG_;
-
-export class Destructuring {
-  method() {
-    const {a, b: bRenamed, c} = this.STATIC_CONFIG_;
-  }
-  withDefaultValues() {
-    const {
-      a = 'default value for a',
-      b: renamedBbbb = 'default value for b',
-      c = 'default value for c',
-      d = 'default value for d',
-      e: renamedE = 'default value for e',
-    } = this.STATIC_CONFIG_;
-  }
-  unset() {
-    const {
-      a,
-      thisPropIsUnset,
-      thisPropIsUnsetToo,
-    } = this.STATIC_CONFIG_;
-  }
-}
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/destructuring/input.js b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/destructuring/input.js
deleted file mode 100644
index f62ac7b6ad7bd..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/destructuring/input.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-import {Destructuring} from './input-base-class';
-foo(
-  configureComponent(Destructuring, {
-    a: 'value for a',
-    b: 'value for b',
-    c: 'value for c',
-  })
-);
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/destructuring/options.json b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/destructuring/options.json
deleted file mode 100644
index ece2997aa86d3..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/destructuring/options.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "plugins": ["../../../../"],
-  "sourceType": "module"
-}
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/destructuring/output.mjs b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/destructuring/output.mjs
deleted file mode 100644
index 3afe6c6134340..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/destructuring/output.mjs
+++ /dev/null
@@ -1,51 +0,0 @@
-const _a = 'value for a',
-      _b = 'value for b',
-      _c = 'value for c';
-
-/**
- * Copyright 2020 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.
- */
-const a = _a,
-      b = _b,
-      c = _c;
-const a1 = _a,
-      b1 = _b,
-      c1 = _c;
-
-class Destructuring {
-  method() {
-    const a = _a,
-          bRenamed = _b,
-          c = _c;
-  }
-
-  withDefaultValues() {
-    const a = _a,
-          renamedBbbb = _b,
-          c = _c,
-          d = 'default value for d',
-          renamedE = 'default value for e';
-  }
-
-  unset() {
-    const a = _a,
-          thisPropIsUnset = undefined,
-          thisPropIsUnsetToo = undefined;
-  }
-
-}
-
-import { Destructuring as _Destructuring } from './input-base-class';
-foo(_Destructuring);
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/direct-access/input-base-class.js b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/direct-access/input-base-class.js
deleted file mode 100644
index d901ebd08f67c..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/direct-access/input-base-class.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-export class DirectAccess {
-  setProps() {
-    this.STATIC_CONFIG_.foo;
-    somethingSomething(this.STATIC_CONFIG_.bar);
-    tacos(this.STATIC_CONFIG_.nestedObject.baz);
-  }
-
-  unsetProps() {
-    return this.STATIC_CONFIG_.thisPropIsUnset;
-  }
-
-  propsSetToIds() {
-    return this.STATIC_CONFIG_.scopedId;
-  }
-}
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/direct-access/input.js b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/direct-access/input.js
deleted file mode 100644
index 8f58e6e44c007..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/direct-access/input.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-import {DirectAccess} from './input-base-class';
-
-const scopedId = 'value for scopedId';
-
-foo(
-  configureComponent(DirectAccess, {
-    scopedId,
-    foo: 'value for foo',
-    bar: 'value for bar',
-    nestedObject: {foo: 'foo'},
-  })
-);
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/direct-access/options.json b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/direct-access/options.json
deleted file mode 100644
index ece2997aa86d3..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/direct-access/options.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "plugins": ["../../../../"],
-  "sourceType": "module"
-}
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/direct-access/output.mjs b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/direct-access/output.mjs
deleted file mode 100644
index 31e2916bdcc1e..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/direct-access/output.mjs
+++ /dev/null
@@ -1,41 +0,0 @@
-const _foo = 'value for foo',
-      _bar = 'value for bar',
-      _nestedObject = {
-  foo: 'foo'
-};
-
-/**
- * Copyright 2020 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.
- */
-class DirectAccess {
-  setProps() {
-    _foo;
-    somethingSomething(_bar);
-    tacos(_nestedObject.baz);
-  }
-
-  unsetProps() {
-    return undefined;
-  }
-
-  propsSetToIds() {
-    return _scopedId;
-  }
-
-}
-
-import { DirectAccess as _DirectAccess } from './input-base-class';
-const _scopedId = 'value for scopedId';
-foo(_DirectAccess);
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/relative-imports/input-nested-directory/input-base-class.js b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/relative-imports/input-nested-directory/input-base-class.js
deleted file mode 100644
index 519f1ddb2bb15..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/relative-imports/input-nested-directory/input-base-class.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-import '../../backwards';
-import './for/wards';
-
-import {leaveThis} from 'alone';
-import {baz} from './foo/bar';
-
-export class RelativeImports {}
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/relative-imports/input.js b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/relative-imports/input.js
deleted file mode 100644
index 43daed5b3f7d1..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/relative-imports/input.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-import {RelativeImports} from './input-nested-directory/input-base-class';
-
-foo(
-  configureComponent(RelativeImports, {
-    a: 'value for a',
-    b: 'value for b',
-    d: 'value for c',
-  })
-);
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/relative-imports/options.json b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/relative-imports/options.json
deleted file mode 100644
index ece2997aa86d3..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/relative-imports/options.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "plugins": ["../../../../"],
-  "sourceType": "module"
-}
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/relative-imports/output.mjs b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/relative-imports/output.mjs
deleted file mode 100644
index 0d5fb9cbbab93..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/relative-imports/output.mjs
+++ /dev/null
@@ -1,28 +0,0 @@
-const _a = 'value for a',
-      _b = 'value for b',
-      _d = 'value for c';
-
-/**
- * Copyright 2020 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.
- */
-import "../backwards";
-import "./input-nested-directory/for/wards";
-import { leaveThis } from 'alone';
-import { baz } from "./input-nested-directory/foo/bar";
-
-class RelativeImports {}
-
-import { RelativeImports as _RelativeImports } from './input-nested-directory/input-base-class';
-foo(_RelativeImports);
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/remove-assignment/input-base-class.js b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/remove-assignment/input-base-class.js
deleted file mode 100644
index 99c46a77faec3..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/remove-assignment/input-base-class.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-export class RemoveAssignment {
-  method() {
-    /** @private {something} */
-    this.STATIC_CONFIG_ = {};
-
-    /** @private {something} */
-    this.STATIC_CONFIG_.whatever = 'foo';
-  }
-}
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/remove-assignment/input.js b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/remove-assignment/input.js
deleted file mode 100644
index 6073bbe36711b..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/remove-assignment/input.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-import {RemoveAssignment} from './input-base-class';
-
-foo(configureComponent(RemoveAssignment, {}));
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/remove-assignment/options.json b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/remove-assignment/options.json
deleted file mode 100644
index ece2997aa86d3..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/remove-assignment/options.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "plugins": ["../../../../"],
-  "sourceType": "module"
-}
diff --git a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/remove-assignment/output.mjs b/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/remove-assignment/output.mjs
deleted file mode 100644
index 4dd0e7d73a757..0000000000000
--- a/build-system/babel-plugins/babel-plugin-transform-inline-configure-component/test/fixtures/inline-configure-component/remove-assignment/output.mjs
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-class RemoveAssignment {
-  method() {}
-
-}
-
-import { RemoveAssignment as _RemoveAssignment } from './input-base-class';
-foo(_RemoveAssignment);
diff --git a/build-system/babel-plugins/babel-plugin-transform-internal-version/index.js b/build-system/babel-plugins/babel-plugin-transform-internal-version/index.js
new file mode 100644
index 0000000000000..4322a1f0d4b08
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-internal-version/index.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright 2021 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.
+ */
+
+module.exports = function (babel, options = {}) {
+  const {types: t} = babel;
+  const {version} = options;
+
+  if (!version) {
+    throw new Error(
+      'Need to specify runtime version as an option to babel transformer'
+    );
+  }
+
+  return {
+    name: 'transform-internal-version',
+
+    visitor: {
+      StringLiteral(path) {
+        const {node} = path;
+        const {value} = node;
+        if (!value.includes('$internalRuntimeVersion$')) {
+          return;
+        }
+
+        const replacement = t.stringLiteral(
+          value.replace(/\$internalRuntimeVersion\$/g, version)
+        );
+        t.inherits(replacement, node);
+        path.replaceWith(replacement);
+      },
+
+      TemplateElement(path) {
+        const {node} = path;
+        const {cooked, raw} = node.value;
+        if (!raw.includes('$internalRuntimeVersion$')) {
+          return;
+        }
+
+        const replacement = t.templateElement({
+          cooked: cooked.replace(/\$internalRuntimeVersion\$/g, version),
+          raw: raw.replace(/\$internalRuntimeVersion\$/g, version),
+        });
+        t.inherits(replacement, node);
+        path.replaceWith(replacement);
+      },
+    },
+  };
+};
diff --git a/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/basic/input.js b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/basic/input.js
new file mode 100644
index 0000000000000..9c5499316dd7f
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/basic/input.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright 2021 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.
+ */
+
+0; // Stop directive parsing
+
+"$internalRuntimeVersion$";
+'before$internalRuntimeVersion$after';
+
+function internalRuntimeVersion() {
+  return '$internalRuntimeVersion$';
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/basic/options.json b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/basic/options.json
new file mode 100644
index 0000000000000..893793d83dba1
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/basic/options.json
@@ -0,0 +1,3 @@
+{
+  "plugins": [["../../../../", {"version": "123"}]]
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/basic/output.js b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/basic/output.js
new file mode 100644
index 0000000000000..78df5e15ac899
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/basic/output.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright 2021 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.
+ */
+0; // Stop directive parsing
+
+"123";
+"before123after";
+
+function internalRuntimeVersion() {
+  return "123";
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/template-element/input.js b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/template-element/input.js
new file mode 100644
index 0000000000000..83d7e0f2d19a6
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/template-element/input.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2021 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.
+ */
+
+0; // Stop directive parsing
+
+`$internalRuntimeVersion$`;
+`before$internalRuntimeVersion$after`;
+
+function internalRuntimeVersion() {
+  `$internalRuntimeVersion$`;
+  `\$internalRuntimeVersion$`;
+  `$\internalRuntimeVersion$`;
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/template-element/options.json b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/template-element/options.json
new file mode 100644
index 0000000000000..893793d83dba1
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/template-element/options.json
@@ -0,0 +1,3 @@
+{
+  "plugins": [["../../../../", {"version": "123"}]]
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/template-element/output.js b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/template-element/output.js
new file mode 100644
index 0000000000000..d35fab32e67b1
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/fixtures/transform/template-element/output.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright 2021 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.
+ */
+0; // Stop directive parsing
+
+`123`;
+`before123after`;
+
+function internalRuntimeVersion() {
+  `123`;
+  `\123`;
+  `$\internalRuntimeVersion$`;
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-internal-version/test/index.js b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/index.js
new file mode 100644
index 0000000000000..762295c3a9c84
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-internal-version/test/index.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const runner = require('@babel/helper-plugin-test-runner').default;
+
+runner(__dirname);
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/index.js b/build-system/babel-plugins/babel-plugin-transform-json-import/index.js
new file mode 100644
index 0000000000000..b622e5fdbb0af
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/index.js
@@ -0,0 +1,100 @@
+/**
+ * Copyright 2020 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.
+ */
+
+const {dirname, join, relative, resolve} = require('path');
+const {readFileSync} = require('fs');
+
+// Transforms JSON imports into a `JSON.parse` call:
+//
+// Input:
+// ```
+// import key from './options.json' assert { type: 'json' };
+// ```
+//
+// Output:
+// ```
+// const key = JSON.parse('{"imported": "json"}');
+// ```
+module.exports = function ({template, types: t}, options) {
+  const {freeze = true} = options;
+
+  return {
+    manipulateOptions(_opts, parserOpts) {
+      parserOpts.plugins.push('importAssertions');
+    },
+
+    visitor: {
+      ImportDeclaration(path) {
+        const {assertions, source, specifiers} = path.node;
+        if (!assertions || assertions.length === 0) {
+          return;
+        }
+
+        if (assertions.length !== 1) {
+          throw path.buildCodeFrameError(
+            'too many import assertions, we only support `assert { "type": "json" }`'
+          );
+        }
+        const assertion = assertions[0];
+        if (
+          !t.isIdentifier(assertion.key, {name: 'type'}) &&
+          !t.isStringLiteral(assertion.key, {value: 'type'})
+        ) {
+          throw path.buildCodeFrameError(
+            'unknown assertion, we only support `assert { "type": "json" }`'
+          );
+        }
+        if (!t.isStringLiteral(assertion.value, {value: 'json'})) {
+          throw path.buildCodeFrameError(
+            'unknown type assertion, we only support `assert { "type": "json" }`'
+          );
+        }
+
+        const specifier = specifiers[0].local;
+        const jsonPath = relative(
+          join(__dirname, '..', '..', '..'),
+          resolve(dirname(this.file.opts.filename), source.value)
+        );
+        let json;
+        try {
+          json = JSON.parse(readFileSync(jsonPath, 'utf8'));
+        } catch (e) {
+          throw path.buildCodeFrameError(
+            `could not load JSON file at '${jsonPath}'`
+          );
+        }
+
+        if (freeze) {
+          path.replaceWith(
+            template.statement
+              .ast`const ${specifier} = JSON.parse('${JSON.stringify(
+              json
+            )}', function(key, val) {
+                if (typeof val === 'object') Object.freeze(val);
+                return val;
+              });`
+          );
+          return;
+        }
+
+        path.replaceWith(
+          template.statement
+            .ast`const ${specifier} = JSON.parse('${JSON.stringify(json)}');`
+        );
+      },
+    },
+  };
+};
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-cant-load-json/input.js b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-cant-load-json/input.js
new file mode 100644
index 0000000000000..05b2e1a392ef7
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-cant-load-json/input.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import json from './404.json' assert { type: 'json' };
+
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-cant-load-json/options.json b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-cant-load-json/options.json
new file mode 100644
index 0000000000000..55236288a6b21
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-cant-load-json/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": ["../../../.."],
+  "sourceType": "module",
+  "throws": "could not load JSON file at 'build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-cant-load-json/404.json'"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-not-type-assertion/input.js b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-not-type-assertion/input.js
new file mode 100644
index 0000000000000..c16088d63e2e5
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-not-type-assertion/input.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import json from './options.json' assert { more: 'other' };
+
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-not-type-assertion/options.json b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-not-type-assertion/options.json
new file mode 100644
index 0000000000000..008b6f6448061
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-not-type-assertion/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": ["../../../.."],
+  "sourceType": "module",
+  "throws": "The only accepted module attribute is `type` (17:43)"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-not-type-json-assertion/input.js b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-not-type-json-assertion/input.js
new file mode 100644
index 0000000000000..8a741e52b7a4d
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-not-type-json-assertion/input.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import json from './options.json' assert { type: 'other' };
+
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-not-type-json-assertion/options.json b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-not-type-json-assertion/options.json
new file mode 100644
index 0000000000000..a654819d4bb08
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-not-type-json-assertion/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": ["../../../.."],
+  "sourceType": "module",
+  "throws": "unknown type assertion, we only support `assert { \"type\": \"json\" }`"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-too-many-assertions/input.js b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-too-many-assertions/input.js
new file mode 100644
index 0000000000000..bf8b5356330ea
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-too-many-assertions/input.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import json from './options.json' assert { type: 'json', more: 'other' };
+
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-too-many-assertions/options.json b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-too-many-assertions/options.json
new file mode 100644
index 0000000000000..00c74d1aa6c11
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/error-too-many-assertions/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": ["../../../.."],
+  "sourceType": "module",
+  "throws": "The only accepted module attribute is `type` (17:57)"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-freeze/input.js b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-freeze/input.js
new file mode 100644
index 0000000000000..98d9f9b0f46f5
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-freeze/input.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import key from './options.json' assert { type: 'json' };
+import string from './options.json' assert { "type": 'json' };
+
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-freeze/options.json b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-freeze/options.json
new file mode 100644
index 0000000000000..defb592a2a3b5
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-freeze/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": [["../../../..", {"freeze": true}]],
+  "sourceType": "module"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-freeze/output.mjs b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-freeze/output.mjs
new file mode 100644
index 0000000000000..2c01e1fa90ff0
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-freeze/output.mjs
@@ -0,0 +1,23 @@
+/**
+ * Copyright 2020 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.
+ */
+const key = JSON.parse("{\"plugins\":[[\"../../../..\",{\"freeze\":true}]],\"sourceType\":\"module\"}", function (key, val) {
+  if (typeof val === 'object') Object.freeze(val);
+  return val;
+});
+const string = JSON.parse("{\"plugins\":[[\"../../../..\",{\"freeze\":true}]],\"sourceType\":\"module\"}", function (key, val) {
+  if (typeof val === 'object') Object.freeze(val);
+  return val;
+});
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-no-freeze/input.js b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-no-freeze/input.js
new file mode 100644
index 0000000000000..98d9f9b0f46f5
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-no-freeze/input.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import key from './options.json' assert { type: 'json' };
+import string from './options.json' assert { "type": 'json' };
+
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-no-freeze/options.json b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-no-freeze/options.json
new file mode 100644
index 0000000000000..df60916a1255d
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-no-freeze/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": [["../../../..", {"freeze": false}]],
+  "sourceType": "module"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-no-freeze/output.mjs b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-no-freeze/output.mjs
new file mode 100644
index 0000000000000..b862d0800a56f
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform-no-freeze/output.mjs
@@ -0,0 +1,17 @@
+/**
+ * Copyright 2020 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.
+ */
+const key = JSON.parse("{\"plugins\":[[\"../../../..\",{\"freeze\":false}]],\"sourceType\":\"module\"}");
+const string = JSON.parse("{\"plugins\":[[\"../../../..\",{\"freeze\":false}]],\"sourceType\":\"module\"}");
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform/input.js b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform/input.js
new file mode 100644
index 0000000000000..98d9f9b0f46f5
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform/input.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import key from './options.json' assert { type: 'json' };
+import string from './options.json' assert { "type": 'json' };
+
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform/options.json b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform/options.json
new file mode 100644
index 0000000000000..4020c566b4d90
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["../../../.."],
+  "sourceType": "module"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform/output.mjs b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform/output.mjs
new file mode 100644
index 0000000000000..084b4643d22fa
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/fixtures/transform-assertions/transform/output.mjs
@@ -0,0 +1,23 @@
+/**
+ * Copyright 2020 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.
+ */
+const key = JSON.parse("{\"plugins\":[\"../../../..\"],\"sourceType\":\"module\"}", function (key, val) {
+  if (typeof val === 'object') Object.freeze(val);
+  return val;
+});
+const string = JSON.parse("{\"plugins\":[\"../../../..\"],\"sourceType\":\"module\"}", function (key, val) {
+  if (typeof val === 'object') Object.freeze(val);
+  return val;
+});
diff --git a/build-system/babel-plugins/babel-plugin-transform-json-import/test/index.js b/build-system/babel-plugins/babel-plugin-transform-json-import/test/index.js
new file mode 100644
index 0000000000000..bb2e50c56b6af
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-json-import/test/index.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2020 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.
+ */
+
+const runner = require('@babel/helper-plugin-test-runner').default;
+
+runner(__dirname);
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/create-hash.js b/build-system/babel-plugins/babel-plugin-transform-jss/create-hash.js
new file mode 100644
index 0000000000000..bd75969db79f0
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/create-hash.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2020 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.
+ */
+
+const crypto = require('crypto');
+
+// This is in its own file in order to make it easy to stub in tests.
+module.exports = {
+  createHash: (filepath) =>
+    crypto
+      .createHash('sha256')
+      .update(toPosix(filepath))
+      .digest('hex')
+      .slice(0, 7),
+};
+
+/**
+ * To support Windows, use posix separators for all filepath hashes.
+ * @param {string} filepath
+ * @return {string}
+ */
+function toPosix(filepath) {
+  return filepath.replace(/\\\\?/g, '/');
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/index.js b/build-system/babel-plugins/babel-plugin-transform-jss/index.js
new file mode 100644
index 0000000000000..0b257d009abd8
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/index.js
@@ -0,0 +1,385 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * Takes a .jss.js file and transforms the `useStyles` export to remove side effects
+ * and directly return the classes map. Also includes special key 'CSS' in the classes
+ * object with the entire CSS string.
+ *
+ * @example
+ * In:
+ * ```
+ * import {createUseStyles} from 'react-jss'
+ *
+ * const jss = { button: { fontSize: 12 }}
+ * export const useStyles = createUseStyles(jss);
+ *
+ * import {useStyles} from './imported.jss';
+ * useStyles().button;
+ * ```
+ *
+ * Out:
+ * ```
+ * const jss = { button: { fontSize: 12 }}
+ * const _classes = {button: 'button-1'}
+ * export const useStyles = () => _classes;
+ * export const CSS = '.button-1 { font-size: 12px }'
+ * export const $button = 'button-1';
+ *
+ * import {useStyles} from './imported.jss';
+ * import {$button as _$button} from './imported.jss';
+ * _$button
+ * ```
+ */
+
+const hash = require('./create-hash');
+const {addNamed} = require('@babel/helper-module-imports');
+const {create} = require('jss');
+const {default: preset} = require('jss-preset-default');
+const {join, relative} = require('path');
+const {transformCssSync} = require('../../tasks/css/jsify-css-sync');
+
+module.exports = function ({template, types: t}) {
+  /**
+   * @param {string} filename
+   * @return {boolean}
+   */
+  function isJssFile(filename) {
+    return filename.endsWith('.jss.js');
+  }
+
+  /**
+   * @param {string} name
+   * @return {string}
+   */
+  function classnameId(name) {
+    return `\$${name}`;
+  }
+
+  /**
+   * @param {Path} reference
+   * @param {string} importedName
+   * @return {?Path}
+   */
+  function findImportDeclaration(reference, importedName) {
+    if (!reference.isIdentifier()) {
+      return null;
+    }
+
+    const binding = reference.scope.getBinding(reference.node.name);
+    if (!binding || binding.kind !== 'module') {
+      return null;
+    }
+
+    const {path} = binding;
+    const {parentPath} = path;
+
+    if (
+      !parentPath.isImportDeclaration() ||
+      !path.isImportSpecifier() ||
+      !t.isIdentifier(path.node.imported, {name: importedName})
+    ) {
+      return null;
+    }
+
+    return parentPath;
+  }
+
+  /**
+   * Replacess MemberExpressions.
+   * @example
+   * In:
+   * ```
+   *   import {useStyles} from 'foo';
+   *   const a = useStyles();
+   *   a.b;
+   *   useStyles().c;
+   * ```
+   * Out:
+   * ```
+   *   import {useStyles} from 'foo';
+   *   import {$b as _$b} from 'foo';
+   *   import {$c as _$c} from 'foo';
+   *   $_b;
+   *   $_c;
+   * ```
+   * @param {Path} importDeclaration
+   * @param {Path} memberExpression
+   * @return {boolean}
+   */
+  function replaceMemberExpression(importDeclaration, memberExpression) {
+    if (!memberExpression.isMemberExpression({computed: false})) {
+      return false;
+    }
+    const {property} = memberExpression.node;
+    if (!t.isIdentifier(property)) {
+      return false;
+    }
+
+    const localId = getImportIdentifier(importDeclaration, property.name);
+    memberExpression.replaceWith(t.cloneNode(localId));
+
+    return true;
+  }
+
+  /**
+   * Replaces VariableDeclarations that use ObjectPatterns (destructuring).
+   * @example
+   * In:
+   * ```
+   *   import {useStyles} from 'foo';
+   *   const {a, ...rest} = useStyles();
+   * ```
+   * Out:
+   * ```
+   *   import {useStyles} from 'foo';
+   *   import {$a as _$a} from 'foo';
+   *   const {a: _unused, ...rest} = useStyles();
+   *   const a = $_a;
+   * ```
+   * @param {Path} importDeclaration
+   * @param {Path} variableDeclarator
+   * @return {boolean}
+   */
+  function replaceObjectPattern(importDeclaration, variableDeclarator) {
+    if (
+      !variableDeclarator.isVariableDeclarator() ||
+      !t.isObjectPattern(variableDeclarator.node.id)
+    ) {
+      return false;
+    }
+    const {properties} = variableDeclarator.node.id;
+    const replacedPropertyCount = properties.reduce((count, property) => {
+      const {computed, key, value} = property;
+      if (computed || !t.isIdentifier(value) || !t.isIdentifier(key)) {
+        return count;
+      }
+      const importId = getImportIdentifier(importDeclaration, key.name);
+      const declaration = variableDeclarator.parentPath;
+      declaration.insertAfter(
+        template.statement.ast(
+          `${declaration.node.kind} ${value.name} = ${importId.name}`
+        )
+      );
+      // Unused props are required to allow ...rest:
+      // const {a: _unused, ...rest} = useStyles();
+      // const a = _$a;
+      property.value = variableDeclarator.scope.generateUidIdentifier('unused');
+      return count + 1;
+    }, 0);
+    if (properties.length === replacedPropertyCount) {
+      variableDeclarator.remove();
+    }
+    return true;
+  }
+
+  /**
+   * Replaces VariableDeclarators by following their references.
+   * @example
+   * In:
+   * ```
+   *   import {useStyles} from 'foo';
+   *   const a = useStyles();
+   *   a.b;
+   * ```
+   * Out:
+   * ```
+   *   import {useStyles} from 'foo';
+   *   import {$b as _$b} from 'foo';
+   *   $_b;
+   * ```
+   * @param {Path} importDeclaration
+   * @param {Path} variableDeclarator
+   * @return {boolean}
+   */
+  function replaceVariableDeclaratorRefs(
+    importDeclaration,
+    variableDeclarator
+  ) {
+    if (
+      !variableDeclarator.isVariableDeclarator() ||
+      !t.isIdentifier(variableDeclarator.node.id)
+    ) {
+      return false;
+    }
+    const {referencePaths} =
+      variableDeclarator.scope.bindings[variableDeclarator.node.id.name];
+    const replacedReferenceCount = referencePaths.reduce(
+      (count, identifier) =>
+        replaceExpression(importDeclaration, identifier) ? count + 1 : count,
+      0
+    );
+    if (referencePaths.length === replacedReferenceCount) {
+      variableDeclarator.remove();
+    }
+    return true;
+  }
+
+  /**
+   * @param {Path} importDeclaration
+   * @param {Path} callExpressionOrIdentifier
+   * @return {boolean}
+   */
+  function replaceExpression(importDeclaration, callExpressionOrIdentifier) {
+    const {parentPath} = callExpressionOrIdentifier;
+    return (
+      replaceMemberExpression(importDeclaration, parentPath) ||
+      replaceObjectPattern(importDeclaration, parentPath) ||
+      replaceVariableDeclaratorRefs(importDeclaration, parentPath)
+    );
+  }
+
+  /**
+   * @param {Path} importDeclaration
+   * @param {string} name
+   * @return {string}
+   */
+  function getImportIdentifier(importDeclaration, name) {
+    return addNamed(
+      importDeclaration,
+      classnameId(name),
+      importDeclaration.node.source.value
+    );
+  }
+
+  const seen = new Map();
+  /**
+   * @param {string} JSS
+   * @param {string} filename
+   * @return {{
+   *   visitor: {
+   *     Program: {Function(path: string, state: *): void},
+   *     CallExpression: {Function(path: string, state: *): void},
+   *     ImportDeclaration: {Function(path: string, state: *): void},
+   *   }
+   * }}
+   */
+  function compileJss(JSS, filename) {
+    const relativeFilepath = relative(join(__dirname, '../../..'), filename);
+    const filehash = hash.createHash(relativeFilepath);
+    const jss = create({
+      ...preset(),
+      createGenerateId: () => {
+        return (rule) => {
+          const dashCaseKey = rule.key.replace(
+            /([A-Z])/g,
+            (c) => `-${c.toLowerCase()}`
+          );
+          const className = `${dashCaseKey}-${filehash}`;
+          if (seen.has(className)) {
+            throw new Error(
+              `Classnames must be unique across all files. Found a duplicate: ${className}`
+            );
+          }
+          seen.set(className, filename);
+          return className;
+        };
+      },
+    });
+    return jss.createStyleSheet(JSS);
+  }
+
+  return {
+    visitor: {
+      Program(_path, state) {
+        const {filename} = state.file.opts;
+        seen.forEach((file, key) => {
+          if (file === filename) {
+            seen.delete(key);
+          }
+        });
+      },
+
+      CallExpression(path, state) {
+        const callee = path.get('callee');
+
+        // Replace users that import JSS.
+        const importDeclaration = findImportDeclaration(callee, 'useStyles');
+        if (importDeclaration) {
+          replaceExpression(importDeclaration, path);
+          return;
+        }
+
+        // Replace JSS exporter
+        const {filename} = state.file.opts;
+        if (!isJssFile(filename)) {
+          return;
+        }
+
+        if (!callee.isIdentifier({name: 'createUseStyles'})) {
+          return;
+        }
+
+        const {confident, value: JSS} = path.get('arguments.0').evaluate();
+        if (!confident) {
+          throw path.buildCodeFrameError(
+            `First argument to createUseStyles must be statically evaluatable.`
+          );
+        }
+        const sheet = compileJss(JSS, filename);
+        if ('CSS' in sheet.classes) {
+          throw path.buildCodeFrameError(
+            'Cannot have class named CSS in your JSS object.'
+          );
+        }
+
+        // Create the classes var.
+        // This is required for compatibility when a useStyles() result is
+        // passed around.
+        const id = path.scope.generateUidIdentifier('classes');
+        const init = t.valueToNode(sheet.classes);
+        path.scope.push({id, init});
+        path.scope.bindings[id.name].path.parentPath.addComment(
+          'leading',
+          '* @enum {string}'
+        );
+
+        // Replace useStyles with a getter for the new `classes` var.
+        path.replaceWith(template.expression.ast`(() => ${t.cloneNode(id)})`);
+
+        // Export each classname.
+        const exportDeclaration = path.findParent(
+          (p) => p.type === 'ExportNamedDeclaration'
+        );
+        for (const key in sheet.classes) {
+          const id = t.identifier(classnameId(key));
+          const init = t.valueToNode(sheet.classes[key]);
+          exportDeclaration.insertBefore(
+            template.statement.ast`export const ${id} = ${init}`
+          );
+        }
+
+        // Export a variable named CSS with the compiled CSS.
+        const {css} = transformCssSync(sheet.toString());
+        const cssStr = t.stringLiteral(css);
+        const cssExport = template.ast`export const CSS = ${cssStr}`;
+        exportDeclaration.insertAfter(cssExport);
+      },
+
+      // Remove the import for react-jss
+      ImportDeclaration(path, state) {
+        const {filename} = state.file.opts;
+        if (!isJssFile(filename)) {
+          return;
+        }
+
+        if (path.node.source.value === 'react-jss') {
+          path.remove();
+        }
+      },
+    },
+  };
+};
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-non-jss-file/input.js b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-non-jss-file/input.js
new file mode 100644
index 0000000000000..3e489713c5126
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-non-jss-file/input.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+const JSS = {button: {fontSize: 12}};
+export const useStyles = createUseStyles(JSS);
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-non-jss-file/options.json b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-non-jss-file/options.json
new file mode 100644
index 0000000000000..f72c9aa3f4957
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-non-jss-file/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": ["../../../.."],
+  "sourceType": "module",
+  "filename": "component.js"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-non-jss-file/output.mjs b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-non-jss-file/output.mjs
new file mode 100644
index 0000000000000..e26871f07bbf7
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-non-jss-file/output.mjs
@@ -0,0 +1,22 @@
+/**
+ * Copyright 2020 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.
+ */
+import { createUseStyles } from 'react-jss';
+const JSS = {
+  button: {
+    fontSize: 12
+  }
+};
+export const useStyles = createUseStyles(JSS);
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-unrelated-exports/input.js b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-unrelated-exports/input.js
new file mode 100644
index 0000000000000..c134476e3ecb8
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-unrelated-exports/input.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+export const useStyles = createUseStyles({
+  floatLeft: {float: 'left'},
+});
+
+// These next lines should be unaffected by jss transform.
+export const unrelated = 5;
+unrelated + unrelated == unrelated * 2;
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-unrelated-exports/options.json b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-unrelated-exports/options.json
new file mode 100644
index 0000000000000..0e3c7a1b03985
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-unrelated-exports/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": ["../../../.."],
+  "sourceType": "module",
+  "filename": "component.jss.js"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-unrelated-exports/output.mjs b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-unrelated-exports/output.mjs
new file mode 100644
index 0000000000000..091472ce06222
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/ignore-unrelated-exports/output.mjs
@@ -0,0 +1,26 @@
+/** @enum {string}*/
+var _classes = {
+  floatLeft: "float-left-07984bd"
+};
+export const $floatLeft = "float-left-07984bd";
+
+/**
+ * Copyright 2020 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.
+ */
+export const useStyles = () => _classes; // These next lines should be unaffected by jss transform.
+
+export const CSS = ".float-left-07984bd{float:left}";
+export const unrelated = 5;
+unrelated + unrelated == unrelated * 2;
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-deopt-use-styles/input.mjs b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-deopt-use-styles/input.mjs
new file mode 100644
index 0000000000000..821c11ff5fb98
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-deopt-use-styles/input.mjs
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// useStyles() references that don't belong to a MemberExpression should be 
+// preserve the classname object.
+
+// TODO(alanorozco): It would be nice if these cases were linted to prevent
+// deopt.
+
+import {useStyles} from './foo.jss';
+import {useStyles as useAnotherStyles} from './bar.jss';
+
+console.log(useStyles());
+console.log(useStyles().thisOneIsOptimized);
+
+const a = useAnotherStyles();
+console.log(a)
+console.log(a.thisOneIsOptimized)
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-deopt-use-styles/options.json b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-deopt-use-styles/options.json
new file mode 100644
index 0000000000000..a47282a6be9a9
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-deopt-use-styles/options.json
@@ -0,0 +1,3 @@
+{
+  "plugins": ["../../../.."]
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-deopt-use-styles/output.mjs b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-deopt-use-styles/output.mjs
new file mode 100644
index 0000000000000..337b61667d25a
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-deopt-use-styles/output.mjs
@@ -0,0 +1,29 @@
+import { $thisOneIsOptimized as _$thisOneIsOptimized2 } from "./bar.jss";
+import { $thisOneIsOptimized as _$thisOneIsOptimized } from "./foo.jss";
+
+/**
+ * Copyright 2021 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.
+ */
+// useStyles() references that don't belong to a MemberExpression should be 
+// preserve the classname object.
+// TODO(alanorozco): It would be nice if these cases were linted to prevent
+// deopt.
+import { useStyles } from './foo.jss';
+import { useStyles as useAnotherStyles } from './bar.jss';
+console.log(useStyles());
+console.log(_$thisOneIsOptimized);
+const a = useAnotherStyles();
+console.log(a);
+console.log(_$thisOneIsOptimized2);
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-use-styles/input.mjs b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-use-styles/input.mjs
new file mode 100644
index 0000000000000..2f1f8d6d6212e
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-use-styles/input.mjs
@@ -0,0 +1,37 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {useStyles} from '../foo.jss';
+import {useStyles as useSomeOtherNameWithStyles} from './something.jss';
+
+const a = useStyles();
+console.log(a.b);
+console.log(a.x);
+
+function x() {
+  const x = useSomeOtherNameWithStyles();
+  return x.foo;
+}
+
+useStyles().x;
+
+const {
+  one,
+  two: twoRenamed,
+  ...rest
+} = useStyles();
+
+let {single} = useStyles();
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-use-styles/options.json b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-use-styles/options.json
new file mode 100644
index 0000000000000..a47282a6be9a9
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-use-styles/options.json
@@ -0,0 +1,3 @@
+{
+  "plugins": ["../../../.."]
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-use-styles/output.mjs b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-use-styles/output.mjs
new file mode 100644
index 0000000000000..0b9f4881be85b
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-use-styles/output.mjs
@@ -0,0 +1,41 @@
+import { $single as _$single } from "../foo.jss";
+import { $two as _$two } from "../foo.jss";
+import { $one as _$one } from "../foo.jss";
+import { $x as _$x2 } from "../foo.jss";
+import { $foo as _$foo } from "./something.jss";
+import { $x as _$x } from "../foo.jss";
+import { $b as _$b } from "../foo.jss";
+
+/**
+ * Copyright 2021 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.
+ */
+import { useStyles } from '../foo.jss';
+import { useStyles as useSomeOtherNameWithStyles } from './something.jss';
+console.log(_$b);
+console.log(_$x);
+
+function x() {
+  return _$foo;
+}
+
+_$x2;
+const {
+  one: _unused,
+  two: _unused2,
+  ...rest
+} = useStyles();
+const twoRenamed = _$two;
+const one = _$one;
+let single = _$single;
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-variable-refs/input.mjs b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-variable-refs/input.mjs
new file mode 100644
index 0000000000000..9dd5b0c9696b3
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-variable-refs/input.mjs
@@ -0,0 +1,24 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {useStyles} from 'foo';
+
+const direct = useStyles();
+direct.memberExpression;
+const {objectPatternProperty} = direct;
+const indirect = direct;
+indirect.memberExpressionIndirect;
+const {objectPatternPropertyIndirect} = indirect;
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-variable-refs/options.json b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-variable-refs/options.json
new file mode 100644
index 0000000000000..a47282a6be9a9
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-variable-refs/options.json
@@ -0,0 +1,3 @@
+{
+  "plugins": ["../../../.."]
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-variable-refs/output.mjs b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-variable-refs/output.mjs
new file mode 100644
index 0000000000000..15ef1e0ed8638
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-replace-variable-refs/output.mjs
@@ -0,0 +1,25 @@
+import { $objectPatternPropertyIndirect as _$objectPatternPropertyIndirect } from "foo";
+import { $memberExpressionIndirect as _$memberExpressionIndirect } from "foo";
+import { $objectPatternProperty as _$objectPatternProperty } from "foo";
+import { $memberExpression as _$memberExpression } from "foo";
+
+/**
+ * Copyright 2021 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.
+ */
+import { useStyles } from 'foo';
+_$memberExpression;
+const objectPatternProperty = _$objectPatternProperty;
+_$memberExpressionIndirect;
+const objectPatternPropertyIndirect = _$objectPatternPropertyIndirect;
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-throw-classname/input.js b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-throw-classname/input.js
new file mode 100644
index 0000000000000..d8fba9fc2a007
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-throw-classname/input.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2020 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.
+ */
+
+// Throws because cant use classname "CSS", as it conflicts with this transform.
+import {createUseStyles} from 'react-jss'; 
+export const useStyles = createUseStyles({CSS: {fontSize: 12}});
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-throw-classname/options.json b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-throw-classname/options.json
new file mode 100644
index 0000000000000..aa03f1ce07794
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-throw-classname/options.json
@@ -0,0 +1,6 @@
+{
+  "plugins": ["../../../.."],
+  "sourceType": "module",
+  "filename": "component.jss.js",
+  "throws": "CSS"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-throw-confidence/input.js b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-throw-confidence/input.js
new file mode 100644
index 0000000000000..411572a0b72cb
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-throw-confidence/input.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2020 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.
+ */
+
+// Throws because object spread is not statically evaluable.
+import {createUseStyles} from 'react-jss';
+const foo = {foo: 7}
+const JSS =  {...foo} 
+export const useStyles = createUseStyles(JSS);
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-throw-confidence/options.json b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-throw-confidence/options.json
new file mode 100644
index 0000000000000..533161d0e18b1
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-throw-confidence/options.json
@@ -0,0 +1,6 @@
+{
+  "plugins": ["../../../.."],
+  "sourceType": "module",
+  "filename": "component.jss.js",
+  "throws": "statically evaluatable"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-jss-var/input.js b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-jss-var/input.js
new file mode 100644
index 0000000000000..22a0e05a09017
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-jss-var/input.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright 2020 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.
+ */ 
+import {createUseStyles} from 'react-jss'
+
+const JSS = {button: {fontSize: 12}};
+
+export const useStyles = createUseStyles(JSS);
\ No newline at end of file
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-jss-var/options.json b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-jss-var/options.json
new file mode 100644
index 0000000000000..0e3c7a1b03985
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-jss-var/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": ["../../../.."],
+  "sourceType": "module",
+  "filename": "component.jss.js"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-jss-var/output.mjs b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-jss-var/output.mjs
new file mode 100644
index 0000000000000..4150a4b53e1d5
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-jss-var/output.mjs
@@ -0,0 +1,28 @@
+/** @enum {string}*/
+var _classes = {
+  button: "button-21aa4a8"
+};
+
+/**
+ * Copyright 2020 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.
+ */
+const JSS = {
+  button: {
+    fontSize: 12
+  }
+};
+export const $button = "button-21aa4a8";
+export const useStyles = () => _classes;
+export const CSS = ".button-21aa4a8{font-size:12px}";
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-literal/input.js b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-literal/input.js
new file mode 100644
index 0000000000000..2c112dcaeb258
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-literal/input.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+export const useStyles = createUseStyles({
+  floatLeft: {float: 'left', border: 'black solid 1px'},
+  fill: {
+    display: 'block',
+    position: 'relative',
+    flex: '1 1 auto',
+  },
+});
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-literal/options.json b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-literal/options.json
new file mode 100644
index 0000000000000..0e3c7a1b03985
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-literal/options.json
@@ -0,0 +1,5 @@
+{
+  "plugins": ["../../../.."],
+  "sourceType": "module",
+  "filename": "component.jss.js"
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-literal/output.mjs b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-literal/output.mjs
new file mode 100644
index 0000000000000..9cec9b482330e
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/fixtures/transform-assertions/should-transform-literal/output.mjs
@@ -0,0 +1,25 @@
+/** @enum {string}*/
+var _classes = {
+  floatLeft: "float-left-a6c6677",
+  fill: "fill-a6c6677"
+};
+export const $floatLeft = "float-left-a6c6677";
+export const $fill = "fill-a6c6677";
+
+/**
+ * Copyright 2020 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.
+ */
+export const useStyles = () => _classes;
+export const CSS = ".float-left-a6c6677{float:left;border:1px solid #000}.fill-a6c6677{-ms-flex:1 1 auto;flex:1 1 auto;display:block;position:relative}";
diff --git a/build-system/babel-plugins/babel-plugin-transform-jss/test/index.js b/build-system/babel-plugins/babel-plugin-transform-jss/test/index.js
new file mode 100644
index 0000000000000..fd57322cb9d11
--- /dev/null
+++ b/build-system/babel-plugins/babel-plugin-transform-jss/test/index.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright 2020 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.
+ */
+
+const babel = require('@babel/core');
+const path = require('path');
+const runner = require('@babel/helper-plugin-test-runner').default;
+
+runner(__dirname);
+
+const fileContents = `
+import {createUseStyles} from 'react-jss';
+export const useStyles = createUseStyles({button: {fontSize: 12}});`;
+
+const plugins = [path.join(__dirname, '..')];
+const caller = {name: 'babel-jest'};
+
+// eslint-disable-next-line no-undef
+test('transforming the same file contents twice should throw if there is a hash collision with filename', () => {
+  let filename;
+  expect(() => {
+    stubCreateHash(() => {
+      filename = 'test1.jss.js';
+      babel.transformSync(fileContents, {filename, plugins, caller});
+      filename = 'test2.jss.js';
+      babel.transformSync(fileContents, {filename, plugins, caller});
+    });
+  }).toThrow(/Classnames must be unique across all files/);
+});
+
+// eslint-disable-next-line no-undef
+test('transforming same exact file twice is fine (e.g. watch mode)', () => {
+  const filename = 'test.jss.js';
+  babel.transformSync(fileContents, {filename, plugins, caller});
+  babel.transformSync(fileContents, {filename, plugins, caller});
+});
+
+/**
+ * A stubs create-hash then calls the provided function.
+ * @param {Function} fn
+ */
+function stubCreateHash(fn) {
+  const hash = require('../create-hash');
+  const originalCreateHash = hash.createHash;
+  hash.createHash = () => 'abcedf';
+
+  try {
+    fn();
+    hash.createHash = originalCreateHash;
+  } catch (err) {
+    hash.createHash = originalCreateHash;
+    throw err;
+  }
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-promise-resolve/index.js b/build-system/babel-plugins/babel-plugin-transform-promise-resolve/index.js
index 33cb6696af3d1..74ebec6f6f0dc 100644
--- a/build-system/babel-plugins/babel-plugin-transform-promise-resolve/index.js
+++ b/build-system/babel-plugins/babel-plugin-transform-promise-resolve/index.js
@@ -14,13 +14,24 @@
  * limitations under the License.
  */
 
-const filepath = require('path');
+const pathmodule = require('path');
 const {addNamed} = require('@babel/helper-module-imports');
 
+/**
+ * @param {*} babel
+ * @param {{
+ *  importFrom?: string,
+ * }=} options
+ * @return {{
+ *   visitor: {
+ *     CallExpression: {Funcion(path: string): void}
+ *  }
+ * }}
+ */
 module.exports = function (babel, options = {}) {
   const {types: t} = babel;
   const promiseResolveMatcher = t.buildMatchMemberExpression('Promise.resolve');
-  const {importFrom = 'src/resolved-promise'} = options;
+  const {importFrom = 'src/core/data-structures/promise'} = options;
 
   return {
     visitor: {
@@ -41,7 +52,10 @@ module.exports = function (babel, options = {}) {
         // Relative will return "foo" instead of "./foo". And if it returned
         // a "../foo", making it "./../foo" doesn't hurt.
         const source =
-          './' + filepath.relative(filepath.dirname(filename), importFrom);
+          './' +
+          toPosix(
+            pathmodule.relative(pathmodule.dirname(filename), importFrom)
+          );
         const resolvedPromise = addNamed(path, 'resolvedPromise', source, {
           importedType: 'es6',
         });
@@ -50,3 +64,13 @@ module.exports = function (babel, options = {}) {
     },
   };
 };
+
+/**
+ * Even though we are using the path module, JS Modules should never have
+ * their paths specified in Windows format.
+ * @param {string} path
+ * @return {string}
+ */
+function toPosix(path) {
+  return path.replace(/\\\\?/g, '/');
+}
diff --git a/build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/promise-resolve/output.mjs b/build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/promise-resolve/output.mjs
index f2d643e7faa07..da2bcedd962bd 100644
--- a/build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/promise-resolve/output.mjs
+++ b/build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/promise-resolve/output.mjs
@@ -1,5 +1,5 @@
-import { resolvedPromise as _resolvedPromise2 } from "./../../../../../../../src/resolved-promise";
-import { resolvedPromise as _resolvedPromise } from "./../../../../../../../src/resolved-promise";
+import { resolvedPromise as _resolvedPromise2 } from "./../../../../../../../src/core/data-structures/promise";
+import { resolvedPromise as _resolvedPromise } from "./../../../../../../../src/core/data-structures/promise";
 
 /**
  * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
diff --git a/build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/relative-importing/options.json b/build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/relative-importing/options.json
index 2f34c4868080b..e1f5d9897e8ea 100644
--- a/build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/relative-importing/options.json
+++ b/build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/relative-importing/options.json
@@ -3,7 +3,7 @@
     [
       "../../../..",
       {
-        "importFrom": "build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/relative-importing/resolve-promise"
+        "importFrom": "build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/relative-importing/core/data-structures/promise"
       }
     ]
   ],
diff --git a/build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/relative-importing/output.mjs b/build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/relative-importing/output.mjs
index b05f8978a0f7a..bf6f5a36fac43 100644
--- a/build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/relative-importing/output.mjs
+++ b/build-system/babel-plugins/babel-plugin-transform-promise-resolve/test/fixtures/transform/relative-importing/output.mjs
@@ -1,5 +1,5 @@
-import { resolvedPromise as _resolvedPromise2 } from "./resolve-promise";
-import { resolvedPromise as _resolvedPromise } from "./resolve-promise";
+import { resolvedPromise as _resolvedPromise2 } from "./core/data-structures/promise";
+import { resolvedPromise as _resolvedPromise } from "./core/data-structures/promise";
 
 /**
  * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
diff --git a/build-system/babel-plugins/babel-plugin-transform-prune-namespace/index.js b/build-system/babel-plugins/babel-plugin-transform-prune-namespace/index.js
index 09898d5390a62..b5035671f69fd 100644
--- a/build-system/babel-plugins/babel-plugin-transform-prune-namespace/index.js
+++ b/build-system/babel-plugins/babel-plugin-transform-prune-namespace/index.js
@@ -38,6 +38,10 @@ module.exports = function () {
     },
   };
 
+  /**
+   * @param {BabelPath} path
+   * @return {BabelPath|void}
+   */
   function deepestMember(path) {
     while (true) {
       const object = path.get('object');
@@ -48,12 +52,26 @@ module.exports = function () {
     }
   }
 
+  /**
+   *
+   * @param {BabelPath} path
+   * @param {T} namespaceMember
+   * @param {T} state
+   * @return {void}
+   */
   function memberInAssignmentExpression(path, namespaceMember, state) {
     const {name} = namespaceMember.node.property;
     state.declaredNames.set(name, path.parentPath);
   }
 
-  function memberExpression(path, namespaceMember, state) {
+  /**
+   *
+   * @param {BabelPath} _path
+   * @param {T} namespaceMember
+   * @param {T} state
+   * @return {void}
+   */
+  function memberExpression(_path, namespaceMember, state) {
     const {name} = namespaceMember.node.property;
     state.usedNames.add(name);
   }
diff --git a/build-system/babel-plugins/babel-plugin-transform-stringish-literals/index.js b/build-system/babel-plugins/babel-plugin-transform-stringish-literals/index.js
index 8845b9e557372..8118538dd0b09 100644
--- a/build-system/babel-plugins/babel-plugin-transform-stringish-literals/index.js
+++ b/build-system/babel-plugins/babel-plugin-transform-stringish-literals/index.js
@@ -20,6 +20,11 @@ module.exports = function ({types: t}) {
   const cloneNodes = (nodes) => nodes.map((node) => t.cloneNode(node));
   const escapeValue = (value) => String(value).replace(ESCAPE_REGEX, '\\$&');
 
+  /**
+   * @param {CompilerNode} clonedQuasis
+   * @param {number} index
+   * @return {number|undefined}
+   */
   function whichCloneQuasi(clonedQuasis, index) {
     for (let i = index; i >= 0; i--) {
       const quasi = clonedQuasis[i];
@@ -29,6 +34,10 @@ module.exports = function ({types: t}) {
     }
   }
 
+  /**
+   * @param {CompilerNode} leftPath
+   * @param {CompilerNode} rightPath
+   */
   function joinTemplateLiterals(leftPath, rightPath) {
     const {node: leftNode} = leftPath;
     const {node: rightNode} = rightPath;
@@ -47,6 +56,9 @@ module.exports = function ({types: t}) {
     rightPath.remove();
   }
 
+  /**
+   * @param {BabelPath} path
+   */
   function joinMaybeTemplateLiteral(path) {
     const left = path.get('left');
     const right = path.get('right');
@@ -95,6 +107,9 @@ module.exports = function ({types: t}) {
         },
       },
 
+      /**
+       * @param {BabelPath} path
+       */
       TemplateLiteral(path) {
         // Convert any items inside a template literal that are static literals.
         // `foo{'123'}bar` => `foo123bar`
diff --git a/build-system/babel-plugins/babel-plugin-transform-stringish-literals/test/fixtures/transform/binary-expression/input.js b/build-system/babel-plugins/babel-plugin-transform-stringish-literals/test/fixtures/transform/binary-expression/input.js
index 55a33d53bb7fb..503c3c85be06a 100644
--- a/build-system/babel-plugins/babel-plugin-transform-stringish-literals/test/fixtures/transform/binary-expression/input.js
+++ b/build-system/babel-plugins/babel-plugin-transform-stringish-literals/test/fixtures/transform/binary-expression/input.js
@@ -24,12 +24,12 @@ let numberStart = 1 + `/foo`;
 let stringStart = '1' + `/foo`;
 let numberEnd = `foo/` + 1;
 let stringEnd = `foo/` + '1';
-let illegalCharacterString = `Invalid share providers configuration for in bookend. ` + 'Value must be `true` or a params object.';
+let illegalCharacterString = `Invalid share providers configuration for story. ` + 'Value must be `true` or a params object.';
 let illegalCharacterTemplate = `Invalid ${x}` + 'Value must be `true` or a params object.';
 let illegalEscapeValue = `Invalid ${x}` + '${foo}';
 
 inverted: {
-  let illegalCharacterString = 'Value must be `true` or a params object. ' + `Invalid share providers configuration for in bookend.`;
+  let illegalCharacterString = 'Value must be `true` or a params object. ' + `Invalid share providers configuration for story.`;
   let illegalCharacterTemplate = 'Value must be `true` or a params object. ' + `Invalid ${x}`;
   let illegalEscapeValue = '${foo}' + `Invalid ${x}`;
 }
diff --git a/build-system/babel-plugins/babel-plugin-transform-stringish-literals/test/fixtures/transform/binary-expression/output.js b/build-system/babel-plugins/babel-plugin-transform-stringish-literals/test/fixtures/transform/binary-expression/output.js
index 4b6cc52338e78..6e03c014dcdb0 100644
--- a/build-system/babel-plugins/babel-plugin-transform-stringish-literals/test/fixtures/transform/binary-expression/output.js
+++ b/build-system/babel-plugins/babel-plugin-transform-stringish-literals/test/fixtures/transform/binary-expression/output.js
@@ -22,12 +22,12 @@ let numberStart = "1/foo";
 let stringStart = "1/foo";
 let numberEnd = "foo/1";
 let stringEnd = "foo/1";
-let illegalCharacterString = "Invalid share providers configuration for in bookend. Value must be `true` or a params object.";
+let illegalCharacterString = "Invalid share providers configuration for story. Value must be `true` or a params object.";
 let illegalCharacterTemplate = `Invalid ${x}Value must be \`true\` or a params object.`;
 let illegalEscapeValue = `Invalid ${x}\${foo}`;
 
 inverted: {
-  let illegalCharacterString = "Value must be `true` or a params object. Invalid share providers configuration for in bookend.";
+  let illegalCharacterString = "Value must be `true` or a params object. Invalid share providers configuration for story.";
   let illegalCharacterTemplate = `Value must be \`true\` or a params object. Invalid ${x}`;
   let illegalEscapeValue = `\${foo}Invalid ${x}`;
 }
diff --git a/build-system/common/OWNERS b/build-system/common/OWNERS
index 32c5ea6d75438..002922bb9cc93 100644
--- a/build-system/common/OWNERS
+++ b/build-system/common/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-infra'}],
+      owners: [{name: 'ampproject/wg-infra'}, {name: 'rsimha', notify: true}],
     },
   ],
 }
diff --git a/build-system/common/check-package-manager.js b/build-system/common/check-package-manager.js
index 25b8ea4883dbc..7f8bc629a279d 100644
--- a/build-system/common/check-package-manager.js
+++ b/build-system/common/check-package-manager.js
@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 /**
  * Copyright 2017 The AMP HTML Authors. All Rights Reserved.
  *
@@ -15,92 +16,104 @@
  */
 'use strict';
 
+/**
+ * @fileoverview Perform checks on the AMP toolchain.
+ */
+
 /*
  * NOTE: DO NOT use non-native node modules in this file.
  *       This file runs before installing any packages,
  *       so it must work with vanilla NodeJS code.
  * github.com/ampproject/amphtml/pull/19386
  */
-const fs = require('fs');
 const https = require('https');
-const {getStdout, getStderr} = require('./exec');
+const {getStdout} = require('./process');
 
 const setupInstructionsUrl =
-  'https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-quick.md#one-time-setup';
+  'https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md#one-time-setup';
 const nodeDistributionsUrl = 'https://nodejs.org/dist/index.json';
-const gulpHelpUrl =
-  'https://medium.com/gulpjs/gulp-sips-command-line-interface-e53411d4467';
-
-const yarnExecutable = 'npx yarn';
-const gulpExecutable = 'npx gulp';
-const pythonExecutable = 'python';
-
-const wrongGulpPaths = [
-  '/bin/',
-  '/sbin/',
-  '/usr/bin/',
-  '/usr/sbin/',
-  '/usr/local/bin/',
-  '/usr/local/sbin/',
-];
 
 const warningDelaySecs = 10;
 
 const updatesNeeded = new Set();
 
+const npmInfoMessage = `${red(
+  '*** The AMP project now uses npm for package management ***'
+)}
+For more info, see ${cyan('http://go.amp.dev/issue/30518')}.
+
+${yellow('To install all packages:')}
+${cyan('$')} npm install
+
+${yellow('To install a new (runtime) package to "dependencies":')}
+${cyan('$')} npm install [package_name@version]
+
+${yellow('To install a new (toolset) package to "devDependencies":')}
+${cyan('$')} npm install --save-dev [package_name@version]
+
+${yellow('To update a package:')}
+${cyan('$')} npm update [package_name@version]
+
+${yellow('To uninstall a package:')}
+${cyan('$')} npm uninstall [package_name]
+
+${yellow('For detailed instructions, see')} ${cyan(setupInstructionsUrl)}`;
+
 // Color formatting libraries may not be available when this script is run.
+/**
+ * Formats the text to appear red
+ *
+ * @param {string} text
+ * @return {string}
+ */
 function red(text) {
   return '\x1b[31m' + text + '\x1b[0m';
 }
+/**
+ * Formats the text to appear cyan
+ *
+ * @param {string} text
+ * @return {string}
+ */
 function cyan(text) {
   return '\x1b[36m' + text + '\x1b[0m';
 }
+/**
+ * Formats the text to appear green
+ *
+ * @param {string} text
+ * @return {string}
+ */
 function green(text) {
   return '\x1b[32m' + text + '\x1b[0m';
 }
+/**
+ * Formats the text to appear yellow
+ *
+ * @param {string} text
+ * @return {string}
+ */
 function yellow(text) {
   return '\x1b[33m' + text + '\x1b[0m';
 }
 
 /**
- * @fileoverview Perform checks on the AMP toolchain.
- */
-
-// If npm is being run, print a message and cause 'npm install' to fail.
-function ensureYarn() {
-  if (process.env.npm_execpath.indexOf('yarn') === -1) {
-    console.log(
-      red('*** The AMP project uses yarn for package management ***'),
-      '\n'
-    );
-    console.log(yellow('To install all packages:'));
-    console.log(cyan('$'), 'yarn', '\n');
-    console.log(
-      yellow('To install a new (runtime) package to "dependencies":')
-    );
-    console.log(cyan('$'), 'yarn add --exact [package_name@version]', '\n');
-    console.log(
-      yellow('To install a new (toolset) package to "devDependencies":')
-    );
-    console.log(
-      cyan('$'),
-      'yarn add --dev --exact [package_name@version]',
-      '\n'
-    );
-    console.log(yellow('To upgrade a package:'));
-    console.log(cyan('$'), 'yarn upgrade --exact [package_name@version]', '\n');
-    console.log(yellow('To remove a package:'));
-    console.log(cyan('$'), 'yarn remove [package_name]', '\n');
-    console.log(
-      yellow('For detailed instructions, see'),
-      cyan(setupInstructionsUrl),
-      '\n'
-    );
+ * If yarn is being run, print a message and cause 'yarn install' to fail.
+ * See https://github.com/yarnpkg/yarn/issues/5063 for details on how the
+ * package manager being used is determined.
+ **/
+function ensureNpm() {
+  if (!process.env.npm_execpath.includes('npm')) {
+    console.log(npmInfoMessage);
     process.exit(1);
   }
 }
 
-// Check the node version and print a warning if it is not the latest LTS.
+/**
+ * Check the node version and print a warning if it is not the latest LTS.
+ *
+ * @return {Promise}
+ **/
 function checkNodeVersion() {
   const nodeVersion = getStdout('node --version').trim();
   return new Promise((resolve) => {
@@ -165,6 +178,12 @@ function checkNodeVersion() {
   });
 }
 
+/**
+ * Extracts the latest node version from a JSON object containing version info
+ *
+ * @param {!Object} distributionsJson
+ * @return {string}
+ */
 function getNodeLatestLtsVersion(distributionsJson) {
   if (distributionsJson) {
     // Versions are in descending order, so the first match is the latest lts.
@@ -180,147 +199,32 @@ function getNodeLatestLtsVersion(distributionsJson) {
   }
 }
 
-// If yarn is being run, perform a version check and proceed with the install.
-function checkYarnVersion() {
-  const yarnVersion = getStdout(yarnExecutable + ' --version').trim();
-  const yarnInfo = getStdout(yarnExecutable + ' info --json yarn').trim();
-  const yarnInfoJson = JSON.parse(yarnInfo.split('\n')[0]); // First line
-  const stableVersion = getYarnStableVersion(yarnInfoJson);
-  if (stableVersion === '') {
-    console.log(
-      yellow(
-        'WARNING: Something went wrong. ' +
-          'Could not determine the stable version of yarn.'
-      )
-    );
-  } else if (yarnVersion !== stableVersion) {
-    console.log(
-      yellow('WARNING: Detected yarn version'),
-      cyan(yarnVersion) + yellow('. Recommended (stable) version is'),
-      cyan(stableVersion) + yellow('.')
-    );
-    console.log(
-      yellow('⤷ To fix this, run'),
-      cyan('"curl -o- -L https://yarnpkg.com/install.sh | bash"'),
-      yellow('or see'),
-      cyan('https://yarnpkg.com/docs/install'),
-      yellow('for instructions.')
-    );
-    updatesNeeded.add('yarn');
-  } else {
-    console.log(
-      green('Detected'),
-      cyan('yarn'),
-      green('version'),
-      cyan(yarnVersion + ' (stable)') + green('. Installing packages...')
-    );
-  }
-}
-
-function getYarnStableVersion(infoJson) {
-  if (
-    infoJson &&
-    infoJson.hasOwnProperty('data') &&
-    infoJson.data.hasOwnProperty('version')
-  ) {
-    return infoJson.data.version;
-  } else {
-    return '';
-  }
-}
-
-function getParentShellPath() {
-  const nodePath = process.env.PATH;
-  const pathSeparator = process.platform == 'win32' ? ';' : ':';
-  // nodejs adds a few extra variables to $PATH, ending with '../../bin/node-gyp-bin'.
-  // See https://github.com/nodejs/node-convergence-archive/blob/master/deps/npm/lib/utils/lifecycle.js#L81-L85
-  return nodePath.split(`node-gyp-bin${pathSeparator}`).pop();
-}
-
-function runGulpChecks() {
-  const firstInstall = !fs.existsSync('node_modules');
-  const globalPackages = getStdout(yarnExecutable + ' global list').trim();
-  const globalGulp = globalPackages.match(/"gulp@.*" has binaries/);
-  const defaultGulpPath = getStdout('which gulp', {
-    'env': {'PATH': getParentShellPath()},
-  }).trim();
-  const wrongGulp = wrongGulpPaths.some((path) =>
-    defaultGulpPath.startsWith(path)
+/**
+ * If npm is being run, log its version and proceed with the install.
+ */
+function logNpmVersion() {
+  const npmVersion = getStdout('npm --version').trim();
+  console.log(
+    green('Detected'),
+    cyan('npm'),
+    green('version'),
+    cyan(npmVersion) + green('. Installing packages...')
   );
-  if (globalGulp) {
-    console.log(
-      yellow('WARNING: Detected a global install of'),
-      cyan('gulp') + yellow('. It is recommended that you use'),
-      cyan('gulp-cli'),
-      yellow('instead.')
-    );
-    console.log(
-      yellow('⤷ To fix this, run'),
-      cyan('"yarn global remove gulp"'),
-      yellow('followed by'),
-      cyan('"yarn global add gulp-cli"') + yellow('.')
-    );
-    console.log(
-      yellow('⤷ See'),
-      cyan(gulpHelpUrl),
-      yellow('for more information.')
-    );
-    updatesNeeded.add('gulp');
-  }
-  if (wrongGulp) {
-    console.log(
-      yellow('WARNING: Found'),
-      cyan('gulp'),
-      yellow('in an unexpected location:'),
-      cyan(defaultGulpPath) + yellow('.')
-    );
-    console.log(
-      yellow('⤷ To fix this, consider removing'),
-      cyan(defaultGulpPath),
-      yellow('from your default'),
-      cyan('$PATH') + yellow(', or deleting it.')
-    );
-    console.log(
-      yellow('⤷ Run'),
-      cyan('"which gulp"'),
-      yellow('for more information.')
-    );
-    updatesNeeded.add('gulp');
-  }
-  if (!firstInstall) {
-    const gulpVersions = getStdout(gulpExecutable + ' --version').trim();
-    const gulpVersion = gulpVersions.match(/Local version[:]? (.*?)$/);
-    if (gulpVersion && gulpVersion.length == 2) {
-      console.log(
-        green('Detected'),
-        cyan('gulp'),
-        green('version'),
-        cyan(gulpVersion[1]) + green('.')
-      );
-    } else {
-      console.log(
-        yellow(
-          'WARNING: ' +
-            'Could not determine the local version of gulp. ' +
-            '(This is normal during install / upgrade.)'
-        )
-      );
-    }
-  }
 }
 
+/**
+ * Checks if the local version of python is 2.7 or 3
+ */
 function checkPythonVersion() {
   // Python 2.7 is EOL but still supported
-  // Python 3.5+ are still supported (TODO: deprecate 3.5 on 2020-09-13)
+  // Python 3.6+ are still supported
   // https://devguide.python.org/#status-of-python-branches
-  const recommendedVersion = '2.7 or 3.5+';
-  const recommendedVersionRegex = /^2\.7|^3\.[5-9]/;
+  const recommendedVersion = '2.7 or 3.6+';
+  const recommendedVersionRegex = /^2\.7|^3\.(?:[6-9]|1\d)/;
 
   // Python2 prints its version to stderr (fixed in Python 3.4)
   // See: https://bugs.python.org/issue18338
-  const pythonVersionResult =
-    getStderr(`${pythonExecutable} --version`).trim() ||
-    getStdout(`${pythonExecutable} --version`).trim();
+  const pythonVersionResult = getStdout('python --version 2>&1').trim();
   const pythonVersion = pythonVersionResult.match(/Python (.*?)$/);
   if (pythonVersion && pythonVersion.length == 2) {
     const versionNumber = pythonVersion[1];
@@ -349,7 +253,7 @@ function checkPythonVersion() {
     );
     console.log(
       yellow('⤷ To fix this, make sure'),
-      cyan(pythonExecutable),
+      cyan('python'),
       yellow('is in your'),
       cyan('PATH'),
       yellow('and is version'),
@@ -358,42 +262,40 @@ function checkPythonVersion() {
   }
 }
 
-function main() {
-  // Yarn is already used by default on Travis, so there is nothing more to do.
-  if (process.env.TRAVIS) {
-    return 0;
+/**
+ * Runs checks for the package manager and tooling being used.
+ * @return {Promise}
+ */
+async function main() {
+  ensureNpm();
+  await checkNodeVersion();
+  checkPythonVersion();
+  logNpmVersion();
+  if (updatesNeeded.size) {
+    console.log(
+      yellow('\nWARNING: Detected problems with'),
+      cyan(Array.from(updatesNeeded).join(', '))
+    );
+    console.log(
+      yellow('⤷ Continuing install in'),
+      cyan(warningDelaySecs),
+      yellow('seconds...')
+    );
+    console.log(
+      yellow('⤷ Press'),
+      cyan('Ctrl + C'),
+      yellow('to abort and fix...')
+    );
+    let resolver;
+    const deferred = new Promise((resolverIn) => {
+      resolver = resolverIn;
+    });
+    setTimeout(() => {
+      console.log(yellow('\nAttempting to install packages...'));
+      resolver();
+    }, warningDelaySecs * 1000);
+    return deferred;
   }
-  ensureYarn();
-  return checkNodeVersion().then(() => {
-    runGulpChecks();
-    checkPythonVersion();
-    checkYarnVersion();
-    if (!process.env.TRAVIS && updatesNeeded.size > 0) {
-      console.log(
-        yellow('\nWARNING: Detected problems with'),
-        cyan(Array.from(updatesNeeded).join(', '))
-      );
-      console.log(
-        yellow('⤷ Continuing install in'),
-        cyan(warningDelaySecs),
-        yellow('seconds...')
-      );
-      console.log(
-        yellow('⤷ Press'),
-        cyan('Ctrl + C'),
-        yellow('to abort and fix...')
-      );
-      let resolver;
-      const deferred = new Promise((resolverIn) => {
-        resolver = resolverIn;
-      });
-      setTimeout(() => {
-        console.log(yellow('\nAttempting to install packages...'));
-        resolver();
-      }, warningDelaySecs * 1000);
-      return deferred;
-    }
-  });
 }
 
 main();
diff --git a/build-system/common/ci.js b/build-system/common/ci.js
new file mode 100644
index 0000000000000..c28b840802996
--- /dev/null
+++ b/build-system/common/ci.js
@@ -0,0 +1,253 @@
+/**
+ * Copyright 2020 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';
+
+/**
+ * @fileoverview Provides various kinds of CI state.
+ *
+ * References:
+ * GitHub Actions: https://docs.github.com/en/free-pro-team@latest/actions/reference/environment-variables#default-environment-variables
+ * CircleCI: https://circleci.com/docs/2.0/env-vars/#built-in-environment-variables
+ */
+
+/**
+ * Shorthand to extract an environment variable.
+ * @param {string} key
+ * @return {string}
+ */
+function env(key) {
+  return process.env[key] ?? '';
+}
+
+/**
+ * Returns true if this is a CI build.
+ * @return {boolean}
+ */
+function isCiBuild() {
+  return !!env('CI');
+}
+
+/**
+ * Returns true if this is a GitHub Actions build.
+ * @return {boolean}
+ */
+function isGithubActionsBuild() {
+  return !!env('GITHUB_ACTIONS');
+}
+
+/**
+ * Returns true if this is a CircleCI build.
+ * @return {boolean}
+ */
+function isCircleciBuild() {
+  return !!env('CIRCLECI');
+}
+
+/**
+ * Constants for reduced code size.
+ */
+const isGithubActions = isGithubActionsBuild();
+const isCircleci = isCircleciBuild();
+
+/**
+ * Used to filter CircleCI PR branches created directly on the amphtml repo
+ * (e.g.) PRs created from the GitHub web UI. Must match `push_builds_only`
+ * in .circleci/config.yml.
+ * @param {string} branchName
+ * @return {boolean}
+ */
+function isCircleciPushBranch(branchName) {
+  return branchName == 'main' || /^amp-release-.*$/.test(branchName);
+}
+
+/**
+ * Returns true if this is a PR build.
+ * @return {boolean}
+ */
+function isPullRequestBuild() {
+  return isGithubActions
+    ? env('GITHUB_EVENT_NAME') === 'pull_request'
+    : isCircleci
+    ? !isCircleciPushBranch(env('CIRCLE_BRANCH'))
+    : false;
+}
+
+/**
+ * Returns true if this is a push build.
+ * @return {boolean}
+ */
+function isPushBuild() {
+  return isGithubActions
+    ? env('GITHUB_EVENT_NAME') === 'push'
+    : isCircleci
+    ? isCircleciPushBranch(env('CIRCLE_BRANCH'))
+    : false;
+}
+
+/**
+ * Returns the name of the PR branch.
+ * @return {string}
+ */
+function ciPullRequestBranch() {
+  return isGithubActions
+    ? env('GITHUB_HEAD_REF')
+    : isCircleci
+    ? env('CIRCLE_BRANCH')
+    : '';
+}
+
+/**
+ * Returns the commit SHA being tested by a PR build.
+ * @return {string}
+ */
+function ciPullRequestSha() {
+  return isGithubActions
+    ? require(env('GITHUB_EVENT_PATH')).pull_request.head.sha
+    : isCircleci
+    ? env('CIRCLE_SHA1')
+    : '';
+}
+
+/**
+ * Returns the branch for push builds.
+ * @return {string}
+ */
+function ciPushBranch() {
+  return isGithubActions
+    ? env('GITHUB_REF')
+    : isCircleci
+    ? env('CIRCLE_BRANCH')
+    : '';
+}
+
+/**
+ * Returns the commit SHA being tested by a push build.
+ * @return {string}
+ */
+function ciCommitSha() {
+  return isGithubActions
+    ? env('GITHUB_SHA')
+    : isCircleci
+    ? env('CIRCLE_SHA1')
+    : '';
+}
+
+/**
+ * Returns the ID of the current build.
+ * @return {string}
+ */
+function ciBuildId() {
+  return isGithubActions
+    ? env('GITHUB_RUN_ID')
+    : isCircleci
+    ? env('CIRCLE_WORKFLOW_ID')
+    : '';
+}
+
+/**
+ * Returns the URL of the current build.
+ * @return {string}
+ */
+function ciBuildUrl() {
+  return isGithubActions
+    ? `${env('GITHUB_SERVER_URL')}/${env('GITHUB_REPOSITORY')}/actions/runs/${env('GITHUB_RUN_ID')}` // prettier-ignore
+    : isCircleci
+    ? `https://app.circleci.com/pipelines/workflows/${env('CIRCLE_WORKFLOW_ID')}` // prettier-ignore
+    : '';
+}
+
+/**
+ * Returns the ID of the current job.
+ * @return {string}
+ */
+function ciJobId() {
+  return isGithubActions
+    ? env('GITHUB_RUN_NUMBER')
+    : isCircleci
+    ? env('CIRCLE_JOB')
+    : '';
+}
+
+/**
+ * Returns the URL of the current job.
+ * @return {string}
+ */
+function ciJobUrl() {
+  return isGithubActions
+    ? // TODO(rsimha): Try to reverse engineer the GH Actions job URL from the build URL.
+      `${env('GITHUB_SERVER_URL')}/${env('GITHUB_REPOSITORY')}/actions/runs/${env('GITHUB_RUN_ID')}` // prettier-ignore
+    : isCircleci
+    ? env('CIRCLE_BUILD_URL')
+    : '';
+}
+
+/**
+ * Returns the merge commit for a CircleCI PR build. CIRCLECI_MERGE_COMMIT is
+ * populated by .circleci/fetch_merge_commit.sh.
+ * @return {string}
+ */
+function circleciPrMergeCommit() {
+  return isCircleci ? env('CIRCLECI_MERGE_COMMIT') : '';
+}
+
+/**
+ * Returns an identifier that is unique to each CircleCI job. This is different
+ * from the workflow ID, which is common across all jobs in a workflow.
+ * @return {string}
+ */
+function circleciBuildNumber() {
+  return isCircleci ? env('CIRCLE_BUILD_NUM') : '';
+}
+
+/**
+ * Returns the repo slug for the ongoing build.
+ * @return {string}
+ */
+function ciRepoSlug() {
+  return isGithubActions
+    ? env('GITHUB_REPOSITORY')
+    : isCircleci
+    ? `${env('CIRCLE_PROJECT_USERNAME')}/${env('CIRCLE_PROJECT_REPONAME')}`
+    : '';
+}
+
+/**
+ * Returns the commit SHA being tested by a push or PR build.
+ * @return {string}
+ */
+function ciBuildSha() {
+  return isPullRequestBuild() ? ciPullRequestSha() : ciCommitSha();
+}
+
+module.exports = {
+  ciBuildId,
+  ciBuildSha,
+  ciBuildUrl,
+  ciCommitSha,
+  ciJobId,
+  ciJobUrl,
+  ciPullRequestBranch,
+  ciPullRequestSha,
+  ciPushBranch,
+  circleciBuildNumber,
+  circleciPrMergeCommit,
+  ciRepoSlug,
+  isCiBuild,
+  isCircleciBuild,
+  isGithubActionsBuild,
+  isPullRequestBuild,
+  isPushBuild,
+};
diff --git a/build-system/common/colors.js b/build-system/common/colors.js
new file mode 100644
index 0000000000000..b437edff8187f
--- /dev/null
+++ b/build-system/common/colors.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright 2021 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.
+ */
+const colors = require('kleur/colors');
+
+/**
+ * @fileoverview kleur/color provides a collection of untyped color formatting
+ * functions. This file provides a generically typed wrapper for each of them in
+ * order to satisfy our type checks without changing any functionality. For more
+ * info, see https://github.com/lukeed/kleur/blob/master/colors.{mjs,d.ts}.
+ */
+module.exports = Object.entries(colors).reduce((map, [key, formatter]) => {
+  map[key] =
+    typeof formatter == 'function'
+      ? (txt) => /** @type {function} */ (formatter)(txt)
+      : formatter;
+  return map;
+}, /** @type {Record<keyof typeof colors, (input?: *) => string>} */ ({}));
diff --git a/build-system/common/ctrlcHandler.js b/build-system/common/ctrlcHandler.js
index 2129f8e9a1c22..28e526c1313dd 100644
--- a/build-system/common/ctrlcHandler.js
+++ b/build-system/common/ctrlcHandler.js
@@ -14,32 +14,29 @@
  * limitations under the License.
  */
 
-const colors = require('ansi-colors');
-const log = require('fancy-log');
-const {execScriptAsync, exec} = require('./exec');
-const {isTravisBuild} = require('./travis');
+const colors = require('./colors');
+const {exec, execScriptAsync} = require('./exec');
+const {logLocalDev} = require('./logging');
 
-const {green, cyan} = colors;
+const {cyan, green} = colors;
 
 const killCmd = process.platform == 'win32' ? 'taskkill /f /pid' : 'kill -KILL';
 const killSuffix = process.platform == 'win32' ? '>NUL' : '';
 
 /**
  * Creates an async child process that handles Ctrl + C and immediately cancels
- * the ongoing `gulp` task.
+ * the ongoing `amp` task.
  *
  * @param {string} command
  * @return {number}
  */
 exports.createCtrlcHandler = function (command) {
-  if (!isTravisBuild()) {
-    log(
-      green('Running'),
-      cyan(command) + green('. Press'),
-      cyan('Ctrl + C'),
-      green('to cancel...')
-    );
-  }
+  logLocalDev(
+    green('Running'),
+    cyan(command) + green('. Press'),
+    cyan('Ctrl + C'),
+    green('to cancel...')
+  );
   const killMessage =
     green('\nDetected ') +
     cyan('Ctrl + C') +
@@ -64,7 +61,7 @@ exports.createCtrlcHandler = function (command) {
 /**
  * Exits the Ctrl C handler process.
  *
- * @param {string} handlerProcess
+ * @param {string|number} handlerProcess
  */
 exports.exitCtrlcHandler = function (handlerProcess) {
   const exitCmd = killCmd + ' ' + handlerProcess + ' ' + killSuffix;
diff --git a/build-system/common/default-pre-push b/build-system/common/default-pre-push
index 9d022c31ea8c0..25d45a48693fe 100755
--- a/build-system/common/default-pre-push
+++ b/build-system/common/default-pre-push
@@ -18,30 +18,30 @@
 #     "./build-system/common/enable-git-pre-push.sh"
 #
 # Note: The checks in this file must not take more than a few seconds to run.
-# Time consuming checks that call gulp build, or run all the tests are
+# Time consuming checks that call amp build, or run all the tests are
 # forbidden. If you'd like to add something like that to your pre-push, do so
 # by directly editing .git/hooks/pre-push instead of editing this default hook.
 
 GREEN() { echo -e "\033[0;32m$1\033[0m"; }
 CYAN() { echo -e "\033[0;36m$1\033[0m"; }
 
-GULP_LINT_LOCAL="gulp lint --local_changes"
-GULP_PRETTIFY_LOCAL="gulp prettify --local_changes"
-GULP_UNIT_LOCAL="gulp unit --local_changes --headless"
+AMP_LINT_LOCAL="amp lint --local_changes"
+AMP_PRETTIFY_LOCAL="amp prettify --local_changes"
+AMP_UNIT_LOCAL="amp unit --local_changes --headless"
 
 echo $(GREEN "Running") $(CYAN "pre-push") $(GREEN "hooks. (Run") $(CYAN "git push --no-verify") $(GREEN "to skip them.)")
 echo -e "\n"
 
-echo $(GREEN "Running") $(CYAN "$GULP_LINT_LOCAL")
-eval $GULP_LINT_LOCAL || exit 1
+echo $(GREEN "Running") $(CYAN "$AMP_LINT_LOCAL")
+eval $AMP_LINT_LOCAL || exit 1
 echo -e "\n"
 
-echo $(GREEN "Running") $(CYAN "$GULP_PRETTIFY_LOCAL")
-eval $GULP_PRETTIFY_LOCAL || exit 1
+echo $(GREEN "Running") $(CYAN "$AMP_PRETTIFY_LOCAL")
+eval $AMP_PRETTIFY_LOCAL || exit 1
 echo -e "\n"
 
-echo $(GREEN "Running") $(CYAN "$GULP_UNIT_LOCAL")
-eval $GULP_UNIT_LOCAL || exit 1
+echo $(GREEN "Running") $(CYAN "$AMP_UNIT_LOCAL")
+eval $AMP_UNIT_LOCAL || exit 1
 echo -e "\n"
 
 echo $(GREEN "Done with") $(CYAN "pre-push") $(GREEN "hooks. Pushing commits to GitHub...")
diff --git a/build-system/common/diff.js b/build-system/common/diff.js
new file mode 100644
index 0000000000000..e1d4455868bef
--- /dev/null
+++ b/build-system/common/diff.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright 2021 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.
+ */
+const argv = require('minimist')(process.argv.slice(2));
+const tempy = require('tempy');
+const {blue, bold, cyan, red} = require('./colors');
+const {getStdout} = require('./process');
+const {log, logWithoutTimestamp} = require('./logging');
+const {writeFile} = require('fs-extra');
+
+/**
+ * Diffs a file against content that might replace it.
+ * @param {string} filepath
+ * @param {string} content
+ * @param {Array<string>=} gitDiffFlags
+ * @return {!Promise<string>}
+ */
+const diffTentative = (filepath, content, gitDiffFlags = ['-U1']) =>
+  tempy.write.task(content, (temporary) =>
+    getStdout(
+      [
+        'git -c color.ui=always diff',
+        ...gitDiffFlags,
+        filepath,
+        temporary,
+      ].join(' ')
+    )
+      .trim()
+      .replace(new RegExp(temporary, 'g'), `/${filepath}`)
+  );
+
+/**
+ * Diffs a file against new content.
+ * If `argv.fix` is true, the file is written with the new content, otherwise
+ * errors out.
+ * @param {string} callerTask
+ * @param {string} filepath
+ * @param {string} tentative
+ * @param {Array<string>=} opt_gitDiffFlags
+ */
+async function writeDiffOrFail(
+  callerTask,
+  filepath,
+  tentative,
+  opt_gitDiffFlags
+) {
+  const diff = await diffTentative(filepath, tentative, opt_gitDiffFlags);
+
+  if (!diff.length) {
+    return;
+  }
+
+  logWithoutTimestamp();
+  logWithoutTimestamp(diff);
+  logWithoutTimestamp();
+
+  if (!argv.fix) {
+    log(red('ERROR:'), cyan(filepath), 'is missing the changes above.');
+    log('⤷ To automatically apply them, run', cyan(`amp ${callerTask} --fix`));
+    throw new Error(`${filepath} is outdated`);
+  }
+
+  await writeFile(filepath, tentative);
+  log('Wrote', bold(blue(filepath)));
+}
+
+module.exports = {
+  diffTentative,
+  writeDiffOrFail,
+};
diff --git a/build-system/common/enable-git-pre-push.sh b/build-system/common/enable-git-pre-push.sh
index 3a3be2d7585ef..77135a3596c37 100755
--- a/build-system/common/enable-git-pre-push.sh
+++ b/build-system/common/enable-git-pre-push.sh
@@ -13,10 +13,9 @@
 # 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.
-#
+
 # This script adds a pre-push hook to .git/hooks/, which runs some basic tests
 # before running "git push".
-#
 # To enable it, run this script: "./build-system/common/enable-git-pre-push.sh"
 
 
diff --git a/build-system/common/esbuild-babel.js b/build-system/common/esbuild-babel.js
new file mode 100644
index 0000000000000..f5873ca8d0a95
--- /dev/null
+++ b/build-system/common/esbuild-babel.js
@@ -0,0 +1,140 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const babel = require('@babel/core');
+const path = require('path');
+const {debug} = require('../compile/debug-compilation-lifecycle');
+const {TransformCache, batchedRead, md5} = require('./transform-cache');
+
+/**
+ * Used to cache babel transforms done by esbuild.
+ * @const {TransformCache}
+ */
+let transformCache;
+
+/**
+ * Creates a babel plugin for esbuild for the given caller. Optionally enables
+ * caching to speed up transforms.
+ * @param {string} callerName
+ * @param {boolean} enableCache
+ * @param {function(): void} preSetup
+ * @param {function(): void} postLoad
+ * @return {!Object}
+ */
+function getEsbuildBabelPlugin(
+  callerName,
+  enableCache,
+  preSetup = () => {},
+  postLoad = () => {}
+) {
+  if (!transformCache) {
+    transformCache = new TransformCache('.babel-cache', '.js');
+  }
+
+  /**
+   * @param {string} filename
+   * @param {string} contents
+   * @param {string} hash
+   * @param {Object} babelOptions
+   * @return {Promise}
+   */
+  async function transformContents(filename, contents, hash, babelOptions) {
+    if (enableCache) {
+      const cached = transformCache.get(hash);
+      if (cached) {
+        return cached;
+      }
+    }
+
+    debug('pre-babel', filename, contents);
+    const promise = babel
+      .transformAsync(contents, babelOptions)
+      .then((result) => {
+        const {code, map} = result || {};
+        debug('post-babel', filename, code, map);
+        return code;
+      });
+
+    if (enableCache) {
+      transformCache.set(hash, promise);
+    }
+
+    return promise.finally(postLoad);
+  }
+
+  return {
+    name: 'babel',
+
+    async setup(build) {
+      preSetup();
+
+      const babelOptions =
+        babel.loadOptions({caller: {name: callerName}}) || {};
+      const optionsHash = md5(
+        JSON.stringify({babelOptions, argv: process.argv.slice(2)})
+      );
+
+      build.onLoad({filter: /\.[cm]?js$/, namespace: ''}, async (file) => {
+        const filename = file.path;
+        const {contents, hash} = await batchedRead(filename, optionsHash);
+
+        const transformed = await transformContents(
+          filename,
+          contents,
+          hash,
+          getFileBabelOptions(babelOptions, filename)
+        );
+        return {contents: transformed};
+      });
+    },
+  };
+}
+
+const CJS_TRANSFORMS = new Set([
+  'transform-modules-commonjs',
+  'proposal-dynamic-import',
+  'syntax-dynamic-import',
+  'proposal-export-namespace-from',
+  'syntax-export-namespace-from',
+]);
+
+/**
+ * @param {!Object} babelOptions
+ * @param {string} filename
+ * @return {!Object}
+ */
+function getFileBabelOptions(babelOptions, filename) {
+  // Patch for leaving files within node_modules as esm, since esbuild will break when trying
+  // to process a module file that contains CJS exports. This function is called after
+  // babel.loadOptions, therefore all of the plugins from preset-env have already been applied.
+  // and must be disabled individually.
+  if (filename.includes('node_modules')) {
+    const plugins = babelOptions.plugins.filter(
+      ({key}) => !CJS_TRANSFORMS.has(key)
+    );
+    babelOptions = {...babelOptions, plugins};
+  }
+
+  return {
+    ...babelOptions,
+    filename,
+    filenameRelative: path.basename(filename),
+  };
+}
+
+module.exports = {
+  getEsbuildBabelPlugin,
+};
diff --git a/build-system/common/exec.js b/build-system/common/exec.js
index 94c3b43e6cb9f..aff451ff38109 100644
--- a/build-system/common/exec.js
+++ b/build-system/common/exec.js
@@ -20,49 +20,43 @@
  */
 
 const childProcess = require('child_process');
+const {log} = require('./logging');
+const {spawnProcess} = require('./process');
+const {yellow} = require('./colors');
 
 const shellCmd = process.platform == 'win32' ? 'cmd' : '/bin/bash';
 
-/**
- * Spawns the given command in a child process with the given options.
- *
- * @param {string} cmd
- * @param {?Object} options
- * @return {!Object}
- */
-function spawnProcess(cmd, options) {
-  return childProcess.spawnSync(cmd, {shell: shellCmd, ...options});
-}
-
 /**
  * Executes the provided command with the given options, returning the process
  * object.
  *
  * @param {string} cmd
- * @param {?Object} options
+ * @param {?Object=} options
  * @return {!Object}
  */
-function exec(cmd, options) {
-  options = options || {'stdio': 'inherit'};
+function exec(cmd, options = {'stdio': 'inherit'}) {
   return spawnProcess(cmd, options);
 }
 
 /**
- * Executes the provided shell script in an asynchronous process.
+ * Executes the provided shell script in an asynchronous process. Special-cases
+ * the AMP task runner so that it is correctly spawned on all platforms (node
+ * shebangs do not work on Windows).
  *
  * @param {string} script
  * @param {?Object} options
- * @return {!Object}
+ * @return {!childProcess.ChildProcessWithoutNullStreams}
  */
 function execScriptAsync(script, options) {
-  return childProcess.spawn(script, {shell: shellCmd, ...options});
+  const scriptToSpawn = script.startsWith('amp ') ? `node ${script}` : script;
+  return childProcess.spawn(scriptToSpawn, {shell: shellCmd, ...options});
 }
 
 /**
  * Executes the provided command, and terminates the program in case of failure.
  *
  * @param {string} cmd
- * @param {?Object} options
+ * @param {?Object=} options
  */
 function execOrDie(cmd, options) {
   const p = exec(cmd, options);
@@ -86,47 +80,28 @@ function execWithError(cmd) {
 }
 
 /**
- * Executes the provided command, returning the process object.
+ * Executes the provided command, piping the parent process' stderr, throwing
+ * an error with the provided message the command fails, and returns the
+ * process object.
  * @param {string} cmd
- * @param {?Object} options
+ * @param {string} msg
  * @return {!Object}
  */
-function getOutput(cmd, options = {}) {
-  const p = spawnProcess(cmd, {
-    'cwd': options.cwd || process.cwd(),
-    'env': options.env || process.env,
-    'stdio': options.stdio || 'pipe',
-    'encoding': options.encoding || 'utf-8',
-  });
+function execOrThrow(cmd, msg) {
+  const p = exec(cmd, {'stdio': ['inherit', 'inherit', 'pipe']});
+  if (p.status && p.status != 0) {
+    log(yellow('ERROR:'), msg);
+    const error = new Error(p.stderr);
+    error.status = p.status;
+    throw error;
+  }
   return p;
 }
 
-/**
- * Executes the provided command, returning its stdout.
- * @param {string} cmd
- * @param {?Object} options
- * @return {string}
- */
-function getStdout(cmd, options) {
-  return getOutput(cmd, options).stdout;
-}
-
-/**
- * Executes the provided command, returning its stderr.
- * @param {string} cmd
- * @param {?Object} options
- * @return {string}
- */
-function getStderr(cmd, options) {
-  return getOutput(cmd, options).stderr;
-}
-
 module.exports = {
   exec,
   execOrDie,
   execScriptAsync,
   execWithError,
-  getOutput,
-  getStderr,
-  getStdout,
+  execOrThrow,
 };
diff --git a/build-system/common/git.js b/build-system/common/git.js
index 06c20cd1077c7..6e0d52e07611d 100644
--- a/build-system/common/git.js
+++ b/build-system/common/git.js
@@ -20,39 +20,39 @@
  */
 
 const {
-  isTravisBuild,
-  isTravisPullRequestBuild,
-  travisPullRequestBranch,
-  travisPullRequestSha,
-} = require('./travis');
-const {getStdout} = require('./exec');
-
-/**
- * Returns the commit at which the current branch was forked off of master.
- * On Travis, there is an additional merge commit, so we must pick the first of
- * the boundary commits (prefixed with a -) returned by git rev-list.
- * On local branches, this is merge base of the current branch off of master.
+  ciPullRequestBranch,
+  ciPullRequestSha,
+  isCiBuild,
+  isPullRequestBuild,
+} = require('./ci');
+const {getStdout} = require('./process');
+
+/**
+ * Returns the commit at which the current PR branch was forked off of the main
+ * branch. During CI, there is an additional merge commit, so we must pick the
+ * first of the boundary commits (prefixed with a -) returned by git rev-list.
+ * On local branches, this is merge base of the current branch off of the main
+ * branch.
  * @return {string}
  */
 function gitBranchCreationPoint() {
-  if (isTravisBuild()) {
-    const traviPrSha = travisPullRequestSha();
+  if (isPullRequestBuild()) {
+    const prSha = ciPullRequestSha();
     return getStdout(
-      `git rev-list --boundary ${traviPrSha}...master | grep "^-" | head -n 1 | cut -c2-`
+      `git rev-list --boundary ${prSha}...origin/main | grep "^-" | head -n 1 | cut -c2-`
     ).trim();
   }
-  return gitMergeBaseLocalMaster();
+  return gitMergeBaseLocalMain();
 }
 
 /**
- * Returns the `master` parent of the merge commit (current HEAD) on Travis.
- * Note: This is not the same as origin/master (a moving target), since new
- * commits can be merged while a Travis build is in progress.
- * See https://travis-ci.community/t/origin-master-moving-forward-between-build-stages/4189/6
+ * Returns the main branch parent of the merge commit (current HEAD) during CI
+ * builds. This is not the same as origin/<main branch> (a moving target), since
+ * new commits can be merged while a CI build is in progress.
  * @return {string}
  */
-function gitTravisMasterBaseline() {
-  return getStdout('git merge-base origin/master HEAD').trim();
+function gitCiMainBaseline() {
+  return getStdout('git merge-base origin/main HEAD').trim();
 }
 
 /**
@@ -74,29 +74,29 @@ function gitDiffNameOnly() {
 }
 
 /**
- * Returns the list of files changed relative to the branch point off of master,
- * one on each line.
+ * Returns the list of files changed relative to the branch point off of the
+ * main branch, one on each line.
  * @return {!Array<string>}
  */
-function gitDiffNameOnlyMaster() {
-  const masterBaseline = gitMasterBaseline();
-  return getStdout(`git diff --name-only ${masterBaseline}`).trim().split('\n');
+function gitDiffNameOnlyMain() {
+  const mainBaseline = gitMainBaseline();
+  return getStdout(`git diff --name-only ${mainBaseline}`).trim().split('\n');
 }
 
 /**
- * Returns the list of files changed relative to the branch point off of master,
- * in diffstat format.
+ * Returns the list of files changed relative to the branch point off of the
+ * main branch in diffstat format.
  * @return {string}
  */
-function gitDiffStatMaster() {
-  const masterBaseline = gitMasterBaseline();
-  return getStdout(`git -c color.ui=always diff --stat ${masterBaseline}`);
+function gitDiffStatMain() {
+  const mainBaseline = gitMainBaseline();
+  return getStdout(`git -c color.ui=always diff --stat ${mainBaseline}`);
 }
 
 /**
  * Returns a detailed log of commits included in a PR check, starting with (and
- * including) the branch point off of master. Limited to commits in the past
- * 30 days to keep the output sane.
+ * including) the branch point off of the main branch. Limited to commits in the
+ * past 30 days to keep the output length manageable.
  *
  * @return {string}
  */
@@ -111,11 +111,11 @@ function gitDiffCommitLog() {
 
 /**
  * Returns the list of files added by the local branch relative to the branch
- * point off of master, one on each line.
+ * point off of the main branch, one on each line.
  * @return {!Array<string>}
  */
-function gitDiffAddedNameOnlyMaster() {
-  const branchPoint = gitMergeBaseLocalMaster();
+function gitDiffAddedNameOnlyMain() {
+  const branchPoint = gitMergeBaseLocalMain();
   return getStdout(`git diff --name-only --diff-filter=ARC ${branchPoint}`)
     .trim()
     .split('\n');
@@ -130,13 +130,14 @@ function gitDiffColor() {
 }
 
 /**
- * Returns the full color diff of the given file relative to the branch point off of master.
+ * Returns the full color diff of the given file relative to the branch point
+ * off of the main branch.
  * @param {string} file
  * @return {string}
  */
-function gitDiffFileMaster(file) {
-  const masterBaseline = gitMasterBaseline();
-  return getStdout(`git -c color.ui=always diff -U1 ${masterBaseline} ${file}`);
+function gitDiffFileMain(file) {
+  const mainBaseline = gitMainBaseline();
+  return getStdout(`git -c color.ui=always diff -U1 ${mainBaseline} ${file}`);
 }
 
 /**
@@ -144,8 +145,8 @@ function gitDiffFileMaster(file) {
  * @return {string}
  */
 function gitBranchName() {
-  return isTravisPullRequestBuild()
-    ? travisPullRequestBranch()
+  return isPullRequestBuild()
+    ? ciPullRequestBranch()
     : getStdout('git rev-parse --abbrev-ref HEAD').trim();
 }
 
@@ -154,8 +155,8 @@ function gitBranchName() {
  * @return {string}
  */
 function gitCommitHash() {
-  if (isTravisPullRequestBuild()) {
-    return travisPullRequestSha();
+  if (isPullRequestBuild()) {
+    return ciPullRequestSha();
   }
   return getStdout('git rev-parse --verify HEAD').trim();
 }
@@ -169,7 +170,8 @@ function gitCommitterEmail() {
 }
 
 /**
- * Returns list of commit SHAs and their cherry-pick status from master.
+ * Returns list of commit SHAs and their cherry-pick status from the main
+ * branch.
  *
  * `git cherry <branch>` returns a list of commit SHAs. While the exact
  * mechanism is too complicated for this comment (run `git help cherry` for a
@@ -177,16 +179,11 @@ function gitCommitterEmail() {
  * from <branch> are prefixed with '- ', and those that were not are prefixed
  * with '+ '.
  *
- * @return {!Array<{sha: string, isCherryPick: boolean}>}
+ * @return {!Array<string>}
  */
-function gitCherryMaster() {
-  return getStdout('git cherry master')
-    .trim()
-    .split('\n')
-    .map((line) => ({
-      isCherryPick: line.substring(0, 2) == '- ',
-      sha: line.substring(2),
-    }));
+function gitCherryMain() {
+  const stdout = getStdout('git cherry main').trim();
+  return stdout ? stdout.split('\n') : [];
 }
 
 /**
@@ -197,29 +194,31 @@ function gitCherryMaster() {
  * @return {string}
  */
 function gitCommitFormattedTime(ref = 'HEAD') {
+  const envPrefix = process.platform == 'win32' ? 'set TZ=UTC &&' : 'TZ=UTC';
   return getStdout(
-    `TZ=UTC git log ${ref} -1 --pretty="%cd" --date=format-local:%y%m%d%H%M%S`
+    `${envPrefix} git log ${ref} -1 --pretty="%cd" --date=format-local:%y%m%d%H%M%S`
   ).trim();
 }
 
 /**
- * Returns the merge base of the current branch off of master when running on
- * a local workspace.
+ * Returns the merge base of the current branch off of the main branch when
+ * running on a local workspace.
  * @return {string}
  */
-function gitMergeBaseLocalMaster() {
-  return getStdout('git merge-base master HEAD').trim();
+function gitMergeBaseLocalMain() {
+  return getStdout('git merge-base main HEAD').trim();
 }
 
 /**
- * Returns the master baseline commit, regardless of running environment.
+ * Returns the baseline commit from the main branch, regardless of running
+ * environment.
  * @return {string}
  */
-function gitMasterBaseline() {
-  if (isTravisBuild()) {
-    return gitTravisMasterBaseline();
+function gitMainBaseline() {
+  if (isCiBuild()) {
+    return gitCiMainBaseline();
   }
-  return gitMergeBaseLocalMaster();
+  return gitMergeBaseLocalMain();
 }
 
 /**
@@ -235,18 +234,18 @@ function gitDiffPath(path, commit) {
 module.exports = {
   gitBranchCreationPoint,
   gitBranchName,
-  gitCherryMaster,
+  gitCherryMain,
   gitCommitFormattedTime,
   gitCommitHash,
   gitCommitterEmail,
-  gitDiffAddedNameOnlyMaster,
+  gitDiffAddedNameOnlyMain,
   gitDiffColor,
   gitDiffCommitLog,
-  gitDiffFileMaster,
+  gitDiffFileMain,
   gitDiffNameOnly,
-  gitDiffNameOnlyMaster,
+  gitDiffNameOnlyMain,
   gitDiffPath,
-  gitDiffStatMaster,
-  gitTravisMasterBaseline,
+  gitDiffStatMain,
+  gitCiMainBaseline,
   shortSha,
 };
diff --git a/build-system/common/logging.js b/build-system/common/logging.js
new file mode 100644
index 0000000000000..765b8e81f63d0
--- /dev/null
+++ b/build-system/common/logging.js
@@ -0,0 +1,119 @@
+/**
+ * Copyright 2021 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 {bold, gray, yellow} = require('./colors');
+const {isCiBuild} = require('./ci');
+
+/**
+ * Used by tests to wrap progress dots. Attempts to match the terminal width
+ * during local development and defaults to 150 if it couldn't be determined.
+ */
+const dotWrappingWidth = isCiBuild() ? 150 : process.stdout.columns ?? 150;
+
+/**
+ * Used by CI job scripts to print a prefix before top-level logging lines.
+ */
+let loggingPrefix = '';
+
+/**
+ * Logs messages with a timestamp. The timezone suffix is dropped.
+ * @param  {...string} messages
+ */
+function log(...messages) {
+  const timestamp = new Date().toTimeString().split(' ')[0];
+  const prefix = `[${gray(timestamp)}]`;
+  console.log(prefix, ...messages);
+}
+
+/**
+ * Sets the logging prefix for the ongoing PR check job
+ * @param {string} prefix
+ */
+function setLoggingPrefix(prefix) {
+  loggingPrefix = prefix;
+}
+
+/**
+ * Returns the formatted logging prefix for the ongoing PR check job
+ * @return {string}
+ */
+function getLoggingPrefix() {
+  return bold(yellow(loggingPrefix));
+}
+
+/**
+ * Logs messages only during local development
+ * @param  {...string} messages
+ */
+function logLocalDev(...messages) {
+  if (!isCiBuild()) {
+    log(...messages);
+  }
+}
+
+/**
+ * Logs messages on the same line to indicate progress
+ * @param {...string} messages
+ */
+function logOnSameLine(...messages) {
+  if (!isCiBuild() && process.stdout.isTTY) {
+    process.stdout.moveCursor(0, -1);
+    process.stdout.cursorTo(0);
+    process.stdout.clearLine(0);
+  }
+  log(...messages);
+}
+
+/**
+ * Logs messages on the same line only during local development
+ * @param {...string} messages
+ */
+function logOnSameLineLocalDev(...messages) {
+  if (!isCiBuild()) {
+    logOnSameLine(...messages);
+  }
+}
+
+/**
+ * Logs messages without a timestamp
+ * @param {...string} messages
+ */
+function logWithoutTimestamp(...messages) {
+  console.log(...messages);
+}
+
+/**
+ * Logs messages without a timestamp only during local development
+ * @param {...string} messages
+ */
+function logWithoutTimestampLocalDev(...messages) {
+  if (!isCiBuild()) {
+    console.log(...messages);
+  }
+}
+
+module.exports = {
+  dotWrappingWidth,
+  getLoggingPrefix,
+  log,
+  logLocalDev,
+  logOnSameLine,
+  logOnSameLineLocalDev,
+  logWithoutTimestamp,
+  logWithoutTimestampLocalDev,
+  setLoggingPrefix,
+};
diff --git a/build-system/common/npm-checks.js b/build-system/common/npm-checks.js
new file mode 100644
index 0000000000000..fcdcb30a19f1c
--- /dev/null
+++ b/build-system/common/npm-checks.js
@@ -0,0 +1,88 @@
+/**
+ * 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';
+
+/**
+ * @fileoverview
+ * This script makes sure that package.json and package-lock.json are in sync
+ * and up to date.
+ */
+
+const fs = require('fs-extra');
+const path = require('path');
+const {cyan, red} = require('./colors');
+const {exec} = require('./exec');
+const {gitDiffColor, gitDiffNameOnly} = require('./git');
+const {log, logWithoutTimestamp} = require('./logging');
+
+/**
+ * Ensures that the package files in the given directory were generated with a
+ * compatible version of npm and do not have any missing changes. Defaults to
+ * the repo root when a directory isn't specified.
+ *
+ * @param {string=} dir
+ */
+function runNpmChecks(dir = '.') {
+  const relativeDir = path.relative(process.cwd(), dir);
+  const targetDir = dir == '.' ? 'the repo root' : cyan(relativeDir);
+  log('Running', cyan('npm'), 'checks under', targetDir + '...');
+  const packageLockFile = path.join(relativeDir, 'package-lock.json');
+
+  // Check the lockfile version.
+  if (fs.readJsonSync(packageLockFile).lockfileVersion != 1) {
+    log(
+      red('ERROR:'),
+      cyan(packageLockFile),
+      'was generated with an incorrect version of',
+      cyan('npm') + '.'
+    );
+    log(
+      '⤷ To fix this, make sure you are using the version of',
+      cyan('npm'),
+      'that came pre-installed with the latest LTS version of',
+      cyan('node') + '.'
+    );
+    throw new Error('Incorrect lockfile version');
+  }
+
+  // Run `npm i` and check for changes. (`npm ci` doesn't update lockfiles.)
+  const installCmd = 'npm install' + (dir == '.' ? '' : ` --prefix ${dir}`);
+  exec(installCmd, {'stdio': 'ignore'});
+  const filesChanged = gitDiffNameOnly();
+  if (filesChanged.includes(packageLockFile)) {
+    log(
+      red('ERROR:'),
+      'This PR did not properly update',
+      cyan(packageLockFile) + '.'
+    );
+    log(
+      '⤷ To fix this, sync your branch to',
+      cyan('ampproject/amphtml/main') + ', run',
+      cyan('npm install'),
+      'under',
+      targetDir + ', and push a new commit containing the changes.'
+    );
+    log('Expected changes:');
+    logWithoutTimestamp(gitDiffColor());
+    throw new Error('Lockfile not updated');
+  }
+
+  log('All', cyan('npm'), 'checks passed.', dir == '.' ? '\n' : '');
+}
+
+module.exports = {
+  runNpmChecks,
+};
diff --git a/build-system/common/process.js b/build-system/common/process.js
new file mode 100644
index 0000000000000..88ad0b06391ac
--- /dev/null
+++ b/build-system/common/process.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright 2020 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';
+
+/**
+ * @fileoverview Provides functions for executing tasks in a child process.
+ * Separated from `exec` to allow import before `npm` installs dependencies.
+ */
+
+const childProcess = require('child_process');
+
+const shellCmd = process.platform == 'win32' ? 'cmd' : '/bin/bash';
+
+/**
+ * Spawns the given command in a child process with the given options.
+ * Special-cases the AMP task runner so that it is correctly spawned on all
+ * platforms (node shebangs do not work on Windows).
+ *
+ * @param {string} cmd
+ * @param {?Object} options
+ * @return {!Object}
+ */
+function spawnProcess(cmd, options) {
+  const cmdToSpawn = cmd.startsWith('amp ') ? `node ${cmd}` : cmd;
+  return childProcess.spawnSync(cmdToSpawn, {shell: shellCmd, ...options});
+}
+
+/**
+ * Executes the provided command, returning the process object.
+ * @param {string} cmd
+ * @param {?Object=} options
+ * @return {!Object}
+ */
+function getOutput(cmd, options = {}) {
+  const p = spawnProcess(cmd, {
+    'cwd': options.cwd || process.cwd(),
+    'env': options.env || process.env,
+    'stdio': options.stdio || 'pipe',
+    'encoding': options.encoding || 'utf-8',
+  });
+  return p;
+}
+
+/**
+ * Executes the provided command, returning its stdout.
+ * @param {string} cmd
+ * @param {?Object=} options
+ * @return {string}
+ */
+function getStdout(cmd, options) {
+  return getOutput(cmd, options).stdout;
+}
+
+/**
+ * Executes the provided command, returning its stderr.
+ * @param {string} cmd
+ * @param {?Object=} options
+ * @return {string}
+ */
+function getStderr(cmd, options) {
+  return getOutput(cmd, options).stderr;
+}
+
+module.exports = {
+  getOutput,
+  getStderr,
+  getStdout,
+  spawnProcess,
+};
diff --git a/build-system/common/sa-travis-key.json.enc b/build-system/common/sa-travis-key.json.enc
deleted file mode 100644
index 00306b8925bbe..0000000000000
Binary files a/build-system/common/sa-travis-key.json.enc and /dev/null differ
diff --git a/build-system/common/transform-cache.js b/build-system/common/transform-cache.js
new file mode 100644
index 0000000000000..8becae997682c
--- /dev/null
+++ b/build-system/common/transform-cache.js
@@ -0,0 +1,131 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const crypto = require('crypto');
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Cache for storing transformed files on both memory and on disk.
+ */
+class TransformCache {
+  /**
+   * @param {string} cacheName
+   * @param {string} fileExtension
+   */
+  constructor(cacheName, fileExtension) {
+    /** @type {string} */
+    this.fileExtension = fileExtension;
+
+    /** @type {string} */
+    this.cacheDir = path.resolve(__dirname, '..', '..', cacheName);
+    fs.ensureDirSync(this.cacheDir);
+
+    /** @type {Map<string, Promise<Buffer|string>>} */
+    this.transformMap = new Map();
+
+    /** @type {Set<string>} */
+    this.fsCache = new Set(fs.readdirSync(this.cacheDir));
+  }
+
+  /**
+   * @param {string} hash
+   * @return {null|Promise<Buffer|string>}
+   */
+  get(hash) {
+    const cached = this.transformMap.get(hash);
+    if (cached) {
+      return cached;
+    }
+    const filename = hash + this.fileExtension;
+    if (this.fsCache.has(filename)) {
+      const transformedPromise = fs.readFile(
+        path.join(this.cacheDir, filename)
+      );
+      this.transformMap.set(hash, transformedPromise);
+      return transformedPromise;
+    }
+    return null;
+  }
+
+  /**
+   * @param {string} hash
+   * @param {Promise<string>} transformPromise
+   */
+  set(hash, transformPromise) {
+    if (this.transformMap.has(hash)) {
+      throw new Error('Read race: Attempting to transform a file twice.');
+    }
+    this.transformMap.set(hash, transformPromise);
+    const filepath = path.join(this.cacheDir, hash) + this.fileExtension;
+    transformPromise.then((contents) => fs.outputFile(filepath, contents));
+  }
+}
+
+/**
+ * Returns the md5 hash of provided args.
+ *
+ * @param {...(string|Buffer)} args
+ * @return {string}
+ */
+function md5(...args) {
+  const hash = crypto.createHash('md5');
+  for (const a of args) {
+    hash.update(a);
+  }
+  return hash.digest('hex');
+}
+
+/**
+ * Used to cache file reads, since some (esbuild) will have multiple "loads" per
+ * file. This batches consecutive reads into a single, and then clears its cache
+ * item for the next load.
+ * @private @const {!Map<string, Promise<{hash: string, contents: string}>>}
+ */
+const readCache = new Map();
+
+/**
+ * Returns the string contents and hash of the file at the specified path. If
+ * multiple reads are requested for the same file before the first read has
+ * completed, the result will be reused.
+ *
+ * @param {string} path
+ * @param {string=} optionsHash
+ * @return {{contents: string, hash: string}}
+ */
+function batchedRead(path, optionsHash) {
+  let read = readCache.get(path);
+  if (!read) {
+    read = fs
+      .readFile(path)
+      .then((contents) => ({
+        contents,
+        hash: md5(contents, optionsHash ?? ''),
+      }))
+      .finally(() => {
+        readCache.delete(path);
+      });
+    readCache.set(path, read);
+  }
+
+  return read;
+}
+
+module.exports = {
+  batchedRead,
+  md5,
+  TransformCache,
+};
diff --git a/build-system/common/travis.js b/build-system/common/travis.js
deleted file mode 100644
index 6cefe84b18698..0000000000000
--- a/build-system/common/travis.js
+++ /dev/null
@@ -1,183 +0,0 @@
-/**
- * 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 colors = require('ansi-colors');
-const log = require('fancy-log');
-
-const {red, cyan} = colors;
-
-/**
- * @fileoverview Provides functions that extract various kinds of Travis state.
- */
-
-/**
- * Returns true if this is a Travis build.
- * @return {boolean}
- */
-function isTravisBuild() {
-  return !!process.env.TRAVIS;
-}
-
-/**
- * Returns true if this is a Travis PR build.
- * @return {boolean}
- */
-function isTravisPullRequestBuild() {
-  return isTravisBuild() && process.env.TRAVIS_EVENT_TYPE === 'pull_request';
-}
-
-/**
- * Returns true if this is a Travis Push build.
- * @return {boolean}
- */
-function isTravisPushBuild() {
-  return isTravisBuild() && process.env.TRAVIS_EVENT_TYPE === 'push';
-}
-
-/**
- * Returns the build number of the ongoing Travis build.
- * @return {string}
- */
-function travisBuildNumber() {
-  if (!isTravisBuild()) {
-    log(
-      red('ERROR:'),
-      'This is not a Travis build. Cannot get',
-      cyan('process.env.TRAVIS_BUILD_NUMBER') + '.'
-    );
-  }
-  return process.env.TRAVIS_BUILD_NUMBER;
-}
-
-/**
- * Returns the job number of the ongoing Travis job.
- * @return {string}
- */
-function travisJobNumber() {
-  if (!isTravisBuild()) {
-    log(
-      red('ERROR:'),
-      'This is not a Travis build. Cannot get',
-      cyan('process.env.TRAVIS_JOB_NUMBER') + '.'
-    );
-  }
-  return process.env.TRAVIS_JOB_NUMBER;
-}
-
-/**
- * Return the job URL of the ongoing Travis job.
- * @return {string}
- */
-function travisJobUrl() {
-  if (!isTravisBuild()) {
-    log(
-      red('ERROR:'),
-      'This is not a Travis build. Cannot get',
-      cyan('process.env.TRAVIS_JOB_WEB_URL') + '.'
-    );
-  }
-  return process.env.TRAVIS_JOB_WEB_URL;
-}
-
-/**
- * Returns the repo slug associated with the ongoing Travis build.
- * @return {string}
- */
-function travisRepoSlug() {
-  if (!isTravisBuild()) {
-    log(
-      red('ERROR:'),
-      'This is not a Travis build. Cannot get',
-      cyan('process.env.TRAVIS_REPO_SLUG') + '.'
-    );
-  }
-  return process.env.TRAVIS_REPO_SLUG;
-}
-
-/**
- * Returns the commit SHA being tested by the ongoing Travis PR build.
- * @return {string}
- */
-function travisPullRequestSha() {
-  if (!isTravisPullRequestBuild()) {
-    log(
-      red('ERROR:'),
-      'This is not a Travis PR build. Cannot get',
-      cyan('process.env.TRAVIS_PULL_REQUEST_SHA') + '.'
-    );
-  }
-  return process.env.TRAVIS_PULL_REQUEST_SHA;
-}
-
-/**
- * Returns the name of the branch being tested by the ongoing Travis PR build.
- * @return {string}
- */
-function travisPullRequestBranch() {
-  if (!isTravisPullRequestBuild()) {
-    log(
-      red('ERROR:'),
-      'This is not a Travis PR build. Cannot get',
-      cyan('process.env.TRAVIS_PULL_REQUEST_BRANCH') + '.'
-    );
-  }
-  return process.env.TRAVIS_PULL_REQUEST_BRANCH;
-}
-
-/**
- * Returns the Travis branch for push builds.
- * @return {string}
- */
-function travisPushBranch() {
-  if (!isTravisPushBuild()) {
-    log(
-      red('ERRROR:'),
-      'This is not a Travis push build. Cannot get',
-      cyan('process.env.TRAVIS_BRANCH') + '.'
-    );
-  }
-  return process.env.TRAVIS_BRANCH;
-}
-
-/**
- * Returns the commit SHA being tested by the ongoing Travis build.
- * @return {string}
- */
-function travisCommitSha() {
-  if (!isTravisBuild()) {
-    log(
-      red('ERROR:'),
-      'This is not a Travis build. Cannot get',
-      cyan('process.env.TRAVIS_COMMIT') + '.'
-    );
-  }
-  return process.env.TRAVIS_COMMIT;
-}
-
-module.exports = {
-  isTravisBuild,
-  isTravisPullRequestBuild,
-  isTravisPushBuild,
-  travisBuildNumber,
-  travisCommitSha,
-  travisJobNumber,
-  travisJobUrl,
-  travisPullRequestBranch,
-  travisPullRequestSha,
-  travisPushBranch,
-  travisRepoSlug,
-};
diff --git a/build-system/common/update-packages.js b/build-system/common/update-packages.js
new file mode 100644
index 0000000000000..946cfd2fc26b9
--- /dev/null
+++ b/build-system/common/update-packages.js
@@ -0,0 +1,303 @@
+/**
+ * Copyright 2017 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 checkDependencies = require('check-dependencies');
+const del = require('del');
+const fs = require('fs-extra');
+const path = require('path');
+const {cyan, red} = require('./colors');
+const {execOrDie} = require('./exec');
+const {getOutput} = require('./process');
+const {isCiBuild} = require('./ci');
+const {log, logLocalDev} = require('./logging');
+const {runNpmChecks} = require('./npm-checks');
+
+/**
+ * Writes the given contents to the patched file if updated
+ * @param {string} patchedName Name of patched file
+ * @param {string} file Contents to write
+ */
+function writeIfUpdated(patchedName, file) {
+  if (!fs.existsSync(patchedName) || fs.readFileSync(patchedName) != file) {
+    fs.writeFileSync(patchedName, file);
+    logLocalDev('Patched', cyan(patchedName));
+  }
+}
+
+/**
+ * Patches Web Animations polyfill by wrapping its body into `install` function.
+ * This gives us an option to call polyfill directly on the main window
+ * or a friendly iframe.
+ */
+function patchWebAnimations() {
+  // Copies web-animations-js into a new file that has an export.
+  const patchedName =
+    'node_modules/web-animations-js/web-animations.install.js';
+  let file = fs
+    .readFileSync('node_modules/web-animations-js/web-animations.min.js')
+    .toString();
+  // Replace |requestAnimationFrame| with |window|.
+  file = file.replace(/requestAnimationFrame/g, function (a, b) {
+    if (file.charAt(b - 1) == '.') {
+      return a;
+    }
+    return 'window.' + a;
+  });
+  // Fix web-animations-js code that violates strict mode.
+  // See https://github.com/ampproject/amphtml/issues/18612 and
+  // https://github.com/web-animations/web-animations-js/issues/46
+  file = file.replace(/b.true=a/g, 'b?b.true=a:true');
+
+  // Fix web-animations-js code that attempts to write a read-only property.
+  // See https://github.com/ampproject/amphtml/issues/19783 and
+  // https://github.com/web-animations/web-animations-js/issues/160
+  file = file.replace(/this\._isFinished\s*=\s*\!0,/, '');
+
+  // Wrap the contents inside the install function.
+  file =
+    'export function installWebAnimations(window) {\n' +
+    'var document = window.document;\n' +
+    file +
+    '\n' +
+    '}\n';
+  writeIfUpdated(patchedName, file);
+}
+
+/**
+ * Patches Intersection Observer polyfill by wrapping its body into `install`
+ * function.
+ * This gives us an option to control when and how the polyfill is installed.
+ * The polyfill can only be installed on the root context.
+ */
+function patchIntersectionObserver() {
+  // Copies intersection-observer into a new file that has an export.
+  const patchedName =
+    'node_modules/intersection-observer/intersection-observer.install.js';
+  let file = fs
+    .readFileSync('node_modules/intersection-observer/intersection-observer.js')
+    .toString();
+
+  // Wrap the contents inside the install function.
+  file = `export function installIntersectionObserver() {\n${file}\n}\n`;
+  writeIfUpdated(patchedName, file);
+}
+
+/**
+ * Patches Resize Observer polyfill by wrapping its body into `install`
+ * function.
+ * This gives us an option to control when and how the polyfill is installed.
+ * The polyfill can only be installed on the root context.
+ */
+function patchResizeObserver() {
+  // Copies intersection-observer into a new file that has an export.
+  const patchedName =
+    'node_modules/resize-observer-polyfill/ResizeObserver.install.js';
+  let file = fs
+    .readFileSync(
+      'node_modules/resize-observer-polyfill/dist/ResizeObserver.js'
+    )
+    .toString();
+
+  // Wrap the contents inside the install function.
+  file = `export function installResizeObserver(global) {\n${file}\n}\n`
+    // For some reason Closure fails on this three lines. Babel is fine.
+    .replace(
+      "typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :",
+      ''
+    )
+    .replace(
+      "typeof define === 'function' && define.amd ? define(factory) :",
+      ''
+    )
+    .replace('}(this, (function () {', '}(global, (function () {');
+  writeIfUpdated(patchedName, file);
+}
+
+/**
+ * Patches Shadow DOM polyfill by wrapping its body into `install`
+ * function.
+ * This gives us an option to control when and how the polyfill is installed.
+ * The polyfill can only be installed on the root context.
+ */
+function patchShadowDom() {
+  // Copies webcomponents-sd into a new file that has an export.
+  const patchedName =
+    'node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd.install.js';
+
+  let file = '(function() {';
+  // HTMLElement is replaced, but the original needs to be used for the polyfill
+  // since it manipulates "own" properties. See `src/polyfills/custom-element.js`.
+  file += 'var HTMLElementOrig = window.HTMLElementOrig || window.HTMLElement;';
+  file += 'window.HTMLElementOrig = HTMLElementOrig;';
+  file += `
+    (function() {
+      var origContains = document.contains;
+      if (origContains) {
+        Object.defineProperty(document, '__shady_native_contains', {value: origContains});
+      }
+      Object.defineProperty(document, 'contains', {
+        configurable: true,
+        value: function(node) {
+          if (node === this) {
+            return true;
+          }
+          if (this.documentElement) {
+            return this.documentElement.contains(node);
+          }
+          return false;
+        }
+      });
+    })();
+  `;
+
+  /**
+   * @param {string} file
+   * @return {string}
+   */
+  function transformScript(file) {
+    // Use the HTMLElement from above.
+    file = file.replace(/\bHTMLElement\b/g, 'HTMLElementOrig');
+    return file;
+  }
+
+  // Relevant DOM polyfills
+  file += transformScript(
+    fs
+      .readFileSync(
+        'node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-pf_dom.js'
+      )
+      .toString()
+  );
+  file += transformScript(
+    fs
+      .readFileSync(
+        'node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd.js'
+      )
+      .toString()
+  );
+  file += '})();';
+
+  // ESM binaries fail on this expression.
+  file = file.replace(
+    '"undefined"!=typeof window&&window===this?this:"undefined"!=typeof global&&null!=global?global:this',
+    'window'
+  );
+  // Disable any integration with CE.
+  file = file.replace(/window\.customElements/g, 'window.__customElements');
+
+  writeIfUpdated(patchedName, file);
+}
+/**
+ * Adds a missing export statement to the preact module.
+ */
+function patchPreact() {
+  fs.ensureDirSync('node_modules/preact/dom');
+  const file = `export { render, hydrate } from 'preact';`;
+  writeIfUpdated('node_modules/preact/dom/index.js', file);
+}
+
+/**
+ * Deletes the map file for rrule, which breaks closure compiler.
+ * TODO(rsimha): Remove this workaround after a fix is merged for
+ * https://github.com/google/closure-compiler/issues/3720.
+ */
+function removeRruleSourcemap() {
+  const rruleMapFile = 'node_modules/rrule/dist/es5/rrule.js.map';
+  if (fs.existsSync(rruleMapFile)) {
+    del.sync(rruleMapFile);
+    logLocalDev('Deleted', cyan(rruleMapFile));
+  }
+}
+
+/**
+ * Checks if all packages are current, and if not, runs `npm install`.
+ */
+function updateDeps() {
+  const results = checkDependencies.sync({
+    verbose: true,
+    log: () => {},
+    error: console.log,
+  });
+  if (results.depsWereOk) {
+    log('All packages in', cyan('node_modules'), 'are up to date.');
+  } else {
+    log('Running', cyan('npm install') + '...');
+    execOrDie('npm install');
+  }
+}
+
+/**
+ * This function updates repo root packages.
+ *
+ * 1. Update root-level packages if necessary.
+ * 2. Apply various custom patches if not already applied.
+ * 3. During CI, make sure that the root package files were correctly updated.
+ *
+ * During local development, work is done only during first time install and
+ * soon after a repo sync. At all other times, this function is a no-op and
+ * returns almost instantly.
+ */
+function updatePackages() {
+  updateDeps();
+  patchWebAnimations();
+  patchIntersectionObserver();
+  patchResizeObserver();
+  patchShadowDom();
+  patchPreact();
+  removeRruleSourcemap();
+  if (isCiBuild()) {
+    runNpmChecks();
+  }
+}
+
+/**
+ * This function updates the packages in a given task directory.
+ *
+ * 1. During CI, do a clean install.
+ * 2. During local development, do an incremental install if necessary.
+ * 3. Since install scripts can be async, `await` the process object.
+ * 4. Since script output is noisy, capture and print the stderr if needed.
+ * 5. During CI, if not skipped, ensure package files were correctly updated.
+ *
+ * @param {string} dir
+ * @param {boolean=} skipNpmChecks
+ * @return {Promise<void>}
+ */
+async function updateSubpackages(dir, skipNpmChecks = false) {
+  const results = checkDependencies.sync({packageDir: dir});
+  const relativeDir = path.relative(process.cwd(), dir);
+  if (results.depsWereOk) {
+    const nodeModulesDir = path.join(relativeDir, 'node_modules');
+    log('All packages in', cyan(nodeModulesDir), 'are up to date.');
+  } else {
+    const installCmd = isCiBuild() ? 'npm ci' : 'npm install';
+    log('Running', cyan(installCmd), 'in', cyan(relativeDir) + '...');
+    const output = await getOutput(`${installCmd} --prefix ${dir}`);
+    if (output.status !== 0) {
+      log(red('ERROR:'), output.stderr);
+      throw new Error('Installation failed');
+    }
+  }
+  if (isCiBuild() && !skipNpmChecks) {
+    runNpmChecks(dir);
+  }
+}
+
+module.exports = {
+  updatePackages,
+  updateSubpackages,
+};
diff --git a/build-system/common/utils.js b/build-system/common/utils.js
index 416ddc21eaaa7..da3a269d50ace 100644
--- a/build-system/common/utils.js
+++ b/build-system/common/utils.js
@@ -15,27 +15,28 @@
  */
 
 const argv = require('minimist')(process.argv.slice(2));
+const experimentsConfig = require('../global-configs/experiments-config.json');
 const fs = require('fs-extra');
 const globby = require('globby');
-const log = require('fancy-log');
-const path = require('path');
 const {clean} = require('../tasks/clean');
+const {cyan, green, red, yellow} = require('./colors');
+const {default: ignore} = require('ignore');
 const {doBuild} = require('../tasks/build');
 const {doDist} = require('../tasks/dist');
-const {execOrDie} = require('./exec');
-const {gitDiffNameOnlyMaster} = require('./git');
-const {green, cyan, yellow} = require('ansi-colors');
-const {isTravisBuild} = require('./travis');
-
-const ROOT_DIR = path.resolve(__dirname, '../../');
+const {gitDiffNameOnlyMain} = require('./git');
+const {log, logLocalDev} = require('./logging');
 
 /**
  * Performs a clean build of the AMP runtime in testing mode.
- * Used by `gulp e2e|integration|visual_diff`.
+ * Used by `amp e2e|integration|visual_diff`.
+ *
+ * @param {boolean} opt_compiled pass true to build the compiled runtime
+ *   (`amp dist` instead of `amp build`). Otherwise uses the value of
+ *   --compiled to determine which build to generate.
  */
-async function buildRuntime() {
+async function buildRuntime(opt_compiled = false) {
   await clean();
-  if (argv.compiled) {
+  if (argv.compiled || opt_compiled === true) {
     await doDist({fortesting: true});
   } else {
     await doBuild({fortesting: true});
@@ -43,29 +44,39 @@ async function buildRuntime() {
 }
 
 /**
- * Logs a message on the same line to indicate progress
- *
- * @param {string} message
+ * Extracts and validates the config for the given experiment.
+ * @param {string} experiment
+ * @return {?Object}
  */
-function logOnSameLine(message) {
-  if (!isTravisBuild() && process.stdout.isTTY) {
-    process.stdout.moveCursor(0, -1);
-    process.stdout.cursorTo(0);
-    process.stdout.clearLine();
-  }
-  log(message);
+function getExperimentConfig(experiment) {
+  const config = experimentsConfig[experiment];
+  const valid =
+    config?.name &&
+    config?.define_experiment_constant &&
+    config?.expiration_date_utc &&
+    new Number(new Date(config.expiration_date_utc)) >= Date.now();
+  return valid ? config : null;
+}
+
+/**
+ * Returns the names of all valid experiments.
+ * @return {!Array<string>}
+ */
+function getValidExperiments() {
+  return Object.keys(experimentsConfig).filter(getExperimentConfig);
 }
 
 /**
  * Gets the list of files changed on the current branch that match the given
- * array of glob patterns
+ * array of glob patterns using the given options.
  *
  * @param {!Array<string>} globs
+ * @param {!Object} options
  * @return {!Array<string>}
  */
-function getFilesChanged(globs) {
-  const allFiles = globby.sync(globs, {dot: true});
-  return gitDiffNameOnlyMaster().filter((changedFile) => {
+function getFilesChanged(globs, options) {
+  const allFiles = globby.sync(globs, options);
+  return gitDiffNameOnlyMain().filter((changedFile) => {
     return fs.existsSync(changedFile) && allFiles.includes(changedFile);
   });
 }
@@ -77,53 +88,72 @@ function getFilesChanged(globs) {
  * @return {!Array<string>}
  */
 function logFiles(files) {
-  if (!isTravisBuild()) {
-    log(green('INFO: ') + 'Checking the following files:');
-    for (const file of files) {
-      log(cyan(file));
-    }
+  logLocalDev(green('INFO: ') + 'Checking the following files:');
+  for (const file of files) {
+    logLocalDev(cyan(file));
   }
   return files;
 }
 
 /**
- * Extracts the list of files from argv.files.
+ * Extracts the list of files from argv.files. Throws an error if no matching
+ * files were found.
  *
  * @return {Array<string>}
  */
 function getFilesFromArgv() {
-  return argv.files
-    ? globby.sync(argv.files.split(',').map((s) => s.trim()))
-    : [];
+  if (!argv.files) {
+    return [];
+  }
+  // TODO(#30223): globby only takes posix globs. Find a Windows alternative.
+  const toPosix = (str) => str.replace(/\\\\?/g, '/');
+  const globs = Array.isArray(argv.files) ? argv.files : argv.files.split(',');
+  const allFiles = [];
+  for (const glob of globs) {
+    const files = globby.sync(toPosix(glob.trim()));
+    if (files.length == 0) {
+      log(red('ERROR:'), 'Argument', cyan(glob), 'matched zero files.');
+      throw new Error('Argument matched zero files.');
+    }
+    allFiles.push(...files);
+  }
+  return allFiles;
 }
 
 /**
  * Gets a list of files to be checked based on command line args and the given
- * file matching globs. Used by tasks like prettify, check-links, etc.
+ * file matching globs. Used by tasks like prettify, lint, check-links, etc.
+ * Optionally takes in options for globbing and a file containing ignore rules.
  *
  * @param {!Array<string>} globs
  * @param {Object=} options
+ * @param {string=} ignoreFile
  * @return {!Array<string>}
  */
-function getFilesToCheck(globs, options = {}) {
+function getFilesToCheck(globs, options = {}, ignoreFile = undefined) {
+  const ignored = ignore();
+  if (ignoreFile) {
+    const ignoreRules = fs.readFileSync(ignoreFile, 'utf8');
+    ignored.add(ignoreRules);
+  }
   if (argv.files) {
-    return logFiles(getFilesFromArgv());
+    return logFiles(ignored.filter(getFilesFromArgv()));
   }
   if (argv.local_changes) {
-    const filesChanged = getFilesChanged(globs);
+    const filesChanged = ignored.filter(getFilesChanged(globs, options));
     if (filesChanged.length == 0) {
       log(green('INFO: ') + 'No files to check in this PR');
       return [];
     }
     return logFiles(filesChanged);
   }
-  return globby.sync(globs, options);
+  return ignored.filter(globby.sync(globs, options));
 }
 
 /**
  * Ensures that a target is only called with `--files` or `--local_changes`
  *
- * @param {string} taskName name of the gulp task.
+ * @param {string} taskName name of the amp task.
  * @return {boolean} if the use is valid.
  */
 function usesFilesOrLocalChanges(taskName) {
@@ -132,13 +162,13 @@ function usesFilesOrLocalChanges(taskName) {
     log(
       yellow('NOTE 1:'),
       'It is infeasible for',
-      cyan(`gulp ${taskName}`),
+      cyan(`amp ${taskName}`),
       'to check all files in the repo at once.'
     );
     log(
       yellow('NOTE 2:'),
       'Please run',
-      cyan(`gulp ${taskName}`),
+      cyan(`amp ${taskName}`),
       'with',
       cyan('--files'),
       'or',
@@ -148,27 +178,11 @@ function usesFilesOrLocalChanges(taskName) {
   return validUsage;
 }
 
-/**
- * Runs 'yarn' to install packages in a given directory.
- *
- * @param {string} dir
- */
-function installPackages(dir) {
-  log(
-    'Running',
-    cyan('yarn'),
-    'to install packages in',
-    cyan(path.relative(ROOT_DIR, dir)) + '...'
-  );
-  execOrDie(`npx yarn --cwd ${dir}`, {'stdio': 'ignore'});
-}
-
 module.exports = {
   buildRuntime,
-  getFilesChanged,
+  getExperimentConfig,
+  getValidExperiments,
   getFilesFromArgv,
   getFilesToCheck,
-  installPackages,
-  logOnSameLine,
   usesFilesOrLocalChanges,
 };
diff --git a/build-system/compile/OWNERS b/build-system/compile/OWNERS
index 635f2ab0686f5..1c128a0a10473 100644
--- a/build-system/compile/OWNERS
+++ b/build-system/compile/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
@@ -7,10 +7,18 @@
       owners: [{name: 'ampproject/wg-infra'}],
     },
     {
-      pattern: '{bundles.config,sources}.js',
+      pattern: 'sources.js',
       owners: [
         {name: 'ampproject/wg-infra'},
-        {name: 'ampproject/wg-runtime'},
+        {name: 'ampproject/wg-performance'},
+      ],
+    },
+    {
+      pattern: 'bundles.config.*',
+      owners: [
+        {name: 'ampproject/wg-bento'},
+        {name: 'ampproject/wg-components'},
+        {name: 'ampproject/wg-infra'},
         {name: 'ampproject/wg-performance'},
       ],
     },
diff --git a/build-system/compile/bundles.config.extensions.json b/build-system/compile/bundles.config.extensions.json
new file mode 100644
index 0000000000000..981bd3054b9cf
--- /dev/null
+++ b/build-system/compile/bundles.config.extensions.json
@@ -0,0 +1,728 @@
+[
+  {"name": "amp-3d-gltf", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-3q-player", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-access",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-access-laterpay",
+    "version": ["0.1", "0.2"],
+    "latestVersion": "0.2",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-access-poool", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-access-scroll",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-accordion",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-accordion",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "npm": true
+    }
+  },
+  {"name": "amp-action-macro", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-ad",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-ad-custom", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-ad-exit", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-ad-network-adsense-impl",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {
+    "name": "amp-ad-network-adzerk-impl",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {
+    "name": "amp-ad-network-doubleclick-impl",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {
+    "name": "amp-ad-network-fake-impl",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {"name": "amp-ad-network-nws-impl", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-ad-network-valueimpression-impl",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {
+    "name": "amp-addthis",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-analytics", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-anim", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-animation", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-animation-polyfill", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-apester-media",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-app-banner",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-audio", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-auto-ads", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-auto-lightbox", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-autocomplete",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-base-carousel",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-base-carousel",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "npm": true
+    }
+  },
+  {"name": "amp-beopinion", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-bind", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-bodymovin-animation", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-brid-player", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-brightcove", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-byside-content",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-cache-url", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-call-tracking", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-carousel",
+    "version": ["0.1", "0.2"],
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-connatix-player", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-consent",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-crypto-polyfill", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-dailymotion", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-date-countdown",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {
+    "name": "amp-date-countdown",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "npm": true
+    }
+  },
+  {
+    "name": "amp-date-display",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {
+    "name": "amp-date-display",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "npm": true
+    }
+  },
+  {
+    "name": "amp-date-picker",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-delight-player",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-dynamic-css-classes", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-embedly-card", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-experiment", "version": ["0.1", "1.0"], "latestVersion": "0.1"},
+  {"name": "amp-facebook", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-facebook-comments",
+    "version": ["0.1", "1.0"],
+    "latestVersion": "0.1"
+  },
+  {"name": "amp-facebook-like", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-facebook-page", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-fit-text",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-fit-text",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "npm": true
+    }
+  },
+  {"name": "amp-font", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-form",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-fx-collection", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-fx-flying-carpet",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-geo", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-gfycat", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-gist", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-google-assistant-assistjs",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-google-document-embed",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {
+    "name": "amp-gwd-animation",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-hulu", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-iframe", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-iframely", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-ima-video", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-image-lightbox",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-image-slider",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-image-viewer",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-imgur", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-inline-gallery",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "cssBinaries": [
+        "amp-inline-gallery",
+        "amp-inline-gallery-captions",
+        "amp-inline-gallery-pagination",
+        "amp-inline-gallery-slide",
+        "amp-inline-gallery-thumbnails"
+      ]
+    }
+  },
+  {
+    "name": "amp-inline-gallery",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "cssBinaries": ["amp-inline-gallery-pagination"],
+      "npm": true
+    }
+  },
+  {"name": "amp-inputmask", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-instagram",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-instagram",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "npm": true
+    }
+  },
+  {
+    "name": "amp-install-serviceworker",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {
+    "name": "amp-intersection-observer-polyfill",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {"name": "amp-izlesene", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-jwplayer", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-kaltura-player", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-lightbox",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-lightbox",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "npm": true
+    }
+  },
+  {
+    "name": "amp-lightbox-gallery",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-link-rewriter", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-list",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-live-list",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-loader",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-mathml",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-mega-menu",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-megaphone", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-minute-media-player", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-mowplayer", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-mraid", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-mustache", "version": ["0.1", "0.2"], "latestVersion": "0.2"},
+  {
+    "name": "amp-nested-menu",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-next-page",
+    "version": ["0.1", "1.0"],
+    "latestVersion": "1.0",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-nexxtv-player", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-o2-player", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-onetap-google",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-ooyala-player", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-orientation-observer",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {
+    "name": "amp-pan-zoom",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-pinterest",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-playbuzz",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-position-observer", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-powr-player", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-reach-player", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-recaptcha-input",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-redbull-player", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-reddit", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-render",
+    "version": "1.0",
+    "latestVersion": "1.0"
+  },
+  {
+    "name": "amp-resize-observer-polyfill",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {"name": "amp-riddle-quiz", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-script",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-selector",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-selector",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "npm": true
+    }
+  },
+  {
+    "name": "amp-shadow-dom-polyfill",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"noWrapper": true}
+  },
+  {
+    "name": "amp-sidebar",
+    "version": ["0.1", "0.2", "1.0"],
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-skimlinks", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "// 1": "`amp-slides` is deprecated",
+    "// 2": "Please use `<amp-carousel type=slides>` instead.",
+    "name": "amp-slides",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {"name": "amp-smartlinks", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-social-share",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-social-share",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-soundcloud", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-springboard-player", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-standalone", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-sticky-ad",
+    "version": "1.0",
+    "latestVersion": "1.0",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-story",
+    "version": "1.0",
+    "latestVersion": "1.0",
+    "options": {
+      "hasCss": true,
+      "cssBinaries": [
+        "amp-story-consent",
+        "amp-story-draggable-drawer-header",
+        "amp-story-hint",
+        "amp-story-info-dialog",
+        "amp-story-open-page-attachment",
+        "amp-story-share",
+        "amp-story-share-menu",
+        "amp-story-system-layer",
+        "amp-story-tooltip",
+        "amp-story-unsupported-browser-layer",
+        "amp-story-viewport-warning-layer"
+      ]
+    }
+  },
+  {
+    "name": "amp-story-360",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-story-auto-ads",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "cssBinaries": [
+        "amp-story-auto-ads-ad-badge",
+        "amp-story-auto-ads-attribution",
+        "amp-story-auto-ads-cta-button",
+        "amp-story-auto-ads-inabox",
+        "amp-story-auto-ads-progress-bar",
+        "amp-story-auto-ads-shared"
+      ]
+    }
+  },
+  {
+    "name": "amp-story-auto-analytics",
+    "version": "0.1",
+    "latestVersion": "0.1"
+  },
+  {
+    "name": "amp-story-dev-tools",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-story-education",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-story-interactive",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "cssBinaries": [
+        "amp-story-interactive-binary-poll",
+        "amp-story-interactive-poll",
+        "amp-story-interactive-quiz",
+        "amp-story-interactive-results"
+      ]
+    }
+  },
+  {
+    "name": "amp-story-panning-media",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-story-player",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-stream-gallery",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true
+    }
+  },
+  {
+    "name": "amp-stream-gallery",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "npm": true
+    }
+  },
+  {
+    "name": "amp-subscriptions",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-subscriptions-google",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-tiktok",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-timeago", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-timeago",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "npm": true
+    }
+  },
+  {
+    "name": "amp-truncate-text",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "cssBinaries": ["amp-truncate-text", "amp-truncate-text-shadow"]
+    }
+  },
+  {"name": "amp-twitter", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-twitter",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "npm": true
+    }
+  },
+  {
+    "name": "amp-user-notification",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-video", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-video",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-video-docking",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-video-iframe", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-video-iframe",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {
+    "name": "amp-viewer-integration",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {
+      "// 1": "The viewer integration code needs to run asap, so that viewers",
+      "// 2": "can influence document state asap. Otherwise the document may ",
+      "// 3": "take a long time to learn that it should start process other",
+      "// 4": "extensions faster.",
+      "loadPriority": "high"
+    }
+  },
+  {"name": "amp-vimeo", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-vimeo",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-vine", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-viqeo-player", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-viz-vega",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-vk", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-web-push",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {"hasCss": true}
+  },
+  {"name": "amp-wistia-player", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-yotpo", "version": "0.1", "latestVersion": "0.1"},
+  {"name": "amp-youtube", "version": "0.1", "latestVersion": "0.1"},
+  {
+    "name": "amp-youtube",
+    "version": "1.0",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true,
+      "npm": true
+    }
+  }
+]
diff --git a/build-system/compile/bundles.config.js b/build-system/compile/bundles.config.js
index 33e203bddabe1..4abb7d23343ef 100644
--- a/build-system/compile/bundles.config.js
+++ b/build-system/compile/bundles.config.js
@@ -14,30 +14,20 @@
  * limitations under the License.
  */
 'use strict';
-
-const argv = require('minimist')(process.argv.slice(2));
-const colors = require('ansi-colors');
-const log = require('fancy-log');
+const extensionBundles = require('./bundles.config.extensions.json');
 const wrappers = require('./compile-wrappers');
+const {cyan, red} = require('../common/colors');
+const {log} = require('../common/logging');
 
 const {VERSION: internalRuntimeVersion} = require('./internal-version');
 
-/**
- * @enum {string}
- */
-const TYPES = (exports.TYPES = {
-  AD: '_base_ad',
-  MEDIA: '_base_media',
-  MISC: '_base_misc',
-});
-
 /**
  * Used to generate top-level JS build targets
  */
 exports.jsBundles = {
   'polyfills.js': {
     srcDir: './src/',
-    srcFilename: 'polyfills.js',
+    srcFilename: 'polyfills/index.js',
     destDir: './build/',
     minifiedDestDir: './build/',
   },
@@ -98,6 +88,17 @@ exports.jsBundles = {
       includePolyfills: false,
     },
   },
+  'amp-script-proxy-iframe.js': {
+    srcDir: './3p/',
+    srcFilename: 'amp-script-proxy-iframe.js',
+    destDir: './dist.3p/current',
+    minifiedDestDir: './dist.3p/' + internalRuntimeVersion,
+    options: {
+      minifiedName: 'amp-script-proxy-iframe.js',
+      include3pDirectories: true,
+      includePolyfills: false,
+    },
+  },
   'iframe-transport-client-lib.js': {
     srcDir: './3p/',
     srcFilename: 'iframe-transport-client-lib.js',
@@ -145,6 +146,16 @@ exports.jsBundles = {
       includePolyfills: false,
     },
   },
+  'amp-story-entry-point.js': {
+    srcDir: './src/amp-story-player/amp-story-entry-point/',
+    srcFilename: 'amp-story-entry-point.js',
+    destDir: './dist',
+    minifiedDestDir: './dist',
+    options: {
+      minifiedName: 'amp-story-entry-point-v0.js',
+      includePolyfills: false,
+    },
+  },
   'amp-story-player.js': {
     srcDir: './src/amp-story-player/',
     srcFilename: 'amp-story-player.js',
@@ -175,8 +186,6 @@ exports.jsBundles = {
       minifiedName: 'v0.js',
       includePolyfills: true,
       wrapper: wrappers.mainBinary,
-      esmPassCompilation: argv.esm,
-      includeOnlyESMLevelPolyfills: argv.esm,
     },
   },
   'amp-shadow.js': {
@@ -206,985 +215,7 @@ exports.jsBundles = {
 /**
  * Used to generate extension build targets
  */
-exports.extensionBundles = [
-  {
-    name: 'amp-3d-gltf',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-3q-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-access',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-access-laterpay',
-    version: ['0.1', '0.2'],
-    latestVersion: '0.2',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-access-scroll',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-access-poool',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-accordion',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-action-macro',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-ad',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.AD,
-  },
-  {
-    name: 'amp-ad-custom',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.AD,
-  },
-  {
-    name: 'amp-ad-network-adsense-impl',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.AD,
-  },
-  {
-    name: 'amp-ad-network-adzerk-impl',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.AD,
-  },
-  {
-    name: 'amp-ad-network-doubleclick-impl',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.AD,
-  },
-  {
-    name: 'amp-ad-network-fake-impl',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.AD,
-  },
-  {
-    name: 'amp-ad-exit',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.AD,
-  },
-  {
-    name: 'amp-addthis',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-analytics',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-anim',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-animation',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-apester-media',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-app-banner',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-audio',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-auto-ads',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.AD,
-  },
-  {
-    name: 'amp-autocomplete',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-auto-lightbox',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-base-carousel',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-beopinion',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-bind',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-bodymovin-animation',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-brid-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-delight-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-brightcove',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-byside-content',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-kaltura-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-call-tracking',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-carousel',
-    version: ['0.1', '0.2'],
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-consent',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-connatix-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-crypto-polyfill',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-dailymotion',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-date-countdown',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-date-display',
-    version: ['0.1', '1.0'],
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-google-document-embed',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-dynamic-css-classes',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-embedly-card',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-experiment',
-    version: ['0.1', '1.0'],
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-facebook',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-facebook-comments',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-facebook-like',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-facebook-page',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-fit-text',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-fit-text',
-    version: '1.0',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-font',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-form',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-fx-collection',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-fx-flying-carpet',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-geo',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-gfycat',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-gist',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-gwd-animation',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-hulu',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-iframe',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-ima-video',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-image-lightbox',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-image-slider',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-imgur',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-inline-gallery',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {
-      hasCss: true,
-      cssBinaries: [
-        'amp-inline-gallery',
-        'amp-inline-gallery-pagination',
-        'amp-inline-gallery-thumbnails',
-      ],
-    },
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-inputmask',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-    postPrepend: ['third_party/inputmask/bundle.js'],
-  },
-  {
-    name: 'amp-instagram',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-install-serviceworker',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-intersection-observer-polyfill',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-izlesene',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-jwplayer',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-lightbox',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-lightbox-gallery',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-list',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-live-list',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-loader',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-mathml',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-mega-menu',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-megaphone',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-mustache',
-    version: ['0.1', '0.2'],
-    latestVersion: '0.2',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-nested-menu',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-next-page',
-    version: ['0.1', '1.0'],
-    latestVersion: '1.0',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-nexxtv-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-o2-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-ooyala-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-pinterest',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-playbuzz',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-reach-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-redbull-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-reddit',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-riddle-quiz',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-script',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-share-tracking',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-sidebar',
-    version: ['0.1', '0.2'],
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-skimlinks',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-smartlinks',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-soundcloud',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-springboard-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-standalone',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-sticky-ad',
-    version: '1.0',
-    latestVersion: '1.0',
-    options: {hasCss: true},
-    type: TYPES.AD,
-  },
-  {
-    name: 'amp-story',
-    version: '0.1',
-    latestVersion: '1.0',
-    options: {
-      hasCss: true,
-      cssBinaries: [
-        'amp-story-bookend',
-        'amp-story-consent',
-        'amp-story-hint',
-        'amp-story-unsupported-browser-layer',
-        'amp-story-viewport-warning-layer',
-        'amp-story-info-dialog',
-        'amp-story-share',
-        'amp-story-share-menu',
-        'amp-story-system-layer',
-      ],
-    },
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-story',
-    version: '1.0',
-    latestVersion: '1.0',
-    options: {
-      hasCss: true,
-      cssBinaries: [
-        'amp-story-bookend',
-        'amp-story-consent',
-        'amp-story-draggable-drawer-header',
-        'amp-story-hint',
-        'amp-story-info-dialog',
-        'amp-story-reaction',
-        'amp-story-reaction-poll',
-        'amp-story-reaction-quiz',
-        'amp-story-share',
-        'amp-story-share-menu',
-        'amp-story-system-layer',
-        'amp-story-tooltip',
-        'amp-story-unsupported-browser-layer',
-        'amp-story-viewport-warning-layer',
-      ],
-    },
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-story-auto-ads',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {
-      hasCss: true,
-      cssBinaries: [
-        'amp-story-auto-ads-ad-badge',
-        'amp-story-auto-ads-attribution',
-      ],
-    },
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-story-education',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-stream-gallery',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-selector',
-    version: ['0.1', '1.0'],
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-web-push',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-wistia-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-position-observer',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-orientation-observer',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-date-picker',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-    postPrepend: ['third_party/react-dates/bundle.js'],
-  },
-  {
-    name: 'amp-image-viewer',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-subscriptions',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-subscriptions-google',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-pan-zoom',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-recaptcha-input',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  /**
-   * @deprecated `amp-slides` is deprecated and will be deleted before 1.0.
-   * Please see {@link AmpCarousel} with `type=slides` attribute instead.
-   */
-  {
-    name: 'amp-slides',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-social-share',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-social-share',
-    version: '1.0',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-timeago',
-    version: ['0.1', '1.0'],
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-truncate-text',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {
-      hasCss: true,
-      cssBinaries: ['amp-truncate-text', 'amp-truncate-text-shadow'],
-    },
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-twitter',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-user-notification',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-vimeo',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-vine',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-viz-vega',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MISC,
-    postPrepend: [
-      'third_party/d3/d3.js',
-      'third_party/d3-geo-projection/d3-geo-projection.js',
-      'third_party/vega/vega.js',
-    ],
-  },
-  {
-    name: 'amp-google-vrview-image',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-viewer-assistance',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-viewer-integration',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {
-      // The viewer integration code needs to run asap, so that viewers
-      // can influence document state asap. Otherwise the document may take
-      // a long time to learn that it should start process other extensions
-      // faster.
-      loadPriority: 'high',
-    },
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-video',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-video-docking',
-    version: '0.1',
-    latestVersion: '0.1',
-    options: {hasCss: true},
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-video-iframe',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-viqeo-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-vk',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-yotpo',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-youtube',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-mowplayer',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-powr-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-  {
-    name: 'amp-mraid',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.AD,
-  },
-  {
-    name: 'amp-link-rewriter',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
-  {
-    name: 'amp-minute-media-player',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MEDIA,
-  },
-].sort((a, b) => a.name.localeCompare(b.name));
+exports.extensionBundles = extensionBundles;
 
 /**
  * Used to alias a version of an extension to an older deprecated version.
@@ -1194,6 +225,10 @@ exports.extensionAliasBundles = {
     version: '1.0',
     aliasedVersion: '0.1',
   },
+  'amp-story': {
+    version: '1.0',
+    aliasedVersion: '0.1',
+  },
 };
 
 /**
@@ -1205,19 +240,13 @@ exports.extensionAliasBundles = {
  */
 function verifyBundle_(condition, field, message, name, found) {
   if (!condition) {
-    log(
-      colors.red('ERROR:'),
-      colors.cyan(field),
-      message,
-      colors.cyan(name),
-      '\n' + found
-    );
+    log(red('ERROR:'), cyan(field), message, cyan(name), '\n' + found);
     process.exit(1);
   }
 }
 
 exports.verifyExtensionBundles = function () {
-  exports.extensionBundles.forEach((bundle) => {
+  extensionBundles.forEach((bundle, i) => {
     const bundleString = JSON.stringify(bundle, null, 2);
     verifyBundle_(
       'name' in bundle,
@@ -1226,6 +255,13 @@ exports.verifyExtensionBundles = function () {
       '',
       bundleString
     );
+    verifyBundle_(
+      i === 0 || bundle.name.localeCompare(extensionBundles[i - 1].name) >= 0,
+      'name',
+      'is out of order. extensionBundles should be alphabetically sorted by name.',
+      bundle.name,
+      bundleString
+    );
     verifyBundle_(
       'version' in bundle,
       'version',
@@ -1252,20 +288,5 @@ exports.verifyExtensionBundles = function () {
       bundle.name,
       JSON.stringify(duplicates, null, 2)
     );
-    verifyBundle_(
-      'type' in bundle,
-      'type',
-      'is missing from',
-      bundle.name,
-      bundleString
-    );
-    const validTypes = Object.keys(TYPES).map((x) => TYPES[x]);
-    verifyBundle_(
-      validTypes.some((validType) => validType === bundle.type),
-      'type',
-      `is not one of ${validTypes.join(',')} in`,
-      bundle.name,
-      bundleString
-    );
   });
 };
diff --git a/build-system/compile/check-for-unknown-deps.js b/build-system/compile/check-for-unknown-deps.js
index 1ded914341c36..1008216bd38e8 100644
--- a/build-system/compile/check-for-unknown-deps.js
+++ b/build-system/compile/check-for-unknown-deps.js
@@ -15,38 +15,39 @@
  */
 'use strict';
 
-const log = require('fancy-log');
-const through = require('through2');
-const {red, cyan, yellow} = require('ansi-colors');
+const argv = require('minimist')(process.argv.slice(2));
+const fs = require('fs-extra');
+const {cyan, red, yellow} = require('../common/colors');
+const {log} = require('../common/logging');
 
 /**
  * Searches for the identifier "module$", which Closure uses to uniquely
  * reference module imports. If any are found, that means Closure couldn't
  * import the module correctly.
- *
- * @return {!Stream}
+ * @param {string} file
+ * @return {Promise<void>}
  */
-exports.checkForUnknownDeps = function () {
+async function checkForUnknownDeps(file) {
   const regex = /[\w$]*module\$[\w$]+/;
-
-  return through.obj(function (file, encoding, cb) {
-    const contents = file.contents.toString();
-    if (!contents.includes('module$')) {
-      // Fast check, since regexes can backtrack like crazy.
-      return cb(null, file);
-    }
-
-    const match = regex.exec(contents) || [
-      `couldn't parse the dep. Look for "module$" in the file`,
-    ];
-
-    log(
-      red('Error:'),
-      `Unknown dependency ${cyan(match[0])} found in ${cyan(file.relative)}`
-    );
+  const contents = await fs.readFile(file, 'utf-8');
+  if (!contents.includes('module$')) {
+    // Fast check, since regexes can backtrack like crazy.
+    return;
+  }
+  const match = regex.exec(contents) || [
+    `couldn't parse the dep. Look for "module$" in the file`,
+  ];
+  log(
+    red('Error:'),
+    `Unknown dependency ${cyan(match[0])} found in ${cyan(file)}`
+  );
+  if (argv.debug) {
+    log(red('Output file contents:'));
     log(yellow(contents));
-    const err = new Error('Compilation failed due to unknown dependency');
-    err.showStack = false;
-    cb(err, file);
-  });
+  }
+  throw new Error('Compilation failed due to unknown dependency');
+}
+
+module.exports = {
+  checkForUnknownDeps,
 };
diff --git a/build-system/compile/closure-compile.js b/build-system/compile/closure-compile.js
index 9c7f318f05eae..a59c11399ccb9 100644
--- a/build-system/compile/closure-compile.js
+++ b/build-system/compile/closure-compile.js
@@ -15,148 +15,96 @@
  */
 'use strict';
 
-const argv = require('minimist')(process.argv.slice(2));
-const closureCompiler = require('google-closure-compiler');
-const log = require('fancy-log');
-const path = require('path');
-const pumpify = require('pumpify');
-const sourcemaps = require('gulp-sourcemaps');
-const {cyan, red, yellow} = require('ansi-colors');
-const {EventEmitter} = require('events');
-const {highlight} = require('cli-highlight');
-
-let compilerErrors = '';
+const compiler = require('@ampproject/google-closure-compiler');
+const vinylFs = require('vinyl-fs');
+const {cyan, red, yellow} = require('../common/colors');
+const {getBabelOutputDir} = require('./pre-closure-babel');
+const {log, logWithoutTimestamp} = require('../common/logging');
 
 /**
- * Formats a closure compiler error message into a more readable form by
- * dropping the closure compiler plugin's logging prefix and then syntax
- * highlighting the error text.
+ * Logs a closure compiler error message after syntax highlighting it and then
+ * formatting it into a more readable form by dropping the plugin's logging
+ * prefix, normalizing paths, and emphasizing errors and warnings.
  * @param {string} message
- * @return {string}
  */
-function formatClosureCompilerError(message) {
-  const closurePluginLoggingPrefix = /^.*?gulp-google-closure-compiler.*?: /;
-  message = highlight(message, {ignoreIllegals: true})
-    .replace(closurePluginLoggingPrefix, '')
-    .replace(/ WARNING /g, yellow(' WARNING '))
-    .replace(/ ERROR /g, red(' ERROR '));
-  return message;
+function logClosureCompilerError(message) {
+  log(red('ERROR:'));
+  const babelOutputDir = `${getBabelOutputDir()}/`;
+  const loggingPrefix = /^.*?gulp-google-closure-compiler.*?: /;
+  const {highlight} = require('cli-highlight'); // Lazy-required to speed up task loading.
+  const highlightedMessage = highlight(message, {ignoreIllegals: true});
+  const formattedMessage = highlightedMessage
+    .replace(loggingPrefix, '')
+    .replace(new RegExp(babelOutputDir, 'g'), '')
+    .replace(/ ERROR /g, red(' ERROR '))
+    .replace(/ WARNING /g, yellow(' WARNING '));
+  logWithoutTimestamp(formattedMessage);
 }
 
 /**
- * Handles a closure error during multi-pass compilation. Optionally doesn't
- * emit a fatal error when compilation fails and signals the error so subsequent
- * operations can be skipped (used in watch mode).
- *
- * @param {Error} err
+ * Handles a closure error during compilation and type checking. Passes through
+ * the error except in watch mode, where we want to print a failure message and
+ * continue.
+ * @param {!compiler.PluginError} err
  * @param {string} outputFilename
  * @param {?Object} options
- * @param {?Function} resolve
+ * @return {!compiler.PluginError|undefined}
  */
-function handleCompilerError(err, outputFilename, options, resolve) {
-  logError(`${red('ERROR:')} Could not minify ${cyan(outputFilename)}`);
-  if (options && options.continueOnError) {
-    options.errored = true;
-    if (resolve) {
-      resolve();
+function handleClosureCompilerError(err, outputFilename, options) {
+  if (options.typeCheckOnly) {
+    if (!options.logger) {
+      log(`${red('ERROR:')} Type checking failed`);
     }
-  } else {
-    emitError(err);
+    return err;
   }
+  log(`${red('ERROR:')} Could not minify ${cyan(outputFilename)}`);
+  if (options.continueOnError) {
+    options.errored = true;
+    return;
+  }
+  return err;
 }
 
 /**
- * Handles a closure error during type checking
- *
- * @param {Error} err
- */
-function handleTypeCheckError(err) {
-  logError(red('Type checking failed:'));
-  emitError(err);
-}
-
-/**
- * Emits an error to the caller
- *
- * @param {Error} err
- */
-function emitError(err) {
-  err.showStack = false;
-  new EventEmitter().emit('error', err);
-}
-
-/**
- * Prints an error message when compilation fails
- * @param {string} message
+ * Initializes closure compiler with the given set of flags. We use the gulp
+ * streaming plugin because invoking a command with a long list of --fs flags
+ * on Windows exceeds the command line size limit. The stream mode is 'IN'
+ * because output files and sourcemaps are written directly to disk.
+ * @param {Array<string>} flags
+ * @param {!Object} options
+ * @return {!Object}
  */
-function logError(message) {
-  log(`${message}\n` + formatClosureCompilerError(compilerErrors));
+function initializeClosure(flags, options) {
+  const pluginOptions = {
+    streamMode: 'IN',
+    logger: options.logger || logClosureCompilerError,
+  };
+  return compiler.gulp()(flags, pluginOptions);
 }
 
 /**
- * Normalize the sourcemap file paths before pushing into Closure.
- * Closure don't follow Gulp's normal sourcemap "root" pattern. Gulp considers
- * all files to be relative to the CWD by default, meaning a file `src/foo.js`
- * with a sourcemap alongside points to `src/foo.js`. Closure considers each
- * file relative to the sourcemap. Since the sourcemap for `src/foo.js` "lives"
- * in `src/`, it ends up resolving to `src/src/foo.js`.
- *
- * @param {!Stream} closureStream
- * @return {!Stream}
+ * Runs closure compiler with the given set of flags.
+ * @param {string} outputFilename
+ * @param {!Object} options
+ * @param {Array<string>} flags
+ * @param {Array<string>} srcFiles
+ * @return {Promise<void>}
  */
-function makeSourcemapsRelative(closureStream) {
-  const relativeSourceMap = sourcemaps.mapSources((source, file) => {
-    const dir = path.dirname(file.sourceMap.file);
-    return path.relative(dir, source);
+function runClosure(outputFilename, options, flags, srcFiles) {
+  return new Promise((resolve, reject) => {
+    vinylFs
+      .src(srcFiles, {base: getBabelOutputDir()})
+      .pipe(initializeClosure(flags, options))
+      .on('error', (err) => {
+        const reason = handleClosureCompilerError(err, outputFilename, options);
+        reason ? reject(reason) : resolve();
+      })
+      .on('end', resolve)
+      .pipe(vinylFs.dest('.'));
   });
-
-  return pumpify.obj(relativeSourceMap, closureStream);
-}
-
-/**
- * @param {Array<string>} compilerOptions
- * @param {?string} nailgunPort
- * @return {stream.Writable}
- */
-function gulpClosureCompile(compilerOptions, nailgunPort) {
-  const initOptions = {
-    extraArguments: ['-XX:+TieredCompilation'], // Significant speed up!
-  };
-  const pluginOptions = {
-    platform: ['java'], // Override the binary used by closure compiler
-    logger: (errors) => (compilerErrors = errors), // Capture compiler errors
-  };
-
-  // On Mac OS and Linux, speed up compilation using nailgun (unless the
-  // --disable_nailgun flag was passed in)
-  // See https://github.com/facebook/nailgun.
-  if (
-    !argv.disable_nailgun &&
-    (process.platform == 'darwin' || process.platform == 'linux')
-  ) {
-    compilerOptions = [
-      '--nailgun-port',
-      nailgunPort,
-      'org.ampproject.AmpCommandLineRunner',
-      '--',
-    ].concat(compilerOptions);
-    pluginOptions.platform = ['native']; // nailgun-runner isn't a java binary
-    initOptions.extraArguments = null; // Already part of nailgun-server
-  } else {
-    // For other platforms, or if nailgun is explicitly disabled, use AMP's
-    // custom runner.jar
-    closureCompiler.compiler.JAR_PATH = require.resolve(
-      `../runner/dist/${nailgunPort}/runner.jar`
-    );
-  }
-
-  return makeSourcemapsRelative(
-    closureCompiler.gulp(initOptions)(compilerOptions, pluginOptions)
-  );
 }
 
 module.exports = {
-  gulpClosureCompile,
-  handleCompilerError,
-  handleTypeCheckError,
+  logClosureCompilerError,
+  runClosure,
 };
diff --git a/build-system/compile/compile-wrappers.js b/build-system/compile/compile-wrappers.js
index 77275e2a5d794..209a11093f712 100644
--- a/build-system/compile/compile-wrappers.js
+++ b/build-system/compile/compile-wrappers.js
@@ -18,9 +18,15 @@ const {VERSION} = require('./internal-version');
 
 // If there is a sync JS error during initial load,
 // at least try to unhide the body.
+// If "AMP" is already an object then that means another runtime has already
+// been initialized and the current runtime must exit early. This can occur
+// if multiple AMP libraries are included in the html or when both the module
+// and nomodule runtimes execute in older browsers such as safari < 11.
 exports.mainBinary =
   'var global=self;self.AMP=self.AMP||[];' +
-  'try{(function(_){\n<%= contents %>})(AMP._=AMP._||{})}catch(e){' +
+  'try{(function(_){' +
+  'if(self.AMP&&!Array.isArray(self.AMP))return;' +
+  '\n<%= contents %>})(AMP._=AMP._||{})}catch(e){' +
   'setTimeout(function(){' +
   'var s=document.body.style;' +
   's.opacity=1;' +
@@ -28,27 +34,7 @@ exports.mainBinary =
   's.animation="none";' +
   's.WebkitAnimation="none;"},1000);throw e};';
 
-exports.extension = function (
-  name,
-  loadPriority,
-  intermediateDeps,
-  opt_splitMarker
-) {
-  opt_splitMarker = opt_splitMarker || '';
-
-  let deps = '';
-  if (intermediateDeps && intermediateDeps.length) {
-    deps = 'i:';
-    function quote(s) {
-      return `"${s}"`;
-    }
-    if (intermediateDeps.length == 1) {
-      deps += quote(intermediateDeps[0]);
-    } else {
-      deps += `[${intermediateDeps.map(quote).join(',')}]`;
-    }
-    deps += ',';
-  }
+exports.extension = function (name, version, latest, isModule, loadPriority) {
   let priority = '';
   if (loadPriority) {
     if (loadPriority != 'high') {
@@ -56,9 +42,12 @@ exports.extension = function (
     }
     priority = 'p:"high",';
   }
+  // Use a numeric value instead of boolean. "m" stands for "module"
+  const m = isModule ? 1 : 0;
   return (
-    `(self.AMP=self.AMP||[]).push({n:"${name}",${priority}${deps}` +
-    `v:"${VERSION}",f:(function(AMP,_){${opt_splitMarker}\n` +
+    `(self.AMP=self.AMP||[]).push({n:"${name}",ev:"${version}",l:${latest},` +
+    `${priority}` +
+    `v:"${VERSION}",m:${m},f:(function(AMP,_){\n` +
     '<%= contents %>\n})});'
   );
 };
diff --git a/build-system/compile/compile.js b/build-system/compile/compile.js
index f09d0a3887b89..5a64ba9f203b4 100644
--- a/build-system/compile/compile.js
+++ b/build-system/compile/compile.js
@@ -17,24 +17,16 @@
 const argv = require('minimist')(process.argv.slice(2));
 const del = require('del');
 const fs = require('fs-extra');
-const gap = require('gulp-append-prepend');
-const gulp = require('gulp');
-const gulpIf = require('gulp-if');
-const nop = require('gulp-nop');
-const pathModule = require('path');
-const rename = require('gulp-rename');
-const sourcemaps = require('gulp-sourcemaps');
-const {
-  gulpClosureCompile,
-  handleCompilerError,
-  handleTypeCheckError,
-} = require('./closure-compile');
+const globby = require('globby');
+const path = require('path');
 const {checkForUnknownDeps} = require('./check-for-unknown-deps');
-const {checkTypesNailgunPort, distNailgunPort} = require('../tasks/nailgun');
 const {CLOSURE_SRC_GLOBS} = require('./sources');
-const {isTravisBuild} = require('../common/travis');
+const {cpus} = require('os');
+const {cyan, green} = require('../common/colors');
+const {log, logLocalDev} = require('../common/logging');
 const {postClosureBabel} = require('./post-closure-babel');
-const {preClosureBabel, handlePreClosureError} = require('./pre-closure-babel');
+const {preClosureBabel} = require('./pre-closure-babel');
+const {runClosure} = require('./closure-compile');
 const {sanitize} = require('./sanitize');
 const {VERSION: internalRuntimeVersion} = require('./internal-version');
 const {writeSourcemaps} = require('./helpers');
@@ -42,26 +34,54 @@ const {writeSourcemaps} = require('./helpers');
 const queue = [];
 let inProgress = 0;
 
-// There's a race in the gulp plugin of closure compiler that gets exposed
-// during various local development scenarios.
-// See https://github.com/google/closure-compiler-npm/issues/9
-const MAX_PARALLEL_CLOSURE_INVOCATIONS = isTravisBuild()
-  ? 2
-  : parseInt(argv.closure_concurrency, 10) || 1;
+const MAX_PARALLEL_CLOSURE_INVOCATIONS =
+  parseInt(argv.closure_concurrency, 10) || cpus().length;
 
-// Compiles AMP with the closure compiler. This is intended only for
-// production use. During development we intend to continue using
-// babel, as it has much faster incremental compilation.
-exports.closureCompile = async function (
+/**
+ * @typedef {{
+ *  esmPassCompilation?: string,
+ *  wrapper?: string,
+ *  extraGlobs?: string,
+ *  include3pDirectories?: boolean,
+ *  includePolyfills?: boolean,
+ *  externs?: string[],
+ *  compilationLevel?: string,
+ *  verboseLogging?: boolean,
+ *  typeCheckOnly?: boolean,
+ *  skipUnknownDepsCheck?: boolean,
+ *  warningLevel?: boolean,
+ *  noAddDeps?: boolean,
+ *  continueOnError?: boolean,
+ *  errored?: boolean,
+ * }}
+ */
+let OptionsDef;
+
+/**
+ * Compiles AMP with the closure compiler. This is intended only for
+ * production use. During development we intend to continue using
+ * babel, as it has much faster incremental compilation.
+ *
+ * @param {string|string[]} entryModuleFilename
+ * @param {string} outputDir
+ * @param {string} outputFilename
+ * @param {!OptionsDef} options
+ * @param {{startTime?: number}=} timeInfo
+ * @return {Promise<void>}
+ */
+async function closureCompile(
   entryModuleFilename,
   outputDir,
   outputFilename,
   options,
-  timeInfo
+  timeInfo = {}
 ) {
   // Rate limit closure compilation to MAX_PARALLEL_CLOSURE_INVOCATIONS
   // concurrent processes.
   return new Promise(function (resolve, reject) {
+    /**
+     * Kicks off the first closure invocation.
+     */
     function start() {
       inProgress++;
       compile(
@@ -79,6 +99,10 @@ exports.closureCompile = async function (
         (reason) => reject(reason)
       );
     }
+
+    /**
+     * Keeps track of the invocation count.
+     */
     function next() {
       if (!queue.length) {
         return;
@@ -90,8 +114,11 @@ exports.closureCompile = async function (
     queue.push(start);
     next();
   });
-};
+}
 
+/**
+ * Cleans up the placeholder directories for fake build modules.
+ */
 function cleanupBuildDir() {
   del.sync('build/fake-module');
   del.sync('build/patched-module');
@@ -100,30 +127,105 @@ function cleanupBuildDir() {
   fs.mkdirsSync('build/fake-module/src/polyfills/');
   fs.mkdirsSync('build/fake-polyfills/src/polyfills');
 }
-exports.cleanupBuildDir = cleanupBuildDir;
 
-function compile(
-  entryModuleFilenames,
-  outputDir,
-  outputFilename,
-  options,
-  timeInfo
-) {
-  function shouldAppendSourcemappingURLText(file) {
-    // Do not append sourceMappingURL if its a sourcemap
-    return (
-      pathModule.extname(file.path) !== '.map' && options.esmPassCompilation
+/**
+ * Generates a list of source files based on various factors.
+ * TODO(wg-infra, wg-performance): Clean up unnecessary files.
+ *
+ * @param {string[]} entryModuleFilenames
+ * @param {!OptionsDef} options
+ * @return {!Array<string>}
+ */
+function getSrcs(entryModuleFilenames, options) {
+  const unneededFiles = [
+    'build/fake-module/third_party/babel/custom-babel-helpers.js',
+  ];
+  const srcs = [...CLOSURE_SRC_GLOBS];
+  entryModuleFilenames.forEach((filename) => {
+    // For extensions, include all JS files in the extension directory.
+    // Note: The glob added to srcs must be a posix glob on all platforms.
+    if (filename.startsWith('extensions')) {
+      srcs.push(
+        filename
+          .replace(path.basename(filename), path.join('**', '*.js'))
+          .split(path.win32.sep)
+          .join(path.posix.sep)
+      );
+    }
+  });
+  if (options.extraGlobs) {
+    srcs.push.apply(srcs, options.extraGlobs);
+  }
+  if (options.include3pDirectories) {
+    srcs.push('3p/**/*.js', 'ads/**/*.js');
+  }
+  // Many files include the polyfills, but we only want to deliver them
+  // once. Since all files automatically wait for the main binary to load
+  // this works fine.
+  if (options.includePolyfills) {
+    srcs.push(
+      '!build/fake-module/src/polyfills/index.js',
+      '!build/fake-module/src/polyfills/**/*.js',
+      '!build/fake-polyfills/**/*.js'
     );
+  } else {
+    srcs.push('!src/polyfills/index.js', '!build/fake-polyfills/**/*.js');
+    unneededFiles.push('build/fake-module/src/polyfills/index.js');
+  }
+  // Negative globstars must come at the end.
+  srcs.push(
+    // Don't include rollup configs
+    '!**/rollup.config.js',
+    // Don't include tests.
+    '!**_test.js',
+    '!**/test-*.js',
+    '!**/test-e2e/*.js',
+    // Don't include externs.
+    '!**/*.extern.js'
+  );
+  unneededFiles.forEach(function (fake) {
+    if (!fs.existsSync(fake)) {
+      fs.writeFileSync(
+        fake,
+        '// Not needed in closure compiler\nexport function deadCode() {}'
+      );
+    }
+  });
+  return srcs;
+}
+
+/**
+ * Generates the set of options with which to invoke Closure compiler.
+ * TODO(wg-infra,wg-performance): Clean up unnecessary options.
+ *
+ * @param {string} outputFilename
+ * @param {!OptionsDef} options
+ * @return {!Object}
+ */
+function generateCompilerOptions(outputFilename, options) {
+  // Determine externs
+  let externs = options.externs || [];
+  if (!options.noAddDeps) {
+    externs = [
+      'third_party/web-animations-externs/web_animations.js',
+      'third_party/react-externs/externs.js',
+      'third_party/moment/moment.extern.js',
+      ...globby.sync('src/core{,/**}/*.extern.js'),
+      ...globby.sync('build-system/externs/*.extern.js'),
+      ...externs,
+    ];
   }
 
   const hideWarningsFor = [
     'third_party/amp-toolbox-cache-url/',
     'third_party/caja/',
     'third_party/closure-library/sha384-generated.js',
+    'third_party/closure-responding-channel',
     'third_party/d3/',
     'third_party/inputmask/',
     'third_party/mustache/',
     'third_party/react-dates/',
+    'third_party/resize-observer-polyfill/',
     'third_party/set-dom/',
     'third_party/subscriptions-project/',
     'third_party/vega/',
@@ -131,252 +233,243 @@ function compile(
     'node_modules/',
     'build/patched-module/',
   ];
-  const baseExterns = [
-    'build-system/externs/amp.extern.js',
-    'build-system/externs/dompurify.extern.js',
-    'build-system/externs/layout-jank.extern.js',
-    'build-system/externs/performance-observer.extern.js',
-    'third_party/web-animations-externs/web_animations.js',
-    'third_party/moment/moment.extern.js',
-    'third_party/react-externs/externs.js',
-    'build-system/externs/preact.extern.js',
-  ];
-  const define = [`VERSION=${internalRuntimeVersion}`];
+  const define = [`VERSION=${internalRuntimeVersion}`, 'AMP_MODE=true'];
   if (argv.pseudo_names) {
     define.push('PSEUDO_NAMES=true');
   }
+  let wrapper = options.wrapper
+    ? options.wrapper.replace('<%= contents %>', '%output%')
+    : `(function(){%output%})();`;
+  wrapper = `${wrapper}\n\n//# sourceMappingURL=${outputFilename}.map`;
 
-  return new Promise(function (resolve, reject) {
-    if (!(entryModuleFilenames instanceof Array)) {
-      entryModuleFilenames = [entryModuleFilenames];
-    }
-    const unneededFiles = [
-      'build/fake-module/third_party/babel/custom-babel-helpers.js',
-    ];
-    let wrapper = '(function(){%output%})();';
-    if (options.wrapper) {
-      wrapper = options.wrapper.replace('<%= contents %>', '%output%');
-    }
-    const srcs = [...CLOSURE_SRC_GLOBS];
-    // Add needed path for extensions.
-    // Instead of globbing all extensions, this will only add the actual
-    // extension path for much quicker build times.
-    entryModuleFilenames.forEach(function (filename) {
-      if (!filename.includes('extensions/')) {
-        return;
-      }
-      const path = filename.replace(/\/[^/]+\.js$/, '/**/*.js');
-      srcs.push(path);
-    });
-    if (options.extraGlobs) {
-      srcs.push.apply(srcs, options.extraGlobs);
-    }
-    if (options.include3pDirectories) {
-      srcs.push('3p/**/*.js', 'ads/**/*.js');
-    }
-    // For ESM Builds, exclude ampdoc and ampshared css from inclusion.
-    // These styles are guaranteed to already be present on elgible documents.
-    if (options.esmPassCompilation) {
-      srcs.push('!build/ampdoc.css.js', '!build/ampshared.css.js');
-    }
-    // Many files include the polyfills, but we only want to deliver them
-    // once. Since all files automatically wait for the main binary to load
-    // this works fine.
-    if (options.includeOnlyESMLevelPolyfills) {
-      const polyfills = fs.readdirSync('src/polyfills');
-      const polyfillsShadowList = polyfills.filter((p) => {
-        // custom-elements polyfill must be included.
-        return p !== 'custom-elements.js';
-      });
-      srcs.push(
-        '!build/fake-module/src/polyfills.js',
-        '!build/fake-module/src/polyfills/**/*.js',
-        '!build/fake-polyfills/src/polyfills.js',
-        'src/polyfills/custom-elements.js',
-        'build/fake-polyfills/**/*.js'
-      );
-      polyfillsShadowList.forEach((polyfillFile) => {
-        srcs.push(`!src/polyfills/${polyfillFile}`);
-        fs.writeFileSync(
-          'build/fake-polyfills/src/polyfills/' + polyfillFile,
-          'export function install() {}'
-        );
-      });
-    } else if (options.includePolyfills) {
-      srcs.push(
-        '!build/fake-module/src/polyfills.js',
-        '!build/fake-module/src/polyfills/**/*.js',
-        '!build/fake-polyfills/**/*.js'
-      );
-    } else {
-      srcs.push('!src/polyfills.js', '!build/fake-polyfills/**/*.js');
-      unneededFiles.push('build/fake-module/src/polyfills.js');
-    }
-    // Negative globstars must come at the end.
-    srcs.push(
-      // Don't include rollup configs
-      '!**/rollup.config.js',
-      // Don't include tests.
-      '!**_test.js',
-      '!**/test-*.js',
-      '!**/test-e2e/*.js',
-      // Don't include externs.
-      '!**/*.extern.js'
-    );
-    unneededFiles.forEach(function (fake) {
-      if (!fs.existsSync(fake)) {
-        fs.writeFileSync(
-          fake,
-          '// Not needed in closure compiler\n' +
-            'export function deadCode() {}'
-        );
-      }
-    });
-
-    let externs = baseExterns;
-    if (options.externs) {
-      externs = externs.concat(options.externs);
-    }
-    externs.push('build-system/externs/amp.multipass.extern.js');
+  /**
+   * TODO(#28387) write a type for this.
+   * @type {Object}
+   */
+  /* eslint "google-camelcase/google-camelcase": 0*/
+  const compilerOptions = {
+    compilation_level: options.compilationLevel || 'SIMPLE_OPTIMIZATIONS',
+    // Turns on more optimizations.
+    assume_function_wrapper: true,
+    language_in: 'ECMASCRIPT_2020',
+    // Do not transpile down to ES5 if running with `--esm`, since we do
+    // limited transpilation in Babel.
+    language_out: argv.esm || argv.sxg ? 'NO_TRANSPILE' : 'ECMASCRIPT5_STRICT',
+    // We do not use the polyfills provided by closure compiler.
+    // If you need a polyfill. Manually include them in the
+    // respective top level polyfills/*.js files.
+    rewrite_polyfills: false,
+    externs,
+    js_module_root: [
+      // Do _not_ include 'node_modules/' in js_module_root with 'NODE'
+      // resolution or bad things will happen (#18600).
+      'build/patched-module/',
+      'build/fake-module/',
+      'build/fake-polyfills/',
+    ],
+    module_resolution: 'NODE',
+    package_json_entry_names: 'module,main',
+    process_common_js_modules: true,
+    // PRUNE strips all files from the input set that aren't explicitly
+    // required.
+    dependency_mode: options.noAddDeps ? 'SORT_ONLY' : 'PRUNE',
+    output_wrapper: wrapper,
+    source_map_include_content: !!argv.full_sourcemaps,
+    // These arrays are filled in below.
+    jscomp_error: [],
+    jscomp_warning: [],
+    jscomp_off: [],
+    define,
+    hide_warnings_for: hideWarningsFor,
+    // TODO(amphtml): Change 'QUIET' to 'DEFAULT'.
+    warning_level: argv.warning_level ?? options.warningLevel ?? 'QUIET',
+    extra_annotation_name: ['visibleForTesting', 'restricted'],
+  };
+  if (argv.pseudo_names) {
+    // Some optimizations get turned off when pseudo_names is on.
+    // This causes some errors caused by the babel transformations
+    // that we apply like unreachable code because we turn a conditional
+    // falsey. (ex. is IS_FORTESTING transformation which causes some conditionals
+    // to be unreachable/suspicious code since the whole expression is
+    // falsey)
+    compilerOptions.jscomp_off.push('uselessCode', 'externsValidation');
+  }
+  if (argv.pretty_print) {
+    compilerOptions.formatting = 'PRETTY_PRINT';
+  }
 
-    /* eslint "google-camelcase/google-camelcase": 0*/
-    const compilerOptions = {
-      compilation_level: options.compilationLevel || 'SIMPLE_OPTIMIZATIONS',
-      // Turns on more optimizations.
-      assume_function_wrapper: true,
-      language_in: 'ECMASCRIPT_2020',
-      // Do not transpile down to ES5 if running with `--esm`, since we do
-      // limited transpilation in Babel.
-      language_out: argv.esm ? 'NO_TRANSPILE' : 'ECMASCRIPT5',
-      // We do not use the polyfills provided by closure compiler.
-      // If you need a polyfill. Manually include them in the
-      // respective top level polyfills.js files.
-      rewrite_polyfills: false,
-      externs,
-      js_module_root: [
-        // Do _not_ include 'node_modules/' in js_module_root with 'NODE'
-        // resolution or bad things will happen (#18600).
-        'build/patched-module/',
-        'build/fake-module/',
-        'build/fake-polyfills/',
-      ],
-      entry_point: entryModuleFilenames,
-      module_resolution: 'NODE',
-      package_json_entry_names: 'module,main',
-      process_common_js_modules: true,
-      // This strips all files from the input set that aren't explicitly
-      // required.
-      dependency_mode: 'PRUNE',
-      output_wrapper: wrapper,
-      source_map_include_content: !!argv.full_sourcemaps,
-      warning_level: options.verboseLogging ? 'VERBOSE' : 'DEFAULT',
-      // These arrays are filled in below.
-      jscomp_error: [],
-      jscomp_warning: [],
-      jscomp_off: [],
-      define,
-      hide_warnings_for: hideWarningsFor,
-    };
-    if (argv.pseudo_names) {
-      // Some optimizations get turned off when pseudo_names is on.
-      // This causes some errors caused by the babel transformations
-      // that we apply like unreachable code because we turn a conditional
-      // falsey. (ex. is IS_DEV transformation which causes some conditionals
-      // to be unreachable/suspicious code since the whole expression is
-      // falsey)
-      compilerOptions.jscomp_off.push('uselessCode', 'externsValidation');
-    }
-    if (argv.pretty_print) {
-      compilerOptions.formatting = 'PRETTY_PRINT';
-    }
+  // See https://github.com/google/closure-compiler/wiki/Warnings#warnings-categories
+  // for a full list of closure's default error / warning levels.
+  // NOTE: We do not use jscomp_warning because they are silenced by closure
+  // unless there are accompanying errors. Pick a side and use either one of
+  // jscomp_error or jscomp_off.
+  if (options.typeCheckOnly) {
+    compilerOptions.checks_only = true;
+    // Note: compilation_level is SIMPLE_OPTIMIZATIONS during type checking.
+    // Making it WHITESPACE_ONLY will disable type-checking, so don't do that.
+    compilerOptions.define.push('TYPECHECK_ONLY=true');
+    // These aren't type-check errors by default, but should be.
+    compilerOptions.jscomp_error.push(
+      'accessControls',
+      'checkDebuggerStatement',
+      'conformanceViolations',
+      'checkTypes',
+      'const',
+      'constantProperty',
+      'globalThis',
+      'misplacedTypeAnnotation',
+      'missingProperties',
+      'strictMissingProperties',
+      'visibility'
+    );
+    // These are type-check errors / warnings by default, but cannot be.
+    compilerOptions.jscomp_off.push(
+      'moduleLoad', // Breaks type-only modules: google/closure-compiler#3041
+      'unknownDefines' // Closure complains about VERSION
+    );
+    compilerOptions.conformance_configs =
+      'build-system/test-configs/conformance-config.textproto';
+  } else {
+    // These aren't compilation errors by default, but should be.
+    compilerOptions.jscomp_error.push(
+      'missingProperties',
+      'strictMissingProperties',
+      'visibility'
+    );
+    // Thse are compilation errors / warnings by default, but cannot be.
+    compilerOptions.jscomp_off.push(
+      'accessControls', // Silences spurious JSC_BAD_PRIVATE_GLOBAL_ACCESS
+      'moduleLoad', // Breaks type-only modules: google/closure-compiler#3041
+      'unknownDefines' // Closure complains about VERSION
+    );
+  }
 
-    // See https://github.com/google/closure-compiler/wiki/Warnings#warnings-categories
-    // for a full list of closure's default error / warning levels.
-    if (options.typeCheckOnly) {
-      compilerOptions.checks_only = true;
+  if (compilerOptions.define.length == 0) {
+    delete compilerOptions.define;
+  }
+  return compilerOptions;
+}
 
-      // Don't modify compilation_level to a lower level since
-      // it won't do strict type checking if its whitespace only.
-      compilerOptions.define.push('TYPECHECK_ONLY=true');
-      compilerOptions.jscomp_error.push(
-        'accessControls',
-        'conformanceViolations',
-        'checkTypes',
-        'const',
-        'constantProperty',
-        'globalThis',
-        'misplacedTypeAnnotation'
-      );
-      compilerOptions.jscomp_off.push('moduleLoad', 'unknownDefines');
-      compilerOptions.conformance_configs =
-        'build-system/test-configs/conformance-config.textproto';
+/**
+ * Generates the full set of flags with which to invoke closure compiler.
+ *
+ * @param {!OptionsDef} options
+ * @param {!Object} compilerOptions
+ * @param {!Array<string>} entryModuleFilenames
+ * @param {string} destFile
+ * @param {string} sourcemapFile
+ * @return {!Array<string>}
+ */
+function generateFlags(
+  options,
+  compilerOptions,
+  entryModuleFilenames,
+  destFile,
+  sourcemapFile
+) {
+  const compilerFlags = [];
+  Object.keys(compilerOptions).forEach(function (option) {
+    const value = compilerOptions[option];
+    if (Array.isArray(value)) {
+      value.forEach(function (item) {
+        compilerFlags.push('--' + option + '=' + item);
+      });
     } else {
-      compilerOptions.jscomp_warning.push('accessControls', 'moduleLoad');
-      compilerOptions.jscomp_off.push('unknownDefines');
-    }
-
-    if (compilerOptions.define.length == 0) {
-      delete compilerOptions.define;
-    }
-
-    const compilerOptionsArray = [];
-    Object.keys(compilerOptions).forEach(function (option) {
-      const value = compilerOptions[option];
-      if (value instanceof Array) {
-        value.forEach(function (item) {
-          compilerOptionsArray.push('--' + option + '=' + item);
-        });
+      if (value != null) {
+        compilerFlags.push('--' + option + '=' + value);
       } else {
-        if (value != null) {
-          compilerOptionsArray.push('--' + option + '=' + value);
-        } else {
-          compilerOptionsArray.push('--' + option);
-        }
+        compilerFlags.push('--' + option);
       }
-    });
-
-    if (options.typeCheckOnly) {
-      return gulp
-        .src(srcs, {base: '.'})
-        .pipe(sourcemaps.init())
-        .pipe(preClosureBabel())
-        .on('error', (err) => handlePreClosureError(err, outputFilename))
-        .pipe(gulpClosureCompile(compilerOptionsArray, checkTypesNailgunPort))
-        .on('error', (err) => handleTypeCheckError(err))
-        .pipe(nop())
-        .on('end', resolve);
-    } else {
-      timeInfo.startTime = Date.now();
-      return gulp
-        .src(srcs, {base: '.'})
-        .pipe(sourcemaps.init())
-        .pipe(preClosureBabel())
-        .on('error', (err) =>
-          handlePreClosureError(err, outputFilename, options, resolve)
-        )
-        .pipe(gulpClosureCompile(compilerOptionsArray, distNailgunPort))
-        .on('error', (err) =>
-          handleCompilerError(err, outputFilename, options, resolve)
-        )
-        .pipe(rename(`${outputDir}/${outputFilename}`))
-        .pipe(
-          gulpIf(
-            !argv.pseudo_names && !options.skipUnknownDepsCheck,
-            checkForUnknownDeps()
-          )
-        )
-        .on('error', reject)
-        .pipe(
-          gulpIf(
-            shouldAppendSourcemappingURLText,
-            gap.appendText(`\n//# sourceMappingURL=${outputFilename}.map`)
-          )
-        )
-        .pipe(postClosureBabel())
-        .pipe(sanitize())
-        .pipe(writeSourcemaps(options))
-        .pipe(gulp.dest('.'))
-        .on('end', resolve);
     }
   });
+  const entryPointFlags = entryModuleFilenames.map(
+    (entryPoint) => `--entry_point=${entryPoint}`
+  );
+  compilerFlags.push(...entryPointFlags);
+  if (!options.typeCheckOnly) {
+    const outputFileFlag = `--js_output_file=${destFile}`;
+    const sourcemapFlag = `--create_source_map=${sourcemapFile}`;
+    compilerFlags.push(outputFileFlag, sourcemapFlag);
+  }
+  return compilerFlags;
+}
+
+/**
+ * @param {string[]|string} entryModuleFilenames
+ * @param {string} outputDir
+ * @param {string} outputFilename
+ * @param {!OptionsDef} options
+ * @param {{startTime?: number}} timeInfo
+ * @return {Promise<void>}
+ */
+async function compile(
+  entryModuleFilenames,
+  outputDir,
+  outputFilename,
+  options,
+  timeInfo
+) {
+  if (timeInfo) {
+    timeInfo.startTime = Date.now();
+  }
+  if (!Array.isArray(entryModuleFilenames)) {
+    entryModuleFilenames = [entryModuleFilenames];
+  }
+  const destFile = `${outputDir}/${outputFilename}`;
+  const sourcemapFile = `${destFile}.map`;
+  const compilerOptions = generateCompilerOptions(outputFilename, options);
+  const srcs = options.noAddDeps
+    ? entryModuleFilenames.concat(options.extraGlobs || [])
+    : getSrcs(entryModuleFilenames, options);
+  const transformedSrcFiles = await Promise.all(
+    globby
+      .sync(srcs)
+      .map((src) => preClosureBabel(src, outputFilename, options))
+  );
+  if (options.errored && options.continueOnError) {
+    return; // Watch build. Bail on transform errors.
+  }
+  const flags = generateFlags(
+    options,
+    compilerOptions,
+    entryModuleFilenames,
+    destFile,
+    sourcemapFile
+  );
+  await runClosure(outputFilename, options, flags, transformedSrcFiles);
+  if (options.errored && options.continueOnError) {
+    return; // Watch build. Bail on compilation errors.
+  }
+  if (!options.typeCheckOnly) {
+    if (!argv.pseudo_names && !options.skipUnknownDepsCheck) {
+      await checkForUnknownDeps(destFile);
+    }
+    await postClosureBabel(destFile);
+    await sanitize(destFile);
+    await writeSourcemaps(sourcemapFile, options);
+  }
+}
+
+/**
+ * Indicates the current closure concurrency and how to override it.
+ */
+function printClosureConcurrency() {
+  log(
+    green('Using up to'),
+    cyan(MAX_PARALLEL_CLOSURE_INVOCATIONS.toString()),
+    green('concurrent invocations of closure compiler.')
+  );
+  if (!argv.closure_concurrency) {
+    logLocalDev(
+      green('⤷ Use'),
+      cyan('--closure_concurrency=N'),
+      green('to change this number.')
+    );
+  }
 }
+
+module.exports = {
+  cleanupBuildDir,
+  closureCompile,
+  printClosureConcurrency,
+};
diff --git a/build-system/compile/debug-compilation-lifecycle.js b/build-system/compile/debug-compilation-lifecycle.js
index b00554c6419fa..b4bd8191ee686 100644
--- a/build-system/compile/debug-compilation-lifecycle.js
+++ b/build-system/compile/debug-compilation-lifecycle.js
@@ -15,11 +15,11 @@
  */
 'use strict';
 const argv = require('minimist')(process.argv.slice(2));
-const colors = require('ansi-colors');
 const fs = require('fs');
-const log = require('fancy-log');
 const path = require('path');
 const tempy = require('tempy');
+const {cyan, red} = require('../common/colors');
+const {log} = require('../common/logging');
 
 const logFile = path.resolve(process.cwd(), 'dist', 'debug-compilation.log');
 
@@ -30,6 +30,7 @@ const pad = (value, length) =>
 
 const LIFECYCLES = {
   'pre-babel': 'pre-babel',
+  'post-babel': 'post-babel',
   'pre-closure': 'pre-closure',
   'closured-pre-babel': 'closured-pre-babel',
   'closured-pre-terser': 'closured-pre-terser',
@@ -41,11 +42,18 @@ const LIFECYCLES = {
  *
  * @param {string} lifecycle
  * @param {string} fullpath
- * @param {Buffer} content
- * @param {Object} sourcemap
+ * @param {?string=} content
+ * @param {Object=} sourcemap
  */
 function debug(lifecycle, fullpath, content, sourcemap) {
   if (argv.debug && Object.keys(LIFECYCLES).includes(lifecycle)) {
+    if (!content) {
+      content = fs.readFileSync(fullpath, 'utf-8');
+    }
+    const sourcemapPath = `${fullpath}.map`;
+    if (!sourcemap && fs.existsSync(sourcemapPath)) {
+      sourcemap = fs.readFileSync(sourcemapPath, 'utf-8');
+    }
     const contentsPath = tempy.writeSync(content);
     if (sourcemap) {
       fs.writeFileSync(
@@ -55,17 +63,17 @@ function debug(lifecycle, fullpath, content, sourcemap) {
     }
     fs.appendFileSync(
       logFile,
-      `${pad(lifecycle, 20)}: ${pad(
-        path.basename(fullpath),
-        30
-      )} ${contentsPath}\n`
+      `${pad(lifecycle, 20)}: ${pad(fullpath, 100)} ${contentsPath}\n`
     );
   }
 }
 
+/**
+ * Logs debug information.
+ */
 function displayLifecycleDebugging() {
   if (argv.debug) {
-    log(colors.white('Debug Lifecycles: ') + colors.red(logFile));
+    log(cyan('Debug Lifecycles: ') + red(logFile));
   }
 }
 
diff --git a/build-system/compile/helpers.js b/build-system/compile/helpers.js
index a0b0b9a09c228..2ac23bfe54028 100644
--- a/build-system/compile/helpers.js
+++ b/build-system/compile/helpers.js
@@ -15,16 +15,21 @@
  */
 'use strict';
 
-const minimist = require('minimist');
-const sourcemaps = require('gulp-sourcemaps');
+const argv = require('minimist')(process.argv.slice(2));
+const fs = require('fs-extra');
+const path = require('path');
+const {getBabelOutputDir} = require('./pre-closure-babel');
 const {VERSION: internalRuntimeVersion} = require('./internal-version');
 
-const argv = minimist(process.argv.slice(2));
-
+/**
+ * Computes the base url for sourcemaps. Custom sourcemap URLs have placeholder
+ * {version} that should be replaced with the actual version. Also, ensures
+ * that a trailing slash exists.
+ * @param {Object} options
+ * @return {string}
+ */
 function getSourceMapBase(options) {
   if (argv.sourcemap_url) {
-    // Custom sourcemap URLs have placeholder {version} that should be
-    // replaced with the actual version. Also, ensure trailing slash exists.
     return String(argv.sourcemap_url)
       .replace(/\{version\}/g, internalRuntimeVersion)
       .replace(/([^/])$/, '$1/');
@@ -35,11 +40,36 @@ function getSourceMapBase(options) {
   return `https://raw.githubusercontent.com/ampproject/amphtml/${internalRuntimeVersion}/`;
 }
 
-function writeSourcemaps(options) {
-  return sourcemaps.write('.', {
+/**
+ * Updates all filepaths in the sourcemap output.
+ * @param {Object} sourcemaps
+ */
+function updatePaths(sourcemaps) {
+  const babelOutputDir = getBabelOutputDir();
+  sourcemaps.sources = sourcemaps.sources.map((source) =>
+    source.startsWith(babelOutputDir)
+      ? path.relative(babelOutputDir, source)
+      : source
+  );
+  if (sourcemaps.file) {
+    sourcemaps.file = path.basename(sourcemaps.file);
+  }
+}
+
+/**
+ * Writes the sourcemap output to disk.
+ * @param {string} sourcemapsFile
+ * @param {Object} options
+ * @return {Promise<void>}
+ */
+async function writeSourcemaps(sourcemapsFile, options) {
+  const sourcemaps = await fs.readJson(sourcemapsFile);
+  updatePaths(sourcemaps);
+  const extra = {
     sourceRoot: getSourceMapBase(options),
     includeContent: !!argv.full_sourcemaps,
-  });
+  };
+  await fs.writeJSON(sourcemapsFile, {...sourcemaps, ...extra});
 }
 
 module.exports = {
diff --git a/build-system/compile/internal-version.js b/build-system/compile/internal-version.js
index f5294d07e91e1..64f5a93edc5fa 100644
--- a/build-system/compile/internal-version.js
+++ b/build-system/compile/internal-version.js
@@ -16,7 +16,7 @@
 'use strict';
 
 const minimist = require('minimist');
-const {gitCherryMaster, gitCommitFormattedTime} = require('../common/git');
+const {gitCherryMain, gitCommitFormattedTime} = require('../common/git');
 
 // Allow leading zeros in --version_override, e.g. 0000000000001
 const argv = minimist(process.argv.slice(2), {
@@ -27,17 +27,16 @@ const argv = minimist(process.argv.slice(2), {
  * Generates the AMP version number.
  *
  * Version numbers are determined using the following algorithm:
- * - Count the number (<X>) of cherry-picked commits on this branch that came
- *   from the `master` branch, until reaching `master` or the first commit that
- *   was added directly on this branch (if the current commit is on `master`'s
- *   commit history, or only contains new commits that are not cherry-picked
- *   from `master`, then <X> is 0).
+ * - Count the number (<X>) of cherry-picked commits on this branch, including
+ *   commits not on the main branch . If this branch only contains new commits
+ *   that are not cherry-picked, then <X> is 0).
  * - Find the commit (<C>) before the last cherry-picked commit from the
- *   `master` branch (if the current branch is `master`, or otherwise in
- *   `master`'s commit history, then the current commit is <C>).
+ *   main branch (if the current branch is the main branch, or otherwise in
+ *   its commit history, then the current commit is <C>).
  * - Find the commit time of <C> (<C>.time). Note that commit time might be
  *   different from author time! e.g., commit time might be the time that a PR
- *   was merged into `master`, or a commit was cherry-picked onto the branch;
+ *   was merged into the main branch, or a commit was cherry-picked onto the
+ *   branch;
  *   author time is when the original author of the commit ran the "git commit"
  *   command.
  * - The version number is <C>.time.format("YYmmDDHHMM", "UTC") + <X> (the
@@ -47,34 +46,34 @@ const argv = minimist(process.argv.slice(2), {
  *     that will fail to build. This should never happen.
  *
  * Examples:
- * 1. The version number of a release built from the HEAD commit on `master`,
- *    where that HEAD commit was committed on April 25, 2020 2:31 PM EDT would
- *    be `2004251831000`.
+ * 1. The version number of a release built from the HEAD commit on the main
+ *    branch, where that HEAD commit was committed on April 25, 2020 2:31 PM EDT
+ *    would be `2004251831000`.
  *    - EDT is UTC-4, so the hour value changes from EDT's 14 to UTC's 18.
- *    - The last three digits are 000 as this commit is on `master`.
+ *    - The last three digits are 000 as this commit is on the main branch.
  *
  * 2. The version number of a release built from a local working branch (e.g.,
- *    on a developer's workstation) that was split off from a `master` commit
+ *    on a developer's workstation) that was split off from a main branch commit
  *    from May 6, 2021 10:40 AM PDT and has multiple commits that exist only on
  *    local working branch would be `2105061840000`.
  *    - PDT is UTC-7, so the hour value changes from PDT's 10 to UTC's 17.
  *    - The last three digits are 000 as this commit is on a branch that was
- *      split from `master`, and does not have any cherry-picked commits.
+ *      split from the main branch, and does not have any cherry-picked commits.
  *
  * 3. For a release built from a local working branch that was split off from a
- *    `master` commit from November 9, 2021 11:48 PM PST, and then:
- *    - had one commit that was cherry-picked from `master`,
+ *    main branch commit from November 9, 2021 11:48 PM PST, and then:
+ *    - had one commit that was cherry-picked from the main branch,
  *    - followed by two commits that were created directly on the branch, the
  *      last of which was commited on November 23, 2021 6:38 PM PST,
- *    - followed by twelve commits that were cherry-picked from `master`, then
- *      its version number would be `2111240238012`.
- *    - The latest twelve commits are cherry-picks from `master`, and the one
- *      before them is not, so our last three digits are set to 012.
+ *    - followed by twelve commits that were cherry-picked from the main branch,
+ *      then its version number would be `2111240238012`.
+ *    - The latest twelve commits are cherry-picks from the main branch, and the
+ *      one before them is not, so our last three digits are set to 012.
  *    - PST is UTC-8, so the hour value changes from PST's 18 to UTC's 2, and
  *      one day is added.
  *
  * The version number can be manually overridden by passing --version_override
- * to the `gulp build`/`gulp dist` command.
+ * to the `amp build`/`amp dist` command.
  *
  * @return {string} AMP version number (always 13 digits long)
  */
@@ -87,17 +86,12 @@ function getVersion() {
     return version;
   }
 
-  let numberOfCherryPicks = 0;
-  const commitCherriesInfo = gitCherryMaster().reverse();
-  for (const {isCherryPick} of commitCherriesInfo) {
-    if (!isCherryPick) {
-      break;
-    }
-    numberOfCherryPicks++;
-  }
+  const numberOfCherryPicks = gitCherryMain().length;
   if (numberOfCherryPicks > 999) {
     throw new Error(
-      `This branch has ${numberOfCherryPicks} cherry-picks, which is more than 999, the maximum allowed number of cherry-picks!`
+      `This branch has ${numberOfCherryPicks} cherry-picks, which is more ` +
+        'than 999, the maximum allowed number of cherry-picks! Please make ' +
+        'sure your local main branch is up to date.'
     );
   }
 
@@ -105,8 +99,8 @@ function getVersion() {
     `HEAD~${numberOfCherryPicks}`
   ).slice(0, -2);
 
-  numberOfCherryPicks = String(numberOfCherryPicks).padStart(3, '0');
-  return `${lastCommitFormattedTime}${numberOfCherryPicks}`;
+  const numberOfCherryPicksStr = String(numberOfCherryPicks).padStart(3, '0');
+  return `${lastCommitFormattedTime}${numberOfCherryPicksStr}`;
 }
 
 // Used to e.g. references the ads binary from the runtime to get version lock.
diff --git a/build-system/compile/log-messages.js b/build-system/compile/log-messages.js
index 670cedbebe555..92b49345691e7 100644
--- a/build-system/compile/log-messages.js
+++ b/build-system/compile/log-messages.js
@@ -15,8 +15,8 @@
  */
 const argv = require('minimist')(process.argv.slice(2));
 const fs = require('fs-extra');
-const log = require('fancy-log');
-const {cyan} = require('colors');
+const {cyan} = require('../common/colors');
+const {log} = require('../common/logging');
 
 const pathPrefix = 'dist/log-messages';
 
@@ -37,7 +37,8 @@ const formats = {
 };
 
 /** @return {!Promise<!Array<!Object>>} */
-const extractedItems = () => fs.readJson(extractedPath).then(Object.values);
+const extractedItems = async () =>
+  fs.readJson(extractedPath).then(Object.values);
 
 /**
  * Format extracted messages table in multiple outputs, keyed by id.
diff --git a/build-system/compile/post-closure-babel.js b/build-system/compile/post-closure-babel.js
index e01c34154482b..519d320d4e1ed 100644
--- a/build-system/compile/post-closure-babel.js
+++ b/build-system/compile/post-closure-babel.js
@@ -16,20 +16,27 @@
 'use strict';
 const argv = require('minimist')(process.argv.slice(2));
 const babel = require('@babel/core');
+const fs = require('fs-extra');
 const path = require('path');
-const remapping = require('@ampproject/remapping');
+const Remapping = require('@ampproject/remapping');
 const terser = require('terser');
-const through = require('through2');
-const {debug, CompilationLifecycles} = require('./debug-compilation-lifecycle');
+const {CompilationLifecycles, debug} = require('./debug-compilation-lifecycle');
+const {jsBundles} = require('./bundles.config.js');
+
+/** @type {Remapping.default} */
+const remapping = /** @type {*} */ (Remapping);
+
+let mainBundles;
 
 /**
  * Minify passed string.
  *
  * @param {string} code
- * @return {Object<string, string>}
+ * @param {string} filename
+ * @return {Promise<Object<string, terser.SourceMapOptions['content']>>}
  */
-function terserMinify(code) {
-  const minified = terser.minify(code, {
+async function terserMinify(code, filename) {
+  const options = {
     mangle: false,
     compress: {
       defaults: false,
@@ -42,7 +49,21 @@ function terserMinify(code) {
       keep_quoted_props: true,
     },
     sourceMap: true,
-  });
+  };
+  const basename = path.basename(filename, argv.esm ? '.mjs' : '.js');
+  if (!mainBundles) {
+    mainBundles = Object.keys(jsBundles).map((key) => {
+      const bundle = jsBundles[key];
+      if (bundle.options && bundle.options.minifiedName) {
+        return path.basename(bundle.options.minifiedName, '.js');
+      }
+      return path.basename(key, '.js');
+    });
+  }
+  if (mainBundles.includes(basename)) {
+    options.output.preamble = ';';
+  }
+  const minified = await terser.minify(code, options);
 
   return {
     compressed: minified.code,
@@ -53,55 +74,43 @@ function terserMinify(code) {
 /**
  * Apply Babel Transforms on output from Closure Compuler, then cleanup added
  * space with Terser. Used only in esm mode.
- *
- * @return {!Promise}
+ * @param {string} file
+ * @return {Promise<void>}
  */
-exports.postClosureBabel = function () {
-  return through.obj(function (file, enc, next) {
-    if (!argv.esm || path.extname(file.path) === '.map') {
-      debug(
-        CompilationLifecycles['complete'],
-        file.path,
-        file.contents,
-        file.sourceMap
-      );
-      return next(null, file);
-    }
+async function postClosureBabel(file) {
+  if ((!argv.esm && !argv.sxg) || path.extname(file) === '.map') {
+    debug(CompilationLifecycles['complete'], file);
+    return;
+  }
 
-    const map = file.sourceMap;
+  debug(CompilationLifecycles['closured-pre-babel'], file);
+  /** @type {?babel.TransformOptions} */
+  const babelOptions = babel.loadOptions({caller: {name: 'post-closure'}});
+  const {code, map: babelMap} =
+    (await babel.transformFileAsync(file, babelOptions ?? undefined)) || {};
+  if (!code || !babelMap) {
+    throw new Error(`Error transforming contents of ${file}`);
+  }
 
-    debug(
-      CompilationLifecycles['closured-pre-babel'],
-      file.path,
-      file.contents,
-      file.sourceMap
-    );
-    const {code, map: babelMap} = babel.transformSync(file.contents, {
-      caller: {name: 'post-closure'},
-    });
-
-    debug(
-      CompilationLifecycles['closured-pre-terser'],
-      file.path,
-      file.contents,
-      file.sourceMap
-    );
-    const {compressed, terserMap} = terserMinify(code);
+  debug(CompilationLifecycles['closured-pre-terser'], file, code, babelMap);
+  const {compressed, terserMap} = await terserMinify(code, path.basename(file));
+  await fs.outputFile(file, compressed);
 
-    file.contents = Buffer.from(compressed, 'utf-8');
-    file.sourceMap = remapping(
-      [terserMap, babelMap, map],
-      () => null,
-      !argv.full_sourcemaps
-    );
-
-    debug(
-      CompilationLifecycles['complete'],
-      file.path,
-      file.contents,
-      file.sourceMap
-    );
+  const closureMap = await fs.readJson(`${file}.map`, 'utf-8');
+  const sourceMap = remapping(
+    [terserMap, babelMap, closureMap],
+    () => null,
+    !argv.full_sourcemaps
+  );
+  debug(
+    CompilationLifecycles['complete'],
+    file,
+    compressed?.toString(),
+    sourceMap
+  );
+  await fs.writeJson(`${file}.map`, sourceMap);
+}
 
-    return next(null, file);
-  });
+module.exports = {
+  postClosureBabel,
 };
diff --git a/build-system/compile/pre-closure-babel.js b/build-system/compile/pre-closure-babel.js
index ddbc953b947d9..6f385e1762094 100644
--- a/build-system/compile/pre-closure-babel.js
+++ b/build-system/compile/pre-closure-babel.js
@@ -15,139 +15,144 @@
  */
 'use strict';
 
-const crypto = require('crypto');
+const babel = require('@babel/core');
+const fs = require('fs-extra');
 const globby = require('globby');
-const gulpBabel = require('gulp-babel');
-const log = require('fancy-log');
-const through = require('through2');
-const {BABEL_SRC_GLOBS, THIRD_PARTY_TRANSFORM_GLOBS} = require('./sources');
-const {debug, CompilationLifecycles} = require('./debug-compilation-lifecycle');
-const {EventEmitter} = require('events');
-const {red, cyan} = require('ansi-colors');
+const path = require('path');
+const tempy = require('tempy');
+const {BABEL_SRC_GLOBS} = require('./sources');
+const {CompilationLifecycles, debug} = require('./debug-compilation-lifecycle');
+const {cyan, red} = require('../common/colors');
+const {log} = require('../common/logging');
+const {TransformCache, batchedRead, md5} = require('../common/transform-cache');
 
 /**
  * Files on which to run pre-closure babel transforms.
  *
  * @private @const {!Array<string>}
  */
-const filesToTransform = getFilesToTransform();
+let filesToTransform;
 
 /**
- * Used to cache babel transforms.
+ * Directory used to output babel transformed files for closure compilation.
  *
- * @private @const {!Object<string, string>}
+ * @private @const {string}
  */
-const cache = Object.create(null);
+let outputDir;
 
 /**
- * Computes the set of files on which to run pre-closure babel transforms.
+ * Used to cache pre-closure babel transforms.
  *
- * @return {!Array<string>}
+ * @const {TransformCache}
  */
-function getFilesToTransform() {
-  return globby
-    .sync([...BABEL_SRC_GLOBS, '!node_modules/', '!third_party/'])
-    .concat(globby.sync(THIRD_PARTY_TRANSFORM_GLOBS));
-}
+let transformCache;
 
 /**
- * @param {!Buffer} contents
+ * Returns the name of the babel output directory if it has been created.
+ *
  * @return {string}
  */
-function sha256(contents) {
-  const hash = crypto.createHash('sha256');
-  hash.update(contents);
-  return hash.digest('hex');
+function getBabelOutputDir() {
+  return outputDir || '';
 }
 
 /**
- * Apply babel transforms prior to closure compiler pass.
- *
- * When a source file is transformed for the first time, it is written to an
- * in-memory cache from where it is retrieved every subsequent time without
- * invoking babel.
+ * Computes the set of files on which to run pre-closure babel transforms.
  *
- * @return {!Promise}
+ * @return {!Array<string>}
  */
-function preClosureBabel() {
-  const babel = gulpBabel({caller: {name: 'pre-closure'}});
-
-  return through.obj((file, enc, next) => {
-    const {relative, path} = file;
-    if (!filesToTransform.includes(relative)) {
-      return next(null, file);
-    }
+function getFilesToTransform() {
+  return globby.sync([...BABEL_SRC_GLOBS, '!node_modules/', '!third_party/']);
+}
 
-    const hash = sha256(file.contents);
-    const cached = cache[path];
-    if (cached && cached.hash === hash) {
-      return next(null, cached.file.clone());
+/**
+ * Apply babel transforms prior to closure compiler pass, store the transformed
+ * file in an output directory (used by closure compiler), and return the path
+ * of the transformed file.
+ *
+ * When a source file is transformed for the first time, it is written to a
+ * persistent transform cache from where it is retrieved every subsequent time
+ * without invoking babel. A change to the file contents or to the invocation
+ * arguments will invalidate the cached result and re-transform the file.
+ *
+ * @param {string} file
+ * @param {string} outputFilename
+ * @param {!Object} options
+ * @return {Promise<string>}
+ */
+async function preClosureBabel(file, outputFilename, options) {
+  if (!outputDir) {
+    outputDir = tempy.directory();
+  }
+  if (!transformCache) {
+    transformCache = new TransformCache('.pre-closure-cache', '.js');
+  }
+  if (!filesToTransform) {
+    filesToTransform = getFilesToTransform();
+  }
+  const transformedFile = path.join(outputDir, file);
+  if (!filesToTransform.includes(file)) {
+    if (!(await fs.exists(transformedFile))) {
+      await fs.copy(file, transformedFile);
     }
-
-    let data, err;
-    debug(
-      CompilationLifecycles['pre-babel'],
-      file.path,
-      file.contents,
-      file.sourceMap
+    return transformedFile;
+  }
+  try {
+    debug(CompilationLifecycles['pre-babel'], file);
+    const babelOptions =
+      babel.loadOptions({caller: {name: 'pre-closure'}}) || {};
+    const optionsHash = md5(
+      JSON.stringify({babelOptions, argv: process.argv.slice(2)})
     );
-    function onData(d) {
-      babel.off('error', onError);
-      data = d;
+    const {contents, hash} = await batchedRead(file, optionsHash);
+    const cachedPromise = transformCache.get(hash);
+    if (cachedPromise) {
+      if (!(await fs.exists(transformedFile))) {
+        await fs.outputFile(transformedFile, await cachedPromise);
+      }
+    } else {
+      const transformPromise = babel
+        .transformAsync(contents, {
+          ...babelOptions,
+          filename: file,
+          filenameRelative: path.basename(file),
+          sourceFileName: path.relative(process.cwd(), file),
+        })
+        .then((result) => result?.code);
+      transformCache.set(hash, transformPromise);
+      await fs.outputFile(transformedFile, await transformPromise);
+      debug(CompilationLifecycles['pre-closure'], transformedFile);
     }
-    function onError(e) {
-      babel.off('data', onData);
-      err = e;
+  } catch (err) {
+    const reason = handlePreClosureError(err, outputFilename, options);
+    if (reason) {
+      throw reason;
     }
-    babel.once('data', onData);
-    babel.once('error', onError);
-    babel.write(file, enc, () => {
-      if (err) {
-        return next(err);
-      }
-
-      debug(
-        CompilationLifecycles['pre-closure'],
-        file.path,
-        data.contents,
-        data.sourceMap
-      );
-      cache[path] = {
-        file: data,
-        hash,
-      };
-      next(null, data.clone());
-    });
-  });
+  }
+  return transformedFile;
 }
 
 /**
- * Handles a pre-closure babel error. Optionally doesn't emit a fatal error when
- * compilation fails and signals the error so subsequent operations can be
- * skipped (used in watch mode).
+ * Handles a pre-closure babel error. Returns an error when transformation fails
+ * except except in watch mode, where we want to print a message and continue.
  *
  * @param {Error} err
  * @param {string} outputFilename
- * @param {?Object} options
- * @param {?Function} resolve
+ * @param {?Object=} options
+ * @return {Error|undefined}
  */
-function handlePreClosureError(err, outputFilename, options, resolve) {
+function handlePreClosureError(err, outputFilename, options) {
   log(red('ERROR:'), err.message, '\n');
-  const reasonMessage = `Could not compile ${cyan(outputFilename)}`;
+  const reasonMessage = `Could not transform ${cyan(outputFilename)}`;
   if (options && options.continueOnError) {
     log(red('ERROR:'), reasonMessage);
     options.errored = true;
-    if (resolve) {
-      resolve();
-    }
-  } else {
-    const reason = new Error(reasonMessage);
-    reason.showStack = false;
-    new EventEmitter().emit('error', reason);
+    return;
   }
+  return new Error(reasonMessage);
 }
 
 module.exports = {
-  handlePreClosureError,
+  getBabelOutputDir,
   preClosureBabel,
 };
diff --git a/build-system/compile/sanitize.js b/build-system/compile/sanitize.js
index aa352b1999146..19dfe229d7271 100644
--- a/build-system/compile/sanitize.js
+++ b/build-system/compile/sanitize.js
@@ -14,45 +14,38 @@
  * limitations under the License.
  */
 'use strict';
-const prettier = require('prettier');
-const through = require('through2');
 
 const argv = require('minimist')(process.argv.slice(2));
+const fs = require('fs-extra');
+const prettier = require('prettier');
 
-exports.sanitize = function () {
-  return through.obj((file, enc, next) => {
-    if (!argv.sanitize_vars_for_diff) {
-      return next(null, file);
-    }
-
-    const contents = file.contents.toString();
-    prettier.resolveConfig(file.relative).then((options) => {
-      try {
-        // Normalize the length of all jscomp variables, so that prettier will
-        // format it the same.
-        const replaced = Object.create(null);
-        let count = 0;
-        const presanitize = contents.replace(
-          /(?:[a-zA-Z$_][a-zA-Z$_0-9]*)?(?:JSCompiler|jscomp)[a-zA-Z$_0-9]*/g,
-          (match) =>
-            replaced[match] ||
-            (replaced[match] = `___${String(count++).padStart(6, '0')}___`)
-        );
-
-        const formatted = prettier.format(presanitize, {
-          ...options,
-          parser: 'babel',
-        });
-
-        // Finally, strip the numbers from the sanitized jscomp variables. This
-        // is so that a single extra variable doesn't cause thousands of diffs.
-        const sanitized = formatted.replace(/___\d+___/g, '______');
+/**
+ * Sanitizes variable names in minified output to aid in debugging.
+ * 1. Normalizes the length of all jscomp variables, so that prettier will
+ *    format it the same.
+ * 2. Strips numbers from the sanitized jscomp variables so that a single extra
+ *    variable doesn't cause thousands of diffs.
+ * @param {string} file
+ * @return {Promise<void>}
+ */
+async function sanitize(file) {
+  if (!argv.sanitize_vars_for_diff) {
+    return;
+  }
+  const contents = await fs.readFile(file, 'utf-8');
+  const config = await prettier.resolveConfig(file);
+  const options = {filepath: file, parser: 'babel', ...config};
+  const replaced = Object.create(null);
+  let count = 0;
+  const presanitize = contents.replace(
+    /(?:[a-zA-Z$_][a-zA-Z$_0-9]*)?(?:JSCompiler|jscomp)[a-zA-Z$_0-9]*/g,
+    (match) =>
+      replaced[match] ||
+      (replaced[match] = `___${String(count++).padStart(6, '0')}___`)
+  );
+  const formatted = prettier.format(presanitize, options);
+  const sanitized = formatted.replace(/___\d+___/g, '______');
+  await fs.outputFile(file, sanitized);
+}
 
-        file.contents = Buffer.from(sanitized);
-        next(null, file);
-      } catch (e) {
-        next(e);
-      }
-    }, next);
-  });
-};
+module.exports = {sanitize};
diff --git a/build-system/compile/sources.js b/build-system/compile/sources.js
index 626e32fd8dac8..6275e17d3d521 100644
--- a/build-system/compile/sources.js
+++ b/build-system/compile/sources.js
@@ -24,24 +24,33 @@ const COMMON_GLOBS = [
   'third_party/amp-toolbox-cache-url/**/*.js',
   'third_party/caja/html-sanitizer.js',
   'third_party/closure-library/sha384-generated.js',
+  'third_party/closure-responding-channel/closure-bundle.js',
   'third_party/css-escape/css-escape.js',
   'third_party/d3/**/*.js',
   'third_party/fuzzysearch/index.js',
   'third_party/inputmask/**/*.js',
   'third_party/mustache/**/*.js',
   'third_party/react-dates/bundle.js',
-  'third_party/optimized-svg-icons/social-share-svgs.js',
+  'third_party/resize-observer-polyfill/ResizeObserver.install.js',
   'third_party/set-dom/set-dom.js',
   'third_party/subscriptions-project/*.js',
   'third_party/timeagojs/**/*.js',
   'third_party/vega/**/*.js',
   'third_party/webcomponentsjs/ShadowCSS.js',
+  'third_party/zuho/**/*.js',
   'node_modules/dompurify/package.json',
   'node_modules/dompurify/dist/purify.es.js',
   'node_modules/intersection-observer/package.json',
   'node_modules/intersection-observer/intersection-observer.install.js',
+  'node_modules/resize-observer-polyfill/package.json',
+  'node_modules/resize-observer-polyfill/ResizeObserver.install.js',
+  'node_modules/obj-str/package.json',
+  'node_modules/obj-str/dist/obj-str.mjs',
   'node_modules/promise-pjs/package.json',
   'node_modules/promise-pjs/promise.mjs',
+  'node_modules/rrule/dist/es5/rrule.js',
+  'node_modules/timeago.js/package.json',
+  'node_modules/timeago.js/**/*.js',
   'node_modules/web-animations-js/package.json',
   'node_modules/web-animations-js/web-animations.install.js',
   'node_modules/web-activities/package.json',
@@ -53,11 +62,14 @@ const COMMON_GLOBS = [
   'node_modules/@ampproject/viewer-messaging/package.json',
   'node_modules/@ampproject/viewer-messaging/messaging.js',
   'node_modules/@ampproject/worker-dom/package.json',
-  'node_modules/@ampproject/worker-dom/dist/amp/main.mjs',
+  'node_modules/@ampproject/worker-dom/dist/amp-production/main.mjs',
   'node_modules/preact/package.json',
   'node_modules/preact/dist/*.js',
+  'node_modules/preact/dom/*.js',
   'node_modules/preact/hooks/package.json',
   'node_modules/preact/hooks/dist/*.js',
+  'node_modules/preact/compat/package.json',
+  'node_modules/preact/compat/dist/*.js',
 ];
 
 /**
@@ -102,6 +114,10 @@ const CLOSURE_SRC_GLOBS = [
   'extensions/amp-animation/**/*.js',
   // Needed for amp-carousel 0.2, amp-inline-gallery, amp-stream-gallery
   'extensions/amp-base-carousel/**/*.js',
+  // Needed for carousel autolightbox
+  'extensions/amp-lightbox-gallery/1.0/*.js',
+  // Needed for amp-lightbox-gallery using amp-lightbox
+  'extensions/amp-lightbox/1.0/*.js',
   // For amp-bind in the web worker (ww.js).
   'extensions/amp-bind/**/*.js',
   // Needed to access to Variant interface from other extensions
@@ -116,18 +132,22 @@ const CLOSURE_SRC_GLOBS = [
   'extensions/amp-access/**/*.js',
   // Needed for AmpStoryVariableService
   'extensions/amp-story/**/*.js',
+  // Needed for story ad inabox
+  'extensions/amp-story-auto-ads/**/*.js',
   // Needed for SubscriptionsService
   'extensions/amp-subscriptions/**/*.js',
   // Needed to access UserNotificationManager from other extensions
   'extensions/amp-user-notification/**/*.js',
-  // Needed for VideoService
-  'extensions/amp-video-service/**/*.js',
+  // Needed for video components in Bento.
+  'extensions/amp-video/1.0/**/*.js',
+  // amp-video-iframe 0.1 and 1.0 share this file.
+  'extensions/amp-video-iframe/amp-video-iframe-api.js',
+  // amp-vimeo 0.1 and 1.0 share this file.
+  'extensions/amp-vimeo/vimeo-api.js',
   // Needed to access ConsentPolicyManager from other extensions
   'extensions/amp-consent/**/*.js',
   // Needed to access AmpGeo type for service locator
   'extensions/amp-geo/**/*.js',
-  // Needed for AmpViewerAssistanceService
-  'extensions/amp-viewer-assistance/**/*.js',
   // Needed for amp-smartlinks dep on amp-skimlinks
   'extensions/amp-skimlinks/0.1/**/*.js',
   'src/*.js',
@@ -135,24 +155,15 @@ const CLOSURE_SRC_GLOBS = [
   '!third_party/babel/custom-babel-helpers.js',
   // Exclude since it's not part of the runtime/extension binaries.
   '!extensions/amp-access/0.1/amp-login-done.js',
-  'builtins/**.js',
+  'builtins/**/*.js',
   // 'node_modules/core-js/modules/**.js',
   // Not sure what these files are, but they seem to duplicate code
   // one level below and confuse the compiler.
   '!node_modules/core-js/modules/library/**.js',
+  '!extensions/**/dist/**/*.js',
 ].concat(COMMON_GLOBS);
 
-/**
- * NOTE: 3p code is generally excluded from the transform process.
- * The globs here are force-transformed anyway.
- */
-const THIRD_PARTY_TRANSFORM_GLOBS = [
-  // JSX syntax should undergo usual transforms
-  'third_party/optimized-svg-icons/social-share-svgs.js',
-];
-
 module.exports = {
   BABEL_SRC_GLOBS,
   CLOSURE_SRC_GLOBS,
-  THIRD_PARTY_TRANSFORM_GLOBS,
 };
diff --git a/build-system/compile/typescript.js b/build-system/compile/typescript.js
deleted file mode 100644
index 93c7a839cfd97..0000000000000
--- a/build-system/compile/typescript.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Copyright 2018 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 colors = require('ansi-colors');
-const fs = require('fs-extra');
-const log = require('fancy-log');
-const path = require('path');
-const ts = require('typescript');
-const tsickle = require('tsickle');
-const {endBuildStep} = require('../tasks/helpers');
-
-/**
- * Given a file path `foo/bar.js`, transpiles the TypeScript entry point of
- * the same name `foo/bar.ts` and all direct and indirect TypeScript imports.
- *
- * @param {string} srcDir
- * @param {string} srcFilename
- * @return {!Promise}
- */
-exports.transpileTs = function (srcDir, srcFilename) {
-  const startTime = Date.now();
-  const tsEntry = path.join(srcDir, srcFilename).replace(/\.js$/, '.ts');
-  const tsConfig = ts.convertCompilerOptionsFromJson(
-    {
-      'module': 'esnext',
-      'target': 'esnext',
-    },
-    srcDir
-  );
-  const tsOptions = tsConfig.options;
-  if (tsConfig.errors.length) {
-    log(colors.red('TSickle:'), tsickle.formatDiagnostics(tsConfig.errors));
-  }
-
-  const compilerHost = ts.createCompilerHost(tsOptions);
-  const program = ts.createProgram([tsEntry], tsOptions, compilerHost);
-
-  // TODO(choumx): This was partially copy-pasta'd from tsickle. Add a default
-  // to tsickle so this can be an optional param.
-  const pathToModuleName = (context, fileName) => {
-    fileName = fileName.replace(/\.js$/, '');
-    if (fileName[0] === '.') {
-      // './foo' or '../foo'.
-      // Resolve the path against the dirname of the current module.
-      fileName = path.join(path.dirname(context), fileName);
-    }
-    return fileName;
-  };
-  const transformerHost = {
-    host: compilerHost,
-    options: tsOptions,
-    pathToModuleName,
-    shouldSkipTsickleProcessing: () => false,
-    transformTypesToClosure: true,
-  };
-  return tsickle
-    .emitWithTsickle(
-      program,
-      transformerHost,
-      compilerHost,
-      tsOptions,
-      undefined,
-      (filePath, contents) => {
-        fs.writeFileSync(filePath, contents, {encoding: 'utf-8'});
-      }
-    )
-    .then((emitResult) => {
-      const diagnostics = ts
-        .getPreEmitDiagnostics(program)
-        .concat(emitResult.diagnostics);
-      if (diagnostics.length) {
-        log(colors.red('TSickle:'), tsickle.formatDiagnostics(diagnostics));
-      }
-      endBuildStep('Transpiled', srcFilename, startTime);
-    });
-};
diff --git a/build-system/eslint-rules/OWNERS b/build-system/eslint-rules/OWNERS
index 81b36bd711d79..eeccea4248aa8 100644
--- a/build-system/eslint-rules/OWNERS
+++ b/build-system/eslint-rules/OWNERS
@@ -1,12 +1,11 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [
         {name: 'ampproject/wg-infra'},
-        {name: 'ampproject/wg-runtime'},
         {name: 'ampproject/wg-performance'},
         {name: 'erwinmombay', notify: true},
         {name: 'jridgewell', notify: true},
diff --git a/build-system/eslint-rules/always-call-chai-methods.js b/build-system/eslint-rules/always-call-chai-methods.js
index 90247c8648b0b..41889a4badbc0 100644
--- a/build-system/eslint-rules/always-call-chai-methods.js
+++ b/build-system/eslint-rules/always-call-chai-methods.js
@@ -20,7 +20,6 @@
 const chai = require('chai');
 chai.use(require('chai-as-promised'));
 chai.use(require('sinon-chai'));
-// test/_init_tests.js
 chai.Assertion.addMethod('attribute');
 chai.Assertion.addMethod('class');
 chai.Assertion.addMethod('display');
diff --git a/build-system/eslint-rules/closure-type-primitives.js b/build-system/eslint-rules/closure-type-primitives.js
index b9dbc3b881271..e934768aaf6fa 100644
--- a/build-system/eslint-rules/closure-type-primitives.js
+++ b/build-system/eslint-rules/closure-type-primitives.js
@@ -15,7 +15,7 @@
  */
 'use strict';
 
-const doctrine = require('doctrine');
+const doctrine = require('@jridgewell/doctrine');
 const traverse = require('traverse');
 
 /** @typedef {!Object} */
@@ -40,7 +40,9 @@ module.exports = function (context) {
       fixable: 'code',
     },
     Program: function () {
-      const comments = /** @type {!Array<!EslintNodeDef>} */ (sourceCode.getAllComments());
+      const comments = /** @type {!Array<!EslintNodeDef>} */ (
+        sourceCode.getAllComments()
+      );
       comments
         .map((node) => parseClosureComments(context, node))
         .forEach((comment) => checkClosureComments(context, comment));
@@ -90,7 +92,7 @@ function checkClosureComments(context, closureComment) {
     return;
   }
 
-  const {parsed, node} = closureComment;
+  const {node, parsed} = closureComment;
   traverse(parsed).forEach((astNode) => {
     if (!astNode) {
       return;
@@ -156,7 +158,7 @@ function checkNonNullableNodes(context, node, astNode) {
     return;
   }
 
-  const {type, name} = astNode.expression;
+  const {name, type} = astNode.expression;
   if (type === 'FunctionType') {
     reportNonNullablePrimitive(context, node, 'function');
   } else if (type === 'UndefinedLiteral') {
diff --git a/build-system/eslint-rules/dict-string-keys.js b/build-system/eslint-rules/dict-string-keys.js
index b3322a182e824..d3c5c97b6a58f 100644
--- a/build-system/eslint-rules/dict-string-keys.js
+++ b/build-system/eslint-rules/dict-string-keys.js
@@ -37,20 +37,25 @@ module.exports = function (context) {
   };
 };
 
+/**
+ * @param {*} node
+ * @param {*} context
+ */
 function checkNode(node, context) {
   if (node.type === 'ObjectExpression') {
     node.properties.forEach(function (prop) {
-      if (!prop.key.raw && !prop.computed) {
+      if (!prop.key || (!prop.key.raw && !prop.computed)) {
+        const {name = `[${prop.type}]`} = prop.key || prop.argument || {};
         context.report({
-          node,
+          node: prop,
           message:
-            'Found: ' +
-            prop.key.name +
-            '. The keys of the Object ' +
-            'Literal Expression passed into `dict` must have string keys.',
+            `Found: ${name}.` +
+            'The Object Literal Expression passed into `dict` must only contain string keyed properties.',
         });
       }
-      checkNode(prop.value, context);
+      if (prop.value) {
+        checkNode(prop.value, context);
+      }
     });
   } else if (node.type === 'ArrayExpression') {
     node.elements.forEach(function (elem) {
diff --git a/build-system/eslint-rules/forbidden-terms-config.js b/build-system/eslint-rules/forbidden-terms-config.js
new file mode 100644
index 0000000000000..8e2256e61f709
--- /dev/null
+++ b/build-system/eslint-rules/forbidden-terms-config.js
@@ -0,0 +1,148 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const {readFileSync} = require('fs');
+
+/**
+ * @fileoverview
+ * Ensures that forbidden-terms.js is up-to-date by reporting listed files that
+ * do not include the allowed term.
+ */
+
+const allowlistProperty = 'allowlist';
+
+module.exports = {
+  meta: {fixable: 'code'},
+  create(context) {
+    // Some files are allowlisted for multiple terms, so caching their content
+    // greatly speeds up this rule.
+    const fileContent = {};
+
+    /**
+     * @param {string} filename
+     * @return {string}
+     */
+    function readFileContent(filename) {
+      try {
+        return (
+          fileContent[filename] ||
+          (fileContent[filename] = readFileSync(filename, 'utf-8'))
+        );
+      } catch (_) {
+        return null;
+      }
+    }
+
+    /**
+     * @param {Object} fixer
+     * @param {Node} node
+     */
+    function* removeFromArray(fixer, node) {
+      const {text} = context.getSourceCode();
+      let {start} = node;
+      while (/\s/.test(text[start - 1])) {
+        start--;
+      }
+      yield fixer.removeRange([start, node.end]);
+
+      const after = context.getTokenAfter(node);
+      if (after.type === 'Punctuator' && after.value === ',') {
+        node = after;
+        yield fixer.remove(after);
+      }
+
+      const [nextComment] = context.getCommentsAfter(node);
+      if (
+        nextComment &&
+        text.substr(node.end, nextComment.start - node.end).indexOf('\n') < 0
+      ) {
+        yield fixer.remove(nextComment);
+      }
+    }
+
+    return {
+      ['Property' +
+      `[key.name='${allowlistProperty}']` +
+      "[value.type='ArrayExpression']" +
+      "[parent.parent.type='Property']"]: function (node) {
+        const termProperty = node.parent.parent;
+        const termKey = termProperty.key;
+
+        const termKeyIsIdentifier = termKey.type === 'Identifier';
+        if (termProperty.computed || termKeyIsIdentifier) {
+          let fix;
+          if (!termProperty.computed && termKeyIsIdentifier) {
+            // we can replace non-computed ids with string literals
+            fix = function (fixer) {
+              return fixer.replaceText(termKey, `'${termKey.name}'`);
+            };
+          }
+          context.report({
+            node: termKey,
+            message: 'Term keys should be string literals.',
+            fix,
+          });
+          return;
+        }
+
+        if (node.value.elements.length < 1) {
+          context.report({
+            node,
+            message: `Remove empty ${allowlistProperty}`,
+            fix(fixer) {
+              return removeFromArray(fixer, node);
+            },
+          });
+          return;
+        }
+
+        const termRegexp = new RegExp(termKey.value, 'gm');
+
+        for (const stringLiteral of node.value.elements) {
+          if (!stringLiteral.type.endsWith('Literal')) {
+            context.report({
+              node: stringLiteral,
+              message: `${allowlistProperty} should only contain string literals`,
+            });
+            continue;
+          }
+
+          const filename = stringLiteral.value;
+          const content = readFileContent(filename);
+
+          if (content && content.match(termRegexp)) {
+            continue;
+          }
+
+          context.report({
+            node: stringLiteral,
+            message: content
+              ? 'File does not use this term.'
+              : 'File does not exist.',
+            suggest: [
+              {
+                desc: `Remove from ${allowlistProperty}`,
+                fix(fixer) {
+                  return removeFromArray(fixer, stringLiteral);
+                },
+              },
+            ],
+          });
+        }
+      },
+    };
+  },
+};
diff --git a/build-system/eslint-rules/html-template.js b/build-system/eslint-rules/html-template.js
index c4be545daff2c..4795be84e4ca7 100644
--- a/build-system/eslint-rules/html-template.js
+++ b/build-system/eslint-rules/html-template.js
@@ -17,11 +17,21 @@
 
 const {
   staticTemplateFactories,
-  staticTemplateTags,
   staticTemplateFactoryFns,
+  staticTemplateTags,
 } = require('../babel-plugins/static-template-metadata');
 
+/**
+ * @param {*} context
+ * @return {{
+ *   CallExpression: {Function(node: CompilerNode): void}
+ *   TaggedTemplateExpression: {Function(node: CompilerNode): void}
+ * }}
+ */
 module.exports = function (context) {
+  /**
+   * @param {CompilerNode} node
+   */
   function tagCannotBeCalled(node) {
     const {name} = node.callee;
     context.report({
@@ -34,6 +44,9 @@ module.exports = function (context) {
     });
   }
 
+  /**
+   * @param {CompilerNode} node
+   */
   function factoryUsage(node) {
     const {parent} = node;
     const {name} = node.callee;
@@ -41,7 +54,8 @@ module.exports = function (context) {
     const expectedTagName = staticTemplateFactories[name];
 
     if (parent.type === 'TaggedTemplateExpression' && parent.tag === node) {
-      return tagUsage(parent, `${name}()`);
+      tagUsage(parent, `${name}()`);
+      return;
     }
 
     if (
@@ -71,6 +85,10 @@ module.exports = function (context) {
     });
   }
 
+  /**
+   * @param {CompilerNode} node
+   * @param {string} opt_name
+   */
   function tagUsage(node, opt_name) {
     const {quasi, tag} = node;
     if (quasi.expressions.length !== 0) {
@@ -107,7 +125,7 @@ module.exports = function (context) {
       const {start} = template;
 
       for (let i = 0; i < invalids.length; i++) {
-        const {tag, offset} = invalids[i];
+        const {offset, tag} = invalids[i];
         context.report({
           node: template,
           loc: sourceCode.getLocFromIndex(start + offset),
@@ -117,10 +135,18 @@ module.exports = function (context) {
     }
   }
 
+  /**
+   * @param {*} string
+   * @return {{
+   *   tag: string,
+   *   offset: number,
+   * }[]}
+   */
   function invalidVoidTag(string) {
     // Void tags are defined at
     // https://html.spec.whatwg.org/multipage/syntax.html#void-elements
-    const invalid = /<(?!area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)([a-zA-Z-]+)( [^>]*)?\/>/g;
+    const invalid =
+      /<(?!area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)([a-zA-Z-]+)( [^>]*)?\/>/g;
     const matches = [];
 
     let match;
diff --git a/build-system/eslint-rules/json-configuration.js b/build-system/eslint-rules/json-configuration.js
index 5bcda606d2ddd..6a9af9c2d5a22 100644
--- a/build-system/eslint-rules/json-configuration.js
+++ b/build-system/eslint-rules/json-configuration.js
@@ -16,8 +16,8 @@
 'use strict';
 
 /**
- * Finds the jsonConfiguration helper function from src/json.js, and performs
- * validation on its input.
+ * Finds the jsonConfiguration helper function from src/core/types/object/json,
+ * and performs validation on its input.
  */
 
 module.exports = function (context) {
@@ -25,6 +25,10 @@ module.exports = function (context) {
     (name) => `CallExpression[callee.name=${name}]`
   );
 
+  /**
+   * @param {*} node
+   * @return {Object}
+   */
   function verifyPath(node) {
     for (let n = node; n; n = n.parent) {
       const {parent} = n;
diff --git a/build-system/eslint-rules/jss-animation-name.js b/build-system/eslint-rules/jss-animation-name.js
new file mode 100644
index 0000000000000..291a55925ebb7
--- /dev/null
+++ b/build-system/eslint-rules/jss-animation-name.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright 2020 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';
+
+/**
+ * Prevents animation/animationName from using global names. They should
+ * always be scoped with $.
+ *
+ * Bad:
+ *   const JSS = {
+ *     foo: {animationName: 'bar-global'},
+ *     foo: {animation: '0.5s bar-global infinite'},
+ *   };
+ * Good:
+ *   const JSS = {
+ *     foo: {animationName: '$bar-local'},
+ *     foo: {animation: '0.5s $bar-local infinite'},
+ *   };
+ * @return {!Object}
+ */
+module.exports = function (context) {
+  return {
+    Property(node) {
+      if (!/\.jss.js$/.test(context.getFilename())) {
+        return;
+      }
+      // Could be {key: val} identifier or {'key': val} string
+      const keyName = node.key.name || node.key.value;
+      const isAnimation = keyName === 'animation';
+      const isAnimationName =
+        keyName === 'animationName' || keyName === 'animation-name';
+      if (!isAnimationName && !isAnimation) {
+        return;
+      }
+      if (typeof node.value.value !== 'string') {
+        context.report({
+          node: node.value,
+          message:
+            `Use string literals for ${keyName} values.` +
+            (isAnimation
+              ? '\n(animation-* properties other than animation-name are exempt from this rule.)'
+              : ''),
+        });
+        return;
+      }
+      if (
+        (isAnimationName && !/^\$/.test(node.value.value)) ||
+        (isAnimation && !/(^| )\$/.test(node.value.value))
+      ) {
+        context.report({
+          node: node.value,
+          message: `The animation name in property ${keyName} should start with $${
+            isAnimationName ? ` (e.g. $${node.value.value})` : ''
+          }.\nThis scopes it to a @keyframes rule present in this module.`,
+        });
+      }
+    },
+  };
+};
diff --git a/build-system/eslint-rules/no-array-destructuring.js b/build-system/eslint-rules/no-array-destructuring.js
index 0f9752840dd85..f6f32d93ec59b 100644
--- a/build-system/eslint-rules/no-array-destructuring.js
+++ b/build-system/eslint-rules/no-array-destructuring.js
@@ -27,6 +27,10 @@
 // const [b] = value;
 // function bad([b]) {}
 module.exports = function (context) {
+  /**
+   * @param {*} node
+   * @return {boolean}
+   */
   function isAllowed(node) {
     const {parent} = node;
     if (parent.type !== 'VariableDeclarator') {
@@ -45,11 +49,14 @@ module.exports = function (context) {
     }
 
     if (callee.type === 'MemberExpression') {
-      const {object, property, computed} = callee;
+      const {computed, object, property} = callee;
       if (computed) {
         return false;
       }
-      if (object.type !== 'Identifier' || object.name !== 'preact') {
+      if (
+        object.type !== 'Identifier' ||
+        object.name.toLowerCase() !== 'preact'
+      ) {
         return false;
       }
       if (property.type !== 'Identifier' || !property.name.startsWith('use')) {
diff --git a/build-system/eslint-rules/no-duplicate-name-typedef.js b/build-system/eslint-rules/no-duplicate-name-typedef.js
index 68de4de695901..2db0b1b650907 100644
--- a/build-system/eslint-rules/no-duplicate-name-typedef.js
+++ b/build-system/eslint-rules/no-duplicate-name-typedef.js
@@ -36,11 +36,8 @@ module.exports = function (context) {
     },
 
     VariableDeclaration(node) {
-      if (!node.leadingComments) {
-        return;
-      }
-
-      const typedefComment = node.leadingComments.find((comment) => {
+      const leadingComments = context.getCommentsBefore(node);
+      const typedefComment = leadingComments.find((comment) => {
         return comment.type === 'Block' && /@typedef/.test(comment.value);
       });
 
diff --git a/build-system/eslint-rules/no-es2015-number-props.js b/build-system/eslint-rules/no-es2015-number-props.js
index a3ea07517a7c2..c8e6cdd1d167a 100644
--- a/build-system/eslint-rules/no-es2015-number-props.js
+++ b/build-system/eslint-rules/no-es2015-number-props.js
@@ -27,6 +27,10 @@ const INVALID_PROPS = [
   'parseInt',
 ];
 
+/**
+ * @param {string} property
+ * @return {boolean}
+ */
 function isInvalidProperty(property) {
   return INVALID_PROPS.indexOf(property) != -1;
 }
diff --git a/build-system/eslint-rules/no-for-of-statement.js b/build-system/eslint-rules/no-for-of-statement.js
deleted file mode 100644
index e1ed87e5b46b5..0000000000000
--- a/build-system/eslint-rules/no-for-of-statement.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright 2016 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';
-
-module.exports = function (context) {
-  return {
-    ForOfStatement: function (node) {
-      context.report({node, message: 'No for-of statement allowed.'});
-    },
-  };
-};
diff --git a/build-system/eslint-rules/no-forbidden-terms.js b/build-system/eslint-rules/no-forbidden-terms.js
new file mode 100644
index 0000000000000..2bc32abbb29b6
--- /dev/null
+++ b/build-system/eslint-rules/no-forbidden-terms.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const {cyan} = require('../common/colors');
+const {matchForbiddenTerms} = require('../test-configs/forbidden-terms');
+const {relative} = require('path');
+
+/**
+ * @fileoverview
+ * Reports forbidden terms found by regex.
+ * See test-configs/forbidden-terms.js
+ */
+
+const addPeriod = (str) => (/.\s*$/.test(str) ? str : `${str}.`);
+
+module.exports = function (context) {
+  return {
+    Program() {
+      const filename = relative(process.cwd(), context.getFilename());
+      const sourceCode = context.getSourceCode();
+      const contents = sourceCode.text;
+
+      for (const terms of context.options) {
+        for (const report of matchForbiddenTerms(filename, contents, terms)) {
+          const {loc, match, message} = report;
+          const formattedMatch = cyan(`"${match}"`);
+          context.report({
+            loc,
+            message:
+              `Forbidden: ${formattedMatch}.` +
+              (message ? ` ${addPeriod(message)}` : ''),
+          });
+        }
+      }
+    },
+  };
+};
diff --git a/build-system/eslint-rules/no-has-own-property-method.js b/build-system/eslint-rules/no-has-own-property-method.js
index 9d27cb29905c6..242ad20295a9a 100644
--- a/build-system/eslint-rules/no-has-own-property-method.js
+++ b/build-system/eslint-rules/no-has-own-property-method.js
@@ -28,7 +28,7 @@ module.exports = {
             node,
             message:
               'Do not use hasOwnProperty directly. ' +
-              'Use hasOwn from src/utils/object.js instead.',
+              'Use hasOwn from src/core/types/object instead.',
           });
         }
       },
diff --git a/build-system/eslint-rules/no-import-rename.js b/build-system/eslint-rules/no-import-rename.js
index d45706e0fd895..ad0865b880a25 100644
--- a/build-system/eslint-rules/no-import-rename.js
+++ b/build-system/eslint-rules/no-import-rename.js
@@ -21,19 +21,19 @@ const path = require('path');
 // name. This aids in writing lint rules for these imports.
 //
 // GOOD
-// import { dict } from 'src/utils/object';
+// import { dict } from 'src/core/types/object';
 // dict();
 //
 // BAD
-// import * as obj from 'src/utils/object';
+// import * as obj from 'src/core/types/object';
 // obj.dict()
 //
 // Bad
-// import { dict as otherName } from 'src/utils/object';
+// import { dict as otherName } from 'src/core/types/object';
 // otherName()
 
 const imports = {
-  'src/utils/object': ['dict'],
+  'src/core/types/object': ['dict'],
   'src/static-template': ['htmlFor'],
   'src/experiments': ['isExperimentOn'],
   'src/style': [
@@ -44,13 +44,18 @@ const imports = {
     'setStyle',
     'setStyles',
   ],
-  'src/css': ['escapeCssSelectorIdent', 'escapeCssSelectorNth'],
+  'src/core/dom/css': ['escapeCssSelectorIdent', 'escapeCssSelectorNth'],
   'src/dom': ['scopedQuerySelector', 'scopedQuerySelectorAll'],
   'src/log': ['user', 'dev'],
   'src/mode': ['getMode'],
 };
 
 module.exports = function (context) {
+  /**
+   * @param {*} node
+   * @param {string} modulePath
+   * @param {*} mods
+   */
   function ImportSpecifier(node, modulePath, mods) {
     const {imported, local} = node;
     const {name} = imported;
@@ -71,6 +76,14 @@ module.exports = function (context) {
     });
   }
 
+  /**
+   * @param {*} node
+   * @param {string} modulePath
+   * @param {*} mods
+   * @return {{
+   *   ImportDeclaration: {Function(node: *): void},
+   * }}
+   */
   function ImportNamespaceSpecifier(node, modulePath, mods) {
     const ns = node.local.name;
     const variable = context.getScope().set.get(ns);
diff --git a/build-system/eslint-rules/no-invalid-this.js b/build-system/eslint-rules/no-invalid-this.js
new file mode 100644
index 0000000000000..ec4e2c82f9157
--- /dev/null
+++ b/build-system/eslint-rules/no-invalid-this.js
@@ -0,0 +1,109 @@
+/**
+ * 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';
+
+// Disables use of the `this` value when we suspect that it is using the
+// implicit global `this`. `this` is only valid inside class
+// methods/constructors, and nested arrow functions.
+//
+// We special case calls to `fn.bind`, `fn.call`, and `fn.apply`, since they
+// are usually forwarding the `this` context and not direclty using it. The
+// called function should be corrected, not the caller.
+//
+// Good:
+// class Foo {
+//   test() {
+//     this;
+//   }
+// }
+// function Bar() {
+//   this;
+// }
+// obj.baz = function() {
+//   this;
+// };
+//
+// Bad:
+// var foo = function() {
+//   this;
+// };
+// function bar() {
+//   this;
+// }
+module.exports = {
+  meta: {
+    fixable: 'code',
+  },
+
+  create(context) {
+    return {
+      ThisExpression(node) {
+        const ancestors = context.getAncestors().slice().reverse();
+
+        const maybeCall = ancestors[0];
+        if (
+          maybeCall.type === 'CallExpression' &&
+          maybeCall.arguments[0] === node
+        ) {
+          const {callee} = maybeCall;
+          if (callee.type === 'MemberExpression' && !callee.computed) {
+            const {property} = callee;
+            if (
+              property.type === 'Identifier' &&
+              (property.name === 'bind' ||
+                property.name === 'call' ||
+                property.name === 'apply')
+            ) {
+              return;
+            }
+          }
+        }
+
+        for (let i = 0; i < ancestors.length; i++) {
+          const ancestor = ancestors[i];
+          switch (ancestor.type) {
+            case 'FunctionExpression':
+              const parent = ancestors[i + 1];
+              // Allow functions that are used as methods.
+              if (
+                parent.type === 'Property' ||
+                parent.type === 'MethodDefinition' ||
+                (parent.type === 'AssignmentExpression' &&
+                  parent.left.type === 'MemberExpression')
+              ) {
+                return;
+              }
+            // fallthrough
+
+            case 'FunctionDeclaration':
+              const {id} = ancestor;
+              // Allow legacy function constructors
+              if (id && /^[A-Z]/.test(id.name)) {
+                return;
+              }
+
+            case 'Program':
+              return context.report({
+                node,
+                message:
+                  '`this` looks to be using the implicit global `this` value on accident.',
+              });
+          }
+        }
+      },
+    };
+  },
+};
diff --git a/build-system/eslint-rules/no-is-amp-alt.js b/build-system/eslint-rules/no-is-amp-alt.js
deleted file mode 100644
index b59d1f944b8b7..0000000000000
--- a/build-system/eslint-rules/no-is-amp-alt.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2018 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 selector = 'AssignmentExpression Identifier[name=IS_AMP_ALT]';
-module.exports = function (context) {
-  return {
-    [selector]: function (node) {
-      context.report({
-        node,
-        message: 'No Assignment to IS_AMP_ALT global property allowed',
-      });
-    },
-  };
-};
diff --git a/build-system/eslint-rules/no-mixed-interpolation.js b/build-system/eslint-rules/no-mixed-interpolation.js
index f3bc564126c03..4ea783f6a49c7 100644
--- a/build-system/eslint-rules/no-mixed-interpolation.js
+++ b/build-system/eslint-rules/no-mixed-interpolation.js
@@ -95,7 +95,7 @@ module.exports = {
           return;
         }
 
-        const {variadic, messageArgPos} = metadata;
+        const {messageArgPos, variadic} = metadata;
         // If method is not variadic we don't need to check.
         if (!variadic) {
           return;
diff --git a/build-system/eslint-rules/no-private-props.js b/build-system/eslint-rules/no-private-props.js
new file mode 100644
index 0000000000000..4772bf69552dd
--- /dev/null
+++ b/build-system/eslint-rules/no-private-props.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright 2021 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';
+
+/**
+ * Ensures private properties are not used in the file. If they are, they must
+ * be quoted.
+ *
+ * @return {!Object}
+ */
+module.exports = {
+  meta: {
+    fixable: 'code',
+  },
+
+  create(context) {
+    return {
+      MemberExpression(node) {
+        if (node.computed || !node.property.name.endsWith('_')) {
+          return;
+        }
+
+        context.report({
+          node,
+          message:
+            'Unquoted private properties are not allowed in BaseElement. Please use quotes',
+          fix(fixer) {
+            const {object} = node;
+            return fixer.replaceTextRange(
+              [object.end, node.end],
+              `['${node.property.name}']`
+            );
+          },
+        });
+      },
+
+      MethodDefinition(node) {
+        if (node.computed || !node.key.name.endsWith('_')) {
+          return;
+        }
+
+        context.report({
+          node,
+          message:
+            'Unquoted private methods are not allowed in BaseElement. Please use quotes',
+          fix(fixer) {
+            return fixer.replaceText(node.key, `['${node.key.name}']`);
+          },
+        });
+      },
+    };
+  },
+};
diff --git a/build-system/eslint-rules/no-static-this.js b/build-system/eslint-rules/no-static-this.js
new file mode 100644
index 0000000000000..ae49eb360cf4a
--- /dev/null
+++ b/build-system/eslint-rules/no-static-this.js
@@ -0,0 +1,95 @@
+/**
+ * Copyright 2020 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';
+
+// Forbids use of `this` inside static class methods
+//
+// Good:
+// ```
+// class Foo {
+//   static s() {
+//     Foo.prop;
+//   }
+//
+//   i() {
+//     this.prop;
+//     Foo.prop;
+//   }
+// }
+//
+// Foo.prop = 1;
+// ```
+//
+// Bad:
+// ```
+// class Foo {
+//   static s() {
+//     this.prop;
+//   }
+// }
+//
+// Foo.prop = 1;
+// ```
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        "Disallow using `this` within static functions, since Closure Compiler's Advanced Compilation breaks it",
+      context: 'https://github.com/google/closure-compiler/issues/2397',
+    },
+  },
+  create(context) {
+    return {
+      'MethodDefinition[static=true] ThisExpression': function (node) {
+        const ancestry = context.getAncestors().slice().reverse();
+        let i = 0;
+        for (; i < ancestry.length; i++) {
+          const ancestor = ancestry[i];
+          const {type} = ancestor;
+
+          // Arrow functions inherit `this` from their lexical scope, so we need
+          // to continue searching if it's an arrow.
+          if (
+            !type.includes('Function') ||
+            type === 'ArrowFunctionExpression'
+          ) {
+            continue;
+          }
+
+          // If the direct parent of this function is a static method definition,
+          // then we've found our root method. If it's non-static, then it's a
+          // nested class expression's instance method, which is safe.
+          if (i < ancestry.length - 2) {
+            const parent = ancestry[i + 1];
+            if (parent.type === 'MethodDefinition' && parent.static) {
+              break;
+            }
+          }
+
+          // Found a function with it's own `this`, so it's safe.
+          return;
+        }
+
+        context.report({
+          node,
+          message:
+            '`this` in static methods is broken by Advanced Closure Compiler optimizations. Please use the class name directly.',
+        });
+      },
+    };
+  },
+};
diff --git a/build-system/eslint-rules/no-unload-listener.js b/build-system/eslint-rules/no-unload-listener.js
index 40db209720d6b..33b2cbaa39d01 100644
--- a/build-system/eslint-rules/no-unload-listener.js
+++ b/build-system/eslint-rules/no-unload-listener.js
@@ -50,7 +50,7 @@ module.exports = function (context) {
         return;
       }
 
-      const {value, type} = arg;
+      const {type, value} = arg;
       if (type !== 'Literal' || typeof value !== 'string') {
         return;
       }
diff --git a/build-system/eslint-rules/objstr-literal.js b/build-system/eslint-rules/objstr-literal.js
new file mode 100644
index 0000000000000..8234480200b0d
--- /dev/null
+++ b/build-system/eslint-rules/objstr-literal.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright 2021 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.
+ */
+
+module.exports = function objstrLiteral(context) {
+  return {
+    CallExpression(node) {
+      if (node.callee.type !== 'Identifier' || node.callee.name !== 'objstr') {
+        return;
+      }
+      if (
+        node.arguments.length !== 1 ||
+        node.arguments[0].type !== 'ObjectExpression'
+      ) {
+        context.report({
+          node,
+          message: `${node.callee.name}() must have a single argument that is an Object Expression Literal`,
+        });
+        return;
+      }
+      for (const {argument, key, type} of node.arguments[0].properties) {
+        if (!key) {
+          context.report({
+            node,
+            message: `${
+              node.callee.name
+            }() must only contain keyed props, found [${type}] ${
+              (argument && argument.name) || '(unknown)'
+            }`,
+          });
+        }
+      }
+    },
+  };
+};
diff --git a/build-system/eslint-rules/preact.js b/build-system/eslint-rules/preact.js
index 76bab2f75dff1..a9638dd38030d 100644
--- a/build-system/eslint-rules/preact.js
+++ b/build-system/eslint-rules/preact.js
@@ -35,6 +35,9 @@ module.exports = {
   },
 
   create(context) {
+    /**
+     * @param {*} node
+     */
     function requirePreact(node) {
       if (imported) {
         return;
diff --git a/build-system/eslint-rules/prefer-deferred-promise.js b/build-system/eslint-rules/prefer-deferred-promise.js
index 2680aac5b05e8..0df568215eebb 100644
--- a/build-system/eslint-rules/prefer-deferred-promise.js
+++ b/build-system/eslint-rules/prefer-deferred-promise.js
@@ -16,6 +16,14 @@
 'use strict';
 
 module.exports = function (context) {
+  /**
+   * @param {*} node
+   * @param {string} name
+   * @return {{
+   *  CallExpression: {Function(*): undefined},
+   *  NewExpression: {Function(*): undefined}
+   * } | boolean}
+   */
   function isAssignment(node, name) {
     if (node.type !== 'AssignmentExpression') {
       return false;
diff --git a/build-system/eslint-rules/prefer-destructuring.js b/build-system/eslint-rules/prefer-destructuring.js
index 00f349d8d43cf..79760201335cd 100644
--- a/build-system/eslint-rules/prefer-destructuring.js
+++ b/build-system/eslint-rules/prefer-destructuring.js
@@ -20,7 +20,19 @@ module.exports = {
     fixable: 'code',
   },
 
+  /**
+   * @param {EslintContext} context
+   * @return {{
+   *   VariableDeclarator: {Function(node: CompilerNode): void},
+   *   'BlockStatement, Program': {Function (node: CompilerNode): void},
+   * }}
+   */
   create(context) {
+    /**
+     * @param {CompilerNode} node
+     * @param {boolean=} renamable
+     * @return {boolean}
+     */
     function shouldBeDestructure(node, renamable = false) {
       const {id, init} = node;
 
@@ -33,11 +45,11 @@ module.exports = {
       }
 
       const {name} = id;
-      const {object, property, computed} = init;
+      const {computed, object, property} = init;
       if (
         computed ||
         object.type === 'Super' ||
-        property.leadingComments ||
+        context.getCommentsBefore(property).length > 0 ||
         property.type !== 'Identifier'
       ) {
         return false;
@@ -46,6 +58,10 @@ module.exports = {
       return renamable || property.name === name;
     }
 
+    /**
+     * @param {CompilerNode} node
+     * @return {boolean}
+     */
     function shouldBeIdempotent(node) {
       while (node.type === 'MemberExpression') {
         node = node.object;
@@ -54,6 +70,14 @@ module.exports = {
       return node.type === 'Identifier' || node.type === 'ThisExpression';
     }
 
+    /**
+     *
+     * @param {Map<K, V>} map
+     * @param {K} key
+     * @param {CompilerNode} node
+     * @param {*} declaration
+     * @return {string[]}
+     */
     function setStruct(map, key, node, declaration) {
       if (map.has(key)) {
         const struct = map.get(key);
@@ -72,6 +96,9 @@ module.exports = {
       }
     }
 
+    /**
+     * @param {Map[]} maps
+     */
     function processMaps(maps) {
       for (let i = 0; i < maps.length; i++) {
         const map = maps[i];
@@ -80,8 +107,12 @@ module.exports = {
       }
     }
 
+    /**
+     * @param {*} struct
+     * @param {*} base
+     */
     function processVariables(struct, base) {
-      const {names, nodes, declarations, node} = struct;
+      const {declarations, names, node, nodes} = struct;
 
       if (nodes.size === 0) {
         return;
@@ -118,13 +149,16 @@ module.exports = {
     }
 
     return {
+      /**
+       * @param {CompilerNode} node
+       */
       VariableDeclarator(node) {
         if (!shouldBeDestructure(node)) {
           return;
         }
 
         const {init} = node;
-        if (init.leadingComments) {
+        if (context.getCommentsInside(node).length > 0) {
           return;
         }
 
@@ -141,6 +175,9 @@ module.exports = {
         });
       },
 
+      /**
+       * @param {CompilerNode} node
+       */
       'BlockStatement, Program': function (node) {
         const {body} = node;
         const sourceCode = context.getSourceCode();
@@ -161,7 +198,7 @@ module.exports = {
             const decl = declarations[j];
             const {id, init} = decl;
 
-            if (!init || init.leadingComments) {
+            if (!init || context.getCommentsInside(decl).length > 0) {
               continue;
             }
 
@@ -193,12 +230,13 @@ module.exports = {
               const names = setStruct(variables, base, decl, node);
               const {properties} = id;
               for (let k = 0; k < properties.length; k++) {
-                const {key} = properties[k];
-                if (key.type !== 'Identifier') {
-                  // Deep destructuring, too complicated.
-                  return;
+                const prop = properties[k];
+                names.add(sourceCode.getText(prop));
+                if (!prop.key) {
+                  // rest element
+                  processMaps([letMap, constMap]);
+                  break;
                 }
-                names.add(key.name);
               }
             }
           }
diff --git a/build-system/eslint-rules/prefer-spread-props.js b/build-system/eslint-rules/prefer-spread-props.js
index da179d27eebaf..bf45e0b29723f 100644
--- a/build-system/eslint-rules/prefer-spread-props.js
+++ b/build-system/eslint-rules/prefer-spread-props.js
@@ -40,38 +40,37 @@ module.exports = {
     const sourceCode = context.getSourceCode();
 
     return {
-      'CallExpression[callee.object.name="Object"][callee.property.name="assign"]': function (
-        node
-      ) {
-        const args = node.arguments;
-        if (args.length <= 1) {
-          return;
-        }
+      'CallExpression[callee.object.name="Object"][callee.property.name="assign"]':
+        function (node) {
+          const args = node.arguments;
+          if (args.length <= 1) {
+            return;
+          }
 
-        const first = args[0];
-        if (first.type !== 'ObjectExpression') {
-          return;
-        }
-        for (const arg of args) {
-          if (arg.type === 'SpreadElement') {
+          const first = args[0];
+          if (first.type !== 'ObjectExpression') {
             return;
           }
-        }
+          for (const arg of args) {
+            if (arg.type === 'SpreadElement') {
+              return;
+            }
+          }
 
-        context.report({
-          node,
-          message: 'Prefer using object literals with spread property syntax',
+          context.report({
+            node,
+            message: 'Prefer using object literals with spread property syntax',
 
-          fix(fixer) {
-            const texts = args.map((arg) => `...${sourceCode.getText(arg)}`);
-            if (first.properties.length === 0) {
-              texts.shift();
-            }
+            fix(fixer) {
+              const texts = args.map((arg) => `...${sourceCode.getText(arg)}`);
+              if (first.properties.length === 0) {
+                texts.shift();
+              }
 
-            return fixer.replaceText(node, `({${texts.join(',')}})`);
-          },
-        });
-      },
+              return fixer.replaceText(node, `({${texts.join(',')}})`);
+            },
+          });
+        },
     };
   },
 };
diff --git a/build-system/eslint-rules/prefer-unnested-spread-objects.js b/build-system/eslint-rules/prefer-unnested-spread-objects.js
index 19df38eb8b105..0d7f6c59652b3 100644
--- a/build-system/eslint-rules/prefer-unnested-spread-objects.js
+++ b/build-system/eslint-rules/prefer-unnested-spread-objects.js
@@ -50,6 +50,11 @@ module.exports = {
     const spreadElement =
       ':matches(ObjectExpression > ExperimentalSpreadProperty, ObjectExpression > SpreadElement)';
 
+    /**
+     * @param {Array<T>} array
+     * @param {T} item
+     * @return {?T}
+     */
     function findAfter(array, item) {
       const index = array.indexOf(item);
       return index < array.length - 1 ? array[index + 1] : null;
@@ -62,7 +67,7 @@ module.exports = {
           message: 'Nesting an object under an object spread is not useful',
 
           fix(fixer) {
-            const {properties, parent} = node;
+            const {parent, properties} = node;
             const texts = properties.map((prop) => sourceCode.getText(prop));
 
             if (texts.length > 0) {
diff --git a/build-system/eslint-rules/private-prop-names.js b/build-system/eslint-rules/private-prop-names.js
index f455751818b40..7fbf9da266140 100644
--- a/build-system/eslint-rules/private-prop-names.js
+++ b/build-system/eslint-rules/private-prop-names.js
@@ -54,8 +54,8 @@ module.exports = function (context) {
   return {
     MethodDefinition: function (node) {
       if (
-        hasPrivateAnnotation(node.leadingComments) &&
-        !hasTrailingUnderscore(node.key.name)
+        hasPrivateAnnotation(context.getCommentsBefore(node)) &&
+        !hasTrailingUnderscore(node.key.name || node.key.value)
       ) {
         context.report({
           node,
@@ -66,9 +66,11 @@ module.exports = function (context) {
     AssignmentExpression: function (node) {
       if (
         node.parent.type == 'ExpressionStatement' &&
-        hasPrivateAnnotation(node.parent.leadingComments) &&
+        hasPrivateAnnotation(context.getCommentsBefore(node.parent)) &&
         isThisMemberExpression(node.left) &&
-        !hasTrailingUnderscore(node.left.property.name)
+        !hasTrailingUnderscore(
+          node.left.property.name || node.left.property.value
+        )
       ) {
         context.report({
           node,
diff --git a/build-system/eslint-rules/query-selector.js b/build-system/eslint-rules/query-selector.js
index d15809400f50f..9fdd4b61c84f1 100644
--- a/build-system/eslint-rules/query-selector.js
+++ b/build-system/eslint-rules/query-selector.js
@@ -15,7 +15,12 @@
  */
 'use strict';
 
+const cssWhat = require('css-what');
+
 module.exports = function (context) {
+  /**
+   * @param {CompilerNode} node
+   */
   function callQuerySelector(node) {
     const {callee} = node;
 
@@ -28,17 +33,24 @@ module.exports = function (context) {
       return;
     }
 
-    if (property.leadingComments) {
-      const ok = property.leadingComments.some((comment) => {
-        return comment.value === 'OK';
-      });
-      if (ok) {
-        return;
-      }
+    const leadingComments = context.getCommentsBefore(property);
+    const ok = leadingComments.some((comment) => {
+      return comment.value === 'OK';
+    });
+    if (ok) {
+      return;
     }
 
     const selector = getSelector(node, 0);
 
+    if (!isValidSelector(selector)) {
+      context.report({
+        node,
+        message: 'Failed to parse CSS Selector `' + selector + '`',
+      });
+      return;
+    }
+
     // What are we calling querySelector on?
     let obj = callee.object;
     if (obj.type === 'CallExpression') {
@@ -70,23 +82,33 @@ module.exports = function (context) {
     });
   }
 
+  /**
+   * @param {CompilerNode} node
+   */
   function callScopedQuerySelector(node) {
     const {callee} = node;
     if (!callee.name.startsWith('scopedQuerySelector')) {
       return;
     }
 
-    if (node.leadingComments) {
-      const ok = node.leadingComments.some((comment) => {
-        return comment.value === 'OK';
-      });
-      if (ok) {
-        return;
-      }
+    const leadingComments = context.getCommentsBefore(node);
+    const ok = leadingComments.some((comment) => {
+      return comment.value === 'OK';
+    });
+    if (ok) {
+      return;
     }
 
     const selector = getSelector(node, 1);
 
+    if (!isValidSelector(selector)) {
+      context.report({
+        node,
+        message: 'Failed to parse CSS Selector `' + selector + '`',
+      });
+      return;
+    }
+
     if (selectorNeedsScope(selector)) {
       return;
     }
@@ -99,6 +121,11 @@ module.exports = function (context) {
     });
   }
 
+  /**
+   * @param {CompilerNode} node
+   * @param {number} argIndex
+   * @return {string}
+   */
   function getSelector(node, argIndex) {
     const arg = node.arguments[argIndex];
     let selector;
@@ -124,6 +151,8 @@ module.exports = function (context) {
             );
 
             if (callee.name === 'escapeCssSelectorIdent') {
+              // Add in a basic identifier to represent the call.
+              accumulator += 'foo';
               if (inNthChild) {
                 context.report({
                   node: expression,
@@ -135,6 +164,8 @@ module.exports = function (context) {
               }
               continue;
             } else if (callee.name === 'escapeCssSelectorNth') {
+              // Add in a basic nth-selector to represent the call.
+              accumulator += '1';
               if (!inNthChild) {
                 context.report({
                   node: expression,
@@ -157,7 +188,7 @@ module.exports = function (context) {
         });
       }
 
-      selector = quasis.join('');
+      selector = accumulator + quasis[quasis.length - 1];
     } else {
       if (arg.type === 'BinaryExpression') {
         context.report({node: arg, message: 'Use a template literal string'});
@@ -165,18 +196,35 @@ module.exports = function (context) {
       selector = 'dynamic value';
     }
 
+    return selector;
+  }
+
+  /**
+   * @param {string} selector
+   * @return {boolean}
+   */
+  function isValidSelector(selector) {
+    try {
+      cssWhat.parse(selector);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  /**
+   * Checks if the selector is using grandchild selector semantics
+   * `node.querySelector('child grandchild')` or `'child>grandchild'` But,
+   * specifically allow multi-selectors `'div, span'`.
+   * @param {string} selector
+   * @return {boolean}
+   */
+  function selectorNeedsScope(selector) {
     // strip out things that can't affect children selection
     selector = selector.replace(/\(.*\)|\[.*\]/, function (match) {
       return match[0] + match[match.length - 1];
     });
 
-    return selector;
-  }
-
-  // Checks if the selector is using grandchild selector semantics
-  // `node.querySelector('child grandchild')` or `'child>grandchild'` But,
-  // specifically allow multi-selectors `'div, span'`.
-  function selectorNeedsScope(selector) {
     // This regex actually verifies there is no whitespace (implicit child
     // semantics) or `>` chars (direct child semantics). The one exception is
     // for `,` multi-selectors, which can have whitespace.
diff --git a/build-system/eslint-rules/unused-private-field.js b/build-system/eslint-rules/unused-private-field.js
index 62a7b68b8341d..c63215294da67 100644
--- a/build-system/eslint-rules/unused-private-field.js
+++ b/build-system/eslint-rules/unused-private-field.js
@@ -19,13 +19,27 @@ module.exports = {
   meta: {
     fixable: 'code',
   },
-
   create(context) {
+    /**
+     * @type {{
+     *   used: Set,
+     *   declared: Map,
+     * }[]}
+     * */
     const stack = [];
+    /**
+     * @return {{
+     *   used: Set,
+     *   declared: Map,
+     * }}
+     */
     function current() {
       return stack[stack.length - 1];
     }
 
+    /**
+     * @return {boolean}
+     */
     function shouldIgnoreFile() {
       return /\b(test|examples)\b/.test(context.getFilename());
     }
@@ -37,6 +51,10 @@ module.exports = {
       '@override': uncheckableUse,
     };
 
+    /**
+     * @param {CompilerNode} node
+     * @return {Function(): void|void}
+     */
     function checkerForAnnotation(node) {
       const comments = context.getCommentsBefore(node);
 
@@ -53,7 +71,12 @@ module.exports = {
       return unannotatedUse;
     }
 
-    // Restricteds must be used in the file, but not in the class.
+    /**
+     * Restricteds must be used in the file, but not in the class.
+     * @param {CompilerNode} node
+     * @param {string} name
+     * @param {boolean} used
+     */
     function restrictedUse(node, name, used) {
       if (used) {
         const message = [
@@ -105,7 +128,13 @@ module.exports = {
       context.report({node, message});
     }
 
-    // VisibleForTestings must not be used in the class.
+    /**
+     * VisibleForTestings must not be used in the class.
+     *
+     * @param {CompilerNode} node
+     * @param {string} name
+     * @param {boolean} used
+     */
     function visibleForTestingUse(node, name, used) {
       if (!used) {
         return;
@@ -119,12 +148,20 @@ module.exports = {
       context.report({node, message});
     }
 
-    // Protected and Override are uncheckable. Let Closure handle that.
+    /**
+     * Protected and Override are uncheckable. Let Closure handle that.
+     */
     function uncheckableUse() {
       // Noop.
     }
 
-    // Unannotated fields must be used in the class
+    /**
+     * Unannotated fields must be used in the class
+     *
+     * @param {CompilerNode} node
+     * @param {string} name
+     * @param {boolean} used
+     */
     function unannotatedUse(node, name, used) {
       if (used) {
         return;
@@ -141,6 +178,11 @@ module.exports = {
       context.report({node, message});
     }
 
+    /**
+     * @param {CompilerNode} node
+     * @param {boolean=} needsThis
+     * @return {boolean}
+     */
     function shouldCheckMember(node, needsThis = true) {
       const {computed, object, property} = node;
       if (
@@ -154,6 +196,10 @@ module.exports = {
       return isPrivateName(property);
     }
 
+    /**
+     * @param {CompilerNode} node
+     * @return {boolean}
+     */
     function isAssignment(node) {
       const {parent} = node;
       if (!parent) {
@@ -162,6 +208,10 @@ module.exports = {
       return parent.type === 'AssignmentExpression' && parent.left === node;
     }
 
+    /**
+     * @param {CompilerNode} node
+     * @return {boolean}
+     */
     function isPrivateName(node) {
       return node.name.endsWith('_');
     }
@@ -180,7 +230,7 @@ module.exports = {
           return;
         }
 
-        const {used, declared} = stack.pop();
+        const {declared, used} = stack.pop();
 
         declared.forEach((node, name) => {
           const checker = checkerForAnnotation(node);
diff --git a/build-system/eslint-rules/vsync.js b/build-system/eslint-rules/vsync.js
index 317c3c2cf649a..5a875e873ed16 100644
--- a/build-system/eslint-rules/vsync.js
+++ b/build-system/eslint-rules/vsync.js
@@ -32,13 +32,12 @@ module.exports = function (context) {
         return;
       }
 
-      if (property.leadingComments) {
-        const ok = property.leadingComments.some((comment) => {
-          return comment.value === 'OK';
-        });
-        if (ok) {
-          return;
-        }
+      const leadingComments = context.getCommentsBefore(property);
+      const ok = leadingComments.some((comment) => {
+        return comment.value === 'OK';
+      });
+      if (ok) {
+        return;
       }
 
       context.report({
diff --git a/build-system/externs/OWNERS b/build-system/externs/OWNERS
index 66f01bd6d028e..55a36524d91d2 100644
--- a/build-system/externs/OWNERS
+++ b/build-system/externs/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/build-system/externs/amp.extern.js b/build-system/externs/amp.extern.js
index 518b470ef05ed..11f7bceb7d8bf 100644
--- a/build-system/externs/amp.extern.js
+++ b/build-system/externs/amp.extern.js
@@ -31,7 +31,8 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
  *
  * @typedef {{
- *   body: (!JsonObject|!FormData|!FormDataWrapperInterface|undefined|string),
+ *   responseType: (string|undefined),
+ *   body: (!JsonObject|!FormData|!FormDataWrapperInterface|!Array|string|undefined|null),
  *   cache: (string|undefined),
  *   credentials: (string|undefined),
  *   headers: (!JsonObject|undefined),
@@ -42,47 +43,63 @@
  *   prerenderSafe: (boolean|undefined),
  * }}
  */
-var FetchInitDef;
+let FetchInitDef;
+
+// TODO: add MediaQueryListEvent to closure's builtin externs.
+/**
+ * @typedef {{
+ *   matches: function():boolean,
+ *   media: string
+ * }}
+ */
+let MediaQueryListEvent;
 
 /**
  * Externed due to being passed across component/runtime boundary.
  * @typedef {{xhrUrl: string, fetchOpt: !FetchInitDef}}
  */
-var FetchRequestDef;
+let FetchRequestDef;
 
 /** @constructor */
-var FormDataWrapperInterface = function () {};
+let FormDataWrapperInterface = function () {};
 
 FormDataWrapperInterface.prototype.entries = function () {};
 FormDataWrapperInterface.prototype.getFormData = function () {};
 
 FormData.prototype.entries = function () {};
 
-/**
- * A type for Objects that can be JSON serialized or that come from
- * JSON serialization. Requires the objects fields to be accessed with
- * bracket notation object['name'] to make sure the fields do not get
- * obfuscated.
- * @constructor
- * @dict
- */
-function JsonObject() {}
-
-/**
- * @typedef {{
- *   YOU_MUST_USE: string,
- *   jsonLiteral: function(),
- *   TO_MAKE_THIS_TYPE: string,
- * }}
- */
-var InternalJsonLiteralTypeDef;
-
 /**
  * Force the dataset property to be handled as a JsonObject.
  * @type {!JsonObject}
  */
 Element.prototype.dataset;
 
+/** Needed for partial shadow DOM polyfill used in shadow docs. */
+Element.prototype.__AMP_SHADOW_ROOT;
+
+/** @type {?ShadowRoot} */
+Element.prototype.shadowRoot;
+
+// Fullscreen methods
+// TODO: upstream these types to closure.
+Document.prototype.cancelFullScreen;
+Document.prototype.webkitExitFullscreen;
+Element.prototype.cancelFullScreen;
+Element.prototype.exitFullscreen;
+Element.prototype.webkitExitFullscreen;
+Element.prototype.webkitCancelFullScreen;
+Element.prototype.mozCancelFullScreen;
+Element.prototype.msExitFullscreen;
+Element.prototype.requestFullscreen;
+Element.prototype.requestFullScreen;
+Element.prototype.webkitRequestFullscreen;
+Element.prototype.webkitEnterFullscreen;
+Element.prototype.msRequestFullscreen;
+Element.prototype.mozRequestFullScreen;
+
+/** @type {boolean|undefined} */
+Element.prototype.webkitDisplayingFullscreen;
+
 /**
  * - n is the name.
  * - f is the function body of the extension.
@@ -96,25 +113,53 @@ Element.prototype.dataset;
  */
 function ExtensionPayload() {}
 
-/** @type {string} */
+/**
+ * Extension name.
+ * @type {string}
+ */
 ExtensionPayload.prototype.n;
 
-/** @type {function(!Object,!Object)} */
-ExtensionPayload.prototype.f;
+/**
+ * Extension version.
+ * @type {string}
+ */
+ExtensionPayload.prototype.ev;
+
+/**
+ * Whether this extension version is the latest version.
+ * @type {boolean}
+ */
+ExtensionPayload.prototype.l;
 
-/** @type {string|undefined} */
+/**
+ * Priority.
+ * @type {string|undefined}
+ */
 ExtensionPayload.prototype.p;
 
-/** @type {string} */
+/**
+ * RTV (release) version.
+ * @type {string}
+ */
 ExtensionPayload.prototype.v;
 
-/** @type {!Array<string>|string|undefined} */
-ExtensionPayload.prototype.i;
+/**
+ * If the value of "m" is 1 then the current extension is of type "module",
+ * else it is of type "nomodule".
+ * @type {number}
+ */
+ExtensionPayload.prototype.m;
+
+/**
+ * Install function.
+ * @type {function(!Object,!Object)}
+ */
+ExtensionPayload.prototype.f;
 
 /**
  * @typedef {?JsonObject|undefined|string|number|!Array<JsonValue>}
  */
-var JsonValue;
+let JsonValue;
 
 /**
  * @constructor
@@ -143,16 +188,13 @@ VideoAnalyticsDetailsDef.prototype.state;
 VideoAnalyticsDetailsDef.prototype.width;
 
 // Node.js global
-var process = {};
+let process = {};
 process.env;
 process.env.NODE_ENV;
 
-/** @type {boolean|undefined} */
-window.IS_AMP_ALT;
-
 // Exposed to ads.
 // Preserve these filedNames so they can be accessed by 3p code.
-window.context = {};
+window.context;
 window.context.sentinel;
 window.context.clientId;
 window.context.initialLayoutRect;
@@ -181,23 +223,39 @@ window.context.tagName;
 
 // Safeframe
 // TODO(bradfrizzell) Move to its own extern. Not relevant to all AMP.
-/* @type {?Object} */
-window.sf_ = {};
-/* @type {?Object} */
+window.sf_;
 window.sf_.cfg;
 
 // Exposed to custom ad iframes.
-/* @type {!Function} */
+/** @type {function(function(!Object, function(!Object)), !Array<string>=, !Array<string>=)} */
 window.draw3p;
 
 // AMP's globals
+window.testLocation;
+window.Location.originalHash;
 window.__AMP_SERVICES;
 window.__AMP_TEST;
 window.__AMP_TEST_IFRAME;
 window.__AMP_TAG;
 window.__AMP_TOP;
 window.__AMP_PARENT;
-window.AMP = {};
+window.__AMP_WEAKREF_ID;
+window.__AMP_URL_CACHE;
+window.__AMP_LOG;
+
+/** @type {undefined|boolean} */
+window.ENABLE_LOG;
+
+// TODO: uncomment line below when src/mode.js is added to typechecking.
+// https://github.com/ampproject/amphtml/issues/34099
+
+// /** @type {undefined|../../src/mode.ModeDef} */
+window.__AMP_MODE;
+
+/** @type {boolean|undefined} */
+window.AMP_DEV_MODE;
+
+window.AMP;
 window.AMP._ = {};
 window.AMP.push;
 window.AMP.title;
@@ -207,7 +265,6 @@ window.AMP.ampdoc;
 window.AMP.config;
 window.AMP.config.urls;
 window.AMP.BaseElement;
-window.AMP.BaseTemplate;
 window.AMP.registerElement;
 window.AMP.registerTemplate;
 window.AMP.registerServiceForDoc;
@@ -216,11 +273,20 @@ window.AMP.toggleExperiment;
 window.AMP.setLogLevel;
 window.AMP.setTickFunction;
 window.AMP.viewer;
-window.AMP.viewport = {};
+window.AMP.viewport;
 window.AMP.viewport.getScrollLeft;
 window.AMP.viewport.getScrollWidth;
 window.AMP.viewport.getWidth;
 
+/**
+ * This symbol is exposed by bundles transformed by `scoped-require.js` to avoid
+ * polluting the global namespace with `require`.
+ * It allows AMP extensions to consume code injected into their binaries that
+ * cannot be run through Closure Compiler, e.g. React code with JSX.
+ * @type {!function(string):?}
+ */
+window.AMP.require;
+
 /** @type {function(!HTMLElement, !Document, !string, Object)} */
 window.AMP.attachShadowDoc = function (element, document, url, options) {};
 
@@ -314,7 +380,7 @@ let VegaParser;
  * @typedef {{parse: VegaParser}}
  */
 let VegaObject;
-/* @type {!VegaObject} */
+/** @type {!VegaObject} */
 window.vg;
 
 // amp-date-picker externs
@@ -323,15 +389,30 @@ window.vg;
  */
 let ReactRender = function () {};
 
+/** @constructor */
+let RRule;
+/**
+ * @param {Date} unusedDt
+ * @param {boolean=} unusedInc
+ * @return {?Date}
+ */
+RRule.prototype.before = function (unusedDt, unusedInc) {};
+/**
+ * @param {Date} unusedDt
+ * @param {boolean=} unusedInc
+ * @return {?Date}
+ */
+RRule.prototype.after = function (unusedDt, unusedInc) {};
+
 /**
  * @dict
  */
 let PropTypes = {};
 
 /**
- * @@dict
+ * @dict
  */
-let ReactDates = {};
+let ReactDates;
 
 /** @constructor */
 ReactDates.DayPickerSingleDateController;
@@ -363,7 +444,7 @@ ReactDatesConstants.HORIZONTAL_ORIENTATION;
 /**
  * @constructor
  */
-var Inputmask = class {};
+let Inputmask = class {};
 
 /** @param {!Object} unusedOpts */
 Inputmask.extendAliases = function (unusedOpts) {};
@@ -385,37 +466,165 @@ window.AMP.dependencies = {};
  */
 window.AMP.dependencies.inputmaskFactory = function (unusedElement) {};
 
-// Should have been defined in the closure compiler's extern file for
-// IntersectionObserverEntry, but appears to have been omitted.
-IntersectionObserverEntry.prototype.rootBounds;
-
 // TODO (remove after we update closure compiler externs)
 window.PerformancePaintTiming;
 window.PerformanceObserver;
 Object.prototype.entryTypes;
+Window.prototype.origin;
+HTMLAnchorElement.prototype.origin;
 
 /** @typedef {number}  */
-var time;
-
-/**
- * This type signifies a callback that can be called to remove the listener.
- * @typedef {function()}
- */
-var UnlistenDef;
+let time;
 
 /**
  * Just an element, but used with AMP custom elements..
- * @typedef {!Element}
+ * @constructor @extends {HTMLElement}
  */
-var AmpElement;
+let AmpElement = function () {};
+
+/** @return {boolean} */
+AmpElement.prototype.R1 = function () {};
+
+/** @return {boolean} */
+AmpElement.prototype.deferredMount = function () {};
 
 /** @return {!Signals} */
 AmpElement.prototype.signals = function () {};
 
-var Signals = class {};
+/** */
+AmpElement.prototype.pause = function () {};
+
+/** */
+AmpElement.prototype.unmount = function () {};
+
+/**
+ * @param {number=} opt_parentPriority
+ * @return {!Promise}
+ */
+AmpElement.prototype.ensureLoaded = function (opt_parentPriority) {};
+
+/** @return {?Element} */
+AmpElement.prototype.getPlaceholder = function () {};
+
+/** @param {boolean} show */
+AmpElement.prototype.togglePlaceholder = function (show) {};
+
+/** @return {{width: number, height: number}} */
+AmpElement.prototype.getLayoutSize = function () {};
+
+/**
+ * TODO: remove this when typechecking is restored to AMP.BaseElement.
+ * @typedef {*}
+ */
+let BaseElement;
+
+/**
+ * @param {boolean=} opt_waitForBuild
+ * @return {!Promise<!BaseElement>}
+ */
+AmpElement.prototype.getImpl = function (opt_waitForBuild) {};
+
+/** @return {!Promise} */
+AmpElement.prototype.buildInternal = function () {};
+
+/** @return {!Promise} */
+AmpElement.prototype.mountInternal = function () {};
+
+/** @return {boolean} */
+AmpElement.prototype.isBuilt = function () {};
+
+/** @return {boolean} */
+AmpElement.prototype.isBuilding = function () {};
+
+/** @return {number} */
+AmpElement.prototype.getBuildPriority = function () {};
+
+/** @return {number} */
+AmpElement.prototype.getLayoutPriority = function () {};
+
+/** @return {boolean} */
+AmpElement.prototype.isRelayoutNeeded = function () {};
+
+/** @return {boolean|number} */
+AmpElement.prototype.renderOutsideViewport = function () {};
+
+/** @return {boolean|number} */
+AmpElement.prototype.idleRenderOutsideViewport = function () {};
+
+/** @type {number|undefined} */
+AmpElement.prototype.layoutScheduleTime;
+
+/** @return {!Promise} */
+AmpElement.prototype.layoutCallback = function () {};
+
+/** */
+AmpElement.prototype.unlayoutCallback = function () {};
+
+/** @return {!Promise} */
+AmpElement.prototype.whenLoaded = function () {};
+
+/** @param {boolean} pretendDisconnected */
+AmpElement.prototype.disconnect = function (pretendDisconnected) {};
+
+/** @return {boolean} */
+AmpElement.prototype.reconstructWhenReparented = function () {};
+
+/** @return {boolean} */
+AmpElement.prototype.isBuildRenderBlocking = function () {};
+
+/** @return {boolean} */
+AmpElement.prototype.prerenderAllowed = function () {};
+
+/** @return {string} */
+AmpElement.prototype.getLayout = function () {};
+
+/**
+ * @param {{width: number, height: number, top: number, bottom: number}} layoutBox
+ * @param {boolean=} opt_sizeChanged
+ */
+AmpElement.prototype.updateLayoutBox = function (layoutBox, opt_sizeChanged) {};
+
+/** */
+AmpElement.prototype.collapsedCallback = function () {};
+
+/** @return {boolean} */
+AmpElement.prototype.isUpgraded = function () {};
+
+/** @return {number} */
+AmpElement.prototype.getUpgradeDelayMs = function () {};
+
+/**
+ * @param {boolean} overflown
+ * @param {number|undefined} requestedHeight
+ * @param {number|undefined} requestedWidth
+ */
+AmpElement.prototype.overflowCallback = function (
+  overflown,
+  requestedHeight,
+  requestedWidth
+) {};
+
+/**
+ * @param {number|undefined} newHeight
+ * @param {number|undefined} newWidth
+ * @param {?} opt_newMargins
+ */
+AmpElement.prototype.applySize = function (
+  newHeight,
+  newWidth,
+  opt_newMargins
+) {};
+
+/** */
+AmpElement.prototype.expand = function () {};
+
+/** */
+AmpElement.prototype.collapse = function () {};
+
+let Signals = class {};
 /**
  * @param {string} unusedName
- * @return {number|!Error|null}
+ * @return {?number|?Error}
  */
 Signals.prototype.get = function (unusedName) {};
 
@@ -442,19 +651,19 @@ Signals.prototype.reset = function (unusedName) {};
 
 // Temp until we figure out forward declarations
 /** @constructor */
-var AccessService = function () {};
+let AccessService = function () {};
 /** @constructor @struct */
-var UserNotificationManager = function () {};
+let UserNotificationManager = function () {};
 UserNotificationManager.prototype.get;
 /** @constructor @struct */
-var Cid = function () {};
+let Cid = function () {};
 /** @constructor @struct */
-var Activity = function () {};
+let Activity = function () {};
 /** @constructor */
-var AmpStoryVariableService = function () {};
+let AmpStoryVariableService = function () {};
 
 // data
-var data;
+let data;
 data.tweetid;
 data.requestedHeight;
 data.requestedWidth;
@@ -502,7 +711,7 @@ data.sitekey;
 data.fortesting;
 
 // 3p code
-var twttr;
+let twttr;
 twttr.events;
 twttr.events.bind;
 twttr.widgets;
@@ -510,26 +719,26 @@ twttr.widgets.createTweet;
 twttr.widgets.createMoment;
 twttr.widgets.createTimeline;
 
-var FB;
+let FB;
 FB.init;
 
-var gist;
+let gist;
 gist.gistid;
 
-var bodymovin;
+let bodymovin;
 bodymovin.loadAnimation;
-var animationHandler;
+let animationHandler;
 animationHandler.play;
 animationHandler.pause;
 animationHandler.stop;
 animationHandler.goToAndStop;
 animationHandler.totalFrames;
 
-var grecaptcha;
+let grecaptcha;
 grecaptcha.execute;
 
 // Validator
-var amp;
+let amp;
 amp.validator;
 amp.validator.validateUrlAndLog = function (string, doc) {};
 
@@ -551,7 +760,7 @@ AccessService.prototype.getAuthdataField = function (field) {};
  *   cookieName: (string|undefined),
  * }}
  */
-var GetCidDef;
+let GetCidDef;
 /**
  * @param {string|!GetCidDef} externalCidScope Name of the fallback cookie
  *     for the case where this doc is not served by an AMP proxy. GetCidDef
@@ -585,57 +794,60 @@ AmpStoryVariableService.prototype.onStateChange = function (event) {};
 AmpStoryVariableService.pageIndex;
 AmpStoryVariableService.pageId;
 
-var AMP = {};
-window.AMP;
-// Externed explicitly because we do not export Class shaped names
-// by default.
-/**
- * This uses the internal name of the type, because there appears to be no
- * other way to reference an ES6 type from an extern that is defined in
- * the app.
- * @constructor @struct
- * @extends {BaseElement$$module$src$base_element}
- */
-AMP.BaseElement = class {
-  /** @param {!AmpElement} element */
-  constructor(element) {}
-};
-
-/**
- * This uses the internal name of the type, because there appears to be no
- * other way to reference an ES6 type from an extern that is defined in
- * the app.
- * @constructor @struct
- * @extends {AmpAdXOriginIframeHandler$$module$extensions$amp_ad$0_1$amp_ad_xorigin_iframe_handler}
- */
-AMP.AmpAdXOriginIframeHandler = class {
-  /**
-   * @param {!AmpAd3PImpl$$module$extensions$amp_ad$0_1$amp_ad_3p_impl|!AmpA4A$$module$extensions$amp_a4a$0_1$amp_a4a} baseInstance
-   */
-  constructor(baseInstance) {}
-};
-
-/**
- * This uses the internal name of the type, because there appears to be no
- * other way to reference an ES6 type from an extern that is defined in
- * the app.
- * @constructor @struct
- * @extends {AmpAdUIHandler$$module$extensions$amp_ad$0_1$amp_ad_ui}
- */
-AMP.AmpAdUIHandler = class {
-  /**
-   * @param {!AMP.BaseElement} baseInstance
-   */
-  constructor(baseInstance) {}
-};
-
-AMP.BaseTemplate;
-
-AMP.RealTimeConfigManager;
+// TODO: uncomment when typechecking restored to BaseElement.
+// https://github.com/ampproject/amphtml/issues/34099
+
+// // Externed explicitly because we do not export Class shaped names
+// // by default.
+// /**
+//  * This uses the internal name of the type, because there appears to be no
+//  * other way to reference an ES6 type from an extern that is defined in
+//  * the app.
+//  * @constructor @struct
+//  * @extends {BaseElement$$module$src$base_element}
+//  */
+// AMP.BaseElement = class {
+//   /** @param {!AmpElement} element */
+//   constructor(element) {}
+// };
+
+// TODO: uncomment when typechecking restored to AmpAdXOriginIframeHandler.
+// https://github.com/ampproject/amphtml/issues/34099
+
+// /**
+//  * This uses the internal name of the type, because there appears to be no
+//  * other way to reference an ES6 type from an extern that is defined in
+//  * the app.
+//  * @constructor @struct
+//  * @extends {AmpAdXOriginIframeHandler$$module$extensions$amp_ad$0_1$amp_ad_xorigin_iframe_handler}
+//  */
+// AMP.AmpAdXOriginIframeHandler = class {
+//   /**
+//    * @param {!AmpAd3PImpl$$module$extensions$amp_ad$0_1$amp_ad_3p_impl|!AmpA4A$$module$extensions$amp_a4a$0_1$amp_a4a} baseInstance
+//    */
+//   constructor(baseInstance) {}
+// };
+
+// TODO: uncomment when typechecking is restored to AmpAdUIHandler.
+// https://github.com/ampproject/amphtml/issues/34099
+
+// /**
+//  * This uses the internal name of the type, because there appears to be no
+//  * other way to reference an ES6 type from an extern that is defined in
+//  * the app.
+//  * @constructor @struct
+//  * @extends {AmpAdUIHandler$$module$extensions$amp_ad$0_1$amp_ad_ui}
+//  */
+// AMP.AmpAdUIHandler = class {
+//   /**
+//    * @param {!AMP.BaseElement} baseInstance
+//    */
+//   constructor(baseInstance) {}
+// };
 
 /**
  * Actual filled values for this exists in
- * extensions/amp-a4a/0.1/real-time-config-manager.js
+ * src/service/real-time-config/real-time-config-impl.js
  * @enum {string}
  */
 const RTC_ERROR_ENUM = {};
@@ -645,16 +857,7 @@ const RTC_ERROR_ENUM = {};
       rtcTime: number,
       callout: string,
       error: (RTC_ERROR_ENUM|undefined)}} */
-var rtcResponseDef;
-
-/**
- * This symbol is exposed by browserify bundles transformed by
- * `scoped-require.js` to avoid polluting the global namespace with `require`.
- * It allows AMP extensions to consume code injected into their binaries that
- * cannot be run through Closure Compiler, e.g. React code with JSX.
- * @type {!function(string):?}
- */
-AMP.require;
+let rtcResponseDef;
 
 /**
  * TransitionDef function that accepts normtime, typically between 0 and 1 and
@@ -664,7 +867,7 @@ AMP.require;
  * transition and "false" for ongoing.
  * @typedef {function(number, boolean):?|function(number):?}
  */
-var TransitionDef;
+let TransitionDef;
 
 ///////////////////
 // amp-bind externs
@@ -743,7 +946,7 @@ let BindSetStateOptionsDef;
  *   !WebKeyframeAnimationDef
  * }
  */
-var WebAnimationDef;
+let WebAnimationDef;
 
 /**
  * @mixes WebAnimationSelectorDef
@@ -754,7 +957,7 @@ var WebAnimationDef;
  *   animations: !Array<!WebAnimationDef>,
  * }}
  */
-var WebMultiAnimationDef;
+let WebMultiAnimationDef;
 
 /**
  * @mixes WebAnimationSelectorDef
@@ -765,7 +968,7 @@ var WebMultiAnimationDef;
  *   switch: !Array<!WebAnimationDef>,
  * }}
  */
-var WebSwitchAnimationDef;
+let WebSwitchAnimationDef;
 
 /**
  * @mixes WebAnimationSelectorDef
@@ -776,7 +979,7 @@ var WebSwitchAnimationDef;
  *   animation: string,
  * }}
  */
-var WebCompAnimationDef;
+let WebCompAnimationDef;
 
 /**
  * @mixes WebAnimationSelectorDef
@@ -787,12 +990,12 @@ var WebCompAnimationDef;
  *   keyframes: (string|!WebKeyframesDef),
  * }}
  */
-var WebKeyframeAnimationDef;
+let WebKeyframeAnimationDef;
 
 /**
  * @typedef {!Object<string, *>|!Array<!Object<string, *>>}
  */
-var WebKeyframesDef;
+let WebKeyframesDef;
 
 /**
  * See https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffectTimingProperties
@@ -809,7 +1012,7 @@ var WebKeyframesDef;
  *   fill: (?|undefined),
  * }}
  */
-var WebAnimationTimingDef;
+let WebAnimationTimingDef;
 
 /**
  * Indicates an extension to a type that allows specifying vars. Vars are
@@ -818,7 +1021,7 @@ var WebAnimationTimingDef;
  * @mixin
  * @typedef {Object}
  */
-var WebAnimationVarsDef;
+let WebAnimationVarsDef;
 
 /**
  * Defines media parameters for an animation.
@@ -829,7 +1032,7 @@ var WebAnimationVarsDef;
  *   supports: (string|undefined),
  * }}
  */
-var WebAnimationConditionalDef;
+let WebAnimationConditionalDef;
 
 /**
  * @typedef {{
@@ -838,7 +1041,7 @@ var WebAnimationConditionalDef;
  *   subtargets: (!Array<!WebAnimationSubtargetDef>|undefined),
  * }}
  */
-var WebAnimationSelectorDef;
+let WebAnimationSelectorDef;
 
 /**
  * @mixes WebAnimationTimingDef
@@ -849,9 +1052,9 @@ var WebAnimationSelectorDef;
  *   selector: (string|undefined),
  * }}
  */
-var WebAnimationSubtargetDef;
+let WebAnimationSubtargetDef;
 
-var ampInaboxPositionObserver;
+let ampInaboxPositionObserver;
 ampInaboxPositionObserver.observe;
 ampInaboxPositionObserver.getTargetRect;
 ampInaboxPositionObserver.getViewportRect;
@@ -886,7 +1089,37 @@ class FeaturePolicy {
   getAllowlistForFeature(feature) {}
 }
 
+/** @type {boolean} */
+HTMLVideoElement.prototype.playsInline;
+
 /**
- * @type {?FeaturePolicy}
+ * Going through the standardization process now.
+ *
+ * See https://developers.google.com/web/updates/2019/02/constructable-stylesheets.
+ *
+ * @param {string} cssText
  */
-HTMLIFrameElement.prototype.featurePolicy;
+CSSStyleSheet.prototype.replaceSync = function (cssText) {};
+
+/**
+ * @constructor @struct
+ */
+function ResizeObserverSize() {}
+
+/** @type {number} */
+ResizeObserverSize.prototype.inlineSize;
+
+/** @type {number} */
+ResizeObserverSize.prototype.blockSize;
+
+/** @type {!Array<!ResizeObserverSize>|undefined} */
+ResizeObserverEntry.prototype.borderBoxSize;
+
+/** @type {?function(!MediaQueryListEvent)} */
+MediaQueryList.prototype.onchange;
+
+/** @type {!Array<!CSSStyleSheet>|undefined} */
+ShadowRoot.prototype.adoptedStyleSheets;
+
+/** @type {undefined|boolean} */
+Error.prototype.expected;
diff --git a/build-system/externs/amp.multipass.extern.js b/build-system/externs/amp.multipass.extern.js
deleted file mode 100644
index 7c2a3259fdf8c..0000000000000
--- a/build-system/externs/amp.multipass.extern.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-/** @externs */
-
-// Place externs here if they are only needed in legacy multi pass compilation.
-
-var SomeBaseElementLikeClass;
-SomeBaseElementLikeClass.prototype.layout_;
-
-/** @type {boolean} */
-SomeBaseElementLikeClass.prototype.inViewport_;
-
-SomeBaseElementLikeClass.prototype.actionMap_;
-
-SomeBaseElementLikeClass.prototype.defaultActionAlias_;
-
-// Externed explicitly because this private property is read across
-// binaries.
-Element.prototype.implementation_ = {};
diff --git a/build-system/externs/dompurify.extern.js b/build-system/externs/dompurify.extern.js
index 85d0759ad78f8..648eaae6b09a7 100644
--- a/build-system/externs/dompurify.extern.js
+++ b/build-system/externs/dompurify.extern.js
@@ -23,8 +23,7 @@ DomPurifyConfig.prototype.ALLOWED_TAGS;
 DomPurifyConfig.prototype.ALLOWED_ATTR;
 DomPurifyConfig.prototype.FORBID_TAGS;
 DomPurifyConfig.prototype.FORBID_ATTR;
-/** @type {?Object} */
-DomPurifyConfig.prototype.USE_PROFILES = {};
+DomPurifyConfig.prototype.USE_PROFILES;
 /** @type {boolean} */
 DomPurifyConfig.prototype.USE_PROFILES.html;
 /** @type {boolean} */
diff --git a/build-system/externs/preact.extern.js b/build-system/externs/preact.extern.js
index 3e38cf308d5fd..1a435e13777ec 100644
--- a/build-system/externs/preact.extern.js
+++ b/build-system/externs/preact.extern.js
@@ -20,7 +20,7 @@
 var PreactDef = {};
 
 /**
- * @typedef {function(!JsonObject):PreactDef.Renderable}
+ * @typedef {function(?):PreactDef.Renderable}
  */
 PreactDef.FunctionalComponent;
 
@@ -31,11 +31,12 @@ PreactDef.VNode = function () {};
 
 /**
  * @interface
+ * @template T
  */
 PreactDef.Context = function () {};
 
 /**
- * @param {!JsonObject} props
+ * @param {{value: T, children: (?PreactDef.Renderable|undefined)}} props
  * @return {PreactDef.Renderable}
  */
 PreactDef.Context.prototype.Provider = function (props) {};
@@ -54,3 +55,8 @@ PreactDef.SimpleRenderable;
  * @typedef {PreactDef.SimpleRenderable|!PreactDef.VNode|!Array<PreactDef.SimpleRenderable|!PreactDef.VNode|!Array<PreactDef.SimpleRenderable|!PreactDef.VNode>>}
  */
 PreactDef.Renderable;
+
+/**
+ * @typedef {{__html: ?string}}
+ */
+PreactDef.InnerHTML;
diff --git a/build-system/global-configs/OWNERS b/build-system/global-configs/OWNERS
index 8b621ec46039a..6e93a82b6597f 100644
--- a/build-system/global-configs/OWNERS
+++ b/build-system/global-configs/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/build-system/global-configs/README.md b/build-system/global-configs/README.md
index 08384581a748d..bf758d0938508 100644
--- a/build-system/global-configs/README.md
+++ b/build-system/global-configs/README.md
@@ -7,16 +7,19 @@ besides 1 or 0.
 
 # experiments-config.json
 
-- `name`: Experiment name
-- `environment`: Specify the type of environment the experiment runs. Only support `AMP` and `INABOX`.
-- `command`: Command used to build the experiment
-- `issue`: The issue tracker URL for this experiment
-- `expiration_date_utc`: The experiment expiration date in YYYY-MM-DD format, in UTC. If an experiment is expired, it will fail the build process. This expiration date is only read during the build. As a result, the experiment will actually end on the following release date after the expiration.
-- `define_experiment_constant`: (Optional) The flag that is used to section out experiment code. This is passed into the `minify-replace` babel plugin and defaults to `false`. If an experiment relies on `minify-replace` to replace its experiment flag, this value must be defined.
+This config is used to run server side diverted experiments. Please review the instruction [here](../../docs/running-server-side-experiment.md) beforehand.
+
+-   `name`: Experiment name
+-   `environment`: Specify the type of environment the experiment runs. Only support `AMP` and `INABOX`.
+-   `issue`: The issue tracker URL for this experiment
+-   `expiration_date_utc`: The experiment expiration date in YYYY-MM-DD format, in UTC. If an experiment is expired, it will fail the build process. This expiration date is only read during the build. As a result, the experiment will actually end on the following release date after the expiration.
+-   `define_experiment_constant`: (Optional) The flag that is used to section out experiment code. This is passed into the `minify-replace` babel plugin and defaults to `false`. If an experiment relies on `minify-replace` to replace its experiment flag, this value must be defined.
+
+Experiments will be built automatically for AMP releases by running `amp dist --esm --define_experiment_constant ${define_experiment_constant} && amp dist --define_experiment_constant ${define_experiment_constant}`
 
 # custom-config.json
 
-If `build-system/global-configs/custom-config.json` exists at build time, its properties will overlay the active config. For example, consider `gulp dist --config=canary` with the following configs:
+If `build-system/global-configs/custom-config.json` exists at build time, its properties will overlay the active config. For example, consider `amp dist --config=canary` with the following configs:
 
 `canary-config.json` (simplified for brevity)
 
diff --git a/build-system/global-configs/canary-config.json b/build-system/global-configs/canary-config.json
index 404d2da0dda62..61c89917dd372 100644
--- a/build-system/global-configs/canary-config.json
+++ b/build-system/global-configs/canary-config.json
@@ -1,43 +1,24 @@
 {
-  "allow-doc-opt-in": [
-    "amp-next-page",
-    "analytics-chunks",
-    "analytics-chunks-inabox"
-  ],
-  "allow-url-opt-in": ["pump-early-frame"],
+  "allow-doc-opt-in": ["amp-next-page"],
+  "allow-url-opt-in": [],
   "canary": 1,
   "a4aProfilingRate": 0.01,
-  "adsense-ad-size-optimization": 0.01,
-  "amp-access-iframe": 1,
-  "amp-action-macro": 1,
-  "amp-ad-ff-adx-ady": 0.01,
-  "amp-auto-ads-adsense-holdout": 0.1,
-  "amp-consent-restrict-fullscreen": 1,
-  "amp-list-init-from-state": 1,
-  "amp-mega-menu": 1,
-  "amp-nested-menu": 1,
-  "amp-playbuzz": 1,
-  "amp-sidebar-swipe-to-dismiss": 1,
-  "amp-story-responsive-units": 1,
-  "amp-story-v1": 1,
-  "ampdoc-closest": 1,
-  "as-use-attr-for-format": 0.01,
-  "chunked-amp": 1,
+  "adsense-ad-size-optimization": 1,
   "doubleclickSraExp": 0.01,
   "doubleclickSraReportExcludedBlock": 0.1,
-  "fix-inconsistent-responsive-height-selection": 0,
-  "fixed-elements-in-lightbox": 1,
+  "dfp-render-on-idle-cwv-exp": 1,
+  "expand-json-targeting": 1,
   "flexAdSlots": 0.05,
-  "hidden-mutation-observer": 1,
-  "intersect-resources": 1,
+  "flexible-bitrate": 0.1,
   "ios-fixed-no-transfer": 1,
-  "layoutbox-invalidate-on-scroll": 1,
-  "pump-early-frame": 1,
-  "random-subdomain-for-safeframe": 0.1,
-  "swg-gpay-api": 1,
-  "swg-gpay-native": 1,
-  "version-locking": 1,
-  "amp-ad-no-center-css": 1,
-  "analytics-chunks": 1,
-  "fie-init-chunking": 0.1
+  "visibility-trigger-improvements": 1,
+  "ads-initialIntersection": 1,
+  "amp-cid-backup": 1,
+  "layout-aspect-ratio-css": 1,
+  "tcf-post-message-proxy-api": 1,
+  "amp-consent-granular-consent": 1,
+  "disable-a4a-non-sd": 1,
+  "3p-vendor-split": 1,
+  "story-ad-auto-advance": 1,
+  "story-ad-placements": 1
 }
diff --git a/build-system/global-configs/experiments-config.json b/build-system/global-configs/experiments-config.json
index cb92459501bbc..40e9e2f4360ca 100644
--- a/build-system/global-configs/experiments-config.json
+++ b/build-system/global-configs/experiments-config.json
@@ -1,12 +1,11 @@
 {
   "experimentA": {},
   "experimentB": {
-    "name": "MoveFixedLayer",
+    "name": "amp-img in the deferred mount mode",
     "environment": "AMP",
-    "command": "gulp dist --define_experiment_constant=MOVE_FIXED_LAYER",
-    "issue": "https://github.com/ampproject/amphtml/issues/27120",
-    "expiration_date_utc": "2021-01-01",
-    "define_experiment_constant": "MOVE_FIXED_LAYER"
+    "issue": "https://github.com/ampproject/amphtml/issues/31915",
+    "expiration_date_utc": "2021-06-30",
+    "define_experiment_constant": "R1_IMG_DEFERRED_BUILD"
   },
   "experimentC": {}
 }
diff --git a/build-system/global-configs/experiments-const.json b/build-system/global-configs/experiments-const.json
index 64f15e7af9e7e..332a29fe9a9f7 100644
--- a/build-system/global-configs/experiments-const.json
+++ b/build-system/global-configs/experiments-const.json
@@ -1,5 +1,6 @@
 {
-  "INTERSECTION_OBSERVER_POLYFILL": true,
-  "INTERSECTION_OBSERVER_POLYFILL_INABOX": true,
-  "MOVE_FIXED_LAYER": false
+  "INI_LOAD_INOB": true,
+  "NO_SIGNING_RTV": true,
+  "R1_IMG_DEFERRED_BUILD": false,
+  "WITHIN_VIEWPORT_INOB": false
 }
diff --git a/build-system/global-configs/prod-config.json b/build-system/global-configs/prod-config.json
index a3e0724177eee..6df5eef504926 100644
--- a/build-system/global-configs/prod-config.json
+++ b/build-system/global-configs/prod-config.json
@@ -1,43 +1,21 @@
 {
-  "allow-doc-opt-in": [
-    "amp-next-page",
-    "analytics-chunks",
-    "analytics-chunks-inabox"
-  ],
-  "allow-url-opt-in": ["pump-early-frame"],
+  "allow-doc-opt-in": ["amp-next-page"],
+  "allow-url-opt-in": [],
   "canary": 0,
   "a4aProfilingRate": 0.01,
-  "adsense-ad-size-optimization": 0.01,
-  "amp-access-iframe": 1,
-  "amp-action-macro": 1,
-  "amp-accordion-display-locking": 0.01,
-  "amp-ad-ff-adx-ady": 0.01,
-  "amp-auto-ads-adsense-holdout": 0.1,
-  "amp-consent-restrict-fullscreen": 1,
-  "amp-list-init-from-state": 1,
-  "amp-mega-menu": 1,
-  "amp-nested-menu": 1,
-  "amp-playbuzz": 1,
-  "amp-sidebar-swipe-to-dismiss": 1,
-  "amp-story-responsive-units": 1,
-  "amp-story-v1": 1,
-  "ampdoc-closest": 1,
-  "as-use-attr-for-format": 0.01,
-  "chunked-amp": 1,
+  "adsense-ad-size-optimization": 1,
   "doubleclickSraExp": 0.01,
   "doubleclickSraReportExcludedBlock": 0.1,
-  "fix-inconsistent-responsive-height-selection": 0,
-  "fixed-elements-in-lightbox": 1,
+  "expand-json-targeting": 1,
   "flexAdSlots": 0.05,
-  "hidden-mutation-observer": 1,
+  "flexible-bitrate": 0.1,
   "ios-fixed-no-transfer": 0,
-  "layoutbox-invalidate-on-scroll": 1,
-  "pump-early-frame": 1,
-  "random-subdomain-for-safeframe": 0.1,
-  "swg-gpay-api": 1,
-  "swg-gpay-native": 1,
-  "version-locking": 1,
-  "amp-ad-no-center-css": 1,
-  "analytics-chunks": 1,
-  "fie-init-chunking": 0.1
+  "visibility-trigger-improvements": 1,
+  "layout-aspect-ratio-css": 0,
+  "disable-a4a-non-sd": 1,
+  "tcf-post-message-proxy-api": 1,
+  "amp-consent-granular-consent": 1,
+  "amp-cid-backup": 1,
+  "3p-vendor-split": 0.5,
+  "story-ad-placements": 0.01
 }
diff --git a/build-system/global.d.ts b/build-system/global.d.ts
new file mode 100644
index 0000000000000..92379997e0dbf
--- /dev/null
+++ b/build-system/global.d.ts
@@ -0,0 +1,51 @@
+declare global {
+  interface CompilerNode {
+    type: string;
+    name: string;
+    arguments: [];
+    left: CompilerNode;
+    right: CompilerNode;
+  }
+
+  interface BabelPath {
+    node: CompilerNode;
+  }
+
+  interface EslintContext {
+    report: (val: any) => void;
+  }
+
+  interface Window {
+    queryXpath: (xpath: string, root: unknown /** Puppeteer.ElementHandle */) => unknown[] | null;
+    AMP: Function[];
+    viewer?: {
+      receivedMessages?: number;
+    };
+    __coverage__: any;
+  }
+
+  interface Error {
+    status?: string;
+  }
+
+  namespace Mocha {
+    interface TestFunction {
+      configure: Function;
+    }
+  }
+
+  namespace NodeJS {
+    interface Global {
+      repl?: () => Promise<unknown> & {
+        controller;
+        env;
+        continue;
+      };
+      Key?: string;
+      describes?: unknown;
+      expect?: Function;
+    }
+  }
+}
+
+export { }
diff --git a/build-system/npm-publish/build-npm-binaries.js b/build-system/npm-publish/build-npm-binaries.js
new file mode 100644
index 0000000000000..b892bc8848280
--- /dev/null
+++ b/build-system/npm-publish/build-npm-binaries.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview
+ * Builds npm binaries for specified Bento components.
+ */
+
+const [extension] = process.argv.slice(2);
+const {timedExecOrDie} = require('../pr-check/utils');
+const {updatePackages} = require('../common/update-packages');
+
+updatePackages();
+timedExecOrDie(`amp build --extensions=${extension} --core_runtime_only`);
+timedExecOrDie(`amp dist --extensions=${extension} --core_runtime_only`);
diff --git a/build-system/npm-publish/get-extensions.js b/build-system/npm-publish/get-extensions.js
new file mode 100644
index 0000000000000..8a484e634c5d1
--- /dev/null
+++ b/build-system/npm-publish/get-extensions.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview
+ * Gets Bento components to publish.
+ */
+
+const bundles = require('../compile/bundles.config.extensions.json');
+const extensions = bundles
+  .filter((bundle) => bundle.options?.npm)
+  .map((bundle) => ({'extension': bundle.name}));
+console /*OK*/
+  .log(JSON.stringify(extensions));
diff --git a/build-system/npm-publish/write-package-files.js b/build-system/npm-publish/write-package-files.js
new file mode 100644
index 0000000000000..2aa67247891d5
--- /dev/null
+++ b/build-system/npm-publish/write-package-files.js
@@ -0,0 +1,151 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview
+ * Creates npm package files for a given component and AMP version.
+ */
+
+const [extension, ampVersion] = process.argv.slice(2);
+const {log} = require('../common/logging');
+const {stat, writeFile} = require('fs/promises');
+const {valid} = require('semver');
+
+/**
+ * Determines whether to skip
+ * @param {string} extensionVersion
+ * @return {Promise<boolean>}
+ */
+async function shouldSkip(extensionVersion) {
+  try {
+    await stat(`extensions/${extension}/${extensionVersion}`);
+    return false;
+  } catch {
+    log(`${extension} ${extensionVersion} : skipping, does not exist`);
+    return true;
+  }
+}
+
+/**
+ * Write package.json
+ * @param {string} extensionVersion
+ */
+async function writePackageJson(extensionVersion) {
+  const extensionVersionArr = extensionVersion.split('.', 2);
+  const major = extensionVersionArr[0];
+  const minor = ampVersion.slice(0, 10);
+  const patch = Number(ampVersion.slice(-3)); // npm trims leading zeroes in patch number, so mimic this in package.json
+  const version = `${major}.${minor}.${patch}`;
+  if (
+    !valid(version) ||
+    ampVersion.length != 13 ||
+    extensionVersionArr[1] !== '0'
+  ) {
+    log(
+      'Invalid semver version',
+      version,
+      'or AMP version',
+      ampVersion,
+      'or extension version',
+      extensionVersion
+    );
+    process.exitCode = 1;
+    return;
+  }
+
+  const json = {
+    name: `@ampproject/${extension}`,
+    version,
+    description: `AMP HTML ${extension} Component`,
+    author: 'The AMP HTML Authors',
+    license: 'Apache-2.0',
+    main: './dist/component.js',
+    module: './dist/component-preact.module.js',
+    exports: {
+      '.': './preact',
+      './preact': {
+        import: './dist/component-preact.module.js',
+        require: './dist/component-preact.js',
+      },
+      './react': {
+        import: './dist/component-react.module.js',
+        require: './dist/component-react.js',
+      },
+    },
+    files: ['dist/*', 'react.js'],
+    repository: {
+      type: 'git',
+      url: 'https://github.com/ampproject/amphtml.git',
+      directory: `extensions/${extension}/${extensionVersion}`,
+    },
+    homepage: `https://github.com/ampproject/amphtml/tree/main/extensions/${extension}/${extensionVersion}`,
+    peerDependencies: {
+      preact: '^10.2.1',
+      react: '^17.0.0',
+    },
+  };
+
+  try {
+    await writeFile(
+      `extensions/${extension}/${extensionVersion}/package.json`,
+      JSON.stringify(json, null, 2)
+    );
+    log(
+      extension,
+      extensionVersion,
+      ': created package.json for',
+      json.version
+    );
+  } catch (e) {
+    log(e);
+    process.exitCode = 1;
+    return;
+  }
+}
+
+/**
+ * Write react.js
+ * @param {string} extensionVersion
+ */
+async function writeReactJs(extensionVersion) {
+  const content = "module.exports = require('./dist/component-react');";
+  try {
+    await writeFile(
+      `extensions/${extension}/${extensionVersion}/react.js`,
+      content
+    );
+    log(extension, extensionVersion, ': created react.js');
+  } catch (e) {
+    log(e);
+    process.exitCode = 1;
+    return;
+  }
+}
+
+/**
+ * Main
+ */
+async function main() {
+  for (const version of ['1.0', '2.0']) {
+    if (await shouldSkip(version)) {
+      continue;
+    }
+    writePackageJson(version);
+    writeReactJs(version);
+  }
+}
+
+main();
diff --git a/build-system/pr-check/OWNERS b/build-system/pr-check/OWNERS
index 8425845cae3ee..002922bb9cc93 100644
--- a/build-system/pr-check/OWNERS
+++ b/build-system/pr-check/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/build-system/pr-check/build-targets.js b/build-system/pr-check/build-targets.js
index 87205da90bb37..6a3be40cb04d0 100644
--- a/build-system/pr-check/build-targets.js
+++ b/build-system/pr-check/build-targets.js
@@ -20,12 +20,75 @@
  * This script sets the build targets for our PR check, where the build targets
  * determine which tasks are required to run for pull request builds.
  */
-const colors = require('ansi-colors');
 const config = require('../test-configs/config');
+const globby = require('globby');
 const minimatch = require('minimatch');
 const path = require('path');
-const {gitDiffNameOnlyMaster} = require('../common/git');
-const {isTravisBuild} = require('../common/travis');
+const {cyan} = require('../common/colors');
+const {getLoggingPrefix, logWithoutTimestamp} = require('../common/logging');
+const {gitDiffNameOnlyMain} = require('../common/git');
+const {isCiBuild} = require('../common/ci');
+
+/**
+ * Used to prevent the repeated recomputing of build targets during PR jobs.
+ */
+let buildTargets;
+
+/**
+ * Used to prevent the repeated expansion of globs during PR jobs.
+ */
+const fileLists = {};
+
+/***
+ * All of AMP's build targets that can be tested during CI.
+ *
+ * @enum {string}
+ */
+const Targets = {
+  AVA: 'AVA',
+  BABEL_PLUGIN: 'BABEL_PLUGIN',
+  BUILD_SYSTEM: 'BUILD_SYSTEM',
+  CACHES_JSON: 'CACHES_JSON',
+  DEV_DASHBOARD: 'DEV_DASHBOARD',
+  DOCS: 'DOCS',
+  E2E_TEST: 'E2E_TEST',
+  HTML_FIXTURES: 'HTML_FIXTURES',
+  INTEGRATION_TEST: 'INTEGRATION_TEST',
+  INVALID_WHITESPACES: 'INVALID_WHITESPACES',
+  LINT: 'LINT',
+  LINT_RULES: 'LINT_RULES',
+  OWNERS: 'OWNERS',
+  PACKAGE_UPGRADE: 'PACKAGE_UPGRADE',
+  PRESUBMIT: 'PRESUBMIT',
+  PRETTIFY: 'PRETTIFY',
+  RENOVATE_CONFIG: 'RENOVATE_CONFIG',
+  RUNTIME: 'RUNTIME',
+  SERVER: 'SERVER',
+  UNIT_TEST: 'UNIT_TEST',
+  VALIDATOR: 'VALIDATOR',
+  VALIDATOR_WEBUI: 'VALIDATOR_WEBUI',
+  VISUAL_DIFF: 'VISUAL_DIFF',
+};
+
+/**
+ * Files matching these targets are known not to affect the runtime. For all
+ * other targets, we play safe and default to adding the RUNTIME target, which
+ * will trigger all the runtime tests.
+ */
+const nonRuntimeTargets = [
+  Targets.AVA,
+  Targets.CACHES_JSON,
+  Targets.DEV_DASHBOARD,
+  Targets.DOCS,
+  Targets.E2E_TEST,
+  Targets.INTEGRATION_TEST,
+  Targets.OWNERS,
+  Targets.RENOVATE_CONFIG,
+  Targets.UNIT_TEST,
+  Targets.VALIDATOR,
+  Targets.VALIDATOR_WEBUI,
+  Targets.VISUAL_DIFF,
+];
 
 /**
  * Checks if the given file is an OWNERS file.
@@ -38,7 +101,7 @@ function isOwnersFile(file) {
 }
 
 /**
- * Checks if the given file is of the form validator-.*\.(html|out|protoascii)
+ * Checks if the given file is of the form validator-.*\.(html|out|out.cpponly|protoascii)
  *
  * @param {string} file
  * @return {boolean}
@@ -48,6 +111,7 @@ function isValidatorFile(file) {
   return (
     name.startsWith('validator-') &&
     (name.endsWith('.out') ||
+      name.endsWith('.out.cpponly') ||
       name.endsWith('.html') ||
       name.endsWith('.protoascii'))
   );
@@ -55,20 +119,23 @@ function isValidatorFile(file) {
 
 /**
  * A dictionary of functions that match a given file to a given build target.
+ * Owners files are special because they live all over the repo, so most target
+ * matchers must first make sure they're not matching an owners file.
  */
 const targetMatchers = {
-  'AVA': (file) => {
+  [Targets.AVA]: (file) => {
     if (isOwnersFile(file)) {
       return false;
     }
     return (
       file == 'build-system/tasks/ava.js' ||
-      file.startsWith('build-system/tasks/csvify-size/') ||
       file.startsWith('build-system/tasks/get-zindex/') ||
+      file.startsWith('build-system/tasks/make-extension/') ||
+      file.startsWith('build-system/tasks/markdown-toc/') ||
       file.startsWith('build-system/tasks/prepend-global/')
     );
   },
-  'BABEL_PLUGIN': (file) => {
+  [Targets.BABEL_PLUGIN]: (file) => {
     if (isOwnersFile(file)) {
       return false;
     }
@@ -83,7 +150,20 @@ const targetMatchers = {
       file.startsWith('build-system/babel-config/')
     );
   },
-  'CACHES_JSON': (file) => {
+  [Targets.BUILD_SYSTEM]: (file) => {
+    if (isOwnersFile(file)) {
+      return false;
+    }
+    return (
+      file == 'build-system/tasks/check-build-system.js' ||
+      file == 'build-system/tsconfig.json' ||
+      (file.startsWith('build-system') &&
+        (file.endsWith('.js') ||
+          file.endsWith('.ts') ||
+          file.endsWith('.json')))
+    );
+  },
+  [Targets.CACHES_JSON]: (file) => {
     if (isOwnersFile(file)) {
       return false;
     }
@@ -92,7 +172,7 @@ const targetMatchers = {
       file == 'build-system/global-configs/caches.json'
     );
   },
-  'DEV_DASHBOARD': (file) => {
+  [Targets.DEV_DASHBOARD]: (file) => {
     if (isOwnersFile(file)) {
       return false;
     }
@@ -102,16 +182,17 @@ const targetMatchers = {
       file.startsWith('build-system/server/app-index/')
     );
   },
-  'DOCS': (file) => {
+  [Targets.DOCS]: (file) => {
     if (isOwnersFile(file)) {
       return false;
     }
     return (
+      fileLists.linkCheckFiles.includes(file) ||
       file == 'build-system/tasks/check-links.js' ||
-      (path.extname(file) == '.md' && !file.startsWith('examples/'))
+      file.startsWith('build-system/tasks/markdown-toc/')
     );
   },
-  'E2E_TEST': (file) => {
+  [Targets.E2E_TEST]: (file) => {
     if (isOwnersFile(file)) {
       return false;
     }
@@ -122,13 +203,14 @@ const targetMatchers = {
       })
     );
   },
-  'FLAG_CONFIG': (file) => {
-    if (isOwnersFile(file)) {
-      return false;
-    }
-    return file.startsWith('build-system/global-configs/');
+  [Targets.HTML_FIXTURES]: (file) => {
+    return (
+      fileLists.htmlFixtureFiles.includes(file) ||
+      file == 'build-system/tasks/validate-html-fixtures.js' ||
+      file.startsWith('build-system/test-configs')
+    );
   },
-  'INTEGRATION_TEST': (file) => {
+  [Targets.INTEGRATION_TEST]: (file) => {
     if (isOwnersFile(file)) {
       return false;
     }
@@ -141,25 +223,64 @@ const targetMatchers = {
       })
     );
   },
-  'OWNERS': (file) => {
+  [Targets.INVALID_WHITESPACES]: (file) => {
+    return (
+      fileLists.invalidWhitespaceFiles.includes(file) ||
+      file == 'build-system/tasks/check-invalid-whitespaces.js' ||
+      file.startsWith('build-system/test-configs')
+    );
+  },
+  [Targets.LINT]: (file) => {
+    if (isOwnersFile(file)) {
+      return false;
+    }
+    return (
+      fileLists.lintFiles.includes(file) ||
+      file == 'build-system/tasks/lint.js' ||
+      file.startsWith('build-system/test-configs')
+    );
+  },
+  [Targets.LINT_RULES]: (file) => {
+    return file.endsWith('.eslintrc.js') || file == 'package.json';
+  },
+  [Targets.OWNERS]: (file) => {
     return isOwnersFile(file) || file == 'build-system/tasks/check-owners.js';
   },
-  'PACKAGE_UPGRADE': (file) => {
-    return file == 'package.json' || file == 'yarn.lock';
+  [Targets.PACKAGE_UPGRADE]: (file) => {
+    return file.endsWith('package.json') || file.endsWith('package-lock.json');
   },
-  'RENOVATE_CONFIG': (file) => {
+  [Targets.PRESUBMIT]: (file) => {
+    if (isOwnersFile(file)) {
+      return false;
+    }
+    return (
+      fileLists.presubmitFiles.includes(file) ||
+      file == 'build-system/tasks/presubmit-checks.js' ||
+      file.startsWith('build-system/test-configs')
+    );
+  },
+  [Targets.PRETTIFY]: (file) => {
+    // OWNERS files can be prettified.
+    return (
+      fileLists.prettifyFiles.includes(file) ||
+      file == '.prettierrc' ||
+      file == '.prettierignore' ||
+      file == 'build-system/tasks/prettify.js'
+    );
+  },
+  [Targets.RENOVATE_CONFIG]: (file) => {
     return (
       file == '.renovaterc.json' ||
       file == 'build-system/tasks/check-renovate-config.js'
     );
   },
-  'RUNTIME': (file) => {
+  [Targets.RUNTIME]: (file) => {
     if (isOwnersFile(file)) {
       return false;
     }
     return file.startsWith('src/');
   },
-  'SERVER': (file) => {
+  [Targets.SERVER]: (file) => {
     if (isOwnersFile(file)) {
       return false;
     }
@@ -169,7 +290,7 @@ const targetMatchers = {
       file.startsWith('build-system/server/')
     );
   },
-  'UNIT_TEST': (file) => {
+  [Targets.UNIT_TEST]: (file) => {
     if (isOwnersFile(file)) {
       return false;
     }
@@ -181,12 +302,8 @@ const targetMatchers = {
       })
     );
   },
-  'VALIDATOR': (file) => {
-    if (
-      isOwnersFile(file) ||
-      file.startsWith('validator/webui/') ||
-      file.startsWith('validator/java/')
-    ) {
+  [Targets.VALIDATOR]: (file) => {
+    if (isOwnersFile(file) || file.startsWith('validator/js/webui/')) {
       return false;
     }
     return (
@@ -195,25 +312,16 @@ const targetMatchers = {
       isValidatorFile(file)
     );
   },
-  'VALIDATOR_JAVA': (file) => {
-    if (isOwnersFile(file)) {
-      return false;
-    }
-    return (
-      file.startsWith('validator/java/') ||
-      file === 'build-system/tasks/validator.js'
-    );
-  },
-  'VALIDATOR_WEBUI': (file) => {
+  [Targets.VALIDATOR_WEBUI]: (file) => {
     if (isOwnersFile(file)) {
       return false;
     }
     return (
-      file.startsWith('validator/webui/') ||
+      file.startsWith('validator/js/webui/') ||
       file === 'build-system/tasks/validator.js'
     );
   },
-  'VISUAL_DIFF': (file) => {
+  [Targets.VISUAL_DIFF]: (file) => {
     if (isOwnersFile(file)) {
       return false;
     }
@@ -226,47 +334,83 @@ const targetMatchers = {
 };
 
 /**
- * Populates buildTargets with a set of build targets contained in a PR after
- * making sure they are valid. Used to determine which checks to perform / tests
- * to run during PR builds.
- * @param {string} fileName
- * @return {boolean}
+ * Returns the set of build targets affected by a PR after making sure they are
+ * valid. Used to determine which checks to perform / tests to run during PR
+ * builds. Exits early if targets have already been populated.
+ * @return {Set<string>}
  */
-function determineBuildTargets(fileName = 'build-targets.js') {
-  const filesChanged = gitDiffNameOnlyMaster();
-  const buildTargets = new Set();
+function determineBuildTargets() {
+  if (buildTargets != undefined) {
+    return buildTargets;
+  }
+  expandFileLists();
+  buildTargets = new Set();
+  const filesChanged = gitDiffNameOnlyMain();
   for (const file of filesChanged) {
-    let matched = false;
+    let isRuntimeFile = true;
     Object.keys(targetMatchers).forEach((target) => {
       const matcher = targetMatchers[target];
       if (matcher(file)) {
         buildTargets.add(target);
-        matched = true;
+        if (nonRuntimeTargets.includes(target)) {
+          isRuntimeFile = false;
+        }
       }
     });
-    if (!matched) {
-      buildTargets.add('RUNTIME'); // Default to RUNTIME for files that don't match a target.
+    if (isRuntimeFile) {
+      buildTargets.add(Targets.RUNTIME);
     }
   }
-  const fileLogPrefix = colors.bold(colors.yellow(`${fileName}:`));
-  console.log(
-    `${fileLogPrefix} Detected build targets:`,
-    colors.cyan(Array.from(buildTargets).sort().join(', '))
+  const loggingPrefix = getLoggingPrefix();
+  logWithoutTimestamp(
+    `${loggingPrefix} Detected build targets:`,
+    cyan(Array.from(buildTargets).sort().join(', '))
   );
-  // Test the runtime for babel plugin and server changes.
-  if (buildTargets.has('BABEL_PLUGIN') || buildTargets.has('SERVER')) {
-    buildTargets.add('RUNTIME');
-  }
-  // Test all targets except VALIDATOR_JAVA on Travis during package upgrades.
-  if (isTravisBuild() && buildTargets.has('PACKAGE_UPGRADE')) {
+  // Test all targets during CI builds for package upgrades.
+  if (isCiBuild() && buildTargets.has(Targets.PACKAGE_UPGRADE)) {
+    logWithoutTimestamp(
+      `${loggingPrefix} Running all tests since this PR contains package upgrades...`
+    );
     const allTargets = Object.keys(targetMatchers);
-    allTargets
-      .filter((target) => target != 'VALIDATOR_JAVA')
-      .forEach((target) => buildTargets.add(target));
+    allTargets.forEach((target) => buildTargets.add(target));
   }
   return buildTargets;
 }
 
+/**
+ * Returns true if a PR affects one or more of the given build targets.
+ *
+ * @param {...string} targets
+ * @return {boolean}
+ */
+function buildTargetsInclude(...targets) {
+  if (buildTargets.size == 0) {
+    determineBuildTargets();
+  }
+  return Array.from(targets).some((target) => buildTargets.has(target));
+}
+
+/**
+ * Helper that expands some of the config globs used to match files. Called once
+ * at the start in order to avoid repeated glob expansion.
+ */
+function expandFileLists() {
+  const globNames = [
+    'htmlFixtureGlobs',
+    'invalidWhitespaceGlobs',
+    'linkCheckGlobs',
+    'lintGlobs',
+    'presubmitGlobs',
+    'prettifyGlobs',
+  ];
+  for (const globName of globNames) {
+    const fileListName = globName.replace('Globs', 'Files');
+    fileLists[fileListName] = globby.sync(config[globName], {dot: true});
+  }
+}
+
 module.exports = {
+  buildTargetsInclude,
   determineBuildTargets,
+  Targets,
 };
diff --git a/build-system/pr-check/build.js b/build-system/pr-check/build.js
deleted file mode 100644
index d92cecddd7f73..0000000000000
--- a/build-system/pr-check/build.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * 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';
-
-/**
- * @fileoverview
- * This script builds the AMP runtime.
- * This is run during the CI stage = build; job = build.
- */
-
-const colors = require('ansi-colors');
-const {
-  printChangeSummary,
-  startTimer,
-  stopTimer,
-  stopTimedJob,
-  timedExecOrDie: timedExecOrDieBase,
-  uploadBuildOutput,
-} = require('./utils');
-const {determineBuildTargets} = require('./build-targets');
-const {isTravisPullRequestBuild} = require('../common/travis');
-const {runYarnChecks} = require('./yarn-checks');
-
-const FILENAME = 'build.js';
-const FILELOGPREFIX = colors.bold(colors.yellow(`${FILENAME}:`));
-const timedExecOrDie = (cmd) => timedExecOrDieBase(cmd, FILENAME);
-
-function main() {
-  const startTime = startTimer(FILENAME, FILENAME);
-  if (!runYarnChecks(FILENAME)) {
-    stopTimedJob(FILENAME, startTime);
-    return;
-  }
-
-  if (!isTravisPullRequestBuild()) {
-    timedExecOrDie('gulp update-packages');
-    timedExecOrDie('gulp build --fortesting');
-    uploadBuildOutput(FILENAME);
-  } else {
-    printChangeSummary(FILENAME);
-    const buildTargets = determineBuildTargets(FILENAME);
-    if (
-      buildTargets.has('RUNTIME') ||
-      buildTargets.has('FLAG_CONFIG') ||
-      buildTargets.has('INTEGRATION_TEST') ||
-      buildTargets.has('UNIT_TEST')
-    ) {
-      timedExecOrDie('gulp update-packages');
-      timedExecOrDie('gulp build --fortesting');
-      uploadBuildOutput(FILENAME);
-    } else {
-      console.log(
-        `${FILELOGPREFIX} Skipping`,
-        colors.cyan('Build'),
-        'because this commit does not affect the runtime, flag configs,',
-        'or integration tests.'
-      );
-    }
-  }
-
-  stopTimer(FILENAME, FILENAME, startTime);
-}
-
-main();
diff --git a/build-system/pr-check/bundle-size.js b/build-system/pr-check/bundle-size.js
new file mode 100644
index 0000000000000..a34f6426729c3
--- /dev/null
+++ b/build-system/pr-check/bundle-size.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2020 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';
+
+/**
+ * @fileoverview Script that runs the bundle-size checks during CI.
+ */
+
+const {runCiJob} = require('./ci-job');
+const {skipDependentJobs, timedExecOrDie} = require('./utils');
+const {Targets, buildTargetsInclude} = require('./build-targets');
+
+const jobName = 'bundle-size.js';
+
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  timedExecOrDie('amp dist --noconfig --esm');
+  timedExecOrDie('amp dist --noconfig');
+  timedExecOrDie('amp bundle-size --on_push_build');
+}
+
+/**
+ * Steps to run during PR builds.
+ */
+function prBuildWorkflow() {
+  if (buildTargetsInclude(Targets.RUNTIME)) {
+    timedExecOrDie('amp dist --noconfig --esm');
+    timedExecOrDie('amp dist --noconfig');
+    timedExecOrDie('amp bundle-size --on_pr_build');
+  } else {
+    timedExecOrDie('amp bundle-size --on_skipped_build');
+    skipDependentJobs(jobName, 'this PR does not affect the runtime');
+  }
+}
+
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/checks.js b/build-system/pr-check/checks.js
index fb44fa7466b50..c5f935168b8b1 100644
--- a/build-system/pr-check/checks.js
+++ b/build-system/pr-check/checks.js
@@ -16,104 +16,129 @@
 'use strict';
 
 /**
- * @fileoverview
- * This script performs quick checks on the source code
- * prior to running unit and integration tests.
- * This is run during the CI stage = build; job = checks.
+ * @fileoverview Script that runs various checks during CI.
  */
 
-const {
-  printChangeSummary,
-  startTimer,
-  stopTimer,
-  stopTimedJob,
-  timedExecOrDie: timedExecOrDieBase,
-} = require('./utils');
-const {determineBuildTargets} = require('./build-targets');
-const {isTravisPullRequestBuild} = require('../common/travis');
 const {reportAllExpectedTests} = require('../tasks/report-test-status');
-const {runYarnChecks} = require('./yarn-checks');
-
-const FILENAME = 'checks.js';
-const timedExecOrDie = (cmd) => timedExecOrDieBase(cmd, FILENAME);
-
-async function main() {
-  const startTime = startTimer(FILENAME, FILENAME);
-  if (!runYarnChecks(FILENAME)) {
-    stopTimedJob(FILENAME, startTime);
-    return;
-  }
-
-  if (!isTravisPullRequestBuild()) {
-    timedExecOrDie('gulp update-packages');
-    timedExecOrDie('gulp check-exact-versions');
-    timedExecOrDie('gulp lint');
-    timedExecOrDie('gulp prettify');
-    timedExecOrDie('gulp presubmit');
-    timedExecOrDie('gulp ava');
-    timedExecOrDie('gulp babel-plugin-tests');
-    timedExecOrDie('gulp caches-json');
-    timedExecOrDie('gulp dev-dashboard-tests');
-    timedExecOrDie('gulp check-renovate-config');
-    timedExecOrDie('gulp server-tests');
-    timedExecOrDie('gulp dep-check');
-    timedExecOrDie('gulp check-types');
-    timedExecOrDie('gulp check-sourcemaps');
-    timedExecOrDie('gulp performance-urls');
-  } else {
-    printChangeSummary(FILENAME);
-    const buildTargets = determineBuildTargets(FILENAME);
-    await reportAllExpectedTests(buildTargets);
-    timedExecOrDie('gulp update-packages');
-
-    timedExecOrDie('gulp check-exact-versions');
-    timedExecOrDie('gulp lint');
-    timedExecOrDie('gulp prettify');
-    timedExecOrDie('gulp presubmit');
-    timedExecOrDie('gulp performance-urls');
-
-    if (buildTargets.has('AVA')) {
-      timedExecOrDie('gulp ava');
-    }
-
-    if (buildTargets.has('BABEL_PLUGIN')) {
-      timedExecOrDie('gulp babel-plugin-tests');
-    }
-
-    if (buildTargets.has('CACHES_JSON')) {
-      timedExecOrDie('gulp caches-json');
-    }
-
-    // Check document links only for PR builds.
-    if (buildTargets.has('DOCS')) {
-      timedExecOrDie('gulp check-links --local_changes');
-    }
-
-    if (buildTargets.has('DEV_DASHBOARD')) {
-      timedExecOrDie('gulp dev-dashboard-tests');
-    }
-
-    // Validate owners syntax only for PR builds.
-    if (buildTargets.has('OWNERS')) {
-      timedExecOrDie('gulp check-owners --local_changes');
-    }
-
-    if (buildTargets.has('RENOVATE_CONFIG')) {
-      timedExecOrDie('gulp check-renovate-config');
-    }
-
-    if (buildTargets.has('SERVER')) {
-      timedExecOrDie('gulp server-tests');
-    }
-
-    if (buildTargets.has('RUNTIME')) {
-      timedExecOrDie('gulp dep-check');
-      timedExecOrDie('gulp check-types');
-      timedExecOrDie('gulp check-sourcemaps');
-    }
-  }
-
-  stopTimer(FILENAME, FILENAME, startTime);
+const {runCiJob} = require('./ci-job');
+const {Targets, buildTargetsInclude} = require('./build-targets');
+const {timedExecOrDie} = require('./utils');
+
+const jobName = 'checks.js';
+
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  timedExecOrDie('amp presubmit');
+  timedExecOrDie('amp check-invalid-whitespaces');
+  timedExecOrDie('amp validate-html-fixtures');
+  timedExecOrDie('amp lint');
+  timedExecOrDie('amp prettify');
+  timedExecOrDie('amp ava');
+  timedExecOrDie('amp check-build-system');
+  timedExecOrDie('amp babel-plugin-tests');
+  timedExecOrDie('amp caches-json');
+  timedExecOrDie('amp dev-dashboard-tests');
+  timedExecOrDie('amp check-exact-versions');
+  timedExecOrDie('amp check-renovate-config');
+  timedExecOrDie('amp server-tests');
+  timedExecOrDie('amp make-extension --name=t --test --cleanup');
+  timedExecOrDie('amp make-extension --name=t --test --cleanup --bento');
+  timedExecOrDie('amp dep-check');
+  timedExecOrDie('amp check-types');
+  timedExecOrDie('amp check-sourcemaps');
+  timedExecOrDie('amp performance-urls');
+  timedExecOrDie('amp check-analytics-vendors-list');
+  timedExecOrDie('amp check-video-interface-list');
+  timedExecOrDie('amp get-zindex');
+  timedExecOrDie('amp markdown-toc');
+}
+
+/**
+ * Steps to run during PR builds.
+ * @return {Promise<void>}
+ */
+async function prBuildWorkflow() {
+  await reportAllExpectedTests();
+
+  if (buildTargetsInclude(Targets.PRESUBMIT)) {
+    timedExecOrDie('amp presubmit');
+  }
+
+  if (buildTargetsInclude(Targets.INVALID_WHITESPACES)) {
+    timedExecOrDie('amp check-invalid-whitespaces');
+  }
+
+  if (buildTargetsInclude(Targets.HTML_FIXTURES)) {
+    timedExecOrDie('amp validate-html-fixtures');
+  }
+
+  if (buildTargetsInclude(Targets.LINT_RULES)) {
+    timedExecOrDie('amp lint');
+  } else if (buildTargetsInclude(Targets.LINT)) {
+    timedExecOrDie('amp lint --local_changes');
+  }
+
+  if (buildTargetsInclude(Targets.PRETTIFY)) {
+    timedExecOrDie('amp prettify');
+  }
+
+  if (buildTargetsInclude(Targets.AVA)) {
+    timedExecOrDie('amp ava');
+  }
+
+  if (buildTargetsInclude(Targets.BUILD_SYSTEM)) {
+    timedExecOrDie('amp check-build-system');
+  }
+
+  if (buildTargetsInclude(Targets.BABEL_PLUGIN)) {
+    timedExecOrDie('amp babel-plugin-tests');
+  }
+
+  if (buildTargetsInclude(Targets.CACHES_JSON)) {
+    timedExecOrDie('amp caches-json');
+  }
+
+  if (buildTargetsInclude(Targets.DOCS)) {
+    timedExecOrDie('amp check-links --local_changes'); // only for PR builds
+    timedExecOrDie('amp markdown-toc');
+  }
+
+  if (buildTargetsInclude(Targets.DEV_DASHBOARD)) {
+    timedExecOrDie('amp dev-dashboard-tests');
+  }
+
+  if (buildTargetsInclude(Targets.OWNERS)) {
+    timedExecOrDie('amp check-owners --local_changes'); // only for PR builds
+  }
+
+  if (buildTargetsInclude(Targets.PACKAGE_UPGRADE)) {
+    timedExecOrDie('amp check-exact-versions');
+  }
+
+  if (buildTargetsInclude(Targets.RENOVATE_CONFIG)) {
+    timedExecOrDie('amp check-renovate-config');
+  }
+
+  if (buildTargetsInclude(Targets.SERVER)) {
+    timedExecOrDie('amp server-tests');
+  }
+
+  if (buildTargetsInclude(Targets.AVA, Targets.RUNTIME)) {
+    timedExecOrDie('amp make-extension --name=t --test --cleanup');
+    timedExecOrDie('amp make-extension --name=t --test --cleanup --bento');
+  }
+
+  if (buildTargetsInclude(Targets.RUNTIME)) {
+    timedExecOrDie('amp dep-check');
+    timedExecOrDie('amp check-types');
+    timedExecOrDie('amp check-sourcemaps');
+    timedExecOrDie('amp performance-urls');
+    timedExecOrDie('amp check-analytics-vendors-list');
+    timedExecOrDie('amp check-video-interface-list');
+    timedExecOrDie('amp get-zindex');
+  }
 }
 
-main();
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/ci-job.js b/build-system/pr-check/ci-job.js
new file mode 100644
index 0000000000000..a3f7352b4ed5b
--- /dev/null
+++ b/build-system/pr-check/ci-job.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright 2021 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 {
+  abortTimedJob,
+  printChangeSummary,
+  startTimer,
+  stopTimer,
+} = require('./utils');
+const {
+  getLoggingPrefix,
+  logWithoutTimestamp,
+  setLoggingPrefix,
+} = require('../common/logging');
+const {determineBuildTargets} = require('./build-targets');
+const {isPullRequestBuild} = require('../common/ci');
+const {red} = require('../common/colors');
+const {updatePackages} = require('../common/update-packages');
+
+/**
+ * Helper used by all CI job scripts. Runs the PR / push build workflow.
+ * @param {string} jobName
+ * @param {function} pushBuildWorkflow
+ * @param {function} prBuildWorkflow
+ */
+async function runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow) {
+  setLoggingPrefix(jobName);
+  const startTime = startTimer(jobName);
+  try {
+    updatePackages();
+    if (isPullRequestBuild()) {
+      printChangeSummary();
+      determineBuildTargets();
+      await prBuildWorkflow();
+    } else {
+      await pushBuildWorkflow();
+    }
+    stopTimer(jobName, startTime);
+  } catch (err) {
+    logWithoutTimestamp(getLoggingPrefix(), red('ERROR:'), err);
+    abortTimedJob(jobName, startTime);
+  }
+}
+
+module.exports = {
+  runCiJob,
+};
diff --git a/build-system/pr-check/cross-browser-tests.js b/build-system/pr-check/cross-browser-tests.js
new file mode 100644
index 0000000000000..f2dae4e261aaa
--- /dev/null
+++ b/build-system/pr-check/cross-browser-tests.js
@@ -0,0 +1,152 @@
+/**
+ * Copyright 2020 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';
+
+/**
+ * @fileoverview Script that builds and tests on Linux, macOS, and Windows during CI.
+ */
+
+const {cyan, red} = require('../common/colors');
+const {log} = require('../common/logging');
+const {reportAllExpectedTests} = require('../tasks/report-test-status');
+const {runCiJob} = require('./ci-job');
+const {skipDependentJobs, timedExecOrDie} = require('./utils');
+const {Targets, buildTargetsInclude} = require('./build-targets');
+
+const jobName = 'cross-browser-tests.js';
+
+/**
+ * Helper that runs platform-specific integration tests
+ */
+function runIntegrationTestsForPlatform() {
+  switch (process.platform) {
+    case 'linux':
+      timedExecOrDie(
+        'amp integration --nobuild --compiled --headless --firefox'
+      );
+      break;
+    case 'darwin':
+      timedExecOrDie('amp integration --nobuild --compiled --safari');
+      break;
+    case 'win32':
+      timedExecOrDie('amp integration --nobuild --compiled --headless --edge');
+      timedExecOrDie('amp integration --nobuild --compiled --ie');
+      break;
+    default:
+      log(
+        red('ERROR:'),
+        'Cannot run cross-browser integration tests on',
+        cyan(process.platform) + '.'
+      );
+  }
+}
+
+/**
+ * Helper that runs platform-specific E2E tests
+ */
+function runE2eTestsForPlatform() {
+  switch (process.platform) {
+    case 'linux':
+      timedExecOrDie('amp e2e --nobuild --compiled --browsers=firefox');
+      break;
+    case 'darwin':
+      timedExecOrDie('amp e2e --nobuild --compiled --browsers=safari');
+      break;
+    case 'win32':
+      break;
+    default:
+      log(
+        red('ERROR:'),
+        'Cannot run cross-browser E2E tests on',
+        cyan(process.platform) + '.'
+      );
+  }
+}
+
+/**
+ * Helper that runs platform-specific unit tests
+ */
+function runUnitTestsForPlatform() {
+  switch (process.platform) {
+    case 'linux':
+      timedExecOrDie('amp unit --headless --firefox');
+      break;
+    case 'darwin':
+      timedExecOrDie('amp unit --safari');
+      break;
+    case 'win32':
+      timedExecOrDie('amp unit --headless --edge');
+      break;
+    default:
+      log(
+        red('ERROR:'),
+        'Cannot run cross-browser unit tests on',
+        cyan(process.platform) + '.'
+      );
+  }
+}
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  runUnitTestsForPlatform();
+  timedExecOrDie('amp dist --fortesting');
+  runIntegrationTestsForPlatform();
+}
+
+/**
+ * Steps to run during PR builds.
+ * @return {Promise<void>}
+ */
+async function prBuildWorkflow() {
+  if (process.platform == 'linux') {
+    await reportAllExpectedTests(); // Only once is sufficient.
+  }
+  if (
+    !buildTargetsInclude(
+      Targets.RUNTIME,
+      Targets.UNIT_TEST,
+      Targets.E2E_TEST,
+      Targets.INTEGRATION_TEST
+    )
+  ) {
+    skipDependentJobs(
+      jobName,
+      'this PR does not affect the runtime, unit tests, integration tests, or end-to-end tests'
+    );
+    return;
+  }
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.UNIT_TEST)) {
+    runUnitTestsForPlatform();
+  }
+  if (
+    buildTargetsInclude(
+      Targets.RUNTIME,
+      Targets.INTEGRATION_TEST,
+      Targets.E2E_TEST
+    )
+  ) {
+    timedExecOrDie('amp dist --fortesting');
+  }
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.INTEGRATION_TEST)) {
+    runIntegrationTestsForPlatform();
+  }
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.E2E_TEST)) {
+    runE2eTestsForPlatform();
+  }
+}
+
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/dist-bundle-size.js b/build-system/pr-check/dist-bundle-size.js
deleted file mode 100644
index a0d95a462b398..0000000000000
--- a/build-system/pr-check/dist-bundle-size.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * 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';
-
-/**
- * @fileoverview
- * This script builds the minified AMP runtime and runs the bundle size check.
- * This is run during the CI stage = build; job = dist, bundle size.
- */
-
-const colors = require('ansi-colors');
-const {
-  printChangeSummary,
-  processAndUploadDistOutput,
-  startTimer,
-  stopTimer,
-  stopTimedJob,
-  timedExecWithError,
-  timedExecOrDie: timedExecOrDieBase,
-  uploadDistOutput,
-} = require('./utils');
-const {determineBuildTargets} = require('./build-targets');
-const {isTravisPullRequestBuild} = require('../common/travis');
-const {runYarnChecks} = require('./yarn-checks');
-const {signalDistUpload} = require('../tasks/pr-deploy-bot-utils');
-
-const FILENAME = 'dist-bundle-size.js';
-const FILELOGPREFIX = colors.bold(colors.yellow(`${FILENAME}:`));
-const timedExecOrDie = (cmd) => timedExecOrDieBase(cmd, FILENAME);
-
-async function main() {
-  const startTime = startTimer(FILENAME, FILENAME);
-  if (!runYarnChecks(FILENAME)) {
-    stopTimedJob(FILENAME, startTime);
-    return;
-  }
-
-  if (!isTravisPullRequestBuild()) {
-    timedExecOrDie('gulp update-packages');
-    timedExecOrDie('gulp dist --fortesting');
-    timedExecOrDie('gulp bundle-size --on_push_build');
-    uploadDistOutput(FILENAME);
-  } else {
-    printChangeSummary(FILENAME);
-    const buildTargets = determineBuildTargets(FILENAME);
-    if (
-      buildTargets.has('RUNTIME') ||
-      buildTargets.has('FLAG_CONFIG') ||
-      buildTargets.has('INTEGRATION_TEST') ||
-      buildTargets.has('E2E_TEST') ||
-      buildTargets.has('VISUAL_DIFF') ||
-      buildTargets.has('UNIT_TEST')
-    ) {
-      timedExecOrDie('gulp update-packages');
-
-      const process = timedExecWithError('gulp dist --fortesting', FILENAME);
-      if (process.error) {
-        console.log(colors.red('ERROR'), colors.yellow(process.error.message));
-        await signalDistUpload('errored');
-        stopTimedJob(FILENAME, startTime);
-        return;
-      }
-
-      timedExecOrDie('gulp bundle-size --on_pr_build');
-      await processAndUploadDistOutput(FILENAME);
-    } else {
-      timedExecOrDie('gulp bundle-size --on_skipped_build');
-      await signalDistUpload('skipped');
-
-      console.log(
-        `${FILELOGPREFIX} Skipping`,
-        colors.cyan('Dist, Bundle Size'),
-        'because this commit does not affect the runtime, flag configs,',
-        'integration tests, end-to-end tests, or visual diff tests.'
-      );
-    }
-  }
-
-  stopTimer(FILENAME, FILENAME, startTime);
-}
-
-main();
diff --git a/build-system/pr-check/dist-tests.js b/build-system/pr-check/dist-tests.js
deleted file mode 100644
index c5e83fa41dab0..0000000000000
--- a/build-system/pr-check/dist-tests.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Copyright 2020 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';
-
-/**
- * @fileoverview
- * This script runs the unit and integration tests against minified code
- * on a local Travis VM.
- * This is run during the CI stage = test; job = dist tests.
- */
-
-const colors = require('ansi-colors');
-const {
-  downloadDistOutput,
-  printChangeSummary,
-  startTimer,
-  stopTimer,
-  timedExecOrDie: timedExecOrDieBase,
-} = require('./utils');
-const {determineBuildTargets} = require('./build-targets');
-const {isTravisPullRequestBuild} = require('../common/travis');
-
-const FILENAME = 'dist-tests.js';
-const FILELOGPREFIX = colors.bold(colors.yellow(`${FILENAME}:`));
-const timedExecOrDie = (cmd) => timedExecOrDieBase(cmd, FILENAME);
-
-function main() {
-  const startTime = startTimer(FILENAME, FILENAME);
-
-  if (!isTravisPullRequestBuild()) {
-    downloadDistOutput(FILENAME);
-    timedExecOrDie('gulp update-packages');
-    timedExecOrDie('gulp integration --nobuild --headless --compiled');
-  } else {
-    printChangeSummary(FILENAME);
-    const buildTargets = determineBuildTargets(FILENAME);
-    if (
-      !buildTargets.has('RUNTIME') &&
-      !buildTargets.has('FLAG_CONFIG') &&
-      !buildTargets.has('INTEGRATION_TEST')
-    ) {
-      console.log(
-        `${FILELOGPREFIX} Skipping`,
-        colors.cyan('Dist Tests'),
-        'because this commit not affect the runtime, flag configs,',
-        'or integration tests.'
-      );
-      stopTimer(FILENAME, FILENAME, startTime);
-      return;
-    }
-
-    downloadDistOutput(FILENAME);
-    timedExecOrDie('gulp update-packages');
-
-    if (
-      buildTargets.has('RUNTIME') ||
-      buildTargets.has('FLAG_CONFIG') ||
-      buildTargets.has('INTEGRATION_TEST')
-    ) {
-      timedExecOrDie('gulp integration --nobuild --headless --compiled');
-    }
-  }
-
-  stopTimer(FILENAME, FILENAME, startTime);
-}
-
-main();
diff --git a/build-system/pr-check/e2e-tests.js b/build-system/pr-check/e2e-tests.js
index 5b34a16d80bff..53a5ffb8eb11b 100644
--- a/build-system/pr-check/e2e-tests.js
+++ b/build-system/pr-check/e2e-tests.js
@@ -16,54 +16,48 @@
 'use strict';
 
 /**
- * @fileoverview
- * This script runs end to end tests.
- * This is run during the CI stage = test; job = e2e tests.
+ * @fileoverview Script that runs the end-to-end tests during CI.
  */
 
-const colors = require('ansi-colors');
 const {
-  downloadDistOutput,
-  printChangeSummary,
-  startTimer,
-  stopTimer,
-  timedExecOrDie: timedExecOrDieBase,
+  skipDependentJobs,
+  timedExecOrDie,
+  timedExecOrThrow,
 } = require('./utils');
-const {determineBuildTargets} = require('./build-targets');
-const {isTravisPullRequestBuild} = require('../common/travis');
+const {runCiJob} = require('./ci-job');
+const {Targets, buildTargetsInclude} = require('./build-targets');
 
-const FILENAME = 'e2e-tests.js';
-const FILELOGPREFIX = colors.bold(colors.yellow(`${FILENAME}:`));
-const timedExecOrDie = (cmd) => timedExecOrDieBase(cmd, FILENAME);
+const jobName = 'e2e-tests.js';
 
-async function main() {
-  const startTime = startTimer(FILENAME, FILENAME);
-
-  if (!isTravisPullRequestBuild()) {
-    downloadDistOutput(FILENAME);
-    timedExecOrDie('gulp update-packages');
-    timedExecOrDie('gulp e2e --nobuild --headless --compiled');
-  } else {
-    printChangeSummary(FILENAME);
-    const buildTargets = determineBuildTargets(FILENAME);
-    if (
-      buildTargets.has('RUNTIME') ||
-      buildTargets.has('FLAG_CONFIG') ||
-      buildTargets.has('E2E_TEST')
-    ) {
-      downloadDistOutput(FILENAME);
-      timedExecOrDie('gulp update-packages');
-      timedExecOrDie('gulp e2e --nobuild --headless --compiled');
-    } else {
-      console.log(
-        `${FILELOGPREFIX} Skipping`,
-        colors.cyan('End to End Tests'),
-        'because this commit does not affect the runtime, flag configs,',
-        'or end-to-end tests'
-      );
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  try {
+    timedExecOrThrow(
+      'amp e2e --nobuild --headless --compiled --report',
+      'End-to-end tests failed!'
+    );
+  } catch (e) {
+    if (e.status) {
+      process.exitCode = e.status;
     }
+  } finally {
+    timedExecOrDie('amp test-report-upload');
   }
-  stopTimer(FILENAME, FILENAME, startTime);
 }
 
-main();
+/**
+ * Steps to run during PR builds.
+ */
+function prBuildWorkflow() {
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.E2E_TEST)) {
+    timedExecOrDie('amp e2e --nobuild --headless --compiled');
+  } else {
+    skipDependentJobs(
+      jobName,
+      'this PR does not affect the runtime or end-to-end tests'
+    );
+  }
+}
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/experiment-build.js b/build-system/pr-check/experiment-build.js
new file mode 100644
index 0000000000000..56bf47bfebbdd
--- /dev/null
+++ b/build-system/pr-check/experiment-build.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright 2021 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';
+
+/**
+ * @fileoverview Script that builds the experiment A/B/C runtime during CI.
+ */
+
+const {
+  skipDependentJobs: skipDependentJobs,
+  storeExperimentBuildToWorkspace,
+  timedExecOrDie,
+} = require('./utils');
+const {experiment} = require('minimist')(process.argv.slice(2));
+const {getExperimentConfig} = require('../common/utils');
+const {runCiJob} = require('./ci-job');
+const {Targets, buildTargetsInclude} = require('./build-targets');
+
+const jobName = `${experiment}-build.js`;
+
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  // Note that if config is invalid, this build would have been skipped by CircleCI.
+  const config = getExperimentConfig(experiment);
+  const defineFlag = `--define_experiment_constant ${config.define_experiment_constant}`;
+  timedExecOrDie(`amp dist --fortesting ${defineFlag}`);
+  storeExperimentBuildToWorkspace(experiment);
+}
+
+/**
+ * Steps to run during PR builds.
+ */
+function prBuildWorkflow() {
+  if (
+    buildTargetsInclude(
+      Targets.RUNTIME,
+      Targets.INTEGRATION_TEST,
+      Targets.E2E_TEST
+    )
+  ) {
+    pushBuildWorkflow();
+  } else {
+    skipDependentJobs(
+      jobName,
+      'this PR does not affect the runtime, integration tests, or end-to-end tests'
+    );
+  }
+}
+
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/experiment-tests.js b/build-system/pr-check/experiment-tests.js
index bd39d39cbcdaa..6d5541ec694f0 100644
--- a/build-system/pr-check/experiment-tests.js
+++ b/build-system/pr-check/experiment-tests.js
@@ -16,67 +16,75 @@
 'use strict';
 
 /**
- * @fileoverview
- * This script builds an experiment binary and runs local tests.
- * This is run during the CI stage = test; job = experiments tests.
+ * @fileoverview Script that runs the experiment A/B/C tests during CI.
  */
 
-const colors = require('ansi-colors');
-const experimentsConfig = require('../global-configs/experiments-config.json');
 const {
-  startTimer,
-  stopTimer,
-  timedExecOrDie: timedExecOrDieBase,
+  skipDependentJobs,
+  timedExecOrDie,
+  timedExecOrThrow,
 } = require('./utils');
 const {experiment} = require('minimist')(process.argv.slice(2));
-const FILENAME = `${experiment}-tests.js`;
-const FILELOGPREFIX = colors.bold(colors.yellow(`${FILENAME}:`));
-const timedExecOrDie = (cmd) => timedExecOrDieBase(cmd, FILENAME);
+const {getExperimentConfig} = require('../common/utils');
+const {isPushBuild} = require('../common/ci');
+const {runCiJob} = require('./ci-job');
+const {Targets, buildTargetsInclude} = require('./build-targets');
 
-function getConfig_() {
-  const config = experimentsConfig[experiment];
+const jobName = `${experiment}-tests.js`;
 
-  if (!config) {
-    return;
-  }
-
-  if (!config.name || !config.command) {
-    return;
-  }
-
-  if (new Date(config['expiration_date_utc']) < Date.now) {
-    return;
+/**
+ * Runs tests for the given configuration and reports results for push builds.
+ * @param {!Object} config
+ */
+function runExperimentTests(config) {
+  try {
+    const defineFlag = `--define_experiment_constant ${config.define_experiment_constant}`;
+    const experimentFlag = `--experiment ${experiment}`;
+    const reportFlag = isPushBuild() ? '--report' : '';
+    timedExecOrThrow(
+      `amp integration --nobuild --compiled --headless ${experimentFlag} ${defineFlag} ${reportFlag}`
+    );
+    timedExecOrThrow(
+      `amp e2e --nobuild --compiled --headless ${experimentFlag} ${defineFlag} ${reportFlag}`
+    );
+  } catch (e) {
+    if (e.status) {
+      process.exitCode = e.status;
+    }
+  } finally {
+    if (isPushBuild()) {
+      timedExecOrDie('amp test-report-upload');
+    }
   }
-
-  return config;
-}
-
-function build_(config) {
-  const command = config.command.replace('gulp dist', 'gulp dist --fortesting');
-  timedExecOrDie('gulp clean');
-  timedExecOrDie('gulp update-packages');
-  timedExecOrDie(command);
 }
 
-function test_() {
-  timedExecOrDie('gulp integration --nobuild --compiled --headless');
-  timedExecOrDie('gulp e2e --nobuild --compiled --headless');
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  // Note that if config is invalid, this build would have been skipped by CircleCI.
+  const config = getExperimentConfig(experiment);
+  runExperimentTests(config);
 }
 
-function main() {
-  const startTime = startTimer(FILENAME, FILENAME);
-  const config = getConfig_();
-  if (config) {
-    build_(config);
-    test_();
+/**
+ * Steps to run during PR builds.
+ */
+function prBuildWorkflow() {
+  if (
+    buildTargetsInclude(
+      Targets.RUNTIME,
+      Targets.INTEGRATION_TEST,
+      Targets.E2E_TEST
+    )
+  ) {
+    pushBuildWorkflow();
   } else {
-    console.log(
-      `${FILELOGPREFIX} Skipping`,
-      colors.cyan(`${experiment} Tests`),
-      `because ${experiment} is expired or does not exist.`
+    skipDependentJobs(
+      jobName,
+      'this PR does not affect the runtime, integration tests, or end-to-end tests'
     );
   }
-  stopTimer(FILENAME, FILENAME, startTime);
 }
 
-main();
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/local-tests.js b/build-system/pr-check/local-tests.js
deleted file mode 100644
index 91d20f92e6b62..0000000000000
--- a/build-system/pr-check/local-tests.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * 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';
-
-/**
- * @fileoverview
- *This script runs the unit and integration tests on a local Travis VM.
- * This is run during the CI stage = test; job = local tests.
- */
-
-const colors = require('ansi-colors');
-const {
-  downloadBuildOutput,
-  printChangeSummary,
-  startTimer,
-  stopTimer,
-  timedExecOrDie: timedExecOrDieBase,
-} = require('./utils');
-const {determineBuildTargets} = require('./build-targets');
-const {isTravisPullRequestBuild} = require('../common/travis');
-
-const FILENAME = 'local-tests.js';
-const FILELOGPREFIX = colors.bold(colors.yellow(`${FILENAME}:`));
-const timedExecOrDie = (cmd) => timedExecOrDieBase(cmd, FILENAME);
-
-function main() {
-  const startTime = startTimer(FILENAME, FILENAME);
-
-  if (!isTravisPullRequestBuild()) {
-    downloadBuildOutput(FILENAME);
-    timedExecOrDie('gulp update-packages');
-    timedExecOrDie('gulp integration --nobuild --headless --coverage');
-    timedExecOrDie('gulp unit --nobuild --headless --coverage');
-    timedExecOrDie('gulp codecov-upload');
-  } else {
-    printChangeSummary(FILENAME);
-    const buildTargets = determineBuildTargets(FILENAME);
-    if (
-      !buildTargets.has('RUNTIME') &&
-      !buildTargets.has('FLAG_CONFIG') &&
-      !buildTargets.has('UNIT_TEST') &&
-      !buildTargets.has('INTEGRATION_TEST')
-    ) {
-      console.log(
-        `${FILELOGPREFIX} Skipping`,
-        colors.cyan('Local Tests'),
-        'because this commit not affect the runtime, flag configs,',
-        'unit tests, or integration tests.'
-      );
-      stopTimer(FILENAME, FILENAME, startTime);
-      return;
-    }
-
-    downloadBuildOutput(FILENAME);
-    timedExecOrDie('gulp update-packages');
-
-    if (buildTargets.has('RUNTIME') || buildTargets.has('UNIT_TEST')) {
-      timedExecOrDie('gulp unit --nobuild --headless --local_changes');
-    }
-
-    if (
-      buildTargets.has('RUNTIME') ||
-      buildTargets.has('FLAG_CONFIG') ||
-      buildTargets.has('INTEGRATION_TEST')
-    ) {
-      timedExecOrDie('gulp integration --nobuild --headless --coverage');
-    }
-
-    if (buildTargets.has('RUNTIME') || buildTargets.has('UNIT_TEST')) {
-      timedExecOrDie('gulp unit --nobuild --headless --coverage');
-    }
-
-    if (buildTargets.has('RUNTIME')) {
-      timedExecOrDie('gulp codecov-upload');
-    }
-  }
-
-  stopTimer(FILENAME, FILENAME, startTime);
-}
-
-main();
diff --git a/build-system/pr-check/module-build.js b/build-system/pr-check/module-build.js
new file mode 100644
index 0000000000000..74e047d006cdb
--- /dev/null
+++ b/build-system/pr-check/module-build.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright 2020 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';
+
+/**
+ * @fileoverview Script that builds the module AMP runtime during CI.
+ */
+
+const {
+  skipDependentJobs,
+  storeModuleBuildToWorkspace,
+  timedExecOrDie,
+} = require('./utils');
+const {runCiJob} = require('./ci-job');
+const {Targets, buildTargetsInclude} = require('./build-targets');
+
+const jobName = 'module-build.js';
+
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  timedExecOrDie('amp dist --esm --fortesting');
+  storeModuleBuildToWorkspace();
+}
+
+/**
+ * Steps to run during PR builds.
+ */
+function prBuildWorkflow() {
+  // TODO(#31102): This list must eventually match the same buildTargets check
+  // found in pr-check/nomodule-build.js as we turn on the systems that
+  // run against the module build. (ex. visual diffs, e2e, etc.)
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.INTEGRATION_TEST)) {
+    timedExecOrDie('amp dist --esm --fortesting');
+    storeModuleBuildToWorkspace();
+  } else {
+    skipDependentJobs(
+      jobName,
+      'this PR does not affect the runtime or integration tests'
+    );
+  }
+}
+
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/module-dist-bundle-size.js b/build-system/pr-check/module-dist-bundle-size.js
deleted file mode 100644
index 4cafe63ea0858..0000000000000
--- a/build-system/pr-check/module-dist-bundle-size.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright 2020 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';
-
-/**
- * @fileoverview
- * This script builds the esm minified AMP runtime and runs the bundle size check.
- * This is run during the CI stage = build; job = module dist, bundle size.
- */
-
-const colors = require('ansi-colors');
-const {
-  printChangeSummary,
-  startTimer,
-  stopTimer,
-  stopTimedJob,
-  timedExecOrDie: timedExecOrDieBase,
-  uploadEsmDistOutput,
-} = require('./utils');
-const {determineBuildTargets} = require('./build-targets');
-const {isTravisPullRequestBuild} = require('../common/travis');
-const {runYarnChecks} = require('./yarn-checks');
-
-const FILENAME = 'module-dist-bundle-size.js';
-const FILELOGPREFIX = colors.bold(colors.yellow(`${FILENAME}:`));
-const timedExecOrDie = (cmd) => timedExecOrDieBase(cmd, FILENAME);
-
-function main() {
-  const startTime = startTimer(FILENAME, FILENAME);
-  if (!runYarnChecks(FILENAME)) {
-    stopTimedJob(FILENAME, startTime);
-    return;
-  }
-
-  if (!isTravisPullRequestBuild()) {
-    timedExecOrDie('gulp update-packages');
-    timedExecOrDie('gulp dist --esm --fortesting');
-    // TODO(#27703): Run bundle size check (--on_push_build)
-    uploadEsmDistOutput(FILENAME);
-  } else {
-    printChangeSummary(FILENAME);
-    const buildTargets = determineBuildTargets(FILENAME);
-    if (buildTargets.has('RUNTIME') || buildTargets.has('FLAG_CONFIG')) {
-      timedExecOrDie('gulp update-packages');
-      timedExecOrDie('gulp dist --esm --fortesting');
-      // TODO(#27703): Run bundle size check (--on_pr_build)
-      uploadEsmDistOutput(FILENAME);
-    } else {
-      console.log(
-        `${FILELOGPREFIX} Skipping`,
-        colors.cyan('Module Dist, Bundle Size'),
-        'because this commit does not affect the runtime or flag configs.'
-      );
-    }
-  }
-
-  stopTimer(FILENAME, FILENAME, startTime);
-}
-
-main();
diff --git a/build-system/pr-check/module-tests.js b/build-system/pr-check/module-tests.js
new file mode 100644
index 0000000000000..1ec4a199b59be
--- /dev/null
+++ b/build-system/pr-check/module-tests.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright 2020 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';
+
+/**
+ * @fileoverview Script that tests the module AMP runtime during CI.
+ */
+
+const argv = require('minimist')(process.argv.slice(2));
+const {MINIFIED_TARGETS} = require('../tasks/helpers');
+const {runCiJob} = require('./ci-job');
+const {skipDependentJobs, timedExecOrDie} = require('./utils');
+const {Targets, buildTargetsInclude} = require('./build-targets');
+
+const jobName = 'module-tests.js';
+
+/**
+ * Adds a canary or prod config string to all esm and non-esm minified targets.
+ */
+function prependConfig() {
+  const targets = MINIFIED_TARGETS.flatMap((target) => [
+    `dist/${target}.js`,
+    `dist/${target}.mjs`,
+  ]).join(',');
+  timedExecOrDie(
+    `amp prepend-global --${argv.config} --local_dev --fortesting --derandomize --target=${targets}`
+  );
+}
+
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  prependConfig();
+  timedExecOrDie('amp integration --nobuild --compiled --headless --esm');
+}
+
+/**
+ * Steps to run during PR builds.
+ */
+function prBuildWorkflow() {
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.INTEGRATION_TEST)) {
+    prependConfig();
+    timedExecOrDie(
+      `amp integration --nobuild --compiled --headless --esm --config=${argv.config}`
+    );
+  } else {
+    skipDependentJobs(
+      jobName,
+      'this PR does not affect the runtime or integration tests'
+    );
+  }
+}
+
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/nomodule-build.js b/build-system/pr-check/nomodule-build.js
new file mode 100644
index 0000000000000..a920209f8ac62
--- /dev/null
+++ b/build-system/pr-check/nomodule-build.js
@@ -0,0 +1,91 @@
+/**
+ * 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';
+
+/**
+ * @fileoverview Script that builds the nomodule AMP runtime during CI.
+ */
+
+const atob = require('atob');
+const {
+  abortTimedJob,
+  processAndStoreBuildToArtifacts,
+  skipDependentJobs,
+  startTimer,
+  storeNomoduleBuildToWorkspace,
+  timedExecOrDie,
+  timedExecWithError,
+} = require('./utils');
+const {log} = require('../common/logging');
+const {red, yellow} = require('../common/colors');
+const {runCiJob} = require('./ci-job');
+const {signalPrDeployUpload} = require('../tasks/pr-deploy-bot-utils');
+const {Targets, buildTargetsInclude} = require('./build-targets');
+
+const jobName = 'nomodule-build.js';
+
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  timedExecOrDie('amp dist --fortesting');
+  storeNomoduleBuildToWorkspace();
+}
+
+/**
+ * Steps to run during PR builds.
+ * @return {Promise<void>}
+ */
+async function prBuildWorkflow() {
+  const startTime = startTimer(jobName);
+  if (
+    buildTargetsInclude(
+      Targets.RUNTIME,
+      Targets.INTEGRATION_TEST,
+      Targets.E2E_TEST,
+      Targets.VISUAL_DIFF
+    )
+  ) {
+    const process = timedExecWithError('amp dist --fortesting');
+    if (process.status !== 0) {
+      const message = process?.error
+        ? process.error.message
+        : 'Unknown error, check logs';
+      log(red('ERROR'), yellow(message));
+      await signalPrDeployUpload('errored');
+      return abortTimedJob(jobName, startTime);
+    }
+    timedExecOrDie('amp storybook --build');
+    await processAndStoreBuildToArtifacts();
+    await signalPrDeployUpload('success');
+    storeNomoduleBuildToWorkspace();
+  } else {
+    await signalPrDeployUpload('skipped');
+
+    // Special case for visual diffs - Percy is a required check and must pass,
+    // but we just called `skipDependentJobs` so the Visual Diffs job will not
+    // run. Instead, we create an empty, passing check on Percy here.
+    process.env['PERCY_TOKEN'] = atob(process.env.PERCY_TOKEN_ENCODED);
+    timedExecOrDie('amp visual-diff --empty');
+
+    skipDependentJobs(
+      jobName,
+      'this PR does not affect the runtime, integration tests, end-to-end tests, or visual diff tests'
+    );
+  }
+}
+
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/nomodule-tests.js b/build-system/pr-check/nomodule-tests.js
new file mode 100644
index 0000000000000..6685b54ccc4b8
--- /dev/null
+++ b/build-system/pr-check/nomodule-tests.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright 2020 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';
+
+/**
+ * @fileoverview Script that tests the nomodule AMP runtime during CI.
+ */
+
+const argv = require('minimist')(process.argv.slice(2));
+const {
+  skipDependentJobs,
+  timedExecOrDie,
+  timedExecOrThrow,
+} = require('./utils');
+const {MINIFIED_TARGETS} = require('../tasks/helpers');
+const {runCiJob} = require('./ci-job');
+const {Targets, buildTargetsInclude} = require('./build-targets');
+
+const jobName = 'nomodule-tests.js';
+
+/**
+ * Adds a canary or prod config string to all non-esm minified targets.
+ */
+function prependConfig() {
+  const targets = MINIFIED_TARGETS.flatMap((target) => [
+    `dist/${target}.js`,
+  ]).join(',');
+  timedExecOrDie(
+    `amp prepend-global --${argv.config} --local_dev --fortesting --derandomize --target=${targets}`
+  );
+}
+
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  prependConfig();
+  try {
+    timedExecOrThrow(
+      `amp integration --nobuild --headless --compiled --report --config=${argv.config}`,
+      'Integration tests failed!'
+    );
+  } catch (e) {
+    if (e.status) {
+      process.exitCode = e.status;
+    }
+  } finally {
+    timedExecOrDie('amp test-report-upload');
+  }
+}
+
+/**
+ * Steps to run during PR builds.
+ */
+function prBuildWorkflow() {
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.INTEGRATION_TEST)) {
+    prependConfig();
+    timedExecOrDie(
+      `amp integration --nobuild --compiled --headless --config=${argv.config}`
+    );
+  } else {
+    skipDependentJobs(
+      jobName,
+      'this PR does not affect the runtime or integration tests'
+    );
+  }
+}
+
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/performance-tests.js b/build-system/pr-check/performance-tests.js
index 0de9504ca0985..ff6c40fe2657e 100644
--- a/build-system/pr-check/performance-tests.js
+++ b/build-system/pr-check/performance-tests.js
@@ -16,28 +16,19 @@
 'use strict';
 
 /**
- * @fileoverview
- * This script runs performance tests.
- * This is run during the CI stage = experiment; job = performance tests.
+ * @fileoverview Script that runs the performance tests during CI.
  */
 
-const {
-  downloadDistOutput,
-  startTimer,
-  stopTimer,
-  timedExecOrDie: timedExecOrDieBase,
-} = require('./utils');
-const FILENAME = 'performance-tests.js';
-const timedExecOrDie = (cmd) => timedExecOrDieBase(cmd, FILENAME);
+const {runCiJob} = require('./ci-job');
+const {timedExecOrDie} = require('./utils');
 
-async function main() {
-  const startTime = startTimer(FILENAME, FILENAME);
+const jobName = 'performance-tests.js';
 
-  downloadDistOutput(FILENAME);
-  timedExecOrDie('gulp update-packages');
-  timedExecOrDie('gulp performance --nobuild --quiet --headless');
-
-  stopTimer(FILENAME, FILENAME, startTime);
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  timedExecOrDie('amp performance --nobuild --quiet --headless');
 }
 
-main();
+runCiJob(jobName, pushBuildWorkflow, () => {});
diff --git a/build-system/pr-check/remote-tests.js b/build-system/pr-check/remote-tests.js
deleted file mode 100644
index c8e769583e9c9..0000000000000
--- a/build-system/pr-check/remote-tests.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * 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';
-
-/**
- * @fileoverview
- * This script kicks off the unit and integration tests on Sauce Labs.
- * This is run during the CI stage = test; job = remote tests.
- */
-
-const colors = require('ansi-colors');
-const {
-  downloadDistOutput,
-  printChangeSummary,
-  startTimer,
-  stopTimer,
-  startSauceConnect,
-  stopSauceConnect,
-  timedExecOrDie: timedExecOrDieBase,
-} = require('./utils');
-const {determineBuildTargets} = require('./build-targets');
-const {isTravisPullRequestBuild} = require('../common/travis');
-
-const FILENAME = 'remote-tests.js';
-const FILELOGPREFIX = colors.bold(colors.yellow(`${FILENAME}:`));
-const timedExecOrDie = (cmd) => timedExecOrDieBase(cmd, FILENAME);
-
-async function main() {
-  const startTime = startTimer(FILENAME, FILENAME);
-
-  if (!isTravisPullRequestBuild()) {
-    downloadDistOutput(FILENAME);
-    timedExecOrDie('gulp update-packages');
-
-    await startSauceConnect(FILENAME);
-    timedExecOrDie('gulp unit --nobuild --saucelabs');
-    timedExecOrDie(
-      'gulp integration --nobuild --compiled --saucelabs --stable'
-    );
-    timedExecOrDie('gulp integration --nobuild --compiled --saucelabs --beta');
-
-    stopSauceConnect(FILENAME);
-  } else {
-    printChangeSummary(FILENAME);
-    const buildTargets = determineBuildTargets(FILENAME);
-    if (
-      !buildTargets.has('RUNTIME') &&
-      !buildTargets.has('FLAG_CONFIG') &&
-      !buildTargets.has('UNIT_TEST') &&
-      !buildTargets.has('INTEGRATION_TEST')
-    ) {
-      console.log(
-        `${FILELOGPREFIX} Skipping`,
-        colors.cyan('Remote (Sauce Labs) Tests'),
-        'because this commit does not affect the runtime, flag configs,',
-        'unit tests, or integration tests.'
-      );
-      stopTimer(FILENAME, FILENAME, startTime);
-      return;
-    }
-    downloadDistOutput(FILENAME);
-    timedExecOrDie('gulp update-packages');
-    await startSauceConnect(FILENAME);
-
-    if (buildTargets.has('RUNTIME') || buildTargets.has('UNIT_TEST')) {
-      timedExecOrDie('gulp unit --nobuild --saucelabs');
-    }
-
-    if (
-      buildTargets.has('RUNTIME') ||
-      buildTargets.has('FLAG_CONFIG') ||
-      buildTargets.has('INTEGRATION_TEST')
-    ) {
-      timedExecOrDie(
-        'gulp integration --nobuild --compiled --saucelabs --stable'
-      );
-      timedExecOrDie(
-        'gulp integration --nobuild --compiled --saucelabs --beta'
-      );
-    }
-    stopSauceConnect(FILENAME);
-  }
-
-  stopTimer(FILENAME, FILENAME, startTime);
-}
-
-main();
diff --git a/build-system/pr-check/unit-tests.js b/build-system/pr-check/unit-tests.js
new file mode 100644
index 0000000000000..e9e3a82cd04f0
--- /dev/null
+++ b/build-system/pr-check/unit-tests.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright 2021 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';
+
+/**
+ * @fileoverview Script that runs the unit tests during CI.
+ */
+
+const {
+  skipDependentJobs,
+  timedExecOrDie,
+  timedExecOrThrow,
+} = require('./utils');
+const {runCiJob} = require('./ci-job');
+const {Targets, buildTargetsInclude} = require('./build-targets');
+
+const jobName = 'unit-tests.js';
+
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  try {
+    timedExecOrThrow(
+      'amp unit --headless --coverage --report',
+      'Unit tests failed!'
+    );
+    timedExecOrThrow(
+      'amp codecov-upload',
+      'Failed to upload code coverage to Codecov!'
+    );
+  } catch (e) {
+    if (e.status) {
+      process.exitCode = e.status;
+    }
+  } finally {
+    timedExecOrDie('amp test-report-upload');
+  }
+}
+
+/**
+ * Steps to run during PR builds.
+ */
+function prBuildWorkflow() {
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.UNIT_TEST)) {
+    timedExecOrDie('amp unit --headless --local_changes');
+    timedExecOrDie('amp unit --headless --coverage');
+    timedExecOrDie('amp codecov-upload');
+  } else {
+    skipDependentJobs(
+      jobName,
+      'this PR does not affect the runtime or unit tests'
+    );
+  }
+}
+
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/unminified-build.js b/build-system/pr-check/unminified-build.js
new file mode 100644
index 0000000000000..539dfe87daa48
--- /dev/null
+++ b/build-system/pr-check/unminified-build.js
@@ -0,0 +1,55 @@
+/**
+ * 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';
+
+/**
+ * @fileoverview Script that builds the unminified AMP runtime during CI.
+ */
+
+const {
+  skipDependentJobs,
+  storeUnminifiedBuildToWorkspace,
+  timedExecOrDie,
+} = require('./utils');
+const {runCiJob} = require('./ci-job');
+const {Targets, buildTargetsInclude} = require('./build-targets');
+
+const jobName = 'unminified-build.js';
+
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  timedExecOrDie('amp build --fortesting');
+  storeUnminifiedBuildToWorkspace();
+}
+
+/**
+ * Steps to run during PR builds.
+ */
+function prBuildWorkflow() {
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.INTEGRATION_TEST)) {
+    timedExecOrDie('amp build --fortesting');
+    storeUnminifiedBuildToWorkspace();
+  } else {
+    skipDependentJobs(
+      jobName,
+      'this PR does not affect the runtime or integration tests'
+    );
+  }
+}
+
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/unminified-tests.js b/build-system/pr-check/unminified-tests.js
new file mode 100644
index 0000000000000..8102e1f52c027
--- /dev/null
+++ b/build-system/pr-check/unminified-tests.js
@@ -0,0 +1,69 @@
+/**
+ * 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';
+
+/**
+ * @fileoverview Script that tests the unminified AMP runtime during CI.
+ */
+
+const {
+  skipDependentJobs,
+  timedExecOrDie,
+  timedExecOrThrow,
+} = require('./utils');
+const {runCiJob} = require('./ci-job');
+const {Targets, buildTargetsInclude} = require('./build-targets');
+
+const jobName = 'unminified-tests.js';
+
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  try {
+    timedExecOrThrow(
+      'amp integration --nobuild --headless --coverage --report',
+      'Integration tests failed!'
+    );
+    timedExecOrThrow(
+      'amp codecov-upload',
+      'Failed to upload code coverage to Codecov!'
+    );
+  } catch (e) {
+    if (e.status) {
+      process.exitCode = e.status;
+    }
+  } finally {
+    timedExecOrDie('amp test-report-upload');
+  }
+}
+
+/**
+ * Steps to run during PR builds.
+ */
+function prBuildWorkflow() {
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.INTEGRATION_TEST)) {
+    timedExecOrDie('amp integration --nobuild --headless --coverage');
+    timedExecOrDie('amp codecov-upload');
+  } else {
+    skipDependentJobs(
+      jobName,
+      'this PR does not affect the runtime or integration tests'
+    );
+  }
+}
+
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/utils.js b/build-system/pr-check/utils.js
index 1bc980ce85b3d..52f6216421be3 100644
--- a/build-system/pr-check/utils.js
+++ b/build-system/pr-check/utils.js
@@ -15,401 +15,309 @@
  */
 'use strict';
 
-const colors = require('ansi-colors');
-const requestPromise = require('request-promise');
+const fs = require('fs-extra');
+const {
+  ciPullRequestSha,
+  circleciBuildNumber,
+  isCiBuild,
+  isCircleciBuild,
+} = require('../common/ci');
 const {
   gitBranchCreationPoint,
   gitBranchName,
+  gitCiMainBaseline,
   gitCommitHash,
   gitDiffCommitLog,
-  gitDiffStatMaster,
-  gitTravisMasterBaseline,
+  gitDiffStatMain,
   shortSha,
 } = require('../common/git');
-const {
-  isTravisBuild,
-  travisBuildNumber,
-  travisPullRequestSha,
-} = require('../common/travis');
-const {execOrDie, execWithError, exec} = require('../common/exec');
-const {replaceUrls, signalDistUpload} = require('../tasks/pr-deploy-bot-utils');
-
-const BUILD_OUTPUT_FILE = isTravisBuild()
-  ? `amp_build_${travisBuildNumber()}.zip`
-  : '';
-const DIST_OUTPUT_FILE = isTravisBuild()
-  ? `amp_dist_${travisBuildNumber()}.zip`
-  : '';
-const ESM_DIST_OUTPUT_FILE = isTravisBuild()
-  ? `amp_esm_dist_${travisBuildNumber()}.zip`
-  : '';
-
-const BUILD_OUTPUT_DIRS = 'build/ dist/ dist.3p/';
-const APP_SERVING_DIRS = 'dist.tools/ examples/ test/manual/';
-
-const OUTPUT_STORAGE_LOCATION = 'gs://amp-travis-builds';
-const OUTPUT_STORAGE_KEY_FILE = 'sa-travis-key.json';
-const OUTPUT_STORAGE_PROJECT_ID = 'amp-travis-build-storage';
-const OUTPUT_STORAGE_SERVICE_ACCOUNT =
-  'sa-travis@amp-travis-build-storage.iam.gserviceaccount.com';
+const {cyan, green, yellow} = require('../common/colors');
+const {exec, execOrDie, execOrThrow, execWithError} = require('../common/exec');
+const {getLoggingPrefix, logWithoutTimestamp} = require('../common/logging');
+const {replaceUrls} = require('../tasks/pr-deploy-bot-utils');
+
+const UNMINIFIED_CONTAINER_DIRECTORY = 'unminified';
+const NOMODULE_CONTAINER_DIRECTORY = 'nomodule';
+const MODULE_CONTAINER_DIRECTORY = 'module';
+
+const ARTIFACT_FILE_NAME = '/tmp/artifacts/amp_nomodule_build.tar.gz';
+
+const BUILD_OUTPUT_DIRS = ['build', 'dist', 'dist.3p'];
+const APP_SERVING_DIRS = [
+  ...BUILD_OUTPUT_DIRS,
+  'dist.tools',
+  'examples',
+  'test/manual',
+  'test/fixtures/e2e',
+];
 
 const GIT_BRANCH_URL =
-  'https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#create-a-git-branch';
+  'https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md#create-a-git-branch';
 
 /**
  * Prints a summary of files changed by, and commits included in the PR.
- * @param {string} fileName
  */
-function printChangeSummary(fileName) {
-  const fileLogPrefix = colors.bold(colors.yellow(`${fileName}:`));
+function printChangeSummary() {
+  const loggingPrefix = getLoggingPrefix();
   let commitSha;
 
-  if (isTravisBuild()) {
-    console.log(
-      `${fileLogPrefix} Latest commit from ${colors.cyan('master')} included ` +
-        `in this build: ${colors.cyan(shortSha(gitTravisMasterBaseline()))}`
+  if (isCiBuild()) {
+    logWithoutTimestamp(
+      `${loggingPrefix} Latest commit from ${cyan('main')} included ` +
+        `in this build: ${cyan(shortSha(gitCiMainBaseline()))}`
     );
-    commitSha = travisPullRequestSha();
+    commitSha = ciPullRequestSha();
   } else {
     commitSha = gitCommitHash();
   }
-  console.log(
-    `${fileLogPrefix} Testing the following changes at commit ` +
-      `${colors.cyan(shortSha(commitSha))}`
+  logWithoutTimestamp(
+    `${loggingPrefix} Testing the following changes at commit ` +
+      `${cyan(shortSha(commitSha))}`
   );
 
-  const filesChanged = gitDiffStatMaster();
-  console.log(filesChanged);
+  const filesChanged = gitDiffStatMain();
+  logWithoutTimestamp(filesChanged);
 
   const branchCreationPoint = gitBranchCreationPoint();
   if (branchCreationPoint) {
-    console.log(
-      `${fileLogPrefix} Commit log since branch`,
-      `${colors.cyan(gitBranchName())} was forked from`,
-      `${colors.cyan('master')} at`,
-      `${colors.cyan(shortSha(branchCreationPoint))}:`
+    logWithoutTimestamp(
+      `${loggingPrefix} Commit log since branch`,
+      `${cyan(gitBranchName())} was forked from`,
+      `${cyan('main')} at`,
+      `${cyan(shortSha(branchCreationPoint))}:`
     );
-    console.log(gitDiffCommitLog() + '\n');
+    logWithoutTimestamp(gitDiffCommitLog() + '\n');
   } else {
-    console.error(
-      fileLogPrefix,
-      colors.yellow('WARNING:'),
+    logWithoutTimestamp(
+      loggingPrefix,
+      yellow('WARNING:'),
       'Could not find a common ancestor for',
-      colors.cyan(gitBranchName()),
+      cyan(gitBranchName()),
       'and',
-      colors.cyan('master') + '. (This can happen with older PR branches.)'
+      cyan('main') + '. (This can happen with older PR branches.)'
     );
-    console.error(
-      fileLogPrefix,
-      colors.yellow('NOTE 1:'),
+    logWithoutTimestamp(
+      loggingPrefix,
+      yellow('NOTE 1:'),
       'If this causes unexpected test failures, try rebasing the PR branch on',
-      colors.cyan('master') + '.'
+      cyan('main') + '.'
     );
-    console.error(
-      fileLogPrefix,
-      colors.yellow('NOTE 2:'),
+    logWithoutTimestamp(
+      loggingPrefix,
+      yellow('NOTE 2:'),
       "If rebasing doesn't work, you may have to recreate the branch. See",
-      colors.cyan(GIT_BRANCH_URL) + '.\n'
+      cyan(GIT_BRANCH_URL) + '.\n'
     );
   }
 }
 
 /**
- * Starts connection to Sauce Labs after getting account credentials
- * @param {string} functionName
+ * Signal to dependent jobs that they should be skipped. Uses an identifier that
+ * corresponds to the current job to eliminate conflicts if a parallel job also
+ * signals the same thing.
+ *
+ * Currently only relevant for CircleCI builds.
  */
-async function startSauceConnect(functionName) {
-  process.env['SAUCE_USERNAME'] = 'amphtml';
-  const response = await requestPromise(
-    'https://amphtml-sauce-token-dealer.appspot.com/getJwtToken'
-  );
-  process.env['SAUCE_ACCESS_KEY'] = response.trim();
-  const startScCmd = 'build-system/sauce_connect/start_sauce_connect.sh';
-  const fileLogPrefix = colors.bold(colors.yellow(`${functionName}:`));
-  console.log(
-    '\n' + fileLogPrefix,
-    'Starting Sauce Connect Proxy:',
-    colors.cyan(startScCmd)
-  );
-  execOrDie(startScCmd);
+function signalGracefulHalt() {
+  if (isCircleciBuild()) {
+    const loggingPrefix = getLoggingPrefix();
+    const sentinelFile = `/tmp/workspace/.CI_GRACEFULLY_HALT_${circleciBuildNumber()}`;
+    fs.closeSync(fs.openSync(sentinelFile, 'w'));
+    logWithoutTimestamp(
+      `${loggingPrefix} Created ${cyan(sentinelFile)} to signal graceful halt.`
+    );
+  }
 }
 
 /**
- * Stops connection to Sauce Labs
- * @param {string} functionName
+ * Prints a message indicating why a job was skipped and mark its dependent jobs
+ * for skipping.
+ * @param {string} jobName
+ * @param {string} skipReason
  */
-function stopSauceConnect(functionName) {
-  const stopScCmd = 'build-system/sauce_connect/stop_sauce_connect.sh';
-  const fileLogPrefix = colors.bold(colors.yellow(`${functionName}:`));
-  console.log(
-    '\n' + fileLogPrefix,
-    'Stopping Sauce Connect Proxy:',
-    colors.cyan(stopScCmd)
+function skipDependentJobs(jobName, skipReason) {
+  const loggingPrefix = getLoggingPrefix();
+  logWithoutTimestamp(
+    `${loggingPrefix} Skipping ${cyan(jobName)} because ${skipReason}.`
   );
-  execOrDie(stopScCmd);
+  signalGracefulHalt();
 }
 
 /**
- * Starts a timer to measure the execution time of the given function.
- * @param {string} functionName
- * @param {string} fileName
+ * Starts a timer to measure the execution time of the given job / command.
+ * @param {string} jobNameOrCmd
  * @return {DOMHighResTimeStamp}
  */
-function startTimer(functionName, fileName) {
+function startTimer(jobNameOrCmd) {
   const startTime = Date.now();
-  const fileLogPrefix = colors.bold(colors.yellow(`${fileName}:`));
-  console.log(
-    '\n' + fileLogPrefix,
+  const loggingPrefix = getLoggingPrefix();
+  logWithoutTimestamp(
+    '\n' + loggingPrefix,
     'Running',
-    colors.cyan(functionName) + '...'
+    cyan(jobNameOrCmd) + '...'
   );
   return startTime;
 }
 
 /**
- * Stops the timer for the given function and prints the execution time.
- * @param {string} functionName
- * @param {string} fileName
+ * Stops the timer for the given job / command and prints the execution time.
+ * @param {string} jobNameOrCmd
  * @param {DOMHighResTimeStamp} startTime
- * @return {number}
  */
-function stopTimer(functionName, fileName, startTime) {
+function stopTimer(jobNameOrCmd, startTime) {
   const endTime = Date.now();
   const executionTime = endTime - startTime;
   const mins = Math.floor(executionTime / 60000);
   const secs = Math.floor((executionTime % 60000) / 1000);
-  const fileLogPrefix = colors.bold(colors.yellow(`${fileName}:`));
-  console.log(
-    fileLogPrefix,
+  const loggingPrefix = getLoggingPrefix();
+  logWithoutTimestamp(
+    loggingPrefix,
     'Done running',
-    colors.cyan(functionName),
+    cyan(jobNameOrCmd),
     'Total time:',
-    colors.green(mins + 'm ' + secs + 's')
+    green(mins + 'm ' + secs + 's')
   );
 }
 
 /**
- * Stops the Node process and timer
- * @param {string} fileName
- * @param {startTime} startTime
+ * Aborts the process after stopping the timer for a given job
+ * @param {string} jobName
+ * @param {number} startTime
  */
-function stopTimedJob(fileName, startTime) {
-  stopTimer(fileName, fileName, startTime);
+function abortTimedJob(jobName, startTime) {
+  stopTimer(jobName, startTime);
   process.exitCode = 1;
 }
 
+/**
+ * Wraps an exec helper in a timer. Returns the result of the helper.
+ * @param {function(string, string=): ?} execFn
+ * @return {function(string, string=): ?}
+ */
+function timedExecFn(execFn) {
+  return (cmd, ...rest) => {
+    const startTime = startTimer(cmd);
+    const p = execFn(cmd, ...rest);
+    stopTimer(cmd, startTime);
+    return p;
+  };
+}
+
 /**
  * Executes the provided command and times it. Errors, if any, are printed.
+ * @function
  * @param {string} cmd
- * @param {string} fileName
  * @return {!Object} Node process
  */
-function timedExec(cmd, fileName = 'utils.js') {
-  const startTime = startTimer(cmd, fileName);
-  const p = exec(cmd);
-  stopTimer(cmd, fileName, startTime);
-  return p;
-}
+const timedExec = timedExecFn(exec);
 
 /**
  * Executes the provided command and times it. Errors, if any, are returned.
+ * @function
  * @param {string} cmd
- * @param {string} fileName
  * @return {!Object} Node process
  */
-function timedExecWithError(cmd, fileName = 'utils.js') {
-  const startTime = startTimer(cmd, fileName);
-  const p = execWithError(cmd);
-  stopTimer(cmd, fileName, startTime);
-  return p;
-}
+const timedExecWithError = timedExecFn(execWithError);
 
 /**
  * Executes the provided command and times it. The program terminates in case of
  * failure.
+ * @function
  * @param {string} cmd
- * @param {string} fileName
  */
-function timedExecOrDie(cmd, fileName = 'utils.js') {
-  const startTime = startTimer(cmd, fileName);
-  execOrDie(cmd);
-  stopTimer(cmd, fileName, startTime);
-}
+const timedExecOrDie = timedExecFn(execOrDie);
 
 /**
- * Download output helper
- * @param {string} functionName
- * @param {string} outputFileName
- * @param {string} outputDirs
- * @private
+ * Executes the provided command and times it. The program throws on error in
+ * case of failure.
+ * @function
+ * @param {string} cmd
  */
-function downloadOutput_(functionName, outputFileName, outputDirs) {
-  const fileLogPrefix = colors.bold(colors.yellow(`${functionName}:`));
-  const buildOutputDownloadUrl = `${OUTPUT_STORAGE_LOCATION}/${outputFileName}`;
-  const dirsToUnzip = outputDirs.split(' ');
-
-  console.log(
-    `${fileLogPrefix} Downloading build output from ` +
-      colors.cyan(buildOutputDownloadUrl) +
-      '...'
-  );
-  exec('echo travis_fold:start:download_results && echo');
-  authenticateWithStorageLocation_();
-  execOrDie(`gsutil cp ${buildOutputDownloadUrl} ${outputFileName}`);
-  exec('echo travis_fold:end:download_results');
-
-  console.log(
-    `${fileLogPrefix} Extracting ` + colors.cyan(outputFileName) + '...'
-  );
-  exec('echo travis_fold:start:unzip_results && echo');
-  dirsToUnzip.forEach((dir) => {
-    execOrDie(`unzip ${outputFileName} '${dir.replace('/', '/*')}'`);
-  });
-  exec('echo travis_fold:end:unzip_results');
-
-  console.log(fileLogPrefix, 'Verifying extracted files...');
-  exec('echo travis_fold:start:verify_unzip_results && echo');
-  execOrDie(`ls -laR ${outputDirs}`);
-  exec('echo travis_fold:end:verify_unzip_results');
-}
+const timedExecOrThrow = timedExecFn(execOrThrow);
 
 /**
- * Upload output helper
- * @param {string} functionName
- * @param {string} outputFileName
- * @param {string} outputDirs
+ * Stores build files to the CI workspace.
+ * @param {string} containerDirectory
  * @private
  */
-function uploadOutput_(functionName, outputFileName, outputDirs) {
-  const fileLogPrefix = colors.bold(colors.yellow(`${functionName}:`));
-
-  console.log(
-    `\n${fileLogPrefix} Compressing ` +
-      colors.cyan(outputDirs.split(' ').join(', ')) +
-      ' into ' +
-      colors.cyan(outputFileName) +
-      '...'
-  );
-  exec('echo travis_fold:start:zip_results && echo');
-  execOrDie(`zip -r ${outputFileName} ${outputDirs}`);
-  exec('echo travis_fold:end:zip_results');
-
-  console.log(
-    `${fileLogPrefix} Uploading ` +
-      colors.cyan(outputFileName) +
-      ' to ' +
-      colors.cyan(OUTPUT_STORAGE_LOCATION) +
-      '...'
-  );
-  exec('echo travis_fold:start:upload_results && echo');
-  authenticateWithStorageLocation_();
-  execOrDie(`gsutil -m cp -r ${outputFileName} ${OUTPUT_STORAGE_LOCATION}`);
-  exec('echo travis_fold:end:upload_results');
-}
-
-function authenticateWithStorageLocation_() {
-  decryptTravisKey_();
-  execOrDie(
-    'gcloud auth activate-service-account ' +
-      `--key-file ${OUTPUT_STORAGE_KEY_FILE}`
-  );
-  execOrDie(`gcloud config set account ${OUTPUT_STORAGE_SERVICE_ACCOUNT}`);
-  execOrDie('gcloud config set pass_credentials_to_gsutil true');
-  execOrDie(`gcloud config set project ${OUTPUT_STORAGE_PROJECT_ID}`);
-  execOrDie('gcloud config list');
-}
-
-/**
- * Downloads and unzips build output from storage
- * @param {string} functionName
- */
-function downloadBuildOutput(functionName) {
-  downloadOutput_(functionName, BUILD_OUTPUT_FILE, BUILD_OUTPUT_DIRS);
+function storeBuildToWorkspace_(containerDirectory) {
+  if (isCircleciBuild()) {
+    fs.ensureDirSync(`/tmp/workspace/builds/${containerDirectory}`);
+    for (const outputDir of BUILD_OUTPUT_DIRS) {
+      fs.moveSync(
+        `${outputDir}/`,
+        `/tmp/workspace/builds/${containerDirectory}/${outputDir}`
+      );
+    }
+  }
 }
 
 /**
- * Downloads and unzips dist output from storage
- * @param {string} functionName
+ * Stores unminified build files to the CI workspace.
  */
-function downloadDistOutput(functionName) {
-  downloadOutput_(functionName, DIST_OUTPUT_FILE, BUILD_OUTPUT_DIRS);
+function storeUnminifiedBuildToWorkspace() {
+  storeBuildToWorkspace_(UNMINIFIED_CONTAINER_DIRECTORY);
 }
 
 /**
- * Downloads and unzips esm dist output from storage
- * @param {string} functionName
+ * Stores nomodule build files to the CI workspace.
  */
-function downloadEsmDistOutput(functionName) {
-  downloadOutput_(functionName, ESM_DIST_OUTPUT_FILE, BUILD_OUTPUT_DIRS);
+function storeNomoduleBuildToWorkspace() {
+  storeBuildToWorkspace_(NOMODULE_CONTAINER_DIRECTORY);
 }
 
 /**
- * Zips and uploads the build output to a remote storage location
- * @param {string} functionName
+ * Stores module build files to the CI workspace.
  */
-function uploadBuildOutput(functionName) {
-  uploadOutput_(functionName, BUILD_OUTPUT_FILE, BUILD_OUTPUT_DIRS);
+function storeModuleBuildToWorkspace() {
+  storeBuildToWorkspace_(MODULE_CONTAINER_DIRECTORY);
 }
 
 /**
- * Zips and uploads the dist output to a remote storage location
- * @param {string} functionName
+ * Stores an experiment's build files to the CI workspace.
+ * @param {string} exp one of 'experimentA', 'experimentB', or 'experimentC'.
  */
-function uploadDistOutput(functionName) {
-  const distOutputDirs = `${BUILD_OUTPUT_DIRS} ${APP_SERVING_DIRS}`;
-  uploadOutput_(functionName, DIST_OUTPUT_FILE, distOutputDirs);
+function storeExperimentBuildToWorkspace(exp) {
+  storeBuildToWorkspace_(exp);
 }
 
 /**
- * Zips and uploads the esm dist output to a remote storage location
- * @param {string} functionName
+ * Replaces URLS in HTML files, compresses and stores nomodule build in CI artifacts.
  */
-function uploadEsmDistOutput(functionName) {
-  const esmDistOutputDirs = `${BUILD_OUTPUT_DIRS} ${APP_SERVING_DIRS}`;
-  uploadOutput_(functionName, ESM_DIST_OUTPUT_FILE, esmDistOutputDirs);
-}
+async function processAndStoreBuildToArtifacts() {
+  if (!isCircleciBuild()) {
+    return;
+  }
 
-/**
- * Replaces URLS in HTML files, zips and uploads dist output,
- * and signals to the AMP PR Deploy bot that the upload is complete.
- * @param {string} functionName
- */
-async function processAndUploadDistOutput(functionName) {
   await replaceUrls('test/manual');
   await replaceUrls('examples');
-  uploadDistOutput(functionName);
-  await signalDistUpload('success');
-}
 
-/**
- * Decrypts key used by storage service account
- */
-function decryptTravisKey_() {
-  // -md sha256 is required due to encryption differences between
-  // openssl 1.1.1a, which was used to encrypt the key, and
-  // openssl 1.0.2g, which is used by Travis to decrypt.
-  execOrDie(
-    `openssl aes-256-cbc -md sha256 -k ${process.env.GCP_TOKEN} -in ` +
-      `build-system/common/sa-travis-key.json.enc -out ` +
-      `${OUTPUT_STORAGE_KEY_FILE} -d`
+  const loggingPrefix = getLoggingPrefix();
+
+  logWithoutTimestamp(
+    `\n${loggingPrefix} Compressing ` +
+      cyan(APP_SERVING_DIRS.join(', ')) +
+      ' into ' +
+      cyan(ARTIFACT_FILE_NAME) +
+      '...'
   );
+  execOrDie(`tar -czf ${ARTIFACT_FILE_NAME} ${APP_SERVING_DIRS.join('/ ')}/`);
+  execOrDie(`du -sh ${ARTIFACT_FILE_NAME}`);
 }
 
 module.exports = {
-  downloadBuildOutput,
-  downloadDistOutput,
-  downloadEsmDistOutput,
+  abortTimedJob,
   printChangeSummary,
-  processAndUploadDistOutput,
+  skipDependentJobs,
   startTimer,
   stopTimer,
-  startSauceConnect,
-  stopSauceConnect,
-  stopTimedJob,
   timedExec,
   timedExecOrDie,
   timedExecWithError,
-  uploadBuildOutput,
-  uploadDistOutput,
-  uploadEsmDistOutput,
+  timedExecOrThrow,
+  storeUnminifiedBuildToWorkspace,
+  storeNomoduleBuildToWorkspace,
+  storeModuleBuildToWorkspace,
+  storeExperimentBuildToWorkspace,
+  processAndStoreBuildToArtifacts,
 };
diff --git a/build-system/pr-check/validator-tests.js b/build-system/pr-check/validator-tests.js
index f5154a0a2735b..291ad06af946f 100644
--- a/build-system/pr-check/validator-tests.js
+++ b/build-system/pr-check/validator-tests.js
@@ -16,76 +16,53 @@
 'use strict';
 
 /**
- * @fileoverview
- * This script runs validator tests.
- * This is run during the CI stage = build; job = validator.
+ * @fileoverview Script that runs the validator tests during CI.
  */
 
-const colors = require('ansi-colors');
-const {
-  printChangeSummary,
-  startTimer,
-  stopTimer,
-  stopTimedJob,
-  timedExecOrDie: timedExecOrDieBase,
-} = require('./utils');
-const {determineBuildTargets} = require('./build-targets');
-const {isTravisPullRequestBuild} = require('../common/travis');
-const {runYarnChecks} = require('./yarn-checks');
+const {runCiJob} = require('./ci-job');
+const {skipDependentJobs, timedExecOrDie} = require('./utils');
+const {Targets, buildTargetsInclude} = require('./build-targets');
 
-const FILENAME = 'validator-tests.js';
-const FILELOGPREFIX = colors.bold(colors.yellow(`${FILENAME}:`));
-const timedExecOrDie = (cmd) => timedExecOrDieBase(cmd, FILENAME);
+const jobName = 'validator-tests.js';
 
-function main() {
-  const startTime = startTimer(FILENAME, FILENAME);
-  if (!runYarnChecks(FILENAME)) {
-    stopTimedJob(FILENAME, startTime);
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  timedExecOrDie('amp validator-webui');
+  timedExecOrDie('amp validator');
+  timedExecOrDie('amp validator-cpp');
+}
+
+/**
+ * Steps to run during PR builds.
+ */
+function prBuildWorkflow() {
+  if (
+    !buildTargetsInclude(
+      Targets.RUNTIME,
+      Targets.VALIDATOR,
+      Targets.VALIDATOR_WEBUI
+    )
+  ) {
+    skipDependentJobs(
+      jobName,
+      'this PR does not affect the runtime, validator, or validator web UI'
+    );
     return;
   }
 
-  if (!isTravisPullRequestBuild()) {
-    timedExecOrDie('gulp validator');
-    // #27786: Java validator is not guaranteed to be in sync with AMP code.
-    // #28497: Java Validator tests are broken due to Ubuntu keyserver outage.
-    // timedExec('gulp validator-java');
-    timedExecOrDie('gulp validator-webui');
-  } else {
-    printChangeSummary(FILENAME);
-    const buildTargets = determineBuildTargets(FILENAME);
-    if (
-      !buildTargets.has('RUNTIME') &&
-      !buildTargets.has('VALIDATOR') &&
-      !buildTargets.has('VALIDATOR_WEBUI') &&
-      !buildTargets.has('VALIDATOR_JAVA')
-    ) {
-      console.log(
-        `${FILELOGPREFIX} Skipping`,
-        colors.cyan('Validator Tests'),
-        'because this commit does not affect the runtime, validator,',
-        'or validator web UI.'
-      );
-      stopTimer(FILENAME, FILENAME, startTime);
-      return;
-    }
-
-    if (buildTargets.has('RUNTIME') || buildTargets.has('VALIDATOR')) {
-      timedExecOrDie('gulp validator');
-    }
-
-    // #28497: Java Validator tests are broken due to Ubuntu keyserver outage.
-    // if (buildTargets.has('VALIDATOR_JAVA')) {
-    //   timedExecOrDie('gulp validator-java');
-    // } else if (buildTargets.has('RUNTIME')) {
-    //   timedExec('gulp validator-java');
-    // }
+  if (buildTargetsInclude(Targets.VALIDATOR_WEBUI)) {
+    timedExecOrDie('amp validator-webui');
+  }
 
-    if (buildTargets.has('VALIDATOR_WEBUI')) {
-      timedExecOrDie('gulp validator-webui');
-    }
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.VALIDATOR)) {
+    timedExecOrDie('amp validator');
   }
 
-  stopTimer(FILENAME, FILENAME, startTime);
+  if (buildTargetsInclude(Targets.VALIDATOR)) {
+    timedExecOrDie('amp validator-cpp');
+  }
 }
 
-main();
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/visual-diff-tests.js b/build-system/pr-check/visual-diff-tests.js
index ac9e7ddd2329c..2499c7d4dbd27 100644
--- a/build-system/pr-check/visual-diff-tests.js
+++ b/build-system/pr-check/visual-diff-tests.js
@@ -16,59 +16,38 @@
 'use strict';
 
 /**
- * @fileoverview
- * This script runs the visual diff tests.
- * This is run during the CI stage = test; job = visual diff tests.
+ * @fileoverview Script that runs the visual diff tests during CI.
  */
 
 const atob = require('atob');
-const colors = require('ansi-colors');
-const {
-  downloadDistOutput,
-  printChangeSummary,
-  startTimer,
-  stopTimer,
-  timedExecOrDie: timedExecOrDieBase,
-} = require('./utils');
-const {determineBuildTargets} = require('./build-targets');
-const {isTravisPullRequestBuild} = require('../common/travis');
+const {runCiJob} = require('./ci-job');
+const {skipDependentJobs, timedExecOrDie} = require('./utils');
+const {Targets, buildTargetsInclude} = require('./build-targets');
 
-const FILENAME = 'visual-diff-tests.js';
-const FILELOGPREFIX = colors.bold(colors.yellow(`${FILENAME}:`));
-const timedExecOrDie = (cmd) => timedExecOrDieBase(cmd, FILENAME);
+const jobName = 'visual-diff-tests.js';
 
-function main() {
-  const startTime = startTimer(FILENAME, FILENAME);
+/**
+ * Steps to run during push builds.
+ */
+function pushBuildWorkflow() {
+  process.env['PERCY_TOKEN'] = atob(process.env.PERCY_TOKEN_ENCODED);
+  timedExecOrDie('amp visual-diff --nobuild --main');
+}
 
-  if (!isTravisPullRequestBuild()) {
-    downloadDistOutput(FILENAME);
-    timedExecOrDie('gulp update-packages');
-    process.env['PERCY_TOKEN'] = atob(process.env.PERCY_TOKEN_ENCODED);
-    timedExecOrDie('gulp visual-diff --compiled --nobuild --master');
+/**
+ * Steps to run during PR builds.
+ */
+function prBuildWorkflow() {
+  process.env['PERCY_TOKEN'] = atob(process.env.PERCY_TOKEN_ENCODED);
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.VISUAL_DIFF)) {
+    timedExecOrDie('amp visual-diff --nobuild');
   } else {
-    printChangeSummary(FILENAME);
-    const buildTargets = determineBuildTargets(FILENAME);
-    process.env['PERCY_TOKEN'] = atob(process.env.PERCY_TOKEN_ENCODED);
-    if (
-      buildTargets.has('RUNTIME') ||
-      buildTargets.has('FLAG_CONFIG') ||
-      buildTargets.has('VISUAL_DIFF')
-    ) {
-      downloadDistOutput(FILENAME);
-      timedExecOrDie('gulp update-packages');
-      timedExecOrDie('gulp visual-diff --compiled --nobuild');
-    } else {
-      timedExecOrDie('gulp visual-diff --empty');
-      console.log(
-        `${FILELOGPREFIX} Skipping`,
-        colors.cyan('Visual Diff Tests'),
-        'because this commit does not affect the runtime, flag configs,',
-        'or visual diff tests.'
-      );
-    }
+    timedExecOrDie('amp visual-diff --empty');
+    skipDependentJobs(
+      jobName,
+      'this PR does not affect the runtime or visual diff tests'
+    );
   }
-
-  stopTimer(FILENAME, FILENAME, startTime);
 }
 
-main();
+runCiJob(jobName, pushBuildWorkflow, prBuildWorkflow);
diff --git a/build-system/pr-check/yarn-checks.js b/build-system/pr-check/yarn-checks.js
deleted file mode 100644
index 772f105aa9b05..0000000000000
--- a/build-system/pr-check/yarn-checks.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * 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';
-
-/**
- * @fileoverview
- * This script makes sure that package.json and yarn.lock
- * are in sync and up to date.
- */
-
-const colors = require('ansi-colors');
-const {getStderr} = require('../common/exec');
-const {gitDiffColor, gitDiffNameOnly} = require('../common/git');
-
-/**
- * Makes sure package.json and yarn.lock are in sync.
- * @param {string} fileName
- * @return {boolean}
- */
-function isYarnLockFileInSync(fileName = 'yarn-checks.js') {
-  const fileLogPrefix = colors.bold(colors.yellow(`${fileName}:`));
-  const yarnIntegrityCheck = getStderr('yarn check --integrity').trim();
-  if (yarnIntegrityCheck.includes('error')) {
-    console.error(
-      fileLogPrefix,
-      colors.red('ERROR:'),
-      'Found the following',
-      colors.cyan('yarn'),
-      'errors:\n' + colors.cyan(yarnIntegrityCheck)
-    );
-    console.error(
-      fileLogPrefix,
-      colors.red('ERROR:'),
-      'Updates to',
-      colors.cyan('package.json'),
-      'must be accompanied by a corresponding update to',
-      colors.cyan('yarn.lock')
-    );
-    console.error(
-      fileLogPrefix,
-      colors.yellow('NOTE:'),
-      'To update',
-      colors.cyan('yarn.lock'),
-      'after changing',
-      colors.cyan('package.json') + ',',
-      'run',
-      '"' + colors.cyan('yarn install') + '"',
-      'and include the updated',
-      colors.cyan('yarn.lock'),
-      'in your PR.'
-    );
-    return false;
-  }
-  return true;
-}
-
-/**
- * Makes sure that yarn.lock was properly updated.
- * @param {string} fileName
- * @return {boolean}
- */
-function isYarnLockFileProperlyUpdated(fileName = 'yarn-checks.js') {
-  const filesChanged = gitDiffNameOnly();
-  const fileLogPrefix = colors.bold(colors.yellow(`${fileName}:`));
-
-  if (filesChanged.includes('yarn.lock')) {
-    console.error(
-      fileLogPrefix,
-      colors.red('ERROR:'),
-      'This PR did not properly update',
-      colors.cyan('yarn.lock') + '.'
-    );
-    console.error(
-      fileLogPrefix,
-      colors.yellow('NOTE:'),
-      'To fix this, sync your branch to',
-      colors.cyan('upstream/master') + ', run',
-      colors.cyan('gulp update-packages') +
-        ', and push a new commit containing the changes.'
-    );
-    console.error(fileLogPrefix, 'Expected changes:');
-    console.log(gitDiffColor());
-    return false;
-  }
-  return true;
-}
-
-/**
- * Runs both yarn checks, and returns false if either one fails.
- * @param {string} filename
- * @return {boolean}
- */
-function runYarnChecks(filename) {
-  return (
-    isYarnLockFileInSync(filename) && isYarnLockFileProperlyUpdated(filename)
-  );
-}
-
-module.exports = {
-  runYarnChecks,
-};
diff --git a/build-system/runner/OWNERS b/build-system/runner/OWNERS
deleted file mode 100644
index 6e9c5e237735f..0000000000000
--- a/build-system/runner/OWNERS
+++ /dev/null
@@ -1,14 +0,0 @@
-// For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
-
-{
-  rules: [
-    {
-      owners: [
-        {name: 'ampproject/wg-infra'},
-        {name: 'erwinmombay', notify: true},
-        {name: 'rsimha', notify: true},
-      ],
-    },
-  ],
-}
diff --git a/build-system/runner/build.xml b/build-system/runner/build.xml
deleted file mode 100644
index e6ea19fa3ff9d..0000000000000
--- a/build-system/runner/build.xml
+++ /dev/null
@@ -1,52 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<project default="jar" basedir="." name="runner">
-  <!--this file was created by Eclipse Runnable JAR file Export Wizard-->
-  <!--ANT 1.7 is required-->
-  <!--define folder properties-->
-  <property name="dir.buildfile" value="."/>
-  <property name="src.dir" value="${basedir}/src"/>
-  <property name="build.dir" value="${basedir}/build"/>
-  <property name="dist.dir" value="${basedir}/dist"/>
-  <property name="runner-jarfile" value="${build.dir}/${ant.project.name}.jar"/>
-  <property name="compiler.dir" value="${basedir}/../../node_modules/google-closure-compiler-java"/>
-  <property name="classes.dir" value="${build.dir}/classes"/>
-
-  <target name="jar" depends="compile">
-    <jar destfile="${runner-jarfile}">
-      <fileset dir="${classes.dir}"/>
-      <zipgroupfileset dir="${compiler.dir}">
-        <include name="compiler.jar"/>
-      </zipgroupfileset>
-      <manifest>
-        <attribute name="Main-Class" value="org.ampproject.AmpCommandLineRunner"/>
-        <attribute name="Class-Path" value="./ compiler.jar"/>
-      </manifest>
-    </jar>
-    <mkdir dir="${dist.dir}"/>
-    <copy file="${build.dir}/runner.jar" todir="${dist.dir}"/>
-  </target>
-
-  <target name="compile">
-    <mkdir dir="${classes.dir}"/>
-    <javac srcdir="${src.dir}"
-        destdir="${classes.dir}"
-        excludes=".git,.DS_Store"
-        includeantruntime="false"
-        encoding="utf-8">
-      <classpath refid="srcclasspath.path"/>
-      <compilerarg value="-Xlint:unchecked"/>
-    </javac>
-  </target>
-
-  <target name="clean" description="delete generated files">
-    <delete dir="${build.dir}"/>
-    <delete dir="${dist.dir}"/>
-  </target>
-
-  <path id="srcclasspath.path">
-    <pathelement location="${classes.dir}"/>
-    <fileset dir="${compiler.dir}">
-      <include name="compiler.jar"/>
-    </fileset>
-  </path>
-</project>
diff --git a/build-system/runner/src/org/ampproject/AmpCodingConvention.java b/build-system/runner/src/org/ampproject/AmpCodingConvention.java
deleted file mode 100644
index ce4fb72edeaf7..0000000000000
--- a/build-system/runner/src/org/ampproject/AmpCodingConvention.java
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-package org.ampproject;
-
-import com.google.common.collect.ImmutableCollection;
-import com.google.common.collect.ImmutableList;
-import com.google.javascript.jscomp.ClosureCodingConvention;
-import com.google.javascript.jscomp.CodingConvention;
-import com.google.javascript.jscomp.CodingConventions;
-import com.google.javascript.rhino.jstype.JSType;
-import com.google.javascript.rhino.jstype.JSTypeNative;
-
-import java.util.ArrayList;
-import java.util.Collection;
-
-
-/**
- * A coding convention for AMP.
- */
-public final class AmpCodingConvention extends CodingConventions.Proxy {
-
-  /** By default, decorate the ClosureCodingConvention. */
-  public AmpCodingConvention() {
-    this(new ClosureCodingConvention());
-  }
-
-  /** Decorates a wrapped CodingConvention. */
-  public AmpCodingConvention(CodingConvention convention) {
-    super(convention);
-  }
-
-  /**
-   * {@inheritDoc}
-   * Because AMP objects can travel between compilation units, we consider
-   * non-private methods exported.
-   * Should we decide to do full-program compilation (for version bound JS
-   * delivery), this could go away there.
-   */
-  @Override public boolean isExported(String name, boolean local) {
-    if (local) {
-      return false;
-    }
-    // This is a special case, of compiler generated super globals.
-    // Because we otherwise use ES6 modules throughout, we don't
-    // have any other similar variables.
-    if (name.startsWith("JSCompiler_")) {
-      return false;
-    }
-    // ES6 generated module names are not exported.
-    if (name.contains("$")) {
-      return false;
-    }
-    // Starting with _ explicitly exports a name.
-    if (name.startsWith("_")) {
-      return true;
-    }
-    return !name.endsWith("_") && !name.endsWith("ForTesting");
-  }
-
-  /**
-   * {@inheritDoc}
-   * We cannot rename properties we treat as exported, because they may travel
-   * between compilation unit.
-   */
-  @Override public boolean blockRenamingForProperty(String name) {
-    return isExported(name, false);
-  }
-}
diff --git a/build-system/runner/src/org/ampproject/AmpCommandLineRunner.java b/build-system/runner/src/org/ampproject/AmpCommandLineRunner.java
deleted file mode 100644
index 613190d3322ef..0000000000000
--- a/build-system/runner/src/org/ampproject/AmpCommandLineRunner.java
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-package org.ampproject;
-
-import com.google.common.collect.ImmutableSet;
-import com.google.javascript.jscomp.CommandLineRunner;
-import com.google.javascript.jscomp.CompilerOptions;
-import com.google.javascript.jscomp.FlagUsageException;
-import com.google.javascript.jscomp.PropertyRenamingPolicy;
-import com.google.javascript.jscomp.VariableRenamingPolicy;
-
-import java.io.IOException;
-
-
-/**
- * Sets custom closure compiler flags that cannot be set via the command line.
- */
-public class AmpCommandLineRunner extends CommandLineRunner {
-
-  /**
-   * Identifies if the runner only needs to do type checking.
-   */
-  private boolean typecheck_only = false;
-
-  private boolean pseudo_names = false;
-
-  protected AmpCommandLineRunner(String[] args) {
-    super(args);
-  }
-
-  @Override protected CompilerOptions createOptions() {
-    if (typecheck_only) {
-      return createTypeCheckingOptions();
-    }
-    CompilerOptions options = super.createOptions();
-    options.setCollapsePropertiesLevel(CompilerOptions.PropertyCollapseLevel.ALL);
-    options.setDevirtualizeMethods(true);
-    options.setExtractPrototypeMemberDeclarations(true);
-    options.setSmartNameRemoval(true);
-    options.optimizeCalls = true;
-    // Have to turn this off because we cannot know whether sub classes
-    // might override a method. In the future this might be doable
-    // with using a more complete extern file instead.
-    options.setRemoveUnusedPrototypeProperties(false);
-    options.setComputeFunctionSideEffects(false);
-    // Property renaming. Relies on AmpCodingConvention to be safe.
-    options.setRenamingPolicy(VariableRenamingPolicy.ALL,
-        PropertyRenamingPolicy.ALL_UNQUOTED);
-    options.setGeneratePseudoNames(pseudo_names);
-    return options;
-  }
-
-  @Override protected void setRunOptions(CompilerOptions options)
-      throws IOException, FlagUsageException {
-    super.setRunOptions(options);
-    options.setCodingConvention(new AmpCodingConvention());
-  }
-
-  /**
-   * Create the most basic CompilerOptions instance with type checking turned on.
-   */
-  protected CompilerOptions createTypeCheckingOptions() {
-    CompilerOptions options = super.createOptions();
-    options.setCheckTypes(true);
-    options.setInferTypes(true);
-    return options;
-  }
-
-  public static void main(String[] args) {
-    AmpCommandLineRunner runner = new AmpCommandLineRunner(args);
-
-    for (String arg : args) {
-      if (arg.contains("TYPECHECK_ONLY=true")) {
-        runner.typecheck_only = true;
-      } else if (arg.contains("PSEUDO_NAMES=true")) {
-        runner.pseudo_names = true;
-      }
-    }
-
-    if (runner.shouldRunCompiler()) {
-      runner.run();
-    }
-    if (runner.hasErrors()) {
-      System.exit(-1);
-    }
-  }
-}
diff --git a/build-system/sauce_connect/OWNERS b/build-system/sauce_connect/OWNERS
deleted file mode 100644
index 2dba3e48ce020..0000000000000
--- a/build-system/sauce_connect/OWNERS
+++ /dev/null
@@ -1,14 +0,0 @@
-// For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
-
-{
-  rules: [
-    {
-      owners: [
-        {name: 'ampproject/wg-infra'},
-        {name: 'rsimha', notify: true},
-        {name: 'danielrozenberg', notify: true},
-      ],
-    },
-  ],
-}
diff --git a/build-system/sauce_connect/start_sauce_connect.sh b/build-system/sauce_connect/start_sauce_connect.sh
deleted file mode 100755
index 5520f4c7dc79b..0000000000000
--- a/build-system/sauce_connect/start_sauce_connect.sh
+++ /dev/null
@@ -1,152 +0,0 @@
-#!/bin/bash
-#
-# Copyright 2018 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.
-#
-# This script starts the sauce connect proxy, and waits for a successful
-# connection. Works on Linux and Mac OS.
-
-CYAN() { echo -e "\033[0;36m$1\033[0m"; }
-YELLOW() { echo -e "\033[1;33m$1\033[0m"; }
-GREEN() { echo -e "\033[0;32m$1\033[0m"; }
-RED() { echo -e "\033[0;31m$1\033[0m"; }
-
-SC_VERSION="sc-4.5.1"
-AUTHENTICATED_STATUS_URL="https://$SAUCE_USERNAME:$SAUCE_ACCESS_KEY@saucelabs.com/rest/v1/info/status"
-STATUS_URL="https://saucelabs.com/rest/v1/info/status"
-DOWNLOAD_DIR="sauce_connect"
-PID_FILE="sauce_connect_pid"
-LOG_FILE="sauce_connect_log"
-OUTPUT_FILE="sauce_connect_output"
-READY_FILE="sauce_connect_ready"
-READY_DELAY_SECS=120
-LOG_PREFIX=$(YELLOW "start_sauce_connect.sh")
-
-if [[ -z "$SAUCE_USERNAME" || -z "$SAUCE_ACCESS_KEY" ]]; then
-  echo "$LOG_PREFIX The $(CYAN "SAUCE_USERNAME") and $(CYAN "SAUCE_ACCESS_KEY") environment variables must be set."
-  exit 1
-fi
-
-if [[ "$OSTYPE" == "linux-gnu" ]]; then
-  DOWNLOAD_URL="https://saucelabs.com/downloads/$SC_VERSION-linux.tar.gz"
-  ARCHIVE_FILE="$DOWNLOAD_DIR/$SC_VERSION-linux.tar.gz"
-  BINARY_FILE="$SC_VERSION-linux/bin/sc"
-elif [[ "$OSTYPE" == "darwin"* ]]; then
-  DOWNLOAD_URL="https://saucelabs.com/downloads/$SC_VERSION-osx.zip"
-  ARCHIVE_FILE="$DOWNLOAD_DIR/$SC_VERSION-osx.zip"
-  BINARY_FILE="$SC_VERSION-osx/bin/sc"
-else
-  echo "$LOG_PREFIX Sauce Connect Proxy launcher script does not support the $(CYAN "$OSTYPE") platform."
-  exit 1
-fi
-
-# Start a timer to track how long setup took
-START_TIME=$( date +%s )
-echo "$LOG_PREFIX Starting $(CYAN "start_sauce_connect.sh")..."
-
-# Check the status of the Sauce Labs service
-echo "$LOG_PREFIX Fetching current Sauce Labs service status from $(CYAN "$STATUS_URL")..."
-SAUCE_STATUS="$(curl -s "$AUTHENTICATED_STATUS_URL")"
-SERVICE_OPERATIONAL="$(echo "$SAUCE_STATUS" | jq '.service_operational')"
-STATUS_MESSAGE="$(echo "$SAUCE_STATUS" | jq '.status_message')"
-ERROR_MESSAGE="$(echo "$SAUCE_STATUS" | jq '.message')"
-if [[ "$STATUS_MESSAGE" = "null" ]]; then
-  echo "$LOG_PREFIX $(RED "ERROR:") Could not fetch Sauce Labs Service status. Message: $(CYAN "$ERROR_MESSAGE")"
-  echo "$LOG_PREFIX Attempting to connect anyway..."
-else
-  if [[ $SERVICE_OPERATIONAL = "true" ]]; then
-    echo "$LOG_PREFIX $(GREEN "SUCCESS:") Sauce Labs is operational. Status: $(CYAN "$STATUS_MESSAGE")"
-  else
-    echo "$LOG_PREFIX $(RED "ERROR:") Sauce Labs does not appear to be operational. Status: $(CYAN "$STATUS_MESSAGE")"
-    echo "$LOG_PREFIX Attempting to connect anyway..."
-  fi
-fi
-
-# Download the sauce connect proxy binary (if needed) and unpack it.
-if [[ -f $ARCHIVE_FILE ]]; then
-  echo "$LOG_PREFIX Using cached Sauce Connect binary $(CYAN "$ARCHIVE_FILE")"
-else
-  echo "$LOG_PREFIX Downloading $(CYAN "$DOWNLOAD_URL")"
-  if [[ "$OSTYPE" == "linux-gnu" ]]; then
-    wget -q "$DOWNLOAD_URL" -P "$DOWNLOAD_DIR"
-  elif [[ "$OSTYPE" == "darwin"* ]]; then
-    curl -s --create-dirs -o "$ARCHIVE_FILE" -O "$DOWNLOAD_URL"
-  fi
-fi
-echo "$LOG_PREFIX Unpacking $(CYAN "$ARCHIVE_FILE")"
-if [[ "$OSTYPE" == "linux-gnu" ]]; then
-  tar -xzf "$ARCHIVE_FILE"
-elif [[ "$OSTYPE" == "darwin"* ]]; then
-  unzip -qu "$ARCHIVE_FILE"
-fi
-
-# Clean up old files, if any.
-if [[ -f "$LOG_FILE" ]]; then
-  echo "$LOG_PREFIX Deleting old log file $(CYAN "$LOG_FILE")"
-  rm "$LOG_FILE"
-fi
-if [[ -f $PID_FILE ]]; then
-  echo "$LOG_PREFIX Deleting old pid file $(CYAN "$PID_FILE")"
-  rm "$PID_FILE"
-fi
-if [[ -f "$OUTPUT_FILE" ]]; then
-  echo "$LOG_PREFIX Deleting old output file $(CYAN "$OUTPUT_FILE")"
-  rm "$OUTPUT_FILE"
-fi
-
-# Establish the tunnel identifier (job number on Travis / username during local dev).
-if [[ -z "$TRAVIS_JOB_NUMBER" ]]; then
-  TUNNEL_IDENTIFIER="$(git log -1 --pretty=format:"%ae")"
-else
-  TUNNEL_IDENTIFIER="$TRAVIS_JOB_NUMBER"
-fi
-
-
-# Launch proxy and wait for a tunnel to be created.
-echo "$LOG_PREFIX Launching $(CYAN "$BINARY_FILE")..."
-"$BINARY_FILE" --verbose --tunnel-identifier "$TUNNEL_IDENTIFIER" --readyfile "$READY_FILE" --pidfile "$PID_FILE" --logfile "$LOG_FILE" 1>"$OUTPUT_FILE" 2>&1 &
-count=0
-while [ $count -lt $READY_DELAY_SECS ]
-do
-  if [ -e "$READY_FILE" ]
-  then
-    # Print confirmation.
-    PID="$(cat "$PID_FILE")"
-    if [[ "$OSTYPE" == "linux-gnu" ]]; then
-      TUNNEL_ID="$(grep -oP "Tunnel ID: \K.*$" "$OUTPUT_FILE")"
-    elif [[ "$OSTYPE" == "darwin"* ]]; then
-      TUNNEL_ID="$(grep -o "Tunnel ID: .*$" "$OUTPUT_FILE" | cut -d' ' -f3)"
-    fi
-    echo "$LOG_PREFIX Sauce Connect Proxy with tunnel ID $(CYAN "$TUNNEL_ID") and identifier $(CYAN "$TUNNEL_IDENTIFIER") is now running as pid $(CYAN "$PID")"
-    END_TIME=$( date +%s )
-    TOTAL_TIME=$(( END_TIME - START_TIME ))
-    echo "$LOG_PREFIX Done running $(CYAN "start_sauce_connect.sh") Total time: $(CYAN "$TOTAL_TIME"s)"
-    echo "$LOG_PREFIX To stop the proxy, run $(CYAN "stop_sauce_connect.sh") from the same directory"
-    break
-  else
-    # Continue waiting.
-    sleep 1
-    (( count++ ))
-    if [ $count -eq $READY_DELAY_SECS ]
-    then
-      # Print the error logs.
-      echo "$LOG_PREFIX Sauce Connect Proxy has not started after $(CYAN "$READY_DELAY_SECS") seconds."
-      echo "$LOG_PREFIX Console output:"
-      cat "$OUTPUT_FILE"
-      echo "$LOG_PREFIX Log file contents:"
-      cat "$LOG_FILE"
-      exit 1
-    fi
-  fi
-done
diff --git a/build-system/sauce_connect/stop_sauce_connect.sh b/build-system/sauce_connect/stop_sauce_connect.sh
deleted file mode 100755
index 345894b55fc0a..0000000000000
--- a/build-system/sauce_connect/stop_sauce_connect.sh
+++ /dev/null
@@ -1,48 +0,0 @@
-#!/bin/bash
-#
-# Copyright 2018 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.
-#
-# This script stops the sauce connect proxy, and waits for a clean exit.
-
-CYAN() { echo -e "\033[0;36m$1\033[0m"; }
-YELLOW() { echo -e "\033[1;33m$1\033[0m"; }
-
-PID_FILE="sauce_connect_pid"
-LOG_FILE="sauce_connect_log"
-LOG_PREFIX=$(YELLOW "stop_sauce_connect.sh")
-
-# Early exit if there's no proxy running.
-if [[ ! -f "$PID_FILE" ]]; then
-  echo "$LOG_PREFIX Sauce Connect Proxy is not running"
-  exit 0
-fi
-
-# Stop the sauce connect proxy.
-PID="$(cat "$PID_FILE")"
-echo "$LOG_PREFIX Stopping Sauce Connect Proxy pid $(CYAN "$PID")"
-kill "$PID"
-
-# Clean up files.
-if [[ -f "$LOG_FILE" ]]; then
-  echo "$LOG_PREFIX Cleaning up log file $(CYAN "$LOG_FILE")"
-  rm "$LOG_FILE"
-fi
-if [[ -f "$PID_FILE" ]]; then
-  echo "$LOG_PREFIX Cleaning up pid file $(CYAN "$PID_FILE")"
-  rm "$PID_FILE"
-fi
-
-# Done.
-echo "$LOG_PREFIX Successfully stopped Sauce Connect Proxy"
diff --git a/build-system/server/OWNERS b/build-system/server/OWNERS
index 7aeff9752cc98..1cebb95e96e93 100644
--- a/build-system/server/OWNERS
+++ b/build-system/server/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/build-system/server/amp-cors.js b/build-system/server/amp-cors.js
index f731c300802c6..e66ca850fbd82 100644
--- a/build-system/server/amp-cors.js
+++ b/build-system/server/amp-cors.js
@@ -24,6 +24,12 @@ const ORIGIN_REGEX = new RegExp(
   '^https?://localhost:8000|^https?://.+\\.localhost:8000'
 );
 
+/**
+ * @param {*} req require('express').Request
+ * @param {*} res require('express').Response
+ * @param {['POST'|'GET']} opt_validMethods
+ * @param {string[]=} opt_exposeHeaders
+ */
 function assertCors(req, res, opt_validMethods, opt_exposeHeaders) {
   // Allow disable CORS check (iframe fixtures have origin 'about:srcdoc').
   if (req.query.cors == '0') {
@@ -60,6 +66,12 @@ function assertCors(req, res, opt_validMethods, opt_exposeHeaders) {
   enableCors(req, res, origin, opt_exposeHeaders);
 }
 
+/**
+ * @param {*} req require('express').Request
+ * @param {*} res require('express').Response
+ * @param {string=} origin
+ * @param {string[]=} opt_exposeHeaders
+ */
 function enableCors(req, res, origin, opt_exposeHeaders) {
   res.setHeader('Access-Control-Allow-Credentials', 'true');
 
@@ -76,6 +88,10 @@ function enableCors(req, res, origin, opt_exposeHeaders) {
   );
 }
 
+/**
+ * @param {*} req require('express').Request
+ * @return {string}
+ */
 function getUrlPrefix(req) {
   return req.protocol + '://' + req.headers.host;
 }
diff --git a/build-system/server/amp4test.js b/build-system/server/amp4test.js
index 0709f20a7715a..be31d7d435ba8 100644
--- a/build-system/server/amp4test.js
+++ b/build-system/server/amp4test.js
@@ -21,10 +21,9 @@ const minimist = require('minimist');
 const argv = minimist(process.argv.slice(2));
 const path = require('path');
 const upload = require('multer')();
+const {getServeMode, replaceUrls} = require('./app-utils');
 const {renderShadowViewer} = require('./shadow-viewer');
-const {replaceUrls, getServeMode} = require('./app-utils');
 
-const KARMA_SERVER_PORT = 9876;
 const CUSTOM_TEMPLATES = ['amp-mustache'];
 const SERVE_MODE = getServeMode();
 
@@ -95,7 +94,6 @@ app.use('/compose-shadow', function (req, res) {
   const {docUrl} = req.query;
   const viewerHtml = renderShadowViewer({
     src: docUrl.replace(/^\//, ''),
-    port: KARMA_SERVER_PORT,
     baseHref: path.dirname(req.url),
   });
   res.send(replaceUrls(SERVE_MODE, viewerHtml));
@@ -233,11 +231,11 @@ app.get('/a4a/:bid', (req, res) => {
 });
 
 /**
- * @param {{body: string, css: string|undefined, extensions: Array<string>|undefined, head: string|undefined, spec: string|undefined}} config
+ * @param {{body: string, css?: string|undefined, extensions: Array<string>|undefined, head?: string|undefined, spec?: string|undefined, mode?: string|undefined}} config
  * @return {string}
  */
 function composeDocument(config) {
-  const {body, css, extensions, head, spec, mode} = config;
+  const {body, css, extensions, head, mode, spec} = config;
 
   const m = mode || SERVE_MODE;
   const cdn = m === 'cdn';
diff --git a/build-system/server/app-index/OWNERS b/build-system/server/app-index/OWNERS
index e3778bb45e24d..cded1b6997e2b 100644
--- a/build-system/server/app-index/OWNERS
+++ b/build-system/server/app-index/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/build-system/server/app-index/amphtml-helpers.js b/build-system/server/app-index/amphtml-helpers.js
index 8d5acbd257eda..ae0b8e5663da2 100644
--- a/build-system/server/app-index/amphtml-helpers.js
+++ b/build-system/server/app-index/amphtml-helpers.js
@@ -32,7 +32,7 @@ const containsByRegex = (str, re) => str.search(re) > -1;
 // TODO(alanorozco): Expand
 const formTypes = ['input', 'select', 'form'];
 
-const ExtensionScript = ({name, version, isTemplate}) =>
+const ExtensionScript = ({isTemplate, name, version}) =>
   html`
     <script
       async
@@ -57,7 +57,17 @@ const containsExpr = (haystack, needle, onTrue, onFalse) =>
 
 const ampStateKey = (...keys) => keys.join('.');
 
-const AmpDoc = ({body, css, head, canonical}) => {
+/**
+ *
+ * @param {{
+ *  body: string,
+ *  canonical: string,
+ *  css?: string,
+ *  head?: string,
+ * }} param0
+ * @return {string}
+ */
+const AmpDoc = ({body, canonical, css, head}) => {
   assert(canonical);
   return html`
     <!DOCTYPE html>
@@ -95,6 +105,14 @@ const componentExtensionNameMapping = {
 const componentExtensionName = (tagName) =>
   componentExtensionNameMapping[tagName] || tagName;
 
+/**
+ *
+ * @param {string} docStr
+ * @param {{
+ *  'amp-mustache': {version: string}
+ * }=} extensionConf
+ * @return {string}
+ */
 const addRequiredExtensionsToHead = (
   docStr,
   extensionConf = {
@@ -110,11 +128,11 @@ const addRequiredExtensionsToHead = (
     addExtension(name, {isTemplate: true, ...defaultConf});
 
   Array.from(matchIterator(componentTagNameRegex, docStr))
-    .map(([unusedFullMatch, tagName]) => componentExtensionName(tagName))
+    .map(([, tagName]) => componentExtensionName(tagName))
     .forEach(addExtension);
 
   Array.from(matchIterator(templateTagTypeRegex, docStr))
-    .map(([unusedFullMatch, type]) => type)
+    .map(([, type]) => type)
     .forEach(addTemplate);
 
   // TODO(alanorozco): Too greedy. Parse "on" attributes instead.
diff --git a/build-system/server/app-index/api/api.js b/build-system/server/app-index/api/api.js
index e89f7e132eb98..93501b93b3646 100644
--- a/build-system/server/app-index/api/api.js
+++ b/build-system/server/app-index/api/api.js
@@ -19,13 +19,20 @@
 'use strict';
 
 const assert = require('assert');
-const Fuse = require('fuse.js');
+const fuse = require('fuse.js');
 const path = require('path');
 const {getListing} = require('../util/listing');
+/** @type {fuse.default} */
+const Fuse = /** @type {*} */ (fuse);
 
 // Sitting on /build-system/server/app-index/api, so we go back four times for the root.
 const root = path.join(__dirname, '../../../../');
 
+/**
+ * @param {string[]} fileSet
+ * @param {string} opt_searchQuery
+ * @return {Array<string>}
+ */
 function searchListing(fileSet, opt_searchQuery) {
   if (!opt_searchQuery) {
     return fileSet;
@@ -40,6 +47,11 @@ function searchListing(fileSet, opt_searchQuery) {
   return fuse.search(opt_searchQuery).map(({item}) => item);
 }
 
+/**
+ * @param {*} param0 require('express').Request
+ * @param {*} res require('express').Response
+ * @return {Promise<void>}
+ */
 async function handleListingRequest({query: {path, search}}, res) {
   try {
     assert(path);
@@ -55,6 +67,9 @@ async function handleListingRequest({query: {path, search}}, res) {
   }
 }
 
+/**
+ * @param {*} app require('express')
+ */
 function installExpressMiddleware(app) {
   app.get('/dashboard/api/listing', handleListingRequest);
 }
diff --git a/build-system/server/app-index/boilerplate.js b/build-system/server/app-index/boilerplate.js
index 337bfbe1e9d84..cfd1c6ab9a3a0 100644
--- a/build-system/server/app-index/boilerplate.js
+++ b/build-system/server/app-index/boilerplate.js
@@ -13,6 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable max-len */
 module.exports =
   '<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>';
diff --git a/build-system/server/app-index/file-list.js b/build-system/server/app-index/file-list.js
index 7889ab692d418..e215a7af71236 100644
--- a/build-system/server/app-index/file-list.js
+++ b/build-system/server/app-index/file-list.js
@@ -15,7 +15,6 @@
  */
 
 /* eslint-disable local/html-template */
-/* eslint-disable indent */
 
 const documentModes = require('./document-modes');
 const {AmpState, ampStateKey, containsExpr} = require('./amphtml-helpers');
@@ -73,14 +72,14 @@ const linksToExample = (shouldContainBasepath, opt_name) =>
   examplesPathRegex.test(shouldContainBasepath) &&
   htmlDocRegex.test(opt_name || shouldContainBasepath);
 
-const ExamplesSelectModeOptional = ({basepath, selectModePrefix}) =>
-  !examplesPathRegex.test(basepath + '/')
-    ? ''
-    : ExamplesDocumentModeSelect({
-        selectModePrefix,
-      });
+const ExamplesSelectModeOptional = ({basepath}) =>
+  !examplesPathRegex.test(basepath + '/') ? '' : ExamplesDocumentModeSelect();
 
-const FileListItem = ({name, href, boundHref}) =>
+/**
+ * @param {{ name: string, href: string, boundHref?: string|undefined }} config
+ * @return {string}
+ */
+const FileListItem = ({boundHref, href, name}) =>
   html`
     <div class="file-link-container" role="listitem">
       <a
@@ -93,7 +92,7 @@ const FileListItem = ({name, href, boundHref}) =>
     </div>
   `;
 
-const PlaceholderFileListItem = ({name, href, selectModePrefix}) =>
+const PlaceholderFileListItem = ({href, name, selectModePrefix}) =>
   linksToExample(href)
     ? FileListItem({
         name,
@@ -112,15 +111,13 @@ const maybePrefixExampleDocHref = (basepath, name, selectModePrefix) =>
 
 const FileListHeading = ({basepath, selectModePrefix}) => html`
   <div class="file-list-heading">
-    <h3 class="code" id="basepath">
-      ${basepath}
-    </h3>
+    <h3 class="code" id="basepath">${basepath}</h3>
     ${FileListSearchInput({basepath})}
     <div class="file-list-right-section">
       ${AmpState(selectModeStateId, {
         [selectModeStateKey]: selectModePrefix,
       })}
-      ${ExamplesSelectModeOptional({basepath, selectModePrefix})}
+      ${ExamplesSelectModeOptional({basepath})}
       <a href="/~" class="underlined">List root directory</a>
     </div>
   </div>
@@ -128,9 +125,7 @@ const FileListHeading = ({basepath, selectModePrefix}) => html`
 
 const wrapFileList = (rendered) => html`
   <div class="file-list-container">
-    <div class="wrap">
-      ${rendered}
-    </div>
+    <div class="wrap">${rendered}</div>
   </div>
 `;
 
diff --git a/build-system/server/app-index/form.js b/build-system/server/app-index/form.js
index b8bd5a625d7b9..4efc987a352e0 100644
--- a/build-system/server/app-index/form.js
+++ b/build-system/server/app-index/form.js
@@ -18,7 +18,7 @@
 
 const {html} = require('./html');
 
-const Option = ({value, name}) =>
+const Option = ({name, value}) =>
   html` <option value=${value}>${name}</option> `;
 
 const KeyValueOptions = (options) =>
diff --git a/build-system/server/app-index/header-links.js b/build-system/server/app-index/header-links.js
index e2956a9559eac..f7064cf15ef09 100644
--- a/build-system/server/app-index/header-links.js
+++ b/build-system/server/app-index/header-links.js
@@ -18,13 +18,13 @@ module.exports = [
   {
     'name': 'Developing',
     'href':
-      'https://' +
-      'github.com/ampproject/amphtml/blob/master/contributing/DEVELOPING.md',
+      'https://github.com/ampproject/amphtml/blob/main/docs/developing.md',
   },
   {
     'divider': true,
     'name': 'Contributing',
-    'href': 'https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md',
+    'href':
+      'https://github.com/ampproject/amphtml/blob/main/docs/contributing.md',
   },
   {
     'name': 'Github',
@@ -32,11 +32,12 @@ module.exports = [
   },
   {
     'name': 'Find File',
-    'href': 'https://github.com/ampproject/amphtml/find/master',
+    'href': 'https://github.com/ampproject/amphtml/find/main',
   },
   {
-    'name': 'Travis',
-    'href': 'https://travis-ci.org/ampproject/amphtml',
+    'name': 'CircleCI',
+    'href':
+      'https://app.circleci.com/pipelines/github/ampproject/amphtml?branch=main',
   },
   {
     'name': 'Percy',
diff --git a/build-system/server/app-index/html.js b/build-system/server/app-index/html.js
index 26488560a77d6..1cf6e743b1a3f 100644
--- a/build-system/server/app-index/html.js
+++ b/build-system/server/app-index/html.js
@@ -28,11 +28,11 @@ const joinFragments = (fragments, renderer = identity) =>
 
 /**
  * pass-through for syntax highlighting
- * @param {!Array<string>} strings
+ * @param {!Array<string>|TemplateStringsArray} strings
  * @param {...*} values
  * @return {string}
  */
 const html = (strings, ...values) =>
-  joinFragments(strings, (string, i) => string + (values[i] || ''));
+  joinFragments(Array.from(strings), (string, i) => string + (values[i] || ''));
 
 module.exports = {html, joinFragments};
diff --git a/build-system/server/app-index/index.js b/build-system/server/app-index/index.js
index 3a72101c05aa5..5f0dbc5c9c2ce 100644
--- a/build-system/server/app-index/index.js
+++ b/build-system/server/app-index/index.js
@@ -20,9 +20,9 @@ const basepathMappings = require('./basepath-mappings');
 const fs = require('fs');
 const path = require('path');
 const {
+  formatBasepath,
   getListing,
   isMainPageFromUrl,
-  formatBasepath,
 } = require('./util/listing');
 const {getServeMode} = require('../app-utils');
 const {join} = require('path');
@@ -34,6 +34,12 @@ const root = path.join(__dirname, '../../../');
 // CSS
 const mainCssFile = join(__dirname, '/main.css');
 
+/**
+ * @param {*} param0 require(express).Request
+ * @param {*} res require(express).Response
+ * @param {*=} next require(express).NextFunction
+ * @return {Promise<string|undefined>}
+ */
 async function serveIndex({url}, res, next) {
   const mappedPath = basepathMappings[url] || url;
   const fileSet = await getListing(root, mappedPath);
@@ -58,6 +64,9 @@ async function serveIndex({url}, res, next) {
   return renderedHtml; // for testing
 }
 
+/**
+ * @param {*} app require('express')
+ */
 function installExpressMiddleware(app) {
   api.installExpressMiddleware(app);
 
diff --git a/build-system/server/app-index/proxy-form.js b/build-system/server/app-index/proxy-form.js
index fd58ae085265f..54ef375deea1a 100644
--- a/build-system/server/app-index/proxy-form.js
+++ b/build-system/server/app-index/proxy-form.js
@@ -41,7 +41,7 @@ module.exports = () => html`
       <div class="form-info">
         <span>Takes canonical, AMPHTML and Google viewer URLs.</span>
         <a
-          href="https://github.com/ampproject/amphtml/blob/master/contributing/TESTING.md#document-proxy"
+          href="https://github.com/ampproject/amphtml/blob/main/docs/testing.md#document-proxy"
           target="_blank"
         >
           What's this?
diff --git a/build-system/server/app-index/regex.js b/build-system/server/app-index/regex.js
index f4f202d75ea38..913d08b02c745 100644
--- a/build-system/server/app-index/regex.js
+++ b/build-system/server/app-index/regex.js
@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
+/**
+ *
+ * @param {RegExp} regex
+ * @param {string} subject
+ */
 function* matchIterator(regex, subject) {
   let match = regex.exec(subject);
   while (match != null) {
diff --git a/build-system/server/app-index/settings.js b/build-system/server/app-index/settings.js
index e697113b47212..b379321776f79 100644
--- a/build-system/server/app-index/settings.js
+++ b/build-system/server/app-index/settings.js
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable indent */
 /* eslint-disable local/html-template */
 const {html, joinFragments} = require('./html');
 
@@ -27,7 +26,7 @@ const serveModes = [
   {
     value: 'compiled',
     description: `Minified AMP JavaScript is served from the local server. This
-      is only available after running \`gulp dist --fortesting \`.`,
+      is only available after running \`amp dist --fortesting \`.`,
   },
   {
     value: 'cdn',
@@ -35,7 +34,7 @@ const serveModes = [
   },
 ];
 
-const SelectorBlock = ({id, value, selected, children}) => html`
+const SelectorBlock = ({children, id, selected, value}) => html`
   <div
     class="selector-block"
     ${selected ? ' selected' : ''}
@@ -59,7 +58,7 @@ const ServeModeSelector = ({serveMode}) => html`
       on="select:serve-mode-form.submit"
       name="mode"
     >
-      ${joinFragments(serveModes, ({value, description}) =>
+      ${joinFragments(serveModes, ({description, value}) =>
         SelectorBlock({
           id: `serve_mode_${value}`,
           value,
diff --git a/build-system/server/app-index/template.js b/build-system/server/app-index/template.js
index ebc36f6fb2692..5525ea2e3678e 100644
--- a/build-system/server/app-index/template.js
+++ b/build-system/server/app-index/template.js
@@ -15,7 +15,6 @@
  */
 
 /* eslint-disable local/html-template */
-/* eslint-disable indent */
 
 'use strict';
 
@@ -26,11 +25,9 @@ const {FileList} = require('./file-list');
 const {html, joinFragments} = require('./html');
 const {SettingsModal, SettingsOpenButton} = require('./settings');
 
-const HeaderLink = ({name, href, divider}) => html`
+const HeaderLink = ({divider, href, name}) => html`
   <li class="${divider ? 'divider' : ''}">
-    <a target="_blank" rel="noopener noreferrer" href="${href}">
-      ${name}
-    </a>
+    <a target="_blank" rel="noopener noreferrer" href="${href}"> ${name} </a>
   </li>
 `;
 
@@ -41,7 +38,7 @@ const Header = ({isMainPage, links}) => html`
       ${!isMainPage ? HeaderBackToMainLink() : ''}
     </div>
     <ul class="right-nav">
-      ${joinFragments(links, ({name, href, divider}, i) =>
+      ${joinFragments(links, ({divider, href, name}, i) =>
         HeaderLink({
           divider: divider || i == links.length - 1,
           name,
@@ -57,15 +54,26 @@ const HeaderBackToMainLink = () => html` <a href="/">← Back to main</a> `;
 
 const ProxyFormOptional = ({isMainPage}) => (isMainPage ? ProxyForm() : '');
 
-function renderTemplate(opt_params) {
-  const {basepath, css, isMainPage, fileSet, serveMode, selectModePrefix} = {
-    basepath: '/',
-    isMainPage: false,
-    fileSet: [],
-    serveMode: 'default',
-    selectModePrefix: '/',
-    ...(opt_params || {}),
-  };
+/**
+ * @param {{
+ *  basepath?: string,
+ *  css?: string
+ *  isMainPage?: boolean,
+ *  fileSet?: Array,
+ *  serveMode?: string,
+ *  selectModePrefix?: string,
+ * }=} opt_params
+ * @return {string}
+ */
+function renderTemplate(opt_params = {}) {
+  const {
+    basepath = '/',
+    css,
+    isMainPage = false,
+    fileSet = [],
+    serveMode = 'default',
+    selectModePrefix = '/',
+  } = opt_params;
 
   const body = joinFragments([
     html`
diff --git a/build-system/server/app-index/test/helpers.js b/build-system/server/app-index/test/helpers.js
index 053593188dbe1..6a5d56b7f4fc4 100644
--- a/build-system/server/app-index/test/helpers.js
+++ b/build-system/server/app-index/test/helpers.js
@@ -17,18 +17,15 @@
 const {expect} = require('chai');
 const {JSDOM} = require('jsdom');
 
-
-const parseHtmlChunk = htmlStr => {
-  const {body} = (new JSDOM(htmlStr)).window.document;
+const parseHtmlChunk = (htmlStr) => {
+  const {body} = new JSDOM(htmlStr).window.document;
   expect(body.children).to.have.length(1);
   return body.firstElementChild;
 };
 
-
-const boundAttrRe = attr =>
+const boundAttrRe = (attr) =>
   new RegExp(`\\[${attr}\\]=(("[^"]+")|('[^']+')|([^\\s\\>]+))`);
 
-
 // JSDom doesn't parse attributes whose names don't follow the spec, so
 // our only way to test [attr] values is via regex.
 const getBoundAttr = ({outerHTML}, attr) => {
@@ -36,14 +33,12 @@ const getBoundAttr = ({outerHTML}, attr) => {
   if (!match) {
     return;
   }
-  const [_, valuePart] = match;
-  if (valuePart.charAt(0) == '"' ||
-      valuePart.charAt(0) == '\'') {
+  const [, valuePart] = match;
+  if (valuePart.charAt(0) == '"' || valuePart.charAt(0) == "'") {
     return valuePart.substring(1, valuePart.length - 1);
   }
   return valuePart;
-}
-
+};
 
 const expectValidAmphtml = (validator, string) => {
   const {errors: errorsAndWarnings, status} = validator.validateString(string);
@@ -55,7 +50,6 @@ const expectValidAmphtml = (validator, string) => {
   expect(status).to.equal('PASS');
 };
 
-
 module.exports = {
   expectValidAmphtml,
   getBoundAttr,
diff --git a/build-system/server/app-index/test/test-amphtml-helpers.js b/build-system/server/app-index/test/test-amphtml-helpers.js
index e583f8d7824a4..3e568aa914406 100644
--- a/build-system/server/app-index/test/test-amphtml-helpers.js
+++ b/build-system/server/app-index/test/test-amphtml-helpers.js
@@ -16,47 +16,47 @@
 
 const amphtmlValidator = require('amphtml-validator');
 
-const {expect} = require('chai');
 const {expectValidAmphtml, parseHtmlChunk} = require('./helpers');
+const {expect} = require('chai');
 const {html} = require('../html');
 const {JSDOM} = require('jsdom');
 
 const {
-  addRequiredExtensionsToHead,
   AmpDoc,
   AmpState,
+  addRequiredExtensionsToHead,
   ampStateKey,
   containsExpr,
   ternaryExpr,
 } = require('../amphtml-helpers');
 
-
 describe('devdash', () => {
-
   describe('AMPHTML helpers', () => {
-
     describe('AmpDoc', () => {
-
       it('fails without args', () => {
-        expect(() => AmpDoc()).to.throw;
+        expect(() => AmpDoc()).to.throw();
       });
 
       it('fails without min required fields', () => {
-        expect(() => AmpDoc({})).to.throw;
+        expect(() => AmpDoc({})).to.throw();
       });
 
-      it('creates valid doc with min required fields', async() => {
-        expectValidAmphtml(await amphtmlValidator.getInstance(), AmpDoc({
-          canonical: '/',
-        }));
-      })
-
-      it('creates valid doc with set fields', async() => {
-        expectValidAmphtml(await amphtmlValidator.getInstance(), AmpDoc({
-          canonical: '/',
-          css: 'body { font-family:sans-serif; } ',
-          head: html`
-            <script type="application/ld+json">
+      it('creates valid doc with min required fields', async () => {
+        expectValidAmphtml(
+          await amphtmlValidator.getInstance(),
+          AmpDoc({
+            canonical: '/',
+          })
+        );
+      }).timeout(5000);
+
+      it('creates valid doc with set fields', async () => {
+        expectValidAmphtml(
+          await amphtmlValidator.getInstance(),
+          AmpDoc({
+            canonical: '/',
+            css: 'body { font-family:sans-serif; } ',
+            head: html` <script type="application/ld+json">
               {
                 "@context": "http://schema.org",
                 "@type": "NewsArticle",
@@ -87,18 +87,19 @@ describe('devdash', () => {
                 }
               }
             </script>`,
-          body: html`<div>Hola</div>`,
-        }));
-      });
+            body: html`<div>Hola</div>`,
+          })
+        );
+      }).timeout(5000);
     });
 
     describe('ampStateKey', () => {
       it('concats arguments', () => {
         expect(ampStateKey('foo', 'bar')).to.equal('foo.bar');
-        expect(ampStateKey('tacos', 'al', 'pastor'))
-            .to.equal('tacos.al.pastor');
+        expect(ampStateKey('tacos', 'al', 'pastor')).to.equal(
+          'tacos.al.pastor'
+        );
       });
-
     });
 
     describe('ternaryExpr', () => {
@@ -109,13 +110,15 @@ describe('devdash', () => {
 
     describe('containsExpr', () => {
       it('creates expression with literals', () => {
-        expect(containsExpr('\'a\'', '\'b\'', '\'c\'', '\'d\''))
-            .to.equal('\'a\'.indexOf(\'b\') > -1 ? \'c\' : \'d\'');
+        expect(containsExpr("'a'", "'b'", "'c'", "'d'")).to.equal(
+          "'a'.indexOf('b') > -1 ? 'c' : 'd'"
+        );
       });
 
       it('creates expression with vars', () => {
-        expect(containsExpr('a', 'b', 'c', 'd'))
-            .to.equal('a.indexOf(b) > -1 ? c : d');
+        expect(containsExpr('a', 'b', 'c', 'd')).to.equal(
+          'a.indexOf(b) > -1 ? c : d'
+        );
       });
     });
 
@@ -132,16 +135,18 @@ describe('devdash', () => {
 
         const {firstElementChild} = root;
         expect(firstElementChild.tagName).to.equal('SCRIPT');
-        expect(firstElementChild.getAttribute('type'))
-            .to.equal('application/json');
+        expect(firstElementChild.getAttribute('type')).to.equal(
+          'application/json'
+        );
       });
 
       it('renders json object', () => {
         const id = 'whatever';
         const state = {foo: 'bar', baz: {yes: 'no'}};
 
-        const {textContent} =
-            parseHtmlChunk(AmpState(id, state)).firstElementChild;
+        const {textContent} = parseHtmlChunk(
+          AmpState(id, state)
+        ).firstElementChild;
 
         expect(JSON.parse(textContent)).to.deep.equal(state);
       });
@@ -150,8 +155,9 @@ describe('devdash', () => {
         const id = 'whatever';
         const state = 'foo';
 
-        const {textContent} =
-            parseHtmlChunk(AmpState(id, state)).firstElementChild;
+        const {textContent} = parseHtmlChunk(
+          AmpState(id, state)
+        ).firstElementChild;
 
         expect(JSON.parse(textContent)).to.equal(state);
       });
@@ -160,41 +166,44 @@ describe('devdash', () => {
         const id = 'whatever';
         const state = ['foo', 'bar', 'baz'];
 
-        const {textContent} =
-            parseHtmlChunk(AmpState(id, state)).firstElementChild;
+        const {textContent} = parseHtmlChunk(
+          AmpState(id, state)
+        ).firstElementChild;
 
         expect(JSON.parse(textContent)).to.deep.equal(state);
       });
     });
 
     describe('addRequiredExtensionsToHead', () => {
-
       function containsExtension(scripts, expectedExtension) {
-        return scripts.some(s =>
-          s.getAttribute('custom-element') == expectedExtension &&
-          s.getAttribute('custom-template') == null);
+        return scripts.some(
+          (s) =>
+            s.getAttribute('custom-element') == expectedExtension &&
+            s.getAttribute('custom-template') == null
+        );
       }
 
       function containsTemplate(scripts, expectedTemplate) {
-        return scripts.some(s =>
-          s.getAttribute('custom-template') == expectedTemplate &&
-          s.getAttribute('custom-extension') == null);
+        return scripts.some(
+          (s) =>
+            s.getAttribute('custom-template') == expectedTemplate &&
+            s.getAttribute('custom-extension') == null
+        );
       }
 
       it('renders ok', () => {
-        const rawStr = html`
-          <html>
-            <head></head>
-            <body>
-              <amp-foo foo="bar"></amp-foo>
-            </body>
-          </html>`;
+        // eslint-disable-next-line local/html-template
+        const rawStr = html` <html>
+          <head></head>
+          <body>
+            <amp-foo foo="bar"></amp-foo>
+          </body>
+        </html>`;
 
         expect(new JSDOM(addRequiredExtensionsToHead(rawStr))).to.be.ok;
       });
 
       it('adds mixed', () => {
-
         const expectedExtensions = [
           'amp-foo',
           'amp-bar',
@@ -205,97 +214,103 @@ describe('devdash', () => {
 
         const expectedTemplates = ['amp-mustache'];
 
-        const rawStr = html`
-          <html>
-            <head></head>
-            <body>
-              <amp-foo foo="bar"></amp-foo>
-              <amp-foo foo="bar"></amp-foo>
-              <amp-foo foo="bar"></amp-foo>
+        // eslint-disable-next-line local/html-template
+        const rawStr = html` <html>
+          <head></head>
+          <body>
+            <amp-foo foo="bar"></amp-foo>
+            <amp-foo foo="bar"></amp-foo>
+            <amp-foo foo="bar"></amp-foo>
+            <div>
+              <amp-bar></amp-bar>
               <div>
-                <amp-bar></amp-bar>
-                <div>
-                  <amp-foo-bar-baz many="1" attributes="2">
-                    Text content
-                  </amp-foo-bar-baz>
-                </div>
-                <input>
-                <amp-state id="myState"></amp-state>
-                <template type="amp-mustache"></template>
+                <amp-foo-bar-baz many="1" attributes="2">
+                  Text content
+                </amp-foo-bar-baz>
               </div>
-            </body>
-          </html>`;
+              <input />
+              <amp-state id="myState"></amp-state>
+              <template type="amp-mustache"></template>
+            </div>
+          </body>
+        </html>`;
 
-        const {document} =
-            (new JSDOM(addRequiredExtensionsToHead(rawStr))).window;
+        const {document} = new JSDOM(addRequiredExtensionsToHead(rawStr))
+          .window;
 
-        const scripts =
-            Array.from(document.head.getElementsByTagName('script'));
+        const scripts = Array.from(
+          document.head.getElementsByTagName('script')
+        );
 
         expect(scripts).to.have.length(
-            expectedExtensions.length + expectedTemplates.length);
+          expectedExtensions.length + expectedTemplates.length
+        );
 
-        scripts.forEach(script => {
+        scripts.forEach((script) => {
           expect(script.getAttribute('src')).to.be.ok;
           expect(script.getAttribute('async')).to.equal('');
         });
 
-        expectedExtensions.forEach(expectedScript => {
-          expect(scripts).to.satisfy(scripts =>
-            containsExtension(scripts, expectedScript))
+        expectedExtensions.forEach((expectedScript) => {
+          expect(scripts).to.satisfy((scripts) =>
+            containsExtension(scripts, expectedScript)
+          );
         });
 
-        expectedTemplates.forEach(expectedScript => {
-          expect(scripts).to.satisfy(scripts =>
-            containsTemplate(scripts, expectedScript))
+        expectedTemplates.forEach((expectedScript) => {
+          expect(scripts).to.satisfy((scripts) =>
+            containsTemplate(scripts, expectedScript)
+          );
         });
       });
 
       it('adds extensions', () => {
-
         const expected = ['amp-foo', 'amp-bar', 'amp-foo-bar-baz'];
 
-        const rawStr = html`
-          <html>
-            <head></head>
-            <body>
-              <amp-foo foo="bar"></amp-foo>
-              <amp-foo foo="bar"></amp-foo>
-              <amp-foo foo="bar"></amp-foo>
+        // eslint-disable-next-line local/html-template
+        const rawStr = html` <html>
+          <head></head>
+          <body>
+            <amp-foo foo="bar"></amp-foo>
+            <amp-foo foo="bar"></amp-foo>
+            <amp-foo foo="bar"></amp-foo>
+            <div>
+              <amp-bar></amp-bar>
               <div>
-                <amp-bar></amp-bar>
-                <div>
-                  <amp-foo-bar-baz many="1" attributes="2">
-                    Text content
-                  </amp-foo-bar-baz>
-                </div>
+                <amp-foo-bar-baz many="1" attributes="2">
+                  Text content
+                </amp-foo-bar-baz>
               </div>
-            </body>
-          </html>`;
+            </div>
+          </body>
+        </html>`;
 
-        const {document} =
-            (new JSDOM(addRequiredExtensionsToHead(rawStr))).window;
+        const {document} = new JSDOM(addRequiredExtensionsToHead(rawStr))
+          .window;
 
-        const scripts =
-            Array.from(document.head.getElementsByTagName('script'));
+        const scripts = Array.from(
+          document.head.getElementsByTagName('script')
+        );
 
         expect(scripts).to.have.length(expected.length);
 
-        scripts.forEach(script => {
-          expect(script.getAttribute('src')).to.be.ok
+        scripts.forEach((script) => {
+          expect(script.getAttribute('src')).to.be.ok;
           expect(script.getAttribute('async')).to.equal('');
           expect(script.getAttribute('custom-template')).to.be.null;
         });
 
-        expected.forEach(expectedScript => {
-          expect(scripts).to.satisfy(scripts =>
-            containsExtension(scripts, expectedScript));
+        expected.forEach((expectedScript) => {
+          expect(scripts).to.satisfy((scripts) =>
+            containsExtension(scripts, expectedScript)
+          );
         });
       });
 
       it('adds template', () => {
         const expected = 'amp-mustache';
 
+        // eslint-disable-next-line local/html-template
         const rawStr = html`
           <html>
             <head></head>
@@ -309,8 +324,8 @@ describe('devdash', () => {
             </body>
           </html>`;
 
-        const {document} =
-            (new JSDOM(addRequiredExtensionsToHead(rawStr))).window;
+        const {document} = new JSDOM(addRequiredExtensionsToHead(rawStr))
+          .window;
 
         const scripts = document.head.getElementsByTagName('script');
 
@@ -325,19 +340,18 @@ describe('devdash', () => {
       });
 
       it('adds <amp-form> per <form>', () => {
-
         const expected = 'amp-form';
 
-        const rawStr = html`
-          <html>
-            <head></head>
-            <body>
-              <form action="whatever.com"></form>
-            </body>
-          </html>`;
+        // eslint-disable-next-line local/html-template
+        const rawStr = html` <html>
+          <head></head>
+          <body>
+            <form action="whatever.com"></form>
+          </body>
+        </html>`;
 
-        const {document} =
-            (new JSDOM(addRequiredExtensionsToHead(rawStr))).window;
+        const {document} = new JSDOM(addRequiredExtensionsToHead(rawStr))
+          .window;
 
         const scripts = document.head.getElementsByTagName('script');
 
@@ -352,21 +366,20 @@ describe('devdash', () => {
       });
 
       it('adds <amp-form> per <input>', () => {
-
         const expected = 'amp-form';
 
-        const rawStr = html`
-          <html>
-            <head></head>
-            <body>
-              <input>
-              <input>
-              <input>
-            </body>
-          </html>`;
+        // eslint-disable-next-line local/html-template
+        const rawStr = html` <html>
+          <head></head>
+          <body>
+            <input />
+            <input />
+            <input />
+          </body>
+        </html>`;
 
-        const {document} =
-            (new JSDOM(addRequiredExtensionsToHead(rawStr))).window;
+        const {document} = new JSDOM(addRequiredExtensionsToHead(rawStr))
+          .window;
 
         const scripts = document.head.getElementsByTagName('script');
 
@@ -381,19 +394,18 @@ describe('devdash', () => {
       });
 
       it('adds <amp-form> per <select>', () => {
-
         const expected = 'amp-form';
 
-        const rawStr = html`
-          <html>
-            <head></head>
-            <body>
-              <select></select>
-            </body>
-          </html>`;
+        // eslint-disable-next-line local/html-template
+        const rawStr = html` <html>
+          <head></head>
+          <body>
+            <select></select>
+          </body>
+        </html>`;
 
-        const {document} =
-            (new JSDOM(addRequiredExtensionsToHead(rawStr))).window;
+        const {document} = new JSDOM(addRequiredExtensionsToHead(rawStr))
+          .window;
 
         const scripts = document.head.getElementsByTagName('script');
 
@@ -406,8 +418,6 @@ describe('devdash', () => {
         expect(script.getAttribute('async')).to.equal('');
         expect(script.getAttribute('custom-element')).to.equal(expected);
       });
-
     });
   });
-
 });
diff --git a/build-system/server/app-index/test/test-file-list.js b/build-system/server/app-index/test/test-file-list.js
index cebe113597821..b5c04fe6f3810 100644
--- a/build-system/server/app-index/test/test-file-list.js
+++ b/build-system/server/app-index/test/test-file-list.js
@@ -18,17 +18,16 @@ const {expect} = require('chai');
 const {FileList} = require('../file-list');
 const {getBoundAttr, parseHtmlChunk} = require('./helpers');
 
-
 describe('devdash', () => {
-
   describe('FileList', () => {
-
     it('wraps', () => {
-      const root = parseHtmlChunk(FileList({
-        basepath: 'basepath',
-        fileSet: [],
-        selectModePrefix: '/',
-      }));
+      const root = parseHtmlChunk(
+        FileList({
+          basepath: 'basepath',
+          fileSet: [],
+          selectModePrefix: '/',
+        })
+      );
 
       expect(root.className).to.equal('file-list-container');
 
@@ -38,11 +37,13 @@ describe('devdash', () => {
     });
 
     it('creates amp-list', () => {
-      const root = parseHtmlChunk(FileList({
-        basepath: 'basepath',
-        fileSet: [],
-        selectModePrefix: '/',
-      }));
+      const root = parseHtmlChunk(
+        FileList({
+          basepath: 'basepath',
+          fileSet: [],
+          selectModePrefix: '/',
+        })
+      );
 
       const {length} = root.getElementsByTagName('amp-list');
       expect(length).to.equal(1);
@@ -51,11 +52,13 @@ describe('devdash', () => {
     it('creates placeholder inside amp-list with rendered data', () => {
       const fileSet = ['foo.bar', 'tacos.al.pastor'];
 
-      const root = parseHtmlChunk(FileList({
-        fileSet,
-        basepath: 'basepath',
-        selectModePrefix: '/',
-      }));
+      const root = parseHtmlChunk(
+        FileList({
+          fileSet,
+          basepath: 'basepath',
+          selectModePrefix: '/',
+        })
+      );
 
       const els = root.querySelectorAll('amp-list > [placeholder]');
 
@@ -75,11 +78,13 @@ describe('devdash', () => {
       const fileSet = ['asada.html', 'adobada.html', 'pastor.html'];
       const basepath = '/examples/';
 
-      const root = parseHtmlChunk(FileList({
-        fileSet,
-        basepath,
-        selectModePrefix: '/',
-      }));
+      const root = parseHtmlChunk(
+        FileList({
+          fileSet,
+          basepath,
+          selectModePrefix: '/',
+        })
+      );
 
       const els = root.querySelectorAll('amp-list [role=listitem] > a[href]');
 
@@ -95,11 +100,13 @@ describe('devdash', () => {
       const fileSet = ['asada.html', 'adobada.html', 'pastor.html'];
       const basepath = '/potato/';
 
-      const root = parseHtmlChunk(FileList({
-        fileSet,
-        basepath,
-        selectModePrefix: '/',
-      }));
+      const root = parseHtmlChunk(
+        FileList({
+          fileSet,
+          basepath,
+          selectModePrefix: '/',
+        })
+      );
 
       const els = root.querySelectorAll('amp-list [role=listitem] > a[href]');
 
@@ -116,11 +123,13 @@ describe('devdash', () => {
       const notBound = ['chabbuddy.g', 'dj.beats', 'mc.grindah'];
       const basepath = '/examples/';
 
-      const root = parseHtmlChunk(FileList({
-        fileSet: [...bound, ...notBound],
-        basepath,
-        selectModePrefix: '/',
-      }));
+      const root = parseHtmlChunk(
+        FileList({
+          fileSet: [...bound, ...notBound],
+          basepath,
+          selectModePrefix: '/',
+        })
+      );
 
       const els = root.querySelectorAll('amp-list [role=listitem] > a[href]');
 
@@ -138,7 +147,5 @@ describe('devdash', () => {
         expect(el.getAttribute('href')).to.equal(basepath + expectedHref);
       });
     });
-
   });
-
 });
diff --git a/build-system/server/app-index/test/test-html.js b/build-system/server/app-index/test/test-html.js
index 7ab9f443dab82..fa1a3d671055b 100644
--- a/build-system/server/app-index/test/test-html.js
+++ b/build-system/server/app-index/test/test-html.js
@@ -17,19 +17,15 @@
 const {expect} = require('chai');
 const {html, joinFragments} = require('../html');
 
-
 describe('devdash', () => {
   describe('html helpers', () => {
     describe('joinFragments', () => {
-
       it('joins simple fragments', () => {
         expect(joinFragments(['a', 'b', 'c'])).to.equal('abc');
       });
-
       it('joins mapped fragments', () => {
-        expect(joinFragments([1, 2, 3], a => a + 1)).to.equal('234');
+        expect(joinFragments([1, 2, 3], (a) => a + 1)).to.equal('234');
       });
-
     });
 
     describe('html', () => {
@@ -38,8 +34,9 @@ describe('devdash', () => {
       });
 
       it('concatenates interpolated args', () => {
-        expect(html`quesadilla ${'de'} chicharrón ${'con'} queso`)
-            .to.equal('quesadilla de chicharrón con queso');
+        // eslint-disable-next-line local/html-template
+        const interpolated = html`quesadilla ${'de'} chicharrón ${'con'} queso`;
+        expect(interpolated).to.equal('quesadilla de chicharrón con queso');
       });
     });
   });
diff --git a/build-system/server/app-index/test/test-self.js b/build-system/server/app-index/test/test-self.js
index 47c4241fe4cb8..937d5191356bc 100644
--- a/build-system/server/app-index/test/test-self.js
+++ b/build-system/server/app-index/test/test-self.js
@@ -17,41 +17,31 @@
 const amphtmlValidator = require('amphtml-validator');
 const fs = require('fs');
 const path = require('path');
+const {expectValidAmphtml, getBoundAttr, parseHtmlChunk} = require('./helpers');
 const {expect} = require('chai');
-const {
-  expectValidAmphtml,
-  getBoundAttr,
-  parseHtmlChunk,
-} = require('./helpers');
-
 
 describe('devdash', () => {
-
   describe('Test helpers', () => {
-
     describe('parseHtmlChunk', () => {
-
       it('returns firstElementChild', () => {
         const {tagName} = parseHtmlChunk('<my-tag></my-tag>');
         expect(tagName).to.equal(tagName);
       });
 
       it('fails with multiple children', () => {
-        expect(() => parseHtmlChunk('<a></a><a></a>')).to.throw;
+        expect(() => parseHtmlChunk('<a></a><a></a>')).to.throw();
       });
 
       it('fails with text node as content', () => {
-        expect(() => parseHtmlChunk('text content')).to.throw;
+        expect(() => parseHtmlChunk('text content')).to.throw();
       });
 
       it('fails on empty string', () => {
-        expect(() => parseHtmlChunk('')).to.throw;
+        expect(() => parseHtmlChunk('')).to.throw();
       });
-
     });
 
     describe('getBoundAttr', () => {
-
       it('returns bound attr set with other bound attrs', () => {
         const fakeEl = {outerHTML: '<div myHref=no [y]=b [myHref]=a></div>'};
         expect(getBoundAttr(fakeEl, 'myHref')).to.equal('a');
@@ -94,36 +84,36 @@ describe('devdash', () => {
       });
 
       it('returns value with double quote', () => {
-        const fakeEl = {outerHTML: '<div [foo]=\'ab"cd ef\'></div>'};
+        const fakeEl = {outerHTML: "<div [foo]='ab\"cd ef'></div>"};
         expect(getBoundAttr(fakeEl, 'foo')).to.equal('ab"cd ef');
       });
 
       it('returns value with single quote', () => {
         const fakeEl = {outerHTML: '<div [foo]="ab\'cd ef"></div>'};
-        expect(getBoundAttr(fakeEl, 'foo')).to.equal('ab\'cd ef');
+        expect(getBoundAttr(fakeEl, 'foo')).to.equal("ab'cd ef");
       });
-
     });
 
     describe('expectValidAmphtml', () => {
-
-      it('passes with minimum valid doc', async() => {
-        const validDocPath = path.join(__dirname,
-            '../../../../validator/testdata/feature_tests/minimum_valid_amp.html');
+      it('passes with minimum valid doc', async () => {
+        const validDocPath = path.join(
+          __dirname,
+          '../../../../validator/testdata/feature_tests/minimum_valid_amp.html'
+        );
 
         const validDoc = fs.readFileSync(validDocPath).toString();
 
         expectValidAmphtml(await amphtmlValidator.getInstance(), validDoc);
       });
 
-      it('fails with invalid doc', async() => {
+      it('fails with invalid doc', async () => {
         const invalidDoc = '<html 😻></html>';
 
         const validator = await amphtmlValidator.getInstance();
 
         expect(() => {
           expectValidAmphtml(validator, invalidDoc);
-        }).to.throw;
+        }).to.throw();
       });
 
       it('ignores errors with severity ≠ ERROR', () => {
@@ -135,9 +125,6 @@ describe('devdash', () => {
         };
         expectValidAmphtml(mockValidator, 'any string');
       });
-
     });
-
   });
-
 });
diff --git a/build-system/server/app-index/test/test-template.js b/build-system/server/app-index/test/test-template.js
index 395833075732b..2974931b84d9e 100644
--- a/build-system/server/app-index/test/test-template.js
+++ b/build-system/server/app-index/test/test-template.js
@@ -20,25 +20,26 @@ const {expectValidAmphtml} = require('./helpers');
 const {renderTemplate} = require('../template');
 
 describe('template', () => {
-
   describe('renderTemplate', () => {
-
-    it('renders valid doc', async() => {
-      expectValidAmphtml(await amphtmlValidator.getInstance(), renderTemplate({
-        basepath: '/examples/',
-        css: 'body{}',
-        isMainPage: true,
-        fileSet: ['tacos.al.pastor'],
-        serveMode: 'default',
-        selectModePrefix: '/',
-      }));
+    it('renders valid doc', async () => {
+      expectValidAmphtml(
+        await amphtmlValidator.getInstance(),
+        renderTemplate({
+          basepath: '/examples/',
+          css: 'body{}',
+          isMainPage: true,
+          fileSet: ['tacos.al.pastor'],
+          serveMode: 'default',
+          selectModePrefix: '/',
+        })
+      );
     });
 
-    it('renders valid doc with empty/default values', async() => {
-      expectValidAmphtml(await amphtmlValidator.getInstance(),
-          renderTemplate());
+    it('renders valid doc with empty/default values', async () => {
+      expectValidAmphtml(
+        await amphtmlValidator.getInstance(),
+        renderTemplate()
+      );
     });
-
   });
-
 });
diff --git a/build-system/server/app-index/test/test.js b/build-system/server/app-index/test/test.js
index 1b2615e13d56f..a2b8a3c682a11 100644
--- a/build-system/server/app-index/test/test.js
+++ b/build-system/server/app-index/test/test.js
@@ -20,13 +20,10 @@ const {serveIndexForTesting} = require('../index');
 const NOOP = () => {};
 
 describe('devdash', () => {
-
   describe('express middleware', () => {
-
-    it('renders HTML', async() => {
+    it('renders HTML', async () => {
       const renderedHtml = await serveIndexForTesting({url: '/'}, {end: NOOP});
       expect(renderedHtml).to.be.ok;
     });
-
   });
 });
diff --git a/build-system/server/app-index/util/listing.js b/build-system/server/app-index/util/listing.js
index 7a560033642ed..ce6e693ba8e5d 100644
--- a/build-system/server/app-index/util/listing.js
+++ b/build-system/server/app-index/util/listing.js
@@ -18,10 +18,20 @@
 const fs = require('fs');
 const {join, normalize, sep} = require('path');
 
+/**
+ * @param {string} path
+ * @param {string} rootPath
+ * @return {boolean}
+ */
 function isMaliciousPath(path, rootPath) {
   return (path + sep).substr(0, rootPath.length) !== rootPath;
 }
 
+/**
+ * @param {string} rootPath
+ * @param {string} basepath
+ * @return {Promise<null|undefined|string[]>}
+ */
 async function getListing(rootPath, basepath) {
   const path = normalize(join(rootPath, basepath));
 
@@ -43,6 +53,10 @@ async function getListing(rootPath, basepath) {
   }
 }
 
+/**
+ * @param {string} url
+ * @return {boolean}
+ */
 function isMainPageFromUrl(url) {
   return url == '/';
 }
diff --git a/build-system/server/app-utils.js b/build-system/server/app-utils.js
index f7f836a4d9727..0d9bae98b5e27 100644
--- a/build-system/server/app-utils.js
+++ b/build-system/server/app-utils.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-const log = require('fancy-log');
 const minimist = require('minimist');
-const {cyan, green} = require('ansi-colors');
+const {cyan, green} = require('../common/colors');
+const {log} = require('../common/logging');
 
 let serveMode = 'default';
 
@@ -49,9 +49,7 @@ function setServeMode(modeOptions) {
     if (isRtvMode(rtv)) {
       serveMode = rtv;
     } else {
-      const err = new Error(`Invalid rtv: ${rtv}. (Must be 15 digits long.)`);
-      err.showStack = false;
-      throw err;
+      throw new Error(`Invalid rtv: ${rtv}. (Must be 15 digits long.)`);
     }
   }
 }
@@ -87,19 +85,11 @@ const isRtvMode = (serveMode) => {
  * @param {string} file
  * @param {string=} hostName
  * @param {boolean=} inabox
- * @param {boolean=} storyV1
  * @return {string}
  */
-const replaceUrls = (mode, file, hostName, inabox, storyV1) => {
+const replaceUrls = (mode, file, hostName, inabox) => {
   hostName = hostName || '';
   if (mode == 'default') {
-    // TODO:(ccordry) remove this when story 0.1 is deprecated
-    if (storyV1) {
-      file = file.replace(
-        /https:\/\/cdn\.ampproject\.org\/v0\/amp-story-0\.1\.js/g,
-        hostName + '/dist/v0/amp-story-1.0.max.js'
-      );
-    }
     file = file.replace(
       /https:\/\/cdn\.ampproject\.org\/v0\.js/g,
       hostName + '/dist/amp.js'
@@ -127,28 +117,28 @@ const replaceUrls = (mode, file, hostName, inabox, storyV1) => {
     }
   } else if (mode == 'compiled') {
     file = file.replace(
-      /https:\/\/cdn\.ampproject\.org\/v0\.js/g,
-      hostName + '/dist/v0.js'
+      /https:\/\/cdn\.ampproject\.org\/v0\.(m?js)/g,
+      hostName + '/dist/v0.$1'
     );
     file = file.replace(
-      /https:\/\/cdn\.ampproject\.org\/shadow-v0\.js/g,
-      hostName + '/dist/shadow-v0.js'
+      /https:\/\/cdn\.ampproject\.org\/shadow-v0\.(m?js)/g,
+      hostName + '/dist/shadow-v0.$1'
     );
     file = file.replace(
-      /https:\/\/cdn\.ampproject\.org\/amp4ads-v0\.js/g,
-      hostName + '/dist/amp4ads-v0.js'
+      /https:\/\/cdn\.ampproject\.org\/amp4ads-v0\.(m?js)/g,
+      hostName + '/dist/amp4ads-v0.$1'
     );
     file = file.replace(
-      /https:\/\/cdn\.ampproject\.org\/video-iframe-integration-v0\.js/g,
-      hostName + '/dist/video-iframe-integration-v0.js'
+      /https:\/\/cdn\.ampproject\.org\/video-iframe-integration-v0\.(m?js)/g,
+      hostName + '/dist/video-iframe-integration-v0.$1'
     );
     file = file.replace(
-      /https:\/\/cdn\.ampproject\.org\/v0\/(.+?).js/g,
-      hostName + '/dist/v0/$1.js'
+      /https:\/\/cdn\.ampproject\.org\/v0\/(.+?)\.(m?js)/g,
+      hostName + '/dist/v0/$1.$2'
     );
     file = file.replace(
-      /\/dist\/v0\/examples\/(.*)\.max.js/g,
-      '/dist/v0/examples/$1.js'
+      /\/dist\/v0\/examples\/(.*)\.max\.(m?js)/g,
+      '/dist/v0/examples/$1.$2'
     );
     file = file.replace(
       /\/dist.3p\/current\/(.*)\.max.html/g,
@@ -156,7 +146,7 @@ const replaceUrls = (mode, file, hostName, inabox, storyV1) => {
     );
 
     if (inabox) {
-      file = file.replace(/\/dist\/v0\.js/g, '/dist/amp4ads-v0.js');
+      file = file.replace(/\/dist\/v0\.(m?js)/g, '/dist/amp4ads-v0.$1');
     }
   } else if (isRtvMode(mode)) {
     hostName = `https://cdn.ampproject.org/rtv/${mode}/`;
@@ -164,14 +154,14 @@ const replaceUrls = (mode, file, hostName, inabox, storyV1) => {
 
     if (inabox) {
       file = file.replace(
-        /https:\/\/cdn\.ampproject\.org\/rtv\/\d{15}\/v0\.js/g,
-        hostName + 'amp4ads-v0.js'
+        /https:\/\/cdn\.ampproject\.org\/rtv\/\d{15}\/v0\.(m?js)/g,
+        hostName + 'amp4ads-v0.$1'
       );
     }
   } else if (inabox) {
     file = file.replace(
-      /https:\/\/cdn\.ampproject\.org\/v0\.js/g,
-      'https://cdn.ampproject.org/amp4ads-v0.js'
+      /https:\/\/cdn\.ampproject\.org\/v0\.(m?js)/g,
+      'https://cdn.ampproject.org/amp4ads-v0.$1'
     );
   }
   return file;
diff --git a/build-system/server/app.js b/build-system/server/app.js
index 43ef5d8453ed7..d0a8f57d89281 100644
--- a/build-system/server/app.js
+++ b/build-system/server/app.js
@@ -17,22 +17,23 @@
 
 /**
  * @fileoverview Creates an http server to handle static
- * files and list directories for use with the gulp live server
+ * files and list directories for use with the amp live server
  */
-const app = require('express')();
 const argv = require('minimist')(process.argv.slice(2));
 const bacon = require('baconipsum');
 const bodyParser = require('body-parser');
 const cors = require('./amp-cors');
 const devDashboard = require('./app-index/index');
+const express = require('express');
+const fetch = require('node-fetch');
 const formidable = require('formidable');
 const fs = require('fs');
 const jsdom = require('jsdom');
 const path = require('path');
-const request = require('request');
 const upload = require('multer')();
 const pc = process;
 const autocompleteEmailData = require('./autocomplete-test-data');
+const header = require('connect-header');
 const runVideoTestBench = require('./app-video-testbench');
 const {
   getVariableRequest,
@@ -45,18 +46,46 @@ const {
   recaptchaRouter,
 } = require('./recaptcha-router');
 const {getServeMode} = require('./app-utils');
+const {isRtvMode, replaceUrls} = require('./app-utils');
+const {logWithoutTimestamp} = require('../common/logging');
+const {log} = require('../common/logging');
+const {red} = require('../common/colors');
 const {renderShadowViewer} = require('./shadow-viewer');
-const {replaceUrls, isRtvMode} = require('./app-utils');
 
+/**
+ * Respond with content received from a URL when SERVE_MODE is "cdn".
+ * @param {express.Response} res
+ * @param {string} cdnUrl
+ * @return {Promise<boolean>}
+ */
+async function passthroughServeModeCdn(res, cdnUrl) {
+  if (SERVE_MODE !== 'cdn') {
+    return false;
+  }
+  try {
+    const response = await fetch(cdnUrl);
+    res.status(response.status);
+    res.send(await response.text());
+  } catch (e) {
+    log(red('ERROR:'), e);
+    res.status(500);
+    res.end();
+  }
+  return true;
+}
+
+const app = express();
 const TEST_SERVER_PORT = argv.port || 8000;
 let SERVE_MODE = getServeMode();
 
+app.use(bodyParser.json());
 app.use(bodyParser.text());
 
 // Middleware is executed in order, so this must be at the top.
 // TODO(#24333): Migrate all server URL handlers to new-server/router and
-// deprecate this file.
-if (argv.new_server) {
+// deprecate app.js.
+// TODO(erwinmombay, #32865): Make visual diff tests use the new server
+if (!argv._.includes('visual-diff')) {
   app.use(require('./new-server/router'));
 }
 
@@ -65,6 +94,12 @@ app.use('/amp4test', require('./amp4test').app);
 app.use('/analytics', require('./routes/analytics'));
 app.use('/list/', require('./routes/list'));
 app.use('/test', require('./routes/test'));
+if (argv.coverage) {
+  app.use('/coverage', require('istanbul-middleware').createHandler());
+}
+
+// Built binaries should be fetchable from other origins, i.e. Storybook.
+app.use(header({'Access-Control-Allow-Origin': '*'}));
 
 // Append ?csp=1 to the URL to turn on the CSP header.
 // TODO: shall we turn on CSP all the time?
@@ -78,6 +113,11 @@ app.use((req, res, next) => {
   next();
 });
 
+/**
+ *
+ * @param {string} serveMode
+ * @return {boolean}
+ */
 function isValidServeMode(serveMode) {
   return (
     ['default', 'compiled', 'cdn', 'esm'].includes(serveMode) ||
@@ -85,6 +125,10 @@ function isValidServeMode(serveMode) {
   );
 }
 
+/**
+ *
+ * @param {string} serveMode
+ */
 function setServeMode(serveMode) {
   SERVE_MODE = serveMode;
 }
@@ -153,7 +197,7 @@ app.get('/proxy', async (req, res, next) => {
     const proxyUrl = `${modePrefix}/proxy/s/${ampdocUrlSuffix}`;
     res.redirect(proxyUrl);
   } catch ({message}) {
-    console.log(`ERROR: ${message}`);
+    logWithoutTimestamp(`ERROR: ${message}`);
     next();
   }
 });
@@ -165,32 +209,22 @@ app.get('/proxy', async (req, res, next) => {
  * @param {string=} protocol 'https' or 'http'. 'https' retries using 'http'.
  * @return {!Promise<string>}
  */
-function requestAmphtmlDocUrl(urlSuffix, protocol = 'https') {
+async function requestAmphtmlDocUrl(urlSuffix, protocol = 'https') {
   const defaultUrl = `${protocol}://${urlSuffix}`;
-  console.log(`Fetching URL: ${defaultUrl}`);
-  return new Promise((resolve, reject) => {
-    request(defaultUrl, (error, response, body) => {
-      if (
-        error ||
-        (response && (response.statusCode < 200 || response.statusCode >= 300))
-      ) {
-        if (protocol == 'https') {
-          return requestAmphtmlDocUrl(urlSuffix, 'http');
-        }
-        return reject(new Error(error || `Status: ${response.statusCode}`));
-      }
-      const {window} = new jsdom.JSDOM(body);
-      const linkRelAmphtml = window.document.querySelector('link[rel=amphtml]');
-      if (!linkRelAmphtml) {
-        return resolve(defaultUrl);
-      }
-      const amphtmlUrl = linkRelAmphtml.getAttribute('href');
-      if (!amphtmlUrl) {
-        return resolve(defaultUrl);
-      }
-      return resolve(amphtmlUrl);
-    });
-  });
+  logWithoutTimestamp(`Fetching URL: ${defaultUrl}`);
+
+  const response = await fetch(defaultUrl);
+  if (!response.ok) {
+    if (protocol == 'https') {
+      return requestAmphtmlDocUrl(urlSuffix, 'http');
+    }
+    throw new Error(`Status: ${response.status}`);
+  }
+
+  const {window} = new jsdom.JSDOM(await response.text());
+  const linkRelAmphtml = window.document.querySelector('link[rel=amphtml]');
+  const amphtmlUrl = linkRelAmphtml && linkRelAmphtml.getAttribute('href');
+  return amphtmlUrl || defaultUrl;
 }
 
 /*
@@ -207,7 +241,6 @@ app.get(
     '/examples/*.(min|max).html',
     '/test/manual/*.(min|max).html',
     '/test/fixtures/e2e/*/*.(min|max).html',
-    '/dist/cache-sw.(min|max).html',
   ],
   (req, res) => {
     const filePath = req.url;
@@ -248,13 +281,13 @@ app.use('/pwa', (req, res) => {
   });
 });
 
-app.use('/api/show', (req, res) => {
+app.use('/api/show', (_req, res) => {
   res.json({
     showNotification: true,
   });
 });
 
-app.use('/api/dont-show', (req, res) => {
+app.use('/api/dont-show', (_req, res) => {
   res.json({
     showNotification: false,
   });
@@ -269,7 +302,7 @@ app.use('/api/echo/post', (req, res) => {
   res.end(req.body);
 });
 
-app.use('/api/ping', (req, res) => {
+app.use('/api/ping', (_req, res) => {
   res.status(204).end();
 });
 
@@ -277,7 +310,7 @@ app.use('/form/html/post', (req, res) => {
   cors.assertCors(req, res, ['POST']);
 
   const form = new formidable.IncomingForm();
-  form.parse(req, (err, fields) => {
+  form.parse(req, (_err, fields) => {
     res.setHeader('Content-Type', 'text/html');
     if (fields['email'] == 'already@subscribed.com') {
       res.statusCode = 500;
@@ -320,7 +353,7 @@ app.use('/form/echo-json/post', (req, res) => {
     }
     fields[realName].push(value);
   });
-  form.parse(req, (unusedErr) => {
+  form.parse(req, () => {
     res.setHeader('Content-Type', 'application/json; charset=utf-8');
     if (fields['email'] == 'already@subscribed.com') {
       res.statusCode = 500;
@@ -362,7 +395,6 @@ app.use('/form/json/poll1', (req, res) => {
 app.post('/form/json/upload', upload.fields([{name: 'myFile'}]), (req, res) => {
   cors.assertCors(req, res, ['POST']);
 
-  /** @type {!Array<!File>|undefined} */
   const myFile = req.files['myFile'];
 
   if (!myFile) {
@@ -375,7 +407,7 @@ app.post('/form/json/upload', upload.fields([{name: 'myFile'}]), (req, res) => {
   res.json({message: contents});
 });
 
-app.use('/form/search-html/get', (req, res) => {
+app.use('/form/search-html/get', (_req, res) => {
   res.setHeader('Content-Type', 'text/html');
   res.end(`
      <h1>Here's results for your search<h1>
@@ -421,7 +453,7 @@ app.use('/form/autocomplete/query', (req, res) => {
   }
 });
 
-app.use('/form/autocomplete/error', (req, res) => {
+app.use('/form/autocomplete/error', (_req, res) => {
   res.status(500).end();
 });
 
@@ -441,7 +473,7 @@ app.use('/form/mention/query', (req, res) => {
 app.use('/form/verify-search-json/post', (req, res) => {
   cors.assertCors(req, res, ['POST']);
   const form = new formidable.IncomingForm();
-  form.parse(req, (err, fields) => {
+  form.parse(req, (_err, fields) => {
     res.setHeader('Content-Type', 'application/json; charset=utf-8');
 
     const errors = [];
@@ -479,62 +511,60 @@ app.use('/form/verify-search-json/post', (req, res) => {
   });
 });
 
-app.use('/share-tracking/get-outgoing-fragment', (req, res) => {
-  res.json({
-    fragment: '54321',
-  });
-});
-
-// Fetches an AMP document from the AMP proxy and replaces JS
-// URLs, so that they point to localhost.
-function proxyToAmpProxy(req, res, mode) {
+/**
+ * Fetches an AMP document from the AMP proxy and replaces JS
+ * URLs, so that they point to localhost.
+ *
+ * @param {express.Request} req
+ * @param {express.Response} res
+ * @param {string} mode
+ */
+async function proxyToAmpProxy(req, res, mode) {
   const url =
     'https://cdn.ampproject.org/' +
     (req.query['amp_js_v'] ? 'v' : 'c') +
     req.url;
-  console.log('Fetching URL: ' + url);
-  request(url, function (error, response, body) {
+  logWithoutTimestamp('Fetching URL: ' + url);
+  const urlResponse = await fetch(url);
+  let body = await urlResponse.text();
+  body = body
+    // Unversion URLs.
+    .replace(
+      /https\:\/\/cdn\.ampproject\.org\/rtv\/\d+\//g,
+      'https://cdn.ampproject.org/'
+    )
+    // <base> href pointing to the proxy, so that images, etc. still work.
+    .replace('<head>', '<head><base href="https://cdn.ampproject.org/">');
+  const inabox = req.query['inabox'];
+  const urlPrefix = getUrlPrefix(req);
+  if (req.query['mraid']) {
     body = body
-      // Unversion URLs.
       .replace(
-        /https\:\/\/cdn\.ampproject\.org\/rtv\/\d+\//g,
-        'https://cdn.ampproject.org/'
+        '</head>',
+        '<script async host-service="amp-mraid" src="https://cdn.ampproject.org/v0/amp-mraid-0.1.js">' +
+          '</script>' +
+          '</head>'
       )
-      // <base> href pointing to the proxy, so that images, etc. still work.
-      .replace('<head>', '<head><base href="https://cdn.ampproject.org/">');
-    const inabox = req.query['inabox'];
-    // TODO(ccordry): Remove this when story v01 is depricated.
-    const storyV1 = req.query['story_v'] === '1';
-    const urlPrefix = getUrlPrefix(req);
-    if (req.query['mraid']) {
-      body = body
-        .replace(
-          '</head>',
-          '<script async host-service="amp-mraid" src="https://cdn.ampproject.org/v0/amp-mraid-0.1.js">' +
-            '</script>' +
-            '</head>'
-        )
-        // Change cdnUrl from the default so amp-mraid requests the (mock)
-        // mraid.js from the local server. In a real environment this doesn't
-        // matter as the local environment would intercept this request.
-        .replace(
-          '<head>',
-          ' <head>' +
-            ' <script>' +
-            ' window.AMP_CONFIG = {' +
-            `   cdnUrl: "${urlPrefix}",` +
-            ' };' +
-            ' </script>'
-        );
-    }
-    body = replaceUrls(mode, body, urlPrefix, inabox, storyV1);
-    if (inabox) {
-      // Allow CORS requests for A4A.
-      const origin = req.headers.origin || urlPrefix;
-      cors.enableCors(req, res, origin);
-    }
-    res.status(response.statusCode).send(body);
-  });
+      // Change cdnUrl from the default so amp-mraid requests the (mock)
+      // mraid.js from the local server. In a real environment this doesn't
+      // matter as the local environment would intercept this request.
+      .replace(
+        '<head>',
+        ' <head>' +
+          ' <script>' +
+          ' window.AMP_CONFIG = {' +
+          `   cdnUrl: "${urlPrefix}",` +
+          ' };' +
+          ' </script>'
+      );
+  }
+  body = replaceUrls(mode, body, urlPrefix, inabox);
+  if (inabox) {
+    // Allow CORS requests for A4A.
+    const origin = req.headers.origin || urlPrefix;
+    cors.enableCors(req, res, origin);
+  }
+  res.status(urlResponse.status).send(body);
 }
 
 let itemCtr = 2;
@@ -558,7 +588,7 @@ app.use('/examples/live-list-update(-reverse)?.amp.html', (req, res, next) => {
   }
   if (!liveListDoc) {
     const liveListUpdateFullPath = `${pc.cwd()}${req.baseUrl}`;
-    console.log('liveListUpdateFullPath', liveListUpdateFullPath);
+    logWithoutTimestamp('liveListUpdateFullPath', liveListUpdateFullPath);
     const liveListFile = fs.readFileSync(liveListUpdateFullPath);
     liveListDoc = liveListDocs[req.baseUrl] = new jsdom.JSDOM(
       liveListFile
@@ -608,27 +638,41 @@ app.use('/examples/live-list-update(-reverse)?.amp.html', (req, res, next) => {
   res.send(`${doctype}${outerHTML}`);
 });
 
+/**
+ * @param {Element} item
+ */
 function liveListReplace(item) {
-  item.setAttribute('data-update-time', Date.now());
+  item.setAttribute('data-update-time', Date.now().toString());
   const itemContents = item.querySelectorAll('.content');
-  itemContents[0].textContent = Math.floor(Math.random() * 10);
-  itemContents[1].textContent = Math.floor(Math.random() * 10);
+  itemContents[0].textContent = Math.floor(Math.random() * 10).toString();
+  itemContents[1].textContent = Math.floor(Math.random() * 10).toString();
 }
 
+/**
+ * @param {Element} liveList
+ * @param {Element} node
+ */
 function liveListInsert(liveList, node) {
   const iterCount = Math.floor(Math.random() * 2) + 1;
-  console.log(`inserting ${iterCount} item(s)`);
+  logWithoutTimestamp(`inserting ${iterCount} item(s)`);
   for (let i = 0; i < iterCount; i++) {
-    const child = node.cloneNode(true);
+    /**
+     * TODO(#28387) this type cast may be hiding a bug.
+     * @type {Element}
+     */
+    const child = /** @type {*} */ (node.cloneNode(true));
     child.setAttribute('id', `list-item-${itemCtr++}`);
     child.setAttribute('data-sort-time', Date.now());
-    liveList.querySelector('[items]').appendChild(child);
+    liveList.querySelector('[items]')?.appendChild(child);
   }
 }
 
+/**
+ * @param {Element} liveList
+ */
 function liveListTombstone(liveList) {
   const tombstoneId = Math.floor(Math.random() * itemCtr);
-  console.log(`trying to tombstone #list-item-${tombstoneId}`);
+  logWithoutTimestamp(`trying to tombstone #list-item-${tombstoneId}`);
   // We can tombstone any list item except item-1 since we always do a
   // replace example on item-1.
   if (tombstoneId != 1) {
@@ -639,8 +683,14 @@ function liveListTombstone(liveList) {
   }
 }
 
-// Generate a random number between min and max
-// Value is inclusive of both min and max values.
+/**
+ * Generate a random number between min and max
+ * Value is inclusive of both min and max values.
+ *
+ * @param {number} min
+ * @param {number} max
+ * @return {number}
+ */
 function range(min, max) {
   const values = Array.apply(null, new Array(max - min + 1)).map(
     (_, i) => min + i
@@ -648,11 +698,18 @@ function range(min, max) {
   return values[Math.round(Math.random() * (max - min))];
 }
 
-// Returns the result of a coin flip, true or false
+/**
+ * Returns the result of a coin flip, true or false
+ *
+ * @return {boolean}
+ */
 function flip() {
   return !!Math.floor(Math.random() * 2);
 }
 
+/**
+ * @return {string}
+ */
 function getLiveBlogItem() {
   const now = Date.now();
   // Generate a 3 to 7 worded headline
@@ -691,7 +748,9 @@ function getLiveBlogItem() {
             </p>
             <p class="brand">PublisherName News Reporter<p>
             <p><span itemscope itemtype="http://schema.org/Date"
-                itemprop="Date">${Date(now).replace(/ GMT.*$/, '')}<span></p>
+                itemprop="Date">
+                ${new Date(now).toString().replace(/ GMT.*$/, '')}
+                <span></p>
           </div>
         </div>
         <div class="article-body">${body}</div>
@@ -708,6 +767,9 @@ function getLiveBlogItem() {
     </amp-live-list></body></html>`;
 }
 
+/**
+ * @return {string}
+ */
 function getLiveBlogItemWithBindAttributes() {
   const now = Date.now();
   // Generate a 3 to 7 worded headline
@@ -795,6 +857,7 @@ app.post('/get-consent-v1/', (req, res) => {
   cors.assertCors(req, res, ['POST']);
   const body = {
     'promptIfUnknown': true,
+    'purposeConsentRequired': ['purpose-foo', 'purpose-bar'],
     'forcePromptOnNext': forcePromptOnNext,
     'sharedData': {
       'tfua': true,
@@ -824,20 +887,24 @@ app.post('/get-consent-no-prompt/', (req, res) => {
 
 app.post('/check-consent', (req, res) => {
   cors.assertCors(req, res, ['POST']);
-  res.json({
+  const response = {
     'consentRequired': req.query.consentRequired === 'true',
     'consentStateValue': req.query.consentStateValue,
+    'consentString': req.query.consentString,
     'expireCache': req.query.expireCache === 'true',
-  });
+  };
+  if (req.query.consentMetadata) {
+    response['consentMetadata'] = JSON.parse(
+      req.query.consentMetadata.replace(/'/g, '"')
+    );
+  }
+  res.json(response);
 });
 
 // Proxy with local JS.
 // Example:
 // http://localhost:8000/proxy/s/www.washingtonpost.com/amphtml/news/post-politics/wp/2016/02/21/bernie-sanders-says-lower-turnout-contributed-to-his-nevada-loss-to-hillary-clinton/
-app.use('/proxy/', (req, res) => {
-  const mode = SERVE_MODE;
-  proxyToAmpProxy(req, res, mode);
-});
+app.use('/proxy/', (req, res) => proxyToAmpProxy(req, res, SERVE_MODE));
 
 // Nest the response in an iframe.
 // Example:
@@ -914,7 +981,7 @@ app.get('/iframe-echo-message', (req, res) => {
  * <script async custom-element="amp-form"
  *    src="https://cdn.ampproject.org/v0/amp-form-0.1.js?sleep=5"></script>
  */
-app.use(['/dist/v0/amp-*.js', '/dist/amp*.js'], (req, res, next) => {
+app.use(['/dist/v0/amp-*.(m?js)', '/dist/amp*.(m?js)'], (req, _res, next) => {
   const sleep = parseInt(req.query.sleep || 0, 10) * 1000;
   setTimeout(next, sleep);
 });
@@ -922,7 +989,7 @@ app.use(['/dist/v0/amp-*.js', '/dist/amp*.js'], (req, res, next) => {
 /**
  * Disable caching for extensions if the --no_caching_extensions flag is used.
  */
-app.get(['/dist/v0/amp-*.js'], (req, res, next) => {
+app.get(['/dist/v0/amp-*.(m?js)'], (_req, res, next) => {
   if (argv.no_caching_extensions) {
     res.header('Cache-Control', 'no-store');
   }
@@ -946,6 +1013,7 @@ app.get(
     const mode = SERVE_MODE;
     const inabox = req.query['inabox'];
     const stream = Number(req.query['stream']);
+    const componentVersion = req.query['componentVersion'];
     const urlPrefix = getUrlPrefix(req);
     fs.promises
       .readFile(pc.cwd() + filePath, 'utf8')
@@ -972,6 +1040,9 @@ app.get(
             );
         }
         file = file.replace(/__TEST_SERVER_PORT__/g, TEST_SERVER_PORT);
+        if (componentVersion) {
+          file = file.replace(/-latest.js/g, `-${componentVersion}.js`);
+        }
 
         if (inabox && req.headers.origin) {
           // Allow CORS requests for A4A.
@@ -990,9 +1061,10 @@ app.get(
 
         // Extract amp-ad for the given 'type' specified in URL query.
         if (req.path.indexOf('/examples/ads.amp.html') == 0 && req.query.type) {
-          const ads = file.match(
-            elementExtractor('(amp-ad|amp-embed)', req.query.type)
-          );
+          const ads =
+            file.match(
+              elementExtractor('(amp-ad|amp-embed)', req.query.type)
+            ) ?? [];
           file = file.replace(
             /<body>[\s\S]+<\/body>/m,
             '<body>' + ads.join('') + '</body>'
@@ -1004,9 +1076,8 @@ app.get(
           req.path.indexOf('/examples/analytics-vendors.amp.html') == 0 &&
           req.query.type
         ) {
-          const analytics = file.match(
-            elementExtractor('amp-analytics', req.query.type)
-          );
+          const analytics =
+            file.match(elementExtractor('amp-analytics', req.query.type)) ?? [];
           file = file.replace(
             /<div id="container">[\s\S]+<\/div>/m,
             '<div id="container">' + analytics.join('') + '</div>'
@@ -1018,9 +1089,8 @@ app.get(
           req.path.indexOf('/examples/amp-consent/cmp-vendors.amp.html') == 0 &&
           req.query.type
         ) {
-          const consent = file.match(
-            elementExtractor('amp-consent', req.query.type)
-          );
+          const consent =
+            file.match(elementExtractor('amp-consent', req.query.type)) ?? [];
           file = file.replace(
             /<div id="container">[\s\S]+<\/div>/m,
             '<div id="container">' + consent.join('') + '</div>'
@@ -1054,10 +1124,19 @@ app.get(
   }
 );
 
+/**
+ * @param {string} string
+ * @return {string}
+ */
 function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
+/**
+ * @param {string} tagName
+ * @param {string} type
+ * @return {RegExp}
+ */
 function elementExtractor(tagName, type) {
   type = escapeRegExp(type);
   return new RegExp(
@@ -1139,20 +1218,78 @@ app.use('/bind/ecommerce/sizes', (req, res) => {
   }, 1000); // Simulate network delay.
 });
 
-// Simulated subscription entitlement
+/**
+ * Simulates a publisher's metering state store.
+ * (amp-subscriptions)
+ * @type {{[ampReaderId: string]: {}}}
+ */
+const meteringStateStore = {};
+
+// Simulate a publisher's entitlements API.
+// (amp-subscriptions)
 app.use('/subscription/:id/entitlements', (req, res) => {
   cors.assertCors(req, res, ['GET']);
-  res.json({
-    source: 'local' + req.params.id,
-    granted: true,
-    grantedReason: 'NOT_SUBSCRIBED',
+
+  // Create entitlements response.
+  const source = 'local' + req.params.id;
+  const granted = req.params.id > 0;
+  const grantReason = granted ? 'SUBSCRIBER' : 'NOT_SUBSCRIBER';
+  const decryptedDocumentKey = decryptDocumentKey(req.query.crypt);
+  const response = {
+    source,
+    granted,
+    grantReason,
     data: {
       login: true,
     },
-    decryptedDocumentKey: decryptDocumentKey(req.query.crypt),
+    decryptedDocumentKey,
+  };
+
+  // Store metering state, if possible.
+  const ampReaderId = req.query.rid;
+  if (ampReaderId && req.query.meteringState) {
+    // Parse metering state from encoded Base64 string.
+    const encodedMeteringState = req.query.meteringState;
+    const decodedMeteringState = Buffer.from(
+      encodedMeteringState,
+      'base64'
+    ).toString();
+    const meteringState = JSON.parse(decodedMeteringState);
+
+    // Store metering state.
+    meteringStateStore[ampReaderId] = meteringState;
+  }
+
+  // Add metering state to response, if possible.
+  if (meteringStateStore[ampReaderId]) {
+    response.metering = {
+      state: meteringStateStore[ampReaderId],
+    };
+  }
+
+  res.json(response);
+});
+
+// Simulate a publisher's SKU map API.
+// (amp-subscriptions)
+app.use('/subscriptions/skumap', (req, res) => {
+  cors.assertCors(req, res, ['GET']);
+  res.json({
+    'subscribe.google.com': {
+      'subscribeButtonSimple': {
+        'sku': 'basic',
+      },
+      'subscribeButtonCarousel': {
+        'carouselOptions': {
+          'skus': ['basic', 'premium_monthly'],
+        },
+      },
+    },
   });
 });
 
+// Simulate a publisher's pingback API.
+// (amp-subscriptions)
 app.use('/subscription/pingback', (req, res) => {
   cors.assertCors(req, res, ['POST']);
   res.json({
@@ -1160,6 +1297,65 @@ app.use('/subscription/pingback', (req, res) => {
   });
 });
 
+/*
+  Simulate a publisher's account registration API.
+
+  The `amp-subscriptions-google` extension sends this API a POST request.
+  The request body looks like:
+
+  {
+    "googleSignInDetails": {
+      // This signed JWT contains information from Google Sign-In
+      "idToken": "...JWT from Google Sign-In...",
+      // Some useful fields from the `idToken`, pre-parsed for convenience
+      "name": "Jane Smith",
+      "givenName": "Jane",
+      "familyName": "Smith",
+      "imageUrl": "https://imageurl",
+      "email": "janesmith@example.com"
+    },
+    // Associate this ID with the registration. Use it to look up metering state
+    // for future entitlements requests
+    // https://github.com/ampproject/amphtml/blob/main/extensions/amp-subscriptions/amp-subscriptions.md#combining-the-amp-reader-id-with-publisher-cookies
+    "ampReaderId": "amp-s0m31d3nt1f13r"
+  }
+
+  (amp-subscriptions-google)
+*/
+app.use('/subscription/register', (req, res) => {
+  cors.assertCors(req, res, ['POST']);
+
+  // Generate a new ID for this metering state.
+  const meteringStateId = 'ppid' + Math.round(Math.random() * 99999999);
+
+  // Define registration timestamp.
+  //
+  // For demo purposes, set timestamp to 30 seconds ago.
+  // This causes Metering Toast to show immediately,
+  // which helps engineers test metering.
+  const registrationTimestamp = Math.round(Date.now() / 1000) - 30000;
+
+  // Store metering state.
+  //
+  // For demo purposes, just save this in memory.
+  // Production systems should persist this.
+  meteringStateStore[req.body.ampReaderId] = {
+    id: meteringStateId,
+    standardAttributes: {
+      // eslint-disable-next-line google-camelcase/google-camelcase
+      registered_user: {
+        timestamp: registrationTimestamp, // In seconds.
+      },
+    },
+  };
+
+  res.json({
+    metering: {
+      state: meteringStateStore[req.body.ampReaderId],
+    },
+  });
+});
+
 // Simulated adzerk ad server and AMP cache CDN.
 app.get('/adzerk/*', (req, res) => {
   cors.assertCors(req, res, ['GET'], ['AMP-template-amp-creative']);
@@ -1185,31 +1381,27 @@ app.get('/adzerk/*', (req, res) => {
     });
 });
 
+app.get('/dist/*.mjs', (req, res, next) => {
+  // Allow CORS access control explicitly for mjs files
+  cors.enableCors(req, res);
+  next();
+});
+
 /*
  * Serve extension scripts and their source maps.
  */
 app.get(
-  ['/dist/rtv/*/v0/*.js', '/dist/rtv/*/v0/*.js.map'],
-  (req, res, next) => {
+  ['/dist/rtv/*/v0/*.(m?js)', '/dist/rtv/*/v0/*.(m?js).map'],
+  async (req, res, next) => {
     const mode = SERVE_MODE;
     const fileName = path.basename(req.path).replace('.max.', '.');
     let filePath = 'https://cdn.ampproject.org/v0/' + fileName;
-    if (mode == 'cdn') {
-      // This will not be useful until extension-location.js change in prod
-      // Require url from cdn
-      request(filePath, (error, response) => {
-        if (error) {
-          res.status(404);
-          res.end();
-        } else {
-          res.send(response);
-        }
-      });
+    if (await passthroughServeModeCdn(res, filePath)) {
       return;
     }
     const isJsMap = filePath.endsWith('.map');
     if (isJsMap) {
-      filePath = filePath.replace(/\.js\.map$/, '.js');
+      filePath = filePath.replace(/\.(m?js)\.map$/, '.$1');
     }
     filePath = replaceUrls(mode, filePath);
     req.url = filePath + (isJsMap ? '.map' : '');
@@ -1217,42 +1409,49 @@ app.get(
   }
 );
 
-/**
- * Serve entry point script url
- */
-app.get(
-  ['/dist/sw.js', '/dist/sw-kill.js', '/dist/ww.js'],
-  (req, res, next) => {
-    // Special case for entry point script url. Use compiled for testing
-    const mode = SERVE_MODE;
-    const fileName = path.basename(req.path);
-    if (mode == 'cdn') {
-      // This will not be useful until extension-location.js change in prod
-      // Require url from cdn
-      const filePath = 'https://cdn.ampproject.org/' + fileName;
-      request(filePath, function (error, response) {
-        if (error) {
-          res.status(404);
-          res.end();
-        } else {
-          res.send(response);
-        }
-      });
-      return;
-    }
-    if (mode == 'default') {
-      req.url = req.url.replace(/\.js$/, '.max.js');
-    }
-    next();
+if (argv.coverage === 'live') {
+  app.get('/dist/amp.js', async (req, res) => {
+    const ampJs = await fs.promises.readFile(`${pc.cwd()}${req.path}`);
+    res.setHeader('Content-Type', 'text/javascript');
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    // Append an unload handler that reports coverage information each time you
+    // leave a page.
+    res.end(`${ampJs};
+window.addEventListener('beforeunload', (evt) => {
+  const COV_REPORT_URL = 'http://localhost:${TEST_SERVER_PORT}/coverage/client';
+  console.info('POSTing code coverage to', COV_REPORT_URL);
+
+  const xhr = new XMLHttpRequest();
+  xhr.open('POST', COV_REPORT_URL, true);
+  xhr.setRequestHeader('Content-type', 'application/json');
+  xhr.send(JSON.stringify(window.__coverage__));
+
+  // Required by Chrome
+  evt.returnValue = '';
+  return null;
+});`);
+  });
+}
+
+app.get('/dist/ww.(m?js)', async (req, res, next) => {
+  // Special case for entry point script url. Use compiled for testing
+  const mode = SERVE_MODE;
+  const fileName = path.basename(req.path);
+  if (await passthroughServeModeCdn(res, fileName)) {
+    return;
   }
-);
+  if (mode == 'default') {
+    req.url = req.url.replace(/\.(m?js)$/, '.max.$1');
+  }
+  next();
+});
 
-app.get('/dist/iframe-transport-client-lib.js', (req, res, next) => {
+app.get('/dist/iframe-transport-client-lib.(m?js)', (req, _res, next) => {
   req.url = req.url.replace(/dist/, 'dist.3p/current');
   next();
 });
 
-app.get('/dist/amp-inabox-host.js', (req, res, next) => {
+app.get('/dist/amp-inabox-host.(m?js)', (req, _res, next) => {
   const mode = SERVE_MODE;
   if (mode != 'default') {
     req.url = req.url.replace('amp-inabox-host', 'amp4ads-host-v0');
@@ -1260,115 +1459,7 @@ app.get('/dist/amp-inabox-host.js', (req, res, next) => {
   next();
 });
 
-/*
- * Start Cache SW LOCALDEV section
- */
-app.get('/dist/sw(.max)?.js', (req, res, next) => {
-  const filePath = req.path;
-  fs.promises
-    .readFile(pc.cwd() + filePath, 'utf8')
-    .then((file) => {
-      let n = new Date();
-      // Round down to the nearest 5 minutes.
-      n -=
-        (n.getMinutes() % 5) * 1000 * 60 +
-        n.getSeconds() * 1000 +
-        n.getMilliseconds();
-      file =
-        'self.AMP_CONFIG = {v: "99' +
-        n +
-        '",' +
-        'cdnUrl: "http://localhost:8000/dist"};' +
-        file;
-      res.setHeader('Content-Type', 'application/javascript');
-      res.setHeader('Date', new Date().toUTCString());
-      res.setHeader('Cache-Control', 'no-cache;max-age=150');
-      res.end(file);
-    })
-    .catch(next);
-});
-
-app.get('/dist/rtv/9[89]*/*.js', (req, res, next) => {
-  res.setHeader('Content-Type', 'application/javascript');
-  res.setHeader('Date', new Date().toUTCString());
-  res.setHeader('Cache-Control', 'no-cache;max-age=31536000');
-
-  setTimeout(() => {
-    // Cause a delay, to show the "stale-while-revalidate"
-    if (req.path.includes('v0.js')) {
-      const path = req.path.replace(/rtv\/\d+/, '');
-      return fs.promises
-        .readFile(pc.cwd() + path, 'utf8')
-        .then((file) => {
-          res.end(file);
-        })
-        .catch(next);
-    }
-
-    res.end(`
-      const li = document.createElement('li');
-      li.textContent = '${req.path}';
-      loaded.appendChild(li);
-    `);
-  }, 2000);
-});
-
-app.get(['/dist/cache-sw.html'], (req, res, next) => {
-  const filePath = '/test/manual/cache-sw.html';
-  fs.promises
-    .readFile(pc.cwd() + filePath, 'utf8')
-    .then((file) => {
-      let n = new Date();
-      // Round down to the nearest 5 minutes.
-      n -=
-        (n.getMinutes() % 5) * 1000 * 60 +
-        n.getSeconds() * 1000 +
-        n.getMilliseconds();
-      const percent = parseFloat(req.query.canary) || 0.01;
-      let env = '99';
-      if (Math.random() < percent) {
-        env = '98';
-        n += 5 * 1000 * 60;
-      }
-      file = file.replace(/dist\/v0/g, `dist/rtv/${env}${n}/v0`);
-      file = file.replace(/CURRENT_RTV/, env + n);
-
-      res.setHeader('Content-Type', 'text/html');
-      res.end(file);
-    })
-    .catch(next);
-});
-
-app.get('/dist/diversions', (req, res) => {
-  let n = new Date();
-  // Round down to the nearest 5 minutes.
-  n -=
-    (n.getMinutes() % 5) * 1000 * 60 +
-    n.getSeconds() * 1000 +
-    n.getMilliseconds();
-  n += 5 * 1000 * 60;
-  res.setHeader('Content-Type', 'application/json');
-  res.setHeader('Date', new Date().toUTCString());
-  res.setHeader('Cache-Control', 'no-cache;max-age=150');
-  res.end(JSON.stringify(['98' + n]));
-});
-
-/*
- * End Cache SW LOCALDEV section
- */
-
-/**
- * Web worker binary.
- */
-app.get('/dist/ww(.max)?.js', (req, res) => {
-  fs.promises.readFile(pc.cwd() + req.path).then((file) => {
-    res.setHeader('Content-Type', 'text/javascript');
-    res.setHeader('Access-Control-Allow-Origin', '*');
-    res.end(file);
-  });
-});
-
-app.get('/mraid.js', (req, res, next) => {
+app.get('/mraid.js', (req, _res, next) => {
   req.url = req.url.replace('mraid.js', 'examples/mraid/mraid.js');
   next();
 });
@@ -1402,12 +1493,12 @@ app.use('/mraid/', (req, res) => {
 });
 
 /**
- * @param {string} ampJsVersion
+ * @param {string} ampJsVersionString
  * @param {string} file
  * @return {string}
  */
-function addViewerIntegrationScript(ampJsVersion, file) {
-  ampJsVersion = parseFloat(ampJsVersion);
+function addViewerIntegrationScript(ampJsVersionString, file) {
+  const ampJsVersion = parseFloat(ampJsVersionString);
   if (!ampJsVersion) {
     return file;
   }
@@ -1433,10 +1524,18 @@ function addViewerIntegrationScript(ampJsVersion, file) {
   return file;
 }
 
+/**
+ * @param {express.Request} req
+ * @return {string}
+ */
 function getUrlPrefix(req) {
   return req.protocol + '://' + req.headers.host;
 }
 
+/**
+ * @param {string} filePath
+ * @return {string}
+ */
 function generateInfo(filePath) {
   const mode = SERVE_MODE;
   filePath = filePath.substr(0, filePath.length - 9) + '.html';
@@ -1459,6 +1558,10 @@ function generateInfo(filePath) {
   );
 }
 
+/**
+ * @param {string} encryptedDocumentKey
+ * @return {?string}
+ */
 function decryptDocumentKey(encryptedDocumentKey) {
   if (!encryptedDocumentKey) {
     return null;
@@ -1477,36 +1580,29 @@ function decryptDocumentKey(encryptedDocumentKey) {
 }
 
 // serve local vendor config JSON files
-app.use('(/dist)?/rtv/*/v0/analytics-vendors/:vendor.json', (req, res) => {
-  const {vendor} = req.params;
-  const serveMode = SERVE_MODE;
-
-  if (serveMode === 'cdn') {
-    const vendorUrl = `https://cdn.ampproject.org/v0/analytics-vendors/${vendor}.json`;
-    request(vendorUrl, (error, response) => {
-      if (error) {
-        res.status(404);
-        res.end();
-      } else {
-        res.send(response);
-      }
-    });
-    return;
-  }
+app.use(
+  '(/dist)?/rtv/*/v0/analytics-vendors/:vendor.json',
+  async (req, res) => {
+    const {vendor} = req.params;
+    const serveMode = SERVE_MODE;
 
-  const max = serveMode === 'default' ? '.max' : '';
-  const localVendorConfigPath = `${pc.cwd()}/dist/v0/analytics-vendors/${vendor}${max}.json`;
+    const cdnUrl = `https://cdn.ampproject.org/v0/analytics-vendors/${vendor}.json`;
+    if (await passthroughServeModeCdn(res, cdnUrl)) {
+      return;
+    }
 
-  fs.promises
-    .readFile(localVendorConfigPath)
-    .then((file) => {
+    const max = serveMode === 'default' ? '.max' : '';
+    const localPath = `${pc.cwd()}/dist/v0/analytics-vendors/${vendor}${max}.json`;
+
+    try {
+      const file = await fs.promises.readFile(localPath);
       res.setHeader('Content-Type', 'application/json');
       res.end(file);
-    })
-    .catch(() => {
+    } catch (_) {
       res.status(404);
-      res.end('Not found: ' + localVendorConfigPath);
-    });
-});
+      res.end('Not found: ' + localPath);
+    }
+  }
+);
 
 module.exports = app;
diff --git a/build-system/server/lazy-build.js b/build-system/server/lazy-build.js
index 4bb1bf4fd9ca9..01671d2ce4d57 100644
--- a/build-system/server/lazy-build.js
+++ b/build-system/server/lazy-build.js
@@ -16,17 +16,24 @@
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
+const {
+  doBuild3pVendor,
+  generateBundles,
+} = require('../tasks/3p-vendor-helpers');
 const {
   doBuildExtension,
-  maybeInitializeExtensions,
   getExtensionsToBuild,
+  maybeInitializeExtensions,
 } = require('../tasks/extension-helpers');
-const {doBuildJs} = require('../tasks/helpers');
+const {compileCoreRuntime, doBuildJs} = require('../tasks/helpers');
 const {jsBundles} = require('../compile/bundles.config');
+const {VERSION} = require('../compile/internal-version');
 
 const extensionBundles = {};
 maybeInitializeExtensions(extensionBundles, /* includeLatest */ true);
 
+const vendorBundles = generateBundles();
+
 /**
  * Gets the unminified name of the bundle if it can be lazily built.
  *
@@ -53,10 +60,10 @@ function maybeGetUnminifiedName(bundles, name) {
  * required.
  *
  * @param {string} url
- * @param {string} matcher
+ * @param {string|RegExp} matcher
  * @param {!Object} bundles
- * @param {function()} buildFunc
- * @param {function()} next
+ * @param {function(!Object, string, ?Object):Promise} buildFunc
+ * @param {function(): void} next
  */
 async function lazyBuild(url, matcher, bundles, buildFunc, next) {
   const match = url.match(matcher);
@@ -76,7 +83,8 @@ async function lazyBuild(url, matcher, bundles, buildFunc, next) {
  *
  * @param {!Object} bundles
  * @param {string} name
- * @param {function()} buildFunc
+ * @param {function(!Object, string, ?Object):Promise} buildFunc
+ * @return {Promise<void>}
  */
 async function build(bundles, name, buildFunc) {
   const bundle = bundles[name];
@@ -104,10 +112,10 @@ async function build(bundles, name, buildFunc) {
  * Lazy builds the correct version of an extension when requested.
  *
  * @param {!Object} req
- * @param {!Object} res
- * @param {function()} next
+ * @param {!Object} _res
+ * @param {function(): void} next
  */
-async function lazyBuildExtensions(req, res, next) {
+async function lazyBuildExtensions(req, _res, next) {
   const matcher = argv.compiled
     ? /\/dist\/v0\/([^\/]*)\.js/ // '/dist/v0/*.js'
     : /\/dist\/v0\/([^\/]*)\.max\.js/; // '/dist/v0/*.max.js'
@@ -118,27 +126,42 @@ async function lazyBuildExtensions(req, res, next) {
  * Lazy builds a non-extension JS file when requested.
  *
  * @param {!Object} req
- * @param {!Object} res
- * @param {function()} next
+ * @param {!Object} _res
+ * @param {function(): void} next
  */
-async function lazyBuildJs(req, res, next) {
+async function lazyBuildJs(req, _res, next) {
   const matcher = /\/.*\/([^\/]*\.js)/;
   await lazyBuild(req.url, matcher, jsBundles, doBuildJs, next);
 }
 
+/**
+ * Lazy builds a 3p iframe vendor file when requested.
+ *
+ * @param {!Object} req
+ * @param {!Object} _res
+ * @param {function(): void} next
+ */
+async function lazyBuild3pVendor(req, _res, next) {
+  const matcher = argv.compiled
+    ? new RegExp(`\\/dist\\.3p\\/${VERSION}\\/vendor\\/([^\/]*)\\.js`) // '/dist.3p/21900000/vendor/*.js'
+    : /\/dist\.3p\/current\/vendor\/([^\/]*)\.max\.js/; // '/dist.3p/current/vendor/*.max.js'
+  await lazyBuild(req.url, matcher, vendorBundles, doBuild3pVendor, next);
+}
+
 /**
  * Pre-builds the core runtime and the JS files that it loads.
  */
 async function preBuildRuntimeFiles() {
-  await build(jsBundles, 'amp.js', doBuildJs);
-  await build(jsBundles, 'ww.max.js', doBuildJs);
+  await build(jsBundles, 'amp.js', (_bundles, _name, options) =>
+    compileCoreRuntime(options)
+  );
 }
 
 /**
  * Pre-builds default extensions and ones requested via command line flags.
  */
 async function preBuildExtensions() {
-  const extensions = getExtensionsToBuild();
+  const extensions = getExtensionsToBuild(/* preBuild */ true);
   for (const extensionBundle in extensionBundles) {
     const extension = extensionBundles[extensionBundle].name;
     if (extensions.includes(extension) && !extensionBundle.endsWith('latest')) {
@@ -150,6 +173,7 @@ async function preBuildExtensions() {
 module.exports = {
   lazyBuildExtensions,
   lazyBuildJs,
+  lazyBuild3pVendor,
   preBuildExtensions,
   preBuildRuntimeFiles,
 };
diff --git a/build-system/server/new-server/router.js b/build-system/server/new-server/router.js
index c819f2e24987d..7122b2ed74506 100644
--- a/build-system/server/new-server/router.js
+++ b/build-system/server/new-server/router.js
@@ -15,12 +15,26 @@
  */
 
 const router = require('express').Router();
+// @ts-ignore
 const {transform} = require('./transforms/dist/transform');
 
 router.get('/examples/*.html', async (req, res) => {
-  const transformed = await transform(process.cwd() + req.path);
+  let transformedHTML;
+  const filePath = `${process.cwd()}${req.path}`;
+  try {
+    transformedHTML = await transform(filePath);
+  } catch (e) {
+    console./*OK*/ log(
+      `${req.path} could not be transformed by the postHTML ` +
+        `pipeline.\n${e.message}`
+    );
+  }
   res.setHeader('Content-Type', 'text/html; charset=utf-8');
-  res.end(transformed);
+  if (req.query.__amp_source_origin) {
+    res.setHeader('Access-Control-Allow-Origin', req.query.__amp_source_origin);
+    res.setHeader('Access-Control-Allow-Credentials', 'true');
+  }
+  res.end(transformedHTML);
 });
 
 module.exports = router;
diff --git a/build-system/server/new-server/transforms/README.md b/build-system/server/new-server/transforms/README.md
index fb4e605e419eb..b12e80c0f228e 100644
--- a/build-system/server/new-server/transforms/README.md
+++ b/build-system/server/new-server/transforms/README.md
@@ -1,11 +1,12 @@
-## Custom transforms for `gulp serve`.
+## Custom transforms for `amp serve`.
 
 **Main directory:** `build-system/server/new-server/transforms/`
 
 **Structure:** Each subdirectory should contain the following:
 
-- A single `.ts` file that implements a specific transform (`*-transform.ts`)
-- A `test/` subdirectory containing one or more pairs of input and output files (`test/*-[input|output].html`)
+-   A single `.ts` file that implements a specific transform (`*-transform.ts`)
+-   A `test/` subdirectory containing one or more subdirectories labelled by test name, with each subdirectory containing one pair of input and output files (`test/*/[input|output].html`)
+-   Optionally, in each individual test subdirectory, an `options.json` file for specific configurations for specific tests (`test/*/options.json`)
 
 **Example:**
 
@@ -14,13 +15,17 @@
     ├── foo
     │   ├── foo-transform.ts
     │   └── test
-    │       ├── testName-input.html
-    │       └── testName-output.html
+    │       └── testName
+    │           ├── input.html
+    │           ├── output.html
+    │           └── options.json
     ├── bar
     │   ├── bar-transform.ts
     │   └── test
-    │       ├── testName1-input.html
-    │       ├── testName1-output.html
-    │       ├── testName2-input.html
-    │       └── testName2-output.html
+    │       ├── testName1
+    │       │   ├── input.html
+    │       │   └── output.html
+    │       └── testName2
+    │           ├── input.html
+    │           └── output.html
 ```
diff --git a/build-system/server/new-server/transforms/css/css-transform.ts b/build-system/server/new-server/transforms/css/css-transform.ts
new file mode 100644
index 0000000000000..7254f49519115
--- /dev/null
+++ b/build-system/server/new-server/transforms/css/css-transform.ts
@@ -0,0 +1,83 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import minimist from 'minimist';
+import posthtml from 'posthtml';
+import {readFileSync} from 'fs';
+import {OptionSet} from '../utilities/option-set';
+
+const argv = minimist(process.argv.slice(2));
+const isTestMode: boolean = argv._.includes('server-tests');
+
+const testDir = 'build-system/server/new-server/transforms/css/test';
+const cwd = process.cwd();
+
+const cssPath = isTestMode
+  ? `${cwd}/${testDir}/css.txt`
+  : `${cwd}/build/css/v0.css`;
+const versionPath = `${cwd}/${testDir}/version.txt`
+
+const css = readFileSync(cssPath, 'utf8').toString().trim();
+const version = readFileSync(versionPath, 'utf8').toString().trim();
+
+interface StyleNode extends posthtml.Node {
+  tag: 'style',
+  attrs: {
+    [key: string]: string | undefined
+    'amp-runtime': string,
+    'i-amphtml-version': string,
+  },
+  content: string[]
+}
+
+function isStyleNode(node: posthtml.Node | string): node is StyleNode {
+  return node !== undefined && typeof node !== 'string' &&
+    (node as StyleNode).tag === 'style';
+}
+
+function prependAmpStyles(head: posthtml.Node): posthtml.Node {
+  const content = head.content || [];
+
+  const firstStyleNode = content.filter(isStyleNode)[0];
+
+  // If 'amp-runtime' already exists bail out.
+  if (firstStyleNode?.attrs && 'amp-runtime' in firstStyleNode.attrs) {
+    return head;
+  }
+
+  const styleNode: StyleNode = {
+    walk: head.walk,
+    match: head.match,
+    tag: 'style',
+    attrs: {
+      'amp-runtime': '',
+      // Prefix 01 to simulate stable/prod version RTV prefix.
+      'i-amphtml-version': `01${version}`,
+    },
+    content: [css]
+  };
+  content.unshift(styleNode);
+  return {...head, content};
+}
+
+/**
+ * Replace the src for every stories script tag.
+ */
+export default function (_options: OptionSet = {}): (tree: posthtml.Node) => void {
+  return function (tree: posthtml.Node) {
+    tree.match({tag: 'head'}, prependAmpStyles);
+  }
+}
diff --git a/build-system/server/new-server/transforms/css/test/css.txt b/build-system/server/new-server/transforms/css/test/css.txt
new file mode 100644
index 0000000000000..efe9c34b60f1a
--- /dev/null
+++ b/build-system/server/new-server/transforms/css/test/css.txt
@@ -0,0 +1 @@
+.i-amp-internal{background-color:red}
diff --git a/build-system/server/new-server/transforms/css/test/esm-env/input.html b/build-system/server/new-server/transforms/css/test/esm-env/input.html
new file mode 100644
index 0000000000000..5ebf21c535374
--- /dev/null
+++ b/build-system/server/new-server/transforms/css/test/esm-env/input.html
@@ -0,0 +1,3 @@
+<head>
+<style amp-custom>.my-personal-style {}</style>
+</head>
diff --git a/build-system/server/new-server/transforms/css/test/esm-env/output.html b/build-system/server/new-server/transforms/css/test/esm-env/output.html
new file mode 100644
index 0000000000000..81f40c67eaeb2
--- /dev/null
+++ b/build-system/server/new-server/transforms/css/test/esm-env/output.html
@@ -0,0 +1,3 @@
+<head><style amp-runtime="" i-amphtml-version="011234567890">.i-amp-internal{background-color:red}</style>
+<style amp-custom="">.my-personal-style {}</style>
+</head>
diff --git a/build-system/server/new-server/transforms/css/test/no-insert/input.html b/build-system/server/new-server/transforms/css/test/no-insert/input.html
new file mode 100644
index 0000000000000..cf1c30befa6d9
--- /dev/null
+++ b/build-system/server/new-server/transforms/css/test/no-insert/input.html
@@ -0,0 +1,4 @@
+<head>
+<style amp-runtime>.amp-runtime{}</style>
+<style amp-custom>.my-personal-style {}</style>
+</head>
diff --git a/build-system/server/new-server/transforms/css/test/no-insert/output.html b/build-system/server/new-server/transforms/css/test/no-insert/output.html
new file mode 100644
index 0000000000000..a91d5793addc6
--- /dev/null
+++ b/build-system/server/new-server/transforms/css/test/no-insert/output.html
@@ -0,0 +1,4 @@
+<head>
+<style amp-runtime="">.amp-runtime{}</style>
+<style amp-custom="">.my-personal-style {}</style>
+</head>
diff --git a/build-system/server/new-server/transforms/css/test/version.txt b/build-system/server/new-server/transforms/css/test/version.txt
new file mode 100644
index 0000000000000..a32a4347a4ec2
--- /dev/null
+++ b/build-system/server/new-server/transforms/css/test/version.txt
@@ -0,0 +1 @@
+1234567890
diff --git a/build-system/server/new-server/transforms/modules/modules-transform.ts b/build-system/server/new-server/transforms/modules/modules-transform.ts
index b8b548502e4de..e5294766cc456 100644
--- a/build-system/server/new-server/transforms/modules/modules-transform.ts
+++ b/build-system/server/new-server/transforms/modules/modules-transform.ts
@@ -14,62 +14,76 @@
  * limitations under the License.
  */
 
-import {PostHTML} from 'posthtml';
-import {URL} from 'url';
-import {isValidScript, ScriptNode} from '../utilities/script';
-import {CDNURLToLocalDistURL} from '../utilities/cdn';
+import posthtml from 'posthtml';
+import {isJsonScript, isValidScript, toExtension, ScriptNode, tryGetUrl} from '../utilities/script';
+import {OptionSet} from '../utilities/option-set';
 
 /**
- * Append a Module Script for a ScriptNode.
  * @param head
  * @param script
  */
-function appendModuleScript(head: PostHTML.Node, script: ScriptNode): void {
-  const modulePath = CDNURLToLocalDistURL(
-    new URL(script.attrs.src || ''),
-    undefined,
-    '.mjs'
-  ).toString();
-
-  const insert: ScriptNode = {
-    ...script,
+function appendModuleScript(head: posthtml.Node, nomoduleScript: ScriptNode, options: OptionSet): void {
+  const modulePath = toExtension(tryGetUrl(nomoduleScript.attrs.src), '.mjs').toString();
+  const moduleScript : ScriptNode = {
+    ...nomoduleScript,
     attrs: {
-      ...script.attrs,
+      ...nomoduleScript.attrs,
       src: modulePath,
       type: 'module',
     },
   };
-  delete insert.attrs.nomodule;
+  delete moduleScript.attrs.nomodule;
 
-  (head.content || []).push(insert);
+  const content = head.content || [];
+  const nomoduleIdx = content.indexOf(nomoduleScript);
+  // If we are testing and in esm mode, outright replace the nomodule script
+  // with the module script. This is so that we testing the module script in
+  // isolation without a fallback.
+  if (options.fortesting && options.esm) {
+    content.splice(nomoduleIdx, 1, moduleScript);
+  } else {
+    // Add the module script after the nomodule script.
+    content.splice(nomoduleIdx + 1, 0, '\n', moduleScript);
+  }
 }
 
 /**
- *
+ * Returns a function that will transform script node sources into module/nomodule pair.
+ * @param options
  */
-export default function(tree: PostHTML.Node): void {
-  let head: PostHTML.Node | undefined = undefined;
-  const scripts: Array<ScriptNode> = [];
-  tree.walk(node => {
-    if (node.tag === 'head') {
-      head = node;
-    }
-    if (!isValidScript(node)) {
-      return node;
-    }
+export default function(options: OptionSet = {}): (tree: posthtml.Node) => void {
+  return function(tree: posthtml.Node): void {
+    let head: posthtml.Node | undefined = undefined;
+    const scripts: Array<ScriptNode> = [];
+    tree.walk(node => {
+      if (node.tag === 'head') {
+        head = node;
+      }
 
-    // Mark the existing valid scripts with `nomodule` attributes.
-    node.attrs.nomodule = '';
-    scripts.push(node);
-    return node;
-  });
+      // Make sure that isJsonScript is used before `isValidScript`. We bail out
+      // early if the ScriptNofe is of type="application/json" since it wouldn't
+      // have any src url to modify.
+      if (isJsonScript(node)) {
+        return node;
+      }
 
-  if (head === undefined) {
-    console.log('Could not find a head element in the document');
-    return;
-  }
+      if (!isValidScript(node, options.looseScriptSrcCheck)) {
+        return node;
+      }
+
+      // Mark the existing valid scripts with `nomodule` attributes.
+      node.attrs.nomodule = '';
+      scripts.push(node);
+      return node;
+    });
 
-  for (const script of scripts) {
-    appendModuleScript(head, script);
+    if (head === undefined) {
+      console.log('Could not find a head element in the document');
+      return;
+    }
+
+    for (const script of scripts) {
+      appendModuleScript(head, script, options);
+    }
   }
 }
diff --git a/build-system/server/new-server/transforms/modules/test/module-nomodule-cdn-input/input.html b/build-system/server/new-server/transforms/modules/test/module-nomodule-cdn-input/input.html
new file mode 100644
index 0000000000000..062973c40f0ac
--- /dev/null
+++ b/build-system/server/new-server/transforms/modules/test/module-nomodule-cdn-input/input.html
@@ -0,0 +1,4 @@
+<head>
+<script async src="https://cdn.ampproject.org/v0.js"></script>
+<script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/modules/test/module-nomodule-cdn-input/output.html b/build-system/server/new-server/transforms/modules/test/module-nomodule-cdn-input/output.html
new file mode 100644
index 0000000000000..113ced5111814
--- /dev/null
+++ b/build-system/server/new-server/transforms/modules/test/module-nomodule-cdn-input/output.html
@@ -0,0 +1,6 @@
+<head>
+<script async="" src="https://cdn.ampproject.org/v0.js" nomodule=""></script>
+<script async="" src="https://cdn.ampproject.org/v0.mjs" type="module"></script>
+<script async="" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" nomodule=""></script>
+<script async="" src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" type="module"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-loose/input.html b/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-loose/input.html
new file mode 100644
index 0000000000000..f6cf915a20481
--- /dev/null
+++ b/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-loose/input.html
@@ -0,0 +1,5 @@
+<head>
+<script async src="http://localhost:8000/amp.js"></script>
+<script async src="https://cdn.ampproject.org/v0.js"></script>
+<script async src="http://localhost:8000/v0/amp-bind-0.1.js"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-loose/options.json b/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-loose/options.json
new file mode 100644
index 0000000000000..c0b206e741909
--- /dev/null
+++ b/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-loose/options.json
@@ -0,0 +1,3 @@
+{
+  "looseScriptSrcCheck": true
+}
diff --git a/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-loose/output.html b/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-loose/output.html
new file mode 100644
index 0000000000000..415b9646318ed
--- /dev/null
+++ b/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-loose/output.html
@@ -0,0 +1,8 @@
+<head>
+<script async="" src="http://localhost:8000/amp.js" nomodule=""></script>
+<script async="" src="http://localhost:8000/amp.mjs" type="module"></script>
+<script async="" src="https://cdn.ampproject.org/v0.js" nomodule=""></script>
+<script async="" src="https://cdn.ampproject.org/v0.mjs" type="module"></script>
+<script async="" src="http://localhost:8000/v0/amp-bind-0.1.js" nomodule=""></script>
+<script async="" src="http://localhost:8000/v0/amp-bind-0.1.mjs" type="module"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-strict/input.html b/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-strict/input.html
new file mode 100644
index 0000000000000..f6cf915a20481
--- /dev/null
+++ b/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-strict/input.html
@@ -0,0 +1,5 @@
+<head>
+<script async src="http://localhost:8000/amp.js"></script>
+<script async src="https://cdn.ampproject.org/v0.js"></script>
+<script async src="http://localhost:8000/v0/amp-bind-0.1.js"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-strict/output.html b/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-strict/output.html
new file mode 100644
index 0000000000000..4c78464b51c6d
--- /dev/null
+++ b/build-system/server/new-server/transforms/modules/test/module-nomodule-localhost-input-strict/output.html
@@ -0,0 +1,6 @@
+<head>
+<script async="" src="http://localhost:8000/amp.js"></script>
+<script async="" src="https://cdn.ampproject.org/v0.js" nomodule=""></script>
+<script async="" src="https://cdn.ampproject.org/v0.mjs" type="module"></script>
+<script async="" src="http://localhost:8000/v0/amp-bind-0.1.js"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/modules/test/module-replace-nomodule-script/input.html b/build-system/server/new-server/transforms/modules/test/module-replace-nomodule-script/input.html
new file mode 100644
index 0000000000000..062973c40f0ac
--- /dev/null
+++ b/build-system/server/new-server/transforms/modules/test/module-replace-nomodule-script/input.html
@@ -0,0 +1,4 @@
+<head>
+<script async src="https://cdn.ampproject.org/v0.js"></script>
+<script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/modules/test/module-replace-nomodule-script/options.json b/build-system/server/new-server/transforms/modules/test/module-replace-nomodule-script/options.json
new file mode 100644
index 0000000000000..e8d501419759b
--- /dev/null
+++ b/build-system/server/new-server/transforms/modules/test/module-replace-nomodule-script/options.json
@@ -0,0 +1,4 @@
+{
+  "esm": true,
+  "fortesting": true
+}
diff --git a/build-system/server/new-server/transforms/modules/test/module-replace-nomodule-script/output.html b/build-system/server/new-server/transforms/modules/test/module-replace-nomodule-script/output.html
new file mode 100644
index 0000000000000..7d5fc87291ffd
--- /dev/null
+++ b/build-system/server/new-server/transforms/modules/test/module-replace-nomodule-script/output.html
@@ -0,0 +1,4 @@
+<head>
+<script async="" src="https://cdn.ampproject.org/v0.mjs" type="module"></script>
+<script async="" src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" type="module"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/modules/test/skip-over-json-script/input.html b/build-system/server/new-server/transforms/modules/test/skip-over-json-script/input.html
new file mode 100644
index 0000000000000..39a81ed2bddd3
--- /dev/null
+++ b/build-system/server/new-server/transforms/modules/test/skip-over-json-script/input.html
@@ -0,0 +1,3 @@
+<head>
+<script type="application/json">{}</script>
+</head>
diff --git a/build-system/server/new-server/transforms/modules/test/skip-over-json-script/output.html b/build-system/server/new-server/transforms/modules/test/skip-over-json-script/output.html
new file mode 100644
index 0000000000000..39a81ed2bddd3
--- /dev/null
+++ b/build-system/server/new-server/transforms/modules/test/skip-over-json-script/output.html
@@ -0,0 +1,3 @@
+<head>
+<script type="application/json">{}</script>
+</head>
diff --git a/build-system/server/new-server/transforms/scripts/scripts-transform.ts b/build-system/server/new-server/transforms/scripts/scripts-transform.ts
index 726275aef0905..6333e42710722 100644
--- a/build-system/server/new-server/transforms/scripts/scripts-transform.ts
+++ b/build-system/server/new-server/transforms/scripts/scripts-transform.ts
@@ -14,21 +14,32 @@
  * limitations under the License.
  */
 
-import {PostHTML} from 'posthtml';
-import {URL} from 'url';
-import {isValidScript} from '../utilities/script';
-import {CDNURLToLocalDistURL} from '../utilities/cdn';
+import posthtml from 'posthtml';
+import {isJsonScript, isValidScript, tryGetUrl} from '../utilities/script';
+import {CDNURLToLocalHostRelativeAbsoluteDist} from '../utilities/cdn';
+import {OptionSet} from '../utilities/option-set';
+import {parse} from 'path';
 
 /**
  * For any script, with a valid path to AMP Project CDN, replace it with a local value.
  * @param script
  */
-function modifySrc(script: PostHTML.Node): PostHTML.Node {
-  if (!isValidScript(script)) {
+function modifySrc(script: posthtml.Node, options: OptionSet): posthtml.Node {
+  // Make sure that isJsonScript is used before `isValidScript`. We bail out
+  // early if the ScriptNode is of type="application/json" since it wouldn't
+  // have any src url to modify.
+  if (isJsonScript(script)) {
     return script;
   }
 
-  const src = CDNURLToLocalDistURL(new URL(script.attrs.src || '')).toString();
+  if (!isValidScript(script, options.looseScriptSrcCheck)) {
+    return script;
+  }
+
+  const url = tryGetUrl(script.attrs.src || '');
+  const parsedPath = parse(url.pathname);
+  const src = CDNURLToLocalHostRelativeAbsoluteDist(url, [null, null], parsedPath.ext, options.port, options.useMaxNames)
+      .toString();
   script.attrs.src = src;
   return script;
 }
@@ -36,6 +47,10 @@ function modifySrc(script: PostHTML.Node): PostHTML.Node {
 /**
  * Replace the src for every script tag to the local value.
  */
-export default function(tree: PostHTML.Node): void {
-  tree.match({tag: 'script'}, modifySrc);
+export default function(options: OptionSet = {}): (tree: posthtml.Node) => void {
+  return function(tree: posthtml.Node) {
+    tree.match({tag: 'script'}, (script) => {
+      return modifySrc(script, options);
+    });
+  }
 }
diff --git a/build-system/server/new-server/transforms/scripts/test/convert-to-max-names/input.html b/build-system/server/new-server/transforms/scripts/test/convert-to-max-names/input.html
new file mode 100644
index 0000000000000..0048475e7832c
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/convert-to-max-names/input.html
@@ -0,0 +1,3 @@
+<script src="https://cdn.ampproject.org/v0.js?a=b&c=d#hello=world" async></script>
+<script src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" async></script>
+<script src="https://cdn.ampproject.org/v0/amp-bind-0.2.js" async></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/convert-to-max-names/options.json b/build-system/server/new-server/transforms/scripts/test/convert-to-max-names/options.json
new file mode 100644
index 0000000000000..87590c5297de7
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/convert-to-max-names/options.json
@@ -0,0 +1,3 @@
+{
+  "useMaxNames": true
+}
diff --git a/build-system/server/new-server/transforms/scripts/test/convert-to-max-names/output.html b/build-system/server/new-server/transforms/scripts/test/convert-to-max-names/output.html
new file mode 100644
index 0000000000000..0faa308d14533
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/convert-to-max-names/output.html
@@ -0,0 +1,3 @@
+<script src="/dist/amp.js?a=b&c=d#hello=world" async=""></script>
+<script src="/dist/v0/amp-bind-0.1.max.js" async=""></script>
+<script src="/dist/v0/amp-bind-0.2.max.js" async=""></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/invalid-src-input.html b/build-system/server/new-server/transforms/scripts/test/invalid-src-input.html
deleted file mode 100644
index aaf619d9d243f..0000000000000
--- a/build-system/server/new-server/transforms/scripts/test/invalid-src-input.html
+++ /dev/null
@@ -1 +0,0 @@
-<script src="https://cdn/v0.js" async></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/invalid-src-loose/input.html b/build-system/server/new-server/transforms/scripts/test/invalid-src-loose/input.html
new file mode 100644
index 0000000000000..1aa22c9e7e316
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/invalid-src-loose/input.html
@@ -0,0 +1,3 @@
+<script src="https://cdn/v0.js" async></script>
+<script src="amp.js" async></script>
+<script src="http://localhost:8000/amp.js" async></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/invalid-src-loose/options.json b/build-system/server/new-server/transforms/scripts/test/invalid-src-loose/options.json
new file mode 100644
index 0000000000000..c0b206e741909
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/invalid-src-loose/options.json
@@ -0,0 +1,3 @@
+{
+  "looseScriptSrcCheck": true
+}
diff --git a/build-system/server/new-server/transforms/scripts/test/invalid-src-loose/output.html b/build-system/server/new-server/transforms/scripts/test/invalid-src-loose/output.html
new file mode 100644
index 0000000000000..8d5870a5df72f
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/invalid-src-loose/output.html
@@ -0,0 +1,3 @@
+<script src="/dist/v0.js" async=""></script>
+<script src="/dist/amp.js" async=""></script>
+<script src="/dist/amp.js" async=""></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/invalid-src-output.html b/build-system/server/new-server/transforms/scripts/test/invalid-src-output.html
deleted file mode 100644
index 597560bff5c78..0000000000000
--- a/build-system/server/new-server/transforms/scripts/test/invalid-src-output.html
+++ /dev/null
@@ -1 +0,0 @@
-<script src="https://cdn/v0.js" async=""></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/invalid-src-strict/input.html b/build-system/server/new-server/transforms/scripts/test/invalid-src-strict/input.html
new file mode 100644
index 0000000000000..4bf60247f275b
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/invalid-src-strict/input.html
@@ -0,0 +1,2 @@
+<script src="https://cdn/v0.js" async></script>
+<script src="/dist/amp.js" async></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/invalid-src-strict/output.html b/build-system/server/new-server/transforms/scripts/test/invalid-src-strict/output.html
new file mode 100644
index 0000000000000..fa8c4db7f4eac
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/invalid-src-strict/output.html
@@ -0,0 +1,2 @@
+<script src="https://cdn/v0.js" async=""></script>
+<script src="/dist/amp.js" async=""></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/multiple-output.html b/build-system/server/new-server/transforms/scripts/test/multiple-output.html
deleted file mode 100644
index e10c2e42b28ce..0000000000000
--- a/build-system/server/new-server/transforms/scripts/test/multiple-output.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<script src="http://localhost:8000/dist/v0.js" async=""></script>
-<script src="http://localhost:8000/dist/v0.js" async=""></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/multiple-input.html b/build-system/server/new-server/transforms/scripts/test/multiple/input.html
similarity index 100%
rename from build-system/server/new-server/transforms/scripts/test/multiple-input.html
rename to build-system/server/new-server/transforms/scripts/test/multiple/input.html
diff --git a/build-system/server/new-server/transforms/scripts/test/multiple/output.html b/build-system/server/new-server/transforms/scripts/test/multiple/output.html
new file mode 100644
index 0000000000000..aa985dd86b500
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/multiple/output.html
@@ -0,0 +1,2 @@
+<script src="/dist/v0.js" async=""></script>
+<script src="/dist/v0.js" async=""></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/port-transform-loose/input.html b/build-system/server/new-server/transforms/scripts/test/port-transform-loose/input.html
new file mode 100644
index 0000000000000..919055b8f300d
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/port-transform-loose/input.html
@@ -0,0 +1,5 @@
+<script async="" src="http://localhost:8000/amp.js"></script>
+<script async="" src="https://cdn.ampproject.org/v0.js" nomodule=""></script>
+<script async="" src="https://cdn.ampproject.org/v0.mjs" type="module"></script>
+<script async="" src="http://localhost:8000/v0/amp-bind-0.1.js"></script>
+<script async="" src="/dist/amp.js"></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/port-transform-loose/options.json b/build-system/server/new-server/transforms/scripts/test/port-transform-loose/options.json
new file mode 100644
index 0000000000000..5c31eed2fdffd
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/port-transform-loose/options.json
@@ -0,0 +1,4 @@
+{
+  "port": 9876,
+  "looseScriptSrcCheck": true
+}
diff --git a/build-system/server/new-server/transforms/scripts/test/port-transform-loose/output.html b/build-system/server/new-server/transforms/scripts/test/port-transform-loose/output.html
new file mode 100644
index 0000000000000..a9f50715da19a
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/port-transform-loose/output.html
@@ -0,0 +1,5 @@
+<script async="" src="/dist/amp.js"></script>
+<script async="" src="/dist/v0.js" nomodule=""></script>
+<script async="" src="/dist/v0.mjs" type="module"></script>
+<script async="" src="/dist/v0/amp-bind-0.1.js"></script>
+<script async="" src="/dist/dist/amp.js"></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/port-transform-strict/input.html b/build-system/server/new-server/transforms/scripts/test/port-transform-strict/input.html
new file mode 100644
index 0000000000000..919055b8f300d
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/port-transform-strict/input.html
@@ -0,0 +1,5 @@
+<script async="" src="http://localhost:8000/amp.js"></script>
+<script async="" src="https://cdn.ampproject.org/v0.js" nomodule=""></script>
+<script async="" src="https://cdn.ampproject.org/v0.mjs" type="module"></script>
+<script async="" src="http://localhost:8000/v0/amp-bind-0.1.js"></script>
+<script async="" src="/dist/amp.js"></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/port-transform-strict/options.json b/build-system/server/new-server/transforms/scripts/test/port-transform-strict/options.json
new file mode 100644
index 0000000000000..bd8c0931fa96a
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/port-transform-strict/options.json
@@ -0,0 +1,3 @@
+{
+  "port": 9876
+}
diff --git a/build-system/server/new-server/transforms/scripts/test/port-transform-strict/output.html b/build-system/server/new-server/transforms/scripts/test/port-transform-strict/output.html
new file mode 100644
index 0000000000000..bd29048368725
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/port-transform-strict/output.html
@@ -0,0 +1,5 @@
+<script async="" src="http://localhost:8000/amp.js"></script>
+<script async="" src="/dist/v0.js" nomodule=""></script>
+<script async="" src="/dist/v0.mjs" type="module"></script>
+<script async="" src="http://localhost:8000/v0/amp-bind-0.1.js"></script>
+<script async="" src="/dist/amp.js"></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/retain-extension/input.html b/build-system/server/new-server/transforms/scripts/test/retain-extension/input.html
new file mode 100644
index 0000000000000..d380685fe3c27
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/retain-extension/input.html
@@ -0,0 +1,3 @@
+<script async="" src="https://cdn.ampproject.org/v0.js"></script>
+<script async="" src="https://cdn.ampproject.org/v0.mjs"></script>
+<script async="" src="https://cdn.ampproject.org/v0.sxg.js"></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/retain-extension/output.html b/build-system/server/new-server/transforms/scripts/test/retain-extension/output.html
new file mode 100644
index 0000000000000..71f563c211cb3
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/retain-extension/output.html
@@ -0,0 +1,3 @@
+<script async="" src="/dist/v0.js"></script>
+<script async="" src="/dist/v0.mjs"></script>
+<script async="" src="/dist/v0.sxg.js"></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/runtime-input.html b/build-system/server/new-server/transforms/scripts/test/runtime-input.html
deleted file mode 100644
index 6642aca11243f..0000000000000
--- a/build-system/server/new-server/transforms/scripts/test/runtime-input.html
+++ /dev/null
@@ -1 +0,0 @@
-<script src="https://cdn.ampproject.org/v0.js" async></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/runtime-output.html b/build-system/server/new-server/transforms/scripts/test/runtime-output.html
deleted file mode 100644
index 0f836a55435bf..0000000000000
--- a/build-system/server/new-server/transforms/scripts/test/runtime-output.html
+++ /dev/null
@@ -1 +0,0 @@
-<script src="http://localhost:8000/dist/v0.js" async=""></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/runtime/input.html b/build-system/server/new-server/transforms/scripts/test/runtime/input.html
new file mode 100644
index 0000000000000..bbe65c8de9fbd
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/runtime/input.html
@@ -0,0 +1,2 @@
+<script src="https://cdn.ampproject.org/v0.js?a=b&c=d#hello=world" async></script>
+<script src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" async></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/runtime/output.html b/build-system/server/new-server/transforms/scripts/test/runtime/output.html
new file mode 100644
index 0000000000000..6e16aeb53068e
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/runtime/output.html
@@ -0,0 +1,2 @@
+<script src="/dist/v0.js?a=b&c=d#hello=world" async=""></script>
+<script src="/dist/v0/amp-bind-0.1.js" async=""></script>
diff --git a/build-system/server/new-server/transforms/scripts/test/skip-over-json-script/input.html b/build-system/server/new-server/transforms/scripts/test/skip-over-json-script/input.html
new file mode 100644
index 0000000000000..39a81ed2bddd3
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/skip-over-json-script/input.html
@@ -0,0 +1,3 @@
+<head>
+<script type="application/json">{}</script>
+</head>
diff --git a/build-system/server/new-server/transforms/scripts/test/skip-over-json-script/output.html b/build-system/server/new-server/transforms/scripts/test/skip-over-json-script/output.html
new file mode 100644
index 0000000000000..39a81ed2bddd3
--- /dev/null
+++ b/build-system/server/new-server/transforms/scripts/test/skip-over-json-script/output.html
@@ -0,0 +1,3 @@
+<head>
+<script type="application/json">{}</script>
+</head>
diff --git a/build-system/server/new-server/transforms/stories/stories-transform.ts b/build-system/server/new-server/transforms/stories/stories-transform.ts
deleted file mode 100644
index 0ba8df2fda387..0000000000000
--- a/build-system/server/new-server/transforms/stories/stories-transform.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {PostHTML} from 'posthtml';
-import {URL} from 'url';
-import {isValidScript} from '../utilities/script';
-import {CDNURLToLocalDistURL} from '../utilities/cdn';
-
-function sidegradeStories(script: PostHTML.Node): PostHTML.Node {
-  if (!isValidScript(script)) {
-    return script;
-  }
-
-  const originalSrc = new URL(script.attrs.src || '');
-  const src = CDNURLToLocalDistURL(originalSrc, [
-    'amp-story-1.0.js',
-    'amp-story-1.0.max.js',
-  ]).toString();
-  script.attrs.src = src;
-  return script;
-}
-
-/**
- * Replace the src for every stories script tag.
- */
-export default function(tree: PostHTML.Node): void {
-  tree.match({tag: 'script'}, sidegradeStories);
-}
diff --git a/build-system/server/new-server/transforms/sxg/sxg-transform.ts b/build-system/server/new-server/transforms/sxg/sxg-transform.ts
new file mode 100644
index 0000000000000..184e2e8be38eb
--- /dev/null
+++ b/build-system/server/new-server/transforms/sxg/sxg-transform.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import posthtml from 'posthtml';
+import {URL} from 'url';
+import {isJsonScript, isValidScript} from '../utilities/script';
+import {OptionSet} from '../utilities/option-set';
+
+function sxgTransform(node: posthtml.Node, options: OptionSet = {}): posthtml.Node {
+  // Make sure that isJsonScript is used before `isValidScript`. We bail out
+  // early if the ScriptNode is of type="application/json" since it wouldn't
+  // have any src url to modify.
+  if (isJsonScript(node)) {
+    return node;
+  }
+
+  if (!isValidScript(node)) {
+    return node;
+  }
+
+  if (options.compiled) {
+    const src = node.attrs.src;
+    node.attrs.src = src.replace('.js', '.sxg.js');
+  } else {
+    const url = new URL(node.attrs.src);
+    url.searchParams.append('f', 'sxg');
+    node.attrs.src = url.toString();
+  }
+
+  return node;
+}
+
+/**
+ * Returns a function that will transform script node sources into their sxg counterparts.
+ * @param options
+ */
+export default function(options: OptionSet = {}): (tree: posthtml.Node) => void {
+  return function(tree: posthtml.Node) {
+    tree.match({tag: 'script'}, (script) => {
+      return sxgTransform(script, options);
+    });
+  }
+}
diff --git a/build-system/server/new-server/transforms/sxg/test/sxg-env-compiled/input.html b/build-system/server/new-server/transforms/sxg/test/sxg-env-compiled/input.html
new file mode 100644
index 0000000000000..729d094837859
--- /dev/null
+++ b/build-system/server/new-server/transforms/sxg/test/sxg-env-compiled/input.html
@@ -0,0 +1,3 @@
+<head>
+<script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/sxg/test/sxg-env-compiled/options.json b/build-system/server/new-server/transforms/sxg/test/sxg-env-compiled/options.json
new file mode 100644
index 0000000000000..cba50baae4d20
--- /dev/null
+++ b/build-system/server/new-server/transforms/sxg/test/sxg-env-compiled/options.json
@@ -0,0 +1,3 @@
+{
+  "compiled": true
+}
diff --git a/build-system/server/new-server/transforms/sxg/test/sxg-env-compiled/output.html b/build-system/server/new-server/transforms/sxg/test/sxg-env-compiled/output.html
new file mode 100644
index 0000000000000..fd46a3fc83727
--- /dev/null
+++ b/build-system/server/new-server/transforms/sxg/test/sxg-env-compiled/output.html
@@ -0,0 +1,3 @@
+<head>
+<script async="" src="https://cdn.ampproject.org/v0.sxg.js"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/sxg/test/sxg-env/input.html b/build-system/server/new-server/transforms/sxg/test/sxg-env/input.html
new file mode 100644
index 0000000000000..729d094837859
--- /dev/null
+++ b/build-system/server/new-server/transforms/sxg/test/sxg-env/input.html
@@ -0,0 +1,3 @@
+<head>
+<script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/sxg/test/sxg-env/options.json b/build-system/server/new-server/transforms/sxg/test/sxg-env/options.json
new file mode 100644
index 0000000000000..318b3f446efa4
--- /dev/null
+++ b/build-system/server/new-server/transforms/sxg/test/sxg-env/options.json
@@ -0,0 +1,3 @@
+{
+  "compiled": false
+}
diff --git a/build-system/server/new-server/transforms/sxg/test/sxg-env/output.html b/build-system/server/new-server/transforms/sxg/test/sxg-env/output.html
new file mode 100644
index 0000000000000..cec1790a2a64f
--- /dev/null
+++ b/build-system/server/new-server/transforms/sxg/test/sxg-env/output.html
@@ -0,0 +1,3 @@
+<head>
+<script async="" src="https://cdn.ampproject.org/v0.js?f=sxg"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/sxg/test/sxg-query-param/input.html b/build-system/server/new-server/transforms/sxg/test/sxg-query-param/input.html
new file mode 100644
index 0000000000000..985db936a8b95
--- /dev/null
+++ b/build-system/server/new-server/transforms/sxg/test/sxg-query-param/input.html
@@ -0,0 +1,3 @@
+<head>
+<script async src="https://cdn.ampproject.org/v0.js?optin=beta"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/sxg/test/sxg-query-param/options.json b/build-system/server/new-server/transforms/sxg/test/sxg-query-param/options.json
new file mode 100644
index 0000000000000..318b3f446efa4
--- /dev/null
+++ b/build-system/server/new-server/transforms/sxg/test/sxg-query-param/options.json
@@ -0,0 +1,3 @@
+{
+  "compiled": false
+}
diff --git a/build-system/server/new-server/transforms/sxg/test/sxg-query-param/output.html b/build-system/server/new-server/transforms/sxg/test/sxg-query-param/output.html
new file mode 100644
index 0000000000000..ff50be957145c
--- /dev/null
+++ b/build-system/server/new-server/transforms/sxg/test/sxg-query-param/output.html
@@ -0,0 +1,3 @@
+<head>
+<script async="" src="https://cdn.ampproject.org/v0.js?optin=beta&f=sxg"></script>
+</head>
diff --git a/build-system/server/new-server/transforms/transform.ts b/build-system/server/new-server/transforms/transform.ts
index d8954495b15be..0192ac60aebdf 100644
--- a/build-system/server/new-server/transforms/transform.ts
+++ b/build-system/server/new-server/transforms/transform.ts
@@ -14,22 +14,45 @@
  * limitations under the License.
  */
 
-import {promises as fsPromises} from 'fs';
+import fs from 'fs';
 import minimist from 'minimist';
 import posthtml from 'posthtml';
 import transformModules from './modules/modules-transform';
 import transformScriptPaths from './scripts/scripts-transform';
-import transformStories from './stories/stories-transform';
-
-const transforms = [transformStories, transformScriptPaths];
+import transformCss from './css/css-transform';
 
 const argv = minimist(process.argv.slice(2));
-if (argv.esm) {
-  transforms.unshift(transformModules);
+const FOR_TESTING = argv._.includes('integration');
+// Use 9876 if running integration tests as this is the KARMA_SERVER_PORT
+const PORT = FOR_TESTING ? 9876 : (argv.port ?? 8000);
+const ESM = !!argv.esm;
+
+const defaultTransformConfig = {
+  esm: ESM,
+  port: PORT,
+  fortesting: FOR_TESTING,
+  useMaxNames: !argv.compiled,
+};
+
+const transforms = [
+  transformScriptPaths(defaultTransformConfig),
+];
+
+if (ESM) {
+  transforms.unshift(
+    transformCss(),
+    transformModules(defaultTransformConfig),
+  );
 }
 
 export async function transform(fileLocation: string): Promise<string> {
-  const source = await fsPromises.readFile(fileLocation, 'utf8');
+  const source = await fs.promises.readFile(fileLocation, 'utf8');
   const result = await posthtml(transforms).process(source);
   return result.html;
 }
+
+export function transformSync(content: string): string {
+  // @ts-ignore We can only use posthtml's sync API in our Karma preprocessor.
+  // See https://github.com/posthtml/posthtml#api
+  return posthtml(transforms).process(content, {sync: true}).html;
+}
diff --git a/build-system/server/new-server/transforms/tsconfig.json b/build-system/server/new-server/transforms/tsconfig.json
index e462d53846022..5e3e1f059d44a 100644
--- a/build-system/server/new-server/transforms/tsconfig.json
+++ b/build-system/server/new-server/transforms/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compileOnSave": true,
   "compilerOptions": {
-    "lib": ["esnext"],
+    "lib": ["dom", "esnext"],
     "outDir": "dist",
     "sourceMap": true,
     "moduleResolution": "node",
diff --git a/build-system/server/new-server/transforms/utilities/cdn.ts b/build-system/server/new-server/transforms/utilities/cdn.ts
index d3a731634d3c0..a1c65ab192a5b 100644
--- a/build-system/server/new-server/transforms/utilities/cdn.ts
+++ b/build-system/server/new-server/transforms/utilities/cdn.ts
@@ -15,21 +15,48 @@
  */
 
 import {URL} from 'url';
-import {parse, format} from 'path';
+import {parse, format, basename} from 'path';
 
 export const VALID_CDN_ORIGIN = 'https://cdn.ampproject.org';
 
+export const AMP_MAIN_BINARIES_RENAMES = new Map([
+  ['v0', 'amp'],
+  ['f', 'integration'],
+  ['shadow-v0', 'amp-shadow'],
+  ['ampcontext-v0', 'ampcontext-lib'],
+  ['amp4ads-v0', 'amp-inabox'],
+  ['amp4ads-host-v0', 'amp-inabox-host'],
+  ['iframe-transport-client-v0', 'iframe-transform-client-lib'],
+  ['video-iframe-integration-v0', 'video-iframe-integration'],
+  ['amp-story-entry-point-v0', 'amp-story-entry-point'],
+  ['amp-story-player-v0', 'amp-story-player'],
+]);
+
+/**
+ * @param minifiedBasename should be without extension
+ */
+function getMinifiedName(minifiedBasename: string): string {
+  const renamedBasename = AMP_MAIN_BINARIES_RENAMES.get(minifiedBasename);
+  if (renamedBasename) {
+    return renamedBasename;
+  }
+
+  return `${minifiedBasename}.max`;
+}
+
 /**
  * Convert an existing URL to one from the local `serve` command.
  */
 export function CDNURLToLocalDistURL(
   url: URL,
   pathnames: [string | null, string | null] = [null, null],
-  extension: string = '.js'
+  extension: string = '.js',
+  port: number = 8000,
+  useMaxNames = false,
 ): URL {
   url.protocol = 'http';
   url.hostname = 'localhost';
-  url.port = '8000';
+  url.port = String(port);
 
   const [overwriteablePathname, newPathname] = pathnames;
   if (url.pathname === overwriteablePathname && newPathname !== null) {
@@ -37,15 +64,30 @@ export function CDNURLToLocalDistURL(
   }
 
   const parsedPath = parse('/dist' + url.pathname);
+  let curBasename = basename(parsedPath.base, parsedPath.ext);
+  if (useMaxNames) {
+    curBasename = getMinifiedName(curBasename);
+  }
   if (parsedPath.ext !== extension) {
-    parsedPath.base = parsedPath.base.replace(parsedPath.ext, extension);
     parsedPath.ext = extension;
   }
+  parsedPath.base = `${curBasename}${parsedPath.ext}`;
   url.pathname = format(parsedPath);
 
   return url;
 }
 
+export function CDNURLToLocalHostRelativeAbsoluteDist(
+  url: URL,
+  pathnames: [string | null, string | null] = [null, null],
+  extension: string = '.js',
+  port: number = 8000,
+  useMaxNames = false,
+): string {
+  const newUrl = CDNURLToLocalDistURL(url, pathnames, extension, port, useMaxNames);
+  return `${newUrl.pathname}${newUrl.search}${newUrl.hash}`;
+}
+
 /**
  * Convert an existing URL to one from a specific RTV.
  */
@@ -70,3 +112,4 @@ export function CDNURLToRTVURL(
 
   return url;
 }
+
diff --git a/build-system/server/new-server/transforms/utilities/option-set.ts b/build-system/server/new-server/transforms/utilities/option-set.ts
new file mode 100644
index 0000000000000..7ac6f2fd84766
--- /dev/null
+++ b/build-system/server/new-server/transforms/utilities/option-set.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2020 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.
+ */
+
+ /**
+ * A list of options to correspond with options.json for testing purposes.
+ * To add an option, add the corresponding key-value pair into the
+ * options.json, then add the field to this interface.
+ */
+export interface OptionSet {
+  compiled?: boolean;
+  esm?: boolean;
+  port?: number;
+  fortesting?: boolean;
+  looseScriptSrcCheck?: boolean;
+  useMaxNames?: boolean;
+}
diff --git a/build-system/server/new-server/transforms/utilities/script.ts b/build-system/server/new-server/transforms/utilities/script.ts
index a902f2a6fe46c..1234f957b6ad5 100644
--- a/build-system/server/new-server/transforms/utilities/script.ts
+++ b/build-system/server/new-server/transforms/utilities/script.ts
@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import {PostHTML} from 'posthtml';
+import posthtml from 'posthtml';
 import {URL} from 'url';
 import {extname} from 'path';
 import {VALID_CDN_ORIGIN} from './cdn';
+import {parse, format} from 'path';
 
-export interface ScriptNode extends PostHTML.Node {
+export interface ScriptNode extends posthtml.Node {
   tag: 'script';
   attrs: {
     [key: string]: string | undefined;
@@ -27,16 +28,54 @@ export interface ScriptNode extends PostHTML.Node {
   };
 }
 
+const VALID_SCRIPT_EXTENSIONS = ['.js', '.mjs'];
+
+function isValidScriptExtension(url: URL): boolean {
+  return VALID_SCRIPT_EXTENSIONS.includes(extname(url.pathname));
+}
+
 /**
  * Determines if a Node is really a ScriptNode.
  * @param node
  */
-export function isValidScript(node: PostHTML.Node): node is ScriptNode {
+export function isValidScript(node: posthtml.Node, looseScriptSrcCheck?: boolean): node is ScriptNode {
   if (node.tag !== 'script') {
     return false;
   }
 
   const attrs = node.attrs || {};
-  const src = new URL(attrs.src || '');
-  return src.origin === VALID_CDN_ORIGIN && extname(src.pathname) === '.js';
+  const url = tryGetUrl(attrs.src || '');
+  if (looseScriptSrcCheck) {
+    return isValidScriptExtension(url);
+  }
+  return url.origin === VALID_CDN_ORIGIN && isValidScriptExtension(url);
+}
+
+export function isJsonScript(node: posthtml.Node): boolean {
+  if (node.tag !== 'script') {
+    return false;
+  }
+  const attrs = node.attrs || {};
+  const type = attrs.type || '';
+  return type.toLowerCase() === 'application/json';
+}
+
+/**
+ * Transforms a url's extension type to the desired type.
+ * ex. v0.js -> v0.mjs
+ */
+export function toExtension(url: URL, extension: string): URL {
+  const parsedPath = parse(url.pathname);
+  parsedPath.base = parsedPath.base.replace(parsedPath.ext, extension);
+  parsedPath.ext = extension;
+  url.pathname = format(parsedPath);
+  return url;
+}
+
+/**
+ * This is a temporary measure to allow for a relaxed parsing of our
+ * fixture files' src urls before they are all fixed accordingly.
+ */
+export function tryGetUrl(src: string, host: string = '0.0.0.0', port: number = 8000): URL {
+  return new URL(src, `http://${host}:${port}`);
 }
diff --git a/build-system/server/recaptcha-router.js b/build-system/server/recaptcha-router.js
index 9f4946b09abe4..126edfc6727c2 100644
--- a/build-system/server/recaptcha-router.js
+++ b/build-system/server/recaptcha-router.js
@@ -44,7 +44,7 @@ const recaptchaFrameRequestHandler = (req, res, next) => {
   }
 };
 
-recaptchaRouter.get('/mock.js', (req, res) => {
+recaptchaRouter.get('/mock.js', (_req, res) => {
   res.end(recaptchaMock);
 });
 
diff --git a/build-system/server/routes/a4a-envelopes.js b/build-system/server/routes/a4a-envelopes.js
index 0912d73298458..ac097498467a1 100644
--- a/build-system/server/routes/a4a-envelopes.js
+++ b/build-system/server/routes/a4a-envelopes.js
@@ -14,89 +14,93 @@
  * limitations under the License.
  */
 
-const app = require('express').Router();
+const express = require('express');
+const fetch = require('node-fetch');
 const fs = require('fs');
-const log = require('fancy-log');
-const request = require('request');
 const {getServeMode, replaceUrls} = require('../app-utils');
-const {red} = require('ansi-colors');
+const {log} = require('../../common/logging');
+const {red} = require('../../common/colors');
+
+const app = express.Router();
 
 // In-a-box envelope.
 // Examples:
 // http://localhost:8000/inabox/examples/animations.amp.html
 // http://localhost:8000/inabox/proxy/s/www.washingtonpost.com/amphtml/news/post-politics/wp/2016/02/21/bernie-sanders-says-lower-turnout-contributed-to-his-nevada-loss-to-hillary-clinton/
-app.use(['/inabox', '/inabox-mraid'], (req, res) => {
+app.use(['/inabox', '/inabox-mraid'], async (req, res) => {
   const templatePath =
     process.cwd() + '/build-system/server/server-inabox-template.html';
-  fs.promises.readFile(templatePath, 'utf8').then((template) => {
-    template = template.replace(/SOURCE/g, 'AD_URL');
-    if (req.baseUrl == '/inabox-mraid') {
-      // MRAID does not load amp4ads-host-v0.js
-      template = template.replace('INABOX_ADS_TAG_INTEGRATION', '');
-    }
-    const url = getInaboxUrl(req);
-    res.end(fillTemplate(template, url.href, req.query));
-  });
+  let template = await fs.promises.readFile(templatePath, 'utf8');
+  template = template.replace(/SOURCE/g, 'AD_URL');
+  if (req.baseUrl == '/inabox-mraid') {
+    // MRAID does not load amp4ads-host-v0.js
+    template = template.replace('INABOX_ADS_TAG_INTEGRATION', '');
+  }
+  const url = getInaboxUrl(req);
+  res.end(fillTemplate(template, url.href, req.query));
 });
 
 // In-a-box friendly iframe and safeframe envelope.
 // Examples:
 // http://localhost:8000/inabox-friendly/examples/animations.amp.html
 // http://localhost:8000/inabox-friendly/proxy/s/www.washingtonpost.com/amphtml/news/post-politics/wp/2016/02/21/bernie-sanders-says-lower-turnout-contributed-to-his-nevada-loss-to-hillary-clinton/
-app.use('/inabox-(friendly|safeframe)', (req, res) => {
+app.use('/inabox-(friendly|safeframe)', async (req, res) => {
   const templatePath = '/build-system/server/server-inabox-template.html';
-  fs.promises
-    .readFile(process.cwd() + templatePath, 'utf8')
-    .then((template) => {
-      const url = getInaboxUrl(req);
-      if (req.baseUrl == '/inabox-friendly') {
-        template = template
-          .replace('SRCDOC_ATTRIBUTE', 'srcdoc="BODY"')
-          .replace('INABOX_ADS_TAG_INTEGRATION', '');
-      } else {
-        template = template
-          .replace(
-            /NAME/g,
-            '1-0-31;LENGTH;BODY{&quot;uid&quot;:&quot;test&quot;}'
-          )
-          .replace(
-            /SOURCE/g,
-            url.origin + '/test/fixtures/served/iframe-safeframe.html'
-          );
-      }
-      return requestFromUrl(template, url.href, req.query);
-    })
-    .then((result) => {
-      res.end(result);
-    })
-    .catch((err) => {
-      log(red('Error:'), err);
-      res.status(500);
-      res.end();
-    });
+  try {
+    let template = await fs.promises.readFile(
+      process.cwd() + templatePath,
+      'utf8'
+    );
+
+    const url = getInaboxUrl(req);
+    if (req.baseUrl == '/inabox-friendly') {
+      template = template
+        .replace('SRCDOC_ATTRIBUTE', 'srcdoc="BODY"')
+        .replace('INABOX_ADS_TAG_INTEGRATION', '');
+    } else {
+      template = template
+        .replace(
+          /NAME/g,
+          '1-0-31;LENGTH;BODY{&quot;uid&quot;:&quot;test&quot;}'
+        )
+        .replace(
+          /SOURCE/g,
+          url.origin + '/test/fixtures/served/iframe-safeframe.html'
+        );
+    }
+    const result = await requestFromUrl(template, url.href, req.query);
+    res.end(result);
+  } catch (err) {
+    log(red('Error:'), err);
+    res.status(500);
+    res.end();
+  }
 });
 
 // A4A envelope.
 // Examples:
 // http://localhost:8000/a4a[-3p]/examples/animations.amp.html
 // http://localhost:8000/a4a[-3p]/proxy/s/www.washingtonpost.com/amphtml/news/post-politics/wp/2016/02/21/bernie-sanders-says-lower-turnout-contributed-to-his-nevada-loss-to-hillary-clinton/
-app.use('/a4a(|-3p)/', (req, res) => {
+app.use('/a4a(|-3p)/', async (req, res) => {
   const force3p = req.baseUrl.startsWith('/a4a-3p');
   const templatePath = '/build-system/server/server-a4a-template.html';
   const url = getInaboxUrl(req);
-  fs.promises
-    .readFile(process.cwd() + templatePath, 'utf8')
-    .then((template) => {
-      const content = fillTemplate(template, url.href, req.query)
-        .replace(/CHECKSIG/g, force3p || '')
-        .replace(/DISABLE3PFALLBACK/g, !force3p);
-      res.end(replaceUrls(getServeMode(), content));
-    });
+  const template = await fs.promises.readFile(
+    process.cwd() + templatePath,
+    'utf8'
+  );
+  const branchLevelExperiments = req.query.eid;
+
+  const content = fillTemplate(template, url.href, req.query)
+    .replace(/CHECKSIG/g, force3p || '')
+    .replace(/DATAEXPERIMENTIDS/, branchLevelExperiments || '')
+    .replace(/DISABLE3PFALLBACK/g, (!force3p).toString());
+  res.end(replaceUrls(getServeMode(), content));
 });
 
 /**
- * @param {Request} req
- * @param {string|undefined} extraExperiment
+ * @param {express.Request} req
+ * @param {string=} extraExperiment
  * @return {!URL}
  */
 function getInaboxUrl(req, extraExperiment) {
@@ -137,23 +141,15 @@ function getInaboxUrl(req, extraExperiment) {
  * @param {Object} query
  * @return {!Promise<?string>}
  */
-function requestFromUrl(template, url, query) {
-  return new Promise((resolve, reject) => {
-    request(url, (error, response, body) => {
-      if (error) {
-        reject(error);
-        return;
-      }
-      if (
-        !response.headers['content-type'] ||
-        response.headers['content-type'].startsWith('text/html')
-      ) {
-        resolve(fillTemplate(template, url, query, body));
-      } else {
-        resolve(null);
-      }
-    });
-  });
+async function requestFromUrl(template, url, query) {
+  const response = await fetch(url);
+  if (
+    !response.headers.has('Content-Type') ||
+    response.headers.get('Content-Type').startsWith('text/html')
+  ) {
+    return fillTemplate(template, url, query, await response.text());
+  }
+  return null;
 }
 
 /**
@@ -161,7 +157,7 @@ function requestFromUrl(template, url, query) {
  * @param {string} template
  * @param {string} url
  * @param {Object} query
- * @param {string|undefined} body
+ * @param {string=} body
  * @return {string}
  */
 function fillTemplate(template, url, query, body) {
@@ -178,8 +174,8 @@ function fillTemplate(template, url, query, body) {
   }
   return (
     template
-      .replace(/BODY/g, newBody)
-      .replace(/LENGTH/g, length)
+      .replace(/BODY/g, newBody ?? '')
+      .replace(/LENGTH/g, length.toString())
       .replace(/AD_URL/g, url)
       .replace(/OFFSET/g, query.offset || '0px')
       .replace(/AD_WIDTH/g, query.width || '300')
diff --git a/build-system/server/routes/list.js b/build-system/server/routes/list.js
index 33d064e22b32a..964820635c78b 100644
--- a/build-system/server/routes/list.js
+++ b/build-system/server/routes/list.js
@@ -175,7 +175,7 @@ router.get('/infinite-scroll-state', function (req, res) {
   res.json(results);
 });
 
-router.get('/ecommerce-nested-menu', function (req, res) {
+router.get('/ecommerce-nested-menu', function (_req, res) {
   res.json({
     'menu': [
       {
diff --git a/build-system/server/routes/test.js b/build-system/server/routes/test.js
index 98a09876d0165..e1dec034813af 100644
--- a/build-system/server/routes/test.js
+++ b/build-system/server/routes/test.js
@@ -24,7 +24,11 @@ router.use('/form/post/success', function (req, res) {
   });
 });
 
-router.use('/date-picker/config.json', (req, res) => {
+router.use('/date-picker/config.json', (_req, res) => {
+  /**
+   * @param {Date} date
+   * @return {string}
+   */
   function getISO8601Date(date) {
     const year = date.toLocaleString('en-US', {year: 'numeric'});
     const month = date.toLocaleString('en-US', {month: '2-digit'});
diff --git a/build-system/server/server-a4a-template.html b/build-system/server/server-a4a-template.html
index f2044243e18a5..4b45e95f2d461 100644
--- a/build-system/server/server-a4a-template.html
+++ b/build-system/server/server-a4a-template.html
@@ -7,10 +7,16 @@
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+  <style amp-custom>
+    #ad-url {
+      height: 18px;
+      overflow: hidden;
+    }
+  </style>
 </head>
 <body>
   <h1 id="title">A4A Envelope</h1>
-  <div>url: AD_URL</div>
+  <div id="ad-url">url: AD_URL</div>
   <div>size: AD_WIDTHxAD_HEIGHT</div>
 
   <div style="background: #eee; overflow: hidden; height: OFFSET;">scroll down to see the ad</div>
@@ -22,6 +28,7 @@ <h1 id="title">A4A Envelope</h1>
       a4a-conversion="true"
       checksig="CHECKSIG"
       disable3pfallback="DISABLE3PFALLBACK"
+      data-experiment-id="DATAEXPERIMENTIDS"
       src="AD_URL">
   </amp-ad>
 
diff --git a/build-system/server/shadow-viewer.js b/build-system/server/shadow-viewer.js
index 198419bea1222..03a1c3478beb0 100644
--- a/build-system/server/shadow-viewer.js
+++ b/build-system/server/shadow-viewer.js
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 /* eslint-disable local/html-template */
-/* eslint-disable indent */
 
 const {html} = require('./app-index/html');
 
@@ -144,7 +143,7 @@ const SCRIPT = `
 };
 `;
 
-const renderShadowViewer = ({src, baseHref}) =>
+const renderShadowViewer = ({baseHref, src}) =>
   html`
     <!DOCTYPE html>
     <html>
diff --git a/build-system/server/test-server.js b/build-system/server/test-server.js
index 86bfddab756cd..cf39a5ac53316 100644
--- a/build-system/server/test-server.js
+++ b/build-system/server/test-server.js
@@ -19,11 +19,18 @@
  * @fileoverview Creates an http server to handle responses for different test
  * cases.
  */
-const app = require('express')();
 const bodyParser = require('body-parser');
+const express = require('express');
+const app = express();
 
 app.use(bodyParser.json());
 
+/**
+ *
+ * @param {express.Request} req
+ * @param {express.Response} res
+ * @param {express.NextFunction} next
+ */
 function setCorsHeaders(req, res, next) {
   res.setHeader('Access-Control-Allow-Credentials', 'true');
   res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*');
@@ -44,11 +51,11 @@ app.use('/redirect-to', function (req, res) {
   res.redirect(302, req.query.url);
 });
 
-app.use('/status/404', function (req, res) {
+app.use('/status/404', function (_req, res) {
   res.status(404).end();
 });
 
-app.use('/status/500', function (req, res) {
+app.use('/status/500', function (_req, res) {
   res.status(500).end();
 });
 
@@ -101,7 +108,7 @@ app.use('/form/post', function (req, res) {
   });
 });
 
-app.use('/form/verify-error', function (req, res) {
+app.use('/form/verify-error', function (_req, res) {
   res.status(400).json({
     verifyErrors: [{name: 'email', message: 'That email is already taken.'}],
   });
diff --git a/build-system/server/typescript-compile.js b/build-system/server/typescript-compile.js
new file mode 100644
index 0000000000000..6a4b9e3309933
--- /dev/null
+++ b/build-system/server/typescript-compile.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright 2020 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.
+ */
+const esbuild = require('esbuild');
+const globby = require('globby');
+const path = require('path');
+const {cyan, green} = require('../common/colors');
+const {endBuildStep} = require('../tasks/helpers');
+const {exec} = require('../common/exec');
+const {log} = require('../common/logging');
+
+const SERVER_TRANSFORM_PATH = 'build-system/server/new-server/transforms';
+const CONFIG_PATH = `${SERVER_TRANSFORM_PATH}/tsconfig.json`;
+
+/**
+ * Builds the new server by converting typescript transforms to JS. This JS
+ * output is not type-checked as part of `amp check-build-system`.
+ * @return {Promise<void>}
+ */
+async function buildNewServer() {
+  log(
+    green('Building'),
+    cyan('AMP Server'),
+    green('at'),
+    cyan(`${SERVER_TRANSFORM_PATH}/dist`) + green('...')
+  );
+  const entryPoints = globby.sync(`${SERVER_TRANSFORM_PATH}/**/*.ts`);
+  const startTime = Date.now();
+  await esbuild.build({
+    entryPoints,
+    outdir: path.join(SERVER_TRANSFORM_PATH, 'dist'),
+    bundle: false,
+    banner: {js: '// @ts-nocheck'},
+    tsconfig: CONFIG_PATH,
+    format: 'cjs',
+  });
+  endBuildStep('Built', 'AMP Server', startTime);
+}
+
+/**
+ * Checks all types in the generated output after running server transforms.
+ */
+function typecheckNewServer() {
+  const cmd = `npx -p typescript tsc --noEmit -p ${CONFIG_PATH}`;
+  const result = exec(cmd, {'stdio': ['inherit', 'inherit', 'pipe']});
+
+  if (result.status != 0) {
+    throw new Error(`Typechecking AMP Server failed.`);
+  }
+}
+
+module.exports = {
+  buildNewServer,
+  typecheckNewServer,
+  SERVER_TRANSFORM_PATH,
+};
diff --git a/build-system/server/variable-substitution.js b/build-system/server/variable-substitution.js
index 0dae1fbfc80db..9a5130af14c73 100644
--- a/build-system/server/variable-substitution.js
+++ b/build-system/server/variable-substitution.js
@@ -18,6 +18,10 @@ let url;
 let variableSubstitution;
 let variables;
 
+/**
+ * @param {*} req require('express').Request
+ * @param {*} res require('express').Response
+ */
 function saveVariables(req, res) {
   const requestVariables = {};
   // For when a JSON is entered
@@ -30,7 +34,7 @@ function saveVariables(req, res) {
       <html>
       <head>
           <title>AMP Analytics</title>
-      </head> 
+      </head>
       <body>
       <p>Error:</p>
       ${e}
@@ -52,6 +56,10 @@ function saveVariables(req, res) {
   return;
 }
 
+/**
+ * @param {*} req require('express').Request
+ * @param {*} res require('express').Response
+ */
 function runVariableSubstitution(req, res) {
   variables = variables || {};
   // Don't include the incremented number sent in to make a new request
@@ -70,9 +78,9 @@ function runVariableSubstitution(req, res) {
       <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>
       <script async src="https://cdn.ampproject.org/v0.js"></script>
       <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
-    </head> 
+    </head>
     <body>
-    
+
     <h3>'<amp-analytics>' request: </h3>
       ${
         testParameters
@@ -105,6 +113,10 @@ function runVariableSubstitution(req, res) {
     </html>`);
 }
 
+/**
+ * @param {*} req require('express').Request
+ * @param {*} res require('express').Response
+ */
 function saveVariableRequest(req, res) {
   res.setHeader('Access-Control-Allow-Credentials', true);
   res.setHeader('Access-Control-Allow-Origin', '*');
@@ -114,7 +126,11 @@ function saveVariableRequest(req, res) {
   url = req.originalUrl;
 }
 
-function getVariableRequest(req, res) {
+/**
+ * @param {*} _req require('express').Request
+ * @param {*} res require('express').Response
+ */
+function getVariableRequest(_req, res) {
   res.json({'Results': variableSubstitution, 'URL': url});
   return;
 }
diff --git a/build-system/task-runner/OWNERS b/build-system/task-runner/OWNERS
new file mode 100644
index 0000000000000..002922bb9cc93
--- /dev/null
+++ b/build-system/task-runner/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'ampproject/wg-infra'}, {name: 'rsimha', notify: true}],
+    },
+  ],
+}
diff --git a/build-system/task-runner/amp-cli-runner.js b/build-system/task-runner/amp-cli-runner.js
new file mode 100755
index 0000000000000..e3bcdfc166ad0
--- /dev/null
+++ b/build-system/task-runner/amp-cli-runner.js
@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+/**
+ * Copyright 2021 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';
+
+/**
+ * @fileoverview This is the `amp` CLI runner executable that is installed to
+ * the global node directory. It invokes the repo-local `amp` task runner, and
+ * makes it possible for multiple local repo copies to share one globally
+ * installed runner executable.
+ */
+
+const childProcess = require('child_process');
+const path = require('path');
+
+/**
+ * Returns the current git repo's root directory if we are inside one.
+ * @return {string|undefined}
+ */
+function getRepoRoot() {
+  const repoRootCmd = 'git rev-parse --show-toplevel';
+  const spawnOptions = {
+    shell: process.platform == 'win32' ? 'cmd' : '/bin/bash',
+    encoding: 'utf-8',
+  };
+  const result = childProcess.spawnSync(repoRootCmd, spawnOptions);
+  return result.status == 0 ? result.stdout.trim() : undefined;
+}
+
+/**
+ * Invokes the repo-local `amp` task runner if we are inside a git repository.
+ */
+function invokeAmpTaskRunner() {
+  const repoRoot = getRepoRoot();
+  if (repoRoot) {
+    require(path.join(repoRoot, 'amp.js'));
+  } else {
+    console.log('\x1b[31mERROR:\x1b[0m Not inside a git repo');
+  }
+}
+
+invokeAmpTaskRunner();
diff --git a/build-system/task-runner/amp-task-runner.js b/build-system/task-runner/amp-task-runner.js
new file mode 100644
index 0000000000000..9e0a394577a22
--- /dev/null
+++ b/build-system/task-runner/amp-task-runner.js
@@ -0,0 +1,250 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview This is a lightweight task runner with a one-file implentation
+ * based on the commander npm package.
+ */
+
+const argv = require('minimist')(process.argv.slice(2));
+const commander = require('commander');
+const fs = require('fs-extra');
+const os = require('os');
+const path = require('path');
+const {
+  updatePackages,
+  updateSubpackages,
+} = require('../common/update-packages');
+const {cyan, green, magenta, red} = require('../common/colors');
+const {isCiBuild} = require('../common/ci');
+const {log} = require('../common/logging');
+
+/**
+ * Special-case constant that indicates if `amp --help` was invoked.
+ */
+const isHelpTask = argv._.length == 0 && argv.hasOwnProperty('help');
+
+/**
+ * Calculates and formats the duration for which an AMP task ran.
+ * @param {DOMHighResTimeStamp} start
+ * @return {string}
+ */
+function getTime(start) {
+  const endTime = Date.now();
+  const executionTime = endTime - start;
+  const mins = Math.floor(executionTime / 60000);
+  const secs = Math.floor((executionTime % 60000) / 1000);
+  const msecs = executionTime % 1000;
+  return mins !== 0
+    ? `${mins}m ${secs}s`
+    : secs != 0
+    ? `${secs}s`
+    : `${msecs}ms`;
+}
+
+/**
+ * Switches the current directory to the repo root if needed. This is done so
+ * that hard-coded paths within tasks can work predictably.
+ */
+function startAtRepoRoot() {
+  const repoRoot = path.resolve(__dirname, '..', '..');
+  if (repoRoot != process.cwd()) {
+    process.chdir(repoRoot);
+    log('Working directory changed to', magenta(path.basename(repoRoot)));
+  }
+}
+
+/**
+ * Updates task-specific subpackages if there are any.
+ * @param {string} taskSourceFilePath
+ * @return {Promise<void>}
+ */
+async function maybeUpdateSubpackages(taskSourceFilePath) {
+  const packageFile = path.join(taskSourceFilePath, 'package.json');
+  const hasSubpackages = await fs.pathExists(packageFile);
+  if (hasSubpackages) {
+    await updateSubpackages(taskSourceFilePath);
+  }
+}
+
+/**
+ * Runs an AMP task with logging and timing after installing its subpackages.
+ * @param {string} taskName
+ * @param {string} taskSourceFileName
+ * @param {Function()} taskFunc
+ * @return {Promise<void>}
+ */
+async function runTask(taskName, taskSourceFileName, taskFunc) {
+  const taskFile = path.relative(os.homedir(), 'amp.js');
+  log('Using task file', magenta(taskFile));
+  const start = Date.now();
+  try {
+    log(`Starting '${cyan(taskName)}'...`);
+    await maybeUpdateSubpackages(getTaskSourceFilePath(taskSourceFileName));
+    await taskFunc();
+    log('Finished', `'${cyan(taskName)}'`, 'after', magenta(getTime(start)));
+  } catch (err) {
+    log(`'${cyan(taskName)}'`, red('errored after'), magenta(getTime(start)));
+    log(err);
+    process.exit(1);
+  }
+}
+
+/**
+ * Prints an error if the task file and / or function are invalid, and exits.
+ * @param {string} taskSourceFileName
+ * @param {string?} taskFuncName
+ */
+function handleInvalidTaskError(taskSourceFileName, taskFuncName) {
+  log(
+    red('ERROR:'),
+    'Could not find' + (taskFuncName ? ` ${cyan(taskFuncName + '()')} in` : ''),
+    cyan(path.join('build-system', 'tasks', taskSourceFileName)) + '.'
+  );
+  log(
+    '⤷ Please check the arguments to',
+    cyan('createTask()'),
+    'in',
+    cyan('amp.js') + '.'
+  );
+  process.exit(1);
+}
+
+/**
+ * Returns a task's source file path after making sure it is either a valid JS
+ * file or a valid dir.
+ * @param {string} taskSourceFileName
+ * @return {string}
+ */
+function getTaskSourceFilePath(taskSourceFileName) {
+  const tasksDir = path.join(__dirname, '..', 'tasks');
+  const taskSourceFilePath = path.join(tasksDir, taskSourceFileName);
+  const isValidSourceFilePath =
+    fs.pathExistsSync(`${taskSourceFilePath}.js`) || // Task lives in a JS file.
+    fs.pathExistsSync(taskSourceFilePath); // Task lives in a directory.
+  if (!isValidSourceFilePath) {
+    handleInvalidTaskError(taskSourceFileName);
+  }
+  return taskSourceFilePath;
+}
+
+/**
+ * Returns a task function after making sure it is valid.
+ * @param {string} taskSourceFileName
+ * @param {string} taskFuncName
+ * @return {Function():any}
+ */
+function getTaskFunc(taskSourceFileName, taskFuncName) {
+  const taskSourceFilePath = getTaskSourceFilePath(taskSourceFileName);
+  const taskFunc = require(taskSourceFilePath)[taskFuncName];
+  const isValidFunc = typeof taskFunc == 'function';
+  if (!isValidFunc) {
+    handleInvalidTaskError(taskSourceFileName, taskFuncName);
+  }
+  return taskFunc;
+}
+
+/**
+ * Helper that creates the tasks in AMP's toolchain based on the invocation:
+ * - For `amp --help`, load all task descriptions so a list can be printed.
+ * - For `amp <task> --help`, load and print just the task description + flags.
+ * - When a task is actually run, update root packages, load the entry point,
+ *   validate usage, update task-specific packages, and run the task.
+ * @param {string} taskName
+ * @param {string=} taskFuncName
+ * @param {string=} taskSourceFileName
+ */
+function createTask(
+  taskName,
+  taskFuncName = taskName,
+  taskSourceFileName = taskName
+) {
+  const isInvokedTask = argv._.includes(taskName); // `amp <task>`
+  const isDefaultTask =
+    argv._.length === 0 && taskName == 'default' && !isHelpTask; // `amp`
+  const isTaskLevelHelp =
+    (isInvokedTask || isDefaultTask) && argv.hasOwnProperty('help'); // `amp <task> --help`
+
+  if (isHelpTask) {
+    const taskFunc = getTaskFunc(taskSourceFileName, taskFuncName);
+    const task = commander.command(cyan(taskName));
+    task.description(taskFunc.description);
+  }
+  if (isInvokedTask || isDefaultTask) {
+    startAtRepoRoot();
+    if (!isTaskLevelHelp && !isCiBuild()) {
+      updatePackages();
+    }
+    const taskFunc = getTaskFunc(taskSourceFileName, taskFuncName);
+    const task = commander.command(taskName, {isDefault: isDefaultTask});
+    task.description(green(taskFunc.description));
+    task.allowUnknownOption(); // Fall through to validateUsage()
+    task.helpOption('--help', 'Print this list of flags');
+    task.usage('<flags>');
+    for (const [flag, description] of Object.entries(taskFunc.flags ?? {})) {
+      task.option(`--${cyan(flag)}`, description);
+    }
+    task.action(async () => {
+      validateUsage(task, taskName, taskFunc);
+      await runTask(taskName, taskSourceFileName, taskFunc);
+    });
+  }
+}
+
+/**
+ * Validates usage by examining task and flag invocation.
+ * @param {Object} task
+ * @param {string} taskName
+ * @param {function} taskFunc
+ */
+function validateUsage(task, taskName, taskFunc) {
+  const tasks = argv._;
+  const invalidTasks = tasks.filter((task) => task != taskName);
+
+  const flags = Object.keys(argv).slice(1); // Everything after '_'
+  const validFlags = taskFunc.flags ? Object.keys(taskFunc.flags) : [];
+  const invalidFlags = flags.filter((flag) => !validFlags.includes(flag));
+
+  if (invalidTasks.length > 0 || invalidFlags.length > 0) {
+    task.addHelpText('before', red('ERROR: ') + 'Invalid usage');
+    task.help({error: true});
+  }
+}
+
+/**
+ * Finalizes the task runner by doing special-case setup for `amp --help`,
+ * parsing the invoked command, and printing an error message if an unknown task
+ * was called.
+ */
+function finalizeRunner() {
+  commander.addHelpCommand(false); // We already have `amp --help` and `amp <task> --help`
+  if (isHelpTask) {
+    commander.helpOption('--help', 'Print this list of tasks');
+    commander.usage('<task> <flags>');
+  }
+  commander.on('command:*', (args) => {
+    log(red('ERROR:'), 'Unknown task', cyan(args.join(' ')));
+    log('⤷ Run', cyan('amp --help'), 'for a full list of tasks.');
+    log('⤷ Run', cyan('amp <task> --help'), 'for help with a specific task.');
+    process.exitCode = 1;
+  });
+  commander.parse();
+}
+
+module.exports = {
+  createTask,
+  finalizeRunner,
+};
diff --git a/build-system/task-runner/install-amp-task-runner.js b/build-system/task-runner/install-amp-task-runner.js
new file mode 100644
index 0000000000000..8a3198b806235
--- /dev/null
+++ b/build-system/task-runner/install-amp-task-runner.js
@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+/**
+ * Copyright 2021 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';
+
+/**
+ * @fileoverview Installs the amp task runner.
+ */
+
+const fs = require('fs-extra');
+const path = require('path');
+const {cyan, green, yellow} = require('../common/colors');
+const {getStdout} = require('../common/process');
+const {logWithoutTimestamp: log} = require('../common/logging');
+
+const ampCliRunner = 'build-system/task-runner/amp-cli-runner.js';
+
+/**
+ * Installs the `amp` task runner to the npm bin directory if it hasn't already
+ * been installed. Ensures that the binary exists and is a node runner script.
+ */
+async function installAmpTaskRunner() {
+  const npmBinDir = getStdout('npm bin --global').trim();
+  const ampBinary = path.join(npmBinDir, 'amp');
+  const ampBinaryExists = await fs.pathExists(ampBinary);
+  if (ampBinaryExists) {
+    const ampBinaryIsAScript = !(await fs.lstat(ampBinary)).isSymbolicLink();
+    if (ampBinaryIsAScript) {
+      log(green('Detected'), cyan('amp'), green('task runner.'));
+      return;
+    }
+  }
+  log(yellow('Installing'), cyan('amp'), yellow('task runner...'));
+  await fs.remove(ampBinary);
+  await fs.copy(ampCliRunner, ampBinary);
+  log(green('Installed'), cyan('amp'), green('task runner.\n'));
+}
+
+installAmpTaskRunner();
diff --git a/build-system/tasks/3p-vendor-helpers.js b/build-system/tasks/3p-vendor-helpers.js
new file mode 100644
index 0000000000000..71617e1419a19
--- /dev/null
+++ b/build-system/tasks/3p-vendor-helpers.js
@@ -0,0 +1,145 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const debounce = require('debounce');
+const globby = require('globby');
+const {compileJsWithEsbuild} = require('./helpers');
+const {cyan, red} = require('../common/colors');
+const {endBuildStep} = require('./helpers');
+const {VERSION} = require('../compile/internal-version');
+const {watchDebounceDelay} = require('./helpers');
+const {watch} = require('chokidar');
+
+const SRCPATH = ['3p/vendors/*.js'];
+
+/**
+ * Entry point for 'amp ad-vendor-configs'
+ * Compile all the vendor configs and drop in the dist folder
+ * @param {!Object} options
+ * @return {!Promise}
+ */
+async function buildVendorConfigs(options) {
+  options = options || {};
+
+  const destPath = 'dist.3p/';
+
+  if (options.watch) {
+    // Do not set watchers again when we get called by the watcher.
+    const copyOptions = {...options, watch: false, calledByWatcher: true};
+    const watchFunc = () => {
+      buildVendorConfigs(copyOptions);
+    };
+    watch(SRCPATH).on('change', debounce(watchFunc, watchDebounceDelay));
+  }
+
+  const startTime = Date.now();
+  const bundles = generateBundles();
+
+  await Promise.all(
+    Object.values(bundles).map((bundle) =>
+      compileJsWithEsbuild(
+        bundle.srcDir,
+        bundle.srcFilename,
+        options.minify ? bundle.minifiedDestDir : bundle.destDir,
+        {...bundle.options, ...options}
+      )
+    )
+  );
+
+  endBuildStep(
+    (options.minify ? 'Minified' : 'Compiled') +
+      ' all 3p iframe vendor configs into',
+    destPath,
+    startTime
+  );
+}
+
+/**
+ * Build the JavaScript for the vendor specified for lazy building.
+ *
+ * @param {!Object} jsBundles
+ * @param {string} name
+ * @param {?Object} options
+ * @return {!Promise}
+ */
+async function doBuild3pVendor(jsBundles, name, options) {
+  const target = jsBundles[name];
+  if (target) {
+    return compileJsWithEsbuild(
+      target.srcDir,
+      target.srcFilename,
+      options.minify ? target.minifiedDestDir : target.destDir,
+      {...target.options, ...options}
+    );
+  } else {
+    return Promise.reject(
+      [red('Error:'), 'Could not find', cyan(name)].join(' ')
+    );
+  }
+}
+
+/**
+ * Generate bundles for all 3p vendors to be built.
+ * @return {Object}
+ */
+function generateBundles() {
+  const bundles = {};
+  listVendors().forEach((vendor) => {
+    bundles[`${vendor}`] = {
+      srcDir: './3p/vendors/',
+      srcFilename: `${vendor}.js`,
+      destDir: './dist.3p/current/vendor/',
+      minifiedDestDir: `./dist.3p/${VERSION}/vendor/`,
+      options: {
+        include3pDirectories: true,
+        includePolyfills: true,
+        externs: ['./ads/ads.extern.js'],
+        toName: `${vendor}.max.js`,
+        minifiedName: `${vendor}.js`,
+      },
+    };
+  });
+  return bundles;
+}
+
+/**
+ * Return all 3p iframe vendors' names.
+ * @return {!Array<string>}
+ */
+function listVendors() {
+  const filesToBuild = globby.sync(SRCPATH);
+  const srcMatcher = /^3p\/vendors\/(.*)\.js/;
+  const results = [];
+
+  for (const index in filesToBuild) {
+    const src = filesToBuild[index];
+    const match = src.match(srcMatcher);
+    if (!match || match.length != 2) {
+      throw new Error(`${src} is not a valid 3p vendor path`);
+    }
+
+    // Extract vendor file name
+    const name = match[1];
+    results.push(name);
+  }
+  return results;
+}
+
+module.exports = {
+  buildVendorConfigs,
+  doBuild3pVendor,
+  generateBundles,
+};
diff --git a/build-system/tasks/OWNERS b/build-system/tasks/OWNERS
index 32c5ea6d75438..48c410b7bfc7c 100644
--- a/build-system/tasks/OWNERS
+++ b/build-system/tasks/OWNERS
@@ -1,10 +1,14 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [{name: 'ampproject/wg-infra'}],
     },
+    {
+      pattern: 'check-types.js',
+      owners: [{name: 'ampproject/wg-performance'}],
+    },
   ],
 }
diff --git a/build-system/tasks/a4a.js b/build-system/tasks/a4a.js
deleted file mode 100644
index 257ff3e0a0071..0000000000000
--- a/build-system/tasks/a4a.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * 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 argv = require('minimist')(process.argv.slice(2));
-const {
-  maybePrintArgvMessages,
-  shouldNotRun,
-} = require('./runtime-test/helpers');
-const {
-  RuntimeTestRunner,
-  RuntimeTestConfig,
-} = require('./runtime-test/runtime-test-base');
-const {css} = require('./css');
-
-class Runner extends RuntimeTestRunner {
-  constructor(config) {
-    super(config);
-  }
-
-  /** @override */
-  async maybeBuild() {
-    if (argv.nobuild) {
-      return;
-    }
-
-    await css();
-  }
-}
-
-async function a4a() {
-  if (shouldNotRun()) {
-    return;
-  }
-
-  maybePrintArgvMessages();
-
-  const config = new RuntimeTestConfig('a4a');
-  const runner = new Runner(config);
-
-  await runner.setup();
-  await runner.run();
-  await runner.teardown();
-}
-
-module.exports = {
-  a4a,
-};
-
-a4a.description = 'Runs a4a tests';
-a4a.flags = {
-  'chrome_canary': '  Runs tests on Chrome Canary',
-  'chrome_flags': '  Uses the given flags to launch Chrome',
-  'firefox': '  Runs tests on Firefox',
-  'files': '  Runs tests for specific files',
-  'grep': '  Runs tests that match the pattern',
-  'headless': '  Run tests in a headless Chrome window',
-  'ie': '  Runs tests on IE',
-  'nobuild': '  Skips build step',
-  'nohelp': '  Silence help messages that are printed prior to test run',
-  'safari': '  Runs tests on Safari',
-  'testnames': '  Lists the name of each test being run',
-  'verbose': '  With logging enabled',
-  'watch': '  Watches for changes in files, runs corresponding test(s)',
-};
diff --git a/build-system/tasks/analytics-vendor-configs.js b/build-system/tasks/analytics-vendor-configs.js
new file mode 100644
index 0000000000000..b33a3da1add9b
--- /dev/null
+++ b/build-system/tasks/analytics-vendor-configs.js
@@ -0,0 +1,95 @@
+/**
+ * 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.
+ */
+
+const minimist = require('minimist');
+const argv = minimist(process.argv.slice(2));
+const debounce = require('debounce');
+const fs = require('fs-extra');
+const globby = require('globby');
+const jsonminify = require('jsonminify');
+const {basename, dirname, extname, join} = require('path');
+const {endBuildStep} = require('./helpers');
+const {watchDebounceDelay} = require('./helpers');
+const {watch} = require('chokidar');
+
+/**
+ * Entry point for 'amp analytics-vendor-configs'
+ * Compile all the vendor configs and drop in the dist folder
+ * @param {Object=} opt_options
+ * @return {!Promise}
+ */
+async function analyticsVendorConfigs(opt_options) {
+  const options = opt_options || {};
+
+  const srcPath = ['extensions/amp-analytics/0.1/vendors/*.json'];
+  const destPath = 'dist/v0/analytics-vendors/';
+
+  // ignore test json if not fortesting or build.
+  if (!(argv.fortesting || options.fortesting || argv._.includes('build'))) {
+    srcPath.push('!extensions/amp-analytics/0.1/vendors/_fake_.json');
+  }
+
+  if (options.watch) {
+    // Do not set watchers again when we get called by the watcher.
+    const copyOptions = {...options, watch: false, calledByWatcher: true};
+    const watchFunc = () => {
+      analyticsVendorConfigs(copyOptions);
+    };
+    watch(srcPath).on('change', debounce(watchFunc, watchDebounceDelay));
+  }
+
+  const startTime = Date.now();
+
+  const srcFiles = globby.sync(srcPath);
+  await fs.ensureDir(destPath);
+  for (const srcFile of srcFiles) {
+    let destFile = join(destPath, basename(srcFile));
+    let contents = await fs.readFile(srcFile, 'utf-8');
+    if (options.minify) {
+      contents = jsonminify(contents);
+    }
+    // Report any parsing errors
+    try {
+      JSON.parse(contents);
+    } catch (err) {
+      // Only fail if not in watcher, so watch is not interrupted
+      if (!options.calledByWatcher) {
+        throw err;
+      }
+    }
+    // If not minifying, append .max to filename
+    if (!options.minify) {
+      const extension = extname(destFile);
+      const base = basename(destFile, extension);
+      const dir = dirname(destFile);
+      destFile = join(dir, `${base}.max${extension}`);
+    }
+    await fs.writeFile(destFile, contents, 'utf-8');
+  }
+  if (globby.sync(srcPath).length > 0) {
+    endBuildStep(
+      'Compiled all analytics vendor configs into',
+      destPath,
+      startTime
+    );
+  }
+}
+
+module.exports = {
+  analyticsVendorConfigs,
+};
+
+analyticsVendorConfigs.description = 'Compile analytics vendor configs to dist';
diff --git a/build-system/tasks/ava.js b/build-system/tasks/ava.js
index 48edce57a51d5..afd59ac017295 100644
--- a/build-system/tasks/ava.js
+++ b/build-system/tasks/ava.js
@@ -15,32 +15,37 @@
  */
 'use strict';
 
-const gulp = require('gulp');
-const gulpAva = require('gulp-ava');
-const {isTravisBuild} = require('../common/travis');
+const argv = require('minimist')(process.argv.slice(2));
+const {execOrDie} = require('../common/exec');
 
 /**
  * Runs ava tests.
- * @return {!Vinyl}
  */
 async function ava() {
-  return gulp
-    .src([
-      require.resolve('./csvify-size/test.js'),
-      require.resolve('./get-zindex/test.js'),
-      require.resolve('./prepend-global/test.js'),
-    ])
-    .pipe(
-      gulpAva({
-        'concurrency': 5,
-        'failFast': true,
-        'silent': isTravisBuild(),
-      })
-    );
+  // These need equivalents for CI in build-system/pr-check/build-targets.js
+  // (see targetMatchers[Targets.AVA])
+  const testFiles = [
+    'build-system/tasks/get-zindex/get-zindex.test.js',
+    'build-system/tasks/make-extension/test/test.js',
+    'build-system/tasks/markdown-toc/test/test.js',
+    'build-system/tasks/prepend-global/prepend-global.test.js',
+  ];
+  execOrDie(
+    [
+      'npx ava',
+      ...testFiles,
+      '--color --fail-fast',
+      argv.watch ? '--watch' : '',
+    ].join(' ')
+  );
 }
 
 module.exports = {
   ava,
 };
 
-ava.description = 'Runs ava tests for gulp tasks';
+ava.description = "Runs ava tests for AMP's tasks";
+
+ava.flags = {
+  'watch': 'Watches for changes',
+};
diff --git a/build-system/tasks/babel-plugin-tests.js b/build-system/tasks/babel-plugin-tests.js
index 09d22b9f8dce8..790efd3087dc0 100644
--- a/build-system/tasks/babel-plugin-tests.js
+++ b/build-system/tasks/babel-plugin-tests.js
@@ -16,10 +16,10 @@
 'use strict';
 
 const jest = require('@jest/core');
-const {isTravisBuild} = require('../common/travis');
+const {isCiBuild} = require('../common/ci');
 
 /**
- * Entry point for `gulp babel-plugin-tests`. Runs the jest-based tests for
+ * Entry point for `amp babel-plugin-tests`. Runs the jest-based tests for
  * AMP's custom babel plugins.
  */
 async function babelPluginTests() {
@@ -27,15 +27,28 @@ async function babelPluginTests() {
   const options = {
     automock: false,
     coveragePathIgnorePatterns: ['/node_modules/'],
+    detectOpenHandles: true,
     modulePathIgnorePatterns: ['/test/fixtures/', '<rootDir>/build/'],
-    reporters: [isTravisBuild() ? 'jest-silent-reporter' : 'jest-dot-reporter'],
+    reporters: [
+      isCiBuild() ? 'jest-silent-reporter' : 'jest-progress-bar-reporter',
+    ],
     setupFiles: ['./build-system/babel-plugins/testSetupFile.js'],
     testEnvironment: 'node',
     testPathIgnorePatterns: ['/node_modules/'],
     testRegex: '/babel-plugins/[^/]+/test/.+\\.m?js$',
     transformIgnorePatterns: ['/node_modules/'],
   };
-  await jest.runCLI(options, projects);
+
+  // The `jest.runCLI` command is undocumented. See the types file for object shape:
+  // https://github.com/facebook/jest/blob/bd76829f66c5c0f3c6907b80010f19893cb0fc8c/packages/jest-test-result/src/types.ts#L74-L91.
+  const aggregatedResults = await jest.runCLI(
+    // TODO(#23582) the typing for jest.Config.Argv seems to be a little off.
+    /** @type {*} */ (options),
+    projects
+  );
+  if (!aggregatedResults.results.success) {
+    throw new Error('See the logs above for details.');
+  }
 }
 
 module.exports = {
diff --git a/build-system/tasks/build.js b/build-system/tasks/build.js
index 7cf5e6ece7af0..523bcecc70827 100644
--- a/build-system/tasks/build.js
+++ b/build-system/tasks/build.js
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-const log = require('fancy-log');
 const {
   bootstrapThirdPartyFrames,
   compileAllJs,
@@ -27,51 +26,25 @@ const {
   exitCtrlcHandler,
 } = require('../common/ctrlcHandler');
 const {buildExtensions} = require('./extension-helpers');
+const {buildVendorConfigs} = require('./3p-vendor-helpers');
 const {compileCss} = require('./css');
-const {compileJison} = require('./compile-jison');
-const {cyan, green, yellow} = require('ansi-colors');
-const {maybeUpdatePackages} = require('./update-packages');
 const {parseExtensionFlags} = require('./extension-helpers');
 
 const argv = require('minimist')(process.argv.slice(2));
 
-/**
- * Deprecated. Use `gulp build --watch` or `gulp dist --watch`.
- *
- * TODO(rsimha, #27471): Remove this after several weeks.
- */
-async function watch() {
-  log(yellow('WARNING:'), cyan('gulp watch'), 'has been deprecated.');
-  log(
-    green('INFO:'),
-    'Use',
-    cyan('gulp build --watch'),
-    'or',
-    cyan('gulp dist --watch'),
-    'instead.'
-  );
-  log(
-    green('INFO:'),
-    'Run',
-    cyan('gulp help'),
-    'for a full list of commands and flags.'
-  );
-}
-
 /**
  * Perform the prerequisite steps before starting the unminified build.
- * Used by `gulp` and `gulp build`.
+ * Used by `amp` and `amp build`.
  *
  * @param {!Object} options
+ * @return {Promise}
  */
 async function runPreBuildSteps(options) {
-  await compileCss(options);
-  await compileJison();
-  await bootstrapThirdPartyFrames(options);
+  return Promise.all([compileCss(options), bootstrapThirdPartyFrames(options)]);
 }
 
 /**
- * Unminified build. Entry point for `gulp build`.
+ * Unminified build. Entry point for `amp build`.
  */
 async function build() {
   await doBuild();
@@ -83,7 +56,6 @@ async function build() {
  * @param {Object=} extraArgs
  */
 async function doBuild(extraArgs = {}) {
-  maybeUpdatePackages();
   const handlerProcess = createCtrlcHandler('build');
   process.env.NODE_ENV = 'development';
   const options = {
@@ -92,14 +64,18 @@ async function doBuild(extraArgs = {}) {
     watch: argv.watch,
   };
   printNobuildHelp();
-  printConfigHelp('gulp build');
+  printConfigHelp('amp build');
   parseExtensionFlags();
   await runPreBuildSteps(options);
   if (argv.core_runtime_only) {
     await compileCoreRuntime(options);
   } else {
     await compileAllJs(options);
-    await buildExtensions(options);
+  }
+  await buildExtensions(options);
+
+  if (!argv.core_runtime_only) {
+    await buildVendorConfigs(options);
   }
   if (!argv.watch) {
     exitCtrlcHandler(handlerProcess);
@@ -110,24 +86,22 @@ module.exports = {
   build,
   doBuild,
   runPreBuildSteps,
-  watch,
 };
 
 /* eslint "google-camelcase/google-camelcase": 0 */
 
 build.description = 'Builds the AMP library';
 build.flags = {
-  config: '  Sets the runtime\'s AMP_CONFIG to one of "prod" or "canary"',
-  fortesting: '  Builds the AMP library for local testing',
-  extensions: '  Builds only the listed extensions.',
-  extensions_from: '  Builds only the extensions from the listed AMP(s).',
-  noextensions: '  Builds with no extensions.',
-  core_runtime_only: '  Builds only the core runtime.',
-  coverage: '  Adds code coverage instrumentation to JS files using istanbul.',
-  version_override: '  Overrides the version written to AMP_CONFIG',
-  watch: '  Watches for changes in files, re-builds when detected',
+  config: 'Sets the runtime\'s AMP_CONFIG to one of "prod" or "canary"',
+  fortesting: 'Builds the AMP library for local testing',
+  extensions: 'Builds only the listed extensions.',
+  extensions_from: 'Builds only the extensions from the listed AMP(s).',
+  noextensions: 'Builds with no extensions.',
+  core_runtime_only: 'Builds only the core runtime.',
+  coverage: 'Adds code coverage instrumentation to JS files using istanbul.',
+  version_override: 'Overrides the version written to AMP_CONFIG',
+  watch: 'Watches for changes in files, re-builds when detected',
+  esm: 'Do not transpile down to ES5',
   define_experiment_constant:
-    '  Builds runtime with the EXPERIMENT constant set to true',
+    'Builds runtime with the EXPERIMENT constant set to true',
 };
-
-watch.description = 'Deprecated. Use gulp build --watch or gulp dist --watch';
diff --git a/build-system/tasks/bundle-size/APPROVERS.json b/build-system/tasks/bundle-size/APPROVERS.json
index d64fb815b5168..638d36c63c1b5 100644
--- a/build-system/tasks/bundle-size/APPROVERS.json
+++ b/build-system/tasks/bundle-size/APPROVERS.json
@@ -1,22 +1,22 @@
 {
-  "dist/v0.js": {
-    "approvers": ["ampproject/wg-performance", "ampproject/wg-runtime"],
+  "dist/v0.?(m)js": {
+    "approvers": ["ampproject/wg-performance"],
     "threshold": 0.1
   },
-  "dist/amp4ads-v0.js": {
-    "approvers": ["ampproject/wg-ads"],
+  "dist/amp4ads-v0.?(m)js": {
+    "approvers": ["ampproject/wg-monetization", "ampproject/wg-performance"],
     "threshold": 0.1
   },
-  "dist/v0/amp-analytics-0.1.js": {
-    "approvers": ["ampproject/wg-analytics"],
+  "dist/v0/amp-analytics-?.?.?(m)js": {
+    "approvers": ["ampproject/wg-analytics", "ampproject/wg-performance"],
     "threshold": 0.1
   },
-  "dist/v0/amp-story-0.1.js": {
-    "approvers": ["ampproject/wg-stories"],
+  "dist/v0/amp-story-?.?.?(m)js": {
+    "approvers": ["ampproject/wg-stories", "ampproject/wg-performance"],
     "threshold": 0.5
   },
-  "dist/v0/amp-story-1.0.js": {
-    "approvers": ["ampproject/wg-stories"],
-    "threshold": 0.5
+  "dist.3p/current-min/vendor/*.?(m)js": {
+    "approvers": ["ampproject/wg-components", "ampproject/wg-monetization"],
+    "threshold": 0.1
   }
 }
diff --git a/build-system/tasks/bundle-size/README.md b/build-system/tasks/bundle-size/README.md
index 6c2d263587d83..77debc5960be3 100644
--- a/build-system/tasks/bundle-size/README.md
+++ b/build-system/tasks/bundle-size/README.md
@@ -1,21 +1,20 @@
 # Bundle Size checks
 
 The `APPROVERS.json` file is a listing of compiled AMP runtime and extensions
-files. Each rule has two parts:
+files in `extglob` syntax. Each rule has two parts:
 
-- `approvers`: list of GitHub teams whose members may approve pull requests that
-  fail the check
-- `threshold`: number of kilobytes by which the brotli-compressed bundle size
-  can increase before failing the check
+-   `approvers`: list of GitHub teams whose members may approve pull requests that
+    fail the check
+-   `threshold`: number of kilobytes by which the brotli-compressed bundle size
+    can increase before failing the check
 
 Approval from any single member of any of the file's approval-teams is enough to
 satisfy the check.
 
-This file is dynamically fetched by the [Bundle-Size GitHub App](https://github.com/ampproject/amp-github-apps/tree/master/bundle-size)
+This file is dynamically fetched by the [Bundle-Size GitHub App](https://github.com/ampproject/amp-github-apps/tree/main/bundle-size)
 
 If a pull request requires a bundle-size approval from more than one _set_ of
 approvers, it will fall back to the default set of approvers
-(`@ampproject/wg-runtime` and `@ampproject/wg-performance`). Members of
-`@ampproject/wg-infra` can also approve all bundle size increases or app
-failures, but this should only be done when the cause for the failure is an
-infrastructure issue.
+(`@ampproject/wg-performance`). Members of `@ampproject/wg-infra` can also
+approve all bundle size increases or app failures, but this should only be
+done when the cause for the failure is an infrastructure issue.
diff --git a/build-system/tasks/bundle-size/filesize.json b/build-system/tasks/bundle-size/filesize.json
index d0803d63e8ded..b0ca1b72c7453 100644
--- a/build-system/tasks/bundle-size/filesize.json
+++ b/build-system/tasks/bundle-size/filesize.json
@@ -4,7 +4,11 @@
       "dist/*.js",
       "dist/v0/*-?.?.js",
       "dist/*.mjs",
-      "dist/v0/*-?.?.mjs"
+      "dist/v0/*-?.?.mjs",
+      "dist.3p/current-min/vendor/*.js",
+      "dist.3p/current-min/vendor/*.mjs",
+      "extensions/*/?.?/dist/*.js",
+      "extensions/*/?.?/dist/*.mjs"
     ],
     "trackFormat": ["brotli"]
   }
diff --git a/build-system/tasks/bundle-size/index.js b/build-system/tasks/bundle-size/index.js
index a44b7aea54ddc..1a7c865d81f49 100644
--- a/build-system/tasks/bundle-size/index.js
+++ b/build-system/tasks/bundle-size/index.js
@@ -16,29 +16,28 @@
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
+const fetch = require('node-fetch');
 const globby = require('globby');
-const log = require('fancy-log');
 const path = require('path');
 const url = require('url');
-const util = require('util');
 const {
+  ciPushBranch,
+  ciRepoSlug,
+  circleciPrMergeCommit,
+  isPullRequestBuild,
+  isPushBuild,
+} = require('../../common/ci');
+const {
+  gitCiMainBaseline,
   gitCommitHash,
-  gitTravisMasterBaseline,
   shortSha,
 } = require('../../common/git');
-const {
-  isTravisPullRequestBuild,
-  isTravisPushBuild,
-  travisPushBranch,
-  travisRepoSlug,
-} = require('../../common/travis');
 const {
   VERSION: internalRuntimeVersion,
 } = require('../../compile/internal-version');
-const {cyan, green, red, yellow} = require('ansi-colors');
-const {report, Report} = require('@ampproject/filesize');
-
-const requestPost = util.promisify(require('request').post);
+const {cyan, red, yellow} = require('../../common/colors');
+const {log, logWithoutTimestamp} = require('../../common/logging');
+const {NoTTYReport, report} = require('@ampproject/filesize');
 
 const filesizeConfigPath = require.resolve('./filesize.json');
 const fileGlobs = require(filesizeConfigPath).filesize.track;
@@ -51,52 +50,82 @@ const replacementExpression = new RegExp(internalRuntimeVersion, 'g');
 /**
  * Get the brotli bundle sizes of the current build after normalizing the RTV number.
  *
- * @return {Map<string, number>} the bundle size in KB rounded to 2 decimal
+ * @return {Promise<Object<string, number>>} the bundle size in KB rounded to 2 decimal
  *   points.
  */
 async function getBrotliBundleSizes() {
+  /** @type {Object<string, number>} */
   const bundleSizes = {};
-
-  log(cyan('brotli'), 'bundle sizes are:');
-  await report(
+  const sizes = await report(
     filesizeConfigPath,
     (content) => content.replace(replacementExpression, normalizedRtvNumber),
-    class extends Report {
-      update(context) {
-        const completed = super.getUpdated(context);
-        for (const complete of completed) {
-          const [filePath, sizeMap] = complete;
-          const relativePath = path.relative('.', filePath);
-          const reportedSize = parseFloat((sizeMap[0][0] / 1024).toFixed(2));
-          log(' ', cyan(relativePath) + ':', green(reportedSize + 'KB'));
-          bundleSizes[relativePath] = reportedSize;
-        }
-      }
-    }
+    NoTTYReport,
+    /* silent */ false
   );
-
+  for (const size of sizes) {
+    const [filePath, sizeMap] = size;
+    const relativePath = path.relative('.', filePath);
+    const reportedSize = parseFloat((sizeMap[0][0] / 1024).toFixed(2));
+    bundleSizes[relativePath] = reportedSize;
+  }
   return bundleSizes;
 }
 
 /**
- * Store the bundle size of a commit hash in the build artifacts storage
+ * Checks the response of an operation. Throws if there's an error, and prints
+ * success messages if not.
+ * @param {!Response} response
+ * @param {...string} successMessages
+ */
+async function checkResponse(response, ...successMessages) {
+  if (!response.ok) {
+    throw new Error(
+      `${response.status} ${response.statusText}: ${await response.text()}`
+    );
+  } else {
+    log(...successMessages);
+  }
+}
+
+/**
+ * Does a JSON POST request.
+ * @param {string} url
+ * @param {*} body
+ * @param {?Object=} options
+ * @return {Promise<Response>}
+ */
+async function postJson(url, body, options) {
+  return fetch(url, {
+    ...options,
+    headers: {
+      ...(options && options.headers),
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: JSON.stringify(body),
+  });
+}
+
+/**
+ * Store the bundle sizes for a commit hash in the build artifacts storage
  * repository to the passed value.
  */
 async function storeBundleSize() {
-  if (!isTravisPushBuild() || travisPushBranch() !== 'master') {
+  if (!isPushBuild() || ciPushBranch() !== 'main') {
     log(
       yellow('Skipping'),
       cyan('--on_push_build') + ':',
-      'this action can only be performed on `master` push builds on Travis'
+      'this action can only be performed on main branch push builds during CI'
     );
     return;
   }
 
-  if (travisRepoSlug() !== expectedGitHubRepoSlug) {
+  if (ciRepoSlug() !== expectedGitHubRepoSlug) {
     log(
       yellow('Skipping'),
       cyan('--on_push_build') + ':',
-      'this action can only be performed on Travis builds on the',
+      'this action can only be performed during CI builds on the',
       cyan(expectedGitHubRepoSlug),
       'repository'
     );
@@ -104,61 +133,57 @@ async function storeBundleSize() {
   }
 
   const commitHash = gitCommitHash();
+  log('Storing bundle sizes for commit', cyan(shortSha(commitHash)) + '...');
   try {
-    const response = await requestPost({
-      uri: url.resolve(
+    const response = await postJson(
+      url.resolve(
         bundleSizeAppBaseUrl,
         path.join('commit', commitHash, 'store')
       ),
-      json: true,
-      body: {
+      {
         token: process.env.BUNDLE_SIZE_TOKEN,
         bundleSizes: await getBrotliBundleSizes(),
-      },
-    });
-    if (response.statusCode < 200 || response.statusCode >= 300) {
-      throw new Error(
-        `${response.statusCode} ${response.statusMessage}: ` + response.body
-      );
-    }
+      }
+    );
+    await checkResponse(response, 'Successfully stored bundle sizes.');
   } catch (error) {
-    log(red('Could not store the bundle size'));
-    log(red(error));
-    process.exitCode = 1;
+    log(yellow('WARNING:'), 'Could not store bundle sizes');
+    logWithoutTimestamp(error);
     return;
   }
 }
 
 /**
- * Mark a pull request on Travis as skipped, via the AMP bundle-size GitHub App.
+ * Mark a pull request as skipped, via the AMP bundle-size GitHub App.
  */
 async function skipBundleSize() {
-  if (isTravisPullRequestBuild()) {
+  if (isPullRequestBuild()) {
     const commitHash = gitCommitHash();
+    log(
+      'Skipping bundle size reporting for commit',
+      cyan(shortSha(commitHash)) + '...'
+    );
     try {
-      const response = await requestPost(
+      const response = await fetch(
         url.resolve(
           bundleSizeAppBaseUrl,
           path.join('commit', commitHash, 'skip')
-        )
+        ),
+        {method: 'POST'}
+      );
+      await checkResponse(
+        response,
+        'Successfully skipped bundle size reporting.'
       );
-      if (response.statusCode < 200 || response.statusCode >= 300) {
-        throw new Error(
-          `${response.statusCode} ${response.statusMessage}: ` + response.body
-        );
-      }
     } catch (error) {
-      log(red('Could not report a skipped pull request'));
-      log(red(error));
-      process.exitCode = 1;
+      log(yellow('WARNING:'), 'Could not skip bundle size reporting');
+      logWithoutTimestamp(error);
       return;
     }
   } else {
     log(
-      yellow(
-        'Not marking this pull request to skip because that can only be ' +
-          'done on Travis'
-      )
+      yellow('WARNING'),
+      'Pull requests can be marked as skipped only during CI builds'
     );
   }
 }
@@ -167,51 +192,59 @@ async function skipBundleSize() {
  * Report the size to the bundle-size GitHub App, to determine size changes.
  */
 async function reportBundleSize() {
-  if (isTravisPullRequestBuild()) {
-    const baseSha = gitTravisMasterBaseline();
-    const commitHash = gitCommitHash();
+  if (isPullRequestBuild()) {
+    const headSha = gitCommitHash();
+    const baseSha = gitCiMainBaseline();
+    const mergeSha = circleciPrMergeCommit();
+    log(
+      'Reporting bundle sizes for commit',
+      cyan(shortSha(headSha)),
+      'using baseline commit',
+      cyan(shortSha(baseSha)),
+      'and merge commit',
+      cyan(shortSha(mergeSha)) + '...'
+    );
     try {
-      const response = await requestPost({
-        uri: url.resolve(
+      const response = await postJson(
+        url.resolve(
           bundleSizeAppBaseUrl,
-          path.join('commit', commitHash, 'report')
+          path.join('commit', headSha, 'report')
         ),
-        json: true,
-        body: {
+        {
           baseSha,
+          mergeSha,
           bundleSizes: await getBrotliBundleSizes(),
-        },
-      });
-      if (response.statusCode < 200 || response.statusCode >= 300) {
-        throw new Error(
-          `${response.statusCode} ${response.statusMessage}: ` + response.body
-        );
-      }
+        }
+      );
+      await checkResponse(response, 'Successfully reported bundle sizes.');
     } catch (error) {
-      log(red('Could not report the bundle size of this pull request'));
-      log(red(error));
-      process.exitCode = 1;
+      log(
+        yellow('WARNING:'),
+        'Could not report the bundle sizes for this pull request'
+      );
+      logWithoutTimestamp(error);
       return;
     }
   } else {
     log(
-      yellow(
-        'Not reporting the bundle size of this pull request because ' +
-          'that can only be done on Travis'
-      )
+      yellow('WARNING:'),
+      'Bundle sizes from pull requests can be reported only during CI builds'
     );
   }
 }
 
+/**
+ * @return {Promise<void>}
+ */
 async function getLocalBundleSize() {
   if (globby.sync(fileGlobs).length === 0) {
     log('Could not find runtime files.');
-    log('Run', cyan('gulp dist --noextensions'), 'and re-run this task.');
+    log('Run', cyan('amp dist --noextensions'), 'and re-run this task.');
     process.exitCode = 1;
     return;
   } else {
     log(
-      'Computing bundle size for version',
+      'Computing bundle sizes for version',
       cyan(internalRuntimeVersion),
       'at commit',
       cyan(shortSha(gitCommitHash())) + '.'
@@ -220,17 +253,20 @@ async function getLocalBundleSize() {
   await getBrotliBundleSizes();
 }
 
+/**
+ * @return {Promise<void>}
+ */
 async function bundleSize() {
   if (argv.on_skipped_build) {
-    return await skipBundleSize();
+    return skipBundleSize();
   } else if (argv.on_push_build) {
-    return await storeBundleSize();
+    return storeBundleSize();
   } else if (argv.on_pr_build) {
-    return await reportBundleSize();
+    return reportBundleSize();
   } else if (argv.on_local_build) {
-    return await getLocalBundleSize();
+    return getLocalBundleSize();
   } else {
-    log(red('Called'), cyan('gulp bundle-size'), red('with no task.'));
+    log(red('Called'), cyan('amp bundle-size'), red('with no task.'));
     process.exitCode = 1;
   }
 }
@@ -243,11 +279,10 @@ bundleSize.description =
   'Checks if the minified AMP binary has exceeded its size cap';
 bundleSize.flags = {
   'on_push_build':
-    '  Store bundle size in AMP build artifacts repo ' +
-    '(also implies --on_pr_build)',
-  'on_pr_build': '  Report the bundle size of this pull request to GitHub',
+    'Store bundle sizes in the AMP build artifacts repo for main branch builds',
+  'on_pr_build': 'Report the bundle sizes for this pull request to GitHub',
   'on_skipped_build':
-    "  Set the status of this pull request's bundle " +
+    "Set the status of this pull request's bundle " +
     'size check in GitHub to `skipped`',
-  'on_local_build': '  Compute the bundle size of the locally built runtime',
+  'on_local_build': 'Compute bundle sizes for the locally built runtime',
 };
diff --git a/build-system/tasks/caches-json.js b/build-system/tasks/caches-json.js
index 346b9ee33fbcc..3ad0212b68f06 100644
--- a/build-system/tasks/caches-json.js
+++ b/build-system/tasks/caches-json.js
@@ -15,57 +15,42 @@
  */
 'use strict';
 
-const colors = require('ansi-colors');
-const gulp = require('gulp');
-const log = require('fancy-log');
-const through2 = require('through2');
+const path = require('path');
+const {cyan, green, red} = require('../common/colors');
+const {log, logLocalDev} = require('../common/logging');
 
-const expectedCaches = ['google'];
-
-const cachesJsonPath = 'build-system/global-configs/caches.json';
+const expectedCaches = ['google', 'bing'];
+const cachesJsonPath = '../global-configs/caches.json';
 
 /**
- * Fail if build-system/global-configs/caches.json is missing some expected
- * caches.
- * @return {!Promise}
+ * Entry point for amp caches-jason.
  */
 async function cachesJson() {
-  return gulp.src([cachesJsonPath]).pipe(
-    through2.obj(function (file) {
-      let obj;
-      try {
-        obj = JSON.parse(file.contents.toString());
-      } catch (e) {
-        log(
-          colors.yellow(
-            `Could not parse ${cachesJsonPath}. ` +
-              'This is most likely a fatal error that ' +
-              'will be found by checkValidJson'
-          )
-        );
-        return;
-      }
-      const foundCaches = [];
-      for (const foundCache of obj.caches) {
-        foundCaches.push(foundCache.id);
-      }
-      for (const cache of expectedCaches) {
-        if (!foundCaches.includes(cache)) {
-          log(
-            colors.red(
-              'Missing expected cache "' + cache + `" in ${cachesJsonPath}`
-            )
-          );
-          process.exitCode = 1;
-        }
-      }
-    })
-  );
+  const filename = path.basename(cachesJsonPath);
+  let jsonContent;
+  try {
+    jsonContent = require(cachesJsonPath);
+  } catch (e) {
+    log(red('ERROR:'), 'Could not parse', cyan(filename));
+    process.exitCode = 1;
+    return;
+  }
+  const foundCaches = [];
+  for (const foundCache of jsonContent.caches) {
+    foundCaches.push(foundCache.id);
+  }
+  for (const cache of expectedCaches) {
+    if (foundCaches.includes(cache)) {
+      logLocalDev(green('✔'), 'Found', cyan(cache), 'in', cyan(filename));
+    } else {
+      log(red('✖'), 'Missing', cyan(cache), 'in', cyan(filename));
+      process.exitCode = 1;
+    }
+  }
 }
 
 module.exports = {
   cachesJson,
 };
 
-cachesJson.description =
-  'Check that some expected caches are included in caches.json.';
+cachesJson.description = 'Check that caches.json contains all expected caches.';
diff --git a/build-system/tasks/check-analytics-vendors-list.js b/build-system/tasks/check-analytics-vendors-list.js
new file mode 100644
index 0000000000000..321d1c3ce9bb1
--- /dev/null
+++ b/build-system/tasks/check-analytics-vendors-list.js
@@ -0,0 +1,105 @@
+/**
+ * Copyright 2021 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.
+ */
+const globby = require('globby');
+const {basename} = require('path');
+const {readFile} = require('fs-extra');
+const {writeDiffOrFail} = require('../common/diff');
+
+/**
+ * Ensures that this Markdown file contains a section for every matching vendor.
+ */
+const filepath = 'extensions/amp-analytics/analytics-vendors-list.md';
+
+/**
+ * Vendor JSON files are found here.
+ * Their basename without extension is their type listed in their block.
+ */
+const vendorsGlob = 'extensions/amp-analytics/0.1/vendors/*.json';
+
+const blockHeading = (heading, name) =>
+  `### ${heading}\n\nType attribute value: \`${name}\``;
+
+const blockRegExp = (name) =>
+  new RegExp(
+    `(<!--[\n]+)?${blockHeading(
+      // ### any heading since vendor brands are arbitrarily named
+      '.+',
+      /* Type attribute value: */ name
+    )}((?!###)[\\S\\s\\n])*(-->)?`,
+    'm'
+  );
+
+/**
+ * Checks or updates analytics vendors list.
+ */
+async function checkAnalyticsVendorsList() {
+  const vendors = globby
+    .sync(vendorsGlob)
+    .map((path) => basename(path, '.json'))
+    .sort();
+
+  // Keeps list sorted if so, allows:
+  // - arbitrary sections in-between.
+  // - intentionally commented out blocks
+  let tentative = await readFile(filepath, 'utf-8');
+  let previousBlock;
+  for (const vendor of vendors) {
+    const match = tentative.match(blockRegExp(vendor));
+    if (match) {
+      previousBlock = match[0].trim();
+      continue;
+    }
+    // "d* n*t s*bmit" has to be split to prevent this file from blocking CI
+    // (unlike the resulting change, which should block it if unaddressed).
+    const block =
+      `${blockHeading(vendor, vendor)}\n\nDO NOT` +
+      ` SUBMIT: Add a paragraph to describe ${vendor}.`;
+    // If there's no previously found block, the name is lexicographically lower,
+    // so inserting the new block at the beginning keeps the list sorted.
+    tentative = previousBlock
+      ? tentative.replace(previousBlock, `${previousBlock}\n\n${block}`)
+      : tentative.replace(blockRegExp('.+'), `${block}\n\n\$&`);
+    previousBlock = block;
+  }
+
+  // Remove those no longer on vendor-requests.json
+  let match;
+  const anyVendorRegExp = new RegExp(blockRegExp('(.+)').source, 'gm');
+  while ((match = anyVendorRegExp.exec(tentative)) !== null) {
+    const fullMatch = match[0];
+    /** @type {string} */
+    const nameMatch = /** @type {*} */ (match[2]);
+    const name = nameMatch
+      .split(/[,\s]+/)
+      .shift()
+      .replace(/[`"']/g, '');
+    if (!vendors.includes(name)) {
+      tentative = tentative.replace(fullMatch, '');
+    }
+  }
+
+  await writeDiffOrFail('check-analytics-vendors-list', filepath, tentative);
+}
+
+module.exports = {
+  checkAnalyticsVendorsList,
+};
+
+checkAnalyticsVendorsList.description = `Checks or updates list on ${filepath}`;
+
+checkAnalyticsVendorsList.flags = {
+  'fix': 'Write to file',
+};
diff --git a/build-system/tasks/check-asserts.js b/build-system/tasks/check-asserts.js
new file mode 100644
index 0000000000000..431f7f9b03a1a
--- /dev/null
+++ b/build-system/tasks/check-asserts.js
@@ -0,0 +1,87 @@
+/**
+ * Copyright 2021 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 fs = require('fs').promises;
+const {cyan, green, red} = require('../common/colors');
+const {log} = require('../common/logging');
+
+const DEV_ASSERT_SENTINEL = '__devAssert_sentinel__';
+const PURE_ASSERT_SENTINEL = 'Assertion failed';
+const UNMINIFIED_JS = './dist/amp.js';
+const MINIFIED_JS = './dist/v0.js';
+
+/**
+ * Checks that a provided sentinel is/is not contained in a file.
+ * @param {string} filePath JS binary to check
+ * @param {Record<string, boolean>} sentinels map from sentinels to whether or not
+ *                               they should be present
+ * @throws if a sentinel isn't/is present when it should/shouldn't be
+ */
+async function checkSentinels(filePath, sentinels) {
+  const fileContents = await fs.readFile(filePath, 'utf8');
+
+  for (const [sentinel, shouldBePresent] of Object.entries(sentinels)) {
+    const isPresent = fileContents.includes(sentinel);
+
+    if (isPresent != shouldBePresent) {
+      log(
+        red('ERROR:'),
+        cyan(filePath),
+        shouldBePresent ? 'does not contain' : 'contains',
+        `${cyan(sentinel)}.`,
+        'Something may be wrong with assertions or compilation.'
+      );
+      throw new Error('Assertion sentinel check failed');
+    }
+
+    log(
+      green('SUCCESS:'),
+      cyan(sentinel),
+      shouldBePresent ? 'found in' : 'not found in',
+      cyan(filePath)
+    );
+  }
+}
+
+/**
+ * Checks that the file at the provided path does not include devAssert.
+ * This works as follows:
+ * - The devAssert function includes a sentinel string message behind a
+ *   conditional that is always false, but not DCE-able.
+ * - In minified code, devAssert should be removed entirely, so the sentinel
+ *   will not be present.
+ * - In unminified code, it should remain present but never execute.
+ * - Even when devAssert is DCE'd, pureAssert still includes the base assertion
+ *   logic, so the 'Assertion failed' string will be present.
+ */
+async function checkAsserts() {
+  await checkSentinels(UNMINIFIED_JS, {
+    [PURE_ASSERT_SENTINEL]: true,
+    [DEV_ASSERT_SENTINEL]: true,
+  });
+  await checkSentinels(MINIFIED_JS, {
+    [PURE_ASSERT_SENTINEL]: true,
+    [DEV_ASSERT_SENTINEL]: false,
+  });
+}
+
+module.exports = {
+  checkAsserts,
+};
+
+checkAsserts.description =
+  "Checks amp.js and v0.js to validate that assertions are DCE'd correctly";
diff --git a/build-system/tasks/check-build-system.js b/build-system/tasks/check-build-system.js
new file mode 100644
index 0000000000000..4a43ffd976271
--- /dev/null
+++ b/build-system/tasks/check-build-system.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright 2021 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.
+ */
+const globby = require('globby');
+const path = require('path');
+const {cyan, green} = require('../common/colors');
+const {execOrThrow} = require('../common/exec');
+const {log} = require('../common/logging');
+const {updateSubpackages} = require('../common/update-packages');
+
+/**
+ * Helper that updates build-system subpackages so their types can be verified.
+ * Skips NPM checks during CI (already done while running each task).
+ */
+async function updateBuildSystemSubpackages() {
+  const packageFiles = globby.sync('build-system/tasks/*/package.json');
+  for (const packageFile of packageFiles) {
+    const packageDir = path.dirname(packageFile);
+    await updateSubpackages(packageDir, /* skipNpmChecks */ true);
+  }
+}
+
+/**
+ * Performs type checking on the /build-system directory using TypeScript.
+ * Configuration is defined in /build-system/tsconfig.json.
+ */
+async function checkBuildSystem() {
+  await updateBuildSystemSubpackages();
+  log('Checking types in', cyan('build-system') + '...');
+  execOrThrow(
+    'npx -p typescript tsc --project ./build-system/tsconfig.json',
+    'Type checking failed'
+  );
+  log(green('SUCCESS:'), 'No type errors in', cyan('build-system') + '.');
+}
+
+checkBuildSystem.description =
+  'Check source code in build-system/ for JS type errors.';
+
+module.exports = {
+  checkBuildSystem,
+};
diff --git a/build-system/tasks/check-exact-versions.js b/build-system/tasks/check-exact-versions.js
index c42e935413cdc..44cf1447a0b30 100644
--- a/build-system/tasks/check-exact-versions.js
+++ b/build-system/tasks/check-exact-versions.js
@@ -15,57 +15,61 @@
  */
 'use strict';
 
-const colors = require('ansi-colors');
-const log = require('fancy-log');
-const {getStderr} = require('../common/exec');
-const {gitDiffFileMaster} = require('../common/git');
-const {isTravisBuild} = require('../common/travis');
+const fs = require('fs-extra');
+const globby = require('globby');
+const semver = require('semver');
+const {cyan, green, red} = require('../common/colors');
+const {gitDiffFileMain} = require('../common/git');
+const {log, logLocalDev, logWithoutTimestamp} = require('../common/logging');
 
-const PACKAGE_JSON_PATHS = [
-  'package.json',
-  'build-system/tasks/e2e/package.json',
-  'build-system/tasks/visual-diff/package.json',
-  'build-system/tasks/storybook/package.json',
-];
+/**
+ * @param {string} file
+ * @return {boolean}
+ */
+function check(file) {
+  const json = fs.readJsonSync(file, 'utf8');
+
+  // We purposfully ignore peerDependencies here, because that's that's for the
+  // consumer to decide.
+  const keys = ['dependencies', 'devDependencies', 'optionalDependencies'];
 
-const checkerExecutable = 'npx npm-exact-versions';
+  for (const key of keys) {
+    const deps = json[key];
+    for (const dep in deps) {
+      const version = deps[dep];
+      if (!semver.clean(version)) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
 
 /**
  * Makes sure all package.json files in the repo use exact versions.
  * @return {!Promise}
  */
 async function checkExactVersions() {
-  let success = true;
-  PACKAGE_JSON_PATHS.forEach((file) => {
-    const checkerCmd = `${checkerExecutable} --path ${file}`;
-    const err = getStderr(checkerCmd);
-    if (err) {
+  const packageJsonFiles = globby.sync(['**/package.json', '!**/node_modules']);
+  packageJsonFiles.forEach((file) => {
+    if (check(file)) {
+      logLocalDev(
+        green('SUCCESS:'),
+        'All packages in',
+        cyan(file),
+        'have exact versions.'
+      );
+    } else {
       log(
-        colors.red('ERROR:'),
+        red('ERROR:'),
         'One or more packages in',
-        colors.cyan(file),
+        cyan(file),
         'do not have an exact version.'
       );
-      console.log(gitDiffFileMaster(file));
-      success = false;
-    } else {
-      if (!isTravisBuild()) {
-        log(
-          colors.green('SUCCESS:'),
-          'All packages in',
-          colors.cyan(file),
-          'have exact versions.'
-        );
-      }
+      logWithoutTimestamp(gitDiffFileMain(file));
+      throw new Error('Check failed');
     }
   });
-  if (success) {
-    return Promise.resolve();
-  } else {
-    const reason = new Error('Check failed');
-    reason.showStack = false;
-    return Promise.reject(reason);
-  }
 }
 
 module.exports = {
@@ -73,4 +77,4 @@ module.exports = {
 };
 
 checkExactVersions.description =
-  'Checks that all packages in package.json use exact versions.';
+  'Checks that all package.json files in the repo use exact versions.';
diff --git a/build-system/tasks/check-invalid-whitespaces.js b/build-system/tasks/check-invalid-whitespaces.js
new file mode 100644
index 0000000000000..9232e6b48892a
--- /dev/null
+++ b/build-system/tasks/check-invalid-whitespaces.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright 2021 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.
+ */
+'using strict';
+
+const {getFilesToCheck} = require('../common/utils');
+const {getStdout} = require('../common/process');
+const {green, red} = require('../common/colors');
+const {invalidWhitespaceGlobs} = require('../test-configs/config');
+const {log, logLocalDev, logWithoutTimestamp} = require('../common/logging');
+
+/**
+ * Runs the check on the given list of files and prints results. Uses the
+ * built-in functionality of `git diff --check` to generate results. Checks
+ * entire files by comparing their contents against an empty commit.
+ *
+ * @param {Array<string>} filesToCheck
+ */
+function runCheck(filesToCheck) {
+  logLocalDev(green('Checking files for invalid whitespaces...'));
+  const fileList = filesToCheck.join(' ');
+  const emptyCommit = getStdout('git hash-object -t tree /dev/null').trim();
+  const checkFileCmd = `git -c color.ui=always diff ${emptyCommit} --check ${fileList}`;
+  const result = getStdout(checkFileCmd).trim();
+  if (result.length) {
+    logWithoutTimestamp(result);
+    log(red('ERROR:'), 'Please fix the files listed above.');
+    process.exitCode = 1;
+  } else {
+    log(green('SUCCESS:'), 'No invalid whitespaces found.');
+  }
+}
+
+/**
+ * Checks multiple kinds of files for invalid whitespaces.
+ */
+function checkInvalidWhitespaces() {
+  const filesToCheck = getFilesToCheck(
+    invalidWhitespaceGlobs,
+    {dot: true},
+    '.gitignore'
+  );
+  if (filesToCheck.length == 0) {
+    return;
+  }
+  runCheck(filesToCheck);
+}
+
+checkInvalidWhitespaces.description =
+  'Checks different types of files for invalid whitespaces.';
+checkInvalidWhitespaces.flags = {
+  'files': 'Checks just the specified files',
+  'local_changes': 'Checks just the files changed in the local branch',
+};
+
+module.exports = {
+  checkInvalidWhitespaces,
+};
diff --git a/build-system/tasks/check-links.js b/build-system/tasks/check-links.js
index 2f8284f8ed319..4b502d1efabd7 100644
--- a/build-system/tasks/check-links.js
+++ b/build-system/tasks/check-links.js
@@ -16,18 +16,16 @@
 'use strict';
 
 const fs = require('fs-extra');
-const log = require('fancy-log');
 const markdownLinkCheck = require('markdown-link-check');
 const path = require('path');
+const {cyan, green, red, yellow} = require('../common/colors');
 const {getFilesToCheck, usesFilesOrLocalChanges} = require('../common/utils');
-const {gitDiffAddedNameOnlyMaster} = require('../common/git');
-const {green, cyan, red, yellow} = require('ansi-colors');
-const {isTravisBuild} = require('../common/travis');
+const {gitDiffAddedNameOnlyMain} = require('../common/git');
 const {linkCheckGlobs} = require('../test-configs/config');
-const {maybeUpdatePackages} = require('./update-packages');
+const {log, logLocalDev} = require('../common/logging');
 
 const LARGE_REFACTOR_THRESHOLD = 20;
-const GITHUB_BASE_PATH = 'https://github.com/ampproject/amphtml/blob/master/';
+const GITHUB_BASE_PATH = 'https://github.com/ampproject/amphtml/blob/main/';
 
 let filesIntroducedByPr;
 
@@ -35,11 +33,10 @@ let filesIntroducedByPr;
  * Checks for dead links in .md files passed in via --files or --local_changes.
  */
 async function checkLinks() {
-  maybeUpdatePackages();
   if (!usesFilesOrLocalChanges('check-links')) {
     return;
   }
-  const filesToCheck = getFilesToCheck(linkCheckGlobs);
+  const filesToCheck = getFilesToCheck(linkCheckGlobs, {dot: true});
   if (filesToCheck.length == 0) {
     return;
   }
@@ -47,10 +44,8 @@ async function checkLinks() {
     log(green('INFO:'), 'Skipping check because this is a large refactor.');
     return;
   }
-  if (!isTravisBuild()) {
-    log(green('Starting checks...'));
-  }
-  filesIntroducedByPr = gitDiffAddedNameOnlyMaster();
+  logLocalDev(green('Starting checks...'));
+  filesIntroducedByPr = gitDiffAddedNameOnlyMain();
   const results = await Promise.all(filesToCheck.map(checkLinksInFile));
   reportResults(results);
 }
@@ -58,7 +53,7 @@ async function checkLinks() {
 /**
  * Reports results after all markdown files have been checked.
  *
- * @param {!Array<string>} results
+ * @param {!Array<{file: string, containsDeadLinks: boolean}>} results
  */
 function reportResults(results) {
   const filesWithDeadLinks = results
@@ -72,7 +67,7 @@ function reportResults(results) {
     );
     log(
       yellow('NOTE 1:'),
-      "Valid links that don't resolve on Travis can be ignored via",
+      "Valid links that don't resolve during CI can be ignored via",
       cyan('ignorePatterns'),
       'in',
       cyan('build-system/tasks/check-links.js') + '.'
@@ -107,7 +102,7 @@ function isLinkToFileIntroducedByPR(link) {
  * Checks a given markdown file for dead links.
  *
  * @param {string} file
- * @return {!Promise}
+ * @return {!Promise<{file: string, containsDeadLinks: boolean}>}
  */
 function checkLinksInFile(file) {
   let markdown = fs.readFileSync(file).toString();
@@ -120,10 +115,18 @@ function checkLinksInFile(file) {
     // Relative links start at the markdown file's path.
     baseUrl: 'file://' + path.dirname(path.resolve(file)),
     ignorePatterns: [
-      // Localhost links don't work unless a `gulp` server is running.
+      // Localhost links don't work unless a `amp` server is running.
       {pattern: /localhost/},
+      // codepen returns a 503 for these link checks
+      {pattern: /https:\/\/codepen.*/},
+      // GitHub PRs and Issues can be assumed to exist
+      {
+        pattern:
+          /https:\/\/github.com\/ampproject\/amphtml\/(pull|issue)\/d+.*/,
+      },
       // Templated links are merely used to generate other markdown files.
       {pattern: /\$\{[a-z]*\}/},
+      {pattern: /https:.*?__component_name\w*__/},
     ],
   };
 
@@ -149,14 +152,10 @@ function checkLinksInFile(file) {
         }
         switch (status) {
           case 'alive':
-            if (!isTravisBuild()) {
-              log(`[${green('✔')}] ${link}`);
-            }
+            logLocalDev(`[${green('✔')}] ${link}`);
             break;
           case 'ignored':
-            if (!isTravisBuild()) {
-              log(`[${yellow('•')}] ${link}`);
-            }
+            logLocalDev(`[${yellow('•')}] ${link}`);
             break;
           case 'dead':
             containsDeadLinks = true;
@@ -180,6 +179,6 @@ module.exports = {
 
 checkLinks.description = 'Detects dead links in markdown files';
 checkLinks.flags = {
-  'files': '  Checks only the specified files',
-  'local_changes': '  Checks just the files changed in the local branch',
+  'files': 'Checks only the specified files',
+  'local_changes': 'Checks just the files changed in the local branch',
 };
diff --git a/build-system/tasks/check-owners.js b/build-system/tasks/check-owners.js
index 435a48a729db3..4a46b6eb1e51e 100644
--- a/build-system/tasks/check-owners.js
+++ b/build-system/tasks/check-owners.js
@@ -15,37 +15,33 @@
  */
 
 /**
- * @fileoverview This file implements the `gulp check-owners` task, which checks
+ * @fileoverview This file implements the `amp check-owners` task, which checks
  * all OWNERS files in the repo for correctness, as determined by the parsing
  * API provided by the AMP owners bot.
  */
 
 'use strict';
 
+const fetch = require('node-fetch');
 const fs = require('fs-extra');
 const JSON5 = require('json5');
-const log = require('fancy-log');
-const request = require('request');
-const util = require('util');
-const {cyan, red, green} = require('ansi-colors');
+const {cyan, green, red} = require('../common/colors');
 const {getFilesToCheck, usesFilesOrLocalChanges} = require('../common/utils');
-const {isTravisBuild} = require('../common/travis');
-
-const requestPost = util.promisify(request.post);
+const {log, logLocalDev} = require('../common/logging');
 
 const OWNERS_SYNTAX_CHECK_URI =
   'http://ampproject-owners-bot.appspot.com/v0/syntax';
 
 /**
  * Checks OWNERS files for correctness using the owners bot API.
- * The cumulative result is returned to the `gulp` process via process.exitCode
+ * The cumulative result is returned to the `amp` process via process.exitCode
  * so that all OWNERS files can be checked / fixed.
  */
 async function checkOwners() {
   if (!usesFilesOrLocalChanges('check-owners')) {
     return;
   }
-  const filesToCheck = getFilesToCheck('**/OWNERS');
+  const filesToCheck = getFilesToCheck(['**/OWNERS']);
   for (const file of filesToCheck) {
     await checkFile(file);
   }
@@ -65,29 +61,30 @@ async function checkFile(file) {
   const contents = fs.readFileSync(file, 'utf8').toString();
   try {
     JSON5.parse(contents);
-    if (!isTravisBuild()) {
-      log(green('SUCCESS:'), 'No errors in', cyan(file));
-    }
+    logLocalDev(green('SUCCESS:'), 'No errors in', cyan(file));
   } catch {
     log(red('FAILURE:'), 'Found errors in', cyan(file));
     process.exitCode = 1;
   }
 
   try {
-    const response = await requestPost({
-      uri: OWNERS_SYNTAX_CHECK_URI,
-      json: true,
-      body: {path: file, contents},
+    const response = await fetch(OWNERS_SYNTAX_CHECK_URI, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({path: file, contents}),
     });
 
-    if (response.statusCode < 200 || response.statusCode >= 300) {
+    if (!response.ok) {
       log(red('ERROR:'), 'Could not reach the owners syntax check API');
       throw new Error(
-        `${response.statusCode} ${response.statusMessage}: ` + response.body
+        `${response.status} ${response.statusText}: ${await response.text()}`
       );
     }
 
-    const {requestErrors, fileErrors, rules} = response.body;
+    const {fileErrors, requestErrors, rules} = await response.json();
 
     if (requestErrors) {
       requestErrors.forEach((err) => log(red(err)));
@@ -103,7 +100,7 @@ async function checkFile(file) {
       cyan(file),
       'successfully; produced',
       cyan(rules.length),
-      'rules.'
+      'rule(s).'
     );
   } catch (error) {
     log(red('FAILURE:'), error);
@@ -117,6 +114,6 @@ module.exports = {
 
 checkOwners.description = 'Checks all OWNERS files in the repo for correctness';
 checkOwners.flags = {
-  'files': '  Checks only the specified OWNERS files',
-  'local_changes': '  Checks just the OWNERS files changed in the local branch',
+  'files': 'Checks only the specified OWNERS files',
+  'local_changes': 'Checks just the OWNERS files changed in the local branch',
 };
diff --git a/build-system/tasks/check-renovate-config.js b/build-system/tasks/check-renovate-config.js
index 14ba1792528f3..7d40baa9886d1 100644
--- a/build-system/tasks/check-renovate-config.js
+++ b/build-system/tasks/check-renovate-config.js
@@ -15,7 +15,7 @@
  */
 
 /**
- * @fileoverview This file implements the `gulp check-renovate-config` task,
+ * @fileoverview This file implements the `amp check-renovate-config` task,
  * which validates the Renovate configuration file using Renovate's provided
  * config validator. The output of this built-in validator is shown below.
  *
@@ -49,19 +49,19 @@
 
 'use strict';
 
-const log = require('fancy-log');
-const {cyan, red, green} = require('ansi-colors');
-const {getOutput} = require('../common/exec');
+const {cyan, green, red} = require('../common/colors');
+const {getOutput} = require('../common/process');
+const {log} = require('../common/logging');
 
 /**
  * Checks Renovate config for correctness using the validator provided by the
  * `renovate` package.
- * The cumulative result is returned to the `gulp` process via process.exitCode
+ * The cumulative result is returned to the `amp` process via process.exitCode
  * so that all OWNERS files can be checked / fixed.
  */
 async function checkRenovateConfig() {
   const {status, stdout} = getOutput(
-    'node_modules/renovate/dist/config-validator.js'
+    'npx -q -p renovate renovate-config-validator'
   );
   const [configFile] = stdout.match(/(?<=Validating )\S+/);
 
diff --git a/build-system/tasks/check-sourcemaps.js b/build-system/tasks/check-sourcemaps.js
index c624054cd4d30..1d9d22987f81f 100644
--- a/build-system/tasks/check-sourcemaps.js
+++ b/build-system/tasks/check-sourcemaps.js
@@ -17,33 +17,25 @@
 
 const argv = require('minimist')(process.argv.slice(2));
 const fs = require('fs');
-const log = require('fancy-log');
-const {cyan, green, red} = require('ansi-colors');
+const {cyan, green, red} = require('../common/colors');
 const {decode} = require('sourcemap-codec');
 const {execOrDie} = require('../common/exec');
+const {log} = require('../common/logging');
 
 // Compile related constants
-const distWithSourcemapsCmd = 'gulp dist --core_runtime_only --full_sourcemaps';
+const distWithSourcemapsCmd = 'amp dist --core_runtime_only --full_sourcemaps';
 const v0JsMap = 'dist/v0.js.map';
+const distEsmWithSourcemapsCmd =
+  'amp dist --core_runtime_only --full_sourcemaps --esm';
+const v0MjsMap = 'dist/v0.mjs.map';
 
 // Sourcemap URL related constants
 const sourcemapUrlMatcher =
   'https://raw.githubusercontent.com/ampproject/amphtml/\\d{13}/';
 
 // Mapping related constants
-const expectedFirstLineFile = 'src/internal-version.js';
-const expectedFirstLineCode = 'export function internalRuntimeVersion() {';
-
-/**
- * Throws an error with the given message
- *
- * @param {string} message
- */
-function throwError(message) {
-  const err = new Error(message);
-  err.showStack = false;
-  throw err;
-}
+const expectedFirstLineFile = 'src/polyfills/abort-controller.js'; // First file that is compiled into v0.js.
+const expectedFirstLineCode = 'class AbortController {'; // First line of code in that file.
 
 /**
  * Build runtime with sourcemaps if needed.
@@ -52,36 +44,39 @@ function maybeBuild() {
   if (!argv.nobuild) {
     log('Compiling', cyan('v0.js'), 'with full sourcemaps...');
     execOrDie(distWithSourcemapsCmd, {'stdio': 'ignore'});
+    log('Compiling', cyan('v0.mjs'), 'with full sourcemaps...');
+    execOrDie(distEsmWithSourcemapsCmd, {'stdio': 'ignore'});
   }
 }
 
 /**
  * Verifies that the sourcemap file exists, and returns its contents.
- *
+ * @param {string} map The map filepath to check
  * @return {!Object}
  */
-function getSourcemapJson() {
-  if (!fs.existsSync(v0JsMap)) {
-    log(red('ERROR:'), 'Could not find', cyan(v0JsMap));
-    throwError('Could not find sourcemap file');
+function getSourcemapJson(map) {
+  if (!fs.existsSync(map)) {
+    log(red('ERROR:'), 'Could not find', cyan(map));
+    throw new Error(`Could not find sourcemap file '${map}'`);
   }
-  return JSON.parse(fs.readFileSync(v0JsMap, 'utf8'));
+  return JSON.parse(fs.readFileSync(map, 'utf8'));
 }
 
 /**
  * Verifies that a correctly formatted sourcemap URL is present in v0.js.map.
  *
  * @param {!Object} sourcemapJson
+ * @param {string} map The map filepath to check
  */
-function checkSourcemapUrl(sourcemapJson) {
-  log('Inspecting', cyan('sourceRoot'), 'in', cyan(v0JsMap) + '...');
+function checkSourcemapUrl(sourcemapJson, map) {
+  log('Inspecting', cyan('sourceRoot'), 'in', cyan(map) + '...');
   if (!sourcemapJson.sourceRoot) {
     log(red('ERROR:'), 'Could not find', cyan('sourceRoot'));
-    throwError('Could not find sourcemap URL');
+    throw new Error('Could not find sourcemap URL');
   }
   if (!sourcemapJson.sourceRoot.match(sourcemapUrlMatcher)) {
     log(red('ERROR:'), cyan(sourcemapJson.sourceRoot), 'is badly formatted');
-    throwError('Badly formatted sourcemap URL');
+    throw new Error('Badly formatted sourcemap URL');
   }
 }
 
@@ -89,13 +84,15 @@ function checkSourcemapUrl(sourcemapJson) {
  * Verifies all the paths in the sources field are as expected.
  *
  * @param {!Object} sourcemapJson
+ * @param {string} map The map filepath to check
  */
-function checkSourcemapSources(sourcemapJson) {
-  log('Inspecting', cyan('sources'), 'in', cyan(v0JsMap) + '...');
+function checkSourcemapSources(sourcemapJson, map) {
+  log('Inspecting', cyan('sources'), 'in', cyan(map) + '...');
   if (!sourcemapJson.sources) {
     log(red('ERROR:'), 'Could not find', cyan('sources'));
-    throwError('Could not find sources array');
+    throw new Error('Could not find sources array');
   }
+  /** @type {string[]} */
   const invalidSources = sourcemapJson.sources
     .filter((source) => !source.match(/\[.*\]/)) // Ignore non-path sources '[...]'
     .filter((source) => !fs.existsSync(source)); // All source paths should exist
@@ -106,7 +103,7 @@ function checkSourcemapSources(sourcemapJson) {
       cyan('sources') + ':',
       cyan(invalidSources.join(', '))
     );
-    throwError('Invalid paths in sources array');
+    throw new Error('Invalid paths in sources array');
   }
 }
 
@@ -114,68 +111,73 @@ function checkSourcemapSources(sourcemapJson) {
  * Performs a sanity check on the mappings field in the sourcemap file.
  *
  * Today, the first line of amp.js after resolving imports comes from
- * src/internal-version.js. (The import chain is src/amp.js -> src/polyfills.js
- * -> src/mode.js -> src/internal-version.js.) This sequence is unlikely to
- * change, so we can use it as a sentinel value. Here is the process:
+ * src/polyfills/array-includes.js. (The import chain is src/amp.js ->
+ * src/polyfills/index.js -> src/polyfills/array-includes.js.) This sequence
+ * changes rarely, so we can use it as a sentinel value. Here is the process:
  *
  * 1. Decode the 'mappings' field into a 3d array using 'sourcemap-codec'.
  * 2. Extract the mapping for the first line of code in minified v0.js.
  * 3. Compute the name of the source file that corresponds to this line.
  * 4. Read the source file and extract the corresponding line of code.
- * 5. Check if the filename and the line of code match expected sentinel values.
+ * 5. Check if the filename, line of code, and column match expected sentinel values.
  *
  * @param {!Object} sourcemapJson
+ * @param {string} map The map filepath to check
  */
-function checkSourcemapMappings(sourcemapJson) {
-  log('Inspecting', cyan('mappings'), 'in', cyan(v0JsMap) + '...');
+function checkSourcemapMappings(sourcemapJson, map) {
+  log('Inspecting', cyan('mappings'), 'in', cyan(map) + '...');
   if (!sourcemapJson.mappings) {
     log(red('ERROR:'), 'Could not find', cyan('mappings'));
-    throwError('Could not find mappings array');
+    throw new Error('Could not find mappings array');
   }
 
   // Zeroth sub-array corresponds to ';' and has no mappings.
   // See https://www.npmjs.com/package/sourcemap-codec#usage
   const firstLineMapping = decode(sourcemapJson.mappings)[1][0];
-  const [
-    generatedCodeColumn,
-    sourceIndex,
-    sourceCodeLine,
-    sourceCodeColumn,
-  ] = firstLineMapping;
+  const [, sourceIndex = 0, sourceCodeLine = 0, sourceCodeColumn] =
+    firstLineMapping;
 
   const firstLineFile = sourcemapJson.sources[sourceIndex];
   const contents = fs.readFileSync(firstLineFile, 'utf8').split('\n');
-  const firstLineCode = contents[sourceCodeLine];
+  const firstLineCode = contents[sourceCodeLine].slice(sourceCodeColumn);
+  const helpMessage =
+    'If this change is intentional, update the mapping related constants in ' +
+    cyan('build-system/tasks/check-sourcemaps.js') +
+    '.';
   if (firstLineFile != expectedFirstLineFile) {
     log(red('ERROR:'), 'Found mapping for incorrect file.');
     log('Actual:', cyan(firstLineFile));
     log('Expected:', cyan(expectedFirstLineFile));
-    throwError('Found mapping for incorrect file');
+    log(helpMessage);
+    throw new Error('Found mapping for incorrect file');
   }
   if (firstLineCode != expectedFirstLineCode) {
     log(red('ERROR:'), 'Found mapping for incorrect code.');
     log('Actual:', cyan(firstLineCode));
     log('Expected:', cyan(expectedFirstLineCode));
-    throwError('Found mapping for incorrect code');
-  }
-  if (generatedCodeColumn != 0 || sourceCodeColumn != 0) {
-    log(red('ERROR:'), 'Found mapping for incorrect (non-zero) column.');
-    log('generatedCodeColumn:', cyan(generatedCodeColumn));
-    log('sourceCodeColumn:', cyan(sourceCodeColumn));
-    throwError('Found mapping for incorrect column');
+    log(helpMessage);
+    throw new Error('Found mapping for incorrect code');
   }
 }
 
+/**
+ * @param {string} map The map filepath to check
+ */
+function checkSourceMap(map) {
+  const sourcemapJson = getSourcemapJson(map);
+  checkSourcemapUrl(sourcemapJson, map);
+  checkSourcemapSources(sourcemapJson, map);
+  checkSourcemapMappings(sourcemapJson, map);
+}
+
 /**
  * Checks sourcemaps generated during minified compilation for correctness.
- * Entry point for `gulp check-sourcemaps`.
+ * Entry point for `amp check-sourcemaps`.
  */
 async function checkSourcemaps() {
   maybeBuild();
-  const sourcemapJson = getSourcemapJson();
-  checkSourcemapUrl(sourcemapJson);
-  checkSourcemapSources(sourcemapJson);
-  checkSourcemapMappings(sourcemapJson);
+  checkSourceMap(v0JsMap);
+  checkSourceMap(v0MjsMap);
   log(green('SUCCESS:'), 'All sourcemaps checks passed.');
 }
 
@@ -186,5 +188,5 @@ module.exports = {
 checkSourcemaps.description =
   'Checks sourcemaps generated during minified compilation for correctness.';
 checkSourcemaps.flags = {
-  'nobuild': '  Skips building the runtime (checks previously built code)',
+  'nobuild': 'Skips building the runtime (checks previously built code)',
 };
diff --git a/build-system/tasks/check-types.js b/build-system/tasks/check-types.js
index 98fdf317b25b4..3bfce07dc30df 100644
--- a/build-system/tasks/check-types.js
+++ b/build-system/tasks/check-types.js
@@ -14,116 +14,330 @@
  * limitations under the License.
  */
 
-const log = require('fancy-log');
-const {
-  checkTypesNailgunPort,
-  startNailgunServer,
-  stopNailgunServer,
-} = require('./nailgun');
+const argv = require('minimist')(process.argv.slice(2));
+const globby = require('globby');
 const {
   createCtrlcHandler,
   exitCtrlcHandler,
 } = require('../common/ctrlcHandler');
+const {
+  displayLifecycleDebugging,
+} = require('../compile/debug-compilation-lifecycle');
 const {cleanupBuildDir, closureCompile} = require('../compile/compile');
 const {compileCss} = require('./css');
+const {compileJison} = require('./compile-jison');
+const {cyan, green, red, yellow} = require('../common/colors');
 const {extensions, maybeInitializeExtensions} = require('./extension-helpers');
-const {maybeUpdatePackages} = require('./update-packages');
+const {logClosureCompilerError} = require('../compile/closure-compile');
+const {log} = require('../common/logging');
+const {typecheckNewServer} = require('../server/typescript-compile');
+
+/**
+ * Files that pass type-checking but don't belong to a passing directory target.
+ * Note: This is a TEMPORARY holding point during the transition to type-safety.
+ * @type {!Array<string>}
+ */
+const PRIDE_FILES_GLOBS = [
+  // Core
+  'src/core/**/*.js',
+
+  // Runtime
+  'build/amp-loader-0.1.css.js',
+  'build/ampdoc.css.js',
+  'build/ampshared.css.js',
+  'src/config.js',
+  'src/document-ready.js',
+  'src/dom.js',
+  'src/exponential-backoff.js',
+  'src/format.js',
+  'src/history.js',
+  'src/internal-version.js',
+  'src/json.js',
+  'src/log.js',
+  'src/mode.js',
+  'src/resolved-promise.js',
+  'src/time.js',
+  'src/types.js',
+  'src/url-parse-query-string.js',
+  'src/url-try-decode-uri-component.js',
+  'src/utils/bytes.js',
+  'src/utils/img.js',
+
+  // Third Party
+  'third_party/css-escape/css-escape.js',
+  'third_party/webcomponentsjs/ShadowCSS.js',
+  'node_modules/promise-pjs/package.json',
+  'node_modules/promise-pjs/promise.mjs',
+];
+
+// We provide glob lists for core src/externs since any other targets are
+// allowed to depend on core.
+const CORE_SRCS_GLOBS = [
+  'src/core/**/*.js',
+
+  // Needed for CSS escape polyfill
+  'third_party/css-escape/css-escape.js',
+];
+
+/**
+ * Generates a list of source file paths for extensions to type-check
+ * Must be run after `maybeInitializeExtensions`
+ * @function
+ * @return {!Array<string>}
+ */
+const getExtensionSrcPaths = () =>
+  Object.values(extensions)
+    .filter((ext) => !ext.noTypeCheck)
+    .map(({name, version}) => `extensions/${name}/${version}/${name}.js`)
+    .sort();
+
+/**
+ * The main configuration location to add/edit targets for type checking.
+ * Properties besides `entryPoints` are passed on to `closureCompile` as
+ * options. * Values may be objects or functions, as some require initialization
+ * or filesystem access and shouldn't be run until needed.
+ *
+ * When updating type-check targets, `srcGlobs` is the primary value you care
+ * about. This is a list of source files to include in type-checking. For any
+ * glob pattern ending in *.js, externs are picked up following the same pattern
+ * but ending in *.extern.js. Note this only applies to *.js globs, and not
+ * specific filenames. If just an array of strings is provided instead of an
+ * object, it is treated as srcGlobs.
+ *
+ * @type {Object<string, Array<string>|Object|function():Object>}
+ */
+const TYPE_CHECK_TARGETS = {
+  // Below are targets containing individual directories which are fully passing
+  // type-checking. Do not remove or disable anything on this list.
+  // Goal: Remove 'QUIET' from all of them.
+  // To test a target locally:
+  //   `amp check-types --target=src-foo-bar --warning_level=verbose`
+  'src-amp-story-player': {
+    srcGlobs: ['src/amp-story-player/**/*.js'],
+    warningLevel: 'QUIET',
+  },
+  'src-context': ['src/context/**/*.js', ...CORE_SRCS_GLOBS],
+  'src-core': CORE_SRCS_GLOBS,
+  'src-examiner': ['src/examiner/**/*.js'],
+  'src-experiments': ['src/experiments/**/*.js', ...CORE_SRCS_GLOBS],
+  'src-inabox': {
+    srcGlobs: ['src/inabox/**/*.js'],
+    warningLevel: 'QUIET',
+  },
+  'src-polyfills': [
+    'src/polyfills/**/*.js',
+    // Exclude fetch its dependencies are cleaned up/extracted to core.
+    '!src/polyfills/fetch.js',
+    ...CORE_SRCS_GLOBS,
+  ],
+  'src-preact': {
+    srcGlobs: ['src/preact/**/*.js', 'src/context/**/*.js', ...CORE_SRCS_GLOBS],
+    warningLevel: 'QUIET',
+  },
+  'src-purifier': {
+    srcGlobs: ['src/purifier/**/*.js'],
+    warningLevel: 'QUIET',
+  },
+  'src-service': {
+    srcGlobs: ['src/service/**/*.js'],
+    warningLevel: 'QUIET',
+  },
+  'src-utils': {
+    srcGlobs: ['src/utils/**/*.js'],
+    warningLevel: 'QUIET',
+  },
+  'src-web-worker': {
+    srcGlobs: ['src/web-worker/**/*.js'],
+    warningLevel: 'QUIET',
+  },
+
+  // Opposite of `shame.extern.js`. This target is a catch-all for files that
+  // are currently passing, but whose parent directories are not fully passing.
+  // Adding a file or glob here will cause CI to fail if type errors are
+  // introduced. It is okay to remove a file from this list only when fixing a
+  // bug for cherry-pick.
+  'pride': {
+    srcGlobs: PRIDE_FILES_GLOBS,
+    externGlobs: ['build-system/externs/*.extern.js'],
+  },
+
+  // Ensures that all files in src and extensions pass the specified set of
+  // errors.
+  'low-bar': {
+    entryPoints: ['src/amp.js'],
+    extraGlobs: ['{src,extensions}/**/*.js'],
+    onError(msg) {
+      const lowBarErrors = [
+        'JSC_BAD_JSDOC_ANNOTATION',
+        'JSC_INVALID_PARAM',
+        'JSC_TYPE_PARSE_ERROR',
+      ];
+      const lowBarRegex = new RegExp(lowBarErrors.join('|'));
+
+      const targetErrors = msg
+        .split('\n')
+        .filter((s) => lowBarRegex.test(s))
+        .join('\n')
+        .trim();
+
+      if (targetErrors.length) {
+        logClosureCompilerError(targetErrors);
+        throw new Error(`Type-checking failed for target ${cyan('low-bar')}`);
+      }
+    },
+  },
+
+  // TODO(#33631): Targets below this point are not expected to pass.
+  // They can possibly be removed?
+  'src': {
+    entryPoints: [
+      'src/amp.js',
+      'src/amp-shadow.js',
+      'src/inabox/amp-inabox.js',
+      'ads/alp/install-alp.js',
+      'ads/inabox/inabox-host.js',
+      'src/web-worker/web-worker.js',
+    ],
+    extraGlobs: ['src/inabox/*.js', '!node_modules/preact'],
+    warningLevel: 'QUIET',
+  },
+  'extensions': () => ({
+    entryPoints: getExtensionSrcPaths(),
+    extraGlobs: ['src/inabox/*.js', '!node_modules/preact'],
+    warningLevel: 'QUIET',
+  }),
+  'integration': {
+    entryPoints: '3p/integration.js',
+    externs: ['ads/ads.extern.js'],
+    warningLevel: 'QUIET',
+  },
+  'ampcontext': {
+    entryPoints: '3p/ampcontext-lib.js',
+    externs: ['ads/ads.extern.js'],
+    warningLevel: 'QUIET',
+  },
+  'iframe-transport-client': {
+    entryPoints: '3p/iframe-transport-client-lib.js',
+    externs: ['ads/ads.extern.js'],
+    warningLevel: 'QUIET',
+  },
+};
 
 /**
- * Dedicated type check path.
- * @return {!Promise}
+ * Produces a list of extern glob patterns from a list of source glob patterns.
+ * ex. ['src/core/** /*.js'] => ['src/core/** /*.extern.js']
+ * @param {!Array<string>} srcGlobs
+ * @return {!Array<string>}
+ */
+function externGlobsFromSrcGlobs(srcGlobs) {
+  return srcGlobs
+    .filter((glob) => glob.endsWith('*.js'))
+    .map((glob) => glob.replace(/\*\.js$/, '*.extern.js'));
+}
+
+/**
+ * Performs closure type-checking on the target provided.
+ * @param {string} targetName key in TYPE_CHECK_TARGETS
+ * @return {!Promise<void>}
+ */
+async function typeCheck(targetName) {
+  let target = TYPE_CHECK_TARGETS[targetName];
+  // Allow targets to be dynamically evaluated
+  if (typeof target == 'function') {
+    target = target();
+  }
+  // Allow targets to be specified as just an array of source globs
+  if (Array.isArray(target)) {
+    target = {srcGlobs: target};
+  }
+
+  if (!target) {
+    log(
+      red('ERROR:'),
+      'No type-check configuration defined for target',
+      cyan(targetName)
+    );
+    throw new Error(
+      `No type-check configuration defined for target ${targetName}`
+    );
+  }
+
+  const {entryPoints = [], srcGlobs = [], externGlobs = [], ...opts} = target;
+  externGlobs.push(...externGlobsFromSrcGlobs(srcGlobs));
+
+  // If srcGlobs and externGlobs are defined, determine the externs/extraGlobs
+  if (srcGlobs.length || externGlobs.length) {
+    opts.externs = externGlobs.flatMap(globby.sync);
+
+    // Included globs should explicitly exclude any externs
+    const excludedExterns = externGlobs.map((glob) => `!${glob}`);
+    opts.extraGlobs = srcGlobs.concat(excludedExterns);
+  }
+
+  // If no entry point is defined, we want to scan the globs provided without
+  // injecting extra dependencies.
+  const noAddDeps = !entryPoints.length;
+  // If the --warning_level flag is passed explicitly, it takes precedence.
+  opts.warningLevel = argv.warning_level || opts.warningLevel || 'VERBOSE';
+
+  // For type-checking, QUIET suppresses all warnings and can't affect the
+  // resulting status, so there's no point in doing it.
+  if (opts.warningLevel == 'QUIET') {
+    log(
+      yellow('WARNING:'),
+      'Warning level for target',
+      cyan(targetName),
+      `is set to ${cyan('QUIET')}; skipping`
+    );
+    return;
+  }
+
+  let errorMsg;
+  if (target.onError) {
+    // If an onError handler is defined, steal the output and let onError handle
+    // logging
+    opts.logger = (m) => (errorMsg = m);
+  }
+
+  await closureCompile(entryPoints, './dist', `${targetName}-check-types.js`, {
+    noAddDeps,
+    include3pDirectories: !noAddDeps,
+    includePolyfills: !noAddDeps,
+    typeCheckOnly: true,
+    ...opts,
+  }).catch((error) => {
+    if (!target.onError) {
+      throw error;
+    }
+    target.onError(errorMsg);
+  });
+  log(green('SUCCESS:'), 'Type-checking passed for target', cyan(targetName));
+}
+
+/**
+ * Runs closure compiler's type checker against all AMP code.
+ * @return {!Promise<void>}
  */
 async function checkTypes() {
-  maybeUpdatePackages();
   const handlerProcess = createCtrlcHandler('check-types');
+
+  // Prepare build environment
   process.env.NODE_ENV = 'production';
   cleanupBuildDir();
   maybeInitializeExtensions();
-  const compileSrcs = [
-    './src/amp.js',
-    './src/amp-shadow.js',
-    './src/inabox/amp-inabox.js',
-    './ads/alp/install-alp.js',
-    './ads/inabox/inabox-host.js',
-    './src/web-worker/web-worker.js',
-  ];
-  const extensionValues = Object.keys(extensions).map(function (key) {
-    return extensions[key];
-  });
-  const extensionSrcs = extensionValues
-    .filter(function (extension) {
-      return !extension.noTypeCheck;
-    })
-    .map(function (extension) {
-      return (
-        './extensions/' +
-        extension.name +
-        '/' +
-        extension.version +
-        '/' +
-        extension.name +
-        '.js'
-      );
-    })
-    .sort();
-  return compileCss()
-    .then(async () => {
-      await startNailgunServer(checkTypesNailgunPort, /* detached */ false);
-    })
-    .then(() => {
-      log('Checking types...');
-      return Promise.all([
-        closureCompile(
-          compileSrcs.concat(extensionSrcs),
-          './dist',
-          'check-types.js',
-          {
-            include3pDirectories: true,
-            includePolyfills: true,
-            extraGlobs: ['src/inabox/*.js', '!node_modules/preact'],
-            typeCheckOnly: true,
-          }
-        ),
-        // Type check 3p/ads code.
-        closureCompile(
-          ['./3p/integration.js'],
-          './dist',
-          'integration-check-types.js',
-          {
-            externs: ['ads/ads.extern.js'],
-            include3pDirectories: true,
-            includePolyfills: true,
-            typeCheckOnly: true,
-          }
-        ),
-        closureCompile(
-          ['./3p/ampcontext-lib.js'],
-          './dist',
-          'ampcontext-check-types.js',
-          {
-            externs: ['ads/ads.extern.js'],
-            include3pDirectories: true,
-            includePolyfills: true,
-            typeCheckOnly: true,
-          }
-        ),
-        closureCompile(
-          ['./3p/iframe-transport-client-lib.js'],
-          './dist',
-          'iframe-transport-client-check-types.js',
-          {
-            externs: ['ads/ads.extern.js'],
-            include3pDirectories: true,
-            includePolyfills: true,
-            typeCheckOnly: true,
-          }
-        ),
-      ]);
-    })
-    .then(async () => {
-      await stopNailgunServer(checkTypesNailgunPort);
-    })
-    .then(() => exitCtrlcHandler(handlerProcess));
+  typecheckNewServer();
+  await Promise.all([compileCss(), compileJison()]);
+
+  // Use the list of targets if provided, otherwise check all targets
+  const targets = argv.targets
+    ? argv.targets.split(/,/)
+    : Object.keys(TYPE_CHECK_TARGETS);
+
+  log(`Checking types for targets: ${targets.map(cyan).join(', ')}`);
+  displayLifecycleDebugging();
+
+  await Promise.all(targets.map(typeCheck));
+  exitCtrlcHandler(handlerProcess);
 }
 
 module.exports = {
@@ -134,7 +348,9 @@ module.exports = {
 
 checkTypes.description = 'Check source code for JS type errors';
 checkTypes.flags = {
-  closure_concurrency: '  Sets the number of concurrent invocations of closure',
-  disable_nailgun:
-    "  Doesn't use nailgun to invoke closure compiler (much slower)",
+  closure_concurrency: 'Sets the number of concurrent invocations of closure',
+  debug: 'Outputs the file contents during compilation lifecycles',
+  targets: 'Comma-delimited list of targets to type-check',
+  warning_level:
+    "Optionally sets closure's warning level to one of [quiet, default, verbose]",
 };
diff --git a/build-system/tasks/check-video-interface-list.js b/build-system/tasks/check-video-interface-list.js
new file mode 100644
index 0000000000000..8e5fb1d77990f
--- /dev/null
+++ b/build-system/tasks/check-video-interface-list.js
@@ -0,0 +1,87 @@
+/**
+ * Copyright 2021 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.
+ */
+const globby = require('globby');
+const {getStdout} = require('../common/process');
+const {readFile} = require('fs-extra');
+const {writeDiffOrFail} = require('../common/diff');
+
+/** Checks or updates 3rd party video player list on this Markdown file. */
+const filepath = 'docs/spec/amp-video-interface.md';
+
+/** Excludes these extensions since they're on a separate list. */
+const excludeGeneric = ['amp-video', 'amp-video-iframe'];
+
+/** Determines whether a file belongs to an extension that should be listed. */
+const grepJsContent = '@implements {.*VideoInterface}';
+
+/** Finds extension files here. */
+const grepJsFiles = 'extensions/**/*.js';
+
+/**
+ * Returns a formatted list entry.
+ * @param {string} name
+ * @return {string}
+ */
+const entry = (name) =>
+  `-   [${name}](https://amp.dev/documentation/components/${name}.md)\n`;
+
+/**
+ * Generates Markdown list by finding matching extensions.
+ * @return {string}
+ */
+const generateList = () =>
+  getStdout(
+    ['grep -lr', `"${grepJsContent}"`, ...globby.sync(grepJsFiles)].join(' ')
+  )
+    .trim()
+    .split('\n')
+    .reduce((list, path) => {
+      const name = path.substr('extensions/'.length).split('/').shift() ?? '';
+      return list + (excludeGeneric.includes(name) ? '' : entry(name));
+    }, '');
+
+/**
+ * Returns a RegExp that matches the existing list.
+ * @return {RegExp}
+ */
+const getListRegExp = () =>
+  new RegExp(
+    `(${entry('NAME')
+      .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      .replace(/\NAME/g, `((?!${excludeGeneric.join('|')})[a-z0-9-]+)`)})+`,
+    'gim'
+  );
+
+/**
+ * Checks or updates 3rd party video player list.
+ */
+async function checkVideoInterfaceList() {
+  const current = await readFile(filepath, 'utf-8');
+  const tentative = current.replace(getListRegExp(), generateList());
+  if (current !== tentative) {
+    await writeDiffOrFail('check-video-interface-list', filepath, tentative);
+  }
+}
+
+module.exports = {
+  checkVideoInterfaceList,
+};
+
+checkVideoInterfaceList.description = `Checks or updates 3rd party video player list on ${filepath}`;
+
+checkVideoInterfaceList.flags = {
+  'fix': 'Write to file',
+};
diff --git a/build-system/tasks/cherry-pick.js b/build-system/tasks/cherry-pick.js
index 2f4c0e6338985..83eb7e7835113 100644
--- a/build-system/tasks/cherry-pick.js
+++ b/build-system/tasks/cherry-pick.js
@@ -16,36 +16,22 @@
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
-const log = require('fancy-log');
-const {getOutput} = require('../common/exec');
-const {green, cyan, red, yellow} = require('ansi-colors');
-
-/**
- * Executes a shell command, and logs an error message if the command fails.
- *
- * @param {string} cmd
- * @param {string} msg
- * @return {!Object}
- */
-function execOrThrow(cmd, msg) {
-  const result = getOutput(cmd);
-  if (result.status) {
-    log(yellow('ERROR:'), msg);
-    throw new Error(result.stderr);
-  }
-
-  return result;
-}
+const {cyan, green, red, yellow} = require('../common/colors');
+const {execOrThrow} = require('../common/exec');
+const {getOutput} = require('../common/process');
+const {log} = require('../common/logging');
 
 /**
  * Determines the name of the cherry-pick branch.
  *
  * @param {string} version
+ * @param {number} numCommits
  * @return {string}
  */
-function cherryPickBranchName(version) {
+function cherryPickBranchName(version, numCommits) {
   const timestamp = version.slice(0, -3);
-  const suffix = String(Number(version.slice(-3)) + 1).padStart(3, '0');
+  const suffixNumber = Number(version.slice(-3)) + numCommits;
+  const suffix = String(suffixNumber).padStart(3, '0');
   return `amp-release-${timestamp}${suffix}`;
 }
 
@@ -53,27 +39,15 @@ function cherryPickBranchName(version) {
  * Updates tags from the remote and creates a branch at the release commit.
  *
  * @param {string} ref
- * @param {!Array<string>} commits
  * @param {string} branch
  * @param {string} remote
  */
-function prepareBranch(ref, commits, branch, remote) {
-  const needsFetch = [ref]
-    .concat(commits)
-    .some((r) => getOutput(`git rev-parse ${r}`).status);
-
-  if (needsFetch) {
-    log(green('INFO:'), 'Fetching latest tags and commits from', cyan(remote));
-    execOrThrow(
-      `git fetch ${remote}`,
-      `Failed to fetch updates from remote ${cyan(remote)}`
-    );
-  } else {
-    log(
-      green('INFO:'),
-      'Identified tag and all commits available in local repository'
-    );
-  }
+function prepareBranch(ref, branch, remote) {
+  log(green('INFO:'), 'Pulling latest from', cyan(remote));
+  execOrThrow(
+    `git pull ${remote}`,
+    `Failed to pull latest from remote ${cyan(remote)}`
+  );
 
   execOrThrow(
     `git checkout -b ${branch} ${ref}`,
@@ -102,20 +76,19 @@ function performCherryPick(sha) {
   }
 }
 
-function cherryPick() {
+/**
+ * @return {Promise<void>}
+ */
+async function cherryPick() {
   const {push, remote = 'origin'} = argv;
   const commits = (argv.commits || '').split(',').filter(Boolean);
   let onto = String(argv.onto || '');
 
   if (!commits.length) {
-    log(red('ERROR:'), 'Must provide commit list with --commits');
-    process.exitCode = 1;
-    return;
+    throw new Error('Must provide commit list with --commits');
   }
   if (!onto) {
-    log(red('ERROR:'), 'Must provide 13-digit AMP version with --onto');
-    process.exitCode = 1;
-    return;
+    throw new Error('Must provide 13-digit AMP version with --onto');
   }
   if (onto.length === 15) {
     log(
@@ -127,14 +100,12 @@ function cherryPick() {
     onto = onto.substr(2);
   }
   if (onto.length !== 13) {
-    log(red('ERROR:'), 'Expected 13-digit AMP version; got', cyan(onto));
-    process.exitCode = 1;
-    return;
+    throw new Error('Expected 13-digit AMP version');
   }
 
-  const branch = cherryPickBranchName(onto);
+  const branch = cherryPickBranchName(onto, commits.length);
   try {
-    prepareBranch(onto, commits, branch, remote);
+    prepareBranch(onto, branch, remote);
     commits.forEach(performCherryPick);
 
     if (push) {
@@ -155,12 +126,11 @@ function cherryPick() {
       green('SUCCESS:'),
       `Cherry-picked ${commits.length} commits onto release ${onto}`
     );
-    process.exitCode = 0;
   } catch (e) {
     log(red('ERROR:'), e.message);
     log('Deleting branch', cyan(branch));
-    getOutput(`git checkout master && git branch -d ${branch}`);
-    process.exitCode = 1;
+    getOutput(`git checkout main && git branch -d ${branch}`);
+    throw e;
   }
 }
 
@@ -168,8 +138,8 @@ module.exports = {cherryPick};
 
 cherryPick.description = 'Cherry-picks one or more commits onto a new branch';
 cherryPick.flags = {
-  'commits': '  Comma-delimited list of commit SHAs to cherry-pick',
-  'push': '  If set, will push the created branch to the remote',
-  'remote': '  Remote to refresh tags from (default: origin)',
-  'onto': '  13-digit AMP version to cherry-pick onto',
+  'commits': 'Comma-delimited list of commit SHAs to cherry-pick',
+  'push': 'If set, will push the created branch to the remote',
+  'remote': 'Remote to refresh tags from (default: origin)',
+  'onto': '13-digit AMP version to cherry-pick onto',
 };
diff --git a/build-system/tasks/clean.js b/build-system/tasks/clean.js
index 9ec0e46d987a2..b9ba0c1ae3d8e 100644
--- a/build-system/tasks/clean.js
+++ b/build-system/tasks/clean.js
@@ -15,33 +15,78 @@
  */
 'use strict';
 
+const argv = require('minimist')(process.argv.slice(2));
 const del = require('del');
+const path = require('path');
+const {cyan} = require('../common/colors');
+const {log} = require('../common/logging');
+
+const ROOT_DIR = path.resolve(__dirname, '../../');
 
 /**
- * Clean up the build artifacts
- * @return {!Promise}
+ * Cleans up various cache and output directories. Optionally cleans up inner
+ * node_modules package directories, or excludes some directories from deletion.
  */
 async function clean() {
-  return del([
+  const pathsToDelete = [
+    // Local cache directories
+    // Keep this list in sync with .gitignore, .eslintignore, and .prettierignore
+    '.babel-cache',
+    '.css-cache',
+    '.pre-closure-cache',
+
+    // Output directories
+    // Keep this list in sync with .gitignore, .eslintignore, and .prettierignore
+    '.amp-dep-check',
+    'build',
+    'build-system/dist',
+    'build-system/server/new-server/transforms/dist',
+    'build-system/tasks/performance/cache',
+    'build-system/tasks/performance/results.json',
+    'build-system/global-configs/custom-config.json',
     'dist',
     'dist.3p',
     'dist.tools',
-    'build',
-    '.amp-build',
-    '.karma-cache',
-    'deps.txt',
-    'build-system/runner/build',
-    'build-system/runner/dist',
-    'build-system/server/new-server/transforms/dist',
-    'validator/java/target',
-    'validator/java/src/main/resources',
-    'validator/java/src/main/java/dev/amp/validator/ValidatorProtos.java',
-    'validator/java/bazel-*',
-  ]);
+    'export',
+    'examples/storybook',
+    'extensions/**/dist',
+    'release',
+    'result-reports',
+    'src/purifier/dist',
+    'test/coverage',
+    'test/coverage-e2e',
+    'validator/**/dist',
+    'validator/export',
+  ];
+  if (argv.include_subpackages) {
+    pathsToDelete.push('**/node_modules', '!node_modules');
+  }
+  if (argv.exclude) {
+    const excludes = argv.exclude.split(',');
+    for (const exclude of excludes) {
+      pathsToDelete.push(`!${exclude}`);
+    }
+  }
+  const deletedPaths = await del(pathsToDelete, {
+    expandDirectories: false,
+    dryRun: argv.dry_run,
+  });
+  if (deletedPaths.length > 0) {
+    log(argv.dry_run ? "Paths that would've been deleted:" : 'Deleted paths:');
+    deletedPaths.forEach((deletedPath) => {
+      log('\t' + cyan(path.relative(ROOT_DIR, deletedPath)));
+    });
+  }
 }
 
 module.exports = {
   clean,
 };
 
-clean.description = 'Removes build output';
+clean.description = 'Cleans up various cache and output directories';
+clean.flags = {
+  'dry_run': 'Does a dry run without actually deleting anything',
+  'include_subpackages':
+    'Also cleans up inner node_modules package directories',
+  'exclude': 'Comma separated list of directories to exclude from deletion',
+};
diff --git a/build-system/tasks/codecov-upload.js b/build-system/tasks/codecov-upload.js
index ccc1bd6f164db..c6696f1b3b2bb 100644
--- a/build-system/tasks/codecov-upload.js
+++ b/build-system/tasks/codecov-upload.js
@@ -15,19 +15,20 @@
  */
 'use strict';
 
-const colors = require('ansi-colors');
+const colors = require('../common/colors');
 const fs = require('fs-extra');
-const log = require('fancy-log');
-const {
-  isTravisBuild,
-  isTravisPullRequestBuild,
-  travisCommitSha,
-  travisPullRequestSha,
-} = require('../common/travis');
-const {getStdout} = require('../common/exec');
+const {ciBuildSha, isCiBuild} = require('../common/ci');
+const {getStdout} = require('../common/process');
+const {log} = require('../common/logging');
 const {shortSha} = require('../common/git');
 
-const {green, yellow, cyan} = colors;
+const {cyan, green, yellow} = colors;
+const CODECOV_EXEC = './node_modules/.bin/codecov';
+const COVERAGE_REPORTS = {
+  'unit_tests': 'test/coverage/lcov-unit.info',
+  'integration_tests': 'test/coverage/lcov-integration.info',
+  'e2e_tests': 'test/coverage-e2e/lcov.info',
+};
 
 /**
  * Uploads a single report
@@ -35,8 +36,7 @@ const {green, yellow, cyan} = colors;
  * @param {string} flags
  */
 function uploadReport(file, flags) {
-  const codecovExecutable = './node_modules/.bin/codecov';
-  const codecovCmd = `${codecovExecutable} --file=${file} --flags=${flags}`;
+  const codecovCmd = `${CODECOV_EXEC} --file=${file} --flags=${flags}`;
   const output = getStdout(codecovCmd);
   const viewReportPrefix = 'View report at: ';
   const viewReport = output.match(`${viewReportPrefix}.*`);
@@ -52,33 +52,27 @@ function uploadReport(file, flags) {
 }
 
 /**
- * Uploads code coverage reports for unit and integration tests during Travis
- * jobs.
+ * Uploads code coverage reports for unit / integration tests during CI builds.
  */
 async function codecovUpload() {
-  if (!isTravisBuild()) {
+  if (!isCiBuild()) {
     log(
       yellow('WARNING:'),
-      'Code coverage reports can only be uploaded by Travis builds.'
+      'Code coverage reports can only be uploaded by CI builds.'
     );
     return;
   }
-  const commitSha = shortSha(
-    isTravisPullRequestBuild() ? travisPullRequestSha() : travisCommitSha()
-  );
+
+  const commitSha = shortSha(ciBuildSha());
   log(
     green('INFO:'),
     'Uploading coverage reports to',
     cyan(`https://codecov.io/gh/ampproject/amphtml/commit/${commitSha}`)
   );
-  const unitTestsReport = 'test/coverage/lcov-unit.info';
-  const integrationTestsReport = 'test/coverage/lcov-integration.info';
-  if (fs.existsSync(unitTestsReport)) {
-    uploadReport(unitTestsReport, 'unit_tests');
-  }
-  if (fs.existsSync(integrationTestsReport)) {
-    uploadReport(integrationTestsReport, 'integration_tests');
-  }
+
+  Object.entries(COVERAGE_REPORTS)
+    .filter(([, reportFile]) => fs.existsSync(reportFile))
+    .forEach(([testType, reportFile]) => uploadReport(reportFile, testType));
 }
 
 module.exports = {
@@ -86,4 +80,4 @@ module.exports = {
 };
 
 codecovUpload.description =
-  'Uploads code coverage reports to codecov.io during Travis builds.';
+  'Uploads code coverage reports to codecov.io during CI builds.';
diff --git a/build-system/tasks/compile-jison.js b/build-system/tasks/compile-jison.js
index ad4da510578d1..ea041ac245549 100644
--- a/build-system/tasks/compile-jison.js
+++ b/build-system/tasks/compile-jison.js
@@ -16,11 +16,10 @@
 'use strict';
 
 const fs = require('fs-extra');
-const glob = require('glob');
+const globby = require('globby');
 const jison = require('jison');
 const path = require('path');
-const {endBuildStep} = require('./helpers');
-const {jisonPaths} = require('../test-configs/config');
+const {jisonPath} = require('../test-configs/config');
 
 // set imports for each parser from directory build/parsers/.
 const imports = new Map([
@@ -31,7 +30,7 @@ const imports = new Map([
   [
     'bindParser',
     "import {AstNode, AstNodeType} from '../../extensions/amp-bind/0.1/bind-expr-defines';\n" +
-      "import {tryParseJson} from '../../src/json';",
+      "import {tryParseJson} from '../../src/core/types/object/json';",
   ],
 ]);
 
@@ -39,23 +38,21 @@ const imports = new Map([
  * Builds parsers for extensions with *.jison files.
  * Uses jison file path to name the parser to export.
  * For example, css-expr-impl.jison creates `cssParser`.
- * @return {!Promise<void>}
+ *
+ * @param {string} searchDir - directory to compile jison files within.
+ * @return {!Promise}
  */
-async function compileJison() {
+async function compileJison(searchDir = jisonPath) {
   fs.mkdirSync('build/parsers', {recursive: true});
-  const startTime = Date.now();
-  const promises = [];
-  jisonPaths.forEach((jisonPath) => {
-    glob.sync(jisonPath).forEach((jisonFile) => {
-      const jsFile = path.basename(jisonFile, '.jison');
-      const extension = jsFile.replace('-expr-impl', '');
-      const parser = extension + 'Parser';
-      const newFilePath = `build/parsers/${jsFile}.js`;
-      promises.push(compileExpr(jisonFile, parser, newFilePath));
-    });
+
+  const promises = globby.sync(searchDir).map((jisonFile) => {
+    const jsFile = path.basename(jisonFile, '.jison');
+    const extension = jsFile.replace('-expr-impl', '');
+    const parser = extension + 'Parser';
+    const newFilePath = `build/parsers/${jsFile}.js`;
+    return compileExpr(jisonFile, parser, newFilePath);
   });
-  await Promise.all(promises);
-  endBuildStep('Compiled Jison parsers into', 'build/parsers/', startTime);
+  return Promise.all(promises);
 }
 
 /**
diff --git a/build-system/tasks/coverage-map/index.js b/build-system/tasks/coverage-map/index.js
new file mode 100644
index 0000000000000..8770b22af5eb1
--- /dev/null
+++ b/build-system/tasks/coverage-map/index.js
@@ -0,0 +1,183 @@
+/**
+ * Copyright 2020 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.
+ */
+const argv = require('minimist')(process.argv.slice(2));
+const fs = require('fs').promises;
+const {buildNewServer} = require('../../server/typescript-compile');
+const {cyan} = require('../../common/colors');
+const {dist} = require('../dist');
+const {log} = require('../../common/logging');
+const {startServer, stopServer} = require('../serve');
+
+const coverageJsonName = argv.json || 'coverage.json';
+const serverPort = argv.port || 8000;
+const outHtml = argv.outputhtml || 'coverage.html';
+const inputHtml = argv.inputhtml || 'everything.amp.html';
+let testUrl = `http://localhost:${serverPort}/examples/${inputHtml}`;
+let inputJs = argv.file || 'v0.js';
+
+/**
+ * @return {Promise<void>}
+ */
+async function collectCoverage() {
+  const puppeteer = require('puppeteer');
+  log('Opening browser and navigating to', cyan(`${testUrl}`) + '...');
+  const browser = await puppeteer.launch({
+    defaultViewport: {width: 1200, height: 800},
+  });
+  const page = await browser.newPage();
+
+  // Enable JavaScript coverage
+  await page.coverage.startJSCoverage();
+  // Navigate to page
+  await page.goto(testUrl);
+  await page.waitFor(
+    () =>
+      !!document.querySelector('style[amp-runtime]') &&
+      !!document.body &&
+      getComputedStyle(document.body).visibility === 'visible'
+  );
+  log('Scrolling to the end of the page...');
+  await autoScroll(page);
+  log('Testing completed.');
+  const jsCoverage = await page.coverage.stopJSCoverage();
+  const data = JSON.stringify(jsCoverage);
+  log(
+    'Writing to',
+    cyan(`${coverageJsonName}`),
+    'in',
+    cyan(`dist/${coverageJsonName}`) + '...'
+  );
+  await fs.writeFile(`dist/${coverageJsonName}`, data);
+  await browser.close();
+}
+
+/**
+ * Source: https://github.com/chenxiaochun/blog/issues/38s
+ * TODO(#28387) change the first parameter to puppeteer.Page once puppeteer is consistently
+ * imported.
+ * @param {*} page
+ * @return {Promise<void>}
+ */
+async function autoScroll(page) {
+  await page.evaluate(async () => {
+    await /** @type {Promise<void>} */ (
+      new Promise((resolve) => {
+        let totalHeight = 0;
+        const scrollDistance = 100;
+        const distance = scrollDistance;
+        const timer = setInterval(() => {
+          const {scrollHeight} = document.body;
+          window./*OK*/ scrollBy(0, distance);
+          totalHeight += distance;
+
+          if (totalHeight >= scrollHeight) {
+            clearInterval(timer);
+            resolve();
+          }
+        }, 100);
+      })
+    );
+  });
+}
+
+/**
+ * @return {Promise<void>}
+ */
+async function htmlTransform() {
+  // @ts-ignore
+  const {transform} = require('../../server/new-server/transforms/dist/transform'); // prettier-ignore
+  log('Transforming', cyan(`${inputHtml}`) + '...');
+  const transformed = await transform(`examples/${inputHtml}`);
+  const transformedName = `transformed.${inputHtml}`;
+  await fs.mkdir('dist/transformed', {recursive: true});
+  await fs.writeFile(`dist/transformed/${transformedName}`, transformed);
+  log(
+    'Transformation complete. It can be found at',
+    cyan(`dist/transformed/${transformedName}`) + '.'
+  );
+  testUrl = `http://localhost:${serverPort}/dist/transformed/${transformedName}`;
+}
+
+/**
+ * @return {Promise<void>}
+ */
+async function generateMap() {
+  const {explore} = require('source-map-explorer');
+
+  // Change source map explorer to mjs file extension if needed
+  if (argv.esm && inputJs.includes('.js')) {
+    inputJs = inputJs.replace(/\.js/g, '.mjs');
+  }
+
+  log(
+    'Generating heat map in',
+    cyan(`dist/${outHtml}`),
+    'of',
+    cyan(`${inputJs}`),
+    'based on',
+    cyan(`${coverageJsonName}`) + '...'
+  );
+  await explore(
+    {code: `dist/${inputJs}`, map: `dist/${inputJs}.map`},
+    {
+      output: {format: 'html', filename: `dist/${outHtml}`},
+      coverage: `dist/${coverageJsonName}`,
+      onlyMapped: true,
+    }
+  );
+}
+
+/**
+ * @return {Promise<void>}
+ */
+async function coverageMap() {
+  await buildNewServer();
+
+  if (!argv.nobuild) {
+    await dist();
+  }
+
+  if (argv.esm || argv.sxg) {
+    await htmlTransform();
+  }
+
+  await startServer(
+    {host: 'localhost', port: serverPort},
+    {quiet: true},
+    {compiled: true}
+  );
+  await collectCoverage();
+  await generateMap();
+  await stopServer();
+}
+
+module.exports = {
+  coverageMap,
+};
+
+coverageMap.description =
+  'Generates a code coverage heat map for v0.js via source map explorer';
+
+coverageMap.flags = {
+  json: 'JSON output filename [default: out.json]',
+  inputhtml: 'Input HTML file under "examples/" [default: everything.amp.html]',
+  outputhtml: 'Output HTML file [default: out.html]',
+  nobuild: 'Skips dist build.',
+  port: 'Port number for AMP server [default: 8000]',
+  file: 'Output file(s) relative to dist/. Accepts .js, .mjs, and wildcards. [default: v0.js]',
+  esm: 'Generate coverage in ESM mode. Triggers an extra HTML transformation.',
+  sxg: 'Generate in SxG mode. Triggers an extra HTML transformation.',
+};
diff --git a/build-system/tasks/coverage-map/package-lock.json b/build-system/tasks/coverage-map/package-lock.json
new file mode 100644
index 0000000000000..13ea1ac8106be
--- /dev/null
+++ b/build-system/tasks/coverage-map/package-lock.json
@@ -0,0 +1,844 @@
+{
+  "name": "amp-coverage-map",
+  "version": "0.1.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@types/node": {
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.2.tgz",
+      "integrity": "sha512-p68+a+KoxpoB47015IeYZYRrdqMUcpbK8re/zpFB8Ld46LHC1lPEbp3EXgkEhAYEcPvjJF6ZO+869SQ0aH1dcA==",
+      "dev": true,
+      "optional": true
+    },
+    "@types/yauzl": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.1.tgz",
+      "integrity": "sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dev": true,
+      "requires": {
+        "debug": "4"
+      }
+    },
+    "ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
+    "async": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
+      "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true
+    },
+    "bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "requires": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "dev": true
+    },
+    "buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "requires": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "dev": true
+    },
+    "chalk": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
+    "chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "dev": true
+    },
+    "cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "convert-source-map": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        }
+      }
+    },
+    "debug": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dev": true,
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "devtools-protocol": {
+      "version": "0.0.869402",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.869402.tgz",
+      "integrity": "sha512-VvlVYY+VDJe639yHs5PHISzdWTLL3Aw8rO4cvUtwvoxFd6FHbE4OpHHcde52M6096uYYazAmd4l0o5VuFRO2WA==",
+      "dev": true
+    },
+    "duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
+    },
+    "ejs": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz",
+      "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==",
+      "dev": true,
+      "requires": {
+        "jake": "^10.6.1"
+      }
+    },
+    "emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "requires": {
+        "@types/yauzl": "^2.9.1",
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      }
+    },
+    "fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
+      "dev": true,
+      "requires": {
+        "pend": "~1.2.0"
+      }
+    },
+    "filelist": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
+      "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==",
+      "dev": true,
+      "requires": {
+        "minimatch": "^3.0.4"
+      }
+    },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true
+    },
+    "get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "requires": {
+        "pump": "^3.0.0"
+      }
+    },
+    "glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "requires": {
+        "duplexer": "^0.1.2"
+      }
+    },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
+    },
+    "https-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
+      "dev": true,
+      "requires": {
+        "agent-base": "6",
+        "debug": "4"
+      }
+    },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true
+    },
+    "is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true
+    },
+    "is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "requires": {
+        "is-docker": "^2.0.0"
+      }
+    },
+    "jake": {
+      "version": "10.8.2",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz",
+      "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==",
+      "dev": true,
+      "requires": {
+        "async": "0.9.x",
+        "chalk": "^2.4.2",
+        "filelist": "^1.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^4.1.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "open": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "dev": true,
+      "requires": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      }
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.2.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
+      "dev": true
+    },
+    "pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "requires": {
+        "find-up": "^4.0.0"
+      }
+    },
+    "progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true
+    },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "puppeteer": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-9.1.1.tgz",
+      "integrity": "sha512-W+nOulP2tYd/ZG99WuZC/I5ljjQQ7EUw/jQGcIb9eu8mDlZxNY2SgcJXTLG9h5gRvqA3uJOe4hZXYsd3EqioMw==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.0",
+        "devtools-protocol": "0.0.869402",
+        "extract-zip": "^2.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "node-fetch": "^2.6.1",
+        "pkg-dir": "^4.2.0",
+        "progress": "^2.0.1",
+        "proxy-from-env": "^1.1.0",
+        "rimraf": "^3.0.2",
+        "tar-fs": "^2.0.0",
+        "unbzip2-stream": "^1.3.3",
+        "ws": "^7.2.3"
+      }
+    },
+    "readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true
+    },
+    "source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "dev": true
+    },
+    "source-map-explorer": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/source-map-explorer/-/source-map-explorer-2.5.2.tgz",
+      "integrity": "sha512-gBwOyCcHPHcdLbgw6Y6kgoH1uLKL6hN3zz0xJcNI2lpnElZliIlmSYAjUVwAWnc7+HscoTyh1ScR7ITtFuEnxg==",
+      "dev": true,
+      "requires": {
+        "btoa": "^1.2.1",
+        "chalk": "^4.1.0",
+        "convert-source-map": "^1.7.0",
+        "ejs": "^3.1.5",
+        "escape-html": "^1.0.3",
+        "glob": "^7.1.6",
+        "gzip-size": "^6.0.0",
+        "lodash": "^4.17.20",
+        "open": "^7.3.1",
+        "source-map": "^0.7.3",
+        "temp": "^0.9.4",
+        "yargs": "^16.2.0"
+      }
+    },
+    "string-width": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "dev": true,
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.0"
+      }
+    },
+    "supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
+    "tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "requires": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "dev": true,
+      "requires": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      }
+    },
+    "temp": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/temp/-/temp-0.9.4.tgz",
+      "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==",
+      "dev": true,
+      "requires": {
+        "mkdirp": "^0.5.1",
+        "rimraf": "~2.6.2"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.6.3",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "dev": true
+    },
+    "unbzip2-stream": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
+      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
+      "dev": true,
+      "requires": {
+        "buffer": "^5.2.1",
+        "through": "^2.3.8"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "ws": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
+      "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
+      "dev": true
+    },
+    "y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true
+    },
+    "yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "requires": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      }
+    },
+    "yargs-parser": {
+      "version": "20.2.7",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz",
+      "integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==",
+      "dev": true
+    },
+    "yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    }
+  }
+}
diff --git a/build-system/tasks/coverage-map/package.json b/build-system/tasks/coverage-map/package.json
new file mode 100644
index 0000000000000..6600a41878eb6
--- /dev/null
+++ b/build-system/tasks/coverage-map/package.json
@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "name": "amp-coverage-map",
+  "version": "0.1.0",
+  "description": "amp coverage map.",
+  "devDependencies": {
+    "puppeteer": "9.1.1",
+    "source-map-explorer": "2.5.2"
+  }
+}
diff --git a/build-system/tasks/create-golden-css/css/main.css b/build-system/tasks/create-golden-css/css/main.css
index e53155ad016e4..eac098a2b6da7 100644
--- a/build-system/tasks/create-golden-css/css/main.css
+++ b/build-system/tasks/create-golden-css/css/main.css
@@ -45,7 +45,7 @@ html.i-amphtml-fie {
 /**
  * Margin:0 is currently needed for iOS viewer embeds.
  * See:
- * https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md
+ * https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md
  */
 body {
   margin: 0 !important;
@@ -621,21 +621,10 @@ amp-live-list > [update] {
 /**
  * Display none elements
  */
-amp-experiment, amp-share-tracking {
+amp-experiment {
   display: none;
 }
 
-.i-amphtml-jank-meter {
-  position: fixed;
-  background-color: rgba(232,72,95,.5);
-  bottom: 0;
-  right: 0;
-  color: #fff;
-  font-size: 16px;
-  z-index: 1000;
-  padding: 5px;
-}
-
 /**
  * Animated equalizer icon for muted autoplaying videos.
  */
diff --git a/build-system/tasks/create-golden-css/index.js b/build-system/tasks/create-golden-css/index.js
deleted file mode 100644
index b9335a359dfe9..0000000000000
--- a/build-system/tasks/create-golden-css/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright 2017 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 fs = require('fs-extra');
-const {transformCss} = require('../jsify-css');
-
-async function createGoldenCss() {
-  return transformCss('./build-system/tasks/create-golden-css/css/main.css', {
-    normalizeWhitespace: false,
-    discardComments: false,
-  }).then(function (result) {
-    fs.writeFileSync('./test/golden-files/main.css', result);
-  });
-}
-
-module.exports = {
-  createGoldenCss,
-};
-
-createGoldenCss.description = 'Creates a golden file for untransformed css';
diff --git a/build-system/tasks/css.js b/build-system/tasks/css.js
deleted file mode 100644
index 8cb7cfd969d3e..0000000000000
--- a/build-system/tasks/css.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * 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.
- */
-
-const debounce = require('debounce');
-const file = require('gulp-file');
-const fs = require('fs-extra');
-const gulp = require('gulp');
-const gulpWatch = require('gulp-watch');
-const {
-  endBuildStep,
-  mkdirSync,
-  toPromise,
-  watchDebounceDelay,
-} = require('./helpers');
-const {buildExtensions} = require('./extension-helpers');
-const {jsifyCssAsync} = require('./jsify-css');
-const {maybeUpdatePackages} = require('./update-packages');
-
-/**
- * Entry point for 'gulp css'
- * @return {!Promise}
- */
-async function css() {
-  maybeUpdatePackages();
-  return compileCss();
-}
-
-const cssEntryPoints = [
-  {
-    path: 'ampdoc.css',
-    outJs: 'ampdoc.css.js',
-    outCss: 'v0.css',
-  },
-  {
-    path: 'ampshared.css',
-    outJs: 'ampshared.css.js',
-    outCss: 'v0.css',
-    append: true,
-  },
-  {
-    path: 'video-autoplay.css',
-    outJs: 'video-autoplay.css.js',
-    // When the .css.js files are imported, the .js extension is omitted
-    // e.g. '../../build/file.css' attempts to load 'build/file.css.js'
-    // but if a file which matches without the .js extension, it will
-    // be preferred. We should rename the out.css to have a different name
-    // than the JS file to avoid loading CSS as JS
-    outCss: 'video-autoplay-out.css',
-  },
-  {
-    // Publisher imported CSS for `src/amp-story-player/amp-story-player.js`.
-    path: 'amp-story-player.css',
-    outJs: 'amp-story-player.css.js',
-    outCss: 'amp-story-player-v0.css',
-  },
-  {
-    // Internal CSS used for the iframes inside `src/amp-story-player/amp-story-player.js`.
-    path: 'amp-story-player-iframe.css',
-    outJs: 'amp-story-player-iframe.css.js',
-    outCss: 'amp-story-player-iframe-v0.css',
-  },
-];
-
-/**
- * Compile all the css and drop in the build folder
- *
- * @param {Object=} options
- * @return {!Promise}
- */
-function compileCss(options = {}) {
-  if (options.watch) {
-    const watchFunc = () => {
-      compileCss();
-    };
-    gulpWatch('css/**/*.css', debounce(watchFunc, watchDebounceDelay));
-  }
-
-  /**
-   * Writes CSS to build folder
-   *
-   * @param {string} css
-   * @param {string} jsFilename
-   * @param {string} cssFilename
-   * @param {boolean} append append CSS to existing file
-   * @return {Promise}
-   */
-  function writeCss(css, jsFilename, cssFilename, append) {
-    return toPromise(
-      file(
-        jsFilename,
-        '/** @noinline */ export const cssText = ' + JSON.stringify(css),
-        {
-          src: true,
-        }
-      )
-        .pipe(gulp.dest('build'))
-        .on('end', function () {
-          mkdirSync('build');
-          mkdirSync('build/css');
-          if (append) {
-            fs.appendFileSync(`build/css/${cssFilename}`, css);
-          } else {
-            fs.writeFileSync(`build/css/${cssFilename}`, css);
-          }
-        })
-    );
-  }
-
-  /**
-   * @param {string} path
-   * @param {string} outJs
-   * @param {string} outCss
-   * @param {boolean} append
-   * @return {!Promise}
-   */
-  function writeCssEntryPoint(path, outJs, outCss, append) {
-    return jsifyCssAsync(`css/${path}`).then((css) =>
-      writeCss(css, outJs, outCss, append)
-    );
-  }
-
-  const startTime = Date.now();
-
-  let promise = Promise.resolve();
-
-  cssEntryPoints.forEach((entryPoint) => {
-    const {path, outJs, outCss, append} = entryPoint;
-    promise = promise.then(() =>
-      writeCssEntryPoint(path, outJs, outCss, append)
-    );
-  });
-
-  return promise
-    .then(() => buildExtensions({compileOnlyCss: true}))
-    .then(() => {
-      endBuildStep('Recompiled all CSS files into', 'build/', startTime);
-    });
-}
-
-module.exports = {
-  css,
-  compileCss,
-  cssEntryPoints,
-};
-
-css.description = 'Recompile css to build directory';
diff --git a/build-system/tasks/css/index.js b/build-system/tasks/css/index.js
new file mode 100644
index 0000000000000..6d334219bb3a2
--- /dev/null
+++ b/build-system/tasks/css/index.js
@@ -0,0 +1,163 @@
+/**
+ * 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.
+ */
+
+const debounce = require('debounce');
+const fs = require('fs-extra');
+const globby = require('globby');
+const path = require('path');
+const {buildExtensions} = require('../extension-helpers');
+const {endBuildStep, watchDebounceDelay} = require('../helpers');
+const {jsifyCssAsync} = require('./jsify-css');
+const {watch} = require('chokidar');
+
+/**
+ * Entry point for 'amp css'
+ */
+async function css() {
+  await compileCss();
+}
+
+const cssEntryPoints = [
+  {
+    path: 'ampdoc.css',
+    outJs: 'ampdoc.css.js',
+    outCss: 'v0.css',
+    append: false,
+  },
+  {
+    path: 'ampshared.css',
+    outJs: 'ampshared.css.js',
+    outCss: 'v0.css',
+    append: true,
+  },
+  {
+    path: 'video-autoplay.css',
+    outJs: 'video-autoplay.css.js',
+    // When the .css.js files are imported, the .js extension is omitted
+    // e.g. '../../build/file.css' attempts to load 'build/file.css.js'
+    // but if a file which matches without the .js extension, it will
+    // be preferred. We should rename the out.css to have a different name
+    // than the JS file to avoid loading CSS as JS
+    outCss: 'video-autoplay-out.css',
+    append: false,
+  },
+  {
+    path: 'amp-story-entry-point.css',
+    outJs: 'amp-story-entry-point.css.js',
+    outCss: 'amp-story-entry-point-v0.css',
+    append: false,
+  },
+  {
+    // Publisher imported CSS for `src/amp-story-player/amp-story-player.js`.
+    path: 'amp-story-player.css',
+    outJs: 'amp-story-player.css.js',
+    outCss: 'amp-story-player-v0.css',
+    append: false,
+  },
+  {
+    // Internal CSS used for the iframes inside `src/amp-story-player/amp-story-player.js`.
+    path: 'amp-story-player-iframe.css',
+    outJs: 'amp-story-player-iframe.css.js',
+    outCss: 'amp-story-player-iframe-v0.css',
+    append: false,
+  },
+  {
+    path: 'amp-ima-video-iframe.css',
+    outJs: 'amp-ima-video-iframe.css.js',
+    outCss: 'amp-ima-video-iframe-v0.css',
+    append: false,
+  },
+];
+
+/**
+ * Copies the css from the build folder to the dist folder
+ */
+async function copyCss() {
+  const startTime = Date.now();
+  await fs.ensureDir('dist/v0');
+  for (const {outCss} of cssEntryPoints) {
+    await fs.copy(`build/css/${outCss}`, `dist/${outCss}`);
+  }
+  const cssFiles = globby.sync('build/css/amp-*.css');
+  await Promise.all(
+    cssFiles.map((cssFile) => {
+      return fs.copy(cssFile, `dist/v0/${path.basename(cssFile)}`);
+    })
+  );
+  endBuildStep('Copied', 'build/css/*.css to dist/v0/*.css', startTime);
+}
+
+/**
+ * Writes CSS to build folder
+ *
+ * @param {string} css
+ * @param {string} jsFilename
+ * @param {string} cssFilename
+ * @param {boolean} append append CSS to existing file
+ */
+async function writeCss(css, jsFilename, cssFilename, append) {
+  await fs.ensureDir('build/css');
+  const jsContent = 'export const cssText = ' + JSON.stringify(css);
+  await fs.writeFile(`build/${jsFilename}`, jsContent);
+  if (append) {
+    await fs.appendFile(`build/css/${cssFilename}`, css);
+  } else {
+    await fs.writeFile(`build/css/${cssFilename}`, css);
+  }
+}
+
+/**
+ * @param {string} path
+ * @param {string} outJs
+ * @param {string} outCss
+ * @param {boolean} append
+ */
+async function writeCssEntryPoint(path, outJs, outCss, append) {
+  const css = await jsifyCssAsync(`css/${path}`);
+  await writeCss(css, outJs, outCss, append);
+}
+
+/**
+ * Compile all the css and drop in the build folder
+ *
+ * @param {Object=} options
+ * @return {!Promise}
+ */
+async function compileCss(options = {}) {
+  if (options.watch) {
+    watch('css/**/*.css').on(
+      'change',
+      debounce(compileCss, watchDebounceDelay)
+    );
+  }
+
+  const startTime = Date.now();
+  // Must be in order because some iterations write while others append.
+  for (const {append, outCss, outJs, path} of cssEntryPoints) {
+    await writeCssEntryPoint(path, outJs, outCss, append);
+  }
+  await buildExtensions({compileOnlyCss: true});
+  endBuildStep('Recompiled all CSS files into', 'build/', startTime);
+}
+
+module.exports = {
+  css,
+  compileCss,
+  copyCss,
+  cssEntryPoints,
+};
+
+css.description = 'Recompile css to build directory';
diff --git a/build-system/tasks/css/init-sync.js b/build-system/tasks/css/init-sync.js
new file mode 100644
index 0000000000000..644945159d8a1
--- /dev/null
+++ b/build-system/tasks/css/init-sync.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2021 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 {transformCssString} = require('./jsify-css');
+
+/**
+ * Wrapper for the asynchronous transformCssString that is used by transformCssSync()
+ * in build-system/tasks/css/jsify-css-sync.js.
+ *
+ * @return {function(string, !Object=, !Object=): ReturnType<transformCssString>}
+ */
+function init() {
+  return function (cssStr, opt_filename) {
+    return Promise.resolve(transformCssString(cssStr, opt_filename));
+  };
+}
+module.exports = init;
diff --git a/build-system/tasks/css/jsify-css-sync.js b/build-system/tasks/css/jsify-css-sync.js
new file mode 100644
index 0000000000000..ef60a7717e341
--- /dev/null
+++ b/build-system/tasks/css/jsify-css-sync.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright 2021 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';
+
+/**
+ * Lazily instantiate the transformer.
+ */
+let syncTransformer;
+
+/**
+ * Synchronously transforms a css string using postcss.
+
+ * @param {string} cssStr the css text to transform
+ * @param {!Object=} opt_cssnano cssnano options
+ * @param {!Object=} opt_filename the filename of the file being transformed. Used for sourcemaps generation.
+ * @return {Object} The transformation result
+ */
+function transformCssSync(cssStr, opt_cssnano, opt_filename) {
+  if (!syncTransformer) {
+    syncTransformer = require('sync-rpc')(__dirname + '/init-sync.js');
+  }
+  return syncTransformer(cssStr, opt_cssnano, opt_filename);
+}
+
+module.exports = {
+  transformCssSync,
+};
diff --git a/build-system/tasks/css/jsify-css.js b/build-system/tasks/css/jsify-css.js
new file mode 100644
index 0000000000000..906a265e9c86e
--- /dev/null
+++ b/build-system/tasks/css/jsify-css.js
@@ -0,0 +1,171 @@
+/**
+ * Copyright 2016 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 cssnano = require('cssnano');
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+const postcssImport = require('postcss-import');
+const {
+  TransformCache,
+  batchedRead,
+  md5,
+} = require('../../common/transform-cache');
+const {log} = require('../../common/logging');
+const {red} = require('../../common/colors');
+
+// NOTE: see https://github.com/ai/browserslist#queries for `browsers` list
+const browsersList = {
+  overrideBrowserslist: [
+    'last 5 ChromeAndroid versions',
+    'last 5 iOS versions',
+    'last 3 FirefoxAndroid versions',
+    'last 5 Android versions',
+    'last 2 ExplorerMobile versions',
+    'last 2 OperaMobile versions',
+    'last 2 OperaMini versions',
+  ],
+};
+
+// See https://cssnano.co/docs/what-are-optimisations for full list.
+// We try and turn off any optimization that is marked unsafe.
+const cssNanoDefaultOptions = {
+  autoprefixer: false,
+  convertValues: false,
+  discardUnused: false,
+  cssDeclarationSorter: false,
+  // `mergeIdents` this is only unsafe if you rely on those animation names in
+  // JavaScript.
+  mergeIdents: true,
+  reduceIdents: false,
+  reduceInitial: false,
+  zindex: false,
+  svgo: {
+    encode: true,
+  },
+};
+
+const packageJsonPath = path.join(__dirname, '..', '..', '..', 'package.json');
+
+let environmentHash = null;
+
+/** @return {Promise<string>} */
+function getEnvironmentHash() {
+  if (environmentHash) {
+    return environmentHash;
+  }
+
+  // We want to set environmentHash to a promise synchronously s.t.
+  // we never end up with multiple calculations at the same time.
+  environmentHash = Promise.resolve().then(async () => {
+    const packageJsonHash = md5(await fs.promises.readFile(packageJsonPath));
+    const cssOptions = JSON.stringify({cssNanoDefaultOptions, browsersList});
+    return md5(packageJsonHash, cssOptions);
+  });
+  return environmentHash;
+}
+
+/**
+ * Used to cache css transforms done by postcss.
+ * @const {TransformCache}
+ */
+let transformCache;
+
+/**
+ * @typedef {{css: string, warnings: string[]}}:
+ */
+let CssTransformResultDef;
+
+/**
+ * Transform a css string using postcss.
+
+ * @param {string} contents the css text to transform
+ * @param {!Object=} opt_filename the filename of the file being transformed. Used for sourcemaps generation.
+ * @return {!Promise<CssTransformResultDef>} that resolves with the css content after
+ *    processing
+ */
+async function transformCssString(contents, opt_filename) {
+  const hash = md5(contents);
+  return transformCss(contents, hash, opt_filename);
+}
+
+/**
+ * 'Jsify' a CSS file - Adds vendor specific css prefixes to the css file,
+ * compresses the file, removes the copyright comment, and adds the sourceURL
+ * to the stylesheet
+ *
+ * @param {string} filename css file
+ * @return {!Promise<string>} that resolves with the css content after
+ *    processing
+ */
+async function jsifyCssAsync(filename) {
+  const {contents, hash: filehash} = await batchedRead(filename);
+  const hash = md5(filehash, await getEnvironmentHash());
+  const result = await transformCss(contents, hash, filename);
+
+  result.warnings.forEach((warn) => log(red(warn)));
+  return result.css + '\n/*# sourceURL=/' + filename + '*/';
+}
+
+/**
+ * @param {string} contents
+ * @param {string} hash
+ * @param {string=} opt_filename
+ * @return {Promise<CssTransformResultDef>}
+ */
+async function transformCss(contents, hash, opt_filename) {
+  if (!transformCache) {
+    transformCache = new TransformCache('.css-cache', '.css');
+  }
+  const cached = transformCache.get(hash);
+  if (cached) {
+    return JSON.parse((await cached).toString());
+  }
+
+  const transformed = transform(contents, opt_filename);
+  transformCache.set(
+    hash,
+    transformed.then((r) => JSON.stringify(r))
+  );
+  return transformed;
+}
+
+/**
+ * @param {string} contents
+ * @param {string=} opt_filename
+ * @return {Promise<CssTransformResultDef>}
+ */
+async function transform(contents, opt_filename) {
+  const cssnanoTransformer = cssnano({
+    preset: ['default', cssNanoDefaultOptions],
+  });
+  const {default: autoprefixer} = await import('autoprefixer'); // Lazy-imported to speed up task loading.
+  const cssprefixer = autoprefixer(browsersList);
+  const transformers = [postcssImport, cssprefixer, cssnanoTransformer];
+  return postcss
+    .default(transformers)
+    .process(contents, {'from': opt_filename})
+    .then((result) => ({
+      css: result.css,
+      warnings: result.warnings().map((warning) => warning.toString()),
+    }));
+}
+
+module.exports = {
+  jsifyCssAsync,
+  transformCssString,
+};
diff --git a/build-system/tasks/csvify-size/index.js b/build-system/tasks/csvify-size/index.js
deleted file mode 100644
index c429943cab6aa..0000000000000
--- a/build-system/tasks/csvify-size/index.js
+++ /dev/null
@@ -1,281 +0,0 @@
-/**
- * Copyright 2016 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 childProcess = require('child_process');
-const colors = require('ansi-colors');
-const fs = require('fs');
-const log = require('fancy-log');
-const util = require('util');
-
-const exec = util.promisify(childProcess.exec);
-
-const prettyBytesUnits = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-/**
- * @typedef {!Array<FieldsDef>}
- */
-let TablesDef;
-
-/**
- * @typedef {{
- *   name: string,
- *   dateTime: string,
- *   size: string
- * }}
- */
-let FieldsDef;
-
-const filePath = 'test/size.txt';
-
-const tableHeaders = [['"datetime"']];
-
-const dateTimes = [];
-
-/**
- * @param {string} format
- * @return {!Array<string>}
- */
-function getLog(format) {
-  return exec(`git log --format="${format}" ${filePath}`).then((logs) =>
-    logs.trim().split('\n')
-  );
-}
-
-/**
- * @param {string} file
- * @return {!TablesDef}
- */
-function parseSizeFile(file) {
-  const lines = file.trim().split('\n');
-  const headers = lines[0]
-    .trim()
-    .split('|')
-    .map((x) => x.trim());
-  let minPos = -1;
-  // Find the "min" column which is the closure compiled or the "size" column
-  // which was previously babelify compiled file.
-  for (let i = 0; i < headers.length; i++) {
-    if (headers[i] == 'min' || headers[i] == 'size') {
-      minPos = i;
-      break;
-    }
-  }
-
-  // Remove headers
-  lines.shift();
-  // Remove separator
-  lines.shift();
-
-  return lines
-    .map((line) => {
-      const columns = line.split('|').map((x) => x.trim());
-      let name = columns[columns.length - 1];
-
-      // Older size.txt files contained duplicate entries of the same "entity",
-      // for example a file had an entry for its .min and its .max file.
-      const shouldSkip =
-        (name.endsWith('max.js') &&
-          !name.endsWith('alp.max.js') &&
-          !/\s\/\s/.test(name)) ||
-        name == 'current/integration.js' ||
-        name == 'amp.js' ||
-        name == 'cc.js' ||
-        name.endsWith('-latest.js');
-
-      if (shouldSkip) {
-        return null;
-      }
-
-      // Normalize names. We made mistakes at some point with duplicate entries
-      // or renamed entries so we make sure to identify these entities
-      // and put then into the same column.
-      if (name == 'v0.js / amp.js' || name == 'current-min/v0.js') {
-        name = 'v0.js';
-      } else if (
-        name == 'current-min/f.js / current/integration.js' ||
-        name == 'current-min/f.js'
-      ) {
-        name = 'f.js';
-      } else if (
-        name == 'alp.max.js' ||
-        name == 'alp.js / install-alp.js' ||
-        name == 'alp.js / alp.max.js'
-      ) {
-        name = 'alp.js';
-      } else if (name == 'sw.js / sw.max.js') {
-        name = 'sw.js';
-      } else if (name == 'sw-kill.js / sw-kill.max.js') {
-        name = 'sw-kill.js';
-      } else if (name == 'a4a-host-v0.js / amp-inabox-host.js') {
-        name = 'amp4ads-host-v0.js / amp-inabox-host.js';
-      } else if (name == 'a4a-v0.js / amp-inabox.js') {
-        name = 'amp4ads-v0.js / amp-inabox.js';
-      }
-
-      return {
-        name: `"${name}"`,
-        size: `"${reversePrettyBytes(columns[minPos])}"`,
-      };
-    })
-    .filter((x) => !!x);
-}
-
-/**
- * @param {!Array<string>} dateTimes
- * @param {!TablesDef} tables
- * @return {!Array<!Array<string>>}
- */
-function mergeTables(dateTimes, tables) {
-  // Where key is filename
-  /** @typedef {!Object<string, !Array<{size: string, date: string}>>} */
-  const obj = Object.create(null);
-  const rows = [];
-
-  // Aggregate all fields with same file name into an array
-  tables.forEach((table) => {
-    table.forEach((field) => {
-      const {name} = field;
-      if (!obj[name]) {
-        obj[name] = [];
-      }
-      obj[name].push({
-        size: field.size,
-        dateTime: field.dateTime,
-      });
-    });
-  });
-
-  // Populate the headers array with unique file names for row 1
-  Object.keys(obj)
-    .sort()
-    .forEach((fileName) => {
-      // TODO(erwinm): figure out where this is occurring.
-      if (fileName.trim() == '""') {
-        return;
-      }
-      tableHeaders[0].push(fileName);
-    });
-
-  // Populate column A with all the dates we've seen and then
-  // populate all other columns with their respective file size if any.
-  dateTimes.forEach((dateTime) => {
-    // Seed array with empty string values
-    const row = Array.apply(null, Array(tableHeaders[0].length)).map(
-      () => '""'
-    );
-    rows.push(row);
-    row[0] = dateTime;
-    // Exclude the datetime column
-    tableHeaders[0].slice(1).forEach((fileName, colIdx) => {
-      colIdx = colIdx + 1;
-      let curField = null;
-      for (let i = 0; i < obj[fileName].length; i++) {
-        curField = obj[fileName][i];
-        if (curField.dateTime == dateTime) {
-          row[colIdx] = curField.size;
-          break;
-        }
-      }
-    });
-  });
-  return rows;
-}
-
-/**
- * @param {string} prettyBytes
- * @return {number}
- */
-function reversePrettyBytes(prettyBytes) {
-  const triple = prettyBytes.match(
-    /(\d+(?:\.\d+)?)\s+(B|kB|MB|GB|TB|PB|EB|ZB|YB)/
-  );
-  if (!triple) {
-    throw new Error('No matching bytes data found');
-  }
-  const value = triple[1];
-  const unit = triple[2];
-
-  if (!(value && unit)) {
-    return 0;
-  }
-  const exponent = prettyBytesUnits.indexOf(unit);
-  return (Number(value) * Math.pow(1000, exponent)).toFixed(3);
-}
-
-/**
- * Iterates through the commits and tries to checkout the file
- * @param {!Array<string>} logs
- * @return {!Promise}
- */
-function serializeCheckout(logs) {
-  const tables = [];
-  const promise = logs.reduce((acc, cur, i) => {
-    const parts = logs[i].split(' ');
-    const sha = parts.shift();
-    const dateTime = parts.join(' ');
-
-    return acc.then((tables) => {
-      // We checkout all the known commits for the file and accumulate
-      // all the tables.
-      return exec(`git checkout ${sha} ${filePath}`)
-        .then(() => {
-          return fs.promises.readFile(`${filePath}`);
-        })
-        .then((file) => {
-          const quotedDateTime = `"${dateTime}"`;
-          dateTimes.push(quotedDateTime);
-          // We convert the read file string into an Table objects
-          const fields = parseSizeFile(file.toString()).map((field) => {
-            field.dateTime = quotedDateTime;
-            return field;
-          });
-          tables.push(fields);
-          return tables;
-        })
-        .catch((e) => {
-          // Ignore if pathspec error. This can happen if the file was
-          // deleted in git.
-          if (/error: pathspec/.test(e.message)) {
-            tables.push([]);
-            return tables;
-          }
-          log(colors.red(e.message));
-        });
-    });
-  }, Promise.resolve(tables));
-  return promise.then(mergeTables.bind(null, dateTimes));
-}
-
-async function csvifySize() {
-  const shaAndDate = '%H %ai';
-  return getLog(shaAndDate).then((logs) => {
-    // Reverse it from oldest to newest
-    return serializeCheckout(logs.reverse()).then((rows) => {
-      rows.unshift.apply(rows, tableHeaders);
-      const tbl = rows.map((row) => row.join(',')).join('\n');
-      return fs.promises.writeFile('test/size.csv', `${tbl}\n`);
-    });
-  });
-}
-
-module.exports = {
-  csvifySize,
-  parseSizeFile,
-  mergeTables,
-};
-
-csvifySize.description = 'Creates a CSV file out of the size.txt file';
diff --git a/build-system/tasks/csvify-size/test.js b/build-system/tasks/csvify-size/test.js
deleted file mode 100644
index 0df1efd4a2847..0000000000000
--- a/build-system/tasks/csvify-size/test.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Copyright 2016 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 m = require('./');
-const test = require('ava');
-
-/*eslint "max-len": 0*/
-test('sync - parse size.txt', (t) => {
-  t.plan(2);
-  const sizeFiles = [
-    `  max    |    min    |    gzip   |    brotli    | file
-        --    |    ---    |    ---    |    ---       |  ---
-    12.04  kB |   5.5  kB |   3.2  kB |     1.12 kB  |  v0.js / amp.js
-    100.46 kB |  60.11 kB |  23.22 kB |     10.11 kB |  current-min/f.js / current/integration.js
-    `,
-    `  max    |    size   |   file
-        --    |    ---    |    ---
-    13 B |   12  B |  v0.js / amp.js
-    120.46 kB |  70.11 kB |  current-min/f.js
-    `,
-  ];
-  const table1 = m.parseSizeFile(sizeFiles[0]);
-  t.deepEqual(table1, [
-    {name: '"v0.js"', size: '"5500.000"'},
-    {name: '"f.js"', size: '"60110.000"'},
-  ]);
-  const table2 = m.parseSizeFile(sizeFiles[1]);
-  t.deepEqual(table2, [
-    {name: '"v0.js"', size: '"12.000"'},
-    {name: '"f.js"', size: '"70110.000"'},
-  ]);
-});
-
-test('sync - parse table typedef', (t) => {
-  t.plan(1);
-  const dateTimes = ['"0"', '"1"', '"2"'];
-  const tables = [
-    [{name: '"v0.js"', size: '"5.5"', dateTime: '"0"'}],
-    [
-      {name: '"v0.js"', size: '"8.5"', dateTime: '"1"'},
-      {name: '"f.js"', size: '"70.11"', dateTime: '"1"'},
-    ],
-    [
-      {name: '"v0.js"', size: '"8.53"', dateTime: '"2"'},
-      {name: '"f.js"', size: '"71.11"', dateTime: '"2"'},
-    ],
-  ];
-  const csv = m.mergeTables(dateTimes, tables);
-  t.deepEqual(csv, [
-    ['"0"', '""', '"5.5"'],
-    ['"1"', '"70.11"', '"8.5"'],
-    ['"2"', '"71.11"', '"8.53"'],
-  ]);
-});
diff --git a/build-system/tasks/default-task.js b/build-system/tasks/default-task.js
index 6b3fa98fed92e..df759ed4ae2ef 100644
--- a/build-system/tasks/default-task.js
+++ b/build-system/tasks/default-task.js
@@ -15,21 +15,20 @@
  */
 
 const argv = require('minimist')(process.argv.slice(2));
-const log = require('fancy-log');
 const {createCtrlcHandler} = require('../common/ctrlcHandler');
-const {cyan, green} = require('ansi-colors');
+const {cyan, green} = require('../common/colors');
 const {doServe} = require('./serve');
-const {maybeUpdatePackages} = require('./update-packages');
+const {log} = require('../common/logging');
 const {parseExtensionFlags} = require('./extension-helpers');
 const {printConfigHelp} = require('./helpers');
 const {runPreBuildSteps} = require('./build');
 const {runPreDistSteps} = require('./dist');
 
 /**
- * Prints a useful help message prior to the default gulp task
+ * Prints a useful help message prior to the default amp task
  */
 function printDefaultTaskHelp() {
-  log(green('Running the default ') + cyan('gulp ') + green('task.'));
+  log(green('Running the default ') + cyan('amp ') + green('task.'));
   log(
     green(
       '⤷ JS and extensions will be lazily built when requested from the server.'
@@ -38,15 +37,14 @@ function printDefaultTaskHelp() {
 }
 
 /**
- * The default task run when `gulp` is executed
+ * The default task run when `amp` is executed
  *
  * @return {!Promise}
  */
 async function defaultTask() {
-  maybeUpdatePackages();
-  createCtrlcHandler('gulp');
+  createCtrlcHandler('amp');
   process.env.NODE_ENV = 'development';
-  printConfigHelp('gulp');
+  printConfigHelp('amp');
   printDefaultTaskHelp();
   parseExtensionFlags(/* preBuild */ true);
   if (argv.compiled) {
@@ -67,26 +65,25 @@ module.exports = {
 defaultTask.description =
   'Starts the dev server, lazily builds JS and extensions when requested, and watches them for changes';
 defaultTask.flags = {
-  compiled: '  Compiles and serves minified binaries',
+  compiled: 'Compiles and serves minified binaries',
   pseudo_names:
-    '  Compiles with readable names. ' +
+    'Compiles with readable names. ' +
     'Great for profiling and debugging production code.',
   pretty_print:
-    '  Outputs compiled code with whitespace. ' +
+    'Outputs compiled code with whitespace. ' +
     'Great for debugging production code.',
-  fortesting: '  Compiles production binaries for local testing',
-  noconfig: '  Compiles production binaries without applying AMP_CONFIG',
-  config: '  Sets the runtime\'s AMP_CONFIG to one of "prod" or "canary"',
-  closure_concurrency: '  Sets the number of concurrent invocations of closure',
-  extensions: '  Pre-builds the given extensions, lazily builds the rest.',
+  fortesting: 'Compiles production binaries for local testing',
+  noconfig: 'Compiles production binaries without applying AMP_CONFIG',
+  config: 'Sets the runtime\'s AMP_CONFIG to one of "prod" or "canary"',
+  closure_concurrency: 'Sets the number of concurrent invocations of closure',
+  extensions: 'Pre-builds the given extensions, lazily builds the rest.',
   extensions_from:
-    '  Pre-builds the extensions used by the provided example page.',
-  full_sourcemaps: '  Includes source code content in sourcemaps',
-  disable_nailgun:
-    "  Doesn't use nailgun to invoke closure compiler (much slower)",
-  version_override: '  Overrides the version written to AMP_CONFIG',
-  host: '  Host to serve the project on. localhost by default.',
-  port: '  Port to serve the project on. 8000 by default.',
+    'Pre-builds the extensions used by the provided example page.',
+  full_sourcemaps: 'Includes source code content in sourcemaps',
+  version_override: 'Overrides the version written to AMP_CONFIG',
+  host: 'Host to serve the project on. localhost by default.',
+  port: 'Port to serve the project on. 8000 by default.',
+  https: 'Use https server. http by default.',
   define_experiment_constant:
-    '  Builds runtime with the EXPERIMENT constant set to true',
+    'Builds runtime with the EXPERIMENT constant set to true',
 };
diff --git a/build-system/tasks/dep-check.js b/build-system/tasks/dep-check.js
index ce95bfee97cf4..fbd41472eeac8 100644
--- a/build-system/tasks/dep-check.js
+++ b/build-system/tasks/dep-check.js
@@ -15,32 +15,25 @@
  */
 'use strict';
 
-const babelify = require('babelify');
-const browserify = require('browserify');
 const depCheckConfig = require('../test-configs/dep-check-config');
+const esbuild = require('esbuild');
 const fs = require('fs-extra');
-const gulp = require('gulp');
-const log = require('fancy-log');
 const minimatch = require('minimatch');
 const path = require('path');
-const source = require('vinyl-source-stream');
-const through = require('through2');
 const {
   createCtrlcHandler,
   exitCtrlcHandler,
 } = require('../common/ctrlcHandler');
 const {compileJison} = require('./compile-jison');
 const {css} = require('./css');
-const {cyan, red, yellow} = require('ansi-colors');
-const {isTravisBuild} = require('../common/travis');
-
-const root = process.cwd();
-const absPathRegExp = new RegExp(`^${root}/`);
+const {cyan, green, red, yellow} = require('../common/colors');
+const {getEsbuildBabelPlugin} = require('../common/esbuild-babel');
+const {log, logLocalDev} = require('../common/logging');
 
 /**
  * @typedef {{
  *   name: string,
- *   deps: ?Array<!Object<string, !ModuleDef>
+ *   deps: ?Array<!Object<string, !ModuleDef>>
  * }}
  */
 let ModuleDef;
@@ -55,6 +48,22 @@ let GlobDef;
  */
 let GlobsDef;
 
+/**
+ * - type - Is assumed to be "forbidden" if not provided.
+ * - filesMatching - Is assumed to be all files if not provided.
+ * - mustNotDependOn - If type is "forbidden" (default) then the files
+ *     matched must not match the glob(s) provided.
+ * - allowlist - Skip rule if this particular dependency is found.
+ *     Syntax: fileAGlob->fileB where -> reads "depends on"
+ * @typedef {{
+ *  type?: (string|undefined),
+ *  filesMatching?: (string|!Array<string>|undefined),
+ *  mustNotDependOn?: (string|!Array<string>|undefined),
+ *  allowlist?: (string|!Array<string>|undefined),
+ * }}
+ */
+let RuleConfigDef;
+
 /**
  * @constructor @final @struct
  * @param {!RuleConfigDef} config
@@ -156,90 +165,63 @@ Rule.prototype.matchBadDeps = function (moduleName, deps) {
 const rules = depCheckConfig.rules.map((config) => new Rule(config));
 
 /**
- * Returns a list of entryPoint modules.
- * extensions/{$extension}/{$version}/{$extension}.js
- * src/amp.js
- * 3p/integration.js
- *
- * @return {!Promise<!Array<string>>}
+ * Returns a single module that contains a list of entry points to these files:
+ * - extensions/{$extension}/{$version}/{$extension}.js
+ * - src/amp.js
+ * - 3p/integration.js
+ * @return {Promise<string>}
  */
-function getSrcs() {
-  return fs
-    .readdir('extensions')
-    .then((dirItems) => {
-      // Look for extension entry points
-      return flatten(
-        dirItems
-          .map((x) => `extensions/${x}`)
-          .filter((x) => fs.statSync(x).isDirectory())
-          .map(getEntryModule)
-          // Concat the core binary and integration binary as entry points.
-          .concat('src/amp.js', '3p/integration.js')
-      );
-    })
-    .then((files) => {
-      // Write all the entry modules into a single file so they can be processed
-      // together.
-      fs.mkdirpSync('./.amp-build');
-      const filename = './.amp-build/gulp-dep-check-collection.js';
-      fs.writeFileSync(
-        filename,
-        files
-          .map((file) => {
-            return `import '../${file}';`;
-          })
-          .join('\n')
-      );
-      return [filename];
-    });
+async function getEntryPointModule() {
+  const coreBinaries = ['src/amp.js', '3p/integration.js'];
+  const extensions = await fs.promises.readdir('extensions');
+  const extensionEntryPoints = extensions
+    .map((x) => `extensions/${x}`)
+    .filter((x) => fs.statSync(x).isDirectory())
+    .map(getEntryPoint);
+  const allEntryPoints = flatten(extensionEntryPoints).concat(coreBinaries);
+  const entryPointData = allEntryPoints
+    .map((file) => `import './${file}';`)
+    .join('\n');
+  return entryPointData;
 }
 
 /**
- * @param {string} entryModule
- * @return {!Promise<!ModuleDef>}
+ * @param {string} entryPointModule
+ * @return {!Promise<ModuleDef>}
  */
-function getGraph(entryModule) {
-  let resolve;
-  const promise = new Promise((r) => {
-    resolve = r;
+async function getModuleGraph(entryPointModule) {
+  const plugin = getEsbuildBabelPlugin('unminified', /* enableCache */ true);
+  const result = await esbuild.build({
+    stdin: {
+      contents: entryPointModule,
+      resolveDir: '.',
+    },
+    bundle: true,
+    write: false,
+    metafile: true,
+    plugins: [plugin],
   });
-  const module = Object.create(null);
-  module.name = entryModule;
-  module.deps = [];
-
-  // TODO(erwinm): Try and work this in with `gulp build` so that
-  // we're not running browserify twice on travis.
-  const bundler = browserify(entryModule, {
-    debug: true,
-    fast: true,
-  }).transform(babelify, {caller: {name: 'dep-check'}, global: true});
-
-  bundler.pipeline.get('deps').push(
-    through.obj(function (row, enc, next) {
-      module.deps.push({
-        name: row.file.replace(absPathRegExp, ''),
-        deps: row.deps,
-      });
-      this.push(row);
-      next();
-    })
-  );
-  bundler
-    .bundle()
-    .pipe(source(entryModule))
-    // Unfortunately we need to write the files out.
-    .pipe(gulp.dest('./.amp-build'))
-    .on('end', () => {
-      resolve(module);
+
+  const entryPoints = result.metafile.inputs;
+  const moduleGraph = Object.create(null);
+  moduleGraph.name = entryPointModule;
+  moduleGraph.deps = [];
+
+  for (const entryPoint in entryPoints) {
+    moduleGraph.deps.push({
+      name: entryPoint,
+      deps: entryPoints[entryPoint].imports.map((dep) => dep.path),
     });
-  return promise;
+  }
+  logLocalDev('Extracted module graph');
+  return moduleGraph;
 }
 
 /**
  * @param {string} extensionFolder
  * @return {!Array<!ModuleDef>}
  */
-function getEntryModule(extensionFolder) {
+function getEntryPoint(extensionFolder) {
   const extension = path.basename(extensionFolder);
   return fs
     .readdirSync(extensionFolder)
@@ -251,25 +233,17 @@ function getEntryModule(extensionFolder) {
 }
 
 /**
- * Flattens the graph to easily run through the Rules. Original graph
- * would be nested ModuleDef's wherein the top level are entry points
- * with nested dependencies. We flatten it so all we have are individual
- * modules and their imports as well as making the entries unique.
+ * Flattens the module dependency graph and makes its entries unique. This
+ * serves as the input on which all rules are tested.
  *
- * @param {!Array<!ModuleDef>} entryPoints
+ * @param {!ModuleDef} entryPoints
  * @return {!ModuleDef}
  */
 function flattenGraph(entryPoints) {
-  // Flatten the graph by just getting all the deps from all
-  // the entry points.
-  entryPoints = entryPoints.map((entryPoint) => entryPoint.deps);
-  // Now make the graph have unique entries
-  return flatten(entryPoints).reduce((acc, cur) => {
+  return flatten(entryPoints.deps).reduce((acc, cur) => {
     const {name} = cur;
     if (!acc[name]) {
-      acc[name] = Object.keys(cur.deps)
-        // Get rid of the absolute path for minimatch'ing
-        .map((x) => cur.deps[x].replace(absPathRegExp, ''));
+      acc[name] = Object.values(cur.deps);
     }
     return acc;
   }, Object.create(null));
@@ -278,12 +252,12 @@ function flattenGraph(entryPoints) {
 /**
  * Run Module dependency graph against the rules.
  *
- * @param {!ModuleDef} modules
+ * @param {!ModuleDef} moduleGraph
  * @return {boolean} true if violations were discovered.
  */
-function runRules(modules) {
+function runRules(moduleGraph) {
   const errors = [];
-  Object.entries(modules).forEach(([moduleName, deps]) => {
+  Object.entries(moduleGraph).forEach(([moduleName, deps]) => {
     // Run Rules against the modules and flatten for reporting.
     const results = rules.flatMap((rule) => rule.run(moduleName, deps));
     errors.push(...results);
@@ -302,35 +276,28 @@ function runRules(modules) {
   return errors.length > 0;
 }
 
+/**
+ * @return {Promise<void>}
+ */
 async function depCheck() {
   const handlerProcess = createCtrlcHandler('dep-check');
   await css();
   await compileJison();
-  if (!isTravisBuild()) {
-    log('Checking dependencies...');
+  logLocalDev('Checking dependencies...');
+  const entryPointModule = await getEntryPointModule();
+  const moduleGraph = await getModuleGraph(entryPointModule);
+  const errorsFound = runRules(flattenGraph(moduleGraph));
+  if (errorsFound) {
+    log(
+      yellow('NOTE:'),
+      'Invalid dependencies must be removed, while valid ones must be added to',
+      cyan('build-system/test-configs/dep-check-config.js')
+    );
+    throw new Error('Dependency checks failed');
+  } else {
+    logLocalDev(green('SUCCESS:'), 'Checked all dependencies.');
   }
-  return getSrcs()
-    .then((entryPoints) => {
-      // This check is for extension folders that actually dont have
-      // an extension entry point module yet.
-      entryPoints = entryPoints.filter((x) => fs.existsSync(x));
-      return Promise.all(entryPoints.map(getGraph));
-    })
-    .then(flattenGraph)
-    .then(runRules)
-    .then((errorsFound) => {
-      if (errorsFound) {
-        log(
-          yellow('NOTE:'),
-          'Valid dependencies should be added whereas unused ones should be deleted. Please fix',
-          cyan('build-system/test-configs/dep-check-config.js')
-        );
-        const reason = new Error('Dependency checks failed');
-        reason.showStack = false;
-        return Promise.reject(reason);
-      }
-    })
-    .then(() => exitCtrlcHandler(handlerProcess));
+  exitCtrlcHandler(handlerProcess);
 }
 
 /**
diff --git a/build-system/tasks/dev-dashboard-tests.js b/build-system/tasks/dev-dashboard-tests.js
index b8d2a858fd781..04a0709dbd4c4 100644
--- a/build-system/tasks/dev-dashboard-tests.js
+++ b/build-system/tasks/dev-dashboard-tests.js
@@ -18,7 +18,7 @@
 const config = require('../test-configs/config');
 const globby = require('globby');
 const Mocha = require('mocha');
-const {isTravisBuild} = require('../common/travis');
+const {isCiBuild} = require('../common/ci');
 
 /**
  * Run all the dev dashboard tests
@@ -26,7 +26,7 @@ const {isTravisBuild} = require('../common/travis');
  */
 async function devDashboardTests() {
   const mocha = new Mocha({
-    reporter: isTravisBuild() ? 'mocha-silent-reporter' : 'spec',
+    reporter: isCiBuild() ? 'mocha-silent-reporter' : 'spec',
   });
 
   // Add our files
diff --git a/build-system/tasks/dist.js b/build-system/tasks/dist.js
index 7501e55300a7c..1e0a42fbb833d 100644
--- a/build-system/tasks/dist.js
+++ b/build-system/tasks/dist.js
@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-const colors = require('ansi-colors');
-const file = require('gulp-file');
+const colors = require('../common/colors');
 const fs = require('fs-extra');
-const gulp = require('gulp');
-const log = require('fancy-log');
+const globby = require('globby');
+const path = require('path');
 const {
   bootstrapThirdPartyFrames,
   compileAllJs,
@@ -26,11 +25,13 @@ const {
   compileJs,
   endBuildStep,
   maybeToEsmName,
-  mkdirSync,
   printConfigHelp,
   printNobuildHelp,
-  toPromise,
 } = require('./helpers');
+const {
+  cleanupBuildDir,
+  printClosureConcurrency,
+} = require('../compile/compile');
 const {
   createCtrlcHandler,
   exitCtrlcHandler,
@@ -38,20 +39,15 @@ const {
 const {
   displayLifecycleDebugging,
 } = require('../compile/debug-compilation-lifecycle');
-const {
-  distNailgunPort,
-  startNailgunServer,
-  stopNailgunServer,
-} = require('./nailgun');
 const {buildExtensions, parseExtensionFlags} = require('./extension-helpers');
-const {cleanupBuildDir} = require('../compile/compile');
-const {compileCss, cssEntryPoints} = require('./css');
+const {buildVendorConfigs} = require('./3p-vendor-helpers');
+const {compileCss, copyCss} = require('./css');
 const {compileJison} = require('./compile-jison');
 const {formatExtractedMessages} = require('../compile/log-messages');
-const {maybeUpdatePackages} = require('./update-packages');
+const {log} = require('../common/logging');
 const {VERSION} = require('../compile/internal-version');
 
-const {green, cyan} = colors;
+const {cyan, green} = colors;
 const argv = require('minimist')(process.argv.slice(2));
 
 /**
@@ -73,7 +69,7 @@ const WEB_PUSH_PUBLISHER_VERSIONS = ['0.1'];
 const hostname = argv.hostname || 'cdn.ampproject.org';
 
 /**
- * Prints a useful help message prior to the gulp dist task
+ * Prints a useful help message prior to the amp dist task
  *
  * @param {!Object} options
  */
@@ -82,7 +78,7 @@ function printDistHelp(options) {
     throw new Error('--sanitize_vars_for_diff requires --pseudo_names');
   }
 
-  let cmd = 'gulp dist';
+  let cmd = 'amp dist';
   if (options.fortesting) {
     cmd = cmd + ' --fortesting';
   }
@@ -99,7 +95,7 @@ function printDistHelp(options) {
 
 /**
  * Perform the prerequisite steps before starting the minified build.
- * Used by `gulp` and `gulp dist`.
+ * Used by `amp` and `amp dist`.
  *
  * @param {!Object} options
  */
@@ -107,16 +103,15 @@ async function runPreDistSteps(options) {
   cleanupBuildDir();
   await prebuild();
   await compileCss(options);
-  await compileJison();
   await copyCss();
+  await compileJison();
   await copyParsers();
   await bootstrapThirdPartyFrames(options);
-  await startNailgunServer(distNailgunPort, /* detached */ false);
   displayLifecycleDebugging();
 }
 
 /**
- * Minified build. Entry point for `gulp dist`.
+ * Minified build. Entry point for `amp dist`.
  */
 async function dist() {
   await doDist();
@@ -128,7 +123,6 @@ async function dist() {
  * @param {Object=} extraArgs
  */
 async function doDist(extraArgs = {}) {
-  maybeUpdatePackages();
   const handlerProcess = createCtrlcHandler('dist');
   process.env.NODE_ENV = 'production';
   const options = {
@@ -136,11 +130,12 @@ async function doDist(extraArgs = {}) {
     minify: true,
     watch: argv.watch,
   };
+  printClosureConcurrency();
   printNobuildHelp();
   printDistHelp(options);
   await runPreDistSteps(options);
 
-  // Steps that use closure compiler. Small ones before large (parallel) ones.
+  // These steps use closure compiler. Small ones before large (parallel) ones.
   if (argv.core_runtime_only) {
     await compileCoreRuntime(options);
   } else {
@@ -148,16 +143,24 @@ async function doDist(extraArgs = {}) {
     await buildLoginDone('0.1');
     await buildWebPushPublisherFiles();
     await compileAllJs(options);
-    await buildExtensions(options);
-  }
-  if (!argv.watch) {
-    await stopNailgunServer(distNailgunPort);
   }
 
-  if (!argv.core_runtime_only) {
-    await formatExtractedMessages();
-    await generateFileListing();
+  // This step internally parses the various extension* flags.
+  await buildExtensions(options);
+
+  // This step is to be run only during a full `amp dist`.
+  if (
+    !argv.core_runtime_only &&
+    !argv.extensions &&
+    !argv.extensions_from &&
+    !argv.noextensions
+  ) {
+    await buildVendorConfigs(options);
   }
+
+  // This step is required no matter which binaries are built.
+  await formatExtractedMessages();
+
   if (!argv.watch) {
     exitCtrlcHandler(handlerProcess);
   }
@@ -165,11 +168,9 @@ async function doDist(extraArgs = {}) {
 
 /**
  * Build AMP experiments.js.
- *
- * @return {!Promise}
  */
-function buildExperiments() {
-  return compileJs(
+async function buildExperiments() {
+  await compileJs(
     './build/experiments/',
     'experiments.max.js',
     './dist.tools/experiments/',
@@ -178,7 +179,6 @@ function buildExperiments() {
       minify: true,
       includePolyfills: true,
       minifiedName: maybeToEsmName('experiments.js'),
-      esmPassCompilation: argv.esm || false,
     }
   );
 }
@@ -190,20 +190,19 @@ function buildExperiments() {
  * @return {!Promise}
  */
 function buildLoginDone(version) {
-  const buildDir = `build/all/amp-access-${version}/`;
+  const buildDir = `build/all/amp-access-${version}`;
   const builtName = `amp-login-done-${version}.max.js`;
   const minifiedName = `amp-login-done-${version}.js`;
   const latestName = 'amp-login-done-latest.js';
-  return compileJs('./' + buildDir, builtName, './dist/v0/', {
+  return compileJs(`./${buildDir}`, builtName, './dist/v0/', {
     watch: argv.watch,
     includePolyfills: true,
     minify: true,
     minifiedName,
     latestName,
-    esmPassCompilation: argv.esm || false,
     extraGlobs: [
-      buildDir + 'amp-login-done-0.1.max.js',
-      buildDir + 'amp-login-done-dialog.js',
+      `${buildDir}/amp-login-done-0.1.max.js`,
+      `${buildDir}/amp-login-done-dialog.js`,
     ],
   });
 }
@@ -213,212 +212,142 @@ function buildLoginDone(version) {
  */
 async function buildWebPushPublisherFiles() {
   const distDir = 'dist/v0';
-  const promises = [];
-  WEB_PUSH_PUBLISHER_VERSIONS.forEach((version) => {
-    WEB_PUSH_PUBLISHER_FILES.forEach((fileName) => {
-      const tempBuildDir = `build/all/amp-web-push-${version}/`;
-      const builtName = fileName + '.js';
-      const minifiedName = maybeToEsmName(fileName + '.js');
-      const p = compileJs('./' + tempBuildDir, builtName, './' + distDir, {
+  for (const version of WEB_PUSH_PUBLISHER_VERSIONS) {
+    for (const fileName of WEB_PUSH_PUBLISHER_FILES) {
+      const tempBuildDir = `build/all/amp-web-push-${version}`;
+      const builtName = `${fileName}.js`;
+      const minifiedName = maybeToEsmName(builtName);
+      await compileJs(`./${tempBuildDir}`, builtName, `./${distDir}`, {
         watch: argv.watch,
         includePolyfills: true,
         minify: true,
-        esmPassCompilation: argv.esm || false,
         minifiedName,
-        extraGlobs: [tempBuildDir + '*.js'],
+        extraGlobs: [`${tempBuildDir}/*.js`],
       });
-      promises.push(p);
-    });
-  });
-  await Promise.all(promises);
+    }
+  }
   await postBuildWebPushPublisherFilesVersion();
 }
 
+/**
+ * @return {Promise<void>}
+ */
 async function prebuild() {
   await preBuildExperiments();
   await preBuildLoginDone();
   await preBuildWebPushPublisherFiles();
 }
 
-/**
- * Copies the css from the build folder to the dist folder
- * @return {!Promise}
- */
-function copyCss() {
-  const startTime = Date.now();
-
-  cssEntryPoints.forEach(({outCss}) => {
-    fs.copySync(`build/css/${outCss}`, `dist/${outCss}`);
-  });
-
-  return toPromise(
-    gulp
-      .src('build/css/amp-*.css', {base: 'build/css/'})
-      .pipe(gulp.dest('dist/v0'))
-  ).then(() => {
-    endBuildStep('Copied', 'build/css/*.css to dist/v0/*.css', startTime);
-  });
-}
-
 /**
  * Copies parsers from the build folder to the dist folder
- * @return {!Promise}
- */
-function copyParsers() {
-  const startTime = Date.now();
-  return fs.copy('build/parsers', 'dist/v0').then(() => {
-    endBuildStep('Copied', 'build/parsers/ to dist/v0', startTime);
-  });
-}
-
-/**
- * Obtain a recursive file listing of a directory
- * @param {string} dest - Directory to be scanned
- * @return {Array} - All files found in directory
  */
-async function walk(dest) {
-  const filelist = [];
-  const files = await fs.readdir(dest);
-
-  for (let i = 0; i < files.length; i++) {
-    const file = `${dest}/${files[i]}`;
-
-    fs.statSync(file).isDirectory()
-      ? Array.prototype.push.apply(filelist, await walk(file))
-      : filelist.push(file);
-  }
-
-  return filelist;
-}
-
-/**
- * Generate a listing of all files in dist/ and save as dist/files.txt
- */
-async function generateFileListing() {
+async function copyParsers() {
   const startTime = Date.now();
-  const distDir = 'dist';
-  const filesOut = `${distDir}/files.txt`;
-  fs.writeFileSync(filesOut, '');
-  const files = (await walk(distDir)).map((f) => f.replace(`${distDir}/`, ''));
-  fs.writeFileSync(filesOut, files.join('\n') + '\n');
-  endBuildStep('Generated', filesOut, startTime);
+  await fs.copy('build/parsers', 'dist/v0');
+  endBuildStep('Copied', 'build/parsers/ to dist/v0', startTime);
 }
 
 /**
  * Build amp-web-push publisher files HTML page.
- *
- * @return {!Promise<!Array>}
  */
 async function preBuildWebPushPublisherFiles() {
-  mkdirSync('dist');
-  mkdirSync('dist/v0');
-  const promises = [];
-
-  WEB_PUSH_PUBLISHER_VERSIONS.forEach((version) => {
-    WEB_PUSH_PUBLISHER_FILES.forEach((fileName) => {
-      const basePath = `extensions/amp-web-push/${version}/`;
-      const tempBuildDir = `build/all/amp-web-push-${version}/`;
+  for (const version of WEB_PUSH_PUBLISHER_VERSIONS) {
+    for (const fileName of WEB_PUSH_PUBLISHER_FILES) {
+      const srcPath = `extensions/amp-web-push/${version}`;
+      const destPath = `build/all/amp-web-push-${version}`;
 
       // Build Helper Frame JS
-      const js = fs.readFileSync(basePath + fileName + '.js', 'utf8');
-      const builtName = fileName + '.js';
-      const promise = toPromise(
-        gulp
-          .src(basePath + '/*.js', {base: basePath})
-          .pipe(file(builtName, js))
-          .pipe(gulp.dest(tempBuildDir))
+      const js = await fs.readFile(`${srcPath}/${fileName}.js`, 'utf8');
+      const builtName = `${fileName}.js`;
+      await fs.outputFile(`${destPath}/${builtName}`, js);
+      const jsFiles = globby.sync(`${srcPath}/*.js`);
+      await Promise.all(
+        jsFiles.map((jsFile) => {
+          return fs.copy(jsFile, `${destPath}/${path.basename(jsFile)}`);
+        })
       );
-      promises.push(promise);
-    });
-  });
-  return Promise.all(promises);
+    }
+  }
 }
 
 /**
  * post Build amp-web-push publisher files HTML page.
  */
-function postBuildWebPushPublisherFilesVersion() {
+async function postBuildWebPushPublisherFilesVersion() {
   const distDir = 'dist/v0';
-  WEB_PUSH_PUBLISHER_VERSIONS.forEach((version) => {
-    const basePath = `extensions/amp-web-push/${version}/`;
-    WEB_PUSH_PUBLISHER_FILES.forEach((fileName) => {
-      const minifiedName = maybeToEsmName(fileName + '.js');
-      if (!fs.existsSync(distDir + '/' + minifiedName)) {
-        throw new Error(`Cannot find ${distDir}/${minifiedName}`);
+  for (const version of WEB_PUSH_PUBLISHER_VERSIONS) {
+    const basePath = `extensions/amp-web-push/${version}`;
+    for (const fileName of WEB_PUSH_PUBLISHER_FILES) {
+      const minifiedName = maybeToEsmName(`${fileName}.js`);
+      const minifiedFile = `${distDir}/${minifiedName}`;
+      if (!fs.existsSync(minifiedFile)) {
+        throw new Error(`Cannot find ${minifiedFile}`);
       }
 
       // Build Helper Frame HTML
-      let fileContents = fs.readFileSync(basePath + fileName + '.html', 'utf8');
-      fileContents = fileContents.replace(
-        '<!-- [GULP-MAGIC-REPLACE ' + fileName + '.js] -->',
-        '<script>' +
-          fs.readFileSync(distDir + '/' + minifiedName, 'utf8') +
-          '</script>'
+      const html = await fs.readFile(`${basePath}/${fileName}.html`, 'utf8');
+      const js = await fs.readFile(minifiedFile, 'utf8');
+      const minifiedHtml = html.replace(
+        `<!-- [REPLACE-SENTINEL ${fileName}.js] -->`,
+        `<script>${js}</script>`
       );
-
-      fs.writeFileSync('dist/v0/' + fileName + '.html', fileContents);
-    });
-  });
+      await fs.outputFile(`dist/v0/${fileName}.html`, minifiedHtml);
+    }
+  }
 }
 
 /**
  * Precompilation steps required to build experiment js binaries.
- * @return {!Promise}
  */
 async function preBuildExperiments() {
-  const path = 'tools/experiments';
-  const htmlPath = path + '/experiments.html';
-  const jsPath = path + '/experiments.js';
+  const expDir = 'tools/experiments';
+  const htmlDestDir = 'dist.tools/experiments';
+  const htmlSrcPath = `${expDir}/experiments.html`;
+  const jsSrcPath = `${expDir}/experiments.js`;
 
   // Build HTML.
-  const html = fs.readFileSync(htmlPath, 'utf8');
+  const html = await fs.readFile(htmlSrcPath, 'utf8');
   const minHtml = html
     .replace(
       '/dist.tools/experiments/experiments.js',
       `https://${hostname}/v0/experiments.js`
     )
     .replace(/\$internalRuntimeVersion\$/g, VERSION);
-
-  await toPromise(
-    gulp
-      .src(htmlPath)
-      .pipe(file('experiments.cdn.html', minHtml))
-      .pipe(gulp.dest('dist.tools/experiments/'))
-  );
+  await fs.outputFile(`${htmlDestDir}/experiments.cdn.html`, minHtml);
+  await fs.copy(htmlSrcPath, `${htmlDestDir}/${path.basename(htmlSrcPath)}`);
 
   // Build JS.
-  const js = fs.readFileSync(jsPath, 'utf8');
+  const jsDir = 'build/experiments/';
+  const js = await fs.readFile(jsSrcPath, 'utf8');
   const builtName = 'experiments.max.js';
-  return toPromise(
-    gulp
-      .src(path + '/*.js')
-      .pipe(file(builtName, js))
-      .pipe(gulp.dest('build/experiments/'))
+  await fs.outputFile(`${jsDir}/${builtName}`, js);
+  const jsFiles = globby.sync(`${expDir}/*.js`);
+  await Promise.all(
+    jsFiles.map((jsFile) => {
+      return fs.copy(jsFile, `${jsDir}/${path.basename(jsFile)}`);
+    })
   );
 }
 
 /**
  * Build "Login Done" page.
- * @return {!Promise}
  */
-function preBuildLoginDone() {
-  return preBuildLoginDoneVersion('0.1');
+async function preBuildLoginDone() {
+  await preBuildLoginDoneVersion('0.1');
 }
 
 /**
  * Build "Login Done" page for the specified version.
- *
  * @param {string} version
- * @return {!Promise}
  */
-function preBuildLoginDoneVersion(version) {
-  const path = `extensions/amp-access/${version}/`;
-  const buildDir = `build/all/amp-access-${version}/`;
-  const htmlPath = path + 'amp-login-done.html';
-  const jsPath = path + 'amp-login-done.js';
+async function preBuildLoginDoneVersion(version) {
+  const srcDir = `extensions/amp-access/${version}`;
+  const buildDir = `build/all/amp-access-${version}`;
+  const htmlPath = `${srcDir}/amp-login-done.html`;
+  const jsPath = `${srcDir}/amp-login-done.js`;
 
   // Build HTML.
-  const html = fs.readFileSync(htmlPath, 'utf8');
+  const html = await fs.readFile(htmlPath, 'utf8');
   const minJs = `https://${hostname}/v0/amp-login-done-${version}.js`;
   const minHtml = html
     .replace(`../../../dist/v0/amp-login-done-${version}.max.js`, minJs)
@@ -426,20 +355,17 @@ function preBuildLoginDoneVersion(version) {
   if (minHtml.indexOf(minJs) == -1) {
     throw new Error('Failed to correctly set JS in login-done.html');
   }
-
-  mkdirSync('dist');
-  mkdirSync('dist/v0');
-
-  fs.writeFileSync('dist/v0/amp-login-done-' + version + '.html', minHtml);
+  await fs.outputFile(`dist/v0/amp-login-done-${version}.html`, minHtml);
 
   // Build JS.
-  const js = fs.readFileSync(jsPath, 'utf8');
-  const builtName = 'amp-login-done-' + version + '.max.js';
-  return toPromise(
-    gulp
-      .src(path + '/*.js', {base: path})
-      .pipe(file(builtName, js))
-      .pipe(gulp.dest(buildDir))
+  const js = await fs.readFile(jsPath, 'utf8');
+  const builtName = `amp-login-done-${version}.max.js`;
+  await fs.outputFile(`${buildDir}/${builtName}`, js);
+  const jsFiles = globby.sync(`${srcDir}/*.js`);
+  await Promise.all(
+    jsFiles.map((jsFile) => {
+      return fs.copy(jsFile, `${buildDir}/${path.basename(jsFile)}`);
+    })
   );
 }
 
@@ -455,30 +381,32 @@ dist.description =
   'Compiles AMP production binaries and applies AMP_CONFIG to runtime files';
 dist.flags = {
   pseudo_names:
-    '  Compiles with readable names. ' +
+    'Compiles with readable names. ' +
     'Great for profiling and debugging production code.',
   pretty_print:
-    '  Outputs compiled code with whitespace. ' +
+    'Outputs compiled code with whitespace. ' +
     'Great for debugging production code.',
-  fortesting: '  Compiles production binaries for local testing',
-  noconfig: '  Compiles production binaries without applying AMP_CONFIG',
-  config: '  Sets the runtime\'s AMP_CONFIG to one of "prod" or "canary"',
-  extensions: '  Builds only the listed extensions.',
-  extensions_from: '  Builds only the extensions from the listed AMP(s).',
-  noextensions: '  Builds with no extensions.',
-  core_runtime_only: '  Builds only the core runtime.',
-  full_sourcemaps: '  Includes source code content in sourcemaps',
-  disable_nailgun:
-    "  Doesn't use nailgun to invoke closure compiler (much slower)",
-  sourcemap_url: '  Sets a custom sourcemap URL with placeholder {version}',
-  type: '  Points sourcemap to fetch files from the correct GitHub tag',
-  esm: '  Does not transpile down to ES5',
-  version_override: '  Override the version written to AMP_CONFIG',
-  watch: '  Watches for changes in files, re-compiles when detected',
-  closure_concurrency: '  Sets the number of concurrent invocations of closure',
-  debug: '  Outputs the file contents during compilation lifecycles',
+  fortesting: 'Compiles production binaries for local testing',
+  noconfig: 'Compiles production binaries without applying AMP_CONFIG',
+  config: 'Sets the runtime\'s AMP_CONFIG to one of "prod" or "canary"',
+  coverage: 'Instruments compiled code for collecting coverage information',
+  extensions: 'Builds only the listed extensions.',
+  extensions_from: 'Builds only the extensions from the listed AMP(s).',
+  noextensions: 'Builds with no extensions.',
+  core_runtime_only: 'Builds only the core runtime.',
+  full_sourcemaps: 'Includes source code content in sourcemaps',
+  sourcemap_url: 'Sets a custom sourcemap URL with placeholder {version}',
+  type: 'Points sourcemap to fetch files from the correct GitHub tag',
+  esm: 'Does not transpile down to ES5',
+  version_override: 'Override the version written to AMP_CONFIG',
+  watch: 'Watches for changes in files, re-compiles when detected',
+  closure_concurrency: 'Sets the number of concurrent invocations of closure',
+  debug: 'Outputs the file contents during compilation lifecycles',
   define_experiment_constant:
-    '  Builds runtime with the EXPERIMENT constant set to true',
+    'Builds runtime with the EXPERIMENT constant set to true',
   sanitize_vars_for_diff:
-    '  Sanitize the output to diff build results. Requires --pseudo_names',
+    'Sanitize the output to diff build results. Requires --pseudo_names',
+  sxg: 'Outputs the compiled code for the SxG build',
+  warning_level:
+    "Optionally sets closure's warning level to one of [quiet, default, verbose]",
 };
diff --git a/build-system/tasks/e2e/DEBUGGING.md b/build-system/tasks/e2e/DEBUGGING.md
index c08f927b4e926..a280203cfe726 100644
--- a/build-system/tasks/e2e/DEBUGGING.md
+++ b/build-system/tasks/e2e/DEBUGGING.md
@@ -1,8 +1,8 @@
 ## Debugging AMP E2E tests
 
 ```sh
-node --inspect-brk $(which gulp) e2e
-node --inspect-brk $(which gulp) e2e --nobuild # ... etc
+node --inspect-brk $(which amp) e2e
+node --inspect-brk $(which amp) e2e --nobuild # ... etc
 ```
 
 Include any flags after `e2e` like normal.
diff --git a/build-system/tasks/e2e/OWNERS b/build-system/tasks/e2e/OWNERS
index d3a1b00d7fa5f..d7634080ca7f9 100644
--- a/build-system/tasks/e2e/OWNERS
+++ b/build-system/tasks/e2e/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/build-system/tasks/e2e/README.md b/build-system/tasks/e2e/README.md
index e7308a9f87094..235cbb5686456 100644
--- a/build-system/tasks/e2e/README.md
+++ b/build-system/tasks/e2e/README.md
@@ -2,22 +2,30 @@
 
 AMP contributors embrace testing to maintain confidence that their code is executing correctly during development and maintenance of features and fixes. End-to-end (or E2E) tests aim to closely reproduce how a user would interact with a document as possible.
 
-- [What is an end-to-end test?](#what-is-an-end-to-end-test)
-- [Choosing which features to test](#choosing-which-features-to-test)
-- [Writing E2E tests](#writing-e2e-tests)
-- [Debugging E2E tests](#debugging-e2e-tests)
+<!--
+  (Do not remove or edit this comment.)
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+<!-- {"maxdepth": 1} -->
+
+-   [What is an end-to-end test?](#what-is-an-end-to-end-test)
+-   [Choosing which features to test](#choosing-which-features-to-test)
+-   [Writing E2E tests](#writing-e2e-tests)
+-   [Debugging E2E tests](#debugging-e2e-tests)
 
 This document is a usage guide. For full test command documentation, consult the following resource:
 
-- [Information on executing tests](../../../contributing/TESTING.md)
+-   [Information on executing tests](../../../docs/testing.md)
 
 ## What is an end-to-end test?
 
 Let's compare the test types available to AMP contributors:
 
-- Unit tests
-- Integration tests
-- End-to-end tests
+-   Unit tests
+-   Integration tests
+-   End-to-end tests
 
 Unit tests are useful for testing individual behaviors of a feature or fix. They are cheap to execute since they use mocks heavily to eliminate dependencies that need to also be executed during testing. These should be the most common type of test for a feature. These should fail rarely for reasons other than bugs.
 
@@ -35,13 +43,13 @@ End-to-end tests are able to test a full page as the user's browser would load i
 
 End-to-end tests should verify the most important user flows of a component. Prioritize tests for behaviors that would make the page appear very obviously broken if there was a failure. For example:
 
-- The component's initial render
-- Primary user interactions
-  - e.g. clicking the next button on a carousel
-- Features with heavy usage by a large number of AMP publishers
-  - e.g. loading more content at the bottom of an amp page
-- Important behaviors that are frequently broken
-  - e.g. browser updates often break video autoplay behavior
+-   The component's initial render
+-   Primary user interactions
+    -   e.g. clicking the next button on a carousel
+-   Features with heavy usage by a large number of AMP publishers
+    -   e.g. loading more content at the bottom of an amp page
+-   Important behaviors that are frequently broken
+    -   e.g. browser updates often break video autoplay behavior
 
 ## Writing E2E tests
 
@@ -152,7 +160,7 @@ E2E test code runs in `node` and the code under test runs in the browser with th
 ### node inspect
 
 ```sh
-node --inspect-brk $(which gulp) e2e --nobuild --testnames --files=extensions/amp-foo/0.1/test-e2e/test-amp-foo-basic.js
+node --inspect-brk $(which amp) e2e --nobuild --testnames --files=extensions/amp-foo/0.1/test-e2e/test-amp-foo-basic.js
 ```
 
 Open Chrome DevTools and click the Node logo in the top left.
@@ -185,4 +193,4 @@ In the Node debugger, the `repl` global provides a reference to the test control
 
 ### watch mode
 
-Debug tests in `watch` mode with the `--watch` flag. This will allow you to make changes to test files without having to rerun the `gulp e2e` task.
+Debug tests in `watch` mode with the `--watch` flag. This will allow you to make changes to test files without having to rerun the `amp e2e` task.
diff --git a/build-system/tasks/e2e/amp-driver.js b/build-system/tasks/e2e/amp-driver.js
index 1b7727e69be82..9a4c26ed3aa3a 100644
--- a/build-system/tasks/e2e/amp-driver.js
+++ b/build-system/tasks/e2e/amp-driver.js
@@ -18,6 +18,7 @@
 const AmpdocEnvironment = {
   SINGLE: 'single',
   VIEWER_DEMO: 'viewer-demo',
+  EMAIL_DEMO: 'email-demo',
   SHADOW_DEMO: 'shadow-demo',
 
   // AMPHTML ads environments
@@ -32,7 +33,7 @@ const HOST = 'http://localhost:8000';
 
 const EnvironmentBehaviorMap = {
   [AmpdocEnvironment.SINGLE]: {
-    ready(unusedController) {
+    ready() {
       return Promise.resolve();
     },
 
@@ -49,21 +50,18 @@ const EnvironmentBehaviorMap = {
     },
 
     url(url) {
-      const defaultCaps = [
-        'a2a',
-        'focus-rect',
-        'foo',
-        'keyboard',
-        'swipe',
-        'iframeScroll',
-      ];
-      // Correctly append extra params in original url
-      url = url.replace('#', '&');
-      // TODO(estherkim): somehow allow non-8000 port and domain
-      return (
-        `http://localhost:8000/test/fixtures/e2e/amp-viewer-integration/viewer.html#href=${url}` +
-        `&caps=${defaultCaps.join(',')}`
-      );
+      return getViewerUrl(url);
+    },
+  },
+
+  [AmpdocEnvironment.EMAIL_DEMO]: {
+    ready(controller) {
+      return controller
+        .findElement('#viewer[data-loaded]')
+        .then((frame) => controller.switchToFrame(frame));
+    },
+    url(url) {
+      return getViewerUrl(url, {isEmail: true});
     },
   },
 
@@ -135,12 +133,36 @@ const EnvironmentBehaviorMap = {
   },
 };
 
+/**
+ * @param {string} url
+ * @param {{isEmail: boolean}=} opts
+ * @return {string}
+ */
+function getViewerUrl(url, {isEmail} = {isEmail: false}) {
+  const defaultCaps = [
+    'a2a',
+    'focus-rect',
+    'foo',
+    'keyboard',
+    'swipe',
+    'iframeScroll',
+  ];
+  // Correctly append extra params in original url
+  url = url.replace('#', '&');
+  // TODO(estherkim): somehow allow non-8000 port and domain
+  return (
+    `http://localhost:8000/test/fixtures/e2e/amp-viewer-integration/viewer.html#href=${url}` +
+    `&caps=${defaultCaps.join(',')}` +
+    `&isEmail=${isEmail}`
+  );
+}
+
 /**
  * Provides AMP-related utilities for E2E Functional Tests.
  */
 class AmpDriver {
   /**
-   * @param {!../functional-test-controller.FunctionalTestController} controller
+   * @param {!*} controller
    */
   constructor(controller) {
     /** @private @const */
diff --git a/build-system/tasks/e2e/controller-promise.js b/build-system/tasks/e2e/controller-promise.js
index 8d4964e3c5091..0fdf7f865f584 100644
--- a/build-system/tasks/e2e/controller-promise.js
+++ b/build-system/tasks/e2e/controller-promise.js
@@ -22,14 +22,19 @@
  * the new values that come from the browser.
  *
  * @template TYPE
- * @extends {Promise}
+ * @extends {Promise<?TYPE>}
  */
-class ControllerPromise {
+class ControllerPromise extends Promise {
   /**
-   * @param {function(function(?TYPE):void, function(*):void):void|!Promise<TYPE>} executorOrPromise
-   * @param {function(TYPE,function(TYPE): ?TYPE): !Promise=} opt_waitForValue
+   * @param {Promise<TYPE|null>|function(function(?TYPE):void, function(*):void):void} executorOrPromise
+   * @param {undefined|function(TYPE,function(TYPE): ?TYPE): Promise<TYPE>} opt_waitForValue
    */
   constructor(executorOrPromise, opt_waitForValue) {
+    if (executorOrPromise instanceof Promise) {
+      super(executorOrPromise.then);
+    } else {
+      super(executorOrPromise);
+    }
     this.promise_ =
       typeof executorOrPromise == 'function'
         ? new Promise(executorOrPromise)
@@ -62,9 +67,8 @@ class ControllerPromise {
 
   /** @override */
   then(opt_onFulfilled, opt_onRejected) {
-    opt_onFulfilled = opt_onFulfilled || ((x) => x);
     // Allow this and future `then`s to update the wait value.
-    let wrappedWait = null;
+    let wrappedWait;
     if (this.waitForValue) {
       wrappedWait = wrapWait(this.waitForValue, opt_onFulfilled);
     }
@@ -80,14 +84,18 @@ class ControllerPromise {
  * Wrap the given wait function with the given mutation function,
  * while still allowing it to be mutated again in the future by
  * the inner opt_mutate function.
- * @param {function(TYPE,function(TYPE): ?TYPE): !Promise=} wait
- * @param {function(TYPE): TYPE} mutate
- * @return {!Promise}
- * @template TYPE
+ * @param {function(CONDITION, function(VALUE): ?DERIVED): Promise<RES>} wait
+ * @param {function(VALUE): MUTANT} mutate
+ * @return {function(CONDITION, function(MUTANT): ?DERIVED): Promise<RES>}
+ * @template CONDITION
+ * @template MUTANT
+ * @template DERIVED
+ * @template VALUE
+ * @template RES
  */
 function wrapWait(wait, mutate) {
   return (condition, opt_mutate) => {
-    opt_mutate = opt_mutate || ((x) => x);
+    opt_mutate = opt_mutate || ((x) => /** @type {*} */ (x));
     return wait(condition, (value) => opt_mutate(mutate(value)));
   };
 }
diff --git a/build-system/tasks/e2e/describes-e2e.js b/build-system/tasks/e2e/describes-e2e.js
index 06d49b92c517e..4c0b965a81209 100644
--- a/build-system/tasks/e2e/describes-e2e.js
+++ b/build-system/tasks/e2e/describes-e2e.js
@@ -14,12 +14,14 @@
  * limitations under the License.
  */
 // import to install chromedriver and geckodriver
-require('chromedriver'); // eslint-disable-line no-unused-vars
-require('geckodriver'); // eslint-disable-line no-unused-vars
+require('chromedriver');
+require('geckodriver');
 
+const argv = require('minimist')(process.argv.slice(2));
 const chrome = require('selenium-webdriver/chrome');
+const fetch = require('node-fetch');
 const firefox = require('selenium-webdriver/firefox');
-const puppeteer = require('puppeteer');
+const selenium = require('selenium-webdriver');
 const {
   clearLastExpectError,
   getLastExpectError,
@@ -29,10 +31,10 @@ const {
   SeleniumWebDriverController,
 } = require('./selenium-webdriver-controller');
 const {AmpDriver, AmpdocEnvironment} = require('./amp-driver');
-const {Builder, Capabilities, logging} = require('selenium-webdriver');
+const {HOST, PORT} = require('../serve');
 const {installRepl, uninstallRepl} = require('./repl');
-const {isTravisBuild} = require('../../common/travis');
-const {PuppeteerController} = require('./puppeteer-controller');
+const {isCiBuild} = require('../../common/ci');
+const {Builder, Capabilities, logging} = selenium;
 
 /** Should have something in the name, otherwise nothing is shown. */
 const SUB = ' ';
@@ -40,42 +42,28 @@ const TEST_TIMEOUT = 40000;
 const SETUP_TIMEOUT = 30000;
 const SETUP_RETRIES = 3;
 const DEFAULT_E2E_INITIAL_RECT = {width: 800, height: 600};
+const COV_REPORT_PATH = '/coverage/client';
 const supportedBrowsers = new Set(['chrome', 'firefox', 'safari']);
-/**
- * TODO(cvializ): Firefox now experimentally supports puppeteer.
- * When it's more mature we might want to support it.
- * {@link https://github.com/GoogleChrome/puppeteer/blob/master/experimental/puppeteer-firefox/README.md}
- */
-const PUPPETEER_BROWSERS = new Set(['chrome']);
 
 /**
- * Engine types for e2e testing.
- * @enum {string}
+ * Load coverage middleware only if needed.
  */
-const EngineType = {
-  SELENIUM: 'selenium',
-  PUPPETEER: 'puppeteer',
-};
+let istanbulMiddleware;
+if (argv.coverage) {
+  istanbulMiddleware = require('istanbul-middleware/lib/core');
+}
 
 /**
  * @typedef {{
  *  browsers: string,
  *  headless: boolean,
- *  engine: string,
  * }}
  */
 let DescribesConfigDef;
 
 /**
  * @typedef {{
- *  headless: boolean,
- * }}
- */
-let PuppeteerConfigDef;
-
-/**
- * @typedef {{
- *  headless: boolean,
+ *  headless?: boolean,
  * }}
  */
 let SeleniumConfigDef;
@@ -110,35 +98,20 @@ function getConfig() {
   return describesConfig;
 }
 
-/**
- * Configure and launch a Puppeteer instance
- * @param {!PuppeteerConfigDef=} opt_config
- * @return {!Promise}
- */
-async function createPuppeteer(opt_config = {}) {
-  const browser = await puppeteer.launch({
-    headless: opt_config.headless || false,
-    devtools: false,
-    defaultViewport: null,
-    timeout: 0,
-  });
-  return browser;
-}
-
 /**
  * Configure and launch a Selenium instance
  * @param {string} browserName
  * @param {!SeleniumConfigDef=} args
- * @param {?string} deviceName
- * @return {!WebDriver}
+ * @param {string=} deviceName
+ * @return {!selenium.WebDriver}
  */
 function createSelenium(browserName, args = {}, deviceName) {
   switch (browserName) {
     case 'safari':
       // Safari's only option is setTechnologyPreview
-      return createDriver(browserName, []);
+      return createDriver(browserName, [], deviceName);
     case 'firefox':
-      return createDriver(browserName, getFirefoxArgs(args));
+      return createDriver(browserName, getFirefoxArgs(args), deviceName);
     case 'chrome':
     default:
       return createDriver(browserName, getChromeArgs(args), deviceName);
@@ -148,9 +121,9 @@ function createSelenium(browserName, args = {}, deviceName) {
 /**
  *
  * @param {string} browserName
- * @param {!SeleniumConfigDef=} args
- * @param {?string} deviceName
- * @return {!WebDriver}
+ * @param {!string[]} args
+ * @param {string=} deviceName
+ * @return {!selenium.WebDriver}
  */
 function createDriver(browserName, args, deviceName) {
   const capabilities = Capabilities[browserName]();
@@ -181,6 +154,8 @@ function createDriver(browserName, args, deviceName) {
       //which is also when `Server terminated early with status 1` began appearing. Coincidence? Maybe.
       driver.onQuit = null;
       return driver;
+    case 'safari':
+      return new Builder().forBrowser(browserName).build();
   }
 }
 
@@ -222,13 +197,30 @@ function getFirefoxArgs(config) {
  * @typedef {{
  *  browsers: (!Array<string>|undefined),
  *  environments: (!Array<!AmpdocEnvironment>|undefined),
- *  testUrl: string,
- *  initialRect: ({{width: number, height:number}}|undefined),
+ *  experiments: (!Array<string>|undefined),
+ *  testUrl: string|undefined,
+ *  fixture: string,
+ *  initialRect: ({width: number, height:number}|undefined),
  *  deviceName: string|undefined,
+ *  version: string|undefined,
  * }}
  */
 let TestSpec;
 
+/**
+ * @typedef {{
+ *  browsers: (!Array<string>|undefined),
+ *  environments: (!Array<!AmpdocEnvironment>|undefined),
+ *  testUrl: string|undefined,
+ *  fixture: string,
+ *  initialRect: ({width: number, height:number}|undefined),
+ *  deviceName: string|undefined,
+ *  versions: {[version: string]: TestSpec},
+ *  version: string|undefined
+ * }}
+ */
+let RootSpec;
+
 /**
  * An end2end test using Selenium Web Driver or Puppeteer
  */
@@ -246,6 +238,10 @@ const EnvironmentVariantMap = {
     name: 'Viewer environment',
     value: {environment: 'viewer-demo'},
   },
+  [AmpdocEnvironment.EMAIL_DEMO]: {
+    name: 'Email environment (viewer)',
+    value: {environment: 'email-demo'},
+  },
   [AmpdocEnvironment.SHADOW_DEMO]: {
     name: 'Shadow environment',
     value: {environment: 'shadow-demo'},
@@ -293,32 +289,53 @@ envPresets['ampdoc-amp4ads-preset'] = envPresets['ampdoc-preset'].concat(
  * it.configure().skipViewerDemo().skipShadowDemo().run('Should ...', ...);
  */
 class ItConfig {
+  /**
+   * @param {function} it
+   * @param {Object} env
+   */
   constructor(it, env) {
-    this.it = it;
+    this.it = /** @type {Mocha.it} */ (it);
     this.env = env;
     this.skip = false;
   }
 
+  /**
+   * @return {ItConfig}
+   */
   skipShadowDemo() {
     this.skip = this.skip ? this.skip : this.env.environment == 'shadow-demo';
     return this;
   }
 
+  /**
+   * @return {ItConfig}
+   */
   skipSingle() {
     this.skip = this.skip ? this.skip : this.env.environment == 'single';
     return this;
   }
 
+  /**
+   * @return {ItConfig}
+   */
   skipViewerDemo() {
     this.skip = this.skip ? this.skip : this.env.environment == 'viewer-demo';
     return this;
   }
 
+  /**
+   * @return {ItConfig}
+   */
   skipA4aFie() {
     this.skip = this.skip ? this.skip : this.env.environment == 'a4a-fie';
     return this;
   }
 
+  /**
+   * @param {string} name
+   * @param {function(): void} fn
+   * @return {void|Mocha.Test}
+   */
   run(name, fn) {
     if (this.skip) {
       return this.it.skip(name, fn);
@@ -330,20 +347,45 @@ class ItConfig {
   }
 }
 
+/**
+ * Extracts code coverage data from the page and aggregates it with other tests.
+ * @param {!Object} env e2e driver environment.
+ * @return {Promise<void>}
+ */
+async function updateCoverage(env) {
+  const coverage = await env.controller.evaluate(() => window.__coverage__);
+  if (coverage) {
+    istanbulMiddleware.mergeClientCoverage(coverage);
+  }
+}
+
+/**
+ * Reports code coverage data to an aggregating endpoint.
+ * @return {Promise<void>}
+ */
+async function reportCoverage() {
+  const coverage = istanbulMiddleware.getCoverageObject();
+  await fetch(`https://${HOST}:${PORT}${COV_REPORT_PATH}`, {
+    method: 'POST',
+    body: JSON.stringify(coverage),
+    headers: {'Content-type': 'application/json'},
+  });
+}
+
 /**
  * Returns a wrapped version of Mocha's describe(), it() and only() methods
  * that also sets up the provided fixtures and returns the corresponding
  * environment objects of each fixture to the test method.
- * @param {function(!Object):!Array<?Fixture>} factory
- * @return {function()}
+ * @param {function(!TestSpec): EndToEndFixture} factory
+ * @return {function(string, RootSpec, function(!Object): void): void}
  */
 function describeEnv(factory) {
   /**
    * @param {string} suiteName
    * @param {!Object} spec
-   * @param {function(!Object)} fn
-   * @param {function(string, function())} describeFunc
-   * @return {function()}
+   * @param {function(!Object): void} fn
+   * @param {function(string, function(): void): void} describeFunc
+
    */
   const templateFunc = function (suiteName, spec, fn, describeFunc) {
     const fixture = factory(spec);
@@ -365,9 +407,11 @@ function describeEnv(factory) {
       spec.browsers = ['chrome'];
     }
 
+    /**
+     * Initializes the describe object for all applicable browsers.
+     */
     function createBrowserDescribe() {
       const allowedBrowsers = getAllowedBrowsers();
-
       spec.browsers
         .filter((x) => allowedBrowsers.has(x))
         .forEach((browserName) => {
@@ -377,24 +421,16 @@ function describeEnv(factory) {
         });
     }
 
+    /**
+     * @return {Set<string>}
+     */
     function getAllowedBrowsers() {
-      const {engine, browsers} = getConfig();
+      const {browsers} = getConfig();
 
       const allowedBrowsers = browsers
         ? new Set(browsers.split(',').map((x) => x.trim()))
         : supportedBrowsers;
 
-      if (engine === EngineType.PUPPETEER) {
-        const result = intersect(allowedBrowsers, PUPPETEER_BROWSERS);
-        if (result.size === 0) {
-          const browsersList = Array.from(allowedBrowsers).join(',');
-          throw new Error(
-            `browsers ${browsersList} not supported by Puppeteer`
-          );
-        }
-        return result;
-      }
-
       if (process.platform !== 'darwin' && allowedBrowsers.has('safari')) {
         // silently skip safari tests
         allowedBrowsers.delete('safari');
@@ -403,6 +439,9 @@ function describeEnv(factory) {
       return allowedBrowsers;
     }
 
+    /**
+     * @param {string} browserName
+     */
     function createVariantDescribe(browserName) {
       for (const name in variants) {
         it.configure = function () {
@@ -415,28 +454,40 @@ function describeEnv(factory) {
       }
     }
 
-    return describeFunc(suiteName, function () {
+    describeFunc(suiteName, function () {
       createBrowserDescribe();
     });
-
-    function doTemplate(name, variant, browserName) {
+    return;
+
+    /**
+     *
+     * @param {string} _name
+     * @param {Object} variant
+     * @param {string} browserName
+     */
+    function doTemplate(_name, variant, browserName) {
       const env = Object.create(variant);
+      // @ts-ignore
       this.timeout(TEST_TIMEOUT);
       beforeEach(async function () {
         this.timeout(SETUP_TIMEOUT);
         await fixture.setup(env, browserName, SETUP_RETRIES);
 
         // don't install for CI
-        if (!isTravisBuild()) {
+        if (!isCiBuild()) {
           installRepl(global, env);
         }
       });
 
       afterEach(async function () {
+        if (argv.coverage) {
+          await updateCoverage(env);
+        }
+
         // If there is an async expect error, throw it in the final state.
         const lastExpectError = getLastExpectError();
         if (lastExpectError) {
-          this.test.error(lastExpectError);
+          /** @type {any} */ (this.test).error(lastExpectError);
           clearLastExpectError();
         }
 
@@ -445,11 +496,17 @@ function describeEnv(factory) {
           delete env[key];
         }
 
-        if (!isTravisBuild()) {
+        if (!isCiBuild()) {
           uninstallRepl();
         }
       });
 
+      after(async () => {
+        if (argv.coverage) {
+          await reportCoverage();
+        }
+      });
+
       describe(SUB, function () {
         fn.call(this, env);
       });
@@ -458,26 +515,53 @@ function describeEnv(factory) {
 
   /**
    * @param {string} name
-   * @param {!Object} spec
-   * @param {function(!Object)} fn
-   * @return {function()}
+   * @param {!RootSpec} spec
+   * @param {function(!Object): void} fn
    */
   const mainFunc = function (name, spec, fn) {
-    return templateFunc(name, spec, fn, describe);
+    const {versions, ...baseSpec} = spec;
+    if (!versions) {
+      // If a version is provided, add a prefix to the test suite name.
+      const {version} = spec;
+      templateFunc(
+        version ? `[v${version}] ${name}` : name,
+        spec,
+        fn,
+        describe
+      );
+    } else {
+      // A root `describes.endtoend` spec may contain a `versions` object, where
+      // the key represents the version number and the value is an object with
+      // test specs for that version. This allows specs to share test fixtures,
+      // browsers, and other settings.
+      Object.entries(versions).forEach(([version, versionSpec]) => {
+        const fullSpec = {
+          ...baseSpec,
+          ...versionSpec,
+          version,
+        };
+        templateFunc(`[v${version}] ${name}`, fullSpec, fn, describe);
+      });
+    }
   };
 
   /**
    * @param {string} name
    * @param {!Object} spec
-   * @param {function(!Object)} fn
-   * @return {function()}
+   * @param {function(!Object): void} fn
    */
   mainFunc.only = function (name, spec, fn) {
-    return templateFunc(name, spec, fn, describe./*OK*/ only);
+    templateFunc(name, spec, fn, describe./*OK*/ only);
+    return;
   };
 
+  /**
+   * @param {string} name
+   * @param {!Object} variants
+   * @param {function(!Object): void} fn
+   */
   mainFunc.skip = function (name, variants, fn) {
-    return templateFunc(name, variants, fn, describe.skip);
+    templateFunc(name, variants, fn, describe.skip);
   };
 
   return mainFunc;
@@ -487,7 +571,7 @@ class EndToEndFixture {
   /** @param {!TestSpec} spec */
   constructor(spec) {
     /** @const */
-    this.spec = spec;
+    this.spec = this.setTestUrl(spec);
   }
 
   /**
@@ -498,13 +582,11 @@ class EndToEndFixture {
   async setup(env, browserName, retries = 0) {
     const config = getConfig();
     const driver = getDriver(config, browserName, this.spec.deviceName);
-    const controller =
-      config.engine == EngineType.PUPPETEER
-        ? new PuppeteerController(driver)
-        : new SeleniumWebDriverController(driver);
+    const controller = new SeleniumWebDriverController(driver);
     const ampDriver = new AmpDriver(controller);
     env.controller = controller;
     env.ampDriver = ampDriver;
+    env.version = this.spec.version;
 
     installBrowserAssertions(controller.networkLogger);
 
@@ -513,7 +595,7 @@ class EndToEndFixture {
       // Set env props that require the fixture to be set up.
       if (env.environment === AmpdocEnvironment.VIEWER_DEMO) {
         env.receivedMessages = await controller.evaluate(() => {
-          return window.parent.viewer.receivedMessages;
+          return window.parent.viewer?.receivedMessages;
         });
       }
     } catch (ex) {
@@ -525,6 +607,10 @@ class EndToEndFixture {
     }
   }
 
+  /**
+   * @param {!Object} env
+   * @return {Promise<void>}
+   */
   async teardown(env) {
     const {controller} = env;
     if (controller && controller.driver) {
@@ -532,34 +618,60 @@ class EndToEndFixture {
       await controller.dispose();
     }
   }
+
+  /**
+   * Translate relative fixture specs into localhost test URL.
+   * @param {!TestSpec} spec
+   * @return {!TestSpec}
+   */
+  setTestUrl(spec) {
+    const {fixture, testUrl} = spec;
+
+    if (testUrl) {
+      throw new Error(
+        'Setting `testUrl` directly is no longer permitted in e2e tests; please use `fixture` instead'
+      );
+    }
+
+    return {
+      ...spec,
+      testUrl: `http://localhost:8000/test/fixtures/e2e/${fixture}`,
+    };
+  }
 }
 
 /**
  * Get the driver for the configured engine.
  * @param {!DescribesConfigDef} describesConfig
  * @param {string} browserName
- * @param {?string} deviceName
- * @return {!ThenableWebDriver}
+ * @param {string|undefined} deviceName
+ * @return {!selenium.WebDriver}
  */
-function getDriver(
-  {engine = EngineType.SELENIUM, headless = false},
-  browserName,
-  deviceName
-) {
-  if (engine == EngineType.PUPPETEER) {
-    return createPuppeteer({headless});
-  }
-
-  if (engine == EngineType.SELENIUM) {
-    return createSelenium(browserName, {headless}, deviceName);
-  }
+function getDriver({headless = false}, browserName, deviceName) {
+  return createSelenium(browserName, {headless}, deviceName);
 }
 
+/**
+ * @param {{
+ *  environment: *,
+ *  ampDriver: *,
+ *  controller: *,
+ * }} param0
+ * @param {TestSpec} param1
+ * @return {Promise<void>}
+ */
 async function setUpTest(
-  {environment, ampDriver, controller},
-  {testUrl, experiments = [], initialRect}
+  {ampDriver, controller, environment},
+  {testUrl = '', version, experiments = [], initialRect}
 ) {
   const url = new URL(testUrl);
+
+  // When a component version is specified in the e2e spec, provide it as a
+  // request param.
+  if (version) {
+    url.searchParams.set('componentVersion', version);
+  }
+
   if (experiments.length > 0) {
     if (environment.includes('inabox')) {
       // inabox experiments are toggled at server side using <meta> tag
@@ -571,7 +683,7 @@ async function setUpTest(
   }
 
   if (initialRect) {
-    const {width, height} = initialRect;
+    const {height, width} = initialRect;
     await controller.setWindowRect({width, height});
   }
 
@@ -593,18 +705,8 @@ async function toggleExperiments(ampDriver, testUrl, experiments) {
   }
 }
 
-/**
- * Intersection of two sets
- * @param {Set<T>} a
- * @param {Set<T>} b
- * @return {Set<T>}
- * @template T
- */
-function intersect(a, b) {
-  return new Set(Array.from(a).filter((aItem) => b.has(aItem)));
-}
-
 module.exports = {
+  RootSpec,
   TestSpec,
   endtoend,
   configure,
diff --git a/build-system/tasks/e2e/driver/query-xpath.js b/build-system/tasks/e2e/driver/query-xpath.js
index d42b61aff98b5..9d621a2305226 100644
--- a/build-system/tasks/e2e/driver/query-xpath.js
+++ b/build-system/tasks/e2e/driver/query-xpath.js
@@ -57,7 +57,7 @@ function queryXpath(xpathString, context) {
   // Add an ID to every element in the tree so we can reference them later.
   // This allows us to correlate nodes from the cloned tree to the
   // original tree.
-  for (const {item, index} of createIndexedInterator(
+  for (const {index, item} of createIndexedInterator(
     createElementIterator(context)
   )) {
     setData(item, index);
diff --git a/build-system/tasks/e2e/e2e-types.js b/build-system/tasks/e2e/e2e-types.js
new file mode 100644
index 0000000000000..ab82eb52c5e8b
--- /dev/null
+++ b/build-system/tasks/e2e/e2e-types.js
@@ -0,0 +1,99 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * A wrapper class that allows client code to own references to
+ * framework-specific element handles, but which does not expose any of the
+ * framework-specific methods on that element.
+ *
+ * @template T
+ * @public
+ */
+class ElementHandle {
+  /**
+   * Wrap the framework-specific element handle object.
+   * @param {!T} element
+   * @package
+   */
+  constructor(element) {
+    /** @private */
+    this.element_ = element;
+  }
+
+  /**
+   * Unwrap the framework-specific element handle object.
+   * @return {!T}
+   * @package
+   */
+  getElement() {
+    return this.element_;
+  }
+}
+
+/**
+ * Key codes used to trigger actions.
+ * @enum {string}
+ */
+const Key = {
+  'ArrowDown': 'ArrowDown',
+  'ArrowLeft': 'ArrowLeft',
+  'ArrowRight': 'ArrowRight',
+  'ArrowUp': 'ArrowUp',
+  'Enter': 'Enter',
+  'Escape': 'Escape',
+  'Tab': 'Tab',
+  'CtrlV': 'CtrlV',
+};
+
+/**
+ * @typedef {{
+ *   width: number,
+ *   height: number
+ * }} WindowRectDef
+ */
+let WindowRectDef;
+
+/**
+ * @typedef {{
+ *   x: number,
+ *   y: number,
+ *   top: number,
+ *   bottom: number,
+ *   left: number,
+ *   right: number,
+ *   width: number,
+ *   height: number
+ * }}
+ */
+let DOMRectDef;
+
+/**
+ * @typedef {{
+ *   left: number,
+ *   top: number,
+ *   behavior: ScrollBehavior
+ * }}
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions}
+ */
+let ScrollToOptionsDef;
+
+module.exports = {
+  ElementHandle,
+  Key,
+  WindowRectDef,
+  DOMRectDef,
+  ScrollToOptionsDef,
+};
diff --git a/build-system/tasks/e2e/expect.js b/build-system/tasks/e2e/expect.js
index 3ae0368663e9b..2673841bb1e33 100644
--- a/build-system/tasks/e2e/expect.js
+++ b/build-system/tasks/e2e/expect.js
@@ -22,11 +22,15 @@ let installed;
 let lastExpectError;
 let networkLogger;
 
+/**
+ * Clears previous expected error state.
+ */
 function clearLastExpectError() {
   lastExpectError = null;
 }
 
 /**
+ * Retrieves the expected error state.
  * @return {?Error}
  */
 function getLastExpectError() {
@@ -36,7 +40,7 @@ function getLastExpectError() {
 /**
  * @param {*} actual
  * @param {string=} opt_message
- * @return {!ExpectStatic}
+ * @return {!Chai.Assertion}
  */
 function expect(actual, opt_message) {
   if (!installed) {
@@ -62,7 +66,7 @@ const ChaiType = {
  * Not all chai properties need to be overwritten, like those that set
  * flags or are only language chains e.g. `not` or 'to'
  * See the Chai implementation for the original definitions:
- * {@link https://github.com/chaijs/chai/blob/master/lib/chai/core/assertions.js}
+ * {@link https://github.com/chaijs/chai/blob/main/lib/chai/core/assertions.js}
  */
 const chaiMethodsAndProperties = [
   {name: 'a', type: ChaiType.CHAINABLE_METHOD},
@@ -135,11 +139,16 @@ const chaiMethodsAndProperties = [
   {name: 'within', type: ChaiType.METHOD},
 ];
 
+/**
+ * @param {Chai.ChaiStatic} chai
+ * @param {Chai.ChaiUtils} utils
+ */
 function installWrappers(chai, utils) {
-  const {METHOD, PROPERTY, CHAINABLE_METHOD} = ChaiType;
+  const {CHAINABLE_METHOD, METHOD, PROPERTY} = ChaiType;
   const {Assertion} = chai;
 
   for (const {name, type, unsupported} of chaiMethodsAndProperties) {
+    /** @type {function(Chai.AssertionStatic): void} */
     const overwrite = unsupported
       ? overwriteUnsupported
       : overwriteAlwaysUseSuper(utils);
@@ -149,13 +158,14 @@ function installWrappers(chai, utils) {
         Assertion.overwriteMethod(name, overwrite);
         break;
       case PROPERTY:
-        Assertion.overwriteProperty(name, overwrite);
+        // TODO(#28387) cleanup this type.
+        Assertion.overwriteProperty(name, /** @type {*} */ (overwrite));
         break;
       case CHAINABLE_METHOD:
         Assertion.overwriteChainableMethod(
           name,
           overwrite,
-          inheritChainingBehavior
+          /** @type {() => any} */ (inheritChainingBehavior)
         );
         break;
       default:
@@ -164,21 +174,31 @@ function installWrappers(chai, utils) {
   }
 }
 
+/**
+ * @param {Chai.ChaiUtils} utils
+ * @return {function(Chai.AssertionStatic): function(): any}
+ */
 function overwriteAlwaysUseSuper(utils) {
   const {flag} = utils;
 
+  /**
+   * @param {Chai.AssertionStatic} _super
+   * @return {function(): ReturnType<Chai.AssertionStatic>}
+   */
   return function (_super) {
     return function () {
-      const obj = this._obj;
+      // @ts-ignore
+      const that = this;
+      const obj = that._obj;
       const isControllerPromise = obj instanceof ControllerPromise;
       if (!isControllerPromise) {
-        return _super.apply(this, arguments);
+        return _super.apply(that, arguments);
       }
       const {waitForValue} = obj;
       if (!waitForValue) {
         return obj.then((result) => {
-          flag(this, 'object', result);
-          return _super.apply(this, arguments);
+          flag(that, 'object', result);
+          return _super.apply(that, arguments);
         });
       }
 
@@ -193,10 +213,10 @@ function overwriteAlwaysUseSuper(utils) {
       const valueSatisfiesExpectation = (value) => {
         try {
           // Tell chai to use value as the subject of the expect chain.
-          flag(this, 'object', value);
+          flag(that, 'object', value);
 
           // Run the code that checks the condition.
-          _super.apply(this, arguments);
+          _super.apply(that, arguments);
 
           clearLastExpectError();
           // Let waitForValue know we are done.
@@ -208,59 +228,84 @@ function overwriteAlwaysUseSuper(utils) {
           lastExpectError = e;
           return false;
         } finally {
-          flag(this, 'object', resultPromise);
+          flag(that, 'object', resultPromise);
         }
       };
 
       const resultPromise = waitForValue(valueSatisfiesExpectation);
-      flag(this, 'object', resultPromise);
+      flag(that, 'object', resultPromise);
       return resultPromise;
     };
   };
 }
 
+/**
+ * @param {Chai.AssertionStatic} _super
+ * @return {function(): *}
+ */
 function inheritChainingBehavior(_super) {
   return function () {
+    // @ts-ignore
     _super.apply(this, arguments);
   };
 }
 
+/**
+ * @param {Chai.AssertionStatic} _super
+ * @return {function(): *}
+ */
 function overwriteUnsupported(_super) {
   return function () {
-    const obj = this._obj;
+    // @ts-ignore
+    const that = this;
+    const obj = that._obj;
     const isControllerPromise = obj instanceof ControllerPromise;
     if (isControllerPromise) {
       throw new Error(
         'ControllerPromise used with unsupported expectation. Await the Promise and expect the value.'
       );
     }
-    return _super.apply(this, arguments);
+    return _super.apply(that, arguments);
   };
 }
 
+/**
+ * @param {*} _networkLogger
+ */
 function installBrowserAssertions(_networkLogger) {
   networkLogger = _networkLogger;
   chai.use(installBrowserWrappers);
 }
 
+/**
+ * @param {Chai.ChaiStatic} chai
+ * @param {Chai.ChaiUtils} utils
+ */
 function installBrowserWrappers(chai, utils) {
   const {Assertion} = chai;
 
   // Assert that a request with a testUrl was sent
   // Example usage: await expect(testUrl).to.have.been.sent;
   utils.addProperty(Assertion.prototype, 'sent', async function () {
-    const url = this._obj;
+    // @ts-ignore
+    const that = this;
+    const url = that._obj;
     const requests = await networkLogger.getSentRequests(url);
-    this.assert(0 < requests.length, 'expected #{this} to have been sent');
+    that.assert(0 < requests.length, 'expected #{this} to have been sent');
   });
-  Assertion.overwriteProperty('sent', overwriteAlwaysUseSuper(utils));
+  Assertion.overwriteProperty(
+    'sent',
+    /** @type {any} */ (overwriteAlwaysUseSuper(utils))
+  );
 
   // Assert that a request was sent n number of times
   // Example usage: await expect(testUrl).to.have.sentCount(n);
   utils.addMethod(Assertion.prototype, 'sentCount', async function (count) {
-    const url = this._obj;
+    // @ts-ignore
+    const that = this;
+    const url = that._obj;
     const requests = await networkLogger.getSentRequests(url);
-    this.assert(
+    that.assert(
       count === requests.length,
       `expected #{this} to have been sent ${
         count == 1 ? 'once' : count + ' times'
diff --git a/build-system/tasks/e2e/functional-test-controller.js b/build-system/tasks/e2e/functional-test-controller.js
deleted file mode 100644
index 934e21081d4f7..0000000000000
--- a/build-system/tasks/e2e/functional-test-controller.js
+++ /dev/null
@@ -1,469 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * A wrapper class that allows client code to own references to
- * framework-specific element handles, but which does not expose any of the
- * framework-specific methods on that element.
- *
- * @template T
- * @public
- */
-class ElementHandle {
-  /**
-   * Wrap the framework-specific element handle object.
-   * @param {!T} element
-   * @param {!T} unusedController
-   * @package
-   */
-  constructor(element, unusedController) {
-    /** @private */
-    this.element_ = element;
-  }
-
-  /**
-   * Unwrap the framework-specific element handle object.
-   * @return {!T}
-   * @package
-   */
-  getElement() {
-    return this.element_;
-  }
-}
-
-/**
- * Key to send to the FunctionalTestController#type method to trigger
- * actions instead of text.
- * @enum {string}
- */
-const Key = {
-  'ArrowDown': 'ArrowDown',
-  'ArrowLeft': 'ArrowLeft',
-  'ArrowRight': 'ArrowRight',
-  'ArrowUp': 'ArrowUp',
-  'Enter': 'Enter',
-  'Escape': 'Escape',
-  'Tab': 'Tab',
-  'CtrlV': 'CtrlV',
-};
-
-/** @interface */
-class FunctionalTestController {
-  /**
-   * Navigates to the given URL.
-   * {@link https://www.w3.org/TR/webdriver1/#navigate-to}
-
-   * @param {string} unusedUrl
-   * @return {!Promise}
-   */
-  async navigateTo(unusedUrl) {}
-
-  /**
-   * Retrieves the URL for the current page.
-   * {@link https://www.w3.org/TR/webdriver1/#get-current-url}
-   *
-   * @return {!ControllerPromise<string>}
-   */
-  async getCurrentUrl() {}
-
-  /**
-   * Returns the document title.
-   * {@link https://www.w3.org/TR/webdriver1/#get-title}
-   *
-   * @return {!ControllerPromise<string>}
-   */
-  async getTitle() {}
-
-  /**
-   * Select the given window.
-   * {@link https://www.w3.org/TR/webdriver1/#dfn-switch-to-window}
-   *
-   * @param {string} unusedString
-   * @return {!Promise}
-   */
-  async switchToWindow(unusedString) {}
-
-  /**
-   * Selects the current top-level browsing context or a child browsing context
-   * of the current browsing context to use as the current browsing context for
-   * subsequent commands.
-   * {@link https://www.w3.org/TR/webdriver1/#switch-to-frame}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @return {!Promise}
-   */
-  async switchToFrame(unusedHandle) {}
-
-  /**
-   * Selects the current top-level browsing context or a child browsing context
-   * of the current browsing context to use as the current browsing context for
-   * subsequent commands.
-   * {@link https://www.w3.org/TR/webdriver1/#switch-to-frame}
-   *
-   * @return {!Promise}
-   */
-  async switchToParent() {}
-
-  /**
-   * Selects the body of a subtree inside a ShadowDOM ShadowRoot to use as the current
-   * browsing context for subsequent commands.
-   * {@link https://github.com/w3c/webdriver/pull/1320}
-   * https://github.com/SeleniumHQ/selenium/issues/5869
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @return {!Promise}
-   */
-  async switchToShadow(unusedHandle) {}
-
-  /**
-   * Selects a subtree inside a ShadowDOM ShadowRoot to use as the current
-   * browsing context for subsequent commands.
-   * {@link https://github.com/w3c/webdriver/pull/1320}
-   * https://github.com/SeleniumHQ/selenium/issues/5869
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @return {!Promise}
-   */
-  async switchToShadowRoot(unusedHandle) {}
-
-  /**
-   * Selects the main top-level DOM tree to use as the current
-   * browsing context for subsequent commands.
-   * {@link https://github.com/w3c/webdriver/pull/1320}
-   * https://github.com/SeleniumHQ/selenium/issues/5869
-   *
-   * @return {!Promise}
-   */
-  async switchToLight() {}
-
-  /**
-   * Gets the active element of the current browsing context’s document element.
-   * {@link https://www.w3.org/TR/webdriver1/#get-active-element}
-   *
-   * @return {!ControllerPromise<!ElementHandle>}
-   */
-  async getActiveElement() {}
-
-  /**
-   * Gets the root of the current document, for use in scrolling e.g.
-   * @return {!Promise<!ElementHandle>}
-   */
-  async getDocumentElement() {}
-
-  /**
-   * The Find Element command is used to find the first element matching the
-   * given selector in the current browsing context that can be used as the
-   * web element context for future element-centric commands.
-   * {@link https://www.w3.org/TR/webdriver1/#find-element}
-   *
-   * @param {string} unusedSelector
-   * @param {number=} unusedTimeout
-   * @return {!Promise<!ElementHandle>}
-   */
-  async findElement(unusedSelector, unusedTimeout) {}
-
-  /**
-   * The Find Elements command is used to find all elements matching the
-   * given selector in the current browsing context that can be used as the
-   * web element context for future element-centric commands.
-   * {@link https://www.w3.org/TR/webdriver1/#find-elements}
-   *
-   * @param {string} unusedSelector
-   * @return {!Promise<!Array<!ElementHandle>>}
-   */
-  async findElements(unusedSelector) {}
-
-  /**
-   * Note: Use findElement instead where possible. CSS selectors are more
-   * familiar to developers and easier to reason about. If you need to use
-   * this method, a comment explaining the xpath query can be helpful.
-   * The Find Element command is used to find the first element matching the
-   * given xpath in the current browsing context that can be used as the
-   * web element context for future element-centric commands.
-   * {@link https://www.w3.org/TR/webdriver1/#xpath}
-   * {@link https://www.w3.org/TR/webdriver1/#find-element}
-   *
-   * @param {string} unusedXpath
-   * @return {!Promise<!ElementHandle>}
-   */
-  async findElementXPath(unusedXpath) {}
-
-  /**
-   * Note: Use findElements instead where possible. CSS selectors are more
-   * familiar to developers and easier to reason about. If you need to use
-   * this method, a comment explaining the xpath query can be helpful.
-   * The Find Elements command is used to find all elements matching the
-   * given xpath in the current browsing context that can be used as the
-   * web element context for future element-centric commands.
-   * {@link https://www.w3.org/TR/webdriver1/#xpath}
-   * {@link https://www.w3.org/TR/webdriver1/#find-elements}
-   *
-   * @param {string} unusedXpath
-   * @return {!Promise<!Array<!ElementHandle>>}
-   */
-  async findElementsXPath(unusedXpath) {}
-
-  /**
-   * The Find Element From Element command is used to find the first element
-   * that is a descendent of the given element matching the given selector in
-   * the current browsing context that can be used as the web element context
-   * for future element-centric commands.
-   * {@link https://www.w3.org/TR/webdriver1/#find-element-from-element}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @param {string} unusedSelector
-   * @return {!Promise<!ElementHandle>}
-   */
-  async findElementFromElement(unusedHandle, unusedSelector) {}
-
-  /**
-   * The Find Elements command is used to find all elements that are descendents
-   * of the given element matching the given selector in the current
-   * browsing context that can be used as the web element context for future
-   * element-centric commands.
-   * {@link https://www.w3.org/TR/webdriver1/#find-elements-from-element}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @param {string} unusedSelector
-   * @return {!Promise<!Array<!ElementHandle>>}
-   */
-  async findElementsFromElement(unusedHandle, unusedSelector) {}
-
-  /**
-   * Determines if the referenced element is elected or not.
-   * This operation only makes sense on input elements of the Checkbox- and
-   * Radio Button states, or on option elements.
-   * {@link https://www.w3.org/TR/webdriver1/#is-element-selected}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @return {!ControllerPromise<boolean>}
-   */
-  async isElementSelected(unusedHandle) {}
-
-  /**
-   * Return the value of the given attribute name on the given element.
-   * Note: for boolean attributes, the value returned is "true".
-   * {@link https://www.w3.org/TR/webdriver1/#get-element-attribute}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @param {string} unusedAttribute
-   * @return {!ControllerPromise<string>}
-   */
-  async getElementAttribute(unusedHandle, unusedAttribute) {}
-
-  /**
-   * Return the value of the given property name on the given element.
-   * {@link https://www.w3.org/TR/webdriver1/#get-element-property}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @param {string} unusedProperty
-   * @return {!ControllerPromise<string>}
-   */
-  async getElementProperty(unusedHandle, unusedProperty) {}
-
-  /**
-   * Return the value of the given CSS value on the given element.
-   * {@link https://www.w3.org/TR/webdriver1/#get-element-css-value}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @param {string} unusedStyleProperty
-   * @return {!ControllerPromise<string>} styleProperty
-   */
-  async getElementCssValue(unusedHandle, unusedStyleProperty) {}
-
-  /**
-   * The Get Element Text command intends to return an element’s text
-   * “as rendered”. An element’s rendered text is also used for locating `<a>`
-   * elements by their link text and partial link text.
-   * {@link https://www.w3.org/TR/webdriver1/#get-element-text}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @return {!ControllerPromise<string>}
-   */
-  async getElementText(unusedHandle) {}
-
-  /**
-   * Return the value of the tag name for the given element.
-   * {@link https://www.w3.org/TR/webdriver1/#get-element-tag-name}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @return {!Promise<string>}
-   */
-  async getElementTagName(unusedHandle) {}
-
-  /**
-   * The Get Element Rect command returns the dimensions and coordinates of
-   * the given web element. Unlike the webdriver version, this also returns
-   * the left, right, top and bottom properties.
-   * {@link https://www.w3.org/TR/webdriver1/#get-element-rect}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @return {!ControllerPromise<!DOMRectDef>}
-   */
-  async getElementRect(unusedHandle) {}
-
-  /**
-   * Return the enabled state of the given element. i.e. `false` if the
-   * given element has the "disabled" attribute.
-   * {@link https://www.w3.org/TR/webdriver1/#is-element-enabled}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @return {!ControllerPromise<boolean>}
-   */
-  async isElementEnabled(unusedHandle) {}
-
-  /**
-   * Return an array of handles consisting of all windows in the browser
-   * session.
-   * {@link https://www.w3.org/TR/webdriver1/#get-window-handles}
-   *
-   * @return {!Promise<Array<string>>}
-   */
-  async getAllWindows() {}
-
-  /**
-   * The Set Window Rect command alters the size and the position of the
-   * operating system window corresponding to the current top-level browsing
-   * context.
-   * {@link https://www.w3.org/TR/webdriver1/#set-window-rect}
-   *
-   * @param {!WindowRectDef} unusedRect
-   * @return {!Promise}
-   */
-  async setWindowRect(unusedRect) {}
-
-  /**
-   * The Take Screenshot command takes a screenshot of the
-   * visible region encompassed by the bounding rectangle of the window.
-   * {@link https://www.w3.org/TR/webdriver1/#take-screenshot}
-   * @param {string} unusedPath
-   * @return {!Promise}
-   */
-  async takeScreenshot(unusedPath) {}
-
-  /**
-   * The Take Element Screenshot command takes a screenshot of the visible
-   * region encompassed by the bounding rectangle of an element.
-   * {@link https://www.w3.org/TR/webdriver1/#take-element-screenshot}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @param {string} unusedPath
-   * @return {!Promise}
-   */
-  async takeElementScreenshot(unusedHandle, unusedPath) {}
-
-  /**
-   * Clicks the given element in its center point.
-   * {@link https://www.w3.org/TR/webdriver1/#element-click}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @return {!Promise}
-   */
-  async click(unusedHandle) {}
-
-  /**
-   * Sends the provided keys to the given form control element. If an element
-   * is not provided, the active element receives the keys.
-   * {@link https://www.w3.org/TR/webdriver1/#element-send-keys}
-   *
-   * @param {?ElementHandle} unusedHandle
-   * @param {string|Key} unusedKeys
-   * @return {!Promise}
-   */
-  async type(unusedHandle, unusedKeys) {}
-
-  /**
-   * Pastes from the clipboard by perfoming the keyboard shortcut.
-   * {@link https://stackoverflow.com/a/41046276}
-   *
-   * @return {!Promise}
-   */
-  async pasteFromClipboard() {}
-
-  /**
-   * Scrolls the given element using the scroll options if provided.
-   * If the element cannot scroll, then no scroll will be performed.
-   * Note: This is not yet spec'd in the W3C WebDriver spec, but there are plans
-   * to include it.
-   * {@link https://github.com/w3c/webdriver/issues/1005#issuecomment-436629425}
-   *
-   * @param {!ElementHandle} unusedHandle
-   * @param {!ScrollToOptionsDef=} opt_scrollToOptions
-   * @return {!Promise}
-   */
-  async scroll(unusedHandle, opt_scrollToOptions) {}
-
-  /**
-   * Evaluate the given function
-   * @param {function()} unusedFn
-   * @param {...*} unusedArgs
-   * @return {!Promise}
-   * @package
-   */
-  async evaluate(unusedFn, ...unusedArgs) {}
-
-  /**
-   * Cleanup any resources
-   * @return {!Promise}
-   */
-  async dispose() {}
-}
-
-/**
- * @typedef {{
- *   width: number,
- *   height: number
- * }} WindowRectDef
- */
-let WindowRectDef;
-
-/**
- * @typedef {{
- *   x: number,
- *   y: number,
- *   top: number,
- *   bottom: number,
- *   left: number,
- *   right: number,
- *   width: number,
- *   height: number
- * }}
- */
-let DOMRectDef;
-
-/** @enum {string} */
-// export let ScrollBehavior = {
-//   AUTO: 'auto',
-//   SMOOTH: 'smooth',
-// }
-
-/** @typedef {{
- *   left: number,
- *   top: number,
- *   behavior: ScrollBehavior
- * }}
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions}
- */
-let ScrollToOptionsDef;
-
-module.exports = {
-  ElementHandle,
-  FunctionalTestController,
-  Key,
-  WindowRectDef,
-  DOMRectDef,
-  ScrollToOptionsDef,
-};
diff --git a/build-system/tasks/e2e/index.js b/build-system/tasks/e2e/index.js
index 80dc6430d0f37..a8426d473c817 100644
--- a/build-system/tasks/e2e/index.js
+++ b/build-system/tasks/e2e/index.js
@@ -10,133 +10,211 @@
  * 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
+ * See the License for the specific lan``guage governing permissions and
  * limitations under the License.
  */
 
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
-const ciReporter = require('../mocha-ci-reporter');
+const ciReporter = require('./mocha-ci-reporter');
 const config = require('../../test-configs/config');
+const dotsReporter = require('./mocha-dots-reporter');
+const fs = require('fs');
 const glob = require('glob');
-const log = require('fancy-log');
+const http = require('http');
 const Mocha = require('mocha');
 const path = require('path');
 const {
-  buildRuntime,
-  getFilesFromArgv,
-  installPackages,
-} = require('../../common/utils');
-const {cyan} = require('ansi-colors');
-const {isTravisBuild} = require('../../common/travis');
+  createCtrlcHandler,
+  exitCtrlcHandler,
+} = require('../../common/ctrlcHandler');
+const {buildRuntime, getFilesFromArgv} = require('../../common/utils');
+const {cyan} = require('../../common/colors');
+const {execOrDie} = require('../../common/exec');
+const {HOST, PORT, startServer, stopServer} = require('../serve');
+const {isCiBuild, isCircleciBuild} = require('../../common/ci');
+const {log} = require('../../common/logging');
+const {maybePrintCoverageMessage} = require('../helpers');
 const {reportTestStarted} = require('../report-test-status');
-const {startServer, stopServer} = require('../serve');
-const {watch} = require('gulp');
+const {watch} = require('chokidar');
 
-const HOST = 'localhost';
-const PORT = 8000;
 const SLOW_TEST_THRESHOLD_MS = 2500;
-const TEST_RETRIES = isTravisBuild() ? 2 : 0;
+const TEST_RETRIES = isCiBuild() ? 2 : 0;
 
-async function launchWebServer_() {
-  await startServer(
+const COV_DOWNLOAD_PATH = '/coverage/download';
+const COV_OUTPUT_DIR = './test/coverage-e2e';
+const COV_OUTPUT_HTML = path.resolve(COV_OUTPUT_DIR, 'lcov-report/index.html');
+
+/**
+ * Set up the e2e testing environment.
+ * @return {!Promise<void>}
+ */
+async function setUpTesting_() {
+  require('@babel/register')({caller: {name: 'test'}});
+  const {describes} = require('./helper');
+  describes.configure({
+    browsers: argv.browsers,
+    headless: argv.headless,
+  });
+
+  // build runtime
+  if (!argv.nobuild) {
+    await buildRuntime();
+  }
+
+  // start up web server
+  return startServer(
     {host: HOST, port: PORT},
     {quiet: !argv.debug},
     {compiled: argv.compiled}
   );
 }
 
-async function cleanUp_() {
-  await stopServer();
-}
-
+/**
+ * Creates a mocha test instance with configuration determined by CLI args.
+ * @return {!Mocha}
+ */
 function createMocha_() {
-  const mocha = new Mocha({
+  let reporter;
+  if (argv.testnames || argv.watch) {
+    reporter = '';
+  } else if (argv.report || isCircleciBuild()) {
+    // TODO(#28387) clean up this typing.
+    reporter = /** @type {*} */ (ciReporter);
+  } else {
+    reporter = dotsReporter;
+  }
+
+  return new Mocha({
     // e2e tests have a different standard for when a test is too slow,
     // so we set a non-default threshold.
     slow: SLOW_TEST_THRESHOLD_MS,
-    reporter: argv.testnames || argv.watch ? '' : ciReporter,
+    reporter,
     retries: TEST_RETRIES,
     fullStackTrace: true,
+    reporterOptions: isCiBuild()
+      ? {
+          mochaFile: 'result-reports/e2e.xml',
+        }
+      : null,
   });
-
-  return mocha;
 }
 
-async function e2e() {
-  // install e2e-specific modules
-  installPackages(__dirname);
+/**
+ * Refreshes require cache and adds file to a Mocha instance.
+ * @param {!Mocha} mocha Mocha test instance.
+ * @param {string} file relative path to test file to add.
+ */
+function addMochaFile_(mocha, file) {
+  delete require.cache[path.resolve(file)];
+  mocha.addFile(file);
+}
 
-  // set up promise to return to gulp.task()
-  let resolver;
-  const deferred = new Promise((resolverIn) => {
-    resolver = resolverIn;
-  });
+/**
+ * Fetch aggregated coverage data from server.
+ * @param {string} outDir relative path to coverage files directory.
+ * @return {Promise<void>}
+ */
+async function fetchCoverage_(outDir) {
+  // Note: We could access the coverage UI directly through the server started
+  // for the e2e tests, but then that coverage data would vanish once that
+  // server instance was closed. This method will persist the coverage data so
+  // it can be accessed separately.
+
+  // Clear out previous coverage data.
+  fs.rmdirSync(outDir, {recursive: true});
+  fs.mkdirSync(outDir);
+
+  const zipFilename = path.join(outDir, 'coverage.zip');
+  const zipFile = fs.createWriteStream(zipFilename);
+
+  await /** @type {Promise<void>} */ (
+    new Promise((resolve, reject) => {
+      http
+        .get(
+          {
+            host: HOST,
+            port: PORT,
+            path: COV_DOWNLOAD_PATH,
+          },
+          (response) => {
+            response.pipe(zipFile);
+            zipFile.on('finish', () => {
+              zipFile.close();
+              resolve();
+            });
+          }
+        )
+        .on('error', (err) => {
+          fs.unlinkSync(zipFilename);
+          reject(err);
+        });
+    })
+  );
+  execOrDie(`unzip -o ${zipFilename} -d ${outDir}`);
+}
 
-  require('@babel/register')({caller: {name: 'test'}});
-  const {describes} = require('./helper');
-  describes.configure({
-    browsers: argv.browsers,
-    engine: argv.engine,
-    headless: argv.headless,
-  });
+/**
+ * Runs e2e tests on all files under test.
+ * @return {!Promise<void>}
+ */
+async function runTests_() {
+  const mocha = createMocha_();
+  const addFile = addMochaFile_.bind(null, mocha);
 
-  // build runtime
-  if (!argv.nobuild) {
-    await buildRuntime();
+  // specify tests to run
+  if (argv.files) {
+    getFilesFromArgv().forEach(addFile);
+  } else {
+    config.e2eTestPaths.forEach((path) => {
+      glob.sync(path).forEach(addFile);
+    });
   }
 
-  // start up web server
-  await launchWebServer_();
-
-  // run tests
-  if (!argv.watch) {
-    log('Running tests...');
-    const mocha = createMocha_();
-
-    // specify tests to run
-    if (argv.files) {
-      getFilesFromArgv().forEach((file) => {
-        delete require.cache[file];
-        mocha.addFile(file);
-      });
-    } else {
-      config.e2eTestPaths.forEach((path) => {
-        glob.sync(path).forEach((file) => {
-          delete require.cache[file];
-          mocha.addFile(file);
-        });
-      });
-    }
+  await reportTestStarted();
 
-    await reportTestStarted();
+  // return promise to amp that resolves when there's an error.
+  return new Promise((resolve) => {
     mocha.run(async (failures) => {
-      // end web server
-      await cleanUp_();
-
-      // end task
+      if (argv.coverage) {
+        await fetchCoverage_(COV_OUTPUT_DIR);
+        maybePrintCoverageMessage(COV_OUTPUT_HTML);
+      }
+      await stopServer();
       process.exitCode = failures ? 1 : 0;
-      await resolver();
-    });
-  } else {
-    const filesToWatch = argv.files
-      ? getFilesFromArgv()
-      : [config.e2eTestPaths];
-    const watcher = watch(filesToWatch);
-    log('Watching', cyan(filesToWatch), 'for changes...');
-    watcher.on('change', (file) => {
-      log('Detected a change in', cyan(file));
-      log('Running tests...');
-      // clear file from node require cache if running test again
-      delete require.cache[path.resolve(file)];
-      const mocha = createMocha_();
-      mocha.files = [file];
-      mocha.run();
+      resolve();
     });
-  }
+  });
+}
+
+/**
+ * Watches files a under test, running affected e2e tests on changes.
+ * @return {!Promise<void>}
+ */
+async function runWatch_() {
+  const filesToWatch = argv.files ? getFilesFromArgv() : config.e2eTestPaths;
 
-  return deferred;
+  log('Watching', cyan(filesToWatch), 'for changes...');
+  watch(filesToWatch).on('change', (file) => {
+    log('Detected a change in', cyan(file));
+    const mocha = createMocha_();
+    addMochaFile_(mocha, file);
+    mocha.run();
+  });
+
+  // return non-resolving promise to amp.
+  return new Promise(() => {});
+}
+
+/**
+ * Entry-point to run e2e tests.
+ */
+async function e2e() {
+  const handlerProcess = createCtrlcHandler('e2e');
+  await setUpTesting_();
+  argv.watch ? await runWatch_() : await runTests_();
+  exitCtrlcHandler(handlerProcess);
 }
 
 module.exports = {
@@ -146,21 +224,22 @@ module.exports = {
 e2e.description = 'Runs e2e tests';
 e2e.flags = {
   'browsers':
-    '  Run only the specified browser tests. Options are ' +
+    'Run only the specified browser tests. Options are ' +
     '`chrome`, `firefox`, `safari`.',
   'config':
-    '  Sets the runtime\'s AMP_CONFIG to one of "prod" (default) or "canary"',
-  'core_runtime_only': '  Builds only the core runtime.',
-  'nobuild':
-    '  Skips building the runtime via `gulp (build|dist) --fortesting`',
-  'extensions': '  Builds only the listed extensions.',
-  'compiled': '  Runs tests against minified JS',
-  'files': '  Run tests found in a specific path (ex: **/test-e2e/*.js)',
-  'testnames': '  Lists the name of each test being run',
-  'watch': '  Watches for changes in files, runs corresponding test(s)',
-  'engine':
-    '  The automation engine that orchestrates the browser. ' +
-    'Options are `puppeteer` or `selenium`. Default: `selenium`',
-  'headless': '  Runs the browser in headless mode',
-  'debug': '  Prints debugging information while running tests',
+    'Sets the runtime\'s AMP_CONFIG to one of "prod" (default) or "canary"',
+  'core_runtime_only': 'Builds only the core runtime.',
+  'nobuild': 'Skips building the runtime via `amp (build|dist) --fortesting`',
+  'define_experiment_constant':
+    'Transforms tests with the EXPERIMENT constant set to true',
+  'experiment': 'Experiment being tested (used for status reporting)',
+  'extensions': 'Builds only the listed extensions.',
+  'compiled': 'Runs tests against minified JS',
+  'files': 'Run tests found in a specific path (ex: **/test-e2e/*.js)',
+  'testnames': 'Lists the name of each test being run',
+  'watch': 'Watches for changes in files, runs corresponding test(s)',
+  'headless': 'Runs the browser in headless mode',
+  'debug': 'Prints debugging information while running tests',
+  'report': 'Write test result report to a local file',
+  'coverage': 'Collect coverage data from instrumented code',
 };
diff --git a/build-system/tasks/e2e/mocha-ci-reporter.js b/build-system/tasks/e2e/mocha-ci-reporter.js
new file mode 100644
index 0000000000000..f0d6464c2ce61
--- /dev/null
+++ b/build-system/tasks/e2e/mocha-ci-reporter.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2020 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.
+ */
+
+const JsonReporter = require('./mocha-custom-json-reporter');
+const mocha = require('mocha');
+const MochaDotsReporter = require('./mocha-dots-reporter');
+const MochaJUnitReporter = require('mocha-junit-reporter');
+const {Base} = mocha.reporters;
+
+/**
+ * @param {*} runner
+ * @param {*} options
+ * @return {MochaDotsReporter}
+ */
+function ciReporter(runner, options) {
+  Base.call(this, runner, options);
+  this._mochaDotsReporter = new MochaDotsReporter(runner);
+  this._jsonReporter = new JsonReporter(runner);
+  this._mochaJunitReporter = new MochaJUnitReporter(runner, options);
+  // TODO(#28387) clean up this typing.
+  return /** @type {*} */ (this);
+}
+ciReporter.prototype.__proto__ = Base.prototype;
+
+module.exports = ciReporter;
diff --git a/build-system/tasks/e2e/mocha-custom-json-reporter.js b/build-system/tasks/e2e/mocha-custom-json-reporter.js
new file mode 100644
index 0000000000000..bc4bddc549212
--- /dev/null
+++ b/build-system/tasks/e2e/mocha-custom-json-reporter.js
@@ -0,0 +1,94 @@
+/**
+ * Copyright 2020 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 fs = require('fs-extra');
+const mocha = require('mocha');
+const {Base} = require('mocha').reporters;
+const {inherits} = require('mocha').utils;
+
+const {
+  EVENT_RUN_END,
+  EVENT_SUITE_BEGIN,
+  EVENT_SUITE_END,
+  EVENT_TEST_FAIL,
+  EVENT_TEST_PASS,
+  EVENT_TEST_PENDING,
+} = mocha.Runner.constants;
+/**
+ * @param {Object} output
+ * @param {string} filename
+ * @return {Promise<void>}
+ */
+async function writeOutput(output, filename) {
+  try {
+    await fs.outputJson(filename, output, {spaces: 4});
+  } catch (error) {
+    process.stdout.write(
+      Base.color(
+        'fail',
+        `Could not write test result report to file '${filename}': ${error}`
+      )
+    );
+  }
+}
+
+/**
+ * Custom Mocha reporter for CI builds.
+ * Mimics the structured karma reporter, but for Mocha.
+ * @param {*} runner
+ */
+function JsonReporter(runner) {
+  // @ts-ignore
+  Base.call(this, runner);
+  const testEvents = [];
+  let suiteList = [];
+
+  runner.on(EVENT_SUITE_BEGIN, function (suite) {
+    suiteList.push(suite.title);
+  });
+
+  runner.on(EVENT_SUITE_END, function () {
+    // We need a fresh copy every time we make a new suite,
+    // so we can't use pop here (or the suiteList info of previous
+    // tests would be changed)
+    suiteList = suiteList.slice(0, -1);
+  });
+
+  [EVENT_TEST_PASS, EVENT_TEST_FAIL, EVENT_TEST_PENDING].forEach((event) => {
+    runner.on(event, (test) => {
+      testEvents.push({test, suiteList, event});
+    });
+  });
+
+  runner.on(EVENT_RUN_END, async function () {
+    const results = testEvents.map(({event, suiteList, test}) => ({
+      description: test.title,
+      suite: suiteList,
+      success: event === EVENT_TEST_PASS,
+      skipped: event === EVENT_TEST_PENDING,
+      time: test.duration, // in milliseconds
+    }));
+
+    // Apparently we'll need to add a --no-exit flag when calling this
+    // to allow for the asynchronous reporter.
+    // See https://github.com/mochajs/mocha/issues/812
+    await writeOutput({browsers: [{results}]}, `result-reports/e2e.json`);
+  });
+}
+
+inherits(JsonReporter, Base);
+module.exports = JsonReporter;
diff --git a/build-system/tasks/e2e/mocha-dots-reporter.js b/build-system/tasks/e2e/mocha-dots-reporter.js
new file mode 100644
index 0000000000000..ebbff15434451
--- /dev/null
+++ b/build-system/tasks/e2e/mocha-dots-reporter.js
@@ -0,0 +1,80 @@
+/**
+ * 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 Mocha = require('mocha');
+const {log, logWithoutTimestamp} = require('../../common/logging');
+const {
+  EVENT_RUN_BEGIN,
+  EVENT_RUN_END,
+  EVENT_TEST_FAIL,
+  EVENT_TEST_PASS,
+  EVENT_TEST_PENDING,
+} = Mocha.Runner.constants;
+const {Base} = Mocha.reporters;
+const {green, red, yellow} = require('../../common/colors');
+const {icon, nbDotsPerLine} =
+  require('../../test-configs/karma.conf').superDotsReporter;
+const {reportTestFinished} = require('../report-test-status');
+
+/**
+ * Custom Mocha reporter for CI builds.
+ * Mimics the style of the Karma super-dots reporter.
+ * @param {*} runner
+ */
+class MochaDotsReporter extends Base {
+  /**
+   * @param {*} runner
+   */
+  constructor(runner) {
+    super(runner);
+
+    let wrapCounter = 0;
+    const printDot = (dot) => {
+      process.stdout.write(dot);
+      if (++wrapCounter >= nbDotsPerLine) {
+        wrapCounter = 0;
+        process.stdout.write('\n');
+      }
+    };
+
+    runner
+      .once(EVENT_RUN_BEGIN, () => {
+        log('Running tests...');
+      })
+      .on(EVENT_TEST_PASS, () => {
+        printDot(green(icon.success));
+      })
+      .on(EVENT_TEST_FAIL, () => {
+        printDot(red(icon.failure));
+      })
+      .on(EVENT_TEST_PENDING, () => {
+        printDot(yellow(icon.ignore));
+      })
+      .once(EVENT_RUN_END, () => {
+        Base.list(this.failures);
+        const {failures, passes, pending, tests} = runner.stats;
+        logWithoutTimestamp(
+          `Executed ${failures + passes} of ${tests}`,
+          `(Skipped ${pending})`,
+          failures == 0 ? green('SUCCESS') : red(`${failures} FAILED`)
+        );
+        reportTestFinished(passes, failures);
+      });
+  }
+}
+
+module.exports = MochaDotsReporter;
diff --git a/build-system/tasks/e2e/network-logger.js b/build-system/tasks/e2e/network-logger.js
index 28bcbaa979858..e5d0559e23564 100644
--- a/build-system/tasks/e2e/network-logger.js
+++ b/build-system/tasks/e2e/network-logger.js
@@ -13,7 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {logging} from 'selenium-webdriver';
+import selenium from 'selenium-webdriver';
+
+const {logging} = selenium;
 
 /** @enum {string} */
 const PerformanceMethods = {
@@ -26,13 +28,17 @@ const PerformanceMethods = {
   'WINDOW_OPEN': 'Network.windowOpen',
 };
 
-class NetworkLogger {
-  /** @param {!WebDriver} driver */
+export class NetworkLogger {
+  /** @param {!selenium.WebDriver} driver */
   constructor(driver) {
-    /** @type {WebDriver} */
+    /** @type {selenium.WebDriver} */
     this.driver_ = driver;
   }
 
+  /**
+   * @param {PerformanceMethods} networkMethod
+   * @return {Promise<*>}
+   */
   async getEntries_(networkMethod) {
     const entries = await this.driver_
       .manage()
@@ -49,7 +55,7 @@ class NetworkLogger {
   /**
    * Gets sent requests with an optional url to filter by.
    * @param {string=} url
-   * @return {Array<logging.Entry>}
+   * @return {Promise<Array<*>>}
    */
   async getSentRequests(url) {
     const entries = await this.getEntries_(
@@ -61,7 +67,3 @@ class NetworkLogger {
     return entries;
   }
 }
-
-module.exports = {
-  NetworkLogger,
-};
diff --git a/build-system/tasks/e2e/package-lock.json b/build-system/tasks/e2e/package-lock.json
new file mode 100644
index 0000000000000..a47580d3011bb
--- /dev/null
+++ b/build-system/tasks/e2e/package-lock.json
@@ -0,0 +1,1177 @@
+{
+  "name": "amp-e2e",
+  "version": "0.1.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@babel/register": {
+      "version": "7.13.16",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.13.16.tgz",
+      "integrity": "sha512-dh2t11ysujTwByQjXNgJ48QZ2zcXKQVdV8s0TbeMI0flmtGWCdTwK9tJiACHXPLmncm5+ktNn/diojA45JE4jg==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "find-cache-dir": "^2.0.0",
+        "make-dir": "^2.1.0",
+        "pirates": "^4.0.0",
+        "source-map-support": "^0.5.16"
+      }
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
+      "integrity": "sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.4",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+      "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz",
+      "integrity": "sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.4",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@sindresorhus/is": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.0.1.tgz",
+      "integrity": "sha512-Qm9hBEBu18wt1PO2flE7LPb30BHMQt1eQgbV76YntdNk73XZGpn3izvGTYxbGgzXKgbCjiia0uxTd3aTNQrY/g==",
+      "dev": true
+    },
+    "@szmarczak/http-timer": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.5.tgz",
+      "integrity": "sha512-PyRA9sm1Yayuj5OIoJ1hGt2YISX45w9WcFbh6ddT0Z/0yaFxOtGLInr4jUfU1EAFVs0Yfyfev4RNwBlUaHdlDQ==",
+      "dev": true,
+      "requires": {
+        "defer-to-connect": "^2.0.0"
+      }
+    },
+    "@testim/chrome-version": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@testim/chrome-version/-/chrome-version-1.0.7.tgz",
+      "integrity": "sha512-8UT/J+xqCYfn3fKtOznAibsHpiuDshCb0fwgWxRazTT19Igp9ovoXMPhXyLD6m3CKQGTMHgqoxaFfMWaL40Rnw==",
+      "dev": true
+    },
+    "@types/cacheable-request": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.1.tgz",
+      "integrity": "sha512-ykFq2zmBGOCbpIXtoVbz4SKY5QriWPh3AjyU4G74RYbtt5yOc5OfaY75ftjg7mikMOla1CTGpX3lLbuJh8DTrQ==",
+      "dev": true,
+      "requires": {
+        "@types/http-cache-semantics": "*",
+        "@types/keyv": "*",
+        "@types/node": "*",
+        "@types/responselike": "*"
+      }
+    },
+    "@types/http-cache-semantics": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.0.tgz",
+      "integrity": "sha512-c3Xy026kOF7QOTn00hbIllV1dLR9hG9NkSrLQgCVs8NF6sBU+VGWjD3wLPhmh1TYAc7ugCFsvHYMN4VcBN1U1A==",
+      "dev": true
+    },
+    "@types/keyv": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.1.tgz",
+      "integrity": "sha512-MPtoySlAZQ37VoLaPcTHCu1RWJ4llDkULYZIzOYxlhxBqYPB0RsRlmMU0R6tahtFe27mIdkHV+551ZWV4PLmVw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/node": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.3.tgz",
+      "integrity": "sha512-/WbxFeBU+0F79z9RdEOXH4CsDga+ibi5M8uEYr91u3CkT/pdWcV8MCook+4wDPnZBexRdwWS+PiVZ2xJviAzcQ==",
+      "dev": true
+    },
+    "@types/responselike": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
+      "integrity": "sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/yauzl": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.1.tgz",
+      "integrity": "sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "adm-zip": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.5.tgz",
+      "integrity": "sha512-IWwXKnCbirdbyXSfUDvCCrmYrOHANRZcc8NcRrvTlIApdl7PwE9oGcsYvNeJPAVY1M+70b4PxXGKIf8AEuiQ6w==",
+      "dev": true
+    },
+    "agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dev": true,
+      "requires": {
+        "debug": "4"
+      }
+    },
+    "aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "dev": true,
+      "requires": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      }
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "dev": true,
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
+    "babel-regenerator-runtime": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/babel-regenerator-runtime/-/babel-regenerator-runtime-6.5.0.tgz",
+      "integrity": "sha1-DkHNHJ+ARCRm8BXHSf/4upj44RA=",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "dev": true
+    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "dev": true
+    },
+    "cacheable-lookup": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
+      "integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==",
+      "dev": true
+    },
+    "cacheable-request": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.1.tgz",
+      "integrity": "sha512-lt0mJ6YAnsrBErpTMWeu5kl/tg9xMAWjavYTN6VQXM1A/teBITuNcccXsCxF0tDQQJf9DfAaX5O4e0zp0KlfZw==",
+      "dev": true,
+      "requires": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^4.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^4.1.0",
+        "responselike": "^2.0.0"
+      }
+    },
+    "chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "dev": true
+    },
+    "chromedriver": {
+      "version": "90.0.1",
+      "resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-90.0.1.tgz",
+      "integrity": "sha512-jvyhin0I/Bacxfet7eg29B1j+5mKR35XwWGbgcCOUALeE3mqcCKJY8xUW9cVrqVqTK9/iUOq8/kar7qrTVshPA==",
+      "dev": true,
+      "requires": {
+        "@testim/chrome-version": "^1.0.7",
+        "axios": "^0.21.1",
+        "del": "^6.0.0",
+        "extract-zip": "^2.0.1",
+        "https-proxy-agent": "^5.0.0",
+        "proxy-from-env": "^1.1.0",
+        "tcp-port-used": "^1.0.1"
+      }
+    },
+    "clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "dev": true
+    },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
+    "clone-response": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
+      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
+      "dev": true,
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "dev": true
+    },
+    "debug": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dev": true,
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "requires": {
+        "mimic-response": "^3.1.0"
+      },
+      "dependencies": {
+        "mimic-response": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+          "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+          "dev": true
+        }
+      }
+    },
+    "deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
+      "dev": true
+    },
+    "defer-to-connect": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
+      "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
+      "dev": true
+    },
+    "del": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz",
+      "integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==",
+      "dev": true,
+      "requires": {
+        "globby": "^11.0.1",
+        "graceful-fs": "^4.2.4",
+        "is-glob": "^4.0.1",
+        "is-path-cwd": "^2.2.0",
+        "is-path-inside": "^3.0.2",
+        "p-map": "^4.0.0",
+        "rimraf": "^3.0.2",
+        "slash": "^3.0.0"
+      }
+    },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "requires": {
+        "path-type": "^4.0.0"
+      }
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "requires": {
+        "@types/yauzl": "^2.9.1",
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      }
+    },
+    "fast-glob": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
+      "integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.0",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.2",
+        "picomatch": "^2.2.1"
+      }
+    },
+    "fastq": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.0.tgz",
+      "integrity": "sha512-7Eczs8gIPDrVzT+EksYBcupqMyxSHXXrHOLRRxU2/DicV8789MRBRR8+Hc2uWzUupOs4YS4JzBmBxjjCVBxD/g==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
+      "dev": true,
+      "requires": {
+        "pend": "~1.2.0"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "find-cache-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
+      "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
+      "dev": true,
+      "requires": {
+        "commondir": "^1.0.1",
+        "make-dir": "^2.0.0",
+        "pkg-dir": "^3.0.0"
+      }
+    },
+    "find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^3.0.0"
+      }
+    },
+    "follow-redirects": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
+      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
+      "dev": true
+    },
+    "fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "geckodriver": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/geckodriver/-/geckodriver-2.0.0.tgz",
+      "integrity": "sha512-qcL58vKCwaUufE9y2viDydvvynxUzeITc0CblefAo0jWdxNMbQmY6wVt6MKJuBHOQ71QRer5iq9CSRZHppuytg==",
+      "dev": true,
+      "requires": {
+        "adm-zip": "0.5.5",
+        "bluebird": "3.7.2",
+        "got": "11.8.2",
+        "https-proxy-agent": "5.0.0",
+        "tar": "6.1.0"
+      }
+    },
+    "get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "requires": {
+        "pump": "^3.0.0"
+      }
+    },
+    "glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "globby": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.3.tgz",
+      "integrity": "sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==",
+      "dev": true,
+      "requires": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.1.1",
+        "ignore": "^5.1.4",
+        "merge2": "^1.3.0",
+        "slash": "^3.0.0"
+      }
+    },
+    "got": {
+      "version": "11.8.2",
+      "resolved": "https://registry.npmjs.org/got/-/got-11.8.2.tgz",
+      "integrity": "sha512-D0QywKgIe30ODs+fm8wMZiAcZjypcCodPNuMz5H9Mny7RJ+IjJ10BdmGW7OM7fHXP+O7r6ZwapQ/YQmMSvB0UQ==",
+      "dev": true,
+      "requires": {
+        "@sindresorhus/is": "^4.0.0",
+        "@szmarczak/http-timer": "^4.0.5",
+        "@types/cacheable-request": "^6.0.1",
+        "@types/responselike": "^1.0.0",
+        "cacheable-lookup": "^5.0.3",
+        "cacheable-request": "^7.0.1",
+        "decompress-response": "^6.0.0",
+        "http2-wrapper": "^1.0.0-beta.5.2",
+        "lowercase-keys": "^2.0.0",
+        "p-cancelable": "^2.0.0",
+        "responselike": "^2.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
+      "dev": true
+    },
+    "http-cache-semantics": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
+      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
+      "dev": true
+    },
+    "http2-wrapper": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
+      "integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
+      "dev": true,
+      "requires": {
+        "quick-lru": "^5.1.1",
+        "resolve-alpn": "^1.0.0"
+      }
+    },
+    "https-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
+      "dev": true,
+      "requires": {
+        "agent-base": "6",
+        "debug": "4"
+      }
+    },
+    "ignore": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+      "dev": true
+    },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=",
+      "dev": true
+    },
+    "indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "ip-regex": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
+      "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "is-path-cwd": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
+      "dev": true
+    },
+    "is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true
+    },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
+      "dev": true
+    },
+    "is2": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/is2/-/is2-2.0.7.tgz",
+      "integrity": "sha512-4vBQoURAXC6hnLFxD4VW7uc04XiwTTl/8ydYJxKvPwkWQrSjInkuM5VZVg6BGr1/natq69zDuvO9lGpLClJqvA==",
+      "dev": true,
+      "requires": {
+        "deep-is": "^0.1.3",
+        "ip-regex": "^4.1.0",
+        "is-url": "^1.2.4"
+      }
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+      "dev": true
+    },
+    "isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "dev": true
+    },
+    "json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true
+    },
+    "jszip": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.6.0.tgz",
+      "integrity": "sha512-jgnQoG9LKnWO3mnVNBnfhkh0QknICd1FGSrXcgrl67zioyJ4wgx25o9ZqwNtrROSflGBCGYnJfjrIyRIby1OoQ==",
+      "dev": true,
+      "requires": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "set-immediate-shim": "~1.0.1"
+      }
+    },
+    "keyv": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.3.tgz",
+      "integrity": "sha512-zdGa2TOpSZPq5mU6iowDARnMBZgtCqJ11dJROFi6tg6kTn4nuUdU09lFyLFSaHrWqpIJ+EBq4E8/Dc0Vx5vLdA==",
+      "dev": true,
+      "requires": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true
+    },
+    "lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dev": true,
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      }
+    },
+    "lowercase-keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+      "dev": true
+    },
+    "make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "requires": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      }
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.2.3"
+      }
+    },
+    "mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minipass": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
+      "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      }
+    },
+    "mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node-modules-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
+      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=",
+      "dev": true
+    },
+    "normalize-url": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
+      "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "p-cancelable": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
+      "integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==",
+      "dev": true
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.0.0"
+      }
+    },
+    "p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "dev": true,
+      "requires": {
+        "aggregate-error": "^3.0.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
+    "pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "dev": true
+    },
+    "path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
+      "integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==",
+      "dev": true
+    },
+    "pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true
+    },
+    "pirates": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
+      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
+      "dev": true,
+      "requires": {
+        "node-modules-regexp": "^1.0.0"
+      }
+    },
+    "pkg-dir": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+      "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+      "dev": true,
+      "requires": {
+        "find-up": "^3.0.0"
+      }
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
+    "quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true
+    },
+    "readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dev": true,
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "resolve-alpn": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.1.2.tgz",
+      "integrity": "sha512-8OyfzhAtA32LVUsJSke3auIyINcwdh5l3cvYKdKO0nvsYSKuiLfTM5i78PJswFPT8y6cPW+L1v6/hE95chcpDA==",
+      "dev": true
+    },
+    "responselike": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.0.tgz",
+      "integrity": "sha512-xH48u3FTB9VsZw7R+vvgaKeLKzT6jOogbQhEe/jewwnZgzPcnyWui2Av6JpoYZF/91uueC+lqhWqeURw5/qhCw==",
+      "dev": true,
+      "requires": {
+        "lowercase-keys": "^2.0.0"
+      }
+    },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "selenium-webdriver": {
+      "version": "4.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-beta.3.tgz",
+      "integrity": "sha512-R0mGHpQkSKgIWiPgcKDcckh4A6aaK0KTyWxs5ieuiI7zsXQ+Kb6neph+dNoeqq3jSBGyv3ONo2w3oohoL4D/Rg==",
+      "dev": true,
+      "requires": {
+        "jszip": "^3.5.0",
+        "rimraf": "^2.7.1",
+        "tmp": "^0.2.1",
+        "ws": "^7.3.1"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true
+    },
+    "set-immediate-shim": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
+      "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=",
+      "dev": true
+    },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
+    "slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
+    },
+    "source-map-support": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "tar": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
+      "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
+      "dev": true,
+      "requires": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^3.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      }
+    },
+    "tcp-port-used": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tcp-port-used/-/tcp-port-used-1.0.2.tgz",
+      "integrity": "sha512-l7ar8lLUD3XS1V2lfoJlCBaeoaWo/2xfYt81hM7VlvR4RrMVFqfmzfhLVk40hAb368uitje5gPtBRL1m/DGvLA==",
+      "dev": true,
+      "requires": {
+        "debug": "4.3.1",
+        "is2": "^2.0.6"
+      }
+    },
+    "tmp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "dev": true,
+      "requires": {
+        "rimraf": "^3.0.0"
+      }
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "ws": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
+      "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
+      "dev": true
+    },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    }
+  }
+}
diff --git a/build-system/tasks/e2e/package.json b/build-system/tasks/e2e/package.json
index c0521e41eb233..712545a0ab02d 100644
--- a/build-system/tasks/e2e/package.json
+++ b/build-system/tasks/e2e/package.json
@@ -1,17 +1,13 @@
 {
   "private": true,
-  "name": "gulp-e2e",
+  "name": "amp-e2e",
   "version": "0.1.0",
-  "description": "Gulp e2e",
+  "description": "amp e2e",
   "devDependencies": {
-    "@babel/register": "7.10.1",
+    "@babel/register": "7.13.16",
     "babel-regenerator-runtime": "6.5.0",
-    "chromedriver": "83.0.0",
-    "puppeteer": "3.3.0",
-    "geckodriver": "1.19.1",
-    "selenium-webdriver": "4.0.0-alpha.7"
-  },
-  "resolutions": {
-    "**/**/minimist": "^1.2.3"
+    "chromedriver": "90.0.1",
+    "geckodriver": "2.0.0",
+    "selenium-webdriver": "4.0.0-beta.3"
   }
 }
diff --git a/build-system/tasks/e2e/puppeteer-controller.js b/build-system/tasks/e2e/puppeteer-controller.js
deleted file mode 100644
index 263ac2868e48c..0000000000000
--- a/build-system/tasks/e2e/puppeteer-controller.js
+++ /dev/null
@@ -1,731 +0,0 @@
-/**
- * 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.
- */
-
-const fs = require('fs');
-const {
-  Browser, // eslint-disable-line no-unused-vars
-  JSHandle, // eslint-disable-line no-unused-vars
-  Page, // eslint-disable-line no-unused-vars
-  ElementHandle: PuppeteerHandle, // eslint-disable-line no-unused-vars
-} = require('puppeteer');
-const {
-  DOMRectDef,
-  ElementHandle,
-  FunctionalTestController, // eslint-disable-line no-unused-vars
-  Key,
-} = require('./functional-test-controller');
-const {ControllerPromise} = require('./controller-promise');
-const {dirname, join} = require('path');
-
-/**
- * For a list of all possible key strings, see
- * {@link https://github.com/GoogleChrome/puppeteer/blob/master/lib/USKeyboardLayout.js}
- * @enum {string}
- */
-const KeyToPuppeteerMap = {
-  [Key.ArrowDown]: 'ArrowDown',
-  [Key.ArrowLeft]: 'ArrowLeft',
-  [Key.ArrowRight]: 'ArrowRight',
-  [Key.ArrowUp]: 'ArrowUp',
-  [Key.Enter]: 'Enter',
-  [Key.Escape]: 'Escape',
-  [Key.Tab]: 'Tab',
-};
-
-const DEFAULT_WAIT_TIMEOUT = 10000;
-
-/**
- * Make the test runner wait until the value returned by the valueFn matches
- * the given condition.
- * @param {!Page} page
- * @param {function(): !Promise<T>} valueFn
- * @param {!IArrayLike<*>} args
- * @param {function(T):boolean} condition
- * @param {function(T):T} opt_mutate
- * @return {!Promise<?T>}
- * @template T
- */
-async function waitFor(page, valueFn, args, condition, opt_mutate) {
-  const handle = await evaluate(page, valueFn, ...args);
-  let value = await unboxHandle(handle);
-  if (opt_mutate) {
-    value = await opt_mutate(value);
-  }
-
-  while (!condition(value)) {
-    const handle = await page.waitForFunction(
-      valueFn,
-      {timeout: DEFAULT_WAIT_TIMEOUT},
-      ...args
-    );
-    value = await unboxHandle(handle);
-    if (opt_mutate) {
-      value = await opt_mutate(value);
-    }
-  }
-  return value;
-}
-
-/**
- * Remove the jsonValue wrapper from a PuppeteerHandle and
- * remove an outer object wrapper if present.
- * @param {!PuppeteerHandle} handle
- * @return {T}
- * @template T
- */
-async function unboxHandle(handle) {
-  const prop = await handle.jsonValue();
-  return 'value' in prop ? prop.value : prop;
-}
-
-/**
- * Evaluate the given function and its arguments in the context of the document.
- * @param {!Frame} frame
- * @param {function(...*):*} fn
- * @return {!Promise<!JSHandle>}
- */
-function evaluate(frame, fn) {
-  const args = Array.prototype.slice.call(arguments, 2);
-  return frame.evaluateHandle(fn, ...args);
-}
-
-/** @implements {FunctionalTestController} */
-class PuppeteerController {
-  /**
-   * @param {!Browser} browser
-   */
-  constructor(browser) {
-    /** @private @const */
-    this.browser_ = browser;
-
-    /** @private */
-    this.page_ = null;
-
-    /** @private */
-    this.currentFrame_ = null;
-
-    /** @private */
-    this.shadowRoot_ = null;
-
-    /** @private */
-    this.isXpathInstalled_ = false;
-  }
-
-  /**
-   * Get the current page object. Create the object if it does not exist.
-   * @return {!Promise<!Page>}
-   */
-  async getPage_() {
-    if (!this.page_) {
-      this.page_ = await this.browser_.newPage();
-      await this.setWindowRect({width: 800, height: 600});
-    }
-    return this.page_;
-  }
-
-  /**
-   * Get the current page object. Create the object if it does not exist.
-   * @return {!Promise<!Frame>}
-   */
-  async getCurrentFrame_() {
-    if (!this.currentFrame_) {
-      const page = await this.getPage_();
-      this.currentFrame_ = page.mainFrame();
-    }
-
-    return this.currentFrame_;
-  }
-
-  /**
-   * Return a wait function. When called, the function will cause the test
-   * runner to wait until the given value matches the expected value.
-   * @param {function(): !Promise<?T>} valueFn
-   * @param {...*} args
-   * @return {function(T,T): !Promise<?T>}
-   * @template T
-   */
-  getWaitFn_(valueFn, ...args) {
-    return async (condition, opt_mutate) => {
-      const frame = await this.getCurrentFrame_();
-      return waitFor(frame, valueFn, args, condition, opt_mutate);
-    };
-  }
-
-  /**
-   * Evaluate a function in the context of the document.
-   * @param {function(...*):T} fn
-   * @param {...*} args
-   * @return {!Promise<!JSHandle>}
-   * @template T
-   */
-  async evaluate(fn, ...args) {
-    const frame = await this.getCurrentFrame_();
-    return await evaluate(frame, fn, ...args);
-  }
-
-  /**
-   * Gets the result of a value function which is boxed in an object.
-   * @param {*} fn
-   * @param  {...any} args
-   */
-  async evaluateValue_(fn, ...args) {
-    const value = await this.evaluate(fn, ...args);
-    const json = await value.jsonValue();
-    return json.value;
-  }
-
-  /**
-   * @param {string} selector
-   * @param {number=} timeout
-   * @return {!Promise<!ElementHandle<!PuppeteerHandle>>}
-   * @override
-   */
-  async findElement(selector, timeout = DEFAULT_WAIT_TIMEOUT) {
-    const frame = await this.getCurrentFrame_();
-    const root = await this.getRoot_();
-    const jsHandle = await frame.waitForFunction(
-      (root, selector) => {
-        return root./*OK*/ querySelector(selector);
-      },
-      {timeout},
-      root,
-      selector
-    );
-    const elementHandle = jsHandle.asElement();
-    return new ElementHandle(elementHandle);
-  }
-
-  /**
-   * @param {string} selector
-   * @return {!Promise<!Array<!ElementHandle<!PuppeteerHandle>>>}
-   * @override
-   */
-  async findElements(selector) {
-    const frame = await this.getCurrentFrame_();
-    const root = await this.getRoot_();
-    const nodeListHandle = await frame.waitForFunction(
-      (root, selector) => {
-        const nodeList = root./*OK*/ querySelectorAll(selector);
-        return nodeList.length > 0 ? Array.from(nodeList) : null;
-      },
-      {timeout: DEFAULT_WAIT_TIMEOUT},
-      root,
-      selector
-    );
-
-    const lengthHandle = await nodeListHandle.getProperty('length');
-    const length = await lengthHandle.jsonValue();
-
-    const elementHandles = [];
-    for (let i = 0; i < length; i++) {
-      const elementHandle = await nodeListHandle.getProperty(`${i}`);
-      elementHandles.push(new ElementHandle(elementHandle));
-    }
-
-    return elementHandles;
-  }
-
-  /**
-   * @param {string} xpath
-   * @return {!Promise<!ElementHandle<!PuppeteerHandle>>}
-   * @override
-   */
-  async findElementXPath(xpath) {
-    await this.maybeInstallXpath_();
-    const frame = await this.getCurrentFrame_();
-
-    const root = await this.getRoot_();
-    const jsHandle = await frame.waitForFunction(
-      (xpath, root) => {
-        const results = window.queryXpath(xpath, root);
-        return results && results[0];
-      },
-      {timeout: DEFAULT_WAIT_TIMEOUT},
-      xpath,
-      root
-    );
-    return new ElementHandle(jsHandle.asElement());
-  }
-
-  /**
-   * @param {string} xpath
-   * @return {!Promise<!Array<!ElementHandle<!PuppeteerHandle>>>}
-   * @override
-   */
-  async findElementsXPath(xpath) {
-    this.maybeInstallXpath_();
-
-    const frame = await this.getCurrentFrame_();
-    const root = await this.getRoot_();
-
-    const arrayHandle = await frame.waitForFunction(
-      (xpath, root) => {
-        return window.queryXpath(xpath, root);
-      },
-      {timeout: DEFAULT_WAIT_TIMEOUT},
-      xpath,
-      root
-    );
-
-    const lengthHandle = await arrayHandle.getProperty('length');
-    const length = await lengthHandle.jsonValue();
-
-    const elementHandles = [];
-    for (let i = 0; i < length; i++) {
-      const elementHandle = await arrayHandle.getProperty(`${i}`);
-      elementHandles.push(new ElementHandle(elementHandle));
-    }
-    return elementHandles;
-  }
-
-  /**
-   * Install a third-party XPath library if it is not already installed.
-   * @return {!Promise}
-   */
-  async maybeInstallXpath_() {
-    if (this.isXpathInstalled_) {
-      return;
-    }
-    this.isXpathInstalled_ = true;
-
-    const scripts = await Promise.all([
-      fs.promises.readFile('third_party/wgxpath/wgxpath.js', 'utf8'),
-      fs.promises.readFile(
-        'build-system/tasks/e2e/driver/query-xpath.js',
-        'utf8'
-      ),
-    ]);
-    const frame = await this.getCurrentFrame_();
-    await frame.evaluate(scripts.join('\n\n'));
-  }
-
-  /**
-   * @return {!Promise<!ElementHandle<!PuppeteerHandle>>}
-   * @override
-   */
-  async getDocumentElement() {
-    const root = await this.getRoot_();
-    const getter = (root) => root.ownerDocument.documentElement;
-    const element = await this.evaluate(getter, root);
-    return new ElementHandle(element);
-  }
-
-  /**
-   * @param {string} url
-   * @return {!Promise}
-   * @override
-   */
-  async navigateTo(url) {
-    const frame = await this.getCurrentFrame_();
-    await frame.goto(url, {waitUntil: 'domcontentloaded'});
-  }
-
-  /**
-   * @param {!ElementHandle<!PuppeteerHandle>} handle
-   * @param {string|Key} keys
-   * @return {!Promise}
-   * @override
-   */
-  async type(handle, keys) {
-    const targetElement = handle
-      ? handle.getElement()
-      : (await this.getActiveElement()).getElement();
-
-    const key = KeyToPuppeteerMap[keys];
-    if (key) {
-      await targetElement.press(key);
-      return;
-    }
-
-    await targetElement.type(keys);
-  }
-
-  /**
-   * @param {!ElementHandle<!PuppeteerHandle>} handle
-   * @return {!Promise<string>}
-   * @override
-   */
-  getElementText(handle) {
-    const element = handle.getElement();
-    const getter = (element) => ({value: element./*OK*/ innerText.trim()});
-    return new ControllerPromise(
-      this.evaluateValue_(getter, element),
-      this.getWaitFn_(getter, element)
-    );
-  }
-
-  /**
-   * @param {!ElementHandle<!PuppeteerHandle>} handle
-   * @param {string} styleProperty
-   * @return {!Promise<string>} styleProperty
-   * @override
-   */
-  getElementCssValue(handle, styleProperty) {
-    const element = handle.getElement();
-    const getter = (element, styleProperty) => {
-      const value = window /*OK*/['getComputedStyle'](element)[styleProperty];
-      return {value};
-    };
-    return new ControllerPromise(
-      this.evaluateValue_(getter, element, styleProperty),
-      this.getWaitFn_(getter, element, styleProperty)
-    );
-  }
-
-  /**
-   * @param {!ElementHandle<!PuppeteerHandle>} handle
-   * @param {string} attribute
-   * @return {!Promise<string>}
-   * @override
-   */
-  getElementAttribute(handle, attribute) {
-    const element = handle.getElement();
-    const getter = (element, attribute) => ({
-      value: element.getAttribute(attribute),
-    });
-    return new ControllerPromise(
-      this.evaluateValue_(getter, element, attribute),
-      this.getWaitFn_(getter, element, attribute)
-    );
-  }
-
-  /**
-   * @param {!ElementHandle<!PuppeteerHandle>} handle
-   * @param {string} property
-   * @return {!Promise<string>}
-   * @override
-   */
-  getElementProperty(handle, property) {
-    const element = handle.getElement();
-    const getter = (element, property) => {
-      let value = element[property];
-      if (typeof value !== 'string' && typeof value.length === 'number') {
-        value = Array.from(value);
-      }
-
-      return {value};
-    };
-    return new ControllerPromise(
-      this.evaluateValue_(getter, element, property),
-      this.getWaitFn_(getter, element, property)
-    );
-  }
-
-  /**
-   * @param {!ElementHandle<!PuppeteerHandle>} handle
-   * @return {!Promise<!DOMRectDef>}
-   * @override
-   */
-  getElementRect(handle) {
-    const element = handle.getElement();
-    const getter = (element) => {
-      // Extracting the values seems to perform better than returning
-      // the raw ClientRect from the element, in terms of flakiness.
-      // The raw ClientRect also has hundredths of a pixel. We round to int.
-      const {
-        x,
-        y,
-        width,
-        height,
-        top,
-        bottom,
-        left,
-        right,
-      } = element./*OK*/ getBoundingClientRect();
-      return {
-        x: Math.round(x),
-        y: Math.round(y),
-        width: Math.round(width),
-        height: Math.round(height),
-        top: Math.round(top),
-        bottom: Math.round(bottom),
-        left: Math.round(left),
-        right: Math.round(right),
-      };
-    };
-    return new ControllerPromise(
-      this.evaluate(getter, element).then((handle) => handle.jsonValue()),
-      this.getWaitFn_(getter, element)
-    );
-  }
-
-  /**
-   * @param {!WindowRectDef} rect
-   * @return {!Promise}
-   * @override
-   */
-  async setWindowRect(rect) {
-    const {width, height} = rect;
-    await this.resizeWindow_(width, height);
-  }
-
-  /**
-   * Resize the window and the viewport. The `page.setViewport` method only
-   * changes the size of the rendered area of the browser, not the window size.
-   * `page.setViewport` also does not relayout the page.
-   * To resize the window to test code that makes decisions on resize, we must
-   * change the viewport and the window bounds.
-   * We also pass any scrollbars adding width or tab bar adding height as
-   * the chromePadding* parameters.
-   * {@link https://github.com/GoogleChrome/puppeteer/issues/1183#issuecomment-348615375}
-   * @param {number} width
-   * @param {number} height
-   * @private
-   */
-  async resizeWindow_(width, height) {
-    const browser = this.browser_;
-    const page = await this.getPage_();
-
-    const {
-      outerWidth,
-      outerHeight,
-      clientWidth,
-      clientHeight,
-    } = await this.evaluate(() => {
-      const {style} = document.documentElement;
-      const saved = style.overflow;
-      style.overflow = 'scroll';
-      const {outerWidth, outerHeight} = window;
-      const {clientWidth, clientHeight} = document.documentElement;
-      style.overflow = saved;
-      return {
-        outerWidth: Math.round(outerWidth),
-        outerHeight: Math.round(outerHeight),
-        clientWidth: Math.round(clientWidth),
-        clientHeight: Math.round(clientHeight),
-      };
-    });
-    const chromePaddingWidth = outerWidth > 0 ? outerWidth - clientWidth : 0;
-    const chromePaddingHeight =
-      outerHeight > 0 ? outerHeight - clientHeight : 0;
-
-    await page.setViewport({
-      width: width + chromePaddingWidth,
-      height: height + chromePaddingHeight,
-      hasTouch: true,
-    });
-
-    // Any tab.
-    const {
-      targetInfos: [{targetId}],
-    } = await browser._connection.send('Target.getTargets');
-
-    // Tab window.
-    try {
-      const {windowId} = await browser._connection.send(
-        'Browser.getWindowForTarget',
-        {
-          targetId,
-        }
-      );
-
-      // Resize.
-      await browser._connection.send('Browser.setWindowBounds', {
-        bounds: {
-          width: width + chromePaddingWidth,
-          height: height + chromePaddingHeight,
-        },
-        windowId,
-      });
-    } catch (e) {
-      // Catch if we're in headless.
-      if (
-        !e.toString().includes('Protocol error (Browser.getWindowForTarget)')
-      ) {
-        throw e;
-      }
-    }
-  }
-
-  /**
-   * @override
-   */
-  getTitle() {
-    const title = this.getCurrentFrame_().then((frame) => frame.title());
-    return new ControllerPromise(title, () =>
-      this.getCurrentFrame_().then((frame) => frame.title())
-    );
-  }
-
-  /**
-   * @return {!Promise<!PuppeteerHandle>}
-   * @override
-   */
-  async getActiveElement() {
-    const root = await this.getRoot_();
-    const getter = (root) =>
-      root.activeElement || root.ownerDocument.activeElement;
-    const element = await this.evaluate(getter, root);
-    return new ElementHandle(element);
-  }
-
-  /**
-   * TODO(cvializ): decide if we need to waitForNavigation on click and keypress
-   * @param {!ElementHandle<!PuppeteerHandle>} handle
-   * @return {!Promise}
-   * @override
-   */
-  click(handle) {
-    return handle.getElement().click();
-  }
-
-  /**
-   * @param {!ElementHandle<!PuppeteerHandle>} handle
-   * @param {!ScrollToOptionsDef=} opt_scrollToOptions
-   * @return {!Promise}
-   * @override
-   */
-  async scrollTo(handle, opt_scrollToOptions) {
-    const element = handle.getElement();
-    await this.evaluate(
-      (element, opt_scrollToOptions) => {
-        element./*OK*/ scrollTo(opt_scrollToOptions);
-      },
-      element,
-      opt_scrollToOptions
-    );
-  }
-
-  /**
-   * @param {!ElementHandle<!PuppeteerHandle>} handle
-   * @param {!ScrollToOptionsDef=} opt_scrollToOptions
-   * @return {!Promise}
-   * @override
-   */
-  async scrollBy(handle, opt_scrollToOptions) {
-    const element = handle.getElement();
-    await this.evaluate(
-      (element, opt_scrollToOptions) => {
-        element./*OK*/ scrollBy(opt_scrollToOptions);
-      },
-      element,
-      opt_scrollToOptions
-    );
-  }
-
-  /**
-   * For some reason page.screenshot fails, so we use the html element.
-   * @param {string} path
-   * @return {!Promise<string>} An encoded string representing the image data
-   * @override
-   */
-  async takeScreenshot(path) {
-    const root = new ElementHandle(await this.getRoot_());
-    return await this.takeElementScreenshot(root, path);
-  }
-
-  /**
-   * @param {!ElementHandle<!PuppeteerHandle>} handle
-   * @param {string} path The path relative to the build-system/tasks/e2e root.
-   * @return {!Promise<string>} An encoded string representing the image data
-   * @override
-   */
-  async takeElementScreenshot(handle, path) {
-    const relative = join(__dirname, path);
-    try {
-      await fs.mkdirAsync(dirname(relative), {recursive: true});
-    } catch (err) {
-      if (err.code != 'EEXIST') {
-        throw err;
-      }
-    }
-
-    const options = {
-      path: relative,
-      type: 'png',
-    };
-    const element = handle.getElement();
-    return await element.screenshot(options);
-  }
-
-  /**
-   * @param {?ElementHandle<!PuppeteerHandle>} handle
-   * @return {!Promise}
-   */
-  async switchToFrame(handle) {
-    const element = handle.getElement();
-    this.currentFrame_ = await element.contentFrame();
-  }
-
-  /**
-   * @return {!Promise}
-   */
-  async switchToParent() {
-    let frame = await this.currentFrame_.parentFrame();
-    if (!frame) {
-      const page = await this.getPage_();
-      frame = page.mainFrame();
-    }
-    this.currentFrame_ = frame;
-  }
-
-  /**
-   * Switch controller to shadowRoot body hosted by given element.
-   * @param {!ElementHandle<!PuppeteerHandle} handle
-   * @return {!Promise}
-   */
-  switchToShadow(handle) {
-    const getter = (shadowHost) => shadowHost.shadowRoot.body;
-    return this.switchToShadowInternal_(handle, getter);
-  }
-
-  /**
-   * Switch controller to shadowRoot hosted by given element.
-   * @param {!ElementHandle<!PuppeteerHandle>} handle
-   * @return {!Promise}
-   */
-  switchToShadowRoot(handle) {
-    const getter = (shadowHost) => shadowHost.shadowRoot;
-    return this.switchToShadowInternal_(handle, getter);
-  }
-
-  /**.
-   * @param {!ElementHandle<!PuppeteerHandle>} handle
-   * @param {!Function} getter
-   */
-  async switchToShadowInternal_(handle, getter) {
-    const shadowHost = handle.getElement();
-    const shadowRootBodyHandle = await this.evaluate(getter, shadowHost);
-    this.shadowRoot_ = shadowRootBodyHandle.asElement();
-  }
-
-  async switchToLight() {
-    this.shadowRoot_ = null;
-  }
-
-  /**
-   * Get the current root
-   * @return {!Promise<!PuppeteerHandle>}
-   */
-  async getRoot_() {
-    if (this.shadowRoot_) {
-      return this.shadowRoot_;
-    }
-
-    return await this.evaluate(() => document.documentElement);
-  }
-
-  /**
-   * @override
-   */
-  dispose() {
-    return this.browser_.close();
-  }
-}
-
-module.exports = {
-  PuppeteerController,
-};
diff --git a/build-system/tasks/e2e/repl.js b/build-system/tasks/e2e/repl.js
index 808ab56ba0ee2..9e5be8d841665 100644
--- a/build-system/tasks/e2e/repl.js
+++ b/build-system/tasks/e2e/repl.js
@@ -26,8 +26,8 @@ const REPL_INFINITE_TIMEOUT = 86400000; // milliseconds in a day
  *    This will cause the test to wait indefinitely when you want to execute
  *    commands in the DevTools console.
  *    You may have to change `async() => {}` to `async function() {}`
- * 2. Run gulp with Node debugging enabled:
- *   `node --inspect-brk $(which gulp) e2e ...`
+ * 2. Run amp with Node debugging enabled:
+ *   `node --inspect-brk $(which amp) e2e ...`
  * 3. Open Chrome DevTools and open the Node debugger
  * 4. Wait for the `READY_MESSAGE` to appear in the console
  * 5. You are now free to execute code in the console using the controller API.
@@ -65,6 +65,9 @@ function installRepl(global, env) {
     return replPromise;
   };
 
+  /**
+   * Continues execution while debugging.
+   */
   function replContinue() {
     if (!replResolve) {
       return;
@@ -81,6 +84,9 @@ function installRepl(global, env) {
   }
 }
 
+/**
+ * Ends the debugging session.
+ */
 function uninstallRepl() {
   delete global.repl;
 }
diff --git a/build-system/tasks/e2e/selenium-webdriver-controller.js b/build-system/tasks/e2e/selenium-webdriver-controller.js
index ae55755ded7ab..c16164019498c 100644
--- a/build-system/tasks/e2e/selenium-webdriver-controller.js
+++ b/build-system/tasks/e2e/selenium-webdriver-controller.js
@@ -15,16 +15,19 @@
  */
 
 const fs = require('fs');
+const selenium = require('selenium-webdriver');
 const {
   DOMRectDef,
   ElementHandle,
   Key,
-} = require('./functional-test-controller');
-const {By, Condition, Key: SeleniumKey, error} = require('selenium-webdriver');
+  ScrollToOptionsDef,
+} = require('./e2e-types');
 const {ControllerPromise} = require('./controller-promise');
 const {expect} = require('chai');
 const {NetworkLogger} = require('./network-logger');
 
+const {By, Condition, Key: SeleniumKey, error} = selenium;
+
 const {NoSuchElementError} = error;
 
 const ELEMENT_WAIT_TIMEOUT = 5000;
@@ -41,11 +44,12 @@ const KeyToSeleniumMap = {
 };
 
 /**
- * @param {function(): !Promise<T>} valueFn
- * @param {function(T):boolean} condition
- * @param {T} opt_mutate
+ * @param {function(): !Promise<T1>} valueFn
+ * @param {function(T2): boolean} condition
+ * @param {function(T1): T2} opt_mutate
  * @return {!Condition}
- * @template T
+ * @template T1
+ * @template T2
  */
 function expectCondition(valueFn, condition, opt_mutate) {
   opt_mutate = opt_mutate || ((x) => x);
@@ -59,54 +63,54 @@ function expectCondition(valueFn, condition, opt_mutate) {
 /**
  * Make the test runner wait until the value returned by the valueFn matches
  * the given condition.
- * @param {!WebDriver} driver
- * @param {function(): !Promise<T>} valueFn
- * @param {function(T): ?T} condition
- * @param {T} opt_mutate
- * @return {!Promise<?T>}
- * @template T
+ * @param {!selenium.WebDriver} driver
+ * @param {function(): !Promise<T1>} valueFn
+ * @param {function(T2): ?T1} condition
+ * @param {function(T1): T2} opt_mutate
+ * @return {!Promise<?T2>}
+ * @template T1
+ * @template T2
  */
-function waitFor(driver, valueFn, condition, opt_mutate) {
+async function waitFor(driver, valueFn, condition, opt_mutate) {
   const conditionValue = (value) => {
     // Box the value in an object, so values that are present but falsy
     // (like "") do not cause driver.wait to continue waiting.
-    return condition(value) ? {value} : null;
+    return Boolean(condition(value));
   };
-  return driver
-    .wait(expectCondition(valueFn, conditionValue, opt_mutate))
-    .then((result) => result.value); // Unbox the value.
+
+  const result = await driver.wait(
+    expectCondition(valueFn, conditionValue, opt_mutate)
+  );
+
+  return result.value; // Unbox the value.
 }
 
-/** @implements {FunctionalTestController} */
 class SeleniumWebDriverController {
   /**
-   * @param {!WebDriver} driver
+   * @param {!selenium.WebDriver} driver
    */
   constructor(driver) {
     this.driver = driver;
 
     this.networkLogger = new NetworkLogger(driver);
 
-    /** @private {?WebElement} */
+    /** @private {?selenium.WebElement} */
     this.shadowRoot_ = null;
 
     /** @private {boolean} */
     this.isXpathInstalled_ = false;
   }
 
+  // * @return {function(T1,T1): !Promise<?T1>}
   /**
    * Return a wait function. When called, the function will cause the test
    * runner to wait until the given value matches the expected value.
-   * @param {function(): !Promise<?T>} valueFn
-   * @return {function(T,T): !Promise<?T>}
-   * @template T
+   * @param {function(): !Promise<T1>} valueFn
+   * @return {function(function(T2): ?T1, function(T1): T2): !Promise<?T2>}
+   * @template T1
+   * @template T2
    */
   getWaitFn_(valueFn) {
-    /**
-     * @param {function(T): ?T} condition
-     * @param {T} opt_mutate
-     * @return {!Promise<?T>}
-     */
     return (condition, opt_mutate) => {
       return waitFor(this.driver, valueFn, condition, opt_mutate);
     };
@@ -118,8 +122,7 @@ class SeleniumWebDriverController {
    * {@link https://github.com/SeleniumHQ/selenium/blob/6a717f20/javascript/node/selenium-webdriver/lib/until.js#L237}
    * @param {string} selector
    * @param {number=} timeout
-   * @return {!Promise<!ElementHandle<!WebElement>>}
-   * @override
+   * @return {!Promise<!ElementHandle<!selenium.WebElement>>}
    */
   async findElement(selector, timeout = ELEMENT_WAIT_TIMEOUT) {
     const bySelector = By.css(selector);
@@ -141,7 +144,7 @@ class SeleniumWebDriverController {
       }
     });
     const webElement = await this.driver.wait(condition, timeout);
-    return new ElementHandle(webElement, this);
+    return new ElementHandle(webElement);
   }
 
   /**
@@ -149,8 +152,7 @@ class SeleniumWebDriverController {
    * until.js#elementsLocated
    * {@link https://github.com/SeleniumHQ/selenium/blob/6a717f20/javascript/node/selenium-webdriver/lib/until.js#L258}   *
    * @param {string} selector
-   * @return {!Promise<!Array<!ElementHandle<!WebElement>>>}
-   * @override
+   * @return {!Promise<!Array<!ElementHandle<!selenium.WebElement>>>}
    */
   async findElements(selector) {
     const bySelector = By.css(selector);
@@ -169,13 +171,12 @@ class SeleniumWebDriverController {
       }
     });
     const webElements = await this.driver.wait(condition, ELEMENT_WAIT_TIMEOUT);
-    return webElements.map((webElement) => new ElementHandle(webElement, this));
+    return webElements.map((webElement) => new ElementHandle(webElement));
   }
 
   /**
    * @param {string} xpath
-   * @return {!Promise<!ElementHandle<!WebElement>>}
-   * @override
+   * @return {!Promise<!ElementHandle<!selenium.WebElement>>}
    */
   async findElementXPath(xpath) {
     await this.maybeInstallXpath_();
@@ -195,13 +196,12 @@ class SeleniumWebDriverController {
       }),
       ELEMENT_WAIT_TIMEOUT
     );
-    return new ElementHandle(webElement, this);
+    return new ElementHandle(webElement);
   }
 
   /**
    * @param {string} xpath
-   * @return {!Promise<!Array<!ElementHandle<!WebElement>>>}
-   * @override
+   * @return {!Promise<!Array<!ElementHandle<!selenium.WebElement>>>}
    */
   async findElementsXPath(xpath) {
     await this.maybeInstallXpath_();
@@ -220,7 +220,7 @@ class SeleniumWebDriverController {
       }),
       ELEMENT_WAIT_TIMEOUT
     );
-    return webElements.map((webElement) => new ElementHandle(webElement, this));
+    return webElements.map((webElement) => new ElementHandle(webElement));
   }
 
   /**
@@ -244,8 +244,7 @@ class SeleniumWebDriverController {
   }
 
   /**
-   * @return {!Promise<!ElementHandle<!WebElement>>}
-   * @override
+   * @return {!Promise<!ElementHandle<!selenium.WebElement>>}
    */
   async getActiveElement() {
     const root = await this.getRoot_();
@@ -256,8 +255,7 @@ class SeleniumWebDriverController {
   }
 
   /**
-   * @return {!Promise<!ElementHandle<!WebElement>>}
-   * @override
+   * @return {!Promise<!ElementHandle<!selenium.WebElement>>}
    */
   async getDocumentElement() {
     const root = await this.getRoot_();
@@ -267,8 +265,7 @@ class SeleniumWebDriverController {
   }
 
   /**
-   * @return {!ControllerPromise<string>}
-   * @override
+   * @return {!ControllerPromise<string|null|function>}
    */
   getCurrentUrl() {
     return new ControllerPromise(
@@ -280,17 +277,15 @@ class SeleniumWebDriverController {
   /**
    * @param {string} location
    * @return {!Promise}
-   * @override
    */
   async navigateTo(location) {
-    return await this.driver.get(location);
+    return this.driver.get(location);
   }
 
   /**
-   * @param {!ElementHandle<!WebElement>} handle
+   * @param {!ElementHandle<!selenium.WebElement>} handle
    * @param {string|Key} keys
    * @return {!Promise}
-   * @override
    */
   async type(handle, keys) {
     const targetElement = handle
@@ -298,22 +293,21 @@ class SeleniumWebDriverController {
       : await this.driver.switchTo().activeElement();
 
     if (keys === Key.CtrlV) {
-      return await this.pasteFromClipboard();
+      return this.pasteFromClipboard();
     }
 
     const key = KeyToSeleniumMap[keys];
     if (key) {
-      return await targetElement.sendKeys(key);
+      return targetElement.sendKeys(key);
     }
 
-    return await targetElement.sendKeys(keys);
+    return targetElement.sendKeys(keys);
   }
 
   /**
    * Pastes from the clipboard by perfoming the keyboard shortcut.
    * https://stackoverflow.com/a/41046276
    * @return {!Promise}
-   * @override
    */
   pasteFromClipboard() {
     return this.driver
@@ -326,9 +320,8 @@ class SeleniumWebDriverController {
   }
 
   /**
-   * @param {!ElementHandle<!WebElement>} handle
+   * @param {!ElementHandle<!selenium.WebElement>} handle
    * @return {!Promise<string>}
-   * @override
    */
   getElementText(handle) {
     const webElement = handle.getElement();
@@ -339,9 +332,8 @@ class SeleniumWebDriverController {
   }
 
   /**
-   * @param {!ElementHandle<!WebElement>} handle
+   * @param {!ElementHandle<!selenium.WebElement>} handle
    * @return {!Promise<string>}
-   * @override
    */
   getElementTagName(handle) {
     const webElement = handle.getElement();
@@ -349,10 +341,9 @@ class SeleniumWebDriverController {
   }
 
   /**
-   * @param {!ElementHandle<!WebElement>} handle
+   * @param {!ElementHandle<!selenium.WebElement>} handle
    * @param {string} attribute
    * @return {!Promise<string>}
-   * @override
    */
   getElementAttribute(handle, attribute) {
     const webElement = handle.getElement();
@@ -366,10 +357,9 @@ class SeleniumWebDriverController {
   /**
    * Gets the element property. Note that this is different
    * than getElementAttribute()
-   * @param {!ElementHandle<!WebElement>} handle
+   * @param {!ElementHandle<!selenium.WebElement>} handle
    * @param {string} property
    * @return {!Promise<string>}
-   * @override
    */
   getElementProperty(handle, property) {
     const webElement = handle.getElement();
@@ -384,9 +374,8 @@ class SeleniumWebDriverController {
   }
 
   /**
-   * @param {!ElementHandle<!WebElement>} handle
+   * @param {!ElementHandle<!selenium.WebElement>} handle
    * @return {!Promise<!DOMRectDef>}
-   * @override
    */
   getElementRect(handle) {
     const webElement = handle.getElement();
@@ -394,14 +383,8 @@ class SeleniumWebDriverController {
       // Extracting the values seems to perform better than returning
       // the raw ClientRect from the element, in terms of flakiness.
       // The raw ClientRect also has hundredths of a pixel. We round to int.
-      const {
-        width,
-        height,
-        top,
-        bottom,
-        left,
-        right,
-      } = element./*OK*/ getBoundingClientRect();
+      const {bottom, height, left, right, top, width} =
+        element./*OK*/ getBoundingClientRect();
       return {
         x: Math.round(left),
         y: Math.round(top),
@@ -423,7 +406,6 @@ class SeleniumWebDriverController {
    * @param {!ElementHandle} handle
    * @param {string} styleProperty
    * @return {!Promise<string>} styleProperty
-   * @override
    */
   getElementCssValue(handle, styleProperty) {
     const webElement = handle.getElement();
@@ -436,7 +418,6 @@ class SeleniumWebDriverController {
   /**
    * @param {!ElementHandle} handle
    * @return {!Promise<boolean>}
-   * @override
    */
   isElementEnabled(handle) {
     const webElement = handle.getElement();
@@ -447,16 +428,14 @@ class SeleniumWebDriverController {
   }
   /**
    * @return {!Promise<Array<string>>}
-   * @override
    */
   async getAllWindows() {
-    return await this.driver.getAllWindowHandles();
+    return this.driver.getAllWindowHandles();
   }
 
   /**
    * @param {!ElementHandle} handle
    * @return {!Promise<boolean>}
-   * @override
    */
   isElementSelected(handle) {
     const webElement = handle.getElement();
@@ -468,12 +447,11 @@ class SeleniumWebDriverController {
 
   /**
    * Sets width/height of the browser area.
-   * @param {!WindowRectDef} rect
+   * @param {!selenium.WindowRectDef} rect
    * @return {!Promise}
-   * @override
    */
   async setWindowRect(rect) {
-    const {width, height} = rect;
+    const {height, width} = rect;
 
     await this.driver.manage().window().setRect({
       x: 0,
@@ -537,7 +515,6 @@ class SeleniumWebDriverController {
   /**
    * Get the title of the current document.
    * @return {!Promise<string>}
-   * @override
    */
   getTitle() {
     const getTitle = () => document.title;
@@ -550,19 +527,17 @@ class SeleniumWebDriverController {
 
   /**
    *
-   * @param {!ElementHandle<!WebElement>} handle
+   * @param {!ElementHandle<!selenium.WebElement>} handle
    * @return {!Promise}
-   * @override
    */
   async click(handle) {
-    return await handle.getElement().click();
+    return handle.getElement().click();
   }
 
   /**
-   * @param {!ElementHandle<!WebElement>} handle
+   * @param {!ElementHandle<!selenium.WebElement>} handle
    * @param {!ScrollToOptionsDef=} opt_scrollToOptions
    * @return {!Promise}
-   * @override
    */
   async scrollBy(handle, opt_scrollToOptions) {
     const webElement = handle.getElement();
@@ -570,18 +545,13 @@ class SeleniumWebDriverController {
       element./*OK*/ scrollBy(opt_scrollToOptions);
     };
 
-    return await this.driver.executeScript(
-      scrollBy,
-      webElement,
-      opt_scrollToOptions
-    );
+    return this.driver.executeScript(scrollBy, webElement, opt_scrollToOptions);
   }
 
   /**
-   * @param {!ElementHandle<!WebElement>} handle
+   * @param {!ElementHandle<!selenium.WebElement>} handle
    * @param {!ScrollToOptionsDef=} opt_scrollToOptions
    * @return {!Promise}
-   * @override
    */
   async scrollTo(handle, opt_scrollToOptions) {
     const webElement = handle.getElement();
@@ -589,17 +559,12 @@ class SeleniumWebDriverController {
       element./*OK*/ scrollTo(opt_scrollToOptions);
     };
 
-    return await this.driver.executeScript(
-      scrollTo,
-      webElement,
-      opt_scrollToOptions
-    );
+    return this.driver.executeScript(scrollTo, webElement, opt_scrollToOptions);
   }
 
   /**
    * @param {string} path
-   * @return {!Promise<string>} An encoded string representing the image data
-   * @override
+   * @return {!Promise<void>} An encoded string representing the image data
    */
   async takeScreenshot(path) {
     const imageString = await this.driver.takeScreenshot();
@@ -608,10 +573,9 @@ class SeleniumWebDriverController {
 
   /**
    * Evaluate the given function
-   * @param {function()} fn
+   * @param {function(): any} fn
    * @param {...*} args
-   * @return {!ControllerPromise}
-   * @override
+   * @return {!Promise<*>}
    */
   evaluate(fn, ...args) {
     return this.driver.executeScript(fn, ...args);
@@ -620,8 +584,7 @@ class SeleniumWebDriverController {
   /**
    * @param {!ElementHandle} handle
    * @param {string} path
-   * @return {!Promise<string>} An encoded string representing the image data
-   * @override
+   * @return {!Promise<void>} An encoded string representing the image data
    */
   async takeElementScreenshot(handle, path) {
     // TODO(cvializ): Errors? Or maybe ChromeDriver hasn't yet implemented
@@ -634,14 +597,13 @@ class SeleniumWebDriverController {
   /**
    * @param {string} handle
    * @return {!Promise}
-   * @override
    */
   async switchToWindow(handle) {
     await this.driver.switchTo().window(handle);
   }
 
   /**
-   * @param {!ElementHandle<!WebElement>} handle
+   * @param {!ElementHandle<!selenium.WebElement>} handle
    * @return {!Promise}
    */
   async switchToFrame(handle) {
@@ -664,8 +626,8 @@ class SeleniumWebDriverController {
 
   /**
    * Switch controller to shadowRoot body hosted by given element.
-   * @param {!ElementHandle<!WebElement>} handle
-   * @return {!Promise}
+   * @param {!ElementHandle<!selenium.WebElement>} handle
+   * @return {!Promise<void>}
    */
   async switchToShadow(handle) {
     const getter = (shadowHost) => shadowHost.shadowRoot.body;
@@ -674,8 +636,8 @@ class SeleniumWebDriverController {
 
   /**
    * Switch controller to shadowRoot hosted by given element.
-   * @param {!ElementHandle<!WebElement>} handle
-   * @return {!Promise}
+   * @param {!ElementHandle<!selenium.WebElement>} handle
+   * @return {!Promise<void>}
    */
   async switchToShadowRoot(handle) {
     const getter = (shadowHost) => shadowHost.shadowRoot;
@@ -683,8 +645,9 @@ class SeleniumWebDriverController {
   }
 
   /**.
-   * @param {!ElementHandle<!WebElement>} handle
-   * @param {!Function} getter
+   * @param {!ElementHandle<!selenium.WebElement>} handle
+   * @param {function(): any} getter
+   * @return {!Promise<void>}
    */
   async switchToShadowInternal_(handle, getter) {
     const shadowHost = handle.getElement();
@@ -692,13 +655,16 @@ class SeleniumWebDriverController {
     this.shadowRoot_ = shadowRootBody;
   }
 
+  /**
+   * @return {Promise<void>}
+   */
   async switchToLight() {
     this.shadowRoot_ = null;
   }
 
   /**
    * Get the current root
-   * @return {!Promise<!WebElement>}
+   * @return {!Promise<!selenium.WebElement>}
    */
   getRoot_() {
     if (this.shadowRoot_) {
@@ -708,7 +674,10 @@ class SeleniumWebDriverController {
     return this.evaluate(() => document.documentElement);
   }
 
-  /** @override */
+  /**
+   * Shutdown the driver.
+   * @return {void}
+   */
   dispose() {
     return this.driver.quit();
   }
diff --git a/build-system/tasks/e2e/yarn.lock b/build-system/tasks/e2e/yarn.lock
deleted file mode 100644
index be9e7d3d9a972..0000000000000
--- a/build-system/tasks/e2e/yarn.lock
+++ /dev/null
@@ -1,1111 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@babel/register@7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.10.1.tgz#b6567c5cb5049f44bbf8c35d6ff68ca3c43238ed"
-  integrity sha512-sl96+kB3IA2B9EzpwwBmYadOT14vw3KaXOknGDbJaZCOj52GDA4Tivudq9doCJcB+bEIKCEARZYwRgBBsCGXyg==
-  dependencies:
-    find-cache-dir "^2.0.0"
-    lodash "^4.17.13"
-    make-dir "^2.1.0"
-    pirates "^4.0.0"
-    source-map-support "^0.5.16"
-
-"@nodelib/fs.scandir@2.1.3":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
-  integrity sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==
-  dependencies:
-    "@nodelib/fs.stat" "2.0.3"
-    run-parallel "^1.1.9"
-
-"@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3"
-  integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==
-
-"@nodelib/fs.walk@^1.2.3":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz#011b9202a70a6366e436ca5c065844528ab04976"
-  integrity sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==
-  dependencies:
-    "@nodelib/fs.scandir" "2.1.3"
-    fastq "^1.6.0"
-
-"@testim/chrome-version@^1.0.7":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@testim/chrome-version/-/chrome-version-1.0.7.tgz#0cd915785ec4190f08a3a6acc9b61fc38fb5f1a9"
-  integrity sha512-8UT/J+xqCYfn3fKtOznAibsHpiuDshCb0fwgWxRazTT19Igp9ovoXMPhXyLD6m3CKQGTMHgqoxaFfMWaL40Rnw==
-
-"@types/events@*":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
-  integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
-
-"@types/glob@^7.1.1":
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
-  integrity sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==
-  dependencies:
-    "@types/events" "*"
-    "@types/minimatch" "*"
-    "@types/node" "*"
-
-"@types/minimatch@*":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
-  integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
-
-"@types/node@*":
-  version "12.6.8"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.6.8.tgz#e469b4bf9d1c9832aee4907ba8a051494357c12c"
-  integrity sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg==
-
-"@types/yauzl@^2.9.1":
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.1.tgz#d10f69f9f522eef3cf98e30afb684a1e1ec923af"
-  integrity sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==
-  dependencies:
-    "@types/node" "*"
-
-adm-zip@0.4.11:
-  version "0.4.11"
-  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.11.tgz#2aa54c84c4b01a9d0fb89bb11982a51f13e3d62a"
-  integrity sha512-L8vcjDTCOIJk7wFvmlEUN7AsSb8T+2JrdP7KINBjzr24TJ5Mwj590sLu3BC7zNZowvJWa/JtPmD8eJCzdtDWjA==
-
-agent-base@5:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
-  integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
-
-agent-base@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
-  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
-  dependencies:
-    es6-promisify "^5.0.0"
-
-aggregate-error@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.0.1.tgz#db2fe7246e536f40d9b5442a39e117d7dd6a24e0"
-  integrity sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA==
-  dependencies:
-    clean-stack "^2.0.0"
-    indent-string "^4.0.0"
-
-array-union@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
-  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
-
-axios@^0.19.2:
-  version "0.19.2"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
-  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
-  dependencies:
-    follow-redirects "1.5.10"
-
-babel-regenerator-runtime@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/babel-regenerator-runtime/-/babel-regenerator-runtime-6.5.0.tgz#0e41cd1c9f80442466f015c749fff8ba98f8e110"
-  integrity sha1-DkHNHJ+ARCRm8BXHSf/4upj44RA=
-
-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
-
-base64-js@^1.0.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
-  integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
-
-bl@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.2.tgz#52b71e9088515d0606d9dd9cc7aa48dc1f98e73a"
-  integrity sha512-j4OH8f6Qg2bGuWfRiltT2HYGx0e1QcBTrK9KAHNMwMZdQnDZFk0ZSYIpADjYCB3U12nicC5tVJwSIhwOWjb4RQ==
-  dependencies:
-    buffer "^5.5.0"
-    inherits "^2.0.4"
-    readable-stream "^3.4.0"
-
-bluebird@3.4.6:
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.6.tgz#01da8d821d87813d158967e743d5fe6c62cf8c0f"
-  integrity sha1-AdqNgh2HgT0ViWfnQ9X+bGLPjA8=
-
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-braces@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
-  dependencies:
-    fill-range "^7.0.1"
-
-buffer-crc32@~0.2.3:
-  version "0.2.13"
-  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
-  integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
-
-buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
-
-buffer@^5.2.1, buffer@^5.5.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
-  integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-
-capture-stack-trace@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
-  integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==
-
-chownr@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
-  integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==
-
-chownr@^1.1.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
-  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
-
-chromedriver@83.0.0:
-  version "83.0.0"
-  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-83.0.0.tgz#75d7d838e58014658c3990089464166fef951926"
-  integrity sha512-AePp9ykma+z4aKPRqlbzvVlc22VsQ6+rgF+0aL3B5onHOncK18dWSkLrSSJMczP/mXILN9ohGsvpuTwoRSj6OQ==
-  dependencies:
-    "@testim/chrome-version" "^1.0.7"
-    axios "^0.19.2"
-    del "^5.1.0"
-    extract-zip "^2.0.0"
-    mkdirp "^1.0.4"
-    tcp-port-used "^1.0.1"
-
-clean-stack@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
-  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
-
-commondir@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
-  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-core-util-is@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
-create-error-class@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
-  integrity sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=
-  dependencies:
-    capture-stack-trace "^1.0.0"
-
-debug@4, debug@^4.1.0, debug@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
-  dependencies:
-    ms "^2.1.1"
-
-debug@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.0.tgz#373687bffa678b38b1cd91f861b63850035ddc87"
-  integrity sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==
-  dependencies:
-    ms "^2.1.1"
-
-debug@=3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
-  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
-  dependencies:
-    ms "2.0.0"
-
-debug@^3.1.0:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
-  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
-  dependencies:
-    ms "^2.1.1"
-
-deep-is@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
-  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
-
-del@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/del/-/del-5.1.0.tgz#d9487c94e367410e6eff2925ee58c0c84a75b3a7"
-  integrity sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==
-  dependencies:
-    globby "^10.0.1"
-    graceful-fs "^4.2.2"
-    is-glob "^4.0.1"
-    is-path-cwd "^2.2.0"
-    is-path-inside "^3.0.1"
-    p-map "^3.0.0"
-    rimraf "^3.0.0"
-    slash "^3.0.0"
-
-dir-glob@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
-  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
-  dependencies:
-    path-type "^4.0.0"
-
-duplexer2@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
-  integrity sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=
-  dependencies:
-    readable-stream "^2.0.2"
-
-end-of-stream@^1.1.0, end-of-stream@^1.4.1:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
-  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
-  dependencies:
-    once "^1.4.0"
-
-error-ex@^1.2.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
-  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
-  dependencies:
-    is-arrayish "^0.2.1"
-
-es6-promise@^4.0.3:
-  version "4.2.6"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.6.tgz#b685edd8258886365ea62b57d30de28fadcd974f"
-  integrity sha512-aRVgGdnmW2OiySVPUC9e6m+plolMAJKjZnQlCwNSuK5yQ0JN61DZSO1X1Ufd1foqWRAlig0rhduTCHe7sVtK5Q==
-
-es6-promisify@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
-  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
-  dependencies:
-    es6-promise "^4.0.3"
-
-extract-zip@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.0.tgz#f53b71d44f4ff5a4527a2259ade000fb8b303492"
-  integrity sha512-i42GQ498yibjdvIhivUsRslx608whtGoFIhF26Z7O4MYncBxp8CwalOs1lnHy21A9sIohWO2+uiE4SRtC9JXDg==
-  dependencies:
-    debug "^4.1.1"
-    get-stream "^5.1.0"
-    yauzl "^2.10.0"
-  optionalDependencies:
-    "@types/yauzl" "^2.9.1"
-
-fast-glob@^3.0.3:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.1.1.tgz#87ee30e9e9f3eb40d6f254a7997655da753d7c82"
-  integrity sha512-nTCREpBY8w8r+boyFYAx21iL6faSsQynliPHM4Uf56SbkyohCNxpVPEH9xrF5TXKy+IsjkPUHDKiUkzBVRXn9g==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.0"
-    merge2 "^1.3.0"
-    micromatch "^4.0.2"
-
-fastq@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.6.0.tgz#4ec8a38f4ac25f21492673adb7eae9cfef47d1c2"
-  integrity sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==
-  dependencies:
-    reusify "^1.0.0"
-
-fd-slicer@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
-  integrity sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=
-  dependencies:
-    pend "~1.2.0"
-
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
-  dependencies:
-    to-regex-range "^5.0.1"
-
-find-cache-dir@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
-  integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^2.0.0"
-    pkg-dir "^3.0.0"
-
-find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
-  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
-  dependencies:
-    locate-path "^3.0.0"
-
-follow-redirects@1.5.10:
-  version "1.5.10"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
-  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
-  dependencies:
-    debug "=3.1.0"
-
-fs-constants@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
-  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
-
-fs-minipass@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
-  integrity sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==
-  dependencies:
-    minipass "^2.2.1"
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
-
-geckodriver@1.19.1:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/geckodriver/-/geckodriver-1.19.1.tgz#556f95fd6451b553cec89f81f81abbefce10d6e5"
-  integrity sha512-xWL/+eEhQ6+t98rc1c+xVM3hshDJibXtZf9WJA3sshxq4k5L1PBwfmswyBmmlKUfBr4xuC256gLVC2RxFhiCsQ==
-  dependencies:
-    adm-zip "0.4.11"
-    bluebird "3.4.6"
-    got "5.6.0"
-    https-proxy-agent "3.0.0"
-    tar "4.4.2"
-
-get-stream@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.1.0.tgz#01203cdc92597f9b909067c3e656cc1f4d3c4dc9"
-  integrity sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==
-  dependencies:
-    pump "^3.0.0"
-
-glob-parent@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.0.tgz#5f4c1d1e748d30cd73ad2944b3577a81b081e8c2"
-  integrity sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==
-  dependencies:
-    is-glob "^4.0.1"
-
-glob@^7.1.3:
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
-  integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-globby@^10.0.1:
-  version "10.0.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.2.tgz#277593e745acaa4646c3ab411289ec47a0392543"
-  integrity sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==
-  dependencies:
-    "@types/glob" "^7.1.1"
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.0.3"
-    glob "^7.1.3"
-    ignore "^5.1.1"
-    merge2 "^1.2.3"
-    slash "^3.0.0"
-
-got@5.6.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/got/-/got-5.6.0.tgz#bb1d7ee163b78082bbc8eb836f3f395004ea6fbf"
-  integrity sha1-ux1+4WO3gIK7yOuDbz85UATqb78=
-  dependencies:
-    create-error-class "^3.0.1"
-    duplexer2 "^0.1.4"
-    is-plain-obj "^1.0.0"
-    is-redirect "^1.0.0"
-    is-retry-allowed "^1.0.0"
-    is-stream "^1.0.0"
-    lowercase-keys "^1.0.0"
-    node-status-codes "^1.0.0"
-    object-assign "^4.0.1"
-    parse-json "^2.1.0"
-    pinkie-promise "^2.0.0"
-    read-all-stream "^3.0.0"
-    readable-stream "^2.0.5"
-    timed-out "^2.0.0"
-    unzip-response "^1.0.0"
-    url-parse-lax "^1.0.0"
-
-graceful-fs@^4.2.2:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
-  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
-
-https-proxy-agent@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-3.0.0.tgz#0106efa5d63d6d6f3ab87c999fa4877a3fd1ff97"
-  integrity sha512-y4jAxNEihqvBI5F3SaO2rtsjIOnnNA8sEbuiP+UhJZJHeM2NRm6c09ax2tgqme+SgUUvjao2fJXF4h3D6Cb2HQ==
-  dependencies:
-    agent-base "^4.3.0"
-    debug "^3.1.0"
-
-https-proxy-agent@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz#702b71fb5520a132a66de1f67541d9e62154d82b"
-  integrity sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==
-  dependencies:
-    agent-base "5"
-    debug "4"
-
-ieee754@^1.1.4:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
-  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
-
-ignore@^5.1.1:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.4.tgz#84b7b3dbe64552b6ef0eca99f6743dbec6d97adf"
-  integrity sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==
-
-immediate@~3.0.5:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
-  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
-
-indent-string@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
-  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2, inherits@^2.0.3, inherits@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
-
-inherits@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-ip-regex@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
-  integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
-
-is-arrayish@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
-  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
-
-is-extglob@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
-
-is-glob@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
-  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
-  dependencies:
-    is-extglob "^2.1.1"
-
-is-number@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
-  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
-
-is-path-cwd@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
-  integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
-
-is-path-inside@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.2.tgz#f5220fc82a3e233757291dddc9c5877f2a1f3017"
-  integrity sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==
-
-is-plain-obj@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
-  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
-
-is-redirect@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
-  integrity sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=
-
-is-retry-allowed@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
-  integrity sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=
-
-is-stream@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
-
-is-url@^1.2.2:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
-  integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
-
-is2@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is2/-/is2-2.0.1.tgz#8ac355644840921ce435d94f05d3a94634d3481a"
-  integrity sha512-+WaJvnaA7aJySz2q/8sLjMb2Mw14KTplHmSwcSpZ/fWJPkUmqw3YTzSWbPJ7OAwRvdYTWF2Wg+yYJ1AdP5Z8CA==
-  dependencies:
-    deep-is "^0.1.3"
-    ip-regex "^2.1.0"
-    is-url "^1.2.2"
-
-isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
-
-jszip@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.2.2.tgz#b143816df7e106a9597a94c77493385adca5bd1d"
-  integrity sha512-NmKajvAFQpbg3taXQXr/ccS2wcucR1AZ+NtyWp2Nq7HHVsXhcJFR8p0Baf32C2yVvBylFWVeKf+WI2AnvlPhpA==
-  dependencies:
-    lie "~3.3.0"
-    pako "~1.0.2"
-    readable-stream "~2.3.6"
-    set-immediate-shim "~1.0.1"
-
-lie@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
-  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
-  dependencies:
-    immediate "~3.0.5"
-
-locate-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
-  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
-  dependencies:
-    p-locate "^3.0.0"
-    path-exists "^3.0.0"
-
-lodash@^4.17.13:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
-lowercase-keys@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
-  integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
-
-make-dir@^2.0.0, make-dir@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
-  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
-  dependencies:
-    pify "^4.0.1"
-    semver "^5.6.0"
-
-merge2@^1.2.3, merge2@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.3.0.tgz#5b366ee83b2f1582c48f87e47cf1a9352103ca81"
-  integrity sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==
-
-micromatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
-  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
-  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.0.5"
-
-mime@^2.0.3:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.0.tgz#e051fd881358585f3279df333fe694da0bcffdd6"
-  integrity sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==
-
-minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-minimist@0.0.8, minimist@^1.2.3:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
-
-minipass@^2.2.1, minipass@^2.2.4:
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.5.tgz#cacebe492022497f656b0f0f51e2682a9ed2d848"
-  integrity sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
-minizlib@^1.1.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.2.1.tgz#dd27ea6136243c7c880684e8672bb3a45fd9b614"
-  integrity sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==
-  dependencies:
-    minipass "^2.2.1"
-
-mkdirp-classic@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.2.tgz#54c441ce4c96cd7790e10b41a87aa51068ecab2b"
-  integrity sha512-ejdnDQcR75gwknmMw/tx02AuRs8jCtqFoFqDZMjiNxsu85sRIJVXDKHuLYvUUPRBUtV2FpSZa9bL1BUa3BdR2g==
-
-mkdirp@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
-  integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
-  dependencies:
-    minimist "0.0.8"
-
-mkdirp@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
-  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
-
-ms@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
-  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
-
-node-modules-regexp@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
-  integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
-
-node-status-codes@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"
-  integrity sha1-WuVUHQJGRdMqWPzdyc7s6nrjrC8=
-
-object-assign@^4.0.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
-once@^1.3.0, once@^1.3.1, once@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
-  dependencies:
-    wrappy "1"
-
-os-tmpdir@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
-  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
-
-p-limit@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.0.tgz#417c9941e6027a9abcba5092dd2904e255b5fbc2"
-  integrity sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==
-  dependencies:
-    p-try "^2.0.0"
-
-p-locate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
-  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
-  dependencies:
-    p-limit "^2.0.0"
-
-p-map@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-3.0.0.tgz#d704d9af8a2ba684e2600d9a215983d4141a979d"
-  integrity sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==
-  dependencies:
-    aggregate-error "^3.0.0"
-
-p-try@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
-  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
-
-pako@~1.0.2:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.8.tgz#6844890aab9c635af868ad5fecc62e8acbba3ea4"
-  integrity sha512-6i0HVbUfcKaTv+EG8ZTr75az7GFXcLYk9UyLEg7Notv/Ma+z/UG3TCoz6GiNeOrn1E/e63I0X/Hpw18jHOTUnA==
-
-parse-json@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
-  integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
-  dependencies:
-    error-ex "^1.2.0"
-
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-path-type@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
-  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
-
-pend@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
-  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
-
-picomatch@^2.0.5:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
-  integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
-
-pify@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
-  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
-
-pinkie-promise@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
-  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
-  dependencies:
-    pinkie "^2.0.0"
-
-pinkie@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
-  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
-
-pirates@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.0.tgz#850b18781b4ac6ec58a43c9ed9ec5fe6796addbd"
-  integrity sha512-8t5BsXy1LUIjn3WWOlOuFDuKswhQb/tkak641lvBgmPOBUQHXveORtlMCp6OdPV1dtuTaEahKA8VNz6uLfKBtA==
-  dependencies:
-    node-modules-regexp "^1.0.0"
-
-pkg-dir@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
-  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
-  dependencies:
-    find-up "^3.0.0"
-
-prepend-http@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
-  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
-
-process-nextick-args@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
-  integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==
-
-progress@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
-  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
-
-proxy-from-env@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
-  integrity sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=
-
-pump@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
-  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-puppeteer@3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-3.3.0.tgz#95839af9fdc0aa4de7e5ee073a4c0adeb9e2d3d7"
-  integrity sha512-23zNqRltZ1PPoK28uRefWJ/zKb5Jhnzbbwbpcna2o5+QMn17F0khq5s1bdH3vPlyj+J36pubccR8wiNA/VE0Vw==
-  dependencies:
-    debug "^4.1.0"
-    extract-zip "^2.0.0"
-    https-proxy-agent "^4.0.0"
-    mime "^2.0.3"
-    progress "^2.0.1"
-    proxy-from-env "^1.0.0"
-    rimraf "^3.0.2"
-    tar-fs "^2.0.0"
-    unbzip2-stream "^1.3.3"
-    ws "^7.2.3"
-
-read-all-stream@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa"
-  integrity sha1-NcPhd/IHjveJ7kv6+kNzB06u9Po=
-  dependencies:
-    pinkie-promise "^2.0.0"
-    readable-stream "^2.0.0"
-
-readable-stream@^2.0.0, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@~2.3.6:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
-  integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
-readable-stream@^3.1.1, readable-stream@^3.4.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
-reusify@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
-  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
-
-rimraf@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  dependencies:
-    glob "^7.1.3"
-
-rimraf@^3.0.0, rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
-run-parallel@^1.1.9:
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
-  integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==
-
-safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
-  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-
-safe-buffer@~5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
-  integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
-
-selenium-webdriver@4.0.0-alpha.7:
-  version "4.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.7.tgz#e3879d8457fd7ad8e4424094b7dc0540d99e6797"
-  integrity sha512-D4qnTsyTr91jT8f7MfN+OwY0IlU5+5FmlO5xlgRUV6hDEV8JyYx2NerdTEqDDkNq7RZDYc4VoPALk8l578RBHw==
-  dependencies:
-    jszip "^3.2.2"
-    rimraf "^2.7.1"
-    tmp "0.0.30"
-
-semver@^5.6.0:
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"
-  integrity sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==
-
-set-immediate-shim@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
-  integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
-
-slash@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
-  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
-
-source-map-support@^0.5.16:
-  version "0.5.16"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
-  integrity sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
-source-map@^0.6.0:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
-tar-fs@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.0.1.tgz#e44086c1c60d31a4f0cf893b1c4e155dabfae9e2"
-  integrity sha512-6tzWDMeroL87uF/+lin46k+Q+46rAJ0SyPGz7OW7wTgblI273hsBqk2C1j0/xNadNLKDTUL9BukSjB7cwgmlPA==
-  dependencies:
-    chownr "^1.1.1"
-    mkdirp-classic "^0.5.2"
-    pump "^3.0.0"
-    tar-stream "^2.0.0"
-
-tar-stream@^2.0.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.1.2.tgz#6d5ef1a7e5783a95ff70b69b97455a5968dc1325"
-  integrity sha512-UaF6FoJ32WqALZGOIAApXx+OdxhekNMChu6axLJR85zMMjXKWFGjbIRe+J6P4UnRGg9rAwWvbTT0oI7hD/Un7Q==
-  dependencies:
-    bl "^4.0.1"
-    end-of-stream "^1.4.1"
-    fs-constants "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^3.1.1"
-
-tar@4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.2.tgz#60685211ba46b38847b1ae7ee1a24d744a2cd462"
-  integrity sha512-BfkE9CciGGgDsATqkikUHrQrraBCO+ke/1f6SFAEMnxyyfN9lxC+nW1NFWMpqH865DhHIy9vQi682gk1X7friw==
-  dependencies:
-    chownr "^1.0.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.2.4"
-    minizlib "^1.1.0"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.2"
-
-tcp-port-used@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/tcp-port-used/-/tcp-port-used-1.0.1.tgz#46061078e2d38c73979a2c2c12b5a674e6689d70"
-  integrity sha512-rwi5xJeU6utXoEIiMvVBMc9eJ2/ofzB+7nLOdnZuFTmNCLqRiQh2sMG9MqCxHU/69VC/Fwp5dV9306Qd54ll1Q==
-  dependencies:
-    debug "4.1.0"
-    is2 "2.0.1"
-
-through@^2.3.8:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
-
-timed-out@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-2.0.0.tgz#f38b0ae81d3747d628001f41dafc652ace671c0a"
-  integrity sha1-84sK6B03R9YoAB9B2vxlKs5nHAo=
-
-tmp@0.0.30:
-  version "0.0.30"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"
-  integrity sha1-ckGdSovn1s51FI/YsyTlk6cRwu0=
-  dependencies:
-    os-tmpdir "~1.0.1"
-
-to-regex-range@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
-  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
-  dependencies:
-    is-number "^7.0.0"
-
-unbzip2-stream@^1.3.3:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.1.tgz#151b104af853df3efdaa135d8b1eca850a44b426"
-  integrity sha512-sgDYfSDPMsA4Hr2/w7vOlrJBlwzmyakk1+hW8ObLvxSp0LA36LcL2XItGvOT3OSblohSdevMuT8FQjLsqyy4sA==
-  dependencies:
-    buffer "^5.2.1"
-    through "^2.3.8"
-
-unzip-response@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-1.0.2.tgz#b984f0877fc0a89c2c773cc1ef7b5b232b5b06fe"
-  integrity sha1-uYTwh3/AqJwsdzzB73tbIytbBv4=
-
-url-parse-lax@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
-  integrity sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=
-  dependencies:
-    prepend-http "^1.0.1"
-
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
-
-ws@^7.2.3:
-  version "7.2.3"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.2.3.tgz#a5411e1fb04d5ed0efee76d26d5c46d830c39b46"
-  integrity sha512-HTDl9G9hbkNDk98naoR/cHDws7+EyYMOdL1BmjsZXRUjf7d+MficC4B7HLUPlSiho0vg+CWKrGIt/VJBd1xunQ==
-
-yallist@^3.0.0, yallist@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.3.tgz#b4b049e314be545e3ce802236d6cd22cd91c3de9"
-  integrity sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==
-
-yauzl@^2.10.0:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
-  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
-  dependencies:
-    buffer-crc32 "~0.2.3"
-    fd-slicer "~1.1.0"
diff --git a/build-system/tasks/extension-generator/OWNERS b/build-system/tasks/extension-generator/OWNERS
deleted file mode 100644
index ae36b3a522e6b..0000000000000
--- a/build-system/tasks/extension-generator/OWNERS
+++ /dev/null
@@ -1,17 +0,0 @@
-// For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
-
-{
-  rules: [
-    {
-      owners: [
-        // Outreach group maintains extension boilerplate/template.
-        {name: 'ampproject/wg-outreach'},
-
-        // Most new extensions are reviewed by this group. It's in their
-        // interest to maintain the extension generator.
-        {name: 'ampproject/wg-ui-and-a11y'},
-      ],
-    },
-  ],
-}
diff --git a/build-system/tasks/extension-generator/extension-doc.template.md b/build-system/tasks/extension-generator/extension-doc.template.md
deleted file mode 100644
index 22ac2514bca7b..0000000000000
--- a/build-system/tasks/extension-generator/extension-doc.template.md
+++ /dev/null
@@ -1,165 +0,0 @@
----
-\$category@: presentation
-formats:
-  - websites
-  - email
-teaser:
-  text: Fill this in with teaser text to improve SEO. Use the component description.
----
-
-<!--
-  All documentation starts with frontmatter. Front matter organizes documentation on amp.dev
-  and improves SEO.
-  * Include the relevant category(ies): ads-analytics, dynamic-content, layout, media, presentation, social, personalization
-  * List applicable format(s): websites, ads, stories, email
-  * Do not include markdown formatting in the frontmatter - plain text and punctionation only!
-  * Remove this comment!
--->
-
-<!--
-Copyright ${year} 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.
--->
-
-# `${name}`
-
-<!--
-  If the component is relevant for more than one format and operates differently between these
-  formats, include and filter multiple content blocks and code samples.
--->
-
-## Usage
-
-One to three paragraphs explaining the component usage. List important functionality. Explain why developers care about it.
-
-[filter formats=“websites”]
-
-Below is an example for websites.
-
-[example preview="inline" playground="true" imports="${name}"]
-
-```html
-<${name} required-attribute>
-  I am a hello world inline executable code sample for websites!
-</${name}>
-```
-
-[/example][/filter]
-
-<!--
-  * [Read more about filtering sections](https://amp.dev/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/?format=websites#filtering-sections)
-  * [Read more about executable code samples](https://amp.dev/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/?format=websites#preview-code-samples)
- -->
-
-[filter formats=“ads”]
-
-Below is an example for ads.
-
-[example preview=“inline” playground=“true” imports="${name}"]
-
-```html
-<${name} required-attribute>
-  I am a hello world inline executable code sample for ads!
-</${name}>
-```
-
-[/example][/filter]
-
-### Behavior users should be aware of (optional)
-
-What to do if they want behavior. How to work around it.
-
-```html
-<${name} required-attribute>
-  Code sample of behavior or behavior workaround.
-</${name}>
-```
-
-### Behavior restrictions
-
-What is allowed, what isn't.
-
-## Attributes
-
-### `attribute-name`
-
-Description of attribute. Use cases for this attribute.
-
-- `attribute-value-option-one` (default): `attribute-option-one-value` does this to `${name}`.
-- `attribute-value-option-two`: `attribute-option-two-value` does this to `${name}`.
-
-### `optional-attribute-name` (optional)
-
-Here, I write what `optional-attribute-name` will do to `${name}`.
-
-## Actions (optional)
-
-### `action-name`
-
-Description of action. Use cases of `action-name`. Include all the nuances, such as: `${name}` needs to be identified with an `id` to work.
-
-## Events (optional)
-
-### `event-name`
-
-Description of event. Use cases of event-name. Include all the nuances, such as: `${name}` needs to be identified with an `id` to work.
-
-[example preview=”top-frame” playground=”true”]
-
-```html
-<head>
-  <script
-    custom-element="${name}"
-    async
-    src="https://cdn.ampproject.org/v0/${name}-latest.js"
-  ></script>
-</head>
-<body>
-  <${name}
-    required-attribute
-    on="event-name: my-button.show"
-  >
-    Hello World!
-  </${name}>
-  <button id="my-button" hidden>
-    Here I am!
-  </button>
-</body>
-```
-
-[/example]
-
-## Styling (optional)
-
-Explain how to style the element.
-
-## Analytics (optional)
-
-Explain analytics.
-
-```html
-"configuration": {}
-```
-
-## Accessibility (optional)
-
-Accessibility information related to `${name}`.
-
-## Version notes (optional)
-
-Information on version differences and migration notes.
-
-## Validation
-
-See [\${name} rules](https://github.com/ampproject/amphtml/blob/master/extensions/${name}/validator-${name}.protoascii) in the AMP validator specification.
diff --git a/build-system/tasks/extension-generator/index.js b/build-system/tasks/extension-generator/index.js
deleted file mode 100644
index 838db7a959a34..0000000000000
--- a/build-system/tasks/extension-generator/index.js
+++ /dev/null
@@ -1,259 +0,0 @@
-/**
- * Copyright 2017 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 argv = require('minimist')(process.argv.slice(2));
-const colors = require('ansi-colors');
-const fs = require('fs-extra');
-const log = require('fancy-log');
-
-const year = new Date().getFullYear();
-
-/*eslint "max-len": 0*/
-
-function pascalCase(str) {
-  return (
-    str[0].toUpperCase() +
-    str.slice(1).replace(/-([a-z])/g, function (g) {
-      return g[1].toUpperCase();
-    })
-  );
-}
-
-function getValidatorFile(name) {
-  return `#
-# Copyright ${year} 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.
-#
-
-tags: {  # ${name}
-  html_format: AMP
-  tag_name: "SCRIPT"
-  extension_spec: {
-    name: "${name}"
-    version: "0.1"
-    version: "latest"
-  }
-  attr_lists: "common-extension-attrs"
-}
-tags: {  # <${name}>
-  html_format: AMP
-  tag_name: "${name.toUpperCase()}"
-  requires_extension: "${name}"
-  attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/${name}"
-  amp_layout: {
-    supported_layouts: RESPONSIVE
-  }
-}
-`;
-}
-
-const getMarkdownDocFile = async (name) =>
-  (await fs.readFile(`${__dirname}/extension-doc.template.md`))
-    .toString('utf-8')
-    .replace(/\\\$category/g, '$category')
-    .replace(/\\?\${name}/g, name)
-    .replace(/\\?\${year}/g, year);
-
-function getJsTestExtensionFile(name) {
-  return `/**
- * Copyright ${year} 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.
- */
-
-import '../${name}';
-import {createElementWithAttributes} from '../../../../src/dom';
-
-describes.realWin(
-  '${name}',
-  {
-    amp: {
-      runtimeOn: true,
-      extensions: ['${name}'],
-    },
-  },
-  (env) => {
-    let win;
-    let element;
-
-    beforeEach(() => {
-      win = env.win;
-      element = createElementWithAttributes(win.document, '${name}', {
-        layout: 'responsive',
-      });
-      win.document.body.appendChild(element);
-    });
-
-    it('should contain "hello world" when built', async () => {
-      await element.whenBuilt();
-      expect(element.querySelector('div').textContent).to.equal('hello world');
-    });
-  }
-);
-`;
-}
-
-function getJsExtensionFile(name) {
-  const className = pascalCase(name);
-  return `/**
- * Copyright ${year} 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.
- */
-
-import {Layout} from '../../../src/layout';
-
-export class ${className} extends AMP.BaseElement {
-
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-
-    /** @private {string} */
-    this.myText_ = 'hello world';
-
-    /** @private {?Element} */
-    this.container_ = null;
-  }
-
-  /** @override */
-  buildCallback() {
-    this.container_ = this.element.ownerDocument.createElement('div');
-    this.container_.textContent = this.myText_;
-    this.element.appendChild(this.container_);
-    this.applyFillContent(this.container_, /* replacedContent */ true);
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout == Layout.RESPONSIVE;
-  }
-}
-
-AMP.extension('${name}', '0.1', AMP => {
-  AMP.registerElement('${name}', ${className});
-});
-`;
-}
-
-function getExamplesFile(name) {
-  return `<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>${name} example</title>
-  <link rel="canonical" href="amps.html">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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>
-    ${name} {
-      color: red;
-    }
-  </style>
-  <script async custom-element="${name}" src="https://cdn.ampproject.org/v0/${name}-0.1.js"></script>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <${name} layout="responsive" width="150" height="80"></${name}>
-</body>
-</html>
-`;
-}
-
-async function makeExtension() {
-  if (!argv.name) {
-    log(colors.red('Error! Please pass in the "--name" flag with a value'));
-  }
-  const {name} = argv;
-  const examplesFile = getExamplesFile(name);
-
-  fs.mkdirpSync(`extensions/${name}/0.1/test`);
-  fs.writeFileSync(
-    `extensions/${name}/${name}.md`,
-    await getMarkdownDocFile(name)
-  );
-  fs.writeFileSync(
-    `extensions/${name}/validator-${name}.protoascii`,
-    getValidatorFile(name)
-  );
-  fs.writeFileSync(
-    `extensions/${name}/0.1/${name}.js`,
-    getJsExtensionFile(name)
-  );
-  fs.writeFileSync(
-    `extensions/${name}/0.1/test/test-${name}.js`,
-    getJsTestExtensionFile(name)
-  );
-  fs.writeFileSync(
-    `extensions/${name}/0.1/test/validator-${name}.html`,
-    examplesFile
-  );
-
-  const examplesFileValidatorOut = examplesFile
-    .trim()
-    .split('\n')
-    .map((line) => `|  ${line}`)
-    .join('\n');
-
-  fs.writeFileSync(
-    `extensions/${name}/0.1/test/validator-${name}.out`,
-    ['PASS', examplesFileValidatorOut].join('\n')
-  );
-
-  fs.writeFileSync(`examples/${name}.amp.html`, examplesFile);
-}
-
-module.exports = {
-  makeExtension,
-};
-
-makeExtension.description = 'Create an extension skeleton';
-makeExtension.flags = {
-  name: '  The name of the extension. Preferable prefixed with `amp-*`',
-};
diff --git a/build-system/tasks/extension-helpers.js b/build-system/tasks/extension-helpers.js
index 7c6823d087cf8..8370e3a63618c 100644
--- a/build-system/tasks/extension-helpers.js
+++ b/build-system/tasks/extension-helpers.js
@@ -14,25 +14,38 @@
  * limitations under the License.
  */
 
-const colors = require('ansi-colors');
+const argv = require('minimist')(process.argv.slice(2));
 const debounce = require('debounce');
 const fs = require('fs-extra');
-const log = require('fancy-log');
-const watch = require('gulp-watch');
+const path = require('path');
 const wrappers = require('../compile/compile-wrappers');
+const {
+  compileJs,
+  compileJsWithEsbuild,
+  doBuildJs,
+  endBuildStep,
+  maybeToEsmName,
+  maybeToNpmEsmName,
+  mkdirSync,
+  watchDebounceDelay,
+} = require('./helpers');
 const {
   extensionAliasBundles,
   extensionBundles,
+  jsBundles,
   verifyExtensionBundles,
 } = require('../compile/bundles.config');
-const {endBuildStep, watchDebounceDelay} = require('./helpers');
-const {isTravisBuild} = require('../common/travis');
-const {jsifyCssAsync} = require('./jsify-css');
-const {maybeToEsmName, compileJs, mkdirSync} = require('./helpers');
-const {vendorConfigs} = require('./vendor-configs');
-
-const {green, red, cyan} = colors;
-const argv = require('minimist')(process.argv.slice(2));
+const {
+  VERSION: internalRuntimeVersion,
+} = require('../compile/internal-version');
+const {analyticsVendorConfigs} = require('./analytics-vendor-configs');
+const {compileJison} = require('./compile-jison');
+const {cyan, green, red} = require('../common/colors');
+const {isCiBuild} = require('../common/ci');
+const {jsifyCssAsync} = require('./css/jsify-css');
+const {log} = require('../common/logging');
+const {parse: pathParse} = require('path');
+const {watch} = require('chokidar');
 
 /**
  * Extensions to build when `--extensions=inabox`.
@@ -72,15 +85,27 @@ const DEFAULT_EXTENSION_SET = ['amp-loader', 'amp-auto-lightbox'];
 
 /**
  * @typedef {{
- *   name: ?string,
- *   version: ?string,
- *   hasCss: ?boolean,
- *   loadPriority: ?string,
- *   cssBinaries: ?Array<string>,
- *   extraGlobs: ?Array<string>,
+ *   name?: string,
+ *   version?: string,
+ *   hasCss?: boolean,
+ *   loadPriority?: string,
+ *   cssBinaries?: Array<string>,
+ *   extraGlobs?: Array<string>,
+ *   binaries?: Array<ExtensionBinaryDef>,
+ *   npm?: boolean,
+ * }}
+ */
+const ExtensionOptionDef = {};
+
+/**
+ * @typedef {{
+ *   entryPoint: string,
+ *   outfile: string,
+ *   external?: Array<string>
+ *   remap?: Record<string, string>
  * }}
  */
-const ExtensionOption = {}; // eslint-disable-line no-unused-vars
+const ExtensionBinaryDef = {};
 
 // All declared extensions.
 const extensions = {};
@@ -95,7 +120,7 @@ const adVendors = [];
  * @param {string} name
  * @param {string|!Array<string>} version E.g. 0.1 or [0.1, 0.2]
  * @param {string} latestVersion E.g. 0.1
- * @param {!ExtensionOption} options extension options object.
+ * @param {!ExtensionOptionDef|undefined} options extension options object.
  * @param {!Object} extensionsObject
  * @param {boolean} includeLatest
  */
@@ -107,7 +132,7 @@ function declareExtension(
   extensionsObject,
   includeLatest
 ) {
-  const defaultOptions = {hasCss: false};
+  const defaultOptions = {hasCss: false, npm: undefined};
   const versions = Array.isArray(version) ? version : [version];
   versions.forEach((v) => {
     extensionsObject[`${name}-${v}`] = {
@@ -130,10 +155,10 @@ function declareExtension(
 }
 
 /**
- * Initializes all extensions from build-system/compile/bundles.config.js if not
- * already done and populates the given extensions object.
+ * Initializes all extensions from build-system/compile/bundles.config.extensions.json
+ * if not already done and populates the given extensions object.
  * @param {?Object} extensionsObject
- * @param {?boolean} includeLatest
+ * @param {boolean=} includeLatest
  */
 function maybeInitializeExtensions(
   extensionsObject = extensions,
@@ -156,7 +181,7 @@ function maybeInitializeExtensions(
 
 /**
  * Set the extensions to build from example documents
- * (for internal use by `gulp performance`)
+ * (for internal use by `amp performance`)
  *
  * @param {Array<string>} examples Path to example documents
  */
@@ -175,10 +200,7 @@ function setExtensionsToBuildFromDocuments(examples) {
  * @return {!Array<string>}
  */
 function getExtensionsToBuild(preBuild = false) {
-  if (extensionsToBuild) {
-    return extensionsToBuild;
-  }
-  extensionsToBuild = DEFAULT_EXTENSION_SET;
+  extensionsToBuild = argv.core_runtime_only ? [] : DEFAULT_EXTENSION_SET;
   if (argv.extensions) {
     if (typeof argv.extensions !== 'string') {
       log(red('ERROR:'), 'Missing list of extensions.');
@@ -194,7 +216,11 @@ function getExtensionsToBuild(preBuild = false) {
     extensionsToBuild = dedupe(extensionsToBuild.concat(extensionsFrom));
   }
   if (
-    !(preBuild || argv.noextensions || argv.extensions || argv.extensions_from)
+    !preBuild &&
+    !argv.noextensions &&
+    !argv.extensions &&
+    !argv.extensions_from &&
+    !argv.core_runtime_only
   ) {
     const allExtensions = [];
     for (const extension in extensions) {
@@ -213,7 +239,7 @@ function getExtensionsToBuild(preBuild = false) {
  * @param {boolean=} preBuild
  */
 function parseExtensionFlags(preBuild = false) {
-  if (isTravisBuild()) {
+  if (isCiBuild()) {
     return;
   }
 
@@ -221,7 +247,7 @@ function parseExtensionFlags(preBuild = false) {
   const coreRuntimeOnlyMessage =
     green('⤷ Use ') +
     cyan('--core_runtime_only ') +
-    green('to build just the core runtime.');
+    green('to build just the core runtime and skip other JS targets.');
   const noExtensionsMessage =
     green('⤷ Use ') +
     cyan('--noextensions ') +
@@ -241,7 +267,7 @@ function parseExtensionFlags(preBuild = false) {
     cyan('foo.amp.html') +
     green('.');
 
-  if (argv.core_runtime_only) {
+  if (argv.core_runtime_only && !(argv.extensions || argv.extensions_from)) {
     log(green('Building just the core runtime.'));
   } else if (preBuild) {
     log(
@@ -278,7 +304,7 @@ function parseExtensionFlags(preBuild = false) {
  */
 function getExtensionsFromArg(examples) {
   if (!examples) {
-    return;
+    return [];
   }
 
   const extensions = [];
@@ -339,7 +365,7 @@ async function buildExtensions(options) {
     }
   }
   await Promise.all(results);
-  if (!options.compileOnlyCss) {
+  if (!options.compileOnlyCss && results.length > 0) {
     endBuildStep(
       options.minify ? 'Minified all' : 'Compiled all',
       'extensions',
@@ -370,30 +396,42 @@ async function doBuildExtension(extensions, extension, options) {
 }
 
 /**
- * Watches the contents of an extension directory. When a file in the given path
- * changes, the extension is rebuilt.
+ * Watches for non-JS changes within an extensions directory to trigger
+ * recompilation.
  *
- * @param {string} path
+ * @param {string} extDir
  * @param {string} name
  * @param {string} version
  * @param {string} latestVersion
  * @param {boolean} hasCss
  * @param {?Object} options
  */
-function watchExtension(path, name, version, latestVersion, hasCss, options) {
-  const watchFunc = function () {
-    const bundleComplete = buildExtension(
-      name,
-      version,
-      latestVersion,
-      hasCss,
-      {...options, continueOnError: true}
-    );
-    if (options.onWatchBuild) {
-      options.onWatchBuild(bundleComplete);
-    }
-  };
-  watch(path + '/**/*', debounce(watchFunc, watchDebounceDelay));
+async function watchExtension(
+  extDir,
+  name,
+  version,
+  latestVersion,
+  hasCss,
+  options
+) {
+  /**
+   * Steps to run when a watched file is modified.
+   */
+  function watchFunc() {
+    buildExtension(name, version, latestVersion, hasCss, {
+      ...options,
+      continueOnError: true,
+      isRebuild: true,
+      watch: false,
+    });
+  }
+
+  const cssDeps = `${extDir}/**/*.css`;
+  const jisonDeps = `${extDir}/**/*.jison`;
+  watch([cssDeps, jisonDeps]).on(
+    'change',
+    debounce(watchFunc, watchDebounceDelay)
+  );
 }
 
 /**
@@ -429,42 +467,52 @@ async function buildExtension(
   if (options.compileOnlyCss && !hasCss) {
     return;
   }
-  const path = 'extensions/' + name + '/' + version;
+  const extDir = 'extensions/' + name + '/' + version;
 
-  // Use a separate watcher for extensions to copy / inline CSS and compile JS
-  // instead of relying on the watchers used by compileUnminifiedJs and
-  // compileMinifiedJs, which only recompile JS.
+  // Use a separate watcher for css and jison compilation.
+  // The watcher within compileJs recompiles the JS.
   if (options.watch) {
-    options.watch = false;
-    watchExtension(path, name, version, latestVersion, hasCss, options);
-    // When an ad network extension is being watched, also watch amp-a4a.
-    if (name.match(/amp-ad-network-.*-impl/)) {
-      const a4aPath = `extensions/amp-a4a/${version}`;
-      watchExtension(a4aPath, name, version, latestVersion, hasCss, options);
-    }
+    await watchExtension(extDir, name, version, latestVersion, hasCss, options);
   }
+
   if (hasCss) {
     mkdirSync('build');
     mkdirSync('build/css');
-    await buildExtensionCss(path, name, version, options);
+    await buildExtensionCss(extDir, name, version, options);
     if (options.compileOnlyCss) {
       return;
     }
   }
+
+  await compileJison(path.join(extDir, '**', '*.jison'));
+  if (name === 'amp-bind') {
+    await doBuildJs(jsBundles, 'ww.max.js', options);
+  }
+  if (options.npm) {
+    await buildNpmBinaries(extDir, options);
+  }
+  if (options.binaries) {
+    await buildBinaries(extDir, options.binaries, options);
+  }
   if (name === 'amp-analytics') {
-    await vendorConfigs(options);
+    await analyticsVendorConfigs(options);
   }
-  await buildExtensionJs(path, name, version, latestVersion, options);
+
+  if (options.isRebuild) {
+    return;
+  }
+
+  await buildExtensionJs(extDir, name, version, latestVersion, options);
 }
 
 /**
- * @param {string} path
+ * @param {string} extDir
  * @param {string} name
  * @param {string} version
  * @param {!Object} options
  * @return {!Promise}
  */
-function buildExtensionCss(path, name, version, options) {
+function buildExtensionCss(extDir, name, version, options) {
   /**
    * Writes CSS binaries
    *
@@ -482,7 +530,7 @@ function buildExtensionCss(path, name, version, options) {
   const isAliased = aliasBundle && aliasBundle.version == version;
 
   const promises = [];
-  const mainCssBinary = jsifyCssAsync(path + '/' + name + '.css').then(
+  const mainCssBinary = jsifyCssAsync(extDir + '/' + name + '.css').then(
     (mainCss) => {
       writeCssBinaries(`${name}-${version}.css`, mainCss);
       if (isAliased) {
@@ -495,7 +543,7 @@ function buildExtensionCss(path, name, version, options) {
     promises.push.apply(
       promises,
       options.cssBinaries.map(function (name) {
-        return jsifyCssAsync(`${path}/${name}.css`).then((css) => {
+        return jsifyCssAsync(`${extDir}/${name}.css`).then((css) => {
           writeCssBinaries(`${name}-${version}.css`, css);
           if (isAliased) {
             writeCssBinaries(`${name}-${aliasBundle.aliasedVersion}.css`, css);
@@ -508,10 +556,87 @@ function buildExtensionCss(path, name, version, options) {
   return Promise.all(promises);
 }
 
+/**
+ * @param {string} extDir
+ * @param {!Object} options
+ * @return {!Promise}
+ */
+function buildNpmBinaries(extDir, options) {
+  let {npm} = options;
+  if (npm === true) {
+    // Default to the standard/expected entrypoint
+    npm = {
+      'component.js': {
+        'preact': 'component-preact.js',
+        'react': 'component-react.js',
+      },
+    };
+  }
+  const keys = Object.keys(npm);
+  const promises = keys.flatMap((entryPoint) => {
+    const {preact, react} = npm[entryPoint];
+    const binaries = [];
+    if (preact) {
+      binaries.push({
+        entryPoint,
+        outfile: preact,
+        external: ['preact', 'preact/dom', 'preact/compat', 'preact/hooks'],
+        remap: {'preact/dom': 'preact'},
+      });
+    }
+    if (react) {
+      binaries.push({
+        entryPoint,
+        outfile: react,
+        external: ['react', 'react-dom'],
+        remap: {
+          'preact': 'react',
+          'preact/compat': 'react',
+          'preact/hooks': 'react',
+          'preact/dom': 'react-dom',
+        },
+      });
+    }
+    return buildBinaries(extDir, binaries, options);
+  });
+  return Promise.all(promises);
+}
+
+/**
+ * @param {string} extDir
+ * @param {!Array<ExtensionBinaryDef>} binaries
+ * @param {!Object} options
+ * @return {!Promise}
+ */
+function buildBinaries(extDir, binaries, options) {
+  mkdirSync(`${extDir}/dist`);
+
+  const promises = binaries.map((binary) => {
+    const {entryPoint, external, outfile, remap} = binary;
+    const {name} = pathParse(outfile);
+    const esm = argv.esm || argv.sxg || false;
+    return compileJsWithEsbuild(
+      extDir + '/',
+      entryPoint,
+      `${extDir}/dist`,
+      Object.assign(options, {
+        toName: maybeToNpmEsmName(`${name}.max.js`),
+        minifiedName: maybeToNpmEsmName(`${name}.js`),
+        latestName: '',
+        outputFormat: esm ? 'esm' : 'cjs',
+        wrapper: '',
+        externalDependencies: external,
+        remapDependencies: remap,
+      })
+    );
+  });
+  return Promise.all(promises);
+}
+
 /**
  * Build the JavaScript for the extension specified
  *
- * @param {string} path Path to the extensions directory
+ * @param {string} extDir Path to the extension's directory
  * @param {string} name Name of the extension. Must be the sub directory in
  *     the extensions directory and the name of the JS and optional CSS file.
  * @param {string} version Version of the extension. Must be identical to
@@ -520,17 +645,17 @@ function buildExtensionCss(path, name, version, options) {
  * @param {!Object} options
  * @return {!Promise}
  */
-async function buildExtensionJs(path, name, version, latestVersion, options) {
+async function buildExtensionJs(extDir, name, version, latestVersion, options) {
   const filename = options.filename || name + '.js';
+  const latest = version === latestVersion;
   await compileJs(
-    path + '/',
+    extDir + '/',
     filename,
     './dist/v0',
     Object.assign(options, {
       toName: `${name}-${version}.max.js`,
       minifiedName: `${name}-${version}.js`,
-      latestName: version === latestVersion ? `${name}-latest.js` : '',
-      esmPassCompilation: argv.esm || false,
+      latestName: latest ? `${name}-latest.js` : '',
       // Wrapper that either registers the extension or schedules it for
       // execution after the main binary comes back.
       // The `function` is wrapped in `()` to avoid lazy parsing it,
@@ -538,7 +663,13 @@ async function buildExtensionJs(path, name, version, latestVersion, options) {
       // See https://github.com/ampproject/amphtml/issues/3977
       wrapper: options.noWrapper
         ? ''
-        : wrappers.extension(name, options.loadPriority),
+        : wrappers.extension(
+            name,
+            version,
+            latest,
+            argv.esm,
+            options.loadPriority
+          ),
     })
   );
 
@@ -561,14 +692,101 @@ async function buildExtensionJs(path, name, version, latestVersion, options) {
   }
 
   if (name === 'amp-script') {
-    // Copy @ampproject/worker-dom/dist/amp/worker/worker.js to dist/ folder.
-    const dir = 'node_modules/@ampproject/worker-dom/dist/amp/worker/';
-    const file = `dist/v0/amp-script-worker-${version}`;
-    // The "js" output is minified and transpiled to ES5.
-    fs.copyFileSync(dir + 'worker.js', `${file}.js`);
-    // The "mjs" output is unminified ES6 and has debugging flags enabled.
-    fs.copyFileSync(dir + 'worker.mjs', `${file}.max.js`);
+    await copyWorkerDomResources(version);
+    await buildSandboxedProxyIframe(options.minify);
+  }
+}
+
+/**
+ * Builds and writes the HTML file used for <amp-script> sandboxed mode.
+ * @param {boolean} minify
+ */
+async function buildSandboxedProxyIframe(minify) {
+  await doBuildJs(jsBundles, 'amp-script-proxy-iframe.js', {minify});
+  const dist3pDir = path.join(
+    'dist.3p',
+    minify ? `${internalRuntimeVersion}` : 'current'
+  );
+  const fileExt = argv.esm ? '.mjs' : '.js';
+  const proxyScript = await fs.readFile(
+    path.join(dist3pDir, 'amp-script-proxy-iframe' + fileExt)
+  );
+  const proxyIframe = `<html><script>${proxyScript}</script></html>`;
+  await fs.outputFile(
+    path.join(dist3pDir, 'amp-script-proxy-iframe.html'),
+    proxyIframe
+  );
+}
+
+/**
+ * Copies the required resources from @ampproject/worker-dom and renames
+ * them accordingly.
+ *
+ * @param {string} version
+ */
+async function copyWorkerDomResources(version) {
+  const startTime = Date.now();
+  const workerDomDir = 'node_modules/@ampproject/worker-dom';
+  const targetDir = 'dist/v0';
+  const dir = `${workerDomDir}/dist`;
+  const workerFilesToDeploy = new Map([
+    ['amp-production/worker/worker.js', `amp-script-worker-${version}.js`],
+    [
+      'amp-production/worker/worker.nodom.js',
+      `amp-script-worker-nodom-${version}.js`,
+    ],
+    ['amp-production/worker/worker.mjs', `amp-script-worker-${version}.mjs`],
+    [
+      'amp-production/worker/worker.nodom.mjs',
+      `amp-script-worker-nodom-${version}.mjs`,
+    ],
+    [
+      'amp-production/worker/worker.js.map',
+      `amp-script-worker-${version}.js.map`,
+    ],
+    [
+      'amp-production/worker/worker.nodom.js.map',
+      `amp-script-worker-nodom-${version}.js.map`,
+    ],
+    [
+      'amp-production/worker/worker.mjs.map',
+      `amp-script-worker-${version}.mjs.map`,
+    ],
+    [
+      'amp-production/worker/worker.nodom.mjs.map',
+      `amp-script-worker-nodom-${version}.mjs.map`,
+    ],
+    ['amp-debug/worker/worker.js', `amp-script-worker-${version}.max.js`],
+    [
+      'amp-debug/worker/worker.nodom.js',
+      `amp-script-worker-nodom-${version}.max.js`,
+    ],
+    ['amp-debug/worker/worker.mjs', `amp-script-worker-${version}.max.mjs`],
+    [
+      'amp-debug/worker/worker.nodom.mjs',
+      `amp-script-worker-nodom-${version}.max.mjs`,
+    ],
+    [
+      'amp-debug/worker/worker.js.map',
+      `amp-script-worker-${version}.max.js.map`,
+    ],
+    [
+      'amp-debug/worker/worker.nodom.js.map',
+      `amp-script-worker-nodom-${version}.max.js.map`,
+    ],
+    [
+      'amp-debug/worker/worker.mjs.map',
+      `amp-script-worker-${version}.max.mjs.map`,
+    ],
+    [
+      'amp-debug/worker/worker.nodom.mjs.map',
+      `amp-script-worker-nodom-${version}.max.mjs.map`,
+    ],
+  ]);
+  for (const [src, dest] of workerFilesToDeploy) {
+    await fs.copy(`${dir}/${src}`, `${targetDir}/${dest}`);
   }
+  endBuildStep('Copied', '@ampproject/worker-dom resources', startTime);
 }
 
 module.exports = {
diff --git a/build-system/tasks/firebase.js b/build-system/tasks/firebase.js
index 970564b3616a4..2e7f0a0889579 100644
--- a/build-system/tasks/firebase.js
+++ b/build-system/tasks/firebase.js
@@ -14,14 +14,18 @@
  * limitations under the License.
  */
 const argv = require('minimist')(process.argv.slice(2));
-const colors = require('ansi-colors');
 const fs = require('fs-extra');
-const log = require('fancy-log');
 const path = require('path');
 const {clean} = require('./clean');
 const {doBuild} = require('./build');
 const {doDist} = require('./dist');
+const {green} = require('../common/colors');
+const {log} = require('../common/logging');
 
+/**
+ * @param {string} dest
+ * @return {Promise<string[]>}
+ */
 async function walk(dest) {
   const filelist = [];
   const files = await fs.readdir(dest);
@@ -37,6 +41,11 @@ async function walk(dest) {
   return filelist;
 }
 
+/**
+ * @param {string} src
+ * @param {string} dest
+ * @return {Promise<void>}
+ */
 async function copyAndReplaceUrls(src, dest) {
   await fs.copy(src, dest, {overwrite: true});
   // Recursively gets all the files within the directory and its children.
@@ -47,6 +56,9 @@ async function copyAndReplaceUrls(src, dest) {
   await Promise.all(promises);
 }
 
+/**
+ * @return {Promise<void>}
+ */
 async function firebase() {
   if (!argv.nobuild) {
     await clean();
@@ -58,32 +70,32 @@ async function firebase() {
   }
   await fs.mkdirp('firebase');
   if (argv.file) {
-    log(colors.green(`Processing file: ${argv.file}.`));
-    log(colors.green('Writing file to firebase.index.html.'));
-    await fs.copyFile(/*src*/ argv.file, 'firebase/index.html', {
-      overwrite: true,
-    });
+    log(green(`Processing file: ${argv.file}.`));
+    log(green('Writing file to firebase.index.html.'));
+    await fs.copyFile(/*src*/ argv.file, 'firebase/index.html');
     await replaceUrls('firebase/index.html');
   } else {
-    log(colors.green('Copying test/manual and examples folders.'));
+    log(green('Copying test/manual and examples folders.'));
     await Promise.all([
       copyAndReplaceUrls('test/manual', 'firebase/manual'),
       copyAndReplaceUrls('examples', 'firebase/examples'),
     ]);
   }
-  log(colors.green('Copying local amp files from dist folder.'));
+  log(green('Copying local amp files from dist folder.'));
   await Promise.all([
     fs.copy('dist', 'firebase/dist', {overwrite: true}),
     fs.copy('dist.3p/current', 'firebase/dist.3p/current', {overwrite: true}),
   ]);
 
   await Promise.all([
-    fs.copyFile('firebase/dist/ww.max.js', 'firebase/dist/ww.js', {
-      overwrite: true,
-    }),
+    fs.copyFile('firebase/dist/ww.max.js', 'firebase/dist/ww.js'),
   ]);
 }
 
+/**
+ * @param {string} filePath
+ * @return {Promise<void>}
+ */
 async function replaceUrls(filePath) {
   const data = await fs.readFile(filePath, 'utf8');
   let result = data.replace(
@@ -110,9 +122,9 @@ module.exports = {
 
 firebase.description = 'Generates firebase folder for deployment';
 firebase.flags = {
-  'file': '  File to deploy to firebase as index.html',
-  'compiled': '  Deploy from minified files',
-  'nobuild': '  Skips the gulp build|dist step.',
+  'file': 'File to deploy to firebase as index.html',
+  'compiled': 'Deploy from minified files',
+  'nobuild': 'Skips the amp build|dist step.',
   'fortesting':
-    '  Expects an env var AMP_TESTING_HOST and writes this to AMP_CONFIG',
+    'Expects an env var AMP_TESTING_HOST and writes this to AMP_CONFIG',
 };
diff --git a/build-system/tasks/generate-runner.js b/build-system/tasks/generate-runner.js
deleted file mode 100644
index a4020ac2c4d66..0000000000000
--- a/build-system/tasks/generate-runner.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * 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 fs = require('fs-extra');
-const log = require('fancy-log');
-const {cyan, green, red} = require('ansi-colors');
-const {getOutput} = require('../common/exec');
-const {gitCommitHash, gitDiffPath} = require('../common/git');
-const {isTravisBuild} = require('../common/travis');
-
-const antExecutable = 'third_party/ant/bin/ant';
-const runnerDir = 'build-system/runner';
-const buildFile = `${runnerDir}/build.xml`;
-const runnerDistDir = `${runnerDir}/dist`;
-const generatedAtCommitFile = 'GENERATED_AT_COMMIT';
-const setupInstructionsUrl =
-  'https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#building-amp-and-starting-a-local-server';
-
-/**
- * Determines if runner.jar needs to be regenerated
- * @param {string} subDir
- * @return {boolean}
- */
-function shouldGenerateRunner(subDir) {
-  const runnerJarDir = `${runnerDistDir}/${subDir}`;
-  const runnerJar = `${runnerJarDir}/runner.jar`;
-  const generatedAtCommitPath = `${runnerJarDir}/${generatedAtCommitFile}`;
-
-  // Always generate on Travis
-  if (isTravisBuild()) {
-    return true;
-  }
-
-  // The binary hasn't been generated
-  if (!fs.existsSync(runnerJar)) {
-    return true;
-  }
-
-  // We don't know when the binary was last generated
-  if (!fs.existsSync(generatedAtCommitPath)) {
-    return true;
-  }
-
-  // The binary was generated at a different commit
-  const currentCommit = gitCommitHash();
-  const generatedAtCommit = fs
-    .readFileSync(generatedAtCommitPath, 'utf8')
-    .toString();
-  if (currentCommit != generatedAtCommit) {
-    return true;
-  }
-
-  // There are local changes in the build-system/runner directory
-  const localRunnerChanges = gitDiffPath(runnerDir, gitCommitHash());
-  if (localRunnerChanges) {
-    return true;
-  }
-
-  return false;
-}
-
-/**
- * Generates runner.jar if required
- * @param {string} subDir
- */
-async function maybeGenerateRunner(subDir) {
-  if (shouldGenerateRunner(subDir)) {
-    await generateRunner(subDir);
-  }
-}
-
-/**
- * Writes a file to the runner dir to indicate when it was last generated
- * @param {string} runnerJarDir
- */
-function writeGeneratedAtCommitFile(runnerJarDir) {
-  let generatedAtCommit = gitCommitHash();
-  const localRunnerChanges = gitDiffPath(runnerDir, gitCommitHash());
-  if (localRunnerChanges) {
-    generatedAtCommit += '+local';
-  }
-  fs.ensureDirSync(runnerJarDir);
-  fs.writeFileSync(
-    `${runnerJarDir}/${generatedAtCommitFile}`,
-    generatedAtCommit
-  );
-}
-
-/**
- * Generates the custom closure compiler binary (runner.jar) and drops it in the
- * given subdirectory of build-system/runner/dist/ (to enable concurrent usage)
- * @param {string} subDir
- * @return {!Promise}
- */
-async function generateRunner(subDir) {
-  const generateCmd = `${antExecutable} -buildfile ${buildFile} -Ddist.dir dist/${subDir} jar`;
-  const runnerJarDir = `${runnerDistDir}/${subDir}`;
-  writeGeneratedAtCommitFile(runnerJarDir);
-  const result = getOutput(generateCmd);
-  if (0 !== result.status) {
-    log(
-      red('ERROR:'),
-      'Could not generate custom closure compiler',
-      cyan(`${runnerJarDir}/runner.jar`)
-    );
-    console.error(red(result.stdout), red(result.stderr));
-    log(
-      green('INFO:'),
-      'If the errors above are in java execution, see',
-      cyan(`${setupInstructionsUrl}`)
-    );
-    const reason = new Error('Compiler generation failed');
-    reason.showStack = false;
-    return Promise.reject(reason);
-  } else {
-    log(
-      'Generated custom closure compiler',
-      cyan(`${runnerJarDir}/runner.jar`)
-    );
-  }
-}
-
-module.exports = {
-  maybeGenerateRunner,
-};
diff --git a/build-system/tasks/get-zindex/get-zindex.test.js b/build-system/tasks/get-zindex/get-zindex.test.js
new file mode 100644
index 0000000000000..45379a2cf1512
--- /dev/null
+++ b/build-system/tasks/get-zindex/get-zindex.test.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright 2016 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 test = require('ava');
+const {createTable, getZindexChainsInJs, getZindexSelectors} = require('.');
+
+const cssResult = {
+  'test.css': {
+    '.selector-1': '1',
+    '.selector-2': '0',
+    '.selector-3': '99',
+  },
+  'test-2.css': {
+    '.selector-4': '80',
+    '.selector-5': 'initial',
+    '.selector-6': 'auto',
+  },
+};
+
+const jsResult = {
+  'test-0.js': [
+    ['<div />', 'initial'],
+    ['assignment', 'auto'],
+    ['declarator', 0],
+    ['setStyle', 15],
+    ['setStyles', 9999],
+  ],
+  'test-1.js': [['<Component />', 12345]],
+};
+
+test('collects selectors', async (t) => {
+  const data = await getZindexSelectors('*.css', __dirname);
+  t.deepEqual(data, cssResult);
+});
+
+test('collects chains from js', async (t) => {
+  const data = await getZindexChainsInJs('*.js', __dirname);
+  t.deepEqual(data, jsResult);
+});
+
+test('sync - create array of arrays with z index order', (t) => {
+  t.plan(1);
+  const table = createTable({...cssResult, ...jsResult});
+  const expected = [
+    ['`assignment`', 'auto', '[test-0.js](/test-0.js)'],
+    ['`.selector-6`', 'auto', '[test-2.css](/test-2.css)'],
+    ['`<div />`', 'initial', '[test-0.js](/test-0.js)'],
+    ['`.selector-5`', 'initial', '[test-2.css](/test-2.css)'],
+    ['`<Component />`', 12345, '[test-1.js](/test-1.js)'],
+    ['`setStyles`', 9999, '[test-0.js](/test-0.js)'],
+    ['`.selector-3`', '99', '[test.css](/test.css)'],
+    ['`.selector-4`', '80', '[test-2.css](/test-2.css)'],
+    ['`setStyle`', 15, '[test-0.js](/test-0.js)'],
+    ['`.selector-1`', '1', '[test.css](/test.css)'],
+    ['`declarator`', 0, '[test-0.js](/test-0.js)'],
+    ['`.selector-2`', '0', '[test.css](/test.css)'],
+  ];
+  t.deepEqual(table, expected);
+});
diff --git a/build-system/tasks/get-zindex/index.js b/build-system/tasks/get-zindex/index.js
index 10635943082bb..549abe5fe6a02 100644
--- a/build-system/tasks/get-zindex/index.js
+++ b/build-system/tasks/get-zindex/index.js
@@ -16,14 +16,25 @@
 'use strict';
 
 const fs = require('fs');
-const gulp = require('gulp');
-const PluginError = require('plugin-error');
-const postcss = require('postcss');
-const table = require('text-table');
-const through = require('through2');
+const globby = require('globby');
+const path = require('path');
+const Postcss = require('postcss');
+const prettier = require('prettier');
+const textTable = require('text-table');
+const {
+  getJscodeshiftReport,
+  jscodeshiftAsync,
+} = require('../../test-configs/jscodeshift');
+const {getStdout} = require('../../common/process');
+const {gray, magenta} = require('../../common/colors');
+const {logLocalDev, logOnSameLineLocalDev} = require('../../common/logging');
+const {writeDiffOrFail} = require('../../common/diff');
+
+/** @type {Postcss.default} */
+const postcss = /** @type {*} */ (Postcss);
 
 const tableHeaders = [
-  ['selector', 'z-index', 'file'],
+  ['context', 'z-index', 'file'],
   ['---', '---', '---'],
 ];
 
@@ -32,113 +43,219 @@ const tableOptions = {
   hsep: '   |   ',
 };
 
+const preamble = `
+**Run \`amp get-zindex --fix\` to generate this file.**
+
+<!-- markdown-link-check-disable -->
+`.trim();
+
+const logChecking = (filename) =>
+  logOnSameLineLocalDev(gray(path.basename(filename)));
+
+const sortedByEntryKey = (a, b) => a[0].localeCompare(b[0]);
+
 /**
- * @param {!Object<string, !Array<number>} acc accumulator object for selectors
- * @param {!Rules} css post css rules object
+ * @param {!Object<string, string>} acc accumulator object for selectors
+ * @param {!Postcss.Rule} css post css rules object
  */
 function zIndexCollector(acc, css) {
   css.walkRules((rule) => {
     rule.walkDecls((decl) => {
       // Split out multi selector rules
-      let selectorNames = rule.selector.replace('\n', '');
-      selectorNames = selectorNames.split(',');
       if (decl.prop == 'z-index') {
-        selectorNames.forEach((selector) => {
-          // If multiple redeclaration of a selector and z index
-          // are done in a single file, this will get overridden.
-          acc[selector] = decl.value;
-        });
+        rule.selector
+          .replace('\n', '')
+          .split(',')
+          .forEach((selector) => {
+            // If multiple redeclaration of a selector and z index
+            // are done in a single file, this will get overridden.
+            acc[selector] = decl.value;
+          });
       }
     });
   });
 }
 
 /**
- * @param {!Vinyl} file vinyl fs object
- * @param {string} enc encoding value
- * @param {function(err: ?Object, data: !Vinyl|string)} cb chunk data through
- */
-function onFileThrough(file, enc, cb) {
-  if (file.isNull()) {
-    cb(null, file);
-    return;
-  }
-
-  if (file.isStream()) {
-    cb(new PluginError('size', 'Stream not supported'));
-    return;
-  }
-
-  const selectors = Object.create(null);
-
-  postcss([zIndexCollector.bind(null, selectors)])
-    .process(file.contents.toString(), {
-      from: file.relative,
-    })
-    .then(() => {
-      cb(null, {name: file.relative, selectors});
-    });
-}
-
-/**
- * @param {!Object<string, !Object<string, !Array<number>} filesData
+ * @param {!Object<string, !Object<string, !Array<number>>>} filesData
  *    accumulation of files and the rules and z index values.
  * @return {!Array<!Array<string>>}
  */
 function createTable(filesData) {
   const rows = [];
-  Object.keys(filesData)
-    .sort()
-    .forEach((fileName) => {
-      const selectors = filesData[fileName];
-      Object.keys(selectors)
-        .sort()
-        .forEach((selectorName) => {
-          const zIndex = selectors[selectorName];
-          const row = [selectorName, zIndex, fileName];
-          rows.push(row);
-        });
-    });
+  for (const filename of Object.keys(filesData).sort()) {
+    // JS entries are Arrays of Arrays since they can have duplicate contexts
+    // like [['context', 9999]]
+    // CSS entries are Obejcts since they should not have duplicate selectors
+    // like {'.selector': 9999}
+    const entry = Array.isArray(filesData[filename])
+      ? filesData[filename]
+      : Object.entries(filesData[filename]).sort(sortedByEntryKey);
+    for (const [context, zIndex] of entry) {
+      rows.push([`\`${context}\``, zIndex, `[${filename}](/${filename})`]);
+    }
+  }
   rows.sort((a, b) => {
     const aZIndex = parseInt(a[1], 10);
     const bZIndex = parseInt(b[1], 10);
-    return aZIndex - bZIndex;
+    // Word values sorted lexicographically.
+    if (isNaN(aZIndex) && isNaN(bZIndex)) {
+      return a[1].localeCompare(b[1]);
+    }
+    // Word values before length values.
+    if (isNaN(aZIndex)) {
+      return -1;
+    }
+    if (isNaN(bZIndex)) {
+      return 1;
+    }
+    // By length descending.
+    return bZIndex - aZIndex;
   });
   return rows;
 }
 
 /**
- * @param {string} glob
- * @return {!Stream}
+ * Extract z-index selectors from all files matching the given glob starting at
+ * the given working directory
+ * @param {string|Array<string>} glob
+ * @param {string=} cwd
+ * @return {Promise<Object>}
  */
-function getZindexStream(glob) {
-  return gulp.src(glob).pipe(through.obj(onFileThrough));
+async function getZindexSelectors(glob, cwd = '.') {
+  const filesData = Object.create(null);
+  const files = globby.sync(glob, {cwd});
+  for (const file of files) {
+    const contents = await fs.promises.readFile(path.join(cwd, file), 'utf-8');
+    const selectors = Object.create(null);
+    const plugins = [zIndexCollector.bind(null, selectors)];
+    logChecking(file);
+    await postcss(plugins).process(contents, {from: file});
+    if (Object.keys(selectors).length) {
+      filesData[file] = selectors;
+    }
+  }
+  return filesData;
 }
 
 /**
- * @param {function()} cb
+ * @param {string|Array<string>} glob
+ * @param {string=} cwd
+ * @return {!Promise<Object>}
  */
-function getZindex(cb) {
-  const filesData = Object.create(null);
-  // Don't return the stream here since we do a `writeFileSync`
-  getZindexStream('{css,src,extensions}/**/*.css')
-    .on('data', (chunk) => {
-      filesData[chunk.name] = chunk.selectors;
-    })
-    .on('end', () => {
-      const rows = createTable(filesData);
-      rows.unshift.apply(rows, tableHeaders);
-      const tbl = table(rows, tableOptions);
-      fs.writeFileSync('css/Z_INDEX.md', tbl);
-      cb();
+function getZindexChainsInJs(glob, cwd = '.') {
+  return new Promise((resolve) => {
+    const files = globby.sync(glob, {cwd}).map((file) => path.join(cwd, file));
+
+    const filesIncludingString = getStdout(
+      ['grep -irl "z-*index"', ...files].join(' ')
+    )
+      .trim()
+      .split('\n');
+
+    const result = {};
+
+    const {stderr, stdout} = jscodeshiftAsync([
+      '--dry',
+      '--no-babel',
+      `--transform=${__dirname}/jscodeshift/collect-zindex.js`,
+      ...filesIncludingString,
+    ]);
+
+    stderr.on('data', (data) => {
+      throw new Error(data.toString());
+    });
+
+    stdout.on('data', (data) => {
+      const reportLine = getJscodeshiftReport(data.toString());
+
+      if (!reportLine) {
+        return;
+      }
+
+      const [filename, report] = reportLine;
+      const relative = path.relative(cwd, filename);
+
+      logChecking(filename);
+
+      try {
+        const reportParsed = JSON.parse(report);
+
+        if (reportParsed.length) {
+          result[relative] = reportParsed.sort(sortedByEntryKey);
+        }
+      } catch (_) {}
     });
+
+    stdout.on('close', () => {
+      resolve(result);
+    });
+  });
+}
+
+/**
+ * Entry point for amp get-zindex
+ */
+async function getZindex() {
+  logLocalDev('...');
+
+  const filesData = Object.assign(
+    {},
+    ...(await Promise.all([
+      getZindexSelectors('{css,src,extensions}/**/*.css'),
+      getZindexChainsInJs([
+        '{3p,src,extensions}/**/*.js',
+        '!extensions/**/test/**/*.js',
+        '!extensions/**/storybook/**/*.js',
+      ]),
+    ]))
+  );
+
+  logOnSameLineLocalDev(
+    'Generating z-index table from',
+    magenta(`${Object.keys(filesData).length} files`)
+  );
+
+  const filename = 'css/Z_INDEX.md';
+  const rows = [...tableHeaders, ...createTable(filesData)];
+  const table = textTable(rows, tableOptions);
+  const output = await prettierFormat(filename, `${preamble}\n\n${table}`);
+
+  await writeDiffOrFail(
+    'get-zindex',
+    filename,
+    output,
+    /* gitDiffFlags */ [
+      '-U1',
+      // Rows are formatted to align, so rows with unchanged content may change
+      // in whitespace, forcing the diff to contain the entire table.
+      '--ignore-space-change',
+    ]
+  );
+}
+
+/**
+ * @param {string} filename
+ * @param {string} output
+ * @return {Promise<string>}
+ */
+async function prettierFormat(filename, output) {
+  return prettier.format(output, {
+    ...(await prettier.resolveConfig(filename)),
+    parser: 'markdown',
+  });
 }
 
 module.exports = {
   createTable,
   getZindex,
-  getZindexStream,
+  getZindexSelectors,
+  getZindexChainsInJs,
 };
 
 getZindex.description =
   'Runs through all css files of project to gather z-index values';
+
+getZindex.flags = {
+  'fix': 'Write to file',
+};
diff --git a/build-system/tasks/get-zindex/jscodeshift/collect-zindex.js b/build-system/tasks/get-zindex/jscodeshift/collect-zindex.js
new file mode 100644
index 0000000000000..d076d474883c0
--- /dev/null
+++ b/build-system/tasks/get-zindex/jscodeshift/collect-zindex.js
@@ -0,0 +1,131 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const zIndexRegExp = /^z-?index$/i;
+
+/**
+ * @param {Node} node
+ * @return {string}
+ */
+function getCallExpressionZIndexValue(node) {
+  for (let i = 1; i < node.arguments.length; i++) {
+    const argument = node.arguments[i];
+    const previous = node.arguments[i - 1];
+    if (
+      argument.type.endsWith('Literal') &&
+      argument.value !== '' &&
+      zIndexRegExp.test(previous.value)
+    ) {
+      return argument.value;
+    }
+  }
+}
+
+/**
+ * @param {string} file
+ * @param {Node} node
+ * @return {string}
+ */
+function source(file, node) {
+  const {end, start} = node;
+  return file.source.substr(start, end - start);
+}
+
+/**
+ * @param {string} file
+ * @param {string} path
+ * @return {string}
+ */
+function chainId(file, path) {
+  let propertyChain = '';
+  let at = path;
+
+  while (at && at.value && at.value.type.endsWith('Property')) {
+    const part = source(file, at.value.key);
+    if (at.value.key.type === 'Identifier') {
+      propertyChain = `.${part}` + propertyChain;
+    } else {
+      propertyChain = `[${part}]` + propertyChain;
+    }
+    at = at.parent && at.parent.parent;
+  }
+
+  while (
+    at &&
+    at.parent &&
+    at.value.type !== 'CallExpression' &&
+    at.value.type !== 'VariableDeclarator' &&
+    at.value.type !== 'AssignmentExpression' &&
+    at.value.type !== 'JSXAttribute' &&
+    at.value.type !== 'Program'
+  ) {
+    at = at.parent;
+  }
+
+  if (at.value.type === 'JSXAttribute') {
+    const openingElement = source(file, at.parent.value.name);
+    return `<${openingElement} />`;
+  }
+
+  if (at.value.type === 'CallExpression') {
+    return source(file, at.value.callee);
+  }
+
+  if (at.value.type === 'AssignmentExpression') {
+    return source(file, at.value.left) + propertyChain;
+  }
+
+  if (at.value.type === 'VariableDeclarator') {
+    return source(file, at.value.id) + propertyChain;
+  }
+
+  return '(unknown)';
+}
+
+module.exports = function (file, api) {
+  const j = api.jscodeshift;
+
+  const report = [];
+
+  j(file.source)
+    .find(
+      j.ObjectProperty,
+      (node) =>
+        node.key &&
+        node.value.type.endsWith('Literal') &&
+        node.value.value !== '' &&
+        zIndexRegExp.test(node.key.value || node.key.name)
+    )
+    .forEach((path) => {
+      report.push([chainId(file, path.parent.parent), path.value.value.value]);
+    });
+
+  j(file.source)
+    .find(
+      j.CallExpression,
+      (node) => getCallExpressionZIndexValue(node) != null
+    )
+    .forEach((path) => {
+      report.push([
+        chainId(file, path),
+        getCallExpressionZIndexValue(path.value),
+      ]);
+    });
+
+  api.report(JSON.stringify(report));
+
+  return file.source;
+};
diff --git a/build-system/tasks/get-zindex/test-0.js b/build-system/tasks/get-zindex/test-0.js
new file mode 100644
index 0000000000000..917cc10b22210
--- /dev/null
+++ b/build-system/tasks/get-zindex/test-0.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-disable */
+
+const declarator = {
+  zIndex: 0,
+};
+
+assignment = {
+  'z-index': 'auto',
+};
+
+const emptyZindexIsIgnored = {
+  zIndex: '',
+};
+
+setStyle(foo, 'z-index', 15);
+setStyles(bar, {foo: 'bar', 'z-index': 9999});
+
+<div style={{zIndex: 'initial'}}></div>;
diff --git a/build-system/tasks/get-zindex/test-1.js b/build-system/tasks/get-zindex/test-1.js
new file mode 100644
index 0000000000000..1c98aea8e10e9
--- /dev/null
+++ b/build-system/tasks/get-zindex/test-1.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-disable */
+
+<Component style={{'z-index': 12345}} />;
+<Component style={{'z-index': thisShouldBeIgnoredBecauseItsNotALiteral}} />;
diff --git a/build-system/tasks/get-zindex/test-2.css b/build-system/tasks/get-zindex/test-2.css
index 8db19a008a8d3..646d0ed6fa162 100644
--- a/build-system/tasks/get-zindex/test-2.css
+++ b/build-system/tasks/get-zindex/test-2.css
@@ -28,3 +28,11 @@
 .selector-4 {
   z-index: 80;
 }
+
+.selector-5 {
+  z-index: initial;
+}
+
+.selector-6 {
+  z-index: auto;
+}
diff --git a/build-system/tasks/get-zindex/test.js b/build-system/tasks/get-zindex/test.js
deleted file mode 100644
index 3b63946c1325e..0000000000000
--- a/build-system/tasks/get-zindex/test.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright 2016 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 m = require('./');
-const test = require('ava');
-
-const result = {
-  'test.css': {
-    '.selector-1': '1',
-    '.selector-2': '0',
-    '.selector-3': '99',
-  },
-  'test-2.css': {
-    '.selector-4': '80',
-  },
-};
-
-test.cb('collects selectors', (t) => {
-  const data = Object.create(null);
-  const testFiles = `${__dirname}/*.css`;
-  m.getZindexStream(testFiles)
-    .on('data', (chunk) => {
-      data[chunk.name] = chunk.selectors;
-    })
-    .on('end', () => {
-      t.deepEqual(data, result);
-      t.end();
-    });
-});
-
-test('sync - create array of arrays with z index order', (t) => {
-  t.plan(1);
-  const table = m.createTable(result);
-  const expected = [
-    ['.selector-2', '0', 'test.css'],
-    ['.selector-1', '1', 'test.css'],
-    ['.selector-4', '80', 'test-2.css'],
-    ['.selector-3', '99', 'test.css'],
-  ];
-  t.deepEqual(table, expected);
-});
diff --git a/build-system/tasks/helpers.js b/build-system/tasks/helpers.js
index 909eeca9863b0..835dc54e9e2b3 100644
--- a/build-system/tasks/helpers.js
+++ b/build-system/tasks/helpers.js
@@ -15,36 +15,35 @@
  */
 
 const argv = require('minimist')(process.argv.slice(2));
-const babelify = require('babelify');
-const browserify = require('browserify');
-const buffer = require('vinyl-buffer');
 const debounce = require('debounce');
-const del = require('del');
-const file = require('gulp-file');
+const esbuild = require('esbuild');
+/** @type {Object} */
+const experimentDefines = require('../global-configs/experiments-const.json');
 const fs = require('fs-extra');
-const gulp = require('gulp');
-const gulpIf = require('gulp-if');
-const gulpWatch = require('gulp-watch');
-const istanbul = require('gulp-istanbul');
-const log = require('fancy-log');
+const magicstring = require('magic-string');
+const open = require('open');
 const path = require('path');
-const regexpSourcemaps = require('gulp-regexp-sourcemaps');
-const rename = require('gulp-rename');
-const source = require('vinyl-source-stream');
-const sourcemaps = require('gulp-sourcemaps');
-const watchify = require('watchify');
+const Remapping = require('@ampproject/remapping');
+const terser = require('terser');
 const wrappers = require('../compile/compile-wrappers');
 const {
   VERSION: internalRuntimeVersion,
 } = require('../compile/internal-version');
 const {applyConfig, removeConfig} = require('./prepend-global/index.js');
 const {closureCompile} = require('../compile/compile');
-const {EventEmitter} = require('events');
-const {green, red, cyan} = require('ansi-colors');
-const {isTravisBuild} = require('../common/travis');
+const {cyan, green, red} = require('../common/colors');
+const {getEsbuildBabelPlugin} = require('../common/esbuild-babel');
+const {isCiBuild} = require('../common/ci');
 const {jsBundles} = require('../compile/bundles.config');
+const {log, logLocalDev} = require('../common/logging');
 const {thirdPartyFrames} = require('../test-configs/config');
-const {transpileTs} = require('../compile/typescript');
+const {watch} = require('chokidar');
+
+/** @type {Remapping.default} */
+const remapping = /** @type {*} */ (Remapping);
+
+/** @type {magicstring.default} */
+const MagicString = /** @type {*} */ (magicstring);
 
 /**
  * Tasks that should print the `--nobuild` help text.
@@ -67,6 +66,10 @@ const EXTENSION_BUNDLE_MAP = {
     'third_party/vega/vega.js',
   ],
   'amp-inputmask.js': ['third_party/inputmask/bundle.js'],
+  'amp-date-picker.js': ['third_party/react-dates/bundle.js'],
+  'amp-shadow-dom-polyfill.js': [
+    'node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd.install.js',
+  ],
 };
 
 /**
@@ -76,8 +79,6 @@ const UNMINIFIED_TARGETS = ['alp.max', 'amp-inabox', 'amp-shadow', 'amp'];
 
 /**
  * List of minified targets to which AMP_CONFIG should be written
- * Note: keep this list in sync with release script. Contact @ampproject/wg-infra
- * for details.
  */
 const MINIFIED_TARGETS = ['alp', 'amp4ads-v0', 'shadow-v0', 'v0'];
 
@@ -91,6 +92,12 @@ const hostname3p = argv.hostname3p || '3p.ampproject.net';
  */
 const watchDebounceDelay = 1000;
 
+/**
+ * Stores esbuild's watch mode rebuilders.
+ * @private @const {!Map<string, {rebuild: function():!Promise<void>}>}
+ */
+const watchedTargets = new Map();
+
 /**
  * @param {!Object} jsBundles
  * @param {string} name
@@ -107,7 +114,9 @@ function doBuildJs(jsBundles, name, extraOptions) {
       {...target.options, ...extraOptions}
     );
   } else {
-    return Promise.reject(red('Error:'), 'Could not find', cyan(name));
+    return Promise.reject(
+      [red('Error:'), 'Could not find', cyan(name)].join(' ')
+    );
   }
 }
 
@@ -118,25 +127,25 @@ function doBuildJs(jsBundles, name, extraOptions) {
  */
 async function bootstrapThirdPartyFrames(options) {
   const startTime = Date.now();
-  const promises = [];
-  const {watch, minify} = options;
-  thirdPartyFrames.forEach((frameObject) => {
-    promises.push(
-      thirdPartyBootstrap(frameObject.max, frameObject.min, options)
-    );
-  });
-  if (watch) {
+  if (options.watch) {
     thirdPartyFrames.forEach((frameObject) => {
-      const watchFunc = () => {
-        thirdPartyBootstrap(frameObject.max, frameObject.min, options);
+      const watchFunc = async () => {
+        await thirdPartyBootstrap(frameObject.max, frameObject.min, options);
       };
-      gulpWatch(frameObject.max, debounce(watchFunc, watchDebounceDelay));
+      watch(frameObject.max).on(
+        'change',
+        debounce(watchFunc, watchDebounceDelay)
+      );
     });
   }
-  await Promise.all(promises);
+  await Promise.all(
+    thirdPartyFrames.map(async (frameObject) => {
+      await thirdPartyBootstrap(frameObject.max, frameObject.min, options);
+    })
+  );
   endBuildStep(
     'Bootstrapped 3p frames into',
-    `dist.3p/${minify ? internalRuntimeVersion : 'current'}/`,
+    `dist.3p/${options.minify ? internalRuntimeVersion : 'current'}/`,
     startTime
   );
 }
@@ -145,6 +154,7 @@ async function bootstrapThirdPartyFrames(options) {
  * Compile and optionally minify the core runtime.
  *
  * @param {!Object} options
+ * @return {Promise<void>}
  */
 async function compileCoreRuntime(options) {
   await doBuildJs(jsBundles, 'amp.js', options);
@@ -162,20 +172,20 @@ async function compileAllJs(options) {
   if (minify) {
     log('Minifying multi-pass JS with', cyan('closure-compiler') + '...');
   } else {
-    log('Compiling JS with', cyan('browserify') + '...');
+    log('Compiling JS with', cyan('esbuild'), 'and', cyan('babel') + '...');
   }
   const startTime = Date.now();
   await Promise.all([
     minify ? Promise.resolve() : doBuildJs(jsBundles, 'polyfills.js', options),
     doBuildJs(jsBundles, 'alp.max.js', options),
     doBuildJs(jsBundles, 'examiner.max.js', options),
-    doBuildJs(jsBundles, 'ww.max.js', options),
     doBuildJs(jsBundles, 'integration.js', options),
     doBuildJs(jsBundles, 'ampcontext-lib.js', options),
     doBuildJs(jsBundles, 'iframe-transport-client-lib.js', options),
     doBuildJs(jsBundles, 'recaptcha.js', options),
     doBuildJs(jsBundles, 'amp-viewer-host.max.js', options),
     doBuildJs(jsBundles, 'video-iframe-integration.js', options),
+    doBuildJs(jsBundles, 'amp-story-entry-point.js', options),
     doBuildJs(jsBundles, 'amp-story-player.js', options),
     doBuildJs(jsBundles, 'amp-inabox-host.js', options),
     doBuildJs(jsBundles, 'amp-shadow.js', options),
@@ -190,44 +200,105 @@ async function compileAllJs(options) {
 }
 
 /**
- * Allows (ap|pre)pending to the already compiled, minified JS file
- *
+ * Allows pending inside the compile wrapper to the already compiled, minified JS file.
  * @param {string} srcFilename Name of the JS source file
  * @param {string} destFilePath File path to the compiled JS file
+ * @param {?Object} options
  */
-function appendToCompiledFile(srcFilename, destFilePath) {
+function combineWithCompiledFile(srcFilename, destFilePath, options) {
   const bundleFiles = EXTENSION_BUNDLE_MAP[srcFilename];
-  if (bundleFiles) {
-    const newSource = concatFilesToString(bundleFiles.concat([destFilePath]));
-    fs.writeFileSync(destFilePath, newSource, 'utf8');
-  } else if (srcFilename == 'amp-date-picker.js') {
-    // For amp-date-picker, we inject the react-dates bundle after compile
-    // to avoid CC from messing with browserify's module boilerplate.
-    const file = fs.readFileSync(destFilePath, 'utf8');
-    const firstLineBreak = file.indexOf('\n');
-    const wrapperOpen = file.substr(0, firstLineBreak + 1);
-    const reactDates = fs.readFileSync(
-      'third_party/react-dates/bundle.js',
-      'utf8'
-    );
-    // Inject the bundle inside the standard AMP wrapper (after the first line).
-    const newSource = [
-      wrapperOpen,
-      reactDates,
-      file.substr(firstLineBreak + 1),
-    ].join('\n');
-    fs.writeFileSync(destFilePath, newSource, 'utf8');
+  if (!bundleFiles) {
+    return;
   }
+  const bundle = new MagicString.Bundle({
+    separator: '\n',
+  });
+  // We need to inject the code _inside_ the extension wrapper
+  const destFileName = path.basename(destFilePath);
+  /**
+   * TODO (rileyajones) This should be import('magic-string').MagicStringOptions but
+   * is invalid until https://github.com/Rich-Harris/magic-string/pull/183
+   * is merged.
+   * @type {Object}
+   */
+  const mapMagicStringOptions = {filename: destFileName};
+  const contents = new MagicString(
+    fs.readFileSync(destFilePath, 'utf8'),
+    mapMagicStringOptions
+  );
+  const map = JSON.parse(fs.readFileSync(`${destFilePath}.map`, 'utf8'));
+  const {sourceRoot} = map;
+  map.sourceRoot = undefined;
+
+  // The wrapper may have been minified further. Search backwards from the
+  // expected <%=contents%> location to find the start of the `{` in the
+  // wrapping function.
+  const wrapperIndex = options.wrapper.indexOf('<%= contents %>');
+  const index = contents.original.lastIndexOf('{', wrapperIndex) + 1;
+
+  const wrapperOpen = contents.snip(0, index);
+  const remainingContents = contents.snip(index, contents.length());
+
+  bundle.addSource(wrapperOpen);
+  for (const bundleFile of bundleFiles) {
+    const contents = fs.readFileSync(bundleFile, 'utf8');
+    /**
+     * TODO (rileyajones) This should be import('magic-string').MagicStringOptions but
+     * is invalid until https://github.com/Rich-Harris/magic-string/pull/183
+     * is merged.
+     * @type {Object}
+     */
+    const bundleMagicStringOptions = {filename: bundleFile};
+    bundle.addSource(new MagicString(contents, bundleMagicStringOptions));
+    bundle.append(MODULE_SEPARATOR);
+  }
+  bundle.addSource(remainingContents);
+
+  const bundledMap = bundle.generateDecodedMap({
+    file: destFileName,
+    hires: true,
+  });
+
+  const remapped = remapping(
+    bundledMap,
+    (file) => {
+      if (file === destFileName) {
+        return map;
+      }
+      return null;
+    },
+    !argv.full_sourcemaps
+  );
+  remapped.sourceRoot = sourceRoot;
+
+  fs.writeFileSync(destFilePath, bundle.toString(), 'utf8');
+  fs.writeFileSync(`${destFilePath}.map`, remapped.toString(), 'utf8');
 }
 
+/**
+ * @param {string} name
+ * @return {string}
+ */
 function toEsmName(name) {
   return name.replace(/\.js$/, '.mjs');
 }
 
+/**
+ * @param {string} name
+ * @return {string}
+ */
 function maybeToEsmName(name) {
   return argv.esm ? toEsmName(name) : name;
 }
 
+/**
+ * @param {string} name
+ * @return {string}
+ */
+function maybeToNpmEsmName(name) {
+  return argv.esm ? name.replace(/\.js$/, '.module.js') : name;
+}
+
 /**
  * Minifies a given JavaScript file entry point.
  * @param {string} srcDir
@@ -241,64 +312,47 @@ async function compileMinifiedJs(srcDir, srcFilename, destDir, options) {
   const entryPoint = path.join(srcDir, srcFilename);
   const minifiedName = maybeToEsmName(options.minifiedName);
 
-  if (options.watch) {
-    const watchFunc = async () => {
-      const compileComplete = await doCompileMinifiedJs(
-        /* continueOnError */ true
-      );
-      if (options.onWatchBuild) {
-        options.onWatchBuild(compileComplete);
-      }
-    };
-    gulpWatch(entryPoint, debounce(watchFunc, watchDebounceDelay));
+  options.errored = false;
+  await closureCompile(entryPoint, destDir, minifiedName, options, timeInfo);
+  // If an incremental watch build fails, simply return.
+  if (options.watch && options.errored) {
+    return;
   }
 
-  async function doCompileMinifiedJs(continueOnError) {
-    options.continueOnError = continueOnError;
-    options.errored = false;
-    await closureCompile(entryPoint, destDir, minifiedName, options, timeInfo);
-
-    // If an incremental watch build fails, simply return.
-    if (options.errored) {
-      return;
-    }
-
-    const destPath = path.join(destDir, minifiedName);
-    appendToCompiledFile(srcFilename, destPath);
-    fs.writeFileSync(path.join(destDir, 'version.txt'), internalRuntimeVersion);
-    if (options.latestName) {
-      fs.copySync(
-        destPath,
-        path.join(destDir, maybeToEsmName(options.latestName))
-      );
-    }
+  const destPath = path.join(destDir, minifiedName);
+  combineWithCompiledFile(srcFilename, destPath, options);
+  fs.writeFileSync(path.join(destDir, 'version.txt'), internalRuntimeVersion);
+  if (options.latestName) {
+    fs.copySync(
+      destPath,
+      path.join(destDir, maybeToEsmName(options.latestName))
+    );
+  }
 
-    let name = minifiedName;
-    if (options.latestName) {
-      name += ` → ${maybeToEsmName(options.latestName)}`;
-    }
-    endBuildStep('Minified', name, timeInfo.startTime);
-
-    const target = path.basename(minifiedName, path.extname(minifiedName));
-    if (!argv.noconfig && MINIFIED_TARGETS.includes(target)) {
-      await applyAmpConfig(
-        maybeToEsmName(`${destDir}/${minifiedName}`),
-        /* localDev */ options.fortesting,
-        /* fortesting */ options.fortesting
-      );
-    }
+  let name = minifiedName;
+  if (options.latestName) {
+    name += ` → ${maybeToEsmName(options.latestName)}`;
+  }
+  endBuildStep('Minified', name, timeInfo.startTime);
+
+  const target = path.basename(minifiedName, path.extname(minifiedName));
+  if (!argv.noconfig && MINIFIED_TARGETS.includes(target)) {
+    await applyAmpConfig(
+      maybeToEsmName(`${destDir}/${minifiedName}`),
+      /* localDev */ options.fortesting,
+      /* fortesting */ options.fortesting
+    );
   }
-  await doCompileMinifiedJs(options.continueOnError);
 }
 
 /**
- * Handles a browserify bundling error
+ * Handles a bundling error
  * @param {Error} err
  * @param {boolean} continueOnError
  * @param {string} destFilename
  */
 function handleBundleError(err, continueOnError, destFilename) {
-  let message = err;
+  let message = err.toString();
   if (err.stack) {
     // Drop the node_modules call stack, which begins with '    at'.
     message = err.stack.replace(/    at[^]*/, '').trim();
@@ -308,144 +362,289 @@ function handleBundleError(err, continueOnError, destFilename) {
   if (continueOnError) {
     log(red('ERROR:'), reasonMessage);
   } else {
-    const reason = new Error(reasonMessage);
-    reason.showStack = false;
-    new EventEmitter().emit('error', reason);
+    throw new Error(reasonMessage);
   }
 }
 
 /**
- * Performs the final steps after Browserify bundles a JS file
+ * Performs the final steps after a JS file is bundled and optionally minified
+ * with esbuild and babel.
  * @param {string} srcFilename
  * @param {string} destDir
  * @param {string} destFilename
  * @param {?Object} options
+ * @param {number} startTime
  */
-function finishBundle(srcFilename, destDir, destFilename, options) {
-  appendToCompiledFile(srcFilename, path.join(destDir, destFilename));
+async function finishBundle(
+  srcFilename,
+  destDir,
+  destFilename,
+  options,
+  startTime
+) {
+  combineWithCompiledFile(
+    srcFilename,
+    path.join(destDir, destFilename),
+    options
+  );
 
-  if (options.latestName) {
-    // "amp-foo-latest.js" -> "amp-foo-latest.max.js"
-    const latestMaxName = options.latestName.split('.js')[0] + '.max.js';
-    // Copy amp-foo-0.1.js to amp-foo-latest.max.js.
+  const logPrefix = options.minify ? 'Minified' : 'Compiled';
+  let {latestName} = options;
+  if (latestName) {
+    if (!options.minify) {
+      latestName = latestName.replace(/\.js$/, '.max.js');
+    }
     fs.copySync(
       path.join(destDir, options.toName),
-      path.join(destDir, latestMaxName)
+      path.join(destDir, latestName)
+    );
+    endBuildStep(logPrefix, `${destFilename} → ${latestName}`, startTime);
+  } else {
+    const loggingName =
+      options.npm && !destFilename.startsWith('amp-')
+        ? `${options.name} → ${destFilename}`
+        : destFilename;
+    endBuildStep(logPrefix, loggingName, startTime);
+  }
+
+  const targets = options.minify ? MINIFIED_TARGETS : UNMINIFIED_TARGETS;
+  const target = path.basename(destFilename, path.extname(destFilename));
+  if (targets.includes(target)) {
+    await applyAmpConfig(
+      path.join(destDir, destFilename),
+      /* localDev */ true,
+      /* fortesting */ options.fortesting
     );
   }
 }
 
 /**
- * Transforms a given JavaScript file entry point with browserify, and watches
- * it for changes (if required).
+ * Transforms a given JavaScript file entry point with esbuild and babel, and
+ * watches it for changes (if required).
  * @param {string} srcDir
  * @param {string} srcFilename
  * @param {string} destDir
  * @param {?Object} options
  * @return {!Promise}
  */
-function compileUnminifiedJs(srcDir, srcFilename, destDir, options) {
+async function compileUnminifiedJs(srcDir, srcFilename, destDir, options) {
+  const startTime = Date.now();
   const entryPoint = path.join(srcDir, srcFilename);
   const destFilename = options.toName || srcFilename;
-  const wrapper = options.wrapper || wrappers.none;
-  const devWrapper = wrapper.replace('<%= contents %>', '$1');
-
-  // TODO: @jonathantyng remove browserifyOptions #22757
-  const browserifyOptions = {
-    entries: entryPoint,
-    debug: true,
-    fast: true,
-    ...options.browserifyOptions,
-  };
+  const destFile = path.join(destDir, destFilename);
 
-  let bundler = browserify(browserifyOptions).transform(babelify, {
-    caller: {name: 'unminified'},
-    global: true,
-  });
-
-  if (options.watch) {
-    const watchFunc = () => {
-      const bundleComplete = performBundle(/* continueOnError */ true);
-      if (options.onWatchBuild) {
-        options.onWatchBuild(bundleComplete);
-      }
-    };
-    bundler = watchify(bundler);
-    bundler.on('update', debounce(watchFunc, watchDebounceDelay));
+  if (watchedTargets.has(entryPoint)) {
+    return watchedTargets.get(entryPoint).rebuild();
   }
 
   /**
-   * @param {boolean} continueOnError
-   * @return {Promise}
+   * Splits up the wrapper to compute the banner and footer
+   * @return {Object}
    */
-  function performBundle(continueOnError) {
-    let startTime;
-    return toPromise(
-      bundler
-        .bundle()
-        .once('readable', () => (startTime = Date.now()))
-        .on('error', (err) =>
-          handleBundleError(err, continueOnError, destFilename)
-        )
-        .pipe(source(srcFilename))
-        .pipe(buffer())
-        .pipe(gulpIf(argv.coverage, istanbul()))
-        .pipe(sourcemaps.init({loadMaps: true}))
-        .pipe(
-          regexpSourcemaps(
-            /\$internalRuntimeVersion\$/g,
-            internalRuntimeVersion,
-            'runtime-version'
+  function splitWrapper() {
+    const wrapper = options.wrapper || wrappers.none;
+    const sentinel = '<%= contents %>';
+    const start = wrapper.indexOf(sentinel);
+    return {
+      banner: {js: wrapper.slice(0, start)},
+      footer: {js: wrapper.slice(start + sentinel.length)},
+    };
+  }
+
+  const {banner, footer} = splitWrapper();
+  const babelPlugin = getEsbuildBabelPlugin(
+    'unminified',
+    /* enableCache */ true
+  );
+
+  const buildResult = await esbuild
+    .build({
+      entryPoints: [entryPoint],
+      bundle: true,
+      sourcemap: true,
+      define: experimentDefines,
+      outfile: destFile,
+      plugins: [babelPlugin],
+      banner,
+      footer,
+      incremental: !!options.watch,
+      logLevel: 'silent',
+    })
+    .then((result) => {
+      finishBundle(srcFilename, destDir, destFilename, options, startTime);
+      return result;
+    })
+    .catch((err) => handleBundleError(err, !!options.watch, destFilename));
+
+  if (options.watch) {
+    watchedTargets.set(entryPoint, {
+      rebuild: async () => {
+        const time = Date.now();
+        const {rebuild} = /** @type {Required<esbuild.BuildResult>} */ (
+          buildResult
+        );
+
+        const buildPromise = rebuild()
+          .then(() =>
+            finishBundle(srcFilename, destDir, destFilename, options, time)
           )
-        )
-        .pipe(regexpSourcemaps(/([^]+)/, devWrapper, 'wrapper'))
-        .pipe(rename(destFilename))
-        .pipe(sourcemaps.write('.'))
-        .pipe(gulp.dest(destDir))
-        .on('end', () =>
-          finishBundle(srcFilename, destDir, destFilename, options)
-        )
-    )
-      .then(() => {
-        let name = destFilename;
-        if (options.latestName) {
-          const latestMaxName = options.latestName.split('.js')[0] + '.max.js';
-          name = `${name} → ${latestMaxName}`;
-        }
-        endBuildStep('Compiled', name, startTime);
-      })
-      .then(() => {
-        const target = path.basename(destFilename, path.extname(destFilename));
-        if (UNMINIFIED_TARGETS.includes(target)) {
-          return applyAmpConfig(
-            `${destDir}/${destFilename}`,
-            /* localDev */ true,
-            /* fortesting */ options.fortesting
+          .catch((err) =>
+            handleBundleError(err, /* continueOnError */ true, destFilename)
           );
-        }
+        options?.onWatchBuild(buildPromise);
+        await buildPromise;
+      },
+    });
+  }
+}
+
+/**
+ * Transforms a given JavaScript file entry point with esbuild and babel, and
+ * watches it for changes (if required).
+ * Used by 3p iframe vendors.
+ * @param {string} srcDir
+ * @param {string} srcFilename
+ * @param {string} destDir
+ * @param {?Object} options
+ * @return {!Promise}
+ */
+async function compileJsWithEsbuild(srcDir, srcFilename, destDir, options) {
+  const startTime = Date.now();
+  const entryPoint = path.join(srcDir, srcFilename);
+  const fileName = options.minify ? options.minifiedName : options.toName;
+  const destFilename = options.npm ? fileName : maybeToEsmName(fileName);
+  const destFile = path.join(destDir, destFilename);
+
+  if (watchedTargets.has(entryPoint)) {
+    return watchedTargets.get(entryPoint).rebuild();
+  }
+
+  const babelPlugin = getEsbuildBabelPlugin(
+    options.minify ? 'minified' : 'unminified',
+    /* enableCache */ true
+  );
+  const plugins = [babelPlugin];
+
+  if (options.remapDependencies) {
+    plugins.unshift(remapDependenciesPlugin());
+  }
+
+  let result = null;
+
+  /**
+   * @param {number} time
+   */
+  async function build(time) {
+    if (!result) {
+      result = await esbuild.build({
+        entryPoints: [entryPoint],
+        bundle: true,
+        sourcemap: true,
+        outfile: destFile,
+        plugins,
+        minify: options.minify,
+        format: options.outputFormat || undefined,
+        target: argv.esm ? 'es6' : 'es5',
+        incremental: !!options.watch,
+        logLevel: 'silent',
+        external: options.externalDependencies,
       });
+    } else {
+      result = await result.rebuild();
+    }
+    await minifyWithTerser(destDir, destFilename, options);
+    await finishBundle(srcFilename, destDir, destFilename, options, time);
   }
 
-  return performBundle(options.continueOnError);
+  /**
+   * Generates a plugin to remap the dependencies of a JS bundle.
+   * @return {Object}
+   */
+  function remapDependenciesPlugin() {
+    const remapDependencies = {__proto__: null, ...options.remapDependencies};
+    const external = options.externalDependencies;
+    return {
+      name: 'remap-dependencies',
+      setup(build) {
+        build.onResolve({filter: /.*/}, (args) => {
+          const dep = args.path;
+          const remap = remapDependencies[dep];
+          if (remap) {
+            const isExternal = external.includes(remap);
+            return {
+              path: isExternal ? remap : require.resolve(remap),
+              external: isExternal,
+            };
+          }
+        });
+      },
+    };
+  }
+
+  await build(startTime).catch((err) =>
+    handleBundleError(err, !!options.watch, destFilename)
+  );
+
+  if (options.watch) {
+    watchedTargets.set(entryPoint, {
+      rebuild: async () => {
+        const time = Date.now();
+        const buildPromise = build(time).catch((err) =>
+          handleBundleError(err, !!options.watch, destFilename)
+        );
+        if (options.onWatchBuild) {
+          options.onWatchBuild(buildPromise);
+        }
+        await buildPromise;
+      },
+    });
+  }
 }
 
 /**
- * Transpiles from TypeScript into intermediary files before compilation and
- * deletes them afterwards.
+ * Minify the code with Terser. Only used by the ESBuild.
  *
- * @param {string} srcDir Path to the src directory
- * @param {string} srcFilename Name of the JS source file
- * @param {string} destDir Destination folder for output script
+ * @param {string} destDir
+ * @param {string} destFilename
  * @param {?Object} options
  * @return {!Promise}
  */
-async function compileTs(srcDir, srcFilename, destDir, options) {
-  options = options || {};
-  await transpileTs(srcDir, srcFilename);
-  await compileJs(srcDir, srcFilename, destDir, options);
-  del.sync(path.join(srcDir, '**/*.js'));
+async function minifyWithTerser(destDir, destFilename, options) {
+  if (!options.minify) {
+    return;
+  }
+
+  const filename = path.join(destDir, destFilename);
+  const terserOptions = {
+    mangle: true,
+    compress: true,
+    output: {
+      beautify: !!argv.pretty_print,
+      comments: /\/*/,
+      // eslint-disable-next-line google-camelcase/google-camelcase
+      keep_quoted_props: true,
+    },
+    sourceMap: true,
+  };
+  const minified = await terser.minify(
+    fs.readFileSync(filename, 'utf8'),
+    terserOptions
+  );
+  const remapped = remapping(
+    [minified.map, fs.readFileSync(`${filename}.map`, 'utf8')],
+    () => null,
+    !argv.full_sourcemaps
+  );
+  fs.writeFileSync(filename, minified.code);
+  fs.writeFileSync(`${filename}.map`, remapped.toString());
 }
 
+/**
+ * The set of entrypoints currently watched by compileJs.
+ * @type {Set<string>}
+ */
+const watchedEntryPoints = new Set();
+
 /**
  * Bundles (max) or compiles (min) a given JavaScript file entry point.
  *
@@ -457,16 +656,40 @@ async function compileTs(srcDir, srcFilename, destDir, options) {
  */
 async function compileJs(srcDir, srcFilename, destDir, options) {
   options = options || {};
-  if (options.minify) {
-    return await compileMinifiedJs(srcDir, srcFilename, destDir, options);
-  } else {
-    return await compileUnminifiedJs(srcDir, srcFilename, destDir, options);
+  const entryPoint = path.join(srcDir, srcFilename);
+  if (watchedEntryPoints.has(entryPoint)) {
+    return;
   }
+
+  if (options.watch) {
+    watchedEntryPoints.add(entryPoint);
+    const deps = await getDependencies(entryPoint, options);
+    const watchFunc = async () => {
+      await doCompileJs({...options, continueOnError: true});
+    };
+    watch(deps).on('change', debounce(watchFunc, watchDebounceDelay));
+  }
+
+  /**
+   * Actually performs the steps to compile the entry point.
+   * @param {Object} options
+   * @return {Promise<void>}
+   */
+  async function doCompileJs(options) {
+    const buildResult = options.minify
+      ? compileMinifiedJs(srcDir, srcFilename, destDir, options)
+      : compileUnminifiedJs(srcDir, srcFilename, destDir, options);
+    if (options.onWatchBuild) {
+      options.onWatchBuild(buildResult);
+    }
+    await buildResult;
+  }
+
+  await doCompileJs(options);
 }
 
 /**
- * Stops the timer for the given build step and prints the execution time,
- * unless we are on Travis.
+ * Stops the timer for the given build step and prints the execution time.
  * @param {string} stepName Name of the action, like 'Compiled' or 'Minified'
  * @param {string} targetName Name of the target, like a filename or path
  * @param {DOMHighResTimeStamp} startTime Start time of build step
@@ -500,15 +723,13 @@ function printConfigHelp(command) {
     cyan(argv.config === 'canary' ? 'canary' : 'prod'),
     green('AMP config.')
   );
-  if (!isTravisBuild()) {
-    log(
-      green('⤷ Use'),
-      cyan('--config={canary|prod}'),
-      green('with your'),
-      cyan(command),
-      green('command to specify which config to apply.')
-    );
-  }
+  logLocalDev(
+    green('⤷ Use'),
+    cyan('--config={canary|prod}'),
+    green('with your'),
+    cyan(command),
+    green('command to specify which config to apply.')
+  );
 }
 
 /**
@@ -516,7 +737,6 @@ function printConfigHelp(command) {
  */
 function printNobuildHelp() {
   for (const task of NOBUILD_HELP_TASKS) {
-    // eslint-disable-line local/no-for-of-statement
     if (argv._.includes(task)) {
       log(
         green('To skip building during future'),
@@ -524,7 +744,7 @@ function printNobuildHelp() {
         green('runs, use'),
         cyan('--nobuild'),
         green('with your'),
-        cyan(`gulp ${task}`),
+        cyan(`amp ${task}`),
         green('command.')
       );
       return;
@@ -532,9 +752,23 @@ function printNobuildHelp() {
   }
 }
 
+/**
+ * @param {string=} covPath
+ * @return {!Promise}
+ */
+async function maybePrintCoverageMessage(covPath = '') {
+  if (!argv.coverage || isCiBuild()) {
+    return;
+  }
+
+  const url = 'file://' + path.resolve(covPath);
+  log(green('INFO:'), 'Generated code coverage report at', cyan(url));
+  await open(url, {wait: false});
+}
+
 /**
  * Writes AMP_CONFIG to a runtime file. Optionally enables localDev mode and
- * fortesting mode. Called by "gulp build" and "gulp dist" while building
+ * fortesting mode. Called by "amp build" and "amp dist" while building
  * various runtime files.
  *
  * @param {string} targetFile File to which the config is to be written.
@@ -554,26 +788,12 @@ async function applyAmpConfig(targetFile, localDev, fortesting) {
       baseConfigFile,
       /* opt_localDev */ localDev,
       /* opt_localBranch */ true,
-      /* opt_branch */ false,
+      /* opt_branch */ undefined,
       /* opt_fortesting */ fortesting
     );
   });
 }
 
-/**
- * Synchronously concatenates the given files into a string.
- *
- * @param {Array<string>} files A list of file paths.
- * @return {string} The concatenated contents of the given files.
- */
-function concatFilesToString(files) {
-  return files
-    .map(function (filePath) {
-      return fs.readFileSync(filePath, 'utf8');
-    })
-    .join(MODULE_SEPARATOR);
-}
-
 /**
  * Copies frame.html to output folder, replaces js references to minified
  * copies, and generates symlink to it.
@@ -583,10 +803,14 @@ function concatFilesToString(files) {
  * @param {!Object} options
  * @return {!Promise}
  */
-function thirdPartyBootstrap(input, outputName, options) {
-  const {minify, fortesting} = options;
+async function thirdPartyBootstrap(input, outputName, options) {
+  const {fortesting, minify} = options;
+  const destDir = `dist.3p/${minify ? internalRuntimeVersion : 'current'}`;
+  await fs.ensureDir(destDir);
+
   if (!minify) {
-    return toPromise(gulp.src(input).pipe(gulp.dest('dist.3p/current')));
+    await fs.copy(input, `${destDir}/${path.basename(input)}`);
+    return;
   }
 
   // By default we use an absolute URL, that is independent of the
@@ -600,21 +824,12 @@ function thirdPartyBootstrap(input, outputName, options) {
   const html = fs
     .readFileSync(input, 'utf8')
     .replace(/\.\/integration\.js/g, integrationJs);
-  return toPromise(
-    file(outputName, html, {src: true})
-      .pipe(gulp.dest('dist.3p/' + internalRuntimeVersion))
-      .on('end', function () {
-        const aliasToLatestBuild = 'dist.3p/current-min';
-        if (fs.existsSync(aliasToLatestBuild)) {
-          fs.unlinkSync(aliasToLatestBuild);
-        }
-        fs.symlinkSync(
-          './' + internalRuntimeVersion,
-          aliasToLatestBuild,
-          'dir'
-        );
-      })
-  );
+  await fs.writeFile(`${destDir}/${outputName}`, html);
+  const aliasToLatestBuild = 'dist.3p/current-min';
+  if (fs.existsSync(aliasToLatestBuild)) {
+    fs.unlinkSync(aliasToLatestBuild);
+  }
+  fs.symlinkSync('./' + internalRuntimeVersion, aliasToLatestBuild, 'dir');
 }
 
 /**
@@ -633,30 +848,43 @@ function mkdirSync(path) {
 }
 
 /**
- * Returns a promise for readable
+ * Returns the list of dependencies for a given JS entrypoint by having esbuild
+ * generate a metafile for it. Uses the set of babel plugins that would've been
+ * used to compile the entrypoint.
  *
- * @param {*} readable
- * @return {Promise}
+ * @param {string} entryPoint
+ * @param {!Object} options
+ * @return {Promise<Array<string>>}
  */
-function toPromise(readable) {
-  return new Promise(function (resolve, reject) {
-    readable.on('error', reject).on('end', resolve);
+async function getDependencies(entryPoint, options) {
+  const caller = options.minify ? 'minified' : 'unminified';
+  const babelPlugin = getEsbuildBabelPlugin(caller, /* enableCache */ true);
+  const result = await esbuild.build({
+    entryPoints: [entryPoint],
+    bundle: true,
+    write: false,
+    metafile: true,
+    plugins: [babelPlugin],
   });
+  return Object.keys(result.metafile?.inputs ?? {});
 }
 
 module.exports = {
+  MINIFIED_TARGETS,
   applyAmpConfig,
   bootstrapThirdPartyFrames,
   compileAllJs,
   compileCoreRuntime,
   compileJs,
-  compileTs,
+  compileJsWithEsbuild,
   doBuildJs,
   endBuildStep,
+  compileUnminifiedJs,
+  maybePrintCoverageMessage,
   maybeToEsmName,
+  maybeToNpmEsmName,
   mkdirSync,
   printConfigHelp,
   printNobuildHelp,
-  toPromise,
   watchDebounceDelay,
 };
diff --git a/build-system/tasks/integration.js b/build-system/tasks/integration.js
index 1a9caa93b3244..2414de6a7c588 100644
--- a/build-system/tasks/integration.js
+++ b/build-system/tasks/integration.js
@@ -17,34 +17,33 @@
 
 const argv = require('minimist')(process.argv.slice(2));
 const {
-  maybePrintArgvMessages,
-  shouldNotRun,
-} = require('./runtime-test/helpers');
-const {
-  RuntimeTestRunner,
   RuntimeTestConfig,
+  RuntimeTestRunner,
 } = require('./runtime-test/runtime-test-base');
 const {buildRuntime} = require('../common/utils');
+const {maybePrintArgvMessages} = require('./runtime-test/helpers');
 
 class Runner extends RuntimeTestRunner {
+  /**
+   * @param {RuntimeTestConfig} config
+   */
   constructor(config) {
     super(config);
   }
 
   /** @override */
   async maybeBuild() {
-    if (argv.nobuild) {
-      return;
+    if (!argv.nobuild) {
+      await buildRuntime();
     }
-    await buildRuntime();
   }
 }
 
+/**
+ * Entry point for the `amp integration` task.
+ * @return {Promise<void>}
+ */
 async function integration() {
-  if (shouldNotRun()) {
-    return;
-  }
-
   maybePrintArgvMessages();
 
   const config = new RuntimeTestConfig('integration');
@@ -61,27 +60,30 @@ module.exports = {
 
 integration.description = 'Runs integration tests';
 integration.flags = {
-  'chrome_canary': '  Runs tests on Chrome Canary',
-  'chrome_flags': '  Uses the given flags to launch Chrome',
-  'compiled': '  Runs tests against minified JS',
+  'chrome_canary': 'Runs tests on Chrome Canary',
+  'chrome_flags': 'Uses the given flags to launch Chrome',
+  'compiled': 'Runs tests against minified JS',
   'config':
-    '  Sets the runtime\'s AMP_CONFIG to one of "prod" (default) or "canary"',
-  'coverage': '  Run tests in code coverage mode',
+    'Sets the runtime\'s AMP_CONFIG to one of "prod" (default) or "canary"',
+  'coverage': 'Run tests in code coverage mode',
   'debug':
-    '  Allow debug statements by auto opening devtools. NOTE: This only ' +
+    'Allow debug statements by auto opening devtools. NOTE: This only ' +
     'works in non headless mode.',
-  'firefox': '  Runs tests on Firefox',
-  'files': '  Runs tests for specific files',
-  'grep': '  Runs tests that match the pattern',
-  'headless': '  Run tests in a headless Chrome window',
-  'ie': '  Runs tests on IE',
-  'nobuild': '  Skips build step',
-  'nohelp': '  Silence help messages that are printed prior to test run',
-  'safari': '  Runs tests on Safari',
-  'saucelabs': '  Runs tests on Sauce Labs (requires setup)',
-  'stable': '  Runs Sauce Labs tests on stable browsers',
-  'beta': '  Runs Sauce Labs tests on beta browsers',
-  'testnames': '  Lists the name of each test being run',
-  'verbose': '  With logging enabled',
-  'watch': '  Watches for changes in files, runs corresponding test(s)',
+  'edge': 'Runs tests on Edge',
+  'esm': 'Runs against module(esm) build',
+  'define_experiment_constant':
+    'Transforms tests with the EXPERIMENT constant set to true',
+  'experiment': 'Experiment being tested (used for status reporting)',
+  'firefox': 'Runs tests on Firefox',
+  'files': 'Runs tests for specific files',
+  'grep': 'Runs tests that match the pattern',
+  'headless': 'Run tests in a headless Chrome window',
+  'ie': 'Runs tests on IE',
+  'nobuild': 'Skips build step',
+  'nohelp': 'Silence help messages that are printed prior to test run',
+  'report': 'Write test result report to a local file',
+  'safari': 'Runs tests on Safari',
+  'testnames': 'Lists the name of each test being run',
+  'verbose': 'With logging enabled',
+  'watch': 'Watches for changes in files, runs corresponding test(s)',
 };
diff --git a/build-system/tasks/jsify-css.js b/build-system/tasks/jsify-css.js
deleted file mode 100644
index a6b0ffe45496d..0000000000000
--- a/build-system/tasks/jsify-css.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Copyright 2016 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 autoprefixer = require('autoprefixer');
-const colors = require('ansi-colors');
-const cssnano = require('cssnano');
-const fs = require('fs-extra');
-const log = require('fancy-log');
-const postcss = require('postcss');
-const postcssImport = require('postcss-import');
-
-// NOTE: see https://github.com/ai/browserslist#queries for `browsers` list
-const cssprefixer = autoprefixer({
-  overrideBrowserslist: [
-    'last 5 ChromeAndroid versions',
-    'last 5 iOS versions',
-    'last 3 FirefoxAndroid versions',
-    'last 5 Android versions',
-    'last 2 ExplorerMobile versions',
-    'last 2 OperaMobile versions',
-    'last 2 OperaMini versions',
-  ],
-});
-
-const cssNanoDefaultOptions = {
-  autoprefixer: false,
-  convertValues: false,
-  discardUnused: false,
-  cssDeclarationSorter: false,
-  // `mergeIdents` this is only unsafe if you rely on those animation names in
-  // JavaScript.
-  mergeIdents: true,
-  reduceIdents: false,
-  reduceInitial: false,
-  zindex: false,
-  svgo: {
-    encode: true,
-  },
-};
-
-/**
- * Css transformations to target file using postcss.
-
- * @param {string} filename css file
- * @param {!Object=} opt_cssnano cssnano options
- * @return {!Promise<string>} that resolves with the css content after
- *    processing
- */
-function transformCss(filename, opt_cssnano) {
-  opt_cssnano = opt_cssnano || Object.create(null);
-  // See http://cssnano.co/optimisations/ for full list.
-  // We try and turn off any optimization that is marked unsafe.
-  const cssnanoOptions = Object.assign(
-    Object.create(null),
-    cssNanoDefaultOptions,
-    opt_cssnano
-  );
-  const cssnanoTransformer = cssnano({preset: ['default', cssnanoOptions]});
-
-  const css = fs.readFileSync(filename, 'utf8');
-  const transformers = [postcssImport, cssprefixer, cssnanoTransformer];
-  return postcss(transformers).process(css.toString(), {
-    'from': filename,
-  });
-}
-
-/**
- * 'Jsify' a CSS file - Adds vendor specific css prefixes to the css file,
- * compresses the file, removes the copyright comment, and adds the sourceURL
- * to the stylesheet
- *
- * @param {string} filename css file
- * @return {!Promise<string>} that resolves with the css content after
- *    processing
- */
-function jsifyCssAsync(filename) {
-  return transformCss(filename).then(function (result) {
-    result.warnings().forEach(function (warn) {
-      log(colors.red(warn.toString()));
-    });
-    const {css} = result;
-    return css + '\n/*# sourceURL=/' + filename + '*/';
-  });
-}
-
-module.exports = {
-  jsifyCssAsync,
-  transformCss,
-};
diff --git a/build-system/tasks/karma.conf.js b/build-system/tasks/karma.conf.js
deleted file mode 100644
index 7ebab0fb5ec78..0000000000000
--- a/build-system/tasks/karma.conf.js
+++ /dev/null
@@ -1,355 +0,0 @@
-/**
- * Copyright 2015 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 argv = require('minimist')(process.argv.slice(2));
-const browserifyPersistFs = require('browserify-persist-fs');
-const crypto = require('crypto');
-const fs = require('fs');
-const globby = require('globby');
-
-const {gitCommitterEmail} = require('../common/git');
-const {isTravisBuild, travisJobNumber} = require('../common/travis');
-
-const TEST_SERVER_PORT = 8081;
-
-const COMMON_CHROME_FLAGS = [
-  // Dramatically speeds up iframe creation time.
-  '--disable-extensions',
-  // Allows simulating user actions (e.g unmute) which otherwise will be denied.
-  '--autoplay-policy=no-user-gesture-required',
-];
-
-if (argv.debug) {
-  COMMON_CHROME_FLAGS.push('--auto-open-devtools-for-tabs');
-}
-
-// Reduces the odds of Sauce labs timing out during tests. See #16135 and #24286.
-// Reference: https://wiki.saucelabs.com/display/DOCS/Test+Configuration+Options#TestConfigurationOptions-Timeouts
-const SAUCE_TIMEOUT_CONFIG = {
-  maxDuration: 30 * 60,
-  commandTimeout: 10 * 60,
-  idleTimeout: 30 * 60,
-};
-
-// Used by persistent browserify caching to further salt hashes with our
-// environment state. Eg, when updating a babel-plugin, the environment hash
-// must change somehow so that the cache busts and the file is retransformed.
-const createHash = (input) =>
-  crypto.createHash('sha1').update(input).digest('hex');
-
-const persistentCache = browserifyPersistFs(
-  '.karma-cache',
-  {
-    deps: createHash(fs.readFileSync('./yarn.lock')),
-    build: globby
-      .sync([
-        'build-system/**/*.js',
-        '!build-system/eslint-rules',
-        '!**/test/**',
-      ])
-      .map((f) => {
-        return createHash(fs.readFileSync(f));
-      }),
-  },
-  () => {
-    process.stdout.write('.');
-  }
-);
-
-persistentCache.gc(
-  {
-    maxAge: 1000 * 60 * 60 * 24 * 7,
-  },
-  () => {
-    // swallow errors
-  }
-);
-
-/**
- * @param {!Object} config
- */
-module.exports = {
-  frameworks: [
-    'fixture',
-    'browserify',
-    'mocha',
-    'sinon-chai',
-    'chai',
-    'source-map-support',
-  ],
-
-  preprocessors: {
-    './test/fixtures/*.html': ['html2js'],
-    './test/**/*.js': ['browserify'],
-    './ads/**/test/test-*.js': ['browserify'],
-    './extensions/**/test/**/*.js': ['browserify'],
-    './testing/**/*.js': ['browserify'],
-  },
-
-  // TODO(rsimha, #15510): Sauce labs on Safari doesn't reliably support
-  // 'localhost' addresses. See #14848 for more info.
-  // Details: https://support.saucelabs.com/hc/en-us/articles/115010079868
-  hostname: 'localhost',
-
-  browserify: {
-    watch: true,
-    debug: true,
-    fast: true,
-    basedir: __dirname + '/../../',
-    transform: [['babelify', {caller: {name: 'test'}, global: true}]],
-    // Prevent "cannot find module" errors on Travis. See #14166.
-    bundleDelay: isTravisBuild() ? 5000 : 1200,
-
-    persistentCache,
-  },
-
-  reporters: ['super-dots', 'karmaSimpleReporter'],
-
-  superDotsReporter: {
-    nbDotsPerLine: 100000,
-    color: {
-      success: 'green',
-      failure: 'red',
-      ignore: 'yellow',
-    },
-    icon: {
-      success: '●',
-      failure: '●',
-      ignore: '○',
-    },
-  },
-
-  specReporter: {
-    suppressPassed: true,
-    suppressSkipped: true,
-    suppressFailed: false,
-    suppressErrorSummary: true,
-    maxLogLines: 20,
-  },
-
-  mochaReporter: {
-    output: 'full',
-    colors: {
-      success: 'green',
-      error: 'red',
-      info: 'yellow',
-    },
-    symbols: {
-      success: '●',
-      error: '●',
-      info: '○',
-    },
-  },
-
-  port: 9876,
-
-  colors: true,
-
-  proxies: {
-    '/ads/': '/base/ads/',
-    '/dist/': '/base/dist/',
-    '/dist.3p/': '/base/dist.3p/',
-    '/examples/': '/base/examples/',
-    '/extensions/': '/base/extensions/',
-    '/src/': '/base/src/',
-    '/test/': '/base/test/',
-  },
-
-  // Can't import the Karma constant config.LOG_ERROR, so we hard code it here.
-  // Hopefully it'll never change.
-  logLevel: 'ERROR',
-
-  autoWatch: true,
-
-  browsers: [isTravisBuild() ? 'Chrome_travis_ci' : 'Chrome_no_extensions'],
-
-  customLaunchers: {
-    /* eslint "google-camelcase/google-camelcase": 0*/
-    Chrome_travis_ci: {
-      base: 'Chrome',
-      flags: ['--no-sandbox'].concat(COMMON_CHROME_FLAGS),
-    },
-    Chrome_no_extensions: {
-      base: 'Chrome',
-      flags: COMMON_CHROME_FLAGS,
-    },
-    Chrome_no_extensions_headless: {
-      base: 'ChromeHeadless',
-      flags: [
-        // https://developers.google.com/web/updates/2017/04/headless-chrome#frontend
-        '--no-sandbox',
-        '--remote-debugging-port=9222',
-        // https://github.com/karma-runner/karma-chrome-launcher/issues/175
-        "--proxy-server='direct://'",
-        '--proxy-bypass-list=*',
-      ].concat(COMMON_CHROME_FLAGS),
-    },
-    // SauceLabs configurations.
-    // New configurations can be created here:
-    // https://wiki.saucelabs.com/display/DOCS/Platform+Configurator#/
-    SL_Chrome: {
-      base: 'SauceLabs',
-      browserName: 'chrome',
-      platform: 'Windows 10',
-      version: 'latest',
-      ...SAUCE_TIMEOUT_CONFIG,
-    },
-    SL_Chrome_Beta: {
-      base: 'SauceLabs',
-      browserName: 'chrome',
-      platform: 'Windows 10',
-      version: 'beta',
-      ...SAUCE_TIMEOUT_CONFIG,
-    },
-    SL_Chrome_Android_7: {
-      base: 'SauceLabs',
-      appiumVersion: '1.8.1',
-      deviceName: 'Android GoogleAPI Emulator',
-      browserName: 'Chrome',
-      platformName: 'Android',
-      platformVersion: '7.1',
-      ...SAUCE_TIMEOUT_CONFIG,
-    },
-    SL_iOS_12: {
-      base: 'SauceLabs',
-      appiumVersion: '1.9.1',
-      deviceName: 'iPhone X Simulator',
-      browserName: 'Safari',
-      platformName: 'iOS',
-      platformVersion: '12.0',
-      ...SAUCE_TIMEOUT_CONFIG,
-    },
-    SL_iOS_11: {
-      base: 'SauceLabs',
-      appiumVersion: '1.9.1',
-      deviceName: 'iPhone X Simulator',
-      browserName: 'Safari',
-      platformName: 'iOS',
-      platformVersion: '11.3',
-      ...SAUCE_TIMEOUT_CONFIG,
-    },
-    SL_Firefox: {
-      base: 'SauceLabs',
-      browserName: 'firefox',
-      platform: 'Windows 10',
-      version: 'latest',
-      ...SAUCE_TIMEOUT_CONFIG,
-    },
-    SL_Firefox_Beta: {
-      base: 'SauceLabs',
-      browserName: 'firefox',
-      platform: 'Windows 10',
-      version: 'beta',
-      ...SAUCE_TIMEOUT_CONFIG,
-    },
-    SL_Safari_12: {
-      base: 'SauceLabs',
-      browserName: 'safari',
-      platform: 'macOS 10.13',
-      version: '12.1',
-      ...SAUCE_TIMEOUT_CONFIG,
-    },
-    SL_Safari_11: {
-      base: 'SauceLabs',
-      browserName: 'safari',
-      platform: 'macOS 10.13',
-      version: '11.1',
-      ...SAUCE_TIMEOUT_CONFIG,
-    },
-    SL_Edge: {
-      base: 'SauceLabs',
-      browserName: 'MicrosoftEdge',
-      platform: 'Windows 10',
-      ...SAUCE_TIMEOUT_CONFIG,
-    },
-    SL_IE: {
-      base: 'SauceLabs',
-      browserName: 'internet explorer',
-      platform: 'Windows 10',
-      ...SAUCE_TIMEOUT_CONFIG,
-    },
-  },
-
-  sauceLabs: {
-    testName: 'AMP HTML on Sauce',
-    // Identifier used in build-system/sauce_connect/start_sauce_connect.sh.
-    tunnelIdentifier: isTravisBuild() ? travisJobNumber() : gitCommitterEmail(),
-    startConnect: false,
-    connectOptions: {
-      noSslBumpDomains: 'all',
-    },
-  },
-
-  client: {
-    mocha: {
-      reporter: 'html',
-      // Longer timeout on Travis; fail quickly during local runs.
-      timeout: isTravisBuild() ? 10000 : 2000,
-      // Run tests up to 3 times before failing them on Travis.
-      retries: isTravisBuild() ? 2 : 0,
-    },
-    captureConsole: false,
-    verboseLogging: false,
-    testServerPort: TEST_SERVER_PORT,
-  },
-
-  singleRun: true,
-  captureTimeout: 4 * 60 * 1000,
-  failOnEmptyTestSuite: false,
-
-  // Give a disconnected browser 2 minutes to reconnect with Karma.
-  // This allows a browser to retry 2 times per `browserDisconnectTolerance`
-  // on Travis before stalling out after 10 minutes.
-  browserDisconnectTimeout: 2 * 60 * 1000,
-
-  // If there's no message from the browser, make Karma wait 2 minutes
-  // until it disconnects.
-  browserNoActivityTimeout: 2 * 60 * 1000,
-
-  // IF YOU CHANGE THIS, DEBUGGING WILL RANDOMLY KILL THE BROWSER
-  browserDisconnectTolerance: isTravisBuild() ? 2 : 0,
-
-  // Import our gulp webserver as a Karma server middleware
-  // So we instantly have all the custom server endpoints available
-  beforeMiddleware: ['custom'],
-  plugins: [
-    'karma-browserify',
-    'karma-chai',
-    'karma-chrome-launcher',
-    'karma-edge-launcher',
-    'karma-firefox-launcher',
-    'karma-fixture',
-    'karma-html2js-preprocessor',
-    'karma-ie-launcher',
-    'karma-mocha',
-    'karma-mocha-reporter',
-    'karma-safari-launcher',
-    'karma-sauce-launcher',
-    'karma-simple-reporter',
-    'karma-sinon-chai',
-    'karma-source-map-support',
-    'karma-super-dots-reporter',
-    {
-      'middleware:custom': [
-        'factory',
-        function () {
-          return require(require.resolve('../server/app.js'));
-        },
-      ],
-    },
-  ],
-};
diff --git a/build-system/tasks/lint.js b/build-system/tasks/lint.js
index d07a468cb6994..ce67fc6aa89d8 100644
--- a/build-system/tasks/lint.js
+++ b/build-system/tasks/lint.js
@@ -16,204 +16,142 @@
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
-const colors = require('ansi-colors');
-const config = require('../test-configs/config');
-const debounce = require('gulp-debounce');
-const eslint = require('gulp-eslint');
-const eslintIfFixed = require('gulp-eslint-if-fixed');
-const globby = require('globby');
-const gulp = require('gulp');
-const lazypipe = require('lazypipe');
-const log = require('fancy-log');
-const path = require('path');
-const watch = require('gulp-watch');
+const fs = require('fs');
 const {
-  getFilesChanged,
-  getFilesFromArgv,
+  log,
+  logLocalDev,
   logOnSameLine,
-} = require('../common/utils');
-const {gitDiffNameOnlyMaster} = require('../common/git');
-const {isTravisBuild} = require('../common/travis');
-const {maybeUpdatePackages} = require('./update-packages');
-const {watchDebounceDelay} = require('./helpers');
+  logOnSameLineLocalDev,
+} = require('../common/logging');
+const {cyan, green, red, yellow} = require('../common/colors');
+const {ESLint} = require('eslint');
+const {getFilesToCheck} = require('../common/utils');
+const {lintGlobs} = require('../test-configs/config');
 
-const rootDir = path.dirname(path.dirname(__dirname));
-
-/**
- * Initializes the linter stream based on globs
- *
- * @param {!Object} globs
- * @param {!Object} streamOptions
- * @return {!ReadableStream}
- */
-function initializeStream(globs, streamOptions) {
-  let stream = gulp.src(globs, streamOptions);
-  if (argv.watch) {
-    const watcher = lazypipe().pipe(watch, globs);
-    stream = stream.pipe(watcher()).pipe(debounce({wait: watchDebounceDelay}));
-  }
-  return stream;
-}
+/** @type {ESLint.Options} */
+const options = {
+  fix: argv.fix,
+  reportUnusedDisableDirectives: 'error',
+};
 
 /**
- * Runs the linter on the given stream using the given options.
- *
- * @param {!ReadableStream} stream
- * @return {boolean}
+ * Runs the linter on the given set of files.
+ * @param {Array<string>} filesToLint
  */
-function runLinter(stream) {
-  if (!isTravisBuild()) {
-    log(colors.green('Starting linter...'));
-  }
-  const options = {
-    fix: argv.fix,
-    quiet: argv.quiet,
+async function runLinter(filesToLint) {
+  logLocalDev(green('Starting linter...'));
+  const eslint = new ESLint(options);
+  const results = {
+    errorCount: 0,
+    warningCount: 0,
   };
   const fixedFiles = {};
-  return stream
-    .pipe(eslint(options))
-    .pipe(
-      eslint.formatEach('stylish', function (msg) {
-        logOnSameLine(msg.replace(`${rootDir}/`, '').trim() + '\n');
-      })
-    )
-    .pipe(eslintIfFixed(rootDir))
-    .pipe(
-      eslint.result(function (result) {
-        const relativePath = path.relative(rootDir, result.filePath);
-        if (!isTravisBuild()) {
-          logOnSameLine(colors.green('Linted: ') + relativePath);
-        }
-        if (options.fix && result.fixed) {
-          const status =
-            result.errorCount == 0
-              ? colors.green('Fixed: ')
-              : colors.yellow('Partially fixed: ');
-          logOnSameLine(status + colors.cyan(relativePath));
-          fixedFiles[relativePath] = status;
-        }
-      })
-    )
-    .pipe(
-      eslint.results(function (results) {
-        if (results.errorCount == 0 && results.warningCount == 0) {
-          if (!isTravisBuild()) {
-            logOnSameLine(
-              colors.green('SUCCESS: ') + 'No linter warnings or errors.'
-            );
-          }
-        } else {
-          const prefix =
-            results.errorCount == 0
-              ? colors.yellow('WARNING: ')
-              : colors.red('ERROR: ');
-          logOnSameLine(
-            prefix +
-              'Found ' +
-              results.errorCount +
-              ' error(s) and ' +
-              results.warningCount +
-              ' warning(s).'
-          );
-          if (!options.fix) {
-            log(
-              colors.yellow('NOTE 1:'),
-              'You may be able to automatically fix some of these warnings ' +
-                '/ errors by running',
-              colors.cyan('gulp lint --local_changes --fix'),
-              'from your local branch.'
-            );
-            log(
-              colors.yellow('NOTE 2:'),
-              'Since this is a destructive operation (that edits your files',
-              'in-place), make sure you commit before running the command.'
-            );
-            log(
-              colors.yellow('NOTE 3:'),
-              'If you see any',
-              colors.cyan('prettier/prettier'),
-              'errors, read',
-              colors.cyan(
-                'https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#code-quality-and-style'
-              )
-            );
-          }
-        }
-        if (options.fix && Object.keys(fixedFiles).length > 0) {
-          log(colors.green('INFO: ') + 'Summary of fixes:');
-          Object.keys(fixedFiles).forEach((file) => {
-            log(fixedFiles[file] + colors.cyan(file));
-          });
-        }
-      })
-    )
-    .pipe(eslint.failAfterError());
+  for (const file of filesToLint) {
+    const text = fs.readFileSync(file, 'utf-8');
+    const lintResult = await eslint.lintText(text, {filePath: file});
+    const result = lintResult[0];
+    if (!result) {
+      continue; // File was ignored
+    }
+    results.errorCount += result.errorCount;
+    results.warningCount += result.warningCount;
+    const formatter = await eslint.loadFormatter('stylish');
+    const resultText = formatter
+      .format(lintResult)
+      .replace(`${process.cwd()}/`, '')
+      .trim();
+    if (resultText.length) {
+      logOnSameLine(resultText);
+    }
+    if (argv.fix) {
+      await ESLint.outputFixes(lintResult);
+    }
+    logOnSameLineLocalDev(green('Linted: ') + file);
+    if (options.fix && result.output) {
+      const status =
+        result.errorCount == 0 ? green('Fixed: ') : yellow('Partially fixed: ');
+      logOnSameLine(status + cyan(file));
+      fixedFiles[file] = status;
+    }
+  }
+  summarizeResults(results, fixedFiles);
 }
 
 /**
- * Checks if there are eslint rule changes, in which case we must lint all
- * files.
- *
- * @return {boolean}
+ * Summarize the results of linting all files.
+ * @param {Object} results
+ * @param {Object} fixedFiles
  */
-function eslintRulesChanged() {
-  return (
-    gitDiffNameOnlyMaster().filter(function (file) {
-      return (
-        path.basename(file).includes('.eslintrc.js') ||
-        path.dirname(file) === 'build-system/eslint-rules'
+function summarizeResults(results, fixedFiles) {
+  const {errorCount, warningCount} = results;
+  if (errorCount == 0 && warningCount == 0) {
+    logOnSameLineLocalDev(green('SUCCESS:'), 'No linter warnings or errors.');
+  } else {
+    const prefix = errorCount == 0 ? yellow('WARNING: ') : red('ERROR: ');
+    logOnSameLine(
+      prefix +
+        'Found ' +
+        errorCount +
+        ' error(s) and ' +
+        warningCount +
+        ' warning(s).'
+    );
+    if (!options.fix) {
+      log(
+        yellow('NOTE 1:'),
+        'You may be able to automatically fix some of these warnings ' +
+          '/ errors by running',
+        cyan('amp lint --local_changes --fix'),
+        'from your local branch.'
       );
-    }).length > 0
-  );
-}
-
-/**
- * Gets the list of files to be linted.
- *
- * @param {!Array<string>} files
- * @return {!Array<string>}
- */
-function getFilesToLint(files) {
-  const filesToLint = globby.sync(files, {gitignore: true});
-  if (!isTravisBuild()) {
-    log(colors.green('INFO: ') + 'Running lint on the following files:');
-    filesToLint.forEach((file) => {
-      log(colors.cyan(file));
+      log(
+        yellow('NOTE 2:'),
+        'Since this is a destructive operation (that edits your files',
+        'in-place), make sure you commit before running the command.'
+      );
+      log(
+        yellow('NOTE 3:'),
+        'If you see any',
+        cyan('prettier/prettier'),
+        'errors, read',
+        cyan(
+          'https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md#code-quality-and-style'
+        )
+      );
+    }
+    process.exitCode = 1;
+  }
+  if (options.fix && Object.keys(fixedFiles).length > 0) {
+    log(green('INFO:'), 'Summary of fixes:');
+    Object.keys(fixedFiles).forEach((file) => {
+      log(fixedFiles[file] + cyan(file));
     });
   }
-  return filesToLint;
 }
 
 /**
- * Run the eslinter on the src javascript and log the output
- *
- * @return {!ReadableStream}
+ * Checks files for formatting (and optionally fixes them) with Eslint.
+ * Explicitly makes sure the API doesn't check files in `.eslintignore`.
  */
-function lint() {
-  maybeUpdatePackages();
-  let filesToLint = config.lintGlobs;
-  if (argv.files) {
-    filesToLint = getFilesToLint(getFilesFromArgv());
-  } else if (!eslintRulesChanged() && argv.local_changes) {
-    const lintableFiles = getFilesChanged(config.lintGlobs);
-    if (lintableFiles.length == 0) {
-      log(colors.green('INFO: ') + 'No JS files in this PR');
-      return Promise.resolve();
-    }
-    filesToLint = getFilesToLint(lintableFiles);
+async function lint() {
+  const filesToCheck = getFilesToCheck(
+    lintGlobs,
+    {gitignore: true},
+    '.eslintignore'
+  );
+  if (filesToCheck.length == 0) {
+    return;
   }
-  return runLinter(initializeStream(filesToLint, {base: rootDir}));
+  await runLinter(filesToCheck);
 }
 
 module.exports = {
   lint,
 };
 
-lint.description = 'Validates against Google Closure Linter';
+lint.description = 'Runs eslint checks against JS files';
 lint.flags = {
-  'watch': '  Watches for changes in files, validates against the linter',
-  'fix': '  Fixes simple lint errors (spacing etc)',
-  'files': '  Lints just the specified files',
-  'local_changes': '  Lints just the files changed in the local branch',
-  'quiet': '  Suppress warnings from outputting',
+  'fix': 'Fixes simple lint errors (spacing etc)',
+  'files': 'Lints just the specified files',
+  'local_changes': 'Lints just the files changed in the local branch',
 };
diff --git a/build-system/tasks/make-extension/OWNERS b/build-system/tasks/make-extension/OWNERS
new file mode 100644
index 0000000000000..5b93a992998a3
--- /dev/null
+++ b/build-system/tasks/make-extension/OWNERS
@@ -0,0 +1,18 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        // Outreach group maintains extension boilerplate/template.
+        {name: 'ampproject/wg-outreach'},
+
+        // Most new extensions are reviewed by these groups. It's in their
+        // interest to maintain the extension generator.
+        {name: 'ampproject/wg-components'},
+        {name: 'ampproject/wg-bento'},
+      ],
+    },
+  ],
+}
diff --git a/build-system/tasks/make-extension/format.js b/build-system/tasks/make-extension/format.js
new file mode 100644
index 0000000000000..28f40679018a5
--- /dev/null
+++ b/build-system/tasks/make-extension/format.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const {getOutput} = require('../../common/process');
+
+/**
+ * @param {Array<string>} files
+ * @return {Object}
+ */
+function format(files) {
+  return getOutput(`npx prettier --ignore-unknown --write ${files.join(' ')}`);
+}
+
+module.exports = {
+  format,
+};
diff --git a/build-system/tasks/make-extension/index.js b/build-system/tasks/make-extension/index.js
new file mode 100644
index 0000000000000..e50c1bfe8f631
--- /dev/null
+++ b/build-system/tasks/make-extension/index.js
@@ -0,0 +1,444 @@
+/**
+ * Copyright 2017 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 argv = require('minimist')(process.argv.slice(2), {string: ['version']});
+const del = require('del');
+const fs = require('fs-extra');
+const objstr = require('obj-str');
+const path = require('path');
+const {cyan, green, red, yellow} = require('../../common/colors');
+const {format} = require('./format');
+const {getOutput, getStdout} = require('../../common/process');
+const {log, logLocalDev, logWithoutTimestamp} = require('../../common/logging');
+
+const extensionBundlesJson =
+  'build-system/compile/bundles.config.extensions.json';
+
+/**
+ * Convert dash-case-name to PascalCaseName.
+ * @param {string} name
+ * @return {string}
+ */
+function dashToPascalCase(name) {
+  return name.replace(/(?:-|^)([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+/**
+ * Replaces from a map of keys/values.
+ * @param {string} inputText
+ * @param {Object<string, string>} replacements
+ * @return {function(string): string}
+ */
+const replace = (inputText, replacements) =>
+  Object.keys(replacements).reduce(
+    (text, key) => text.replace(new RegExp(key, 'g'), replacements[key]),
+    inputText
+  );
+
+/**
+ * Generate a sequence of all files in a directory recursively.
+ * @param {string} dir
+ * @yields {string}
+ */
+async function* walkDir(dir) {
+  for (const f of await fs.readdir(dir)) {
+    const dirPath = path.join(dir, f);
+
+    if ((await fs.stat(dirPath)).isDirectory()) {
+      yield* walkDir(dirPath);
+    } else {
+      yield path.join(dir, f);
+    }
+  }
+}
+
+const getTemplateDir = (template) =>
+  path.join(path.relative(process.cwd(), __dirname), 'template', template);
+
+/**
+ * @param {string} templateDir
+ * @param {Object<string, string>} replacements
+ * @param {string=} destinationDir
+ * @return {Array<string>}
+ */
+async function writeFromTemplateDir(
+  templateDir,
+  replacements,
+  destinationDir = '.'
+) {
+  const destinationPath = (templatePath) =>
+    path.join(
+      destinationDir,
+      replace(templatePath.substr(templateDir.length + 1), replacements)
+    );
+
+  const written = [];
+  for await (const templatePath of walkDir(templateDir)) {
+    const destination = destinationPath(templatePath);
+
+    await fs.mkdirp(path.dirname(destination));
+
+    // Skip if the destination file already exists
+    let fileHandle;
+    try {
+      fileHandle = await fs.open(destination, 'wx');
+    } catch (e) {
+      if (e.code !== 'EEXIST') {
+        throw e;
+      }
+      if (!argv.overwrite) {
+        logLocalDev(
+          yellow('WARNING:'),
+          'Skipping existing file',
+          cyan(destination)
+        );
+        continue;
+      }
+      logLocalDev(
+        yellow('WARNING:'),
+        'Overwriting existing file',
+        cyan(destination)
+      );
+    }
+
+    const template = await fs.readFile(templatePath, 'utf8');
+    await fs.write(fileHandle, replace(template, replacements));
+    await fs.close(fileHandle);
+
+    logLocalDev(green('SUCCESS:'), 'Created', cyan(destination));
+
+    written.push(destination);
+  }
+  return written;
+}
+
+/**
+ * Inserts an extension entry into bundles.config.extensions.json
+ *
+ * @param {{
+ *   name: string,
+ *   version: string,
+ *   latestVersion?: (string|undefined)
+ *   options: ({hasCss: boolean}|undefined)
+ * }} bundle
+ * @param {string=} destination
+ */
+async function insertExtensionBundlesConfig(
+  bundle,
+  destination = extensionBundlesJson
+) {
+  let extensionBundles = [];
+  try {
+    extensionBundles = await fs.readJson(destination, {throws: false});
+  } catch (_) {}
+
+  const existingOrNull = extensionBundles.find(
+    ({name}) => name === bundle.name
+  );
+
+  extensionBundles.push({
+    ...bundle,
+    latestVersion:
+      (existingOrNull && existingOrNull.latestVersion) ||
+      bundle.latestVersion ||
+      bundle.version,
+  });
+
+  await fs.mkdirp(path.dirname(destination));
+
+  await fs.writeJson(
+    destination,
+    extensionBundles.sort((a, b) => {
+      if (!a.name) {
+        return 1;
+      }
+      if (!b.name) {
+        return -1;
+      }
+      return a.name.localeCompare(b.name);
+    })
+  );
+
+  format([destination]);
+
+  logLocalDev(green('SUCCESS:'), 'Wrote', cyan(path.basename(destination)));
+}
+
+/**
+ * @typedef {{
+ *   bundleConfig: Object,
+ *   modified: !Array<string>,
+ *   created: !Array<string>,
+ * }}
+ */
+let MakeExtensionResultDef;
+
+/**
+ * @param {Array<string>} templateDirs
+ * @param {string=} destinationDir
+ * @param {{
+ *   version: (string|undefined),
+ *   bento: (boolean|undefined),
+ *   name: (string|undefined),
+ * }} options
+ * @return {Promise<?MakeExtensionResultDef>}
+ */
+async function makeExtensionFromTemplates(
+  templateDirs,
+  destinationDir = '.',
+  options = argv
+) {
+  const version = (
+    options.version || (options.bento ? '1.0' : '0.1')
+  ).toString();
+  const name = (options.name || '').replace(/^amp-/, '');
+  if (!name) {
+    log(red('ERROR:'), 'Must specify component name with', cyan('--name'));
+    return null;
+  }
+
+  const namePascalCase = dashToPascalCase(name);
+
+  const replacements = {
+    '__current_year__': `${new Date().getFullYear()}`,
+    '__component_version__': version,
+    '__component_version_snakecase__': version.replace(/\./g, '_'),
+    '__component_name_hyphenated__': name,
+    '__component_name_hyphenated_capitalized__': name.toUpperCase(),
+    '__component_name_pascalcase__': namePascalCase,
+    // TODO(alanorozco): Remove __storybook_experiments...__ once we stop
+    // requiring the bento experiment.
+    '__storybook_experiments_do_not_add_trailing_comma__':
+      // Don't add a trailing comma in the template, instead we add it here.
+      // This is because the property added is optional, and a double comma would
+      // cause a syntax error.
+      options.bento ? "experiments: ['bento']," : '',
+    ...(!options.nocss
+      ? {
+          '__css_import__': `import {CSS} from '../../../build/amp-${name}-${version}.css'`,
+          '__css_id__': `CSS`,
+          '__register_element_args__': `TAG, Amp${namePascalCase}, CSS`,
+        }
+      : {
+          '__css_import__': '',
+          '__css_id__': '',
+          '__register_element_args__': `TAG, Amp${namePascalCase}`,
+        }),
+    ...(!options.nojss
+      ? {
+          '__jss_import_component_css__': `import {CSS as COMPONENT_CSS} from './component.jss'`,
+          '__jss_component_css__': 'COMPONENT_CSS',
+          '__jss_import_use_styles__': `import {useStyles} from './component.jss'`,
+          '__jss_styles_use_styles__': 'const styles = useStyles()',
+          '__jss_styles_example_or_placeholder__':
+            '`${styles.exampleContentHidden}`',
+        }
+      : {
+          '__jss_import_component_css_': '',
+          '__jss_component_css__': 'null',
+          '__jss_import_use_styles__': '',
+          '__jss_styles_use_styles__': '',
+          '__jss_styles_example_or_placeholder__': `'my-classname'`,
+        }),
+    // eslint-disable-next-line local/no-forbidden-terms
+    // This allows generated code to contain "DO NOT SUBMIT", which will cause
+    // PRs to fail CI if example code isn't removed from the PR. We can't
+    // actually write that out, here or in templates, without CI failing.
+    // eslint-disable-next-line local/no-forbidden-terms
+    '__do_not_submit__': 'DO NOT SUBMIT',
+    // A rule on OWNERS assigns all filenames starting with "/validator-*" to
+    // belong to wg-caching. We don't require this group to review these
+    // template files, so using the __validator__ placeholder helps us exclude
+    // them from ownership.
+    '__validator__': 'validator',
+  };
+
+  const created = (
+    await Promise.all(
+      templateDirs.map((templateDirs) =>
+        writeFromTemplateDir(templateDirs, replacements, destinationDir)
+      )
+    )
+  ).flat();
+
+  if (created.length > 0) {
+    format(created);
+  }
+
+  const bundleConfig = {
+    name: `amp-${name}`,
+    version,
+  };
+
+  if (!options.nocss) {
+    bundleConfig.options = {hasCss: true};
+  }
+
+  await insertExtensionBundlesConfig(
+    bundleConfig,
+    path.join(destinationDir, extensionBundlesJson)
+  );
+
+  const findCreatedByRegex = (regex) => {
+    const filenames = created.filter((filename) => regex.test(filename));
+    return filenames.length < 1 ? null : filenames;
+  };
+
+  const blurb = [
+    `${green('FINISHED:')} Created extension ${cyan(`<amp-${name}>`)}`,
+    `Boilerplate for your new component has been created in:
+    ${cyan(`extensions/amp-${name}/`)}`,
+  ];
+
+  const unitTestFiles = findCreatedByRegex(new RegExp('test/test-'));
+  if (unitTestFiles) {
+    blurb.push(`You can run tests on your new component with the following command:
+    ${cyan(`amp unit --files="${unitTestFiles.join(',')}"`)}`);
+  }
+
+  if (findCreatedByRegex(new RegExp('/storybook/'))) {
+    blurb.push(`You may view the component during development in storybook:
+    ${cyan(`amp storybook`)}`);
+  }
+
+  if (findCreatedByRegex(new RegExp('/validator-(.+)\\.html$'))) {
+    blurb.push(`You should generate accompanying validator test result files by running:
+    ${cyan(`amp validator --update_tests`)}`);
+  }
+
+  logLocalDev(`${blurb.join('\n\n')}\n`);
+
+  return {
+    bundleConfig,
+    created,
+    modified: [extensionBundlesJson],
+  };
+}
+
+/**
+ * @param {function(...*):?{modified: ?Array<string>, created: ?Array<string>}} fn
+ * @return {Promise}
+ */
+async function affectsWorkingTree(fn) {
+  const stashStdout = getStdout(`git stash push --keep-index`);
+
+  const {created, modified} = (await fn()) || {};
+
+  if (created) {
+    await del(created);
+  }
+
+  if (modified) {
+    const head = getStdout('git rev-parse HEAD').trim();
+    getOutput(`git checkout ${head} ${modified.join(' ')}`);
+  }
+
+  if (!stashStdout.startsWith('No local changes')) {
+    getOutput('git stash pop');
+  }
+}
+
+/**
+ * Generates an extension with the given name and runs all unit tests located in
+ * the generated extension directory.
+ * @param {string} name
+ * @return {!Promise{?string}} stderr if failing, null if passing
+ */
+async function runExtensionTests(name) {
+  for (const command of [
+    `amp build --extensions=${name} --core_runtime_only`,
+    `amp unit --headless --files="extensions/${name}/**/test/test-*.js"`,
+  ]) {
+    log('Running', cyan(command) + '...');
+    const result = getOutput(command);
+    if (result.status !== 0) {
+      return result.stderr || result.stdout;
+    }
+  }
+  return null;
+}
+
+/**
+ * @return {Promise<void>}
+ */
+async function makeExtension() {
+  let testError;
+
+  const {bento, nocss, nojss} = argv;
+
+  const templateDirs = objstr({
+    shared: true,
+    bento,
+    classic: !bento,
+    css: !nocss,
+    jss: bento && !nojss,
+  })
+    .split(/\s+/)
+    .map((name) => getTemplateDir(name));
+
+  const withCleanup = argv.cleanup ? affectsWorkingTree : (fn) => fn();
+  await withCleanup(async () => {
+    const result = await makeExtensionFromTemplates(templateDirs);
+    if (!result) {
+      const warningOrError = 'Could not write extension files.';
+      if (argv.test) {
+        testError = warningOrError;
+      } else {
+        log(yellow('WARNING:'), warningOrError);
+      }
+      return null;
+    }
+    const {bundleConfig, created, modified} = result;
+    if (argv.test) {
+      testError = await runExtensionTests(bundleConfig.name);
+    }
+    return {created, modified};
+  });
+
+  if (testError) {
+    logWithoutTimestamp(testError);
+    throw new Error(
+      [
+        'Failed testing generated extension',
+        yellow('⤷ Try updating the template files located in:'),
+        ...templateDirs.map((dir) => '\t' + dir),
+        '',
+      ].join('\n')
+    );
+  }
+}
+
+module.exports = {
+  insertExtensionBundlesConfig,
+  makeExtension,
+  makeExtensionFromTemplates,
+  writeFromTemplateDir,
+};
+
+makeExtension.description = 'Create an extension skeleton';
+makeExtension.flags = {
+  name: 'The name of the extension. The prefix `amp-*` is added if necessary',
+  cleanup: 'Undo file changes before exiting. This is useful alongside --test',
+  bento: 'Generate a Bento component',
+  nocss:
+    'Exclude extension-specific CSS. (If specifying --bento, JSS is still generated unless combined with --nojss)',
+  nojss: 'Exclude extension-specific JSS when specifying --bento.',
+  test: 'Build and test the generated extension',
+  version: 'Sets the version number (default: 0.1; or 1.0 with --bento)',
+  overwrite:
+    'Overwrites existing files at the destination, if present. Otherwise skips them',
+};
diff --git a/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/OWNERS b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/OWNERS
new file mode 100644
index 0000000000000..ddba9cfadb4b5
--- /dev/null
+++ b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'ampproject/wg-bento'}],
+    },
+  ],
+}
diff --git a/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/amp-__component_name_hyphenated__.js b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/amp-__component_name_hyphenated__.js
new file mode 100644
index 0000000000000..95f6ae994e19d
--- /dev/null
+++ b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/amp-__component_name_hyphenated__.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright __current_year__ 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.
+ */
+
+import {BaseElement} from './base-element';
+__css_import__;
+import {dict} from '../../../src/core/types/object';
+import {isExperimentOn} from '../../../src/experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-__component_name_hyphenated__';
+
+class Amp__component_name_pascalcase__ extends BaseElement {
+  /** @override */
+  init() {
+    // __do_not_submit__: This is example code only.
+    this.registerApiAction('exampleToggle', (api) => api./*OK*/exampleToggle());
+
+    return dict({
+      // Extra props passed by wrapper AMP component
+      'exampleTagNameProp': this.element.tagName,
+    });
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-__component_name_hyphenated__'),
+      'expected global "bento" or specific "bento-__component_name_hyphenated__" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+}
+
+AMP.extension(TAG, '__component_version__', (AMP) => {
+  AMP.registerElement(__register_element_args__);
+});
diff --git a/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/base-element.js b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/base-element.js
new file mode 100644
index 0000000000000..a1f70ab9843fa
--- /dev/null
+++ b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/base-element.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright __current_year__ 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.
+ */
+
+__jss_import_component_css__;
+import {__component_name_pascalcase__} from './component';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+
+export class BaseElement extends PreactBaseElement {}
+
+/** @override */
+BaseElement['Component'] = __component_name_pascalcase__;
+
+/** @override */
+BaseElement['props'] = {
+  'children': {passthrough: true},
+  // 'children': {passthroughNonEmpty: true},
+  // 'children': {selector: '...'},
+};
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
+
+// __do_not_submit__: If BaseElement['shadowCss']  is set to `null`, remove the
+// following declaration.
+// Otherwise, keep it when defined to an actual value like `COMPONENT_CSS`.
+// Once addressed, remove this set of comments.
+/** @override */
+BaseElement['shadowCss'] = __jss_component_css__;
diff --git a/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/component.js b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/component.js
new file mode 100644
index 0000000000000..2bba7ac5b0078
--- /dev/null
+++ b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/component.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright __current_year__ 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {ContainWrapper} from '../../../src/preact/component';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from '../../../src/preact';
+__jss_import_use_styles__;
+
+/**
+ * @param {!__component_name_pascalcase__Def.Props} props
+ * @return {PreactDef.Renderable}
+ */
+export function __component_name_pascalcase__({exampleTagNameProp, ...rest}) {
+  // Examples of state and hooks
+  // __do_not_submit__: This is example code only.
+  const [exampleValue, setExampleValue] = useState(0);
+  const exampleRef = useRef(null);
+  __jss_styles_use_styles__;
+
+  useCallback(() => {/* Do things */}, [])
+  useEffect(() => {/* Do things */}, [])
+  useLayoutEffect(() => {/* Do things */}, [])
+  useMemo(() => {/* Do things */}, [])
+
+  return (
+    <ContainWrapper layout size paint {...rest} >
+      {{exampleTagNameProp}}
+      <div className={__jss_styles_example_or_placeholder__}>
+        This is hidden
+      </div>
+    </ContainWrapper>
+  );
+}
diff --git a/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/component.type.js b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/component.type.js
new file mode 100644
index 0000000000000..976d96583d86a
--- /dev/null
+++ b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/component.type.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright __current_year__ 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.
+ */
+
+/** @externs */
+
+/** @const */
+var __component_name_pascalcase__Def = {};
+
+/**
+ * @typedef {{
+ *   exampleProperty: (string|undefined), (__do_not_submit__)
+ * }}
+ */
+__component_name_pascalcase__Def.Props;
+
+/** @interface */
+__component_name_pascalcase__Def.__component_name_pascalcase__Api = class {
+  /** Example: API method to toggle the component */
+  exampleToggle() {} // __do_not_submit__
+};
diff --git a/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/storybook/Basic.js b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/storybook/Basic.js
new file mode 100644
index 0000000000000..58163723bb93b
--- /dev/null
+++ b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/storybook/Basic.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright __current_year__ 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {__component_name_pascalcase__} from '../component'
+import {withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: '__component_name_pascalcase__',
+  component: __component_name_pascalcase__,
+  decorators: [withKnobs],
+};
+
+export const _default = () => {
+  // __do_not_submit__: This is example code only.
+  return (
+    <__component_name_pascalcase__
+      style={{width: 300, height: 200}}
+      example-property="example string property value"
+    >
+      This text is inside.
+    </__component_name_pascalcase__>
+  );
+};
diff --git a/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/test/test-amp-__component_name_hyphenated__.js b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/test/test-amp-__component_name_hyphenated__.js
new file mode 100644
index 0000000000000..69416d6defa3b
--- /dev/null
+++ b/build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/test/test-amp-__component_name_hyphenated__.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright __current_year__ 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.
+ */
+
+import '../amp-__component_name_hyphenated__';
+import {htmlFor} from '../../../../src/static-template';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-__component_name_hyphenated__-v__component_version__',
+  {
+    amp: {
+      extensions: ['amp-__component_name_hyphenated__:__component_version__'],
+    },
+  },
+  (env) => {
+    let win;
+    let doc;
+    let html;
+
+    beforeEach(async () => {
+      win = env.win;
+      doc = win.document;
+      html = htmlFor(doc);
+      toggleExperiment(win, 'bento-__component_name_hyphenated__', true, true);
+    });
+
+    it('example test renders', async () => {
+      const element = html`
+        <amp-__component_name_hyphenated__></amp-__component_name_hyphenated__>
+      `;
+      doc.body.appendChild(element);
+      await waitFor(() => element.isConnected, 'element connected');
+      expect(element.parentNode).to.equal(doc.body);
+    });
+  }
+);
diff --git a/build-system/tasks/make-extension/template/classic/examples/amp-__component_name_hyphenated__.html b/build-system/tasks/make-extension/template/classic/examples/amp-__component_name_hyphenated__.html
new file mode 100644
index 0000000000000..2a5f590fe6814
--- /dev/null
+++ b/build-system/tasks/make-extension/template/classic/examples/amp-__component_name_hyphenated__.html
@@ -0,0 +1,40 @@
+<!--
+  Copyright __current_year__ 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.
+-->
+<!DOCTYPE html>
+<html ⚡>
+  <!-- prettier-ignore -->
+  <head>
+    <meta charset="utf-8">
+    <title>amp-__component_name_hyphenated__ example</title>
+    <link rel="canonical" href="/examples/amp-__component_name_hyphenated__.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+      amp-__component_name_hyphenated__ {
+        color: red;
+      }
+    </style>
+    <script async custom-element="amp-__component_name_hyphenated__" src="https://cdn.ampproject.org/v0/amp-__component_name_hyphenated__-__component_version__.js"></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+  <body>
+    <amp-__component_name_hyphenated__
+      layout="responsive"
+      width="150"
+      height="80"
+    ></amp-__component_name_hyphenated__>
+  </body>
+</html>
diff --git a/build-system/tasks/make-extension/template/classic/extensions/amp-__component_name_hyphenated__/OWNERS b/build-system/tasks/make-extension/template/classic/extensions/amp-__component_name_hyphenated__/OWNERS
new file mode 100644
index 0000000000000..77a55ee52b285
--- /dev/null
+++ b/build-system/tasks/make-extension/template/classic/extensions/amp-__component_name_hyphenated__/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'ampproject/wg-components'}],
+    },
+  ],
+}
diff --git a/build-system/tasks/make-extension/template/classic/extensions/amp-__component_name_hyphenated__/__component_version__/amp-__component_name_hyphenated__.js b/build-system/tasks/make-extension/template/classic/extensions/amp-__component_name_hyphenated__/__component_version__/amp-__component_name_hyphenated__.js
new file mode 100644
index 0000000000000..a97bd2f7415b6
--- /dev/null
+++ b/build-system/tasks/make-extension/template/classic/extensions/amp-__component_name_hyphenated__/__component_version__/amp-__component_name_hyphenated__.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright __current_year__ 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.
+ */
+
+__css_import__;
+import {Layout} from '../../../src/layout';
+
+const TAG = 'amp-__component_name_hyphenated__';
+ 
+export class Amp__component_name_pascalcase__ extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    // __do_not_submit__: This is example code only.
+    super(element);
+
+    /** @private {string} */
+    this.myText_ = 'hello world';
+
+    /** @private {?Element} */
+    this.container_ = null;
+  }
+
+  /** @override */
+  buildCallback() {
+    this.container_ = this.element.ownerDocument.createElement('div');
+    this.container_.textContent = this.myText_;
+    this.element.appendChild(this.container_);
+    this.applyFillContent(this.container_, /* replacedContent */ true);
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout == Layout.RESPONSIVE;
+  }
+}
+
+AMP.extension(TAG, '__component_version__', AMP => {
+  AMP.registerElement(__register_element_args__);
+});
diff --git a/build-system/tasks/make-extension/template/classic/extensions/amp-__component_name_hyphenated__/__component_version__/test/test-amp-__component_name_hyphenated__.js b/build-system/tasks/make-extension/template/classic/extensions/amp-__component_name_hyphenated__/__component_version__/test/test-amp-__component_name_hyphenated__.js
new file mode 100644
index 0000000000000..8e4659796c59b
--- /dev/null
+++ b/build-system/tasks/make-extension/template/classic/extensions/amp-__component_name_hyphenated__/__component_version__/test/test-amp-__component_name_hyphenated__.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright __current_year__ 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.
+ */
+
+import '../amp-__component_name_hyphenated__';
+import {htmlFor} from '../../../../src/static-template';
+
+describes.realWin(
+  'amp-__component_name_hyphenated__-v__component_version__',
+  {
+    amp: {
+      runtimeOn: true,
+      extensions: ['amp-__component_name_hyphenated__:__component_version__'],
+    },
+  },
+  (env) => {
+    let win;
+    let doc;
+    let html;
+
+    beforeEach(() => {
+      win = env.win;
+      doc = win.document;
+      html = htmlFor(doc);
+    });
+    
+    it('should contain "hello world" when built', async () => {
+      const element = html`
+        <amp-__component_name_hyphenated__
+          width="100"
+          height="10"
+          layout="responsive"
+        >
+        </amp-__component_name_hyphenated__>
+      `;
+      doc.body.appendChild(element);
+      await element.whenBuilt();
+      expect(element.querySelector('div').textContent).to.equal('hello world');
+    });
+  }
+);
diff --git a/build-system/tasks/make-extension/template/css/extensions/amp-__component_name_hyphenated__/__component_version__/amp-__component_name_hyphenated__.css b/build-system/tasks/make-extension/template/css/extensions/amp-__component_name_hyphenated__/__component_version__/amp-__component_name_hyphenated__.css
new file mode 100644
index 0000000000000..c9023a0c4d348
--- /dev/null
+++ b/build-system/tasks/make-extension/template/css/extensions/amp-__component_name_hyphenated__/__component_version__/amp-__component_name_hyphenated__.css
@@ -0,0 +1,19 @@
+/**
+ * Copyright __current_year__ 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.
+ */
+
+amp-__component_name_hyphenated__ {
+  /** Component styles */
+}
diff --git a/build-system/tasks/make-extension/template/jss/extensions/amp-__component_name_hyphenated__/__component_version__/component.jss.js b/build-system/tasks/make-extension/template/jss/extensions/amp-__component_name_hyphenated__/__component_version__/component.jss.js
new file mode 100644
index 0000000000000..a7c145b3d75e6
--- /dev/null
+++ b/build-system/tasks/make-extension/template/jss/extensions/amp-__component_name_hyphenated__/__component_version__/component.jss.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright __current_year__ 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+// __do_not_submit__: Example class used for styling
+const exampleContentHidden = {
+  display: 'none',
+};
+
+const JSS = {
+  exampleContentHidden,
+};
+
+// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
+// eslint-disable-next-line local/no-export-side-effect
+export const useStyles = createUseStyles(JSS);
diff --git a/build-system/tasks/make-extension/template/shared/extensions/amp-__component_name_hyphenated__/__component_version__/storybook/Basic.amp.js b/build-system/tasks/make-extension/template/shared/extensions/amp-__component_name_hyphenated__/__component_version__/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..012923b938216
--- /dev/null
+++ b/build-system/tasks/make-extension/template/shared/extensions/amp-__component_name_hyphenated__/__component_version__/storybook/Basic.amp.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright __current_year__ 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {withAmp} from '@ampproject/storybook-addon';
+import {withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'amp-__component_name_hyphenated__-__component_version_snakecase__',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [
+      {name: 'amp-__component_name_hyphenated__', version: '__component_version__'},
+    ],
+    __storybook_experiments_do_not_add_trailing_comma__
+  },
+};
+
+// __do_not_submit__: This is example code only.
+export const ExampleUseCase = () => {
+  return (
+    <amp-__component_name_hyphenated__
+      width="300"
+      height="200"
+      example-property="example string property value"
+    >
+      This text is inside.
+    </amp-__component_name_hyphenated__>
+  );
+};
+
+ExampleUseCase.story = {
+  name: 'Example use case story'
+};
diff --git a/build-system/tasks/make-extension/template/shared/extensions/amp-__component_name_hyphenated__/__component_version__/test/__validator__-amp-__component_name_hyphenated__.html b/build-system/tasks/make-extension/template/shared/extensions/amp-__component_name_hyphenated__/__component_version__/test/__validator__-amp-__component_name_hyphenated__.html
new file mode 100644
index 0000000000000..2a5f590fe6814
--- /dev/null
+++ b/build-system/tasks/make-extension/template/shared/extensions/amp-__component_name_hyphenated__/__component_version__/test/__validator__-amp-__component_name_hyphenated__.html
@@ -0,0 +1,40 @@
+<!--
+  Copyright __current_year__ 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.
+-->
+<!DOCTYPE html>
+<html ⚡>
+  <!-- prettier-ignore -->
+  <head>
+    <meta charset="utf-8">
+    <title>amp-__component_name_hyphenated__ example</title>
+    <link rel="canonical" href="/examples/amp-__component_name_hyphenated__.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+      amp-__component_name_hyphenated__ {
+        color: red;
+      }
+    </style>
+    <script async custom-element="amp-__component_name_hyphenated__" src="https://cdn.ampproject.org/v0/amp-__component_name_hyphenated__-__component_version__.js"></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+  <body>
+    <amp-__component_name_hyphenated__
+      layout="responsive"
+      width="150"
+      height="80"
+    ></amp-__component_name_hyphenated__>
+  </body>
+</html>
diff --git a/build-system/tasks/make-extension/template/shared/extensions/amp-__component_name_hyphenated__/__validator__-amp-__component_name_hyphenated__.protoascii b/build-system/tasks/make-extension/template/shared/extensions/amp-__component_name_hyphenated__/__validator__-amp-__component_name_hyphenated__.protoascii
new file mode 100644
index 0000000000000..e52970efc3115
--- /dev/null
+++ b/build-system/tasks/make-extension/template/shared/extensions/amp-__component_name_hyphenated__/__validator__-amp-__component_name_hyphenated__.protoascii
@@ -0,0 +1,43 @@
+#
+# Copyright __current_year__ 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.
+#
+
+tags: {  # amp-__component_name_hyphenated__
+  html_format: AMP
+  tag_name: "SCRIPT"
+  extension_spec: {
+    name: "amp-__component_name_hyphenated__"
+    version: "__component_version__"
+    version: "latest"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # <amp-__component_name_hyphenated__>
+  html_format: AMP
+  tag_name: "__component_name_hyphenated_capitalized__"
+  requires_extension: "amp-__component_name_hyphenated__"
+  attr_lists: "extended-amp-global"
+  spec_url: "https://amp.dev/documentation/components/amp-__component_name_hyphenated__/"
+  amp_layout: {
+    supported_layouts: CONTAINER
+    supported_layouts: FILL
+    supported_layouts: FIXED
+    supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
+    supported_layouts: INTRINSIC
+    supported_layouts: NODISPLAY
+    supported_layouts: RESPONSIVE
+  }
+}
diff --git a/build-system/tasks/make-extension/template/shared/extensions/amp-__component_name_hyphenated__/amp-__component_name_hyphenated__.md b/build-system/tasks/make-extension/template/shared/extensions/amp-__component_name_hyphenated__/amp-__component_name_hyphenated__.md
new file mode 100644
index 0000000000000..0874528fb3f47
--- /dev/null
+++ b/build-system/tasks/make-extension/template/shared/extensions/amp-__component_name_hyphenated__/amp-__component_name_hyphenated__.md
@@ -0,0 +1,267 @@
+---
+$category@: presentation
+formats:
+  - websites
+teaser:
+  text: Fill this in with teaser text to improve SEO. Use the component description.
+---
+
+<!--
+  All documentation starts with frontmatter. Front matter organizes documentation on amp.dev
+  and improves SEO.
+  * Include the relevant category(ies): ads-analytics, dynamic-content, layout, media, presentation, social, personalization
+  * List applicable format(s): websites, ads, stories, email
+  * Do not include markdown formatting in the frontmatter - plain text and punctionation only!
+  * Remove this comment!
+-->
+
+<!--
+Copyright __current_year__ 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.
+-->
+
+# amp-__component_name_hyphenated__
+
+<!--
+  If the component is relevant for more than one format and operates differently between these
+  formats, include and filter multiple content blocks and code samples.
+-->
+
+## Usage
+
+One to three paragraphs explaining the component usage. List important functionality. Explain why developers care about it.
+
+[filter formats=“websites”]
+
+Below is an example for websites.
+
+[example preview="inline" playground="true" imports="amp-__component_name_hyphenated__"]
+
+```html
+<amp-__component_name_hyphenated__ required-attribute>
+  I am a hello world inline executable code sample for websites!
+</amp-__component_name_hyphenated__>
+```
+
+[/example][/filter]
+
+<!--
+  * [Read more about filtering sections](https://amp.dev/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/?format=websites#filtering-sections)
+  * [Read more about executable code samples](https://amp.dev/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/?format=websites#preview-code-samples)
+ -->
+
+[filter formats=“ads”]
+
+Below is an example for ads.
+
+[example preview=“inline” playground=“true” imports="amp-__component_name_hyphenated__"]
+
+```html
+<amp-__component_name_hyphenated__ required-attribute>
+  I am a hello world inline executable code sample for ads!
+</amp-__component_name_hyphenated__>
+```
+
+[/example][/filter]
+
+### Standalone use outside valid AMP documents (optional)
+
+<!-- TODO: Remove backticks from link when guide is live -->
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+#### Example
+
+The example below demonstrates `amp-__component_name_hyphenated__` component in standalone use.
+
+[example preview="top-frame" playground="false"]
+```
+<head>
+...
+<script async src="https://cdn.ampproject.org/v0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-__component_name_hyphenated__-__component_version__.css">
+<script async custom-element="amp-__component_name_hyphenated__" src="https://cdn.ampproject.org/v0/amp-__component_name_hyphenated__-__component_version__.js"></script>
+...
+</head>
+<amp-__component_name_hyphenated__>
+  ...
+</amp-__component_name_hyphenated__>
+<button id="element-id">
+  Event Trigger
+</button>
+<script>
+  example of one API usage
+</script>
+```
+[/example]
+
+#### Interactivity and API usage
+
+Bento enabled components in standalone use are highly interactive through their API. In Bento standalone use, the element's API replaces AMP Actions and events and [`amp-bind`](https://amp.dev/documentation/components/amp-bind/?format=websites).
+
+The `amp-__component_name_hyphenated__` component API is accessible by including the following script tag in your document:
+
+```
+await customElements.whenDefined('amp-__component_name_hyphenated__-component');
+const api = await __component_name_pascalcase__.getApi();
+```
+
+The `amp-__component_name_hyphenated__` API allows you to register and respond to the following events:
+
+**event 1**
+Explanation of event, proper syntax/arguments.
+
+```
+example
+```
+
+**event 2**
+Explanation of event, proper syntax/arguments.
+
+```
+example
+```
+
+**action 1**
+Explanation of action, proper syntax/arguments.
+
+```
+example
+```
+
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-__component_name_hyphenated__-__component_version__.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible. 
+
+**Container type**
+
+The `amp-__component_name_hyphenated__` component has a container/non-container layout type. To ensure the component renders correctly, apply the following styles:
+
+```css
+example
+```
+
+**style/layout guidelines 2 (optional)**
+
+Information on how to layout and style `amp-__component_name_hyphenated__`.
+
+```
+example
+```
+
+### Behavior users should be aware of (optional)
+
+What to do if they want behavior. How to work around it.
+
+```html
+<amp-__component_name_hyphenated__ required-attribute>
+  Code sample of behavior or behavior workaround.
+</amp-__component_name_hyphenated__>
+```
+
+### Behavior restrictions
+
+What is allowed, what isn't.
+
+## Attributes
+
+### `attribute-name`
+
+Description of attribute. Use cases for this attribute.
+
+-   `attribute-value-option-one` (default): `attribute-option-one-value` does this to `amp-__component_name_hyphenated__`.
+-   `attribute-value-option-two`: `attribute-option-two-value` does this to `amp-__component_name_hyphenated__`.
+
+### `optional-attribute-name` (optional)
+
+Here, I write what `optional-attribute-name` will do to `amp-__component_name_hyphenated__`.
+
+## Actions (optional)
+
+### `action-name`
+
+Description of action. Use cases of `action-name`. Include all the nuances, such as: `amp-__component_name_hyphenated__` needs to be identified with an `id` to work.
+
+## Events (optional)
+
+### `event-name`
+
+Description of event. Use cases of event-name. Include all the nuances, such as: `amp-__component_name_hyphenated__` needs to be identified with an `id` to work.
+
+#### Valid AMP
+
+Syntax and argument details for use in fully valid AMP pages.
+
+[example preview=”top-frame” playground=”true”]
+
+```html
+<head>
+  <script
+    custom-element="amp-__component_name_hyphenated__"
+    async
+    src="https://cdn.ampproject.org/v0/amp-__component_name_hyphenated__-latest.js"
+  ></script>
+</head>
+<body>
+  <amp-__component_name_hyphenated__
+    required-attribute
+    on="event-name: my-button.show"
+  >
+    Hello World!
+  </amp-__component_name_hyphenated__>
+  <button id="my-button" hidden>
+    Here I am!
+  </button>
+</body>
+```
+
+[/example]
+
+#### Bento mode
+
+Syntax and argument details for use in Bento mode.
+
+```
+Bento example
+```
+
+## Styling (optional)
+
+Explain how to style the element.
+
+## Analytics (optional)
+
+Explain analytics.
+
+```html
+"configuration": {}
+```
+
+## Accessibility (optional)
+
+Accessibility information related to `amp-__component_name_hyphenated__`.
+
+## Version notes (optional)
+
+Information on version differences and migration notes.
+
+## Validation
+
+See [amp-__component_name_hyphenated__ rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-__component_name_hyphenated__/validator-amp-__component_name_hyphenated__.protoascii) in the AMP validator specification.
diff --git a/build-system/tasks/make-extension/test/template/test-1/file-__baz__.txt b/build-system/tasks/make-extension/test/template/test-1/file-__baz__.txt
new file mode 100644
index 0000000000000..c4957b5391e5b
--- /dev/null
+++ b/build-system/tasks/make-extension/test/template/test-1/file-__baz__.txt
@@ -0,0 +1 @@
+Constant.
diff --git a/build-system/tasks/make-extension/test/template/test-1/x-__foo__/__bar__.txt b/build-system/tasks/make-extension/test/template/test-1/x-__foo__/__bar__.txt
new file mode 100644
index 0000000000000..3b51aadb12565
--- /dev/null
+++ b/build-system/tasks/make-extension/test/template/test-1/x-__foo__/__bar__.txt
@@ -0,0 +1 @@
+This file is generated with values __foo__, __bar__, __baz__.
diff --git a/build-system/tasks/make-extension/test/template/test-2/from-test-2/__component_name_hyphenated__.txt b/build-system/tasks/make-extension/test/template/test-2/from-test-2/__component_name_hyphenated__.txt
new file mode 100644
index 0000000000000..257cc5642cb1a
--- /dev/null
+++ b/build-system/tasks/make-extension/test/template/test-2/from-test-2/__component_name_hyphenated__.txt
@@ -0,0 +1 @@
+foo
diff --git a/build-system/tasks/make-extension/test/test.js b/build-system/tasks/make-extension/test/test.js
new file mode 100644
index 0000000000000..dc46813e6470a
--- /dev/null
+++ b/build-system/tasks/make-extension/test/test.js
@@ -0,0 +1,351 @@
+/**
+ * Copyright 2021 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.
+ */
+const ava = require('ava');
+const path = require('path');
+const tempy = require('tempy');
+const {mkdirp, readFile, readJson, writeFile, writeJson} = require('fs-extra');
+
+const stubbedCalls = {};
+
+async function stubModule(path, name, fn, callsFake = () => {}) {
+  const imported = require(path);
+  const original = imported[name];
+  imported[name] = (...args) => {
+    const calls = stubbedCalls[name] || (stubbedCalls[name] = []);
+    calls.push(args);
+    return callsFake(...args);
+  };
+  await fn();
+  imported.log = original;
+}
+
+const test = (name, cb) =>
+  ava(name, (t) =>
+    // Disable logging since it clutters the test output.
+    stubModule('../../../common/logging', 'log', () =>
+      stubModule('../../../common/logging', 'logLocalDev', () =>
+        // Disable prettier formatting since it's slow.
+        stubModule('../format', 'format', () =>
+          // Run test
+          cb(t)
+        )
+      )
+    )
+  );
+
+test('writeFromTemplateDir', (t) =>
+  tempy.directory.task(async (dir) => {
+    const {writeFromTemplateDir} = require('..');
+    await writeFromTemplateDir(
+      path.join(__dirname, 'template/test-1'),
+      {
+        '__foo__': 'value-of-foo',
+        '__bar__': 'bar-value',
+        '__baz__': 'bazzzzz',
+      },
+      dir
+    );
+    t.is(
+      await readFile(`${dir}/x-value-of-foo/bar-value.txt`, 'utf-8'),
+      'This file is generated with values value-of-foo, bar-value, bazzzzz.\n'
+    );
+    t.is(await readFile(`${dir}/file-bazzzzz.txt`, 'utf-8'), 'Constant.\n');
+  }));
+
+test('writeFromTemplateDir skips existing files', (t) =>
+  tempy.directory.task(async (dir) => {
+    const {writeFromTemplateDir} = require('..');
+    await mkdirp(`${dir}/x-value-of-foo/`);
+    await writeFile(`${dir}/x-value-of-foo/bar-value.txt`, 'Original.\n');
+    await writeFromTemplateDir(
+      path.join(__dirname, 'template/test-1'),
+      {
+        '__foo__': 'value-of-foo',
+        '__bar__': 'bar-value',
+        '__baz__': 'bazzzzz',
+      },
+      dir
+    );
+    t.is(
+      await readFile(`${dir}/x-value-of-foo/bar-value.txt`, 'utf-8'),
+      'Original.\n'
+    );
+    t.is(await readFile(`${dir}/file-bazzzzz.txt`, 'utf-8'), 'Constant.\n');
+  }));
+
+test('makeExtensionFromTemplates merges multiple templates', (t) =>
+  tempy.directory.task(async (dir) => {
+    const {makeExtensionFromTemplates} = require('..');
+    await makeExtensionFromTemplates(
+      [
+        path.join(__dirname, 'template/test-1'),
+        path.join(__dirname, 'template/test-2'),
+      ],
+      dir,
+      {
+        name: 'my-extension-name',
+      }
+    );
+
+    t.is(
+      await readFile(`${dir}/from-test-2/my-extension-name.txt`, 'utf-8'),
+      'foo\n'
+    );
+
+    // Replacement keys for test-1 are placeholders and are not set by
+    // makeExtensionFromTemplates, so they remain in the generated files.
+    t.is(
+      await readFile(`${dir}/x-__foo__/__bar__.txt`, 'utf-8'),
+      'This file is generated with values __foo__, __bar__, __baz__.\n'
+    );
+    t.is(await readFile(`${dir}/file-__baz__.txt`, 'utf-8'), 'Constant.\n');
+  }));
+
+test('makeExtensionFromTemplates does not print unit test blurb if a test file is not created', (t) =>
+  tempy.directory.task(async (dir) => {
+    const {makeExtensionFromTemplates} = require('..');
+    await makeExtensionFromTemplates(
+      [path.join(__dirname, 'template/test-1')],
+      dir,
+      {name: 'my-extension-name'}
+    );
+    t.false(
+      !!stubbedCalls.logLocalDev.find((args) =>
+        args.find((arg) => arg.includes('amp unit --files'))
+      )
+    );
+  }));
+
+test('makeExtensionFromTemplates prints unit test blurb if a test file is created', (t) =>
+  tempy.directory.task(async (dir) => {
+    const {makeExtensionFromTemplates} = require('..');
+    await makeExtensionFromTemplates(
+      [path.join(__dirname, '../template/bento')],
+      dir,
+      {name: 'my-extension-name'}
+    );
+    t.true(
+      !!stubbedCalls.logLocalDev.find((args) =>
+        args.find((arg) => arg.includes('amp unit --files'))
+      )
+    );
+  }));
+
+test('makeExtensionFromTemplates does not print Storybook blurb if a Storybook file is not created', (t) =>
+  tempy.directory.task(async (dir) => {
+    const {makeExtensionFromTemplates} = require('..');
+    await makeExtensionFromTemplates(
+      [path.join(__dirname, 'template/test-1')],
+      dir,
+      {name: 'my-extension-name'}
+    );
+    t.false(
+      !!stubbedCalls.logLocalDev.find((args) =>
+        args.find((arg) => arg.includes('amp storybook'))
+      )
+    );
+  }));
+
+test('makeExtensionFromTemplates prints Storybook blurb if a Storybook file is created', (t) =>
+  tempy.directory.task(async (dir) => {
+    const {makeExtensionFromTemplates} = require('..');
+    await makeExtensionFromTemplates(
+      [path.join(__dirname, '../template/bento')],
+      dir,
+      {name: 'my-extension-name'}
+    );
+    t.true(
+      !!stubbedCalls.logLocalDev.find((args) =>
+        args.find((arg) => arg.includes('amp storybook'))
+      )
+    );
+  }));
+
+test('makeExtensionFromTemplates does not print validator blurb if a validator-*.html file is not created', (t) =>
+  tempy.directory.task(async (dir) => {
+    const {makeExtensionFromTemplates} = require('..');
+    await makeExtensionFromTemplates(
+      [path.join(__dirname, 'template/test-1')],
+      dir,
+      {name: 'my-extension-name'}
+    );
+    t.false(
+      !!stubbedCalls.logLocalDev.find((args) =>
+        args.find((arg) => arg.includes('amp validator --update_tests'))
+      )
+    );
+  }));
+
+test('makeExtensionFromTemplates prints validator blurb if a validator-*.html file is created', (t) =>
+  tempy.directory.task(async (dir) => {
+    const {makeExtensionFromTemplates} = require('..');
+    await makeExtensionFromTemplates(
+      [path.join(__dirname, '../template/shared')],
+      dir,
+      {name: 'my-extension-name'}
+    );
+    t.true(
+      !!stubbedCalls.logLocalDev.find((args) =>
+        args.find((arg) => arg.includes('amp validator --update_tests'))
+      )
+    );
+  }));
+
+test('insertExtensionBundlesConfig inserts new entry', (t) =>
+  tempy.file.task(
+    async (destination) => {
+      const {insertExtensionBundlesConfig} = require('..');
+      await writeJson(destination, [
+        {
+          name: '_',
+        },
+        {
+          name: 'z',
+        },
+      ]);
+
+      await insertExtensionBundlesConfig(
+        {
+          name: 'a',
+          version: 'x',
+          options: {hasCss: true},
+        },
+        destination
+      );
+
+      t.deepEqual(await readJson(destination), [
+        // inserted in lexicographical order by name:
+        {
+          name: '_',
+        },
+        {
+          name: 'a',
+          version: 'x',
+          latestVersion: 'x',
+          options: {hasCss: true},
+        },
+        {
+          name: 'z',
+        },
+      ]);
+    },
+    {extension: 'json'}
+  ));
+
+test('insertExtensionBundlesConfig uses existing latestVersion', (t) =>
+  tempy.file.task(
+    async (destination) => {
+      const {insertExtensionBundlesConfig} = require('..');
+      await writeJson(destination, [
+        {
+          name: 'foo',
+          version: 'existing version',
+          latestVersion: 'existing version',
+        },
+      ]);
+
+      await insertExtensionBundlesConfig(
+        {
+          name: 'foo',
+          version: 'new version',
+        },
+        destination
+      );
+
+      t.deepEqual(await readJson(destination), [
+        {
+          name: 'foo',
+          version: 'existing version',
+          latestVersion: 'existing version',
+        },
+        {
+          name: 'foo',
+          version: 'new version',
+          latestVersion: 'existing version',
+        },
+      ]);
+    },
+    {extension: 'json'}
+  ));
+
+test('insertExtensionBundlesConfig uses passed latestVersion', (t) =>
+  tempy.file.task(
+    async (destination) => {
+      const {insertExtensionBundlesConfig} = require('..');
+      await writeJson(destination, [
+        {
+          name: 'foo',
+          version: '_',
+        },
+      ]);
+
+      await insertExtensionBundlesConfig(
+        {
+          name: 'foo',
+          version: 'new version',
+          latestVersion: 'new version',
+        },
+        destination
+      );
+
+      t.deepEqual(await readJson(destination), [
+        {
+          name: 'foo',
+          version: '_',
+        },
+        {
+          name: 'foo',
+          version: 'new version',
+          latestVersion: 'new version',
+        },
+      ]);
+    },
+    {extension: 'json'}
+  ));
+
+test('insertExtensionBundlesConfig uses version as latestVersion', (t) =>
+  tempy.file.task(
+    async (destination) => {
+      const {insertExtensionBundlesConfig} = require('..');
+      await writeJson(destination, [
+        {
+          name: 'foo',
+          version: '_',
+        },
+      ]);
+
+      await insertExtensionBundlesConfig(
+        {
+          name: 'foo',
+          version: 'new version',
+        },
+        destination
+      );
+
+      t.deepEqual(await readJson(destination), [
+        {
+          name: 'foo',
+          version: '_',
+        },
+        {
+          name: 'foo',
+          version: 'new version',
+          latestVersion: 'new version',
+        },
+      ]);
+    },
+    {extension: 'json'}
+  ));
diff --git a/build-system/tasks/markdown-toc/OWNERS b/build-system/tasks/markdown-toc/OWNERS
new file mode 100644
index 0000000000000..cded1b6997e2b
--- /dev/null
+++ b/build-system/tasks/markdown-toc/OWNERS
@@ -0,0 +1,13 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {name: 'ampproject/wg-infra'},
+        {name: 'alanorozco', notify: true},
+      ],
+    },
+  ],
+}
diff --git a/build-system/tasks/markdown-toc/README.md b/build-system/tasks/markdown-toc/README.md
new file mode 100644
index 0000000000000..82c49f71ee80f
--- /dev/null
+++ b/build-system/tasks/markdown-toc/README.md
@@ -0,0 +1,77 @@
+# markdown-toc
+
+Ensures that Markdown files in this repository have updated Tables-Of-Content.
+
+```
+amp markdown-toc [--fix]
+```
+
+## Usage
+
+Files must contain the following header comment:
+
+```markdown
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+```
+
+Running the mentioned command inserts the TOC after the comment if necessary:
+
+```diff
+  # Hello
+
+  <!--
+    (Do not remove or edit this comment.)
+
+    This table-of-contents is automatically generated. To generate it, run:
+      amp markdown-toc --fix
+  -->
+
++ -   [Section](#section)
+
+  ## Section
+
+  Content.
+```
+
+These files are checked during Continuous Integration so they will stay up-to-date.
+
+## Options
+
+You may configure how you'd like to create and format a TOC by including a second comment including a JSON object. This object contains [`markdown-toc` options](https://github.com/jonschlinkert/markdown-toc#options).
+
+For example, the following options:
+
+```json
+{"maxdepth": 1}
+```
+
+In this markdown file:
+
+```markdown
+# Hello
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+<!-- {"maxdepth": 1} -->
+
+- [included header one](#included-header-one)
+- [included header two](#included-header-two)
+
+## included header one
+
+### this header is not included
+
+because of `{"maxdepth": 1}` above
+
+## included header two
+```
diff --git a/build-system/tasks/markdown-toc/index.js b/build-system/tasks/markdown-toc/index.js
new file mode 100644
index 0000000000000..683df0d1ee39b
--- /dev/null
+++ b/build-system/tasks/markdown-toc/index.js
@@ -0,0 +1,206 @@
+/**
+ * Copyright 2021 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.
+ */
+const globby = require('globby');
+const path = require('path');
+const prettier = require('prettier');
+const toc = require('markdown-toc');
+const {getStdout} = require('../../common/process');
+const {green} = require('../../common/colors');
+const {logOnSameLineLocalDev} = require('../../common/logging');
+const {readFile} = require('fs-extra');
+const {writeDiffOrFail} = require('../../common/diff');
+
+const task = 'markdown-toc';
+
+const header = `<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->`;
+
+// Case-insensitive, allows multiple newlines and arbitrary indentation.
+const headerRegexp = new RegExp(
+  header
+    .split(/\n+/g)
+    .map(
+      (line) =>
+        `\\s*${line.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/^\s+/, '')}`
+    )
+    .join('\n+'),
+  'im'
+);
+
+/**
+ * @param {string} content
+ * @return {?string}
+ */
+function getFrontmatter(content) {
+  const end = content.search(/(\n-|\n#)/m);
+  if (end < 0) {
+    return null;
+  }
+  const withWhitespace = content.substr(0, end);
+  if (withWhitespace.trim().length < 1) {
+    return null;
+  }
+  return withWhitespace;
+}
+
+/**
+ * @param {?string} maybeComment
+ * @return {?Object}
+ */
+function isolateCommentJson(maybeComment) {
+  if (!maybeComment) {
+    return null;
+  }
+
+  const json = maybeComment.replace('<!--', '').replace('-->', '').trim();
+  if (!json) {
+    return null;
+  }
+
+  try {
+    const options = JSON.parse(json);
+    return options;
+  } catch (_) {
+    return null;
+  }
+}
+
+/**
+ * @param {string} content
+ * @return {Promise<?string>}
+ */
+async function overrideToc(content) {
+  const headerMatch = content.match(headerRegexp);
+
+  if (!headerMatch || !headerMatch.length || headerMatch.index === undefined) {
+    return null;
+  }
+
+  const headerEnd = headerMatch.index + headerMatch[0].length;
+
+  const afterHeader = content.substr(headerEnd);
+
+  const frontmatter = getFrontmatter(afterHeader);
+  const frontmatterOptions = isolateCommentJson(frontmatter);
+
+  const afterFrontmatter = frontmatter
+    ? afterHeader.substr(afterHeader.indexOf(frontmatter) + frontmatter.length)
+    : afterHeader;
+
+  const listEnd = afterFrontmatter.search(/\n[^-\s]/m);
+
+  if (listEnd < 0) {
+    return null;
+  }
+
+  // https://github.com/jonschlinkert/markdown-toc#options
+  const options = {
+    firsth1: false,
+    ...frontmatterOptions,
+    // Don't allow to override `bullets` because it breaks assumptions.
+    bullets: '-',
+  };
+
+  const overridden = [
+    content.substr(0, headerEnd),
+    frontmatter,
+    toc(content, options).content,
+    afterFrontmatter.substr(listEnd),
+  ].join('\n');
+
+  return prettier.format(overridden, {
+    ...(await prettier.resolveConfig('_.md')),
+    parser: 'markdown',
+  });
+}
+
+/**
+ * @param {string} cwd
+ * @return {Promise<Object<string, ?string>>}
+ */
+async function overrideTocGlob(cwd) {
+  const glob = [
+    '**/*.md',
+    '!**/{node_modules,build,dist,dist.3p,dist.tools,.karma-cache}/**',
+  ];
+  const files = globby.sync(glob, {cwd}).map((file) => path.join(cwd, file));
+  const filesIncludingString = getStdout(
+    [`grep -irl "${task}"`, ...files].join(' ')
+  )
+    .trim()
+    .split('\n');
+
+  /** @type {Object<string, ?string>} */
+  const result = {};
+
+  for (const filename of filesIncludingString) {
+    const content = await readFile(filename, 'utf-8');
+    const tentative = await overrideToc(content);
+
+    if (!tentative) {
+      continue;
+    }
+
+    result[filename] = tentative === content ? null : tentative;
+  }
+
+  return result;
+}
+
+/**
+ * Entry point for the `amp markdown-toc` task.
+ * @return {Promise<void>}
+ */
+async function markdownToc() {
+  const result = await overrideTocGlob('.');
+  let errored = false;
+  for (const filename in result) {
+    if (filename.indexOf('markdown-toc/') >= 0) {
+      continue;
+    }
+    const tentative = result[filename];
+    if (!tentative) {
+      logOnSameLineLocalDev(green('Checked: ') + filename);
+    } else {
+      try {
+        writeDiffOrFail('markdown-toc', filename, tentative);
+      } catch (_) {
+        errored = true;
+      }
+    }
+  }
+  if (errored) {
+    throw new Error('Files are outdated');
+  }
+}
+
+module.exports = {
+  headerRegExpForTesting: headerRegexp,
+  markdownToc,
+  overrideTocGlob,
+  overrideToc,
+};
+
+markdownToc.description =
+  'Finds Markdown files that contain table of contents and updates them.';
+
+markdownToc.flags = {
+  'fix': 'Write to file',
+};
diff --git a/build-system/tasks/markdown-toc/test/all-are-complete/allows-paragraph-after-list.md b/build-system/tasks/markdown-toc/test/all-are-complete/allows-paragraph-after-list.md
new file mode 100644
index 0000000000000..ec0d908a5b446
--- /dev/null
+++ b/build-system/tasks/markdown-toc/test/all-are-complete/allows-paragraph-after-list.md
@@ -0,0 +1,16 @@
+# allows-paragraph-after-list.md
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+-   [section](#section)
+
+This paragraph should be preserved.
+
+## section
+
+content
diff --git a/build-system/tasks/markdown-toc/test/all-are-complete/arbitrary-header-indentation.md b/build-system/tasks/markdown-toc/test/all-are-complete/arbitrary-header-indentation.md
new file mode 100644
index 0000000000000..ff9b154e3da6e
--- /dev/null
+++ b/build-system/tasks/markdown-toc/test/all-are-complete/arbitrary-header-indentation.md
@@ -0,0 +1,18 @@
+# arbitrary-header-indentation.md
+
+This TOC header has newlines and indentation that doesn't match the lookup string as defined, but should still be matched.
+
+<!--
+
+    (Do not remove or edit this comment.)
+      This table-of-contents is automatically generated. To generate it, run:
+
+
+amp markdown-toc --fix
+-->
+
+-   [section](#section)
+
+## section
+
+content
diff --git a/build-system/tasks/markdown-toc/test/all-are-complete/complete.md b/build-system/tasks/markdown-toc/test/all-are-complete/complete.md
new file mode 100644
index 0000000000000..c073203aace24
--- /dev/null
+++ b/build-system/tasks/markdown-toc/test/all-are-complete/complete.md
@@ -0,0 +1,27 @@
+# complete.md
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+-   [tacos](#tacos)
+    -   [asada](#asada)
+    -   [al pastor](#al-pastor)
+    -   [veggie](#veggie)
+
+## tacos
+
+### asada
+
+asada
+
+### al pastor
+
+al pastor
+
+### veggie
+
+veggie
diff --git a/build-system/tasks/markdown-toc/test/all-are-complete/ignores-unparsable-options.md b/build-system/tasks/markdown-toc/test/all-are-complete/ignores-unparsable-options.md
new file mode 100644
index 0000000000000..121b038c3f583
--- /dev/null
+++ b/build-system/tasks/markdown-toc/test/all-are-complete/ignores-unparsable-options.md
@@ -0,0 +1,18 @@
+# ignores-unparsable-options.md
+
+This file has unparsable TOC options, but should still have a TOC and should not fail.
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+<!-- unparsable -->
+
+-   [section](#section)
+
+## section
+
+content
diff --git a/build-system/tasks/markdown-toc/test/all-are-complete/uses-options.md b/build-system/tasks/markdown-toc/test/all-are-complete/uses-options.md
new file mode 100644
index 0000000000000..af94515431f8d
--- /dev/null
+++ b/build-system/tasks/markdown-toc/test/all-are-complete/uses-options.md
@@ -0,0 +1,21 @@
+# uses-options.md
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+<!-- {"maxdepth": 1} -->
+
+-   [included header one](#included-header-one)
+-   [included header two](#included-header-two)
+
+## included header one
+
+### this header is not included
+
+because of `{"maxdepth": 1}` above
+
+## included header two
diff --git a/build-system/tasks/markdown-toc/test/some-are-incomplete/complete.md b/build-system/tasks/markdown-toc/test/some-are-incomplete/complete.md
new file mode 100644
index 0000000000000..d4f7208478c1e
--- /dev/null
+++ b/build-system/tasks/markdown-toc/test/some-are-incomplete/complete.md
@@ -0,0 +1,14 @@
+# some-are-incomplete
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+-   [What's this?](#whats-this)
+
+## What's this?
+
+This file is either `complete.md` or `incomplete.md`. One of them lacks a TOC.
diff --git a/build-system/tasks/markdown-toc/test/some-are-incomplete/incomplete.md b/build-system/tasks/markdown-toc/test/some-are-incomplete/incomplete.md
new file mode 100644
index 0000000000000..6b9bd037c0a7d
--- /dev/null
+++ b/build-system/tasks/markdown-toc/test/some-are-incomplete/incomplete.md
@@ -0,0 +1,12 @@
+# some-are-incomplete
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+## What's this?
+
+This file is either `complete.md` or `incomplete.md`. One of them lacks a TOC.
diff --git a/build-system/tasks/markdown-toc/test/some-are-incomplete/should-not-appear-in-result.md b/build-system/tasks/markdown-toc/test/some-are-incomplete/should-not-appear-in-result.md
new file mode 100644
index 0000000000000..57a2d7694e8bb
--- /dev/null
+++ b/build-system/tasks/markdown-toc/test/some-are-incomplete/should-not-appear-in-result.md
@@ -0,0 +1 @@
+This file should be ignored because it lacks a TOC comment header.
diff --git a/build-system/tasks/markdown-toc/test/test.js b/build-system/tasks/markdown-toc/test/test.js
new file mode 100644
index 0000000000000..b4ce616b9132b
--- /dev/null
+++ b/build-system/tasks/markdown-toc/test/test.js
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2021 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.
+ */
+const globby = require('globby');
+const path = require('path');
+const test = require('ava');
+const {headerRegExpForTesting, overrideToc, overrideTocGlob} = require('../');
+const {readFile} = require('fs-extra');
+
+const dirname = path.relative(process.cwd(), __dirname);
+
+test('README.md includes correct header', async (t) => {
+  const expectedFoundTimes = 3;
+
+  const filename = path.join(dirname, '../README.md');
+  const content = await readFile(filename, 'utf-8');
+
+  const {length} = content.match(
+    new RegExp(headerRegExpForTesting.source, 'gim')
+  );
+  t.is(
+    length,
+    expectedFoundTimes,
+    `${filename} should include TOC header comment ${expectedFoundTimes} times`
+  );
+});
+
+test('overrideToc ./all-are-complete', async (t) => {
+  for (const filename of globby.sync(`${dirname}/all-are-complete/**/*.md`)) {
+    const content = await readFile(filename, 'utf-8');
+    t.deepEqual(await overrideToc(content), content);
+  }
+});
+
+test('overrideTocGlob ./some-are-incomplete', async (t) => {
+  const dir = `${dirname}/some-are-incomplete`;
+  const expected = {
+    [`${dir}/complete.md`]: null,
+    [`${dir}/incomplete.md`]:
+      // Has exact same content but with TOC
+      await readFile(`${dir}/complete.md`, 'utf-8'),
+  };
+  t.deepEqual(await overrideTocGlob(dir), expected);
+});
diff --git a/build-system/tasks/mocha-ci-reporter.js b/build-system/tasks/mocha-ci-reporter.js
deleted file mode 100644
index a67c32d44188a..0000000000000
--- a/build-system/tasks/mocha-ci-reporter.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * 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 {Base} = require('mocha').reporters;
-const {inherits} = require('mocha').utils;
-const {reportTestFinished} = require('./report-test-status');
-const {symbols} = require('./karma.conf').mochaReporter;
-
-/**
- * Custom Mocha reporter for CI builds.
- * Mimics the style of the Karma reporter on Travis.
- * @param {*} runner
- */
-function ciReporter(runner) {
-  Base.call(this, runner);
-  const self = this;
-
-  runner.on('pass', function () {
-    process.stdout.write(Base.color('green', symbols.success));
-  });
-
-  runner.on('pending', function () {
-    process.stdout.write(Base.color('bright yellow', symbols.info));
-  });
-
-  runner.on('fail', function () {
-    process.stdout.write(Base.color('fail', symbols.error));
-  });
-
-  runner.on('end', function () {
-    epilogue();
-  });
-
-  function epilogue() {
-    const {failures, stats} = self;
-    reportTestFinished(stats.passes, stats.failures);
-
-    Base.list(failures);
-    process.stdout.write(
-      `Executed ${stats.failures + stats.passes} of ${stats.tests} ` +
-        `(Skipped ${stats.pending}) `
-    );
-    if (stats.failures == 0) {
-      process.stdout.write(Base.color('green', 'SUCCESS \n'));
-    } else {
-      process.stdout.write(Base.color('fail', `${stats.failures} FAILED \n`));
-    }
-  }
-}
-
-inherits(ciReporter, Base);
-module.exports = ciReporter;
diff --git a/build-system/tasks/nailgun-compile b/build-system/tasks/nailgun-compile
deleted file mode 100755
index 83391c7454a5a..0000000000000
--- a/build-system/tasks/nailgun-compile
+++ /dev/null
@@ -1,27 +0,0 @@
-#!/bin/bash
-#
-# 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.
-#
-# This script is a wrapper around third-party/nailgun/nailgun-runner.
-#
-# Usage:
-# ⤷ To start a server: gulp nailgun-start
-# ⤷ To compile code: build-system/tasks/nailgun-compile <args>
-# ⤷ To stop the server: gulp nailgun-stop
-
-SCRIPT=${BASH_SOURCE[0]}
-TASKS_DIR=$(dirname "$SCRIPT")
-
-eval $TASKS_DIR/../../third_party/nailgun/nailgun-runner org.ampproject.AmpCommandLineRunner -- "$@"
diff --git a/build-system/tasks/nailgun.js b/build-system/tasks/nailgun.js
deleted file mode 100644
index cec3cd459ebda..0000000000000
--- a/build-system/tasks/nailgun.js
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * 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 argv = require('minimist')(process.argv.slice(2));
-const colors = require('ansi-colors');
-const log = require('fancy-log');
-const sleep = require('sleep-promise');
-const {exec, execScriptAsync, getStdout} = require('../common/exec');
-const {green, red, cyan, yellow} = colors;
-const {maybeGenerateRunner} = require('./generate-runner');
-
-// Used to start and stop the Closure nailgun server
-let nailgunRunnerReplacer;
-const nailgunRunner = require.resolve(
-  '../../third_party/nailgun/nailgun-runner'
-);
-const nailgunServer = require.resolve(
-  '../../third_party/nailgun/nailgun-server.jar'
-);
-const DEFAULT_NAILGUN_PORT = '2113';
-const CHECK_TYPES_NAILGUN_PORT = '2114';
-const DIST_NAILGUN_PORT = '2115';
-const NAILGUN_STARTUP_TIMEOUT_MS = 5 * 1000;
-const NAILGUN_STOP_TIMEOUT_MS = 5 * 1000;
-
-/**
- * Replaces the default compiler binary with nailgun on linux and macos
- * @return {?NodeRequire}
- */
-function maybeReplaceDefaultCompiler() {
-  if (process.platform == 'darwin') {
-    return require('require-hijack')
-      .replace('google-closure-compiler-osx')
-      .with(nailgunRunner);
-  } else if (process.platform == 'linux') {
-    return require('require-hijack')
-      .replace('google-closure-compiler-linux')
-      .with(nailgunRunner);
-  } else {
-    log(
-      yellow('WARNING:'),
-      'Cannot run',
-      cyan('nailgun-server.jar'),
-      'on',
-      cyan(process.platform)
-    );
-    log(
-      yellow('WARNING:'),
-      'Closure compiler will be significantly slower than on',
-      cyan('macos'),
-      'or',
-      cyan('linux')
-    );
-    return null;
-  }
-}
-
-/**
- * Starts a nailgun server (provides a fast-running closure compiler instance)
- * @param {string} port
- * @param {boolean} detached
- */
-async function startNailgunServer(port, detached) {
-  await maybeGenerateRunner(port);
-
-  if (argv.disable_nailgun) {
-    return;
-  }
-
-  nailgunRunnerReplacer = maybeReplaceDefaultCompiler();
-  if (!nailgunRunnerReplacer) {
-    return;
-  }
-
-  // Start up the nailgun server after cleaning up old instances (if any)
-  const customRunner = require.resolve(`../runner/dist/${port}/runner.jar`);
-  const startNailgunServerCmd =
-    'java -XX:+TieredCompilation -server -cp ' +
-    `${nailgunServer}:${customRunner} ` +
-    `com.facebook.nailgun.NGServer ${port}`;
-  const stopNailgunServerCmd = `${nailgunRunner} --nailgun-port ${port} ng-stop`;
-  const getVersionCmd =
-    `${nailgunRunner} --nailgun-port ${port} ` +
-    'org.ampproject.AmpCommandLineRunner -- --version';
-  exec(stopNailgunServerCmd, {stdio: 'pipe'});
-  const nailgunServerProcess = execScriptAsync(startNailgunServerCmd, {
-    stdio: detached ? 'ignore' : 'pipe',
-    detached,
-  });
-  if (detached) {
-    nailgunServerProcess.unref();
-  }
-
-  // Ensure that the nailgun server is up and running
-  const end = Date.now() + NAILGUN_STARTUP_TIMEOUT_MS;
-  while (Date.now() < end) {
-    try {
-      const version = getStdout(getVersionCmd).trim();
-      if (/Version/.test(version)) {
-        log('Started', cyan('nailgun-server.jar'), 'on port', cyan(port));
-        return;
-      }
-    } catch (e) {
-      await sleep(1000);
-    }
-  }
-  log(
-    red('ERROR:'),
-    'Could not start',
-    cyan('nailgun-server.jar'),
-    'on port',
-    cyan(port) + '...'
-  );
-  process.exit(1);
-}
-
-/**
- * Stops the nailgun server if it's running, and restores the binary used by
- * google-closure-compiler
- * @param {string} port
- */
-async function stopNailgunServer(port) {
-  if (argv.disable_nailgun) {
-    return;
-  }
-
-  if (nailgunRunnerReplacer) {
-    nailgunRunnerReplacer.restore();
-  }
-  if (process.platform == 'darwin' || process.platform == 'linux') {
-    const stopNailgunServerCmd = `${nailgunRunner} --nailgun-port ${port} ng-stop`;
-    const stopped = exec(stopNailgunServerCmd, {
-      stdio: 'pipe',
-      timeout: NAILGUN_STOP_TIMEOUT_MS,
-    });
-    if (stopped.status == 0) {
-      log('Stopped', cyan('nailgun-server.jar'), 'on port', cyan(port));
-    } else {
-      log(
-        yellow('WARNING:'),
-        'Could not stop',
-        cyan('nailgun-server.jar'),
-        'on port',
-        cyan(port)
-      );
-      log(red(stopped.stderr));
-    }
-  }
-}
-
-async function nailgunStart() {
-  log(green('Usage:'));
-  log('⤷ To start a server:', cyan('gulp nailgun-start'));
-  log('⤷ To compile code:', cyan('build-system/tasks/nailgun-compile <args>'));
-  log('⤷ To stop the server:', cyan('gulp nailgun-stop'));
-  await startNailgunServer(DEFAULT_NAILGUN_PORT, /* detached */ true);
-}
-
-async function nailgunStop() {
-  await stopNailgunServer(DEFAULT_NAILGUN_PORT);
-}
-
-module.exports = {
-  checkTypesNailgunPort: CHECK_TYPES_NAILGUN_PORT,
-  distNailgunPort: DIST_NAILGUN_PORT,
-  nailgunStart,
-  nailgunStop,
-  startNailgunServer,
-  stopNailgunServer,
-};
-
-nailgunStart.description = 'Starts up a nailgun server for closure compiler';
-nailgunStop.description = 'Stops an already running nailgun server';
diff --git a/build-system/tasks/performance-urls.js b/build-system/tasks/performance-urls.js
index 5945a519a0fd8..dac3fff46ef56 100644
--- a/build-system/tasks/performance-urls.js
+++ b/build-system/tasks/performance-urls.js
@@ -14,64 +14,43 @@
  * limitations under the License.
  */
 
-const colors = require('ansi-colors');
 const fs = require('fs');
-const gulp = require('gulp');
-const log = require('fancy-log');
 const path = require('path');
-const through2 = require('through2');
+const {cyan, green, red} = require('../common/colors');
+const {log} = require('../common/logging');
 
-const CONFIG_PATH = 'build-system/tasks/performance/config.json';
+const CONFIG_PATH = './performance/config.json';
 const LOCAL_HOST_URL = 'http://localhost:8000/';
 
 /**
- * Throws an error with the given message. Duplicate function
- * located in check-sourcemaps.js
- *
- * @param {string} message
- */
-function throwError(message) {
-  const err = new Error(message);
-  err.showStack = false;
-  throw err;
-}
-
-/**
- * Entry point for 'gulp performance-urls'
+ * Entry point for 'amp performance-urls'
  * Check if all localhost urls in performance/config.json exist
- * @return {!Promise}
  */
 async function performanceUrls() {
-  return gulp.src([CONFIG_PATH]).pipe(
-    through2.obj(function (file) {
-      let obj;
-      try {
-        obj = JSON.parse(file.contents.toString());
-      } catch (e) {
-        log(colors.yellow(`Could not parse ${CONFIG_PATH}. `));
-        throwError(`Could not parse ${CONFIG_PATH}. `);
-        return;
-      }
-      const filepaths = obj.handlers.flatMap((handler) =>
-        handler.urls
-          .filter((url) => url.startsWith(LOCAL_HOST_URL))
-          .map((url) =>
-            path.join(__dirname, '../../', url.split(LOCAL_HOST_URL)[1])
-          )
-      );
-      for (const filepath of filepaths) {
-        if (!fs.existsSync(filepath)) {
-          log(colors.red(filepath + ' does not exist.'));
-          throwError(`${filepath} does not exist.`);
-          return;
-        }
-      }
-      log(
-        colors.green('SUCCESS:'),
-        'All local performance task urls are valid.'
-      );
-    })
+  let jsonContent;
+  try {
+    jsonContent = require(CONFIG_PATH);
+  } catch (e) {
+    log(red('ERROR:'), 'Could not parse', cyan(CONFIG_PATH));
+    process.exitCode = 1;
+    return;
+  }
+  /** @type {string[]} */
+  const filepaths = jsonContent.handlers.flatMap((handler) =>
+    handler.urls
+      .filter((url) => url.startsWith(LOCAL_HOST_URL))
+      .map((url) =>
+        path.join(__dirname, '../../', url.split(LOCAL_HOST_URL)[1])
+      )
   );
+  for (const filepath of filepaths) {
+    if (!fs.existsSync(filepath)) {
+      log(red('ERROR:'), cyan(filepath), 'does not exist');
+      process.exitCode = 1;
+      return;
+    }
+  }
+  log(green('SUCCESS:'), 'All local performance task urls are valid.');
 }
 
 module.exports = {
diff --git a/build-system/tasks/performance/README.md b/build-system/tasks/performance/README.md
index 85eb9dbc0561c..35dac7674114e 100644
--- a/build-system/tasks/performance/README.md
+++ b/build-system/tasks/performance/README.md
@@ -1,7 +1,7 @@
 # Performance test
 
-Use `gulp performance` to run this test. It measures performance for the current branch compared to the current release. By default, the command first needs to compile minified runtime and components from the current branch by executing the `gulp dist` task. To skip this step, use the `--nobuild` flag, but the task will throw an error if the dist files are missing. Only the runtime and components used by documents from the configured URLs are compiled.
+Use `amp performance` to run this test. It measures performance for the current branch compared to the current release. By default, the command first needs to compile minified runtime and components from the current branch by executing the `amp dist` task. To skip this step, use the `--nobuild` flag, but the task will throw an error if the dist files are missing. Only the runtime and components used by documents from the configured URLs are compiled.
 
-The `config.json` file contains settings. The default value for `runs` is 50, which takes ~10 minutes to run, and generates results with ~5% margin of error. Differences larger than this should be investigated. The `defaultHandler` within the `handlers` list measures the basic pageview metrics (visible, first paint, etc...). The other handlers within the list can track different metrics (analytics request time, amount of analytics requests failed, etc...). Each handler within the handlers list must have a `handlerName` as well as a `urls` array (can be empty).
+The `config.json` file contains settings. The default value for `runs` is 50, which takes ~10 minutes to run, and generates results with ~5% margin of error. Differences larger than this should be investigated. The `defaultHandler` within the `handlers` list measures the basic pageview metrics. The other handlers within the list can track different metrics (analytics request time, amount of analytics requests failed, etc...). Each handler within the handlers list must have a `handlerName` as well as a `urls` array (can be empty).
 
-This test measures the following metrics: `visible`, `first paint`, `first contentful paint`, `largest contentful paint`, `time to interactive`, `max first input delay`, `cumulative layout shift`, `analytics request delay`, and `failed percentage of analytics requests`.
+This test measures the Core Web Vitals metrics: `largest contentful paint`, `max first input delay`, and `cumulative layout shift`. For ads, the test also measures `analytics request delay` and `failed percentage of analytics requests`.
diff --git a/build-system/tasks/performance/analytics-handler.js b/build-system/tasks/performance/analytics-handler.js
index 501bb702d1e69..059fae321817c 100644
--- a/build-system/tasks/performance/analytics-handler.js
+++ b/build-system/tasks/performance/analytics-handler.js
@@ -14,6 +14,12 @@
  * limitations under the License.
  */
 
+/**
+ *
+ * @param {!Array<function>} handlersList
+ * @param {?Object} handlerOptions
+ * @param {!function} resolve
+ */
 function setupAnalyticsHandler(handlersList, handlerOptions, resolve) {
   const {extraUrlParam} = handlerOptions;
   const analyticsParam = Object.keys(extraUrlParam)
@@ -108,12 +114,8 @@ async function maybeHandleAnalyticsRequest(
  * @return {!Object}
  */
 function getAnalyticsMetrics(analyticsHandlerOptions) {
-  const {
-    expectedRequests,
-    firstRequestTime,
-    requests,
-    startTime,
-  } = analyticsHandlerOptions;
+  const {expectedRequests, firstRequestTime, requests, startTime} =
+    analyticsHandlerOptions;
   const analyticsMetrics = {};
   // If there is no firstRequestTime, that means that request didn't fire.
   // `percentRequestsFailed` because we take the mean rather than sum
diff --git a/build-system/tasks/performance/cache-documents.js b/build-system/tasks/performance/cache-documents.js
index 9786cad174979..b0dc910bf6c16 100644
--- a/build-system/tasks/performance/cache-documents.js
+++ b/build-system/tasks/performance/cache-documents.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-const {CONTROL, downloadToDisk, EXPERIMENT} = require('./helpers');
+const {CONTROL, EXPERIMENT, downloadToDisk} = require('./helpers');
 const {startServer, stopServer} = require('../serve');
 const HOST = 'localhost';
 const PORT = 8000;
diff --git a/build-system/tasks/performance/copy-images.js b/build-system/tasks/performance/copy-images.js
index 69a331daf60e3..5a1662c21946e 100644
--- a/build-system/tasks/performance/copy-images.js
+++ b/build-system/tasks/performance/copy-images.js
@@ -16,16 +16,17 @@
 
 const fs = require('fs');
 const {CONTROL, maybeCopyImageToCache, urlToCachePath} = require('./helpers');
-const {JSDOM} = require('jsdom');
 
 /**
  * Lookup URL from cache. Inspect tags that could use images.
  *
  * @param {string} url
+ * @return {Promise<void>}
  */
-function copyImagesFromTags(url) {
+async function copyImagesFromTags(url) {
   const cachePath = urlToCachePath(url, CONTROL);
   const document = fs.readFileSync(cachePath);
+  const {JSDOM} = await import('jsdom'); // Lazy-imported to speed up task loading.
   const dom = new JSDOM(document);
 
   copyImagesFromAmpImg(url, dom);
@@ -79,9 +80,10 @@ function copyImagesFromAmpVideo(url, dom) {
  * Copy locally stored images found in the markup to cache.
  *
  * @param {!Array<string>} urls
+ * @return {Promise<void>}
  */
-function copyLocalImages(urls) {
-  urls.forEach(copyImagesFromTags);
+async function copyLocalImages(urls) {
+  await Promise.all(urls.map(copyImagesFromTags));
 }
 
 module.exports = copyLocalImages;
diff --git a/build-system/tasks/performance/helpers.js b/build-system/tasks/performance/helpers.js
index 7781f5b96b973..1a1cdd080e7cb 100644
--- a/build-system/tasks/performance/helpers.js
+++ b/build-system/tasks/performance/helpers.js
@@ -93,16 +93,15 @@ function getLocalPathFromExtension(extension) {
  * @param {string} version
  * @return {!Promise<string>} Resolves with relative path to file
  */
-function downloadToDisk(url, version = CONTROL) {
+async function downloadToDisk(url, version = CONTROL) {
   touchDirs();
 
-  return fetch(url)
-    .then((response) => response.text())
-    .then((document) => {
-      const filepath = urlToCachePath(url, version);
-      fs.writeFileSync(filepath, document);
-      return filepath.split(`performance/cache/${version}/`)[1];
-    });
+  const response = await fetch(url);
+  const document = await response.text();
+  const filepath = urlToCachePath(url, version);
+  fs.writeFileSync(filepath, document);
+
+  return filepath.split(`performance/cache/${version}/`)[1];
 }
 
 /**
@@ -112,7 +111,7 @@ function downloadToDisk(url, version = CONTROL) {
  * @param {string} version
  * @return {!Promise<string>} Resolves with relative path to file
  */
-function copyToCache(filePath, version = EXPERIMENT) {
+async function copyToCache(filePath, version = EXPERIMENT) {
   touchDirs();
 
   const fromPath = path.join(__dirname, '../../../dist/', filePath);
@@ -122,7 +121,7 @@ function copyToCache(filePath, version = EXPERIMENT) {
 
   fs.copyFileSync(fromPath, destPath);
 
-  return Promise.resolve(filePath);
+  return filePath;
 }
 
 /**
@@ -172,8 +171,8 @@ function getLocalVendorConfig(vendor) {
  * @param {string} filePath
  * @return {!Promise<string>} Resolves with relative path to file
  */
-function getFileFromAbsolutePath(filePath) {
-  return Promise.resolve(fs.readFileSync(filePath));
+async function getFileFromAbsolutePath(filePath) {
+  return fs.readFileSync(filePath, 'utf-8');
 }
 
 /**
diff --git a/build-system/tasks/performance/index.js b/build-system/tasks/performance/index.js
index cec30c723a966..f644d5f611bcd 100644
--- a/build-system/tasks/performance/index.js
+++ b/build-system/tasks/performance/index.js
@@ -22,7 +22,6 @@ const loadConfig = require('./load-config');
 const rewriteAnalyticsTags = require('./rewrite-analytics-tags');
 const rewriteScriptTags = require('./rewrite-script-tags');
 const runTests = require('./run-tests');
-const {installPackages} = require('../../common/utils');
 const {printReport} = require('./print-report');
 
 /**
@@ -34,13 +33,12 @@ async function performance() {
     resolver = resolverIn;
   });
 
-  installPackages(__dirname);
   const config = new loadConfig();
   const urls = Object.keys(config.urlToHandlers);
   const urlsAndAdsUrls = urls.concat(config.adsUrls || []);
   await cacheDocuments(urlsAndAdsUrls);
   await compileScripts(urlsAndAdsUrls);
-  copyLocalImages(urlsAndAdsUrls);
+  await copyLocalImages(urlsAndAdsUrls);
   await rewriteScriptTags(urlsAndAdsUrls);
   await rewriteAnalyticsTags(config.handlers);
   await getMetrics(urls, config);
@@ -52,13 +50,13 @@ async function performance() {
 performance.description = 'Runs web performance test on current branch';
 
 performance.flags = {
-  'devtools': '  Run with devtools open',
-  'headless': '  Run chromium headless',
-  'nobuild': '  Does not compile minified runtime before running tests',
+  'devtools': 'Run with devtools open',
+  'headless': 'Run chromium headless',
+  'nobuild': 'Does not compile minified runtime before running tests',
   'threshold':
-    '  Fraction by which metrics are allowed to increase. Number between 0.0 and 1.0',
-  'quiet': '  Does not log progress per page',
-  'url': '  Page to test. Overrides urls set in config.json',
+    'Fraction by which metrics are allowed to increase. Number between 0.0 and 1.0',
+  'quiet': 'Does not log progress per page',
+  'url': 'Page to test. Overrides urls set in config.json',
 };
 
 module.exports = {
diff --git a/build-system/tasks/performance/measure-documents.js b/build-system/tasks/performance/measure-documents.js
index cb819b71c2dba..25e4a767285c6 100644
--- a/build-system/tasks/performance/measure-documents.js
+++ b/build-system/tasks/performance/measure-documents.js
@@ -16,28 +16,31 @@
 
 const argv = require('minimist')(process.argv.slice(2));
 const fs = require('fs');
-const log = require('fancy-log');
 const {
   CDN_URL,
   CONTROL,
   DEFAULT_EXTENSIONS,
   EXPERIMENT,
   RESULTS_PATH,
-  urlToCachePath,
   getFileFromAbsolutePath,
   getLocalPathFromExtension,
   localFileToCachePath,
+  urlToCachePath,
 } = require('./helpers');
 const {
-  setupAnalyticsHandler,
   getAnalyticsMetrics,
+  setupAnalyticsHandler,
 } = require('./analytics-handler');
-const {cyan, green} = require('ansi-colors');
+const {cyan, green} = require('../../common/colors');
+const {log} = require('../../common/logging');
 const {setupAdRequestHandler} = require('./ads-handler');
 
-// Require Puppeteer dynamically to prevent throwing error in Travis
+// Require Puppeteer dynamically to prevent throwing error during CI
 let puppeteer;
 
+/**
+ * Lazy-requires the puppeteer module.
+ */
 function requirePuppeteer_() {
   puppeteer = require('puppeteer');
 }
@@ -47,7 +50,7 @@ function requirePuppeteer_() {
  * observers need to be initialized before content begins to load to take
  * measurements.
  *
- * @param {Puppeteer.page} page
+ * @param {puppeteer.page} page
  * @return {Promise} Resolves when script is evaluated
  */
 const setupMeasurement = (page) =>
@@ -83,8 +86,8 @@ const setupMeasurement = (page) =>
   });
 
 /**
- * Intecepts requests for default extensions made by runtime,
- * and returns cached version (master and local).
+ * Intecepts requests for default extensions made by runtime and returns a
+ * cached version.
  * @param {Request} interceptedRequest
  * @param {string} version
  * @return {!Promise<boolean>}
@@ -142,14 +145,21 @@ const readMetrics = (page) =>
   page.evaluate(() => {
     const entries = performance.getEntries();
 
+    /**
+     *
+     * @param {string} name
+     * @return {nuber}
+     */
     function getMetric(name) {
       const entry = entries.find((entry) => entry.name === name);
       return entry ? entry.startTime : 0;
     }
 
-    const firstPaint = getMetric('first-paint');
     const firstContentfulPaint = getMetric('first-contentful-paint');
 
+    /**
+     * @return {number}
+     */
     function getMaxFirstInputDelay() {
       let longest = 0;
 
@@ -165,16 +175,8 @@ const readMetrics = (page) =>
       return longest;
     }
 
-    function getTimeToInteractive() {
-      return Date.now() - window.measureStarted;
-    }
-
     return {
-      visible: getMetric('visible'),
-      firstPaint,
-      firstContentfulPaint,
       largestContentfulPaint: window.largestContentfulPaint,
-      timeToInteractive: getTimeToInteractive(),
       maxFirstInputDelay: getMaxFirstInputDelay(),
       cumulativeLayoutShift: window.cumulativeLayoutShift * 100,
     };
@@ -261,7 +263,7 @@ async function addHandlerMetric(handlerOptions, page) {
       return getAnalyticsMetrics(handlerOptions);
     case 'defaultHandler':
     default:
-      return await readMetrics(page);
+      return readMetrics(page);
   }
 }
 
@@ -311,9 +313,8 @@ async function measureDocument(url, version, config) {
   const page = await browser.newPage();
   const handlerOptionsForUrl = {...config.urlToHandlers[url]};
   const handlersList = [];
-  const {timeoutPromise, resolve} = setupDelayBasedOnHandlerOptions(
-    handlerOptionsForUrl
-  );
+  const {resolve, timeoutPromise} =
+    setupDelayBasedOnHandlerOptions(handlerOptionsForUrl);
   await page.setCacheEnabled(false);
   await page.setRequestInterception(true);
   setupDefaultHandlers(handlersList, version);
@@ -366,6 +367,9 @@ async function measureDocuments(urls, config) {
   );
 
   const startTime = Date.now();
+  /**
+   * @return {number}
+   */
   function timeLeft() {
     const elapsed = (Date.now() - startTime) / 1000;
     const secondsPerTask = elapsed / i;
diff --git a/build-system/tasks/performance/package-lock.json b/build-system/tasks/performance/package-lock.json
new file mode 100644
index 0000000000000..0f9177599f681
--- /dev/null
+++ b/build-system/tasks/performance/package-lock.json
@@ -0,0 +1,1152 @@
+{
+  "name": "amp-performance",
+  "version": "0.1.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@types/node": {
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.2.tgz",
+      "integrity": "sha512-p68+a+KoxpoB47015IeYZYRrdqMUcpbK8re/zpFB8Ld46LHC1lPEbp3EXgkEhAYEcPvjJF6ZO+869SQ0aH1dcA==",
+      "dev": true,
+      "optional": true
+    },
+    "@types/yauzl": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.1.tgz",
+      "integrity": "sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@ungap/promise-all-settled": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz",
+      "integrity": "sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==",
+      "dev": true
+    },
+    "agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dev": true,
+      "requires": {
+        "debug": "4"
+      }
+    },
+    "ansi-colors": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
+      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
+      "dev": true
+    },
+    "ansi-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
+    "bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "requires": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "browser-stdout": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
+      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
+      "dev": true
+    },
+    "buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "requires": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "dev": true
+    },
+    "camelcase": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
+      "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==",
+      "dev": true
+    },
+    "chai": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.4.tgz",
+      "integrity": "sha512-yS5H68VYOCtN1cjfwumDSuzn/9c+yza4f3reKXlE5rUg7SFcCEy90gJvydNgOYtblyf4Zi6jIWRnXOgErta0KA==",
+      "dev": true,
+      "requires": {
+        "assertion-error": "^1.1.0",
+        "check-error": "^1.0.2",
+        "deep-eql": "^3.0.1",
+        "get-func-name": "^2.0.0",
+        "pathval": "^1.1.1",
+        "type-detect": "^4.0.5"
+      }
+    },
+    "chalk": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "check-error": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
+      "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=",
+      "dev": true
+    },
+    "chokidar": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
+      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.1",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.5.0"
+      }
+    },
+    "chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "dev": true
+    },
+    "cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        }
+      }
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "debug": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dev": true,
+      "requires": {
+        "ms": "2.1.2"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        }
+      }
+    },
+    "decamelize": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz",
+      "integrity": "sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==",
+      "dev": true
+    },
+    "deep-eql": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz",
+      "integrity": "sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==",
+      "dev": true,
+      "requires": {
+        "type-detect": "^4.0.0"
+      }
+    },
+    "devtools-protocol": {
+      "version": "0.0.869402",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.869402.tgz",
+      "integrity": "sha512-VvlVYY+VDJe639yHs5PHISzdWTLL3Aw8rO4cvUtwvoxFd6FHbE4OpHHcde52M6096uYYazAmd4l0o5VuFRO2WA==",
+      "dev": true
+    },
+    "diff": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.0.0.tgz",
+      "integrity": "sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==",
+      "dev": true
+    },
+    "emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true
+    },
+    "extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "requires": {
+        "@types/yauzl": "^2.9.1",
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      }
+    },
+    "fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
+      "dev": true,
+      "requires": {
+        "pend": "~1.2.0"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true
+    },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true
+    },
+    "get-func-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
+      "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=",
+      "dev": true
+    },
+    "get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "requires": {
+        "pump": "^3.0.0"
+      }
+    },
+    "glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "growl": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
+      "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==",
+      "dev": true
+    },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
+    },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
+    },
+    "https-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
+      "dev": true,
+      "requires": {
+        "agent-base": "6",
+        "debug": "4"
+      }
+    },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "js-yaml": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.0.0.tgz",
+      "integrity": "sha512-pqon0s+4ScYUvX30wxQi3PogGFAlUyH0awepWvwkj4jD4v+ova3RiYw8bmA6x2rDrEaj8i/oWKoRxpVNW+Re8Q==",
+      "dev": true,
+      "requires": {
+        "argparse": "^2.0.1"
+      }
+    },
+    "locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^5.0.0"
+      }
+    },
+    "log-symbols": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.0.0.tgz",
+      "integrity": "sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0"
+      }
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true
+    },
+    "mocha": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-8.4.0.tgz",
+      "integrity": "sha512-hJaO0mwDXmZS4ghXsvPVriOhsxQ7ofcpQdm8dE+jISUOKopitvnXFQmpRR7jd2K6VBG6E26gU3IAbXXGIbu4sQ==",
+      "dev": true,
+      "requires": {
+        "@ungap/promise-all-settled": "1.1.2",
+        "ansi-colors": "4.1.1",
+        "browser-stdout": "1.3.1",
+        "chokidar": "3.5.1",
+        "debug": "4.3.1",
+        "diff": "5.0.0",
+        "escape-string-regexp": "4.0.0",
+        "find-up": "5.0.0",
+        "glob": "7.1.6",
+        "growl": "1.10.5",
+        "he": "1.2.0",
+        "js-yaml": "4.0.0",
+        "log-symbols": "4.0.0",
+        "minimatch": "3.0.4",
+        "ms": "2.1.3",
+        "nanoid": "3.1.20",
+        "serialize-javascript": "5.0.1",
+        "strip-json-comments": "3.1.1",
+        "supports-color": "8.1.1",
+        "which": "2.0.2",
+        "wide-align": "1.1.3",
+        "workerpool": "6.1.0",
+        "yargs": "16.2.0",
+        "yargs-parser": "20.2.4",
+        "yargs-unparser": "2.0.0"
+      }
+    },
+    "ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "nanoid": {
+      "version": "3.1.20",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
+      "integrity": "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==",
+      "dev": true
+    },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "dev": true
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "requires": {
+        "yocto-queue": "^0.1.0"
+      }
+    },
+    "p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^3.0.2"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "pathval": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "dev": true
+    },
+    "pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
+      "integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==",
+      "dev": true
+    },
+    "pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "requires": {
+        "find-up": "^4.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        }
+      }
+    },
+    "progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true
+    },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "puppeteer": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-9.1.1.tgz",
+      "integrity": "sha512-W+nOulP2tYd/ZG99WuZC/I5ljjQQ7EUw/jQGcIb9eu8mDlZxNY2SgcJXTLG9h5gRvqA3uJOe4hZXYsd3EqioMw==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.0",
+        "devtools-protocol": "0.0.869402",
+        "extract-zip": "^2.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "node-fetch": "^2.6.1",
+        "pkg-dir": "^4.2.0",
+        "progress": "^2.0.1",
+        "proxy-from-env": "^1.1.0",
+        "rimraf": "^3.0.2",
+        "tar-fs": "^2.0.0",
+        "unbzip2-stream": "^1.3.3",
+        "ws": "^7.2.3"
+      }
+    },
+    "randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      }
+    },
+    "readdirp": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
+      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true
+    },
+    "serialize-javascript": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
+      "integrity": "sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==",
+      "dev": true,
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "string-width": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+      "dev": true,
+      "requires": {
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^4.0.0"
+      }
+    },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^3.0.0"
+      }
+    },
+    "strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true
+    },
+    "supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
+    "tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "requires": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "dev": true,
+      "requires": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      }
+    },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "dev": true
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true
+    },
+    "unbzip2-stream": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
+      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
+      "dev": true,
+      "requires": {
+        "buffer": "^5.2.1",
+        "through": "^2.3.8"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      }
+    },
+    "workerpool": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-6.1.0.tgz",
+      "integrity": "sha512-toV7q9rWNYha963Pl/qyeZ6wG+3nnsyvolaNUS8+R5Wtw6qJPTxIlOP1ZSvcGhEJw+l3HMMmtiNo9Gl61G4GVg==",
+      "dev": true
+    },
+    "wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        }
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "ws": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
+      "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
+      "dev": true
+    },
+    "y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true
+    },
+    "yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "requires": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        }
+      }
+    },
+    "yargs-parser": {
+      "version": "20.2.4",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
+      "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==",
+      "dev": true
+    },
+    "yargs-unparser": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz",
+      "integrity": "sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^6.0.0",
+        "decamelize": "^4.0.0",
+        "flat": "^5.0.2",
+        "is-plain-obj": "^2.1.0"
+      }
+    },
+    "yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true
+    }
+  }
+}
diff --git a/build-system/tasks/performance/package.json b/build-system/tasks/performance/package.json
index adb64306fe6e7..51735906add9e 100644
--- a/build-system/tasks/performance/package.json
+++ b/build-system/tasks/performance/package.json
@@ -1,11 +1,11 @@
 {
   "private": true,
-  "name": "gulp-performance",
+  "name": "amp-performance",
   "version": "0.1.0",
-  "description": "Dev dependencies used by `gulp performance`",
+  "description": "Dev dependencies used by `amp performance`",
   "devDependencies": {
-    "chai": "4.2.0",
-    "mocha": "8.0.1",
-    "puppeteer": "3.3.0"
+    "chai": "4.3.4",
+    "mocha": "8.4.0",
+    "puppeteer": "9.1.1"
   }
 }
diff --git a/build-system/tasks/performance/print-report.js b/build-system/tasks/performance/print-report.js
index ca4f936339f94..3454668c463d5 100644
--- a/build-system/tasks/performance/print-report.js
+++ b/build-system/tasks/performance/print-report.js
@@ -16,7 +16,7 @@
 
 const fs = require('fs');
 const {CONTROL, EXPERIMENT, RESULTS_PATH} = require('./helpers');
-const {cyan} = require('ansi-colors');
+const {cyan} = require('../../common/colors');
 const {percent, trimmedMean} = require('./stats');
 
 const HEADER_COLUMN = 26;
@@ -64,8 +64,12 @@ function linesForMetric(metric, results) {
   ];
 }
 
+/**
+ *
+ * @param {string[]} urls
+ */
 function printReport(urls) {
-  const results = JSON.parse(fs.readFileSync(RESULTS_PATH));
+  const results = JSON.parse(fs.readFileSync(RESULTS_PATH, 'utf-8'));
 
   urls.forEach((url) => {
     const keys = Object.keys(results[url][CONTROL][0]);
@@ -84,11 +88,20 @@ class PageMetrics {
   url;
   metrics;
 
+  /**
+   * @param {string} url
+   */
   constructor(url) {
     this.url = url;
     this.metrics = new Map();
   }
 
+  /**
+   *
+   * @param {string} metric
+   * @param {number} experiment
+   * @param {number} control
+   */
   set(metric, experiment, control) {
     this.metrics.set(metric, {experiment, control});
   }
@@ -100,7 +113,7 @@ class PageMetrics {
  * @return {Array<PageMetrics>} report
  */
 function getReport(urls) {
-  const raw = JSON.parse(fs.readFileSync(RESULTS_PATH));
+  const raw = JSON.parse(fs.readFileSync(RESULTS_PATH, 'utf-8'));
   const report = [];
   urls.forEach((url) => {
     const results = raw[url];
diff --git a/build-system/tasks/performance/rewrite-analytics-tags.js b/build-system/tasks/performance/rewrite-analytics-tags.js
index 7c180a9041f60..fad7005c79a14 100644
--- a/build-system/tasks/performance/rewrite-analytics-tags.js
+++ b/build-system/tasks/performance/rewrite-analytics-tags.js
@@ -21,13 +21,12 @@ const {
   getLocalVendorConfig,
   urlToCachePath,
 } = require('./helpers');
-const {JSDOM} = require('jsdom');
 
 /**
  * Return local vendor config.
  *
  * @param {string} vendor
- * @return {Object}
+ * @return {Promise<Object>}
  */
 async function getVendorConfig(vendor) {
   return JSON.parse(await getLocalVendorConfig(vendor));
@@ -41,11 +40,11 @@ async function getVendorConfig(vendor) {
  *
  * @param {Element} tag
  * @param {Object} script
- * @return {Object}
+ * @return {Promise<Object>}
  */
 async function maybeMergeAndRemoveVendorConfig(tag, script) {
-  if (tag.hasAttribute('type')) {
-    const vendor = tag.getAttribute('type');
+  const vendor = tag.getAttribute('type');
+  if (vendor) {
     tag.removeAttribute('type');
     const vendorConfig = await getVendorConfig(vendor);
     // TODO (micajuineho) replace with analytics/config.js merge objects
@@ -65,6 +64,7 @@ async function maybeMergeAndRemoveVendorConfig(tag, script) {
 async function alterAnalyticsTags(url, version, extraUrlParams) {
   const cachePath = urlToCachePath(url, version);
   const document = fs.readFileSync(cachePath);
+  const {JSDOM} = await import('jsdom'); // Lazy-imported to speed up task loading.
   const dom = new JSDOM(document);
 
   const analyticsTags = Array.from(
@@ -95,10 +95,10 @@ async function alterAnalyticsTags(url, version, extraUrlParams) {
  * @param {?Object} handlers
  * @return {Promise}
  */
-function rewriteAnalyticsConfig(handlers) {
+async function rewriteAnalyticsConfig(handlers) {
   const handlerPromises = [];
   handlers.forEach((handler) => {
-    const {handlerName, adsUrls, urls, extraUrlParam} = handler;
+    const {adsUrls, extraUrlParam, handlerName, urls} = handler;
     if (handlerName !== 'analyticsHandler' && handlerName !== 'adsHandler') {
       return;
     }
diff --git a/build-system/tasks/performance/rewrite-script-tags.js b/build-system/tasks/performance/rewrite-script-tags.js
index b977e102101e2..7d764a1dfc86c 100644
--- a/build-system/tasks/performance/rewrite-script-tags.js
+++ b/build-system/tasks/performance/rewrite-script-tags.js
@@ -28,7 +28,6 @@ const {
   getLocalPathFromExtension,
   urlToCachePath,
 } = require('./helpers');
-const {JSDOM} = require('jsdom');
 
 /**
  * Lookup URL from cache and rewrite URLs to build from working branch
@@ -38,6 +37,7 @@ const {JSDOM} = require('jsdom');
 async function useLocalScripts(url) {
   const cachePath = urlToCachePath(url, EXPERIMENT);
   const document = fs.readFileSync(cachePath);
+  const {JSDOM} = await import('jsdom'); // Lazy-imported to speed up task loading.
   const dom = new JSDOM(document);
 
   const scripts = Array.from(dom.window.document.querySelectorAll('script'));
@@ -60,13 +60,15 @@ async function useLocalScripts(url) {
 }
 
 /**
- * Lookup URL from cache and download scripts to cache and rewrite URLs to local copy
+ * Lookup URL from cache and download scripts to cache and rewrite URLs to local
+ * copy
  *
  * @param {string} url
  */
 async function useRemoteScripts(url) {
   const cachePath = urlToCachePath(url, CONTROL);
   const document = fs.readFileSync(cachePath);
+  const {JSDOM} = await import('jsdom'); // Lazy-imported to speed up task loading.
   const dom = new JSDOM(document);
 
   const scripts = Array.from(dom.window.document.querySelectorAll('script'));
@@ -88,8 +90,9 @@ async function useRemoteScripts(url) {
 }
 
 /**
- * Download local and master version of default extension that
- * are not explicility stated by script tags in the HTML.
+ * Download default extensions that are not explicility stated by script tags in
+ * the HTML.
+ * @return {Promise}
  */
 async function downloadDefaultExtensions() {
   return Promise.all(
diff --git a/build-system/tasks/performance/run-tests.js b/build-system/tasks/performance/run-tests.js
index c518a7a9dada6..d80c1281ef698 100644
--- a/build-system/tasks/performance/run-tests.js
+++ b/build-system/tasks/performance/run-tests.js
@@ -18,6 +18,9 @@ const Mocha = require('mocha');
 const path = require('path');
 const TEST_SUITE_PATH = 'build-system/tasks/performance/test-suite.js';
 
+/**
+ * @param {function} resolver
+ */
 function runTests(resolver) {
   const mocha = new Mocha();
   mocha.addFile(path.join('./', TEST_SUITE_PATH));
diff --git a/build-system/tasks/performance/stats.js b/build-system/tasks/performance/stats.js
index b96e9055d94d7..f18f816354c73 100644
--- a/build-system/tasks/performance/stats.js
+++ b/build-system/tasks/performance/stats.js
@@ -86,7 +86,7 @@ const q3 = (array) => {
  *
  * @param {number} a
  * @param {number} b
- * @return {number|null} percentage change or null
+ * @return {?number} percentage change or null
  */
 function percent(a, b) {
   if (a === 0) {
diff --git a/build-system/tasks/performance/test-suite.js b/build-system/tasks/performance/test-suite.js
index d2faa46baffb3..914c037c47fce 100644
--- a/build-system/tasks/performance/test-suite.js
+++ b/build-system/tasks/performance/test-suite.js
@@ -27,7 +27,7 @@ const reports = getReport(Object.keys(urlToHandlers));
 
 reports.forEach((report) => {
   describe(`${report.url}`, () => {
-    report.metrics.forEach(({experiment, control}, name) => {
+    report.metrics.forEach(({control, experiment}, name) => {
       it(`${name}`, () => {
         expect(experiment).to.be.at.most(control * THRESHOLD);
       });
diff --git a/build-system/tasks/performance/yarn.lock b/build-system/tasks/performance/yarn.lock
deleted file mode 100644
index 15be0997bcd39..0000000000000
--- a/build-system/tasks/performance/yarn.lock
+++ /dev/null
@@ -1,1088 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@types/node@*":
-  version "13.13.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.13.2.tgz#160d82623610db590a64e8ca81784e11117e5a54"
-  integrity sha512-LB2R1Oyhpg8gu4SON/mfforE525+Hi/M1ineICEDftqNVTyFg1aRIeGuTvXAoWHc4nbrFncWtJgMmoyRvuGh7A==
-
-"@types/yauzl@^2.9.1":
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.1.tgz#d10f69f9f522eef3cf98e30afb684a1e1ec923af"
-  integrity sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==
-  dependencies:
-    "@types/node" "*"
-
-agent-base@5:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
-  integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
-
-ansi-colors@4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
-
-ansi-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
-  integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
-
-ansi-regex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
-  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
-
-ansi-styles@^3.2.0, ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
-anymatch@~3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
-  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
-  dependencies:
-    normalize-path "^3.0.0"
-    picomatch "^2.0.4"
-
-argparse@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
-  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
-  dependencies:
-    sprintf-js "~1.0.2"
-
-array.prototype.map@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.map/-/array.prototype.map-1.0.2.tgz#9a4159f416458a23e9483078de1106b2ef68f8ec"
-  integrity sha512-Az3OYxgsa1g7xDYp86l0nnN4bcmuEITGe1rbdEBVkrqkzMgDcbdQ2R7r41pNzti+4NMces3H8gMmuioZUilLgw==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    es-array-method-boxes-properly "^1.0.0"
-    is-string "^1.0.4"
-
-assertion-error@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
-  integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
-
-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
-
-base64-js@^1.0.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
-  integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
-
-binary-extensions@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.0.0.tgz#23c0df14f6a88077f5f986c0d167ec03c3d5537c"
-  integrity sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==
-
-bl@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.2.tgz#52b71e9088515d0606d9dd9cc7aa48dc1f98e73a"
-  integrity sha512-j4OH8f6Qg2bGuWfRiltT2HYGx0e1QcBTrK9KAHNMwMZdQnDZFk0ZSYIpADjYCB3U12nicC5tVJwSIhwOWjb4RQ==
-  dependencies:
-    buffer "^5.5.0"
-    inherits "^2.0.4"
-    readable-stream "^3.4.0"
-
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
-  dependencies:
-    fill-range "^7.0.1"
-
-browser-stdout@1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
-  integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
-
-buffer-crc32@~0.2.3:
-  version "0.2.13"
-  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
-  integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
-
-buffer@^5.2.1, buffer@^5.5.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
-  integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-
-camelcase@^5.0.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-
-chai@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-4.2.0.tgz#760aa72cf20e3795e84b12877ce0e83737aa29e5"
-  integrity sha512-XQU3bhBukrOsQCuwZndwGcCVQHyZi53fQ6Ys1Fym7E4olpIqqZZhhoFJoaKVvV17lWQoXYwgWN2nF5crA8J2jw==
-  dependencies:
-    assertion-error "^1.1.0"
-    check-error "^1.0.2"
-    deep-eql "^3.0.1"
-    get-func-name "^2.0.0"
-    pathval "^1.1.0"
-    type-detect "^4.0.5"
-
-chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-check-error@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
-  integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=
-
-chokidar@3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.1.tgz#c84e5b3d18d9a4d77558fef466b1bf16bbeb3450"
-  integrity sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==
-  dependencies:
-    anymatch "~3.1.1"
-    braces "~3.0.2"
-    glob-parent "~5.1.0"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.3.0"
-  optionalDependencies:
-    fsevents "~2.1.2"
-
-chownr@^1.1.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
-  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
-
-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
-  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
-  dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
-
-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-debug@3.2.6:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
-  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
-  dependencies:
-    ms "^2.1.1"
-
-debug@4, debug@^4.1.0, debug@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
-  dependencies:
-    ms "^2.1.1"
-
-decamelize@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
-
-deep-eql@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
-  integrity sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==
-  dependencies:
-    type-detect "^4.0.0"
-
-define-properties@^1.1.2, define-properties@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
-  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
-  dependencies:
-    object-keys "^1.0.12"
-
-diff@4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
-  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
-
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
-  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
-
-end-of-stream@^1.1.0, end-of-stream@^1.4.1:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
-  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
-  dependencies:
-    once "^1.4.0"
-
-es-abstract@^1.17.0-next.1:
-  version "1.17.4"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.4.tgz#e3aedf19706b20e7c2594c35fc0d57605a79e184"
-  integrity sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.1.5"
-    is-regex "^1.0.5"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimleft "^2.1.1"
-    string.prototype.trimright "^2.1.1"
-
-es-abstract@^1.17.4:
-  version "1.17.5"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9"
-  integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.1.5"
-    is-regex "^1.0.5"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimleft "^2.1.1"
-    string.prototype.trimright "^2.1.1"
-
-es-array-method-boxes-properly@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
-  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
-
-es-get-iterator@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
-  dependencies:
-    es-abstract "^1.17.4"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
-es-to-primitive@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
-  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
-  dependencies:
-    is-callable "^1.1.4"
-    is-date-object "^1.0.1"
-    is-symbol "^1.0.2"
-
-escape-string-regexp@1.0.5, escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-esprima@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
-  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
-
-extract-zip@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.0.tgz#f53b71d44f4ff5a4527a2259ade000fb8b303492"
-  integrity sha512-i42GQ498yibjdvIhivUsRslx608whtGoFIhF26Z7O4MYncBxp8CwalOs1lnHy21A9sIohWO2+uiE4SRtC9JXDg==
-  dependencies:
-    debug "^4.1.1"
-    get-stream "^5.1.0"
-    yauzl "^2.10.0"
-  optionalDependencies:
-    "@types/yauzl" "^2.9.1"
-
-fd-slicer@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
-  integrity sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=
-  dependencies:
-    pend "~1.2.0"
-
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
-  dependencies:
-    to-regex-range "^5.0.1"
-
-find-up@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
-  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
-  dependencies:
-    locate-path "^5.0.0"
-    path-exists "^4.0.0"
-
-find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
-  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
-  dependencies:
-    locate-path "^3.0.0"
-
-flat@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/flat/-/flat-4.1.0.tgz#090bec8b05e39cba309747f1d588f04dbaf98db2"
-  integrity sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw==
-  dependencies:
-    is-buffer "~2.0.3"
-
-fs-constants@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
-  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
-
-fsevents@~2.1.2:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
-  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
-
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
-
-get-caller-file@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
-  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
-
-get-func-name@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
-  integrity sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=
-
-get-stream@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.1.0.tgz#01203cdc92597f9b909067c3e656cc1f4d3c4dc9"
-  integrity sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==
-  dependencies:
-    pump "^3.0.0"
-
-glob-parent@~5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.0.tgz#5f4c1d1e748d30cd73ad2944b3577a81b081e8c2"
-  integrity sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==
-  dependencies:
-    is-glob "^4.0.1"
-
-glob@7.1.6, glob@^7.1.3:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-growl@1.10.5:
-  version "1.10.5"
-  resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
-  integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
-
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-has-flag@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
-  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
-
-has-symbols@^1.0.0, has-symbols@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
-  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
-
-has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
-  dependencies:
-    function-bind "^1.1.1"
-
-he@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-
-https-proxy-agent@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz#702b71fb5520a132a66de1f67541d9e62154d82b"
-  integrity sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==
-  dependencies:
-    agent-base "5"
-    debug "4"
-
-ieee754@^1.1.4:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
-  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2, inherits@^2.0.3, inherits@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
-is-binary-path@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
-  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
-  dependencies:
-    binary-extensions "^2.0.0"
-
-is-buffer@~2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
-  integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
-
-is-callable@^1.1.4, is-callable@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
-  integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
-
-is-date-object@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
-  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
-
-is-extglob@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
-
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
-
-is-glob@^4.0.1, is-glob@~4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
-  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
-  dependencies:
-    is-extglob "^2.1.1"
-
-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
-is-number@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
-  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
-
-is-regex@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
-  integrity sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==
-  dependencies:
-    has "^1.0.3"
-
-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
-
-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
-is-symbol@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
-  integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
-  dependencies:
-    has-symbols "^1.0.1"
-
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
-isexe@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
-  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
-
-iterate-iterator@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/iterate-iterator/-/iterate-iterator-1.0.1.tgz#1693a768c1ddd79c969051459453f082fe82e9f6"
-  integrity sha512-3Q6tudGN05kbkDQDI4CqjaBf4qf85w6W6GnuZDtUVYwKgtC1q8yxYX7CZed7N+tLzQqS6roujWvszf13T+n9aw==
-
-iterate-value@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/iterate-value/-/iterate-value-1.0.2.tgz#935115bd37d006a52046535ebc8d07e9c9337f57"
-  integrity sha512-A6fMAio4D2ot2r/TYzr4yUWrmwNdsN5xL7+HUiyACE4DXm+q8HtPcnFTp+NnW3k4N05tZ7FVYFFb2CR13NxyHQ==
-  dependencies:
-    es-get-iterator "^1.0.2"
-    iterate-iterator "^1.0.1"
-
-js-yaml@3.13.1:
-  version "3.13.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
-  integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
-locate-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
-  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
-  dependencies:
-    p-locate "^3.0.0"
-    path-exists "^3.0.0"
-
-locate-path@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
-  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
-  dependencies:
-    p-locate "^4.1.0"
-
-lodash@^4.17.15:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
-log-symbols@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
-  integrity sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==
-  dependencies:
-    chalk "^2.4.2"
-
-mime@^2.0.3:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
-  integrity sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==
-
-minimatch@3.0.4, minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-mkdirp-classic@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.2.tgz#54c441ce4c96cd7790e10b41a87aa51068ecab2b"
-  integrity sha512-ejdnDQcR75gwknmMw/tx02AuRs8jCtqFoFqDZMjiNxsu85sRIJVXDKHuLYvUUPRBUtV2FpSZa9bL1BUa3BdR2g==
-
-mocha@8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/mocha/-/mocha-8.0.1.tgz#fe01f0530362df271aa8f99510447bc38b88d8ed"
-  integrity sha512-vefaXfdYI8+Yo8nPZQQi0QO2o+5q9UIMX1jZ1XMmK3+4+CQjc7+B0hPdUeglXiTlr8IHMVRo63IhO9Mzt6fxOg==
-  dependencies:
-    ansi-colors "4.1.1"
-    browser-stdout "1.3.1"
-    chokidar "3.3.1"
-    debug "3.2.6"
-    diff "4.0.2"
-    escape-string-regexp "1.0.5"
-    find-up "4.1.0"
-    glob "7.1.6"
-    growl "1.10.5"
-    he "1.2.0"
-    js-yaml "3.13.1"
-    log-symbols "3.0.0"
-    minimatch "3.0.4"
-    ms "2.1.2"
-    object.assign "4.1.0"
-    promise.allsettled "1.0.2"
-    serialize-javascript "3.0.0"
-    strip-json-comments "3.0.1"
-    supports-color "7.1.0"
-    which "2.0.2"
-    wide-align "1.1.3"
-    workerpool "6.0.0"
-    yargs "13.3.2"
-    yargs-parser "13.1.2"
-    yargs-unparser "1.6.0"
-
-ms@2.1.2, ms@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
-
-normalize-path@^3.0.0, normalize-path@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
-  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
-
-object-inspect@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
-  integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
-
-object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
-  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
-
-object.assign@4.1.0, object.assign@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
-  integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
-  dependencies:
-    define-properties "^1.1.2"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.0"
-    object-keys "^1.0.11"
-
-once@^1.3.0, once@^1.3.1, once@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
-  dependencies:
-    wrappy "1"
-
-p-limit@^2.0.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.2.tgz#61279b67721f5287aa1c13a9a7fbbc48c9291b1e"
-  integrity sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==
-  dependencies:
-    p-try "^2.0.0"
-
-p-limit@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
-  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
-  dependencies:
-    p-try "^2.0.0"
-
-p-locate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
-  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
-  dependencies:
-    p-limit "^2.0.0"
-
-p-locate@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
-  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
-  dependencies:
-    p-limit "^2.2.0"
-
-p-try@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
-  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
-
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
-
-path-exists@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
-  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-pathval@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
-  integrity sha1-uULm1L3mUwBe9rcTYd74cn0GReA=
-
-pend@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
-  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
-
-picomatch@^2.0.4:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
-  integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
-
-picomatch@^2.0.7:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
-  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
-
-progress@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
-  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
-
-promise.allsettled@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/promise.allsettled/-/promise.allsettled-1.0.2.tgz#d66f78fbb600e83e863d893e98b3d4376a9c47c9"
-  integrity sha512-UpcYW5S1RaNKT6pd+s9jp9K9rlQge1UXKskec0j6Mmuq7UJCvlS2J2/s/yuPN8ehftf9HXMxWlKiPbGGUzpoRg==
-  dependencies:
-    array.prototype.map "^1.0.1"
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-    iterate-value "^1.0.0"
-
-proxy-from-env@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
-  integrity sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=
-
-pump@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
-  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-puppeteer@3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-3.3.0.tgz#95839af9fdc0aa4de7e5ee073a4c0adeb9e2d3d7"
-  integrity sha512-23zNqRltZ1PPoK28uRefWJ/zKb5Jhnzbbwbpcna2o5+QMn17F0khq5s1bdH3vPlyj+J36pubccR8wiNA/VE0Vw==
-  dependencies:
-    debug "^4.1.0"
-    extract-zip "^2.0.0"
-    https-proxy-agent "^4.0.0"
-    mime "^2.0.3"
-    progress "^2.0.1"
-    proxy-from-env "^1.0.0"
-    rimraf "^3.0.2"
-    tar-fs "^2.0.0"
-    unbzip2-stream "^1.3.3"
-    ws "^7.2.3"
-
-readable-stream@^3.1.1, readable-stream@^3.4.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
-readdirp@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17"
-  integrity sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==
-  dependencies:
-    picomatch "^2.0.7"
-
-require-directory@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
-
-require-main-filename@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
-  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
-
-rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
-safe-buffer@~5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
-  integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
-
-serialize-javascript@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.0.0.tgz#492e489a2d77b7b804ad391a5f5d97870952548e"
-  integrity sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw==
-
-set-blocking@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
-
-sprintf-js@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
-  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
-
-"string-width@^1.0.2 || 2":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
-  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
-  dependencies:
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^4.0.0"
-
-string-width@^3.0.0, string-width@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
-  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
-string.prototype.trimleft@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74"
-  integrity sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==
-  dependencies:
-    define-properties "^1.1.3"
-    function-bind "^1.1.1"
-
-string.prototype.trimright@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz#440314b15996c866ce8a0341894d45186200c5d9"
-  integrity sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==
-  dependencies:
-    define-properties "^1.1.3"
-    function-bind "^1.1.1"
-
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-strip-ansi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
-  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
-  dependencies:
-    ansi-regex "^3.0.0"
-
-strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
-
-strip-json-comments@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
-  integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
-
-supports-color@7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
-  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
-  dependencies:
-    has-flag "^4.0.0"
-
-supports-color@^5.3.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
-tar-fs@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.0.1.tgz#e44086c1c60d31a4f0cf893b1c4e155dabfae9e2"
-  integrity sha512-6tzWDMeroL87uF/+lin46k+Q+46rAJ0SyPGz7OW7wTgblI273hsBqk2C1j0/xNadNLKDTUL9BukSjB7cwgmlPA==
-  dependencies:
-    chownr "^1.1.1"
-    mkdirp-classic "^0.5.2"
-    pump "^3.0.0"
-    tar-stream "^2.0.0"
-
-tar-stream@^2.0.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.1.2.tgz#6d5ef1a7e5783a95ff70b69b97455a5968dc1325"
-  integrity sha512-UaF6FoJ32WqALZGOIAApXx+OdxhekNMChu6axLJR85zMMjXKWFGjbIRe+J6P4UnRGg9rAwWvbTT0oI7hD/Un7Q==
-  dependencies:
-    bl "^4.0.1"
-    end-of-stream "^1.4.1"
-    fs-constants "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^3.1.1"
-
-through@^2.3.8:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
-
-to-regex-range@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
-  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
-  dependencies:
-    is-number "^7.0.0"
-
-type-detect@^4.0.0, type-detect@^4.0.5:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
-  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
-
-unbzip2-stream@^1.3.3:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.2.tgz#84eb9e783b186d8fb397515fbb656f312f1a7dbf"
-  integrity sha512-pZMVAofMrrHX6Ik39hCk470kulCbmZ2SWfQLPmTWqfJV/oUm0gn1CblvHdUu4+54Je6Jq34x8kY6XjTy6dMkOg==
-  dependencies:
-    buffer "^5.2.1"
-    through "^2.3.8"
-
-util-deprecate@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
-
-which-module@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
-  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
-
-which@2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
-  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
-  dependencies:
-    isexe "^2.0.0"
-
-wide-align@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
-  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
-  dependencies:
-    string-width "^1.0.2 || 2"
-
-workerpool@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.0.0.tgz#85aad67fa1a2c8ef9386a1b43539900f61d03d58"
-  integrity sha512-fU2OcNA/GVAJLLyKUoHkAgIhKb0JoCpSjLC/G2vYKxUjVmQwGbRVeoPJ1a8U4pnVofz4AQV5Y/NEw8oKqxEBtA==
-
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
-  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
-  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
-
-ws@^7.2.3:
-  version "7.2.3"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.2.3.tgz#a5411e1fb04d5ed0efee76d26d5c46d830c39b46"
-  integrity sha512-HTDl9G9hbkNDk98naoR/cHDws7+EyYMOdL1BmjsZXRUjf7d+MficC4B7HLUPlSiho0vg+CWKrGIt/VJBd1xunQ==
-
-y18n@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
-  integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
-
-yargs-parser@13.1.2, yargs-parser@^13.1.2:
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
-  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs-unparser@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/yargs-unparser/-/yargs-unparser-1.6.0.tgz#ef25c2c769ff6bd09e4b0f9d7c605fb27846ea9f"
-  integrity sha512-W9tKgmSn0DpSatfri0nx52Joq5hVXgeLiqR/5G0sZNDoLZFOr/xjBUDcShCOGNsBnEMNo1KAMBkTej1Hm62HTw==
-  dependencies:
-    flat "^4.1.0"
-    lodash "^4.17.15"
-    yargs "^13.3.0"
-
-yargs@13.3.2, yargs@^13.3.0:
-  version "13.3.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
-  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
-  dependencies:
-    cliui "^5.0.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^13.1.2"
-
-yauzl@^2.10.0:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
-  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
-  dependencies:
-    buffer-crc32 "~0.2.3"
-    fd-slicer "~1.1.0"
diff --git a/build-system/tasks/pr-check.js b/build-system/tasks/pr-check.js
index 1eebe56245fa6..d90d1c1a3de2c 100644
--- a/build-system/tasks/pr-check.js
+++ b/build-system/tasks/pr-check.js
@@ -20,123 +20,133 @@ const {
   printChangeSummary,
   startTimer,
   stopTimer,
-  stopTimedJob,
   timedExec,
 } = require('../pr-check/utils');
-const {determineBuildTargets} = require('../pr-check/build-targets');
-const {runYarnChecks} = require('../pr-check/yarn-checks');
+const {
+  Targets,
+  buildTargetsInclude,
+  determineBuildTargets,
+} = require('../pr-check/build-targets');
+const {runNpmChecks} = require('../common/npm-checks');
+const {setLoggingPrefix} = require('../common/logging');
 
-const FILENAME = 'pr-check.js';
+const jobName = 'pr-check.js';
 
 /**
  * This file runs tests against the local workspace to mimic the CI build as
  * closely as possible.
- * @param {Function} cb
  */
-async function prCheck(cb) {
-  const failTask = () => {
-    stopTimer(FILENAME, FILENAME, startTime);
-    const err = new Error('Local PR check failed. See logs above.');
-    err.showStack = false;
-    cb(err);
-  };
-
+async function prCheck() {
   const runCheck = (cmd) => {
-    const {status} = timedExec(cmd, FILENAME);
+    const {status} = timedExec(cmd);
     if (status != 0) {
-      failTask();
+      stopTimer(jobName, startTime);
+      throw new Error('Local PR check failed. See logs above.');
     }
   };
 
-  const startTime = startTimer(FILENAME, FILENAME);
-  if (!runYarnChecks(FILENAME)) {
-    stopTimedJob(FILENAME, startTime);
-    return;
+  setLoggingPrefix(jobName);
+  const startTime = startTimer(jobName);
+  runNpmChecks();
+  printChangeSummary();
+  determineBuildTargets();
+
+  if (buildTargetsInclude(Targets.PRESUBMIT)) {
+    runCheck('amp presubmit');
+  }
+
+  if (buildTargetsInclude(Targets.INVALID_WHITESPACES)) {
+    runCheck('amp check-invalid-whitespaces --local_changes');
+  }
+
+  if (buildTargetsInclude(Targets.HTML_FIXTURES)) {
+    runCheck('amp validate-html-fixtures --local_changes');
   }
 
-  printChangeSummary(FILENAME);
-  const buildTargets = determineBuildTargets(FILENAME);
-  runCheck('gulp lint --local_changes');
-  runCheck('gulp prettify --local_changes');
-  runCheck('gulp presubmit');
-  runCheck('gulp check-exact-versions');
+  if (buildTargetsInclude(Targets.LINT_RULES)) {
+    runCheck('amp lint');
+  } else if (buildTargetsInclude(Targets.LINT)) {
+    runCheck('amp lint --local_changes');
+  }
+
+  if (buildTargetsInclude(Targets.PRETTIFY)) {
+    runCheck('amp prettify --local_changes');
+  }
+
+  if (buildTargetsInclude(Targets.AVA)) {
+    runCheck('amp ava');
+  }
+
+  if (buildTargetsInclude(Targets.BUILD_SYSTEM)) {
+    runCheck('amp check-build-system');
+  }
 
-  if (buildTargets.has('AVA')) {
-    runCheck('gulp ava');
+  if (buildTargetsInclude(Targets.BABEL_PLUGIN)) {
+    runCheck('amp babel-plugin-tests');
   }
 
-  if (buildTargets.has('BABEL_PLUGIN')) {
-    runCheck('gulp babel-plugin-tests');
+  if (buildTargetsInclude(Targets.CACHES_JSON)) {
+    runCheck('amp caches-json');
   }
 
-  if (buildTargets.has('CACHES_JSON')) {
-    runCheck('gulp caches-json');
+  if (buildTargetsInclude(Targets.DOCS)) {
+    runCheck('amp check-links --local_changes');
   }
 
-  if (buildTargets.has('DOCS')) {
-    runCheck('gulp check-links --local_changes');
+  if (buildTargetsInclude(Targets.DEV_DASHBOARD)) {
+    runCheck('amp dev-dashboard-tests');
   }
 
-  if (buildTargets.has('DEV_DASHBOARD')) {
-    runCheck('gulp dev-dashboard-tests');
+  if (buildTargetsInclude(Targets.OWNERS)) {
+    runCheck('amp check-owners');
   }
 
-  if (buildTargets.has('OWNERS')) {
-    runCheck('gulp check-owners');
+  if (buildTargetsInclude(Targets.PACKAGE_UPGRADE)) {
+    runCheck('amp check-exact-versions');
   }
 
-  if (buildTargets.has('RENOVATE_CONFIG')) {
-    runCheck('gulp check-renovate-config');
+  if (buildTargetsInclude(Targets.RENOVATE_CONFIG)) {
+    runCheck('amp check-renovate-config');
   }
 
-  if (buildTargets.has('SERVER')) {
-    runCheck('gulp server-tests');
+  if (buildTargetsInclude(Targets.SERVER)) {
+    runCheck('amp server-tests');
   }
 
-  if (buildTargets.has('RUNTIME')) {
-    runCheck('gulp dep-check');
-    runCheck('gulp check-types');
-    runCheck('gulp check-sourcemaps');
+  if (buildTargetsInclude(Targets.RUNTIME)) {
+    runCheck('amp dep-check');
+    runCheck('amp check-types');
+    runCheck('amp check-sourcemaps');
   }
 
-  if (buildTargets.has('RUNTIME') || buildTargets.has('UNIT_TEST')) {
-    runCheck('gulp unit --local_changes --headless');
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.UNIT_TEST)) {
+    runCheck('amp unit --local_changes --headless');
   }
 
-  if (
-    buildTargets.has('RUNTIME') ||
-    buildTargets.has('FLAG_CONFIG') ||
-    buildTargets.has('INTEGRATION_TEST')
-  ) {
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.INTEGRATION_TEST)) {
     if (!argv.nobuild) {
-      runCheck('gulp clean');
-      runCheck('gulp dist --fortesting');
+      runCheck('amp clean');
+      runCheck('amp dist --fortesting');
     }
-    runCheck('gulp integration --nobuild --compiled --headless');
+    runCheck('amp integration --nobuild --compiled --headless');
   }
 
-  if (buildTargets.has('RUNTIME') || buildTargets.has('VALIDATOR')) {
-    runCheck('gulp validator');
+  if (buildTargetsInclude(Targets.RUNTIME, Targets.VALIDATOR)) {
+    runCheck('amp validator');
   }
 
-  // #28497: Java Validator tests are broken due to Ubuntu keyserver outage.
-  // if (buildTargets.has('VALIDATOR_JAVA')) {
-  //   runCheck('gulp validator-java');
-  // }
-
-  if (buildTargets.has('VALIDATOR_WEBUI')) {
-    runCheck('gulp validator-webui');
+  if (buildTargetsInclude(Targets.VALIDATOR_WEBUI)) {
+    runCheck('amp validator-webui');
   }
 
-  stopTimer(FILENAME, FILENAME, startTime);
+  stopTimer(jobName, startTime);
 }
 
 module.exports = {
   prCheck,
 };
 
-prCheck.description =
-  'Runs a subset of the Travis CI checks against local changes.';
+prCheck.description = 'Runs a subset of the CI checks against local changes.';
 prCheck.flags = {
-  'nobuild': '  Skips building the runtime via `gulp dist`.',
+  'nobuild': 'Skips building the runtime via `amp dist`.',
 };
diff --git a/build-system/tasks/pr-deploy-bot-utils.js b/build-system/tasks/pr-deploy-bot-utils.js
index b37ba3a50af98..c01d19a4af4aa 100644
--- a/build-system/tasks/pr-deploy-bot-utils.js
+++ b/build-system/tasks/pr-deploy-bot-utils.js
@@ -15,17 +15,22 @@
  */
 'use strict';
 
+const fetch = require('node-fetch');
 const fs = require('fs-extra');
-const log = require('fancy-log');
 const path = require('path');
-const request = require('request-promise');
-const {cyan, green} = require('ansi-colors');
-const {gitCommitHash} = require('../common/git');
+const {ciBuildSha, circleciBuildNumber} = require('../common/ci');
+const {cyan} = require('../common/colors');
+const {getLoggingPrefix, logWithoutTimestamp} = require('../common/logging');
 const {replaceUrls: replaceUrlsAppUtil} = require('../server/app-utils');
-const {travisBuildNumber} = require('../common/travis');
 
 const hostNamePrefix = 'https://storage.googleapis.com/amp-test-website-1';
+const prDeployBotBaseUrl =
+  'https://amp-pr-deploy-bot.appspot.com/v0/pr-deploy/';
 
+/**
+ * @param {string} dest
+ * @return {Promise<string[]>}
+ */
 async function walk(dest) {
   const filelist = [];
   const files = await fs.readdir(dest);
@@ -41,22 +46,30 @@ async function walk(dest) {
   return filelist;
 }
 
+/**
+ * @return {string}
+ */
+function getBaseUrl() {
+  return `${hostNamePrefix}/amp_nomodule_${ciBuildSha()}`;
+}
+
+/**
+ * @param {string} filePath
+ * @return {Promise<void>}
+ */
 async function replace(filePath) {
   const data = await fs.readFile(filePath, 'utf8');
-  const hostName = `${hostNamePrefix}/amp_dist_${travisBuildNumber()}`;
+  const hostName = getBaseUrl();
   const inabox = false;
-  const storyV1 = true;
-  const result = replaceUrlsAppUtil(
-    'compiled',
-    data,
-    hostName,
-    inabox,
-    storyV1
-  );
+  const result = replaceUrlsAppUtil('compiled', data, hostName, inabox);
 
   await fs.writeFile(filePath, result, 'utf8');
 }
 
+/**
+ * @param {string} dir
+ * @return {Promise<void>}
+ */
 async function replaceUrls(dir) {
   const files = await walk(dir);
   const promises = files
@@ -65,22 +78,25 @@ async function replaceUrls(dir) {
   await Promise.all(promises);
 }
 
-async function signalDistUpload(result) {
-  const sha = gitCommitHash();
-  const travisBuild = travisBuildNumber();
-  const baseUrl = 'https://amp-pr-deploy-bot.appspot.com/v0/pr-deploy/';
-  const url = `${baseUrl}travisbuilds/${travisBuild}/headshas/${sha}/${result}`;
-
-  await request.post(url);
-  log(
-    green('INFO:'),
-    'reported ',
-    cyan(`dist: ${result}`),
-    'to the pr-deploy GitHub App'
+/**
+ * @param {string} result
+ * @return {Promise<void>}
+ */
+async function signalPrDeployUpload(result) {
+  const loggingPrefix = getLoggingPrefix();
+  logWithoutTimestamp(
+    `${loggingPrefix} Reporting`,
+    cyan(result),
+    'to the pr-deploy GitHub App...'
   );
+  const sha = ciBuildSha();
+  const maybeJobId = result == 'success' ? `/${circleciBuildNumber()}` : '';
+  const url = `${prDeployBotBaseUrl}headshas/${sha}/${result}${maybeJobId}`;
+  await fetch(url, {method: 'POST'});
 }
 
 module.exports = {
+  getBaseUrl,
   replaceUrls,
-  signalDistUpload,
+  signalPrDeployUpload,
 };
diff --git a/build-system/tasks/prepend-global/index.js b/build-system/tasks/prepend-global/index.js
index e248b8483cfde..92aadcdb98ecd 100644
--- a/build-system/tasks/prepend-global/index.js
+++ b/build-system/tasks/prepend-global/index.js
@@ -17,18 +17,19 @@
 
 const argv = require('minimist')(process.argv.slice(2));
 const childProcess = require('child_process');
-const colors = require('ansi-colors');
+const colors = require('../../common/colors');
 const fs = require('fs');
-const log = require('fancy-log');
 const path = require('path');
 const util = require('util');
+const {log} = require('../../common/logging');
 
 const exec = util.promisify(childProcess.exec);
 
-const {red, cyan} = colors;
+const {cyan, red} = colors;
 
-// custom-config.json overlays the active config. It is not part of checked-in source (.gitignore'd). See:
-// https://github.com/ampproject/amphtml/blob/master/build-system/global-configs/README.md#custom-configjson
+// custom-config.json overlays the active config. It is not part of checked-in
+// source (.gitignore'd). See:
+// https://github.com/ampproject/amphtml/blob/main/build-system/global-configs/README.md#custom-configjson
 const customConfigFile = 'build-system/global-configs/custom-config.json';
 
 /**
@@ -59,24 +60,16 @@ function sanityCheck(str) {
 
 /**
  * @param {string} filename File containing the config
- * @param {string=} opt_localBranch Whether to use the local branch version
+ * @param {boolean=} opt_localBranch Whether to use the local branch version
  * @param {string=} opt_branch If not the local branch, which branch to use
- * @return {!Promise}
+ * @return {!Promise<string>}
  */
-function checkoutBranchConfigs(filename, opt_localBranch, opt_branch) {
+async function fetchConfigFromBranch_(filename, opt_localBranch, opt_branch) {
   if (opt_localBranch) {
-    return Promise.resolve();
+    return fs.promises.readFile(filename, 'utf8');
   }
-  const branch = opt_branch || 'origin/master';
-  // One bad path here will fail the whole operation.
-  return exec(`git checkout ${branch} ${filename}`).catch(function (e) {
-    // This means the files don't exist in master. Assume that it exists
-    // in the current branch.
-    if (/did not match any file/.test(e.message)) {
-      return;
-    }
-    throw e;
-  });
+  const branch = opt_branch || 'origin/main';
+  return (await exec(`git show ${branch}:${filename}`)).stdout;
 }
 
 /**
@@ -95,13 +88,13 @@ function prependConfig(configString, fileString) {
  * @param {string} filename Destination filename
  * @param {string} fileString String to write
  * @param {boolean=} opt_dryrun If true, print the contents without writing them
- * @return {!Promise}
+ * @return {!Promise<void>}
  */
-function writeTarget(filename, fileString, opt_dryrun) {
+async function writeTarget_(filename, fileString, opt_dryrun) {
   if (opt_dryrun) {
     log(cyan(`overwriting: ${filename}`));
     log(fileString);
-    return Promise.resolve();
+    return;
   }
   return fs.promises.writeFile(filename, fileString);
 }
@@ -126,76 +119,79 @@ function valueOrDefault(value, defaultValue) {
  * @param {boolean=} opt_localBranch Whether to use the local branch version
  * @param {string=} opt_branch If not the local branch, which branch to use
  * @param {boolean=} opt_fortesting Whether to force getMode().test to be true
- * @return {!Promise}
+ * @param {boolean=} opt_derandomize Whether to remove experiment randomization
+ * @return {!Promise<void>}
  */
-function applyConfig(
+async function applyConfig(
   config,
   target,
   filename,
   opt_localDev,
   opt_localBranch,
   opt_branch,
-  opt_fortesting
+  opt_fortesting,
+  opt_derandomize
 ) {
-  return checkoutBranchConfigs(filename, opt_localBranch, opt_branch)
-    .then(() => {
-      return Promise.all([
-        fs.promises.readFile(filename, 'utf8'),
-        fs.promises.readFile(target, 'utf8'),
-        fs.promises.readFile(customConfigFile, 'utf8').catch(() => {}),
-      ]);
-    })
-    .then(([configString, targetString, overlayString]) => {
-      let configJson;
-      try {
-        configJson = JSON.parse(configString);
-      } catch (e) {
-        log(red(`Error parsing config file: ${filename}`));
-        throw e;
-      }
-      if (overlayString) {
-        try {
-          const overlayJson = JSON.parse(overlayString);
-          Object.assign(configJson, overlayJson);
-          log('Overlaid config with', cyan(path.basename(customConfigFile)));
-        } catch (e) {
-          log(
-            red('Could not apply overlay from'),
-            cyan(path.basename(customConfigFile))
-          );
-        }
-      }
-      if (opt_localDev) {
-        configJson = enableLocalDev(config, target, configJson);
-      }
-      if (opt_fortesting) {
-        configJson = {test: true, ...configJson};
-      }
-      configString = JSON.stringify(configJson);
-      return prependConfig(configString, targetString);
-    })
-    .then((fileString) => {
-      sanityCheck(fileString);
-      return writeTarget(target, fileString, argv.dryrun);
-    })
-    .then(() => {
-      const details =
-        '(' +
-        cyan(config) +
-        (opt_localDev ? ', ' + cyan('localDev') : '') +
-        (opt_fortesting ? ', ' + cyan('test') : '') +
-        ')';
-      log('Applied AMP config', details, 'to', cyan(path.basename(target)));
-    });
+  const configString = await fetchConfigFromBranch_(
+    filename,
+    opt_localBranch,
+    opt_branch
+  );
+  const [targetString, overlayString] = await Promise.all([
+    fs.promises.readFile(target, 'utf8'),
+    fs.promises.readFile(customConfigFile, 'utf8').catch(() => {}),
+  ]);
+
+  let configJson;
+  try {
+    configJson = JSON.parse(configString);
+  } catch (e) {
+    log(red(`Error parsing config file: ${filename}`));
+    throw e;
+  }
+  if (overlayString) {
+    try {
+      const overlayJson = JSON.parse(overlayString);
+      Object.assign(configJson, overlayJson);
+      log('Overlaid config with', cyan(path.basename(customConfigFile)));
+    } catch (e) {
+      log(
+        red('Could not apply overlay from'),
+        cyan(path.basename(customConfigFile))
+      );
+    }
+  }
+  if (opt_localDev) {
+    configJson = enableLocalDev_(target, configJson);
+  }
+  if (opt_fortesting) {
+    configJson = {test: true, ...configJson};
+  }
+  if (opt_derandomize) {
+    configJson = derandomize_(target, configJson);
+  }
+  const fileString = await prependConfig(
+    JSON.stringify(configJson),
+    targetString
+  );
+  sanityCheck(fileString);
+  await writeTarget_(target, fileString, argv.dryrun);
+  const details =
+    '(' +
+    cyan(config) +
+    (opt_localDev ? ', ' + cyan('localDev') : '') +
+    (opt_fortesting ? ', ' + cyan('test') : '') +
+    (opt_derandomize ? ', ' + cyan('derandomized') : '') +
+    ')';
+  log('Applied AMP config', details, 'to', cyan(path.basename(target)));
 }
 
 /**
- * @param {string} config Prod or canary
  * @param {string} target File containing the AMP runtime (amp.js or v0.js)
- * @param {string} configJson The json object in which to enable local dev
- * @return {string}
+ * @param {!JSON} configJson The json object in which to enable local dev
+ * @return {!JSON}
  */
-function enableLocalDev(config, target, configJson) {
+function enableLocalDev_(target, configJson) {
   let LOCAL_DEV_AMP_CONFIG = {localDev: true};
   const TESTING_HOST = process.env.AMP_TESTING_HOST;
   if (typeof TESTING_HOST == 'string') {
@@ -222,39 +218,49 @@ function enableLocalDev(config, target, configJson) {
 }
 
 /**
- * @param {string} target Target file from which to remove the AMP config
- * @return {!Promise}
+ * @param {string} target File containing the AMP runtime (amp.js or v0.js)
+ * @param {!JSON} configJson The json object in which to enable local dev
+ * @return {!JSON}
  */
-function removeConfig(target) {
-  return fs.promises.readFile(target).then((file) => {
-    let contents = file.toString();
-    if (numConfigs(contents) == 0) {
-      return Promise.resolve();
+function derandomize_(target, configJson) {
+  for (const [key, value] of Object.entries(configJson)) {
+    if (typeof value == 'number') {
+      configJson[key] = Math.round(value);
     }
-    sanityCheck(contents);
-    const config = /self\.AMP_CONFIG\|\|\(self\.AMP_CONFIG=.*?\/\*AMP_CONFIG\*\//;
-    contents = contents.replace(config, '');
-    return writeTarget(target, contents, argv.dryrun).then(() => {
-      log('Removed existing config from', cyan(target));
-    });
-  });
+  }
+  log('Derandomized experiements in', cyan(target));
+  return configJson;
 }
 
-async function prependGlobal() {
-  const TESTING_HOST = process.env.AMP_TESTING_HOST;
-  const target = argv.target || TESTING_HOST;
-
-  if (!target) {
-    log(red('Missing --target.'));
+/**
+ * @param {string} target Target file from which to remove the AMP config
+ * @return {!Promise<void>}
+ */
+async function removeConfig(target) {
+  const file = await fs.promises.readFile(target);
+  let contents = file.toString();
+  if (numConfigs(contents) == 0) {
     return;
   }
+  sanityCheck(contents);
+  const config = /self\.AMP_CONFIG\|\|\(self\.AMP_CONFIG=.*?\/\*AMP_CONFIG\*\//;
+  contents = contents.replace(config, '');
+  await writeTarget_(target, contents, argv.dryrun);
+  log('Removed existing config from', cyan(target));
+}
 
-  if (argv.remove) {
-    return removeConfig(target);
+/**
+ * @return {Promise<void>}
+ */
+async function prependGlobal() {
+  if (!argv.target) {
+    log(red('Missing --target.'));
+    return;
   }
+  const targets = argv.target.split(',');
 
-  if (!(argv.prod || argv.canary)) {
-    log(red('One of --prod or --canary should be provided.'));
+  if (Boolean(argv.prod) == Boolean(argv.canary)) {
+    log(red('Exactly one of --prod or --canary should be provided.'));
     return;
   }
 
@@ -273,48 +279,48 @@ async function prependGlobal() {
       'build-system/global-configs/prod-config.json'
     );
   }
-  return removeConfig(target).then(() => {
-    return applyConfig(
-      config,
-      target,
-      filename,
-      argv.local_dev,
-      argv.local_branch,
-      argv.branch,
-      argv.fortesting
-    );
-  });
+  await Promise.all([...targets.map(removeConfig)]);
+  await Promise.all([
+    ...targets.map((target) =>
+      applyConfig(
+        config,
+        target,
+        filename,
+        argv.local_dev,
+        argv.local_branch,
+        argv.branch,
+        argv.fortesting,
+        argv.derandomize
+      )
+    ),
+  ]);
 }
 
 module.exports = {
   applyConfig,
-  checkoutBranchConfigs,
   numConfigs,
   prependConfig,
   prependGlobal,
   removeConfig,
   sanityCheck,
   valueOrDefault,
-  writeTarget,
 };
 
 prependGlobal.description = 'Prepends a json config to a target file';
 prependGlobal.flags = {
-  'target': '  The file to prepend the json config to.',
+  'target': 'Comma separated list of files to prepend the json config to.',
   'canary':
-    '  Prepend the default canary config. ' +
+    'Prepend the default canary config. ' +
     'Takes in an optional value for a custom canary config source.',
   'prod':
-    '  Prepend the default prod config. ' +
+    'Prepend the default prod config. ' +
     'Takes in an optional value for a custom prod config source.',
-  'local_dev': '  Enables runtime to be used for local development.',
+  'local_dev': 'Enables runtime to be used for local development.',
   'branch':
-    '  Switch to a git branch to get config source from. ' +
-    'Uses master by default.',
+    'Get config source from the given branch. Uses the main branch by default.',
   'local_branch':
-    "  Don't switch branches and use the config from the local branch.",
-  'fortesting': '  Force the config to return true for getMode().test',
-  'remove':
-    '  Removes previously prepended json config from the target ' +
-    'file (if present).',
+    "Don't switch branches and use the config from the local branch.",
+  'fortesting': 'Force the config to return true for getMode().test',
+  'derandomize':
+    'Rounds all experiment percentages to 0 or 1, whichever is closest.',
 };
diff --git a/build-system/tasks/prepend-global/prepend-global.test.js b/build-system/tasks/prepend-global/prepend-global.test.js
new file mode 100644
index 0000000000000..bcdb60acf37a2
--- /dev/null
+++ b/build-system/tasks/prepend-global/prepend-global.test.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2016 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 m = require('.');
+const test = require('ava');
+
+test('sync - prepends global config', (t) => {
+  t.plan(1);
+  const res = m.prependConfig('{"hello":"world"}', 'var x = 1 + 1;');
+  t.is(
+    res,
+    'self.AMP_CONFIG||(self.AMP_CONFIG={"hello":"world"});' +
+      '/*AMP_CONFIG*/var x = 1 + 1;'
+  );
+});
+
+test('sync - valueOrDefault', (t) => {
+  t.plan(2);
+  let res = m.valueOrDefault(true, 'hello');
+  t.is(res, 'hello');
+  res = m.valueOrDefault('world', 'hello');
+  t.is(res, 'world');
+});
+
+test('sync - sanityCheck', (t) => {
+  t.plan(3);
+  const badStr =
+    'self.AMP_CONFIG||(self.AMP_CONFIG={"hello":"world"})' +
+    '/*AMP_CONFIG*/' +
+    'self.AMP_CONFIG||(self.AMP_CONFIG={"hello":"world"})' +
+    '/*AMP_CONFIG*/' +
+    'var x = 1 + 1;';
+  const badStr2 = 'var x = 1 + 1;';
+  const goodStr =
+    'self.AMP_CONFIG||(self.AMP_CONFIG={"hello":"world"})' +
+    '/*AMP_CONFIG*/' +
+    'var x = 1 + 1;';
+  t.false(m.numConfigs(badStr) == 1);
+  t.true(m.numConfigs(goodStr) == 1);
+  t.false(m.numConfigs(badStr2) == 1);
+});
diff --git a/build-system/tasks/prepend-global/test.js b/build-system/tasks/prepend-global/test.js
deleted file mode 100644
index 9146e7328323c..0000000000000
--- a/build-system/tasks/prepend-global/test.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright 2016 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 m = require('./');
-const test = require('ava');
-
-test('sync - prepends global config', (t) => {
-  t.plan(1);
-  const res = m.prependConfig('{"hello":"world"}', 'var x = 1 + 1;');
-  t.is(
-    res,
-    'self.AMP_CONFIG||(self.AMP_CONFIG={"hello":"world"});' +
-      '/*AMP_CONFIG*/var x = 1 + 1;'
-  );
-});
-
-test('sync - valueOrDefault', (t) => {
-  t.plan(2);
-  let res = m.valueOrDefault(true, 'hello');
-  t.is(res, 'hello');
-  res = m.valueOrDefault('world', 'hello');
-  t.is(res, 'world');
-});
-
-test('sync - sanityCheck', (t) => {
-  t.plan(3);
-  const badStr =
-    'self.AMP_CONFIG||(self.AMP_CONFIG={"hello":"world"})' +
-    '/*AMP_CONFIG*/' +
-    'self.AMP_CONFIG||(self.AMP_CONFIG={"hello":"world"})' +
-    '/*AMP_CONFIG*/' +
-    'var x = 1 + 1;';
-  const badStr2 = 'var x = 1 + 1;';
-  const goodStr =
-    'self.AMP_CONFIG||(self.AMP_CONFIG={"hello":"world"})' +
-    '/*AMP_CONFIG*/' +
-    'var x = 1 + 1;';
-  t.false(m.numConfigs(badStr) == 1);
-  t.true(m.numConfigs(goodStr) == 1);
-  t.false(m.numConfigs(badStr2) == 1);
-});
diff --git a/build-system/tasks/presubmit-checks.js b/build-system/tasks/presubmit-checks.js
deleted file mode 100644
index c081a31ffba54..0000000000000
--- a/build-system/tasks/presubmit-checks.js
+++ /dev/null
@@ -1,1455 +0,0 @@
-/**
- * Copyright 2015 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 colors = require('ansi-colors');
-const gulp = require('gulp');
-const log = require('fancy-log');
-const path = require('path');
-const srcGlobs = require('../test-configs/config').presubmitGlobs;
-const through2 = require('through2');
-
-const dedicatedCopyrightNoteSources = /(\.js|\.css|\.go)$/;
-
-const requiresReviewPrivacy =
-  'Usage of this API requires dedicated review due to ' +
-  'being privacy sensitive. Please file an issue asking for permission' +
-  ' to use if you have not yet done so.';
-
-const privateServiceFactory =
-  'This service should only be installed in ' +
-  'the allowlisted files. Other modules should use a public function ' +
-  'typically called serviceNameFor.';
-
-const shouldNeverBeUsed =
-  'Usage of this API is not allowed - only for internal purposes.';
-
-const backwardCompat =
-  'This method must not be called. It is only retained ' +
-  'for backward compatibility during rollout.';
-
-const realiasGetMode =
-  'Do not re-alias getMode or its return so it can be ' +
-  'DCE\'d. Use explicitly like "getMode().localDev" instead.';
-
-// Terms that must not appear in our source files.
-const forbiddenTerms = {
-  'DO NOT SUBMIT': '',
-  'whitelist|white-list': {
-    message: 'Please use the term allowlist instead',
-  },
-  'blacklist|black-list': {
-    message: 'Please use the term denylist instead',
-  },
-  'grandfather|grandfathered': {
-    message: 'Please use the term legacy instead',
-  },
-  // TODO(dvoytenko, #8464): cleanup allowlist.
-  '(^-amp-|\\W-amp-)': {
-    message: 'Switch to new internal class form',
-    allowlist: [
-      'build-system/server/amp4test.js',
-      'build-system/server/app-index/boilerplate.js',
-      'build-system/server/variable-substitution.js',
-      'build-system/tasks/extension-generator/index.js',
-      'build-system/tasks/storybook/amp-env/decorator.js',
-      'css/ampdoc.css',
-      'css/ampshared.css',
-      'extensions/amp-pinterest/0.1/amp-pinterest.css',
-      'extensions/amp-pinterest/0.1/follow-button.js',
-      'extensions/amp-pinterest/0.1/pin-widget.js',
-      'extensions/amp-pinterest/0.1/save-button.js',
-      'validator/engine/validator_test.js',
-    ],
-  },
-  '(^i-amp-|\\Wi-amp-)': {
-    message: 'Switch to new internal ID form',
-    allowlist: [
-      'build-system/tasks/create-golden-css/css/main.css',
-      'build-system/tasks/extension-generator/index.js',
-      'build-system/tasks/storybook/amp-env/decorator.js',
-      'css/ampdoc.css',
-      'css/ampshared.css',
-    ],
-  },
-  'describe\\.only': '',
-  'describes.*\\.only': '',
-  'dev\\(\\)\\.assert\\(': 'Use the devAssert function instead.',
-  '[^.]user\\(\\)\\.assert\\(': 'Use the userAssert function instead.',
-  'it\\.only': '',
-  'Math.random[^;()]*=': 'Use Sinon to stub!!!',
-  'gulp-util': {
-    message:
-      '`gulp-util` will be deprecated soon. See ' +
-      'https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5 ' +
-      'for a list of alternatives.',
-  },
-  'sinon\\.(spy|stub|mock)\\(': {
-    message: 'Use a sandbox instead to avoid repeated `#restore` calls',
-  },
-  '(\\w*([sS]py|[sS]tub|[mM]ock|clock).restore)': {
-    message: 'Use a sandbox instead to avoid repeated `#restore` calls',
-  },
-  'sinon\\.useFake\\w+': {
-    message: 'Use a sandbox instead to avoid repeated `#restore` calls',
-  },
-  'sandbox\\.(spy|stub|mock)\\([^,\\s]*[iI]?frame[^,\\s]*,': {
-    message:
-      'Do NOT stub on a cross domain iframe! #5359\n' +
-      '  If this is same domain, mark /*OK*/.\n' +
-      '  If this is cross domain, overwrite the method directly.',
-  },
-  'console\\.\\w+\\(': {
-    message:
-      'If you run against this, use console/*OK*/.[log|error] to ' +
-      'allowlist a legit case.',
-    allowlist: [
-      'build-system/common/check-package-manager.js',
-      'build-system/pr-check/build.js',
-      'build-system/pr-check/build-targets.js',
-      'build-system/pr-check/checks.js',
-      'build-system/pr-check/dist-bundle-size.js',
-      'build-system/pr-check/dist-tests.js',
-      'build-system/pr-check/module-dist-bundle-size.js',
-      'build-system/pr-check/experiment-tests.js',
-      'build-system/pr-check/e2e-tests.js',
-      'build-system/pr-check/local-tests.js',
-      'build-system/pr-check/performance-tests.js',
-      'build-system/pr-check/remote-tests.js',
-      'build-system/pr-check/utils.js',
-      'build-system/pr-check/validator-tests.js',
-      'build-system/pr-check/visual-diff-tests.js',
-      'build-system/pr-check/yarn-checks.js',
-      'build-system/server/app.js',
-      'build-system/server/amp4test.js',
-      'build-system/tasks/build.js',
-      'build-system/tasks/check-exact-versions.js',
-      'build-system/tasks/check-owners.js',
-      'build-system/tasks/check-types.js',
-      'build-system/tasks/dist.js',
-      'build-system/tasks/dns-monitor.js',
-      'build-system/tasks/generate-runner.js',
-      'build-system/tasks/helpers.js',
-      'build-system/tasks/prettify.js',
-      'build-system/tasks/server-tests.js',
-      'src/purifier/noop.js',
-      'validator/nodejs/index.js', // NodeJs only.
-      'validator/engine/parse-css.js',
-      'validator/engine/validator-in-browser.js',
-      'validator/engine/validator.js',
-    ],
-    checkInTestFolder: true,
-  },
-  '\\bgetModeObject\\(': {
-    message: realiasGetMode,
-    allowlist: [
-      'src/mode-object.js',
-      'src/iframe-attributes.js',
-      'dist.3p/current/integration.js',
-    ],
-  },
-  '(?:var|let|const) +IS_DEV +=': {
-    message:
-      'IS_DEV local var only allowed in mode.js and ' +
-      'dist.3p/current/integration.js',
-    allowlist: ['src/mode.js', 'dist.3p/current/integration.js'],
-  },
-  '\\.prefetch\\(': {
-    message: 'Do not use preconnect.prefetch, use preconnect.preload instead.',
-  },
-  'iframePing': {
-    message:
-      'This is only available in vendor config for temporary workarounds.',
-    allowlist: [
-      'build-system/server/routes/analytics.js',
-      'extensions/amp-analytics/0.1/config.js',
-      'extensions/amp-analytics/0.1/requests.js',
-    ],
-  },
-  // Service factories that should only be installed once.
-  'installActionServiceForDoc': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/inabox/inabox-services.js',
-      'src/service/action-impl.js',
-      'src/service/core-services.js',
-      'src/service/standard-actions-impl.js',
-    ],
-  },
-  'installActionHandler': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/service/action-impl.js',
-      'extensions/amp-access/0.1/amp-access.js',
-      'extensions/amp-form/0.1/amp-form.js',
-      'extensions/amp-viewer-assistance/0.1/amp-viewer-assistance.js',
-    ],
-  },
-  'installActivityService': {
-    message: privateServiceFactory,
-    allowlist: [
-      'extensions/amp-analytics/0.1/activity-impl.js',
-      'extensions/amp-analytics/0.1/amp-analytics.js',
-    ],
-  },
-  'cidServiceForDocForTesting': {
-    message: privateServiceFactory,
-    allowlist: ['src/service/cid-impl.js'],
-  },
-  'installCryptoService': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/runtime.js',
-      'src/service/core-services.js',
-      'src/service/crypto-impl.js',
-    ],
-  },
-  'installDocService': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/amp.js',
-      'src/amp-shadow.js',
-      'src/inabox/amp-inabox.js',
-      'src/service/ampdoc-impl.js',
-      'testing/describes.js',
-      'testing/iframe.js',
-    ],
-  },
-  'installMutatorServiceForDoc': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/inabox/inabox-services.js',
-      'src/service/core-services.js',
-      'src/service/mutator-impl.js',
-    ],
-  },
-  'installPerformanceService': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/amp.js',
-      'src/amp-shadow.js',
-      'src/inabox/amp-inabox.js',
-      'src/service/performance-impl.js',
-    ],
-  },
-  'installResourcesServiceForDoc': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/inabox/inabox-services.js',
-      'src/service/core-services.js',
-      'src/service/resources-impl.js',
-    ],
-  },
-  'installStorageServiceForDoc': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/runtime.js',
-      'src/service/core-services.js',
-      'src/service/storage-impl.js',
-    ],
-  },
-  'installTemplatesService': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/runtime.js',
-      'src/service/core-services.js',
-      'src/service/template-impl.js',
-    ],
-  },
-  'installUrlReplacementsServiceForDoc': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/inabox/inabox-services.js',
-      'src/service/core-services.js',
-      'src/service/url-replacements-impl.js',
-    ],
-  },
-  'installViewerServiceForDoc': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/runtime.js',
-      'src/inabox/inabox-services.js',
-      'src/service/core-services.js',
-      'src/service/viewer-impl.js',
-    ],
-  },
-  'installViewportServiceForDoc': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/runtime.js',
-      'src/service/core-services.js',
-      'src/service/viewport/viewport-impl.js',
-    ],
-  },
-  'installVsyncService': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/runtime.js',
-      'src/service/core-services.js',
-      'src/service/resources-impl.js',
-      'src/service/viewport/viewport-impl.js',
-      'src/service/vsync-impl.js',
-    ],
-  },
-  'installXhrService': {
-    message: privateServiceFactory,
-    allowlist: [
-      'src/runtime.js',
-      'src/service/core-services.js',
-      'src/service/xhr-impl.js',
-    ],
-  },
-  'installPositionObserverServiceForDoc': {
-    message: privateServiceFactory,
-    allowlist: [
-      // Please keep list alphabetically sorted.
-      'extensions/amp-fx-collection/0.1/providers/fx-provider.js',
-      'extensions/amp-list/0.1/amp-list.js',
-      'extensions/amp-next-page/0.1/next-page-service.js',
-      'extensions/amp-next-page/1.0/visibility-observer.js',
-      'extensions/amp-position-observer/0.1/amp-position-observer.js',
-      'extensions/amp-video-docking/0.1/amp-video-docking.js',
-      'src/service/position-observer/position-observer-impl.js',
-      'src/service/video-manager-impl.js',
-      'src/service/video/autoplay.js',
-    ],
-  },
-  'getServiceForDoc': {
-    message:
-      'Synchronous access to element services is unreliable (#22414). ' +
-      'Use getServicePromiseForDoc() instead.',
-    allowlist: [
-      // Do not allowlist additional "extensions/*" paths.
-      // TODO(#22414): Remove paths as they are migrated off of sync API.
-      'extensions/amp-analytics/0.1/instrumentation.js',
-      'extensions/amp-analytics/0.1/variables.js',
-      'extensions/amp-fx-collection/0.1/providers/fx-provider.js',
-      'src/chunk.js',
-      'src/service.js',
-      'src/service/cid-impl.js',
-      'src/service/origin-experiments-impl.js',
-      'src/services.js',
-      'testing/test-helper.js',
-    ],
-  },
-  'initLogConstructor|setReportError': {
-    message: 'Should only be called from JS binary entry files.',
-    allowlist: [
-      '3p/integration.js',
-      '3p/ampcontext-lib.js',
-      '3p/iframe-transport-client-lib.js',
-      '3p/recaptcha.js',
-      'ads/alp/install-alp.js',
-      'ads/inabox/inabox-host.js',
-      'dist.3p/current/integration.js',
-      'extensions/amp-access/0.1/amp-login-done.js',
-      'extensions/amp-viewer-integration/0.1/examples/amp-viewer-host.js',
-      'src/amp-story-player/amp-story-player-manager.js',
-      'src/runtime.js',
-      'src/log.js',
-      'src/web-worker/web-worker.js',
-      'tools/experiments/experiments.js',
-    ],
-  },
-  'parseUrlWithA': {
-    message: 'Use parseUrl instead.',
-    allowlist: [
-      'src/url.js',
-      'src/service/navigation.js',
-      'src/service/url-impl.js',
-      'dist.3p/current/integration.js',
-      'src/amp-story-player/amp-story-player-impl.js',
-    ],
-  },
-  '\\.sendMessage\\(': {
-    message: 'Usages must be reviewed.',
-    allowlist: [
-      // viewer-impl.sendMessage
-      'src/error.js',
-      'src/service/navigation.js',
-      'src/service/viewer-impl.js',
-      'src/service/viewport/viewport-impl.js',
-      'src/service/performance-impl.js',
-      'src/service/resources-impl.js',
-      'extensions/amp-bind/0.1/bind-impl.js',
-      'extensions/amp-app-banner/0.1/amp-app-banner.js',
-      'extensions/amp-subscriptions/0.1/viewer-subscription-platform.js',
-      'extensions/amp-viewer-integration/0.1/highlight-handler.js',
-      'extensions/amp-consent/0.1/consent-ui.js',
-      'extensions/amp-story/1.0/amp-story-viewer-messaging-handler.js',
-
-      // iframe-messaging-client.sendMessage
-      '3p/iframe-messaging-client.js',
-      '3p/ampcontext.js',
-      '3p/ampcontext-integration.js',
-      '3p/recaptcha.js',
-      'dist.3p/current/integration.js', // includes previous
-    ],
-  },
-  '\\.sendMessageAwaitResponse\\(': {
-    message: 'Usages must be reviewed.',
-    allowlist: [
-      'extensions/amp-access/0.1/login-dialog.js',
-      'extensions/amp-access/0.1/signin.js',
-      'extensions/amp-story-education/0.1/amp-story-education.js',
-      'extensions/amp-subscriptions/0.1/viewer-subscription-platform.js',
-      'src/impression.js',
-      'src/service/cid-impl.js',
-      'src/service/history-impl.js',
-      'src/service/storage-impl.js',
-      'src/ssr-template-helper.js',
-      'src/service/viewer-impl.js',
-      'src/service/viewer-cid-api.js',
-      'src/utils/xhr-utils.js',
-    ],
-  },
-  // Privacy sensitive
-  'cidForDoc|cidForDocOrNull': {
-    message: requiresReviewPrivacy,
-    allowlist: [
-      // CID service is not allowed in amp4ads. No usage should there be
-      // in extensions listed in the amp4ads spec:
-      // https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec
-      'src/ad-cid.js',
-      'src/services.js',
-      'src/service/cid-impl.js',
-      'src/service/standard-actions-impl.js',
-      'src/service/url-replacements-impl.js',
-      'extensions/amp-access/0.1/amp-access.js',
-      'extensions/amp-subscriptions/0.1/amp-subscriptions.js',
-      'extensions/amp-experiment/0.1/variant.js',
-      'extensions/amp-experiment/1.0/variant.js',
-      'extensions/amp-user-notification/0.1/amp-user-notification.js',
-      'extensions/amp-consent/0.1/consent-state-manager.js',
-      'extensions/amp-story/1.0/amp-story-reaction.js',
-    ],
-  },
-  'getBaseCid': {
-    message: requiresReviewPrivacy,
-    allowlist: ['src/service/cid-impl.js', 'src/service/viewer-impl.js'],
-  },
-  'isTrustedViewer': {
-    message: requiresReviewPrivacy,
-    allowlist: [
-      'extensions/amp-bind/0.1/bind-impl.js',
-      'src/error.js',
-      'src/utils/xhr-utils.js',
-      'src/service/navigation.js',
-      'src/service/viewer-impl.js',
-      'src/service/viewer-interface.js',
-      'src/service/viewer-cid-api.js',
-      'src/inabox/inabox-viewer.js',
-      'src/service/cid-impl.js',
-      'src/impression.js',
-      'src/ssr-template-helper.js',
-      'extensions/amp-viewer-assistance/0.1/amp-viewer-assistance.js',
-    ],
-  },
-  'prerenderSafe': {
-    message: requiresReviewPrivacy,
-    allowlist: [
-      'build-system/externs/amp.extern.js',
-      'extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js',
-      'src/utils/xhr-utils.js',
-    ],
-  },
-  'eval\\(': {
-    message: shouldNeverBeUsed,
-    allowlist: ['extension/amp-bind/0.1/test/test-bind-expr.js'],
-  },
-  'storageForDoc': {
-    message:
-      requiresReviewPrivacy +
-      ' Please refer to spec/amp-localstorage.md for more information on' +
-      ' the storage service usage.' +
-      ' Once approved, please also update the spec/amp-localstorage.md to' +
-      ' include your usage.',
-    allowlist: [
-      // Storage service is not allowed in amp4ads. No usage should there be
-      // in extensions listed in the amp4ads spec:
-      // https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec
-      'src/services.js',
-      'src/service/cid-impl.js',
-      'extensions/amp-ad-network-adsense-impl/0.1/responsive-state.js',
-      'extensions/amp-app-banner/0.1/amp-app-banner.js',
-      'extensions/amp-consent/0.1/consent-state-manager.js',
-      'extensions/amp-user-notification/0.1/amp-user-notification.js',
-    ],
-  },
-  'localStorage': {
-    message: requiresReviewPrivacy,
-    allowlist: [
-      'extensions/amp-access/0.1/amp-access-iframe.js',
-      'extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js',
-      'extensions/amp-script/0.1/amp-script.js',
-      'extensions/amp-story/1.0/history.js',
-      'extensions/amp-web-push/0.1/amp-web-push-helper-frame.js',
-      'extensions/amp-web-push/0.1/amp-web-push-permission-dialog.js',
-      'src/experiments.js',
-      'src/service/cid-impl.js',
-      'src/service/storage-impl.js',
-      'testing/fake-dom.js',
-    ],
-  },
-  'sessionStorage': {
-    message: requiresReviewPrivacy,
-    allowlist: [
-      'extensions/amp-access/0.1/amp-access-iframe.js',
-      'extensions/amp-accordion/0.1/amp-accordion.js',
-      'extensions/amp-script/0.1/amp-script.js',
-      'testing/fake-dom.js',
-    ],
-  },
-  'indexedDB': {
-    message: requiresReviewPrivacy,
-  },
-  'openDatabase': requiresReviewPrivacy,
-  'requestFileSystem': requiresReviewPrivacy,
-  'webkitRequestFileSystem': requiresReviewPrivacy,
-  'getAccessReaderId': {
-    message: requiresReviewPrivacy,
-    allowlist: [
-      'build-system/externs/amp.extern.js',
-      'extensions/amp-access/0.1/amp-access.js',
-      'extensions/amp-access/0.1/access-vars.js',
-      'extensions/amp-access-scroll/0.1/scroll-impl.js',
-      'extensions/amp-subscriptions/0.1/amp-subscriptions.js',
-      'src/service/url-replacements-impl.js',
-    ],
-  },
-  'getAuthdataField': {
-    message: requiresReviewPrivacy,
-    allowlist: [
-      'build-system/externs/amp.extern.js',
-      'extensions/amp-access/0.1/amp-access.js',
-      'extensions/amp-access/0.1/access-vars.js',
-      'extensions/amp-subscriptions/0.1/amp-subscriptions.js',
-      'src/service/url-replacements-impl.js',
-    ],
-  },
-  'debugger': '',
-  // Overridden APIs.
-  '(doc.*)\\.referrer': {
-    message: 'Use Viewer.getReferrerUrl() instead.',
-    allowlist: [
-      '3p/integration.js',
-      'ads/google/a4a/utils.js',
-      'dist.3p/current/integration.js',
-      'src/inabox/inabox-viewer.js',
-      'src/service/viewer-impl.js',
-      'src/error.js',
-      'src/window-interface.js',
-    ],
-  },
-  'getUnconfirmedReferrerUrl': {
-    message: 'Use Viewer.getReferrerUrl() instead.',
-    allowlist: [
-      'extensions/amp-dynamic-css-classes/0.1/amp-dynamic-css-classes.js',
-      'src/3p-frame.js',
-      'src/iframe-attributes.js',
-      'src/service/viewer-impl.js',
-      'src/service/viewer-interface.js',
-      'src/inabox/inabox-viewer.js',
-    ],
-  },
-  'internalListenImplementation': {
-    message:
-      'Use `listen()` in either `event-helper` or `3p-frame-messaging`' +
-      ', depending on your use case.',
-    allowlist: [
-      'src/3p-frame-messaging.js',
-      'src/event-helper.js',
-      'src/event-helper-listen.js',
-      'dist.3p/current/integration.js', // includes previous
-    ],
-  },
-  'setTimeout.*throw': {
-    message: 'Use dev.error or user.error instead.',
-    allowlist: ['src/log.js'],
-  },
-  '(dev|user)\\(\\)\\.(fine|info|warn|error)\\((?!\\s*([A-Z0-9-]+|[\'"`][A-Z0-9-]+[\'"`]))[^,)\n]*': {
-    // eslint-disable-line max-len
-    message:
-      'Logging message require explicitly `TAG`, or an all uppercase' +
-      ' string as the first parameter',
-    allowlist: [
-      'build-system/babel-plugins/babel-plugin-transform-dev-methods/index.js',
-    ],
-  },
-  '\\.schedulePass\\(': {
-    message: 'schedulePass is heavy, think twice before using it',
-    allowlist: ['src/service/mutator-impl.js', 'src/service/resources-impl.js'],
-  },
-  '\\.requireLayout\\(': {
-    message:
-      'requireLayout is restricted b/c it affects non-contained elements', // eslint-disable-line max-len
-    allowlist: [
-      'extensions/amp-animation/0.1/web-animations.js',
-      'extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.js',
-      'src/service/resources-impl.js',
-    ],
-  },
-  '\\.updateLayoutPriority\\(': {
-    message: 'updateLayoutPriority is a restricted API.',
-    allowlist: [
-      'extensions/amp-a4a/0.1/amp-a4a.js',
-      'src/base-element.js',
-      'src/service/resources-impl.js',
-    ],
-  },
-  'overrideVisibilityState': {
-    message: 'overrideVisibilityState is a restricted API.',
-    allowlist: [
-      'src/multidoc-manager.js',
-      'src/service/ampdoc-impl.js',
-      'src/service/viewer-impl.js',
-    ],
-  },
-  '\\.scheduleLayoutOrPreload\\(': {
-    message: 'scheduleLayoutOrPreload is a restricted API.',
-    allowlist: ['src/service/owners-impl.js', 'src/service/resources-impl.js'],
-  },
-  '(win|Win)(dow)?(\\(\\))?\\.open\\W': {
-    message: 'Use dom.openWindowDialog',
-    allowlist: ['src/dom.js'],
-  },
-  '\\.getWin\\(': {
-    message: backwardCompat,
-    allowlist: [],
-  },
-  '/\\*\\* @type \\{\\!Element\\} \\*/': {
-    message: 'Use assertElement instead of casting to !Element.',
-    allowlist: [
-      'src/log.js', // Has actual implementation of assertElement.
-      'dist.3p/current/integration.js', // Includes the previous.
-      'src/polyfills/custom-elements.js',
-      'ads/google/imaVideo.js', // Required until #22277 is fixed.
-      '3p/twitter.js', // Runs in a 3p window context, so cannot import log.js.
-    ],
-  },
-  'startupChunk\\(': {
-    message: 'startupChunk( should only be used during startup',
-    allowlist: [
-      'src/amp.js',
-      'src/chunk.js',
-      'src/inabox/amp-inabox.js',
-      'src/runtime.js',
-      'src/custom-element.js',
-      'src/service/resources-impl.js',
-    ],
-  },
-  'AMP_CONFIG': {
-    message:
-      'Do not access AMP_CONFIG directly. Use isExperimentOn() ' +
-      'and getMode() to access config',
-    allowlist: [
-      'build-system/externs/amp.extern.js',
-      'build-system/server/app.js',
-      'build-system/tasks/e2e/index.js',
-      'build-system/tasks/firebase.js',
-      'build-system/tasks/integration.js',
-      'build-system/tasks/prepend-global/index.js',
-      'build-system/tasks/prepend-global/test.js',
-      'build-system/tasks/visual-diff/index.js',
-      'build-system/tasks/build.js',
-      'build-system/tasks/default-task.js',
-      'build-system/tasks/dist.js',
-      'build-system/tasks/helpers.js',
-      'dist.3p/current/integration.js',
-      'src/config.js',
-      'src/experiments.js',
-      'src/mode.js',
-      'src/web-worker/web-worker.js', // Web worker custom error reporter.
-      'tools/experiments/experiments.js',
-      'build-system/server/amp4test.js',
-    ],
-  },
-  'data:image/svg(?!\\+xml;charset=utf-8,)[^,]*,': {
-    message:
-      'SVG data images must use charset=utf-8: ' +
-      '"data:image/svg+xml;charset=utf-8,..."',
-  },
-  'new CustomEvent\\(': {
-    message: 'Use createCustomEvent() helper instead.',
-    allowlist: ['src/event-helper.js'],
-  },
-  'new FormData\\(': {
-    message:
-      'Use createFormDataWrapper() instead and call ' +
-      'formDataWrapper.getFormData() to get the native FormData object.',
-    allowlist: ['src/form-data-wrapper.js'],
-  },
-  '([eE]xit|[eE]nter|[cC]ancel|[rR]equest)Full[Ss]creen\\(': {
-    message: 'Use fullscreenEnter() and fullscreenExit() from dom.js instead.',
-    allowlist: [
-      'ads/google/imaVideo.js',
-      'dist.3p/current/integration.js',
-      'src/video-iframe-integration.js',
-      'extensions/amp-consent/0.1/amp-consent.js',
-      'extensions/amp-consent/0.1/consent-ui.js',
-    ],
-  },
-  '\\.defer\\(\\)': {
-    message: 'Promise.defer() is deprecated and should not be used.',
-  },
-  '(dev|user)\\(\\)\\.assert(Element|String|Number)?\\(\\s*([A-Z][A-Z0-9-]*,)': {
-    // eslint-disable-line max-len
-    message: 'TAG is not an argument to assert(). Will cause false positives.',
-  },
-  'eslint no-unused-vars': {
-    message: 'Use a line-level "no-unused-vars" rule instead.',
-    allowlist: ['extensions/amp-access/0.1/iframe-api/access-controller.js'],
-  },
-  'this\\.skip\\(\\)': {
-    message:
-      'Use of `this.skip()` is forbidden in test files. Use ' +
-      '`this.skipTest()` from within a `before()` block instead. See #17245.',
-    checkInTestFolder: true,
-    allowlist: ['test/_init_tests.js'],
-  },
-  '[^\\.]makeBodyVisible\\(': {
-    message:
-      'This is a protected function. If you are calling this to show ' +
-      'body after an error please use `makeBodyVisibleRecovery`',
-    allowlist: [
-      'src/amp.js',
-      'src/amp-shadow.js',
-      'src/style-installer.js',
-      'src/inabox/amp-inabox.js',
-    ],
-  },
-  'isBuildRenderBlocking': {
-    message:
-      'This is a protected API. Please only override it the element is ' +
-      'render blocking',
-    allowlist: [
-      'src/service/resources-impl.js',
-      'src/service/resource.js',
-      'src/custom-element.js',
-      'src/base-element.js',
-      'extensions/amp-experiment/0.1/amp-experiment.js',
-      'extensions/amp-experiment/1.0/amp-experiment.js',
-    ],
-  },
-  '^describe[\\.|\\(|$]': {
-    message:
-      'Top-level "describe" blocks in test files have been deprecated. ' +
-      'Use "describes.{realWin|sandboxed|fakeWin|integration}".',
-    allowlist: [
-      // Non test files. These can remain.
-      'build-system/server/app-index/test/test-amphtml-helpers.js',
-      'build-system/server/app-index/test/test-file-list.js',
-      'build-system/server/app-index/test/test-html.js',
-      'build-system/server/app-index/test/test-self.js',
-      'build-system/server/app-index/test/test-template.js',
-      'build-system/server/app-index/test/test.js',
-      'test/_init_tests.js',
-      'test/e2e/test-controller-promise.js',
-      'test/e2e/test-expect.js',
-      'validator/engine/amp4ads-parse-css_test.js',
-      'validator/engine/htmlparser_test.js',
-      'validator/engine/keyframes-parse-css_test.js',
-      'validator/engine/parse-css_test.js',
-      'validator/engine/parse-srcset_test.js',
-      'validator/engine/parse-url_test.js',
-      'validator/engine/validator_test.js',
-      'validator/gulpjs/test/validate.js',
-      // Test files. TODO(#24144): Fix these and remove from the allowlist.
-      'ads/google/a4a/shared/test/test-content-recommendation.js',
-      'ads/google/a4a/shared/test/test-url-builder.js',
-      'ads/google/a4a/test/test-line-delimited-response-handler.js',
-      'ads/google/a4a/test/test-traffic-experiments.js',
-      'ads/google/a4a/test/test-utils.js',
-      'ads/google/test/test-utils.js',
-      'extensions/amp-a4a/0.1/test/test-a4a-integration.js',
-      'extensions/amp-a4a/0.1/test/test-a4a-var-source.js',
-      'extensions/amp-a4a/0.1/test/test-amp-a4a.js',
-      'extensions/amp-a4a/0.1/test/test-amp-ad-utils.js',
-      'extensions/amp-a4a/0.1/test/test-callout-vendors.js',
-      'extensions/amp-a4a/0.1/test/test-refresh.js',
-      'extensions/amp-access/0.1/test/test-access-expr.js',
-      'extensions/amp-access/0.1/test/test-amp-login-done-dialog.js',
-      'extensions/amp-access/0.1/test/test-jwt.js',
-      'extensions/amp-ad-exit/0.1/test/filters/test-click-delay.js',
-      'extensions/amp-ad/0.1/test/test-amp-ad-3p-impl.js',
-      'extensions/amp-ad/0.1/test/test-amp-ad-custom.js',
-      'extensions/amp-ad/0.1/test/test-amp-ad-xorigin-iframe-handler.js',
-      'extensions/amp-addthis/0.1/test/addthis-utils/test-fragment.js',
-      'extensions/amp-addthis/0.1/test/addthis-utils/test-rot13.js',
-      'extensions/amp-analytics/0.1/test/test-crc32.js',
-      'extensions/amp-analytics/0.1/test/test-iframe-transport-client.js',
-      'extensions/amp-analytics/0.1/test/test-linker-manager.js',
-      'extensions/amp-analytics/0.1/test/test-linker-reader.js',
-      'extensions/amp-analytics/0.1/test/test-linker.js',
-      'extensions/amp-analytics/0.1/test/test-transport-serializers.js',
-      'extensions/amp-analytics/0.1/test/test-vendors.js',
-      'extensions/amp-animation/0.1/test/test-css-expr.js',
-      'extensions/amp-auto-ads/0.1/test/test-attributes.js',
-      'extensions/amp-base-carousel/0.1/test/test-responsive-attributes.js',
-      'extensions/amp-bind/0.1/test/test-bind-evaluator.js',
-      'extensions/amp-bind/0.1/test/test-bind-expression.js',
-      'extensions/amp-bind/0.1/test/test-bind-validator.js',
-      'extensions/amp-dynamic-css-classes/0.1/test/test-dynamic-classes.js',
-      'extensions/amp-form/0.1/test/test-form-submit-service.js',
-      'extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-fly-in.js',
-      'extensions/amp-lightbox-gallery/0.1/test/integration/test-amp-lightbox-gallery.js',
-      'extensions/amp-list/0.1/test/integration/test-amp-list.js',
-      'extensions/amp-live-list/0.1/test/test-poller.js',
-      'extensions/amp-next-page/0.1/test/test-config.js',
-      'extensions/amp-script/0.1/test/unit/test-amp-script.js',
-      'extensions/amp-sidebar/0.1/test/test-toolbar.js',
-      'extensions/amp-truncate-text/0.1/test/test-binary-search.js',
-      'extensions/amp-viewer-integration/0.1/test/test-findtext.js',
-      'test/integration/test-3p-nameframe.js',
-      'test/integration/test-amp-ad-3p.js',
-      'test/integration/test-amp-ad-fake.js',
-      'test/integration/test-amp-analytics.js',
-      'test/integration/test-amp-pixel.js',
-      'test/integration/test-amp-skimlinks.js',
-      'test/integration/test-amphtml-ads.js',
-      'test/integration/test-boilerplates.js',
-      'test/integration/test-configuration.js',
-      'test/integration/test-video-manager.js',
-      'test/integration/test-video-players.js',
-      'test/unit/3p/test-3p-messaging.js',
-      'test/unit/3p/test-recaptcha.js',
-      'test/unit/ads/test-unruly.js',
-      'test/unit/test-3p-environment.js',
-      'test/unit/test-3p.js',
-      'test/unit/test-action.js',
-      'test/unit/test-activity.js',
-      'test/unit/test-ad-helper.js',
-      'test/unit/test-ads-config.js',
-      'test/unit/test-alp-handler.js',
-      'test/unit/test-amp-context.js',
-      'test/unit/test-amp-img.js',
-      'test/unit/test-amp-inabox.js',
-      'test/unit/test-animation.js',
-      'test/unit/test-batched-json.js',
-      'test/unit/test-chunk.js',
-      'test/unit/test-cid.js',
-      'test/unit/test-css.js',
-      'test/unit/test-curve.js',
-      'test/unit/test-describes.js',
-      'test/unit/test-document-ready.js',
-      'test/unit/test-element-service.js',
-      'test/unit/test-error.js',
-      'test/unit/test-event-helper.js',
-      'test/unit/test-experiments.js',
-      'test/unit/test-exponential-backoff.js',
-      'test/unit/test-finite-state-machine.js',
-      'test/unit/test-focus-history.js',
-      'test/unit/test-gesture-recognizers.js',
-      'test/unit/test-gesture.js',
-      'test/unit/test-get-html.js',
-      'test/unit/test-ie-media-bug.js',
-      'test/unit/test-impression.js',
-      'test/unit/test-input.js',
-      'test/unit/test-integration.js',
-      'test/unit/test-intersection-observer-polyfill.js',
-      'test/unit/test-intersection-observer.js',
-      'test/unit/test-json.js',
-      'test/unit/test-layout-rect.js',
-      'test/unit/test-layout.js',
-      'test/unit/test-log.js',
-      'test/unit/test-mode.js',
-      'test/unit/test-motion.js',
-      'test/unit/test-mustache.js',
-      'test/unit/test-mutator.js',
-      'test/unit/test-object.js',
-      'test/unit/test-observable.js',
-      'test/unit/test-pass.js',
-      'test/unit/test-platform.js',
-      'test/unit/test-polyfill-document-contains.js',
-      'test/unit/test-polyfill-math-sign.js',
-      'test/unit/test-polyfill-object-assign.js',
-      'test/unit/test-polyfill-object-values.js',
-      'test/unit/test-preconnect.js',
-      'test/unit/test-pull-to-refresh.js',
-      'test/unit/test-purifier.js',
-      'test/unit/test-render-delaying-services.js',
-      'test/unit/test-resource.js',
-      'test/unit/test-resources.js',
-      'test/unit/test-sanitizer.js',
-      'test/unit/test-service.js',
-      'test/unit/test-size-list.js',
-      'test/unit/test-srcset.js',
-      'test/unit/test-static-template.js',
-      'test/unit/test-string.js',
-      'test/unit/test-style-installer.js',
-      'test/unit/test-style.js',
-      'test/unit/test-task-queue.js',
-      'test/unit/test-transition.js',
-      'test/unit/test-types.js',
-      'test/unit/test-url-rewrite.js',
-      'test/unit/test-url.js',
-      'test/unit/test-viewport.js',
-      'test/unit/test-web-components.js',
-      'test/unit/utils/test-array.js',
-      'test/unit/utils/test-base64.js',
-      'test/unit/utils/test-bytes.js',
-      'test/unit/utils/test-lru-cache.js',
-      'test/unit/utils/test-pem.js',
-      'test/unit/utils/test-priority-queue.js',
-      'test/unit/utils/test-rate-limit.js',
-      'test/unit/web-worker/test-amp-worker.js',
-    ],
-    checkInTestFolder: true,
-  },
-};
-
-const ThreePTermsMessage =
-  'The 3p bootstrap iframe has no polyfills loaded' +
-  ' and can thus not use most modern web APIs.';
-
-const forbidden3pTerms = {
-  // We need to forbid promise usage because we don't have our own polyfill
-  // available. This allowlisting of callNext is a major hack to allow one
-  // usage in babel's external helpers that is in a code path that we do
-  // not use.
-  '\\.then\\((?!callNext)': ThreePTermsMessage,
-};
-
-const bannedTermsHelpString =
-  'Please review viewport service for helper ' +
-  'methods or mark with `/*OK*/` or `/*REVIEW*/` and consult the AMP team. ' +
-  'Most of the forbidden property/method access banned on the ' +
-  '`forbiddenTermsSrcInclusive` object can be found in ' +
-  '[What forces layout / reflow gist by Paul Irish]' +
-  '(https://gist.github.com/paulirish/5d52fb081b3570c81e3a). ' +
-  'These properties/methods when read/used require the browser ' +
-  'to have the up-to-date value to return which might possibly be an ' +
-  'expensive computation and could also be triggered multiple times ' +
-  'if we are not careful. Please mark the call with ' +
-  '`object./*OK*/property` if you explicitly need to read or update the ' +
-  'forbidden property/method or mark it with `object./*REVIEW*/property` ' +
-  'if you are unsure and so that it stands out in code reviews.';
-
-const forbiddenTermsSrcInclusive = {
-  '\\.innerHTML(?!_)': bannedTermsHelpString,
-  '\\.outerHTML(?!_)': bannedTermsHelpString,
-  '\\.offsetLeft(?!_)': bannedTermsHelpString,
-  '\\.offsetTop(?!_)': bannedTermsHelpString,
-  '\\.offsetWidth(?!_)': bannedTermsHelpString,
-  '\\.offsetHeight(?!_)': bannedTermsHelpString,
-  '\\.offsetParent(?!_)': bannedTermsHelpString,
-  '\\.clientLeft(?!_)(?!_)': bannedTermsHelpString,
-  '\\.clientTop(?!_)': bannedTermsHelpString,
-  '\\.clientWidth(?!_)': bannedTermsHelpString,
-  '\\.clientHeight(?!_)': bannedTermsHelpString,
-  '\\.scrollWidth(?!_)': 'please use `getScrollWidth()` from viewport',
-  '\\.scrollHeight(?!_)': bannedTermsHelpString,
-  '\\.scrollTop(?!_)': bannedTermsHelpString,
-  '\\.scrollLeft(?!_)': bannedTermsHelpString,
-  '\\.computedRole(?!_)': bannedTermsHelpString,
-  '\\.computedName(?!_)': bannedTermsHelpString,
-  '\\.innerText(?!_)': bannedTermsHelpString,
-  '\\.scrollX(?!_)': bannedTermsHelpString,
-  '\\.scrollY(?!_)': bannedTermsHelpString,
-  '\\.pageXOffset(?!_)': bannedTermsHelpString,
-  '\\.pageYOffset(?!_)': bannedTermsHelpString,
-  '\\.innerWidth(?!_)': bannedTermsHelpString,
-  '\\.innerHeight(?!_)': bannedTermsHelpString,
-  '\\.scrollingElement(?!_)': bannedTermsHelpString,
-  '\\.computeCTM(?!_)': bannedTermsHelpString,
-  // Functions
-  '\\.applySize\\(': bannedTermsHelpString,
-  '\\.attemptChangeHeight\\(0\\)': 'please consider using `attemptCollapse()`',
-  '\\.collapse\\(': bannedTermsHelpString,
-  '\\.expand\\(': bannedTermsHelpString,
-  '\\.focus\\(': bannedTermsHelpString,
-  '\\.getBBox\\(': bannedTermsHelpString,
-  '\\.getBoundingClientRect\\(': bannedTermsHelpString,
-  '\\.getClientRects\\(': bannedTermsHelpString,
-  '\\.getMatchedCSSRules\\(': bannedTermsHelpString,
-  '\\.scrollBy\\(': bannedTermsHelpString,
-  '\\.scrollIntoView\\(': bannedTermsHelpString,
-  '\\.scrollIntoViewIfNeeded\\(': bannedTermsHelpString,
-  '\\.scrollTo\\(': bannedTermsHelpString,
-  '\\.webkitConvertPointFromNodeToPage\\(': bannedTermsHelpString,
-  '\\.webkitConvertPointFromPageToNode\\(': bannedTermsHelpString,
-  '\\.scheduleUnlayout\\(': bannedTermsHelpString,
-  '\\.postMessage\\(': {
-    message: bannedTermsHelpString,
-    allowlist: [
-      'extensions/amp-install-serviceworker/0.1/amp-install-serviceworker.js',
-    ],
-  },
-  'getComputedStyle\\(': {
-    message:
-      'Due to various bugs in Firefox, you must use the computedStyle ' +
-      'helper in style.js.',
-    allowlist: ['src/style.js', 'dist.3p/current/integration.js'],
-  },
-  'decodeURIComponent\\(': {
-    message:
-      'decodeURIComponent throws for malformed URL components. Please ' +
-      'use tryDecodeUriComponent from src/url.js',
-    allowlist: [
-      '3p/integration.js',
-      'dist.3p/current/integration.js',
-      'examples/pwa/pwa.js',
-      'validator/engine/parse-url.js',
-      'validator/engine/validator.js',
-      'validator/webui/webui.js',
-      'extensions/amp-pinterest/0.1/util.js',
-      'src/url.js',
-      'src/url-try-decode-uri-component.js',
-      'src/utils/bytes.js',
-    ],
-  },
-  'Text(Encoder|Decoder)\\(': {
-    message:
-      'TextEncoder/TextDecoder is not supported in all browsers.' +
-      ' Please use UTF8 utilities from src/bytes.js',
-    allowlist: [
-      'ads/google/a4a/line-delimited-response-handler.js',
-      'examples/pwa/pwa.js',
-      'src/utils/bytes.js',
-    ],
-  },
-  'contentHeightChanged': {
-    message: bannedTermsHelpString,
-    allowlist: [
-      'src/inabox/inabox-viewport.js',
-      'src/service/resources-impl.js',
-      'src/service/viewport/viewport-binding-def.js',
-      'src/service/viewport/viewport-binding-ios-embed-wrapper.js',
-      'src/service/viewport/viewport-binding-natural.js',
-      'src/service/viewport/viewport-impl.js',
-      'src/service/viewport/viewport-interface.js',
-    ],
-  },
-  'preloadExtension': {
-    message: bannedTermsHelpString,
-    allowlist: [
-      'src/element-stub.js',
-      'src/friendly-iframe-embed.js',
-      'src/polyfillstub/intersection-observer-stub.js',
-      'src/runtime.js',
-      'src/service/extensions-impl.js',
-      'src/service/lightbox-manager-discovery.js',
-      'src/service/crypto-impl.js',
-      'src/shadow-embed.js',
-      'src/analytics.js',
-      'src/extension-analytics.js',
-      'src/services.js',
-      'extensions/amp-ad/0.1/amp-ad.js',
-      'extensions/amp-a4a/0.1/amp-a4a.js',
-      'extensions/amp-a4a/0.1/template-validator.js',
-      'extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js', // eslint-disable-line max-len
-      'extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js', // eslint-disable-line max-len
-      'extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.js',
-    ],
-  },
-  'loadElementClass': {
-    message: bannedTermsHelpString,
-    allowlist: [
-      'src/runtime.js',
-      'src/service/extensions-impl.js',
-      'extensions/amp-ad/0.1/amp-ad.js',
-      'extensions/amp-a4a/0.1/amp-a4a.js',
-      'extensions/amp-auto-ads/0.1/amp-auto-ads.js',
-      'extensions/amp-auto-ads/0.1/anchor-ad-strategy.js',
-    ],
-  },
-  'reject\\(\\)': {
-    message:
-      'Always supply a reason in rejections. ' +
-      'error.cancellation() may be applicable.',
-  },
-  '[^.]loadPromise': {
-    message: 'Most users should use BaseElement…loadPromise.',
-    allowlist: [
-      'src/base-element.js',
-      'src/event-helper.js',
-      'src/friendly-iframe-embed.js',
-      'src/service/performance-impl.js',
-      'src/service/resources-impl.js',
-      'src/service/url-replacements-impl.js',
-      'src/service/variable-source.js',
-      'src/validator-integration.js',
-      'extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js',
-      'extensions/amp-image-lightbox/0.1/amp-image-lightbox.js',
-      'extensions/amp-analytics/0.1/transport.js',
-      'extensions/amp-web-push/0.1/iframehost.js',
-      'extensions/amp-recaptcha-input/0.1/amp-recaptcha-service.js',
-      'dist.3p/current/integration.js',
-    ],
-  },
-  '\\.getTime\\(\\)': {
-    message: 'Unless you do weird date math (allowlist), use Date.now().',
-    allowlist: [
-      'extensions/amp-timeago/0.1/amp-timeago.js',
-      'extensions/amp-timeago/1.0/timeago.js',
-    ],
-  },
-  '\\.expandStringSync\\(': {
-    message: requiresReviewPrivacy,
-    allowlist: [
-      'extensions/amp-form/0.1/amp-form.js',
-      'src/service/url-replacements-impl.js',
-    ],
-  },
-  '\\.expandStringAsync\\(': {
-    message: requiresReviewPrivacy,
-    allowlist: [
-      'extensions/amp-form/0.1/amp-form.js',
-      'src/service/url-replacements-impl.js',
-      'extensions/amp-analytics/0.1/config.js',
-      'extensions/amp-analytics/0.1/cookie-writer.js',
-      'extensions/amp-analytics/0.1/requests.js',
-      'extensions/amp-analytics/0.1/variables.js',
-    ],
-  },
-  '\\.expandInputValueSync\\(': {
-    message: requiresReviewPrivacy,
-    allowlist: [
-      'extensions/amp-form/0.1/amp-form.js',
-      'src/service/url-replacements-impl.js',
-    ],
-  },
-  '\\.expandInputValueAsync\\(': {
-    message: requiresReviewPrivacy,
-    allowlist: [
-      'extensions/amp-form/0.1/amp-form.js',
-      'src/service/url-replacements-impl.js',
-    ],
-  },
-  '\\.setNonBoolean\\(': {
-    message: requiresReviewPrivacy,
-    allowlist: [
-      'src/service/storage-impl.js',
-      'extensions/amp-consent/0.1/consent-state-manager.js',
-    ],
-  },
-  '(cdn|3p)\\.ampproject\\.': {
-    message:
-      'The CDN domain should typically not be hardcoded in source ' +
-      'code. Use a property of urls from src/config.js instead.',
-    allowlist: [
-      'ads/_a4a-config.js',
-      'build-system/server/amp4test.js',
-      'build-system/server/app-index/amphtml-helpers.js',
-      'build-system/server/app-utils.js',
-      'build-system/server/app-video-testbench.js',
-      'build-system/server/app.js',
-      'build-system/server/shadow-viewer.js',
-      'build-system/server/variable-substitution.js',
-      'build-system/tasks/check-links.js',
-      'build-system/tasks/dist.js',
-      'build-system/tasks/extension-generator/index.js',
-      'build-system/tasks/helpers.js',
-      'build-system/tasks/performance/helpers.js',
-      'build-system/tasks/storybook/amp-env/decorator.js',
-      'dist.3p/current/integration.js',
-      'extensions/amp-iframe/0.1/amp-iframe.js',
-      'src/3p-frame.js',
-      'src/amp-story-player/amp-story-player-impl.js',
-      'src/config.js',
-      'testing/local-amp-chrome-extension/background.js',
-      'tools/errortracker/errortracker.go',
-      'tools/experiments/experiments.js',
-      'validator/engine/validator-in-browser.js',
-      'validator/engine/validator.js',
-      'validator/nodejs/index.js',
-      'validator/webui/serve-standalone.go',
-    ],
-  },
-  '\\<\\<\\<\\<\\<\\<': {
-    message: 'Unresolved merge conflict.',
-  },
-  '\\>\\>\\>\\>\\>\\>': {
-    message: 'Unresolved merge conflict.',
-  },
-  '\\.indexOf\\([\'"][^)]+\\)\\s*===?\\s*0\\b': {
-    message: 'use startsWith helper in src/string.js',
-    allowlist: ['dist.3p/current/integration.js', 'build-system/server/app.js'],
-  },
-  '\\.indexOf\\(.*===?.*\\.length': 'use endsWith helper in src/string.js',
-  '/url-parse-query-string': {
-    message: 'Import parseQueryString from `src/url.js`',
-    allowlist: ['src/url.js', 'src/mode.js', 'dist.3p/current/integration.js'],
-  },
-  '\\.trim(Left|Right)\\(\\)': {
-    message: 'Unsupported on IE; use trim() or a helper instead.',
-    allowlist: ['validator/engine/validator.js'],
-  },
-  "process\\.env(\\.TRAVIS|\\[\\'TRAVIS)": {
-    message:
-      'Do not directly use process.env.TRAVIS. Instead, add a ' +
-      'function to build-system/common/travis.js',
-    allowlist: [
-      'build-system/common/check-package-manager.js',
-      'build-system/common/travis.js',
-    ],
-  },
-  '\\.matches\\(': 'Please use matches() helper in src/dom.js',
-};
-
-// Terms that must appear in a source file.
-const requiredTerms = {
-  'Copyright 20(15|16|17|18|19|20) The AMP HTML Authors\\.': dedicatedCopyrightNoteSources,
-  'Licensed under the Apache License, Version 2\\.0': dedicatedCopyrightNoteSources,
-  'http\\://www\\.apache\\.org/licenses/LICENSE-2\\.0': dedicatedCopyrightNoteSources,
-};
-
-/**
- * Check if root of path is test/ or file is in a folder named test.
- * @param {string} path
- * @return {boolean}
- */
-function isInTestFolder(path) {
-  const dirs = path.split('/');
-  return dirs.indexOf('test') >= 0;
-}
-
-/**
- * Check if file is inside the build-system/babel-plugins test/fixture folder.
- * @param {string} filePath
- * @return {boolean}
- */
-function isInBuildSystemFixtureFolder(filePath) {
-  const folder = path.dirname(filePath);
-  return (
-    folder.startsWith('build-system/babel-plugins') &&
-    folder.includes('test/fixtures')
-  );
-}
-
-/**
- * Strip Comments
- * @param {string} contents
- * @return {string}
- */
-function stripComments(contents) {
-  // Multi-line comments
-  contents = contents.replace(/\/\*(?!.*\*\/)(.|\n)*?\*\//g, function (match) {
-    // Preserve the newlines
-    const newlines = [];
-    for (let i = 0; i < match.length; i++) {
-      if (match[i] === '\n') {
-        newlines.push('\n');
-      }
-    }
-    return newlines.join('');
-  });
-  // Single line comments either on its own line or following a space,
-  // semi-colon, or closing brace
-  return contents.replace(/( |}|;|^) *\/\/.*/g, '$1');
-}
-
-/**
- * Logs any issues found in the contents of file based on terms (regex
- * patterns), and provides any possible fix information for matched terms if
- * possible
- *
- * @param {!File} file a vinyl file object to scan for term matches
- * @param {!Array<string, string>} terms Pairs of regex patterns and possible
- *   fix messages.
- * @return {boolean} true if any of the terms match the file content,
- *   false otherwise
- */
-function matchTerms(file, terms) {
-  const contents = stripComments(file.contents.toString());
-  const {relative} = file;
-  return Object.keys(terms)
-    .map(function (term) {
-      let fix;
-      const {allowlist, checkInTestFolder} = terms[term];
-      // NOTE: we could do a glob test instead of exact check in the future
-      // if needed but that might be too permissive.
-      if (
-        isInBuildSystemFixtureFolder(relative) ||
-        (Array.isArray(allowlist) &&
-          (allowlist.indexOf(relative) != -1 ||
-            (isInTestFolder(relative) && !checkInTestFolder)))
-      ) {
-        return false;
-      }
-      // we can't optimize building the `RegExp` objects early unless we build
-      // another mapping of term -> regexp object to be able to get back to the
-      // original term to get the possible fix value. This is ok as the
-      // presubmit doesn't have to be blazing fast and this is most likely
-      // negligible.
-      const regex = new RegExp(term, 'gm');
-      let index = 0;
-      let line = 1;
-      let column = 0;
-      let match;
-      let hasTerm = false;
-
-      while ((match = regex.exec(contents))) {
-        hasTerm = true;
-        for (index; index < match.index; index++) {
-          if (contents[index] === '\n') {
-            line++;
-            column = 1;
-          } else {
-            column++;
-          }
-        }
-
-        log(
-          colors.red(
-            'Found forbidden: "' +
-              match[0] +
-              '" in ' +
-              relative +
-              ':' +
-              line +
-              ':' +
-              column
-          )
-        );
-        if (typeof terms[term] === 'string') {
-          fix = terms[term];
-        } else {
-          fix = terms[term].message;
-        }
-
-        // log the possible fix information if provided for the term.
-        if (fix) {
-          log(colors.blue(fix));
-        }
-        log(colors.blue('=========='));
-      }
-
-      return hasTerm;
-    })
-    .some(function (hasAnyTerm) {
-      return hasAnyTerm;
-    });
-}
-
-/**
- * Test if a file's contents match any of the
- * forbidden terms
- *
- * @param {!File} file file is a vinyl file object
- * @return {boolean} true if any of the terms match the file content,
- *   false otherwise
- */
-function hasAnyTerms(file) {
-  const pathname = file.path;
-  const basename = path.basename(pathname);
-  let hasTerms = false;
-  let hasSrcInclusiveTerms = false;
-  let has3pTerms = false;
-
-  hasTerms = matchTerms(file, forbiddenTerms);
-
-  const isTestFile =
-    /^test-/.test(basename) ||
-    /^_init_tests/.test(basename) ||
-    /_test\.js$/.test(basename);
-  if (!isTestFile) {
-    hasSrcInclusiveTerms = matchTerms(file, forbiddenTermsSrcInclusive);
-  }
-
-  const is3pFile =
-    /\/(3p|ads)\//.test(pathname) ||
-    basename == '3p.js' ||
-    basename == 'style.js';
-  // Yet another reason to move ads/google/a4a somewhere else
-  const isA4A = /\/a4a\//.test(pathname);
-  const isRecaptcha = basename == 'recaptcha.js';
-  if (is3pFile && !isRecaptcha && !isTestFile && !isA4A) {
-    has3pTerms = matchTerms(file, forbidden3pTerms);
-  }
-
-  return hasTerms || hasSrcInclusiveTerms || has3pTerms;
-}
-
-/**
- * Test if a file's contents fail to match any of the required terms and log
- * any missing terms
- *
- * @param {!File} file file is a vinyl file object
- * @return {boolean} true if any of the terms are not matched in the file
- *  content, false otherwise
- */
-function isMissingTerms(file) {
-  const contents = file.contents.toString();
-  return Object.keys(requiredTerms)
-    .map(function (term) {
-      const filter = requiredTerms[term];
-      if (!filter.test(file.path)) {
-        return false;
-      }
-
-      const matches = contents.match(new RegExp(term));
-      if (!matches) {
-        log(
-          colors.red(
-            'Did not find required: "' + term + '" in ' + file.relative
-          )
-        );
-        log(colors.blue('=========='));
-        return true;
-      }
-      return false;
-    })
-    .some(function (hasMissingTerm) {
-      return hasMissingTerm;
-    });
-}
-
-/**
- * Check a file for all the required terms and
- * any forbidden terms and log any errors found.
- * @return {!Promise}
- */
-function presubmit() {
-  let forbiddenFound = false;
-  let missingRequirements = false;
-  return gulp
-    .src(srcGlobs)
-    .pipe(
-      through2.obj(function (file, enc, cb) {
-        forbiddenFound = hasAnyTerms(file) || forbiddenFound;
-        missingRequirements = isMissingTerms(file) || missingRequirements;
-        cb();
-      })
-    )
-    .on('end', function () {
-      if (forbiddenFound) {
-        log(
-          colors.blue(
-            'Please remove these usages or consult with the AMP team.'
-          )
-        );
-      }
-      if (missingRequirements) {
-        log(
-          colors.blue(
-            'Adding these terms (e.g. by adding a required LICENSE ' +
-              'to the file)'
-          )
-        );
-      }
-      if (forbiddenFound || missingRequirements) {
-        process.exitCode = 1;
-      }
-    });
-}
-
-module.exports = {
-  presubmit,
-};
-
-presubmit.description =
-  'Run validation against files to check for forbidden and required terms';
diff --git a/build-system/tasks/presubmit.js b/build-system/tasks/presubmit.js
new file mode 100644
index 0000000000000..9b66d7d42a419
--- /dev/null
+++ b/build-system/tasks/presubmit.js
@@ -0,0 +1,140 @@
+/**
+ * Copyright 2015 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 fs = require('fs');
+const globby = require('globby');
+const srcGlobs = require('../test-configs/config').presubmitGlobs;
+const {
+  forbiddenTermsGlobal,
+  matchForbiddenTerms,
+} = require('../test-configs/forbidden-terms');
+const {cyan, red, yellow} = require('../common/colors');
+const {log} = require('../common/logging');
+
+/**
+ * If you're looking for the forbidden terms list, it's moved to:
+ * build-system/test-configs/forbidden-terms.js
+ */
+
+const dedicatedCopyrightNoteSources = /(\.css|\.go)$/;
+
+// Terms that must appear in a source file.
+const requiredTerms = {
+  'Copyright 20(15|16|17|18|19|2\\d) The AMP HTML Authors\\.':
+    dedicatedCopyrightNoteSources,
+  'Licensed under the Apache License, Version 2\\.0':
+    dedicatedCopyrightNoteSources,
+  'http\\://www\\.apache\\.org/licenses/LICENSE-2\\.0':
+    dedicatedCopyrightNoteSources,
+};
+// Exclude extension generator templates
+const requiredTermsExcluded = new RegExp('/make-extension(/.+)?/template/');
+
+/**
+ * Test if a file's contents match any of the forbidden terms
+ * @param {string} srcFile
+ * @return {boolean} true if any of the terms match the file content,
+ *   false otherwise
+ */
+function hasForbiddenTerms(srcFile) {
+  const contents = fs.readFileSync(srcFile, 'utf-8');
+  const terms = matchForbiddenTerms(srcFile, contents, forbiddenTermsGlobal);
+  for (const {loc, match, message} of terms) {
+    log(
+      red('ERROR:'),
+      'Found forbidden',
+      cyan(`"${match}"`),
+      'in',
+      cyan(`${srcFile}:${loc.start.line}:${loc.start.column}`)
+    );
+
+    // log the possible fix information if provided for the term.
+    if (message) {
+      log('⤷', yellow('To fix:'), message);
+    }
+  }
+  return terms.length > 0;
+}
+
+/**
+ * Test if a file's contents fail to match any of the required terms and log
+ * any missing terms
+ *
+ * @param {string} srcFile
+ * @return {boolean} true if any of the terms are not matched in the file
+ *  content, false otherwise
+ */
+function isMissingTerms(srcFile) {
+  const contents = fs.readFileSync(srcFile, 'utf-8');
+  return Object.keys(requiredTerms)
+    .map(function (term) {
+      const filter = requiredTerms[term];
+      if (!filter.test(srcFile) || requiredTermsExcluded.test(srcFile)) {
+        return false;
+      }
+
+      const matches = contents.match(new RegExp(term));
+      if (!matches) {
+        log(
+          red('ERROR:'),
+          'Did not find required',
+          cyan(`"${term}"`),
+          'in',
+          cyan(srcFile)
+        );
+        return true;
+      }
+      return false;
+    })
+    .some(function (hasMissingTerm) {
+      return hasMissingTerm;
+    });
+}
+
+/**
+ * Entry point for amp presubmit.
+ */
+async function presubmit() {
+  let forbiddenFound = false;
+  let missingRequirements = false;
+  const srcFiles = globby.sync(srcGlobs);
+  for (const srcFile of srcFiles) {
+    forbiddenFound = hasForbiddenTerms(srcFile) || forbiddenFound;
+    missingRequirements = isMissingTerms(srcFile) || missingRequirements;
+  }
+  if (forbiddenFound) {
+    log(
+      yellow('NOTE:'),
+      'Please remove these usages or consult with the AMP team.'
+    );
+  }
+  if (missingRequirements) {
+    log(
+      yellow('NOTE:'),
+      'Please add these terms (e.g. a required LICENSE) to the files.'
+    );
+  }
+  if (forbiddenFound || missingRequirements) {
+    process.exitCode = 1;
+  }
+}
+
+module.exports = {
+  presubmit,
+};
+
+presubmit.description = 'Check source files for forbidden and required terms';
diff --git a/build-system/tasks/prettify.js b/build-system/tasks/prettify.js
index 07ac81f15ab0a..22b59ad0c7aae 100644
--- a/build-system/tasks/prettify.js
+++ b/build-system/tasks/prettify.js
@@ -15,48 +15,57 @@
  */
 
 /**
- * @fileoverview This file implements the `gulp prettify` task, which uses
+ * @fileoverview This file implements the `amp prettify` task, which uses
  * prettier to check (and optionally fix) the formatting in a variety of
- * non-JS files in the repo. (JS files are separately checked by `gulp lint`,
+ * non-JS files in the repo. (JS files are separately checked by `amp lint`,
  * which uses eslint.)
  */
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
 const fs = require('fs-extra');
-const gulp = require('gulp');
-const log = require('fancy-log');
 const path = require('path');
-const prettier = require('gulp-prettier');
+const prettier = require('prettier');
 const tempy = require('tempy');
+const {
+  log,
+  logLocalDev,
+  logOnSameLine,
+  logOnSameLineLocalDev,
+  logWithoutTimestamp,
+} = require('../common/logging');
+const {cyan, green, red, yellow} = require('../common/colors');
 const {exec} = require('../common/exec');
-const {getFilesToCheck, logOnSameLine} = require('../common/utils');
-const {green, cyan, red, yellow} = require('ansi-colors');
-const {isTravisBuild} = require('../common/travis');
-const {maybeUpdatePackages} = require('./update-packages');
+const {getFilesToCheck} = require('../common/utils');
 const {prettifyGlobs} = require('../test-configs/config');
 
 const rootDir = path.dirname(path.dirname(__dirname));
 const tempDir = tempy.directory();
-const prettierCmd = 'node_modules/.bin/prettier';
-
-// Message header printed by gulp-prettier before the list of files with errors.
-// See https://github.com/bhargavrpatel/gulp-prettier/blob/master/index.js#L90
-const header =
-  'Code style issues found in the following file(s). Forgot to run Prettier?';
 
 /**
  * Checks files for formatting (and optionally fixes them) with Prettier.
- *
- * @return {!Promise}
+ * Explicitly makes sure the API doesn't check files in `.prettierignore`.
  */
-function prettify() {
-  maybeUpdatePackages();
-  const filesToCheck = getFilesToCheck(prettifyGlobs, {dot: true});
+async function prettify() {
+  const filesToCheck = getFilesToCheck(
+    prettifyGlobs,
+    {dot: true},
+    '.prettierignore'
+  );
   if (filesToCheck.length == 0) {
-    return Promise.resolve();
+    return;
   }
-  return runPrettify(filesToCheck);
+  await runPrettify(filesToCheck);
+}
+
+/**
+ * Resolves the prettier config for the given file
+ * @param {string} file
+ * @return {Promise<Object>}
+ */
+async function getOptions(file) {
+  const config = await prettier.resolveConfig(file);
+  return {filepath: file, ...config};
 }
 
 /**
@@ -65,112 +74,85 @@ function prettify() {
  *
  * @param {string} file
  */
-function printErrorWithSuggestedFixes(file) {
-  console.log('\n');
+async function printErrorWithSuggestedFixes(file) {
+  logWithoutTimestamp('\n');
   log(`Suggested fixes for ${cyan(file)}:`);
+  const options = await getOptions(file);
+  const original = fs.readFileSync(file).toString();
+  const fixed = prettier.format(original, options);
   const fixedFile = `${tempDir}/${file}`;
   fs.ensureDirSync(path.dirname(fixedFile));
-  exec(`${prettierCmd} ${file} > ${fixedFile}`);
+  fs.writeFileSync(fixedFile, fixed);
   const diffCmd = `git -c color.ui=always diff -U0 ${file} ${fixedFile} | tail -n +5`;
   exec(diffCmd);
 }
 
 /**
- * Runs prettier on the given list of files with gulp-prettier.
- *
- * @param {!Array<string>} filesToCheck
- * @return {!Promise}
+ * Prints instructions for how to auto-fix errors.
  */
-function runPrettify(filesToCheck) {
-  if (!isTravisBuild()) {
-    log(green('Starting checks...'));
-  }
-  return new Promise((resolve, reject) => {
-    const onData = (data) => {
-      if (!isTravisBuild()) {
-        logOnSameLine(green('Checked: ') + path.relative(rootDir, data.path));
-      }
-    };
-
-    const rejectWithReason = (reasonText) => {
-      const reason = new Error(reasonText);
-      reason.showStack = false;
-      reject(reason);
-    };
-
-    const printFixMessages = () => {
-      log(
-        yellow('NOTE 1:'),
-        "If you are using GitHub's web-UI to edit files,",
-        'copy the suggested fixes printed above into your PR.'
-      );
-      log(
-        yellow('NOTE 2:'),
-        'If you are using the git command-line workflow, run',
-        cyan('gulp prettify --local_changes --fix'),
-        'from your local branch.'
-      );
-      log(
-        yellow('NOTE 3:'),
-        'Since this is a destructive operation (that edits your files',
-        'in-place), make sure you commit before running the command.'
-      );
-      log(
-        yellow('NOTE 4:'),
-        'For more information, read',
-        cyan(
-          'https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#code-quality-and-style\n'
-        )
-      );
-    };
+function printFixMessages() {
+  log(
+    yellow('NOTE 1:'),
+    "If you are using GitHub's web-UI to edit files,",
+    'copy the suggested fixes printed above into your PR.'
+  );
+  log(
+    yellow('NOTE 2:'),
+    'If you are using the git command-line workflow, run',
+    cyan('amp prettify --local_changes --fix'),
+    'from your local branch.'
+  );
+  log(
+    yellow('NOTE 3:'),
+    'Since this is a destructive operation (that edits your files',
+    'in-place), make sure you commit before running the command.'
+  );
+  log(
+    yellow('NOTE 4:'),
+    'For more information, read',
+    cyan(
+      'https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md#code-quality-and-style\n'
+    )
+  );
+}
 
-    const onError = (error) => {
-      if (error.message.startsWith(header)) {
-        const filesWithErrors = error.message
-          .replace(header, '')
-          .trim()
-          .split('\n');
-        const reason = 'Found formatting errors in one or more files';
-        logOnSameLine(red('ERROR: ') + reason);
-        filesWithErrors.forEach((file) => {
-          printErrorWithSuggestedFixes(file);
-        });
-        printFixMessages();
-        rejectWithReason(reason);
-      } else {
-        const reason =
-          'Found an unrecoverable error in ' +
-          cyan(path.relative(rootDir, error.fileName));
-        logOnSameLine(red('ERROR: ') + reason + ':');
-        log(error.message);
-        rejectWithReason(reason);
+/**
+ * Prettifies on the given list of files.
+ * @param {!Array<string>} filesToCheck
+ */
+async function runPrettify(filesToCheck) {
+  logLocalDev(green('Starting checks...'));
+  const filesWithErrors = [];
+  for (const file of filesToCheck) {
+    const options = await getOptions(file);
+    const original = fs.readFileSync(file).toString();
+    if (argv.fix) {
+      const fixed = prettier.format(original, options);
+      if (fixed != original) {
+        fs.writeFileSync(file, fixed);
       }
-    };
-
-    const onFinish = () => {
-      if (!isTravisBuild()) {
-        logOnSameLine('Checked ' + cyan(filesToCheck.length) + ' file(s)');
+      if (!prettier.check(fixed, options)) {
+        filesWithErrors.push(file);
       }
-      resolve();
-    };
-
-    if (argv.fix) {
-      return gulp
-        .src(filesToCheck)
-        .pipe(prettier())
-        .on('data', onData)
-        .on('error', onError)
-        .pipe(gulp.dest((file) => file.base))
-        .on('finish', onFinish);
     } else {
-      return gulp
-        .src(filesToCheck)
-        .pipe(prettier.check())
-        .on('data', onData)
-        .on('error', onError)
-        .on('finish', onFinish);
+      if (!prettier.check(original, options)) {
+        filesWithErrors.push(file);
+      }
     }
-  });
+    logOnSameLineLocalDev(green('Checked: ') + path.relative(rootDir, file));
+  }
+  if (filesWithErrors.length) {
+    logOnSameLine(
+      red('ERROR:'),
+      'Found formatting errors in one or more files'
+    );
+    for (const file of filesWithErrors) {
+      await printErrorWithSuggestedFixes(file);
+    }
+    printFixMessages();
+    process.exitCode = 1;
+  }
+  logOnSameLineLocalDev('Checked ' + cyan(filesToCheck.length) + ' file(s)');
 }
 
 module.exports = {
@@ -180,7 +162,7 @@ module.exports = {
 prettify.description =
   'Checks several non-JS files in the repo for formatting using prettier';
 prettify.flags = {
-  'files': '  Checks only the specified files',
-  'local_changes': '  Checks just the files changed in the local branch',
-  'fix': '  Fixes formatting errors',
+  'files': 'Checks only the specified files',
+  'local_changes': 'Checks just the files changed in the local branch',
+  'fix': 'Fixes formatting errors',
 };
diff --git a/build-system/tasks/process-3p-github-pr.js b/build-system/tasks/process-3p-github-pr.js
deleted file mode 100644
index 6a1f9a4cd12a5..0000000000000
--- a/build-system/tasks/process-3p-github-pr.js
+++ /dev/null
@@ -1,351 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-/**
- * This script auto triage pull requests from 3P.
- * It supports:
- * 1. Triaging and 3P ad service integration PR.
- */
-
-'use strict';
-const argv = require('minimist')(process.argv.slice(2));
-const assert = require('assert');
-const colors = require('ansi-colors');
-const extend = require('util')._extend;
-const log = require('fancy-log');
-const util = require('util');
-
-const request = util.promisify(require('request'));
-
-const {GITHUB_ACCESS_TOKEN} = process.env;
-
-const isDryrun = argv.dryrun;
-
-let reviewer = '';
-
-const REGEX_3P_INTEGRATION = new RegExp('3p/integration.js');
-const REGEX_3P_AD_JS = new RegExp('ads/[^/]+.js');
-const REGEX_3P_AD_MD = new RegExp('ads/[^/]+.md');
-const REGEX_3P_AD_CONFIG = new RegExp('ads/_config.js');
-const REGEX_3P_AD_EXAMPLE = new RegExp('examples/ads.amp.html');
-const REGEX_AD_MD = new RegExp('extensions/amp-ad/amp-ad.md');
-
-const adIntegrationFileList = [
-  REGEX_3P_INTEGRATION,
-  REGEX_3P_AD_JS,
-  REGEX_3P_AD_MD,
-  REGEX_3P_AD_CONFIG,
-  REGEX_3P_AD_EXAMPLE,
-  REGEX_AD_MD,
-];
-
-const internalContributors = [
-  // Feel free to add your name here
-  // if you don't want your PR to be auto triaged.
-  'bradfrizzell',
-  'calebcordry',
-  'glevitzky',
-  'keithwrightbos',
-  'lannka',
-  'jasti',
-  'rudygalfi',
-  'zhouyx',
-];
-
-const reviewers = [
-  // In rotation order
-  'calebcordry',
-  'zhouyx',
-  'lannka',
-];
-
-const REF_DATE = new Date('May 13, 2018 00:00:00');
-const WEEK_DIFF = 604800000;
-
-const ANALYZE_OUTCOME = {
-  AD: 1, // Ad integration PR, ping the ad onduty person
-};
-
-const AD_COMMENT =
-  'Dear contributor! Thank you for the pull request. ' +
-  'It looks like this PR is trying to add support to an ad network. \n \n' +
-  'If this is your first time adding support for ' +
-  'a new third-party ad service, please make sure your follow our ' +
-  '[developer guideline](https://github.com/ampproject/amphtml/blob/master/' +
-  'ads/README.md#developer-guidelines-for-a-pull-request). \n \n' +
-  'If you have not implemented it, we also highly recommend implementing ' +
-  'the [renderStart API](https://github.com/ampproject/amphtml/blob/master/' +
-  'ads/README.md#available-apis) to provide better user experience. ' +
-  'Please let us know if there is any question. \n \n';
-
-const defaultOption = {
-  headers: {
-    'User-Agent': 'amp-changelog-gulp-task',
-    'Accept': 'application/vnd.github.v3+json',
-  },
-  qs: {
-    'access_token': GITHUB_ACCESS_TOKEN,
-  },
-};
-
-// we need around 14 batches to get more than 1k issues
-const NUM_BATCHES = 14;
-
-/**
- * Calculate the reviewer this week, based on rotation calendar
- * @return {string}
- */
-function calculateReviewer() {
-  const now = Date.now();
-  const diff = now - REF_DATE;
-  const week = diff / WEEK_DIFF;
-  const turn = Math.floor(week % 3);
-  return reviewers[turn];
-}
-
-/**
- * Main function for auto triaging
- * @return {!Promise|undefined}
- */
-function process3pGithubPr() {
-  if (!GITHUB_ACCESS_TOKEN) {
-    log(colors.red('You have not set the GITHUB_ACCESS_TOKEN env var.'));
-    log(
-      colors.green(
-        'See https://help.github.com/articles/' +
-          'creating-an-access-token-for-command-line-use/ ' +
-          'for instructions on how to create a github access token. We only ' +
-          'need `public_repo` scope.'
-      )
-    );
-    return;
-  }
-
-  reviewer = calculateReviewer();
-
-  const arrayPromises = [];
-  // we need to pull issues in batches
-  for (let batch = 1; batch < NUM_BATCHES; batch++) {
-    arrayPromises.push(getIssues(batch));
-  }
-  return Promise.all(arrayPromises)
-    .then((requests) => [].concat.apply([], requests))
-    .then((issues) => {
-      const allIssues = issues;
-      const allTasks = [];
-      allIssues.forEach(function (issue) {
-        allTasks.push(handleIssue(issue));
-      });
-      return Promise.all(allTasks);
-    })
-    .then(() => {
-      log(colors.blue('auto triaging succeed!'));
-    });
-}
-
-function handleIssue(issue) {
-  return isQualifiedPR(issue).then((outcome) => {
-    return replyToPR(issue, outcome);
-  });
-}
-
-/**
- * Fetches issues?page=${opt_page}
- *
- * @param {number=} opt_page
- * @return {!Promise<!Array>}
- */
-function getIssues(opt_page) {
-  // We need to use the issue API because assignee is only available with it.
-  const options = extend({}, defaultOption);
-  options.url = 'https://api.github.com/repos/ampproject/amphtml/issues';
-  options.qs = {
-    'state': 'open',
-    'assignee': 'none',
-    'page': opt_page,
-    'per_page': 100,
-    'access_token': GITHUB_ACCESS_TOKEN,
-  };
-  return request(options).then((res) => {
-    const issues = JSON.parse(res.body);
-    assert(Array.isArray(issues), 'issues must be an array.');
-    return issues;
-  });
-}
-
-/**
- * API call to get all changed files of a pull request.
- * @param {!Object} pr
- * @return {?Array<string>}
- */
-function getPullRequestFiles(pr) {
-  const options = extend({}, defaultOption);
-  const {number} = pr;
-  options.url =
-    'https://api.github.com/repos/ampproject/amphtml/pulls/' +
-    `${number}/files`;
-  return request(options).then((res) => {
-    const files = JSON.parse(res.body);
-    if (!Array.isArray(files)) {
-      return null;
-    }
-    return files;
-  });
-}
-
-/**
- * Determine the type of a give pull request
- * @param {?Array<!Object>} files
- * @return {number|null|undefined}
- */
-function analyzeChangedFiles(files) {
-  if (!files) {
-    return;
-  }
-  // Only support 3p ads integration files
-  const fileCount = files.length;
-  if (fileCount == 0) {
-    return null;
-  }
-  let matchFileCount = 0;
-  for (let i = 0; i < fileCount; i++) {
-    const fileName = files[i].filename;
-    for (let j = 0; j < adIntegrationFileList.length; j++) {
-      const regex = adIntegrationFileList[j];
-      if (regex.test(fileName)) {
-        matchFileCount++;
-        continue;
-      }
-    }
-  }
-  const percentage = matchFileCount / fileCount;
-  if (percentage > 0.75 || matchFileCount >= 3) {
-    // Still need to check the matchFileCount because of incorrect rebase.
-    return ANALYZE_OUTCOME.AD;
-  }
-  return null;
-}
-
-/**
- * Determine if we need to reply to an issue
- * @param {!Object} issue
- * @return {!Promise}
- */
-function isQualifiedPR(issue) {
-  // All issues are opened has no assignee
-  if (!issue.pull_request) {
-    // Is not a pull request
-    return Promise.resolve(null);
-  }
-
-  const author = issue.user.login;
-  if (internalContributors.indexOf(author) > -1) {
-    // If it is a pull request from internal contributor
-    return Promise.resolve(null);
-  }
-  // get pull request reviewer API is not working as expected. Skip
-
-  // Get changed files of this PR
-  return getPullRequestFiles(issue).then((files) => {
-    return analyzeChangedFiles(files);
-  });
-}
-
-/**
- * Auto reply
- * @param {!Object} pr
- * @param {ANALYZE_OUTCOME} outcome
- * @return {!Promise}
- */
-function replyToPR(pr, outcome) {
-  let promise = Promise.resolve();
-  if (outcome == ANALYZE_OUTCOME.AD) {
-    promise = promise
-      .then(() => {
-        // We should be good with rate limit given the number of
-        // 3p integration PRs today.
-        const comment = AD_COMMENT + `Thank you! Ping @${reviewer} for review`;
-        return applyComment(pr, comment);
-      })
-      .then(() => {
-        return assignIssue(pr, [reviewer]);
-      });
-  }
-  return promise;
-}
-
-/**
- * API call to comment on a give issue.
- * @param {!Object} issue
- * @param {string} comment
- * @return {!Promise}
- */
-function applyComment(issue, comment) {
-  const {number} = issue;
-  const options = extend(
-    {
-      url:
-        'https://api.github.com/repos/ampproject/amphtml/issues/' +
-        `${number}/comments`,
-      method: 'POST',
-      body: JSON.stringify({
-        'body': comment,
-      }),
-    },
-    defaultOption
-  );
-  if (isDryrun) {
-    log(colors.blue(`apply comment to PR #${number}, comment is ${comment}`));
-    return Promise.resolve();
-  }
-  return request(options);
-}
-
-/**
- * API call to assign an issue with a list of assignees
- * @param {!Object} issue
- * @param {!Array<string>} assignees
- * @return {!Promise}
- */
-function assignIssue(issue, assignees) {
-  const {number} = issue;
-  const options = extend(
-    {
-      url:
-        'https://api.github.com/repos/ampproject/amphtml/issues/' +
-        `${number}/assignees`,
-      method: 'POST',
-      body: JSON.stringify({
-        'assignees': assignees,
-      }),
-    },
-    defaultOption
-  );
-  if (isDryrun) {
-    log(colors.blue(`assign PR #${number}, to ${assignees}`));
-    return Promise.resolve();
-  }
-  return request(options);
-}
-
-module.exports = {
-  process3pGithubPr,
-};
-
-process3pGithubPr.description = 'Automatically triage 3P integration PRs';
-process3pGithubPr.flags = {
-  dryrun: "  Generate process but don't push it out",
-};
diff --git a/build-system/tasks/process-github-issues.js b/build-system/tasks/process-github-issues.js
deleted file mode 100644
index 9ac22423a5397..0000000000000
--- a/build-system/tasks/process-github-issues.js
+++ /dev/null
@@ -1,485 +0,0 @@
-/**
- * Copyright 2017 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 argv = require('minimist')(process.argv.slice(2));
-const assert = require('assert');
-const colors = require('ansi-colors');
-const extend = require('util')._extend;
-const log = require('fancy-log');
-const util = require('util');
-
-const request = util.promisify(require('request'));
-
-const {GITHUB_ACCESS_TOKEN} = process.env;
-
-const isDryrun = argv.dryrun;
-
-const issuesOptions = {
-  url: 'https://api.github.com/repos/ampproject/amphtml/issues',
-  headers: {
-    'User-Agent': 'amp-changelog-gulp-task',
-    'Accept': 'application/vnd.github.v3+json',
-  },
-  qs: {
-    'access_token': GITHUB_ACCESS_TOKEN,
-  },
-};
-
-const milestoneOptions = {
-  url: 'https://api.github.com/repos/ampproject/amphtml/milestones',
-  headers: {
-    'User-Agent': 'amp-changelog-gulp-task',
-    'Accept': 'application/vnd.github.v3+json',
-  },
-  qs: {
-    'access_token': GITHUB_ACCESS_TOKEN,
-  },
-};
-
-// 4 is the number for Milestone 'Backlog Bugs'
-const MILESTONE_BACKLOG_BUGS = 4;
-// 11 is the number for Milestone '3P Implementation'
-const MILESTONE_3P_IMPLEMENTATION = 11;
-// 12 is the number for Milestone 'Docs Updates'
-const MILESTONE_DOCS_UPDATES = 12;
-// By default we will assign 'Pending Triage' milestone, number 20
-const MILESTONE_PENDING_TRIAGE = 20;
-// 22 is the number for Milestone 'Prioritized FRs'
-const MILESTONE_PRIORITIZED_FRS = 22;
-// 23 is the number for Milestone 'New FRs'
-const MILESTONE_NEW_FRS = 23;
-// 25 is the number for Milestone 'Good First Issues (GFI)'
-const MILESTONE_GREAT_ISSUES = 25;
-// days for biweekly updates
-const BIWEEKLY_DAYS = 14;
-// days for quarterly updates
-const QUARTERLY_DAYS = 89;
-// we need around 14 batches to get more than 1k issues
-const NUM_BATCHES = 14;
-
-// We start processing the issues by checking token first
-function processGithubIssues() {
-  if (!GITHUB_ACCESS_TOKEN) {
-    log(colors.red('You have not set the GITHUB_ACCESS_TOKEN env var.'));
-    log(
-      colors.green(
-        'See https://help.github.com/articles/' +
-          'creating-an-access-token-for-command-line-use/ ' +
-          'for instructions on how to create a github access token. We only ' +
-          'need `public_repo` scope.'
-      )
-    );
-    return;
-  }
-  return updateGitHubIssues().then(function () {
-    log(colors.blue('automation applied'));
-  });
-}
-/**
- * Fetches issues?page=${opt_page}
- *
- * @param {number=} opt_page
- * @return {!Promise<!Array<}
- */
-function getIssues(opt_page) {
-  const options = extend({}, issuesOptions);
-  options.qs = {
-    'state': 'open',
-    'page': opt_page,
-    'per_page': 100,
-    'access_token': GITHUB_ACCESS_TOKEN,
-  };
-  return request(options).then((res) => {
-    const issues = JSON.parse(res.body);
-    assert(Array.isArray(issues), 'issues must be an array.');
-    return issues;
-  });
-}
-/**
- * Function goes through all the gitHub issues,
- * gets all the Labels we are interested in,
- * depending if missing milestone or label,
- * tasks applied as per design go/ampgithubautomation
- * @return {!Promise}
- */
-function updateGitHubIssues() {
-  let promise = Promise.resolve();
-  const arrayPromises = [];
-  // we need to pull issues in batches
-  for (let batch = 1; batch < NUM_BATCHES; batch++) {
-    arrayPromises.push(getIssues(batch));
-  }
-  return Promise.all(arrayPromises)
-    .then((requests) => [].concat.apply([], requests))
-    .then((issues) => {
-      const allIssues = issues;
-      allIssues.forEach(function (issue) {
-        const {
-          labels,
-          milestone,
-          assignee,
-          'pull_request': pullRequest,
-          'updated_at': issueLastUpdate,
-        } = issue;
-        let issueType;
-        let milestoneTitle;
-        let milestoneState;
-        let hasPriority = false;
-        let hasCategory = false;
-        let issueNewMilestone = MILESTONE_PENDING_TRIAGE;
-        let assigneeName = '';
-        let biweeklyUpdate = true;
-        let quartelyUpdate = true;
-        // if an issue is a pull request, we'll skip it
-        if (pullRequest) {
-          if (isDryrun) {
-            log(colors.red(issue.number + ' is a pull request'));
-          }
-          return;
-        }
-        if (getLastUpdate(issueLastUpdate) > QUARTERLY_DAYS) {
-          quartelyUpdate = false;
-          biweeklyUpdate = false;
-        } else if (getLastUpdate(issueLastUpdate) > BIWEEKLY_DAYS) {
-          biweeklyUpdate = false;
-        }
-        // Get the assignee
-        if (assignee) {
-          assigneeName = '@' + assignee.login;
-        }
-        // Get the title and state of the milestone
-        if (milestone) {
-          milestoneTitle = milestone.title;
-          milestoneState = milestone.state;
-          issueNewMilestone = milestone.number;
-        }
-        // promise starts
-        promise = promise.then(function () {
-          log('Update ' + issue.number);
-          const updates = [];
-          // Get the labels we want to check
-          labels.forEach(function (label) {
-            if (label) {
-              // Check if the issues has type
-              if (
-                label.name.startsWith('Type') ||
-                label.name.startsWith('Related')
-              ) {
-                issueType = label.name;
-              }
-              // Check if the issues has Priority
-              if (
-                label.name.startsWith('P0') ||
-                label.name.startsWith('P1') ||
-                label.name.startsWith('P2') ||
-                label.name.startsWith('P3')
-              ) {
-                hasPriority = true;
-                if (
-                  label.name.startsWith('P0') ||
-                  label.name.startsWith('P1')
-                ) {
-                  if (biweeklyUpdate == false) {
-                    biweeklyUpdate = true;
-                    updates.push(
-                      applyComment(
-                        issue,
-                        'This is a high priority' +
-                          " issue but it hasn't been updated in awhile. " +
-                          assigneeName +
-                          ' Do you have any updates?'
-                      )
-                    );
-                  }
-                } else if (
-                  label.name.startsWith('P2') &&
-                  quartelyUpdate == false
-                ) {
-                  quartelyUpdate = true;
-                  updates.push(
-                    applyComment(
-                      issue,
-                      "This issue hasn't been " +
-                        ' updated in awhile. ' +
-                        assigneeName +
-                        ' Do you have any updates?'
-                    )
-                  );
-                }
-              }
-              if (
-                label.name.startsWith('Category') ||
-                label.name.startsWith('Related to') ||
-                label.name.startsWith('GFI') ||
-                label.name.startsWith('good first issue')
-              ) {
-                hasCategory = true;
-              }
-            }
-          });
-          // Milestone task: move issues from closed milestone
-          if (milestone) {
-            if (milestoneState === 'closed') {
-              issueNewMilestone = MILESTONE_BACKLOG_BUGS;
-              updates.push(applyMilestone(issue, issueNewMilestone));
-            }
-          }
-          if (issueNewMilestone === MILESTONE_PENDING_TRIAGE) {
-            if (quartelyUpdate == false) {
-              quartelyUpdate = true;
-              updates.push(
-                applyComment(
-                  issue,
-                  'This issue seems to be in ' +
-                    ' Pending Triage for awhile. ' +
-                    assigneeName +
-                    ' Please triage this to ' +
-                    'an appropriate milestone.'
-                )
-              );
-            }
-          }
-          // if issueType is not null, add correct milestones
-          if (issueType != null) {
-            if (
-              issueNewMilestone === MILESTONE_PENDING_TRIAGE ||
-              milestone == null
-            ) {
-              if (issueType === 'Type: Feature Request') {
-                issueNewMilestone = MILESTONE_NEW_FRS;
-                updates.push(applyMilestone(issue, issueNewMilestone));
-              } else if (
-                issueType === 'Related to: Documentation' ||
-                issueType === 'Type: Design Review' ||
-                issueType === 'Type: Status Update'
-              ) {
-                issueNewMilestone = MILESTONE_DOCS_UPDATES;
-                updates.push(applyMilestone(issue, issueNewMilestone));
-              } else if (
-                issueType === 'Type: Bug' ||
-                issueType === 'Related to: Flaky Tests'
-              ) {
-                issueNewMilestone = MILESTONE_BACKLOG_BUGS;
-                updates.push(applyMilestone(issue, issueNewMilestone));
-              } else if (milestone == null) {
-                updates.push(applyMilestone(issue, issueNewMilestone));
-              }
-            }
-          } else if (milestone == null) {
-            updates.push(applyMilestone(issue, issueNewMilestone));
-          } else if (
-            issueNewMilestone === MILESTONE_PRIORITIZED_FRS ||
-            issueNewMilestone === MILESTONE_NEW_FRS
-          ) {
-            updates.push(applyLabel(issue, 'Type: Feature Request'));
-          } else if (
-            issueNewMilestone === MILESTONE_BACKLOG_BUGS ||
-            milestoneTitle.startsWith('Sprint')
-          ) {
-            updates.push(applyLabel(issue, 'Type: Bug'));
-          }
-          // Apply default priority if no priority
-          if (
-            hasPriority == false &&
-            issueNewMilestone != MILESTONE_NEW_FRS &&
-            issueNewMilestone !== MILESTONE_3P_IMPLEMENTATION &&
-            issueNewMilestone !== MILESTONE_PENDING_TRIAGE &&
-            milestone != null
-          ) {
-            updates.push(applyLabel(issue, 'P2: Soon'));
-          }
-          // Add comment with missing Category
-          if (hasCategory == false) {
-            if (
-              issueNewMilestone === MILESTONE_PENDING_TRIAGE ||
-              issueNewMilestone === MILESTONE_DOCS_UPDATES ||
-              issueNewMilestone == null ||
-              issueNewMilestone === MILESTONE_GREAT_ISSUES
-            ) {
-              if (isDryrun) {
-                log(colors.green('No comment needed  for #' + issue.number));
-              }
-            } else {
-              updates.push(
-                applyComment(
-                  issue,
-                  "This issue doesn't have a category" +
-                    ' which makes it harder for us to keep track of it. ' +
-                    assigneeName +
-                    ' Please add an appropriate category.'
-                )
-              );
-            }
-          }
-          return Promise.all(updates);
-        });
-      });
-      return promise;
-    });
-}
-
-/**
- * @param {string} issue
- * @param {number} milestoneNumber
- * @return {!Promise<*>}
- */
-function applyMilestone(issue, milestoneNumber) {
-  const options = extend({}, milestoneOptions);
-  options.qs = {
-    'state': 'open',
-    'per_page': 100,
-    'access_token': GITHUB_ACCESS_TOKEN,
-  };
-
-  issue.milestone = milestoneNumber;
-  if (isDryrun) {
-    log(
-      colors.green(
-        'Milestone applied ' + milestoneNumber + ' for #' + issue.number
-      )
-    );
-    return;
-  } else {
-    return createGithubRequest(
-      '/issues/' + issue.number,
-      'PATCH',
-      issue.milestone,
-      'milestone'
-    );
-  }
-}
-
-/**
- * @param {string} issue
- * @param {string} label
- * @return {!Promise<*>}
- */
-function applyLabel(issue, label) {
-  const options = extend({}, issuesOptions);
-  options.qs = {
-    'state': 'open',
-    'per_page': 100,
-    'access_token': GITHUB_ACCESS_TOKEN,
-  };
-  if (isDryrun) {
-    log(colors.green('Label applied ' + label + ' for #' + issue.number));
-    return;
-  } else {
-    return createGithubRequest(
-      '/issues/' + issue.number + '/labels',
-      'POST',
-      [label],
-      'label'
-    );
-  }
-}
-
-/**
- * @param {string} issue
- * @param {string} comment
- * @return {!Promise<*>}
- */
-function applyComment(issue, comment) {
-  const options = extend({}, issuesOptions);
-  options.qs = {
-    'state': 'open',
-    'per_page': 100,
-    'access_token': GITHUB_ACCESS_TOKEN,
-  };
-  // delay the comment request so we don't reach github rate limits requests
-  const promise = new Promise((resolve) => setTimeout(resolve, 120000));
-  return promise.then(function () {
-    if (isDryrun) {
-      log(colors.blue('waited 2 minutes to avoid gh rate limits'));
-      log(
-        colors.green(
-          'Comment applied after ' +
-            'waiting 2 minutes to avoid github rate limits: ' +
-            comment +
-            ' for #' +
-            issue.number
-        )
-      );
-      return;
-    } else {
-      createGithubRequest(
-        '/issues/' + issue.number + '/comments',
-        'POST',
-        comment,
-        'comment'
-      );
-    }
-  });
-}
-// calculate number of days since the latest update
-function getLastUpdate(issueLastUpdate) {
-  const t = new Date();
-  const splits = issueLastUpdate.split('-', 3);
-  const exactDay = splits[2].split('T', 1);
-  const firstDate = Date.UTC(splits[0], splits[1], exactDay[0]);
-  const secondDate = Date.UTC(t.getFullYear(), t.getMonth() + 1, t.getDate());
-  const diff = Math.abs(
-    (firstDate.valueOf() - secondDate.valueOf()) / (24 * 60 * 60 * 1000)
-  );
-  return diff;
-}
-
-/**
- * Function pushes the updates requested based on the path received
- * @param {string} path
- * @param {string=} opt_method
- * @param {*} opt_data
- * @param {string} typeRequest
- * @return {!Promise<*>}
- */
-function createGithubRequest(path, opt_method, opt_data, typeRequest) {
-  const options = {
-    url: 'https://api.github.com/repos/ampproject/amphtml' + path,
-    body: {},
-    headers: {
-      'User-Agent': 'amp-changelog-gulp-task',
-      'Accept': 'application/vnd.github.v3+json',
-    },
-    qs: {
-      'access_token': GITHUB_ACCESS_TOKEN,
-    },
-  };
-  if (opt_method) {
-    options.method = opt_method;
-  }
-  if (opt_data) {
-    options.json = true;
-    if (typeRequest === 'milestone') {
-      options.body.milestone = opt_data;
-    } else if (typeRequest === 'comment') {
-      options.body.body = opt_data;
-    } else {
-      options.body = opt_data;
-    }
-  }
-  return request(options);
-}
-
-module.exports = {
-  processGithubIssues,
-};
-
-processGithubIssues.description =
-  'Automatically updates the labels ' +
-  'and milestones of all open issues at github.com/ampproject/amphtml.';
-processGithubIssues.flags = {
-  dryrun: "  Generate process but don't push it out",
-};
diff --git a/build-system/tasks/release/index.js b/build-system/tasks/release/index.js
new file mode 100644
index 0000000000000..7ac3494962335
--- /dev/null
+++ b/build-system/tasks/release/index.js
@@ -0,0 +1,511 @@
+/**
+ * Copyright 2020 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';
+
+/**
+ * @typedef {{
+ *  name?: string,
+ *  environment?: string,
+ *  issue?: string,
+ *  expiration_date_utc?: string,
+ *  define_experiment_constant?: string,
+ * }}
+ */
+let ExperimentConfigDef;
+
+/**
+ * @typedef {{
+ *  experimentA: ExperimentConfigDef,
+ *  experimentB: ExperimentConfigDef,
+ *  experimentC: ExperimentConfigDef,
+ * }}
+ */
+let ExperimentsConfigDef;
+
+/**
+ * @typedef {ExperimentConfigDef & {
+ *  flavorType: string;
+ *  rtvPrefixes: string[];
+ *  command: string;
+ * }}
+ */
+let DistFlavorDef;
+
+const argv = require('minimist')(process.argv.slice(2));
+/** @type {ExperimentsConfigDef} */
+const experimentsConfig = require('../../global-configs/experiments-config.json');
+const fetch = require('node-fetch');
+const fs = require('fs-extra');
+const klaw = require('klaw');
+const path = require('path');
+const tar = require('tar');
+const {cyan, green} = require('../../common/colors');
+const {execOrDie} = require('../../common/exec');
+const {log} = require('../../common/logging');
+const {MINIFIED_TARGETS} = require('../helpers');
+const {VERSION} = require('../../compile/internal-version');
+
+// Flavor config for the base flavor type.
+const BASE_FLAVOR_CONFIG = {
+  flavorType: 'base',
+  name: 'base',
+  rtvPrefixes: ['00', '01', '02', '03', '04', '05'],
+  command: 'amp dist --noconfig',
+  environment: 'AMP',
+};
+
+// Deep map from [environment][flavorType] to an RTV prefix.
+const EXPERIMENTAL_RTV_PREFIXES = {
+  AMP: {
+    experimentA: '10',
+    experimentB: '11',
+    experimentC: '12',
+  },
+  INABOX: {
+    'experimentA-control': '20',
+    experimentA: '21',
+    'experimentB-control': '22',
+    experimentB: '23',
+    'experimentC-control': '24',
+    experimentC: '25',
+  },
+};
+
+// Directory containing multiple static files to dist/.
+const STATIC_FILES_DIR = path.resolve(__dirname, 'static');
+
+// List of individual files to copy directly from the Git workspace to dist/.
+const STATIC_FILE_PATHS = ['build-system/global-configs/caches.json'];
+
+// List of individual files to copy from post-build files, key-values as the
+// from-to of the copy operations.
+const POST_BUILD_MOVES = {
+  'dist.tools/experiments/experiments.cdn.html': 'dist/experiments.html',
+  'dist.tools/experiments/experiments.js': 'dist/v0/experiments.js',
+  'dist.tools/experiments/experiments.js.map': 'dist/v0/experiments.js.map',
+};
+
+// URL to the JSON info API for the amp-sw package on the npm registry.
+const AMP_SW_NPM_PACKAGE_URL = 'https://registry.npmjs.org/@ampproject/amp-sw';
+
+// List of directories to keep in the temp directory from each flavor's build.
+const DIST_DIRS = ['dist', 'dist.3p', 'dist.tools'];
+
+// Mapping from a channel's RTV prefix, to an object with channel configuration
+// data based on the spec/amp-framework-hosting.md document. The fields are:
+// - type: machine name of the channel (Some of these are the same as their name
+//   in spec/amp-framework-hosting.md, but some are different. Those that have a
+//   different machine name are marked in a comment.)
+// - configBase: name of the config JSON file to prepend as the AMP_CONFIG to
+//   all the entry files in this channel. Either `canary` or `prod` (these files
+//   are located in build-system/global-configs/${configBase}-config.json).
+const CHANNEL_CONFIGS = {
+  '00': {type: 'experimental', configBase: 'canary'},
+  '01': {type: 'production', configBase: 'prod'}, // Spec name: 'stable'
+  '02': {type: 'control', configBase: 'prod'},
+  '03': {type: 'rc', configBase: 'prod'}, // Spec name: 'beta'
+  '04': {type: 'nightly', configBase: 'prod'},
+  '05': {type: 'nightly-control', configBase: 'prod'},
+  '10': {type: 'experimentA', configBase: 'prod'},
+  '11': {type: 'experimentB', configBase: 'prod'},
+  '12': {type: 'experimentC', configBase: 'prod'},
+  '20': {type: 'experimentA-control', configBase: 'prod'}, // Spec name: 'inabox-experimentA-control'
+  '21': {type: 'experimentA', configBase: 'prod'}, // Spec name: 'inabox-experimentA'
+  '22': {type: 'experimentB-control', configBase: 'prod'}, // Spec name: 'inabox-experimentB-control'
+  '23': {type: 'experimentB', configBase: 'prod'}, // Spec name: 'inabox-experimentB'
+  '24': {type: 'experimentC-control', configBase: 'prod'}, // Spec name: 'inabox-experimentC-control'
+  '25': {type: 'experimentC', configBase: 'prod'}, // Spec name: 'inabox-experimentC'
+};
+
+/**
+ * Prints a separator line so logs are easy to read.
+ */
+function logSeparator_() {
+  log('---\n\n');
+}
+
+/**
+ * Prepares output and temp directories.
+ *
+ * @param {string} outputDir full directory path to emplace artifacts in.
+ * @param {string} tempDir full directory path to temporary working directory.
+ */
+async function prepareEnvironment_(outputDir, tempDir) {
+  execOrDie('amp clean');
+  await fs.emptyDir(outputDir);
+  await fs.emptyDir(tempDir);
+  logSeparator_();
+}
+
+/**
+ * Discovers which AMP flavors are defined in the current working directory.
+ *
+ * The returned list of flavors will always contain the base flavor, and any
+ * defined experiments in ../../global-configs/experiments-config.json.
+ *
+ * @return {!Array<!DistFlavorDef>} list of AMP flavors to build.
+ */
+function discoverDistFlavors_() {
+  const experimentConfigDefs = Object.entries(experimentsConfig);
+  const distFlavors = [
+    BASE_FLAVOR_CONFIG,
+    ...experimentConfigDefs
+      .filter(
+        // Only include experiments that have a `define_experiment_constant` field.
+        ([, experimentConfig]) => experimentConfig.define_experiment_constant
+      )
+      .map(([flavorType, experimentConfig]) => ({
+        // TODO(#28168, erwinmombay): relace with single `--module --nomodule` command.
+        command: `amp dist --noconfig --define_experiment_constant ${experimentConfig.define_experiment_constant}`,
+        flavorType,
+        rtvPrefixes: [
+          EXPERIMENTAL_RTV_PREFIXES[experimentConfig.environment][flavorType],
+        ],
+        ...experimentConfig,
+      })),
+  ].filter(
+    // If --flavor is defined, filter out the rest.
+    ({flavorType}) => !argv.flavor || flavorType == argv.flavor
+  );
+
+  log(
+    'The following',
+    cyan('amp dist'),
+    'commands will be executed to compile each',
+    `${green('flavor')}:`
+  );
+  distFlavors.forEach(({command, flavorType, name}) => {
+    log('-', `(${green(flavorType)}, ${green(name)})`, cyan(command));
+  });
+
+  logSeparator_();
+
+  return distFlavors;
+}
+
+/**
+ * Compiles all AMP flavors sequentially.
+ *
+ * @param {string} flavorType AMP flavor to build.
+ * @param {string} command `amp` command to build the flavor.
+ * @param {string} tempDir full directory path to temporary working directory.
+ */
+async function compileDistFlavors_(flavorType, command, tempDir) {
+  // TODO(danielrozenberg): remove undefined case when the release automation platform explicitly handles it.
+  if (argv.esm === undefined) {
+    command = `${command} --esm && ${command}`;
+  } else if (argv.esm) {
+    command += ' --esm';
+  }
+  log('Compiling flavor', green(flavorType), 'using', cyan(command));
+
+  execOrDie('amp clean --exclude release');
+  execOrDie(command);
+
+  const flavorTempDistDir = path.join(tempDir, flavorType);
+  log('Moving build artifacts to', `${cyan(flavorTempDistDir)}...`);
+  await fs.ensureDir(flavorTempDistDir);
+
+  await Promise.all(
+    DIST_DIRS.map((distDir) =>
+      fs.move(distDir, path.join(flavorTempDistDir, distDir))
+    )
+  );
+
+  log('Copying static files...');
+  const staticFilesPromises = [
+    // Directory-to-directory copy from the ./static sub-directory.
+    fs.copy(STATIC_FILES_DIR, path.join(flavorTempDistDir, 'dist')),
+    // Individual files to copy from the Git repository.
+    ...STATIC_FILE_PATHS.map((staticFilePath) =>
+      fs.copy(
+        staticFilePath,
+        path.join(flavorTempDistDir, 'dist', path.basename(staticFilePath))
+      )
+    ),
+  ];
+  const postBuildMovesPromises = !argv.esm
+    ? [
+        // Individual files to copy from the resulting build artifacts.
+        // This is only relevant for nomodule builds.
+        ...Object.entries(POST_BUILD_MOVES).map(([from, to]) =>
+          fs.copy(
+            path.join(flavorTempDistDir, from),
+            path.join(flavorTempDistDir, to)
+          )
+        ),
+      ]
+    : [Promise.resolve()];
+  await Promise.all([...staticFilesPromises, ...postBuildMovesPromises]);
+
+  logSeparator_();
+}
+
+/**
+ * Fetches latest AMP service-worker package from the npm registry.
+ *
+ * @param {string} flavorType AMP flavor to build.
+ * @param {string} tempDir full directory path to temporary working directory.
+ */
+async function fetchAmpSw_(flavorType, tempDir) {
+  const ampSwTempDir = path.join(tempDir, 'ampproject/amp-sw');
+  await Promise.all([
+    fs.ensureDir(ampSwTempDir),
+    fs.ensureDir(path.join(tempDir, flavorType, 'dist/sw')),
+  ]);
+
+  const ampSwNpmPackageResponse = await fetch(AMP_SW_NPM_PACKAGE_URL);
+  const ampSwNpmPackageJson = await ampSwNpmPackageResponse.json();
+  const {latest} = ampSwNpmPackageJson['dist-tags'];
+  const ampSwTarballUrl = ampSwNpmPackageJson.versions[latest].dist.tarball;
+
+  const tarWritableStream = tar.extract({
+    cwd: ampSwTempDir,
+    filter: (path) => path.startsWith('package/dist'),
+    strip: 2, // to strip "package/dist/".
+  });
+  (await fetch(ampSwTarballUrl)).body.pipe(tarWritableStream);
+  await new Promise((resolve) => {
+    tarWritableStream.on('end', resolve);
+  });
+
+  await fs.copy(ampSwTempDir, path.join(tempDir, flavorType, 'dist/sw'));
+
+  logSeparator_();
+}
+
+/**
+ * Copies compiled build artifacts to RTV-based directories.
+ *
+ * Each flavor translates to one or more RTV numbers, for a detailed explanation
+ * see spec/amp-framework-hosting.md.
+ *
+ * @param {string} flavorType AMP flavor to build.
+ * @param {!Array<string>} rtvPrefixes list of 2-digit RTV prefixes to generate.
+ * @param {string} tempDir full directory path to temporary working directory.
+ * @param {string} outputDir full directory path to emplace artifacts in.
+ */
+async function populateOrgCdn_(flavorType, rtvPrefixes, tempDir, outputDir) {
+  const rtvCopyingPromise = async (/** @type {string} */ rtvPrefix) => {
+    const rtvNumber = `${rtvPrefix}${VERSION}`;
+    const rtvPath = path.join(outputDir, 'org-cdn/rtv', rtvNumber);
+    await fs.ensureDir(rtvPath);
+    return fs.copy(path.join(tempDir, flavorType, 'dist'), rtvPath);
+  };
+
+  const rtvCopyingPromises = rtvPrefixes.map(rtvCopyingPromise);
+
+  // Special handling for INABOX experiments when compiling the base flavor.
+  // INABOX experiments need to have their control population be created from
+  // the base flavor.
+  if (flavorType == 'base') {
+    rtvCopyingPromises.push(
+      ...Object.entries(experimentsConfig)
+        .filter(([, {environment}]) => environment == 'INABOX')
+        .map(
+          ([experimentFlavor]) =>
+            EXPERIMENTAL_RTV_PREFIXES['INABOX'][`${experimentFlavor}-control`]
+        )
+        .map(rtvCopyingPromise)
+    );
+  }
+  await Promise.all(rtvCopyingPromises);
+
+  logSeparator_();
+}
+
+/**
+ * Generates a listing of all files in each org-cdn/rtv/ subdirectory.
+
+ * @param {string} outputDir full directory path to emplace artifacts in.
+ */
+async function generateFileListing_(outputDir) {
+  await Promise.all(
+    Object.entries(CHANNEL_CONFIGS)
+      .map(([rtvPrefix]) =>
+        path.join(outputDir, 'org-cdn/rtv', `${rtvPrefix}${VERSION}`)
+      )
+      .filter((rtvPath) => fs.pathExistsSync(path.join(rtvPath)))
+      .map(async (rtvPath) => {
+        const filesPath = path.join(rtvPath, 'files.txt');
+
+        const files = [];
+        for await (const file of klaw(rtvPath)) {
+          if (file.stats.isFile()) {
+            files.push(path.relative(rtvPath, file.path));
+          }
+        }
+        files.sort();
+        files.push(''); // Add an empty line at end of file.
+
+        await fs.writeFile(filesPath, files.join('\n'));
+      })
+  );
+}
+
+/**
+ * Prepends the AMP_CONFIG configuration object to all the entry files.
+ *
+ * Entry files are those that publishers would embed in their page, i.e.
+ * https://cdn.ampproject.org/v0.js, but could be others for different users,
+ * e.g., /amp4ads-v0.js for AMP ads.
+ *
+ * @param {string} outputDir full directory path to emplace artifacts in.
+ */
+async function prependConfig_(outputDir) {
+  const activeChannels = Object.entries(CHANNEL_CONFIGS).filter(
+    ([rtvPrefix]) => {
+      const rtvNumber = `${rtvPrefix}${VERSION}`;
+      const rtvPath = path.join(outputDir, 'org-cdn/rtv', rtvNumber);
+      return fs.pathExistsSync(path.join(rtvPath));
+    }
+  );
+
+  const allPrependPromises = [];
+  for (const [rtvPrefix, channelConfig] of activeChannels) {
+    const rtvNumber = `${rtvPrefix}${VERSION}`;
+    const rtvPath = path.join(outputDir, 'org-cdn/rtv', rtvNumber);
+    const channelPartialConfig = {
+      v: rtvNumber,
+      type: channelConfig.type,
+      ...require(`../../global-configs/${channelConfig.configBase}-config.json`),
+    };
+    // Mapping of entry file names to a dictionary of AMP_CONFIG additions.
+    const targetsToConfig = MINIFIED_TARGETS.flatMap((minifiedTarget) => {
+      const targets = [];
+      // TODO(danielrozenberg): remove undefined case when the release automation platform explicitly handles it.
+      if (!argv.esm) {
+        // For explicit --no-esm or when no ESM flag is passed.
+        targets.push({file: `${minifiedTarget}.js`, config: {}});
+      }
+      if (argv.esm === undefined || argv.esm) {
+        // For explicit --esm or when no ESM flag is passed.
+        targets.push({file: `${minifiedTarget}.mjs`, config: {esm: 1}});
+      }
+      return targets;
+    });
+
+    allPrependPromises.push(
+      ...targetsToConfig.map(async (target) => {
+        const targetPath = path.join(rtvPath, target.file);
+        const channelConfig = JSON.stringify({
+          ...channelPartialConfig,
+          ...target.config,
+        });
+
+        const contents = await fs.readFile(targetPath, 'utf-8');
+        return fs.writeFile(
+          targetPath,
+          `self.AMP_CONFIG=${channelConfig};/*AMP_CONFIG*/${contents}`
+        );
+      })
+    );
+  }
+  await Promise.all(allPrependPromises);
+
+  logSeparator_();
+}
+
+/**
+ * Copies compiled build artifacts to the AMP ads frame container directory.
+ *
+ * @param {string} tempDir full directory path to temporary working directory.
+ * @param {string} outputDir full directory path to emplace artifacts in.
+ */
+async function populateNetWildcard_(tempDir, outputDir) {
+  const netWildcardDir = path.join(outputDir, 'net-wildcard', VERSION);
+  await fs.ensureDir(netWildcardDir);
+  await fs.copy(path.join(tempDir, 'base/dist.3p', VERSION), netWildcardDir);
+
+  logSeparator_();
+}
+
+/**
+ * Cleans are deletes the temp directory.
+ *
+ * @param {string} tempDir full directory path to temporary working directory.
+ */
+async function cleanup_(tempDir) {
+  await fs.rmdir(tempDir, {recursive: true});
+
+  logSeparator_();
+}
+
+/**
+ * @return {Promise<void>}
+ */
+async function release() {
+  const outputDir = path.resolve(argv.output_dir || './release');
+  const tempDir = path.join(outputDir, 'tmp');
+
+  log('Preparing environment for release build in', `${cyan(outputDir)}...`);
+  await prepareEnvironment_(outputDir, tempDir);
+
+  log('Discovering release', `${green('flavors')}...`);
+  const distFlavors = discoverDistFlavors_();
+
+  if (argv.flavor && distFlavors.length == 0) {
+    log('Flavor', cyan(argv.flavor), 'is inactive. Quitting...');
+    return;
+  }
+
+  if (!argv.flavor) {
+    log('Compiling all', `${green('flavors')}...`);
+  }
+
+  for (const {command, flavorType, rtvPrefixes} of distFlavors) {
+    await compileDistFlavors_(flavorType, command, tempDir);
+
+    log('Fetching npm package', `${cyan('@ampproject/amp-sw')}...`);
+    await fetchAmpSw_(flavorType, tempDir);
+
+    log('Copying from temporary directory to', cyan('org-cdn'));
+    await populateOrgCdn_(flavorType, rtvPrefixes, tempDir, outputDir);
+  }
+
+  log('Generating', cyan('files.txt'), 'files in', cyan('org-cdn/rtv/*'));
+  await generateFileListing_(outputDir);
+
+  log('Prepending config to entry files...');
+  await prependConfig_(outputDir);
+
+  if (!argv.flavor || argv.flavor == 'base') {
+    // Only populate the net-wildcard directory if --flavor=base or if --flavor is not set.
+    log('Copying from temporary directory to', cyan('net-wildcard'));
+    await populateNetWildcard_(tempDir, outputDir);
+  }
+
+  log('Cleaning up temp dir...');
+  await cleanup_(tempDir);
+
+  log('Release build is done!');
+  log('  See:', cyan(outputDir));
+}
+
+module.exports = {
+  release,
+};
+
+release.description = 'Generates a release build';
+release.flags = {
+  'output_dir':
+    'Directory path to emplace release files (defaults to "./release")',
+  'flavor':
+    'Limit this release build to a single flavor. Can be used to split the release work between multiple build machines.',
+  'esm':
+    // TODO(danielrozenberg): remove undefined case when the release automation platform explicitly handles it.
+    'True to compile with --esm, false to compile without; Do not set to compile both.',
+};
diff --git a/build-system/tasks/release/static/amp_preconnect_polyfill_404_or_other_error_expected._Do_not_worry_about_it b/build-system/tasks/release/static/amp_preconnect_polyfill_404_or_other_error_expected._Do_not_worry_about_it
new file mode 100644
index 0000000000000..c740de7b30f27
--- /dev/null
+++ b/build-system/tasks/release/static/amp_preconnect_polyfill_404_or_other_error_expected._Do_not_worry_about_it
@@ -0,0 +1 @@
+Hello AMP
\ No newline at end of file
diff --git a/build-system/tasks/release/static/favicon.ico b/build-system/tasks/release/static/favicon.ico
new file mode 100644
index 0000000000000..85a4d9fac03ba
Binary files /dev/null and b/build-system/tasks/release/static/favicon.ico differ
diff --git a/build-system/tasks/release/static/ping.html b/build-system/tasks/release/static/ping.html
new file mode 100644
index 0000000000000..3e3d039c5634a
--- /dev/null
+++ b/build-system/tasks/release/static/ping.html
@@ -0,0 +1 @@
+cdn
diff --git a/build-system/tasks/release/static/preconnect.gif b/build-system/tasks/release/static/preconnect.gif
new file mode 100644
index 0000000000000..b3aa80d843a92
Binary files /dev/null and b/build-system/tasks/release/static/preconnect.gif differ
diff --git a/build-system/tasks/report-test-status.js b/build-system/tasks/report-test-status.js
index 0c10fd90663bd..33c99ada48f43 100644
--- a/build-system/tasks/report-test-status.js
+++ b/build-system/tasks/report-test-status.js
@@ -16,128 +16,186 @@
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
-const log = require('fancy-log');
-const requestPromise = require('request-promise');
-const {cyan, green, yellow} = require('ansi-colors');
+const fetch = require('node-fetch');
+const {
+  isCircleciBuild,
+  isGithubActionsBuild,
+  isPullRequestBuild,
+} = require('../common/ci');
+const {ciJobUrl} = require('../common/ci');
+const {cyan, yellow} = require('../common/colors');
+const {getValidExperiments} = require('../common/utils');
 const {gitCommitHash} = require('../common/git');
-const {travisJobUrl, isTravisPullRequestBuild} = require('../common/travis');
+const {log} = require('../common/logging');
+const {Targets, determineBuildTargets} = require('../pr-check/build-targets');
 
 const reportBaseUrl = 'https://amp-test-status-bot.appspot.com/v0/tests';
 
-const IS_GULP_INTEGRATION = argv._[0] === 'integration';
-const IS_GULP_UNIT = argv._[0] === 'unit';
-const IS_GULP_E2E = argv._[0] === 'e2e';
-
-const IS_LOCAL_CHANGES = !!argv.local_changes;
-const IS_SAUCELABS = !!argv.saucelabs;
-const IS_SAUCELABS_STABLE = !!argv.saucelabs && !!argv.stable;
-const IS_SAUCELABS_BETA = !!argv.saucelabs && !!argv.beta;
-const IS_DIST = !!argv.compiled;
-
-const TEST_TYPE_SUBTYPES = new Map([
-  ['integration', ['local', 'minified', 'saucelabs-beta', 'saucelabs-stable']],
-  ['unit', ['local', 'local-changes', 'saucelabs']],
-  ['e2e', ['local']],
-]);
+const IS_AMP_INTEGRATION = argv._[0] === 'integration';
+const IS_AMP_UNIT = argv._[0] === 'unit';
+const IS_AMP_E2E = argv._[0] === 'e2e';
+
+const TEST_TYPE_SUBTYPES = isGithubActionsBuild()
+  ? new Map([
+      ['integration', ['firefox', 'safari', 'edge', 'ie']],
+      ['unit', ['firefox', 'safari', 'edge']],
+      ['e2e', ['firefox', 'safari']],
+    ])
+  : isCircleciBuild()
+  ? new Map([
+      [
+        'integration',
+        [
+          'unminified',
+          'nomodule-prod',
+          'nomodule-canary',
+          'module-prod',
+          'module-canary',
+          ...getValidExperiments(),
+        ],
+      ],
+      ['unit', ['unminified', 'local-changes']],
+      ['e2e', ['nomodule', ...getValidExperiments()]],
+    ])
+  : new Map([]);
 const TEST_TYPE_BUILD_TARGETS = new Map([
-  ['integration', ['RUNTIME', 'FLAG_CONFIG', 'INTEGRATION_TEST']],
-  ['unit', ['RUNTIME', 'UNIT_TEST']],
-  ['e2e', ['RUNTIME', 'FLAG_CONFIG', 'E2E_TEST']],
+  ['integration', [Targets.RUNTIME, Targets.INTEGRATION_TEST]],
+  ['unit', [Targets.RUNTIME, Targets.UNIT_TEST]],
+  ['e2e', [Targets.RUNTIME, Targets.E2E_TEST]],
 ]);
 
+/**
+ * @return {string}
+ */
 function inferTestType() {
-  if (IS_GULP_E2E) {
-    return 'e2e/local';
-  }
-
-  let type;
-  if (IS_GULP_UNIT) {
-    type = 'unit';
-  } else if (IS_GULP_INTEGRATION) {
-    type = 'integration';
-  } else {
-    return null;
+  // Determine type (early exit if there's no match).
+  const type = IS_AMP_E2E
+    ? 'e2e'
+    : IS_AMP_INTEGRATION
+    ? 'integration'
+    : IS_AMP_UNIT
+    ? 'unit'
+    : null;
+  if (type == null) {
+    throw new Error('No valid test type was inferred');
   }
 
-  if (IS_LOCAL_CHANGES) {
-    return `${type}/local-changes`;
-  }
+  // Determine subtype (more specific cases come first).
+  const subtype = argv.local_changes
+    ? 'local-changes'
+    : argv.esm
+    ? 'module'
+    : argv.firefox
+    ? 'firefox'
+    : argv.safari
+    ? 'safari'
+    : argv.edge
+    ? 'edge'
+    : argv.ie
+    ? 'ie'
+    : argv.browsers == 'safari'
+    ? 'safari'
+    : argv.browsers == 'firefox'
+    ? 'firefox'
+    : argv.experiment
+    ? argv.experiment
+    : argv.compiled
+    ? 'nomodule'
+    : 'unminified';
+
+  return `${type}/${subtype}${maybeAddConfigSubtype()}`;
+}
 
-  if (IS_SAUCELABS_BETA) {
-    return `${type}/saucelabs-beta`;
-  } else if (IS_SAUCELABS_STABLE) {
-    return `${type}/saucelabs-stable`;
-  } else if (IS_SAUCELABS) {
-    return `${type}/saucelabs`;
-  } else if (IS_DIST) {
-    return `${type}/minified`;
+/**
+ * @return {string}
+ */
+function maybeAddConfigSubtype() {
+  if (isCircleciBuild() && argv.config) {
+    return `-${argv.config}`;
   }
-
-  return `${type}/local`;
+  return '';
 }
 
-function postReport(type, action) {
-  if (type !== null && isTravisPullRequestBuild()) {
+/**
+ * @param {string} type
+ * @param {string} action
+ * @return {Promise<void>}
+ */
+async function postReport(type, action) {
+  if (type && isPullRequestBuild()) {
     const commitHash = gitCommitHash();
-    return requestPromise({
-      method: 'POST',
-      uri: `${reportBaseUrl}/${commitHash}/${type}/${action}`,
-      body: JSON.stringify({
-        travisJobUrl: travisJobUrl(),
-      }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      // Do not use `json: true` because the response is a string, not JSON.
-    })
-      .then((body) => {
-        log(
-          green('INFO:'),
-          'reported',
-          cyan(`${type}/${action}`),
-          'to the test-status GitHub App'
-        );
-        if (body.length > 0) {
-          log(
-            green('INFO:'),
-            'response from test-status was',
-            cyan(body.substr(0, 100))
-          );
-        }
-      })
-      .catch((error) => {
-        log(
-          yellow('WARNING:'),
-          'failed to report',
-          cyan(`${type}/${action}`),
-          'to the test-status GitHub App:\n',
-          error.message.substr(0, 100)
-        );
-        return;
+
+    try {
+      const url = `${reportBaseUrl}/${commitHash}/${type}/${action}`;
+      const response = await fetch(url, {
+        method: 'POST',
+        body: JSON.stringify({
+          ciJobUrl: ciJobUrl(),
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
       });
+      const body = /** @type {string} */ (await response.text());
+
+      log('Reported', cyan(`${type}/${action}`), 'to GitHub');
+      if (body.length > 0) {
+        log('Response was', cyan(body.substr(0, 100)));
+      }
+    } catch (error) {
+      log(
+        yellow('WARNING:'),
+        'failed to report',
+        cyan(`${type}/${action}`),
+        'to GitHub:\n',
+        error.message.substr(0, 100)
+      );
+    }
   }
-  return Promise.resolve();
 }
 
-function reportTestErrored() {
-  return postReport(inferTestType(), 'report/errored');
+/**
+ * @return {Promise<void>}
+ */
+async function reportTestErrored() {
+  await postReport(inferTestType(), 'report/errored');
 }
 
-function reportTestFinished(success, failed) {
-  return postReport(inferTestType(), `report/${success}/${failed}`);
+/**
+ * @param {number|string} success
+ * @param {number|string} failed
+ * @return {Promise<void>}
+ */
+async function reportTestFinished(success, failed) {
+  await postReport(inferTestType(), `report/${success}/${failed}`);
 }
 
-function reportTestSkipped() {
-  return postReport(inferTestType(), 'skipped');
+/**
+ * @return {Promise<void>}
+ */
+async function reportTestSkipped() {
+  await postReport(inferTestType(), 'skipped');
 }
 
-function reportTestStarted() {
-  return postReport(inferTestType(), 'started');
+/**
+ * @return {Promise<void>}
+ */
+async function reportTestStarted() {
+  await postReport(inferTestType(), 'started');
 }
 
-async function reportAllExpectedTests(buildTargets) {
+/**
+ * @return {Promise<void>}
+ */
+async function reportAllExpectedTests() {
+  const buildTargets = determineBuildTargets();
   for (const [type, subTypes] of TEST_TYPE_SUBTYPES) {
     const testTypeBuildTargets = TEST_TYPE_BUILD_TARGETS.get(type);
+    if (testTypeBuildTargets === undefined) {
+      throw new Error(
+        `Undefined test type ${type} for build targets ${buildTargets}`
+      );
+    }
     const action = testTypeBuildTargets.some((target) =>
       buildTargets.has(target)
     )
@@ -151,15 +209,19 @@ async function reportAllExpectedTests(buildTargets) {
 
 /**
  * Callback to the Karma.Server on('run_complete') event for simple test types.
+ * Optionally takes an object containing test results if they were run.
  *
- * @param {!any} browsers
- * @param {!Karma.TestResults} results
+ * @param {?{
+ *   error: string|number,
+ *   failed: string|number,
+ *   success: string|number,
+ * }} results
  */
-function reportTestRunComplete(browsers, results) {
-  if (results.error) {
-    reportTestErrored();
+async function reportTestRunComplete(results) {
+  if (!results || results.error) {
+    await reportTestErrored();
   } else {
-    reportTestFinished(results.success, results.failed);
+    await reportTestFinished(results.success, results.failed);
   }
 }
 
diff --git a/build-system/tasks/runtime-test/OWNERS b/build-system/tasks/runtime-test/OWNERS
index 32c5ea6d75438..69a88bfe03860 100644
--- a/build-system/tasks/runtime-test/OWNERS
+++ b/build-system/tasks/runtime-test/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/build-system/tasks/runtime-test/helpers-unit.js b/build-system/tasks/runtime-test/helpers-unit.js
index 69369b4742605..e0e144bdcc128 100644
--- a/build-system/tasks/runtime-test/helpers-unit.js
+++ b/build-system/tasks/runtime-test/helpers-unit.js
@@ -18,15 +18,15 @@
 const fs = require('fs');
 const globby = require('globby');
 const listImportsExports = require('list-imports-exports');
-const log = require('fancy-log');
 const minimatch = require('minimatch');
 const path = require('path');
 const testConfig = require('../../test-configs/config');
+const {cyan, green} = require('../../common/colors');
 const {execOrDie} = require('../../common/exec');
 const {extensions, maybeInitializeExtensions} = require('../extension-helpers');
-const {gitDiffNameOnlyMaster} = require('../../common/git');
-const {green, cyan} = require('ansi-colors');
-const {isTravisBuild} = require('../../common/travis');
+const {gitDiffNameOnlyMain} = require('../../common/git');
+const {isCiBuild} = require('../../common/ci');
+const {log, logLocalDev} = require('../../common/logging');
 const {reportTestSkipped} = require('../report-test-status');
 
 const LARGE_REFACTOR_THRESHOLD = 50;
@@ -40,7 +40,7 @@ let testsToRun = null;
  * @return {boolean}
  */
 function isLargeRefactor() {
-  const filesChanged = gitDiffNameOnlyMaster();
+  const filesChanged = gitDiffNameOnlyMain();
   return filesChanged.length >= LARGE_REFACTOR_THRESHOLD;
 }
 
@@ -51,11 +51,18 @@ function isLargeRefactor() {
  * @return {!Object<string, string>}
  */
 function extractCssJsFileMap() {
-  execOrDie('gulp css', {'stdio': 'ignore'});
+  execOrDie('amp css', {'stdio': 'ignore'});
   maybeInitializeExtensions(extensions);
+  /** @type {Object<string, string>} */
   const cssJsFileMap = {};
 
-  // Adds an entry that maps a CSS file to a JS file
+  /**
+   * Adds an entry that maps a CSS file to a JS file
+   *
+   * @param {Object} cssData
+   * @param {string} cssBinaryName
+   * @param {Object} cssJsFileMap
+   */
   function addCssJsEntry(cssData, cssBinaryName, cssJsFileMap) {
     const cssFilePath =
       `extensions/${cssData['name']}/${cssData['version']}/` +
@@ -87,7 +94,9 @@ function extractCssJsFileMap() {
  */
 function getImports(jsFile) {
   const jsFileContents = fs.readFileSync(jsFile, 'utf8');
-  const {imports} = listImportsExports.parse(jsFileContents);
+  const {imports} = listImportsExports.parse(jsFileContents, [
+    'importAssertions',
+  ]);
   const files = [];
   const jsFileDir = path.dirname(jsFile);
   imports.forEach(function (file) {
@@ -124,7 +133,11 @@ function getJsFilesFor(cssFile, cssJsFileMap) {
   return jsFiles;
 }
 
-function getUnitTestsToRun() {
+/**
+ * Computes the list of unit tests to run under difference scenarios
+ * @return {Promise<Array<string>|void>}
+ */
+async function getUnitTestsToRun() {
   log(green('INFO:'), 'Determining which unit tests to run...');
 
   if (isLargeRefactor()) {
@@ -132,7 +145,7 @@ function getUnitTestsToRun() {
       green('INFO:'),
       'Skipping tests on local changes because this is a large refactor.'
     );
-    reportTestSkipped();
+    await reportTestSkipped();
     return;
   }
 
@@ -142,15 +155,15 @@ function getUnitTestsToRun() {
       green('INFO:'),
       'No unit tests were directly affected by local changes.'
     );
-    reportTestSkipped();
+    await reportTestSkipped();
     return;
   }
-  if (isTravisBuild() && tests.length > TEST_FILE_COUNT_THRESHOLD) {
+  if (isCiBuild() && tests.length > TEST_FILE_COUNT_THRESHOLD) {
     log(
       green('INFO:'),
       'Several tests were affected by local changes. Running all tests below.'
     );
-    reportTestSkipped();
+    await reportTestSkipped();
     return;
   }
 
@@ -173,17 +186,26 @@ function unitTestsToRun() {
     return testsToRun;
   }
   const cssJsFileMap = extractCssJsFileMap();
-  const filesChanged = gitDiffNameOnlyMaster();
+  const filesChanged = gitDiffNameOnlyMain();
   const {unitTestPaths} = testConfig;
   testsToRun = [];
   let srcFiles = [];
 
+  /**
+   * @param {string} file
+   * @return {boolean}
+   */
   function isUnitTest(file) {
     return unitTestPaths.some((pattern) => {
       return minimatch(file, pattern);
     });
   }
 
+  /**
+   * @param {string} testFile
+   * @param {string[]} srcFiles
+   * @return {boolean}
+   */
   function shouldRunTest(testFile, srcFiles) {
     const filesImported = getImports(testFile);
     return (
@@ -193,8 +215,13 @@ function unitTestsToRun() {
     );
   }
 
-  // Retrieves the set of unit tests that should be run
-  // for a set of source files.
+  /**
+   * Retrieves the set of unit tests that should be run
+   * for a set of source files.
+   *
+   * @param {string[]} srcFiles
+   * @return {string[]}
+   */
   function getTestsFor(srcFiles) {
     const allUnitTests = globby.sync(unitTestPaths);
     return allUnitTests.filter((testFile) => {
@@ -204,9 +231,12 @@ function unitTestsToRun() {
 
   filesChanged.forEach((file) => {
     if (!fs.existsSync(file)) {
-      if (!isTravisBuild()) {
-        log(green('INFO:'), 'Skipping', cyan(file), 'because it was deleted');
-      }
+      logLocalDev(
+        green('INFO:'),
+        'Skipping',
+        cyan(file),
+        'because it was deleted'
+      );
     } else if (isUnitTest(file)) {
       testsToRun.push(file);
     } else if (path.extname(file) == '.js') {
diff --git a/build-system/tasks/runtime-test/helpers.js b/build-system/tasks/runtime-test/helpers.js
index e09e4ca540caa..6f56cf49cf4df 100644
--- a/build-system/tasks/runtime-test/helpers.js
+++ b/build-system/tasks/runtime-test/helpers.js
@@ -17,42 +17,17 @@
 
 const argv = require('minimist')(process.argv.slice(2));
 const fs = require('fs');
-const log = require('fancy-log');
-const opn = require('opn');
 const path = require('path');
-const {
-  reportTestErrored,
-  reportTestFinished,
-  reportTestRunComplete,
-} = require('../report-test-status');
-const {green, yellow, cyan} = require('ansi-colors');
-const {isTravisBuild} = require('../../common/travis');
+const {cyan, green, red, yellow} = require('../../common/colors');
+const {isCiBuild} = require('../../common/ci');
+const {log, logWithoutTimestamp} = require('../../common/logging');
+const {maybePrintCoverageMessage} = require('../helpers');
+const {reportTestRunComplete} = require('../report-test-status');
 const {Server} = require('karma');
 
-// Number of Sauce Lab browsers. Three was determined to be the lowest number we
-// could set without causing a significant increase in Travis job time. See
-// https://github.com/ampproject/amphtml/pull/27016 for the relevant discussion.
-const BATCHSIZE = 3;
 const CHROMEBASE = argv.chrome_canary ? 'ChromeCanary' : 'Chrome';
 const chromeFlags = [];
 
-/**
- * Validates arguments before test runs
- * @return {boolean}
- */
-function shouldNotRun() {
-  if (argv.saucelabs) {
-    if (!process.env.SAUCE_USERNAME) {
-      throw new Error('Missing SAUCE_USERNAME Env variable');
-    }
-    if (!process.env.SAUCE_ACCESS_KEY) {
-      throw new Error('Missing SAUCE_ACCESS_KEY Env variable');
-    }
-  }
-
-  return false;
-}
-
 /**
  * Returns an array of ad types.
  * @return {!Array<string>}
@@ -97,7 +72,7 @@ function getAdTypes() {
  * Prints help messages for args if tests are being run for local development.
  */
 function maybePrintArgvMessages() {
-  if (argv.nohelp || isTravisBuild()) {
+  if (argv.nohelp || isCiBuild()) {
     return;
   }
 
@@ -108,7 +83,6 @@ function maybePrintArgvMessages() {
     edge: 'Running tests on Edge.',
     // eslint-disable-next-line
     chrome_canary: 'Running tests on Chrome Canary.',
-    saucelabs: 'Running tests on Sauce Labs browsers.',
     nobuild: 'Skipping build.',
     watch:
       'Enabling watch mode. Editing and saving a file will cause the' +
@@ -133,13 +107,13 @@ function maybePrintArgvMessages() {
       green('Launching'),
       cyan(CHROMEBASE),
       green('with flags'),
-      cyan(chromeFlags)
+      cyan(`${chromeFlags}`)
     );
   }
 
   log(
     green('Run'),
-    cyan('gulp help'),
+    cyan('amp --tasks'),
     green('to see a list of all test flags.')
   );
   log(green('⤷ Use'), cyan('--nohelp'), green('to silence these messages.'));
@@ -168,6 +142,7 @@ function maybePrintArgvMessages() {
     log(green('Running tests against unminified code.'));
   }
   Object.keys(argv).forEach((arg) => {
+    /** @type {string} */
     const message = argvMessages[arg];
     if (message) {
       log(yellow(`--${arg}:`), green(message));
@@ -175,16 +150,6 @@ function maybePrintArgvMessages() {
   });
 }
 
-function maybePrintCoverageMessage() {
-  if (!argv.coverage || isTravisBuild()) {
-    return;
-  }
-
-  const url = 'file://' + path.resolve('test/coverage/index.html');
-  log(green('INFO:'), 'Generated code coverage report at', cyan(url));
-  opn(url, {wait: false});
-}
-
 /**
  * @param {Object} browser
  * @private
@@ -192,213 +157,50 @@ function maybePrintCoverageMessage() {
 async function karmaBrowserComplete_(browser) {
   const result = browser.lastResult;
   result.total = result.success + result.failed + result.skipped;
-  // Initially we were reporting an error with reportTestErrored() when zero tests were detected (see #16851),
-  // but since Karma sometimes returns a transient, recoverable state, we will
-  // print a warning without reporting an error to the github test status. (see #24957)
+  // This used to be a warning with karma-browserify. See #16851 and #24957.
+  // Now, with karma-esbuild, this is a fatal error. See #34040.
   if (result.total == 0) {
     log(
-      yellow('WARNING:'),
-      'Received a status with zero tests:',
-      cyan(JSON.stringify(result))
+      red('ERROR:'),
+      'Karma returned a result with zero tests.',
+      'This usually indicates a transformation error. See logs above.'
     );
+    log(cyan(JSON.stringify(result)));
+    process.exit(1);
   }
 }
 
 /**
  * @private
  */
-function karmaBrowsersReady_() {
-  console./*OK*/ log('\n');
+function karmaBrowserStart_() {
+  logWithoutTimestamp('\n');
   log(green('Done. Running tests...'));
 }
 
-/**
- * @private
- */
-function karmaRunStart_() {
-  if (!argv.saucelabs) {
-    log(green('Running tests locally...'));
-  }
-}
-
-/**
- * Runs tests in Sauce Labs in batches.
- *
- * If --stable is provided, runs tests only on stable browsers in Sauce Labs.
- * If --beta is provided, runs tests only on beta browsers in Sauce Labs. Does not fail the build.
- * If neither --stable nor --beta are provided, runs test on all browsers in Sauce Labs.
- *
- * @param {Object} config karma config
- * @return {!Promise<number>} exitCode
- */
-async function runTestInSauceLabs(config) {
-  const flagSet = argv.stable || argv.beta;
-  const useStable = argv.stable || !flagSet;
-  const useBeta = argv.beta || !flagSet;
-
-  const isBeta = (browserId) => browserId.toLowerCase().endsWith('_beta');
-  const isStable = (browserId) => !isBeta(browserId);
-
-  return await runTestInBatches_(config, {
-    beta: useBeta ? config.browsers.filter(isBeta) : [],
-    stable: useStable ? config.browsers.filter(isStable) : [],
-  });
-}
-
-/**
- * Runs tests in batches.
- *
- * Splits stable and beta browsers to separate batches. Test failures in any
- * of the stable browsers will return an exit code of 1, whereas test failures
- * in any of the beta browsers will only print error messages, but will return
- * an exit code of 0.
- *
- * @param {Object} config karma config
- * @param {!Array<string>} browsers browsers
- * @return {number} exitCode
- * @private
- */
-async function runTestInBatches_(config, browsers) {
-  let errored = false;
-  let totalSuccess = 0;
-  let totalFailed = 0;
-  const partialTestRunCompleteFn = async (browsers, results) => {
-    if (results.error) {
-      errored = true;
-    } else {
-      totalSuccess += results.success;
-      totalFailed += results.failed;
-    }
-  };
-
-  const reportResults = async () => {
-    if (errored) {
-      await reportTestErrored();
-    } else {
-      await reportTestFinished(totalSuccess, totalFailed);
-    }
-  };
-
-  if (browsers.stable.length) {
-    const allBatchesExitCodes = await runTestInBatchesWithBrowsers_(
-      'stable',
-      browsers.stable,
-      config,
-      partialTestRunCompleteFn
-    );
-    if (allBatchesExitCodes || errored) {
-      await reportResults();
-      log(
-        yellow('Some tests have failed on'),
-        cyan('stable'),
-        yellow('browsers, so skipping running them on'),
-        cyan('beta'),
-        yellow('browsers.')
-      );
-      return allBatchesExitCodes || Number(errored);
-    }
-  }
-
-  if (browsers.beta.length) {
-    const allBatchesExitCodes = await runTestInBatchesWithBrowsers_(
-      'beta',
-      browsers.beta,
-      config,
-      partialTestRunCompleteFn
-    );
-    if (allBatchesExitCodes) {
-      log(
-        yellow('Some tests have failed on'),
-        cyan('beta'),
-        yellow('browsers.')
-      );
-      log(
-        yellow('This is not currently a fatal error, but will become an'),
-        yellow('error once the beta browsers are released as next stable'),
-        yellow('version!')
-      );
-    }
-  }
-
-  await reportResults();
-  return 0;
-}
-
-/**
- * Runs tests in named batch(es), with the specified browsers.
- *
- * @param {string} batchName a human readable name for the batch.
- * @param {!Array{string}} browsers list of SauceLabs browsers as
- *     customLaunchers IDs. *
- * @param {Object} config karma config
- * @param {function()} runCompleteFn a function to execute on the
- *     `run_complete` event. It should take two arguments, (browser, results),
- *     and return nothing.
- * @return {number} processExitCode
- * @private
- */
-async function runTestInBatchesWithBrowsers_(
-  batchName,
-  browsers,
-  config,
-  runCompleteFn
-) {
-  let batch = 1;
-  let startIndex = 0;
-  let endIndex = BATCHSIZE;
-  const batchExitCodes = [];
-
-  log(
-    green('Running tests on'),
-    cyan(browsers.length),
-    green('Sauce Labs'),
-    cyan(batchName),
-    green('browser(s)...')
-  );
-  while (startIndex < endIndex) {
-    const configBatch = {...config};
-    configBatch.browsers = browsers.slice(startIndex, endIndex);
-    log(
-      green('Batch'),
-      cyan(`#${batch}`) + green(':'),
-      cyan(configBatch.browsers.join(', '))
-    );
-    batchExitCodes.push(await createKarmaServer(configBatch, runCompleteFn));
-    startIndex = batch * BATCHSIZE;
-    batch++;
-    endIndex = Math.min(batch * BATCHSIZE, browsers.length);
-  }
-
-  return batchExitCodes.every((exitCode) => exitCode == 0) ? 0 : 1;
-}
-
 /**
  * Creates and starts karma server
- * @param {!Object} configBatch
- * @param {function()} runCompleteFn a function to execute on the
- *     `run_complete` event. It should take two arguments, (browser, results),
- *     and return nothing.
+ * @param {!Object} config
  * @return {!Promise<number>}
  */
-async function createKarmaServer(
-  configBatch,
-  runCompleteFn = reportTestRunComplete
-) {
-  let resolver;
+async function createKarmaServer(config) {
+  let resolver, results_;
   const deferred = new Promise((resolverIn) => {
     resolver = resolverIn;
   });
 
-  const karmaServer = new Server(configBatch, (exitCode) => {
-    maybePrintCoverageMessage();
+  const karmaServer = new Server(config, async (exitCode) => {
+    await reportTestRunComplete(results_);
+    maybePrintCoverageMessage('test/coverage/index.html');
     resolver(exitCode);
   });
 
   karmaServer
-    .on('run_start', karmaRunStart_)
-    .on('browsers_ready', karmaBrowsersReady_)
+    .on('browser_start', karmaBrowserStart_)
     .on('browser_complete', karmaBrowserComplete_)
-    .on('run_complete', runCompleteFn);
+    .on('run_complete', (_browsers, results) => {
+      results_ = results;
+    });
 
   karmaServer.start();
 
@@ -409,6 +211,4 @@ module.exports = {
   createKarmaServer,
   getAdTypes,
   maybePrintArgvMessages,
-  runTestInSauceLabs,
-  shouldNotRun,
 };
diff --git a/build-system/tasks/runtime-test/runtime-test-base.js b/build-system/tasks/runtime-test/runtime-test-base.js
index e4cd9f690f9c7..8b32f8cd4b818 100644
--- a/build-system/tasks/runtime-test/runtime-test-base.js
+++ b/build-system/tasks/runtime-test/runtime-test-base.js
@@ -16,220 +16,374 @@
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
-const karmaConfig = require('../karma.conf');
-const log = require('fancy-log');
-const testConfig = require('../../test-configs/config');
+const karmaConfig = require('../../test-configs/karma.conf');
+const {
+  commonIntegrationTestPaths,
+  commonUnitTestPaths,
+  integrationTestPaths,
+  karmaHtmlFixturesPath,
+  karmaJsPaths,
+  unitTestCrossBrowserPaths,
+  unitTestPaths,
+} = require('../../test-configs/config');
 const {
   createCtrlcHandler,
   exitCtrlcHandler,
 } = require('../../common/ctrlcHandler');
-const {
-  createKarmaServer,
-  getAdTypes,
-  runTestInSauceLabs,
-} = require('./helpers');
 const {app} = require('../../server/test-server');
+const {createKarmaServer, getAdTypes} = require('./helpers');
+const {cyan, green, red, yellow} = require('../../common/colors');
+const {dotWrappingWidth} = require('../../common/logging');
+const {getEsbuildBabelPlugin} = require('../../common/esbuild-babel');
 const {getFilesFromArgv} = require('../../common/utils');
-const {green, yellow, cyan, red} = require('ansi-colors');
-const {isTravisBuild} = require('../../common/travis');
-const {reportTestStarted} = require('.././report-test-status');
+const {isCiBuild, isCircleciBuild} = require('../../common/ci');
+const {log} = require('../../common/logging');
+const {reportTestStarted} = require('../report-test-status');
+const {SERVER_TRANSFORM_PATH} = require('../../server/typescript-compile');
 const {startServer, stopServer} = require('../serve');
 const {unitTestsToRun} = require('./helpers-unit');
 
 /**
- * Updates the browsers based off of the test type
- * being run (unit, integration, a4a) and test settings.
- * Keeps the default spec as is if no matching settings are found.
- * @param {!RuntimeTestConfig} config
+ * Used to print dots during esbuild + babel transforms
+ */
+let wrapCounter = 0;
+
+/**
+ * Used to lazy-require the HTML transformer function after the server is built.
+ */
+let transform;
+
+/**
+ * Consumes {@link karmaConfig} and dynamically populates fields based on test
+ * type and command line arguments.
  */
-function updateBrowsers(config) {
-  if (argv.saucelabs) {
-    if (config.testType == 'unit') {
-      Object.assign(config, {browsers: ['SL_Safari_12', 'SL_Firefox']});
+class RuntimeTestConfig {
+  /** @type {Array<string|Record<string, [string, *]>>} */
+  plugins = [];
+
+  /**@type {Record<string, string|string[]>} */
+  preprocessors = {};
+
+  /** @type {string[]} */
+  reporters = [];
+
+  client = {};
+
+  /**
+   * @param {string} testType
+   */
+  constructor(testType) {
+    this.testType = testType;
+    /**
+     * TypeScript is used for typechecking here and is unable to infer the type
+     * after using Object.assign. This results in errors relating properties of
+     * which can never be `null` being treated as though they could be.
+     */
+    Object.assign(this, karmaConfig);
+    this.updateBrowsers();
+    this.updateReporters();
+    this.updateFiles();
+    this.updatePreprocessors();
+    this.updateEsbuildConfig();
+    this.updateClient();
+    this.updateMiddleware();
+    this.updateCoverageSettings();
+  }
+
+  /**
+   * Updates the set of preprocessors to run on HTML and JS files before testing.
+   * Notes:
+   * - The HTML transform is lazy-required because the server is built at startup.
+   * - We must use babel on windows until esbuild can natively downconvert to ES5.
+   */
+  updatePreprocessors() {
+    const createHtmlTransformer = function () {
+      return function (content, _file, done) {
+        if (!transform) {
+          const outputDir = `../../../${SERVER_TRANSFORM_PATH}/dist/transform`;
+          transform = require(outputDir).transformSync;
+        }
+        done(transform(content));
+      };
+    };
+    createHtmlTransformer.$inject = [];
+    this.plugins.push({
+      'preprocessor:htmlTransformer': ['factory', createHtmlTransformer],
+    });
+    this.preprocessors[karmaHtmlFixturesPath] = ['htmlTransformer', 'html2js'];
+    for (const karmaJsPath of karmaJsPaths) {
+      this.preprocessors[karmaJsPath] = ['esbuild'];
+    }
+  }
+
+  /**
+   * Updates the browsers based off of the test type
+   * being run (unit, integration, a4a) and test settings.
+   * Defaults to Chrome if no matching settings are found.
+   */
+  updateBrowsers() {
+    if (argv.edge) {
+      Object.assign(this, {
+        browsers: [argv.headless ? 'EdgeHeadless' : 'Edge'],
+      });
       return;
     }
 
-    if (config.testType == 'integration') {
-      Object.assign(config, {
-        browsers: [
-          'SL_Chrome',
-          'SL_Firefox',
-          'SL_Edge',
-          'SL_Safari_12',
-          'SL_Safari_11',
-          'SL_IE',
-          // TODO(amp-infra): Evaluate and add more platforms here.
-          //'SL_Chrome_Android_7',
-          //'SL_iOS_11',
-          //'SL_iOS_12',
-          'SL_Chrome_Beta',
-          'SL_Firefox_Beta',
-        ],
+    if (argv.firefox) {
+      Object.assign(this, {
+        browsers: ['Firefox_flags'],
+        customLaunchers: {
+          // eslint-disable-next-line
+        Firefox_flags: {
+            base: 'Firefox',
+            flags: argv.headless ? ['-headless'] : [],
+          },
+        },
       });
       return;
     }
 
-    throw new Error(
-      'The --saucelabs flag is valid only for `gulp unit` and `gulp integration`.'
-    );
-  }
+    if (argv.ie) {
+      Object.assign(this, {
+        browsers: ['IE'],
+        customLaunchers: {
+          IeNoAddOns: {
+            base: 'IE',
+            flags: ['-extoff'],
+          },
+        },
+      });
+      return;
+    }
 
-  const chromeFlags = [];
-  if (argv.chrome_flags) {
-    argv.chrome_flags.split(',').forEach((flag) => {
-      chromeFlags.push('--'.concat(flag));
-    });
-  }
+    if (argv.safari) {
+      Object.assign(this, {browsers: ['SafariNative']});
+      return;
+    }
+
+    if (argv.chrome_canary) {
+      Object.assign(this, {browsers: ['ChromeCanary']});
+      return;
+    }
 
-  const options = new Map();
-  options
-    .set('chrome_canary', {browsers: ['ChromeCanary']})
-    .set('chrome_flags', {
-      browsers: ['Chrome_flags'],
-      customLaunchers: {
-        // eslint-disable-next-line
+    if (argv.chrome_flags) {
+      const chromeFlags = [];
+      argv.chrome_flags.split(',').forEach((flag) => {
+        chromeFlags.push('--'.concat(flag));
+      });
+      Object.assign(this, {
+        browsers: ['Chrome_flags'],
+        customLaunchers: {
+          // eslint-disable-next-line
         Chrome_flags: {
-          base: 'Chrome',
-          flags: chromeFlags,
+            base: 'Chrome',
+            flags: chromeFlags,
+          },
         },
-      },
-    })
-    .set('edge', {browsers: ['Edge']})
-    .set('firefox', {browsers: ['Firefox']})
-    .set('headless', {browsers: ['Chrome_no_extensions_headless']})
-    .set('ie', {
-      browsers: ['IE'],
-      customLaunchers: {
-        IeNoAddOns: {
-          base: 'IE',
-          flags: ['-extoff'],
-        },
-      },
-    })
-    .set('safari', {browsers: ['Safari']});
+      });
+      return;
+    }
 
-  for (const [key, value] of options) {
-    if (argv.hasOwnProperty(key)) {
-      Object.assign(config, value);
+    if (argv.headless) {
+      Object.assign(this, {browsers: ['Chrome_no_extensions_headless']});
       return;
     }
-  }
-}
 
-/**
- * Get the appropriate files based off of the test type
- * being run (unit, integration, a4a) and test settings.
- * @param {string} testType
- * @return {!Array<string>}
- */
-function getFiles(testType) {
-  let files;
-
-  switch (testType) {
-    case 'unit':
-      files = testConfig.commonUnitTestPaths;
-      if (argv.files) {
-        return files.concat(getFilesFromArgv());
-      }
-      if (argv.saucelabs) {
-        return files.concat(testConfig.unitTestOnSaucePaths);
-      }
-      if (argv.local_changes) {
-        return files.concat(unitTestsToRun());
-      }
-      return files.concat(testConfig.unitTestPaths);
-
-    case 'integration':
-      files = testConfig.commonIntegrationTestPaths;
-      if (argv.files) {
-        return files.concat(getFilesFromArgv());
-      }
-      return files.concat(testConfig.integrationTestPaths);
-
-    case 'a4a':
-      return testConfig.a4aTestPaths;
-
-    default:
-      throw new Error(`Test type ${testType} was not recognized`);
+    // Default to Chrome.
+    Object.assign(this, {
+      browsers: [isCiBuild() ? 'Chrome_ci' : 'Chrome_no_extensions'],
+    });
   }
-}
 
-/**
- * Adds reporters to the default karma spec per test settings.
- * Overrides default reporters for verbose settings.
- * @param {!RuntimeTestConfig} config
- */
-function updateReporters(config) {
-  if (
-    (argv.testnames || argv.local_changes || argv.files || argv.verbose) &&
-    !isTravisBuild()
-  ) {
-    config.reporters = ['mocha'];
+  /**
+   * Adds reporters to the default karma spec per test settings.
+   * Overrides default reporters for verbose settings.
+   */
+  updateReporters() {
+    if (
+      (argv.testnames || argv.local_changes || argv.files || argv.verbose) &&
+      !isCiBuild()
+    ) {
+      this.reporters = ['mocha'];
+    }
+
+    if (isCircleciBuild()) {
+      this.reporters.push('junit');
+      this.junitReporter = {
+        outputFile: `result-reports/${this.testType}.xml`,
+        useBrowserName: false,
+      };
+    }
+
+    if (argv.coverage) {
+      this.reporters.push('coverage-istanbul');
+    }
+
+    if (argv.report) {
+      this.reporters.push('json-result');
+      this.jsonResultReporter = {
+        outputFile: `result-reports/${this.testType}.json`,
+      };
+    }
   }
 
-  if (argv.coverage) {
-    config.reporters.push('coverage-istanbul');
+  /**
+   * Computes the set of files for Karma to load based on factors like test type,
+   * target browser, and flags.
+   */
+  updateFiles() {
+    switch (this.testType) {
+      case 'unit':
+        if (argv.files) {
+          this.files = commonUnitTestPaths.concat(getFilesFromArgv());
+          return;
+        }
+        if (argv.firefox || argv.safari || argv.edge) {
+          this.files = commonUnitTestPaths.concat(unitTestCrossBrowserPaths);
+          return;
+        }
+        if (argv.local_changes) {
+          this.files = commonUnitTestPaths.concat(unitTestsToRun());
+          return;
+        }
+        this.files = commonUnitTestPaths.concat(unitTestPaths);
+        return;
+
+      case 'integration':
+        if (argv.files) {
+          this.files = commonIntegrationTestPaths.concat(getFilesFromArgv());
+          return;
+        }
+        this.files = commonIntegrationTestPaths.concat(integrationTestPaths);
+        return;
+
+      default:
+        throw new Error(`Test type ${this.testType} was not recognized`);
+    }
   }
 
-  if (argv.saucelabs) {
-    config.reporters.push('saucelabs');
+  /**
+   * Logs a message indicating the start of babel transforms.
+   */
+  logBabelStart() {
+    wrapCounter = 0;
+    log(
+      green('Transforming tests with'),
+      cyan('esbuild'),
+      green('and'),
+      cyan('babel') + green('...')
+    );
   }
-}
 
-class RuntimeTestConfig {
-  constructor(testType) {
-    this.testType = testType;
+  /**
+   * Prints a dot for every babel transform, with wrapping if needed.
+   */
+  printBabelDot() {
+    process.stdout.write('.');
+    if (++wrapCounter >= dotWrappingWidth) {
+      wrapCounter = 0;
+      process.stdout.write('\n');
+    }
+  }
 
-    Object.assign(this, karmaConfig);
-    updateBrowsers(this);
-    updateReporters(this);
-    this.files = getFiles(this.testType);
-    this.singleRun = !argv.watch && !argv.w;
-    this.client.mocha.grep = !!argv.grep;
-    this.client.verboseLogging = !!argv.verbose || !!argv.v;
-    this.client.captureConsole = !!argv.verbose || !!argv.v || !!argv.files;
-    this.browserify.configure = function (bundle) {
-      bundle.on('prebundle', function () {
-        log(
-          green('Transforming tests with'),
-          cyan('browserify') + green('...')
-        );
-      });
+  /**
+   * Updates the esbuild config in the karma spec so esbuild can run with it.
+   */
+  updateEsbuildConfig() {
+    const importPathPlugin = {
+      name: 'import-path',
+      setup(build) {
+        build.onResolve({filter: /^[\w-]+$/}, (file) => {
+          if (file.path === 'stream') {
+            return {path: require.resolve('stream-browserify'), namespace: ''};
+          }
+        });
+      },
+    };
+    const babelPlugin = getEsbuildBabelPlugin(
+      /* callerName */ 'test',
+      /* enableCache */ true,
+      /* preSetup */ this.logBabelStart,
+      /* postLoad */ this.printBabelDot
+    );
+    this.esbuild = {
+      target: 'es5',
+      define: {
+        'process.env.NODE_DEBUG': 'false',
+        'process.env.NODE_ENV': '"test"',
+      },
+      plugins: [importPathPlugin, babelPlugin],
+      sourcemap: 'inline',
     };
+  }
 
-    // c.client is available in test browser via window.parent.karma.config
+  /**
+   * Updates the client so that tests can access karma state. This is available in
+   * the browser via window.parent.karma.config.
+   */
+  updateClient() {
+    this.singleRun = !argv.watch;
+    this.client.mocha.grep = !!argv.grep;
+    this.client.verboseLogging = !!argv.verbose;
+    this.client.captureConsole = !!argv.verbose || !!argv.files;
     this.client.amp = {
       useCompiledJs: !!argv.compiled,
-      saucelabs: !!argv.saucelabs,
       adTypes: getAdTypes(),
       mochaTimeout: this.client.mocha.timeout,
       testServerPort: this.client.testServerPort,
+      isModuleBuild: !!argv.esm, // Used by skip matchers in testing/test-config.js
     };
+  }
 
-    if (argv.coverage && this.testType != 'a4a') {
+  /**
+   * Inserts the AMP dev server into the middleware used by the Karma server.
+   */
+  updateMiddleware() {
+    const createDevServerMiddleware = function () {
+      return require(require.resolve('../../server/app.js'));
+    };
+    this.plugins.push({
+      'middleware:devServer': ['factory', createDevServerMiddleware],
+    });
+    this.beforeMiddleware = ['devServer'];
+  }
+
+  /**
+   * Updates the Karma config to gather coverage info if coverage is enabled.
+   */
+  updateCoverageSettings() {
+    if (argv.coverage) {
       this.plugins.push('karma-coverage-istanbul-reporter');
       this.coverageIstanbulReporter = {
         dir: 'test/coverage',
-        reports: isTravisBuild()
-          ? ['lcovonly']
-          : ['html', 'text', 'text-summary'],
-        'report-config': {lcovonly: {file: `lcov-${testType}.info`}},
+        reports: isCiBuild() ? ['lcovonly'] : ['html', 'text', 'text-summary'],
+        'report-config': {lcovonly: {file: `lcov-${this.testType}.info`}},
       };
     }
   }
 }
 
 class RuntimeTestRunner {
+  /**
+   *
+   * @param {RuntimeTestConfig} config
+   */
   constructor(config) {
     this.config = config;
     this.env = null;
     this.exitCode = 0;
   }
 
+  /**
+   * @return {Promise<void>}
+   */
   async maybeBuild() {
     throw new Error('maybeBuild method must be overridden');
   }
 
+  /**
+   * @return {Promise<void>}
+   */
   async setup() {
     await this.maybeBuild();
     await startServer({
@@ -238,31 +392,28 @@ class RuntimeTestRunner {
       port: this.config.client.testServerPort,
       middleware: () => [app],
     });
-    const handlerProcess = createCtrlcHandler(`gulp ${this.config.testType}`);
-
+    const handlerProcess = createCtrlcHandler(`amp ${this.config.testType}`);
     this.env = new Map().set('handlerProcess', handlerProcess);
   }
 
+  /**
+   * @return {Promise<void>}
+   */
   async run() {
-    reportTestStarted();
-
-    if (argv.saucelabs) {
-      this.exitCode = await runTestInSauceLabs(this.config);
-    } else {
-      this.exitCode = await createKarmaServer(this.config);
-    }
+    await reportTestStarted();
+    this.exitCode = await createKarmaServer(this.config);
   }
 
+  /**
+   * @return {Promise<void>}
+   */
   async teardown() {
     await stopServer();
-    exitCtrlcHandler(this.env.get('handlerProcess'));
-
+    exitCtrlcHandler(/** @type {Map} */ (this.env).get('handlerProcess'));
     if (this.exitCode != 0) {
-      log(
-        red('ERROR:'),
-        yellow(`Karma test failed with exit code ${this.exitCode}`)
-      );
-      process.exitCode = this.exitCode;
+      const message = `Karma test failed with exit code ${this.exitCode}`;
+      log(red('ERROR:'), yellow(message));
+      throw new Error(message);
     }
   }
 }
diff --git a/build-system/tasks/serve.js b/build-system/tasks/serve.js
index fef44f84997c2..05756a362bf18 100644
--- a/build-system/tasks/serve.js
+++ b/build-system/tasks/serve.js
@@ -19,29 +19,53 @@ const connect = require('gulp-connect');
 const debounce = require('debounce');
 const globby = require('globby');
 const header = require('connect-header');
-const log = require('fancy-log');
 const minimist = require('minimist');
 const morgan = require('morgan');
+const open = require('open');
+const os = require('os');
 const path = require('path');
-const watch = require('gulp-watch');
 const {
+  lazyBuild3pVendor,
   lazyBuildExtensions,
   lazyBuildJs,
-  preBuildRuntimeFiles,
   preBuildExtensions,
+  preBuildRuntimeFiles,
 } = require('../server/lazy-build');
+const {
+  SERVER_TRANSFORM_PATH,
+  buildNewServer,
+} = require('../server/typescript-compile');
 const {createCtrlcHandler} = require('../common/ctrlcHandler');
-const {cyan, green, red} = require('ansi-colors');
-const {distNailgunPort, stopNailgunServer} = require('./nailgun');
-const {exec} = require('../common/exec');
+const {cyan, green, red} = require('../common/colors');
 const {logServeMode, setServeMode} = require('../server/app-utils');
+const {log} = require('../common/logging');
 const {watchDebounceDelay} = require('./helpers');
+const {watch} = require('chokidar');
+
+/**
+ * @typedef {{
+ *   name: string,
+ *   port: string,
+ *   root: string,
+ *   host: string,
+ *   debug?: boolean,
+ *   silent?: boolean,
+ *   https?: boolean,
+ *   preferHttp1?: boolean,
+ *   liveReload?: boolean,
+ *   middleware?: function[],
+ *   startedcallback?: function,
+ *   serverInit?: function,
+ *   fallback?: string,
+ *   index: boolean | string | string[],
+ * }}
+ */
+let GulpConnectOptionsDef;
 
 const argv = minimist(process.argv.slice(2), {string: ['rtv']});
 
-// Used by new server implementation
-const typescriptBinary = './node_modules/typescript/bin/tsc';
-const transformsPath = 'build-system/server/new-server/transforms';
+const HOST = argv.host || '0.0.0.0';
+const PORT = argv.port || '8000';
 
 // Used for logging.
 let url = null;
@@ -50,7 +74,7 @@ let quiet = !!argv.quiet;
 // Used for live reload.
 const serverFiles = globby.sync([
   'build-system/server/**',
-  `!${transformsPath}/dist/**`,
+  `!${SERVER_TRANSFORM_PATH}/dist/**`,
 ]);
 
 // Used to enable / disable lazy building.
@@ -98,6 +122,7 @@ function getMiddleware() {
   if (lazyBuild) {
     middleware.push(lazyBuildExtensions);
     middleware.push(lazyBuildJs);
+    middleware.push(lazyBuild3pVendor);
   }
   return middleware;
 }
@@ -114,6 +139,7 @@ async function startServer(
   serverOptions = {},
   modeOptions = {}
 ) {
+  await buildNewServer();
   if (serverOptions.lazyBuild) {
     lazyBuild = serverOptions.lazyBuild;
   }
@@ -126,11 +152,13 @@ async function startServer(
     started = resolve;
   });
   setServeMode(modeOptions);
+
+  /** @type {GulpConnectOptionsDef} */
   const options = {
     name: 'AMP Dev Server',
     root: process.cwd(),
-    host: argv.host || 'localhost',
-    port: argv.port || 8000,
+    host: HOST,
+    port: PORT,
     https: argv.https,
     preferHttp1: true,
     silent: true,
@@ -139,28 +167,31 @@ async function startServer(
   };
   connect.server(options, started);
   await startedPromise;
-  url = `http${options.https ? 's' : ''}://${options.host}:${options.port}`;
-  log(green('Started'), cyan(options.name), green('at'), cyan(url));
-  logServeMode();
-}
 
-/**
- * Builds the new server by converting typescript transforms to JS
- */
-function buildNewServer() {
-  const buildCmd = `${typescriptBinary} -p ${transformsPath}/tsconfig.json`;
-  log(
-    green('Building'),
-    cyan('AMP Dev Server'),
-    green('at'),
-    cyan(`${transformsPath}/dist`) + green('...')
-  );
-  const result = exec(buildCmd, {'stdio': ['inherit', 'inherit', 'pipe']});
-  if (result.status != 0) {
-    const err = new Error('Could not build AMP Dev Server');
-    err.showStack = false;
-    throw err;
+  /**
+   * @param {string} host
+   * @return {string}
+   */
+  function makeUrl(host) {
+    return `http${options.https ? 's' : ''}://${host}:${options.port}`;
+  }
+
+  url = makeUrl(options.host);
+  log(green('Started'), cyan(options.name), green('at:'));
+  log('\t', cyan(url));
+  for (const device of Object.entries(os.networkInterfaces())) {
+    for (const detail of device[1] ?? []) {
+      if (detail.family === 'IPv4') {
+        log('\t', cyan(makeUrl(detail.address)));
+      }
+    }
+  }
+  if (argv.coverage == 'live') {
+    const covUrl = `${url}/coverage`;
+    log(green('Collecting live code coverage at'), cyan(covUrl));
+    await Promise.all([open(covUrl), open(url)]);
   }
+  logServeMode();
 }
 
 /**
@@ -177,9 +208,6 @@ function resetServerFiles() {
  * Stops the currently running server
  */
 async function stopServer() {
-  if (lazyBuild && argv.compiled) {
-    await stopNailgunServer(distNailgunPort);
-  }
   if (url) {
     connect.serverClose();
     log(green('Stopped server at'), cyan(url));
@@ -191,14 +219,12 @@ async function stopServer() {
  * Closes the existing server and restarts it
  */
 async function restartServer() {
-  await stopServer();
-  if (argv.new_server) {
-    try {
-      buildNewServer();
-    } catch {
-      log(red('ERROR:'), 'Could not build', cyan('AMP Dev Server'));
-      return;
-    }
+  stopServer();
+  try {
+    await buildNewServer();
+  } catch {
+    log(red('ERROR:'), 'Could not rebuild', cyan('AMP Server'));
+    return;
   }
   resetServerFiles();
   startServer();
@@ -213,7 +239,7 @@ async function performPreBuildSteps() {
 }
 
 /**
- * Entry point of the `gulp serve` task.
+ * Entry point of the `amp serve` task.
  */
 async function serve() {
   await doServe();
@@ -228,10 +254,7 @@ async function doServe(lazyBuild = false) {
   const watchFunc = async () => {
     await restartServer();
   };
-  watch(serverFiles, debounce(watchFunc, watchDebounceDelay));
-  if (argv.new_server) {
-    buildNewServer();
-  }
+  watch(serverFiles).on('change', debounce(watchFunc, watchDebounceDelay));
   await startServer({}, {lazyBuild}, {});
   if (lazyBuild) {
     await performPreBuildSteps();
@@ -239,26 +262,29 @@ async function doServe(lazyBuild = false) {
 }
 
 module.exports = {
-  buildNewServer,
   serve,
   doServe,
   startServer,
   stopServer,
+  HOST,
+  PORT,
 };
 
 /* eslint "google-camelcase/google-camelcase": 0 */
 
 serve.description = 'Starts a webserver at the project root directory';
 serve.flags = {
-  host: '  Hostname or IP address to bind to (default: localhost)',
-  port: '  Specifies alternative port (default: 8000)',
-  https: '  Use HTTPS server',
-  quiet: "  Run in quiet mode and don't log HTTP requests",
-  cache: '  Make local resources cacheable by the browser',
-  no_caching_extensions: '  Disable caching for extensions',
-  new_server: '  Use new server transforms',
-  compiled: '  Serve minified JS',
-  esm: '  Serve ESM JS (requires the use of --new_server)',
-  cdn: '  Serve current prod JS',
-  rtv: '  Serve JS from the RTV provided',
+  host: 'Hostname or IP address to bind to (default: localhost)',
+  port: 'Specifies alternative port (default: 8000)',
+  https: 'Use HTTPS server',
+  quiet: "Run in quiet mode and don't log HTTP requests",
+  cache: 'Make local resources cacheable by the browser',
+  no_caching_extensions: 'Disable caching for extensions',
+  compiled: 'Serve minified JS',
+  esm: 'Serve ESM JS (uses the new typescript server transforms)',
+  cdn: 'Serve current prod JS',
+  rtv: 'Serve JS from the RTV provided',
+  coverage:
+    'Serve instrumented code to collect coverage info; use ' +
+    '--coverage=live to auto-report coverage on page unload',
 };
diff --git a/build-system/tasks/server-tests.js b/build-system/tasks/server-tests.js
index dcffedfd2cd52..619703fc26512 100644
--- a/build-system/tasks/server-tests.js
+++ b/build-system/tasks/server-tests.js
@@ -17,17 +17,18 @@
 const assert = require('assert');
 const fs = require('fs');
 const globby = require('globby');
-const gulp = require('gulp');
-const log = require('fancy-log');
 const path = require('path');
 const posthtml = require('posthtml');
-const through = require('through2');
-const {buildNewServer} = require('../tasks/serve');
-const {cyan, green, red} = require('ansi-colors');
-const {isTravisBuild} = require('../common/travis');
+const {
+  log,
+  logWithoutTimestamp,
+  logWithoutTimestampLocalDev,
+} = require('../common/logging');
+const {buildNewServer} = require('../server/typescript-compile');
+const {cyan, green, red} = require('../common/colors');
 
 const transformsDir = path.resolve('build-system/server/new-server/transforms');
-const inputPaths = [`${transformsDir}/**/*input.html`];
+const inputPaths = [`${transformsDir}/**/input.html`];
 
 let passed = 0;
 let failed = 0;
@@ -36,10 +37,10 @@ let failed = 0;
  * Extracts the input for a test from its input file.
  *
  * @param {string} inputFile
- * @return {string}
+ * @return {Promise<string>}
  */
 async function getInput(inputFile) {
-  return await fs.promises.readFile(inputFile, 'utf8');
+  return fs.promises.readFile(inputFile, 'utf8');
 }
 
 /**
@@ -49,36 +50,65 @@ async function getInput(inputFile) {
  * @return {string}
  */
 function getTestName(inputFile) {
-  const testPath = path.relative(transformsDir, inputFile);
-  const transformName = path.dirname(path.dirname(testPath));
-  const testSuffix = path.basename(testPath).replace('-input.html', '');
+  const transformName = path.basename(getTransformerDir(inputFile));
+  const testSuffix = getTestPath(inputFile);
   return `${transformName} → ${testSuffix}`;
 }
 
 /**
- * Extracts the expected output for a test from its output file.
+ * Computes the directory of the transformer used in the test.
+ *
+ * @param {string} inputFile
+ * @return {string}
+ */
+function getTransformerDir(inputFile) {
+  // The prior assumption is that the transformer is in the parent directory.
+  // However, with Jest (and to mimic Jest), this is not necessarily true.
+  let transformerDir = inputFile;
+  while (path.basename(path.dirname(transformerDir)) != 'transforms') {
+    transformerDir = path.dirname(transformerDir);
+  }
+  return transformerDir;
+}
+
+/**
+ * Computes the relative dirname of the input from the test directory.
+ * For example, if the input is "test/foo/bar/input.html", we get "foo/bar".
  *
  * @param {string} inputFile
  * @return {string}
  */
+function getTestPath(inputFile) {
+  let testDir = inputFile;
+  while (path.basename(testDir) != 'test') {
+    testDir = path.dirname(testDir);
+  }
+  return path.dirname(path.relative(testDir, inputFile));
+}
+
+/**
+ * Extracts the expected output for a test from its output file.
+ *
+ * @param {string} inputFile
+ * @return {Promise<string>}
+ */
 async function getExpectedOutput(inputFile) {
   const expectedOutputFile = inputFile.replace('input.html', 'output.html');
-  return await fs.promises.readFile(expectedOutputFile, 'utf8');
+  return fs.promises.readFile(expectedOutputFile, 'utf8');
 }
 
 /**
  * Extracts the JS transform for a test from its transform file.
- *
  * @param {string} inputFile
- * @return {string}
+ * @param {!Object} extraOptions
+ * @return {Promise<string>}
  */
-async function getTransform(inputFile) {
-  const transformDir = path.dirname(path.dirname(inputFile));
+async function getTransform(inputFile, extraOptions) {
+  const transformDir = getTransformerDir(inputFile);
   const parsed = path.parse(transformDir);
   const transformPath = path.join(parsed.dir, 'dist', parsed.base);
   const transformFile = (await globby(path.resolve(transformPath, '*.js')))[0];
-  // TODO(rsimha): Change require to import when node v14 is the active LTS.
-  return require(transformFile).default;
+  return (await import(transformFile)).default.default(extraOptions);
 }
 
 /**
@@ -86,10 +116,25 @@ async function getTransform(inputFile) {
  *
  * @param {string} transform
  * @param {string} input
- * @return {string}
+ * @return {Promise<string>}
  */
 async function getOutput(transform, input) {
-  return (await posthtml(transform).process(input)).html;
+  return (await posthtml(/** @type {*} */ (transform)).process(input)).html;
+}
+
+/**
+ * Loads optional arguments residing in a options.json file, if any.
+ *
+ * @param {string} inputFile
+ * @return {!Object}
+ */
+function loadOptions(inputFile) {
+  const transformDir = path.dirname(inputFile);
+  const optionsPath = path.join(transformDir, 'options.json');
+  if (fs.existsSync(optionsPath)) {
+    return require(optionsPath);
+  }
+  return {};
 }
 
 /**
@@ -100,10 +145,12 @@ async function getOutput(transform, input) {
  */
 function logError(testName, err) {
   const {message} = err;
-  console.log(red('✖'), 'Failed', cyan(testName));
-  console.group();
-  console.log(message.split('\n').splice(3).join('\n'));
-  console.groupEnd();
+  logWithoutTimestamp(red('✖'), 'Failed', cyan(testName));
+  console /*OK*/
+    .group();
+  logWithoutTimestamp(message.split('\n').splice(3).join('\n'));
+  console /*OK*/
+    .groupEnd();
 }
 
 /**
@@ -115,9 +162,7 @@ function reportResult() {
     `(${cyan(passed)} passed, ${cyan(failed)} failed).`;
   if (failed > 0) {
     log(red('ERROR:'), result);
-    const err = new Error('Tests failed');
-    err.showStack = false;
-    throw err;
+    throw new Error('Tests failed');
   } else {
     log(green('SUCCESS:'), result);
   }
@@ -126,40 +171,37 @@ function reportResult() {
 /**
  * Runs the test in a single input file
  *
- * @return {!ReadableStream}
+ * @param {string} inputFile
  */
-function runTest() {
-  return through.obj(async (file, enc, cb) => {
-    const inputFile = file.path;
-    const input = await getInput(inputFile);
-    const testName = getTestName(inputFile);
-    const expectedOutput = await getExpectedOutput(inputFile);
-    const transform = await getTransform(inputFile);
-    const output = await getOutput(transform, input);
-    try {
-      assert.strictEqual(output, expectedOutput);
-    } catch (err) {
-      ++failed;
-      logError(testName, err);
-      cb();
-      return;
-    }
-    ++passed;
-    if (!isTravisBuild()) {
-      console.log(green('✔'), 'Passed', cyan(testName));
-    }
-    cb();
-  });
+async function runTest(inputFile) {
+  const testName = getTestName(inputFile);
+  const [input, expectedOutput, transform] = await Promise.all([
+    getInput(inputFile),
+    getExpectedOutput(inputFile),
+    getTransform(inputFile, loadOptions(inputFile)),
+  ]);
+  const output = await getOutput(transform, input);
+  try {
+    assert.strictEqual(output, expectedOutput);
+  } catch (err) {
+    ++failed;
+    logError(testName, err);
+    return;
+  }
+  ++passed;
+  logWithoutTimestampLocalDev(green('✔'), 'Passed', cyan(testName));
 }
 
 /**
- * Tests for AMP server custom transforms. Entry point for `gulp server-tests`.
- *
- * @return {!Vinyl}
+ * Tests for AMP server custom transforms. Entry point for `amp server-tests`.
  */
-function serverTests() {
-  buildNewServer();
-  return gulp.src(inputPaths).pipe(runTest()).on('end', reportResult);
+async function serverTests() {
+  await buildNewServer();
+  const inputFiles = globby.sync(inputPaths);
+  for (const inputFile of inputFiles) {
+    await runTest(inputFile);
+  }
+  reportResult();
 }
 
 module.exports = {
diff --git a/build-system/tasks/size.js b/build-system/tasks/size.js
deleted file mode 100644
index ad1a01f792ab5..0000000000000
--- a/build-system/tasks/size.js
+++ /dev/null
@@ -1,252 +0,0 @@
-/**
- * Copyright 2015 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 del = require('del');
-const fs = require('fs');
-const gulp = require('gulp');
-const gzipSize = require('gzip-size');
-const PluginError = require('plugin-error');
-const prettyBytes = require('pretty-bytes');
-const table = require('text-table');
-const through = require('through2');
-
-const tempFolderName = '__size-temp';
-
-const MIN_FILE_SIZE_POS = 0;
-const FILENAME_POS = 2;
-
-// normalized table headers
-const tableHeaders = [
-  ['max', 'min', 'gzip', 'file'],
-  ['---', '---', '---', '---'],
-];
-
-const tableOptions = {
-  align: ['r', 'r', 'r', 'l'],
-  hsep: '   |   ',
-};
-
-/**
- * Returns a number greater than -1 if item is found within the array, else
- * returns -1.
- *
- * @param {!Array<!Array>} rows
- * @param {!fuction(string)} predicate
- * @return {number}
- */
-function findMaxIndexByFilename(rows, predicate) {
-  for (let i = 0; i < rows.length; i++) {
-    const curRow = rows[i];
-    const curFilename = curRow[FILENAME_POS];
-    if (predicate(curFilename)) {
-      return i;
-    }
-  }
-  return -1;
-}
-
-/**
- * Mutates the rows in place and merges the minified file entry as well
- * as its unminified file entry counterpart.
- * @param {!Array<!Array>} rows
- * @param {string} minFilename
- * @param {string} maxFilename
- * @param {boolean} mergeNames
- */
-function normalizeRow(rows, minFilename, maxFilename, mergeNames) {
-  const minIndex = findMaxIndexByFilename(rows, function (filename) {
-    return filename == minFilename;
-  });
-  const maxIndex = findMaxIndexByFilename(rows, function (filename) {
-    return filename == maxFilename;
-  });
-
-  if (maxIndex != -1 && minIndex != -1) {
-    if (mergeNames) {
-      rows[minIndex][FILENAME_POS] += ' / ' + rows[maxIndex][FILENAME_POS];
-    }
-    rows[minIndex].unshift(rows[maxIndex][MIN_FILE_SIZE_POS]);
-    rows.splice(maxIndex, 1);
-  }
-}
-
-/**
- * Call normalizeRow on the core file, integration file and all extensions.
- * @param {!Array<!Array>} rows
- * @return {!Array<!Array>}
- */
-function normalizeRows(rows) {
-  // normalize amp.js
-  normalizeRow(rows, 'v0.js', 'amp.js', true);
-
-  // normalize integration.js
-  normalizeRow(rows, 'current-min/f.js', 'current/integration.js', true);
-
-  normalizeRow(
-    rows,
-    'current-min/ampcontext-v0.js',
-    'current/ampcontext-lib.js',
-    true
-  );
-
-  normalizeRow(
-    rows,
-    'current-min/iframe-transport-client-v0.js',
-    'current/iframe-transport-client-lib.js',
-    true
-  );
-
-  // normalize alp.js
-  normalizeRow(rows, 'alp.js', 'alp.max.js', true);
-
-  // normalize amp-shadow.js
-  normalizeRow(rows, 'shadow-v0.js', 'amp-shadow.js', true);
-
-  normalizeRow(rows, 'amp4ads-v0.js', 'amp-inabox.js', true);
-
-  normalizeRow(rows, 'amp4ads-host-v0.js', 'amp-inabox-host.js', true);
-
-  normalizeRow(rows, 'examiner.js', 'examiner.max.js', true);
-
-  normalizeRow(rows, 'ww.js', 'ww.max.js', true);
-
-  // normalize sw.js
-  normalizeRow(rows, 'sw.js', 'sw.max.js', true);
-  normalizeRow(rows, 'sw-kill.js', 'sw-kill.max.js', true);
-
-  // normalize extensions
-  let curName = null;
-  let i = rows.length;
-  // we are mutating in place... kind of icky but this will do fow now.
-  while (i--) {
-    curName = rows[i][FILENAME_POS];
-    if (/^v0/.test(curName)) {
-      normalizeExtension(rows, curName);
-    }
-  }
-  return rows;
-}
-
-/**
- * Finds the counterpart entry of the extension file, wether it be
- * the unminified or the minified counterpart.
- * @param {!Array<!Array>} rows
- * @param {string} filename
- */
-function normalizeExtension(rows, filename) {
-  const isMax = /\.max\.js$/.test(filename);
-  const counterpartName = filename.replace(
-    /(v0\/.*?)(\.max)?(\.js)$/,
-    function (full, grp1, grp2, grp3) {
-      if (isMax) {
-        return grp1 + grp3;
-      }
-      return full;
-    }
-  );
-
-  if (isMax) {
-    normalizeRow(rows, counterpartName, filename, false);
-  } else {
-    normalizeRow(rows, filename, counterpartName, false);
-  }
-}
-
-/**
- * Through2 transform function - Tracks the original size and the gzipped size
- * of the file content in the rows array. Passes the file and/or err to the
- * callback when finished.
- * @param {!Array<!Array<string>>} rows array to store content size information
- * @param {!File} file File to process
- * @param {string} enc Encoding (not used)
- * @param {function(?Error, !File)} cb Callback function
- */
-function onFileThrough(rows, file, enc, cb) {
-  if (file.isNull()) {
-    cb(null, file);
-    return;
-  }
-
-  if (file.isStream()) {
-    cb(new PluginError('size', 'Stream not supported'));
-    return;
-  }
-
-  rows.push([
-    prettyBytes(file.contents.length),
-    prettyBytes(gzipSize.sync(file.contents)),
-    file.relative,
-  ]);
-
-  cb(null, file);
-}
-
-/**
- * Through2 flush function - combines headers with the rows and generates
- * a text-table of the content size information to log to the console and the
- * test/size.txt logfile.
- *
- * @param {!Array<!Array<string>>} rows array of content size information
- * @param {function()} cb Callback function
- */
-function onFileThroughEnd(rows, cb) {
-  rows = normalizeRows(rows);
-  rows.unshift.apply(rows, tableHeaders);
-  const tbl = table(rows, tableOptions);
-  console /* OK*/
-    .log(tbl);
-  fs.writeFileSync('test/size.txt', tbl);
-  cb();
-}
-
-/**
- * Setup through2 to capture size information using the above transform and
- * flush functions on a stream
- * @return {!Stream} a Writable Stream
- */
-function sizer() {
-  const rows = [];
-  return through.obj(
-    onFileThrough.bind(null, rows),
-    onFileThroughEnd.bind(null, rows)
-  );
-}
-
-/**
- * Pipe the distributable js files through the sizer to get a record of
- * the content size before and after gzip and cleanup any temporary file
- * output from the process.
- */
-function size() {
-  gulp
-    .src([
-      'dist/**/*.js',
-      '!dist/**/*-latest.js',
-      '!dist/**/*check-types.js',
-      '!dist/**/amp-viewer-host.max.js',
-      'dist.3p/{current,current-min}/**/*.js',
-    ])
-    .pipe(sizer())
-    .pipe(gulp.dest(tempFolderName))
-    .on('end', del.bind(null, [tempFolderName]));
-}
-
-module.exports = {
-  size,
-};
-
-size.description = 'Runs a report on artifact size';
diff --git a/build-system/tasks/storybook/OWNERS b/build-system/tasks/storybook/OWNERS
index 5526b7d53b21e..865f2a0152730 100644
--- a/build-system/tasks/storybook/OWNERS
+++ b/build-system/tasks/storybook/OWNERS
@@ -1,14 +1,15 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [
         {name: 'ampproject/wg-infra'},
-        {name: 'ampproject/wg-ui-and-a11y'},
+        {name: 'ampproject/wg-bento'},
+        {name: 'ampproject/wg-components'},
         {name: 'ampproject/wg-performance'},
-        {name: 'wassgha', notify: true},
+        {name: 'alanorozco', notify: true},
       ],
     },
     {
diff --git a/build-system/tasks/storybook/amp-env/decorator.js b/build-system/tasks/storybook/amp-env/decorator.js
deleted file mode 100644
index c149d100b19a1..0000000000000
--- a/build-system/tasks/storybook/amp-env/decorator.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import * as Preact from '../../../../src/preact';
-import {makeDecorator} from '@storybook/addons';
-import flush from 'styled-jsx/server';
-import render from 'preact-render-to-string/jsx';
-
-export default makeDecorator({
-  name: 'withAmpDecorator',
-  parameterName: 'amp',
-  wrapper: (getStory, context) => {
-    const contents = render(getStory(context));
-    const styleElements = flush();
-    const styles = render(
-      <style
-        amp-custom=""
-        dangerouslySetInnerHTML={{
-          __html: styleElements
-            .map((style) => style.props.dangerouslySetInnerHTML.__html)
-            .join('')
-            .replace(/\/\*# sourceMappingURL=.*\*\//g, '')
-            .replace(/\/\*@ sourceURL=.*?\*\//g, ''),
-        }}
-      />
-    );
-
-    const ampHtml = `
-        <!doctype html>
-        <html amp lang="en">
-        <head>
-            <meta charSet="utf-8" />
-            <title>AMP Page Example</title>
-            <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
-            <script async src="https://cdn.ampproject.org/v0.js"></script>
-            <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>
-            ${(context?.parameters?.extensions || []).map(
-              (ext) =>
-                `<script async custom-element="${
-                  ext.name
-                }" src="https://cdn.ampproject.org/v0/${ext.name}-${
-                  ext.version || 0.1
-                }.js"></script>`
-            )}
-            ${styles}
-        </head>
-        <body>
-            ${contents}
-        </body>
-        </html>
-    `;
-    const blob = new Blob([ampHtml], {type: 'text/html'});
-
-    return (
-      <iframe
-        src={URL.createObjectURL(blob)}
-        title={'AMP Document container'}
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          border: 'none',
-          backgroundColor: '#fff',
-        }}
-      />
-    );
-  },
-});
diff --git a/build-system/tasks/storybook/amp-env/main.js b/build-system/tasks/storybook/amp-env/main.js
index 7cec3f412180c..c78b7166bdffb 100644
--- a/build-system/tasks/storybook/amp-env/main.js
+++ b/build-system/tasks/storybook/amp-env/main.js
@@ -14,13 +14,24 @@
  * limitations under the License.
  */
 
-// eslint-disable-next-line local/no-module-exports, no-undef
 module.exports = {
-  stories: ['../../../../extensions/**/*.*/storybook/*.amp.js'],
+  stories: [
+    '../../../../builtins/storybook/*.amp.js',
+    '../../../../extensions/**/*.*/storybook/*.amp.js',
+  ],
   addons: [
-    '@storybook/addon-a11y/register',
-    '@storybook/addon-viewport/register',
-    '@storybook/addon-knobs/register',
-    './amp-env/register.js',
+    // TODO(alanorozco): AMP previews are loaded inside an iframe, so the a11y
+    // addon is not able to inspect the tree inside it. Its results are incorrect,
+    // since it only checks the structure of the outer iframe element.
+    // Enable this once we find a way to inspect the iframe document's tree.
+    // '@storybook/addon-a11y',
+    '@storybook/addon-viewport',
+    '@storybook/addon-knobs',
+    '@ampproject/storybook-addon',
   ],
+  webpackFinal: async (config) => {
+    // Disable entry point size warnings.
+    config.performance.hints = false;
+    return config;
+  },
 };
diff --git a/build-system/tasks/storybook/amp-env/webpack.config.js b/build-system/tasks/storybook/amp-env/webpack.config.js
index dbedbb4f529ed..59e6137905d81 100644
--- a/build-system/tasks/storybook/amp-env/webpack.config.js
+++ b/build-system/tasks/storybook/amp-env/webpack.config.js
@@ -15,20 +15,20 @@
  */
 const path = require('path');
 
-module.exports = {
-  resolveLoader: {
+module.exports = ({config}) => {
+  config.resolveLoader = {
     modules: [
       path.join(__dirname, '../node_modules'),
       path.join(__dirname, '../../../../node_modules'),
     ],
-  },
-  resolve: {
+  };
+  config.resolve = {
     modules: [
       path.join(__dirname, '../node_modules'),
       path.join(__dirname, '../../../../node_modules'),
     ],
-  },
-  module: {
+  };
+  config.module = {
     rules: [
       {
         test: /\.jsx?$/,
@@ -36,6 +36,13 @@ module.exports = {
         exclude: /node_modules/,
         query: {
           presets: [
+            [
+              '@babel/preset-env',
+              {
+                bugfixes: true,
+                targets: {'browsers': ['Last 2 versions']},
+              },
+            ],
             [
               '@babel/preset-react',
               {
@@ -48,5 +55,6 @@ module.exports = {
         },
       },
     ],
-  },
+  };
+  return config;
 };
diff --git a/build-system/tasks/storybook/index.js b/build-system/tasks/storybook/index.js
index 4bfbc23e79105..2675d6c6c1217 100644
--- a/build-system/tasks/storybook/index.js
+++ b/build-system/tasks/storybook/index.js
@@ -16,53 +16,111 @@
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
-const {exec} = require('../../common/exec');
-const {installPackages} = require('../../common/utils');
+const path = require('path');
+const {createCtrlcHandler} = require('../../common/ctrlcHandler');
+const {cyan} = require('../../common/colors');
+const {defaultTask: runAmpDevBuildServer} = require('../default-task');
+const {exec, execScriptAsync} = require('../../common/exec');
+const {getBaseUrl} = require('../pr-deploy-bot-utils');
+const {isCiBuild} = require('../../common/ci');
+const {isPullRequestBuild} = require('../../common/ci');
+const {log} = require('../../common/logging');
+const {writeFileSync} = require('fs-extra');
 
-let storybookArgs = '--quiet';
-if (argv.port) {
-  storybookArgs += ` -p ${argv.port}`;
-}
+const ENV_PORTS = {
+  amp: 9001,
+  preact: 9002,
+};
 
-function runStorybook(mode) {
-  // install storybook-specific modules
-  installPackages(__dirname);
+const repoDir = path.join(__dirname, '../../..');
 
-  exec(
-    `./node_modules/.bin/start-storybook -c ./${mode}-env ${storybookArgs}`,
-    {
-      'stdio': [null, process.stdout, process.stderr],
-      cwd: __dirname,
-      env: process.env,
-    }
-  );
+/**
+ * @param {string} env 'amp' or 'preact'
+ * @return {string}
+ */
+const envConfigDir = (env) => path.join(__dirname, `${env}-env`);
+
+/**
+ * @param {string} env 'amp' or 'preact'
+ */
+function launchEnv(env) {
+  log(`Launching storybook for the ${cyan(env)} environment...`);
+  const {'storybook_port': port = ENV_PORTS[env]} = argv;
+  execScriptAsync(
+    [
+      './node_modules/.bin/start-storybook',
+      `--config-dir ${envConfigDir(env)}`,
+      `--static-dir ${repoDir}/`,
+      `--port ${port}`,
+      '--quiet',
+      isCiBuild() ? '--ci' : '',
+    ].join(' '),
+    {cwd: __dirname, stdio: 'inherit'}
+  ).on('error', () => {
+    throw new Error('Launch failed');
+  });
 }
 
 /**
- * Simple wrapper around the storybook start script
- * for AMP components (HTML Environment)
+ * @param {string} env 'amp' or 'preact'
  */
-function storybookAmp() {
-  runStorybook('amp' /** mode */);
+function buildEnv(env) {
+  const configDir = envConfigDir(env);
+
+  if (env === 'amp' && isPullRequestBuild()) {
+    // Allows PR deploys to reference built binaries.
+    writeFileSync(
+      `${configDir}/preview.js`,
+      // If you change this JS template, make sure to JSON.stringify every
+      // dynamic value. This prevents XSS and other types of garbling.
+      `// DO NOT${' '}SUBMIT.
+       // This preview.js file was generated for a specific PR build.
+       export const parameters = (${JSON.stringify({
+         ampBaseUrlOptions: [`${getBaseUrl()}/dist`],
+       })});`
+    );
+  }
+  log(`Building storybook for the ${cyan(env)} environment...`);
+  const result = exec(
+    [
+      './node_modules/.bin/build-storybook',
+      `--config-dir ${configDir}`,
+      `--output-dir ${repoDir}/examples/storybook/${env}`,
+      '--quiet',
+      `--loglevel ${isCiBuild() ? 'warn' : 'info'}`,
+    ].join(' '),
+    {cwd: __dirname, stdio: 'inherit'}
+  );
+  if (result.status != 0) {
+    throw new Error('Build failed');
+  }
 }
 
 /**
- * Simple wrapper around the storybook start script.
+ * @return {Promise<void>}
  */
-function storybookPreact() {
-  runStorybook('preact' /** mode */);
+async function storybook() {
+  const {build = false, 'storybook_env': env = 'amp,preact'} = argv;
+  const envs = env.split(',');
+  if (!build && envs.includes('amp')) {
+    await runAmpDevBuildServer();
+  }
+  if (!build) {
+    createCtrlcHandler('storybook');
+  }
+  envs.map(build ? buildEnv : launchEnv);
 }
 
 module.exports = {
-  storybookAmp,
-  storybookPreact,
+  storybook,
 };
 
-storybookPreact.description =
-  'Isolated testing and development for AMP Bento components in Preact mode.';
-storybookAmp.description =
-  'Isolated testing and development for AMPHTML components.';
+storybook.description = 'Isolated testing and development for AMP components.';
 
-storybookPreact.flags = storybookAmp.flags = {
-  'port': '  Change the port that the storybook dashboard is served from',
+storybook.flags = {
+  'build':
+    'Builds a static web application, as described in https://storybook.js.org/docs/react/workflows/publish-storybook',
+  'storybook_env':
+    "Set environment(s) to run Storybook, either 'amp', 'preact' or a list as 'amp,preact'",
+  'storybook_port': 'Set port from which to run the Storybook dashboard.',
 };
diff --git a/build-system/tasks/storybook/package-lock.json b/build-system/tasks/storybook/package-lock.json
new file mode 100644
index 0000000000000..fec3d606e467b
--- /dev/null
+++ b/build-system/tasks/storybook/package-lock.json
@@ -0,0 +1,12024 @@
+{
+  "name": "amp-storybook",
+  "version": "0.1.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@ampproject/storybook-addon": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@ampproject/storybook-addon/-/storybook-addon-1.1.9.tgz",
+      "integrity": "sha512-msn6ElmpnvvEJ6xc7AOfdWmOrIHwvd29SZmbm/NUVXfvrUy9W9bS+t62/g0N2R3CrNG/tvH7f54DFjy8u9Xp5w==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-api": "^5.3.19",
+        "@types/styled-jsx": "^2.2.8",
+        "preact": "^10.4.1",
+        "preact-render-to-string": "^5.1.7",
+        "react-dom": "^16.13.1",
+        "react-pdf": "^4.0.5",
+        "styled-jsx": "^3.2.5"
+      },
+      "dependencies": {
+        "@storybook/addons": {
+          "version": "5.3.21",
+          "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-5.3.21.tgz",
+          "integrity": "sha512-Ji/21WADTLVbTbiKcZ64BcL0Es+h1Afxx3kNmGJqPSTUYroCwIFCT9mUzCqU6G+YyWaISAmTii5UJkTwMkChwA==",
+          "dev": true,
+          "requires": {
+            "@storybook/api": "5.3.21",
+            "@storybook/channels": "5.3.21",
+            "@storybook/client-logger": "5.3.21",
+            "@storybook/core-events": "5.3.21",
+            "core-js": "^3.0.1",
+            "global": "^4.3.2",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "@storybook/api": {
+          "version": "5.3.21",
+          "resolved": "https://registry.npmjs.org/@storybook/api/-/api-5.3.21.tgz",
+          "integrity": "sha512-K1o4an/Rx8daKRDooks6qzN6ZGyqizeacZZbair3F8CsSfTgrr2zCcf9pgKojLQa9koEmMHlcdb2KnS+GwPEgA==",
+          "dev": true,
+          "requires": {
+            "@reach/router": "^1.2.1",
+            "@storybook/channels": "5.3.21",
+            "@storybook/client-logger": "5.3.21",
+            "@storybook/core-events": "5.3.21",
+            "@storybook/csf": "0.0.1",
+            "@storybook/router": "5.3.21",
+            "@storybook/theming": "5.3.21",
+            "@types/reach__router": "^1.2.3",
+            "core-js": "^3.0.1",
+            "fast-deep-equal": "^2.0.1",
+            "global": "^4.3.2",
+            "lodash": "^4.17.15",
+            "memoizerific": "^1.11.3",
+            "prop-types": "^15.6.2",
+            "react": "^16.8.3",
+            "semver": "^6.0.0",
+            "shallow-equal": "^1.1.0",
+            "store2": "^2.7.1",
+            "telejson": "^3.2.0",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "@storybook/channel-postmessage": {
+          "version": "5.3.21",
+          "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-5.3.21.tgz",
+          "integrity": "sha512-CfoP7aEbZtJ35R9zeujMRdIwprETUi+Ve+y84DhXYQ2uJ0rR3vO4zHLZnxMMyJ5VnYOfuO042uch07+EKBz40Q==",
+          "dev": true,
+          "requires": {
+            "@storybook/channels": "5.3.21",
+            "@storybook/client-logger": "5.3.21",
+            "core-js": "^3.0.1",
+            "global": "^4.3.2",
+            "telejson": "^3.2.0"
+          }
+        },
+        "@storybook/channels": {
+          "version": "5.3.21",
+          "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-5.3.21.tgz",
+          "integrity": "sha512-OXoFs9XtBVg/cCk6lYMrxkzaNlJRf54ABdorp7YAAj7S9tRL1JxOZHxmjNQwEoiRvssmem2rAWtEAxfuEANsAA==",
+          "dev": true,
+          "requires": {
+            "core-js": "^3.0.1"
+          }
+        },
+        "@storybook/client-api": {
+          "version": "5.3.21",
+          "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-5.3.21.tgz",
+          "integrity": "sha512-vS4DfA2Avvl7JNQymO4e3RUNoTWIGVfZJ70Irnd6PTAZNojbCXTYuigDavrmyf83F3g5rQpwmSAPjuoi/X/FRA==",
+          "dev": true,
+          "requires": {
+            "@storybook/addons": "5.3.21",
+            "@storybook/channel-postmessage": "5.3.21",
+            "@storybook/channels": "5.3.21",
+            "@storybook/client-logger": "5.3.21",
+            "@storybook/core-events": "5.3.21",
+            "@storybook/csf": "0.0.1",
+            "@types/webpack-env": "^1.15.0",
+            "core-js": "^3.0.1",
+            "eventemitter3": "^4.0.0",
+            "global": "^4.3.2",
+            "is-plain-object": "^3.0.0",
+            "lodash": "^4.17.15",
+            "memoizerific": "^1.11.3",
+            "qs": "^6.6.0",
+            "stable": "^0.1.8",
+            "ts-dedent": "^1.1.0",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "@storybook/client-logger": {
+          "version": "5.3.21",
+          "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-5.3.21.tgz",
+          "integrity": "sha512-OzQkwpZ5SK9cXD9Mv6lxPGPot+hSZvnkEW12kpt1AHfJz4ET26YTDOI3oetPsjfRJo6qYLeQX8+wF7rklfXbzA==",
+          "dev": true,
+          "requires": {
+            "core-js": "^3.0.1"
+          }
+        },
+        "@storybook/core-events": {
+          "version": "5.3.21",
+          "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-5.3.21.tgz",
+          "integrity": "sha512-/Zsm1sKAh6pzQv8jQUmuhM7nuM01ZljIRKy8p2HjPNlMjDB5yaRkBfyeAUXUg+qXNI6aHVWa4jGdPEdwwY4oLA==",
+          "dev": true,
+          "requires": {
+            "core-js": "^3.0.1"
+          }
+        },
+        "@storybook/router": {
+          "version": "5.3.21",
+          "resolved": "https://registry.npmjs.org/@storybook/router/-/router-5.3.21.tgz",
+          "integrity": "sha512-c29m5UikK5Q1lyd6FltOGFhIcpd6PIb855YS3OUNe3F6ZA1tfJ+aNKrCBc65d1c+fvCGG76dYYYv0RvwEmKXXg==",
+          "dev": true,
+          "requires": {
+            "@reach/router": "^1.2.1",
+            "@storybook/csf": "0.0.1",
+            "@types/reach__router": "^1.2.3",
+            "core-js": "^3.0.1",
+            "global": "^4.3.2",
+            "lodash": "^4.17.15",
+            "memoizerific": "^1.11.3",
+            "qs": "^6.6.0",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "@storybook/theming": {
+          "version": "5.3.21",
+          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-5.3.21.tgz",
+          "integrity": "sha512-FZbxjizqdO9lV5LUixPio/7+6UdPiswCzTJn8Hcot9uwwgfnrViRdN7xyjmSYRqv9nHP3OlYbtdeCAgZ4aPq8g==",
+          "dev": true,
+          "requires": {
+            "@emotion/core": "^10.0.20",
+            "@emotion/styled": "^10.0.17",
+            "@storybook/client-logger": "5.3.21",
+            "core-js": "^3.0.1",
+            "deep-object-diff": "^1.1.0",
+            "emotion-theming": "^10.0.19",
+            "global": "^4.3.2",
+            "memoizerific": "^1.11.3",
+            "polished": "^3.3.1",
+            "prop-types": "^15.7.2",
+            "resolve-from": "^5.0.0",
+            "ts-dedent": "^1.1.0"
+          }
+        },
+        "fast-deep-equal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
+          "dev": true
+        },
+        "is-plain-object": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
+          "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==",
+          "dev": true
+        },
+        "polished": {
+          "version": "3.7.1",
+          "resolved": "https://registry.npmjs.org/polished/-/polished-3.7.1.tgz",
+          "integrity": "sha512-/QgHrNGYwIA4mwxJ/7FSvalUJsm7KNfnXiScVSEG2Xa5qxDeBn4nmdjN2pW00mkM2Tts64ktc47U8F7Ed1BRAA==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.12.5"
+          }
+        },
+        "telejson": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/telejson/-/telejson-3.3.0.tgz",
+          "integrity": "sha512-er08AylQ+LEbDLp1GRezORZu5wKOHaBczF6oYJtgC3Idv10qZ8A3p6ffT+J5BzDKkV9MqBvu8HAKiIIOp6KJ2w==",
+          "dev": true,
+          "requires": {
+            "@types/is-function": "^1.0.0",
+            "global": "^4.4.0",
+            "is-function": "^1.0.1",
+            "is-regex": "^1.0.4",
+            "is-symbol": "^1.0.3",
+            "isobject": "^4.0.0",
+            "lodash": "^4.17.15",
+            "memoizerific": "^1.11.3"
+          }
+        },
+        "ts-dedent": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-1.2.0.tgz",
+          "integrity": "sha512-6zSJp23uQI+Txyz5LlXMXAHpUhY4Hi0oluXny0OgIR7g/Cromq4vDBnhtbBdyIV34g0pgwxUvnvg+jLJe4c1NA==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/code-frame": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+      "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.12.13"
+      }
+    },
+    "@babel/compat-data": {
+      "version": "7.13.15",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.13.15.tgz",
+      "integrity": "sha512-ltnibHKR1VnrU4ymHyQ/CXtNXI6yZC0oJThyW78Hft8XndANwi+9H+UIklBDraIjFEJzw8wmcM427oDd9KS5wA==",
+      "dev": true
+    },
+    "@babel/core": {
+      "version": "7.14.3",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.3.tgz",
+      "integrity": "sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/generator": "^7.14.3",
+        "@babel/helper-compilation-targets": "^7.13.16",
+        "@babel/helper-module-transforms": "^7.14.2",
+        "@babel/helpers": "^7.14.0",
+        "@babel/parser": "^7.14.3",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.14.2",
+        "@babel/types": "^7.14.2",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.1.2",
+        "semver": "^6.3.0",
+        "source-map": "^0.5.0"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.14.3",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.3.tgz",
+          "integrity": "sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.14.2",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
+          "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.2.tgz",
+          "integrity": "sha512-OznJUda/soKXv0XhpvzGWDnml4Qnwp16GN+D/kZIdLsWoHj05kyu8Rm5kXmMef+rVJZ0+4pSGLkeixdqNUATDA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "^7.13.12",
+            "@babel/helper-replace-supers": "^7.13.12",
+            "@babel/helper-simple-access": "^7.13.12",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "@babel/template": "^7.12.13",
+            "@babel/traverse": "^7.14.2",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+          "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
+          "dev": true
+        },
+        "@babel/parser": {
+          "version": "7.14.3",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.3.tgz",
+          "integrity": "sha512-7MpZDIfI7sUC5zWo2+foJ50CSI5lcqDehZ0lVgIhSi4bFEk94fLAKlF3Q0nzSQQ+ca0lm+O6G9ztKVBeu8PMRQ==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz",
+          "integrity": "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.14.2",
+            "@babel/helper-function-name": "^7.14.2",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.14.2",
+            "@babel/types": "^7.14.2",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.2.tgz",
+          "integrity": "sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/generator": {
+      "version": "7.13.9",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.9.tgz",
+      "integrity": "sha512-mHOOmY0Axl/JCTkxTU6Lf5sWOg/v8nUa+Xkt4zMTftX0wqmb6Sh7J8gvcehBw7q0AhrhAR+FDacKjCZ2X8K+Sw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.13.0",
+        "jsesc": "^2.5.1",
+        "source-map": "^0.5.0"
+      }
+    },
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz",
+      "integrity": "sha512-7YXfX5wQ5aYM/BOlbSccHDbuXXFPxeoUmfWtz8le2yTkTZc+BxsiEnENFoi2SlmA8ewDkG2LgIMIVzzn2h8kfw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.12.13.tgz",
+      "integrity": "sha512-CZOv9tGphhDRlVjVkAgm8Nhklm9RzSmWpX2my+t7Ua/KT616pEzXsQCjinzvkRvHWJ9itO4f296efroX23XCMA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-explode-assignable-expression": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-compilation-targets": {
+      "version": "7.13.16",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.16.tgz",
+      "integrity": "sha512-3gmkYIrpqsLlieFwjkGgLaSHmhnvlAYzZLlYVjlW+QwI+1zE17kGxuJGmIqDQdYp56XdmGeD+Bswx0UTyG18xA==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.13.15",
+        "@babel/helper-validator-option": "^7.12.17",
+        "browserslist": "^4.14.5",
+        "semver": "^6.3.0"
+      }
+    },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.13.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz",
+      "integrity": "sha512-ays0I7XYq9xbjCSvT+EvysLgfc3tOkwCULHjrnscGT3A9qD4sk3wXnJ3of0MAWsWGjdinFvajHU2smYuqXKMrw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/helper-member-expression-to-functions": "^7.13.0",
+        "@babel/helper-optimise-call-expression": "^7.12.13",
+        "@babel/helper-replace-supers": "^7.13.0",
+        "@babel/helper-split-export-declaration": "^7.12.13"
+      }
+    },
+    "@babel/helper-create-regexp-features-plugin": {
+      "version": "7.12.17",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.17.tgz",
+      "integrity": "sha512-p2VGmBu9oefLZ2nQpgnEnG0ZlRPvL8gAGvPUMQwUdaE8k49rOMuZpOwdQoy5qJf6K8jL3bcAMhVUlHAjIgJHUg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.12.13",
+        "regexpu-core": "^4.7.1"
+      }
+    },
+    "@babel/helper-define-polyfill-provider": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.0.tgz",
+      "integrity": "sha512-JT8tHuFjKBo8NnaUbblz7mIu1nnvUDiHVjXXkulZULyidvo/7P6TY7+YqpV37IfF+KUFxmlK04elKtGKXaiVgw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-compilation-targets": "^7.13.0",
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/traverse": "^7.13.0",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2",
+        "semver": "^6.1.2"
+      }
+    },
+    "@babel/helper-explode-assignable-expression": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.13.0.tgz",
+      "integrity": "sha512-qS0peLTDP8kOisG1blKbaoBg/o9OSa1qoumMjTK5pM+KDTtpxpsiubnCGP34vK8BXGcb2M9eigwgvoJryrzwWA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.13.0"
+      }
+    },
+    "@babel/helper-function-name": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+      "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-get-function-arity": "^7.12.13",
+        "@babel/template": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-get-function-arity": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+      "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.13.16",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.13.16.tgz",
+      "integrity": "sha512-1eMtTrXtrwscjcAeO4BVK+vvkxaLJSPFz1w1KLawz6HLNi9bPFGBNwwDyVfiu1Tv/vRRFYfoGaKhmAQPGPn5Wg==",
+      "dev": true,
+      "requires": {
+        "@babel/traverse": "^7.13.15",
+        "@babel/types": "^7.13.16"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.13.16",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.16.tgz",
+          "integrity": "sha512-grBBR75UnKOcUWMp8WoDxNsWCFl//XCK6HWTrBQKTr5SV9f5g0pNOjdyzi/DTBv12S9GnYPInIXQBTky7OXEMg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.13.16",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.13.16",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.16.tgz",
+          "integrity": "sha512-6bAg36mCwuqLO0hbR+z7PHuqWiCeP7Dzg73OpQwsAB1Eb8HnGEz5xYBzCfbu+YjoaJsJs+qheDxVAuqbt3ILEw==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.13.17",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.17.tgz",
+          "integrity": "sha512-BMnZn0R+X6ayqm3C3To7o1j7Q020gWdqdyP50KEoVqaCO2c/Im7sYZSmVgvefp8TTMQ+9CtwuBp0Z1CZ8V3Pvg==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.13.16",
+            "@babel/helper-function-name": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.13.16",
+            "@babel/types": "^7.13.17",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.13.17",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.17.tgz",
+          "integrity": "sha512-RawydLgxbOPDlTLJNtoIypwdmAy//uQIzlKt2+iBiJaRlVuI6QLUxVAyWGNfOzp8Yu4L4lLIacoCyTNtpb4wiA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-member-expression-to-functions": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
+      "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.13.12"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
+      "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.13.12"
+      }
+    },
+    "@babel/helper-module-transforms": {
+      "version": "7.13.14",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.13.14.tgz",
+      "integrity": "sha512-QuU/OJ0iAOSIatyVZmfqB0lbkVP0kDRiKj34xy+QNsnVZi/PA6BoSoreeqnxxa9EHFAIL0R9XOaAR/G9WlIy5g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.13.12",
+        "@babel/helper-replace-supers": "^7.13.12",
+        "@babel/helper-simple-access": "^7.13.12",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "@babel/helper-validator-identifier": "^7.12.11",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.13.13",
+        "@babel/types": "^7.13.14"
+      }
+    },
+    "@babel/helper-optimise-call-expression": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+      "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-plugin-utils": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz",
+      "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==",
+      "dev": true
+    },
+    "@babel/helper-remap-async-to-generator": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.13.0.tgz",
+      "integrity": "sha512-pUQpFBE9JvC9lrQbpX0TmeNIy5s7GnZjna2lhhcHC7DzgBs6fWn722Y5cfwgrtrqc7NAJwMvOa0mKhq6XaE4jg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.12.13",
+        "@babel/helper-wrap-function": "^7.13.0",
+        "@babel/types": "^7.13.0"
+      }
+    },
+    "@babel/helper-replace-supers": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz",
+      "integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-member-expression-to-functions": "^7.13.12",
+        "@babel/helper-optimise-call-expression": "^7.12.13",
+        "@babel/traverse": "^7.13.0",
+        "@babel/types": "^7.13.12"
+      }
+    },
+    "@babel/helper-simple-access": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz",
+      "integrity": "sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.13.12"
+      }
+    },
+    "@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz",
+      "integrity": "sha512-Mf5AUuhG1/OCChOJ/HcADmvcHM42WJockombn8ATJG3OnyiSxBK/Mm5x78BQWvmtXZKHgbjdGL2kin/HOLlZGA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.1"
+      }
+    },
+    "@babel/helper-split-export-declaration": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+      "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+      "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==",
+      "dev": true
+    },
+    "@babel/helper-validator-option": {
+      "version": "7.12.17",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz",
+      "integrity": "sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw==",
+      "dev": true
+    },
+    "@babel/helper-wrap-function": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.13.0.tgz",
+      "integrity": "sha512-1UX9F7K3BS42fI6qd2A4BjKzgGjToscyZTdp1DjknHLCIvpgne6918io+aL5LXFcER/8QWiwpoY902pVEqgTXA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.13.0",
+        "@babel/types": "^7.13.0"
+      }
+    },
+    "@babel/helpers": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.0.tgz",
+      "integrity": "sha512-+ufuXprtQ1D1iZTO/K9+EBRn+qPWMJjZSw/S0KlFrxCw4tkrzv9grgpDHkY9MeQTjTY8i2sp7Jep8DfU6tN9Mg==",
+      "dev": true,
+      "requires": {
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.14.0",
+        "@babel/types": "^7.14.0"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.14.3",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.3.tgz",
+          "integrity": "sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.14.2",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
+          "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+          "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
+          "dev": true
+        },
+        "@babel/parser": {
+          "version": "7.14.3",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.3.tgz",
+          "integrity": "sha512-7MpZDIfI7sUC5zWo2+foJ50CSI5lcqDehZ0lVgIhSi4bFEk94fLAKlF3Q0nzSQQ+ca0lm+O6G9ztKVBeu8PMRQ==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz",
+          "integrity": "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.14.2",
+            "@babel/helper-function-name": "^7.14.2",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.14.2",
+            "@babel/types": "^7.14.2",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.2.tgz",
+          "integrity": "sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.13.10",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.13.10.tgz",
+      "integrity": "sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.12.11",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@babel/parser": {
+      "version": "7.13.13",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.13.tgz",
+      "integrity": "sha512-OhsyMrqygfk5v8HmWwOzlYjJrtLaFhF34MrfG/Z73DgYCI6ojNUTUp2TYbtnjo8PegeJp12eamsNettCQjKjVw==",
+      "dev": true
+    },
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.13.12.tgz",
+      "integrity": "sha512-d0u3zWKcoZf379fOeJdr1a5WPDny4aOFZ6hlfKivgK0LY7ZxNfoaHL2fWwdGtHyVvra38FC+HVYkO+byfSA8AQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1",
+        "@babel/plugin-proposal-optional-chaining": "^7.13.12"
+      }
+    },
+    "@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.13.15",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.13.15.tgz",
+      "integrity": "sha512-VapibkWzFeoa6ubXy/NgV5U2U4MVnUlvnx6wo1XhlsaTrLYWE0UFpDQsVrmn22q5CzeloqJ8gEMHSKxuee6ZdA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-remap-async-to-generator": "^7.13.0",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      }
+    },
+    "@babel/plugin-proposal-class-properties": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.13.0.tgz",
+      "integrity": "sha512-KnTDjFNC1g+45ka0myZNvSBFLhNCLN+GeGYLDEA8Oq7MZ6yMgfLoIRh86GRT0FjtJhZw8JyUskP9uvj5pHM9Zg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.13.0",
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-proposal-decorators": {
+      "version": "7.13.15",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.13.15.tgz",
+      "integrity": "sha512-ibAMAqUm97yzi+LPgdr5Nqb9CMkeieGHvwPg1ywSGjZrZHQEGqE01HmOio8kxRpA/+VtOHouIVy2FMpBbtltjA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.13.11",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-decorators": "^7.12.13"
+      }
+    },
+    "@babel/plugin-proposal-dynamic-import": {
+      "version": "7.13.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.13.8.tgz",
+      "integrity": "sha512-ONWKj0H6+wIRCkZi9zSbZtE/r73uOhMVHh256ys0UzfM7I3d4n+spZNWjOnJv2gzopumP2Wxi186vI8N0Y2JyQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-export-default-from": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.12.13.tgz",
+      "integrity": "sha512-idIsBT+DGXdOHL82U+8bwX4goHm/z10g8sGGrQroh+HCRcm7mDv/luaGdWJQMTuCX2FsdXS7X0Nyyzp4znAPJA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/plugin-syntax-export-default-from": "^7.12.13"
+      }
+    },
+    "@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.12.13.tgz",
+      "integrity": "sha512-INAgtFo4OnLN3Y/j0VwAgw3HDXcDtX+C/erMvWzuV9v71r7urb6iyMXu7eM9IgLr1ElLlOkaHjJ0SbCmdOQ3Iw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-json-strings": {
+      "version": "7.13.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.13.8.tgz",
+      "integrity": "sha512-w4zOPKUFPX1mgvTmL/fcEqy34hrQ1CRcGxdphBc6snDnnqJ47EZDIyop6IwXzAC8G916hsIuXB2ZMBCExC5k7Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.13.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.13.8.tgz",
+      "integrity": "sha512-aul6znYB4N4HGweImqKn59Su9RS8lbUIqxtXTOcAGtNIDczoEFv+l1EhmX8rUBp3G1jMjKJm8m0jXVp63ZpS4A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.13.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.13.8.tgz",
+      "integrity": "sha512-iePlDPBn//UhxExyS9KyeYU7RM9WScAG+D3Hhno0PLJebAEpDZMocbDe64eqynhNAnwz/vZoL/q/QB2T1OH39A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-numeric-separator": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.13.tgz",
+      "integrity": "sha512-O1jFia9R8BUCl3ZGB7eitaAPu62TXJRHn7rh+ojNERCFyqRwJMTmhz+tJ+k0CwI6CLjX/ee4qW74FSqlq9I35w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.13.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.13.8.tgz",
+      "integrity": "sha512-DhB2EuB1Ih7S3/IRX5AFVgZ16k3EzfRbq97CxAVI1KSYcW+lexV8VZb7G7L8zuPVSdQMRn0kiBpf/Yzu9ZKH0g==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.13.8",
+        "@babel/helper-compilation-targets": "^7.13.8",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.13.0"
+      }
+    },
+    "@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.13.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.13.8.tgz",
+      "integrity": "sha512-0wS/4DUF1CuTmGo+NiaHfHcVSeSLj5S3e6RivPTg/2k3wOv3jO35tZ6/ZWsQhQMvdgI7CwphjQa/ccarLymHVA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-optional-chaining": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.13.12.tgz",
+      "integrity": "sha512-fcEdKOkIB7Tf4IxrgEVeFC4zeJSTr78no9wTdBuZZbqF64kzllU0ybo2zrzm7gUQfxGhBgq4E39oRs8Zx/RMYQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-private-methods": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.13.0.tgz",
+      "integrity": "sha512-MXyyKQd9inhx1kDYPkFRVOBXQ20ES8Pto3T7UZ92xj2mY0EVD8oAVzeyYuVfy/mxAdTSIayOvg+aVzcHV2bn6Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.13.0",
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.13.tgz",
+      "integrity": "sha512-XyJmZidNfofEkqFV5VC/bLabGmO5QzenPO/YOfGuEbgU+2sSwMmio3YLb4WtBgcmmdwZHyVyv8on77IUjQ5Gvg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-decorators": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.12.13.tgz",
+      "integrity": "sha512-Rw6aIXGuqDLr6/LoBBYE57nKOzQpz/aDkKlMqEwH+Vp0MXbG6H/TfRjaY343LKxzAKAMXIHsQ8JzaZKuDZ9MwA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-export-default-from": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.12.13.tgz",
+      "integrity": "sha512-gVry0zqoums0hA+EniCYK3gABhjYSLX1dVuwYpPw9DrLNA4/GovXySHVg4FGRsZht09ON/5C2NVx3keq+qqVGQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      }
+    },
+    "@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz",
+      "integrity": "sha512-d4HM23Q1K7oq/SLNmG6mRt85l2csmQ0cHRaxRXjKW0YFdEXqlZ5kzFQKH5Uc3rDJECgu+yCRgPkG04Mm98R/1g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-top-level-await": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.12.13.tgz",
+      "integrity": "sha512-A81F9pDwyS7yM//KwbCSDqy3Uj4NMIurtplxphWxoYtNPov7cJsDkAFNNyVlIZ3jwGycVsurZ+LtOA8gZ376iQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-typescript": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz",
+      "integrity": "sha512-cHP3u1JiUiG2LFDKbXnwVad81GvfyIOmCD6HIEId6ojrY0Drfy2q1jw7BwN7dE84+kTnBjLkXoL3IEy/3JPu2w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-arrow-functions": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.13.0.tgz",
+      "integrity": "sha512-96lgJagobeVmazXFaDrbmCLQxBysKu7U6Do3mLsx27gf5Dk85ezysrs2BZUpXD703U/Su1xTBDxxar2oa4jAGg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-async-to-generator": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.13.0.tgz",
+      "integrity": "sha512-3j6E004Dx0K3eGmhxVJxwwI89CTJrce7lg3UrtFuDAVQ/2+SJ/h/aSFOeE6/n0WB1GsOffsJp6MnPQNQ8nmwhg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-remap-async-to-generator": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.13.tgz",
+      "integrity": "sha512-zNyFqbc3kI/fVpqwfqkg6RvBgFpC4J18aKKMmv7KdQ/1GgREapSJAykLMVNwfRGO3BtHj3YQZl8kxCXPcVMVeg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-block-scoping": {
+      "version": "7.13.16",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.13.16.tgz",
+      "integrity": "sha512-ad3PHUxGnfWF4Efd3qFuznEtZKoBp0spS+DgqzVzRPV7urEBvPLue3y2j80w4Jf2YLzZHj8TOv/Lmvdmh3b2xg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-classes": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.13.0.tgz",
+      "integrity": "sha512-9BtHCPUARyVH1oXGcSJD3YpsqRLROJx5ZNP6tN5vnk17N0SVf9WCtf8Nuh1CFmgByKKAIMstitKduoCmsaDK5g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.12.13",
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/helper-optimise-call-expression": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-replace-supers": "^7.13.0",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/plugin-transform-computed-properties": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.13.0.tgz",
+      "integrity": "sha512-RRqTYTeZkZAz8WbieLTvKUEUxZlUTdmL5KGMyZj7FnMfLNKV4+r5549aORG/mgojRmFlQMJDUupwAMiF2Q7OUg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-destructuring": {
+      "version": "7.13.17",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.13.17.tgz",
+      "integrity": "sha512-UAUqiLv+uRLO+xuBKKMEpC+t7YRNVRqBsWWq1yKXbBZBje/t3IXCiSinZhjn/DC3qzBfICeYd2EFGEbHsh5RLA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-dotall-regex": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.13.tgz",
+      "integrity": "sha512-foDrozE65ZFdUC2OfgeOCrEPTxdB3yjqxpXh8CH+ipd9CHd4s/iq81kcUpyH8ACGNEPdFqbtzfgzbT/ZGlbDeQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-duplicate-keys": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.13.tgz",
+      "integrity": "sha512-NfADJiiHdhLBW3pulJlJI2NB0t4cci4WTZ8FtdIuNc2+8pslXdPtRRAEWqUY+m9kNOk2eRYbTAOipAxlrOcwwQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.13.tgz",
+      "integrity": "sha512-fbUelkM1apvqez/yYx1/oICVnGo2KM5s63mhGylrmXUxK/IAXSIf87QIxVfZldWf4QsOafY6vV3bX8aMHSvNrA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-for-of": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.13.0.tgz",
+      "integrity": "sha512-IHKT00mwUVYE0zzbkDgNRP6SRzvfGCYsOxIRz8KsiaaHCcT9BWIkO+H9QRJseHBLOGBZkHUdHiqj6r0POsdytg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-function-name": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.13.tgz",
+      "integrity": "sha512-6K7gZycG0cmIwwF7uMK/ZqeCikCGVBdyP2J5SKNCXO5EOHcqi+z7Jwf8AmyDNcBgxET8DrEtCt/mPKPyAzXyqQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-literals": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.13.tgz",
+      "integrity": "sha512-FW+WPjSR7hiUxMcKqyNjP05tQ2kmBCdpEpZHY1ARm96tGQCCBvXKnpjILtDplUnJ/eHZ0lALLM+d2lMFSpYJrQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-member-expression-literals": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.12.13.tgz",
+      "integrity": "sha512-kxLkOsg8yir4YeEPHLuO2tXP9R/gTjpuTOjshqSpELUN3ZAg2jfDnKUvzzJxObun38sw3wm4Uu69sX/zA7iRvg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-modules-amd": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.13.0.tgz",
+      "integrity": "sha512-EKy/E2NHhY/6Vw5d1k3rgoobftcNUmp9fGjb9XZwQLtTctsRBOTRO7RHHxfIky1ogMN5BxN7p9uMA3SzPfotMQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.13.0",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-commonjs": {
+      "version": "7.13.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.13.8.tgz",
+      "integrity": "sha512-9QiOx4MEGglfYZ4XOnU79OHr6vIWUakIj9b4mioN8eQIoEh+pf5p/zEB36JpDFWA12nNMiRf7bfoRvl9Rn79Bw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.13.0",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-simple-access": "^7.12.13",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-systemjs": {
+      "version": "7.13.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.13.8.tgz",
+      "integrity": "sha512-hwqctPYjhM6cWvVIlOIe27jCIBgHCsdH2xCJVAYQm7V5yTMoilbVMi9f6wKg0rpQAOn6ZG4AOyvCqFF/hUh6+A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-hoist-variables": "^7.13.0",
+        "@babel/helper-module-transforms": "^7.13.0",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-validator-identifier": "^7.12.11",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-umd": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.13.0.tgz",
+      "integrity": "sha512-D/ILzAh6uyvkWjKKyFE/W0FzWwasv6vPTSqPcjxFqn6QpX3u8DjRVliq4F2BamO2Wee/om06Vyy+vPkNrd4wxw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.13.0",
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.13.tgz",
+      "integrity": "sha512-Xsm8P2hr5hAxyYblrfACXpQKdQbx4m2df9/ZZSQ8MAhsadw06+jW7s9zsSw6he+mJZXRlVMyEnVktJo4zjk1WA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-new-target": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.13.tgz",
+      "integrity": "sha512-/KY2hbLxrG5GTQ9zzZSc3xWiOy379pIETEhbtzwZcw9rvuaVV4Fqy7BYGYOWZnaoXIQYbbJ0ziXLa/sKcGCYEQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-object-super": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.13.tgz",
+      "integrity": "sha512-JzYIcj3XtYspZDV8j9ulnoMPZZnF/Cj0LUxPOjR89BdBVx+zYJI9MdMIlUZjbXDX+6YVeS6I3e8op+qQ3BYBoQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/helper-replace-supers": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-parameters": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.13.0.tgz",
+      "integrity": "sha512-Jt8k/h/mIwE2JFEOb3lURoY5C85ETcYPnbuAJ96zRBzh1XHtQZfs62ChZ6EP22QlC8c7Xqr9q+e1SU5qttwwjw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-property-literals": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.12.13.tgz",
+      "integrity": "sha512-nqVigwVan+lR+g8Fj8Exl0UQX2kymtjcWfMOYM1vTYEKujeyv2SkMgazf2qNcK7l4SDiKyTA/nHCPqL4e2zo1A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-react-display-name": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.13.tgz",
+      "integrity": "sha512-MprESJzI9O5VnJZrL7gg1MpdqmiFcUv41Jc7SahxYsNP2kDkFqClxxTZq+1Qv4AFCamm+GXMRDQINNn+qrxmiA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-react-jsx": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.13.12.tgz",
+      "integrity": "sha512-jcEI2UqIcpCqB5U5DRxIl0tQEProI2gcu+g8VTIqxLO5Iidojb4d77q+fwGseCvd8af/lJ9masp4QWzBXFE2xA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.12.13",
+        "@babel/helper-module-imports": "^7.13.12",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/types": "^7.13.12"
+      }
+    },
+    "@babel/plugin-transform-react-jsx-development": {
+      "version": "7.12.17",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.12.17.tgz",
+      "integrity": "sha512-BPjYV86SVuOaudFhsJR1zjgxxOhJDt6JHNoD48DxWEIxUCAMjV1ys6DYw4SDYZh0b1QsS2vfIA9t/ZsQGsDOUQ==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-transform-react-jsx": "^7.12.17"
+      }
+    },
+    "@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.12.1.tgz",
+      "integrity": "sha512-RqeaHiwZtphSIUZ5I85PEH19LOSzxfuEazoY7/pWASCAIBuATQzpSVD+eT6MebeeZT2F4eSL0u4vw6n4Nm0Mjg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-regenerator": {
+      "version": "7.13.15",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.13.15.tgz",
+      "integrity": "sha512-Bk9cOLSz8DiurcMETZ8E2YtIVJbFCPGW28DJWUakmyVWtQSm6Wsf0p4B4BfEr/eL2Nkhe/CICiUiMOCi1TPhuQ==",
+      "dev": true,
+      "requires": {
+        "regenerator-transform": "^0.14.2"
+      }
+    },
+    "@babel/plugin-transform-reserved-words": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.12.13.tgz",
+      "integrity": "sha512-xhUPzDXxZN1QfiOy/I5tyye+TRz6lA7z6xaT4CLOjPRMVg1ldRf0LHw0TDBpYL4vG78556WuHdyO9oi5UmzZBg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-shorthand-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.13.tgz",
+      "integrity": "sha512-xpL49pqPnLtf0tVluuqvzWIgLEhuPpZzvs2yabUHSKRNlN7ScYU7aMlmavOeyXJZKgZKQRBlh8rHbKiJDraTSw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-spread": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.13.0.tgz",
+      "integrity": "sha512-V6vkiXijjzYeFmQTr3dBxPtZYLPcUfY34DebOU27jIl2M/Y8Egm52Hw82CSjjPqd54GTlJs5x+CR7HeNr24ckg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1"
+      }
+    },
+    "@babel/plugin-transform-sticky-regex": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.13.tgz",
+      "integrity": "sha512-Jc3JSaaWT8+fr7GRvQP02fKDsYk4K/lYwWq38r/UGfaxo89ajud321NH28KRQ7xy1Ybc0VUE5Pz8psjNNDUglg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-template-literals": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.13.0.tgz",
+      "integrity": "sha512-d67umW6nlfmr1iehCcBv69eSUSySk1EsIS8aTDX4Xo9qajAh6mYtcl4kJrBkGXuxZPEgVr7RVfAvNW6YQkd4Mw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-typeof-symbol": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.13.tgz",
+      "integrity": "sha512-eKv/LmUJpMnu4npgfvs3LiHhJua5fo/CysENxa45YCQXZwKnGCQKAg87bvoqSW1fFT+HA32l03Qxsm8ouTY3ZQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-typescript": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.13.0.tgz",
+      "integrity": "sha512-elQEwluzaU8R8dbVuW2Q2Y8Nznf7hnjM7+DSCd14Lo5fF63C9qNLbwZYbmZrtV9/ySpSUpkRpQXvJb6xyu4hCQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.13.0",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-typescript": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-unicode-escapes": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.13.tgz",
+      "integrity": "sha512-0bHEkdwJ/sN/ikBHfSmOXPypN/beiGqjo+o4/5K+vxEFNPRPdImhviPakMKG4x96l85emoa0Z6cDflsdBusZbw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-unicode-regex": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.13.tgz",
+      "integrity": "sha512-mDRzSNY7/zopwisPZ5kM9XKCfhchqIYwAKRERtEnhYscZB79VRekuRSoYbN0+KVe3y8+q1h6A4svXtP7N+UoCA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/preset-env": {
+      "version": "7.13.15",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.13.15.tgz",
+      "integrity": "sha512-D4JAPMXcxk69PKe81jRJ21/fP/uYdcTZ3hJDF5QX2HSI9bBxxYw/dumdR6dGumhjxlprHPE4XWoPaqzZUVy2MA==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.13.15",
+        "@babel/helper-compilation-targets": "^7.13.13",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-validator-option": "^7.12.17",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.13.12",
+        "@babel/plugin-proposal-async-generator-functions": "^7.13.15",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
+        "@babel/plugin-proposal-dynamic-import": "^7.13.8",
+        "@babel/plugin-proposal-export-namespace-from": "^7.12.13",
+        "@babel/plugin-proposal-json-strings": "^7.13.8",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.13.8",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
+        "@babel/plugin-proposal-numeric-separator": "^7.12.13",
+        "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.13.8",
+        "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+        "@babel/plugin-proposal-private-methods": "^7.13.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.12.13",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-top-level-await": "^7.12.13",
+        "@babel/plugin-transform-arrow-functions": "^7.13.0",
+        "@babel/plugin-transform-async-to-generator": "^7.13.0",
+        "@babel/plugin-transform-block-scoped-functions": "^7.12.13",
+        "@babel/plugin-transform-block-scoping": "^7.12.13",
+        "@babel/plugin-transform-classes": "^7.13.0",
+        "@babel/plugin-transform-computed-properties": "^7.13.0",
+        "@babel/plugin-transform-destructuring": "^7.13.0",
+        "@babel/plugin-transform-dotall-regex": "^7.12.13",
+        "@babel/plugin-transform-duplicate-keys": "^7.12.13",
+        "@babel/plugin-transform-exponentiation-operator": "^7.12.13",
+        "@babel/plugin-transform-for-of": "^7.13.0",
+        "@babel/plugin-transform-function-name": "^7.12.13",
+        "@babel/plugin-transform-literals": "^7.12.13",
+        "@babel/plugin-transform-member-expression-literals": "^7.12.13",
+        "@babel/plugin-transform-modules-amd": "^7.13.0",
+        "@babel/plugin-transform-modules-commonjs": "^7.13.8",
+        "@babel/plugin-transform-modules-systemjs": "^7.13.8",
+        "@babel/plugin-transform-modules-umd": "^7.13.0",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.12.13",
+        "@babel/plugin-transform-new-target": "^7.12.13",
+        "@babel/plugin-transform-object-super": "^7.12.13",
+        "@babel/plugin-transform-parameters": "^7.13.0",
+        "@babel/plugin-transform-property-literals": "^7.12.13",
+        "@babel/plugin-transform-regenerator": "^7.13.15",
+        "@babel/plugin-transform-reserved-words": "^7.12.13",
+        "@babel/plugin-transform-shorthand-properties": "^7.12.13",
+        "@babel/plugin-transform-spread": "^7.13.0",
+        "@babel/plugin-transform-sticky-regex": "^7.12.13",
+        "@babel/plugin-transform-template-literals": "^7.13.0",
+        "@babel/plugin-transform-typeof-symbol": "^7.12.13",
+        "@babel/plugin-transform-unicode-escapes": "^7.12.13",
+        "@babel/plugin-transform-unicode-regex": "^7.12.13",
+        "@babel/preset-modules": "^0.1.4",
+        "@babel/types": "^7.13.14",
+        "babel-plugin-polyfill-corejs2": "^0.2.0",
+        "babel-plugin-polyfill-corejs3": "^0.2.0",
+        "babel-plugin-polyfill-regenerator": "^0.2.0",
+        "core-js-compat": "^3.9.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "babel-plugin-polyfill-corejs3": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.0.tgz",
+          "integrity": "sha512-zZyi7p3BCUyzNxLx8KV61zTINkkV65zVkDAFNZmrTCRVhjo1jAS+YLvDJ9Jgd/w2tsAviCwFHReYfxO3Iql8Yg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-define-polyfill-provider": "^0.2.0",
+            "core-js-compat": "^3.9.1"
+          }
+        }
+      }
+    },
+    "@babel/preset-modules": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.4.tgz",
+      "integrity": "sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      }
+    },
+    "@babel/preset-react": {
+      "version": "7.13.13",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.13.13.tgz",
+      "integrity": "sha512-gx+tDLIE06sRjKJkVtpZ/t3mzCDOnPG+ggHZG9lffUbX8+wC739x20YQc9V35Do6ZAxaUc/HhVHIiOzz5MvDmA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-validator-option": "^7.12.17",
+        "@babel/plugin-transform-react-display-name": "^7.12.13",
+        "@babel/plugin-transform-react-jsx": "^7.13.12",
+        "@babel/plugin-transform-react-jsx-development": "^7.12.17",
+        "@babel/plugin-transform-react-pure-annotations": "^7.12.1"
+      }
+    },
+    "@babel/preset-typescript": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.13.0.tgz",
+      "integrity": "sha512-LXJwxrHy0N3f6gIJlYbLta1D9BDtHpQeqwzM0LIfjDlr6UE/D5Mc7W4iDiQzaE+ks0sTjT26ArcHWnJVt0QiHw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-validator-option": "^7.12.17",
+        "@babel/plugin-transform-typescript": "^7.13.0"
+      }
+    },
+    "@babel/register": {
+      "version": "7.13.16",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.13.16.tgz",
+      "integrity": "sha512-dh2t11ysujTwByQjXNgJ48QZ2zcXKQVdV8s0TbeMI0flmtGWCdTwK9tJiACHXPLmncm5+ktNn/diojA45JE4jg==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "find-cache-dir": "^2.0.0",
+        "make-dir": "^2.1.0",
+        "pirates": "^4.0.0",
+        "source-map-support": "^0.5.16"
+      }
+    },
+    "@babel/runtime": {
+      "version": "7.13.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
+      "integrity": "sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==",
+      "dev": true,
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/runtime-corejs3": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.14.0.tgz",
+      "integrity": "sha512-0R0HTZWHLk6G8jIk0FtoX+AatCtKnswS98VhXwGImFc759PJRp4Tru0PQYZofyijTFUr+gT8Mu7sgXVJLQ0ceg==",
+      "dev": true,
+      "requires": {
+        "core-js-pure": "^3.0.0",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/template": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+      "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/parser": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.13.13",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.13.tgz",
+      "integrity": "sha512-CblEcwmXKR6eP43oQGG++0QMTtCjAsa3frUuzHoiIJWpaIIi8dwMyEFUJoXRLxagGqCK+jALRwIO+o3R9p/uUg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/generator": "^7.13.9",
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "@babel/parser": "^7.13.13",
+        "@babel/types": "^7.13.13",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/types": {
+      "version": "7.13.14",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.14.tgz",
+      "integrity": "sha512-A2aa3QTkWoyqsZZFl56MLUsfmh7O0gN41IPvXAE/++8ojpbz12SszD7JEGYVdn4f9Kt4amIei07swF1h4AqmmQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.12.11",
+        "lodash": "^4.17.19",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@emotion/cache": {
+      "version": "10.0.29",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+      "dev": true,
+      "requires": {
+        "@emotion/sheet": "0.9.4",
+        "@emotion/stylis": "0.8.5",
+        "@emotion/utils": "0.11.3",
+        "@emotion/weak-memoize": "0.2.5"
+      }
+    },
+    "@emotion/core": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz",
+      "integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@emotion/cache": "^10.0.27",
+        "@emotion/css": "^10.0.27",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/sheet": "0.9.4",
+        "@emotion/utils": "0.11.3"
+      }
+    },
+    "@emotion/css": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
+      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
+      "dev": true,
+      "requires": {
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/utils": "0.11.3",
+        "babel-plugin-emotion": "^10.0.27"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
+      "dev": true
+    },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "dev": true,
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "dev": true
+    },
+    "@emotion/serialize": {
+      "version": "0.11.16",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+      "dev": true,
+      "requires": {
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/unitless": "0.7.5",
+        "@emotion/utils": "0.11.3",
+        "csstype": "^2.5.7"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.16",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz",
+          "integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q==",
+          "dev": true
+        }
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==",
+      "dev": true
+    },
+    "@emotion/styled": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
+      "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
+      "dev": true,
+      "requires": {
+        "@emotion/styled-base": "^10.0.27",
+        "babel-plugin-emotion": "^10.0.27"
+      }
+    },
+    "@emotion/styled-base": {
+      "version": "10.0.31",
+      "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz",
+      "integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@emotion/is-prop-valid": "0.8.8",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/utils": "0.11.3"
+      }
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
+      "dev": true
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+      "dev": true
+    },
+    "@emotion/utils": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==",
+      "dev": true
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==",
+      "dev": true
+    },
+    "@mrmlnc/readdir-enhanced": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
+      "integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
+      "dev": true,
+      "requires": {
+        "call-me-maybe": "^1.0.1",
+        "glob-to-regexp": "^0.3.0"
+      }
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
+      "integrity": "sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.4",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+      "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz",
+      "integrity": "sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.4",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@npmcli/move-file": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
+      "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
+      "dev": true,
+      "requires": {
+        "mkdirp": "^1.0.4",
+        "rimraf": "^3.0.2"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "@popperjs/core": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
+      "dev": true
+    },
+    "@reach/router": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.4.tgz",
+      "integrity": "sha512-+mtn9wjlB9NN2CNnnC/BRYtwdKBfSyyasPYraNAyvaV1occr/5NnB4CVzjEZipNHwYebQwcndGUmpFzxAUoqSA==",
+      "dev": true,
+      "requires": {
+        "create-react-context": "0.3.0",
+        "invariant": "^2.2.3",
+        "prop-types": "^15.6.1",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "@storybook/addon-a11y": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.2.9.tgz",
+      "integrity": "sha512-wo7nFpEqEeiHDsRKnhqe2gIHZ9Z7/Aefw570kBgReU5tKlmrb5rFAfTVBWGBZlLHWeJMsFsRsWrWrmkf1B52OQ==",
+      "dev": true,
+      "requires": {
+        "@storybook/addons": "6.2.9",
+        "@storybook/api": "6.2.9",
+        "@storybook/channels": "6.2.9",
+        "@storybook/client-api": "6.2.9",
+        "@storybook/client-logger": "6.2.9",
+        "@storybook/components": "6.2.9",
+        "@storybook/core-events": "6.2.9",
+        "@storybook/theming": "6.2.9",
+        "axe-core": "^4.1.1",
+        "core-js": "^3.8.2",
+        "global": "^4.4.0",
+        "lodash": "^4.17.20",
+        "react-sizeme": "^3.0.1",
+        "regenerator-runtime": "^0.13.7",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "@storybook/addon-knobs": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.9.tgz",
+      "integrity": "sha512-ic3xXy9uWPfIGP4x3VuGnrUmg/Jn9rHKIqZMhRcC7mFDRVlgbekvQxaruC6VY9LW6o8jV/miReSZkJf7M8o0aQ==",
+      "dev": true,
+      "requires": {
+        "@storybook/addons": "6.2.9",
+        "@storybook/api": "6.2.9",
+        "@storybook/channels": "6.2.9",
+        "@storybook/client-api": "6.2.9",
+        "@storybook/components": "6.2.9",
+        "@storybook/core-events": "6.2.9",
+        "@storybook/theming": "6.2.9",
+        "copy-to-clipboard": "^3.3.1",
+        "core-js": "^3.8.2",
+        "escape-html": "^1.0.3",
+        "fast-deep-equal": "^3.1.3",
+        "global": "^4.4.0",
+        "lodash": "^4.17.20",
+        "prop-types": "^15.7.2",
+        "qs": "^6.10.0",
+        "react-colorful": "^5.0.1",
+        "react-lifecycles-compat": "^3.0.4",
+        "react-select": "^3.2.0",
+        "regenerator-runtime": "^0.13.7"
+      }
+    },
+    "@storybook/addon-viewport": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.2.9.tgz",
+      "integrity": "sha512-IK2mu5njmfcAT967SJtBOY2B6NPMikySZga9QuaLdSpQxPd3vXKNMVG1CjnduMLeDaAoUlvlJISeEPbYGuE+1A==",
+      "dev": true,
+      "requires": {
+        "@storybook/addons": "6.2.9",
+        "@storybook/api": "6.2.9",
+        "@storybook/client-logger": "6.2.9",
+        "@storybook/components": "6.2.9",
+        "@storybook/core-events": "6.2.9",
+        "@storybook/theming": "6.2.9",
+        "core-js": "^3.8.2",
+        "global": "^4.4.0",
+        "memoizerific": "^1.11.3",
+        "prop-types": "^15.7.2",
+        "regenerator-runtime": "^0.13.7"
+      }
+    },
+    "@storybook/addons": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.2.9.tgz",
+      "integrity": "sha512-GnmEKbJwiN1jncN9NSA8CuR1i2XAlasPcl/Zn0jkfV9WitQeczVcJCPw86SGH84AD+tTBCyF2i9UC0KaOV1YBQ==",
+      "dev": true,
+      "requires": {
+        "@storybook/api": "6.2.9",
+        "@storybook/channels": "6.2.9",
+        "@storybook/client-logger": "6.2.9",
+        "@storybook/core-events": "6.2.9",
+        "@storybook/router": "6.2.9",
+        "@storybook/theming": "6.2.9",
+        "core-js": "^3.8.2",
+        "global": "^4.4.0",
+        "regenerator-runtime": "^0.13.7"
+      }
+    },
+    "@storybook/api": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.2.9.tgz",
+      "integrity": "sha512-okkA3HAScE9tGnYBrjTOcgzT+L1lRHNoEh3ZfGgh1u/XNEyHGNkj4grvkd6nX7BzRcYQ/l2VkcKCqmOjUnSkVQ==",
+      "dev": true,
+      "requires": {
+        "@reach/router": "^1.3.4",
+        "@storybook/channels": "6.2.9",
+        "@storybook/client-logger": "6.2.9",
+        "@storybook/core-events": "6.2.9",
+        "@storybook/csf": "0.0.1",
+        "@storybook/router": "6.2.9",
+        "@storybook/semver": "^7.3.2",
+        "@storybook/theming": "6.2.9",
+        "@types/reach__router": "^1.3.7",
+        "core-js": "^3.8.2",
+        "fast-deep-equal": "^3.1.3",
+        "global": "^4.4.0",
+        "lodash": "^4.17.20",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "regenerator-runtime": "^0.13.7",
+        "store2": "^2.12.0",
+        "telejson": "^5.1.0",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "@storybook/builder-webpack4": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack4/-/builder-webpack4-6.2.9.tgz",
+      "integrity": "sha512-swECic1huVdj+B+iRJIQ8ds59HuPVE4fmhI+j/nhw0CQCsgAEKqDlOQVYEimW6nZX8GO4WxNm6tiiRzxixejbw==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.12.10",
+        "@babel/plugin-proposal-class-properties": "^7.12.1",
+        "@babel/plugin-proposal-decorators": "^7.12.12",
+        "@babel/plugin-proposal-export-default-from": "^7.12.1",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
+        "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+        "@babel/plugin-proposal-optional-chaining": "^7.12.7",
+        "@babel/plugin-proposal-private-methods": "^7.12.1",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-transform-arrow-functions": "^7.12.1",
+        "@babel/plugin-transform-block-scoping": "^7.12.12",
+        "@babel/plugin-transform-classes": "^7.12.1",
+        "@babel/plugin-transform-destructuring": "^7.12.1",
+        "@babel/plugin-transform-for-of": "^7.12.1",
+        "@babel/plugin-transform-parameters": "^7.12.1",
+        "@babel/plugin-transform-shorthand-properties": "^7.12.1",
+        "@babel/plugin-transform-spread": "^7.12.1",
+        "@babel/plugin-transform-template-literals": "^7.12.1",
+        "@babel/preset-env": "^7.12.11",
+        "@babel/preset-react": "^7.12.10",
+        "@babel/preset-typescript": "^7.12.7",
+        "@storybook/addons": "6.2.9",
+        "@storybook/api": "6.2.9",
+        "@storybook/channel-postmessage": "6.2.9",
+        "@storybook/channels": "6.2.9",
+        "@storybook/client-api": "6.2.9",
+        "@storybook/client-logger": "6.2.9",
+        "@storybook/components": "6.2.9",
+        "@storybook/core-common": "6.2.9",
+        "@storybook/core-events": "6.2.9",
+        "@storybook/node-logger": "6.2.9",
+        "@storybook/router": "6.2.9",
+        "@storybook/semver": "^7.3.2",
+        "@storybook/theming": "6.2.9",
+        "@storybook/ui": "6.2.9",
+        "@types/node": "^14.0.10",
+        "@types/webpack": "^4.41.26",
+        "autoprefixer": "^9.8.6",
+        "babel-loader": "^8.2.2",
+        "babel-plugin-macros": "^2.8.0",
+        "babel-plugin-polyfill-corejs3": "^0.1.0",
+        "case-sensitive-paths-webpack-plugin": "^2.3.0",
+        "core-js": "^3.8.2",
+        "css-loader": "^3.6.0",
+        "dotenv-webpack": "^1.8.0",
+        "file-loader": "^6.2.0",
+        "find-up": "^5.0.0",
+        "fork-ts-checker-webpack-plugin": "^4.1.6",
+        "fs-extra": "^9.0.1",
+        "glob": "^7.1.6",
+        "glob-promise": "^3.4.0",
+        "global": "^4.4.0",
+        "html-webpack-plugin": "^4.0.0",
+        "pnp-webpack-plugin": "1.6.4",
+        "postcss": "^7.0.35",
+        "postcss-flexbugs-fixes": "^4.2.1",
+        "postcss-loader": "^4.2.0",
+        "raw-loader": "^4.0.2",
+        "react-dev-utils": "^11.0.3",
+        "stable": "^0.1.8",
+        "style-loader": "^1.3.0",
+        "terser-webpack-plugin": "^3.1.0",
+        "ts-dedent": "^2.0.0",
+        "url-loader": "^4.1.1",
+        "util-deprecate": "^1.0.2",
+        "webpack": "4",
+        "webpack-dev-middleware": "^3.7.3",
+        "webpack-filter-warnings-plugin": "^1.2.1",
+        "webpack-hot-middleware": "^2.25.0",
+        "webpack-virtual-modules": "^0.2.2"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        }
+      }
+    },
+    "@storybook/channel-postmessage": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.2.9.tgz",
+      "integrity": "sha512-OqV+gLeeCHR0KExsIz0B7gD17Cjd9D+I75qnBsLWM9inWO5kc/WZ5svw8Bvjlcm6snWpvxUaT8L+svuqcPSmww==",
+      "dev": true,
+      "requires": {
+        "@storybook/channels": "6.2.9",
+        "@storybook/client-logger": "6.2.9",
+        "@storybook/core-events": "6.2.9",
+        "core-js": "^3.8.2",
+        "global": "^4.4.0",
+        "qs": "^6.10.0",
+        "telejson": "^5.1.0"
+      }
+    },
+    "@storybook/channels": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.2.9.tgz",
+      "integrity": "sha512-6dC8Fb2ipNyOQXnUZMDeEUaJGH5DMLzyHlGLhVyDtrO5WR6bO8mQdkzf4+5dSKXgCBNX0BSkssXth4pDjn18rg==",
+      "dev": true,
+      "requires": {
+        "core-js": "^3.8.2",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "@storybook/client-api": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.2.9.tgz",
+      "integrity": "sha512-aLvEUVkbvv6Qo/2mF4rFCecdqi2CGOUDdsV1a6EFIVS/9gXFdpirsOwKHo9qNjacGdWPlBYGCUcbrw+DvNaSFA==",
+      "dev": true,
+      "requires": {
+        "@storybook/addons": "6.2.9",
+        "@storybook/channel-postmessage": "6.2.9",
+        "@storybook/channels": "6.2.9",
+        "@storybook/client-logger": "6.2.9",
+        "@storybook/core-events": "6.2.9",
+        "@storybook/csf": "0.0.1",
+        "@types/qs": "^6.9.5",
+        "@types/webpack-env": "^1.16.0",
+        "core-js": "^3.8.2",
+        "global": "^4.4.0",
+        "lodash": "^4.17.20",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "regenerator-runtime": "^0.13.7",
+        "stable": "^0.1.8",
+        "store2": "^2.12.0",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "@storybook/client-logger": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.2.9.tgz",
+      "integrity": "sha512-IfOQZuvpjh66qBInQCJOb9S0dTGpzZ/Cxlcvokp+PYt95KztaWN3mPm+HaDQCeRsrWNe0Bpm1zuickcJ6dBOXg==",
+      "dev": true,
+      "requires": {
+        "core-js": "^3.8.2",
+        "global": "^4.4.0"
+      }
+    },
+    "@storybook/components": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.2.9.tgz",
+      "integrity": "sha512-hnV1MI2aB2g1sJ7NJphpxi7TwrMZQ/tpCJeHnkjmzyC6ez1MXqcBXGrEEdSXzRfAxjQTOEpu6H1mnns0xMP0Ag==",
+      "dev": true,
+      "requires": {
+        "@popperjs/core": "^2.6.0",
+        "@storybook/client-logger": "6.2.9",
+        "@storybook/csf": "0.0.1",
+        "@storybook/theming": "6.2.9",
+        "@types/color-convert": "^2.0.0",
+        "@types/overlayscrollbars": "^1.12.0",
+        "@types/react-syntax-highlighter": "11.0.5",
+        "color-convert": "^2.0.1",
+        "core-js": "^3.8.2",
+        "fast-deep-equal": "^3.1.3",
+        "global": "^4.4.0",
+        "lodash": "^4.17.20",
+        "markdown-to-jsx": "^7.1.0",
+        "memoizerific": "^1.11.3",
+        "overlayscrollbars": "^1.13.1",
+        "polished": "^4.0.5",
+        "prop-types": "^15.7.2",
+        "react-colorful": "^5.0.1",
+        "react-popper-tooltip": "^3.1.1",
+        "react-syntax-highlighter": "^13.5.3",
+        "react-textarea-autosize": "^8.3.0",
+        "regenerator-runtime": "^0.13.7",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        }
+      }
+    },
+    "@storybook/core": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.2.9.tgz",
+      "integrity": "sha512-pzbyjWvj0t8m0kR2pC9GQne4sZn7Y/zfcbm6/31CL+yhzOQjfJEj3n4ZFUlxikXqQJPg1aWfypfyaeaLL0QyuA==",
+      "dev": true,
+      "requires": {
+        "@storybook/core-client": "6.2.9",
+        "@storybook/core-server": "6.2.9"
+      }
+    },
+    "@storybook/core-client": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-6.2.9.tgz",
+      "integrity": "sha512-jW841J5lCe1Ub5ZMtzYPgCy/OUddFxxVYeHLZyuNxlH5RoiQQxbDpuFlzuZMYGuIzD6eZw+ANE4w5vW/y5oBfA==",
+      "dev": true,
+      "requires": {
+        "@storybook/addons": "6.2.9",
+        "@storybook/channel-postmessage": "6.2.9",
+        "@storybook/client-api": "6.2.9",
+        "@storybook/client-logger": "6.2.9",
+        "@storybook/core-events": "6.2.9",
+        "@storybook/csf": "0.0.1",
+        "@storybook/ui": "6.2.9",
+        "ansi-to-html": "^0.6.11",
+        "core-js": "^3.8.2",
+        "global": "^4.4.0",
+        "lodash": "^4.17.20",
+        "qs": "^6.10.0",
+        "regenerator-runtime": "^0.13.7",
+        "ts-dedent": "^2.0.0",
+        "unfetch": "^4.2.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "@storybook/core-common": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.2.9.tgz",
+      "integrity": "sha512-ve0Qb4EMit8jGibfZBprmaU2i4LtpB4vSMIzD9nB1YeBmw2cGhHubtmayZ0TwcV3fPQhtYH9wwRWuWyzzHyQyw==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.12.10",
+        "@babel/plugin-proposal-class-properties": "^7.12.1",
+        "@babel/plugin-proposal-decorators": "^7.12.12",
+        "@babel/plugin-proposal-export-default-from": "^7.12.1",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
+        "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+        "@babel/plugin-proposal-optional-chaining": "^7.12.7",
+        "@babel/plugin-proposal-private-methods": "^7.12.1",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-transform-arrow-functions": "^7.12.1",
+        "@babel/plugin-transform-block-scoping": "^7.12.12",
+        "@babel/plugin-transform-classes": "^7.12.1",
+        "@babel/plugin-transform-destructuring": "^7.12.1",
+        "@babel/plugin-transform-for-of": "^7.12.1",
+        "@babel/plugin-transform-parameters": "^7.12.1",
+        "@babel/plugin-transform-shorthand-properties": "^7.12.1",
+        "@babel/plugin-transform-spread": "^7.12.1",
+        "@babel/preset-env": "^7.12.11",
+        "@babel/preset-react": "^7.12.10",
+        "@babel/preset-typescript": "^7.12.7",
+        "@babel/register": "^7.12.1",
+        "@storybook/node-logger": "6.2.9",
+        "@storybook/semver": "^7.3.2",
+        "@types/glob-base": "^0.3.0",
+        "@types/micromatch": "^4.0.1",
+        "@types/node": "^14.0.10",
+        "@types/pretty-hrtime": "^1.0.0",
+        "babel-loader": "^8.2.2",
+        "babel-plugin-macros": "^3.0.1",
+        "babel-plugin-polyfill-corejs3": "^0.1.0",
+        "chalk": "^4.1.0",
+        "core-js": "^3.8.2",
+        "express": "^4.17.1",
+        "file-system-cache": "^1.0.5",
+        "find-up": "^5.0.0",
+        "fork-ts-checker-webpack-plugin": "^6.0.4",
+        "glob": "^7.1.6",
+        "glob-base": "^0.3.0",
+        "interpret": "^2.2.0",
+        "json5": "^2.1.3",
+        "lazy-universal-dotenv": "^3.0.1",
+        "micromatch": "^4.0.2",
+        "pkg-dir": "^5.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "resolve-from": "^5.0.0",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2",
+        "webpack": "4"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "babel-plugin-macros": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.0.1.tgz",
+          "integrity": "sha512-CKt4+Oy9k2wiN+hT1uZzOw7d8zb1anbQpf7KLwaaXRCi/4pzKdFKHf7v5mvoPmjkmxshh7eKZQuRop06r5WP4w==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "cosmiconfig": "^7.0.0",
+            "resolve": "^1.19.0"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "cosmiconfig": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
+          "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
+          "dev": true,
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.2.1",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.10.0"
+          }
+        },
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "fork-ts-checker-webpack-plugin": {
+          "version": "6.2.5",
+          "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.2.5.tgz",
+          "integrity": "sha512-EqHkTmxOotb5WJEc8kjzJh8IRuRUpHxtBh+jGyOHJcEwwZzqTmlMNAJsVF3tvALohi9yJzV8C1j215DyK8Ta8w==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.8.3",
+            "@types/json-schema": "^7.0.5",
+            "chalk": "^4.1.0",
+            "chokidar": "^3.4.2",
+            "cosmiconfig": "^6.0.0",
+            "deepmerge": "^4.2.2",
+            "fs-extra": "^9.0.0",
+            "memfs": "^3.1.2",
+            "minimatch": "^3.0.4",
+            "schema-utils": "2.7.0",
+            "semver": "^7.3.2",
+            "tapable": "^1.0.0"
+          },
+          "dependencies": {
+            "cosmiconfig": {
+              "version": "6.0.0",
+              "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+              "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+              "dev": true,
+              "requires": {
+                "@types/parse-json": "^4.0.0",
+                "import-fresh": "^3.1.0",
+                "parse-json": "^5.0.0",
+                "path-type": "^4.0.0",
+                "yaml": "^1.7.2"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        },
+        "schema-utils": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.4",
+            "ajv": "^6.12.2",
+            "ajv-keywords": "^3.4.1"
+          }
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@storybook/core-events": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.2.9.tgz",
+      "integrity": "sha512-xQmbX/oYQK1QsAGN8hriXX5SUKOoTUe3L4dVaVHxJqy7MReRWJpprJmCpbAPJzWS6WCbDFfCM5kVEexHLOzJlQ==",
+      "dev": true,
+      "requires": {
+        "core-js": "^3.8.2"
+      }
+    },
+    "@storybook/core-server": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-6.2.9.tgz",
+      "integrity": "sha512-DzihO73pj1Ro0Y4tq9hjw2mLMUYeSRPrx7CndCOBxcTHCKQ8Kd7Dee3wJ49t5/19V7TW1+4lYR59GAy73FeOAQ==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.12.10",
+        "@babel/plugin-transform-template-literals": "^7.12.1",
+        "@babel/preset-react": "^7.12.10",
+        "@storybook/addons": "6.2.9",
+        "@storybook/builder-webpack4": "6.2.9",
+        "@storybook/core-client": "6.2.9",
+        "@storybook/core-common": "6.2.9",
+        "@storybook/node-logger": "6.2.9",
+        "@storybook/semver": "^7.3.2",
+        "@storybook/theming": "6.2.9",
+        "@storybook/ui": "6.2.9",
+        "@types/node": "^14.0.10",
+        "@types/node-fetch": "^2.5.7",
+        "@types/pretty-hrtime": "^1.0.0",
+        "@types/webpack": "^4.41.26",
+        "airbnb-js-shims": "^2.2.1",
+        "babel-loader": "^8.2.2",
+        "better-opn": "^2.1.1",
+        "boxen": "^4.2.0",
+        "case-sensitive-paths-webpack-plugin": "^2.3.0",
+        "chalk": "^4.1.0",
+        "cli-table3": "0.6.0",
+        "commander": "^6.2.1",
+        "core-js": "^3.8.2",
+        "cpy": "^8.1.1",
+        "css-loader": "^3.6.0",
+        "detect-port": "^1.3.0",
+        "dotenv-webpack": "^1.8.0",
+        "express": "^4.17.1",
+        "file-loader": "^6.2.0",
+        "file-system-cache": "^1.0.5",
+        "find-up": "^5.0.0",
+        "fs-extra": "^9.0.1",
+        "global": "^4.4.0",
+        "html-webpack-plugin": "^4.0.0",
+        "ip": "^1.1.5",
+        "node-fetch": "^2.6.1",
+        "pnp-webpack-plugin": "1.6.4",
+        "pretty-hrtime": "^1.0.3",
+        "prompts": "^2.4.0",
+        "read-pkg-up": "^7.0.1",
+        "regenerator-runtime": "^0.13.7",
+        "resolve-from": "^5.0.0",
+        "serve-favicon": "^2.5.0",
+        "style-loader": "^1.3.0",
+        "telejson": "^5.1.0",
+        "terser-webpack-plugin": "^3.1.0",
+        "ts-dedent": "^2.0.0",
+        "url-loader": "^4.1.1",
+        "util-deprecate": "^1.0.2",
+        "webpack": "4",
+        "webpack-dev-middleware": "^3.7.3",
+        "webpack-virtual-modules": "^0.2.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@storybook/csf": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.1.tgz",
+      "integrity": "sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
+    "@storybook/node-logger": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.2.9.tgz",
+      "integrity": "sha512-ryRBChWZf1A5hOVONErJZosS25IdMweoMVFAUAcj91iC0ynoSA6YL2jmoE71jQchxEXEgkDeRkX9lR/GlqFGZQ==",
+      "dev": true,
+      "requires": {
+        "@types/npmlog": "^4.1.2",
+        "chalk": "^4.1.0",
+        "core-js": "^3.8.2",
+        "npmlog": "^4.1.2",
+        "pretty-hrtime": "^1.0.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@storybook/preact": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/preact/-/preact-6.2.9.tgz",
+      "integrity": "sha512-AnbRtJfIyI6AGIIaduBe2Fnr4HPldycWr1fadqpytm9LBMQsYRCzXy2+AtBIfa0O5YDVqDcKda/uBsj1tNJzqw==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-transform-react-jsx": "^7.12.12",
+        "@storybook/addons": "6.2.9",
+        "@storybook/core": "6.2.9",
+        "@storybook/core-common": "6.2.9",
+        "@types/webpack-env": "^1.16.0",
+        "core-js": "^3.8.2",
+        "global": "^4.4.0",
+        "react": "16.14.0",
+        "react-dom": "16.14.0",
+        "read-pkg-up": "^7.0.1",
+        "regenerator-runtime": "^0.13.7",
+        "ts-dedent": "^2.0.0"
+      }
+    },
+    "@storybook/router": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.2.9.tgz",
+      "integrity": "sha512-7Bn1OFoItCl8whXRT8N1qp1Lky7kzXJ3aslWp5E8HcM8rxh4OYXfbaeiyJEJxBTGC5zxgY+tAEXHFjsAviFROg==",
+      "dev": true,
+      "requires": {
+        "@reach/router": "^1.3.4",
+        "@storybook/client-logger": "6.2.9",
+        "@types/reach__router": "^1.3.7",
+        "core-js": "^3.8.2",
+        "fast-deep-equal": "^3.1.3",
+        "global": "^4.4.0",
+        "lodash": "^4.17.20",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "ts-dedent": "^2.0.0"
+      }
+    },
+    "@storybook/semver": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz",
+      "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==",
+      "dev": true,
+      "requires": {
+        "core-js": "^3.6.5",
+        "find-up": "^4.1.0"
+      }
+    },
+    "@storybook/theming": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.2.9.tgz",
+      "integrity": "sha512-183oJW7AD7Fhqg5NT4ct3GJntwteAb9jZnQ6yhf9JSdY+fk8OhxRbPf7ov0au2gYACcGrWDd9K5pYQsvWlP5gA==",
+      "dev": true,
+      "requires": {
+        "@emotion/core": "^10.1.1",
+        "@emotion/is-prop-valid": "^0.8.6",
+        "@emotion/styled": "^10.0.27",
+        "@storybook/client-logger": "6.2.9",
+        "core-js": "^3.8.2",
+        "deep-object-diff": "^1.1.0",
+        "emotion-theming": "^10.0.27",
+        "global": "^4.4.0",
+        "memoizerific": "^1.11.3",
+        "polished": "^4.0.5",
+        "resolve-from": "^5.0.0",
+        "ts-dedent": "^2.0.0"
+      }
+    },
+    "@storybook/ui": {
+      "version": "6.2.9",
+      "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.2.9.tgz",
+      "integrity": "sha512-jq2xmw3reIqik/6ibUSbNKGR+Xvr9wkAEwexiOl+5WQ5BeYJpw4dmDmsFQf+SQuWaSEUUPolbzkakRQM778Kdg==",
+      "dev": true,
+      "requires": {
+        "@emotion/core": "^10.1.1",
+        "@storybook/addons": "6.2.9",
+        "@storybook/api": "6.2.9",
+        "@storybook/channels": "6.2.9",
+        "@storybook/client-logger": "6.2.9",
+        "@storybook/components": "6.2.9",
+        "@storybook/core-events": "6.2.9",
+        "@storybook/router": "6.2.9",
+        "@storybook/semver": "^7.3.2",
+        "@storybook/theming": "6.2.9",
+        "@types/markdown-to-jsx": "^6.11.3",
+        "copy-to-clipboard": "^3.3.1",
+        "core-js": "^3.8.2",
+        "core-js-pure": "^3.8.2",
+        "downshift": "^6.0.15",
+        "emotion-theming": "^10.0.27",
+        "fuse.js": "^3.6.1",
+        "global": "^4.4.0",
+        "lodash": "^4.17.20",
+        "markdown-to-jsx": "^6.11.4",
+        "memoizerific": "^1.11.3",
+        "polished": "^4.0.5",
+        "qs": "^6.10.0",
+        "react-draggable": "^4.4.3",
+        "react-helmet-async": "^1.0.7",
+        "react-sizeme": "^3.0.1",
+        "regenerator-runtime": "^0.13.7",
+        "resolve-from": "^5.0.0",
+        "store2": "^2.12.0"
+      },
+      "dependencies": {
+        "markdown-to-jsx": {
+          "version": "6.11.4",
+          "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz",
+          "integrity": "sha512-3lRCD5Sh+tfA52iGgfs/XZiw33f7fFX9Bn55aNnVNUd2GzLDkOWyKYYD8Yju2B1Vn+feiEdgJs8T6Tg0xNokPw==",
+          "dev": true,
+          "requires": {
+            "prop-types": "^15.6.2",
+            "unquote": "^1.1.0"
+          }
+        }
+      }
+    },
+    "@types/anymatch": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
+      "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==",
+      "dev": true
+    },
+    "@types/braces": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/braces/-/braces-3.0.0.tgz",
+      "integrity": "sha512-TbH79tcyi9FHwbyboOKeRachRq63mSuWYXOflsNO9ZyE5ClQ/JaozNKl+aWUq87qPNsXasXxi2AbgfwIJ+8GQw==",
+      "dev": true
+    },
+    "@types/color-convert": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz",
+      "integrity": "sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==",
+      "dev": true,
+      "requires": {
+        "@types/color-name": "*"
+      }
+    },
+    "@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
+      "dev": true
+    },
+    "@types/glob": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
+      "integrity": "sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==",
+      "dev": true,
+      "requires": {
+        "@types/minimatch": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/glob-base": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@types/glob-base/-/glob-base-0.3.0.tgz",
+      "integrity": "sha1-pYHWiDR+EOUN18F9byiAoQNUMZ0=",
+      "dev": true
+    },
+    "@types/hast": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.1.tgz",
+      "integrity": "sha512-viwwrB+6xGzw+G1eWpF9geV3fnsDgXqHG+cqgiHrvQfDUW5hzhCyV7Sy3UJxhfRFBsgky2SSW33qi/YrIkjX5Q==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "*"
+      }
+    },
+    "@types/html-minifier-terser": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
+      "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==",
+      "dev": true
+    },
+    "@types/is-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/is-function/-/is-function-1.0.0.tgz",
+      "integrity": "sha512-iTs9HReBu7evG77Q4EC8hZnqRt57irBDkK9nvmHroiOIVwYMQc4IvYvdRgwKfYepunIY7Oh/dBuuld+Gj9uo6w==",
+      "dev": true
+    },
+    "@types/json-schema": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
+      "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==",
+      "dev": true
+    },
+    "@types/markdown-to-jsx": {
+      "version": "6.11.3",
+      "resolved": "https://registry.npmjs.org/@types/markdown-to-jsx/-/markdown-to-jsx-6.11.3.tgz",
+      "integrity": "sha512-30nFYpceM/ZEvhGiqWjm5quLUxNeld0HCzJEXMZZDpq53FPkS85mTwkWtCXzCqq8s5JYLgM5W392a02xn8Bdaw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/micromatch": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/micromatch/-/micromatch-4.0.1.tgz",
+      "integrity": "sha512-my6fLBvpY70KattTNzYOK6KU1oR1+UCz9ug/JbcF5UrEmeCt9P7DV2t7L8+t18mMPINqGQCE4O8PLOPbI84gxw==",
+      "dev": true,
+      "requires": {
+        "@types/braces": "*"
+      }
+    },
+    "@types/minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "14.14.43",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.43.tgz",
+      "integrity": "sha512-3pwDJjp1PWacPTpH0LcfhgjvurQvrZFBrC6xxjaUEZ7ifUtT32jtjPxEMMblpqd2Mvx+k8haqQJLQxolyGN/cQ==",
+      "dev": true
+    },
+    "@types/node-fetch": {
+      "version": "2.5.10",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.5.10.tgz",
+      "integrity": "sha512-IpkX0AasN44hgEad0gEF/V6EgR5n69VEqPEgnmoM8GsIGro3PowbWs4tR6IhxUTyPLpOn+fiGG6nrQhcmoCuIQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "form-data": "^3.0.0"
+      }
+    },
+    "@types/normalize-package-data": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
+      "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
+      "dev": true
+    },
+    "@types/npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@types/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-4QQmOF5KlwfxJ5IGXFIudkeLCdMABz03RcUXu+LCb24zmln8QW6aDjuGl4d4XPVLf2j+FnjelHTP7dvceAFbhA==",
+      "dev": true
+    },
+    "@types/overlayscrollbars": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/@types/overlayscrollbars/-/overlayscrollbars-1.12.0.tgz",
+      "integrity": "sha512-h/pScHNKi4mb+TrJGDon8Yb06ujFG0mSg12wIO0sWMUF3dQIe2ExRRdNRviaNt9IjxIiOfnRr7FsQAdHwK4sMg==",
+      "dev": true
+    },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
+    "@types/pretty-hrtime": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/pretty-hrtime/-/pretty-hrtime-1.0.0.tgz",
+      "integrity": "sha512-xl+5r2rcrxdLViAYkkiLMYsoUs3qEyrAnHFyEzYysgRxdVp3WbhysxIvJIxZp9FvZ2CYezh0TaHZorivH+voOQ==",
+      "dev": true
+    },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "dev": true
+    },
+    "@types/qs": {
+      "version": "6.9.6",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.6.tgz",
+      "integrity": "sha512-0/HnwIfW4ki2D8L8c9GVcG5I72s9jP5GSLVF0VIXDW00kmIpA6O33G7a8n59Tmh7Nz0WUC3rSb7PTY/sdW2JzA==",
+      "dev": true
+    },
+    "@types/reach__router": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@types/reach__router/-/reach__router-1.3.7.tgz",
+      "integrity": "sha512-cyBEb8Ef3SJNH5NYEIDGPoMMmYUxROatuxbICusVRQIqZUB85UCt6R2Ok60tKS/TABJsJYaHyNTW3kqbpxlMjg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.3.tgz",
+      "integrity": "sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-syntax-highlighter": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz",
+      "integrity": "sha512-VIOi9i2Oj5XsmWWoB72p3KlZoEbdRAcechJa8Ztebw7bDl2YmR+odxIqhtJGp1q2EozHs02US+gzxJ9nuf56qg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
+      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==",
+      "dev": true
+    },
+    "@types/source-list-map": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
+      "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
+      "dev": true
+    },
+    "@types/styled-jsx": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.8.tgz",
+      "integrity": "sha512-Yjye9VwMdYeXfS71ihueWRSxrruuXTwKCbzue4+5b2rjnQ//AtyM7myZ1BEhNhBQ/nL/RE7bdToUoLln2miKvg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/tapable": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.7.tgz",
+      "integrity": "sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==",
+      "dev": true
+    },
+    "@types/uglify-js": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.0.tgz",
+      "integrity": "sha512-EGkrJD5Uy+Pg0NUR8uA4bJ5WMfljyad0G+784vLCNUkD+QwOJXUbBYExXfVGf7YtyzdQp3L/XMYcliB987kL5Q==",
+      "dev": true,
+      "requires": {
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "@types/unist": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
+      "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==",
+      "dev": true
+    },
+    "@types/webpack": {
+      "version": "4.41.27",
+      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.27.tgz",
+      "integrity": "sha512-wK/oi5gcHi72VMTbOaQ70VcDxSQ1uX8S2tukBK9ARuGXrYM/+u4ou73roc7trXDNmCxCoerE8zruQqX/wuHszA==",
+      "dev": true,
+      "requires": {
+        "@types/anymatch": "*",
+        "@types/node": "*",
+        "@types/tapable": "^1",
+        "@types/uglify-js": "*",
+        "@types/webpack-sources": "*",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "@types/webpack-env": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.16.0.tgz",
+      "integrity": "sha512-Fx+NpfOO0CpeYX2g9bkvX8O5qh9wrU1sOF4g8sft4Mu7z+qfe387YlyY8w8daDyDsKY5vUxM0yxkAYnbkRbZEw==",
+      "dev": true
+    },
+    "@types/webpack-sources": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-2.1.0.tgz",
+      "integrity": "sha512-LXn/oYIpBeucgP1EIJbKQ2/4ZmpvRl+dlrFdX7+94SKRUV3Evy3FsfMZY318vGhkWUS5MPhtOM3w1/hCOAOXcg==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/source-list-map": "*",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        }
+      }
+    },
+    "@webassemblyjs/ast": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
+      "integrity": "sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0"
+      }
+    },
+    "@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
+      "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-api-error": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
+      "integrity": "sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-buffer": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz",
+      "integrity": "sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-code-frame": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz",
+      "integrity": "sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/wast-printer": "1.9.0"
+      }
+    },
+    "@webassemblyjs/helper-fsm": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz",
+      "integrity": "sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-module-context": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz",
+      "integrity": "sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0"
+      }
+    },
+    "@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz",
+      "integrity": "sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-wasm-section": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz",
+      "integrity": "sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0"
+      }
+    },
+    "@webassemblyjs/ieee754": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz",
+      "integrity": "sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==",
+      "dev": true,
+      "requires": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "@webassemblyjs/leb128": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.9.0.tgz",
+      "integrity": "sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==",
+      "dev": true,
+      "requires": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/utf8": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.9.0.tgz",
+      "integrity": "sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==",
+      "dev": true
+    },
+    "@webassemblyjs/wasm-edit": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz",
+      "integrity": "sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/helper-wasm-section": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-opt": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
+        "@webassemblyjs/wast-printer": "1.9.0"
+      }
+    },
+    "@webassemblyjs/wasm-gen": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz",
+      "integrity": "sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
+      }
+    },
+    "@webassemblyjs/wasm-opt": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz",
+      "integrity": "sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0"
+      }
+    },
+    "@webassemblyjs/wasm-parser": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz",
+      "integrity": "sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
+      }
+    },
+    "@webassemblyjs/wast-parser": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz",
+      "integrity": "sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/floating-point-hex-parser": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-code-frame": "1.9.0",
+        "@webassemblyjs/helper-fsm": "1.9.0",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/wast-printer": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
+      "integrity": "sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true
+    },
+    "@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true
+    },
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "dev": true,
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "acorn": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
+      "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
+      "dev": true
+    },
+    "address": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz",
+      "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
+      "dev": true
+    },
+    "aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "dev": true,
+      "requires": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      }
+    },
+    "airbnb-js-shims": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/airbnb-js-shims/-/airbnb-js-shims-2.2.1.tgz",
+      "integrity": "sha512-wJNXPH66U2xjgo1Zwyjf9EydvJ2Si94+vSdk6EERcBfB2VZkeltpqIats0cqIZMLCXP3zcyaUKGYQeIBT6XjsQ==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.0.3",
+        "array.prototype.flat": "^1.2.1",
+        "array.prototype.flatmap": "^1.2.1",
+        "es5-shim": "^4.5.13",
+        "es6-shim": "^0.35.5",
+        "function.prototype.name": "^1.1.0",
+        "globalthis": "^1.0.0",
+        "object.entries": "^1.1.0",
+        "object.fromentries": "^2.0.0 || ^1.0.0",
+        "object.getownpropertydescriptors": "^2.0.3",
+        "object.values": "^1.1.0",
+        "promise.allsettled": "^1.0.0",
+        "promise.prototype.finally": "^3.1.0",
+        "string.prototype.matchall": "^4.0.0 || ^3.0.1",
+        "string.prototype.padend": "^3.0.0",
+        "string.prototype.padstart": "^3.0.0",
+        "symbol.prototype.description": "^1.0.0"
+      }
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ajv-errors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
+      "dev": true
+    },
+    "ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true
+    },
+    "ansi-align": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
+      "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==",
+      "dev": true,
+      "requires": {
+        "string-width": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
+    "ansi-colors": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
+      "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==",
+      "dev": true
+    },
+    "ansi-html": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
+      "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4=",
+      "dev": true
+    },
+    "ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "ansi-to-html": {
+      "version": "0.6.14",
+      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.6.14.tgz",
+      "integrity": "sha512-7ZslfB1+EnFSDO5Ju+ue5Y6It19DRnZXWv8jrGHgIlPna5Mh4jz7BV5jCbQneXNFurQcKoolaaAjHtgSBfOIuA==",
+      "dev": true,
+      "requires": {
+        "entities": "^1.1.2"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "app-root-dir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz",
+      "integrity": "sha1-OBh+wt6nV3//Az/8sSFyaS/24Rg=",
+      "dev": true
+    },
+    "aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+      "dev": true
+    },
+    "are-we-there-yet": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "dev": true,
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      }
+    },
+    "arr-diff": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
+      "dev": true
+    },
+    "arr-flatten": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
+      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
+      "dev": true
+    },
+    "arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
+      "dev": true
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
+      "dev": true
+    },
+    "array-includes": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz",
+      "integrity": "sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2",
+        "get-intrinsic": "^1.1.1",
+        "is-string": "^1.0.5"
+      }
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
+      "dev": true
+    },
+    "array-unique": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
+      "dev": true
+    },
+    "array.prototype.flat": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz",
+      "integrity": "sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.1"
+      }
+    },
+    "array.prototype.flatmap": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz",
+      "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.1",
+        "function-bind": "^1.1.1"
+      }
+    },
+    "array.prototype.map": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.map/-/array.prototype.map-1.0.3.tgz",
+      "integrity": "sha512-nNcb30v0wfDyIe26Yif3PcV1JXQp4zEeEfupG7L4SRjnD6HLbO5b2a7eVSba53bOx4YCHYMBHt+Fp4vYstneRA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.1",
+        "es-array-method-boxes-properly": "^1.0.0",
+        "is-string": "^1.0.5"
+      }
+    },
+    "arrify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
+      "dev": true
+    },
+    "asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        }
+      }
+    },
+    "assert": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz",
+      "integrity": "sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "util": "0.10.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
+          "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=",
+          "dev": true
+        },
+        "util": {
+          "version": "0.10.3",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
+          "dev": true,
+          "requires": {
+            "inherits": "2.0.1"
+          }
+        }
+      }
+    },
+    "assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
+      "dev": true
+    },
+    "async-each": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
+      "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
+      "dev": true,
+      "optional": true
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "dev": true
+    },
+    "at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true
+    },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "dev": true
+    },
+    "autoprefixer": {
+      "version": "9.8.6",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
+      "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001109",
+        "colorette": "^1.2.1",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "postcss": "^7.0.32",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "axe-core": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.0.tgz",
+      "integrity": "sha512-1uIESzroqpaTzt9uX48HO+6gfnKu3RwvWdCcWSrX4csMInJfCo1yvKPNXCwXFRpJqRW25tiASb6No0YH57PXqg==",
+      "dev": true
+    },
+    "babel-loader": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
+      "integrity": "sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==",
+      "dev": true,
+      "requires": {
+        "find-cache-dir": "^3.3.1",
+        "loader-utils": "^1.4.0",
+        "make-dir": "^3.1.0",
+        "schema-utils": "^2.6.5"
+      },
+      "dependencies": {
+        "find-cache-dir": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
+          "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
+          "dev": true,
+          "requires": {
+            "commondir": "^1.0.1",
+            "make-dir": "^3.0.2",
+            "pkg-dir": "^4.1.0"
+          }
+        },
+        "make-dir": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+          "dev": true,
+          "requires": {
+            "semver": "^6.0.0"
+          }
+        },
+        "pkg-dir": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+          "dev": true,
+          "requires": {
+            "find-up": "^4.0.0"
+          }
+        }
+      }
+    },
+    "babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "dev": true,
+      "requires": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "babel-plugin-emotion": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz",
+      "integrity": "sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/serialize": "^0.11.16",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      }
+    },
+    "babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
+    "babel-plugin-polyfill-corejs2": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.0.tgz",
+      "integrity": "sha512-9bNwiR0dS881c5SHnzCmmGlMkJLl0OUZvxrxHo9w/iNoRuqaPjqlvBf4HrovXtQs/au5yKkpcdgfT1cC5PAZwg==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.13.11",
+        "@babel/helper-define-polyfill-provider": "^0.2.0",
+        "semver": "^6.1.1"
+      }
+    },
+    "babel-plugin-polyfill-corejs3": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.1.7.tgz",
+      "integrity": "sha512-u+gbS9bbPhZWEeyy1oR/YaaSpod/KDT07arZHb80aTpl8H5ZBq+uN1nN9/xtX7jQyfLdPfoqI4Rue/MQSWJquw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.1.5",
+        "core-js-compat": "^3.8.1"
+      },
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.1.5.tgz",
+          "integrity": "sha512-nXuzCSwlJ/WKr8qxzW816gwyT6VZgiJG17zR40fou70yfAcqjoNyTLl/DQ+FExw5Hx5KNqshmN8Ldl/r2N7cTg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-compilation-targets": "^7.13.0",
+            "@babel/helper-module-imports": "^7.12.13",
+            "@babel/helper-plugin-utils": "^7.13.0",
+            "@babel/traverse": "^7.13.0",
+            "debug": "^4.1.1",
+            "lodash.debounce": "^4.0.8",
+            "resolve": "^1.14.2",
+            "semver": "^6.1.2"
+          }
+        }
+      }
+    },
+    "babel-plugin-polyfill-regenerator": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.0.tgz",
+      "integrity": "sha512-J7vKbCuD2Xi/eEHxquHN14bXAW9CXtecwuLrOIDJtcZzTaPzV1VdEfoUf9AzcRBMolKUQKM9/GVojeh0hFiqMg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.2.0"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "base": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
+      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
+      "dev": true,
+      "requires": {
+        "cache-base": "^1.0.1",
+        "class-utils": "^0.3.5",
+        "component-emitter": "^1.2.1",
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.1",
+        "mixin-deep": "^1.2.0",
+        "pascalcase": "^0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        }
+      }
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true
+    },
+    "batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=",
+      "dev": true
+    },
+    "better-opn": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-2.1.1.tgz",
+      "integrity": "sha512-kIPXZS5qwyKiX/HcRvDYfmBQUa8XP17I0mYZZ0y4UhpYOSvtsLHDYqmomS+Mj20aDvD3knEiQ0ecQy2nhio3yA==",
+      "dev": true,
+      "requires": {
+        "open": "^7.0.3"
+      }
+    },
+    "big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
+    "bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true
+    },
+    "bn.js": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
+      "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==",
+      "dev": true
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "dev": true,
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        },
+        "qs": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+          "dev": true
+        }
+      }
+    },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
+    },
+    "boxen": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz",
+      "integrity": "sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==",
+      "dev": true,
+      "requires": {
+        "ansi-align": "^3.0.0",
+        "camelcase": "^5.3.1",
+        "chalk": "^3.0.0",
+        "cli-boxes": "^2.2.0",
+        "string-width": "^4.1.0",
+        "term-size": "^2.1.0",
+        "type-fest": "^0.8.1",
+        "widest-line": "^3.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "brorand": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
+      "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=",
+      "dev": true
+    },
+    "browserify-aes": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
+      "dev": true,
+      "requires": {
+        "buffer-xor": "^1.0.3",
+        "cipher-base": "^1.0.0",
+        "create-hash": "^1.1.0",
+        "evp_bytestokey": "^1.0.3",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "browserify-cipher": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
+      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
+      "dev": true,
+      "requires": {
+        "browserify-aes": "^1.0.4",
+        "browserify-des": "^1.0.0",
+        "evp_bytestokey": "^1.0.0"
+      }
+    },
+    "browserify-des": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
+      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
+      "dev": true,
+      "requires": {
+        "cipher-base": "^1.0.1",
+        "des.js": "^1.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "browserify-rsa": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
+      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^5.0.0",
+        "randombytes": "^2.0.1"
+      }
+    },
+    "browserify-sign": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz",
+      "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^5.1.1",
+        "browserify-rsa": "^4.0.1",
+        "create-hash": "^1.2.0",
+        "create-hmac": "^1.1.7",
+        "elliptic": "^6.5.3",
+        "inherits": "^2.0.4",
+        "parse-asn1": "^5.1.5",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "dev": true
+        }
+      }
+    },
+    "browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "dev": true,
+      "requires": {
+        "pako": "~1.0.5"
+      }
+    },
+    "browserslist": {
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz",
+      "integrity": "sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "^1.0.30001181",
+        "colorette": "^1.2.1",
+        "electron-to-chromium": "^1.3.649",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.70"
+      }
+    },
+    "buffer": {
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
+      "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
+      "dev": true,
+      "requires": {
+        "base64-js": "^1.0.2",
+        "ieee754": "^1.1.4",
+        "isarray": "^1.0.0"
+      }
+    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "dev": true
+    },
+    "buffer-xor": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
+      "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
+      "dev": true
+    },
+    "builtin-status-codes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
+      "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
+      "dev": true
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "dev": true
+    },
+    "cacache": {
+      "version": "12.0.4",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
+      "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.5.5",
+        "chownr": "^1.1.1",
+        "figgy-pudding": "^3.5.1",
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.1.15",
+        "infer-owner": "^1.0.3",
+        "lru-cache": "^5.1.1",
+        "mississippi": "^3.0.0",
+        "mkdirp": "^0.5.1",
+        "move-concurrently": "^1.0.1",
+        "promise-inflight": "^1.0.1",
+        "rimraf": "^2.6.3",
+        "ssri": "^6.0.1",
+        "unique-filename": "^1.1.1",
+        "y18n": "^4.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "dev": true,
+          "requires": {
+            "yallist": "^3.0.2"
+          }
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+          "dev": true
+        }
+      }
+    },
+    "cache-base": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
+      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
+      "dev": true,
+      "requires": {
+        "collection-visit": "^1.0.0",
+        "component-emitter": "^1.2.1",
+        "get-value": "^2.0.6",
+        "has-value": "^1.0.0",
+        "isobject": "^3.0.1",
+        "set-value": "^2.0.0",
+        "to-object-path": "^0.3.0",
+        "union-value": "^1.0.0",
+        "unset-value": "^1.0.0"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        }
+      }
+    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "call-me-maybe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
+      "integrity": "sha1-JtII6onje1y95gJQoV8DHBak1ms=",
+      "dev": true
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
+    },
+    "camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dev": true,
+      "requires": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001205",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001205.tgz",
+      "integrity": "sha512-TL1GrS5V6LElbitPazidkBMD9sa448bQDDLrumDqaggmKFcuU2JW1wTOHJPukAcOMtEmLcmDJEzfRrf+GjM0Og==",
+      "dev": true
+    },
+    "case-sensitive-paths-webpack-plugin": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
+      "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "dev": true
+    },
+    "character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "dev": true
+    },
+    "character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "dev": true
+    },
+    "chokidar": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
+      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.1",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.5.0"
+      }
+    },
+    "chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "dev": true
+    },
+    "chrome-trace-event": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "dev": true
+    },
+    "cipher-base": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
+      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "class-utils": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
+      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
+      "dev": true,
+      "requires": {
+        "arr-union": "^3.1.0",
+        "define-property": "^0.2.5",
+        "isobject": "^3.0.0",
+        "static-extend": "^0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        }
+      }
+    },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==",
+      "dev": true
+    },
+    "clean-css": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
+      "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
+      "dev": true,
+      "requires": {
+        "source-map": "~0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "dev": true
+    },
+    "cli-boxes": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
+      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==",
+      "dev": true
+    },
+    "cli-table3": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.0.tgz",
+      "integrity": "sha512-gnB85c3MGC7Nm9I/FkiasNBOKjOiO1RNuXXarQms37q4QMpWdlbBgD/VnOStA2faG1dpXMv31RFApjX1/QdgWQ==",
+      "dev": true,
+      "requires": {
+        "colors": "^1.1.2",
+        "object-assign": "^4.1.0",
+        "string-width": "^4.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        }
+      }
+    },
+    "clipboard": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+      "dev": true
+    },
+    "collection-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
+      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
+      "dev": true,
+      "requires": {
+        "map-visit": "^1.0.0",
+        "object-visit": "^1.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "colorette": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
+      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
+      "dev": true
+    },
+    "colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true,
+      "optional": true
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "comma-separated-tokens": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+      "dev": true
+    },
+    "commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "dev": true
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
+      "dev": true
+    },
+    "component-emitter": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
+      "dev": true
+    },
+    "compute-scroll-into-view": {
+      "version": "1.0.17",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz",
+      "integrity": "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "console-browserify": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
+      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
+      "dev": true
+    },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+      "dev": true
+    },
+    "constants-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
+      "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=",
+      "dev": true
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "dev": true
+    },
+    "convert-source-map": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
+      "dev": true
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
+      "dev": true
+    },
+    "copy-concurrently": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
+      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.1.1",
+        "fs-write-stream-atomic": "^1.0.8",
+        "iferr": "^0.1.5",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.4",
+        "run-queue": "^1.0.0"
+      }
+    },
+    "copy-descriptor": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
+      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
+      "dev": true
+    },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "dev": true,
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
+    "core-js": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.13.0.tgz",
+      "integrity": "sha512-iWDbiyha1M5vFwPFmQnvRv+tJzGbFAm6XimJUT0NgHYW3xZEs1SkCAcasWSVFxpI2Xb/V1DDJckq3v90+bQnog==",
+      "dev": true
+    },
+    "core-js-compat": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.11.0.tgz",
+      "integrity": "sha512-3wsN9YZJohOSDCjVB0GequOyHax8zFiogSX3XWLE28M1Ew7dTU57tgHjIylSBKSIouwmLBp3g61sKMz/q3xEGA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.16.4",
+        "semver": "7.0.0"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.16.5",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.5.tgz",
+          "integrity": "sha512-C2HAjrM1AI/djrpAUU/tr4pml1DqLIzJKSLDBXBrNErl9ZCCTXdhwxdJjYc16953+mBWf7Lw+uUJgpgb8cN71A==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001214",
+            "colorette": "^1.2.2",
+            "electron-to-chromium": "^1.3.719",
+            "escalade": "^3.1.1",
+            "node-releases": "^1.1.71"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001218",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001218.tgz",
+          "integrity": "sha512-0ASydOWSy3bB88FbDpJSTt+PfDwnMqrym3yRZfqG8EXSQ06OZhF+q5wgYP/EN+jJMERItNcDQUqMyNjzZ+r5+Q==",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.722",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.722.tgz",
+          "integrity": "sha512-aAsc906l0RBsVTsGTK+KirVfey9eNtxyejdkbNzkISGxb7AFna3Kf0qvsp8tMttzBt9Bz3HddtYQ+++/PZtRYA==",
+          "dev": true
+        },
+        "semver": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+          "dev": true
+        }
+      }
+    },
+    "core-js-pure": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.10.0.tgz",
+      "integrity": "sha512-CC582enhrFZStO4F8lGI7QL3SYx7/AIRc+IdSi3btrQGrVsTawo5K/crmKbRrQ+MOMhNX4v+PATn0k2NN6wI7A==",
+      "dev": true
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "dev": true
+    },
+    "cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dev": true,
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      }
+    },
+    "cp-file": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/cp-file/-/cp-file-7.0.0.tgz",
+      "integrity": "sha512-0Cbj7gyvFVApzpK/uhCtQ/9kE9UnYpxMzaq5nQQC/Dh4iaj5fxp7iEFIullrYwzj8nf0qnsI1Qsx34hAeAebvw==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^3.0.0",
+        "nested-error-stacks": "^2.0.0",
+        "p-event": "^4.1.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+          "dev": true,
+          "requires": {
+            "semver": "^6.0.0"
+          }
+        }
+      }
+    },
+    "cpy": {
+      "version": "8.1.2",
+      "resolved": "https://registry.npmjs.org/cpy/-/cpy-8.1.2.tgz",
+      "integrity": "sha512-dmC4mUesv0OYH2kNFEidtf/skUwv4zePmGeepjyyJ0qTo5+8KhA1o99oIAwVVLzQMAeDJml74d6wPPKb6EZUTg==",
+      "dev": true,
+      "requires": {
+        "arrify": "^2.0.1",
+        "cp-file": "^7.0.0",
+        "globby": "^9.2.0",
+        "has-glob": "^1.0.0",
+        "junk": "^3.1.0",
+        "nested-error-stacks": "^2.1.0",
+        "p-all": "^2.1.0",
+        "p-filter": "^2.1.0",
+        "p-map": "^3.0.0"
+      },
+      "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
+          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
+          "dev": true
+        },
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+          "dev": true,
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "dir-glob": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz",
+          "integrity": "sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==",
+          "dev": true,
+          "requires": {
+            "path-type": "^3.0.0"
+          }
+        },
+        "fast-glob": {
+          "version": "2.2.7",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
+          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
+          "dev": true,
+          "requires": {
+            "@mrmlnc/readdir-enhanced": "^2.2.1",
+            "@nodelib/fs.stat": "^1.1.2",
+            "glob-parent": "^3.1.0",
+            "is-glob": "^4.0.0",
+            "merge2": "^1.2.3",
+            "micromatch": "^3.1.10"
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "dev": true,
+          "requires": {
+            "is-glob": "^3.1.0",
+            "path-dirname": "^1.0.0"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "dev": true,
+              "requires": {
+                "is-extglob": "^2.1.0"
+              }
+            }
+          }
+        },
+        "globby": {
+          "version": "9.2.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
+          "integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
+          "dev": true,
+          "requires": {
+            "@types/glob": "^7.1.1",
+            "array-union": "^1.0.2",
+            "dir-glob": "^2.2.2",
+            "fast-glob": "^2.2.6",
+            "glob": "^7.1.3",
+            "ignore": "^4.0.3",
+            "pify": "^4.0.1",
+            "slash": "^2.0.0"
+          }
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
+          }
+        },
+        "p-map": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
+          "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==",
+          "dev": true,
+          "requires": {
+            "aggregate-error": "^3.0.0"
+          }
+        },
+        "path-type": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+          "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+          "dev": true,
+          "requires": {
+            "pify": "^3.0.0"
+          },
+          "dependencies": {
+            "pify": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+              "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+              "dev": true
+            }
+          }
+        },
+        "slash": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+          "dev": true
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "dev": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        }
+      }
+    },
+    "create-ecdh": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
+      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.1.0",
+        "elliptic": "^6.5.3"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        }
+      }
+    },
+    "create-hash": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
+      "dev": true,
+      "requires": {
+        "cipher-base": "^1.0.1",
+        "inherits": "^2.0.1",
+        "md5.js": "^1.3.4",
+        "ripemd160": "^2.0.1",
+        "sha.js": "^2.4.0"
+      }
+    },
+    "create-hmac": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
+      "dev": true,
+      "requires": {
+        "cipher-base": "^1.0.3",
+        "create-hash": "^1.1.0",
+        "inherits": "^2.0.1",
+        "ripemd160": "^2.0.0",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      }
+    },
+    "create-react-context": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
+      "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
+      "dev": true,
+      "requires": {
+        "gud": "^1.0.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "crypto-browserify": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
+      "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
+      "dev": true,
+      "requires": {
+        "browserify-cipher": "^1.0.0",
+        "browserify-sign": "^4.0.0",
+        "create-ecdh": "^4.0.0",
+        "create-hash": "^1.1.0",
+        "create-hmac": "^1.1.0",
+        "diffie-hellman": "^5.0.0",
+        "inherits": "^2.0.1",
+        "pbkdf2": "^3.0.3",
+        "public-encrypt": "^4.0.0",
+        "randombytes": "^2.0.0",
+        "randomfill": "^1.0.3"
+      }
+    },
+    "css-loader": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
+      "integrity": "sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.3.1",
+        "cssesc": "^3.0.0",
+        "icss-utils": "^4.1.1",
+        "loader-utils": "^1.2.3",
+        "normalize-path": "^3.0.0",
+        "postcss": "^7.0.32",
+        "postcss-modules-extract-imports": "^2.0.0",
+        "postcss-modules-local-by-default": "^3.0.2",
+        "postcss-modules-scope": "^2.2.0",
+        "postcss-modules-values": "^3.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "schema-utils": "^2.7.0",
+        "semver": "^6.3.0"
+      }
+    },
+    "css-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^3.2.1",
+        "domutils": "^1.7.0",
+        "nth-check": "^1.0.2"
+      }
+    },
+    "css-what": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
+      "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
+      "dev": true
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
+    "csstype": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+      "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==",
+      "dev": true
+    },
+    "cyclist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
+      "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
+      "dev": true
+    },
+    "debug": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dev": true,
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
+      "dev": true
+    },
+    "deep-object-diff": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/deep-object-diff/-/deep-object-diff-1.1.0.tgz",
+      "integrity": "sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==",
+      "dev": true
+    },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true
+    },
+    "define-properties": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
+      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "dev": true,
+      "requires": {
+        "object-keys": "^1.0.12"
+      }
+    },
+    "define-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+      "dev": true,
+      "requires": {
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
+      },
+      "dependencies": {
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        }
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "dev": true
+    },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "dev": true,
+      "optional": true
+    },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+      "dev": true
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "dev": true
+    },
+    "des.js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
+      "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
+      "dev": true
+    },
+    "detect-port": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz",
+      "integrity": "sha512-E+B1gzkl2gqxt1IhUzwjrxBKRqx1UzC3WLONHinn8S3T6lwV/agVCyitiFOsGJ/eYuEUBvD71MZHy3Pv1G9doQ==",
+      "dev": true,
+      "requires": {
+        "address": "^1.0.1",
+        "debug": "^2.6.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "diffie-hellman": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.1.0",
+        "miller-rabin": "^4.0.0",
+        "randombytes": "^2.0.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        }
+      }
+    },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "requires": {
+        "path-type": "^4.0.0"
+      }
+    },
+    "dom-converter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+      "dev": true,
+      "requires": {
+        "utila": "~0.4"
+      }
+    },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+          "dev": true
+        },
+        "entities": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+          "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+          "dev": true
+        }
+      }
+    },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
+      "dev": true
+    },
+    "domain-browser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
+      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
+      "dev": true
+    },
+    "domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+      "dev": true
+    },
+    "domhandler": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "1"
+      }
+    },
+    "domutils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "dev": true,
+      "requires": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
+    "dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "dotenv": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==",
+      "dev": true
+    },
+    "dotenv-defaults": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz",
+      "integrity": "sha512-6fPRo9o/3MxKvmRZBD3oNFdxODdhJtIy1zcJeUSCs6HCy4tarUpd+G67UTU9tF6OWXeSPqsm4fPAB+2eY9Rt9Q==",
+      "dev": true,
+      "requires": {
+        "dotenv": "^6.2.0"
+      },
+      "dependencies": {
+        "dotenv": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz",
+          "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==",
+          "dev": true
+        }
+      }
+    },
+    "dotenv-expand": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
+      "dev": true
+    },
+    "dotenv-webpack": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-1.8.0.tgz",
+      "integrity": "sha512-o8pq6NLBehtrqA8Jv8jFQNtG9nhRtVqmoD4yWbgUyoU3+9WBlPe+c2EAiaJok9RB28QvrWvdWLZGeTT5aATDMg==",
+      "dev": true,
+      "requires": {
+        "dotenv-defaults": "^1.0.2"
+      }
+    },
+    "downshift": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/downshift/-/downshift-6.1.3.tgz",
+      "integrity": "sha512-RA1MuaNcTbt0j+sVLhSs8R2oZbBXYAtdQP/V+uHhT3DoDteZzJPjlC+LQVm9T07Wpvo84QXaZtUCePLDTDwGXg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "compute-scroll-into-view": "^1.0.17",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+          "dev": true
+        }
+      }
+    },
+    "duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
+    },
+    "duplexify": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
+      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
+      "dev": true
+    },
+    "electron-to-chromium": {
+      "version": "1.3.705",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.705.tgz",
+      "integrity": "sha512-agtrL5vLSOIK89sE/YSzAgqCw76eZ60gf3J7Tid5RfLbSp5H4nWL28/dIV+H+ZhNNi1JNiaF62jffwYsAyXc0g==",
+      "dev": true
+    },
+    "element-resize-detector": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.2.tgz",
+      "integrity": "sha512-+LOXRkCJc4I5WhEJxIDjhmE3raF8jtOMBDqSCgZTMz2TX3oXAX5pE2+MDeopJlGdXzP7KzPbBJaUGfNaP9HG4A==",
+      "dev": true,
+      "requires": {
+        "batch-processor": "1.0.0"
+      }
+    },
+    "elliptic": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.11.9",
+        "brorand": "^1.1.0",
+        "hash.js": "^1.0.0",
+        "hmac-drbg": "^1.0.1",
+        "inherits": "^2.0.4",
+        "minimalistic-assert": "^1.0.1",
+        "minimalistic-crypto-utils": "^1.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        }
+      }
+    },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+      "dev": true
+    },
+    "emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true
+    },
+    "emotion-theming": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-10.0.27.tgz",
+      "integrity": "sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@emotion/weak-memoize": "0.2.5",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
+      "dev": true
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "enhanced-resolve": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
+      "integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "memory-fs": "^0.5.0",
+        "tapable": "^1.0.0"
+      },
+      "dependencies": {
+        "memory-fs": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
+          "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
+          "dev": true,
+          "requires": {
+            "errno": "^0.1.3",
+            "readable-stream": "^2.0.1"
+          }
+        }
+      }
+    },
+    "entities": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
+      "dev": true
+    },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "es-abstract": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz",
+      "integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.2",
+        "is-callable": "^1.2.3",
+        "is-negative-zero": "^2.0.1",
+        "is-regex": "^1.1.2",
+        "is-string": "^1.0.5",
+        "object-inspect": "^1.9.0",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "string.prototype.trimend": "^1.0.4",
+        "string.prototype.trimstart": "^1.0.4",
+        "unbox-primitive": "^1.0.0"
+      }
+    },
+    "es-array-method-boxes-properly": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
+      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==",
+      "dev": true
+    },
+    "es-get-iterator": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.2.tgz",
+      "integrity": "sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.0",
+        "has-symbols": "^1.0.1",
+        "is-arguments": "^1.1.0",
+        "is-map": "^2.0.2",
+        "is-set": "^2.0.2",
+        "is-string": "^1.0.5",
+        "isarray": "^2.0.5"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+          "dev": true
+        }
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
+    "es5-shim": {
+      "version": "4.5.15",
+      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.15.tgz",
+      "integrity": "sha512-FYpuxEjMeDvU4rulKqFdukQyZSTpzhg4ScQHrAosrlVpR6GFyaw14f74yn2+4BugniIS0Frpg7TvwZocU4ZMTw==",
+      "dev": true
+    },
+    "es6-shim": {
+      "version": "0.35.6",
+      "resolved": "https://registry.npmjs.org/es6-shim/-/es6-shim-0.35.6.tgz",
+      "integrity": "sha512-EmTr31wppcaIAgblChZiuN/l9Y7DPyw8Xtbg7fIVngn6zMW+IEBJDJngeKC3x6wr0V/vcA2wqeFnaw1bFJbDdA==",
+      "dev": true
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "eslint-scope": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
+      "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.1.0",
+        "estraverse": "^4.1.1"
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.2.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
+        }
+      }
+    },
+    "estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+      "dev": true
+    },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true
+    },
+    "events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true
+    },
+    "evp_bytestokey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
+      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
+      "dev": true,
+      "requires": {
+        "md5.js": "^1.3.4",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "expand-brackets": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+      "dev": true,
+      "requires": {
+        "debug": "^2.3.3",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "posix-character-classes": "^0.1.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "dev": true,
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        },
+        "qs": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+          "dev": true
+        }
+      }
+    },
+    "extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dev": true,
+      "requires": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "dev": true,
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "extglob": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+      "dev": true,
+      "requires": {
+        "array-unique": "^0.3.2",
+        "define-property": "^1.0.0",
+        "expand-brackets": "^2.1.4",
+        "extend-shallow": "^2.0.1",
+        "fragment-cache": "^0.2.1",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "fast-glob": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
+      "integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.0",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.2",
+        "picomatch": "^2.2.1"
+      }
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "fastq": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.0.tgz",
+      "integrity": "sha512-7Eczs8gIPDrVzT+EksYBcupqMyxSHXXrHOLRRxU2/DicV8789MRBRR8+Hc2uWzUupOs4YS4JzBmBxjjCVBxD/g==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "dev": true,
+      "requires": {
+        "format": "^0.2.0"
+      }
+    },
+    "figgy-pudding": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
+      "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
+      "dev": true
+    },
+    "file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "file-system-cache": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-1.0.5.tgz",
+      "integrity": "sha1-hCWbNqK7uNPW6xAh0xMv/mTP/08=",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.3.5",
+        "fs-extra": "^0.30.0",
+        "ramda": "^0.21.0"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "0.30.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz",
+          "integrity": "sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^2.1.0",
+            "klaw": "^1.0.0",
+            "path-is-absolute": "^1.0.0",
+            "rimraf": "^2.2.8"
+          }
+        }
+      }
+    },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
+    "filesize": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
+      "integrity": "sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg==",
+      "dev": true
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "find-cache-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
+      "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
+      "dev": true,
+      "requires": {
+        "commondir": "^1.0.1",
+        "make-dir": "^2.0.0",
+        "pkg-dir": "^3.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        },
+        "pkg-dir": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+          "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+          "dev": true,
+          "requires": {
+            "find-up": "^3.0.0"
+          }
+        }
+      }
+    },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "dev": true
+    },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "flush-write-stream": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
+      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.3.6"
+      }
+    },
+    "for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
+      "dev": true
+    },
+    "fork-ts-checker-webpack-plugin": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz",
+      "integrity": "sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.5.5",
+        "chalk": "^2.4.1",
+        "micromatch": "^3.1.10",
+        "minimatch": "^3.0.4",
+        "semver": "^5.6.0",
+        "tapable": "^1.0.0",
+        "worker-rpc": "^0.1.0"
+      },
+      "dependencies": {
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "dev": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        }
+      }
+    },
+    "form-data": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+      "dev": true,
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=",
+      "dev": true
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
+      "dev": true
+    },
+    "fragment-cache": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
+      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+      "dev": true,
+      "requires": {
+        "map-cache": "^0.2.2"
+      }
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+      "dev": true
+    },
+    "from2": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
+      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0"
+      }
+    },
+    "fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "requires": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "dependencies": {
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        }
+      }
+    },
+    "fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
+    "fs-monkey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
+      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
+      "dev": true
+    },
+    "fs-write-stream-atomic": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
+      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "iferr": "^0.1.5",
+        "imurmurhash": "^0.1.4",
+        "readable-stream": "1 || 2"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "function.prototype.name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.4.tgz",
+      "integrity": "sha512-iqy1pIotY/RmhdFZygSSlW0wko2yxkSCKqsuv4pr8QESohpYyG/Z7B/XXvPRKTJS//960rgguE5mSRUsDdaJrQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2",
+        "functions-have-names": "^1.2.2"
+      }
+    },
+    "functions-have-names": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.2.tgz",
+      "integrity": "sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA==",
+      "dev": true
+    },
+    "fuse.js": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz",
+      "integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==",
+      "dev": true
+    },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      }
+    },
+    "gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true
+    },
+    "get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
+      "dev": true
+    },
+    "glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-base": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
+      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
+      "dev": true,
+      "requires": {
+        "glob-parent": "^2.0.0",
+        "is-glob": "^2.0.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
+          "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
+          "dev": true,
+          "requires": {
+            "is-glob": "^2.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        }
+      }
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "glob-promise": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/glob-promise/-/glob-promise-3.4.0.tgz",
+      "integrity": "sha512-q08RJ6O+eJn+dVanerAndJwIcumgbDdYiUT7zFQl3Wm1xD6fBKtah7H8ZJChj4wP+8C+QfeVy8xautR7rdmKEw==",
+      "dev": true,
+      "requires": {
+        "@types/glob": "*"
+      }
+    },
+    "glob-to-regexp": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
+      "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
+      "dev": true
+    },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "dev": true,
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
+    "global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "requires": {
+        "global-prefix": "^3.0.0"
+      }
+    },
+    "global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
+      "requires": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "dependencies": {
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
+    "globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true
+    },
+    "globalthis": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.2.tgz",
+      "integrity": "sha512-ZQnSFO1la8P7auIOQECnm0sSuoMeaSq0EEdXMBFF2QJO4uNcwbyhSgG3MruWNbFTqCLmxVwGOl7LZ9kASvHdeQ==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3"
+      }
+    },
+    "globby": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz",
+      "integrity": "sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==",
+      "dev": true,
+      "requires": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.1.1",
+        "ignore": "^5.1.4",
+        "merge2": "^1.3.0",
+        "slash": "^3.0.0"
+      }
+    },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
+      "dev": true
+    },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==",
+      "dev": true
+    },
+    "gzip-size": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
+      "integrity": "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==",
+      "dev": true,
+      "requires": {
+        "duplexer": "^0.1.1",
+        "pify": "^4.0.1"
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-bigints": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
+      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
+      "dev": true
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "has-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-glob/-/has-glob-1.0.0.tgz",
+      "integrity": "sha1-mqqe7b/7G6OZCnsAEPtnjuAIEgc=",
+      "dev": true,
+      "requires": {
+        "is-glob": "^3.0.0"
+      },
+      "dependencies": {
+        "is-glob": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+          "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^2.1.0"
+          }
+        }
+      }
+    },
+    "has-symbols": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+      "dev": true
+    },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+      "dev": true
+    },
+    "has-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
+      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
+      "dev": true,
+      "requires": {
+        "get-value": "^2.0.6",
+        "has-values": "^1.0.0",
+        "isobject": "^3.0.0"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        }
+      }
+    },
+    "has-values": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
+      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
+      "dev": true,
+      "requires": {
+        "is-number": "^3.0.0",
+        "kind-of": "^4.0.0"
+      },
+      "dependencies": {
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "kind-of": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
+          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "hash-base": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
+      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "dev": true
+        }
+      }
+    },
+    "hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
+    "hast-util-parse-selector": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+      "dev": true
+    },
+    "hastscript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+      "dev": true,
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.0.0",
+        "property-information": "^5.0.0",
+        "space-separated-tokens": "^1.0.0"
+      }
+    },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
+    },
+    "highlight.js": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.2.tgz",
+      "integrity": "sha512-oFLl873u4usRM9K63j4ME9u3etNF0PLiJhSQ8rdfuL51Wn3zkD6drf9ZW0dOzjnZI22YYG24z30JcmfCZjMgYg==",
+      "dev": true
+    },
+    "hmac-drbg": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
+      "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
+      "dev": true,
+      "requires": {
+        "hash.js": "^1.0.3",
+        "minimalistic-assert": "^1.0.0",
+        "minimalistic-crypto-utils": "^1.0.1"
+      }
+    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dev": true,
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+      "dev": true
+    },
+    "html-entities": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz",
+      "integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==",
+      "dev": true
+    },
+    "html-minifier-terser": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
+      "integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
+      "dev": true,
+      "requires": {
+        "camel-case": "^4.1.1",
+        "clean-css": "^4.2.3",
+        "commander": "^4.1.1",
+        "he": "^1.2.0",
+        "param-case": "^3.0.3",
+        "relateurl": "^0.2.7",
+        "terser": "^4.6.3"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+          "dev": true
+        }
+      }
+    },
+    "html-webpack-plugin": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.2.tgz",
+      "integrity": "sha512-q5oYdzjKUIPQVjOosjgvCHQOv9Ett9CYYHlgvJeXG0qQvdSojnBq4vAdQBwn1+yGveAwHCoe/rMR86ozX3+c2A==",
+      "dev": true,
+      "requires": {
+        "@types/html-minifier-terser": "^5.0.0",
+        "@types/tapable": "^1.0.5",
+        "@types/webpack": "^4.41.8",
+        "html-minifier-terser": "^5.0.1",
+        "loader-utils": "^1.2.3",
+        "lodash": "^4.17.20",
+        "pretty-error": "^2.1.1",
+        "tapable": "^1.1.3",
+        "util.promisify": "1.0.0"
+      }
+    },
+    "htmlparser2": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^1.3.1",
+        "domhandler": "^2.3.0",
+        "domutils": "^1.5.1",
+        "entities": "^1.1.1",
+        "inherits": "^2.0.1",
+        "readable-stream": "^3.1.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "dev": true,
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "dev": true
+        }
+      }
+    },
+    "https-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
+      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
+      "dev": true
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "icss-utils": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz",
+      "integrity": "sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14"
+      }
+    },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true
+    },
+    "iferr": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
+      "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
+      "dev": true
+    },
+    "ignore": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+      "dev": true
+    },
+    "immer": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
+      "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==",
+      "dev": true
+    },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        }
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "dev": true
+    },
+    "indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true
+    },
+    "infer-owner": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
+      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
+    },
+    "internal-slot": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
+      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "interpret": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
+      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
+      "dev": true
+    },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "ip": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
+      "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
+      "dev": true
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "dev": true
+    },
+    "is-accessor-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "dev": true
+    },
+    "is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "dev": true,
+      "requires": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      }
+    },
+    "is-arguments": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
+      "integrity": "sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0"
+      }
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "dev": true
+    },
+    "is-bigint": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.1.tgz",
+      "integrity": "sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==",
+      "dev": true
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-boolean-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.0.tgz",
+      "integrity": "sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0"
+      }
+    },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "dev": true
+    },
+    "is-callable": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
+      "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
+      "dev": true
+    },
+    "is-core-module": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
+      "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-data-descriptor": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "is-date-object": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
+      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==",
+      "dev": true
+    },
+    "is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "dev": true
+    },
+    "is-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+      "dev": true,
+      "requires": {
+        "is-accessor-descriptor": "^0.1.6",
+        "is-data-descriptor": "^0.1.4",
+        "kind-of": "^5.0.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+          "dev": true
+        }
+      }
+    },
+    "is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true
+    },
+    "is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+      "dev": true,
+      "requires": {
+        "number-is-nan": "^1.0.0"
+      }
+    },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "dev": true
+    },
+    "is-map": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
+      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
+      "dev": true
+    },
+    "is-negative-zero": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
+      "integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==",
+      "dev": true
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "is-number-object": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.4.tgz",
+      "integrity": "sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==",
+      "dev": true
+    },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.1"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        }
+      }
+    },
+    "is-regex": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz",
+      "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "is-root": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
+      "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==",
+      "dev": true
+    },
+    "is-set": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
+      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
+      "dev": true
+    },
+    "is-string": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz",
+      "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==",
+      "dev": true
+    },
+    "is-symbol": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
+      "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+      "dev": true
+    },
+    "is-wsl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
+      "dev": true
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "isobject": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
+      "integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
+      "dev": true
+    },
+    "iterate-iterator": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/iterate-iterator/-/iterate-iterator-1.0.1.tgz",
+      "integrity": "sha512-3Q6tudGN05kbkDQDI4CqjaBf4qf85w6W6GnuZDtUVYwKgtC1q8yxYX7CZed7N+tLzQqS6roujWvszf13T+n9aw==",
+      "dev": true
+    },
+    "iterate-value": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/iterate-value/-/iterate-value-1.0.2.tgz",
+      "integrity": "sha512-A6fMAio4D2ot2r/TYzr4yUWrmwNdsN5xL7+HUiyACE4DXm+q8HtPcnFTp+NnW3k4N05tZ7FVYFFb2CR13NxyHQ==",
+      "dev": true,
+      "requires": {
+        "es-get-iterator": "^1.0.2",
+        "iterate-iterator": "^1.0.1"
+      }
+    },
+    "jest-worker": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true
+    },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "json5": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "jsonfile": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+      "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "junk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz",
+      "integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==",
+      "dev": true
+    },
+    "kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true
+    },
+    "klaw": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
+      "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.9"
+      }
+    },
+    "kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true
+    },
+    "klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
+      "dev": true
+    },
+    "lazy-universal-dotenv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lazy-universal-dotenv/-/lazy-universal-dotenv-3.0.1.tgz",
+      "integrity": "sha512-prXSYk799h3GY3iOWnC6ZigYzMPjxN2svgjJ9shk7oMadSNX3wXy0B6F32PMJv7qtMnrIbUxoEHzbutvxR2LBQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.0",
+        "app-root-dir": "^1.0.2",
+        "core-js": "^3.0.4",
+        "dotenv": "^8.0.0",
+        "dotenv-expand": "^5.1.0"
+      }
+    },
+    "lines-and-columns": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
+      "dev": true
+    },
+    "loader-runner": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
+      "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==",
+      "dev": true
+    },
+    "loader-utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "dev": true,
+      "requires": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        }
+      }
+    },
+    "locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^4.1.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
+      "dev": true
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "dev": true,
+      "requires": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      }
+    },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "make-cancellable-promise": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.0.0.tgz",
+      "integrity": "sha512-+YO6Grg2uy/z8Mv3uV90OP6yAUHIF43YGgEFbejmBrK9VWFsVO6DvzFMcopXr9wCNg3/QIltIKiSCROC7zFB2g==",
+      "dev": true
+    },
+    "make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "requires": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
+    "make-event-props": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.2.0.tgz",
+      "integrity": "sha512-BmWFkm/jZzVH9A0tEBdkjAARUz/eha+5IRyfOndeSMKRadkgR5DawoBHoRwLxkYmjJOI5bHkXKpaZocxj+dKgg==",
+      "dev": true
+    },
+    "map-cache": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
+      "dev": true
+    },
+    "map-or-similar": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
+      "integrity": "sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=",
+      "dev": true
+    },
+    "map-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
+      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
+      "dev": true,
+      "requires": {
+        "object-visit": "^1.0.0"
+      }
+    },
+    "markdown-to-jsx": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.2.tgz",
+      "integrity": "sha512-O8DMCl32V34RrD+ZHxcAPc2+kYytuDIoQYjY36RVdsLK7uHjgNVvFec4yv0X6LgB4YEZgSvK5QtFi5YVqEpoMA==",
+      "dev": true
+    },
+    "md5.js": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
+      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
+      "dev": true,
+      "requires": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
+      "dev": true
+    },
+    "memfs": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.2.2.tgz",
+      "integrity": "sha512-RE0CwmIM3CEvpcdK3rZ19BC4E6hv9kADkMN5rPduRak58cNArWLi/9jFLsa4rhsjfVxMP3v0jO7FHXq7SvFY5Q==",
+      "dev": true,
+      "requires": {
+        "fs-monkey": "1.0.3"
+      }
+    },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
+      "dev": true
+    },
+    "memoizerific": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
+      "integrity": "sha1-fIekZGREwy11Q4VwkF8tvRsagFo=",
+      "dev": true,
+      "requires": {
+        "map-or-similar": "^1.5.0"
+      }
+    },
+    "memory-fs": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
+      "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
+      "dev": true,
+      "requires": {
+        "errno": "^0.1.3",
+        "readable-stream": "^2.0.1"
+      }
+    },
+    "merge-class-names": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.4.0.tgz",
+      "integrity": "sha512-xNdBM7s+6uD+vNZJEymqrFbMBCDGzoA8clZTcj2F1XIy1QQKF+wjFVv7iDZFfdCBnViTdt54A4Ye2lmBsXrBjQ==",
+      "dev": true
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
+      "dev": true
+    },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
+      "dev": true
+    },
+    "microevent.ts": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
+      "integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.2.3"
+      }
+    },
+    "miller-rabin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
+      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.0.0",
+        "brorand": "^1.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        }
+      }
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true
+    },
+    "mime-db": {
+      "version": "1.47.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.47.0.tgz",
+      "integrity": "sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==",
+      "dev": true
+    },
+    "mime-types": {
+      "version": "2.1.30",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.30.tgz",
+      "integrity": "sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==",
+      "dev": true,
+      "requires": {
+        "mime-db": "1.47.0"
+      }
+    },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "dev": true,
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
+    "minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "dev": true
+    },
+    "minimalistic-crypto-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
+      "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
+    "minipass": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
+      "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "minipass-collect": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
+      "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
+    "minipass-flush": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
+    "minipass-pipeline": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
+    "minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      }
+    },
+    "mississippi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
+      "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
+      "dev": true,
+      "requires": {
+        "concat-stream": "^1.5.0",
+        "duplexify": "^3.4.2",
+        "end-of-stream": "^1.1.0",
+        "flush-write-stream": "^1.0.0",
+        "from2": "^2.1.0",
+        "parallel-transform": "^1.1.0",
+        "pump": "^3.0.0",
+        "pumpify": "^1.3.3",
+        "stream-each": "^1.1.0",
+        "through2": "^2.0.0"
+      }
+    },
+    "mixin-deep": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
+      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
+      "dev": true,
+      "requires": {
+        "for-in": "^1.0.2",
+        "is-extendable": "^1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "dev": true,
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "move-concurrently": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
+      "integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.1.1",
+        "copy-concurrently": "^1.0.0",
+        "fs-write-stream-atomic": "^1.0.8",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.4",
+        "run-queue": "^1.0.3"
+      }
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "dev": true,
+      "optional": true
+    },
+    "nanomatch": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
+      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
+      "dev": true,
+      "requires": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "fragment-cache": "^0.2.1",
+        "is-windows": "^1.0.2",
+        "kind-of": "^6.0.2",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      }
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
+      "dev": true
+    },
+    "neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
+    },
+    "nested-error-stacks": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-2.1.0.tgz",
+      "integrity": "sha512-AO81vsIO1k1sM4Zrd6Hu7regmJN1NSiAja10gc4bX3F0wd+9rQmcuHQaHVQCYIEC8iFXnE+mavh23GOt7wBgug==",
+      "dev": true
+    },
+    "no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "requires": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node-ensure": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/node-ensure/-/node-ensure-0.0.0.tgz",
+      "integrity": "sha1-7K52QVDemYYexcgQ/V0Jaxg5Mqc=",
+      "dev": true
+    },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "dev": true
+    },
+    "node-libs-browser": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
+      "integrity": "sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==",
+      "dev": true,
+      "requires": {
+        "assert": "^1.1.1",
+        "browserify-zlib": "^0.2.0",
+        "buffer": "^4.3.0",
+        "console-browserify": "^1.1.0",
+        "constants-browserify": "^1.0.0",
+        "crypto-browserify": "^3.11.0",
+        "domain-browser": "^1.1.1",
+        "events": "^3.0.0",
+        "https-browserify": "^1.0.0",
+        "os-browserify": "^0.3.0",
+        "path-browserify": "0.0.1",
+        "process": "^0.11.10",
+        "punycode": "^1.2.4",
+        "querystring-es3": "^0.2.0",
+        "readable-stream": "^2.3.3",
+        "stream-browserify": "^2.0.1",
+        "stream-http": "^2.7.2",
+        "string_decoder": "^1.0.0",
+        "timers-browserify": "^2.0.4",
+        "tty-browserify": "0.0.0",
+        "url": "^0.11.0",
+        "util": "^0.11.0",
+        "vm-browserify": "^1.0.1"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+          "dev": true
+        }
+      }
+    },
+    "node-modules-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
+      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=",
+      "dev": true
+    },
+    "node-releases": {
+      "version": "1.1.71",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.71.tgz",
+      "integrity": "sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg==",
+      "dev": true
+    },
+    "normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "dev": true,
+      "requires": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
+    "nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "dev": true,
+      "requires": {
+        "boolbase": "~1.0.0"
+      }
+    },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
+    "number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+      "dev": true
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
+    },
+    "object-copy": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
+      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
+      "dev": true,
+      "requires": {
+        "copy-descriptor": "^0.1.0",
+        "define-property": "^0.2.5",
+        "kind-of": "^3.0.3"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "object-inspect": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
+      "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
+      "dev": true
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
+    },
+    "object-visit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
+      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.0"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        }
+      }
+    },
+    "object.assign": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "has-symbols": "^1.0.1",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "object.entries": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.3.tgz",
+      "integrity": "sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.1",
+        "has": "^1.0.3"
+      }
+    },
+    "object.fromentries": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.4.tgz",
+      "integrity": "sha512-EsFBshs5RUUpQEY1D4q/m59kMfz4YJvxuNCJcv/jWwOJr34EaVnG11ZrZa0UHB3wnzV1wx8m58T4hQL8IuNXlQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2",
+        "has": "^1.0.3"
+      }
+    },
+    "object.getownpropertydescriptors": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz",
+      "integrity": "sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2"
+      }
+    },
+    "object.pick": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.1"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        }
+      }
+    },
+    "object.values": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.3.tgz",
+      "integrity": "sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2",
+        "has": "^1.0.3"
+      }
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "dev": true,
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "open": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "dev": true,
+      "requires": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "dependencies": {
+        "is-wsl": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+          "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+          "dev": true,
+          "requires": {
+            "is-docker": "^2.0.0"
+          }
+        }
+      }
+    },
+    "os-browserify": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
+      "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=",
+      "dev": true
+    },
+    "overlayscrollbars": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-1.13.1.tgz",
+      "integrity": "sha512-gIQfzgGgu1wy80EB4/6DaJGHMEGmizq27xHIESrzXq0Y/J0Ay1P3DWk6tuVmEPIZH15zaBlxeEJOqdJKmowHCQ==",
+      "dev": true
+    },
+    "p-all": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/p-all/-/p-all-2.1.0.tgz",
+      "integrity": "sha512-HbZxz5FONzz/z2gJfk6bFca0BCiSRF8jU3yCsWOen/vR6lZjfPOu/e7L3uFzTW1i0H8TlC3vqQstEJPQL4/uLA==",
+      "dev": true,
+      "requires": {
+        "p-map": "^2.0.0"
+      },
+      "dependencies": {
+        "p-map": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
+          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
+          "dev": true
+        }
+      }
+    },
+    "p-event": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/p-event/-/p-event-4.2.0.tgz",
+      "integrity": "sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==",
+      "dev": true,
+      "requires": {
+        "p-timeout": "^3.1.0"
+      }
+    },
+    "p-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/p-filter/-/p-filter-2.1.0.tgz",
+      "integrity": "sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==",
+      "dev": true,
+      "requires": {
+        "p-map": "^2.0.0"
+      },
+      "dependencies": {
+        "p-map": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
+          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
+          "dev": true
+        }
+      }
+    },
+    "p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
+      "dev": true
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.2.0"
+      }
+    },
+    "p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "dev": true,
+      "requires": {
+        "aggregate-error": "^3.0.0"
+      }
+    },
+    "p-timeout": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+      "dev": true,
+      "requires": {
+        "p-finally": "^1.0.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
+    "pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "dev": true
+    },
+    "parallel-transform": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
+      "integrity": "sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==",
+      "dev": true,
+      "requires": {
+        "cyclist": "^1.0.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.1.5"
+      }
+    },
+    "param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "dev": true,
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "parse-asn1": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
+      "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
+      "dev": true,
+      "requires": {
+        "asn1.js": "^5.2.0",
+        "browserify-aes": "^1.0.0",
+        "evp_bytestokey": "^1.0.0",
+        "pbkdf2": "^3.0.3",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "dev": true,
+      "requires": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      }
+    },
+    "parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "dev": true
+    },
+    "pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "pascalcase": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
+      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
+      "dev": true
+    },
+    "path-browserify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
+      "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==",
+      "dev": true
+    },
+    "path-dirname": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
+      "dev": true
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
+      "dev": true
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "pbkdf2": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
+      "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==",
+      "dev": true,
+      "requires": {
+        "create-hash": "^1.1.2",
+        "create-hmac": "^1.1.4",
+        "ripemd160": "^2.0.1",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      }
+    },
+    "pdfjs-dist": {
+      "version": "2.1.266",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.1.266.tgz",
+      "integrity": "sha512-Jy7o1wE3NezPxozexSbq4ltuLT0Z21ew/qrEiAEeUZzHxMHGk4DUV1D7RuCXg5vJDvHmjX1YssN+we9QfRRgXQ==",
+      "dev": true,
+      "requires": {
+        "node-ensure": "^0.0.0",
+        "worker-loader": "^2.0.0"
+      }
+    },
+    "picomatch": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
+      "integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==",
+      "dev": true
+    },
+    "pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true
+    },
+    "pirates": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
+      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
+      "dev": true,
+      "requires": {
+        "node-modules-regexp": "^1.0.0"
+      }
+    },
+    "pkg-dir": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
+      "integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
+      "dev": true,
+      "requires": {
+        "find-up": "^5.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        }
+      }
+    },
+    "pkg-up": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
+      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
+      "dev": true,
+      "requires": {
+        "find-up": "^3.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        }
+      }
+    },
+    "pnp-webpack-plugin": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
+      "integrity": "sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==",
+      "dev": true,
+      "requires": {
+        "ts-pnp": "^1.1.6"
+      }
+    },
+    "polished": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-4.1.2.tgz",
+      "integrity": "sha512-jq4t3PJUpVRcveC53nnbEX35VyQI05x3tniwp26WFdm1dwaNUBHAi5awa/roBlwQxx1uRhwNSYeAi/aMbfiJCQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.13.17"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.13.17",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz",
+          "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
+    "posix-character-classes": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
+      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
+      "dev": true
+    },
+    "postcss": {
+      "version": "7.0.35",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+      "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-flexbugs-fixes": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz",
+      "integrity": "sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.26"
+      }
+    },
+    "postcss-loader": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.2.0.tgz",
+      "integrity": "sha512-mqgScxHqbiz1yxbnNcPdKYo/6aVt+XExURmEbQlviFVWogDbM4AJ0A/B+ZBpYsJrTRxKw7HyRazg9x0Q9SWwLA==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^7.0.0",
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.4"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
+          "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
+          "dev": true,
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.2.1",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.10.0"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
+      "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.5"
+      }
+    },
+    "postcss-modules-local-by-default": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz",
+      "integrity": "sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^4.1.1",
+        "postcss": "^7.0.32",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz",
+      "integrity": "sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.6",
+        "postcss-selector-parser": "^6.0.0"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz",
+      "integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^4.0.0",
+        "postcss": "^7.0.6"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.5.tgz",
+      "integrity": "sha512-aFYPoYmXbZ1V6HZaSvat08M97A8HqO6Pjz+PiNpw/DhuRrC72XWAdp3hL6wusDCN31sSmcZyMGa2hZEuX+Xfhg==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "dev": true
+    },
+    "preact": {
+      "version": "10.5.13",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.13.tgz",
+      "integrity": "sha512-q/vlKIGNwzTLu+jCcvywgGrt+H/1P/oIRSD6mV4ln3hmlC+Aa34C7yfPI4+5bzW8pONyVXYS7SvXosy2dKKtWQ==",
+      "dev": true
+    },
+    "preact-render-to-string": {
+      "version": "5.1.19",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.1.19.tgz",
+      "integrity": "sha512-bj8sn/oytIKO6RtOGSS/1+5CrQyRSC99eLUnEVbqUa6MzJX5dYh7wu9bmT0d6lm/Vea21k9KhCQwvr2sYN3rrQ==",
+      "dev": true,
+      "requires": {
+        "pretty-format": "^3.8.0"
+      }
+    },
+    "pretty-error": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz",
+      "integrity": "sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.20",
+        "renderkid": "^2.0.4"
+      }
+    },
+    "pretty-format": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
+      "integrity": "sha1-v77VbV6ad2ZF9LH/eqGjrE+jw4U=",
+      "dev": true
+    },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true
+    },
+    "prismjs": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.23.0.tgz",
+      "integrity": "sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==",
+      "dev": true,
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
+      "dev": true
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "promise-inflight": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
+      "dev": true
+    },
+    "promise.allsettled": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise.allsettled/-/promise.allsettled-1.0.4.tgz",
+      "integrity": "sha512-o73CbvQh/OnPFShxHcHxk0baXR2a1m4ozb85ha0H14VEoi/EJJLa9mnPfEWJx9RjA9MLfhdjZ8I6HhWtBa64Ag==",
+      "dev": true,
+      "requires": {
+        "array.prototype.map": "^1.0.3",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2",
+        "get-intrinsic": "^1.0.2",
+        "iterate-value": "^1.0.2"
+      }
+    },
+    "promise.prototype.finally": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/promise.prototype.finally/-/promise.prototype.finally-3.1.2.tgz",
+      "integrity": "sha512-A2HuJWl2opDH0EafgdjwEw7HysI8ff/n4lW4QEVBCUXFk9QeGecBWv0Deph0UmLe3tTNYegz8MOjsVuE6SMoJA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0-next.0",
+        "function-bind": "^1.1.1"
+      }
+    },
+    "prompts": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.1.tgz",
+      "integrity": "sha512-EQyfIuO2hPDsX1L/blblV+H7I0knhgAd82cVneCwcdND9B8AuCDuRcBH6yIcG4dFzlOUqbazQqwGjx5xmsNLuQ==",
+      "dev": true,
+      "requires": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "property-information": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+      "dev": true,
+      "requires": {
+        "xtend": "^4.0.0"
+      }
+    },
+    "proxy-addr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
+      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
+      "dev": true,
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
+      "dev": true
+    },
+    "public-encrypt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
+      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.1.0",
+        "browserify-rsa": "^4.0.0",
+        "create-hash": "^1.1.0",
+        "parse-asn1": "^5.0.0",
+        "randombytes": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+          "dev": true
+        }
+      }
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "pumpify": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
+      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+      "dev": true,
+      "requires": {
+        "duplexify": "^3.6.0",
+        "inherits": "^2.0.3",
+        "pump": "^2.0.0"
+      },
+      "dependencies": {
+        "pump": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+          "dev": true,
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        }
+      }
+    },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true
+    },
+    "qs": {
+      "version": "6.10.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
+      "integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==",
+      "dev": true,
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
+    "querystring": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
+      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
+      "dev": true
+    },
+    "querystring-es3": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
+      "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
+      "dev": true
+    },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
+    "ramda": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.21.0.tgz",
+      "integrity": "sha1-oAGr7bP/YQd9T/HVd9RN536NCjU=",
+      "dev": true
+    },
+    "randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "randomfill": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
+      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
+      "dev": true,
+      "requires": {
+        "randombytes": "^2.0.5",
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "dev": true
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "dev": true,
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "react-colorful": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.1.4.tgz",
+      "integrity": "sha512-WOEpRNz8Oo2SEU4eYQ279jEKFSjpFPa9Vi2U/K0DGwP9wOQ8wYkJcNSd5Qbv1L8OFvyKDCbWekjftXaU5mbmtg==",
+      "dev": true
+    },
+    "react-dev-utils": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
+      "integrity": "sha512-dx0LvIGHcOPtKbeiSUM4jqpBl3TcY7CDjZdfOIcKeznE7BWr9dg0iPG90G5yfVQ+p/rGNMXdbfStvzQZEVEi4A==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.10.4",
+        "address": "1.1.2",
+        "browserslist": "4.14.2",
+        "chalk": "2.4.2",
+        "cross-spawn": "7.0.3",
+        "detect-port-alt": "1.1.6",
+        "escape-string-regexp": "2.0.0",
+        "filesize": "6.1.0",
+        "find-up": "4.1.0",
+        "fork-ts-checker-webpack-plugin": "4.1.6",
+        "global-modules": "2.0.0",
+        "globby": "11.0.1",
+        "gzip-size": "5.1.1",
+        "immer": "8.0.1",
+        "is-root": "2.1.0",
+        "loader-utils": "2.0.0",
+        "open": "^7.0.2",
+        "pkg-up": "3.1.0",
+        "prompts": "2.4.0",
+        "react-error-overlay": "^6.0.9",
+        "recursive-readdir": "2.2.2",
+        "shell-quote": "1.7.2",
+        "strip-ansi": "6.0.0",
+        "text-table": "0.2.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
+          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.4"
+          }
+        },
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "browserslist": {
+          "version": "4.14.2",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.2.tgz",
+          "integrity": "sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001125",
+            "electron-to-chromium": "^1.3.564",
+            "escalade": "^3.0.2",
+            "node-releases": "^1.1.61"
+          }
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "detect-port-alt": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
+          "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
+          "dev": true,
+          "requires": {
+            "address": "^1.0.1",
+            "debug": "^2.6.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        },
+        "prompts": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz",
+          "integrity": "sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ==",
+          "dev": true,
+          "requires": {
+            "kleur": "^3.0.3",
+            "sisteransi": "^1.0.5"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        }
+      }
+    },
+    "react-dom": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.1"
+      }
+    },
+    "react-draggable": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.3.tgz",
+      "integrity": "sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==",
+      "dev": true,
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.6.0"
+      }
+    },
+    "react-error-overlay": {
+      "version": "6.0.9",
+      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
+      "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==",
+      "dev": true
+    },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==",
+      "dev": true
+    },
+    "react-helmet-async": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.0.9.tgz",
+      "integrity": "sha512-N+iUlo9WR3/u9qGMmP4jiYfaD6pe9IvDTapZLFJz2D3xlTlCM1Bzy4Ab3g72Nbajo/0ZyW+W9hdz8Hbe4l97pQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.2.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "react-input-autosize": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz",
+      "integrity": "sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==",
+      "dev": true,
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "dev": true
+    },
+    "react-pdf": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-4.2.0.tgz",
+      "integrity": "sha512-Ao44mZszfPwtCUsrXHtXnhM+czTvPxfG5wqssbWgj2onL70TKSOKGzQfCH4csCnNDOKji/Pc/s0Og70/VOE+Rg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "make-cancellable-promise": "^1.0.0",
+        "make-event-props": "^1.1.0",
+        "merge-class-names": "^1.1.1",
+        "pdfjs-dist": "2.1.266",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "dev": true,
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
+    "react-popper-tooltip": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz",
+      "integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@popperjs/core": "^2.5.4",
+        "react-popper": "^2.2.4"
+      }
+    },
+    "react-select": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-3.2.0.tgz",
+      "integrity": "sha512-B/q3TnCZXEKItO0fFN/I0tWOX3WJvi/X2wtdffmwSQVRwg5BpValScTO1vdic9AxlUgmeSzib2hAZAwIUQUZGQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/cache": "^10.0.9",
+        "@emotion/core": "^10.0.9",
+        "@emotion/css": "^10.0.9",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-input-autosize": "^3.0.0",
+        "react-transition-group": "^4.3.0"
+      }
+    },
+    "react-sizeme": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.1.tgz",
+      "integrity": "sha512-9Hf1NLgSbny1bha77l9HwvwwxQUJxFUqi44Ih+y3evA+PezBpGdCGlnvye6avss2cIgs9PgdYgMnfuzJWn/RUw==",
+      "dev": true,
+      "requires": {
+        "element-resize-detector": "^1.2.2",
+        "invariant": "^2.2.4",
+        "shallowequal": "^1.1.0",
+        "throttle-debounce": "^3.0.1"
+      }
+    },
+    "react-syntax-highlighter": {
+      "version": "13.5.3",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz",
+      "integrity": "sha512-crPaF+QGPeHNIblxxCdf2Lg936NAHKhNhuMzRL3F9ct6aYXL3NcZtCL0Rms9+qVo6Y1EQLdXGypBNSbPL/r+qg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.1.1",
+        "lowlight": "^1.14.0",
+        "prismjs": "^1.21.0",
+        "refractor": "^3.1.0"
+      }
+    },
+    "react-textarea-autosize": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.2.tgz",
+      "integrity": "sha512-JrMWVgQSaExQByP3ggI1eA8zF4mF0+ddVuX7acUeK2V7bmrpjVOY72vmLz2IXFJSAXoY3D80nEzrn0GWajWK3Q==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.10.2",
+        "use-composed-ref": "^1.0.0",
+        "use-latest": "^1.0.0"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "read-pkg": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+      "dev": true,
+      "requires": {
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^2.5.0",
+        "parse-json": "^5.0.0",
+        "type-fest": "^0.6.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+          "dev": true
+        }
+      }
+    },
+    "read-pkg-up": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+      "dev": true,
+      "requires": {
+        "find-up": "^4.1.0",
+        "read-pkg": "^5.2.0",
+        "type-fest": "^0.8.1"
+      }
+    },
+    "readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dev": true,
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "readdirp": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
+      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "recursive-readdir": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
+      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
+      "dev": true,
+      "requires": {
+        "minimatch": "3.0.4"
+      }
+    },
+    "refractor": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.3.1.tgz",
+      "integrity": "sha512-vaN6R56kLMuBszHSWlwTpcZ8KTMG6aUCok4GrxYDT20UIOXxOc5o6oDc8tNTzSlH3m2sI+Eu9Jo2kVdDcUTWYw==",
+      "dev": true,
+      "requires": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.23.0"
+      }
+    },
+    "regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true
+    },
+    "regenerate-unicode-properties": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
+      "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
+      "dev": true,
+      "requires": {
+        "regenerate": "^1.4.0"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
+      "dev": true
+    },
+    "regenerator-transform": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.5.tgz",
+      "integrity": "sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "regex-not": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
+      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^3.0.2",
+        "safe-regex": "^1.1.0"
+      }
+    },
+    "regexp.prototype.flags": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz",
+      "integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "regexpu-core": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
+      "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==",
+      "dev": true,
+      "requires": {
+        "regenerate": "^1.4.0",
+        "regenerate-unicode-properties": "^8.2.0",
+        "regjsgen": "^0.5.1",
+        "regjsparser": "^0.6.4",
+        "unicode-match-property-ecmascript": "^1.0.4",
+        "unicode-match-property-value-ecmascript": "^1.2.0"
+      }
+    },
+    "regjsgen": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
+      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==",
+      "dev": true
+    },
+    "regjsparser": {
+      "version": "0.6.9",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz",
+      "integrity": "sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==",
+      "dev": true,
+      "requires": {
+        "jsesc": "~0.5.0"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
+          "dev": true
+        }
+      }
+    },
+    "relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
+      "dev": true
+    },
+    "remove-trailing-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
+      "dev": true,
+      "optional": true
+    },
+    "renderkid": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.5.tgz",
+      "integrity": "sha512-ccqoLg+HLOHq1vdfYNm4TBeaCDIi1FLt3wGojTDSvdewUv65oTmI3cnT2E4hRjl1gzKZIPK+KZrXzlUYKnR+vQ==",
+      "dev": true,
+      "requires": {
+        "css-select": "^2.0.2",
+        "dom-converter": "^0.2",
+        "htmlparser2": "^3.10.1",
+        "lodash": "^4.17.20",
+        "strip-ansi": "^3.0.0"
+      }
+    },
+    "repeat-element": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz",
+      "integrity": "sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==",
+      "dev": true
+    },
+    "repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
+      "dev": true
+    },
+    "resolve": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      }
+    },
+    "resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true
+    },
+    "resolve-url": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
+      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
+      "dev": true
+    },
+    "ret": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
+      "dev": true
+    },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "ripemd160": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
+      "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
+      "dev": true,
+      "requires": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1"
+      }
+    },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "run-queue": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
+      "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.1.1"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "safe-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+      "dev": true,
+      "requires": {
+        "ret": "~0.1.10"
+      }
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "scheduler": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "schema-utils": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+      "dev": true,
+      "requires": {
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
+        "ajv-keywords": "^3.5.2"
+      }
+    },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "dev": true,
+      "optional": true
+    },
+    "semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          },
+          "dependencies": {
+            "ms": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+              "dev": true
+            }
+          }
+        },
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+          "dev": true
+        }
+      }
+    },
+    "serialize-javascript": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+      "dev": true,
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "serve-favicon": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.5.0.tgz",
+      "integrity": "sha1-k10kDN/g9YBTB/3+ln2IlCosvPA=",
+      "dev": true,
+      "requires": {
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "ms": "2.1.1",
+        "parseurl": "~1.3.2",
+        "safe-buffer": "5.1.1"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+          "dev": true
+        },
+        "safe-buffer": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
+          "dev": true
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "dev": true,
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "dev": true
+    },
+    "set-value": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
+      "dev": true
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
+      "dev": true
+    },
+    "sha.js": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==",
+      "dev": true
+    },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "dev": true
+    },
+    "shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
+    },
+    "shell-quote": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
+      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
+      "dev": true
+    },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
+    "signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
+      "dev": true
+    },
+    "sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "dev": true
+    },
+    "slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true
+    },
+    "snapdragon": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
+      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
+      "dev": true,
+      "requires": {
+        "base": "^0.11.1",
+        "debug": "^2.2.0",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "map-cache": "^0.2.2",
+        "source-map": "^0.5.6",
+        "source-map-resolve": "^0.5.0",
+        "use": "^3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "snapdragon-node": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
+      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
+      "dev": true,
+      "requires": {
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.0",
+        "snapdragon-util": "^3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        }
+      }
+    },
+    "snapdragon-util": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
+      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.2.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "source-list-map": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
+      "dev": true
+    },
+    "source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true
+    },
+    "source-map-resolve": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
+      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
+      "dev": true,
+      "requires": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0",
+        "resolve-url": "^0.2.1",
+        "source-map-url": "^0.4.0",
+        "urix": "^0.1.0"
+      }
+    },
+    "source-map-support": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "source-map-url": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
+      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
+      "dev": true
+    },
+    "space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+      "dev": true
+    },
+    "spdx-correct": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
+      "dev": true,
+      "requires": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "requires": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz",
+      "integrity": "sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==",
+      "dev": true
+    },
+    "split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^3.0.0"
+      }
+    },
+    "ssri": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
+      "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
+      "dev": true,
+      "requires": {
+        "figgy-pudding": "^3.5.1"
+      }
+    },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
+    },
+    "static-extend": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
+      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
+      "dev": true,
+      "requires": {
+        "define-property": "^0.2.5",
+        "object-copy": "^0.1.0"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        }
+      }
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+      "dev": true
+    },
+    "store2": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/store2/-/store2-2.12.0.tgz",
+      "integrity": "sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==",
+      "dev": true
+    },
+    "stream-browserify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
+      "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
+      "dev": true,
+      "requires": {
+        "inherits": "~2.0.1",
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "stream-each": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
+      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "stream-http": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
+      "integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==",
+      "dev": true,
+      "requires": {
+        "builtin-status-codes": "^3.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.3.6",
+        "to-arraybuffer": "^1.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
+    "stream-shift": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
+      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
+      "dev": true
+    },
+    "string-hash": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
+      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
+      "dev": true
+    },
+    "string-width": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+      "dev": true,
+      "requires": {
+        "code-point-at": "^1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
+        "strip-ansi": "^3.0.0"
+      }
+    },
+    "string.prototype.matchall": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz",
+      "integrity": "sha512-pknFIWVachNcyqRfaQSeu/FUfpvJTe4uskUSZ9Wc1RijsPuzbZ8TyYT8WCNnntCjUEqQ3vUHMAfVj2+wLAisPQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2",
+        "has-symbols": "^1.0.1",
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.3.1",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "string.prototype.padend": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.2.tgz",
+      "integrity": "sha512-/AQFLdYvePENU3W5rgurfWSMU6n+Ww8n/3cUt7E+vPBB/D7YDG8x+qjoFs4M/alR2bW7Qg6xMjVwWUOvuQ0XpQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2"
+      }
+    },
+    "string.prototype.padstart": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.padstart/-/string.prototype.padstart-3.1.2.tgz",
+      "integrity": "sha512-HDpngIP3pd0DeazrfqzuBrQZa+D2arKWquEHfGt5LzVjd+roLC3cjqVI0X8foaZz5rrrhcu8oJAQamW8on9dqw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2"
+      }
+    },
+    "string.prototype.trimend": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
+      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
+      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "style-loader": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.3.0.tgz",
+      "integrity": "sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^2.7.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
+    "styled-jsx": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-3.4.4.tgz",
+      "integrity": "sha512-PkZi/col7R4cpwSPY2n4JjpcTYfBgaWg/1mt0+1E/pmkXL+Pik5Kr/snYMWj90+N3kDw+BqfnJOogdRw4621GQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "7.12.5",
+        "@babel/types": "7.8.3",
+        "babel-plugin-syntax-jsx": "6.18.0",
+        "convert-source-map": "1.7.0",
+        "loader-utils": "1.2.3",
+        "source-map": "0.7.3",
+        "string-hash": "1.1.3",
+        "stylis": "3.5.4",
+        "stylis-rule-sheet": "0.0.10"
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.12.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz",
+          "integrity": "sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.12.5"
+          },
+          "dependencies": {
+            "@babel/types": {
+              "version": "7.13.14",
+              "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.14.tgz",
+              "integrity": "sha512-A2aa3QTkWoyqsZZFl56MLUsfmh7O0gN41IPvXAE/++8ojpbz12SszD7JEGYVdn4f9Kt4amIei07swF1h4AqmmQ==",
+              "dev": true,
+              "requires": {
+                "@babel/helper-validator-identifier": "^7.12.11",
+                "lodash": "^4.17.19",
+                "to-fast-properties": "^2.0.0"
+              }
+            }
+          }
+        },
+        "@babel/types": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.3.tgz",
+          "integrity": "sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "emojis-list": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
+          "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
+          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^2.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        }
+      }
+    },
+    "stylis": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
+      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==",
+      "dev": true
+    },
+    "stylis-rule-sheet": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
+      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==",
+      "dev": true
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "symbol.prototype.description": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/symbol.prototype.description/-/symbol.prototype.description-1.0.4.tgz",
+      "integrity": "sha512-fZkHwJ8ZNRVRzF/+/2OtygyyH06CjC0YZAQRHu9jKKw8RXlJpbizEHvGRUu22Qkg182wJk1ugb5Aovcv3UPrww==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "es-abstract": "^1.18.0-next.2",
+        "has-symbols": "^1.0.1",
+        "object.getownpropertydescriptors": "^2.1.2"
+      }
+    },
+    "tapable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
+      "dev": true
+    },
+    "tar": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
+      "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
+      "dev": true,
+      "requires": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^3.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "dependencies": {
+        "chownr": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+          "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
+        }
+      }
+    },
+    "telejson": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/telejson/-/telejson-5.1.1.tgz",
+      "integrity": "sha512-aU7x+nwodmODJPXhU9sC/REOcX/dx1tNbyeOFV1PCTh6e9Mj+bnyfQ7sr13zfJYya9BtpGwnUNn9Fd76Ybj2eg==",
+      "dev": true,
+      "requires": {
+        "@types/is-function": "^1.0.0",
+        "global": "^4.4.0",
+        "is-function": "^1.0.2",
+        "is-regex": "^1.1.2",
+        "is-symbol": "^1.0.3",
+        "isobject": "^4.0.0",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3"
+      }
+    },
+    "term-size": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
+      "integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==",
+      "dev": true
+    },
+    "terser": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
+      "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+      "dev": true,
+      "requires": {
+        "commander": "^2.20.0",
+        "source-map": "~0.6.1",
+        "source-map-support": "~0.5.12"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "terser-webpack-plugin": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-3.1.0.tgz",
+      "integrity": "sha512-cjdZte66fYkZ65rQ2oJfrdCAkkhJA7YLYk5eGOcGCSGlq0ieZupRdjedSQXYknMPo2IveQL+tPdrxUkERENCFA==",
+      "dev": true,
+      "requires": {
+        "cacache": "^15.0.5",
+        "find-cache-dir": "^3.3.1",
+        "jest-worker": "^26.2.1",
+        "p-limit": "^3.0.2",
+        "schema-utils": "^2.6.6",
+        "serialize-javascript": "^4.0.0",
+        "source-map": "^0.6.1",
+        "terser": "^4.8.0",
+        "webpack-sources": "^1.4.3"
+      },
+      "dependencies": {
+        "cacache": {
+          "version": "15.0.6",
+          "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.0.6.tgz",
+          "integrity": "sha512-g1WYDMct/jzW+JdWEyjaX2zoBkZ6ZT9VpOyp2I/VMtDsNLffNat3kqPFfi1eDRSK9/SuKGyORDHcQMcPF8sQ/w==",
+          "dev": true,
+          "requires": {
+            "@npmcli/move-file": "^1.0.1",
+            "chownr": "^2.0.0",
+            "fs-minipass": "^2.0.0",
+            "glob": "^7.1.4",
+            "infer-owner": "^1.0.4",
+            "lru-cache": "^6.0.0",
+            "minipass": "^3.1.1",
+            "minipass-collect": "^1.0.2",
+            "minipass-flush": "^1.0.5",
+            "minipass-pipeline": "^1.2.2",
+            "mkdirp": "^1.0.3",
+            "p-map": "^4.0.0",
+            "promise-inflight": "^1.0.1",
+            "rimraf": "^3.0.2",
+            "ssri": "^8.0.1",
+            "tar": "^6.0.2",
+            "unique-filename": "^1.1.1"
+          }
+        },
+        "chownr": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+          "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+          "dev": true
+        },
+        "find-cache-dir": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
+          "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
+          "dev": true,
+          "requires": {
+            "commondir": "^1.0.1",
+            "make-dir": "^3.0.2",
+            "pkg-dir": "^4.1.0"
+          }
+        },
+        "make-dir": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+          "dev": true,
+          "requires": {
+            "semver": "^6.0.0"
+          }
+        },
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "pkg-dir": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+          "dev": true,
+          "requires": {
+            "find-up": "^4.0.0"
+          }
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "ssri": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
+          "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
+          "dev": true,
+          "requires": {
+            "minipass": "^3.1.1"
+          }
+        }
+      }
+    },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
+    "throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "dev": true
+    },
+    "through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "timers-browserify": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
+      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
+      "dev": true,
+      "requires": {
+        "setimmediate": "^1.0.4"
+      }
+    },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "dev": true,
+      "optional": true
+    },
+    "to-arraybuffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
+      "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=",
+      "dev": true
+    },
+    "to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "dev": true
+    },
+    "to-object-path": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
+      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "to-regex": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
+      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
+      "dev": true,
+      "requires": {
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "regex-not": "^1.0.2",
+        "safe-regex": "^1.1.0"
+      }
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=",
+      "dev": true
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
+      "dev": true
+    },
+    "ts-dedent": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.1.1.tgz",
+      "integrity": "sha512-riHuwnzAUCfdIeTBNUq7+Yj+ANnrMXo/7+Z74dIdudS7ys2k8aSGMzpJRMFDF7CLwUTbtvi1ZZff/Wl+XxmqIA==",
+      "dev": true
+    },
+    "ts-essentials": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz",
+      "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==",
+      "dev": true
+    },
+    "ts-pnp": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
+      "integrity": "sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==",
+      "dev": true
+    },
+    "tslib": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+      "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==",
+      "dev": true
+    },
+    "tty-browserify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
+      "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
+      "dev": true
+    },
+    "type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "dev": true
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dev": true,
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
+      "dev": true
+    },
+    "unbox-primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
+      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has-bigints": "^1.0.1",
+        "has-symbols": "^1.0.2",
+        "which-boxed-primitive": "^1.0.2"
+      }
+    },
+    "unfetch": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
+      "integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==",
+      "dev": true
+    },
+    "unicode-canonical-property-names-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==",
+      "dev": true
+    },
+    "unicode-match-property-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
+      "dev": true,
+      "requires": {
+        "unicode-canonical-property-names-ecmascript": "^1.0.4",
+        "unicode-property-aliases-ecmascript": "^1.0.4"
+      }
+    },
+    "unicode-match-property-value-ecmascript": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
+      "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==",
+      "dev": true
+    },
+    "unicode-property-aliases-ecmascript": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
+      "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==",
+      "dev": true
+    },
+    "union-value": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
+      "dev": true,
+      "requires": {
+        "arr-union": "^3.1.0",
+        "get-value": "^2.0.6",
+        "is-extendable": "^0.1.1",
+        "set-value": "^2.0.1"
+      }
+    },
+    "unique-filename": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
+      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
+      "dev": true,
+      "requires": {
+        "unique-slug": "^2.0.0"
+      }
+    },
+    "unique-slug": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
+      "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
+      "dev": true,
+      "requires": {
+        "imurmurhash": "^0.1.4"
+      }
+    },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+      "dev": true
+    },
+    "unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=",
+      "dev": true
+    },
+    "unset-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
+      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
+      "dev": true,
+      "requires": {
+        "has-value": "^0.3.1",
+        "isobject": "^3.0.0"
+      },
+      "dependencies": {
+        "has-value": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
+          "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
+          "dev": true,
+          "requires": {
+            "get-value": "^2.0.3",
+            "has-values": "^0.1.4",
+            "isobject": "^2.0.0"
+          },
+          "dependencies": {
+            "isobject": {
+              "version": "2.1.0",
+              "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+              "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+              "dev": true,
+              "requires": {
+                "isarray": "1.0.0"
+              }
+            }
+          }
+        },
+        "has-values": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
+          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=",
+          "dev": true
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        }
+      }
+    },
+    "upath": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+      "dev": true,
+      "optional": true
+    },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "urix": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
+      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
+      "dev": true
+    },
+    "url": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
+      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
+      "dev": true,
+      "requires": {
+        "punycode": "1.3.2",
+        "querystring": "0.2.0"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
+          "dev": true
+        }
+      }
+    },
+    "url-loader": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.27",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "use": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
+      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
+      "dev": true
+    },
+    "use-composed-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz",
+      "integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==",
+      "dev": true,
+      "requires": {
+        "ts-essentials": "^2.0.3"
+      }
+    },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==",
+      "dev": true
+    },
+    "use-latest": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
+      "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==",
+      "dev": true,
+      "requires": {
+        "use-isomorphic-layout-effect": "^1.0.0"
+      }
+    },
+    "util": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
+      "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
+      "dev": true,
+      "requires": {
+        "inherits": "2.0.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "dev": true
+        }
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "util.promisify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
+      "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "object.getownpropertydescriptors": "^2.0.3"
+      }
+    },
+    "utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
+      "dev": true
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
+      "dev": true
+    },
+    "uuid": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "dev": true
+    },
+    "validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "requires": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
+      "dev": true
+    },
+    "vm-browserify": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
+      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
+      "dev": true
+    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "watchpack": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
+      "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
+      "dev": true,
+      "requires": {
+        "chokidar": "^3.4.1",
+        "graceful-fs": "^4.1.2",
+        "neo-async": "^2.5.0",
+        "watchpack-chokidar2": "^2.0.1"
+      }
+    },
+    "watchpack-chokidar2": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
+      "integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chokidar": "^2.1.8"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "micromatch": "^3.1.4",
+            "normalize-path": "^2.1.1"
+          },
+          "dependencies": {
+            "normalize-path": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+              "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "remove-trailing-separator": "^1.0.1"
+              }
+            }
+          }
+        },
+        "binary-extensions": {
+          "version": "1.13.1",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
+          "dev": true,
+          "optional": true
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "chokidar": {
+          "version": "2.1.8",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
+          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "anymatch": "^2.0.0",
+            "async-each": "^1.0.1",
+            "braces": "^2.3.2",
+            "fsevents": "^1.2.7",
+            "glob-parent": "^3.1.0",
+            "inherits": "^2.0.3",
+            "is-binary-path": "^1.0.0",
+            "is-glob": "^4.0.0",
+            "normalize-path": "^3.0.0",
+            "path-is-absolute": "^1.0.0",
+            "readdirp": "^2.2.1",
+            "upath": "^1.1.1"
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "fsevents": {
+          "version": "1.2.13",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "is-glob": "^3.1.0",
+            "path-dirname": "^1.0.0"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "is-extglob": "^2.1.0"
+              }
+            }
+          }
+        },
+        "is-binary-path": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+          "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "binary-extensions": "^1.0.0"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true,
+          "optional": true
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
+          }
+        },
+        "readdirp": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "graceful-fs": "^4.1.11",
+            "micromatch": "^3.1.10",
+            "readable-stream": "^2.0.2"
+          }
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        }
+      }
+    },
+    "webpack": {
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
+      "integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/wasm-edit": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
+        "acorn": "^6.4.1",
+        "ajv": "^6.10.2",
+        "ajv-keywords": "^3.4.1",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^4.5.0",
+        "eslint-scope": "^4.0.3",
+        "json-parse-better-errors": "^1.0.2",
+        "loader-runner": "^2.4.0",
+        "loader-utils": "^1.2.3",
+        "memory-fs": "^0.4.1",
+        "micromatch": "^3.1.10",
+        "mkdirp": "^0.5.3",
+        "neo-async": "^2.6.1",
+        "node-libs-browser": "^2.2.1",
+        "schema-utils": "^1.0.0",
+        "tapable": "^1.1.3",
+        "terser-webpack-plugin": "^1.4.3",
+        "watchpack": "^1.7.4",
+        "webpack-sources": "^1.4.1"
+      },
+      "dependencies": {
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "terser-webpack-plugin": {
+          "version": "1.4.5",
+          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
+          "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+          "dev": true,
+          "requires": {
+            "cacache": "^12.0.2",
+            "find-cache-dir": "^2.1.0",
+            "is-wsl": "^1.1.0",
+            "schema-utils": "^1.0.0",
+            "serialize-javascript": "^4.0.0",
+            "source-map": "^0.6.1",
+            "terser": "^4.1.2",
+            "webpack-sources": "^1.4.0",
+            "worker-farm": "^1.7.0"
+          }
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "dev": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        }
+      }
+    },
+    "webpack-dev-middleware": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz",
+      "integrity": "sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==",
+      "dev": true,
+      "requires": {
+        "memory-fs": "^0.4.1",
+        "mime": "^2.4.4",
+        "mkdirp": "^0.5.1",
+        "range-parser": "^1.2.1",
+        "webpack-log": "^2.0.0"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "2.5.2",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+          "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
+          "dev": true
+        }
+      }
+    },
+    "webpack-filter-warnings-plugin": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/webpack-filter-warnings-plugin/-/webpack-filter-warnings-plugin-1.2.1.tgz",
+      "integrity": "sha512-Ez6ytc9IseDMLPo0qCuNNYzgtUl8NovOqjIq4uAU8LTD4uoa1w1KpZyyzFtLTEMZpkkOkLfL9eN+KGYdk1Qtwg==",
+      "dev": true
+    },
+    "webpack-hot-middleware": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.25.0.tgz",
+      "integrity": "sha512-xs5dPOrGPCzuRXNi8F6rwhawWvQQkeli5Ro48PRuQh8pYPCPmNnltP9itiUPT4xI8oW+y0m59lyyeQk54s5VgA==",
+      "dev": true,
+      "requires": {
+        "ansi-html": "0.0.7",
+        "html-entities": "^1.2.0",
+        "querystring": "^0.2.0",
+        "strip-ansi": "^3.0.0"
+      }
+    },
+    "webpack-log": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
+      "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^3.0.0",
+        "uuid": "^3.3.2"
+      }
+    },
+    "webpack-sources": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
+      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
+      "dev": true,
+      "requires": {
+        "source-list-map": "^2.0.0",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "webpack-virtual-modules": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.2.2.tgz",
+      "integrity": "sha512-kDUmfm3BZrei0y+1NTHJInejzxfhtU8eDj2M7OKb2IWrPFAeO1SOH2KuQ68MSZu9IGEHcxbkKKR1v18FrUSOmA==",
+      "dev": true,
+      "requires": {
+        "debug": "^3.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      }
+    },
+    "widest-line": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
+      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
+      "dev": true,
+      "requires": {
+        "string-width": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        }
+      }
+    },
+    "worker-farm": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
+      "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
+      "dev": true,
+      "requires": {
+        "errno": "~0.1.7"
+      }
+    },
+    "worker-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-2.0.0.tgz",
+      "integrity": "sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.0.0",
+        "schema-utils": "^0.4.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "0.4.7",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
+          "integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
+    "worker-rpc": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/worker-rpc/-/worker-rpc-0.1.1.tgz",
+      "integrity": "sha512-P1WjMrUB3qgJNI9jfmpZ/htmBEjFh//6l/5y8SD9hg1Ef5zTTVVoRjTrTEzPrNBQvmhMxkoTsjOXN10GWU7aCg==",
+      "dev": true,
+      "requires": {
+        "microevent.ts": "~0.1.1"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true
+    },
+    "y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "dev": true
+    },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true
+    },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true
+    }
+  }
+}
diff --git a/build-system/tasks/storybook/package.json b/build-system/tasks/storybook/package.json
index e654091b97823..63987fcfbff1c 100644
--- a/build-system/tasks/storybook/package.json
+++ b/build-system/tasks/storybook/package.json
@@ -1,20 +1,21 @@
 {
-  "name": "gulp-storybook",
+  "name": "amp-storybook",
   "version": "0.1.0",
-  "description": "Gulp storybook tasks",
+  "description": "amp storybook tasks",
   "main": "index.js",
-  "dependencies": {
-    "@babel/core": "7.9.0",
-    "@babel/preset-react": "7.9.4",
-    "@babel/runtime-corejs3": "7.9.2",
-    "@storybook/addon-a11y": "5.3.18",
-    "@storybook/addon-knobs": "5.3.18",
-    "@storybook/addon-viewport": "5.3.18",
-    "@storybook/preact": "5.3.18",
-    "babel-loader": "8.0.6",
-    "core-js": "3.6.4",
-    "preact": "10.3.4",
-    "preact-render-to-string": "5.1.4",
-    "styled-jsx": "3.2.5"
+  "devDependencies": {
+    "@ampproject/storybook-addon": "1.1.9",
+    "@babel/core": "7.14.3",
+    "@babel/preset-react": "7.13.13",
+    "@babel/runtime-corejs3": "7.14.0",
+    "@storybook/addon-a11y": "6.2.9",
+    "@storybook/addon-knobs": "6.2.9",
+    "@storybook/addon-viewport": "6.2.9",
+    "@storybook/preact": "6.2.9",
+    "babel-loader": "8.2.2",
+    "core-js": "3.13.0",
+    "preact": "10.5.13",
+    "preact-render-to-string": "5.1.19",
+    "styled-jsx": "3.4.4"
   }
 }
diff --git a/build-system/tasks/storybook/preact-env/main.js b/build-system/tasks/storybook/preact-env/main.js
index e2b614ca69e60..d4822a227a278 100644
--- a/build-system/tasks/storybook/preact-env/main.js
+++ b/build-system/tasks/storybook/preact-env/main.js
@@ -14,12 +14,19 @@
  * limitations under the License.
  */
 
-// eslint-disable-next-line local/no-module-exports, no-undef
 module.exports = {
-  stories: ['../../../../extensions/**/*.*/storybook/!(*.amp).js'],
+  stories: [
+    '../../../../src/**/storybook/!(*.amp).js',
+    '../../../../extensions/**/*.*/storybook/!(*.amp).js',
+  ],
   addons: [
-    '@storybook/addon-a11y/register',
+    '@storybook/addon-a11y',
     '@storybook/addon-viewport/register',
     '@storybook/addon-knobs/register',
   ],
+  webpackFinal: async (config) => {
+    // Disable entry point size warnings.
+    config.performance.hints = false;
+    return config;
+  },
 };
diff --git a/build-system/tasks/storybook/preact-env/webpack.config.js b/build-system/tasks/storybook/preact-env/webpack.config.js
index dbedbb4f529ed..ed32db310af15 100644
--- a/build-system/tasks/storybook/preact-env/webpack.config.js
+++ b/build-system/tasks/storybook/preact-env/webpack.config.js
@@ -14,21 +14,26 @@
  * limitations under the License.
  */
 const path = require('path');
+const {DefinePlugin} = require('webpack');
 
-module.exports = {
-  resolveLoader: {
+module.exports = ({config}) => {
+  config.resolveLoader = {
     modules: [
       path.join(__dirname, '../node_modules'),
       path.join(__dirname, '../../../../node_modules'),
     ],
-  },
-  resolve: {
+  };
+  config.resolve = {
     modules: [
       path.join(__dirname, '../node_modules'),
       path.join(__dirname, '../../../../node_modules'),
     ],
-  },
-  module: {
+    alias: {
+      'react': 'preact/compat',
+      'react-dom': 'preact/compat',
+    },
+  };
+  config.module = {
     rules: [
       {
         test: /\.jsx?$/,
@@ -36,6 +41,13 @@ module.exports = {
         exclude: /node_modules/,
         query: {
           presets: [
+            [
+              '@babel/preset-env',
+              {
+                bugfixes: true,
+                targets: {'browsers': ['Last 2 versions']},
+              },
+            ],
             [
               '@babel/preset-react',
               {
@@ -47,6 +59,14 @@ module.exports = {
           ],
         },
       },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
     ],
-  },
+  };
+  // Replaced by minify-replace (babel) in the usual build pipeline
+  // build-system/babel-config/helpers.js#getReplacePlugin
+  config.plugins.push(new DefinePlugin({IS_ESM: false}));
+  return config;
 };
diff --git a/build-system/tasks/storybook/yarn.lock b/build-system/tasks/storybook/yarn.lock
deleted file mode 100644
index 243915ac25167..0000000000000
--- a/build-system/tasks/storybook/yarn.lock
+++ /dev/null
@@ -1,7795 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@babel/code-frame@7.5.5":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
-  integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==
-  dependencies:
-    "@babel/highlight" "^7.0.0"
-
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
-  integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==
-  dependencies:
-    "@babel/highlight" "^7.8.3"
-
-"@babel/compat-data@^7.8.6", "@babel/compat-data@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.9.0.tgz#04815556fc90b0c174abd2c0c1bb966faa036a6c"
-  integrity sha512-zeFQrr+284Ekvd9e7KAX954LkapWiOmQtsfHirhxqfdlX6MEC32iRE+pqUGlYIBchdevaCwvzxWGSy/YBNI85g==
-  dependencies:
-    browserslist "^4.9.1"
-    invariant "^2.2.4"
-    semver "^5.5.0"
-
-"@babel/core@7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
-  integrity sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==
-  dependencies:
-    "@babel/code-frame" "^7.8.3"
-    "@babel/generator" "^7.9.0"
-    "@babel/helper-module-transforms" "^7.9.0"
-    "@babel/helpers" "^7.9.0"
-    "@babel/parser" "^7.9.0"
-    "@babel/template" "^7.8.6"
-    "@babel/traverse" "^7.9.0"
-    "@babel/types" "^7.9.0"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.1"
-    json5 "^2.1.2"
-    lodash "^4.17.13"
-    resolve "^1.3.2"
-    semver "^5.4.1"
-    source-map "^0.5.0"
-
-"@babel/generator@^7.9.0":
-  version "7.9.4"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.4.tgz#12441e90c3b3c4159cdecf312075bf1a8ce2dbce"
-  integrity sha512-rjP8ahaDy/ouhrvCoU1E5mqaitWrxwuNGU+dy1EpaoK48jZay4MdkskKGIMHLZNewg8sAsqpGSREJwP0zH3YQA==
-  dependencies:
-    "@babel/types" "^7.9.0"
-    jsesc "^2.5.1"
-    lodash "^4.17.13"
-    source-map "^0.5.0"
-
-"@babel/helper-annotate-as-pure@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
-  integrity sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.8.3.tgz#c84097a427a061ac56a1c30ebf54b7b22d241503"
-  integrity sha512-5eFOm2SyFPK4Rh3XMMRDjN7lBH0orh3ss0g3rTYZnBQ+r6YPj7lgDyCvPphynHvUrobJmeMignBr6Acw9mAPlw==
-  dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-builder-react-jsx-experimental@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.9.0.tgz#066d80262ade488f9c1b1823ce5db88a4cedaa43"
-  integrity sha512-3xJEiyuYU4Q/Ar9BsHisgdxZsRlsShMe90URZ0e6przL26CCs8NJbDoxH94kKT17PcxlMhsCAwZd90evCo26VQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.8.3"
-    "@babel/helper-module-imports" "^7.8.3"
-    "@babel/types" "^7.9.0"
-
-"@babel/helper-builder-react-jsx@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.9.0.tgz#16bf391990b57732700a3278d4d9a81231ea8d32"
-  integrity sha512-weiIo4gaoGgnhff54GQ3P5wsUQmnSwpkvU0r6ZHq6TzoSzKy4JxHEgnxNytaKbov2a9z/CVNyzliuCOUPEX3Jw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.8.3"
-    "@babel/types" "^7.9.0"
-
-"@babel/helper-compilation-targets@^7.8.7":
-  version "7.8.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.8.7.tgz#dac1eea159c0e4bd46e309b5a1b04a66b53c1dde"
-  integrity sha512-4mWm8DCK2LugIS+p1yArqvG1Pf162upsIsjE7cNBjez+NjliQpVhj20obE520nao0o14DaTnFJv+Fw5a0JpoUw==
-  dependencies:
-    "@babel/compat-data" "^7.8.6"
-    browserslist "^4.9.1"
-    invariant "^2.2.4"
-    levenary "^1.1.1"
-    semver "^5.5.0"
-
-"@babel/helper-create-class-features-plugin@^7.8.3":
-  version "7.8.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.8.6.tgz#243a5b46e2f8f0f674dc1387631eb6b28b851de0"
-  integrity sha512-klTBDdsr+VFFqaDHm5rR69OpEQtO2Qv8ECxHS1mNhJJvaHArR6a1xTf5K/eZW7eZpJbhCx3NW1Yt/sKsLXLblg==
-  dependencies:
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/helper-member-expression-to-functions" "^7.8.3"
-    "@babel/helper-optimise-call-expression" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-replace-supers" "^7.8.6"
-    "@babel/helper-split-export-declaration" "^7.8.3"
-
-"@babel/helper-create-regexp-features-plugin@^7.8.3", "@babel/helper-create-regexp-features-plugin@^7.8.8":
-  version "7.8.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz#5d84180b588f560b7864efaeea89243e58312087"
-  integrity sha512-LYVPdwkrQEiX9+1R29Ld/wTrmQu1SSKYnuOk3g0CkcZMA1p0gsNxJFj/3gBdaJ7Cg0Fnek5z0DsMULePP7Lrqg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.8.3"
-    "@babel/helper-regex" "^7.8.3"
-    regexpu-core "^4.7.0"
-
-"@babel/helper-define-map@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.8.3.tgz#a0655cad5451c3760b726eba875f1cd8faa02c15"
-  integrity sha512-PoeBYtxoZGtct3md6xZOCWPcKuMuk3IHhgxsRRNtnNShebf4C8YonTSblsK4tvDbm+eJAw2HAPOfCr+Q/YRG/g==
-  dependencies:
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/types" "^7.8.3"
-    lodash "^4.17.13"
-
-"@babel/helper-explode-assignable-expression@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.8.3.tgz#a728dc5b4e89e30fc2dfc7d04fa28a930653f982"
-  integrity sha512-N+8eW86/Kj147bO9G2uclsg5pwfs/fqqY5rwgIL7eTBklgXjcOJ3btzS5iM6AitJcftnY7pm2lGsrJVYLGjzIw==
-  dependencies:
-    "@babel/traverse" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-function-name@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz#eeeb665a01b1f11068e9fb86ad56a1cb1a824cca"
-  integrity sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.8.3"
-    "@babel/template" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-get-function-arity@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
-  integrity sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-hoist-variables@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.8.3.tgz#1dbe9b6b55d78c9b4183fc8cdc6e30ceb83b7134"
-  integrity sha512-ky1JLOjcDUtSc+xkt0xhYff7Z6ILTAHKmZLHPxAhOP0Nd77O+3nCsd6uSVYur6nJnCI029CrNbYlc0LoPfAPQg==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-member-expression-to-functions@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz#659b710498ea6c1d9907e0c73f206eee7dadc24c"
-  integrity sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
-  integrity sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-module-transforms@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz#43b34dfe15961918707d247327431388e9fe96e5"
-  integrity sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.8.3"
-    "@babel/helper-replace-supers" "^7.8.6"
-    "@babel/helper-simple-access" "^7.8.3"
-    "@babel/helper-split-export-declaration" "^7.8.3"
-    "@babel/template" "^7.8.6"
-    "@babel/types" "^7.9.0"
-    lodash "^4.17.13"
-
-"@babel/helper-optimise-call-expression@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz#7ed071813d09c75298ef4f208956006b6111ecb9"
-  integrity sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
-  integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
-
-"@babel/helper-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.8.3.tgz#139772607d51b93f23effe72105b319d2a4c6965"
-  integrity sha512-BWt0QtYv/cg/NecOAZMdcn/waj/5P26DR4mVLXfFtDokSR6fyuG0Pj+e2FqtSME+MqED1khnSMulkmGl8qWiUQ==
-  dependencies:
-    lodash "^4.17.13"
-
-"@babel/helper-remap-async-to-generator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.8.3.tgz#273c600d8b9bf5006142c1e35887d555c12edd86"
-  integrity sha512-kgwDmw4fCg7AVgS4DukQR/roGp+jP+XluJE5hsRZwxCYGg+Rv9wSGErDWhlI90FODdYfd4xG4AQRiMDjjN0GzA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.8.3"
-    "@babel/helper-wrap-function" "^7.8.3"
-    "@babel/template" "^7.8.3"
-    "@babel/traverse" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-replace-supers@^7.8.3", "@babel/helper-replace-supers@^7.8.6":
-  version "7.8.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz#5ada744fd5ad73203bf1d67459a27dcba67effc8"
-  integrity sha512-PeMArdA4Sv/Wf4zXwBKPqVj7n9UF/xg6slNRtZW84FM7JpE1CbG8B612FyM4cxrf4fMAMGO0kR7voy1ForHHFA==
-  dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.8.3"
-    "@babel/helper-optimise-call-expression" "^7.8.3"
-    "@babel/traverse" "^7.8.6"
-    "@babel/types" "^7.8.6"
-
-"@babel/helper-simple-access@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
-  integrity sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==
-  dependencies:
-    "@babel/template" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-split-export-declaration@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
-  integrity sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-validator-identifier@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.0.tgz#ad53562a7fc29b3b9a91bbf7d10397fd146346ed"
-  integrity sha512-6G8bQKjOh+of4PV/ThDm/rRqlU7+IGoJuofpagU5GlEl29Vv0RGqqt86ZGRV8ZuSOY3o+8yXl5y782SMcG7SHw==
-
-"@babel/helper-wrap-function@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz#9dbdb2bb55ef14aaa01fe8c99b629bd5352d8610"
-  integrity sha512-LACJrbUET9cQDzb6kG7EeD7+7doC3JNvUgTEQOx2qaO1fKlzE/Bf05qs9w1oXQMmXlPO65lC3Tq9S6gZpTErEQ==
-  dependencies:
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/template" "^7.8.3"
-    "@babel/traverse" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
-"@babel/helpers@^7.9.0":
-  version "7.9.2"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.9.2.tgz#b42a81a811f1e7313b88cba8adc66b3d9ae6c09f"
-  integrity sha512-JwLvzlXVPjO8eU9c/wF9/zOIN7X6h8DYf7mG4CiFRZRvZNKEF5dQ3H3V+ASkHoIB3mWhatgl5ONhyqHRI6MppA==
-  dependencies:
-    "@babel/template" "^7.8.3"
-    "@babel/traverse" "^7.9.0"
-    "@babel/types" "^7.9.0"
-
-"@babel/highlight@^7.0.0", "@babel/highlight@^7.8.3":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.9.0.tgz#4e9b45ccb82b79607271b2979ad82c7b68163079"
-  integrity sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.9.0"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
-"@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
-  version "7.9.4"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
-  integrity sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==
-
-"@babel/plugin-proposal-async-generator-functions@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz#bad329c670b382589721b27540c7d288601c6e6f"
-  integrity sha512-NZ9zLv848JsV3hs8ryEh7Uaz/0KsmPLqv0+PdkDJL1cJy0K4kOCFa8zc1E3mp+RHPQcpdfb/6GovEsW4VDrOMw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-remap-async-to-generator" "^7.8.3"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
-
-"@babel/plugin-proposal-class-properties@^7.7.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz#5e06654af5cd04b608915aada9b2a6788004464e"
-  integrity sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-proposal-dynamic-import@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz#38c4fe555744826e97e2ae930b0fb4cc07e66054"
-  integrity sha512-NyaBbyLFXFLT9FP+zk0kYlUlA8XtCUbehs67F0nnEg7KICgMc2mNkIeu9TYhKzyXMkrapZFwAhXLdnt4IYHy1w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
-
-"@babel/plugin-proposal-json-strings@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.8.3.tgz#da5216b238a98b58a1e05d6852104b10f9a70d6b"
-  integrity sha512-KGhQNZ3TVCQG/MjRbAUwuH+14y9q0tpxs1nWWs3pbSleRdDro9SAMMDyye8HhY1gqZ7/NqIc8SKhya0wRDgP1Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
-
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz#e4572253fdeed65cddeecfdab3f928afeb2fd5d2"
-  integrity sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
-
-"@babel/plugin-proposal-numeric-separator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.8.3.tgz#5d6769409699ec9b3b68684cd8116cedff93bad8"
-  integrity sha512-jWioO1s6R/R+wEHizfaScNsAx+xKgwTLNXSh7tTC4Usj3ItsPEhYkEpU4h+lpnBwq7NBVOJXfO6cRFYcX69JUQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
-
-"@babel/plugin-proposal-object-rest-spread@^7.6.2", "@babel/plugin-proposal-object-rest-spread@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.0.tgz#a28993699fc13df165995362693962ba6b061d6f"
-  integrity sha512-UgqBv6bjq4fDb8uku9f+wcm1J7YxJ5nT7WO/jBr0cl0PLKb7t1O6RNR1kZbjgx2LQtsDI9hwoQVmn0yhXeQyow==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-
-"@babel/plugin-proposal-optional-catch-binding@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.8.3.tgz#9dee96ab1650eed88646ae9734ca167ac4a9c5c9"
-  integrity sha512-0gkX7J7E+AtAw9fcwlVQj8peP61qhdg/89D5swOkjYbkboA2CVckn3kiyum1DE0wskGb7KJJxBdyEBApDLLVdw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
-
-"@babel/plugin-proposal-optional-chaining@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz#31db16b154c39d6b8a645292472b98394c292a58"
-  integrity sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
-
-"@babel/plugin-proposal-unicode-property-regex@^7.4.4", "@babel/plugin-proposal-unicode-property-regex@^7.8.3":
-  version "7.8.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.8.8.tgz#ee3a95e90cdc04fe8cd92ec3279fa017d68a0d1d"
-  integrity sha512-EVhjVsMpbhLw9ZfHWSx2iy13Q8Z/eg8e8ccVWt23sWQK5l1UdkoLJPN5w69UA4uITGBnEZD2JOe4QOHycYKv8A==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.8.8"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-syntax-async-generators@^7.8.0":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
-  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-dynamic-import@^7.2.0", "@babel/plugin-syntax-dynamic-import@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
-  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-json-strings@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
-  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-jsx@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz#521b06c83c40480f1e58b4fd33b92eceb1d6ea94"
-  integrity sha512-WxdW9xyLgBdefoo0Ynn3MRSkhe5tFVxxKNVdnZSh318WrG2e2jH+E9wd/++JsqcLJZPfz87njQJ8j2Upjm0M0A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
-  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-numeric-separator@^7.8.0", "@babel/plugin-syntax-numeric-separator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.8.3.tgz#0e3fb63e09bea1b11e96467271c8308007e7c41f"
-  integrity sha512-H7dCMAdN83PcCmqmkHB5dtp+Xa9a6LKSvA2hiFBC/5alSHxM5VgWZXFqDi0YFe8XNGT6iCa+z4V4zSt/PdZ7Dw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-syntax-object-rest-spread@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
-  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-optional-catch-binding@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
-  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-optional-chaining@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
-  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-top-level-await@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.8.3.tgz#3acdece695e6b13aaf57fc291d1a800950c71391"
-  integrity sha512-kwj1j9lL/6Wd0hROD3b/OZZ7MSrZLqqn9RAZ5+cYYsflQ9HZBIKCUkr3+uL1MEJ1NePiUbf98jjiMQSv0NMR9g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-arrow-functions@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz#82776c2ed0cd9e1a49956daeb896024c9473b8b6"
-  integrity sha512-0MRF+KC8EqH4dbuITCWwPSzsyO3HIWWlm30v8BbbpOrS1B++isGxPnnuq/IZvOX5J2D/p7DQalQm+/2PnlKGxg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-async-to-generator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.8.3.tgz#4308fad0d9409d71eafb9b1a6ee35f9d64b64086"
-  integrity sha512-imt9tFLD9ogt56Dd5CI/6XgpukMwd/fLGSrix2httihVe7LOGVPhyhMh1BU5kDM7iHD08i8uUtmV2sWaBFlHVQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-remap-async-to-generator" "^7.8.3"
-
-"@babel/plugin-transform-block-scoped-functions@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.8.3.tgz#437eec5b799b5852072084b3ae5ef66e8349e8a3"
-  integrity sha512-vo4F2OewqjbB1+yaJ7k2EJFHlTP3jR634Z9Cj9itpqNjuLXvhlVxgnjsHsdRgASR8xYDrx6onw4vW5H6We0Jmg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-block-scoping@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.8.3.tgz#97d35dab66857a437c166358b91d09050c868f3a"
-  integrity sha512-pGnYfm7RNRgYRi7bids5bHluENHqJhrV4bCZRwc5GamaWIIs07N4rZECcmJL6ZClwjDz1GbdMZFtPs27hTB06w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    lodash "^4.17.13"
-
-"@babel/plugin-transform-classes@^7.9.0":
-  version "7.9.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.9.2.tgz#8603fc3cc449e31fdbdbc257f67717536a11af8d"
-  integrity sha512-TC2p3bPzsfvSsqBZo0kJnuelnoK9O3welkUpqSqBQuBF6R5MN2rysopri8kNvtlGIb2jmUO7i15IooAZJjZuMQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.8.3"
-    "@babel/helper-define-map" "^7.8.3"
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/helper-optimise-call-expression" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-replace-supers" "^7.8.6"
-    "@babel/helper-split-export-declaration" "^7.8.3"
-    globals "^11.1.0"
-
-"@babel/plugin-transform-computed-properties@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.8.3.tgz#96d0d28b7f7ce4eb5b120bb2e0e943343c86f81b"
-  integrity sha512-O5hiIpSyOGdrQZRQ2ccwtTVkgUDBBiCuK//4RJ6UfePllUTCENOzKxfh6ulckXKc0DixTFLCfb2HVkNA7aDpzA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-destructuring@^7.8.3":
-  version "7.8.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.8.8.tgz#fadb2bc8e90ccaf5658de6f8d4d22ff6272a2f4b"
-  integrity sha512-eRJu4Vs2rmttFCdhPUM3bV0Yo/xPSdPw6ML9KHs/bjB4bLA5HXlbvYXPOD5yASodGod+krjYx21xm1QmL8dCJQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-dotall-regex@^7.4.4", "@babel/plugin-transform-dotall-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.8.3.tgz#c3c6ec5ee6125c6993c5cbca20dc8621a9ea7a6e"
-  integrity sha512-kLs1j9Nn4MQoBYdRXH6AeaXMbEJFaFu/v1nQkvib6QzTj8MZI5OQzqmD83/2jEM1z0DLilra5aWO5YpyC0ALIw==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-duplicate-keys@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.8.3.tgz#8d12df309aa537f272899c565ea1768e286e21f1"
-  integrity sha512-s8dHiBUbcbSgipS4SMFuWGqCvyge5V2ZeAWzR6INTVC3Ltjig/Vw1G2Gztv0vU/hRG9X8IvKvYdoksnUfgXOEQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-exponentiation-operator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.8.3.tgz#581a6d7f56970e06bf51560cd64f5e947b70d7b7"
-  integrity sha512-zwIpuIymb3ACcInbksHaNcR12S++0MDLKkiqXHl3AzpgdKlFNhog+z/K0+TGW+b0w5pgTq4H6IwV/WhxbGYSjQ==
-  dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-for-of@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.9.0.tgz#0f260e27d3e29cd1bb3128da5e76c761aa6c108e"
-  integrity sha512-lTAnWOpMwOXpyDx06N+ywmF3jNbafZEqZ96CGYabxHrxNX8l5ny7dt4bK/rGwAh9utyP2b2Hv7PlZh1AAS54FQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-function-name@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.8.3.tgz#279373cb27322aaad67c2683e776dfc47196ed8b"
-  integrity sha512-rO/OnDS78Eifbjn5Py9v8y0aR+aSYhDhqAwVfsTl0ERuMZyr05L1aFSCJnbv2mmsLkit/4ReeQ9N2BgLnOcPCQ==
-  dependencies:
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-literals@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.8.3.tgz#aef239823d91994ec7b68e55193525d76dbd5dc1"
-  integrity sha512-3Tqf8JJ/qB7TeldGl+TT55+uQei9JfYaregDcEAyBZ7akutriFrt6C/wLYIer6OYhleVQvH/ntEhjE/xMmy10A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-member-expression-literals@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.8.3.tgz#963fed4b620ac7cbf6029c755424029fa3a40410"
-  integrity sha512-3Wk2EXhnw+rP+IDkK6BdtPKsUE5IeZ6QOGrPYvw52NwBStw9V1ZVzxgK6fSKSxqUvH9eQPR3tm3cOq79HlsKYA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-modules-amd@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.9.0.tgz#19755ee721912cf5bb04c07d50280af3484efef4"
-  integrity sha512-vZgDDF003B14O8zJy0XXLnPH4sg+9X5hFBBGN1V+B2rgrB+J2xIypSN6Rk9imB2hSTHQi5OHLrFWsZab1GMk+Q==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.9.0"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    babel-plugin-dynamic-import-node "^2.3.0"
-
-"@babel/plugin-transform-modules-commonjs@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.9.0.tgz#e3e72f4cbc9b4a260e30be0ea59bdf5a39748940"
-  integrity sha512-qzlCrLnKqio4SlgJ6FMMLBe4bySNis8DFn1VkGmOcxG9gqEyPIOzeQrA//u0HAKrWpJlpZbZMPB1n/OPa4+n8g==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.9.0"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-simple-access" "^7.8.3"
-    babel-plugin-dynamic-import-node "^2.3.0"
-
-"@babel/plugin-transform-modules-systemjs@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.9.0.tgz#e9fd46a296fc91e009b64e07ddaa86d6f0edeb90"
-  integrity sha512-FsiAv/nao/ud2ZWy4wFacoLOm5uxl0ExSQ7ErvP7jpoihLR6Cq90ilOFyX9UXct3rbtKsAiZ9kFt5XGfPe/5SQ==
-  dependencies:
-    "@babel/helper-hoist-variables" "^7.8.3"
-    "@babel/helper-module-transforms" "^7.9.0"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    babel-plugin-dynamic-import-node "^2.3.0"
-
-"@babel/plugin-transform-modules-umd@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.9.0.tgz#e909acae276fec280f9b821a5f38e1f08b480697"
-  integrity sha512-uTWkXkIVtg/JGRSIABdBoMsoIeoHQHPTL0Y2E7xf5Oj7sLqwVsNXOkNk0VJc7vF0IMBsPeikHxFjGe+qmwPtTQ==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.9.0"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-named-capturing-groups-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.8.3.tgz#a2a72bffa202ac0e2d0506afd0939c5ecbc48c6c"
-  integrity sha512-f+tF/8UVPU86TrCb06JoPWIdDpTNSGGcAtaD9mLP0aYGA0OS0j7j7DHJR0GTFrUZPUU6loZhbsVZgTh0N+Qdnw==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
-
-"@babel/plugin-transform-new-target@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.8.3.tgz#60cc2ae66d85c95ab540eb34babb6434d4c70c43"
-  integrity sha512-QuSGysibQpyxexRyui2vca+Cmbljo8bcRckgzYV4kRIsHpVeyeC3JDO63pY+xFZ6bWOBn7pfKZTqV4o/ix9sFw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-object-super@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.8.3.tgz#ebb6a1e7a86ffa96858bd6ac0102d65944261725"
-  integrity sha512-57FXk+gItG/GejofIyLIgBKTas4+pEU47IXKDBWFTxdPd7F80H8zybyAY7UoblVfBhBGs2EKM+bJUu2+iUYPDQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-replace-supers" "^7.8.3"
-
-"@babel/plugin-transform-parameters@^7.8.7":
-  version "7.9.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.9.3.tgz#3028d0cc20ddc733166c6e9c8534559cee09f54a"
-  integrity sha512-fzrQFQhp7mIhOzmOtPiKffvCYQSK10NR8t6BBz2yPbeUHb9OLW8RZGtgDRBn8z2hGcwvKDL3vC7ojPTLNxmqEg==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-property-literals@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.8.3.tgz#33194300d8539c1ed28c62ad5087ba3807b98263"
-  integrity sha512-uGiiXAZMqEoQhRWMK17VospMZh5sXWg+dlh2soffpkAl96KAm+WZuJfa6lcELotSRmooLqg0MWdH6UUq85nmmg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-react-constant-elements@^7.2.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.9.0.tgz#a75abc936a3819edec42d3386d9f1c93f28d9d9e"
-  integrity sha512-wXMXsToAUOxJuBBEHajqKLFWcCkOSLshTI2ChCFFj1zDd7od4IOxiwLCOObNUvOpkxLpjIuaIdBMmNt6ocCPAw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-react-display-name@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.8.3.tgz#70ded987c91609f78353dd76d2fb2a0bb991e8e5"
-  integrity sha512-3Jy/PCw8Fe6uBKtEgz3M82ljt+lTg+xJaM4og+eyu83qLT87ZUSckn0wy7r31jflURWLO83TW6Ylf7lyXj3m5A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-react-jsx-development@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.9.0.tgz#3c2a130727caf00c2a293f0aed24520825dbf754"
-  integrity sha512-tK8hWKrQncVvrhvtOiPpKrQjfNX3DtkNLSX4ObuGcpS9p0QrGetKmlySIGR07y48Zft8WVgPakqd/bk46JrMSw==
-  dependencies:
-    "@babel/helper-builder-react-jsx-experimental" "^7.9.0"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-jsx" "^7.8.3"
-
-"@babel/plugin-transform-react-jsx-self@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.9.0.tgz#f4f26a325820205239bb915bad8e06fcadabb49b"
-  integrity sha512-K2ObbWPKT7KUTAoyjCsFilOkEgMvFG+y0FqOl6Lezd0/13kMkkjHskVsZvblRPj1PHA44PrToaZANrryppzTvQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-jsx" "^7.8.3"
-
-"@babel/plugin-transform-react-jsx-source@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.9.0.tgz#89ef93025240dd5d17d3122294a093e5e0183de0"
-  integrity sha512-K6m3LlSnTSfRkM6FcRk8saNEeaeyG5k7AVkBU2bZK3+1zdkSED3qNdsWrUgQBeTVD2Tp3VMmerxVO2yM5iITmw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-jsx" "^7.8.3"
-
-"@babel/plugin-transform-react-jsx@^7.3.0", "@babel/plugin-transform-react-jsx@^7.9.4":
-  version "7.9.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.9.4.tgz#86f576c8540bd06d0e95e0b61ea76d55f6cbd03f"
-  integrity sha512-Mjqf3pZBNLt854CK0C/kRuXAnE6H/bo7xYojP+WGtX8glDGSibcwnsWwhwoSuRg0+EBnxPC1ouVnuetUIlPSAw==
-  dependencies:
-    "@babel/helper-builder-react-jsx" "^7.9.0"
-    "@babel/helper-builder-react-jsx-experimental" "^7.9.0"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-jsx" "^7.8.3"
-
-"@babel/plugin-transform-regenerator@^7.8.7":
-  version "7.8.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.7.tgz#5e46a0dca2bee1ad8285eb0527e6abc9c37672f8"
-  integrity sha512-TIg+gAl4Z0a3WmD3mbYSk+J9ZUH6n/Yc57rtKRnlA/7rcCvpekHXe0CMZHP1gYp7/KLe9GHTuIba0vXmls6drA==
-  dependencies:
-    regenerator-transform "^0.14.2"
-
-"@babel/plugin-transform-reserved-words@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.8.3.tgz#9a0635ac4e665d29b162837dd3cc50745dfdf1f5"
-  integrity sha512-mwMxcycN3omKFDjDQUl+8zyMsBfjRFr0Zn/64I41pmjv4NJuqcYlEtezwYtw9TFd9WR1vN5kiM+O0gMZzO6L0A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-shorthand-properties@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.8.3.tgz#28545216e023a832d4d3a1185ed492bcfeac08c8"
-  integrity sha512-I9DI6Odg0JJwxCHzbzW08ggMdCezoWcuQRz3ptdudgwaHxTjxw5HgdFJmZIkIMlRymL6YiZcped4TTCB0JcC8w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-spread@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.8.3.tgz#9c8ffe8170fdfb88b114ecb920b82fb6e95fe5e8"
-  integrity sha512-CkuTU9mbmAoFOI1tklFWYYbzX5qCIZVXPVy0jpXgGwkplCndQAa58s2jr66fTeQnA64bDox0HL4U56CFYoyC7g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-sticky-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.8.3.tgz#be7a1290f81dae767475452199e1f76d6175b100"
-  integrity sha512-9Spq0vGCD5Bb4Z/ZXXSK5wbbLFMG085qd2vhL1JYu1WcQ5bXqZBAYRzU1d+p79GcHs2szYv5pVQCX13QgldaWw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-regex" "^7.8.3"
-
-"@babel/plugin-transform-template-literals@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.8.3.tgz#7bfa4732b455ea6a43130adc0ba767ec0e402a80"
-  integrity sha512-820QBtykIQOLFT8NZOcTRJ1UNuztIELe4p9DCgvj4NK+PwluSJ49we7s9FB1HIGNIYT7wFUJ0ar2QpCDj0escQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-typeof-symbol@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.8.4.tgz#ede4062315ce0aaf8a657a920858f1a2f35fc412"
-  integrity sha512-2QKyfjGdvuNfHsb7qnBBlKclbD4CfshH2KvDabiijLMGXPHJXGxtDzwIF7bQP+T0ysw8fYTtxPafgfs/c1Lrqg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-unicode-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.3.tgz#0cef36e3ba73e5c57273effb182f46b91a1ecaad"
-  integrity sha512-+ufgJjYdmWfSQ+6NS9VGUR2ns8cjJjYbrbi11mZBTaWm+Fui/ncTLFF28Ei1okavY+xkojGr1eJxNsWYeA5aZw==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/preset-env@^7.4.5":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.9.0.tgz#a5fc42480e950ae8f5d9f8f2bbc03f52722df3a8"
-  integrity sha512-712DeRXT6dyKAM/FMbQTV/FvRCms2hPCx+3weRjZ8iQVQWZejWWk1wwG6ViWMyqb/ouBbGOl5b6aCk0+j1NmsQ==
-  dependencies:
-    "@babel/compat-data" "^7.9.0"
-    "@babel/helper-compilation-targets" "^7.8.7"
-    "@babel/helper-module-imports" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-proposal-async-generator-functions" "^7.8.3"
-    "@babel/plugin-proposal-dynamic-import" "^7.8.3"
-    "@babel/plugin-proposal-json-strings" "^7.8.3"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-proposal-numeric-separator" "^7.8.3"
-    "@babel/plugin-proposal-object-rest-spread" "^7.9.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-proposal-optional-chaining" "^7.9.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.8.3"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
-    "@babel/plugin-syntax-numeric-separator" "^7.8.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
-    "@babel/plugin-syntax-top-level-await" "^7.8.3"
-    "@babel/plugin-transform-arrow-functions" "^7.8.3"
-    "@babel/plugin-transform-async-to-generator" "^7.8.3"
-    "@babel/plugin-transform-block-scoped-functions" "^7.8.3"
-    "@babel/plugin-transform-block-scoping" "^7.8.3"
-    "@babel/plugin-transform-classes" "^7.9.0"
-    "@babel/plugin-transform-computed-properties" "^7.8.3"
-    "@babel/plugin-transform-destructuring" "^7.8.3"
-    "@babel/plugin-transform-dotall-regex" "^7.8.3"
-    "@babel/plugin-transform-duplicate-keys" "^7.8.3"
-    "@babel/plugin-transform-exponentiation-operator" "^7.8.3"
-    "@babel/plugin-transform-for-of" "^7.9.0"
-    "@babel/plugin-transform-function-name" "^7.8.3"
-    "@babel/plugin-transform-literals" "^7.8.3"
-    "@babel/plugin-transform-member-expression-literals" "^7.8.3"
-    "@babel/plugin-transform-modules-amd" "^7.9.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.9.0"
-    "@babel/plugin-transform-modules-systemjs" "^7.9.0"
-    "@babel/plugin-transform-modules-umd" "^7.9.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.8.3"
-    "@babel/plugin-transform-new-target" "^7.8.3"
-    "@babel/plugin-transform-object-super" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.8.7"
-    "@babel/plugin-transform-property-literals" "^7.8.3"
-    "@babel/plugin-transform-regenerator" "^7.8.7"
-    "@babel/plugin-transform-reserved-words" "^7.8.3"
-    "@babel/plugin-transform-shorthand-properties" "^7.8.3"
-    "@babel/plugin-transform-spread" "^7.8.3"
-    "@babel/plugin-transform-sticky-regex" "^7.8.3"
-    "@babel/plugin-transform-template-literals" "^7.8.3"
-    "@babel/plugin-transform-typeof-symbol" "^7.8.4"
-    "@babel/plugin-transform-unicode-regex" "^7.8.3"
-    "@babel/preset-modules" "^0.1.3"
-    "@babel/types" "^7.9.0"
-    browserslist "^4.9.1"
-    core-js-compat "^3.6.2"
-    invariant "^2.2.2"
-    levenary "^1.1.1"
-    semver "^5.5.0"
-
-"@babel/preset-modules@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.3.tgz#13242b53b5ef8c883c3cf7dddd55b36ce80fbc72"
-  integrity sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
-    "@babel/plugin-transform-dotall-regex" "^7.4.4"
-    "@babel/types" "^7.4.4"
-    esutils "^2.0.2"
-
-"@babel/preset-react@7.9.4":
-  version "7.9.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.9.4.tgz#c6c97693ac65b6b9c0b4f25b948a8f665463014d"
-  integrity sha512-AxylVB3FXeOTQXNXyiuAQJSvss62FEotbX2Pzx3K/7c+MKJMdSg6Ose6QYllkdCFA8EInCJVw7M/o5QbLuA4ZQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-transform-react-display-name" "^7.8.3"
-    "@babel/plugin-transform-react-jsx" "^7.9.4"
-    "@babel/plugin-transform-react-jsx-development" "^7.9.0"
-    "@babel/plugin-transform-react-jsx-self" "^7.9.0"
-    "@babel/plugin-transform-react-jsx-source" "^7.9.0"
-
-"@babel/runtime-corejs3@7.9.2":
-  version "7.9.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.9.2.tgz#26fe4aa77e9f1ecef9b776559bbb8e84d34284b7"
-  integrity sha512-HHxmgxbIzOfFlZ+tdeRKtaxWOMUoCG5Mu3wKeUmOxjYrwb3AAHgnmtCUbPPK11/raIWLIBK250t8E2BPO0p7jA==
-  dependencies:
-    core-js-pure "^3.0.0"
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.9.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
-  integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/template@^7.8.3", "@babel/template@^7.8.6":
-  version "7.8.6"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
-  integrity sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==
-  dependencies:
-    "@babel/code-frame" "^7.8.3"
-    "@babel/parser" "^7.8.6"
-    "@babel/types" "^7.8.6"
-
-"@babel/traverse@^7.8.3", "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.0.tgz#d3882c2830e513f4fe4cec9fe76ea1cc78747892"
-  integrity sha512-jAZQj0+kn4WTHO5dUZkZKhbFrqZE7K5LAQ5JysMnmvGij+wOdr+8lWqPeW0BcF4wFwrEXXtdGO7wcV6YPJcf3w==
-  dependencies:
-    "@babel/code-frame" "^7.8.3"
-    "@babel/generator" "^7.9.0"
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/helper-split-export-declaration" "^7.8.3"
-    "@babel/parser" "^7.9.0"
-    "@babel/types" "^7.9.0"
-    debug "^4.1.0"
-    globals "^11.1.0"
-    lodash "^4.17.13"
-
-"@babel/types@7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
-  integrity sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==
-  dependencies:
-    esutils "^2.0.2"
-    lodash "^4.17.13"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.4.4", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.0.tgz#00b064c3df83ad32b2dbf5ff07312b15c7f1efb5"
-  integrity sha512-BS9JKfXkzzJl8RluW4JGknzpiUV7ZrvTayM6yfqLTVBEnFtyowVIOu6rqxRd5cVO6yGoWf4T8u8dgK9oB+GCng==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.9.0"
-    lodash "^4.17.13"
-    to-fast-properties "^2.0.0"
-
-"@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
-  version "10.0.29"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
-  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
-  dependencies:
-    "@emotion/sheet" "0.9.4"
-    "@emotion/stylis" "0.8.5"
-    "@emotion/utils" "0.11.3"
-    "@emotion/weak-memoize" "0.2.5"
-
-"@emotion/core@^10.0.20", "@emotion/core@^10.0.9":
-  version "10.0.28"
-  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.28.tgz#bb65af7262a234593a9e952c041d0f1c9b9bef3d"
-  integrity sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/cache" "^10.0.27"
-    "@emotion/css" "^10.0.27"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/sheet" "0.9.4"
-    "@emotion/utils" "0.11.3"
-
-"@emotion/css@^10.0.27", "@emotion/css@^10.0.9":
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
-  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
-  dependencies:
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/utils" "0.11.3"
-    babel-plugin-emotion "^10.0.27"
-
-"@emotion/hash@0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
-  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
-
-"@emotion/is-prop-valid@0.8.8":
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
-  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
-  dependencies:
-    "@emotion/memoize" "0.7.4"
-
-"@emotion/memoize@0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
-  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
-
-"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
-  version "0.11.16"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
-  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
-  dependencies:
-    "@emotion/hash" "0.8.0"
-    "@emotion/memoize" "0.7.4"
-    "@emotion/unitless" "0.7.5"
-    "@emotion/utils" "0.11.3"
-    csstype "^2.5.7"
-
-"@emotion/sheet@0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
-  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
-
-"@emotion/styled-base@^10.0.27":
-  version "10.0.31"
-  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"
-  integrity sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/is-prop-valid" "0.8.8"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/utils" "0.11.3"
-
-"@emotion/styled@^10.0.17":
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
-  integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
-  dependencies:
-    "@emotion/styled-base" "^10.0.27"
-    babel-plugin-emotion "^10.0.27"
-
-"@emotion/stylis@0.8.5":
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
-
-"@emotion/unitless@0.7.5":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
-
-"@emotion/utils@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
-  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
-
-"@emotion/weak-memoize@0.2.5":
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
-  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
-
-"@icons/material@^0.2.4":
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
-  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
-
-"@mrmlnc/readdir-enhanced@^2.2.1":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
-  integrity sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==
-  dependencies:
-    call-me-maybe "^1.0.1"
-    glob-to-regexp "^0.3.0"
-
-"@nodelib/fs.stat@^1.1.2":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
-  integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
-
-"@reach/router@^1.2.1":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.3.tgz#58162860dce6c9449d49be86b0561b5ef46d80db"
-  integrity sha512-gOIAiFhWdiVGSVjukKeNKkCRBLmnORoTPyBihI/jLunICPgxdP30DroAvPQuf1eVfQbfGJQDJkwhJXsNPMnVWw==
-  dependencies:
-    create-react-context "0.3.0"
-    invariant "^2.2.3"
-    prop-types "^15.6.1"
-    react-lifecycles-compat "^3.0.4"
-
-"@storybook/addon-a11y@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-5.3.18.tgz#3f35b2f03a0f292c415d659b5f6f8c00a029c9f7"
-  integrity sha512-DySJg3Q+GqLhVdQNsGwdO7V0cewSzhWdK3LDkZxF0eTvP8rTWG6+SyNFPClYO/MR/i1M6zKMMOoJoT++fu866A==
-  dependencies:
-    "@storybook/addons" "5.3.18"
-    "@storybook/api" "5.3.18"
-    "@storybook/client-logger" "5.3.18"
-    "@storybook/components" "5.3.18"
-    "@storybook/core-events" "5.3.18"
-    "@storybook/theming" "5.3.18"
-    axe-core "^3.3.2"
-    core-js "^3.0.1"
-    global "^4.3.2"
-    memoizerific "^1.11.3"
-    react "^16.8.3"
-    react-redux "^7.0.2"
-    react-sizeme "^2.5.2"
-    redux "^4.0.1"
-    ts-dedent "^1.1.0"
-    util-deprecate "^1.0.2"
-
-"@storybook/addon-knobs@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-5.3.18.tgz#60365bb179699cd8dc91df8be947469266012847"
-  integrity sha512-X0WxGKoso3j5mS4c4enM8BvCjbO6Wwfxc++swQTqtANpBZ8k+w0piiEF1fiJf+ssgEAWe5brgIqnQ9kiBGLqKA==
-  dependencies:
-    "@storybook/addons" "5.3.18"
-    "@storybook/api" "5.3.18"
-    "@storybook/client-api" "5.3.18"
-    "@storybook/components" "5.3.18"
-    "@storybook/core-events" "5.3.18"
-    "@storybook/theming" "5.3.18"
-    "@types/react-color" "^3.0.1"
-    copy-to-clipboard "^3.0.8"
-    core-js "^3.0.1"
-    escape-html "^1.0.3"
-    fast-deep-equal "^2.0.1"
-    global "^4.3.2"
-    lodash "^4.17.15"
-    prop-types "^15.7.2"
-    qs "^6.6.0"
-    react-color "^2.17.0"
-    react-lifecycles-compat "^3.0.4"
-    react-select "^3.0.8"
-
-"@storybook/addon-viewport@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-5.3.18.tgz#9cfeb93e473845436e0c7fb74d590305ff7ef48e"
-  integrity sha512-9ofmbhYm4fU28u9Gasywwul8OLVhKlu1aiLnLfYUd+ZE2r9WuNxGW93m3iIgtccynpANn9phFcgEmWGKfY3vIw==
-  dependencies:
-    "@storybook/addons" "5.3.18"
-    "@storybook/api" "5.3.18"
-    "@storybook/client-logger" "5.3.18"
-    "@storybook/components" "5.3.18"
-    "@storybook/core-events" "5.3.18"
-    "@storybook/theming" "5.3.18"
-    core-js "^3.0.1"
-    global "^4.3.2"
-    memoizerific "^1.11.3"
-    prop-types "^15.7.2"
-    util-deprecate "^1.0.2"
-
-"@storybook/addons@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.3.18.tgz#5cbba6407ef7a802041c5ee831473bc3bed61f64"
-  integrity sha512-ZQjDgTUDFRLvAiBg2d8FgPgghfQ+9uFyXQbtiGlTBLinrPCeQd7J86qiUES0fcGoohCCw0wWKtvB0WF2z1XNDg==
-  dependencies:
-    "@storybook/api" "5.3.18"
-    "@storybook/channels" "5.3.18"
-    "@storybook/client-logger" "5.3.18"
-    "@storybook/core-events" "5.3.18"
-    core-js "^3.0.1"
-    global "^4.3.2"
-    util-deprecate "^1.0.2"
-
-"@storybook/api@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.3.18.tgz#95582ab90d947065e0e34ed603650a3630dcbd16"
-  integrity sha512-QXaccNCARHzPWOuxYndiebGWBZmwiUvRgB9ji0XTJBS3y8K0ZPb5QyuqiKPaEWUj8dBA8rzdDtkW3Yt95Namaw==
-  dependencies:
-    "@reach/router" "^1.2.1"
-    "@storybook/channels" "5.3.18"
-    "@storybook/client-logger" "5.3.18"
-    "@storybook/core-events" "5.3.18"
-    "@storybook/csf" "0.0.1"
-    "@storybook/router" "5.3.18"
-    "@storybook/theming" "5.3.18"
-    "@types/reach__router" "^1.2.3"
-    core-js "^3.0.1"
-    fast-deep-equal "^2.0.1"
-    global "^4.3.2"
-    lodash "^4.17.15"
-    memoizerific "^1.11.3"
-    prop-types "^15.6.2"
-    react "^16.8.3"
-    semver "^6.0.0"
-    shallow-equal "^1.1.0"
-    store2 "^2.7.1"
-    telejson "^3.2.0"
-    util-deprecate "^1.0.2"
-
-"@storybook/channel-postmessage@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-5.3.18.tgz#93d46740b5cc9b36ddd073f0715b54c4959953bf"
-  integrity sha512-awxBW/aVfNtY9QvYZgsPaMXgUpC2+W3vEyQcl/w4ce0YVH+7yWx3wt3Ku49lQwxZwDrxP3QoC0U+mkPc9hBJwA==
-  dependencies:
-    "@storybook/channels" "5.3.18"
-    "@storybook/client-logger" "5.3.18"
-    core-js "^3.0.1"
-    global "^4.3.2"
-    telejson "^3.2.0"
-
-"@storybook/channels@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.3.18.tgz#490c9eaa8292b0571c0f665052b12addf7c35f21"
-  integrity sha512-scP/6td/BJSEOgfN+qaYGDf3E793xye7tIw6W+sYqwg+xdMFO39wVXgVZNpQL6sLEwpJZTaPywCjC6p6ksErqQ==
-  dependencies:
-    core-js "^3.0.1"
-
-"@storybook/client-api@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-5.3.18.tgz#e71041796f95888de0e4524734418e6b120b060a"
-  integrity sha512-QiXTDUpjdyW19BlocLw07DrkOnEzVaWGJcRze2nSs29IKKuq1Ncv2LOAZt6ySSq0PmIKsjBou3bmS1/aXmDMdw==
-  dependencies:
-    "@storybook/addons" "5.3.18"
-    "@storybook/channel-postmessage" "5.3.18"
-    "@storybook/channels" "5.3.18"
-    "@storybook/client-logger" "5.3.18"
-    "@storybook/core-events" "5.3.18"
-    "@storybook/csf" "0.0.1"
-    "@types/webpack-env" "^1.15.0"
-    core-js "^3.0.1"
-    eventemitter3 "^4.0.0"
-    global "^4.3.2"
-    is-plain-object "^3.0.0"
-    lodash "^4.17.15"
-    memoizerific "^1.11.3"
-    qs "^6.6.0"
-    stable "^0.1.8"
-    ts-dedent "^1.1.0"
-    util-deprecate "^1.0.2"
-
-"@storybook/client-logger@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.3.18.tgz#27c9d09d788965db0164be6e168bc3f03adbf88f"
-  integrity sha512-RZjxw4uqZX3Yk27IirbB/pQG+wRsQSSRlKqYa8KQ5bSanm4IrcV9VA1OQbuySW9njE+CexAnakQJ/fENdmurNg==
-  dependencies:
-    core-js "^3.0.1"
-
-"@storybook/components@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.3.18.tgz#528f6ab1660981e948993a04b407a6fad7751589"
-  integrity sha512-LIN4aVCCDY7klOwtuqQhfYz4tHaMADhXEzZpij+3r8N68Inck6IJ1oo9A9umXQPsTioQi8e6FLobH1im90j/2A==
-  dependencies:
-    "@storybook/client-logger" "5.3.18"
-    "@storybook/theming" "5.3.18"
-    "@types/react-syntax-highlighter" "11.0.4"
-    "@types/react-textarea-autosize" "^4.3.3"
-    core-js "^3.0.1"
-    global "^4.3.2"
-    lodash "^4.17.15"
-    markdown-to-jsx "^6.9.1"
-    memoizerific "^1.11.3"
-    polished "^3.3.1"
-    popper.js "^1.14.7"
-    prop-types "^15.7.2"
-    react "^16.8.3"
-    react-dom "^16.8.3"
-    react-focus-lock "^2.1.0"
-    react-helmet-async "^1.0.2"
-    react-popper-tooltip "^2.8.3"
-    react-syntax-highlighter "^11.0.2"
-    react-textarea-autosize "^7.1.0"
-    simplebar-react "^1.0.0-alpha.6"
-    ts-dedent "^1.1.0"
-
-"@storybook/core-events@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.3.18.tgz#e5d335f8a2c7dd46502b8f505006f1e111b46d49"
-  integrity sha512-uQ6NYJ5WODXK8DJ7m8y3yUAtWB3n+6XtYztjY+tdkCsLYvTYDXNS+epV+f5Hu9+gB+/Dm+b5Su4jDD+LZB2QWA==
-  dependencies:
-    core-js "^3.0.1"
-
-"@storybook/core@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-5.3.18.tgz#3f3c0498275826c1cc4368aba203ac17a6ae5c9c"
-  integrity sha512-XQb/UQb+Ohuaw0GhKKYzvmuuh5Tit93f2cLZD9QCSWUPvDGmLG5g91Y9NbUr4Ap3mANT3NksMNhkAV0GxExEkg==
-  dependencies:
-    "@babel/plugin-proposal-class-properties" "^7.7.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.6.2"
-    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
-    "@babel/plugin-transform-react-constant-elements" "^7.2.0"
-    "@babel/preset-env" "^7.4.5"
-    "@storybook/addons" "5.3.18"
-    "@storybook/channel-postmessage" "5.3.18"
-    "@storybook/client-api" "5.3.18"
-    "@storybook/client-logger" "5.3.18"
-    "@storybook/core-events" "5.3.18"
-    "@storybook/csf" "0.0.1"
-    "@storybook/node-logger" "5.3.18"
-    "@storybook/router" "5.3.18"
-    "@storybook/theming" "5.3.18"
-    "@storybook/ui" "5.3.18"
-    airbnb-js-shims "^2.2.1"
-    ansi-to-html "^0.6.11"
-    autoprefixer "^9.7.2"
-    babel-plugin-add-react-displayname "^0.0.5"
-    babel-plugin-emotion "^10.0.20"
-    babel-plugin-macros "^2.7.0"
-    babel-preset-minify "^0.5.0 || 0.6.0-alpha.5"
-    boxen "^4.1.0"
-    case-sensitive-paths-webpack-plugin "^2.2.0"
-    chalk "^3.0.0"
-    cli-table3 "0.5.1"
-    commander "^4.0.1"
-    core-js "^3.0.1"
-    corejs-upgrade-webpack-plugin "^2.2.0"
-    css-loader "^3.0.0"
-    detect-port "^1.3.0"
-    dotenv-webpack "^1.7.0"
-    ejs "^2.7.4"
-    express "^4.17.0"
-    file-loader "^4.2.0"
-    file-system-cache "^1.0.5"
-    find-cache-dir "^3.0.0"
-    find-up "^4.1.0"
-    fs-extra "^8.0.1"
-    glob-base "^0.3.0"
-    global "^4.3.2"
-    html-webpack-plugin "^4.0.0-beta.2"
-    inquirer "^7.0.0"
-    interpret "^2.0.0"
-    ip "^1.1.5"
-    json5 "^2.1.1"
-    lazy-universal-dotenv "^3.0.1"
-    micromatch "^4.0.2"
-    node-fetch "^2.6.0"
-    open "^7.0.0"
-    pnp-webpack-plugin "1.5.0"
-    postcss-flexbugs-fixes "^4.1.0"
-    postcss-loader "^3.0.0"
-    pretty-hrtime "^1.0.3"
-    qs "^6.6.0"
-    raw-loader "^3.1.0"
-    react-dev-utils "^9.0.0"
-    regenerator-runtime "^0.13.3"
-    resolve "^1.11.0"
-    resolve-from "^5.0.0"
-    semver "^6.0.0"
-    serve-favicon "^2.5.0"
-    shelljs "^0.8.3"
-    style-loader "^1.0.0"
-    terser-webpack-plugin "^2.1.2"
-    ts-dedent "^1.1.0"
-    unfetch "^4.1.0"
-    url-loader "^2.0.1"
-    util-deprecate "^1.0.2"
-    webpack "^4.33.0"
-    webpack-dev-middleware "^3.7.0"
-    webpack-hot-middleware "^2.25.0"
-    webpack-virtual-modules "^0.2.0"
-
-"@storybook/csf@0.0.1":
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
-  integrity sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==
-  dependencies:
-    lodash "^4.17.15"
-
-"@storybook/node-logger@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-5.3.18.tgz#ee278acb8b6f10d456a24c0ff6d59818a0c3ad94"
-  integrity sha512-Go/hdtaPTtjgJP+GYk8VXcOmecrdG7cXm0yyTlatd6s8xXI0txHme1/0MOZmEPows1Ec7KAQ20+NnaCGUPZUUg==
-  dependencies:
-    "@types/npmlog" "^4.1.2"
-    chalk "^3.0.0"
-    core-js "^3.0.1"
-    npmlog "^4.1.2"
-    pretty-hrtime "^1.0.3"
-    regenerator-runtime "^0.13.3"
-
-"@storybook/preact@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/preact/-/preact-5.3.18.tgz#fc207e1af7aa3de58436c408d2268f24ead40760"
-  integrity sha512-udA2Ii6XyHWe8fhnUb1AI0Ne/TMzNIoGsT3YC0EsVdBTyFONQCNEnO1UjSeFTbtA2Ev7ziIx0hKeHoXkVcRjyw==
-  dependencies:
-    "@babel/plugin-transform-react-jsx" "^7.3.0"
-    "@storybook/addons" "5.3.18"
-    "@storybook/core" "5.3.18"
-    "@types/webpack-env" "^1.15.0"
-    core-js "^3.0.1"
-    global "^4.3.2"
-    regenerator-runtime "^0.13.3"
-    ts-dedent "^1.1.0"
-
-"@storybook/router@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.3.18.tgz#8ab22f1f2f7f957e78baf992030707a62289076e"
-  integrity sha512-6B2U2C75KTSVaCuYYgcubeJGcCSnwsXuEf50hEd5mGqWgHZfojCtGvB7Ko4X+0h8rEC+eNA4p7YBOhlUv9WNrQ==
-  dependencies:
-    "@reach/router" "^1.2.1"
-    "@storybook/csf" "0.0.1"
-    "@types/reach__router" "^1.2.3"
-    core-js "^3.0.1"
-    global "^4.3.2"
-    lodash "^4.17.15"
-    memoizerific "^1.11.3"
-    qs "^6.6.0"
-    util-deprecate "^1.0.2"
-
-"@storybook/theming@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.3.18.tgz#35e78de79d9cf8f1248af0dd1c7fa60555761312"
-  integrity sha512-lfFTeLoYwLMKg96N3gn0umghMdAHgJBGuk2OM8Ll84yWtdl9RGnzfiI1Fl7Cr5k95dCF7drLJlJCao1VxUkFSA==
-  dependencies:
-    "@emotion/core" "^10.0.20"
-    "@emotion/styled" "^10.0.17"
-    "@storybook/client-logger" "5.3.18"
-    core-js "^3.0.1"
-    deep-object-diff "^1.1.0"
-    emotion-theming "^10.0.19"
-    global "^4.3.2"
-    memoizerific "^1.11.3"
-    polished "^3.3.1"
-    prop-types "^15.7.2"
-    resolve-from "^5.0.0"
-    ts-dedent "^1.1.0"
-
-"@storybook/ui@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-5.3.18.tgz#c66f6d94a3c50bb706f4d5b1d5592439110f16f0"
-  integrity sha512-xyXK53fNe9lkGPmXf3Nk+n0gz9gOgXI+fDxetyDLpX79k3DIN/jCKEnv45vXof7OQ45mTmyBvUNTKrNLqKTt5Q==
-  dependencies:
-    "@emotion/core" "^10.0.20"
-    "@storybook/addons" "5.3.18"
-    "@storybook/api" "5.3.18"
-    "@storybook/channels" "5.3.18"
-    "@storybook/client-logger" "5.3.18"
-    "@storybook/components" "5.3.18"
-    "@storybook/core-events" "5.3.18"
-    "@storybook/router" "5.3.18"
-    "@storybook/theming" "5.3.18"
-    copy-to-clipboard "^3.0.8"
-    core-js "^3.0.1"
-    core-js-pure "^3.0.1"
-    emotion-theming "^10.0.19"
-    fast-deep-equal "^2.0.1"
-    fuse.js "^3.4.6"
-    global "^4.3.2"
-    lodash "^4.17.15"
-    markdown-to-jsx "^6.9.3"
-    memoizerific "^1.11.3"
-    polished "^3.3.1"
-    prop-types "^15.7.2"
-    qs "^6.6.0"
-    react "^16.8.3"
-    react-dom "^16.8.3"
-    react-draggable "^4.0.3"
-    react-helmet-async "^1.0.2"
-    react-hotkeys "2.0.0"
-    react-sizeme "^2.6.7"
-    regenerator-runtime "^0.13.2"
-    resolve-from "^5.0.0"
-    semver "^6.0.0"
-    store2 "^2.7.1"
-    telejson "^3.2.0"
-    util-deprecate "^1.0.2"
-
-"@types/anymatch@*":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
-  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
-
-"@types/color-name@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
-  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
-
-"@types/history@*":
-  version "4.7.5"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.5.tgz#527d20ef68571a4af02ed74350164e7a67544860"
-  integrity sha512-wLD/Aq2VggCJXSjxEwrMafIP51Z+13H78nXIX0ABEuIGhmB5sNGbR113MOKo+yfw+RDo1ZU3DM6yfnnRF/+ouw==
-
-"@types/html-minifier-terser@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.0.0.tgz#7532440c138605ced1b555935c3115ddd20e8bef"
-  integrity sha512-q95SP4FdkmF0CwO0F2q0H6ZgudsApaY/yCtAQNRn1gduef5fGpyEphzy0YCq/N0UFvDSnLg5V8jFK/YGXlDiCw==
-
-"@types/is-function@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.0.tgz#1b0b819b1636c7baf0d6785d030d12edf70c3e83"
-  integrity sha512-iTs9HReBu7evG77Q4EC8hZnqRt57irBDkK9nvmHroiOIVwYMQc4IvYvdRgwKfYepunIY7Oh/dBuuld+Gj9uo6w==
-
-"@types/node@*":
-  version "13.11.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.11.0.tgz#390ea202539c61c8fa6ba4428b57e05bc36dc47b"
-  integrity sha512-uM4mnmsIIPK/yeO+42F2RQhGUIs39K2RFmugcJANppXe6J1nvH87PvzPZYpza7Xhhs8Yn9yIAVdLZ84z61+0xQ==
-
-"@types/npmlog@^4.1.2":
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/@types/npmlog/-/npmlog-4.1.2.tgz#d070fe6a6b78755d1092a3dc492d34c3d8f871c4"
-  integrity sha512-4QQmOF5KlwfxJ5IGXFIudkeLCdMABz03RcUXu+LCb24zmln8QW6aDjuGl4d4XPVLf2j+FnjelHTP7dvceAFbhA==
-
-"@types/parse-json@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
-  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
-
-"@types/prop-types@*":
-  version "15.7.3"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
-  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
-
-"@types/reach__router@^1.2.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.3.3.tgz#cec4095219dce6eca2daf22399bb3b6bc28c1baf"
-  integrity sha512-HTHMGJLdH3czgPP1nHF82y+TYLV1KSh1qYeezqHNDNuESBy55ij1LCn8jDYFeKCuAxm0gd9J25zyYy7mhOcgOw==
-  dependencies:
-    "@types/history" "*"
-    "@types/react" "*"
-
-"@types/react-color@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.1.tgz#5433e2f503ea0e0831cbc6fd0c20f8157d93add0"
-  integrity sha512-J6mYm43Sid9y+OjZ7NDfJ2VVkeeuTPNVImNFITgQNXodHteKfl/t/5pAR5Z9buodZ2tCctsZjgiMlQOpfntakw==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-syntax-highlighter@11.0.4":
-  version "11.0.4"
-  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
-  integrity sha512-9GfTo3a0PHwQeTVoqs0g5bS28KkSY48pp5659wA+Dp4MqceDEa8EHBqrllJvvtyusszyJhViUEap0FDvlk/9Zg==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-textarea-autosize@^4.3.3":
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/@types/react-textarea-autosize/-/react-textarea-autosize-4.3.5.tgz#6c4d2753fa1864c98c0b2b517f67bb1f6e4c46de"
-  integrity sha512-PiDL83kPMTolyZAWW3lyzO6ktooTb9tFTntVy7CA83/qFLWKLJ5bLeRboy6J6j3b1e8h2Eec6gBTEOOJRjV14A==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react@*":
-  version "16.9.32"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.32.tgz#f6368625b224604148d1ddf5920e4fefbd98d383"
-  integrity sha512-fmejdp0CTH00mOJmxUPPbWCEBWPvRIL4m8r0qD+BSDUqmutPyGQCHifzMpMzdvZwROdEdL78IuZItntFWgPXHQ==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^2.2.0"
-
-"@types/source-list-map@*":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
-  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
-
-"@types/tapable@*", "@types/tapable@^1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.5.tgz#9adbc12950582aa65ead76bffdf39fe0c27a3c02"
-  integrity sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ==
-
-"@types/uglify-js@*":
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.5.tgz#2c70d5c68f6e002e3b2e4f849adc5f162546f633"
-  integrity sha512-L7EbSkhSaWBpkl+PZAEAqZTqtTeIsq7s/oX/q0LNnxxJoRVKQE0T81XDVyaxjiiKQwiV2vhVeYRqxdRNqGOGJw==
-  dependencies:
-    source-map "^0.6.1"
-
-"@types/webpack-env@^1.15.0":
-  version "1.15.1"
-  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.15.1.tgz#c8e84705e08eed430b5e15b39c65b0944e4d1422"
-  integrity sha512-eWN5ElDTeBc5lRDh95SqA8x18D0ll2pWudU3uWiyfsRmIZcmUXpEsxPU+7+BsdCrO2vfLRC629u/MmjbmF+2tA==
-
-"@types/webpack-sources@*":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-0.1.7.tgz#0a330a9456113410c74a5d64180af0cbca007141"
-  integrity sha512-XyaHrJILjK1VHVC4aVlKsdNN5KBTwufMb43cQs+flGxtPAf/1Qwl8+Q0tp5BwEGaI8D6XT1L+9bSWXckgkjTLw==
-  dependencies:
-    "@types/node" "*"
-    "@types/source-list-map" "*"
-    source-map "^0.6.1"
-
-"@types/webpack@^4.41.8":
-  version "4.41.10"
-  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.10.tgz#2e1f6b3508a249854efe3dcc7690905ac5ee10be"
-  integrity sha512-vIy0qaq8AjOjZLuFPqpo7nAJzcoVXMdw3mvpNN07Uvdy0p1IpJeLNBe3obdRP7FX2jIusDE7z1pZa0A6qYUgnA==
-  dependencies:
-    "@types/anymatch" "*"
-    "@types/node" "*"
-    "@types/tapable" "*"
-    "@types/uglify-js" "*"
-    "@types/webpack-sources" "*"
-    source-map "^0.6.0"
-
-"@webassemblyjs/ast@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
-  integrity sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==
-  dependencies:
-    "@webassemblyjs/helper-module-context" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/wast-parser" "1.9.0"
-
-"@webassemblyjs/floating-point-hex-parser@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz#3c3d3b271bddfc84deb00f71344438311d52ffb4"
-  integrity sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==
-
-"@webassemblyjs/helper-api-error@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz#203f676e333b96c9da2eeab3ccef33c45928b6a2"
-  integrity sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==
-
-"@webassemblyjs/helper-buffer@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz#a1442d269c5feb23fcbc9ef759dac3547f29de00"
-  integrity sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==
-
-"@webassemblyjs/helper-code-frame@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz#647f8892cd2043a82ac0c8c5e75c36f1d9159f27"
-  integrity sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==
-  dependencies:
-    "@webassemblyjs/wast-printer" "1.9.0"
-
-"@webassemblyjs/helper-fsm@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz#c05256b71244214671f4b08ec108ad63b70eddb8"
-  integrity sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==
-
-"@webassemblyjs/helper-module-context@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz#25d8884b76839871a08a6c6f806c3979ef712f07"
-  integrity sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-
-"@webassemblyjs/helper-wasm-bytecode@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz#4fed8beac9b8c14f8c58b70d124d549dd1fe5790"
-  integrity sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==
-
-"@webassemblyjs/helper-wasm-section@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz#5a4138d5a6292ba18b04c5ae49717e4167965346"
-  integrity sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-
-"@webassemblyjs/ieee754@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz#15c7a0fbaae83fb26143bbacf6d6df1702ad39e4"
-  integrity sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==
-  dependencies:
-    "@xtuc/ieee754" "^1.2.0"
-
-"@webassemblyjs/leb128@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.9.0.tgz#f19ca0b76a6dc55623a09cffa769e838fa1e1c95"
-  integrity sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==
-  dependencies:
-    "@xtuc/long" "4.2.2"
-
-"@webassemblyjs/utf8@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.9.0.tgz#04d33b636f78e6a6813227e82402f7637b6229ab"
-  integrity sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==
-
-"@webassemblyjs/wasm-edit@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz#3fe6d79d3f0f922183aa86002c42dd256cfee9cf"
-  integrity sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/helper-wasm-section" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-    "@webassemblyjs/wasm-opt" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-    "@webassemblyjs/wast-printer" "1.9.0"
-
-"@webassemblyjs/wasm-gen@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz#50bc70ec68ded8e2763b01a1418bf43491a7a49c"
-  integrity sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/ieee754" "1.9.0"
-    "@webassemblyjs/leb128" "1.9.0"
-    "@webassemblyjs/utf8" "1.9.0"
-
-"@webassemblyjs/wasm-opt@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz#2211181e5b31326443cc8112eb9f0b9028721a61"
-  integrity sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-
-"@webassemblyjs/wasm-parser@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz#9d48e44826df4a6598294aa6c87469d642fff65e"
-  integrity sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-api-error" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/ieee754" "1.9.0"
-    "@webassemblyjs/leb128" "1.9.0"
-    "@webassemblyjs/utf8" "1.9.0"
-
-"@webassemblyjs/wast-parser@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz#3031115d79ac5bd261556cecc3fa90a3ef451914"
-  integrity sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/floating-point-hex-parser" "1.9.0"
-    "@webassemblyjs/helper-api-error" "1.9.0"
-    "@webassemblyjs/helper-code-frame" "1.9.0"
-    "@webassemblyjs/helper-fsm" "1.9.0"
-    "@xtuc/long" "4.2.2"
-
-"@webassemblyjs/wast-printer@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz#4935d54c85fef637b00ce9f52377451d00d47899"
-  integrity sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/wast-parser" "1.9.0"
-    "@xtuc/long" "4.2.2"
-
-"@xtuc/ieee754@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
-  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
-
-"@xtuc/long@4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
-  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
-
-accepts@~1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
-  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
-  dependencies:
-    mime-types "~2.1.24"
-    negotiator "0.6.2"
-
-acorn@^6.2.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
-  integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
-
-address@1.1.2, address@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
-  integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==
-
-aggregate-error@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.0.1.tgz#db2fe7246e536f40d9b5442a39e117d7dd6a24e0"
-  integrity sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA==
-  dependencies:
-    clean-stack "^2.0.0"
-    indent-string "^4.0.0"
-
-airbnb-js-shims@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/airbnb-js-shims/-/airbnb-js-shims-2.2.1.tgz#db481102d682b98ed1daa4c5baa697a05ce5c040"
-  integrity sha512-wJNXPH66U2xjgo1Zwyjf9EydvJ2Si94+vSdk6EERcBfB2VZkeltpqIats0cqIZMLCXP3zcyaUKGYQeIBT6XjsQ==
-  dependencies:
-    array-includes "^3.0.3"
-    array.prototype.flat "^1.2.1"
-    array.prototype.flatmap "^1.2.1"
-    es5-shim "^4.5.13"
-    es6-shim "^0.35.5"
-    function.prototype.name "^1.1.0"
-    globalthis "^1.0.0"
-    object.entries "^1.1.0"
-    object.fromentries "^2.0.0 || ^1.0.0"
-    object.getownpropertydescriptors "^2.0.3"
-    object.values "^1.1.0"
-    promise.allsettled "^1.0.0"
-    promise.prototype.finally "^3.1.0"
-    string.prototype.matchall "^4.0.0 || ^3.0.1"
-    string.prototype.padend "^3.0.0"
-    string.prototype.padstart "^3.0.0"
-    symbol.prototype.description "^1.0.0"
-
-ajv-errors@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
-  integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
-
-ajv-keywords@^3.1.0, ajv-keywords@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
-  integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
-
-ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.0:
-  version "6.12.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.0.tgz#06d60b96d87b8454a5adaba86e7854da629db4b7"
-  integrity sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
-
-ansi-align@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
-  integrity sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==
-  dependencies:
-    string-width "^3.0.0"
-
-ansi-colors@^3.0.0:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
-  integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
-
-ansi-escapes@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
-  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
-
-ansi-escapes@^4.2.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.1.tgz#a5c47cc43181f1f38ffd7076837700d395522a61"
-  integrity sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==
-  dependencies:
-    type-fest "^0.11.0"
-
-ansi-html@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
-  integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
-
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
-  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
-
-ansi-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
-  integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
-
-ansi-regex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
-  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
-
-ansi-regex@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
-  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
-
-ansi-styles@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
-  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
-
-ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
-ansi-styles@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
-  integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
-  dependencies:
-    "@types/color-name" "^1.1.1"
-    color-convert "^2.0.1"
-
-ansi-to-html@^0.6.11:
-  version "0.6.14"
-  resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.6.14.tgz#65fe6d08bba5dd9db33f44a20aec331e0010dad8"
-  integrity sha512-7ZslfB1+EnFSDO5Ju+ue5Y6It19DRnZXWv8jrGHgIlPna5Mh4jz7BV5jCbQneXNFurQcKoolaaAjHtgSBfOIuA==
-  dependencies:
-    entities "^1.1.2"
-
-anymatch@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
-  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
-  dependencies:
-    micromatch "^3.1.4"
-    normalize-path "^2.1.1"
-
-app-root-dir@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/app-root-dir/-/app-root-dir-1.0.2.tgz#38187ec2dea7577fff033ffcb12172692ff6e118"
-  integrity sha1-OBh+wt6nV3//Az/8sSFyaS/24Rg=
-
-aproba@^1.0.3, aproba@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
-  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
-
-are-we-there-yet@~1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
-  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^2.0.6"
-
-argparse@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
-  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
-  dependencies:
-    sprintf-js "~1.0.2"
-
-arr-diff@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
-  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
-
-arr-flatten@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
-  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
-
-arr-union@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
-  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
-
-array-flatten@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
-  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
-
-array-includes@^3.0.3:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.1.tgz#cdd67e6852bdf9c1215460786732255ed2459348"
-  integrity sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0"
-    is-string "^1.0.5"
-
-array-union@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
-  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
-  dependencies:
-    array-uniq "^1.0.1"
-
-array-uniq@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
-  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
-
-array-unique@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
-  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
-
-array.prototype.flat@^1.2.1:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz#0de82b426b0318dbfdb940089e38b043d37f6c7b"
-  integrity sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-array.prototype.flatmap@^1.2.1:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz#1c13f84a178566042dd63de4414440db9222e443"
-  integrity sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-
-array.prototype.map@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.map/-/array.prototype.map-1.0.2.tgz#9a4159f416458a23e9483078de1106b2ef68f8ec"
-  integrity sha512-Az3OYxgsa1g7xDYp86l0nnN4bcmuEITGe1rbdEBVkrqkzMgDcbdQ2R7r41pNzti+4NMces3H8gMmuioZUilLgw==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    es-array-method-boxes-properly "^1.0.0"
-    is-string "^1.0.4"
-
-arrify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
-  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
-
-asn1.js@^4.0.0:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
-  integrity sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==
-  dependencies:
-    bn.js "^4.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-
-assert@^1.1.1:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/assert/-/assert-1.5.0.tgz#55c109aaf6e0aefdb3dc4b71240c70bf574b18eb"
-  integrity sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==
-  dependencies:
-    object-assign "^4.1.1"
-    util "0.10.3"
-
-assign-symbols@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
-  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
-
-async-each@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
-  integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
-
-atob@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
-  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
-
-autoprefixer@^9.7.2:
-  version "9.7.5"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.5.tgz#8df10b9ff9b5814a8d411a5cfbab9c793c392376"
-  integrity sha512-URo6Zvt7VYifomeAfJlMFnYDhow1rk2bufwkbamPEAtQFcL11moLk4PnR7n9vlu7M+BkXAZkHFA0mIcY7tjQFg==
-  dependencies:
-    browserslist "^4.11.0"
-    caniuse-lite "^1.0.30001036"
-    chalk "^2.4.2"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^7.0.27"
-    postcss-value-parser "^4.0.3"
-
-axe-core@^3.3.2:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.3.tgz#5b7c0ee7c5197d546bd3a07c3ef701896f5773e9"
-  integrity sha512-HZpLE7xu05+8AbpqXITGdxp1Xwk8ysAXrg7MiKRY27py3DAyEJpoJQo1727pWF3F+O79V3r+cTWhOzfB49P89w==
-
-babel-code-frame@^6.22.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
-  integrity sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=
-  dependencies:
-    chalk "^1.1.3"
-    esutils "^2.0.2"
-    js-tokens "^3.0.2"
-
-babel-helper-evaluate-path@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-evaluate-path/-/babel-helper-evaluate-path-0.5.0.tgz#a62fa9c4e64ff7ea5cea9353174ef023a900a67c"
-  integrity sha512-mUh0UhS607bGh5wUMAQfOpt2JX2ThXMtppHRdRU1kL7ZLRWIXxoV2UIV1r2cAeeNeU1M5SB5/RSUgUxrK8yOkA==
-
-babel-helper-flip-expressions@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/babel-helper-flip-expressions/-/babel-helper-flip-expressions-0.4.3.tgz#3696736a128ac18bc25254b5f40a22ceb3c1d3fd"
-  integrity sha1-NpZzahKKwYvCUlS19AoizrPB0/0=
-
-babel-helper-is-nodes-equiv@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-is-nodes-equiv/-/babel-helper-is-nodes-equiv-0.0.1.tgz#34e9b300b1479ddd98ec77ea0bbe9342dfe39684"
-  integrity sha1-NOmzALFHnd2Y7HfqC76TQt/jloQ=
-
-babel-helper-is-void-0@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/babel-helper-is-void-0/-/babel-helper-is-void-0-0.4.3.tgz#7d9c01b4561e7b95dbda0f6eee48f5b60e67313e"
-  integrity sha1-fZwBtFYee5Xb2g9u7kj1tg5nMT4=
-
-babel-helper-mark-eval-scopes@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/babel-helper-mark-eval-scopes/-/babel-helper-mark-eval-scopes-0.4.3.tgz#d244a3bef9844872603ffb46e22ce8acdf551562"
-  integrity sha1-0kSjvvmESHJgP/tG4izorN9VFWI=
-
-babel-helper-remove-or-void@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/babel-helper-remove-or-void/-/babel-helper-remove-or-void-0.4.3.tgz#a4f03b40077a0ffe88e45d07010dee241ff5ae60"
-  integrity sha1-pPA7QAd6D/6I5F0HAQ3uJB/1rmA=
-
-babel-helper-to-multiple-sequence-expressions@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-to-multiple-sequence-expressions/-/babel-helper-to-multiple-sequence-expressions-0.5.0.tgz#a3f924e3561882d42fcf48907aa98f7979a4588d"
-  integrity sha512-m2CvfDW4+1qfDdsrtf4dwOslQC3yhbgyBFptncp4wvtdrDHqueW7slsYv4gArie056phvQFhT2nRcGS4bnm6mA==
-
-babel-loader@8.0.6:
-  version "8.0.6"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
-  integrity sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==
-  dependencies:
-    find-cache-dir "^2.0.0"
-    loader-utils "^1.0.2"
-    mkdirp "^0.5.1"
-    pify "^4.0.1"
-
-babel-plugin-add-react-displayname@^0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5"
-  integrity sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=
-
-babel-plugin-dynamic-import-node@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
-  integrity sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==
-  dependencies:
-    object.assign "^4.1.0"
-
-babel-plugin-emotion@^10.0.20, babel-plugin-emotion@^10.0.27:
-  version "10.0.29"
-  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.29.tgz#89d8e497091fcd3d10331f097f1471e4cc3f35b4"
-  integrity sha512-7Jpi1OCxjyz0k163lKtqP+LHMg5z3S6A7vMBfHnF06l2unmtsOmFDzZBpGf0CWo1G4m8UACfVcDJiSiRuu/cSw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@emotion/hash" "0.8.0"
-    "@emotion/memoize" "0.7.4"
-    "@emotion/serialize" "^0.11.16"
-    babel-plugin-macros "^2.0.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^1.0.5"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-
-babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.7.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
-  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
-  dependencies:
-    "@babel/runtime" "^7.7.2"
-    cosmiconfig "^6.0.0"
-    resolve "^1.12.0"
-
-babel-plugin-minify-builtins@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-minify-builtins/-/babel-plugin-minify-builtins-0.5.0.tgz#31eb82ed1a0d0efdc31312f93b6e4741ce82c36b"
-  integrity sha512-wpqbN7Ov5hsNwGdzuzvFcjgRlzbIeVv1gMIlICbPj0xkexnfoIDe7q+AZHMkQmAE/F9R5jkrB6TLfTegImlXag==
-
-babel-plugin-minify-constant-folding@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-minify-constant-folding/-/babel-plugin-minify-constant-folding-0.5.0.tgz#f84bc8dbf6a561e5e350ff95ae216b0ad5515b6e"
-  integrity sha512-Vj97CTn/lE9hR1D+jKUeHfNy+m1baNiJ1wJvoGyOBUx7F7kJqDZxr9nCHjO/Ad+irbR3HzR6jABpSSA29QsrXQ==
-  dependencies:
-    babel-helper-evaluate-path "^0.5.0"
-
-babel-plugin-minify-dead-code-elimination@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-minify-dead-code-elimination/-/babel-plugin-minify-dead-code-elimination-0.5.1.tgz#1a0c68e44be30de4976ca69ffc535e08be13683f"
-  integrity sha512-x8OJOZIrRmQBcSqxBcLbMIK8uPmTvNWPXH2bh5MDCW1latEqYiRMuUkPImKcfpo59pTUB2FT7HfcgtG8ZlR5Qg==
-  dependencies:
-    babel-helper-evaluate-path "^0.5.0"
-    babel-helper-mark-eval-scopes "^0.4.3"
-    babel-helper-remove-or-void "^0.4.3"
-    lodash "^4.17.11"
-
-babel-plugin-minify-flip-comparisons@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-minify-flip-comparisons/-/babel-plugin-minify-flip-comparisons-0.4.3.tgz#00ca870cb8f13b45c038b3c1ebc0f227293c965a"
-  integrity sha1-AMqHDLjxO0XAOLPB68DyJyk8llo=
-  dependencies:
-    babel-helper-is-void-0 "^0.4.3"
-
-babel-plugin-minify-guarded-expressions@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-minify-guarded-expressions/-/babel-plugin-minify-guarded-expressions-0.4.4.tgz#818960f64cc08aee9d6c75bec6da974c4d621135"
-  integrity sha512-RMv0tM72YuPPfLT9QLr3ix9nwUIq+sHT6z8Iu3sLbqldzC1Dls8DPCywzUIzkTx9Zh1hWX4q/m9BPoPed9GOfA==
-  dependencies:
-    babel-helper-evaluate-path "^0.5.0"
-    babel-helper-flip-expressions "^0.4.3"
-
-babel-plugin-minify-infinity@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-minify-infinity/-/babel-plugin-minify-infinity-0.4.3.tgz#dfb876a1b08a06576384ef3f92e653ba607b39ca"
-  integrity sha1-37h2obCKBldjhO8/kuZTumB7Oco=
-
-babel-plugin-minify-mangle-names@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-minify-mangle-names/-/babel-plugin-minify-mangle-names-0.5.0.tgz#bcddb507c91d2c99e138bd6b17a19c3c271e3fd3"
-  integrity sha512-3jdNv6hCAw6fsX1p2wBGPfWuK69sfOjfd3zjUXkbq8McbohWy23tpXfy5RnToYWggvqzuMOwlId1PhyHOfgnGw==
-  dependencies:
-    babel-helper-mark-eval-scopes "^0.4.3"
-
-babel-plugin-minify-numeric-literals@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-minify-numeric-literals/-/babel-plugin-minify-numeric-literals-0.4.3.tgz#8e4fd561c79f7801286ff60e8c5fd9deee93c0bc"
-  integrity sha1-jk/VYcefeAEob/YOjF/Z3u6TwLw=
-
-babel-plugin-minify-replace@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-minify-replace/-/babel-plugin-minify-replace-0.5.0.tgz#d3e2c9946c9096c070efc96761ce288ec5c3f71c"
-  integrity sha512-aXZiaqWDNUbyNNNpWs/8NyST+oU7QTpK7J9zFEFSA0eOmtUNMU3fczlTTTlnCxHmq/jYNFEmkkSG3DDBtW3Y4Q==
-
-babel-plugin-minify-simplify@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-minify-simplify/-/babel-plugin-minify-simplify-0.5.1.tgz#f21613c8b95af3450a2ca71502fdbd91793c8d6a"
-  integrity sha512-OSYDSnoCxP2cYDMk9gxNAed6uJDiDz65zgL6h8d3tm8qXIagWGMLWhqysT6DY3Vs7Fgq7YUDcjOomhVUb+xX6A==
-  dependencies:
-    babel-helper-evaluate-path "^0.5.0"
-    babel-helper-flip-expressions "^0.4.3"
-    babel-helper-is-nodes-equiv "^0.0.1"
-    babel-helper-to-multiple-sequence-expressions "^0.5.0"
-
-babel-plugin-minify-type-constructors@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-minify-type-constructors/-/babel-plugin-minify-type-constructors-0.4.3.tgz#1bc6f15b87f7ab1085d42b330b717657a2156500"
-  integrity sha1-G8bxW4f3qxCF1CszC3F2V6IVZQA=
-  dependencies:
-    babel-helper-is-void-0 "^0.4.3"
-
-babel-plugin-syntax-jsx@6.18.0, babel-plugin-syntax-jsx@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
-babel-plugin-transform-inline-consecutive-adds@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-inline-consecutive-adds/-/babel-plugin-transform-inline-consecutive-adds-0.4.3.tgz#323d47a3ea63a83a7ac3c811ae8e6941faf2b0d1"
-  integrity sha1-Mj1Ho+pjqDp6w8gRro5pQfrysNE=
-
-babel-plugin-transform-member-expression-literals@^6.9.4:
-  version "6.9.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-member-expression-literals/-/babel-plugin-transform-member-expression-literals-6.9.4.tgz#37039c9a0c3313a39495faac2ff3a6b5b9d038bf"
-  integrity sha1-NwOcmgwzE6OUlfqsL/OmtbnQOL8=
-
-babel-plugin-transform-merge-sibling-variables@^6.9.4:
-  version "6.9.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-merge-sibling-variables/-/babel-plugin-transform-merge-sibling-variables-6.9.4.tgz#85b422fc3377b449c9d1cde44087203532401dae"
-  integrity sha1-hbQi/DN3tEnJ0c3kQIcgNTJAHa4=
-
-babel-plugin-transform-minify-booleans@^6.9.4:
-  version "6.9.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-minify-booleans/-/babel-plugin-transform-minify-booleans-6.9.4.tgz#acbb3e56a3555dd23928e4b582d285162dd2b198"
-  integrity sha1-rLs+VqNVXdI5KOS1gtKFFi3SsZg=
-
-babel-plugin-transform-property-literals@^6.9.4:
-  version "6.9.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-property-literals/-/babel-plugin-transform-property-literals-6.9.4.tgz#98c1d21e255736573f93ece54459f6ce24985d39"
-  integrity sha1-mMHSHiVXNlc/k+zlRFn2ziSYXTk=
-  dependencies:
-    esutils "^2.0.2"
-
-babel-plugin-transform-regexp-constructors@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regexp-constructors/-/babel-plugin-transform-regexp-constructors-0.4.3.tgz#58b7775b63afcf33328fae9a5f88fbd4fb0b4965"
-  integrity sha1-WLd3W2OvzzMyj66aX4j71PsLSWU=
-
-babel-plugin-transform-remove-console@^6.9.4:
-  version "6.9.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz#b980360c067384e24b357a588d807d3c83527780"
-  integrity sha1-uYA2DAZzhOJLNXpYjYB9PINSd4A=
-
-babel-plugin-transform-remove-debugger@^6.9.4:
-  version "6.9.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-debugger/-/babel-plugin-transform-remove-debugger-6.9.4.tgz#42b727631c97978e1eb2d199a7aec84a18339ef2"
-  integrity sha1-QrcnYxyXl44estGZp67IShgznvI=
-
-babel-plugin-transform-remove-undefined@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-undefined/-/babel-plugin-transform-remove-undefined-0.5.0.tgz#80208b31225766c630c97fa2d288952056ea22dd"
-  integrity sha512-+M7fJYFaEE/M9CXa0/IRkDbiV3wRELzA1kKQFCJ4ifhrzLKn/9VCCgj9OFmYWwBd8IB48YdgPkHYtbYq+4vtHQ==
-  dependencies:
-    babel-helper-evaluate-path "^0.5.0"
-
-babel-plugin-transform-simplify-comparison-operators@^6.9.4:
-  version "6.9.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-simplify-comparison-operators/-/babel-plugin-transform-simplify-comparison-operators-6.9.4.tgz#f62afe096cab0e1f68a2d753fdf283888471ceb9"
-  integrity sha1-9ir+CWyrDh9ootdT/fKDiIRxzrk=
-
-babel-plugin-transform-undefined-to-void@^6.9.4:
-  version "6.9.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.9.4.tgz#be241ca81404030678b748717322b89d0c8fe280"
-  integrity sha1-viQcqBQEAwZ4t0hxcyK4nQyP4oA=
-
-"babel-preset-minify@^0.5.0 || 0.6.0-alpha.5":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-minify/-/babel-preset-minify-0.5.1.tgz#25f5d0bce36ec818be80338d0e594106e21eaa9f"
-  integrity sha512-1IajDumYOAPYImkHbrKeiN5AKKP9iOmRoO2IPbIuVp0j2iuCcj0n7P260z38siKMZZ+85d3mJZdtW8IgOv+Tzg==
-  dependencies:
-    babel-plugin-minify-builtins "^0.5.0"
-    babel-plugin-minify-constant-folding "^0.5.0"
-    babel-plugin-minify-dead-code-elimination "^0.5.1"
-    babel-plugin-minify-flip-comparisons "^0.4.3"
-    babel-plugin-minify-guarded-expressions "^0.4.4"
-    babel-plugin-minify-infinity "^0.4.3"
-    babel-plugin-minify-mangle-names "^0.5.0"
-    babel-plugin-minify-numeric-literals "^0.4.3"
-    babel-plugin-minify-replace "^0.5.0"
-    babel-plugin-minify-simplify "^0.5.1"
-    babel-plugin-minify-type-constructors "^0.4.3"
-    babel-plugin-transform-inline-consecutive-adds "^0.4.3"
-    babel-plugin-transform-member-expression-literals "^6.9.4"
-    babel-plugin-transform-merge-sibling-variables "^6.9.4"
-    babel-plugin-transform-minify-booleans "^6.9.4"
-    babel-plugin-transform-property-literals "^6.9.4"
-    babel-plugin-transform-regexp-constructors "^0.4.3"
-    babel-plugin-transform-remove-console "^6.9.4"
-    babel-plugin-transform-remove-debugger "^6.9.4"
-    babel-plugin-transform-remove-undefined "^0.5.0"
-    babel-plugin-transform-simplify-comparison-operators "^6.9.4"
-    babel-plugin-transform-undefined-to-void "^6.9.4"
-    lodash "^4.17.11"
-
-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
-
-base64-js@^1.0.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
-  integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
-
-base@^0.11.1:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
-  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
-  dependencies:
-    cache-base "^1.0.1"
-    class-utils "^0.3.5"
-    component-emitter "^1.2.1"
-    define-property "^1.0.0"
-    isobject "^3.0.1"
-    mixin-deep "^1.2.0"
-    pascalcase "^0.1.1"
-
-batch-processor@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
-  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
-
-big.js@^5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
-  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-
-binary-extensions@^1.0.0:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
-  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
-
-bindings@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
-  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
-  dependencies:
-    file-uri-to-path "1.0.0"
-
-bluebird@^3.3.5, bluebird@^3.5.5:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
-  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
-
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
-  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
-
-body-parser@1.19.0:
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
-  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
-  dependencies:
-    bytes "3.1.0"
-    content-type "~1.0.4"
-    debug "2.6.9"
-    depd "~1.1.2"
-    http-errors "1.7.2"
-    iconv-lite "0.4.24"
-    on-finished "~2.3.0"
-    qs "6.7.0"
-    raw-body "2.4.0"
-    type-is "~1.6.17"
-
-boolbase@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
-  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
-
-boxen@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-4.2.0.tgz#e411b62357d6d6d36587c8ac3d5d974daa070e64"
-  integrity sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==
-  dependencies:
-    ansi-align "^3.0.0"
-    camelcase "^5.3.1"
-    chalk "^3.0.0"
-    cli-boxes "^2.2.0"
-    string-width "^4.1.0"
-    term-size "^2.1.0"
-    type-fest "^0.8.1"
-    widest-line "^3.1.0"
-
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-braces@^2.3.1, braces@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
-  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
-  dependencies:
-    arr-flatten "^1.1.0"
-    array-unique "^0.3.2"
-    extend-shallow "^2.0.1"
-    fill-range "^4.0.0"
-    isobject "^3.0.1"
-    repeat-element "^1.1.2"
-    snapdragon "^0.8.1"
-    snapdragon-node "^2.0.1"
-    split-string "^3.0.2"
-    to-regex "^3.0.1"
-
-braces@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
-  dependencies:
-    fill-range "^7.0.1"
-
-brorand@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
-  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
-
-browserify-aes@^1.0.0, browserify-aes@^1.0.4:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
-  integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==
-  dependencies:
-    buffer-xor "^1.0.3"
-    cipher-base "^1.0.0"
-    create-hash "^1.1.0"
-    evp_bytestokey "^1.0.3"
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-browserify-cipher@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
-  integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==
-  dependencies:
-    browserify-aes "^1.0.4"
-    browserify-des "^1.0.0"
-    evp_bytestokey "^1.0.0"
-
-browserify-des@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
-  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
-  dependencies:
-    cipher-base "^1.0.1"
-    des.js "^1.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
-
-browserify-rsa@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
-  integrity sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=
-  dependencies:
-    bn.js "^4.1.0"
-    randombytes "^2.0.1"
-
-browserify-sign@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
-  integrity sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=
-  dependencies:
-    bn.js "^4.1.1"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.2"
-    elliptic "^6.0.0"
-    inherits "^2.0.1"
-    parse-asn1 "^5.0.0"
-
-browserify-zlib@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
-  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
-  dependencies:
-    pako "~1.0.5"
-
-browserslist@4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.0.tgz#9ee89225ffc07db03409f2fee524dc8227458a17"
-  integrity sha512-9rGNDtnj+HaahxiVV38Gn8n8Lr8REKsel68v1sPFfIGEK6uSXTY3h9acgiT1dZVtOOUtifo/Dn8daDQ5dUgVsA==
-  dependencies:
-    caniuse-lite "^1.0.30000989"
-    electron-to-chromium "^1.3.247"
-    node-releases "^1.1.29"
-
-browserslist@^4.11.0, browserslist@^4.8.3, browserslist@^4.9.1:
-  version "4.11.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.11.1.tgz#92f855ee88d6e050e7e7311d987992014f1a1f1b"
-  integrity sha512-DCTr3kDrKEYNw6Jb9HFxVLQNaue8z+0ZfRBRjmCunKDEXEBajKDj2Y+Uelg+Pi29OnvaSGwjOsnRyNEkXzHg5g==
-  dependencies:
-    caniuse-lite "^1.0.30001038"
-    electron-to-chromium "^1.3.390"
-    node-releases "^1.1.53"
-    pkg-up "^2.0.0"
-
-buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
-
-buffer-xor@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
-  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
-
-buffer@^4.3.0:
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
-  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-    isarray "^1.0.0"
-
-builtin-status-codes@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
-  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
-
-bytes@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
-  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
-
-cacache@^12.0.2:
-  version "12.0.4"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
-  integrity sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
-  dependencies:
-    bluebird "^3.5.5"
-    chownr "^1.1.1"
-    figgy-pudding "^3.5.1"
-    glob "^7.1.4"
-    graceful-fs "^4.1.15"
-    infer-owner "^1.0.3"
-    lru-cache "^5.1.1"
-    mississippi "^3.0.0"
-    mkdirp "^0.5.1"
-    move-concurrently "^1.0.1"
-    promise-inflight "^1.0.1"
-    rimraf "^2.6.3"
-    ssri "^6.0.1"
-    unique-filename "^1.1.1"
-    y18n "^4.0.0"
-
-cacache@^13.0.1:
-  version "13.0.1"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-13.0.1.tgz#a8000c21697089082f85287a1aec6e382024a71c"
-  integrity sha512-5ZvAxd05HDDU+y9BVvcqYu2LLXmPnQ0hW62h32g4xBTgL/MppR4/04NHfj/ycM2y6lmTnbw6HVi+1eN0Psba6w==
-  dependencies:
-    chownr "^1.1.2"
-    figgy-pudding "^3.5.1"
-    fs-minipass "^2.0.0"
-    glob "^7.1.4"
-    graceful-fs "^4.2.2"
-    infer-owner "^1.0.4"
-    lru-cache "^5.1.1"
-    minipass "^3.0.0"
-    minipass-collect "^1.0.2"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.2"
-    mkdirp "^0.5.1"
-    move-concurrently "^1.0.1"
-    p-map "^3.0.0"
-    promise-inflight "^1.0.1"
-    rimraf "^2.7.1"
-    ssri "^7.0.0"
-    unique-filename "^1.1.1"
-
-cache-base@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
-  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
-  dependencies:
-    collection-visit "^1.0.0"
-    component-emitter "^1.2.1"
-    get-value "^2.0.6"
-    has-value "^1.0.0"
-    isobject "^3.0.1"
-    set-value "^2.0.0"
-    to-object-path "^0.3.0"
-    union-value "^1.0.0"
-    unset-value "^1.0.0"
-
-call-me-maybe@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
-  integrity sha1-JtII6onje1y95gJQoV8DHBak1ms=
-
-caller-callsite@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
-  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
-  dependencies:
-    callsites "^2.0.0"
-
-caller-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
-  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
-  dependencies:
-    caller-callsite "^2.0.0"
-
-callsites@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
-  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
-
-callsites@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
-  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
-
-camel-case@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.1.tgz#1fc41c854f00e2f7d0139dfeba1542d6896fe547"
-  integrity sha512-7fa2WcG4fYFkclIvEmxBbTvmibwF2/agfEBc6q3lOpVu0A13ltLsA+Hr/8Hp6kp5f+G7hKi6t8lys6XxP+1K6Q==
-  dependencies:
-    pascal-case "^3.1.1"
-    tslib "^1.10.0"
-
-camelcase@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-
-can-use-dom@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
-  integrity sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo=
-
-caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001036, caniuse-lite@^1.0.30001038:
-  version "1.0.30001038"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz#44da3cbca2ab6cb6aa83d1be5d324e17f141caff"
-  integrity sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ==
-
-case-sensitive-paths-webpack-plugin@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.3.0.tgz#23ac613cc9a856e4f88ff8bb73bbb5e989825cf7"
-  integrity sha512-/4YgnZS8y1UXXmC02xD5rRrBEu6T5ub+mQHLNRj0fzTRbgdBYhsNo2V5EqwgqrExjxsjtF/OpAKAMkKsxbD5XQ==
-
-chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-chalk@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
-  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
-  dependencies:
-    ansi-styles "^2.2.1"
-    escape-string-regexp "^1.0.2"
-    has-ansi "^2.0.0"
-    strip-ansi "^3.0.0"
-    supports-color "^2.0.0"
-
-chalk@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
-  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
-character-entities-legacy@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
-  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
-
-character-entities@^1.0.0:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
-  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
-
-character-reference-invalid@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
-  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
-
-chardet@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
-  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
-
-chokidar@^2.0.4, chokidar@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
-  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
-  dependencies:
-    anymatch "^2.0.0"
-    async-each "^1.0.1"
-    braces "^2.3.2"
-    glob-parent "^3.1.0"
-    inherits "^2.0.3"
-    is-binary-path "^1.0.0"
-    is-glob "^4.0.0"
-    normalize-path "^3.0.0"
-    path-is-absolute "^1.0.0"
-    readdirp "^2.2.1"
-    upath "^1.1.1"
-  optionalDependencies:
-    fsevents "^1.2.7"
-
-chownr@^1.1.1, chownr@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
-  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
-
-chrome-trace-event@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
-  integrity sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ==
-  dependencies:
-    tslib "^1.9.0"
-
-cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
-  integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-class-utils@^0.3.5:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
-  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
-  dependencies:
-    arr-union "^3.1.0"
-    define-property "^0.2.5"
-    isobject "^3.0.0"
-    static-extend "^0.1.1"
-
-classnames@^2.2.5:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
-  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
-
-clean-css@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
-  integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
-  dependencies:
-    source-map "~0.6.0"
-
-clean-stack@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
-  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
-
-cli-boxes@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.0.tgz#538ecae8f9c6ca508e3c3c95b453fe93cb4c168d"
-  integrity sha512-gpaBrMAizVEANOpfZp/EEUixTXDyGt7DFzdK5hU+UbWt/J0lB0w20ncZj59Z9a93xHb9u12zF5BS6i9RKbtg4w==
-
-cli-cursor@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
-  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
-  dependencies:
-    restore-cursor "^2.0.0"
-
-cli-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
-  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
-  dependencies:
-    restore-cursor "^3.1.0"
-
-cli-table3@0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.5.1.tgz#0252372d94dfc40dbd8df06005f48f31f656f202"
-  integrity sha512-7Qg2Jrep1S/+Q3EceiZtQcDPWxhAvBw+ERf1162v4sikJrvojMHFqXt8QIVha8UlH9rgU0BeWPytZ9/TzYqlUw==
-  dependencies:
-    object-assign "^4.1.0"
-    string-width "^2.1.1"
-  optionalDependencies:
-    colors "^1.1.2"
-
-cli-width@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
-  integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
-
-clipboard@^2.0.0:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
-  integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
-  dependencies:
-    good-listener "^1.2.2"
-    select "^1.1.2"
-    tiny-emitter "^2.0.0"
-
-code-point-at@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
-  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
-
-collection-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
-  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
-  dependencies:
-    map-visit "^1.0.0"
-    object-visit "^1.0.0"
-
-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-convert@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
-  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
-  dependencies:
-    color-name "~1.1.4"
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-color-name@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
-colors@^1.1.2:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
-  integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
-
-comma-separated-tokens@^1.0.0:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
-  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
-
-commander@^2.20.0:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
-commander@^4.0.1, commander@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
-  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
-
-commondir@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
-  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
-
-component-emitter@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
-  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-concat-stream@^1.5.0:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
-  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
-  dependencies:
-    buffer-from "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
-
-console-browserify@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
-  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
-
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
-
-constants-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
-  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
-
-content-disposition@0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
-  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
-  dependencies:
-    safe-buffer "5.1.2"
-
-content-type@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
-  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
-
-convert-source-map@1.7.0, convert-source-map@^1.5.0, convert-source-map@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
-  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
-  dependencies:
-    safe-buffer "~5.1.1"
-
-cookie-signature@1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
-  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
-
-cookie@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
-  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
-
-copy-concurrently@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
-  integrity sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==
-  dependencies:
-    aproba "^1.1.1"
-    fs-write-stream-atomic "^1.0.8"
-    iferr "^0.1.5"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.4"
-    run-queue "^1.0.0"
-
-copy-descriptor@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
-  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
-
-copy-to-clipboard@^3.0.8:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
-  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
-  dependencies:
-    toggle-selection "^1.0.6"
-
-core-js-compat@^3.6.2:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.4.tgz#938476569ebb6cda80d339bcf199fae4f16fff17"
-  integrity sha512-zAa3IZPvsJ0slViBQ2z+vgyyTuhd3MFn1rBQjZSKVEgB0UMYhUkCj9jJUVPgGTGqWvsBVmfnruXgTcNyTlEiSA==
-  dependencies:
-    browserslist "^4.8.3"
-    semver "7.0.0"
-
-core-js-pure@^3.0.0, core-js-pure@^3.0.1:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.4.tgz#4bf1ba866e25814f149d4e9aaa08c36173506e3a"
-  integrity sha512-epIhRLkXdgv32xIUFaaAry2wdxZYBi6bgM7cB136dzzXXa+dFyRLTZeLUJxnd8ShrmyVXBub63n2NHo2JAt8Cw==
-
-core-js@3.6.4, core-js@^3.0.1, core-js@^3.0.4:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
-  integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
-
-core-util-is@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
-corejs-upgrade-webpack-plugin@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/corejs-upgrade-webpack-plugin/-/corejs-upgrade-webpack-plugin-2.2.0.tgz#503293bf1fdcb104918eb40d0294e4776ad6923a"
-  integrity sha512-J0QMp9GNoiw91Kj/dkIQFZeiCXgXoja/Wlht1SPybxerBWh4NCmb0pOgCv61lrlQZETwvVVfAFAA3IqoEO9aqQ==
-  dependencies:
-    resolve-from "^5.0.0"
-    webpack "^4.38.0"
-
-cosmiconfig@^5.0.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
-  integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
-  dependencies:
-    import-fresh "^2.0.0"
-    is-directory "^0.3.1"
-    js-yaml "^3.13.1"
-    parse-json "^4.0.0"
-
-cosmiconfig@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
-  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.1.0"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.7.2"
-
-create-ecdh@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
-  integrity sha512-GbEHQPMOswGpKXM9kCWVrremUcBmjteUaQ01T9rkKCPDXfUHX0IoP9LpHYo2NPFampa4e+/pFDc3jQdxrxQLaw==
-  dependencies:
-    bn.js "^4.1.0"
-    elliptic "^6.0.0"
-
-create-hash@^1.1.0, create-hash@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
-  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
-  dependencies:
-    cipher-base "^1.0.1"
-    inherits "^2.0.1"
-    md5.js "^1.3.4"
-    ripemd160 "^2.0.1"
-    sha.js "^2.4.0"
-
-create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
-  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
-  dependencies:
-    cipher-base "^1.0.3"
-    create-hash "^1.1.0"
-    inherits "^2.0.1"
-    ripemd160 "^2.0.0"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
-create-react-context@0.3.0, create-react-context@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
-  integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
-  dependencies:
-    gud "^1.0.0"
-    warning "^4.0.3"
-
-cross-spawn@6.0.5:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
-  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
-  dependencies:
-    nice-try "^1.0.4"
-    path-key "^2.0.1"
-    semver "^5.5.0"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
-crypto-browserify@^3.11.0:
-  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
-  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
-  dependencies:
-    browserify-cipher "^1.0.0"
-    browserify-sign "^4.0.0"
-    create-ecdh "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.0"
-    diffie-hellman "^5.0.0"
-    inherits "^2.0.1"
-    pbkdf2 "^3.0.3"
-    public-encrypt "^4.0.0"
-    randombytes "^2.0.0"
-    randomfill "^1.0.3"
-
-css-loader@^3.0.0:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.4.2.tgz#d3fdb3358b43f233b78501c5ed7b1c6da6133202"
-  integrity sha512-jYq4zdZT0oS0Iykt+fqnzVLRIeiPWhka+7BqPn+oSIpWJAHak5tmB/WZrJ2a21JhCeFyNnnlroSl8c+MtVndzA==
-  dependencies:
-    camelcase "^5.3.1"
-    cssesc "^3.0.0"
-    icss-utils "^4.1.1"
-    loader-utils "^1.2.3"
-    normalize-path "^3.0.0"
-    postcss "^7.0.23"
-    postcss-modules-extract-imports "^2.0.0"
-    postcss-modules-local-by-default "^3.0.2"
-    postcss-modules-scope "^2.1.1"
-    postcss-modules-values "^3.0.0"
-    postcss-value-parser "^4.0.2"
-    schema-utils "^2.6.0"
-
-css-select@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
-  integrity sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=
-  dependencies:
-    boolbase "~1.0.0"
-    css-what "2.1"
-    domutils "1.5.1"
-    nth-check "~1.0.1"
-
-css-what@2.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
-  integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
-
-cssesc@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
-  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
-
-csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.7:
-  version "2.6.10"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
-  integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
-
-cyclist@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
-  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
-
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
-  dependencies:
-    ms "2.0.0"
-
-debug@^3.0.0, debug@^3.2.5:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
-  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
-  dependencies:
-    ms "^2.1.1"
-
-debug@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
-  dependencies:
-    ms "^2.1.1"
-
-decode-uri-component@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
-  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
-
-deep-equal@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
-  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
-  dependencies:
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.1"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.2.0"
-
-deep-object-diff@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.0.tgz#d6fabf476c2ed1751fc94d5ca693d2ed8c18bc5a"
-  integrity sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==
-
-define-properties@^1.1.2, define-properties@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
-  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
-  dependencies:
-    object-keys "^1.0.12"
-
-define-property@^0.2.5:
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
-  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
-  dependencies:
-    is-descriptor "^0.1.0"
-
-define-property@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
-  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
-  dependencies:
-    is-descriptor "^1.0.0"
-
-define-property@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
-  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
-  dependencies:
-    is-descriptor "^1.0.2"
-    isobject "^3.0.1"
-
-delegate@^3.1.2:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
-  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
-
-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
-  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
-
-depd@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
-  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
-
-des.js@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
-  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==
-  dependencies:
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-
-destroy@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
-  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
-
-detect-node@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
-  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
-
-detect-port-alt@1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.6.tgz#24707deabe932d4a3cf621302027c2b266568275"
-  integrity sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==
-  dependencies:
-    address "^1.0.1"
-    debug "^2.6.0"
-
-detect-port@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/detect-port/-/detect-port-1.3.0.tgz#d9c40e9accadd4df5cac6a782aefd014d573d1f1"
-  integrity sha512-E+B1gzkl2gqxt1IhUzwjrxBKRqx1UzC3WLONHinn8S3T6lwV/agVCyitiFOsGJ/eYuEUBvD71MZHy3Pv1G9doQ==
-  dependencies:
-    address "^1.0.1"
-    debug "^2.6.0"
-
-diffie-hellman@^5.0.0:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
-  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
-  dependencies:
-    bn.js "^4.1.0"
-    miller-rabin "^4.0.0"
-    randombytes "^2.0.0"
-
-dir-glob@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
-  integrity sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag==
-  dependencies:
-    arrify "^1.0.1"
-    path-type "^3.0.0"
-
-dom-converter@^0.2:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
-  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
-  dependencies:
-    utila "~0.4"
-
-dom-helpers@^5.0.1:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.4.tgz#4609680ab5c79a45f2531441f1949b79d6587f4b"
-  integrity sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^2.6.7"
-
-dom-serializer@0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
-  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
-  dependencies:
-    domelementtype "^2.0.1"
-    entities "^2.0.0"
-
-dom-walk@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
-  integrity sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=
-
-domain-browser@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
-  integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
-
-domelementtype@1, domelementtype@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
-  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
-
-domelementtype@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
-  integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
-
-domhandler@^2.3.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
-  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
-  dependencies:
-    domelementtype "1"
-
-domutils@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
-  integrity sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
-domutils@^1.5.1:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
-  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
-dot-case@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.3.tgz#21d3b52efaaba2ea5fda875bb1aa8124521cf4aa"
-  integrity sha512-7hwEmg6RiSQfm/GwPL4AAWXKy3YNNZA3oFv2Pdiey0mwkRCPZ9x6SZbkLcn8Ma5PYeVokzoD4Twv2n7LKp5WeA==
-  dependencies:
-    no-case "^3.0.3"
-    tslib "^1.10.0"
-
-dotenv-defaults@^1.0.2:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz#032c024f4b5906d9990eb06d722dc74cc60ec1bd"
-  integrity sha512-6fPRo9o/3MxKvmRZBD3oNFdxODdhJtIy1zcJeUSCs6HCy4tarUpd+G67UTU9tF6OWXeSPqsm4fPAB+2eY9Rt9Q==
-  dependencies:
-    dotenv "^6.2.0"
-
-dotenv-expand@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
-  integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
-
-dotenv-webpack@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.7.0.tgz#4384d8c57ee6f405c296278c14a9f9167856d3a1"
-  integrity sha512-wwNtOBW/6gLQSkb8p43y0Wts970A3xtNiG/mpwj9MLUhtPCQG6i+/DSXXoNN7fbPCU/vQ7JjwGmgOeGZSSZnsw==
-  dependencies:
-    dotenv-defaults "^1.0.2"
-
-dotenv@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
-  integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
-
-dotenv@^8.0.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
-  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
-
-duplexer@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
-  integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
-
-duplexify@^3.4.2, duplexify@^3.6.0:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
-  integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
-  dependencies:
-    end-of-stream "^1.0.0"
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-    stream-shift "^1.0.0"
-
-ee-first@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
-  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
-
-ejs@^2.7.4:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
-  integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
-
-electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.390:
-  version "1.3.393"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.393.tgz#d13fa4cbf5065e18451c84465d22aef6aca9a911"
-  integrity sha512-Ko3/VdhZAaMaJBLBFqEJ+M1qMiBI8sJfPY/hSJvDrkB3Do8LJsL9tmXy4w7o9nPXif/jFaZGSlXTQWU8XVsYtg==
-
-element-resize-detector@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.1.tgz#b0305194447a4863155e58f13323a0aef30851d1"
-  integrity sha512-BdFsPepnQr9fznNPF9nF4vQ457U/ZJXQDSNF1zBe7yaga8v9AdZf3/NElYxFdUh7SitSGt040QygiTo6dtatIw==
-  dependencies:
-    batch-processor "1.0.0"
-
-elliptic@^6.0.0:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
-  integrity sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==
-  dependencies:
-    bn.js "^4.4.0"
-    brorand "^1.0.1"
-    hash.js "^1.0.0"
-    hmac-drbg "^1.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.0"
-
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
-  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
-
-emoji-regex@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
-  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
-
-emojis-list@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
-  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
-
-emojis-list@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
-  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
-
-emotion-theming@^10.0.19:
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10"
-  integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/weak-memoize" "0.2.5"
-    hoist-non-react-statics "^3.3.0"
-
-encodeurl@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
-  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
-
-end-of-stream@^1.0.0, end-of-stream@^1.1.0:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
-  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
-  dependencies:
-    once "^1.4.0"
-
-enhanced-resolve@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz#2937e2b8066cd0fe7ce0990a98f0d71a35189f66"
-  integrity sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
-  dependencies:
-    graceful-fs "^4.1.2"
-    memory-fs "^0.5.0"
-    tapable "^1.0.0"
-
-entities@^1.1.1, entities@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
-  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
-
-entities@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
-  integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
-
-errno@^0.1.3, errno@~0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
-  integrity sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==
-  dependencies:
-    prr "~1.0.1"
-
-error-ex@^1.3.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
-  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
-  dependencies:
-    is-arrayish "^0.2.1"
-
-es-abstract@^1.17.0, es-abstract@^1.17.0-next.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.4, es-abstract@^1.17.5:
-  version "1.17.5"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9"
-  integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.1.5"
-    is-regex "^1.0.5"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimleft "^2.1.1"
-    string.prototype.trimright "^2.1.1"
-
-es-array-method-boxes-properly@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
-  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
-
-es-get-iterator@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
-  dependencies:
-    es-abstract "^1.17.4"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
-es-to-primitive@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
-  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
-  dependencies:
-    is-callable "^1.1.4"
-    is-date-object "^1.0.1"
-    is-symbol "^1.0.2"
-
-es5-shim@^4.5.13:
-  version "4.5.14"
-  resolved "https://registry.yarnpkg.com/es5-shim/-/es5-shim-4.5.14.tgz#90009e1019d0ea327447cb523deaff8fe45697ef"
-  integrity sha512-7SwlpL+2JpymWTt8sNLuC2zdhhc+wrfe5cMPI2j0o6WsPdfAiPwmFy2f0AocPB4RQVBOZ9kNTgi5YF7TdhkvEg==
-
-es6-shim@^0.35.5:
-  version "0.35.5"
-  resolved "https://registry.yarnpkg.com/es6-shim/-/es6-shim-0.35.5.tgz#46f59dc0a84a1c5029e8ff1166ca0a902077a9ab"
-  integrity sha512-E9kK/bjtCQRpN1K28Xh4BlmP8egvZBGJJ+9GtnzOwt7mdqtrjHFuVGr7QJfdjBIKqrlU5duPf3pCBoDrkjVYFg==
-
-escape-html@^1.0.3, escape-html@~1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
-  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
-
-escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-eslint-scope@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
-  integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==
-  dependencies:
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
-
-esprima@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
-  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
-
-esrecurse@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
-  integrity sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==
-  dependencies:
-    estraverse "^4.1.0"
-
-estraverse@^4.1.0, estraverse@^4.1.1:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
-  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
-
-esutils@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
-  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
-
-etag@~1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
-  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
-
-eventemitter3@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
-  integrity sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==
-
-events@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.1.0.tgz#84279af1b34cb75aa88bf5ff291f6d0bd9b31a59"
-  integrity sha512-Rv+u8MLHNOdMjTAFeT3nCjHn2aGlx435FP/sDHNaRhDEMwyI/aB22Kj2qIN8R0cw3z28psEQLYwxVKLsKrMgWg==
-
-eventsource@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.0.7.tgz#8fbc72c93fcd34088090bc0a4e64f4b5cee6d8d0"
-  integrity sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==
-  dependencies:
-    original "^1.0.0"
-
-evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
-  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
-  dependencies:
-    md5.js "^1.3.4"
-    safe-buffer "^5.1.1"
-
-expand-brackets@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
-  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
-  dependencies:
-    debug "^2.3.3"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    posix-character-classes "^0.1.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-express@^4.17.0:
-  version "4.17.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
-  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
-  dependencies:
-    accepts "~1.3.7"
-    array-flatten "1.1.1"
-    body-parser "1.19.0"
-    content-disposition "0.5.3"
-    content-type "~1.0.4"
-    cookie "0.4.0"
-    cookie-signature "1.0.6"
-    debug "2.6.9"
-    depd "~1.1.2"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    finalhandler "~1.1.2"
-    fresh "0.5.2"
-    merge-descriptors "1.0.1"
-    methods "~1.1.2"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    path-to-regexp "0.1.7"
-    proxy-addr "~2.0.5"
-    qs "6.7.0"
-    range-parser "~1.2.1"
-    safe-buffer "5.1.2"
-    send "0.17.1"
-    serve-static "1.14.1"
-    setprototypeof "1.1.1"
-    statuses "~1.5.0"
-    type-is "~1.6.18"
-    utils-merge "1.0.1"
-    vary "~1.1.2"
-
-extend-shallow@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
-  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
-  dependencies:
-    is-extendable "^0.1.0"
-
-extend-shallow@^3.0.0, extend-shallow@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
-  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
-  dependencies:
-    assign-symbols "^1.0.0"
-    is-extendable "^1.0.1"
-
-external-editor@^3.0.3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
-  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
-  dependencies:
-    chardet "^0.7.0"
-    iconv-lite "^0.4.24"
-    tmp "^0.0.33"
-
-extglob@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
-  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
-  dependencies:
-    array-unique "^0.3.2"
-    define-property "^1.0.0"
-    expand-brackets "^2.1.4"
-    extend-shallow "^2.0.1"
-    fragment-cache "^0.2.1"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-fast-deep-equal@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
-  integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
-
-fast-deep-equal@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
-  integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
-
-fast-glob@^2.0.2:
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
-  integrity sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==
-  dependencies:
-    "@mrmlnc/readdir-enhanced" "^2.2.1"
-    "@nodelib/fs.stat" "^1.1.2"
-    glob-parent "^3.1.0"
-    is-glob "^4.0.0"
-    merge2 "^1.2.3"
-    micromatch "^3.1.10"
-
-fast-json-stable-stringify@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
-  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
-
-fault@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
-  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
-  dependencies:
-    format "^0.2.0"
-
-faye-websocket@~0.11.1:
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.3.tgz#5c0e9a8968e8912c286639fde977a8b209f2508e"
-  integrity sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==
-  dependencies:
-    websocket-driver ">=0.5.1"
-
-figgy-pudding@^3.5.1:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
-  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
-
-figures@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
-  integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-figures@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
-  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-file-loader@^4.2.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-4.3.0.tgz#780f040f729b3d18019f20605f723e844b8a58af"
-  integrity sha512-aKrYPYjF1yG3oX0kWRrqrSMfgftm7oJW5M+m4owoldH5C51C0RkIwB++JbRvEW3IU6/ZG5n8UvEcdgwOt2UOWA==
-  dependencies:
-    loader-utils "^1.2.3"
-    schema-utils "^2.5.0"
-
-file-system-cache@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-1.0.5.tgz#84259b36a2bbb8d3d6eb1021d3132ffe64cfff4f"
-  integrity sha1-hCWbNqK7uNPW6xAh0xMv/mTP/08=
-  dependencies:
-    bluebird "^3.3.5"
-    fs-extra "^0.30.0"
-    ramda "^0.21.0"
-
-file-uri-to-path@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
-  integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
-
-filesize@3.6.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
-  integrity sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==
-
-fill-range@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
-  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-    to-regex-range "^2.1.0"
-
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
-  dependencies:
-    to-regex-range "^5.0.1"
-
-finalhandler@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
-  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
-  dependencies:
-    debug "2.6.9"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    statuses "~1.5.0"
-    unpipe "~1.0.0"
-
-find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
-  integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^2.0.0"
-    pkg-dir "^3.0.0"
-
-find-cache-dir@^3.0.0, find-cache-dir@^3.2.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
-  integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^3.0.2"
-    pkg-dir "^4.1.0"
-
-find-root@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
-  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
-
-find-up@3.0.0, find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
-  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
-  dependencies:
-    locate-path "^3.0.0"
-
-find-up@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
-  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
-  dependencies:
-    locate-path "^2.0.0"
-
-find-up@^4.0.0, find-up@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
-  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
-  dependencies:
-    locate-path "^5.0.0"
-    path-exists "^4.0.0"
-
-flush-write-stream@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
-  integrity sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==
-  dependencies:
-    inherits "^2.0.3"
-    readable-stream "^2.3.6"
-
-focus-lock@^0.6.6:
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.6.tgz#98119a755a38cfdbeda0280eaa77e307eee850c7"
-  integrity sha512-Dx69IXGCq1qsUExWuG+5wkiMqVM/zGx/reXSJSLogECwp3x6KeNQZ+NAetgxEFpnC41rD8U3+jRCW68+LNzdtw==
-
-for-in@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
-  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
-
-fork-ts-checker-webpack-plugin@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.5.0.tgz#ce1d77190b44d81a761b10b6284a373795e41f0c"
-  integrity sha512-zEhg7Hz+KhZlBhILYpXy+Beu96gwvkROWJiTXOCyOOMMrdBIRPvsBpBqgTI4jfJGrJXcqGwJR8zsBGDmzY0jsA==
-  dependencies:
-    babel-code-frame "^6.22.0"
-    chalk "^2.4.1"
-    chokidar "^2.0.4"
-    micromatch "^3.1.10"
-    minimatch "^3.0.4"
-    semver "^5.6.0"
-    tapable "^1.0.0"
-    worker-rpc "^0.1.0"
-
-format@^0.2.0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
-  integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
-
-forwarded@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
-  integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
-
-fragment-cache@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
-  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
-  dependencies:
-    map-cache "^0.2.2"
-
-fresh@0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
-  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
-
-from2@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
-  integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
-  dependencies:
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-
-fs-extra@^0.30.0:
-  version "0.30.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
-  integrity sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    klaw "^1.0.0"
-    path-is-absolute "^1.0.0"
-    rimraf "^2.2.8"
-
-fs-extra@^8.0.1:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
-  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
-fs-minipass@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
-  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
-  dependencies:
-    minipass "^3.0.0"
-
-fs-write-stream-atomic@^1.0.8:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
-  integrity sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=
-  dependencies:
-    graceful-fs "^4.1.2"
-    iferr "^0.1.5"
-    imurmurhash "^0.1.4"
-    readable-stream "1 || 2"
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
-
-fsevents@^1.2.7:
-  version "1.2.12"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.12.tgz#db7e0d8ec3b0b45724fd4d83d43554a8f1f0de5c"
-  integrity sha512-Ggd/Ktt7E7I8pxZRbGIs7vwqAPscSESMrCSkx2FtWeqmheJgCo2R74fTsZFCifr0VTPwqRpPv17+6b8Zp7th0Q==
-  dependencies:
-    bindings "^1.5.0"
-    nan "^2.12.1"
-
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
-
-function.prototype.name@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.2.tgz#5cdf79d7c05db401591dfde83e3b70c5123e9a45"
-  integrity sha512-C8A+LlHBJjB2AdcRPorc5JvJ5VUoWlXdEHLOJdCI7kjHEtGTpHQUiqMvCIKUwIsGwZX2jZJy761AXsn356bJQg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    functions-have-names "^1.2.0"
-
-functions-have-names@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.1.tgz#a981ac397fa0c9964551402cdc5533d7a4d52f91"
-  integrity sha512-j48B/ZI7VKs3sgeI2cZp7WXWmZXu7Iq5pl5/vptV5N2mq+DGFuS/ulaDjtaoLpYzuD6u8UgrUKHfgo7fDTSiBA==
-
-fuse.js@^3.4.6:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.6.1.tgz#7de85fdd6e1b3377c23ce010892656385fd9b10c"
-  integrity sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==
-
-gauge@~2.7.3:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
-  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
-  dependencies:
-    aproba "^1.0.3"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.0"
-    object-assign "^4.1.0"
-    signal-exit "^3.0.0"
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-    wide-align "^1.1.0"
-
-gensync@^1.0.0-beta.1:
-  version "1.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
-  integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
-
-get-value@^2.0.3, get-value@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
-  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
-
-glob-base@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
-  integrity sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=
-  dependencies:
-    glob-parent "^2.0.0"
-    is-glob "^2.0.0"
-
-glob-parent@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
-  integrity sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=
-  dependencies:
-    is-glob "^2.0.0"
-
-glob-parent@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
-  integrity sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=
-  dependencies:
-    is-glob "^3.1.0"
-    path-dirname "^1.0.0"
-
-glob-to-regexp@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
-  integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
-
-glob@^7.0.0, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-global-modules@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
-  integrity sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
-  dependencies:
-    global-prefix "^3.0.0"
-
-global-prefix@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-3.0.0.tgz#fc85f73064df69f50421f47f883fe5b913ba9b97"
-  integrity sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
-  dependencies:
-    ini "^1.3.5"
-    kind-of "^6.0.2"
-    which "^1.3.1"
-
-global@^4.3.2, global@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
-  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
-  dependencies:
-    min-document "^2.19.0"
-    process "^0.11.10"
-
-globals@^11.1.0:
-  version "11.12.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
-  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
-
-globalthis@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.1.tgz#40116f5d9c071f9e8fb0037654df1ab3a83b7ef9"
-  integrity sha512-mJPRTc/P39NH/iNG4mXa9aIhNymaQikTrnspeCa2ZuJ+mH2QN/rXwtX3XwKrHqWgUQFbNZKtHM105aHzJalElw==
-  dependencies:
-    define-properties "^1.1.3"
-
-globby@8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.2.tgz#5697619ccd95c5275dbb2d6faa42087c1a941d8d"
-  integrity sha512-yTzMmKygLp8RUpG1Ymu2VXPSJQZjNAZPD4ywgYEaG7e4tBJeUQBO8OpXrf1RCNcEs5alsoJYPAMiIHP0cmeC7w==
-  dependencies:
-    array-union "^1.0.1"
-    dir-glob "2.0.0"
-    fast-glob "^2.0.2"
-    glob "^7.1.2"
-    ignore "^3.3.5"
-    pify "^3.0.0"
-    slash "^1.0.0"
-
-good-listener@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
-  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
-  dependencies:
-    delegate "^3.1.2"
-
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
-  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
-
-gud@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
-  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
-
-gzip-size@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
-  integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==
-  dependencies:
-    duplexer "^0.1.1"
-    pify "^4.0.1"
-
-has-ansi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
-  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
-  dependencies:
-    ansi-regex "^2.0.0"
-
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-has-flag@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
-  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
-
-has-symbols@^1.0.0, has-symbols@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
-  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
-
-has-unicode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
-
-has-value@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
-  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
-  dependencies:
-    get-value "^2.0.3"
-    has-values "^0.1.4"
-    isobject "^2.0.0"
-
-has-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
-  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
-  dependencies:
-    get-value "^2.0.6"
-    has-values "^1.0.0"
-    isobject "^3.0.0"
-
-has-values@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
-  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
-
-has-values@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
-  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
-  dependencies:
-    is-number "^3.0.0"
-    kind-of "^4.0.0"
-
-has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
-  dependencies:
-    function-bind "^1.1.1"
-
-hash-base@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
-  integrity sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
-  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
-  dependencies:
-    inherits "^2.0.3"
-    minimalistic-assert "^1.0.1"
-
-hast-util-parse-selector@^2.0.0:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.4.tgz#60c99d0b519e12ab4ed32e58f150ec3f61ed1974"
-  integrity sha512-gW3sxfynIvZApL4L07wryYF4+C9VvH3AUi7LAnVXV4MneGEgwOByXvFo18BgmTWnm7oHAe874jKbIB1YhHSIzA==
-
-hastscript@^5.0.0:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-5.1.2.tgz#bde2c2e56d04c62dd24e8c5df288d050a355fb8a"
-  integrity sha512-WlztFuK+Lrvi3EggsqOkQ52rKbxkXL3RwB6t5lwoa8QLMemoWfBuL43eDrwOamJyR7uKQKdmKYaBH1NZBiIRrQ==
-  dependencies:
-    comma-separated-tokens "^1.0.0"
-    hast-util-parse-selector "^2.0.0"
-    property-information "^5.0.0"
-    space-separated-tokens "^1.0.0"
-
-he@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-
-highlight.js@~9.13.0:
-  version "9.13.1"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
-  integrity sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A==
-
-hmac-drbg@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
-  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
-  dependencies:
-    hash.js "^1.0.3"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.1"
-
-hoist-non-react-statics@^3.3.0:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
-  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
-  dependencies:
-    react-is "^16.7.0"
-
-html-entities@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
-  integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
-
-html-minifier-terser@^5.0.1:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.0.5.tgz#8f12f639789f04faa9f5cf2ff9b9f65607f21f8b"
-  integrity sha512-cBSFFghQh/uHcfSiL42KxxIRMF7A144+3E44xdlctIjxEmkEfCvouxNyFH2wysXk1fCGBPwtcr3hDWlGTfkDew==
-  dependencies:
-    camel-case "^4.1.1"
-    clean-css "^4.2.3"
-    commander "^4.1.1"
-    he "^1.2.0"
-    param-case "^3.0.3"
-    relateurl "^0.2.7"
-    terser "^4.6.3"
-
-html-webpack-plugin@^4.0.0-beta.2:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.4.tgz#90cdfb168094e93e047174d9baca098ec5540636"
-  integrity sha512-BREQzUbFfIQS39KqxkT2L1Ot0tuu1isako1CaCQLrgEQ43zi2ScHAe3SMTnVBWsStnIsGtl8jprDdxwZkNhrwQ==
-  dependencies:
-    "@types/html-minifier-terser" "^5.0.0"
-    "@types/tapable" "^1.0.5"
-    "@types/webpack" "^4.41.8"
-    html-minifier-terser "^5.0.1"
-    loader-utils "^1.2.3"
-    lodash "^4.17.15"
-    pretty-error "^2.1.1"
-    tapable "^1.1.3"
-    util.promisify "1.0.0"
-
-htmlparser2@^3.3.0:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
-  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
-  dependencies:
-    domelementtype "^1.3.1"
-    domhandler "^2.3.0"
-    domutils "^1.5.1"
-    entities "^1.1.1"
-    inherits "^2.0.1"
-    readable-stream "^3.1.1"
-
-http-errors@1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
-  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
-http-errors@~1.7.2:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
-  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.4"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
-"http-parser-js@>=0.4.0 <0.4.11":
-  version "0.4.10"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.10.tgz#92c9c1374c35085f75db359ec56cc257cbb93fa4"
-  integrity sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=
-
-https-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
-  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
-
-iconv-lite@0.4.24, iconv-lite@^0.4.24:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
-  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
-icss-utils@^4.0.0, icss-utils@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
-  integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
-  dependencies:
-    postcss "^7.0.14"
-
-ieee754@^1.1.4:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
-  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
-
-iferr@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
-  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
-
-ignore@^3.3.5:
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
-  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
-
-immer@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
-  integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
-
-import-cwd@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
-  integrity sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=
-  dependencies:
-    import-from "^2.1.0"
-
-import-fresh@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
-  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
-  dependencies:
-    caller-path "^2.0.0"
-    resolve-from "^3.0.0"
-
-import-fresh@^3.1.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
-  integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
-  dependencies:
-    parent-module "^1.0.0"
-    resolve-from "^4.0.0"
-
-import-from@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
-  integrity sha1-M1238qev/VOqpHHUuAId7ja387E=
-  dependencies:
-    resolve-from "^3.0.0"
-
-imurmurhash@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
-  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
-
-indent-string@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
-  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
-
-indexes-of@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
-  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
-
-infer-owner@^1.0.3, infer-owner@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
-  integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-inherits@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
-  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
-
-inherits@2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
-
-ini@^1.3.5:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
-  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
-
-inquirer@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.0.tgz#2303317efc9a4ea7ec2e2df6f86569b734accf42"
-  integrity sha512-scfHejeG/lVZSpvCXpsB4j/wQNPM5JC8kiElOI0OUTwmc1RTpXr4H32/HOlQHcZiYl2z2VElwuCVDRG8vFmbnA==
-  dependencies:
-    ansi-escapes "^3.2.0"
-    chalk "^2.4.2"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^3.0.3"
-    figures "^2.0.0"
-    lodash "^4.17.12"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rxjs "^6.4.0"
-    string-width "^2.1.0"
-    strip-ansi "^5.1.0"
-    through "^2.3.6"
-
-inquirer@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.1.0.tgz#1298a01859883e17c7264b82870ae1034f92dd29"
-  integrity sha512-5fJMWEmikSYu0nv/flMc475MhGbB7TSPd/2IpFV4I4rMklboCH2rQjYY5kKiYGHqUF9gvaambupcJFFG9dvReg==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^3.0.0"
-    cli-cursor "^3.1.0"
-    cli-width "^2.0.0"
-    external-editor "^3.0.3"
-    figures "^3.0.0"
-    lodash "^4.17.15"
-    mute-stream "0.0.8"
-    run-async "^2.4.0"
-    rxjs "^6.5.3"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-    through "^2.3.6"
-
-internal-slot@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.2.tgz#9c2e9fb3cd8e5e4256c6f45fe310067fcfa378a3"
-  integrity sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==
-  dependencies:
-    es-abstract "^1.17.0-next.1"
-    has "^1.0.3"
-    side-channel "^1.0.2"
-
-interpret@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
-  integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
-
-interpret@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.0.0.tgz#b783ffac0b8371503e9ab39561df223286aa5433"
-  integrity sha512-e0/LknJ8wpMMhTiWcjivB+ESwIuvHnBSlBbmP/pSb8CQJldoj1p2qv7xGZ/+BtbTziYRFSz8OsvdbiX45LtYQA==
-
-invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
-ip@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
-  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
-
-ipaddr.js@1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
-  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
-
-is-accessor-descriptor@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
-  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-accessor-descriptor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
-  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
-  dependencies:
-    kind-of "^6.0.0"
-
-is-alphabetical@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
-  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
-
-is-alphanumerical@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
-  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
-  dependencies:
-    is-alphabetical "^1.0.0"
-    is-decimal "^1.0.0"
-
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
-is-arrayish@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
-  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
-
-is-binary-path@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
-  integrity sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=
-  dependencies:
-    binary-extensions "^1.0.0"
-
-is-buffer@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
-  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
-
-is-callable@^1.1.4, is-callable@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
-  integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
-
-is-data-descriptor@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
-  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-data-descriptor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
-  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
-  dependencies:
-    kind-of "^6.0.0"
-
-is-date-object@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
-  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
-
-is-decimal@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
-  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
-
-is-descriptor@^0.1.0:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
-  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
-  dependencies:
-    is-accessor-descriptor "^0.1.6"
-    is-data-descriptor "^0.1.4"
-    kind-of "^5.0.0"
-
-is-descriptor@^1.0.0, is-descriptor@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
-  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
-  dependencies:
-    is-accessor-descriptor "^1.0.0"
-    is-data-descriptor "^1.0.0"
-    kind-of "^6.0.2"
-
-is-directory@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
-  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
-
-is-docker@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.0.0.tgz#2cb0df0e75e2d064fe1864c37cdeacb7b2dcf25b"
-  integrity sha512-pJEdRugimx4fBMra5z2/5iRdZ63OhYV0vr0Dwm5+xtW4D1FvRkB8hamMIhnWfyJeDdyr/aa7BDyNbtG38VxgoQ==
-
-is-extendable@^0.1.0, is-extendable@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
-  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
-
-is-extendable@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
-  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
-  dependencies:
-    is-plain-object "^2.0.4"
-
-is-extglob@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
-  integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=
-
-is-extglob@^2.1.0, is-extglob@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
-
-is-fullwidth-code-point@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
-  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
-  dependencies:
-    number-is-nan "^1.0.0"
-
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
-
-is-fullwidth-code-point@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
-  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
-
-is-function@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
-  integrity sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=
-
-is-glob@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
-  integrity sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=
-  dependencies:
-    is-extglob "^1.0.0"
-
-is-glob@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
-  integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
-  dependencies:
-    is-extglob "^2.1.0"
-
-is-glob@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
-  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
-  dependencies:
-    is-extglob "^2.1.1"
-
-is-hexadecimal@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
-  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
-
-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
-is-number@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
-  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-number@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
-  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
-
-is-plain-object@^2.0.3, is-plain-object@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
-  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
-  dependencies:
-    isobject "^3.0.1"
-
-is-plain-object@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.0.tgz#47bfc5da1b5d50d64110806c199359482e75a928"
-  integrity sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg==
-  dependencies:
-    isobject "^4.0.0"
-
-is-promise@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
-  integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
-
-is-regex@^1.0.4, is-regex@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
-  integrity sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==
-  dependencies:
-    has "^1.0.3"
-
-is-root@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
-  integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
-
-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
-
-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
-is-symbol@^1.0.2, is-symbol@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
-  integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
-  dependencies:
-    has-symbols "^1.0.1"
-
-is-windows@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
-  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
-
-is-wsl@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
-  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
-
-is-wsl@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.1.1.tgz#4a1c152d429df3d441669498e2486d3596ebaf1d"
-  integrity sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==
-
-isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
-
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
-isexe@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
-  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
-
-isobject@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
-  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
-  dependencies:
-    isarray "1.0.0"
-
-isobject@^3.0.0, isobject@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
-  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
-
-isobject@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
-  integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==
-
-iterate-iterator@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/iterate-iterator/-/iterate-iterator-1.0.1.tgz#1693a768c1ddd79c969051459453f082fe82e9f6"
-  integrity sha512-3Q6tudGN05kbkDQDI4CqjaBf4qf85w6W6GnuZDtUVYwKgtC1q8yxYX7CZed7N+tLzQqS6roujWvszf13T+n9aw==
-
-iterate-value@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/iterate-value/-/iterate-value-1.0.2.tgz#935115bd37d006a52046535ebc8d07e9c9337f57"
-  integrity sha512-A6fMAio4D2ot2r/TYzr4yUWrmwNdsN5xL7+HUiyACE4DXm+q8HtPcnFTp+NnW3k4N05tZ7FVYFFb2CR13NxyHQ==
-  dependencies:
-    es-get-iterator "^1.0.2"
-    iterate-iterator "^1.0.1"
-
-jest-worker@^25.1.0:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-25.2.6.tgz#d1292625326794ce187c38f51109faced3846c58"
-  integrity sha512-FJn9XDUSxcOR4cwDzRfL1z56rUofNTFs539FGASpd50RHdb6EVkhxQqktodW2mI49l+W3H+tFJDotCHUQF6dmA==
-  dependencies:
-    merge-stream "^2.0.0"
-    supports-color "^7.0.0"
-
-"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
-  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
-
-js-tokens@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
-  integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
-
-js-yaml@^3.13.1:
-  version "3.13.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
-  integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
-jsesc@^2.5.1:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
-  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
-
-jsesc@~0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
-  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
-
-json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
-  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
-
-json-schema-traverse@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
-  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
-
-json3@^3.3.2:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
-  integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==
-
-json5@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
-  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
-  dependencies:
-    minimist "^1.2.0"
-
-json5@^2.1.1, json5@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.2.tgz#43ef1f0af9835dd624751a6b7fa48874fb2d608e"
-  integrity sha512-MoUOQ4WdiN3yxhm7NEVJSJrieAo5hNSLQ5sj05OTRHPL9HOBy8u4Bu88jsC1jvqAdN+E1bJmsUcZH+1HQxliqQ==
-  dependencies:
-    minimist "^1.2.5"
-
-jsonfile@^2.1.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
-  integrity sha1-NzaitCi4e72gzIO1P6PWM6NcKug=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-jsonfile@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
-  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
-  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
-  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
-  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
-
-kind-of@^6.0.0, kind-of@^6.0.2:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
-  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
-
-klaw@^1.0.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
-  integrity sha1-QIhDO0azsbolnXh4XY6W9zugJDk=
-  optionalDependencies:
-    graceful-fs "^4.1.9"
-
-lazy-universal-dotenv@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lazy-universal-dotenv/-/lazy-universal-dotenv-3.0.1.tgz#a6c8938414bca426ab8c9463940da451a911db38"
-  integrity sha512-prXSYk799h3GY3iOWnC6ZigYzMPjxN2svgjJ9shk7oMadSNX3wXy0B6F32PMJv7qtMnrIbUxoEHzbutvxR2LBQ==
-  dependencies:
-    "@babel/runtime" "^7.5.0"
-    app-root-dir "^1.0.2"
-    core-js "^3.0.4"
-    dotenv "^8.0.0"
-    dotenv-expand "^5.1.0"
-
-leven@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
-  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
-
-levenary@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
-  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
-  dependencies:
-    leven "^3.1.0"
-
-lines-and-columns@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
-  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
-
-loader-runner@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
-  integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
-
-loader-utils@1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
-  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^2.0.0"
-    json5 "^1.0.1"
-
-loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
-  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^1.0.1"
-
-locate-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
-  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
-  dependencies:
-    p-locate "^2.0.0"
-    path-exists "^3.0.0"
-
-locate-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
-  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
-  dependencies:
-    p-locate "^3.0.0"
-    path-exists "^3.0.0"
-
-locate-path@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
-  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
-  dependencies:
-    p-locate "^4.1.0"
-
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
-
-lodash.memoize@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
-  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
-
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
-
-lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.15:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
-  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
-  dependencies:
-    js-tokens "^3.0.0 || ^4.0.0"
-
-lower-case@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
-  integrity sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ==
-  dependencies:
-    tslib "^1.10.0"
-
-lowlight@~1.11.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.11.0.tgz#1304d83005126d4e8b1dc0f07981e9b689ec2efc"
-  integrity sha512-xrGGN6XLL7MbTMdPD6NfWPwY43SNkjf/d0mecSx/CW36fUZTjRHEq0/Cdug3TWKtRXLWi7iMl1eP0olYxj/a4A==
-  dependencies:
-    fault "^1.0.2"
-    highlight.js "~9.13.0"
-
-lru-cache@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
-  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
-  dependencies:
-    yallist "^3.0.2"
-
-make-dir@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
-  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
-  dependencies:
-    pify "^4.0.1"
-    semver "^5.6.0"
-
-make-dir@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.0.2.tgz#04a1acbf22221e1d6ef43559f43e05a90dbb4392"
-  integrity sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==
-  dependencies:
-    semver "^6.0.0"
-
-map-cache@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
-  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
-
-map-or-similar@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
-  integrity sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=
-
-map-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
-  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
-  dependencies:
-    object-visit "^1.0.0"
-
-markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3:
-  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.11.0.tgz#a2e3f2bc781c3402d8bb0f8e0a12a186474623b0"
-  integrity sha512-RH7LCJQ4RFmPqVeZEesKaO1biRzB/k4utoofmTCp3Eiw6D7qfvK8fzZq/2bjEJAtVkfPrM5SMt5APGf2rnaKMg==
-  dependencies:
-    prop-types "^15.6.2"
-    unquote "^1.1.0"
-
-material-colors@^1.2.1:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
-  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
-
-md5.js@^1.3.4:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
-  integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
-
-media-typer@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
-  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
-
-memoize-one@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
-  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
-
-memoizerific@^1.11.3:
-  version "1.11.3"
-  resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
-  integrity sha1-fIekZGREwy11Q4VwkF8tvRsagFo=
-  dependencies:
-    map-or-similar "^1.5.0"
-
-memory-fs@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
-  integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
-  dependencies:
-    errno "^0.1.3"
-    readable-stream "^2.0.1"
-
-memory-fs@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
-  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
-  dependencies:
-    errno "^0.1.3"
-    readable-stream "^2.0.1"
-
-merge-descriptors@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
-  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
-
-merge-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
-  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
-
-merge2@^1.2.3:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.3.0.tgz#5b366ee83b2f1582c48f87e47cf1a9352103ca81"
-  integrity sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==
-
-methods@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
-  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
-
-microevent.ts@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0"
-  integrity sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==
-
-micromatch@^3.1.10, micromatch@^3.1.4:
-  version "3.1.10"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
-  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    braces "^2.3.1"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    extglob "^2.0.4"
-    fragment-cache "^0.2.1"
-    kind-of "^6.0.2"
-    nanomatch "^1.2.9"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.2"
-
-micromatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
-  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
-  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.0.5"
-
-miller-rabin@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
-  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
-  dependencies:
-    bn.js "^4.0.0"
-    brorand "^1.0.1"
-
-mime-db@1.43.0:
-  version "1.43.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
-  integrity sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==
-
-mime-types@~2.1.24:
-  version "2.1.26"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.26.tgz#9c921fc09b7e149a65dfdc0da4d20997200b0a06"
-  integrity sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==
-  dependencies:
-    mime-db "1.43.0"
-
-mime@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
-  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
-
-mime@^2.4.4:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
-  integrity sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==
-
-mimic-fn@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
-  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
-
-mimic-fn@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
-  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
-
-min-document@^2.19.0:
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
-  integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=
-  dependencies:
-    dom-walk "^0.1.0"
-
-minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
-  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
-
-minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
-  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
-
-minimatch@3.0.4, minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-minimist@^1.2.0, minimist@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
-
-minipass-collect@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
-  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-flush@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
-  integrity sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-pipeline@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.2.tgz#3dcb6bb4a546e32969c7ad710f2c79a86abba93a"
-  integrity sha512-3JS5A2DKhD2g0Gg8x3yamO0pj7YeKGwVlDS90pF++kxptwx/F+B//roxf9SqYil5tQo65bijy+dAuAFZmYOouA==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass@^3.0.0, minipass@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.1.tgz#7607ce778472a185ad6d89082aa2070f79cedcd5"
-  integrity sha512-UFqVihv6PQgwj8/yTGvl9kPz7xIAY+R5z6XYjRInD3Gk3qx6QGSD6zEcpeG4Dy/lQnv1J6zv8ejV90hyYIKf3w==
-  dependencies:
-    yallist "^4.0.0"
-
-mississippi@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
-  integrity sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==
-  dependencies:
-    concat-stream "^1.5.0"
-    duplexify "^3.4.2"
-    end-of-stream "^1.1.0"
-    flush-write-stream "^1.0.0"
-    from2 "^2.1.0"
-    parallel-transform "^1.1.0"
-    pump "^3.0.0"
-    pumpify "^1.3.3"
-    stream-each "^1.1.0"
-    through2 "^2.0.0"
-
-mixin-deep@^1.2.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
-  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
-  dependencies:
-    for-in "^1.0.2"
-    is-extendable "^1.0.1"
-
-mkdirp@^0.5.1, mkdirp@^0.5.3:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.4.tgz#fd01504a6797ec5c9be81ff43d204961ed64a512"
-  integrity sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==
-  dependencies:
-    minimist "^1.2.5"
-
-move-concurrently@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
-  integrity sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=
-  dependencies:
-    aproba "^1.1.1"
-    copy-concurrently "^1.0.0"
-    fs-write-stream-atomic "^1.0.8"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.4"
-    run-queue "^1.0.3"
-
-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
-  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
-
-ms@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
-  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
-
-ms@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
-
-mute-stream@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
-  integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
-
-mute-stream@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
-  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
-
-nan@^2.12.1:
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
-  integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
-
-nanomatch@^1.2.9:
-  version "1.2.13"
-  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
-  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    fragment-cache "^0.2.1"
-    is-windows "^1.0.2"
-    kind-of "^6.0.2"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-negotiator@0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
-  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
-
-neo-async@^2.5.0, neo-async@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
-  integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
-
-nice-try@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
-  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
-
-no-case@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.3.tgz#c21b434c1ffe48b39087e86cfb4d2582e9df18f8"
-  integrity sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw==
-  dependencies:
-    lower-case "^2.0.1"
-    tslib "^1.10.0"
-
-node-fetch@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
-  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
-
-node-libs-browser@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
-  integrity sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==
-  dependencies:
-    assert "^1.1.1"
-    browserify-zlib "^0.2.0"
-    buffer "^4.3.0"
-    console-browserify "^1.1.0"
-    constants-browserify "^1.0.0"
-    crypto-browserify "^3.11.0"
-    domain-browser "^1.1.1"
-    events "^3.0.0"
-    https-browserify "^1.0.0"
-    os-browserify "^0.3.0"
-    path-browserify "0.0.1"
-    process "^0.11.10"
-    punycode "^1.2.4"
-    querystring-es3 "^0.2.0"
-    readable-stream "^2.3.3"
-    stream-browserify "^2.0.1"
-    stream-http "^2.7.2"
-    string_decoder "^1.0.0"
-    timers-browserify "^2.0.4"
-    tty-browserify "0.0.0"
-    url "^0.11.0"
-    util "^0.11.0"
-    vm-browserify "^1.0.1"
-
-node-releases@^1.1.29, node-releases@^1.1.53:
-  version "1.1.53"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
-  integrity sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==
-
-normalize-path@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
-  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
-  dependencies:
-    remove-trailing-separator "^1.0.1"
-
-normalize-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
-  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
-
-normalize-range@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
-  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
-
-npmlog@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
-  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
-  dependencies:
-    are-we-there-yet "~1.1.2"
-    console-control-strings "~1.1.0"
-    gauge "~2.7.3"
-    set-blocking "~2.0.0"
-
-nth-check@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
-  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
-  dependencies:
-    boolbase "~1.0.0"
-
-num2fraction@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
-  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
-
-number-is-nan@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
-  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
-
-object-assign@^4.1.0, object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
-object-copy@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
-  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
-  dependencies:
-    copy-descriptor "^0.1.0"
-    define-property "^0.2.5"
-    kind-of "^3.0.3"
-
-object-inspect@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
-  integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
-
-object-is@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.2.tgz#6b80eb84fe451498f65007982f035a5b445edec4"
-  integrity sha512-Epah+btZd5wrrfjkJZq1AOB9O6OxUQto45hzFd7lXGrpHPGE0W1k+426yrZV+k6NJOzLNNW/nVsmZdIWsAqoOQ==
-
-object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
-  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
-
-object-visit@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
-  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
-  dependencies:
-    isobject "^3.0.0"
-
-object.assign@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
-  integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
-  dependencies:
-    define-properties "^1.1.2"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.0"
-    object-keys "^1.0.11"
-
-object.entries@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.1.tgz#ee1cf04153de02bb093fec33683900f57ce5399b"
-  integrity sha512-ilqR7BgdyZetJutmDPfXCDffGa0/Yzl2ivVNpbx/g4UeWrCdRnFDUBrKJGLhGieRHDATnyZXWBeCb29k9CJysQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-
-"object.fromentries@^2.0.0 || ^1.0.0":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.2.tgz#4a09c9b9bb3843dd0f89acdb517a794d4f355ac9"
-  integrity sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-
-object.getownpropertydescriptors@^2.0.3:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
-  integrity sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-object.pick@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
-  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
-  dependencies:
-    isobject "^3.0.1"
-
-object.values@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
-  integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-
-on-finished@~2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
-  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
-  dependencies:
-    ee-first "1.1.1"
-
-once@^1.3.0, once@^1.3.1, once@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
-  dependencies:
-    wrappy "1"
-
-onetime@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
-  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
-  dependencies:
-    mimic-fn "^1.0.0"
-
-onetime@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.0.tgz#fff0f3c91617fe62bb50189636e99ac8a6df7be5"
-  integrity sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==
-  dependencies:
-    mimic-fn "^2.1.0"
-
-open@^6.3.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
-  integrity sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==
-  dependencies:
-    is-wsl "^1.1.0"
-
-open@^7.0.0:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/open/-/open-7.0.3.tgz#db551a1af9c7ab4c7af664139930826138531c48"
-  integrity sha512-sP2ru2v0P290WFfv49Ap8MF6PkzGNnGlAwHweB4WR4mr5d2d0woiCluUeJ218w7/+PmoBy9JmYgD5A4mLcWOFA==
-  dependencies:
-    is-docker "^2.0.0"
-    is-wsl "^2.1.1"
-
-original@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
-  integrity sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==
-  dependencies:
-    url-parse "^1.4.3"
-
-os-browserify@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
-  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
-
-os-tmpdir@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
-  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
-
-p-limit@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
-  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
-  dependencies:
-    p-try "^1.0.0"
-
-p-limit@^2.0.0, p-limit@^2.2.0, p-limit@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.2.tgz#61279b67721f5287aa1c13a9a7fbbc48c9291b1e"
-  integrity sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==
-  dependencies:
-    p-try "^2.0.0"
-
-p-locate@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
-  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
-  dependencies:
-    p-limit "^1.1.0"
-
-p-locate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
-  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
-  dependencies:
-    p-limit "^2.0.0"
-
-p-locate@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
-  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
-  dependencies:
-    p-limit "^2.2.0"
-
-p-map@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-3.0.0.tgz#d704d9af8a2ba684e2600d9a215983d4141a979d"
-  integrity sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==
-  dependencies:
-    aggregate-error "^3.0.0"
-
-p-try@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
-  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
-
-p-try@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
-  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
-
-pako@~1.0.5:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
-  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
-
-parallel-transform@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
-  integrity sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==
-  dependencies:
-    cyclist "^1.0.1"
-    inherits "^2.0.3"
-    readable-stream "^2.1.5"
-
-param-case@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.3.tgz#4be41f8399eff621c56eebb829a5e451d9801238"
-  integrity sha512-VWBVyimc1+QrzappRs7waeN2YmoZFCGXWASRYX1/rGHtXqEcrGEIDm+jqIwFa2fRXNgQEwrxaYuIrX0WcAguTA==
-  dependencies:
-    dot-case "^3.0.3"
-    tslib "^1.10.0"
-
-parent-module@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
-  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
-  dependencies:
-    callsites "^3.0.0"
-
-parse-asn1@^5.0.0:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.5.tgz#003271343da58dc94cace494faef3d2147ecea0e"
-  integrity sha512-jkMYn1dcJqF6d5CpU689bq7w/b5ALS9ROVSpQDPrZsqqesUJii9qutvoT5ltGedNXMO2e16YUWIghG9KxaViTQ==
-  dependencies:
-    asn1.js "^4.0.0"
-    browserify-aes "^1.0.0"
-    create-hash "^1.1.0"
-    evp_bytestokey "^1.0.0"
-    pbkdf2 "^3.0.3"
-    safe-buffer "^5.1.1"
-
-parse-entities@^1.1.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50"
-  integrity sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==
-  dependencies:
-    character-entities "^1.0.0"
-    character-entities-legacy "^1.0.0"
-    character-reference-invalid "^1.0.0"
-    is-alphanumerical "^1.0.0"
-    is-decimal "^1.0.0"
-    is-hexadecimal "^1.0.0"
-
-parse-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
-  dependencies:
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-
-parse-json@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.0.0.tgz#73e5114c986d143efa3712d4ea24db9a4266f60f"
-  integrity sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-    lines-and-columns "^1.1.6"
-
-parseurl@~1.3.2, parseurl@~1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
-  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
-
-pascal-case@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.1.tgz#5ac1975133ed619281e88920973d2cd1f279de5f"
-  integrity sha512-XIeHKqIrsquVTQL2crjq3NfJUxmdLasn3TYOU0VBM+UX2a6ztAWBlJQBePLGY7VHW8+2dRadeIPK5+KImwTxQA==
-  dependencies:
-    no-case "^3.0.3"
-    tslib "^1.10.0"
-
-pascalcase@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
-  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
-
-path-browserify@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
-  integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
-
-path-dirname@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
-  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
-
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
-
-path-exists@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
-  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-path-key@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
-  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
-
-path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
-
-path-to-regexp@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
-
-path-type@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
-  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
-  dependencies:
-    pify "^3.0.0"
-
-path-type@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
-  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
-
-pbkdf2@^3.0.3:
-  version "3.0.17"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
-  integrity sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==
-  dependencies:
-    create-hash "^1.1.2"
-    create-hmac "^1.1.4"
-    ripemd160 "^2.0.1"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
-picomatch@^2.0.5:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
-  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
-
-pify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
-  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
-
-pify@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
-  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
-
-pkg-dir@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
-  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
-  dependencies:
-    find-up "^3.0.0"
-
-pkg-dir@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
-  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
-  dependencies:
-    find-up "^4.0.0"
-
-pkg-up@2.0.0, pkg-up@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
-  integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
-  dependencies:
-    find-up "^2.1.0"
-
-pnp-webpack-plugin@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.5.0.tgz#62a1cd3068f46d564bb33c56eb250e4d586676eb"
-  integrity sha512-jd9olUr9D7do+RN8Wspzhpxhgp1n6Vd0NtQ4SFkmIACZoEL1nkyAdW9Ygrinjec0vgDcWjscFQQ1gDW8rsfKTg==
-  dependencies:
-    ts-pnp "^1.1.2"
-
-polished@^3.3.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-3.5.1.tgz#657b6faf4c2308f3e0b1951196803a5e5d67b122"
-  integrity sha512-GVbvskpBiDV5TknurGL6OyFfLHsCknxbU8w5iMppT8rW0tLEoQHrIRfrPNPqGXNj3HGhkjRvhmg59Fy7HSnCAw==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-
-popper.js@^1.14.4, popper.js@^1.14.7:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
-posix-character-classes@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
-  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
-
-postcss-flexbugs-fixes@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.0.tgz#662b3dcb6354638b9213a55eed8913bcdc8d004a"
-  integrity sha512-QRE0n3hpkxxS/OGvzOa+PDuy4mh/Jg4o9ui22/ko5iGYOG3M5dfJabjnAZjTdh2G9F85c7Hv8hWcEDEKW/xceQ==
-  dependencies:
-    postcss "^7.0.26"
-
-postcss-load-config@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
-  integrity sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==
-  dependencies:
-    cosmiconfig "^5.0.0"
-    import-cwd "^2.0.0"
-
-postcss-loader@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
-  integrity sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==
-  dependencies:
-    loader-utils "^1.1.0"
-    postcss "^7.0.0"
-    postcss-load-config "^2.0.0"
-    schema-utils "^1.0.0"
-
-postcss-modules-extract-imports@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
-  integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
-  dependencies:
-    postcss "^7.0.5"
-
-postcss-modules-local-by-default@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.2.tgz#e8a6561be914aaf3c052876377524ca90dbb7915"
-  integrity sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==
-  dependencies:
-    icss-utils "^4.1.1"
-    postcss "^7.0.16"
-    postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.0.0"
-
-postcss-modules-scope@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz#385cae013cc7743f5a7d7602d1073a89eaae62ee"
-  integrity sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==
-  dependencies:
-    postcss "^7.0.6"
-    postcss-selector-parser "^6.0.0"
-
-postcss-modules-values@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz#5b5000d6ebae29b4255301b4a3a54574423e7f10"
-  integrity sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==
-  dependencies:
-    icss-utils "^4.0.0"
-    postcss "^7.0.6"
-
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
-  integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
-  dependencies:
-    cssesc "^3.0.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz#651ff4593aa9eda8d5d0d66593a2417aeaeb325d"
-  integrity sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==
-
-postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.23, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.27"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.27.tgz#cc67cdc6b0daa375105b7c424a85567345fc54d9"
-  integrity sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
-preact-render-to-string@5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-5.1.4.tgz#f26171f58f0e93b36236e4b0bee62ce561120b7c"
-  integrity sha512-fQyrkbn4Ustz5Gr4nQuTu2TIS+8IHqkIXf/SqstA2amgqLoPI6Z1e6Ttk5OL4jcE3MC6V+eaeRAed39sn8Oh4w==
-  dependencies:
-    pretty-format "^3.8.0"
-
-preact@10.3.4:
-  version "10.3.4"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.3.4.tgz#e1542a4d3eba3e7a37f312a2c331231b97052024"
-  integrity sha512-wMgzs/RGYf0I1PZf8ZFJdyU/3kCcwepJyVYe+N9FGajyQWarMoPrPfrQajcG0psPj6ySYv2cSuLYFCihvV/Qrw==
-
-pretty-error@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
-  integrity sha1-X0+HyPkeWuPzuoerTPXgOxoX8aM=
-  dependencies:
-    renderkid "^2.0.1"
-    utila "~0.4"
-
-pretty-format@^3.8.0:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
-  integrity sha1-v77VbV6ad2ZF9LH/eqGjrE+jw4U=
-
-pretty-hrtime@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
-  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
-
-prismjs@^1.8.4:
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.19.0.tgz#713afbd45c3baca4b321569f2df39e17e729d4dc"
-  integrity sha512-IVFtbW9mCWm9eOIaEkNyo2Vl4NnEifis2GQ7/MLRG5TQe6t+4Sj9J5QWI9i3v+SS43uZBlCAOn+zYTVYQcPXJw==
-  optionalDependencies:
-    clipboard "^2.0.0"
-
-prismjs@~1.17.0:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"
-  integrity sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==
-  optionalDependencies:
-    clipboard "^2.0.0"
-
-private@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
-  integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
-
-process-nextick-args@~2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
-
-process@^0.11.10:
-  version "0.11.10"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
-  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
-
-promise-inflight@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
-  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
-
-promise.allsettled@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/promise.allsettled/-/promise.allsettled-1.0.2.tgz#d66f78fbb600e83e863d893e98b3d4376a9c47c9"
-  integrity sha512-UpcYW5S1RaNKT6pd+s9jp9K9rlQge1UXKskec0j6Mmuq7UJCvlS2J2/s/yuPN8ehftf9HXMxWlKiPbGGUzpoRg==
-  dependencies:
-    array.prototype.map "^1.0.1"
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-    iterate-value "^1.0.0"
-
-promise.prototype.finally@^3.1.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/promise.prototype.finally/-/promise.prototype.finally-3.1.2.tgz#b8af89160c9c673cefe3b4c4435b53cfd0287067"
-  integrity sha512-A2HuJWl2opDH0EafgdjwEw7HysI8ff/n4lW4QEVBCUXFk9QeGecBWv0Deph0UmLe3tTNYegz8MOjsVuE6SMoJA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.0"
-    function-bind "^1.1.1"
-
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
-  version "15.7.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
-  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.8.1"
-
-property-information@^5.0.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.4.0.tgz#16e08f13f4e5c4a7be2e4ec431c01c4f8dba869a"
-  integrity sha512-nmMWAm/3vKFGmmOWOcdLjgq/Hlxa+hsuR/px1Lp/UGEyc5A22A6l78Shc2C0E71sPmAqglni+HrS7L7VJ7AUCA==
-  dependencies:
-    xtend "^4.0.0"
-
-proxy-addr@~2.0.5:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
-  integrity sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==
-  dependencies:
-    forwarded "~0.1.2"
-    ipaddr.js "1.9.1"
-
-prr@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
-  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
-
-public-encrypt@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
-  integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==
-  dependencies:
-    bn.js "^4.1.0"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    parse-asn1 "^5.0.0"
-    randombytes "^2.0.1"
-    safe-buffer "^5.1.2"
-
-pump@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
-  integrity sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-pump@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
-  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-pumpify@^1.3.3:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
-  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
-  dependencies:
-    duplexify "^3.6.0"
-    inherits "^2.0.3"
-    pump "^2.0.0"
-
-punycode@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
-  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
-
-punycode@^1.2.4:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
-  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
-
-punycode@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
-  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
-
-qs@6.7.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
-  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
-
-qs@^6.6.0:
-  version "6.9.3"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.3.tgz#bfadcd296c2d549f1dffa560619132c977f5008e"
-  integrity sha512-EbZYNarm6138UKKq46tdx08Yo/q9ZhFoAXAI1meAFd2GtbRDhbZY2WQSICskT0c5q99aFzLG1D4nvTk9tqfXIw==
-
-querystring-es3@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
-  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
-
-querystring@0.2.0, querystring@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
-  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
-
-querystringify@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
-  integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
-
-ramda@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35"
-  integrity sha1-oAGr7bP/YQd9T/HVd9RN536NCjU=
-
-randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
-  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
-  dependencies:
-    safe-buffer "^5.1.0"
-
-randomfill@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
-  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
-  dependencies:
-    randombytes "^2.0.5"
-    safe-buffer "^5.1.0"
-
-range-parser@^1.2.1, range-parser@~1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
-  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
-
-raw-body@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
-  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
-  dependencies:
-    bytes "3.1.0"
-    http-errors "1.7.2"
-    iconv-lite "0.4.24"
-    unpipe "1.0.0"
-
-raw-loader@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-3.1.0.tgz#5e9d399a5a222cc0de18f42c3bc5e49677532b3f"
-  integrity sha512-lzUVMuJ06HF4rYveaz9Tv0WRlUMxJ0Y1hgSkkgg+50iEdaI0TthyEDe08KIHb0XsF6rn8WYTqPCaGTZg3sX+qA==
-  dependencies:
-    loader-utils "^1.1.0"
-    schema-utils "^2.0.1"
-
-react-clientside-effect@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
-  integrity sha512-nRmoyxeok5PBO6ytPvSjKp9xwXg9xagoTK1mMjwnQxqM9Hd7MNPl+LS1bOSOe+CV2+4fnEquc7H/S8QD3q697A==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-
-react-color@^2.17.0:
-  version "2.18.0"
-  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.18.0.tgz#34956f0bac394f6c3bc01692fd695644cc775ffd"
-  integrity sha512-FyVeU1kQiSokWc8NPz22azl1ezLpJdUyTbWL0LPUpcuuYDrZ/Y1veOk9rRK5B3pMlyDGvTk4f4KJhlkIQNRjEA==
-  dependencies:
-    "@icons/material" "^0.2.4"
-    lodash "^4.17.11"
-    material-colors "^1.2.1"
-    prop-types "^15.5.10"
-    reactcss "^1.2.0"
-    tinycolor2 "^1.4.1"
-
-react-dev-utils@^9.0.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
-  integrity sha512-X2KYF/lIGyGwP/F/oXgGDF24nxDA2KC4b7AFto+eqzc/t838gpSGiaU8trTqHXOohuLxxc5qi1eDzsl9ucPDpg==
-  dependencies:
-    "@babel/code-frame" "7.5.5"
-    address "1.1.2"
-    browserslist "4.7.0"
-    chalk "2.4.2"
-    cross-spawn "6.0.5"
-    detect-port-alt "1.1.6"
-    escape-string-regexp "1.0.5"
-    filesize "3.6.1"
-    find-up "3.0.0"
-    fork-ts-checker-webpack-plugin "1.5.0"
-    global-modules "2.0.0"
-    globby "8.0.2"
-    gzip-size "5.1.1"
-    immer "1.10.0"
-    inquirer "6.5.0"
-    is-root "2.1.0"
-    loader-utils "1.2.3"
-    open "^6.3.0"
-    pkg-up "2.0.0"
-    react-error-overlay "^6.0.3"
-    recursive-readdir "2.2.2"
-    shell-quote "1.7.2"
-    sockjs-client "1.4.0"
-    strip-ansi "5.2.0"
-    text-table "0.2.0"
-
-react-dom@^16.8.3:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
-  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
-
-react-draggable@^4.0.3:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.2.0.tgz#40cc5209082ca7d613104bf6daf31372cc0e1114"
-  integrity sha512-5wFq//gEoeTYprnd4ze8GrFc+Rbnx+9RkOMR3vk4EbWxj02U6L6T3yrlKeiw4X5CtjD2ma2+b3WujghcXNRzkw==
-  dependencies:
-    classnames "^2.2.5"
-    prop-types "^15.6.0"
-
-react-error-overlay@^6.0.3:
-  version "6.0.7"
-  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
-  integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
-
-react-fast-compare@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
-  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
-
-react-focus-lock@^2.1.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.2.1.tgz#1d12887416925dc53481914b7cedd39494a3b24a"
-  integrity sha512-47g0xYcCTZccdzKRGufepY8oZ3W1Qg+2hn6u9SHZ0zUB6uz/4K4xJe7yYFNZ1qT6m+2JDm82F6QgKeBTbjW4PQ==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    focus-lock "^0.6.6"
-    prop-types "^15.6.2"
-    react-clientside-effect "^1.2.2"
-    use-callback-ref "^1.2.1"
-    use-sidecar "^1.0.1"
-
-react-helmet-async@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.4.tgz#079ef10b7fefcaee6240fefd150711e62463cc97"
-  integrity sha512-KTGHE9sz8N7+fCkZ2a3vzXH9eIkiTNhL2NhKR7XzzQl3WsGlCHh76arauJUIiGdfhjeMp7DY7PkASAmYFXeJYg==
-  dependencies:
-    "@babel/runtime" "^7.3.4"
-    invariant "^2.2.4"
-    prop-types "^15.7.2"
-    react-fast-compare "^2.0.4"
-    shallowequal "^1.1.0"
-
-react-hotkeys@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"
-  integrity sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==
-  dependencies:
-    prop-types "^15.6.1"
-
-react-input-autosize@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
-  integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==
-  dependencies:
-    prop-types "^15.5.8"
-
-react-is@^16.7.0, react-is@^16.8.1, react-is@^16.9.0:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
-react-lifecycles-compat@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
-react-popper-tooltip@^2.8.3:
-  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz#3c4bdfd8bc10d1c2b9a162e859bab8958f5b2644"
-  integrity sha512-04A2f24GhyyMicKvg/koIOQ5BzlrRbKiAgP6L+Pdj1MVX3yJ1NeZ8+EidndQsbejFT55oW1b++wg2Z8KlAyhfQ==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    react-popper "^1.3.7"
-
-react-popper@^1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
-  integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    create-react-context "^0.3.0"
-    deep-equal "^1.1.1"
-    popper.js "^1.14.4"
-    prop-types "^15.6.1"
-    typed-styles "^0.0.7"
-    warning "^4.0.2"
-
-react-redux@^7.0.2:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
-  integrity sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    hoist-non-react-statics "^3.3.0"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-is "^16.9.0"
-
-react-select@^3.0.8:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.1.0.tgz#ab098720b2e9fe275047c993f0d0caf5ded17c27"
-  integrity sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@emotion/cache" "^10.0.9"
-    "@emotion/core" "^10.0.9"
-    "@emotion/css" "^10.0.9"
-    memoize-one "^5.0.0"
-    prop-types "^15.6.0"
-    react-input-autosize "^2.2.2"
-    react-transition-group "^4.3.0"
-
-react-sizeme@^2.5.2, react-sizeme@^2.6.7:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.12.tgz#ed207be5476f4a85bf364e92042520499455453e"
-  integrity sha512-tL4sCgfmvapYRZ1FO2VmBmjPVzzqgHA7kI8lSJ6JS6L78jXFNRdOZFpXyK6P1NBZvKPPCZxReNgzZNUajAerZw==
-  dependencies:
-    element-resize-detector "^1.2.1"
-    invariant "^2.2.4"
-    shallowequal "^1.1.0"
-    throttle-debounce "^2.1.0"
-
-react-syntax-highlighter@^11.0.2:
-  version "11.0.2"
-  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz#4e3f376e752b20d2f54e4c55652fd663149e4029"
-  integrity sha512-kqmpM2OH5OodInbEADKARwccwSQWBfZi0970l5Jhp4h39q9Q65C4frNcnd6uHE5pR00W8pOWj9HDRntj2G4Rww==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    highlight.js "~9.13.0"
-    lowlight "~1.11.0"
-    prismjs "^1.8.4"
-    refractor "^2.4.1"
-
-react-textarea-autosize@^7.1.0:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.1.2.tgz#70fdb333ef86bcca72717e25e623e90c336e2cda"
-  integrity sha512-uH3ORCsCa3C6LHxExExhF4jHoXYCQwE5oECmrRsunlspaDAbS4mGKNlWZqjLfInWtFQcf0o1n1jC/NGXFdUBCg==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    prop-types "^15.6.0"
-
-react-transition-group@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
-  integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
-react@^16.8.3:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
-  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-
-reactcss@^1.2.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
-  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
-  dependencies:
-    lodash "^4.0.1"
-
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
-  version "2.3.7"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
-  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
-readable-stream@^3.1.1:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
-readdirp@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
-  integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
-  dependencies:
-    graceful-fs "^4.1.11"
-    micromatch "^3.1.10"
-    readable-stream "^2.0.2"
-
-rechoir@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
-  integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
-  dependencies:
-    resolve "^1.1.6"
-
-recursive-readdir@2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
-  integrity sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==
-  dependencies:
-    minimatch "3.0.4"
-
-redux@^4.0.1:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
-  integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
-  dependencies:
-    loose-envify "^1.4.0"
-    symbol-observable "^1.2.0"
-
-refractor@^2.4.1:
-  version "2.10.1"
-  resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.1.tgz#166c32f114ed16fd96190ad21d5193d3afc7d34e"
-  integrity sha512-Xh9o7hQiQlDbxo5/XkOX6H+x/q8rmlmZKr97Ie1Q8ZM32IRRd3B/UxuA/yXDW79DBSXGWxm2yRTbcTVmAciJRw==
-  dependencies:
-    hastscript "^5.0.0"
-    parse-entities "^1.1.2"
-    prismjs "~1.17.0"
-
-regenerate-unicode-properties@^8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
-  integrity sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==
-  dependencies:
-    regenerate "^1.4.0"
-
-regenerate@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
-  integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
-
-regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
-  version "0.13.5"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
-  integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
-
-regenerator-transform@^0.14.2:
-  version "0.14.4"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.4.tgz#5266857896518d1616a78a0479337a30ea974cc7"
-  integrity sha512-EaJaKPBI9GvKpvUz2mz4fhx7WPgvwRLY9v3hlNHWmAuJHI13T4nwKnNvm5RWJzEdnI5g5UwtOww+S8IdoUC2bw==
-  dependencies:
-    "@babel/runtime" "^7.8.4"
-    private "^0.1.8"
-
-regex-not@^1.0.0, regex-not@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
-  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
-  dependencies:
-    extend-shallow "^3.0.2"
-    safe-regex "^1.1.0"
-
-regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-regexpu-core@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
-  integrity sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==
-  dependencies:
-    regenerate "^1.4.0"
-    regenerate-unicode-properties "^8.2.0"
-    regjsgen "^0.5.1"
-    regjsparser "^0.6.4"
-    unicode-match-property-ecmascript "^1.0.4"
-    unicode-match-property-value-ecmascript "^1.2.0"
-
-regjsgen@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.1.tgz#48f0bf1a5ea205196929c0d9798b42d1ed98443c"
-  integrity sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg==
-
-regjsparser@^0.6.4:
-  version "0.6.4"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.4.tgz#a769f8684308401a66e9b529d2436ff4d0666272"
-  integrity sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==
-  dependencies:
-    jsesc "~0.5.0"
-
-relateurl@^0.2.7:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
-  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
-
-remove-trailing-separator@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
-  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
-
-renderkid@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.3.tgz#380179c2ff5ae1365c522bf2fcfcff01c5b74149"
-  integrity sha512-z8CLQp7EZBPCwCnncgf9C4XAi3WR0dv+uWu/PjIyhhAb5d6IJ/QZqlHFprHeKT+59//V6BNUsLbvN8+2LarxGA==
-  dependencies:
-    css-select "^1.1.0"
-    dom-converter "^0.2"
-    htmlparser2 "^3.3.0"
-    strip-ansi "^3.0.0"
-    utila "^0.4.0"
-
-repeat-element@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
-  integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
-
-repeat-string@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
-  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
-
-requires-port@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
-  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
-
-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
-resolve-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
-  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
-
-resolve-from@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
-  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
-
-resolve-from@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
-  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
-
-resolve-url@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
-  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
-
-resolve@^1.1.6, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.3.2:
-  version "1.15.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.1.tgz#27bdcdeffeaf2d6244b95bb0f9f4b4653451f3e8"
-  integrity sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==
-  dependencies:
-    path-parse "^1.0.6"
-
-restore-cursor@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
-  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
-  dependencies:
-    onetime "^2.0.0"
-    signal-exit "^3.0.2"
-
-restore-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
-  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
-  dependencies:
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
-
-ret@~0.1.10:
-  version "0.1.15"
-  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
-  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
-
-rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.3, rimraf@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  dependencies:
-    glob "^7.1.3"
-
-ripemd160@^2.0.0, ripemd160@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
-  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-
-run-async@^2.2.0, run-async@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.0.tgz#e59054a5b86876cfae07f431d18cbaddc594f1e8"
-  integrity sha512-xJTbh/d7Lm7SBhc1tNvTpeCHaEzoyxPrqNlvSdMfBTYwaY++UJFyXUOxAtsRUXjlqOfj8luNaR9vjCh4KeV+pg==
-  dependencies:
-    is-promise "^2.1.0"
-
-run-queue@^1.0.0, run-queue@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
-  integrity sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=
-  dependencies:
-    aproba "^1.1.1"
-
-rxjs@^6.4.0, rxjs@^6.5.3:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.4.tgz#e0777fe0d184cec7872df147f303572d414e211c"
-  integrity sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==
-  dependencies:
-    tslib "^1.9.0"
-
-safe-buffer@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
-  integrity sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==
-
-safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
-  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-
-safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
-  integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
-
-safe-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
-  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
-  dependencies:
-    ret "~0.1.10"
-
-"safer-buffer@>= 2.1.2 < 3":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
-  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-schema-utils@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
-  integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==
-  dependencies:
-    ajv "^6.1.0"
-    ajv-errors "^1.0.0"
-    ajv-keywords "^3.1.0"
-
-schema-utils@^2.0.1, schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.4:
-  version "2.6.5"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.5.tgz#c758f0a7e624263073d396e29cd40aa101152d8a"
-  integrity sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==
-  dependencies:
-    ajv "^6.12.0"
-    ajv-keywords "^3.4.1"
-
-select@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
-  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
-
-semver@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
-  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
-
-semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
-semver@^6.0.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-
-send@0.17.1:
-  version "0.17.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
-  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
-  dependencies:
-    debug "2.6.9"
-    depd "~1.1.2"
-    destroy "~1.0.4"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "~1.7.2"
-    mime "1.6.0"
-    ms "2.1.1"
-    on-finished "~2.3.0"
-    range-parser "~1.2.1"
-    statuses "~1.5.0"
-
-serialize-javascript@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
-  integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
-
-serve-favicon@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/serve-favicon/-/serve-favicon-2.5.0.tgz#935d240cdfe0f5805307fdfe967d88942a2cbcf0"
-  integrity sha1-k10kDN/g9YBTB/3+ln2IlCosvPA=
-  dependencies:
-    etag "~1.8.1"
-    fresh "0.5.2"
-    ms "2.1.1"
-    parseurl "~1.3.2"
-    safe-buffer "5.1.1"
-
-serve-static@1.14.1:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
-  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
-  dependencies:
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    parseurl "~1.3.3"
-    send "0.17.1"
-
-set-blocking@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
-
-set-value@^2.0.0, set-value@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
-  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-extendable "^0.1.1"
-    is-plain-object "^2.0.3"
-    split-string "^3.0.1"
-
-setimmediate@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
-
-setprototypeof@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
-  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
-
-sha.js@^2.4.0, sha.js@^2.4.8:
-  version "2.4.11"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
-  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-shallow-equal@^1.1.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
-  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
-
-shallowequal@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
-shebang-command@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
-  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
-  dependencies:
-    shebang-regex "^1.0.0"
-
-shebang-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
-  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
-
-shell-quote@1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
-  integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
-
-shelljs@^0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.3.tgz#a7f3319520ebf09ee81275b2368adb286659b097"
-  integrity sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==
-  dependencies:
-    glob "^7.0.0"
-    interpret "^1.0.0"
-    rechoir "^0.6.2"
-
-side-channel@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
-  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
-  dependencies:
-    es-abstract "^1.17.0-next.1"
-    object-inspect "^1.7.0"
-
-signal-exit@^3.0.0, signal-exit@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
-  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
-
-simplebar-react@^1.0.0-alpha.6:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-1.2.3.tgz#bd81fa9827628470e9470d06caef6ece15e1c882"
-  integrity sha512-1EOWJzFC7eqHUp1igD1/tb8GBv5aPQA5ZMvpeDnVkpNJ3jAuvmrL2kir3HuijlxhG7njvw9ssxjjBa89E5DrJg==
-  dependencies:
-    prop-types "^15.6.1"
-    simplebar "^4.2.3"
-
-simplebar@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-4.2.3.tgz#dac40aced299c17928329eab3d5e6e795fafc10c"
-  integrity sha512-9no0pK7/1y+8/oTF3sy/+kx0PjQ3uk4cYwld5F1CJGk2gx+prRyUq8GRfvcVLq5niYWSozZdX73a2wIr1o9l/g==
-  dependencies:
-    can-use-dom "^0.1.0"
-    core-js "^3.0.1"
-    lodash.debounce "^4.0.8"
-    lodash.memoize "^4.1.2"
-    lodash.throttle "^4.1.1"
-    resize-observer-polyfill "^1.5.1"
-
-slash@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
-  integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
-
-snapdragon-node@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
-  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
-  dependencies:
-    define-property "^1.0.0"
-    isobject "^3.0.0"
-    snapdragon-util "^3.0.1"
-
-snapdragon-util@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
-  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
-  dependencies:
-    kind-of "^3.2.0"
-
-snapdragon@^0.8.1:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
-  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
-  dependencies:
-    base "^0.11.1"
-    debug "^2.2.0"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    map-cache "^0.2.2"
-    source-map "^0.5.6"
-    source-map-resolve "^0.5.0"
-    use "^3.1.0"
-
-sockjs-client@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.4.0.tgz#c9f2568e19c8fd8173b4997ea3420e0bb306c7d5"
-  integrity sha512-5zaLyO8/nri5cua0VtOrFXBPK1jbL4+1cebT/mmKA1E1ZXOvJrII75bPu0l0k843G/+iAbhEqzyKr0w/eCCj7g==
-  dependencies:
-    debug "^3.2.5"
-    eventsource "^1.0.7"
-    faye-websocket "~0.11.1"
-    inherits "^2.0.3"
-    json3 "^3.3.2"
-    url-parse "^1.4.3"
-
-source-list-map@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
-  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
-
-source-map-resolve@^0.5.0:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
-  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-    resolve-url "^0.2.1"
-    source-map-url "^0.4.0"
-    urix "^0.1.0"
-
-source-map-support@~0.5.12:
-  version "0.5.16"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
-  integrity sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
-source-map-url@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
-  integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
-
-source-map@0.7.3:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
-  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-
-source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
-  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
-
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-space-separated-tokens@^1.0.0:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
-  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
-
-split-string@^3.0.1, split-string@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
-  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
-  dependencies:
-    extend-shallow "^3.0.0"
-
-sprintf-js@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
-  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
-
-ssri@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
-  integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
-  dependencies:
-    figgy-pudding "^3.5.1"
-
-ssri@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-7.1.0.tgz#92c241bf6de82365b5c7fb4bd76e975522e1294d"
-  integrity sha512-77/WrDZUWocK0mvA5NTRQyveUf+wsrIc6vyrxpS8tVvYBcX215QbafrJR3KtkpskIzoFLqqNuuYQvxaMjXJ/0g==
-  dependencies:
-    figgy-pudding "^3.5.1"
-    minipass "^3.1.1"
-
-stable@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
-  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
-
-static-extend@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
-  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
-  dependencies:
-    define-property "^0.2.5"
-    object-copy "^0.1.0"
-
-"statuses@>= 1.5.0 < 2", statuses@~1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
-  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
-
-store2@^2.7.1:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/store2/-/store2-2.11.0.tgz#307636a239014ef4d8f1c8b47afe903509484fc8"
-  integrity sha512-WeIZ5+c/KzBSutSqOjUCAkk1qTLVBcYUuvrhNx8ndjLZKdZRfP6Vv7AOxlynuL6tVU/6zt6e2CTHwWI5KE+fKg==
-
-stream-browserify@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
-  integrity sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==
-  dependencies:
-    inherits "~2.0.1"
-    readable-stream "^2.0.2"
-
-stream-each@^1.1.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
-  integrity sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==
-  dependencies:
-    end-of-stream "^1.1.0"
-    stream-shift "^1.0.0"
-
-stream-http@^2.7.2:
-  version "2.8.3"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
-  integrity sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==
-  dependencies:
-    builtin-status-codes "^3.0.0"
-    inherits "^2.0.1"
-    readable-stream "^2.3.6"
-    to-arraybuffer "^1.0.0"
-    xtend "^4.0.0"
-
-stream-shift@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
-  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
-
-string-hash@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
-  integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
-
-string-width@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
-  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
-  dependencies:
-    code-point-at "^1.0.0"
-    is-fullwidth-code-point "^1.0.0"
-    strip-ansi "^3.0.0"
-
-"string-width@^1.0.2 || 2", string-width@^2.1.0, string-width@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
-  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
-  dependencies:
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^4.0.0"
-
-string-width@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
-  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
-string-width@^4.0.0, string-width@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
-  integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.0"
-
-"string.prototype.matchall@^4.0.0 || ^3.0.1":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz#48bb510326fb9fdeb6a33ceaa81a6ea04ef7648e"
-  integrity sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0"
-    has-symbols "^1.0.1"
-    internal-slot "^1.0.2"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.2"
-
-string.prototype.padend@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz#dc08f57a8010dc5c153550318f67e13adbb72ac3"
-  integrity sha512-3aIv8Ffdp8EZj8iLwREGpQaUZiPyrWrpzMBHvkiSW/bK/EGve9np07Vwy7IJ5waydpGXzQZu/F8Oze2/IWkBaA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-string.prototype.padstart@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.padstart/-/string.prototype.padstart-3.1.0.tgz#b47c087540d0710be5a49375751a0a627bd4ff90"
-  integrity sha512-envqZvUp2JItI+OeQ5UAh1ihbAV5G/2bixTojvlIa090GGqF+NQRxbWb2nv9fTGrZABv6+pE6jXoAZhhS2k4Hw==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-string.prototype.trimend@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.0.tgz#ee497fd29768646d84be2c9b819e292439614373"
-  integrity sha512-EEJnGqa/xNfIg05SxiPSqRS7S9qwDhYts1TSLR1BQfYUfPe1stofgGKvwERK9+9yf+PpfBMlpBaCHucXGPQfUA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-
-string.prototype.trimleft@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz#4408aa2e5d6ddd0c9a80739b087fbc067c03b3cc"
-  integrity sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-    string.prototype.trimstart "^1.0.0"
-
-string.prototype.trimright@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz#c76f1cef30f21bbad8afeb8db1511496cfb0f2a3"
-  integrity sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-    string.prototype.trimend "^1.0.0"
-
-string.prototype.trimstart@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.0.tgz#afe596a7ce9de905496919406c9734845f01a2f2"
-  integrity sha512-iCP8g01NFYiiBOnwG1Xc3WZLyoo+RuBymwIlWncShXDDJYWN6DbnM3odslBJdgCdRlq94B5s63NWAZlcn2CS4w==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-
-string_decoder@^1.0.0, string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
-strip-ansi@5.2.0, strip-ansi@^5.1.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
-
-strip-ansi@^3.0.0, strip-ansi@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
-  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
-  dependencies:
-    ansi-regex "^2.0.0"
-
-strip-ansi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
-  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
-  dependencies:
-    ansi-regex "^3.0.0"
-
-strip-ansi@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
-  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
-  dependencies:
-    ansi-regex "^5.0.0"
-
-style-loader@^1.0.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.1.3.tgz#9e826e69c683c4d9bf9db924f85e9abb30d5e200"
-  integrity sha512-rlkH7X/22yuwFYK357fMN/BxYOorfnfq0eD7+vqlemSK4wEcejFF1dg4zxP0euBW8NrYx2WZzZ8PPFevr7D+Kw==
-  dependencies:
-    loader-utils "^1.2.3"
-    schema-utils "^2.6.4"
-
-styled-jsx@3.2.5:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.2.5.tgz#0172a3e13a0d6d8bf09167dcaf32cf7102d932ca"
-  integrity sha512-prEahkYwQHomUljJzXzrFnBmQrSMtWOBbXn8QeEkpfFkqMZQGshxzzp4H8ebBIsbVlHF/3+GSXMnmK/fp7qVYQ==
-  dependencies:
-    "@babel/types" "7.8.3"
-    babel-plugin-syntax-jsx "6.18.0"
-    convert-source-map "1.7.0"
-    loader-utils "1.2.3"
-    source-map "0.7.3"
-    string-hash "1.1.3"
-    stylis "3.5.4"
-    stylis-rule-sheet "0.0.10"
-
-stylis-rule-sheet@0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
-  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
-
-stylis@3.5.4:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
-  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
-
-supports-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
-  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
-
-supports-color@^5.3.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
-supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
-  dependencies:
-    has-flag "^3.0.0"
-
-supports-color@^7.0.0, supports-color@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
-  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
-  dependencies:
-    has-flag "^4.0.0"
-
-symbol-observable@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
-  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
-
-symbol.prototype.description@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/symbol.prototype.description/-/symbol.prototype.description-1.0.2.tgz#f325e1e6ad534b3b29c9c3ca73c136c9ce03c5e2"
-  integrity sha512-2CW5SU4/Ki1cYOOHcL2cXK4rxSg5hCU1TwZ7X4euKhV9VnfqKslh7T6/UyKkubA8cq2tOmsOv7m3ZUmQslBRuw==
-  dependencies:
-    es-abstract "^1.17.0-next.1"
-    has-symbols "^1.0.1"
-
-tapable@^1.0.0, tapable@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
-  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
-
-telejson@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/telejson/-/telejson-3.3.0.tgz#6d814f3c0d254d5c4770085aad063e266b56ad03"
-  integrity sha512-er08AylQ+LEbDLp1GRezORZu5wKOHaBczF6oYJtgC3Idv10qZ8A3p6ffT+J5BzDKkV9MqBvu8HAKiIIOp6KJ2w==
-  dependencies:
-    "@types/is-function" "^1.0.0"
-    global "^4.4.0"
-    is-function "^1.0.1"
-    is-regex "^1.0.4"
-    is-symbol "^1.0.3"
-    isobject "^4.0.0"
-    lodash "^4.17.15"
-    memoizerific "^1.11.3"
-
-term-size@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.0.tgz#1f16adedfe9bdc18800e1776821734086fcc6753"
-  integrity sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw==
-
-terser-webpack-plugin@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
-  integrity sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==
-  dependencies:
-    cacache "^12.0.2"
-    find-cache-dir "^2.1.0"
-    is-wsl "^1.1.0"
-    schema-utils "^1.0.0"
-    serialize-javascript "^2.1.2"
-    source-map "^0.6.1"
-    terser "^4.1.2"
-    webpack-sources "^1.4.0"
-    worker-farm "^1.7.0"
-
-terser-webpack-plugin@^2.1.2:
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.5.tgz#5ad971acce5c517440ba873ea4f09687de2f4a81"
-  integrity sha512-WlWksUoq+E4+JlJ+h+U+QUzXpcsMSSNXkDy9lBVkSqDn1w23Gg29L/ary9GeJVYCGiNJJX7LnVc4bwL1N3/g1w==
-  dependencies:
-    cacache "^13.0.1"
-    find-cache-dir "^3.2.0"
-    jest-worker "^25.1.0"
-    p-limit "^2.2.2"
-    schema-utils "^2.6.4"
-    serialize-javascript "^2.1.2"
-    source-map "^0.6.1"
-    terser "^4.4.3"
-    webpack-sources "^1.4.3"
-
-terser@^4.1.2, terser@^4.4.3, terser@^4.6.3:
-  version "4.6.10"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.10.tgz#90f5bd069ff456ddbc9503b18e52f9c493d3b7c2"
-  integrity sha512-qbF/3UOo11Hggsbsqm2hPa6+L4w7bkr+09FNseEe8xrcVD3APGLFqE+Oz1ZKAxjYnFsj80rLOfgAtJ0LNJjtTA==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
-
-text-table@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
-  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
-
-throttle-debounce@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.1.0.tgz#257e648f0a56bd9e54fe0f132c4ab8611df4e1d5"
-  integrity sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg==
-
-through2@^2.0.0:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
-  dependencies:
-    readable-stream "~2.3.6"
-    xtend "~4.0.1"
-
-through@^2.3.6:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
-
-timers-browserify@^2.0.4:
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.11.tgz#800b1f3eee272e5bc53ee465a04d0e804c31211f"
-  integrity sha512-60aV6sgJ5YEbzUdn9c8kYGIqOubPoUdqQCul3SBAsRCZ40s6Y5cMcrW4dt3/k/EsbLVJNl9n6Vz3fTc+k2GeKQ==
-  dependencies:
-    setimmediate "^1.0.4"
-
-tiny-emitter@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
-  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
-
-tinycolor2@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
-  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
-
-tmp@^0.0.33:
-  version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
-  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
-  dependencies:
-    os-tmpdir "~1.0.2"
-
-to-arraybuffer@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
-  integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
-
-to-fast-properties@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
-  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
-
-to-object-path@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
-  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
-  dependencies:
-    kind-of "^3.0.2"
-
-to-regex-range@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
-  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
-  dependencies:
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-
-to-regex-range@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
-  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
-  dependencies:
-    is-number "^7.0.0"
-
-to-regex@^3.0.1, to-regex@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
-  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
-  dependencies:
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    regex-not "^1.0.2"
-    safe-regex "^1.1.0"
-
-toggle-selection@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
-  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
-
-toidentifier@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
-  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
-
-ts-dedent@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.1.1.tgz#68fad040d7dbd53a90f545b450702340e17d18f3"
-  integrity sha512-UGTRZu1evMw4uTPyYF66/KFd22XiU+jMaIuHrkIHQ2GivAXVlLV0v/vHrpOuTRf9BmpNHi/SO7Vd0rLu0y57jg==
-
-ts-pnp@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
-  integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
-
-tslib@^1.10.0, tslib@^1.9.0, tslib@^1.9.3:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
-  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
-
-tty-browserify@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
-  integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
-
-type-fest@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1"
-  integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==
-
-type-fest@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
-  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
-
-type-is@~1.6.17, type-is@~1.6.18:
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
-  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
-  dependencies:
-    media-typer "0.3.0"
-    mime-types "~2.1.24"
-
-typed-styles@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
-  integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
-
-typedarray@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
-  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
-
-unfetch@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.1.0.tgz#6ec2dd0de887e58a4dee83a050ded80ffc4137db"
-  integrity sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==
-
-unicode-canonical-property-names-ecmascript@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
-  integrity sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==
-
-unicode-match-property-ecmascript@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz#8ed2a32569961bce9227d09cd3ffbb8fed5f020c"
-  integrity sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==
-  dependencies:
-    unicode-canonical-property-names-ecmascript "^1.0.4"
-    unicode-property-aliases-ecmascript "^1.0.4"
-
-unicode-match-property-value-ecmascript@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
-  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
-
-unicode-property-aliases-ecmascript@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
-  integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
-
-union-value@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
-  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
-  dependencies:
-    arr-union "^3.1.0"
-    get-value "^2.0.6"
-    is-extendable "^0.1.1"
-    set-value "^2.0.1"
-
-uniq@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
-  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
-
-unique-filename@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
-  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
-  dependencies:
-    unique-slug "^2.0.0"
-
-unique-slug@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.2.tgz#baabce91083fc64e945b0f3ad613e264f7cd4e6c"
-  integrity sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==
-  dependencies:
-    imurmurhash "^0.1.4"
-
-universalify@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
-
-unpipe@1.0.0, unpipe@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
-  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
-
-unquote@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
-  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
-
-unset-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
-  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
-  dependencies:
-    has-value "^0.3.1"
-    isobject "^3.0.0"
-
-upath@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
-  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
-
-uri-js@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
-  integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
-  dependencies:
-    punycode "^2.1.0"
-
-urix@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
-  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
-
-url-loader@^2.0.1:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-2.3.0.tgz#e0e2ef658f003efb8ca41b0f3ffbf76bab88658b"
-  integrity sha512-goSdg8VY+7nPZKUEChZSEtW5gjbS66USIGCeSJ1OVOJ7Yfuh/36YxCwMi5HVEJh6mqUYOoy3NJ0vlOMrWsSHog==
-  dependencies:
-    loader-utils "^1.2.3"
-    mime "^2.4.4"
-    schema-utils "^2.5.0"
-
-url-parse@^1.4.3:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
-  integrity sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==
-  dependencies:
-    querystringify "^2.1.1"
-    requires-port "^1.0.0"
-
-url@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
-  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
-  dependencies:
-    punycode "1.3.2"
-    querystring "0.2.0"
-
-use-callback-ref@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.1.tgz#898759ccb9e14be6c7a860abafa3ffbd826c89bb"
-  integrity sha512-C3nvxh0ZpaOxs9RCnWwAJ+7bJPwQI8LHF71LzbQ3BvzH5XkdtlkMadqElGevg5bYBDFip4sAnD4m06zAKebg1w==
-
-use-sidecar@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.2.tgz#e72f582a75842f7de4ef8becd6235a4720ad8af6"
-  integrity sha512-287RZny6m5KNMTb/Kq9gmjafi7lQL0YHO1lYolU6+tY1h9+Z3uCtkJJ3OSOq3INwYf2hBryCcDh4520AhJibMA==
-  dependencies:
-    detect-node "^2.0.4"
-    tslib "^1.9.3"
-
-use@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
-  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
-
-util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
-
-util.promisify@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
-  integrity sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==
-  dependencies:
-    define-properties "^1.1.2"
-    object.getownpropertydescriptors "^2.0.3"
-
-util@0.10.3:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
-  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
-  dependencies:
-    inherits "2.0.1"
-
-util@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
-  integrity sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==
-  dependencies:
-    inherits "2.0.3"
-
-utila@^0.4.0, utila@~0.4:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
-  integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
-
-utils-merge@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
-  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
-
-uuid@^3.3.2:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
-  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
-
-vary@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
-  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
-
-vm-browserify@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
-  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
-
-warning@^4.0.2, warning@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
-watchpack@^1.6.0:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"
-  integrity sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==
-  dependencies:
-    chokidar "^2.1.8"
-    graceful-fs "^4.1.2"
-    neo-async "^2.5.0"
-
-webpack-dev-middleware@^3.7.0:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
-  integrity sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==
-  dependencies:
-    memory-fs "^0.4.1"
-    mime "^2.4.4"
-    mkdirp "^0.5.1"
-    range-parser "^1.2.1"
-    webpack-log "^2.0.0"
-
-webpack-hot-middleware@^2.25.0:
-  version "2.25.0"
-  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.25.0.tgz#4528a0a63ec37f8f8ef565cf9e534d57d09fe706"
-  integrity sha512-xs5dPOrGPCzuRXNi8F6rwhawWvQQkeli5Ro48PRuQh8pYPCPmNnltP9itiUPT4xI8oW+y0m59lyyeQk54s5VgA==
-  dependencies:
-    ansi-html "0.0.7"
-    html-entities "^1.2.0"
-    querystring "^0.2.0"
-    strip-ansi "^3.0.0"
-
-webpack-log@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
-  integrity sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==
-  dependencies:
-    ansi-colors "^3.0.0"
-    uuid "^3.3.2"
-
-webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
-  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
-  dependencies:
-    source-list-map "^2.0.0"
-    source-map "~0.6.1"
-
-webpack-virtual-modules@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.2.1.tgz#8ab73d4df0fd37ed27bb8d823bc60ea7266c8bf7"
-  integrity sha512-0PWBlxyt4uGDofooIEanWhhyBOHdd+lr7QpYNDLC7/yc5lqJT8zlc04MTIBnKj+c2BlQNNuwE5er/Tg4wowHzA==
-  dependencies:
-    debug "^3.0.0"
-
-webpack@^4.33.0, webpack@^4.38.0:
-  version "4.42.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.42.1.tgz#ae707baf091f5ca3ef9c38b884287cfe8f1983ef"
-  integrity sha512-SGfYMigqEfdGchGhFFJ9KyRpQKnipvEvjc1TwrXEPCM6H5Wywu10ka8o3KGrMzSMxMQKt8aCHUFh5DaQ9UmyRg==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-module-context" "1.9.0"
-    "@webassemblyjs/wasm-edit" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-    acorn "^6.2.1"
-    ajv "^6.10.2"
-    ajv-keywords "^3.4.1"
-    chrome-trace-event "^1.0.2"
-    enhanced-resolve "^4.1.0"
-    eslint-scope "^4.0.3"
-    json-parse-better-errors "^1.0.2"
-    loader-runner "^2.4.0"
-    loader-utils "^1.2.3"
-    memory-fs "^0.4.1"
-    micromatch "^3.1.10"
-    mkdirp "^0.5.3"
-    neo-async "^2.6.1"
-    node-libs-browser "^2.2.1"
-    schema-utils "^1.0.0"
-    tapable "^1.1.3"
-    terser-webpack-plugin "^1.4.3"
-    watchpack "^1.6.0"
-    webpack-sources "^1.4.1"
-
-websocket-driver@>=0.5.1:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.3.tgz#a2d4e0d4f4f116f1e6297eba58b05d430100e9f9"
-  integrity sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==
-  dependencies:
-    http-parser-js ">=0.4.0 <0.4.11"
-    safe-buffer ">=5.1.0"
-    websocket-extensions ">=0.1.1"
-
-websocket-extensions@>=0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
-  integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
-
-which@^1.2.9, which@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
-  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
-  dependencies:
-    isexe "^2.0.0"
-
-wide-align@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
-  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
-  dependencies:
-    string-width "^1.0.2 || 2"
-
-widest-line@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-3.1.0.tgz#8292333bbf66cb45ff0de1603b136b7ae1496eca"
-  integrity sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==
-  dependencies:
-    string-width "^4.0.0"
-
-worker-farm@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
-  integrity sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==
-  dependencies:
-    errno "~0.1.7"
-
-worker-rpc@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/worker-rpc/-/worker-rpc-0.1.1.tgz#cb565bd6d7071a8f16660686051e969ad32f54d5"
-  integrity sha512-P1WjMrUB3qgJNI9jfmpZ/htmBEjFh//6l/5y8SD9hg1Ef5zTTVVoRjTrTEzPrNBQvmhMxkoTsjOXN10GWU7aCg==
-  dependencies:
-    microevent.ts "~0.1.1"
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
-
-xtend@^4.0.0, xtend@~4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
-  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
-
-y18n@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
-  integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
-
-yallist@^3.0.2:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
-  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
-
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
-  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
-
-yaml@^1.7.2:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.8.3.tgz#2f420fca58b68ce3a332d0ca64be1d191dd3f87a"
-  integrity sha512-X/v7VDnK+sxbQ2Imq4Jt2PRUsRsP7UcpSl3Llg6+NRRqWLIvxkMFYtH1FmvwNGYRKKPa+EPA4qDBlI9WVG1UKw==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
diff --git a/build-system/tasks/sweep-experiments/README.md b/build-system/tasks/sweep-experiments/README.md
new file mode 100644
index 0000000000000..c00a2688484ac
--- /dev/null
+++ b/build-system/tasks/sweep-experiments/README.md
@@ -0,0 +1,236 @@
+# Sweep experiments tool
+
+Sweeps experiments by id, or when they were last flipped before a certain cutoff date.
+
+## Command line
+
+By default, removes experiments whose [production launch value](../../global-configs/prod-config.json) was last set to either `1` or `0` over a year ago:
+
+```sh
+amp sweep-experiments
+```
+
+The tool can also sweep a specific experiment by id, regardless of its launch value:
+
+```sh
+amp sweep-experiments --experiment=my-experiment
+```
+
+For all available options, see the [exported flags.](./index.js)
+
+## Generated commmit history
+
+The tool adds new commits to the history, so you should make sure that the tool runs on a clean branch.
+
+### Removal commits
+
+Each experiment has its own removal commit, so that it can be reverted or referenced independently.
+
+Their description includes the experiment's id, its evaluated launch value, and
+previous launch flip history. The most recent flip commit in the history is also referenced on the subject line:
+
+```
+(2019-12-01, aa1bb2c) `my-experiment`: 1
+
+Previous history on prod-config.json:
+
+- aa1bb2c - 2019-12-01T00:00:00-08:00 - Launch my-experiment to 100% of production
+- c3dd4ee - 2019-10-01T00:00:00-08:00 - Launch my-experiment to 100% of canary
+```
+
+These commits remove the following:
+
+1. **Launch bit** entry on `prod-config.json` and `canary-config.json`.
+
+2. **Listing entry** on `experiments-config.js`.
+
+3. **References in source code**, such as `isExperimentOn()`.
+
+References in source code that were removed or replaced **[require additional modification done manually](#followup).**
+
+### Summary commit
+
+A final, empty commit (no file changes) is created, whose description includes a summary report of all changes. This commit can be referenced for a pull request description, or to find files in which to intervene manually.
+
+## <a id="#followup"></a> Manual follow-up changes
+
+Javascript changes on runtime or test code are **not** ready to be submitted, so they require follow-up changes.
+
+Each removal may be different depending on the implementation that referenced the experiment. The following are steps to take on common cases.
+
+### <a id="followup:isExperimentOn"></a> `isExperimentOn()`
+
+Calls to `isExperimentOn()` are replaced their launch % as a boolean literal. This is likely changed on runtime code.
+
+Users of these calls may now be unnecessary, so they should be intervened manually:
+
+#### Assertions
+
+If an assertion like `userAssert` or `devAssert` evaluates on `true`, it should be removed:
+
+```diff
+  doStuffWhenExperimentIsOn() {
+-   userAssert(/* isExperimentOn(win, 'my-experiment') // launched: true */ true);
+    doStuff();
+  }
+```
+
+If an assertion now evalues on `false`, it's likely part of a larger block that
+is now dead code:
+
+```diff
+-  doStuffWhenExperimentIsOff() {
+-    devAssert(/* isExperimentOn(win, 'my-experiment') // launched: false */ false);
+-    doStuff();
+-  }
+```
+
+#### Conditional blocks
+
+Conditions that result on `false` should have their block removed altogether, for example:
+
+```diff
+- if (/* isExperimentOn(win, 'my-experiment') // launched: false */ false) {
+-   doStuff();
+- } else {
+    doStuffOtherwise();
+- }
+```
+
+If the conditions results on `true`, the block should always be executed:
+
+```diff
+- if (/* isExperimentOn(win, 'my-experiment') // launched: true */ true) {
+    doStuff();
+- } else {
+-   doStuffOtherwise();
+- }
+```
+
+Watch for the complete evaluated result:
+
+```diff
+  // Remove entire block when condition evaluates to false
+- if (!(/* isExperimentOn(win, 'my-experiment') // launched: true */ true)) {
+-   return;
+- }
+- if (
+-    someOtherValue &&
+-    (/* isExperimentOn(win, 'my-experiment') // launched: false */ false)
+- ) {
+-   return;
+- }
+
+  // Inverted, so evalues to `true` and its block should always be executed:
+- if (!(/* isExperimentOn(win, 'my-experiment') // launched: false */ false)) {
+    doSomething();
+- }
+
+  // Literal boolean operand is redundant, but other operands remain:
+  if (
+-  (/* isExperimentOn(win, 'my-experiment') // launched: true */ true) &&
+   someOtherValue
+  ) {
+    return;
+  }
+  if (
+-  (/* isExperimentOn(win, 'my-experiment') // launched: false */ false) ||
+   someOtherValue
+  ) {
+    return;
+  }
+```
+
+Experiment flag values may be set early and read later, so look for conditionals with backward references:
+
+```diff
+  constructor() {
+-   this.isMyComponentExperimentOn_ =
+-     /* isExperimentOn(win, 'my-experiment') // launched: true */
+-     true;
+  }
+  layoutCallback() {
+-   if (this.isMyComponentExperimentOn_) {
+      doStuff();
+-   }
+  }
+```
+
+### <a id="followup:toggleExperiment"></a> `toggleExperiment()`
+
+Calls to `toggleExperiment()` most likely occur on tests.
+
+If a toggle flip matches the experiment launch value, the call has already been safely removed. As a result, useless blocks may be left over, so they should be removed:
+
+```diff
+- // Turn on experiment so tests work.
+- beforeEach(() => {});
+-
+- // Turn off experiment to cleanup.
+- afterEach(() => {
+-   /* toggleExperiment(win, 'my-experiment', false) // launched: true */
+-   false;
+- })
+```
+
+Otherwise the the test is likely obsolete and will fail, since it requires a state not possible with the current launch value:
+
+```diff
+- it('should fail if experiment is off', () => {
+-   /* toggleExperiment(win, 'my-experiment', false) // launched: true */
+-   false;
+-   shouldFail();
+- })
+
+  it('returns value', () => {
+    expect(foo()).to.equal('value returned with experiment on');
+-   /* toggleExperiment(win, 'my-experiment', false) // launched: true */
+-   false;
+-   expect(foo()).to.equal('value returned with experiment off');
+  });
+```
+
+### <a id="followup:html"></a> References on HTML files
+
+The summary commit may list HTML files that contain references to an experiment as a string (`"my-experiment"` or `'my-experiment'`).
+
+These should be handled manually:
+
+-   **Turned on via `amp-experiment-opt-in`**
+
+    Experiments may be turned using a `<meta>` tag, so it should be removed:
+
+    ```diff
+    - <meta name="amp-experiments-opt-in" content="my-experiment">
+    ```
+
+    If other experiments are opted-into, only some entries should be removed:
+
+    ```diff
+      <meta
+        name="amp-experiments-opt-in"
+    -   content="some-other-experiment,my-removed-experiment"
+    +   content="some-other-experiment"
+      >
+    ```
+
+-   **Toggled via `<script>` snippet**
+
+    Some HTML files include a `<script>` tag that toggles the experiment. In which case, their execution block should be removed:
+
+    ```diff
+    - <script>
+    -   (self.AMP = self.AMP || []).push(function(AMP) {
+    -     AMP.toggleExperiment('my-experiment', true);
+    -   });
+    - </script>
+    ```
+
+-   **Benign references**
+
+    Some HTML files reference the experiment name if it's homonymous with an unrelated attribute, like when an experiment is named after a new extension. In this case, **there's nothing to remove:**
+
+    ```diff
+    <!-- Experiment is called the same as amp-my-extension: -->
+    <script custom-element="amp-my-extension" ...></script>
+    ```
diff --git a/build-system/tasks/sweep-experiments/index.js b/build-system/tasks/sweep-experiments/index.js
new file mode 100644
index 0000000000000..bae8345743411
--- /dev/null
+++ b/build-system/tasks/sweep-experiments/index.js
@@ -0,0 +1,546 @@
+/**
+ * Copyright 2020 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.
+ */
+const argv = require('minimist')(process.argv.slice(2));
+const globby = require('globby');
+const path = require('path');
+const {
+  getJscodeshiftReport,
+  jscodeshift,
+} = require('../../test-configs/jscodeshift');
+const {cyan, magenta, yellow} = require('../../common/colors');
+const {getOutput} = require('../../common/process');
+const {log} = require('../../common/logging');
+const {readJsonSync, writeFileSync} = require('fs-extra');
+
+const containRuntimeSource = ['3p', 'ads', 'extensions', 'src', 'test'];
+const containExampleHtml = ['examples', 'test'];
+
+const experimentsConfigPath = 'tools/experiments/experiments-config.js';
+const prodConfigPath = 'build-system/global-configs/prod-config.json';
+const canaryConfigPath = 'build-system/global-configs/canary-config.json';
+
+const globalWritablePaths = [
+  experimentsConfigPath,
+  prodConfigPath,
+  canaryConfigPath,
+];
+
+/**
+ * Ignores experiments that cannot be removed automatically.
+ * @param {string} id
+ * @return {boolean}
+ */
+const isSpecialCannotBeRemoved = (id) =>
+  // These are passed through to a third-party, so we can't determine whether
+  // they're still in use by looking at this repo alone.
+  // See https://git.io/JIBeB (amp-subscriptions-google.js)
+  id.startsWith('swg-');
+
+/**
+ * @param {string} cmd
+ * @return {string}
+ */
+function getStdoutThrowOnError(cmd) {
+  const {stderr, stdout} = getOutput(cmd);
+  if (!stdout && stderr) {
+    throw new Error(`${cmd}\n\n${stderr}`);
+  }
+  return stdout && stdout.trim();
+}
+
+/**
+ * @param {string} cmd
+ * @return {Array<string>}
+ */
+function getStdoutLines(cmd) {
+  const stdout = getStdoutThrowOnError(cmd);
+  return !stdout ? [] : stdout.split('\n');
+}
+
+/**
+ * @param {string} str
+ * @return {string}
+ */
+const cmdEscape = (str) => str.replace(/["`]/g, (c) => `\\${c}`);
+
+/**
+ * @param {!Array<string>} glob
+ * @param {string} string
+ * @return {!Array<string>}
+ */
+const filesContainingPattern = (glob, string) =>
+  getStdoutLines(
+    `grep -El "${cmdEscape(string)}" {${globby.sync(glob).join(',')}}`
+  );
+
+/**
+ * @param {string} fromHash
+ * @return {!Array<string>}
+ */
+const getModifiedSourceFiles = (fromHash) =>
+  getStdoutLines(`git diff --name-only ${fromHash}..HEAD | grep .js`).filter(
+    (file) => !globalWritablePaths.includes(file)
+  );
+
+/**
+ * @param {string} id
+ * @param {Array} removedFromConfig
+ * @return {Array<string>} modified files
+ */
+function removeFromExperimentsConfig(id, removedFromConfig) {
+  const {stdout} = jscodeshift([
+    `--no-babel`,
+    `--transform ${__dirname}/jscodeshift/remove-experiment-config.js`,
+    `--experimentId=${id}`,
+    experimentsConfigPath,
+  ]);
+
+  for (const line of stdout.split('\n')) {
+    const reportLine = getJscodeshiftReport(line);
+    if (reportLine) {
+      const [
+        // eslint-disable-next-line no-unused-vars
+        _,
+        report,
+      ] = reportLine;
+      try {
+        const removed = JSON.parse(report);
+        removedFromConfig.push(removed);
+      } catch (_) {}
+    }
+  }
+  return [experimentsConfigPath];
+}
+
+/**
+ * @param {!Object<string, *>} config
+ * @param {string} path
+ * @param {string} id
+ * @return {Array<string>} modified files
+ */
+function removeFromJsonConfig(config, path, id) {
+  delete config[id];
+
+  for (const allowOptInKey of ['allow-doc-opt-in', 'allow-url-opt-in']) {
+    const index = config[allowOptInKey].indexOf(id);
+    if (index > -1) {
+      config[allowOptInKey].splice(index, 1);
+    }
+  }
+
+  writeFileSync(path, JSON.stringify(config, null, 2) + '\n');
+  return [path];
+}
+
+/**
+ * @param {string} id
+ * @param {number} percentage
+ * @return {Array<string>} modified files
+ */
+function removeFromRuntimeSource(id, percentage) {
+  const possiblyModifiedSourceFiles = filesContainingPattern(
+    containRuntimeSource.map((dir) => `${dir}/**/*.js`),
+    id
+  );
+  if (possiblyModifiedSourceFiles.length > 0) {
+    jscodeshift([
+      `--no-babel`,
+      `--transform ${__dirname}/jscodeshift/remove-experiment-runtime.js`,
+      `--isExperimentOnLaunched=${percentage}`,
+      `--isExperimentOnExperiment=${id}`,
+      ...possiblyModifiedSourceFiles,
+    ]);
+  }
+  return possiblyModifiedSourceFiles;
+}
+
+/**
+ * @param {string} id
+ * @param {*} workItem
+ * @param {!Array<string>} modified
+ * @return {Array<string>}
+ */
+function gitCommitSingleExperiment(id, workItem, modified) {
+  const messageParagraphs = [readableRemovalId(id, workItem)];
+  if (workItem.previousHistory.length > 0) {
+    messageParagraphs.push(
+      `Previous history on ${prodConfigPath.split('/').pop()}:`,
+      workItem.previousHistory
+        .map(
+          ({authorDate, hash, subject}) =>
+            `- ${hash} - ${authorDate} - ${subject}`
+        )
+        .join('\n')
+    );
+  }
+  return getStdoutLines(
+    `git add ${modified.join(' ')} && ` +
+      `git commit -m "${cmdEscape(messageParagraphs.join('\n\n'))}"`
+  );
+}
+
+/**
+ * @param {string} id
+ * @param {{percentage: number, previousHistory: Array}} workItem
+ * @return {string}
+ */
+function readableRemovalId(id, {percentage, previousHistory}) {
+  const lastCommit = previousHistory[0];
+  const prefix = lastCommit
+    ? `(${truncateYyyyMmDd(lastCommit.authorDate)}, ${lastCommit.hash})`
+    : 'Remove';
+  return `${prefix} \`${id}\`: ${percentage}`;
+}
+
+/**
+ * @param {number=} daysAgo
+ * @return {!Date} "Rounded up" to the following day at 00:00:00
+ */
+function dateDaysAgo(daysAgo = 365) {
+  const pastDate = new Date();
+  pastDate.setDate(pastDate.getDate() - daysAgo - 1);
+  pastDate.setHours(0);
+  pastDate.setMinutes(0);
+  pastDate.setSeconds(0);
+  return pastDate;
+}
+
+/**
+ * @param {string} formattedDate
+ * @return {string}
+ */
+const truncateYyyyMmDd = (formattedDate) =>
+  formattedDate.substr(0, 'YYYY-MM-DD'.length);
+
+/**
+ * @param {string} cutoffDateFormatted
+ * @param {string} configJsonPath
+ * @param {string} experiment
+ * @param {number} percentage
+ * @return {Array<{hash: string, authorDate: string, subject: string}>}
+ */
+const findConfigBitCommits = (
+  cutoffDateFormatted,
+  configJsonPath,
+  experiment,
+  percentage
+) =>
+  getStdoutLines(
+    [
+      'git log',
+      `--until=${cutoffDateFormatted}`,
+      // Look for entries that contain exact percentage string, like:
+      // "my-launched-experiment": 1
+      `-S '"${experiment}": ${percentage},'`,
+      // %h: hash
+      // %aI: authorDate
+      // %s: subject
+      ' --format="%h %aI %s"',
+      configJsonPath,
+    ].join(' ')
+  ).map((line) => {
+    const tokens = line.split(' ');
+    // PR numbers in subject lines create spammy references when committed,
+    // remove them early on.
+    if (/^\(#[0-9]+\)$/.test(tokens[tokens.length - 1])) {
+      tokens.pop();
+    }
+    return {
+      hash: /** @type {string} */ (tokens.shift()),
+      authorDate: /** @type {string} */ (tokens.shift()),
+      subject: tokens.join(' '),
+    };
+  });
+
+const issueUrlToNumberRe = new RegExp(
+  [
+    '^https://github.com/ampproject/amphtml/issues/(\\d+)',
+    '^https://github.com/ampproject/amphtml/pull/(\\d+)',
+    '^https://go.amp.dev/issue/(\\d+)',
+    '^https://go.amp.dev/pr/(\\d+)',
+    '^#?(\\d+)$',
+  ].join('|')
+);
+
+/**
+ * @param {string} url
+ * @return {string}
+ */
+function issueUrlToNumberOrUrl(url) {
+  const match = url.match(issueUrlToNumberRe);
+  const number = match && match.find((group) => /^\d+$/.test(group));
+  return number ? `#${number}` : url;
+}
+
+/**
+ * @param {string[]} list
+ * @return {string}
+ */
+const checklistMarkdown = (list) =>
+  list.map((item) => `- [ ] ${item}`).join('\n');
+
+/**
+ * @return {string}
+ */
+const readmeMdGithubLink = () =>
+  `https://github.com/ampproject/amphtml/blob/main/${path.relative(
+    process.cwd(),
+    __dirname
+  )}/README.md`;
+
+/**
+ * @param {{
+ *   removed: string[],
+ *   cleanupIssues: Array<Object>,
+ *   cutoffDateFormatted: string,
+ *   modifiedSourceFiles: Array<string>,
+ *   htmlFilesWithReferences: Array<string>,
+ * }} vars
+ * @return {string}
+ */
+function summaryCommitMessage({
+  cleanupIssues,
+  cutoffDateFormatted,
+  htmlFilesWithReferences,
+  modifiedSourceFiles,
+  removed,
+}) {
+  const paragraphs = [
+    `🚮 Sweep experiments older than ${cutoffDateFormatted}`,
+    `Sweep experiments last flipped globally up to ${cutoffDateFormatted}:`,
+    removed.join('\n'),
+  ];
+
+  if (cleanupIssues.length > 0) {
+    paragraphs.push(
+      '---',
+      '### Cleanup issues',
+      "Close these once they've been addressed and this PR has been merged:",
+      checklistMarkdown(
+        cleanupIssues.map(
+          ({cleanupIssue, id}) =>
+            `\`${id}\`: ${issueUrlToNumberOrUrl(cleanupIssue)}`
+        )
+      )
+    );
+  }
+
+  if (modifiedSourceFiles.length > 0) {
+    paragraphs.push(
+      '---',
+      '### ⚠️ Javascript source files require intervention',
+      'The following may contain errors and/or require intervention to remove superfluous conditionals:',
+      checklistMarkdown(modifiedSourceFiles.map((file) => `\`${file}\``)),
+      `Refer to the removal guide for [suggestions on handling these modified Javascript files.](${readmeMdGithubLink()}#followup)`
+    );
+  }
+
+  if (htmlFilesWithReferences.length > 0) {
+    paragraphs.push(
+      '---',
+      '### ⚠️ HTML files may still contain references',
+      'The following HTML files contain references to experiment names which may be stale and should be manually removed:',
+      checklistMarkdown(htmlFilesWithReferences.map((file) => `\`${file}\``)),
+      `Refer to the removal guide for [suggestions on handling these HTML files.](${readmeMdGithubLink()}#followup:html)`
+    );
+  }
+
+  return paragraphs.join('\n\n');
+}
+
+/**
+ * @param {!Object<string, *>} prodConfig
+ * @param {!Object<string, *>} canaryConfig
+ * @param {string} cutoffDateFormatted
+ * @param {string=} removeExperiment
+ * @return {{
+ *   include?: Object<string, {percentage: number, previousHistory: Array}>,
+ *   exclude?: Object<string, {percentage: number, previousHistory: Array}>
+ * }}
+ */
+function collectWork(
+  prodConfig,
+  canaryConfig,
+  cutoffDateFormatted,
+  removeExperiment
+) {
+  if (removeExperiment) {
+    // 0 if not on prodConfig
+    const percentage = prodConfig[removeExperiment]
+      ? Number(prodConfig[removeExperiment])
+      : 0;
+    const previousHistory = findConfigBitCommits(
+      cutoffDateFormatted,
+      prodConfigPath,
+      removeExperiment,
+      percentage
+    );
+    /** @type {Object<string, {percentage: number, previousHistory: Array}>} */
+    const entries = {[removeExperiment]: {percentage, previousHistory}};
+    return isSpecialCannotBeRemoved(removeExperiment)
+      ? {exclude: entries}
+      : {include: entries};
+  }
+
+  /** @type {Object<string, {percentage: number, previousHistory: Array}>} */
+  const include = {};
+  /** @type {Object<string, {percentage: number, previousHistory: Array}>} */
+  const exclude = {};
+  for (const [experiment, percentage] of Object.entries(prodConfig)) {
+    if (
+      typeof percentage === 'number' &&
+      percentage === canaryConfig[experiment] &&
+      experiment !== 'canary' &&
+      (percentage >= 1 || percentage <= 0)
+    ) {
+      const previousHistory = findConfigBitCommits(
+        cutoffDateFormatted,
+        prodConfigPath,
+        experiment,
+        percentage
+      );
+      if (previousHistory.length > 0) {
+        const entries = isSpecialCannotBeRemoved(experiment)
+          ? exclude
+          : include;
+        entries[experiment] = {percentage, previousHistory};
+      }
+    }
+  }
+  return {include, exclude};
+}
+
+/**
+ * Entry point to amp sweep-experiments.
+ * See README.md for usage.
+ */
+async function sweepExperiments() {
+  const headHash = getStdoutThrowOnError('git log -1 --format=%h');
+
+  const prodConfig = readJsonSync(prodConfigPath);
+  const canaryConfig = readJsonSync(canaryConfigPath);
+
+  const cutoffDateFormatted = dateDaysAgo(
+    argv.experiment ? 0 : argv.days_ago || 365
+  ).toISOString();
+
+  const {exclude, include = {}} = collectWork(
+    prodConfig,
+    canaryConfig,
+    cutoffDateFormatted,
+    argv.experiment
+  );
+
+  if (exclude && Object.keys(exclude).length > 0) {
+    log(yellow('The following experiments are excluded as they are special:'));
+    for (const experiment in exclude) {
+      log(readableRemovalId(experiment, exclude[experiment]));
+    }
+  }
+
+  const total = include ? Object.keys(include).length : 0;
+  if (total === 0) {
+    log(cyan('No experiments to remove.'));
+    log(`Cutoff at ${cutoffDateFormatted}`);
+    return;
+  }
+
+  log(cyan('Removing references to the following experiments:'));
+  for (const experiment in include) {
+    log(readableRemovalId(experiment, include[experiment]));
+  }
+
+  if (argv.dry_run) {
+    log('❗️ (Not making changes due to --dry_run)');
+    return;
+  }
+
+  const removed = [];
+
+  const removedFromConfig = [];
+
+  Object.entries(include).forEach(([id, workItem], i) => {
+    log(`🚮 ${i + 1}/${total}`, magenta(`${id}...`));
+
+    const modified = [
+      ...removeFromExperimentsConfig(id, removedFromConfig),
+      ...removeFromJsonConfig(prodConfig, prodConfigPath, id),
+      ...removeFromJsonConfig(canaryConfig, canaryConfigPath, id),
+      ...removeFromRuntimeSource(id, workItem.percentage),
+    ];
+
+    getStdoutThrowOnError(
+      `./node_modules/prettier/bin-prettier.js --write ${modified.join(' ')}`
+    );
+
+    for (const line of gitCommitSingleExperiment(id, workItem, modified)) {
+      log(line);
+    }
+
+    log();
+
+    removed.push(`- ${readableRemovalId(id, workItem)}`);
+  });
+
+  if (removed.length > 0) {
+    const cleanupIssues = removedFromConfig.filter(
+      ({cleanupIssue}) => !!cleanupIssue
+    );
+
+    const modifiedSourceFiles = getModifiedSourceFiles(headHash);
+
+    const htmlFilesWithReferences = filesContainingPattern(
+      containExampleHtml.map((dir) => `${dir}/**/*.html`),
+      `['"](${Object.keys(include).join('|')})['"]`
+    );
+
+    log(
+      getStdoutThrowOnError(
+        `git commit --allow-empty -m "${cmdEscape(
+          summaryCommitMessage({
+            removed,
+            cleanupIssues,
+            modifiedSourceFiles,
+            htmlFilesWithReferences,
+            cutoffDateFormatted: truncateYyyyMmDd(cutoffDateFormatted),
+          })
+        )}"`
+      ),
+      '\n\n',
+      getStdoutThrowOnError('git log -1 --format=%b'),
+      `\n\n`
+    );
+
+    const reportHash = getStdoutThrowOnError('git log -1 --format=%h');
+    log(cyan('You may recover the above report at any point:'));
+    log(`git log ${reportHash}`);
+  }
+}
+
+module.exports = {
+  sweepExperiments,
+};
+
+sweepExperiments.description =
+  'Sweep experiments whose configuration is too old, or specified with --experiment.';
+
+sweepExperiments.flags = {
+  'days_ago':
+    'How old experiment configuration flips must be for an experiment to be removed. Default is 365 days. This is ignored when using --experiment.',
+  'dry_run':
+    "Don't write, but only list the experiments that would be removed by this command.",
+  'experiment': 'Remove a specific experiment id.',
+};
diff --git a/build-system/tasks/sweep-experiments/jscodeshift/remove-experiment-config.js b/build-system/tasks/sweep-experiments/jscodeshift/remove-experiment-config.js
new file mode 100644
index 0000000000000..174f3e8ca337b
--- /dev/null
+++ b/build-system/tasks/sweep-experiments/jscodeshift/remove-experiment-config.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * Removes an entry from files like tools/experiments/experiments-config.js,
+ * whose id property is specified by --experimentId:
+ *
+ *    [
+ *      {
+ *        ...
+ *      },
+ *   -  {
+ *   -    id: 'foo',
+ *   -    name: 'Foo.',
+ *   -    spec: '...',
+ *   -  },
+ *      {
+ *        ...
+ *      }
+ *    ]
+ *
+ * @param {*} file
+ * @param {*} api
+ * @param {*} options
+ * @return {*}
+ */
+module.exports = function (file, api, options) {
+  const j = api.jscodeshift;
+
+  const {experimentId} = options;
+
+  return j(file.source)
+    .find(j.ObjectExpression, (node) =>
+      node.properties.some(
+        ({key, value}) => key.name === 'id' && value.value === experimentId
+      )
+    )
+    .forEach((path) => {
+      const serializable = {};
+      path.value.properties.forEach(({key, value}) => {
+        // Only keep literal properties.
+        if ('name' in key && 'value' in value) {
+          serializable[key.name] = value.value;
+        }
+      });
+      api.report(JSON.stringify(serializable));
+    })
+    .remove()
+    .toSource();
+};
diff --git a/build-system/tasks/sweep-experiments/jscodeshift/remove-experiment-runtime.js b/build-system/tasks/sweep-experiments/jscodeshift/remove-experiment-runtime.js
new file mode 100644
index 0000000000000..21d757c646827
--- /dev/null
+++ b/build-system/tasks/sweep-experiments/jscodeshift/remove-experiment-runtime.js
@@ -0,0 +1,120 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * Replaces isExperimentOn() and toggleExperiment() calls when they match a name
+ * specified by --isExperimentOnExperiment
+ *
+ * - isExperimentOn() is replaced with boolean (--isExperimentOnLaunched):
+ *     isExperimentOn(win, 'foo') -> true
+ *
+ * - toggleExperiment() is replaced with either:
+ *
+ *     a. its toggle value in third argument:
+ *          toggleExperiment(win, 'foo', false) -> false
+ *
+ *     b. or the negation of --isExperimentOnLaunched when lacking third argument:
+ *          toggleExperiment(win, 'foo') -> !true
+ *
+ * Resulting unused imports of these functions are also removed.
+ *
+ * @param {*} file
+ * @param {*} api
+ * @param {*} options
+ * @return {*}
+ */
+module.exports = function (file, api, options) {
+  const j = api.jscodeshift;
+
+  const missingOptions = [
+    'isExperimentOnExperiment',
+    'isExperimentOnLaunched',
+  ].filter((option) => options[option] == null);
+
+  if (missingOptions.length > 0) {
+    throw new Error(
+      `Missing options for ${options.transform}\n` +
+        JSON.stringify(missingOptions)
+    );
+  }
+
+  const {isExperimentOnExperiment, isExperimentOnLaunched} = options;
+
+  const root = j(file.source);
+
+  return root
+    .find(
+      j.CallExpression,
+      (node) =>
+        node.callee.type === 'Identifier' &&
+        (node.callee.name === 'isExperimentOn' ||
+          node.callee.name === 'toggleExperiment') &&
+        node.arguments[1] &&
+        node.arguments[1].value === isExperimentOnExperiment
+    )
+    .forEach((path) => {
+      const {name} = path.node.callee;
+
+      // remove unused imports
+      root
+        .find(j.ImportDeclaration, ({specifiers}) =>
+          specifiers.some(({imported}) => imported && imported.name === name)
+        )
+        .forEach((path) => {
+          if (root.find(j.CallExpression, {callee: {name}}).size() > 1) {
+            return;
+          }
+          if (path.node.specifiers.length === 1) {
+            path.prune();
+          } else {
+            path.node.specifiers = path.node.specifiers.filter(
+              ({imported}) => !(imported && imported.name === name)
+            );
+          }
+        });
+
+      // toggle flips that match the launch value can be simply removed.
+      if (
+        name === 'toggleExperiment' &&
+        path.node.arguments[2] &&
+        path.node.arguments[2].value == isExperimentOnLaunched
+      ) {
+        path.prune();
+        return;
+      }
+
+      // otherwise replace call result with an annotated constant boolean:
+      const isExperimentOnLaunchedLiteral = j.booleanLiteral(
+        !!isExperimentOnLaunched
+      );
+      const replacement =
+        name === 'isExperimentOn'
+          ? isExperimentOnLaunchedLiteral
+          : // from toggleExperiment (no-op)
+            path.node.arguments[2] ||
+            // if lacking argument, toggle launch value as affordance:
+            j.unaryExpression('!', isExperimentOnLaunchedLiteral);
+      replacement.comments = [
+        j.commentBlock(
+          ` ${j(path).toSource()} // launched: ${!!isExperimentOnLaunched} `,
+          /* leading */ true,
+          /* trailing */ false
+        ),
+      ];
+      path.replace(replacement);
+    })
+    .toSource();
+};
diff --git a/build-system/tasks/test-report-upload.js b/build-system/tasks/test-report-upload.js
new file mode 100644
index 0000000000000..0e1efeb4e7d2a
--- /dev/null
+++ b/build-system/tasks/test-report-upload.js
@@ -0,0 +1,142 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * @fileoverview This file implements the `amp test-report-upload` task, which POSTs test result reports
+ * to an API endpoint that stores them in the database.
+ */
+
+'use strict';
+
+const fetch = require('node-fetch');
+const fs = require('fs').promises;
+const path = require('path');
+const {
+  ciBuildId,
+  ciBuildUrl,
+  ciCommitSha,
+  ciJobId,
+  ciJobUrl,
+  ciRepoSlug,
+} = require('../common/ci');
+const {log} = require('../common/logging');
+
+const {cyan, green, red, yellow} = require('../common/colors');
+
+const REPORTING_API_URL = 'https://amp-test-cases.appspot.com/report';
+
+/**
+ * Parses a test report file and adds build & job info to it.
+ * @param {('unit' | 'integration' | 'e2e')} testType The type of the tests whose result we want to report.
+ * @return {Promise<Object.<string,Object>|null>} Object containing the build, job, and test results.
+ */
+async function getReport(testType) {
+  try {
+    const report = JSON.parse(
+      await fs.readFile(`result-reports/${testType}.json`, 'utf-8')
+    );
+
+    return addJobAndBuildInfo(testType, report);
+  } catch (e) {
+    log(red('ERROR:'), 'Error getting test result report.\n', e.toString());
+
+    return null;
+  }
+}
+
+/**
+ * Adds job and build info to a report.
+ * @param {('unit' | 'integration' | 'e2e')} testType The type of the tests whose result we want to report.
+ * @param {Object} reportJson The Json report generated by Karma.
+ * @return {Object.<string,Object>} Object containing the build, job, and test results.
+ */
+function addJobAndBuildInfo(testType, reportJson) {
+  const buildId = ciBuildId();
+  const commitSha = ciCommitSha();
+  const jobId = ciJobId();
+
+  if (!buildId || !commitSha || !jobId) {
+    throw new ReferenceError('CI fields are not defined.');
+  }
+
+  // (TODO ampproject/amp-github-apps/pull:1194) Update field names in database.
+  return {
+    repository: ciRepoSlug(),
+    results: reportJson,
+    build: {
+      buildId,
+      commitSha,
+      url: ciBuildUrl(),
+    },
+    job: {
+      jobId,
+      testSuiteType: testType,
+      url: ciJobUrl(),
+    },
+  };
+}
+
+/**
+ * Sends a single report to the API endpoint for storage.
+ * @param {('unit' | 'integration' | 'e2e')} testType The type of the tests whose result we want to report.
+ */
+async function sendCiKarmaReport(testType) {
+  const body = await getReport(testType);
+
+  if (!body) {
+    return;
+  }
+
+  const response = await fetch(REPORTING_API_URL, {
+    method: 'post',
+    body: JSON.stringify(body),
+    headers: {'Content-Type': 'application/json'},
+  });
+
+  if (response.ok) {
+    log(
+      green('INFO:'),
+      `Test results of type`,
+      cyan(testType),
+      'reported to',
+      cyan(REPORTING_API_URL)
+    );
+  } else {
+    log(
+      yellow('WARNING:'),
+      'failed to report results of type',
+      cyan(testType),
+      ': \n',
+      yellow(/** @type {string} */ (await response.text()))
+    );
+  }
+}
+
+/**
+ * Uploads every report to the API endpoint for storage.
+ */
+async function testReportUpload() {
+  const filenames = await fs.readdir('result-reports/');
+  const testTypes = filenames.map((filename) => path.parse(filename).name);
+
+  await Promise.all(testTypes.map(sendCiKarmaReport));
+}
+
+module.exports = {
+  testReportUpload,
+};
+
+testReportUpload.description = 'Sends test results to test result database';
diff --git a/build-system/tasks/todos.js b/build-system/tasks/todos.js
deleted file mode 100644
index be590d3505ee3..0000000000000
--- a/build-system/tasks/todos.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * Copyright 2017 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 colors = require('ansi-colors');
-const gulp = require('gulp');
-const log = require('fancy-log');
-const srcGlobs = require('../test-configs/config').presubmitGlobs;
-const through2 = require('through2');
-const util = require('util');
-
-const request = util.promisify(require('request'));
-
-const {GITHUB_ACCESS_TOKEN} = process.env;
-
-/** @type {!Object<string, !Promise<number>>} */
-const issueCache = Object.create(null);
-
-/**
- * Test if a file's contents contains closed TODOs.
- *
- * @param {!File} file file is a vinyl file object
- * @return {Promise<number>} Number of found closed TODOs.
- */
-function findClosedTodosInFile(file) {
-  const contents = file.contents.toString();
-  const todos = contents.match(/TODO\([^\)]*\)/g);
-  if (!todos || todos.length == 0) {
-    return Promise.resolve(0);
-  }
-
-  const promises = [];
-  for (let i = 0; i < todos.length; i++) {
-    const todo = todos[i];
-    const parts = /TODO\([^\)]*\#(\d*)\)/.exec(todo);
-    const issueId = parts ? parts[1] : null;
-    if (!issueId) {
-      continue;
-    }
-    promises.push(reportClosedIssue(file, issueId, todo));
-  }
-
-  if (promises.length == 0) {
-    return Promise.resolve(0);
-  }
-  return Promise.all(promises)
-    .then((results) => {
-      return results.reduce(function (acc, v) {
-        return acc + v;
-      }, 0);
-    })
-    .catch(function (error) {
-      log(colors.red('Failed in', file.path, error, error.stack));
-      return 0;
-    });
-}
-
-/**
- * @param {!File} file file is a vinyl file object
- * @param {string} issueId
- * @param {string} todo
- * @return {!Promise<number>}
- */
-function reportClosedIssue(file, issueId, todo) {
-  if (issueCache[issueId] !== undefined) {
-    return issueCache[issueId];
-  }
-  return (issueCache[issueId] = githubRequest('/issues/' + issueId).then(
-    (response) => {
-      const issue = JSON.parse(response.body);
-      const value = issue.state == 'closed' ? 1 : 0;
-      if (value) {
-        log(colors.red(todo, 'in', file.path));
-      }
-      return value;
-    }
-  ));
-}
-
-/**
- * @param {string} path
- * @param {string=} opt_method
- * @param {*} opt_data
- * @return {!Promise<*>}
- */
-function githubRequest(path, opt_method, opt_data) {
-  const options = {
-    url: 'https://api.github.com/repos/ampproject/amphtml' + path,
-    headers: {
-      'User-Agent': 'amp-changelog-gulp-task',
-      'Accept': 'application/vnd.github.v3+json',
-    },
-    qs: {
-      'access_token': GITHUB_ACCESS_TOKEN,
-    },
-  };
-  if (opt_method) {
-    options.method = opt_method;
-  }
-  if (opt_data) {
-    options.json = true;
-    options.body = opt_data;
-  }
-  return request(options);
-}
-
-/**
- * todos:find-closed task.
- * @return {!Promise}
- */
-function todosFindClosed() {
-  let foundCount = 0;
-  return gulp
-    .src(srcGlobs)
-    .pipe(
-      through2.obj(function (file, enc, cb) {
-        findClosedTodosInFile(file).then(function (count) {
-          foundCount += count;
-          cb();
-        });
-      })
-    )
-    .on('end', function () {
-      if (foundCount > 0) {
-        log(colors.red('Found closed TODOs: ', foundCount));
-        process.exit(1);
-      }
-    });
-}
-
-module.exports = {
-  todosFindClosed,
-};
-
-todosFindClosed.description = 'Find closed TODOs';
diff --git a/build-system/tasks/unit.js b/build-system/tasks/unit.js
index 37b7b907ce783..a583c0bbe274a 100644
--- a/build-system/tasks/unit.js
+++ b/build-system/tasks/unit.js
@@ -17,42 +17,38 @@
 
 const argv = require('minimist')(process.argv.slice(2));
 const {
-  maybePrintArgvMessages,
-  shouldNotRun,
-} = require('./runtime-test/helpers');
-const {
-  RuntimeTestRunner,
   RuntimeTestConfig,
+  RuntimeTestRunner,
 } = require('./runtime-test/runtime-test-base');
+const {analyticsVendorConfigs} = require('./analytics-vendor-configs');
 const {compileJison} = require('./compile-jison');
 const {css} = require('./css');
 const {getUnitTestsToRun} = require('./runtime-test/helpers-unit');
-const {vendorConfigs} = require('./vendor-configs');
+const {maybePrintArgvMessages} = require('./runtime-test/helpers');
 
 class Runner extends RuntimeTestRunner {
+  /**
+   *
+   * @param {RuntimeTestConfig} config
+   */
   constructor(config) {
     super(config);
   }
 
   /** @override */
   async maybeBuild() {
-    await vendorConfigs();
-
-    if (!argv.nobuild) {
-      await css();
-      await compileJison();
-    }
+    await analyticsVendorConfigs();
+    await css();
+    await compileJison();
   }
 }
 
+/**
+ * @return {Promise<void>}
+ */
 async function unit() {
-  if (shouldNotRun()) {
-    return;
-  }
-
   maybePrintArgvMessages();
-
-  if (argv.local_changes && !getUnitTestsToRun()) {
+  if (argv.local_changes && !(await getUnitTestsToRun())) {
     return;
   }
 
@@ -70,21 +66,21 @@ module.exports = {
 
 unit.description = 'Runs unit tests';
 unit.flags = {
-  'chrome_canary': '  Runs tests on Chrome Canary',
-  'chrome_flags': '  Uses the given flags to launch Chrome',
-  'coverage': '  Run tests in code coverage mode',
-  'firefox': '  Runs tests on Firefox',
-  'files': '  Runs tests for specific files',
-  'grep': '  Runs tests that match the pattern',
-  'headless': '  Run tests in a headless Chrome window',
-  'ie': '  Runs tests on IE',
+  'chrome_canary': 'Runs tests on Chrome Canary',
+  'chrome_flags': 'Uses the given flags to launch Chrome',
+  'coverage': 'Run tests in code coverage mode',
+  'edge': 'Runs tests on Edge',
+  'firefox': 'Runs tests on Firefox',
+  'files': 'Runs tests for specific files',
+  'grep': 'Runs tests that match the pattern',
+  'headless': 'Run tests in a headless Chrome window',
+  'ie': 'Runs tests on IE',
   'local_changes':
-    '  Run unit tests directly affected by the files changed in the local branch',
-  'nobuild': '  Skips build step',
-  'nohelp': '  Silence help messages that are printed prior to test run',
-  'safari': '  Runs tests on Safari',
-  'saucelabs': '  Runs tests on saucelabs (requires setup)',
-  'testnames': '  Lists the name of each test being run',
-  'verbose': '  With logging enabled',
-  'watch': '  Watches for changes in files, runs corresponding test(s)',
+    'Run unit tests directly affected by the files changed in the local branch',
+  'nohelp': 'Silence help messages that are printed prior to test run',
+  'report': 'Write test result report to a local file',
+  'safari': 'Runs tests on Safari',
+  'testnames': 'Lists the name of each test being run',
+  'verbose': 'With logging enabled',
+  'watch': 'Watches for changes in files, runs corresponding test(s)',
 };
diff --git a/build-system/tasks/update-packages.js b/build-system/tasks/update-packages.js
deleted file mode 100644
index c8738c8748b13..0000000000000
--- a/build-system/tasks/update-packages.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * Copyright 2017 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 colors = require('ansi-colors');
-const fs = require('fs-extra');
-const log = require('fancy-log');
-const {exec, execOrDie, getStderr} = require('../common/exec');
-const {isTravisBuild} = require('../common/travis');
-
-const yarnExecutable = 'npx yarn';
-
-/**
- * Writes the given contents to the patched file if updated
- * @param {string} patchedName Name of patched file
- * @param {string} file Contents to write
- */
-function writeIfUpdated(patchedName, file) {
-  if (!fs.existsSync(patchedName) || fs.readFileSync(patchedName) != file) {
-    fs.writeFileSync(patchedName, file);
-    if (!isTravisBuild()) {
-      log(colors.green('Patched'), colors.cyan(patchedName));
-    }
-  }
-}
-
-/**
- * Patches Web Animations polyfill by wrapping its body into `install` function.
- * This gives us an option to call polyfill directly on the main window
- * or a friendly iframe.
- */
-function patchWebAnimations() {
-  // Copies web-animations-js into a new file that has an export.
-  const patchedName =
-    'node_modules/web-animations-js/web-animations.install.js';
-  let file = fs
-    .readFileSync('node_modules/web-animations-js/web-animations.min.js')
-    .toString();
-  // Replace |requestAnimationFrame| with |window|.
-  file = file.replace(/requestAnimationFrame/g, function (a, b) {
-    if (file.charAt(b - 1) == '.') {
-      return a;
-    }
-    return 'window.' + a;
-  });
-  // Fix web-animations-js code that violates strict mode.
-  // See https://github.com/ampproject/amphtml/issues/18612 and
-  // https://github.com/web-animations/web-animations-js/issues/46
-  file = file.replace(/b.true=a/g, 'b?b.true=a:true');
-
-  // Fix web-animations-js code that attempts to write a read-only property.
-  // See https://github.com/ampproject/amphtml/issues/19783 and
-  // https://github.com/web-animations/web-animations-js/issues/160
-  file = file.replace(/this\._isFinished\s*=\s*\!0,/, '');
-
-  // Wrap the contents inside the install function.
-  file =
-    'export function installWebAnimations(window) {\n' +
-    'var document = window.document;\n' +
-    file +
-    '\n' +
-    '}\n';
-  writeIfUpdated(patchedName, file);
-}
-
-/**
- * Patches Intersection Observer polyfill by wrapping its body into `install`
- * function.
- * This gives us an option to control when and how the polyfill is installed.
- * The polyfill can only be installed on the root context.
- */
-function patchIntersectionObserver() {
-  // Copies intersection-observer into a new file that has an export.
-  const patchedName =
-    'node_modules/intersection-observer/intersection-observer.install.js';
-  let file = fs
-    .readFileSync('node_modules/intersection-observer/intersection-observer.js')
-    .toString();
-
-  // Wrap the contents inside the install function.
-  file = `export function installIntersectionObserver() {\n${file}\n}\n`;
-  writeIfUpdated(patchedName, file);
-}
-
-/**
- * Does a yarn check on node_modules, and if it is outdated, runs yarn.
- */
-function runYarnCheck() {
-  const integrityCmd = yarnExecutable + ' check --integrity';
-  if (getStderr(integrityCmd).trim() != '') {
-    log(
-      colors.yellow('WARNING:'),
-      'The packages in',
-      colors.cyan('node_modules'),
-      'do not match',
-      colors.cyan('package.json.')
-    );
-    const verifyTreeCmd = yarnExecutable + ' check --verify-tree';
-    exec(verifyTreeCmd);
-    log('Running', colors.cyan('yarn'), 'to update packages...');
-    /**
-     * NOTE: executing yarn with --production=false prevents having
-     * NODE_ENV=production variable set which forces yarn to not install
-     * devDependencies. This usually breaks gulp for example.
-     */
-    execOrDie(`${yarnExecutable} install --production=false`); // Stop execution when Ctrl + C is detected.
-  } else {
-    log(
-      colors.green('All packages in'),
-      colors.cyan('node_modules'),
-      colors.green('are up to date.')
-    );
-  }
-}
-
-/**
- * Used as a pre-requisite by several gulp tasks.
- */
-function maybeUpdatePackages() {
-  if (!isTravisBuild()) {
-    updatePackages();
-  }
-}
-
-/**
- * Installs custom lint rules, updates node_modules (for local dev), and patches
- * polyfills if necessary.
- */
-async function updatePackages() {
-  if (!isTravisBuild()) {
-    runYarnCheck();
-  }
-  patchWebAnimations();
-  patchIntersectionObserver();
-}
-
-module.exports = {
-  maybeUpdatePackages,
-  updatePackages,
-};
-
-updatePackages.description =
-  'Runs yarn if node_modules is out of date, and applies custom patches';
diff --git a/build-system/tasks/validate-html-fixtures.js b/build-system/tasks/validate-html-fixtures.js
new file mode 100644
index 0000000000000..d91974068cd96
--- /dev/null
+++ b/build-system/tasks/validate-html-fixtures.js
@@ -0,0 +1,117 @@
+/**
+ * Copyright 2021 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.
+ */
+'using strict';
+
+const argv = require('minimist')(process.argv.slice(2));
+const {
+  log,
+  logLocalDev,
+  logWithoutTimestamp,
+  logWithoutTimestampLocalDev,
+} = require('../common/logging');
+const {cyan, green, red} = require('../common/colors');
+const {getFilesToCheck} = require('../common/utils');
+const {getOutput} = require('../common/process');
+const {htmlFixtureGlobs} = require('../test-configs/config');
+const {JSDOM} = require('jsdom');
+
+/**
+ * Gets the AMP format type for the given HTML file by parsing its contents and
+ * examining the root element.
+ * @param {string} file
+ * @return {Promise<string>}
+ */
+async function getAmpFormat(file) {
+  const jsdom = await JSDOM.fromFile(file);
+  const {documentElement} = jsdom.window.document;
+  const isAds = documentElement.hasAttribute('amp4ads');
+  const isEmail = documentElement.hasAttribute('amp4email');
+  return isAds ? 'AMP4ADS' : isEmail ? 'AMP4EMAIL' : 'AMP';
+}
+
+/**
+ * Separates the list of files to check into groups based on their AMP formats.
+ * @param {Array<string>} filesToCheck
+ * @return {Promise<Object>}
+ */
+async function getFileGroups(filesToCheck) {
+  logLocalDev(green('Sorting HTML fixtures into format groups...'));
+  const fileGroups = {AMP4ADS: [], AMP4EMAIL: [], AMP: []};
+  await Promise.all(
+    filesToCheck.map(async (file) =>
+      fileGroups[await getAmpFormat(file)].push(file)
+    )
+  );
+  return fileGroups;
+}
+
+/**
+ * Runs amphtml-validator on the given list of files and prints results.
+ *
+ * @param {Array<string>} filesToCheck
+ * @return {Promise<void>}
+ */
+async function runCheck(filesToCheck) {
+  const fileGroups = await getFileGroups(filesToCheck);
+  const formats = Object.keys(fileGroups);
+  let foundValidationErrors = false;
+  for (const format of formats) {
+    if (fileGroups[format].length == 0) {
+      continue;
+    }
+    const files = fileGroups[format].sort().join(' ');
+    logLocalDev(green('Validating'), cyan(format), green('fixtures...'));
+    const validateFixturesCmd = `FORCE_COLOR=1 npx amphtml-validator --html_format ${format} ${files}`;
+    const result = getOutput(validateFixturesCmd);
+    logWithoutTimestampLocalDev(result.stdout);
+    if (result.stderr) {
+      logWithoutTimestamp(result.stderr);
+      log(red('ERROR:'), 'Found errors in', cyan(format), 'fixtures.');
+      foundValidationErrors = true;
+    }
+  }
+  if (foundValidationErrors) {
+    throw new Error('Please address the errors listed above.');
+  }
+  log(green('SUCCESS:'), 'All HTML fixtures are valid.');
+}
+
+/**
+ * Makes sure that HTML fixtures used during tests contain valid AMPHTML.
+ */
+async function validateHtmlFixtures() {
+  const globs = argv.include_skipped
+    ? htmlFixtureGlobs.filter((glob) => !glob.startsWith('!'))
+    : htmlFixtureGlobs;
+  const filesToCheck = getFilesToCheck(globs, {}, '.gitignore');
+  if (filesToCheck.length == 0) {
+    return;
+  }
+  await runCheck(filesToCheck);
+}
+
+validateHtmlFixtures.description =
+  'Makes sure that HTML fixtures used during tests contain valid AMPHTML.';
+validateHtmlFixtures.flags = {
+  'files': 'Checks just the specified files',
+  'include_skipped':
+    'Include skipped files while validating (can be used with --local_changes)',
+  'local_changes': 'Checks just the files changed in the local branch',
+};
+
+module.exports = {
+  validateHtmlFixtures,
+};
diff --git a/build-system/tasks/validator.js b/build-system/tasks/validator.js
index 8e7d6e78f7f0d..e9f6d425c603d 100644
--- a/build-system/tasks/validator.js
+++ b/build-system/tasks/validator.js
@@ -24,50 +24,62 @@ if (argv.update_tests) {
 }
 
 /**
- * Simple wrapper around the python based validator build.
+ * Simple wrapper around the python based validator tests.
  */
 async function validator() {
-  execOrDie('python build.py' + validatorArgs, {
+  execOrDie('python3 build.py' + validatorArgs, {
     cwd: 'validator',
     stdio: 'inherit',
   });
 }
 
 /**
- * Simple wrapper around the Java validator test suite.
+ * Simple wrapper around the bazel based C++ validator tests.
  */
-async function validatorJava() {
-  execOrDie('./install_bazel.sh && ./build_and_test.sh', {
-    cwd: 'validator/java',
+async function validatorCpp() {
+  const bazelCmd = [
+    'bazel test',
+    '--repo_env=CC=clang',
+    "--cxxopt='-std=c++17'",
+    '--test_output=errors',
+    '--ui_event_filters=INFO',
+    '--noshow_progress',
+    '--noshow_loading_progress',
+    '--test_summary=detailed',
+    '--verbose_failures',
+    'validator_test',
+  ].join(' ');
+  execOrDie(bazelCmd, {
+    cwd: 'validator/cpp/engine',
     stdio: 'inherit',
   });
 }
 
 /**
- * Simple wrapper around the python based validator webui build.
+ * Simple wrapper around the python based validator webui tests.
  */
 async function validatorWebui() {
-  execOrDie('python build.py' + validatorArgs, {
-    cwd: 'validator/webui',
+  execOrDie('python3 build.py' + validatorArgs, {
+    cwd: 'validator/js/webui',
     stdio: 'inherit',
   });
 }
 
 module.exports = {
   validator,
-  validatorJava,
+  validatorCpp,
   validatorWebui,
 };
 
 validator.description = 'Builds and tests the AMP validator.';
 validator.flags = {
-  'update_tests': '  Updates validation test output files',
+  'update_tests': 'Updates validation test output files',
 };
 
-validatorJava.description =
-  'Builds and tests the AMP validator Java implementation.';
+validatorCpp.description = 'Builds and tests the AMP C++ validator.';
+// TODO(antiphoton): Add the ability to update validation test output files.
 
 validatorWebui.description = 'Builds and tests the AMP validator web UI.';
 validatorWebui.flags = {
-  'update_tests': '  Updates validation test output files',
+  'update_tests': 'Updates validation test output files',
 };
diff --git a/build-system/tasks/vendor-configs.js b/build-system/tasks/vendor-configs.js
deleted file mode 100644
index ad06b7db5cc31..0000000000000
--- a/build-system/tasks/vendor-configs.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * 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.
- */
-
-const minimist = require('minimist');
-const argv = minimist(process.argv.slice(2));
-const debounce = require('debounce');
-const globby = require('globby');
-const gulp = require('gulp');
-const gulpif = require('gulp-if');
-const gulpWatch = require('gulp-watch');
-const jsonlint = require('gulp-jsonlint');
-const jsonminify = require('gulp-jsonminify');
-const rename = require('gulp-rename');
-const {endBuildStep, toPromise} = require('./helpers');
-const {watchDebounceDelay} = require('./helpers');
-
-/**
- * Entry point for 'gulp vendor-configs'
- * Compile all the vendor configs and drop in the dist folder
- * @param {Object=} opt_options
- * @return {!Promise}
- */
-async function vendorConfigs(opt_options) {
-  const options = opt_options || {};
-
-  const srcPath = ['extensions/amp-analytics/0.1/vendors/*.json'];
-  const destPath = 'dist/v0/analytics-vendors/';
-
-  // ignore test json if not fortesting
-  if (!(argv.fortesting || options.fortesting)) {
-    srcPath.push('!extensions/amp-analytics/0.1/vendors/_fake_.json');
-  }
-
-  if (options.watch) {
-    // Do not set watchers again when we get called by the watcher.
-    const copyOptions = {...options, watch: false, calledByWatcher: true};
-    const watchFunc = () => {
-      vendorConfigs(copyOptions);
-    };
-    gulpWatch(srcPath, debounce(watchFunc, watchDebounceDelay));
-  }
-
-  const startTime = Date.now();
-
-  return toPromise(
-    gulp
-      .src(srcPath)
-      .pipe(gulpif(options.minify, jsonminify()))
-      .pipe(jsonlint())
-      // report any linting errors
-      .pipe(jsonlint.reporter())
-      // only fail if not in watcher, so watch is not interrupted
-      .pipe(gulpif(!options.calledByWatcher, jsonlint.failOnError()))
-      // if not minifying, append .max to filename
-      .pipe(
-        gulpif(
-          !options.minify,
-          rename(function (path) {
-            path.basename += '.max';
-          })
-        )
-      )
-      .pipe(gulp.dest(destPath))
-  ).then(() => {
-    if (globby.sync(srcPath).length > 0) {
-      endBuildStep(
-        'Compiled all analytics vendor configs into',
-        destPath,
-        startTime
-      );
-    }
-  });
-}
-
-module.exports = {
-  vendorConfigs,
-};
-
-vendorConfigs.description = 'Compile analytics vendor configs to dist';
diff --git a/build-system/tasks/visual-diff/.npmrc b/build-system/tasks/visual-diff/.npmrc
new file mode 100644
index 0000000000000..5c6ff9df9dd25
--- /dev/null
+++ b/build-system/tasks/visual-diff/.npmrc
@@ -0,0 +1 @@
+puppeteer_skip_chromium_download=true
diff --git a/build-system/tasks/visual-diff/.percy.yaml b/build-system/tasks/visual-diff/.percy.yaml
index 352e7ce6a8a49..0bfdadf772f86 100644
--- a/build-system/tasks/visual-diff/.percy.yaml
+++ b/build-system/tasks/visual-diff/.percy.yaml
@@ -1,12 +1,11 @@
 # Percy Agent config.
 # https://docs.percy.io/docs/sdk-configuration
 
-version: 1
+version: 2
 snapshot:
   widths:
     - 375 # e.g., iPhone
     - 411 # e.g., iPhone X, Pixel
     - 1400 # e.g., common desktop width
-agent:
-  asset-discovery:
-    network-idle-timeout: 150 # ms
+discovery:
+  network-idle-timeout: 150 # ms
diff --git a/build-system/tasks/visual-diff/OWNERS b/build-system/tasks/visual-diff/OWNERS
index f611e0658adf3..32aa0d7ce6c4e 100644
--- a/build-system/tasks/visual-diff/OWNERS
+++ b/build-system/tasks/visual-diff/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/build-system/tasks/visual-diff/helpers.js b/build-system/tasks/visual-diff/helpers.js
index 772a55d92166f..7c262613b3b15 100644
--- a/build-system/tasks/visual-diff/helpers.js
+++ b/build-system/tasks/visual-diff/helpers.js
@@ -16,9 +16,8 @@
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
-const colors = require('ansi-colors');
-const fancyLog = require('fancy-log');
-const sleep = require('sleep-promise');
+const {cyan, green, red, yellow} = require('../../common/colors');
+const {log: logBase} = require('../../common/logging');
 
 const CSS_SELECTOR_RETRY_MS = 200;
 const CSS_SELECTOR_RETRY_ATTEMPTS = 50;
@@ -49,27 +48,27 @@ function escapeHtml(html) {
  * Logs a message to the console.
  *
  * @param {string} mode
- * @param {!Array<string>} messages
+ * @param {!Array<*>} messages
  */
 function log(mode, ...messages) {
   switch (mode) {
     case 'verbose':
       if (argv.verbose) {
-        fancyLog.info(colors.green('VERBOSE:'), ...messages);
+        logBase(green('VERBOSE:'), ...messages);
       }
       break;
     case 'info':
-      fancyLog.info(colors.green('INFO:'), ...messages);
+      logBase(green('INFO:'), ...messages);
       break;
     case 'warning':
-      fancyLog.warn(colors.yellow('WARNING:'), ...messages);
+      logBase(yellow('WARNING:'), ...messages);
       break;
     case 'error':
-      fancyLog.error(colors.red('ERROR:'), ...messages);
+      logBase(red('ERROR:'), ...messages);
       break;
     case 'fatal':
       process.exitCode = 1;
-      fancyLog.error(colors.red('FATAL:'), ...messages);
+      logBase(red('FATAL:'), ...messages);
       throw new Error(messages.join(' '));
   }
 }
@@ -87,7 +86,7 @@ async function verifySelectorsInvisible(page, testName, selectors) {
   log(
     'verbose',
     'Waiting for invisibility of all:',
-    colors.cyan(selectors.join(', '))
+    cyan(selectors.join(', '))
   );
   try {
     await Promise.all(
@@ -97,8 +96,8 @@ async function verifySelectorsInvisible(page, testName, selectors) {
     );
   } catch (e) {
     throw new Error(
-      `${colors.cyan(testName)} | An element with the CSS ` +
-        `selector ${colors.cyan(e.message)} is still visible after ` +
+      `${cyan(testName)} | An element with the CSS ` +
+        `selector ${cyan(e.message)} is still visible after ` +
         `${CSS_SELECTOR_TIMEOUT_MS} ms`
     );
   }
@@ -114,27 +113,19 @@ async function verifySelectorsInvisible(page, testName, selectors) {
  * @throws {Error} an encountered error.
  */
 async function verifySelectorsVisible(page, testName, selectors) {
-  log(
-    'verbose',
-    'Waiting for existence of all:',
-    colors.cyan(selectors.join(', '))
-  );
+  log('verbose', 'Waiting for existence of all:', cyan(selectors.join(', ')));
   try {
     await Promise.all(
       selectors.map((selector) => waitForSelectorExistence(page, selector))
     );
   } catch (e) {
     throw new Error(
-      `${colors.cyan(testName)} | The CSS selector ` +
-        `${colors.cyan(e.message)} does not match any elements in the page`
+      `${cyan(testName)} | The CSS selector ` +
+        `${cyan(e.message)} does not match any elements in the page`
     );
   }
 
-  log(
-    'verbose',
-    'Waiting for visibility of all:',
-    colors.cyan(selectors.join(', '))
-  );
+  log('verbose', 'Waiting for visibility of all:', cyan(selectors.join(', ')));
   try {
     await Promise.all(
       selectors.map((selector) =>
@@ -143,29 +134,29 @@ async function verifySelectorsVisible(page, testName, selectors) {
     );
   } catch (e) {
     throw new Error(
-      `${colors.cyan(testName)} | An element with the CSS ` +
-        `selector ${colors.cyan(e.message)} is still invisible after ` +
+      `${cyan(testName)} | An element with the CSS ` +
+        `selector ${cyan(e.message)} is still invisible after ` +
         `${CSS_SELECTOR_TIMEOUT_MS} ms`
     );
   }
 }
 
 /**
- * Wait for all AMP loader dot to disappear.
+ * Wait for all AMP loader indicators to disappear.
  *
  * @param {!puppeteer.Page} page page to wait on.
  * @param {string} testName the full name of the test.
  * @throws {Error} an encountered error.
  */
-async function waitForLoaderDots(page, testName) {
-  const allLoaderDotsGone = await waitForElementVisibility(
+async function waitForPageLoad(page, testName) {
+  const allLoadersGone = await waitForElementVisibility(
     page,
-    '.i-amphtml-loader-dot',
+    '[class~="i-amphtml-loader"], [class~="i-amphtml-loading"]',
     {hidden: true}
   );
-  if (!allLoaderDotsGone) {
+  if (!allLoadersGone) {
     throw new Error(
-      `${colors.cyan(testName)} still has the AMP loader dot ` +
+      `${cyan(testName)} still has the AMP loader dot ` +
         `after ${CSS_SELECTOR_TIMEOUT_MS} ms`
     );
   }
@@ -209,19 +200,19 @@ async function waitForElementVisibility(page, selector, options) {
       log(
         'verbose',
         'Found',
-        colors.cyan(elementsAreVisible.length),
+        cyan(elementsAreVisible.length),
         'element(s) matching the CSS selector',
-        colors.cyan(selector)
+        cyan(selector)
       );
       log(
         'verbose',
         'Expecting all element visibilities to be',
-        colors.cyan(waitForVisible),
+        cyan(waitForVisible),
         '; they are',
-        colors.cyan(elementsAreVisible)
+        cyan(elementsAreVisible)
       );
     } else {
-      log('verbose', 'No', colors.cyan(selector), 'matches found');
+      log('verbose', 'No', cyan(selector), 'matches found');
     }
     // Since we assert that waitForVisible == !waitForHidden, there is no need
     // to check equality to both waitForVisible and waitForHidden.
@@ -262,10 +253,20 @@ async function waitForSelectorExistence(page, selector) {
   throw new Error(selector);
 }
 
+/**
+ * Returns a Promise that resolves after the specified number of milliseconds.
+ * @param {number} ms
+ * @return {Promise}
+ */
+async function sleep(ms) {
+  return new Promise((res) => setTimeout(res, ms));
+}
+
 module.exports = {
   escapeHtml,
   log,
-  waitForLoaderDots,
+  sleep,
+  waitForPageLoad,
   verifySelectorsInvisible,
   verifySelectorsVisible,
 };
diff --git a/build-system/tasks/visual-diff/index.js b/build-system/tasks/visual-diff/index.js
index 68969d0e12d1e..13c09111c8df0 100644
--- a/build-system/tasks/visual-diff/index.js
+++ b/build-system/tasks/visual-diff/index.js
@@ -16,11 +16,9 @@
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
-const colors = require('ansi-colors');
 const fs = require('fs');
 const JSON5 = require('json5');
 const path = require('path');
-const sleep = require('sleep-promise');
 const {
   createCtrlcHandler,
   exitCtrlcHandler,
@@ -28,34 +26,57 @@ const {
 const {
   escapeHtml,
   log,
-  waitForLoaderDots,
+  sleep,
   verifySelectorsInvisible,
   verifySelectorsVisible,
+  waitForPageLoad,
 } = require('./helpers');
 const {
   gitBranchName,
+  gitCiMainBaseline,
   gitCommitterEmail,
-  gitTravisMasterBaseline,
   shortSha,
 } = require('../../common/git');
-const {buildRuntime, installPackages} = require('../../common/utils');
-const {execScriptAsync} = require('../../common/exec');
-const {isTravisBuild} = require('../../common/travis');
+const {buildRuntime} = require('../../common/utils');
+const {cyan, yellow} = require('../../common/colors');
+const {isCiBuild} = require('../../common/ci');
 const {startServer, stopServer} = require('../serve');
-const {waitUntilUsed} = require('tcp-port-used');
 
-// optional dependencies for local development (outside of visual diff tests)
+// Lazy-loaded dependencies.
 let puppeteer;
 let percySnapshot;
-
-const SNAPSHOT_SINGLE_BUILD_OPTIONS = {widths: [375]};
+let Percy;
+
+// CSS injected in every page tested.
+// Normally, as in https://docs.percy.io/docs/percy-specific-css
+// Otherwise, as a <style> in an iframe, see snippets/iframe-wrapper.js
+const percyCss = [
+  // Loader animation may otherwise be captured in slightly different points,
+  // causing the test to flake.
+  '.i-amphtml-new-loader * { animation: none !important; }',
+].join('\n');
+
+// REPEATING TODO(@ampproject/wg-infra): Update this whenever the Percy backend
+// starts using a new version of Chrome to render DOM snapshots.
+//
+// Steps:
+// 1. Open a recent Percy build, and click the “ⓘ” icon
+// 2. Note the Chrome major version at the bottom
+// 3. Look up the full version at https://en.wikipedia.org/wiki/Google_Chrome_version_history
+// 4. Open https://omahaproxy.appspot.com in a browser
+// 5. Go to "Tools" -> "Version information"
+// 6. Paste the full version in the "Version" field and click "Lookup"
+// 7. Copy the value next to "Branch Base Position" and update the line below
+const PUPPETEER_CHROMIUM_REVISION = '827102'; // 88.0.4324.0
+
+const SNAPSHOT_SINGLE_BUILD_OPTIONS = {
+  widths: [375],
+};
 const VIEWPORT_WIDTH = 1400;
 const VIEWPORT_HEIGHT = 100000;
 const HOST = 'localhost';
 const PORT = 8000;
 const PERCY_AGENT_PORT = 5338;
-const PERCY_AGENT_RETRY_MS = 100;
-const PERCY_AGENT_TIMEOUT_MS = 5000;
 const NAVIGATE_TIMEOUT_MS = 30000;
 const MAX_PARALLEL_TABS = 5;
 const WAIT_FOR_TABS_MS = 1000;
@@ -75,6 +96,10 @@ const FREEZE_FORM_VALUE_SNIPPET = fs.readFileSync(
   path.resolve(__dirname, 'snippets/freeze-form-values.js'),
   'utf8'
 );
+const FREEZE_CANVAS_IMAGE_SNIPPET = fs.readFileSync(
+  path.resolve(__dirname, 'snippets/freeze-canvas-image.js'),
+  'utf8'
+);
 
 // HTML snippet to create an error page snapshot.
 const SNAPSHOT_ERROR_SNIPPET = fs.readFileSync(
@@ -83,10 +108,9 @@ const SNAPSHOT_ERROR_SNIPPET = fs.readFileSync(
 );
 
 let browser_;
-let percyAgentProcess_;
 
 /**
- * Override PERCY_* environment variables if passed via gulp task parameters.
+ * Override PERCY_* environment variables if passed via amp task parameters.
  */
 function maybeOverridePercyEnvironmentVariables() {
   ['percy_token', 'percy_branch'].forEach((variable) => {
@@ -102,7 +126,7 @@ function maybeOverridePercyEnvironmentVariables() {
  * as baselines for future builds.
  */
 function setPercyBranch() {
-  if (!process.env['PERCY_BRANCH'] && (!argv.master || !isTravisBuild())) {
+  if (!process.env['PERCY_BRANCH'] && (!argv.main || !isCiBuild())) {
     const userName = gitCommitterEmail();
     const branchName = gitBranchName();
     process.env['PERCY_BRANCH'] = userName + '-' + branchName;
@@ -115,39 +139,51 @@ function setPercyBranch() {
  * This will let Percy determine which build to use as the baseline for this new
  * build.
  *
- * Only does something on Travis, and for non-master branches, since master
+ * Only does something during CI, and for non-main branches, since main branch
  * builds are always built on top of the previous commit (we use the squash and
  * merge method for pull requests.)
  */
 function setPercyTargetCommit() {
-  if (isTravisBuild() && !argv.master) {
-    process.env['PERCY_TARGET_COMMIT'] = gitTravisMasterBaseline();
+  if (isCiBuild() && !argv.main) {
+    process.env['PERCY_TARGET_COMMIT'] = gitCiMainBaseline();
   }
 }
 
 /**
- * Launches a @percy/agent instance.
+ * Launches a @percy/cli instance.
+ *
+ * @param {!puppeteer.BrowserFetcher} browserFetcher Puppeteer browser binaries
+ *     manager.
+ * @return {!Promise<Percy|undefined>} percy agent instance.
  */
-async function launchPercyAgent() {
+async function launchPercyAgent(browserFetcher) {
   if (argv.percy_disabled) {
     return;
   }
 
-  const env = argv.percy_agent_debug ? {LOG_LEVEL: 'debug'} : {};
-  percyAgentProcess_ = execScriptAsync(
-    `npx percy start --port ${PERCY_AGENT_PORT}`,
-    {
-      cwd: __dirname,
-      env: Object.assign(env, process.env),
-      stdio: ['ignore', process.stdout, process.stderr],
-    }
-  );
-  await waitUntilUsed(
-    PERCY_AGENT_PORT,
-    PERCY_AGENT_RETRY_MS,
-    PERCY_AGENT_TIMEOUT_MS
-  );
+  const percy = await Percy.start({
+    token: process.env.PERCY_TOKEN,
+    loglevel: argv.percy_agent_debug ? 'debug' : 'info',
+    port: PERCY_AGENT_PORT,
+    config: path.join(__dirname, '.percy.yaml'),
+    discovery: {
+      launchOptions: {
+        executable: browserFetcher.revisionInfo(PUPPETEER_CHROMIUM_REVISION)
+          .executablePath,
+      },
+    },
+  });
+
   log('info', 'Percy agent is reachable on port', PERCY_AGENT_PORT);
+  if (process.env['PERCY_TARGET_COMMIT']) {
+    log(
+      'info',
+      'The Percy build is baselined on top of commit',
+      cyan(shortSha(process.env['PERCY_TARGET_COMMIT']))
+    );
+  }
+
+  return percy;
 }
 
 /**
@@ -157,7 +193,7 @@ async function launchWebServer() {
   await startServer(
     {host: HOST, port: PORT},
     {quiet: !argv.webserver_debug},
-    {compiled: argv.compiled}
+    {compiled: true}
   );
 }
 
@@ -167,13 +203,17 @@ async function launchWebServer() {
  * Waits until the browser is up and reachable, and ties its lifecycle to this
  * process's lifecycle.
  *
- * @return {!puppeteer.Browser} a Puppeteer controlled browser.
+ * @param {!puppeteer.BrowserFetcher} browserFetcher Puppeteer browser binaries
+ *     manager.
+ * @return {!Promise<!puppeteer.Browser>} a Puppeteer controlled browser.
  */
-async function launchBrowser() {
+async function launchBrowser(browserFetcher) {
   const browserOptions = {
     args: ['--no-sandbox', '--disable-extensions', '--disable-gpu'],
     dumpio: argv.chrome_debug,
     headless: true,
+    executablePath: browserFetcher.revisionInfo(PUPPETEER_CHROMIUM_REVISION)
+      .executablePath,
   };
 
   try {
@@ -182,12 +222,6 @@ async function launchBrowser() {
     log('fatal', error);
   }
 
-  // Every action on the browser or its pages adds a listener to the
-  // Puppeteer.Connection.Events.Disconnected event. This is a temporary
-  // workaround for the Node runtime warning that is emitted once 11 listeners
-  // are added to the same object.
-  browser_._connection.setMaxListeners(9999);
-
   return browser_;
 }
 
@@ -195,9 +229,9 @@ async function launchBrowser() {
  * Opens a new browser tab, resizes its viewport, and returns a Page handler.
  *
  * @param {!puppeteer.Browser} browser a Puppeteer controlled browser.
- * @param {JsonObject} viewport optional viewport size object with numeric
- *     fields `width` and `height`.
- * @return {!Promise<!Puppeteer.Page>}
+ * @param {?{height: number, width: number}} viewport optional viewport size
+ *     object with numeric fields `width` and `height`.
+ * @return {!Promise<!puppeteer.Page>}
  */
 async function newPage(browser, viewport = null) {
   log('verbose', 'Creating new tab');
@@ -227,16 +261,16 @@ async function newPage(browser, viewport = null) {
       log(
         'verbose',
         'Mocked network request for',
-        colors.yellow(requestUrl.href),
+        yellow(requestUrl.href),
         'with file',
-        colors.cyan(mockedFilepath)
+        cyan(mockedFilepath)
       );
       return interceptedRequest.respond(fs.readFileSync(mockedFilepath));
     } else {
       log(
         'verbose',
         'Blocked external network request for',
-        colors.yellow(requestUrl.href)
+        yellow(requestUrl.href)
       );
       return interceptedRequest.abort('blockedbyclient');
     }
@@ -249,8 +283,8 @@ async function newPage(browser, viewport = null) {
  * Resets the size of a tab and loads about:blank.
  *
  * @param {!puppeteer.Page} page a Puppeteer control browser tab/page.
- * @param {JsonObject} viewport optional viewport size object with numeric
- *     fields `width` and `height`.
+ * @param {?{height: number, width: number}} viewport optional viewport size
+ *     object with numeric fields `width` and `height`.
  */
 async function resetPage(page, viewport = null) {
   const width = viewport ? viewport.width : VIEWPORT_WIDTH;
@@ -259,9 +293,9 @@ async function resetPage(page, viewport = null) {
   log(
     'verbose',
     'Resetting tab to',
-    colors.yellow('about:blank'),
+    yellow('about:blank'),
     'with size',
-    colors.yellow(`${width}×${height}`)
+    yellow(`${width}×${height}`)
   );
 
   await page.goto('about:blank');
@@ -269,7 +303,7 @@ async function resetPage(page, viewport = null) {
 }
 
 /**
- * Adds a test error and logs it if running locally (not on Travis).
+ * Adds a test error and logs it if running locally (not as part of CI).
  *
  * @param {!Array<!JsonObject>} testErrors array of testError objects.
  * @param {string} name full name of the test.
@@ -280,7 +314,7 @@ async function resetPage(page, viewport = null) {
  */
 function addTestError(testErrors, name, message, error, consoleMessages) {
   const testError = {name, message, error, consoleMessages};
-  if (!isTravisBuild()) {
+  if (!isCiBuild()) {
     logTestError(testError);
   }
   testErrors.push(testError);
@@ -295,7 +329,7 @@ function logTestError(testError) {
   log(
     'error',
     'Error in test',
-    colors.yellow(testError.name),
+    yellow(testError.name),
     '\n  ',
     testError.message,
     '\n  ',
@@ -304,50 +338,31 @@ function logTestError(testError) {
   if (testError.consoleMessages.length > 0) {
     log(
       'error',
-      colors.cyan(testError.consoleMessages.length),
+      cyan(testError.consoleMessages.length),
       'Console messages in the browser so far:'
     );
     for (const message of testError.consoleMessages) {
-      log('error', colors.cyan(`[console.${message.type()}]`), message.text());
+      log('error', cyan(`[console.${message.type()}]`), message.text());
     }
   }
 }
 
-/**
- * Runs the visual tests.
- *
- * @param {!Array<JsonObject>} webpages an array of JSON objects containing
- *     details about the pages to snapshot.
- */
-async function runVisualTests(webpages) {
-  // Create a Percy client and start a build.
-  if (process.env['PERCY_TARGET_COMMIT']) {
-    log(
-      'info',
-      'The Percy build is baselined on top of commit',
-      colors.cyan(shortSha(process.env['PERCY_TARGET_COMMIT']))
-    );
-  }
-
-  // Take the snapshots.
-  await generateSnapshots(webpages);
-}
-
 /**
  * Sets the AMP config, launches a server, and generates Percy snapshots for a
  * set of given webpages.
  *
+ * @param {!puppeteer.Browser} browser a Puppeteer controlled browser.
  * @param {!Array<JsonObject>} webpages an array of JSON objects containing
  *     details about the pages to snapshot.
  */
-async function generateSnapshots(webpages) {
+async function runVisualTests(browser, webpages) {
   const numUnfilteredPages = webpages.length;
   webpages = webpages.filter((webpage) => !webpage.flaky);
   if (numUnfilteredPages != webpages.length) {
     log(
       'info',
       'Skipping',
-      colors.cyan(numUnfilteredPages - webpages.length),
+      cyan(numUnfilteredPages - webpages.length),
       'flaky pages'
     );
   }
@@ -355,9 +370,9 @@ async function generateSnapshots(webpages) {
     webpages = webpages.filter((webpage) => argv.grep.test(webpage.name));
     log(
       'info',
-      colors.cyan(`--grep ${argv.grep}`),
+      cyan(`--grep ${argv.grep}`),
       'matched',
-      colors.cyan(webpages.length),
+      cyan(webpages.length),
       'pages'
     );
   }
@@ -380,9 +395,9 @@ async function generateSnapshots(webpages) {
         log(
           'fatal',
           'Failed to load interactive test',
-          colors.cyan(webpage.interactive_tests),
+          cyan(webpage.interactive_tests),
           'for test',
-          colors.cyan(webpage.name),
+          cyan(webpage.name),
           '\nError:',
           error
         );
@@ -400,15 +415,14 @@ async function generateSnapshots(webpages) {
     log(
       'info',
       'Executing',
-      colors.cyan(totalTests),
+      cyan(totalTests),
       'visual diff tests on',
-      colors.cyan(webpages.length),
+      cyan(webpages.length),
       'pages'
     );
   }
 
-  const browser = await launchBrowser();
-  if (argv.master) {
+  if (argv.main) {
     const page = await newPage(browser);
     await page.goto(
       `http://${HOST}:${PORT}/examples/visual-tests/blank-page/blank.html`
@@ -428,22 +442,25 @@ async function generateSnapshots(webpages) {
  * @param {!puppeteer.Browser} browser a Puppeteer controlled browser.
  * @param {!Array<!JsonObject>} webpages an array of JSON objects containing
  *     details about the webpages to snapshot.
- * @return {boolean} true if all tests passed locally (does not indicate whether
- *     the tests passed on Percy).
+ * @return {!Promise<boolean>} true if all tests passed locally (does not
+ *     indicate whether the tests passed on Percy).
  */
 async function snapshotWebpages(browser, webpages) {
   const availablePages = [];
+  const allPages = [];
 
-  log('verbose', 'Preallocating', colors.cyan(MAX_PARALLEL_TABS), 'tabs...');
+  log('verbose', 'Preallocating', cyan(MAX_PARALLEL_TABS), 'tabs...');
   for (let i = 0; i < MAX_PARALLEL_TABS; i++) {
-    availablePages.push(await newPage(browser));
+    const page = await newPage(browser);
+    availablePages.push(page);
+    allPages.push(page);
   }
 
   const pagePromises = [];
   const testErrors = [];
   let testNumber = 0;
   for (const webpage of webpages) {
-    const {viewport, name: pageName} = webpage;
+    const {name: pageName, viewport} = webpage;
     let hasWarnings = false;
     for (const [testName, testFunction] of Object.entries(webpage.tests_)) {
       // Chrome supports redirecting <anything>.localhost to localhost, while
@@ -456,6 +473,16 @@ async function snapshotWebpages(browser, webpages) {
         await sleep(WAIT_FOR_TABS_MS);
       }
       const page = availablePages.shift();
+
+      const name = testName ? `${pageName} (${testName})` : pageName;
+      log(
+        'info',
+        'Starting test',
+        yellow(name),
+        'on tab',
+        yellow(`#${allPages.indexOf(page) + 1}`)
+      );
+
       await resetPage(page, viewport);
 
       const consoleMessages = [];
@@ -464,9 +491,6 @@ async function snapshotWebpages(browser, webpages) {
       };
       page.on('console', consoleLogger);
 
-      const name = testName ? `${pageName} (${testName})` : pageName;
-      log('info', 'Starting test', colors.yellow(name));
-
       // Puppeteer is flaky when it comes to catching navigation requests, so
       // retry the page navigation up to NAVIGATE_RETRIES times and eventually
       // ignore a final timeout. If this ends up being a real non-loading page
@@ -475,66 +499,65 @@ async function snapshotWebpages(browser, webpages) {
       // since Puppeteer doesn't always understand Chrome's network activity, so
       // ignore timeouts again.
       const pagePromise = (async () => {
-        const responseWatcher = new Promise((resolve, reject) => {
-          const responseTimeout = setTimeout(() => {
-            reject(
-              new puppeteer.TimeoutError(
-                `Response was not received in test ${testName} for page ` +
-                  `${webpage.url} after ${NAVIGATE_TIMEOUT_MS}ms`
-              )
-            );
-          }, NAVIGATE_TIMEOUT_MS);
-
-          page.once('response', async (response) => {
-            log(
-              'verbose',
-              'Response for url',
-              colors.yellow(response.url()),
-              'with status',
-              colors.cyan(response.status()),
-              colors.cyan(response.statusText())
-            );
-            clearTimeout(responseTimeout);
-            resolve();
+        try {
+          /** @type {Promise<void>} */
+          const responseWatcher = new Promise((resolve, reject) => {
+            const responseTimeout = setTimeout(() => {
+              reject(
+                new puppeteer.TimeoutError(
+                  `Response was not received in test ${testName} for page ` +
+                    `${webpage.url} after ${NAVIGATE_TIMEOUT_MS}ms`
+                )
+              );
+            }, NAVIGATE_TIMEOUT_MS);
+
+            page.once('response', (response) => {
+              log(
+                'verbose',
+                'Response for url',
+                yellow(response.url()),
+                'with status',
+                cyan(response.status()),
+                cyan(response.statusText())
+              );
+              clearTimeout(responseTimeout);
+              resolve();
+            });
           });
-        });
-
-        log('verbose', 'Navigating to page', colors.yellow(webpage.url));
-        await Promise.all([
-          responseWatcher,
-          page.goto(fullUrl, {waitUntil: 'networkidle2'}),
-        ]);
-      })()
-        .then(() => {
+
+          log('verbose', 'Navigating to page', yellow(webpage.url));
+          await Promise.all([
+            responseWatcher,
+            page.goto(fullUrl, {waitUntil: 'networkidle2'}),
+          ]);
+
           log(
             'verbose',
             'Page navigation of test',
-            colors.yellow(name),
+            yellow(name),
             'is done, verifying page'
           );
-        })
-        .catch((navigationError) => {
+        } catch (navigationError) {
           hasWarnings = true;
           addTestError(
             testErrors,
             name,
-            'The browser test runner failed to complete the navigation ' +
-              'to the test page',
+            'The browser test runner failed to complete the navigation to the test page',
             navigationError,
             consoleMessages
           );
-          if (!isTravisBuild()) {
-            log('warning', 'Continuing to verify page regardless...');
-          }
-        })
-        .then(async () => {
+          log('warning', 'Continuing to verify page regardless...');
+        }
+
+        let performSnapshot = true;
+        try {
           // Perform visibility checks: wait for all AMP built-in loader dots
           // to disappear (i.e., all visible components are finished being
           // layed out and external resources such as images are loaded and
           // displayed), then, depending on the test configurations, wait for
           // invisibility/visibility of specific elements that match the
           // configured CSS selectors.
-          await waitForLoaderDots(page, name);
+          await waitForPageLoad(page, name);
           if (webpage.loading_incomplete_selectors) {
             await verifySelectorsInvisible(
               page,
@@ -555,7 +578,7 @@ async function snapshotWebpages(browser, webpages) {
             log(
               'verbose',
               'Waiting',
-              colors.cyan(`${webpage.loading_complete_delay_ms}ms`),
+              cyan(`${webpage.loading_complete_delay_ms}ms`),
               'for loading to complete'
             );
             await sleep(webpage.loading_complete_delay_ms);
@@ -565,39 +588,12 @@ async function snapshotWebpages(browser, webpages) {
           // file. If there is no interactive test, this defaults to an empty
           // function.
           await testFunction(page, name);
-
-          // Execute post-scripts that clean up the page's HTML and send
-          // prepare it for snapshotting on Percy. See comments inside the
-          // snippet files for description of each.
-          await page.evaluate(REMOVE_AMP_SCRIPTS_SNIPPET);
-          await page.evaluate(FREEZE_FORM_VALUE_SNIPPET);
-
-          // Create a default set of snapshot options for Percy and modify
-          // them based on the test's configuration.
-          const snapshotOptions = {};
-          if (webpage.enable_percy_javascript) {
-            snapshotOptions.enableJavaScript = true;
-          }
-
-          if (viewport) {
-            snapshotOptions.widths = [viewport.width];
-            log('verbose', 'Wrapping viewport-constrained page in an iframe');
-            await page.evaluate(
-              WRAP_IN_IFRAME_SNIPPET.replace(
-                /__WIDTH__/g,
-                viewport.width
-              ).replace(/__HEIGHT__/g, viewport.height)
-            );
-          }
-
-          // Finally, send the snapshot to percy.
-          await percySnapshot(page, name, snapshotOptions);
-        })
-        .catch(async (testError) => {
+        } catch (testError) {
+          performSnapshot = false;
           addTestError(
             testErrors,
             name,
-            'Unknown failure in test page',
+            'Test page failed',
             testError,
             consoleMessages
           );
@@ -614,32 +610,68 @@ async function snapshotWebpages(browser, webpages) {
               .replace('__HTML_SNAPSHOT__', escapeHtml(htmlSnapshot))
           );
           await percySnapshot(page, name, SNAPSHOT_SINGLE_BUILD_OPTIONS);
-        })
-        .finally(async () => {
-          log(
-            hasWarnings ? 'warning' : 'info',
-            'Finished test',
-            colors.yellow(name),
-            hasWarnings ? 'with warnings' : ''
-          );
-          page.removeListener('console', consoleLogger);
-          availablePages.push(page);
-        });
+        }
+
+        if (performSnapshot) {
+          try {
+            // Execute post-scripts that clean up the page's HTML and send
+            // prepare it for snapshotting on Percy. See comments inside the
+            // snippet files for description of each.
+            await page.evaluate(REMOVE_AMP_SCRIPTS_SNIPPET);
+            await page.evaluate(FREEZE_FORM_VALUE_SNIPPET);
+            await page.evaluate(FREEZE_CANVAS_IMAGE_SNIPPET);
+
+            // Create a default set of snapshot options for Percy and modify
+            // them based on the test's configuration.
+            const snapshotOptions = {};
+            if (webpage.enable_percy_javascript) {
+              snapshotOptions.enableJavaScript = true;
+            }
+
+            if (viewport) {
+              snapshotOptions.widths = [viewport.width];
+              log('verbose', 'Wrapping viewport-constrained page in an iframe');
+              await page.evaluate(
+                WRAP_IN_IFRAME_SNIPPET.replace(/__WIDTH__/g, viewport.width)
+                  .replace(/__HEIGHT__/g, viewport.height)
+                  .replace(/__PERCY_CSS__/g, percyCss)
+              );
+            } else {
+              snapshotOptions.percyCss = percyCss;
+            }
+
+            // Finally, send the snapshot to percy.
+            await percySnapshot(page, name, snapshotOptions);
+          } catch (snapshotError) {
+            addTestError(
+              testErrors,
+              name,
+              'Failed to set up or take the Percy snapshot',
+              snapshotError,
+              consoleMessages
+            );
+            throw snapshotError;
+          }
+        }
+
+        log(
+          hasWarnings ? 'warning' : 'info',
+          'Finished test',
+          yellow(name),
+          hasWarnings ? 'with warnings' : ''
+        );
+        page.removeListener('console', consoleLogger);
+        availablePages.push(page);
+      })();
       pagePromises.push(pagePromise);
     }
   }
 
   await Promise.all(pagePromises);
-  if (isTravisBuild() && testErrors.length > 0) {
+  if (isCiBuild() && testErrors.length > 0) {
     testErrors.sort((a, b) => a.name.localeCompare(b.name));
-    log(
-      'info',
-      colors.yellow('Tests warnings and errors:'),
-      'expand this section'
-    );
-    console./*OK*/ log('travis_fold:start:visual_tests\n');
+    log('info', yellow('Tests warnings and errors:'));
     testErrors.forEach(logTestError);
-    console./*OK*/ log('travis_fold:end:visual_tests');
     return false;
   }
   return true;
@@ -661,31 +693,33 @@ function setDebuggingLevel() {
  *
  * Enables us to require percy checks on GitHub, and yet, not have to do a full
  * build for every PR.
+ *
+ * @param {!puppeteer.Browser} browser a Puppeteer controlled browser.
  */
-async function createEmptyBuild() {
+async function createEmptyBuild(browser) {
   log('info', 'Skipping visual diff tests and generating a blank Percy build');
 
-  const browser = await launchBrowser();
   const page = await newPage(browser);
 
-  await page
-    .goto(`http://${HOST}:${PORT}/examples/visual-tests/blank-page/blank.html`)
-    .then(
-      () => {},
-      () => {}
+  try {
+    await page.goto(
+      `http://${HOST}:${PORT}/examples/visual-tests/blank-page/blank.html`
     );
+  } catch {
+    // Ignore failures
+  }
+
   await percySnapshot(page, 'Blank page', SNAPSHOT_SINGLE_BUILD_OPTIONS);
 }
 
 /**
  * Runs the AMP visual diff tests.
- * @return {!Promise}
+ * @return {!Promise<void>}
  */
 async function visualDiff() {
   const handlerProcess = createCtrlcHandler('visual-diff');
   await ensureOrBuildAmpRuntimeInTestMode_();
-  installPercy_();
-  setupCleanup_();
+  const browserFetcher = await loadBrowserFetcher_();
   maybeOverridePercyEnvironmentVariables();
   setPercyBranch();
   setPercyTargetCommit();
@@ -694,52 +728,53 @@ async function visualDiff() {
     argv.grep = RegExp(argv.grep);
   }
 
-  await performVisualTests();
-  await cleanup_();
+  if (!argv.percy_disabled && !process.env.PERCY_TOKEN) {
+    log('fatal', 'Could not find', cyan('PERCY_TOKEN'), 'environment variable');
+  }
+
+  const percy = await launchPercyAgent(browserFetcher);
+  try {
+    await performVisualTests(browserFetcher);
+  } finally {
+    await percy.stop();
+  }
   exitCtrlcHandler(handlerProcess);
 }
 
 /**
  * Runs the AMP visual diff tests.
+ *
+ * @param {!puppeteer.BrowserFetcher} browserFetcher Puppeteer browser binaries
+ *     manager.
  */
-async function performVisualTests() {
+async function performVisualTests(browserFetcher) {
   setDebuggingLevel();
-  if (!argv.percy_disabled && !process.env.PERCY_TOKEN) {
-    log(
-      'fatal',
-      'Could not find',
-      colors.cyan('PERCY_TOKEN'),
-      'environment variable'
-    );
-  } else {
-    try {
-      await launchPercyAgent();
-    } catch (reason) {
-      log('fatal', `Failed to start the Percy agent: ${reason}`);
-    }
-  }
 
-  // Launch a local web server.
-  try {
-    await launchWebServer();
-  } catch (reason) {
-    log('fatal', `Failed to start a web server: ${reason}`);
-  }
+  const browser = await launchBrowser(browserFetcher);
+  await launchWebServer();
 
-  if (argv.empty) {
-    await createEmptyBuild();
-  } else {
-    // Load and parse the config. Use JSON5 due to JSON comments in file.
-    const visualTestsConfig = JSON5.parse(
-      fs.readFileSync(
-        path.resolve(__dirname, '../../../test/visual-diff/visual-tests'),
-        'utf8'
-      )
-    );
-    await runVisualTests(visualTestsConfig.webpages);
+  try {
+    if (argv.empty) {
+      await createEmptyBuild(browser);
+    } else {
+      // Load and parse the config. Use JSON5 due to JSON comments in file.
+      const visualTestsConfig = JSON5.parse(
+        fs.readFileSync(
+          path.resolve(__dirname, '../../../test/visual-diff/visual-tests'),
+          'utf8'
+        )
+      );
+      await runVisualTests(browser, visualTestsConfig.webpages);
+    }
+  } finally {
+    await browser.close();
+    await stopServer();
   }
 }
 
+/**
+ * @return {Promise<void>}
+ */
 async function ensureOrBuildAmpRuntimeInTestMode_() {
   if (argv.empty) {
     return;
@@ -753,54 +788,51 @@ async function ensureOrBuildAmpRuntimeInTestMode_() {
       log(
         'fatal',
         'The AMP runtime was not built in test mode. Run',
-        colors.cyan('gulp build|dist --fortesting'),
+        cyan('amp dist --fortesting'),
         'or remove the',
-        colors.cyan('--nobuild'),
+        cyan('--nobuild'),
         'option from this command'
       );
     }
   } else {
-    await buildRuntime();
+    await buildRuntime(/* opt_compiled */ true);
   }
 }
 
-function installPercy_() {
-  if (!argv.noyarn) {
-    installPackages(__dirname);
-  }
-
+/**
+ * Loads task-specific dependencies are returns an instance of BrowserFetcher.
+ *
+ * @return {!Promise<!puppeteer.BrowserFetcher>}
+ */
+async function loadBrowserFetcher_() {
   puppeteer = require('puppeteer');
-  percySnapshot = require('@percy/puppeteer').percySnapshot;
-}
+  percySnapshot = require('@percy/puppeteer');
+  Percy = require('@percy/core');
 
-function setupCleanup_() {
-  process.on('exit', cleanup_);
-  process.on('SIGINT', cleanup_);
-  process.on('uncaughtException', cleanup_);
-  process.on('unhandledRejection', cleanup_);
-}
-
-async function exitPercyAgent_() {
-  if (percyAgentProcess_ && !percyAgentProcess_.killed) {
-    let resolver;
-    const percyAgentExited_ = new Promise((resolverIn) => {
-      resolver = resolverIn;
-    });
-    percyAgentProcess_.on('exit', () => {
-      resolver();
-    });
-    // Explicitly exit the process by "Ctrl+C"-ing it.
-    await percyAgentProcess_.kill('SIGINT');
-    await percyAgentExited_;
-  }
-}
-
-async function cleanup_() {
-  if (browser_) {
-    await browser_.close();
+  const browserFetcher = puppeteer.createBrowserFetcher();
+  const chromiumRevisions = await browserFetcher.localRevisions();
+  if (chromiumRevisions.includes(PUPPETEER_CHROMIUM_REVISION)) {
+    log(
+      'info',
+      'Using Percy-compatible version of Chromium',
+      cyan(PUPPETEER_CHROMIUM_REVISION)
+    );
+  } else {
+    log(
+      'info',
+      'Percy-compatible version of Chromium',
+      cyan(PUPPETEER_CHROMIUM_REVISION),
+      'was not found. Downloading...'
+    );
+    await browserFetcher.download(
+      PUPPETEER_CHROMIUM_REVISION,
+      (/* downloadedBytes, totalBytes */) => {
+        // TODO(@ampproject/wg-infra): display download progress.
+        // Logging every call is too verbose.
+      }
+    );
   }
-  await stopServer();
-  await exitPercyAgent_();
+  return browserFetcher;
 }
 
 module.exports = {
@@ -809,21 +841,19 @@ module.exports = {
 
 visualDiff.description = 'Runs the AMP visual diff tests.';
 visualDiff.flags = {
-  'master': '  Includes a blank snapshot (baseline for skipped builds)',
-  'empty': '  Creates a dummy Percy build with only a blank snapshot',
+  'main': 'Includes a blank snapshot (baseline for skipped builds)',
+  'empty': 'Creates a dummy Percy build with only a blank snapshot',
   'config':
-    '  Sets the runtime\'s AMP_CONFIG to one of "prod" (default) or "canary"',
-  'chrome_debug': '  Prints debug info from Chrome',
-  'webserver_debug': '  Prints debug info from the local gulp webserver',
-  'percy_agent_debug': '  Prints debug info from the @percy/agent instance',
-  'debug': '  Sets all debugging flags',
-  'verbose': '  Prints verbose log statements',
-  'grep': '  Runs tests that match the pattern',
-  'percy_token': '  Override the PERCY_TOKEN environment variable',
-  'percy_branch': '  Override the PERCY_BRANCH environment variable',
+    'Sets the runtime\'s AMP_CONFIG to one of "prod" (default) or "canary"',
+  'chrome_debug': 'Prints debug info from Chrome',
+  'webserver_debug': 'Prints debug info from the local amp webserver',
+  'percy_agent_debug': 'Prints debug info from the @percy/agent instance',
+  'debug': 'Sets all debugging flags',
+  'verbose': 'Prints verbose log statements',
+  'grep': 'Runs tests that match the pattern',
+  'percy_token': 'Override the PERCY_TOKEN environment variable',
+  'percy_branch': 'Override the PERCY_BRANCH environment variable',
   'percy_disabled':
-    '  Disables Percy integration (for testing local changes only)',
-  'nobuild': '  Skip build',
-  'noyarn': '  Skip calling yarn to install dependencies',
-  'compiled': '  Runs tests against minified JS',
+    'Disables Percy integration (for testing local changes only)',
+  'nobuild': 'Skip build',
 };
diff --git a/build-system/tasks/visual-diff/package-lock.json b/build-system/tasks/visual-diff/package-lock.json
new file mode 100644
index 0000000000000..1628f71060a9e
--- /dev/null
+++ b/build-system/tasks/visual-diff/package-lock.json
@@ -0,0 +1,847 @@
+{
+  "name": "amp-visual-diff",
+  "version": "0.1.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+      "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.12.13"
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+      "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
+      "dev": true
+    },
+    "@babel/highlight": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
+      "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.14.0",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@percy/client": {
+      "version": "1.0.0-beta.51",
+      "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.0.0-beta.51.tgz",
+      "integrity": "sha512-CagH93J8RMOYDeEy1GnzYGdVosoMmgZ0+NZTLyflp7SvBLn4zKo+dk5t7urnOTP5Mh7xVXv/xpJQSdkmYZ2lFQ==",
+      "dev": true,
+      "requires": {
+        "@percy/env": "^1.0.0-beta.51"
+      }
+    },
+    "@percy/config": {
+      "version": "1.0.0-beta.51",
+      "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.0.0-beta.51.tgz",
+      "integrity": "sha512-ox6VWBg9PWEEQOcXRNs3pXfD34XUdvG/Uc9p5CAUrKWKXzhOJawtbxdcSJ5dF/8AcyPO0urBSNg2vz0HgX6QXQ==",
+      "dev": true,
+      "requires": {
+        "@percy/logger": "^1.0.0-beta.51",
+        "ajv": "^8.0.5",
+        "cosmiconfig": "^7.0.0",
+        "yaml": "^1.10.0"
+      },
+      "dependencies": {
+        "@percy/logger": {
+          "version": "1.0.0-beta.51",
+          "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.0.0-beta.51.tgz",
+          "integrity": "sha512-rurUk6TxXC+aQbOM561jQ63En3cE3t19uZPRzEpOuTqcFGzR2nWyrEmjkGfWMyCh987Ir6C+0HK2VryQ94hnSg==",
+          "dev": true
+        }
+      }
+    },
+    "@percy/core": {
+      "version": "1.0.0-beta.51",
+      "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.0.0-beta.51.tgz",
+      "integrity": "sha512-t4Fqc2dy1ZrnB7ROspXRD1FbL9VUaS0srB+xv3mjg9+b8D/pRHVNUZz6j4H5fwb3PnV6EBZQzU44A8ZhPavEHA==",
+      "dev": true,
+      "requires": {
+        "@percy/client": "^1.0.0-beta.51",
+        "@percy/config": "^1.0.0-beta.51",
+        "@percy/dom": "^1.0.0-beta.51",
+        "@percy/logger": "^1.0.0-beta.51",
+        "cross-spawn": "^7.0.3",
+        "extract-zip": "^2.0.1",
+        "progress": "^2.0.3",
+        "rimraf": "^3.0.2",
+        "ws": "^7.4.1"
+      },
+      "dependencies": {
+        "@percy/logger": {
+          "version": "1.0.0-beta.51",
+          "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.0.0-beta.51.tgz",
+          "integrity": "sha512-rurUk6TxXC+aQbOM561jQ63En3cE3t19uZPRzEpOuTqcFGzR2nWyrEmjkGfWMyCh987Ir6C+0HK2VryQ94hnSg==",
+          "dev": true
+        }
+      }
+    },
+    "@percy/dom": {
+      "version": "1.0.0-beta.51",
+      "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.0.0-beta.51.tgz",
+      "integrity": "sha512-9KDSo3DvzHoWvHdSpqGJuKgWBRuTAPi/vaPQtBNlxpHiu9MyeqNhWPbBzBWYIxbAXFACUq97w3SYKlqdJ66DLg==",
+      "dev": true
+    },
+    "@percy/env": {
+      "version": "1.0.0-beta.51",
+      "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.0.0-beta.51.tgz",
+      "integrity": "sha512-pAt+FH7IWvwlnuPvNfaZdX3/sRQPYyJaxJUdTwynZFuBteye1Rmtpd5ZSFJ0KqYAJuG+8BlEduAFtVRalMYXkw==",
+      "dev": true,
+      "requires": {
+        "dotenv": "^10.0.0"
+      }
+    },
+    "@percy/logger": {
+      "version": "1.0.0-beta.39",
+      "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.0.0-beta.39.tgz",
+      "integrity": "sha512-aEnKxCO3r9+bhxogIhJhxjh80QGImiIhbmik/oKCWNIc2KywATGRXsJvRmlF1DskA+RQcwzG/fENerSLNRycgQ==",
+      "dev": true
+    },
+    "@percy/puppeteer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@percy/puppeteer/-/puppeteer-2.0.0.tgz",
+      "integrity": "sha512-AAErUA1NEELBmOIscHBJB064+6x7N2ZIA9EisBfB6ff1HJK58t2x7VGRNQjGsXvq/RP0wrLzmUY3uSSb2gQhVQ==",
+      "dev": true,
+      "requires": {
+        "@percy/sdk-utils": "^1.0.0-beta.32"
+      }
+    },
+    "@percy/sdk-utils": {
+      "version": "1.0.0-beta.39",
+      "resolved": "https://registry.npmjs.org/@percy/sdk-utils/-/sdk-utils-1.0.0-beta.39.tgz",
+      "integrity": "sha512-/VdGp+2Q8g1NH/uBPhG/Txs16kuuUbo2mTos4yMAVCzjXFjIgdU8ydMhhss6hrbx5/cHHk9En+6EucIDoRdrig==",
+      "dev": true,
+      "requires": {
+        "@percy/logger": "^1.0.0-beta.39"
+      }
+    },
+    "@types/node": {
+      "version": "14.11.8",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.11.8.tgz",
+      "integrity": "sha512-KPcKqKm5UKDkaYPTuXSx8wEP7vE9GnuaXIZKijwRYcePpZFDVuy2a57LarFKiORbHOuTOOwYzxVxcUzsh2P2Pw==",
+      "dev": true,
+      "optional": true
+    },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
+    "@types/yauzl": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.1.tgz",
+      "integrity": "sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dev": true,
+      "requires": {
+        "debug": "4"
+      }
+    },
+    "ajv": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.5.0.tgz",
+      "integrity": "sha512-Y2l399Tt1AguU3BPRP9Fn4eN+Or+StUGWCUpbnFyXSo8NZ9S4uj+AG2pjs5apK+ZMOwYOz1+a+VKvKH7CudXgQ==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true
+    },
+    "bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "requires": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        }
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "requires": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "dev": true
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "dev": true
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "cosmiconfig": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
+      "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
+      "dev": true,
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      }
+    },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "debug": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
+      "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
+      "dev": true,
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "devtools-protocol": {
+      "version": "0.0.869402",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.869402.tgz",
+      "integrity": "sha512-VvlVYY+VDJe639yHs5PHISzdWTLL3Aw8rO4cvUtwvoxFd6FHbE4OpHHcde52M6096uYYazAmd4l0o5VuFRO2WA==",
+      "dev": true
+    },
+    "dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "dev": true
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "requires": {
+        "@types/yauzl": "^2.9.1",
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      }
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
+      "dev": true,
+      "requires": {
+        "pend": "~1.2.0"
+      }
+    },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "requires": {
+        "pump": "^3.0.0"
+      }
+    },
+    "glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "https-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
+      "dev": true,
+      "requires": {
+        "agent-base": "6",
+        "debug": "4"
+      }
+    },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true
+    },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      }
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+      "dev": true
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
+    "json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "lines-and-columns": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
+      "dev": true
+    },
+    "locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^4.1.0"
+      }
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.2.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      }
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
+      "dev": true
+    },
+    "pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "requires": {
+        "find-up": "^4.0.0"
+      }
+    },
+    "progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true
+    },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true
+    },
+    "puppeteer": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-9.1.1.tgz",
+      "integrity": "sha512-W+nOulP2tYd/ZG99WuZC/I5ljjQQ7EUw/jQGcIb9eu8mDlZxNY2SgcJXTLG9h5gRvqA3uJOe4hZXYsd3EqioMw==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.0",
+        "devtools-protocol": "0.0.869402",
+        "extract-zip": "^2.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "node-fetch": "^2.6.1",
+        "pkg-dir": "^4.2.0",
+        "progress": "^2.0.1",
+        "proxy-from-env": "^1.1.0",
+        "rimraf": "^3.0.2",
+        "tar-fs": "^2.0.0",
+        "unbzip2-stream": "^1.3.3",
+        "ws": "^7.2.3"
+      }
+    },
+    "readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      }
+    },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true
+    },
+    "resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true
+    },
+    "shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
+    },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "requires": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "dev": true,
+      "requires": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      }
+    },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "dev": true
+    },
+    "unbzip2-stream": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
+      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
+      "dev": true,
+      "requires": {
+        "buffer": "^5.2.1",
+        "through": "^2.3.8"
+      }
+    },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "ws": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.2.tgz",
+      "integrity": "sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA==",
+      "dev": true
+    },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true
+    },
+    "yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    }
+  }
+}
diff --git a/build-system/tasks/visual-diff/package.json b/build-system/tasks/visual-diff/package.json
index aeb709573e3d1..c61ed032b740b 100644
--- a/build-system/tasks/visual-diff/package.json
+++ b/build-system/tasks/visual-diff/package.json
@@ -1,14 +1,11 @@
 {
   "private": true,
-  "name": "gulp-visual-diff",
+  "name": "amp-visual-diff",
   "version": "0.1.0",
-  "description": "Gulp visual diff",
+  "description": "amp visual diff",
   "devDependencies": {
-    "@percy/agent": "0.26.9",
-    "@percy/puppeteer": "1.1.0",
-    "puppeteer": "3.3.0"
-  },
-  "resolutions": {
-    "**/**/minimist": "^1.2.3"
+    "@percy/core": "1.0.0-beta.51",
+    "@percy/puppeteer": "2.0.0",
+    "puppeteer": "9.1.1"
   }
 }
diff --git a/build-system/tasks/visual-diff/snippets/freeze-canvas-image.js b/build-system/tasks/visual-diff/snippets/freeze-canvas-image.js
new file mode 100644
index 0000000000000..a3a4cf974bd39
--- /dev/null
+++ b/build-system/tasks/visual-diff/snippets/freeze-canvas-image.js
@@ -0,0 +1,12 @@
+// This file is executed via Puppeteer's page.evaluate on a document to copy the
+// current image data of the canvas to an attribute so that it will be passed in the
+// snapshots to Percy.
+
+const canvases = document.querySelectorAll('canvas');
+canvases.forEach((canvas) => {
+  const img = document.createElement('img');
+  img.style.width = '100%';
+  img.style.height = '100%';
+  img.setAttribute('src', canvas.toDataURL());
+  canvas.replaceWith(img);
+});
diff --git a/build-system/tasks/visual-diff/snippets/iframe-wrapper.js b/build-system/tasks/visual-diff/snippets/iframe-wrapper.js
index 407c185aa9827..76cde536c349c 100644
--- a/build-system/tasks/visual-diff/snippets/iframe-wrapper.js
+++ b/build-system/tasks/visual-diff/snippets/iframe-wrapper.js
@@ -2,8 +2,16 @@
 // with an <iframe>, so that we can perform viewport-constrained visual diff
 // tests.
 
-// The texts __WIDTH__ and __HEIGHT__ will be replaced at execution time with
-// the viewport's size from the visual test's config.
+// The following strings will be replaced at execution time:
+// * __WIDTH__ and __HEIGHT__ with the viewport's size from the visual test's config.
+// * __PERCY_CSS__ with Percy-specific CSS.
+
+if ('__PERCY_CSS__' !== '__' + 'PERCY_CSS' + '__') {
+  const style = document.createElement('style');
+  style.setAttribute('data-percy-specific-css', '');
+  style.textContent = '__PERCY_CSS__';
+  document.body.appendChild(style);
+}
 
 const pageContents = document.documentElement.outerHTML;
 
diff --git a/build-system/tasks/visual-diff/snippets/snapshot-error.html b/build-system/tasks/visual-diff/snippets/snapshot-error.html
index ed37021b913cf..31dc4ec8735ef 100644
--- a/build-system/tasks/visual-diff/snippets/snapshot-error.html
+++ b/build-system/tasks/visual-diff/snippets/snapshot-error.html
@@ -18,7 +18,7 @@
 
 <body>
   <h1>Snapshot error in test <code>__TEST_NAME__</code></h1>
-  <p>Inspect the Travis logs for the full error message</p>
+  <p>Inspect the CI logs for the full error message</p>
   <div>__TEST_ERROR__</div>
   <h2>HTML Snapshot</h2>
   <div class="snapshot">__HTML_SNAPSHOT__</div>
diff --git a/build-system/tasks/visual-diff/yarn.lock b/build-system/tasks/visual-diff/yarn.lock
deleted file mode 100644
index 6e9885673bd02..0000000000000
--- a/build-system/tasks/visual-diff/yarn.lock
+++ /dev/null
@@ -1,2287 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@nodelib/fs.scandir@2.1.3":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
-  integrity sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==
-  dependencies:
-    "@nodelib/fs.stat" "2.0.3"
-    run-parallel "^1.1.9"
-
-"@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3"
-  integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==
-
-"@nodelib/fs.walk@^1.2.3":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz#011b9202a70a6366e436ca5c065844528ab04976"
-  integrity sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==
-  dependencies:
-    "@nodelib/fs.scandir" "2.1.3"
-    fastq "^1.6.0"
-
-"@oclif/color@^0.0.0":
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/@oclif/color/-/color-0.0.0.tgz#54939bbd16d1387511bf1a48ccda1a417248e6a9"
-  integrity sha512-KKd3W7eNwfNF061tr663oUNdt8EMnfuyf5Xv55SGWA1a0rjhWqS/32P7OeB7CbXcJUBdfVrPyR//1afaW12AWw==
-  dependencies:
-    ansi-styles "^3.2.1"
-    supports-color "^5.4.0"
-    tslib "^1"
-
-"@oclif/command@1.5.16":
-  version "1.5.16"
-  resolved "https://registry.yarnpkg.com/@oclif/command/-/command-1.5.16.tgz#88b578d37e981034303effbcbdd73c332a6f5543"
-  integrity sha512-bzqNz9/EblkohokXbico/14r05oRe8aa06S3MLEo4GlmyOce2abIOx1oZfUDl8ekQuKO+Ycw9Jco+hN2aL423A==
-  dependencies:
-    "@oclif/errors" "^1.2.2"
-    "@oclif/parser" "^3.7.3"
-    debug "^4.1.1"
-    semver "^5.6.0"
-
-"@oclif/command@1.5.19", "@oclif/command@^1.5.13", "@oclif/command@^1.5.3":
-  version "1.5.19"
-  resolved "https://registry.yarnpkg.com/@oclif/command/-/command-1.5.19.tgz#13f472450eb83bd6c6871a164c03eadb5e1a07ed"
-  integrity sha512-6+iaCMh/JXJaB2QWikqvGE9//wLEVYYwZd5sud8aLoLKog1Q75naZh2vlGVtg5Mq/NqpqGQvdIjJb3Bm+64AUQ==
-  dependencies:
-    "@oclif/config" "^1"
-    "@oclif/errors" "^1.2.2"
-    "@oclif/parser" "^3.8.3"
-    "@oclif/plugin-help" "^2"
-    debug "^4.1.1"
-    semver "^5.6.0"
-
-"@oclif/config@^1":
-  version "1.13.3"
-  resolved "https://registry.yarnpkg.com/@oclif/config/-/config-1.13.3.tgz#1b13e18d0e4242ddbd9cbd100f0eec819aa2bf8c"
-  integrity sha512-qs5XvGRw+1M41abOKCjd0uoeHCgsMxa2MurD2g2K8CtQlzlMXl0rW5idVeimIg5208LLuxkfzQo8TKAhhRCWLg==
-  dependencies:
-    "@oclif/parser" "^3.8.0"
-    debug "^4.1.1"
-    tslib "^1.9.3"
-
-"@oclif/errors@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@oclif/errors/-/errors-1.2.2.tgz#9d8f269b15f13d70aa93316fed7bebc24688edc2"
-  integrity sha512-Eq8BFuJUQcbAPVofDxwdE0bL14inIiwt5EaKRVY9ZDIG11jwdXZqiQEECJx0VfnLyUZdYfRd/znDI/MytdJoKg==
-  dependencies:
-    clean-stack "^1.3.0"
-    fs-extra "^7.0.0"
-    indent-string "^3.2.0"
-    strip-ansi "^5.0.0"
-    wrap-ansi "^4.0.0"
-
-"@oclif/linewrap@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@oclif/linewrap/-/linewrap-1.0.0.tgz#aedcb64b479d4db7be24196384897b5000901d91"
-  integrity sha512-Ups2dShK52xXa8w6iBWLgcjPJWjais6KPJQq3gQ/88AY6BXoTX+MIGFPrWQO1KLMiQfoTpcLnUwloN4brrVUHw==
-
-"@oclif/parser@^3.7.3", "@oclif/parser@^3.8.0", "@oclif/parser@^3.8.3":
-  version "3.8.4"
-  resolved "https://registry.yarnpkg.com/@oclif/parser/-/parser-3.8.4.tgz#1a90fc770a42792e574fb896325618aebbe8c9e4"
-  integrity sha512-cyP1at3l42kQHZtqDS3KfTeyMvxITGwXwH1qk9ktBYvqgMp5h4vHT+cOD74ld3RqJUOZY/+Zi9lb4Tbza3BtuA==
-  dependencies:
-    "@oclif/linewrap" "^1.0.0"
-    chalk "^2.4.2"
-    tslib "^1.9.3"
-
-"@oclif/plugin-help@^2":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@oclif/plugin-help/-/plugin-help-2.2.1.tgz#cb4d23e453b19340b07c48fb299948b7c74366d3"
-  integrity sha512-psEA3t41MSGBErLk6xCaAq2jKrRtx3Br+kHpd43vZeGEeZ7Gos4wgK0JAaHBbvhvUQskCHg8dzoqv4XEeTWeVQ==
-  dependencies:
-    "@oclif/command" "^1.5.13"
-    chalk "^2.4.1"
-    indent-string "^3.2.0"
-    lodash.template "^4.4.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
-    widest-line "^2.0.1"
-    wrap-ansi "^4.0.0"
-
-"@oclif/plugin-not-found@^1.2":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@oclif/plugin-not-found/-/plugin-not-found-1.2.3.tgz#00f9e7a0a793a5e2f616d8280075f4592de8f079"
-  integrity sha512-Igbw2T4gLrb/f28Llr730FeMXBSI2PXdky2YvQfsZeQGDsyBZmC4gprJJtmrMWQcjz0B51IInRBnZYERvwfIpw==
-  dependencies:
-    "@oclif/color" "^0.0.0"
-    "@oclif/command" "^1.5.3"
-    cli-ux "^4.9.0"
-    fast-levenshtein "^2.0.6"
-    lodash "^4.17.13"
-
-"@oclif/screen@^1.0.3":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@oclif/screen/-/screen-1.0.4.tgz#b740f68609dfae8aa71c3a6cab15d816407ba493"
-  integrity sha512-60CHpq+eqnTxLZQ4PGHYNwUX572hgpMHGPtTWMjdTMsAvlm69lZV/4ly6O3sAYkomo4NggGcomrDpBe34rxUqw==
-
-"@percy/agent@0.26.9":
-  version "0.26.9"
-  resolved "https://registry.yarnpkg.com/@percy/agent/-/agent-0.26.9.tgz#4bf0cef39820957d0f2a04d98d2f061dc1fa5649"
-  integrity sha512-wsKFK/ZJBO+O95UEfiryzLm6zyNg9rOBGF2B8zuTrDGzTyWy6xp1S6CBYvqH32VayXz05b+s8GeooIiHFQdyPA==
-  dependencies:
-    "@oclif/command" "1.5.19"
-    "@oclif/config" "^1"
-    "@oclif/plugin-help" "^2"
-    "@oclif/plugin-not-found" "^1.2"
-    axios "^0.19.0"
-    body-parser "^1.18.3"
-    colors "^1.3.2"
-    cors "^2.8.4"
-    cosmiconfig "^5.2.1"
-    cross-spawn "^7.0.2"
-    deepmerge "^4.0.0"
-    express "^4.16.3"
-    follow-redirects "1.9.0"
-    generic-pool "^3.7.1"
-    globby "^10.0.1"
-    image-size "^0.8.2"
-    js-yaml "^3.13.1"
-    percy-client "^3.2.0"
-    puppeteer "^3.3.0"
-    retry-axios "^1.0.1"
-    which "^2.0.1"
-    winston "^3.0.0"
-
-"@percy/agent@~0":
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/@percy/agent/-/agent-0.19.1.tgz#83ee56836ac701b41a9df8b14de56373d89a038d"
-  integrity sha512-3X/0AkAyoKP9Nehz5fJae4qFn3t/Pb7jKhj9aJGlMRt6GxNtKS6cYMJtv+LLFu7y2PUeur5phmUNZTUVI0ln8Q==
-  dependencies:
-    "@oclif/command" "1.5.16"
-    "@oclif/config" "^1"
-    "@oclif/plugin-help" "^2"
-    "@oclif/plugin-not-found" "^1.2"
-    axios "^0.18.1"
-    body-parser "^1.18.3"
-    colors "^1.3.2"
-    cors "^2.8.4"
-    cosmiconfig "^5.2.1"
-    cross-spawn "^6.0.5"
-    deepmerge "^4.0.0"
-    express "^4.16.3"
-    follow-redirects "^1.9.0"
-    generic-pool "^3.7.1"
-    globby "^10.0.1"
-    image-size "^0.8.2"
-    js-yaml "^3.13.1"
-    percy-client "^3.1.0"
-    puppeteer "^1.13.0"
-    retry-axios "^1.0.1"
-    winston "^3.0.0"
-
-"@percy/puppeteer@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@percy/puppeteer/-/puppeteer-1.1.0.tgz#3b055cd4931865f131b3b525be5971ec4a7c8012"
-  integrity sha512-ndQDSC4UYE0WrK+6e14xpuz4FktSG2FwiQJ7n68QVm4TcgetdeXkgcAn1xtwvDbLpEcMyzcQEPBJMOMNf7Nfdg==
-  dependencies:
-    "@percy/agent" "~0"
-
-"@types/events@*":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
-  integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
-
-"@types/glob@^7.1.1":
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
-  integrity sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==
-  dependencies:
-    "@types/events" "*"
-    "@types/minimatch" "*"
-    "@types/node" "*"
-
-"@types/minimatch@*":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
-  integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
-
-"@types/node@*":
-  version "12.11.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.11.2.tgz#75ba3beda30d690b89a5089ca1c6e8e386150b76"
-  integrity sha512-dsfE4BHJkLQW+reOS6b17xhZ/6FB1rB8eRRvO08nn5o+voxf3i74tuyFWNH6djdfgX7Sm5s6LD8t6mJug4dpDw==
-
-"@types/yauzl@^2.9.1":
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.1.tgz#d10f69f9f522eef3cf98e30afb684a1e1ec923af"
-  integrity sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==
-  dependencies:
-    "@types/node" "*"
-
-accepts@~1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
-  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
-  dependencies:
-    mime-types "~2.1.24"
-    negotiator "0.6.2"
-
-agent-base@5:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
-  integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
-
-agent-base@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
-  integrity sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==
-  dependencies:
-    es6-promisify "^5.0.0"
-
-ajv@^6.5.5:
-  version "6.5.5"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.5.5.tgz#cf97cdade71c6399a92c6d6c4177381291b781a1"
-  integrity sha512-7q7gtRQDJSyuEHjuVgHoUa2VuemFiCMrfQc9Tc08XTAc4Zj/5U1buQJ0HU6i7fKjXU09SVgSmxa4sLvuvS8Iyg==
-  dependencies:
-    fast-deep-equal "^2.0.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
-
-ansi-escapes@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
-  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
-
-ansi-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
-  integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
-
-ansi-regex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
-  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
-
-ansi-styles@^3.2.0, ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
-ansicolors@~0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.3.2.tgz#665597de86a9ffe3aa9bfbe6cae5c6ea426b4979"
-  integrity sha1-ZlWX3oap/+Oqm/vmyuXG6kJrSXk=
-
-argparse@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
-  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
-  dependencies:
-    sprintf-js "~1.0.2"
-
-array-flatten@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
-  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
-
-array-union@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
-  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
-
-asn1@~0.2.3:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
-  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
-  dependencies:
-    safer-buffer "~2.1.0"
-
-assert-plus@1.0.0, assert-plus@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
-  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
-
-async-limiter@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
-  integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==
-
-async@^2.6.1:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
-  dependencies:
-    lodash "^4.17.14"
-
-asynckit@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
-  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
-
-aws-sign2@~0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
-  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
-
-aws4@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
-  integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
-
-axios@^0.18.1:
-  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.1.tgz#ff3f0de2e7b5d180e757ad98000f1081b87bcea3"
-  integrity sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==
-  dependencies:
-    follow-redirects "1.5.10"
-    is-buffer "^2.0.2"
-
-axios@^0.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
-  integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==
-  dependencies:
-    follow-redirects "1.5.10"
-    is-buffer "^2.0.2"
-
-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
-
-base64-js@^1.0.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
-  integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
-
-base64-js@^1.2.3:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
-  integrity sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==
-
-bcrypt-pbkdf@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
-  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
-  dependencies:
-    tweetnacl "^0.14.3"
-
-bl@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.2.tgz#52b71e9088515d0606d9dd9cc7aa48dc1f98e73a"
-  integrity sha512-j4OH8f6Qg2bGuWfRiltT2HYGx0e1QcBTrK9KAHNMwMZdQnDZFk0ZSYIpADjYCB3U12nicC5tVJwSIhwOWjb4RQ==
-  dependencies:
-    buffer "^5.5.0"
-    inherits "^2.0.4"
-    readable-stream "^3.4.0"
-
-bluebird-retry@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/bluebird-retry/-/bluebird-retry-0.11.0.tgz#1289ab22cbbc3a02587baad35595351dd0c1c047"
-  integrity sha1-EomrIsu8OgJYe6rTVZU1HdDBwEc=
-
-bluebird@^3.5.0, bluebird@^3.5.1:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
-  integrity sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==
-
-body-parser@1.19.0, body-parser@^1.18.3:
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
-  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
-  dependencies:
-    bytes "3.1.0"
-    content-type "~1.0.4"
-    debug "2.6.9"
-    depd "~1.1.2"
-    http-errors "1.7.2"
-    iconv-lite "0.4.24"
-    on-finished "~2.3.0"
-    qs "6.7.0"
-    raw-body "2.4.0"
-    type-is "~1.6.17"
-
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-braces@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
-  dependencies:
-    fill-range "^7.0.1"
-
-buffer-crc32@~0.2.3:
-  version "0.2.13"
-  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
-  integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
-
-buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
-
-buffer@^5.2.1, buffer@^5.5.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
-  integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-
-bytes@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
-  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
-
-caller-callsite@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
-  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
-  dependencies:
-    callsites "^2.0.0"
-
-caller-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
-  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
-  dependencies:
-    caller-callsite "^2.0.0"
-
-callsites@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
-  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
-
-cardinal@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/cardinal/-/cardinal-2.1.1.tgz#7cc1055d822d212954d07b085dea251cc7bc5505"
-  integrity sha1-fMEFXYItISlU0HsIXeolHMe8VQU=
-  dependencies:
-    ansicolors "~0.3.2"
-    redeyed "~2.1.0"
-
-caseless@~0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
-  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
-
-chalk@^2.4.1, chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-chownr@^1.1.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
-  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
-
-clean-stack@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-1.3.0.tgz#9e821501ae979986c46b1d66d2d432db2fd4ae31"
-  integrity sha1-noIVAa6XmYbEax1m0tQy2y/UrjE=
-
-clean-stack@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
-  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
-
-cli-ux@^4.9.0:
-  version "4.9.3"
-  resolved "https://registry.yarnpkg.com/cli-ux/-/cli-ux-4.9.3.tgz#4c3e070c1ea23eef010bbdb041192e0661be84ce"
-  integrity sha512-/1owvF0SZ5Gn54cgrikJ0QskgTzeg30HGjkmjFoaHDJzAqFpuX1DBpFR8aLvsE1J5s9MgeYRENQK4BFwOag5VA==
-  dependencies:
-    "@oclif/errors" "^1.2.2"
-    "@oclif/linewrap" "^1.0.0"
-    "@oclif/screen" "^1.0.3"
-    ansi-escapes "^3.1.0"
-    ansi-styles "^3.2.1"
-    cardinal "^2.1.1"
-    chalk "^2.4.1"
-    clean-stack "^2.0.0"
-    extract-stack "^1.0.0"
-    fs-extra "^7.0.0"
-    hyperlinker "^1.0.0"
-    indent-string "^3.2.0"
-    is-wsl "^1.1.0"
-    lodash "^4.17.11"
-    password-prompt "^1.0.7"
-    semver "^5.6.0"
-    strip-ansi "^5.0.0"
-    supports-color "^5.5.0"
-    supports-hyperlinks "^1.0.1"
-    treeify "^1.1.0"
-    tslib "^1.9.3"
-
-color-convert@^1.9.0, color-convert@^1.9.1:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-color-name@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
-color-string@^1.5.2:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
-  integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color@3.0.x:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/color/-/color-3.0.0.tgz#d920b4328d534a3ac8295d68f7bd4ba6c427be9a"
-  integrity sha512-jCpd5+s0s0t7p3pHQKpnJ0TpQKKdleP71LWcA0aqiljpiuAkOSUFN/dyH8ZwF0hRmFlrIuRhufds1QyEP9EB+w==
-  dependencies:
-    color-convert "^1.9.1"
-    color-string "^1.5.2"
-
-colornames@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/colornames/-/colornames-1.1.1.tgz#f8889030685c7c4ff9e2a559f5077eb76a816f96"
-  integrity sha1-+IiQMGhcfE/54qVZ9Qd+t2qBb5Y=
-
-colors@^1.2.1, colors@^1.3.2:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
-  integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
-
-colorspace@1.1.x:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/colorspace/-/colorspace-1.1.2.tgz#e0128950d082b86a2168580796a0aa5d6c68d8c5"
-  integrity sha512-vt+OoIP2d76xLhjwbBaucYlNSpPsrJWPlBTtwCpQKIu6/CSMutyzX93O/Do0qzpH3YoHEes8YEFXyZ797rEhzQ==
-  dependencies:
-    color "3.0.x"
-    text-hex "1.0.x"
-
-combined-stream@^1.0.6, combined-stream@~1.0.6:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.7.tgz#2d1d24317afb8abe95d6d2c0b07b57813539d828"
-  integrity sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==
-  dependencies:
-    delayed-stream "~1.0.0"
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-concat-stream@1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
-  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
-  dependencies:
-    buffer-from "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
-
-content-disposition@0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
-  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
-  dependencies:
-    safe-buffer "5.1.2"
-
-content-type@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
-  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
-
-cookie-signature@1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
-  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
-
-cookie@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
-  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
-
-core-util-is@1.0.2, core-util-is@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
-cors@^2.8.4:
-  version "2.8.5"
-  resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
-  integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
-  dependencies:
-    object-assign "^4"
-    vary "^1"
-
-cosmiconfig@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
-  integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
-  dependencies:
-    import-fresh "^2.0.0"
-    is-directory "^0.3.1"
-    js-yaml "^3.13.1"
-    parse-json "^4.0.0"
-
-cross-spawn@^6.0.5:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
-  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
-  dependencies:
-    nice-try "^1.0.4"
-    path-key "^2.0.1"
-    semver "^5.5.0"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
-cross-spawn@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.2.tgz#d0d7dcfa74e89115c7619f4f721a94e1fdb716d6"
-  integrity sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==
-  dependencies:
-    path-key "^3.1.0"
-    shebang-command "^2.0.0"
-    which "^2.0.1"
-
-dashdash@^1.12.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
-  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
-  dependencies:
-    assert-plus "^1.0.0"
-
-debug@2.6.9:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
-  dependencies:
-    ms "2.0.0"
-
-debug@4, debug@^4.1.0, debug@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
-  dependencies:
-    ms "^2.1.1"
-
-debug@=3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
-  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
-  dependencies:
-    ms "2.0.0"
-
-debug@^3.0.0, debug@^3.1.0:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
-  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
-  dependencies:
-    ms "^2.1.1"
-
-deepmerge@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.0.tgz#77a97af6746882cd1ed85d4b925be8cd4120b630"
-  integrity sha512-/pED+kD8V9n15L1lon8DXEiWLQMW4tTiegn1kIWIQ+DBudOkFitz1cfjWQiSeKMPBQOknT3LpueyAmMVJ1Ho2g==
-
-delayed-stream@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
-  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
-
-depd@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
-  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
-
-destroy@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
-  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
-
-diagnostics@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/diagnostics/-/diagnostics-1.1.1.tgz#cab6ac33df70c9d9a727490ae43ac995a769b22a"
-  integrity sha512-8wn1PmdunLJ9Tqbx+Fx/ZEuHfJf4NKSN2ZBj7SJC/OWRWha843+WsTjqMe1B5E3p28jqBlp+mJ2fPVxPyNgYKQ==
-  dependencies:
-    colorspace "1.1.x"
-    enabled "1.0.x"
-    kuler "1.0.x"
-
-dir-glob@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
-  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
-  dependencies:
-    path-type "^4.0.0"
-
-dotenv@^8.1.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
-  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
-
-ecc-jsbn@~0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
-  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
-  dependencies:
-    jsbn "~0.1.0"
-    safer-buffer "^2.1.0"
-
-ee-first@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
-  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
-
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
-  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
-
-enabled@1.0.x:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/enabled/-/enabled-1.0.2.tgz#965f6513d2c2d1c5f4652b64a2e3396467fc2f93"
-  integrity sha1-ll9lE9LC0cX0ZStkouM5ZGf8L5M=
-  dependencies:
-    env-variable "0.0.x"
-
-encodeurl@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
-  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
-
-end-of-stream@^1.1.0, end-of-stream@^1.4.1:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
-  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
-  dependencies:
-    once "^1.4.0"
-
-env-variable@0.0.x:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/env-variable/-/env-variable-0.0.5.tgz#913dd830bef11e96a039c038d4130604eba37f88"
-  integrity sha512-zoB603vQReOFvTg5xMl9I1P2PnHsHQQKTEowsKKD7nseUfJq6UWzK+4YtlWUO1nhiQUxe6XMkk+JleSZD1NZFA==
-
-error-ex@^1.3.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
-  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
-  dependencies:
-    is-arrayish "^0.2.1"
-
-es6-promise-pool@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/es6-promise-pool/-/es6-promise-pool-2.5.0.tgz#147c612b36b47f105027f9d2bf54a598a99d9ccb"
-  integrity sha1-FHxhKza0fxBQJ/nSv1SlmKmdnMs=
-
-es6-promise@^4.0.3:
-  version "4.2.5"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.5.tgz#da6d0d5692efb461e082c14817fe2427d8f5d054"
-  integrity sha512-n6wvpdE43VFtJq+lUDYDBFUwV8TZbuGXLV4D6wKafg13ldznKsyEvatubnmUe31zcvelSzOHF+XbaT+Bl9ObDg==
-
-es6-promisify@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
-  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
-  dependencies:
-    es6-promise "^4.0.3"
-
-escape-html@~1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
-  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
-
-escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-esprima@^4.0.0, esprima@~4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
-  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
-
-etag@~1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
-  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
-
-express@^4.16.3:
-  version "4.17.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
-  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
-  dependencies:
-    accepts "~1.3.7"
-    array-flatten "1.1.1"
-    body-parser "1.19.0"
-    content-disposition "0.5.3"
-    content-type "~1.0.4"
-    cookie "0.4.0"
-    cookie-signature "1.0.6"
-    debug "2.6.9"
-    depd "~1.1.2"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    finalhandler "~1.1.2"
-    fresh "0.5.2"
-    merge-descriptors "1.0.1"
-    methods "~1.1.2"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    path-to-regexp "0.1.7"
-    proxy-addr "~2.0.5"
-    qs "6.7.0"
-    range-parser "~1.2.1"
-    safe-buffer "5.1.2"
-    send "0.17.1"
-    serve-static "1.14.1"
-    setprototypeof "1.1.1"
-    statuses "~1.5.0"
-    type-is "~1.6.18"
-    utils-merge "1.0.1"
-    vary "~1.1.2"
-
-extend@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
-  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
-
-extract-stack@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/extract-stack/-/extract-stack-1.0.0.tgz#b97acaf9441eea2332529624b732fc5a1c8165fa"
-  integrity sha1-uXrK+UQe6iMyUpYktzL8WhyBZfo=
-
-extract-zip@^1.6.6:
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.7.tgz#a840b4b8af6403264c8db57f4f1a74333ef81fe9"
-  integrity sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=
-  dependencies:
-    concat-stream "1.6.2"
-    debug "2.6.9"
-    mkdirp "0.5.1"
-    yauzl "2.4.1"
-
-extract-zip@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.0.tgz#f53b71d44f4ff5a4527a2259ade000fb8b303492"
-  integrity sha512-i42GQ498yibjdvIhivUsRslx608whtGoFIhF26Z7O4MYncBxp8CwalOs1lnHy21A9sIohWO2+uiE4SRtC9JXDg==
-  dependencies:
-    debug "^4.1.1"
-    get-stream "^5.1.0"
-    yauzl "^2.10.0"
-  optionalDependencies:
-    "@types/yauzl" "^2.9.1"
-
-extsprintf@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
-  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
-
-extsprintf@^1.2.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
-  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
-
-fast-deep-equal@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
-  integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
-
-fast-glob@^3.0.3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.1.0.tgz#77375a7e3e6f6fc9b18f061cddd28b8d1eec75ae"
-  integrity sha512-TrUz3THiq2Vy3bjfQUB2wNyPdGBeGmdjbzzBLhfHN4YFurYptCKwGq/TfiRavbGywFRzY6U2CdmQ1zmsY5yYaw==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.0"
-    merge2 "^1.3.0"
-    micromatch "^4.0.2"
-
-fast-json-stable-stringify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
-  integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
-
-fast-levenshtein@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
-  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
-
-fast-safe-stringify@^2.0.4:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.0.7.tgz#124aa885899261f68aedb42a7c080de9da608743"
-  integrity sha512-Utm6CdzT+6xsDk2m8S6uL8VHxNwI6Jub+e9NYTcAms28T84pTa25GJQV9j0CY0N1rM8hK4x6grpF2BQf+2qwVA==
-
-fastq@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.6.0.tgz#4ec8a38f4ac25f21492673adb7eae9cfef47d1c2"
-  integrity sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==
-  dependencies:
-    reusify "^1.0.0"
-
-fd-slicer@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
-  integrity sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=
-  dependencies:
-    pend "~1.2.0"
-
-fd-slicer@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
-  integrity sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=
-  dependencies:
-    pend "~1.2.0"
-
-fecha@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/fecha/-/fecha-2.3.3.tgz#948e74157df1a32fd1b12c3a3c3cdcb6ec9d96cd"
-  integrity sha512-lUGBnIamTAwk4znq5BcqsDaxSmZ9nDVJaij6NvRt/Tg4R69gERA+otPKbS86ROw9nxVMw2/mp1fnaiWqbs6Sdg==
-
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
-  dependencies:
-    to-regex-range "^5.0.1"
-
-finalhandler@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
-  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
-  dependencies:
-    debug "2.6.9"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    statuses "~1.5.0"
-    unpipe "~1.0.0"
-
-follow-redirects@1.5.10:
-  version "1.5.10"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
-  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
-  dependencies:
-    debug "=3.1.0"
-
-follow-redirects@1.9.0, follow-redirects@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.9.0.tgz#8d5bcdc65b7108fe1508649c79c12d732dcedb4f"
-  integrity sha512-CRcPzsSIbXyVDl0QI01muNDu69S8trU4jArW9LpOt2WtC6LyUJetcIrmfHsRBx7/Jb6GHJUiuqyYxPooFfNt6A==
-  dependencies:
-    debug "^3.0.0"
-
-foreachasync@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/foreachasync/-/foreachasync-3.0.0.tgz#5502987dc8714be3392097f32e0071c9dee07cf6"
-  integrity sha1-VQKYfchxS+M5IJfzLgBxyd7gfPY=
-
-forever-agent@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
-  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
-
-form-data@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
-  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "^1.0.6"
-    mime-types "^2.1.12"
-
-forwarded@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
-  integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
-
-fresh@0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
-  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
-
-fs-constants@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
-  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
-
-fs-extra@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
-  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
-
-generic-pool@^3.7.1:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/generic-pool/-/generic-pool-3.7.1.tgz#36fe5bb83e7e0e032e5d32cd05dc00f5ff119aa8"
-  integrity sha512-ug6DAZoNgWm6q5KhPFA+hzXfBLFQu5sTXxPpv44DmE0A2g+CiHoq9LTVdkXpZMkYVMoGw83F6W+WT0h0MFMK/w==
-
-get-stream@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.1.0.tgz#01203cdc92597f9b909067c3e656cc1f4d3c4dc9"
-  integrity sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==
-  dependencies:
-    pump "^3.0.0"
-
-getpass@^0.1.1:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
-  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
-  dependencies:
-    assert-plus "^1.0.0"
-
-glob-parent@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.0.tgz#5f4c1d1e748d30cd73ad2944b3577a81b081e8c2"
-  integrity sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==
-  dependencies:
-    is-glob "^4.0.1"
-
-glob@^7.0.5:
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
-  integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@^7.1.3:
-  version "7.1.5"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.5.tgz#6714c69bee20f3c3e64c4dd905553e532b40cdc0"
-  integrity sha512-J9dlskqUXK1OeTOYBEn5s8aMukWMwWfs+rPTn/jn50Ux4MNXVhubL1wu/j2t+H4NVI+cXEcCaYellqaPVGXNqQ==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-globby@^10.0.1:
-  version "10.0.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.1.tgz#4782c34cb75dd683351335c5829cc3420e606b22"
-  integrity sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==
-  dependencies:
-    "@types/glob" "^7.1.1"
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.0.3"
-    glob "^7.1.3"
-    ignore "^5.1.1"
-    merge2 "^1.2.3"
-    slash "^3.0.0"
-
-graceful-fs@^4.1.2, graceful-fs@^4.1.6:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
-  integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
-
-har-schema@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
-  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
-
-har-validator@~5.1.0:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
-  integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==
-  dependencies:
-    ajv "^6.5.5"
-    har-schema "^2.0.0"
-
-has-flag@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
-  integrity sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=
-
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-http-errors@1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
-  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
-http-errors@~1.7.2:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
-  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.4"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
-http-signature@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
-  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
-  dependencies:
-    assert-plus "^1.0.0"
-    jsprim "^1.2.2"
-    sshpk "^1.7.0"
-
-https-proxy-agent@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz#51552970fa04d723e04c56d04178c3f92592bbc0"
-  integrity sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==
-  dependencies:
-    agent-base "^4.1.0"
-    debug "^3.1.0"
-
-https-proxy-agent@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz#702b71fb5520a132a66de1f67541d9e62154d82b"
-  integrity sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==
-  dependencies:
-    agent-base "5"
-    debug "4"
-
-hyperlinker@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hyperlinker/-/hyperlinker-1.0.0.tgz#23dc9e38a206b208ee49bc2d6c8ef47027df0c0e"
-  integrity sha512-Ty8UblRWFEcfSuIaajM34LdPXIhbs1ajEX/BBPv24J+enSVaEVY63xQ6lTO9VRYS5LAoghIG0IDJ+p+IPzKUQQ==
-
-iconv-lite@0.4.24:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
-  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
-ieee754@^1.1.4:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
-  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
-
-ignore@^5.1.1:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.4.tgz#84b7b3dbe64552b6ef0eca99f6743dbec6d97adf"
-  integrity sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==
-
-image-size@^0.8.2:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.8.3.tgz#f0b568857e034f29baffd37013587f2c0cad8b46"
-  integrity sha512-SMtq1AJ+aqHB45c3FsB4ERK0UCiA2d3H1uq8s+8T0Pf8A3W4teyBQyaFaktH6xvZqh+npwlKU7i4fJo0r7TYTg==
-  dependencies:
-    queue "6.0.1"
-
-import-fresh@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
-  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
-  dependencies:
-    caller-path "^2.0.0"
-    resolve-from "^3.0.0"
-
-indent-string@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
-  integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2, inherits@2.0.3, inherits@^2.0.3, inherits@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
-
-inherits@2.0.4, inherits@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-ipaddr.js@1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
-  integrity sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==
-
-is-arrayish@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
-  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
-
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
-
-is-buffer@^2.0.2:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
-  integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
-
-is-directory@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
-  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
-
-is-extglob@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
-
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
-
-is-glob@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
-  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
-  dependencies:
-    is-extglob "^2.1.1"
-
-is-number@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
-  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
-
-is-stream@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
-
-is-typedarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
-  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
-
-is-wsl@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
-  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
-
-isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
-
-isexe@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
-  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
-
-isstream@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
-  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
-
-js-yaml@^3.13.1:
-  version "3.13.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
-  integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
-jsbn@~0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
-  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
-
-json-parse-better-errors@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
-  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
-
-json-schema-traverse@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
-  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
-
-json-schema@0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
-  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
-
-json-stringify-safe@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
-  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
-
-jsonfile@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
-  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-jsprim@^1.2.2:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
-  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
-  dependencies:
-    assert-plus "1.0.0"
-    extsprintf "1.3.0"
-    json-schema "0.2.3"
-    verror "1.10.0"
-
-jssha@^2.1.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/jssha/-/jssha-2.3.1.tgz#147b2125369035ca4b2f7d210dc539f009b3de9a"
-  integrity sha1-FHshJTaQNcpLL30hDcU58Amz3po=
-
-kuler@1.0.x:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/kuler/-/kuler-1.0.1.tgz#ef7c784f36c9fb6e16dd3150d152677b2b0228a6"
-  integrity sha512-J9nVUucG1p/skKul6DU3PUZrhs0LPulNaeUOox0IyXDi8S4CztTHs1gQphhuZmzXG7VOQSf6NJfKuzteQLv9gQ==
-  dependencies:
-    colornames "^1.1.1"
-
-lodash._reinterpolate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
-  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
-
-lodash.template@^4.4.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
-  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-    lodash.templatesettings "^4.0.0"
-
-lodash.templatesettings@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
-  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-
-lodash@^4.13.1, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
-logform@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/logform/-/logform-2.1.2.tgz#957155ebeb67a13164069825ce67ddb5bb2dd360"
-  integrity sha512-+lZh4OpERDBLqjiwDLpAWNQu6KMjnlXH2ByZwCuSqVPJletw0kTWJf5CgSNAUKn1KUkv3m2cUz/LK8zyEy7wzQ==
-  dependencies:
-    colors "^1.2.1"
-    fast-safe-stringify "^2.0.4"
-    fecha "^2.3.3"
-    ms "^2.1.1"
-    triple-beam "^1.3.0"
-
-media-typer@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
-  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
-
-merge-descriptors@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
-  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
-
-merge2@^1.2.3, merge2@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.3.0.tgz#5b366ee83b2f1582c48f87e47cf1a9352103ca81"
-  integrity sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==
-
-methods@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
-  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
-
-micromatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
-  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
-  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.0.5"
-
-mime-db@1.40.0:
-  version "1.40.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32"
-  integrity sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==
-
-mime-db@~1.37.0:
-  version "1.37.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.37.0.tgz#0b6a0ce6fdbe9576e25f1f2d2fde8830dc0ad0d8"
-  integrity sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==
-
-mime-types@^2.1.12, mime-types@~2.1.19:
-  version "2.1.21"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.21.tgz#28995aa1ecb770742fe6ae7e58f9181c744b3f96"
-  integrity sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==
-  dependencies:
-    mime-db "~1.37.0"
-
-mime-types@~2.1.24:
-  version "2.1.24"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
-  integrity sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==
-  dependencies:
-    mime-db "1.40.0"
-
-mime@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
-  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
-
-mime@^2.0.3:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.3.1.tgz#b1621c54d63b97c47d3cfe7f7215f7d64517c369"
-  integrity sha512-OEUllcVoydBHGN1z84yfQDimn58pZNNNXgZlHXSboxMlFvgI6MXSWpWKpFRra7H1HxpVhHTkrghfRW49k6yjeg==
-
-minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-minimist@0.0.8, minimist@^1.2.3:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
-
-mkdirp-classic@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.2.tgz#54c441ce4c96cd7790e10b41a87aa51068ecab2b"
-  integrity sha512-ejdnDQcR75gwknmMw/tx02AuRs8jCtqFoFqDZMjiNxsu85sRIJVXDKHuLYvUUPRBUtV2FpSZa9bL1BUa3BdR2g==
-
-mkdirp@0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
-  integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
-  dependencies:
-    minimist "0.0.8"
-
-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
-  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
-
-ms@2.1.1, ms@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
-  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
-
-negotiator@0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
-  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
-
-nice-try@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
-  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
-
-oauth-sign@~0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
-  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
-
-object-assign@^4:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
-on-finished@~2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
-  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
-  dependencies:
-    ee-first "1.1.1"
-
-once@^1.3.0, once@^1.3.1, once@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
-  dependencies:
-    wrappy "1"
-
-one-time@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/one-time/-/one-time-0.0.4.tgz#f8cdf77884826fe4dff93e3a9cc37b1e4480742e"
-  integrity sha1-+M33eISCb+Tf+T46nMN7HkSAdC4=
-
-parse-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
-  dependencies:
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-
-parseurl@~1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
-  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
-
-password-prompt@^1.0.7:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/password-prompt/-/password-prompt-1.1.2.tgz#85b2f93896c5bd9e9f2d6ff0627fa5af3dc00923"
-  integrity sha512-bpuBhROdrhuN3E7G/koAju0WjVw9/uQOG5Co5mokNj0MiOSBVZS1JTwM4zl55hu0WFmIEFvO9cU9sJQiBIYeIA==
-  dependencies:
-    ansi-escapes "^3.1.0"
-    cross-spawn "^6.0.5"
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-path-key@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
-  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
-
-path-key@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
-  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
-
-path-to-regexp@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
-
-path-type@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
-  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
-
-pend@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
-  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
-
-percy-client@^3.1.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/percy-client/-/percy-client-3.2.1.tgz#42c265fcca6b9bf8eccfc53a793098286d363a95"
-  integrity sha512-xnoLe1QNT5Y/1PEZqKdES9aOtvd1TyyaVdKPbq1sWh1ORLFhgPte3Yg9+vnmUyjplDsHEev32tzmEAx2PMMbOw==
-  dependencies:
-    base64-js "^1.2.3"
-    bluebird "^3.5.1"
-    bluebird-retry "^0.11.0"
-    dotenv "^8.1.0"
-    es6-promise-pool "^2.5.0"
-    jssha "^2.1.0"
-    regenerator-runtime "^0.13.1"
-    request "^2.87.0"
-    request-promise "^4.2.2"
-    walk "^2.3.14"
-
-percy-client@^3.2.0:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/percy-client/-/percy-client-3.2.2.tgz#25678e7d227e04bd62e564f499a8ea348925f5e5"
-  integrity sha512-9VF5IOCsoWcVLUsE/0nSGe9/40yXuuIV98vmoHm1bh8wlZjeRnv6nFfwJahx0QYHnNTBwklD7nrKexpwXax3eA==
-  dependencies:
-    base64-js "^1.2.3"
-    bluebird "^3.5.1"
-    bluebird-retry "^0.11.0"
-    dotenv "^8.1.0"
-    es6-promise-pool "^2.5.0"
-    jssha "^2.1.0"
-    regenerator-runtime "^0.13.1"
-    request "^2.87.0"
-    request-promise "^4.2.2"
-    walk "^2.3.14"
-
-performance-now@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
-  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
-
-picomatch@^2.0.5:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.0.7.tgz#514169d8c7cd0bdbeecc8a2609e34a7163de69f6"
-  integrity sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==
-
-process-nextick-args@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
-  integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==
-
-progress@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
-  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
-
-proxy-addr@~2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
-  integrity sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==
-  dependencies:
-    forwarded "~0.1.2"
-    ipaddr.js "1.9.0"
-
-proxy-from-env@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
-  integrity sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=
-
-psl@^1.1.24:
-  version "1.1.29"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.29.tgz#60f580d360170bb722a797cc704411e6da850c67"
-  integrity sha512-AeUmQ0oLN02flVHXWh9sSJF7mcdFq0ppid/JkErufc3hGIV/AMa8Fo9VgDo/cT2jFdOWoFvHp90qqBH54W+gjQ==
-
-pump@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
-  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-punycode@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
-  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
-
-punycode@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
-  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
-
-puppeteer@3.3.0, puppeteer@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-3.3.0.tgz#95839af9fdc0aa4de7e5ee073a4c0adeb9e2d3d7"
-  integrity sha512-23zNqRltZ1PPoK28uRefWJ/zKb5Jhnzbbwbpcna2o5+QMn17F0khq5s1bdH3vPlyj+J36pubccR8wiNA/VE0Vw==
-  dependencies:
-    debug "^4.1.0"
-    extract-zip "^2.0.0"
-    https-proxy-agent "^4.0.0"
-    mime "^2.0.3"
-    progress "^2.0.1"
-    proxy-from-env "^1.0.0"
-    rimraf "^3.0.2"
-    tar-fs "^2.0.0"
-    unbzip2-stream "^1.3.3"
-    ws "^7.2.3"
-
-puppeteer@^1.13.0:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-1.20.0.tgz#e3d267786f74e1d87cf2d15acc59177f471bbe38"
-  integrity sha512-bt48RDBy2eIwZPrkgbcwHtb51mj2nKvHOPMaSH2IsWiv7lOG9k9zhaRzpDZafrk05ajMc3cu+lSQYYOfH2DkVQ==
-  dependencies:
-    debug "^4.1.0"
-    extract-zip "^1.6.6"
-    https-proxy-agent "^2.2.1"
-    mime "^2.0.3"
-    progress "^2.0.1"
-    proxy-from-env "^1.0.0"
-    rimraf "^2.6.1"
-    ws "^6.1.0"
-
-qs@6.7.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
-  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
-
-qs@~6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
-  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
-
-queue@6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/queue/-/queue-6.0.1.tgz#abd5a5b0376912f070a25729e0b6a7d565683791"
-  integrity sha512-AJBQabRCCNr9ANq8v77RJEv73DPbn55cdTb+Giq4X0AVnNVZvMHlYp7XlQiN+1npCZj1DuSmaA2hYVUUDgxFDg==
-  dependencies:
-    inherits "~2.0.3"
-
-range-parser@~1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
-  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
-
-raw-body@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
-  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
-  dependencies:
-    bytes "3.1.0"
-    http-errors "1.7.2"
-    iconv-lite "0.4.24"
-    unpipe "1.0.0"
-
-readable-stream@^2.2.2, readable-stream@^2.3.6:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
-  integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
-readable-stream@^3.1.1:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
-  integrity sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
-readable-stream@^3.4.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
-redeyed@~2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/redeyed/-/redeyed-2.1.1.tgz#8984b5815d99cb220469c99eeeffe38913e6cc0b"
-  integrity sha1-iYS1gV2ZyyIEacme7v/jiRPmzAs=
-  dependencies:
-    esprima "~4.0.0"
-
-regenerator-runtime@^0.13.1:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
-  integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
-
-request-promise-core@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6"
-  integrity sha1-Pu4AssWqgyOc+wTFcA2jb4HNCLY=
-  dependencies:
-    lodash "^4.13.1"
-
-request-promise@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/request-promise/-/request-promise-4.2.2.tgz#d1ea46d654a6ee4f8ee6a4fea1018c22911904b4"
-  integrity sha1-0epG1lSm7k+O5qT+oQGMIpEZBLQ=
-  dependencies:
-    bluebird "^3.5.0"
-    request-promise-core "1.1.1"
-    stealthy-require "^1.1.0"
-    tough-cookie ">=2.3.3"
-
-request@^2.87.0:
-  version "2.88.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
-  integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.8.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.6"
-    extend "~3.0.2"
-    forever-agent "~0.6.1"
-    form-data "~2.3.2"
-    har-validator "~5.1.0"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.19"
-    oauth-sign "~0.9.0"
-    performance-now "^2.1.0"
-    qs "~6.5.2"
-    safe-buffer "^5.1.2"
-    tough-cookie "~2.4.3"
-    tunnel-agent "^0.6.0"
-    uuid "^3.3.2"
-
-resolve-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
-  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
-
-retry-axios@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/retry-axios/-/retry-axios-1.0.1.tgz#c1e465126416d8aee7a0a2d4be28401cc0135029"
-  integrity sha512-aVnENElFbdmbsv1WbTi610Ukdper88yUPz4Y3eg/DUyHV7vNaLrj9orB6FOjvmFoXL9wZvbMAsOD87BmcyBVOw==
-
-reusify@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
-  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
-
-rimraf@^2.6.1:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
-  integrity sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==
-  dependencies:
-    glob "^7.0.5"
-
-rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
-run-parallel@^1.1.9:
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
-  integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==
-
-safe-buffer@5.1.2, safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
-  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-
-safe-buffer@~5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
-  integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
-
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
-  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-
-semver@^5.5.0, semver@^5.6.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
-send@0.17.1:
-  version "0.17.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
-  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
-  dependencies:
-    debug "2.6.9"
-    depd "~1.1.2"
-    destroy "~1.0.4"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "~1.7.2"
-    mime "1.6.0"
-    ms "2.1.1"
-    on-finished "~2.3.0"
-    range-parser "~1.2.1"
-    statuses "~1.5.0"
-
-serve-static@1.14.1:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
-  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
-  dependencies:
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    parseurl "~1.3.3"
-    send "0.17.1"
-
-setprototypeof@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
-  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
-
-shebang-command@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
-  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
-  dependencies:
-    shebang-regex "^1.0.0"
-
-shebang-command@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
-  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
-  dependencies:
-    shebang-regex "^3.0.0"
-
-shebang-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
-  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
-
-shebang-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
-  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
-
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
-  dependencies:
-    is-arrayish "^0.3.1"
-
-slash@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
-  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
-
-sprintf-js@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
-  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
-
-sshpk@^1.7.0:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.15.2.tgz#c946d6bd9b1a39d0e8635763f5242d6ed6dcb629"
-  integrity sha512-Ra/OXQtuh0/enyl4ETZAfTaeksa6BXks5ZcjpSUNrjBr0DvrJKX+1fsKDPpT9TBXgHAFsa4510aNVgI8g/+SzA==
-  dependencies:
-    asn1 "~0.2.3"
-    assert-plus "^1.0.0"
-    bcrypt-pbkdf "^1.0.0"
-    dashdash "^1.12.0"
-    ecc-jsbn "~0.1.1"
-    getpass "^0.1.1"
-    jsbn "~0.1.0"
-    safer-buffer "^2.0.2"
-    tweetnacl "~0.14.0"
-
-stack-trace@0.0.x:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
-  integrity sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=
-
-"statuses@>= 1.5.0 < 2", statuses@~1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
-  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
-
-stealthy-require@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
-  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
-
-string-width@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
-  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
-  dependencies:
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^4.0.0"
-
-string-width@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
-  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
-strip-ansi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
-  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
-  dependencies:
-    ansi-regex "^3.0.0"
-
-strip-ansi@^5.0.0, strip-ansi@^5.1.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
-
-supports-color@^5.0.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
-supports-hyperlinks@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-1.0.1.tgz#71daedf36cc1060ac5100c351bb3da48c29c0ef7"
-  integrity sha512-HHi5kVSefKaJkGYXbDuKbUGRVxqnWGn3J2e39CYcNJEfWciGq2zYtOhXLTlvrOZW1QU7VX67w7fMmWafHX9Pfw==
-  dependencies:
-    has-flag "^2.0.0"
-    supports-color "^5.0.0"
-
-tar-fs@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.0.1.tgz#e44086c1c60d31a4f0cf893b1c4e155dabfae9e2"
-  integrity sha512-6tzWDMeroL87uF/+lin46k+Q+46rAJ0SyPGz7OW7wTgblI273hsBqk2C1j0/xNadNLKDTUL9BukSjB7cwgmlPA==
-  dependencies:
-    chownr "^1.1.1"
-    mkdirp-classic "^0.5.2"
-    pump "^3.0.0"
-    tar-stream "^2.0.0"
-
-tar-stream@^2.0.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.1.2.tgz#6d5ef1a7e5783a95ff70b69b97455a5968dc1325"
-  integrity sha512-UaF6FoJ32WqALZGOIAApXx+OdxhekNMChu6axLJR85zMMjXKWFGjbIRe+J6P4UnRGg9rAwWvbTT0oI7hD/Un7Q==
-  dependencies:
-    bl "^4.0.1"
-    end-of-stream "^1.4.1"
-    fs-constants "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^3.1.1"
-
-text-hex@1.0.x:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/text-hex/-/text-hex-1.0.0.tgz#69dc9c1b17446ee79a92bf5b884bb4b9127506f5"
-  integrity sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==
-
-through@^2.3.8:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
-
-to-regex-range@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
-  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
-  dependencies:
-    is-number "^7.0.0"
-
-toidentifier@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
-  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
-
-tough-cookie@>=2.3.3, tough-cookie@~2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
-  integrity sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==
-  dependencies:
-    psl "^1.1.24"
-    punycode "^1.4.1"
-
-treeify@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/treeify/-/treeify-1.1.0.tgz#4e31c6a463accd0943879f30667c4fdaff411bb8"
-  integrity sha512-1m4RA7xVAJrSGrrXGs0L3YTwyvBs2S8PbRHaLZAkFw7JR8oIFwYtysxlBZhYIa7xSyiYJKZ3iGrrk55cGA3i9A==
-
-triple-beam@^1.2.0, triple-beam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/triple-beam/-/triple-beam-1.3.0.tgz#a595214c7298db8339eeeee083e4d10bd8cb8dd9"
-  integrity sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==
-
-tslib@^1, tslib@^1.9.3:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
-  integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
-
-tunnel-agent@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
-  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
-  dependencies:
-    safe-buffer "^5.0.1"
-
-tweetnacl@^0.14.3, tweetnacl@~0.14.0:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
-  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
-
-type-is@~1.6.17, type-is@~1.6.18:
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
-  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
-  dependencies:
-    media-typer "0.3.0"
-    mime-types "~2.1.24"
-
-typedarray@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
-  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
-
-unbzip2-stream@^1.3.3:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.1.tgz#151b104af853df3efdaa135d8b1eca850a44b426"
-  integrity sha512-sgDYfSDPMsA4Hr2/w7vOlrJBlwzmyakk1+hW8ObLvxSp0LA36LcL2XItGvOT3OSblohSdevMuT8FQjLsqyy4sA==
-  dependencies:
-    buffer "^5.2.1"
-    through "^2.3.8"
-
-universalify@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
-
-unpipe@1.0.0, unpipe@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
-  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
-
-uri-js@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
-  integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
-  dependencies:
-    punycode "^2.1.0"
-
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
-
-utils-merge@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
-  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
-
-uuid@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
-  integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
-
-vary@^1, vary@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
-  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
-
-verror@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
-  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
-  dependencies:
-    assert-plus "^1.0.0"
-    core-util-is "1.0.2"
-    extsprintf "^1.2.0"
-
-walk@^2.3.14:
-  version "2.3.14"
-  resolved "https://registry.yarnpkg.com/walk/-/walk-2.3.14.tgz#60ec8631cfd23276ae1e7363ce11d626452e1ef3"
-  integrity sha512-5skcWAUmySj6hkBdH6B6+3ddMjVQYH5Qy9QGbPmN8kVmLteXk+yVXg+yfk1nbX30EYakahLrr8iPcCxJQSCBeg==
-  dependencies:
-    foreachasync "^3.0.0"
-
-which@^1.2.9:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
-  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
-  dependencies:
-    isexe "^2.0.0"
-
-which@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-2.0.1.tgz#f1cf94d07a8e571b6ff006aeb91d0300c47ef0a4"
-  integrity sha512-N7GBZOTswtB9lkQBZA4+zAXrjEIWAUOB93AvzUiudRzRxhUdLURQ7D/gAIMY1gatT/LTbmbcv8SiYazy3eYB7w==
-  dependencies:
-    isexe "^2.0.0"
-
-widest-line@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-2.0.1.tgz#7438764730ec7ef4381ce4df82fb98a53142a3fc"
-  integrity sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==
-  dependencies:
-    string-width "^2.1.1"
-
-winston-transport@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/winston-transport/-/winston-transport-4.3.0.tgz#df68c0c202482c448d9b47313c07304c2d7c2c66"
-  integrity sha512-B2wPuwUi3vhzn/51Uukcao4dIduEiPOcOt9HJ3QeaXgkJ5Z7UwpBzxS4ZGNHtrxrUvTwemsQiSys0ihOf8Mp1A==
-  dependencies:
-    readable-stream "^2.3.6"
-    triple-beam "^1.2.0"
-
-winston@^3.0.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/winston/-/winston-3.2.1.tgz#63061377976c73584028be2490a1846055f77f07"
-  integrity sha512-zU6vgnS9dAWCEKg/QYigd6cgMVVNwyTzKs81XZtTFuRwJOcDdBg7AU0mXVyNbs7O5RH2zdv+BdNZUlx7mXPuOw==
-  dependencies:
-    async "^2.6.1"
-    diagnostics "^1.1.1"
-    is-stream "^1.1.0"
-    logform "^2.1.1"
-    one-time "0.0.4"
-    readable-stream "^3.1.1"
-    stack-trace "0.0.x"
-    triple-beam "^1.3.0"
-    winston-transport "^4.3.0"
-
-wrap-ansi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-4.0.0.tgz#b3570d7c70156159a2d42be5cc942e957f7b1131"
-  integrity sha512-uMTsj9rDb0/7kk1PbcbCcwvHUxp60fGDB/NNXpVa0Q+ic/e7y5+BwTxKfQ33VYgDppSwi/FBzpetYzo8s6tfbg==
-  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^2.1.1"
-    strip-ansi "^4.0.0"
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
-
-ws@^6.1.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
-  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
-  dependencies:
-    async-limiter "~1.0.0"
-
-ws@^7.2.3:
-  version "7.2.3"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.2.3.tgz#a5411e1fb04d5ed0efee76d26d5c46d830c39b46"
-  integrity sha512-HTDl9G9hbkNDk98naoR/cHDws7+EyYMOdL1BmjsZXRUjf7d+MficC4B7HLUPlSiho0vg+CWKrGIt/VJBd1xunQ==
-
-yauzl@2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
-  integrity sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=
-  dependencies:
-    fd-slicer "~1.0.1"
-
-yauzl@^2.10.0:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
-  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
-  dependencies:
-    buffer-crc32 "~0.2.3"
-    fd-slicer "~1.1.0"
diff --git a/build-system/test-configs/.eslintrc.js b/build-system/test-configs/.eslintrc.js
new file mode 100644
index 0000000000000..8e8cb89f35b48
--- /dev/null
+++ b/build-system/test-configs/.eslintrc.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2021 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.
+ */
+
+module.exports = {
+  'overrides': [
+    {
+      'files': ['forbidden-terms.js'],
+      'rules': {
+        // The terms referenced by this rule are defined in this file.
+        'local/no-forbidden-terms': 0,
+        // Ensures that allowlists in file are up-to-date.
+        'local/forbidden-terms-config': 2,
+      },
+    },
+  ],
+};
diff --git a/build-system/test-configs/OWNERS b/build-system/test-configs/OWNERS
index c8bf039d9ef1e..03bd6fe0ab708 100644
--- a/build-system/test-configs/OWNERS
+++ b/build-system/test-configs/OWNERS
@@ -1,12 +1,11 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [
         {name: 'ampproject/wg-infra'},
-        {name: 'ampproject/wg-runtime'},
         {name: 'ampproject/wg-performance'},
       ],
     },
diff --git a/build-system/test-configs/config.js b/build-system/test-configs/config.js
index 37d0970d6843a..dcebdbdb6c736 100644
--- a/build-system/test-configs/config.js
+++ b/build-system/test-configs/config.js
@@ -15,10 +15,21 @@
  */
 'use strict';
 
-const initTestsPath = ['test/_init_tests.js'];
+/**
+ * @type
+ * Array<string | {
+ *   pattern: string,
+ *   included: boolean,
+ *   nocache: boolean,
+ *   watched: boolean
+ * }>
+ */
+const initTestsPath = ['testing/init-tests.js'];
+
+const karmaHtmlFixturesPath = 'test/fixtures/*.html';
 
 const fixturesExamplesPaths = [
-  'test/fixtures/*.html',
+  karmaHtmlFixturesPath,
   {
     pattern: 'test/fixtures/served/*.html',
     included: false,
@@ -40,6 +51,12 @@ const builtRuntimePaths = [
     nocache: false,
     watched: true,
   },
+  {
+    pattern: 'dist/**/*.mjs',
+    included: false,
+    nocache: false,
+    watched: true,
+  },
   {
     pattern: 'dist.3p/**/*',
     included: false,
@@ -52,6 +69,19 @@ const builtRuntimePaths = [
     nocache: false,
     watched: true,
   },
+  {
+    pattern: 'dist.tools/**/*.mjs',
+    included: false,
+    nocache: false,
+    watched: true,
+  },
+];
+
+const karmaJsPaths = [
+  'test/**/*.js',
+  'ads/**/test/test-*.js',
+  'extensions/**/test/**/*.js',
+  'testing/**/*.js',
 ];
 
 const commonUnitTestPaths = initTestsPath.concat(fixturesExamplesPaths);
@@ -67,12 +97,6 @@ const testPaths = commonIntegrationTestPaths.concat([
   'extensions/**/test/**/*.js',
 ]);
 
-const a4aTestPaths = initTestsPath.concat([
-  'extensions/amp-a4a/**/test/**/*.js',
-  'extensions/amp-ad-network-*/**/test/**/*.js',
-  'ads/google/a4a/test/*.js',
-]);
-
 const unitTestPaths = [
   'test/unit/**/*.js',
   'ads/**/test/test-*.js',
@@ -81,10 +105,10 @@ const unitTestPaths = [
   'extensions/**/test/unit/*.js',
 ];
 
-const unitTestOnSaucePaths = [
-  'test/unit/**/*.js',
-  'ads/**/test/test-*.js',
-  'ads/**/test/unit/test-*.js',
+// TODO(amphtml): Opt-in more unit tests to run on Safari / FF / Edge.
+const unitTestCrossBrowserPaths = [
+  'test/unit/core/test-error.js',
+  'test/unit/test-log.js',
 ];
 
 const integrationTestPaths = [
@@ -96,44 +120,31 @@ const e2eTestPaths = ['test/e2e/*.js', 'extensions/**/test-e2e/*.js'];
 
 const devDashboardTestPaths = ['build-system/server/app-index/test/**/*.js'];
 
-const jisonPaths = ['extensions/**/*.jison'];
+const jisonPath = 'extensions/**/*.jison';
 
 const lintGlobs = [
   '**/*.js',
   // To ignore a file / directory, add it to .eslintignore.
 ];
 
+/**
+ * This should not include .js files, since those are handled by eslint:
+ *  - required terms: notice/notice
+ *  - forbidden terms: local/no-forbidden-terms
+ */
 const presubmitGlobs = [
-  '**/*.{css,js,go}',
-  // This does match dist.3p/current, so we run presubmit checks on the
-  // built 3p binary. This is done, so we make sure our special 3p checks
-  // run against the entire transitive closure of deps.
+  '**/*.{css,go,md}',
   '!{node_modules,build,dist,dist.tools,' +
     'dist.3p/[0-9]*,dist.3p/current,dist.3p/current-min}/**/*.*',
-  '!dist.3p/current/**/ampcontext-lib.js',
-  '!dist.3p/current/**/iframe-transport-client-lib.js',
   '!out/**/*.*',
   '!validator/validator.pb.go',
-  '!validator/chromeextension/*.*',
   '!validator/dist/**/*.*',
   '!validator/htmlparser/**/*.*',
-  '!validator/node_modules/**/*.*',
-  '!validator/nodejs/node_modules/**/*.*',
-  '!validator/webui/dist/**/*.*',
-  '!validator/webui/node_modules/**/*.*',
-  '!build-system/server/new-server/transforms/dist/**/*.*',
-  '!build-system/tasks/e2e/node_modules/**/*.*',
-  '!build-system/tasks/presubmit-checks.js',
+  '!build-system/tasks/performance/cache/**/*.*',
   '!build-system/runner/build/**/*.*',
-  '!build-system/tasks/visual-diff/node_modules/**/*.*',
-  '!build-system/tasks/visual-diff/snippets/*.js',
-  '!build/polyfills.js',
-  '!build/polyfills/*.js',
   '!third_party/**/*.*',
-  '!src/purifier/node_modules/**/*.*',
-  // Files in this testdata dir are machine-generated and are not part
-  // of the AMP runtime, so shouldn't be checked.
-  '!extensions/amp-a4a/*/test/testdata/*.js',
+  '!**/node_modules/**/*.*',
+  '!extensions/**/dist/*',
   '!examples/**/*',
   '!examples/visual-tests/**/*',
   '!test/coverage/**/*.*',
@@ -141,33 +152,368 @@ const presubmitGlobs = [
 ];
 
 /**
- * List of non-JS files to be checked by `gulp prettify` (using prettier).
+ * List of non-JS files to be checked by `amp prettify` (using prettier).
  * NOTE: When you add a new filename / glob to this list:
  * 1. Make sure its formatting options are specified in .prettierrc
  * 2. Make sure it is listed in .vscode/settings.json (for auto-fix-on-save)
  */
 const prettifyGlobs = [
-  '.codecov.yml',
-  '.lando.yml',
-  '.lgtm.yml',
-  '.travis.yml',
   '.prettierrc',
   '.renovaterc.json',
   '.vscode/settings.json',
+  '.github/workflows/continuous-integration-workflow.yml',
   '**/*.json',
   '**/OWNERS',
   '**/*.md',
-  '!.github/ISSUE_TEMPLATE/**',
-  '!**/{node_modules,build,dist,dist.3p,dist.tools,.karma-cache}/**',
+  '**/*.yml',
 ];
 
 /**
- * List of markdown files that may be checked by `gulp check-links` (using
- * markdown-link-check).
+ * List of markdown and yaml files that may be checked by `amp check-links`
+ * (using markdown-link-check).
  */
 const linkCheckGlobs = [
+  '.github/ISSUE_TEMPLATE/*.yml',
   '**/*.md',
-  '!**/{examples,node_modules,build,dist,dist.3p,dist.tools,.karma-cache}/**',
+  '!**/{examples,node_modules,build,dist,dist.3p,dist.tools}/**',
+];
+
+/**
+ * List of files checked by `amp check-invalid-whitespaces`.
+ * - JS files are already checked by `amp lint` using eslint / prettier.
+ * - Markdown files are ignored because line-breaks use trailing whitespaces.
+ */
+const invalidWhitespaceGlobs = [
+  '**/*.css',
+  '**/*.html',
+  '**/*.out',
+  '**/*.out.cpponly',
+  '**/*.protoascii',
+  '**/*.sh',
+  '!**/{node_modules,build,dist,dist.3p,dist.tools}/**',
+];
+
+/**
+ * List of HTML fixtures to check to ensure they contain valid AMPHTML.
+ */
+const htmlFixtureGlobs = [
+  'examples/**/*.html',
+  'test/fixtures/e2e/**/*.html',
+
+  // TODO(#25149): Fix these invalid files and remove them from this list.
+  '!examples/accordion.amp.html',
+  '!examples/ad-lightbox.amp.html',
+  '!examples/alp.amp.html',
+  '!examples/alp/creative.html',
+  '!examples/amp-3d-gltf.amp.html',
+  '!examples/amp-action-macro.html',
+  '!examples/amp-ad-template.amp.html',
+  '!examples/amp-ad/a4a.amp.html',
+  '!examples/amp-ad/ads.amp.esm.html',
+  '!examples/amp-ad/ads.amp.html',
+  '!examples/amp-ad/doubleclick-remote-html.html',
+  '!examples/amp-ad/doubleclick-rtc.amp.html',
+  '!examples/amp-ad/doubleclick-safeframe.html',
+  '!examples/amp-ad/doubleclick-vanilla.amp.html',
+  '!examples/amp-ad/sticky-creative.html',
+  '!examples/amp-ad/sticky.html',
+  '!examples/amp-autocomplete-testing.html',
+  '!examples/amp-autocomplete.ssr.html',
+  '!examples/amp-consent/amp-consent-3p-postmessage.html',
+  '!examples/amp-consent/amp-consent-amp-ad.amp.html',
+  '!examples/amp-consent/amp-consent-client.html',
+  '!examples/amp-consent/amp-consent-cmp.html',
+  '!examples/amp-consent/amp-consent-geo.html',
+  '!examples/amp-consent/amp-consent-iframe.amp.html',
+  '!examples/amp-consent/amp-consent-iframe.embed.html',
+  '!examples/amp-consent/amp-consent-server.html',
+  '!examples/amp-consent/cmp-vendors.amp.html',
+  '!examples/amp-consent/diy-3p-iframe-tcf-postmessage.html',
+  '!examples/amp-consent/diy-consent.html',
+  '!examples/amp-form.ssr.html',
+  '!examples/amp-google-assistant-assistjs.amp.html',
+  '!examples/amp-layout-intrinsic.amp.html',
+  '!examples/amp-lightbox.amp.html',
+  '!examples/amp-list-layout-container.amp.html',
+  '!examples/amp-list-with-form.amp.html',
+  '!examples/amp-list.amp.html',
+  '!examples/amp-list.ssr.html',
+  '!examples/amp-list.state.html',
+  '!examples/amp-minute-media-player.amp.html',
+  '!examples/amp-mowplayer.amp.html',
+  '!examples/amp-next-page.amp.html',
+  '!examples/amp-onetap-google/iframe.html',
+  '!examples/amp-orientation-observer-3d-parallax.amp.html',
+  '!examples/amp-orientation-observer-amp-3d-gltf.amp.html',
+  '!examples/amp-orientation-observer-panorama.amp.html',
+  '!examples/amp-orientation-observer-scroll.amp.html',
+  '!examples/amp-orientation-observer.amp.html',
+  '!examples/amp-position-observer.amp.html',
+  '!examples/amp-redbull-player.amp.html',
+  '!examples/amp-script/example.amp.html',
+  '!examples/amp-script/example.sandboxed.amp.html',
+  '!examples/amp-script/hello-world.html',
+  '!examples/amp-script/todomvc.amp.html',
+  '!examples/amp-script/vue-todomvc.amp.html',
+  '!examples/amp-skimlinks.html',
+  '!examples/amp-smartlinks.html',
+  '!examples/amp-story/access.html',
+  '!examples/amp-story/ad-development.html',
+  '!examples/amp-story/ads/app-install.html',
+  '!examples/amp-story/affiliate-link.html',
+  '!examples/amp-story/amp-story-animation.html',
+  '!examples/amp-story/amp-story-auto-ads.html',
+  '!examples/amp-story/amp-story-branching.html',
+  '!examples/amp-story/amp-story-panning-media.html',
+  '!examples/amp-story/ampconf.html',
+  '!examples/amp-story/analytics.html',
+  '!examples/amp-story/animations-sequence.html',
+  '!examples/amp-story/attachment.html',
+  '!examples/amp-story/auto-analytics.html',
+  '!examples/amp-story/consent-geo.html',
+  '!examples/amp-story/consent.html',
+  '!examples/amp-story/cta-layer-outlink.html',
+  '!examples/amp-story/doubleclick.html',
+  '!examples/amp-story/fake-ad.html',
+  '!examples/amp-story/grid-layer-presets.html',
+  '!examples/amp-story/grid-layer-templates.html',
+  '!examples/amp-story/helloworld.html',
+  '!examples/amp-story/interactive_polls.html',
+  '!examples/amp-story/interactive_quizzes.html',
+  '!examples/amp-story/interactive_results.html',
+  '!examples/amp-story/interactives.html',
+  '!examples/amp-story/player-local-stories.html',
+  '!examples/amp-story/player-story-attribution.html',
+  '!examples/amp-story/player-with-button.html',
+  '!examples/amp-story/player.html',
+  '!examples/amp-story/progress-bar.html',
+  '!examples/amp-story/quiz.html',
+  '!examples/amp-story/rtl.html',
+  '!examples/amp-story/show-tooltip.html',
+  '!examples/amp-story/supports-landscape-ads.html',
+  '!examples/amp-story/text-background-color.html',
+  '!examples/amp-story/video-one-page.html',
+  '!examples/amp-story/video-one-page2.html',
+  '!examples/amp-story/videos-cdn.html',
+  '!examples/amp-story/videos-google-cache.html',
+  '!examples/amp-story/videos.html',
+  '!examples/amp-story/visual-effects.html',
+  '!examples/amp-subscriptions-google/amp-subscriptions-iframe.provider.html',
+  '!examples/amp-subscriptions-google/amp-subscriptions-metering-laa.amp.html',
+  '!examples/amp-subscriptions-google/amp-subscriptions-metering-registration-widget.html',
+  '!examples/amp-subscriptions-google/amp-subscriptions-smartbox.amp.html',
+  '!examples/amp-subscriptions-google/amp-subscriptions.amp.html',
+  '!examples/amp-subscriptions-rtp.amp.html',
+  '!examples/amp-tiktok.amp.html',
+  '!examples/amp-video-iframe/consent.html',
+  '!examples/amp-video-iframe/frame-consent-es2015.html',
+  '!examples/amp-video-iframe/frame-consent.html',
+  '!examples/amp-video-iframe/frame-es2015.html',
+  '!examples/amp-video-iframe/frame-videojs.html',
+  '!examples/amp-video-iframe/frame.html',
+  '!examples/amp-video/multi-bitrate/multi-bitrate.html',
+  '!examples/ampcontext-creative-json.html',
+  '!examples/ampcontext-creative.html',
+  '!examples/amphtml-ads/adchoices-1.a4a.html',
+  '!examples/amphtml-ads/adchoices-2.a4a.html',
+  '!examples/amphtml-ads/animation-ad.a4a.html',
+  '!examples/amphtml-ads/fake-memory.host.html',
+  '!examples/amphtml-ads/gif-ad.a4a.html',
+  '!examples/amphtml-ads/gpt.host.html',
+  '!examples/amphtml-ads/many-ads.host.html',
+  '!examples/amphtml-ads/text-ad.a4a.html',
+  '!examples/amphtml-ads/visibility-ad.a4a.html',
+  '!examples/amphtml-ads/visibility.host.html',
+  '!examples/analytics-error-reporting.amp.html',
+  '!examples/analytics-html-attr.amp.html',
+  '!examples/analytics-iframe-transport-remote-frame.html',
+  '!examples/analytics-iframe-transport.amp.html',
+  '!examples/analytics-in-creative-measurement.amp.html',
+  '!examples/analytics-reportWhen.amp.html',
+  '!examples/analytics-vendors.amp.html',
+  '!examples/article-access-iframe.amp.html',
+  '!examples/article-access-iframe.provider.html',
+  '!examples/article-access-laterpay.amp.html',
+  '!examples/article-access-multiple.amp.html',
+  '!examples/article-access-poool.amp.html',
+  '!examples/article-access.amp.html',
+  '!examples/article-fixed-header.amp.html',
+  '!examples/article-super-short.amp.html',
+  '!examples/article.amp.html',
+  '!examples/auto-ads.amp.html',
+  '!examples/bento.amp.html',
+  '!examples/beopinion.amp.html',
+  '!examples/beopinion.article.amp.html',
+  '!examples/bind/carousels.amp.html',
+  '!examples/bind/ecommerce.amp.html',
+  '!examples/bind/errors.amp.html',
+  '!examples/bind/game.amp.html',
+  '!examples/bind/list.amp.html',
+  '!examples/bind/performance.amp.html',
+  '!examples/bind/sandbox.amp.html',
+  '!examples/bind/svgimage.amp.html',
+  '!examples/bodymovin-animation.amp.html',
+  '!examples/brightcove.amp.html',
+  '!examples/csa.amp.html',
+  '!examples/csp.amp.html',
+  '!examples/date-picker.amp.html',
+  '!examples/doubleload.amp.html',
+  '!examples/everything.amp.esm.html',
+  '!examples/everything.amp.html',
+  '!examples/everything.iframed.html',
+  '!examples/fake-ad.amp.html',
+  '!examples/forms.amp.html',
+  '!examples/gfk-sensic-analytics.amp.html',
+  '!examples/gwd.amp.html',
+  '!examples/ima-video.amp.html',
+  '!examples/image-lightbox.amp.html',
+  '!examples/img.amp.html',
+  '!examples/jwplayer.amp.html',
+  '!examples/linkers.html',
+  '!examples/live-blog-non-floating-button.amp.html',
+  '!examples/live-list.amp.html',
+  '!examples/loads-windowcontext-creative-https.html',
+  '!examples/loads-windowcontext-creative.html',
+  '!examples/megaphone.amp.html',
+  '!examples/metadata-examples/article-json-ld-twitter-card.amp.html',
+  '!examples/metadata-examples/article-json-ld.amp.html',
+  '!examples/metadata-examples/recipe-json-ld.amp.html',
+  '!examples/metadata-examples/review-json-ld.amp.html',
+  '!examples/metadata-examples/sports-article-json-ld.amp.html',
+  '!examples/metadata-examples/video-json-ld.amp.html',
+  '!examples/mraid/inabox-mraid.html',
+  '!examples/multiple-docs.html',
+  '!examples/old-boilerplate.amp.html',
+  '!examples/ooyalaplayer.amp.html',
+  '!examples/playbuzz.amp.html',
+  '!examples/powr-player.amp.html',
+  '!examples/pwa-multidoc-loader.html',
+  '!examples/pwa/pwa-sd-polyfill.html',
+  '!examples/pwa/pwa.html',
+  '!examples/released.amp.html',
+  '!examples/runtime/article.html',
+  '!examples/runtime/list-always.html',
+  '!examples/selector.amp.html',
+  '!examples/sidebar.amp.html',
+  '!examples/social-share.amp.html',
+  '!examples/standard-actions.amp.html',
+  '!examples/sticky.ads.0.1.amp.html',
+  '!examples/travel-lb.amp.html',
+  '!examples/travel.amp.html',
+  '!examples/twitter.amp.html',
+  '!examples/user-notification.amp.html',
+  '!examples/valueimpression.amp.html',
+  '!examples/video-animation-sync.html',
+  '!examples/viewer-iframe-poll.html',
+  '!examples/viewer-webview.html',
+  '!examples/viewer.html',
+  '!examples/vimeo.amp.html',
+  '!examples/viqeo.amp.html',
+  '!examples/visual-tests/amp-accordion/amp-accordion.html',
+  '!examples/visual-tests/amp-date-picker/amp-date-picker.amp.html',
+  '!examples/visual-tests/amp-inabox/amp-inabox-gpt.html',
+  '!examples/visual-tests/amp-lightbox-gallery.html',
+  '!examples/visual-tests/amp-list/amp-list.amp.html',
+  '!examples/visual-tests/amp-selector.amp.html',
+  '!examples/visual-tests/amp-sidebar/amp-sidebar-toolbar-ol.amp.html',
+  '!examples/visual-tests/amp-sidebar/amp-sidebar-toolbar-ul.amp.html',
+  '!examples/visual-tests/amp-sidebar/amp-sidebar.amp.html',
+  '!examples/visual-tests/amp-sticky-ad/amp-sticky-ad.amp.html',
+  '!examples/visual-tests/amp-story-player/back-button.html',
+  '!examples/visual-tests/amp-story-player/close-button.html',
+  '!examples/visual-tests/amp-story-player/player-amp-version.html',
+  '!examples/visual-tests/amp-story-player/player-local-story.html',
+  '!examples/visual-tests/amp-story-player/story-attribution.html',
+  '!examples/visual-tests/amp-story/amp-story-360-image.html',
+  '!examples/visual-tests/amp-story/amp-story-bot-rendering.html',
+  '!examples/visual-tests/amp-story/amp-story-consent.html',
+  '!examples/visual-tests/amp-story/amp-story-consent.rtl.html',
+  '!examples/visual-tests/amp-story/amp-story-cta-layer.html',
+  '!examples/visual-tests/amp-story/amp-story-dev-tools.html',
+  '!examples/visual-tests/amp-story/amp-story-grid-layer-presets.html',
+  '!examples/visual-tests/amp-story/amp-story-grid-layer-template-fill.html',
+  '!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-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',
+  '!examples/visual-tests/amp-story/basic-transformed.html',
+  '!examples/visual-tests/amp-story/basic.html',
+  '!examples/visual-tests/amp-story/basic.rtl.html',
+  '!examples/visual-tests/amp-story/embed-mode-1.html',
+  '!examples/visual-tests/amp-story/embed-mode-2.html',
+  '!examples/visual-tests/amp-story/info-dialog.html',
+  '!examples/visual-tests/amp-story/info-dialog.rtl.html',
+  '!examples/visual-tests/amp-story/share-menu.html',
+  '!examples/visual-tests/amp-story/share-menu.rtl.html',
+  '!examples/visual-tests/amp-video-docking/video-iframe-inner.html',
+  '!examples/visual-tests/amphtml-ads/amp-fie-adchoices.html',
+  '!examples/visual-tests/amphtml-ads/amp-fie-static.html',
+  '!examples/visual-tests/amphtml-ads/amp-inabox-adchoices.html',
+  '!examples/visual-tests/amphtml-ads/amp-inabox-static.html',
+  '!examples/visual-tests/amphtml-ads/resource/amp-ads-fallback.html',
+  '!examples/visual-tests/article-access.amp/article-access.amp.html',
+  '!examples/visual-tests/article.amp/article.amp.html',
+  '!examples/visual-tests/blank-page/blank.html',
+  '!examples/visual-tests/css.amp/css.amp.html',
+  '!examples/visual-tests/iframe-wrapper.html',
+  '!examples/viz-vega.amp.html',
+  '!examples/wistiaplayer.amp.html',
+  '!examples/xhr-intercept.html',
+  '!test/fixtures/e2e/amp-accordion/amp-accordion.html',
+  '!test/fixtures/e2e/amp-accordion/single-expand.html',
+  '!test/fixtures/e2e/amp-auto-lightbox/amp-auto-lightbox.html',
+  '!test/fixtures/e2e/amp-autocomplete/amp-autocomplete-inline.amp.html',
+  '!test/fixtures/e2e/amp-autocomplete/amp-autocomplete.amp.html',
+  '!test/fixtures/e2e/amp-base-carousel/1.0/grouping-move-by-2.amp.html',
+  '!test/fixtures/e2e/amp-base-carousel/1.0/vertical.amp.html',
+  '!test/fixtures/e2e/amp-base-carousel/advance.amp.html',
+  '!test/fixtures/e2e/amp-base-carousel/disable-layers.html',
+  '!test/fixtures/e2e/amp-base-carousel/enable-experiment.html',
+  '!test/fixtures/e2e/amp-base-carousel/grouping.amp.html',
+  '!test/fixtures/e2e/amp-base-carousel/index.html',
+  '!test/fixtures/e2e/amp-base-carousel/related-items.amp.html',
+  '!test/fixtures/e2e/amp-base-carousel/zero-index-slide.amp.html',
+  '!test/fixtures/e2e/amp-bind/bind-amp4email.html',
+  '!test/fixtures/e2e/amp-bind/bind-form.html',
+  '!test/fixtures/e2e/amp-carousel/0.1/hidden-controls.amp.html',
+  '!test/fixtures/e2e/amp-consent/cmp-interaction.html',
+  '!test/fixtures/e2e/amp-date-countdown/amp-date-countdown.html',
+  '!test/fixtures/e2e/amp-date-picker/blocked-dates.html',
+  '!test/fixtures/e2e/amp-fit-text/1.0/amp-fit-text.html',
+  '!test/fixtures/e2e/amp-form/amp-form.html',
+  '!test/fixtures/e2e/amp-list/amp-list-function-load-more.html',
+  '!test/fixtures/e2e/amp-list/amp-list-function-src.html',
+  '!test/fixtures/e2e/amp-list/amp-list.html',
+  '!test/fixtures/e2e/amp-list/amp-list.ssr.html',
+  '!test/fixtures/e2e/amp-script/basic.amp.html',
+  '!test/fixtures/e2e/amp-selector/amp-selector-tabs.html',
+  '!test/fixtures/e2e/amp-social-share/amp-social-share.html',
+  '!test/fixtures/e2e/amp-story-auto-ads/basic.html',
+  '!test/fixtures/e2e/amp-story-auto-ads/dv3-request.html',
+  '!test/fixtures/e2e/amp-story-auto-ads/dv3-transformed-creative.html',
+  '!test/fixtures/e2e/amp-story-auto-ads/fullbleed.html',
+  '!test/fixtures/e2e/amp-story-player/basic.html',
+  '!test/fixtures/e2e/amp-story-player/navigation.html',
+  '!test/fixtures/e2e/amp-story-player/pre-rendering.html',
+  '!test/fixtures/e2e/amp-story/amp-story.amp.html',
+  '!test/fixtures/e2e/amp-subscriptions-google/swg.amp.html',
+  '!test/fixtures/e2e/amp-video/analytics-triggers.html',
+  '!test/fixtures/e2e/amp-video/autoplay.html',
+  '!test/fixtures/e2e/amp-video/videos-cdn.html',
+  '!test/fixtures/e2e/amp-viewer-integration/viewer.html',
+  '!test/fixtures/e2e/amp4email/element-size-race.html',
+  '!test/fixtures/e2e/amp4email/viewport-size-race.html',
+  '!test/fixtures/e2e/amphtml-ads/amp-creative.html',
+  '!test/fixtures/e2e/amphtml-ads/botguard.a4a.html',
+  '!test/fixtures/e2e/amphtml-ads/image.html',
+  '!test/fixtures/e2e/amphtml-ads/lightbox-ad.a4a.html',
+  '!test/fixtures/e2e/amphtml-ads/text.html',
 ];
 
 /**
@@ -202,20 +548,23 @@ const changelogIgnoreFileTypes = /\.md|\.json|\.yaml|LICENSE|CONTRIBUTORS$/;
 
 /** @const  */
 module.exports = {
-  a4aTestPaths,
   changelogIgnoreFileTypes,
   commonIntegrationTestPaths,
   commonUnitTestPaths,
   devDashboardTestPaths,
   e2eTestPaths,
+  htmlFixtureGlobs,
   integrationTestPaths,
-  jisonPaths,
+  invalidWhitespaceGlobs,
+  jisonPath,
+  karmaHtmlFixturesPath,
+  karmaJsPaths,
   linkCheckGlobs,
   lintGlobs,
   presubmitGlobs,
   prettifyGlobs,
   testPaths,
   thirdPartyFrames,
-  unitTestOnSaucePaths,
+  unitTestCrossBrowserPaths,
   unitTestPaths,
 };
diff --git a/build-system/test-configs/conformance-config.textproto b/build-system/test-configs/conformance-config.textproto
index 1c0f54a9a0230..a8d5be99b14de 100644
--- a/build-system/test-configs/conformance-config.textproto
+++ b/build-system/test-configs/conformance-config.textproto
@@ -13,8 +13,8 @@ requirement: {
   type: BANNED_PROPERTY_READ
   error_message: 'Use getStyle, setStyle, or setStyles in src/style.js'
   value: 'Element.prototype.style'
-  whitelist: 'src/style.js'
-  whitelist: 'src/layout.js'
+  allowlist: 'src/style.js'
+  allowlist: 'src/layout.js'
 }
 
 requirement: {
@@ -27,7 +27,7 @@ requirement: {
   type: BANNED_PROPERTY_CALL
   error_message: 'Use closestAncestorElementBySelector in src/dom.js'
   value: 'Element.prototype.closest'
-  whitelist: 'src/dom.js'
+  allowlist: 'src/dom.js'
 }
 
 # CSSStyleDeclaration
@@ -36,7 +36,7 @@ requirement: {
   type: BANNED_PROPERTY_CALL
   error_message: 'Use setStyle or setStyles in src/style.js'
   value: 'CSSStyleDeclaration.prototype.setProperty'
-  whitelist: 'src/style.js'
+  allowlist: 'src/style.js'
 }
 
 # History
@@ -45,8 +45,8 @@ requirement: {
   type: BANNED_PROPERTY
   error_message: 'History.p.state is broken in IE11. Please use the helper methods provided in src/history.js'
   value: 'History.prototype.state'
-  whitelist: 'src/history.js'
-  whitelist: 'extensions/amp-story/1.0/amp-story-viewer-messaging-handler.js'
+  allowlist: 'src/history.js'
+  allowlist: 'extensions/amp-story/1.0/amp-story-viewer-messaging-handler.js'
 }
 
 # Strings
@@ -63,12 +63,6 @@ requirement: {
   value: 'string.prototype.padEnd'
 }
 
-requirement: {
-  type: BANNED_PROPERTY_CALL
-  error_message: 'Use string.js#startsWith'
-  value: 'string.prototype.startsWith'
-}
-
 requirement: {
   type: BANNED_PROPERTY_CALL
   error_message: 'string.prototype.endsWith is not allowed'
@@ -110,7 +104,7 @@ requirement: {
   error_message: 'string.prototype.trimStart is not allowed'
   value: 'string.prototype.trimStart'
   value: 'string.prototype.trimLeft'
-  whitelist: 'src/string.js'
+  allowlist: 'src/core/types/string/index.js'
 }
 
 requirement: {
@@ -118,7 +112,7 @@ requirement: {
   error_message: 'string.prototype.trimEnd is not allowed'
   value: 'string.prototype.trimEnd'
   value: 'string.prototype.trimRight'
-  whitelist: 'src/string.js'
+  allowlist: 'src/core/types/string/index.js'
 }
 
 requirement: {
@@ -191,6 +185,108 @@ requirement: {
   value: 'Array.prototype.flatMap'
 }
 
+requirement: {
+  type: BANNED_PROPERTY_CALL
+  error_message: 'Array.prototype.keys is not allowed'
+  value: 'Array.prototype.keys'
+}
+
+requirement: {
+  type: BANNED_PROPERTY_CALL
+  error_message: 'Array.prototype.values is not allowed'
+  value: 'Array.prototype.values'
+}
+
+requirement: {
+  type: BANNED_PROPERTY_CALL
+  error_message: 'Array.prototype.entries is not allowed'
+  value: 'Array.prototype.entries'
+}
+
+# Map
+
+requirement: {
+  type: BANNED_CODE_PATTERN
+  error_message: 'Cannot construct Map with Iterable'
+  value: '/** @param {Array|Object} a */function template(a) {new Map(a)}'
+}
+
+requirement: {
+  type: BANNED_PROPERTY_CALL
+  error_message: 'Map.prototype.keys is not allowed'
+  value: 'Map.prototype.keys'
+}
+
+requirement: {
+  type: BANNED_PROPERTY_CALL
+  error_message: 'Map.prototype.values is not allowed'
+  value: 'Map.prototype.values'
+}
+
+requirement: {
+  type: BANNED_PROPERTY_CALL
+  error_message: 'Map.prototype.entries is not allowed'
+  value: 'Map.prototype.entries'
+}
+
+# WeakMap
+
+requirement: {
+  type: BANNED_CODE_PATTERN
+  error_message: 'Cannot construct WeakMap with Iterable'
+  value: '/** @param {Array|Object} a */function template(a) {new WeakMap(a)}'
+}
+
+requirement: {
+  type: BANNED_PROPERTY_CALL
+  error_message: 'WeakMap.prototype.keys is not allowed'
+  value: 'WeakMap.prototype.keys'
+}
+
+requirement: {
+  type: BANNED_PROPERTY_CALL
+  error_message: 'WeakMap.prototype.values is not allowed'
+  value: 'WeakMap.prototype.values'
+}
+
+requirement: {
+  type: BANNED_PROPERTY_CALL
+  error_message: 'WeakMap.prototype.entries is not allowed'
+  value: 'WeakMap.prototype.entries'
+}
+
+requirement: {
+  type: BANNED_PROPERTY_CALL
+  error_message: 'WeakMap.prototype.clear is not allowed'
+  value: 'WeakMap.prototype.clear'
+}
+
+# Set
+
+requirement: {
+  type: BANNED_CODE_PATTERN
+  error_message: 'Cannot construct Set with Iterable'
+  value: '/** @param {Array|Object} a */function template(a) {new Set(a)}'
+}
+
+requirement: {
+  type: BANNED_PROPERTY_CALL
+  error_message: 'Set.prototype.keys is not allowed'
+  value: 'Set.prototype.keys'
+}
+
+requirement: {
+  type: BANNED_PROPERTY_CALL
+  error_message: 'Set.prototype.values is not allowed'
+  value: 'Set.prototype.values'
+}
+
+requirement: {
+  type: BANNED_PROPERTY_CALL
+  error_message: 'Set.prototype.entries is not allowed'
+  value: 'Set.prototype.entries'
+}
+
 # Math
 
 requirement: {
@@ -267,25 +363,7 @@ requirement: {
 
 requirement: {
   type: BANNED_NAME
-  error_message: 'Map is not allowed'
-  value: 'Map'
-}
-
-requirement: {
-  type: BANNED_NAME
-  error_message: 'WeakMap is not allowed'
-  value: 'WeakMap'
-}
-
-requirement: {
-  type: BANNED_NAME
-  error_message: 'Set is not allowed'
-  value: 'Set'
-}
-
-requirement: {
-  type: BANNED_NAME
-  error_message: 'WeakSet is not allowed'
+  error_message: 'WeakSet is not allowed. You can use a WeakMap instead'
   value: 'WeakSet'
 }
 
@@ -303,51 +381,52 @@ requirement: {
 
 requirement: {
   type: BANNED_NAME
-  error_message: 'Use parseJson instead. Usage in 3p ads can be whitelisted for now.'
+  error_message: 'Use parseJson instead. Usage in 3p ads can be allowlisted for now.'
   value: 'JSON.parse'
-  whitelist: 'ads/adfox.js'
-  whitelist: 'ads/adincube.js'
-  whitelist: 'ads/imedia.js'
-  whitelist: 'ads/kargo.js'
-  whitelist: 'ads/mads.js'
-  whitelist: 'ads/google/imaVideo.js'
-  whitelist: 'ads/zen.js'
-  whitelist: 'extensions/amp-viewer-integration/0.1/messaging/messaging.js' # published as standalone library
-  whitelist: 'src/json.js' # Where parseJson itself is implemented.
+  allowlist: 'ads/vendors/adfox.js'
+  allowlist: 'ads/vendors/adincube.js'
+  allowlist: 'ads/vendors/imedia.js'
+  allowlist: 'ads/vendors/kargo.js'
+  allowlist: 'ads/vendors/mads.js'
+  allowlist: 'ads/google/ima/ima-video.js'
+  allowlist: 'ads/vendors/zen.js'
+  allowlist: 'extensions/amp-viewer-integration/0.1/messaging/messaging.js' # published as standalone library
+  allowlist: 'src/core/types/object/json.js' # Where parseJson itself is implemented.
+  allowlist_regexp: '.*\\.jss\\.js'
 }
 
 requirement: {
   type: BANNED_PROPERTY_READ
-  error_message: 'Use eventHelper#getData to read the data property. OK to whitelist 3p ads for now.'
+  error_message: 'Use eventHelper#getData to read the data property. OK to allowlist 3p ads for now.'
   value: 'Event.prototype.data'
   value: 'MessageEvent.prototype.data'
-  whitelist: 'src/event-helper.js' # getData is implemented here
-  whitelist: 'src/web-worker/amp-worker.js' # OK to use in version bound worker
-  whitelist: 'src/web-worker/web-worker.js' # OK to use in version bound worker
+  allowlist: 'src/event-helper.js' # getData is implemented here
+  allowlist: 'src/web-worker/amp-worker.js' # OK to use in version bound worker
+  allowlist: 'src/web-worker/web-worker.js' # OK to use in version bound worker
 
   # 3p ads are OK
-  whitelist: 'ads/adfox.js'
-  whitelist: 'ads/google/imaVideo.js'
-  whitelist: 'ads/netletix.js'
-  whitelist: 'ads/yandex.js'
-  whitelist: 'extensions/amp-access/0.1/amp-access-iframe.js' # False-positive
-  whitelist: 'extensions/amp-access/0.1/iframe-api/messenger.js' # 3p-intent
-  whitelist: 'src/service/history-impl.js' # False-positive
-  whitelist: 'extensions/amp-viewer-integration/0.1/messaging/messaging.js' # published as standalone library
+  allowlist: 'ads/vendors/adfox.js'
+  allowlist: 'ads/vendors/google/ima/ima-video.js'
+  allowlist: 'ads/vendors/netletix.js'
+  allowlist: 'ads/vendors/yandex.js'
+  allowlist: 'extensions/amp-access/0.1/amp-access-iframe.js' # False-positive
+  allowlist: 'extensions/amp-access/0.1/iframe-api/messenger.js' # 3p-intent
+  allowlist: 'src/service/history-impl.js' # False-positive
+  allowlist: 'extensions/amp-viewer-integration/0.1/messaging/messaging.js' # published as standalone library
 }
 
 requirement: {
   type: BANNED_PROPERTY_READ
-  error_message: 'Use eventHelper#getDetail to read the detail property. OK to whitelist 3p ads for now.'
+  error_message: 'Use eventHelper#getDetail to read the detail property. OK to allowlist 3p ads for now.'
   value: 'Event.prototype.detail'
   value: 'MessageEvent.prototype.detail'
-  whitelist: 'src/event-helper.js' # getDetail is implemented here
+  allowlist: 'src/event-helper.js' # getDetail is implemented here
 
   # 3p ads are OK
-  whitelist: 'ads/adhese.js'
-  whitelist: 'ads/loka.js'
-  whitelist: 'ads/nativery.js'
-  whitelist: 'ads/xlift.js'
+  allowlist: 'ads/vendors/adhese.js'
+  allowlist: 'ads/vendors/loka.js'
+  allowlist: 'ads/vendors/nativery.js'
+  allowlist: 'ads/vendors/xlift.js'
 }
 
 requirement: {
@@ -355,12 +434,12 @@ requirement: {
   error_message: 'postMessage must be called with a string or a JsonObject'
   value: 'Window.prototype.postMessage:function((string|?JsonObject), string, (Array|Transferable)=)'
   # Guaranteed same version call
-  whitelist: 'src/web-worker/web-worker.js'
+  allowlist: 'src/web-worker/web-worker.js'
   # Allowing violations in ads code for now.
   # We would have to fix this to property obfuscated the 3p frame code.
-  whitelist: '3p/iframe-messaging-client.js'
-  whitelist: 'ads/google/deprecated_doubleclick.js'
-  whitelist: 'ads/google/imaVideo.js'
+  allowlist: '3p/iframe-messaging-client.js'
+  allowlist: 'ads/google/deprecated_doubleclick.js'
+  allowlist: 'ads/google/ima/ima-video.js'
 }
 
 requirement: {
@@ -371,7 +450,7 @@ requirement: {
   value: 'JSON.stringify:function((?JsonObject|AmpViewerMessage|string|number|boolean|undefined|Array),!Function=)'
   # Allowing violations in ads code for now.
   # We would have to fix this to property obfuscated the 3p frame code.
-  whitelist: 'ads/google/deprecated_doubleclick.js'
+  allowlist: 'ads/google/deprecated_doubleclick.js'
 }
 
 # Cookies
@@ -380,7 +459,7 @@ requirement: {
   type: BANNED_PROPERTY
   error_message: 'Use cookies#getCookie or cookies#setCookie to read or write cookies. Note that usage of cookies requires dedicated review due to being privacy sensitive. Please file an issue asking for permission to use if you have not yet done so'
   value: 'Document.prototype.cookie'
-  whitelist: 'src/cookies.js'
+  allowlist: 'src/cookies.js'
 }
 
 requirement: {
@@ -388,11 +467,11 @@ requirement: {
   error_message: 'Usage of cookies requires dedicated review due to being privacy sensitive. Please file an issue asking for permission to use if you have not yet done so'
   value: 'module$src$cookies.getCookie'
   value: 'module$src$cookies.setCookie'
-  whitelist: 'src/cookies.js'
-  whitelist: 'src/experiments.js'
-  whitelist: 'src/service/cid-api.js'
-  whitelist: 'src/service/cid-impl.js'
-  whitelist: 'extensions/amp-analytics/0.1/cookie-writer.js'
+  allowlist: 'src/cookies.js'
+  allowlist: 'src/experiments/index.js'
+  allowlist: 'src/service/cid-api.js'
+  allowlist: 'src/service/cid-impl.js'
+  allowlist: 'extensions/amp-analytics/0.1/cookie-writer.js'
 }
 
 # Function
@@ -418,7 +497,7 @@ requirement: {
   value: 'DocumentType.prototype.remove'
   value: 'Element.prototype.remove'
   value: 'CharacterData.prototype.remove'
-  whitelist: 'extensions/amp-inputmask/0.1/mask-impl.js'
+  allowlist: 'extensions/amp-inputmask/0.1/mask-impl.js'
 }
 
 requirement: {
diff --git a/build-system/test-configs/dep-check-config.js b/build-system/test-configs/dep-check-config.js
index bdca6cc1e2a37..eb9d760c96aa3 100644
--- a/build-system/test-configs/dep-check-config.js
+++ b/build-system/test-configs/dep-check-config.js
@@ -17,22 +17,6 @@
 
 /*eslint "max-len": 0*/
 
-/**
- * - type - Is assumed to be "forbidden" if not provided.
- * - filesMatching - Is assumed to be all files if not provided.
- * - mustNotDependOn - If type is "forbidden" (default) then the files
- *     matched must not match the glob(s) provided.
- * - allowlist - Skip rule if this particular dependency is found.
- *     Syntax: fileAGlob->fileB where -> reads "depends on"
- * @typedef {{
- *   type: (string|undefined),
- *   filesMatching: (string|!Array<string>|undefined),
- *   mustNotDependOn: (string|!Array<string>|undefined),
- *   allowlist: (string|!Array<string>|undefined),
- * }}
- */
-let RuleConfigDef;
-
 // It is often OK to add things to the allowlist, but make sure to highlight
 // this in review.
 exports.rules = [
@@ -82,16 +66,16 @@ exports.rules = [
       'extensions/amp-list/**->third_party/set-dom/set-dom.js',
       'extensions/amp-mustache/**/amp-mustache.js->third_party/mustache/mustache.js',
       'extensions/amp-recaptcha-input/**/*.js->third_party/amp-toolbox-cache-url/dist/amp-toolbox-cache-url.esm.js',
-      'extensions/amp-social-share/1.0/social-share.js->third_party/optimized-svg-icons/social-share-svgs.js',
+      'extensions/amp-resize-observer-polyfill/**/*.js->third_party/resize-observer-polyfill/ResizeObserver.install.js',
+      'extensions/amp-story-360/0.1/amp-story-360.js->third_party/zuho/zuho.js',
       'extensions/amp-subscriptions-google/**/*.js->third_party/subscriptions-project/swg.js',
+      'extensions/amp-subscriptions-google/**/*.js->third_party/subscriptions-project/swg-gaa.js',
       'extensions/amp-subscriptions/**/*.js->third_party/subscriptions-project/aes_gcm.js',
       'extensions/amp-subscriptions/**/*.js->third_party/subscriptions-project/config.js',
-      'extensions/amp-timeago/0.1/amp-timeago.js->third_party/timeagojs/timeago.js',
-      'extensions/amp-timeago/1.0/timeago.js->third_party/timeagojs/timeago.js',
-      'src/css.js->third_party/css-escape/css-escape.js',
+      'extensions/amp-google-assistant-assistjs/**/*.js->third_party/closure-responding-channel/closure-bundle.js',
+      'src/core/dom/css.js->third_party/css-escape/css-escape.js',
       'src/sanitizer.js->third_party/caja/html-sanitizer.js',
       'src/shadow-embed.js->third_party/webcomponentsjs/ShadowCSS.js',
-      'third_party/timeagojs/timeago.js->third_party/timeagojs/timeago-locales.js',
     ],
   },
   // Rules for 3p
@@ -99,23 +83,29 @@ exports.rules = [
     filesMatching: '3p/**/*.js',
     mustNotDependOn: 'src/**/*.js',
     allowlist: [
-      '3p/**->src/utils/function.js',
-      '3p/**->src/utils/object.js',
+      '3p/**->src/core/constants/amp-events.js',
+      '3p/**->src/core/data-structures/observable.js',
+      '3p/**->src/core/data-structures/promise.js',
+      '3p/**->src/core/error/index.js',
+      '3p/**->src/core/types/enum.js',
+      '3p/**->src/core/types/function/index.js',
+      '3p/**->src/core/types/index.js',
+      '3p/**->src/core/types/object/index.js',
+      '3p/**->src/core/types/string/index.js',
+      '3p/**->src/core/types/string/url.js',
       '3p/**->src/log.js',
-      '3p/**->src/types.js',
-      '3p/**->src/string.js',
       '3p/**->src/style.js',
       '3p/**->src/url.js',
       '3p/**->src/config.js',
       '3p/**->src/mode.js',
-      '3p/**->src/json.js',
+      '3p/**->src/core/types/object/json.js',
       '3p/**->src/3p-frame-messaging.js',
-      '3p/**->src/observable.js',
-      '3p/**->src/amp-events.js',
       '3p/**->src/internal-version.js',
       '3p/polyfills.js->src/polyfills/math-sign.js',
       '3p/polyfills.js->src/polyfills/object-assign.js',
       '3p/polyfills.js->src/polyfills/object-values.js',
+      '3p/polyfills.js->src/polyfills/string-starts-with.js',
+      '3p/polyfills.js->src/polyfills/promise.js',
       '3p/messaging.js->src/event-helper.js',
       '3p/bodymovinanimation.js->src/event-helper.js',
       '3p/iframe-messaging-client.js->src/event-helper.js',
@@ -131,30 +121,35 @@ exports.rules = [
     filesMatching: 'ads/**/*.js',
     mustNotDependOn: 'src/**/*.js',
     allowlist: [
-      'ads/**->src/utils/dom-fingerprint.js',
-      'ads/**->src/utils/object.js',
-      'ads/**->src/utils/rate-limit.js',
+      'ads/**->src/core/dom/fingerprint.js',
+      'ads/**->src/core/constants/consent-state.js',
+      'ads/**->src/core/error/index.js',
+      'ads/**->src/core/types/array.js',
+      'ads/**->src/core/types/function/index.js',
+      'ads/**->src/core/types/index.js',
+      'ads/**->src/core/types/object/index.js',
+      'ads/**->src/core/types/string/index.js',
+      'ads/**->src/core/types/string/url.js',
       'ads/**->src/log.js',
       'ads/**->src/mode.js',
       'ads/**->src/url.js',
-      'ads/**->src/types.js',
-      'ads/**->src/string.js',
+      'ads/**->src/static-template.js',
       'ads/**->src/style.js',
-      'ads/**->src/consent-state.js',
       'ads/**->src/internal-version.js',
       // ads/google/a4a doesn't contain 3P ad code and should probably move
       // somewhere else at some point
       'ads/google/a4a/**->src/ad-cid.js',
       'ads/google/a4a/**->src/consent.js',
       'ads/google/a4a/**->src/dom.js',
-      'ads/google/a4a/**->src/experiments.js',
+      'ads/google/a4a/**->src/experiments/index.js',
       'ads/google/a4a/**->src/services.js',
       'ads/google/a4a/utils.js->src/service/variable-source.js',
       'ads/google/a4a/utils.js->src/ini-load.js',
+      'ads/google/a4a/utils.js->src/utils/page-layout-box.js',
       // Some ads need to depend on json.js
-      'ads/**->src/json.js',
+      'ads/**->src/core/types/object/json.js',
       // IMA, similar to other non-Ad 3Ps above, needs access to event-helper
-      'ads/google/imaVideo.js->src/event-helper.js',
+      'ads/google/ima/ima-video.js->src/event-helper.js',
     ],
   },
   {
@@ -162,6 +157,7 @@ exports.rules = [
     mustNotDependOn: 'extensions/**/*.js',
     allowlist: [
       // See todo note in ads/_a4a-config.js
+      'ads/google/a4a/utils.js->extensions/amp-geo/0.1/amp-geo-in-group.js',
     ],
   },
   // Rules for extensions and main src.
@@ -183,6 +179,7 @@ exports.rules = [
     mustNotDependOn: 'extensions/**/*.js',
     allowlist: [
       // a4a ads depend on a4a.
+      'extensions/amp-ad-network-nws-impl/0.1/amp-ad-network-nws-impl.js->extensions/amp-a4a/0.1/amp-a4a.js',
       'extensions/amp-ad-network-fake-impl/0.1/amp-ad-network-fake-impl.js->extensions/amp-a4a/0.1/amp-a4a.js',
       'extensions/amp-ad-network-adzerk-impl/0.1/amp-ad-network-adzerk-impl.js->extensions/amp-a4a/0.1/amp-a4a.js',
       'extensions/amp-ad-network-smartads-impl/0.1/amp-ad-network-smartads-impl.js->extensions/amp-a4a/0.1/amp-a4a.js',
@@ -190,6 +187,11 @@ exports.rules = [
       'extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js->extensions/amp-a4a/0.1/amp-a4a.js',
       'extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js->extensions/amp-a4a/0.1/amp-a4a.js',
       'extensions/amp-ad-network-oblivki-impl/0.1/amp-ad-network-oblivki-impl.js->extensions/amp-a4a/0.1/amp-a4a.js',
+      'extensions/amp-ad-network-valueimpression-impl/0.1/amp-ad-network-valueimpression-impl.js->extensions/amp-a4a/0.1/amp-a4a.js',
+
+      // A4A impls importing amp fast fetch header name
+      'extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js->extensions/amp-a4a/0.1/signature-verifier.js',
+      'extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js->extensions/amp-a4a/0.1/signature-verifier.js',
 
       // And a few mrore things depend on a4a.
       'extensions/amp-ad-custom/0.1/amp-ad-custom.js->extensions/amp-a4a/0.1/amp-ad-network-base.js',
@@ -199,9 +201,9 @@ exports.rules = [
       'extensions/amp-ad-custom/0.1/amp-ad-custom.js->extensions/amp-a4a/0.1/template-validator.js',
       'extensions/amp-ad-network-adzerk-impl/0.1/amp-ad-network-adzerk-impl.js->extensions/amp-a4a/0.1/amp-ad-template-helper.js',
       'extensions/amp-ad-network-adzerk-impl/0.1/amp-ad-network-adzerk-impl.js->extensions/amp-a4a/0.1/amp-ad-type-defs.js',
-      'extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js->extensions/amp-a4a/0.1/callout-vendors.js',
-      'extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js->extensions/amp-a4a/0.1/real-time-config-manager.js',
+      'extensions/amp-ad-network-adzerk-impl/0.1/amp-ad-network-adzerk-impl.js->extensions/amp-a4a/0.1/amp-ad-utils.js',
       'extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js->extensions/amp-a4a/0.1/refresh-manager.js',
+      'extensions/amp-ad-network-valueimpression-impl/0.1/amp-ad-network-valueimpression-impl.js->extensions/amp-a4a/0.1/refresh-manager.js',
 
       // AMP access depends on AMP access
       'extensions/amp-access-scroll/0.1/scroll-impl.js->extensions/amp-access/0.1/amp-access-client.js',
@@ -221,37 +223,78 @@ exports.rules = [
       'extensions/amp-carousel/0.2/amp-carousel.js->extensions/amp-base-carousel/0.1/child-layout-manager.js',
       'extensions/amp-inline-gallery/0.1/amp-inline-gallery.js->extensions/amp-base-carousel/0.1/carousel-events.js',
       'extensions/amp-inline-gallery/0.1/amp-inline-gallery-thumbnails.js->extensions/amp-base-carousel/0.1/carousel-events.js',
+      'extensions/amp-inline-gallery/1.0/base-element.js->extensions/amp-base-carousel/1.0/carousel-props.js',
+      'extensions/amp-inline-gallery/1.0/amp-inline-gallery-pagination.js->extensions/amp-base-carousel/1.0/carousel-props.js',
+      'extensions/amp-inline-gallery/1.0/component.js->extensions/amp-base-carousel/1.0/carousel-context.js',
+      'extensions/amp-inline-gallery/1.0/pagination.js->extensions/amp-base-carousel/1.0/carousel-context.js',
+      'extensions/amp-inline-gallery/1.0/amp-inline-gallery-thumbnails.js->extensions/amp-base-carousel/1.0/component.jss.js',
+      'extensions/amp-inline-gallery/1.0/amp-inline-gallery-thumbnails.js->extensions/amp-base-carousel/1.0/carousel-props.js',
+      'extensions/amp-inline-gallery/1.0/thumbnails.js->extensions/amp-base-carousel/1.0/component.js',
+      'extensions/amp-inline-gallery/1.0/thumbnails.js->extensions/amp-base-carousel/1.0/carousel-context.js',
       'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/action-source.js',
       'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/carousel.js',
       'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/carousel-events.js',
       'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/child-layout-manager.js',
       'extensions/amp-stream-gallery/0.1/amp-stream-gallery.js->extensions/amp-base-carousel/0.1/responsive-attributes.js',
+      'extensions/amp-stream-gallery/1.0/base-element.js->extensions/amp-base-carousel/1.0/component.jss.js',
+      'extensions/amp-stream-gallery/1.0/component.js->extensions/amp-base-carousel/1.0/component.js',
+
+      // Autolightboxing dependencies
+      'extensions/amp-base-carousel/1.0/component.js->extensions/amp-lightbox-gallery/1.0/component.js',
+      'extensions/amp-base-carousel/1.0/scroller.js->extensions/amp-lightbox-gallery/1.0/context.js',
+      'extensions/amp-lightbox-gallery/1.0/provider.js->extensions/amp-lightbox/1.0/component.js',
 
       // Facebook components
       'extensions/amp-facebook-page/0.1/amp-facebook-page.js->extensions/amp-facebook/0.1/facebook-loader.js',
       'extensions/amp-facebook-comments/0.1/amp-facebook-comments.js->extensions/amp-facebook/0.1/facebook-loader.js',
+      'extensions/amp-facebook-comments/1.0/amp-facebook-comments.js->extensions/amp-facebook/0.1/facebook-loader.js',
+
+      // VideoBaseElement, VideoIframe and VideoWrapper are meant to be shared.
+      'extensions/**->extensions/amp-video/1.0/base-element.js',
+      'extensions/**->extensions/amp-video/1.0/video-iframe.js',
+
+      // <amp-video-iframe> versions share this message API definition.
+      'extensions/amp-video-iframe/**->extensions/amp-video-iframe/amp-video-iframe-api.js',
+
+      // <amp-vimeo> versions share this message API definition.
+      'extensions/amp-vimeo/**->extensions/amp-vimeo/vimeo-api.js',
 
       // Amp geo in group enum
+      'extensions/amp-a4a/0.1/amp-a4a.js->extensions/amp-geo/0.1/amp-geo-in-group.js',
       'extensions/amp-consent/0.1/consent-config.js->extensions/amp-geo/0.1/amp-geo-in-group.js',
       'extensions/amp-user-notification/0.1/amp-user-notification.js->extensions/amp-geo/0.1/amp-geo-in-group.js',
 
       // AMP Story
-      'extensions/amp-story/0.1/animation.js->extensions/amp-animation/0.1/web-animation-types.js',
       'extensions/amp-story/1.0/animation-types.js->extensions/amp-animation/0.1/web-animation-types.js',
+      // AMP Story 360
+      'extensions/amp-story-360/0.1/amp-story-360.js->extensions/amp-story/1.0/amp-story-store-service.js',
+      'extensions/amp-story-360/0.1/amp-story-360.js->extensions/amp-story/1.0/utils.js',
+      // AMP Story Panning Media
+      'extensions/amp-story-panning-media/0.1/amp-story-panning-media.js->extensions/amp-story/1.0/amp-story-store-service.js',
       // Story ads
+      'extensions/amp-story-auto-ads/0.1/algorithm-count-pages.js->extensions/amp-story/1.0/amp-story-store-service.js',
+      'extensions/amp-story-auto-ads/0.1/algorithm-predetermined.js->extensions/amp-story/1.0/amp-story-store-service.js',
       'extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js->extensions/amp-story/1.0/amp-story-store-service.js',
       'extensions/amp-story-auto-ads/0.1/story-ad-page.js->extensions/amp-story/1.0/amp-story-store-service.js',
+      'extensions/amp-story-auto-ads/0.1/story-ad-page-manager.js->extensions/amp-story/1.0/amp-story-store-service.js',
       'extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js->extensions/amp-story/1.0/events.js',
       // TODO(#24080) Remove this when story ads have full ad network support.
       'extensions/amp-story-auto-ads/0.1/story-ad-page.js->extensions/amp-ad-exit/0.1/config.js',
       // TODO(ccordry): remove this after createShadowRootWithStyle is moved to src
       'extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js->extensions/amp-story/1.0/utils.js',
-      'extensions/amp-story-auto-ads/0.1/story-ad-page.js->extensions/amp-story/1.0/utils.js',
+      'extensions/amp-story-auto-ads/0.1/story-ad-ui.js->extensions/amp-story/1.0/utils.js',
       // Story education
       'extensions/amp-story-education/0.1/amp-story-education.js->extensions/amp-story/1.0/amp-story-store-service.js',
       'extensions/amp-story-education/0.1/amp-story-education.js->extensions/amp-story/1.0/utils.js',
       'extensions/amp-story-education/0.1/amp-story-education.js->extensions/amp-story/1.0/amp-story-localization-service.js',
 
+      // Interactive components that depend on story functionality.
+      'extensions/amp-story-interactive/0.1/amp-story-interactive-abstract.js->extensions/amp-story/1.0/amp-story-store-service.js',
+      'extensions/amp-story-interactive/0.1/amp-story-interactive-abstract.js->extensions/amp-story/1.0/story-analytics.js',
+      'extensions/amp-story-interactive/0.1/amp-story-interactive-abstract.js->extensions/amp-story/1.0/utils.js',
+      'extensions/amp-story-interactive/0.1/amp-story-interactive-abstract.js->extensions/amp-story/1.0/variable-service.js',
+      'extensions/amp-story-interactive/0.1/amp-story-interactive-results.js->extensions/amp-story/1.0/amp-story-store-service.js',
+
       // Subscriptions.
       'extensions/amp-subscriptions/0.1/expr.js->extensions/amp-access/0.1/access-expr.js',
       'extensions/amp-subscriptions/0.1/local-subscription-platform-iframe.js->extensions/amp-access/0.1/iframe-api/messenger.js',
@@ -261,6 +304,7 @@ exports.rules = [
       'extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js->extensions/amp-subscriptions/0.1/doc-impl.js',
       'extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js->extensions/amp-subscriptions/0.1/entitlement.js',
       'extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js->extensions/amp-subscriptions/0.1/constants.js',
+      'extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js->extensions/amp-subscriptions/0.1/url-builder.js',
 
       // amp-smartlinks depends on amp-skimlinks/link-rewriter
       'extensions/amp-smartlinks/0.1/amp-smartlinks.js->extensions/amp-skimlinks/0.1/link-rewriter/link-rewriter-manager.js',
@@ -275,6 +319,16 @@ exports.rules = [
         'src/service/variable-source.js',
       'extensions/amp-a4a/0.1/amp-a4a.js->' +
         'src/service/url-replacements-impl.js',
+      // Real time config.
+      'extensions/amp-a4a/0.1/amp-a4a.js->' +
+        'src/service/real-time-config/real-time-config-impl.js',
+      // Parsing extension urls.
+      'extensions/amp-a4a/0.1/head-validation.js->' +
+        'src/service/extension-script.js',
+      'extensions/amp-a4a/0.1/amp-ad-utils.js->' +
+        'src/service/extension-script.js',
+      'extensions/amp-live-list/0.1/live-list-manager.js->' +
+        'src/service/extension-script.js',
       'extensions/amp-video/0.1/amp-video.js->' +
         'src/service/video-manager-impl.js',
       'extensions/amp-video-iframe/0.1/amp-video-iframe.js->' +
@@ -315,8 +369,6 @@ exports.rules = [
         'src/service/video-manager-impl.js',
       'extensions/amp-delight-player/0.1/amp-delight-player.js->' +
         'src/service/video-manager-impl.js',
-      'extensions/amp-analytics/0.1/iframe-transport.js->' +
-        'src/service/jank-meter.js',
       'extensions/amp-position-observer/0.1/amp-position-observer.js->' +
         'src/service/position-observer/position-observer-impl.js',
       'extensions/amp-position-observer/0.1/amp-position-observer.js->' +
@@ -325,12 +377,10 @@ exports.rules = [
         'src/service/position-observer/position-observer-impl.js',
       'extensions/amp-fx-collection/0.1/providers/fx-provider.js->' +
         'src/service/position-observer/position-observer-worker.js',
-      'extensions/amp-video-docking/0.1/amp-video-docking.js->' +
-        'src/service/position-observer/position-observer-impl.js',
-      'extensions/amp-video-docking/0.1/amp-video-docking.js->' +
-        'src/service/position-observer/position-observer-worker.js',
       'extensions/amp-analytics/0.1/cookie-writer.js->' +
         'src/service/cid-impl.js',
+      'extensions/amp-consent/0.1/cookie-writer.js->' +
+        'src/service/cid-impl.js',
       'extensions/amp-next-page/0.1/next-page-service.js->' +
         'src/service/position-observer/position-observer-impl.js',
       'extensions/amp-next-page/0.1/next-page-service.js->' +
@@ -356,9 +406,9 @@ exports.rules = [
         'src/service/navigation.js',
       'extensions/amp-skimlinks/0.1/link-rewriter/link-rewriter-manager.js->' +
         'src/service/navigation.js',
-      // Accessing extension-location.calculateExtensionScriptUrl().
+      // Accessing extension-script.calculateExtensionScriptUrl().
       'extensions/amp-script/0.1/amp-script.js->' +
-        'src/service/extension-location.js',
+        'src/service/extension-script.js',
       // Origin experiments.
       'extensions/amp-experiment/1.0/amp-experiment.js->' +
         'src/service/origin-experiments-impl.js',
@@ -366,71 +416,76 @@ exports.rules = [
       'extensions/amp-link-rewriter/0.1/amp-link-rewriter.js->' +
         'src/service/navigation.js',
       // For localization.
-      'extensions/amp-story/0.1/amp-story-localization-service.js->src/service/localization.js',
       'extensions/amp-story/1.0/amp-story-localization-service.js->src/service/localization.js',
       'extensions/amp-story-auto-ads/0.1/story-ad-localization.js->src/service/localization.js',
       // Accessing calculateScriptBaseUrl() for vendor config URLs
       'extensions/amp-analytics/0.1/config.js->' +
-        'src/service/extension-location.js',
+        'src/service/extension-script.js',
       // Experiment moving Fixed Layer to extension
       'extensions/amp-viewer-integration/0.1/amp-viewer-integration.js->' +
         'src/service/fixed-layer.js',
+      // Ads remote config manager
+      'extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js->src/service/real-time-config/callout-vendors.js',
+      'extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js->src/service/real-time-config/real-time-config-impl.js',
+      'extensions/amp-ad-network-valueimpression-impl/0.1/amp-ad-network-valueimpression-impl.js->src/service/real-time-config/real-time-config-impl.js',
     ],
   },
   {
     filesMatching: 'extensions/**/*.js',
     mustNotDependOn: 'src/base-element.js',
   },
-  {
-    filesMatching: 'src/polyfills/**/*.js',
-    mustNotDependOn: '**/*.js',
-    allowlist: [
-      'src/polyfills/fetch.js->src/log.js',
-      'src/polyfills/fetch.js->src/types.js',
-      'src/polyfills/fetch.js->src/json.js',
-      'src/polyfills/fetch.js->src/utils/object.js',
-      'src/polyfills/fetch.js->src/utils/bytes.js',
-      'src/polyfills/intersection-observer.js->src/polyfillstub/intersection-observer-stub.js',
-      'src/polyfills/promise.js->node_modules/promise-pjs/promise.js',
-      'src/polyfills/custom-elements.js->src/resolved-promise.js',
-    ],
-  },
-  {
-    filesMatching: 'src/polyfillstub/**/*.js',
-    mustNotDependOn: '**/*.js',
-    allowlist: [
-      'src/polyfillstub/intersection-observer-stub.js->src/services.js',
-      'src/polyfillstub/intersection-observer-stub.js->src/resolved-promise.js',
-    ],
-  },
   {
     filesMatching: '**/*.js',
-    mustNotDependOn: 'src/polyfills/**/*.js',
+    mustNotDependOn: 'src/polyfills/*.js',
     allowlist: [
       // DO NOT add extensions/ files
       '3p/polyfills.js->src/polyfills/math-sign.js',
       '3p/polyfills.js->src/polyfills/object-assign.js',
       '3p/polyfills.js->src/polyfills/object-values.js',
-      'src/polyfills.js->src/polyfills/domtokenlist.js',
-      'src/polyfills.js->src/polyfills/document-contains.js',
-      'src/polyfills.js->src/polyfills/fetch.js',
-      'src/polyfills.js->src/polyfills/math-sign.js',
-      'src/polyfills.js->src/polyfills/object-assign.js',
-      'src/polyfills.js->src/polyfills/object-values.js',
-      'src/polyfills.js->src/polyfills/promise.js',
-      'src/polyfills.js->src/polyfills/array-includes.js',
-      'src/polyfills.js->src/polyfills/custom-elements.js',
-      'src/polyfills.js->src/polyfills/intersection-observer.js',
+      '3p/polyfills.js->src/polyfills/promise.js',
+      '3p/polyfills.js->src/polyfills/string-starts-with.js',
+      'src/amp.js->src/polyfills/index.js',
+      'src/polyfills/index.js->src/polyfills/abort-controller.js',
+      'src/polyfills/index.js->src/polyfills/domtokenlist.js',
+      'src/polyfills/index.js->src/polyfills/document-contains.js',
+      'src/polyfills/index.js->src/polyfills/fetch.js',
+      'src/polyfills/index.js->src/polyfills/get-bounding-client-rect.js',
+      'src/polyfills/index.js->src/polyfills/math-sign.js',
+      'src/polyfills/index.js->src/polyfills/object-assign.js',
+      'src/polyfills/index.js->src/polyfills/object-values.js',
+      'src/polyfills/index.js->src/polyfills/promise.js',
+      'src/polyfills/index.js->src/polyfills/array-includes.js',
+      'src/polyfills/index.js->src/polyfills/string-starts-with.js',
+      'src/polyfills/index.js->src/polyfills/custom-elements.js',
+      'src/polyfills/index.js->src/polyfills/intersection-observer.js',
+      'src/polyfills/index.js->src/polyfills/resize-observer.js',
+      'src/polyfills/index.js->src/polyfills/map-set.js',
+      'src/polyfills/index.js->src/polyfills/set-add.js',
+      'src/polyfills/index.js->src/polyfills/weakmap-set.js',
+      'src/friendly-iframe-embed.js->src/polyfills/abort-controller.js',
       'src/friendly-iframe-embed.js->src/polyfills/custom-elements.js',
       'src/friendly-iframe-embed.js->src/polyfills/document-contains.js',
       'src/friendly-iframe-embed.js->src/polyfills/domtokenlist.js',
       'src/friendly-iframe-embed.js->src/polyfills/intersection-observer.js',
+      'src/friendly-iframe-embed.js->src/polyfills/resize-observer.js',
     ],
   },
   {
     filesMatching: '**/*.js',
-    mustNotDependOn: 'src/polyfills.js',
-    allowlist: ['src/amp.js->src/polyfills.js'],
+    mustNotDependOn: 'src/polyfills/index.js',
+    allowlist: ['src/amp.js->src/polyfills/index.js'],
+  },
+
+  // Base assertions should never be used explicitly; only the user/dev wrappers
+  // or the Log class should have access to the base implementations.
+  {
+    filesMatching: '**/*.js',
+    mustNotDependOn: 'src/core/assert/base.js',
+    allowlist: [
+      'src/core/assert/dev.js->src/core/assert/base.js',
+      'src/core/assert/user.js->src/core/assert/base.js',
+      'src/log.js->src/core/assert/base.js',
+    ],
   },
 
   // Rules for main src.
@@ -443,6 +498,16 @@ exports.rules = [
     mustNotDependOn: 'ads/**/*.js',
     allowlist: 'src/ad-cid.js->ads/_config.js',
   },
+  {
+    filesMatching: '**/*.js',
+    mustNotDependOn: 'src/service/custom-element-registry.js',
+    allowlist: [
+      'builtins/**->src/service/custom-element-registry.js',
+      'src/amp.js->src/service/custom-element-registry.js',
+      'src/runtime.js->src/service/custom-element-registry.js',
+      'src/service/extensions-impl.js->src/service/custom-element-registry.js',
+    ],
+  },
 
   // A4A
   {
@@ -473,12 +538,12 @@ exports.rules = [
     mustNotDependOn: ['ads/google/doubleclick.js'],
     allowlist: [
       /** DO NOT ADD TO ALLOWLIST */
-      'ads/ix.js->ads/google/doubleclick.js',
-      'ads/imonomy.js->ads/google/doubleclick.js',
-      'ads/navegg.js->ads/google/doubleclick.js',
+      'ads/vendors/ix.js->ads/google/doubleclick.js',
+      'ads/vendors/imonomy.js->ads/google/doubleclick.js',
+      'ads/vendors/navegg.js->ads/google/doubleclick.js',
       /** DO NOT ADD TO ALLOWLIST */
-      'ads/openx.js->ads/google/doubleclick.js',
-      'ads/pulsepoint.js->ads/google/doubleclick.js',
+      'ads/vendors/openx.js->ads/google/doubleclick.js',
+      'ads/vendors/pulsepoint.js->ads/google/doubleclick.js',
       /** DO NOT ADD TO ALLOWLIST */
     ],
   },
diff --git a/build-system/test-configs/forbidden-terms.js b/build-system/test-configs/forbidden-terms.js
new file mode 100644
index 0000000000000..13260146e55f2
--- /dev/null
+++ b/build-system/test-configs/forbidden-terms.js
@@ -0,0 +1,1170 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const requiresReviewPrivacy =
+  'Usage of this API requires dedicated review due to ' +
+  'being privacy sensitive. Please file an issue asking for permission' +
+  ' to use if you have not yet done so.';
+
+const privateServiceFactory =
+  'This service should only be installed in ' +
+  'the allowlisted files. Other modules should use a public function ' +
+  'typically called serviceNameFor.';
+
+const shouldNeverBeUsed =
+  'Usage of this API is not allowed - only for internal purposes.';
+
+const backwardCompat =
+  'This method must not be called. It is only retained ' +
+  'for backward compatibility during rollout.';
+
+const realiasGetMode =
+  'Do not re-alias getMode or its return so it can be ' +
+  'DCE\'d. Use explicitly like "getMode().localDev" instead.';
+
+/**
+ * @typedef {{
+ *   message?: (undefined|string),
+ *   allowlist?: (undefined|Array<string>),
+ *   checkInTestFolder?: (undefined|boolean),
+ *   checkProse?: (undefined|boolean),
+ * }}
+ * - message:
+ *   a message optionally displayed with a matching term
+ *
+ * - allowlist:
+ *   optional list of filepaths that are allowed to use a term
+ *
+ * - checkInTestFolder:
+ *   check term in files whose path includes /test/ (false by default)
+ *
+ * - checkProse:
+ *   check term in comments and documentation (.md) (false by default)
+ */
+let ForbiddenTermDef;
+
+/**
+ * Terms that must not appear in our source files.
+ * @const {Object<string, string|!ForbiddenTermDef>}
+ */
+const forbiddenTermsGlobal = {
+  'DO NOT SUBMIT': {
+    checkProse: true,
+  },
+  'whitelist|white-list': {
+    message: 'Please use the term allowlist instead',
+    checkProse: true,
+  },
+  'blacklist|black-list': {
+    message: 'Please use the term denylist instead',
+    checkProse: true,
+  },
+  'grandfather|grandfathered': {
+    message: 'Please use the term legacy instead',
+    checkProse: true,
+  },
+  '(^-amp-|\\W-amp-)': {
+    message: 'Switch to new internal class form',
+    allowlist: [
+      'build-system/server/amp4test.js',
+      'build-system/server/app-index/boilerplate.js',
+      'build-system/server/variable-substitution.js',
+      'extensions/amp-pinterest/0.1/amp-pinterest.css',
+      'extensions/amp-pinterest/0.1/follow-button.js',
+      'extensions/amp-pinterest/0.1/pin-widget.js',
+      'extensions/amp-pinterest/0.1/save-button.js',
+      'validator/js/engine/validator_test.js',
+    ],
+  },
+  '(^i-amp-|\\Wi-amp-)': {
+    message: 'Switch to new internal ID form',
+    allowlist: [
+      'build-system/tasks/create-golden-css/css/main.css',
+      'css/ampshared.css',
+    ],
+  },
+  'describe\\.only': {
+    message: 'Please remove all instances of describe.only',
+    allowlist: ['testing/describes.js'],
+  },
+  'describes.*\\.only': {
+    message: 'Please remove all instances of describes.only',
+  },
+  'dev\\(\\)\\.assert\\(': 'Use the devAssert function instead.',
+  '[^.]user\\(\\)\\.assert\\(': 'Use the userAssert function instead.',
+  'it\\.only': '',
+  'Math.random[^;()]*=': 'Use Sinon to stub!!!',
+  'sinon\\.(spy|stub|mock)\\(': {
+    message: 'Use a sandbox instead to avoid repeated `#restore` calls',
+  },
+  '(\\w*([sS]py|[sS]tub|[mM]ock|clock).restore)': {
+    message: 'Use a sandbox instead to avoid repeated `#restore` calls',
+  },
+  'sinon\\.useFake\\w+': {
+    message: 'Use a sandbox instead to avoid repeated `#restore` calls',
+  },
+  'sandbox\\.(spy|stub|mock)\\([^,\\s]*[iI]?frame[^,\\s]*,': {
+    message:
+      'Do NOT stub on a cross domain iframe! #5359\n' +
+      '  If this is same domain, mark /*OK*/.\n' +
+      '  If this is cross domain, overwrite the method directly.',
+  },
+  'window\\.sandbox': {
+    message: 'Usage of window.sandbox is forbidden. Use env.sandbox instead.',
+    checkInTestFolder: true,
+  },
+  'console\\.\\w+\\(': {
+    message: String(
+      'console.log is generally forbidden. For the runtime, use ' +
+        'console/*OK*/.[log|error] to allowlist a legit case. ' +
+        'For build-system, use the functions in build-system/common/logging.js.'
+    ),
+    allowlist: [
+      'build-system/common/check-package-manager.js',
+      'build-system/common/logging.js',
+      'build-system/task-runner/amp-cli-runner.js',
+      'src/purifier/noop.js',
+      'validator/js/engine/validator-in-browser.js',
+      'validator/js/engine/validator.js',
+    ],
+    checkInTestFolder: true,
+  },
+  '\\bgetModeObject\\(': {
+    message: realiasGetMode,
+    allowlist: ['src/mode-object.js', 'src/iframe-attributes.js'],
+  },
+  '(?:var|let|const) +IS_FORTESTING +=': {
+    message:
+      'IS_FORTESTING local var only allowed in mode.js and ' +
+      'dist.3p/current/integration.js',
+    allowlist: ['src/mode.js'],
+  },
+  '\\.prefetch\\(': {
+    message: 'Do not use preconnect.prefetch, use preconnect.preload instead.',
+  },
+  'iframePing': {
+    message:
+      'This is only available in vendor config for temporary workarounds.',
+    allowlist: [
+      'build-system/server/routes/analytics.js',
+      'extensions/amp-analytics/0.1/config.js',
+      'extensions/amp-analytics/0.1/requests.js',
+    ],
+  },
+  '\\.buildInternal': {
+    message: 'can only be called by the framework',
+    allowlist: [
+      'build-system/externs/amp.extern.js',
+      'src/custom-element.js',
+      'src/service/resource.js',
+      'testing/iframe.js',
+    ],
+  },
+  '\\.mountInternal': {
+    message: 'can only be called by the framework',
+    allowlist: [
+      'build-system/externs/amp.extern.js',
+      'src/service/scheduler.js',
+    ],
+  },
+  'getSchedulerForDoc': {
+    message: 'can only be used by the runtime',
+    allowlist: ['src/custom-element.js', 'src/service/scheduler.js'],
+  },
+  // Service factories that should only be installed once.
+  'installActionServiceForDoc': {
+    message: privateServiceFactory,
+    allowlist: [
+      'src/inabox/inabox-services.js',
+      'src/service/action-impl.js',
+      'src/service/core-services.js',
+    ],
+  },
+  'installActionHandler': {
+    message: privateServiceFactory,
+    allowlist: [
+      'src/service/action-impl.js',
+      'extensions/amp-access/0.1/amp-access.js',
+      'extensions/amp-form/0.1/amp-form.js',
+    ],
+  },
+  'installActivityService': {
+    message: privateServiceFactory,
+    allowlist: ['extensions/amp-analytics/0.1/activity-impl.js'],
+  },
+  'cidServiceForDocForTesting': {
+    message: privateServiceFactory,
+    allowlist: ['src/service/cid-impl.js'],
+  },
+  'installCryptoService': {
+    message: privateServiceFactory,
+    allowlist: ['src/service/core-services.js', 'src/service/crypto-impl.js'],
+  },
+  'installDocService': {
+    message: privateServiceFactory,
+    allowlist: [
+      'src/amp.js',
+      'src/amp-shadow.js',
+      'src/inabox/amp-inabox.js',
+      'src/service/ampdoc-impl.js',
+      'testing/init-tests.js',
+      'testing/describes.js',
+      'testing/iframe.js',
+    ],
+  },
+  'installMutatorServiceForDoc': {
+    message: privateServiceFactory,
+    allowlist: ['src/service/core-services.js', 'src/service/mutator-impl.js'],
+  },
+  'installPerformanceService': {
+    message: privateServiceFactory,
+    allowlist: [
+      'src/amp.js',
+      'src/inabox/amp-inabox.js',
+      'src/service/performance-impl.js',
+    ],
+  },
+  'installResourcesServiceForDoc': {
+    message: privateServiceFactory,
+    allowlist: [
+      'src/service/core-services.js',
+      'src/service/resources-impl.js',
+    ],
+  },
+  'installStorageServiceForDoc': {
+    message: privateServiceFactory,
+    allowlist: ['src/service/core-services.js', 'src/service/storage-impl.js'],
+  },
+  'installTemplatesServiceForDoc': {
+    message: privateServiceFactory,
+    allowlist: [
+      'src/inabox/inabox-services.js',
+      'src/service/core-services.js',
+      'src/service/template-impl.js',
+    ],
+  },
+  'installUrlReplacementsServiceForDoc': {
+    message: privateServiceFactory,
+    allowlist: [
+      'src/inabox/inabox-services.js',
+      'src/service/core-services.js',
+      'src/service/url-replacements-impl.js',
+    ],
+  },
+  'installViewerServiceForDoc': {
+    message: privateServiceFactory,
+    allowlist: ['src/service/core-services.js', 'src/service/viewer-impl.js'],
+  },
+  'installViewportServiceForDoc': {
+    message: privateServiceFactory,
+    allowlist: [
+      'src/service/core-services.js',
+      'src/service/viewport/viewport-impl.js',
+    ],
+  },
+  'installVsyncService': {
+    message: privateServiceFactory,
+    allowlist: ['src/service/core-services.js', 'src/service/vsync-impl.js'],
+  },
+  'installXhrService': {
+    message: privateServiceFactory,
+    allowlist: ['src/service/core-services.js', 'src/service/xhr-impl.js'],
+  },
+  'installPositionObserverServiceForDoc': {
+    message: privateServiceFactory,
+    allowlist: [
+      // Please keep list alphabetically sorted.
+      'extensions/amp-fx-collection/0.1/providers/fx-provider.js',
+      'extensions/amp-next-page/0.1/next-page-service.js',
+      'extensions/amp-next-page/1.0/visibility-observer.js',
+      'extensions/amp-position-observer/0.1/amp-position-observer.js',
+      'src/service/position-observer/position-observer-impl.js',
+    ],
+  },
+  'getServiceForDoc': {
+    message:
+      'Synchronous access to element services is unreliable (#22414). ' +
+      'Use getServicePromiseForDoc() instead.',
+    allowlist: [
+      // Do not allowlist additional "extensions/*" paths.
+      // TODO(#22414): Remove paths as they are migrated off of sync API.
+      'extensions/amp-a4a/0.1/amp-ad-template-helper.js',
+      'extensions/amp-analytics/0.1/instrumentation.js',
+      'extensions/amp-analytics/0.1/variables.js',
+      'extensions/amp-form/0.1/amp-form.js', // References service defined in amp-form.
+      'extensions/amp-form/0.1/form-dirtiness.js', // References service defined in amp-form.
+      'extensions/amp-fx-collection/0.1/providers/fx-provider.js',
+      'extensions/amp-gwd-animation/0.1/amp-gwd-animation.js',
+      'src/chunk.js',
+      'src/element-service.js',
+      'src/service.js',
+      'src/service/scheduler.js',
+      'src/service/cid-impl.js',
+      'src/service/origin-experiments-impl.js',
+      'src/service/template-impl.js',
+      'src/services.js',
+      'src/utils/display-observer.js',
+      'testing/test-helper.js',
+    ],
+  },
+  'initLogConstructor|setReportError': {
+    message: 'Should only be called from JS binary entry files.',
+    allowlist: [
+      '3p/integration-lib.js',
+      '3p/ampcontext-lib.js',
+      '3p/iframe-transport-client-lib.js',
+      '3p/recaptcha.js',
+      'ads/alp/install-alp.js',
+      'ads/inabox/inabox-host.js',
+      'extensions/amp-access/0.1/amp-login-done.js',
+      'extensions/amp-web-push/0.1/amp-web-push-helper-frame.js',
+      'src/amp-story-player/amp-story-component-manager.js',
+      'src/runtime.js',
+      'src/log.js',
+      'src/web-worker/web-worker.js',
+      'testing/async-errors.js',
+      'tools/experiments/experiments.js',
+    ],
+  },
+  'parseUrlWithA': {
+    message: 'Use parseUrl instead.',
+    allowlist: [
+      'src/url.js',
+      'src/service/url-impl.js',
+      'src/amp-story-player/amp-story-player-impl.js',
+    ],
+  },
+  '\\.sendMessage\\(': {
+    message: 'Usages must be reviewed.',
+    allowlist: [
+      // viewer-impl.sendMessage
+      'src/error-reporting.js',
+      'src/service/navigation.js',
+      'src/service/viewport/viewport-impl.js',
+      'src/service/performance-impl.js',
+      'src/service/resources-impl.js',
+      'extensions/amp-bind/0.1/bind-impl.js',
+      'extensions/amp-app-banner/0.1/amp-app-banner.js',
+      'extensions/amp-subscriptions/0.1/viewer-subscription-platform.js',
+      'extensions/amp-viewer-integration/0.1/highlight-handler.js',
+      'extensions/amp-consent/0.1/consent-ui.js',
+      'extensions/amp-story/1.0/amp-story-viewer-messaging-handler.js',
+
+      // iframe-messaging-client.sendMessage
+      '3p/iframe-messaging-client.js',
+      '3p/ampcontext.js',
+      '3p/ampcontext-integration.js',
+    ],
+  },
+  '\\.sendMessageAwaitResponse\\(': {
+    message: 'Usages must be reviewed.',
+    allowlist: [
+      'extensions/amp-access/0.1/login-dialog.js',
+      'extensions/amp-story-education/0.1/amp-story-education.js',
+      'extensions/amp-subscriptions/0.1/viewer-subscription-platform.js',
+      'src/impression.js',
+      'src/service/cid-impl.js',
+      'src/service/history-impl.js',
+      'src/service/storage-impl.js',
+      'src/ssr-template-helper.js',
+      'src/service/viewer-cid-api.js',
+      'src/utils/xhr-utils.js',
+    ],
+  },
+  // Privacy sensitive
+  'cidForDoc|cidForDocOrNull': {
+    message: requiresReviewPrivacy,
+    allowlist: [
+      // CID service is not allowed in amp4ads. No usage should there be
+      // in extensions listed in the amp4ads spec:
+      // https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec
+      'src/ad-cid.js',
+      'src/services.js',
+      'src/service/standard-actions-impl.js',
+      'src/service/url-replacements-impl.js',
+      'extensions/amp-access/0.1/amp-access.js',
+      'extensions/amp-subscriptions/0.1/amp-subscriptions.js',
+      'extensions/amp-experiment/0.1/variant.js',
+      'extensions/amp-experiment/1.0/variant.js',
+      'extensions/amp-user-notification/0.1/amp-user-notification.js',
+      'extensions/amp-consent/0.1/consent-config.js',
+      'extensions/amp-story-interactive/0.1/amp-story-interactive-abstract.js',
+    ],
+  },
+  'getBaseCid': {
+    message: requiresReviewPrivacy,
+    allowlist: ['src/service/cid-impl.js'],
+  },
+  'isTrustedViewer': {
+    message: requiresReviewPrivacy,
+    allowlist: [
+      'extensions/amp-bind/0.1/bind-impl.js',
+      'src/error-reporting.js',
+      'src/utils/xhr-utils.js',
+      'src/service/navigation.js',
+      'src/service/viewer-impl.js',
+      'src/service/viewer-interface.js',
+      'src/service/viewer-cid-api.js',
+      'src/inabox/inabox-viewer.js',
+      'src/service/cid-impl.js',
+      'src/impression.js',
+      'src/ssr-template-helper.js',
+    ],
+  },
+  'prerenderSafe': {
+    message: requiresReviewPrivacy,
+    allowlist: [
+      'build-system/externs/amp.extern.js',
+      'extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js',
+      'src/utils/xhr-utils.js',
+    ],
+  },
+  'eval\\(': {
+    message: shouldNeverBeUsed,
+  },
+  'storageForDoc|storageForTopLevelDoc': {
+    message:
+      requiresReviewPrivacy +
+      ' Please refer to spec/amp-localstorage.md for more information on' +
+      ' the storage service usage.' +
+      ' Once approved, please also update the spec/amp-localstorage.md to' +
+      ' include your usage.',
+    allowlist: [
+      // Storage service is not allowed in amp4ads. No usage should there be
+      // in extensions listed in the amp4ads spec:
+      // https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec
+      'src/services.js',
+      'src/service/cid-impl.js',
+      'extensions/amp-ad-network-adsense-impl/0.1/responsive-state.js',
+      'extensions/amp-app-banner/0.1/amp-app-banner.js',
+      'extensions/amp-consent/0.1/consent-state-manager.js',
+      'extensions/amp-user-notification/0.1/amp-user-notification.js',
+    ],
+  },
+  'localStorage': {
+    message: requiresReviewPrivacy,
+    allowlist: [
+      'extensions/amp-access/0.1/amp-access-iframe.js',
+      'extensions/amp-script/0.1/amp-script.js',
+      'extensions/amp-story/1.0/history.js',
+      'extensions/amp-web-push/0.1/amp-web-push-helper-frame.js',
+      'extensions/amp-web-push/0.1/amp-web-push-permission-dialog.js',
+      'src/experiments/index.js',
+      'src/service/cid-impl.js',
+      'src/service/storage-impl.js',
+      'testing/init-tests.js',
+      'testing/fake-dom.js',
+    ],
+  },
+  'sessionStorage': {
+    message: requiresReviewPrivacy,
+    allowlist: [
+      'extensions/amp-access/0.1/amp-access-iframe.js',
+      'extensions/amp-accordion/0.1/amp-accordion.js',
+      'extensions/amp-script/0.1/amp-script.js',
+      'testing/fake-dom.js',
+    ],
+  },
+  'indexedDB': {
+    message: requiresReviewPrivacy,
+  },
+  'openDatabase': requiresReviewPrivacy,
+  'requestFileSystem': requiresReviewPrivacy,
+  'webkitRequestFileSystem': requiresReviewPrivacy,
+  'getAccessReaderId': {
+    message: requiresReviewPrivacy,
+    allowlist: [
+      'build-system/externs/amp.extern.js',
+      'extensions/amp-access/0.1/amp-access.js',
+      'extensions/amp-access/0.1/access-vars.js',
+      'extensions/amp-subscriptions/0.1/amp-subscriptions.js',
+      'src/service/url-replacements-impl.js',
+    ],
+  },
+  'getAuthdataField': {
+    message: requiresReviewPrivacy,
+    allowlist: [
+      'build-system/externs/amp.extern.js',
+      'extensions/amp-access/0.1/amp-access.js',
+      'extensions/amp-access/0.1/access-vars.js',
+      'extensions/amp-subscriptions/0.1/amp-subscriptions.js',
+      'src/service/url-replacements-impl.js',
+    ],
+  },
+  'debugger': '',
+  // Overridden APIs.
+  '(doc.*)\\.referrer': {
+    message: 'Use Viewer.getReferrerUrl() instead.',
+    allowlist: [
+      '3p/integration-lib.js',
+      'ads/google/a4a/utils.js',
+      'src/inabox/inabox-viewer.js',
+      'src/service/viewer-impl.js',
+      'src/error-reporting.js',
+      'src/window-interface.js',
+    ],
+  },
+  'getUnconfirmedReferrerUrl': {
+    message: 'Use Viewer.getReferrerUrl() instead.',
+    allowlist: [
+      'extensions/amp-dynamic-css-classes/0.1/amp-dynamic-css-classes.js',
+      'src/iframe-attributes.js',
+      'src/service/viewer-impl.js',
+      'src/service/viewer-interface.js',
+      'src/inabox/inabox-viewer.js',
+    ],
+  },
+  'internalListenImplementation': {
+    message:
+      'Use `listen()` in either `event-helper` or `3p-frame-messaging`' +
+      ', depending on your use case.',
+    allowlist: [
+      'src/3p-frame-messaging.js',
+      'src/event-helper.js',
+      'src/event-helper-listen.js',
+    ],
+  },
+  'setTimeout.*throw': {
+    message: 'Use dev.error or user.error instead.',
+  },
+  '(dev|user)\\(\\)\\.(fine|info|warn|error)\\((?!\\s*([A-Z0-9-]+|[\'"`][A-Z0-9-]+[\'"`]))[^,)\n]*':
+    {
+      message:
+        'Logging message require explicitly `TAG`, or an all uppercase' +
+        ' string as the first parameter',
+      allowlist: [
+        'build-system/babel-plugins/babel-plugin-transform-dev-methods/index.js',
+      ],
+    },
+  '\\.schedulePass\\(': {
+    message: 'schedulePass is heavy, think twice before using it',
+    allowlist: ['src/service/mutator-impl.js', 'src/service/resources-impl.js'],
+  },
+  '\\.requireLayout\\(': {
+    message:
+      'requireLayout is restricted b/c it affects non-contained elements',
+    allowlist: ['extensions/amp-animation/0.1/web-animations.js'],
+  },
+  '\\.updateLayoutPriority\\(': {
+    message: 'updateLayoutPriority is a restricted API.',
+    allowlist: [
+      'extensions/amp-a4a/0.1/amp-a4a.js',
+      'src/base-element.js',
+      'src/service/resources-impl.js',
+    ],
+  },
+  'overrideVisibilityState': {
+    message: 'overrideVisibilityState is a restricted API.',
+    allowlist: [
+      'src/friendly-iframe-embed.js',
+      'src/multidoc-manager.js',
+      'src/service/ampdoc-impl.js',
+      'src/service/viewer-impl.js',
+    ],
+  },
+  '\\.scheduleLayoutOrPreload\\(': {
+    message: 'scheduleLayoutOrPreload is a restricted API.',
+    allowlist: ['src/custom-element.js', 'src/service/resources-impl.js'],
+  },
+  '(win|Win)(dow)?(\\(\\))?\\.open\\W': {
+    message: 'Use dom.openWindowDialog',
+    allowlist: ['src/dom.js'],
+  },
+  '\\.getWin\\(': {
+    message: backwardCompat,
+  },
+  '/\\*\\* @type \\{\\!Element\\} \\*/': {
+    message: 'Use assertElement instead of casting to !Element.',
+    allowlist: [
+      'src/core/assert/base.js', // Has actual implementation of assertElement.
+      'src/core/assert/dev.js', // Has actual implementation of assertElement.
+      'src/polyfills/custom-elements.js',
+      'ads/google/ima/ima-video.js', // Required until #22277 is fixed.
+      '3p/twitter.js', // Runs in a 3p window context, so cannot import log.js.
+    ],
+  },
+  'startupChunk\\(': {
+    message: 'startupChunk( should only be used during startup',
+    allowlist: [
+      'src/amp.js',
+      'src/chunk.js',
+      'src/inabox/amp-inabox.js',
+      'src/runtime.js',
+      'src/custom-element.js',
+      'src/service/resources-impl.js',
+    ],
+  },
+  'AMP_CONFIG': {
+    message:
+      'Do not access AMP_CONFIG directly. Use isExperimentOn() ' +
+      'and getMode() to access config',
+    allowlist: [
+      'build-system/externs/amp.extern.js',
+      'build-system/server/amp4test.js',
+      'build-system/server/app.js',
+      'build-system/tasks/e2e/index.js',
+      'build-system/tasks/firebase.js',
+      'build-system/tasks/integration.js',
+      'build-system/tasks/prepend-global/index.js',
+      'build-system/tasks/prepend-global/prepend-global.test.js',
+      'build-system/tasks/release/index.js',
+      'build-system/tasks/visual-diff/index.js',
+      'build-system/tasks/build.js',
+      'build-system/tasks/default-task.js',
+      'build-system/tasks/dist.js',
+      'build-system/tasks/helpers.js',
+      'src/config.js',
+      'src/experiments/index.js',
+      'src/experiments/shame.extern.js',
+      'src/mode.js',
+      'src/web-worker/web-worker.js', // Web worker custom error reporter.
+      'testing/init-tests.js',
+      'tools/experiments/experiments.js',
+    ],
+  },
+  'data:image/svg(?!\\+xml;charset=utf-8,)[^,]*,': {
+    message:
+      'SVG data images must use charset=utf-8: ' +
+      '"data:image/svg+xml;charset=utf-8,..."',
+    allowlist: ['src/service/ie-intrinsic-bug.js'],
+  },
+  'new CustomEvent\\(': {
+    message: 'Use createCustomEvent() helper instead.',
+  },
+  'new FormData\\(': {
+    message:
+      'Use createFormDataWrapper() instead and call ' +
+      'formDataWrapper.getFormData() to get the native FormData object.',
+    allowlist: ['src/form-data-wrapper.js'],
+  },
+  '\\.defer\\(\\)': {
+    message: 'Promise.defer() is deprecated and should not be used.',
+  },
+  '(dev|user)\\(\\)\\.assert(Element|String|Number)?\\(\\s*([A-Z][A-Z0-9-]*,)':
+    {
+      message:
+        'TAG is not an argument to assert(). Will cause false positives.',
+    },
+  'eslint no-unused-vars': {
+    message: 'Use a line-level "no-unused-vars" rule instead.',
+    allowlist: ['extensions/amp-access/0.1/iframe-api/access-controller.js'],
+  },
+  'this\\.skip\\(\\)': {
+    message:
+      'Use of `this.skip()` is forbidden in test files. Use ' +
+      '`this.skipTest()` from within a `before()` block instead. See #17245.',
+    checkInTestFolder: true,
+    allowlist: ['testing/init-tests.js'],
+  },
+  '[^\\.]makeBodyVisible\\(': {
+    message:
+      'This is a protected function. If you are calling this to show ' +
+      'body after an error please use `makeBodyVisibleRecovery`',
+    allowlist: [
+      'src/amp.js',
+      'src/style-installer.js',
+      'src/inabox/amp-inabox.js',
+    ],
+  },
+  'isBuildRenderBlocking': {
+    message:
+      'This is a protected API. Please only override it the element is ' +
+      'render blocking',
+    allowlist: [
+      'build-system/externs/amp.extern.js',
+      'src/service/resources-impl.js',
+      'src/service/resource.js',
+      'src/custom-element.js',
+      'src/base-element.js',
+      'extensions/amp-experiment/0.1/amp-experiment.js',
+      'extensions/amp-experiment/1.0/amp-experiment.js',
+    ],
+  },
+  '^describe\n*\\s*[\\.|\\(]': {
+    message:
+      'Top-level "describe" blocks in test files have been deprecated. ' +
+      'Use "describes.{realWin|sandboxed|fakeWin|integration}".',
+    allowlist: [
+      // Non test files. These can remain.
+      'build-system/server/app-index/test/test-amphtml-helpers.js',
+      'build-system/server/app-index/test/test-file-list.js',
+      'build-system/server/app-index/test/test-html.js',
+      'build-system/server/app-index/test/test-self.js',
+      'build-system/server/app-index/test/test-template.js',
+      'build-system/server/app-index/test/test.js',
+      'test/e2e/test-controller-promise.js',
+      'test/e2e/test-expect.js',
+      'validator/js/engine/amp4ads-parse-css_test.js',
+      'validator/js/engine/htmlparser_test.js',
+      'validator/js/engine/keyframes-parse-css_test.js',
+      'validator/js/engine/parse-css_test.js',
+      'validator/js/engine/parse-srcset_test.js',
+      'validator/js/engine/parse-url_test.js',
+      'validator/js/engine/validator_test.js',
+      'validator/js/gulpjs/test/validate.js',
+    ],
+    checkInTestFolder: true,
+  },
+};
+
+const bannedTermsHelpString =
+  'Please review viewport service for helper ' +
+  'methods or mark with `/*OK*/` or `/*REVIEW*/` and consult the AMP team. ' +
+  'Most of the forbidden property/method access banned on the ' +
+  '`forbiddenTermsSrcInclusive` object can be found in ' +
+  '[What forces layout / reflow gist by Paul Irish]' +
+  '(https://gist.github.com/paulirish/5d52fb081b3570c81e3a). ' +
+  'These properties/methods when read/used require the browser ' +
+  'to have the up-to-date value to return which might possibly be an ' +
+  'expensive computation and could also be triggered multiple times ' +
+  'if we are not careful. Please mark the call with ' +
+  '`object./*OK*/property` if you explicitly need to read or update the ' +
+  'forbidden property/method or mark it with `object./*REVIEW*/property` ' +
+  'if you are unsure and so that it stands out in code reviews.';
+
+const measurementApiDeprecated =
+  'getLayoutSize/Box APIs are being deprecated. Please contact the' +
+  ' @ampproject/wg-performance for questions.';
+
+/**
+ * @const {Object<string, string|!ForbiddenTermDef>}
+ */
+const forbiddenTermsSrcInclusive = {
+  '\\.innerHTML(?!_)': bannedTermsHelpString,
+  '\\.outerHTML(?!_)': bannedTermsHelpString,
+  '\\.offsetLeft(?!_)': bannedTermsHelpString,
+  '\\.offsetTop(?!_)': bannedTermsHelpString,
+  '\\.offsetWidth(?!_)': bannedTermsHelpString,
+  '\\.offsetHeight(?!_)': bannedTermsHelpString,
+  '\\.offsetParent(?!_)': bannedTermsHelpString,
+  '\\.clientLeft(?!_)(?!_)': bannedTermsHelpString,
+  '\\.clientTop(?!_)': bannedTermsHelpString,
+  '\\.clientWidth(?!_)': bannedTermsHelpString,
+  '\\.clientHeight(?!_)': bannedTermsHelpString,
+  '\\.scrollWidth(?!_)': 'please use `getScrollWidth()` from viewport',
+  '\\.scrollHeight(?!_)': bannedTermsHelpString,
+  '\\.scrollTop(?!_)': bannedTermsHelpString,
+  '\\.scrollLeft(?!_)': bannedTermsHelpString,
+  '\\.computedRole(?!_)': bannedTermsHelpString,
+  '\\.computedName(?!_)': bannedTermsHelpString,
+  '\\.innerText(?!_)': bannedTermsHelpString,
+  '\\.scrollX(?!_)': bannedTermsHelpString,
+  '\\.scrollY(?!_)': bannedTermsHelpString,
+  '\\.pageXOffset(?!_)': bannedTermsHelpString,
+  '\\.pageYOffset(?!_)': bannedTermsHelpString,
+  '\\.innerWidth(?!_)': bannedTermsHelpString,
+  '\\.innerHeight(?!_)': bannedTermsHelpString,
+  '\\.scrollingElement(?!_)': bannedTermsHelpString,
+  '\\.computeCTM(?!_)': bannedTermsHelpString,
+  // Functions
+  '\\.applySize\\(': bannedTermsHelpString,
+  '\\.attemptChangeHeight\\(0\\)': 'please consider using `attemptCollapse()`',
+  '\\.collapse\\(': bannedTermsHelpString,
+  '\\.expand\\(': bannedTermsHelpString,
+  '\\.focus\\(': bannedTermsHelpString,
+  '\\.getBBox\\(': bannedTermsHelpString,
+  '\\.getBoundingClientRect\\(': bannedTermsHelpString,
+  '\\.getClientRects\\(': bannedTermsHelpString,
+  '\\.getMatchedCSSRules\\(': bannedTermsHelpString,
+  '\\.scrollBy\\(': bannedTermsHelpString,
+  '\\.scrollIntoView\\(': bannedTermsHelpString,
+  '\\.scrollIntoViewIfNeeded\\(': bannedTermsHelpString,
+  '\\.scrollTo\\(': bannedTermsHelpString,
+  '\\.webkitConvertPointFromNodeToPage\\(': bannedTermsHelpString,
+  '\\.webkitConvertPointFromPageToNode\\(': bannedTermsHelpString,
+  '\\.scheduleUnlayout\\(': bannedTermsHelpString,
+  '\\.postMessage\\(': {
+    message: bannedTermsHelpString,
+    allowlist: [
+      'extensions/amp-install-serviceworker/0.1/amp-install-serviceworker.js',
+    ],
+  },
+  'getComputedStyle\\(': {
+    message:
+      'Due to various bugs in Firefox, you must use the computedStyle ' +
+      'helper in style.js.',
+    allowlist: ['src/style.js', 'build-system/tasks/coverage-map/index.js'],
+  },
+  'decodeURIComponent\\(': {
+    message:
+      'decodeURIComponent throws for malformed URL components. Please ' +
+      'use tryDecodeUriComponent from src/url.js',
+    allowlist: [
+      '3p/integration-lib.js',
+      'examples/pwa/pwa.js',
+      'validator/js/engine/parse-url.js',
+      'validator/js/engine/validator.js',
+      'validator/js/webui/webui.js',
+      'src/url.js',
+      'src/core/types/string/url.js',
+      'src/core/types/string/bytes.js',
+    ],
+  },
+  'Text(Encoder|Decoder)\\(': {
+    message:
+      'TextEncoder/TextDecoder is not supported in all browsers.' +
+      ' Please use UTF8 utilities from src/bytes.js',
+    allowlist: [
+      'ads/google/a4a/line-delimited-response-handler.js',
+      'examples/pwa/pwa.js',
+      'src/core/dom/stream/response.js',
+      'src/core/types/string/bytes.js',
+    ],
+  },
+  'contentHeightChanged': {
+    message: bannedTermsHelpString,
+    allowlist: [
+      'src/inabox/inabox-viewport.js',
+      'src/service/resources-impl.js',
+      'src/service/viewport/viewport-binding-def.js',
+      'src/service/viewport/viewport-binding-ios-embed-wrapper.js',
+      'src/service/viewport/viewport-binding-natural.js',
+      'src/service/viewport/viewport-impl.js',
+      'src/service/viewport/viewport-interface.js',
+    ],
+  },
+  'preloadExtension': {
+    message: bannedTermsHelpString,
+    allowlist: [
+      'src/friendly-iframe-embed.js',
+      'src/runtime.js',
+      'src/service/extensions-impl.js',
+      'src/service/crypto-impl.js',
+    ],
+  },
+  'loadElementClass': {
+    message: bannedTermsHelpString,
+    allowlist: [
+      'src/service/extensions-impl.js',
+      'extensions/amp-ad/0.1/amp-ad.js',
+    ],
+  },
+  'reject\\(\\)': {
+    message:
+      'Always supply a reason in rejections. ' +
+      'error.cancellation() may be applicable.',
+  },
+  '[^.]loadPromise': {
+    message: 'Most users should use BaseElement…loadPromise.',
+    allowlist: [
+      'src/base-element.js',
+      'src/event-helper.js',
+      'src/friendly-iframe-embed.js',
+      'src/service/resources-impl.js',
+      'src/service/variable-source.js',
+      'src/validator-integration.js',
+      'extensions/amp-image-lightbox/0.1/amp-image-lightbox.js',
+      'extensions/amp-analytics/0.1/transport.js',
+      'extensions/amp-web-push/0.1/iframehost.js',
+      'extensions/amp-recaptcha-input/0.1/amp-recaptcha-service.js',
+    ],
+  },
+  '\\.getTime\\(\\)': {
+    message: 'Unless you do weird date math (allowlist), use Date.now().',
+    allowlist: [
+      '.github/workflows/create-design-review-issue.js',
+      'extensions/amp-timeago/0.1/amp-timeago.js',
+      'extensions/amp-timeago/1.0/component.js',
+      'src/core/types/date.js',
+    ],
+  },
+  '\\.expandStringSync\\(': {
+    message: requiresReviewPrivacy,
+  },
+  '\\.expandStringAsync\\(': {
+    message: requiresReviewPrivacy,
+    allowlist: [
+      'extensions/amp-analytics/0.1/config.js',
+      'extensions/amp-analytics/0.1/cookie-writer.js',
+      'extensions/amp-analytics/0.1/requests.js',
+      'extensions/amp-analytics/0.1/variables.js',
+      'extensions/amp-consent/0.1/cookie-writer.js',
+    ],
+  },
+  '\\.expandInputValueSync\\(': {
+    message: requiresReviewPrivacy,
+    allowlist: ['extensions/amp-form/0.1/amp-form.js'],
+  },
+  '\\.expandInputValueAsync\\(': {
+    message: requiresReviewPrivacy,
+    allowlist: ['extensions/amp-form/0.1/amp-form.js'],
+  },
+  '\\.setNonBoolean\\(': {
+    message: requiresReviewPrivacy,
+    allowlist: [
+      'src/service/cid-impl.js',
+      'src/service/storage-impl.js',
+      'extensions/amp-consent/0.1/consent-state-manager.js',
+    ],
+  },
+  '(cdn|3p)\\.ampproject\\.': {
+    message:
+      'The CDN domain should typically not be hardcoded in source ' +
+      'code. Use a property of urls from src/config.js instead.',
+    allowlist: [
+      'ads/_a4a-config.js',
+      'build-system/server/amp4test.js',
+      'build-system/server/app-index/amphtml-helpers.js',
+      'build-system/server/app-utils.js',
+      'build-system/server/app-video-testbench.js',
+      'build-system/server/app.js',
+      'build-system/server/shadow-viewer.js',
+      'build-system/server/variable-substitution.js',
+      'build-system/tasks/dist.js',
+      'build-system/tasks/helpers.js',
+      'build-system/tasks/performance/helpers.js',
+      'src/3p-frame.js',
+      'src/amp-story-player/amp-story-player-impl.js',
+      'src/config.js',
+      'testing/local-amp-chrome-extension/background.js',
+      'tools/experiments/experiments.js',
+      'validator/js/engine/htmlparser-interface.js',
+      'validator/js/engine/validator-in-browser.js',
+      'validator/js/engine/validator.js',
+      'validator/js/nodejs/index.js',
+      'validator/js/webui/serve-standalone.go',
+    ],
+  },
+  '\\<\\<\\<\\<\\<\\<': {
+    message: 'Unresolved merge conflict.',
+  },
+  '\\>\\>\\>\\>\\>\\>': {
+    message: 'Unresolved merge conflict.',
+  },
+  '\\.indexOf\\([\'"][^)]+\\)\\s*===?\\s*0\\b': {
+    message: 'use startsWith helper in src/core/types/string',
+    allowlist: ['build-system/server/app.js'],
+  },
+  '\\.indexOf\\(.*===?.*\\.length':
+    'use endsWith helper in src/core/types/string',
+  '\\.trim(Left|Right)\\(\\)': {
+    message: 'Unsupported on IE; use trim() or a helper instead.',
+    allowlist: ['validator/js/engine/validator.js'],
+  },
+  "process\\.env(\\.|\\[\\')(GITHUB_ACTIONS|CIRCLECI)": {
+    message:
+      'Do not directly use CI-specific environment vars. Instead, add a ' +
+      'function to build-system/common/ci.js',
+  },
+  '\\.matches\\(': 'Please use matches() helper in src/dom.js',
+  '\\.getLayoutBox': {
+    message: measurementApiDeprecated,
+    allowlist: [
+      'src/base-element.js',
+      'src/custom-element.js',
+      'src/friendly-iframe-embed.js',
+      'src/service/mutator-impl.js',
+      'src/service/resource.js',
+      'src/service/resources-impl.js',
+      'extensions/amp-ad/0.1/amp-ad-3p-impl.js',
+      'extensions/amp-ad-network-adsense-impl/0.1/responsive-state.js',
+      'extensions/amp-fx-flying-carpet/0.1/amp-fx-flying-carpet.js',
+      'extensions/amp-iframe/0.1/amp-iframe.js',
+      'extensions/amp-next-page/1.0/visibility-observer.js',
+      'extensions/amp-playbuzz/0.1/amp-playbuzz.js',
+      'extensions/amp-story/1.0/page-advancement.js',
+    ],
+  },
+  '\\.getLayoutSize': {
+    message: measurementApiDeprecated,
+    allowlist: [
+      'build-system/externs/amp.extern.js',
+      'builtins/amp-img/amp-img.js',
+      'src/base-element.js',
+      'src/custom-element.js',
+      'src/iframe-helper.js',
+      'src/service/mutator-impl.js',
+      'src/service/resources-impl.js',
+      'extensions/amp-a4a/0.1/amp-a4a.js',
+      'extensions/amp-fx-flying-carpet/0.1/amp-fx-flying-carpet.js',
+      'extensions/amp-script/0.1/amp-script.js',
+      'extensions/amp-story/1.0/amp-story-page.js',
+    ],
+  },
+  'onLayoutMeasure': {
+    message: measurementApiDeprecated,
+    allowlist: [
+      'src/base-element.js',
+      'src/custom-element.js',
+      'extensions/amp-a4a/0.1/amp-a4a.js',
+      'extensions/amp-a4a/0.1/amp-ad-network-base.js',
+      'extensions/amp-ad/0.1/amp-ad-3p-impl.js',
+      'extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js',
+      'extensions/amp-ad-exit/0.1/amp-ad-exit.js',
+      'extensions/amp-ad-exit/0.1/filters/click-location.js',
+      'extensions/amp-ad-exit/0.1/filters/filter.js',
+      'extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js',
+      'extensions/amp-iframe/0.1/amp-iframe.js',
+      'extensions/amp-script/0.1/amp-script.js',
+      'extensions/amp-story/1.0/amp-story-page.js',
+    ],
+  },
+  '\\.getIntersectionElementLayoutBox': {
+    message: measurementApiDeprecated,
+    allowlist: [
+      'src/custom-element.js',
+      'extensions/amp-a4a/0.1/amp-a4a.js',
+      'extensions/amp-ad/0.1/amp-ad-3p-impl.js',
+      'extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js',
+      'extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js',
+      'extensions/amp-iframe/0.1/amp-iframe.js',
+    ],
+  },
+  "require\\('fancy-log'\\)": {
+    message:
+      'Instead of fancy-log, use the logging functions in build-system/common/logging.js.',
+  },
+  "require\\('kleur\\/colors'\\)": {
+    message:
+      'Instead of kleur/colors, use the log-coloring functions in build-system/common/colors.js',
+    allowlist: [
+      'build-system/common/colors.js',
+      'third_party/react-dates/scope-require.js',
+    ],
+  },
+  'withA11y':
+    'The Storybook decorator "withA11y" has been deprecated. You may simply remove it, since the a11y addon is now globally configured.',
+  'detectIsAutoplaySupported': {
+    message:
+      'Detecting autoplay support is expensive. Use the cached function "isAutoplaySupported" instead.',
+    allowlist: [
+      // The function itself is defined here.
+      'src/utils/video.js',
+    ],
+  },
+};
+
+/**
+ * @typedef {{
+ *   term: string,
+ *   match: string,
+ *   message?: (undefined|string),
+ *   loc: import('eslint').AST.SourceLocation,
+ * }}
+ */
+let ForbiddenTermMatchDef;
+
+/**
+ * Check if root of path is test/ or file is in a folder named test.
+ * @param {string} path
+ * @return {boolean}
+ */
+function isInTestFolder(path) {
+  const dirs = path.split('/');
+  return dirs.indexOf('test') >= 0;
+}
+
+/**
+ * Strip Comments
+ * @param {string} contents
+ * @return {string}
+ */
+function stripComments(contents) {
+  // Multi-line comments
+  contents = contents.replace(/\/\*(?!.*\*\/)(.|\n)*?\*\//g, function (match) {
+    // Preserve the newlines
+    const newlines = [];
+    for (let i = 0; i < match.length; i++) {
+      if (match[i] === '\n') {
+        newlines.push('\n');
+      }
+    }
+    return newlines.join('');
+  });
+  // Single line comments either on its own line or following a space,
+  // semi-colon, or closing brace
+  return contents.replace(/( |}|;|^) *\/\/.*/gm, '$1');
+}
+
+/**
+ * Collects any forbidden terms (regex patterns) in the contents of a file,
+ * and provides any possible fix information.
+ *
+ * @param {string} srcFile
+ * @param {string} contents
+ * @param {!Object<string, string|!ForbiddenTermDef>} terms
+ * @return {Array<!ForbiddenTermMatchDef>}
+ */
+function matchForbiddenTerms(srcFile, contents, terms) {
+  const contentsWithoutComments = stripComments(contents);
+  return Object.entries(terms)
+    .map(([term, messageOrDef]) => {
+      const {
+        allowlist = null,
+        checkInTestFolder = false,
+        checkProse = false,
+        message,
+      } = typeof messageOrDef === 'string'
+        ? {message: messageOrDef}
+        : messageOrDef;
+      // NOTE: we could do a glob test instead of exact check in the future
+      // if needed but that might be too permissive.
+      if (
+        (Array.isArray(allowlist) && allowlist.indexOf(srcFile) != -1) ||
+        (isInTestFolder(srcFile) && !checkInTestFolder) ||
+        (srcFile.endsWith('.md') && !checkProse)
+      ) {
+        return [];
+      }
+
+      const matches = /** @type {Array<!ForbiddenTermMatchDef>} */ ([]);
+      // we can't optimize building the `RegExp` objects early unless we build
+      // another mapping of term -> regexp object to be able to get back to the
+      // original term to get the possible fix value. This is ok as the
+      // presubmit doesn't have to be blazing fast and this is most likely
+      // negligible.
+      const regex = new RegExp(term, 'gm' + (checkProse ? 'i' : ''));
+      let index = 0;
+      let line = 1;
+      let column = 0;
+
+      const subject = checkProse ? contents : contentsWithoutComments;
+      let result;
+      while ((result = regex.exec(subject))) {
+        const [match] = result;
+
+        const start = {line: -1, column: -1};
+        for (index; index < result.index + match.length; index++) {
+          if (index === result.index) {
+            start.line = line;
+            start.column = column;
+          }
+          if (subject[index] === '\n') {
+            line++;
+            column = 0;
+          } else {
+            column++;
+          }
+        }
+
+        matches.push({
+          match,
+          term,
+          message,
+          loc: {start, end: {line, column}},
+        });
+      }
+
+      return matches;
+    })
+    .reduce((a, b) => a.concat(b));
+}
+
+module.exports = {
+  forbiddenTermsGlobal,
+  forbiddenTermsSrcInclusive,
+  matchForbiddenTerms,
+};
diff --git a/build-system/test-configs/hosts b/build-system/test-configs/hosts
new file mode 100644
index 0000000000000..c81ba97a21881
--- /dev/null
+++ b/build-system/test-configs/hosts
@@ -0,0 +1,12 @@
+# Used by various ads tests.
+127.0.0.1 ads.localhost
+
+# Used by various iframe tests.
+127.0.0.1 iframe.localhost
+
+# Used by tests that need a valid font host.
+127.0.0.1 fonts.googleapis.com
+
+# Used by integration tests for amp-recaptcha-input.
+# The hash is the cURL subdomain for localhost:9876.
+127.0.0.1 jgla3zmib2ggq5buc4hwi5taloh6jlvzukddfr4zltz3vay5s5rq.recaptcha.localhost
diff --git a/build-system/test-configs/jscodeshift/README.md b/build-system/test-configs/jscodeshift/README.md
new file mode 100644
index 0000000000000..44d558e61ad72
--- /dev/null
+++ b/build-system/test-configs/jscodeshift/README.md
@@ -0,0 +1,7 @@
+# [jscodeshift](https://github.com/facebook/jscodeshift)
+
+This directory holds shared configuration and utils for **jscodeshift**.
+
+-   [`parser-config.json`](./parser-config.json) is mostly taken from [the default babylon configuration](https://github.com/facebook/jscodeshift/blob/48f5d6d6e5e769639b958f1a955c83c68157a5fa/parser/babylon.js).
+
+Different build tasks can hold local transforms, [you may search each of them.](https://github.com/ampproject/amphtml/search?l=JavaScript&q=jscodeshift)
diff --git a/build-system/test-configs/jscodeshift/index.js b/build-system/test-configs/jscodeshift/index.js
new file mode 100644
index 0000000000000..faa04b241d250
--- /dev/null
+++ b/build-system/test-configs/jscodeshift/index.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const {execScriptAsync} = require('../../common/exec');
+const {getOutput} = require('../../common/process');
+
+const command = (args = []) =>
+  [
+    'npx jscodeshift',
+    '--parser=babylon',
+    `--parser-config=${__dirname}/parser-config.json`,
+    ...args,
+  ].join(' ');
+
+/**
+ * @param {Array<string>} args
+ * @param {?Object=} opts
+ * @return {!Object}
+ */
+const jscodeshift = (args = [], opts) => getOutput(command(args), opts);
+
+/**
+ * @param {Array<string>} args
+ * @param {Object} opts
+ * @return {ReturnType<execScriptAsync>}
+ */
+const jscodeshiftAsync = (args = [], opts) =>
+  execScriptAsync(command(args), opts);
+
+const stripColors = (str) => str.replace(/\x1B[[(?);]{0,2}(;?\d)*./g, '');
+
+/**
+ * @param {string} line
+ * @return {?Array<string>} [filename, report]
+ */
+function getJscodeshiftReport(line) {
+  const stripped = stripColors(line);
+
+  // Lines starting with " REP " are reports from a transform, which it owns
+  // and formats.
+  if (!stripped.startsWith(' REP ')) {
+    return null;
+  }
+
+  const noPrefix = stripped.substr(' REP '.length);
+  const [filename] = noPrefix.split(' ', 1);
+  const report = noPrefix.substr(filename.length + 1);
+  return [filename, report];
+}
+
+module.exports = {getJscodeshiftReport, jscodeshift, jscodeshiftAsync};
diff --git a/build-system/test-configs/jscodeshift/parser-config.json b/build-system/test-configs/jscodeshift/parser-config.json
new file mode 100644
index 0000000000000..0a577e84d7bca
--- /dev/null
+++ b/build-system/test-configs/jscodeshift/parser-config.json
@@ -0,0 +1,33 @@
+{
+  "sourceType": "module",
+  "allowImportExportEverywhere": true,
+  "allowReturnOutsideFunction": true,
+  "startLine": 1,
+  "tokens": true,
+  "plugins": [
+    ["flow", {"all": true}],
+    "flowComments",
+    "jsx",
+    "asyncGenerators",
+    "bigInt",
+    "classProperties",
+    "classPrivateProperties",
+    "classPrivateMethods",
+    ["decorators", {"decoratorsBeforeExport": false}],
+    "doExpressions",
+    "dynamicImport",
+    "exportDefaultFrom",
+    "exportNamespaceFrom",
+    "functionBind",
+    "functionSent",
+    "importMeta",
+    "logicalAssignment",
+    "nullishCoalescingOperator",
+    "numericSeparator",
+    "objectRestSpread",
+    "optionalCatchBinding",
+    "optionalChaining",
+    ["pipelineOperator", {"proposal": "minimal"}],
+    "throwExpressions"
+  ]
+}
diff --git a/build-system/test-configs/karma.conf.js b/build-system/test-configs/karma.conf.js
new file mode 100644
index 0000000000000..3a6c6b5c066a4
--- /dev/null
+++ b/build-system/test-configs/karma.conf.js
@@ -0,0 +1,169 @@
+/**
+ * Copyright 2015 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 argv = require('minimist')(process.argv.slice(2));
+const {dotWrappingWidth} = require('../common/logging');
+const {isCiBuild} = require('../common/ci');
+
+const TEST_SERVER_PORT = 8081;
+const COMMON_CHROME_FLAGS = [
+  // Dramatically speeds up iframe creation time.
+  '--disable-extensions',
+  // Allows simulating user actions (e.g unmute) which otherwise will be denied.
+  '--autoplay-policy=no-user-gesture-required',
+];
+// Makes debugging easy by auto-opening devtools.
+if (argv.debug) {
+  COMMON_CHROME_FLAGS.push('--auto-open-devtools-for-tabs');
+}
+
+module.exports = {
+  frameworks: ['fixture', 'mocha', 'source-map-support'],
+
+  preprocessors: {}, // Dynamically populated based on tests being run.
+
+  hostname: 'localhost',
+
+  reporters: ['super-dots', 'spec'],
+
+  superDotsReporter: {
+    nbDotsPerLine: dotWrappingWidth,
+    color: {
+      success: 'green',
+      failure: 'red',
+      ignore: 'yellow',
+    },
+    icon: {
+      success: '●',
+      failure: '●',
+      ignore: '○',
+    },
+  },
+
+  specReporter: {
+    suppressPassed: true,
+    suppressSkipped: true,
+    suppressFailed: false,
+    suppressErrorSummary: true,
+    maxLogLines: 20,
+  },
+
+  mochaReporter: {
+    output: 'full',
+    divider: false,
+    colors: {
+      success: 'green',
+      error: 'red',
+      info: 'yellow',
+    },
+    symbols: {
+      success: '●',
+      error: '●',
+      info: '○',
+    },
+  },
+
+  port: 9876,
+
+  colors: true,
+
+  proxies: {
+    '/ads/': '/base/ads/',
+    '/dist/': '/base/dist/',
+    '/dist.3p/': '/base/dist.3p/',
+    '/examples/': '/base/examples/',
+    '/extensions/': '/base/extensions/',
+    '/src/': '/base/src/',
+    '/test/': '/base/test/',
+  },
+
+  // Can't import the Karma constant config.LOG_ERROR, so we hard code it here.
+  // Hopefully it'll never change.
+  logLevel: 'ERROR',
+
+  autoWatch: true,
+
+  customLaunchers: {
+    /* eslint "google-camelcase/google-camelcase": 0*/
+    Chrome_ci: {
+      base: 'Chrome',
+      flags: ['--no-sandbox'].concat(COMMON_CHROME_FLAGS),
+    },
+    Chrome_no_extensions: {
+      base: 'Chrome',
+      flags: COMMON_CHROME_FLAGS,
+    },
+    Chrome_no_extensions_headless: {
+      base: 'ChromeHeadless',
+      flags: [
+        // https://developers.google.com/web/updates/2017/04/headless-chrome#frontend
+        '--no-sandbox',
+        '--remote-debugging-port=9222',
+        // https://github.com/karma-runner/karma-chrome-launcher/issues/175
+        "--proxy-server='direct://'",
+        '--proxy-bypass-list=*',
+      ].concat(COMMON_CHROME_FLAGS),
+    },
+  },
+
+  client: {
+    mocha: {
+      reporter: 'html',
+      // Longer timeout during CI; fail quickly during local runs.
+      timeout: isCiBuild() ? 10000 : 2000,
+      // Run tests up to 3 times before failing them during CI.
+      retries: isCiBuild() ? 2 : 0,
+    },
+    captureConsole: false,
+    verboseLogging: false,
+    testServerPort: TEST_SERVER_PORT,
+  },
+
+  singleRun: true,
+  captureTimeout: 4 * 60 * 1000,
+  failOnEmptyTestSuite: false,
+
+  // Give a disconnected browser 2 minutes to reconnect with Karma.
+  // This allows a browser to retry 2 times per `browserDisconnectTolerance`
+  // during CI before stalling out after 10 minutes.
+  browserDisconnectTimeout: 2 * 60 * 1000,
+
+  // If there's no message from the browser, make Karma wait 2 minutes
+  // until it disconnects.
+  browserNoActivityTimeout: 2 * 60 * 1000,
+
+  // IF YOU CHANGE THIS, DEBUGGING WILL RANDOMLY KILL THE BROWSER
+  browserDisconnectTolerance: isCiBuild() ? 2 : 0,
+
+  plugins: [
+    '@chiragrupani/karma-chromium-edge-launcher',
+    'karma-chrome-launcher',
+    'karma-esbuild',
+    'karma-firefox-launcher',
+    'karma-fixture',
+    'karma-html2js-preprocessor',
+    'karma-ie-launcher',
+    'karma-structured-json-reporter',
+    'karma-junit-reporter',
+    'karma-mocha',
+    'karma-mocha-reporter',
+    'karma-safarinative-launcher',
+    'karma-source-map-support',
+    'karma-spec-reporter',
+    'karma-super-dots-reporter',
+  ],
+};
diff --git a/build-system/tsconfig.json b/build-system/tsconfig.json
new file mode 100644
index 0000000000000..9c7947ba61765
--- /dev/null
+++ b/build-system/tsconfig.json
@@ -0,0 +1,54 @@
+{
+  "compileOnSave": true,
+  "compilerOptions": {
+    "lib": ["dom", "esnext"],
+    "outDir": "dist",
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "target": "ES2020",
+    "module": "CommonJS",
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "incremental": false,
+    "esModuleInterop": true,
+    "declaration": true
+  },
+  "include": [
+    "./*",
+    "./common/**/*.js",
+    "./server/**/*.js",
+    "./tasks/*",
+    "./tasks/bundle-size/*",
+    "./tasks/coverage-map/*",
+    "./tasks/create-golden-css/*",
+    "./tasks/css/*",
+    "./tasks/e2e/*",
+    "./tasks/get-zindex/*",
+    "./tasks/markdown-toc/*",
+    // "./tasks/performance/*", // 35 remaining type errors.
+    "./tasks/prepend-global/*",
+    "./tasks/release/*",
+    "./tasks/runtime-test/*",
+    "./tasks/storybook/*",
+    "./tasks/sweep-experiments/*",
+    // "./tasks/visual-diff/*", // 12 errors due to async imports.
+    "./test-configs/**/*"
+  ],
+  "exclude": [
+    "**/node_modules",
+    "**/*.test.js",
+    "common/check-package-manager.js",
+    "server/app-index/test/test-html.js",
+    "server/app-index/test/test-amphtml-helpers.js",
+    "server/new-server/**/*",
+    "tasks/dep-check.js", // JSDoc private used inside a function confuses TS.
+    "tasks/get-zindex/*"
+  ]
+}
diff --git a/builtins/README.md b/builtins/README.md
index 83769bf7476ba..8e9240c46cba3 100644
--- a/builtins/README.md
+++ b/builtins/README.md
@@ -2,8 +2,8 @@
 
 The following components are always available in AMP documents:
 
-| Component                     | Description                                                                                                                                                                                           |
-| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`amp-img`](amp-img.md)       | Replacement for the HTML `img` tag.                                                                                                                                                                   |
-| [`amp-layout`](amp-layout.md) | Multi-purpose container element that brings AMP's powerful [layouts](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout#the-layout-attribute) to any element. |
-| [`amp-pixel`](amp-pixel.md)   | Used as tracking pixel to count page views.                                                                                                                                                           |
+| Component                                  | Description                                                                                                                                                                                           |
+| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`amp-img`](./amp-img/amp-img.md)          | Replacement for the HTML `img` tag.                                                                                                                                                                   |
+| [`amp-layout`](./amp-layout/amp-layout.md) | Multi-purpose container element that brings AMP's powerful [layouts](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout#the-layout-attribute) to any element. |
+| [`amp-pixel`](./amp-pixel/amp-pixel.md)    | Used as tracking pixel to count page views.                                                                                                                                                           |
diff --git a/builtins/amp-img.js b/builtins/amp-img.js
deleted file mode 100644
index 7458df4780acb..0000000000000
--- a/builtins/amp-img.js
+++ /dev/null
@@ -1,356 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {BaseElement} from '../src/base-element';
-import {Layout, isLayoutSizeDefined} from '../src/layout';
-import {Services} from '../src/services';
-import {childElementByTag, removeElement} from '../src/dom';
-import {dev} from '../src/log';
-import {guaranteeSrcForSrcsetUnsupportedBrowsers} from '../src/utils/img';
-import {listen} from '../src/event-helper';
-import {propagateObjectFitStyles, setImportantStyles} from '../src/style';
-import {registerElement} from '../src/service/custom-element-registry';
-
-/** @const {string} */
-const TAG = 'amp-img';
-
-/**
- * Attributes to propagate to internal image when changed externally.
- * @type {!Array<string>}
- */
-const ATTRIBUTES_TO_PROPAGATE = [
-  'alt',
-  'aria-describedby',
-  'aria-label',
-  'aria-labelledby',
-  'referrerpolicy',
-  'sizes',
-  'src',
-  'srcset',
-  'title',
-];
-
-export class AmpImg extends BaseElement {
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-
-    /** @private {boolean} */
-    this.allowImgLoadFallback_ = true;
-
-    /** @private {boolean} */
-    this.prerenderAllowed_ = true;
-
-    /** @private {?Element} */
-    this.img_ = null;
-
-    /** @private {?UnlistenDef} */
-    this.unlistenLoad_ = null;
-
-    /** @private {?UnlistenDef} */
-    this.unlistenError_ = null;
-
-    /**
-     * The current width used by the automatically generated sizes attribute
-     * @private {number}
-     * */
-    this.sizesWidth_ = 0;
-  }
-
-  /** @override */
-  mutatedAttributesCallback(mutations) {
-    if (this.img_) {
-      const attrs = ATTRIBUTES_TO_PROPAGATE.filter(
-        (value) => mutations[value] !== undefined
-      );
-      // Mutating src should override existing srcset, so remove the latter.
-      if (
-        mutations['src'] &&
-        !mutations['srcset'] &&
-        this.element.hasAttribute('srcset')
-      ) {
-        // propagateAttributes() will remove [srcset] from this.img_.
-        this.element.removeAttribute('srcset');
-        attrs.push('srcset');
-
-        this.user().warn(
-          TAG,
-          'Removed [srcset] since [src] was mutated. Recommend adding a ' +
-            '[srcset] binding to support responsive images.',
-          this.element
-        );
-      }
-      this.propagateAttributes(
-        attrs,
-        this.img_,
-        /* opt_removeMissingAttrs */ true
-      );
-      this.propagateDataset(this.img_);
-      guaranteeSrcForSrcsetUnsupportedBrowsers(this.img_);
-    }
-  }
-
-  /** @override */
-  onMeasureChanged() {
-    this.maybeGenerateSizes_(/* sync */ false);
-  }
-
-  /** @override */
-  preconnectCallback(onLayout) {
-    // NOTE(@wassgha): since parseSrcset is computationally expensive and can
-    // not be inside the `buildCallback`, we went with preconnecting to the
-    // `src` url if it exists or the first srcset url.
-    const src = this.element.getAttribute('src');
-    if (src) {
-      Services.preconnectFor(this.win).url(this.getAmpDoc(), src, onLayout);
-    } else {
-      const srcset = this.element.getAttribute('srcset');
-      if (!srcset) {
-        return;
-      }
-      // We try to find the first url in the srcset
-      const srcseturl = /\S+/.exec(srcset);
-      // Connect to the first url if it exists
-      if (srcseturl) {
-        Services.preconnectFor(this.win).url(
-          this.getAmpDoc(),
-          srcseturl[0],
-          onLayout
-        );
-      }
-    }
-  }
-
-  /** @override */
-  firstAttachedCallback() {
-    if (this.element.hasAttribute('noprerender')) {
-      this.prerenderAllowed_ = false;
-    }
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    return isLayoutSizeDefined(layout);
-  }
-
-  /**
-   * Create the actual image element and set up instance variables.
-   * Called lazily in the first `#layoutCallback`.
-   */
-  initialize_() {
-    if (this.img_) {
-      return;
-    }
-    // If this amp-img IS the fallback then don't allow it to have its own
-    // fallback to stop from nested fallback abuse.
-    this.allowImgLoadFallback_ = !this.element.hasAttribute('fallback');
-
-    // For inabox SSR, image will have been written directly to DOM so no need
-    // to recreate.  Calling appendChild again will have no effect.
-    if (this.element.hasAttribute('i-amphtml-ssr')) {
-      this.img_ = childElementByTag(this.element, 'img');
-    }
-    this.img_ = this.img_ || new Image();
-    this.img_.setAttribute('decoding', 'async');
-    if (this.element.id) {
-      this.img_.setAttribute('amp-img-id', this.element.id);
-    }
-
-    // Remove role=img otherwise this breaks screen-readers focus and
-    // only read "Graphic" when using only 'alt'.
-    if (this.element.getAttribute('role') == 'img') {
-      this.element.removeAttribute('role');
-      this.user().error(
-        TAG,
-        'Setting role=img on amp-img elements breaks ' +
-          'screen readers please just set alt or ARIA attributes, they will ' +
-          'be correctly propagated for the underlying <img> element.'
-      );
-    }
-
-    // It is important to call this before setting `srcset` attribute.
-    this.maybeGenerateSizes_(/* sync setAttribute */ true);
-    this.propagateAttributes(ATTRIBUTES_TO_PROPAGATE, this.img_);
-    this.propagateDataset(this.img_);
-    guaranteeSrcForSrcsetUnsupportedBrowsers(this.img_);
-    this.applyFillContent(this.img_, true);
-    propagateObjectFitStyles(this.element, this.img_);
-
-    this.element.appendChild(this.img_);
-  }
-
-  /**
-   * This function automatically generates sizes for amp-imgs without
-   * the sizes attribute.
-   * @param {boolean} sync Whether to immediately make the change or schedule
-   *     via mutateElement.
-   * @private
-   */
-  maybeGenerateSizes_(sync) {
-    if (!this.img_) {
-      return;
-    }
-    // No need to generate sizes if already present.
-    const sizes = this.element.getAttribute('sizes');
-    if (sizes) {
-      return;
-    }
-    // Sizes is useless without the srcset attribute or if the srcset
-    // attribute uses the x descriptor.
-    const srcset = this.element.getAttribute('srcset');
-    if (!srcset || /[0-9]+x(?:,|$)/.test(srcset)) {
-      return;
-    }
-
-    const width = this.element.getLayoutWidth();
-    if (!this.shouldSetSizes_(width)) {
-      return;
-    }
-
-    const viewportWidth = this.getViewport().getWidth();
-
-    const entry = `(max-width: ${viewportWidth}px) ${width}px, `;
-    let defaultSize = width + 'px';
-
-    if (this.getLayout() !== Layout.FIXED) {
-      const ratio = Math.round((width * 100) / viewportWidth);
-      defaultSize = Math.max(ratio, 100) + 'vw';
-    }
-
-    const generatedSizes = entry + defaultSize;
-
-    if (sync) {
-      this.img_.setAttribute('sizes', generatedSizes);
-    } else {
-      this.mutateElement(() => {
-        this.img_.setAttribute('sizes', generatedSizes);
-      });
-    }
-    this.sizesWidth_ = width;
-  }
-
-  /**
-   * @param {number} newWidth
-   * @return {boolean}
-   * @private
-   */
-  shouldSetSizes_(newWidth) {
-    if (!this.img_.hasAttribute('sizes')) {
-      return true;
-    }
-    return newWidth > this.sizesWidth_;
-  }
-
-  /** @override */
-  prerenderAllowed() {
-    return this.prerenderAllowed_;
-  }
-
-  /** @override */
-  reconstructWhenReparented() {
-    return false;
-  }
-
-  /** @override */
-  layoutCallback() {
-    this.initialize_();
-    const img = dev().assertElement(this.img_);
-    this.unlistenLoad_ = listen(img, 'load', () => this.hideFallbackImg_());
-    this.unlistenError_ = listen(img, 'error', () => this.onImgLoadingError_());
-    if (this.element.getLayoutWidth() <= 0) {
-      return Promise.resolve();
-    }
-    return this.loadPromise(img);
-  }
-
-  /** @override */
-  unlayoutCallback() {
-    if (this.unlistenError_) {
-      this.unlistenError_();
-      this.unlistenError_ = null;
-    }
-    if (this.unlistenLoad_) {
-      this.unlistenLoad_();
-      this.unlistenLoad_ = null;
-    }
-
-    // Interrupt retrieval of incomplete images to free network resources when
-    // navigating pages in a PWA. Opt for tiny dataURI image instead of empty
-    // src to prevent the viewer from detecting a load error.
-    const img = this.img_;
-    if (img && !img.complete) {
-      img.src =
-        'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=';
-      removeElement(img);
-      this.img_ = null;
-    }
-
-    return true;
-  }
-
-  /** @override */
-  firstLayoutCompleted() {
-    const placeholder = this.getPlaceholder();
-    if (
-      placeholder &&
-      placeholder.classList.contains('i-amphtml-blurry-placeholder')
-    ) {
-      setImportantStyles(placeholder, {'opacity': 0});
-    } else {
-      this.togglePlaceholder(false);
-    }
-  }
-
-  /**
-   * @private
-   */
-  hideFallbackImg_() {
-    if (
-      !this.allowImgLoadFallback_ &&
-      this.img_.classList.contains('i-amphtml-ghost')
-    ) {
-      this.getVsync().mutate(() => {
-        this.img_.classList.remove('i-amphtml-ghost');
-        this.toggleFallback(false);
-      });
-    }
-  }
-
-  /**
-   * If the image fails to load, show a fallback or placeholder instead.
-   * @private
-   */
-  onImgLoadingError_() {
-    if (this.allowImgLoadFallback_) {
-      this.getVsync().mutate(() => {
-        this.img_.classList.add('i-amphtml-ghost');
-        this.toggleFallback(true);
-        // Hide placeholders, as browsers that don't support webp
-        // Would show the placeholder underneath a transparent fallback
-        this.togglePlaceholder(false);
-      });
-      this.allowImgLoadFallback_ = false;
-    }
-  }
-}
-
-/**
- * @param {!Window} win Destination window for the new element.
- * @this {undefined}  // Make linter happy
- */
-export function installImg(win) {
-  registerElement(win, TAG, AmpImg);
-}
diff --git a/builtins/amp-img.md b/builtins/amp-img.md
deleted file mode 100644
index d8a57bcf0ffcc..0000000000000
--- a/builtins/amp-img.md
+++ /dev/null
@@ -1,270 +0,0 @@
----
-$category: media
-formats:
-  - websites
-  - email
-  - ads
-  - stories
-teaser:
-  text: Replaces the HTML5 img tag.
----
-
-<!---
-Copyright 2015 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.
--->
-
-# <a name="amp-img"></a> `amp-img`
-
-<table>
-   <tr>
-    <td class="col-fourty"><strong>Description</strong></td>
-    <td>A runtime-managed replacement for the HTML <code>img</code> tag.</td>
-  </tr>
-  <tr>
-    <td class="col-fourty"><strong><a href="https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout">Supported Layouts</a></strong></td>
-    <td>fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive</td>
-  </tr>
-  <tr>
-    <td class="col-fourty"><strong>Examples</strong></td>
-    <td>See AMP By Example's <a href="https://amp.dev/documentation/examples/components/amp-img/">amp-img example</a>.</td>
-  </tr>
-</table>
-
-[TOC]
-
-## Behavior
-
-The runtime may choose to delay or prioritize resource loading based on the viewport position, system resources, connection bandwidth, or other factors. The `amp-img` components allows the runtime to effectively manage image resources this way.
-
-`amp-img` components, like all externally fetched AMP resources, must be given an
-explicit size (as in `width` / `height`) in advance, so that the aspect ratio can be known without fetching the image. Actual layout behavior is determined by the `layout` attribute.
-
-{% call callout('Read on', type='read') %}
-Learn more about layouts in the [AMP HTML Layout System](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md) spec and [Supported Layouts](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout.html#the-layout-attribute).
-{% endcall %}
-
-#### Example: Displaying a responsive image
-
-In the following example, we display an image that responds to the size of the viewport by setting `layout=responsive`. The image stretches and shrinks according to the aspect ratio specified by the `width` and `height`.
-
-[example preview="inline" playground="true"]
-
-```html
-<amp-img
-  alt="A view of the sea"
-  src="{{server_for_email}}/static/inline-examples/images/sea.jpg"
-  width="900"
-  height="675"
-  layout="responsive"
->
-</amp-img>
-```
-
-[/example]
-
-{% call callout('Read on', type='read') %}
-Learn about responsive AMP pages in the [Create Responsive AMP Pages](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design) guide.
-{% endcall %}
-
-If the resource requested by the `amp-img` component fails to load, the space will be blank unless a [`fallback`](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md#fallback) child is provided. A fallback is only executed on the initial layout and subsequent src changes after the fact (through resize + srcset for example) will not have a fallback for performance implications.
-
-#### Example: Specifying a fallback image
-
-In the following example, if the browser cannot load the image, it'll display the fallback image instead (here we're using an inline SVG as fallback):
-
-[example preview="inline" playground="true"]
-
-```html
-<amp-img
-  alt="Misty road"
-  width="550"
-  height="368"
-  src="image-does-not-exist.jpg"
->
-  <amp-img
-    alt="Misty road"
-    fallback
-    width="550"
-    height="368"
-    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMSAxIDggNCI+PGltYWdlIGZpbHRlcj0idXJsKCNibHVyKSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQW9BQUFBR0NBWUFBQUQ2OEEvR0FBQUFBWE5TUjBJQXJzNGM2UUFBQUVSbFdFbG1UVTBBS2dBQUFBZ0FBWWRwQUFRQUFBQUJBQUFBR2dBQUFBQUFBNkFCQUFNQUFBQUJBQUVBQUtBQ0FBUUFBQUFCQUFBQUNxQURBQVFBQUFBQkFBQUFCZ0FBQUFEK2lGWDBBQUFBcjBsRVFWUUlIVDJQU1FxRlFBeEVYN2VpNG9BYkVRV3Y0TVlMZUhLdjQwSVV3UW5uL25ZdmZxQ29JcWxRaVVpU1JQbStqNVFTei9PNDd4dkhjUmlHZ2I3dnNTeUw2N3FRNy91YW9XNHN5L0kzYXYwOGp6SHlsZFNHZmQrcDY5cXcxbTNia21VWlFnalQweXlpS0ZKNlE4ZVdaVWxSRklSaGFLS2JwdUU4VCtaNVJyaXVxejZna2VjNVZWVXhqaVBUTkpremp1TmcyemJzN3htQ0lDQk5VK0k0cHVzNmxGS3M2NHB0MjBicnhCODZ4VmdkUHdJV2NRQUFBQUJKUlU1RXJrSmdnZz09Ii8+PGZpbHRlciBpZD0iYmx1ciI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iLjUiIC8+PC9maWx0ZXI+PC9zdmc+"
-  >
-  </amp-img>
-</amp-img>
-```
-
-[/example]
-
-A placeholder background color or other visual can be set using CSS selector and style on the element itself.
-
-Additional image features like captions can be implemented with standard HTML (for example, `figure` and `figcaption`).
-
-{% call callout('Read on', type='read') %}
-Learn more about using `amp-img` from these resources:
-
-- [Placeholders & fallbacks](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders)
-- [Include Images & Video](https://amp.dev/documentation/guides-and-tutorials/develop/media_iframes_3p/)
-  {% endcall %}
-
-## Attributes
-
-### src
-
-[filter formats="websites, stories, ads"]
-This attribute is similar to the `src` attribute on the `img` tag. The value must be a URL that points to a publicly-cacheable image file. Cache providers may rewrite these URLs when ingesting AMP files to point to a cached version of the image.
-[/filter] <!-- formats="websites, stories, ads" -->
-
-[filter formats="email"]
-This attribute is similar to the `src` attribute on the `img` tag. For emails, the URL must be `https`.
-[/filter] <!-- formats="email" -->
-
-[filter formats="websites, stories, ads"]
-
-### srcset
-
-Same as `srcset` attribute on the `img` tag. For browsers that do not support `srcset`, `<amp-img>` will default to using `src`. If only `srcset` and no `src` is provided, the first url in the `srcset` will be selected.
-[/filter] <!-- formats="websites, stories, ads" -->
-
-### sizes
-
-The value of the AMP `sizes` attribute is a sizes expression that selects the defined size corresponding to the media query based on the current window size. <strong>Additionally, AMP sets an inline style for `width` on the element</strong>. If the `srcset` attribute is provided, `<amp-img>` will autogenerate the HTML5 definition of the `sizes` attribute for the underlying `<img>`, when none is specified. If the `srcset` attribute is not provided, no `sizes` attribute will be autogenerated for the underlying `<amp-img>`.
-
-It is possible to use `sizes` on `<amp-img>` without `srcset` purely for setting an inline style for `width` according to the matched media query, or purely for inferencing layout `responsive`.
-
-{% call callout('Read on', type='read') %}
-For the `<img>` tag in `HTML`, the `sizes` attribute is used in conjunction with the `srcset` attribute and specifies the intended display size of the image as corresponding to a media condition. It will influence the intrinsic display size of the underlying `<img>` based on [browser behavior](https://gist.github.com/cathyxz/f17d12c07d60bcef52591e64e5e684fb).
-{% endcall %}
-
-See [Responsive images with srcset, sizes & heights](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/art_direction) for usage of `sizes` and `srcset`.
-
-### alt
-
-A string of alternate text, similar to the `alt` attribute on `img`.
-
-### attribution
-
-A string that indicates the attribution of the image. For example, `attribution="CC courtesy of Cats on Flicker"`
-
-### height and width
-
-An explicit size of the image, which is used by the AMP runtime to determine the aspect ratio without fetching the image.
-
-### common attributes
-
-This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
-
-### data attributes
-
-Data attributes are copied from the `amp-img` element to the internal `img` element created by the component.
-
-[filter formats="email"]
-
-### Invalid AMP email attributes
-
-The AMP for Email spec disallows the use of the following attributes on the AMP email format.
-
-- `[src]`
-- `[srcset]`
-- `srcset`
-- `lightbox`
-- `lightbox-thumbnail-id`
-- `object-fit`
-- `object-position`
-
-[tip type="read-on"]
-Enable a lightbox effect on `amp-img` in email by using the [`amp-image-lightbox`](../extensions/amp-image-lightbox/amp-image-lightbox.md) component with the `on` action.
-[/tip][/filter] <!-- formats="email" -->
-
-## Styling
-
-`amp-img` can be styled directly via CSS properties. Setting a grey background
-placeholder for example could be achieved via:
-
-```css
-amp-img {
-  background-color: grey;
-}
-```
-
-## Tips & Tricks
-
-#### Scaling an image up to a maximum width
-
-If you want your image to scale as the window is resized but up to a maximum width (so the image doesn't stretch beyond its width):
-
-1. Set `layout=responsive` for `<amp-img>`.
-2. On the container of the image, specify the `max-width:<max width to display image>` CSS attribute. Why on the container? An `amp-img` element with `layout=responsive` is a _block-level_ element, whereas, `<img>` is _inline_. Alternatively, you could set `display: inline-block` in your CSS for the amp-img element.
-
-#### The difference between responsive and intrinsic layout
-
-Both the `responsive` and `intrinsic` layouts create an image that will scale automatically. The main difference is that the `intrinsic` layout uses an SVG image as its scaling element. This will make it behave in the same way as a standard HTML image while retaining the benefit of the browser knowing the image size on initial layout. The `intrinsic` layout will have an intrinsic size and will inflate a floated `div` until it reaches either the image size defined by the width and height attributes passed to the amp-img (not by the natural size of the image) or a CSS constraint such as `max-width`. or a CSS constraint like `max-width`. The `responsive` layout will render 0x0 in a floated `div` because it takes its size from the parent, which has no natural size when floated.
-
-#### Setting a fixed sized image
-
-If you want your image to display at a fixed size:
-
-1. Set `layout=fixed` for `<amp-img>`.
-2. Specify the `width` and `height`.
-
-{% call callout('Read on', type='read') %}
-Learn about the [inferred layout](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout#what-if-the-layout-attribute-isn%E2%80%99t-specified?) if you don't specify the `layout` attribute.
-{% endcall %}
-
-#### Setting the aspect ratio
-
-For responsive images, the `width` and `height` do not need to match the exact width and height of the `amp-img`; those values just need to result in the same aspect-ratio.
-
-For example, instead of specifying `width="900"` and `height="675"`, you can just specify `width="1.33"` and `height="1"`.
-
-[example preview="inline" playground="true"]
-
-```html
-<amp-img
-  alt="A view of the sea"
-  src="{{server_for_email}}/static/inline-examples/images/sea.jpg"
-  width="1.33"
-  height="1"
-  layout="responsive"
->
-</amp-img>
-```
-
-[/example]
-
-#### Setting multiple source files for different screen resolutions
-
-[filter formats="websites, stories, ads"]
-The [`srcset`](#attributes) attribute should be used to provide different resolutions of the same image, that all have the same aspect ratio. The browser will automatically choose the most appropriate file from `srcset` based on the screen resolution and width of the user's device.
-
-In contrast, the [`media`](https://www.ampproject.org/docs/reference/common_attributes#media) attribute shows or hides AMP components, and should be used when designing responsive layouts. The appropriate way to display images with differing aspect ratios is to use multiple `<amp-img>` components, each with a `media` attribute that matches the screen widths in which to show each instance.
-
-See the guide on [creating responsive AMP pages](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design#displaying-responsive-images) for more details.
-[/filter]<!-- formats="websites, stories, ads" -->
-
-[filter formats="email"]
-The [`media`](https://www.ampproject.org/docs/reference/common_attributes#media) attribute shows or hides AMP components, and should be used when designing responsive layouts. The appropriate way to display images with differing aspect ratios is to use multiple `<amp-img>` components, each with a `media` attribute that matches the screen widths in which to show each instance.
-
-See the guide on [creating responsive AMP pages](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design#displaying-responsive-images) for more details.
-[/filter]<!-- formats="email" -->
-
-[filter formats="websites, stories, ads"]
-
-#### Maintaining the aspect ratio for images with unknown dimensions
-
-The AMP layout system requires the aspect ratio of an image in advance before fetching the image; however, in some cases you might not know the image's dimensions. To display images with unknown dimensions and maintain the aspect ratios, combine AMP's [`fill`](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout) layout with the [`object-fit`](https://css-tricks.com/almanac/properties/o/object-fit/) CSS property. For more information, see the [How to support images with unknown dimensions](https://amp.dev/documentation/examples/style-layout/how_to_support_images_with_unknown_dimensions/) example.
-[/filter]<!-- formats="websites, stories, ads" -->
-
-## Validation
-
-See [amp-img rules](https://github.com/ampproject/amphtml/blob/master/validator/validator-main.protoascii) in the AMP validator specification.
diff --git a/builtins/amp-img/amp-img.js b/builtins/amp-img/amp-img.js
new file mode 100644
index 0000000000000..dc6cd6518e2cf
--- /dev/null
+++ b/builtins/amp-img/amp-img.js
@@ -0,0 +1,473 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {BaseElement} from '../../src/base-element';
+import {Layout, isLayoutSizeDefined} from '../../src/layout';
+import {ReadyState} from '../../src/core/constants/ready-state';
+import {Services} from '../../src/services';
+import {dev} from '../../src/log';
+import {guaranteeSrcForSrcsetUnsupportedBrowsers} from '../../src/utils/img';
+import {listen} from '../../src/event-helper';
+import {propagateObjectFitStyles, setImportantStyles} from '../../src/style';
+import {registerElement} from '../../src/service/custom-element-registry';
+import {removeElement, scopedQuerySelector} from '../../src/dom';
+
+/** @const {string} */
+const TAG = 'amp-img';
+
+/**
+ * Attributes to propagate to internal image when changed externally.
+ * @type {!Array<string>}
+ */
+const ATTRIBUTES_TO_PROPAGATE = [
+  'alt',
+  'aria-describedby',
+  'aria-label',
+  'aria-labelledby',
+  'crossorigin',
+  'referrerpolicy',
+  'title',
+  'sizes',
+  'srcset',
+  'src',
+];
+
+export class AmpImg extends BaseElement {
+  /** @override @nocollapse */
+  static R1() {
+    return R1_IMG_DEFERRED_BUILD;
+  }
+
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
+  /** @override @nocollapse */
+  static usesLoading() {
+    return true;
+  }
+
+  /** @override @nocollapse */
+  static getPreconnects(element) {
+    const src = element.getAttribute('src');
+    if (src) {
+      return [src];
+    }
+
+    // NOTE(@wassgha): since parseSrcset is computationally expensive and can
+    // not be inside the `buildCallback`, we went with preconnecting to the
+    // `src` url if it exists or the first srcset url.
+    const srcset = element.getAttribute('srcset');
+    if (srcset) {
+      // We try to find the first url in the srcset
+      const srcseturl = /\S+/.exec(srcset);
+      // Connect to the first url if it exists
+      if (srcseturl) {
+        return [srcseturl[0]];
+      }
+    }
+
+    return null;
+  }
+
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {boolean} */
+    this.allowImgLoadFallback_ = true;
+
+    /** @private {?Element} */
+    this.img_ = null;
+
+    /** @private {?UnlistenDef} */
+    this.unlistenLoad_ = null;
+
+    /** @private {?UnlistenDef} */
+    this.unlistenError_ = null;
+
+    /**
+     * The current width used by the automatically generated sizes attribute
+     * @private {number}
+     * */
+    this.sizesWidth_ = 0;
+  }
+
+  /** @override */
+  mutatedAttributesCallback(mutations) {
+    if (this.img_) {
+      const attrs = ATTRIBUTES_TO_PROPAGATE.filter(
+        (value) => mutations[value] !== undefined
+      );
+      // Mutating src should override existing srcset, so remove the latter.
+      if (
+        mutations['src'] &&
+        !mutations['srcset'] &&
+        this.element.hasAttribute('srcset')
+      ) {
+        // propagateAttributes() will remove [srcset] from this.img_.
+        this.element.removeAttribute('srcset');
+        attrs.push('srcset');
+
+        this.user().warn(
+          TAG,
+          'Removed [srcset] since [src] was mutated. Recommend adding a ' +
+            '[srcset] binding to support responsive images.',
+          this.element
+        );
+      }
+      this.propagateAttributes(
+        attrs,
+        this.img_,
+        /* opt_removeMissingAttrs */ true
+      );
+      this.propagateDataset(this.img_);
+
+      if (!IS_ESM) {
+        guaranteeSrcForSrcsetUnsupportedBrowsers(this.img_);
+      }
+
+      if (AmpImg.R1() && !this.img_.complete) {
+        this.setReadyState(ReadyState.LOADING);
+      }
+    }
+  }
+
+  /** @override */
+  preconnectCallback(onLayout) {
+    // NOTE(@wassgha): since parseSrcset is computationally expensive and can
+    // not be inside the `buildCallback`, we went with preconnecting to the
+    // `src` url if it exists or the first srcset url.
+    const src = this.element.getAttribute('src');
+    if (src) {
+      Services.preconnectFor(this.win).url(this.getAmpDoc(), src, onLayout);
+    } else {
+      const srcset = this.element.getAttribute('srcset');
+      if (!srcset) {
+        return;
+      }
+      // We try to find the first url in the srcset
+      const srcseturl = /\S+/.exec(srcset);
+      // Connect to the first url if it exists
+      if (srcseturl) {
+        Services.preconnectFor(this.win).url(
+          this.getAmpDoc(),
+          srcseturl[0],
+          onLayout
+        );
+      }
+    }
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+
+  /**
+   * Create the actual image element and set up instance variables.
+   * Called lazily in the first `#layoutCallback`.
+   * @return {!Image}
+   */
+  initialize_() {
+    if (this.img_) {
+      return this.img_;
+    }
+    // If this amp-img IS the fallback then don't allow it to have its own
+    // fallback to stop from nested fallback abuse.
+    this.allowImgLoadFallback_ = !this.element.hasAttribute('fallback');
+
+    // For SSR, image will have been written directly to DOM so no need to recreate.
+    const serverRendered = this.element.hasAttribute('i-amphtml-ssr');
+    if (serverRendered) {
+      this.img_ = scopedQuerySelector(this.element, '> img:not([placeholder])');
+    }
+    this.img_ = this.img_ || new Image();
+    this.img_.setAttribute('decoding', 'async');
+    if (this.element.id) {
+      this.img_.setAttribute('amp-img-id', this.element.id);
+    }
+
+    // Remove role=img otherwise this breaks screen-readers focus and
+    // only read "Graphic" when using only 'alt'.
+    if (this.element.getAttribute('role') == 'img') {
+      this.element.removeAttribute('role');
+      this.user().error(
+        TAG,
+        'Setting role=img on amp-img elements breaks ' +
+          'screen readers please just set alt or ARIA attributes, they will ' +
+          'be correctly propagated for the underlying <img> element.'
+      );
+    }
+
+    // It is important to call this before setting `srcset` attribute.
+    this.maybeGenerateSizes_(/* sync setAttribute */ true);
+    this.propagateAttributes(ATTRIBUTES_TO_PROPAGATE, this.img_);
+    this.propagateDataset(this.img_);
+    if (!IS_ESM) {
+      guaranteeSrcForSrcsetUnsupportedBrowsers(this.img_);
+    }
+    this.applyFillContent(this.img_, true);
+    propagateObjectFitStyles(this.element, this.img_);
+
+    if (!serverRendered) {
+      this.element.appendChild(this.img_);
+    }
+    return this.img_;
+  }
+
+  /**
+   * This function automatically generates sizes for amp-imgs without
+   * the sizes attribute.
+   * @param {boolean} sync Whether to immediately make the change or schedule
+   *     via mutateElement.
+   * @private
+   */
+  maybeGenerateSizes_(sync) {
+    if (R1_IMG_DEFERRED_BUILD) {
+      // The `getLayoutSize()` is not available for a R1 element. Skip this
+      // codepath. Also: is this feature at all useful? E.g. it doesn't even
+      // execute in the `i-amphtml-ssr` mode.
+      return;
+    }
+    if (!this.img_) {
+      return;
+    }
+    // If the image is server rendered, do not generate sizes.
+    if (this.element.hasAttribute('i-amphtml-ssr')) {
+      return;
+    }
+    // No need to generate sizes if already present.
+    const sizes =
+      this.element.hasAttribute('sizes') || this.img_.hasAttribute('sizes');
+    if (sizes) {
+      return;
+    }
+    // Sizes is useless without the srcset attribute or if the srcset
+    // attribute uses the x descriptor.
+    const srcset = this.element.getAttribute('srcset');
+    if (!srcset || /[0-9]+x(?:,|$)/.test(srcset)) {
+      return;
+    }
+
+    const {width} = this.element.getLayoutSize();
+    if (!this.shouldSetSizes_(width)) {
+      return;
+    }
+
+    const viewportWidth = this.getViewport().getWidth();
+
+    const entry = `(max-width: ${viewportWidth}px) ${width}px, `;
+    let defaultSize = width + 'px';
+
+    if (this.getLayout() !== Layout.FIXED) {
+      const ratio = Math.round((width * 100) / viewportWidth);
+      defaultSize = Math.max(ratio, 100) + 'vw';
+    }
+
+    const generatedSizes = entry + defaultSize;
+
+    if (sync) {
+      this.img_.setAttribute('sizes', generatedSizes);
+    } else {
+      this.mutateElement(() => {
+        this.img_.setAttribute('sizes', generatedSizes);
+      });
+    }
+    this.sizesWidth_ = width;
+  }
+
+  /**
+   * @param {number} newWidth
+   * @return {boolean}
+   * @private
+   */
+  shouldSetSizes_(newWidth) {
+    if (!this.img_.hasAttribute('sizes')) {
+      return true;
+    }
+    return newWidth > this.sizesWidth_;
+  }
+
+  /** @override */
+  reconstructWhenReparented() {
+    return false;
+  }
+
+  /** @override */
+  mountCallback() {
+    const initialized = !!this.img_;
+    const img = this.initialize_();
+    if (!initialized) {
+      listen(img, 'load', () => {
+        this.setReadyState(ReadyState.COMPLETE);
+        this.firstLayoutCompleted();
+        this.hideFallbackImg_();
+      });
+      listen(img, 'error', (reason) => {
+        this.setReadyState(ReadyState.ERROR, reason);
+        this.onImgLoadingError_();
+      });
+    }
+    if (img.complete) {
+      this.setReadyState(ReadyState.COMPLETE);
+      this.firstLayoutCompleted();
+      this.hideFallbackImg_();
+    } else {
+      this.setReadyState(ReadyState.LOADING);
+    }
+  }
+
+  /** @override */
+  unmountCallback() {
+    // Interrupt retrieval of incomplete images to free network resources when
+    // navigating pages in a PWA. Opt for tiny dataURI image instead of empty
+    // src to prevent the viewer from detecting a load error.
+    const img = this.img_;
+    if (img && !img.complete) {
+      img.src =
+        'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=';
+      removeElement(img);
+      this.img_ = null;
+    }
+  }
+
+  /** @override */
+  ensureLoaded() {
+    const img = dev().assertElement(this.img_);
+    img.loading = 'eager';
+  }
+
+  /** @override */
+  layoutCallback() {
+    this.initialize_();
+    const img = dev().assertElement(this.img_);
+    this.unlistenLoad_ = listen(img, 'load', () => this.hideFallbackImg_());
+    this.unlistenError_ = listen(img, 'error', () => this.onImgLoadingError_());
+    const {width} = this.element.getLayoutSize();
+    if (width <= 0) {
+      return Promise.resolve();
+    }
+    return this.loadPromise(img);
+  }
+
+  /** @override */
+  unlayoutCallback() {
+    if (AmpImg.R1()) {
+      // TODO(#31915): Reconsider if this is still desired for R1. This helps
+      // with network interruption when a document is inactivated.
+      return;
+    }
+
+    if (this.unlistenError_) {
+      this.unlistenError_();
+      this.unlistenError_ = null;
+    }
+    if (this.unlistenLoad_) {
+      this.unlistenLoad_();
+      this.unlistenLoad_ = null;
+    }
+
+    // Interrupt retrieval of incomplete images to free network resources when
+    // navigating pages in a PWA. Opt for tiny dataURI image instead of empty
+    // src to prevent the viewer from detecting a load error.
+    const img = this.img_;
+    if (img && !img.complete) {
+      img.src =
+        'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=';
+      removeElement(img);
+      this.img_ = null;
+    }
+
+    return true;
+  }
+
+  /** @override */
+  firstLayoutCompleted() {
+    const placeholder = this.getPlaceholder();
+    if (
+      placeholder &&
+      placeholder.classList.contains('i-amphtml-blurry-placeholder')
+    ) {
+      setImportantStyles(placeholder, {'opacity': 0});
+    } else {
+      this.togglePlaceholder(false);
+    }
+  }
+
+  /**
+   * @private
+   */
+  hideFallbackImg_() {
+    if (
+      !this.allowImgLoadFallback_ &&
+      this.img_.classList.contains('i-amphtml-ghost')
+    ) {
+      this.img_.classList.remove('i-amphtml-ghost');
+      this.toggleFallback(false);
+    }
+  }
+
+  /**
+   * If the image fails to load, show a fallback or placeholder instead.
+   * @private
+   */
+  onImgLoadingError_() {
+    if (this.allowImgLoadFallback_) {
+      this.img_.classList.add('i-amphtml-ghost');
+      this.toggleFallback(true);
+      // Hide placeholders, as browsers that don't support webp
+      // Would show the placeholder underneath a transparent fallback
+      this.togglePlaceholder(false);
+      this.allowImgLoadFallback_ = false;
+    }
+  }
+
+  /**
+   * Utility method to propagate data attributes from this element
+   * to the target element. (For use with arbitrary data attributes.)
+   * Removes any data attributes that are missing on this element from
+   * the target element.
+   * AMP Bind attributes are excluded.
+   *
+   * @param {!Element} targetElement
+   */
+  propagateDataset(targetElement) {
+    for (const key in targetElement.dataset) {
+      if (!(key in this.element.dataset)) {
+        delete targetElement.dataset[key];
+      }
+    }
+
+    for (const key in this.element.dataset) {
+      if (key.startsWith('ampBind') && key !== 'ampBind') {
+        continue;
+      }
+      if (targetElement.dataset[key] !== this.element.dataset[key]) {
+        targetElement.dataset[key] = this.element.dataset[key];
+      }
+    }
+  }
+}
+
+/**
+ * @param {!Window} win Destination window for the new element.
+ * @this {undefined}  // Make linter happy
+ */
+export function installImg(win) {
+  registerElement(win, TAG, AmpImg);
+}
diff --git a/builtins/amp-img/amp-img.md b/builtins/amp-img/amp-img.md
new file mode 100644
index 0000000000000..aa2bcd71e918e
--- /dev/null
+++ b/builtins/amp-img/amp-img.md
@@ -0,0 +1,373 @@
+---
+$category: media
+formats:
+  - websites
+  - email
+  - ads
+  - stories
+teaser:
+  text: Replaces the HTML5 img tag.
+---
+
+<!---
+Copyright 2015 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.
+-->
+
+# amp-img
+
+## Usage
+
+The AMP HTML replacement for the normal HTML `img` tag. With `amp-img`, AMP
+provides a powerful replacement.
+
+AMP may choose to delay or prioritize resource loading based on the viewport
+position, system resources, connection bandwidth, or other factors. The
+`amp-img` components allows the runtime to effectively manage image resources
+this way.
+
+`amp-img` components, like all externally fetched AMP resources, must be given
+an explicit size (as in `width` / `height`) in advance, so that the aspect ratio
+can be known without fetching the image. Actual layout behavior is determined by
+the `layout` attribute.
+
+[tip type="read-on"]
+
+Learn more about layouts in the
+[AMP HTML Layout System](../../docs/spec/amp-html-layout.md)
+spec and
+[Supported Layouts](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout.html#the-layout-attribute).
+
+[/tip]
+
+In the following example, we display an image that responds to the size of the
+viewport by setting `layout=responsive`. The image stretches and shrinks
+according to the aspect ratio specified by the `width` and `height`.
+
+[example preview="inline" playground="true"]
+
+```html
+<amp-img
+  alt="A view of the sea"
+  src="{{server_for_email}}/static/inline-examples/images/sea.jpg"
+  width="900"
+  height="675"
+  layout="responsive"
+>
+</amp-img>
+```
+
+[/example]
+
+[tip type="read-on"]
+
+Learn about responsive AMP pages in the
+[Create Responsive AMP Pages](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design)
+guide.
+
+[/tip]
+
+If the resource requested by the `amp-img` component fails to load, the space
+will be blank unless a
+[`fallback`](https://amp.dev/documentation/guides-and-tutorials/learn/amp-html-layout#fallback)
+child is provided. A fallback is only executed on the initial layout and
+subsequent `src` changes after the fact (through resize + `srcset` for example)
+will not have a fallback for performance implications.
+
+### Specify a fallback image
+
+In the following example, if the browser cannot load the image, it'll display
+the fallback image instead (here we're using an inline SVG as fallback):
+
+[example preview="inline" playground="true"]
+
+```html
+<amp-img
+  alt="Misty road"
+  width="550"
+  height="368"
+  src="image-does-not-exist.jpg"
+>
+  <amp-img
+    alt="Misty road"
+    fallback
+    width="550"
+    height="368"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMSAxIDggNCI+PGltYWdlIGZpbHRlcj0idXJsKCNibHVyKSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQW9BQUFBR0NBWUFBQUQ2OEEvR0FBQUFBWE5TUjBJQXJzNGM2UUFBQUVSbFdFbG1UVTBBS2dBQUFBZ0FBWWRwQUFRQUFBQUJBQUFBR2dBQUFBQUFBNkFCQUFNQUFBQUJBQUVBQUtBQ0FBUUFBQUFCQUFBQUNxQURBQVFBQUFBQkFBQUFCZ0FBQUFEK2lGWDBBQUFBcjBsRVFWUUlIVDJQU1FxRlFBeEVYN2VpNG9BYkVRV3Y0TVlMZUhLdjQwSVV3UW5uL25ZdmZxQ29JcWxRaVVpU1JQbStqNVFTei9PNDd4dkhjUmlHZ2I3dnNTeUw2N3FRNy91YW9XNHN5L0kzYXYwOGp6SHlsZFNHZmQrcDY5cXcxbTNia21VWlFnalQweXlpS0ZKNlE4ZVdaVWxSRklSaGFLS2JwdUU4VCtaNVJyaXVxejZna2VjNVZWVXhqaVBUTkpremp1TmcyemJzN3htQ0lDQk5VK0k0cHVzNmxGS3M2NHB0MjBicnhCODZ4VmdkUHdJV2NRQUFBQUJKUlU1RXJrSmdnZz09Ii8+PGZpbHRlciBpZD0iYmx1ciI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iLjUiIC8+PC9maWx0ZXI+PC9zdmc+"
+  >
+  </amp-img>
+</amp-img>
+```
+
+[/example]
+
+A placeholder background color or other visual can be set using CSS selector and
+style on the element itself.
+
+Additional image features like captions can be implemented with standard HTML
+(for example, `figure` and `figcaption`).
+
+[tip type="read-on"]
+
+Learn more about using `amp-img` from these resources:
+
+-   [Placeholders & fallbacks](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders)
+-   [Include Images & Video](https://amp.dev/documentation/guides-and-tutorials/develop/media_iframes_3p/)
+
+[/tip]
+
+### Scale an image up to a maximum width
+
+If you want your image to scale as the window is resized but up to a maximum
+width (so the image doesn't stretch beyond its width):
+
+1.  Set `layout=responsive` for `<amp-img>`.
+2.  On the container of the image, specify the
+    `max-width:<max width to display image>` CSS attribute. Why on the
+    container? An `amp-img` element with `layout=responsive` is a _block-level_
+    element, whereas, `<img>` is _inline_. Alternatively, you could set
+    `display: inline-block` in your CSS for the `amp-img` element.
+
+### The difference between the `responsive` and `intrinsic` layouts
+
+Both the `responsive` and `intrinsic` layouts create an image that will scale
+automatically. The main difference is that the `intrinsic` layout uses an SVG
+image as its scaling element. This will make it behave in the same way as a
+standard HTML image while retaining the benefit of the browser knowing the image
+size on initial layout. The `intrinsic` layout will have an intrinsic size and
+will inflate a floated `div` until it reaches either the image size defined by
+the width and height attributes passed to the `amp-img` (not by the natural size
+of the image) or a CSS constraint such as `max-width`. The `responsive` layout
+will render `0x0` in a floated `div` because it takes its size from the parent,
+which has no natural size when floated.
+
+### Set a fixed sized image
+
+If you want your image to display at a fixed size:
+
+1.  Set `layout=fixed` for `<amp-img>`.
+2.  Specify the `width` and `height`.
+
+[tip type="read-on"]
+
+Learn about the
+[inferred layout](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout#what-if-the-layout-attribute-isn%E2%80%99t-specified?)
+if you don't specify the `layout` attribute.
+
+[/tip]
+
+### Set the aspect ratio
+
+For responsive images, the `width` and `height` do not need to match the exact
+width and height of the `amp-img`; those values just need to result in the same
+aspect-ratio.
+
+For example, instead of specifying `width="900"` and `height="675"`, you can
+just specify `width="1.33"` and `height="1"`.
+
+[example preview="inline" playground="true"]
+
+```html
+<amp-img
+  alt="A view of the sea"
+  src="{{server_for_email}}/static/inline-examples/images/sea.jpg"
+  width="1.33"
+  height="1"
+  layout="responsive"
+>
+</amp-img>
+```
+
+[/example]
+
+### Set multiple source files for different screen resolutions
+
+[filter formats="websites, stories, ads"]
+
+The [`srcset`](#srcset) attribute should be used to provide different
+resolutions of the same image, that all have the same aspect ratio. The browser
+will automatically choose the most appropriate file from `srcset` based on the
+screen resolution and width of the user's device.
+
+In contrast, the `media`
+attribute shows or hides AMP components, and should be used when designing
+responsive layouts. The appropriate way to display images with differing aspect
+ratios is to use multiple `<amp-img>` components, each with a `media` attribute
+that matches the screen widths in which to show each instance.
+
+See the guide on
+[creating responsive AMP pages](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design#displaying-responsive-images)
+for more details.
+
+[/filter]<!-- formats="websites, stories, ads" -->
+
+[filter formats="email"]
+
+The `media`
+attribute shows or hides AMP components, and should be used when designing
+responsive layouts. The appropriate way to display images with differing aspect
+ratios is to use multiple `<amp-img>` components, each with a `media` attribute
+that matches the screen widths in which to show each instance.
+
+See the guide on
+[creating responsive AMP pages](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design#displaying-responsive-images)
+for more details.
+
+[/filter]<!-- formats="email" -->
+
+[filter formats="websites, stories, ads"]
+
+### Maintain the aspect ratio for images with unknown dimensions
+
+The AMP layout system requires the aspect ratio of an image in advance before
+fetching the image; however, in some cases you might not know the image's
+dimensions. To display images with unknown dimensions and maintain the aspect
+ratios, combine AMP's
+[`fill`](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout/#supported-values-for-the-layout-attribute)
+layout with the
+[`object-fit`](https://css-tricks.com/almanac/properties/o/object-fit/) CSS
+property. For more information, see the
+[How to support images with unknown dimensions](https://amp.dev/documentation/examples/style-layout/how_to_support_images_with_unknown_dimensions/)
+example.
+
+[/filter]<!-- formats="websites, stories, ads" -->
+
+### Accessibility considerations for images
+
+`<amp-img>` allows you to include animated images, like GIF or APNG. However, remember that animations included this way can't usually be paused/stopped by users. This can, depending on the image and its size, be a minor distraction, or a major problem for certain user groups - particularly, if the animation contains fast strobing color changes. In general, we recommend avoiding the use of animated images altogether, unless you are certain that they won't have an adverse impact.
+
+`<amp-img>` can also be used to include images of text. It is usually preferable to use actual HTML text, rather than images of text, whenever possible. If an image of text must be used (for instance, because a specific typefaces is mandated by corporate identity/brand guidelines), make sure that the `alt` accurately reflects the text visible in the image.
+
+Lastly, if images contain text or important non-text elements (such as bar charts, infographics, icons) that are essential to understanding the content of the image, make sure that they have sufficient color contrast. See [web.dev color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) for an introduction (primarily around text contrast) and [Knowbility: Exploring WCAG 2.1 — 1.4.11 Non‑text Contrast](https://knowbility.org/blog/2018/WCAG21-1411Contrast/) for more details around non-text elements.
+
+#### Choosing an appropriate text alternative
+
+For suggestions and advice on how to choose an appropriate text alternative for images, you can refer to the [W3C WAI tutorial "An alt Decision Tree"](https://www.w3.org/WAI/tutorials/images/decision-tree/) and the [HTML5.2 Requirements for providing text to act as an alternative for images](https://www.w3.org/TR/html52/semantics-embedded-content.html#alt-text).
+
+## Attributes
+
+### `src`
+
+[filter formats="websites, stories, ads"]
+
+This attribute is similar to the `src` attribute on the `img` tag. The value
+must be a URL that points to a publicly-cacheable image file. Cache providers
+may rewrite these URLs when ingesting AMP files to point to a cached version of
+the image.
+
+[/filter] <!-- formats="websites, stories, ads" -->
+
+[filter formats="email"]
+
+This attribute is similar to the `src` attribute on the `img` tag. For emails,
+the URL must be `https`.
+
+The AMP for Email spec disallows the use of the following attributes on the AMP
+email format.
+
+-   `[src]`
+-   `[srcset]`
+-   `srcset`
+-   `lightbox`
+-   `lightbox-thumbnail-id`
+-   `object-fit`
+-   `object-position`
+
+[/filter] <!-- formats="email" -->
+
+[filter formats="websites, stories, ads"]
+
+### `srcset` <a name="srcset"></a>
+
+Same as `srcset` attribute on the `img` tag. For browsers that do not support
+`srcset`, `<amp-img>` will default to using `src`. If only `srcset` and no `src`
+is provided, the first url in the `srcset` will be selected.
+
+[/filter] <!-- formats="websites, stories, ads" -->
+
+### `sizes`
+
+The value of the AMP `sizes` attribute is a sizes expression that selects the
+defined size corresponding to the media query based on the current window size.
+<strong>Additionally, AMP sets an inline style for `width` on the
+element</strong>. If the `srcset` attribute is provided, `<amp-img>` will
+autogenerate the HTML5 definition of the `sizes` attribute for the underlying
+`<img>`, when none is specified. If the `srcset` attribute is not provided, no
+`sizes` attribute will be autogenerated for the underlying `<amp-img>`.
+
+It is possible to use `sizes` on `<amp-img>` without `srcset` purely for setting
+an inline style for `width` according to the matched media query, or purely for
+inferencing layout `responsive`.
+
+[tip type="note"]
+
+For the `<img>` tag in `HTML`, the `sizes` attribute is used in conjunction with
+the `srcset` attribute and specifies the intended display size of the image as
+corresponding to a media condition. It will influence the intrinsic display size
+of the underlying `<img>` based on
+[browser behavior](https://gist.github.com/cathyxz/f17d12c07d60bcef52591e64e5e684fb).
+
+[/tip]
+
+See [Responsive images with srcset, sizes & heights](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/art_direction)
+for usage of `sizes` and `srcset`.
+
+### `alt`
+
+A string of alternate text, similar to the `alt` attribute on `img`. Always provide an appropriate alternative text whenever you use `amp-img`. Otherwise, assistive technologies (such as screen readers) will announce the element as "unlabelled graphic" or similar. If the image is purely decorative and does not convey any content, you can use an empty `alt=""` - in this case, assistive technologies will simply ignore/not announce the element at all.
+
+### `attribution`
+
+A string that indicates the attribution of the image. For example,
+`attribution="CC courtesy of Cats on Flicker"`.
+
+### `height` and `width`
+
+An explicit size of the image, which is used by the AMP runtime to determine the
+aspect ratio without fetching the image.
+
+### Common attributes
+
+`amp-img` includes the
+[common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
+
+### Data attributes
+
+Data attributes are copied from the `amp-img` element to the internal `img`
+element created by the component.
+
+## Styling
+
+`amp-img` can be styled directly via CSS properties. Setting a grey background
+placeholder for example could be achieved via:
+
+```css
+amp-img {
+  background-color: grey;
+}
+```
+
+[filter formats="email"]
+
+Enable a lightbox effect on `amp-img` in email by using the
+[`amp-image-lightbox`](../../extensions/amp-image-lightbox/amp-image-lightbox.md)
+component with the `on` action.
+
+[/filter] <!-- formats="email" -->
+
+## Validation
+
+See [`amp-img` rules](https://github.com/ampproject/amphtml/blob/main/validator/validator-main.protoascii)
+in the AMP validator specification.
diff --git a/builtins/amp-layout.md b/builtins/amp-layout.md
deleted file mode 100644
index 6087bf88c1125..0000000000000
--- a/builtins/amp-layout.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-$category: layout
-formats:
-  - websites
-  - email
-  - ads
-  - stories
-teaser:
-  text: A generic, multi-purpose container element that brings AMP's powerful layouts to any element.
----
-
-<!---
-Copyright 2016 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.
--->
-
-# <a name="amp-layout"></a> `amp-layout`
-
-<table>
-  <tr>
-    <td width="40%"><strong>Description</strong></td>
-    <td>A generic, multi-purpose container element that brings AMP's powerful <a href="https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout#the-layout-attribute">layouts </a> to any element.</td>
-  </tr>
-  <tr>
-    <td class="col-fourty"><strong><a href="https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout">Supported Layouts</a></strong></td>
-    <td>container, fill, fixed, fixed-height, flex-item, intrinsic, responsive</td>
-  </tr>
-</table>
-
-## Overview
-
-The `amp-layout` component allows you to apply aspect-ratio based responsive layouts to any element. The `amp-layout` component works similarly to the [layout](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout#the-layout-attribute) attribute on existing AMP components, but supports any HTML markup as children. Other supported layouts all work with `amp-layout` (e.g., fixed-height, fixed, etc.).
-
-**Example**
-
-This example uses `amp-layout` to create a responsive container around a circle drawn with inline SVG.
-
-```html
-<amp-layout layout="responsive" width="1" height="1">
-  <svg viewBox="0 0 100 100">
-    <circle cx="50%" cy="50%" r="40%" stroke="black" stroke-width="3" />
-    Sorry, your browser does not support inline SVG.
-  </svg>
-</amp-layout>
-```
-
-## Attributes
-
-This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
-
-## Validation
-
-See [amp-layout rules](https://github.com/ampproject/amphtml/blob/master/validator/validator-main.protoascii) in the AMP validator specification.
diff --git a/builtins/amp-layout.js b/builtins/amp-layout/amp-layout.js
similarity index 82%
rename from builtins/amp-layout.js
rename to builtins/amp-layout/amp-layout.js
index 0a059b3306aa7..a7ec8fde58c4d 100644
--- a/builtins/amp-layout.js
+++ b/builtins/amp-layout/amp-layout.js
@@ -14,11 +14,16 @@
  * limitations under the License.
  */
 
-import {BaseElement} from '../src/base-element';
-import {Layout, isLayoutSizeDefined} from '../src/layout';
-import {registerElement} from '../src/service/custom-element-registry';
+import {BaseElement} from '../../src/base-element';
+import {Layout, isLayoutSizeDefined} from '../../src/layout';
+import {registerElement} from '../../src/service/custom-element-registry';
 
 class AmpLayout extends BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @override */
   isLayoutSupported(layout) {
     return layout == Layout.CONTAINER || isLayoutSizeDefined(layout);
@@ -36,12 +41,6 @@ class AmpLayout extends BaseElement {
     });
     this.element.appendChild(container);
   }
-
-  /** @override */
-  prerenderAllowed() {
-    // Allow amp-layout to be built in prerender mode.
-    return true;
-  }
 }
 
 /**
diff --git a/builtins/amp-layout/amp-layout.md b/builtins/amp-layout/amp-layout.md
new file mode 100644
index 0000000000000..a34be97218d4c
--- /dev/null
+++ b/builtins/amp-layout/amp-layout.md
@@ -0,0 +1,59 @@
+---
+$category: layout
+formats:
+  - websites
+  - email
+  - ads
+  - stories
+teaser:
+  text: A generic, multi-purpose container element that brings AMP's powerful layouts to any element.
+---
+
+<!---
+Copyright 2016 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.
+-->
+
+# amp-layout <a name="amp-layout"></a>
+
+## Usage
+
+The `amp-layout` component allows you to apply aspect-ratio based responsive
+layouts to any element. The `amp-layout` component works similarly to the
+[`layout`](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout#the-layout-attribute)
+attribute on existing AMP components, but supports any HTML markup as children.
+Other supported layouts all work with `amp-layout` (e.g., fixed-height, fixed,
+etc.).
+
+The example below uses `amp-layout` to create a responsive container around a circle
+drawn with inline SVG.
+
+```html
+<amp-layout layout="responsive" width="1" height="1">
+  <svg viewBox="0 0 100 100">
+    <circle cx="50%" cy="50%" r="40%" stroke="black" stroke-width="3" />
+    Sorry, your browser does not support inline SVG.
+  </svg>
+</amp-layout>
+```
+
+## Attributes
+
+### Common attributes
+
+The `amp-layout` component includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
+
+## Validation
+
+See [amp-layout rules](https://github.com/ampproject/amphtml/blob/main/validator/validator-main.protoascii) in the AMP validator specification.
diff --git a/builtins/amp-pixel.js b/builtins/amp-pixel/amp-pixel.js
similarity index 92%
rename from builtins/amp-pixel.js
rename to builtins/amp-pixel/amp-pixel.js
index d4b20ca08087a..14ee7076f3181 100644
--- a/builtins/amp-pixel.js
+++ b/builtins/amp-pixel/amp-pixel.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import {BaseElement} from '../src/base-element';
-import {Services} from '../src/services';
-import {createPixel} from '../src/pixel';
-import {dev, userAssert} from '../src/log';
-import {registerElement} from '../src/service/custom-element-registry';
+import {BaseElement} from '../../src/base-element';
+import {Services} from '../../src/services';
+import {createPixel} from '../../src/pixel';
+import {dev, userAssert} from '../../src/log';
+import {registerElement} from '../../src/service/custom-element-registry';
 
 const TAG = 'amp-pixel';
 
diff --git a/builtins/amp-pixel.md b/builtins/amp-pixel/amp-pixel.md
similarity index 90%
rename from builtins/amp-pixel.md
rename to builtins/amp-pixel/amp-pixel.md
index c43b115e3ee9a..d8def8014b9b5 100644
--- a/builtins/amp-pixel.md
+++ b/builtins/amp-pixel/amp-pixel.md
@@ -43,7 +43,7 @@ limitations under the License.
   </tr>
 </table>
 
-## Behavior
+## Usage
 
 The `amp-pixel` component behaves like a simple tracking pixel `img`. It takes a single URL, but provides variables that can be replaced by the component in the URL string when making the request. See the [substitutions](#substitutions) section for further details.
 
@@ -53,17 +53,28 @@ In this basic example, the `amp-pixel` issues a simple GET request to the given
 <amp-pixel src="https://foo.com/tracker/foo" layout="nodisplay"></amp-pixel>
 ```
 
-{% call callout('Note', type='note') %}
+[tip type="note"]
 When processing AMP URLs in the referrer header of analytics requests, strip out or ignore the `usqp` parameter. This parameter is used by Google to trigger experiments for the Google AMP Cache.
-{% endcall %}
+[/tip]
+
+### Substitutions
+
+The `amp-pixel` allows all standard URL variable substitutions.
+See the [Substitutions Guide](../../docs/spec/amp-var-substitutions.md) for more information.
+
+In the following example, a request might be made to something like `https://foo.com/pixel?0.8390278471201` where the RANDOM value is randomly generated upon each impression.
+
+```html
+<amp-pixel src="https://foo.com/pixel?RANDOM" layout="nodisplay"></amp-pixel>
+```
 
 ## Attributes
 
-##### src (required)
+### src (required)
 
 A simple URL to a remote endpoint that must be `https` protocol.
 
-##### referrerpolicy (optional)
+### referrerpolicy (optional)
 
 This attribute is similar to the `referrerpolicy` attribute on `<img>`, however `no-referrer` is the only accepted value. If `referrerpolicy=no-referrer` is specified, the `referrer` header is removed from the HTTP request.
 
@@ -75,7 +86,7 @@ This attribute is similar to the `referrerpolicy` attribute on `<img>`, however
 ></amp-pixel>
 ```
 
-##### allow-ssr-img (optional)
+### allow-ssr-img (optional)
 
 This attribute used in AMP4ADS creatives indicates that as part of post validation
 transformation, an img element may be placed directly within the amp-pixel
@@ -83,25 +94,14 @@ element allowing the ping to be sent in parallel with AMP runtime fetch/executio
 Note that it means that any macros within the url will NOT be expanded so only
 use if they are not present in the src.
 
-##### common attributes
+### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
 
-## Substitutions
-
-The `amp-pixel` allows all standard URL variable substitutions.
-See the [Substitutions Guide](../spec/amp-var-substitutions.md) for more information.
-
-In the following example, a request might be made to something like `https://foo.com/pixel?0.8390278471201` where the RANDOM value is randomly generated upon each impression.
-
-```html
-<amp-pixel src="https://foo.com/pixel?RANDOM" layout="nodisplay"></amp-pixel>
-```
-
 ## Styling
 
 `amp-pixel` should not be styled.
 
 ## Validation
 
-See [amp-pixel rules](https://github.com/ampproject/amphtml/blob/master/validator/validator-main.protoascii) in the AMP validator specification.
+See [amp-pixel rules](https://github.com/ampproject/amphtml/blob/main/validator/validator-main.protoascii) in the AMP validator specification.
diff --git a/builtins/storybook/amp-layout-with-aspect-ratio-css.amp.js b/builtins/storybook/amp-layout-with-aspect-ratio-css.amp.js
new file mode 100644
index 0000000000000..3851b0950f6e7
--- /dev/null
+++ b/builtins/storybook/amp-layout-with-aspect-ratio-css.amp.js
@@ -0,0 +1,91 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../src/preact';
+import {number, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: '0/amp-layout with aspect ratio CSS',
+  decorators: [withKnobs, withAmp],
+  parameters: {
+    experiments: ['layout-aspect-ratio-css'],
+  },
+};
+
+export const responsiveWidthBound = () => {
+  const width = number('width', 400);
+  const height = number('height', 300);
+  return (
+    <main>
+      <style jsx global>
+        {`
+          .content {
+            background: cyan;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+          }
+        `}
+      </style>
+      <amp-layout layout="responsive" width={width} height={height}>
+        <div className="content">
+          {width}:{height}
+        </div>
+      </amp-layout>
+    </main>
+  );
+};
+
+export const responsiveHeightBound = () => {
+  const width = number('width', 400);
+  const height = number('height', 300);
+  return (
+    <main>
+      <style jsx global>
+        {`
+          .container {
+            background: lightgray;
+            position: relative;
+            display: flex;
+            flex-direction: row;
+            height: 200px;
+          }
+          .container > amp-layout {
+            height: 100%;
+          }
+          .content {
+            background: cyan;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+          }
+        `}
+      </style>
+      <div class="container">
+        <amp-layout layout="responsive" width={width} height={height}>
+          <div class="content">
+            {width}:{height}
+          </div>
+        </amp-layout>
+      </div>
+    </main>
+  );
+};
diff --git a/builtins/storybook/amp-layout.amp.js b/builtins/storybook/amp-layout.amp.js
new file mode 100644
index 0000000000000..c4d80fca691a8
--- /dev/null
+++ b/builtins/storybook/amp-layout.amp.js
@@ -0,0 +1,86 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../src/preact';
+import {number, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: '0/amp-layout',
+  decorators: [withKnobs, withAmp],
+};
+
+export const responsive = () => {
+  const width = number('width', 400);
+  const height = number('height', 300);
+  return (
+    <main>
+      <style jsx global>
+        {`
+          .content {
+            background: cyan;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+          }
+        `}
+      </style>
+      <amp-layout layout="responsive" width={width} height={height}>
+        <div className="content">
+          {width}:{height}
+        </div>
+      </amp-layout>
+    </main>
+  );
+};
+
+export const intrinsic = () => {
+  const width = number('width', 800);
+  const height = number('height', 600);
+  const maxWidth = number('maxWidth', 400);
+  return (
+    <main>
+      <style jsx global>
+        {`
+          .container {
+            background: lightgray;
+            position: relative;
+            float: left;
+          }
+          .content {
+            background: cyan;
+            width: 100%;
+            height: 100%;
+          }
+        `}
+      </style>
+      <div class="container">
+        <amp-layout
+          layout="intrinsic"
+          width={width}
+          height={height}
+          style={{maxWidth}}
+        >
+          <div class="content">
+            {width}:{height}
+          </div>
+        </amp-layout>
+      </div>
+    </main>
+  );
+};
diff --git a/contributing/CODE_OWNERSHIP.md b/contributing/CODE_OWNERSHIP.md
deleted file mode 100644
index bf201bc8bc8c1..0000000000000
--- a/contributing/CODE_OWNERSHIP.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# Code Ownership and AMP
-
-This document describes the code ownership (OWNERS) model for the AMP open source
-project. This model is used in the [amphtml repository](https://github.com/ampproject/amphtml) and may be used by other AMP repositories as well.
-
-For more information on the overall code contribution process that the OWNERS model is a part of, see the [Contributing code and features](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md) documentation.
-
-The goals of enforcing AMP code ownership are as follows:
-
-- Provide the flexibility to specify a different set of owners for individual
-  directories / files in the repository
-- Allow for the recursive inheritance of ownership for files / directories based
-  on the ownership of parent directory(ies)
-- Prevent incoming pull requests from being merged until they are approved by a
-  sufficient number of owners so as to cover all files / directories in the
-  change
-- Allow overall project / area owners to approve the odd PR, without their
-  having to receive a GitHub notification them about every incoming PR
-- Provide an automated mechanism to update the approved status of a PR each time
-  a reviewer modifies it
-- Forbid non-committers and non-owners from modifying the approved status of a
-  pull request
-- Make it easy to add / change the list of owners for a given directory / file
-
-## Chromium's code ownership model
-
-The Chromium open source project implements a code ownership
-[model](https://chromium.googlesource.com/chromium/src/+/master/docs/code_reviews.md#OWNERS-files)
-that we would like to use for AMP HTML.
-
-## GitHub's native code ownership solution
-
-GitHub's [native](https://help.github.com/articles/about-code-owners/) solution
-uses a CODEOWNERS file in each directory to determine who owns the files within
-the directory. It has wildcard support to specify different owners for different
-files / file types, and glob support to specify owners for an entire directory
-tree.
-
-Unfortunately, this solution is missing a key feature: `OWNERS` files are not
-recursive. In other words, the owner of a directory is not automatically the
-owner of its subdirectories.
-
-## AMP's custom code ownership solution
-
-AMP will use a custom open-source web service available on GitHub at
-[google/github-owners-bot](https://github.com/google/github-owners-bot). This
-will be deployed on [ampproject/amphtml](https://github.com/ampproject/amphtml)
-as a bot, which will update the status of a pull request in response to the
-following events:
-
-- Creation of a pull request
-- New commit pushed to a pull request
-- Comment posted on a pull request
-- Pull request reviewed
-
-After each of these events, the pull request's status will be updated by the bot
-to indicate whether it has been approved by a sufficient number of owners.
-
-An earlier version of this bot was limited by GitHub's API, which could only
-post comments to pull requests. This did not scale well at the time, and use of
-the bot was discontinued.
-
-Today, GitHub supports a new [status API](https://developer.github.com/v3/repos/statuses/)
-that will be used by the bot to directly update the status of pull requests as
-described above. Stay tuned for the latest changes.
-
-## Approvals required before merging a change
-
-Any change in AMP requires the approval of at least one owner of the code the change
-modifies, but this is a subset of the required approvals before a change may be merged.
-See the [code contribution process](./contributing-code.md) for more details.
-
-## Criteria for being listed as an owner in an `OWNERS` file
-
-The `OWNERS` file for each directory will typically list the creator(s) of
-the component or extension it contains, along with those who are most familiar
-with the directory contents. To be added to an OWNERS file create a PR and
-go through the normal [code contribution process](./contributing-code.md).
diff --git a/contributing/DESIGN_PRINCIPLES.md b/contributing/DESIGN_PRINCIPLES.md
deleted file mode 100644
index 60200b577a305..0000000000000
--- a/contributing/DESIGN_PRINCIPLES.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# AMP Design Principles
-
-These design principles are meant to guide the ongoing design and development of AMP. They should help us make internally consistent decisions.
-
-## User Experience > Developer Experience > Ease of Implementation.
-
-When in doubt, do what’s best for the end user experience, even if it means that it’s harder for the page creator to build or for the library developer to implement.
-
-## Don’t design for a hypothetical faster future browser.
-
-We’ve chosen to build AMP as a library in the spirit of the [extensible web manifesto](https://github.com/extensibleweb/manifesto/blob/master/README.md) to be able to fix the web of today, not the web of tomorrow.
-
-AMP should be fast in today's browsers. When certain optimizations aren't possible with today's platform, AMP developers should participate in standards development to get these added to the web platform.
-
-## Don’t break the web.
-
-Ensure that if AMP has outages or problems it doesn’t hurt the rest of the web. That means if the Google AMP Cache, the URL API or the library fails it should be possible for websites and consumption apps to gracefully degrade. If something works with an AMP cache it should also work without a cache.
-
-## Solve problems on the right layer.
-
-E.g. don’t integrate things on the client side, just because that is easier, when the user experience would be better with a server side integration.
-
-## Only do things if they can be made fast.
-
-Don’t introduce components or features to AMP that can’t reliably run at 60fps or hinder the instant load experience on today’s most common mobile devices.
-
-## Prioritise things that improve the user experience – but compromise when needed.
-
-Some things can be made fast and are still a terrible user experience. AMPs should deliver a fantastic user experience and speed is just one part of that. Only compromise when lack of support for something would stop AMP from being widely used and deployed.
-
-## No "nicelists" or "allowed lists".
-
-We won’t give any special treatment to specific sites, domains or origins except where needed for security or performance reasons.
diff --git a/contributing/DEVELOPING.md b/contributing/DEVELOPING.md
deleted file mode 100644
index 025f7781a6ccd..0000000000000
--- a/contributing/DEVELOPING.md
+++ /dev/null
@@ -1,118 +0,0 @@
-<!---
-Copyright 2015 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.
--->
-
-# Developing in AMP
-
-## How to get started
-
-Before you start developing in AMP, check out these resources:
-
-- [CONTRIBUTING.md](../CONTRIBUTING.md) has details on various ways you can contribute to the AMP open source project.
-  - If you're developing in AMP, you should read the [Contributing code and features](./contributing-code.md) documentation, which includes information on code reviews and approvals.
-  - The [Ongoing participation](../CONTRIBUTING.md#ongoing-participation) section has details on various ways of getting in touch with others in the community including email and Slack.
-  - **If you are new to open source projects, Git/GitHub, etc.**, check out the [Tips for new open source contributors](../CONTRIBUTING.md#tips-for-new-open-source-contributors) which includes information on getting help and finding your first bug to work on.
-- The [Getting Started Quick Start Guide](getting-started-quick.md) has installation steps and basic instructions for [one-time setup](getting-started-quick.md#one-time-setup), how to [build AMP & run a local server](getting-started-quick.md#build-amp--run-a-local-server) and how to [test AMP](getting-started-quick.md#test-amp).
-
-## Guidelines & Style
-
-Before you start writing code, consult these resources for guidance and guidelines on:
-
-- **Design**: [AMP Design Principles](DESIGN_PRINCIPLES.md)
-- **JavaScript**: [Google JavaScript Code Style Guide](https://google.github.io/styleguide/jsguide.html)
-- **CSS**: [Writing CSS For AMP Runtime](writing-css.md)
-- **Creating new components**:
-  - [Instructions and Guidelines for building an AMP component](building-an-amp-extension.md)
-  - Learn to create your first component in this [codelab](https://codelabs.developers.google.com/codelabs/creating-your-first-amp-component/#0)
-  - Watch this [YouTube video](https://youtu.be/FJEhQFNKeaQ?list=PLXTOW_XMsIDTDXYO-NAi2OpEH0zyguvqX) to learn about "Building a new AMP component"
-- **Integrating third-party software, embeds, services**: [Guidelines](../3p/README.md)
-
-## Testing
-
-For most developers, the instructions in the [Getting Started Quick Start Guide](getting-started-quick.md) will be sufficient for building/running/testing during development.
-
-For detailed information on testing, see [TESTING.md](TESTING.md).
-
-## Repository Layout
-
-<pre>
-  3p/             - Implementation of third party sandbox iframes.
-  ads/            - Modules implementing specific ad networks used in <amp-ad>
-  build/          - (generated) intermediate generated files
-  build-system/   - build infrastructure
-  builtins/       - tags built into the core AMP runtime
-      *.md        - documentation for use of the builtin
-      *.js        - source code for builtin tag
-  contributing/   - docs for people contributing to AMP
-  css/            - default css
-  dist/           - (generated) main JS binaries are created here. This is what
-                    gets deployed to cdn.ampproject.org.
-  dist.3p/        - (generated) JS binaries and HTML files for 3p embeds and ads
-                    This is what gets deployed to 3p.ampproject.net.
-  examples/       - example AMP HTML files and corresponding assets
-  extensions/     - plugins which extend the AMP HTML runtime's core set of tags
-  spec/           - The AMP HTML Specification files
-  src/            - source code for the AMP runtime
-  test/           - tests for the AMP runtime and builtins
-  testing/        - testing infrastructure
-  third_party/    - third party code used in AMP
-  tools/          - code for AMP related tools
-  validator/      - AMP Validator runners and tools
-
-</pre>
-
-## Supported browsers
-
-In general we support the 2 latest versions of major browsers like Chrome, Firefox, Edge, Safari, Opera, and UC Browser. We support desktop, phone, tablet and the web view version of these respective browsers. For iOS we support the latest 2 **major** versions which covers about 2 years.
-
-Beyond that the core AMP library and builtin elements should aim for very wide browser support and we accept fixes for all browsers with market share greater than 1 percent.
-
-In particular, we try to maintain "it might not be perfect but isn't broken"-support for IE 11, iOS 8, the Android 4.0 system browser and Chrome 41.
-
-## Eng docs
-
-- [Life of an AMP \*](https://docs.google.com/document/d/1WdNj3qNFDmtI--c2PqyRYrPrxSg2a-93z5iX0SzoQS0/edit#)
-- [AMP Layout system](../spec/amp-html-layout.md)
-- [Building an AMP Extension](building-an-amp-extension.md)
-
-We also recommend scanning the [spec](../spec/). The non-element part should help understand some of the design aspects.
-
-## Builds and releases
-
-- The [AMP buildcop](buildcop.md) helps ensure that AMP's builds remain green (i.e. everything builds and all of the tests pass). If you run into issues with builds that seem unrelated to your changes see if the issue is present on [Travis](https://travis-ci.org/ampproject/amphtml/builds) and send a message to the [#contributing](https://amphtml.slack.com/messages/C9HRJ1GPN) channel on Slack ([sign up for Slack](https://bit.ly/amp-slack-signup)).
-- Understanding the [AMP release process](release-schedule.md) is useful for understanding when a change in AMP will make it into production and what to do if things go wrong during the rollout of a change.
-
-### Opting in to pre-release channels
-
-Developers and users of AMP can have their browser request AMP JS files from the pre-release channels (**beta**, **experimental**, and **nightly**) for all requests, using an opt-in mechanism.
-
-To opt your browser into the a pre-release channel, go to [the AMP experiments page](https://cdn.ampproject.org/experiments.html) and activate the experiment channel of your choice (see [Beta/Experimental](release-schedule.md#beta-and-experimental-channels) and [Nightly](release-schedule.md##nightly) channels in the [release process](release-schedule.md) document for description of these channels). Please subscribe to our [low-volume announcements](https://groups.google.com/forum/#!forum/amphtml-announce) mailing list to get notified about important/breaking changes about AMP.
-
-**Notes:**
-
-- When you opt into a pre-release channel via the cookie mechanism, you are only affecting the AMP JS libraries in your browser.
-- An alternative to using cookies to opt a page into these pre-release channels is adding `?optin=experimental`/`?optin=beta` to the URL of the AMP runtime (e.g., `https://cdn.ampproject.org/v0.js?optin=beta`).
-  - URL-based opt-in should only be used for development purposes.
-  - Doing so will cause the AMP validator to flag your page as invalid, and prevent it from being included in AMP caches.
-  - There is no valid-AMP way to force visitors to your site to use the _AMP Experimental/Beta Channel_ version of AMP.
-
-**If you find an issue that appears to only occur in the _Experimental/Beta Channel_ version of AMP**:
-
-- please [file an issue](https://github.com/ampproject/amphtml/issues/new) with a description of the problem
-  - include a note that the problem is new to the _Experimental/Beta Channel_ build so that it can be properly prioritized
-  - include a URL to a page that reproduces the problem
-- ping the [AMP Slack #release channel](https://amphtml.slack.com/messages/C4NVAR0H3/) ([sign up for Slack](https://bit.ly/amp-slack-signup)) with the issue you filed so we can delay the push of the _Experimental/Beta Channel_ version to production if needed
-
-## [Code of conduct](../CODE_OF_CONDUCT.md)
diff --git a/contributing/ORIGIN_TRIALS.md b/contributing/ORIGIN_TRIALS.md
deleted file mode 100644
index 6a5fea8896ed1..0000000000000
--- a/contributing/ORIGIN_TRIALS.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Origin Trials
-
-Origin Trials enable developers to use an experimental feature in production and provide essential feedback.
-
-The AMP Origin Trial process is inspired by the [Chromium Origin Trial process](https://github.com/GoogleChrome/OriginTrials).
-
-Traditionally, a feature in experimental mode can only be used in development and cannot be pushed to production. Origin Trials allow interested developers to opt-in to a test an experimental feature in production. Origin Trial users should be mindful of the following:
-
-- The test is for a limited time.
-- The feature will likely undergo some changes after an Origin Trials.
-- Origin Trials present an opportunity to implement and benefit from a new feature before it’s fully live. The feature will live on the developer's site, rather than guarded by an experiment, and feedback can directly influence the direction of the feature.
-
-## When to consider an Origin Trial
-
-- Not every experiment needs an Origin Trial.
-- The experiment should be feature complete with a stable API at the point of the Origin Trial.
-- Data from opt-in experiments is going to be insufficient and you need data from real-world users.
-- The potential versioning pain is much greater than the pain of dealing with the logistics of an Origin Trial.
-- Good questions to answer with an Origin Trial:
-  - Is this API the "right" one?
-
-## Origin Trial - the details
-
-- No Origin Trial can last more than 3 months.
-- An Origin Trial duration can be prematurely shortened by us (with 7 days of notice) if usage exceeds 0.1% of AMP page loads.
-- Extending an Origin Trial requires approval from the Approvers Working Group (@ampproject/wg-approvers).
-
-## Enable an Origin Trial
-
-Include the following <meta> tag within the <head> tag on each page that uses the Origin Trial experiment:
-
-<meta name="amp-experiment-token" content="{copy your token here}">
-"amp-experiment-token" is the literal string, "amp-experiment-token". Not the token itself (which goes into the content attribute), or the name of the experiment.
diff --git a/contributing/OWNERS b/contributing/OWNERS
deleted file mode 100644
index 0c23c3f7a66ae..0000000000000
--- a/contributing/OWNERS
+++ /dev/null
@@ -1,15 +0,0 @@
-// For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
-
-{
-  rules: [
-    {
-      owners: [
-        {name: 'cathyxz', requestReviews: false},
-        {name: 'mrjoro'},
-        {name: 'ampproject/wg-infra', requestReviews: false},
-        {name: 'ampproject/wg-outreach', requestReviews: false},
-      ],
-    },
-  ],
-}
diff --git a/contributing/TESTING.md b/contributing/TESTING.md
deleted file mode 100644
index 68d051eea76ae..0000000000000
--- a/contributing/TESTING.md
+++ /dev/null
@@ -1,438 +0,0 @@
-<!---
-Copyright 2015 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.
--->
-
-# Testing in AMP HTML
-
-This document provides details for testing and building your AMP code.
-
-**Contents**
-
-- [Testing commands](#testing-commands)
-- [Manual testing](#manual-testing)
-  - [Serve Mode](#serve-mode)
-  - [Examples](#examples)
-  - [Document proxy](#document-proxy)
-  - [A4A envelope (/a4a/, /a4a-3p/)](#a4a-envelope-a4a-a4a-3p)
-  - [In-a-box envelope (/inabox/)](#in-a-box-envelope-inabox)
-  - [Chrome extension](#chrome-extension)
-- [Testing on Sauce Labs](#testing-on-sauce-labs)
-- [Visual Diff Tests](#visual-diff-tests)
-  - [Failing Tests](#failing-tests)
-  - [Running Visual Diff Tests Locally](#running-visual-diff-tests-locally)
-- [Isolated Component Testing](#isolated-component-testing)
-- [Testing on devices](#testing-on-devices)
-  - [Testing with ngrok](#testing-with-ngrok)
-  - [Testing with Firebase](#testing-with-firebase)
-- [End-to-end Tests](#end-to-end-tests)
-
-## Testing commands
-
-Before running these commands, make sure you have Node.js, yarn, and Gulp installed. For installation instructions, see the [One-time setup](getting-started-quick.md#one-time-setup) section in the Quick Start guide.
-
-**Pro tip:** To see a full listing of `gulp` commands and their flags, run `gulp help`.
-
-| Command                                                   | Description                                                                                                                                                                                                                                              |
-| --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`gulp`**                                                | Starts the dev server, lazily builds JS files and extensions when requested, and watches them for changes. **Use this for development.**                                                                                                                 |
-| `gulp --extensions=amp-foo,amp-bar`                       | Same as `gulp`. Pre-builds the listed extensions, and lazily builds other files when requested.                                                                                                                                                          |
-| `gulp --extensions_from=examples/foo.amp.html`            | Same as `gulp`. Pre-builds the extensions in the given example file, and lazily builds other files when requested.                                                                                                                                       |
-| `gulp --compiled`                                         | Same as `gulp`. Compiles and serves minified binaries. Can be used with `--extensions` and `--extensions_from`.                                                                                                                                          |
-| `gulp --version_override=<version_override>`              | Runs "watch" and "serve". Overrides the version written to the AMP_CONFIG.                                                                                                                                                                               |
-| `gulp dist`                                               | Builds minified AMP binaries and applies AMP_CONFIG to runtime files.                                                                                                                                                                                    |
-| `gulp dist --watch`                                       | Builds minified AMP binaries and watches them for changes.                                                                                                                                                                                               |
-| `gulp dist --noconfig`                                    | Builds minified AMP binaries without applying AMP_CONFIG to runtime files.                                                                                                                                                                               |
-| `gulp dist --extensions=amp-foo,amp-bar`                  | Builds minified AMP binaries, with only the listed extensions.                                                                                                                                                                                           |
-| `gulp dist --extensions_from=examples/foo.amp.html`       | Builds minified AMP binaries, with only extensions from the listed examples.                                                                                                                                                                             |
-| `gulp dist --noextensions`                                | Builds minified AMP binaries without building any extensions.                                                                                                                                                                                            |
-| `gulp dist --core_runtime_only`                           | Builds minified AMP binaries for just the core runtime.                                                                                                                                                                                                  |
-| `gulp dist --fortesting`                                  | Builds minified AMP binaries for local testing. (Allows use cases like ads, tweets, etc. to work with minified sources. Overrides `TESTING_HOST` if specified. Uses the production `AMP_CONFIG` by default.)                                             |
-| `gulp dist --fortesting --config=<config>`                | Builds minified AMP binaries for local testing, with the specified `AMP_CONFIG`. `config` can be `prod` or `canary`. (Defaults to `prod`.)                                                                                                               |
-| `gulp dist --version_override=<version_override>`         | Builds minified AMP binaries and overrides the version written to the AMP_CONFIG.                                                                                                                                                                        |
-| `gulp lint`                                               | Validates JS files against the ESLint linter.                                                                                                                                                                                                            |
-| `gulp lint --watch`                                       | Watches for changes in files, and validates against the ESLint linter.                                                                                                                                                                                   |
-| `gulp lint --fix`                                         | Fixes simple lint warnings/errors automatically.                                                                                                                                                                                                         |
-| `gulp lint --files=<files-path-glob>`                     | Lints just the files provided. Can be used with `--fix`.                                                                                                                                                                                                 |
-| `gulp lint --local_changes`                               | Lints just the files changed in the local branch. Can be used with `--fix`.                                                                                                                                                                              |
-| `gulp prettify`                                           | Validates non-JS files using Prettier.                                                                                                                                                                                                                   |
-| `gulp prettify --fix`                                     | Fixes simple formatting errors automatically.                                                                                                                                                                                                            |
-| `gulp prettify --files=<files-path-glob>`                 | Checks just the files provided. Can be used with `--fix`.                                                                                                                                                                                                |
-| `gulp prettify --local_changes`                           | Checks just the files changed in the local branch. Can be used with `--fix`.                                                                                                                                                                             |
-| `gulp build`                                              | Builds unminified AMP binaries.                                                                                                                                                                                                                          |
-| `gulp build --watch`                                      | Builds unminified AMP binaries and watches them for changes.                                                                                                                                                                                             |
-| `gulp build --extensions=amp-foo,amp-bar`                 | Builds unminified AMP binaries, with only the listed extensions.                                                                                                                                                                                         |
-| `gulp build --extensions_from=examples/foo.amp.html`      | Builds unminified AMP binaries, with only the extensions needed to load the listed examples.                                                                                                                                                             |
-| `gulp build --noextensions`                               | Builds unminified AMP binaries with no extensions.                                                                                                                                                                                                       |
-| `gulp build --core_runtime_only`                          | Builds unminified AMP binaries for just the core runtime.                                                                                                                                                                                                |
-| `gulp build --fortesting`                                 | Builds unminified AMP binaries and sets the `test` field in `AMP_CONFIG` to `true`.                                                                                                                                                                      |
-| `gulp build --version_override=<version_override>`        | Builds unminified AMP binaries with the specified version.                                                                                                                                                                                               |
-| `gulp check-links --files=<files-path-glob>`              | Reports dead links in `.md` files.                                                                                                                                                                                                                       |
-| `gulp check-links --local_changes`                        | Reports dead links in `.md` files changed in the local branch.                                                                                                                                                                                           |
-| `gulp clean`                                              | Removes build output.                                                                                                                                                                                                                                    |
-| `gulp css`                                                | Recompiles css to the build directory and builds the embedded css into js files for the AMP library.                                                                                                                                                     |
-| `gulp compile-jison`                                      | Compiles jison parsers for extensions to build directory.                                                                                                                                                                                                |
-| `gulp pr-check`                                           | Runs all the Travis CI checks locally.                                                                                                                                                                                                                   |
-| `gulp pr-check --nobuild`                                 | Runs all the Travis CI checks locally, but skips the `gulp build` step.                                                                                                                                                                                  |
-| `gulp pr-check --files=<test-files-path-glob>`            | Runs all the Travis CI checks locally, and restricts tests to the files provided.                                                                                                                                                                        |
-| `gulp unit`                                               | Runs the unit tests in Chrome (doesn't require the AMP library to be built).                                                                                                                                                                             |
-| `gulp unit --local_changes`                               | Runs the unit tests directly affected by the files changed in the local branch in Chrome.                                                                                                                                                                |
-| `gulp integration`                                        | Runs the integration tests in Chrome after building the unminified runtime with the `prod` version of `AMP_CONFIG`.                                                                                                                                      |
-| `gulp integration --compiled`                             | Same as above, but builds the minified runtime.                                                                                                                                                                                                          |
-| `gulp integration --config=<config>`                      | Same as above, but `config` can be `prod` or `canary`. (Defaults to `prod`.)                                                                                                                                                                             |
-| `gulp integration --nobuild`                              | Same as above, but skips building the runtime.                                                                                                                                                                                                           |
-| `gulp [unit\|integration] --verbose`                      | Runs tests in Chrome with logging enabled.                                                                                                                                                                                                               |
-| `gulp [unit\|integration] --nobuild`                      | Runs tests without re-build.                                                                                                                                                                                                                             |
-| `gulp [unit\|integration] --coverage`                     | Runs code coverage tests. After running, the report will be available at test/coverage/index.html                                                                                                                                                        |
-| `gulp [unit\|integration] --watch`                        | Watches for changes in files, runs corresponding test(s) in Chrome.                                                                                                                                                                                      |
-| `gulp [unit\|integration] --watch --verbose`              | Same as `watch`, with logging enabled.                                                                                                                                                                                                                   |
-| `gulp [unit\|integration] --saucelabs`                    | Runs tests on saucelabs browsers (requires [setup](#testing-on-sauce-labs)).                                                                                                                                                                             |
-| `gulp [unit\|integration] --safari`                       | Runs tests in Safari.                                                                                                                                                                                                                                    |
-| `gulp [unit\|integration] --firefox`                      | Runs tests in Firefox.                                                                                                                                                                                                                                   |
-| `gulp [unit\|integration] --edge`                         | Runs tests in Edge.                                                                                                                                                                                                                                      |
-| `gulp [unit\|integration] --ie`                           | Runs tests in Internet Explorer.                                                                                                                                                                                                                         |
-| `gulp [unit\|integration] --files=<test-files-path-glob>` | Runs specific test files.                                                                                                                                                                                                                                |
-| `gulp [unit\|integration] --testnames`                    | Lists the name of each test being run, and prints a summary at the end.                                                                                                                                                                                  |
-| `gulp serve`                                              | Serves content from the repository root at http://localhost:8000/. Examples live in http://localhost:8000/examples/. Serves unminified binaries by default.                                                                                              |
-| `gulp serve --compiled`                                   | Same as `serve`, but serves minified binaries.                                                                                                                                                                                                           |
-| `gulp serve --cdn`                                        | Same as `serve`, but serves CDN binaries.                                                                                                                                                                                                                |
-| `gulp serve --rtv <rtv_number>`                           | Same as `serve`, but serves binaries with the given 15 digit RTV.                                                                                                                                                                                        |
-| `gulp serve --new_server`                                 | Same as `serve`, but uses new Typescript based transforms. _Still under active development._                                                                                                                                                             |
-| `gulp serve --new_server --esm`                           | Same as `serve`, but serves esm (module) binaries. Requires the new Typescript based transforms. _Still under active development._                                                                                                                       |
-| `gulp serve --quiet`                                      | Same as `serve`, with logging silenced.                                                                                                                                                                                                                  |
-| `gulp serve --port <port>`                                | Same as `serve`, but uses a port number other than the default of 8000.                                                                                                                                                                                  |
-| `gulp check-types`                                        | Verifies that there are no errors associated with Closure typing. Run automatically upon push.                                                                                                                                                           |
-| `gulp dep-check`                                          | Runs a dependency check on each module. Run automatically upon push.                                                                                                                                                                                     |
-| `gulp presubmit`                                          | Run validation against files to check for forbidden and required terms. Run automatically upon push.                                                                                                                                                     |
-| `gulp validator`                                          | Builds and tests the AMP validator. Run automatically upon push.                                                                                                                                                                                         |
-| `gulp ava`                                                | Run node tests for tasks and offline/node code using [ava](https://github.com/avajs/ava).                                                                                                                                                                |
-| `gulp todos:find-closed`                                  | Find `TODO`s in code for issues that have been closed.                                                                                                                                                                                                   |
-| `gulp visual-diff`                                        | Runs all visual diff tests on a headless instance of local Chrome after building the unminified runtime with the `prod` version of `AMP_CONFIG`. Requires `PERCY_TOKEN` to be set as an environment variable or passed to the task with `--percy_token`. |
-| `gulp visual-diff --compiled`                             | Same as above, but builds the minified runtime.                                                                                                                                                                                                          |
-| `gulp visual-diff --config=<config>`                      | Same as above, but `config` can be `prod` or `canary`. (Defaults to `prod`.)                                                                                                                                                                             |
-| `gulp visual-diff --nobuild`                              | Same as above, but skips building the runtime.                                                                                                                                                                                                           |
-| `gulp visual-diff --chrome_debug --webserver_debug`       | Same as above, with additional logging. Debug flags can be used independently.                                                                                                                                                                           |
-| `gulp visual-diff --grep=<regular-expression-pattern>`    | Same as above, but executes only those tests whose name matches the regular expression pattern.                                                                                                                                                          |
-| `gulp firebase`                                           | Generates a folder `firebase` and copies over all files from `examples` and `test/manual` for firebase deployment.                                                                                                                                       |
-| `gulp firebase --file path/to/file`                       | Same as above, but copies over the file specified as `firebase/index.html`.                                                                                                                                                                              |
-| `gulp firebase --compiled`                                | Same as `gulp firebase`, but uses minified files of the form `/dist/v0/amp-component-name.js` instead of unminified files of the form `/dist/v0/amp-component-name.max.js`.                                                                              |
-| `gulp firebase --nobuild`                                 | Same as `gulp firebase`, but skips building the runtime.                                                                                                                                                                                                 |
-| `gulp e2e`                                                | Runs all end-to-end tests on Chrome after building the unminified runtime with the `prod` version of `AMP_CONFIG`..                                                                                                                                      |
-| `gulp e2e --compiled`                                     | Same as above, but builds the minified runtime. .                                                                                                                                                                                                        |
-| `gulp e2e --config=<config>`                              | Same as above, but `config` can be `prod` or `canary`. (Defaults to `prod`.)                                                                                                                                                                             |
-| `gulp e2e --nobuild`                                      | Same as above, but skips building the runtime.                                                                                                                                                                                                           |
-| `gulp e2e --files=<test-files-path-glob>`                 | Runs end-to-end tests from the specified files on the latest Chrome browser.                                                                                                                                                                             |
-| `gulp e2e --testnames`                                    | Lists the name of each test being run, and prints a summary at the end.                                                                                                                                                                                  |
-| `gulp e2e --engine=ENGINE`                                | Runs end-to-end tests with the given Web Driver engine. Allowed values are `puppeteer` and `selenium`.                                                                                                                                                   |
-| `gulp e2e --headless`                                     | Runs end-to-end tests in a headless browser instance.                                                                                                                                                                                                    |
-| `gulp e2e --watch`                                        | Watches for changes in test files, runs tests.                                                                                                                                                                                                           |
-| `gulp check-sourcemaps`                                   | Checks sourcemaps generated during minified compilation for correctness.                                                                                                                                                                                 |
-
-**Pro tip:** All the above commands can be run in debug mode using `node --inspect`. This will make the Chrome debugger stop at `debugger;` statements, after which local state can be inspected using dev tools.
-
-For example, in order to debug `gulp serve`, run the following command:
-
-```sh
-node --inspect $(which gulp) serve
-```
-
-## Manual testing
-
-For manual testing build AMP and start the Node.js server by running `gulp`.
-
-### Serve Mode
-
-There are 5 serving modes:
-
-- DEFAULT mode serves unminified AMP. Use this during normal development by simply running `gulp`.
-- COMPILED mode serves minified AMP. This is closer to what is served in production on the stable channel. Serve this mode by running `gulp --compiled`.
-- CDN mode serves stable channel binaries. Local changes are not served in this mode. Serve CDN mode by running `gulp serve --cdn`.
-- RTV mode serves the bundle from the given RTV number (a 15 digit number). E.g. `001907161745080`. Serve RTV mode by running `gulp serve --rtv <rtv_number>`
-- ESM mode serves the esm (module) binaries. First run `gulp dist --fortesting --esm` and then serve esm mode by running `gulp serve --new_server --esm`. _This mode is new, and under active development._
-
-To switch serving mode during runtime, go to http://localhost:8000/serve_mode=$mode and set the `$mode` to one of the following values: `default`, `compiled`, `cdn` or `<RTV_NUMBER>`.
-
-### Examples
-
-The content in the `examples` directory can be reached at: http://localhost:8000/examples/
-
-### Document proxy
-
-AMP ships with a local proxy for testing production AMP documents with the local JS version.
-
-For any public AMP document like: `http://output.jsbin.com/pegizoq/quiet`,
-
-You can access it with the local JS by using the form in
-[`http://localhost:8000`](http://localhost:8000) or by accessing the proxy URL
-directly:
-
-`http://localhost:8000/proxy/output.jsbin.com/pegizoq/quiet`.
-
-**Note:** The local proxy will serve minified or unminified JS based on the current serve mode. When serve mode is `cdn`, the local proxy will serve remote JS.
-When accessing minified JS make sure you run `gulp dist` with the `--fortesting`
-flag so that we do not strip out the localhost code paths. (We do some
-code elimination to trim down the file size for the file we deploy to production)
-
-If the origin resource is on HTTPS, the URLs are http://localhost:8000/proxy/s/output.jsbin.com/pegizoq/quiet
-
-### <a name="a4a-envelope"></a>A4A envelope (/a4a/, /a4a-3p/)
-
-If you are working on AMPHTML ads, you can use the local A4A envelope for testing local and production AMP documents with the local JS version.
-
-A4A can be run either of these two modes:
-
-1. Friendly iframe mode: http://localhost:8000/a4a/...
-2. 3p iframe mode: http://localhost:8000/a4a-3p/...
-
-The following forms are supported:
-
-- local document: http://localhost:8000/a4a[-3p]/examples/animations.amp.html
-- proxied document with local sources: http://localhost:8000/a4a[-3p]/proxy/output.jsbin.com/pegizoq/quiet
-
-When accessing minified JS make sure you run `gulp dist` with the `--fortesting`
-flag so that we do not strip out the localhost code paths. (We do some
-code elimination to trim down the file size for the file we deploy to production)
-
-If the origin resource is on HTTPS, the URLs are http://localhost:8000/a4a[-3p]/proxy/s/output.jsbin.com/pegizoq/quiet
-
-Notice that all documents are assumed to have a "fake" signature. Thus, this functionality is only available in the
-`localDev` mode.
-
-Additionally, the following query parameters can be provided:
-
-- `width` - the width of the `amp-ad` (default "300")
-- `height` - the height of the `amp-ad` (default "250")
-- `offset` - the offset to push the `amp-ad` down the page (default "0px"). Can be used to push the Ad out of the viewport, e.g. using `offset=150vh`.
-
-### In-a-box envelope (/inabox/)
-
-If you are working on AMP In-a-box Ads, you can use the local in-a-box envelope for testing local and production AMP documents with the local JS version.
-
-The following forms are supported:
-
-- local document: http://localhost:8000/inabox/examples/animations.amp.html
-- proxied document with local sources: http://localhost:8000/inabox/proxy/output.jsbin.com/pegizoq/quiet
-
-Additionally, the following query parameters can be provided:
-
-- `width` - the width of the `iframe` (default "300")
-- `height` - the height of the `iframe` (default "250")
-- `offset` - the offset to push the `iframe` down the page (default "0px"). Can be used to push the Ad out of the viewport, e.g. using `offset=150vh`.
-
-### Chrome extension
-
-For testing documents on arbitrary URLs with your current local version of the AMP runtime we created a [Chrome extension](../testing/local-amp-chrome-extension/README.md).
-
-## Testing on Sauce Labs
-
-We use [Sauce Labs](https://saucelabs.com) to perform cross-browser testing (thanks Sauce Labs!). In general local testing (i.e. gulp [unit|integration]) and the automatic test run on [Travis](https://travis-ci.org/ampproject/amphtml/pull_requests) that happens when you send a pull request are sufficient, but if you want to run your tests across multiple environments/browsers before sending your PR we recommend using Sauce Labs as well.
-
-To run the tests on Sauce Labs:
-
-- Create a Sauce Labs account. If you are only going to use your account for open source projects like this one you can sign up for a free [Open Sauce](https://saucelabs.com/solutions/open-source) account. (If you create an account through the normal account creation mechanism you'll be signing up for a free trial that expires; you can contact Sauce Labs customer service to switch your account to Open Sauce if you did this accidentally.)
-- Set the `SAUCE_USERNAME` and `SAUCE_ACCESS_KEY` environment variables. On Linux add this to your `.bashrc`:
-
-  ```sh
-  export SAUCE_USERNAME=<Sauce Labs username>
-  export SAUCE_ACCESS_KEY=<Sauce Labs access key>
-  ```
-
-  You can find your Sauce Labs access key on the [User Settings](https://saucelabs.com/beta/user-settings) page.
-
-- Run the proxy and then run the tests:
-
-  ```sh
-  # Start the proxy
-  ./build-system/sauce_connect/start_sauce_connect.sh
-
-  # Run tests
-  gulp [unit|integration] --saucelabs
-
-  # Stop the proxy
-  ./build-system/sauce_connect/stop_sauce_connect.sh
-  ```
-
-- It may take several seconds for the proxy to start and for the tests to start. You can see the status of your tests on the Sauce Labs [Automated Tests](https://saucelabs.com/beta/dashboard/tests) dashboard. (You can also see the status of your proxy on the [Tunnels](https://saucelabs.com/beta/tunnels) dashboard.
-- The tunnel ID used during local development is the email address of the author of the latest commit on the local branch.
-
-## Visual Diff Tests
-
-In addition to building the AMP runtime and running `gulp [unit|integration]`, the automatic test run on Travis includes a set of visual diff tests to make sure a new commit to `master` does not result in unintended changes to how pages are rendered. The tests load a few well-known pages in a browser and compare the results with known good versions of the same pages.
-
-The technology stack used is:
-
-- [Percy](https://percy.io/), a visual regression testing service for webpages
-- [Puppeteer](https://developers.google.com/web/tools/puppeteer/), a driver capable of loading webpages for diffing
-- [Percy-Puppeteer](https://github.com/percy/percy-puppeteer), a framework that integrates Puppeteer with Percy
-- [Headless Chrome](https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md), the Chrome/Chromium browser in headless mode
-
-The [`ampproject/amphtml`](https://github.com/ampproject/amphtml) repository on GitHub is linked to the [Percy project](https://percy.io/ampproject/amphtml) of the same name. All PRs will show a check called `percy/amphtml` in addition to the `continuous-integration/travis-ci/pr` check. If your PR results in visual diff(s), clicking on the `details` link will show you the snapshots with the diffs highlighted.
-
-### Failing Tests
-
-When a test run fails due to visual diffs being present, click the `details` link next to `percy/amphtml` in your PR and examine the results. By default, Percy highlights the changes between snapshots in red. Clicking on the new snapshot will show it in its raw form. If the diffs indicate a problem that is likely to be due to your PR, you can try running the visual diffs locally in order to debug (see section below). However, if you are sure that the problem is not due to your PR, you may click the green `Approve` button on Percy to approve the snapshots and unblock your PR from being merged.
-
-### Flaky Tests
-
-If a Percy test flakes and you would like to trigger a rerun, you can't do that from within Percy. Instead, from your PR on GitHub open up the "Details" for the `continuous-integration/travis-ci/pr` check to load the Travis run for your PR. There you should see a "passed" test shard labeled "Visual Diff Tests". Click the "Restart Job" icon on just that shard to trigger a rerun on Percy.
-
-### Running Visual Diff Tests Locally
-
-You can also run the visual tests locally during development. You must first create a free Percy account at [https://percy.io](https://percy.io), create a project, and set the `PERCY_TOKEN` environment variable using the unique value you find at `https://percy.io/<org>/<project>/integrations`:
-
-```sh
-export PERCY_TOKEN="<unique-percy-token>"
-```
-
-Once the environment variable is set up, you can run the AMP visual diff tests.
-
-First, build the AMP runtime in minified or unminified mode:
-
-```sh
-gulp build --fortesting # unminified mode
-gulp dist --fortesting # minified mode
-```
-
-Next, run the `gulp` task that invokes the visual diff tests:
-
-```sh
-gulp visual-diff --nobuild # unminified mode
-gulp visual-diff --compiled --nobuild # minified mode
-```
-
-Note that if you drop the `--nobuild` flag, `gulp visual-diff` will run `gulp dist|build --fortesting` on each execution.
-
-The build will use the Percy credentials set via environment variables in the previous step, and run the tests on your local install of Chrome in headless mode. You can see the results at `https://percy.io/<org>/<project>`.
-
-To see debugging info during Percy runs, you can run:
-
-```sh
- gulp visual-diff --chrome_debug --webserver_debug
-```
-
-To run tests without uploading snapshots to Percy, you can run:
-
-```sh
-gulp visual-diff --percy_disabled
-```
-
-The debug flags `--chrome_debug` and `--webserver_debug` can be used independently. To enable both debug flags, you can also run:
-
-```sh
- gulp visual-diff --debug
-```
-
-To execute only a subset of the tests (i.e., when creating or debugging an existing test) use the `--grep` regular expression flag. e.g., `gulp visual-diff --grep="amp-[a-f]"` will execute on tests that have an AMP component name between `<amp-a...>` through `<amp-f...>`.
-
-After each run, a new set of results will be available at `https://percy.io/<org>/<project>`.
-
-## Isolated Component Testing
-
-To speed up development and testing of components, it is advised to use the Storybook dashboard and develop "stories" (testing scenarios) for components. Storybook has many features that assist with the isolated development and manual testing of components including easy manual interaction with component parameters, integrated accessibility auditing, responsiveness testing, etc.
-
-AMP includes two Storybook environments: `storybook-amp` (for components living inside AMP pages) and `storybook-preact` (simulating Bento components living in a Preact/React app).
-
-To run these environments and explore existing AMP components, run
-
-```sh
-gulp storybook-amp
-# ------ or ------
-gulp storybook-preact
-```
-
-Test scenarios (stories) live inside each of the components' directories, stories ran in the AMP environment have the `.amp.js` extension:
-
-```sh
-# Preact environment test scenario
-./extensions/amp-example/0.1/storybook/Basic.js
-# AMP environment test scenario
-./extensions/amp-example/0.1/storybook/Basic.amp.js
-```
-
-Read more about [Writing Storybook Test Scenarios](https://storybook.js.org/docs/guides/guide-preact/#step-4-write-your-stories) in the official [Storybook documentation](https://storybook.js.org/docs/).
-
-## Testing on devices
-
-### Testing with ngrok
-
-It's much faster to debug with local build (`gulp` + `http://localhost:8000/`). In Chrome you can use [DevTools port forwarding](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server). However, iOS Safari does not give a similar option. Instead, you can use [ngrok](https://ngrok.com/). Just [download](https://ngrok.com/download) the ngrok binary for your platform and run it like this:
-
-```sh
-ngrok http 8000
-```
-
-Once started, the ngrok will print URLs for both `http` and `https`. E.g. `http://73774d8c.ngrok.io/` and `https://73774d8c.ngrok.io/`. These URLs can be used to debug on iOS and elsewhere.
-
-### Testing with Firebase
-
-For deploying and testing local AMP builds on [Firebase](https://firebase.google.com/), install firebase and initialize firebase within this directory\* (a `firebase` folder can be generated with the command, `gulp firebase`).
-
-```sh
-npm install -g firebase-tools
-firebase login
-firebase init
-gulp firebase
-firebase deploy
-```
-
-- When initializing firebase within the directory via `firebase init`, make sure to select the following options when asked:
-
-* "Which Firebase CLI features do you want to setup for this folder?" select `Hosting: Configure and deploy Firebase Hosting sites`.
-* "What do you want to use as your public directory?" enter `firebase`.
-* "Select a default Firebase project for this directory:" select your project name if it's already created, otherwise choose `[don't setup a new project]` and add one later.
-  - Note: If you haven't already, you will have to create a project via the [Firebase Console](https://console.firebase.google.com) after you are done initializing and before you deploy. Once you create the project, you can make it active in your CLI with `firebase use your-project-name` or give it an alias by selecting your project after running `firebase use --add`.
-* "Configure as a single-page app (rewrite all urls to /index.html)?" select `n`.
-
-`gulp firebase` will generate a `firebase` folder and copy over all files from `dist`, `examples` and `test/manual`. It will rewrite all urls in the copied files to point to the local versions of AMP (i.e. the ones copied from `dist` to `firebase/dist`). When you initialize firebase, you should set the `firebase` `public` directory to `firebase`. This way `firebase deploy` will just directly copy and deploy the contents of the generated `firebase` folder. As an example, your `firebase.json` file can look something like this:
-
-```json
-{
-  "hosting": {
-    "public": "firebase",
-    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
-  }
-}
-```
-
-If you are only testing a single file, you can use `gulp firebase --file=path/to/my/file.amp.html` to avoid copying over all of `test/manual` and `examples`. It will copy over the specified file to `firebase/index.html`, which simplifies debugging.
-
-After deploying, you can access your project publically at its hosting URL `https://your-project-name.firebaseapp.com`.
-
-Additionally, you can create multiple projects and switch between them in the CLI using `firebase use your-project-name`.
-
-#### Testing Ads
-
-Testing ads in deployed demos requires allowlisting of 3p urls. You can do this by adding your intended deployment hostname as an environemnt variable `AMP_TESTING_HOST` and using the `fortesting` flag. For example:
-
-```sh
-export AMP_TESTING_HOST="my-project.firebaseapp.com"
-gulp firebase --fortesting
-firebase deploy
-```
-
-This will write "my-project.firebaseapp.com" as a third party url to relevant attributes in `AMP_CONFIG`, which is prepended to `amp.js` and `integration.js` files in the firebase folder. If you're curious about how this is done, feel free to inspect `build-system/tasks/firebase.js`.
-
-## End-to-End Tests
-
-You can run and create E2E tests locally during development. Currently tests only run on Chrome, but support for additional browsers is underway. These tests have not been added to our CI build yet - but they will be added soon.
-
-Run all tests with:
-
-```sh
-gulp e2e
-```
-
-The task will kick off `gulp build` and then `gulp serve` before running the tests. To skip building the runtime, use `--nobuild`.
-
-[Consult the E2E testing documentation](../build-system/tasks/e2e/README.md) to learn how to create your own end-to-end tests.
diff --git a/contributing/buildcop.md b/contributing/buildcop.md
deleted file mode 100644
index e1709f5d18b49..0000000000000
--- a/contributing/buildcop.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# AMP Buildcop
-
-The AMP buildcop is responsible for ensuring that the [master build](https://travis-ci.org/ampproject/amphtml/branches) remains green. The AMP buildcop responsibility rotates between members of the community.
-
-Make sure you are a member of the [#contributing](https://amphtml.slack.com/messages/C9HRJ1GPN) channel on Slack while you are buildcop.
-
-- If the build has been red for some time, please send a note to the #contributing channel if the issue is not already reported.
-- Pay attention for reports of issues with the build that the community may send to this channel. (You may want to enable notifications for this channel while you are buildcop to make this easier.)
-
-## Buildcop Tasks
-
-1. Ensure the [master build](https://travis-ci.org/ampproject/amphtml/branches) remains green. Your goal is to keep the build from being red for more than an hour.
-   1. Note that yellow builds are in the process of being created/tested so you do not need to do anything special with them.
-   2. Keep an eye out for emails sent to an address starting with amp-build-cop. **You are encouraged to set up a filter so that these emails will stand out to you.**
-   3. You will need to investigate whether a red build is due to a flake or due to a real issue.
-      - If the issue is due to a flaky test:
-        - Create a ["Related to: Flaky Tests" issue](https://github.com/ampproject/amphtml/issues?q=is%3Aopen+is%3Aissue+label%3A%22Related+to%3A+Flaky+Tests%22). **Make sure to find an appropriate owner for the issue and assign it to them.**
-        - If needed, send a PR to disable the flaky test:
-          - For a normal `describe` test add [`.skip()`](https://mochajs.org/#inclusive-tests)
-          - For an integration test failing on a specific browser, add the corresponding `skip` function (e.g. `skipEdge()`). See the `skipXXX` functions in [\_init_tests.js](https://github.com/ampproject/amphtml/blob/master/test/_init_tests.js) for details.
-        - Restart the build on Travis by clicking the "Restart build" button on the build page (you must be signed into GitHub).
-      - If the issue is due to a real breakage, work with the appropriate owner to rollback the offending PR. Rollbacks are preferable to fixes because fixes can often cause their own breakages.
-2. Keep an eye on incoming [Renovate PRs](https://github.com/ampproject/amphtml/pulls/renovate-bot), which result from an automated process to update our dependencies.
-   1. Make sure that the PR updates both package.json and yarn.lock
-   2. Check the Travis logs for the PR for any new failures or unexpected results
-      - If there’s a failure due to a flaky test, try restarting the shard that failed
-      - If that doesn’t work, try syncing the branch to HEAD (tests will automatically be re-run)
-      - If neither of the above works, it’s possible that the package update is a breaking change. Assign the PR to someone who can look at what changed and determine how to fix it.
-   3. Assuming Travis was green, make sure there are no diffs in the Percy build.
-      - If there are diffs that look like flakes, click “Approve” on the Percy build to unblock the PR (and ping @danielrozenberg as an FYI).
-   4. Approve and merge the PR.
-3. Report and triage any failing tests on _beta_ browsers:
-   1. Check recent [master builds](https://travis-ci.org/ampproject/amphtml/branches) on Travis, even the green ones. Look for the `gulp [unit|integration] ... --saucelabs` task in the logs and check for any failing tests under the _beta_ test batch(es). Create issues for those tests.
diff --git a/contributing/building-an-amp-extension.md b/contributing/building-an-amp-extension.md
deleted file mode 100644
index 6ba42fc1a0c5c..0000000000000
--- a/contributing/building-an-amp-extension.md
+++ /dev/null
@@ -1,833 +0,0 @@
-# Building an AMP Extension
-
-AMP can be extended to allow more functionality and components through
-building open source extensions (aka custom elements). For example, AMP
-provides `amp-carousel`, `amp-sidebar` and `amp-access` as
-extensions. If you'd like to add an extension to support your company
-video player, rich embed or just a general UI component like a star
-rating viewer, you'd do this by building an extension.
-
-- [Getting started](#getting-started)
-- [Naming](#naming)
-- [Directory structure](#directory-structure)
-- [Extend AMP.BaseElement](#extend-ampbaseelement)
-- [Element styling](#element-styling)
-- [Register element with AMP](#register-element-with-amp)
-- [Actions and events](#actions-and-events)
-- [Sub-elements ownership](#sub-elements-ownership)
-- [Allowing proper validations](#allowing-proper-validations)
-- [Performance considerations](#performance-considerations)
-- [Layouts supported in your element](#layouts-supported-in-your-element)
-- [Experiments](#experiments)
-- [Documenting your element](#documenting-your-element)
-- [Example of using your extension](#example-of-using-your-extension)
-- [Updating build configs](#updating-build-configs)
-- [Versioning](#versioning)
-- [Unit tests](#unit-tests)
-- [Type checking](#type-checking)
-- [Example PRs](#example-prs)
-
-## Getting started
-
-This document describes how to create a new AMP extension, which is one of the most common ways of adding a new feature to AMP.
-
-Before diving into the details on creating a new AMP extension, please familiarize yourself with the [general process for contributing code and features to AMP](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md). Since you are adding a new extension you will likely need to follow the [process for making a significant change](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#process-for-significant-changes), including filing an ["Intent to Implement" issue](https://github.com/ampproject/amphtml/labels/INTENT%20TO%20IMPLEMENT) and finding a guide before you start significant development.
-
-## Naming
-
-All AMP extensions (and built-in elements) have their tag names prefixed
-with `amp-`. Make sure to choose an accurate and clear name for your
-extension. For example, video players are also suffixed with `-player`
-(e.g. amp-brid-player).
-
-## Directory structure
-
-You create your extension's files inside the `extensions/` directory.
-The directory structure is below:
-
-```sh
-/extensions/amp-my-element/
-├── 0.1/
-|   ├── test/
-|   |   ├── test-amp-my-element.js       # Element's unit test suite (req'd)
-|   |   └── More test JS files (optional)
-|   ├── amp-my-element.js                # Element's implementation (req'd)
-|   ├── amp-my-element.css               # Custom CSS (optional)
-|   └── More JS files (optional)
-├── validator-amp-my-element.protoascii  # Validator rules (req'd)
-├── amp-my-element.md                    # Element's main documentation (req'd)
-└── More documentation in .md files (optional)
-└── OWNERS                               # Owners file. Primary contact(s) for the extension. (req'd)
-```
-
-In most cases you'll only create the required (req'd) files. If your element does not need custom CSS, you don't need to create the CSS file.
-
-## Extend AMP.BaseElement
-
-Almost all AMP extensions extend AMP.BaseElement, which provides some
-hookups and callbacks for you to override in order to implement and
-customize your element behavior. These callbacks are explained below in
-the BaseElement Callbacks section, and are also explained inline in the
-[BaseElement](https://github.com/ampproject/amphtml/blob/master/src/base-element.js#L26)
-class.
-
-### Element class
-
-The following shows the overall structure of your element implementation
-file (extensions/amp-my-element/0.1/amp-my-element.js).
-
-```js
-import {func1, func2} from '../src/module';
-import {CSS} from '../../../build/amp-my-element-0.1.css';
-// more ES2015-style import statements.
-
-/** @const */
-const EXPERIMENT = 'amp-my-element';
-
-/** @const */
-const TAG = 'amp-my-element';
-
-class AmpMyElement extends AMP.BaseElement {
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-
-    // Declare instance variables with type annotations.
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout == LAYOUT.FIXED;
-  }
-
-  /** @override */
-  buildCallback() {
-    // Get attributes, assertions of values, assign instance variables.
-    // Build lightweight DOM and append to this.element.
-  }
-
-  /** @override */
-  layoutCallback() {
-    // Actually load your resource or render more expensive resources.
-  }
-}
-
-AMP.extension('amp-my-element', '0.1', (AMP) => {
-  AMP.registerElement('amp-my-element', AmpMyElement, CSS);
-});
-```
-
-### BaseElement callbacks
-
-#### upgradeCallback
-
-- **Default**: Does nothing
-- **Override**: Rarely.
-- **[Vsync](https://github.com/ampproject/amphtml/blob/master/src/service/vsync-impl.js) Context**: None
-- **Usage**: If your extension provides different implementations
-  depending on a late runtime condition (e.g. type attribute on the
-  element, platform)
-- **Example Usage**: amp-ad, amp-app-banner
-
-#### buildCallback
-
-- **Default**: Does nothing
-- **Override**: Almost always
-- **Vsync Context**: Mutate
-- **Usage**: If your element has UI elements this is where you should
-  create your DOM structure and append it to the element. You can also
-  read the attributes (e.g. width, height…) the user provided on your
-  element in this callback.
-- **Warning**: Don't load remote resources during the buildCallback. This
-  not only circumvents the AMP resources manager, but it will also lead to
-  higher data charges for users because all these resources will be loaded
-  before layouting needs to happen.
-- **Warning 2**: Do the least needed work here, and don't build DOM that
-  is not needed at this point.
-
-#### preconnectCallback
-
-- **Default**: Does nothing.
-- **Vsync Context**: None (Neither mutate nor measure)
-- **Override**: Sometimes, if your element will be loading remote
-  resources.
-- **Usage**: Use to instruct AMP which hosts to preconnect to, and which
-  resources to preload/prefetch; this allows AMP to delegate to the browser
-  to get a performance boost by preconnecting, preloading and prefetching
-  resources via preconnect service.
-- **Example Usage**: [Instagram uses this to
-  preconnect](https://github.com/ampproject/amphtml/blob/master/extensions/amp-instagram/0.1/amp-instagram.js)
-  to instagram hosts.
-
-#### createPlaceholderCallback
-
-- **Default**: Does nothing.
-- **Vsync Context**: Mutate
-- **Override**: Sometimes. If your component provides a way to dynamically
-  create a lightweight placeholder. This gets called only if the element
-  doesn't already have a publisher-provided placeholder (through [the
-  placeholder
-  attribute](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md#placeholder)).
-- **Usage**: Create placeholder DOM and return it. For example,
-  amp-instagram uses this to create a placeholder dynamically by creating
-  an amp-img placeholder instead of loading the iframe, leaving the iframe
-  loading to layoutCallback.
-- **Warning**: Only use amp-elements for creating placeholders that
-  require external resource loading. This allows runtime to create this
-  early but still defer the resource loading and management to AMP
-  resources manager. Don't create or load heavyweight resources (e.g.
-  iframe…).
-- **Example Usage**: amp-instagram.
-
-#### onLayoutMeasure
-
-- **Default**: Does nothing.
-- **Vsync Context**: Measure.
-- **Override**: Rarely.
-- **Usage**: Use to measure layouts for your element.
-- **Example Usage**: amp-iframe
-
-#### layoutCallback
-
-- **Default**: Does nothing.
-- **Vsync Context**: Mutate
-- **Override**: Almost always.
-- **Usage**: Use this to actually render the final version of your
-  element. If the element should load a video, this is where you load the
-  video. This needs to return a promise that resolves when the element is
-  considered "laid out" - usually this means load event has fired but can
-  be different from element to element. Note that load events usually are
-  fired very early so if there's another event that your element can
-  listen to that have a better meaning of ready-ness, use that to resolve
-  your promise instead - for example: [amp-youtube](https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube/0.1/amp-youtube.js) uses the
-  playerready event that the underlying YT Player
-  iframe sends to resolve the layoutCallback promise.
-
-#### firstLayoutCompleted
-
-- **Default**: Hide element's placeholder.
-- **Vsync Context**: Mutate
-- **Override**: Sometimes. If you'd like to override default behavior and
-  not hide the placeholder when the element is considered first laid out.
-  Sometimes you wanna control when to hide the placeholder.
-- **Example Usage**: amp-anim
-
-#### pauseCallback
-
-- **Default**: Does nothing.
-- **Vsync Context**: Mutate
-- **Called**: When you swipe away from a document in a viewer. Called on
-  children of lightbox when you close a lightbox instance, called on
-  carousel children when the slide is not the active slide. And possibly
-  other places.
-- **Override**: Sometimes. Most likely if you're building a player.
-- **Usage**: Use to pause video, slideshow auto-advance...etc
-- **Example Usage**: amp-video, amp-youtube
-
-#### resumeCallback
-
-- **Default**: Does nothing.
-- **Vsync Context**: Mutate
-- **Override**: Sometimes.
-- **Usage**: Use to restart the slideshow auto-advance.
-- **Note**: This is not used widely yet because it's not possible to
-  resume video playback for example on mobile.
-
-#### unlayoutOnPause
-
-- **Default**: Returns false.
-- **Vsync Context**: Mutate
-- **Override**: If your element doesn't provide a pausing mechanism,
-  instead override this to unlayout the element when AMP tries to pause
-  it.
-- **Return**: True if you want unlayoutCallback to be called when paused.
-- **Usage Example**: amp-brightcove
-
-#### unlayoutCallback
-
-- **Default**: Does nothing.
-- **Vsync Context**: Mutate
-- **Override**: Sometimes.
-- **Usage**: Use to remove and unload heavyweight resources like iframes,
-  video, audio and others that your element has created.
-- **Return**: **True** if your element need to re-layout.
-- **Usage Example**: amp-iframe
-
-#### viewportCallback
-
-- **Default**: Does nothing.
-- **Override**: Rarely.
-- **Usage**: Use if your element need to know when it comes into viewport
-  and when it goes out of it for finer control.
-- **Usage Example**: amp-carousel, amp-anim
-
-## Element styling
-
-You can write a stylesheet to style your element to provide a minimal
-visual appeal. Your element structure should account for whether you
-want users (publishers and developers using your element) to customize
-the default styling you're providing and allow for easy CSS classes
-and/or well-structure DOM elements.
-
-Element styles are loaded when the element script itself is included in
-an AMP doc. You tell AMP which CSS belongs to this element when
-registering the element (see below).
-
-Class names prefixed with `i-amphtml` are considered private. Publishers
-are not allowed to use them for customization (enforced by AMP validator).
-
-Class names prefixed with `amp-` are public css classes that can be customized
-by publishers. All such classes should be documented in the component-specific
-`.md` file. All CSS classes in component stylesheets should be prefixed with
-either `i-amphtml-` or `amp-`.
-
-## Register element with AMP
-
-Once you have implemented your AMP element, you need to register it with
-AMP; all AMP extensions are prefixed with `amp-`. This is where you
-tell AMP which class to use for this tag name and which CSS to load.
-
-```javascript
-AMP.extension('amp-carousel', '0.1', (AMP) => {
-  AMP.registerElement('amp-carousel', CarouselSelector, CSS);
-});
-```
-
-## Actions and events
-
-AMP provides a framework for [elements to fire their own
-events](https://github.com/ampproject/amphtml/blob/master/spec/amp-actions-and-events.md)
-to allow users of that element to listen and react to the events. For
-example, amp-form extension fires a few events on &lt;form&gt; elements
-like `submit-success`. This allow publishers to listen to that event
-and react to it, for example, by launching a lightbox to display a
-message.
-
-The other part of the event-system in AMP is actions. When listening to
-an event on an element usually you'd like to trigger an action (possibly
-on other elements). For example, in the example above, the publisher is
-executing the `open` action on `lightbox`.
-
-The syntax for using this on elements is as follow:
-
-```html
-<form
-  on="submit-success:my-success-lightbox.open;submit-error:my-error-lightbox.open"
-></form>
-```
-
-To fire events on your element use AMP's action service and the
-`.trigger` method.
-
-```javascript
-actionServiceForDoc(doc.documentElement).trigger(
-  this.form_,
-  'submit-success',
-  null
-);
-```
-
-And to expose actions use `registerAction` method that your element
-inherits from `BaseElement`.
-
-```javascript
-this.registerAction('close', this.close.bind(this));
-```
-
-Your element could also choose to override the `activate` method
-inherited from BaseElement that would define the default action for your
-element. For example amp-lightbox overrides activate to define the open
-default case.
-
-Make sure your element documentation documents the events and actions it
-exposes.
-
-## Sub-elements ownership
-
-AMP elements are usually discovered and scheduled by the AMP runtime
-automatically and managed through Resources. In some cases an AMP
-element might want to control and own when its sub-elements get
-scheduled and not leave that to the AMP runtime. An example to this is
-the &lt;amp-carousel&gt; component, where it wants to schedule
-preloading/pre-rendering or layouting of its cells based on the window
-the user is in.
-
-AMP provides a way for an element to control this by setting the owner
-on the element you want to control. In the carousel example, the component loops
-over all its elements and sets itself as the owner of these elements.
-The AMP runtime will not manage scheduling layouting for elements that have
-owners.
-
-```javascript
-this.cells_ = this.getRealChildren();
-
-this.cells_.forEach((cell) => {
-  Services.ownersForDoc(this.element).setOwner(cell, this.element);
-  cell.style.display = 'inline-block';
-  this.container_.appendChild(cell);
-});
-```
-
-An element can then later call `schedulePreload` or `scheduleLayout` to
-schedule preload or layout respectively. For example, &lt;amp-carousel
-type=slider&gt; (Slider instance of amp-carousel) calls
-`schedulePreload` for the next/previous slide when the user moves
-forward/backward in the slides and then calls `scheduleLayout` for the
-current slide when the user moves to it.
-
-```javascript
-const owners = Services.ownersForDoc(this.element);
-owners.updateInViewport(this.element, oldSlide, false);
-owners.updateInViewport(this.element, newSlide, true);
-owners.scheduleLayout(this.element, newSlide);
-this.setControlsState();
-owners.schedulePause(this.element, oldSlide);
-owners.schedulePreload(this.element, nextSlide);
-```
-
-It's important to understand that the parent/owner element is
-responsible for managing all of its children (except for placeholders,
-see below). This means you need to make sure your element updates
-whether the child is in viewport and when to schedule different phases
-for the element.
-
-### Nested sub-elements
-
-Your element should anticipate its sub-elements to nest some more
-amp-elements and schedule preload or layout for these as well, otherwise
-the element will never be preloaded or laid out. This is true to all
-nested amp-elements that are not placeholders. AMP runtime will schedule
-nested amp-elements that are placeholders.
-
-<!-- prettier-ignore-start -->
-```html
-<amp-carousel> ← Parent element
-  <amp-figure> ← Parent needs to schedule this element
-    <amp-img placeholder></amp-img> ← AMP will schedule this when amp-figure is scheduled
-    <amp-img></amp-img> ← Parent needs to schedule this element
-    <amp-fit-text></amp-fit-text> ← Parent needs to schedule this element
-  </amp-figure>
-</amp-carousel>
-```
-<!-- prettier-ignore-end -->
-
-## Allowing proper validations
-
-One of AMP's features is that a document can be checked against
-validation rules to confirm it's AMP-valid. When you implement your
-element, AMP validator needs to be updated to add rules for your element
-to keep documents using your element valid. In order to do that you need
-to file an issue on the GitHub repo select "Related to: Validator" and
-mention what rules the validator needs to validate. This usually
-includes
-
-- Your element tag-name
-- Required attributes for the element
-- Specific values that an attribute accept (e.g. `myattr="TYPE1|TYPE2"`)
-- Layouts your element supports (see [Layout specs](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md) and [Layouts supported in your element](#layouts-supported-in-your-element))
-- If there are restrictions where your element can or can't appear (e.g. disallowed_ancestory, mandatory_parent...)
-
-For more details take a look at [Contributing Component Validator
-Rules](https://github.com/ampproject/amphtml/blob/master/contributing/component-validator-rules.md).
-
-## Performance considerations
-
-### Pre-rendering and placeholders
-
-Another enabling feature of instant-web in AMP is support for
-prerendering in a way that does not consume loads of data and does not
-waste too much of the user's device resources. AMP does this by strictly
-controlling resource loading and rendering.
-
-If your extension is lightweight, it might be worth enabling
-pre-rendering of your elements so that users will be able to see it
-appear instantly when they click on an article.
-
-Sometimes fully pre-rendering the element isn't an option because it is
-heavyweight. Your element might want to opt into creating a dynamic
-placeholder for itself (in case a placeholder wasn't provided by the
-developer/publisher who is using your element). This allows elements to
-display content as fast as possible and allow prerendering that
-placeholder. Learn [more about placeholder
-elements](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md#placeholder).
-
-NOTE: Make sure not to request external resources in the pre-render
-phase. Requests to the publisher's origin itself are OK. If in doubt,
-please flag this in review.
-
-AMP will automatically call your element's
-[createPlaceholderCallback](#createplaceholdercallback) during
-build step if it didn't detect a placeholder was provided. This allows
-you to create your own placeholder. Here's an example of how
-`amp-instagram` element used this callback to create a dynamic
-placeholder of an `amp-img` element to avoid loading the heavyweight
-instagram iframe embed during pre-rendering and instead loads just the
-image directly from instagram media endpoint.
-
-```javascript
-class AmpInstagram extends AMP.BaseElement {
-  // ...
-  /** @override */
-  createPlaceholderCallback() {
-    const placeholder = this.getWin().document.createElement('div');
-    placeholder.setAttribute('placeholder', '');
-    const image = this.getWin().document.createElement('amp-img');
-    // This is always the same URL that is actually used inside of the embed.
-    // This lets us avoid loading the image twice and make use of browser cache.
-
-    image.setAttribute(
-      'src',
-      'https://www.instagram.com/p/' +
-        encodeURIComponent(this.shortcode_) +
-        '/media/?size=l'
-    );
-    image.setAttribute('width', this.element.getAttribute('width'));
-    image.setAttribute('height', this.element.getAttribute('height'));
-    image.setAttribute('layout', 'responsive');
-    setStyles(image, {
-      'object-fit': 'cover',
-    });
-    const wrapper = this.element.ownerDocument.createElement('wrapper');
-    // This makes the non-iframe image appear in the exact same spot
-    // where it will be inside of the iframe.
-    setStyles(wrapper, {
-      'position': 'absolute',
-      'top': '48px',
-      'bottom': '48px',
-      'left': '8px',
-      'right': '8px',
-    });
-    wrapper.appendChild(image);
-    placeholder.appendChild(wrapper);
-    this.applyFillContent(image);
-    return placeholder;
-  }
-  // …
-}
-```
-
-**Important**: One thing to keep in mind is that when you create a
-placeholder, use the amp- provided elements when loading external
-resources. This is most likely going to be `amp-img` like in the
-instagram case above. This still allows AMP resource manager to control
-when these resources get loaded and rendered as oppose to using the
-HTML-native `img` tag which will be out of AMP resource management.
-
-#### Loading indicators
-
-Consider showing a loading indicator if your element is expected to take
-a long time to load (for example, loading a GIF, video or iframe). AMP
-has a built-in mechanism to show a loading indicator simply by
-whitelisting your element to show it. You can do that inside layout.js
-file in the `LOADING_ELEMENTS_` object.
-
-```javascript
-export const LOADING_ELEMENTS_ = {
-  ...
-  'AMP-YOUTUBE': true,
-  'AMP-MY-ELEMENT': true,
-}
-```
-
-### Destroying heavyweight resources
-
-To stay good to our promise of lowering resources usage especially on
-mobile, elements that create and load heavyweight resources (e.g.
-iframes, video, very large images, an expensive timer or computation...)
-need to be destroyed when they are no longer needed.
-
-AMP signals to your element that it needs to do that with
-[unlayoutCallback](#unlayoutcallback). AMP calls this when the
-document becomes inactive; like when the user swipes away from the
-document to another one or when they switch tabs.
-
-This might be also be called in special cases like if your element is
-used as an amp-carousel cell and it was swiped away to become outside
-the viewport. This will only happen if your element sets
-`unlayoutOnPause`. Carousel by default only pauses the elements that
-are outside its viewport.
-
-Here's an example of how `amp-instagram` destroys the iframe it has
-embedded when `unlayoutCallback` is called.
-
-```javascript
-/** @override */
-unlayoutCallback() {
-  if (this.iframe_) {
-    removeElement(this.iframe_);
-    this.iframe_ = null;
-    this.iframePromise_ = null;
-    setStyles(this.placeholderWrapper_, {
-      'display': '',
-    });
-  }
-  return true; // Call layoutCallback again.
-}
-```
-
-Note if your element unlayoutCallback destroys the resources, it
-probably wants to return true in order to signal to AMP the need to call
-`layoutCallback` again once the document is active. Otherwise your
-element will never be re-laid out.
-
-### vsync, mutateElement, and requestChangeSize
-
-AMP provides multiple utilities to optimize many mutations and measuring
-for better performance. These include vsync service with a mutate and
-measure utility method that will synchronize all measuring happening in
-short period of time together and then do all the mutating in a
-requestAnimationFrame or similar cycles.
-
-### Loading external resources
-
-If your extension needs to load external resources (like an sdk) then
-you might need to add proper third party integration for it to work and
-use the proper third party iframe. Loading external resources is only
-allowed inside a 3p iframe which AMP serves on a different domain for
-security and performance reasons. Take a look at adding
-[&lt;amp-facebook&gt;](https://github.com/ampproject/amphtml/pull/1479/files)
-extension PR for examples of 3p integration.
-
-Read about [Inclusion of third party software, embeds and services into
-AMP](https://github.com/ampproject/amphtml/blob/master/3p/README.md).
-
-For contrast, take a look at amp-instagram which does NOT require an SDK
-to be loaded in order to embed a post, instead it provides an
-iframe-based embedding allowing amp-instagram extension to use a normal
-iframe with no 3p integration needed, similarly, amp-youtube and others.
-
-## Layouts supported in your element
-
-AMP defines different layouts that elements can choose whether or not to
-support Your element needs to announce which layouts it supports through
-overriding the `isLayoutSupported(layout)` callback and returning true
-if the element supports that layout. [Read more about AMP Layout
-System](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md)
-and [Layout
-Types](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md#layout).
-
-### What layout should your element support?
-
-After understanding each layout type, if it makes sense, support all of
-them. Otherwise choose what makes sense to your element. A popular
-support choice is to support size-defined layouts (Fixed, Fixed Height,
-Responsive and Fill) through using the utility `isLayoutSizeDefined`
-in `layout.js`.
-
-For example, `amp-pixel` only supports fixed layout.
-
-```javascript
-class AmpPixel extends BaseElement {
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout == Layout.FIXED;
-  }
-}
-```
-
-While `amp-carousel` supports all size-defined layouts.
-
-```javascript
-class AmpSlides extends AMP.BaseElement {
-  /** @override */
-  isLayoutSupported(layout) {
-    return isLayoutSizeDefined(layout);
-  }
-}
-```
-
-## Experiments
-
-Most newly created elements are initially launched as
-[experiments](https://github.com/ampproject/amphtml/blob/master/tools/experiments/README.md).
-This allows people to experiment with using the new element and provide
-the author(s) with feedback. It also provides the AMP Team with the
-opportunity to monitor for any potential errors. This is especially
-required if the validator hasn't been updated yet to allow your newly
-created extension, otherwise people using it in production will
-invalidate all their AMP documents.
-
-Add your extension as an experiment in the
-`amphtml/tools/experiments` file by adding a record for your extension
-in EXPERIMENTS variable.
-
-```javascript
-/** @const {!Array<!ExperimentDef>} */
-const EXPERIMENTS = [
-  // ...
-  {
-    id: 'amp-my-element',
-    name: 'AMP My Element',
-    spec:
-      'https://github.com/ampproject/amphtml/blob/master/extensions/' +
-      'amp-my-element/amp-my-element.md',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/XXXYYY',
-  },
-  // ...
-];
-```
-
-And then protecting your code with a check `isExperimentOn(win, 'amp-my-element')` and only execute your code when it is on.
-
-```javascript
-import {isExperimentOn} from '../../../src/experiments';
-import {userAssert} from '../../../src/log';
-
-/** @const */
-const EXPERIMENT = 'amp-my-element';
-
-/** @const */
-const TAG = 'amp-my-element';
-
-Class AmpMyElement extends AMP.BaseElement {
-
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-
-    // declare instance variables with type annotations.
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout == LAYOUT.FIXED;
-  }
-
-  /** @override */
-  buildCallback() {
-    userAssert(isExperimentOn(this.win, 'amp-my-element'),
-        `Experiment ${EXPERIMENT} is not turned on.`);
-    // get attributes, assertions of values, assign instance variables.
-    // build lightweight dom and append to this.element.
-  }
-
-  /** @override */
-  layoutCallback() {
-    userAssert(isExperimentOn(this.win, 'amp-my-element'),
-        `Experiment ${EXPERIMENT} is not turned on.`);
-    // actually load your resource or render more expensive resources.
-  }
-}
-
-AMP.extension('amp-my-element', '0.1', AMP => {
-  AMP.registerElement('amp-my-element', AmpMyElement, CSS);
-});
-```
-
-### Enabling and removing your experiment
-
-Users wanting to experiment with your element can then go to the
-[experiments page](https://cdn.ampproject.org/experiments.html) and
-enable your experiment.
-
-If you are testing on your localhost, use the command `AMP.toggleExperiment(id, true/false)` to enable the experiment.
-
-File a github issue to cleanup your experiment. Assign it to yourself as a reminder to remove your experiment and code checks. Removal of your experiment happens after the extension has been thoroughly tested and all issues have been addressed.
-
-## Documenting your element
-
-Create a .md file that serves as the main documentation for your element. This document should include:
-
-- Summary table
-- Overview
-- How to use it including code snippets and images
-- Examples
-- Attributes to specify (optional and required)
-- Validation
-
-For samples of element documentation, see: [amp-list](https://github.com/ampproject/amphtml/blob/master/extensions/amp-list/amp-list.md), [amp-instagram](https://github.com/ampproject/amphtml/blob/master/extensions/amp-instagram/amp-instagram.md), [amp-carousel](https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md)
-
-## Example of using your extension
-
-This greatly helps users to understand and demonstrate how
-your element works, and provides an easy start-point for them to
-experiment with it. This is basically where you actually build an AMP
-HTML document and use your element in it by creating a file in the
-`examples/` directory, usually with the `my-element.amp.html` file
-name. Browse that directory to see examples for other elements and
-extensions.
-
-Also consider contributing to
-[ampbyexample.com](https://ampbyexample.com/) on
-[GitHub](https://github.com/ampproject/amp-by-example).
-
-## Updating build configs
-
-In order for your element to build correctly you would need to make few
-changes to [`build-system/compile/bundles.config.js`](../build-system/compile/bundles.config.js) to tell it about your
-extension, its files and its examples. You will need to add an entry in the `extensionBundles` array.
-
-```javascript
-exports.extensionBundles = [
-...
-  {name: 'amp-kaltura-player', version: '0.1', latestVersion: '0.1'},
-  {name: 'amp-carousel', version: '0.1', latestVersion: '0.1', options: {hasCss: true}},
-...
-];
-```
-
-## Versioning
-
-AMP runtime is currently in v0 major version. Extensions versions are
-maintained separately. If your changes to your non-experimental
-extension makes breaking changes that are not backward compatible you
-should version your extension. This would usually be by creating a 0.2
-directory next to your 0.1.
-
-When version 0.2 is under development, make sure that `latestVersion` is
-set to 0.1 for both the 0.1 and 0.2 entries in `extensionBundles`. Once 0.2
-is ready to be released, `latestVersion` can be changed to 0.2.
-
-If your extension is still in experiments breaking changes usually are
-fine so you can just update the same version.
-
-## Unit tests
-
-Make sure you write good coverage for your code. We require unit tests
-for all checked in code. We use the following frameworks for testing:
-
-- [Mocha](https://mochajs.org/), our test framework
-- [Karma](https://karma-runner.github.io/), our tests runner
-- [Sinon](http://sinonjs.org/), spies, stubs and mocks.
-
-For faster testing during development, consider using --files argument
-to only run your extensions' tests.
-
-```shell
-$ gulp unit --files=extensions/amp-my-element/0.1/test/test-amp-my-element.js --watch
-```
-
-## Type checking
-
-We use Closure Compiler to perform type checking. Please see
-[Annotating JavaScript for the Closure
-Compiler](https://github.com/google/closure-compiler/wiki/Annotating-JavaScript-for-the-Closure-Compiler)
-and existing AMP code for examples of how to add type annotations to
-your code. The following command should be run to ensure no type
-violations are introduced by your extension.
-
-```shell
-$ gulp check-types
-```
-
-## Example PRs
-
-- Adding new ad-provider
-  - [Teads](https://github.com/ampproject/amphtml/commit/654ade680d796527345af8ff298a41a7532ee074)
-  - [EPlanning](https://github.com/ampproject/amphtml/commit/a007543518a07ff77d48297e76bd264cadf36f57)
-  - [Taboola](https://github.com/ampproject/amphtml/commit/79a58e545939cca0b75e62b2e62147829c59602a)
-- Adding embeds that's not iframe-based (requires JS SDK)
-  - [amp-facebook](https://github.com/ampproject/amphtml/commit/6679db198d8b9d9c38854d93aa04801e8cf6999f)
-- Adding iframe based embeds
-  - [amp-soundcloud](https://github.com/ampproject/amphtml/commit/2ac845641c8eea9e67f17a1d471cfb9bab459fd1)
-  - [amp-vine](https://github.com/ampproject/amphtml/commit/eb98861b25210f89b41abc9ac52b29d9a4ff45a6)
-  - [amp-brightcove](https://github.com/ampproject/amphtml/commit/9a0f6089600da0c42e1f3787402a1ced0c377c65)
-- Adding non-visual elements
-  - [amp-font](https://github.com/ampproject/amphtml/commit/ef040b60664a5aad465cb83507d37fae5e361772)
-  - [amp-install-serviceworker](https://github.com/ampproject/amphtml/commit/e6199cfb5b9d13b0e4bb590b80c09ba3614877e6)
-- Adding general UI components
-  - [amp-sidebar](https://github.com/ampproject/amphtml/commit/99634b18310129f4260e4172cb2750ae7b8ffbf0)
-  - [amp-image-lightbox](https://github.com/ampproject/amphtml/commit/e6006f9ca516ae5d7d79267976d3df39cc1f9636)
-  - [amp-accordion](https://github.com/ampproject/amphtml/commit/1aae4eee37ec80c6ea9b822fb43ecce73feb7df6)
-- Implementing a video player.
-  - [amp-jwplayer](https://github.com/ampproject/amphtml/commit/4acdd9f1d70a8a374cb886d3a4778476d13e7daf#diff-f650f38f7840dc8148bacd88733be338)
diff --git a/contributing/contributing-code.md b/contributing/contributing-code.md
deleted file mode 100644
index 8b227dbcc6e30..0000000000000
--- a/contributing/contributing-code.md
+++ /dev/null
@@ -1,216 +0,0 @@
-# Contributing code and features
-
-Thank you for helping make AMP better by fixing bugs, adding features or improving the AMP code in some other way!
-
-This document describes the process you will go through to make a change in AMP.
-
-## Process Overview
-
-### Process for minor bug fixes and updates
-
-We want to make it as easy as possible to get in small fixes. A fix for a small bug should be as easy as creating a PR with the change, adding/fixing a test, and sending it to a reviewer.
-
-- [ ] Sign the [Contributor License Agreement (CLA)](#contributor-license-agreement) as soon as possible if you haven't already done so. If you are contributing code on behalf of your company and your company is not yet covered by a CLA it can take a few days for the CLA to be verified.
-- [ ] (optional) If you are fixing a bug and there is an existing GitHub issue, assign it to yourself (if you can) or comment on it to let others know you are working on it. If there is no GitHub issue consider filing one, but for minor fixes your PR description may be enough.
-- [ ] (optional) [Find a guide](#find-a-guide) before you start coding to help you answer questions.
-- [ ] Follow the parts of the [Implementation](#implementation) section that makes sense for your change. There are many parts of the process that you probably won't need to follow for a minor fix--e.g. you may not need to make validator changes or put your change behind an experiment for minor fixes. If in doubt ask your guide or the [#contributing channel](https://amphtml.slack.com/messages/C9HRJ1GPN/) on [Slack](https://bit.ly/amp-slack-signup).
-- [ ] When your code is ready to review, find [people to review and approve your code](#code-review-and-approval).
-  - Your code must be reviewed/approved by an Owner for each area your PR affects and a Reviewer. (It is acceptable and common for one person to fulfill both roles.)
-    - after your PR is created, a bot will automatically find Owners that can approve your PR and add them to your PR; you may also view the OWNERS file in the directories you change (or their parent directories)
-    - choose a [Reviewer](https://github.com/orgs/ampproject/teams/reviewers-amphtml); it's possible that the Owners that were automatically added by the bot are also Reviewers
-  - If the Owner that was automatically added is not a Reviewer, or you want to have someone else review and approve your code add them as reviewers on your PR if you are able to do so, otherwise cc them by adding the line "/cc @username" in your PR description/comment.
-
-If your run into any issues finding a Reviewer/Owner or have any other questions, ping the [#contributing channel](https://amphtml.slack.com/messages/C9HRJ1GPN/) on [Slack](https://bit.ly/amp-slack-signup). You can also reach out to mrjoro on Slack or cc him on your GitHub issue/PR.
-
-### Process for significant changes
-
-Significant changes (e.g. new components or significant changes to behavior) require consultation with and approval from knowledgeable members of the community.
-
-**If you are making a change to existing behavior, familiarize yourself with AMP's [policy on breaking changes](https://github.com/ampproject/amphtml/blob/master/spec/amp-versioning-policy.md#breaking-changes).**
-
-**If you are deprecating/removing a feature, follow the [deprecation process](https://github.com/ampproject/amphtml/blob/master/spec/amp-versioning-policy.md#deprecations) instead of this process.**
-
-- [ ] _Before you start coding_, [find a guide](#find-a-guide) who you can discuss your change with and who can help guide you through the process.
-- [ ] Sign the [Contributor License Agreement (CLA)](#contributor-license-agreement) as soon as possible if you haven't already done so. If you are contributing code on behalf of your company and your company is not yet covered by a CLA it can take a few days for the CLA to be verified.
-- [ ] File an [Intent-to-implement (I2I)](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=INTENT+TO+IMPLEMENT&template=intent-to-implement--i2i-.md&title=I2I:%20%3Cyour%20change/update%3E) GitHub issue and cc your guide on it. The I2I should include:
-  - A description of the change you plan to implement.
-  - If you are integrating a third-party service, provide a link to the third-party's site and product.
-  - Details on any data collection or tracking that your change might require.
-  - A prototype or mockup (for example, an image, a GIF, or a link to a demo).
-- [ ] Determine who needs to approve your I2I. Changes that have a significant impact on AMP's behavior or significant new features require the approval from the [Approvers Working Group (WG)](https://github.com/ampproject/wg-approvers). Work with your guide to determine whether your change is significant enough that it requires approval from the Approvers Working Group and/or any other [Working Group](https://github.com/ampproject/meta/tree/master/working-groups).
-- [ ] Get pre-approval from the Approvers WG if needed. For changes that require approval from the Approvers WG, at least 3 members of the Approvers WG should provide pre-approval on the I2I before significant implementation work proceeds.
-- [ ] Finalize the design of your change.
-  - Familiarize yourself with our [Design Principles](DESIGN_PRINCIPLES.md).
-  - Your guide can help you determine if your change requires a design doc and whether it should be brought to a [design review](./design-reviews.md).
-- [ ] Proceed with the [implementation](#implementation) of your change.
-- [ ] For changes that require approval from the Approvers WG, file an [Intent-to-ship (I2S) issue](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=INTENT+TO+SHIP&template=intent-to-ship--i2s-.md&title=I2S:%20%3Cyour%20change/update%3E). Indicate which experiment is gating your change and a rollout plan. Once this issue is approved by 3 members of the Approvers WG the rollout plan described in the I2S may proceed.
-
-## Find a guide
-
-A guide is a member of the AMP community who is knowledgeable about the area you are modifying and who can guide you from the design phase all the way through launch.
-
-A guide is required if you are making a substantial change to AMP, but is optional if you are making smaller changes.
-
-To find a guide:
-
-- The [Working Group](https://github.com/ampproject/meta/blob/master/working-groups/README.md) that is most responsible for the area you are changing may document how to find a guide from that Working Group. If they do not, reach out to the facilitator of the WG (on [Slack](https://bit.ly/amp-slack-signup) or by ccing them on your GitHub issue by adding "/cc @username" in the issue body or comment).
-- If there is no obvious Working Group responsible for the area you are changing but you know what part of the codebase your change will be in, reach out to one of the people in the OWNERS files for the areas you're changing (on [Slack](https://bit.ly/amp-slack-signup) or by ccing them on your GitHub issue).
-- If you're still not sure who your guide should be, ask for a guide on [Slack](https://bit.ly/amp-slack-signup) in the [#contributing channel](https://amphtml.slack.com/messages/C9HRJ1GPN/).
-- If you can't find a guide after going through these routes or the guides you find aren't responsive, reach out to mrjoro on Slack or cc him on your GitHub issue/PR.
-
-Once you have found a guide, make sure to @-mention them on any issues / PRs related to your change (e.g. if mrjoro is your guide you can just add "/cc @mrjoro" in the issue/PR body or comment).
-
-## Implementation
-
-- (optional) [Join AMP on GitHub](https://goo.gl/forms/T65peVtfQfEoDWeD3). You don't need to wait to be added to the org before you start coding.
-- [Perform the one-time setup if needed](./getting-started-quick.md#one-time-setup): Set up your GitHub account, install Node, Yarn, Gulp CLI, fork repo, track repo, etc.
-- [Create a working branch](./getting-started-e2e.md#create-a-git-branch).
-- [Build AMP](./getting-started-e2e.md#building-amp-and-starting-a-local-server).
-- Write your code.
-  - For more substantial changes, multiple smaller PRs are preferable to one large PR. These will be easier to review and can prevent wasted work.
-  - Consult these resources for guidance and guidelines:
-    - **Design**: [AMP Design Principles](./DESIGN_PRINCIPLES.md)
-    - **JavaScript**: [Google JavaScript Code Style Guide](https://google.github.io/styleguide/jsguide.html)
-    - **CSS**: [Writing CSS For AMP Runtime](./writing-css.md)
-    - **Creating new components**:
-      - [Instructions and Guidelines for building an AMP component](./building-an-amp-extension.md)
-      - Learn to create your first component in this [codelab](https://codelabs.developers.google.com/codelabs/creating-your-first-amp-component/#0)
-      - Watch this [YouTube video](https://youtu.be/FJEhQFNKeaQ?list=PLXTOW_XMsIDTDXYO-NAi2OpEH0zyguvqX) to learn about "Building a new AMP component"
-    - **Integrating third-party software, embeds, services**: [Guidelines](../3p/README.md)
-  - [Put your change behind an experiment flag](./building-an-amp-extension.md#experiments) unless it is a minor fix or your reviewer indicates this is not needed.
-  - [Commit your files](./getting-started-e2e.md#edit-files-and-commit-them).
-- [Test your changes](./getting-started-e2e.md#testing-your-changes).
-  - A key feature of AMP is performance. All changes will be analyzed for any performance impact; we particularly appreciate changes that make things even faster. Please include any measured performance impact with substantial pull requests.
-- Prepare for your code review.
-  - For more substantial changes, it's usually preferable to have your code reviewed before you make a significant investment in new tests, examples, etc.
-  - Before your final review, make sure your change:
-    - [Has good test coverage](./TESTING.md)
-    - [Follows the style and design guidelines](./DEVELOPING.md#guidelines--style)
-    - [Provides good documentation](./building-an-amp-extension.md#documenting-your-element)
-    - [Passes the presubmit checks (no lint and type check errors, tests are passing)](../build-system/common/enable-git-pre-push.sh#L17-L20)
-    - [Includes validation rules and tests, if relevant](./building-an-amp-extension.md#allowing-proper-validations)
-    - [Provides an example, if relevant](./building-an-amp-extension.md#example-of-using-your-extension)
-- Send your code for review.
-  - [Sign the Contributor License Agreement](#contributor-license-agreement) if you have not already done so.
-  - [Pull the latest changes from the amphtml repo](./getting-started-e2e.md#pull-the-latest-changes-from-the-amphtml-repository) and resolve any conflicts.
-  - Run the **pre push** check, which is a tool that helps catch any issues before you submit your code. To enable the git pre-push hook, see [`enable-git-pre-push.sh`](../build-system/common/enable-git-pre-push.sh#L17-L20).
-  - [Push your changes](./getting-started-e2e.md#push-your-changes-to-your-github-fork)
-  - [Create a Pull Request (PR)](./getting-started-e2e.md#send-a-pull-request-ie-request-a-code-review).
-  - Make sure the presubmit checks shown on your PR on GitHub passes (e.g. no lint and type check errors, tests are passing).
-  - Add reviewers to your PR that will fulfill the requirements of code review and approval documented in the [Code review and approval](#code-review-and-approval) section. (A bot will automatically assign Owners that can review your code, and your guide can help find Reviewers if needed.)
-  - [Respond to feedback](./getting-started-e2e.md#respond-to-pull-request-comments).
-- After your PR has all of the necessary approvals, your code may be merged into the repository by any Collaborator/Reviewer. Your guide will typically handle this; reach out to them if your code is not merged soon after it has been approved.
-- To check on your changes and find out when they get into production, read [See your changes in production](./getting-started-quick.md#see-your-changes-in-production).
-- [Clean up](./getting-started-quick.md#delete-your-branch-after-your-changes-are-merged-optional): After your changes are merged, you can delete your working branch.
-
-## Contributing extended components
-
-AMP is designed to be extensible - it is meant to support “Extended Components” that provide first-class support for additional rich features.
-
-Because Extended Components may have significant impact on AMP performance, security, and usage, Extended Component contributions will be very carefully analyzed and scrutinized.
-
-In particular, we strive to design the overall component set, so that a large number of use cases can be composed from them. Instead of creating a new component it may thus be a better solution to combine existing components to a similar effect.
-
-We have a few additional resources that provide an introduction to contributing extended components:
-
-- ["Building an AMP Extension"](./building-an-amp-extension.md) has a detailed description of how to build an AMP component.
-- ["Creating your first AMP Component" codelab](https://codelabs.developers.google.com/codelabs/creating-your-first-amp-component/#0) provides a quick overview of the steps you need to go through to create a component with examples you can modify for your component.
-- The ["Building a new AMP component" talk at AMP Conf 2017](https://youtu.be/FJEhQFNKeaQ?list=PLXTOW_XMsIDTDXYO-NAi2OpEH0zyguvqX) provides an introduction to contributing AMP components.
-
-For further detail on integrating third-party services (e.g., fonts, embeds, etc.), see our [3p contribution guidelines](https://github.com/ampproject/amphtml/tree/master/3p).
-
-## Contributor License Agreement
-
-AMP requires all contributors to either sign an individual Contributor License Agreement or be covered by a corporate Contributor License Agreement in order to protect contributors and users in issues of intellectual property.
-
-We recommend you handle signing/being covered by a CLA _before_ you send a PR to avoid problems, though this is not absolutely necessary until your code is ready to be merged in.
-
-**Make sure that the email you associate with your CLA is the same email address you associate with your commits (likely via the `user.email` Git config as described on GitHub's [Set up Git](https://help.github.com/articles/set-up-git/) page).**
-
-- **If you are contributing code on your own behalf** you can sign the [individual CLA](https://developers.google.com/open-source/cla/individual) instantly online.
-- **If you are planning on contributing code on behalf of your company:**
-  - Your company will need to agree to a [corporate CLA](https://developers.google.com/open-source/cla/corporate) if it has not already done so. Although this is a relatively straightforward process, it requires approval from an authorized signer at your company and a manual verification process that may take a couple of days. To ensure you can get your code reviewed and merged quickly please start this process as soon as possible. The signer of your corporate CLA will associate a Google Group to the corporate CLA, and any email address added to this Google Group will be considered to be covered by this corporate CLA.
-  - To be covered by your company's corporate CLA the owner of the Google Group associated with the corporate CLA (someone at your company) will need to add your address to this Google Group.
-  - If you aren't sure whehther your company has already signed a corporate CLA, if you don't know who at your company owns the Google Group you need to be added to, or you run into any other questions about the corporate CLA, please reach out to @mrjoro (via cc on a PR or on [Slack](https://amphtml.slack.com) ([signup](https://bit.ly/amp-slack-signup))) or the [#contributing](https://amphtml.slack.com/messages/C9HRJ1GPN/details/) channel on Slack.
-
-## Code review and approval
-
-All code in AMP must be reviewed and approved before it is merged. Reviewers/Collaborators primarily ensure that the code is correct, efficient and consistent with existing AMP code while Owners primarily provide a domain-specific review of the code.
-
-To be merged, all code must be approved by both:
-
-- At least one [Reviewer](https://github.com/orgs/ampproject/teams/reviewers-amphtml) who is not the author. If the author is a Reviewer, a [Collaborator](https://github.com/orgs/ampproject/teams/collaborators-amphtml) may fulfill this requirement instead.
-- At least one [Owner](https://github.com/ampproject/amphtml/search?o=asc&q=filename%3AOWNERS&s=indexed) for all areas the PR affects, except those areas in which the code author is an Owner.
-
-It is acceptable for one person to fulfill these requirements, e.g. if an Owner who is also a Reviewer approves the PR it may be merged.
-
-We now have a bot that will automatically assign Owners to a PR once it is created, and it is likely at least one of these Owners will also be a Reviewer.
-
-Once the PR has been approved, anyone with commit rights to the repository may merge the PR, including its author.
-
-These guidelines are specific to the amphtml repository. Other ampproject repos may follow the same guidelines or use different guidelines as documented in their CONTRIBUTING.md files.
-
-### Roles
-
-#### Collaborators
-
-- Review, approve and merge PRs in the repository for which they are Collaborators.
-- Collaborator status is granted to folks who have proven basic familiarity with the respective repository.
-- A person may become a Collaborator after 2 merged PRs that are non-trivial (not only fixing typos, not only config changes) and a +1 from 1 current Reviewer. To request becoming a Collaborator file an issue in the repository in which you are requesting to be a Collaborator and cc a [Reviewer](#reviewers) in that repository.
-- The list of Collaborators is maintained in the [Collaborators (amphtml)](https://github.com/orgs/ampproject/teams/collaborators-amphtml) GitHub team.
-
-#### Reviewers
-
-- Review, approve and merge PRs in the repository for which they are Reviewers.
-- Reviewer status is granted to folks who have demonstrated deep familiarity with the code-style and conventions of the respective repository.
-- A person may become a Reviewer after 10 merged PRs or 10 high quality reviews of complex PRs and a +1 from 1 current Reviewer. Qualifying PRs must be non-trivial (not only fixing typos, not only config changes) and should have implemented or documented at least 2 new features. To request becoming a Reviewer file an issue in the repository in which you are requesting to be a Reviewer and assign/cc a Reviewer in that repository.
-- The list of Reviewers is maintained in the [Reviewers (amphtml)](https://github.com/orgs/ampproject/teams/reviewers-amphtml) GitHub team.
-
-#### Owners
-
-- Review & approve PRs in the area in which they have expertise.
-- Requirements to be an Owner:
-  - Demonstrated expertise in the area in which they are an Owner.
-  - Any GitHub user (including those who are not Reviewers or Collaborators) may be an Owner.
-  - When creating a new directory (such as when creating a new AMP extension) the author of the pull request should designate themselves as an Owner of that directory.
-  - Owners of an area may approve other Owners at or below their area of expertise following the normal PR process. To request becoming an Owner create a PR adding yourself to the appropriate OWNERS file and assign/cc a current Owner for that directory.
-- The list of Owners for a directory can be found in the [OWNERS](https://github.com/ampproject/amphtml/search?o=asc&q=filename%3A"OWNERS"&s=indexed) file in the directory or a parent directory.
-
-## Cherry-picks
-
-We have a well-defined process for handling requests for changes to the **experimental**/**beta**, **stable**, or **lts** release builds. These changes are known as "cherry-picks".
-
-> Note: We do not support cherry-picks into the **nightly** release channel; in the event of security or privacy issues, a rollback is performed instead.
-
-**The bar for getting a cherry-pick into a live release is very high** because our goal is to produce high quality launches on a predictable schedule.
-
-**Keep in mind that performing a cherry-pick requires a significant amount of work from you and the on-duty engineer** and they can take a long time to process.
-
-- In general only fixes for [P0 issues](https://github.com/ampproject/amphtml/blob/master/contributing/issue-priorities.md) may be cherry-picked. P0 issues are those that:
-  - cause privacy or security issues
-  - cause user data loss
-  - break existing AMP web pages in a significant way
-  - cause an outage or critical production issue
-  - or would otherwise cause a significant harm to AMP's reputation if left unresolved
-- Regressions found in the **experimental**/**beta** releases that are not P0 _may_ be approved if they can be resolved with a rollback. Fixes other than rollbacks--no matter how simple they may seem--will not be approved because these have the potential to cause cascading problems and delay the release promotion of **beta** to **stable** for everyone.
-
-### Process for requesting a cherry-pick
-
-The following outlines the process to request a cherry-pick.
-
-- Ensure there is a [GitHub issue](https://github.com/ampproject/amphtml/issues/new/choose) filed for the problem that needs to be resolved _before_ filing the cherry-pick request issue.
-- Escalate the issue to P0 by attaining consensus from one or more members of the [Approvers Working Group (WG)](https://github.com/ampproject/wg-approvers) (if you are a member of this working group, you may not count your voice for consensus purposes)
-- File the cherry-pick request issue using the [Cherry-pick request template](https://github.com/ampproject/amphtml/issues/new?title=%F0%9F%8C%B8%20Cherry%20pick%20request%20for%20%3CYOUR_ISSUE_NUMBER%3E%20into%20%3CRELEASE_ISSUE_NUMBER%3E%20%28Pending%29&template=cherry_pick_template.md). Follow the instructions in the template, providing all the requested data. **Make sure you fill out this issue completely or your cherry-pick may not be seen or acted upon.**
-- Get the necessary approval for your cherry-pick, indicated via comments on the cherry-pick request issue.
-  - For cherry-picks into **experimental**/**beta**, at least one member of the [Approvers WG](https://github.com/orgs/ampproject/teams/wg-approvers/members) must approve the cherry-pick/rollback.
-  - For cherry-picks into **stable**/**lts** at least one member from the [Cherry-Pick Approvers group](https://github.com/orgs/ampproject/teams/cherry-pick-approvers/members) must approve the cherry-pick.
-- Once approved, the on-duty engineer handling releases will work with you to ensure the cherry-pick is made.
-- **Once the cherry-pick is made you are responsible for verifying the cherry-pick fixes the issue and does not cause other issues.**
-
-**If you are requesting a cherry-pick to fix an issue in production** it is likely you will _also_ need a cherry-pick into the **experimental**/**beta** releases. Problems cherry-picked in **stable** could be overridden after promoting **beta**. The on-duty engineer will help determine if you need to cherry-pick both release channels.
-
-**It is possible that a P0 issue gets _discovered_ on Monday or Tuesday, when it was _already present_ in the code-base in the previous week.** When that happens, the previous week's **nightly** release (which is bound to be promoted to **experimental**/**beta** on Tuesday morning) will contain the offending code without the fix. In this case, the release on-duty engineer must perform a cherry-pick before promoting last week's **nightly** to **experimental**/**beta**.
-
-> Note: While the cherry-pick is performed on top of last week's **nightly** release, we do not promote that fix to the **nightly** release channel. This is because the cherry-pick is performed on top of a previous nightly release, not on top of the latest.
-
-If you run into any issues or have any questions when requesting a cherry-pick, please use the [AMP Slack #release channel](https://amphtml.slack.com/messages/C4NVAR0H3/) ([sign up for Slack](https://bit.ly/amp-slack-signup)).
diff --git a/contributing/creating-a-welcoming-community.md b/contributing/creating-a-welcoming-community.md
deleted file mode 100644
index 8025c527aa77b..0000000000000
--- a/contributing/creating-a-welcoming-community.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# Creating A Welcoming Community
-
-We want to make the AMP open source community as welcoming as possible, both because we :sparkling_heart: new contributors (and want more of them) and because most people prefer to work on a project with a friendly community.
-
-Here are some ways you can help make AMP's open source community even more welcoming. **The TL;DR is "be friendly and helpful."** :)
-
-- Be welcoming in everything you do.
-  - Think about how intimidating it can be to join a new community (will this new group ignore me? will they treat me like I'm not smart?) and then work to make our community less intimidating. People that see that the current environment is friendly and helpful will be more willing to take the plunge to help out.
-  - Familiarize yourself with our [Code of Conduct](https://github.com/ampproject/meta/blob/master/CODE_OF_CONDUCT.md). In addition to a list of "don't's" the Code of Conduct includes some of our ideals like "we are committed to providing a friendly, safe and welcoming environment for everyone."
-  - Think about how the words you use can affect how people perceive the community. A [jsconf talk from Harriet Lawrence](https://www.youtube.com/watch?v=WGE3-aBR4i8) makes some good points, including:
-    - Things that may sound innocuous can actually be stumbling blocks for people thinking about joining a community. For example docs that say "these short and easy instructions" can turn away contributors who don't actually find the instructions easy and then feel like they aren't qualified to participate in the community.
-    - The communication between people already in the community is one way people judge whether to join in. Be conscious of this when you talk to others (on issues, code reviews, etc.). Your joking insult on a PR with someone you know well may look like hostility to someone who doesn't know you.
-- Don't let people feel ignored.
-  - Keep an eye out for issues/comments/PRs on GitHub or comments on Slack that aren't being responded to and either respond yourself or find an appropriate person to do so. If you aren't sure who can help, ping [mrjoro](https://amphtml.slack.com/threads/team/mrjoro) on Slack.
-  - If you can't immediately respond in detail to something in a PR/issue let the contributor know that and provide an estimate of when you'll be able to get to it (e.g. "I won't have time to get to this today, but plan on reviewing it on Friday").
-  - Pay particular attention to [Good First Issues](https://github.com/ampproject/amphtml/labels/good%20first%20issue) since the people working on them are generally brand new to the community.
-- Understand the motivations of contributors to AMP.
-  - There are a lot of different reasons someone may be contributing to AMP. Understanding the motivations of contributors you're working with can help you point them in the right direction.
-  - Some of the many reasons people contribute to AMP:
-    - A developer using AMP that wants to fix something that isn't working for them (bug or new feature).
-    - Someone from an ad network/analytics provider/video player/etc. that wants to add support for their service.
-    - People that want to get involved in open source and found AMP (through news, tweets, open source new contributor events, etc.).
-- Get an understanding of what new contributors are interested in helping out with (a new feature? just finding some way to help?) and point them to the relevant section of [bit.ly/helpamp](https://bit.ly/helpamp).
-  - If you are working with a new contributor and they are not familiar with Git/GitHub or contributing to open source projects, point them to the Getting Started End-to-end guide at [bit.ly/helpamp-e2e](https://bit.ly/helpamp-e2e).
-  - More experienced contributors may prefer the "[quick start](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-quick.md)" version of the getting started guide.
-- Help people find a project.
-  - AMP relies on the community for many different types of contributions--code, documentation, AMP Start templates, translations, etc. Try to get a sense of what someone who doesn't have a specific project in mind would be interested in helping with and point them in the right direction.
-  - [Good First Issues](https://github.com/ampproject/amphtml/labels/good%20first%20issue) are good starter projects.
-    - When someone starts working on a GFI we add the "GFI Claimed!" label to it, so the [GFIs not marked as "GFI Claimed!](https://github.com/ampproject/amphtml/issues?utf8=%E2%9C%93&q=is%3Aopen%20label%3A%22good%20first%20issue%22%20-label%3A%22GFI%20Claimed!%22) are the open ones.
-    - Keep an eye out for small issues that would make good Good First Issues and [create Good First Issues](https://github.com/ampproject/amphtml/blob/master/contributing/creating-good-first-issues.md) for them. Having a variety of GFIs always available for new contributors helps ensure new people will have a way to get started contributing.
-    - There may not yet be a Good First Issue that matches a new contributor's interests/expertise. If that's the case reach out to the community (e.g. on Slack) to see if anyone has an idea of a project for them to work on.
-  - If you aren't sure where to send somebody for a starter project let [mrjoro](https://amphtml.slack.com/threads/team/mrjoro) know.
-- Encourage contributors to sign up for Slack.
-  - Slack provides the best forum for interacting with the community outside of individual GitHub issues/PRs.
-  - Contributors will need to fill out a [single-question form](https://docs.google.com/forms/d/1wAE8w3K5preZnBkRk-MD1QkX8FmlRDxd_vs4bFSeJlQ/viewform?fbzx=4406980310789882877) to get an invite.
-  - Point contributors to the Slack channel(s) that they'll likely get the most value out of, e.g. [#welcome-contributors](https://amphtml.slack.com/messages/C432AFMFE/) if they're brand new to the project, [#docs](https://amphtml.slack.com/messages/C3AU36BM0/) if they're planning on making documentation contributions and one of the [Working Group channels](https://github.com/ampproject/meta/tree/master/working-groups) if they're interested in the area a particular Working Group tackles.
-  - Let contributors know they can Direct Message you with questions on Slack (if you're comfortable doing so).
-  - Having conversations about issues/PRs on the issue/PRs themselves is ideal since this provides a more permanent record that may help other contributors. Many contributors are more comfortable asking questions on a less public platform, though, so having these conversations on Slack is fine. (In these cases summarize any clarifications/designs/etc. in the issue/PR after the discussion if it makes sense.)
-- Encourage ongoing participation.
-  - Make sure people who introduce a new component are added to the relevant OWNERS file(s) and let them know about our [OWNERS](https://github.com/ampproject/amphtml/blob/master/contributing/CODE_OWNERSHIP.md) process. We want contributors to have a sense of ownership over the things they contribute.
-  - Help people who finish a Good First Issue find a new project to tackle and encourage them to take it on. If you don't already have a project in mind, gauge their interests and skill level and work with the rest of the community (or [mrjoro](https://amphtml.slack.com/threads/team/mrjoro)) to find a project suitable for them.
-  - Some people may only be interested in making one-off fixes (e.g. adding support for their ad network) and that's fine. Even in these cases it doesn't hurt to mention some other ideas for ways to help (e.g. maybe someone adding their ad network wants to make some other more general ads fixes) and let them know we'd love their help.
-- Let people know about [design reviews](design-reviews.md).
-  - Design reviews provide an opportunity for the community to meet "face to face" (over video conference) and learn from each other.
-  - Everyone is welcome to attend any design review (even if they aren't presenting a design).
-  - If it makes sense, encourage contributors you are working with to bring their projects to a design review. (This is optional and shouldn't stand in the way of a new contributor making fast progress.)
-  - Design docs are great, but we've also had successful design reviews with detailed GitHub issues for smaller design questions.
-  - If the contributor is in a time zone that makes it hard for them to attend the design reviews let [mrjoro](https://amphtml.slack.com/threads/team/mrjoro) know and we can move the time around.
-- Follow up when you don't hear from a contributor in a while.
-  - Sometimes new contributors express interest, propose a new feature, or maybe even starts on a PR but then we stop hearing from them. Make an effort to follow up with the contributor (in the issue/PR, over Slack DM, etc.) to see if there's anything we can do to help them make progress.
diff --git a/contributing/creating-good-first-issues.md b/contributing/creating-good-first-issues.md
deleted file mode 100644
index 462fabaca1ff9..0000000000000
--- a/contributing/creating-good-first-issues.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Creating Good First Issues
-
-AMP welcomes new contributors and we want to make it as easy as possible for them to contribute. For many new contributors (who may not have open source/Git/AMP/etc. experience) it can be difficult to figure out how to get started.
-
-To help these new contributors get oriented we curate [Good First Issues](https://github.com/ampproject/amphtml/labels/good%20first%20issue). A Good First Issue is a starter issue that a new contributor can use to get comfortable contributing to the AMP Project.
-
-We depend on experienced members of the community to identify bugs/features that would provide this orientation and to then create a well-documented Good First Issue for them.
-
-Our approach is inspired by [Hoodie](http://hood.ie/) which collects starter issues in their [Hoodie Camp](https://github.com/hoodiehq/camp). See the [Hoodie Camp Issues](https://github.com/hoodiehq/camp/issues) for many examples of what good first issues look like. (Hoodie's [Welcoming Communities](http://hood.ie/blog/welcoming-communities.html) post is also a great read.)
-
-## Qualities of a Good First Issue
-
-Keep these qualities in mind when creating your Good First Issues:
-
-- **You should have a good sense of exactly what is needed to resolve the issue.** In fact it would probably be faster for you to just fix the issue than to create the Good First Issue but the benefits to the community make the cost of creating the Good First Issue worth it.
-- **Even issues that require a very small/straightforward fix can be Good First Issues.** The focus of Good First Issues is not just about getting fixes in AMP; they are also a chance for new contributors to get set up with Git/GitHub, get familiar with building/making changes/testing in AMP and experience going through the Pull Request process.
-- **The issue should be P3.** The issue may not get picked up right away and the person fixing it may encounter problems while working on it so it should be an issue we are okay with going unresolved for a while.
-- **New contributors have a variety of backgrounds; we should have a variety of Good First Issues.** The goal isn't for each Good First Issue to be a good first issue for _every_ new contributor. Some new contributors may have extensive web development experience but haven't used Git; some may know everything about Git & Pull Requests but don't have a lot of experience with web components. You can specify "What you will need to know" in the bug so new contributors can find a Good First Issue that matches their current experience.
-
-## How to create a Good First Issue
-
-- When you identify an issue that would make a Good First Issue, create a new issue using the [Good First Issues Template](good-first-issues-template.md) (inspired by Hoodie's [template](https://github.com/hoodiehq/camp/blob/gh-pages/.github/ISSUE_TEMPLATE.md)). Copy the [raw markdown](https://raw.githubusercontent.com/ampproject/amphtml/master/contributing/good-first-issues-template.md) into your issue and follow the guidance in the comments.
-- Add the [Good First Issue label](https://github.com/ampproject/amphtml/labels/good%20first%20issue) and add the issue to the [Good First Issues milestone](https://github.com/ampproject/amphtml/milestone/25). (The redundancy is intentional. Most other open source projects use a label for tracking these types of issues, so we do too... but we also ensure every bug is triaged to the right milestone.)
-- If you come across a good candidate for a Good First Issue but are momentarily unable to spend the time filling out the template add the [GFI Candidate](https://github.com/ampproject/amphtml/labels/GFI%20Candidate) label to the issue. The time spent converting GFI Candidates to Good First Issues will pay off for the AMP Project so please remember to come back to issues you labeled as a GFI Candidate.
-
-## Next steps for your Good First Issue
-
-- We ask new contributors to claim a Good First Issue by adding a comment. Please keep an eye out for these and respond as soon as possible on the issue welcoming the new contributor and letting them know they can ask you questions.
-- Please add the [GFI Claimed!](https://github.com/ampproject/amphtml/labels/GFI%20Claimed!) label to the issue once someone claims it so others can quickly see that someone is working on it.
-- Encourage the person working on the GFI to [join the ampproject GitHub org](https://goo.gl/forms/T65peVtfQfEoDWeD3), which will let us assign the GFI to them. (Alternatively you can let [mrjoro](https://amphtml.slack.com/team/mrjoro/) know and he can send an invite to the new contributor directly.)
-- Keep an eye on the new contributor's progress on the GFI, and offer to help if they seem stuck or if you haven't heard any updates in a few days.
-- Once the GFI is complete help the new contributor find other projects to work on in AMP based on their interests.
diff --git a/contributing/design-reviews.md b/contributing/design-reviews.md
deleted file mode 100644
index 7fc6e6bb9e2b9..0000000000000
--- a/contributing/design-reviews.md
+++ /dev/null
@@ -1,77 +0,0 @@
-# Design Reviews
-
-The AMP open source community holds weekly public design reviews via video conference. We encourage everyone to attend these design reviews to discuss the design challenges being faced by the community.
-
-- [Upcoming design reviews](https://github.com/ampproject/amphtml/labels/Type%3A%20Design%20Review)
-- [Past design reviews](https://github.com/ampproject/amphtml/issues?q=label%3A%22Type%3A+Design+Review%22+is%3Aclosed)
-
-The GitHub issue for a given week's design review will have links to the designs being discussed that week. When the design review is over notes from the discussion will be posted to the GitHub issue.
-
-## Attending a design review
-
-To join a design review, follow the link for the video conference in the Design Review issue.
-
-You can optionally join the [design review Google Group](https://groups.google.com/a/ampproject.org/forum/#!forum/amp-design-review) to be able to join the video conference automatically; otherwise when you click on the video conference link you may have to wait a bit for someone in the meeting to accept your request to join.
-
-**When attending a design review please read through the designs _before_ the review starts.**
-
-## Design reviews are global
-
-Because AMP contributors are located all over the world we rotate the design review times to accommodate people in different time zones. The time and date for a design review will be specified in that design review's issue.
-
-If none of the design review times are convenient for you and you have a design you would like to discuss please reach out to mrjoro on [Slack](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#discussion-channels).
-
-## Bringing your design to a design review
-
-Design reviews are a great way to discuss and refine your designs with knowledgeable people in the community. Not every feature/change has to be brought to a design review. For smaller changes a design review is completely optional; for larger changes covered by the [code and feature contribution process](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md) work with your reviewer to determine if a design review makes sense.
-
-The process for bringing a design to the design review is:
-
-- Determine how to document your design.
-  - Most larger, more complex designs should use an [explainer](#explainers).
-  - For smaller issues, you may use a fully detailed Intent-to-implement (I2I) GitHub issue or other GitHub issue describing the problem and proposed solution.
-  - If you aren't sure which option you should use to document your design, ask your reviewer or the [#contributing Slack channel](https://amphtml.slack.com/messages/contributing/) ([sign up](https://bit.ly/amp-slack-signup)).
-- Perform a design pre-review with your reviewer if you have one; they may include other people that know the areas your design affects in this pre-review as well. If you don't have a reviewer you can request a pre-review in the [#contributing Slack channel](https://amphtml.slack.com/messages/contributing) ([sign up](https://bit.ly/amp-slack-signup)). It is fine to request a pre-review before your design is complete.
-- When your design is ready to be discussed at a design review add a comment on the [Design Review GitHub issue](https://github.com/ampproject/amphtml/labels/Type%3A%20Design%20Review) for the date/time that works best for you.
-  - You must add your design review topic to the design review issue at least 24 hours in advance of the design review.
-  - Your comment should point to the explainer, I2I or other GitHub issue describing the design that you want to discuss. Your design review comment **must** link to an explainer or GitHub issue. Topics that do not provide this link will not be discussed at the design review. You may highlight in this comment which parts of the design you'd like feedback on.
-- During the design review you'll lead the community in a conversation about your design. The design reviews are fairly informal and don't have a fixed structure.
-  - You don't need to have any slides or material other than your explainer/GitHub issue prepared for the design review.
-  - Present your explainer/issue during the meeting using the video conference "present" functionality. (If you have technical trouble doing this, someone else at the meeting can handle it.)
-  - You can assume that the people at the meeting have at least skimmed through your design to understand the area being discussed, but they may not be completely familiar with the nuances of your design.
-  - It is recommended that you start the discussion with a brief overview of your design.
-  - After the initial overview, lead the attendees through the parts of the design you would like feedback on. If you have a reviewer, they may suggest particular areas to focus on in the discussion. Potential things to think about:
-    - What are the performance tradeoffs to think about in the proposed approaches?
-    - How does this feature impact accessibility of AMP pages?
-    - Do we need to think about internationalization for this feature?
-    - Do we need to conduct user research before going in to the implementation?
-  - Working Groups will be represented at the Design Review to allow you to gather feedback across their different areas of expertise.
-  - We'll take notes during the design review and post them to the Design Review GitHub issue shortly after the meeting.
-- Update your design based on the feedback in the design review and any followup conversations in other channels.
-- Once your design is finalized, please provide a brief update at the start of a future design review (if you are able to attend).
-
-## Explainers
-
-For larger design topics (e.g. new features, or a significant change), the use of an explainer merged into the appropriate working group repository on GitHub is preferred.
-
-- An explainer is simply a document in the markdown format (md) that describes your proposed design.
-  - You create an explainer as a Pull Request, and comments/updates can be made using the normal PR review process.
-  - Explainers should be added to the appropriate Working Group repository. Explainers for work that span multiple working groups may be placed in any of the appropriate WG repos. Explainers for work that does not align with a WG may use the [ampproject design-doc](https://github.com/ampproject/design-docs) repository.
-  - You _may_ use a public Google document (with public comments enabled) instead of an md file for your explainer, but this has significant disadvantages. If you use a Google document, you _must_ submit a PDF version in the same repository you would have used for an explainer md file.
-  - The [W3C TAG Explainer document](https://w3ctag.github.io/explainers) describes what an explainer should contain and a recommended template. [Design docs - A design doc](https://medium.com/@cramforce/design-docs-a-design-doc-a152f4484c6b) also has tips on documenting a design.
-  - An explainer does not need to be "final" before being merged in. You may merge in a draft copy and handle updates through issues/PRs as needed.
-  - Explainers (whether as an md file or in a Google document) should be visible to the public, and any member of the community should be able to comment on it. The explainer should not link to non-public information except in extraordinary circumstances, and the non-public nature of the link and the reason for it not being public should be detailed.
-- See the ["Using React/Preact to implement AMP elements" explainer](https://github.com/ampproject/wg-bento/blob/master/react/explainer.md) for an example.
-- Add this license text to the top of your design doc before sharing it with anyone else in the community (updating the year if necessary):
-
-  ```js
-  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.
-  ```
diff --git a/contributing/getting-started-e2e.md b/contributing/getting-started-e2e.md
deleted file mode 100644
index f6d941abfb683..0000000000000
--- a/contributing/getting-started-e2e.md
+++ /dev/null
@@ -1,612 +0,0 @@
-<!---
-Copyright 2017 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.
--->
-
-# Getting Started End-to-end
-
-This end-to-end guide will show you how to contribute code to the AMP open source project. It covers everything from creating a GitHub account to getting your code reviewed and merged.
-
-This guide is intended for people who don't know much about Git/GitHub and the tools we use to build/test AMP (Node.js, Gulp, etc.). The guide may look long, but it includes a lot of explanation so you can get a better understanding of how things work.
-
-If you're already familiar with Git/GitHub/etc. or you just want to know what commands to type in instead of what they're doing take a look at the much shorter [Quick Start Guide](getting-started-quick.md).
-
-If you do not yet have a specific code contribution project in mind as you go through this guide, consider grabbing one of the [Good First Issues](https://github.com/ampproject/amphtml/labels/good%20first%20issue) we have created for new contributors.
-
-- [How to get help](#how-to-get-help)
-- [Intro to Git and GitHub](#intro-to-git-and-github)
-- [Set up your GitHub account and Git](#set-up-your-github-account-and-git)
-- [Get a copy of the amphtml code](#get-a-copy-of-the-amphtml-code)
-  - [Understanding repositories](#understanding-repositories)
-  - [Creating your GitHub fork and your local repository](#creating-your-github-fork-and-your-local-repository)
-- [Set up aliases for the remote Git repositories](#set-up-aliases-for-the-remote-git-repositories)
-- [Building AMP and starting a local server](#building-amp-and-starting-a-local-server)
-- [Create a Git branch](#create-a-git-branch)
-- [Pull the latest changes from the amphtml repository](#pull-the-latest-changes-from-the-amphtml-repository)
-- [Edit files and commit them](#edit-files-and-commit-them)
-  - [Code quality and style](#code-quality-and-style)
-- [Testing your changes](#testing-your-changes)
-  - [Running tests locally](#running-tests-locally)
-  - [Running all the Travis CI checks locally](#running-all-the-travis-ci-checks-locally)
-  - [Adding tests for your change](#adding-tests-for-your-change)
-- [Push your changes to your GitHub fork](#push-your-changes-to-your-github-fork)
-- [Send a Pull Request (i.e. request a code review)](#send-a-pull-request-ie-request-a-code-review)
-- [Respond to Pull Request comments](#respond-to-pull-request-comments)
-- [Delete your branch](#delete-your-branch)
-- [See your changes in production](#see-your-changes-in-production)
-- [⚡⚡⚡... (Next steps)](#-next-steps)
-- [Other resources](#other-resources)
-
-# How to get help
-
-If you have a question or are unsure about something while following this end-to-end guide, you can get help from the AMP open source community in many ways:
-
-- If you are tackling a [Good First Issue](https://github.com/ampproject/amphtml/labels/good%20first%20issue) or other GitHub issue you can ask a question as a comment on the issue directly. This works particularly well if the question is about how to make progress on that specific issue.
-
-- The [#welcome-contributors](https://amphtml.slack.com/messages/welcome-contributors/) channel on Slack is a place for new contributors getting up to speed in AMP to find help. You should feel comfortable asking any question in there no matter how basic it may seem to you (e.g. problems getting Git set up, errors during a build, etc.). We'll send you an [invitation](https://docs.google.com/forms/d/e/1FAIpQLSd83J2IZA6cdR6jPwABGsJE8YL4pkypAbKMGgUZZriU7Qu6Tg/viewform?fbzx=4406980310789882877) if you're not already on the AMP Slack.
-
-- You can also ask questions on [amphtml-discuss@googlegroups.com](https://groups.google.com/forum/#!forum/amphtml-discuss).
-
-# Intro to Git and GitHub
-
-People who have never used Git or GitHub before can find them intimidating--even people who have been coding on large projects for years. Once you understand a few basic concepts and several commands your day-to-day experience with Git will generally be straightforward.
-
-Despite the similarity in names, Git & GitHub are different:
-
-- Git is a version control system. You'll install the Git client locally and run Git commands to grab code from a Git repository, make changes and submit code. You don't need to use GitHub to use Git, but the AMP's Git repository happens to be hosted on GitHub.
-
-- GitHub hosts Git repositories and provides other tools that make managing projects easier (like a GUI for code reviews, bug tracking, etc.).
-
-To contribute to AMP you'll use Git to grab a copy of the code from the [amphtml Git repository on GitHub](https://github.com/ampproject/amphtml), make changes locally and push your changes back up to your own Git repository on GitHub so you can get your code changes reviewed and merged into the amphtml codebase.
-
-# Set up your GitHub account and Git
-
-[Create a GitHub account](https://help.github.com/articles/signing-up-for-a-new-github-account/) if you don't already have one. Because AMP is an open source project you can create a free GitHub account (i.e. click "Join GitHub for free" on the pricing page you end up on). Once your account is created set up [two-factor authentication](https://help.github.com/articles/about-two-factor-authentication/) for your account.
-
-After you are done setting up your GitHub account [install and set up Git](https://help.github.com/articles/set-up-git/). You'll download and install Git, perform some basic configuration and then set up authentication for talking to GitHub. Although the authentication instructions suggest HTTPS is recommended, **you should follow the "Connecting over SSH" instructions instead**. SSH is required for two-factor authentication which we recommend you use. (The rest of these instructions will assume you are using SSH.)
-
-# Get a copy of the amphtml code
-
-## Understanding repositories
-
-One of the central concepts of Git is the _repository_, where files are stored and kept track of. You can browse [the amphtml repository](https://github.com/ampproject/amphtml) using the GitHub web UI.
-
-The process of getting the amphtml code, making changes, getting your changes reviewed and then having your changes become a part of AMP involves _three_ repositories:
-
-- The first repository is the **amphtml repository** mentioned above. When you want to fix a bug or add a feature to AMP your goal is to get your code to become part of this repository (_merged_ in Git terms). The amphtml repository is an example of a _remote_ repository because it's stored in a server that your Git client connects to.
-
-- You'll create a **_fork_ of the amphtml repository** on GitHub before you make your first change. This creates your own complete copy of all of the files from the amphtml repository which gives you a place to put your changes without affecting other people's work. Since your fork is on GitHub's servers this is also a _remote_ repository. Once you create your fork you'll be able to browse a copy of all of the files on the Web UI at `https://github.com/<your username>/amphtml`.
-
-- In general you won't be making changes directly on your fork on GitHub since GitHub provides very limited edit and build capabilities. Instead you'll create a copy of your fork in a **_local_ repository** which will download all of the amphtml files to your computer. This is where you'll typically be building AMP, making changes, testing them out, etc.
-
-If you are new to Git it may seem surprising that there are three different repositories involved but each one serves its purpose. Here's how they interact in a typical scenario:
-
-- You'll make changes on your computer (your local repository).
-
-- When you're done you'll push these changes to your fork on GitHub so that others can see your changes and review them before they become part of the amphtml repository.
-
-- When the changes have been approved by someone with permission to do so, that person will handle merging your changes from your GitHub fork to the amphtml repository.
-
-Note that each of these repositories has a complete copy of the entire amphtml codebase. If your local repository is on your computer and you lose your internet connection you'll still be able to make changes to any file in your local repository. Part of the workflow for Git that we'll go through is how you keep these three repositories in sync.
-
-One thing that might put your mind at ease: if you aren't in a [role](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#roles) that lets you make changes to the amphtml repository directly any changes you make will only affect you. So go ahead and try out different Git commands without worrying you're going to break things for other people!
-
-## Creating your GitHub fork and your local repository
-
-To create your fork on GitHub and your local copy of that fork:
-
-- Create a fork of the amphtml repository on GitHub by going to [https://github.com/ampproject/amphtml](https://github.com/ampproject/amphtml) and clicking the "Fork" button near the top. Your GitHub fork will now be visible at `https://github.com/<your username>/amphtml`. During local development, this will be referred to by `git` as `origin`.
-
-- Create your local copy (or _clone_) of your fork:
-
-  - go to a local directory on your computer where you want to put a copy of the code, e.g. `~/src/ampproject`
-
-  - run the `git clone` command using the address for your remote repository (your GitHub fork):
-
-    ```sh
-    git clone git@github.com:<your username>/amphtml.git
-    ```
-
-    (Note that this is the SSH address for your GitHub fork since we assume you've set up SSH for your account as we recommended. You can always find the SSH and HTTPS addresses of your GitHub fork by clicking the "Clone or download" button on your GitHub fork page.)
-
-After running the command you'll see something like `Receiving objects` and a progress indicator; this is actually downloading all of the files in the repository to your computer.
-
-Once the clone is done you can browse around your newly created local directories and convince yourself that they're the same as what you see on the remote amphtml repository and on your GitHub fork.
-
-# Set up aliases for the remote Git repositories
-
-As described in the previous section you have three repositories you are working with. It can be helpful to setup aliases to refer to the remote repositories so you don't have to remember their full addresses. You'll be using these aliases a lot in Git commands.
-
-The `git clone` command you ran above automatically set up one alias for you. From the local amphtml directory the git clone command created, run
-
-```sh
-git remote -v
-```
-
-and you will see
-
-```sh
-origin git@github.com:<your username>/amphtml.git
-```
-
-This indicates that the alias _origin_ can be used to refer to your GitHub fork remote repository.
-
-You should also set an alias for the remote amphtml repository since you'll be referring to that in some Git commands. The convention is to use the alias _upstream_ for this repository. The address for the amphtml repository looks a lot like the address for your GitHub fork except your username is replaced by `ampproject`.
-
-```sh
-git remote add upstream git@github.com:ampproject/amphtml.git
-```
-
-Now run `git remote -v` again and notice that you have set up your upstream alias.
-
-Each branch of your local Git repository can track a branch of a remote repository. Right now, your local `master` branch is tracking `origin/master`, which corresponds to the `master` branch of your GitHub fork. You don't actually want this, though; the upstream `master` branch is constantly being updated, and your fork's `master` branch will rapidly become outdated. Instead, it's best to make your local `master` branch track the upstream `master` branch. You can do this like so:
-
-```sh
-git fetch upstream master
-git branch -u upstream/master master
-```
-
-# Building AMP and starting a local server
-
-Now that you have all of the files copied locally you can actually build the code and run a local server to try things out. We use Node.js, the Yarn package manager, Closure Compiler, and the Gulp build system to build amphtml and start up a local server that lets you try out your changes.
-
-- Install the latest LTS version of [Node.js](https://nodejs.org/) (which includes npm). If you're on Mac or Linux, an easy way to install Node.js is with `nvm`: [here](https://github.com/creationix/nvm).
-
-  ```sh
-  nvm install --lts
-  ```
-
-- Install the stable version of [Yarn](https://yarnpkg.com/) (Mac and Linux: [here](https://yarnpkg.com/en/docs/install#alternatives-stable), Windows: [here](https://yarnpkg.com/lang/en/docs/install/#windows-stable))
-
-  ```sh
-  curl -o- -L https://yarnpkg.com/install.sh | bash
-  ```
-
-  An alternative to installing `yarn` is to invoke each Yarn command in this guide with `npx yarn` during local development. This will automatically use the current stable version of `yarn`.
-
-- Closure Compiler is automatically installed by Yarn, but it requires Java 8 which you need to install separately. AMP's version of Closure Compiler won't run with newer versions of Java. Download an installer for Mac, Linux or Windows [here](https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html).
-
-  - Note: If you are using Mac OS and have multiple versions of Java installed, make sure you are using Java 8 by adding this to `~/.bashrc`:
-
-  ```sh
-  export JAVA_HOME=`/usr/libexec/java_home -v 1.8`
-  ```
-
-- If you have a global install of [Gulp](https://gulpjs.com/), uninstall it. (Instructions [here](https://github.com/gulpjs/gulp/blob/v3.9.1/docs/getting-started.md). See [this article](https://medium.com/gulpjs/gulp-sips-command-line-interface-e53411d4467) for why.)
-
-  ```sh
-  yarn global remove gulp
-  ```
-
-- Install the [Gulp](https://gulpjs.com/) command line tool, which will automatically use the version of `gulp` packaged with the the amphtml repository. (instructions [here](https://github.com/gulpjs/gulp/blob/v3.9.1/docs/getting-started.md))
-
-  ```sh
-  yarn global add gulp-cli
-  ```
-
-  An alternative to installing `gulp-cli` is to invoke each Gulp command in this guide with `npx gulp` during local development. This will also use the version of `gulp` packaged with the amphtml repository.
-
-- In your local repository directory (e.g. `~/src/ampproject/amphtml`), install the packages that AMP uses by running
-  ```
-  yarn
-  ```
-  You should see a progress indicator and some messages scrolling by. You may see some warnings about optional dependencies, which are generally safe to ignore.
-
-Now whenever you're ready to build amphtml and start up your local server, simply go to your local repository directory and run:
-
-```sh
-gulp
-```
-
-Running the `gulp` command will start up a Node.js server listening on port 8000. Once you see a message like `Finished 'default'` you can access the local server in your browser at [http://localhost:8000](http://localhost:8000).
-
-You can browse the [http://localhost:8000/examples](http://localhost:8000/examples) directory to see some demo pages for various AMP components and combination of components. When a page is visited, the JS files and extensions used by the page will get lazily built and served.
-
-Note that by default each of the pages in the /examples directory uses the unminified AMP JavaScript from your local server. You can also change which JS to load from local server by hitting the `/serve_mode=<mode>` endpoint:
-
-- [http://localhost:8000/serve_mode=default](http://localhost:8000/serve_mode=default)
-
-  This is the default. Unminified AMP JavaScript is served from the local server. For local development you will usually want to serve unminified JS to test your changes.
-
-- [http://localhost:8000/serve_mode=compiled](http://localhost:8000/serve_mode=compiled)
-
-  Minified AMP JavaScript is served from the local server. This is only available after running `gulp dist --fortesting`.
-
-- [http://localhost:8000/serve_mode=cdn](http://localhost:8000/serve_mode=cdn)
-
-  Minified AMP JavaScript is served from `cdn.ampproject.org`.
-
-- http://localhost:8000/serve_mode=<RTV_NUMBER>
-
-  E.g. http://localhost:8000/serve_mode=001907161745080
-
-  Minified AMP JavaScript is served from `cdn.ampproject.org/rtv/<RTV_NUMBER>`, the RTV build from the given RTV number.
-
-When you're ready to make changes, you'll want to follow the steps below for creating a branch, testing and sending your changes for review.
-
-The exact changes you'll be making will depend on the issue/feature you are working on. If you aren't sure where to start, ask for suggestions on the GitHub issue tracking the work you are doing or reach out to the community as described in [How to get help](#how-to-get-help).
-
-# Create a Git branch
-
-You may have noticed that the files in your local repository are editable which makes it tempting to start making your changes right away. The typical Git workflow, however, takes advantage of one of the best features of Git: branches.
-
-Branches let you work on multiple different things in your repository in parallel. For example you can have one branch where you're fixing a bug, another branch where you're implementing a new feature and yet another branch where you're just doing some exploratory work. These branches co-exist in the same repository so there's no need to go through the forking and cloning steps described earlier every time you want to make a change.
-
-By default you'll have a branch named _master_. You can see this if you run the command `git branch` which lists the branches in your local repository.
-
-Although you could do work on the master branch, most people choose to leave the master branch unchanged and create other branches to actually do work in. Creating a branch is easy; simply run:
-
-```sh
-git checkout -b <branch_name> master
-```
-
-This will move you to the new branch, which uses `master` as its start point, meaning that it will start out containing the same files as `master`. You can then start working in the new branch.
-
-(You can use a different branch as a start point, like if you want to make one branch based on another. Generally, though, you want `master` as your start point. If you omit the start point, Git will use whichever branch you're currently on.)
-
-Whenever you want to move to a different branch, run the checkout command:
-
-```sh
-git checkout <branch_name>
-```
-
-You can see a list of your branches and which one you're currently in by running:
-
-```sh
-git branch
-```
-
-Note that currently the branch you just created only exists in your local repository. If you check the list of branches that exist on your GitHub fork at `https://github.com/<your username>/amphtml/branches/yours`, you won't see this new branch listed. Later on when we want to make the changes in your branch visible to others (e.g. so you can do a pull request) we'll push this branch to your GitHub fork.
-
-# Pull the latest changes from the amphtml repository
-
-Since your local repository is just a copy of the amphtml repository it can quickly become out of date if other people make changes to the amphtml repository. Before you start making changes you'll want to make sure you have the latest version of the code; you'll also want to do this periodically during development, before sending your code for review, etc.
-
-In the workflow we will be using you'll go to the master branch on your local repository and pull the latest changes in from the remote amphtml repository's master branch. (Remember that you set up the alias _upstream_ to refer to the remote amphtml repository, and you set your local `master` branch to track `upstream/master`.)
-
-```sh
-# make sure you are in your local repo's master branch
-git checkout master
-
-# pull in the latest changes from the remote amphtml repository
-git pull
-```
-
-If there have been any changes you'll see the details of what changed, otherwise you'll see a message like `Already up-to-date`.
-
-After running that `git pull` command your local master branch has the latest files, but your other local branches won't get automatically updated. To get a local branch in sync:
-
-```sh
-# go to the branch you want to sync
-git checkout <branch name>
-
-# bring the latest changes from your master branch into this branch
-git merge master
-```
-
-Since you just ran the `git pull` in your master branch it has the latest changes from the remote amphtml repository so running `git merge master` in your other branch effectively brings the latest changes from the remote amphtml repository to this other branch.
-
-If there are changes that conflict with changes on your branch (e.g. someone modified a file that you're working on) you'll be prompted to resolve them at this point.
-
-# Edit files and commit them
-
-The common workflow for making changes to files in Git is:
-
-- edit some files using your favorite editor
-
-- if your code requires a new dependency, run `yarn add --exact [--dev] <packagename>`, which will automatically update `package.json` and `yarn.lock`
-
-  - If it is a build-time dependency, use the `--dev` flag
-  - If it is a runtime dependency, add it to `build-system/compile/sources.js`
-
-- if you manually edited `package.json`, run `yarn` to install the dependency and generate an updated `yarn.lock` file
-
-- tell Git that you care about these changes by _staging_ them using the `git add` command
-
-- create a checkpoint (called a _commit_) that bundles together the changes you've staged by using the `git commit` command
-
-Git commits bundle together related changes into a logical unit. (If you're familiar with some other source control systems this terminology may make you think that when you create a commit you're "checking in" your code to the amphtml repository; that's _not_ what a Git commit is.)
-
-You can think of a commit as a checkpoint in your branch. It's a good idea to create a commit when you reach a point in your change that you might want to get back to. You will at least have to create a commit before syncing your changes to another repository (i.e. your GitHub fork) and requesting a code review.
-
-Let's walk through creating a commit after editing a file. First, go to the branch you created earlier:
-
-```sh
-git checkout <branch name>
-```
-
-Edit a file in this branch using your favorite editor. After editing the file, run
-
-```sh
-git status
-```
-
-and you should see the file you modified in a section that says `Changes not staged for commit` along with some helpful suggestions for what to do next.
-
-Git knows that there's a modified file, but isn't sure what you want to do with it. (In Git terms, this file is _unstaged_.) You have to tell Git that this is a change you care about by using the `git add` command.
-
-```sh
-git add <filename>
-```
-
-Now run `git status` again and you'll see the file listed under a `Changes to be committed` section.
-
-Since you're done with changes to that file, go ahead and create a commit:
-
-```sh
-git commit -m "<a brief description of your commit>"
-```
-
-Now run `git status` again, and you'll see the message `nothing to commit` and `your branch is ahead of 'origin/master' by 1 commit`.
-
-Note that you can optionally skip using `git add` commands and just use the `git commit -a` flag to say "add all of the modified/deleted files to this commit," e.g.
-
-```sh
-git commit -a -m "<a brief description of your commit>"
-```
-
-Note that you _can_ add changes into an existing commit but that opens up some additional Git concepts that you don't really need to make a contribution.
-
-## Code quality and style
-
-AMP uses the following tools for code quality and style:
-
-- [Eslint](https://eslint.org/) is used to ensure the code quality of JS files.
-  - Default rules can be found in [.eslintrc.js](../.eslintrc.js) files across the repo.
-  - Custom rules can be found in [build-system/eslint-rules/](../build-system/eslint-rules/index.js).
-- [Prettier](https://prettier.io/) is used to standardize the code style and formatting of JS files and several non-JS files.
-  - Default and file-specific rules can be found in [.prettierrc](../.prettierrc).
-
-To easily ensure code quality and style during development, here are some recommendations:
-
-- Use a code editor with Eslint and Prettier support.
-- [Here](https://eslint.org/docs/user-guide/integrations#editors) is a list of editors with Eslint extension support.
-- [Here](https://prettier.io/docs/en/editors.html) is a list of editors with Prettier extension support.
-- Set your editor to automatically format your code on save.
-
-### Workflow for Visual Studio Code
-
-Several AMP developers use [Visual Studio Code](https://code.visualstudio.com/). Here is the recommended workflow to automatically fix your code as you edit it:
-
-#### To automatically fix JS files on save
-
-- Install the [Eslint plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).
-- The `eslint.autoFixOnSave` setting is already enabled for the project in [.vscode/settings.json](../.vscode/settings.json), and will cause all JS files to automatically get formatted on save.
-
-#### To automatically fix non-JS files on save
-
-- Install the [Prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).
-- Install the [JSON5 syntax plugin](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-json5). (Used by `OWNERS` files. VS Code does not natively support it.)
-- Language and file level settings are already enabled for the project in [.vscode/settings.json](../.vscode/settings.json), and will cause several non-JS files to automatically get formatted on save.
-
-### Manually fixing code
-
-Alternatively, you can manually fix most quality and style errors in your code by running these two commands before pushing commits to your GitHub branch. (These commands edit your files in-place, so make sure you commit before running them.)
-
-For JS files:
-
-```sh
-gulp lint --local_changes --fix
-```
-
-For non-JS files:
-
-```sh
-gulp prettify --local_changes --fix
-```
-
-# Testing your changes
-
-Before sending your code changes for review, please make sure that all of the affected tests are passing. You may be expected to add/modify some tests as well.
-
-Note: You can automatically run critical checks before `git push` by enabling our pre-push hook. To do so, run `./build-system/enable-git-pre-push.sh`.
-
-## Running tests locally
-
-To run the tests that are affected by the changes on your feature branch:
-
-```sh
-gulp unit --local_changes
-```
-
-By default, all tests are run on Chrome. Pass one of the following flags to run tests on a different browser: `--firefox`, `--safari`, `--edge`, `--ie`.
-
-If you need help with fixing failing tests, please ask on the GitHub issue you're working on or reach out to the community as described in [How to get help](#how-to-get-help).
-
-## Running Travis CI checks locally
-
-To avoid repeatedly waiting for Travis to run all pull-request checks, you can run them locally:
-
-```sh
-gulp pr-check
-```
-
-Notes:
-
-- This will force a clean build and run all the PR checks one by one.
-- Just like on Travis, a failing check will prevent subsequent checks from being run.
-- The `gulp visual-diff` check will be skipped unless you have set up a Percy account as described in the [Testing](TESTING.md#running-visual-diff-tests-locally) guide.
-- Unit and integration tests will be run on local Chrome unless you have set up a Sauce Labs account as described in the [Testing](TESTING.md#testing-on-sauce-labs) guide.
-
-## Adding tests
-
-The `amphtml` testing framework uses the [Mocha](https://mochajs.org/), [Chai](http://chaijs.com/) and [Sinon](http://sinonjs.org/) libraries. You will generally be expected to add tests to verify correctness and to prevent regressions.
-
-Existing components will usually have existing tests that you can follow as an example. For example, the [amp-video](../extensions/amp-video/amp-video.md) component has tests in [test/test-amp-video.js](../extensions/amp-video/0.1/test/test-amp-video.js).
-
-To run tests in a single file, use `gulp unit --files=<path>`:
-
-```sh
-gulp unit --files=extensions/amp-youtube/0.1/test/test-amp-youtube.js
-```
-
-To run tests in multiple files, use `gulp unit --files=<path-1> --files=<path-2>`:
-
-```sh
-gulp unit --files=extensions/amp-story/1.0/test/test-amp-story-embedded-component.js --files=extensions/amp-story/1.0/test/test-amp-story-hint.js
-```
-
-Testing tips:
-
-- Use Mocha's [`.only()`](https://mochajs.org/#exclusive-tests) feature to exclusively run certain test-cases or suites.
-- Add `--watch` to your `gulp unit` command to automatically re-run tests on code changes.
-
-For more help, see [How to get help](#how-to-get-help).
-
-# Push your changes to your GitHub fork
-
-Up to this point you've been making changes in a branch on your local repository. Those changes aren't visible anywhere else--not even your GitHub fork--so if you want other people to see your changes you will need to push your branch to your GitHub fork. This is a necessary step to request a code review (known as a pull request) and to ultimately get your changes added to the amphtml repository.
-
-Before pushing your changes, make sure you have the latest changes in the amphtml repository on your branch by running the commands we described above:
-
-```sh
-git checkout master
-git pull
-git checkout <branch name>
-git merge master
-```
-
-Now push your changes to `origin` (the alias for your GitHub fork):
-
-```sh
-git push -u origin <branch name>
-```
-
-`-u origin <branch name>` tells Git to create a remote branch with the specified name in `origin` and to make your local branch track that remote branch from now on. You only have to do this the first time you push each branch. For subsequent pushes on the same branch, you can use a shorter command:
-
-```sh
-git push
-```
-
-The changes you've made are now visible on GitHub! Go to your fork on GitHub:
-
-```http
-https://github.com/<your username>/amphtml
-```
-
-If you recently pushed the branch you will see a message bar at the top that lists your recently pushed branches next to a convenient "Compare & pull request" button.
-
-Instead of using that button take a look at the "Branch" dropdown on the top left. Click it and then select the branch you just pushed. This will take you to your branch on GitHub:
-
-```http
-https://github.com/<your username>/amphtml/tree/<branch name>
-```
-
-Browse around and find the file(s) you modified; you'll see that these match the changes you made in your local repository since you ran `git push` earlier.
-
-If you make further changes in your local repository on the same branch they will _not_ automatically be reflected on your GitHub fork. You will need to create a commit and push your changes again using the same commands as above.
-
-Note that you _can_ edit files in your branch directly on GitHub using the web UI. For simple changes requested in a pull request (e.g. fixing a typo in a comment) this may be okay, but in general it's best to make the changes in your local repository and push them back up to GitHub to avoid confusion.
-
-# Send a Pull Request (i.e. request a code review)
-
-In order for your changes to become part of the amphtml repository, you will need to get your [code reviewed](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#code-review-and-approval) via a Pull Request (PR). In fact you won't actually merge your code into the amphtml repository directly; after your code has been reviewed [someone with the permission to modify the amphtml repository](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#roles) will handle the merge for you.
-
-Once your code is ready for a review, go to [https://github.com/ampproject/amphtml](https://github.com/ampproject/amphtml) and click on the "Compare & pull request" button on the "recently pushed branches" banner. If that banner isn't visible, go to your GitHub fork at
-`https://github.com/<username>/amphtml`, use the Branch dropdown to select the branch that contains the changes you want reviewed and press the "New pull request" button.
-
-On the "Open a pull request" page, you will see dropdowns at the top indicating the proposed merge. It will look something like:
-
-```sh
-amproject/amphtml / master … <username>/amphtml / <branch name>
-```
-
-Below this are text boxes where you can provide a title and description for your pull request. Please follow the guidelines in the template for providing a good title and description.
-
-In your PR description or comments refer to any GitHub issues that your PR is addressing. This will let people reviewing your PR know what issue your change is addressing and let anyone watching the issue know that there's a PR for it. You can do this by including the text `issue #<your issue number>` in the description/comment. If your PR completely fixes the issue, make this `fixes #<your issue number>` instead, which will also cause the issue to be closed once your PR is merged.
-
-You will need to find a [Reviewer and Owner](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#code-review-and-approval) to review your code and approve it. When you find someone to review your code, cc them on the Pull Request (by adding a line "/cc @username", e.g. "/cc @mrjoro").
-
-When you're new to contributing to AMP it can be tricky to figure out who should review your code. In general if you've been working with someone in the community on your change, they can likely review your code or know who can review it. The [people who previously changed the files you're changing](https://help.github.com/en/articles/tracking-changes-in-a-file) are also good candidates for reviewing your change. If you aren't sure who to ask to review your code, the steps for [finding a guide](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#find-a-guide) can also work for finding a reviewer for your change.
-
-When you're done click "Create pull request." This will bring you to your Pull Request page where you can track progress, add comments, etc.
-
-On the Pull Request page you can see that a few checks are running:
-
-- The tests are being run on [Travis](https://travis-ci.org/ampproject/amphtml/pull_requests)
-
-- The system is verifying that you have signed a CLA (Contributor License Agreement). If this is your first time submitting a Pull Request for AMP on GitHub you'll need to sign a CLA. (Make sure the email address you use to sign the CLA is the same one that you configured Git with.) See details in the [Contributing code](../CONTRIBUTING.md#contributing-code) documentation.
-
-- Your code is going through static analysis by [LGTM](https://lgtm.com/projects/g/ampproject/amphtml/).
-
-- Visual diff tests that are run on Travis are being analyzed by [Percy](http://percy.io/ampproject/amphtml).
-
-If you don't hear back from your reviewer within 2 business days, feel free to ping the pull request by adding a comment.
-
-# Respond to Pull Request comments
-
-If your reviewer doesn't request any changes from you they may go ahead and merge your changes into amphtml. If they do this you're done since the reviewer will merge your changes for you! Once your code is merged in you can safely delete your branch.
-
-In the likely event that the reviewer has some comments, you'll need to respond to them.
-
-If the reviewer's comments involve changes in your code, you can make changes on the branch in your local repository in the same way you made your changes originally. When you run `git commit` after making these changes, you'll be creating a new commit. (There are ways to "squash" all of your changes into a single commit, but since you've already shared the previous commit in a pull request it's best to avoid that.)
-
-Remember that the changes you make in your local branch won't actually be visible to anyone (including your PR reviewer) until you push the changes up to your GitHub fork remote repository. You can follow the same steps you followed earlier in the [Push your changes to your GitHub fork](#push-your-changes-to-your-github-fork) section.
-
-You can respond to comments in the GitHub UI. When making comments, you will see a button to "Start a Review" which lets you group all of your comments and send them as a group.
-
-You can always get back to your open Pull Requests on GitHub at `https://github.com/ampproject/amphtml/pulls/<your username>`.
-
-# Delete your branch
-
-Creating, deleting and moving between branches in Git is cheap. Reusing branches for multiple unrelated changes can lead to a confusing branch history. For these reasons it's best to delete your branch once your PR using that branch has been approved and merged. (It can also be really satisfying to delete a branch after a particularly involved change.)
-
-GitHub offers a convenient "Delete branch" button on the PR page after the changes in your branch have been merged into the amphtml repository. You can click this button to delete your branch in the GitHub fork if you prefer, but you will also want to delete the branch in your local repository:
-
-```sh
-# go back to the master branch
-git checkout master
-
-# delete the branch in your local repository
-git branch -D <branch name>
-
-# delete the branch in your GitHub fork (if you didn't use the UI)
-git push -d origin <branch name>
-```
-
-# See your changes in production
-
-**Congratulations on making your first change to AMP!**
-
-If your change affected internal documentation, tests, the build process, etc. you can generally see your changes right after they're merged. If your change was to the code that runs on AMP pages across the web you'll have to wait for the change to be included in a release.
-
-AMP is pushed to production after undergoing testing. Generally, it takes about 1-2 weeks for a change to be live for all users. For more specific details on the timing of production releases, reference our [release schedule](release-schedule.md).
-
-**Once the push of the build that includes your change is complete all users of AMP will be using the code you contributed!**
-
-You can see whether your change made it into a given build on the [amphtml Releases page](https://github.com/ampproject/amphtml/releases). The build marked `Pre-release` is the version on the Experimental Channel and the build marked `Latest Release` is what is running in production. Your Pull Request will be listed in the first build that includes it; if you don't see your Pull Request listed it will likely be in the next build.
-
-You can set your browser to use the Experimental Channel build by enabling `experimental-channel` on the [AMP Experiments](https://cdn.ampproject.org/experiments.html) page. This will let you see how your changes will affect any AMP page before your changes are rolled out to all AMP pages. Note that this only affects the browser in which you enable the experiment.
-
-You can verify the AMP version your browser is using for a given page by looking at your browser's developer console. After loading an AMP page (e.g. [https://amp.dev](https://amp.dev)) the console will have a message like `Powered by AMP ⚡ HTML – Version <build number>`). The `<build number>` will match one of the build numbers on the [amphtml Releases page](https://github.com/ampproject/amphtml/releases).
-
-The [Release Schedule](release-schedule.md) doc has more details on the release process.
-
-# ⚡⚡⚡... (Next steps)
-
-Now that you know the process for making changes to AMP you already have most of the heavy lifting done. **We look forward to seeing your future [contributions](../CONTRIBUTING.md) to the project.** :)
-
-If you're looking for ideas on your next contribution feel free to reach out to anyone you worked with on your first contribution or let us know in the [#welcome-contributors](https://amphtml.slack.com/messages/welcome-contributors/) channel on Slack. (We'll send you an [invitation](https://docs.google.com/forms/d/e/1FAIpQLSd83J2IZA6cdR6jPwABGsJE8YL4pkypAbKMGgUZZriU7Qu6Tg/viewform?fbzx=4406980310789882877) if you're not already on the AMP Slack.)
-
-# Other resources
-
-This end-to-end guide provided enough details to get a basic understanding of a typical workflow for contributing code to the AMP open source project. If you find yourself wanting to know more there are a lot of resources available. Here are a few:
-
-- The ["Creating your first AMP Component" codelab](https://codelabs.developers.google.com/codelabs/creating-your-first-amp-component/index.html) provides step-by-step instructions for a common type of code contribution to AMP. Even if your project involves modifying an existing AMP component this codelab will give you an overview of how AMP components work.
-- GitHub has a lot of helpful introductory material, including:
-  - a [Hello World tutorial](https://guides.github.com/activities/hello-world/) that's a bit less in depth than this guide, but it covers things like creating a new repository and merging in code after a pull request
-  - the [Git cheat sheet](https://services.github.com/on-demand/downloads/github-git-cheat-sheet.pdf) from GitHub provides a quick reference to some common commands, including many we didn't cover in this guide (such as [diff](https://www.git-tower.com/learn/git/ebook/en/command-line/advanced-topics/diffs) and [log](https://git-scm.com/book/en/v2/Git-Basics-Viewing-the-Commit-History))
-  - a [Training & Guides video series](https://www.youtube.com/user/GitHubGuides)
-- The official [Git docs](https://git-scm.com/doc) have a lot of information including the [reference docs](https://git-scm.com/docs) and an online version of [Pro Git](https://git-scm.com/book/en/v2).
-- You may see discussions about the difference between rebasing and merging in Git, and we glossed over the details in this guide. If you're curious about the difference the Atlassian [Merging vs. Rebasing](https://www.atlassian.com/git/tutorials/merging-vs-rebasing) tutorial has a good explanation.
diff --git a/contributing/getting-started-quick.md b/contributing/getting-started-quick.md
deleted file mode 100644
index e63dae0f5e96b..0000000000000
--- a/contributing/getting-started-quick.md
+++ /dev/null
@@ -1,161 +0,0 @@
-<!---
-Copyright 2017 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.
--->
-
-# Getting Started: Quick Start
-
-## About this guide
-
-This Quick Start guide is the TL;DR version of the longer [end-to-end guide](getting-started-e2e.md) for people who don't want/need a longer explanation.
-
-## One-time Setup
-
-1. [Create a GitHub account](https://help.github.com/articles/signing-up-for-a-new-github-account/) if you don't already have one.
-2. Set up [2 factor auth](https://help.github.com/articles/about-two-factor-authentication/) for your GitHub account.
-3. [Install and set up Git](https://help.github.com/articles/set-up-git/); in the "Authenticating" step of that page use SSH instead of HTTPS.
-4. Install the latest LTS version of [Node.js](https://nodejs.org/) (which includes npm). An easy way to do so is with `nvm`. (Mac and Linux: [here](https://github.com/creationix/nvm), Windows: [here](https://github.com/coreybutler/nvm-windows))
-
-   ```shell
-   nvm install --lts
-   ```
-
-5. Install the stable version of [Yarn](https://yarnpkg.com/). (Mac and Linux: [here](https://yarnpkg.com/en/docs/install#alternatives-stable), Windows: [here](https://yarnpkg.com/lang/en/docs/install/#windows-stable))
-
-   ```shell
-   curl -o- -L https://yarnpkg.com/install.sh | bash
-   ```
-
-   An alternative to installing `yarn` is to invoke each Yarn command in this guide with `npx yarn` during local development. This will automatically use the current stable version of `yarn`.
-
-6. If you have a global install of [Gulp](https://gulpjs.com/), uninstall it. (Instructions [here](https://github.com/gulpjs/gulp/blob/v3.9.1/docs/getting-started.md). See [this article](https://medium.com/gulpjs/gulp-sips-command-line-interface-e53411d4467) for why.)
-
-   ```shell
-   yarn global remove gulp
-   ```
-
-7. Install the [Gulp](https://gulpjs.com/) command line tool, which will automatically use the version of `gulp` packaged with the the amphtml repository. (Instructions [here](https://github.com/gulpjs/gulp/blob/v3.9.1/docs/getting-started.md))
-
-   ```shell
-   yarn global add gulp-cli
-   ```
-
-   An alternative to installing `gulp-cli` is to invoke each Gulp command in this guide with `npx gulp` during local
-   development. This will also use the version of `gulp` packaged with the amphtml repository.
-
-8. Create your own fork of the [amphtml repository](https://github.com/ampproject/amphtml) by clicking "Fork" in the Web UI. During local development, this will be referred to by `git` as `origin`.
-
-9. Download your fork to a local repository.
-
-   ```shell
-   git clone git@github.com:<your username>/amphtml.git
-   ```
-
-10. Add an alias called `upstream` to refer to the main `ampproject/amphtml` repository. Go to the root directory of the
-    newly created local repository directory and run:
-
-    ```shell
-    git remote add upstream git@github.com:ampproject/amphtml.git
-    ```
-
-11. Fetch data from the `upstream` remote:
-
-    ```shell
-    git fetch upstream master
-    ```
-
-12. Set up your local `master` branch to track `upstream/master` instead of `origin/master` (which will rapidly become
-    outdated).
-
-    ```shell
-    git branch -u upstream/master master
-    ```
-
-## Branch (do this each time you want a new branch)
-
-Create and go to the branch:
-
-```shell
-git checkout -b <branch name> master
-```
-
-## Build AMP & run a local server
-
-1. Make sure you have the latest packages (after you pull): `yarn`
-1. Start the server: `gulp`
-1. Access your server at [http://localhost:8000](http://localhost:8000)
-1. Access your sample pages at [http://localhost:8000/examples](http://localhost:8000/examples)
-
-## Test AMP
-
-- Run the unit tests: `gulp unit` (doesn't build the runtime)
-- Run the integration tests: `gulp integration` (builds the runtime)
-- Run integration tests, but skip building after having done so previously: `gulp integration --nobuild`
-- Run the tests in a specified set of files: `gulp [unit|integration] --files=<test-files-path-glob>`
-- Add the `--watch` flag to `gulp [unit|integration]` to automatically re-run the tests when a file changes
-- To run only a certain set of Mocha tests, change `describe` to `describe.only` for the tests you want to run; combine this with `gulp [unit|integration] --watch` to automatically rerun your test when files are changed (but make sure to run all the tests before sending your change for review)
-
-## Create commits to contain your changes
-
-1. Edit files in your favorite editor
-2. Make sure your changes satisfy AMP's [code quality and style rules](getting-started-e2e.md#code-quality-and-style)
-3. If your code requires a new dependency, run `yarn add --dev --exact [packagename]`, which automatically updates `package.json` and `yarn.lock`
-   - If it is a build-time dependency, use the `--dev` flag
-   - If it is a runtime dependency, add it to `build-system/compile/sources.js`
-4. If you manually edited `package.json`, run `yarn` to install the dependency and generate an updated `yarn.lock` file
-5. Add each file you change: `git add <file>`
-6. Create a commit: `git commit -m "<your commit message>"`
-7. To avoid having to run `git add` on each file, you can use `git commit -a -m "<your commit message>"` instead.
-
-## Pull the latest changes
-
-1.  Check out the master branch: `git checkout master`
-2.  Pull the latest changes: `git pull`
-3.  Check out your branch: `git checkout <branch name>`
-4.  Merge the changes to your branch: `git merge master`
-
-    **Note**: You may need to resolve conflicting changes at this point.
-
-## Push your branch & create a Pull Request
-
-1.  Pull the latest changes as described above.
-2.  Push the changes:
-
-    ```shell
-    git checkout <branch name>
-    git push -u origin <branch name>
-    ```
-
-3.  Go to [https://github.com/ampproject/amphtml](https://github.com/ampproject/amphtml) and in the banner indicating you've recently pushed a branch, click the "Compare & pull request" (if this banner does not appear, go to your fork at `https://github.com/<your username>/amphtml`, choose your branch from the "Branch" dropdown and click "New pull request")
-4.  Make sure you've signed the [CLA](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#contributor-license-agreement) (using the same email address as your git config indicates)
-5.  [Find people to review your code](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#code-review-and-approval) and add them as a reviewer on the PR (if you can) or cc them (by adding `/cc @username` in the PR description/comment). If your run into any issues finding the reviewers or have any other questions, ping the [#contributing channel](https://amphtml.slack.com/messages/C9HRJ1GPN/) on [Slack](https://bit.ly/amp-slack-signup).
-6.  If a reviewer requests changes make them locally and then repeat the steps in this section to push the changes to your branch back up to GitHub again.
-7.  For pushes after the first, just use `git push`
-8.  If you don't get a new review within 2 business days, feel free to ping the pull request by adding a comment.
-9.  If you see visual diffs reported by [Percy](http://percy.io/ampproject/amphtml), click through the check on GitHub to access the results. Differences that are expected can be approved by one of your reviewers.
-10. Once approved your changes are merged into the amphtml repository by one of your reviewers.
-
-## Delete your branch after your changes are merged (optional)
-
-1.  Go to the master branch: `git checkout master`
-2.  Delete your local branch: `git branch -D <branch name>`
-3.  Delete the corresponding GitHub fork branch: `git push -d origin <branch name>`
-
-## See your changes in production
-
-- If your change affected internal documentation, tests, the build process, etc. you can generally see your changes right after they're merged.
-- If your change was to the code that runs on AMP pages across the web, you'll have to wait for the change to be included in a production release. Generally, it takes about 1-2 weeks for a change to be live for all users. See the [release schedule](release-schedule.md) for more specific details.
-- The [amphtml Releases page](https://github.com/ampproject/amphtml/releases) will list your PR in the first build that contains it. `Pre-release` is the build on the Experimental Channel, `Latest Release` is the build in production.
-- Opt in to using the Experimental Channel in a browser by enabling `experimental-channel` on the [AMP Experiments](https://cdn.ampproject.org/experiments.html) page.
-- Find the AMP version being used on a page in the developer console, i.e. `Powered by AMP ⚡ HTML – Version <build number>`.
diff --git a/contributing/git_helpers.sh b/contributing/git_helpers.sh
deleted file mode 100644
index ecb8c5f1b315c..0000000000000
--- a/contributing/git_helpers.sh
+++ /dev/null
@@ -1,69 +0,0 @@
-#!/bin/bash
-#
-# These scripts make it easy to perform some common Git operations.
-# You can copy the contents below into your .bash_profile.
-
-# Creates a new branch and then goes to that branch (checks it out).
-git_track() {
-  if [ $# -eq 0 ]
-    then
-      echo "You must specify the name of the branch to create."
-      return
-  fi
-  git branch --track $1 origin/master
-  echo "Checking out $1"
-  git checkout $1
-}
-
-# Deletes a branch.
-# (If you accidentally delete a branch, see https://gist.github.com/jbgo/1944238
-# for instructions on how to recover it.)
-git_delete_branch() {
-  if [ $# -eq 0 ]
-    then
-      echo "You must specify the name of the branch to delete."
-      return
-  fi
-  git checkout master
-  git branch -D $1
-  echo "Deleted local branch $1"
-  git push origin --delete $1
-  echo "Deleted remote branch origin:$1 (if it existed)"
-}
-
-# Syncs your local master branch to the HEAD of the "upstream" repository,
-# then pushes the updates to your remote master branch and the local
-# branch you ran this command from.
-git_sync() {
-  local branch_name=$(git symbolic-ref -q HEAD)
-  branch_name=${branch_name##refs/heads/}
-  branch_name=${branch_name:-HEAD}
-  echo "Checking out your master branch"
-  git checkout master
-  echo "Updating your local master branch with the latest changes (pulling upstream/master)"
-  git pull --rebase upstream master
-  git rebase -i
-  echo "Updating your remote repository with the latest changes (pushing origin/master)"
-  git push origin master -f
-  echo "Checking out $branch_name"
-  git checkout $branch_name
-  echo "Updating your local $branch_name branch"
-  git rebase master
-}
-
-# Pushes your changes from the current branch to your remote repository.
-# If the branch doesn't exist on the remote repository it will be created.
-git_push() {
-  local branch_name=$(git symbolic-ref -q HEAD)
-  branch_name=${branch_name##refs/heads/}
-  branch_name=${branch_name:-HEAD}
-  echo "Rebasing $branch_name"
-  git rebase -i
-  echo "Pushing your local branch to your remote repository (pushing origin/$branch_name)"
-  git push origin $branch_name -f
-}
-
-alias git_track=git_track
-alias git_delete_branch=git_delete_branch
-alias git_sync=git_sync
-alias git_push=git_push
diff --git a/contributing/good-first-issues-template.md b/contributing/good-first-issues-template.md
deleted file mode 100644
index 9008edd7e39a9..0000000000000
--- a/contributing/good-first-issues-template.md
+++ /dev/null
@@ -1,75 +0,0 @@
-<!--
-Copy this template into new Great First Issues and edit as needed.
--->
-<!--
-[Optional] Include this section if you think the issue is perfect for people
-who have never contributed to open source projects before.
--->
-
-### First Timers Only
-
-We know figuring out the process for contributing to an open source project can be intimidating, so we created this issue as a way for you to learn the ropes. (If you feel comfortable contributing to open source projects, please leave this issue for someone else.)
-
-<!--
-List knowledge/skills the contributor should already have before working on this bug (for example, knowledge of web components, Node.js internals, etc.).  New contributors can use this section to find bugs that match their existing skills.  This also serves as a filter that can reduce the amount of explanation you will need to do in the "Step by step" section.  Try to be only as restrictive as necessary and call out any nice-to-haves.
--->
-
-### What you will need to know
-
-<!--
-[Optional] If there is additional context that will help the contributor fix the bug add it here.  If this is redundant with other sections feel free to remove it.
--->
-
-### Background
-
-<!--
-Explain why fixing this bug/feature is important, i.e. why should the contributor care about fixing this?  Whose life will be made better by this fix?
--->
-
-### Motivation
-
-<!--
-Detailed steps for reproducing the bug.
-
-If this is a feature, change this to "The feature" and add a detailed description.
--->
-
-### The bug
-
-<!--
-Step-by-step instructions for the contributor to follow as they work through the bug.  Feel free to change any step that will make the steps more clear for this issue.  Make sure to replace the comment block below with the exact steps the contributor should follow.
--->
-
-### Step by step
-
-- [ ] Claim this issue by adding a comment below. Please only claim this bug if you plan on starting work in the next day or so. (If you [join the ampproject GitHub org](https://goo.gl/forms/T65peVtfQfEoDWeD3) we'll be able to assign this issue to you after you've claimed it.)
-- [ ] If you aren't too familiar with Git/GitHub, see the [Getting Started End-to-End Guide](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md) for [an intro to Git & GitHub,](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#intro-to-git-and-github) and [how to get a copy of the code](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#get-a-copy-of-the-amphtml-code). You can also refer to the [Quick Start Guide](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-quick.md) for the necessary setup steps with less explanation than the End-to-End guide.
-- [ ] Follow the instructions for [building AMP](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#building-amp-and-starting-a-local-server).
-- [ ] [Create a Git branch](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#create-a-git-branch) for making your changes.
-- [ ] [Sign the Contributor License Agreement](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#contributor-license-agreement) before creating a Pull Request. (If you are contributing code on behalf of a corporation start this process as early as possible.)
-<!--
-Add steps that are specific to the issue here, e.g. perhaps they should edit a test, run `gulp unit` or `gulp integration` to see it fails, change a file and then run test again to see that the new test succeeds?  Adjust the level of detail for the background you indicated the contributor should have.
--->
-- [ ] [Commit your changes](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#edit-files-and-commit-them) frequently.
-- [ ] [Push your changes to GitHub](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#push-your-changes-to-your-github-fork).
-<!--
-Ideally suggest a reviewer for the Pull Request; not knowing who to set as the reviewer can be confusing for new contributors.
--->
-- [ ] [Create a Pull Request](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#send-a-pull-request-ie-request-a-code-review). Mention `closes Issue <this issue number>` in the description.
-- [ ] [Respond to your reviewer's comments](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#respond-to-pull-request-comments) (if any).
-
-<!--
-If this issue is a change that won't go out with a push (e.g. a doc change, a fix to the build, etc.) update the sentence about how to see their change is live.
--->
-
-Once approved, your changes will be merged. **⚡⚡⚡Congrats on making your first contribution to AMP!⚡⚡⚡** You'll be able to see it [live across the web soon](https://github.com/ampproject/amphtml/blob/master/contributing/release-schedule.md)!
-
-Thanks, and we hope to see more contributions from you soon.
-
-### Questions?
-
-<!--
-Ideally provide a specific contact to @mention here as well
--->
-
-If you have questions ask in this issue or on your Pull Request (if you've created one) or see the [How to get help](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#how-to-get-help) section of the Getting Started guide.
diff --git a/contributing/release-schedule.md b/contributing/release-schedule.md
deleted file mode 100644
index cc6e0a6ac85ac..0000000000000
--- a/contributing/release-schedule.md
+++ /dev/null
@@ -1,113 +0,0 @@
-# Release Schedule
-
-- [Release Channels](#release-channels)
-  - [Nightly](#nightly)
-  - [Weekly](#weekly)
-    - [Experimental and Beta channels](#experimental-and-beta-channels)
-  - [Long-Term Stable (lts)](#long-term-stable-lts)
-- [Determining if your change is in a release](#determining-if-your-change-is-in-a-release)
-- [Release Cadence](#release-cadence)
-  - [Detailed schedule](#detailed-schedule)
-  - [Release Freezes](#release-freezes)
-
-A new release of AMP is pushed to all AMP pages every week on Tuesday. **Once a change in AMP is merged into the master branch of the amphtml repository, it will typically take 1-2 weeks for the change be live for all users.**
-
-## Release Channels
-
-The AMP runtime and extensions are provided through a variety of different _release channels_. Each channel serves a purpose for developers and for the AMP HTML Project itself. See the [release cadence section](#release-cadence) for a more detailed breakdown of how and when code from the [`ampproject/amphtml`](https://github.com/ampproject/amphtml) repository makes it into release builds.
-
-To determine if a PR has been included in any of the following release channels, look for the GitHub labels _PR Use: In Canary_, _PR Use: In Production_, or _PR Use: In LTS_ (see the section on [determining if your change is in a release](#Determining-if-your-change-is-in-a-release) for more details).
-
-### Nightly
-
-The **nightly** release channel is updated (as its name indicates) every weeknight. This process is automated, and there is no guarantee that any given nightly release is free of bugs or other issues. Each night after midnight (Pacific Time), the last "green" commit from the day is selected to be the release cutoff point. A green build indicates that all automated tests have passed on that build.
-
-The nightly release provides a mechanism to detect and resolve issues quickly and before they reach the more traffic-heavy _weekly_ release channels. It also serves to reduce the number of users affected by newly introduced issues.
-
-It is possible to opt into the **nightly** channel, to test pull requests that were merged in the past few days. See the [opt-in section](DEVELOPING.md#opting-in-to-pre-release-channels) in [DEVELOPING.md] for details.
-
-### Weekly
-
-The _weekly_ release channels are considered to be the primary "evergreen" release channels. Each week the **beta** release from the previous week is promoted to the **stable** release channel, and the last **nightly** release from the previous week is promoted to the **experimental** and **beta** release channels (see the [detailed schedule](#detailed-schedule)).
-
-There are two sets of build configurations used in creating release builds: the _canary_ configuration and the _production_ configuration. The **experimental** and **beta** release channels are built off of the same commit. However, the **experimental** channel uses the _canary_ configuration while the **beta** channel uses the _production_ configuration. The _canary_ configuration enables experimental components and features that may be turned off in _production_. It is possible to opt into the **experimental** or **beta** channels via the [experiments page](https://cdn.ampproject.org/experiments.html).
-
-The **stable** release channel is built with the _production_ configuration and served to most AMP traffic. Since the **beta** release channel is also built from the _production_ configuration, it represents the exact build which will become **stable** the following week (with the possibility of cherry-picks to fix last-minute issues; see [Contributing Code](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#Cherry-picks)).
-
-#### Beta and Experimental channels
-
-The _Beta_ and _Experimental Channels_ are pre-release candidates for the next Stable release of AMP. Every Tuesday (except for weeks where there is a [release freeze](#release-freezes)), last week's **nightly** is promoted to the developer opt-in channels for **beta** and **experimental**. Following a 1-day period where we verify that no feature or performance regressions were introduced in these channels, we promote this release on Wednesday to a small portion of traffic. This same release is then promoted to the **stable** channel on Tuesday the following week.
-
-It is possible to opt into these channels. See the [opt-in section](DEVELOPING.md#opting-in-to-pre-release-channels) in [DEVELOPING.md] for details.
-
-Opting into the _Beta Channel_ is intended for:
-
-- testing and playing with the version of the AMP runtime that will be released soon
-- using in Quality Assurance (QA) to ensure that your site is compatible with the next version of AMP
-
-The _Experimental Channel_ is intended for:
-
-- testing and playing with new features not yet available to all users
-- using in Quality Assurance (QA) to ensure that your site is compatible with upcoming features of AMP that are still under development
-
-The _Experimental Channel_ **may be less stable** and it may contain features not yet available to all users.
-
-### Long-Term Stable (lts)
-
-The **lts** release channel provides a previous **stable** build for one-month intervals. On the second Monday of each month, the current **stable** release is promoted to **lts**. This channel is not recommended for all AMP publishers. It is provided so that publishers who wish to perform a QA cycle on their website less frequently may do so by opting specific web pages into the **lts** channel (see the [**lts** readme](https://github.com/ampproject/amphtml/blob/master/contributing/lts-release.md)).
-
-In the event that the second Monday of the month falls on a holiday, the promotion will be performed after the end of the [release freeze](#release-freezes).
-
-Important: Publishers using the **lts** release channel should not use newly introduced features. Because of the longer cycle, the **lts** release may be as much as seven weeks behind the `HEAD` of [`ampproject/amphtml`](https://github.com/ampproject/amphtml). See the section on [determining if your change is in a release](#Determining-if-your-change-is-in-a-release) to validate if a change will be ready with your chosen release cycle.
-
-## Determining if your change is in a release
-
-[_Type: Release_ GitHub issues](https://github.com/ampproject/amphtml/labels/Type%3A%20Release) are used to track the status of current and past releases; from the initial cut, to testing via **experimantal**/**beta** channels, to eventual release via the **stable** and **lts** channels. Announcements about releases are made on the [AMP Slack #release channel](https://amphtml.slack.com/messages/C4NVAR0H3/) ([sign up for Slack](https://bit.ly/amp-slack-signup)).
-
-You can determine what changes are in a given build using one of the following:
-
-- The [_Type: Release_ GitHub issues](https://github.com/ampproject/amphtml/labels/Type%3A%20Release) for each release build will include a link to the specific [release page](https://github.com/ampproject/amphtml/releases) listing the changes contained in that release.
-- The [_PR Use: In Beta / Experimental_](https://github.com/ampproject/amphtml/issues?q=label%3A%22PR+use%3A+In+Beta+%2F+Experimental%22), [_PR Use: In Stable_](https://github.com/ampproject/amphtml/issues?utf8=%E2%9C%93&q=label%3A%22PR%20use%3A%20In%20Production%22), and [_PR Use: In LTS_](https://github.com/ampproject/amphtml/issues?utf8=%E2%9C%93&q=label%3A%22PR%20use%3A%20In%20LTS%22) labels are added to PRs when they've made it into a _weekly_ or **lts** build. There may be a delay between when the build is created and when the label is added.
-
-## Release Cadence
-
-We are intentionally cautious with our release cadence.
-
-In determining how often we should push new versions of AMP to everyone, we have to weigh many factors including:
-
-- stability for the millions of sites/billions of pages built using AMP
-- cache busting that might happen when we push a new version
-- the desire to get new features out quickly
-
-After considering all of these factors, we have arrived at the 1-2 week push cycle. Thus far, we have found this to be a reasonable compromise, but we will continue to evaluate all of these factors and may make changes in the future.
-
-### Detailed schedule
-
-We try to stick to this schedule as closely as possible, though complications may cause delays. You can track the latest status about any release in the [_Type: Release_ GitHub issues](https://github.com/ampproject/amphtml/labels/Type%3A%20Release) and the [AMP Slack #release channel](https://amphtml.slack.com/messages/C4NVAR0H3/) ([sign up for Slack](https://bit.ly/amp-slack-signup)).
-
-- Tuesday @ [11am Pacific](https://www.google.com/search?q=11am+pacific+in+current+time+zone): new **experimental** and **beta** release builds are created from the [latest master build that passes all of our tests](https://travis-ci.org/ampproject/amphtml/branches) and are pushed to users of AMP who opted into the [AMP Experimental Channel](#amp-experimental-and-beta-channels) or [AMP Beta Channel](#amp-experimental-and-beta-channels), respectively.
-- Wednesday: we check bug reports for _Experimental Channel_ and _Beta Channel_ users and if everything looks fine, we push the **beta** to 1% of AMP pages
-- Thursday-Monday: we continue to monitor error rates and bug reports for _Experimental Channel_ and _Beta Channel_ users and the 1% of pages with the **experimental**/**beta** builds
-- Tuesday the following week: the **beta** build is fully promoted to **stable** (i.e. all AMP pages will now use this build)
-
-### Release Freezes
-
-There are occasions when we will skip a release of AMP to production, known as a release freeze.
-
-If a one week release freeze is announced for Week N:
-
-- The previous week's release build remains in **experimental**/**beta** for an extra week, i.e. the release cut in Week N-1 is not pushed to **stable** in Week N as would normally be the case. Instead, it will be pushed to **stable** in Week N+1.
-- A new release build is _not_ made in the freeze week (Week N).
-- The normal schedule will resume in Week N+1, i.e. **experimental**/**beta** are cut in Week N+1 and promoted to **stable** in Week N+2.
-- If the **stable** release promoted during Week N-1 was originally scheduled to be promoted to **lts** during Week N, it will now be promoted to **lts** on the Monday of Week N+1.
-- **nightly** releases are still generated and promoted, as they are fully automated.
-
-A release freeze may happen due to:
-
-- Times when there are not enough people available to push the AMP release to **stable** and monitor it. Currently most of the people performing AMP releases are based in the United States, so this will usually be the weeks of the major US holidays of Independence Day (July 4), Thanksgiving (fourth Thursday in November), Christmas (25 December) and New Year's Eve/Day (December 31/January 1).
-- An emergency situation, such as a security or privacy issue as determined by the [Technical Steering Committee (TSC)](https://github.com/ampproject/meta-tsc) or the people performing the release.
-- Other situations when stability of the codebase is deemed to be particularly important as determined by the TSC.
-
-In all cases except emergencies the release freezes will be announced at least one month in advance.
-
-Note that unless otherwise announced a release freeze does not imply a code freeze. Code may still be written, reviewed and merged during a release freeze.
diff --git a/css/OWNERS b/css/OWNERS
index 32bfb745f963c..c2edd96d0e74a 100644
--- a/css/OWNERS
+++ b/css/OWNERS
@@ -1,11 +1,13 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [
-        {name: 'ampproject/wg-ui-and-a11y'},
+        {name: 'ampproject/wg-components'},
+        {name: 'ampproject/wg-bento'},
+        {name: 'ampproject/wg-performance'},
         {name: 'aghassemi', requestReviews: false},
         {name: 'camelburrito', requestReviews: false},
       ],
diff --git a/css/Z_INDEX.md b/css/Z_INDEX.md
index 9c3cc118c6c67..fa36aaeaf4253 100644
--- a/css/Z_INDEX.md
+++ b/css/Z_INDEX.md
@@ -1,144 +1,163 @@
-| selector                                                                                                | z-index    | file                                                             |
-| ------------------------------------------------------------------------------------------------------- | ---------- | ---------------------------------------------------------------- |
-| .i-amphtml-story-share-icon::before                                                                     | -1         | extensions/amp-story/0.1/amp-story-share.css                     |
-| amp-story-page .i-amphtml-story-page-open-attachment-icon::after                                        | -1         | extensions/amp-story/1.0/amp-story.css                           |
-| .i-amphtml-carousel-spacer                                                                              | -1         | extensions/amp-base-carousel/0.1/carousel.css                    |
-| .i-amphtml-story-media-query-matcher                                                                    | -1         | extensions/amp-story/1.0/amp-story.css                           |
-| .i-amphtml-story-consent-logo::before                                                                   | -1         | extensions/amp-story/1.0/amp-story-consent.css                   |
-| .i-amphtml-story-bookend-inner::before                                                                  | -1         | extensions/amp-story/1.0/amp-story-bookend.css                   |
-| .i-amphtml-story-access-logo::before                                                                    | -1         | extensions/amp-story/1.0/amp-story-access.css                    |
-| .i-amphtml-story-bookend-inner::before                                                                  | -1         | extensions/amp-story/0.1/amp-story-bookend.css                   |
-| .i-amphtml-story-consent-logo::before                                                                   | -1         | extensions/amp-story/0.1/amp-story-consent.css                   |
-| [i-amphtml-lbg-caption-state="expand"] + .i-amphtml-lbg-caption-mask                                    | 0          | extensions/amp-lightbox-gallery/0.1/lightbox-caption.css         |
-| .amp-video-docked-placeholder-background                                                                | 0          | extensions/amp-video-docking/0.1/amp-video-docking.css           |
-| amp-story-page                                                                                          | 0          | extensions/amp-story/0.1/amp-story.css                           |
-| .i-amphtml-story-consent-content                                                                        | 0          | extensions/amp-story/1.0/amp-story-consent.css                   |
-| .i-amphtml-byside-content-loading-container .i-amphtml-byside-content-loading-animation:after           | 0          | extensions/amp-byside-content/0.1/amp-byside-content.css         |
-| amp-story-page                                                                                          | 0          | extensions/amp-story/1.0/amp-story.css                           |
-| .i-amphtml-story-access-content                                                                         | 0          | extensions/amp-story/1.0/amp-story-access.css                    |
-| 0%                                                                                                      | 0          | extensions/amp-byside-content/0.1/amp-byside-content.css         |
-| .i-amphtml-story-consent-content                                                                        | 0          | extensions/amp-story/0.1/amp-story-consent.css                   |
-| .i-amphtml-image-lightbox-container                                                                     | 0          | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css         |
-| .i-amphtml-story-background                                                                             | 0          | extensions/amp-story/0.1/amp-story-desktop.css                   |
-| .i-amphtml-story-background                                                                             | 0          | extensions/amp-story/1.0/amp-story-desktop-panels.css            |
-| .i-amphtml-image-lightbox-viewer-image                                                                  | 1          | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css         |
-| .i-amphtml-story-background.active                                                                      | 1          | extensions/amp-story/1.0/amp-story-desktop-panels.css            |
-| .i-amphtml-image-slider-label-wrapper                                                                   | 1          | extensions/amp-image-slider/0.1/amp-image-slider.css             |
-| .i-amphtml-image-slider-right-mask                                                                      | 1          | extensions/amp-image-slider/0.1/amp-image-slider.css             |
-| .i-amphtml-story-background-overlay::after                                                              | 1          | extensions/amp-story/1.0/amp-story-desktop-panels.css            |
-| .i-amphtml-layout-size-defined > [fallback]                                                             | 1          | css/ampdoc.css                                                   |
-| .i-amphtml-story-background-overlay                                                                     | 1          | extensions/amp-story/1.0/amp-story-desktop-panels.css            |
-| .i-amphtml-lbg-caption-scroll                                                                           | 1          | extensions/amp-lightbox-gallery/0.1/lightbox-caption.css         |
-| [i-amphtml-lbg-caption-state="clip"] + .i-amphtml-lbg-caption-mask                                      | 1          | extensions/amp-lightbox-gallery/0.1/lightbox-caption.css         |
-| .i-amphtml-loading-container                                                                            | 1          | css/ampdoc.css                                                   |
-| .i-amphtml-carousel-arrow-next-slot                                                                     | 1          | extensions/amp-base-carousel/0.1/amp-base-carousel.css           |
-| .i-amphtml-carousel-arrow-prev-slot                                                                     | 1          | extensions/amp-base-carousel/0.1/amp-base-carousel.css           |
-| .amp-video-eq                                                                                           | 1          | css/video-autoplay.css                                           |
-| .i-amphtml-story-consent-actions                                                                        | 1          | extensions/amp-story/1.0/amp-story-consent.css                   |
-| i-amphtml-video-mask                                                                                    | 1          | css/video-autoplay.css                                           |
-| .i-amphtml-story-hint-container .i-amphtml-story-hint-tap-button-icon                                   | 1          | extensions/amp-story/0.1/amp-story-hint.css                      |
-| .i-amphtml-glass-pane                                                                                   | 1          | extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css         |
-| amp-story-page[active]                                                                                  | 1          | extensions/amp-story/1.0/amp-story.css                           |
-| .i-amphtml-story-bookend-fullbleed::before                                                              | 1          | extensions/amp-story/0.1/amp-story-bookend.css                   |
-| .i-amphtml-expanded-mode .i-amphtml-embedded-component.i-amphtml-expanded-component                     | 1          | extensions/amp-story/1.0/amp-story.css                           |
-| amp-story-page[active]                                                                                  | 1          | extensions/amp-story/0.1/amp-story.css                           |
-| .i-amphtml-story-consent-actions                                                                        | 1          | extensions/amp-story/0.1/amp-story-consent.css                   |
-| .i-amphtml-story-page-attachment-header                                                                 | 1          | extensions/amp-story/1.0/amp-story-page-attachment-header.css    |
-| .i-amphtml-layout-size-defined > [placeholder]                                                          | 1          | css/ampdoc.css                                                   |
-| .i-amphtml-story-hint-container .i-amphtml-story-hint-tap-button-icon                                   | 1          | extensions/amp-story/1.0/amp-story-hint.css                      |
-| .i-amphtml-story-background-overlay                                                                     | 1          | extensions/amp-story/0.1/amp-story-desktop.css                   |
-| .i-amphtml-story-background-overlay::after                                                              | 1          | extensions/amp-story/0.1/amp-story-desktop.css                   |
-| .i-amphtml-story-background.active                                                                      | 1          | extensions/amp-story/0.1/amp-story-desktop.css                   |
-| .i-amphtml-image-lightbox-viewer                                                                        | 1          | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css         |
-| div.i-amphtml-story-top                                                                                 | 1          | extensions/amp-story/0.1/amp-story-desktop.css                   |
-| .i-amphtml-lbg-top-bar                                                                                  | 1          | extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.css     |
-| .i-amphtml-story-hint-container                                                                         | 2          | extensions/amp-story/1.0/amp-story-hint.css                      |
-| .i-amphtml-expanded-mode amp-story-grid-layer                                                           | auto       | extensions/amp-story/1.0/amp-story.css                           |
-| .i-amphtml-image-slider-hint                                                                            | 2          | extensions/amp-image-slider/0.1/amp-image-slider.css             |
-| .i-amphtml-story-consent-header                                                                         | 2          | extensions/amp-story/1.0/amp-story-consent.css                   |
-| .i-amphtml-story-consent-header                                                                         | 2          | extensions/amp-story/0.1/amp-story-consent.css                   |
-| amp-story-grid-layer                                                                                    | 2          | extensions/amp-story/1.0/amp-story.css                           |
-| amp-consent                                                                                             | initial    | extensions/amp-story/1.0/amp-story.css                           |
-| .i-amphtml-image-lightbox-caption                                                                       | 2          | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css         |
-| .i-amphtml-loader-moving-line                                                                           | 2          | css/ampdoc.css                                                   |
-| .i-amphtml-story-access-header                                                                          | 2          | extensions/amp-story/1.0/amp-story-access.css                    |
-| .i-amphtml-element > [overflow]                                                                         | 2          | css/ampdoc.css                                                   |
-| amp-story-grid-layer                                                                                    | 2          | extensions/amp-story/0.1/amp-story.css                           |
-| amp-consent                                                                                             | initial    | extensions/amp-story/0.1/amp-story.css                           |
-| .i-amphtml-story-bookend-active > amp-story-page[active]::after                                         | 2          | extensions/amp-story/0.1/amp-story.css                           |
-| .i-amphtml-story-bookend-active amp-story-page[active]::after                                           | 2          | extensions/amp-story/1.0/amp-story.css                           |
-| .i-amphtml-story-hint-container                                                                         | 2          | extensions/amp-story/0.1/amp-story-hint.css                      |
-| .i-amphtml-expanded-mode amp-story-grid-layer \*                                                        | auto       | extensions/amp-story/1.0/amp-story.css                           |
-| amp-story-page[active] .i-amphtml-story-page-open-attachment                                            | 3          | extensions/amp-story/1.0/amp-story.css                           |
-| .i-amphtml-image-slider-bar                                                                             | 3          | extensions/amp-image-slider/0.1/amp-image-slider.css             |
-| amp-story-cta-layer                                                                                     | 3          | extensions/amp-story/0.1/amp-story.css                           |
-| amp-story-cta-layer                                                                                     | 3          | extensions/amp-story/1.0/amp-story.css                           |
-| .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="1"][amp-access-hide]::before | 4          | extensions/amp-story/1.0/amp-story-desktop-panels.css            |
-| amp-story-page-attachment                                                                               | 4          | extensions/amp-story/1.0/amp-story-page-attachment.css           |
-| .i-amphtml-byside-content-loading-container .i-amphtml-byside-content-loading-animation:before          | 9          | extensions/amp-byside-content/0.1/amp-byside-content.css         |
-| 100%                                                                                                    | 9          | extensions/amp-byside-content/0.1/amp-byside-content.css         |
-| .amp-carousel-button                                                                                    | 10         | extensions/amp-carousel/0.1/amp-carousel.css                     |
-| amp-date-picker[mode="overlay"] .i-amphtml-date-picker-container                                        | 10         | extensions/amp-date-picker/0.1/amp-date-picker.css               |
-| .i-amphtml-autocomplete-results                                                                         | 10         | extensions/amp-autocomplete/0.1/amp-autocomplete.css             |
-| .i-amphtml-story-spinner                                                                                | 10         | extensions/amp-story/1.0/amp-story.css                           |
-| .i-amphtml-story-spinner                                                                                | 10         | extensions/amp-story/0.1/amp-story.css                           |
-| amp-sticky-ad                                                                                           | 11         | extensions/amp-sticky-ad/1.0/amp-sticky-ad.css                   |
-| amp-sticky-ad-top-padding                                                                               | 12         | extensions/amp-sticky-ad/1.0/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-amphtml-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                   |
-| i-amphtml-ad-close-header                                                                               | 1000       | extensions/amp-lightbox/0.1/amp-lightbox.css                     |
-| amp-lightbox                                                                                            | 1000       | extensions/amp-lightbox/0.1/amp-lightbox.css                     |
-| amp-user-notification                                                                                   | 1000       | extensions/amp-user-notification/0.1/amp-user-notification.css   |
-| .i-amphtml-jank-meter                                                                                   | 1000       | css/ampdoc.css                                                   |
-| .i-amphtml-image-lightbox-trans                                                                         | 1001       | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css         |
-| .i-amphtml-story-page-play-button                                                                       | 10000      | extensions/amp-story/1.0/amp-story.css                           |
-| .i-amphtml-story-system-layer                                                                           | 100000     | extensions/amp-story/1.0/amp-story-system-layer.css              |
-| .i-amphtml-story-system-layer                                                                           | 100000     | extensions/amp-story/0.1/amp-story-system-layer.css              |
-| .i-amphtml-story-info-dialog                                                                            | 100001     | extensions/amp-story/1.0/amp-story-info-dialog.css               |
-| .i-amphtml-story-bookend                                                                                | 100001     | extensions/amp-story/1.0/amp-story-bookend.css                   |
-| .i-amphtml-ad-overlay-container                                                                         | 100001     | extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css         |
-| .i-amphtml-story-focused-state-layer                                                                    | 100001     | extensions/amp-story/1.0/amp-story-tooltip.css                   |
-| .i-amphtml-story-progress-bar                                                                           | 100001     | extensions/amp-story/0.1/amp-story-system-layer.css              |
-| .i-amphtml-story-progress-bar                                                                           | 100001     | extensions/amp-story/1.0/amp-story-system-layer.css              |
-| .i-amphtml-story-info-dialog                                                                            | 100001     | extensions/amp-story/0.1/amp-story-info-dialog.css               |
-| .i-amphtml-story-bookend                                                                                | 100001     | extensions/amp-story/0.1/amp-story-bookend.css                   |
-| .i-amphtml-story-share-menu                                                                             | 100001     | extensions/amp-story/0.1/amp-story-share-menu.css                |
-| [desktop] .i-amphtml-story-button-container                                                             | 100002     | extensions/amp-story/0.1/amp-story-desktop.css                   |
-| .i-amphtml-story-button-move                                                                            | 100002     | extensions/amp-story/1.0/pagination-buttons.css                  |
-| amp-story[standalone] .i-amphtml-story-developer-log                                                    | 100002     | extensions/amp-story/1.0/amp-story.css                           |
-| .i-amphtml-story-desktop-fullbleed .i-amphtml-story-button-container                                    | 100002     | extensions/amp-story/1.0/pagination-buttons.css                  |
-| [desktop] .i-amphtml-story-top                                                                          | 100002     | extensions/amp-story/0.1/amp-story-desktop.css                   |
-| .i-amphtml-story-toast                                                                                  | 100002     | extensions/amp-story/0.1/amp-story.css                           |
-| .i-amphtml-story-page-sentinel                                                                          | 100002     | extensions/amp-story/0.1/amp-story-desktop.css                   |
-| .i-amphtml-story-page-sentinel                                                                          | 100002     | extensions/amp-story/1.0/pagination-buttons.css                  |
-| .i-amphtml-story-desktop-panels .i-amphtml-story-button-container                                       | 100002     | extensions/amp-story/1.0/pagination-buttons.css                  |
-| .i-amphtml-story-button-move                                                                            | 100002     | extensions/amp-story/0.1/amp-story-desktop.css                   |
-| amp-story[standalone] .i-amphtml-story-developer-log                                                    | 100002     | extensions/amp-story/0.1/amp-story.css                           |
-| amp-story-access                                                                                        | 100003     | extensions/amp-story/1.0/amp-story-access.css                    |
-| .i-amphtml-story-opacity-mask                                                                           | 100003     | extensions/amp-story/1.0/amp-story.css                           |
-| .i-amphtml-story-consent                                                                                | 100003     | extensions/amp-story/0.1/amp-story-consent.css                   |
-| .i-amphtml-story-share-menu                                                                             | 100003     | extensions/amp-story/1.0/amp-story-share-menu.css                |
-| .i-amphtml-story-toast                                                                                  | 100004     | extensions/amp-story/1.0/amp-story.css                           |
-| amp-story-access[type=blocking]                                                                         | 100004     | extensions/amp-story/1.0/amp-story-access.css                    |
-| .i-amphtml-story-consent                                                                                | 100005     | extensions/amp-story/1.0/amp-story-consent.css                   |
-| .i-amphtml-story-no-rotation-overlay                                                                    | 200000     | extensions/amp-story/1.0/amp-story-viewport-warning-layer.css    |
-| .i-amphtml-story-no-rotation-overlay                                                                    | 200000     | extensions/amp-story/0.1/amp-story-viewport-warning-layer.css    |
-| .i-amphtml-story-unsupported-browser-overlay                                                            | 200001     | extensions/amp-story/0.1/amp-story-unsupported-browser-layer.css |
-| .i-amphtml-story-unsupported-browser-overlay                                                            | 200001     | extensions/amp-story/1.0/amp-story-unsupported-browser-layer.css |
-| .i-amphtml-story-experiment-error                                                                       | 999999     | extensions/amp-story/0.1/amp-story.css                           |
-| amp-subscriptions-dialog                                                                                | 2147483641 | extensions/amp-subscriptions/0.1/amp-subscriptions.css           |
-| amp-lightbox-gallery[i-amphtml-lbg-fade]                                                                | 2147483642 | extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.css     |
-| .i-amphtml-lbg                                                                                          | 2147483642 | extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.css     |
-| .amp-video-docked-shadow                                                                                | 2147483643 | extensions/amp-video-docking/0.1/amp-video-docking.css           |
-| .i-amphtml-consent-ui-mask                                                                              | 2147483644 | extensions/amp-consent/0.1/amp-consent.css                       |
-| .i-amphtml-video-docked                                                                                 | 2147483644 | extensions/amp-video-docking/0.1/amp-video-docking.css           |
-| amp-consent                                                                                             | 2147483645 | extensions/amp-consent/0.1/amp-consent.css                       |
-| .i-amphtml-video-docked-overlay                                                                         | 2147483645 | extensions/amp-video-docking/0.1/amp-video-docking.css           |
-| .amp-apester-fullscreen                                                                                 | 2147483646 | extensions/amp-apester-media/0.1/amp-apester-media.css           |
-| .i-amphtml-sidebar-mask                                                                                 | 2147483646 | extensions/amp-sidebar/0.1/amp-sidebar.css                       |
-| .amp-video-docked-controls                                                                              | 2147483646 | extensions/amp-video-docking/0.1/amp-video-docking.css           |
-| amp-sidebar                                                                                             | 2147483647 | extensions/amp-sidebar/0.1/amp-sidebar.css                       |
-| .amp-access-scroll-bar                                                                                  | 2147483647 | extensions/amp-access-scroll/0.1/amp-access-scroll.css           |
+**Run `amp get-zindex --fix` to generate this file.**
+
+<!-- markdown-link-check-disable -->
+
+| context                                                         | z-index | file                                                                              |
+| --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------- |
+| `amp-img.i-amphtml-ssr:not(.i-amphtml-element) > [placeholder]` | auto    | [css/ampshared.css](/css/ampshared.css)                                           |
+| `.i-amphtml-expanded-mode amp-story-grid-layer`                 | auto    | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css) |
+| `.i-amphtml-expanded-mode amp-story-grid-layer *`               | auto    | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css) |
+
+` amp-sidebar::part(sidebar)` | inherit | [extensions/amp-sidebar/1.0/amp-sidebar.css](/extensions/amp-sidebar/1.0/amp-sidebar.css)
+`amp-sidebar::part(c)` | inherit | [extensions/amp-sidebar/1.0/amp-sidebar.css](/extensions/amp-sidebar/1.0/amp-sidebar.css)
+`amp-sidebar::part(wrapper)` | inherit | [extensions/amp-sidebar/1.0/amp-sidebar.css](/extensions/amp-sidebar/1.0/amp-sidebar.css)
+`amp-story amp-consent` | initial | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
+`.amp-access-scroll-bar` | 2147483647 | [extensions/amp-access-scroll/0.1/amp-access-scroll.css](/extensions/amp-access-scroll/0.1/amp-access-scroll.css)
+`.amp-access-scroll-sheet` | 2147483647 | [extensions/amp-access-scroll/0.1/amp-access-scroll.css](/extensions/amp-access-scroll/0.1/amp-access-scroll.css)
+`.i-amphtml-onetap-google-iframe` | 2147483647 | [extensions/amp-onetap-google/0.1/amp-onetap-google.css](/extensions/amp-onetap-google/0.1/amp-onetap-google.css)
+`amp-sidebar` | 2147483647 | [extensions/amp-sidebar/0.1/amp-sidebar.css](/extensions/amp-sidebar/0.1/amp-sidebar.css)
+`amp-sidebar` | 2147483647 | [extensions/amp-sidebar/0.2/amp-sidebar.css](/extensions/amp-sidebar/0.2/amp-sidebar.css)
+`amp-sidebar` | 2147483647 | [extensions/amp-sidebar/1.0/amp-sidebar.css](/extensions/amp-sidebar/1.0/amp-sidebar.css)
+`defaultSidebarStyles` | 2147483647 | [extensions/amp-sidebar/1.0/component.jss.js](/extensions/amp-sidebar/1.0/component.jss.js)
+`.amp-apester-fullscreen` | 2147483646 | [extensions/amp-apester-media/0.1/amp-apester-media.css](/extensions/amp-apester-media/0.1/amp-apester-media.css)
+`.i-amphtml-sidebar-mask` | 2147483646 | [extensions/amp-sidebar/0.1/amp-sidebar.css](/extensions/amp-sidebar/0.1/amp-sidebar.css)
+`.i-amphtml-sidebar-mask` | 2147483646 | [extensions/amp-sidebar/0.2/amp-sidebar.css](/extensions/amp-sidebar/0.2/amp-sidebar.css)
+`defaultBackdropStyles` | 2147483646 | [extensions/amp-sidebar/1.0/component.jss.js](/extensions/amp-sidebar/1.0/component.jss.js)
+`.amp-video-docked-controls` | 2147483646 | [extensions/amp-video-docking/0.1/amp-video-docking.css](/extensions/amp-video-docking/0.1/amp-video-docking.css)
+`amp-consent` | 2147483645 | [extensions/amp-consent/0.1/amp-consent.css](/extensions/amp-consent/0.1/amp-consent.css)
+`.i-amphtml-video-docked-overlay` | 2147483645 | [extensions/amp-video-docking/0.1/amp-video-docking.css](/extensions/amp-video-docking/0.1/amp-video-docking.css)
+`.i-amphtml-consent-ui-mask` | 2147483644 | [extensions/amp-consent/0.1/amp-consent.css](/extensions/amp-consent/0.1/amp-consent.css)
+`.i-amphtml-video-docked` | 2147483644 | [extensions/amp-video-docking/0.1/amp-video-docking.css](/extensions/amp-video-docking/0.1/amp-video-docking.css)
+`.amp-video-docked-shadow` | 2147483643 | [extensions/amp-video-docking/0.1/amp-video-docking.css](/extensions/amp-video-docking/0.1/amp-video-docking.css)
+`.i-amphtml-lbg` | 2147483642 | [extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.css](/extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.css)
+`amp-lightbox-gallery[i-amphtml-lbg-fade]` | 2147483642 | [extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.css](/extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.css)
+`prepareImageAnimation` | 2147483642 | [extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.js](/extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.js)
+`amp-subscriptions-dialog` | 2147483641 | [extensions/amp-subscriptions/0.1/amp-subscriptions.css](/extensions/amp-subscriptions/0.1/amp-subscriptions.css)
+`.i-amphtml-story-unsupported-browser-overlay` | 20000001 | [extensions/amp-story/1.0/amp-story-unsupported-browser-layer.css](/extensions/amp-story/1.0/amp-story-unsupported-browser-layer.css)
+`.i-amphtml-story-no-rotation-overlay` | 20000000 | [extensions/amp-story/1.0/amp-story-viewport-warning-layer.css](/extensions/amp-story/1.0/amp-story-viewport-warning-layer.css)
+`amp-story-education` | 9999999 | [extensions/amp-story-education/0.1/amp-story-education.css](/extensions/amp-story-education/0.1/amp-story-education.css)
+`[i-amphtml-vertical] .i-amphtml-story-page-description` | 9999999 | [extensions/amp-story/1.0/amp-story-vertical.css](/extensions/amp-story/1.0/amp-story-vertical.css)
+`.i-amphtml-story-consent` | 100005 | [extensions/amp-story/1.0/amp-story-consent.css](/extensions/amp-story/1.0/amp-story-consent.css)
+`amp-story-access[type=blocking]` | 100004 | [extensions/amp-story/1.0/amp-story-access.css](/extensions/amp-story/1.0/amp-story-access.css)
+`.i-amphtml-story-toast` | 100004 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
+`amp-story-access` | 100003 | [extensions/amp-story/1.0/amp-story-access.css](/extensions/amp-story/1.0/amp-story-access.css)
+`.i-amphtml-story-share-menu` | 100003 | [extensions/amp-story/1.0/amp-story-share-menu.css](/extensions/amp-story/1.0/amp-story-share-menu.css)
+`.i-amphtml-story-opacity-mask` | 100003 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
+`.i-amphtml-story-has-new-page-notification-container` | 100002 | [extensions/amp-story/1.0/amp-story-system-layer.css](/extensions/amp-story/1.0/amp-story-system-layer.css)
+`amp-story[standalone] .i-amphtml-story-developer-log` | 100002 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
+`.i-amphtml-story-button-container` | 100002 | [extensions/amp-story/1.0/pagination-buttons.css](/extensions/amp-story/1.0/pagination-buttons.css)
+`.i-amphtml-ad-overlay-container` | 100001 | [extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-ad-badge.css](/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-ad-badge.css)
+`.i-amphtml-story-ad-progress-background` | 100001 | [extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-progress-bar.css](/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-progress-bar.css)
+`.i-amphtml-story-info-dialog` | 100001 | [extensions/amp-story/1.0/amp-story-info-dialog.css](/extensions/amp-story/1.0/amp-story-info-dialog.css)
+`.i-amphtml-story-progress-bar` | 100001 | [extensions/amp-story/1.0/amp-story-system-layer.css](/extensions/amp-story/1.0/amp-story-system-layer.css)
+`.i-amphtml-story-focused-state-layer` | 100001 | [extensions/amp-story/1.0/amp-story-tooltip.css](/extensions/amp-story/1.0/amp-story-tooltip.css)
+`.i-amphtml-story-360-activate-button` | 100000 | [extensions/amp-story-360/0.1/amp-story-360.css](/extensions/amp-story-360/0.1/amp-story-360.css)
+`.i-amphtml-story-360-discovery` | 100000 | [extensions/amp-story-360/0.1/amp-story-360.css](/extensions/amp-story-360/0.1/amp-story-360.css)
+`.i-amphtml-story-page-attachment-expand` | 100000 | [extensions/amp-story/1.0/amp-story-page-attachment.css](/extensions/amp-story/1.0/amp-story-page-attachment.css)
+`.i-amphtml-story-system-layer` | 100000 | [extensions/amp-story/1.0/amp-story-system-layer.css](/extensions/amp-story/1.0/amp-story-system-layer.css)
+`.i-amphtml-story-page-error` | 10000 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
+`.i-amphtml-story-page-play-button` | 10000 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
+`.i-amphtml-image-lightbox-trans` | 1001 | [extensions/amp-image-lightbox/0.1/amp-image-lightbox.css](/extensions/amp-image-lightbox/0.1/amp-image-lightbox.css)
+`amp-image-lightbox` | 1000 | [extensions/amp-image-lightbox/0.1/amp-image-lightbox.css](/extensions/amp-image-lightbox/0.1/amp-image-lightbox.css)
+`amp-lightbox` | 1000 | [extensions/amp-lightbox/0.1/amp-lightbox.css](/extensions/amp-lightbox/0.1/amp-lightbox.css)
+`i-amphtml-ad-close-header` | 1000 | [extensions/amp-lightbox/0.1/amp-lightbox.css](/extensions/amp-lightbox/0.1/amp-lightbox.css)
+`wrapper` | 1000 | [extensions/amp-lightbox/1.0/component.jss.js](/extensions/amp-lightbox/1.0/component.jss.js)
+`amp-live-list > [update]` | 1000 | [extensions/amp-live-list/0.1/amp-live-list.css](/extensions/amp-live-list/0.1/amp-live-list.css)
+`.i-amphtml-mega-menu-mask-parent` | 1000 | [extensions/amp-mega-menu/0.1/amp-mega-menu.css](/extensions/amp-mega-menu/0.1/amp-mega-menu.css)
+`amp-mega-menu` | 1000 | [extensions/amp-mega-menu/0.1/amp-mega-menu.css](/extensions/amp-mega-menu/0.1/amp-mega-menu.css)
+`amp-user-notification` | 1000 | [extensions/amp-user-notification/0.1/amp-user-notification.css](/extensions/amp-user-notification/0.1/amp-user-notification.css)
+`setStyles` | 1000 | [src/full-overlay-frame-helper.js](/src/full-overlay-frame-helper.js)
+`i-amphtml-app-banner-top-padding` | 15 | [extensions/amp-app-banner/0.1/amp-app-banner.css](/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](/extensions/amp-app-banner/0.1/amp-app-banner.css)
+`amp-app-banner` | 13 | [extensions/amp-app-banner/0.1/amp-app-banner.css](/extensions/amp-app-banner/0.1/amp-app-banner.css)
+`amp-ad-sticky-padding` | 12 | [extensions/amp-ad/0.1/amp-ad.css](/extensions/amp-ad/0.1/amp-ad.css)
+`amp-sticky-ad-top-padding` | 12 | [extensions/amp-sticky-ad/1.0/amp-sticky-ad.css](/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css)
+`style` | 11 | [extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js](/extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js)
+`amp-ad[sticky]` | 11 | [extensions/amp-ad/0.1/amp-ad.css](/extensions/amp-ad/0.1/amp-ad.css)
+`amp-sticky-ad` | 11 | [extensions/amp-sticky-ad/1.0/amp-sticky-ad.css](/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css)
+`.i-amphtml-autocomplete-results` | 10 | [extensions/amp-autocomplete/0.1/amp-autocomplete.css](/extensions/amp-autocomplete/0.1/amp-autocomplete.css)
+`.amp-carousel-button` | 10 | [extensions/amp-carousel/0.1/amp-carousel.css](/extensions/amp-carousel/0.1/amp-carousel.css)
+`.amp-carousel-button` | 10 | [extensions/amp-carousel/0.2/amp-carousel.css](/extensions/amp-carousel/0.2/amp-carousel.css)
+`amp-date-picker[mode="overlay"] .i-amphtml-date-picker-container` | 10 | [extensions/amp-date-picker/0.1/amp-date-picker.css](/extensions/amp-date-picker/0.1/amp-date-picker.css)
+`.i-amphtml-story-spinner` | 10 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
+`.i-amphtml-byside-content-loading-container .i-amphtml-byside-content-loading-animation:before` | 9 | [extensions/amp-byside-content/0.1/amp-byside-content.css](/extensions/amp-byside-content/0.1/amp-byside-content.css)
+`100%` | 9 | [extensions/amp-byside-content/0.1/amp-byside-content.css](/extensions/amp-byside-content/0.1/amp-byside-content.css)
+`.i-amphtml-story-ad-attribution` | 4 | [extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-attribution.css](/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-attribution.css)
+`.i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="1"][amp-access-hide]::before` | 4 | [extensions/amp-story/1.0/amp-story-desktop-panels.css](/extensions/amp-story/1.0/amp-story-desktop-panels.css)
+`.amp-story-draggable-drawer-root` | 4 | [extensions/amp-story/1.0/amp-story-draggable-drawer.css](/extensions/amp-story/1.0/amp-story-draggable-drawer.css)
+`.i-amphtml-image-slider-bar` | 3 | [extensions/amp-image-slider/0.1/amp-image-slider.css](/extensions/amp-image-slider/0.1/amp-image-slider.css)
+`amp-story-cta-layer` | 3 | [extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-inabox.css](/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-inabox.css)
+`.i-amphtml-story-page-open-attachment[active]` | 3 | [extensions/amp-story/1.0/amp-story-open-page-attachment.css](/extensions/amp-story/1.0/amp-story-open-page-attachment.css)
+`.i-amphtml-story-attachment-active amp-story-page[active]::after` | 3 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
+`amp-story-cta-layer` | 3 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
+`.i-amphtml-element > [overflow]` | 2 | [css/ampshared.css](/css/ampshared.css)
+`body noscript > *` | 2 | [css/ampshared.css](/css/ampshared.css)
+`setStyles` | 2 | [extensions/amp-fit-text/0.1/amp-fit-text.js](/extensions/amp-fit-text/0.1/amp-fit-text.js)
+`.i-amphtml-image-lightbox-caption` | 2 | [extensions/amp-image-lightbox/0.1/amp-image-lightbox.css](/extensions/amp-image-lightbox/0.1/amp-image-lightbox.css)
+`.i-amphtml-image-slider-hint` | 2 | [extensions/amp-image-slider/0.1/amp-image-slider.css](/extensions/amp-image-slider/0.1/amp-image-slider.css)
+`.i-amphtml-story-access-header` | 2 | [extensions/amp-story/1.0/amp-story-access.css](/extensions/amp-story/1.0/amp-story-access.css)
+`.i-amphtml-story-consent-header` | 2 | [extensions/amp-story/1.0/amp-story-consent.css](/extensions/amp-story/1.0/amp-story-consent.css)
+`.i-amphtml-story-hint-container` | 2 | [extensions/amp-story/1.0/amp-story-hint.css](/extensions/amp-story/1.0/amp-story-hint.css)
+`amp-story-grid-layer` | 2 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
+`.controls` | 1 | [css/amp-ima-video-iframe.css](/css/amp-ima-video-iframe.css)
+`.amp-story-player-exit-control-button` | 1 | [css/amp-story-player-iframe.css](/css/amp-story-player-iframe.css)
+`.i-amphtml-layout-size-defined > [fallback]` | 1 | [css/ampshared.css](/css/ampshared.css)
+`.i-amphtml-layout-size-defined > [placeholder]` | 1 | [css/ampshared.css](/css/ampshared.css)
+`.i-amphtml-loading-container` | 1 | [css/ampshared.css](/css/ampshared.css)
+`.amp-video-eq` | 1 | [css/video-autoplay.css](/css/video-autoplay.css)
+`.i-amphtml-video-mask` | 1 | [css/video-autoplay.css](/css/video-autoplay.css)
+`amp-addthis .i-amphtml-addthis-close` | 1 | [extensions/amp-addthis/0.1/amp-addthis.css](/extensions/amp-addthis/0.1/amp-addthis.css)
+`.i-amphtml-base-carousel-arrow-icon` | 1 | [extensions/amp-base-carousel/0.1/amp-base-carousel.css](/extensions/amp-base-carousel/0.1/amp-base-carousel.css)
+`.i-amphtml-base-carousel-arrow-next-slot` | 1 | [extensions/amp-base-carousel/0.1/amp-base-carousel.css](/extensions/amp-base-carousel/0.1/amp-base-carousel.css)
+`.i-amphtml-base-carousel-arrow-prev-slot` | 1 | [extensions/amp-base-carousel/0.1/amp-base-carousel.css](/extensions/amp-base-carousel/0.1/amp-base-carousel.css)
+`.i-amphtml-base-carousel-arrows` | 1 | [extensions/amp-base-carousel/0.1/amp-base-carousel.css](/extensions/amp-base-carousel/0.1/amp-base-carousel.css)
+`arrow` | 1 | [extensions/amp-base-carousel/1.0/component.jss.js](/extensions/amp-base-carousel/1.0/component.jss.js)
+`.i-amphtml-carousel-arrows` | 1 | [extensions/amp-carousel/0.2/amp-carousel.css](/extensions/amp-carousel/0.2/amp-carousel.css)
+`setStyles` | 1 | [extensions/amp-fit-text/0.1/amp-fit-text.js](/extensions/amp-fit-text/0.1/amp-fit-text.js)
+`.i-amphtml-image-lightbox-viewer` | 1 | [extensions/amp-image-lightbox/0.1/amp-image-lightbox.css](/extensions/amp-image-lightbox/0.1/amp-image-lightbox.css)
+`.i-amphtml-image-lightbox-viewer-image` | 1 | [extensions/amp-image-lightbox/0.1/amp-image-lightbox.css](/extensions/amp-image-lightbox/0.1/amp-image-lightbox.css)
+`.i-amphtml-image-slider-label-wrapper` | 1 | [extensions/amp-image-slider/0.1/amp-image-slider.css](/extensions/amp-image-slider/0.1/amp-image-slider.css)
+`.i-amphtml-image-slider-right-mask` | 1 | [extensions/amp-image-slider/0.1/amp-image-slider.css](/extensions/amp-image-slider/0.1/amp-image-slider.css)
+`.i-amphtml-inline-gallery-pagination-count` | 1 | [extensions/amp-inline-gallery/0.1/amp-inline-gallery-pagination.css](/extensions/amp-inline-gallery/0.1/amp-inline-gallery-pagination.css)
+`.i-amphtml-inline-gallery-pagination-dot-container` | 1 | [extensions/amp-inline-gallery/0.1/amp-inline-gallery-pagination.css](/extensions/amp-inline-gallery/0.1/amp-inline-gallery-pagination.css)
+`container['&$inset']` | 1 | [extensions/amp-inline-gallery/1.0/pagination.jss.js](/extensions/amp-inline-gallery/1.0/pagination.jss.js)
+`dotWrapper['&$inset']` | 1 | [extensions/amp-inline-gallery/1.0/pagination.jss.js](/extensions/amp-inline-gallery/1.0/pagination.jss.js)
+`numbersWrapper['&$inset']` | 1 | [extensions/amp-inline-gallery/1.0/pagination.jss.js](/extensions/amp-inline-gallery/1.0/pagination.jss.js)
+`.i-amphtml-lbg-caption-scroll` | 1 | [extensions/amp-lightbox-gallery/0.1/lightbox-caption.css](/extensions/amp-lightbox-gallery/0.1/lightbox-caption.css)
+`[i-amphtml-lbg-caption-state="clip"] + .i-amphtml-lbg-caption-mask` | 1 | [extensions/amp-lightbox-gallery/0.1/lightbox-caption.css](/extensions/amp-lightbox-gallery/0.1/lightbox-caption.css)
+`.i-amphtml-lbg-top-bar` | 1 | [extensions/amp-lightbox-gallery/0.1/lightbox-controls.css](/extensions/amp-lightbox-gallery/0.1/lightbox-controls.css)
+`.i-amphtml-glass-pane` | 1 | [extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css](/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css)
+`setStyles` | 1 | [extensions/amp-story-auto-ads/0.1/story-ad-button-text-fitter.js](/extensions/amp-story-auto-ads/0.1/story-ad-button-text-fitter.js)
+`.i-amphtml-story-dev-tools-device-dialog-bg` | 1 | [extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.css](/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.css)
+`.i-amphtml-story-interactive-option-text` | 1 | [extensions/amp-story-interactive/0.1/amp-story-interactive-poll.css](/extensions/amp-story-interactive/0.1/amp-story-interactive-poll.css)
+`.i-amphtml-story-interactive-confetti-wrapper` | 1 | [extensions/amp-story-interactive/0.1/amp-story-interactive.css](/extensions/amp-story-interactive/0.1/amp-story-interactive.css)
+`.i-amphtml-story-interactive-disclaimer` | 1 | [extensions/amp-story-interactive/0.1/amp-story-interactive.css](/extensions/amp-story-interactive/0.1/amp-story-interactive.css)
+`.i-amphtml-story-consent-actions` | 1 | [extensions/amp-story/1.0/amp-story-consent.css](/extensions/amp-story/1.0/amp-story-consent.css)
+`.i-amphtml-story-draggable-drawer-header` | 1 | [extensions/amp-story/1.0/amp-story-draggable-drawer-header.css](/extensions/amp-story/1.0/amp-story-draggable-drawer-header.css)
+`.i-amphtml-story-hint-container .i-amphtml-story-hint-tap-button-icon` | 1 | [extensions/amp-story/1.0/amp-story-hint.css](/extensions/amp-story/1.0/amp-story-hint.css)
+`.i-amphtml-expanded-mode .i-amphtml-embedded-component.i-amphtml-expanded-component` | 1 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
+`amp-story-page[active]` | 1 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
+`.i-amphtml-stream-gallery-next` | 1 | [extensions/amp-stream-gallery/0.1/arrows.css](/extensions/amp-stream-gallery/0.1/arrows.css)
+`.i-amphtml-stream-gallery-prev` | 1 | [extensions/amp-stream-gallery/0.1/arrows.css](/extensions/amp-stream-gallery/0.1/arrows.css)
+`arrow` | 1 | [extensions/amp-stream-gallery/1.0/component.jss.js](/extensions/amp-stream-gallery/1.0/component.jss.js)
+`eq` | 1 | [extensions/amp-video/1.0/autoplay.jss.js](/extensions/amp-video/1.0/autoplay.jss.js)
+`.i-amphtml-byside-content-loading-container .i-amphtml-byside-content-loading-animation:after` | 0 | [extensions/amp-byside-content/0.1/amp-byside-content.css](/extensions/amp-byside-content/0.1/amp-byside-content.css)
+`0%` | 0 | [extensions/amp-byside-content/0.1/amp-byside-content.css](/extensions/amp-byside-content/0.1/amp-byside-content.css)
+`setStyle` | 0 | [extensions/amp-iframe/0.1/amp-iframe.js](/extensions/amp-iframe/0.1/amp-iframe.js)
+`.i-amphtml-image-lightbox-container` | 0 | [extensions/amp-image-lightbox/0.1/amp-image-lightbox.css](/extensions/amp-image-lightbox/0.1/amp-image-lightbox.css)
+`.i-amphtml-inline-gallery-pagination-dots` | 0 | [extensions/amp-inline-gallery/0.1/amp-inline-gallery-pagination.css](/extensions/amp-inline-gallery/0.1/amp-inline-gallery-pagination.css)
+`.i-amphtml-inline-gallery-pagination-numbers` | 0 | [extensions/amp-inline-gallery/0.1/amp-inline-gallery-pagination.css](/extensions/amp-inline-gallery/0.1/amp-inline-gallery-pagination.css)
+`dots['&$inset']` | 0 | [extensions/amp-inline-gallery/1.0/pagination.jss.js](/extensions/amp-inline-gallery/1.0/pagination.jss.js)
+`numbers['&$inset']` | 0 | [extensions/amp-inline-gallery/1.0/pagination.jss.js](/extensions/amp-inline-gallery/1.0/pagination.jss.js)
+`[i-amphtml-lbg-caption-state="expand"] + .i-amphtml-lbg-caption-mask` | 0 | [extensions/amp-lightbox-gallery/0.1/lightbox-caption.css](/extensions/amp-lightbox-gallery/0.1/lightbox-caption.css)
+`.i-amphtml-story-interactive-quiz-option` | 0 | [extensions/amp-story-interactive/0.1/amp-story-interactive-quiz.css](/extensions/amp-story-interactive/0.1/amp-story-interactive-quiz.css)
+`.i-amphtml-story-access-content` | 0 | [extensions/amp-story/1.0/amp-story-access.css](/extensions/amp-story/1.0/amp-story-access.css)
+`.i-amphtml-story-consent-content` | 0 | [extensions/amp-story/1.0/amp-story-consent.css](/extensions/amp-story/1.0/amp-story-consent.css)
+`amp-story-page` | 0 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
+`.amp-video-docked-placeholder-background` | 0 | [extensions/amp-video-docking/0.1/amp-video-docking.css](/extensions/amp-video-docking/0.1/amp-video-docking.css)
+`.i-amphtml-carousel-spacer` | -1 | [extensions/amp-base-carousel/0.1/carousel.css](/extensions/amp-base-carousel/0.1/carousel.css)
+`.i-amphtml-mega-menu-mask` | -1 | [extensions/amp-mega-menu/0.1/amp-mega-menu.css](/extensions/amp-mega-menu/0.1/amp-mega-menu.css)
+`.i-amphtml-story-access-logo::before` | -1 | [extensions/amp-story/1.0/amp-story-access.css](/extensions/amp-story/1.0/amp-story-access.css)
+`.i-amphtml-story-consent-logo::before` | -1 | [extensions/amp-story/1.0/amp-story-consent.css](/extensions/amp-story/1.0/amp-story-consent.css)
+`.i-amphtml-story-page-open-attachment-icon::after` | -1 | [extensions/amp-story/1.0/amp-story-open-page-attachment.css](/extensions/amp-story/1.0/amp-story-open-page-attachment.css)
+`.i-amphtml-story-media-query-matcher` | -1 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)
diff --git a/css/amp-ima-video-iframe.css b/css/amp-ima-video-iframe.css
new file mode 100644
index 0000000000000..e1d7920102de2
--- /dev/null
+++ b/css/amp-ima-video-iframe.css
@@ -0,0 +1,211 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/*
+ * Styles inserted in iframes rendered by <amp-ima-video>.
+ *
+ * .selectorsInThisFile reject naming convention by using camelCase rather than
+ * dash-case, because they're uniform with Javascript references that are more
+ * useful when destructured as such (imaVideo.js).
+ *
+ * We insert this CSS in a standalone document whose namespace is shared only
+ * with the IMA SDK. This unconventional naming is not worth converting to
+ * dash-case during build or runtime, so we keep it.
+ */
+
+[hidden] {
+  display: none !important;
+}
+
+body,
+.video {
+  background: black;
+}
+
+.video {
+  width: 100%;
+  height: 100%;
+}
+
+.fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+button {
+  cursor: pointer;
+  appearance: none;
+  padding: 0;
+  border: none;
+  background: transparent;
+  display: block;
+}
+
+.controls {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: rgba(7, 20, 30, 0.7);
+  background: linear-gradient(
+    0,
+    rgba(7, 20, 30, 0.7) 0%,
+    rgba(7, 20, 30, 0) 100%
+  );
+  box-sizing: border-box;
+  padding: 10px;
+  padding-top: 60px;
+  color: white;
+  display: flex;
+  font-family: Helvetica, Arial, Sans-serif;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  z-index: 1;
+}
+
+.controls > *:not(:last-child) {
+  margin-right: 20px;
+}
+
+button > svg {
+  width: 100%;
+  height: 100%;
+  filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.4));
+  fill: #ffffff;
+}
+
+.countdownWrapper {
+  align-items: center;
+  box-sizing: border-box;
+  display: none;
+  flex-grow: 1;
+  font-size: 12px;
+  height: 20px;
+  overflow: hidden;
+  padding: 5px;
+  text-shadow: 0 0 10px black;
+  white-space: nowrap;
+}
+
+.time {
+  margin-right: 20px;
+  text-align: center;
+  font-size: 14px;
+  text-shadow: 0 0 10px black;
+}
+
+.progress {
+  height: 30px;
+  flex-grow: 1;
+  position: relative;
+  margin-right: 20px;
+}
+
+.progress::after {
+  display: block;
+  content: '';
+  background-color: rgba(255, 255, 255, 0.45);
+  height: 2px;
+  width: 100%;
+  margin-top: 14px;
+}
+
+.progressLine {
+  background-color: rgb(255, 255, 255);
+  height: 2px;
+  margin-top: 14px;
+  width: 0%;
+  float: left;
+}
+
+.progressMarker {
+  height: 14px;
+  width: 14px;
+  position: absolute;
+  left: 0%;
+  top: 50%;
+  margin-top: -7px;
+  cursor: pointer;
+  border-radius: 14px;
+  background: white;
+}
+
+.controls > button {
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+}
+
+.overlayButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.overlayButton > svg {
+  max-width: 120px;
+  max-height: 120px;
+}
+
+/* Swap button's icons based on root state. */
+
+/* play/pause  */
+.root:not([data-playing]) .playButton > svg:last-child,
+.root[data-playing] .playButton > svg:first-child,
+/* mute/unmute */
+.root:not([data-muted]) .muteButton > svg:last-child,
+.root[data-muted] .muteButton > svg:first-child {
+  display: none;
+}
+
+/* Ad controls */
+
+.root[data-ad] > .controls {
+  height: 30px;
+  justify-content: flex-end;
+  padding: 10px;
+}
+
+.root[data-ad] > .controls > button {
+  height: 22px;
+}
+
+.root[data-ad] > .controls .muteButton {
+  margin-right: 10px;
+}
+
+@media screen and (max-width: 400) {
+  .root[data-skippable] > .controls {
+    height: 20px;
+  }
+  .root[data-skippable] > .controls > button {
+    height: 18px;
+  }
+}
+
+/* Show ad controls */
+.root[data-ad] > .controls > .countdownWrapper {
+  display: flex;
+}
+
+/* Hide non-ad controls */
+.root[data-ad] > .controls > .time,
+.root[data-ad] > .controls > .progress {
+  display: none;
+}
diff --git a/css/amp-story-entry-point.css b/css/amp-story-entry-point.css
new file mode 100644
index 0000000000000..83bbf40c5dc62
--- /dev/null
+++ b/css/amp-story-entry-point.css
@@ -0,0 +1,20 @@
+/**
+ * Copyright 2020 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.
+ */
+
+amp-story-entry-point {
+  position: relative;
+  display: block;
+}
diff --git a/css/amp-story-player-iframe.css b/css/amp-story-player-iframe.css
index b8c3eb429a2fc..183d25ac05a31 100644
--- a/css/amp-story-player-iframe.css
+++ b/css/amp-story-player-iframe.css
@@ -14,13 +14,10 @@
  * limitations under the License.
  */
 
-:host {
+ /** See #23876 and #31363. */
+ :host {
   all: initial;
-  display: block;
-  border-radius: 0 !important;
-  width: 360px;
-  height: 600px;
-  overflow: auto;
+  color: initial;
 }
 
 .story-player-iframe {
@@ -33,28 +30,64 @@
   position: absolute;
 }
 
-main {
+.i-amphtml-story-player-main-container {
   height: 100%;
   position: relative;
   overflow: hidden;
+  transform-style: preserve-3d;
 }
 
-.i-amphtml-story-player-loaded iframe {
+.i-amphtml-story-player-loaded .story-player-iframe {
   opacity: 1;
   transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.story-player-iframe:nth-child(1),
-main .story-player-iframe[i-amphtml-iframe-position="0"] {
-  transform: translate3d(0, 0, 0);
+.i-amphtml-story-player-no-navigation-transition .story-player-iframe {
+  transition-duration: 0.01s; /* Set to low value so transitionend is emitted */
 }
 
-.story-player-iframe:nth-child(2),
-.story-player-iframe:nth-child(3),
-main .story-player-iframe[i-amphtml-iframe-position="1"] {
+.i-amphtml-story-player-main-container iframe:nth-of-type(1),
+.i-amphtml-story-player-main-container .story-player-iframe[i-amphtml-iframe-position="0"] {
+  transform: translate3d(0, 0, 1px);
+}
+
+.i-amphtml-story-player-main-container iframe:nth-of-type(2),
+.i-amphtml-story-player-main-container iframe:nth-of-type(3),
+.i-amphtml-story-player-main-container .story-player-iframe[i-amphtml-iframe-position="1"] {
   transform: translate3d(100%, 0, 0);
 }
 
-main .story-player-iframe[i-amphtml-iframe-position="-1"] {
+.i-amphtml-story-player-main-container .story-player-iframe[i-amphtml-iframe-position="-1"] {
   transform: translate3d(-100%, 0, 0);
 }
+
+/* TODO(#30031): delete this once new custom UI API is ready. */
+.amp-story-player-exit-control-button {
+  position: absolute;
+  height: 48px;
+  width: 48px;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  margin-top: 7px;
+  background-size: 28px;
+  border: 0px;
+  background-color: transparent;
+  outline: transparent;
+  cursor: pointer;
+  z-index: 1;
+}
+
+/* TODO(#30031): delete this once new custom UI API is ready. */
+.amp-story-player-close-button {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="%23FFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
+}
+
+/* TODO(#30031): delete this once new custom UI API is ready. */
+.amp-story-player-back-button {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="%23FFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');
+}
+
+/* TODO(#30031): delete this once new custom UI API is ready. */
+.amp-story-player-hide-button {
+  display: none;
+}
diff --git a/css/amp-story-player.css b/css/amp-story-player.css
index 92b293701a45c..32135093989ca 100644
--- a/css/amp-story-player.css
+++ b/css/amp-story-player.css
@@ -15,12 +15,15 @@
  */
 
 amp-story-player {
-  width: 360px;
-  height: 600px;
   position: relative;
   display: block;
 }
 
+.i-amphtml-story-player-shadow-root-intermediary {
+  width: 100%;
+  height: 100%;
+}
+
 amp-story-player a:first-of-type {
   width: 100%;
   height: 100%;
@@ -29,8 +32,8 @@ amp-story-player a:first-of-type {
   display: block;
 }
 
-amp-story-player a:not(:first-of-type) {
-  visibility: hidden;
+amp-story-player.i-amphtml-story-player-loaded a {
+  display: none;
 }
 
 amp-story-player::after {
diff --git a/css/ampdoc.css b/css/ampdoc.css
index 7e12f2d5c8a7b..9b4dbe7b195aa 100644
--- a/css/ampdoc.css
+++ b/css/ampdoc.css
@@ -44,7 +44,7 @@ html:not([amp4ads]) body {
 /**
  * Margin:0 is currently needed for iOS viewer embeds.
  * See:
- * https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md
+ * https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md
  */
 html:not([amp4ads]) body {
   margin: 0 !important;
@@ -64,7 +64,7 @@ body {
  * is only possible in this case, and (b) we'd like to preserve pinch-zoom.
  */
 html.i-amphtml-singledoc.i-amphtml-embedded {
-  touch-action: pan-y;
+  touch-action: pan-y pinch-zoom;
 }
 
 /**
@@ -91,21 +91,6 @@ html.i-amphtml-fie:not(.i-amphtml-inabox) > body {
 }
 
 
-/**
- * Set `body {overflow-x: hidden}` for iOS WebView. This is b/c iOS WebView
- * does NOT respect `html {overflow-x: hidden}`.
- * Note! For all other natural cases body's style is `body {overflow: visible}`
- * to avoid visibility issues with iframes.
- */
-html.i-amphtml-webview > body {
-  overflow-x: hidden !important;
-  overflow-y: visible !important;
-  /* A <body> height of 0 will be hidden due to "overflow-x: hidden". */
-  /* Prevent this by setting min-height to 100vh. See b/74541306. */
-  min-height: 100vh !important;
-}
-
-
 /**
  * iOS-Embed mode (iOS <= 8). The `body` itself is scrollable.
  */
@@ -124,7 +109,7 @@ html.i-amphtml-ios-embed {
   position: static;
 }
 
-/** Wrapper for iOS Embed Wrapper mode. */
+/** Wrapper for iOS Embed Wrapper mode (iOS <= 12). */
 #i-amphtml-wrapper {
   overflow-x: hidden !important;
   overflow-y: auto !important;
@@ -245,21 +230,10 @@ amp-live-list > [update] {
 /**
  * Display none elements
  */
-amp-experiment, amp-share-tracking {
+amp-experiment {
   display: none;
 }
 
-.i-amphtml-jank-meter {
-  position: fixed;
-  background-color: rgba(232,72,95,.5);
-  bottom: 0;
-  right: 0;
-  color: #fff;
-  font-size: 16px;
-  z-index: 1000;
-  padding: 5px;
-}
-
 /* amp-list CSS to avoid FOUC */
 
 /**
@@ -317,7 +291,11 @@ amp-story-page {
   background-color: #757575;
 }
 
-amp-story .amp-active > div {
+/* Hide amp-loader in stories
+ * TODO(maxbittker): remove after amp-loader is no longer imported in stories
+ */
+amp-story .amp-active > div,
+amp-story .i-amphtml-loader-background {
   display: none !important;
 }
 
@@ -363,3 +341,16 @@ amp-autocomplete > textarea,
 [amp-fx^="fly-in"] {
   visibility: hidden;
 }
+
+/**
+ * amp-script[nodom] is an element with no UI, similar to amp-analytics.
+ */
+amp-script[nodom], amp-script[sandboxed] {
+  /* Fixed to make position independent of page other elements. */
+  position: fixed !important;
+  top: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  visibility: hidden;
+}
diff --git a/css/ampshared.css b/css/ampshared.css
index 0fe6c9f73281c..5b6c2e28861dc 100644
--- a/css/ampshared.css
+++ b/css/ampshared.css
@@ -68,7 +68,7 @@
 
 .i-amphtml-layout-responsive,
 [layout=responsive][width][height]:not(.i-amphtml-layout-responsive),
-[width][height][sizes]:not([layout]):not(.i-amphtml-layout-responsive),
+[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive),
 [width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive)
 {
   display: block;
@@ -116,8 +116,13 @@
   position: relative;
 }
 
+/* Fill layout requires higher specificity than i-amp-html-notbuilt
+ * so that the correct width/height can be applied before build.
+ */
 .i-amphtml-layout-fill,
-[layout=fill]:not(.i-amphtml-layout-fill)
+.i-amphtml-layout-fill.i-amphtml-notbuilt,
+[layout=fill]:not(.i-amphtml-layout-fill),
+body noscript > *
 {
   display: block;
   overflow: hidden !important;
@@ -128,6 +133,22 @@
   right: 0;
 }
 
+/* In previous rule and in this one, make sure noscript fallbacks get fill layout as if they are placeholders */
+body noscript > * {
+  position: absolute !important;
+
+  /* Override width/height attributes defined on HTML elements in noscript. */
+  width: 100%;
+  height: 100%;
+
+  /* Supersede sibling [placeholder]/[fallback] z-index:1 */
+  z-index: 2;
+}
+
+body noscript {
+  display: inline !important;
+}
+
 .i-amphtml-layout-flex-item,
 [layout=flex-item]:not(.i-amphtml-layout-flex-item)
 {
@@ -154,6 +175,16 @@ i-amphtml-sizer {
   display: block !important;
 }
 
+/*
+ * Disable `i-amphtml-sizer` when aspect ratio is supported by both the
+ * borwser and the optimizer.
+ */
+@supports (aspect-ratio: 1 / 1) {
+  i-amphtml-sizer.i-amphtml-disable-ar {
+    display: none !important;
+  }
+}
+
 .i-amphtml-fill-content,
 .i-amphtml-blurry-placeholder {
   display: block;
@@ -251,7 +282,7 @@ i-amphtml-sizer {
  */
 .i-amphtml-notbuilt,
 [layout]:not(.i-amphtml-element),
-[width][height][sizes]:not([layout]):not(.i-amphtml-element),
+[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element),
 [width][height][heights]:not([layout]):not(.i-amphtml-element)
 {
   position: relative;
@@ -264,7 +295,7 @@ i-amphtml-sizer {
  * [width][height][sizes] and [width][height][heights] imply layout=responsive
  * before the element has resolved.
  */
-.i-amphtml-notbuilt:not(.i-amphtml-layout-container) > * ,
+.i-amphtml-notbuilt:not(.i-amphtml-layout-container) > *,
 [layout]:not([layout=container]):not(.i-amphtml-element) > *,
 [width][height][sizes]:not([layout]):not(.i-amphtml-element) > *,
 [width][height][heights]:not([layout]):not(.i-amphtml-element) > *
@@ -272,6 +303,26 @@ i-amphtml-sizer {
   display: none;
 }
 
+/**
+ * We special case the native <img> inside an SSR'd <amp-img>. We allow this to
+ * display using `block` defined by .i-amphtml-fill-content.
+ *
+ * As more elements get SSR, we'll need to add their special cases here.
+ */
+amp-img:not(.i-amphtml-element)[i-amphtml-ssr] > img.i-amphtml-fill-content
+{
+  display: block;
+}
+
+/** Hide all text node children of non-container elements. */
+.i-amphtml-notbuilt:not(.i-amphtml-layout-container),
+[layout]:not([layout='container']):not(.i-amphtml-element),
+[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element),
+[width][height][heights]:not([layout]):not(.i-amphtml-element) {
+  color: transparent !important;
+  line-height: 0 !important;
+}
+
 .i-amphtml-ghost {
   visibility: hidden !important;
 }
@@ -291,9 +342,12 @@ i-amphtml-sizer {
 .i-amphtml-element > [placeholder],
 [layout]:not(.i-amphtml-element) > [placeholder],
 [width][height][sizes]:not([layout]):not(.i-amphtml-element) > [placeholder],
-[width][height][heights]:not([layout]):not(.i-amphtml-element) > [placeholder]
-{
+[width][height][heights]:not([layout]):not(.i-amphtml-element) > [placeholder] {
   display: block;
+  /* line-height:normal overrides line-height:0 from the "hide all children of
+     non-container text node children" rule. This avoids a minor content jump during
+     element build since placeholders should be fully visible. */
+  line-height: normal;
 }
 
 .i-amphtml-element > [placeholder].hidden,
@@ -323,6 +377,14 @@ i-amphtml-sizer {
   z-index: 1;
 }
 
+/* We reset the z-index of blurry image placeholders for images that are
+   rendered by the server and are not (yet) controlled by JS to speed up
+   display of the real image. This conveniently also fixes the display of
+   the image when JS fails to load. */
+amp-img.i-amphtml-ssr:not(.i-amphtml-element) > [placeholder] {
+  z-index: auto;
+}
+
 .i-amphtml-notbuilt > [placeholder] {
   display: block !important;
 }
@@ -393,9 +455,18 @@ i-amphtml-scroll-container.amp-active, i-amp-scroll-container.amp-active {
   z-index: 2;
   visibility: hidden;
   /* display:initial overrides display:none from the "hide all children of
-     non-container elements" rule. This avoids a minor content jump after
+     non-container elements" rule. Similarly, line-height:normal overrides
+     line-height:0 for text node children. This avoids a minor content jump after
      element build since overflows increase the height of their parents. */
   display: initial;
+  line-height: normal;
+}
+
+/**
+ * "overflow" element must not contribute space to a size-defined element.
+ */
+.i-amphtml-layout-size-defined > [overflow] {
+  position: absolute;
 }
 
 .i-amphtml-element > [overflow].amp-visible {
@@ -426,7 +497,7 @@ amp-pixel {
 /**
  * Analytics & amp-story-auto-ads tags should never be visible. keep them hidden.
  */
-amp-analytics, amp-story-auto-ads {
+amp-analytics, amp-story-auto-ads, amp-auto-ads {
   /* Fixed to make position independent of page other elements. */
   position: fixed !important;
   top: 0 !important;
@@ -468,6 +539,27 @@ amp-accordion {
   display: block !important;
 }
 
+/**
+ * This media query is used instead of @supports due to low compatibility.
+ * At the time of this change (4/6/2021) no version of Webkit support @supports queries.
+
+ * These provide low-specificity UI styles to prevent CLS for the header and content
+ * segments of accordions. The same styles are later set and extended with interactive
+ * styles for older browsers via the `i-amphtml-accordion-header` class in both 0.1 and
+ * the 1.0 version of accordion.
+ */
+@media (min-width: 1px) {
+  :where(amp-accordion > section) > :first-child {
+    margin: 0;
+    background-color: #efefef;
+    padding-right: 20px;
+    border: 1px solid #dfdfdf;
+  }
+  :where(amp-accordion > section) > :last-child {
+    margin: 0;
+  }
+}
+
 /* Make sections non-floatable */
 amp-accordion > section {
   float: none !important;
@@ -487,11 +579,11 @@ amp-accordion > section {
 }
 
 /* Collapse content by default. */
-amp-accordion > section > :last-child {
+amp-accordion:not(.i-amphtml-built) > section > :last-child {
   display: none !important;
 }
 
 /* Expand content when needed. */
-amp-accordion > section[expanded] > :last-child {
+amp-accordion:not(.i-amphtml-built) > section[expanded] > :last-child {
   display: block !important;
 }
diff --git a/css/video-autoplay.css b/css/video-autoplay.css
index 78d0fc55ee0b2..ed28fb8c94506 100644
--- a/css/video-autoplay.css
+++ b/css/video-autoplay.css
@@ -13,9 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-i-amphtml-video-mask {
+.i-amphtml-video-mask {
   display: block;
   z-index: 1;
+  appearance: none;
+  background: transparent;
+  border: none;
 }
 
 
@@ -57,13 +60,13 @@ amp-story .amp-video-eq {
   width: 20px;
   z-index: 1;
 }
-.amp-video-eq .amp-video-eq-col {
+.amp-video-eq-col {
   flex: 1;
   height: 100%;
   margin-right: 1px;
   position: relative;
 }
-.amp-video-eq .amp-video-eq-col div {
+.amp-video-eq-col div {
   animation-name: amp-video-eq-animation;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
@@ -74,16 +77,10 @@ amp-story .amp-video-eq {
   width: 100%;
   will-change: transform;
 }
-.amp-video-eq .amp-video-eq-col div {
+.amp-video-eq-col div {
   animation-play-state: paused;
 }
-.amp-video-eq[unpausable] .amp-video-eq-col div {
-  animation-name: none;
-}
-.amp-video-eq[unpausable].amp-video-eq-play .amp-video-eq-col div {
-  animation-name: amp-video-eq-animation;
-}
-.amp-video-eq.amp-video-eq-play .amp-video-eq-col div {
+.amp-video-eq-play .amp-video-eq-col div {
   animation-play-state: running;
 }
 .amp-video-eq-1-1 {
diff --git a/docs/OWNERS b/docs/OWNERS
new file mode 100644
index 0000000000000..82ba3f327aa1d
--- /dev/null
+++ b/docs/OWNERS
@@ -0,0 +1,14 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {name: 'mrjoro'},
+        {name: 'ampproject/wg-infra', requestReviews: false},
+        {name: 'ampproject/wg-outreach', requestReviews: false},
+      ],
+    },
+  ],
+}
diff --git a/docs/amp-module-build.md b/docs/amp-module-build.md
new file mode 100644
index 0000000000000..87c428c2ec3de
--- /dev/null
+++ b/docs/amp-module-build.md
@@ -0,0 +1,78 @@
+# AMP Module Build
+
+## Explainer
+
+ES Modules is an official, standardized module system for JavaScript. However, on the AMP Project and for many in the wider web community, they are also an inflection point for supported JavaScript features from user-agents that is declarative and well known. When a browser supports ES Modules we can infer it also supports other modern features that were implemented before ES Modules were introduced. These include classes, promises, async/await, css variables, custom elements, window.fetch, let/const, arrow functions, and Shadow DOM. Like others, we're using this signal to remove polyfills and leverage modern JavaScript syntax more closely mirroring our authored source. Even better, this output is significantly terser than our previous output (which was compiled to ~ECMAScript 5) and helps improve performance for all AMP Documents.
+
+The [module/nomodule pattern](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) is a way to load the modern "module" build of the AMP runtime in a way were there would still be a fallback "nomodule" build if the browser does not support ES Modules.
+
+The HTML markup would look like:
+
+```html
+<script type="module" async src="https://www.ampproject.org/v0.mjs"></script>
+<script nomodule async src="https://www.ampproject.org/v0.js"></script>
+```
+
+## Recommended Browser Support for Module build
+
+There are some idiosyncrasies to how the module/nomodule pattern is loaded in
+different browsers so we must take care in selecting the browsers we apply the
+module/nomodule pattern.
+
+Some AMP environments such as a normal web page, or an AMP story page may be
+OK with "double fetching" where the browser will request both the module and
+nomodule build, but environments like AMP for Ads are more sensitive to
+additional request and might not be OK with the double fetching.
+
+The Original documentation/source for the table and summary below can be found [here](https://gist.github.com/jakub-g/5fc11af85a061ca29cc84892f1059fec).
+
+| IE/Edge | Firefox | Chrome | Safari  | fetches module | fetches nomodule | executes |      |
+| :-----: | :-----: | :----: | :-----: | :------------: | :--------------: | :------: | ---- |
+|   15-   |   59-   |  55-   |  10.0-  |       v        |        v         | nomodule | ❌   |
+|   16    |         |        | 10.1/3  |       v        |        v         |  module  | ❌   |
+|  17-18  |         |        |         |    double!     |        v         |  module  | ❌❌ |
+|         |         | 56-60  |         |                |        v         | nomodule | ✅   |
+|         |   60+   |  61+   | 11.0+\* |       v        |                  |  module  | ✅   |
+
+Summary:
+
+-   ✅ no browser does double execution (provided [the Safari hack](https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc))
+-   ✅ modern Chrome and Firefox never fetch more than necessary
+-   ⚠ Safari <11 may or may not double fetch (even with the hack); it does not on small test pages, but in real complex pages it does (it seems deterministic, but not clear what's the exact trigger)
+-   ⚠ Safari 11+ may still double fetch in some cases (see https://bugs.webkit.org/show_bug.cgi?id=194337)
+-   ❌ pre-2018 browsers do double fetches
+-   ❌❌ latest Edge does triple fetch (2x module + 1x nomodule)
+
+The AMP Project recommends applying the module/nomodule pattern for Google Chrome, Microsoft Edge >= 79, Safari >= 11, and Firefox >= 60.
+
+For other user-agents, we recommend sticking with the traditional single script loading model as part of our standard boilerplate.
+
+Specifically, this will help avoid the double or triple fetching issues (denoted by an ❌in the table above).
+
+## High Level Detailed Difference in Output
+
+We use the [babel preset-env plugin](https://babeljs.io/blog/2020/03/16/7.9.0) with `{bugfixes: true}` enabled to support module builds.
+
+At a high level we now avoid compiling the following in the AMP "module" output:
+
+-   classes
+-   arrow functions
+-   async/await
+-   Object and Array spreads
+-   Array destructuring
+
+We Also remove the following polyfills:
+
+-   document.contains
+-   DOMTokenList
+-   window.fetch
+-   Math.sign
+-   Object.assign
+-   Object.values
+-   Promises
+-   Array.includes
+-   CSS.escape()
+
+## Report a bug
+
+[File an issue](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Bug&template=bug-report.yml) if you find a bug in AMP. Provide a detailed description and steps for reproducing the bug; screenshots and working examples that demonstrate the problem are appreciated!
diff --git a/docs/build-on-duty.md b/docs/build-on-duty.md
new file mode 100644
index 0000000000000..4ca35d8fbfbb0
--- /dev/null
+++ b/docs/build-on-duty.md
@@ -0,0 +1,33 @@
+# AMP Build On-Duty
+
+The AMP build on-duty is responsible for ensuring that the [main branch build](https://app.circleci.com/pipelines/github/ampproject/amphtml?branch=main) remains green. The AMP build on-duty responsibility rotates between members of the community.
+
+Make sure you are a member of the [#contributing](https://amphtml.slack.com/messages/C9HRJ1GPN) channel on Slack while you are build on-duty.
+
+-   If the build has been red for some time, please send a note to the #contributing channel if the issue is not already reported.
+-   Pay attention for reports of issues with the build that the community may send to this channel. (You may want to enable notifications for this channel while you are build on-duty to make this easier.)
+
+## Build On-Duty Tasks
+
+1. Ensure the [main branch build](https://app.circleci.com/pipelines/github/ampproject/amphtml?branch=main) remains green. Your goal is to keep the build from being red for more than an hour.
+    1. Note that yellow builds are in the process of being created/tested so you do not need to do anything special with them.
+    2. Keep an eye out for emails sent to an address starting with amp-build-on-duty. **You are encouraged to set up a filter so that these emails will stand out to you.**
+    3. You will need to investigate whether a red build is due to a flake or due to a real issue.
+        - If the issue is due to a flaky test:
+            - Create a ["Related to: Flaky Tests" issue](https://github.com/ampproject/amphtml/issues?q=is%3Aopen+is%3Aissue+label%3A%22Related+to%3A+Flaky+Tests%22). **Make sure to find an appropriate owner for the issue and assign it to them.**
+            - If needed, send a PR to disable the flaky test:
+                - For a normal `describe` test add [`.skip()`](https://mochajs.org/#inclusive-tests)
+                - For an integration test failing on a specific browser, add the corresponding `skip` function (e.g. `skipEdge()`). See the `skipXXX` functions in [testing/test-config.js](https://github.com/ampproject/amphtml/blob/main/testing/test-config.js) for details.
+            - Restart the failing parts of the build build on CircleCI by clicking the `Rerun workflow from failed` button on the build page (you must be signed into GitHub).
+        - If the issue is due to a real breakage, work with the appropriate owner to rollback the offending PR. Rollbacks are preferable to fixes because fixes can often cause their own breakages.
+2. Keep an eye on incoming [Renovate PRs](https://github.com/ampproject/amphtml/pulls/renovate-bot), which result from an automated process to update our dependencies.
+    1. Make sure that the PR updates both package.json and package-lock.json
+    2. Check the CircleCI logs for the PR for any new failures or unexpected results
+        - If there’s a failure due to a flaky test, try restarting the job that failed
+        - If that doesn’t work, try syncing the branch to HEAD by checking the `rebase/retry` checkbox in the PR description (tests will automatically be re-run)
+        - If neither of the above works, it’s possible that the package update is a breaking change.
+            - If you know how to fix the breaking change, follow the instructions by expanding the `How to resolve breaking changes` section of the PR description.
+            - If not, assign the PR to someone who can look at what changed and determine how to fix it.
+    3. Assuming the CircleCI build was green, make sure there are no diffs in the Percy build.
+        - If there are diffs that look like flakes, click “Approve” on the Percy build to unblock the PR (and ping @danielrozenberg as an FYI).
+    4. Approve and merge the PR.
diff --git a/docs/building-a-bento-amp-extension.md b/docs/building-a-bento-amp-extension.md
new file mode 100644
index 0000000000000..9ec85cede7c0f
--- /dev/null
+++ b/docs/building-a-bento-amp-extension.md
@@ -0,0 +1,678 @@
+# Building a Bento AMP Component
+
+AMP is extendable, allowing the creation of custom elements and functionality in form of AMP components. For example, AMP provides `amp-accordion`, `amp-base-carousel` and `amp-sidebar` as components, extending AMP.
+
+Bento AMP is a project that allows you to take AMP components and use them in otherwise non-AMP pages. The only requirement of a Bento component is that is be fully functional on non-AMP pages.
+
+Read this document to learn how to create a new Bento AMP component.
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+<!-- {"maxdepth": 2} -->
+
+-   [Getting started](#getting-started)
+-   [Naming](#naming)
+-   [Directory structure](#directory-structure)
+-   [Extend AMP.PreactBaseElement](#extend-amppreactbaseelement)
+    -   [Element and Component classes](#element-and-component-classes)
+    -   [PreactBaseElement callbacks](#preactbaseelement-callbacks)
+    -   [AMP/Preact Bridge](#amppreact-bridge)
+-   [Element styling](#element-styling)
+-   [Register element with AMP](#register-element-with-amp)
+-   [Actions and events](#actions-and-events)
+-   [Allowing proper validation](#allowing-proper-validation)
+-   [Performance considerations](#performance-considerations)
+    -   [Loading external resources](#loading-external-resources)
+-   [Layouts supported in your element](#layouts-supported-in-your-element)
+    -   [What layout should your element support?](#what-layout-should-your-element-support)
+-   [Experiments](#experiments)
+    -   [Enabling and removing your experiment](#enabling-and-removing-your-experiment)
+-   [Documenting your extended Bento component](#documenting-your-extended-bento-component)
+-   [Build an example](#build-an-example)
+-   [Updating build configs](#updating-build-configs)
+-   [Versioning](#versioning)
+-   [Using Storybook](#using-storybook)
+-   [Unit tests](#unit-tests)
+-   [Linting and formatting](#linting-and-formatting)
+-   [Type checking](#type-checking)
+-   [Example PRs](#example-prs)
+
+## Getting started
+
+The first step to creating a new Bento AMP component is familiarizing yourself with [AMP's contributor guidelines](https://go.amp.dev/contribute/code). Adding new components follow the [process for making a significant change](https://go.amp.dev/contribute/code#process-for-significant-changes). This process includes filing an ["Intent to Implement" issue](https://go.amp.dev/i2i) and working with an assigned AMP developer guide before starting significant work.
+
+To bootstrap the creation of a new component (or the Bento version of an existing component), the following command will create the directory structure and boilerplate code for you:
+
+```shell
+$ amp make-extension --bento --name=amp-my-element
+```
+
+This generates CSS used by the AMP element `<amp-my-element>`, and JSS used by the Preact component `<MyElement>`. To exclude either, you may additionally specify `--nocss` and/or `--nojss`.
+
+## Naming
+
+All Bento AMP component extensions have their tag names prefixed with `amp-`.
+Make sure to choose an accurate and clear name for your extension.
+
+Extensions that embed a third-party service must follow the [guidelines for naming a third-party component](../docs/spec/amp-3p-naming.md).
+
+## Directory structure
+
+Create your extension's files inside the `extensions/` directory.
+The directory structure is below:
+
+```sh
+/extensions/amp-my-element/
+├── 1.0/
+|   ├── storybook/                       # Element's manual sample playground (req'd)
+|   |   ├── Basic.js                     # Preact usage examples
+|   |   ├── Basic.amp.js                 # AMP usage examples
+|   ├── test/                            # Element's unit test suite (req'd)
+|   |   ├── test-amp-my-element.js
+|   |   └── More test JS files (optional)
+|   ├── base-element.js                  # Preact base element (req'd)
+|   ├── component.js                     # Preact implementation (req'd)
+|   ├── component.type.js                # Preact type definitions (req'd)
+|   ├── amp-my-element.js                # Element's implementation (req'd)
+|   ├── amp-my-element.css               # Custom CSS (optional)
+|   ├── component.jss.js                 # Preact JSS (optional)
+|   └── More JS files (optional)
+├── validator-amp-my-element.protoascii  # Validator rules (req'd)
+├── amp-my-element.md                    # Element's main documentation (req'd)
+└── More documentation in .md files (optional)
+└── OWNERS                               # Owners file. Primary contact(s) for the extension. (req'd)
+```
+
+In most cases you'll only create the required (req'd) files. If your element does not need custom CSS or JSS, you don't need to create those files.
+
+## Extend AMP.PreactBaseElement
+
+Most AMP component extend `AMP.BaseElement`. `AMP.BaseElement` provides hookups and callbacks needed to implement and customize behavior. Callback explanations are in the BaseElement Callbacks section of [Building an AMP Extension](https://github.com/ampproject/amphtml/blob/main/docs/building-an-amp-extension.md), and inlined in the [BaseElement](https://github.com/ampproject/amphtml/blob/main/src/base-element.js)
+class.
+
+Important: Bento-enabled AMP components built upon a Preact component must also be usable in insolation in React development contexts.
+
+All Preact-based Bento AMP extensions extend `AMP.PreactBaseElement`, which builds upon
+`BaseElement` to extricate the component implementation from the aforementioned
+callbacks. Bento AMP extensions differ from AMP extensions because they are self-managing and independent, and therefore usable in a wider range of contexts beyond AMP pages, while still being fully integrated with the AMP environment
+in a fully AMP document.
+
+The configurations which bridge the Preact implementation of the component and its custom element counterpart in an HTML or AMP document are explained in the [AMP/Preact Bridge](#amppreact-bridge) section, and the callbacks which handle AMP- and DOM- specific mutability traits are explained in the [PreactBaseElement Callbacks](#preactbaseelement-callbacks) section. All of these are also explained inline in the [PreactBaseElement](https://github.com/ampproject/amphtml/blob/main/src/preact/base-element.js) class.
+
+### Element and Component classes
+
+The following shows the overall structure of your element implementation
+file (`extensions/amp-my-element/0.1/amp-my-element.js`). See [Experiments](#experiments) to make sure your component is experimentally gated if necessary.
+
+```js
+import {func1, func2} from '../../../src/module';
+import {BaseElement} from './my-element'; // Preact base element.
+import {CSS} from '../../../build/amp-my-element-0.1.css';
+// more ES2015-style import statements.
+
+/** @const */
+const EXPERIMENT = 'amp-my-element';
+
+/** @const */
+const TAG = 'amp-my-element';
+
+class AmpMyElement extends BaseElement {
+  /** @override */
+  init() {
+    // Perform any additional processing of prop values that are not
+    // straightforward attribute passthroughs, as well as AMP-specific
+    // work such as registering actions and events.
+    this.registerApiAction('close', (api) => api.close());
+
+    const processedProp = parseInt(element.getAttribute('data-binary'), 2);
+    return dict({
+      'processedProp': processedProp,
+      'onClose': (event) => fireAmpEvent(event)}
+    );
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout == LAYOUT.FIXED;
+  }
+}
+
+AMP.extension('amp-my-element', '0.1', (AMP) => {
+  AMP.registerElement('amp-my-element', AmpMyElement, CSS);
+});
+```
+
+The following shows the corresponding overall structure of your Preact base element implementation file (extensions/amp-my-element/0.1/base-element.js).
+
+```js
+import {MyElement} from './component'; // Preact component.
+import {PreactBaseElement} from '../../../src/preact/base-element'; // Preact component.
+
+export class BaseElement extends PreactBaseElement;
+
+BaseElement['Component'] = MyElement;            // Component definition.
+
+BaseElement['props'] = {  // Map DOM attributes and children to Preact Component props.
+  'button': {selector: 'button', clone: true} // All <button> children.
+  'children': {passthrough: true} // All remaining children excluding <button>s, which have already been distributed.
+  'propName1': {attr: 'attr-name-1'},
+  'propName2': {attr: 'attr-name-2', type: 'number'},
+};
+```
+
+The following shows the corresponding overall structure of your Preact functional component implementation file (extensions/amp-my-element/0.1/component.js).
+
+```js
+import * as Preact from '../../../src/preact';
+import {func1, func2} from '../../../src/module';
+// more ES2015-style import statements.
+
+export function MyElement({propName1, propName2, ...rest}) {
+  // Assign state variables or other behaviors using Preact
+  // lifecycle hooks such as useRef, useState, useEffect, etc.
+  const [foo, useFoo] = useState(null);
+
+  // Render component via JSX syntax.
+  return (
+    <div>Hello world</div>
+  );
+}
+```
+
+### PreactBaseElement callbacks
+
+#### checkPropsPostMutations
+
+-   **Default**: Optional.
+-   **Override**: Rarely.
+-   **Usage**: The callback called immediately after a component's defined props mutate. This can verify if any additional properties need mutations via `mutateProps()` API.
+-   **Example Usage**: `amp-date-display`
+
+#### isReady
+
+-   **Default**: Optional.
+-   **Override**: Rarely.
+-   **Usage**: States whether the element is ready for rendering. Used if there are additional processing requirements needed before rendering the component. This includes providing rendering templates or defining critical asynchronous props.
+-   **Example Usage**: `amp-date-countdown`, `amp-date-display`
+
+#### init
+
+-   **Default**: Optional.
+-   **Override**: Sometimes, if additional processing is needed in the DOM.
+-   **Usage**: If your extension 'props' definition is not sufficient, or when registering AMP actions and events.
+-   **Example Usage**: `amp-base-carousel`, `amp-lightbox`
+
+#### mutationObserverCallback
+
+-   **Default**: Optional.
+-   **Override**: Sometimes, if additional processing is needed to make the DOM mutable.
+-   **Usage**: A callback called immediately after mutations have been observed on a component. This differs from `checkPropsPostMutations` in that it is called in all cases of mutation, not just the subset of attributes configured in the extension 'props' definition.
+-   **Example Usage**: `amp-base-carousel`, `amp-sidebar`
+
+#### updatePropsForRendering
+
+-   **Default**: Optional.
+-   **Override**: Sometimes, if additional processing is needed in the DOM.
+-   **Usage**: A callback called to compute props before rendering. The properties computed here are ephemeral and thus should not persist via a `mutateProps()` method.
+-   **Example Usage**: `amp-timeago`
+
+### AMP/Preact Bridge
+
+#### PreactBaseElement['Component']
+
+-   **Default**: Required.
+-   **Override**: Always.
+-   **Usage**: Define the corresponding Preact functional component.
+-   **Example Usage**: `amp-fit-text`, `amp-timeago`
+
+#### PreactBaseElement['props']
+
+-   **Default**: Optional.
+-   **Override**: Almost always.
+-   **Usage**: Define the mapping of Preact prop to AmpElement DOM attributes and children. These will update and re-render the component on DOM mutation.
+-   **Example Usage**: `amp-base-carousel`, `amp-lightbox`
+
+#### PreactBaseElement['staticProps']
+
+-   **Default**: Optional.
+-   **Override**: Almost always.
+-   **Usage**: Define the mapping of Preact prop to AmpElement DOM attributes. These will not update or re-render the component on DOM mutation. Can be used in lieu of init().
+-   **Example Usage**: n/a
+
+#### PreactBaseElement['className']
+
+-   **Default**: Optional.
+-   **Override**: Rarely.
+-   **Usage**: Specify an exact className prop to Preact.
+-   **Example Usage**: n/a
+
+#### PreactBaseElement['layoutSizeDefined']
+
+-   **Default**: Optional.
+-   **Override**: Sometimes.
+-   **Usage**: Specify that the component requires `layoutSizeDefined`, meaning it can have a layout of any of the following: `fixed`, `fixed-height`, `responsive`, `fill`, `flex-item`, `fluid`, or `intrinsic`. Learn more about how to use this in [Layouts supported in your element](#layouts-supported-in-your-element) or generally with [layouts in AMP](https://amp.dev/documentation/guides-and-tutorials/learn/amp-html-layout).
+-   **Example Usage**: n/a
+
+#### PreactBaseElement['loadable']
+
+-   **Default**: Optional.
+-   **Override**: Required for any component that makes network requests (directly or via other DOM elements). Optional otherwise.
+-   **Usage**: Indicates a resource intensive component to allow granular control of when it should load and unload.
+-   **Example Usage**: `amp-instagram`, `amp-video`
+
+#### PreactBaseElement['shadowCss']
+
+-   **Default**: Optional.
+-   **Override**: Required CSS when using shadow DOM.
+-   **Usage**: Define the CSS for shadow stylesheets.
+-   **Example Usage**: `amp-lightbox`, `amp-sidebar`
+
+#### PreactBaseElement['usesShadowDom']
+
+-   **Default**: Optional.
+-   **Override**: Rarely.
+-   **Usage**: Notify when the element uses the Shadow DOM.
+-   **Example Usage**: `amp-social-share`, `amp-youtube`
+
+#### PreactBaseElement['usesTemplate']
+
+-   **Default**: Optional.
+-   **Override**: Rarely.
+-   **Usage**: Notify when the element uses the template system.
+-   **Example Usage**: `amp-date-countdown`, `amp-date-display`
+
+#### Ways to process children (mutually exclusive)
+
+##### PreactBaseElement['lightDomTag']
+
+-   **Default**: Optional.
+-   **Override**: Sometimes.
+-   **Usage**: The tag name used when rendering into the light DOM. Used when children contents are overwritten.
+-   **Example Usage**: `amp-date-countdown`, `amp-date-display`
+
+##### PreactBaseElement['detached']
+
+-   **Default**: Optional.
+-   **Override**: Sometimes.
+-   **Usage**: Define if user-supplied children must be referenced and coordinated with the internal state of the Preact component, but the component itself should not be visible (in favor of viewing the light DOM children).
+-   **Example Usage**: `amp-accordion`, `amp-selector`
+
+## Element styling
+
+You can write a stylesheet to style your element to provide a minimal
+visual appeal. Your element structure should account for whether you
+want users (publishers and developers using your element) to customize
+the default styling you're providing and allow for easy CSS classes
+and/or well-structure DOM elements.
+
+Element styles load with the element script inside an AMP document. You tell AMP which CSS or JSS belongs to this element when registering the element (see below).
+
+## Register element with AMP
+
+Once you have implemented your AMP element, you need to register it with
+AMP; all AMP component extensions include the `amp-` prefix.
+
+One way to specify the appropriate styles is to tell AMP which class to use for this tag name and which CSS to load.
+
+```javascript
+import {CSS} from '../../../build/amp-my-element-0.1.css';
+
+AMP.extension('amp-my-element', '0.1', (AMP) => {
+  AMP.registerElement('amp-my-element', AmpMyElement, CSS);
+});
+```
+
+Alternatively, you may have defined styles via JSS that compile into CSS and attached via the shadow stylesheet. To tell AMP which class to use, override the `shadowCss` property:
+
+```javascript
+import {CSS} from './my-element.jss';
+
+/** @override */
+AmpMyElement['shadowCss'] = CSS;
+```
+
+## Actions and events
+
+AMP provides a framework for [elements to fire their own
+events](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-actions-and-events.md)
+to allow users of that element to listen and react to the events. For
+example, the `amp-base-carousel` extension fires a `slideChange` event.
+This allow publishers to listen to that event and react to it, for example, by updating an `amp-selector` state to match the current slide shown.
+
+The other part of the event-system in AMP is actions. When listening to
+an event on an element usually you'd like to trigger an action (possibly
+on other elements). For example, in the example above, the publisher is
+executing the `toggle` action on `amp-selector`.
+
+The syntax for using this on elements is as follow:
+
+```html
+<amp-base-carousel
+  on="slideChange:my-selector.toggle(index=e.index, value=true)"
+></amp-base-carousel>
+```
+
+To fire events on your element use AMP's action service and the
+`.trigger` method.
+
+```javascript
+actionServiceForDoc(doc.documentElement).trigger(
+  this.element_,
+  'slideChange',
+  createCustomEvent(
+    win,
+    `amp-base-carousel.${name}`,
+    dict({'index': index})
+  ),
+  ActionTrust.DEFAULT
+);
+```
+
+And to expose actions use `registerApiAction` method that your element
+inherits from `PreactBaseElement`. Note, this should correspond directly with the API exposed in the corresponding Preact compnent via [`useImperativeHandle`](https://reactjs.org/docs/hooks-reference.html#useimperativehandle), and the component should be defined using a [`forwardRef`](https://preactjs.com/guide/v10/switching-to-preact/#forwardref) accordingly.
+
+```javascript
+this.registerApiAction('close', (api) => api.close());
+```
+
+Your element can choose to override the default `activate` method inherited from BaseElement. For example `amp-lightbox` overrides `activate` to define the `open` default case.
+
+You must document your element's actions and events in its own reference documentation and in [`AMP Actions and Events`](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-actions-and-events.md).
+
+## Allowing proper validation
+
+One of AMP's features is documentation validation checks to confirm it's valid AMP. When you implement your element, you must update the [AMP Validator](https://github.com/ampproject/amphtml/blob/main/validator/README.md)
+to include rules for your element. Otherwise documents using your extended component become invalid. Create your own rules by following the directions at
+[Contributing Component Validator Rules](https://github.com/ampproject/amphtml/blob/main/docs/component-validator-rules.md).
+
+## Performance considerations
+
+### Loading external resources
+
+You may need to add third party integration for extended components that need to load external resources, such as an SDK. Loading resources is only allowed inside a third party iframe. AMP serves this on a different domain for security and performance reasons. Take a look at adding
+[`amp-facebook`](https://github.com/ampproject/amphtml/pull/1479/files)
+extension PR for examples of third party integration.
+
+Read about [Inclusion of third party software, embeds and services into
+AMP](https://github.com/ampproject/amphtml/blob/main/3p/README.md).
+
+For contrast, take a look at `amp-instagram` which does NOT require an SDK to embed a post. Instead, it provides an iframe-based embedding that allows `amp-instagram` to use a normal iframe with no third party integrations. `amp-youtube` and others work similarly.
+
+## Layouts supported in your element
+
+AMP defines different layouts that elements can choose whether or not to
+support. Your element needs to announce which layouts it supports through
+overriding the `isLayoutSupported(layout)` callback and returning true
+if the element supports that layout. [Read more about AMP Layout
+System](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md)
+and [Layout
+Types](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md#layout).
+
+### What layout should your element support?
+
+After understanding each layout type, if it makes sense, support all of
+them. Otherwise choose what makes sense to your element. A popular
+support choice is to support size-defined layouts (Fixed, Fixed Height,
+Responsive and Fill) through using the utility `isLayoutSizeDefined`
+in `layout.js`.
+
+For example, `amp-inline-gallery-thumbnails` only supports fixed-height layout.
+
+```javascript
+class AmpPixel extends BaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout == Layout.FIXED_HEIGHT;
+  }
+}
+```
+
+While `amp-base-carousel` supports all size-defined layouts.
+
+```javascript
+class AmpBaseCarousel extends AMP.BaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+}
+```
+
+Please note that for components that support all size-defined layouts, they also need to override the `layoutSizeDefined` property as follows:
+
+```javascript
+/** @override */
+AmpBaseCarousel['layoutSizeDefined'] = true;
+```
+
+## Experiments
+
+Most newly created elements are initially launched as
+[experiments](https://github.com/ampproject/amphtml/blob/main/tools/experiments/README.md).
+This allows people to experiment with using the new element and provide
+the author(s) with feedback. It also provides the AMP Team with the
+opportunity to monitor for any potential errors. This is especially required if the validator isn't updated with your extended component rules. Without your rules in the validator, documents using the component in production are invalid.
+
+Add your extension as an experiment in the
+`amphtml/tools/experiments` file by adding a record for your extension
+in EXPERIMENTS variable.
+
+```javascript
+/** @const {!Array<!ExperimentDef>} */
+const EXPERIMENTS = [
+  // ...
+  {
+    id: 'bento-my-element',
+    name: 'AMP My Element',
+    spec:
+      'https://github.com/ampproject/amphtml/blob/main/extensions/' +
+      'amp-my-element/amp-my-element.md',
+    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/XXXYYY',
+  },
+  // ...
+];
+```
+
+Then protect your code with a check for the component-specific flag `isExperimentOn(win, 'bento-my-element')`, or the global flag which enables all Bento components `isExperimentOn(win, 'bento')`, and only execute your code when it is on.
+
+```javascript
+import {CSS} from '../../../build/amp-my-element-0.1.css';
+import {isExperimentOn} from '../../../src/experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const */
+const TAG = 'amp-my-element';
+
+class AmpMyElement extends AMP.PreactBaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-my-element'),
+      'expected global "bento" or specific "bento-my-element" experiment to be enabled'
+    );
+    return layout == LAYOUT.FIXED;
+  }
+}
+
+AMP.extension('amp-my-element', '0.1', AMP => {
+  AMP.registerElement('amp-my-element', AmpMyElement, CSS);
+});
+```
+
+### Enabling and removing your experiment
+
+Users wanting to experiment with your element can then go to the
+[experiments page](https://cdn.ampproject.org/experiments.html) and
+enable your experiment.
+
+If you are testing on your localhost, use the command `AMP.toggleExperiment(id, true/false)` to enable the experiment. One option is to use `AMP.toggleExperiment('bento', true)` to enable all Bento components at once.
+
+File a GitHub issue to cleanup your experiment. Assign it to yourself as a reminder to remove your experiment and code checks. Removal of your experiment happens after the extension has been thoroughly tested and all issues have been addressed.
+
+## Documenting your extended Bento component
+
+Create a `.md` file that serves as the main documentation for your element. This document should include:
+
+-   Summary table
+-   Overview
+-   How to use it including code snippets and images
+-   Examples
+-   Attributes to specify (optional and required)
+-   Validation
+
+For samples of element documentation, see: [`amp-accordion`](https://github.com/ampproject/amphtml/blob/main/extensions/amp-accordion/amp-accordion.md), [`amp-instagram`](https://github.com/ampproject/amphtml/blob/main/extensions/amp-instagram/amp-instagram.md), [`amp-stream-gallery`](https://github.com/ampproject/amphtml/blob/main/extensions/amp-stream-gallery/amp-stream-gallery.md)
+
+You must add a migration notes section for upgrades of existing AMP extended component. It should detail any differences between the new Bento and prior versions. For an example, reference the issue filed for [`amp-fit-text`](https://github.com/ampproject/amphtml/issues/28281).
+
+## Build an example
+
+Providing an example of your extended Bento component helps users understand how it works. It provides an easy starting point for developers to begin experimenting. This is where you actually build AMP HTML and non-AMP HTML documents and demonstrate element use. Create the file in the local `storybook/` directory, usually with the `Basic.amp.js` filename. There should also be a file which uses the component in a Preact environment with the Basic.js file name if applicable. Browse `storybook/` directories in other extended component directories to see examples. See how to view these samples on a local server in [Using Storybook](#using-storybook).
+
+Also consider contributing an example to
+[amp.dev](https://amp.dev/) on
+[GitHub](https://github.com/ampproject/amp.dev).
+
+## Updating build configs
+
+You must make changes to [`build-system/compile/bundles.config.extensions.json`](../build-system/compile/bundles.config.extensions.json) for your Bento component to successfully build. You will need to add an entry in the top-level array.
+
+```javascript
+exports.extensionBundles = [
+...
+  {name: 'amp-kaltura-player', version: '0.1', latestVersion: '0.1'},
+  {name: 'amp-carousel', version: '0.1', latestVersion: '0.1', options: {hasCss: true}},
+...
+];
+```
+
+Note, if you are providing a version upgrade (pre-existing 0.1 to Bento 1.0, for example), it is important to note that the latest version is the 0.1 until the 1.0 version is no longer experimental and fully launched. The following is the most straight-forward way to specify this:
+
+```javascript
+exports.extensionBundles = [
+...
+  {name: 'amp-my-element', version: ['0.1', '1.0'], latestVersion: '0.1', options: {hasCss: true}},
+...
+];
+```
+
+However, note that if one version is `hasCss: true` and the other is `hasCss: false`, they will require two separate entries:
+
+```javascript
+exports.extensionBundles = [
+...
+  {name: 'amp-my-element', version: '0.1', latestVersion: '0.1', options: {hasCss: true}},
+  {name: 'amp-my-element', version: '1.0', latestVersion: '0.1'},
+...
+];
+```
+
+## Versioning
+
+AMP runtime is currently in v0 major version. Extensions versions are
+maintained separately. If your changes to your non-experimental
+extension makes breaking changes that are not backward compatible you
+should version your extension. This would usually be by creating a 0.2
+directory next to your 0.1.
+
+When version 0.2 is under development, make sure that `latestVersion` is
+set to 0.1 for both the 0.1 and 0.2 entries in `extensionBundles`. Once 0.2
+is ready to be released, `latestVersion` can be changed to 0.2.
+
+If your extension is still in experiments breaking changes usually are
+fine so you can just update the same version.
+
+Note that Bento upgrades to existing AMP components should go by one major version, meaning it should create a 1.0 directory next to an existing 0.1 or 0.2.
+
+## Using Storybook
+
+To speed up development and testing of components, we recommend using the Storybook dashboard and develop "stories" (testing scenarios) for components. [Storybook](https://storybook.js.org/) has many features that assist with the isolated development and manual testing of components including easy manual interaction with component parameters, integrated accessibility auditing, and responsiveness testing.
+
+To run these environments and explore existing components, run:
+
+```
+amp storybook
+```
+
+## Unit tests
+
+Make sure you write good coverage for your code. We require unit tests
+for all checked in code. We use the following frameworks for testing:
+
+-   [Mocha](https://mochajs.org/), our test framework
+-   [Karma](https://karma-runner.github.io/), our tests runner
+-   [Sinon](http://sinonjs.org/), spies, stubs and mocks.
+-   [Enzyme](https://enzymejs.github.io/enzyme/), our Preact test utility.
+
+For faster testing during development, consider using --files argument
+to only run your extensions' tests.
+
+```shell
+$ amp unit --files=extensions/amp-my-element/0.1/test/test-amp-my-element.js --watch
+```
+
+Please also reference [Testing in AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/testing.md) for the full range of testing commands available.
+
+## Linting and formatting
+
+Run the following command to validates JS files against the ESLint linter.
+
+```shell
+$ amp lint --local_changes
+```
+
+Run the following command to validate non-JS files using Prettier.
+
+```shell
+$ amp prettify --local_changes
+```
+
+## Type checking
+
+We use Closure Compiler to perform type checking. Please see
+[Annotating JavaScript for the Closure
+Compiler](https://github.com/google/closure-compiler/wiki/Annotating-JavaScript-for-the-Closure-Compiler)
+and existing AMP code for examples of how to add type annotations to
+your code.
+
+The following shows the overall structure of your type definition
+file (extensions/amp-my-element/0.1/my-element.type.js). This will allow support of inline prop destructuring in Preact components.
+
+```javascript
+/** @externs */
+
+/**
+ * @typedef {{
+ *   propName1: (string|undefined),
+ *   propName2: (number|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+var MyElementProps;
+```
+
+Run the following command to ensure no type violations are introduced by your extension.
+
+```shell
+$ amp check-types
+```
+
+## Example PRs
+
+-   Adding general UI components
+    -   [amp-accordion](https://github.com/ampproject/amphtml/pull/30446)
+    -   [amp-sidebar](https://github.com/ampproject/amphtml/pull/31593)
+    -   [amp-timeago](https://github.com/ampproject/amphtml/pull/26507)
+    -   [amp-base-carousel](https://github.com/ampproject/amphtml/pull/29303)
+    -   [amp-stream-gallery](https://github.com/ampproject/amphtml/pull/30597)
+-   Adding video components which use `VideoWrapper`. [You may also follow the guide to Building a Bento Video Component.](./building-a-bento-video-player.md)
+    -   [amp-video](https://github.com/ampproject/amphtml/pull/30280)
+    -   [amp-vimeo](https://github.com/ampproject/amphtml/pull/33971)
+    -   [amp-youtube](https://github.com/ampproject/amphtml/pull/30444)
+-   Adding iframe based embeds
+    -   [amp-instagram](https://github.com/ampproject/amphtml/pull/30230)
diff --git a/docs/building-a-bento-video-player.md b/docs/building-a-bento-video-player.md
new file mode 100644
index 0000000000000..cd6418af9c555
--- /dev/null
+++ b/docs/building-a-bento-video-player.md
@@ -0,0 +1,616 @@
+# Building a Bento Video Player
+
+> **You should first read through the [guide to Building a Bento AMP Component](./building-a-bento-amp-extension.md).** Do not follow the steps to generate an extension, since they're specified here. Once you're familiar with the concepts related to AMP extensions and Bento components, follow this guide instead.
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+<!-- {"maxdepth": 3} -->
+
+-   [How Video Player Components Work](#how-video-player-components-work)
+-   [Getting Started](#getting-started)
+-   [Directory Structure](#directory-structure)
+-   [Extend `VideoBaseElement` for AMP](#extend-videobaseelement-for-amp)
+    -   [Pre-upgrade CSS](#pre-upgrade-css)
+    -   [`props`](#props)
+-   [Define a Preact component](#define-a-preact-component)
+    -   [Forwarding `ref`](#forwarding-ref)
+    -   [Loading an iframe with `VideoIframe`](#loading-an-iframe-with-videoiframe)
+        -   [`src`](#src)
+        -   [`origin`](#origin)
+        -   [Playback methods with `makeMethodMessage`](#playback-methods-with-makemethodmessage)
+        -   [Handling events with `onMessage`](#handling-events-with-onmessage)
+    -   [Use `VideoWrapper` directly](#use-videowrapper-directly)
+        -   [Specifying `component`](#specifying-component)
+        -   [Passing or overriding props](#passing-or-overriding-props)
+        -   [Imperative handle](#imperative-handle)
+-   [Completing your extension](#completing-your-extension)
+-   [Example Pull Requests](#example-pull-requests)
+
+## How Video Player Components Work
+
+AMP and Bento provide [default video player capabilities](https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-video-interface/) in order to create a uniform experience. For example, videos only autoplay while they're visible and muted, and they consistently unmute when clicked. They send the same event signals to [`amp-analytics`](https://go.amp.dev/c/amp-analytics), or may be pinned to a corner in the same way in combination with [`amp-video-docking`](https://go.amp.dev/c/amp-video-docking).
+
+On a host document, player components must dispatch the same events and implement the same methods so that playback and user interface can be coordinated successfully.
+
+**Preact components** can support this behavior by using a **`VideoWrapper`** that renders a specified `component`:
+
+```js
+return <VideoWrapper component="video" {...props} />
+```
+
+The `component` prop can be a string to specify a `<video>` element or an id reference to a component whose interface is similar to [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement).
+
+However, most video players are embedded through an iframe so they should use **`VideoIframe`** instead. This is a specialized `VideoWrapper` that doesn't require an underlying `component`:
+
+```js
+return <VideoIframe {...props}>
+```
+
+To enable component support for **AMP documents**, our video player element must extend from a base class `VideoBaseElement`. This enables [actions](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/#amp-video-and-other-video-elements_1) and [analytics](https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md), and allows us to define further behavior specific to the AMP layer, like parsing element attributes into Preact props.
+
+This guide covers how to implement video player components that are internally implemented using these Preact and AMP components.
+
+## Getting Started
+
+Start by generating an extension specifying `--bento` and `--nojss`. We name our extension **`amp-fantastic-player`**, ending with `-player` according to our [guidelines for naming a third-party component](../spec/amp-3p-naming.md).
+
+```console
+amp make-extension --bento --nojss --name=amp-fantastic-player
+```
+
+## Directory Structure
+
+A [full directory for a Bento component](./building-a-bento-amp-extension.md#directory-structure) is generated, but this guide will cover the following files in particular:
+
+```
+/extensions/amp-fantastic-player/1.0/
+ ├── base-element.js               # Preact base element
+ ├── component.js                  # Preact implementation
+ ├── amp-my-fantastic-player.js    # Element's implementation
+ └── amp-my-fantastic-player.css   # Custom CSS
+```
+
+## Extend `VideoBaseElement` for AMP
+
+Our `BaseElement` should be a superclass of `VideoBaseElement`. In **`base-element.js`**, we change:
+
+```diff
+  import {MyFantasticPlayer} from './component';
+- import {PreactBaseElement} from '../../../src/preact/base-element';
++ import {VideoBaseElement} from '../../amp-video/1.0/base-element';
+
+- export class BaseElement extends PreactBaseElement {}
++ export class BaseElement extends VideoBaseElement {}
+```
+
+into:
+
+```js
+// base-element.js
+// ...
+import {MyFantasticPlayer} from './component';
+import {VideoBaseElement} from '../../amp-video/1.0/base-element';
+
+export class BaseElement extends VideoBaseElement {}
+```
+
+This enables support for AMP actions and analytics, once we map attributes to their prop counterparts in `BaseElement['props']`, and we implement the Preact component.
+
+### Pre-upgrade CSS
+
+Bento components must specify certain layout properties in order to prevent [Cumulative Layout Shift (CLS)](https://web.dev/cls). Video extensions must include the following in the generated **`amp-fantastic-player.css`**:
+
+```css
+/* amp-fantastic-player.css */
+
+/*
+ * Pre-upgrade:
+ * - display:block element
+ * - size-defined element
+ */
+amp-fantastic-player {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Pre-upgrade: size-defining element - hide children. */
+amp-fantastic-player:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc) {
+  display: none;
+  content-visibility: hidden;
+}
+```
+
+### `props`
+
+[**`props`**](https://github.com/ampproject/amphtml/blob/main/docs/building-a-bento-amp-extension.md#preactbaseelementprops) map the AMP element's attributes to the Preact component props. Take a look at [`VideoBaseElement`](../extensions/amp-video/1.0/base-element.js) for how most video properties are mapped. On your own `base-element.js`, you should specify any of them you support.
+
+```js
+// base-element.js
+// ...
+/** @override */
+BaseElement['props'] = {
+  'autoplay': {attr: 'autoplay', type: 'boolean'},
+};
+```
+
+## Define a Preact component
+
+If you need to directly insert nodes to the document, like a `<video>` element, you need to use a `<VideoWrapper>`.
+
+However, it's more likely that you load a third-party iframe and you communicate with the host via `postMessage`. In this case you should use a `<VideoIframe>` as opposed to a `<VideoWrapper>`.
+
+> ⚠️ Components may **not** embed scripts from a third-party location into host documents. If a third-party script is absolutely required, like on `<amp-ima-video>`, it must be inserted in an intermediate iframe, which we call a **proxy frame**.
+>
+> Proxy frames on Bento have not yet been tested as video player components, so they're not covered in this guide. If you wish to use one, please get in touch with `@alanorozco` via a Github issue or on on [Slack](https://bit.ly/amp-slack-signup) in the [`#contributing` channel](https://amphtml.slack.com/messages/C9HRJ1GPN/).
+
+### Forwarding `ref`
+
+To enable AMP actions (`my-element.play`) and the Preact component's imperative handle (`myPlayerRef.current.play()`), you'll have to [`forwardRef`](https://reactjs.org/docs/forwarding-refs.html). Rename `FantasticPlayer` to `FantasticPlayerWithRef`, and export a `FantasticPlayer` that forwards a `ref` into the former.
+
+```diff
++ import {forwardRef} from '../../../src/preact/compat';
+
+- export function FantasticPlayer({...rest}) {
++ function FantasticPlayerWithRef({...rest}, ref) {
+    ...
+  }
+
++ const FantasticPlayer = forwardRef(FantasticPlayerWithRef);
++ FantasticPlayer.displayName = 'FantasticPlayer'; // Make findable for tests.
++ export {FantasticPlayer};
+```
+
+So the outer structure looks like:
+
+```js
+// component.js
+// ...
+import {forwardRef} from '../../../src/preact/compat';
+// ...
+function FantasticPlayerWithRef({...rest}, ref) {
+  // ...
+}
+//...
+const FantasticPlayer = forwardRef(FantasticPlayerWithRef);
+FantasticPlayer.displayName = 'FantasticPlayer'; // Make findable for tests.
+export {FantasticPlayer};
+```
+
+### Loading an iframe with `VideoIframe`
+
+Your `FantasticPlayer` component should return a `VideoIframe` that's configured to a corresponding `postMessage` API. To start, we update the implementation in **`component.js`**:
+
+```diff
+- import {ContainWrapper} from '../../../src/preact/component';
++ import {VideoIframe} from '../../amp-video/1.0/video-iframe';
+
+  function FantasticPlayerWithRef({...rest}, ref) {
+-   ...
++   const src = 'https://example.com/fantastic';
++   const makeMethodMessage = useCallback(() => '{}', []);
++   const onMessage = useCallback((e) => {
++     console.log(e);
++   }, []);
+    return (
+-     <ContainWrapper layout size paint {...rest} >
+-       ...
+-     </ContainWrapper>
++     <VideoIframe
++       ref={ref}
++       {...rest}
++       src={src}
++       makeMethodMessage={makeMethodMessage}
++       onMessage={onMessage}
++     />
+    );
+  }
+```
+
+So that our component returns a `<VideoIframe>`:
+
+```js
+// component.js
+// ...
+import {VideoIframe} from '../../amp-video/1.0/video-iframe';
+// ...
+function FantasticPlayerWithRef({...rest}, ref) {
+  const src = 'https://example.com/fantastic';
+  const makeMethodMessage = useCallback(() => '{}', []);
+  const onMessage = useCallback((e) => {
+    console.log(e);
+  }, []);
+  return (
+    <VideoIframe
+      ref={ref}
+      {...rest}
+      src={src}
+      makeMethodMessage={makeMethodMessage}
+      onMessage={onMessage}
+    />
+  );
+}
+```
+
+We're rendering an iframe that always loads `https://example.com/fantastic`, but we'll specify a dynamic URL later. Likewise, we'll need to define implementations for the communication functions `makeMethodMessage` and `onMessage`.
+
+#### `src`
+
+You may use props to construct the `src`, like using a `videoId` to load `https://example.com/fantastic/${videoId}/`.
+
+We employ the `useMemo()` hook so that the `src` is generated only when the `videoId` changes:
+
+```js
+// component.js
+// ...
+function FantasticPlayerWithRef(
+  {videoId, ...rest},
+  ref
+) {
+  // ...
+  const src = useMemo(
+    () =>
+      `https://example.com/fantastic/${encodeURIComponent(videoId)}/`,
+    [videoId]
+  );
+  // ...
+  return (
+    <VideoIframe
+      {...rest}
+      src={src}
+      ...
+    />
+  );
+}
+```
+
+#### `origin`
+
+By default, messages from the iframe are only verified by comparing their `contentWindow`. You should define a regular expression that verifies their [origin](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#the_dispatched_event):
+
+```js
+// component.js
+// ...
+return (
+  <VideoIframe
+    {...rest}
+    origin={new RegExp('^https://((player|www)\.)?example\.com/?$')}
+    ...
+  />
+);
+```
+
+#### Playback methods with `makeMethodMessage`
+
+We need the ability to tell the iframe to execute certain actions, for example `play`, `mute` or `hideControls`. When using an iframe to load a player, this is done by sending a `postMessage` downstream.
+
+`makeMethodMessage` takes an action to execute as a `string`, and returns another `string` corresponding to a message to send.
+
+```ts
+type MakeMethodMessageFunction = (method: string) => string;
+```
+
+We implement this function with `useCallback()` so that it's created only when required as specified by hook dependencies. It's recommended that you also create a higher-level `makeMessage` function that creates and serializes messages as your iframe's interface needs it. In this case, we `JSON.stringify` a `videoId` and a `method`:
+
+```js
+// component.js
+// ...
+function makeMessage(videoId, method) {
+  return JSON.stringify({
+    'videoId': videoId,
+    'method': method,
+  });
+}
+
+function FantasticPlayerWithRef(
+  {videoId, ...rest},
+  ref
+) {
+  // ...
+  const makeMethodMessage = useCallback(
+    (method) => makeMessage(videoId, method),
+    [videoId]
+  );
+
+  // ...
+  return (
+    <VideoIframe
+      {...rest}
+      makeMethodMessage={makeMethodMessage}
+      ...
+    />
+  );
+}
+```
+
+#### Handling events with `onMessage`
+
+Upstream events originated by the iframe are received as messages. You should define a function that interprets these messages and dispatches [`HTMLMediaElement` events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#events).
+
+```ts
+type OnMessageFunction = (event: MessageEvent) => void;
+```
+
+> ⚠️ **This is an incomplete [`MessageEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent).** It's a copy that contains `currentTarget` (the originating `<iframe>`), `target` (same as `currentTarget`) and `data` (the data sent by the iframe with `postMessage`). If you need to copy other properties, add them to the appropriate place in [`video-iframe.js`](../extensions/amp-video/1.0/video-iframe.js) and add `@alanorozco` as a reviewer on your pull request.
+
+Here we implement the `canplay`, `play` and `pause` events for an iframe that posts them as the message `{"event": "play"}`.
+
+```js
+// component.js
+// ...
+function onMessage(event) {
+  const {data, currentTarget} = event;
+  switch (data?.event) {
+    case 'canplay':
+    case 'play':
+    case 'pause':
+      dispatchCustomEvent(currentTarget, data.event, null, {
+        bubbles: true,
+        cancelable: false,
+      });
+      break;
+  }
+}
+
+function FantasticPlayerWithRef(
+  {videoId, ...rest},
+  ref
+) {
+  // ...
+  return (
+    <VideoIframe
+      {...rest}
+      onMessage={onMessage}
+      ...
+    />
+  );
+}
+```
+
+Your iframe's interface to post messages is likely different, but your component should always dispatch [`HTMLMediaElement` events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#events) upstream.
+
+### Use `VideoWrapper` directly
+
+> **If you need an iframe, you should ignore this section and use `VideoIframe` instead.** It requires less work and likely provides all you need. Read on if you're sure that you need to write to a host document directly to create `<video>` elements, or otherwise manage frames manually (like creating proxy frames).
+
+Your `FantasticPlayer` component should return a `VideoWrapper` that's configured to a corresponding `postMessage` API. To start, we update the implementation in **`component.js`**.
+
+```diff
+- import {ContainWrapper} from '../../../src/preact/component';
++ import {VideoWrapper} from '../../amp-video/1.0/video-wrapper';
+
+  function FantasticPlayerWithRef({...rest}, ref) {
+-   ...
+    return (
+-     <ContainWrapper layout size paint {...rest} >
+-       ...
+-     </ContainWrapper>
++     <VideoWrapper ref={ref} {...rest} component="video" />
+    );
+  }
+```
+
+So that our component returns a `<VideoWrapper>`:
+
+```js
+// component.js
+// ...
+import {VideoWrapper} from '../../amp-video/1.0/video-wrapper';
+
+// ...
+function FantasticPlayerWithRef({...rest}, ref) {
+  return <VideoWrapper ref={ref} {...rest} component="video" />;
+}
+```
+
+We're specifying `"video"` as the element to render, which is also the default. We'll later change this into our own component implementation.
+
+#### Specifying `component`
+
+The `VideoWrapper` must interact with an element that implements the `HTMLMediaInterface` like `<video>`, or a Preact component that emulates the same interface.
+
+For example, we may set a `component={FantasticPlayerInternal}`, where the specified function controls how we render and interact with the `<video>` element.
+
+By passing the `ref` through, we're able to call methods like `play()` from `FantasticPlayer` on the `<video>` element itself. By passing the `...rest` of the props we make sure that `src` is set, in addition to listening to playback events through props like `onPlay`.
+
+```js
+// component.js
+// ...
+function FantasticPlayerInternalWithRef({sources, ...rest}, ref) {
+  return (
+    <div>
+      <video ref={ref} {...rest}>
+        {sources}
+      </video>
+    </div>
+  );
+}
+
+const FantasticPlayerInternal = forwardRef(FantasticPlayerInternalWithRef);
+
+// ...
+function FantasticPlayerWithRef({...rest}, ref) {
+  return (
+    <VideoWrapper
+      ref={ref}
+      {...rest}
+      component={FantasticPlayerInternal}
+    />
+  );
+}
+```
+
+#### Passing or overriding props
+
+In the previous example, props received from the `VideoWrapper` are implicitly set through `...rest`. If we set each explicitly, we see the `HTMLMediaInterface` attributes and events handled.
+
+```js
+// component.js
+// ...
+function FantasticPlayerInternalWithRef(
+  {
+    muted,
+    loop,
+    controls,
+    onCanPlay,
+    onLoadedMetadata,
+    onPlaying,
+    onPause,
+    onEnded,
+    onError,
+    src,
+    poster,
+    style,
+    sources,
+  },
+  ref
+) {
+  return (
+    <div>
+      <video
+        ref={ref}
+        muted={muted}
+        loop={loop}
+        controls={controls}
+        onCanPlay={onCanPlay}
+        onLoadedMetadata={onLoadedMetadata}
+        onPlaying={onPlaying}
+        onPause={onPause}
+        onEnded={onEnded}
+        onError={onError}
+        src={src}
+        poster={poster}
+        style={style}
+      >
+        {sources}
+      </video>
+    </div>
+  );
+}
+```
+
+We can wrap playback events set on these props to dispatch them. For example, by wrapping `onCanPlay` we may mediate the `canplay` event by delaying it by 500 milliseconds:
+
+```js
+const onVideoCanPlay = useCallback((e) => {
+  setTimeout(() => {
+    onCanPlay(e);
+  }, 500);
+}, [onCanPlay]);
+```
+
+We set the wrapped method as the `<video>`'s actual event handler:
+
+```diff
+  <video
+    ref={ref}
+-   onCanPlay={onCanPlay}
++   onCanPlay={onVideoCanPlay}
+```
+
+You may similarly choose to pass or override properties at the higher level, passed from `FantasticPlayer` into the `VideoWrapper` we instantiate. For a list of these properties [see `video-wrapper.type.js`](../extensions/amp-video/1.0/video-wrapper.type.js)
+
+#### Imperative handle
+
+AMP actions execute methods on the Preact component because they `forwardRef` to an element that defines them, or because they define them with [`useImperativeHandle`](https://reactjs.org/docs/hooks-reference.html#useimperativehandle). Methods executed down the Preact component chain cascade the same way.
+
+When we click the following button on an AMP document:
+
+```html
+<button on="tap: my-fantastic-player.play">
+  Play
+</button>
+```
+
+We call the corresponding function `play`:
+
+> The AMP action `my-element.play` is declared to be forwarded to the Preact component's method. See the [`init()` method on `VideoBaseElement`](../extensions/amp-video/1.0/base-element.js) for a list of the supported actions.
+
+```
+-> FantasticPlayer.play()
+```
+
+Since we don't call `useImperativeHandle` at this layer, its `ref` forwards to `VideoWrapper`:
+
+```
+-> FantasticPlayer.play()
+-> (forwardRef) VideoWrapper.play()
+```
+
+`VideoWrapper` sets an imperative handle that explicitly calls `component.play()`:
+
+```
+-> FantasticPlayer.play()
+-> (forwardRef) VideoWrapper.play()
+  -> (imperativeHandle) component.play()
+```
+
+If `component` is a `<video>`, then the method is called direclty. If it's our `FantasticPlayerInternal` as we defined earlier, it may either `forwardRef` to a `<video>` or implement its own imperative handle.
+
+```
+-> FantasticPlayer.play()
+-> (forwardRef) VideoWrapper.play()
+  -> (imperativeHandle) component.play()
+  -> (forwardRef) <video>.play()
+```
+
+Methods can be defined with `useImperativeHandle` at the `component` implementation. We no longer forward our `ref` to the `<video>`, we use it to define the imperative handle instead. Downstream methods on the `<video>` element are executed explicitly through a local `videoRef`.
+
+> The methods and getters listed are the current requirements from `VideoWrapper`. Note that video players on Bento are in active development, so this list might expand in the future.
+
+```js
+// component.js
+// ...
+function FantasticPlayerInternalWithRef({sources, ...rest}, ref) {
+  const videoRef = useRef(null);
+
+  useImperativeHandle(() => {
+    return {
+      play() {
+        videoRef.current.play();
+      },
+      pause() {
+        videoRef.current.pause();
+      },
+      requestFullscreen() {
+        videoRef.current.requestFullscreen();
+      },
+      get readyState() {
+        return videoRef.current.readyState;
+      },
+      get currentTime() {
+        return videoRef.current.currentTime;
+      },
+      get duration() {
+        return videoRef.current.duration;
+      },
+    }
+  }, []);
+
+  return (
+    <video ref={videoRef} {...rest}>
+      {sources}
+    </video>
+  );
+}
+```
+
+## Completing your extension
+
+Follow the [guide to Building a Bento AMP Component](./building-a-bento-amp-extension.md) for other instructions that you should complete, including:
+
+-   **Documentation** that describes the component.
+-   **Tests** that verify the component's functionality.
+-   **Validator rules** to embed the component in an AMP document.
+-   **An example** to our Storybook or to be published on [amp.dev](https://amp.dev/)
+
+## Example Pull Requests
+
+-   [amp-video](https://github.com/ampproject/amphtml/pull/30280)
+-   [amp-vimeo](https://github.com/ampproject/amphtml/pull/33971)
+-   [amp-youtube](https://github.com/ampproject/amphtml/pull/30444)
diff --git a/docs/building-an-amp-extension.md b/docs/building-an-amp-extension.md
new file mode 100644
index 0000000000000..df971c204f58e
--- /dev/null
+++ b/docs/building-an-amp-extension.md
@@ -0,0 +1,830 @@
+# Building an AMP Extension
+
+AMP can be extended to allow more functionality and components through
+building open source extensions (aka custom elements). For example, AMP
+provides `amp-carousel`, `amp-sidebar` and `amp-access` as
+extensions. If you'd like to add an extension to support your company
+video player, rich embed or just a general UI component like a star
+rating viewer, you'd do this by building an extension.
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+<!-- {"maxdepth": 1} -->
+
+-   [Getting started](#getting-started)
+-   [Naming](#naming)
+-   [Directory structure](#directory-structure)
+-   [Extend AMP.BaseElement](#extend-ampbaseelement)
+-   [Element styling](#element-styling)
+-   [Register element with AMP](#register-element-with-amp)
+-   [Actions and events](#actions-and-events)
+-   [Sub-elements ownership](#sub-elements-ownership)
+-   [Allowing proper validation](#allowing-proper-validation)
+-   [Performance considerations](#performance-considerations)
+-   [Layouts supported in your element](#layouts-supported-in-your-element)
+-   [Experiments](#experiments)
+-   [Documenting your element](#documenting-your-element)
+-   [Example of using your extension](#example-of-using-your-extension)
+-   [Updating build configs](#updating-build-configs)
+-   [Versioning](#versioning)
+-   [Unit tests](#unit-tests)
+-   [Type checking](#type-checking)
+-   [Example PRs](#example-prs)
+
+## Getting started
+
+This document describes how to create a new AMP extension, which is one of the most common ways of adding a new feature to AMP.
+
+Before diving into the details on creating a new AMP extension, please familiarize yourself with the [general process for contributing code and features to AMP](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md). Since you are adding a new extension you will likely need to follow the [process for making a significant change](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#process-for-significant-changes), including filing an ["Intent to Implement" issue](https://github.com/ampproject/amphtml/labels/INTENT%20TO%20IMPLEMENT) and finding a guide before you start significant development.
+
+To bootstrap the creation of a new component, the following command will create the directory structure and boilerplate code for you:
+
+```shell
+$ amp make-extension --name=amp-my-element
+```
+
+## Naming
+
+All AMP extensions (and built-in elements) have their tag names prefixed
+with `amp-`. Make sure to choose an accurate and clear name for your
+extension.
+
+Extensions that embed a third-party service must follow the [guidelines for naming a third-party component](../docs/spec/amp-3p-naming.md).
+
+## Directory structure
+
+You create your extension's files inside the `extensions/` directory.
+The directory structure is below:
+
+```sh
+/extensions/amp-my-element/
+├── 0.1/
+|   ├── test/
+|   |   ├── test-amp-my-element.js       # Element's unit test suite (req'd)
+|   |   └── More test JS files (optional)
+|   ├── amp-my-element.js                # Element's implementation (req'd)
+|   ├── amp-my-element.css               # Custom CSS (optional)
+|   └── More JS files (optional)
+├── validator-amp-my-element.protoascii  # Validator rules (req'd)
+├── amp-my-element.md                    # Element's main documentation (req'd)
+└── More documentation in .md files (optional)
+└── OWNERS                               # Owners file. Primary contact(s) for the extension. (req'd)
+```
+
+In most cases you'll only create the required (req'd) files. If your element does not need custom CSS, you don't need to create the CSS file.
+
+## Extend AMP.BaseElement
+
+Almost all AMP extensions extend AMP.BaseElement, which provides some
+hookups and callbacks for you to override in order to implement and
+customize your element behavior. These callbacks are explained below in
+the BaseElement Callbacks section, and are also explained inline in the
+[BaseElement](https://github.com/ampproject/amphtml/blob/main/src/base-element.js#L26)
+class.
+
+### Element class
+
+The following shows the overall structure of your element implementation
+file (extensions/amp-my-element/0.1/amp-my-element.js).
+
+```js
+import {func1, func2} from '../src/module';
+import {CSS} from '../../../build/amp-my-element-0.1.css';
+// more ES2015-style import statements.
+
+/** @const */
+const EXPERIMENT = 'amp-my-element';
+
+/** @const */
+const TAG = 'amp-my-element';
+
+class AmpMyElement extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    // Declare instance variables with type annotations.
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout == LAYOUT.FIXED;
+  }
+
+  /** @override */
+  buildCallback() {
+    // Get attributes, assertions of values, assign instance variables.
+    // Build lightweight DOM and append to this.element.
+  }
+
+  /** @override */
+  layoutCallback() {
+    // Actually load your resource or render more expensive resources.
+  }
+}
+
+AMP.extension('amp-my-element', '0.1', (AMP) => {
+  AMP.registerElement('amp-my-element', AmpMyElement, CSS);
+});
+```
+
+### BaseElement callbacks
+
+#### upgradeCallback
+
+-   **Default**: Does nothing
+-   **Override**: Rarely.
+-   **[Vsync](https://github.com/ampproject/amphtml/blob/main/src/service/vsync-impl.js) Context**: None
+-   **Usage**: If your extension provides different implementations
+    depending on a late runtime condition (e.g. type attribute on the
+    element, platform)
+-   **Example Usage**: amp-ad, amp-app-banner
+
+#### buildCallback
+
+-   **Default**: Does nothing
+-   **Override**: Almost always
+-   **Vsync Context**: Mutate
+-   **Usage**: If your element has UI elements this is where you should
+    create your DOM structure and append it to the element. You can also
+    read the attributes (e.g. width, height…) the user provided on your
+    element in this callback.
+-   **Warning**: Don't load remote resources during the buildCallback. This
+    not only circumvents the AMP resources manager, but it will also lead to
+    higher data charges for users because all these resources will be loaded
+    before layouting needs to happen.
+-   **Warning 2**: Do the least needed work here, and don't build DOM that
+    is not needed at this point.
+
+#### preconnectCallback
+
+-   **Default**: Does nothing.
+-   **Vsync Context**: None (Neither mutate nor measure)
+-   **Override**: Sometimes, if your element will be loading remote
+    resources.
+-   **Usage**: Use to instruct AMP which hosts to preconnect to, and which
+    resources to preload/prefetch; this allows AMP to delegate to the browser
+    to get a performance boost by preconnecting, preloading and prefetching
+    resources via preconnect service.
+-   **Example Usage**: [Instagram uses this to
+    preconnect](https://github.com/ampproject/amphtml/blob/main/extensions/amp-instagram/0.1/amp-instagram.js)
+    to instagram hosts.
+
+#### createPlaceholderCallback
+
+-   **Default**: Does nothing.
+-   **Vsync Context**: Mutate
+-   **Override**: Sometimes. If your component provides a way to dynamically
+    create a lightweight placeholder. This gets called only if the element
+    doesn't already have a publisher-provided placeholder (through [the
+    placeholder
+    attribute](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md#placeholder)).
+-   **Usage**: Create placeholder DOM and return it. For example,
+    amp-instagram uses this to create a placeholder dynamically by creating
+    an amp-img placeholder instead of loading the iframe, leaving the iframe
+    loading to layoutCallback.
+-   **Warning**: Only use amp-elements for creating placeholders that
+    require external resource loading. This allows runtime to create this
+    early but still defer the resource loading and management to AMP
+    resources manager. Don't create or load heavyweight resources (e.g.
+    iframe…).
+-   **Example Usage**: amp-instagram.
+
+#### onLayoutMeasure
+
+-   **Default**: Does nothing.
+-   **Vsync Context**: Measure.
+-   **Override**: Rarely.
+-   **Usage**: Use to measure layouts for your element.
+-   **Example Usage**: amp-iframe
+
+#### layoutCallback
+
+-   **Default**: Does nothing.
+-   **Vsync Context**: Mutate
+-   **Override**: Almost always.
+-   **Usage**: Use this to actually render the final version of your
+    element. If the element should load a video, this is where you load the
+    video. This needs to return a promise that resolves when the element is
+    considered "laid out" - usually this means load event has fired but can
+    be different from element to element. Note that load events usually are
+    fired very early so if there's another event that your element can
+    listen to that have a better meaning of ready-ness, use that to resolve
+    your promise instead - for example: [amp-youtube](https://github.com/ampproject/amphtml/blob/main/extensions/amp-youtube/0.1/amp-youtube.js) uses the
+    playerready event that the underlying YT Player
+    iframe sends to resolve the layoutCallback promise.
+
+#### firstLayoutCompleted
+
+-   **Default**: Hide element's placeholder.
+-   **Vsync Context**: Mutate
+-   **Override**: Sometimes. If you'd like to override default behavior and
+    not hide the placeholder when the element is considered first laid out.
+    Sometimes you wanna control when to hide the placeholder.
+-   **Example Usage**: amp-anim
+
+#### pauseCallback
+
+-   **Default**: Does nothing.
+-   **Vsync Context**: Mutate
+-   **Called**: When you swipe away from a document in a viewer. Called on
+    children of lightbox when you close a lightbox instance, called on
+    carousel children when the slide is not the active slide. And possibly
+    other places.
+-   **Override**: Sometimes. Most likely if you're building a player.
+-   **Usage**: Use to pause video, slideshow auto-advance...etc
+-   **Example Usage**: amp-video, amp-youtube
+
+#### resumeCallback
+
+-   **Default**: Does nothing.
+-   **Vsync Context**: Mutate
+-   **Override**: Sometimes.
+-   **Usage**: Use to restart the slideshow auto-advance.
+-   **Note**: This is not used widely yet because it's not possible to
+    resume video playback for example on mobile.
+
+#### unlayoutOnPause
+
+-   **Default**: Returns false.
+-   **Vsync Context**: Mutate
+-   **Override**: If your element doesn't provide a pausing mechanism,
+    instead override this to unlayout the element when AMP tries to pause
+    it.
+-   **Return**: True if you want unlayoutCallback to be called when paused.
+-   **Usage Example**: amp-brightcove
+
+#### unlayoutCallback
+
+-   **Default**: Does nothing.
+-   **Vsync Context**: Mutate
+-   **Override**: Sometimes.
+-   **Usage**: Use to remove and unload heavyweight resources like iframes,
+    video, audio and others that your element has created.
+-   **Return**: **True** if your element need to re-layout.
+-   **Usage Example**: amp-iframe
+
+## Element styling
+
+You can write a stylesheet to style your element to provide a minimal
+visual appeal. Your element structure should account for whether you
+want users (publishers and developers using your element) to customize
+the default styling you're providing and allow for easy CSS classes
+and/or well-structure DOM elements.
+
+Element styles are loaded when the element script itself is included in
+an AMP doc. You tell AMP which CSS belongs to this element when
+registering the element (see below).
+
+Class names prefixed with `i-amphtml` are considered private. Publishers
+are not allowed to use them for customization (enforced by AMP validator).
+
+Class names prefixed with `amp-` are public css classes that can be customized
+by publishers. All such classes should be documented in the component-specific
+`.md` file. All CSS classes in component stylesheets should be prefixed with
+either `i-amphtml-` or `amp-`.
+
+## Register element with AMP
+
+Once you have implemented your AMP element, you need to register it with
+AMP; all AMP extensions are prefixed with `amp-`. This is where you
+tell AMP which class to use for this tag name and which CSS to load.
+
+```javascript
+AMP.extension('amp-carousel', '0.1', (AMP) => {
+  AMP.registerElement('amp-carousel', CarouselSelector, CSS);
+});
+```
+
+## Actions and events
+
+AMP provides a framework for [elements to fire their own
+events](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-actions-and-events.md)
+to allow users of that element to listen and react to the events. For
+example, amp-form extension fires a few events on &lt;form&gt; elements
+like `submit-success`. This allow publishers to listen to that event
+and react to it, for example, by launching a lightbox to display a
+message.
+
+The other part of the event-system in AMP is actions. When listening to
+an event on an element usually you'd like to trigger an action (possibly
+on other elements). For example, in the example above, the publisher is
+executing the `open` action on `lightbox`.
+
+The syntax for using this on elements is as follow:
+
+```html
+<form
+  on="submit-success:my-success-lightbox.open;submit-error:my-error-lightbox.open"
+></form>
+```
+
+To fire events on your element use AMP's action service and the
+`.trigger` method.
+
+```javascript
+actionServiceForDoc(doc.documentElement).trigger(
+  this.form_,
+  'submit-success',
+  null
+);
+```
+
+And to expose actions use `registerAction` method that your element
+inherits from `BaseElement`.
+
+```javascript
+this.registerAction('close', this.close.bind(this));
+```
+
+Your element could also choose to override the `activate` method
+inherited from BaseElement that would define the default action for your
+element. For example amp-lightbox overrides activate to define the open
+default case.
+
+Make sure your element documentation documents the events and actions it
+exposes.
+
+## Sub-elements ownership
+
+AMP elements are usually discovered and scheduled by the AMP runtime
+automatically and managed through Resources. In some cases an AMP
+element might want to control and own when its sub-elements get
+scheduled and not leave that to the AMP runtime. An example to this is
+the &lt;amp-carousel&gt; component, where it wants to schedule
+preloading/pre-rendering or layouting of its cells based on the window
+the user is in.
+
+AMP provides a way for an element to control this by setting the owner
+on the element you want to control. In the carousel example, the component loops
+over all its elements and sets itself as the owner of these elements.
+The AMP runtime will not manage scheduling layouting for elements that have
+owners.
+
+```javascript
+this.cells_ = this.getRealChildren();
+
+this.cells_.forEach((cell) => {
+  Services.ownersForDoc(this.element).setOwner(cell, this.element);
+  cell.style.display = 'inline-block';
+  this.container_.appendChild(cell);
+});
+```
+
+An element can then later call `schedulePreload` or `scheduleLayout` to
+schedule preload or layout respectively. For example, &lt;amp-carousel
+type=slider&gt; (Slider instance of amp-carousel) calls
+`schedulePreload` for the next/previous slide when the user moves
+forward/backward in the slides and then calls `scheduleLayout` for the
+current slide when the user moves to it.
+
+```javascript
+const owners = Services.ownersForDoc(this.element);
+owners.scheduleLayout(this.element, newSlide);
+this.setControlsState();
+owners.schedulePause(this.element, oldSlide);
+owners.schedulePreload(this.element, nextSlide);
+```
+
+It's important to understand that the parent/owner element is
+responsible for managing all of its children (except for placeholders,
+see below). This means you need to make sure your element updates
+whether the child is in viewport and when to schedule different phases
+for the element.
+
+### Nested sub-elements
+
+Your element should anticipate its sub-elements to nest some more
+amp-elements and schedule preload or layout for these as well, otherwise
+the element will never be preloaded or laid out. This is true to all
+nested amp-elements that are not placeholders. AMP runtime will schedule
+nested amp-elements that are placeholders.
+
+<!-- prettier-ignore-start -->
+```html
+<amp-carousel> ← Parent element
+  <amp-figure> ← Parent needs to schedule this element
+    <amp-img placeholder></amp-img> ← AMP will schedule this when amp-figure is scheduled
+    <amp-img></amp-img> ← Parent needs to schedule this element
+    <amp-fit-text></amp-fit-text> ← Parent needs to schedule this element
+  </amp-figure>
+</amp-carousel>
+```
+<!-- prettier-ignore-end -->
+
+## Allowing proper validation
+
+One of AMP's features is that a document can be checked against
+validation rules to confirm it's valid AMP. When you implement your
+element, the [AMP Validator](https://github.com/ampproject/amphtml/blob/main/validator/README.md)
+needs to be updated to add rules for your element to keep documents
+using your element valid. Create your own rules by following the
+directions at
+[Contributing Component Validator Rules](https://github.com/ampproject/amphtml/blob/main/docs/component-validator-rules.md).
+
+## Performance considerations
+
+### Pre-rendering and placeholders
+
+Another enabling feature of instant-web in AMP is support for
+prerendering in a way that does not consume loads of data and does not
+waste too much of the user's device resources. AMP does this by strictly
+controlling resource loading and rendering.
+
+If your extension is lightweight, it might be worth enabling
+pre-rendering of your elements so that users will be able to see it
+appear instantly when they click on an article.
+
+Sometimes fully pre-rendering the element isn't an option because it is
+heavyweight. Your element might want to opt into creating a dynamic
+placeholder for itself (in case a placeholder wasn't provided by the
+developer/publisher who is using your element). This allows elements to
+display content as fast as possible and allow prerendering that
+placeholder. Learn [more about placeholder
+elements](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md#placeholder).
+
+NOTE: Make sure not to request external resources in the pre-render
+phase. Requests to the publisher's origin itself are OK. If in doubt,
+please flag this in review.
+
+AMP will automatically call your element's
+[createPlaceholderCallback](#createplaceholdercallback) during
+build step if it didn't detect a placeholder was provided. This allows
+you to create your own placeholder. Here's an example of how
+`amp-instagram` element used this callback to create a dynamic
+placeholder of an `amp-img` element to avoid loading the heavyweight
+instagram iframe embed during pre-rendering and instead loads just the
+image directly from instagram media endpoint.
+
+```javascript
+class AmpInstagram extends AMP.BaseElement {
+  // ...
+  /** @override */
+  createPlaceholderCallback() {
+    const placeholder = this.getWin().document.createElement('div');
+    placeholder.setAttribute('placeholder', '');
+    const image = this.getWin().document.createElement('amp-img');
+    // This is always the same URL that is actually used inside of the embed.
+    // This lets us avoid loading the image twice and make use of browser cache.
+
+    image.setAttribute(
+      'src',
+      'https://www.instagram.com/p/' +
+        encodeURIComponent(this.shortcode_) +
+        '/media/?size=l'
+    );
+    image.setAttribute('width', this.element.getAttribute('width'));
+    image.setAttribute('height', this.element.getAttribute('height'));
+    image.setAttribute('layout', 'responsive');
+    setStyles(image, {
+      'object-fit': 'cover',
+    });
+    const wrapper = this.element.ownerDocument.createElement('wrapper');
+    // This makes the non-iframe image appear in the exact same spot
+    // where it will be inside of the iframe.
+    setStyles(wrapper, {
+      'position': 'absolute',
+      'top': '48px',
+      'bottom': '48px',
+      'left': '8px',
+      'right': '8px',
+    });
+    wrapper.appendChild(image);
+    placeholder.appendChild(wrapper);
+    this.applyFillContent(image);
+    return placeholder;
+  }
+  // …
+}
+```
+
+**Important**: One thing to keep in mind is that when you create a
+placeholder, use the amp- provided elements when loading external
+resources. This is most likely going to be `amp-img` like in the
+instagram case above. This still allows AMP resource manager to control
+when these resources get loaded and rendered as oppose to using the
+HTML-native `img` tag which will be out of AMP resource management.
+
+#### Loading indicators
+
+Consider showing a loading indicator if your element is expected to take
+a long time to load (for example, loading a GIF, video or iframe). AMP
+has a built-in mechanism to show a loading indicator simply by
+listing your element so it's allowed to show it. You can do that inside the `layout.js`
+file in the `LOADING_ELEMENTS_` object.
+
+```javascript
+export const LOADING_ELEMENTS_ = {
+  ...
+  'AMP-YOUTUBE': true,
+  'AMP-MY-ELEMENT': true,
+}
+```
+
+### Destroying heavyweight resources
+
+To stay good to our promise of lowering resources usage especially on
+mobile, elements that create and load heavyweight resources (e.g.
+iframes, video, very large images, an expensive timer or computation...)
+need to be destroyed when they are no longer needed.
+
+AMP signals to your element that it needs to do that with
+[unlayoutCallback](#unlayoutcallback). AMP calls this when the
+document becomes inactive; like when the user swipes away from the
+document to another one or when they switch tabs.
+
+This might be also be called in special cases like if your element is
+used as an amp-carousel cell and it was swiped away to become outside
+the viewport. This will only happen if your element sets
+`unlayoutOnPause`. Carousel by default only pauses the elements that
+are outside its viewport.
+
+Here's an example of how `amp-instagram` destroys the iframe it has
+embedded when `unlayoutCallback` is called.
+
+```javascript
+/** @override */
+unlayoutCallback() {
+  if (this.iframe_) {
+    removeElement(this.iframe_);
+    this.iframe_ = null;
+    this.iframePromise_ = null;
+    setStyles(this.placeholderWrapper_, {
+      'display': '',
+    });
+  }
+  return true; // Call layoutCallback again.
+}
+```
+
+Note if your element unlayoutCallback destroys the resources, it
+probably wants to return true in order to signal to AMP the need to call
+`layoutCallback` again once the document is active. Otherwise your
+element will never be re-laid out.
+
+### vsync, mutateElement, and requestChangeSize
+
+AMP provides multiple utilities to optimize many mutations and measuring
+for better performance. These include vsync service with a mutate and
+measure utility method that will synchronize all measuring happening in
+short period of time together and then do all the mutating in a
+requestAnimationFrame or similar cycles.
+
+### Loading external resources
+
+If your extension needs to load external resources (like an sdk) then
+you might need to add proper third party integration for it to work and
+use the proper third party iframe. Loading external resources is only
+allowed inside a 3p iframe which AMP serves on a different domain for
+security and performance reasons. Take a look at adding
+[&lt;amp-facebook&gt;](https://github.com/ampproject/amphtml/pull/1479/files)
+extension PR for examples of 3p integration.
+
+Read about [Inclusion of third party software, embeds and services into
+AMP](https://github.com/ampproject/amphtml/blob/main/3p/README.md).
+
+For contrast, take a look at amp-instagram which does NOT require an SDK
+to be loaded in order to embed a post, instead it provides an
+iframe-based embedding allowing amp-instagram extension to use a normal
+iframe with no 3p integration needed, similarly, amp-youtube and others.
+
+## Layouts supported in your element
+
+AMP defines different layouts that elements can choose whether or not to
+support Your element needs to announce which layouts it supports through
+overriding the `isLayoutSupported(layout)` callback and returning true
+if the element supports that layout. [Read more about AMP Layout
+System](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md)
+and [Layout
+Types](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md#layout).
+
+### What layout should your element support?
+
+After understanding each layout type, if it makes sense, support all of
+them. Otherwise choose what makes sense to your element. A popular
+support choice is to support size-defined layouts (Fixed, Fixed Height,
+Responsive and Fill) through using the utility `isLayoutSizeDefined`
+in `layout.js`.
+
+For example, `amp-pixel` only supports fixed layout.
+
+```javascript
+class AmpPixel extends BaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout == Layout.FIXED;
+  }
+}
+```
+
+While `amp-carousel` supports all size-defined layouts.
+
+```javascript
+class AmpSlides extends AMP.BaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+}
+```
+
+## Experiments
+
+Most newly created elements are initially launched as
+[experiments](https://github.com/ampproject/amphtml/blob/main/tools/experiments/README.md).
+This allows people to experiment with using the new element and provide
+the author(s) with feedback. It also provides the AMP Team with the
+opportunity to monitor for any potential errors. This is especially
+required if the validator hasn't been updated yet to allow your newly
+created extension, otherwise people using it in production will
+invalidate all their AMP documents.
+
+Add your extension as an experiment in the
+`amphtml/tools/experiments` file by adding a record for your extension
+in EXPERIMENTS variable.
+
+```javascript
+/** @const {!Array<!ExperimentDef>} */
+const EXPERIMENTS = [
+  // ...
+  {
+    id: 'amp-my-element',
+    name: 'AMP My Element',
+    spec:
+      'https://github.com/ampproject/amphtml/blob/main/extensions/' +
+      'amp-my-element/amp-my-element.md',
+    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/XXXYYY',
+  },
+  // ...
+];
+```
+
+And then protecting your code with a check `isExperimentOn(win, 'amp-my-element')` and only execute your code when it is on.
+
+```javascript
+import {isExperimentOn} from '../../../src/experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const */
+const EXPERIMENT = 'amp-my-element';
+
+/** @const */
+const TAG = 'amp-my-element';
+
+Class AmpMyElement extends AMP.BaseElement {
+
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    // declare instance variables with type annotations.
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout == LAYOUT.FIXED;
+  }
+
+  /** @override */
+  buildCallback() {
+    userAssert(isExperimentOn(this.win, 'amp-my-element'),
+        `Experiment ${EXPERIMENT} is not turned on.`);
+    // get attributes, assertions of values, assign instance variables.
+    // build lightweight dom and append to this.element.
+  }
+
+  /** @override */
+  layoutCallback() {
+    userAssert(isExperimentOn(this.win, 'amp-my-element'),
+        `Experiment ${EXPERIMENT} is not turned on.`);
+    // actually load your resource or render more expensive resources.
+  }
+}
+
+AMP.extension('amp-my-element', '0.1', AMP => {
+  AMP.registerElement('amp-my-element', AmpMyElement, CSS);
+});
+```
+
+### Enabling and removing your experiment
+
+Users wanting to experiment with your element can then go to the
+[experiments page](https://cdn.ampproject.org/experiments.html) and
+enable your experiment.
+
+If you are testing on your localhost, use the command `AMP.toggleExperiment(id, true/false)` to enable the experiment.
+
+File a github issue to cleanup your experiment. Assign it to yourself as a reminder to remove your experiment and code checks. Removal of your experiment happens after the extension has been thoroughly tested and all issues have been addressed.
+
+## Documenting your element
+
+Create a .md file that serves as the main documentation for your element. This document should include:
+
+-   Summary table
+-   Overview
+-   How to use it including code snippets and images
+-   Examples
+-   Attributes to specify (optional and required)
+-   Validation
+
+For samples of element documentation, see: [amp-list](https://github.com/ampproject/amphtml/blob/main/extensions/amp-list/amp-list.md), [amp-instagram](https://github.com/ampproject/amphtml/blob/main/extensions/amp-instagram/amp-instagram.md), [amp-carousel](https://github.com/ampproject/amphtml/blob/main/extensions/amp-carousel/amp-carousel.md)
+
+## Example of using your extension
+
+This greatly helps users to understand and demonstrate how
+your element works, and provides an easy start-point for them to
+experiment with it. This is basically where you actually build an AMP
+HTML document and use your element in it by creating a file in the
+`examples/` directory, usually with the `my-element.amp.html` file
+name. Browse that directory to see examples for other elements and
+extensions.
+
+Also consider contributing an example to
+[amp.dev](https://amp.dev/) on
+[GitHub](https://github.com/ampproject/amp.dev).
+
+## Updating build configs
+
+In order for your element to build correctly you would need to make few
+changes to [`build-system/compile/bundles.config.extensions.json`](../build-system/compile/bundles.config.extensions.json) to tell it about your
+extension, its files and its examples. You will need to add an entry in the top-level array.
+
+```javascript
+exports.extensionBundles = [
+...
+  {name: 'amp-kaltura-player', version: '0.1', latestVersion: '0.1'},
+  {name: 'amp-carousel', version: '0.1', latestVersion: '0.1', options: {hasCss: true}},
+...
+];
+```
+
+## Versioning
+
+AMP runtime is currently in v0 major version. Extensions versions are
+maintained separately. If your changes to your non-experimental
+extension makes breaking changes that are not backward compatible you
+should version your extension. This would usually be by creating a 0.2
+directory next to your 0.1.
+
+When version 0.2 is under development, make sure that `latestVersion` is
+set to 0.1 for both the 0.1 and 0.2 entries in `extensionBundles`. Once 0.2
+is ready to be released, `latestVersion` can be changed to 0.2.
+
+If your extension is still in experiments breaking changes usually are
+fine so you can just update the same version.
+
+## Unit tests
+
+Make sure you write good coverage for your code. We require unit tests
+for all checked in code. We use the following frameworks for testing:
+
+-   [Mocha](https://mochajs.org/), our test framework
+-   [Karma](https://karma-runner.github.io/), our tests runner
+-   [Sinon](http://sinonjs.org/), spies, stubs and mocks.
+
+For faster testing during development, consider using --files argument
+to only run your extensions' tests.
+
+```shell
+$ amp unit --files=extensions/amp-my-element/0.1/test/test-amp-my-element.js --watch
+```
+
+## Type checking
+
+We use Closure Compiler to perform type checking. Please see
+[Annotating JavaScript for the Closure
+Compiler](https://github.com/google/closure-compiler/wiki/Annotating-JavaScript-for-the-Closure-Compiler)
+and existing AMP code for examples of how to add type annotations to
+your code. The following command should be run to ensure no type
+violations are introduced by your extension.
+
+```shell
+$ amp check-types
+```
+
+## Example PRs
+
+-   Adding new ad-provider
+    -   [Teads](https://github.com/ampproject/amphtml/commit/654ade680d796527345af8ff298a41a7532ee074)
+    -   [EPlanning](https://github.com/ampproject/amphtml/commit/a007543518a07ff77d48297e76bd264cadf36f57)
+    -   [Taboola](https://github.com/ampproject/amphtml/commit/79a58e545939cca0b75e62b2e62147829c59602a)
+-   Adding embeds that's not iframe-based (requires JS SDK)
+    -   [amp-facebook](https://github.com/ampproject/amphtml/commit/6679db198d8b9d9c38854d93aa04801e8cf6999f)
+-   Adding iframe based embeds
+    -   [amp-soundcloud](https://github.com/ampproject/amphtml/commit/2ac845641c8eea9e67f17a1d471cfb9bab459fd1)
+    -   [amp-vine](https://github.com/ampproject/amphtml/commit/eb98861b25210f89b41abc9ac52b29d9a4ff45a6)
+    -   [amp-brightcove](https://github.com/ampproject/amphtml/commit/9a0f6089600da0c42e1f3787402a1ced0c377c65)
+-   Adding non-visual elements
+    -   [amp-font](https://github.com/ampproject/amphtml/commit/ef040b60664a5aad465cb83507d37fae5e361772)
+    -   [amp-install-serviceworker](https://github.com/ampproject/amphtml/commit/e6199cfb5b9d13b0e4bb590b80c09ba3614877e6)
+-   Adding general UI components
+    -   [amp-sidebar](https://github.com/ampproject/amphtml/commit/99634b18310129f4260e4172cb2750ae7b8ffbf0)
+    -   [amp-image-lightbox](https://github.com/ampproject/amphtml/commit/e6006f9ca516ae5d7d79267976d3df39cc1f9636)
+    -   [amp-accordion](https://github.com/ampproject/amphtml/commit/1aae4eee37ec80c6ea9b822fb43ecce73feb7df6)
+-   Implementing a video player.
+    -   [amp-jwplayer](https://github.com/ampproject/amphtml/commit/4acdd9f1d70a8a374cb886d3a4778476d13e7daf#diff-f650f38f7840dc8148bacd88733be338)
diff --git a/docs/code-ownership.md b/docs/code-ownership.md
new file mode 100644
index 0000000000000..7c8fa33d11d1f
--- /dev/null
+++ b/docs/code-ownership.md
@@ -0,0 +1,78 @@
+# Code Ownership and AMP
+
+This document describes the code ownership (OWNERS) model for the AMP open source
+project. This model is used in the [amphtml repository](https://github.com/ampproject/amphtml) and may be used by other AMP repositories as well.
+
+For more information on the overall code contribution process that the OWNERS model is a part of, see the [Contributing code and features](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md) documentation.
+
+The goals of enforcing AMP code ownership are as follows:
+
+-   Provide the flexibility to specify a different set of owners for individual
+    directories / files in the repository
+-   Allow for the recursive inheritance of ownership for files / directories based
+    on the ownership of parent directory(ies)
+-   Prevent incoming pull requests from being merged until they are approved by a
+    sufficient number of owners so as to cover all files / directories in the
+    change
+-   Allow overall project / area owners to approve the odd PR, without their
+    having to receive a GitHub notification them about every incoming PR
+-   Provide an automated mechanism to update the approved status of a PR each time
+    a reviewer modifies it
+-   Forbid non-committers and non-owners from modifying the approved status of a
+    pull request
+-   Make it easy to add / change the list of owners for a given directory / file
+
+## Chromium's code ownership model
+
+The Chromium open source project implements a code ownership
+[model](https://chromium.googlesource.com/chromium/src/+/main/docs/code_reviews.md#OWNERS-files)
+that we would like to use for AMP HTML.
+
+## GitHub's native code ownership solution
+
+GitHub's [native](https://help.github.com/articles/about-code-owners/) solution
+uses a CODEOWNERS file in each directory to determine who owns the files within
+the directory. It has wildcard support to specify different owners for different
+files / file types, and glob support to specify owners for an entire directory
+tree.
+
+Unfortunately, this solution is missing a key feature: `OWNERS` files are not
+recursive. In other words, the owner of a directory is not automatically the
+owner of its subdirectories.
+
+## AMP's custom code ownership solution
+
+AMP will use a custom open-source web service available on GitHub at
+[google/github-owners-bot](https://github.com/google/github-owners-bot). This
+will be deployed on [ampproject/amphtml](https://github.com/ampproject/amphtml)
+as a bot, which will update the status of a pull request in response to the
+following events:
+
+-   Creation of a pull request
+-   New commit pushed to a pull request
+-   Comment posted on a pull request
+-   Pull request reviewed
+
+After each of these events, the pull request's status will be updated by the bot
+to indicate whether it has been approved by a sufficient number of owners.
+
+An earlier version of this bot was limited by GitHub's API, which could only
+post comments to pull requests. This did not scale well at the time, and use of
+the bot was discontinued.
+
+Today, GitHub supports a new [status API](https://developer.github.com/v3/repos/statuses/)
+that will be used by the bot to directly update the status of pull requests as
+described above. Stay tuned for the latest changes.
+
+## Approvals required before merging a change
+
+Any change in AMP requires the approval of at least one owner of the code the change
+modifies, but this is a subset of the required approvals before a change may be merged.
+See the [code contribution process](./contributing-code.md) for more details.
+
+## Criteria for being listed as an owner in an `OWNERS` file
+
+The `OWNERS` file for each directory will typically list the creator(s) of
+the component or extension it contains, along with those who are most familiar
+with the directory contents. To be added to an OWNERS file create a PR and
+go through the normal [code contribution process](./contributing-code.md).
diff --git a/contributing/component-validator-rules.md b/docs/component-validator-rules.md
similarity index 92%
rename from contributing/component-validator-rules.md
rename to docs/component-validator-rules.md
index 10230326e14b7..4c9f040eb4f79 100644
--- a/contributing/component-validator-rules.md
+++ b/docs/component-validator-rules.md
@@ -8,9 +8,9 @@ of the most common rules used when creating a new AMP Extended Component.
 ## Getting Started
 
 Before writing any of your `.protoascii` or `validator-*.html` files, please
-[see the Installation and Usage sections of the AMP Validator](https://github.com/ampproject/amphtml/blob/master/validator/README.md).
+[see the Installation and Usage sections of the AMP Validator](https://github.com/ampproject/amphtml/blob/main/validator/README.md).
 
-This repo uses a [python script](https://github.com/ampproject/amphtml/blob/master/validator/build.py) to run golden tests using the AMP validator.
+This repo uses a [python script](https://github.com/ampproject/amphtml/blob/main/validator/build.py) to run golden tests using the AMP validator.
 Thus it is a good idea to ensure,
 that your development environment is configured correctly,
 before writing new tests to avoid any confusion.
@@ -22,9 +22,9 @@ displays an image of a cat inside an AMP document. This extended component
 loads one of a set of 3 different pre-built cat images, so that the user
 doesn't need to host the images on their server. Each image has a cat name:
 
-- Oscar
-- Chloe
-- Bella
+-   Oscar
+-   Chloe
+-   Bella
 
 Common usage of this extended component might look like:
 
@@ -38,11 +38,11 @@ Common usage of this extended component might look like:
 
 Your first step will be writing the extended component JavaScript code. Place
 this code in the amphtml src tree at the location of
-`amphtml/extensions/amp-cat/0.1/`. This document only describes how to
-specify validation rules for an extended component - it does not cover
-implementing its runtime behavior. For the latter, see the codelab [Creating
-your first AMP
-Component](https://codelabs.developers.google.com/codelabs/creating-your-first-amp-component/).
+`amphtml/extensions/amp-cat/0.1/`. This document only describes how to specify
+validation rules for an extended component - it does not cover implementing its
+runtime behavior. For the latter, see the [Building an AMP
+Extension](https://github.com/ampproject/amphtml/blob/main/docs/building-an-amp-extension.md)
+guide.
 
 ## Validation Rules
 
@@ -113,6 +113,7 @@ tags: {  # <amp-cat>
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
     supported_layouts: FLEX_ITEM
+    supported_layouts: INTRINSIC
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
@@ -266,6 +267,7 @@ tags.
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
     supported_layouts: FLEX_ITEM
+    supported_layouts: INTRINSIC
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
@@ -274,7 +276,7 @@ tags.
 
 This section adds validation rules for the various layout options available to
 amp tags. See
-[AMP HTML Layout System](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md)
+[AMP HTML Layout System](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md)
 to determine which options make sense for your tag.
 
 ### Attribute Validation Options
@@ -342,11 +344,11 @@ generate mixed-mode warnings when displayed from the AMP Cache.
 
 Only one of:
 
-- `value`
-- `value_casei`
-- `value_regex`
-- `value_regex_casei`
-- `value_url`
+-   `value`
+-   `value_casei`
+-   `value_regex`
+-   `value_regex_casei`
+-   `value_url`
 
 may be specified for a single attribute. However, multiple values may be specified
 for `value` and `value_casei` as seen in the example above.
@@ -398,6 +400,7 @@ tags: {  # <amp-cat>
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
     supported_layouts: FLEX_ITEM
+    supported_layouts: INTRINSIC
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
@@ -426,7 +429,7 @@ It is a good idea to contribute test files along with your validator rules
 which at minimum demonstrate a correct usage of your validator rules.
 
 A good place to start is to copy
-[minimum_valid_amp.html](https://github.com/ampproject/amphtml/blob/master/validator/testdata/feature_tests/minimum_valid_amp.html) to a new file named, for example:
+[minimum_valid_amp.html](https://github.com/ampproject/amphtml/blob/main/validator/testdata/feature_tests/minimum_valid_amp.html) to a new file named, for example:
 
 <pre>
 amphtml/extensions/<b>amp-cat</b>/0.1/test/validator-<b>amp-cat</b>.html
@@ -462,7 +465,7 @@ Optionally, you may add more than one valid variant and/or invalid examples.
 
 ## Test Output files
 
-After creating your validator html file, You need to create the corresponding `.out` file to act as your test results. These are used to verify if the validator is validating your extension correctly. To do this, navigate to the root of the project, `amphtml/` and run `gulp validator --update_tests`. This should generate a matching `.out` file, and for this example, it would be:
+After creating your validator html file, You need to create the corresponding `.out` file to act as your test results. These are used to verify if the validator is validating your extension correctly. To do this, navigate to the root of the project, `amphtml/` and run `amp validator --update_tests`. This should generate a matching `.out` file, and for this example, it would be:
 
 <pre>
 amphtml/extensions/<b>amp-cat</b>/0.1/test/validator-<b>amp-cat.out</b>
@@ -499,4 +502,4 @@ This document attempts to summarize some of the more commonly used rules for
 creating validator extended components. More complex rules are possible and new rule
 types can even be added as needed. If your goals are not met by the rules in
 this document, [don't hesitate to
-contact](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#discussion-channels) the AMP developers and ask for suggestions.
+contact](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#discussion-channels) the AMP developers and ask for suggestions.
diff --git a/docs/contributing-code.md b/docs/contributing-code.md
new file mode 100644
index 0000000000000..4a75d55df63bf
--- /dev/null
+++ b/docs/contributing-code.md
@@ -0,0 +1,212 @@
+# Contributing code and features
+
+Thank you for helping make AMP better by fixing bugs, adding features or improving the AMP code in some other way!
+
+This document describes the process you will go through to make a change in AMP.
+
+## Process Overview
+
+### Process for minor bug fixes and updates
+
+We want to make it as easy as possible to get in small fixes. A fix for a small bug should be as easy as creating a PR with the change, adding/fixing a test, and sending it to a reviewer.
+
+-   [ ] Agree to the [OpenJSF Contributor License Agreement (CLA)](#contributor-license-agreement).
+-   [ ] (optional) If you are fixing a bug and there is an existing GitHub issue, assign it to yourself (if you can) or comment on it to let others know you are working on it. If there is no GitHub issue consider filing one, but for minor fixes your PR description may be enough.
+-   [ ] (optional) [Find a guide](#find-a-guide) before you start coding to help you answer questions.
+-   [ ] Follow the parts of the [Implementation](#implementation) section that makes sense for your change. There are many parts of the process that you probably won't need to follow for a minor fix--e.g. you may not need to make validator changes or put your change behind an experiment for minor fixes. If in doubt ask your guide or the [#contributing channel](https://amphtml.slack.com/messages/C9HRJ1GPN/) on [Slack](https://bit.ly/amp-slack-signup).
+-   [ ] When your code is ready to review, find [people to review and approve your code](#code-review-and-approval).
+    -   Your code must be reviewed/approved by an Owner for each area your PR affects and a Reviewer. (It is acceptable and common for one person to fulfill both roles.)
+        -   after your PR is created, a bot will automatically find Owners that can approve your PR and add them to your PR; you may also view the OWNERS file in the directories you change (or their parent directories)
+        -   choose a [Reviewer](https://github.com/orgs/ampproject/teams/reviewers-amphtml); it's possible that the Owners that were automatically added by the bot are also Reviewers
+    -   If the Owner that was automatically added is not a Reviewer, or you want to have someone else review and approve your code add them as reviewers on your PR if you are able to do so, otherwise cc them by adding the line "/cc @username" in your PR description/comment.
+
+If your run into any issues finding a Reviewer/Owner or have any other questions, ping the [#contributing channel](https://amphtml.slack.com/messages/C9HRJ1GPN/) on [Slack](https://bit.ly/amp-slack-signup). You can also reach out to mrjoro on Slack or cc him on your GitHub issue/PR.
+
+### Process for significant changes
+
+Significant changes (e.g. new components or significant changes to behavior) require consultation with and approval from knowledgeable members of the community.
+
+**If you are making a change to existing behavior, familiarize yourself with AMP's [policy on breaking changes](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-versioning-policy.md#breaking-changes).**
+
+**If you are deprecating/removing a feature, follow the [deprecation process](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-versioning-policy.md#deprecations) instead of this process.**
+
+-   [ ] _Before you start coding_, [find a guide](#find-a-guide) who you can discuss your change with and who can help guide you through the process.
+-   [ ] Agree to the [OpenJSF Contributor License Agreement (CLA)](#contributor-license-agreement).
+-   [ ] File an [Intent-to-implement (I2I)](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=INTENT+TO+IMPLEMENT&template=intent-to-implement.yml) GitHub issue and cc your guide on it. The I2I should include:
+    -   A description of the change you plan to implement.
+    -   If you are integrating a third-party service, provide a link to the third-party's site and product.
+    -   Details on any data collection or tracking that your change might require.
+    -   A prototype or mockup (for example, an image, a GIF, or a link to a demo).
+-   [ ] Determine who needs to approve your I2I. Changes that have a significant impact on AMP's behavior or significant new features require the approval from the [Approvers Working Group (WG)](https://github.com/ampproject/wg-approvers). Work with your guide to determine whether your change is significant enough that it requires approval from the Approvers Working Group and/or any other [Working Group](https://github.com/ampproject/meta/tree/main/working-groups).
+-   [ ] Get pre-approval from the Approvers WG if needed. For changes that require approval from the Approvers WG, at least 3 members of the Approvers WG should provide pre-approval on the I2I before significant implementation work proceeds.
+-   [ ] Finalize the design of your change.
+    -   Familiarize yourself with our [Design Principles](design-principles.md).
+    -   Your guide can help you determine if your change requires a design doc and whether it should be brought to a [design review](./design-reviews.md).
+-   [ ] Proceed with the [implementation](#implementation) of your change.
+-   [ ] For changes that require approval from the Approvers WG, file an [Intent-to-ship (I2S) issue](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=INTENT+TO+SHIP&template=intent-to-ship.yml). Indicate which experiment is gating your change and a rollout plan. Once this issue is approved by 3 members of the Approvers WG the rollout plan described in the I2S may proceed.
+
+## Find a guide
+
+A guide is a member of the AMP community who is knowledgeable about the area you are modifying and who can guide you from the design phase all the way through launch.
+
+A guide is required if you are making a substantial change to AMP, but is optional if you are making smaller changes.
+
+To find a guide:
+
+-   The [Working Group](https://github.com/ampproject/meta/blob/main/working-groups/README.md) that is most responsible for the area you are changing may document how to find a guide from that Working Group. If they do not, reach out to the facilitator of the WG (on [Slack](https://bit.ly/amp-slack-signup) or by ccing them on your GitHub issue by adding "/cc @username" in the issue body or comment).
+-   If there is no obvious Working Group responsible for the area you are changing but you know what part of the codebase your change will be in, reach out to one of the people in the OWNERS files for the areas you're changing (on [Slack](https://bit.ly/amp-slack-signup) or by ccing them on your GitHub issue).
+-   If you're still not sure who your guide should be, ask for a guide on [Slack](https://bit.ly/amp-slack-signup) in the [#contributing channel](https://amphtml.slack.com/messages/C9HRJ1GPN/).
+-   If you can't find a guide after going through these routes or the guides you find aren't responsive, reach out to mrjoro on Slack or cc him on your GitHub issue/PR.
+
+Once you have found a guide, make sure to @-mention them on any issues / PRs related to your change (e.g. if mrjoro is your guide you can just add "/cc @mrjoro" in the issue/PR body or comment).
+
+## Implementation
+
+-   (optional) [Join AMP on GitHub](https://goo.gl/forms/T65peVtfQfEoDWeD3). You don't need to wait to be added to the org before you start coding.
+-   [Perform the one-time setup if needed](./getting-started-quick.md#one-time-setup): Set up your GitHub account, install Node, fork repo, track repo, etc.
+-   [Create a working branch](./getting-started-e2e.md#create-a-git-branch).
+-   [Build AMP](./getting-started-e2e.md#building-amp-and-starting-a-local-server).
+-   Write your code.
+    -   For more substantial changes, multiple smaller PRs are preferable to one large PR. These will be easier to review and can prevent wasted work.
+    -   Consult these resources for guidance and guidelines:
+        -   **Design**: [AMP Design Principles](./design-principles.md)
+        -   **JavaScript**: [Google JavaScript Code Style Guide](https://google.github.io/styleguide/jsguide.html)
+        -   **CSS**: [Writing CSS For AMP Runtime](./writing-css.md)
+        -   **Creating new components**:
+            -   [Instructions and Guidelines for building an AMP component](./building-an-amp-extension.md)
+            -   Learn to create your first component in this [guide](https://github.com/ampproject/amphtml/blob/main/docs/building-an-amp-extension.md)
+            -   Watch this [YouTube video](https://youtu.be/FJEhQFNKeaQ?list=PLXTOW_XMsIDTDXYO-NAi2OpEH0zyguvqX) to learn about "Building a new AMP component"
+        -   **Integrating third-party software, embeds, services**: [Guidelines](../3p/README.md)
+        -   **Accessibility**:
+            -   [Web Fundamentals - Accessibility](https://developers.google.com/web/fundamentals/accessibility/)
+            -   [web.dev Lighthouse accessibility audits guide](https://web.dev/lighthouse-accessibility/)
+    -   [Put your change behind an experiment flag](./building-an-amp-extension.md#experiments) unless it is a minor fix or your reviewer indicates this is not needed.
+    -   [Commit your files](./getting-started-e2e.md#edit-files-and-commit-them).
+-   [Test your changes](./getting-started-e2e.md#testing-your-changes).
+    -   A key feature of AMP is performance. All changes will be analyzed for any performance impact; we particularly appreciate changes that make things even faster. Please include any measured performance impact with substantial pull requests.
+-   Prepare for your code review.
+    -   For more substantial changes, it's usually preferable to have your code reviewed before you make a significant investment in new tests, examples, etc.
+    -   Before your final review, make sure your change:
+        -   [Has good test coverage](./testing.md)
+        -   [Follows the style and design guidelines](./developing.md#guidelines--style)
+        -   [Provides good documentation](./building-an-amp-extension.md#documenting-your-element)
+        -   [Passes the presubmit checks (no lint and type check errors, tests are passing)](../build-system/common/enable-git-pre-push.sh#L17-L20)
+        -   [Includes validation rules and tests, if relevant](./building-an-amp-extension.md#allowing-proper-validations)
+        -   [Provides an example, if relevant](./building-an-amp-extension.md#example-of-using-your-extension)
+-   Send your code for review.
+    -   [Agree to the Contributor License Agreement](#contributor-license-agreement) if you have not already done so.
+    -   [Pull the latest changes from the amphtml repo](./getting-started-e2e.md#pull-the-latest-changes-from-the-amphtml-repository) and resolve any conflicts.
+    -   Run the **pre push** check, which is a tool that helps catch any issues before you submit your code. To enable the git pre-push hook, see [`enable-git-pre-push.sh`](../build-system/common/enable-git-pre-push.sh#L17-L20).
+    -   [Push your changes](./getting-started-e2e.md#push-your-changes-to-your-github-fork)
+    -   [Create a Pull Request (PR)](./getting-started-e2e.md#send-a-pull-request-ie-request-a-code-review).
+    -   Make sure the presubmit checks shown on your PR on GitHub passes (e.g. no lint and type check errors, tests are passing).
+    -   Add reviewers to your PR that will fulfill the requirements of code review and approval documented in the [Code review and approval](#code-review-and-approval) section. (A bot will automatically assign Owners that can review your code, and your guide can help find Reviewers if needed.)
+    -   [Respond to feedback](./getting-started-e2e.md#respond-to-pull-request-comments).
+-   After your PR has all of the necessary approvals, your code may be merged into the repository by any Collaborator/Reviewer. Your guide will typically handle this; reach out to them if your code is not merged soon after it has been approved.
+-   To check on your changes and find out when they get into production, read [See your changes in production](./getting-started-quick.md#see-your-changes-in-production).
+-   [Clean up](./getting-started-quick.md#delete-your-branch-after-your-changes-are-merged-optional): After your changes are merged, you can delete your working branch.
+
+## Contributing extended components
+
+AMP is designed to be extensible - it is meant to support “Extended Components” that provide first-class support for additional rich features.
+
+Because Extended Components may have significant impact on AMP performance, security, and usage, Extended Component contributions will be very carefully analyzed and scrutinized.
+
+In particular, we strive to design the overall component set, so that a large number of use cases can be composed from them. Instead of creating a new component it may thus be a better solution to combine existing components to a similar effect.
+
+We have a few additional resources that provide an introduction to contributing extended components:
+
+-   ["Building an AMP Extension"](./building-an-amp-extension.md) has a detailed description of how to build an AMP component.
+-   The ["Building a new AMP component" talk at AMP Conf 2017](https://youtu.be/FJEhQFNKeaQ?list=PLXTOW_XMsIDTDXYO-NAi2OpEH0zyguvqX) provides an introduction to contributing AMP components.
+
+For further detail on integrating third-party services (e.g., fonts, embeds, etc.), see our [3p contribution guidelines](https://github.com/ampproject/amphtml/tree/main/3p).
+
+## Contributor License Agreement
+
+AMP requires all contributors to agree to the OpenJSF Contributor License Agreement in order to protect contributors and users in issues of intellectual property.
+
+To agree to the OpenJSF Contributor License Agreement, visit [https://cla-assistant.io/ampproject/amphtml](https://cla-assistant.io/ampproject/amphtml), read through the agreement, and click "Sign in with GitHub to agree."
+
+Alternatively, you also have the option of downloading the Contributor License Agreement from https://individual-cla.openjsf.org, filling it in, signing it, writing in your GitHub handle, and emailing it to operations@openjsf.org. As processing your CLA is done manually, this takes much longer and is therefore not recommended.
+
+## Code review and approval
+
+All code in AMP must be reviewed and approved before it is merged. Reviewers/Collaborators primarily ensure that the code is correct, efficient and consistent with existing AMP code while Owners primarily provide a domain-specific review of the code.
+
+To be merged, all code must be approved by both:
+
+-   At least one [Reviewer](https://github.com/orgs/ampproject/teams/reviewers-amphtml) who is not the author. If the author is a Reviewer, a [Collaborator](https://github.com/orgs/ampproject/teams/collaborators-amphtml) may fulfill this requirement instead.
+-   At least one [Owner](https://github.com/ampproject/amphtml/search?o=asc&q=filename%3AOWNERS&s=indexed) for all areas the PR affects, except those areas in which the code author is an Owner.
+
+It is acceptable for one person to fulfill these requirements, e.g. if an Owner who is also a Reviewer approves the PR it may be merged.
+
+We now have a bot that will automatically assign Owners to a PR once it is created, and it is likely at least one of these Owners will also be a Reviewer.
+
+Once the PR has been approved, anyone with commit rights to the repository may merge the PR, including its author.
+
+These guidelines are specific to the amphtml repository. Other ampproject repos may follow the same guidelines or use different guidelines as documented in their docs/contributing.md files.
+
+### Roles
+
+#### Collaborators
+
+-   Review, approve and merge PRs in the repository for which they are Collaborators.
+-   Collaborator status is granted to folks who have proven basic familiarity with the respective repository.
+-   A person may become a Collaborator after 2 merged PRs that are non-trivial (not only fixing typos, not only config changes) and a +1 from 1 current Reviewer. To request becoming a Collaborator file an issue in the repository in which you are requesting to be a Collaborator and cc a [Reviewer](#reviewers) in that repository.
+-   The list of Collaborators is maintained in the [Collaborators (amphtml)](https://github.com/orgs/ampproject/teams/collaborators-amphtml) GitHub team.
+
+#### Reviewers
+
+-   Review, approve and merge PRs in the repository for which they are Reviewers.
+-   Reviewer status is granted to folks who have demonstrated deep familiarity with the code-style and conventions of the respective repository.
+-   A person may become a Reviewer after 10 merged PRs or 10 high quality reviews of complex PRs and a +1 from 1 current Reviewer. Qualifying PRs must be non-trivial (not only fixing typos, not only config changes) and should have implemented or documented at least 2 new features. To request becoming a Reviewer file an issue in the repository in which you are requesting to be a Reviewer and assign/cc a Reviewer in that repository.
+-   The list of Reviewers is maintained in the [Reviewers (amphtml)](https://github.com/orgs/ampproject/teams/reviewers-amphtml) GitHub team.
+
+#### Owners
+
+-   Review & approve PRs in the area in which they have expertise.
+-   Requirements to be an Owner:
+    -   Demonstrated expertise in the area in which they are an Owner.
+    -   Any GitHub user (including those who are not Reviewers or Collaborators) may be an Owner.
+    -   When creating a new directory (such as when creating a new AMP extension) the author of the pull request should designate themselves as an Owner of that directory.
+    -   Owners of an area may approve other Owners at or below their area of expertise following the normal PR process. To request becoming an Owner create a PR adding yourself to the appropriate OWNERS file and assign/cc a current Owner for that directory.
+-   The list of Owners for a directory can be found in the [OWNERS](https://github.com/ampproject/amphtml/search?o=asc&q=filename%3A"OWNERS"&s=indexed) file in the directory or a parent directory.
+
+## Cherry-picks
+
+We have a well-defined process for handling requests for changes to the **experimental**/**beta**, **stable**, or **lts** release builds. These changes are known as "cherry-picks".
+
+> Note: We do not support cherry-picks into the **nightly** release channel; in the event of security or privacy issues, a rollback is performed instead.
+
+**The bar for getting a cherry-pick into a live release is very high** because our goal is to produce high quality launches on a predictable schedule.
+
+**Keep in mind that performing a cherry-pick requires a significant amount of work from you and the on-duty engineer** and they can take a long time to process.
+
+-   In general only fixes for [P0 issues](https://github.com/ampproject/amphtml/blob/main/docs/issue-priorities.md) may be cherry-picked. P0 issues are those that:
+    -   cause privacy or security issues
+    -   cause user data loss
+    -   break existing AMP web pages in a significant way
+    -   cause an outage or critical production issue
+    -   or would otherwise cause a significant harm to AMP's reputation if left unresolved
+-   Regressions found in the **experimental**/**beta** releases that are not P0 _may_ be approved if they can be resolved with a rollback. Fixes other than rollbacks--no matter how simple they may seem--will not be approved because these have the potential to cause cascading problems and delay the release promotion of **beta** to **stable** for everyone.
+
+### Process for requesting a cherry-pick
+
+The following outlines the process to request a cherry-pick.
+
+-   Ensure there is a [bug report](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Bug&template=bug-report.yml) filed for the problem, and ensure it is resolved _before_ filing the cherry-pick request.
+-   Escalate the issue to P0 by attaining consensus from one or more members of the [Approvers Working Group (WG)](https://github.com/ampproject/wg-approvers) (if you are a member of this working group, you may not count your voice for consensus purposes)
+-   File the cherry-pick request issue using the [Cherry-pick request template](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type:+Release,Cherry-pick:+Beta,Cherry-pick:+Experimental,Cherry-pick:+LTS,Cherry-pick:+Stable&template=cherry-pick-request.yml&title=%F0%9F%8C%B8+Cherry-pick+request+for+%23ISSUE+into+%23RELEASE). Follow the instructions in the template, providing all the requested data. **Make sure you fill out this issue completely or your cherry-pick may not be seen or acted upon.**
+-   Get the necessary approval for your cherry-pick, indicated via comments on the cherry-pick request issue.
+    -   For cherry-picks into **experimental**/**beta**, at least one member of the [Approvers WG](https://github.com/orgs/ampproject/teams/wg-approvers/members) must approve the cherry-pick/rollback.
+    -   For cherry-picks into **stable**/**lts** at least one member from the [Cherry-Pick Approvers group](https://github.com/orgs/ampproject/teams/cherry-pick-approvers/members) must approve the cherry-pick.
+-   Once approved, the on-duty engineer handling releases will work with you to ensure the cherry-pick is made.
+-   **Once the cherry-pick is made you are responsible for verifying the cherry-pick fixes the issue and does not cause other issues.**
+
+**If you are requesting a cherry-pick to fix an issue in production** it is likely you will _also_ need a cherry-pick into the **experimental**/**beta** releases. Problems cherry-picked in **stable** could be overridden after promoting **beta**. The on-duty engineer will help determine if you need to cherry-pick both release channels.
+
+**It is possible that a P0 issue gets _discovered_ on Monday or Tuesday, when it was _already present_ in the code-base in the previous week.** When that happens, the previous week's **nightly** release (which is bound to be promoted to **experimental**/**beta** on Tuesday morning) will contain the offending code without the fix. In this case, the release on-duty engineer must perform a cherry-pick before promoting last week's **nightly** to **experimental**/**beta**.
+
+> Note: While the cherry-pick is performed on top of last week's **nightly** release, we do not promote that fix to the **nightly** release channel. This is because the cherry-pick is performed on top of a previous nightly release, not on top of the latest.
+
+If you run into any issues or have any questions when requesting a cherry-pick, please use the [AMP Slack #release channel](https://amphtml.slack.com/messages/C4NVAR0H3/) ([sign up for Slack](https://bit.ly/amp-slack-signup)).
diff --git a/docs/contributing.md b/docs/contributing.md
new file mode 100644
index 0000000000000..73afb158ac05f
--- /dev/null
+++ b/docs/contributing.md
@@ -0,0 +1,80 @@
+# Contributing to AMP HTML
+
+The AMP HTML project strongly encourages your participation and [contributions](https://www.ampproject.org/contribute/)!
+
+We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.
+
+How would you like to help?
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+<!-- {"maxdepth": 1} -->
+
+-   [Report a bug](#report-a-bug)
+-   [Make a suggestion](#make-a-suggestion)
+-   [Contribute code/features](#contribute-codefeatures)
+-   [Get started with open source](#get-started-with-open-source)
+-   [Ongoing participation](#ongoing-participation)
+
+If you have questions about _using_ AMP or are _encountering problems using AMP_ on your site please visit our [support page](./support.md) for help.
+
+## Report a bug
+
+[File a bug report](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Bug&template=bug-report.yml) if you find a bug in AMP. Provide a detailed description and steps for reproducing the bug; screenshots and working examples that demonstrate the problem are appreciated!
+
+The community regularly monitoring issues and will try to fix open bugs quickly according to our [prioritization guidelines](./issue-priorities.md).
+
+## Make a suggestion
+
+[File a feature request](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Feature+Request&template=feature-request.yml) if you have a suggestion for a way to improve AMP or a request for a new AMP feature.
+
+If you are suggesting a feature that you are intending to implement, please see the [Contributing code/features](#contribute-code-features) section below for next steps.
+
+## Contribute code/features
+
+We'd love to have your help contributing code and features to AMP!
+
+See the [Contributing code and features](./contributing-code.md) document for details on the process you can use to add code/features.
+
+## Get started with open source
+
+If you are new to contributing to an open source project, Git/GitHub, etc. welcome! We are glad you're interested in contributing to AMP and we want to help make your open source experience a success.
+
+The [Getting Started End-to-End Guide](./getting-started-e2e.md) provides step-by-step instructions for everything from creating a GitHub account to getting your code reviewed and merged. Even if you've never contributed to an open source project before you'll soon be building AMP, making improvements and seeing your code live across the web.
+
+The community has created a list of [Good First Issues](https://github.com/ampproject/amphtml/labels/good%20first%20issue) specifically for new contributors to the project. Feel free to find one of the [unclaimed Good First Issues](https://github.com/ampproject/amphtml/issues?utf8=%E2%9C%93&q=is%3Aopen%20label%3A%22good%20first%20issue%22%20-label%3A%22GFI%20Claimed!%22) that interests you, claim it by adding a comment to it and jump in!
+
+If you're interested in helping out but can't find a Good First Issue that matches your skills/interests, [sign up for our Slack](https://bit.ly/amp-slack-signup) and then reach out in the [#welcome-contributors channel](https://amphtml.slack.com/messages/welcome-contributors/) or send a Direct Message to [mrjoro](https://amphtml.slack.com/team/mrjoro/).
+
+If you run into any problems we have plenty of people who are willing to help; see the [How to get help](./getting-started-e2e.md#how-to-get-help) section of the Getting Started guide.
+
+## Ongoing participation
+
+We actively encourage ongoing participation by community members.
+
+### Discussion channels
+
+Technical issues, designs, etc. are discussed using several different channels:
+
+-   [GitHub issues](https://github.com/ampproject/amphtml/issues) and [pull requests](https://github.com/ampproject/amphtml/pulls)
+-   [Slack](https://amphtml.slack.com) ([signup](https://bit.ly/amp-slack-signup))
+    -   the [#contributing](https://amphtml.slack.com/messages/C9HRJ1GPN/details/) channel is the main channel for you to discuss/ask questions about _contributing_ to the open source project
+    -   if you're _new to contributing_ to AMP stop by [#welcome-contributors](https://amphtml.slack.com/messages/C432AFMFE/details/) to say hi!
+    -   **NOTE: if you have a question about _using AMP on your site_, use [Stack Overflow](https://stackoverflow.com/questions/tagged/amp-html) rather than Slack** as Stack Overflow is more actively monitored for these types of questions
+    -   there are many other Slack channels for more specific topics; after you join our Slack click on the "Channels" header to find other channels you want to participate in
+-   the [amphtml-discuss Google Group](https://groups.google.com/forum/#!forum/amphtml-discuss)
+
+### Working groups
+
+Most of the day-to-day work in building AMP happens in AMP's [Working Groups (WGs)](https://github.com/ampproject/meta/tree/main/working-groups). Getting involved in a WG is a great way to contribute to AMP.
+
+Most working groups post approximately bi-weekly [Status Update GitHub issues](https://github.com/search?q=org%3Aampproject+label%3A%22Type%3A+Status+Update%22&type=Issues).
+
+### Weekly design reviews
+
+The community holds weekly engineering [design reviews](./design-reviews.md) via video conference. We encourage everyone in the community to participate in these discussions and to bring their designs for new features and significant bug fixes to these reviews.
diff --git a/docs/creating-a-welcoming-community.md b/docs/creating-a-welcoming-community.md
new file mode 100644
index 0000000000000..effc26913cf37
--- /dev/null
+++ b/docs/creating-a-welcoming-community.md
@@ -0,0 +1,50 @@
+# Creating A Welcoming Community
+
+We want to make the AMP open source community as welcoming as possible, both because we :sparkling_heart: new contributors (and want more of them) and because most people prefer to work on a project with a friendly community.
+
+Here are some ways you can help make AMP's open source community even more welcoming. **The TL;DR is "be friendly and helpful."** :)
+
+-   Be welcoming in everything you do.
+    -   Think about how intimidating it can be to join a new community (will this new group ignore me? will they treat me like I'm not smart?) and then work to make our community less intimidating. People that see that the current environment is friendly and helpful will be more willing to take the plunge to help out.
+    -   Familiarize yourself with our [Code of Conduct](https://github.com/ampproject/meta/blob/main/CODE_OF_CONDUCT.md). In addition to a list of "don't's" the Code of Conduct includes some of our ideals like "we are committed to providing a friendly, safe and welcoming environment for everyone."
+    -   Think about how the words you use can affect how people perceive the community. A [jsconf talk from Harriet Lawrence](https://www.youtube.com/watch?v=WGE3-aBR4i8) makes some good points, including:
+        -   Things that may sound innocuous can actually be stumbling blocks for people thinking about joining a community. For example docs that say "these short and easy instructions" can turn away contributors who don't actually find the instructions easy and then feel like they aren't qualified to participate in the community.
+        -   The communication between people already in the community is one way people judge whether to join in. Be conscious of this when you talk to others (on issues, code reviews, etc.). Your joking insult on a PR with someone you know well may look like hostility to someone who doesn't know you.
+-   Don't let people feel ignored.
+    -   Keep an eye out for issues/comments/PRs on GitHub or comments on Slack that aren't being responded to and either respond yourself or find an appropriate person to do so. If you aren't sure who can help, ping [mrjoro](https://amphtml.slack.com/threads/team/mrjoro) on Slack.
+    -   If you can't immediately respond in detail to something in a PR/issue let the contributor know that and provide an estimate of when you'll be able to get to it (e.g. "I won't have time to get to this today, but plan on reviewing it on Friday").
+    -   Pay particular attention to [Good First Issues](https://github.com/ampproject/amphtml/labels/good%20first%20issue) since the people working on them are generally brand new to the community.
+-   Understand the motivations of contributors to AMP.
+    -   There are a lot of different reasons someone may be contributing to AMP. Understanding the motivations of contributors you're working with can help you point them in the right direction.
+    -   Some of the many reasons people contribute to AMP:
+        -   A developer using AMP that wants to fix something that isn't working for them (bug or new feature).
+        -   Someone from an ad network/analytics provider/video player/etc. that wants to add support for their service.
+        -   People that want to get involved in open source and found AMP (through news, tweets, open source new contributor events, etc.).
+-   Get an understanding of what new contributors are interested in helping out with (a new feature? just finding some way to help?) and point them to the relevant section of [bit.ly/helpamp](https://bit.ly/helpamp).
+    -   If you are working with a new contributor and they are not familiar with Git/GitHub or contributing to open source projects, point them to the Getting Started End-to-end guide at [bit.ly/helpamp-e2e](https://bit.ly/helpamp-e2e).
+    -   More experienced contributors may prefer the "[quick start](https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md)" version of the getting started guide.
+-   Help people find a project.
+    -   AMP relies on the community for many different types of contributions--code, documentation, AMP Start templates, translations, etc. Try to get a sense of what someone who doesn't have a specific project in mind would be interested in helping with and point them in the right direction.
+    -   [Good First Issues](https://github.com/ampproject/amphtml/labels/good%20first%20issue) are good starter projects.
+        -   When someone starts working on a GFI we add the "GFI Claimed!" label to it, so the [GFIs not marked as "GFI Claimed!](https://github.com/ampproject/amphtml/issues?utf8=%E2%9C%93&q=is%3Aopen%20label%3A%22good%20first%20issue%22%20-label%3A%22GFI%20Claimed!%22) are the open ones.
+        -   Keep an eye out for small issues that would make good Good First Issues and [create Good First Issues](https://github.com/ampproject/amphtml/blob/main/docs/creating-good-first-issues.md) for them. Having a variety of GFIs always available for new contributors helps ensure new people will have a way to get started contributing.
+        -   There may not yet be a Good First Issue that matches a new contributor's interests/expertise. If that's the case reach out to the community (e.g. on Slack) to see if anyone has an idea of a project for them to work on.
+    -   If you aren't sure where to send somebody for a starter project let [mrjoro](https://amphtml.slack.com/threads/team/mrjoro) know.
+-   Encourage contributors to sign up for Slack.
+    -   Slack provides the best forum for interacting with the community outside of individual GitHub issues/PRs.
+    -   Contributors will need to fill out a [single-question form](https://docs.google.com/forms/d/1wAE8w3K5preZnBkRk-MD1QkX8FmlRDxd_vs4bFSeJlQ/viewform?fbzx=4406980310789882877) to get an invite.
+    -   Point contributors to the Slack channel(s) that they'll likely get the most value out of, e.g. [#welcome-contributors](https://amphtml.slack.com/messages/C432AFMFE/) if they're brand new to the project, [#docs](https://amphtml.slack.com/messages/C3AU36BM0/) if they're planning on making documentation contributions and one of the [Working Group channels](https://github.com/ampproject/meta/tree/main/working-groups) if they're interested in the area a particular Working Group tackles.
+    -   Let contributors know they can Direct Message you with questions on Slack (if you're comfortable doing so).
+    -   Having conversations about issues/PRs on the issue/PRs themselves is ideal since this provides a more permanent record that may help other contributors. Many contributors are more comfortable asking questions on a less public platform, though, so having these conversations on Slack is fine. (In these cases summarize any clarifications/designs/etc. in the issue/PR after the discussion if it makes sense.)
+-   Encourage ongoing participation.
+    -   Make sure people who introduce a new component are added to the relevant OWNERS file(s) and let them know about our [OWNERS](https://github.com/ampproject/amphtml/blob/main/docs/code-ownership.md) process. We want contributors to have a sense of ownership over the things they contribute.
+    -   Help people who finish a Good First Issue find a new project to tackle and encourage them to take it on. If you don't already have a project in mind, gauge their interests and skill level and work with the rest of the community (or [mrjoro](https://amphtml.slack.com/threads/team/mrjoro)) to find a project suitable for them.
+    -   Some people may only be interested in making one-off fixes (e.g. adding support for their ad network) and that's fine. Even in these cases it doesn't hurt to mention some other ideas for ways to help (e.g. maybe someone adding their ad network wants to make some other more general ads fixes) and let them know we'd love their help.
+-   Let people know about [design reviews](design-reviews.md).
+    -   Design reviews provide an opportunity for the community to meet "face to face" (over video conference) and learn from each other.
+    -   Everyone is welcome to attend any design review (even if they aren't presenting a design).
+    -   If it makes sense, encourage contributors you are working with to bring their projects to a design review. (This is optional and shouldn't stand in the way of a new contributor making fast progress.)
+    -   Design docs are great, but we've also had successful design reviews with detailed GitHub issues for smaller design questions.
+    -   If the contributor is in a time zone that makes it hard for them to attend the design reviews let [mrjoro](https://amphtml.slack.com/threads/team/mrjoro) know and we can move the time around.
+-   Follow up when you don't hear from a contributor in a while.
+    -   Sometimes new contributors express interest, propose a new feature, or maybe even starts on a PR but then we stop hearing from them. Make an effort to follow up with the contributor (in the issue/PR, over Slack DM, etc.) to see if there's anything we can do to help them make progress.
diff --git a/docs/creating-good-first-issues.md b/docs/creating-good-first-issues.md
new file mode 100644
index 0000000000000..332f454684e31
--- /dev/null
+++ b/docs/creating-good-first-issues.md
@@ -0,0 +1,32 @@
+# Creating Good First Issues
+
+AMP welcomes new contributors and we want to make it as easy as possible for them to contribute. For many new contributors (who may not have open source/Git/AMP/etc. experience) it can be difficult to figure out how to get started.
+
+To help these new contributors get oriented we curate [Good First Issues](https://github.com/ampproject/amphtml/labels/good%20first%20issue). A Good First Issue is a starter issue that a new contributor can use to get comfortable contributing to the AMP Project.
+
+We depend on experienced members of the community to identify bugs/features that would provide this orientation and to then create a well-documented Good First Issue for them.
+
+Our approach is inspired by [Hoodie](http://hood.ie/) which collects starter issues in their [Hoodie Camp](https://github.com/hoodiehq/camp). See the [Hoodie Camp Issues](https://github.com/hoodiehq/camp/issues) for many examples of what good first issues look like. (Hoodie's [Welcoming Communities](http://hood.ie/blog/welcoming-communities.html) post is also a great read.)
+
+## Qualities of a Good First Issue
+
+Keep these qualities in mind when creating your Good First Issues:
+
+-   **You should have a good sense of exactly what is needed to resolve the issue.** In fact it would probably be faster for you to just fix the issue than to create the Good First Issue but the benefits to the community make the cost of creating the Good First Issue worth it.
+-   **Even issues that require a very small/straightforward fix can be Good First Issues.** The focus of Good First Issues is not just about getting fixes in AMP; they are also a chance for new contributors to get set up with Git/GitHub, get familiar with building/making changes/testing in AMP and experience going through the Pull Request process.
+-   **The issue should be P3.** The issue may not get picked up right away and the person fixing it may encounter problems while working on it so it should be an issue we are okay with going unresolved for a while.
+-   **New contributors have a variety of backgrounds; we should have a variety of Good First Issues.** The goal isn't for each Good First Issue to be a good first issue for _every_ new contributor. Some new contributors may have extensive web development experience but haven't used Git; some may know everything about Git & Pull Requests but don't have a lot of experience with web components. You can specify "What you will need to know" in the bug so new contributors can find a Good First Issue that matches their current experience.
+
+## How to create a Good First Issue
+
+-   When you identify an issue that would make a Good First Issue, create a new issue using the [Good First Issues Template](good-first-issues-template.md) (inspired by Hoodie's [template](https://github.com/hoodiehq/camp/blob/gh-pages/.github/ISSUE_TEMPLATE.md)). Copy the [raw markdown](https://raw.githubusercontent.com/ampproject/amphtml/main/docs/good-first-issues-template.md) into your issue and follow the guidance in the comments.
+-   Add the [Good First Issue label](https://github.com/ampproject/amphtml/labels/good%20first%20issue) and add the issue to the [Good First Issues milestone](https://github.com/ampproject/amphtml/milestone/25). (The redundancy is intentional. Most other open source projects use a label for tracking these types of issues, so we do too... but we also ensure every bug is triaged to the right milestone.)
+-   If you come across a good candidate for a Good First Issue but are momentarily unable to spend the time filling out the template add the [GFI Candidate](https://github.com/ampproject/amphtml/labels/GFI%20Candidate) label to the issue. The time spent converting GFI Candidates to Good First Issues will pay off for the AMP Project so please remember to come back to issues you labeled as a GFI Candidate.
+
+## Next steps for your Good First Issue
+
+-   We ask new contributors to claim a Good First Issue by adding a comment. Please keep an eye out for these and respond as soon as possible on the issue welcoming the new contributor and letting them know they can ask you questions.
+-   Please add the [GFI Claimed!](https://github.com/ampproject/amphtml/labels/GFI%20Claimed!) label to the issue once someone claims it so others can quickly see that someone is working on it.
+-   Encourage the person working on the GFI to [join the ampproject GitHub org](https://goo.gl/forms/T65peVtfQfEoDWeD3), which will let us assign the GFI to them. (Alternatively you can let [mrjoro](https://amphtml.slack.com/team/mrjoro/) know and he can send an invite to the new contributor directly.)
+-   Keep an eye on the new contributor's progress on the GFI, and offer to help if they seem stuck or if you haven't heard any updates in a few days.
+-   Once the GFI is complete help the new contributor find other projects to work on in AMP based on their interests.
diff --git a/docs/design-principles.md b/docs/design-principles.md
new file mode 100644
index 0000000000000..7552076dd8933
--- /dev/null
+++ b/docs/design-principles.md
@@ -0,0 +1,37 @@
+# AMP Design Principles
+
+These design principles are meant to guide the ongoing design and development of AMP. They should help us make internally consistent decisions.
+
+## User Experience > Developer Experience > Ease of Implementation.
+
+When in doubt, do what’s best for the end user experience, even if it means that it’s harder for the page creator to build or for the library developer to implement.
+
+## Don’t design for a hypothetical faster future browser.
+
+We’ve chosen to build AMP as a library in the spirit of the [extensible web manifesto](https://github.com/extensibleweb/manifesto/blob/master/README.md) to be able to fix the web of today, not the web of tomorrow.
+
+AMP should be fast in today's browsers. When certain optimizations aren't possible with today's platform, AMP developers should participate in standards development to get these added to the web platform.
+
+## Don’t break the web.
+
+Ensure that if AMP has outages or problems it doesn’t hurt the rest of the web. That means if the Google AMP Cache, the URL API or the library fails it should be possible for websites and consumption apps to gracefully degrade. If something works with an AMP cache it should also work without a cache.
+
+## Solve problems on the right layer.
+
+E.g. don’t integrate things on the client side, just because that is easier, when the user experience would be better with a server side integration.
+
+## Only do things if they can be made fast.
+
+Don’t introduce components or features to AMP that can’t reliably run at 60fps or hinder the instant load experience on today’s most common mobile devices.
+
+## Prioritise things that improve the user experience – but compromise when needed.
+
+Some things can be made fast and are still a terrible user experience. AMPs should deliver a fantastic user experience and speed is just one part of that. Only compromise when lack of support for something would stop AMP from being widely used and deployed.
+
+## Be inclusive
+
+Remember that people have different abilities and use AMP in different ways, on different devices, and sometimes with assistive technologies. Make sure that AMP is accessible and usable by everyone.
+
+## No "nicelists" or "allowed lists".
+
+We won’t give any special treatment to specific sites, domains or origins except where needed for security or performance reasons.
diff --git a/docs/design-reviews.md b/docs/design-reviews.md
new file mode 100644
index 0000000000000..bdad2df9e1e46
--- /dev/null
+++ b/docs/design-reviews.md
@@ -0,0 +1,77 @@
+# Design Reviews
+
+The AMP open source community holds weekly public design reviews via video conference. We encourage everyone to attend these design reviews to discuss the design challenges being faced by the community.
+
+-   [Upcoming design reviews](https://github.com/ampproject/amphtml/labels/Type%3A%20Design%20Review)
+-   [Past design reviews](https://github.com/ampproject/amphtml/issues?q=label%3A%22Type%3A+Design+Review%22+is%3Aclosed)
+
+The GitHub issue for a given week's design review will have links to the designs being discussed that week. When the design review is over notes from the discussion will be posted to the GitHub issue.
+
+## Attending a design review
+
+To join a design review, follow the link for the video conference in the Design Review issue.
+
+You can optionally join the [design review Google Group](https://groups.google.com/a/ampproject.org/forum/#!forum/amp-design-review) to be able to join the video conference automatically; otherwise when you click on the video conference link you may have to wait a bit for someone in the meeting to accept your request to join.
+
+**When attending a design review please read through the designs _before_ the review starts.**
+
+## Design reviews are global
+
+Because AMP contributors are located all over the world we rotate the design review times to accommodate people in different time zones. The time and date for a design review will be specified in that design review's issue.
+
+If none of the design review times are convenient for you and you have a design you would like to discuss please reach out to mrjoro on [Slack](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#discussion-channels).
+
+## Bringing your design to a design review
+
+Design reviews are a great way to discuss and refine your designs with knowledgeable people in the community. Not every feature/change has to be brought to a design review. For smaller changes a design review is completely optional; for larger changes covered by the [code and feature contribution process](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md) work with your reviewer to determine if a design review makes sense.
+
+The process for bringing a design to the design review is:
+
+-   Determine how to document your design.
+    -   Most larger, more complex designs should use an [explainer](#explainers).
+    -   For smaller issues, you may use a fully detailed Intent-to-implement (I2I) GitHub issue or other GitHub issue describing the problem and proposed solution.
+    -   If you aren't sure which option you should use to document your design, ask your reviewer or the [#contributing Slack channel](https://amphtml.slack.com/messages/docs/) ([sign up](https://bit.ly/amp-slack-signup)).
+-   Perform a design pre-review with your reviewer if you have one; they may include other people that know the areas your design affects in this pre-review as well. If you don't have a reviewer you can request a pre-review in the [#contributing Slack channel](https://amphtml.slack.com/messages/contributing) ([sign up](https://bit.ly/amp-slack-signup)). It is fine to request a pre-review before your design is complete.
+-   When your design is ready to be discussed at a design review add a comment on the [Design Review GitHub issue](https://github.com/ampproject/amphtml/labels/Type%3A%20Design%20Review) for the date/time that works best for you.
+    -   You must add your design review topic to the design review issue at least 24 hours in advance of the design review.
+    -   Your comment should point to the explainer, I2I or other GitHub issue describing the design that you want to discuss. Your design review comment **must** link to an explainer or GitHub issue. Topics that do not provide this link will not be discussed at the design review. You may highlight in this comment which parts of the design you'd like feedback on.
+-   During the design review you'll lead the community in a conversation about your design. The design reviews are fairly informal and don't have a fixed structure.
+    -   You don't need to have any slides or material other than your explainer/GitHub issue prepared for the design review.
+    -   Present your explainer/issue during the meeting using the video conference "present" functionality. (If you have technical trouble doing this, someone else at the meeting can handle it.)
+    -   You can assume that the people at the meeting have at least skimmed through your design to understand the area being discussed, but they may not be completely familiar with the nuances of your design.
+    -   It is recommended that you start the discussion with a brief overview of your design.
+    -   After the initial overview, lead the attendees through the parts of the design you would like feedback on. If you have a reviewer, they may suggest particular areas to focus on in the discussion. Potential things to think about:
+        -   What are the performance tradeoffs to think about in the proposed approaches?
+        -   How does this feature impact accessibility of AMP pages?
+        -   Do we need to think about internationalization for this feature?
+        -   Do we need to conduct user research before going in to the implementation?
+    -   Working Groups will be represented at the Design Review to allow you to gather feedback across their different areas of expertise.
+    -   We'll take notes during the design review and post them to the Design Review GitHub issue shortly after the meeting.
+-   Update your design based on the feedback in the design review and any followup conversations in other channels.
+-   Once your design is finalized, please provide a brief update at the start of a future design review (if you are able to attend).
+
+## Explainers
+
+For larger design topics (e.g. new features, or a significant change), the use of an explainer merged into the appropriate working group repository on GitHub is preferred.
+
+-   An explainer is simply a document in the markdown format (md) that describes your proposed design.
+    -   You create an explainer as a Pull Request, and comments/updates can be made using the normal PR review process.
+    -   Explainers should be added to the appropriate Working Group repository. Explainers for work that span multiple working groups may be placed in any of the appropriate WG repos. Explainers for work that does not align with a WG may use the [ampproject design-doc](https://github.com/ampproject/design-docs) repository.
+    -   You _may_ use a public Google document (with public comments enabled) instead of an md file for your explainer, but this has significant disadvantages. If you use a Google document, you _must_ submit a PDF version in the same repository you would have used for an explainer md file.
+    -   The [W3C TAG Explainer document](https://w3ctag.github.io/explainers) describes what an explainer should contain and a recommended template. [Design docs at Google](https://www.industrialempathy.com/posts/design-docs-at-google/) also has tips on documenting a design.
+    -   An explainer does not need to be "final" before being merged in. You may merge in a draft copy and handle updates through issues/PRs as needed.
+    -   Explainers (whether as an md file or in a Google document) should be visible to the public, and any member of the community should be able to comment on it. The explainer should not link to non-public information except in extraordinary circumstances, and the non-public nature of the link and the reason for it not being public should be detailed.
+-   See the ["Using React/Preact to implement AMP elements" explainer](https://github.com/ampproject/wg-bento/blob/main/react/explainer.md) for an example.
+-   Add this license text to the top of your design doc before sharing it with anyone else in the community (updating the year if necessary):
+
+    ```
+    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.
+    ```
diff --git a/docs/developing.md b/docs/developing.md
new file mode 100644
index 0000000000000..ea2365d2df7ab
--- /dev/null
+++ b/docs/developing.md
@@ -0,0 +1,117 @@
+<!---
+Copyright 2015 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.
+-->
+
+# Developing in AMP
+
+## How to get started
+
+Before you start developing in AMP, check out these resources:
+
+-   [contributing.md](./contributing.md) has details on various ways you can contribute to the AMP open source project.
+    -   If you're developing in AMP, you should read the [Contributing code and features](./contributing-code.md) documentation, which includes information on code reviews and approvals.
+    -   The [Ongoing participation](./contributing.md#ongoing-participation) section has details on various ways of getting in touch with others in the community including email and Slack.
+    -   **If you are new to open source projects, Git/GitHub, etc.**, check out the [Tips for new open source contributors](./contributing.md#tips-for-new-open-source-contributors) which includes information on getting help and finding your first bug to work on.
+-   The [Getting Started Quick Start Guide](getting-started-quick.md) has installation steps and basic instructions for [one-time setup](getting-started-quick.md#one-time-setup), how to [build AMP & run a local server](getting-started-quick.md#build-amp--run-a-local-server) and how to [test AMP](getting-started-quick.md#test-amp).
+
+## Guidelines & Style
+
+Before you start writing code, consult these resources for guidance and guidelines on:
+
+-   **Design**: [AMP Design Principles](design-principles.md)
+-   **JavaScript**: [Google JavaScript Code Style Guide](https://google.github.io/styleguide/jsguide.html)
+-   **CSS**: [Writing CSS For AMP Runtime](writing-css.md)
+-   **Creating new components**:
+    -   [Instructions and Guidelines for building an AMP component](building-an-amp-extension.md)
+    -   Watch this [YouTube video](https://youtu.be/FJEhQFNKeaQ?list=PLXTOW_XMsIDTDXYO-NAi2OpEH0zyguvqX) to learn about "Building a new AMP component"
+-   **Integrating third-party software, embeds, services**: [Guidelines](../3p/README.md)
+
+## Testing
+
+For most developers, the instructions in the [Getting Started Quick Start Guide](getting-started-quick.md) will be sufficient for building/running/testing during development.
+
+For detailed information on testing, see [testing.md](testing.md).
+
+## Repository Layout
+
+<pre>
+  3p/             - Implementation of third party sandbox iframes.
+  ads/            - Modules implementing specific ad networks used in <amp-ad>
+  build/          - (generated) intermediate generated files
+  build-system/   - Build infrastructure
+  builtins/       - Tags built into the core AMP runtime
+      *.md        - Documentation for use of the builtin
+      *.js        - Source code for builtin tag
+  css/            - Default css
+  dist/           - (generated) Main JS binaries are created here. This is what
+                    gets deployed to cdn.ampproject.org.
+  dist.3p/        - (generated) JS binaries and HTML files for 3p embeds and ads
+                    This is what gets deployed to 3p.ampproject.net.
+  docs/           - Docs for people contributing to AMP
+  examples/       - Example AMP HTML files and corresponding assets
+  extensions/     - Plugins which extend the AMP HTML runtime's core set of tags
+  spec/           - The AMP HTML Specification files
+  src/            - Source code for the AMP runtime
+  test/           - Tests for the AMP runtime and builtins
+  testing/        - Testing infrastructure
+  third_party/    - Third party code used in AMP
+  tools/          - Code for AMP related tools
+  validator/      - AMP Validator runners and tools
+
+</pre>
+
+## Supported browsers
+
+In general we support the 2 latest versions of major browsers like Chrome, Firefox, Edge, Safari, Opera, and UC Browser. We support desktop, phone, tablet and the web view version of these respective browsers. For iOS we support the latest 2 **major** versions which covers about 2 years.
+
+Beyond that the core AMP library and builtin elements should aim for very wide browser support and we accept fixes for all browsers with market share greater than 1 percent.
+
+In particular, we try to maintain "it might not be perfect but isn't broken"-support for IE 11, iOS 8, the Android 4.0 system browser and Chrome 41.
+
+## Eng docs
+
+-   [Life of an AMP \*](https://docs.google.com/document/d/1WdNj3qNFDmtI--c2PqyRYrPrxSg2a-93z5iX0SzoQS0/edit#)
+-   [AMP Layout system](../docs/spec/amp-html-layout.md)
+-   [Building an AMP Extension](building-an-amp-extension.md)
+
+We also recommend scanning the [spec](../docs/spec/). The non-element part should help understand some of the design aspects.
+
+## Builds and releases
+
+-   The [AMP Build On-duty](build-on-duty.md) helps ensure that AMP's builds remain green (i.e. everything builds and all of the tests pass). If you run into issues with builds that seem unrelated to your changes see if the issue is present on [CircleCI](https://app.circleci.com/pipelines/github/ampproject/amphtml?branch=main) and send a message to the [#contributing](https://amphtml.slack.com/messages/C9HRJ1GPN) channel on Slack ([sign up for Slack](https://bit.ly/amp-slack-signup)).
+-   Understanding the [AMP release process](release-schedule.md) is useful for understanding when a change in AMP will make it into production and what to do if things go wrong during the rollout of a change.
+
+### Opting in to pre-release channels
+
+Developers and users of AMP can have their browser request AMP JS files from the pre-release channels (**beta**, **experimental**, and **nightly**) for all requests, using an opt-in mechanism.
+
+To opt your browser into the a pre-release channel, go to [the AMP experiments page](https://cdn.ampproject.org/experiments.html) and activate the experiment channel of your choice (see [Beta/Experimental](release-schedule.md#beta-and-experimental-channels) and [Nightly](release-schedule.md##nightly) channels in the [release process](release-schedule.md) document for description of these channels). Please subscribe to our [low-volume announcements](https://groups.google.com/forum/#!forum/amphtml-announce) mailing list to get notified about important/breaking changes about AMP.
+
+**Notes:**
+
+-   When you opt into a pre-release channel via the cookie mechanism, you are only affecting the AMP JS libraries in your browser.
+-   An alternative to using cookies to opt a page into these pre-release channels is adding `?optin=experimental`/`?optin=beta` to the URL of the AMP runtime (e.g., `https://cdn.ampproject.org/v0.js?optin=beta`).
+    -   URL-based opt-in should only be used for development purposes.
+    -   Doing so will cause the AMP validator to flag your page as invalid, and prevent it from being included in AMP caches.
+    -   There is no valid-AMP way to force visitors to your site to use the _AMP Experimental/Beta Channel_ version of AMP.
+
+**If you find an issue that appears to only occur in the _Experimental/Beta Channel_ version of AMP**:
+
+-   please [file a bug report](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Bug&template=bug-report.yml) with a description of the problem
+    -   include a note that the problem is new to the _Experimental/Beta Channel_ build so that it can be properly prioritized
+    -   include a URL to a page that reproduces the problem
+-   ping the [AMP Slack #release channel](https://amphtml.slack.com/messages/C4NVAR0H3/) ([sign up for Slack](https://bit.ly/amp-slack-signup)) with the issue you filed so we can delay the push of the _Experimental/Beta Channel_ version to production if needed
+
+## [Code of conduct](../CODE_OF_CONDUCT.md)
diff --git a/docs/getting-started-e2e.md b/docs/getting-started-e2e.md
new file mode 100644
index 0000000000000..dfce89657a58f
--- /dev/null
+++ b/docs/getting-started-e2e.md
@@ -0,0 +1,606 @@
+<!---
+Copyright 2017 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.
+-->
+
+# Getting Started End-to-end
+
+This end-to-end guide will show you how to contribute code to the AMP open source project. It covers everything from creating a GitHub account to getting your code reviewed and merged.
+
+This guide is intended for people who don't know much about Git/GitHub and the tools we use to build/test AMP. The guide may look long, but it includes a lot of explanation so you can get a better understanding of how things work.
+
+If you're already familiar with Git/GitHub/etc. or you just want to know what commands to type in instead of what they're doing take a look at the much shorter [Quick Start Guide](getting-started-quick.md).
+
+If you do not yet have a specific code contribution project in mind as you go through this guide, consider grabbing one of the [Good First Issues](https://github.com/ampproject/amphtml/labels/good%20first%20issue) we have created for new contributors.
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+-   [How to get help](#how-to-get-help)
+-   [Intro to Git and GitHub](#intro-to-git-and-github)
+-   [Set up your GitHub account and Git](#set-up-your-github-account-and-git)
+-   [Get a copy of the amphtml code](#get-a-copy-of-the-amphtml-code)
+-   [Understanding repositories](#understanding-repositories)
+-   [Creating your GitHub fork and your local repository](#creating-your-github-fork-and-your-local-repository)
+-   [Set up aliases for the remote Git repositories](#set-up-aliases-for-the-remote-git-repositories)
+-   [Building AMP and starting a local server](#building-amp-and-starting-a-local-server)
+-   [Create a Git branch](#create-a-git-branch)
+-   [Pull the latest changes from the amphtml repository](#pull-the-latest-changes-from-the-amphtml-repository)
+-   [Edit files and commit them](#edit-files-and-commit-them)
+-   [Code quality and style](#code-quality-and-style)
+    -   [Workflow for Visual Studio Code](#workflow-for-visual-studio-code)
+        -   [To automatically fix JS files on save](#to-automatically-fix-js-files-on-save)
+        -   [To automatically fix non-JS files on save](#to-automatically-fix-non-js-files-on-save)
+    -   [Manually fixing code](#manually-fixing-code)
+-   [Testing your changes](#testing-your-changes)
+-   [Running tests locally](#running-tests-locally)
+-   [Running all the CircleCI checks locally](#running-all-the-circleci-checks-locally)
+-   [Adding tests](#adding-tests)
+-   [Perform manual tests](#perform-manual-tests)
+-   [Push your changes to your GitHub fork](#push-your-changes-to-your-github-fork)
+-   [Send a Pull Request (i.e. request a code review)](#send-a-pull-request-ie-request-a-code-review)
+-   [Respond to Pull Request comments](#respond-to-pull-request-comments)
+-   [Delete your branch](#delete-your-branch)
+-   [See your changes in production](#see-your-changes-in-production)
+-   [⚡⚡⚡... (Next steps)](#%E2%9A%A1%E2%9A%A1%E2%9A%A1-next-steps)
+-   [Other resources](#other-resources)
+
+# How to get help
+
+If you have a question or are unsure about something while following this end-to-end guide, you can get help from the AMP open source community in many ways:
+
+-   If you are tackling a [Good First Issue](https://github.com/ampproject/amphtml/labels/good%20first%20issue) or other GitHub issue you can ask a question as a comment on the issue directly. This works particularly well if the question is about how to make progress on that specific issue.
+
+-   The [#welcome-contributors](https://amphtml.slack.com/messages/welcome-contributors/) channel on Slack is a place for new contributors getting up to speed in AMP to find help. You should feel comfortable asking any question in there no matter how basic it may seem to you (e.g. problems getting Git set up, errors during a build, etc.). We'll send you an [invitation](https://docs.google.com/forms/d/e/1FAIpQLSd83J2IZA6cdR6jPwABGsJE8YL4pkypAbKMGgUZZriU7Qu6Tg/viewform?fbzx=4406980310789882877) if you're not already on the AMP Slack.
+
+-   You can also ask questions on [amphtml-discuss@googlegroups.com](https://groups.google.com/forum/#!forum/amphtml-discuss).
+
+# Intro to Git and GitHub
+
+People who have never used Git or GitHub before can find them intimidating--even people who have been coding on large projects for years. Once you understand a few basic concepts and several commands your day-to-day experience with Git will generally be straightforward.
+
+Despite the similarity in names, Git & GitHub are different:
+
+-   Git is a version control system. You'll install the Git client locally and run Git commands to grab code from a Git repository, make changes and submit code. You don't need to use GitHub to use Git, but the AMP's Git repository happens to be hosted on GitHub.
+
+-   GitHub hosts Git repositories and provides other tools that make managing projects easier (like a GUI for code reviews, bug tracking, etc.).
+
+To contribute to AMP you'll use Git to grab a copy of the code from the [amphtml Git repository on GitHub](https://github.com/ampproject/amphtml), make changes locally and push your changes back up to your own Git repository on GitHub so you can get your code changes reviewed and merged into the amphtml codebase.
+
+# Set up your GitHub account and Git
+
+[Create a GitHub account](https://help.github.com/articles/signing-up-for-a-new-github-account/) if you don't already have one. Because AMP is an open source project you can create a free GitHub account (i.e. click "Join GitHub for free" on the pricing page you end up on). Once your account is created set up [two-factor authentication](https://help.github.com/articles/about-two-factor-authentication/) for your account.
+
+After you are done setting up your GitHub account [install and set up Git](https://help.github.com/articles/set-up-git/). You'll download and install Git, perform some basic configuration and then set up authentication for talking to GitHub. Although the authentication instructions suggest HTTPS is recommended, **you should follow the "Connecting over SSH" instructions instead**. SSH is required for two-factor authentication which we recommend you use. (The rest of these instructions will assume you are using SSH.)
+
+# Get a copy of the amphtml code
+
+## Understanding repositories
+
+One of the central concepts of Git is the _repository_, where files are stored and kept track of. You can browse [the amphtml repository](https://github.com/ampproject/amphtml) using the GitHub web UI.
+
+The process of getting the amphtml code, making changes, getting your changes reviewed and then having your changes become a part of AMP involves _three_ repositories:
+
+-   The first repository is the **amphtml repository** mentioned above. When you want to fix a bug or add a feature to AMP your goal is to get your code to become part of this repository (_merged_ in Git terms). The amphtml repository is an example of a _remote_ repository because it's stored in a server that your Git client connects to.
+
+-   You'll create a **_fork_ of the amphtml repository** on GitHub before you make your first change. This creates your own complete copy of all of the files from the amphtml repository which gives you a place to put your changes without affecting other people's work. Since your fork is on GitHub's servers this is also a _remote_ repository. Once you create your fork you'll be able to browse a copy of all of the files on the Web UI at `https://github.com/<your username>/amphtml`.
+
+-   In general you won't be making changes directly on your fork on GitHub since GitHub provides very limited edit and build capabilities. Instead you'll create a copy of your fork in a **_local_ repository** which will download all of the amphtml files to your computer. This is where you'll typically be building AMP, making changes, testing them out, etc.
+
+If you are new to Git it may seem surprising that there are three different repositories involved but each one serves its purpose. Here's how they interact in a typical scenario:
+
+-   You'll make changes on your computer (your local repository).
+
+-   When you're done you'll push these changes to your fork on GitHub so that others can see your changes and review them before they become part of the amphtml repository.
+
+-   When the changes have been approved by someone with permission to do so, that person will handle merging your changes from your GitHub fork to the amphtml repository.
+
+Note that each of these repositories has a complete copy of the entire amphtml codebase. If your local repository is on your computer and you lose your internet connection you'll still be able to make changes to any file in your local repository. Part of the workflow for Git that we'll go through is how you keep these three repositories in sync.
+
+One thing that might put your mind at ease: if you aren't in a [role](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#roles) that lets you make changes to the amphtml repository directly any changes you make will only affect you. So go ahead and try out different Git commands without worrying you're going to break things for other people!
+
+## Creating your GitHub fork and your local repository
+
+To create your fork on GitHub and your local copy of that fork:
+
+-   Create a fork of the amphtml repository on GitHub by going to [https://github.com/ampproject/amphtml](https://github.com/ampproject/amphtml) and clicking the "Fork" button near the top. Your GitHub fork will now be visible at `https://github.com/<your username>/amphtml`. During local development, this will be referred to by `git` as `origin`.
+
+-   Create your local copy (or _clone_) of your fork:
+
+    -   go to a local directory on your computer where you want to put a copy of the code, e.g. `~/src/ampproject`
+
+    -   run the `git clone` command using the address for your remote repository (your GitHub fork):
+
+        ```sh
+        git clone git@github.com:<your username>/amphtml.git
+        ```
+
+        (Note that this is the SSH address for your GitHub fork since we assume you've set up SSH for your account as we recommended. You can always find the SSH and HTTPS addresses of your GitHub fork by clicking the "Clone or download" button on your GitHub fork page.)
+
+After running the command you'll see something like `Receiving objects` and a progress indicator; this is actually downloading all of the files in the repository to your computer.
+
+Once the clone is done you can browse around your newly created local directories and convince yourself that they're the same as what you see on the remote amphtml repository and on your GitHub fork.
+
+# Set up aliases for the remote Git repositories
+
+As described in the previous section you have three repositories you are working with. It can be helpful to setup aliases to refer to the remote repositories so you don't have to remember their full addresses. You'll be using these aliases a lot in Git commands.
+
+The `git clone` command you ran above automatically set up one alias for you. From the local amphtml directory the git clone command created, run
+
+```sh
+git remote -v
+```
+
+and you will see
+
+```sh
+origin git@github.com:<your username>/amphtml.git
+```
+
+This indicates that the alias _origin_ can be used to refer to your GitHub fork remote repository.
+
+You should also set an alias for the remote amphtml repository since you'll be referring to that in some Git commands. The convention is to use the alias _upstream_ for this repository. The address for the amphtml repository looks a lot like the address for your GitHub fork except your username is replaced by `ampproject`.
+
+```sh
+git remote add upstream git@github.com:ampproject/amphtml.git
+```
+
+Now run `git remote -v` again and notice that you have set up your upstream alias.
+
+Each branch of your local Git repository can track a branch of a remote repository. Right now, your local `main` branch is tracking `origin/main`, which corresponds to the `main` branch of your GitHub fork. You don't actually want this, though; the upstream `main` branch is constantly being updated, and your fork's `main` branch will rapidly become outdated. Instead, it's best to make your local `main` branch track the upstream `main` branch. You can do this like so:
+
+```sh
+git fetch upstream main
+git branch -u upstream/main main
+```
+
+# Building AMP and starting a local server
+
+Now that you have all of the files copied locally you can actually build the code and run a local server to try things out. We use Node.js along with several npm packages to build amphtml and start up a local server that lets you try out your changes.
+
+-   Install the latest LTS version of [Node.js](https://nodejs.org/) (which includes `npm`). An easy way to do so is by first installing `nvm`. Follow the macOS / Linux instructions [here](https://github.com/creationix/nvm), or the Windows instructions [here](https://github.com/coreybutler/nvm-windows). Then run the install command(s):
+
+    ```sh
+    # macOS / Linux
+    nvm install --lts
+
+    # Windows
+    nvm list available
+    nvm install <lts_version>
+    nvm use <lts_version>
+    ```
+
+-   In your local repository directory (e.g. `~/src/ampproject/amphtml`), install the packages that AMP uses by running this command:
+    ```
+    npm install
+    ```
+    You should see a progress indicator and some messages scrolling by. You may see some warnings about optional dependencies, which are generally safe to ignore.
+
+Now whenever you're ready to build amphtml and start up your local server, simply go to your local repository directory and run:
+
+```sh
+amp
+```
+
+Running the `amp` command will start up a Node.js server listening on port 8000. Once you see a message like `Finished 'default'` you can access the local server in your browser at [http://localhost:8000](http://localhost:8000).
+
+You can browse the [http://localhost:8000/examples](http://localhost:8000/examples) directory to see some demo pages for various AMP components and combination of components. When a page is visited, the JS files and extensions used by the page will get lazily built and served.
+
+Note that by default each of the pages in the /examples directory uses the unminified AMP JavaScript from your local server. You can also change which JS to load from local server by hitting the `/serve_mode=<mode>` endpoint:
+
+-   [http://localhost:8000/serve_mode=default](http://localhost:8000/serve_mode=default)
+
+    This is the default. Unminified AMP JavaScript is served from the local server. For local development you will usually want to serve unminified JS to test your changes.
+
+-   [http://localhost:8000/serve_mode=compiled](http://localhost:8000/serve_mode=compiled)
+
+    Minified AMP JavaScript is served from the local server. This is only available after running `amp dist --fortesting`.
+
+-   [http://localhost:8000/serve_mode=cdn](http://localhost:8000/serve_mode=cdn)
+
+    Minified AMP JavaScript is served from `cdn.ampproject.org`.
+
+-   http://localhost:8000/serve_mode=<RTV_NUMBER>
+
+    E.g. http://localhost:8000/serve_mode=001907161745080
+
+    Minified AMP JavaScript is served from `cdn.ampproject.org/rtv/<RTV_NUMBER>`, the RTV build from the given RTV number.
+
+When you're ready to make changes, you'll want to follow the steps below for creating a branch, testing and sending your changes for review.
+
+The exact changes you'll be making will depend on the issue/feature you are working on. If you aren't sure where to start, ask for suggestions on the GitHub issue tracking the work you are doing or reach out to the community as described in [How to get help](#how-to-get-help).
+
+# Create a Git branch
+
+You may have noticed that the files in your local repository are editable which makes it tempting to start making your changes right away. The typical Git workflow, however, takes advantage of one of the best features of Git: branches.
+
+Branches let you work on multiple different things in your repository in parallel. For example you can have one branch where you're fixing a bug, another branch where you're implementing a new feature and yet another branch where you're just doing some exploratory work. These branches co-exist in the same repository so there's no need to go through the forking and cloning steps described earlier every time you want to make a change.
+
+By default you'll have a branch named _main_. You can see this if you run the command `git branch` which lists the branches in your local repository.
+
+Although you could do work on the main branch, most people choose to leave the main branch unchanged and create other branches to actually do work in. Creating a branch is easy; simply run:
+
+```sh
+git checkout -b <branch_name> main
+```
+
+This will move you to the new branch, which uses `main` as its start point, meaning that it will start out containing the same files as `main`. You can then start working in the new branch.
+
+(You can use a different branch as a start point, like if you want to make one branch based on another. Generally, though, you want `main` as your start point. If you omit the start point, Git will use whichever branch you're currently on.)
+
+Whenever you want to move to a different branch, run the checkout command:
+
+```sh
+git checkout <branch_name>
+```
+
+You can see a list of your branches and which one you're currently in by running:
+
+```sh
+git branch
+```
+
+Note that currently the branch you just created only exists in your local repository. If you check the list of branches that exist on your GitHub fork at `https://github.com/<your username>/amphtml/branches/yours`, you won't see this new branch listed. Later on when we want to make the changes in your branch visible to others (e.g. so you can do a pull request) we'll push this branch to your GitHub fork.
+
+# Pull the latest changes from the amphtml repository
+
+Since your local repository is just a copy of the amphtml repository it can quickly become out of date if other people make changes to the amphtml repository. Before you start making changes you'll want to make sure you have the latest version of the code; you'll also want to do this periodically during development, before sending your code for review, etc.
+
+In the workflow we will be using you'll go to the main branch on your local repository and pull the latest changes in from the remote amphtml repository's main branch. (Remember that you set up the alias _upstream_ to refer to the remote amphtml repository, and you set your local `main` branch to track `upstream/main`.)
+
+```sh
+# make sure you are in your local repo's main branch
+git checkout main
+
+# pull in the latest changes from the remote amphtml repository
+git pull
+```
+
+If there have been any changes you'll see the details of what changed, otherwise you'll see a message like `Already up-to-date`.
+
+After running that `git pull` command your local main branch has the latest files, but your other local branches won't get automatically updated. To get a local branch in sync:
+
+```sh
+# go to the branch you want to sync
+git checkout <branch name>
+
+# bring the latest changes from your main branch into this branch
+git merge main
+```
+
+Since you just ran the `git pull` in your main branch it has the latest changes from the remote amphtml repository so running `git merge main` in your other branch effectively brings the latest changes from the remote amphtml repository to this other branch.
+
+If there are changes that conflict with changes on your branch (e.g. someone modified a file that you're working on) you'll be prompted to resolve them at this point.
+
+# Edit files and commit them
+
+The common workflow for making changes to files in Git is:
+
+-   Edit some files using your favorite editor
+
+-   If your code requires a new dependency, run `npm install [--save-dev] <packagename>`, which will automatically update `package.json` and `package-lock.json`
+
+    -   If it is a build-time dependency, use the `--save-dev` flag
+    -   If it is a runtime dependency, add it to `build-system/compile/sources.js`
+
+-   If you manually edited `package.json`, run `npm install` to install the dependency and generate an updated `package-lock.json` file
+
+-   Tell Git that you care about these changes by _staging_ them using the `git add` command
+
+-   Create a checkpoint (called a _commit_) that bundles together the changes you've staged by using the `git commit` command
+
+Git commits bundle together related changes into a logical unit. (If you're familiar with some other source control systems this terminology may make you think that when you create a commit you're "checking in" your code to the amphtml repository; that's _not_ what a Git commit is.)
+
+You can think of a commit as a checkpoint in your branch. It's a good idea to create a commit when you reach a point in your change that you might want to get back to. You will at least have to create a commit before syncing your changes to another repository (i.e. your GitHub fork) and requesting a code review.
+
+Let's walk through creating a commit after editing a file. First, go to the branch you created earlier:
+
+```sh
+git checkout <branch name>
+```
+
+Edit a file in this branch using your favorite editor. After editing the file, run
+
+```sh
+git status
+```
+
+and you should see the file you modified in a section that says `Changes not staged for commit` along with some helpful suggestions for what to do next.
+
+Git knows that there's a modified file, but isn't sure what you want to do with it. (In Git terms, this file is _unstaged_.) You have to tell Git that this is a change you care about by using the `git add` command.
+
+```sh
+git add <filename>
+```
+
+Now run `git status` again and you'll see the file listed under a `Changes to be committed` section.
+
+Since you're done with changes to that file, go ahead and create a commit:
+
+```sh
+git commit -m "<a brief description of your commit>"
+```
+
+Now run `git status` again, and you'll see the message `nothing to commit` and `your branch is ahead of 'origin/main' by 1 commit`.
+
+Note that you can optionally skip using `git add` commands and just use the `git commit -a` flag to say "add all of the modified/deleted files to this commit," e.g.
+
+```sh
+git commit -a -m "<a brief description of your commit>"
+```
+
+Note that you _can_ add changes into an existing commit but that opens up some additional Git concepts that you don't really need to make a contribution.
+
+## Code quality and style
+
+AMP uses the following tools for code quality and style:
+
+-   [Eslint](https://eslint.org/) is used to ensure the code quality of JS files.
+    -   Default rules can be found in [.eslintrc.js](../.eslintrc.js) files across the repo.
+    -   Custom rules can be found in [build-system/eslint-rules/](../build-system/eslint-rules/index.js).
+-   [Prettier](https://prettier.io/) is used to standardize the code style and formatting of JS files and several non-JS files.
+    -   Default and file-specific rules can be found in [.prettierrc](../.prettierrc).
+
+To easily ensure code quality and style during development, here are some recommendations:
+
+-   Use a code editor with Eslint and Prettier support.
+-   [Here](https://eslint.org/docs/user-guide/integrations#editors) is a list of editors with Eslint extension support.
+-   [Here](https://prettier.io/docs/en/editors.html) is a list of editors with Prettier extension support.
+-   Set your editor to automatically format your code on save.
+
+### Workflow for Visual Studio Code
+
+Several AMP developers use [Visual Studio Code](https://code.visualstudio.com/). Here is the recommended workflow to automatically fix your code as you edit it:
+
+#### To automatically fix JS files on save
+
+-   Install the [Eslint plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).
+-   The `eslint.autoFixOnSave` setting is already enabled for the project in [.vscode/settings.json](../.vscode/settings.json), and will cause all JS files to automatically get formatted on save.
+
+#### To automatically fix non-JS files on save
+
+-   Install the [Prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).
+-   Install the [JSON5 syntax plugin](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-json5). (Used by `OWNERS` files. VS Code does not natively support it.)
+-   Language and file level settings are already enabled for the project in [.vscode/settings.json](../.vscode/settings.json), and will cause several non-JS files to automatically get formatted on save.
+
+### Manually fixing code
+
+Alternatively, you can manually fix most quality and style errors in your code by running these two commands before pushing commits to your GitHub branch. (These commands edit your files in-place, so make sure you commit before running them.)
+
+For JS files:
+
+```sh
+amp lint --local_changes --fix
+```
+
+For non-JS files:
+
+```sh
+amp prettify --local_changes --fix
+```
+
+# Testing your changes
+
+Before sending your code changes for review, please make sure that all of the affected tests are passing. You may be expected to add/modify some tests as well.
+
+Note: You can automatically run critical checks before `git push` by enabling our pre-push hook. To do so, run `./build-system/common/enable-git-pre-push.sh`.
+
+## Running tests locally
+
+To run the tests that are affected by the changes on your feature branch:
+
+```sh
+amp unit --local_changes
+```
+
+By default, all tests are run on Chrome. Pass one of the following flags to run tests on a different browser: `--firefox`, `--safari`, `--edge`, `--ie`.
+
+If you need help with fixing failing tests, please ask on the GitHub issue you're working on or reach out to the community as described in [How to get help](#how-to-get-help).
+
+## Running all the CircleCI checks locally
+
+To avoid repeatedly waiting for CircleCI to run all pull-request checks, you can run them locally:
+
+```sh
+amp pr-check
+```
+
+Notes:
+
+-   This will force a clean build and run all the PR checks one by one.
+-   Just like on CircleCI, a failing check will prevent subsequent checks from being run.
+-   The `amp visual-diff` check will be skipped unless you have set up a Percy account as described in the [Testing](testing.md#running-visual-diff-tests-locally) guide.
+-   Unit and integration tests will be run on local Chrome.
+
+## Adding tests
+
+The `amphtml` testing framework uses the [Mocha](https://mochajs.org/), [Chai](http://chaijs.com/) and [Sinon](http://sinonjs.org/) libraries. You will generally be expected to add tests to verify correctness and to prevent regressions.
+
+Existing components will usually have existing tests that you can follow as an example. For example, the [amp-video](../extensions/amp-video/amp-video.md) component has tests in [test/test-amp-video.js](../extensions/amp-video/0.1/test/test-amp-video.js).
+
+To run tests in a single file, use `amp unit --files=<path>`:
+
+```sh
+amp unit --files=extensions/amp-youtube/0.1/test/test-amp-youtube.js
+```
+
+To run tests in multiple files, use `amp unit --files=<path-1> --files=<path-2>`:
+
+```sh
+amp unit --files=extensions/amp-story/1.0/test/test-amp-story-embedded-component.js --files=extensions/amp-story/1.0/test/test-amp-story-hint.js
+```
+
+Testing tips:
+
+-   Use Mocha's [`.only()`](https://mochajs.org/#exclusive-tests) feature to exclusively run certain test-cases or suites.
+-   Add `--watch` to your `amp unit` command to automatically re-run tests on code changes.
+
+For more help, see [How to get help](#how-to-get-help).
+
+# Perform manual tests
+
+Beyond technical/automated tests, manually test your changes and make sure that they work as expected, and that they follow AMP's [design principles](https://github.com/ampproject/amphtml/blob/main/docs/design-principles.md). In particular, make sure that your changes are accessible - see [W3C WAI Easy Checks](https://www.w3.org/WAI/test-evaluate/preliminary/) for an initial set of suggested manual tests. Some aspects of manual testing can be semi-automated, using tools such as [Lighthouse](https://developers.google.com/web/tools/lighthouse) (which includes an accessibility audit report) and [Microsoft's Accessibility Insights](https://accessibilityinsights.io/).
+
+Note that for more extensive automated accessibility testing, there are further options available that integrate directly within existing test/integration workflows, such as [Deque's axe-core](https://github.com/dequelabs/axe-core).
+
+# Push your changes to your GitHub fork
+
+Up to this point you've been making changes in a branch on your local repository. Those changes aren't visible anywhere else--not even your GitHub fork--so if you want other people to see your changes you will need to push your branch to your GitHub fork. This is a necessary step to request a code review (known as a pull request) and to ultimately get your changes added to the amphtml repository.
+
+Before pushing your changes, make sure you have the latest changes in the amphtml repository on your branch by running the commands we described above:
+
+```sh
+git checkout main
+git pull
+git checkout <branch name>
+git merge main
+```
+
+Now push your changes to `origin` (the alias for your GitHub fork):
+
+```sh
+git push -u origin <branch name>
+```
+
+`-u origin <branch name>` tells Git to create a remote branch with the specified name in `origin` and to make your local branch track that remote branch from now on. You only have to do this the first time you push each branch. For subsequent pushes on the same branch, you can use a shorter command:
+
+```sh
+git push
+```
+
+The changes you've made are now visible on GitHub! Go to your fork on GitHub:
+
+```http
+https://github.com/<your username>/amphtml
+```
+
+If you recently pushed the branch you will see a message bar at the top that lists your recently pushed branches next to a convenient "Compare & pull request" button.
+
+Instead of using that button take a look at the "Branch" dropdown on the top left. Click it and then select the branch you just pushed. This will take you to your branch on GitHub:
+
+```http
+https://github.com/<your username>/amphtml/tree/<branch name>
+```
+
+Browse around and find the file(s) you modified; you'll see that these match the changes you made in your local repository since you ran `git push` earlier.
+
+If you make further changes in your local repository on the same branch they will _not_ automatically be reflected on your GitHub fork. You will need to create a commit and push your changes again using the same commands as above.
+
+Note that you _can_ edit files in your branch directly on GitHub using the web UI. For simple changes requested in a pull request (e.g. fixing a typo in a comment) this may be okay, but in general it's best to make the changes in your local repository and push them back up to GitHub to avoid confusion.
+
+# Send a Pull Request (i.e. request a code review)
+
+In order for your changes to become part of the amphtml repository, you will need to get your [code reviewed](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#code-review-and-approval) via a Pull Request (PR). In fact you won't actually merge your code into the amphtml repository directly; after your code has been reviewed [someone with the permission to modify the amphtml repository](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#roles) will handle the merge for you.
+
+Once your code is ready for a review, go to [https://github.com/ampproject/amphtml](https://github.com/ampproject/amphtml) and click on the "Compare & pull request" button on the "recently pushed branches" banner. If that banner isn't visible, go to your GitHub fork at
+`https://github.com/<username>/amphtml`, use the Branch dropdown to select the branch that contains the changes you want reviewed and press the "New pull request" button.
+
+On the "Open a pull request" page, you will see dropdowns at the top indicating the proposed merge. It will look something like:
+
+```sh
+amproject/amphtml / main … <username>/amphtml / <branch name>
+```
+
+Below this are text boxes where you can provide a title and description for your pull request. Please follow the guidelines in the template for providing a good title and description.
+
+In your PR description or comments refer to any GitHub issues that your PR is addressing. This will let people reviewing your PR know what issue your change is addressing and let anyone watching the issue know that there's a PR for it. You can do this by including the text `issue #<your issue number>` in the description/comment. If your PR completely fixes the issue, make this `fixes #<your issue number>` instead, which will also cause the issue to be closed once your PR is merged.
+
+You will need to find a [Reviewer and Owner](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#code-review-and-approval) to review your code and approve it. When you find someone to review your code, cc them on the Pull Request (by adding a line "/cc @username", e.g. "/cc @mrjoro").
+
+When you're new to contributing to AMP it can be tricky to figure out who should review your code. In general if you've been working with someone in the community on your change, they can likely review your code or know who can review it. The [people who previously changed the files you're changing](https://help.github.com/en/articles/tracking-changes-in-a-file) are also good candidates for reviewing your change. If you aren't sure who to ask to review your code, the steps for [finding a guide](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#find-a-guide) can also work for finding a reviewer for your change.
+
+This is a good time to make sure that you've signed in to the services used to validate `amphtml` pull requests. See the one-time setup instructions [here](https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md#one-time-setup). When you're done, click "Create pull request." This will bring you to your Pull Request page where you can track progress, add comments, etc.
+
+On the Pull Request page you can see that a few checks are running:
+
+-   The tests are being run on [CircleCI](https://app.circleci.com/pipelines/github/ampproject/amphtml)
+
+-   The system is verifying that you have signed a CLA (Contributor License Agreement). If this is your first time submitting a Pull Request for AMP on GitHub you'll need to sign a CLA. (Make sure the email address you use to sign the CLA is the same one that you configured Git with.) See details in the [Contributing code](../docs/contributing.md#contributing-code) documentation.
+
+-   Your code is going through static analysis by [LGTM](https://lgtm.com/projects/g/ampproject/amphtml/).
+
+-   Visual diff tests that are run on CircleCI are being analyzed by [Percy](http://percy.io/ampproject/amphtml).
+
+If you don't hear back from your reviewer within 2 business days, feel free to ping the pull request by adding a comment.
+
+# Respond to Pull Request comments
+
+If your reviewer doesn't request any changes from you they may go ahead and merge your changes into amphtml. If they do this you're done since the reviewer will merge your changes for you! Once your code is merged in you can safely delete your branch.
+
+In the likely event that the reviewer has some comments, you'll need to respond to them.
+
+If the reviewer's comments involve changes in your code, you can make changes on the branch in your local repository in the same way you made your changes originally. When you run `git commit` after making these changes, you'll be creating a new commit. (There are ways to "squash" all of your changes into a single commit, but since you've already shared the previous commit in a pull request it's best to avoid that.)
+
+Remember that the changes you make in your local branch won't actually be visible to anyone (including your PR reviewer) until you push the changes up to your GitHub fork remote repository. You can follow the same steps you followed earlier in the [Push your changes to your GitHub fork](#push-your-changes-to-your-github-fork) section.
+
+You can respond to comments in the GitHub UI. When making comments, you will see a button to "Start a Review" which lets you group all of your comments and send them as a group.
+
+You can always get back to your open Pull Requests on GitHub at `https://github.com/ampproject/amphtml/pulls/<your username>`.
+
+# Delete your branch
+
+Creating, deleting and moving between branches in Git is cheap. Reusing branches for multiple unrelated changes can lead to a confusing branch history. For these reasons it's best to delete your branch once your PR using that branch has been approved and merged. (It can also be really satisfying to delete a branch after a particularly involved change.)
+
+GitHub offers a convenient "Delete branch" button on the PR page after the changes in your branch have been merged into the amphtml repository. You can click this button to delete your branch in the GitHub fork if you prefer, but you will also want to delete the branch in your local repository:
+
+```sh
+# go back to the main branch
+git checkout main
+
+# delete the branch in your local repository
+git branch -D <branch name>
+
+# delete the branch in your GitHub fork (if you didn't use the UI)
+git push -d origin <branch name>
+```
+
+# See your changes in production
+
+**Congratulations on making your first change to AMP!**
+
+If your change affected internal documentation, tests, the build process, etc. you can generally see your changes right after they're merged. If your change was to the code that runs on AMP pages across the web you'll have to wait for the change to be included in a release.
+
+AMP is pushed to production after undergoing testing. Generally, it takes about 1-2 weeks for a change to be live for all users. For more specific details on the timing of production releases, reference our [release schedule](release-schedule.md).
+
+**Once the push of the build that includes your change is complete all users of AMP will be using the code you contributed!**
+
+You can see whether your change made it into a given build on the [amphtml Releases page](https://github.com/ampproject/amphtml/releases). The build marked `Pre-release` is the version on the Experimental Channel and the build marked `Latest Release` is what is running in production. Your Pull Request will be listed in the first build that includes it; if you don't see your Pull Request listed it will likely be in the next build.
+
+You can set your browser to use the Experimental Channel build by enabling `experimental-channel` on the [AMP Experiments](https://cdn.ampproject.org/experiments.html) page. This will let you see how your changes will affect any AMP page before your changes are rolled out to all AMP pages. Note that this only affects the browser in which you enable the experiment.
+
+You can verify the AMP version your browser is using for a given page by looking at your browser's developer console. After loading an AMP page (e.g. [https://amp.dev](https://amp.dev)) the console will have a message like `Powered by AMP ⚡ HTML – Version <build number>`). The `<build number>` will match one of the build numbers on the [amphtml Releases page](https://github.com/ampproject/amphtml/releases).
+
+The [Release Schedule](release-schedule.md) doc has more details on the release process.
+
+# ⚡⚡⚡... (Next steps)
+
+Now that you know the process for making changes to AMP you already have most of the heavy lifting done. **We look forward to seeing your future [contributions](../docs/contributing.md) to the project.** :)
+
+If you're looking for ideas on your next contribution feel free to reach out to anyone you worked with on your first contribution or let us know in the [#welcome-contributors](https://amphtml.slack.com/messages/welcome-contributors/) channel on Slack. (We'll send you an [invitation](https://docs.google.com/forms/d/e/1FAIpQLSd83J2IZA6cdR6jPwABGsJE8YL4pkypAbKMGgUZZriU7Qu6Tg/viewform?fbzx=4406980310789882877) if you're not already on the AMP Slack.)
+
+# Other resources
+
+This end-to-end guide provided enough details to get a basic understanding of a typical workflow for contributing code to the AMP open source project. If you find yourself wanting to know more there are a lot of resources available. Here are a few:
+
+-   The ["Building an AMP Extension" guide](https://github.com/ampproject/amphtml/blob/main/docs/building-an-amp-extension.md) provides step-by-step instructions for a common type of code contribution to AMP. Even if your project involves modifying an existing AMP component, this guide will give you an overview of how AMP components work.
+-   GitHub has a lot of helpful introductory material, including:
+    -   a [Hello World tutorial](https://guides.github.com/activities/hello-world/) that's a bit less in depth than this guide, but it covers things like creating a new repository and merging in code after a pull request
+    -   the [Git cheat sheet](https://services.github.com/on-demand/downloads/github-git-cheat-sheet.pdf) from GitHub provides a quick reference to some common commands, including many we didn't cover in this guide (such as [diff](https://www.git-tower.com/learn/git/ebook/en/command-line/advanced-topics/diffs) and [log](https://git-scm.com/book/en/v2/Git-Basics-Viewing-the-Commit-History))
+    -   a [Training & Guides video series](https://www.youtube.com/user/GitHubGuides)
+-   The official [Git docs](https://git-scm.com/doc) have a lot of information including the [reference docs](https://git-scm.com/docs) and an online version of [Pro Git](https://git-scm.com/book/en/v2).
+-   You may see discussions about the difference between rebasing and merging in Git, and we glossed over the details in this guide. If you're curious about the difference the Atlassian [Merging vs. Rebasing](https://www.atlassian.com/git/tutorials/merging-vs-rebasing) tutorial has a good explanation.
diff --git a/docs/getting-started-quick.md b/docs/getting-started-quick.md
new file mode 100644
index 0000000000000..05d8b9cd5652a
--- /dev/null
+++ b/docs/getting-started-quick.md
@@ -0,0 +1,141 @@
+<!---
+Copyright 2017 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.
+-->
+
+# Getting Started: Quick Start
+
+## About this guide
+
+This Quick Start guide is the TL;DR version of the longer [end-to-end guide](getting-started-e2e.md) for people who don't want/need a longer explanation.
+
+## One-time Setup
+
+1. [Create a GitHub account](https://help.github.com/articles/signing-up-for-a-new-github-account/) if you don't already have one.
+2. Set up [2 factor auth](https://help.github.com/articles/about-two-factor-authentication/) for your GitHub account.
+3. [Install and set up Git](https://help.github.com/articles/set-up-git/); in the "Authenticating" step of that page use SSH instead of HTTPS.
+4. Install the latest LTS version of [Node.js](https://nodejs.org/) (which includes npm). An easy way to do so is with `nvm`. (Mac and Linux: [here](https://github.com/creationix/nvm), Windows: [here](https://github.com/coreybutler/nvm-windows))
+
+    ```shell
+    nvm install --lts
+    ```
+
+5. Create your own fork of the [amphtml repository](https://github.com/ampproject/amphtml) by clicking "Fork" in the Web UI. During local development, this will be referred to by `git` as `origin`.
+
+6. Download your fork to a local repository.
+
+    ```shell
+    git clone git@github.com:<your username>/amphtml.git
+    ```
+
+7. Add an alias called `upstream` to refer to the main `ampproject/amphtml` repository. Go to the root directory of the newly created local repository directory and run:
+
+    ```shell
+    git remote add upstream git@github.com:ampproject/amphtml.git
+    ```
+
+8. Fetch data from the `upstream` remote:
+
+    ```shell
+    git fetch upstream main
+    ```
+
+9. Set up your local `main` branch to track `upstream/main` instead of `origin/main` (which will rapidly become outdated).
+
+    ```shell
+    git branch -u upstream/main main
+    ```
+
+10. Sign in to these services that are used to validate `amphtml` pull requests.
+    - **CLA Assistant:** Mandatory step, used by AMP's contributor license agreement. Sign in [here](https://cla-assistant.io/ampproject/amphtml) using your GitHub credentials.
+    - **CircleCI:** Mandatory step, used to perform continuous integration testing. Sign in [here](https://app.circleci.com/pipelines/github/ampproject/amphtml) using your GitHub credentials.
+    - **Percy:** Optional step, only needed to approve visual diffs introduced by a PR. Sign in [here](https://percy.io/ampproject/amphtml) using your GitHub credentials and link it to a Browserstack profile.
+
+## Branch (do this each time you want a new branch)
+
+Create and go to the branch:
+
+```shell
+git checkout -b <branch name> main
+```
+
+## Build AMP & run a local server
+
+1. Make sure you have the latest packages (after you pull): `npm install`
+1. Start the server: `amp`
+1. Access your server at [http://localhost:8000](http://localhost:8000)
+1. Access your sample pages at [http://localhost:8000/examples](http://localhost:8000/examples)
+
+## Test AMP
+
+-   Run the unit tests: `amp unit` (doesn't build the runtime)
+-   Run the integration tests: `amp integration` (builds the runtime)
+-   Run integration tests, but skip building after having done so previously: `amp integration --nobuild`
+-   Run the tests in a specified set of files: `amp [unit|integration] --files=<test-files-path-glob>`
+-   Add the `--watch` flag to `amp [unit|integration]` to automatically re-run the tests when a file changes
+-   To run only a certain set of Mocha tests, change `describe` to `describe.only` for the tests you want to run; combine this with `amp [unit|integration] --watch` to automatically rerun your test when files are changed (but make sure to run all the tests before sending your change for review)
+
+## Create commits to contain your changes
+
+1. Edit files in your favorite editor
+2. Make sure your changes satisfy AMP's [code quality and style rules](getting-started-e2e.md#code-quality-and-style)
+3. If your code requires a new dependency, run `npm install --save-dev [packagename]`, which automatically updates `package.json` and `package-lock.json`
+    - If it is a build-time dependency, use the `--dev` flag
+    - If it is a runtime dependency, add it to `build-system/compile/sources.js`
+4. If you manually edited `package.json`, run `npm install` to install the dependency and generate an updated `package-lock.json` file
+5. Add each file you change: `git add <file>`
+6. Create a commit: `git commit -m "<your commit message>"`
+7. To avoid having to run `git add` on each file, you can use `git commit -a -m "<your commit message>"` instead.
+
+## Pull the latest changes
+
+1.  Check out the main branch: `git checkout main`
+2.  Pull the latest changes: `git pull`
+3.  Check out your branch: `git checkout <branch name>`
+4.  Merge the changes to your branch: `git merge main`
+
+    **Note**: You may need to resolve conflicting changes at this point.
+
+## Push your branch & create a Pull Request
+
+1.  Pull the latest changes as described above.
+2.  Push the changes:
+
+    ```shell
+    git checkout <branch name>
+    git push -u origin <branch name>
+    ```
+
+3.  Go to [https://github.com/ampproject/amphtml](https://github.com/ampproject/amphtml) and in the banner indicating you've recently pushed a branch, click the "Compare & pull request" (if this banner does not appear, go to your fork at `https://github.com/<your username>/amphtml`, choose your branch from the "Branch" dropdown and click "New pull request")
+4.  Make sure you've signed the [CLA](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#contributor-license-agreement) (using the same email address as your git config indicates)
+5.  [Find people to review your code](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#code-review-and-approval) and add them as a reviewer on the PR (if you can) or cc them (by adding `/cc @username` in the PR description/comment). If your run into any issues finding the reviewers or have any other questions, ping the [#contributing channel](https://amphtml.slack.com/messages/C9HRJ1GPN/) on [Slack](https://bit.ly/amp-slack-signup).
+6.  If a reviewer requests changes make them locally and then repeat the steps in this section to push the changes to your branch back up to GitHub again.
+7.  For pushes after the first, just use `git push`
+8.  If you don't get a new review within 2 business days, feel free to ping the pull request by adding a comment.
+9.  If you see visual diffs reported by [Percy](http://percy.io/ampproject/amphtml), click through the check on GitHub to access the results. Differences that are expected can be approved by one of your reviewers.
+10. Once approved your changes are merged into the amphtml repository by one of your reviewers.
+
+## Delete your branch after your changes are merged (optional)
+
+1.  Go to the main branch: `git checkout main`
+2.  Delete your local branch: `git branch -D <branch name>`
+3.  Delete the corresponding GitHub fork branch: `git push -d origin <branch name>`
+
+## See your changes in production
+
+-   If your change affected internal documentation, tests, the build process, etc. you can generally see your changes right after they're merged.
+-   If your change was to the code that runs on AMP pages across the web, you'll have to wait for the change to be included in a production release. Generally, it takes about 1-2 weeks for a change to be live for all users. See the [release schedule](release-schedule.md) for more specific details.
+-   The [amphtml Releases page](https://github.com/ampproject/amphtml/releases) will list your PR in the first build that contains it. `Pre-release` is the build on the Experimental Channel, `Latest Release` is the build in production.
+-   Opt in to using the Experimental Channel in a browser by enabling `experimental-channel` on the [AMP Experiments](https://cdn.ampproject.org/experiments.html) page.
+-   Find the AMP version being used on a page in the developer console, i.e. `Powered by AMP ⚡ HTML – Version <build number>`.
diff --git a/docs/good-first-issues-template.md b/docs/good-first-issues-template.md
new file mode 100644
index 0000000000000..133554de0fef9
--- /dev/null
+++ b/docs/good-first-issues-template.md
@@ -0,0 +1,75 @@
+<!--
+Copy this template into new Great First Issues and edit as needed.
+-->
+<!--
+[Optional] Include this section if you think the issue is perfect for people
+who have never contributed to open source projects before.
+-->
+
+### First Timers Only
+
+We know figuring out the process for contributing to an open source project can be intimidating, so we created this issue as a way for you to learn the ropes. (If you feel comfortable contributing to open source projects, please leave this issue for someone else.)
+
+<!--
+List knowledge/skills the contributor should already have before working on this bug (for example, knowledge of web components, Node.js internals, etc.).  New contributors can use this section to find bugs that match their existing skills.  This also serves as a filter that can reduce the amount of explanation you will need to do in the "Step by step" section.  Try to be only as restrictive as necessary and call out any nice-to-haves.
+-->
+
+### What you will need to know
+
+<!--
+[Optional] If there is additional context that will help the contributor fix the bug add it here.  If this is redundant with other sections feel free to remove it.
+-->
+
+### Background
+
+<!--
+Explain why fixing this bug/feature is important, i.e. why should the contributor care about fixing this?  Whose life will be made better by this fix?
+-->
+
+### Motivation
+
+<!--
+Detailed steps for reproducing the bug.
+
+If this is a feature, change this to "The feature" and add a detailed description.
+-->
+
+### The bug
+
+<!--
+Step-by-step instructions for the contributor to follow as they work through the bug.  Feel free to change any step that will make the steps more clear for this issue.  Make sure to replace the comment block below with the exact steps the contributor should follow.
+-->
+
+### Step by step
+
+-   [ ] Claim this issue by adding a comment below. Please only claim this bug if you plan on starting work in the next day or so. (If you [join the ampproject GitHub org](https://goo.gl/forms/T65peVtfQfEoDWeD3) we'll be able to assign this issue to you after you've claimed it.)
+-   [ ] If you aren't too familiar with Git/GitHub, see the [Getting Started End-to-End Guide](https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md) for [an intro to Git & GitHub,](https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md#intro-to-git-and-github) and [how to get a copy of the code](https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md#get-a-copy-of-the-amphtml-code). You can also refer to the [Quick Start Guide](https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md) for the necessary setup steps with less explanation than the End-to-End guide.
+-   [ ] Follow the instructions for [building AMP](https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md#building-amp-and-starting-a-local-server).
+-   [ ] [Create a Git branch](https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md#create-a-git-branch) for making your changes.
+-   [ ] [Sign the Contributor License Agreement](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#contributor-license-agreement) before creating a Pull Request. (If you are contributing code on behalf of a corporation start this process as early as possible.)
+<!--
+Add steps that are specific to the issue here, e.g. perhaps they should edit a test, run `amp unit` or `amp integration` to see it fails, change a file and then run test again to see that the new test succeeds?  Adjust the level of detail for the background you indicated the contributor should have.
+-->
+-   [ ] [Commit your changes](https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md#edit-files-and-commit-them) frequently.
+-   [ ] [Push your changes to GitHub](https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md#push-your-changes-to-your-github-fork).
+<!--
+Ideally suggest a reviewer for the Pull Request; not knowing who to set as the reviewer can be confusing for new contributors.
+-->
+-   [ ] [Create a Pull Request](https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md#send-a-pull-request-ie-request-a-code-review). Mention `closes Issue <this issue number>` in the description.
+-   [ ] [Respond to your reviewer's comments](https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md#respond-to-pull-request-comments) (if any).
+
+<!--
+If this issue is a change that won't go out with a push (e.g. a doc change, a fix to the build, etc.) update the sentence about how to see their change is live.
+-->
+
+Once approved, your changes will be merged. **⚡⚡⚡Congrats on making your first contribution to AMP!⚡⚡⚡** You'll be able to see it [live across the web soon](https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md)!
+
+Thanks, and we hope to see more contributions from you soon.
+
+### Questions?
+
+<!--
+Ideally provide a specific contact to @mention here as well
+-->
+
+If you have questions ask in this issue or on your Pull Request (if you've created one) or see the [How to get help](https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md#how-to-get-help) section of the Getting Started guide.
diff --git a/docs/governance.md b/docs/governance.md
new file mode 100644
index 0000000000000..b1ff5e413b3d3
--- /dev/null
+++ b/docs/governance.md
@@ -0,0 +1 @@
+See https://github.com/ampproject/meta/blob/main/GOVERNANCE.md
diff --git a/contributing/issue-priorities.md b/docs/issue-priorities.md
similarity index 100%
rename from contributing/issue-priorities.md
rename to docs/issue-priorities.md
diff --git a/contributing/lts-release.md b/docs/lts-release.md
similarity index 78%
rename from contributing/lts-release.md
rename to docs/lts-release.md
index d1ce3383ff995..47deb0c924f28 100644
--- a/contributing/lts-release.md
+++ b/docs/lts-release.md
@@ -2,9 +2,9 @@
 
 The **lts** release channel provides a previous **stable** build for one-month intervals. On the second Monday of each month, the current **stable** release is promoted to **lts**. This channel is not recommended for all AMP publishers. It is provided so that publishers who wish to perform a QA cycle on their website less frequently may do so by opting specific web pages into the **lts** channel.
 
-In the event that the second Monday of the month falls during a [release freeze](https://github.com/ampproject/amphtml/blob/master/contributing/release-schedule.md#release-freezes) (such as on one of the major US holidays), the promotion will be performed after the end of the release freeze.
+In the event that the second Monday of the month falls during a [release freeze](https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md#release-freezes) (such as on one of the major US holidays), the promotion will be performed after the end of the release freeze.
 
-> Note: The **lts** release channel is available only to AMP Websites; it is not available to AMP Actions, AMP for Email, AMP Stories, or AMP for Ads.
+> Note: The **lts** release channel is available only to AMP Websites and AMP Stories; it is not available to AMP Email or AMP Ads.
 
 ## How to Opt-In
 
@@ -34,4 +34,4 @@ In the event that the second Monday of the month falls during a [release freeze]
 
 While it is a requirement that the same version is used for the runtime and extension scripts, requesting **lts** is valid AMP. It will get the same cache benefits as the stable release channel.
 
-**Important**: Publishers using the **lts** release channel should be careful when using newly introduced features. Because of the longer cycle, the **lts** release may be as much as seven weeks behind the `HEAD` of [`ampproject/amphtml`](https://github.com/ampproject/amphtml). See the section on [determining if your change is in a release](https://github.com/ampproject/amphtml/blob/master/contributing/release-schedule.md#Determining-if-your-change-is-in-a-release) to validate if a change will be ready with your chosen release cycle.
+**Important**: Publishers using the **lts** release channel should be careful when using newly introduced features. Because of the longer cycle, the **lts** release may be as much as seven weeks behind the `HEAD` of [`ampproject/amphtml`](https://github.com/ampproject/amphtml). See the section on [determining if your change is in a release](https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md#Determining-if-your-change-is-in-a-release) to validate if a change will be ready with your chosen release cycle.
diff --git a/docs/metrics.md b/docs/metrics.md
new file mode 100644
index 0000000000000..06da7bd1594c9
--- /dev/null
+++ b/docs/metrics.md
@@ -0,0 +1,19 @@
+# Project Metrics
+
+## Absolute Code Coverage
+
+Test coverage for the repository as computed by CodeCov
+
+![Absolute Code Coverage](https://amp-project-metrics.appspot.com/api/plot/AbsoluteCoverageMetric.png)
+
+## Cherrypick Issue Count
+
+Number of cherry-pick issues in the last 90 days
+
+![Cherrypick Issue Count](https://amp-project-metrics.appspot.com/api/plot/CherrypickIssueCountMetric.png)
+
+## Release Granularity
+
+Average commits per release over the last 90 days
+
+![Release Granularity](https://amp-project-metrics.appspot.com/api/plot/ReleaseGranularityMetric.png)
diff --git a/docs/origin-trials.md b/docs/origin-trials.md
new file mode 100644
index 0000000000000..20be3fbcc07df
--- /dev/null
+++ b/docs/origin-trials.md
@@ -0,0 +1,33 @@
+# Origin Trials
+
+Origin Trials enable developers to use an experimental feature in production and provide essential feedback.
+
+The AMP Origin Trial process is inspired by the [Chromium Origin Trial process](https://github.com/GoogleChrome/OriginTrials).
+
+Traditionally, a feature in experimental mode can only be used in development and cannot be pushed to production. Origin Trials allow interested developers to opt-in to a test an experimental feature in production. Origin Trial users should be mindful of the following:
+
+-   The test is for a limited time.
+-   The feature will likely undergo some changes after an Origin Trials.
+-   Origin Trials present an opportunity to implement and benefit from a new feature before it’s fully live. The feature will live on the developer's site, rather than guarded by an experiment, and feedback can directly influence the direction of the feature.
+
+## When to consider an Origin Trial
+
+-   Not every experiment needs an Origin Trial.
+-   The experiment should be feature complete with a stable API at the point of the Origin Trial.
+-   Data from opt-in experiments is going to be insufficient and you need data from real-world users.
+-   The potential versioning pain is much greater than the pain of dealing with the logistics of an Origin Trial.
+-   Good questions to answer with an Origin Trial:
+    -   Is this API the "right" one?
+
+## Origin Trial - the details
+
+-   No Origin Trial can last more than 3 months.
+-   An Origin Trial duration can be prematurely shortened by us (with 7 days of notice) if usage exceeds 0.1% of AMP page loads.
+-   Extending an Origin Trial requires approval from the Approvers Working Group (@ampproject/wg-approvers).
+
+## Enable an Origin Trial
+
+Include the following <meta> tag within the <head> tag on each page that uses the Origin Trial experiment:
+
+<meta name="amp-experiment-token" content="{copy your token here}">
+"amp-experiment-token" is the literal string, "amp-experiment-token". Not the token itself (which goes into the content attribute), or the name of the experiment.
diff --git a/docs/release-schedule.md b/docs/release-schedule.md
new file mode 100644
index 0000000000000..65406f62e9c56
--- /dev/null
+++ b/docs/release-schedule.md
@@ -0,0 +1,123 @@
+# Release Schedule
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+-   [Release Channels](#release-channels)
+    -   [Nightly](#nightly)
+    -   [Weekly](#weekly)
+        -   [Beta and Experimental channels](#beta-and-experimental-channels)
+    -   [Long-Term Stable (lts)](#long-term-stable-lts)
+-   [Determining if your change is in a release](#determining-if-your-change-is-in-a-release)
+-   [Release Cadence](#release-cadence)
+    -   [Detailed schedule](#detailed-schedule)
+    -   [Release Freezes](#release-freezes)
+
+A new release of AMP is pushed to all AMP pages every week on Tuesday. **Once a change in AMP is merged into the main branch of the amphtml repository, it will typically take 1-2 weeks for the change to be live for all users.**
+
+The [AMPHTML Validator](https://github.com/ampproject/amphtml/tree/main/validator#amp-html--validator) has it's own [Release Schedule](validator-release-schedule.md)
+
+## Release Channels
+
+The AMP runtime and extensions are provided through a variety of different _release channels_. Each channel serves a purpose for developers and for the AMP HTML Project itself. See the [release cadence section](#release-cadence) for a more detailed breakdown of how and when code from the [`ampproject/amphtml`](https://github.com/ampproject/amphtml) repository makes it into release builds.
+
+To determine if a PR has been included in any of the following release channels, look for the GitHub labels _PR Use: In Canary_, _PR Use: In Production_, or _PR Use: In LTS_ (see the section on [determining if your change is in a release](#Determining-if-your-change-is-in-a-release) for more details).
+
+### Nightly
+
+The **nightly** release channel is updated (as its name indicates) every weeknight. This process is automated, and there is no guarantee that any given nightly release is free of bugs or other issues. Each night after midnight (Pacific Time), the last "green" commit from the day is selected to be the release cutoff point. A green build indicates that all automated tests have passed on that build.
+
+The nightly release provides a mechanism to detect and resolve issues quickly and before they reach the more traffic-heavy _weekly_ release channels. It also serves to reduce the number of users affected by newly introduced issues.
+
+It is possible to opt into the **nightly** channel, to test pull requests that were merged in the past few days. See the [opt-in section](developing.md#opting-in-to-pre-release-channels) in [developing.md] for details.
+
+### Weekly
+
+The _weekly_ release channels are considered to be the primary "evergreen" release channels. Each week the **beta** release from the previous week is promoted to the **stable** release channel, and the last **nightly** release from the previous week is promoted to the **experimental** and **beta** release channels (see the [detailed schedule](#detailed-schedule)).
+
+There are two sets of build configurations used in creating release builds: the _canary_ configuration and the _production_ configuration. The **experimental** and **beta** release channels are built off of the same commit. However, the **experimental** channel uses the _canary_ configuration while the **beta** channel uses the _production_ configuration. The _canary_ configuration enables experimental components and features that may be turned off in _production_. It is possible to opt into the **experimental** or **beta** channels via the [experiments page](https://cdn.ampproject.org/experiments.html).
+
+The **stable** release channel is built with the _production_ configuration and served to most AMP traffic. Since the **beta** release channel is also built from the _production_ configuration, it represents the exact build which will become **stable** the following week (with the possibility of cherry-picks to fix last-minute issues; see [Contributing Code](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#Cherry-picks)).
+
+#### Beta and Experimental channels
+
+The _Beta_ and _Experimental Channels_ are pre-release candidates for the next Stable release of AMP. Every Tuesday (except for weeks where there is a [release freeze](#release-freezes)), last week's **nightly** is promoted to the developer opt-in channels for **beta** and **experimental**. Following a 1-day period where we verify that no feature or performance regressions were introduced in these channels, we promote this release on Wednesday to a small portion of traffic. This same release is then promoted to the **stable** channel on Tuesday the following week.
+
+It is possible to opt into these channels. See the [opt-in section](developing.md#opting-in-to-pre-release-channels) in [developing.md] for details.
+
+Opting into the _Beta Channel_ is intended for:
+
+-   testing and playing with the version of the AMP runtime that will be released soon
+-   using in Quality Assurance (QA) to ensure that your site is compatible with the next version of AMP
+
+The _Experimental Channel_ is intended for:
+
+-   testing and playing with new features not yet available to all users
+-   using in Quality Assurance (QA) to ensure that your site is compatible with upcoming features of AMP that are still under development
+
+The _Experimental Channel_ **may be less stable** and it may contain features not yet available to all users.
+
+### Long-Term Stable (lts)
+
+The **lts** release channel provides a previous **stable** build for one-month intervals. On the second Monday of each month, the current **stable** release is promoted to **lts**. This channel is not recommended for all AMP publishers. It is provided so that publishers who wish to perform a QA cycle on their website less frequently may do so by opting specific web pages into the **lts** channel (see the [**lts** readme](https://github.com/ampproject/amphtml/blob/main/docs/lts-release.md)).
+
+If the second Monday of the month falls on a holiday, the promotion will be performed after the end of the [release freeze](#release-freezes).
+
+Important: Publishers using the **lts** release channel should not use newly introduced features. Because of the longer cycle, the **lts** release may be as much as seven weeks behind the `HEAD` of [`ampproject/amphtml`](https://github.com/ampproject/amphtml). See the section on [determining if your change is in a release](#Determining-if-your-change-is-in-a-release) to validate if a change will be ready with your chosen release cycle.
+
+## Determining if your change is in a release
+
+[_Type: Release_ GitHub issues](https://github.com/ampproject/amphtml/labels/Type%3A%20Release) are used to track the status of current and past releases; from the initial cut, to testing via **experimental**/**beta** channels, to eventual release via the **stable** and **lts** channels. Announcements about releases are made on the [AMP Slack #release channel](https://amphtml.slack.com/messages/C4NVAR0H3/) ([sign up for Slack](https://bit.ly/amp-slack-signup)).
+
+You can determine what changes are in a given build using one of the following:
+
+-   The [_Type: Release_ GitHub issues](https://github.com/ampproject/amphtml/labels/Type%3A%20Release) for each release build will include a link to the specific [release page](https://github.com/ampproject/amphtml/releases) listing the changes contained in that release.
+-   The [_PR Use: In Beta / Experimental_](https://github.com/ampproject/amphtml/issues?q=label%3A%22PR+use%3A+In+Beta+%2F+Experimental%22), [_PR Use: In Stable_](https://github.com/ampproject/amphtml/issues?utf8=%E2%9C%93&q=label%3A%22PR%20use%3A%20In%20Production%22), and [_PR Use: In LTS_](https://github.com/ampproject/amphtml/issues?utf8=%E2%9C%93&q=label%3A%22PR%20use%3A%20In%20LTS%22) labels are added to PRs when they've made it into a _weekly_ or **lts** build. There may be a delay between when the build is created and when the label is added.
+
+## Release Cadence
+
+We are intentionally cautious with our release cadence.
+
+In determining how often we should push new versions of AMP to everyone, we have to weigh many factors including:
+
+-   stability for the millions of sites/billions of pages built using AMP
+-   cache-busting that might happen when we push a new version
+-   the desire to get new features out quickly
+
+After considering all of these factors, we have arrived at the 1-2 week push cycle. Thus far, we have found this to be a reasonable compromise, but we will continue to evaluate all of these factors and may make changes in the future.
+
+### Detailed schedule
+
+We try to stick to this schedule as closely as possible, though complications may cause delays. You can track the latest status about any release in the [_Type: Release_ GitHub issues](https://github.com/ampproject/amphtml/labels/Type%3A%20Release) and the [AMP Slack #release channel](https://amphtml.slack.com/messages/C4NVAR0H3/) ([sign up for Slack](https://bit.ly/amp-slack-signup)).
+
+-   Every weeknight: a new **nightly** build is automatically cut and released to the [AMP Nightly Channel](#nightly).
+-   Tuesday @ [11am Pacific](https://www.google.com/search?q=11am+pacific+in+current+time+zone): new **experimental** and **beta** release builds are created from a recent known-good nightly channel release and are pushed to users who opted into the [AMP Experimental Channel](#amp-experimental-and-beta-channels) or [AMP Beta Channel](#amp-experimental-and-beta-channels), respectively.
+-   Wednesday: we check bug reports for _Experimental Channel_ and _Beta Channel_ users and if everything looks fine, we push the **beta** to 1% of AMP pages
+-   Thursday-Monday: we continue to monitor error rates and bug reports for _Experimental Channel_ and _Beta Channel_ users and the 1% of pages with the **experimental**/**beta** builds
+-   Tuesday the following week: the **beta** build is fully promoted to **stable** (i.e. all AMP pages will now use this build)
+
+### Release Freezes
+
+There are occasions when we will skip a release of AMP to production, known as a release freeze.
+
+If a one week release freeze is announced for Week N:
+
+-   The previous week's release build remains in **experimental**/**beta** for an extra week, i.e. the release cut in Week N-1 is not pushed to **stable** in Week N as would normally be the case. Instead, it will be pushed to **stable** in Week N+1.
+-   A new release build is _not_ made in the freeze week (Week N).
+-   The normal schedule will resume in Week N+1, i.e. **experimental**/**beta** are cut in Week N+1 and promoted to **stable** in Week N+2.
+-   If the **stable** release promoted during Week N-1 was originally scheduled to be promoted to **lts** during Week N, it will now be promoted to **lts** on the Monday of Week N+1.
+-   **nightly** releases are still generated and promoted, as they are fully automated.
+
+A release freeze may happen due to:
+
+-   Times when there are not enough people available to push the AMP release to **stable** and monitor it. Currently, most of the people performing AMP releases are based in the United States, so this will usually be the weeks of the major US holidays of Independence Day (July 4), Thanksgiving (fourth Thursday in November), Christmas (25 December), and New Year's Eve/Day (December 31/January 1).
+-   An emergency situation, such as a security or privacy issue as determined by the [Technical Steering Committee (TSC)](https://github.com/ampproject/meta-tsc) or the people performing the release.
+-   Other situations when the stability of the codebase is deemed to be particularly important as determined by the TSC.
+
+In all cases, except emergencies, the release freezes will be announced at least one month in advance.
+
+Note that unless otherwise announced a release freeze does not imply a code freeze. Code may still be written, reviewed and merged during a release freeze.
diff --git a/docs/running-server-side-experiment.md b/docs/running-server-side-experiment.md
new file mode 100644
index 0000000000000..1b846c38add5f
--- /dev/null
+++ b/docs/running-server-side-experiment.md
@@ -0,0 +1,147 @@
+<!---
+Copyright 2020 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.
+-->
+
+# Running Experiment with Different Binaries
+
+We understand that experimenting a new feature or change on the client side is not always practical. For example, if you rewrite a big chunk of the code base, or include a new transformer in the transpiling process, you would want to run the experiment at the server level, where different binaries will be returned.
+
+This doc explains how to create a server side diverted experiment.
+
+_Refer to [enabling AMP experimental features doc](https://amp.dev/documentation/guides-and-tutorials/learn/experimental) to learn more on client side experiments_
+
+## Before you start
+
+Because real traffic can be automatically assigned to the experiment, plus the experiment slots are limited. Any experiment declaration and launch requires an issue tracker and at least one approval from @ampproject/wg-approvers or @ampprojeg/wg-monetization depending on the type of experiment environment(#environment).
+
+## Run an Experiment
+
+### Declare an Experiment
+
+Declare an experiment flag that's used during transpiling process. An example looks like
+
+```
+// eslint-disable-next-line no-undef
+if (MY_EXPERIMENT) {
+  // new code path
+} else {
+  // old code path
+}
+```
+
+During transpiling, babel will replace the experiment flag with a boolean value and removed the unused code path.
+
+The experiment flag values are default to `false`. You can use the `--define_experiment_constant` flag to set the value to `true`.
+
+```
+amp build --define_experiment_const MY_EXPERIMENT`
+```
+
+### Start an Experiment
+
+Once you receive approval to start a server side experiment. You can add your experiment to one of the three experiment slots under the `experiments-config.js` [file](https://github.com/ampproject/amphtml/blob/main/build-system/global-configs/experiments-config.json).
+
+Example
+
+```
+{
+  "experimentA": {
+    "name": "myExperimentName",
+    "environment": "AMP",
+    "issue": "Link to the experiment tracking issue",
+    "expiration_date_utc": "Date in YYYY-MM-DD format, in UTC",
+    "define_experiment_constant": "MY_EXPERIMENT"
+  },
+  "experimentB": {},
+  "experimentC": {}
+}
+```
+
+In the same pull request you also need to add an experiment constant in the `experiments-const.json` [file](https://github.com/ampproject/amphtml/blob/main/build-system/global-configs/experiments-const.json).
+
+Example
+
+```
+{
+  "MY_EXPERIMENT": false,
+  ...
+}
+```
+
+You start with the `false` value at first. Note that the `experiment-config.json` constants override the values set in the `experiment-const.json` file.
+
+#### More on Experiment Config
+
+##### Environment
+
+There are two types of environment `AMP` and `INABOX`. Use `AMP` if your experiment applied to AMP Documents, use `INABOX` if you want to run the experiment within AMPHTML ads.
+
+##### Expiration Date UTC
+
+The experiment expiration date in YYYY-MM-DD format, in UTC. If an experiment is expired, it will fail the build process. This expiration date is only read during the build. As a result, the experiment will actually end on the following release date after the expiration.
+
+Please keep the expiration date 30 days within the start date unless otherwise instructed.
+
+### What's Happening Behind
+
+#### Building Experimental Binaries
+
+After a new experiment slot has been added, AMP's release framework will respect the config and build additional experimental binaries. E2E tests will be ran with these experiment binaries.
+
+Once the experimental binaries are shipped, once can access those with different RTV prefix.
+
+For Experiment with `environment = AMP`. The Beta version that has prefix (03) will be used as control group for all experiments.
+
+| Experiment Slot Used | RTV Prefix |
+| -------------------- | ---------- |
+| A                    | 10         |
+| B                    | 11         |
+| C                    | 12         |
+
+For Experiment with `environment = INABOX`, two binaries will be built for each experiment.
+| Experiment Slot Used | RTV Prefix (Experimental Build) | RTV Prefix (Control Build)
+|---------------------- | ------------------------------- | --------------------|
+|A | 21 | 20|
+|B | 23 | 22|
+|C | 25 | 24|
+
+Tip: To test experimental build, you can opt into the corresponding RTV number via the AMP experiments [site](https://cdn.ampproject.org/experiments.html).
+
+#### Running an Experiment
+
+##### AMP Documents
+
+There's no additional step to run an experiment with `environment = AMP`. The same amount of traffic will be automatically diverted to the RTV experiment slot A/B/C channel when we promote a small portion of traffic to the Beta channel. When comparing metrics, the Beta channel will serve as the control group to all experiments.
+
+##### AMPHTML Ads
+
+To run an experiment with `environment = INABOX`, please reach out to @ampproject/wg-monetization for additional instructions.
+
+## Launch an Experiment
+
+Once approvals have been collected from the corresponding working group. One can quickly launch an experiment by setting the experiment flag value under
+[`experiment-consts.json`](https://github.com/ampproject/amphtml/blob/main/build-system/global-configs/experiments-const.json).
+
+E.g.
+
+```
+{
+  "MY_EXPERIMENT": true,
+}
+```
+
+Make sure to remove the experiment config from [`experiment-configs.json`](https://github.com/ampproject/amphtml/blob/main/build-system/global-configs/experiments-config.json) when you do so. Because the config will override the value from [`experiment-consts.json`](https://github.com/ampproject/amphtml/blob/main/build-system/global-configs/experiments-const.json).
+
+It is recommended to follow up with a proper clean up and remove the flag from the above file after the change is stable in production.
diff --git a/docs/spec/amp-3p-naming.md b/docs/spec/amp-3p-naming.md
new file mode 100644
index 0000000000000..52a91ed27f999
--- /dev/null
+++ b/docs/spec/amp-3p-naming.md
@@ -0,0 +1,54 @@
+# Naming third-party components
+
+AMP differentiates between "first-party" and "third-party" [components](https://amp.dev/documentation/components/):
+
+-   First-party components are those that work independently, regardless of a specific external service. These are generic. These are first-party components:
+
+    -   `<amp-sidebar>`
+    -   `<amp-list>`
+    -   `<amp-iframe>`[<sup>[1]</sup>](#amp-iframe-first-party)
+    -   etc.
+
+-   Third-party components are those that embed functionality provided by a service separate from the AMP runtime, usually through an embedded [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe). These always depend on the same specific service. These are third-party components:
+
+    -   `<amp-facebook>`
+    -   `<amp-gfycat>`
+    -   `<amp-subscriptions-google>`
+    -   etc.
+
+The goal of these guidelines is to **disambiguate between first and third-party components through their names**, so that a component provided by a third-party service is not confused with a generic one.
+
+## Guideline 1: Third party components must contain a brand name
+
+Since third-party services are usually bundled as a product, the component must contain its associated brand name:
+
+-   ✅ This is **OK**: `<amp-facebook-comments>`
+-   ❌ This is **not OK**: `<amp-comments>`
+
+**Exception**: Brand name may be confused with a component that's generic
+
+Let's imagine a service named **_Toast.io_**. Regardless of what the service provides, naming a component for this service "`<amp-toast>`" would be bad, since it can be confused for the generic term for [a "toast" component](https://google.com/search?q=toast+component). In this case, the name must communicate that it's a third-party embed:
+
+-   ❌ This is **not OK**: `<amp-toast>`
+-   ✅ This is **OK**: `<amp-embed-toast>`
+-   ✅ This is **OK**: `<amp-toast-io>`
+
+## Guideline 2: Media players must be named as such
+
+Names for third-party products may fail to communicate their purpose, so all media player names (like a video or audio player) must end with `-player`. This provides an affordance by convention: third-party media player components are always annotated as such.[<sup>[2]</sup>](#no-player-suffix)
+
+Let's imagine a video provider named **_UltraVideo_**:
+
+-   ❌ This is **not OK**: `<amp-ultra-video>`
+-   ✅ This is **OK**: `<amp-ultra-video-player>`
+-   ✅ This is **even better**: `<amp-ultra-video-embed-player>`
+
+---
+
+### <a id="amp-iframe-first-party"></a> <sup>1</sup> Why are `<amp-iframe>` or `<amp-video-iframe>` considered first-party?
+
+The URL that these components embed is interchangeable, since their src attribute is configurable by the page's author to point to any third-party endpoint, or the author's own endpoint.
+
+### <a id="no-player-suffix"></a> <sup>2</sup> Why is `<amp-youtube>` not suffixed like `<amp-youtube-player>`?
+
+Several media player components names lack the -player prefix, like `<amp-youtube>` and all those the apply in the [video player list](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-video-interface.md). These were historically created before this guideline.
diff --git a/docs/spec/amp-3p-video.md b/docs/spec/amp-3p-video.md
new file mode 100644
index 0000000000000..0ae6691963c8c
--- /dev/null
+++ b/docs/spec/amp-3p-video.md
@@ -0,0 +1,85 @@
+# Vendor-specific (3p) video player components
+
+The generic [`amp-video`](https://go.amp.dev/c/amp-video) component plays videos directly on a page, much like a `<video>` tag.
+
+Unfortunately, not all videos can be embedded this way. For these specialized cases, AMP provides vendor-optimized components like [`amp-youtube`](https://go.amp.dev/c/amp-youtube), [`amp-ima-video`](https://go.amp.dev/c/amp-ima-video), and [others](./amp-video-interface.md).
+Internally these players load an iframe whose page communicates with the outer document to coordinate playback.
+
+**We would prefer to not have additional custom video implementations.** Instead we believe, [`amp-video-iframe`](https://go.amp.dev/c/amp-video-iframe) should be used instead, since it is a generic component that can load any video document to coordinate playback. Instead, new integrations should come in the form of [`amp-video-iframe` configurations](https://go.amp.dev/c/amp-video-iframe#vendors). _If you believe you're unable to integrate with `amp-video-iframe`, please [file a bug report](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Bug&template=bug-report.yml) mentioning `@alanorozco` and `@wassgha`._
+
+## I want to contribute my vendor-specific player
+
+You probaby do **_not_** need to build your own player.
+
+The `amp-video-iframe` playback interface supports the following methods, which we believe cover the vast majority of cases AMP documents necessitate:
+
+-   `play`
+-   `pause`
+-   `mute`
+-   `unmute`
+-   `showcontrols`
+-   `hidecontrols`
+-   `fullscreenenter`
+-   `fullscreenexit`
+
+`amp-video-iframe` can also [send custom namespaced analytics signals](<https://amp.dev/documentation/components/amp-video-iframe/#postanalyticsevent(eventtype[,-vars])>).
+
+(If there is a feature missing from this list that a custom player requires, we are happy to work on extending it as necessary.)
+
+If this is enough for your use case, you'd only need to build a playback document hosted on your server that's able to communicate with `amp-video-iframe`.
+For guidance on accomplishing this, [refer to the component documentation.](https://go.amp.dev/c/amp-video-iframe#vendors)
+
+(If you _cannot_ support these playback methods, it's likely that a simple [`amp-iframe`](https://go.amp.dev/c/amp-iframe)
+can embed a separate video document just fine.)
+
+Once you host your integration document, you may provide a code sample for document authors to find your service [in the AMP documentation.](https://github.com/ampproject/amphtml/blob/main/extensions/amp-video-iframe/amp-video-iframe.md)
+
+### When _should_ I build a vendor-specific player?
+
+If the API you require for communication includes methods that are **_not_** part of the `amp-video-iframe` playback interface, you might want to build your own player. (Please note that most custom analytics signals are not considered in this case,
+since `amp-video-iframe` [also has plumbing for that.](<https://amp.dev/documentation/components/amp-video-iframe/#postanalyticsevent(eventtype[,-vars])>))
+
+For example, these are some of the features that justify specific players:
+
+-   **`amp-youtube`** loads initial-frame placeholder images based on a URL scheme for perceived performance.
+    Its underlying implementation also loads with lower-than-default priority, since it's rather large in binary size.
+
+-   **`amp-ima-video`** embeds a generic host-less page that ships with the IMA SDK in order to transparently include standard IMA interface videos.
+
+(Please note that most other 3p players historically exist before `amp-video-iframe` could fulfill their use case.)
+
+## How can I build a player component?
+
+### Understand the contribution process
+
+You'll need to go through [the standard AMP contribution process](../contributing.md) when creating and submitting your component. For large features, such as a video player, you need to file an [I2I (intent-to-implement) issue](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=INTENT+TO+IMPLEMENT&template=intent-to-implement.yml) that describes the overall workings of your component.
+
+Your player component is also shipped as an extension, so you should [become familiar with the process of building one.](https://github.com/ampproject/amphtml/blob/main/docs/building-an-amp-extension.md)
+
+### Write your implementation
+
+#### The `VideoManager`
+
+Every player component talks to a single [`VideoManager`](../../src/service/video-manager-impl.js) via standard methods (`VideoInterface`) and events (`VideoEvents`) defined in the [AMP video interface](../../src/video-interface.js).
+
+This manager performs standard responsibilities for all videos, regardless of type:
+
+-   accessible, managed autoplay
+-   analytics tracking for playback
+-   coordination with [`amp-story`](https://go.amp.dev/c/amp-story)
+-   [docked video](https://amp.dev/documentation/components/amp-video-docking/)
+-   rotate-to-fullscreen
+
+#### Interface support
+
+Component classes should implement the [`VideoInterface`](../../src/video-interface.js).
+You can implement this interface entirely or partially, depending on [the video integration features you'd like to support](./amp-video-interface.md).
+
+At the very least, you should implement `play()` and `pause()`. Likewise, playback
+[actions](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/) (like `my-element.play`) will not work when unimplemented.
+
+Read through [the `VideoInterface` code to understand the individual effects of leaving each method unimplemented.](../../src/video-interface.js)
+
+#### Reference
+
+Existing implementations for [`amp-youtube.js`](../../extensions/amp-youtube/0.1/amp-youtube.js) and [`amp-video-iframe.js`](../../extensions/amp-video-iframe/0.1/amp-video-iframe.js) are good starter examples for implementation details. They use several standard utilities for creating the video frame and communicating with the `VideoManager`.
diff --git a/spec/amp-actions-and-events.md b/docs/spec/amp-actions-and-events.md
similarity index 84%
rename from spec/amp-actions-and-events.md
rename to docs/spec/amp-actions-and-events.md
index a711560bede4c..85e6f95ee137c 100644
--- a/spec/amp-actions-and-events.md
+++ b/docs/spec/amp-actions-and-events.md
@@ -172,6 +172,26 @@ event.value</pre>
   </tr>
 </table>
 
+### amp-accordion > section <a name="amp-accordion"></a>
+
+<table>
+  <tr>
+    <th width="25%">Event</th>
+    <th width="35%">Description</th>
+    <th width="40%">Data</th>
+  </tr>
+  <tr>
+    <td><code>expand</code></td>
+    <td>Fired when an accordion section expands.</td>
+    <td>None.</td>
+  </tr>
+  <tr>
+    <td><code>collapse</code></td>
+    <td>Fired when an accordion section collapses.</td>
+    <td>None.</td>
+  </tr>
+</table>
+
 ### amp-carousel[type="slides"] <a name="amp-carouseltypeslides"></a>
 
 <table>
@@ -216,10 +236,6 @@ event.index</pre></td>
     <th width="35%">Description</th>
     <th width="40%">Data</th>
   </tr>
-  <tr>
-    <td><code>changeToLayoutContainer</code></td>
-    <td>Update's <code>amp-list</code>'s layout to <code>layout="CONTAINTER"</code> to allow <a href="../extensions/amp-list/amp-list.md#dynamic-resizing">dynamic resizing</a>.</td>
-  </tr>
   <tr>
     <td><code>fetch-error</code>(low-trust)</td>
     <td>Fired when fetching data fails.</td>
@@ -282,7 +298,13 @@ event.selectedOptions</pre></td>
   </tr>
 </table>
 
-### amp-video, amp-youtube <a name="amp-video-amp-youtube"></a>
+<!-- Previous anchor to the next heading, keeping to preserve old fragment links: -->
+
+<a name="amp-video-amp-youtube"></a>
+
+### <a name="amp-video-events"></a> amp-video and other Video Elements
+
+The events below are dispatched by `amp-video`, `amp-video-iframe` and [3rd party video players](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-video-interface.md) like `amp-youtube`.
 
 <table>
   <tr>
@@ -376,7 +398,8 @@ event.response</pre></td>
     <code>position</code> is optional. One of <code>top</code>, <code>center</code>
     or <code>bottom</code> (default <code>top</code>).
     Specifies the position of the element relative to the viewport after
-    scrolling.</td>
+    scrolling.<br>
+    As an accessibility best practice, pair this with a call to <code>focus()</code> to focus on the element being scrolled to.</td>
   </tr>
   <tr>
     <td><code>focus</code></td>
@@ -433,6 +456,27 @@ event.response</pre></td>
   </tr>
 </table>
 
+### amp-accordion <a name="amp-accordion-1"></a>
+
+<table>
+  <tr>
+    <th>Action</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td><code>toggle(section=STRING)</code></td>
+    <td>Toggles the <code>expanded</code> and <code>collapsed</code> states of <code>amp-accordion</code> sections. When called with no arguments, it toggles all sections of the accordion. Trigger on a specific section by providing the section id: <code>on="tap:myAccordion.toggle(section='section-id')"</code>.
+  </tr>
+  <tr>
+    <td><code>expand(section=STRING)</code></td>
+    <td>Expands the sections of the accordion. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. Trigger on a specific section by providing the section id: <code>on="tap:myAccordion.expand(section='section-id')"</code>.</td>
+  </tr>
+  <tr>
+    <td><code>collapse(section=STRING)</code></td>
+    <td>Collapses the sections of the accordion. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. Trigger on a specific section by providing the section id: <code>on="tap:myAccordion.collapse(section='section-id')"</code>.</td>
+  </tr>
+</table>
+
 ### amp-carousel[type="slides"] <a name="amp-carouseltypeslides-1"></a>
 
 <table>
@@ -500,6 +544,10 @@ event.response</pre></td>
     <th>Action</th>
     <th>Description</th>
   </tr>
+  <tr>
+    <td><code>changeToLayoutContainer</code></td>
+    <td>Update's <code>amp-list</code>'s layout to <code>layout="CONTAINTER"</code> to allow <a href="../extensions/amp-list/amp-list.md#dynamic-resizing">dynamic resizing</a>.</td>
+  </tr>
   <tr>
     <td><code>refresh</code></td>
     <td>Refreshes data from the <code>src</code> and re-renders the list.</td>
@@ -595,9 +643,13 @@ event.response</pre></td>
   </tr>
 </table>
 
-### Video elements <a name="video-elements"></a>
+<!-- Previous anchor to the next heading, keeping to preserve old fragment links: -->
+
+<a name="video-elements"></a>
 
-The actions below are supported in the following AMP video elements: `amp-video`, `amp-youtube`, `amp-3q-player`, `amp-brid-player`, `amp-dailymotion`, `amp-delight-player`, `amp-ima-video`.
+### <a name="amp-video-actions"></a> amp-video and other Video Elements
+
+The actions below are supported in `amp-video`, `amp-video-iframe` and [3rd party video players](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-video-interface.md) like `amp-youtube`.
 
 <table>
   <tr>
@@ -621,7 +673,7 @@ The actions below are supported in the following AMP video elements: `amp-video`
     <td>Unmutes the video.</td>
   </tr>
   <tr>
-    <td><code>fullscreencenter</code></td>
+    <td><code>fullscreenenter</code></td>
     <td>Takes the video to fullscreen.</td>
   </tr>
 </table>
@@ -659,11 +711,17 @@ actions that apply to the whole document.
   </tr>
   <tr>
     <td><code>navigateTo(url=STRING, target=STRING, opener=BOOLEAN)</code></td>
-    <td>Navigates current window to given URL, to the optional specified target if given (currenly only supporting <code>_top</code> and <code>_blank </code>). The optional <code>opener</code> parameter can be specified when using a target of <code>_blank</code> to allow the newly opened page to access <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/opener"><code>window.opener<code></a>. Supports <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md">standard URL substitutions</a>.</td>
+    <td>
+      <p>Navigates current window to given URL, to the optional specified target if given (currenly only supporting <code>_top</code> and <code>_blank </code>). The optional <code>opener</code> parameter can be specified when using a target of <code>_blank</code> to allow the newly opened page to access <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/opener"><code>window.opener</code></a>. Supports <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md">standard URL substitutions</a>.</p>
+      <p><strong>Caveat:</strong> Using normal <code>&lt;a&gt;</code> links is recommended wherever possible since <code>AMP.navigateTo</code> is not recognized by web crawlers.</p>
+    </td>
   </tr>
   <tr>
     <td><code>closeOrNavigateTo(url=STRING, target=STRING, opener=BOOLEAN)</code></td>
-    <td>Tries to close the window if allowed, otherwise it navigates similar to <code>navigateTo</code> Action. Useful for use-cases where a "Back" button may need to close the window if it were opened in a new window from previous page or navigate if it wasn't opened.</td>
+    <td>
+      <p>Tries to close the window if allowed, otherwise it navigates similar to <code>navigateTo</code> Action. Useful for use-cases where a "Back" button may need to close the window if it were opened in a new window from previous page or navigate if it wasn't opened.</p>
+      <p><strong>Caveat:</strong> Using normal <code>&lt;a&gt;</code> links is recommended wherever possible since <code>AMP.closeOrNavigateTo</code> is not recognized by web crawlers.</p>
+    </td>
   </tr>
   <tr>
     <td><code>goBack</code></td>
diff --git a/spec/amp-boilerplate.md b/docs/spec/amp-boilerplate.md
similarity index 100%
rename from spec/amp-boilerplate.md
rename to docs/spec/amp-boilerplate.md
diff --git a/spec/amp-cache-debugging.md b/docs/spec/amp-cache-debugging.md
similarity index 91%
rename from spec/amp-cache-debugging.md
rename to docs/spec/amp-cache-debugging.md
index a15dd827e8e92..32e4c3ea844d5 100644
--- a/spec/amp-cache-debugging.md
+++ b/docs/spec/amp-cache-debugging.md
@@ -13,7 +13,7 @@ try the following:
 
 1. Open your browser's developer/error tools console, and resolve
    any errors or warnings that appear.
-2. Run the document through [AMPBench](https://ampbench.appspot.com/) and
+2. Run the document through [an AMP document validator](https://search.google.com/test/amp) and
    resolve any unexpected errors or warnings.
 
 If you still have a problem after following these steps, check the table below.
@@ -30,7 +30,7 @@ If you still have a problem after following these steps, check the table below.
   <tbody>
     <tr>
       <td>Web fonts do not appear (fallback fonts are used)</td>
-      <td>The AMP Cache is not white listed by the font provider.</td>
+      <td>The AMP Cache is not allowlisted by the font provider.</td>
       <td>Contact the font provider and ask them to allowlist <a href="https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests#cors-security-in-amp">all caches</a>.</td>
     </tr>
     <tr>
@@ -41,7 +41,7 @@ If you still have a problem after following these steps, check the table below.
     <tr>
       <td rowspan="2">Assets (e.g., fonts and images) do not appear</td>
       <td>The assets are served with the incorrect MIME type.</td>
-      <td>Specify an <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-cache-guidelines.md#guidelines-accepted-mime-types">acceptable MIME type</a>.</td>
+      <td>Specify an <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-cache-guidelines.md#guidelines-accepted-mime-types">acceptable MIME type</a>.</td>
     </tr>
     <tr>
       <td>The AMP Cache cannot access the assets.</td>
diff --git a/docs/spec/amp-cache-guidelines.md b/docs/spec/amp-cache-guidelines.md
new file mode 100644
index 0000000000000..9cb7aa61ea2ee
--- /dev/null
+++ b/docs/spec/amp-cache-guidelines.md
@@ -0,0 +1,119 @@
+# AMP Cache Guidelines
+
+## Purpose
+
+Provide guidelines to external parties for implementing their own AMP Caches.
+
+## Preamble
+
+In the AMP ecosystem, the platform that links to content may freely choose which AMP Cache (if any) to use. It is an inversion of the typical model where content delivery is the responsibility of the publisher.
+
+This allows platforms to provide their users with predictable load performance and among other things allows them to ensure required security and privacy invariants during AMP’s pre-rendering phase.
+
+AMP is an open ecosystem and actively encourages the development of more AMP Caches.
+
+## Guidelines: Core
+
+1. An AMP Cache only serves [valid AMP input documents](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).
+
+2. It participates in the [AMP validator release cycle](https://github.com/ampproject/amphtml/tree/main/validator).
+
+3. It participates in the AMP JS library release cycle and makes every effort to serve the latest version. It does not allow sites to perform version locking.
+
+4. It serves each site from a subdomain of the cache domain.
+
+    1. See for example: the [Google AMP Cache URL format](https://developers.google.com/amp/cache/overview#amp-cache-url-format).
+
+5. Pledges to maintain URL space forever (even beyond the lifetime of the cache itself):
+
+    1. This can be achieved by donating the URL space to a trustworthy third party entity such as [archive.org](http://archive.org).
+
+    2. This means that, should a cache decide to no longer operate, URLs should redirect to the origin URL or be served by another cache.
+
+6. Uses HTTPS serving only.
+
+7. Serves a strong [Content Security Policy](https://w3c.github.io/webappsec-csp/) ([CSP](https://developer.chrome.com/extensions/contentSecurityPolicy)) - a CSP defines a mechanism by which web developers can control the resources which a particular page can fetch or execute, as well as a number of security-relevant policy decisions.
+
+    1. Implements separately documented security rewrites on served content.
+
+    2. The CSP should be equivalent or stronger to what is being served on `cdn.ampproject.org`.
+
+    3. Caches must update their CSP in a timely fashion (within 7 days) at the request of the AMP.
+
+8. Supports a public Update Cache mechanism for document publishers to notify the AMP cache about new, updated or deleted documents:
+
+    1. Equivalent to the [Google AMP Update Cache API](https://developers.google.com/amp/cache/update-cache)
+
+9. Supports a public AMP Cache URL API:
+
+    1. Equivalent to the [Google AMP Cache URL API](https://developers.google.com/amp/cache/overview#amp-cache-url-format)
+
+10. Provides a faithful visual and UX reproduction of source document. E.g. changes in image resolution or compression rate may be acceptable if they provide strong benefits in terms of bandwidth usage and load time.
+
+11. No obstruction of the contents, branding or attribution of the original AMP document.
+
+12. No changes to ads, monetization, access (paywall monetization and similar), analytics, or similar.
+
+13. Respects all resource deletions within a reasonable timeframe.
+
+14. Uses a stale-while-revalidate caching model and reasonable min cache time (such as in the order of single digit minutes) is allowed. For example, as per [Google AMP Cache updates](https://developers.google.com/amp/cache/overview#google-amp-cache-updates), "[the cache] uses the origin's caching headers, such as Max-Age, as hints in deciding whether a particular document or resource is stale. When a user makes a request for something that is stale, that request causes a new copy to be fetched, so that the next user gets fresh content":
+
+    1. The cache is allowed to serve stale content independent of HTTP caching headers. It must make reasonable efforts to keep the cache contents fresh and must revalidate content after serving stale responses.
+
+15. Follows [AMP cache modifications best practices](../docs/spec/amp-cache-modifications.md).
+
+## Guidelines: Crawling
+
+-   [robots.txt](https://cdn.ampproject.org/robots.txt): Content should be served from the Cache with either the same robot rules as the origin content or stricter rules. See [https://cdn.ampproject.org/robots.txt](https://cdn.ampproject.org/robots.txt) for an example.
+
+## Guidelines: Optional Extensions
+
+-   Participation in [AMP Ads For AMP Pages ("A4A")](https://github.com/ampproject/amphtml/issues/3133) advertisement signing.
+
+## Guidelines: Accepted MIME types
+
+### MIME types for images
+
+Accepted MIME types for images include all `image/` subtypes (e.g. `image/gif`).
+
+### MIME types for fonts
+
+Accepted MIME types for fonts include the following prefixes:
+
+| Media type / subtype          |
+| ----------------------------- |
+| font/ (e.g. `font/opentype`)  |
+| application/font              |
+| application/x-font            |
+| application/x-woff            |
+| image/svg+xml                 |
+| application/octet-stream      |
+| application/vnd.ms-fontobject |
+| binary/octet-stream           |
+| text/plain (not recommended)  |
+
+## Guidelines: Resource size limits
+
+For resources (i.e., HTML, images, fonts) that are larger than 12 MB, you may not fetch the resource, and you may return a 404 error.
+
+## Guidelines: Adding a new cache to the AMP ecosystem
+
+-   Add the details of your cache to [caches.json](../build-system/global-configs/caches.json).
+    -   Some tools use the deployed version of this file (<https://cdn.ampproject.org/caches.json>) to automatically generate appropriate CORS headers as described at [CORS Security in AMP Guidelines](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-cors-requests.md#cors-security-in-amp).
+-   Handle dynamically generated components:
+    -   [`<amp-geo>`](../extensions/amp-geo/amp-geo.md) — at delivery time, the string `{{AMP_ISO_COUNTRY_HOTPATCH}}` in [`amp-geo.js`](../extensions/amp-geo/0.1/amp-geo.js) is replaced by a string consisting of the user's ISO country code followed by exactly 26 spaces (to avoid breaking map files).
+
+## References
+
+-   [Bing AMP Cache](https://www.bing.com/webmaster/help/bing-amp-cache-bc1c884c)
+    -   [Bing AMP Cache announcement](https://blogs.bing.com/Webmaster-Blog/September-2018/Introducing-Bing-AMP-viewer-and-Bing-AMP-cache)
+-   [Google AMP Cache](https://developers.google.com/amp/cache/)
+    -   [Google AMP Cache Overview](https://developers.google.com/amp/cache/overview)
+    -   The [Google AMP Cache](https://developers.google.com/amp/cache/) is a proxy-based content delivery network for delivering all valid AMP documents.
+    -   It fetches AMP HTML pages, caches them, and improves page performance automatically.
+    -   When using the Google AMP Cache, the document, all JS files and all images load from the same origin, which is using [HTTP 2.0](https://http2.github.io/) for maximum efficiency.
+    -   The cache also comes with a built-in [validation system](https://github.com/ampproject/amphtml/tree/main/validator) which confirms that the page works, and that it doesn’t depend on external resources.
+    -   The validation system runs a series of assertions confirming that the page’s markup meets the AMP HTML specification.
+    -   [Google AMP Cache FAQ](https://developers.google.com/amp/cache/faq)
+    -   [Google AMP Cache updates](https://developers.google.com/amp/cache/overview#google-amp-cache-updates)
+    -   [Crawling Google AMP Cache URLs - How-to for search engines](https://docs.google.com/document/d/1V_uLHoa48IlbFl7_3KWT_1JmCf6BnFtt3S_oR4UsasQ/edit?usp=sharing)
diff --git a/spec/amp-cache-modifications.everything.amp.html b/docs/spec/amp-cache-modifications.everything.amp.html
similarity index 100%
rename from spec/amp-cache-modifications.everything.amp.html
rename to docs/spec/amp-cache-modifications.everything.amp.html
diff --git a/spec/amp-cache-modifications.everything.cache.html b/docs/spec/amp-cache-modifications.everything.cache.html
similarity index 100%
rename from spec/amp-cache-modifications.everything.cache.html
rename to docs/spec/amp-cache-modifications.everything.cache.html
diff --git a/spec/amp-cache-modifications.md b/docs/spec/amp-cache-modifications.md
similarity index 96%
rename from spec/amp-cache-modifications.md
rename to docs/spec/amp-cache-modifications.md
index 04e4ed87902a1..bc2e5b2fe7099 100644
--- a/spec/amp-cache-modifications.md
+++ b/docs/spec/amp-cache-modifications.md
@@ -2,7 +2,7 @@
 
 These are guidelines for what AMP cache implementations should look like. Some items are required for overall security of the platform while others are suggestions for performance improvements. All modifications are made to both AMP and AMP4ADS documents except where noted.
 
-For example, given a [recent version](https://github.com/ampproject/amphtml/tree/master/spec/amp-cache-modifications.everything.amp.html) of [everything.amp.html](https://github.com/ampproject/amphtml/blob/master/examples/everything.amp.html), the output after modifications will be [this version](https://github.com/ampproject/amphtml/tree/master/spec/amp-cache-modifications.everything.cache.html).
+For example, given a [recent version](https://github.com/ampproject/amphtml/tree/main/docs/spec/amp-cache-modifications.everything.amp.html) of [everything.amp.html](https://github.com/ampproject/amphtml/blob/main/examples/everything.amp.html), the output after modifications will be [this version](https://github.com/ampproject/amphtml/tree/main/docs/spec/amp-cache-modifications.everything.cache.html).
 
 ### HTML Sanitization
 
@@ -271,11 +271,11 @@ The AMP Cache removes any resource hints in the original document.
 _Condition_
 Any `<link>` tag present with attribute `rel` equal to any of the following:
 
-- `dns-prefetch`
-- `preconnect`
-- `prefetch`
-- `preload`
-- `prerender`
+-   `dns-prefetch`
+-   `preconnect`
+-   `prefetch`
+-   `preload`
+-   `prerender`
 
 <details>
 <summary>example</summary>
@@ -291,24 +291,24 @@ Any `<link>` tag present with attribute `rel` equal to any of the following:
 _Condition_:
 Remove any `<meta>` tags except for those that:
 
-- have attribute `charset`
-- do not have attributes `content`, `itemprop`, `name` and `property`
-- have attribute `http-equiv` where attribute value is not one of:
-  - `content-security-policy`
-  - `refresh`
-  - `x-dns-prefetch-control`
-- have attribute `name` with case-insensitive prefix `amp-`
-- have attribute `name` with case-insensitive prefix `amp4ads-`
-- have attribute `name` with case-insensitive prefix `dc.`
-- have attribute `name` with case-insensitive prefix `i-amphtml-`
-- have attribute `name` with case-insensitive prefix `twitter:`
-- have attribute `name=apple-itunes-app`
-- have attribute `name=referrer` [note: this may be inserted by AMP Cache]
-- have attribute `name=robots` [note: this is inserted by AMP Cache]
-- have attribute `name=viewport`
-- have attribute `property` with case-insensitive prefix "al:"
-- have attribute `property` with case-insensitive prefix "fb:"
-- have attribute `property` with case-insensitive prefix "og:"
+-   have attribute `charset`
+-   do not have attributes `content`, `itemprop`, `name` and `property`
+-   have attribute `http-equiv` where attribute value is not one of:
+    -   `content-security-policy`
+    -   `refresh`
+    -   `x-dns-prefetch-control`
+-   have attribute `name` with case-insensitive prefix `amp-`
+-   have attribute `name` with case-insensitive prefix `amp4ads-`
+-   have attribute `name` with case-insensitive prefix `dc.`
+-   have attribute `name` with case-insensitive prefix `i-amphtml-`
+-   have attribute `name` with case-insensitive prefix `twitter:`
+-   have attribute `name=apple-itunes-app`
+-   have attribute `name=referrer` [note: this may be inserted by AMP Cache]
+-   have attribute `name=robots` [note: this is inserted by AMP Cache]
+-   have attribute `name=viewport`
+-   have attribute `property` with case-insensitive prefix "al:"
+-   have attribute `property` with case-insensitive prefix "fb:"
+-   have attribute `property` with case-insensitive prefix "og:"
 
 <details>
 <summary>example</summary>
@@ -322,7 +322,7 @@ Remove any `<meta>` tags except for those that:
 
 #### Remove `amp-live-list` children based on `amp_latest_update_time` parameter
 
-This is discussed in detail at [Server side filtering for `amp-live-list`](https://github.com/ampproject/amphtml/blob/master/extensions/amp-live-list/amp-live-list-server-side-filtering.md)
+This is discussed in detail at [Server side filtering for `amp-live-list`](https://github.com/ampproject/amphtml/blob/main/extensions/amp-live-list/amp-live-list-server-side-filtering.md)
 
 #### Remove attribute `nonce`
 
@@ -373,7 +373,7 @@ Has a stylesheet of the form: `<link href=https://fonts.googleapis.com/... rel=s
 
 #### Prioritize AMP engine javascript and other render blocking scripts in `<head>`
 
-The AMP Cache places the [AMP engine javascript](https://cdn.ampproject.org/v0.js) as the second child of `<head>` right after `<meta charset=utf-8>`. It then emits any other render blocking custom-element script tags followed by the remaining custom-element `<script>` tags in the document. Render blocking custom-element `<script>` tags are listed in [SERVICES at render-delaying-services.js](https://github.com/ampproject/amphtml/blob/master/src/render-delaying-services.js#L28).
+The AMP Cache places the [AMP engine javascript](https://cdn.ampproject.org/v0.js) as the second child of `<head>` right after `<meta charset=utf-8>`. It then emits any other render blocking custom-element script tags followed by the remaining custom-element `<script>` tags in the document. Render blocking custom-element `<script>` tags are listed in [SERVICES at render-delaying-services.js](https://github.com/ampproject/amphtml/blob/main/src/render-delaying-services.js#L28).
 
 <details>
 <summary>example</summary>
@@ -406,15 +406,14 @@ If a custom-element `<script>` tag is included in `<head>` but not used in `<bod
 _Condition_:
 Remove unused custom-element extensions with the following exceptions:
 
-- Do not remove any custom-element extensions if `<amp-live-list>` is present within the document
-- Do not remove any of the following custom-element extensions:
-- amp-access
-- amp-access-laterpay
-- amp-analytics
-- amp-auto-ads
-- amp-dynamic-css-classes
-- amp-form
-- amp-share-tracking
+-   Do not remove any custom-element extensions if `<amp-live-list>` is present within the document
+-   Do not remove any of the following custom-element extensions:
+-   amp-access
+-   amp-access-laterpay
+-   amp-analytics
+-   amp-auto-ads
+-   amp-dynamic-css-classes
+-   amp-form
 
 <details>
 <summary>example</summary>
@@ -432,8 +431,8 @@ Remove whitespace in `<head>` except for tags that should preserve whitespace.
 _Condition_:
 Remove whitespace except for within these tags:
 
-- `<script>`
-- `<style>`
+-   `<script>`
+-   `<style>`
 
 <details>
 <summary>example</summary>
diff --git a/spec/amp-cache-transform.md b/docs/spec/amp-cache-transform.md
similarity index 97%
rename from spec/amp-cache-transform.md
rename to docs/spec/amp-cache-transform.md
index 735c21d4bddd3..9c64c4e45ac43 100644
--- a/spec/amp-cache-transform.md
+++ b/docs/spec/amp-cache-transform.md
@@ -11,8 +11,8 @@ requires additional information to enable proper content negotation on a URL.
 
 This format should be sent in two cases:
 
-- delivery from origin server to intermediary
-- delivery from intermediary to user
+-   delivery from origin server to intermediary
+-   delivery from intermediary to user
 
 Ideally, it would _not_ be sent in direct delivery from origin server to user,
 as that would best be served by a traditional HTTP exchange (e.g. requiring less
@@ -128,10 +128,10 @@ immediately fail the entire parameterised list.
 
 There are additional semantic constraints on the spec:
 
-- Each `sh-integer` must be non-negative.
-- Two integers in a pair `X..Y` must satisfy `X<=Y`.
-- No two ranges in a spec should intersect. (`A..B` and `C..D` intersect if
-  `B >= C && A <= D`.)
+-   Each `sh-integer` must be non-negative.
+-   Two integers in a pair `X..Y` must satisfy `X<=Y`.
+-   No two ranges in a spec should intersect. (`A..B` and `C..D` intersect if
+    `B >= C && A <= D`.)
 
 If the parameter fails to meet these criteria, then the server may choose not to
 satisfy the parameterised identifier. Otherwise, the server can satisfy the
diff --git a/spec/amp-cors-requests.md b/docs/spec/amp-cors-requests.md
similarity index 89%
rename from spec/amp-cors-requests.md
rename to docs/spec/amp-cors-requests.md
index 4be2ad783ac50..e0d0a9f0164c6 100644
--- a/spec/amp-cors-requests.md
+++ b/docs/spec/amp-cors-requests.md
@@ -23,17 +23,17 @@ aspects of using CORS in AMP. To learn about CORS itself, see the
 
 <div class="noshowtoc">
 
-- [Why do I need CORS for my own origin?](#why-do-i-need-cors-for-my-own-origin-)
-- [Utilizing cookies for CORS requests](#utilizing-cookies-for-cors-requests)
-- [CORS security in AMP](#cors-security-in-amp)
-  - [Verify CORS requests](#verify-cors-requests)
-    - [1) Allow requests for specific CORS origins](#1-allow-requests-for-specific-cors-origins)
-    - [2) Allow same-origin requests](#2-allow-same-origin-requests)
-  * [Send CORS response headers](#send-cors-response-headers)
-    - [Access-Control-Allow-Origin: &lt;origin&gt;](#access-control-allow-origin-origin)
-  * [Processing state changing requests](#processing-state-changing-requests)
-  - [Example walkthrough: Handing CORS requests and responses](#example-walkthrough-handing-cors-requests-and-responses)
-  - [Testing CORS in AMP](#testing-cors-in-amp)
+-   [Why do I need CORS for my own origin?](#why-do-i-need-cors-for-my-own-origin-)
+-   [Utilizing cookies for CORS requests](#utilizing-cookies-for-cors-requests)
+-   [CORS security in AMP](#cors-security-in-amp)
+    -   [Verify CORS requests](#verify-cors-requests)
+        -   [1) Allow requests for specific CORS origins](#1-allow-requests-for-specific-cors-origins)
+        -   [2) Allow same-origin requests](#2-allow-same-origin-requests)
+    *   [Send CORS response headers](#send-cors-response-headers)
+        -   [Access-Control-Allow-Origin: &lt;origin&gt;](#access-control-allow-origin-origin)
+    *   [Processing state changing requests](#processing-state-changing-requests)
+    -   [Example walkthrough: Handing CORS requests and responses](#example-walkthrough-handing-cors-requests-and-responses)
+    -   [Testing CORS in AMP](#testing-cors-in-amp)
 
 </div>
 
@@ -142,13 +142,13 @@ Endpoints should only allow requests from: (1) the publisher's own origin; and
 
 For example, endpoints should allow requests from:
 
-- Google AMP Cache subdomain: `https://<publisher's domain>.cdn.ampproject.org` <br>(for example, `https://nytimes-com.cdn.ampproject.org`)
+-   Google AMP Cache subdomain: `https://<publisher's domain>.cdn.ampproject.org` <br>(for example, `https://nytimes-com.cdn.ampproject.org`)
 
 {% call callout('Read on', type='read') %}
 For information on AMP Cache URL formats, see these resources:
 
-- [Google AMP Cache Overview](https://developers.google.com/amp/cache/overview)
-  {% endcall %}
+-   [Google AMP Cache Overview](https://developers.google.com/amp/cache/overview)
+    {% endcall %}
 
 #### 2) Allow same-origin requests
 
@@ -175,7 +175,7 @@ This header is a <a href="https://www.w3.org/TR/cors/">W3 CORS Spec</a> requirem
 
 Although the W3 CORS spec allows the value of <code>\*</code> to be returned in the response, for improved security, you should:
 
-- If the `Origin` header is present, validate and echo the value of the <code>`Origin`</code> header.
+-   If the `Origin` header is present, validate and echo the value of the <code>`Origin`</code> header.
 
 ### Processing state changing requests
 
@@ -192,8 +192,8 @@ following:
 1.  If the origin does not match one of the following values, stop and return an error
     response:
 
-    - `<publisher's domain>.cdn.ampproject.org`
-    - the publisher's origin (aka yours)
+    -   `<publisher's domain>.cdn.ampproject.org`
+    -   the publisher's origin (aka yours)
 
     where `*` represents a wildcard match, and not an actual asterisk ( \* ).
 
@@ -224,8 +224,8 @@ Let's walk though these scenarios with an example. In our example, we manage the
 
 Based on what we know about CORS and AMP (from [Verify CORS requests](#verify-cors-requests) above), for our example we will allow requests from the following domains:
 
-- `example.com` --- Publisher's domain
-- `example-com.cdn.ampproject.org` --- Google AMP Cache subdomain
+-   `example.com` --- Publisher's domain
+-   `example-com.cdn.ampproject.org` --- Google AMP Cache subdomain
 
 ### Response headers for allowed requests
 
@@ -295,7 +295,7 @@ function assertCors(req, res, opt_validMethods, opt_exposeHeaders) {
 }
 ```
 
-**Note**: For a working code sample, see [amp-cors.js](https://github.com/ampproject/amphtml/blob/master/build-system/server/amp-cors.js).
+**Note**: For a working code sample, see [amp-cors.js](https://github.com/ampproject/amphtml/blob/main/build-system/server/amp-cors.js).
 
 ### Scenario 1: Get request from AMP page on same origin
 
@@ -361,8 +361,8 @@ typically for fonts, by respecting the origin’s `Access-Control-Allow-Origin`
 
 When an AMP page was loading `https://example.com/some/font.ttf` from `@font-face src` attribute, AMP Cache will cache the font file and serve the resource as below with having the wild card `Access-Control-Allow-Origin`.
 
-- URL `https://example-com.cdn.ampproject.org/r/s/example.com/some/font.tff`
-- Access-Control-Allow-Origin: \*
+-   URL `https://example-com.cdn.ampproject.org/r/s/example.com/some/font.tff`
+-   Access-Control-Allow-Origin: \*
 
 ### New behavior (October 2019 and after)
 
@@ -405,9 +405,9 @@ We are planning to make this change around mid October 2019 and would expect eve
 
 #### Roll out plan
 
-- 2019-09-30: release contains more precise control over which domains this change applies to. This build should roll out over the course of this week.
-- 2019-10-07: test domains will be enabled for manual testing.
-- 2019-10-14: (but depending on how testing goes): the feature will be rolled out generally.
+-   2019-09-30: release contains more precise control over which domains this change applies to. This build should roll out over the course of this week.
+-   2019-10-07: test domains will be enabled for manual testing.
+-   2019-10-14: (but depending on how testing goes): the feature will be rolled out generally.
 
 Follow the related [issue here.](https://github.com/ampproject/amphtml/issues/24834)
 
@@ -423,8 +423,8 @@ To ensure your cached AMP page renders and functions correctly:
 
     For example:
 
-    - URL: `https://amp.dev/documentation/guides-and-tutorials/start/create/`
-    - AMP Cache URL format: `https://www-ampproject-org.cdn.ampproject.org/c/s/www.ampproject.org/docs/tutorials/create.html`
+    -   URL: `https://amp.dev/documentation/guides-and-tutorials/start/create/`
+    -   AMP Cache URL format: `https://www-ampproject-org.cdn.ampproject.org/c/s/www.ampproject.org/docs/tutorials/create.html`
 
 1.  Open your browser's development tools and verify that there are no errors and that all resources loaded correctly.
 
diff --git a/spec/amp-css-classes.md b/docs/spec/amp-css-classes.md
similarity index 83%
rename from spec/amp-css-classes.md
rename to docs/spec/amp-css-classes.md
index 6f7612190f96d..d9844198295c1 100644
--- a/spec/amp-css-classes.md
+++ b/docs/spec/amp-css-classes.md
@@ -22,9 +22,9 @@ This document describes AMP CSS classes prefixed with `amp-`. These classes allo
 
 AMP provides the following CSS classes that are set on the document's `body` to assist with some typical desktop and mobile cases:
 
-- `amp-mode-touch`: This class is set when AMP detects touch input.
-- `amp-mode-mouse`: This class is set when AMP detects mouse input.
-- `amp-mode-keyboard-active`: This class is set when AMP detects that the keyboard is active.
+-   `amp-mode-touch`: This class is set when AMP detects touch input.
+-   `amp-mode-mouse`: This class is set when AMP detects mouse input.
+-   `amp-mode-keyboard-active`: This class is set when AMP detects that the keyboard is active.
 
 ## Component-specific classes
 
diff --git a/spec/amp-email-actions-and-events.md b/docs/spec/amp-email-actions-and-events.md
similarity index 89%
rename from spec/amp-email-actions-and-events.md
rename to docs/spec/amp-email-actions-and-events.md
index f2beba07e0299..30aa246f26a43 100644
--- a/spec/amp-email-actions-and-events.md
+++ b/docs/spec/amp-email-actions-and-events.md
@@ -169,6 +169,26 @@ event.value</pre>
   </tr>
 </table>
 
+### amp-accordion > section <a name="amp-accordion"></a>
+
+<table>
+  <tr>
+    <th width="25%">Event</th>
+    <th width="35%">Description</th>
+    <th width="40%">Data</th>
+  </tr>
+  <tr>
+    <td><code>expand</code></td>
+    <td>Fired when an accordion section expands.</td>
+    <td>None.</td>
+  </tr>
+  <tr>
+    <td><code>collapse</code></td>
+    <td>Fired when an accordion section collapses.</td>
+    <td>None.</td>
+  </tr>
+</table>
+
 ### amp-carousel[type="slides"] <a name="amp-carouseltypeslides"></a>
 
 <table>
@@ -350,6 +370,27 @@ event.response</pre></td>
   </tr>
 </table>
 
+### amp-accordion <a name="amp-accordion-1"></a>
+
+<table>
+  <tr>
+    <th>Action</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td><code>toggle(section=STRING)</code></td>
+    <td>Toggles the <code>expanded</code> and <code>collapsed</code> states of <code>amp-accordion</code> sections. When called with no arguments, it toggles all sections of the accordion. Trigger on a specific section by providing the section id: <code>on="tap:myAccordion.toggle(section='section-id')"</code>.
+  </tr>
+  <tr>
+    <td><code>expand(section=STRING)</code></td>
+    <td>Expands the sections of the accordion. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. Trigger on a specific section by providing the section id: <code>on="tap:myAccordion.expand(section='section-id')"</code>.</td>
+  </tr>
+  <tr>
+    <td><code>collapse(section=STRING)</code></td>
+    <td>Collapses the sections of the accordion. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. Trigger on a specific section by providing the section id: <code>on="tap:myAccordion.collapse(section='section-id')"</code>.</td>
+  </tr>
+</table>
+
 ### amp-carousel[type="slides"] <a name="amp-carouseltypeslides-1"></a>
 
 <table>
@@ -397,18 +438,16 @@ event.response</pre></td>
 
 <table>
   <tr>
-    <th width="25%">Event</th>
-    <th width="35%">Description</th>
-    <th width="40%">Data</th>
+    <th>Action</th>
+    <th>Description</th>
   </tr>
   <tr>
     <td><code>changeToLayoutContainer</code></td>
     <td>Update's <code>amp-list</code>'s layout to <code>layout="CONTAINTER"</code> to allow <a href="../extensions/amp-list/amp-list.md#dynamic-resizing">dynamic resizing</a>.</td>
   </tr>
   <tr>
-    <td><code>fetch-error</code>(low-trust)</td>
-    <td>Fired when fetching data fails.</td>
-    <td>None</td>
+    <td><code>refresh</code></td>
+    <td>Refreshes data from the <code>src</code> and re-renders the list.</td>
   </tr>
 </table>
 
@@ -503,4 +542,4 @@ actions that apply to the whole document.
   </tr>
 </table>
 
-<sup>1</sup>When used with <a href="#multiple-actions-for-one-event">multiple actions</a>, subsequent actions will wait for <code>setState()</code> or <code>pushState()</code> to complete before invocation. Only a single <code>setState()</code> or <code>pushState()</code> is allowed per event.
+<sup>1</sup>When used with <a href="#multiple-actions-for-one-event">multiple actions</a>, subsequent actions will wait for <code>setState()</code> to complete before invocation. Only a single <code>setState()</code> is allowed per event.
diff --git a/docs/spec/amp-errors.md b/docs/spec/amp-errors.md
new file mode 100644
index 0000000000000..3d055ede372d3
--- /dev/null
+++ b/docs/spec/amp-errors.md
@@ -0,0 +1,61 @@
+<!---
+Copyright 2016 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.
+-->
+
+# Error reporting in AMP
+
+AMP reports 90% of errors to the endpoint specified by the `errorReportingUrl`
+config property, with the remaining 10% reporting to the endpoint specified by
+the `betaErrorReportingUrl` config. E.g. for `cdn.ampproject.org`
+
+-   90%: `https://us-central1-amp-error-reporting.cloudfunctions.net/r`
+-   10%: `https://us-central1-amp-error-reporting.cloudfunctions.net/r-beta`
+
+The following fields are reported:
+
+-   `v=string` - AMP version
+-   `m=string` - the error message
+-   `a=1` - whether the error is labeled as "user" error (as opposed to a "dev" error).
+-   `ex=1` - whether the error is labeled as "expected".
+-   `3p=1` - whether the error occured in the 3p context.
+-   `ca=1` - whether this is a canary version of AMP.
+-   `or=string` - the ancestor origin if available.
+-   `iem=1` - whether this document is iframed.
+-   `rvu=string` - the viewer URL, provided by the viewer.
+-   `mso=string` - the messaging origin for viewer communication.
+-   `el=string` - the identifier/information on the associated DOM element.
+-   `s=string` - the error stack.
+-   `f=string` - the error's file name.
+-   `l=number` - the error's line number.
+-   `c=number` - the error's column number.
+-   `r=string` - the document's referrer.
+-   `ae=string` - accumulated/correlated error messages.
+-   `fr=string` - the document's location fragment.
+
+## "Expected" errors
+
+The "expected" errors are marked with `&ex=1`.
+
+An expected error is identified by the `.expected` property on the `Error` object being `true`.
+You can use the `Log.prototype.expectedError` method to create an error that is marked
+as expected.
+
+An "expected" error is still an error, i.e. some features are disabled or not
+functioning fully because of it. However, it's an expected error. E.g. as is the
+case with some browser API missing (storage).
+
+Thus, the error can be classified differently by log aggregators. The main goal
+is to monitor that an "expected" error doesn't deteriorate over time. It's
+impossible to completely eliminate it.
diff --git a/docs/spec/amp-framework-hosting.md b/docs/spec/amp-framework-hosting.md
new file mode 100644
index 0000000000000..70bc2f2a030fd
--- /dev/null
+++ b/docs/spec/amp-framework-hosting.md
@@ -0,0 +1,324 @@
+# Hosting the AMP framework
+
+You can host the AMP framework and components from your own server or CDN. This feature has a number of applications. For example, you can...
+
+-   set a release cadence that matches your development cycle.
+-   deliver the AMP framework in regions where `cdn.ampproject.org` may not be available.
+-   serve AMP pages and the framework from the same host, potentially improving content delivery times.
+-   test and demonstrate changes to the framework or components.
+
+The AMP Project is looking into options for [validation](https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp/) of AMP pages that use an AMP framework hosted outside of `cdn.ampproject.org` ([#27546](https://github.com/ampproject/amphtml/issues/27546)). As of April 2020, these AMP pages do not pass validation.
+
+## Versioning
+
+This document makes frequent use of the terms "version" and "runtime version (rtv)". These two versions are slightly different. When the AMP framework is built, it is assigned a 13-digit _version_. When the AMP framework is served, a config number prefixes the version, resulting in a 15-digit _runtime version_. The build system and runtime enforce these version formats.
+
+Note: The _version_ (sometimes referred to as the "AMP version number") and _runtime version_ are often confused with each other. When it matters, be explicit about the version to which you're referring by indicating 13- or 15-digits.
+
+When the AMP framework is built (either by you or by the AMP Project), a 13-digit date-based version is automatically assigned. You can find this version in `version.txt` at the root of the AMP framework distribution. Then, the easiest route to hosting the AMP framework is to prefix this version with `01` to create a 15-digit runtime version, where `01` indicates a stable release.
+
+A more complete picture of the conventions adopted by the AMP Project for the version and runtime version is below. This is more than you need to get started with hosting the AMP framework, but serves as a good reference in case you want to expand your hosting capabilities.
+
+-   Version ([#16631](https://github.com/ampproject/amphtml/pull/16631) and [#27848](https://github.com/ampproject/amphtml/pull/27848)): the commit time of the last commit in the active branch
+
+    ```
+    TZ=UTC git log -1 --pretty="%cd" --date=format-local:%y%m%d%H%M
+    ```
+
+    with three trailing digits indicating the number of cherry-picks included in the release. This version corresponds to the release versions found on [github.com/ampproject/amphtml/releases](https://github.com/ampproject/amphtml/releases).
+
+    Note: Prior to 2020-04-25, the version was based on date/time format `%y%m%d%H%M%S` with a single trailing digit – typically `0`, but could be change arbitrarily.
+
+-   Runtime version (rtv): the version prefixed by a 2-digit config code:
+
+    -   Experimental: `00`
+    -   Stable: `01`
+    -   Control: `02`
+    -   Beta: `03`
+    -   Nightly: `04`
+    -   Nightly-Control: `05`
+    -   AMP Experiments: `10`, `11`, `12`
+    -   INABOX Control and Experiments: `20`, `21`, `22`, `23`, `24`, `25`
+
+The runtime version is found in URLs and is reported in the console of browser inspectors when an AMP page loads. For example, runtime version `012004041903580` is stable version `2004041903580`.
+
+## Acquire the AMP framework
+
+The AMP framework can be built from source or downloaded pre-built. Building the framework yourself gives you the flexibility of modifying the framework for your needs and deploying changes on your own release cycle. Downloading a pre-built framework means you'll be using an unmodified release, vetted by the AMP Project for distribution.
+
+### Option 1: Build the framework yourself
+
+Refer to the [Developing in AMP](https://github.com/ampproject/amphtml/blob/main/docs/developing.md) guide to familiarize yourself with building and testing the AMP framework. Once you are comfortable with the build system, a few small changes will customize the framework to run from your host.
+
+#### Update URLs config
+
+When AMP is built, several scripts are prepended with an `AMP_CONFIG` environment variable (object) containing basic information like: runtime version, config type, experiment enable/disable status, etc. This object can be customized at build time to inform the runtime where the framework is hosted. See [build-system/global-configs/README.md](https://github.com/ampproject/amphtml/tree/main/build-system/global-configs#custom-configjson) for information about the `custom-config.json` overlay.
+
+Create JSON file `build-system/global-configs/custom-config.json` with the following contents:
+
+```
+{
+  "cdnUrl": "https://example.com/amp-framework",
+  "geoApiUrl": "https://example.com/geo-api"
+}
+```
+
+where
+
+-   `cdnUrl` is the base URL to your AMP framework. Defaults to `https://cdn.ampproject.org`.
+-   `geoApiUrl` (optional) is your amp-geo fallback API URL. This API is described in section [amp-geo hotpatching](#amp-geo-hotpatching). Defaults to `null`.
+
+Important: `build-system/global-configs/custom-config.json` is not part of checked-in source. If it exists, it _always_ applies at build time, overlaying the active config. Don't forget about it! You can verify the overlay applies by looking for log line `Overlaid config with custom-config.json` during the build process.
+
+#### Build the framework
+
+Build an AMP release with
+
+```
+amp dist
+```
+
+The built framework can be found in directory `dist`. The version assigned to the build is in `dist/version.txt` and a listing of all files included in build is in `dist/files.txt`. The framework is ready to be moved to and served from your host.
+
+If you have advanced hosting capabilities or would like to manually assign a version, `amp dist` accepts these flags (among others):
+
+-   `--config`: Indicate the release type, production (`prod`) or canary (`canary`). Defaults to `prod`.
+-   `--version_override`: Assign a version to the distribution. The version must consist of 13-digits. Defaults to the latest git commit time of the active branch.
+-   `--sourcemap_url`: Provide the base URL for JavaScript source map links. This URL should contain placeholder `{version}` that will be replaced with the actual version when the AMP framework is built, for example `https://raw.githubusercontent.com/<github-username>/amphtml/{version}/`. Defaults to `https://raw.githubusercontent.com/ampproject/amphtml/{version}/`.
+
+### Option 2: Download the framework with an AMP Toolbox tool
+
+[AMP Toolbox](https://github.com/ampproject/amp-toolbox) has both a Node.js module and a command line tool that will fetch a complete AMP framework from `cdn.ampproject.org`. Pick the tool best suited to your release workflow.
+
+-   [@ampproject/toolbox-runtime-fetch](https://github.com/ampproject/amp-toolbox/tree/main/packages/runtime-fetch) - Node.js module
+-   [@ampproject/toolbox-cli](https://github.com/ampproject/amp-toolbox/tree/main/packages/cli) - command line interface
+
+### Option 3: Manually copy the framework from cdn.ampproject.org
+
+The AMP framework can be copied from `cdn.ampproject.org`. The latest weekly release is always served from the root of `cdn.ampproject.org`. All [non-deprecated releases](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-versioning-policy.md#version-deprecations) can be found in versioned URLs: `cdn.ampproject.org/rtv/<rtv>`, where `<rtv>` is the runtime version.
+
+Note: The AMP Project is looking into options for packaging releases ([#27726](https://github.com/ampproject/amphtml/issues/27726)).
+
+#### Copy files
+
+A listing of files in each release can be found in `files.txt` at the root of the framework distribution. For example, the files included in the current weekly release are listed in [cdn.ampproject.org/files.txt](https://cdn.ampproject.org/files.txt). Use your favorite HTTP client to download all of the files in `files.txt`, retaining path structures.
+
+#### Undo amp-geo dynamic modification
+
+When you request `amp-geo-0.1.js` from `cdn.ampproject.org` using an HTTP client, the CDN detects the country where the request originated and patches `amp-geo-0.1.js` on-the-fly. This patch needs to be reversed to ensure users are not all assigned the same country when amp-geo loads.
+
+When `cdn.ampproject.org` serves `amp-geo-0.1.js`, it replaces string `{{AMP_ISO_COUNTRY_HOTPATCH}}` with an ISO 3166-1 country code or an ISO 3166-2 country-subdivision code, followed by enough spaces to maintain the length of the string being replaced. Reversal of this patch can be accomplished by a RegEx replacement: search for `/ {28}|[a-z]{2} {26}|[a-z]{2} [a-z]{2}-[a-z0-9]{1,3} {19,21}/i` and replace with `{{AMP_ISO_COUNTRY_HOTPATCH}}`.
+
+In addition to `amp-geo-0.1.js`, you may find module JS (`.mjs`) and unversioned (`amp-geo-latest.js`) variants of the same file. The same RegEx replacement should be performed in these files as well.
+
+## Modify AMP pages
+
+AMP pages should be updated to fetch all scripts from your host. For example,
+
+```
+<script async src="https://cdn.ampproject.org/v0.js"></script>
+<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
+```
+
+becomes
+
+```
+<script async src="https://example.com/amp/v0.js"></script>
+<script async custom-element="amp-carousel" src="https://example.com/amp/v0/amp-carousel-0.1.js"></script>
+```
+
+Versioned URLs are also possible and discussed in section [Serve the AMP framework](#serve-the-amp-framework).
+
+Important: All scripts must come from the same origin. Fetching scripts from multiple origins is not supported and can lead to unpredictable end user experiences.
+
+### Meta tags
+
+If you opted to download the AMP framework, then it was built under the assumption that it would be hosted from its default location, `cdn.ampproject.org`. While `<script>` tags included in the `<head>` of your AMP pages will download from the URLs specified in their `src` attributes, dynamically loaded components like `amp-loader-0.1.js` will download from `cdn.ampproject.org`. Mixing a self-hosted AMP runtime with AMP components from `cdn.ampproject.org` is not supported and can lead to unpredictable end user experiences.
+
+The default host used by the AMP runtime can be updated by including the following `<meta>` tag in the `<head>` of your AMP pages:
+
+```
+<meta name="runtime-host" content="...">
+```
+
+where the `content` attribute should contain a URL to your hosted AMP framework. Similarly, an amp-geo fallback API URL (described in section [amp-geo hotpatching](#amp-geo-hotpatching)) can be defined with the following `<meta>` tag:
+
+```
+<meta name="amp-geo-api" content="...">
+```
+
+In each case, the value of the `content` attribute should be an absolute, HTTPS URL. Importantly, **these meta tags must appear before the first `<script>` tag**. For example, if your AMP framework is hosted at `https://example.com/amp`, then your `<head>` should look similar to the following:
+
+```
+<head>
+  ...
+  <!-- This instructs the AMP runtime to update its default host -->
+  <meta name="runtime-host" content="https://example.com/amp">
+
+  <!-- (Optional) This provides a fallback API for amp-geo -->
+  <meta name="amp-geo-api" content="https://example.com/geo/get-country">
+
+  <!-- All scripts appear after the above meta tags -->
+  <script async src="https://example.com/amp/v0.js"></script>
+  <script async custom-element="amp-geo" src="https://example.com/amp/v0/amp-geo-0.1.js"></script>
+</head>
+```
+
+## Serve the AMP framework
+
+Depending on your hosting capabilities and goals, there are several options to consider when serving the AMP framework.
+
+### URLs
+
+When the AMP runtime is initialized, all components are verified to belong to the same AMP framework version as the runtime itself. This affects components that have already downloaded as well as components that are downloaded dynamically, like amp-loader. Dynamic components and components with incorrect versions are (re-)downloaded from an rtv-specific path. This has consequences on how you choose to host the runtime.
+
+#### Versioned URLs
+
+The simplest option for hosting the AMP framework is to host it from an rtv-specific path. For example, consider AMP framework host `https://example.com/amp`. Stable version `2002290616360` corresponds to runtime version `012002290616360` and should be hosted from `https://example.com/amp/rtv/012002290616360`. In this case, AMP meta and script URLs would look like the following:
+
+```
+<meta name="runtime-host" content="https://example.com/amp"> <!-- not rtv-specific -->
+<script async src="https://example.com/amp/rtv/012002290616360/v0.js"></script>
+<script async custom-element="amp-geo" src="https://example.com/amp/rtv/012002290616360/v0/amp-geo-0.1.js"></script>
+```
+
+If hosting a single AMP framework version is your end goal, then you can update your AMP pages to download the runtime and components from your host and skip to section [amp-geo hotpatching](#amp-geo-hotpatching). If you expect to update the AMP framework regularly, then updating rtv-specific URLs in AMP pages could be cumbersome. See the next section, [Versionless URLs](#versionless-urls), for a solution.
+
+#### Versionless URLs
+
+The AMP Project has a [weekly release channel](https://amp.dev/documentation/guides-and-tutorials/learn/spec/release-schedule/#weekly), sometimes referred to as the "evergreen" release channel. AMP pages utilize this channel by including versionless URLs to AMP scripts and styles. This is relatively easy to accomplish when hosting the AMP framework yourself. The key is to ensure that the AMP framework hosted from versionless URLs is _also_ available from rtv-specific URLs. This suggests an update strategy: first make a new AMP framework version available from rtv-specific URLs and _then_ update the AMP framework available from versionless URLs. For example, if stable AMP framework version `2002290616360` is available from `https://example.com/amp`, then it must also be available from `https://example.com/amp/rtv/012002290616360`. In this case, AMP meta and script URLs would look like the following:
+
+```
+<meta name="runtime-host" content="https://example.com/amp">
+<script async src="https://example.com/amp/v0.js"></script>
+<script async custom-element="amp-geo" src="https://example.com/amp/v0/amp-geo-0.1.js"></script>
+```
+
+If you inspect the DOM after an AMP page loads, you'll notice additional components are dynamically loaded by the runtime and use versioned URLs, for example
+
+```
+<script async custom-element="amp-auto-lightbox" data-script="amp-auto-lightbox" i-amphtml-inserted crossorigin="anonymous" src="https://example.com/amp/rtv/012002290616360/v0/amp-auto-lightbox-0.1.js"></script>
+```
+
+### Metadata
+
+The AMP Project hosts a metadata endpoint at [cdn.ampproject.org/rtv/metadata](https://cdn.ampproject.org/rtv/metadata) that returns information on current releases. Hosting this endpoint yourself is optional, but may be useful if you use [AMP Toolbox](https://github.com/ampproject/amp-toolbox):
+
+-   [@ampproject/toolbox-runtime-version](https://github.com/ampproject/amp-toolbox/tree/main/packages/runtime-version) uses the data to determine the latest AMP framework version available.
+-   [@ampproject/toolbox-optimizer](https://github.com/ampproject/amp-toolbox/tree/main/packages/optimizer) uses the data to identify the boilerplate CSS that should be included in optimized AMP pages.
+-   [@ampproject/toolbox-runtime-fetch](https://github.com/ampproject/amp-toolbox/tree/main/packages/runtime-fetch) uses the data to identify an rtv-specific path from which the framework should be downloaded.
+
+Consider the following sample from [cdn.ampproject.org/rtv/metadata](https://cdn.ampproject.org/rtv/metadata), most JSON properties are optional:
+
+```
+{
+  "ampRuntimeVersion": "012002192257490",
+  "ampCssUrl": "https://cdn.ampproject.org/rtv/012002192257490/v0.css",
+  "canaryPercentage": "0.005",
+  "diversions": ["002002251816300", "032002251816300", "022002192257490"],
+  "ltsRuntimeVersion": "012002191527100",
+  "ltsCssUrl": "https://cdn.ampproject.org/rtv/012002191527100/v0.css"
+}
+```
+
+The properties are defined as follows:
+
+-   `ampRuntimeVersion` (required) is the current stable runtime version of the AMP framework.
+-   `ampCssUrl` (optional) is a URL to the boilerplate CSS for the current stable runtime version.
+-   `canaryPercentage` (optional) indicates the fraction of users who receive the experimental runtime version of the AMP framework instead of the current stable runtime version.
+-   `diversions` (optional) lists active non-stable runtime versions.
+-   `ltsRuntimeVersion` (optional) is the current [long-term stable](https://github.com/ampproject/amphtml/blob/main/docs/lts-release.md) runtime version.
+-   `ltsCssUrl` (optional) is a URL to the boilerplate CSS for the current long-term stable runtime version.
+
+### amp-geo hotpatching
+
+[amp-geo](https://amp.dev/documentation/components/amp-geo/) requires special attention when hosting the AMP framework. When `cdn.ampproject.org` serves any of `amp-geo-0.1.js`, `amp-geo-0.1.mjs`, `amp-geo-latest.js`, or `amp-geo-latest.mjs`, it detects the country and subdivision where the request originated and replaces string `{{AMP_ISO_COUNTRY_HOTPATCH}}` with region data and enough trailing spaces to maintain the original string length. Ideally, when hosting the AMP framework, your content distribution platform would perform the same manipulation. The logic is as follows:
+
+-   If country could not be determined, substitute 28 spaces:
+    ```
+    Before: "{{AMP_ISO_COUNTRY_HOTPATCH}}"
+    After:  "                            "
+    ```
+-   If country could be determined, substitute the ISO 3166-1 alpha-2 country code followed by 26 spaces:
+    ```
+    Before: "{{AMP_ISO_COUNTRY_HOTPATCH}}"
+    After:  "xx                          "
+    ```
+    where `xx` is the country code (e.g. `de` for Germany).
+-   If country and subdivision could be determined and are exactly `us` (United States) and `ca` (California), respectively (this is the only subdivision supported by amp-geo as of this writing), substitute the ISO 3166-1 alpha-2 country code _and_ the ISO 3166-2 country-subdivision code followed by 20 spaces:
+    ```
+    Before: "{{AMP_ISO_COUNTRY_HOTPATCH}}"
+    After:  "us us-ca                    "
+    ```
+
+#### amp-geo fallback API
+
+If location detection and file modification at time of delivery are not possible, amp-geo supports use of an API to fetch the user's country at run time. Be aware that usage of an API for this feature increases the chances of visible content or style shifts due to the delay of an additional network request. The AMP Project does not provide this API service; you need to supply your own API. Two example providers (not a comprehensive list) that offer IP-to-country databases from which an API could be created include [MaxMind](https://www.maxmind.com) and [IP2Location](https://www.ip2location.com/).
+
+The API must meet the following requirements:
+
+-   Satisfy [CORS security in AMP](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-cors-requests.md)
+-   Be secure (HTTPS)
+-   Return `application/json` content conforming to the following schema:
+    ```
+    {
+      "$schema": "http://json-schema.org/draft-07/schema#",
+      "type": "object",
+      "properties": {
+        "country": {
+          "type": "string",
+          "title": "ISO 3166-1 alpha-2 (case insensitive) country code of client request",
+          "default": "",
+          "pattern": "^[a-zA-Z]{2}$"
+        },
+        "subdivision": {
+          "type": "string",
+          "title": "Subdivision part of ISO 3166-2 (case insensitive) country-subdivision code of client request",
+          "default": "",
+          "pattern": "^[a-zA-Z0-9]{1,3}$"
+        }
+      },
+      "required": [
+        "country"
+      ]
+    }
+    ```
+
+A sample response for a user in Germany looks like:
+
+```
+{
+  "country": "de"
+}
+```
+
+A sample response for a user in California, US looks like:
+
+```
+{
+  "country": "us",
+  "subdivision": "ca"
+}
+```
+
+Note: As of April 2020, `us-ca` is the only subdivision supported by amp-geo.
+
+There are trade-offs in accuracy and performance when you set the client cache time for this API. Longer cache times are better for performance on subsequent page loads but can lead to incorrect country detection. For reference, `https://cdn.ampproject.org/v0/amp-geo-0.1.js` has a client cache time of 30 minutes.
+
+### HTTP response headers
+
+In addition to following [TLS best practices](https://infosec.mozilla.org/guidelines/web_security), consider the following headers when hosting the AMP framework:
+
+-   `content-security-policy`: If your pages implement [AMP's CSP](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/secure-pages/), apply a matching content security policy to your hosted framework responses. Inspect the headers on `https://cdn.ampproject.org/v0.js` for a base policy that should be expanded to include resources served from your host.
+-   `access-control-allow-origin`: Some runtime components are fetched via XHR. If your AMP pages will be served from a different host than your framework, be sure to include CORS headers (see also [CORS Requests in AMP](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-cors-requests.md)).
+-   `content-type`: There are a few resources served without file extensions, or with extensions that may not be recognized by all web servers. In addition to [common types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types), you may want to include special handling for the following:
+
+    -   `/rtv/metadata` - `application/json`
+    -   `/amp_preconnect_polyfill_404_or_other_error_expected._Do_not_worry_about_it` - `text/html`
+
+    A complete list of files in each AMP release can be found in `files.txt`, for example `https://cdn.ampproject.org/files.txt`.
+
+-   `cache-control`: The AMP framework hosted from versioned URLs should be "immutable"; users should expect to find the same content from these URLs for as long as the URLs are active (amp-geo is an exception, see below). Long cache times are appropriate. On the other hand, the AMP framework hosted from versionless URLs should be served with relatively short cache times so that minimal time is required for your latest update to reach all users.
+    -   Versioned URL example: `cdn.ampproject.org` sets a 1 year client cache time on resources served under `cdn.ampproject.org/rtv/<rtv>`: `cache-control: public, max-age=31536000`.
+    -   Versionless URL example: `cdn.ampproject.org` sets a 50 minute client cache time for resources served from versionless URLs, but also allows a long 2 week stale-while-revalidate time in the event that versionless URLs experience an outage: `cache-control: private, max-age=3000, stale-while-revalidate=1206600`.
+    -   `amp-geo-*.(m)js`: If amp-geo hotpatching is utilized, there is a trade-off in accuracy and performance when you set this cache time. Longer cache times are better for performance on subsequent page loads but can lead to incorrect country detection. Both `cdn.ampproject.org/v0/amp-geo-0.1.js` and `cdn.ampproject.org/rtv/<rtv>/v0/amp-geo-0.1.js` set the client cache time to 30 minutes.
diff --git a/spec/amp-html-components.md b/docs/spec/amp-html-components.md
similarity index 82%
rename from spec/amp-html-components.md
rename to docs/spec/amp-html-components.md
index 4e08f7efca53a..b639139d7d7f2 100644
--- a/spec/amp-html-components.md
+++ b/docs/spec/amp-html-components.md
@@ -21,10 +21,10 @@ limitations under the License.
 The AMP runtime defines a small set of custom elements that can be used in any
 AMP file. These custom elements serve two primary purposes:
 
-- Enable the AMP runtime to manage the loading of external resources, which may
-  slow down the initial render or cause jank.
-- Allow AMP authors to include functionality above and beyond standard HTML,
-  while maintaining the security- and performance-minded requirement that no author-written JavaScript is executed.
+-   Enable the AMP runtime to manage the loading of external resources, which may
+    slow down the initial render or cause jank.
+-   Allow AMP authors to include functionality above and beyond standard HTML,
+    while maintaining the security- and performance-minded requirement that no author-written JavaScript is executed.
 
 The initial set of elements included in the AMP spec is purposefully minimal,
 to keep the payload small. The AMP runtime also allows dynamic loading of additional
@@ -135,19 +135,19 @@ The AMP runtime itself will only build-in the most commonly-used components - ad
 
 The collection of official AMP components is open-source and open to contributions. To be considered for inclusion into the official AMP components, a contributed component must:
 
-- Use only the API surface area publicly specified by the AMP runtime to work.
-- Be open-sourceable with an Apache 2 license and not minified or obfuscated.
-- Have its behavior completely controllable by the runtime - e.g. not attempt to load resources outside of a timeframe allowed by the AMP runtime.
-- Have a fixed, known aspect ratio at initial page load, except if placed at the bottom of the page.
-- Not attempt to access or manipulate objects outside of the component's immediate ownership - e.g. elements that are not specified by or children of the component.
-- Not cause an AMP file to become invalid as per the AMP specification
-- The author of the component must sign the [Contributor License Agreement](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#contributor-license-agreement).
+-   Use only the API surface area publicly specified by the AMP runtime to work.
+-   Be open-sourceable with an Apache 2 license and not minified or obfuscated.
+-   Have its behavior completely controllable by the runtime - e.g. not attempt to load resources outside of a timeframe allowed by the AMP runtime.
+-   Have a fixed, known aspect ratio at initial page load, except if placed at the bottom of the page.
+-   Not attempt to access or manipulate objects outside of the component's immediate ownership - e.g. elements that are not specified by or children of the component.
+-   Not cause an AMP file to become invalid as per the AMP specification
+-   The author of the component must sign the [Contributor License Agreement](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#contributor-license-agreement).
 
 In the near-term, implementation will focus on the core components, before prioritizing extensibility. The long-term goal of the runtime though is to support this extensibility.
 
 #### Contributing Components
 
-Components may be contributed using the [process for significant changes to AMP](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#process-for-significant-changes).
+Components may be contributed using the [process for significant changes to AMP](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#process-for-significant-changes).
 
 #### Service-specific Components
 
@@ -171,6 +171,6 @@ In these cases, services may set up endpoints that produce data that conforms to
 
 ## Components
 
-Built-in components include [amp-img](../builtins/amp-img.md), [amp-layout](../builtins/amp-layout.md) and [amp-pixel](../builtins/amp-pixel.md).
+Built-in components include [amp-img](../builtins/amp-img/amp-img.md), [amp-layout](../builtins/amp-layout/amp-layout.md) and [amp-pixel](../builtins/amp-pixel/amp-pixel.md).
 
 AMP HTML extensions include [extended components](../extensions) and extended templates.
diff --git a/spec/amp-html-format.md b/docs/spec/amp-html-format.md
similarity index 81%
rename from spec/amp-html-format.md
rename to docs/spec/amp-html-format.md
index 932d0d979a4bf..c18af98e92ea0 100644
--- a/spec/amp-html-format.md
+++ b/docs/spec/amp-html-format.md
@@ -28,11 +28,11 @@ If you're primarily interested in what's allowed in AMP and what isn't, watch ou
 
 Also, AMP HTML documents can be uploaded to a web server and served just like any other HTML document; no special configuration for the server is necessary. However, they are also designed to be optionally served through specialized AMP serving systems that proxy AMP documents. These documents serve them from their own origin and are allowed to apply transformations to the document that provide additional performance benefits. An incomplete list of optimizations such a serving system might do is:
 
-- Replace image references with images sized to the viewer’s viewport.
-- Inline images that are visible above the fold.
-- Inline CSS variables.
-- Preload extended components.
-- Minify HTML and CSS.
+-   Replace image references with images sized to the viewer’s viewport.
+-   Inline images that are visible above the fold.
+-   Inline CSS variables.
+-   Preload extended components.
+-   Minify HTML and CSS.
 
 AMP HTML uses a set of contributed but centrally managed and hosted custom elements to implement advanced functionality such as image galleries that might be found in an AMP HTML document. While it does allow styling the document using custom CSS, it does not allow author written JavaScript beyond what is provided through the custom elements to reach its performance goals.
 
@@ -43,9 +43,9 @@ By using the AMP format, content producers are making the content in AMP files a
 Predictable performance is a key design goal for AMP HTML. Primarily we are aiming at reducing the time until the content of a page can be consumed / used by the user.
 In concrete terms this means that:
 
-- HTTP requests necessary to render and fully layout the document should be minimized.
-- Resources such as images or ads should only be downloaded if they are likely to be seen by the user.
-- Browsers should be able to calculate the space needed by every resource on the page without fetching that resource.
+-   HTTP requests necessary to render and fully layout the document should be minimized.
+-   Resources such as images or ads should only be downloaded if they are likely to be seen by the user.
+-   Browsers should be able to calculate the space needed by every resource on the page without fetching that resource.
 
 ## The AMP HTML format
 
@@ -169,14 +169,14 @@ In concrete terms this means that:
 
 AMP HTML documents MUST
 
-- <a name="dctp"></a>start with the doctype `<!doctype html>`. [🔗](#dctp)
-- <a name="ampd"></a>contain a top-level `<html ⚡>` tag (`<html amp>` is accepted as well). [🔗](#ampd)
-- <a name="crps"></a>contain `<head>` and `<body>` tags (They are optional in HTML). [🔗](#crps)
-- <a name="canon"></a>contain a `<link rel="canonical" href="$SOME_URL">` tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists. [🔗](#canon)
-- <a name="chrs"></a>contain a `<meta charset="utf-8">` tag as the first child of their head tag. [🔗](#chrs)
-- <a name="vprt"></a>contain a `<meta name="viewport" content="width=device-width">` tag inside their head tag. It's also recommended to include `minimum-scale=1` and `initial-scale=1`. [🔗](#vprt)
-- <a name="scrpt"></a>contain a `<script async src="https://cdn.ampproject.org/v0.js"></script>` tag inside their head tag. [🔗](#scrpt)
-- <a name="boilerplate"></a>contain the [AMP boilerplate code](amp-boilerplate.md) (`head > style[amp-boilerplate]` and `noscript > style[amp-boilerplate]`) in their head tag. [🔗](#boilerplate)
+-   <a name="dctp"></a>start with the doctype `<!doctype html>`. [🔗](#dctp)
+-   <a name="ampd"></a>contain a top-level `<html ⚡>` tag (`<html amp>` is accepted as well). [🔗](#ampd)
+-   <a name="crps"></a>contain `<head>` and `<body>` tags (They are optional in HTML). [🔗](#crps)
+-   <a name="canon"></a>contain a `<link rel="canonical" href="$SOME_URL">` tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists. [🔗](#canon)
+-   <a name="chrs"></a>contain a `<meta charset="utf-8">` tag as the first child of their head tag. [🔗](#chrs)
+-   <a name="vprt"></a>contain a `<meta name="viewport" content="width=device-width">` tag inside their head tag. It's also recommended to include `minimum-scale=1` and `initial-scale=1`. [🔗](#vprt)
+-   <a name="scrpt"></a>contain a `<script async src="https://cdn.ampproject.org/v0.js"></script>` tag inside their head tag. [🔗](#scrpt)
+-   <a name="boilerplate"></a>contain the [AMP boilerplate code](amp-boilerplate.md) (`head > style[amp-boilerplate]` and `noscript > style[amp-boilerplate]`) in their head tag. [🔗](#boilerplate)
 
 ### Metadata
 
@@ -268,11 +268,11 @@ HTML tags can be used unchanged in AMP HTML. Certain tags have equivalent custom
   </tr>
   <tr>
     <td width="30%">link</td>
-    <td><code>rel</code> values registered on <a href="http://microformats.org/wiki/existing-rel-values">microformats.org</a> are allowed. If a <code>rel</code> value is missing from our white list, <a href="https://github.com/ampproject/amphtml/issues/new">please submit an issue</a>. <code>stylesheet</code> and other values like <code>preconnect</code>, <code>prerender</code> and <code>prefetch</code> that have side effects in the browser are disallowed. There is a special case for fetching stylesheets from white listed font providers.</td>
+    <td><code>rel</code> values registered on <a href="http://microformats.org/wiki/existing-rel-values">microformats.org</a> are allowed. If a <code>rel</code> value is missing from our allowlist, <a href="https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Bug&template=bug-report.yml">please file a bug report</a>. <code>stylesheet</code> and other values like <code>preconnect</code>, <code>prerender</code> and <code>prefetch</code> that have side effects in the browser are disallowed. There is a special case for fetching stylesheets from allowlisted font providers.</td>
   </tr>
   <tr>
     <td width="30%">meta</td>
-    <td>The <code>http-equiv</code> attribute may be used for specific allowable values; see the <a href="https://github.com/ampproject/amphtml/blob/master/validator/validator-main.protoascii">AMP validator specification</a> for details.</td>
+    <td>The <code>http-equiv</code> attribute may be used for specific allowable values; see the <a href="https://github.com/ampproject/amphtml/blob/main/validator/validator-main.protoascii">AMP validator specification</a> for details.</td>
   </tr>
   <tr>
     <td width="30%"><code><a name="ancr"></a>a</code></td>
@@ -284,7 +284,7 @@ HTML tags can be used unchanged in AMP HTML. Certain tags have equivalent custom
   </tr>
 </table>
 
-Validator implementations should use a white list based on the HTML5 specification with the above tags removed. See [AMP Tag Addendum](amp-tag-addendum.md).
+Validator implementations should use an allowlist based on the HTML5 specification with the above tags removed. See [AMP Tag Addendum](amp-tag-addendum.md).
 
 ### Comments
 
@@ -312,7 +312,7 @@ Certain ID names are disallowed in AMP HTML, such as IDs prefixed with `-amp-` a
 
 Consult the AMP documentation for specific extensions before using `amp-` and `AMP` IDs to avoid conflict with the features provided by these extensions, such as `amp-access`.
 
-View the full list of disallowed ID names by searching for `mandatory-id-attr` [here](../validator/validator-main.protoascii).
+View the full list of disallowed ID names by searching for `mandatory-id-attr` [here](../../validator/validator-main.protoascii).
 
 ### Links
 
@@ -352,14 +352,12 @@ Usage of the `!important` qualifier is not allowed. This is a necessary requirem
 
 #### Properties
 
-AMP only allows transitions and animations of properties that can be GPU accelerated in common browsers. We currently white list: `opacity`, `transform` (also `-vendorPrefix-transform`).
+AMP only allows transitions and animations of properties that can be GPU accelerated in common browsers. We currently allow: `opacity`, `transform` (also `-vendorPrefix-transform`).
 
-In the following examples `<property>` needs to be in the white list above.
+In the following examples `<property>` needs to be in the allowed list above.
 
-- `transition <property>` (also -vendorPrefix-transition)
-- `@keyframes name { from: {<property>: value} to {<property: value>} }` (also `@-vendorPrefix-keyframes`)
-
-`overflow` (and `overflow-y`, `overflow-x`) may not be styled as “auto” or “scroll”. No user defined element in an AMP document may have a scrollbar.
+-   `transition <property>` (also -vendorPrefix-transition)
+-   `@keyframes name { from: {<property>: value} to {<property: value>} }` (also `@-vendorPrefix-keyframes`)
 
 #### Maximum size
 
@@ -392,7 +390,7 @@ Example:
 
 ### Custom fonts
 
-Authors may include stylesheets for custom fonts. The 2 supported methods are link tags pointing to white listed font providers and `@font-face` inclusion.
+Authors may include stylesheets for custom fonts. The 2 supported methods are link tags pointing to allowlisted font providers and `@font-face` inclusion.
 
 Example:
 
@@ -403,12 +401,12 @@ Example:
 />
 ```
 
-Font providers can be white listed if they support CSS-only integrations and serve over HTTPS. The following origins are currently allowed for font serving via link tags:
+Font providers can be allowlisted if they support CSS-only integrations and serve over HTTPS. The following origins are currently allowed for font serving via link tags:
 
-- Fonts.com: `https://fast.fonts.net`
-- Google Fonts: `https://fonts.googleapis.com`
-- Font Awesome: `https://maxcdn.bootstrapcdn.com`
-- [Typekit](https://helpx.adobe.com/typekit/using/google-amp.html): `https://use.typekit.net/kitId.css` (replace `kitId` accordingly)
+-   Fonts.com: `https://fast.fonts.net`
+-   Google Fonts: `https://fonts.googleapis.com`
+-   Font Awesome: `https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com`
+-   [Typekit](https://helpx.adobe.com/typekit/using/google-amp.html): `https://use.typekit.net/kitId.css` (replace `kitId` accordingly)
 
 IMPLEMENTERS NOTE: Adding to this list requires a change to the AMP Cache CSP rule.
 
@@ -470,10 +468,10 @@ Example: `on="tap:fooId"`
 
 Some actions, if documented, may accept arguments. The arguments are defined between parentheses in `key=value` notation. The accepted values are:
 
-- simple unquoted strings: `simple-value`;
-- quoted strings: `"string value"` or `'string value'`;
-- boolean values: `true` or `false`;
-- numbers: `11` or `1.1`.
+-   simple unquoted strings: `simple-value`;
+-   quoted strings: `"string value"` or `'string value'`;
+-   boolean values: `true` or `false`;
+-   numbers: `11` or `1.1`.
 
 You can listen to multiple events on an element by separating the two events with a semicolon `;`.
 
@@ -574,18 +572,20 @@ All AMP template elements must go through AMP security review before they can be
 
 Currently, the following SVG elements are allowed:
 
-- basics: "g", "glyph", "glyphRef", "image", "marker", "metadata", "path", "solidcolor", "svg", "switch", "view"
-- shapes: "circle", "ellipse", "line", "polygon", "polyline", "rect"
-- text: "text", "textPath", "tref", "tspan"
-- rendering: "clipPath", "filter", "hkern", "linearGradient", "mask", "pattern", "radialGradient", "vkern"
-- special: "defs" (all children above are allowed here), "symbol", "use"
-- filter: "feColorMatrix", "feComposite", "feGaussianBlur", "feMerge", "feMergeNode", "feOffset", "foreignObject"
-- ARIA: "desc", "title"
+-   [container elements](https://svgwg.org/svg2-draft/struct.html#TermContainerElement): "clipPath", "defs", "g", "marker", "mask", "pattern", "svg", "switch", and "symbol".
+-   [structural elements](https://svgwg.org/svg2-draft/struct.html#TermStructuralElement): "defs", "g", "svg", "symbol", and "use".
+-   [graphics elements](https://svgwg.org/svg2-draft/struct.html#TermGraphicsElement): "circle", "ellipse", "foreignObject", "image", "line", "path", "polygon", "polyline", "rect", "text", "textPath", and "tspan".
+-   [text content elements](https://svgwg.org/svg2-draft/text.html#TermTextContentElement): "text", "textPath", and "tspan".
+-   [paint server elements](https://svgwg.org/svg2-draft/painting.html#TermPaintServerElement): "linearGradient", "pattern", and "radialGradient".
+-   [descriptive elements](https://svgwg.org/svg2-draft/struct.html#TermDescriptiveElement): "desc", "metadata", and "title".
+-   [filter primitive elements](https://drafts.fxtf.org/filter-effects/#filter-primitive): "feColorMatrix", "feComposite", "feGaussianBlur", "feMerge", "feMergeNode", and "feOffset".
+-   uncategorized elements: "view", and "filter".
+-   deprecated elements: ["glyph"](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/glyph), ["glyphRef"](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/glyphRef), ["hkern"](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/hkern), ["solidcolor"](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/solidcolor), ["tref"](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tref), and ["vkern"](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/vkern).
 
 As well as these attributes:
 
-- "xlink:href": only URIs starting with "#" are allowed
-- "style"
+-   "xlink:href": only URIs starting with "#" are allowed
+-   "style"
 
 ## AMP document discovery
 
diff --git a/spec/amp-html-layout.md b/docs/spec/amp-html-layout.md
similarity index 98%
rename from spec/amp-html-layout.md
rename to docs/spec/amp-html-layout.md
index 25ef70efc5da3..72798c33c97bb 100644
--- a/spec/amp-html-layout.md
+++ b/docs/spec/amp-html-layout.md
@@ -63,8 +63,8 @@ Depending on the value of the `layout` attribute, AMP component elements must ha
 
 In a few cases, if `width` or `height` are not specified, the AMP runtime can default these values as follows:
 
-- `amp-pixel`: Both `width` and `height` are defaulted to 0.
-- `amp-audio`: The default `width` and `height` are inferred from browser.
+-   `amp-pixel`: Both `width` and `height` are defaulted to 0.
+-   `amp-audio`: The default `width` and `height` are inferred from browser.
 
 ### `layout`
 
@@ -252,7 +252,7 @@ The `fallback` attribute can be set on any HTML element, not just AMP elements.
 
 ### `noloading`
 
-The `noloading` attribute indicates whether the "loading indicator" should be turned off for this element. Many AMP elements are white-listed to show a "loading indicator", which is a basic animation that shows that the element has not yet fully loaded. The elements can opt out of this behavior by adding
+The `noloading` attribute indicates whether the "loading indicator" should be turned off for this element. Many AMP elements are allow-listed to show a "loading indicator", which is a basic animation that shows that the element has not yet fully loaded. The elements can opt out of this behavior by adding
 this attribute.
 
 ## (tl;dr) Summary of Layout Requirements & Behaviors
diff --git a/docs/spec/amp-html-responsive-attributes.md b/docs/spec/amp-html-responsive-attributes.md
new file mode 100644
index 0000000000000..9ef9bfee666d3
--- /dev/null
+++ b/docs/spec/amp-html-responsive-attributes.md
@@ -0,0 +1,70 @@
+<!---
+Copyright 2021 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.
+-->
+
+# AMP HTML Responsive Attributes
+
+You can apply or remove certain attributes based on screen size. These are responsive attributes, or media attributes. On eligible components, these attributes are applied or removed based on media queries. You can also use a value without any media queries. Media queries evaluate from from left to right, applying the first matching media query. You must include a default value with no media query.
+
+[tip type="note"]
+
+Responsive attributes do not require media queries. You may apply media query eligible attributes the same as regular attributes: `attr-name="attr-value"`.
+
+[/tip]
+
+To apply this behavior to an attribute, use the following format:
+
+```html
+<amp-component
+  attr-name="(min-width: 1000px) valueOne, (min-width: 600px) valueTwo, defaultValue"
+></amp-component>
+```
+
+In the example above, if the page has a screen of `1000px` or more, it applies `valueOne`. If the width is between `999px` and `600px`, it applies `valueTwo`. When the screen is `599px` or smaller, it applies the `defaultValue`.
+
+The following `amp-base-carousel` will show `3` slides at a time when width is greater than or equal to `800px`, and `2` otherwise.
+
+[example preview="top-frame" playground="true" imports="amp-base-carousel:1.0"]
+
+```html
+<amp-base-carousel
+    width="900" height="200"
+    layout="responsive"
+    visible-count="(min-width: 800px) 3, 2">
+  <amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
+  <amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
+  <amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
+  <amp-img src="./img/orangegradient.png" layout="flex-item"></amp-img>
+  <amp-img src="./img/tealgradient.png" layout="flex-item"></amp-img>
+  <amp-img src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
+  <amp-img src="./img/lilacgradient.png" layout="flex-item"></amp-img>
+</amp-base-carousel>
+```
+
+[/example]
+
+## Eligible components
+
+You may apply responsive attribute values to the following components:
+
+-   [amp-accordion](./../extensions/amp-accordion/amp-accordion.md#animate)
+-   [amp-base-carousel](./../extensions/amp-base-carousel/amp-base-carousel.md#media-queries)
+-   [amp-fit-text](./../extensions/amp-fit-text/amp-fit-text.md#media-queries)
+-   [amp-inline-gallery-pagination](./../extensions/amp-inline-gallery/amp-inline-gallery.md#include-pagination-indicators)
+-   [amp-inline-gallery-thumbnails](./../extensions/amp-inline-gallery/amp-inline-gallery.md#include-pagination-thumbnails)
+-   [amp-lightbox](./../extensions/amp-lightbox/amp-lightbox.md#animation)
+-   [amp-selector](./../extensions/amp-selector/amp-selector.md#keyboard-select-mode)
+-   [amp-stream-gallery](./../extensions/amp-stream-gallery/amp-stream-gallery.md#media-queries)
+-   [amp-video](./../extensions/amp-video/amp-video.md#rotate-to-fullscreen)
diff --git a/spec/amp-html-templates.md b/docs/spec/amp-html-templates.md
similarity index 100%
rename from spec/amp-html-templates.md
rename to docs/spec/amp-html-templates.md
diff --git a/spec/amp-iframe-origin-policy.md b/docs/spec/amp-iframe-origin-policy.md
similarity index 89%
rename from spec/amp-iframe-origin-policy.md
rename to docs/spec/amp-iframe-origin-policy.md
index 4bf49d45ba062..35fe9d42583f8 100644
--- a/spec/amp-iframe-origin-policy.md
+++ b/docs/spec/amp-iframe-origin-policy.md
@@ -1,6 +1,6 @@
 # Iframe origin policy
 
-Various AMP features allow loading iframes from arbitrary origins into AMP pages. Examples are the [`amp-iframe`](../extensions/amp-iframe/amp-iframe.md) element and [the custom domain feature of `amp-ad`](../builtins/amp-ad.md#running-ads-from-a-custom-domain). The origin of a URL such as `https://example.com/some/path` is `https://example.com`. See [the HTML5 spec](https://www.w3.org/TR/2011/WD-html5-20110525/origin-0.html#origin) for details.
+Various AMP features allow loading iframes from arbitrary origins into AMP pages. Examples are the [`amp-iframe`](../extensions/amp-iframe/amp-iframe.md) element and [the custom domain feature of `amp-ad`](../extensions/amp-ad/amp-ad.md#running-ads-from-a-custom-domain). The origin of a URL such as `https://example.com/some/path` is `https://example.com`. See [the HTML5 spec](https://www.w3.org/TR/2011/WD-html5-20110525/origin-0.html#origin) for details.
 
 These iframes are typically allowed to execute arbitrary JavaScript, but for security reasons they are never allowed to access the AMP document itself using any method besides sending messages via postMessage.
 
diff --git a/spec/amp-localstorage.md b/docs/spec/amp-localstorage.md
similarity index 83%
rename from spec/amp-localstorage.md
rename to docs/spec/amp-localstorage.md
index 130672fc46adb..278ea61c24b5d 100644
--- a/spec/amp-localstorage.md
+++ b/docs/spec/amp-localstorage.md
@@ -53,11 +53,12 @@ The following AMP components and service are using the localStorage.
 
 \*\* Please add all future usage to the following list
 
-- `<amp-ad-network-adsense-impl>` : Store publisher ad size opt in status.
-- `<amp-app-banner>` : Store the user decision on dismiss banner
-- `<amp-user-notification>` : Store the user decision on dismiss notification
-- `<amp-consent>` : Store the user decision and granular information on consent
-- Client ID Service : Store the user decision to opt-out CID service.
+-   `<amp-ad-network-adsense-impl>` : Store publisher ad size opt in status.
+-   `<amp-app-banner>` : Store the user decision on dismiss banner
+-   `<amp-user-notification>` : Store the user decision on dismiss notification
+-   `<amp-consent>` : Store the user decision and granular information on consent
+-   Client ID Service : Store the user decision to opt-out CID service.
+-   Consent Instance : Store the user consent decision.
 
 ## Guidance on localStorage Usage in AMP
 
@@ -77,6 +78,6 @@ Please also note that AMP Viewers may have their own size limitation and impleme
 
 ## Use localStorage in AMP
 
-To use localStorage in AMP. Please [file](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=INTENT+TO+IMPLEMENT&template=intent-to-implement--i2i-.md&title=I2I%3A+%3Cyour+feature%2Fchange%3E) a Github issue. Explaning the localStorage usage case as well as how will the storage entry be calculated. Then ask @ampproject/wg-approvers for review.
+To use localStorage in AMP, please [file an I2I issue](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=INTENT+TO+IMPLEMENT&template=intent-to-implement.yml) and explain the localStorage usage case and how the storage entry will be calculated. Then ask @ampproject/wg-approvers for a review.
 
 When a usage gets approved and implemented, please update the [Current Usage session](#current-usage) for future reference.
diff --git a/spec/amp-managing-user-state.md b/docs/spec/amp-managing-user-state.md
similarity index 83%
rename from spec/amp-managing-user-state.md
rename to docs/spec/amp-managing-user-state.md
index 7c0ab7ea6ebf0..a85900b311a9a 100644
--- a/spec/amp-managing-user-state.md
+++ b/docs/spec/amp-managing-user-state.md
@@ -18,21 +18,35 @@ limitations under the License.
 
 **Table of contents**
 
-- [Background](#background)
-- [Implementation guide](#implementation-guide)
-  - [Before getting started](#before-getting-started)
-  - [Task 1: For non-AMP pages on the publisher origin, set up an identifier and send analytics pings](#task1)
-  - [Task 2: For AMP pages, set up an identifier and send analytics pings by including Client ID replacement in amp-analytics pings](#task2)
-  - [Task 3: Process analytics pings from pages on the publisher origin](#task3)
-  - [Task 4: Process analytics pings from AMP cache or AMP viewer display contexts and establish identifier mappings (if needed)](#task4)
-  - [Task 5: Using Client ID in linking and form submission](#task5)
-- [Strongly recommended practices](#strongly-recommended-practices)
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+<!-- {"maxdepth": 2} -->
+
+-   [Background](#background)
+    -   [Display contexts for AMP pages](#display-contexts-for-amp-pages)
+    -   [Multiple contexts means multiple state management](#multiple-contexts-means-multiple-state-management)
+-   [Implementation guide](#implementation-guide)
+    -   [Before getting started](#before-getting-started)
+    -   [Task 1: For non-AMP pages on the publisher origin, set up an identifier and send analytics pings](#task-1-for-non-amp-pages-on-the-publisher-origin-set-up-an-identifier-and-send-analytics-pings)
+    -   [Task 2: For AMP pages, set up an identifier and send analytics pings by including Client ID replacement in amp-analytics pings](#task-2-for-amp-pages-set-up-an-identifier-and-send-analytics-pings-by-including-client-id-replacement-in-amp-analytics-pings)
+    -   [Task 3: Process analytics pings from pages on the publisher origin](#task-3-process-analytics-pings-from-pages-on-the-publisher-origin)
+    -   [Task 4: Process analytics pings from AMP cache or AMP viewer display contexts and establish identifier mappings (if needed)](#task-4-process-analytics-pings-from-amp-cache-or-amp-viewer-display-contexts-and-establish-identifier-mappings-if-needed)
+    -   [Task 5: Using Client ID in linking and form submission](#task-5-using-client-id-in-linking-and-form-submission)
+-   [Strongly recommended practices](#strongly-recommended-practices)
+    -   [Keep just one association](#keep-just-one-association)
+    -   [Respect cookie and local storage deletions](#respect-cookie-and-local-storage-deletions)
+    -   [Comply with local laws and regulations](#comply-with-local-laws-and-regulations)
 
 User state is an important concept on today’s web. Consider the following use cases that are enabled by managing user state:
 
-- A merchant builds a useful **shopping cart** that shows a user the same items during their second visit that they had added to the cart during their first visit many weeks ago. Such an experience increases the chance of the user buying that item by making sure they remain aware of the item they considered buying in the past.
-- A news publisher who can tailor **recommended articles** to a reader based on the reader’s repeated visits to the publisher’s articles, which helps keep the reader engaged and discovering more content.
-- A website developer running any type of site collects **analytics** that can tell if two pageviews belong to the same person who saw two pages or to two different people who each saw a single page. Having this insight helps to know how the site is performing, and, ultimately, how to improve it.
+-   A merchant builds a useful **shopping cart** that shows a user the same items during their second visit that they had added to the cart during their first visit many weeks ago. Such an experience increases the chance of the user buying that item by making sure they remain aware of the item they considered buying in the past.
+-   A news publisher who can tailor **recommended articles** to a reader based on the reader’s repeated visits to the publisher’s articles, which helps keep the reader engaged and discovering more content.
+-   A website developer running any type of site collects **analytics** that can tell if two pageviews belong to the same person who saw two pages or to two different people who each saw a single page. Having this insight helps to know how the site is performing, and, ultimately, how to improve it.
 
 This article is designed to help you be more successful in **managing non-authenticated user state in AMP**, a way of providing a seamless user journey even if the user hasn’t taken an action to provide their identity, like signing in. After reviewing some of the challenges and considerations in approaching this topic, this guide outlines the ways in which user state is supported by AMP and offers recommendations on how you can approach a technical implementation.
 
@@ -44,9 +58,9 @@ The topic of user state deserves special attention in AMP because AMP pages can
 
 You can think of AMP as a portable content format that enables content to be loaded fast anywhere. AMP documents can be displayed via three noteworthy contexts:
 
-- The publisher's origin
-- An AMP cache
-- An AMP viewer
+-   The publisher's origin
+-   An AMP cache
+-   An AMP viewer
 
 <table>
   <tr>
@@ -97,7 +111,7 @@ Just like the AMP cache case, expect the domain for an AMP viewer to also be dif
 
 ### Multiple contexts means multiple state management
 
-Publishers must be prepared to manage the user state for each display context separately. AMP’s [Client ID](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#client-id) feature, which takes advantage of cookies or local storage to persist state, provides the necessary support for AMP pages to have a stable and pseudonymous identifier for the user. From an implementation point of view, either cookies or local storage are used, and AMP makes the decision which to use depending on the display context. This choice is influenced by the technical feasibility of managing this state scaled to hundreds or thousands of publishers.
+Publishers must be prepared to manage the user state for each display context separately. AMP’s [Client ID](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md#client-id) feature, which takes advantage of cookies or local storage to persist state, provides the necessary support for AMP pages to have a stable and pseudonymous identifier for the user. From an implementation point of view, either cookies or local storage are used, and AMP makes the decision which to use depending on the display context. This choice is influenced by the technical feasibility of managing this state scaled to hundreds or thousands of publishers.
 
 However, publishers of AMP pages can easily end up (unwittingly) designing user journeys that involve multiple contexts. Let’s revisit our earlier look at the shopping cart use case and add some more detail to it to make a full **user story**:
 
@@ -107,9 +121,9 @@ In this scenario, the user receives a consistent shopping cart experience even t
 
 **To enable this and any experience involving user state, all contexts the user traverses must share their individually-maintained state with each other.** “Perfect!”, you say, with the idea to share the cookie values with user identifiers across these contextual boundaries. One wrinkle: even though each of these contexts displays content controlled by the same publisher, they each see the other as a third-party because each context lives on different domains.
 
-<amp-img alt="AMP's ability to be displayed in many contexts means that each of those contexts has its own storage for identifiers" layout="responsive" src="https://github.com/ampproject/amphtml/raw/master/spec/img/contexts-with-different-storage.png" width="1030" height="868">
+<amp-img alt="AMP's ability to be displayed in many contexts means that each of those contexts has its own storage for identifiers" layout="responsive" src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/contexts-with-different-storage.png" width="1030" height="868">
   <noscript>
-    <img alt="AMP's ability to be displayed in many contexts means that each of those contexts has its own storage for identifiers" src="https://github.com/ampproject/amphtml/raw/master/spec/img/contexts-with-different-storage.png" />
+    <img alt="AMP's ability to be displayed in many contexts means that each of those contexts has its own storage for identifiers" src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/contexts-with-different-storage.png" />
   </noscript>
 </amp-img>
 
@@ -133,9 +147,9 @@ After laying the foundation, we then visit a topic with a narrower range of use
 
 In walking through the technical guidance below, let's assume that you’ll be binding **user state** to a stable **identifier** that represents the user. For example, the identifier might look like `n34ic982n2386n30`. On the server side you then associate `n34ic982n2386n30` to any set of user state information, such as shopping cart content, a list of previously read articles, or other data depending on the use case.
 
-<amp-img alt="A single identifier could be used to manage user state for many use cases" layout="responsive" src="https://github.com/ampproject/amphtml/raw/master/spec/img/identifiers-for-use-cases.png" width="1276" height="376">
+<amp-img alt="A single identifier could be used to manage user state for many use cases" layout="responsive" src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/identifiers-for-use-cases.png" width="1276" height="376">
   <noscript>
-    <img alt="A single identifier could be used to manage user state for many use cases" src="https://github.com/ampproject/amphtml/raw/master/spec/img/identifiers-for-use-cases.png" />
+    <img alt="A single identifier could be used to manage user state for many use cases" src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/identifiers-for-use-cases.png" />
   </noscript>
 </amp-img>
 
@@ -231,7 +245,7 @@ On AMP pages, construct an amp-analytics ping containing the Client ID:
 
 Take note of the fact that the parameter passed into the Client ID substitution, `${clientId(uid)`, is `uid`. This was a deliberate choice that matches the same cookie name used on the publisher origin as described in [Task 1](#task1). For the most seamless integration, you should apply the same technique.
 
-Concerning the rest of the amp-analytics implementation, see the documentation for [amp-analytics configuration](https://amp.dev/documentation/guides-and-tutorials/optimize-measure/configure-analytics/) for more detail on how to set up amp-analytics requests or to modify those of your analytics vendor. The ping can be further modified to transport additional data that you either directly define or by taking advantage of other [AMP substitutions](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
+Concerning the rest of the amp-analytics implementation, see the documentation for [amp-analytics configuration](https://amp.dev/documentation/guides-and-tutorials/optimize-measure/configure-analytics/) for more detail on how to set up amp-analytics requests or to modify those of your analytics vendor. The ping can be further modified to transport additional data that you either directly define or by taking advantage of other [AMP substitutions](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md).
 
 > **Good to know:**
 >
@@ -279,8 +293,8 @@ Here (1) and (2) happen on different origins (or contexts). Because of this, the
 
 To address the problem of overcounting, you should employ the following strategy, the potency of which depends on whether reading or writing of third-party cookies is permitted:
 
-- **Immediate identifier reconciliation: If you can access or change the publisher origin cookies**, use or create the publisher origin identifier and ignore any identifier within the analytics request. You will be able to successfully link activity between the two contexts.
-- **Delayed identifier reconciliation: If you cannot access or change the publisher origin identifier (i.e. the cookies)**, then fall back to the AMP Client ID that comes within the analytics request itself. Use this identifier as an “**alias**”, rather than using or creating a new publisher origin identifier (cookie), which you cannot do (because of third party cookie blocking), and add the alias to a **mapping table**. You will be unsuccessful in immediately linking activity between the two contexts, but by using a mapping table you may be able to link the AMP Client ID value with the publisher origin identifier on a future visit by the user. When this happens, you will have the needed information to link the activity and reconcile that the page visits in the different contexts came from the same user. Task 5 describes how to achieve a complete solution in specific scenarios where the user traverses from one page immediately to another.
+-   **Immediate identifier reconciliation: If you can access or change the publisher origin cookies**, use or create the publisher origin identifier and ignore any identifier within the analytics request. You will be able to successfully link activity between the two contexts.
+-   **Delayed identifier reconciliation: If you cannot access or change the publisher origin identifier (i.e. the cookies)**, then fall back to the AMP Client ID that comes within the analytics request itself. Use this identifier as an “**alias**”, rather than using or creating a new publisher origin identifier (cookie), which you cannot do (because of third party cookie blocking), and add the alias to a **mapping table**. You will be unsuccessful in immediately linking activity between the two contexts, but by using a mapping table you may be able to link the AMP Client ID value with the publisher origin identifier on a future visit by the user. When this happens, you will have the needed information to link the activity and reconcile that the page visits in the different contexts came from the same user. Task 5 describes how to achieve a complete solution in specific scenarios where the user traverses from one page immediately to another.
 
 #### Implementation steps
 
@@ -288,8 +302,8 @@ On the server check for an existing publisher origin identifier
 
 Read the cookies sent as part of the analytics request. In our example, this means checking for the `uid` cookie from example.com.
 
-- If the `uid` value is successfully read, use it to record analytics data (**analytics record identifier**). Because of [Task 1](#task1), we know this identifier’s value is `$publisher_origin_identifier`. With an analytics record identifier established, we can skip ahead to the [Data storage](#data-storage) section.
-- If the `uid` value is not successfully read, proceed with the steps below involving the mapping table.
+-   If the `uid` value is successfully read, use it to record analytics data (**analytics record identifier**). Because of [Task 1](#task1), we know this identifier’s value is `$publisher_origin_identifier`. With an analytics record identifier established, we can skip ahead to the [Data storage](#data-storage) section.
+-   If the `uid` value is not successfully read, proceed with the steps below involving the mapping table.
 
 ##### Mapping table
 
@@ -366,9 +380,9 @@ In general, when reading and writing third-party cookies is disallowed, there wi
 
 In this task, we’ll cover an additional optimization that helps when the user is navigating across contexts from one page to another page either **via linking or form submissions**. In these situations, and with the implementation work described below, it is possible to set up a fully effective scheme for managing user state across contexts.
 
-<amp-img alt="Links can be used to pass the identifier information of one context into another (linked) context" layout="responsive" src="https://github.com/ampproject/amphtml/raw/master/spec/img/link-form-identifier-forwarding.png" width="866" height="784">
+<amp-img alt="Links can be used to pass the identifier information of one context into another (linked) context" layout="responsive" src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/link-form-identifier-forwarding.png" width="866" height="784">
   <noscript>
-    <img alt="Links can be used to pass the identifier information of one context into another (linked) context" src="https://github.com/ampproject/amphtml/raw/master/spec/img/link-form-identifier-forwarding.png" />
+    <img alt="Links can be used to pass the identifier information of one context into another (linked) context" src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/link-form-identifier-forwarding.png" />
   </noscript>
 </amp-img>
 
@@ -422,9 +436,9 @@ By taking these steps, the Client ID is available to the target server and/or as
 https://example.com/step2.html?ref_id=$amp_client_id
 ```
 
-<amp-img alt="Example of how an identifier in an AMP viewer context can be passed via link into a publisher origin context" layout="responsive" src="https://github.com/ampproject/amphtml/raw/master/spec/img/link-identifier-forwarding-example-1.png" width="1038" height="890">
+<amp-img alt="Example of how an identifier in an AMP viewer context can be passed via link into a publisher origin context" layout="responsive" src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/link-identifier-forwarding-example-1.png" width="1038" height="890">
   <noscript>
-    <img alt="Example of how an identifier in an AMP viewer context can be passed via link into a publisher origin context" src="https://github.com/ampproject/amphtml/raw/master/spec/img/link-identifier-forwarding-example-1.png" />
+    <img alt="Example of how an identifier in an AMP viewer context can be passed via link into a publisher origin context" src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/link-identifier-forwarding-example-1.png" />
   </noscript>
 </amp-img>
 
@@ -438,8 +452,8 @@ If the information was exposed just to the server, e.g. via a form POST, then yo
 
 If the information is available via URL and you wish to process it, there are a couple of approaches you can use:
 
-- Process during redirect (server-side handling)
-- Process on the landing page (client-side handling)
+-   Process during redirect (server-side handling)
+-   Process on the landing page (client-side handling)
 
 **Process during redirect (server-side handling)**
 
@@ -449,9 +463,9 @@ To process during redirect, handle the request on the server and extract the rel
 
 To process on the landing page, the approach will vary depending on whether that page is an AMP page or a non-AMP page.
 
-<amp-img alt="Example of how to construct an analytics ping that contains an identifier from the previous context provided via URL and an identifier from the current context" layout="responsive" src="https://github.com/ampproject/amphtml/raw/master/spec/img/link-identifier-forwarding-example-2.png" width="1326" height="828">
+<amp-img alt="Example of how to construct an analytics ping that contains an identifier from the previous context provided via URL and an identifier from the current context" layout="responsive" src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/link-identifier-forwarding-example-2.png" width="1326" height="828">
   <noscript>
-    <img alt="Example of how to construct an analytics ping that contains an identifier from the previous context provided via URL and an identifier from the current context" src="https://github.com/ampproject/amphtml/raw/master/spec/img/link-identifier-forwarding-example-2.png" />
+    <img alt="Example of how to construct an analytics ping that contains an identifier from the previous context provided via URL and an identifier from the current context" src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/link-identifier-forwarding-example-2.png" />
   </noscript>
 </amp-img>
 
@@ -506,7 +520,7 @@ Unlike in [Task 4](#task4) where we configured the analytics ping to contain jus
 
 Before we proceed, be sure to take note of the steps described in [Parameter validation](#parameter-validation) below and ensure that you are willing to trust both of the values indicated by `orig_user_id` and `user_id`.
 
-Check if either of the values corresponding to is present in your mapping table. In our example above, the first pageview happens on an AMP page that’s NOT on the publisher origin followed by the second pageview that happens on the publisher origin. As a result, the values for the analytics ping query parameters will look like this:
+Check if either of the values corresponding to the inbound analytics ping are present in your mapping table. In our example above, the first pageview happens on an AMP page that’s NOT on the publisher origin followed by the second pageview that happens on the publisher origin. As a result, the values for the analytics ping query parameters will look like this:
 
 **Case #1: Identifier arrangement when analytics ping is sent from page on publisher origin**
 
@@ -566,8 +580,8 @@ When you are searching the mapping table, take note of which situation applies a
 
 If you cannot locate either identifier value being used in your mapping table, establish a new mapping:
 
-- If the analytics request comes from a page on your publisher origin, then you should choose the value corresponding to `uid` to be the analytics record identifier; choose the value of `orig_uid` to be the “alias”.
-- If the analytics request does not come from a page on your publisher origin, then you should choose the value corresponding to `uid` to be an “alias” value in the mapping table. Then, proceed with the remaining instructions in [Task 4](#task4) to create a prospective publisher origin identifier and attempt to set this value as a cookie on the origin.
+-   If the analytics request comes from a page on your publisher origin, then you should choose the value corresponding to `uid` to be the analytics record identifier; choose the value of `orig_uid` to be the “alias”.
+-   If the analytics request does not come from a page on your publisher origin, then you should choose the value corresponding to `uid` to be an “alias” value in the mapping table. Then, proceed with the remaining instructions in [Task 4](#task4) to create a prospective publisher origin identifier and attempt to set this value as a cookie on the origin.
 
 ##### Parameter validation
 
@@ -591,7 +605,7 @@ You want to ensure that you process only instances of `$amp_client_id` and avoid
 
 On a non-AMP page, check `document.referrer` directly on the client side or pass the value on as part of the analytics ping to be able to validate on the server side. If the referrer value is one you can trust, then you can accept and process values that originated from the URL of the landing page, such as `orig_user_id` in the example above.
 
-On an AMP page, use the [Document Referrer](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#document-referrer) substitution variable to pass along the referrer value as part of the analytics ping. Server side processing is the only available option. To illustrate, here’s an analytics ping that the landing page can send that contains (1) the Client ID value of the current page, (2) a value passed via URL that we’ve set up to be the Client ID value in the referring page, and (3) the referrer information itself to validate the value of (2): `https://analytics.example.com/ping?type=pageview&orig_user_id=${queryParam(ref_id)}&user_id=${clientId(uid)}&referrer=${documentReferrer}`
+On an AMP page, use the [Document Referrer](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md#document-referrer) substitution variable to pass along the referrer value as part of the analytics ping. Server side processing is the only available option. To illustrate, here’s an analytics ping that the landing page can send that contains (1) the Client ID value of the current page, (2) a value passed via URL that we’ve set up to be the Client ID value in the referring page, and (3) the referrer information itself to validate the value of (2): `https://analytics.example.com/ping?type=pageview&orig_user_id=${queryParam(ref_id)}&user_id=${clientId(uid)}&referrer=${documentReferrer}`
 
 If you cannot trust the referrer, then reject any values provided via URL parameters and do not use them.
 
diff --git a/spec/amp-shadow-doc.md b/docs/spec/amp-shadow-doc.md
similarity index 82%
rename from spec/amp-shadow-doc.md
rename to docs/spec/amp-shadow-doc.md
index ad6aa758ab602..02ab0928cbd62 100644
--- a/spec/amp-shadow-doc.md
+++ b/docs/spec/amp-shadow-doc.md
@@ -87,17 +87,17 @@ The `options` argument is optional and can provide configuration parameters for
 
 Both `AMP.attachShadowDoc` and `AMP.attachShadowDocAsStream` return a `ShadowDoc` object that provides numerous ways for interracting with attached AMP documents. This object exposes the following methods and properties:
 
-- `shadowDoc.writer` - the writer that can be used to stream the AMP document. Only available for `attachShadowDocAsStream`.
-- `shadowDoc.url` - the URL used in the `attachShadowDoc` or `attachShadowDocAsStream`.
-- `shadowDoc.title` - the title of the AMP document.
-- `shadowDoc.canonicalUrl` - the canonical URL of the AMP document.
-- `shadowDoc.ampdoc` - the instance of the AMP document.
-- `shadowDoc.ampdoc.whenReady()` - returns a promise when the AMP document has been fully rendered.
-- `shadowDoc.setVisibilityState()` - changes the visibility state of the AMP document.
-- `shadowDoc.postMessage()` and `shadowDoc.onMessage()` - can be used to message with the AMP document.
-- `shadowDoc.close()` - closes the AMP document, frees the resources, and returns a promise that resolves when cleanup is complete.
-- `shadowDoc.getState(expr)` - Get an `amp-bind` state from the AMP document using a JSON expression string, e.g. `foo.bar`
-- `shadowDoc.setState(state)` - Deep merge an object into the AMP document's global `amp-bind` state. `state` can be passed as either an `Object` or an expression string matching the syntax used by `amp-bind` in `on="AMP.setState()` attributes.
+-   `shadowDoc.writer` - the writer that can be used to stream the AMP document. Only available for `attachShadowDocAsStream`.
+-   `shadowDoc.url` - the URL used in the `attachShadowDoc` or `attachShadowDocAsStream`.
+-   `shadowDoc.title` - the title of the AMP document.
+-   `shadowDoc.canonicalUrl` - the canonical URL of the AMP document.
+-   `shadowDoc.ampdoc` - the instance of the AMP document.
+-   `shadowDoc.ampdoc.whenReady()` - returns a promise when the AMP document has been fully rendered.
+-   `shadowDoc.setVisibilityState()` - changes the visibility state of the AMP document.
+-   `shadowDoc.postMessage()` and `shadowDoc.onMessage()` - can be used to message with the AMP document.
+-   `shadowDoc.close()` - closes the AMP document, frees the resources, and returns a promise that resolves when cleanup is complete.
+-   `shadowDoc.getState(expr)` - Get an `amp-bind` state from the AMP document using a JSON expression string, e.g. `foo.bar`
+-   `shadowDoc.setState(state)` - Deep merge an object into the AMP document's global `amp-bind` state. `state` can be passed as either an `Object` or an expression string matching the syntax used by `amp-bind` in `on="AMP.setState()` attributes.
 
 ## Shadow DOM API and polyfills
 
diff --git a/docs/spec/amp-story-player.md b/docs/spec/amp-story-player.md
new file mode 100644
index 0000000000000..1e1c4d061ae10
--- /dev/null
+++ b/docs/spec/amp-story-player.md
@@ -0,0 +1,771 @@
+---
+$category@: presentation
+formats:
+  - stories
+teaser:
+  text: A player for embedding and playing your favorite stories in your own website.
+---
+
+<!--
+Copyright 2020 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.
+-->
+
+# <a name="`amp-story-player`"></a> `amp-story-player`
+
+<table>
+  <tr>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/carousel-cards-entry-point.png?raw=true"></td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/player-in-recipe.png?raw=true"></td>
+<td><img src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/amp-story-player.gif?raw=true"></td>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <td width="40%"><strong>Description</strong></td>
+    <td>Embed and play stories in a non-AMP website.</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>Required Scripts</strong></td>
+    <td>
+    <code>&lt;script async src="https://cdn.ampproject.org/amp-story-player-v0.js">&lt;/script></code>
+    <br> <br>
+    <code>&lt;link href="https://cdn.ampproject.org/amp-story-player-v0.css" rel='stylesheet' type='text/css'></code>
+    </td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>Examples</strong></td>
+    <td>
+      <li>See <a href="https://github.com/ampproject/amphtml/blob/main/examples/amp-story/player.html">code snippet</a>.</li>
+    </td>
+  </tr>
+</table>
+
+[TOC]
+
+## Usage
+
+Use `amp-story-player` to embed and play stories within a webpage.
+
+### Embed in a non-AMP page
+
+The code snippet below demonstrates an embed of `<amp-story-player>` in a non-AMP webpage.
+
+[example preview="top-frame" playground="true"]
+
+```html
+<head>
+  <script
+    async
+    src="https://cdn.ampproject.org/amp-story-player-v0.js"
+  ></script>
+  <link
+    href="https://cdn.ampproject.org/amp-story-player-v0.css"
+    rel="stylesheet"
+    type="text/css"
+  />
+</head>
+<body>
+  <amp-story-player style="width: 360px; height: 600px;" amp-cache="cdn.ampproject.org">
+    <a
+      href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp/"
+    >
+      <img src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg" width="360" height="600" loading="lazy" amp-story-player-poster-img>
+    </a>
+  </amp-story-player>
+</body>
+```
+
+[/example]
+
+### Attributes
+
+The inline width and height ensures that the player will not cause any jumps in your website while the script is being loaded. Feel free to modify the values, but we recommend maintaining a 3:5 aspect ratio.
+
+#### style [recommended]
+
+Inline CSS properties for the width and height of the player. e.g. `style="width: 360px; height: 600px;"`
+
+#### amp-cache
+
+e.g. `<amp-story-player amp-cache="cdn.ampproject.org">`
+
+If specified, the player will rewrite the URL using the AMP Cache prefix provided. Currently there are two AMP Cache providers:
+
+-   `cdn.ampproject.org`
+-   `www.bing-amp.com`
+
+## Specify embedded stories
+
+The `<amp-story-player>` component contains one or more `<a>` tags. Point the href attribute of each to the story URL.
+
+Place the story's title within the `<a>` tag. This provides a better user experience and allows search engines to crawl embedded stories.
+
+Use a poster image as a placeholder to display to users while the story loads. To do this, add an image tag as a child of the `<a>` tag with the following configuration: `<img src= "" loading="lazy" width="360" height="600" data-amp-story-player-poster-img></img>`.
+
+### Attributes
+
+#### href
+
+URL pointing to the story.
+
+## Display Story Attribution
+
+<img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/story-attribution.png?raw=true">
+
+The story attribution displays the entity or publisher's name and logo. When clicked, it will navigate the user to either the entity's URL or the publisher's canonical domain.
+
+To display the attribution on the stories, use the player's `display` and `attribution` options. See the JSON configuration below.
+
+The data will come from the `<amp-story>`'s metadata attributes in the story's document as described:
+
+-   For the logo: the `entity-logo-src` attribute (if provided), otherwise the `publisher-logo-src` attribute.
+-   For the string of text: the `entity` attribute (if provided), otherwise the `publisher` attribute.
+-   When the attribution is clicked, it will navigate the user to a URL. This will come from `entity-url` attribute if provided, otherwise it will use the story's canonical domain.
+
+Read more about these attibutes on the [Metadata Guidelines of `amp-story`.](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/amp-story.md#metadata-guidelines)
+
+### JSON Configuration
+
+Here's the JSON configuration to display the story attribution:
+
+```html
+<amp-story-player>
+  <script type="application/json">
+  {
+    "display": {
+      "attribution": "auto"
+    }
+  }
+</script>
+ <a href="./story1.html"> ... </a>
+ <a href="./story2.html"> ... </a>
+  ...
+```
+
+## Programmatic Control
+
+Call the player's various methods to programmatically control the player. These methods are exposed on the HTML element, `const playerEl = document.querySelector('amp-story-player')`.
+
+### Methods
+
+#### load
+
+Will initialize the player manually. This can be useful when creating the player dynamically.
+
+Note that the amp-story-player JS will automatically do this when the player is already in the HTML markup, so only do this when you really need to.
+
+Also note that the element must be connected to the DOM before calling `load()`.
+
+```javascript
+const playerEl = document.createElement('amp-story-player');
+new AmpStoryPlayer(window, playerEl);
+document.body.appendChild(playerEl);
+playerEl.load();
+```
+
+#### go
+
+**Parameters**
+
+-   number: the story in the player to which you want to move, relative to the current story.
+-   number (optional): the page of the story to which you want to move, relative to the current page.
+-   {animate: boolean} (optional): options for the navigation (animate: whether to animate the story transition).
+
+If the player is currently on the third story out of five stories:
+
+-   `player.go(1)` will go forward one story to the fourth story
+-   `player.go(-1)` will go backward one story to the second story
+-   `player.go(-1, 1)` will go backward one story and navigate one page backwards
+-   `player.go(0, 5)` will stay in the current story and navigate 5 pages forward
+-   `player.go(1, 0, {animate: false})` will go to the next page without the swipe animation
+
+#### show
+
+**Parameters**
+
+-   string or null: the URL of the story to show.
+-   string (optional): the ID attribute of the page element.
+-   {animate: boolean} (optional): options for the navigation (animate: whether to animate the story transition).
+
+Will change the current story being displayed by the player.
+
+```javascript
+player.show('cool-story.html'); // Will display cool-story.html
+player.show('cool-story.html', 'page-4'); // Will display cool-story.html and switch to page-4
+player.show(null, 'page-4'); // Stay on current story and switch to page-4
+player.show('cool-story.html', null, {animate: false}); // Will display cool-story.html without the swipe animation
+```
+
+#### rewind
+
+**Parameters**
+
+-   string: the URL of the story to rewind.
+
+Will rewind the provided story to the first page.
+
+```javascript
+player.show('story-2.html');
+player.rewind('story-1.html'); // Will rewind story-1 to the first page.
+```
+
+#### add
+
+**Parameters**
+
+-   array of story objects
+
+Each story object contains the following properties:
+
+-   href string: story URL
+-   title string (optional): story title, to be added to the anchor's title
+-   posterImage string (optional): a URL for the story poster. Used as a placeholder while the story loads.
+
+The player will rewrite the URL using the AMP Cache prefix if provided in the [player level attribute](#amp-cache).
+
+```javascript
+player.add([
+ {href: '/stories/1', title: 'A great story', posterImage: 'poster1.png'},
+ {href: '/stories/2', posterImage: 'poster2.png'},
+ {href: '/stories/3'},
+]);
+```
+
+#### mute/unmute
+
+Will mute/unmute the current story. This will not persist across stories, eg. calling `player.mute()` on the first story will not mute the second story.
+
+Please note that due to browser restrictions on autoplaying media with sound, the default state is muted and the story cannot be unmuted unless the user manually unmuted previously. Only webviews explicitly allowing autoplaying media with sound can use `unmute()` right away.
+
+```javascript
+player.mute();
+player.unmute();
+```
+
+#### play/pause
+
+Will play/pause the current story. This will affect e.g. page auto-advancement or media playing.
+
+```javascript
+player.play();
+player.pause();
+```
+
+#### getStoryState
+
+**Parameters**
+
+-   string: the story state, currently only `page-attachment`.
+
+Will cause a custom event to be fired, see `page-attachment-open` and `page-attachment-close`.
+
+```javascript
+player.getStoryState('page-attachment');
+```
+
+## Autoplay
+
+By default, the first story in the player will automatically start playing when the player becomes visible in the user's viewport.
+
+You can opt-out of the default behavior by using the configuration below. This will prevent the first story in the player to start playing until you call [play()](#play/pause) on the player.
+
+### JSON Configuration
+
+Here's the JSON configuration for opting out of autoplay:
+
+```html
+<amp-story-player>
+  <script type="application/json">
+  {
+    "behavior": {
+      "autoplay": false
+    }
+  }
+</script>
+ <a href="./story1.html"> ... </a>
+ <a href="./story2.html"> ... </a>
+  ...
+```
+
+## Page Scrolling
+
+By default, the player will scroll the page it's embedded in so that users don't get stuck when scrolling through the player.
+
+-   Players embedded in a document's content need this enabled so they don't block user scrolling.
+-   Players displayed full screen on a device (eg: lightbox) need this disabled so the page does not scroll in the background.
+
+You can opt-out of the default behavior by using the configuration below. This will prevent the player from scrolling the page.
+
+### JSON Configuration
+
+Here's the JSON configuration for opting out of page scrolling:
+
+```html
+<amp-story-player>
+  <script type="application/json">
+  {
+    "behavior": {
+      "pageScroll": false
+    }
+  }
+</script>
+ <a href="./story1.html"> ... </a>
+ <a href="./story2.html"> ... </a>
+  ...
+```
+
+## Programmatically fetching more stories
+
+You can create an “infinite scroll” experience by fetching more stories as the user navigates through them in your player. Simply use the new JSON configuration to specify an endpoint, and the player will automatically fetch more stories as it gets closer to the last story in the player.
+
+### JSON Configuration
+
+Here’s an example of how the configuration looks:
+
+```html
+<amp-story-player>
+ <script type="application/json">
+   {
+     "behavior": {
+       "on": "end",
+       "action": "fetch",
+       "endpoint": "https://example.com/my-endpoint.json?offset=${offset}"
+     }
+   }
+ </script>
+ <a href="./story1.html"> ... </a>
+ <a href="./story2.html"> ... </a>
+  ...
+```
+
+</amp-story-player>
+
+The configuration must be a direct child of the <amp-story-player> element, with the `type=”application/json”` attribute.
+
+The `endpoint` property of the url takes in an optional variable `${offset}` that you can add as a parameter, which you can use for pagination.
+
+### Response
+
+The expected response payload coming from the endpoint should be a JSON containing an array of Story objects, the structure is described below.
+
+#### href
+
+The URL where your story is located.
+
+#### title (optional)
+
+The title of your story.
+
+#### posterImage (optional)
+
+The poster image of your story.
+
+Example:
+
+```json
+[
+  {
+    "href": "https://example.com/story3.html",
+    "title": "My third cool story", // optional
+    "posterImage": "https://example.com/assets/story3.png" // optional
+  },
+  {
+    "href": "https://example.com/story4.html",
+    "title": "My fourth cool story", // optional
+    "posterImage": "https://example.com/assets/story4.png" // optional
+  }
+]
+```
+
+## Circular Wrapping
+
+Circular wrapping enables users to go back to the first story when they finish the last one. To do this, use the JSON configuration with the `circular-wrapping` action.
+
+### JSON Configuration
+
+Here’s an example of how the configuration looks:
+
+```html
+<amp-story-player>
+ <script type="application/json">
+   {
+     "behavior": {
+       "on": "end",
+       "action": "circular-wrapping"
+     }
+   }
+ </script>
+ <a href="./story1.html"> ... </a>
+ <a href="./story2.html"> ... </a>
+  ...
+</amp-story-player>
+```
+
+The configuration must be a direct child of the <amp-story-player> element, with the `type=”application/json”` attribute.
+
+## Customizing position & visibility of story UI controls
+
+You can now customize controls of the story UI with a variety of options. These include new buttons, changing the position (start or end), among others.
+
+See [examples](#Example-#1---Close-button-on-the-start-position) below to get an idea of what you can do.
+
+<table>
+  <tr>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/close-button-left.png?raw=true"></td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/close-and-skip-next.png?raw=true"></td>
+<td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/close-button-custom-background.png?raw=true"></td>
+  </tr>
+</table>
+
+To configure them, specify a JSON configuration with the `type=”application/json”` attribute as a child of the `<amp-story-player>` element.
+
+Inside the configuration, specify an array of “controls”. The “controls” structure is described below.
+
+The configuration will end up looking like the following:
+
+```html
+<amp-story-player>
+
+ <script type="application/json">
+   {
+     "controls": [
+       {
+         "name": "close",
+         "position": "start"
+       },
+       {
+         "name": "skip-to-next"
+       }
+     ]
+   }
+ </script>
+
+<a href="./story1.html"> ... </a>
+<a href="./story2.html"> ... </a>
+</amp-story-player>
+```
+
+### Close
+
+Specify a control object with the “close” name to get the close icon.
+
+-   `event`: The close button dispatches the `amp-story-player-close` event.
+
+The “close” control supports the following customizable properties:
+
+-   `position`: “start” or “end”.
+    -   Places the icon either on the left or right on LTR languages.
+-   `visibility`: “hidden” or “visible” (default).
+    -   Toggles the control’s visibility. If omitted, the default is visible.
+    -   See [Example #2 - Showing skip-to-next story on desktop.](#Example-#2---Showing-skip-to-next-story-on-desktop)
+-   `backgroundImageUrl`: string with url or data string (escaped).
+    -   Changes the icon image to the provided url or data string (for inline svgs).
+
+### Skip-to-next
+
+Skips to the next story inside the player (only available on desktop).
+
+The “skip-to-next” control supports the following customizable properties:
+
+-   `position`: “start” or “end”.
+    -   Places the icon either on the left or right on LTR languages.
+-   `visibility`: “hidden” or “visible” (default).
+    -   Toggles the control’s visibility. If omitted, the default is visible.
+-   `backgroundImageUrl`: string with url or data string (escaped).
+    -   Changes the icon image to the provided url or data string (for inline svgs).
+
+### Custom control
+
+You can add a custom control to the stories inside the player with a custom control. Simply specify a “name” and an “backgroundImageUrl”, and any optional properties:
+
+-   `name` (**required**): a string with the name of the control. e.g. “lightbox”. **The dispatched event will depend on this name.** The custom event will be the name of the control prefixed with `amp-story-player-*`. E.g. `amp-story-player-lightbox`:
+
+```javascript
+const player = document.body.querySelector("amp-story-player");
+
+// Listen to when the specified control was clicked.
+player.addEventListener("amp-story-player-lightbox", () => {
+  // This will trigger when the control with the "lightbox" name is clicked.
+  performCustomAction();
+});
+```
+
+-   `backgroundImageUrl` (**required**): Accepts URLs, as well as svgs and `data` paths (note that strings must be JSON escaped). See [example 3](#Example-#3---Changing-the-icon-of-the-close-button).
+    -   Changes the control icon.
+-   `position`: “start” or “end”.
+    -   Places the icon either on the left or right on LTR languages.
+-   `visibility`: “hidden” or “visible” (default).
+    -   Toggles the control’s visibility. If omitted, the default is visible.
+
+### Example #1 - Close button on the start position
+
+Since by default the close button will be placed to the end, all we have to do is move the close button to the start.
+
+<table>
+  <tr>
+    <td>
+      <pre lang="html">
+<amp-story-player>
+ <script type="application/json">
+   {
+     "controls": [
+       {
+         "name": "close",
+         "position": "start"
+       }
+     ],
+   }
+ </script>
+ ...
+</amp-story-player>
+      </pre>
+    </td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/lightbox-close-button.png?raw=true"></td>
+  </tr>
+</table>
+
+### Example #2 - Showing skip-to-next story on desktop
+
+On desktop, you can now display a button that navigates from the current story to the next one. It will also automatically be disabled once the user reaches the end of the stories in the player.
+
+<table>
+  <tr>
+    <td>
+      <pre lang="html">
+<amp-story-player>
+ <script type="application/json">
+   {
+     "controls": [
+       {
+         "name": "skip-to-next"
+       }
+     ],
+   }
+ </script>
+ ...
+</amp-story-player>
+      </pre>
+    </td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/skip-next-desktop.png?raw=true"></td>
+  </tr>
+</table>
+
+### Example #3 - Changing the icon of the close button
+
+<table>
+  <tr>
+    <td>
+      <pre lang="html">
+<amp-story-player>
+ <script type="application/json">
+   {
+     "controls": [
+       {
+         "name": "close",
+         "backgroundImageUrl": "data:image\/svg+xml;charset=utf-8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.77778 9.33333H4V4H9.33333V5.77778H5.77778V9.33333ZM4 14.6667H5.77778V18.2222H9.33333V20H4V14.6667ZM18.2222 18.2222H14.6667V20H20V14.6667H18.2222V18.2222ZM14.6667 5.77778V4H20V9.33333H18.2222V5.77778H14.6667Z\" fill=\"white\"\/><\/svg>",
+         "position": "start"
+       }
+     ]
+   }
+ </script>
+ ...
+</amp-story-player>
+      </pre>
+    </td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/close-button-custom-background.png?raw=true"></td>
+  </tr>
+</table>
+
+## Custom Events
+
+#### ready
+
+Fired when the player is ready for interaction. There is also a sync property `isReady` that can be used to avoid race conditions.
+
+```javascript
+player.addEventListener('ready', () => {
+  console.log('Player is ready!!');
+})
+
+if (player.isReady) {
+   console.log('Player is ready!');
+}
+```
+
+#### amp-story-player-touchstart
+
+Fired when the player detects a touchstart event.
+
+```javascript
+player.addEventListener('amp-story-player-touchstart', (event) => {
+  console.log('Coordinates:', event.detail.coordinates);
+})
+```
+
+#### amp-story-player-touchmove
+
+Fired when the player detects a touchmove event.
+
+```javascript
+player.addEventListener('amp-story-player-touchmove', (event) => {
+  console.log('Coordinates:', event.detail.coordinates);
+})
+```
+
+This event also provides a `isNavigationalSwipe` property, which tells if the player is using this touch event for navigation.
+
+```js
+player.addEventListener("amp-story-player-touchmove", (event) => {
+    if (
+      event.detail.isNavigationalSwipe ||
+      event.detail.isNavigationalSwipe === null
+    ) {
+      // Ignore when swiping to next story.
+      return;
+    }
+
+    // Do something else when not navigating.
+
+});
+```
+
+#### amp-story-player-touchend
+
+Fired when the player detects a touchend event.
+
+```javascript
+player.addEventListener('amp-story-player-touchend', () => {
+  console.log('touchend');
+})
+```
+
+This event also provides a `isNavigationalSwipe` property, which tells if the player is using this touch event for navigation.
+
+```js
+player.addEventListener("amp-story-player-touchend", (event) => {
+    if (
+      event.detail.isNavigationalSwipe ||
+      event.detail.isNavigationalSwipe === null
+    ) {
+      // Ignore when swiping to next story.
+      return;
+    }
+
+    // Do something else when not navigating.
+
+});
+```
+
+#### amp-story-muted-state
+
+Fired when the story is muted/unmuted. This event provides an `muted` property.
+
+```javascript
+player.addEventListener('amp-story-muted-state', (event) => {
+  console.log('muted state', event.detail.muted);
+})
+```
+
+#### navigation
+
+Fired when the player changes to a new story and provides the `index`, the player's story after changing, and `remaining`, the number of stories left.
+
+```javascript
+player.addEventListener('navigation', (event) => {
+  console.log(`Navigated to story with index ${event.detail.index}`);
+  console.log('Stories remaining in the player:', event.detail.remaining);
+})
+```
+
+#### storyNavigation
+
+Fired when the story inside the player changes to a new page. It provides the `pageId` and `progress` of the story. The progress is the completion percentage of the story represented as a number between 0 and 1.
+
+```javascript
+player.addEventListener('storyNavigation', (event) => {
+  console.log('User navigated from one page to the other.');
+  console.log('Current page id:', event.detail.pageId); // page-2
+  console.log('Story progress:', event.detail.progress); // Number from 0 to 1.
+})
+```
+
+#### noNextStory
+
+Dispatched when there is no next story. Note that this will not be dispatched when using [Circular wrapping](#Circular-wrapping).
+
+```javascript
+player.addEventListener('noNextStory', (event) => {
+  console.log('User is tapping on the last page and there are no more stories.');
+});
+```
+
+#### noPreviousStory
+
+Dispatched when there is no next story. Note that this will not be dispatched when using [Circular wrapping](#Circular-wrapping).
+
+```javascript
+player.addEventListener('noPreviousStory', () => {
+  console.log('User is tapping back on the first page and there are no more stories.');
+});
+```
+
+#### amp-story-player-close
+
+Fired when the exit control close button is clicked.
+
+```javascript
+player.addEventListener('amp-story-player-close', () => {
+  console.log('Close button clicked');
+})
+```
+
+#### page-attachment-open
+
+Fired when a page attachment is opened or `getStoryState('page-attachment')` was called and the story's page attachment is open.
+
+```javascript
+player.addEventListener('page-attachment-open', () => {
+  console.log('The page attachment is open');
+})
+```
+
+#### page-attachment-close
+
+Fired when a page attachment is closed or `getStoryState('page-attachment')` was called and the story's page attachment is closed.
+
+```javascript
+player.addEventListener('page-attachment-close', () => {
+  console.log('The page attachment is closed');
+})
+```
+
+### Example
+
+This makes use of `page-attachment-close`, `page-attachment-open` and `amp-story-player-back`.
+
+```javascript
+player.addEventListener('page-attachment-close', () => {
+  textEl.style.backgroundColor = 'blue';
+})
+player.addEventListener('page-attachment-open', () => {
+  textEl.style.backgroundColor = 'red';
+})
+player.addEventListener('amp-story-back', () => {
+  textEl.style.backgroundColor = 'green';
+})
+```
+
+![Example featuring exit control](img/amp-story-player-toggle-exit.gif)
diff --git a/spec/amp-tag-addendum.md b/docs/spec/amp-tag-addendum.md
similarity index 100%
rename from spec/amp-tag-addendum.md
rename to docs/spec/amp-tag-addendum.md
diff --git a/docs/spec/amp-var-substitutions.md b/docs/spec/amp-var-substitutions.md
new file mode 100644
index 0000000000000..94cee4e8130f0
--- /dev/null
+++ b/docs/spec/amp-var-substitutions.md
@@ -0,0 +1,1390 @@
+<!---
+Copyright 2015 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.
+-->
+
+# AMP HTML URL Variable Substitutions
+
+## Overview
+
+Various AMP features allow variables to be used inside of strings and substituted with the corresponding actual values. For example, `amp-pixel` allows expressions like this:
+
+```html
+<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
+```
+
+`RANDOM` gets resolved to a randomly generated value and AMP replaces it in the request string:
+
+```http
+https://foo.com/pixel?0.8390278471201
+```
+
+The following table lists the features that enable variable substitutions, as well as several properties that govern usage:
+
+<table>
+  <tr>
+    <th width="25%"><strong>AMP Feature</strong></th>
+    <th width="25%"><strong>URL limitations</strong></th>
+    <th width="25%"><strong>Requires <a href="#per-use-opt-in">per-use opt-in</a>?</strong></th>
+    <th width="25%"><strong>Restrictions</strong></th>
+  </tr>
+  <tr>
+    <td width="25%"><code>amp-analytics</code><br><a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-analytics.md#vars">Detailed documentation</a></td>
+    <td width="25%">Requests must be HTTPS URLs (not a requirement specific to variable substitutions)</td>
+    <td width="25%">No</td>
+    <td width="25%">None</td>
+  </tr>
+  <tr>
+    <td width="25%"><code>amp-list</code><br><a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-list/amp-list.md#substitutions">Detailed documentation</a></td>
+    <td width="25%">Requests must be HTTPS URLs (not a requirement specific to variable substitutions)</td>
+    <td width="25%">Yes, if fetching cross-origin resources via <code>[src]</code> <a href="https://amp.dev/documentation/components/amp-bind#element-specific-attributes">attribute binding</a>. Otherwise, no. Read more about <a href="#per-use-opt-in">per-use opt-in</a></td>
+    <td width="25%">None</td>
+  </tr>
+  <tr>
+    <td width="25%"><code>amp-pixel</code><br><a href="https://github.com/ampproject/amphtml/blob/main/builtins/amp-pixel/amp-pixel.md#substitutions">Detailed documentation</a></td>
+    <td width="25%">Requests must be HTTPS URLs (not a requirement specific to variable substitutions)</td>
+    <td width="25%">No</td>
+    <td width="25%">None</td>
+  </tr>
+  <tr>
+    <td width="25%"><code>amp-state</code><br><a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-bind/amp-bind.md#attributes">Detailed documentation</a></td>
+    <td width="25%">Requests must be HTTPS URLs (not a requirement specific to variable substitutions)</td>
+    <td width="25%">Yes, if fetching cross-origin resources via <code>[src]</code> <a href="https://amp.dev/documentation/components/amp-bind#element-specific-attributes">attribute binding</a>. Otherwise, no. Read more about <a href="#per-use-opt-in">per-use opt-in</a></td>
+    <td width="25%">None</td>
+  </tr>
+  <tr>
+    <td width="25%">Links (<code>&lt;a&gt;</code>)</td>
+    <td width="25%">
+      HTTPS URL and URL matching either:
+      <ul>
+        <li>Page’s source origin</li>
+        <li>Page’s canonical origin</li>
+        <li>An origin allowlisted via the <code>amp-link-variable-allowed-origin</code> <code>meta</code> tag</li>
+      </ul>
+    </td>
+    <td width="25%">Yes, via space-delimited attribute <code>data-amp-replace</code>. Read more about <a href="#per-use-opt-in">per-use opt-in</a></td>
+    <td width="25%">Only these variables are supported: <code>CLIENT_ID</code> and <code>QUERY_PARAM</code>.<br>See the section on <a href="#substitution-timing">"substitution timing"</a> for further notes</td>
+  </tr>
+  <tr>
+    <td width="25%">Form inputs<br><a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-form/amp-form.md#variable-substitutions">Detailed documentation</a></td>
+    <td width="25%">Requests must be HTTPS URLs (not a requirement specific to variable substitutions)</td>
+    <td width="25%">Yes, via space-delimited attribute <code>data-amp-replace</code>. Read more about <a href="#per-use-opt-in">per-use opt-in</a></td>
+    <td width="25%">See the section on <a href="#substitution-timing">"substitution timing"</a> for further notes</td>
+  </tr>
+</table>
+
+### Substitution timing
+
+Variable substitutions that are dependent on a user action like links and form inputs may not occur if the value has not yet been computed.
+
+Please take note of the following scenarios:
+
+-   `CLIENT_ID` is available once it has been computed. This can be accomplished through use by another feature such as `amp-analytics` or `amp-pixel`. Note that `CLIENT_ID` may also be blocked on an `amp-user-notification` that is pending acceptance.
+-   Asynchronously resolved variables are not available
+
+### Restrictions
+
+The `host` string of an URL does not accept variables. It fails on AMP cache.
+
+## Variable substitution in links
+
+Variable substitution is available in links, i.e. `<a href="..."></a>`.
+
+Only these variables are supported:
+
+-   `CLIENT_ID`
+-   `QUERY_PARAM(argument)`
+
+### Per-use opt-in
+
+Link substitution requires per-use opt-in as an added security measure and to affirm the intention to use variable substitution. This is done by specifying an additional attribute called `data-amp-replace` with a string value containing a space-delimited listing of the desired variables to substitute. An example is below.
+
+```html
+<a
+  href="https://example.com?client_id=CLIENT_ID(bar)&abc=QUERY_PARAM(abc)"
+  data-amp-replace="CLIENT_ID QUERY_PARAM"
+  >Go to my site</a
+>
+```
+
+#### Appending parameters to the href
+
+If you need to append dynamic parameters to the href, specify the parameters by using the `data-amp-addparams` attribute. Any substitution parameters that you specify in `data-amp-addparams` must also be specified in `data-amp-replace`, as in the following example
+
+```html
+<a
+  href="https://example.com?abc=QUERY_PARAM(abc)"
+  data-amp-replace="CLIENT_ID QUERY_PARAM"
+  data-amp-addparams="client_id=CLIENT_ID(bar)&linkid=l123"
+  >Go to my site</a
+>
+```
+
+### Allow listed domains for link substitution
+
+Link substitutions are restricted and will only be fulfilled for URLs matching:
+
+-   The page’s source origin
+-   The page’s canonical origin
+-   An allowlisted origin
+
+To allowlist an origin, include a `amp-link-variable-allowed-origin` `meta` tag in the `head` of your document. To specify multiple domains, separate each domain with a space.
+
+```html
+<meta
+  name="amp-link-variable-allowed-origin"
+  content="https://example.com https://example.org"
+/>
+```
+
+## Variables
+
+The tables below list the available URL variables grouped by type of usage. Further down in this document, are [descriptions](#variable-descriptions) of each of the variables, along with example usages.
+
+-   [Page and Content](#page-and-content)
+-   [Performance](#performance)
+-   [Device and Browser](#device-and-browser)
+-   [Interaction](#interaction)
+-   [Visibility](#visibility)
+-   [AMP Components](#amp-components)
+-   [Miscellaneous](#miscellaneous)
+
+### Page and Content
+
+| Variable Name                                   | Platform Variable    | amp-analytics Variable |
+| ----------------------------------------------- | -------------------- | ---------------------- |
+| [AMP Document Host](#amp-document-host)         | `AMPDOC_HOST`        | `${ampdocHost}`        |
+| [AMP Document Hostname](#amp-document-hostname) | `AMPDOC_HOSTNAME`    | `${ampdocHostname}`    |
+| [AMP Document URL](#amp-document-url)           | `AMPDOC_URL`         | `${ampdocUrl}`         |
+| [Canonical Host](#canonical-host)               | `CANONICAL_HOST`     | `${canonicalHost}`     |
+| [Canonical Hostname](#canonical-hostname)       | `CANONICAL_HOSTNAME` | `${canonicalHostname}` |
+| [Canonical Path](#canonical-path)               | `CANONICAL_PATH`     | `${canonicalPath}`     |
+| [Canonical URL](#canonical-url)                 | `CANONICAL_URL`      | `${canonicalUrl}`      |
+| [Counter](#counter)                             | `COUNTER`            | `${counter}`           |
+| [Document Charset](#document-charset)           | `DOCUMENT_CHARSET`   | `${documentCharset}`   |
+| [Document Referrer](#document-referrer)         | `DOCUMENT_REFERRER`  | `${documentReferrer}`  |
+| [External Referrer](#external-referrer)         | `EXTERNAL_REFERRER`  | `${externalReferrer}`  |
+| [HTML Attributes](#html-attributes)             | `HTML_ATTR`          | `${htmlAttr}`          |
+| [Source URL](#source-url)                       | `SOURCE_URL`         | `${sourceUrl}`         |
+| [Source Host](#source-host)                     | `SOURCE_HOST`        | `${sourceHost}`        |
+| [Source Hostname](#source-hostname)             | `SOURCE_HOSTNAME`    | `${sourceHostname}`    |
+| [Source Path](#source-path)                     | `SOURCE_PATH`        | `${sourcePath}`        |
+| [Title](#title)                                 | `TITLE`              | `${title}`             |
+| [Viewer](#viewer)                               | `VIEWER`             | `${viewer}`            |
+
+### Performance
+
+| Variable Name                                           | Platform Variable      | amp-analytics Variable      |
+| ------------------------------------------------------- | ---------------------- | --------------------------- |
+| [Content Load Time](#content-load-time)                 | `CONTENT_LOAD_TIME`    | `${contentLoadTime}`        |
+| [Cumulative Layout Shift](#cumulative-layout-shift)     | N/A                    | `${cumulativeLayoutShift}`  |
+| [Domain Lookup Time](#domain-lookup-time)               | `DOMAIN_LOOKUP_TIME`   | `${domainLookupTime}`       |
+| [DOM Interactive Time](#dom-interactive-time)           | `DOM_INTERACTIVE_TIME` | `${domInteractiveTime}`     |
+| [First Contentful Paint](#first-contentful-paint)       | N/A                    | `${firstContentfulPaint}`   |
+| [First Input Delay](#first-input-delay)                 | N/A                    | `${firstInputDelay}`        |
+| [Largest Contentful Paint](#largest-contentful-paint)   | N/A                    | `${largestContentfulPaint}` |
+| [Navigation Redirect Count](#navigation-redirect-count) | `NAV_REDIRECT_COUNT`   | `${navRedirectCount}`       |
+| [Navigation Timing ](#navigation-timing)                | `NAV_TIMING`           | `${navTiming}`              |
+| [Navigation Type](#navigation-type)                     | `NAV_TYPE`             | `${navType}`                |
+| [Page Download Time](#page-download-time)               | `PAGE_DOWNLOAD_TIME`   | `${pageDownloadTime}`       |
+| [Page Load Time](#page-load-time)                       | `PAGE_LOAD_TIME`       | `${pageLoadTime}`           |
+| [Redirect Time](#redirect-time)                         | `REDIRECT_TIME`        | `${redirectTime}`           |
+| [Server Response Time](#server-response-time)           | `SERVER_RESPONSE_TIME` | `${serverResponseTime}`     |
+| [TCP Connection Time](#tcp-connection-time)             | `TCP_CONNECT_TIME`     | `${tcpConnectTime}`         |
+
+### Device and Browser
+
+| Variable Name                                       | Platform Variable         | amp-analytics Variable     |
+| --------------------------------------------------- | ------------------------- | -------------------------- |
+| [Available Screen Height](#available-screen-height) | `AVAILABLE_SCREEN_HEIGHT` | `${availableScreenHeight}` |
+| [Available Screen Width](#available-screen-width)   | `AVAILABLE_SCREEN_WIDTH`  | `${availableScreenWidth}`  |
+| [Browser Language](#browser-language)               | `BROWSER_LANGUAGE`        | `${browserLanguage}`       |
+| [Screen Color Depth](#screen-color-depth)           | `SCREEN_COLOR_DEPTH`      | `${screenColorDepth}`      |
+| [Screen Height](#screen-heigth)                     | `SCREEN_HEIGHT`           | `${screenHeight}`          |
+| [Screen Width](#screen-width)                       | `SCREEN_WIDTH`            | `${screenWidth}`           |
+| [Scroll Height](#scroll-height)                     | `SCROLL_HEIGHT`           | `${scrollHeight}`          |
+| [Scroll Width](#scroll-width)                       | `SCROLL_WIDTH`            | `${scrollWidth}`           |
+| [Scroll Left](#scroll-left)                         | N/A                       | `${scrollLeft}`            |
+| [Scroll Top](#scroll-top)                           | N/A                       | `${scrollTop}`             |
+| [Timezone](#timezone)                               | `TIMEZONE`                | `${timezone}`              |
+| [Timezone Code](#timezone-code)                     | N/A                       | `${timezoneCode}`          |
+| [User Agent](#user-agent)                           | `USER_AGENT`              | `${userAgent}`             |
+| [Viewport Height](#viewport-height)                 | `VIEWPORT_HEIGHT`         | `${viewportHeight}`        |
+| [Viewport Width](#viewport-width)                   | `VIEWPORT_WIDTH`          | `${viewportWidth}`         |
+
+### Interaction
+
+| Variable Name                                             | Platform Variable          | amp-analytics Variable        |
+| --------------------------------------------------------- | -------------------------- | ----------------------------- |
+| [Horizontal Scroll Boundary](#horizontal-scroll-boundary) | N/A                        | `${horizontalScrollBoundary}` |
+| [Total Engaged Time](#total-engaged-time)                 | `TOTAL_ENGAGED_TIME`       | `${totalEngagedTime}`         |
+| [Incremental Engaged Time](#incremental-engaged-time)     | `INCREMENTAL_ENGAGED_TIME` | `${incrementalEngagedTime}`   |
+| [Vertical Scroll Boundary](#vertical-scroll-boundary)     | N/A                        | `${verticalScrollBoundary}`   |
+
+### Visibility
+
+| Variable Name                                               | Platform Variable | amp-analytics Variable        |
+| ----------------------------------------------------------- | ----------------- | ----------------------------- |
+| [Backgrounded](#backgrounded)                               | N/A               | `${backgrounded}`             |
+| [Backgrounded At Start](#backgrounded-at-start)             | N/A               | `${backgroundedAtStart}`      |
+| [Carousel From Slide](#carousel-from-slide)                 | N/A               | `${fromSlide}`                |
+| [Carousel To Slide](#carousel-to-slide)                     | N/A               | `${toSlide}`                  |
+| [Element Id](#element-id)                                   | N/A               | `${elementId}`                |
+| [Element Height](#element-height)                           | N/A               | `${elementHeight}`            |
+| [Element Width](#element-width)                             | N/A               | `${elementWidth}`             |
+| [Element X](#element-x)                                     | N/A               | `${elementX}`                 |
+| [Element Y](#element-y)                                     | N/A               | `${elementY}`                 |
+| [First Seen Time](#first-seen-time)                         | N/A               | `${firstSeenTime}`            |
+| [First Visible Time](#first-visible-time)                   | N/A               | `${firstVisibleTime}`         |
+| [Initial Scroll Depth](#initial-scroll-depth)               | N/A               | `${initialScrollDepth}`       |
+| [Intersection Ratio](#intersection-ratio)                   | N/A               | `${intersectionRatio}`        |
+| [Intersection Rect](#intersection-rect)                     | N/A               | `${intersectionRect}`         |
+| [Last Seen Time](#last-seen-time)                           | N/A               | `${lastSeenTime}`             |
+| [Last Visible Time](#last-visible-time)                     | N/A               | `${lastVisibleTime}`          |
+| [Load Time Visibility](#load-time-visibility)               | N/A               | `${loadTimeVisibility}`       |
+| [Max Continuous Visible Time](#max-continuous-visible-time) | N/A               | `${maxContinuousVisibleTime}` |
+| [Max Scroll Depth](#max-scroll-depth)                       | N/A               | `${maxScrollDepth}`           |
+| [Max Visible Percentage](#max-visible-percentage)           | N/A               | `${maxVisiblePercentage}`     |
+| [Min Visible Percentage](#min-visible-percentage)           | N/A               | `${minVisiblePercentage}`     |
+| [Total Time](#total-time)                                   | N/A               | `${totalTime}`                |
+| [Total Visible Time](#total-visible-time)                   | N/A               | `${totalVisibleTime}`         |
+
+### Timers
+
+| Variable Name                     | Platform Variable | amp-analytics Variable |
+| --------------------------------- | ----------------- | ---------------------- |
+| [Timer Duration](#timer-duration) | N/A               | `${timerDuration}`     |
+| [Timer Start Time](#timer-start)  | N/A               | `${timerStart}`        |
+
+### AMP Components
+
+| Variable Name                    | Platform Variable | amp-analytics Variable | Required AMP Components                                                                                           |
+| -------------------------------- | ----------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| [Variant](#experiment-variant)   | `VARIANT`         | N/A                    | [`<amp-experiment>`](https://github.com/ampproject/amphtml/blob/main/extensions/amp-experiment/amp-experiment.md) |
+| [Variants](#experiment-variants) | `VARIANTS`        | N/A                    | [`<amp-experiment>`](https://github.com/ampproject/amphtml/blob/main/extensions/amp-experiment/amp-experiment.md) |
+| [Geolocation](#geolocation)      | `AMP_GEO`         | `${ampGeo}`            | [`<amp-geo>`](https://github.com/ampproject/amphtml/blob/main/extensions/amp-geo/amp-geo.md)                      |
+
+### Analytics Advanced Variable Syntax
+
+| Variable Name                | Platform Variable | amp-analytics Variable |
+| ---------------------------- | ----------------- | ---------------------- |
+| [Default](#default)          | N/A               | `$DEFAULT`             |
+| [SubStr](#string-substr)     | N/A               | `$SUBSTR`              |
+| [Trim](#trim)                | N/A               | `$TRIM`                |
+| [ToLowerCase](#tolowercase)  | N/A               | `$TOLOWERCASE`         |
+| [ToUpperCase](#touppercase)  | N/A               | `$TOUPPERCASE`         |
+| [Not](#not)                  | N/A               | `$NOT`                 |
+| [Base64](#base64)            | N/A               | `$BASE64`              |
+| [Hash](#hash)                | N/A               | `$HASH`                |
+| [If](#if)                    | N/A               | `$IF`                  |
+| [Replace](#replace)          | N/A               | `$REPLACE`             |
+| [Match](#match)              | N/A               | `$MATCH`               |
+| [Equals](#equals)            | N/A               | `$EQUALS`              |
+| [Simple Calculations](#calc) | N/A               | `$CALC`                |
+
+### Miscellaneous
+
+| Variable Name                                 | Platform Variable  | amp-analytics Variable |
+| --------------------------------------------- | ------------------ | ---------------------- |
+| [AMP Version](#amp-version)                   | `AMP_VERSION`      | `${ampVersion}`        |
+| [AMP State](#amp-state)                       | `AMP_STATE`        | `${ampState}`          |
+| [Background State](#background-state)         | `BACKGROUND_STATE` | `${backgroundState}`   |
+| [Client ID](#client-id)                       | `CLIENT_ID`        | `${clientId}`          |
+| [Extra URL Parameters](#extra-url-parameters) | N/A                | `${extraUrlParams}`    |
+| [Page View ID](#page-view-id)                 | `PAGE_VIEW_ID`     | `${pageViewId}`        |
+| [Page View ID 64](#page-view-id-64)           | `PAGE_VIEW_ID_64`  | `${pageViewId64}`      |
+| [Query Parameter](#query-parameter)           | `QUERY_PARAM`      | `${queryParam}`        |
+| [Random](#random)                             | `RANDOM`           | `${random}`            |
+| [Request Count](#request-count)               | N/A                | `${requestCount}`      |
+| [Timestamp](#timestamp)                       | `TIMESTAMP`        | `${timestamp}`         |
+| [Error Name](#error-name)                     | N/A                | `${errorName}`         |
+| [Error Message](#error-message)               | N/A                | `${errorMessage}`      |
+
+### Variable Descriptions
+
+#### AMP Document Host
+
+Provides the AMP document's URL host.
+
+-   **platform variable**: `AMPDOC_HOST`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?host=AMPDOC_HOST"></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?host=example.com:8080`.
+-   **amp-analytics variable**: `${ampdocHost}`
+    -   Example value: `example.com`
+
+#### AMP Document Hostname
+
+Provides the AMP document's URL hostname.
+
+-   **platform variable**: `AMPDOC_HOSTNAME`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?hostname=AMPDOC_HOSTNAME"></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?hostname=example.com`.
+-   **amp-analytics variable**: `${ampdocHostname}`
+    -   Example value: `example.com`
+
+#### AMP Document URL
+
+Provides the AMP document's URL. The URL contains the scheme, domain, port and full path. It does not contain the fragment part of the URL.
+
+-   **platform variable**: `AMPDOC_URL`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?ref=AMPDOC_URL"></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?ref=https%3A%2F%2Fexample.com%2F`.
+-   **amp-analytics variable**: `${ampdocUrl}`
+    -   Example value: `http://example.com:8000/examples/analytics.amp.html`
+
+#### AMP State
+
+Pulls a value from the provided AMP state key.
+
+-   **platform variable**: `AMP_STATE`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?bar=AMP_STATE(foo.bar)"></amp-pixel>
+    ```
+    If `foo.bar` exists in the AMP state, the corresponding value is inserted into the pixel src.
+-   **amp-analytics variable**: `${ampState}`
+    -   Example value: `${ampState(foo.bar)}`: If `foo.bar` is available, its associated value is returned; otherwise, null is returned.
+
+#### AMP Version
+
+Provides a string with the AMP release version.
+
+-   **platform variable**: `AMP_VERSION`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?v=AMP_VERSION"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${ampVersion}`
+    -   Example value: `1460655576651`
+
+#### Available Screen Height
+
+Provides the screen height in pixels available for the page rendering. This value can be slightly more or less than the actual viewport size because of various browser quirks.
+
+-   **platform variable**: `AVAILABLE_SCREEN_HEIGHT`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?availScreenHeight=AVAILABLE_SCREEN_HEIGHT"
+    ></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${availableScreenHeight}`
+    -   Example value: `1480`
+
+#### Available Screen Width
+
+Provides the screen width in pixels available for the page rendering. This value can be slightly more or less than the actual viewport height due to various browser quirks.
+
+-   **platform variable**: `AVAILABLE_SCREEN_WIDTH`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?availScreenWidth=AVAILABLE_SCREEN_WIDTH"
+    ></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${availableScreenWidth}`
+    -   Example value: `2500`
+
+#### Backgrounded
+
+A binary variable with possible values of 1 and 0 to indicate that the page/tab was sent to background at any point before the hit was sent. 1 indicates that the page was backgrounded while 0 indicates that the page has always been in the foreground. This variable does not count prerender as a backgrounded state.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${backgrounded}`
+
+#### Backgrounded At Start
+
+A binary variable with possible values of 1 and 0 to indicate that the page/tab was backgrounded at the time when the page was loaded. 1 indicates that the page was loaded in the background while 0 indicates otherwise. This variable does not count prerender as a backgrounded state.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${backgroundedAtStart}`
+
+#### Background State
+
+Provides the current background state of the page. Possible values are `0`, the page is visible, or `1`, the page is backgrounded.
+
+-   **platform variable**: `BACKGROUND_STATE`
+-   **amp-analytics variable**: `${backgroundState}`
+
+#### Browser Language
+
+Provides a string representing the preferred language of the user, usually the language of the browser UI.
+
+-   **platform variable**: `BROWSER_LANGUAGE`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?lang=BROWSER_LANGUAGE"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${browserLanguage}`
+    -   Example value: `en-us`
+
+#### Canonical Host
+
+Provides the canonical document's URL host.
+
+-   **platform variable**: `CANONICAL_HOST`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?host=CANONICAL_HOST"></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?host=pinterest.com:9000`.
+-   **amp-analytics variable**: `${canonicalHost}`
+    -   Example value: `http://pinterest.com:9000`
+
+#### Canonical Hostname
+
+Provides the canonical document's URL hostname.
+
+-   **platform variable**: `CANONICAL_HOSTNAME`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?hostname=CANONICAL_HOSTNAME"
+    ></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?host=pinterest.com`.
+-   **amp-analytics variable**: `${canonicalHostname}`
+    -   Example value: `pinterest.com`
+
+#### Canonical Path
+
+Provides the canonical document's URL path.
+
+-   **platform variable**: `CANONICAL_PATH`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?path=CANONICAL_PATH"></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?path=%2Fpage1.html`.
+-   **amp-analytics variable**: `${canonicalPath}`
+    -   Example value: `%2Fanalytics.html`
+
+#### Canonical URL
+
+Provides the canonical document's URL.
+
+-   **platform variable**: `CANONICAL_URL`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?href=CANONICAL_URL"></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?href=https%3A%2F%2Fpinterest.com%2F`.
+-   **amp-analytics variable**: `${canonicalUrl}`
+    -   Example value: `http%3A%2F%2Fexample.com%3A8000%2Fanalytics.html`
+
+#### Carousel From Slide
+
+Provides the `amp-carousel` slide from which the traversal happens. The value is either taken from the `data-slide-id` attribute of the slide when present, else it represents the index of the slide (starting from 0).
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${fromSlide}`
+
+For more information on analytics for `amp-carousel`, see [AMP Carousel and Analytics](../extensions/amp-carousel/amp-carousel-analytics.md).
+
+#### Carousel To Slide
+
+Provides the `amp-carousel` slide to which the traversal happens. The value is either taken from the `data-slide-id` attribute of the slide when present, else it represents the index of the slide (starting from 0).
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${toSlide}`
+
+For more information on analytics for `amp-carousel`, see [AMP Carousel and Analytics](../extensions/amp-carousel/amp-carousel-analytics.md).
+
+#### Client ID
+
+Provides a per document-source-origin (the origin of the website where you publish your AMP doc) and user identifier. The client ID will be the same for the same user if they visit again within one year. The client ID should behave roughly similar to a cookie storing a session ID for one year. If the AMP document is not served through the Google AMP Cache, the client ID is replaced with a cookie of the name of the `cid scope` argument (see below). If it is not present, a cookie will be set with the same name. These cookies will always have the prefix "amp-" followed by a random base64 encoded string.
+
+-   **platform variable**: `CLIENT_ID`
+
+    -   Example: <br>
+
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?cid=CLIENT_ID(cid-scope-cookie-fallback-name)"
+    ></amp-pixel>
+
+    <amp-user-notification
+      layout="nodisplay"
+      id="user-consent"
+      data-show-if-href="https://foo.com/api/show"
+      data-dismiss-href="https://foo.com/api/dismissed"
+    >
+      This site uses cookies to personalize content.
+      <a href="">Learn more.</a>
+      <button on="tap:user-consent.dismiss">I accept</button>
+    </amp-user-notification>
+
+    <!-- Client ID is not provided until `user-consent` is dismissed -->
+    <amp-pixel
+      src="https://foo.com/pixel?cid=CLIENT_ID(cid-scope-cookie-fallback-name,user-consent)"
+    ></amp-pixel>
+    ```
+
+-   **amp-analytics variable**: `${clientId}`
+    -   Example usage: `${clientId(foo)}`
+    -   Example value: `U6XEpUs3yaeQyR2DKATQH1pTZ6kg140fvuLbtl5nynbUWtIodJxP5TEIYBic4qcV`
+
+##### Client ID arguments
+
+You can pass the following arguments into the Client ID variable like a function. Spaces between arguments and values are not allowed.
+
+-   `cid scope` (Required): The namespace for the Client ID.
+-   `amp-user-notification id` (Optional): Use this argument to make the Client ID substitution dependent on the dismissal of a user notification shown to the visitor of the page. In amp-analytics, this is the same as using the [`data-consent-notification-id`](../extensions/amp-analytics/amp-analytics.md) attribute -- you may choose to use either one for the amp-analytics component.
+-   `cookie name` (Optional): The name of the fallback cookie when the document is not served by an AMP proxy. If not provided, `cid scope` will be used as the cookie name.
+-   `disable backup` (Optional): If set to `true`, then will opt-out of storing the AMP generated CID in Storage as a backup when the document is not served by an AMP proxy. Otherwise, will default into this behavior.
+
+#### Content Load Time
+
+Provides the time the page takes to fire the `DOMContentLoaded` event from the time the previous page is unloaded. The value is in milliseconds.
+
+-   **platform variable**: `CONTENT_LOAD_TIME`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?contentLoadTime=CONTENT_LOAD_TIME"
+    ></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${contentLoadTime}`
+    -   Example value: `40`
+
+#### Counter
+
+Use `COUNTER(name)` to generate an index for the given request. Counts start at 1 and are per given `name`.
+
+-   **platform variable**: `COUNTER`
+-   **amp-analytics variable**: `${counter}`
+
+#### Document Charset
+
+Provides the character encoding of the current document.
+
+-   **platform variable**: `DOCUMENT_CHARSET`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?charSet=DOCUMENT_CHARSET"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${documentCharset}`
+    -   Example value: `UTF-8`
+
+#### Document Referrer
+
+Provides the referrer where the user came from, which is read from `document.referrer`. The value is empty for direct visitors.
+
+-   **platform variable**: `DOCUMENT_REFERRER`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?referrer=DOCUMENT_REFERRER"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${documentReferrer}`
+    -   Example value: `https://www.google.com`
+
+#### Domain Lookup Time
+
+Provides the time it took to perform the DNS lookup for the current page. The value is in milliseconds.
+
+-   **platform variable**: `DOMAIN_LOOKUP_TIME`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?domainLookupTime=DOMAIN_LOOKUP_TIME"
+    ></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${domainLookupTime}`
+    -   Example value: `1`
+
+#### DOM Interactive Time
+
+Provides the time the page to become interactive from the time the previous page is unloaded. The value is in milliseconds.
+
+-   **platform variable**: `DOM_INTERACTIVE_TIME`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?domInteractiveTime=DOM_INTERACTIVE_TIME"
+    ></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${domInteractiveTime}`
+    -   Example value: `40`
+
+#### Element Height
+
+Provides the height of the element specified by `visibilitySpec`.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${elementHeight}`
+
+#### Element Width
+
+Provides the width of the element specified by `visibilitySpec`.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${elementWidth}`
+
+#### Element X
+
+Provides the absolute X coordinate of the left edge of the element specified by `visibilitySpec`.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${elementX}`
+
+#### Element Y
+
+Provides the absolute Y coordinate of the top edge of the element specified by `visibilitySpec`.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${elementY}`
+
+#### Error Message
+
+Provides the message of the error that triggered an user error event. This variable is only available in a `trigger` of type `user-error`
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${errorMessage}`
+    -   Example value: `Invalid multi-size data format`
+
+#### Experiment Variant
+
+Provide the allocated variant information from the `<amp-experiment>` component. The allocated variant name is returned. The variable resolves to string `none` if no variant is allocated.
+
+-   **platform variable**: `VARIANT(experiment)`
+-   **amp-analytics variable**: N/A
+
+#### Experiment Variants
+
+Provide the all variants information from the `<amp-experiment>` component. The variable will be serialized in the following format.
+
+-   **platform variable**: `VARIANT(experiment)`
+-   **amp-analytics variable**: N/A
+    -   Example value: `{experiment1}.{variant}!{experiment2}.{variant}...`
+
+#### Error Name
+
+Provides the name of the error that triggered an user error event. This variable is only available in a `trigger` of type `user-error`
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${errorName}`
+    -   Example value: `AMP-AD`
+
+#### External Referrer
+
+Provides the referrer where the user came from. Similar to [Document Referrer](#document_referrer), but the value is empty if user is navigated from same domain or the corresponding CDN proxy domain.
+Analytics vendor might prefer this value to Document Referrer for better session stitching, depending on the server side implementation.
+
+-   **platform variable**: `EXTERNAL_REFERRER`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?referrer=EXTERNAL_REFERRER"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${externalReferrer}`
+    -   Example value: `https://www.google.com`
+
+#### Extra URL Parameters
+
+Provides all the parameters that are defined in the [`extraUrlParams`](../extensions/amp-analytics/amp-analytics.md#extra-url-params) block of the amp-analytics config as a variable. If you use the `extraUrlParams` variable, the parameters are not appended to the end of the URL.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${extraUrlParams}`
+    -   Example value: `foo=bar&baz=something`
+
+#### First Seen Time
+
+Provides the time when at least 1px of the element is on the screen for the first time since the page has become visible.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${firstSeenTime}`
+
+#### First Visible Time
+
+Provides the time when the element met visibility conditions for the first time since the page has become visible.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${firstVisibleTime}`
+
+#### Geolocation
+
+Provides the approximate, country level, location of the user provided by the [`amp-geo`](../extensions/amp-geo/amp-geo.md#variable-substitution) extension.
+
+-   **platform variable**: AMP_GEO
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?domInteractiveTime=AMP_GEO"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${ampGeo}`
+    -   Example value: `ca`
+
+#### Horizontal Scroll Boundary
+
+Provides the horizontal scroll boundary that triggered a scroll event. This variable is only available in a `trigger` of type `scroll`. The value of the boundary may be rounded based on the precision supported by the extension. For example, a boundary with value `1` and precision of `5` will result in value of var to be 0.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${horizontalScrollBoundary}`
+
+#### HTML Attributes
+
+Provides values of attributes of HTML elements inside of an amp-ad tag which match a given CSS selector.
+This only allows an amp-analytics tag to query attributes of HTML elements loaded by that amp-analytics tag's parent
+amp-ad tag. It will not allow a publisher to obtain information about the content of an ad, nor will it allow metrics
+of one ad to be seen by the provider of another ad on the page.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${htmlAttr}`
+
+Example:
+
+```json
+"requests": {
+    "sample_visibility_request": "//somewhere/imgData=${htmlAttr(img,src,decoding)}"
+},
+```
+
+This will return the "src" and "decoding" attributes of img tags in the ad.
+
+Caveats:
+
+-   If the CSS selector matches 20 or more elements, an empty array will be returned. This is because traversing a
+    large list of elements is inefficient.
+-   Attributes of at most 10 elements will be returned.
+-   If an element matches the CSS selector but has none of the requested attributes, that element will not be
+    represented in the returned array.
+-   The returned values will be in the form of a URL encoded JSON array of objects wherein the object keys are the
+    requested attribute names and the object values are the elements' values for those attributes.
+-   The CSS selector may contain only letters (upper- and/or lower-case), numbers, hyphens, underscores, and periods.
+    [Issue #14252](https://github.com/ampproject/amphtml/issues/14252) has been created to address potential future demand for more complex CSS selectors.
+
+#### Initial Scroll Depth
+
+Provides the scroll depth at the time the element was loaded, relative to the target. The value returned will be top/inside/bottom, indicating whether the target was scrolled inside the viewport, was offscreen above the top of the viewport, or was offscreen below the bottom of the viewport.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${initialScrollDepth}`
+
+#### Intersection Ratio
+
+Provides the fraction of the target that is visible. The value will be between 0.0 and 1.0, inclusive. For more information, please see the [IntersectionObserverEntry.intersectionRatio](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/intersectionRatio) API documentation.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${intersectionRatio}`
+
+#### Intersection Rect
+
+Provides the bounds of the rectangle defining the portion of the selected element that is visible. For more information, please see the [IntersectionObserverEntry.intersectionRect](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/intersectionRect) API documentation.
+
+Example value:
+
+```javascript
+{"left":0,"top":74,"width":256,"height":226,"bottom":300,"right":256,"x":0,"y":74}
+```
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${intersectionRect}`
+
+#### Last Seen Time
+
+Provides the time when at least 1px of the element is on the screen for the last time since the page has become visible.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${lastSeenTime}`
+
+#### Last Visible Time
+
+Provides the time when the element met visibility conditions for the last time since the page has become visible.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${lastVisibleTime}`
+
+#### Load Time Visibility
+
+Provides the percentage of element visible in the viewport when the page has first become visible. This variable assumes that the page is scrolled to top.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${loadTimeVisibility}`
+
+#### Max Continuous Visible Time
+
+Provides the maximum amount of continuous time an element has met the `visibilitySpec` conditions at the time this ping is sent. Note that a ping with a `continuousTimeMin=1000` and `totalTimeMin=5000` that is visible for 1000ms, then not visible, then visible for 2000ms, then not, then visible for 1000ms, then not, then visible for 1020ms will report 2000 for this number as that is the max continuous visible time, even if it is not the current continuous visible time (1020 in this example).
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${maxContinuousVisibleTime}`
+
+#### Max Scroll Depth
+
+Provides the maximum amount that the user has scrolled down the page, relative to the target. The value returned will be top/inside/bottom, indicating whether the target was scrolled inside the viewport, was offscreen above the top of the viewport, or was offscreen below the bottom of the viewport.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${maxScrollDepth}`
+
+#### Max Visible Percentage
+
+Provides the maximum visible percentage over the time that `visibilitySpec` conditions were met. For example, a ping where the element was 100%, then off the page, then 100% will report this value as 100. A ping with `visiblePercentageMax=50` undergoing the same transitions would report somewhere between 0 and 50 since any time when the element was 100% on the page would not be counted.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${maxVisiblePercentage}`
+
+#### Min Visible Percentage
+
+Provides the minimum visible percentage over the time that `visibilitySpec` conditions were met. For example, a ping where the element was 100%, then off the page, then 100% will report this value as 0. A ping with `visiblePercentageMin=50` condition undergoing the same transitions would report somewhere between 50 and 100 since any time when the element was 0% to 50% on the page would not be counted.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${minVisiblePercentage}`
+
+#### Navigation Redirect Count
+
+Provides the number of redirects since the last non-redirect navigation.
+For more information, see the W3C Navigation Timing API [PerformanceNavigation interface](https://www.w3.org/TR/navigation-timing/#performancenavigation).
+
+-   **platform variable**: `NAV_REDIRECT_COUNT`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?nrc=NAV_REDIRECT_COUNT"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${navRedirectCount}`
+    -   Example value: `0`
+
+#### Navigation Timing
+
+Provides access to metrics from the browser's PerformanceTiming interface. See the W3C Navigation Timing API [PerformanceTiming interface](https://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface) documentation for attribute names and definitions.
+
+-   **platform variable**: `NAV_TIMING`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?navStart=NAV_TIMING(navigationStart)&amp;pageLoadTime=NAV_TIMING(navigationStart,loadEventStart)"
+    ></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?navStart=1451606400000&pageLoadTime=100`.
+-   **amp-analytics variable**: `${navTiming}`
+    -   Example 1: `${navTiming(navigationStart)}` results in value: `1451606400000`
+    -   Example 2: `${navTiming(navigationStart,responseStart)}` results in value: `10`
+
+##### Navigation Timing arguments
+
+You can pass the following arguments into the Navigation Timing variable like a function. Spaces between arguments and values are not allowed.
+
+-   `startEvent` (Required): The name of the [PerformanceTiming interface](https://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface) attribute that corresponds to the start event.
+-   `endEvent` (Optional): The name of the [PerformanceTiming interface](https://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface) attribute that corresponds to the end event. If `endEvent` is passed, the value will be the time difference between the start and end events.
+
+If both `startEvent` and `endEvent` arguments are passed, the value will be the time elapsed between the two events. Otherwise, if only `startEvent` argument is passed, the value will be the timestamp of the given event.
+The value is in milliseconds.
+
+#### Navigation Type
+
+Provides the type of the last non-redirect navigation in the current browsing context. See the W3C Navigation Timing API [PerformanceNavigation interface](https://www.w3.org/TR/navigation-timing/#performancenavigation) for more information.
+
+-   **platform variable**: `NAV_TYPE`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?nt=NAV_TYPE"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${navType}`
+    -   Example value: `1`
+
+#### Page Download Time
+
+Provides the time between receiving the first and the last byte of response. The value is in milliseconds.
+
+-   **platform variable**: `PAGE_DOWNLOAD_TIME`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?pageDownloadTime=PAGE_DOWNLOAD_TIME"
+    ></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${pageDownloadTime}`
+    -   Example value: `100`
+
+#### Page Load Time
+
+Provides the time taken to load the whole page. The value is calculated from the time `unload` event handler on previous page ends to the time `load` event for the current page is fired. If there is no previous page, the duration starts from the time the user agent is ready to fetch the document using an HTTP request. The value is in milliseconds.
+
+-   **platform variable**: `PAGE_LOAD_TIME`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?pageLoadTime=PAGE_LOAD_TIME"
+    ></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${pageLoadTime}`
+    -   Example value: `220`
+
+#### Page View ID
+
+Provides a string that is intended to be random and likely to be unique per URL, user and day.
+
+-   **platform variable**: `PAGE_VIEW_ID`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?pid=PAGE_VIEW_ID"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${pageViewId}`
+    -   Example value: `978`
+
+#### Page View ID 64
+
+Provides a string that is intended to be random with a high entropy and likely to be unique per URL, user and day.
+
+-   **platform variable**: `PAGE_VIEW_ID_64`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?pid=PAGE_VIEW_ID_64"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${pageViewId64}`
+    -   Example value: `U6XEpUs3yaeQyR2DKATQH1pTZ6kg140fvuLbtl5nynb`
+
+#### Query Parameter
+
+Pulls a value from the provided query string parameter.
+
+-   **platform variable**: `QUERY_PARAM`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?bar=QUERY_PARAM(baz,biz)"></amp-pixel>
+    ```
+    If a `baz` query string parameter is provided, the corresponding value is inserted into the pixel src; otherwise, the default `biz` is used.
+-   **amp-analytics variable**: `${queryParam}`
+    -   Example 1: `${queryParam(foo)}`: If `foo` is available, its associated value is returned; otherwise, an empty string is returned.
+    -   Example 2: `${queryParam(foo,bar)}`: if `foo` is available, its associated value is returned, otherwise `bar` is returned.
+
+##### Query Parameter arguments
+
+You can pass the following arguments into the Query Parameter variable like a function. Spaces between arguments and values are not allowed.
+
+-   `param` (Required): The key for the query string parameter to be inserted.
+-   `defaultValue` (Optional): The value to use if the provided key is not present on the query string. Defaults to an empty value ("").
+
+#### Random
+
+Provides a random value each time a request is constructed.
+
+-   **platform variable**: `RANDOM`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?0.8390278471201` where the \$RANDOM value is randomly generated upon each impression.
+-   **amp-analytics variable**: `${random}`
+    -   Example value: `0.12345632345`
+
+#### Redirect Time
+
+Provides the time taken to complete all the redirects before the request for the current page is made. The value is in milliseconds.
+
+-   **platform variable**: `REDIRECT_TIME`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?redirectTime=REDIRECT_TIME"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${redirectTime}`
+    -   Example value: `0`
+
+#### Request Count
+
+Provides the number of requests sent out from a particular `amp-analytics` tag. This value can be used to reconstruct the sequence in which requests were sent from a tag. The value starts from 1 and increases monotonically. Note that there may be a gap in `requestCount` numbers if the request sending fails due to network issues.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${requestCount}`
+    -   Example value: `6`
+
+#### Screen Color Depth
+
+Provides the screen color depth provided by the browser.
+
+-   **platform variable**: `SCREEN_COLOR_DEPTH`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?colorDepth=SCREEN_COLOR_DEPTH"
+    ></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${screenColorDepth}`
+    -   Example value: `24`
+
+#### Screen Height
+
+Provides the screen height in pixels. The value is retrieved from `window.screen.height`.
+
+-   **platform variable**: `SCREEN_HEIGHT`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?sh=SCREEN_HEIGHT"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${screenHeight}`
+    -   Example value: `1600`
+
+#### Screen Width
+
+Provides the screen width in pixels. The value is retrieved from `window.screen.width`.
+
+-   **platform variable**: `SCREEN_WIDTH`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?sw=SCREEN_WIDTH"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${screenWidth}`
+    -   Example value: `2560`
+
+#### Scroll Height
+
+Provides the total height of the page in pixels.
+
+-   **platform variable**: `SCROLL_HEIGHT`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?scrollHeight=SCROLL_HEIGHT"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${scrollHeight}`
+    -   Example value: `400`
+
+#### Scroll Left
+
+Provides the number of pixels that the user has scrolled from left.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${scrollLeft}`
+    -   Example value: `100`
+
+#### Scroll Top
+
+Provides the number of pixels that the user has scrolled from top.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${scrollTop}`
+    -   Example value: `0`
+
+#### Scroll Width
+
+Provides the total width of the page in pixels.
+
+-   **platform variable**: `SCROLL_WIDTH`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?scrollWidth=SCROLL_WIDTH"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${scrollWidth}`
+    -   Example value: `600`
+
+#### Server Response Time
+
+Provides the time taken by the server to start sending the response after it starts receiving the request. The value is in milliseconds.
+
+-   **platform variable**: `SERVER_RESPONSE_TIME`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?serverResponseTime=SERVER_RESPONSE_TIME"
+    ></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${serverResponseTime}`
+    -   Example value: `10`
+
+#### Source URL
+
+Parses and provides the source URL of the current document to the URL.
+
+The source URL is extracted from the proxy URL if the document is being served from a _known_ proxy. Otherwise, the original document URL is returned. For example, if the URL is served via the proxy `https://cdn.ampproject.org` from the URL `https://cdn.ampproject.org/c/s/example.com/page.html`, then `SOURCE_URL` would return `https://example.com/page.html`.
+
+-   **platform variable**: `SOURCE_URL`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?href=SOURCE_URL"></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?href=https%3A%2F%2Fpinterest.com%2F`.
+-   **amp-analytics variable**: `${sourceUrl}`
+    -   Example value: `https%3A%2F%2Fpinterest.com%2F`
+
+#### Source Host
+
+Parses and provides the source URL's host. See the description of [Source URL](#source-url) for more details.
+
+-   **platform variable**: `SOURCE_HOST`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?host=SOURCE_HOST"></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?host=pinterest.com:9000`.
+-   **amp-analytics variable**: `${sourceHost}`
+    -   Example value: `example.com`
+
+#### Source Hostname
+
+Parses and provides the source URL's hostname. See the description of [Source URL](#source-url) for more details.
+
+-   **platform variable**: `SOURCE_HOSTNAME`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?host=SOURCE_HOSTNAME"></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?host=pinterest.com`.
+-   **amp-analytics variable**: `${sourceHostname}`
+    -   Example value: `example.com`
+
+#### Source Path
+
+Parses and provides the source URL's path. See the description of [Source URL](#source-url) for more details.
+
+-   **platform variable**: `SOURCE_PATH`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?path=SOURCE_PATH"></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?path=%2Fpage2.html`.
+-   **amp-analytics variable**: `${sourcePath}`
+    -   Example value: `%2Fpage2.html`
+
+#### TCP Connection Time
+
+Provides the time it took for HTTP connection to be setup. The duration includes connection handshake time and SOCKS authentication. The value is in milliseconds.
+
+-   **platform variable**: `TCP_CONNECT_TIME`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?tcpConnectTime=TCP_CONNECT_TIME"
+    ></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${tcpConnectTime}`
+    -   Example value: `10`
+
+#### Title
+
+Provides the title of the current document.
+
+-   **platform variable**: `TITLE`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?title=TITLE"></amp-pixel>
+    ```
+    Makes a request to something like `https://foo.com/pixel?title=Breaking%20News`.
+-   **amp-analytics variable**: `${title}`
+    -   Example value: `The New York Times - Breaking News, World News...`
+
+#### Timestamp
+
+Provides the number of milliseconds that have elapsed since 1970. (Epoch time)
+
+-   **platform variable**: `TIMESTAMP`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?timestamp=TIMESTAMP"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${timestamp}`
+    -   Example value: `10`
+
+#### Timezone
+
+Provides the user's time-zone offset from UTC, in minutes.
+
+-   **platform variable**: `TIMEZONE`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?tz=TIMEZONE"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${timezone}`
+    -   Example value: `480` for [Pacific Standard Time](https://en.wikipedia.org/wiki/Pacific_Time_Zone).
+
+#### Timezone Code
+
+Provides the user's IANA time-zone code (if available).
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${timezoneCode}`
+    -   Example value: `Europe/Rome`.
+
+#### Total Engaged Time
+
+Provides the total time (in seconds) the user has been engaged with the page since the page first became visible in the viewport. Total engaged time will be 0 until the page first becomes visible. This variable requires the [amp-analytics](../extensions/amp-analytics/amp-analytics.md) extension to be present on the page.
+
+-   **platform variable**: `TOTAL_ENGAGED_TIME`
+-   **amp-analytics variable**: `${totalEngagedTime}`
+    -   Example value: `36`
+
+#### Incremental Engaged Time
+
+Provides the time (in seconds) the user has been engaged with the page since the last time it was reset. It takes two arguments. The first is the name of the timer, the second is whether or not to reset it (it is optional and defaults to true). Incremental engaged time will be 0 until the page first becomes visible. This variable requires the [amp-analytics](../extensions/amp-analytics/amp-analytics.md) extension to be present on the page.
+
+-   **platform variable**: `INCREMENTAL_ENGAGED_TIME`
+-   **amp-analytics variable**: `${incrementalEngagedTime(foo,false)}`
+    -   Example value: `36`
+
+#### Total Time
+
+Provides the total time from the time page has become visible to the time a ping was sent out. Only applicable to visible trigger events.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${totalTime}`
+
+#### Total Visible Time
+
+Provides the total time for which the element has met the `visiblitySpec`conditions at time this ping is sent.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${totalVisibleTime}`
+
+#### Timer Duration
+
+Provides the duration of the triggered timer since last start or interval in milliseconds. For timers stopped before a full interval completes, this will report the partial time.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${timerDuration}`
+
+#### Timer Start Time
+
+Provides the start time of the triggered timer in milliseconds from epoch. Resets only on timer start.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${timerStart}`
+
+#### User Agent
+
+Provides a string representing the user agent of the requesting software, usually tells about user's browser operating system.
+
+-   **platform variable**: `USER_AGENT`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?sh=USER_AGENT"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${userAgent}`
+    -   Example value: `Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0`
+
+#### Vertical Scroll Boundary
+
+Provides the vertical scroll boundary that triggered a scroll event. This variable is only available in a `trigger` of type `scroll`. The value of the boundary may be rounded based on the precision supported by the extension. For example, a boundary with value `1` and precision of `5` will result in value of var to be 0.
+
+-   **platform variable**: N/A
+-   **amp-analytics variable**: `${verticalScrollBoundary}`
+
+#### Viewer
+
+Provides an identifier for the viewer that contains the AMP document. An empty string is provided when the document is loaded directly in the browser or if the id is not found.
+
+-   **platform variable**: `VIEWER`
+    -   Example: <br>
+    ```html
+    <amp-pixel src="https://foo.com/pixel?viewer=VIEWER"></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${viewer}`
+    -   Example value: `www.google.com`
+
+#### Viewport Height
+
+Provides the viewport height in pixels available for the page rendering. In contrast to `AVAILABLE_SCREEN_HEIGHT`, this value takes window size and zooming into account.
+
+-   **platform variable**: `VIEWPORT_HEIGHT`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?viewportHeight=VIEWPORT_HEIGHT"
+    ></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${viewportHeight}`
+    -   Example value: `1600`
+
+#### Viewport Width
+
+Provides the viewport width in pixels available for the page rendering. In contrast to `AVAILABLE_SCREEN_WIDTH`, this value takes window size and zooming into account.
+
+-   **platform variable**: `VIEWPORT_WIDTH`
+    -   Example: <br>
+    ```html
+    <amp-pixel
+      src="https://foo.com/pixel?viewportHeight=VIEWPORT_HEIGHT"
+    ></amp-pixel>
+    ```
+-   **amp-analytics variable**: `${viewportWidth}`
+    -   Example value: `2560`
+
+#### Analytics Advanced Variable Syntax
+
+The following variables are only supported in `<amp-analytics>`
+
+##### Default
+
+Used to assign fallback value when the variable is resolved to empty string.
+
+-   Example: `$DEFAULT(${var}, fallback)`
+
+##### String substr
+
+-   Example: `$SUBSTR(${var}, 1, 4)`
+
+##### Trim
+
+-   Example: `$TRIM(${var})`
+
+##### ToLowerCase
+
+-   Example: `$TOLOWERCASE(${var})`
+
+##### ToUpperCase
+
+-   Example: `$TOUPPERCASE(TITLE)`
+
+##### Not
+
+Used to convert truth-y/false-y value to `'false'`/`'true'` string.
+
+-   Example `$NOT(hello)` = `'false'` and `$NOT()` = `'true'`
+
+##### Base64
+
+-   Example `$BASE64(PAGE_VIEW_ID)`
+
+##### Hash
+
+SHA-384 hash
+
+-   Example: `$HASH(PAGE_VIEW_ID)`
+
+##### If
+
+An if statement to choose between values
+
+-   Example: `$IF(${var}, value1, value2)` resolves to `value2` if `${var}` resolves to falsey value (`'false'`, `''`, `'0'`, `'null'`, `'Nan'` or `'undefined'`), otherwise will resolve to `value1`.
+
+##### Replace
+
+Find an replace all matched pattern.
+
+-   Example: `$REPLACE(${var}, matchPattern, replaceStr)`
+
+##### Match
+
+Find the specified (or first) matched pattern.
+
+-   Example: `$MATCH(${var}, matchPatter, 0)`
+
+##### Equals
+
+-   Example: `$EQUALS(${val}, value)` resolves to `'true'` or `'false'`
+
+##### Simple Calculations
+
+This macro allows you to perform basic arithmetics like addition, subtraction, multiplication and division.
+
+Parameters:
+
+-   **leftOperand** : A variable or a literal that resolves to a number or, a number string.
+-   **rightOperand** : A variable or a literal that resolves to a number or, a number string.
+-   **operation** : A literal. One of `add`, `subtract`, `multiply`, `divide`.
+-   **round** : An optional flag. If truthy, the result will be rounded.
+
+Example: `$CALC(${cumulativeLayoutShift}, 1000, multiply, true)`
diff --git a/docs/spec/amp-versioning-policy.md b/docs/spec/amp-versioning-policy.md
new file mode 100644
index 0000000000000..3eda2ec8e4a8d
--- /dev/null
+++ b/docs/spec/amp-versioning-policy.md
@@ -0,0 +1,82 @@
+# AMP versioning and deprecations policy
+
+## Goals
+
+-   Reduce overall JS URL entropy. AMP aims to provide as few versions of the JS library and extensions as possible to improve cache hit rates for these requests.
+-   Avoid breaking existing pages.
+-   Keep all users of AMP on secure and updated versions of the library.
+-   Enable all AMP developers to keep their AMP pages up-to-date.
+
+## Versioning
+
+-   The AMP JS library and its extensions are versioned. There is also an **[AMP release](https://github.com/ampproject/amphtml/releases/)** that corresponds to the precise code. Each major and minor version may correspond to many AMP releases.
+-   AMP is **released** about once per week and each release has a unique version number. With each release, AMP pages are rendered with the latest code for the respective major/minor versions of the AMP JS library and extensions.
+
+### AMP JS library
+
+The AMP JS library is distributed via its major version only. The major version is expected to change rarely if ever (on the order of less than once per year).
+
+### AMP extensions
+
+Each AMP extension is versioned independently. Publishers of AMP documents can choose the major and minor version of an extension; they cannot choose the patch version.
+
+-   Extension minor versions may be changed for breaking behavior changes _without_ breaking API changes.
+-   Extension major versions _must_ be changed for any breaking API changes.
+
+## Breaking changes
+
+Breaking changes must be implemented in a new major or minor version of an extension or (more rarely) the AMP JS library, except in rare cases<sup>1</sup>.
+
+Breaking changes are defined as:
+
+-   Changes to exposed API semantics, e.g. supported attributes in an AMP extension.
+-   Changes to CSS included in AMP that are not backward compatible.
+-   Changes to the DOM structure (elements, attributes and attribute values) generated by AMP extensions that are not backward compatible.
+-   Changes to AMP validation rules that are not backward compatible.
+
+The following are **not** considered breaking changes:
+
+-   Changes to elements and their children including their CSS if the element name starts with `i-`.
+-   Changes to attribute and class names starting with `i-` (but this doesn't mean that CSS backward compatibility may be broken with this mechanism, which would be considered a breaking change).
+
+<sup>1</sup>The following exceptions may be implemented without a new version:
+
+-   Changes required to maintain the security of AMP pages.
+-   Changes that affect fewer than 0.1% of crawler-accessible AMP pages.
+-   Changes that follow the deprecations process below.
+
+## Deprecations
+
+In rare cases, it may be necessary to remove an existing feature or API. Such breaking changes must follow the following AMP deprecation process prior to removal.
+
+Deprecations must be publicly discussed and provide significant user benefit that justifies additional work for page developers.
+
+The process for deprecations is similar to the [process for significant changes](https://github.com/ampproject/amphtml/blob/main/docs/contributing-code.md#process-for-significant-changes), but has some unique requirements:
+
+-   [File](https://github.com/ampproject/amphtml/issues/new/choose) an [Intent-to-Deprecate (I2D) issue](https://github.com/ampproject/amphtml/labels/INTENT%20TO%20DEPRECATE) describing the feature that is being deprecated, the motivation for deprecating it, and the plan for deprecating/removing the feature.
+    -   If you intend to remove the feature immediately after the warning period described below you may make your Intent-to-Deprecate issue an Intent-to-Deprecate-and-Remove issue (by modifying the title and adding the [INTENT TO REMOVE label](https://github.com/ampproject/amphtml/labels/INTENT%20TO%20REMOVE) to it).
+    -   Otherwise if you do not have a concrete timeline for removal you may file a separate [Intent-to-Remove (I2R) issue](https://github.com/ampproject/amphtml/labels/INTENT%20TO%20REMOVE) to track removal of the feature.
+-   Allow at least 2 weeks of open discussion after the I2D is created before proceeding with the deprecation of the feature.
+-   The deprecation and removal requires approval from at least 3 members of the [Approvers Working Group](https://github.com/ampproject/wg-approvers).
+-   Apply new behavior to old content in a way that minimizes breakage.
+-   [Announce](#announcements) the deprecation on the mailing list and on [Slack](https://amphtml.slack.com)
+-   Start warning for pages that might break via the developer console.
+-   Give developers at least 6 weeks after your deprecation warning is in production to apply changes before removing the feature.
+-   If you did not include removal in your I2D, file a separate Intent-to-Remove (I2R) when you are ready to remove the deprecated feature.
+
+If an underlying backend service has itself been turned down, then the given component or integration may be neutered immediately without breaking the validation.
+
+### Version deprecations
+
+Old versions of the AMP JS library and extensions may eventually be declared invalid by the AMP Validator. Such changes are breaking and must follow the deprecations process above. Additional rules also constrain the timelines of version deprecations:
+
+-   A version must not be deprecated until a new version is released and stable for at least 1 month.
+-   A version must not be invalidated until it has been deprecated for at least 1 year.
+
+The binaries of old versions must not be removed except in the case of security issues.
+
+## Announcements
+
+Changes that may break existing pages (including those where the number of broken pages is assumed to be very small) should be announced via the [amphtml-announce@googlegroups.com](https://groups.google.com/forum/#!forum/amphtml-announce) mailing list and on [Slack](https://amphtml.slack.com).
+
+Fixes that address security or privacy concerns may in some cases only be announced after the change was rolled out.
diff --git a/docs/spec/amp-video-interface.md b/docs/spec/amp-video-interface.md
new file mode 100644
index 0000000000000..9424239a83b2f
--- /dev/null
+++ b/docs/spec/amp-video-interface.md
@@ -0,0 +1,118 @@
+# Video in AMP
+
+Most video player components in AMP implement the [`VideoInterface`](https://github.com/ampproject/amphtml/blob/main/src/video-interface.js) API. This means
+that a set of features is available in all of these components, either completely
+or partially.
+
+This document describes all the features (**work in progress, incomplete**) that
+these players implement.
+
+## Players
+
+### Generic
+
+-   [amp-video](https://amp.dev/documentation/components/amp-video)
+-   [amp-video-iframe](https://amp.dev/documentation/components/amp-video-iframe)
+
+### For 3rd party services
+
+<!--
+  The following list is generated automatically:
+
+    amp check-video-interface-list --fix
+
+  Link check disabled to allow new extensions added in a pull request.
+-->
+
+<!-- markdown-link-check-disable -->
+
+-   [amp-3q-player](https://amp.dev/documentation/components/amp-3q-player)
+-   [amp-brid-player](https://amp.dev/documentation/components/amp-brid-player)
+-   [amp-brightcove](https://amp.dev/documentation/components/amp-brightcove)
+-   [amp-dailymotion](https://amp.dev/documentation/components/amp-dailymotion)
+-   [amp-delight-player](https://amp.dev/documentation/components/amp-delight-player)
+-   [amp-gfycat](https://amp.dev/documentation/components/amp-gfycat)
+-   [amp-ima-video](https://amp.dev/documentation/components/amp-ima-video)
+-   [amp-jwplayer](https://amp.dev/documentation/components/amp-jwplayer)
+-   [amp-minute-media-player](https://amp.dev/documentation/components/amp-minute-media-player)
+-   [amp-mowplayer](https://amp.dev/documentation/components/amp-mowplayer)
+-   [amp-nexxtv-player](https://amp.dev/documentation/components/amp-nexxtv-player)
+-   [amp-ooyala-player](https://amp.dev/documentation/components/amp-ooyala-player)
+-   [amp-powr-player](https://amp.dev/documentation/components/amp-powr-player)
+-   [amp-redbull-player](https://amp.dev/documentation/components/amp-redbull-player)
+-   [amp-vimeo](https://amp.dev/documentation/components/amp-vimeo)
+-   [amp-viqeo-player](https://amp.dev/documentation/components/amp-viqeo-player)
+-   [amp-wistia-player](https://amp.dev/documentation/components/amp-wistia-player)
+-   [amp-youtube](https://amp.dev/documentation/components/amp-youtube)
+
+<!-- markdown-link-check-enable -->
+
+<a id="analytics"></a>
+
+## Analytics
+
+See [video analytics](https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md).
+
+<a id="autoplay"></a>
+
+## Autoplay
+
+attribute: **`autoplay`**
+
+If this attribute is present, and the browser supports autoplay:
+
+-   the video is automatically muted before autoplay starts
+-   when the video is scrolled out of view, the video is paused
+-   when the video is scrolled into view, the video resumes playback
+-   when the user taps the video, the video is unmuted
+-   if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.
+
+For an example, visit [AMP By Example](https://amp.dev/documentation/examples/components/amp-video/#autoplay).
+
+<a id="docking"></a>
+
+## Docking (minimize to corner)
+
+attribute: **`dock`**
+
+This attribute is currently only supported for `amp-brightcove`, `amp-dailymotion`, `amp-delight-player`, `amp-ima-video`, `amp-video`, `amp-video-iframe` and `amp-youtube`.
+
+If this attribute is present and the video is playing manually, the video will
+be "minimized" and fixed to a corner when the user scrolls out of the video
+component's visual area.
+
+-   The video can be dragged and repositioned by the user on a different corner.
+-   Multiple videos on the same page can be docked.
+
+In order to use this attribute, the [`amp-video-docking`](https://amp.dev/documentation/components/amp-video-docking)
+extension script must be present:
+
+```html
+<script
+  async
+  custom-element="amp-video-docking"
+  src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"
+></script>
+```
+
+For more details, see [documentation on the docking extension itself.](https://amp.dev/documentation/components/amp-video-docking)
+
+<a id="rotate-to-fullscreen"></a>
+
+## Rotate-to-fullscreen
+
+attribute: **`rotate-to-fullscreen`**
+
+This attribute is currently only supported for `amp-video`, `amp-ima-video` and `amp-dailymotion`.
+
+If this attribute is present and a video is playing manually (i.e. user initiated playback, or tapped on the video after autoplay), the video displays fullscreen after the user rotates their device into landscape mode, provided that the video is visible.
+
+When multiple videos with the `rotate-to-fullscreen` attribute set are visible
+at the same time, heuristics are employed to select which video to display in
+fullscreen. These heuristics are applied as follows, in descending priority:
+
+1. If a video is playing manually (i.e. user initiated playback, or tapped on the video after autoplay)
+2. If the visible percentage of the video is higher.
+3. If a video is closer to the center of the viewport.
+4. Everything else failing, select the video that is closest to the top of the
+   viewport.
diff --git a/docs/spec/auto-lightbox.md b/docs/spec/auto-lightbox.md
new file mode 100644
index 0000000000000..79c8e548f742f
--- /dev/null
+++ b/docs/spec/auto-lightbox.md
@@ -0,0 +1,66 @@
+# Auto-lightbox
+
+The standard AMP runtime finds elligible [`amp-img`](https://amp.dev/documentation/components/amp-img)
+elements and automatically makes them clickable in order to open an [`amp-lightbox-gallery`](https://amp.dev/documentation/components/amp-lightbox-gallery)
+for enhanced user experience that includes panning and pinch-to-zoom.
+
+Including the [`amp-lightbox-gallery` extension script](https://amp.dev/documentation/components/amp-lightbox-gallery/) and [using it explicitly](https://amp.dev/documentation/components/amp-lightbox-gallery/#usage) (by setting the `lightbox` attribute on a valid element) disables the auto-lightbox treatment on a document.
+
+Otherwise, it's applied only on documents that contain either of the following:
+
+-   **a.** an [OpenGraph](http://ogp.me/) `<meta property="og:type" content="article">` tag
+-   **b.** ...or a `@type` field declared in [JSON+LD schema](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/discovery#use-schema.org-for-most-search-engines)
+    that's any of the following:
+    -   `Article`
+    -   `NewsArticle`
+    -   `BlogPosting`
+    -   `LiveBlogPosting`
+    -   `DiscussionForumPosting`
+
+## Excluded images
+
+Images are clickable by default and should not be automatically lightboxed in any of the following cases:
+
+-   the image or any of its ancestors has an [`on="tap: ..."` action](./amp-actions-and-events.md)
+-   any of its ancestors is `a[href]`, `amp-selector [option]` or `button`
+
+They're also excluded when they're inside any of the following:
+
+-   `amp-script`
+-   `amp-story`
+-   `amp-lightbox`
+-   `amp-carousel` will likely be treated specially in the future, but as of now, it's excluded.
+
+## Disabling treatment explicitly
+
+The runtime uses certain criteria to determine whether an `amp-img` can be lightboxed. By default, some
+sizing constraints have to be met, and the `amp-img` should not already be clickable.
+
+However, if you find this treatment undesirable, you can disable it on any element from `<body>` down by setting
+the `data-amp-auto-lightbox-disable` attribute.
+
+For example, if you'd like to disable it on a particular image, you can do:
+
+```html
+<amp-img src="my-image.png" ... data-amp-auto-lightbox-disable> </amp-img>
+```
+
+To disable it on a particular document section:
+
+```html
+<section data-amp-auto-lightbox-disable>
+  <!-- No elements inside this tree will be automatically lightboxed -->
+</section>
+```
+
+Or to disable it for your entire document altogether:
+
+```html
+<body data-amp-auto-lightbox-disable>
+  <!-- No elements in the document will be automatically lightboxed -->
+</body>
+```
+
+If you'd like manual tuning of disabled/enabled images and/or grouping, please use
+[`amp-lightbox-gallery`](https://amp.dev/documentation/components/amp-lightbox-gallery)
+directly.
diff --git a/docs/spec/email/OWNERS b/docs/spec/email/OWNERS
new file mode 100644
index 0000000000000..4bfa71af7a67a
--- /dev/null
+++ b/docs/spec/email/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'ampproject/wg-amp4email'}],
+    },
+  ],
+}
diff --git a/spec/email/amp-email-components.md b/docs/spec/email/amp-email-components.md
similarity index 96%
rename from spec/email/amp-email-components.md
rename to docs/spec/email/amp-email-components.md
index efb796107dd5b..734f69c62a13d 100644
--- a/spec/email/amp-email-components.md
+++ b/docs/spec/email/amp-email-components.md
@@ -18,9 +18,16 @@ limitations under the License.
 
 The following is the list of [AMP components](https://amp.dev/documentation/components/?format=email) that are currently supported in AMP email messages. The components are grouped into the following categories:
 
-- [Dynamic Content](#dynamic-content)
-- [Layout](#layout)
-- [Media](#media)
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+-   [Dynamic Content](#dynamic-content)
+-   [Layout](#layout)
+-   [Media](#media)
 
 ## Dynamic Content
 
diff --git a/docs/spec/email/amp-email-css.md b/docs/spec/email/amp-email-css.md
new file mode 100644
index 0000000000000..456663492c669
--- /dev/null
+++ b/docs/spec/email/amp-email-css.md
@@ -0,0 +1,351 @@
+<!---
+Copyright 2018 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.
+-->
+
+# Supported CSS in AMP for Email
+
+This document outlines the CSS features currently supported inside AMP emails.
+
+## Applying CSS
+
+### Internal stylesheet
+
+When using an internal stylesheet, the CSS is specified inside a single
+`<style amp-custom>` tag located in the `<head>` tag of the email.
+
+### Inline styles
+
+In addition to an internal stylesheet, inline styles can be specified on any
+element using the [`style` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-style).
+
+### External stylesheet
+
+External stylesheets are **not** supported in AMP for Email.
+
+Using `<link rel="stylesheet" href="...">` is not allowed anywhere in the email.
+
+## Supported CSS selectors
+
+### Simple selectors
+
+-   [Type selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) `elementname`
+-   [Class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) `.classname`
+-   [ID selector](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors) `#idname`
+-   [Universal selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) `*`
+-   [Attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) `[attr=value]`
+
+### Combinators
+
+-   [Adjacent sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator) `A + B`
+-   [General sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) `A ~ B`
+-   [Child combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) `A > B`
+-   [Descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) `A B`
+
+### Pseudo-classes
+
+-   [`:active`](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)
+-   [`:checked`](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked)
+-   [`:default`](https://developer.mozilla.org/en-US/docs/Web/CSS/:default)
+-   [`:disabled`](https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled)
+-   [`:empty`](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty)
+-   [`:enabled`](https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled)
+-   [`:first-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child)
+-   [`:first-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type)
+-   [`:focus`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
+-   [`:focus-within`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)
+-   [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover)
+-   [`:in-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range)
+-   [`:indeterminate`](https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate)
+-   [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid)
+-   [`:last-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child)
+-   [`:last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type)
+-   [`:last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type)
+-   [`:not`](https://developer.mozilla.org/en-US/docs/Web/CSS/:not)
+-   [`:nth-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)
+-   [`:nth-last-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child)
+-   [`:nth-last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type)
+-   [`:nth-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type)
+-   [`:only-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child)
+-   [`:only-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type)
+-   [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/:optional)
+-   [`:out-of-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range)
+-   [`:read-only`](https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only)
+-   [`:read-write`](https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write)
+-   [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required)
+-   [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid)
+
+## Supported CSS properties
+
+-   [`-moz-appearance`](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance)
+-   [`-webkit-appearance`](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance)
+-   [`-webkit-tap-highlight-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color)
+-   [`align-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
+-   [`align-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
+-   [`align-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)
+-   [`appearance`](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance)
+-   [`azimuth`](https://developer.mozilla.org/en-US/docs/Web/CSS/azimuth)
+-   [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
+-   [`background-attachment`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment)
+-   [`background-blend-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode)
+-   [`background-clip`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip)
+-   [`background-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
+-   [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)
+-   [`background-origin`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin)
+-   [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)
+-   [`background-repeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat)
+-   [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)
+-   [`border`](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
+-   [`border-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom)
+-   [`border-bottom-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color)
+-   [`border-bottom-left-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius)
+-   [`border-bottom-right-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius)
+-   [`border-bottom-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style)
+-   [`border-bottom-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width)
+-   [`border-collapse`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse)
+-   [`border-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)
+-   [`border-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left)
+-   [`border-left-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color)
+-   [`border-left-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style)
+-   [`border-left-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width)
+-   [`border-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
+-   [`border-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right)
+-   [`border-right-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color)
+-   [`border-right-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style)
+-   [`border-right-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width)
+-   [`border-spacing`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing)
+-   [`border-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style)
+-   [`border-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top)
+-   [`border-top-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color)
+-   [`border-top-left-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius)
+-   [`border-top-right-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius)
+-   [`border-top-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style)
+-   [`border-top-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width)
+-   [`border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width)
+-   [`bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom)
+-   [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
+-   [`box-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)
+-   [`break-after`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-after)
+-   [`break-before`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-before)
+-   [`break-inside`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside)
+-   [`caption-side`](https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side)
+-   [`caret-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color)
+-   [`clear`](https://developer.mozilla.org/en-US/docs/Web/CSS/clear)
+-   [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
+-   [`color-adjust`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-adjust)
+-   [`column-count`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-count)
+-   [`column-fill`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill)
+-   [`column-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
+-   [`column-rule`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule)
+-   [`column-rule-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color)
+-   [`column-rule-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style)
+-   [`column-rule-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width)
+-   [`column-span`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)
+-   [`column-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-width)
+-   [`columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/columns)
+-   [`counter-increment`](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment)
+-   [`counter-reset`](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset)
+-   [`cursor`](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)
+-   [`direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/direction)
+-   [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+-   `elevation`
+-   [`empty-cells`](https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells)
+-   [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
+-   [`flex`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
+-   [`flex-basis`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis)
+-   [`flex-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)
+-   [`flex-flow`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow)
+-   [`flex-grow`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)
+-   [`flex-shrink`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
+-   [`flex-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)
+-   [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float)
+-   [`font`](https://developer.mozilla.org/en-US/docs/Web/CSS/font)
+-   [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)
+-   [`font-feature-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings)
+-   [`font-kerning`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning)
+-   [`font-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
+-   [`font-size-adjust`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust)
+-   [`font-stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch)
+-   [`font-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style)
+-   [`font-synthesis`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis)
+-   [`font-variant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant)
+-   [`font-variant-alternates`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates)
+-   [`font-variant-caps`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps)
+-   [`font-variant-east-asian`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian)
+-   [`font-variant-ligatures`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)
+-   [`font-variant-numeric`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)
+-   [`font-variation-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings)
+-   [`font-weight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
+-   [`gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
+-   [`grid`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid)
+-   [`grid-area`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)
+-   [`grid-auto-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)
+-   [`grid-auto-flow`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)
+-   [`grid-auto-rows`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)
+-   [`grid-column`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)
+-   [`grid-column-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)
+-   [`grid-column-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)
+-   [`grid-row`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)
+-   [`grid-row-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)
+-   [`grid-row-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)
+-   [`grid-template`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template)
+-   [`grid-template-areas`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
+-   [`grid-template-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
+-   [`grid-template-rows`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)
+-   [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height)
+-   [`hyphens`](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)
+-   [`image-orientation`](https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation)
+-   `image-resolution`
+-   [`inline-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)
+-   [`isolation`](https://developer.mozilla.org/en-US/docs/Web/CSS/isolation)
+-   [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
+-   [`justify-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)
+-   [`justify-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)
+-   [`left`](https://developer.mozilla.org/en-US/docs/Web/CSS/left)
+-   [`letter-spacing`](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing)
+-   [`line-break`](https://developer.mozilla.org/en-US/docs/Web/CSS/line-break)
+-   [`line-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
+-   [`list-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style)
+-   [`list-style-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position)
+-   [`list-style-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type)
+-   [`margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)
+-   [`margin-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom)
+-   [`margin-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left)
+-   [`margin-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right)
+-   [`margin-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top)
+-   [`max-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)
+-   [`max-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)
+-   [`min-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)
+-   [`min-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width)
+-   [`mix-blend-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)
+-   [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)
+-   [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)
+-   [`offset-distance`](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance)
+-   [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
+-   [`order`](https://developer.mozilla.org/en-US/docs/Web/CSS/order)
+-   [`outline`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)
+-   [`outline-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color)
+-   [`outline-offset`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset)
+-   [`outline-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style)
+-   [`outline-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width)
+-   [`overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)
+-   [`overflow-x`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x)
+-   [`overflow-y`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y)
+-   [`overflow-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap)
+-   [`padding`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)
+-   [`padding-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom)
+-   [`padding-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left)
+-   [`padding-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right)
+-   [`padding-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top)
+-   `pause`
+-   `pause-after`
+-   `pause-before`
+-   [`perspective`](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective)
+-   [`perspective-origin`](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin)
+-   `pitch`
+-   `pitch-range`
+-   [`place-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items)
+-   [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
+-   [`quotes`](https://developer.mozilla.org/en-US/docs/Web/CSS/quotes)
+-   [`resize`](https://developer.mozilla.org/en-US/docs/Web/CSS/resize)
+-   `richness`
+-   [`right`](https://developer.mozilla.org/en-US/docs/Web/CSS/right)
+-   [`row-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
+-   `speak`
+-   `speak-header`
+-   `speak-numeral`
+-   `speak-punctuation`
+-   `speech-rate`
+-   `stress`
+-   [`table-layout`](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)
+-   [`text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
+-   [`text-align-last`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last)
+-   [`text-combine-upright`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright)
+-   [`text-decoration`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)
+-   [`text-decoration-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color)
+-   [`text-decoration-line`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line)
+-   [`text-decoration-skip`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip)
+-   [`text-decoration-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style)
+-   [`text-emphasis`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis)
+-   [`text-emphasis-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color)
+-   [`text-emphasis-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position)
+-   [`text-emphasis-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style)
+-   [`text-indent`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)
+-   [`text-justify`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-justify)
+-   [`text-orientation`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation)
+-   [`text-overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)
+-   [`text-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow)
+-   [`text-transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)
+-   [`text-underline-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position)
+-   [`top`](https://developer.mozilla.org/en-US/docs/Web/CSS/top)
+-   [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
+-   [`transform-box`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box)
+-   [`transform-origin`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)
+-   [`transform-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style)
+-   [`transition`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)
+-   [`transition-delay`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay)
+-   [`transition-duration`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration)
+-   [`transition-property`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property)
+-   [`transition-timing-function`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)
+-   [`unicode-bidi`](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi)
+-   [`vertical-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)
+-   [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
+-   `voice-family`
+-   [`white-space`](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
+-   [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width)
+-   [`word-break`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)
+-   [`word-spacing`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing)
+-   [`word-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap)
+-   [`writing-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode)
+-   [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)
+
+### Additional restrictions
+
+The following CSS properties have additional restrictions:
+
+| Property                                                                    | Restrictions                                                                     |
+| --------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| [`cursor`](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)         | The only allowed values are `pointer` and `initial`.                             |
+| [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)         | `url()` is not allowed.                                                          |
+| [`transition`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) | Only `opacity`, `transform`, `visibility` and `offset-distance` can be animated. |
+| [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) | The only allowed values are `hidden`, `visible` and `initial`.                   |
+| [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)       | Only values between -100 and 100 are allowed.                                    |
+
+## At-rules
+
+The only [at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule)
+currently supported is `@media`. See [Media features](#media-features) for more
+information.
+
+### Custom fonts (`@font-face`)
+
+Custom fonts are **not** supported in AMP for Email.
+
+## Media features
+
+List of [media features](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features)
+supported for conditionally applying rules via `@media` queries.
+
+-   [`device-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width)
+    -   `max-device-width`
+    -   `min-device-width`
+-   [`hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover)
+-   [`orientation`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation)
+-   [`pointer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer)
+-   [`resolution`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution)
+    -   `max-resolution`
+    -   `min-resolution`
+-   [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width)
+    -   `max-width`
+    -   `min-width`
diff --git a/docs/spec/email/amp-email-format.md b/docs/spec/email/amp-email-format.md
new file mode 100644
index 0000000000000..bf55efbaef94f
--- /dev/null
+++ b/docs/spec/email/amp-email-format.md
@@ -0,0 +1,137 @@
+<!---
+Copyright 2018 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.
+-->
+
+AMP is a technology known for developing super fast web pages on mobile clients. AMP is a set of HTML tags backed by JavaScript that easily enables functionality with an added focus on performance and security. There are [AMP components](https://amp.dev/documentation/components/) for everything from carousels, to responsive form elements, to retrieving fresh content from remote endpoints.
+
+The AMP for Email format provides [a subset of AMP components](amp-email-components.md) that you can use in email messages. Recipients of AMP emails can view and interact with the AMP components directly in the email.
+
+# The AMP for Email Format
+
+## Required markup
+
+The following code represents the minimum amount of markup that makes up a valid AMP email message:
+
+```html
+<!DOCTYPE html>
+<html ⚡4email>
+  <head>
+    <meta charset="utf-8" />
+    <style amp4email-boilerplate>
+      body {
+        visibility: hidden;
+      }
+    </style>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+  <body>
+    Hello, world.
+  </body>
+</html>
+```
+
+An AMP email message MUST
+
+-   <a name="dctp"></a>start with the doctype `<!doctype html>`. [🔗](#dctp)
+-   <a name="ampd"></a>contain a top-level `<html ⚡4email>` tag (`<html amp4email>` is accepted as well). [🔗](#ampd)
+-   <a name="crps"></a>contain `<head>` and `<body>` tags (They are optional in HTML). [🔗](#crps)
+-   <a name="chrs"></a>contain a `<meta charset="utf-8">` tag as the first child of their head tag. [🔗](#chrs)
+-   <a name="scrpt"></a>contain a `<script async src="https://cdn.ampproject.org/v0.js"></script>` tag inside their head tag. [🔗](#scrpt)
+-   <a name="boilerplate"></a>contain amp4email boilerplate (`<style amp4email-boilerplate>body{visibility:hidden}</style>`) inside their head tag to initially hide the content until AMP JS is loaded. [🔗](#boilerplate)
+
+The entire AMPHTML markup must not exceed 200,000 bytes.
+
+## Structure and rendering
+
+AMP for Email relies on the standard `multipart/alternative` [MIME](https://en.wikipedia.org/wiki/MIME) subtype, as defined in
+[RFC 1521, section 7.2.3](https://tools.ietf.org/html/rfc1521#section-7.2.3).
+
+_For more information, see [Structure and rendering of AMP emails](amp-email-structure.md)._
+
+## Supported AMP components
+
+_See [AMP for Email Supported Components](amp-email-components.md)._
+
+## HTML requirements
+
+_See [Supported HTML in AMP for Email](amp-email-html.md)._
+
+## CSS requirements
+
+### Supported selectors and properties
+
+_See [Supported CSS in AMP for Email](amp-email-css.md)._
+
+### Specifying CSS in an AMP document
+
+All CSS in any AMP document must be included in a `<style amp-custom>` tag within the header or as inline `style` attributes.
+
+```html
+...
+<style amp-custom>
+  /* any custom styles go here. */
+  body {
+    background-color: white;
+  }
+  amp-img {
+    border: 5px solid black;
+  }
+  amp-img.grey-placeholder {
+    background-color: grey;
+  }
+</style>
+...
+</head>
+```
+
+Note: The entire `<style>` tag cannot exceed 50,000 bytes. The validator will check for this.
+
+## Document dimensions
+
+-   **Optimal width**: 800px or less (any wider and content may be unexpectedly truncated on some clients).
+
+-   **Height**: variable, the client allows the user to scroll through the content.
+
+## Validation
+
+To ensure your email messages meet the strict criteria for the AMP for Email format, you can use AMP's existing validation tools.
+
+See [Validate AMP Email](https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_emails/) for more information.
+
+## Privacy and Security
+
+### Tracking email opens and interaction
+
+AMPHTML allows tracking email opens with pixel tracking techniques, same as regular HTML emails. Any user-initiated requests for data from external services will also indicate the user is interacting with the message. Email clients may offer their users the ability to disable loading remote images, and other external requests.
+
+### AMP-specific analytics
+
+The following AMP-specific analytic techniques are not supported:
+
+-   [AMP `CLIENT_ID`](https://amp.dev/documentation/guides-and-tutorials/optimize-measure/configure-analytics/analytics_basics#user-identification)
+-   [`amp-analytics`](https://amp.dev/documentation/components/amp-analytics)
+-   [`amp-pixel`](https://amp.dev/documentation/components/amp-pixel)
+-   [AMP Variable Substitution](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics_basics/#variable-substitution)
+
+### Component-specific considerations
+
+Requests for images inside [`<amp-carousel>`](https://amp.dev/documentation/components/amp-carousel) or [`<amp-accordion>`](https://amp.dev/documentation/components/amp-accordion)
+can indicate to the sender that the user is interacting with the message.
+
+Redirects in [`<amp-form>`](https://amp.dev/documentation/components/amp-form) are disallowed at runtime.
+
+## Feedback & Support
+
+For support and feedback on AMP for Email, please use the following channel: [ongoing-participation](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#ongoing-participation)
diff --git a/docs/spec/email/amp-email-html.md b/docs/spec/email/amp-email-html.md
new file mode 100644
index 0000000000000..0f2705a18043a
--- /dev/null
+++ b/docs/spec/email/amp-email-html.md
@@ -0,0 +1,117 @@
+<!---
+Copyright 2018 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.
+-->
+
+# Supported HTML in AMP for Email
+
+Note: This list is non-normative and is for reference purposes only. The AMP Validator rules are authoritative
+on the supported HTML tags and attributes.
+
+In addition to the [supported AMP components](amp-email-components.md), the following HTML tags are
+allowed in AMP for Email.
+
+## Supported tags
+
+-   [`a`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
+-   [`abbr`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr)
+-   [`address`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address)
+-   [`article`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article)
+-   [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
+-   [`b`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b)
+-   [`bdo`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo)
+-   [`blockquote`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)
+-   [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)
+-   [`br`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)
+-   [`button`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)
+-   [`caption`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption)
+-   [`cite`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite)
+-   [`code`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code)
+-   [`col`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col)
+-   [`colgroup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup)
+-   [`data`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data)
+-   [`datalist`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist)
+-   [`dd`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd)
+-   [`del`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del)
+-   [`details`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
+-   [`dfn`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn)
+-   [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div)
+-   [`dl`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)
+-   [`dt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt)
+-   [`em`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em)
+-   [`fieldset`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)
+-   [`figcaption`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption)
+-   [`figure`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)
+-   [`footer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer)
+-   [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
+-   [`h1`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1)
+-   [`h2`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2)
+-   [`h3`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3)
+-   [`h4`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4)
+-   [`h5`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h5)
+-   [`h6`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h6)
+-   [`head`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
+-   [`header`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header)
+-   [`hr`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)
+-   [`html`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html)
+-   [`i`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i)
+-   [`input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
+-   [`ins`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins)
+-   [`kbd`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd)
+-   [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
+-   [`legend`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)
+-   [`li`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)
+-   [`main`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main)
+-   [`mark`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark)
+-   [`meta`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
+-   [`meter`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter)
+-   [`nav`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav)
+-   [`ol`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)
+-   [`optgroup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup)
+-   [`option`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option)
+-   [`output`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output)
+-   [`p`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)
+-   [`pre`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre)
+-   [`progress`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)
+-   [`q`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q)
+-   [`rb`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rb)
+-   [`rp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp)
+-   [`rt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt)
+-   [`ruby`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby)
+-   [`s`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s)
+-   [`samp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp)
+-   [`script`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
+-   [`section`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section)
+-   [`select`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
+-   [`small`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small)
+-   [`span`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)
+-   [`strong`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong)
+-   [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style)
+-   [`sub`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub)
+-   [`summary`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
+-   [`sup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup)
+-   [`table`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
+-   [`tbody`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody)
+-   [`td`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td)
+-   [`template`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)
+-   [`textarea`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
+-   [`tfoot`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot)
+-   [`th`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th)
+-   [`thead`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead)
+-   [`time`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time)
+-   [`tr`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr)
+-   [`u`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u)
+-   [`ul`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)
+-   [`var`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var)
+-   [`wbr`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr)
diff --git a/spec/email/amp-email-structure.md b/docs/spec/email/amp-email-structure.md
similarity index 97%
rename from spec/email/amp-email-structure.md
rename to docs/spec/email/amp-email-structure.md
index 36300d5806ec1..5b0d5fc8e6afd 100644
--- a/spec/email/amp-email-structure.md
+++ b/docs/spec/email/amp-email-structure.md
@@ -23,7 +23,7 @@ To embed AMP within an email, add a new MIME part with a content type of `text/x
 <amp-img alt="AMP for Email MIME Parts Diagram"
     layout="responsive"
     width="752" height="246"
-    src="https://github.com/ampproject/amphtml/raw/master/spec/img/amp-email-mime-parts.png">
+    src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/amp-email-mime-parts.png">
 <noscript>
 <img alt="AMP for Email MIME Parts Diagram" src="../img/amp-email-mime-parts.png" />
 </noscript>
diff --git a/spec/img/amp-email-mime-parts.png b/docs/spec/img/amp-email-mime-parts.png
similarity index 100%
rename from spec/img/amp-email-mime-parts.png
rename to docs/spec/img/amp-email-mime-parts.png
diff --git a/docs/spec/img/amp-story-player-toggle-exit.gif b/docs/spec/img/amp-story-player-toggle-exit.gif
new file mode 100644
index 0000000000000..15de79fc0dcfd
Binary files /dev/null and b/docs/spec/img/amp-story-player-toggle-exit.gif differ
diff --git a/spec/img/amp-story-player.gif b/docs/spec/img/amp-story-player.gif
similarity index 100%
rename from spec/img/amp-story-player.gif
rename to docs/spec/img/amp-story-player.gif
diff --git a/test/manual/amp-base-carousel/img/bluegradient.png b/docs/spec/img/bluegradient.png
similarity index 100%
rename from test/manual/amp-base-carousel/img/bluegradient.png
rename to docs/spec/img/bluegradient.png
diff --git a/spec/img/contexts-with-different-storage.png b/docs/spec/img/contexts-with-different-storage.png
similarity index 100%
rename from spec/img/contexts-with-different-storage.png
rename to docs/spec/img/contexts-with-different-storage.png
diff --git a/test/manual/amp-base-carousel/img/greengradient.png b/docs/spec/img/greengradient.png
similarity index 100%
rename from test/manual/amp-base-carousel/img/greengradient.png
rename to docs/spec/img/greengradient.png
diff --git a/spec/img/identifiers-for-use-cases.png b/docs/spec/img/identifiers-for-use-cases.png
similarity index 100%
rename from spec/img/identifiers-for-use-cases.png
rename to docs/spec/img/identifiers-for-use-cases.png
diff --git a/test/manual/amp-base-carousel/img/lemonyellowgradient.png b/docs/spec/img/lemonyellowgradient.png
similarity index 100%
rename from test/manual/amp-base-carousel/img/lemonyellowgradient.png
rename to docs/spec/img/lemonyellowgradient.png
diff --git a/spec/img/lightbox-ad-3p.gif b/docs/spec/img/lightbox-ad-3p.gif
similarity index 100%
rename from spec/img/lightbox-ad-3p.gif
rename to docs/spec/img/lightbox-ad-3p.gif
diff --git a/spec/img/lightbox-ad-fie.gif b/docs/spec/img/lightbox-ad-fie.gif
similarity index 100%
rename from spec/img/lightbox-ad-fie.gif
rename to docs/spec/img/lightbox-ad-fie.gif
diff --git a/test/manual/amp-base-carousel/img/lilacgradient.png b/docs/spec/img/lilacgradient.png
similarity index 100%
rename from test/manual/amp-base-carousel/img/lilacgradient.png
rename to docs/spec/img/lilacgradient.png
diff --git a/spec/img/link-form-identifier-forwarding.png b/docs/spec/img/link-form-identifier-forwarding.png
similarity index 100%
rename from spec/img/link-form-identifier-forwarding.png
rename to docs/spec/img/link-form-identifier-forwarding.png
diff --git a/spec/img/link-identifier-forwarding-example-1.png b/docs/spec/img/link-identifier-forwarding-example-1.png
similarity index 100%
rename from spec/img/link-identifier-forwarding-example-1.png
rename to docs/spec/img/link-identifier-forwarding-example-1.png
diff --git a/spec/img/link-identifier-forwarding-example-2.png b/docs/spec/img/link-identifier-forwarding-example-2.png
similarity index 100%
rename from spec/img/link-identifier-forwarding-example-2.png
rename to docs/spec/img/link-identifier-forwarding-example-2.png
diff --git a/test/manual/amp-base-carousel/img/orangegradient.png b/docs/spec/img/orangegradient.png
similarity index 100%
rename from test/manual/amp-base-carousel/img/orangegradient.png
rename to docs/spec/img/orangegradient.png
diff --git a/test/manual/amp-base-carousel/img/redgradient.png b/docs/spec/img/redgradient.png
similarity index 100%
rename from test/manual/amp-base-carousel/img/redgradient.png
rename to docs/spec/img/redgradient.png
diff --git a/test/manual/amp-base-carousel/img/tealgradient.png b/docs/spec/img/tealgradient.png
similarity index 100%
rename from test/manual/amp-base-carousel/img/tealgradient.png
rename to docs/spec/img/tealgradient.png
diff --git a/docs/support.md b/docs/support.md
new file mode 100644
index 0000000000000..3175e854352cc
--- /dev/null
+++ b/docs/support.md
@@ -0,0 +1,26 @@
+<!-- DO NOT RENAME OR REMOVE THIS FILE - it's hosted here https://amp.dev/support/ -->
+
+# Getting Support
+
+There are many ways to get help for questions and issues related to AMP:
+
+**Need help with AMP?**
+
+If you are looking for help to get started using AMP on your site or you are having issues using AMP, consult these resources:
+
+-   [Official documentation](https://amp.dev/documentation/guides-and-tutorials/) with guides and tutorials to help you learn about AMP.
+-   [Hands-on samples and demos](https://amp.dev/documentation/examples/) for using AMP components.
+-   [Pre-styled templates and components](https://amp.dev/documentation/templates/) that you can use to create styled AMP sites from scratch.
+-   [AMP tools](https://amp.dev/documentation/tools) helping you get started with building AMP pages.
+-   [AMP supported browsers](https://amp.dev/support/faq/supported-browsers) to learn which browsers support AMP.
+-   [Stack Overflow](http://stackoverflow.com/questions/tagged/amp-html) is our recommended way to find answers to questions about AMP. Since members of the AMP Project community regularly monitor Stack Overflow, you will probably receive the fastest response to your questions there.
+-   For AMP on Google Search questions or issues, please use [Google's AMP forum](https://goo.gl/utQ1KZ).
+-   To check the status of AMP serving and its related services, see the [AMP Status](https://status.ampproject.org/) page.
+
+**Found a bug? Suggest a feature?**
+
+If you encounter a bug in AMP or have a feature request for AMP, see [Reporting issues with AMP](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#reporting-issues-with-amp) for information on filing an issue or requesting features.
+
+**Contributing to AMP?**
+
+[Contributing to AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#ongoing-participation) is a great place to find out how you can make contributions to the AMP open source project and how you can get help if you run into questions when contributing to AMP.
diff --git a/docs/testing.md b/docs/testing.md
new file mode 100644
index 0000000000000..3aa92b7b7f6ad
--- /dev/null
+++ b/docs/testing.md
@@ -0,0 +1,437 @@
+<!---
+Copyright 2015 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.
+-->
+
+# Testing in AMP HTML
+
+This document provides details for testing and building your AMP code.
+
+**Contents**
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+-   [Testing commands](#testing-commands)
+-   [Manual testing](#manual-testing)
+    -   [Serve Mode](#serve-mode)
+    -   [Examples](#examples)
+    -   [Document proxy](#document-proxy)
+    -   [A4A envelope (/a4a/, /a4a-3p/)](#a4a-envelope-a4a-a4a-3p)
+    -   [In-a-box envelope (/inabox/)](#in-a-box-envelope-inabox)
+    -   [Chrome extension](#chrome-extension)
+-   [Visual Diff Tests](#visual-diff-tests)
+    -   [Failing Tests](#failing-tests)
+    -   [Flaky Tests](#flaky-tests)
+    -   [How Are Tests Executed](#how-are-tests-executed)
+    -   [Adding and Modifying Visual Diff Tests](#adding-and-modifying-visual-diff-tests)
+        -   [One-time Setup](#one-time-setup)
+        -   [Writing the Test](#writing-the-test)
+-   [Isolated Component Testing](#isolated-component-testing)
+-   [Testing on devices](#testing-on-devices)
+    -   [Testing with ngrok](#testing-with-ngrok)
+    -   [Testing with Firebase](#testing-with-firebase)
+        -   [Testing Ads](#testing-ads)
+-   [End-to-End Tests](#end-to-end-tests)
+-   [Performance Testing Node Build Tools](#performance-testing-node-build-tools)
+
+## Testing commands
+
+Before running these commands, make sure you have Node.js installed. For instructions, see the [One-time setup](getting-started-quick.md#one-time-setup) section in the Quick Start guide.
+
+**Pro tip:** To see a full listing of `amp` commands and their flags, run `amp --help`.
+
+| Command                                                  | Description                                                                                                                                                                                                                                            |
+| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **`amp`**                                                | Starts the dev server, lazily builds JS files and extensions when requested, and watches them for changes. **Use this for development.**                                                                                                               |
+| `amp --extensions=amp-foo,amp-bar`                       | Same as `amp`. Pre-builds the listed extensions, and lazily builds other files when requested.                                                                                                                                                         |
+| `amp --extensions_from=examples/foo.amp.html`            | Same as `amp`. Pre-builds the extensions in the given example file, and lazily builds other files when requested.                                                                                                                                      |
+| `amp --compiled`                                         | Same as `amp`. Compiles and serves minified binaries. Can be used with `--extensions` and `--extensions_from`.                                                                                                                                         |
+| `amp --version_override=<version_override>`              | Runs "watch" and "serve". Overrides the version written to the AMP_CONFIG.                                                                                                                                                                             |
+| `amp dist`                                               | Builds minified AMP binaries and applies AMP_CONFIG to runtime files.                                                                                                                                                                                  |
+| `amp dist --watch`                                       | Builds minified AMP binaries and watches them for changes.                                                                                                                                                                                             |
+| `amp dist --noconfig`                                    | Builds minified AMP binaries without applying AMP_CONFIG to runtime files.                                                                                                                                                                             |
+| `amp dist --extensions=amp-foo,amp-bar`                  | Builds minified AMP binaries, with only the listed extensions.                                                                                                                                                                                         |
+| `amp dist --extensions_from=examples/foo.amp.html`       | Builds minified AMP binaries, with only extensions from the listed examples.                                                                                                                                                                           |
+| `amp dist --noextensions`                                | Builds minified AMP binaries without building any extensions.                                                                                                                                                                                          |
+| `amp dist --core_runtime_only`                           | Builds minified AMP binaries for just the core runtime. Can be combined with `--extensions` and `--extensions_from`.                                                                                                                                   |
+| `amp dist --fortesting`                                  | Builds minified AMP binaries for local testing. (Allows use cases like ads, tweets, etc. to work with minified sources. Overrides `TESTING_HOST` if specified. Uses the production `AMP_CONFIG` by default.)                                           |
+| `amp dist --fortesting --config=<config>`                | Builds minified AMP binaries for local testing, with the specified `AMP_CONFIG`. `config` can be `prod` or `canary`. (Defaults to `prod`.)                                                                                                             |
+| `amp dist --version_override=<version_override>`         | Builds minified AMP binaries and overrides the version written to the AMP_CONFIG.                                                                                                                                                                      |
+| `amp lint`                                               | Validates JS files against the ESLint linter.                                                                                                                                                                                                          |
+| `amp lint --watch`                                       | Watches for changes in files, and validates against the ESLint linter.                                                                                                                                                                                 |
+| `amp lint --fix`                                         | Fixes simple lint warnings/errors automatically.                                                                                                                                                                                                       |
+| `amp lint --files=<files-path-glob>`                     | Lints just the files provided. Can be used with `--fix`.                                                                                                                                                                                               |
+| `amp lint --local_changes`                               | Lints just the files changed in the local branch. Can be used with `--fix`.                                                                                                                                                                            |
+| `amp prettify`                                           | Validates non-JS files using Prettier.                                                                                                                                                                                                                 |
+| `amp prettify --fix`                                     | Fixes simple formatting errors automatically.                                                                                                                                                                                                          |
+| `amp prettify --files=<files-path-glob>`                 | Checks just the files provided. Can be used with `--fix`.                                                                                                                                                                                              |
+| `amp prettify --local_changes`                           | Checks just the files changed in the local branch. Can be used with `--fix`.                                                                                                                                                                           |
+| `amp build`                                              | Builds unminified AMP binaries.                                                                                                                                                                                                                        |
+| `amp build --watch`                                      | Builds unminified AMP binaries and watches them for changes.                                                                                                                                                                                           |
+| `amp build --extensions=amp-foo,amp-bar`                 | Builds unminified AMP binaries, with only the listed extensions.                                                                                                                                                                                       |
+| `amp build --extensions_from=examples/foo.amp.html`      | Builds unminified AMP binaries, with only the extensions needed to load the listed examples.                                                                                                                                                           |
+| `amp build --noextensions`                               | Builds unminified AMP binaries with no extensions.                                                                                                                                                                                                     |
+| `amp build --core_runtime_only`                          | Builds unminified AMP binaries for just the core runtime.                                                                                                                                                                                              |
+| `amp build --fortesting`                                 | Builds unminified AMP binaries and sets the `test` field in `AMP_CONFIG` to `true`.                                                                                                                                                                    |
+| `amp build --version_override=<version_override>`        | Builds unminified AMP binaries with the specified version.                                                                                                                                                                                             |
+| `amp check-links --files=<files-path-glob>`              | Reports dead links in `.md` files.                                                                                                                                                                                                                     |
+| `amp check-links --local_changes`                        | Reports dead links in `.md` files changed in the local branch.                                                                                                                                                                                         |
+| `amp clean`                                              | Removes build output.                                                                                                                                                                                                                                  |
+| `amp css`                                                | Recompiles css to the build directory and builds the embedded css into js files for the AMP library.                                                                                                                                                   |
+| `amp compile-jison`                                      | Compiles jison parsers for extensions to build directory.                                                                                                                                                                                              |
+| `amp pr-check`                                           | Runs all the CircleCI checks locally.                                                                                                                                                                                                                  |
+| `amp pr-check --nobuild`                                 | Runs all the CircleCI checks locally, but skips the `amp build` step.                                                                                                                                                                                  |
+| `amp pr-check --files=<test-files-path-glob>`            | Runs all the CircleCI checks locally, and restricts tests to the files provided.                                                                                                                                                                       |
+| `amp unit`                                               | Runs the unit tests in Chrome (doesn't require the AMP library to be built).                                                                                                                                                                           |
+| `amp unit --local_changes`                               | Runs the unit tests directly affected by the files changed in the local branch in Chrome.                                                                                                                                                              |
+| `amp integration`                                        | Runs the integration tests in Chrome after building the unminified runtime with the `prod` version of `AMP_CONFIG`.                                                                                                                                    |
+| `amp integration --compiled`                             | Same as above, but builds the minified runtime.                                                                                                                                                                                                        |
+| `amp integration --config=<config>`                      | Same as above, but `config` can be `prod` or `canary`. (Defaults to `prod`.)                                                                                                                                                                           |
+| `amp integration --nobuild`                              | Same as above, but skips building the runtime.                                                                                                                                                                                                         |
+| `amp [unit\|integration] --verbose`                      | Runs tests in Chrome with logging enabled.                                                                                                                                                                                                             |
+| `amp [unit\|integration] --coverage`                     | Runs code coverage tests. After running, the report will be available at test/coverage/index.html                                                                                                                                                      |
+| `amp [unit\|integration] --watch`                        | Watches for changes in files, runs corresponding test(s) in Chrome.                                                                                                                                                                                    |
+| `amp [unit\|integration] --watch --verbose`              | Same as `watch`, with logging enabled.                                                                                                                                                                                                                 |
+| `amp [unit\|integration] --safari`                       | Runs tests in Safari.                                                                                                                                                                                                                                  |
+| `amp [unit\|integration] --firefox`                      | Runs tests in Firefox.                                                                                                                                                                                                                                 |
+| `amp [unit\|integration] --edge`                         | Runs tests in Edge.                                                                                                                                                                                                                                    |
+| `amp [unit\|integration] --ie`                           | Runs tests in Internet Explorer.                                                                                                                                                                                                                       |
+| `amp [unit\|integration] --files=<test-files-path-glob>` | Runs specific test files.                                                                                                                                                                                                                              |
+| `amp [unit\|integration] --testnames`                    | Lists the name of each test being run, and prints a summary at the end.                                                                                                                                                                                |
+| `amp serve`                                              | Serves content from the repository root at http://localhost:8000/. Examples live in http://localhost:8000/examples/. Serves unminified binaries by default.                                                                                            |
+| `amp serve --compiled`                                   | Same as `serve`, but serves minified binaries.                                                                                                                                                                                                         |
+| `amp serve --cdn`                                        | Same as `serve`, but serves CDN binaries.                                                                                                                                                                                                              |
+| `amp serve --rtv <rtv_number>`                           | Same as `serve`, but serves binaries with the given 15 digit RTV.                                                                                                                                                                                      |
+| `amp serve --esm`                                        | Same as `serve`, but serves esm (module) binaries. Uses the new Typescript based transforms. _Still under active development._                                                                                                                         |
+| `amp serve --quiet`                                      | Same as `serve`, with logging silenced.                                                                                                                                                                                                                |
+| `amp serve --port <port>`                                | Same as `serve`, but uses a port number other than the default of 8000.                                                                                                                                                                                |
+| `amp check-types`                                        | Verifies that there are no errors associated with Closure typing. Run automatically upon push.                                                                                                                                                         |
+| `amp dep-check`                                          | Runs a dependency check on each module. Run automatically upon push.                                                                                                                                                                                   |
+| `amp presubmit`                                          | Run validation against files to check for forbidden and required terms. Run automatically upon push.                                                                                                                                                   |
+| `amp validator`                                          | Builds and tests the AMP validator. Run automatically upon push.                                                                                                                                                                                       |
+| `amp ava`                                                | Run node tests for tasks and offline/node code using [ava](https://github.com/avajs/ava).                                                                                                                                                              |
+| `amp todos:find-closed`                                  | Find `TODO`s in code for issues that have been closed.                                                                                                                                                                                                 |
+| `amp visual-diff`                                        | Runs all visual diff tests on a headless instance of local Chrome after building the minified runtime with the `prod` version of `AMP_CONFIG`. Requires `PERCY_TOKEN` to be set as an environment variable or passed to the task with `--percy_token`. |
+| `amp visual-diff --config=<config>`                      | Same as above, but `config` can be `prod` or `canary`. (Defaults to `prod`.)                                                                                                                                                                           |
+| `amp visual-diff --nobuild`                              | Same as above, but skips building the runtime.                                                                                                                                                                                                         |
+| `amp visual-diff --chrome_debug --webserver_debug`       | Same as above, with additional logging. Debug flags can be used independently.                                                                                                                                                                         |
+| `amp visual-diff --grep=<regular-expression-pattern>`    | Same as above, but executes only those tests whose name matches the regular expression pattern.                                                                                                                                                        |
+| `amp firebase`                                           | Generates a folder `firebase` and copies over all files from `examples` and `test/manual` for firebase deployment.                                                                                                                                     |
+| `amp firebase --file path/to/file`                       | Same as above, but copies over the file specified as `firebase/index.html`.                                                                                                                                                                            |
+| `amp firebase --compiled`                                | Same as `amp firebase`, but uses minified files of the form `/dist/v0/amp-component-name.js` instead of unminified files of the form `/dist/v0/amp-component-name.max.js`.                                                                             |
+| `amp firebase --nobuild`                                 | Same as `amp firebase`, but skips building the runtime.                                                                                                                                                                                                |
+| `amp e2e`                                                | Runs all end-to-end tests on Chrome after building the unminified runtime with the `prod` version of `AMP_CONFIG`..                                                                                                                                    |
+| `amp e2e --compiled`                                     | Same as above, but builds the minified runtime. .                                                                                                                                                                                                      |
+| `amp e2e --config=<config>`                              | Same as above, but `config` can be `prod` or `canary`. (Defaults to `prod`.)                                                                                                                                                                           |
+| `amp e2e --nobuild`                                      | Same as above, but skips building the runtime.                                                                                                                                                                                                         |
+| `amp e2e --files=<test-files-path-glob>`                 | Runs end-to-end tests from the specified files on the latest Chrome browser.                                                                                                                                                                           |
+| `amp e2e --testnames`                                    | Lists the name of each test being run, and prints a summary at the end.                                                                                                                                                                                |
+| `amp e2e --engine=ENGINE`                                | Runs end-to-end tests with the given Web Driver engine. Allowed values are `puppeteer` and `selenium`.                                                                                                                                                 |
+| `amp e2e --headless`                                     | Runs end-to-end tests in a headless browser instance.                                                                                                                                                                                                  |
+| `amp e2e --watch`                                        | Watches for changes in test files, runs tests.                                                                                                                                                                                                         |
+| `amp check-sourcemaps`                                   | Checks sourcemaps generated during minified compilation for correctness.                                                                                                                                                                               |
+
+**Pro tip:** All the above commands can be run in debug mode using `node --inspect`. This will make the Chrome debugger stop at `debugger;` statements, after which local state can be inspected using dev tools.
+
+For example, in order to debug `amp serve`, run the following command:
+
+```sh
+node --inspect $(which amp) serve
+```
+
+## Manual testing
+
+For manual testing build AMP and start the Node.js server by running `amp`.
+
+### Serve Mode
+
+There are 5 serving modes:
+
+-   DEFAULT mode serves unminified AMP. Use this during normal development by simply running `amp`.
+-   COMPILED mode serves minified AMP. This is closer to what is served in production on the stable channel. Serve this mode by running `amp --compiled`.
+-   CDN mode serves stable channel binaries. Local changes are not served in this mode. Serve CDN mode by running `amp serve --cdn`.
+-   RTV mode serves the bundle from the given RTV number (a 15 digit number). E.g. `001907161745080`. Serve RTV mode by running `amp serve --rtv <rtv_number>`
+-   ESM mode serves the esm (module) binaries. First run `amp dist --fortesting --esm` and then serve esm mode by running `amp serve --esm`. _This mode is new, and under active development._
+
+To switch serving mode during runtime, go to http://localhost:8000/serve_mode=MODE and set `MODE` to one of the following values: `default`, `compiled`, `cdn` or `<RTV_NUMBER>`.
+
+### Examples
+
+The content in the `examples` directory can be reached at: http://localhost:8000/examples/
+
+### Document proxy
+
+AMP ships with a local proxy for testing production AMP documents with the local JS version.
+
+For any public AMP document like: `http://output.jsbin.com/pegizoq/quiet`,
+
+You can access it with the local JS by using the form in
+[`http://localhost:8000`](http://localhost:8000) or by accessing the proxy URL
+directly:
+
+`http://localhost:8000/proxy/output.jsbin.com/pegizoq/quiet`.
+
+**Note:** The local proxy will serve minified or unminified JS based on the current serve mode. When serve mode is `cdn`, the local proxy will serve remote JS.
+When accessing minified JS make sure you run `amp dist` with the `--fortesting`
+flag so that we do not strip out the localhost code paths. (We do some
+code elimination to trim down the file size for the file we deploy to production)
+
+If the origin resource is on HTTPS, the URLs are http://localhost:8000/proxy/s/output.jsbin.com/pegizoq/quiet
+
+### <a name="a4a-envelope"></a>A4A envelope (/a4a/, /a4a-3p/)
+
+If you are working on AMPHTML ads, you can use the local A4A envelope for testing local and production AMP documents with the local JS version.
+
+A4A can be run either of these two modes:
+
+1. Friendly iframe mode: http://localhost:8000/a4a/...
+2. 3p iframe mode: http://localhost:8000/a4a-3p/...
+
+The following forms are supported:
+
+-   local document: http://localhost:8000/a4a[-3p]/examples/animations.amp.html
+-   proxied document with local sources: http://localhost:8000/a4a[-3p]/proxy/output.jsbin.com/pegizoq/quiet
+
+When accessing minified JS make sure you run `amp dist` with the `--fortesting`
+flag so that we do not strip out the localhost code paths. (We do some
+code elimination to trim down the file size for the file we deploy to production)
+
+If the origin resource is on HTTPS, the URLs are http://localhost:8000/a4a[-3p]/proxy/s/output.jsbin.com/pegizoq/quiet
+
+Notice that all documents are assumed to have a "fake" signature. Thus, this functionality is only available in the
+`localDev` mode.
+
+Additionally, the following query parameters can be provided:
+
+-   `width` - the width of the `amp-ad` (default "300")
+-   `height` - the height of the `amp-ad` (default "250")
+-   `offset` - the offset to push the `amp-ad` down the page (default "0px"). Can be used to push the Ad out of the viewport, e.g. using `offset=150vh`.
+
+### In-a-box envelope (/inabox/)
+
+If you are working on AMP In-a-box Ads, you can use the local in-a-box envelope for testing local and production AMP documents with the local JS version.
+
+The following forms are supported:
+
+-   local document: http://localhost:8000/inabox/examples/animations.amp.html
+-   proxied document with local sources: http://localhost:8000/inabox/proxy/output.jsbin.com/pegizoq/quiet
+
+Additionally, the following query parameters can be provided:
+
+-   `width` - the width of the `iframe` (default "300")
+-   `height` - the height of the `iframe` (default "250")
+-   `offset` - the offset to push the `iframe` down the page (default "0px"). Can be used to push the Ad out of the viewport, e.g. using `offset=150vh`.
+
+### Chrome extension
+
+For testing documents on arbitrary URLs with your current local version of the AMP runtime we created a [Chrome extension](../testing/local-amp-chrome-extension/README.md).
+
+## Visual Diff Tests
+
+In addition to building the AMP runtime and running `amp [unit|integration]`, the automatic test run on CircleCI includes a set of visual diff tests to make sure a new commit to `main` does not result in unintended changes to how pages are rendered. The tests load a few well-known pages in a browser and compare the results with known good versions of the same pages.
+
+The technology stack used is:
+
+-   [Percy](https://percy.io/), a visual regression testing service for webpages
+-   [Puppeteer](https://developers.google.com/web/tools/puppeteer/), a driver capable of loading webpages for diffing
+-   [Percy-Puppeteer](https://github.com/percy/percy-puppeteer), a framework that integrates Puppeteer with Percy
+-   [Headless Chrome](https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md), the Chrome/Chromium browser in headless mode
+
+The [`ampproject/amphtml`](https://github.com/ampproject/amphtml) repository on GitHub is linked to the [Percy project](https://percy.io/ampproject/amphtml) of the same name. You will see a check called `percy/amphtml` on your PR. If your PR results in visual diff(s), clicking on the `details` link will show you the snapshots with the diffs highlighted.
+
+### Failing Tests
+
+When a test run fails due to visual diffs being present, click the `details` link next to `percy/amphtml` in your PR and examine the results. By default, Percy highlights the changes between snapshots in red. Clicking on the new snapshot will show it in its raw form. If the diffs indicate a problem that is likely to be due to your PR, you can try running the visual diffs locally in order to debug (see section below). However, if you are sure that the problem is not due to your PR, you may click the green `Approve` button on Percy to approve the snapshots and unblock your PR from being merged.
+
+### Flaky Tests
+
+If a Percy test flakes and you would like to trigger a rerun, you can't do that from within Percy. Instead, from your PR on GitHub, click on the `details` link next to `CircleCI PR Check` and then click on `Visual Diff Tests` to load the CircleCI run for your PR. On the job page, click the `Rerun workflow from start` button to rerun just that job, which will generate a fresh visual diff build on Percy.
+
+### How Are Tests Executed
+
+Visual diff tests are defined in the [`visual-tests`](../test/visual-diff/visual-tests), see file for the configurations of each test. When running, the visual diff test runner does the following for each test case:
+
+-   Navgates to the defined page using a headless Chrome browser
+-   Waits for the page to finish loading, both by verifying idle network connections and lack of loader animations
+-   If defined, waits until the appropriate CSS selectors appear/disappear from the page
+-   If defined, waits an arbitrary amount of time (e.g., for components that have time-delayed mutations)
+-   If defined, executes any custom interaction test code
+-   Uploads a snapshot of the page's DOM (converted to an HTML string) to the Percy service
+
+When all snapshots finish uploading, Percy will process the visual diffs and report back to GitHub as a pull request status. Percy renders the snapshots in their own browsers and take a screenshot. If the new screenshot differs from the previously approved screenshot you will get a visual highlighting of where that difference lies.
+
+Percy DOES NOT by default run JavaScript, so the same DOM snapshot will be used in displaying mobile and desktop versions of the page. This means that if your page looks different between these two device types, it should be able to do that using CSS only.
+
+### Adding and Modifying Visual Diff Tests
+
+#### One-time Setup
+
+First create a [free BrowserStack account](https://www.browserstack.com/), use it to log into [https://percy.io](https://percy.io), create a project, and set the `PERCY_TOKEN` environment variable using the unique value you find at `https://percy.io/<org>/<project>/integrations`:
+
+```sh
+export PERCY_TOKEN="<unique-percy-token>"
+```
+
+Once the environment variable is set up, you can run the AMP visual diff tests. You can also pass this token directly to `amp visual-diff --percy_token="<unique-percy-token>"`
+
+#### Writing the Test
+
+To start, create the page and register it in the configuration file for visual diff tests:
+
+-   Create an AMP document that will be tested under `examples/visual-tests`.
+-   Add an entry in the [`test/visual-diff/visual-tests`](../test/visual-diff/visual-tests) JSON5 file. Documentation for the various settings are in that file.
+    -   Must set fields: `url`, `name`
+    -   You will also likely want to set `loading_complete_css` and maybe also `loading_incomplete_css`
+    -   Only set `viewport` if your page looks different on mobile vs. desktop, and you intend to create a separate config for each
+        -   The `viewport` setting wraps the entire DOM snapshot inside an `<iframe>` before uploading to Percy. Beware of weird iframe behaviors! 🐉
+    -   Do not set `enable_percy_javascript` without consulting `@ampproject/wg-infra`
+    -   Point `interactive_tests` to a JavaScript file if you would like to add interactions to the page. See examples of existing interactive tests to learn how to write those
+-   (For past examples of pull requests that add visual diff tests, see [#17047](https://github.com/ampproject/amphtml/pull/17047), [#17110](https://github.com/ampproject/amphtml/pull/17110))
+
+Now, verify your test by executing it:
+
+-   Build the AMP runtime in minified mode:
+    ```sh
+    amp dist --fortesting
+    ```
+    -   You can verify that your page looks as intented by running `amp serve --compiled` and opening it in a browser
+-   Execute the visual diff tests:
+    ```sh
+    amp visual-diff --nobuild
+    ```
+    -   Add `--grep="<regular expression>"` to the command to execute a subset of the tests. e.g., `amp visual-diff --grep="amp-[a-f]"` will execute on tests that have an AMP component name between `<amp-a...>` through `<amp-f...>`.
+    -   Note that if you drop the `--nobuild` flag, `amp visual-diff` will run `amp dist --fortesting` on each execution. This is time consuming, so only drop it if you are changing the runtime/extension code and not just the test files
+    -   To see debugging info during Percy runs, you can add `--chrome_debug`, `--webserver_debug`, or `--debug` for both.
+-   When the test finishes executing it will print a URL to Percy where you can inspect the results. It should take about a minute to finish processing.
+-   Inspect the build on Percy. If you are not happy with the results, fix your page or code, and repeat. If all is well, approve it. This creates a new baseline on Percy, against which all following builds will be compared.
+-   After approving your test, repeat the `amp visual-diff` command at least 5 more times. If any of the subsequent runs fails with a visual changes, this means that your test is flaky.
+    -   Flakiness is usually caused by bad `loading_complete_css` configurations
+    -   To find what CSS selector appear _exclusively_ after the page settles into the expected result, download the _baseline_ and _new_ source for the snapshots that Percy used in the build that flaked, and compare them using a text diff application
+
+## Isolated Component Testing
+
+To speed up development and testing of components, it is advised to use the Storybook dashboard and develop "stories" (testing scenarios) for components. Storybook has many features that assist with the isolated development and manual testing of components including easy manual interaction with component parameters, integrated accessibility auditing, responsiveness testing, etc.
+
+AMP includes two Storybook environments: `storybook-amp` (for components living inside AMP pages) and `storybook-preact` (simulating Bento components living in a Preact/React app).
+
+To run these environments and explore existing AMP components, run
+
+```sh
+amp storybook-amp
+# ------ or ------
+amp storybook-preact
+```
+
+Test scenarios (stories) live inside each of the components' directories, stories ran in the AMP environment have the `.amp.js` extension:
+
+```sh
+# Preact environment test scenario
+./extensions/amp-example/0.1/storybook/Basic.js
+# AMP environment test scenario
+./extensions/amp-example/0.1/storybook/Basic.amp.js
+```
+
+Read more about [Writing Storybook Test Scenarios](https://storybook.js.org/docs/guides/guide-preact/#step-4-write-your-stories) in the official [Storybook documentation](https://storybook.js.org/docs/).
+
+## Testing on devices
+
+### Testing with ngrok
+
+It's much faster to debug with local build (`amp` + `http://localhost:8000/`). In Chrome you can use [DevTools port forwarding](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server). However, iOS Safari does not give a similar option. Instead, you can use [ngrok](https://ngrok.com/). Just [download](https://ngrok.com/download) the ngrok binary for your platform and run it like this:
+
+```sh
+ngrok http 8000
+```
+
+Once started, the ngrok will print URLs for both `http` and `https`. E.g. `http://73774d8c.ngrok.io/` and `https://73774d8c.ngrok.io/`. These URLs can be used to debug on iOS and elsewhere.
+
+### Testing with Firebase
+
+For deploying and testing local AMP builds on [Firebase](https://firebase.google.com/), install firebase and initialize firebase within this directory\* (a `firebase` folder can be generated with the command, `amp firebase`).
+
+```sh
+npm install -g firebase-tools
+firebase login
+firebase init
+amp firebase
+firebase deploy
+```
+
+-   When initializing firebase within the directory via `firebase init`, make sure to select the following options when asked:
+
+*   "Which Firebase CLI features do you want to setup for this folder?" select `Hosting: Configure and deploy Firebase Hosting sites`.
+*   "What do you want to use as your public directory?" enter `firebase`.
+*   "Select a default Firebase project for this directory:" select your project name if it's already created, otherwise choose `[don't setup a new project]` and add one later.
+    -   Note: If you haven't already, you will have to create a project via the [Firebase Console](https://console.firebase.google.com) after you are done initializing and before you deploy. Once you create the project, you can make it active in your CLI with `firebase use your-project-name` or give it an alias by selecting your project after running `firebase use --add`.
+*   "Configure as a single-page app (rewrite all urls to /index.html)?" select `n`.
+
+`amp firebase` will generate a `firebase` folder and copy over all files from `dist`, `examples` and `test/manual`. It will rewrite all urls in the copied files to point to the local versions of AMP (i.e. the ones copied from `dist` to `firebase/dist`). When you initialize firebase, you should set the `firebase` `public` directory to `firebase`. This way `firebase deploy` will just directly copy and deploy the contents of the generated `firebase` folder. As an example, your `firebase.json` file can look something like this:
+
+```json
+{
+  "hosting": {
+    "public": "firebase",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
+  }
+}
+```
+
+If you are only testing a single file, you can use `amp firebase --file=path/to/my/file.amp.html` to avoid copying over all of `test/manual` and `examples`. It will copy over the specified file to `firebase/index.html`, which simplifies debugging.
+
+After deploying, you can access your project publically at its hosting URL `https://your-project-name.firebaseapp.com`.
+
+Additionally, you can create multiple projects and switch between them in the CLI using `firebase use your-project-name`.
+
+#### Testing Ads
+
+Testing ads in deployed demos requires allowlisting of 3p urls. You can do this by adding your intended deployment hostname as an environemnt variable `AMP_TESTING_HOST` and using the `fortesting` flag. For example:
+
+```sh
+export AMP_TESTING_HOST="my-project.firebaseapp.com"
+amp firebase --fortesting
+firebase deploy
+```
+
+This will write "my-project.firebaseapp.com" as a third party url to relevant attributes in `AMP_CONFIG`, which is prepended to `amp.js` and `integration.js` files in the firebase folder. If you're curious about how this is done, feel free to inspect `build-system/tasks/firebase.js`.
+
+## End-to-End Tests
+
+You can run and create E2E tests locally during development. Currently tests only run on Chrome, but support for additional browsers is underway. These tests have not been added to our CI build yet - but they will be added soon.
+
+Run all tests with:
+
+```sh
+amp e2e
+```
+
+The task will kick off `amp build` and then `amp serve` before running the tests. To skip building the runtime, use `--nobuild`.
+
+[Consult the E2E testing documentation](../build-system/tasks/e2e/README.md) to learn how to create your own end-to-end tests.
+
+## Performance Testing Node Build Tools
+
+You can create flamecharts for any node process used by the build system by leveraging `0x` which is included as a `devDepenendency`.
+
+Here's an example for `amp dist --closure_concurrency=1`:
+
+```sh
+npx 0x -o node_modules/.bin/amp dist --closure_concurrency=1
+```
+
+Important to note is `0x` will automatically create a flamechart and a serving folder locally within the repository, please don't add them to PRs!
diff --git a/docs/validator-release-schedule.md b/docs/validator-release-schedule.md
new file mode 100644
index 0000000000000..73113da0199e9
--- /dev/null
+++ b/docs/validator-release-schedule.md
@@ -0,0 +1,20 @@
+# Validator Release Schedule
+
+A new release of the [AMPHTML Validator](https://github.com/ampproject/amphtml/tree/main/validator#amp-html--validator) is pushed to [cdn.ampproject.org/v0/validator.js](https://cdn.ampproject.org/v0/validator.js) roughly every week and typically on Tuesdays.
+
+The release of [AMP](https://github.com/ampproject/amphtml#amp-) has it's own [Release Schedule](https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md).
+
+### Release Freezes
+
+There are occasions when we will skip a release of the AMPHTML Validator to production, known as a release freeze.
+
+A release freeze may happen due to:
+
+-   Times when there are not enough people available to push the AMPHTML Validator to production and monitor it. Currently, most of the people performing releases are based in the United States, so this will usually be the weeks of the major US holidays:
+    -   Independence Day (July 4)
+    -   Thanksgiving (fourth Thursday in November)
+    -   Between Christmas (25 December) and New Year's Eve/Day (December 31/January 1)
+
+In all cases, except emergencies, the release freezes will be announced at least one month in advance.
+
+Note that unless otherwise announced a release freeze does not imply a code freeze. Code may still be written, reviewed and merged during a release freeze.
diff --git a/contributing/web-standards-related-to-amp.md b/docs/web-standards-related-to-amp.md
similarity index 98%
rename from contributing/web-standards-related-to-amp.md
rename to docs/web-standards-related-to-amp.md
index d3e6bded8bace..b3be001b8a203 100644
--- a/contributing/web-standards-related-to-amp.md
+++ b/docs/web-standards-related-to-amp.md
@@ -5,7 +5,7 @@ Date: 2018-08-26
 | Standard/feature                                                                                                                                  |                                                                   Relation                                                                    |                                                                                                                                                                               Status |
 | ------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------: | -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
 | [Web Packaging](https://github.com/WICG/webpackage)                                                                                               |                                         Privacy-preserving preloading from cache under publisher URL                                          | Initial version of spec final. [Shipping in Chrome M73](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/gPH_BcOBEtc/Z41GR0mwEQAJ), IETF concensus seeking in progress |
-| [Portals](https://github.com/KenjiBaheux/portals/blob/master/explainer.md)                                                                        |                              AMP Carousel like UI with navigation to publisher (alternative to iframe promotion)                              |                                                                                                                              Iterating on spec. Prototype implementation in Chromium |
+| [Portals](https://github.com/WICG/portals/blob/main/README.md)                                                                                    |                              AMP Carousel like UI with navigation to publisher (alternative to iframe promotion)                              |                                                                                                                              Iterating on spec. Prototype implementation in Chromium |
 | [Performance Timeline](https://w3c.github.io/performance-timeline/)                                                                               |                                Real world metric collection. This is the framework. New metrics may be needed.                                |                                                                                                                                                           Shipping in first browsers |
 | [Paint Timing 1](https://w3c.github.io/paint-timing/)                                                                                             |                                             Initial paint related metrics (performance assessment                                             |                                                                                                                                                           Shipping in first browsers |
 | Perf metric: (Initial) Layout stability                                                                                                           | Metric for how often layout changes without user action based on elements resizing (such as when an unsized image loads or an iframe resizes) |                                                                                                                                    Standard draft published. Implemented in Chromium |
diff --git a/contributing/writing-css.md b/docs/writing-css.md
similarity index 76%
rename from contributing/writing-css.md
rename to docs/writing-css.md
index deb8eacc49968..724f911f358e0 100644
--- a/contributing/writing-css.md
+++ b/docs/writing-css.md
@@ -1,18 +1,25 @@
 # Writing CSS For AMP Runtime?
 
-- [Who should read this doc?](#who-should-read-this-doc)
-- [What is Specificity?](#what-is-specificity)
-  - [Example CSS selectors](#example-css-selectors)
-  - [How to calculate Specificity](#how-to-calculate-specificity)
-- [Writing CSS in AMP Runtime or Extensions](#writing-css-in-amp-runtime-or-extensions)
-  - [Creating a new Selector](#creating-a-new-selector)
-  - [Modifying an existing Selector](#modifying-an-existing-selector)
-  - [FOUC](#fouc)
-  - [Rule of thumb](#rule-of-thumb)
-- [Case Studies](#case-studies)
-  - [AMP Selector CSS has high specificity](#amp-selector-css-has-high-specificity)
-  - [AMP Accordion CSS Changes broke specificity](#amp-accordion-css-changes-broke-specificity)
-- [Reading material](#reading-material)
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+-   [Who should read this doc?](#who-should-read-this-doc)
+-   [What is Specificity?](#what-is-specificity)
+    -   [Example: CSS selectors](#example-css-selectors)
+    -   [How to calculate Specificity](#how-to-calculate-specificity)
+-   [Writing CSS in AMP Runtime or Extensions](#writing-css-in-amp-runtime-or-extensions)
+    -   [Creating a new Selector](#creating-a-new-selector)
+    -   [Modifying an existing Selector](#modifying-an-existing-selector)
+    -   [FOUC](#fouc)
+    -   [Rule of thumb](#rule-of-thumb)
+-   [Case Studies](#case-studies)
+    -   [AMP Selector CSS has high specificity](#amp-selector-css-has-high-specificity)
+    -   [AMP Accordion CSS changes broke specificity](#amp-accordion-css-changes-broke-specificity)
+-   [Reading material](#reading-material)
 
 ## Who should read this doc?
 
@@ -49,7 +56,7 @@ of any of these and many more. For a comprehensive list of all CSS selectors, se
 In general, the order of the CSS selectors do not affect which rules get applied to your CSS,
 unless the selectors have the same specificity and apply to at least one element in common.
 Well-written CSS will work perfectly fine even when the selectors are re-ordered (for example, when reordering imports in a css file). In the real world, it's hard to achieve this, especially
-when we import CSS via gulp or third-party CSS (which can change at any time).
+when we import third-party CSS (which can change at any time).
 
 ### How to calculate Specificity
 
@@ -68,8 +75,8 @@ To compute specificity, use this online calculator: https://specificity.keegan.s
    build GET FOUC. [FOUC (Flash Of Unstyled Content)](#fouc) is a really bad UX. Use caution
    and best effort to STAY AWAY from using elements/classes that are a result of
    BUILDing in the CSS.
-   - A good example would be amp-selector.
-   - A bad example would be amp-accordion (See the [Case Studies](#case-studies) below).
+    - A good example would be amp-selector.
+    - A bad example would be amp-accordion (See the [Case Studies](#case-studies) below).
 3. Keep the Selector as simple as possible and ensure it's readable.
 
 ### Modifying an existing Selector
@@ -87,13 +94,13 @@ selector that has higher specificity.
 4. DO NOT move properties to a selector with high specificity at any cost! This is a
    **BREAKING change**.
 5. Remember there are 2 types of properties:
-   - Overridable
-   - Non-overridable: The ones suffixed with `!important`
-     - These properties can be shifted around easily. However, BE CAUTIOUS
-       when you suffix an existing property with `!important` because this is ALWAYS
-       going to BREAK backwards compatibility (but could fix issues).
-     - Always add `!important` during the first pass, and plan for it during design or
-       early implementation phases.
+    - Overridable
+    - Non-overridable: The ones suffixed with `!important`
+        - These properties can be shifted around easily. However, BE CAUTIOUS
+          when you suffix an existing property with `!important` because this is ALWAYS
+          going to BREAK backwards compatibility (but could fix issues).
+        - Always add `!important` during the first pass, and plan for it during design or
+          early implementation phases.
 
 ### FOUC
 
@@ -176,9 +183,9 @@ Fixing PR: https://github.com/ampproject/amphtml/commit/e12deb125bc0bed16d33481e
 +}
 ```
 
-- Breaking change: https://github.com/ampproject/amphtml/commit/f2a361651b4b4d1d484c6cd9502c895695545d
-- GH Issue : https://github.com/ampproject/amphtml/issues/10224
-- Partial Rollback: https://github.com/ampproject/amphtml/pull/10225
+-   Breaking change: https://github.com/ampproject/amphtml/commit/f2a361651b4b4d1d484c6cd9502c895695545d
+-   GH Issue : https://github.com/ampproject/amphtml/issues/10224
+-   Partial Rollback: https://github.com/ampproject/amphtml/pull/10225
 
 The lesson learnt here is that even though the breaking CSS was a good change (it fixed the FOUC
 due to the class introduced at BUILD), it moved properties from a selector with LOWER
@@ -186,6 +193,6 @@ specificity to HIGHER specificity, which breaks backward compatibility.
 
 ## Reading material
 
-- https://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/
-- https://csswizardry.com/2012/05/keep-your-css-selectors-short/
-- https://philipwalton.com/articles/do-we-actually-need-specificity-in-css/
+-   https://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/
+-   https://csswizardry.com/2012/05/keep-your-css-selectors-short/
+-   https://philipwalton.com/articles/do-we-actually-need-specificity-in-css/
diff --git a/examples/.eslintrc.js b/examples/.eslintrc.js
new file mode 100644
index 0000000000000..83f2de14a4c38
--- /dev/null
+++ b/examples/.eslintrc.js
@@ -0,0 +1,78 @@
+/**
+ * Copyright 2021 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.
+ */
+
+module.exports = {
+  'rules': {
+    'jsdoc/check-param-names': 0,
+    'jsdoc/check-tag-names': 0,
+    'jsdoc/check-types': 0,
+    'jsdoc/require-param-name': 0,
+    'jsdoc/require-param-type': 0,
+    'jsdoc/require-param': 0,
+    'jsdoc/require-returns-type': 0,
+    'jsdoc/require-returns': 0,
+    'local/no-array-destructuring': 0,
+    'local/no-bigint': 0,
+    'local/no-deep-destructuring': 0,
+    'local/no-dynamic-import': 0,
+    'local/no-es2015-number-props': 0,
+    'local/no-export-side-effect': 0,
+    'local/no-forbidden-terms': 0,
+    'local/no-function-async': 0,
+    'local/no-function-generator': 0,
+    'local/no-global': 0,
+    'local/no-has-own-property-method': 0,
+    'local/no-import-meta': 0,
+    'local/no-import-rename': 0,
+    'local/no-import': 0,
+    'local/no-invalid-this': 0,
+    'local/no-is-amp-alt': 0,
+    'local/no-log-array': 0,
+    'local/no-mixed-operators': 0,
+    'local/no-module-exports': 0,
+    'local/no-rest': 0,
+    'local/no-spread': 0,
+    'local/no-static-this': 0,
+    'local/no-style-display': 0,
+    'local/no-style-property-setting': 0,
+    'local/no-unload-listener': 0,
+    'local/preact': 0,
+    'local/prefer-deferred-promise': 0,
+    'local/prefer-destructuring': 0,
+    'local/prefer-spread-props': 0,
+    'local/prefer-unnested-spread-objects': 0,
+    'local/private-prop-names': 0,
+    'local/query-selector': 0,
+    'require-jsdoc': 0,
+  },
+  'overrides': [
+    {
+      'files': ['!visual-tests/**/*.js'],
+      'rules': {
+        'no-undef': 0,
+        'no-unused-vars': 0,
+        'no-var': 0,
+        'warnings': 0,
+      },
+    },
+    {
+      'files': ['visual-tests/**/*.js'],
+      'env': {
+        'node': true,
+      },
+    },
+  ],
+};
diff --git a/examples/OWNERS b/examples/OWNERS
index 66f01bd6d028e..55a36524d91d2 100644
--- a/examples/OWNERS
+++ b/examples/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/examples/ac-creative.js b/examples/ac-creative.js
index 56aa7c853b53e..76e4cd1d3f113 100644
--- a/examples/ac-creative.js
+++ b/examples/ac-creative.js
@@ -1,46 +1,57 @@
-if (!window.context){
+/**
+ * Copyright 2017 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.
+ */
+if (!window.context) {
   // window.context doesn't exist yet, must perform steps to create it
   // before using it
-  console.log("window.context NOT READY");
-
-  // must add listener for the creation of window.context
-  window.addEventListener('amp-windowContextCreated', function(){
-    console.log("window.context created and ready to use");
-    window.context.onResizeSuccess(resizeSuccessCallback);
-    window.context.onResizeDenied(resizeDeniedCallback);
-  });
+  console.log('window.context NOT READY');
 
   // load ampcontext-lib.js which will create window.context
   ampContextScript = document.createElement('script');
-  ampContextScript.src = "https://localhost:8000/dist.3p/current/ampcontext-lib.js";
+  ampContextScript.src =
+    'https://localhost:8000/dist.3p/current/ampcontext-lib.js';
   document.head.appendChild(ampContextScript);
 }
 
-function intersectionCallback(payload){
-  var changes = payload.changes;
+function intersectionCallback(changes) {
   // Code below is simply an example.
   var latestChange = changes[changes.length - 1];
 
-  // Amp-ad width and height.
-  var w = latestChange.boundingClientRect.width;
-  var h = latestChange.boundingClientRect.height;
+  var {
+    // Amp-ad width and height.
+    height: h,
+    width: w,
 
-  // Visible width and height.
-  var vw = latestChange.intersectionRect.width;
-  var vh = latestChange.intersectionRect.height;
+    // Position in the viewport.
+    x: vx,
+    y: vy,
+  } = latestChange.boundingClientRect;
 
-  // Position in the viewport.
-  var vx = latestChange.boundingClientRect.x;
-  var vy = latestChange.boundingClientRect.y;
+  var {
+    // Visible width and height.
+    height: vh,
+    width: vw,
+  } = latestChange.intersectionRect;
 
   // Viewable percentage.
-  var viewablePerc = (vw * vh) / (w * h) * 100;
+  var viewablePerc = ((vw * vh) / (w * h)) * 100;
 
   console.log(viewablePerc, w, h, vw, vh, vx, vy);
-
 }
 
-function dummyCallback(changes){
+function dummyCallback(changes) {
   console.log(changes);
 }
 
@@ -49,27 +60,8 @@ var stopVisFunc;
 var shouldStopInt = false;
 var stopIntFunc;
 
-function resizeSuccessCallback(requestedHeight, requestedWidth){
-  console.log("Success!");
-  console.log(this);
-  resizeTo(requestedHeight, requestedWidth);
-  console.log(requestedHeight);
-  console.log(requestedWidth);
-}
-
-function resizeTo(height, width){
-  this.innerWidth = width;
-  this.innerHeight = height;
-}
-
-function resizeDeniedCallback(requestedHeight, requestedWidth){
-  console.log("DENIED");
-  console.log(requestedHeight);
-  console.log(requestedWidth);
-}
-
-function toggleObserveIntersection(){
-  if (shouldStopInt){
+function toggleObserveIntersection() {
+  if (shouldStopInt) {
     stopIntFunc();
   } else {
     stopIntFunc = window.context.observeIntersection(intersectionCallback);
@@ -77,11 +69,24 @@ function toggleObserveIntersection(){
   shouldStopInt = !shouldStopInt;
 }
 
-function toggleObserveVisibility(){
-  if (shouldStopVis){
+function toggleObserveVisibility() {
+  if (shouldStopVis) {
     stopVisFunc();
   } else {
     stopVisFunc = window.context.observePageVisibility(dummyCallback);
   }
   shouldStopVis = !shouldStopVis;
 }
+
+function resizeAd() {
+  window.context
+    .requestResize(500, 600)
+    .then(function () {
+      console.log('Success!');
+      this.innerWidth = 500;
+      this.innerHeight = 600;
+    })
+    .catch(function () {
+      console.log('DENIED');
+    });
+}
diff --git a/examples/accordion.amp.html b/examples/accordion.amp.html
index e4d61aaafa597..dcabe7d38ebad 100644
--- a/examples/accordion.amp.html
+++ b/examples/accordion.amp.html
@@ -8,11 +8,6 @@
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
-  <script>
-      (self.AMP = self.AMP || []).push(function(AMP) {
-        AMP.toggleExperiment('amp-accordion-display-locking', true);
-      });
-  </script>
   <style amp-custom>
     .menu {
       padding: 1em;
@@ -52,7 +47,7 @@ <h3>MENU</h3>
             <section id="item1" on="expand:ac2.collapse(section='item2'),AMP.setState({expandAc1: true});collapse:AMP.setState({expandAc1: false})" [data-expand]="expandAc1">
               <h1>Item 1 (Expanding it closes Item 2)</h1>
               <div>
-                <p id="initClosed">1A</p>
+                <p>1A</p>
                 <p>1B</p>
               </div>
             </section>
@@ -89,15 +84,16 @@ <h2>Section 1</h2>
         controls>
     </amp-video>
     </section>
-    <section expanded>
+    <section>
       <h2>Section 2</h2>
-      <div>Bunch of awesome content</div>
+      <div id="initClosed">Bunch of awesome content</div>
     </section>
     <section>
       <h2>Section 3</h2>
       <div>
           <amp-img src="./img/sea@1x.jpg" width="300" height="300"></amp-img>
           Check out the sea!
+          <input>
       </div>
     </section>
     <section>
@@ -111,7 +107,7 @@ <h2>Nested section</h2>
     </section>
     <section>
       <header>The header tag is supported as well.</header>
-      <p>Even more awesome.</p>
+      <p>Even more awesome. <input> </p>
     </section>
   </amp-accordion>
 </body>
diff --git a/examples/ads.amp.html b/examples/ads.amp.html
deleted file mode 100644
index 76c129ddb9720..0000000000000
--- a/examples/ads.amp.html
+++ /dev/null
@@ -1,2531 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Ad examples</title>
-  <link rel="canonical" href="http://nonblocking.io/" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <style amp-custom>
-    .broken {
-      color: red;
-    }
-    amp-ad {
-      border: 1px solid #ccc;
-      max-width: 500px;
-    }
-    .red {
-      background-color: red;
-    }
-    .filterBar {
-      background: #eee;
-      padding: 3px;
-      font-size: 1.2em;
-    }
-    select {
-      border: 1px solid #999;
-    }
-    input[type=submit] {
-      font-size: 14px;
-      border: 1px solid #999;
-      border-radius: 3px;
-      margin-left: 10px;
-    }
-    amp-ad[type="revcontent"] {
-      width: 100%;
-      max-width: 1280px;
-      margin: 18px 0;
-      padding: 0;
-    }
-    amp-ad[type="nativo"] {
-      width: 100%;
-      max-width: 1280px;
-      margin: 18px 0;
-      padding: 0;
-      height:100px;
-    }
-    amp-ad[type="adsloom"] {
-      width: 100%;
-      max-width: 980px;
-      margin: 18px auto;
-      padding: 0;
-    }
-  </style>
-  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
-  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
-  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
-  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <div class="filterBar">
-    <form action="ads.amp.html" method="get" target="_top">
-      <label for="filter">Ad network filter</label>
-      <select id="filter" name="type">
-        <option>[Select an ad network]</option>
-        <!--
-          When adding new ad network to the list, please
-          1) verify that the ad slot loads ad. Check DEVELOPMENT.md for how to
-             run a local server.
-          2) keep the list in alphabetic order
-        -->
-        <option>1wo</option>
-        <option>24smi</option>
-        <option>a8</option>
-        <option>a9</option>
-        <option>accesstrade</option>
-        <option>adagio</option>
-        <option>adblade</option>
-        <option>adbutler</option>
-        <option>adfox</option>
-        <option>adgeneration</option>
-        <option>adglare</option>
-        <option>adhese</option>
-        <option>adincube</option>
-        <option>adition</option>
-        <option>adman</option>
-        <option>admanmedia</option>
-        <option>admixer</option>
-        <option>adocean</option>
-        <option>adop</option>
-        <option>adpicker</option>
-        <option>adplugg</option>
-        <option>adpon</option>
-        <option>adreactor</option>
-        <option>adsense</option>
-        <option>adsensor</option>
-        <option>adservsolutions</option>
-        <option>adsloom</option>
-        <option>adsnative</option>
-        <option>adspeed</option>
-        <option>adspirit</option>
-        <option>adstir</option>
-        <option>adstyle</option>
-        <option>adtech</option>
-        <option>adthrive</option>
-        <option>adunity</option>
-        <option>aduptech</option>
-        <option>adventive</option>
-        <option>adverline</option>
-        <option>adverticum</option>
-        <option>advertserve</option>
-        <option>adyoulike</option>
-        <option>affiliateb</option>
-        <option>aja</option>
-        <option>amoad</option>
-        <option>aniview</option>
-        <option>anyclip</option>
-        <option>appnexus</option>
-        <option>appvador</option>
-        <option>atomx</option>
-        <option>baidu</option>
-        <option>beaverads</option>
-        <option>beopinion</option>
-        <option>bidtellect</option>
-        <option>blade</option>
-        <option>brainy</option>
-        <option>bringhub</option>
-        <option>byplay</option>
-        <option>caajainfeed</option>
-        <option>capirs</option>
-        <option>caprofitx</option>
-        <option>cedato</option>
-        <option>conative</option>
-        <option>connatix</option>
-        <option>contentad</option>
-        <option>criteo</option>
-        <option>csa</option>
-        <option>custom</option>
-        <option>dable</option>
-        <option>directadvert</option>
-        <option>distroscale</option>
-        <option>dotandads</option>
-        <option>doubleclick</option>
-        <option>dynad</option>
-        <option>eadv</option>
-        <option>eas</option>
-        <option>empower</option>
-        <option>Engageya</option>
-        <option>epeex</option>
-        <option>eplanning</option>
-        <option>ezoic</option>
-        <option>f1e</option>
-        <option>f1h</option>
-        <option>felmat</option>
-        <option>flite</option>
-        <option>fluct</option>
-        <option>forkmedia</option>
-        <option>freewheel</option>
-        <option>fusion</option>
-        <option>genieessp</option>
-        <option>giraff</option>
-        <option>gmossp</option>
-        <option>gumgum</option>
-        <option>holder</option>
-        <option>ibillboard</option>
-        <option>idealmedia</option>
-        <option>imedia</option>
-        <option>imobile</option>
-        <option>imonomy</option>
-        <option>industrybrains</option>
-        <option>inmobi</option>
-        <option>innity</option>
-        <option>insticator</option>
-        <option>invibes</option>
-        <option>ix</option>
-        <option>jubna</option>
-        <option>kargo</option>
-        <option>kiosked</option>
-        <option>kixer</option>
-        <option>kuadio</option>
-        <option>lentainform</option>
-        <option>ligatus</option>
-        <option>lockerdome</option>
-        <option>logly</option>
-        <option>loka</option>
-        <option>mads</option>
-        <option>mantis-display</option>
-        <option>mediaad</option>
-        <option>marfeel</option>
-        <option>medianet</option>
-        <option>mediavine</option>
-        <option>meg</option>
-        <option>mgid</option>
-        <option>microad</option>
-        <option>miximedia</option>
-        <option>mixpo</option>
-        <option>monetizer101</option>
-        <option>mox</option>
-        <option>my6sense</option>
-        <option>mytarget</option>
-        <option>mywidget</option>
-        <option>nativeroll</option>
-        <option>nativery</option>
-        <option>nativo</option>
-        <option>navegg</option>
-        <option>nend</option>
-        <option>netletix</option>
-        <option>noddus</option>
-        <option>nokta</option>
-        <option>nws</option>
-        <option>onead</option>
-        <option>onnetwork</option>
-        <option>openadstream</option>
-        <option>openx</option>
-        <option>opinary</option>
-        <option>outbrain</option>
-        <option>pixels</option>
-        <option>plista</option>
-        <option>polymorphicads</option>
-        <option>popin</option>
-        <option>ppstudio</option>
-        <option>pressboard</option>
-        <option>promoteiq</option>
-        <option>pubexchange</option>
-        <option>pubmine</option>
-        <option>pulsepoint</option>
-        <option>puffnetwork</option>
-        <option>purch</option>
-        <option>rakutenunifiedads</option>
-        <option>rbinfox</option>
-        <option>readmo</option>
-        <option>realclick</option>
-        <option>recomad</option>
-        <option>relap</option>
-        <option>revcontent</option>
-        <option>revjet</option>
-        <option>rfp</option>
-        <option>rnetplus</option>
-        <option>rubicon</option>
-        <option>runative</option>
-        <option>sas</option>
-        <option>seedingalliance</option>
-        <option>sekindo</option>
-        <option>sharethrough</option>
-        <option>shemedia</option>
-        <option>sklik</option>
-        <option>slimcutmedia</option>
-        <option>smartadserver</option>
-        <option>smartclip</option>
-        <option>smi2</option>
-        <option>smilewanted</option>
-        <option>sogouad</option>
-        <option>sortable</option>
-        <option>sovrn</option>
-        <option>speakol</option>
-        <option>spotx</option>
-        <option>springAds</option>
-        <option>ssp</option>
-        <option>strossle</option>
-        <option>sulvo</option>
-        <option>sunmedia</option>
-        <option>svknative</option>
-        <option>swoop</option>
-        <option>taboola</option>
-        <option>tcsemotion</option>
-        <option>teads</option>
-        <option>temedya</option>
-        <option>torimochi</option>
-        <option>tracdelight</option>
-        <option>triplelift</option>
-        <option>trugaze</option>
-        <option>uas</option>
-        <option>ucfunnel</option>
-        <option>unruly</option>
-        <option>uzou</option>
-        <option>valuecommerce</option>
-        <option>vdo.ai</option>
-        <option>videointelligence</option>
-        <option>videonow</option>
-        <option>viralize</option>
-        <option>vmfive</option>
-        <option>webediads</option>
-        <option>weborama</option>
-        <option>widespace</option>
-        <option>wisteria</option>
-        <option>whopainfeed</option>
-        <option>wpmedia</option>
-        <option>xlift</option>
-        <option>yahoo</option>
-        <option>yahoofedads</option>
-        <option>yahoojp</option>
-        <option>yahoonativeads</option>
-        <option>yandex</option>
-        <option>yengo</option>
-        <option>yieldbot</option>
-        <option>yieldmo</option>
-        <option>yieldpro</option>
-        <option>zedo</option>
-        <option>zen</option>
-        <option>zergnet</option>
-        <option>zucks</option>
-      </select>
-      <input type="submit" value="Go">
-    </form>
-  </div>
-
-  <h2>1WO</h2>
-  <amp-embed
-      width="400"
-      height="700"
-      type="1wo"
-      data-owo-code="c67805ef-2cc3-482c-9067-70f534016259"
-      data-owo-type="widget"
-      data-owo-mode="smart3"
-      src="https://frontend-qa.1worldonline.biz/poller-constructor.js">
-  </amp-embed>
-
-  <h2>24smi</h2>
-  <amp-embed width="250" height="250"
-      type="24smi"
-      src="https://jsn.24smi.net/c/2/11232.js">
-  </amp-embed>
-
-  <amp-embed width="250" height="250"
-      type="24smi"
-      data-blockid="11232">
-  </amp-embed>
-
-  <h2>A8</h2>
-  <amp-ad width="300" height="250"
-      type="a8"
-      data-aid="170223075073"
-      data-wid="001"
-      data-eno="01"
-      data-mid="s00000016751001031000"
-      data-mat="2TCGYR-17GNXU-3L92-64Z8X"
-      data-type="static">
-  </amp-ad>
-
-  <h2>A9 Search Ads</h2>
-  <amp-ad width="400" height="300"
-      type = "a9"
-      data-amzn_assoc_placement = "adunit0"
-      data-amzn_assoc_search_bar = "true"
-      data-amzn_assoc_tracking_id = "deepak2015-20"
-      data-amzn_assoc_search_bar_position = "bottom"
-      data-amzn_assoc_ad_mode = "search"
-      data-amzn_assoc_ad_type = "smart"
-      data-amzn_assoc_marketplace = "amazon"
-      data-amzn_assoc_region = "US"
-      data-amzn_assoc_title = "Shop Related Products"
-      data-amzn_assoc_default_search_phrase = "apple watches"
-      data-amzn_assoc_default_category = "All"
-      data-amzn_assoc_linkid = "b01186f9b305e15fc51214bb45187875"
-      data-regionurl = "https://z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US">
-  </amp-ad>
-
-  <h2>A9 Recom Unsaved</h2>
-  <amp-ad width="400" height="300"
-     type = "a9"
-     data-amzn_assoc_placement = "adunit0"
-     data-amzn_assoc_search_bar = "true"
-     data-amzn_assoc_tracking_id = "subhojitus-20"
-     data-amzn_assoc_search_bar_position = "bottom"
-     data-amzn_assoc_ad_mode = "auto"
-     data-amzn_assoc_ad_type = "smart"
-     data-amzn_assoc_marketplace = "amazon"
-     data-amzn_assoc_region = "US"
-     data-amzn_assoc_title = "Related Products"
-     data-amzn_assoc_linkid = "619af83d37b0fb680e58989de71cd121"
-     data-amzn_assoc_debug = "true"
-     data-amzn_assoc_rows = "1"
-     data-amzn_assoc_overrides = "false"
-     data-amzn_assoc_ead = 8
-     data-amzn_assoc_fallback_mode = '"type": "search", "value": "steve jobs"'
-     data-amzn_assoc_url = "https://techcrunch.com/2018/02/05/visa-and-mastercard-make-it-harder-to-buy-bitcoin-and-other-cryptocurrencies"
-     data-amzn_assoc_aax_src_id = "330"
-     data-amzn_assoc_force_win_bid = "true">
-  </amp-ad>
-
-  <h2>A9 Custom Ads</h2>
-  <amp-ad width="600" height="250"
-      type = "a9"
-      data-amzn_assoc_placement = "adunit0"
-      data-amzn_assoc_search_bar = "true"
-      data-amzn_assoc_tracking_id = "deepak0004-20"
-      data-amzn_assoc_ad_mode = "manual"
-      data-amzn_assoc_ad_type = "smart"
-      data-amzn_assoc_marketplace = "amazon"
-      data-amzn_assoc_region = "US"
-      data-amzn_assoc_title = "My Amazon Picks"
-      data-amzn_assoc_linkid = "c5772783a7d25620cd6226c5cc5885c8"
-      data-amzn_assoc_asins = "B001AWZDA4,B07BFTFYZC,B06XD8XQWK,B018HTGSN8">
-  </amp-ad>
-
-  <h2>A9 Recom Ads Sync</h2>
-  <amp-ad width="300" height="250"
-     type = "a9"
-     data-amzn_assoc_ad_mode = "auto"
-     data-recomtype = "sync"
-     data-adinstanceid = "fe746097-f142-4f8d-8dfb-45ec747632e5"
-     data-regionurl = "https://z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US">
-  </amp-ad>
-
-  <h2>A9 Recom Ads Async</h2>
-  <amp-ad width="300" height="250"
-     type = "a9"
-     data-amzn_assoc_ad_mode = "auto"
-     data-divid = "amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
-     data-recomtype = "async"
-     data-adinstanceid = "fe746097-f142-4f8d-8dfb-45ec747632e5">
-  </amp-ad>
-
-
-  <h2>AccessTrade</h2>
-  <amp-ad width="300" height="250"
-      type="accesstrade"
-      data-atops="r"
-      data-atrotid="00000000000008c06y">
-  </amp-ad>
-
-  <h2>Ad.Agio</h2>
-  <amp-ad width=300 height=250
-      type="adagio"
-      data-sid="39"
-      data-loc="amp_ampw_amps_ampp_300x250"
-      data-keywords=""
-      data-uservars="">
-  </amp-ad>
-
-  <h2>Adblade</h2>
-  <amp-ad width="300" height="250"
-      type="adblade"
-      data-width="300"
-      data-height="250"
-      data-cid="19626-3798936394">
-  </amp-ad>
-
-  <h2>AdButler</h2>
-  <amp-ad width="300" height="250"
-      type="adbutler"
-      data-account="167283"
-      data-zone="212491">
-  </amp-ad>
-
-  <h2>adincube</h2>
-  <amp-ad width="300" height="250"
-      type="adincube"
-      data-ad-type="in_content"
-      data-site-key="TEST_WEBSITE_KEY">
-  </amp-ad>
-
-  <h2>ADITION</h2>
-  <amp-ad width="300" height="250"
-      type="adition"
-      data-version="1"
-      data-wp_id="3470234">
-  </amp-ad>
-
-  <h2>Ad Generation</h2>
-  <amp-ad width="320" height="50"
-      type="adgeneration"
-      data-id="10722">
-  </amp-ad>
-
-  <h2>AdGlare</h2>
-  <amp-ad width="300" height="250" layout="responsive"
-      type="adglare"
-      data-host="try"
-      data-zid="810958668"
-      data-keywords="blue,car">
-  </amp-ad>
-
-  <h2>Adhese</h2>
-  <amp-ad width=300 height=250
-      type="adhese"
-      data-location="_sdk_amp_"
-      data-position=""
-      data-format="amprectangle"
-      data-account="demo"
-      data-request-type="ad">
-    <div placeholder></div>
-    <div fallback></div>
-  </amp-ad>
-
-  <amp-ad width=300 height=250
-      type="adhese"
-      data-location="_sdk_amp_"
-      data-position=""
-      data-format="amprectangle"
-      data-account="demo"
-      data-request-type="ad"
-      json='{"targeting":{"br": ["sport", "info"],"dt": ["desktop"]}}'>
-    <div placeholder></div>
-    <div fallback></div>
-  </amp-ad>
-
-  <h2 id="adfox">AdFox</h2>
-  <amp-ad width="248" height="408"
-      type="adfox"
-      data-owner-id="208087"
-      data-adfox-params='{"pt": "b","p1": "bsoji","p2": "feil","pct": "a","pfc": "bbhfo","pfb": "cwrtv"}'>
-  </amp-ad>
-
-  <h2>Adman</h2>
-  <amp-ad width="300" height="250"
-      type="adman"
-      data-ws="17342"
-      data-s="300x250"
-      data-host="talos.adman.gr">
-  </amp-ad>
-
-  <h2>AdmanMedia</h2>
-  <amp-ad width="300" height="250"
-      type="admanmedia"
-      data-id="8e916419">
-  </amp-ad>
-
-  <h2>Admixer</h2>
-  <amp-ad width="300" height="250"
-      type="admixer"
-      data-sizes="[[300,250]]"
-      data-zone="2eb6bd58-865c-47ce-af7f-a918108c3fd2">
-  </amp-ad>
-  <amp-ad type="admixer" width="300" height="300" layout="responsive"
-      data-sizes="[[300,250],[300,300]]"
-      data-zone="2eb6bd58-865c-47ce-af7f-a918108c3fd2">
-    <div fallback>asd</div>
-  </amp-ad>
-
-  <h2>AdOcean</h2>
-  <amp-ad width="300" height="250"
-          type="adocean"
-          data-ao-mode="sync"
-          data-ao-emitter="myao.adocean.pl"
-          data-ao-id="ado-vf2X22YCNzPRUVYmLg.jQb53Xb1BcMbzJlwIv7SLH_f.97"
-          data-ao-preview="true"
-          data-ao-keys="key1,key2,key3"
-          data-ao-vars='{"a":"b","c":"d"}'
-          data-ao-clusters='{"clusterA":[-1,2,-3,63], "clusterB":[1,-63]}'
-          >
-  </amp-ad>
-
-  <amp-ad width="300" height="250"
-          type="adocean"
-          data-ao-mode="buffered"
-          data-ao-emitter="myao.adocean.pl"
-          data-ao-id="ado-vf2X22YCNzPRUVYmLg.jQb53Xb1BcMbzJlwIv7SLH_f.97"
-          data-ao-preview="true"
-          data-ao-keys="key1,key2,key3"
-          data-ao-vars='{"a":"b","c":"d"}'
-          data-ao-clusters='{"clusterA":[-1,2,-3,63], "clusterB":[1,-63]}'
-          >
-  </amp-ad>
-
-  <h2>AdOcean master-slave</h2>
-  <amp-ad width="300" height="250"
-          type="adocean"
-          data-ao-emitter="myao.adocean.pl"
-          data-ao-master="FDyQKk0qN2a9SxwCMal6Eove..r_lvBE3pPfr_Ier9..f7"
-          data-ao-id="adoceanmyaonhqnqukjtt"
-          data-ao-mode="buffered"
-          data-ao-preview="true"
-          data-ao-keys="key1,key2,key3"
-          data-ao-vars='{"a":"b","c":"d"}'
-          data-ao-clusters='{"clusterA":[-1,2,-3,63], "clusterB":[1,-63]}'
-          >
-  </amp-ad>
-
-  <amp-ad width="300" height="250"
-          type="adocean"
-          data-ao-emitter="myao.adocean.pl"
-          data-ao-master="FDyQKk0qN2a9SxwCMal6Eove..r_lvBE3pPfr_Ier9..f7"
-          data-ao-id="adoceanmyaokiheeseoko"
-          data-ao-mode="buffered"
-          data-ao-preview="true"
-          data-ao-keys="key1,key2,key3"
-          data-ao-vars='{"a":"b","c":"d"}'
-          data-ao-clusters='{"clusterA":[-1,2,-3,63], "clusterB":[1,-63]}'
-          >
-  </amp-ad>
-
-  <h2>Adop</h2>
-  <amp-ad width="300" height="250"
-          type="adop"
-          data-z="a3a8014f-0b5f-46dd-a0db-a2ae686541ef"></amp-ad>
-
-  <h2>AdPicker</h2>
-  <amp-ad width="300" height="250"
-      type="adpicker"
-      data-ph="4p7hhqa73u">
-  </amp-ad>
-
-  <h2>AdPlugg</h2>
-  <amp-ad width="300" height="250"
-      type="adplugg"
-      data-access-code="A48214096"
-      data-zone="my_amp_zone_300x250">
-  </amp-ad>
-
-  <h2>Adpon</h2>
-  <amp-ad width="300" height="250"
-          type="adpon"
-          data-fid="363">
-  </amp-ad>
-
-  <h2>AdReactor</h2>
-  <amp-ad width="728" height="90"
-      type="adreactor"
-      data-pid=790
-      data-zid=9
-      data-custom3="No Type">
-  </amp-ad>
-
-  <h2>AdSense</h2>
-  <amp-ad width="300" height="250"
-      type="adsense"
-      data-ad-client="ca-pub-2005682797531342"
-      data-ad-slot="7046626912">
-  </amp-ad>
-
-  <h2>AdSensor</h2>
-  <amp-ad width="300" height="250"
-      type="adsensor"
-      data-application-id="2697"
-      data-adunit-id="1226710">
-  </amp-ad>
-  <amp-ad width="728" height="90"
-      type="adsensor"
-      data-application-id="2697"
-      data-adunit-id="1226707">
-  </amp-ad>
-
-  <h2>AdServSolutions</h2>
-  <amp-ad width="300" height="250"
-      type="adservsolutions"
-      data-client="adservsolutions.com"
-      data-zid="1953913050">
-  </amp-ad>
-
-  <h2>AdsLoom</h2>
-  <amp-ad width="800" height="600"
-             type="adsloom"
-             layout="responsive"
-             data-widget-id="1079">
-  </amp-ad>
-
-  <h2>AdsNative</h2>
-  <amp-ad width="300" height="250"
-      type="adsnative"
-      data-anapiid="t8AjW-y8rudFGzKft_YQcBZG1-aGZ5otj5QdsKaP"
-      data-ancat="IAB1,IAB2"
-      data-antid="abc"
-      data-ankv="key:val,key:val2">
-  </amp-ad>
-
-  <h2>AdSpeed</h2>
-  <amp-ad width="300" height="250"
-      type="adspeed"
-      data-zone="82441"
-      data-client="3">
-  <div placeholder></div>
-  <div fallback></div>
-  </amp-ad>
-
-  <h2>AdSpirit</h2>
-  <amp-ad width="300" height="250"
-      type="adspirit"
-      data-asm-params="&amp;pid=4"
-      data-asm-host="help.adspirit.de">
-  </amp-ad>
-
-  <h2>AdStir 320x50 banner</h2>
-  <amp-ad width="320" height="50"
-      type="adstir"
-      data-app-id="MEDIA-343ded3e"
-      data-ad-spot="1">
-  </amp-ad>
-
-  <h2>AdStyle responsive widget</h2>
-  <amp-embed width="400" height="260"
-          type="adstyle"
-          layout="responsive"
-          data-widget="1"
-          heights="(max-width: 320px) 933px,
-        (max-width: 360px) 1087px,
-        (max-width: 375px) 1138px,
-        (max-width: 412px) 1189px,
-        (max-width: 414px) 1072px,
-        (max-width: 568px) 1151px,
-        (max-width: 640px) 1128px,
-        (max-width: 667px) 1151px,
-        (max-width: 732px) 1211px,
-        (max-width: 736px) 1151px,
-        (max-width: 768px) 633px,
-        (max-width: 1024px) 711px,
-        86vw">
-  </amp-embed>
-
-  <h2>AdTech (1x1 fake image ad)</h2>
-  <amp-ad width="300" height="250"
-      type="adtech"
-      src="https://adserver.adtechus.com/addyn/3.0/5280.1/2274008/0/-1/ADTECH;size=300x250;key=plumber;alias=careerbear-ros-middle1;loc=300;;target=_blank;grp=27980912;misc=3767074">
-  </amp-ad>
-
-  <h2>AdThrive 320x50 banner</h2>
-  <amp-ad width="320" height="50"
-      type="adthrive"
-      data-site-id="test"
-      data-ad-unit="AdThrive_Content_1"
-      data-sizes="320x50">
-  </amp-ad>
-
-  <h2>AdUnity (300x250 demo banner)</h2>
-  <amp-ad
-      type="adunity"
-      width="300" height="250"
-      data-au-account="5057446857420"
-      data-au-site="test.site"
-      data-au-section
-      data-au-zone="rectangle"
-      data-au-isdemo="true">
-  </amp-ad>
-
-  <h2>AdThrive 300x250 banner</h2>
-  <amp-ad width="300" height="250"
-      type="adthrive"
-      data-site-id="test"
-      data-ad-unit="AdThrive_Content_2"
-      data-sizes="300x250">
-  </amp-ad>
-
-  <h2>Ad Up Technology</h2>
-  <amp-ad width="500" height="250"
-      type="aduptech"
-      layout="fixed"
-      data-placementkey="ae7906d535ce47fbb29fc5f45ef910b4"
-      data-query="reisen;mallorca;spanien"
-      data-adtest="1">
-  </amp-ad>
-
-  <h2>Adventive</h2>
-  <amp-ad width="300" height="250"
-    data-src="https://ads.adventive.com/ad?j&pid=c72f8c57-4bdb-4f84-ba46-8b34a2512501&type=4"
-    type="adventive">
-  </amp-ad>
-
-  <h2>Adverline</h2>
-  <amp-ad width="300" height="250"
-      type="adverline"
-      data-id=13625
-      data-plc=3>
-  </amp-ad>
-
-  <h2>Adverticum</h2>
-  <amp-ad width="285" height="350"
-     type="adverticum"
-     data-goa3zone="4316734"
-     data-costumeTargetString="bWFsYWM=">
-  </amp-ad>
-
-  <h2>AdvertServe</h2>
-  <amp-ad width="300" height="250"
-      type="advertserve"
-      data-client="tester"
-      data-pid=0
-      data-zid=68>
-  </amp-ad>
-
-  <h2>Adyoulike</h2>
-  <amp-ad
-       width="300"
-       height="250"
-       type="adyoulike"
-       data-placement="d135a2027b1041059f06fbf8cf4ddfef"
-       data-dc="fra01"
-       data-campaign="665253da9edc423f683a5306f22b883d">
-  </amp-ad>
-  <h2>Affiliate-B</h2>
-  <amp-ad width="300" height="250"
-      type="affiliateb"
-      data-afb_a="l44x-y174897c"
-      data-afb_p="g2m"
-      data-afb_t="i">
-  </amp-ad>
-
-  <h2>AJA</h2>
-  <amp-ad width="300" height="250"
-      type="aja"
-      layout="responsive"
-      data-asi="xWc2iVRZR">
-  </amp-ad>
-
-  <h2>AMoAd banner</h2>
-  <amp-ad width="300" height="250"
-      type="amoad"
-      data-ad-type="banner"
-      data-sid="62056d310111552c951d19c06bfa71e16e615e39493eceff667912488bc576a6">
-  </amp-ad>
-
-  <h2>AMoAd native</h2>
-  <amp-ad width="320" height="100"
-      type="amoad"
-      data-ad-type="native"
-      data-sid="62056d310111552c951d19c06bfa71e1bc19eea7e94d0a6e73e46a9402dbee47">
-  </amp-ad>
-
-  <h2>Aniview</h2>
-  <amp-ad width="640" height="360"
-          type="aniview"
-          data-publisherId="55b88d4a181f465b3e8b4567"
-          data-channelId="5a5f17a728a06102d14c2718">
-  </amp-ad>
-
-  <h2>AnyClip</h2>
-  <amp-ad
-    width="480"
-    height="300"
-    layout="responsive"
-    type="anyclip"
-    data-pubname="lre_qa_temp"
-    data-widgetname="amp_test_autoplay"
-    data-ac-embed-mode="plain"
-    data-ourl="https://anyclip.com/"
-  >
-  </amp-ad>
-
-  <h2>AppNexus with JSON based configuration multi ad</h2>
-  <amp-ad width="728" height="90" type="appnexus" data-target="apn_ad_2"
-      json='{"pageOpts":{"member": 958}, "adUnits": [{"disablePsa": true, "tagId": 6063968,"sizes": [300,250],"targetId": "apn_ad_1"}, {"tagId": 6063968,"sizes": [728,90],"targetId":"apn_ad_2"}]}'>
-  </amp-ad>
-  <!-- There could be no creative rendered for this tag, this is to test the behaviour when there are no bids for a tag -->
-  <amp-ad width="300" height="250" type="appnexus" data-target="apn_ad_1"
-      json='{"pageOpts":{"member": 958}, "adUnits": [{"disablePsa": true, "tagId": 6063968,"sizes": [300,250],"targetId": "apn_ad_1"}, {"tagId": 6063968,"sizes": [728,90],"targetId":"apn_ad_2"}]}'>
-  </amp-ad>
-
-  <amp-ad width="728" height="90" type="appnexus" data-target="apn_ad_3"
-      json='{"adUnits": [{"tagId": 6063968,"sizes": [728,90],"targetId":"apn_ad_3"}]}'>
-  </amp-ad>
-
-  <h2>AppVador</h2>
-  <amp-ad width="320" height="180"
-      type="appvador"
-      data-id="8c328a2daa6f9ce4693f57246cd86e0a">
-  </amp-ad>
-
-  <h2>Atomx</h2>
-  <amp-ad width="300" height="250"
-      type="atomx"
-      data-id="1234">
-  </amp-ad>
-
-  <h2>Baidu</h2>
-  <amp-ad width="300" height="250"
-      type="baidu"
-      data-cproid="u2697398">
-  </amp-ad>
-
-  <h2>BeaverAds</h2>
-  <amp-ad width="300" height="300"
-      type="beaverads"
-      data-block-id="1001038">
-  </amp-ad>
-
-  <amp-ad width="300" height="1"
-      type="beopinion"
-      layout="responsive"
-      data-name="slot_0"
-      data-my-content="0"
-      data-account="556f2afc6ebef601004fb60f">
-  </amp-ad>
-
-  <h2 id="bidtellect">Bidtellect</h2>
-  <amp-ad width=320 height=200
-      type="bidtellect"
-      data-t="20bc0442-8bec-43f8-9992-08be6e6a3591"
-      data-pid="925847381"
-      data-sid="216072">
-  </amp-ad>
-
-  <h2>Blade</h2>
-  <amp-ad width="300" height="250"
-      type="blade"
-      servingDomain="ssr.streamrail.net"
-      data-blade_player_type="blade"
-      data-blade_macros='{"page_url":"[PAGE_URL]",  "ip":"[IP]","ua":"[UA]","cb":"[CB]","dnt":"[DNT]","sub_id":"[SUB_ID]","user_consent":"[USER_CONTENT]","gdpr":"[GDPR]"}'
-      data-blade_player_id="5af16139cb938a00022c1326"
-      data-blade_api_key="5af15a3b02e28f0002000001">
-  </amp-ad>
-
-  <h2>brainy</h2>
-  <amp-ad width="300" height="250"
-      type="brainy"
-      data-aid="10"
-      data-slot-id="3347">
-  </amp-ad>
-
-  <h2>Broadstreet Ads</h2>
-  <amp-ad width="300" height="250"
-      type="broadstreetads"
-      data-network="229"
-      data-zone="63940">
-      <div placeholder></div>
-      <div fallback></div>
-  </amp-ad>
-
-  <h2>Bringhub Mini-Storefront</h2>
-  <amp-embed width="600" height="320"
-      type="bringhub"
-      layout="responsive"
-      heights="(max-width: 270px) 1280px, (max-width:553px) 640px, 338px">
-  </amp-embed>
-
-  <h2>ByPlay</h2>
-  <amp-ad width="400" height="225"
-    type="byplay"
-    data-vast-url="https://h.f1.impact-ad.jp/adv?section_id=7693&env=dev">
-  </amp-ad>
-
-  <h2>CA A.J.A. Infeed</h2>
-  <amp-ad width="320" height="120"
-      type="caajainfeed"
-      data-ad-spot="jqeto4eMJqk"
-      data-test="true">
-  </amp-ad>
-
-  <h2>CA ProFit-X</h2>
-  <!-- Ad placement with data-tagid is deprecated.
-    It will become invalid after all CA ProFit-X's
-    inventories are replaced by data-mediaid -->
-  <amp-ad width="320" height="50"
-      type="caprofitx"
-      data-tagid="17359">
-  </amp-ad>
-
-  <amp-ad width="320" height="50"
-      type="caprofitx"
-      data-mediaid="3752"
-      data-tag-places="17359">
-  </amp-ad>
-
-  <h2>Cedato</h2>
-  <amp-ad width="640" height="360"
-      type="cedato"
-      data-id="303084288">
-  </amp-ad>
-
-  <h2>Conative</h2>
-
-    <amp-ad
-        type="conative"
-        height="250"
-        width="300"
-        layout="responsive"
-        sizes="(min-width: 320px) 320px, 100vw"
-        data-domain="225"
-        data-adslot="1977"
-        data-preview="1">
-  </amp-ad>
-
-  <h2>Connatix</h2>
-  <amp-ad width="300" height="250"
-      type="connatix"
-      data-connatix={"data-connatix-token":"755145ed-72aa-4a35-bc6e-d5dcfb8837d2"}>
-  </amp-ad>
-
-  <h2>Content.ad Banner 320x50</h2>
-  <amp-ad width="320" height="50"
-      type="contentad"
-      data-id="80a26f7c-277a-4c9a-b541-1ae7304d8b06"
-      data-d="bm9uYmxvY2tpbmcuaW8="
-      data-wid="218710"
-      data-url="nonblocking.io">
-  </amp-ad>
-
-  <h2>Content.ad Banner 300x250</h2>
-  <amp-ad width="300" height="250"
-      type="contentad"
-      data-id="09a8809f-9e98-4c24-b076-3dc28c8a7f32"
-      data-d="bm9uYmxvY2tpbmcuaW8="
-      data-wid="218706"
-      data-url="nonblocking.io">
-  </amp-ad>
-
-  <h2>Content.ad Banner 300x250 2x2</h2>
-  <amp-ad width="300" height="250"
-      type="contentad"
-      data-id="7902c314-4cad-466e-9264-ecd333a2c757"
-      data-d="bm9uYmxvY2tpbmcuaW8="
-      data-wid="218705"
-      data-url="nonblocking.io">
-  </amp-ad>
-
-  <h2>Content.ad Banner 300x600</h2>
-  <amp-ad width="300" height="600"
-      type="contentad"
-      data-id="54115175-cb71-4905-9781-970c868059c1"
-      data-d="bm9uYmxvY2tpbmcuaW8="
-      data-wid="218708"
-      data-url="nonblocking.io">
-  </amp-ad>
-
-  <h2>Content.ad Banner 300x600 5x2</h2>
-  <amp-ad width="300" height="600"
-      type="contentad"
-      data-id="d5979da1-3686-4b8d-8bbc-9a94eb2d6a76"
-      data-d="bm9uYmxvY2tpbmcuaW8="
-      data-wid="218709"
-      data-url="nonblocking.io">
-  </amp-ad>
-
-  <h2>Criteo Passback</h2>
-  <p>Due to ad targeting, the slot might not load ad.</p>
-
-  <amp-ad width="300" height="250"
-      type="criteo"
-      data-tagtype="passback"
-      data-zone="314159">
-  </amp-ad>
-
-  <h2>CSA</h2>
-  <amp-ad width="auto" height="300"
-      type="csa"
-      layout="fixed-height"
-      data-afs-page-options='{"pubId": "partner-pub-9616389000213823", "query": "flowers"}'
-      data-afs-adblock-options='{"width": "auto", "number": 1}'>
-  </amp-ad>
-
-  <h2 id="custom">Custom leaderboard</h2>
-  <amp-ad width="500" height="60"
-      type="custom"
-      data-slot="1"
-      data-url="/examples/custom.ad.example.json">
-    <template type="amp-mustache" id="amp-template-id-leader">
-      <a href="{{href}}" target='_blank' rel="noopener noreferrer">
-        <amp-img layout='fixed' width="500" height="60" src="{{src}}" data-info="{{info}}"></amp-img>
-      </a>
-    </template>
-  </amp-ad>
-
-  <h2>Custom square</h2>
-  <amp-ad width="200" height="200"
-      type="custom"
-      data-slot="2"
-      data-url="/examples/custom.ad.example.json">
-    <template type="amp-mustache">
-      <a href="{{href}}" target="_blank" rel="noopener noreferrer">
-        <amp-img layout='fixed' height="200" width="200" src="{{src}}" data-info="{{info}}"></amp-img>
-      </a>
-    </template>
-  </amp-ad>
-
-  <h2>Custom leaderboard with no slot specified</h2>
-  <amp-ad width="500" height="60"
-      type="custom"
-      data-url="/examples/custom.ad.example.single.json">
-    <template type="amp-mustache" id="amp-template-id-no-slot">
-      <a href="{{href}}" target="_blank" rel="noopener noreferrer">
-        <amp-img layout='fixed' height="60" width="500" src="{{src}}" data-info="{{info}}"></amp-img>
-      </a>
-    </template>
-  </amp-ad>
-
-  <h2>Cxense Display</h2>
-  <amp-ad width="240" height="65"
-      type="eas"
-      data-eas-domain="stage.emediate.eu"
-      data-eas-cu="3255">
-  </amp-ad>
-
-  <h2>Dable</h2>
-  <amp-embed width="336" height="280"
-      type="dable"
-      data-widget-id="G7ZdEWXW"
-      data-item-id="testitem">
-  </amp-embed>
-
-  <h2>Directadvert</h2>
-  <amp-ad width="320" height="250"
-      type="directadvert"
-      data-block-id="1953045">
-  </amp-ad>
-
-  <h2>DistroScale</h2>
-  <amp-ad width="300" height="600"
-      type="distroscale"
-      data-pid="1"
-      data-zid="8710"
-      layout="responsive">
-  </amp-ad>
-
-  <h2>DotAndAds masthead</h2>
-  <amp-ad width="980" height="250"
-      type="dotandads"
-      data-cid="11"
-      data-mpo="ampTest"
-      data-mpt="amp-amp-all-all"
-      data-sp='sn-u'>
-  </amp-ad>
-
-  <h2>DotAndAds 300x250 box</h2>
-  <amp-ad width="300" height="250"
-      type="dotandads"
-      data-sp='300x250-u'
-      data-cid="11"
-      data-mpo="ampTest"
-      data-mpt="amp-amp-all-all">
-  </amp-ad>
-
-  <h2>Doubleclick</h2>
-  <amp-ad width="320" height="50"
-      type="doubleclick"
-      data-slot="/4119129/mobile_ad_banner">
-  </amp-ad>
-
-  <h2>Doubleclick with JSON based parameters</h2>
-  <amp-ad width="320" height="50"
-      type="doubleclick"
-      data-slot="/4119129/mobile_ad_banner"
-      json='{"targeting":{"sport":["rugby","cricket"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":0}'>
-  </amp-ad>
-
-  <h2>Doubleclick no ad</h2>
-  <amp-ad width="300" height="200"
-      type="doubleclick"
-      data-slot="/4119129/doesnt-exist">
-  </amp-ad>
-
-  <h2>Doubleclick with overriden size</h2>
-  <amp-ad width="420" height="100"
-      data-override-width="320" data-override-height="50"
-      type="doubleclick"
-      data-slot="/4119129/mobile_ad_banner"
-      class="red">
-  </amp-ad>
-
-  <h2>Doubleclick challenging ad</h2>
-  <amp-ad width="414" height="457"
-      type="doubleclick"
-      layout="fixed"
-      data-slot="/35096353/amptesting/badvideoad">
-  </amp-ad>
-
-  <h2>DynAd</h2>
-  <amp-ad width="300" height="250"
-      type="dynad"
-      src="https://t.dynad.net/script/?dc=5550002445;ord=1561170689208;idt_product=1;aff_source=2710d4ec5b3843f985bd52d768425f5b;coddisplaysupplier=2710d4ec5b3843f985bd52d768425f5b;descrColor=000000;titleColor=000000;urlColor=A6A6A6;borderColor=FFFFFF;bgColor=FFFFFF;altColor=FFFFFF;deslabel=saibatudomt.com.br;click=">
-  </amp-ad>
-
-  <h2>eADV</h2>
-  <amp-ad width="300" height="250"
-      type="eadv"
-      data-x="ba-16488-75-2-95-0-4c-23-b8-300x250-84-0-a0"
-      data-u="l0o0c0a8l%3Ahtos">
-  </amp-ad>
-
-  <h2>Empower</h2>
-  <amp-ad width="300" height="250"
-      type="empower"
-      data-site="example"
-      data-zone="123456">
-  </amp-ad>
-
-  <h2>Engageya widget</h2>
-  <amp-embed width="200" height="200"
-      type="engageya"
-      layout="responsive"
-      data-widgetIds="72154"
-      data-websiteId="111292"
-      data-publisherId="155235">
-  </amp-embed>
-
-  <h2>Epeex</h2>
-  <amp-embed width="100" height="100"
-      heights="(max-width:480px) 460%, (max-width:768px) 130%, (min-width: 769px) 85%, 75%"
-      type="epeex"
-      layout="responsive"
-      data-account="demoepeex"
-      data-channel="1">
-  </amp-embed>
-
-  <h2>E-Planning 320x50</h2>
-  <amp-ad width="320" height="50"
-      type="eplanning"
-      layout=responsive
-      data-epl_si="af2"
-      data-epl_sv="https://ads.eu.e-planning.net"
-      data-epl_isv="https://us.img.e-planning.net"
-      data-epl_sec="AMP_TEST"
-      data-epl_kvs='{"target1":"food", "target2":"cars"}'
-      data-epl_e="AMP_TEST">
-  </amp-ad>
-
-  <h2>Ezoic</h2>
-  <amp-ad width="300" height="250"
-      type="ezoic"
-      data-slot="/1254144/28607874"
-      json='{"targeting": {"iid15":"1479509","t":"134","d":"1317","t1":"134","pvc":"0","ap":"1144","sap":"1144","a":"|0|","as":"revenue","plat":"1","bra":"mod1","ic":"1","at":"mbf","adr":"400","reft":"tf","ga":"2497208","rid":"99998","pt":"0","al":"2022","compid":"1","tap":"28607874-1479509","br1":"0","br2":"0"}}'>
-  </amp-ad>
-
-  <h2>FlexOneELEPHANT</h2>
-  <amp-ad width="300" height="250"
-      type="f1e"
-      data-url="https://demo.impact-ad.jp"
-      data-target="/SITE=AMPSITE/AREA=AMPAREA/AAMSZ=300X250/OENCJP=UTF8" >
-  </amp-ad>
-
-  <h2>FlexOneHARRIER</h2>
-  <amp-ad width="300" height="250"
-      type="f1h"
-      data-section-id="2267"
-      data-slot="2843">
-  </amp-ad>
-
-  <h2>Felmat</h2>
-  <amp-ad width="300" height="250"
-      type="felmat"
-      data-host="felmat.net"
-      data-fmt="banner"
-      data-fmk="U12473_n2cJD"
-      data-fmp="0">
-  </amp-ad>
-
-  <h2>Flite</h2>
-  <amp-ad width="320" height="568"
-      type="flite"
-      data-guid="aa7bf589-6d51-4194-91f4-d22eef8e3688"
-      data-mixins="">
-  </amp-ad>
-
-  <h2>fluct</h2>
-  <amp-ad width="300" height="250"
-      type="fluct"
-      data-g="1000067784"
-      data-u="1000101409">
-  </amp-ad>
-
-  <h2>Fork Media</h2>
-  <amp-ad width="50" height="66"
-      type="forkmedia"
-      data-product="inread"
-      data-html-access-allowed>
-  </amp-ad>
-
-  <h2>Fusion</h2>
-  <amp-ad width="600" height="100"
-      type="fusion"
-      data-ad-server="bn-01d.adtomafusion.com"
-      data-media-zone="adtomatest.apica"
-      data-layout="apicaping"
-      data-space="apicaAd"
-      data-parameters="age=99&isMobile&gender=male">
-  </amp-ad>
-
-  <h2>FreeWheel</h2>
-  <amp-ad width="300" height="150"
-      type="freewheel"
-      layout="responsive"
-      data-zone="2003">
-  </amp-ad>
-
-  <h2>Geniee SSP</h2>
-  <amp-ad width="300" height="250"
-      type="genieessp"
-      data-vid="3"
-      data-zid="1077330">
-  </amp-ad>
-
-  <h2>Giraff</h2>
-  <amp-ad width="300" height="480"
-      type="giraff"
-      data-block-name="novotekaru">
-  </amp-ad>
-
-  <h2 class="broken">GMOSSP 320x50 banner</h2>
-  <amp-ad width="320" height="50"
-      type="gmossp"
-      data-id="10014">
-  </amp-ad>
-
-  <h2>GumGum 300x100 banner</h2>
-  <amp-ad width=300 height=100
-      type="gumgum"
-      data-zone="ggumtest"
-      data-slot="3883">
-  </amp-ad>
-
-  <h2>Holder 300x250 banner</h2>
-  <amp-ad width="300" height="250"
-      type="holder"
-      data-block="7163">
-  </amp-ad>
-
-  <h2>iBillboard 300x250 banner</h2>
-  <amp-ad width="300" height="250"
-      type="ibillboard"
-      src="https://go.eu.bbelements.com/please/code?j-21414.1.5.6.0.0._blank">
-  </amp-ad>
-
-  <h2>Idealmedia</h2>
-  <amp-ad width="600" height="320"
-          type="idealmedia"
-          data-publisher="testsok150917-d1.com"
-          data-widget="167018"
-          data-container="M278974ScriptRootC167018">
-  </amp-ad>
-
-  <h2>I-Mobile 320x50 banner</h2>
-  <amp-ad width="320" height="50"
-      type="imobile"
-      data-pid="1847"
-      data-adtype="banner"
-      data-asid="813689">
-  </amp-ad>
-
-  <h2>Imonomy 728x90 banner</h2>
-  <amp-ad width="728" height="90"
-      type="imonomy"
-      data-slot="/36653869/amp_imo_multi_size"
-      data-pid="1225234623"
-      data-sub-id="636gd">
-  </amp-ad>
-
-  <h2>Imedia</h2>
-  <amp-ad width="300" height="250"
-      type="imedia"
-      data-id="p1"
-      data-positions='[{"id":"p1", "zoneId":"seznam.novinky.ikona2"}, {"id":"p2", "zoneId":"seznam.novinky.ikona"}]'>
-  </amp-ad>
-
-  <amp-ad width="300" height="100"
-      type="imedia"
-      data-id="p2"
-      data-positions='[{"id":"p1", "zoneId":"seznam.novinky.ikona2"}, {"id":"p2", "zoneId":"seznam.novinky.ikona"}]'>
-  </amp-ad>
-
-  <h2>Index Exchange Header Tag</h2>
-  <amp-ad width="300" height="250"
-      type="ix"
-      data-ix-id="1"
-      data-slot="/62650033/AMP_Example_Ad_Unit">
-  </amp-ad>
-
-  <h2>Industrybrains</h2>
-  <amp-ad width="300" height="250"
-      type="industrybrains"
-      data-width="300"
-      data-height="250"
-      data-cid="19626-3798936394">
-  </amp-ad>
-
-  <h2>InMobi</h2>
-  <amp-ad width="320" height="50"
-      type="inmobi"
-      data-siteid="a0078c4ae5a54199a8689d49f3b46d4b"
-      data-slotid="15">
-  </amp-ad>
-
-  <h2>Innity</h2>
-  <amp-ad width="300" height="250"
-      type="innity"
-      data-pub="eda80a3d5b344bc40f3bc04f65b7a357"
-      data-zone="62546">
-  </amp-ad>
-
-  <amp-ad width="300" height="250"
-      type="innity"
-      data-pub="eda80a3d5b344bc40f3bc04f65b7a357"
-      data-zone="62546"
-      data-channel="NEWS">
-  </amp-ad>
-
-  <h2>Insticator</h2>
-  <amp-embed type="insticator" width="auto" height="850"
-      data-site-id="c40f316f-e18a-4cef-b9a6-b04acbaec113"
-      data-embed-id="77ee0296-8ac4-4bca-91c8-51256b9830f1">
-  </amp-embed>
-
-  <h2>Invibes</h2>
-  <amp-ad width="300" height="250"
-      type="invibes"
-      data-pid="1234"
-      data-ad-categ="infeed"
-      data-custom-endpoint="https://k.r66net.com/GetAmpLink">
-  </amp-ad>
-
-  <h2>Jubna widget</h2>
-  <amp-embed width="200" height="200"
-      type="jubna"
-      layout="responsive"
-      data-wid="1078"
-      data-pid="792">
-  </amp-embed>
-
-  <h2>Kargo</h2>
-  <amp-ad width="300" height="250"
-      type="kargo"
-      data-site="_tt9gZ3qxCc2RCg6CADfLAAFR"
-      data-slot="_vypM8bkVCf"
-      data-options='{"targetParams":{"AD_ID":"test-middle","ad_id":"test-middle"}}'>
-  </amp-ad>
-
-  <h2>Kiosked</h2>
-  <amp-ad width="300" height="250"
-      type="kiosked"
-      data-scriptid="91">
-  </amp-ad>
-
-  <h2>Kixer</h2>
-  <amp-ad width="300" height="250"
-      type="kixer"
-      data-adslot="6812">
-  </amp-ad>
-
-  <h2>Kuadio</h2>
-  <amp-embed
-    type="kuadio"
-    width="300"
-    height="660"
-    layout="responsive"
-    heights="(min-width:1024px) 23%, (min-width:760px) 27%, (min-width:480px) 72%, 220%"
-    data-region="tpe"
-    data-widget-id="78a32765-30f1-4ac1-a3e7-b42ebc6df88a">
-  </amp-embed>
-
-  <h2>Lentainform</h2>
-  <amp-ad width="600" height="320"
-          type="lentainform"
-          data-publisher="test.exhange.noidpartners.com"
-          data-widget="689383"
-          data-container="M246626ScriptRootC689383">
-  </amp-ad>
-
-  <h2>Ligatus</h2>
-  <amp-ad width="300" height="250"
-      type="ligatus"
-      src="https://a-ssl.ligatus.com/?ids=88443&t=js&s=1&bc=2">
-  </amp-ad>
-
-  <h2>LockerDome</h2>
-  <amp-ad width="300" height="250"
-      type="lockerdome"
-      data-slot="10238273616545382">
-  </amp-ad>
-
-  <h2>logly</h2>
-  <amp-ad width="320" height="270"
-      layout="fixed"
-      type="logly"
-      data-adspotid="4287967">
-  </amp-ad>
-
-  <h2>LOKA</h2>
-  <amp-ad width="300" height="250"
-      type="loka"
-      data-unit-params='{"unit":"mvbanner","id":"YdzhBxTvKwZlLeeQ"}'>
-  </amp-ad>
-
-  <h2>MADS</h2>
-  <amp-ad width="320" height="50"
-      type="mads"
-      data-adrequest='{"pid":"6252122059"}'>
-  </amp-ad>
-
-  <h2>MANTIS</h2>
-  <amp-ad width="300" height="250"
-      type="mantis-display"
-      data-property = "demo"
-      data-zone="medium-rectangle">
-  </amp-ad>
-
-  <amp-embed width="100" height="283"
-      type="mantis-recommend"
-      layout=responsive
-      heights="(min-width:1907px) 56%, (min-width:1100px) 64%, (min-width:780px) 75%, (min-width:480px) 105%, 200%"
-      data-property="demo">
-  </amp-embed>
-
-  <h2>Mediaad.org</h2>
-  <amp-ad width="300" height="250"
-      type="mediaad"
-      data-publisher="mediaad.org"
-      data-medtag="mediaad-kryZ">
-  </amp-ad>
-  
-  <h2>Marfeel</h2>
-  <amp-ad width="300" height="250"
-    type="marfeel"
-    data-tenant="demo.marfeel.com">
-  </amp-ad>
-
-  <h2>Media.Net Header Bidder Tag</h2>
-  <amp-ad width="300" height="250"
-      type="medianet"
-      data-tagtype="headerbidder"
-      data-cid="8CU852274"
-      data-slot="/45361917/AMP_Header_Bidder"
-      json='{"targeting":{"mnetAmpTest":"1","pos":"mnetSlot1"}}'>
-  </amp-ad>
-
-  <h2>Media.Net Contextual Monetization Tag</h2>
-  <amp-ad width="300" height="250"
-      type="medianet"
-      data-tagtype="cm"
-      data-cid="8CUS8O7EX"
-      data-crid="112682482">
-  </amp-ad>
-
-  <h2>Mediavine</h2>
-  <amp-ad width="300" height="250"
-      type="mediavine"
-      data-site="amp-project">
-      <div placeholder></div>
-      <div fallback></div>
-  </amp-ad>
-
-  <h2>Medyanet</h2>
-  <amp-ad width="300" height="250"
-      type="medyanet"
-      data-slot="medyanet/9927946/posta/anasayfa/300x250"
-      data-domain="posta.com.tr">
-  </amp-ad>
-
-  <h2>Meg</h2>
-  <amp-ad width="320" height="250"
-      type="meg"
-      data-code="6rc0ERhN75">
-  </amp-ad>
-
-  <h2>Mgid</h2>
-  <amp-ad width="600" height="320"
-          type="mgid"
-          data-publisher="barada.com"
-          data-widget="353317"
-          data-container="M207275ScriptRootC353317">
-  </amp-ad>
-
-  <h2>MicroAd 320x50 banner</h2>
-  <amp-ad width="320" height="50"
-      type="microad"
-      data-spot="b4bf837c5ddd69758d5ac924d04cf502"
-      data-url="${COMPASS_EXT_URL}"
-      data-referrer="${COMPASS_EXT_REF}"
-      data-ifa="${COMPASS_EXT_IFA}"
-      data-appid="${COMPASS_EXT_APPID}"
-      data-geo="${COMPASS_EXT_GEO}">
-  </amp-ad>
-
-  <h2>MixiMedia</h2>
-  <amp-embed height="284"
-      type="miximedia"
-      data-blockid="91908">
-  </amp-embed>
-
-  <h2>Mixpo</h2>
-  <amp-ad width="300" height="250"
-      type = "mixpo"
-      data-guid = "b0caf856-fd92-4adb-aaec-e91948c9ffc8"
-      data-subdomain = "www">
-  </amp-ad>
-
-  <h2>Monetizer101</h2>
-  <amp-ad width="auto" height="176"
-      layout="fixed-height"
-      type="monetizer101"
-      data-widget="price-comparison"
-      data-config='{"shopId": 1, "priceMin": 500, "nameKeywords": "iphone"}'>
-  </amp-ad>
-
-  <h2>mox</h2>
-  <amp-ad height="1"
-      type="mox"
-      data-z="1183"
-      data-w="720"
-      data-h="405">
-  </amp-ad>
-
-  <h2>My6sense</h2>
-  <amp-ad width="300" height="250"
-          type="my6sense"
-          data-widget-key="cAcl2Tvn4dH2pPBx52Q7SR"
-          data-zone="[ZONE]"
-          data-url="[PAGE_URL]"
-          data-organic-clicks="[ORGANIC_TRACKING_PIXEL]"
-          data-paid-clicks="[PAID_TRACKING_PIXEL]">
-  </amp-ad>
-
-  <h2>myTarget</h2>
-  <amp-ad width="300" height="250"
-      type="mytarget"
-      data-ad-slot="197378">
-  </amp-ad>
-
-  <h2>myWidget</h2>
-  <amp-embed width="300" height="250"
-      type="mywidget"
-      data-cid="ed1538fc077cfeae6ea558f6e7404541">
-  </amp-embed>
-
-  <h2>Nativeroll</h2>
-  <amp-ad width="480" height="340"
-          layout="responsive"
-          type="nativeroll"
-          data-gid="5d10df709762b6b31b8b461e"
-  >
-  </amp-ad>
-
-  <h2>Nativery</h2>
-  <amp-ad width="480" height="340"
-      layout="responsive"
-      type="nativery"
-      data-wid="5daf5a1dacf7e85862ae241a"
-  >
-  </amp-ad>
-
-  <h2>Nativo</h2>
-  <amp-ad width="350" height="150"
-      type="nativo"
-      layout="responsive"
-      data-premium
-      data-request-url="http://localhost:9876">
-  </amp-ad>
-
-  <h2>Navegg</h2>
-  <div>It is common to see a no-fill ad in this example.</div>
-  <amp-ad width=320 height=50
-      type="navegg"
-      data-acc="10"
-      data-slot="/4119129/mobile_ad_banner"
-      json='{"targeting":{"sport":["rugby","cricket"]}}'>
-  </amp-ad>
-
-  <h2>Nend</h2>
-  <amp-ad width="320" height="50"
-      type="nend"
-      data-nend_params='{"media":82,"site":58536,"spot":127513,"type":1,"oriented":1}'>
-  </amp-ad>
-
-  <h2>NETLETIX</h2>
-  <amp-ad width='300' height='250'
-      type='netletix'
-      data-nxkey='b5f0c5d4-c2b8-4989-a7b9-130ad4417102'
-      data-nxunit='/60343726/netzathleten_.de'
-      data-nxwidth='300'
-      data-nxheight='250'>
-  </amp-ad>
-
-  <h2>Noddus</h2>
-  <amp-ad width="300" height="300"
-      data-token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwbGFjZW1lbnRfaWQiOjY2MX0.OdD2QrgxMoI7MM09QBFCtbjMnUGuumiqBHb-FJF4UBs"
-      type="noddus">
-  </amp-ad>
-
-  <h2>Nokta</h2>
-  <amp-ad width="300" height="250"
-      type="nokta"
-      data-category="izlesene_anasayfa"
-      data-site="izlesene:anasayfa"
-      data-zone="152541">
-  </amp-ad>
-
-  <h2>Newsroom AI</h2>
-  <amp-ad width="320" height="50"
-      type="nws"
-      src="https://tags.nws.ai/113106/">
-  </amp-ad>
-
-  <h2>OneAD</h2>
-  <amp-ad width="300" height="250"
-      type="onead"
-      layout="responsive"
-      data-playmode="amp-inread"
-      data-uid="1000033"
-      data-pid="48163"
-      data-host="demo">
-  </amp-ad>
-
-  <h2>OnNetwork</h2>
-  <amp-ad width="300" height="250"
-      type="onnetwork"
-      data-sid="TTQsSHFzLDA=">
-  </amp-ad>
-
-  <h2>Open AdStream single ad</h2>
-  <amp-ad width="300" height="250"
-      type="openadstream"
-      data-adhost="oasc-training7.247realmedia.com"
-      data-sitepage="dx_tag_pvt_site"
-      data-pos="x04"
-      data-query="keyword=keyvalue&key2=value2" >
-  </amp-ad>
-
-  <h2>OpenX</h2>
-  <amp-ad width="728" height="90"
-      type="openx"
-      data-auid="538289845"
-      data-host="sademo-d.openx.net"
-      data-nc="90577858-BidderTest">
-  </amp-ad>
-  <div>
-    <a href="openx.amp.html">See all OpenX examples</a>
-  </div>
-
-  <h2>Opinary</h2>
-  <amp-embed width="500" height="500"
-    type="opinary"
-    layout="intrinsic"
-    data-client="test-success">
-  </amp-embed>
-
-  <h2>Outbrain widget</h2>
-  <amp-embed width="100" height="100"
-      type="outbrain"
-      layout="responsive"
-      data-widgetIds="SB_14,SB_13"
-      data-htmlURL="http%3A%2F%2Fedition.cnn.com%2F2015%2F11%2F08%2Fmiddleeast%2Frussian-plane-crash-egypt-sinai%2Findex.html"
-      data-referrer="http%3A%2F%2Fedition.cnn.com"
-      data-ampURL="http%3A%2F%2Famp.cnn.com%2Fpage.html"
-      data-styleFile="http://localhost/style.css"
-      data-testMode="true">
-  </amp-embed>
-
-  <h2>Pixels Examples</h2>
-  <amp-ad width="300" height="250"
-      type="pixels"
-      data-origin="af"
-      data-sid="2847717911664"
-      data-tag="sync"
-      data-click-tracker="false"
-      data-viewability="true">
-  </amp-ad>
-
-  <h2>Plista responsive widget</h2>
-  <amp-embed width="300" height="300"
-      type="plista"
-      layout=responsive
-      data-countrycode="de"
-      data-publickey="e6a75b42216ffc96b7ea7ad0c94d64946aedaac4"
-      data-widgetname="iAMP_2"
-      data-geo="de"
-      data-urlprefix=""
-      data-categories="politik">
-  </amp-embed>
-
-  <h2>polymorphicAds</h2>
-  <amp-ad width=320 height=50
-      type="polymorphicads"
-      data-adunit="7c0b3ae742beccf94f7726ea832277a2"
-      data-params='{"testMode": "true"}'>
-  </amp-ad>
-
-  <h2>popIn native ad</h2>
-  <amp-ad width="300" height="568"
-      type="popin"
-      layout=responsive
-      heights="(min-width:1907px) 39%, (min-width:1200px) 46%, (min-width:780px) 64%, (min-width:480px) 98%, (min-width:460px) 167%, 196%"
-      data-mediaid="popin_amp">
-  </amp-ad>
-
-  <h2>Postquare widget</h2>
-  <amp-embed width="200" height="200"
-      type="postquare"
-      layout="responsive"
-      data-widgetIds="112264"
-      data-websiteId="115219"
-      data-publisherId="157552">
-  </amp-embed>
-
-  <h2>PPStudio creative</h2>
-  <amp-embed width="300" height="250"
-      type="ppstudio"
-      data-crid="16013"
-      data-holder-script="https://tenmaxsgads.blob.core.windows.net/holder/16013_f9742d8d6d22.js">
-  </amp-embed>
-
-  <h2>Pressboard</h2>
-  <amp-ad height="400"
-      type="pressboard"
-      layout="fixed-height"
-      data-media="5">
-  </amp-ad>
-
-  <h2>PromoteIQ</h2>
-  <amp-ad width="250" height="250"
-      type="promoteiq"
-      data-src="http://cdn.tagdelivery.com/request/client/standard.js"
-      data-params='{"slot": 1160, "targets": { "category": ["6222", "16158", "274", "17912"]}, "count": 1}'
-      data-sfcallback="if (!Array.isArray(response)) { response = [response]; }; for (i = 0; i < response.length; i++) { const prod = response[i]; let outerCtr = document.createElement('div'); let img = document.createElement('img'); img.src = prod['product']['imageLarge']; img.style = 'height:250px; width:250px'; outerCtr.appendChild(img); document.body.appendChild(outerCtr); }">
-  </amp-ad>
-
-  <h2>PubExchange</h2>
-  <amp-embed width="640" height="320"
-      heights="(max-width:480px) 400%, (max-width:650px) 100%, 75%"
-      layout="responsive"
-      type="pubexchange"
-      data-publication="test_publication"
-      data-module-id="below_content"
-      data-module-num="2626"
-      data-test="true">
-  </amp-embed>
-
-  <h2>PubGuru</h2>
-  <amp-ad width=300 height=250
-      type="pubguru"
-      data-publisher="your-publisher-name"
-      data-slot="/23081961/monetizemore.com_test_300x250">
-  </amp-ad>
-
-  <h2>Pubmine 300x250</h2>
-  <amp-ad width="300" height="265"
-      type="pubmine"
-      data-section="1"
-      data-siteid="37790885">
-  </amp-ad>
-
-  <amp-ad width="300" height="265"
-      type="pubmine"
-      data-section="2"
-      data-siteid="37790885">
-  </amp-ad>
-
-  <h2 class="broken">PulsePoint Header Bidding 300x250</h2>
-  <amp-ad width="300" height="250"
-      type="pulsepoint"
-      data-pid="521732"
-      data-tagid="76835"
-      data-tagtype="hb"
-      data-timeout="1000"
-      data-slot="/1066621/ExchangeTech_Prebid_AdUnit">
-  </amp-ad>
-
-  <h2>PulsePoint 300x250</h2>
-  <amp-ad width="300" height="250"
-      type="pulsepoint"
-      data-pid="512379"
-      data-tagid="472988">
-  </amp-ad>
-
-  <h2>Puffnetwork 300x250</h2>
-  <amp-ad width="300" height="250"
-      type="puffnetwork"
-      data-chid="233">
-  </amp-ad>
-
-  <h2>Purch 300x250</h2>
-  <amp-ad width="300" height="250"
-      type="purch"
-      data-pid="2882"
-      data-divid="rightcol_top">
-  </amp-ad>
-
-  <h2>Quora</h2>
-  <amp-ad width="450" height="220"
-      type="quoraad"
-      data-adid="fake">
-  </amp-ad>
-
-  <h2>Rakuten Unified Ads</h2>
-  <amp-ad width="300" height="250"
-      type="rakutenunifiedads"
-      data-env="dev"
-      data-id="63">
-  </amp-ad>
-
-  <h2>Rambler&Co</h2>
-  <amp-ad width="500" height="250"
-      type="capirs"
-      layout="responsive"
-      data-begun-auto-pad="434906118"
-      data-begun-block-id="434908944"
-      data-custom-css="div[id^=begun_block] iframe{margin:0 auto;}"
-      json='{"params":{"p1":"bvpkq","p2":"y","pct":"a"}}'>
-  </amp-ad>
-
-  <h2>Rambler&Co RNetPlus</h2>
-  <amp-ad width="300" height="400"
-      type="rnetplus"
-      layout="responsive"
-      src="https://api.rnet.plus/Scripts/rnet_amp_embed.js?blockId=660">
-  </amp-ad>
-
-  <h2>RbInfox</h2>
-  <amp-embed width="240" height="400"
-      type="rbinfox"
-      src="https://rb.infox.sg/infox/503">
-  </amp-embed>
-
-  <h2>ReadMo</h2>
-  <amp-embed width="400" height="400"
-      type="readmo"
-      layout="responsive"
-      heights="(min-width: 1200px) 50%, (min-width: 780px) 60%, (max-width: 480px) 180%, 100%"
-      data-section="amp-test"
-      data-url="https://yourdomain.com/"
-      data-sponsored-by-label=""
-      data-module="end-of-article">
-  </amp-embed>
-
-  <h2>Realclick</h2>
-  <amp-ad width="300" height="250"
-      type="realclick"
-      data-mcode="d290anI3MTEyMDAwMDFfMTU3Ng==">
-  </amp-ad>
-
-  <h2>recomAD</h2>
-  <amp-ad width="320" height="145"
-      type="recomad"
-      data-app-id="53811c33"
-      data-widget-id="275"
-      data-search-term="sneaker"
-      data-puid="amp-ad-recomad-example-page">
-  </amp-ad>
-
-  <h2>Relap</h2>
-  <amp-ad width="auto" height="750"
-      type="relap"
-      layout="fixed-height"
-      data-token="D3UMgQWBqleq1tPW"
-      data-url="http://bigpicture.ru"
-      data-anchorid="i0xMMY1MoliiZWVl">
-  </amp-ad>
-
-  <h2>RelapPro</h2>
-  <amp-ad width="300" height="250"
-    type="relappro"
-    data-slot-id="b1928542-4217-486f-b42c-79f0f3290b39">
-  </amp-ad>
-
-  <h2>Revcontent Responsive Tag</h2>
-  <amp-ad width="320" height="240"
-      type="revcontent"
-      layout="responsive"
-      heights="(max-width: 320px) 933px,
-        (max-width: 360px) 1087px,
-        (max-width: 375px) 1138px,
-        (max-width: 412px) 1189px,
-        (max-width: 414px) 1072px,
-        (max-width: 568px) 1151px,
-        (max-width: 640px) 1128px,
-        (max-width: 667px) 1151px,
-        (max-width: 732px) 1211px,
-        (max-width: 736px) 1151px,
-        (max-width: 768px) 633px,
-        (max-width: 1024px) 711px,
-        86vw"
-      data-wrapper="rcjsload_2ff711"
-      data-id="203">
-  </amp-ad>
-
-  <h2>RevJet Tag</h2>
-  <amp-ad width="300" height="250"
-      type="revjet"
-      data-tag="tag3777"
-      data-key="705"
-      data-opts='{"delivery_method": "banner"}'>
-  </amp-ad>
-
-  <h2>Red for Publishers</h2>
-  <amp-ad width="320" height="150"
-      type="rfp"
-      data-adspot-id="ODExOjM2NjQ">
-  </amp-ad>
-
-  <h2>Rubicon Project Smart Tag</h2>
-  <amp-ad width="320" height="50"
-      type="rubicon"
-      data-method="smartTag"
-      data-account="14062"
-      data-site="70608"
-      data-zone="335918"
-      data-size="43"
-      data-kw="amp-test, test"
-      json='{"visitor":{"age":"18-24","gender":"male"},"inventory":{"section":"amp"}}'>
-  </amp-ad>
-
-  <h2>RUNative</h2>
-  <amp-embed width="640" height="320"
-      heights="(max-width:480px) 400%, (max-width:650px) 100%, 65%"
-      layout="responsive"
-      type="runative"
-      data-spot="ac8c2f9a835f4147a81bfd4a48601f2b"
-      data-ad-type="label-over"
-      data-cols="3"
-      data-rows="2"
-      data-title="From the Web">
-  </amp-embed>
-
-  <h2>SAS CI 360 Match</h2>
-  <amp-ad
-      width="468"
-      height="60"
-      type="sas"
-      layout="fixed"
-      data-customer-name="canary"
-      data-size="468x60"
-      data-area="amp_ad_area"
-      data-site="amp_ad_site"
-      data-tags='{"CAT":"SYLVESTER","POSITION":"TOP"}'>
-  </amp-ad>
-
-  <h2>Seeding Alliance</h2>
-  <amp-ad
-    height="250"
-    type="seedingalliance"
-    data-url="https://mockup.seeding-alliance.de">
-  </amp-ad>
-
-  <h2>Sekindo</h2>
-  <amp-ad width="300" height="250"
-          type="sekindo"
-          data-spaceId="14071">
-  </amp-ad>
-
-  <h2>Sharethrough</h2>
-  <amp-ad width="300" height="150"
-      type="sharethrough"
-      layout="responsive"
-      data-pkey="c0fa8367">
-  </amp-ad>
-
-  <h2>SHE Media</h2>
-  <amp-ad width="300" height="250"
-      type="shemedia"
-      data-slot-type="medrec"
-      data-boomerang-path="/amp-example/26403"
-      json='{"boomerangConfig": {"vertical": "parenting", "targeting":{"abc":["xyz"]}}'>
-      <div placeholder></div>
-      <div fallback></div>
-  </amp-ad>
-
-  <h2>Sklik</h2>
-  <amp-ad width="970" height="310"
-      type="sklik"
-      json='{"zoneId":0, "w": 970, "h": 310}'>
-  </amp-ad>
-
-  <h2>SlimCut Media</h2>
-  <amp-ad width="400" height="225"
-      type="slimcutmedia"
-      data-pid="amp-3"
-      data-ffc="SCMPROMO">
-  </amp-ad>
-
-  <h2>SmartAdServer ad</h2>
-  <amp-ad width="320" height="50"
-      type="smartadserver"
-      data-site="94612"
-      data-page="629154"
-      data-format="38952"
-      data-target="foo=bar">
-  </amp-ad>
-
-  <h2>smartclip</h2>
-  <amp-ad width="400" height="225"
-      type="smartclip"
-      data-plc="84555"
-      data-sz="400x320">
-  </amp-ad>
-
-  <h2>SMI2</h2>
-  <amp-embed height="284"
-             type="smi2"
-             data-blockid="90223">
-  </amp-embed>
-
-  <h2>SmileWanted ad</h2>
-  <amp-ad width="300" height="250"
-      type="smilewanted"
-      data-zone="1">
-  </amp-ad>
-
-  <h2>sogou ad</h2>
-  <amp-ad width="20" height="3"
-      type="sogouad"
-      layout="responsive"
-      data-slot="854370"
-      data-w="20"
-      data-h="3">
-  </amp-ad>
-
-  <amp-ad height="69"
-      type="sogouad"
-      layout="fixed-height"
-      data-slot="854366"
-      data-w="100%"
-      data-h="69">
-  </amp-ad>
-
-  <h2>Sortable ad</h2>
-  <amp-ad width="300" height="250"
-      type="sortable"
-      data-name="medrec"
-      data-site="ampproject.org">
-  </amp-ad>
-
-  <h2>SOVRN</h2>
-  <amp-ad width="300" height="250"
-      type="sovrn"
-      data-width="300"
-      data-height="600"
-      data-u="sduggan"
-      data-iid="informerIDgoeshere"
-      data-aid="affiliateIDgoeshere"
-      data-testFlag="true"
-      data-z="393900"><!-- this ID is only allowed on localhost:8000 -->
-  </amp-ad>
-
-  <h2>Speakol</h2>
-  <amp-ad width="320" height="800"
-    type="speakol"
-    layout="responsive"
-    data-widgetid="1825">
-  </amp-ad>
-
-  <h2>SpotX</h2>
-  <amp-ad width="300" height="250"
-      type="spotx"
-      data-spotx_channel_id="85394"
-      data-spotx_autoplay="1">
-  </amp-ad>
-
-  <h2>Spring Ads</h2>
-  <amp-ad width="0" height="0"
-          type="springAds"
-          data-adssetup='{
-          "view": "amp",
-          "partners": true,
-          "adPlacements": ["banner","mrec"],
-          "adSlotSizes": {
-            "banner": [{
-              "minWidth": 1,
-              "sizes": [[320, 50], [320, 160]]
-            }],
-            "mrec": [{
-              "minWidth": 1,
-              "sizes": [[300, 250], [300, 300], [250, 250], [320, 160], [300, 150], [320, 50], [320, 75], [320, 80], [320, 100], [300, 100], [300, 50], [300, 75]]
-            }]
-          },
-          "pageName": "demo_story",
-          "publisher": "adtechnology.axelspringer.com",
-          "target": "singleAds;multiAds;you;me;team=adtech,MIT;"
-        }'>
-  </amp-ad>
-  <amp-ad width="320" height="50"
-          type="springAds"
-          data-adslot="banner">
-  </amp-ad>
-  <amp-ad width="300" height="250"
-          type="springAds"
-          data-adslot="mrec">
-  </amp-ad>
-
-  <h2>SSP</h2>
-  <amp-ad width="480" height="300"
-          type="ssp"
-          data-position='{ "id": "cnt-1", "width": "480", "height": "300", "zoneId": "1234" }'>
-  </amp-ad>
-  <amp-ad width="480" height="300"
-          type="ssp"
-          data-position='{ "id": "cnt-2", "width": "480", "height": "300", "zoneId": "1234" }'>
-  </amp-ad>
-
-  <h2>Strossle</h2>
-  <amp-embed height="580"
-             type="strossle"
-             data-widgetid="widget-5b583cae934ad">
-  </amp-embed>
-
-  <h2>Sulvo</h2>
-  <amp-ad
-    width=300 height=250
-    type="sulvo"
-    data-ad="example.com_display"
-    class="demand-supply">
-  </amp-ad>
-
-  <h2>SunMedia</h2>
-  <amp-ad width="300" height="1"
-      type="sunmedia"
-      layout="responsive"
-      data-cskp="1"
-      data-cid="sunmedia_test"
-      data-crst="1">
-  </amp-ad>
-
-  <h2>SVK Native widget</h2>
-  <amp-embed width="100" height="100"
-      type="svknative"
-      layout="responsive"
-      data-widgetid="2">
-  </amp-embed>
-
-  <h2>Swoop</h2>
-  <amp-ad width=250 height=35
-      type="swoop"
-      data-layout="auto"
-      data-publisher="SW-11122234-1AMP"
-      data-placement="page/inline"
-      data-slot="amp/test">
-  </amp-ad>
-
-  <h2>Taboola responsive widget</h2>
-  <amp-embed width="100" height="283"
-      type="taboola"
-      layout="responsive"
-      heights="(min-width:1907px) 39%, (min-width:1200px) 46%, (min-width:780px) 64%, (min-width:480px) 98%, (min-width:460px) 167%, 196%"
-      data-publisher="amp-demo"
-      data-mode="thumbnails-a"
-      data-placement="Ads Example"
-      data-article="auto">
-  </amp-embed>
-
-   <h2>TcsEmotion AMP tag</h2>
-   <amp-ad width="100" height="150"
-      type="tcsemotion"
-      data-hb  ="false"
-      data-zone ="1"
-      data-delhost = "https://hb.tcsemotion.com/www/delivery/amphb.php">
-  </amp-ad>
-
-  <h2>Teads</h2>
-  <amp-ad width="300" height="220"
-      type="teads"
-      data-pid="42266"
-      layout="responsive">
-  </amp-ad>
-
-  <h2>TE Medya</h2>
-  <amp-embed width="320" height="320"
-    type="temedya"
-    layout="responsive"
-    data-widgetId="vidyome"
-  >
-  </amp-embed>
-
-  <h2>Torimochi</h2>
-  <amp-ad width="500" height="800"
-      type="torimochi"
-      layout="responsive"
-      data-adtype="widget"
-      data-area="widget"
-      data-wid="torimochi-amp-widget"
-      data-extra='{"tflag": 3}'
-      heights="(min-width:1907px) 39%, (min-width:1200px) 46%, (min-width:780px) 64%, (min-width:480px) 98%, (min-width:460px) 167%, 196%"
-    >
-  </amp-ad>
-
-  <h2>Tracdelight</h2>
-  <amp-ad height="300" width="640"
-          type="tracdelight"
-          data-mode="inline"
-          data-widget_id="yqrmkcpv89h7gbds"
-          data-access_key="165a54e8462bacfb08ada26ebf11990c">
-  </amp-ad>
-
-  <h2>TripleLift</h2>
-  <amp-ad width="297" height="410"
-      type="triplelift"
-      layout="responsive"
-      src="https://ib.3lift.com/dtj/amptest_main_feed/335430">
-  </amp-ad>
-
-  <h2>Trugaze</h2>
-  <amp-ad width="300" height="250"
-      type="trugaze"
-      data-public-id="4WMPI6PV"
-      data-slot="/134642692/amp-samples"
-      data-multi-size="320x50"
-      json='{"targeting":{"target":["sample"],"pos":["amp"]}}'>
-  </amp-ad>
-
-  <h2>UAS</h2>
-  <amp-ad width=300 height=250
-      type="uas"
-      json='{"accId": "132109", "adUnit": "10002912", "sizes": [[300, 250]], "targetings": {"country": ["India", "USA"], "car": "Civic"}, "locLat": "12.24", "locLon": "24.13", "locSrc": "wifi", "pageURL": "mydomain.com"}'>
-  </amp-ad>
-
-  <h2>Unruly</h2>
-  <amp-ad width="620" height="349"
-          type="unruly"
-          layout="responsive"
-          data-site-id="amp-test">
-  </amp-ad>
-
-  <h2>ucfunnel</h2>
-  <amp-ad width="300" height="250"
-      type="ucfunnel"
-      data-site-id="test-ad-83444226E44368D1E32E49EEBE6D29"
-      data-schain="1.0,0!exchange2.com,abcd,1,,,">
-  </amp-ad>
-  <h2>UZOU</h2>
-  <amp-ad width="120" height="1630"
-      type="uzou"
-      data-widget-params='{"placementCode":"amp-sample","mode":"test"}'>
-  </amp-ad>
-
-  <h2>Weborama</h2>
-  <amp-ad width="300" height="250"
-      type="weborama-display"
-      data-wbo_account_id=51
-      data-wbo_tracking_element_id=137
-      data-wbo_fullhost="certification.solution.weborama.fr"
-      data-wbo_random="[RANDOM]"
-      data-wbo_publisherclick="[PUBLISHER_TRACKING_URL]">
-  </amp-ad>
-
-  <h2>Widespace Panorama Ad</h2>
-  <amp-ad width="300" height="50"
-      type="widespace"
-      data-sid="93f1a996-52f5-46b4-8dc8-ccd8886a8fbf"
-      layout="responsive">
-  </amp-ad>
-
-  <h2>Widespace Takeover Ad</h2>
-  <amp-ad width="300" height="300"
-      type="widespace"
-      data-sid="fc5a6f59-d45e-4cf1-acac-67bf5ab4862a"
-      layout="responsive">
-  </amp-ad>
-
-  <h2>Wisteria Ad</h2>
-  <amp-ad width="300" height="1170"
-      type="wisteria"
-      layout=responsive
-      data-site-id="2"
-      data-template-number="6">
-  </amp-ad>
-
-  <h2>Xlift native ad</h2>
-  <amp-ad width="300" height="300"
-      type="xlift"
-      data-mediaid="mamastar">
-  </amp-ad>
-
-  <h2>Yahoo Display</h2>
-  <amp-ad width="316" height="264"
-      type="yahoo"
-      data-sid="954014446"
-      data-site="news"
-      data-sa='{"LREC":"300x250","secure":"true","content":"no_expandable;"}'>
-  </amp-ad>
-
-  <h2>Yahoo Native-Display Ads Federation</h2>
-  <amp-embed width="320" height="320"
-    type="yahoofedads"
-    layout="responsive"
-    data-site="finance"
-    data-region="US"
-    data-lang="en-US"
-    data-ad-unit="pencil"
-    data-sa="{&quot;LREC&quot;:&quot;300x250&quot;,&quot;secure&quot;:&quot;true&quot;,&quot;content&quot;:&quot;no_expandable;&quot;,&quot;isSupplySegment&quot;:&quot;false&quot;,&quot;lang&quot;:&quot;en-US&quot;,&quot;region&quot;:&quot;US&quot;,&quot;site_attribute&quot;:&quot;wiki_topics=\&quot;Anthony_Joshua;Tyson_Fury;Eddie_Hearn;Deontay_Wilder;Kubrat_Pulev;Tottenham_Hotspur_Stadium;Dillian_Whyte\&quot; ctopid=\&quot;2074500;2078500;2083000;2212000;13311000\&quot; hashtag=\&quot;2074500;2078500;2083000;2212000;13311000\&quot; rs=\&quot;lmsid:a0ad000000AxDnbAAF;revsp:omnisport.uk;lpstaid:71ee6f14-9c73-3688-b4a9-32e6578057d0;pct:story\&quot;&quot;}"
-    data-url="https://finance.yahoo.com">
-  </amp-embed>
-
-  <h2>Yahoo Native Ads</h2>
-  <amp-embed width="320" height="320"
-    type="yahoonativeads"
-    data-key="P55VS9SY2WQXH7TTF5ZW"
-    data-code="833b5525-edb7-47c0-88be-1152bcae7870"
-    data-url="https://techcrunch.com">
-  </amp-embed>
-
-  <h2>YahooJP YDN</h2>
-  <amp-ad width="300" height="250"
-      type="yahoojp"
-      data-yadsid="79712_113431">
-  </amp-ad>
-
-  <h2 id="yandex">Yandex</h2>
-  <amp-ad width="240" height="400"
-      type="yandex"
-      data-block-id="R-I-106712-3">
-  </amp-ad>
-
-  <h2>Yengo</h2>
-  <amp-ad width="300" height="250"
-      type="yengo"
-      data-block-id="152431">
-  </amp-ad>
-
-  <h2>Yieldbot</h2>
-  <amp-ad width="300" height="250"
-      type="doubleclick"
-      rtc-config='{
-        "vendors": {
-          "yieldbot": {
-            "YB_PSN": "1234",
-            "YB_SLOT": "medrec"
-          }
-        }
-      }'
-      data-slot="/2476204/medium-rectangle"
-      data-multi-size="300x220,300x200"
-      json='{"targeting":{"category":["food","lifestyle"]},"categoryExclusions":["health"]}'>
-  </amp-ad>
-
-  <h2>YIELD ONE</h2>
-  <amp-ad width="320" height="50"
-      type="yieldone"
-      data-pubid="0001"
-      data-pid="032478_4">
-  </amp-ad>
-
-  <h2>Yieldmo</h2>
-  <amp-ad width=300 height=250
-      type="yieldmo"
-      data-ymid="1465861990777519642">
-  </amp-ad>
-
-  <h2>Yieldpro</h2>
-  <amp-ad width="300" height="250"
-      type="yieldpro"
-      data-pubnetwork="12c6fc06"
-      data-section-id="1299"
-      data-slot="960">
-  </amp-ad>
-
-  <h2>ValueCommerce</h2>
-  <amp-ad width="300" height="250"
-      type="valuecommerce"
-      data-sid="3008"
-      data-pid="884466614">
-  </amp-ad>
-
-  <h2>VDO.AI</h2>
-  <amp-ad width="375"
-      height="0"
-      id="_vdo_ads_player_ai_"
-      type="vdoai"
-      data-unitid="_vdo_ads_player_ai_"
-      data-tagname="publisher"
-      layout="responsive"
-      >
-  </amp-ad>
-
-<h2>Video intelligence</h2>
-  <amp-ad width="500" height="400"
-          type="videointelligence"
-          layout="responsive"
-          data-publisher-id="test_publisher"
-          data-channel-id="59674276073ef41e33501409">
-  </amp-ad>
-
-  <h2>Videonow</h2>
-  <amp-ad width="300" height="200"
-          type="videonow"
-          data-pid="55555"
-          layout="responsive">
-  </amp-ad>
-
-  <h2>Viralize</h2>
-  <amp-ad width="300" height="169"
-      type="viralize"
-      layout="responsive"
-      data-zid="AACX6WjIMkl-yoGV"
-      data-extra='{"lid":"22486","cid":"22572","preview":"1","f":"gallery"}'>
-  </amp-ad>
-
-  <h2>VMFive</h2>
-  <amp-ad width="300" height="169"
-    type="vmfive"
-    data-app-key="580db14a4a801a2674a56f81"
-    data-placement-id="demo-placement-id"
-    data-ad-type="video-native">
-  </amp-ad>
-
-  <h2>Webediads</h2>
-  <div>It's a private ad network with strict ad targeting, hence very common to see a no-fill.</div>
-  <amp-ad width="300" height="250"
-      type="webediads"
-      data-site="site_test"
-      data-page="amp"
-      data-position="middle"
-      data-query="amptest=1">
-  </amp-ad>
-
-  <h2>Whopa InFeed</h2>
-  <amp-embed width="100" height="300"
-    type="whopainfeed"
-    layout="responsive"
-    heights="(min-width:1907px) 39%, (min-width:1200px) 46%, (min-width:780px) 64%, (min-width:480px) 98%, (min-width:460px) 167%, 196%"
-    data-siteId="d09aa95befe76773c32f581f00b267bc"
-    data-template="default"
-    data-testMode="true"></amp-embed>
-
-  <h2>WP Media</h2>
-  <amp-ad width="300" height="250"
-      type="wpmedia"
-      data-slot="12"
-      data-bunch="7757"
-      data-sn="sg"></amp-ad>
-
-  <h2>ZEDO</h2>
-  <amp-ad width="300" height="250"
-      type="zedo"
-      data-super-id="364489"
-      data-network="2500"
-      data-placement-id="364489_1"
-      data-channel="727"
-      data-publisher="0"
-      data-dim="9">
-  </amp-ad>
-
-  <h2>Zen</h2>
-  <amp-embed width="500" height="354"
-      type="zen"
-      data-clid="[123, 456]">
-  </amp-embed>
-
-  <h2>ZergNet</h2>
-  <amp-embed width="780" height="100"
-      type="zergnet"
-      heights="(max-width:645px) 100%, (max-width:845px) 31%, 23%"
-      layout="responsive"
-      data-zergid="42658">
-  </amp-embed>
-
-  <h2>Zucks</h2>
-  <amp-ad width="320" height="50"
-      type="zucks"
-      data-frame-id="_bda46cf5ac">
-  </amp-ad>
-
-  <amp-ad width="320" height="400"
-          type="zucks"
-          data-adtype="zoe"
-          data-frame-id="_29845b2931"
-          data-zoe-multi-ad="true">
-  </amp-ad>
-</body>
-</html>
diff --git a/examples/alp.amp.html b/examples/alp.amp.html
index 8e962e1837912..e96731aeb2336 100644
--- a/examples/alp.amp.html
+++ b/examples/alp.amp.html
@@ -5,7 +5,6 @@
   <title>ALP examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
diff --git a/examples/amp-ad-exit.amp.html b/examples/amp-ad-exit.amp.html
index d1c8c140824a0..f8e75f2463efd 100644
--- a/examples/amp-ad-exit.amp.html
+++ b/examples/amp-ad-exit.amp.html
@@ -133,7 +133,7 @@ <h1 on="tap:exit-api.exit(target='target1')" role="button" tabindex="1">amp-ad-e
     <div class="content" role="link" tabindex="1" on="tap:exit-api.exit(target='target1', _elem='slide1')">product 1</div>
     <div class="content" role="link" tabindex="1" on="tap:exit-api.exit(target='target2', _elem='slide2')">product 2</div>
   </amp-carousel>
-  <button id="cta" role="button" tabindex="1"
+  <button id="cta" tabindex="1"
       on="tap:exit-api.exit(variable='current', default='target1', _elem='cta')">
     Buy
     <span>
diff --git a/examples/amp-ad-template.amp.html b/examples/amp-ad-template.amp.html
index f283ebd244665..bdb864bf312f6 100644
--- a/examples/amp-ad-template.amp.html
+++ b/examples/amp-ad-template.amp.html
@@ -5,7 +5,6 @@
     <title>Amp Ad Common Example/Debug</title>
     <link rel="canonical" href="http://nonblocking.io/">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-ad-custom" src="https://cdn.ampproject.org/v0/amp-ad-custom-0.1.js"></script>
diff --git a/examples/a4a-fullwidth.amp.html b/examples/amp-ad/a4a-fullwidth.amp.html
similarity index 100%
rename from examples/a4a-fullwidth.amp.html
rename to examples/amp-ad/a4a-fullwidth.amp.html
diff --git a/examples/a4a-multisize.amp.html b/examples/amp-ad/a4a-multisize.amp.html
similarity index 96%
rename from examples/a4a-multisize.amp.html
rename to examples/amp-ad/a4a-multisize.amp.html
index ba87e2c33d0e1..d6b4fd001e5f6 100644
--- a/examples/a4a-multisize.amp.html
+++ b/examples/amp-ad/a4a-multisize.amp.html
@@ -5,7 +5,6 @@
   <title>AMP A4A examples</title>
   <link rel="canonical" href="http://nonblocking.io/" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
diff --git a/examples/a4a.amp.html b/examples/amp-ad/a4a.amp.html
similarity index 92%
rename from examples/a4a.amp.html
rename to examples/amp-ad/a4a.amp.html
index 4232d67087e74..816555d98405b 100644
--- a/examples/a4a.amp.html
+++ b/examples/amp-ad/a4a.amp.html
@@ -5,7 +5,6 @@
   <title>AMP A4A examples</title>
   <link rel="canonical" href="http://nonblocking.io/" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
@@ -60,11 +59,19 @@ <h2>Regular ad</h2>
     width="300">
   </amp-ad>
 
-  <h2>A4A ad</h2>
+  <h2>A4A ad: doubleclick</h2>
   <amp-ad data-slot="/30497360/a4a/a4a_native"
     height="250"
     type="doubleclick"
     width="300">
   </amp-ad>
+
+  <h2>AdSense (may or may not be A4A)</h2>
+  <amp-ad
+    width="300"
+    height="250"
+    type="adsense"
+    data-ad-client="ca-pub-5439573510495356">
+  </amp-ad>
 </body>
 </html>
diff --git a/examples/ads-legacy.amp.html b/examples/amp-ad/ads-legacy.amp.html
similarity index 99%
rename from examples/ads-legacy.amp.html
rename to examples/amp-ad/ads-legacy.amp.html
index a31e4df34d954..ac3a28c88271d 100644
--- a/examples/ads-legacy.amp.html
+++ b/examples/amp-ad/ads-legacy.amp.html
@@ -125,7 +125,7 @@ <h2>AdTech</h2>
       src="https://adserver.adtechus.com/addyn/3.0/5280.1/2274008/0/-1/ADTECH;size=300x250;key=plumber;alias=careerbear-ros-middle1;loc=300;;target=_blank;grp=27980912;misc=3767074">
   </amp-ad>
 
-  <h2>Ad Up Technology</h2>
+  <h2>AdUp Technology</h2>
   <amp-ad type="aduptech"
       layout="fixed"
       width="500"
diff --git a/examples/ads.amp.esm.html b/examples/amp-ad/ads.amp.esm.html
similarity index 98%
rename from examples/ads.amp.esm.html
rename to examples/amp-ad/ads.amp.esm.html
index e535c601aed4c..9220dc2a4d101 100644
--- a/examples/ads.amp.esm.html
+++ b/examples/amp-ad/ads.amp.esm.html
@@ -86,6 +86,7 @@
         <option>adman</option>
         <option>admanmedia</option>
         <option>admixer</option>
+        <option>adnuntius</option>
         <option>adocean</option>
         <option>adop</option>
         <option>adpicker</option>
@@ -227,6 +228,7 @@
         <option>realclick</option>
         <option>recomad</option>
         <option>relap</option>
+        <option>remixd</option>
         <option>revcontent</option>
         <option>revjet</option>
         <option>rfp</option>
@@ -517,6 +519,20 @@ <h2>Admixer</h2>
     <div fallback>asd</div>
   </amp-ad>
 
+  <h2>Adnuntius</h2>
+  <amp-ad width="300" height="250"
+          type="adnuntius"
+          data-au-id="00000000000dbf78"
+          data-user-id="12341234"
+          data-site-id="56785678"
+          data-floor-price='{"amount":1.213,"currency": "AUD"}'
+          data-kv='[{"colors": ["red", "blue"]}]'
+          data-c='["sport/golf", "news"]'
+          data-latitude="123.4567"
+          data-longitude="234.5678"
+          data-segments='["1234", "5678"]'>
+  </amp-ad>
+
   <h2>AdOcean</h2>
   <amp-ad width="300" height="250"
           type="adocean"
@@ -719,7 +735,7 @@ <h2>AdThrive 300x250 banner</h2>
       data-sizes="300x250">
   </amp-ad>
 
-  <h2>Ad Up Technology</h2>
+  <h2>AdUp Technology</h2>
   <amp-ad width="500" height="250"
       type="aduptech"
       layout="fixed"
@@ -1037,13 +1053,6 @@ <h2>Custom leaderboard with no slot specified</h2>
     </template>
   </amp-ad>
 
-  <h2>Cxense Display</h2>
-  <amp-ad width="240" height="65"
-      type="eas"
-      data-eas-domain="stage.emediate.eu"
-      data-eas-cu="3255">
-  </amp-ad>
-
   <h2>Dable</h2>
   <amp-embed width="336" height="280"
       type="dable"
@@ -1866,6 +1875,14 @@ <h2>Relap</h2>
       data-anchorid="i0xMMY1MoliiZWVl">
   </amp-ad>
 
+  <h2>Remixd</h2>
+  <amp-ad width="375" height="120"
+      type="remixd"
+      layout="responsive"
+      data-version="5"
+      data-url="https://www.remixd.com/player/test/amp/index.html">
+  </amp-ad>
+
   <h2>Revcontent Responsive Tag</h2>
   <amp-ad width="320" height="240"
       type="revcontent"
@@ -2163,7 +2180,7 @@ <h2>Teads</h2>
       data-pid="42266"
       layout="responsive">
   </amp-ad>
-  
+
   <h2>TE Medya</h2>
   <amp-embed width="320" height="320"
     type="temedya"
diff --git a/examples/amp-ad/ads.amp.html b/examples/amp-ad/ads.amp.html
new file mode 100644
index 0000000000000..2047934f49729
--- /dev/null
+++ b/examples/amp-ad/ads.amp.html
@@ -0,0 +1,2170 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Ad examples</title>
+  <link rel="canonical" href="http://nonblocking.io/">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <style amp-custom>
+    .broken {
+      color: red;
+    }
+
+    amp-ad {
+      border: 1px solid #ccc;
+      max-width: 500px;
+    }
+
+    .red {
+      background-color: red;
+    }
+
+    .filterBar {
+      background: #eee;
+      padding: 3px;
+      font-size: 1.2em;
+    }
+
+    select {
+      border: 1px solid #999;
+    }
+
+    input[type=submit] {
+      font-size: 14px;
+      border: 1px solid #999;
+      border-radius: 3px;
+      margin-left: 10px;
+    }
+
+    amp-ad[type="revcontent"] {
+      width: 100%;
+      max-width: 1280px;
+      margin: 18px 0;
+      padding: 0;
+    }
+
+    amp-ad[type="nativo"] {
+      width: 100%;
+      max-width: 1280px;
+      margin: 18px 0;
+      padding: 0;
+      height: 100px;
+    }
+
+    amp-ad[type="adsloom"] {
+      width: 100%;
+      max-width: 980px;
+      margin: 18px auto;
+      padding: 0;
+    }
+    amp-ad[type="digiteka"] {
+      width: 300px;
+      height: 250px;
+      max-width: 980px;
+      margin: 18px auto;
+      padding: 0;
+    }
+  </style>
+  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
+  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+
+<body>
+  <div class="filterBar">
+    <form action="ads.amp.html" method="get" target="_top">
+      <label for="filter">Ad network filter</label>
+      <select id="filter" name="type">
+        <option>[Select an ad network]</option>
+        <!--
+      When adding new ad network to the list, please
+      1) verify that the ad slot loads ad. Check DEVELOPMENT.md for how to
+       run a local server.
+      2) keep the list in alphabetic order
+    -->
+    <option>1wo</option>
+    <option>24smi</option>
+    <option>a8</option>
+    <option>a9</option>
+    <option>accesstrade</option>
+    <option>adagio</option>
+    <option>adblade</option>
+    <option>adbutler</option>
+    <option>adfox</option>
+    <option>adgeneration</option>
+    <option>adglare</option>
+    <option>adhese</option>
+    <option>adincube</option>
+    <option>adition</option>
+    <option>adman</option>
+    <option>admanmedia</option>
+    <option>admixer</option>
+    <option>adnuntius</option>
+    <option>adocean</option>
+    <option>adop</option>
+    <option>adpicker</option>
+    <option>adplugg</option>
+    <option>adpon</option>
+    <option>adpushup</option>
+    <option>adreactor</option>
+    <option>adsense</option>
+    <option>adsensor</option>
+    <option>adservsolutions</option>
+    <option>adsloom</option>
+    <option>adsnative</option>
+    <option>adspeed</option>
+    <option>adspirit</option>
+    <option>adstir</option>
+    <option>adstyle</option>
+    <option>adtech</option>
+    <option>adtelligent</option>
+    <option>adthrive</option>
+    <option>adunity</option>
+    <option>aduptech</option>
+    <option>adventive</option>
+    <option>adverline</option>
+    <option>adverticum</option>
+    <option>advertserve</option>
+    <option>adyoulike</option>
+    <option>affiliateb</option>
+    <option>aja</option>
+    <option>amoad</option>
+    <option>aniview</option>
+    <option>anyclip</option>
+    <option>appnexus</option>
+    <option>appvador</option>
+    <option>atomx</option>
+    <option>baidu</option>
+    <option>beaverads</option>
+    <option>beopinion</option>
+    <option>bidtellect</option>
+    <option>blade</option>
+    <option>brainy</option>
+    <option>bringhub</option>
+    <option>byplay</option>
+    <option>caajainfeed</option>
+    <option>capirs</option>
+    <option>caprofitx</option>
+    <option>cedato</option>
+    <option>conative</option>
+    <option>connatix</option>
+    <option>contentad</option>
+    <option>criteo</option>
+    <option>csa</option>
+    <option>custom</option>
+    <option>dable</option>
+    <option>digiteka</option>
+    <option>directadvert</option>
+    <option>distroscale</option>
+    <option>dotandads</option>
+    <option>doubleclick</option>
+    <option>dynad</option>
+    <option>eadv</option>
+    <option>empower</option>
+    <option>Engageya</option>
+    <option>epeex</option>
+    <option>eplanning</option>
+    <option>ezoic</option>
+    <option>f1e</option>
+    <option>f1h</option>
+    <option>feedad</option>
+    <option>felmat</option>
+    <option>finative</option>
+    <option>flite</option>
+    <option>fluct</option>
+    <option>forkmedia</option>
+    <option>freestar</option>
+    <option>freewheel</option>
+    <option>fusion</option>
+    <option>genieessp</option>
+    <option>giraff</option>
+    <option>glomex</option>
+    <option>gmossp</option>
+    <option>gumgum</option>
+    <option>holder</option>
+    <option>ibillboard</option>
+    <option>idealmedia</option>
+    <option>imedia</option>
+    <option>imobile</option>
+    <option>imonomy</option>
+    <option>industrybrains</option>
+    <option>inmobi</option>
+    <option>innity</option>
+    <option>insticator</option>
+    <option>invibes</option>
+    <option>ix</option>
+    <option>jubna</option>
+    <option>kargo</option>
+    <option>ketshwa</option>
+    <option>kiosked</option>
+    <option>kixer</option>
+    <option>kuadio</option>
+    <option>lentainform</option>
+    <option>ligatus</option>
+    <option>lockerdome</option>
+    <option>logly</option>
+    <option>loka</option>
+    <option>luckyads</option>
+    <option>macaw</option>
+    <option>mads</option>
+    <option>mantis-display</option>
+    <option>mediaad</option>
+    <option>marfeel</option>
+    <option>medianet</option>
+    <option>mediavine</option>
+    <option>meg</option>
+    <option>mgid</option>
+    <option>microad</option>
+    <option>miximedia</option>
+    <option>mixpo</option>
+    <option>monetizer101</option>
+    <option>mox</option>
+    <option>my6sense</option>
+    <option>myfinance</option>
+    <option>myoffrz</option>
+    <option>mytarget</option>
+    <option>mywidget</option>
+    <option>nativeroll</option>
+    <option>nativery</option>
+    <option>nativo</option>
+    <option>navegg</option>
+    <option>nend</option>
+    <option>netletix</option>
+    <option>noddus</option>
+    <option>nokta</option>
+    <option>nws</option>
+    <option>oblivki</option>
+    <option>onead</option>
+    <option>onnetwork</option>
+    <option>openadstream</option>
+    <option>openx</option>
+    <option>opinary</option>
+    <option>outbrain</option>
+    <option>pixels</option>
+    <option>playstream</option>
+    <option>plista</option>
+    <option>polymorphicads</option>
+    <option>popin</option>
+    <option>ppstudio</option>
+    <option>pressboard</option>
+    <option>promoteiq</option>
+    <option>pubexchange</option>
+    <option>pubmine</option>
+    <option>pulse</option>
+    <option>pulsepoint</option>
+    <option>puffnetwork</option>
+    <option>purch</option>
+    <option>rakutenunifiedads</option>
+    <option>rbinfox</option>
+    <option>rcmwidget</option>
+    <option>readmo</option>
+    <option>realclick</option>
+    <option>recomad</option>
+    <option>recreativ</option>
+    <option>relap</option>
+    <option>remixd</option>
+    <option>revcontent</option>
+    <option>revjet</option>
+    <option>rfp</option>
+    <option>rnetplus</option>
+    <option>rubicon</option>
+    <option>runative</option>
+    <option>sas</option>
+    <option>seedingalliance</option>
+    <option>sekindo</option>
+    <option>sharethrough</option>
+    <option>shemedia</option>
+    <option>sklik</option>
+    <option>slimcutmedia</option>
+    <option>smartadserver</option>
+    <option>smartclip</option>
+    <option>smi2</option>
+    <option>smilewanted</option>
+    <option>sogouad</option>
+    <option>sortable</option>
+    <option>sona</option>
+    <option>sovrn</option>
+    <option>speakol</option>
+    <option>spotx</option>
+    <option>springAds</option>
+    <option>ssp</option>
+    <option>strossle</option>
+    <option>sulvo</option>
+    <option>sunmedia</option>
+    <option>svknative</option>
+    <option>swoop</option>
+    <option>taboola</option>
+    <option>tcsemotion</option>
+    <option>teads</option>
+    <option>temedya</option>
+    <option>torimochi</option>
+    <option>tracdelight</option>
+    <option>triplelift</option>
+    <option>trugaze</option>
+    <option>uas</option>
+    <option>ucfunnel</option>
+    <option>unruly</option>
+    <option>uzou</option>
+    <option>valuecommerce</option>
+    <option>vdo.ai</option>
+    <option>verizonmedia</option>
+    <option>videointelligence</option>
+    <option>videonow</option>
+    <option>viralize</option>
+    <option>vlyby</option>
+    <option>vmfive</option>
+    <option>webediads</option>
+    <option>weborama</option>
+    <option>widespace</option>
+    <option>wisteria</option>
+    <option>whopainfeed</option>
+    <option>wpmedia</option>
+    <option>xlift</option>
+    <option>yahoo</option>
+    <option>yahoofedads</option>
+    <option>yahoojp</option>
+    <option>yahoonativeads</option>
+    <option>yandex</option>
+    <option>yektanet</option>
+    <option>yengo</option>
+    <option>yieldbot</option>
+    <option>yieldmo</option>
+    <option>yieldpro</option>
+    <option>zedo</option>
+    <option>zen</option>
+    <option>zergnet</option>
+    <option>zucks</option>
+    </select>
+    <input type="submit" value="Go">
+  </form>
+  </div>
+
+  <h2>1WO</h2>
+  <amp-embed
+    width="400"
+    height="700"
+    type="1wo"
+    data-owo-code="c67805ef-2cc3-482c-9067-70f534016259"
+    data-owo-type="widget"
+    data-owo-mode="smart3"
+    src="https://frontend-qa.1worldonline.biz/poller-constructor.js">
+  </amp-embed>
+
+  <h2>24smi</h2>
+  <amp-embed width="250" height="250"
+    type="24smi"
+    src="https://jsn.24smi.net/c/2/11232.js">
+  </amp-embed>
+
+  <amp-embed width="250" height="250"
+    type="24smi"
+    data-blockid="11232">
+  </amp-embed>
+
+  <h2>A8</h2>
+  <amp-ad width="300" height="250"
+    type="a8"
+    data-aid="170223075073"
+    data-wid="001"
+    data-eno="01"
+    data-mid="s00000016751001031000"
+    data-mat="2TCGYR-17GNXU-3L92-64Z8X"
+    data-type="static">
+  </amp-ad>
+
+  <h2>A9 Search Ads</h2>
+  <amp-ad width="400" height="300"
+    type = "a9"
+    data-amzn_assoc_placement = "adunit0"
+    data-amzn_assoc_search_bar = "true"
+    data-amzn_assoc_tracking_id = "deepak2015-20"
+    data-amzn_assoc_search_bar_position = "bottom"
+    data-amzn_assoc_ad_mode = "search"
+    data-amzn_assoc_ad_type = "smart"
+    data-amzn_assoc_marketplace = "amazon"
+    data-amzn_assoc_region = "US"
+    data-amzn_assoc_title = "Shop Related Products"
+    data-amzn_assoc_default_search_phrase = "apple watches"
+    data-amzn_assoc_default_category = "All"
+    data-amzn_assoc_linkid = "b01186f9b305e15fc51214bb45187875"
+    data-regionurl = "https://z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US">
+  </amp-ad>
+
+  <h2>A9 Recom Unsaved</h2>
+  <amp-ad width="400" height="300"
+   type = "a9"
+   data-amzn_assoc_placement = "adunit0"
+   data-amzn_assoc_search_bar = "true"
+   data-amzn_assoc_tracking_id = "subhojitus-20"
+   data-amzn_assoc_search_bar_position = "bottom"
+   data-amzn_assoc_ad_mode = "auto"
+   data-amzn_assoc_ad_type = "smart"
+   data-amzn_assoc_marketplace = "amazon"
+   data-amzn_assoc_region = "US"
+   data-amzn_assoc_title = "Related Products"
+   data-amzn_assoc_linkid = "619af83d37b0fb680e58989de71cd121"
+   data-amzn_assoc_debug = "true"
+   data-amzn_assoc_rows = "1"
+   data-amzn_assoc_overrides = "false"
+   data-amzn_assoc_ead = 8
+   data-amzn_assoc_fallback_mode = '"type": "search", "value": "steve jobs"'
+   data-amzn_assoc_url = "https://techcrunch.com/2018/02/05/visa-and-mastercard-make-it-harder-to-buy-bitcoin-and-other-cryptocurrencies"
+   data-amzn_assoc_aax_src_id = "330"
+   data-amzn_assoc_force_win_bid = "true">
+  </amp-ad>
+
+  <h2>A9 Custom Ads</h2>
+  <amp-ad width="600" height="250"
+    type = "a9"
+    data-amzn_assoc_placement = "adunit0"
+    data-amzn_assoc_search_bar = "true"
+    data-amzn_assoc_tracking_id = "deepak0004-20"
+    data-amzn_assoc_ad_mode = "manual"
+    data-amzn_assoc_ad_type = "smart"
+    data-amzn_assoc_marketplace = "amazon"
+    data-amzn_assoc_region = "US"
+    data-amzn_assoc_title = "My Amazon Picks"
+    data-amzn_assoc_linkid = "c5772783a7d25620cd6226c5cc5885c8"
+    data-amzn_assoc_asins = "B001AWZDA4,B07BFTFYZC,B06XD8XQWK,B018HTGSN8">
+  </amp-ad>
+
+  <h2>A9 Recom Ads Sync</h2>
+  <amp-ad width="300" height="250"
+   type = "a9"
+   data-amzn_assoc_ad_mode = "auto"
+   data-recomtype = "sync"
+   data-adinstanceid = "fe746097-f142-4f8d-8dfb-45ec747632e5"
+   data-regionurl = "https://z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US">
+  </amp-ad>
+
+  <h2>A9 Recom Ads Async</h2>
+  <amp-ad width="300" height="250"
+   type = "a9"
+   data-amzn_assoc_ad_mode = "auto"
+   data-divid = "amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
+   data-recomtype = "async"
+   data-adinstanceid = "fe746097-f142-4f8d-8dfb-45ec747632e5">
+  </amp-ad>
+
+
+  <h2>AccessTrade</h2>
+  <amp-ad width="300" height="250"
+    type="accesstrade"
+    data-atops="r"
+    data-atrotid="00000000000008c06y">
+  </amp-ad>
+
+  <h2>Ad.Agio</h2>
+  <amp-ad width=300 height=250
+    type="adagio"
+    data-sid="39"
+    data-loc="amp_ampw_amps_ampp_300x250"
+    data-keywords=""
+    data-uservars="">
+  </amp-ad>
+
+  <h2>Adblade</h2>
+  <amp-ad width="300" height="250"
+    type="adblade"
+    data-width="300"
+    data-height="250"
+    data-cid="19626-3798936394">
+  </amp-ad>
+
+  <h2>AdButler</h2>
+  <amp-ad width="300" height="250"
+    type="adbutler"
+    data-account="167283"
+    data-zone="212491">
+  </amp-ad>
+
+  <h2>adincube</h2>
+  <amp-ad width="300" height="250"
+    type="adincube"
+    data-ad-type="in_content"
+    data-site-key="TEST_WEBSITE_KEY">
+  </amp-ad>
+
+  <h2>ADITION</h2>
+  <amp-ad width="300" height="250"
+    type="adition"
+    data-version="1"
+    data-wp_id="3470234">
+  </amp-ad>
+
+  <h2>Ad Generation</h2>
+  <amp-ad width="320" height="50"
+    type="adgeneration"
+    data-id="10722">
+  </amp-ad>
+
+  <h2>AdGlare</h2>
+  <amp-ad width="300" height="250" layout="responsive"
+    type="adglare"
+    data-host="try"
+    data-zid="810958668"
+    data-keywords="blue,car">
+  </amp-ad>
+
+  <h2>Adhese</h2>
+  <amp-ad width=300 height=250
+    type="adhese"
+    data-location="_sdk_amp_"
+    data-position=""
+    data-format="amprectangle"
+    data-account="demo"
+    data-request-type="ad">
+  <div placeholder></div>
+  <div fallback></div>
+  </amp-ad>
+
+  <amp-ad width=300 height=250
+    type="adhese"
+    data-location="_sdk_amp_"
+    data-position=""
+    data-format="amprectangle"
+    data-account="demo"
+    data-request-type="ad"
+    json='{"targeting":{"br": ["sport", "info"],"dt": ["desktop"]}}'>
+  <div placeholder></div>
+  <div fallback></div>
+  </amp-ad>
+
+  <h2 id="adfox">AdFox</h2>
+  <amp-ad width="248" height="408"
+    type="adfox"
+    data-owner-id="208087"
+    data-adfox-params='{"pt": "b","p1": "bsoji","p2": "feil","pct": "a","pfc": "bbhfo","pfb": "cwrtv"}'>
+  </amp-ad>
+
+  <h2>Adman</h2>
+  <amp-ad width="300" height="250"
+    type="adman"
+    data-ws="17342"
+    data-s="300x250"
+    data-host="talos.adman.gr">
+  </amp-ad>
+
+  <h2>AdmanMedia</h2>
+  <amp-ad width="300" height="250"
+    type="admanmedia"
+    data-id="8e916419">
+  </amp-ad>
+
+  <h2>Admixer</h2>
+  <amp-ad width="300" height="250"
+    type="admixer"
+    data-sizes="[[300,250]]"
+    data-zone="2eb6bd58-865c-47ce-af7f-a918108c3fd2">
+  </amp-ad>
+  <amp-ad type="admixer" width="300" height="300" layout="responsive"
+    data-sizes="[[300,250],[300,300]]"
+    data-zone="2eb6bd58-865c-47ce-af7f-a918108c3fd2">
+  <div fallback>asd</div>
+  </amp-ad>
+
+  <h2>Adnuntius</h2>
+  <amp-ad width="300" height="250"
+      type="adnuntius"
+      data-au-id="00000000000dbf78"
+      data-user-id="12341234"
+      data-site-id="56785678"
+      data-floor-price='{"amount":1.213,"currency": "AUD"}'
+      data-kv='[{"colors": ["red", "blue"]}]'
+      data-c='["sport/golf", "news"]'
+      data-latitude="123.4567"
+      data-longitude="234.5678"
+      data-segments='["1234", "5678"]'>
+  </amp-ad>
+
+  <h2>AdOcean</h2>
+  <amp-ad width="300" height="250"
+      type="adocean"
+      data-ao-mode="sync"
+      data-ao-emitter="myao.adocean.pl"
+      data-ao-id="ado-vf2X22YCNzPRUVYmLg.jQb53Xb1BcMbzJlwIv7SLH_f.97"
+      data-ao-preview="true"
+      data-ao-keys="key1,key2,key3"
+      data-ao-vars='{"a":"b","c":"d"}'
+      data-ao-clusters='{"clusterA":[-1,2,-3,63], "clusterB":[1,-63]}'
+      >
+  </amp-ad>
+
+  <amp-ad width="300" height="250"
+      type="adocean"
+      data-ao-mode="buffered"
+      data-ao-emitter="myao.adocean.pl"
+      data-ao-id="ado-vf2X22YCNzPRUVYmLg.jQb53Xb1BcMbzJlwIv7SLH_f.97"
+      data-ao-preview="true"
+      data-ao-keys="key1,key2,key3"
+      data-ao-vars='{"a":"b","c":"d"}'
+      data-ao-clusters='{"clusterA":[-1,2,-3,63], "clusterB":[1,-63]}'
+      >
+  </amp-ad>
+
+  <h2>AdOcean master-slave</h2>
+  <amp-ad width="300" height="250"
+      type="adocean"
+      data-ao-emitter="myao.adocean.pl"
+      data-ao-master="FDyQKk0qN2a9SxwCMal6Eove..r_lvBE3pPfr_Ier9..f7"
+      data-ao-id="adoceanmyaonhqnqukjtt"
+      data-ao-mode="buffered"
+      data-ao-preview="true"
+      data-ao-keys="key1,key2,key3"
+      data-ao-vars='{"a":"b","c":"d"}'
+      data-ao-clusters='{"clusterA":[-1,2,-3,63], "clusterB":[1,-63]}'
+      >
+  </amp-ad>
+
+  <amp-ad width="300" height="250"
+      type="adocean"
+      data-ao-emitter="myao.adocean.pl"
+      data-ao-master="FDyQKk0qN2a9SxwCMal6Eove..r_lvBE3pPfr_Ier9..f7"
+      data-ao-id="adoceanmyaokiheeseoko"
+      data-ao-mode="buffered"
+      data-ao-preview="true"
+      data-ao-keys="key1,key2,key3"
+      data-ao-vars='{"a":"b","c":"d"}'
+      data-ao-clusters='{"clusterA":[-1,2,-3,63], "clusterB":[1,-63]}'
+      >
+  </amp-ad>
+
+  <h2>Adop</h2>
+  <amp-ad width="300" height="250"
+      type="adop"
+      data-z="a3a8014f-0b5f-46dd-a0db-a2ae686541ef"></amp-ad>
+
+  <h2>AdPicker</h2>
+  <amp-ad width="300" height="250"
+    type="adpicker"
+    data-ph="4p7hhqa73u">
+  </amp-ad>
+
+  <h2>AdPlugg</h2>
+  <amp-ad width="300" height="250"
+    type="adplugg"
+    data-access-code="A48214096"
+    data-zone="my_amp_zone_300x250">
+  </amp-ad>
+
+  <h2>Adpon</h2>
+  <amp-ad width="300" height="250"
+      type="adpon"
+      data-fid="363">
+  </amp-ad>
+
+  <h2>Adpushup</h2>
+  <amp-ad width="300" height="250"
+      type="adpushup"
+      data-siteid="40827"
+      data-slotpath="/103512698/AMP_COMPONENT_TEST_1"
+      data-totalAmpSlots="1">
+  </amp-ad>
+
+  <h2>AdReactor</h2>
+  <amp-ad width="728" height="90"
+    type="adreactor"
+    data-pid=790
+    data-zid=9
+    data-custom3="No Type">
+  </amp-ad>
+
+  <h2>AdSense</h2>
+  <amp-ad width="300" height="250"
+    type="adsense"
+    data-ad-client="ca-pub-2005682797531342"
+    data-ad-slot="7046626912">
+  </amp-ad>
+
+  <h2>AdSensor</h2>
+  <amp-ad width="300" height="250"
+    type="adsensor"
+    data-application-id="2697"
+    data-adunit-id="1226710">
+  </amp-ad>
+  <amp-ad width="728" height="90"
+    type="adsensor"
+    data-application-id="2697"
+    data-adunit-id="1226707">
+  </amp-ad>
+
+  <h2>AdServSolutions</h2>
+  <amp-ad width="300" height="250"
+    type="adservsolutions"
+    data-client="adservsolutions.com"
+    data-zid="1953913050">
+  </amp-ad>
+
+  <h2>AdsLoom</h2>
+  <amp-ad width="800" height="600"
+       type="adsloom"
+       layout="responsive"
+       data-widget-id="1079">
+  </amp-ad>
+
+  <h2>AdsNative</h2>
+  <amp-ad width="300" height="250"
+    type="adsnative"
+    data-anapiid="t8AjW-y8rudFGzKft_YQcBZG1-aGZ5otj5QdsKaP"
+    data-ancat="IAB1,IAB2"
+    data-antid="abc"
+    data-ankv="key:val,key:val2">
+  </amp-ad>
+
+  <h2>AdSpeed</h2>
+  <amp-ad width="300" height="250"
+    type="adspeed"
+    data-zone="82441"
+    data-client="3">
+  <div placeholder></div>
+  <div fallback></div>
+  </amp-ad>
+
+  <h2>AdSpirit</h2>
+  <amp-ad width="300" height="250"
+    type="adspirit"
+    data-asm-params="&amp;pid=4"
+    data-asm-host="help.adspirit.de">
+  </amp-ad>
+
+  <h2>AdStir 320x50 banner</h2>
+  <amp-ad width="320" height="50"
+    type="adstir"
+    data-app-id="MEDIA-343ded3e"
+    data-ad-spot="1">
+  </amp-ad>
+
+  <h2>AdStyle responsive widget</h2>
+  <amp-embed width="400" height="260"
+      type="adstyle"
+      layout="responsive"
+      data-widget="1"
+      heights="(max-width: 320px) 933px,
+    (max-width: 360px) 1087px,
+    (max-width: 375px) 1138px,
+    (max-width: 412px) 1189px,
+    (max-width: 414px) 1072px,
+    (max-width: 568px) 1151px,
+    (max-width: 640px) 1128px,
+    (max-width: 667px) 1151px,
+    (max-width: 732px) 1211px,
+    (max-width: 736px) 1151px,
+    (max-width: 768px) 633px,
+    (max-width: 1024px) 711px,
+    86vw">
+  </amp-embed>
+
+  <h2>AdTech (1x1 fake image ad)</h2>
+  <amp-ad width="300" height="250" type="adtech"
+    src="https://adserver.adtechus.com/addyn/3.0/5280.1/2274008/0/-1/ADTECH;size=300x250;key=plumber;alias=careerbear-ros-middle1;loc=300;;target=_blank;grp=27980912;misc=3767074">
+  </amp-ad>
+
+  <h2>Adtelligent</h2>
+  <amp-ad width="300" height="250" type="adtelligent" data-source="350975">
+  </amp-ad>
+
+  <h2>AdThrive 320x50 banner</h2>
+  <amp-ad width="320" height="50" type="adthrive" data-site-id="test" data-ad-unit="AdThrive_Content_1"
+    data-sizes="320x50">
+  </amp-ad>
+
+  <h2>AdUnity (300x250 demo banner)</h2>
+  <amp-ad type="adunity" width="300" height="250" data-au-account="5057446857420" data-au-site="test.site"
+    data-au-section data-au-zone="rectangle" data-au-isdemo="true">
+  </amp-ad>
+
+  <h2>AdThrive 300x250 banner</h2>
+  <amp-ad width="300" height="250" type="adthrive" data-site-id="test" data-ad-unit="AdThrive_Content_2"
+    data-sizes="300x250">
+  </amp-ad>
+
+  <h2>AdUp Technology</h2>
+  <amp-ad width="500" height="250" type="aduptech" layout="fixed" data-placementkey="ae7906d535ce47fbb29fc5f45ef910b4"
+    data-query="reisen;mallorca;spanien" data-adtest="1">
+  </amp-ad>
+
+  <h2>Adventive</h2>
+  <amp-ad width="300" height="250"
+    data-src="https://ads.adventive.com/ad?j&pid=c72f8c57-4bdb-4f84-ba46-8b34a2512501&type=4" type="adventive">
+  </amp-ad>
+
+  <h2>Adverline</h2>
+  <amp-ad width="300" height="250" type="adverline" data-id=13625 data-plc=3>
+  </amp-ad>
+
+  <h2>Adverticum</h2>
+  <amp-ad width="285" height="350" type="adverticum" data-goa3zone="4316734" data-costumeTargetString="bWFsYWM=">
+  </amp-ad>
+
+  <h2>AdvertServe</h2>
+  <amp-ad width="300" height="250" type="advertserve" data-client="tester" data-pid=0 data-zid=68>
+  </amp-ad>
+
+  <h2>Adyoulike</h2>
+  <amp-ad width="300" height="250" type="adyoulike" data-placement="d135a2027b1041059f06fbf8cf4ddfef" data-dc="fra01"
+    data-campaign="665253da9edc423f683a5306f22b883d">
+  </amp-ad>
+  <h2>Affiliate-B</h2>
+  <amp-ad width="300" height="250" type="affiliateb" data-afb_a="l44x-y174897c" data-afb_p="g2m" data-afb_t="i">
+  </amp-ad>
+
+  <h2>AJA</h2>
+  <amp-ad width="300" height="250" type="aja" layout="responsive" data-asi="xWc2iVRZR">
+  </amp-ad>
+
+  <h2>AMoAd banner</h2>
+  <amp-ad width="300" height="250" type="amoad" data-ad-type="banner"
+    data-sid="62056d310111552c951d19c06bfa71e16e615e39493eceff667912488bc576a6">
+  </amp-ad>
+
+  <h2>AMoAd native</h2>
+  <amp-ad width="320" height="100" type="amoad" data-ad-type="native"
+    data-sid="62056d310111552c951d19c06bfa71e1bc19eea7e94d0a6e73e46a9402dbee47">
+  </amp-ad>
+
+  <h2>Aniview</h2>
+  <amp-ad width="640" height="360" type="aniview" data-publisherId="55b88d4a181f465b3e8b4567"
+    data-channelId="5a5f17a728a06102d14c2718">
+  </amp-ad>
+
+  <h2>AnyClip</h2>
+  <amp-ad width="480" height="300" layout="responsive" type="anyclip" data-pubname="lre_qa_temp"
+    data-widgetname="amp_test_autoplay" data-ac-embed-mode="plain" data-ourl="https://anyclip.com/">
+  </amp-ad>
+
+  <h2>AppNexus with JSON based configuration multi ad</h2>
+  <amp-ad width="728" height="90" type="appnexus" data-target="apn_ad_2"
+    json='{"pageOpts":{"member": 958}, "adUnits": [{"disablePsa": true, "tagId": 6063968,"sizes": [300,250],"targetId": "apn_ad_1"}, {"tagId": 6063968,"sizes": [728,90],"targetId":"apn_ad_2"}]}'>
+  </amp-ad>
+  <!-- There could be no creative rendered for this tag, this is to test the behaviour when there are no bids for a tag -->
+  <amp-ad width="300" height="250" type="appnexus" data-target="apn_ad_1"
+    json='{"pageOpts":{"member": 958}, "adUnits": [{"disablePsa": true, "tagId": 6063968,"sizes": [300,250],"targetId": "apn_ad_1"}, {"tagId": 6063968,"sizes": [728,90],"targetId":"apn_ad_2"}]}'>
+  </amp-ad>
+
+  <amp-ad width="728" height="90" type="appnexus" data-target="apn_ad_3"
+    json='{"adUnits": [{"tagId": 6063968,"sizes": [728,90],"targetId":"apn_ad_3"}]}'>
+  </amp-ad>
+
+  <h2>AppVador</h2>
+  <amp-ad width="320" height="180" type="appvador" data-id="8c328a2daa6f9ce4693f57246cd86e0a">
+  </amp-ad>
+
+  <h2>Atomx</h2>
+  <amp-ad width="300" height="250" type="atomx" data-id="1234">
+  </amp-ad>
+
+  <h2>Baidu</h2>
+  <amp-ad width="300" height="250" type="baidu" data-cproid="u2697398">
+  </amp-ad>
+
+  <h2>BeaverAds</h2>
+  <amp-ad width="300" height="300" type="beaverads" data-block-id="1001038">
+  </amp-ad>
+
+  <amp-ad width="300" height="1" type="beopinion" layout="responsive" data-name="slot_0" data-my-content="0"
+    data-account="556f2afc6ebef601004fb60f">
+  </amp-ad>
+
+  <h2 id="bidtellect">Bidtellect</h2>
+  <amp-ad width=320 height=200 type="bidtellect" data-t="20bc0442-8bec-43f8-9992-08be6e6a3591" data-pid="925847381"
+    data-sid="216072">
+  </amp-ad>
+
+  <h2>Blade</h2>
+  <amp-ad width="300" height="250" type="blade" servingDomain="ssr.streamrail.net" data-blade_player_type="blade"
+    data-blade_macros='{"page_url":"[PAGE_URL]",  "ip":"[IP]","ua":"[UA]","cb":"[CB]","dnt":"[DNT]","sub_id":"[SUB_ID]","user_consent":"[USER_CONTENT]","gdpr":"[GDPR]"}'
+    data-blade_player_id="5af16139cb938a00022c1326" data-blade_api_key="5af15a3b02e28f0002000001">
+  </amp-ad>
+
+  <h2>brainy</h2>
+  <amp-ad width="300" height="250" type="brainy" data-aid="10" data-slot-id="3347">
+  </amp-ad>
+
+  <h2>Broadstreet Ads</h2>
+  <amp-ad width="300" height="250" type="broadstreetads" data-network="229" data-zone="63940">
+    <div placeholder></div>
+    <div fallback></div>
+  </amp-ad>
+
+  <h2>Bringhub Mini-Storefront</h2>
+  <amp-embed width="600" height="320" type="bringhub" layout="responsive"
+    heights="(max-width: 270px) 1280px, (max-width:553px) 640px, 338px">
+  </amp-embed>
+
+  <h2>ByPlay</h2>
+  <amp-ad width="400" height="225" type="byplay"
+    data-vast-url="https://h.f1.impact-ad.jp/adv?section_id=7693&env=dev">
+  </amp-ad>
+
+  <h2>CA A.J.A. Infeed</h2>
+  <amp-ad width="320" height="120" type="caajainfeed" data-ad-spot="jqeto4eMJqk" data-test="true">
+  </amp-ad>
+
+  <h2>CA ProFit-X</h2>
+  <!-- Ad placement with data-tagid is deprecated.
+  It will become invalid after all CA ProFit-X's
+  inventories are replaced by data-mediaid -->
+  <amp-ad width="320" height="50" type="caprofitx" data-tagid="17359">
+  </amp-ad>
+
+  <amp-ad width="320" height="50" type="caprofitx" data-mediaid="3752" data-tag-places="17359">
+  </amp-ad>
+
+  <h2>Cedato</h2>
+  <amp-ad width="640" height="360" type="cedato" data-id="303084288">
+  </amp-ad>
+
+  <h2>Conative</h2>
+
+  <amp-ad type="conative" height="250" width="300" layout="responsive" sizes="(min-width: 320px) 320px, 100vw"
+    data-domain="225" data-adslot="1977" data-preview="1">
+  </amp-ad>
+
+  <h2>Connatix</h2>
+  <amp-ad width="300" height="250" type="connatix"
+    data-connatix={"data-connatix-token":"755145ed-72aa-4a35-bc6e-d5dcfb8837d2"}>
+  </amp-ad>
+
+  <h2>Content.ad Banner 320x50</h2>
+  <amp-ad width="320" height="50" type="contentad" data-id="80a26f7c-277a-4c9a-b541-1ae7304d8b06"
+    data-d="bm9uYmxvY2tpbmcuaW8=" data-wid="218710" data-url="nonblocking.io">
+  </amp-ad>
+
+  <h2>Content.ad Banner 300x250</h2>
+  <amp-ad width="300" height="250" type="contentad" data-id="09a8809f-9e98-4c24-b076-3dc28c8a7f32"
+    data-d="bm9uYmxvY2tpbmcuaW8=" data-wid="218706" data-url="nonblocking.io">
+  </amp-ad>
+
+  <h2>Content.ad Banner 300x250 2x2</h2>
+  <amp-ad width="300" height="250" type="contentad" data-id="7902c314-4cad-466e-9264-ecd333a2c757"
+    data-d="bm9uYmxvY2tpbmcuaW8=" data-wid="218705" data-url="nonblocking.io">
+  </amp-ad>
+
+  <h2>Content.ad Banner 300x600</h2>
+  <amp-ad width="300" height="600" type="contentad" data-id="54115175-cb71-4905-9781-970c868059c1"
+    data-d="bm9uYmxvY2tpbmcuaW8=" data-wid="218708" data-url="nonblocking.io">
+  </amp-ad>
+
+  <h2>Content.ad Banner 300x600 5x2</h2>
+  <amp-ad width="300" height="600" type="contentad" data-id="d5979da1-3686-4b8d-8bbc-9a94eb2d6a76"
+    data-d="bm9uYmxvY2tpbmcuaW8=" data-wid="218709" data-url="nonblocking.io">
+  </amp-ad>
+
+  <h2>Criteo Passback</h2>
+  <p>Due to ad targeting, the slot might not load ad.</p>
+
+  <amp-ad width="300" height="250" type="criteo" data-tagtype="passback" data-zone="314159">
+  </amp-ad>
+
+  <h2>CSA</h2>
+  <amp-ad width="auto" height="300" type="csa" layout="fixed-height"
+    data-afs-page-options='{"pubId": "partner-pub-9616389000213823", "query": "flowers"}'
+    data-afs-adblock-options='{"width": "auto", "number": 1}'>
+  </amp-ad>
+
+  <h2 id="custom">Custom leaderboard</h2>
+  <amp-ad width="500" height="60" type="custom" data-slot="1" data-url="/examples/custom.ad.example.json">
+    <template type="amp-mustache" id="amp-template-id-leader">
+      <a href="{{href}}" target='_blank' rel="noopener noreferrer">
+        <amp-img layout='fixed' width="500" height="60" src="{{src}}" data-info="{{info}}"></amp-img>
+      </a>
+    </template>
+  </amp-ad>
+
+  <h2>Custom square</h2>
+  <amp-ad width="200" height="200" type="custom" data-slot="2" data-url="/examples/custom.ad.example.json">
+    <template type="amp-mustache">
+      <a href="{{href}}" target="_blank" rel="noopener noreferrer">
+        <amp-img layout='fixed' height="200" width="200" src="{{src}}" data-info="{{info}}"></amp-img>
+      </a>
+    </template>
+  </amp-ad>
+
+  <h2>Custom leaderboard with no slot specified</h2>
+  <amp-ad width="500" height="60" type="custom" data-url="/examples/custom.ad.example.single.json">
+    <template type="amp-mustache" id="amp-template-id-no-slot">
+      <a href="{{href}}" target="_blank" rel="noopener noreferrer">
+        <amp-img layout='fixed' height="60" width="500" src="{{src}}" data-info="{{info}}"></amp-img>
+      </a>
+    </template>
+  </amp-ad>
+
+  <h2>Dable</h2>
+  <amp-embed width="336" height="280" type="dable" data-widget-id="G7ZdEWXW" data-item-id="testitem">
+  </amp-embed>
+
+  <h2>Digiteka</h2>
+  <amp-ad width="300" height="250" type="digiteka" layout="responsive" data-zone="1" data-mdtk="01540779">
+  </amp-ad>
+
+  <h2>Directadvert</h2>
+  <amp-ad width="320" height="250" type="directadvert" data-block-id="1953045">
+  </amp-ad>
+
+  <h2>DistroScale</h2>
+  <amp-ad width="300" height="600" type="distroscale" data-pid="1" data-zid="8710" layout="responsive">
+  </amp-ad>
+
+  <h2>DotAndAds masthead</h2>
+  <amp-ad width="980" height="250" type="dotandads" data-cid="11" data-mpo="ampTest" data-mpt="amp-amp-all-all"
+    data-sp='sn-u'>
+  </amp-ad>
+
+  <h2>DotAndAds 300x250 box</h2>
+  <amp-ad width="300" height="250" type="dotandads" data-sp='300x250-u' data-cid="11" data-mpo="ampTest"
+    data-mpt="amp-amp-all-all">
+  </amp-ad>
+
+  <h2>Doubleclick</h2>
+  <amp-ad width="320" height="50" type="doubleclick" data-slot="/4119129/mobile_ad_banner">
+  </amp-ad>
+
+  <h2>Doubleclick with JSON based parameters</h2>
+  <amp-ad width="320" height="50" type="doubleclick" data-slot="/4119129/mobile_ad_banner"
+    json='{"targeting":{"sport":["rugby","cricket"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":0}'>
+  </amp-ad>
+
+  <h2>Doubleclick no ad</h2>
+  <amp-ad width="300" height="200" type="doubleclick" data-slot="/4119129/doesnt-exist">
+  </amp-ad>
+
+  <h2>Doubleclick with overriden size</h2>
+  <amp-ad width="420" height="100" data-override-width="320" data-override-height="50" type="doubleclick"
+    data-slot="/4119129/mobile_ad_banner" class="red">
+  </amp-ad>
+
+  <h2>Doubleclick challenging ad</h2>
+  <amp-ad width="414" height="457" type="doubleclick" layout="fixed" data-slot="/35096353/amptesting/badvideoad">
+  </amp-ad>
+
+  <h2>DynAd</h2>
+  <amp-ad width="300" height="250" type="dynad"
+    src="https://t.dynad.net/script/?dc=5550002445;ord=1561170689208;idt_product=1;aff_source=2710d4ec5b3843f985bd52d768425f5b;coddisplaysupplier=2710d4ec5b3843f985bd52d768425f5b;descrColor=000000;titleColor=000000;urlColor=A6A6A6;borderColor=FFFFFF;bgColor=FFFFFF;altColor=FFFFFF;deslabel=saibatudomt.com.br;click=">
+  </amp-ad>
+
+  <h2>eADV</h2>
+  <amp-ad width="300" height="250" type="eadv" data-x="ba-16488-75-2-95-0-4c-23-b8-300x250-84-0-a0"
+    data-u="l0o0c0a8l%3Ahtos">
+  </amp-ad>
+
+  <h2>Empower</h2>
+  <amp-ad width="300" height="250" type="empower" data-site="example" data-zone="123456">
+  </amp-ad>
+
+  <h2>Engageya widget</h2>
+  <amp-embed width="200" height="200" type="engageya" layout="responsive" data-widgetIds="72154"
+    data-websiteId="111292" data-publisherId="155235">
+  </amp-embed>
+
+  <h2>Epeex</h2>
+  <amp-embed width="100" height="100"
+    heights="(max-width:480px) 460%, (max-width:768px) 130%, (min-width: 769px) 85%, 75%" type="epeex"
+    layout="responsive" data-account="demoepeex" data-channel="1">
+  </amp-embed>
+
+  <h2>E-Planning 320x50</h2>
+  <amp-ad width="320" height="50" type="eplanning" layout=responsive data-epl_si="af2"
+    data-epl_sv="https://ads.eu.e-planning.net" data-epl_isv="https://us.img.e-planning.net" data-epl_sec="AMP_TEST"
+    data-epl_kvs='{"target1":"food", "target2":"cars"}' data-epl_e="AMP_TEST">
+  </amp-ad>
+
+  <h2>Ezoic</h2>
+  <amp-ad width="300" height="250" type="ezoic" data-slot="/1254144/28607874"
+    json='{"targeting": {"iid15":"1479509","t":"134","d":"1317","t1":"134","pvc":"0","ap":"1144","sap":"1144","a":"|0|","as":"revenue","plat":"1","bra":"mod1","ic":"1","at":"mbf","adr":"400","reft":"tf","ga":"2497208","rid":"99998","pt":"0","al":"2022","compid":"1","tap":"28607874-1479509","br1":"0","br2":"0"}}'>
+  </amp-ad>
+
+  <h2>FlexOneELEPHANT</h2>
+  <amp-ad width="300" height="250" type="f1e" data-url="https://demo.impact-ad.jp"
+    data-target="/SITE=AMPSITE/AREA=AMPAREA/AAMSZ=300X250/OENCJP=UTF8">
+  </amp-ad>
+
+  <h2>FlexOneHARRIER</h2>
+  <amp-ad width="300" height="250" type="f1h" data-section-id="2267" data-slot="2843">
+  </amp-ad>
+
+  <h2>FeedAd</h2>
+  <amp-ad width="320" height="180" type="feedad"
+    data-client-token="EiRjNjM3MGZlNy00NmQ2LTRmZGYtYjRmNy1jZGZlNWQ4OTgxYTU=" data-placement-id="amp-example"
+    data-background="#feedad">
+  </amp-ad>
+
+  <h2>Felmat</h2>
+  <amp-ad width="300" height="250" type="felmat" data-host="felmat.net" data-fmt="banner" data-fmk="U12473_n2cJD"
+    data-fmp="0">
+  </amp-ad>
+
+  <h2>Flite</h2>
+  <amp-ad width="320" height="568" type="flite" data-guid="aa7bf589-6d51-4194-91f4-d22eef8e3688" data-mixins="">
+  </amp-ad>
+
+  <h2>finative</h2>
+  <amp-ad height="250" type="finative" data-url="https://mockup.finative.cloud">
+  </amp-ad>
+
+  <h2>fluct</h2>
+  <amp-ad width="300" height="250" type="fluct" data-g="1000067784" data-u="1000101409">
+  </amp-ad>
+
+  <amp-ad width="300" height="250"
+          type="fluct"
+          data-g="1000128429"
+          data-u="1000220560"
+          data-tagtype="api">
+  </amp-ad>
+
+  <h2>Fork Media</h2>
+  <amp-ad width="50" height="66" type="forkmedia" data-product="inread" data-html-access-allowed>
+  </amp-ad>
+
+  <h2>Fusion</h2>
+  <amp-ad width="600" height="100" type="fusion" data-ad-server="bn-01d.adtomafusion.com"
+    data-media-zone="adtomatest.apica" data-layout="apicaping" data-space="apicaAd"
+    data-parameters="age=99&isMobile&gender=male">
+  </amp-ad>
+
+  <h2>Freestar</h2>
+  <amp-ad width="320" height="50" data-block-on-consent type="doubleclick"
+    data-slot="/15184186/headphonereview_300x250_320x50" json='{"targeting":{"hb_format": "banner"}}' rtc-config='{
+      "vendors": {
+        "freestar": {"TAG_ID": "rubicon_headphone_review_test"}
+        },
+        "sendRegardlessOfConsentState": true,
+      "timeoutMillis": 2500}'>
+  </amp-ad>
+
+  <h2>FreeWheel</h2>
+  <amp-ad width="300" height="150" type="freewheel" layout="responsive" data-zone="2003">
+  </amp-ad>
+
+  <h2>Geniee SSP</h2>
+  <amp-ad width="300" height="250" type="genieessp" data-vid="3" data-zid="1077330">
+  </amp-ad>
+
+  <h2>Giraff</h2>
+  <amp-ad width="300" height="480" type="giraff" data-block-name="novotekaru">
+  </amp-ad>
+
+  <h2>GLOMEX</h2>
+  <amp-embed width="16" height="9" type="glomex" data-playlist-id="v-bdui4dz7vjq9"
+    data-integration-id="admttw2c9jc23slcg" layout="responsive">
+  </amp-embed>
+
+  <h2 class="broken">GMOSSP 320x50 banner</h2>
+  <amp-ad width="320" height="50" type="gmossp" data-id="10014">
+  </amp-ad>
+
+  <h2>GumGum 300x100 banner</h2>
+  <amp-ad width=300 height=100 type="gumgum" data-zone="ggumtest" data-slot="3883">
+  </amp-ad>
+
+  <h2>Holder 300x250 banner</h2>
+  <amp-ad width="300" height="250" type="holder" data-block="7163">
+  </amp-ad>
+
+  <h2>iBillboard 300x250 banner</h2>
+  <amp-ad width="300" height="250" type="ibillboard"
+    src="https://go.eu.bbelements.com/please/code?j-21414.1.5.6.0.0._blank">
+  </amp-ad>
+
+  <h2>Idealmedia</h2>
+  <amp-ad width="600" height="320" type="idealmedia" data-publisher="testsok150917-d1.com" data-widget="167018"
+    data-container="M278974ScriptRootC167018">
+  </amp-ad>
+
+  <h2>I-Mobile 320x50 banner</h2>
+  <amp-ad width="320" height="50" type="imobile" data-pid="1847" data-adtype="banner" data-asid="813689">
+  </amp-ad>
+
+  <h2>Imonomy 728x90 banner</h2>
+  <amp-ad width="728" height="90" type="imonomy" data-slot="/36653869/amp_imo_multi_size" data-pid="1225234623"
+    data-sub-id="636gd">
+  </amp-ad>
+
+  <h2>Imedia</h2>
+  <amp-ad width="300" height="250" type="imedia" data-id="p1"
+    data-positions='[{"id":"p1", "zoneId":"seznam.novinky.ikona2"}, {"id":"p2", "zoneId":"seznam.novinky.ikona"}]'>
+  </amp-ad>
+
+  <amp-ad width="300" height="100" type="imedia" data-id="p2"
+    data-positions='[{"id":"p1", "zoneId":"seznam.novinky.ikona2"}, {"id":"p2", "zoneId":"seznam.novinky.ikona"}]'>
+  </amp-ad>
+
+  <h2>Index Exchange Header Tag</h2>
+  <amp-ad width="300" height="250" type="ix" data-ix-id="1" data-slot="/62650033/AMP_Example_Ad_Unit">
+  </amp-ad>
+
+  <h2>Industrybrains</h2>
+  <amp-ad width="300" height="250" type="industrybrains" data-width="300" data-height="250"
+    data-cid="19626-3798936394">
+  </amp-ad>
+
+  <h2>InMobi</h2>
+  <amp-ad width="320" height="50" type="inmobi" data-siteid="a0078c4ae5a54199a8689d49f3b46d4b" data-slotid="15">
+  </amp-ad>
+
+  <h2>Innity</h2>
+  <amp-ad width="300" height="250" type="innity" data-pub="eda80a3d5b344bc40f3bc04f65b7a357" data-zone="62546">
+  </amp-ad>
+
+  <amp-ad width="300" height="250" type="innity" data-pub="eda80a3d5b344bc40f3bc04f65b7a357" data-zone="62546"
+    data-channel="NEWS">
+  </amp-ad>
+
+  <h2>Insticator</h2>
+  <amp-embed type="insticator" width="auto" height="850" data-site-id="c40f316f-e18a-4cef-b9a6-b04acbaec113"
+    data-embed-id="77ee0296-8ac4-4bca-91c8-51256b9830f1">
+  </amp-embed>
+
+  <h2>Invibes</h2>
+  <amp-ad width="300" height="250" type="invibes" data-pid="1234" data-ad-categ="infeed"
+    data-custom-endpoint="https://k.r66net.com/GetAmpLink">
+  </amp-ad>
+
+  <h2>Jubna widget</h2>
+  <amp-embed width="200" height="200" type="jubna" layout="responsive" data-wid="1078" data-pid="792">
+  </amp-embed>
+
+  <h2>Kargo</h2>
+  <amp-ad width="300" height="250" type="kargo" data-site="_tt9gZ3qxCc2RCg6CADfLAAFR" data-slot="_vypM8bkVCf"
+    data-options='{"targetParams":{"AD_ID":"test-middle","ad_id":"test-middle"}}'>
+  </amp-ad>
+
+  <h2>Ketshwa</h2>
+  <amp-ad width="300" height="250" type="ketshwa" data-widgetid="5f4eb6bef383a2a8cf001a07" data-externalid="1082">
+  </amp-ad>
+
+  <h2>Kiosked</h2>
+  <amp-ad width="300" height="250" type="kiosked" data-scriptid="91">
+  </amp-ad>
+
+  <h2>Kixer</h2>
+  <amp-ad width="300" height="250" type="kixer" data-adslot="6812">
+  </amp-ad>
+
+  <h2>Kuadio</h2>
+  <amp-embed type="kuadio" width="300" height="660" layout="responsive"
+    heights="(min-width:1024px) 23%, (min-width:760px) 27%, (min-width:480px) 72%, 220%" data-region="tpe"
+    data-widget-id="78a32765-30f1-4ac1-a3e7-b42ebc6df88a">
+  </amp-embed>
+
+  <h2>Lentainform</h2>
+  <amp-ad width="600" height="320" type="lentainform" data-publisher="test.exhange.noidpartners.com"
+    data-widget="689383" data-container="M246626ScriptRootC689383">
+  </amp-ad>
+
+  <h2>Ligatus</h2>
+  <amp-ad width="300" height="250" type="ligatus" src="https://a-ssl.ligatus.com/?ids=88443&t=js&s=1&bc=2">
+  </amp-ad>
+
+  <h2>LockerDome</h2>
+  <amp-ad width="300" height="250" type="lockerdome" data-slot="10238273616545382">
+  </amp-ad>
+
+  <h2>logly</h2>
+  <amp-ad width="320" height="270" layout="fixed" type="logly" data-adspotid="4287967">
+  </amp-ad>
+
+  <h2>LOKA</h2>
+  <amp-ad width="300" height="250" type="loka" data-unit-params='{"unit":"mvbanner","id":"YdzhBxTvKwZlLeeQ"}'>
+  </amp-ad>
+
+  <h2>LuckyAds</h2>
+  <amp-ad width="310" height="340" type="luckyads" data-la-block="0b8b3a05-1061-4362-aefd-019fec9c2e0b"
+    src="https://gueobo.com/nhi7l1291/vli0pm3y0hq8768/vqu786pykrin.php">
+  </amp-ad>
+
+  <h2>Macaw</h2>
+  <amp-ad width="300" height="250" type="macaw" data-block-id="1023831">
+  </amp-ad>
+
+  <h2>MADS</h2>
+  <amp-ad width="320" height="50" type="mads" data-adrequest='{"pid":"6252122059"}'>
+  </amp-ad>
+
+  <h2>MANTIS</h2>
+  <amp-ad width="300" height="250" type="mantis-display" data-property="demo" data-zone="medium-rectangle">
+  </amp-ad>
+
+  <amp-embed width="100" height="283" type="mantis-recommend" layout=responsive
+    heights="(min-width:1907px) 56%, (min-width:1100px) 64%, (min-width:780px) 75%, (min-width:480px) 105%, 200%"
+    data-property="demo">
+  </amp-embed>
+
+  <h2>Mediaad.org</h2>
+  <amp-ad width="300" height="250" type="mediaad" data-publisher="mediaad.org" data-medtag="mediaad-kryZ">
+  </amp-ad>
+
+  <h2>Marfeel</h2>
+  <amp-ad width="300" height="250" type="marfeel" data-tenant="demo.marfeel.com">
+  </amp-ad>
+
+  <h2>Media.Net Header Bidder Tag</h2>
+  <amp-ad width="300" height="250" type="medianet" data-tagtype="headerbidder" data-cid="8CU852274"
+    data-slot="/45361917/AMP_Header_Bidder" json='{"targeting":{"mnetAmpTest":"1","pos":"mnetSlot1"}}'>
+  </amp-ad>
+
+  <h2>Media.Net Contextual Monetization Tag</h2>
+  <amp-ad width="300" height="250" type="medianet" data-tagtype="cm" data-cid="8CUS8O7EX" data-crid="112682482">
+  </amp-ad>
+
+  <h2>Mediavine</h2>
+  <amp-ad width="300" height="250" type="mediavine" data-site="amp-project">
+    <div placeholder></div>
+    <div fallback></div>
+  </amp-ad>
+
+  <h2>Medyanet</h2>
+  <amp-ad width="300" height="250" type="medyanet" data-slot="medyanet/9927946/posta/anasayfa/300x250"
+    data-domain="posta.com.tr">
+  </amp-ad>
+
+  <h2>Meg</h2>
+  <amp-ad width="320" height="250" type="meg" data-code="6rc0ERhN75">
+  </amp-ad>
+
+  <h2>Mgid</h2>
+  <amp-ad width="600" height="320" type="mgid" data-publisher="barada.com" data-widget="353317"
+    data-container="M207275ScriptRootC353317">
+  </amp-ad>
+
+  <h2>MicroAd 320x50 banner</h2>
+  <amp-ad width="320" height="50" type="microad" data-spot="b4bf837c5ddd69758d5ac924d04cf502"
+    data-url="${COMPASS_EXT_URL}" data-referrer="${COMPASS_EXT_REF}" data-ifa="${COMPASS_EXT_IFA}"
+    data-appid="${COMPASS_EXT_APPID}" data-geo="${COMPASS_EXT_GEO}">
+  </amp-ad>
+
+  <h2>MixiMedia</h2>
+  <amp-embed height="284" type="miximedia" data-blockid="91908">
+  </amp-embed>
+
+  <h2>Mixpo</h2>
+  <amp-ad width="300" height="250" type="mixpo" data-guid="b0caf856-fd92-4adb-aaec-e91948c9ffc8" data-subdomain="www">
+  </amp-ad>
+
+  <h2>Monetizer101</h2>
+  <amp-ad width="auto" height="176" layout="fixed-height" type="monetizer101" data-widget="price-comparison"
+    data-config='{"shopId": 1, "priceMin": 500, "nameKeywords": "iphone"}'>
+  </amp-ad>
+
+  <h2>mox</h2>
+  <amp-ad height="1" type="mox" data-z="1183" data-w="720" data-h="405">
+  </amp-ad>
+
+  <h2>My6sense</h2>
+  <amp-ad width="300" height="250" type="my6sense" data-widget-key="cAcl2Tvn4dH2pPBx52Q7SR" data-zone="[ZONE]"
+    data-url="[PAGE_URL]" data-organic-clicks="[ORGANIC_TRACKING_PIXEL]" data-paid-clicks="[PAID_TRACKING_PIXEL]">
+  </amp-ad>
+
+  <h2>MyFinance</h2>
+  <amp-ad width="320" height="300" type="myfinance" data-ad-type="widget"
+    data-widget="5ccdc10a-e2ee-40ee-8495-0b08eee2e6b2" data-test="true">
+  </amp-ad>
+
+  <amp-ad width="320" height="300" type="myfinance" data-ad-type="cru" data-campaign="amp-test" data-test="true">
+  </amp-ad>
+
+  <h2>MyOffrz</h2>
+  <amp-ad width="300" height="200" type="myoffrz" data-script="https://cdn.myoffrz.io/amp/sample/script.js"
+    data-config='{"channel": "sample", "count": 0}'>
+    <div placeholder>Loading ...</div>
+    <div fallback>No ad for you</div>
+  </amp-ad>
+
+  <amp-ad width="300" height="200" type="myoffrz" data-script="https://cdn.myoffrz.io/amp/sample/script.js"
+    data-config='{"channel": "sample", "count": 1}'>
+    <div placeholder>Loading ...</div>
+    <div fallback>No ad for you</div>
+  </amp-ad>
+
+  <amp-ad width="300" height="415" type="myoffrz" data-script="https://cdn.myoffrz.io/amp/sample/script.js"
+    data-config='{"channel": "sample", "count": 2}'>
+    <div placeholder>Loading ...</div>
+    <div fallback>No ad for you</div>
+  </amp-ad>
+
+  <h2>myTarget</h2>
+  <amp-ad width="300" height="250" type="mytarget" data-ad-slot="197378">
+  </amp-ad>
+
+  <h2>myWidget</h2>
+  <amp-embed width="300" height="250" type="mywidget" data-cid="ed1538fc077cfeae6ea558f6e7404541">
+  </amp-embed>
+
+  <h2>Nativeroll</h2>
+  <amp-ad width="480" height="340" layout="responsive" type="nativeroll" data-gid="5d10df709762b6b31b8b461e">
+  </amp-ad>
+
+  <h2>Nativery</h2>
+  <amp-ad width="480" height="340" layout="responsive" type="nativery" data-wid="5daf5a1dacf7e85862ae241a">
+  </amp-ad>
+
+  <h2>Nativo</h2>
+  <amp-ad width="350" height="150" type="nativo" layout="responsive" data-premium
+    data-request-url="http://localhost:9876">
+  </amp-ad>
+
+  <h2>Navegg</h2>
+  <div>It is common to see a no-fill ad in this example.</div>
+  <amp-ad width=320 height=50 type="navegg" data-acc="10" data-slot="/4119129/mobile_ad_banner"
+    json='{"targeting":{"sport":["rugby","cricket"]}}'>
+  </amp-ad>
+
+  <h2>Nend</h2>
+  <amp-ad width="320" height="50" type="nend"
+    data-nend_params='{"media":82,"site":58536,"spot":127513,"type":1,"oriented":1}'>
+  </amp-ad>
+
+  <h2>NETLETIX</h2>
+  <amp-ad width='300' height='250' type='netletix' data-nxkey='b5f0c5d4-c2b8-4989-a7b9-130ad4417102'
+    data-nxunit='/60343726/netzathleten_.de' data-nxwidth='300' data-nxheight='250'>
+  </amp-ad>
+
+  <h2>Noddus</h2>
+  <amp-ad width="300" height="300"
+    data-token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwbGFjZW1lbnRfaWQiOjY2MX0.OdD2QrgxMoI7MM09QBFCtbjMnUGuumiqBHb-FJF4UBs"
+    type="noddus">
+  </amp-ad>
+
+  <h2>Nokta</h2>
+  <amp-ad width="300" height="250" type="nokta" data-category="izlesene_anasayfa" data-site="izlesene:anasayfa"
+    data-zone="152541">
+  </amp-ad>
+
+  <h2>Newsroom AI</h2>
+  <amp-ad width="320" height="50" type="nws" src="https://tags.nws.ai/113106/">
+  </amp-ad>
+
+  <h2>Oblivki 300x250 banner</h2>
+  <amp-ad width="300" height="250" type="oblivki" data-block-key="XgSNxZnGpAmULblp9d23">
+  </amp-ad>
+
+  <h2>OneAD</h2>
+  <amp-ad width="300" height="250" type="onead" layout="responsive" data-playmode="amp-inread" data-uid="1000033"
+    data-pid="48163" data-host="demo">
+  </amp-ad>
+
+  <h2>OnNetwork</h2>
+  <amp-ad width="300" height="250" type="onnetwork" data-sid="TTQsSHFzLDA=">
+  </amp-ad>
+
+  <h2>Open AdStream single ad</h2>
+  <amp-ad width="300" height="250" type="openadstream" data-adhost="oasc-training7.247realmedia.com"
+    data-sitepage="dx_tag_pvt_site" data-pos="x04" data-query="keyword=keyvalue&key2=value2">
+  </amp-ad>
+
+  <h2>OpenX</h2>
+  <amp-ad width="728" height="90" type="openx" data-auid="538289845" data-host="sademo-d.openx.net"
+    data-nc="90577858-BidderTest">
+  </amp-ad>
+  <div>
+    <a href="openx.amp.html">See all OpenX examples</a>
+  </div>
+
+  <h2>Opinary</h2>
+  <amp-embed width="500" height="500" type="opinary" layout="intrinsic" data-client="test-success">
+  </amp-embed>
+
+  <h2>Outbrain widget</h2>
+  <amp-embed width="100" height="100" type="outbrain" layout="responsive" data-widgetIds="SB_14,SB_13"
+    data-htmlURL="http%3A%2F%2Fedition.cnn.com%2F2015%2F11%2F08%2Fmiddleeast%2Frussian-plane-crash-egypt-sinai%2Findex.html"
+    data-referrer="http%3A%2F%2Fedition.cnn.com" data-ampURL="http%3A%2F%2Famp.cnn.com%2Fpage.html"
+    data-styleFile="http://localhost/style.css" data-testMode="true">
+  </amp-embed>
+
+  <h2>Pixels Examples</h2>
+  <amp-ad width="300" height="250" type="pixels" data-origin="af" data-sid="2847717911664" data-tag="sync"
+    data-click-tracker="false" data-viewability="true">
+  </amp-ad>
+
+  <h2>PlayStream</h2>
+  <amp-ad width="375" height="0" id="playstream_ads" type="playstream" data-id="7bdc7e13-b667-4fd2-91a4-37595069f08c"
+    data-fluid="true" layout="responsive">
+  </amp-ad>
+
+  <h2>Plista responsive widget</h2>
+  <amp-embed width="300" height="300" type="plista" layout=responsive data-countrycode="de"
+    data-publickey="e6a75b42216ffc96b7ea7ad0c94d64946aedaac4" data-widgetname="iAMP_2" data-geo="de"
+    data-urlprefix="" data-categories="politik">
+  </amp-embed>
+
+  <h2>polymorphicAds</h2>
+  <amp-ad width=320 height=50 type="polymorphicads" data-adunit="7c0b3ae742beccf94f7726ea832277a2"
+    data-params='{"testMode": "true"}'>
+  </amp-ad>
+
+  <h2>popIn native ad</h2>
+  <amp-ad width="300" height="568" type="popin" layout=responsive
+    heights="(min-width:1907px) 39%, (min-width:1200px) 46%, (min-width:780px) 64%, (min-width:480px) 98%, (min-width:460px) 167%, 196%"
+    data-mediaid="popin_amp">
+  </amp-ad>
+
+  <h2>Postquare widget</h2>
+  <amp-embed width="200" height="200" type="postquare" layout="responsive" data-widgetIds="112264"
+    data-websiteId="115219" data-publisherId="157552">
+  </amp-embed>
+
+  <h2>PPStudio creative</h2>
+  <amp-embed width="300" height="250" type="ppstudio" data-crid="16013"
+    data-holder-script="https://tenmaxsgads.blob.core.windows.net/holder/16013_f9742d8d6d22.js">
+  </amp-embed>
+
+  <h2>Pressboard</h2>
+  <amp-ad height="400" type="pressboard" layout="fixed-height" data-media="5">
+  </amp-ad>
+
+  <h2>PromoteIQ</h2>
+  <amp-ad width="250" height="250" type="promoteiq" data-src="http://cdn.tagdelivery.com/request/client/standard.js"
+    data-params='{"slot": 1160, "targets": { "category": ["6222", "16158", "274", "17912"]}, "count": 1}'
+    data-sfcallback="if (!Array.isArray(response)) { response = [response]; }; for (i = 0; i < response.length; i++) { const prod = response[i]; let outerCtr = document.createElement('div'); let img = document.createElement('img'); img.src = prod['product']['imageLarge']; img.style = 'height:250px; width:250px'; outerCtr.appendChild(img); document.body.appendChild(outerCtr); }">
+  </amp-ad>
+
+  <h2>PubExchange</h2>
+  <amp-embed width="640" height="320" heights="(max-width:480px) 400%, (max-width:650px) 100%, 75%"
+    layout="responsive" type="pubexchange" data-publication="test_publication" data-module-id="below_content"
+    data-module-num="2626" data-test="true">
+  </amp-embed>
+
+  <h2>PubGuru</h2>
+  <amp-ad width=300 height=250 type="pubguru" data-publisher="your-publisher-name"
+    data-slot="/23081961/monetizemore.com_test_300x250">
+  </amp-ad>
+
+  <h2>Pubmine 300x250</h2>
+  <amp-ad width="300" height="265" type="pubmine" data-section="1" data-siteid="37790885">
+  </amp-ad>
+
+  <amp-ad width="300" height="265" type="pubmine" data-section="2" data-siteid="37790885">
+  </amp-ad>
+
+  <h2>Pulse Horizontal</h2>
+  <amp-embed width="300" height="300" type="pulse" data-sid="artners_widget_example_horizontalamp">
+  </amp-embed>
+
+  <h2>Pulse Vertical</h2>
+  <amp-embed width="300" height="850" type="pulse" data-sid="partners_widget_example_verticalamp">
+  </amp-embed>
+
+  <h2 class="broken">PulsePoint Header Bidding 300x250</h2>
+  <amp-ad width="300" height="250" type="pulsepoint" data-pid="521732" data-tagid="76835" data-tagtype="hb"
+    data-timeout="1000" data-slot="/1066621/ExchangeTech_Prebid_AdUnit">
+  </amp-ad>
+
+  <h2>PulsePoint 300x250</h2>
+  <amp-ad width="300" height="250" type="pulsepoint" data-pid="512379" data-tagid="472988">
+  </amp-ad>
+
+  <h2>Puffnetwork 300x250</h2>
+  <amp-ad width="300" height="250" type="puffnetwork" data-chid="233">
+  </amp-ad>
+
+  <h2>Purch 300x250</h2>
+  <amp-ad width="300" height="250" type="purch" data-pid="2882" data-divid="rightcol_top">
+  </amp-ad>
+
+  <h2>Quora</h2>
+  <amp-ad width="450" height="220" type="quoraad" data-adid="fake">
+  </amp-ad>
+
+  <h2>Rakuten Unified Ads</h2>
+  <amp-ad width="300" height="250" type="rakutenunifiedads" data-env="dev" data-id="63">
+  </amp-ad>
+
+  <h2>Rambler&Co</h2>
+  <amp-ad width="500" height="250" type="capirs" layout="responsive" data-begun-auto-pad="434906118"
+    data-begun-block-id="434908944" data-custom-css="div[id^=begun_block] iframe{margin:0 auto;}"
+    json='{"params":{"p1":"bvpkq","p2":"y","pct":"a"}}'>
+  </amp-ad>
+
+  <h2>Rambler&Co RNetPlus</h2>
+  <amp-ad width="300" height="400" type="rnetplus" layout="responsive"
+    src="https://api.rnet.plus/Scripts/rnet_amp_embed.js?blockId=660">
+  </amp-ad>
+
+  <h2>RbInfox</h2>
+  <amp-embed width="240" height="400" type="rbinfox" src="https://rb.infox.sg/infox/503">
+  </amp-embed>
+
+  <h2>RcmWidget</h2>
+  <amp-embed
+    width="auto"
+    height="500"
+    type="rcmwidget"
+  >
+  </amp-embed>
+
+  <h2>ReadMo</h2>
+  <amp-embed width="400" height="400" type="readmo" layout="responsive"
+    heights="(min-width: 1200px) 50%, (min-width: 780px) 60%, (max-width: 480px) 180%, 100%" data-section="amp-test"
+    data-url="https://yourdomain.com/" data-sponsored-by-label="" data-module="end-of-article">
+  </amp-embed>
+
+  <h2>Realclick</h2>
+  <amp-ad width="300" height="250" type="realclick" data-mcode="d290anI3MTEyMDAwMDFfMTU3Ng==">
+  </amp-ad>
+
+  <h2>recomAD</h2>
+  <amp-ad width="320" height="145" type="recomad" data-app-id="53811c33" data-widget-id="275"
+    data-search-term="sneaker" data-puid="amp-ad-recomad-example-page">
+  </amp-ad>
+
+  <h2>Recreativ fixed height</h2>
+  <amp-embed height="240" type="recreativ" layout="fixed-height" data-bn="vesx25SZIB">
+  </amp-embed>
+
+  <h2>Recreativ fixed</h2>
+  <amp-ad width="300" height="250" type="recreativ" data-bn="TBnVruGGjp">
+  </amp-ad>
+
+  <h2>Relap</h2>
+  <amp-ad width="auto" height="750" type="relap" layout="fixed-height" data-token="D3UMgQWBqleq1tPW"
+    data-url="http://bigpicture.ru" data-anchorid="i0xMMY1MoliiZWVl">
+  </amp-ad>
+
+  <h2>RelapPro</h2>
+  <amp-ad width="300" height="250" type="relappro" data-slot-id="b1928542-4217-486f-b42c-79f0f3290b39">
+  </amp-ad>
+
+  <h2>Remixd</h2>
+  <amp-ad width="375" height="120" type="remixd" layout="responsive" data-version="5"
+    data-url="https://www.remixd.com/player/test/amp/index.html">
+  </amp-ad>
+
+  <h2>Revcontent Responsive Tag</h2>
+  <amp-ad width="320" height="240" type="revcontent" layout="responsive" heights="(max-width: 320px) 933px,
+    (max-width: 360px) 1087px,
+    (max-width: 375px) 1138px,
+    (max-width: 412px) 1189px,
+    (max-width: 414px) 1072px,
+    (max-width: 568px) 1151px,
+    (max-width: 640px) 1128px,
+    (max-width: 667px) 1151px,
+    (max-width: 732px) 1211px,
+    (max-width: 736px) 1151px,
+    (max-width: 768px) 633px,
+    (max-width: 1024px) 711px,
+    86vw" data-wrapper="rcjsload_2ff711" data-id="203">
+  </amp-ad>
+
+  <h2>RevJet Tag</h2>
+  <amp-ad width="300" height="250" type="revjet" data-tag="tag3777" data-key="705"
+    data-opts='{"delivery_method": "banner"}'>
+  </amp-ad>
+
+  <h2>Red for Publishers</h2>
+  <amp-ad width="320" height="150" type="rfp" data-adspot-id="ODExOjM2NjQ">
+  </amp-ad>
+
+  <h2>Rubicon Project Smart Tag</h2>
+  <amp-ad width="320" height="50" type="rubicon" data-method="smartTag" data-account="14062" data-site="70608"
+    data-zone="335918" data-size="43" data-kw="amp-test, test"
+    json='{"visitor":{"age":"18-24","gender":"male"},"inventory":{"section":"amp"}}'>
+  </amp-ad>
+
+  <h2>RUNative</h2>
+  <amp-embed width="640" height="320" heights="(max-width:480px) 400%, (max-width:650px) 100%, 65%"
+    layout="responsive" type="runative" data-spot="ac8c2f9a835f4147a81bfd4a48601f2b" data-ad-type="label-over"
+    data-cols="3" data-rows="2" data-title="From the Web">
+  </amp-embed>
+
+  <h2>SAS CI 360 Match</h2>
+  <amp-ad width="468" height="60" type="sas" layout="fixed" data-customer-name="canary" data-size="468x60"
+    data-area="amp_ad_area" data-site="amp_ad_site" data-tags='{"CAT":"SYLVESTER","POSITION":"top"}'>
+  </amp-ad>
+
+  <amp-ad width="336" height="280" type="sas" layout="fixed" data-customer-name="canary" data-size="336x280"
+    data-area="amp_ad_area" data-site="amp_ad_site" data-multi-size='300x250'
+    data-tags='{"CAT":"SYLVESTER","POSITION":"middle"}'>
+  </amp-ad>
+
+  <amp-ad width="336" height="280" type="sas" layout="fixed" data-customer-name="canary" data-area="amp_ad_area"
+    data-site="amp_ad_site" data-tags='{"CAT":"SYLVESTER","POSITION":"bottom"}' data-multi-size='300x250'>
+  </amp-ad>
+
+  <h2>Seeding Alliance</h2>
+  <amp-ad height="250" type="seedingalliance" data-url="https://mockup.seeding-alliance.de">
+  </amp-ad>
+
+  <h2>Sekindo</h2>
+  <amp-ad width="300" height="250" type="sekindo" data-spaceId="14071">
+  </amp-ad>
+
+  <h2>Sharethrough</h2>
+  <amp-ad width="300" height="150" type="sharethrough" layout="responsive" data-pkey="c0fa8367">
+  </amp-ad>
+
+  <h2>SHE Media</h2>
+  <amp-ad width="300" height="250" type="shemedia" data-slot-type="medrec" data-boomerang-path="/amp-example/26403"
+    json='{"boomerangConfig": {"vertical": "parenting", "targeting":{"abc":["xyz"]}}'>
+    <div placeholder></div>
+    <div fallback></div>
+  </amp-ad>
+
+  <h2>Sklik</h2>
+  <amp-ad width="970" height="310" type="sklik" json='{"zoneId":0, "w": 970, "h": 310}'>
+  </amp-ad>
+
+  <h2>SlimCut Media</h2>
+  <amp-ad width="400" height="225" type="slimcutmedia" data-pid="amp-3" data-ffc="SCMPROMO">
+  </amp-ad>
+
+  <h2>SmartAdServer ad</h2>
+  <amp-ad width="320" height="50" type="smartadserver" data-site="94612" data-page="629154" data-format="38952"
+    data-target="foo=bar">
+  </amp-ad>
+
+  <h2>smartclip</h2>
+  <amp-ad width="400" height="225" type="smartclip" data-plc="84555" data-sz="400x320">
+  </amp-ad>
+
+  <h2>SMI2</h2>
+  <amp-embed height="284" type="smi2" data-blockid="90223">
+  </amp-embed>
+
+  <h2>SmileWanted ad</h2>
+  <amp-ad width="300" height="250" type="smilewanted" data-zone="1">
+  </amp-ad>
+
+  <h2>sogou ad</h2>
+  <amp-ad width="20" height="3" type="sogouad" layout="responsive" data-slot="854370" data-w="20" data-h="3">
+  </amp-ad>
+
+  <amp-ad height="69" type="sogouad" layout="fixed-height" data-slot="854366" data-w="100%" data-h="69">
+  </amp-ad>
+
+  <h2>Sortable ad</h2>
+  <amp-ad width="300" height="250" type="sortable" data-name="medrec" data-site="ampproject.org">
+  </amp-ad>
+
+
+  <h2>Sona ad</h2>
+  <amp-ad width="468" height="60" type="sona"
+    data-config='{"clientId": "9cde753a-c032-11ea-9612-d2bed09f329e", "options": {}}'>
+  </amp-ad>
+
+
+  <h2>SOVRN</h2>
+  <amp-ad width="300" height="250" type="sovrn" data-width="300" data-height="600" data-u="sduggan"
+    data-iid="informerIDgoeshere" data-aid="affiliateIDgoeshere" data-testFlag="true" data-z="393900">
+    <!-- this ID is only allowed on localhost:8000 -->
+  </amp-ad>
+
+  <h2>Speakol</h2>
+  <amp-ad width="320" height="800" type="speakol" layout="responsive" data-widgetid="1825">
+  </amp-ad>
+
+  <h2>SpotX</h2>
+  <amp-ad width="300" height="250" type="spotx" data-spotx_channel_id="85394" data-spotx_autoplay="1">
+  </amp-ad>
+
+  <h2>Spring Ads</h2>
+  <amp-ad height="fluid" type="springAds" data-adssetup='{
+      "view": "amp",
+      "partners": true,
+      "adPlacements": ["banner","mrec"],
+      "adSlotSizes": {
+      "banner": [{
+        "minWidth": 1,
+        "sizes": [[320, 50]]
+      }],
+      "mrec": [{
+        "minWidth": 1,
+        "sizes": [[300, 250], [300, 300], [250, 250], [320, 160], [300, 150], [320, 50], [320, 75], [320, 80], [320, 100], [300, 100], [300, 50], [300, 75]]
+      }]
+      },
+      "pageName": "demo_story",
+      "publisher": "adtechnology.axelspringer.com",
+      "target": "demopage=ampdemo;"
+    }'>
+  </amp-ad>
+  <amp-ad width="320" height="50" type="springAds" data-adslot="banner"></amp-ad>
+  <amp-ad width="100vw" height="fluid" type="springAds" data-adslot="mrec"></amp-ad>
+
+  <h2>SSP</h2>
+  <amp-ad width="480" height="300" type="ssp"
+    data-position='{ "id": "cnt-1", "width": "480", "height": "300", "zoneId": "1234" }'>
+  </amp-ad>
+  <amp-ad width="480" height="300" type="ssp"
+    data-position='{ "id": "cnt-2", "width": "480", "height": "300", "zoneId": "1234" }'>
+  </amp-ad>
+
+  <h2>Strossle</h2>
+  <amp-embed height="580" type="strossle" data-widgetid="widget-5b583cae934ad">
+  </amp-embed>
+
+  <h2>Sulvo</h2>
+  <amp-ad width=300 height=250 type="sulvo" data-ad="example.com_display" class="demand-supply">
+  </amp-ad>
+
+  <h2>SunMedia</h2>
+  <amp-ad width="300" height="1" type="sunmedia" layout="responsive" data-cskp="1" data-cid="sunmedia_test"
+    data-crst="1">
+  </amp-ad>
+
+  <h2>SVK Native widget</h2>
+  <amp-embed width="100" height="100" type="svknative" layout="responsive" data-widgetid="2">
+  </amp-embed>
+
+  <h2>Swoop</h2>
+  <amp-ad width=250 height=35 type="swoop" data-layout="auto" data-publisher="SW-11122234-1AMP"
+    data-placement="page/inline" data-slot="amp/test">
+  </amp-ad>
+
+  <h2>Taboola responsive widget</h2>
+  <amp-embed width="100" height="283" type="taboola" layout="responsive"
+    heights="(min-width:1907px) 39%, (min-width:1200px) 46%, (min-width:780px) 64%, (min-width:480px) 98%, (min-width:460px) 167%, 196%"
+    data-publisher="amp-demo" data-mode="thumbnails-a" data-placement="Ads Example" data-article="auto">
+  </amp-embed>
+
+  <h2>TcsEmotion AMP tag</h2>
+  <amp-ad width="100" height="150" type="tcsemotion" data-hb="false" data-zone="1"
+    data-delhost="https://hb.tcsemotion.com/www/delivery/amphb.php">
+  </amp-ad>
+
+  <h2>Teads</h2>
+  <amp-ad width="300" height="220" type="teads" data-pid="42266" layout="responsive">
+  </amp-ad>
+
+  <h2>TE Medya</h2>
+  <amp-embed width="320" height="320" type="temedya" layout="responsive" data-widgetId="vidyome">
+  </amp-embed>
+
+  <h2>Torimochi</h2>
+  <amp-ad width="500" height="800" type="torimochi" layout="responsive" data-adtype="widget" data-area="widget"
+    data-wid="torimochi-amp-widget" data-extra='{"tflag": 3}'
+    heights="(min-width:1907px) 39%, (min-width:1200px) 46%, (min-width:780px) 64%, (min-width:480px) 98%, (min-width:460px) 167%, 196%">
+  </amp-ad>
+
+  <h2>Tracdelight</h2>
+  <amp-ad height="300" width="640" type="tracdelight" data-mode="inline" data-widget_id="yqrmkcpv89h7gbds"
+    data-access_key="165a54e8462bacfb08ada26ebf11990c">
+  </amp-ad>
+
+  <h2>TripleLift</h2>
+  <amp-ad width="297" height="410" type="triplelift" layout="responsive"
+    src="https://ib.3lift.com/dtj/amptest_main_feed/335430">
+  </amp-ad>
+
+  <h2>Trugaze</h2>
+  <amp-ad width="300" height="250" type="trugaze" data-public-id="4WMPI6PV" data-slot="/134642692/amp-samples"
+    data-multi-size="320x50" json='{"targeting":{"target":["sample"],"pos":["amp"]}}'>
+  </amp-ad>
+
+  <h2>UAS</h2>
+  <amp-ad width=300 height=250 type="uas"
+    json='{"accId": "132109", "adUnit": "10002912", "sizes": [[300, 250]], "targetings": {"country": ["India", "USA"], "car": "Civic"}, "locLat": "12.24", "locLon": "24.13", "locSrc": "wifi", "pageURL": "mydomain.com"}'>
+  </amp-ad>
+
+  <h2>Unruly</h2>
+  <amp-ad width="620" height="349" type="unruly" layout="responsive" data-site-id="amp-test">
+  </amp-ad>
+
+  <h2>ucfunnel</h2>
+  <amp-ad width="300" height="250" type="ucfunnel" data-site-id="test-ad-83444226E44368D1E32E49EEBE6D29"
+    data-schain="1.0,0!exchange2.com,abcd,1,,,">
+  </amp-ad>
+  <h2>UZOU</h2>
+  <amp-ad width="120" height="1630" type="uzou" data-widget-params='{"placementCode":"amp-sample","mode":"test"}'>
+  </amp-ad>
+
+  <h2>Weborama</h2>
+  <amp-ad width="300" height="250" type="weborama-display" data-wbo_account_id=51 data-wbo_tracking_element_id=137
+    data-wbo_fullhost="certification.solution.weborama.fr" data-wbo_random="[RANDOM]"
+    data-wbo_publisherclick="[PUBLISHER_TRACKING_URL]">
+  </amp-ad>
+
+  <h2>Widespace Panorama Ad</h2>
+  <amp-ad width="300" height="50" type="widespace" data-sid="93f1a996-52f5-46b4-8dc8-ccd8886a8fbf"
+    layout="responsive">
+  </amp-ad>
+
+  <h2>Widespace Takeover Ad</h2>
+  <amp-ad width="300" height="300" type="widespace" data-sid="fc5a6f59-d45e-4cf1-acac-67bf5ab4862a"
+    layout="responsive">
+  </amp-ad>
+
+  <h2>Wisteria Ad</h2>
+  <amp-ad width="300" height="1170" type="wisteria" layout=responsive data-site-id="2" data-template-number="6">
+  </amp-ad>
+
+  <h2>Xlift native ad</h2>
+  <amp-ad width="300" height="300" type="xlift" data-mediaid="mamastar">
+  </amp-ad>
+
+  <h2>Yahoo Display</h2>
+  <amp-ad width="316" height="264" type="yahoo" data-sid="954014446" data-site="news"
+    data-sa='{"LREC":"300x250","secure":"true","content":"no_expandable;"}'>
+  </amp-ad>
+
+  <h2>Yahoo Native-Display Ads Federation</h2>
+  <amp-embed width="320" height="320" type="yahoofedads" layout="responsive" data-site="finance" data-region="US"
+    data-lang="en-US" data-ad-unit="pencil"
+    data-sa="{&quot;LREC&quot;:&quot;300x250&quot;,&quot;secure&quot;:&quot;true&quot;,&quot;content&quot;:&quot;no_expandable;&quot;,&quot;isSupplySegment&quot;:&quot;false&quot;,&quot;lang&quot;:&quot;en-US&quot;,&quot;region&quot;:&quot;US&quot;,&quot;site_attribute&quot;:&quot;wiki_topics=\&quot;Anthony_Joshua;Tyson_Fury;Eddie_Hearn;Deontay_Wilder;Kubrat_Pulev;Tottenham_Hotspur_Stadium;Dillian_Whyte\&quot; ctopid=\&quot;2074500;2078500;2083000;2212000;13311000\&quot; hashtag=\&quot;2074500;2078500;2083000;2212000;13311000\&quot; rs=\&quot;lmsid:a0ad000000AxDnbAAF;revsp:omnisport.uk;lpstaid:71ee6f14-9c73-3688-b4a9-32e6578057d0;pct:story\&quot;&quot;}"
+    data-url="https://finance.yahoo.com">
+  </amp-embed>
+
+  <h2>Yahoo Native Ads</h2>
+  <amp-embed width="320" height="320" type="yahoonativeads" data-api-key="P55VS9SY2WQXH7TTF5ZW"
+    data-code="833b5525-edb7-47c0-88be-1152bcae7870" data-url="https://techcrunch.com">
+  </amp-embed>
+
+  <h2>YahooJP YDN</h2>
+  <amp-ad width="300" height="250" type="yahoojp" data-yadsid="79712_113431">
+  </amp-ad>
+
+  <h2 id="yandex">Yandex</h2>
+  <amp-ad width="240" height="400" type="yandex" data-block-id="R-I-106712-3">
+  </amp-ad>
+
+  <h2 id="yektanet-native">Yektanet Native Ads</h2>
+  <amp-ad width="400" height="400" type="yektanet" data-publisher-name="yektanet.com"
+    data-script-name="yektanet-article.js" data-pos-id="pos-article-display-1">
+  </amp-ad>
+
+  <h2 id="yektanet-banner">Yektanet Banners</h2>
+  <amp-ad width="300" height="250" type="yektanet" data-ad-type="banner" data-publisher-name="yektanet-bnr"
+    data-script-name="uid.js" data-pos-id="ynpos-1">
+  </amp-ad>
+
+  <h2>Yengo</h2>
+  <amp-ad width="300" height="250" type="yengo" data-block-id="152431">
+  </amp-ad>
+
+  <h2>Yieldbot</h2>
+  <amp-ad width="300" height="250" type="doubleclick" rtc-config='{
+    "vendors": {
+      "yieldbot": {
+      "YB_PSN": "1234",
+      "YB_SLOT": "medrec"
+      }
+    }
+    }'
+    data-slot="/2476204/medium-rectangle"
+    data-multi-size="300x220,300x200"
+    json='{"targeting":{"category":["food","lifestyle"]},"categoryExclusions":["health"]}'>
+  </amp-ad>
+
+  <h2>YIELD ONE</h2>
+  <amp-ad width="320" height="50"
+    type="yieldone"
+    data-pubid="0001"
+    data-pid="032478_4">
+  </amp-ad>
+
+  <h2>Yieldmo</h2>
+  <amp-ad width=300 height=250
+    type="yieldmo"
+    data-ymid="1465861990777519642">
+  </amp-ad>
+
+  <h2>Yieldpro</h2>
+  <amp-ad width="300" height="250"
+    type="yieldpro"
+    data-pubnetwork="12c6fc06"
+    data-section-id="1299"
+    data-slot="960">
+  </amp-ad>
+
+  <h2>ValueCommerce</h2>
+  <amp-ad width="300" height="250"
+    type="valuecommerce"
+    data-sid="3008"
+    data-pid="884466614">
+  </amp-ad>
+
+  <h2>VDO.AI</h2>
+  <amp-ad width="375"
+    height="0"
+    id="_vdo_ads_player_ai_"
+    type="vdoai"
+    data-unitid="_vdo_ads_player_ai_"
+    data-tagname="publisher"
+    layout="responsive"
+    >
+  </amp-ad>
+
+  <h2>VerizonMedia</h2>
+  <amp-ad
+  type="verizonmedia"
+  data-config='{"adServer":{"1AS":{"region":"US"}},"positions":{"FB":{"alias":"93426461","sizes":["320x50"]}}}'
+  data-stylesheet="https://scdn.uc.atwola.com/ads/adsWrapper010121/styles.css"
+  width="320"
+  height="50"
+  >
+  </amp-ad>
+
+  <h2>Video intelligence</h2>
+  <amp-ad width="500" height="400"
+      type="videointelligence"
+      layout="responsive"
+      data-publisher-id="test_publisher"
+      data-channel-id="59674276073ef41e33501409">
+  </amp-ad>
+
+  <h2>Videonow</h2>
+  <amp-ad width="300" height="200"
+      type="videonow"
+      data-pid="55555"
+      layout="responsive">
+  </amp-ad>
+
+  <h2>Viralize</h2>
+  <amp-ad width="300" height="169"
+    type="viralize"
+    layout="responsive"
+    data-zid="AACX6WjIMkl-yoGV"
+    data-extra='{"lid":"22486","cid":"22572","preview":"1","f":"gallery"}'>
+  </amp-ad>
+
+  <h2>vlyby</h2>
+  <amp-embed width="300" height="250"
+    type="vlyby"
+    layout="responsive"
+    heights="250px"
+    data-publisherid="f363eb2b75459b34592cc4"
+    data-placementid="default"
+    data-pubref="test.amp.com">
+  </amp-embed>
+
+  <h2>VMFive</h2>
+  <amp-ad width="300" height="169"
+  type="vmfive"
+  data-app-key="580db14a4a801a2674a56f81"
+  data-placement-id="demo-placement-id"
+  data-ad-type="video-native">
+  </amp-ad>
+
+  <h2>Webediads</h2>
+  <div>It's a private ad network with strict ad targeting, hence very common to see a no-fill.</div>
+  <amp-ad width="300" height="250"
+    type="webediads"
+    data-site="site_test"
+    data-page="amp"
+    data-position="middle"
+    data-query="amptest=1">
+  </amp-ad>
+
+  <h2>Whopa InFeed</h2>
+  <amp-embed width="100" height="300"
+  type="whopainfeed"
+  layout="responsive"
+  heights="(min-width:1907px) 39%, (min-width:1200px) 46%, (min-width:780px) 64%, (min-width:480px) 98%, (min-width:460px) 167%, 196%"
+  data-siteId="d09aa95befe76773c32f581f00b267bc"
+  data-template="default"
+  data-testMode="true"></amp-embed>
+
+  <h2>WP Media</h2>
+  <amp-ad width="300" height="250"
+    type="wpmedia"
+    data-slot="12"
+    data-bunch="7757"
+    data-sn="sg"></amp-ad>
+
+  <h2>ZEDO</h2>
+  <amp-ad width="300" height="250"
+    type="zedo"
+    data-super-id="364489"
+    data-network="2500"
+    data-placement-id="364489_1"
+    data-channel="727"
+    data-publisher="0"
+    data-dim="9">
+  </amp-ad>
+
+  <h2>Zen</h2>
+  <amp-embed width="500" height="354"
+    type="zen"
+    data-clid="[123, 456]">
+  </amp-embed>
+
+  <h2>ZergNet</h2>
+  <amp-embed width="780" height="100"
+    type="zergnet"
+    heights="(max-width:645px) 100%, (max-width:845px) 31%, 23%"
+    layout="responsive"
+    data-zergid="42658">
+  </amp-embed>
+
+  <h2>Zucks</h2>
+  <amp-ad width="320" height="50"
+    type="zucks"
+    data-frame-id="_bda46cf5ac">
+  </amp-ad>
+
+  <amp-ad width="320" height="400"
+      type="zucks"
+      data-adtype="zoe"
+      data-frame-id="_29845b2931"
+      data-zoe-multi-ad="true">
+  </amp-ad>
+</body>
+
+</html>
diff --git a/examples/adsense.amp.html b/examples/amp-ad/adsense.amp.html
similarity index 97%
rename from examples/adsense.amp.html
rename to examples/amp-ad/adsense.amp.html
index 65d3019e59f57..67fff2d1299b7 100644
--- a/examples/adsense.amp.html
+++ b/examples/amp-ad/adsense.amp.html
@@ -58,7 +58,7 @@
       id="amp-user-notification">
     This site uses cookies to personalize content.
     <a href="#learn-more">Learn more.</a>
-    <button on="tap:amp-user-notification.dismiss" role="button" tabindex="0">I accept</button>
+    <button on="tap:amp-user-notification.dismiss" tabindex="0">I accept</button>
   </amp-user-notification>
 
   <h2>AdSense</h2>
diff --git a/examples/adzerk.amp.html b/examples/amp-ad/adzerk.amp.html
similarity index 100%
rename from examples/adzerk.amp.html
rename to examples/amp-ad/adzerk.amp.html
diff --git a/examples/doubleclick-multisize.amp.html b/examples/amp-ad/doubleclick-multisize.amp.html
similarity index 98%
rename from examples/doubleclick-multisize.amp.html
rename to examples/amp-ad/doubleclick-multisize.amp.html
index 41617a9200bca..81246dda8323e 100644
--- a/examples/doubleclick-multisize.amp.html
+++ b/examples/amp-ad/doubleclick-multisize.amp.html
@@ -5,7 +5,6 @@
     <title>Multi-size Ad Requests with DoubleClick Examples</title>
     <link rel="canonical" href="http://nonblocking.io/" >
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
diff --git a/examples/doubleclick-remote-html.html b/examples/amp-ad/doubleclick-remote-html.html
similarity index 100%
rename from examples/doubleclick-remote-html.html
rename to examples/amp-ad/doubleclick-remote-html.html
diff --git a/examples/amp-ad/doubleclick-rtc.amp.html b/examples/amp-ad/doubleclick-rtc.amp.html
new file mode 100644
index 0000000000000..d554f7f14a284
--- /dev/null
+++ b/examples/amp-ad/doubleclick-rtc.amp.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Doubleclick RTC Example</title>
+  <link rel="canonical" href="http://nonblocking.io/" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <style amp-custom>
+    amp-ad {
+      border: 1px solid #ccc;
+      max-width: 500px;
+    }
+  </style>
+  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h2> NOTE: Must disable check that isSecureUrl for testing </h2>
+  <h2>Doubleclick with RTC</h2>
+    <amp-ad width="320" height="50"
+            type="doubleclick"
+            data-slot="/4119129/mobile_ad_banner"
+            rtc-config='{"vendors": {"fakeVendor": {"SLOT_ID": "1", "PAGE_ID": "1"}, "nonexistent-vendor": {"SLOT_ID": "1"}, "fakeVendor2": {"SLOT_ID": "1"}}, "urls": ["https://localhost:4443/posts?slot_id=1", "https://localhost:4443/abc?timeout=true", "https://broken.zzzzzz", "https://localhost:4443/zqq?slot_id=1"], "timeoutMillis": 500}'
+            json='{"targeting":{"food":["burgers","chicken"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":0}'>
+    </amp-ad>
+
+    <amp-ad width="320" height="50"
+            type="doubleclick"
+            data-slot="/4119129/mobile_ad_banner"
+            rtc-config='{"urls": ["https://www.example.biz/?pvi=PAGEVIEWID&href=HREF&ds=ATTR(data-slot)&h=ATTR(height)&w=ATTR(width)&ovw=ATTR(data-override-width)&json=ATTR(json)&ovh=ATTR(data-override-height)"], "timeoutMillis": 500}'
+            json='{"targeting":{"food":["burgers","chicken"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":0}'>
+    </amp-ad>
+
+    <amp-ad width="320" height="50"
+            type="doubleclick"
+            data-slot="/4119129/mobile_ad_banner"
+            rtc-config='{
+            "vendors": {
+            "fakeVendor": {
+            "SLOT_ID": {"key":"param"}
+            }
+            }
+            }'>
+    </amp-ad>
+
+    <amp-ad width="320" height="50"
+            type="doubleclick"
+            data-slot="/4119129/mobile_ad_banner"
+            rtc-config='{"urls": ["amp-script:targetingFns.getTargeting"]}'
+    </amp-ad>
+    <amp-script nodom data-ampdevmode id="targetingFns" script="targetingFnsScript"></amp-script>
+    <script id="targetingFnsScript" type="text/plain" target="amp-script">
+      exportFunction("getTargeting", () => {
+        return {
+          targeting: {food: ["chicken", "beans"]},
+          categoryExclusions: ["sports", "food", "fun"]
+        };
+      });
+    </script>
+</body>
+</html>
diff --git a/examples/doubleclick-safeframe.html b/examples/amp-ad/doubleclick-safeframe.html
similarity index 100%
rename from examples/doubleclick-safeframe.html
rename to examples/amp-ad/doubleclick-safeframe.html
diff --git a/examples/doubleclick-targeting-macro.html b/examples/amp-ad/doubleclick-targeting-macro.html
similarity index 96%
rename from examples/doubleclick-targeting-macro.html
rename to examples/amp-ad/doubleclick-targeting-macro.html
index 91d0968c4a2ed..0880a00db4f13 100644
--- a/examples/doubleclick-targeting-macro.html
+++ b/examples/amp-ad/doubleclick-targeting-macro.html
@@ -7,8 +7,8 @@
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
-    amp-ad { 
-        border: 1px solid #ccc; 
+    amp-ad {
+        border: 1px solid #ccc;
     }
   </style>
   <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
@@ -16,7 +16,7 @@
 </head>
 <body>
     <h2>A4A ad</h2>
-    <amp-ad  height="250" 
+    <amp-ad  height="250"
         type="doubleclick"
         width="300"
         data-slot="/30497360/a4a/a4a_native"
diff --git a/examples/doubleclick-usdrud.html b/examples/amp-ad/doubleclick-usdrud.html
similarity index 100%
rename from examples/doubleclick-usdrud.html
rename to examples/amp-ad/doubleclick-usdrud.html
diff --git a/examples/doubleclick-vanilla.amp.html b/examples/amp-ad/doubleclick-vanilla.amp.html
similarity index 100%
rename from examples/doubleclick-vanilla.amp.html
rename to examples/amp-ad/doubleclick-vanilla.amp.html
diff --git a/examples/amp-ad/sticky-creative.html b/examples/amp-ad/sticky-creative.html
new file mode 100644
index 0000000000000..2b11d1564bffc
--- /dev/null
+++ b/examples/amp-ad/sticky-creative.html
@@ -0,0 +1,6 @@
+<!doctype html><html>
+<head><meta charset=utf-8>
+<meta content=width=device-width,minimum-scale=1,initial-scale=1 name=viewport>
+<body>
+<a href=https://www.google.com><img sid=container alt="AMP Ad" height=250 src=https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg width=300></img></a>
+</body></html>
diff --git a/examples/amp-ad/sticky.html b/examples/amp-ad/sticky.html
new file mode 100644
index 0000000000000..221d8e26b1db2
--- /dev/null
+++ b/examples/amp-ad/sticky.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>Ad examples</title>
+    <link rel="canonical" href="http://nonblocking.io/" />
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,initial-scale=1"
+    />
+    <style amp-custom>
+      .spacer {
+        margin-top: 10px;
+        height: 70vh;
+        width: 100%;
+        background-image: -webkit-linear-gradient(#EEE 50%, white 50%);
+        background-image: linear-gradient(#EEE 50%, white 50%);
+        background-size: 100% 3em;
+      }
+
+      header {
+        position: relative;
+      }
+
+      h1 {
+        margin: 0px 10px;
+      }
+
+      header h1 {
+        position: absolute;
+        top: 20vh;
+        padding: 5px;
+        z-index: 1;
+      }
+
+      header h1 span, .title {
+        background-color: black;
+        color: white;
+        line-height: 1.2em;
+      }
+
+      amp-img img {
+        object-fit: cover;
+      }
+    </style>
+    <script
+      async
+      custom-element="amp-ad"
+      src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"
+    ></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+
+  <body>
+    <header>
+      <h1>
+        <span class="title">Lorem Ipsum Dolor Sit Lorem Ipsum<span>
+      </h1>
+      <amp-img height="50vh" layout="fixed-height" src="https://picsum.photos/1600/900?image=1069"></amp-img>
+    </header>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <div class="spacer"></div>
+    <amp-ad
+      width="1"
+      height="1"
+      id="i-amphtml-demo-id"
+      type="fake-delayed"
+      sticky
+      data-bootstrap-script="/examples/amp-ad/sticky.js"
+      src="/examples/amp-ad/sticky-creative.html"
+    ></amp-ad>
+  </body>
+</html>
diff --git a/examples/amp-ad/sticky.js b/examples/amp-ad/sticky.js
new file mode 100644
index 0000000000000..6de449412930f
--- /dev/null
+++ b/examples/amp-ad/sticky.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2020 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.
+ */
+window.onload = function () {
+  var iframe = document.querySelector('#creative');
+
+  // Step 1: Once knowing the ad size is 300x250, hide the frame and request to have ad shown
+  iframe.style.top = '250px';
+  iframe.style.transition = '3s';
+  window.context.requestResize(300, 250).then(function () {
+    iframe.style.top = '0px';
+    iframe.addEventListener('transitionend', function () {
+      // Animation ended, now signaling AMP the ad is now interactive
+      window.context.signalInteractive();
+    });
+  });
+};
diff --git a/examples/amp-consent/amp-consent-3p-postmessage.html b/examples/amp-consent/amp-consent-3p-postmessage.html
new file mode 100644
index 0000000000000..6a3bb299caa14
--- /dev/null
+++ b/examples/amp-consent/amp-consent-3p-postmessage.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>amp-video-iframe</title>
+    <link rel="canonical" href="amps.html" />
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
+    <script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
+    <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script>
+      (self.AMP = self.AMP || []).push(function(AMP) {
+        AMP.toggleExperiment('tcf-post-message-proxy-api', true);
+      });
+    </script>
+    <style amp-custom>
+      body {
+        max-width: 527px;
+      }
+      [fallback] {
+        display: block;
+        /* @alternative */
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-items: center;
+        background: rgba(0, 0, 0, 0.5);
+        color: #fff;
+      }
+      .spacer {
+        height: 100vh;
+      }
+      p,
+      h1,
+      h2,
+      h3 {
+        padding: 10px;
+      }
+
+    amp-consent {
+      min-height: 30px;
+      font-family: 'Roboto';
+      font-weight: 500;
+      line-height: 30px;
+      padding: 8px;
+      background: #46b6ac;
+    }
+
+    amp-consent button {
+      border: none;
+      border-radius: 2px;
+
+      color: #fafafa;
+      height: 26px;
+      min-width: 32px;
+      padding: 0 16px;
+      margin: 0 16px;
+      text-transform: uppercase;
+      letter-spacing: 0;
+      cursor: pointer;
+      vertical-align: middle;
+      line-height: 26px;
+      text-align: center;
+      background: #3f51b5;
+    }
+
+    #ui1 {
+      height: 100vh;
+    }
+
+    hr {
+      margin: 0;
+    }
+    </style>
+    <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>
+  </head>
+  <body>
+    <h3>Image that is blocked by both consent</h3>
+    <amp-img data-block-on-consent src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n" width="300" height="200"></amp-img>
+
+    <h3>Image that is NOT blocked by consent</h3>
+    <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n" width="300" height="200"></amp-img>
+
+    <amp-video-iframe data-block-on-consent='_till_responded' id="myVideo" src="./diy-3p-iframe-tcf-postmessage.html" width="720" height="405" layout="responsive" autoplay>
+      <div placeholder>
+        This is a placeholder
+      </div>
+      <div fallback>
+        This is a fallback
+      </div>
+    </amp-video-iframe>
+
+    <amp-video-iframe data-block-on-consent id="myVideo2" src="./diy-3p-iframe-tcf-postmessage.html" width="720" height="405" layout="responsive" autoplay>
+      <div placeholder>
+        This is a placeholder
+      </div>
+      <div fallback>
+        This is a fallback
+      </div>
+    </amp-video-iframe>
+    <amp-consent id="ABC" layout="nodisplay" type="_ping_">
+      <script type="application/json">
+        {
+          "postPromptUI": "postPromptUI",
+          "exposesTcfApi": true
+        }
+      </script>
+      <div id="ui1">
+        Please Accept to load image.
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
+      </div>
+      <div id="ui2">
+        Please Accept to load image.
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
+      </div>
+      <div id="postPromptUI">
+        Post Prompt UI
+        <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
+      </div>
+    </amp-consent>
+  </body>
+</html>
diff --git a/examples/amp-consent/amp-consent-amp-ad.amp.html b/examples/amp-consent/amp-consent-amp-ad.amp.html
index a1ed012618e78..56bdaaccf94b8 100644
--- a/examples/amp-consent/amp-consent-amp-ad.amp.html
+++ b/examples/amp-consent/amp-consent-amp-ad.amp.html
@@ -27,17 +27,16 @@
   <amp-consent id='ABC' layout='nodisplay' type='_ping_'>
     <script type="application/json">
       {
-            "consents": {},
-            "postPromptUI": "postPromptUI",
-            "clientConfig": {
-              "CMP_id": "test_id",
-              "other_info": "test_info"
-            }
-          }
+        "postPromptUI": "postPromptUI",
+        "clientConfig": {
+          "CMP_id": "test_id",
+          "other_info": "test_info"
+        }
+      }
     </script>
     <div id="postPromptUI">
       Post Prompt UI
-      <button on="tap:ABC.prompt(consent=_ping_)" role="button">Manage</button>
+      <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
     </div>
   </amp-consent>
   <!-- End _ping_ example -->
@@ -49,7 +48,7 @@ <h2>Doubleclick with RTC (Blocked _till_responded)</h2>
     width="320" height="50"
     type="doubleclick"
     data-slot="/4119129/mobile_ad_banner"
-    rtc-config='{"vendors": {"fakeVendor": {"SLOT_ID": "1"}}, "urls": ["https://localhost:4443/posts?slot_id=1&consent_state=CONSENT_STATE&consent_string=CONSENT_STRING"], "timeoutMillis": 500}'>
+    rtc-config='{"vendors": {"fakeVendor": {"SLOT_ID": "1"}}, "urls": ["https://localhost:4443/posts?slot_id=1&consent_state=CONSENT_STATE&consent_string=CONSENT_STRING&gdprApplies=CONSENT_METADATA(gdprApplies)&additionalConsent=CONSENT_METADATA(additionalConsent)&consentStringType=CONSENT_METADATA(consentStringType)"], "timeoutMillis": 500}'>
   </amp-ad>
 
   <h2>Doubleclick with RTC (Blocked by _till_accepted)</h2>
@@ -57,11 +56,10 @@ <h2>Doubleclick with RTC (Blocked by _till_accepted)</h2>
     width="320" height="50"
     type="doubleclick"
     data-slot="/4119129/mobile_ad_banner"
-    rtc-config='{"vendors": {"fakeVendor": {"SLOT_ID": "1"}}, "urls": ["https://localhost:4443/posts?slot_id=1&consent_state=CONSENT_STATE&consent_string=CONSENT_STRING"], "timeoutMillis": 500}'>
+    rtc-config='{"vendors": {"fakeVendor": {"SLOT_ID": "1"}}, "urls": ["https://localhost:4443/posts?slot_id=1&consent_state=CONSENT_STATE&consent_string=CONSENT_STRING&gdprApplies=CONSENT_METADATA(gdprApplies)&additionalConsent=CONSENT_METADATA(additionalConsent)&consentStringType=CONSENT_METADATA(consentStringType)"], "timeoutMillis": 500}'>
     </amp-ad>
 
   </amp-ad>
 
 </body>
 </html>
-
diff --git a/examples/amp-consent/amp-consent-client.html b/examples/amp-consent/amp-consent-client.html
index 5d787b1056267..d22e867c01434 100644
--- a/examples/amp-consent/amp-consent-client.html
+++ b/examples/amp-consent/amp-consent-client.html
@@ -183,13 +183,13 @@ <h3>Image that is NOT blocked by consent</h3>
     }</script>
     <div id="ui1">
         CA: Can I load the image??
-        <button on="tap:ABC.accept" role="button">Accept</button>
-        <button on="tap:ABC.reject" role="button">Reject</button>
-        <button on="tap:ABC.dismiss" role="button">Dismiss</button>
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
       </div>
       <div id="postPromptUI">
         Post Prompt UI
-        <button on="tap:ABC.prompt" role="button">Manage</button>
+        <button on="tap:ABC.prompt">Manage</button>
       </div>
   </amp-consent>
 
@@ -206,7 +206,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
       <div>
         Revoke consent
-        <button class="button" on="tap:ABC.prompt" role="button">Manage</button>
+        <button class="button" on="tap:ABC.prompt">Manage</button>
       </div>
 
       <div class="author">
@@ -255,7 +255,7 @@ <h1>_ping_ Ad Blocked by meta tags</h1>
         </p>
       </div>
     </div>
-    <button on="tap:ABC.prompt" role="button">Manage Consent</button>
+    <button on="tap:ABC.prompt">Manage Consent</button>
   </article>
 </main>
 
diff --git a/examples/amp-consent/amp-consent-cmp.html b/examples/amp-consent/amp-consent-cmp.html
index 392d99724beb0..455bc3cfe52ae 100644
--- a/examples/amp-consent/amp-consent-cmp.html
+++ b/examples/amp-consent/amp-consent-cmp.html
@@ -270,7 +270,7 @@ <h3>Image that is NOT blocked by consent</h3>
       </script>
       <div id="postPromptUI">
         Post Prompt UI
-        <button on="tap:ABC.prompt(consent=_ping_)" role="button">Manage</button>
+        <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
       </div>
     </amp-consent>
     <article>
@@ -286,15 +286,15 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
         <div>
           Revoke consent ABC and DEF
-          <button class="button" on="tap:ABC.prompt(consent=ABC),ABC.prompt(consent=DEF)" role="button">Manage</button>
+          <button class="button" on="tap:ABC.prompt(consent=ABC),ABC.prompt(consent=DEF)">Manage</button>
         </div>
         <div>
           Revoke error consent doesn't exsit
-          <button class="button" on="tap:ABC.prompt(consent=ABCd)" role="button">Manage</button>
+          <button class="button" on="tap:ABC.prompt(consent=ABCd)">Manage</button>
         </div>
         <div>
           Only revoke DEF
-          <button class="button" on="tap:ABC.prompt(consent=DEF)" role="button">Manage</button>
+          <button class="button" on="tap:ABC.prompt(consent=DEF)">Manage</button>
         </div>
 
         <div class="author">
@@ -372,12 +372,6 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
   <footer>
     <div class="brand-logo">PublisherLogo</div>
   </footer>
-
-  <script>
-    setTimeout(() => {
-      AMP.toggleExperiment('amp-consent-restrict-fullscreen', true);
-    }, 500);
-  </script>
 </body>
 
 </html>
diff --git a/examples/amp-consent/amp-consent-geo.html b/examples/amp-consent/amp-consent-geo.html
index 0008a915326cd..de31d22492071 100644
--- a/examples/amp-consent/amp-consent-geo.html
+++ b/examples/amp-consent/amp-consent-geo.html
@@ -121,11 +121,11 @@
 <main role="main">
   <p>This example tests amp-consent with amp-geo using 'geoOverride' to prompt different UIs</p>
   <h3>Image that is blocked by '_till_responded' consent</h3>
-  <amp-analytics type="_ping_">
+  <amp-analytics>
     <script type="application/json">
       {
         "requests": {
-          "old": "https://fake.com/analytics?consent=CONSENT_STATE"
+          "old": "https://fake.com/analytics?consent=CONSENT_STATE&consentString=${consentString}"
         },
         "vars": {
           "abc": "${timestamp}.${requestCount}"
@@ -177,9 +177,8 @@ <h3>Image that is NOT blocked by consent</h3>
       {
         "ISOCountryGroups": {
           "na": ["ca", "mx", "us"],
-          "eea": ["preset-eea"],
-          "row": ["unknown"],
-          "useIframe": ["fake"]
+          "eea": ["preset-eea", "unknown"],
+          "usePromptUi": ["fake"]
         }
       }
     </script>
@@ -198,7 +197,8 @@ <h3>Image that is NOT blocked by consent</h3>
       "geoOverride": {
         "na": {
           "checkConsentHref": "/check-consent?consentRequired=true&consentStateValue=unknown&consentRequired=true",
-          "consentRequired": "remote"
+          "consentRequired": "remote",
+          "monetization-type": "npa"
         },
         "eea": {
           "promptUI": null,
@@ -214,7 +214,7 @@ <h3>Image that is NOT blocked by consent</h3>
           "checkConsentHref": "/check-consent?consentRequired=true&expireCache=true",
           "consentRequired": true
         },
-        "useIframe": {
+        "usePromptUi": {
           "consentRequired": true,
           "promptUI": "ui2"
         }
@@ -222,9 +222,9 @@ <h3>Image that is NOT blocked by consent</h3>
     }</script>
     <div id="ui1">
       Can I load the image??
-      <button on="tap:ABC.accept" role="button">Accept</button>
-      <button on="tap:ABC.reject" role="button">Reject</button>
-      <button on="tap:ABC.dismiss" role="button">Dismiss</button>
+      <button on="tap:ABC.accept">Accept</button>
+      <button on="tap:ABC.reject">Reject</button>
+      <button on="tap:ABC.dismiss">Dismiss</button>
     </div>
     <div id="ui2">
       Can I load the image??
@@ -238,7 +238,7 @@ <h3>Image that is NOT blocked by consent</h3>
     </div>
     <div id="postPromptUI">
       Post Prompt UI
-      <button on="tap:ABC.prompt" role="button">Manage</button>
+      <button on="tap:ABC.prompt">Manage</button>
     </div>
   </amp-consent>
   <article>
@@ -255,7 +255,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
       <div>
         Revoke consent
-        <button class="button" on="tap:ABC.prompt" role="button">Manage</button>
+        <button class="button" on="tap:ABC.prompt">Manage</button>
       </div>
 
       <div class="author">
diff --git a/examples/amp-consent/amp-consent-iframe.amp.html b/examples/amp-consent/amp-consent-iframe.amp.html
new file mode 100644
index 0000000000000..7fa50e32848bb
--- /dev/null
+++ b/examples/amp-consent/amp-consent-iframe.amp.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8">
+    <title>AMP Consent CMP Vendors</title>
+    <link rel="canonical" href="amp-consent-iframe.amp.html" >
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <style amp-custom>
+
+    amp-consent {
+      min-height: 30px;
+      font-family: 'Roboto';
+      font-weight: 500;
+      line-height: 30px;
+      padding: 8px;
+      background: #46b6ac;
+    }
+
+    amp-consent button {
+      border: none;
+      border-radius: 2px;
+
+      color: #fafafa;
+      height: 26px;
+      min-width: 32px;
+      padding: 0 16px;
+      margin: 0 16px;
+      text-transform: uppercase;
+      letter-spacing: 0;
+      cursor: pointer;
+      vertical-align: middle;
+      line-height: 26px;
+      text-align: center;
+      background: #3f51b5;
+    }
+
+    </style>
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
+    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
+  </head>
+  <body>
+
+    <h1 id="top">AMP Consent Iframe</h1>
+
+    <h2>Iframe blocked until responded</h2>
+    <amp-iframe
+      data-block-on-consent="_till_responded"
+      src="http://iframe.localhost:8000/examples/amp-consent/amp-consent-iframe.embed.html"
+      sandbox="allow-scripts allow-same-origin allow-popups"
+      allow="autoplay *; fullscreen *"
+      frameborder="0"
+      width="16"
+      height="9"
+      style="max-width:700px;"
+      layout="responsive">
+      <amp-img layout="fill" src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n" placeholder></amp-img>
+    </amp-iframe>
+
+    <h2>Iframe never blocked</h2>
+    <amp-iframe
+      src="http://iframe.localhost:8000/examples/amp-consent/amp-consent-iframe.embed.html"
+      sandbox="allow-scripts allow-same-origin allow-popups"
+      allow="autoplay *; fullscreen *"
+      frameborder="0"
+      width="16"
+      height="9"
+      style="max-width:700px;"
+      layout="responsive">
+      <amp-img layout="fill" src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n" placeholder></amp-img>
+    </amp-iframe>
+
+    <div id="container">
+
+      <!-- This should be in alphabetical order. _ping_ should be the first -->
+
+      <!-- _ping_ example -->
+      <amp-consent id='ABC' layout='nodisplay' type='_ping_'>
+        <script type="application/json">
+          {
+            "postPromptUI": "postPromptUI",
+            "clientConfig": {
+              "CMP_id": "test_id",
+              "other_info": "test_info"
+            }
+          }
+        </script>
+        <div id="postPromptUI">
+          Post Prompt UI
+          <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
+        </div>
+      </amp-consent>
+      <!-- End _ping_ example -->
+
+    </div>
+  </body>
+</html>
diff --git a/examples/amp-consent/amp-consent-iframe.embed.html b/examples/amp-consent/amp-consent-iframe.embed.html
new file mode 100644
index 0000000000000..4fc8e80327069
--- /dev/null
+++ b/examples/amp-consent/amp-consent-iframe.embed.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<body style="background-color:#EEEEEE">
+  <script>
+    function isAmpMessage(event, type) {
+      return (
+        event.source == window.parent &&
+        event.origin != window.location.origin &&
+        event.data &&
+        event.data.sentinel == 'amp' &&
+        event.data.type == type
+      );
+    }
+    window.addEventListener('message', (event) => {
+      if (!isAmpMessage(event, 'consent-data')) {
+        return;
+      }
+      console.log('message', event);
+      document.getElementById('consent').innerText = JSON.stringify(event.data, null, 2);
+    }, false);
+
+    window.parent.postMessage({
+      sentinel: 'amp',
+      type: 'send-consent-data'
+    }, '*');
+  </script>
+  <pre id="consent">
+    Iframe loaded but did not receive consent
+  </pre>
+</body>
+</html>
diff --git a/examples/amp-consent/amp-consent-server.html b/examples/amp-consent/amp-consent-server.html
index 5ffda21877d80..11a76bdd9ad53 100644
--- a/examples/amp-consent/amp-consent-server.html
+++ b/examples/amp-consent/amp-consent-server.html
@@ -193,7 +193,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
       <div>
         Revoke consent
-        <button class="button" on="tap:ABC.prompt" role="button">Manage</button>
+        <button class="button" on="tap:ABC.prompt">Manage</button>
       </div>
 
       <div class="author">
diff --git a/examples/amp-consent/cmp-vendors.amp.html b/examples/amp-consent/cmp-vendors.amp.html
index 1c6f5213b3ea8..81b8f0ce594ce 100644
--- a/examples/amp-consent/cmp-vendors.amp.html
+++ b/examples/amp-consent/cmp-vendors.amp.html
@@ -96,12 +96,18 @@
           <!-- This should be in alphabetical order. _ping_ should be the first -->
           <option>_ping_</option>
           <option>appconsent</option>
+          <option>ConsentManager</option>
           <option>didomi</option>
-          <option>sirdata</option>
+          <option>iubenda</option>
+          <option>LiveRamp</option>
           <option>Marfeel</option>
           <option>Ogury</option>
           <option>opencmp</option>
+          <option>pubtech</option>
+          <option>quantcast</option>
+          <option>sirdata</option>
           <option>SourcePoint</option>
+          <option>UniConsent</option>
           <option>Usercentrics</option>
         </select>
         <input type="submit" value="Go">
@@ -126,7 +132,6 @@ <h3>Image that is NOT blocked by consent</h3>
       <amp-consent id='ABC' layout='nodisplay' type='_ping_'>
         <script type="application/json">
           {
-            "consents": {},
             "postPromptUI": "postPromptUI",
             "clientConfig": {
               "CMP_id": "test_id",
@@ -136,7 +141,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="postPromptUI">
           Post Prompt UI
-          <button on="tap:ABC.prompt(consent=_ping_)" role="button">Manage</button>
+          <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
         </div>
       </amp-consent>
       <!-- End _ping_ example -->
@@ -153,7 +158,23 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="postPromptUI">
           Post Prompt UI
-          <button on="tap:ABC.prompt(consent=appconsent)" role="button">Manage</button>
+          <button on="tap:ABC.prompt(consent=appconsent)">Manage</button>
+        </div>
+      </amp-consent>
+      <!-- End appconsent example -->
+
+
+      <!-- ConsentManager example -->
+      <amp-consent id="ConsentManager" layout="nodisplay" type="ConsentManager">
+        <script type="application/json">
+          {
+            "postPromptUI": "postPromptUI",
+            "clientConfig": { "id": "1" }
+          }
+        </script>
+        <div id="postPromptUI">
+          Post Prompt UI
+          <button on="tap:consent.prompt(consent=ConsentManager)">Manage</button>
         </div>
       </amp-consent>
       <!-- End appconsent example -->
@@ -162,7 +183,6 @@ <h3>Image that is NOT blocked by consent</h3>
       <amp-consent id='didomi' layout='nodisplay' type='didomi'>
           <script type="application/json">
             {
-              "consents": {},
               "postPromptUI": "postPromptUI",
               "clientConfig": {
                 "config": {
@@ -181,31 +201,49 @@ <h3>Image that is NOT blocked by consent</h3>
           </script>
           <div id="postPromptUI">
             Post Prompt UI
-            <button on="tap:didomi.prompt(consent=didomi)" role="button">Manage</button>
+            <button on="tap:didomi.prompt(consent=didomi)">Manage</button>
           </div>
         </amp-consent>
         <!-- End didomi example -->
 
-      <!-- sirdata example -->
-      <amp-consent id="consent" layout="nodisplay" type="sirdata">
+      <!-- iubenda example -->
+      <amp-consent id="iubenda" layout="nodisplay" type="iubenda">
         <script type="application/json">
           {
-            "postPromptUI": "promptConsentUI",
+            "promptUISrc": "https://cdn.iubenda.com/cs/test/cs-for-amp.html",
+            "postPromptUI": "iubendaPostPromptUI"
+          }
+        </script>
+        <div id="iubendaPostPromptUI">
+          Post Prompt UI
+          <button on="tap:iubenda.prompt(consent=iubenda)">Manage</button>
+        </div>
+      </amp-consent>
+      <!-- End iubenda example -->
+
+      <!-- LiveRamp example -->
+      <amp-consent id="consent" layout="nodisplay" type="LiveRamp">
+        <script type="application/json">
+          {
+            "postPromptUI": "post-consent-ui",
             "clientConfig": {
-              "cmp": {
-                "theme": {
-                  "noConsentButton": "refuse"
-                }
-              }
+              "appId": "c65a09d5-eda1-4eef-bf38-90e73059f4d6"
+            },
+            "uiConfig": {
+              "overlay": true
             }
           }
         </script>
-        <div id="promptConsentUI">
-          Post Prompt UI
-          <button on="tap:consent.prompt(consent=sirdata)" role="button">Privacy settings</button>
+
+        <div id="post-consent-ui" tabindex="0" role="button" on="tap:consent.prompt(consent=LiveRamp)" style="display: flex; width: 40px; height: 40px; justify-content: center; align-items: center; cursor: pointer; margin: 0 0 10px 10px;
+                    float: left; border-radius: 25px; background-color: #ffffff">
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100">
+            <path fill="#ff0a0a"
+              d="M68.884 25.318c-6.503-3.34-12.126-4.757-18.867-4.757-6.706 0-13.074 1.586-18.866 4.757-.813.439-1.83.135-2.303-.674-.44-.81-.136-1.856.677-2.295 6.3-3.407 13.21-5.162 20.492-5.162 7.215 0 13.515 1.586 20.425 5.129.847.438 1.152 1.45.711 2.26-.304.607-.88.945-1.49.945-.27 0-.542-.068-.779-.203zm-47.895 16.87c-.341 0-.683-.098-.99-.293-.786-.521-.956-1.53-.41-2.28 3.38-4.556 7.684-8.137 12.806-10.644 10.724-5.273 24.452-5.306 35.21-.032 5.122 2.506 9.425 6.055 12.806 10.58.546.715.376 1.757-.41 2.278-.785.52-1.844.358-2.39-.39-3.074-4.102-6.967-7.325-11.577-9.571-9.802-4.785-22.335-4.785-32.102.033-4.644 2.278-8.537 5.533-11.611 9.635-.273.456-.785.684-1.332.684zm22.028 38.541c-.449 0-.897-.162-1.208-.487-3.002-2.823-4.624-4.64-6.936-8.566-2.38-3.991-3.623-8.858-3.623-14.082 0-9.637 8.765-17.49 19.531-17.49 10.767 0 19.532 7.853 19.532 17.49 0 .908-.76 1.622-1.726 1.622s-1.725-.714-1.725-1.622c0-7.853-7.212-14.245-16.08-14.245-8.87 0-16.081 6.392-16.081 14.245 0 4.672 1.104 8.988 3.209 12.492 2.208 3.732 3.727 5.322 6.384 7.853.655.649.655 1.654 0 2.303-.38.325-.828.487-1.277.487zm23.652-5.208c-4.185 0-7.878-1-10.903-2.967-5.24-3.368-8.37-8.836-8.37-14.637 0-.934.774-1.667 1.758-1.667.985 0 1.759.733 1.759 1.667 0 4.701 2.532 9.135 6.823 11.87 2.497 1.6 5.416 2.366 8.933 2.366.844 0 2.25-.1 3.658-.333.95-.167 1.864.433 2.04 1.367.175.9-.458 1.767-1.442 1.934-2.005.366-3.764.4-4.256.4zm-6.157 7.291c-.137 0-.308-.032-.445-.065-5.44-1.45-8.999-3.393-12.728-6.917-4.79-4.579-7.425-10.672-7.425-17.194 0-5.336 4.722-9.684 10.538-9.684 5.817 0 10.539 4.348 10.539 9.684 0 3.524 3.182 6.39 7.117 6.39 3.934 0 7.116-2.866 7.116-6.39 0-12.418-11.12-22.497-24.806-22.497-9.717 0-18.613 5.204-22.616 13.274-1.335 2.668-2.019 5.797-2.019 9.223 0 2.57.24 6.62 2.293 11.89.342.857-.103 1.812-.993 2.109-.89.329-1.882-.132-2.19-.956-1.676-4.314-2.497-8.596-2.497-13.043 0-3.953.787-7.543 2.326-10.672 4.551-9.19 14.645-15.151 25.696-15.151 15.568 0 28.228 11.56 28.228 25.79 0 5.336-4.722 9.684-10.538 9.684-5.817 0-10.539-4.348-10.539-9.684 0-3.524-3.182-6.39-7.117-6.39-3.934 0-7.116 2.866-7.116 6.39 0 5.632 2.258 10.903 6.398 14.855 3.25 3.096 6.364 4.809 11.188 6.094.924.23 1.437 1.152 1.198 2.009-.171.757-.89 1.251-1.608 1.251z" />
+          </svg>
         </div>
       </amp-consent>
-      <!-- End sirdata example -->
+      <!-- End LiveRamp example-->
 
       <!-- Marfeel example -->
       <amp-consent id='marfeelConsent' layout='nodisplay' type='Marfeel'>
@@ -220,7 +258,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="postPromptUI">
           Post Prompt UI
-          <button on="tap:marfeelConsent.prompt(consent=Marfeel)" role="button">Manage</button>
+          <button on="tap:marfeelConsent.prompt(consent=Marfeel)">Manage</button>
         </div>
       </amp-consent>
       <!-- End Marfeel example -->
@@ -240,13 +278,32 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="custom-prompt-ui">
           Post Prompt UI
-          <button on="tap:ogury.prompt(consent=Ogury)" role="button">
+          <button on="tap:ogury.prompt(consent=Ogury)">
             Privacy Settings
           </button>
         </div>
       </amp-consent>
       <!-- End Ogury example -->
 
+      <!-- OneTrust example -->
+      <amp-consent id='consent' layout='nodisplay' type='onetrust'>
+        <script type="application/json">
+        {
+          "postPromptUI": "onetrust-consent-prompt-ui",
+          "clientConfig": {
+            "CMP_id": "ac6c1ea9-9ac8-460e-a132-b328dea3f56f-test",
+            "Env": "App",
+            "Opt_Out": "C0004"
+          }
+        }
+        </script>
+        <div id="onetrust-consent-prompt-ui">
+          Post Prompt UI
+          <button on="tap:consent.prompt(consent=onetrust)">Privacy Settings</button>
+        </div>
+      </amp-consent>
+      <!-- End OneTrust example -->
+
       <!-- opencmp example -->
       <amp-consent id='consent' layout='nodisplay' type='opencmp'>
         <script type="application/json">
@@ -257,11 +314,68 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="opencmp-consent-prompt-ui">
           Post Prompt UI
-          <button on="tap:consent.prompt(consent=opencmp)" role="button">Privacy Settings</button>
+          <button on="tap:consent.prompt(consent=opencmp)">Privacy Settings</button>
         </div>
       </amp-consent>
       <!-- End opencmp example -->
 
+      <!-- Pubtech Example -->
+      <amp-consent id="pubtech" layout="nodisplay" type="pubtech">
+        <script type="application/json">
+              {
+                "postPromptUI": "pubtech-post-prompt",
+                "clientConfig": {
+                  "privacyUrl": "",
+                  "isAmp": true,
+                  "websiteName": "Pubtech"
+                }
+              }
+            </script>
+        <div id="pubtech-post-prompt">
+          <button on="tap:pubtech.prompt(consent=pubtech)">Privacy settings</button>
+        </div>
+      </amp-consent>
+      <!-- End Pubtech example -->
+
+      <!-- Quantcast Example -->
+      <amp-consent id="quantcast" layout="nodisplay" type="quantcast">
+        <script type="application/json">
+            {
+              "postPromptUI": "quantcast-post-prompt",
+              "clientConfig": {
+                "coreConfig": {
+                  "googleEnabled": false
+                }
+              }
+            }
+          </script>
+          <div id="quantcast-post-prompt">
+            <button on="tap:consent.prompt(consent=quantcast)">Privacy settings</button>
+          </div>
+      </amp-consent>
+      <!-- End Quantcast example -->
+
+      <!-- sirdata example -->
+      <amp-consent id="consent" layout="nodisplay" type="sirdata">
+        <script type="application/json">
+          {
+            "postPromptUI": "promptConsentUI",
+            "clientConfig": {
+              "cmp": {
+                "theme": {
+                  "noConsentButton": "refuse"
+                }
+              }
+            }
+          }
+        </script>
+        <div id="promptConsentUI">
+          Post Prompt UI
+          <button on="tap:consent.prompt(consent=sirdata)">Privacy settings</button>
+        </div>
+      </amp-consent>
+      <!-- End sirdata example -->
+
       <!-- SourcePoint example -->
       <amp-consent id='consent' layout='nodisplay' type='SourcePoint'>
         <script type="application/json">
@@ -282,11 +396,32 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="my-consent-prompt-ui">
           Post Prompt UI
-          <button on="tap:consent.prompt(consent=SourcePoint)" role="button">Privacy Settings</button>
+          <button on="tap:consent.prompt(consent=SourcePoint)">Privacy Settings</button>
         </div>
       </amp-consent>
       <!-- End SourcePoint example -->
 
+      <!-- UniConsent example -->
+      <amp-consent id="uniconsent" layout="nodisplay" type="UniConsent">
+        <script type="application/json">
+          {
+            "postPromptUI": "post-consent-ui",
+            "clientConfig": {
+              "id": "8d3a00eb37"
+            },
+            "uiConfig": {
+              "overlay": true
+            }
+          }
+        </script>
+
+        <div id="post-consent-ui" tabindex="0" role="button" on="tap:uniconsent.prompt(consent=UniConsent)" style="display: flex; width: 30px; height: 30px; justify-content: center; align-items: center; cursor: pointer; margin: 0 0 10px 10px;
+                    float: left; border-radius: 4px; background-image: linear-gradient(37deg,#c7c7c7,#e0e0e0);">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 80 80"><g xmlns="http://www.w3.org/2000/svg"><path d="M34,0 C34,0 23.6964545,11.1724138 0,11.1724138 L0,37.8256034 C0,51.7436379 6.68872727,65.1658966 18.7989091,73.7658621 C23.0844545,76.8103448 28.1396364,79.4288793 34,81 C39.8603636,79.4288793 44.914,76.8103448 49.2010909,73.7658621 C61.3112727,65.1658966 68,51.7436379 68,37.8256034 L68,11.1724138 C44.3035455,11.1724138 34,0 34,0 Z" id="Shape" fill="#556080" fill-rule="nonzero"></path> <path d="M33.5,72 C30.2491562,70.8407063 27.1024375,69.1817891 24.1165,67.0482991 C14.6503125,60.2873765 9,49.3527184 9,37.797358 L9,19.0691292 C20.3174687,17.7567475 28.3534687,14.1786635 33.5,11 C38.6465312,14.1786635 46.6825312,17.7567475 58,19.0691292 L58,37.797358 C58,49.3527184 52.3496875,60.2873765 42.8850312,67.0482991 C39.8975625,69.1817891 36.7508438,70.8407063 33.5,72 Z" id="Shape" fill="#4FBA6F" fill-rule="nonzero"></path> <path d="M52.4745773,28.3573401 C51.8332457,27.8315443 50.8604567,27.8936575 50.2992916,28.4931226 L29.799806,50.4422109 L18.6320032,39.9782954 C18.0292132,39.4134982 17.0548825,39.4134982 16.4520925,39.9782954 C15.8493025,40.5430927 15.8493025,41.4560129 16.4520925,42.0208102 L28.7853921,53.5767632 C29.0752247,53.8483281 29.4668069,54 29.8753475,54 C29.8923058,54 29.909264,54 29.9262223,54 C30.3532628,53.9869996 30.7540951,53.8078823 31.0346776,53.5074275 L52.6179519,30.3955214 C53.1791171,29.7946118 53.1143672,28.8816915 52.4745773,28.3573401 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path></g></svg>
+        </div>
+      </amp-consent>
+      <!-- End UniConsent example-->
+
       <!-- Usercentrics example -->
       <amp-consent id='consent' layout='nodisplay' type='Usercentrics'>
         <script type="application/json">
@@ -299,7 +434,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="my-consent-prompt-ui">
           Post Prompt UI
-          <button on="tap:consent.prompt(consent=Usercentrics)" role="button">Privacy Settings</button>
+          <button on="tap:consent.prompt(consent=Usercentrics)">Privacy Settings</button>
         </div>
       </amp-consent>
       <!-- End Usercentrics example -->
diff --git a/examples/amp-consent/diy-3p-iframe-tcf-postmessage.html b/examples/amp-consent/diy-3p-iframe-tcf-postmessage.html
new file mode 100644
index 0000000000000..ba5590b347420
--- /dev/null
+++ b/examples/amp-consent/diy-3p-iframe-tcf-postmessage.html
@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <script async src="https://cdn.ampproject.org/video-iframe-integration-v0.js"></script>
+  </head>
+  <body style="margin: 0; padding: 0;">
+    <video playsinline controls style="width: 100vw; height: 100vh;" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"></video>
+
+    <!-- Integration script -->
+    <script>
+      //  #######  #####  #######
+      //  #       #     # #
+      //  #       #       #
+      //  #####    #####  ######
+      //  #             #       #
+      //  #       #     # #     #
+      //  #######  #####   #####
+
+      // This example is written in ES5 for browser compatibility.
+      // If you wish to write an integration script in ES2015+ that doesn't
+      // require older browser support or is otherwise transpiled into ES5, see
+      // ./frame-es2015.html.
+
+      // Wait for API to initialize
+      (window.AmpVideoIframe = window.AmpVideoIframe || []).push(onAmpIntegrationReady);
+
+      function onAmpIntegrationReady(ampIntegration) {
+        // `ampIntegration` is an object containing the tools required to
+        // integrate.
+
+        var video = document.querySelector("video");
+        var muted = false;
+
+        var events = ["canplay", "playing", "pause", "ended"];
+
+        for (var i = 0; i < events.length; i++) {
+          // Wrap in IIFE to preserve iterated value.
+          (function (e) {
+            video.addEventListener(e, function () {
+              ampIntegration.postEvent(e);
+            });
+          })(events[i]);
+        }
+
+        // in case we miss `canplay`.
+        if (video.readyState >= video.HAVE_FUTURE_DATA) {
+          ampIntegration.postEvent("canplay");
+        }
+
+        video.addEventListener("volumechange", function () {
+          if (video.volume < 0.01) {
+            muted = true;
+            ampIntegration.postEvent("muted");
+            return;
+          }
+          if (muted) {
+            muted = false;
+            ampIntegration.postEvent("unmuted");
+          }
+        });
+
+        ampIntegration.method("play", function () {
+          video.play();
+        });
+        ampIntegration.method("pause", function () {
+          video.pause();
+        });
+        ampIntegration.method("mute", function () {
+          video.muted = true;
+        });
+        ampIntegration.method("unmute", function () {
+          video.muted = false;
+        });
+        ampIntegration.method("showcontrols", function () {
+          video.controls = true;
+        });
+        ampIntegration.method("hidecontrols", function () {
+          video.controls = false;
+        });
+        ampIntegration.method("fullscreenenter", function () {
+          // Unsupported in example. This should be a call to `requestFullscreen`
+          // or browser equivalents.
+        });
+        ampIntegration.method("fullscreenexit", function () {
+          // Unsupported in example. This should be a call to `exitFullscreen`
+          // or browser equivalents.
+        });
+
+        setInterval(function () {
+          // Post a custom analytics event every 3 seconds.
+          ampIntegration.postAnalyticsEvent(
+            "video-custom-foo",
+            /* optional */ {
+              myVar: Math.random().toString(),
+            }
+          );
+        }, 3000);
+      }
+    </script>
+
+    <!-- Example PostMessage Script -->
+    <!-- https://github.com/InteractiveAdvertisingBureau/GDPR-Transparency-and-Consent-Framework/blob/master/TCFv2/IAB%20Tech%20Lab%20-%20CMP%20API%20v2.md#is-there-a-sample-iframe-script-call-to-the-cmp-api -->
+    <script>
+      (function () {
+        //start here at our window
+        let frame = window;
+
+        // if we locate the CMP iframe we will reference it with this
+        let cmpFrame;
+
+        // map of calls
+        const cmpCallbacks = {};
+
+        while (frame) {
+          try {
+            /**
+             * throws a reference error if no frames exist
+             */
+
+            if (frame.frames["__tcfapiLocator"]) {
+              cmpFrame = frame;
+              break;
+            }
+          } catch (ignore) {}
+
+          if (frame === window.top) {
+            break;
+          }
+
+          frame = frame.parent;
+        }
+
+        /**
+         * Set up a __tcfapi proxy method to do the postMessage and map the callback.
+         * From the caller's perspective, this function behaves identically to the
+         * CMP API's __tcfapi call
+         */
+
+        window.__tcfapi = function (cmd, version, callback, arg) {
+          if (!cmpFrame) {
+              callback(
+                {
+                  msg: "CMP not found"
+                },
+                false
+              );
+            } else {
+            const callId = Math.random() + "";
+            const msg = {
+              __tcfapiCall: {
+                command: cmd,
+                parameter: arg,
+                version: version,
+                callId: callId,
+              },
+            };
+
+            /**
+             * map the callback for lookup on response
+             */
+
+            cmpCallbacks[callId] = callback;
+            cmpFrame.postMessage(msg, "*");
+          }
+        };
+
+        function postMessageHandler(event) {
+          /**
+           * when we get the return message, call the mapped callback
+           */
+
+          let json = {};
+
+          try {
+            /**
+             * if this isn't valid JSON then this will throw an error
+             */
+
+            json = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
+          } catch (ignore) {}
+
+          const payload = json.__tcfapiReturn;
+
+          if (payload) {
+            /**
+             * messages we care about will have a payload
+             */
+
+            if (typeof cmpCallbacks[payload.callId] === "function") {
+              /**
+               * call the mapped callback and then remove the reference
+               */
+
+              cmpCallbacks[payload.callId](payload.returnValue, payload.success);
+              cmpCallbacks[payload.callId] = null;
+            }
+          }
+        }
+
+        window.addEventListener("message", postMessageHandler, false);
+      })();
+
+      __tcfapi("ping", 2, (pingReturn, success) => {
+        // should get response from window.top's CMP
+        console.log('Ping return:', pingReturn);
+      });
+
+      __tcfapi("getTCData", 2, (tcData, success) => {
+        // should get response from window.top's CMP
+        console.log('Minimal TCData return:', tcData);
+      });
+
+      const callback = (tcData, success) => {
+        console.log('addEventListenerCallback:', tcData)
+        if(success && tcData.eventStatus === 'tcloaded') {
+          // do something with tcData.tcString
+
+          // remove the ourself to not get called more than once
+          __tcfapi('removeEventListener', 2, (returnValue, success) => {
+            console.log('removeEventListener success:', success);
+            if(success) {
+              // oh good...
+            }
+          }, tcData.listenerId);
+        } else {
+          // do something else
+        }
+      }
+
+      __tcfapi('addEventListener', 2, callback);
+    </script>
+  </body>
+</html>
diff --git a/examples/amp-consent/diy-consent.html b/examples/amp-consent/diy-consent.html
index aca6905ba7d56..f18cadb03b474 100644
--- a/examples/amp-consent/diy-consent.html
+++ b/examples/amp-consent/diy-consent.html
@@ -1,115 +1,112 @@
 <html>
-
   <head>
-    <link rel="stylesheet" type="text/css" href="https://raw.githack.com/ganapativs/bttn.css/master/dist/bttn.min.css">
-    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css">
+    <link rel="stylesheet" type="text/css" href="https://raw.githack.com/ganapativs/bttn.css/master/dist/bttn.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
     <style>
-html {
-  width: 100%;
-  background-color: #fff;
-  padding: 0px !important;
-
-  height: 1500px;
-}
-
-body {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 800px;
-  background-color: #fff;
-  line-height: initial;
-  margin: 0;
-  padding: 10px;
-}
-
-.bttn-primary {
-  margin-right: 10px;
-  cursor: pointer;
-}
-
-.decision-text {
-  font-size: 0.85em;
-  word-wrap: break-word;
-}
-
-h1 {
-  font-size: 1.15em;
-}
-
-h2 {
-  font-size: 1em;
-}
-
-
-#decision-buttons {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-#always-show {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}
-
-.close {
-  transition: all 0.5s;
-  color: red;
-  font-size: 1em;
-  background-color: transparent;
-  border: 1px solid #000;
-  padding-left: 5px;
-  padding-right: 5px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-
-.close:hover {
-  color: red;
-  font-size: 1.25em;
-  background-color: transparent;
-  border: 1px solid #000;
-}
+      html {
+        width: 100%;
+        background-color: #fff;
+        padding: 0px !important;
+
+        height: 1500px;
+      }
+
+      body {
+        width: 90%;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 800px;
+        background-color: #fff;
+        line-height: initial;
+        margin: 0;
+        padding: 10px;
+      }
+
+      .bttn-primary {
+        margin-right: 10px;
+        cursor: pointer;
+      }
+
+      .decision-text {
+        font-size: 0.85em;
+        word-wrap: break-word;
+      }
+
+      h1 {
+        font-size: 1.15em;
+      }
+
+      h2 {
+        font-size: 1em;
+      }
+
+      #decision-buttons {
+        margin-top: 10px;
+        margin-bottom: 10px;
+      }
+
+      #always-show {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+      }
+
+      .close {
+        transition: all 0.5s;
+        color: red;
+        font-size: 1em;
+        background-color: transparent;
+        border: 1px solid #000;
+        padding-left: 5px;
+        padding-right: 5px;
+        padding-top: 2px;
+        padding-bottom: 2px;
+      }
+
+      .close:hover {
+        color: red;
+        font-size: 1.25em;
+        background-color: transparent;
+        border: 1px solid #000;
+      }
     </style>
   </head>
 
   <body>
-
     <div id="consent-wrapper">
       <div id="decision-state">
-
         <h1 class="animated fadeIn">Cookies, and Privacy</h1>
         <h2 class="animated fadeIn">I am scrollable</h2>
         <div class="decision-text animated fadeIn">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor.
         </div>
         <h1 class="animated fadeIn">Additional consent information</h1>
-        <div id='clientState' class="decision-text animated fadeIn"></div>
-
+        <div id="clientState" class="decision-text animated fadeIn"></div>
       </div>
       <div id="learn-more-state">
-
         <h1 class="animated fadeIn">More Information</h1>
         <h2 class="animated fadeIn">I am scrollable</h2>
         <div class="animated fadeIn">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem
+          ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+          aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
 
         <div class="animated fadeIn">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </div>
-
       </div>
       <div id="decision-buttons" class="animated fadeInUp">
-        <button id='a' class="bttn-primary bttn-jelly bttn-xs">Accept All</button>
-        <button id='r' class="bttn-primary bttn-jelly bttn-xs">Reject All</button>
-        <button id='f' class="bttn-primary bttn-jelly bttn-xs">Learn More</button>
+        <button id="a" class="bttn-primary bttn-jelly bttn-xs">Accept All</button>
+        <button id="r" class="bttn-primary bttn-jelly bttn-xs">Reject All</button>
+        <button id="f" class="bttn-primary bttn-jelly bttn-xs">Learn More</button>
       </div>
       <div id="always-show">
-        <button id='d' class="close">X</button>
+        <button id="d" class="close">X</button>
       </div>
     </div>
     <div id="confirmation-wrapper">
@@ -117,206 +114,202 @@ <h1>Thank you!</h1>
     </div>
 
     <script type="text/javascript">
+      // Default values for non-3P iframe.
+      var sentinel = "amp";
+      var ampWindow = parent;
+
+      // Write passed in stored state and client config
+      var clientInfo;
+      var cmpId;
+      var consentStr;
+      var consentState;
+      var purposeConsentMap;
+      if (window && window.name) {
+        try {
+          clientInfo = JSON.parse(window.name);
+          cmpId = clientInfo["clientConfig"] && clientInfo["clientConfig"]["CMP_id"];
+          consentStr = clientInfo["consentString"];
+          consentState = clientInfo["consentState"];
+          purposeConsentMap = clientInfo["purposeConsentMap"];
+          // TODO: convert consentState to readable value
+        } catch (e) {
+          console.log("Caught error when parsing window.name,", e);
+        }
+      }
+
+      // Add event listener for focus for a11y
+      window.addEventListener("focus", () => {
+        const headerElement = document.querySelector("h1");
+        console.log("I am focused after you clicked on me!", headerElement);
+        if (headerElement) {
+          headerElement.focus();
+        }
+      });
 
-    // Default values for non-3P iframe.
-var sentinel = 'amp';
-var ampWindow = parent;
-
-// Write passed in stored state and client config
-var clientInfo;
-var cmpId;
-var consentStr;
-var consentState;
-if (window && window.name) {
-  try {
-    clientInfo = JSON.parse(window.name);
-    cmpId =
-        clientInfo['clientConfig'] && clientInfo['clientConfig']['CMP_id'];
-    consentStr = clientInfo['consentString'];
-    consentState = clientInfo['consentState'];
-    // TODO: convert consentState to readable value
-  } catch(e) {
-    console.log('Caught error when parsing window.name,', e)
-  }
-}
-
-
-window.addEventListener('message', (event) => {
-  const data = event.data;
-  if (data.reqestType === 'enter-fullscreen' && data.state === 'error') {
-    console.log('Could not complete fullscreen request:', data.message);
-  }
-  else if (data.reqestType === 'enter-fullscreen' && data.state === 'success') {
-    console.log('Fullscreen command successfuly sent:', data.message);
-  }
-  else {
-    console.log('Unknown request type:', data.reqestType);
-  }
-});
-
-
-// Add event listener for focus for a11y
-window.addEventListener('focus', () => {
-  const headerElement = document.querySelector('h1');
-  console.log('I am focused after you clicked on me!', headerElement);
-  if (headerElement) {
-    headerElement.focus();
-  }
-});
-
-var text = `Passed in cmpId is '${cmpId}', previously stored consent string is` +
-` '${consentStr}', consent state is '${consentState}'`;
-
-document.getElementById('clientState').textContent = text;
-
-// Detect 3P sentinel in the location.hash.
-var hashMatch = location.hash.match(/amp-3p-sentinel=((\d+)-\d+)/);
-if (hashMatch) {
-  sentinel = hashMatch[1];
-  // Depth is measured from window.top.
-  var depth = Number(hashMatch[2]);
-  var ancestors = [];
-  for (var win = window; win && win != win.parent; win = win.parent) {
-    // Add window keeping the top-most one at the front.
-    ancestors.unshift(win.parent);
-  }
-  ampWindow = ancestors[depth];
-}
-
-// Send our ready event
-setTimeout(() => {
-
-  // Our ready object
-  const readyObject = {
-    type: 'consent-ui',
-    action: 'ready'
-  };
-
-  // Check if we should randomly do some custom stuff
-  const shouldApplyCustom = Math.random() > 0.5;
-  if (shouldApplyCustom) {
-    const initialHeight = 30 + Math.floor(Math.random() * 30);
-    readyObject.initialHeight = `${initialHeight}vh`;
-    readyObject.border = Math.random() < 0.5
-  }
-
-  console.log('diy-consent: Sending Ready Message!', readyObject);
-
-  parent.postMessage(readyObject, '*');
-}, 2000);
-
-// Send fullscreen every 2.5 seconds
-setInterval(() => {
-
-  // Our ready object
-  const readyObject = {
-    type: 'consent-ui',
-    action: 'enter-fullscreen'
-  };
-
-  console.log('diy-consent: Sending Fullscreen Message!', readyObject);
-
-  parent.postMessage(readyObject, '*');
-}, 2500);
-
-function registerClickConsentMessage(querySelector, type, action, info, consentMetadata, timeout) {
-  document.querySelector(querySelector).onclick = function () {
-    // parent.postMessage("message to be sent", "http://the-website-that-will-receive-the-msg.com")
-    setTimeout(() => {
-      parent.postMessage({
-        type,
-        action,
-        info,
-        consentMetadata,
-      }, '*');
-    }, timeout);
-  };
-}
-
-function showDecisionState() {
-  document.querySelector('#decision-state').style = 'display: block';
-  document.querySelector('#learn-more-state').style = 'display: none';
-  document.querySelector('#f').style = 'display: inline-block';
-}
-
-function showLearnMoreState() {
-  document.querySelector('#decision-state').style = 'display: none';
-  document.querySelector('#learn-more-state').style = 'display: block';
-  document.querySelector('#f').style = 'display: none';
-}
-
-function showConsent() {
-  document.querySelector('#consent-wrapper').style = 'display: block';
-  document.querySelector('#confirmation-wrapper').style = 'display: none';
-}
-
-
-function showConfirmation() {
-  document.querySelector('#consent-wrapper').style = 'display: none';
-  document.querySelector('#confirmation-wrapper').style = 'display: block';
-}
-
-const consentObjects = [
-  {
-    querySelector: '#a',
-    type: 'consent-response',
-    action: 'accept',
-    info: 'accept-str',
-    consentMetadata: {'consentStringType': 2},
-    timeout: 1000,
-    onclick: () => {
-      showConfirmation();
-    }
-  },
-  {
-    querySelector: '#r',
-    type: 'consent-response',
-    action: 'reject',
-    timeout: 1000,
-    onclick: () => {
-      showConfirmation();
-    }
-  },
-  {
-    querySelector: '#d',
-    type: 'consent-response',
-    action: 'dismiss',
-    timeout: 1000,
-    onclick: () => {
-      showConfirmation();
-    }
-  },
-  {
-    querySelector: '#f',
-    type: 'consent-ui',
-    action: 'enter-fullscreen',
-    timeout: 0,
-    onclick: () => {
-      showLearnMoreState();
-    }
-  }
-]
-consentObjects.forEach(consentObject => {
-  registerClickConsentMessage(
-    consentObject.querySelector,
-    consentObject.type,
-    consentObject.action,
-    consentObject.info,
-    consentObject.consentMetadata,
-    consentObject.timeout || 0
-  );
-
-  if (consentObject.onclick) {
-    document
-      .querySelector(consentObject.querySelector)
-      .addEventListener('click', () => {
-        consentObject.onclick();
+      var text = `Passed in cmpId is '${cmpId}', previously stored consent string is` + ` '${consentStr}', consent state is '${consentState}', purpose consent map is '${JSON.stringify(purposeConsentMap)}'`;
+
+      document.getElementById("clientState").textContent = text;
+
+      // Detect 3P sentinel in the location.hash.
+      var hashMatch = location.hash.match(/amp-3p-sentinel=((\d+)-\d+)/);
+      if (hashMatch) {
+        sentinel = hashMatch[1];
+        // Depth is measured from window.top.
+        var depth = Number(hashMatch[2]);
+        var ancestors = [];
+        for (var win = window; win && win != win.parent; win = win.parent) {
+          // Add window keeping the top-most one at the front.
+          ancestors.unshift(win.parent);
+        }
+        ampWindow = ancestors[depth];
+      }
+
+      // Send our ready event
+      setTimeout(() => {
+        // Our ready object
+        const readyObject = {
+          type: "consent-ui",
+          action: "ready",
+        };
+
+        // Check if we should randomly do some custom stuff
+        const shouldApplyCustom = Math.random() > 0.5;
+        if (shouldApplyCustom) {
+          // 30-60 is bottom pane, 60 > is modal
+          const initialHeight = 30 + Math.floor(Math.random() * 50);
+          readyObject.initialHeight = `${initialHeight}vh`;
+          readyObject.border = Math.random() < 0.5;
+        }
+
+        console.log("diy-consent: Sending Ready Message!", readyObject);
+
+        parent.postMessage(readyObject, "*");
+      }, 2000);
+
+      function registerClickConsentMessage(querySelector, type, action, info, consentMetadata, purposeConsents, timeout) {
+        document.querySelector(querySelector).onclick = function () {
+          // parent.postMessage("message to be sent", "http://the-website-that-will-receive-the-msg.com")
+          setTimeout(() => {
+            parent.postMessage(
+              {
+                type,
+                action,
+                info,
+                consentMetadata,
+                purposeConsents,
+              },
+              "*"
+            );
+            setTimeout(() => {
+              navigator.sendBeacon("https://example.test/beacon");
+            }, 500);
+          }, timeout);
+        };
+      }
+
+      function showDecisionState() {
+        document.querySelector("#decision-state").style = "display: block";
+        document.querySelector("#learn-more-state").style = "display: none";
+        document.querySelector("#f").style = "display: inline-block";
+      }
+
+      function showLearnMoreState() {
+        document.querySelector("#decision-state").style = "display: none";
+        document.querySelector("#learn-more-state").style = "display: block";
+        document.querySelector("#f").style = "display: none";
+      }
+
+      function showConsent() {
+        document.querySelector("#consent-wrapper").style = "display: block";
+        document.querySelector("#confirmation-wrapper").style = "display: none";
+      }
+
+      function showConfirmation() {
+        document.querySelector("#consent-wrapper").style = "display: none";
+        document.querySelector("#confirmation-wrapper").style = "display: block";
+      }
+
+      function getConsentString() {
+        // Check if served from a viewer
+        if (window.location.ancestorOrigins.length == 2) {
+          // Return full consent string
+          return "full-accept-string";
+        }
+        // Otherwise return abbriviated version
+        return "accept-string";
+      }
+
+      function getAdditionalConsentString() {
+        // Check if served from a viewer
+        if (window.location.ancestorOrigins.length == 2) {
+          // Return full consent string
+          return "full-additional-consent-string";
+        }
+        // Otherwise return abbriviated version
+        return "additional-consent-string";
+      }
+
+      const consentObjects = [
+        {
+          querySelector: "#a",
+          type: "consent-response",
+          action: "accept",
+          info: getConsentString(),
+          consentMetadata: {
+            consentStringType: 2,
+            additionalConsent: getAdditionalConsentString(),
+            gdprApplies: true,
+            purposeOne: true,
+          },
+          purposeConsents: {
+            "purpose-foo": true,
+            "purpose-bar": false,
+          },
+          timeout: 1000,
+          onclick: () => {
+            showConfirmation();
+          },
+        },
+        {
+          querySelector: "#r",
+          type: "consent-response",
+          action: "reject",
+          timeout: 1000,
+          onclick: () => {
+            showConfirmation();
+          },
+        },
+        {
+          querySelector: "#d",
+          type: "consent-response",
+          action: "dismiss",
+          timeout: 1000,
+          onclick: () => {
+            showConfirmation();
+          },
+        },
+        {
+          querySelector: "#f",
+          type: "consent-ui",
+          action: "enter-fullscreen",
+          timeout: 0,
+          onclick: () => {
+            showLearnMoreState();
+          },
+        },
+      ];
+      consentObjects.forEach((consentObject) => {
+        registerClickConsentMessage(consentObject.querySelector, consentObject.type, consentObject.action, consentObject.info, consentObject.consentMetadata, consentObject.purposeConsents, consentObject.timeout || 0);
+
+        if (consentObject.onclick) {
+          document.querySelector(consentObject.querySelector).addEventListener("click", () => {
+            consentObject.onclick();
+          });
+        }
       });
-  }
-});
 
-showConsent();
-showDecisionState();
-</script>
-</body>
+      showConsent();
+      showDecisionState();
+    </script>
+  </body>
 </html>
diff --git a/examples/amp-date-display.amp.html b/examples/amp-date-display.amp.html
index ac6f38b990f80..a8cd17f0b1e2e 100644
--- a/examples/amp-date-display.amp.html
+++ b/examples/amp-date-display.amp.html
@@ -27,7 +27,7 @@ <h1>Date & time</h1>
     <h2>Available variables</h2>
     <amp-date-display datetime="2017-08-02T20:05:05.000Z" display-in="utc" layout="fixed" width="360" height="140" >
       <template type="amp-mustache">
-        <div>iso: {{iso}}</div>
+        <div>iso: <time datetime="{{iso}}">{{iso}}</time></div>
         <div>day: {{day}} {{dayTwoDigit}} {{dayName}} {{dayNameShort}}</div>
         <div>month: {{month}} {{monthTwoDigit}} {{monthName}} {{monthNameShort}}</div>
         <div>year: {{year}} {{yearTwoDigit}}</div>
@@ -40,68 +40,73 @@ <h2>Available variables</h2>
     <h2>UTC vs local</h2>
     <amp-date-display datetime="2017-08-02T15:05:05.000Z" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>UTC in local: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}</div>
+        UTC in local: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="2017-08-02T15:05:05.000Z" display-in="utc" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>UTC in UTC: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}</div>
+        UTC in UTC: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="2017-08-02T15:05:05.000" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>local in local: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}</div>
+        local in local: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="2017-08-02T15:05:05.000" display-in="utc" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>local in UTC: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}</div>
+        local in UTC: {{dayName}} {{day}} {{monthName}} {{year}}, {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
       </template>
     </amp-date-display>
 
     <h2>Now & offset</h2>
     <amp-date-display datetime="now" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>now: {{iso}}</div>
+        now: {{iso}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="now" offset-seconds="-3600" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>now - 1h: {{iso}}</div>
+        now - 1h: {{iso}}
       </template>
     </amp-date-display>
 
     <h2>Timestamps</h2>
     <amp-date-display timestamp-seconds="1501686305" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>from seconds: {{iso}}</div>
+        from seconds: {{iso}}
       </template>
     </amp-date-display>
     <amp-date-display timestamp-ms="1501686305000" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>from ms: {{iso}}</div>
+        from ms: {{iso}}
       </template>
     </amp-date-display>
 
     <h2>Locales</h2>
     <amp-date-display datetime="now" locale="de" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>de: {{dayName}} {{day}} {{monthName}} {{year}}</div>
+        de: {{dayName}} {{day}} {{monthName}} {{year}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="now" locale="fr" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>fr: {{dayName}} {{day}} {{monthName}} {{year}}</div>
+        fr: {{dayName}} {{day}} {{monthName}} {{year}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="now" locale="cs" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>cs: {{dayName}} {{day}} {{monthName}} {{year}}</div>
+        cs: {{dayName}} {{day}} {{monthName}} {{year}}
       </template>
     </amp-date-display>
     <amp-date-display datetime="now" locale="en-GB" layout="fixed" width="360" height="20" >
       <template type="amp-mustache">
-        <div>en-GB: {{dayName}} {{day}} {{monthName}} {{year}}</div>
+        en-GB: {{dayName}} {{day}} {{monthName}} {{year}}
+      </template>
+    </amp-date-display>
+    <amp-date-display datetime="now" locale="zh-TW" layout="fixed" width="360" height="20" data-options-time-style="short">
+      <template type="amp-mustache">
+        zh-TW: {{localeString}}
       </template>
     </amp-date-display>
   </div>
diff --git a/examples/amp-fit-text.amp.html b/examples/amp-fit-text.amp.html
new file mode 100644
index 0000000000000..7203a43fa94d5
--- /dev/null
+++ b/examples/amp-fit-text.amp.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html ⚡>
+<head>
+    <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
+    <meta charset="utf-8">
+    <title>amp-fit-text</title>
+    <link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-fit-text/index.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+      <script async src="https://cdn.ampproject.org/v0.js"></script>
+      <style amp-custom>
+    :root {
+      --color-primary: #005AF0;
+      --color-text-light: #fff;
+      --space-1: .5rem;  /* 8px */
+    }
+    .square-small, .square-medium, .square-large {
+      display: inline-block;
+      margin: var(--space-1);
+      color: var(--color-text-light);
+      background-color: var(--color-primary);
+    }
+    .square-small {
+      height: 100px;
+      width:  100px;
+    }
+    .square-medium {
+      height: 200px;
+      width:  200px;
+    }
+    .square-large {
+      height: 300px;
+      width:  300px;
+    }
+      </style>
+  </head>
+  <body>
+    <!--
+      Basic usage
+      In each of these examples, the `amp-fit-text` element is nested within a container with fixed dimensions to demonstrate the differences in attributes and layout values. When `amp-fit-text` is used with a given `height`, `width`, and `layout="responsive"` attribute, the text will scale to fit the parent container.
+    -->
+    <div>
+      <div class="square-small"><amp-fit-text id="basic small" width="1" height="1" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
+      <div class="square-medium"><amp-fit-text id="basic medium" width="1" height="1" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
+      <div class="square-large"><amp-fit-text  id="basic large" width="1" height="1" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
+    </div>
+    <!--
+      Aspect ratio
+      The text will scale responsively in the ratio defined by the responsive layout, but not exceed the size of its parent. This sample defines an aspect ratio of 1.5:1 (3:2).
+    -->
+    <div>
+      <div class="square-small"><amp-fit-text id="aspect small" width="300" height="200" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
+      <div class="square-medium"><amp-fit-text id="aspect medium" width="300" height="200" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
+      <div class="square-large"><amp-fit-text id="aspect large" width="300" height="200" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
+    </div>
+    <!--
+      min-font-size
+      The `min-font-size` attribute dictates a minimum size for the text.  In this case, we've dictated a minimum of 30, which will cause it to exceed the size of its fixed block parent and be truncated to fit as appropriate.
+    -->
+    <div>
+      <div class="square-small"><amp-fit-text id="min small" width="200" height="200" layout="responsive" min-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
+      <div class="square-medium"><amp-fit-text id="min medium" width="200" height="200" layout="responsive" min-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
+      <div class="square-large"><amp-fit-text id="min large" width="200" height="200" layout="responsive" min-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
+    </div>
+    <!--
+      max-font-size
+      The `max-font-size` attribute dictates a maximum size for the text.  In this case, we've dictated a maximum of 10, ensuring it won't fill the size of its parent element.
+    -->
+    <div>
+      <div class="square-small"><amp-fit-text id="max small" width="200" height="200" layout="responsive" max-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
+      <div class="square-medium"><amp-fit-text id="max medium" width="200" height="200" layout="responsive" max-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
+      <div class="square-large"><amp-fit-text id="max large" width="200" height="200" layout="responsive" max-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
+    </div>
+</body></html>
diff --git a/examples/amp-geo.amp.html b/examples/amp-geo.amp.html
index 8a9752551c204..2a2abc6a11257 100644
--- a/examples/amp-geo.amp.html
+++ b/examples/amp-geo.amp.html
@@ -19,13 +19,13 @@
       transform: rotate(180deg);
       transition: transform .5s .2s;
     }
-    
+
   </style>
   <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
   <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
-  
+
 </head>
 <body>
   <amp-geo layout="nodisplay">
@@ -65,21 +65,21 @@ <h1>My article title</h1>
       append #amp-geo=&lt;code&gt; to the url and reload the page
       (eg #amp-geo=nz)
   </p>
-  
+
 
   <button on="tap:AMP.setState({myCountry: ampGeo.ISOCountry})">Where am I?</button>
   <p [text]="'The country code is: ' + myCountry "></p>
   <p [text]="'Matched country groups: ' + ampGeo.ISOCountryGroups.join(', ') "></p>
 
   <p>There is an amp-pixel variable substitution example here</p>
-  <amp-pixel src="https://raw.githubusercontent.com/ampproject/amphtml/master/examples/img/ampicon.png?via=pixel&groups=AMP_GEO&country=AMP_GEO(ISOCountry)" layout="nodisplay"></amp-pixel>
+  <amp-pixel src="https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png?via=pixel&groups=AMP_GEO&country=AMP_GEO(ISOCountry)" layout="nodisplay"></amp-pixel>
   <p>There is an amp-analytics variable substitution example here</p>
   <amp-analytics>
     <script type="application/json">
           {
             "transport": {"beacon": false, "xhrpost": false},
             "requests": {
-              "event": "https://raw.githubusercontent.com/ampproject/amphtml/master/examples/img/ampicon.png?via=analytics&groups=${geoGroups}&country=${geoCountry}"
+              "event": "https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png?via=analytics&groups=${geoGroups}&country=${geoCountry}"
             },
             "triggers": {
               "trackPageview": {
diff --git a/examples/amp-gist.amp.html b/examples/amp-gist.amp.html
index 569a3234cc66a..fa31f2d29bf1e 100644
--- a/examples/amp-gist.amp.html
+++ b/examples/amp-gist.amp.html
@@ -15,21 +15,21 @@
 <body>
   <h1>AMP-GIST Examples</h1>
   <h2>Long Example</h2>
-  <amp-gist 
-    layout="fixed-height" 
-    data-gistid="a19e811dcd7df10c4da0931641538497" 
+  <amp-gist
+    layout="fixed-height"
+    data-gistid="a19e811dcd7df10c4da0931641538497"
     height="1613">
   </amp-gist>
   <h2>Smaller Example</h2>
-  <amp-gist 
-    layout="fixed-height" 
-    data-gistid="b9bb35bc68df68259af94430f012425f" 
+  <amp-gist
+    layout="fixed-height"
+    data-gistid="b9bb35bc68df68259af94430f012425f"
     height="225">
   </amp-gist>
   <h2>Single File Example</h2>
-  <amp-gist 
-    layout="fixed-height" 
-    data-gistid="a19e811dcd7df10c4da0931641538497" 
+  <amp-gist
+    layout="fixed-height"
+    data-gistid="a19e811dcd7df10c4da0931641538497"
     data-file="index.js"
     height="65">
   </amp-gist>
diff --git a/examples/amp-google-assistant-assistjs.amp.html b/examples/amp-google-assistant-assistjs.amp.html
new file mode 100644
index 0000000000000..13168cf08f8a3
--- /dev/null
+++ b/examples/amp-google-assistant-assistjs.amp.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-google-assistant-assistjs example</title>
+  <link rel="canonical" href="amps.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+    amp-google-assistant-extension {
+      color: red;
+    }
+  </style>
+  <script async custom-element="amp-google-assistant-extension" src="/dist/v0/amp-google-assistant-assistjs-latest.max.js"></script>
+  <script async src="/dist/amp.js"></script>
+</head>
+<body>
+  <amp-google-assistant-assistjs-config layout="nodisplay">
+    <script type="application/json">{"devMode": true, "projectId": "aog-assistjs-demos"}</script>
+  </amp-google-assistant-assistjs-config>
+  <amp-google-assistant-voice-button layout="responsive" width="150" height="40">
+  </amp-google-assistant-voice-button>
+  <amp-google-assistant-voice-bar layout="responsive" width="150" height="40">
+  </amp-google-assistant-voice-bar>
+  <amp-google-assistant-inline-suggestion-bar layout="responsive" width="150" height="40">
+  </amp-google-assistant-inline-suggestion-bar>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/amp-imgur.amp.html b/examples/amp-imgur.amp.html
index 9de4f8bd3875d..1a82ff0ab610a 100644
--- a/examples/amp-imgur.amp.html
+++ b/examples/amp-imgur.amp.html
@@ -1,18 +1,36 @@
-<!doctype html>
+<!DOCTYPE html>
 <html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>amp-imgur example</title>
-  <link rel="canonical" href="amps.html">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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>
-  <script async custom-element="amp-imgur" src="https://cdn.ampproject.org/v0/amp-imgur-0.1.js"></script>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <h3>Responsive</h3>
-  <amp-imgur data-imgur-id="2CnX7" layout="responsive" width="1" height="1"></amp-imgur>
-  <h3>Fixed Height</h3>
-  <amp-imgur data-imgur-id="a/ZF7NS3V" height="350" layout="fixed-height"></amp-imgur> 
-</body>
+  <head>
+    <meta charset="utf-8">
+    <title>amp-imgur example</title>
+    <link rel="canonical" href="amps.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <script async custom-element="amp-imgur" src="https://cdn.ampproject.org/v0/amp-imgur-0.1.js"></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+  <body>
+    <h2>Responsive</h2>
+    <amp-imgur
+      data-imgur-id="2CnX7"
+      layout="responsive"
+      width="1"
+      height="1"
+    ></amp-imgur>
+
+    <h2>Fixed Height</h2>
+    <amp-imgur
+      data-imgur-id="a/ZF7NS3V"
+      height="350"
+      layout="fixed-height"
+    ></amp-imgur>
+
+    <h2><code>a/</code> album id fallback</h2>
+    The following uses incorrect id <code>ZF7NS3V</code> but should retry as <code>a/ZF7NS3V</code>
+    <amp-imgur
+      data-imgur-id="ZF7NS3V"
+      height="350"
+      layout="fixed-height"
+    ></amp-imgur>
+  </body>
 </html>
diff --git a/examples/amp-layout-intrinsic.amp.html b/examples/amp-layout-intrinsic.amp.html
index 483aba3e12358..a5a5245d1a319 100644
--- a/examples/amp-layout-intrinsic.amp.html
+++ b/examples/amp-layout-intrinsic.amp.html
@@ -12,18 +12,18 @@
     body {
       padding: 10px;
     }
-  
+
     .floated {
       max-width: 1000px;
       float: left;
       padding: 10px;
       background: #ccc;
     }
-  
+
     h2 {
       clear: both
     }
-  
+
     [fallback] {
       display: block;
       /* @alternative */
@@ -35,11 +35,11 @@
       background: rgba(0, 0, 0, 0.5);
       color: #fff;
     }
-  
+
     .spacer {
       height: 100vh;
     }
-  
+
     p,
     h1,
     h2,
diff --git a/examples/amp-lightbox.amp.html b/examples/amp-lightbox.amp.html
index 49560e290f64d..0dcfa9652c180 100644
--- a/examples/amp-lightbox.amp.html
+++ b/examples/amp-lightbox.amp.html
@@ -21,6 +21,12 @@
     .lightbox-close-button {
       background: white;
     }
+    button:focus {
+      background: red;
+    }
+    a:focus {
+      color: red;
+    }
     .lightbox-text {
       color: white;
     }
@@ -29,9 +35,16 @@
       z-index: 10;
     }
   </style>
-  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
+  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-1.0.js"></script>
+  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script>
+    (self.AMP = self.AMP || []).push(function (AMP) {
+      AMP.toggleExperiment('bento', true);
+    });
+  </script>
 </head>
 <body class="comic-amp-font-loading">
 
@@ -39,7 +52,7 @@
   <span class="fixed" style="background-color: red">Fixed header</span>
 
   <h2>Scrollable Lightbox</h2>
-  <amp-lightbox scrollable id="lightbox-scrollable" layout="nodisplay" animate-in="fly-in-bottom">
+  <amp-lightbox id="lightbox-scrollable" layout="nodisplay" animate-in="fly-in-bottom">
     <button on="tap:lightbox-scrollable.close" class="lightbox-close-button">
       Close Scrollable Lightbox
     </button>
@@ -52,6 +65,9 @@ <h2>Scrollable Lightbox</h2>
     <p>
       <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no" width=300 height=200></amp-img>
     </p>
+    <p class="lightbox-text">
+      <a href="https://amp.dev/documentation/examples/components/amp-lightbox/">Some link</a>
+    </p>
     <p class="lightbox-text">
       Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
     </p>
@@ -66,28 +82,91 @@ <h2>Scrollable Lightbox</h2>
       Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
       Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
     </p>
+    <div style="height: 100vh;"></div>
+  <amp-video id="video1"
+    src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
+    width="358"
+    height="204"
+    layout="responsive"
+    controls>
+  </amp-video>
   </amp-lightbox>
 
   <button on="tap:lightbox-scrollable">
     Open Scrollable Lightbox
   </button>
 
+  <h2> Other types of close buttons / focus lightbox</h2>
+
+  <amp-lightbox id="lightbox-without-close" layout="nodisplay" animate-in="fly-in-top">
+    <p class="lightbox-text">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+    </p>
+    <p class="lightbox-text">
+      <a href="https://amp.dev/documentation/examples/components/amp-lightbox/">Some link</a>
+    </p>
+  </amp-lightbox>
+  <button on="tap:lightbox-without-close">
+    Open Lightbox without close button
+  </button>
+
+  <amp-lightbox id="lightbox-with-focus" on="lightboxOpen:lightbox-focus.focus;" layout="nodisplay" animate-in="fade-in">
+    <p class="lightbox-text">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+    </p>
+    <p class="lightbox-text">
+      <a id="lightbox-focus" href="https://amp.dev/documentation/examples/components/amp-lightbox/">Some link</a>
+    </p>
+  </amp-lightbox>
+  <button on="tap:lightbox-with-focus">
+    Open Lightbox with a focus
+  </button>
+
+
+  <amp-lightbox id="lightbox-with-autofocus" layout="nodisplay" animate-in="fly-in-top">
+    <p class="lightbox-text">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+    </p>
+    <input type="text" id="focusMe" name="focusMe" autofocus>
+  </amp-lightbox>
+  <button on="tap:lightbox-with-autofocus">
+    Open Lightbox with autofocus
+  </button>
+
+  <amp-lightbox id="my-bindable-lightbox"
+    [open]="showLightbox"
+    layout="nodisplay"
+    on="lightboxClose:AMP.setState({showLightbox: false})">
+    <p class="lightbox-text">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+    </p>
+    <button on="tap:my-bindable-lightbox.close">Close modal</button>
+  </amp-lightbox>
+  <button on="tap:AMP.setState({showLightbox: true})">
+    Open lightbox with bind
+  </button>
+
+  <!-- Need last item to test focus going back to page-->
+  <p><a href="https://amp.dev/fr/documentation/components/amp-lightbox/">Lightbox doc</a></p>
+
   <div id="lipsum">
-      <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sodales lectus, a gravida lacus auctor et. Nullam id urna ut neque euismod vehicula. Mauris scelerisque ullamcorper neque in malesuada. In lobortis placerat leo, eu posuere lectus semper in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque sed condimentum augue, sit amet porta justo. Integer nec lorem nisi. Phasellus ultrices libero tristique, aliquam neque eleifend, faucibus velit. Morbi vitae pretium augue.
-      </p>
-      <p>
-      Vivamus vel risus vulputate diam malesuada ornare. Nam a urna orci. Vivamus risus tellus, interdum eu turpis ac, tempus viverra sem. In sed leo scelerisque, blandit nibh a, lacinia diam. Maecenas metus arcu, accumsan porta elementum ac, euismod eu leo. Donec ornare risus dui, ut dictum libero imperdiet vitae. Nunc tincidunt velit eu ex dictum posuere. Aliquam interdum orci lectus, et finibus ex bibendum tempor. Phasellus dignissim nibh et maximus ornare. Aliquam ligula lorem, varius non enim ut, imperdiet bibendum magna. Nulla facilisi. Proin pellentesque tristique tellus in egestas. Curabitur laoreet viverra ligula, sit amet finibus arcu. Morbi sed neque sit amet arcu tempus molestie. Mauris aliquam eget nunc eget venenatis. Ut vel mi nec mi mattis ullamcorper vel a enim.
-      </p>
-      <p>
-      Donec ultrices eleifend tristique. Etiam convallis quam lectus, eget tristique elit blandit a. Mauris non tortor et lorem tristique euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sit amet dui sed ipsum lobortis porttitor interdum nec magna. In et ornare urna, mattis sagittis ipsum. Proin vel felis at urna finibus malesuada eu sit amet mi. Quisque ultrices fringilla est vitae scelerisque. Ut condimentum dui ultrices, venenatis neque at, maximus metus.
-      </p>
-      <p>
-      Praesent elementum sollicitudin risus cursus viverra. In eget scelerisque arcu, tincidunt cursus magna. Cras turpis libero, facilisis sed turpis sed, hendrerit cursus libero. Donec ut sapien ut sem sollicitudin mattis ut ut dui. Phasellus sollicitudin eros vitae venenatis fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie nibh semper turpis tempor finibus. Mauris eget sagittis tortor. Fusce interdum enim vitae urna iaculis auctor. Ut volutpat volutpat dignissim. Sed in felis ut nibh faucibus laoreet. Etiam a leo accumsan, efficitur erat non, luctus dui. Vivamus a semper enim, eget luctus dolor. Vestibulum aliquam ullamcorper neque quis bibendum.
-      </p>
-      <p>
-      Proin sit amet lacus nec mi eleifend feugiat tristique ac leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce id luctus nisi. Vestibulum viverra auctor nisl, a placerat leo interdum ac. Nullam porttitor auctor ultrices. Etiam tempus lectus urna, sit amet accumsan ante pellentesque eget. Fusce hendrerit scelerisque massa ut venenatis. Vivamus in diam maximus mi ultrices aliquet. Donec lacinia porttitor augue, nec blandit mauris eleifend at. Mauris ante ligula, tincidunt id risus sit amet, laoreet pharetra orci. Aenean id dolor condimentum, mattis libero et, posuere erat. Pellentesque quis magna eu odio pellentesque congue. Sed fringilla massa ut laoreet suscipit.
-      </p></div>
+    <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sodales lectus, a gravida lacus auctor et. Nullam id urna ut neque euismod vehicula. Mauris scelerisque ullamcorper neque in malesuada. In lobortis placerat leo, eu posuere lectus semper in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque sed condimentum augue, sit amet porta justo. Integer nec lorem nisi. Phasellus ultrices libero tristique, aliquam neque eleifend, faucibus velit. Morbi vitae pretium augue.
+    </p>
+    <p>
+    Vivamus vel risus vulputate diam malesuada ornare. Nam a urna orci. Vivamus risus tellus, interdum eu turpis ac, tempus viverra sem. In sed leo scelerisque, blandit nibh a, lacinia diam. Maecenas metus arcu, accumsan porta elementum ac, euismod eu leo. Donec ornare risus dui, ut dictum libero imperdiet vitae. Nunc tincidunt velit eu ex dictum posuere. Aliquam interdum orci lectus, et finibus ex bibendum tempor. Phasellus dignissim nibh et maximus ornare. Aliquam ligula lorem, varius non enim ut, imperdiet bibendum magna. Nulla facilisi. Proin pellentesque tristique tellus in egestas. Curabitur laoreet viverra ligula, sit amet finibus arcu. Morbi sed neque sit amet arcu tempus molestie. Mauris aliquam eget nunc eget venenatis. Ut vel mi nec mi mattis ullamcorper vel a enim.
+    </p>
+    <p>
+    Donec ultrices eleifend tristique. Etiam convallis quam lectus, eget tristique elit blandit a. Mauris non tortor et lorem tristique euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sit amet dui sed ipsum lobortis porttitor interdum nec magna. In et ornare urna, mattis sagittis ipsum. Proin vel felis at urna finibus malesuada eu sit amet mi. Quisque ultrices fringilla est vitae scelerisque. Ut condimentum dui ultrices, venenatis neque at, maximus metus.
+    </p>
+    <p>
+    Praesent elementum sollicitudin risus cursus viverra. In eget scelerisque arcu, tincidunt cursus magna. Cras turpis libero, facilisis sed turpis sed, hendrerit cursus libero. Donec ut sapien ut sem sollicitudin mattis ut ut dui. Phasellus sollicitudin eros vitae venenatis fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie nibh semper turpis tempor finibus. Mauris eget sagittis tortor. Fusce interdum enim vitae urna iaculis auctor. Ut volutpat volutpat dignissim. Sed in felis ut nibh faucibus laoreet. Etiam a leo accumsan, efficitur erat non, luctus dui. Vivamus a semper enim, eget luctus dolor. Vestibulum aliquam ullamcorper neque quis bibendum.
+    </p>
+    <p>
+    Proin sit amet lacus nec mi eleifend feugiat tristique ac leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce id luctus nisi. Vestibulum viverra auctor nisl, a placerat leo interdum ac. Nullam porttitor auctor ultrices. Etiam tempus lectus urna, sit amet accumsan ante pellentesque eget. Fusce hendrerit scelerisque massa ut venenatis. Vivamus in diam maximus mi ultrices aliquet. Donec lacinia porttitor augue, nec blandit mauris eleifend at. Mauris ante ligula, tincidunt id risus sit amet, laoreet pharetra orci. Aenean id dolor condimentum, mattis libero et, posuere erat. Pellentesque quis magna eu odio pellentesque congue. Sed fringilla massa ut laoreet suscipit.
+    </p>
+</div>
+
 </article>
 </body>
 </html>
diff --git a/examples/amp-list-layout-container.amp.html b/examples/amp-list-layout-container.amp.html
index bc6f0b9e9b224..91ad7635423e9 100644
--- a/examples/amp-list-layout-container.amp.html
+++ b/examples/amp-list-layout-container.amp.html
@@ -35,6 +35,38 @@
     <button on="tap:text.toggleVisibility">
       Toggle text
     </button>
+    <amp-list
+      layout="container"
+      src="https://amp.dev/documentation/examples/api/slow-json/?delay=10000"
+      binding="no">
+    <div placeholder>
+      <div role="listitem">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel quam
+        eu turpis eleifend pretium. Aenean sagittis, leo ac congue mattis, est
+        nisl accumsan eros, sit amet suscipit massa lectus non nibh. In justo
+        libero, ultricies sed tristique vel, tincidunt non nulla. Pellentesque vel
+        pharetra risus. Donec tempus tortor at est vulputate ultrices. Quisque
+        sagittis pretium facilisis. Aliquam dignissim dapibus nibh sed bibendum.
+        Phasellus et nulla pulvinar, placerat sapien ac, vehicula mauris. Mauris
+        efficitur quis orci sed convallis.
+      </div>
+      <div role="listitem">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel quam
+        eu turpis eleifend pretium. Aenean sagittis, leo ac congue mattis, est
+        nisl accumsan eros, sit amet suscipit massa lectus non nibh. In justo
+        libero, ultricies sed tristique vel, tincidunt non nulla. Pellentesque vel
+        pharetra risus. Donec tempus tortor at est vulputate ultrices. Quisque
+        sagittis pretium facilisis. Aliquam dignissim dapibus nibh sed bibendum.
+        Phasellus et nulla pulvinar, placerat sapien ac, vehicula mauris. Mauris
+        efficitur quis orci sed convallis.
+      </div>
+    </div>
+    <template type="amp-mustache">
+      <div>
+        <p>{{title}}</p>
+      </div>
+    </template>
+  </amp-list>
     <h3>amp-list with layout="container"</h3>
     <amp-list
       id="list1"
diff --git a/examples/amp-list-protocol-adapters.html b/examples/amp-list-protocol-adapters.html
new file mode 100644
index 0000000000000..3dba46e4dd9b8
--- /dev/null
+++ b/examples/amp-list-protocol-adapters.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
+  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
+  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
+  <link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-list/">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+</head>
+<body>
+
+  <h1>PROTOCOL ADAPTERS</h1>
+
+  <h3>basic example</h3>
+  <amp-script id="fns" script="local-script" nodom sandboxed></amp-script>
+  <script type="text/plain" target="amp-script" id="local-script">
+    function fetchData() {
+      const items = [{name: 'apple'}, {name: 'banana'}, {name: 'pear'}];
+      return Promise.resolve({items});
+    }
+
+    function fetchSingleItem() {
+      const title = 'The Animals That Could';
+      const price = 99.99;
+      return Promise.resolve({ items: {title, price} });
+    }
+
+    exportFunction('fetchData', fetchData);
+    exportFunction('fetchSingleItem', fetchSingleItem);
+  </script>
+  <amp-list id="list1" width="auto" height="100" layout="fixed-height" src="amp-script:fns.fetchData">
+    <template type="amp-mustache" id="amp-template-id">
+      <div>{{name}}</div>
+    </template>
+  </amp-list>
+
+  <h3>single-item example</h3>
+  <amp-list
+    id="list1"
+    width="auto"
+    height="100"
+    layout="fixed-height"
+    src="amp-script:fns.fetchSingleItem"
+    single-item
+  >
+    <template type="amp-mustache" id="amp-template-id">
+      <div><b>Title</b>: {{title}}</div>
+      <div><b>Price</b>: {{price}}</div>
+    </template>
+  </amp-list>
+</body>
+</html>
diff --git a/examples/amp-list.amp.html b/examples/amp-list.amp.html
index 9d1988c2c18b7..093bb3918c5a2 100644
--- a/examples/amp-list.amp.html
+++ b/examples/amp-list.amp.html
@@ -58,6 +58,15 @@ <h3>amp-list > template[type=amp-mustache]</h3>
     </template>
   </amp-list>
 
+  <!-- If the `amp-list` contains unescaped HTML (allow <h1> <h2> <h3> and <amp-img> tags) -->
+  <!-- See: https://github.com/ampproject/amphtml/issues/27344 -->
+  <h3>amp-list with unescaped HTML</h3>
+  <amp-list id="list1" width="auto" height="300" layout="fixed-height" src="list.example.json" class="m1" reset-on-refresh>
+    <template type="amp-mustache" id="amp-template-id">
+      <div>{{{html}}}</div>
+    </template>
+  </amp-list>
+
   <!-- [diffable] -->
   <h3>amp-list[diffable]</h3>
   <amp-list diffable id="list1" width="auto" height="300" layout="fixed-height" src="list.example.json" class="m1" reset-on-refresh>
diff --git a/examples/amp-list.state.html b/examples/amp-list.state.html
index 8ba27452e8f47..7e87100dc4516 100644
--- a/examples/amp-list.state.html
+++ b/examples/amp-list.state.html
@@ -33,7 +33,7 @@ <h3>Static amp-list, inlined state.
       <div><a href="{{url}}">{{title}}</a></div>
     </template>
   </amp-list>
-  
+
   <h3>Static amp-list, async state</h3>
   <amp-list id="list2" width="auto" height="100" layout="fixed-height" src="amp-state:listAsyncExample" reset-on-refresh>
     <template type="amp-mustache" id="amp-template-id">
@@ -59,8 +59,8 @@ <h3>Paging amp-list</h3>
         { "title": "amp-accordion" }
       ],
       "next": "./list.example.json"
-    } 
-    </script> 
+    }
+    </script>
   </amp-state>
 
 </body>
diff --git a/examples/amp-mowplayer.amp.html b/examples/amp-mowplayer.amp.html
index a8a37486fd865..3f301faa55a5f 100644
--- a/examples/amp-mowplayer.amp.html
+++ b/examples/amp-mowplayer.amp.html
@@ -22,7 +22,7 @@ <h3>Responsive single video</h3>
 
  <h3>Responsive with a playlis t</h3>
 	<amp-mowplayer  data-mediaid="p-mmzhwcu9mbu" layout="responsive" width="16" height="9"></amp-mowplayer>
-	
+
   <h3>Responsive with a video article</h3>
 
 </body>
diff --git a/examples/amp-next-page.amp.html b/examples/amp-next-page.amp.html
index f28c877582ce9..87310506d9548 100644
--- a/examples/amp-next-page.amp.html
+++ b/examples/amp-next-page.amp.html
@@ -378,7 +378,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
             Maecenas sollicitudin felis aliquam tortor vulputate,
             ac posuere velit semper.
           </p>
-          
+
           <p>
             Sed pharetra semper fringilla. Nulla fringilla, neque eget
             varius suscipit, mi turpis congue odio, quis dignissim nisi
diff --git a/examples/amp-onetap-google/iframe.html b/examples/amp-onetap-google/iframe.html
new file mode 100644
index 0000000000000..d043a37acce2b
--- /dev/null
+++ b/examples/amp-onetap-google/iframe.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <script src="https://accounts.google.com/gsi/client"></script>
+  <style>
+    #credential_picker_container {
+      position: fixed !important;
+      right: 0 !important;
+      top: 0 !important;
+    }
+  </style>
+  <script>
+    /** @const {string} */
+    const ATTRIBUTE_DONE_CALLBACK = 'data-done-callback';
+    const ALLOWED_ORIGINS = [
+      'http://localhost:8000',
+      'https://gis-pay.appspot.com'
+    ];
+    let messageListenerRegistered = false;
+    let pendingNonce = null;
+    let domainVerifiedCallback = null;
+    let responseReturned = false;
+
+    function generateRandom() {
+      return btoa((Math.floor(Math.random() * 100000) + 1) + '-nonce');
+    }
+
+    function notifyParent(message) {
+      window.parent && window.parent.postMessage(message, '*');
+    }
+
+    function registerDomainVerifier(done) {
+      if (!window.parent) {
+        return;
+      }
+      domainVerifiedCallback = done;
+      if (!messageListenerRegistered) {
+        window.addEventListener('message', (event) => {
+
+          if (event.source != window.parent || !event.data) {
+            return;
+          }
+          if (!pendingNonce || !domainVerifiedCallback) {
+            return;
+          }
+          if (event.data['sentinel'] != 'onetap_google' || event.data['command'] != 'parent_frame_ready') {
+            return;
+          }
+          if (!event.data['nonce'] || event.data['nonce'] != pendingNonce) {
+            return;
+          }
+          pendingNonce = null;
+          if (ALLOWED_ORIGINS.includes(event.origin)) {
+            let callback = /** typeof {function} */ (domainVerifiedCallback);
+            domainVerifiedCallback = null;
+            callback();
+          }
+        });
+      }
+    }
+
+    function requestDomainVerification() {
+      pendingNonce = generateRandom();
+      notifyParent({
+        sentinel: 'onetap_google',
+        command: 'intermediate_iframe_ready',
+        nonce: pendingNonce
+      });
+    }
+
+    function notifyParentResize(height) {
+      notifyParent({
+        sentinel: 'onetap_google',
+        command: 'intermediate_iframe_resize',
+        height: height
+      });
+    }
+
+    function notifyParentClose() {
+      notifyParent({
+        sentinel: 'onetap_google',
+        command: 'intermediate_iframe_close'
+      });
+    }
+
+    function notifyParentDone() {
+      notifyParent({
+        sentinel: 'onetap_google',
+        command: 'intermediate_iframe_done'
+      });
+    }
+
+    function notifyParentUiMode(mode) {
+      notifyParent({
+        sentinel: 'onetap_google',
+        command: 'set_ui_mode',
+        mode: mode
+      });
+    }
+
+    function notifyParentTapOutsideMode(cancel) {
+      notifyParent({
+        sentinel: 'onetap_google',
+        command: 'set_tap_outside_mode',
+        cancel: !!cancel
+      });
+    }
+
+    function getHeight(detail) {
+      for (let p in detail) {
+        if (p == 'oldHeight') continue;
+        let height = detail[p];
+        if (typeof height === 'number' && !isNaN(height) && height > 0) {
+          return height;
+        }
+      }
+      return -1;
+    }
+
+
+    function formPost(url, data) {
+      const form = /** @type {!HTMLFormElement} */ (document.createElement('form'));
+      document.body.appendChild(form);
+      form.method = 'post';
+      form.action = url;
+      if (data) {
+        Object.keys(data).map(function (name) {
+          let input = /** @type {!HTMLInputElement} */ (
+            document.createElement('input'));
+          input.type = 'hidden';
+          input.name = name;
+          input.value = data[name];
+          form.appendChild(input);
+        });
+      }
+      form.submit();
+    }
+
+    function notifyParentHideOrClose() {
+      if (responseReturned) {
+        notifyParentResize(0);
+      } else {
+        notifyParentClose();
+      }
+    }
+
+    function resizeHandler(activity) {
+      if (activity.type == 'ui_change') {
+        let uiActivityType = /** @type {string} */ (activity['uiActivityType']);
+        if (!uiActivityType) {
+          return;
+        }
+        switch (uiActivityType) {
+          case 'prompt_closed':
+            notifyParentHideOrClose();
+            break;
+          case 'prompt_resized':
+            let height = activity['detail'] && getHeight(activity['detail']);
+            if (typeof height === 'number' && !isNaN(height) && height > 0) {
+              // resize
+              notifyParentResize(height);
+            }
+            break;
+          default:
+          // Do nothing.
+        }
+      }
+    }
+
+    function loginDemo(response) {
+      if (!response || !response['credential']) return;
+      responseReturned = true;
+      formPost('https://gis-pay.appspot.com/login', response);
+    }
+
+    let displayOneTap = () => {
+      let isMobile = /iPhone|Android/i.test(navigator.userAgent);
+      let mode = isMobile ? 'bottom_sheet' : 'card';
+      notifyParentUiMode(mode);
+
+      let cancelOnTapOutside = true;
+      notifyParentTapOutsideMode(cancelOnTapOutside);
+      // notifyParentTapOutsideMode(false) after User interaction.
+
+      google.accounts.id.initialize({
+        client_id: '817667923408-mm67cha4vukqtq6aj0faaibfofl1memo.apps.googleusercontent.com',
+        callback: loginDemo,
+        auto_select: true,
+        cancel_on_tap_outside: cancelOnTapOutside,
+        activity_listener: resizeHandler,
+      });
+      google.accounts.id.prompt();
+    };
+
+    window.onload = () => {
+      registerDomainVerifier(displayOneTap);
+      requestDomainVerification();
+    };
+  </script>
+</head>
+<body style="margin: 0; border: 0;">
+</body>
+</html>
diff --git a/examples/amp-orientation-observer-3d-parallax.amp.html b/examples/amp-orientation-observer-3d-parallax.amp.html
index 956f9c57e6b48..8b760aaabedc3 100644
--- a/examples/amp-orientation-observer-3d-parallax.amp.html
+++ b/examples/amp-orientation-observer-3d-parallax.amp.html
@@ -37,7 +37,7 @@
       background-image: linear-gradient(#EEE 50%, white 50%);
       background-size: 100% 3em;
     }
-    
+
     #animation {
       position: relative;
       top: 0;
@@ -151,7 +151,7 @@
       width="434"
       height="651"
       layout="responsive">
-    </amp-img>  
+    </amp-img>
     <div id="stars-x">
       <div id="stars-y"></div>
     </div>
diff --git a/examples/amp-orientation-observer-panorama.amp.html b/examples/amp-orientation-observer-panorama.amp.html
index af52fdafecb44..a41cfdbed1d65 100644
--- a/examples/amp-orientation-observer-panorama.amp.html
+++ b/examples/amp-orientation-observer-panorama.amp.html
@@ -43,7 +43,7 @@
     </amp-animation>
     <amp-orientation-observer
         gamma-range="-90 90"
-        on="gamma:gammaAnim.seekTo(percent=event.percent)" 
+        on="gamma:gammaAnim.seekTo(percent=event.percent)"
         layout="nodisplay" smoothing="5">
   </amp-orientation-observer>
     <div class="panorama">
diff --git a/examples/amp-orientation-observer-scroll.amp.html b/examples/amp-orientation-observer-scroll.amp.html
index ed6e8415467dd..16a95975ef908 100644
--- a/examples/amp-orientation-observer-scroll.amp.html
+++ b/examples/amp-orientation-observer-scroll.amp.html
@@ -60,7 +60,7 @@ <h3>Move phone along y axis to scroll</h3>
 
       Curabitur dignissim consequat ante, quis facilisis ipsum faucibus nec. Suspendisse potenti. Mauris lorem eros, finibus id tincidunt quis, bibendum at urna. Aenean quis tortor ultricies, sodales ipsum id, imperdiet felis. Maecenas vestibulum cursus est convallis imperdiet. In convallis tempus lacus, suscipit tempus turpis mattis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin massa massa, molestie eu pretium in, eleifend vel erat. Pellentesque dictum turpis sit amet neque elementum aliquam a sed metus. Donec dignissim laoreet massa vel vehicula. Praesent pretium arcu consequat augue dignissim, at ultrices quam placerat. Proin justo odio, fermentum sed malesuada eu, facilisis non quam. In molestie enim nec ligula tempus, sed condimentum dui molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, lacus cursus varius malesuada, lacus enim blandit ipsum, non hendrerit est sapien et ex. Nullam quis pulvinar nulla, vitae venenatis massa.
 
-      In mattis at eros id ullamcorper. Aenean ac hendrerit magna. Sed volutpat sapien quis justo accumsan eleifend. Praesent lobortis, velit sed elementum molestie, urna nibh malesuada lacus, vitae efficitur tellus elit ac augue. Aliquam erat volutpat. Praesent ultricies felis erat, ut luctus nulla pellentesque in. Etiam lacinia neque id neque egestas tempor.      
+      In mattis at eros id ullamcorper. Aenean ac hendrerit magna. Sed volutpat sapien quis justo accumsan eleifend. Praesent lobortis, velit sed elementum molestie, urna nibh malesuada lacus, vitae efficitur tellus elit ac augue. Aliquam erat volutpat. Praesent ultricies felis erat, ut luctus nulla pellentesque in. Etiam lacinia neque id neque egestas tempor.
       <h3>End of text</h3>
     </div>
   </main>
diff --git a/examples/amp-render-data.json b/examples/amp-render-data.json
new file mode 100644
index 0000000000000..7ec16a9e0c7c7
--- /dev/null
+++ b/examples/amp-render-data.json
@@ -0,0 +1,3 @@
+{
+  "name": "Joe"
+}
diff --git a/examples/amp-render-data2.json b/examples/amp-render-data2.json
new file mode 100644
index 0000000000000..2504a54b130c2
--- /dev/null
+++ b/examples/amp-render-data2.json
@@ -0,0 +1,3 @@
+{
+  "name": "Bill"
+}
diff --git a/examples/amp-script/amp-script-demo.js b/examples/amp-script/amp-script-demo.js
index 264861c07f455..5aec19c168eed 100644
--- a/examples/amp-script/amp-script-demo.js
+++ b/examples/amp-script/amp-script-demo.js
@@ -47,12 +47,12 @@ if (long) {
     incrementMutationCount();
 
     fetch('http://localhost:8000/examples/amp-script/hello-world-data.json')
-        .then(response => response.json())
-        .then(json => {
-          const el = document.createElement('h1');
-          el.textContent = 'Hello ' + json.year + ' World!';
-          document.body.appendChild(el);
-        });
+      .then((response) => response.json())
+      .then((json) => {
+        const el = document.createElement('h1');
+        el.textContent = 'Hello ' + json.year + ' World!';
+        document.body.appendChild(el);
+      });
   });
 }
 
@@ -65,7 +65,7 @@ if (ampImg) {
     const el = document.createElement('amp-img');
     el.setAttribute('width', '300');
     el.setAttribute('height', '200');
-    el.setAttribute('src', '/examples/img/hero@1x.jpg')
+    el.setAttribute('src', '/examples/img/hero@1x.jpg');
     document.body.appendChild(el);
   });
 }
diff --git a/examples/amp-script/canvas.js b/examples/amp-script/canvas.js
index a6d5a5735d854..59c7e019181e7 100644
--- a/examples/amp-script/canvas.js
+++ b/examples/amp-script/canvas.js
@@ -1,3 +1,18 @@
+/**
+ * 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.
+ */
 const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
diff --git a/examples/amp-script/empty.js b/examples/amp-script/empty.js
index 27a2d8950b697..359183ee21192 100644
--- a/examples/amp-script/empty.js
+++ b/examples/amp-script/empty.js
@@ -14,6 +14,4 @@
  * limitations under the License.
  */
 
-
- // Nothing yet.
-
+// Nothing yet.
diff --git a/examples/amp-script/example.sandboxed.amp.html b/examples/amp-script/example.sandboxed.amp.html
new file mode 100644
index 0000000000000..096a6c8b6d089
--- /dev/null
+++ b/examples/amp-script/example.sandboxed.amp.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="self.html" />
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <!-- Token for "amp-script" experiment on "http://localhost:8000" that expires on 1/1/2030. -->
+  <meta name="amp-experiment-token" content="AAAAAFd7Im9yaWdpbiI6Imh0dHA6Ly9sb2NhbGhvc3Q6ODAwMCIsImV4cGVyaW1lbnQiOiJhbXAtc2NyaXB0IiwiZXhwaXJhdGlvbiI6MTg5NjEzNDQwMDAwMH08Wb1WA4ZcsTLNK1pxwXdmfYUlv4ybtfIMw3yS66dZhsJl11JYrTanag4ZlAr4sfBRTVmQfKLsiJq/JJHdrpRzT9M6EQD/JYos1SlohtQiK2YfhvXgN7zot3WBuFkqoxSiyvX/l23UYKSo2ebNTnMDFhI+yrX8uc9BblbYniRtQGXBPktjJUIgavEBS5t45bgbPNutNvAreYGlz7na4lImrpnNa8K28Ow4hqOxcqqdFoHD9hlwtKlpydJQpEmtM+S+jdDLKWq6JtC+HoUSovuitrqkioJ4cfuVkFqtoaKWPLXSOwoc5UJl3zNjlTjvQ/Gnk33NdWs6/FtZbxCq+lWe">
+  <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>
+    h1 {
+      font-size: 1.2em;
+    }
+    button, input {
+      border: solid 1px black;
+    }
+    amp-script {
+      border: dotted 1px orangered;
+      margin: 5px;
+      padding: 5px;
+    }
+  </style>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
+  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+</head>
+<body>
+  <h1>Example: Demo</h1>
+  <!-- Note: sandboxed amp-script do not require CSP hashes. -->
+  <amp-script sandboxed layout=container src="/examples/amp-script/export-functions.js"></amp-script>
+</body>
+</html>
diff --git a/examples/amp-script/export-functions.js b/examples/amp-script/export-functions.js
new file mode 100644
index 0000000000000..b6306ae8962be
--- /dev/null
+++ b/examples/amp-script/export-functions.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright 2021 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.
+ */
+
+exportFunction('getData', () => ({data: true}));
diff --git a/examples/amp-script/todomvc.ssr.js b/examples/amp-script/todomvc.ssr.js
index 965333a9c057e..c42817335089b 100644
--- a/examples/amp-script/todomvc.ssr.js
+++ b/examples/amp-script/todomvc.ssr.js
@@ -1,2 +1,3 @@
+/* eslint-disable */
 !function(){"use strict";function e(e,t,n){this.nodeName=e,this.attributes=t,this.children=n,this.key=t&&t.key}function t(t,n){var o=[],r=void 0,i=void 0,l=void 0,a=void 0;for(a=arguments.length;a-- >2;)K.push(arguments[a]);for(n&&n.children&&(K.length||K.push(n.children),delete n.children);K.length;)if((i=K.pop())instanceof Array)for(a=i.length;a--;)K.push(i[a]);else null!=i&&i!==!1&&("number"!=typeof i&&i!==!0||(i+=""),l="string"==typeof i,l&&r?o[o.length-1]+=i:(o.push(i),r=l));var s=new e(t,n||void 0,o);return z.vnode&&z.vnode(s),s}function n(e,t){if(t)for(var n in t)e[n]=t[n];return e}function o(e){return n({},e)}function r(e,t){for(var n=t.split("."),o=0;o<n.length&&e;o++)e=e[n[o]];return e}function i(e){return"function"==typeof e}function l(e){return"string"==typeof e}function a(e){var t="";for(var n in e)e[n]&&(t&&(t+=" "),t+=n);return t}function s(e,t,n){var o=t.split(".");return function(t){for(var i=t&&t.target||this,a={},s=a,c=l(n)?r(t,n):i.nodeName?i.type.match(/^che|rad/)?i.checked:i.value:t,u=0;u<o.length-1;u++)s=s[o[u]]||(s[o[u]]=!u&&e.state[o[u]]||{});s[o[u]]=c,e.setState(a)}}function c(e){!e._dirty&&(e._dirty=!0)&&1==ee.push(e)&&(z.debounceRendering||F)(u)}function u(){var e=void 0,t=ee;for(ee=[];e=t.pop();)e._dirty&&O(e)}function d(e){var t=e&&e.nodeName;return t&&i(t)&&!(t.prototype&&t.prototype.render)}function f(e,t){return e.nodeName(m(e),t||X)}function p(e,t){return l(t)?e instanceof Text:l(t.nodeName)?!e._componentConstructor&&h(e,t.nodeName):i(t.nodeName)?!e._componentConstructor||e._componentConstructor===t.nodeName||d(t):void 0}function h(e,t){return e.normalizedNodeName===t||H(e.nodeName)===H(t)}function m(e){var t=o(e.attributes);t.children=e.children;var n=e.nodeName.defaultProps;if(n)for(var r in n)void 0===t[r]&&(t[r]=n[r]);return t}function v(e){var t=e.parentNode;t&&t.removeChild(e)}function y(e,t,n,o,r){if("className"===t&&(t="class"),"class"===t&&o&&"object"===(void 0===o?"undefined":te(o))&&(o=a(o)),"key"===t);else if("class"!==t||r)if("style"===t){if((!o||l(o)||l(n))&&(e.style.cssText=o||""),o&&"object"===(void 0===o?"undefined":te(o))){if(!l(n))for(var s in n)s in o||(e.style[s]="");for(var c in o)e.style[c]="number"!=typeof o[c]||Z[c]?o[c]:o[c]+"px"}}else if("dangerouslySetInnerHTML"===t)e.innerHTML=o&&o.__html||"";else if("o"==t[0]&&"n"==t[1]){var u=e._listeners||(e._listeners={});t=H(t.substring(2)),o?u[t]||e.addEventListener(t,b,!!$[t]):u[t]&&e.removeEventListener(t,b,!!$[t]),u[t]=o}else if("list"!==t&&"type"!==t&&!r&&t in e)g(e,t,null==o?"":o),null!=o&&o!==!1||e.removeAttribute(t);else{var d=r&&t.match(/^xlink\:?(.+)/);null==o||o===!1?d?e.removeAttributeNS("http://www.w3.org/1999/xlink",H(d[1])):e.removeAttribute(t):"object"===(void 0===o?"undefined":te(o))||i(o)||(d?e.setAttributeNS("http://www.w3.org/1999/xlink",H(d[1]),o):e.setAttribute(t,o))}else e.className=o||""}function g(e,t,n){try{e[t]=n}catch(e){}}function b(e){return this._listeners[e.type](z.event&&z.event(e)||e)}function _(e){if(v(e),e instanceof Element){e._component=e._componentConstructor=null;var t=e.normalizedNodeName||H(e.nodeName);(le[t]||(le[t]=[])).push(e)}}function C(e,t){var n=H(e),o=le[n]&&le[n].pop()||(t?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e));return o.normalizedNodeName=n,o}function w(){for(var e=void 0;e=ae.pop();)z.afterMount&&z.afterMount(e),e.componentDidMount&&e.componentDidMount()}function x(e,t,n,o,r,i){se++||(ce=r instanceof SVGElement,ue=e&&!(Y in e));var l=S(e,t,n,o);return r&&l.parentNode!==r&&r.appendChild(l),--se||(ue=!1,i||w()),l}function S(e,t,n,o){for(var r=t&&t.attributes;d(t);)t=f(t,n);if(null==t&&(t=""),l(t))return e&&e instanceof Text?e.nodeValue!=t&&(e.nodeValue=t):(e&&k(e),e=document.createTextNode(t)),e[Y]=!0,e;if(i(t.nodeName))return A(e,t,n,o);var a=e,s=t.nodeName+"",c=ce,u=t.children;if(ce="svg"===s||"foreignObject"!==s&&ce,e){if(!h(e,s)){for(a=C(s,ce);e.firstChild;)a.appendChild(e.firstChild);e.parentNode&&e.parentNode.replaceChild(a,e),k(e)}}else a=C(s,ce);var p=a.firstChild,m=a[Y];if(!m){a[Y]=m={};for(var v=a.attributes,y=v.length;y--;)m[v[y].name]=v[y].value}return T(a,t.attributes,m),!ue&&u&&1===u.length&&"string"==typeof u[0]&&p&&p instanceof Text&&!p.nextSibling?p.nodeValue!=u[0]&&(p.nodeValue=u[0]):(u&&u.length||p)&&N(a,u,n,o),r&&"function"==typeof r.ref&&(m.ref=r.ref)(a),ce=c,a}function N(e,t,n,o){var r=e.childNodes,i=[],l={},a=0,s=0,c=r.length,u=0,d=t&&t.length,f=void 0,h=void 0,m=void 0,y=void 0;if(c)for(var g=0;g<c;g++){var b=r[g],_=b[Y],C=d?(h=b._component)?h.__key:_?_.key:null:null;null!=C?(a++,l[C]=b):(ue||_)&&(i[u++]=b)}if(d)for(var w=0;w<d;w++){m=t[w],y=null;var x=m.key;if(null!=x)a&&x in l&&(y=l[x],l[x]=void 0,a--);else if(!y&&s<u)for(f=s;f<u;f++)if(h=i[f],h&&p(h,m)){y=h,i[f]=void 0,f===u-1&&u--,f===s&&s++;break}y=S(y,m,n,o),y&&y!==e&&(w>=c?e.appendChild(y):y!==r[w]&&(y===r[w+1]&&v(r[w]),e.insertBefore(y,r[w]||null)))}if(a)for(var N in l)l[N]&&k(l[N]);for(;s<=u;)y=i[u--],y&&k(y)}function k(e,t){var n=e._component;if(n)P(n,!t);else{e[Y]&&e[Y].ref&&e[Y].ref(null),t||_(e);for(var o=void 0;o=e.lastChild;)k(o,t)}}function T(e,t,n){for(var o in n)t&&o in t||null==n[o]||y(e,o,n[o],n[o]=void 0,ce);if(t)for(var r in t)"children"===r||"innerHTML"===r||r in n&&t[r]===("value"===r||"checked"===r?e[r]:n[r])||y(e,r,n[r],n[r]=t[r],ce)}function D(e){var t=e.constructor.name,n=de[t];n?n.push(e):de[t]=[e]}function U(e,t,n){var o=new e(t,n),r=de[e.name];if(B.call(o,t,n),r)for(var i=r.length;i--;)if(r[i].constructor===e){o.nextBase=r[i].nextBase,r.splice(i,1);break}return o}function E(e,t,n,o,r){e._disable||(e._disable=!0,(e.__ref=t.ref)&&delete t.ref,(e.__key=t.key)&&delete t.key,!e.base||r?e.componentWillMount&&e.componentWillMount():e.componentWillReceiveProps&&e.componentWillReceiveProps(t,o),o&&o!==e.context&&(e.prevContext||(e.prevContext=e.context),e.context=o),e.prevProps||(e.prevProps=e.props),e.props=t,e._disable=!1,n!==G&&(n!==J&&z.syncComponentUpdates===!1&&e.base?c(e):O(e,J,r)),e.__ref&&e.__ref(e))}function O(e,t,r,l){if(!e._disable){var a=void 0,s=void 0,c=e.props,u=e.state,p=e.context,h=e.prevProps||c,v=e.prevState||u,y=e.prevContext||p,g=e.base,b=e.nextBase,_=g||b,C=e._component,S=void 0,N=void 0;if(g&&(e.props=h,e.state=v,e.context=y,t!==q&&e.shouldComponentUpdate&&e.shouldComponentUpdate(c,u,p)===!1?a=!0:e.componentWillUpdate&&e.componentWillUpdate(c,u,p),e.props=c,e.state=u,e.context=p),e.prevProps=e.prevState=e.prevContext=e.nextBase=null,e._dirty=!1,!a){for(e.render&&(s=e.render(c,u,p)),e.getChildContext&&(p=n(o(p),e.getChildContext()));d(s);)s=f(s,p);var T=s&&s.nodeName,D=void 0,A=void 0;if(i(T)){var B=m(s);S=C,S&&S.constructor===T&&B.key==S.__key?E(S,B,J,p):(D=S,S=U(T,B,p),S.nextBase=S.nextBase||b,S._parentComponent=e,e._component=S,E(S,B,G,p),O(S,J,r,!0)),A=S.base}else N=_,D=C,D&&(N=e._component=null),(_||t===J)&&(N&&(N._component=null),A=x(N,s,p,r||!g,_&&_.parentNode,!0));if(_&&A!==_&&S!==C){var j=_.parentNode;j&&A!==j&&(j.replaceChild(A,_),D||(_._component=null,k(_)))}if(D&&P(D,A!==_),e.base=A,A&&!l){for(var M=e,W=e;W=W._parentComponent;)(M=W).base=A;A._component=M,A._componentConstructor=M.constructor}}!g||r?ae.unshift(e):a||(e.componentDidUpdate&&e.componentDidUpdate(h,v,y),z.afterUpdate&&z.afterUpdate(e));var L=e._renderCallbacks,R=void 0;if(L)for(;R=L.pop();)R.call(e);se||l||w()}}function A(e,t,n,o){for(var r=e&&e._component,i=e,l=r&&e._componentConstructor===t.nodeName,a=l,s=m(t);r&&!a&&(r=r._parentComponent);)a=r.constructor===t.nodeName;return r&&a&&(!o||r._component)?(E(r,s,Q,n,o),e=r.base):(r&&!l&&(P(r,!0),e=i=null),r=U(t.nodeName,s,n),e&&!r.nextBase&&(r.nextBase=e,i=null),E(r,s,J,n,o),e=r.base,i&&e!==i&&(i._component=null,k(i))),e}function P(e,t){z.beforeUnmount&&z.beforeUnmount(e);var n=e.base;e._disable=!0,e.componentWillUnmount&&e.componentWillUnmount(),e.base=null;var o=e._component;if(o)P(o,t);else if(n){n[Y]&&n[Y].ref&&n[Y].ref(null),e.nextBase=n,t&&(v(n),D(e));for(var r=void 0;r=n.lastChild;)k(r,!t)}e.__ref&&e.__ref(null),e.componentDidUnmount&&e.componentDidUnmount()}function B(e,t){this._dirty=!0,this.context=t,this.props=e,this.state||(this.state={})}function j(e,t,n){return x(n,e,{},!1,t)}function M(){for(var e="",t=0;t<32;t++){var n=16*Math.random()|0;8!==t&&12!==t&&16!==t&&20!==t||(e+="-"),e+=(12===t?4:16===t?3&n|8:n).toString(16)}return e}function W(e,t){return 1===e?t:t+"s"}function L(e,t){if(t)return localStorage[e]=JSON.stringify(t);var n=localStorage[e];return n&&JSON.parse(n)||[]}function R(e,t){return j(e,t,t.firstElementChild)}var z={},K=[],V={},H=function(e){return V[e]||(V[e]=e.toLowerCase())},I="undefined"!=typeof Promise&&Promise.resolve(),F=I?function(e){I.then(e)}:setTimeout,G=0,J=1,q=2,Q=3,X={},Y="undefined"!=typeof Symbol?Symbol.for("preactattr"):"__preactattr_",Z={boxFlex:1,boxFlexGroup:1,columnCount:1,fillOpacity:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,fontWeight:1,lineClamp:1,lineHeight:1,opacity:1,order:1,orphans:1,strokeOpacity:1,widows:1,zIndex:1,zoom:1},$={blur:1,error:1,focus:1,load:1,resize:1,scroll:1},ee=[],te="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},ne=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},oe=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},re=function(e){if(null==e)throw new TypeError("Cannot destructure undefined")},ie=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},le={},ae=[],se=0,ce=!1,ue=!1,de={};n(B.prototype,{linkState:function(e,t){var n=this._linkedStates||(this._linkedStates={});return n[e+t]||(n[e+t]=s(this,e,t))},setState:function(e,t){var r=this.state;this.prevState||(this.prevState=o(r)),n(r,i(e)?e(r,this.props):e),t&&(this._renderCallbacks=this._renderCallbacks||[]).push(t),c(this)},forceUpdate:function(){O(this,q)},render:function(){}});var fe=function(){function e(e,t){this.key=e,this.todos=L(e)||[],this.onChanges=[t]}return e.prototype.inform=function(){L(this.key,this.todos),this.onChanges.forEach(function(e){return e()})},e.prototype.addTodo=function(e){this.todos=this.todos.concat({id:M(),title:e,completed:!1}),this.inform()},e.prototype.toggleAll=function(e){this.todos=this.todos.map(function(t){return ne({},t,{completed:e})}),this.inform()},e.prototype.toggle=function(e){this.todos=this.todos.map(function(t){return t!==e?t:ne({},t,{completed:!t.completed})}),this.inform()},e.prototype.destroy=function(e){this.todos=this.todos.filter(function(t){return t!==e}),this.inform()},e.prototype.save=function(e,t){this.todos=this.todos.map(function(n){return n!==e?n:ne({},n,{title:t})}),this.inform()},e.prototype.clearCompleted=function(){this.todos=this.todos.filter(function(e){return!e.completed}),this.inform()},e}(),pe=function(e){function n(){return ie(this,e.apply(this,arguments))}return oe(n,e),n.prototype.render=function(e){var n=e.nowShowing,o=e.count,r=e.completedCount,i=e.onClearCompleted;return t("footer",{class:"footer"},t("span",{class:"todo-count"},t("strong",null,o)," ",W(o,"item")," left"),t("ul",{class:"filters"},t("li",null,t("a",{href:"#/",class:"all"==n&&"selected"},"All"))," ",t("li",null,t("a",{href:"#/active",class:"active"==n&&"selected"},"Active"))," ",t("li",null,t("a",{href:"#/completed",class:"completed"==n&&"selected"},"Completed"))),r>0&&t("button",{class:"clear-completed",onClick:i},"Clear completed"))},n}(B),he=27,me=13,ve=function(e){function n(){for(var t,n,o,r=arguments.length,i=Array(r),l=0;l<r;l++)i[l]=arguments[l];return t=n=ie(this,e.call.apply(e,[this].concat(i))),n.handleSubmit=function(){var e=n.props,t=e.onSave,o=e.onDestroy,r=e.todo,i=n.state.editText.trim();i?(t(r,i),n.setState({editText:i})):o(r)},n.handleEdit=function(){var e=n.props,t=e.onEdit,o=e.todo;t(o),n.setState({editText:o.title})},n.toggle=function(e){var t=n.props;(0,t.onToggle)(t.todo),e.preventDefault()},n.handleKeyDown=function(e){if(e.which===he){var t=n.props.todo;n.setState({editText:t.title}),n.props.onCancel(t)}else e.which===me&&n.handleSubmit()},n.handleDestroy=function(){n.props.onDestroy(n.props.todo)},o=t,ie(n,o)}return oe(n,e),n.prototype.componentDidUpdate=function(){var e=this.base&&this.base.querySelector(".edit");e&&e.focus()},n.prototype.render=function(e,n){var o=e.todo,r=o.title,i=o.completed,l=e.editing,a=n.editText;return t("li",{class:{completed:i,editing:l}},t("div",{class:"view"},t("input",{class:"toggle",type:"checkbox",checked:i,onChange:this.toggle}),t("label",{onDblClick:this.handleEdit},r),t("button",{class:"destroy",onClick:this.handleDestroy})),l&&t("input",{class:"edit",value:a,onBlur:this.handleSubmit,onInput:this.linkState("editText"),onKeyDown:this.handleKeyDown}))},n}(B),ye={all:function(){return!0},active:function(e){return!e.completed},completed:function(e){return e.completed}};R(t(function(e){function n(){var t=ie(this,e.call(this));return t.handleNewTodoKeyDown=function(e){if(13===e.keyCode){e.preventDefault();var n=t.state.newTodo.trim();n&&(t.model.addTodo(n),t.setState({newTodo:""}))}},t.toggleAll=function(e){t.model.toggleAll(e.target.checked)},t.toggle=function(e){t.model.toggle(e)},t.destroy=function(e){t.model.destroy(e)},t.edit=function(e){t.setState({editing:e.id})},t.save=function(e,n){t.model.save(e,n),t.setState({editing:null})},t.cancel=function(){t.setState({editing:null})},t.clearCompleted=function(){t.model.clearCompleted()},t.model=new fe("preact-todos",function(){return t.setState({})}),addEventListener("hashchange",t.handleRoute.bind(t)),t.handleRoute(),t}return oe(n,e),n.prototype.handleRoute=function(){var e=((location.hash||"")+"").split("/").pop();ye[e]||(e="all"),this.setState({nowShowing:e})},n.prototype.render=function(e,n){var o=this,r=n.nowShowing,i=void 0===r?ALL_TODOS:r,l=n.newTodo,a=n.editing;re(e);var s=this.model.todos,c=s.filter(ye[i]),u=s.reduce(function(e,t){return e+(t.completed?0:1)},0),d=s.length-u;return t("div",null,t("header",{class:"header"},t("h1",null,"todos"),t("input",{class:"new-todo",placeholder:"What needs to be done?",value:l,onKeyDown:this.handleNewTodoKeyDown,onInput:this.linkState("newTodo"),autoFocus:!0})),s.length?t("section",{class:"main"},t("input",{class:"toggle-all",type:"checkbox",onChange:this.toggleAll,checked:0===u}),t("ul",{class:"todo-list"},c.map(function(e){return t(ve,{todo:e,onToggle:o.toggle,onDestroy:o.destroy,onEdit:o.edit,editing:a===e.id,onSave:o.save,onCancel:o.cancel})}))):null,u||d?t(pe,{count:u,completedCount:d,nowShowing:i,onClearCompleted:this.clearCompleted}):null)},n}(B),null),document.body)}();
 //# sourceMappingURL=app.js.map
\ No newline at end of file
diff --git a/examples/amp-script/vue-todomvc.js b/examples/amp-script/vue-todomvc.js
index 1ce37ce02c380..d6476aa13b84a 100644
--- a/examples/amp-script/vue-todomvc.js
+++ b/examples/amp-script/vue-todomvc.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
 /*!
  * Vue.js v2.6.10
  * (c) 2014-2019 Evan You
diff --git a/examples/amp-skimlinks.html b/examples/amp-skimlinks.html
index baa16bab958b5..1e318f2453bf1 100644
--- a/examples/amp-skimlinks.html
+++ b/examples/amp-skimlinks.html
@@ -8,7 +8,6 @@
     <meta name="amp-ad-enable-refresh" content="doubleclick=30">
     <meta name="amp-link-variable-allowed-origin" content="https://skimjs-e2e-resources.storage.googleapis.com http://test-merchant.skimlinks.com">
     <meta name="amp-link-rewriter-priorities" content="amp-skimlinks amp-other-affiliate">
-    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
     <script async custom-element="amp-skimlinks" src="/dist/v0/amp-skimlinks-0.1.max.js"></script>
     <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
     <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
diff --git a/examples/amp-story-auto-ads.amp.html b/examples/amp-story-auto-ads.amp.html
deleted file mode 100644
index f2ff37d7d1b65..0000000000000
--- a/examples/amp-story-auto-ads.amp.html
+++ /dev/null
@@ -1,214 +0,0 @@
-<!DOCTYPE html>
-<html amp>
-<head>
-  <meta charset="utf-8">
-  <title>amp-story</title>
-  <link rel="canonical" href="animations-presets.html">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
-  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
-  <script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <style amp-custom>
-    body {
-      font-family: sans-serif;
-    }
-    h1 {
-      font-family: Menlo, Monaco, monospace;
-      font-weight: bold;
-      font-size: 24px;
-      width: 100%;
-      text-align: left;
-    }
-    amp-story-page {
-      background: #ddd;
-    }
-    amp-story-grid-layer {
-      justify-items: center;
-    }
-    .square,
-    .circle {
-      background: #4285f4;
-      width: 80px;
-      height: 80px;
-    }
-    .circle {
-      border-radius: 80px;
-    }
-    .fill-img img {
-      object-fit: cover;
-    }
-    </style>
-</head>
-<body>
-  <amp-analytics>
-    <script type="application/json">
-      {
-        "transport": {
-          "beacon": false,
-          "xhrpost": false,
-          "image": true
-        },
-        "requests": {
-          "endpoint": "https://www.example.com",
-          "base": "${endpoint}?id=${adId}zx=${timestamp}"
-        },
-        "triggers": {
-          "storyAdRequest": {
-            "on": "story-ad-request",
-            "request": "base",
-            "extraUrlParams": {"amp_stads": "request"}
-          },
-          "storyAdLoad": {
-            "on": "story-ad-load",
-            "request": "base",
-            "extraUrlParams": {"amp_stads": "load"}
-          },
-          "storyAdInsert": {
-            "on": "story-ad-insert",
-            "request": "base",
-            "extraUrlParams": {"amp_stads": "insert"}
-          },
-          "storyAdView": {
-            "on": "story-ad-view",
-            "request": "base",
-            "extraUrlParams": {"amp_stads": "view"}
-          },
-          "storyAdClick": {
-            "on": "story-ad-click",
-            "request": "base",
-            "extraUrlParams": {"amp_stads": "click"}
-          },
-          "storyAdExit": {
-            "on": "story-ad-exit",
-            "request": "base",
-            "extraUrlParams": {"amp_stads": "exit"}
-          },
-          "storyAdDestroy": {
-            "on": "story-ad-discard",
-            "request": "base",
-            "extraUrlParams": {"amp_stads": "discard"}
-          }
-        }
-      }
-    </script>
-  </amp-analytics>
-  <amp-story standalone>
-    <amp-story-auto-ads>
-      <script type="application/json">
-        {
-            "ad-attributes": {
-              "type": "custom",
-              "data-url": "./amp-story-auto-ads-payload.json"
-            }
-        }
-      </script>
-
-      <template type="amp-mustache" id="template-1">
-        <amp-img class="fill-img" layout="fill" src="{{imgSrc}}"></amp-img>
-      </template>
-    </amp-story-auto-ads>
-
-    <amp-story-page id="fade-in-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>fade-in</h1>
-        <div class="circle"
-            animate-in="fade-in"
-            animate-in-duration="0.8s">
-        </div>
-      </amp-story-grid-layer>
-    </amp-story-page>
-
-    <amp-story-page id="twirl-in-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>twirl-in</h1>
-        <div class="square"
-            animate-in="twirl-in">
-        </div>
-      </amp-story-grid-layer>
-    </amp-story-page>
-
-    <amp-story-page id="fly-in-left-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>fly-in-left</h1>
-        <div class="square"
-            animate-in="fly-in-left">
-        </div>
-      </amp-story-grid-layer>
-    </amp-story-page>
-
-    <amp-story-page id="fly-in-right-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>fly-in-right</h1>
-        <div class="square"
-            animate-in="fly-in-right">
-        </div>
-      </amp-story-grid-layer>
-    </amp-story-page>
-
-    <amp-story-page id="fly-in-top-page" next-page-no-ad>
-      <amp-story-grid-layer template="vertical">
-        <h1>fly-in-top</h1>
-        <div class="square"
-            animate-in="fly-in-top">
-        </div>
-      </amp-story-grid-layer>
-    </amp-story-page>
-
-    <amp-story-page id="fly-in-bottom-page" next-page-no-ad>
-      <amp-story-grid-layer template="vertical">
-        <h1>fly-in-bottom</h1>
-        <div class="square"
-            animate-in="fly-in-bottom">
-        </div>
-      </amp-story-grid-layer>
-    </amp-story-page>
-
-    <amp-story-page id="rotate-in-left-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>rotate-in-left</h1>
-        <div class="square"
-            animate-in="rotate-in-left">
-        </div>
-      </amp-story-grid-layer>
-    </amp-story-page>
-
-    <amp-story-page id="rotate-in-right-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>rotate-in-right</h1>
-        <div class="square"
-            animate-in="rotate-in-right">
-        </div>
-      </amp-story-grid-layer>
-    </amp-story-page>
-
-    <amp-story-page id="drop-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>drop-in</h1>
-        <div class="circle"
-             animate-in="drop">
-        </div>
-      </amp-story-grid-layer>
-    </amp-story-page>
-
-    <amp-story-page id="whoosh-in-left-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>whoosh-in-left</h1>
-        <div class="square"
-            animate-in="whoosh-in-left">
-        </div>
-      </amp-story-grid-layer>
-    </amp-story-page>
-
-    <amp-story-page id="whoosh-in-right-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>whoosh-in-right</h1>
-        <div class="square"
-            animate-in="whoosh-in-right">
-        </div>
-      </amp-story-grid-layer>
-    </amp-story-page>
-  </amp-story>
-</body>
-</html>
diff --git a/examples/amp-story.0.1.amp.html b/examples/amp-story.0.1.amp.html
deleted file mode 100644
index 0e5e436a74a51..0000000000000
--- a/examples/amp-story.0.1.amp.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!doctype html>
-<html ⚡>
-
-<head>
-  <meta charset="utf-8">
-  <title>amp-story</title>
-  <link rel="canonical" href="amp-story.html">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
-  <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>
-</head>
-
-<body>
-  <amp-story></amp-story>
-</body>
-</html>
diff --git a/examples/amp-story/ad-development.html b/examples/amp-story/ad-development.html
index eb96aa9c0a427..6a199d377a9a7 100644
--- a/examples/amp-story/ad-development.html
+++ b/examples/amp-story/ad-development.html
@@ -59,19 +59,19 @@ <h1>Fake ads served locally</h1>
           <h1>two Page</h1>
         </amp-story-grid-layer>
       </amp-story-page>
-      
+
       <amp-story-page id="three">
         <amp-story-grid-layer template="vertical">
           <h1>three Page</h1>
         </amp-story-grid-layer>
       </amp-story-page>
-      
+
       <amp-story-page id="four">
         <amp-story-grid-layer template="vertical">
           <h1>four Page</h1>
         </amp-story-grid-layer>
       </amp-story-page>
-      
+
       <amp-story-page id="five">
         <amp-story-grid-layer template="vertical">
           <h1>five Page</h1>
@@ -143,9 +143,6 @@ <h1>fifteen Page</h1>
           <h1>sixteen Page</h1>
         </amp-story-grid-layer>
       </amp-story-page>
-
-      <amp-story-bookend src="../../examples/amp-story/bookendv1.json" layout="nodisplay">
-      </amp-story-bookend>
     </amp-story>
   </body>
 </html>
diff --git a/examples/amp-story/advance-after-background-audio.html b/examples/amp-story/advance-after-background-audio.html
new file mode 100644
index 0000000000000..a727d94fb8189
--- /dev/null
+++ b/examples/amp-story/advance-after-background-audio.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8">
+    <meta name="robots" content="none">
+    <title>QA Story</title>
+    <link rel="canonical" href="navigation.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js" nonce="1Cj0hIrd7TASSx52tMxlmQ"></script>
+    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js" nonce="1Cj0hIrd7TASSx52tMxlmQ"></script>
+    <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js" nonce="1Cj0hIrd7TASSx52tMxlmQ"></script>
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" nonce="1Cj0hIrd7TASSx52tMxlmQ">
+    <style type="text/css" amp-custom>
+      amp-story-page {
+        background: rgb(147, 218, 33);
+        background: radial-gradient(circle, rgb(53, 170, 23, 1) 0%, rgba(171, 148, 233, 1) 100%);
+      }
+      .text {
+        font-family: 'Roboto', sans-serif;
+        color: rgba(255, 255, 255, 0.87);
+        align-content: end;
+      }
+    </style>
+  </head>
+  <body>
+    <amp-story
+        standalone
+        title="QA Story"
+        publisher="AMP Story team"
+        publisher-logo-src="assets/logo.png"
+        poster-portrait-src="assets/poster.jpg">
+
+      <amp-story-page id="page1" auto-advance-after="page1" background-audio="./video/p1.mp4">
+        <amp-story-grid-layer template="vertical" class="text">
+          <span>auto-advance after background-audio</span>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page2" background-audio="./video/p1.mp4">
+        <amp-story-grid-layer template="vertical" class="text">
+          <span>background-audio</span>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/affiliate-link.html b/examples/amp-story/affiliate-link.html
index 0a359905df966..1e1407348fa86 100644
--- a/examples/amp-story/affiliate-link.html
+++ b/examples/amp-story/affiliate-link.html
@@ -41,16 +41,16 @@ <h1>Hello World</h1>
       </amp-story-page>
 
       <amp-story-page id="page-1">
-        <amp-story-grid-layer template="vertical">            
+        <amp-story-grid-layer template="vertical">
           <h1>First Page</h1>
-          <p>This is the first page of this story.</p>          
-        </amp-story-grid-layer>        
+          <p>This is the first page of this story.</p>
+        </amp-story-grid-layer>
       </amp-story-page>
 
       <amp-story-page id="page-2">
-          <amp-story-grid-layer template="vertical">            
+          <amp-story-grid-layer template="vertical">
               <h1>Second Page</h1>
-              <p>This is the second page of this story.</p>          
+              <p>This is the second page of this story.</p>
             </amp-story-grid-layer>
             <amp-story-grid-layer template="horizontal" style="padding-top: 260px">
               <amp-img
@@ -62,17 +62,17 @@ <h1>Second Page</h1>
               </amp-img>
               <a id="blink-1" href="https://amp.dev" role="link" target="_blank" affiliate-link-icon="shopping-cart">
                 amp.devamp.devamp.devamp.devamp.devamp.dev
-              </a>              
+              </a>
             </amp-story-grid-layer>
             <amp-story-grid-layer template="horizontal" style="padding-top: 450px">
               <a id="blink-2" href="https://amp.dev" role="link" target="_blank" affiliate-link-icon="flight">
                 amp.devamp.devamp.devamp.devamp.devamp.dev
-              </a>  
+              </a>
             </amp-story-grid-layer>
         </amp-story-page>
 
         <amp-story-page id="page-3">
-          <amp-story-grid-layer template="vertical">            
+          <amp-story-grid-layer template="vertical">
             <h1>Third Page</h1>
             <a id="blink-3" href="https://amp.dev" role="link" target="_blank" affiliate-link-icon="shopping-cart">
               amp.devamp.devamp.devamp.devamp.devamp.dev
@@ -95,7 +95,7 @@ <h1>Third Page</h1>
             <a id="blink-9" href="https://amp.dev" role="link" target="_blank" affiliate-link-icon="more-to-read">
               amp.devamp.devamp.devamp.devamp.devamp.dev
             </a>
-          </amp-story-grid-layer>        
+          </amp-story-grid-layer>
         </amp-story-page>
     </amp-story>
     <amp-analytics>
diff --git a/examples/amp-story/amp-audio.html b/examples/amp-story/amp-audio.html
new file mode 100644
index 0000000000000..6b0ee35e9c184
--- /dev/null
+++ b/examples/amp-story/amp-audio.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8">
+    <meta name="robots" content="none">
+    <title>QA Story</title>
+    <link rel="canonical" href="navigation.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js" nonce="1Cj0hIrd7TASSx52tMxlmQ"></script>
+    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js" nonce="1Cj0hIrd7TASSx52tMxlmQ"></script>
+    <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js" nonce="1Cj0hIrd7TASSx52tMxlmQ"></script>
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" nonce="1Cj0hIrd7TASSx52tMxlmQ">
+    <style type="text/css" amp-custom>
+      amp-story-page {
+        background: rgb(147, 218, 33);
+        background: radial-gradient(circle, rgb(53, 170, 23, 1) 0%, rgba(171, 148, 233, 1) 100%);
+      }
+
+      .text {
+        font-family: 'Roboto', sans-serif;
+        color: rgba(255, 255, 255, 0.87);
+        align-content: end;
+      }
+    </style>
+  </head>
+  <body>
+    <amp-story
+        standalone
+        title="QA Story"
+        publisher="AMP Story team"
+        publisher-logo-src="assets/logo.png"
+        poster-portrait-src="assets/poster.jpg">
+
+      <amp-story-page id="page1" auto-advance-after="audio0">
+        <amp-story-grid-layer template="vertical" class="text">
+          <amp-audio autoplay id="audio0" layout="nodisplay">
+            <source type="video/mp4" src="./video/p1.mp4" />
+          </amp-audio>
+          <span>auto-advance after amp-audio</span>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page2">
+        <amp-story-grid-layer template="vertical" class="text">
+          <amp-audio autoplay id="audio1" layout="nodisplay">
+            <source type="video/mp4" src="./video/p1.mp4" />
+          </amp-audio>
+          <span>amp-story-page using amp-audio</span>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/amp-story-360.html b/examples/amp-story/amp-story-360.html
new file mode 100644
index 0000000000000..306c8edec527d
--- /dev/null
+++ b/examples/amp-story/amp-story-360.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8">
+    <title>amp-story-360 Example</title>
+    <link rel="canonical" href="example.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <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-360" src="https://cdn.ampproject.org/v0/amp-story-360-0.1.js"></script>
+    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  </head>
+  <body>
+    <amp-story
+        standalone
+        title="Demo Story"
+        publisher="AMP Story"
+        publisher-logo-src="example.com/logo.png"
+        poster-portrait-src="example.com/poster.jpg">
+      <amp-story-page id="cover">
+        <amp-story-grid-layer template="fill">
+          <amp-story-360 layout="fill" heading-start="30" pitch-start="20" heading-end="-20" pitch-end="10" duration="5s" controls="gyroscope">
+            <amp-video poster="img/nasa_training_poster.jpg" autoplay layout="fill" loop>
+              <!-- Credit: NASA -->
+              <!-- https://commons.wikimedia.org/wiki/File:NASA_VR-360_Astronaut_Training-_Space_Walk.webm -->
+              <source src="img/NASA_VR_360_Astronaut_Training_Space_Walk_Clip.mp4" type="video/mp4" />
+            </amp-video>
+          </amp-story-360>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <amp-story-page id="page1">
+        <amp-story-grid-layer template="fill">
+          <amp-story-360 layout="fill" heading-end="50" pitch-end="-5" heading-start="115" pitch-start="10" duration="3s" controls="gyroscope"
+          scene-pitch="-5">
+            <!-- Curiosity self-portrat, Sol 1462 (September 2016) Credit: NASA / JPL / MSSS / Seán Doran -->
+            <!-- https://informal.jpl.nasa.gov/museum/360-video -->
+            <amp-img src="img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg" width="1998" height="999" title="Curiosity self-portrait"></amp-img>
+          </amp-story-360>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <amp-story-page id="page2">
+        <amp-story-grid-layer template="fill">
+          <amp-story-360 layout="fill" heading-start="95" pitch-start="-10" heading-end="-60" pitch-end="-20" duration="3s" controls="gyroscope">
+            <amp-img src="img/Equirectangular_projection_SW.jpg" width="2058" height="1036" aria-label="globe"></amp-img>
+          </amp-story-360>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/amp-story-animation.html b/examples/amp-story/amp-story-animation.html
index f40a4746ec42a..61ddcee26419f 100644
--- a/examples/amp-story/amp-story-animation.html
+++ b/examples/amp-story/amp-story-animation.html
@@ -117,11 +117,6 @@
           </script>
         </amp-story-animation>
       </amp-story-page>
-
-      <amp-story-bookend
-        src="bookendv1.json"
-        layout="nodisplay"
-      ></amp-story-bookend>
     </amp-story>
   </body>
 </html>
diff --git a/examples/amp-story-auto-ads-payload.json b/examples/amp-story/amp-story-auto-ads-payload.json
similarity index 100%
rename from examples/amp-story-auto-ads-payload.json
rename to examples/amp-story/amp-story-auto-ads-payload.json
diff --git a/examples/amp-story/amp-story-auto-ads.html b/examples/amp-story/amp-story-auto-ads.html
new file mode 100644
index 0000000000000..ab4738b65c5de
--- /dev/null
+++ b/examples/amp-story/amp-story-auto-ads.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html amp>
+<head>
+  <meta charset="utf-8">
+  <title>amp-story</title>
+  <link rel="canonical" href="animations-presets.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+  <script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <style amp-custom>
+    body {
+      font-family: sans-serif;
+    }
+    h1 {
+      font-family: Menlo, Monaco, monospace;
+      font-weight: bold;
+      font-size: 24px;
+      width: 100%;
+      text-align: left;
+    }
+    amp-story-page {
+      background: #ddd;
+    }
+    amp-story-grid-layer {
+      justify-items: center;
+    }
+    .square,
+    .circle {
+      background: #4285f4;
+      width: 80px;
+      height: 80px;
+    }
+    .circle {
+      border-radius: 80px;
+    }
+    .fill-img img {
+      object-fit: cover;
+    }
+    </style>
+</head>
+<body>
+  <amp-analytics>
+    <script type="application/json">
+      {
+        "transport": {
+          "beacon": false,
+          "xhrpost": false,
+          "image": true
+        },
+        "requests": {
+          "endpoint": "https://www.cool.example",
+          "base": "${endpoint}?id=${adId}zx=${timestamp}"
+        },
+        "triggers": {
+          "storyAdRequest": {
+            "on": "story-ad-request",
+            "request": "base",
+            "extraUrlParams": {"amp_stads": "request"}
+          },
+          "storyAdLoad": {
+            "on": "story-ad-load",
+            "request": "base",
+            "extraUrlParams": {"amp_stads": "load"}
+          },
+          "storyAdInsert": {
+            "on": "story-ad-insert",
+            "request": "base",
+            "extraUrlParams": {"amp_stads": "insert"}
+          },
+          "storyAdView": {
+            "on": "story-ad-view",
+            "request": "base",
+            "extraUrlParams": {"amp_stads": "view"}
+          },
+          "storyAdSwipe": {
+            "on": "story-ad-swipe",
+            "request": "base",
+            "extraUrlParams": {"amp_stads": "swipe"}
+          },
+          "storyAdClick": {
+            "on": "story-ad-click",
+            "request": "base",
+            "extraUrlParams": {"amp_stads": "click"}
+          },
+          "storyAdExit": {
+            "on": "story-ad-exit",
+            "request": "base",
+            "extraUrlParams": {"amp_stads": "exit"}
+          },
+          "storyAdDestroy": {
+            "on": "story-ad-discard",
+            "request": "base",
+            "extraUrlParams": {"amp_stads": "discard"}
+          }
+        }
+      }
+    </script>
+  </amp-analytics>
+  <amp-story standalone>
+    <amp-story-auto-ads>
+      <script type="application/json">
+        {
+            "ad-attributes": {
+              "type": "custom",
+              "data-url": "./amp-story-auto-ads-payload.json"
+            }
+        }
+      </script>
+
+      <template type="amp-mustache" id="template-1">
+        <amp-img class="fill-img" layout="fill" src="{{imgSrc}}"></amp-img>
+      </template>
+    </amp-story-auto-ads>
+
+    <amp-story-page id="fade-in-page">
+      <amp-story-grid-layer template="vertical">
+        <h1>fade-in</h1>
+        <div class="circle"
+            animate-in="fade-in"
+            animate-in-duration="0.8s">
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="twirl-in-page">
+      <amp-story-grid-layer template="vertical">
+        <h1>twirl-in</h1>
+        <div class="square"
+            animate-in="twirl-in">
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="fly-in-left-page">
+      <amp-story-grid-layer template="vertical">
+        <h1>fly-in-left</h1>
+        <div class="square"
+            animate-in="fly-in-left">
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="fly-in-right-page">
+      <amp-story-grid-layer template="vertical">
+        <h1>fly-in-right</h1>
+        <div class="square"
+            animate-in="fly-in-right">
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="fly-in-top-page" next-page-no-ad>
+      <amp-story-grid-layer template="vertical">
+        <h1>fly-in-top</h1>
+        <div class="square"
+            animate-in="fly-in-top">
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="fly-in-bottom-page" next-page-no-ad>
+      <amp-story-grid-layer template="vertical">
+        <h1>fly-in-bottom</h1>
+        <div class="square"
+            animate-in="fly-in-bottom">
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="rotate-in-left-page">
+      <amp-story-grid-layer template="vertical">
+        <h1>rotate-in-left</h1>
+        <div class="square"
+            animate-in="rotate-in-left">
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="rotate-in-right-page">
+      <amp-story-grid-layer template="vertical">
+        <h1>rotate-in-right</h1>
+        <div class="square"
+            animate-in="rotate-in-right">
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="drop-page">
+      <amp-story-grid-layer template="vertical">
+        <h1>drop-in</h1>
+        <div class="circle"
+             animate-in="drop">
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="whoosh-in-left-page">
+      <amp-story-grid-layer template="vertical">
+        <h1>whoosh-in-left</h1>
+        <div class="square"
+            animate-in="whoosh-in-left">
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="whoosh-in-right-page">
+      <amp-story-grid-layer template="vertical">
+        <h1>whoosh-in-right</h1>
+        <div class="square"
+            animate-in="whoosh-in-right">
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/examples/amp-story/amp-story-branching.html b/examples/amp-story/amp-story-branching.html
index bf28ad6e90a50..889e017e83581 100644
--- a/examples/amp-story/amp-story-branching.html
+++ b/examples/amp-story/amp-story-branching.html
@@ -43,10 +43,10 @@
             <script type="application/json">
               {
                 "requests": {
-                  "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/master/examples/img/ampicon.png",
+                  "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png",
                   "base": "${endpoint}?${type|default:foo}&path=${canonicalPath}",
                   "pageView": "${base}?&index=${storyPageIndex}&count=${storyPageCount}&id=${storyPageId}&muted=${storyIsMuted}&progress=${storyProgress}",
-                  "click": "${base}?&index=${storyPageIndex}&id=${storyPageId}&bookendTargetHref=${storyBookendTargetHref}&bookendCardType=${storyBookendComponentType}&bookendCardPosition=${storyBookendComponentPosition}"
+                  "click": "${base}?&index=${storyPageIndex}&id=${storyPageId}"
                 },
                 "triggers": {
                   "trackSideBarOpen": {
diff --git a/examples/amp-story/amp-story-panning-media.html b/examples/amp-story/amp-story-panning-media.html
new file mode 100644
index 0000000000000..3b23614878543
--- /dev/null
+++ b/examples/amp-story/amp-story-panning-media.html
@@ -0,0 +1,390 @@
+<!doctype html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8">
+    <title>amp-story-panning-media example</title>
+    <link rel="canonical" href="example.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <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-panning-media" src="https://cdn.ampproject.org/v0/amp-story-panning-media-0.1.js"></script>
+    <style amp-custom>
+      .text-wrapper {
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .6));
+      }
+      h3 {
+        font-family: 'Poppins', sans-serif;
+        position: absolute;
+        bottom: 40px;
+        left: 40px;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <amp-story
+      standalone
+      title="Demo Story"
+      publisher="AMP Story"
+      publisher-logo-src="example.com/logo.png"
+      poster-portrait-src="example.com/poster.jpg"
+    >
+      <!-- coordinates example -->
+      <amp-story-page id="painting-1">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media layout="fill">
+            <amp-img
+              layout="fill"
+              width="4000"
+              height="3059"
+              src="img/conservatory-coords.jpg"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>Default</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="painting-2">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media layout="fill" x="-50%" y="-50%">
+            <amp-img
+              layout="fill"
+              width="4000"
+              height="3059"
+              src="img/conservatory-coords.jpg"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>x="-50%" y="-50%"</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="painting-3">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media layout="fill" y="-50%">
+            <amp-img
+              layout="fill"
+              width="4000"
+              height="3059"
+              src="img/conservatory-coords.jpg"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>y="-50%"</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="painting-4">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media layout="fill" x="50%" y="-50%">
+            <amp-img
+              layout="fill"
+              width="4000"
+              height="3059"
+              src="img/conservatory-coords.jpg"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>x="50%" y="-50%"</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="painting-5">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media layout="fill" x="50%">
+            <amp-img
+              layout="fill"
+              width="4000"
+              height="3059"
+              src="img/conservatory-coords.jpg"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>x="50%"</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="painting-6">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media layout="fill" x="50%" y="50%">
+            <amp-img
+              layout="fill"
+              width="4000"
+              height="3059"
+              src="img/conservatory-coords.jpg"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>x="50%" y="50%"</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="painting-7">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media layout="fill" y="50%">
+            <amp-img
+              layout="fill"
+              width="4000"
+              height="3059"
+              src="img/conservatory-coords.jpg"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>y="50%"</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="painting-8">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media layout="fill" x="-50%" y="50%">
+            <amp-img
+              layout="fill"
+              width="4000"
+              height="3059"
+              src="img/conservatory-coords.jpg"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>x="-50%" y="50%"</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="painting-9">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media layout="fill" x="-50%" y="50%" zoom="2">
+            <amp-img
+              layout="fill"
+              width="4000"
+              height="3059"
+              src="img/conservatory-coords.jpg"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>x="-50%" y="50%" zoom="2"</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="painting-10">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media
+            layout="fill"
+            x="-50%"
+            y="50%"
+            zoom="2"
+            lock-bounds
+          >
+            <amp-img
+              layout="fill"
+              width="4000"
+              height="3059"
+              src="img/conservatory-coords.jpg"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>x="-50%" y="50%" zoom="2" lock-bounds</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="painting-11">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media
+            layout="fill"
+            x="50%"
+            y="-50%"
+            zoom="1"
+            lock-bounds
+          >
+            <amp-img
+              layout="fill"
+              width="4000"
+              height="3059"
+              src="img/conservatory-coords.jpg"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>x="50%" y="-50%" zoom="1" lock-bounds</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="painting-12">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media
+            layout="fill"
+            x="-50%"
+            y="-50%"
+            zoom="2"
+            lock-bounds
+          >
+            <amp-img
+              layout="fill"
+              width="4000"
+              height="3059"
+              src="img/conservatory-coords.jpg"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>x="-50%" y="-50%" zoom="2" lock-bounds</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <!-- multiple per page example -->
+      <amp-story-page id="stars-1">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media
+            layout="fill"
+            group-id="stars-group-1"
+            x="10%"
+            y="0%"
+            zoom="1"
+          >
+            <amp-img
+              layout="fill"
+              width="2992"
+              height="2550"
+              src="img/stars.png"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media
+            layout="fill"
+            group-id="stars-group-2"
+            x="0%"
+            y="0%"
+            zoom="1"
+          >
+            <amp-img
+              layout="fill"
+              width="2992"
+              height="2550"
+              src="img/stars.png"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>Multiple components per page.</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="stars-2">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media
+            layout="fill"
+            group-id="stars-group-1"
+            x="-10%"
+            y="0%"
+            zoom="1"
+          >
+            <amp-img
+              layout="fill"
+              width="2992"
+              height="2550"
+              src="img/stars.png"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media
+            layout="fill"
+            group-id="stars-group-2"
+            x="-15%"
+            y="0%"
+            zoom="1"
+          >
+            <amp-img
+              layout="fill"
+              width="2992"
+              height="2550"
+              src="img/stars.png"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>Multiple components per page.</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="stars-3">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media
+            layout="fill"
+            group-id="stars-group-1"
+            x="-10%"
+            y="0%"
+            zoom="2"
+          >
+            <amp-img
+              layout="fill"
+              width="2992"
+              height="2550"
+              src="img/stars.png"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media
+            layout="fill"
+            group-id="stars-group-2"
+            x="-15%"
+            y="0%"
+            zoom="1.5"
+          >
+            <amp-img
+              layout="fill"
+              width="2992"
+              height="2550"
+              src="img/stars.png"
+            ></amp-img>
+          </amp-story-panning-media>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="text-wrapper">
+            <h3>Multiple components per page.</h3>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/ampconf.html b/examples/amp-story/ampconf.html
index fbeebc1be309d..000cf13486079 100644
--- a/examples/amp-story/ampconf.html
+++ b/examples/amp-story/ampconf.html
@@ -104,7 +104,7 @@
   <body>
     <amp-story standalone id="cats"
         title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
-        publisher-logo-src="./img/AMP-Brand-White-Icon.svg"
+        publisher-logo-src="./img/amplogo.png"
         poster-portrait-src="./img/overview.jpg">
 
       <amp-story-auto-ads>
@@ -298,9 +298,6 @@ <h1 grid-area="middle-third" class="bold">Join the worldwide AMP Roadshow</h1>
           </a>
         </amp-story-cta-layer>
       </amp-story-page>
-
-      <amp-story-bookend src="./bookendv1.json" layout="nodisplay">
-      </amp-story-bookend>
     </amp-story>
   </body>
 </html>
diff --git a/examples/amp-story/analytics.html b/examples/amp-story/analytics.html
index fa7025a1fb58e..f4597626d4aaa 100644
--- a/examples/amp-story/analytics.html
+++ b/examples/amp-story/analytics.html
@@ -40,10 +40,10 @@
         <script type="application/json">
           {
             "requests": {
-              "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/master/examples/img/ampicon.png",
+              "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png",
               "base": "${endpoint}?${type|default:foo}&path=${canonicalPath}",
               "pageView": "${base}?&index=${storyPageIndex}&count=${storyPageCount}&id=${storyPageId}&muted=${storyIsMuted}&progress=${storyProgress}",
-              "click": "${base}?&index=${storyPageIndex}&id=${storyPageId}&bookendTargetHref=${storyBookendTargetHref}&bookendCardType=${storyBookendComponentType}&bookendCardPosition=${storyBookendComponentPosition}"
+              "click": "${base}?&index=${storyPageIndex}&id=${storyPageId}"
             },
             "triggers": {
               "trackAnchorClicks": {
@@ -54,13 +54,6 @@
                   "eventId": "clickOnAnyAnchor"
                 }
               },
-              "trackBookendClicks": {
-                "on": "story-bookend-click",
-                "request": "click",
-                "vars": {
-                  "eventId": "clickOnBookend"
-                }
-              },
               "trackPageAttachmentOpen": {
                 "on": "story-open",
                 "tagName": "amp-story-page-attachment",
@@ -88,16 +81,6 @@
                   "repeat": false
                 }
               },
-              "trackBookendEnter": {
-                "on": "story-open",
-                "tagName": "amp-story-bookend",
-                "request": "pageView"
-              },
-              "trackBookendExit": {
-                "on": "story-close",
-                "tagName": "amp-story-bookend",
-                "request": "pageView"
-              },
               "trackAudioEnable": {
                 "on": "story-audio-muted",
                 "request": "pageView"
@@ -106,6 +89,16 @@
                 "on": "story-audio-unmuted",
                 "request": "pageView"
               }
+            },
+            "linkers": {
+              "enabled": true,
+              "destinationDomains": ["google.com"],
+              "proxyOnly": false,
+              "linker": {
+                "ids": {
+                  "cid": "CLIENT_ID(cid)"
+                }
+              }
             }
           }
         </script>
@@ -134,11 +127,12 @@ <h1>Page Two</h1>
       <amp-story-page id="p3">
         <amp-story-grid-layer template="vertical">
           <h1>Page Three</h1>
-          <a href="google.com">click me</a>
+          <a href="https://google.com">tooltip link</a>
         </amp-story-grid-layer>
         <amp-story-cta-layer>
-          <a>click me</a>
+          <a href="https://google.com">CTA link</a>
         </amp-story-cta-layer>
+        <amp-story-page-attachment layout="nodisplay" href="https://google.com"></amp-story-page-attachment>
       </amp-story-page>
 
       <amp-story-page id="p4" style="background-color: grey">
@@ -181,9 +175,6 @@ <h1>Page Five</h1>
           </amp-video>
         </amp-story-grid-layer>
       </amp-story-page>
-
-      <amp-story-bookend src="bookendv1.json" layout="nodisplay">
-      </amp-story-bookend>
     </amp-story>
   </body>
 </html>
diff --git a/examples/amp-story/animations-presets.html b/examples/amp-story/animations-presets.html
index cff9d3e779ca8..96cabe85d6c8e 100644
--- a/examples/amp-story/animations-presets.html
+++ b/examples/amp-story/animations-presets.html
@@ -16,39 +16,23 @@
 
     h1,
     p {
-      font-family: Menlo, Monaco, monospace;
-      width: 100%;
+      font-family: Helvetica, Monaco, monospace;
       font-weight: bold;
-    }
-
-    h1 {
-      font-size: 24px;
-      z-index: 1;
-      text-align: left;
+      display: inline-block;
     }
 
     p {
-      font-size: 18px;
-      text-align: right;
-    }
-
-    amp-story-page {
-      background: #ddd;
+      color: white;
+      margin: 17px 0 0 2px;
     }
 
-    amp-story-grid-layer {
-      justify-items: center;
-    }
-
-    .square,
-    .circle {
-      background: #4285f4;
-      width: 80px;
-      height: 80px;
+    h1 {
+      font-size: 36px;
     }
 
-    .circle {
-      border-radius: 80px;
+    amp-story-page {
+      background: black;
+      color: white;
     }
 
     .img-container {
@@ -68,97 +52,113 @@
     standalone>
 
     <amp-story-page id="pulse-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>pulse</h1>
-        <div class="circle" animate-in="pulse" animate-in-duration="1s">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="pulse">pulse</h1>
         </div>
       </amp-story-grid-layer>
     </amp-story-page>
 
     <amp-story-page id="fade-in-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>fade-in</h1>
-        <div class="circle" animate-in="fade-in" animate-in-duration="0.8s">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="fade-in">fade-in</h1>
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="scale-fade-up-page">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="scale-fade-up">scale-fade-up</h1>
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="scale-fade-down-page">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="scale-fade-down">scale-fade-down</h1>
         </div>
       </amp-story-grid-layer>
     </amp-story-page>
 
     <amp-story-page id="twirl-in-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>twirl-in</h1>
-        <div class="square" animate-in="twirl-in">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="twirl-in">twirl-in</h1>
         </div>
       </amp-story-grid-layer>
     </amp-story-page>
 
     <amp-story-page id="fly-in-left-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>fly-in-left</h1>
-        <div class="square" animate-in="fly-in-left">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="fly-in-left">fly-in-left</h1>
         </div>
       </amp-story-grid-layer>
     </amp-story-page>
 
     <amp-story-page id="fly-in-right-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>fly-in-right</h1>
-        <div class="square" animate-in="fly-in-right">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="fly-in-right">fly-in-right</h1>
         </div>
       </amp-story-grid-layer>
     </amp-story-page>
 
     <amp-story-page id="fly-in-top-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>fly-in-top</h1>
-        <div class="square" animate-in="fly-in-top">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="fly-in-top">fly-in-top</h1>
         </div>
       </amp-story-grid-layer>
     </amp-story-page>
 
     <amp-story-page id="fly-in-bottom-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>fly-in-bottom</h1>
-        <div class="square" animate-in="fly-in-bottom">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="fly-in-bottom">fly-in-bottom</h1>
         </div>
       </amp-story-grid-layer>
     </amp-story-page>
 
     <amp-story-page id="rotate-in-left-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>rotate-in-left</h1>
-        <div class="square" animate-in="rotate-in-left">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="rotate-in-left">rotate-in-left</h1>
         </div>
       </amp-story-grid-layer>
     </amp-story-page>
 
     <amp-story-page id="rotate-in-right-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>rotate-in-right</h1>
-        <div class="square" animate-in="rotate-in-right">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="rotate-in-right">rotate-in-right</h1>
         </div>
       </amp-story-grid-layer>
     </amp-story-page>
 
-    <amp-story-page id="drop-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>drop-in</h1>
-        <div class="circle" animate-in="drop">
+    <amp-story-page id="whoosh-in-left-page">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="whoosh-in-left">whoosh-in-left</h1>
         </div>
       </amp-story-grid-layer>
     </amp-story-page>
 
-    <amp-story-page id="whoosh-in-left-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>whoosh-in-left</h1>
-        <div class="square" animate-in="whoosh-in-left">
+    <amp-story-page id="whoosh-in-right-page">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="whoosh-in-right">whoosh-in-right</h1>
         </div>
       </amp-story-grid-layer>
     </amp-story-page>
 
-    <amp-story-page id="whoosh-in-right-page">
-      <amp-story-grid-layer template="vertical">
-        <h1>whoosh-in-right</h1>
-        <div class="square" animate-in="whoosh-in-right">
+    <amp-story-page id="drop-page">
+      <amp-story-grid-layer template="thirds">
+        <div grid-area="middle-third">
+          <h1 animate-in="drop">drop-in</h1>
         </div>
       </amp-story-grid-layer>
     </amp-story-page>
diff --git a/examples/amp-story/attachment.html b/examples/amp-story/attachment.html
index 3fe518cd6962c..8730ee91e6e45 100644
--- a/examples/amp-story/attachment.html
+++ b/examples/amp-story/attachment.html
@@ -21,16 +21,28 @@
         background-color: #000;
       }
 
-      span {
+      p span {
         padding: 0 96px 0 20px;
         align-items: center;
         font-size: 18px;
         line-height: 1.5em;
+        margin-bottom: 10px;
       }
 
       amp-story-page-attachment {
         color: rgba(0, 0, 0, 0.93);
       }
+
+      .attachment-content {
+        background-color: #F8EDD5;
+        box-sizing: border-box;
+        padding: 20px;
+      }
+
+      .attachment-content p {
+        margin-top: 0;
+        margin-bottom: 16px;
+      }
     </style>
   </head>
 
@@ -42,51 +54,298 @@
         poster-portrait-src="/examples/visual-tests/amp-story/img/overview.jpg"
         title="Landscape story"
         supports-landscape>
-      <amp-story-page id="cover" title="Relentlessly pursues moth annoy owner">
+      <amp-story-page id="inline-default">
         <amp-story-grid-layer template="fill">
           <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>
         </amp-story-grid-layer>
-        <amp-story-grid-layer template="vertical" class="bottom blue-bottom-gradient">
+        <amp-story-grid-layer template="vertical">
           <p>
-            <span data-text-background-color="#00A3DB">Relentlessly pursues moth annoy owner until he gives you food say meow repeatedly until belly rubs, feels good drool that box?</span>
+            <span data-text-background-color="#00A3DB">Default inline CTA.</span></br></br>
+            <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
           </p>
         </amp-story-grid-layer>
         <amp-story-page-attachment data-title="Lorem ipsum" layout="nodisplay">
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies integer quis auctor elit. Quis eleifend quam adipiscing vitae proin. Id faucibus nisl tincidunt eget nullam. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Sodales ut etiam sit amet nisl purus. Non enim praesent elementum facilisis leo vel fringilla. Sagittis vitae et leo duis ut diam quam nulla. Id diam maecenas ultricies mi eget mauris pharetra et. Sodales neque sodales ut etiam sit amet. Eu sem integer vitae justo eget magna fermentum iaculis eu. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Bibendum est ultricies integer quis auctor elit sed vulputate.</p>
+          <p> Lots of content. Opens to max of 80% then scrolls.</p>
+
+          <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>
+
+          <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>
+
+          <p>Ut tristique et egestas quis ipsum. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Elementum curabitur vitae nunc sed velit dignissim. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. At elementum eu facilisis sed odio morbi. Imperdiet proin fermentum leo vel orci porta non. Quam lacus suspendisse faucibus interdum. Eu non diam phasellus vestibulum lorem sed risus. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut sem viverra aliquet eget sit amet. Nulla facilisi morbi tempus iaculis. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Donec ultrices tincidunt arcu non sodales. Amet venenatis urna cursus eget. Sapien et ligula ullamcorper malesuada proin. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Venenatis tellus in metus vulputate eu scelerisque felis.</p>
+          <a href="https://linkinattachment.com">Link in page attachment</a>
+        </amp-story-page-attachment>
+      </amp-story-page>
+      <amp-story-page id="inline-default-dark-theme">
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
+          <p>
+            <span data-text-background-color="#00A3DB">Inline CTA: dark theme.</span></br></br>
+            <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
+          </p>
+        </amp-story-grid-layer>
+        <amp-story-page-attachment
+          title="Lorem ipsum"
+          layout="nodisplay"
+          theme="dark"
+        >
+          <p> Lots of content. Opens to max of 80% then scrolls.</p>
+
+          <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>
+
+          <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>
+
+          <p>Ut tristique et egestas quis ipsum. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Elementum curabitur vitae nunc sed velit dignissim. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. At elementum eu facilisis sed odio morbi. Imperdiet proin fermentum leo vel orci porta non. Quam lacus suspendisse faucibus interdum. Eu non diam phasellus vestibulum lorem sed risus. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut sem viverra aliquet eget sit amet. Nulla facilisi morbi tempus iaculis. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Donec ultrices tincidunt arcu non sodales. Amet venenatis urna cursus eget. Sapien et ligula ullamcorper malesuada proin. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Venenatis tellus in metus vulputate eu scelerisque felis.</p>
+          <a href="https://linkinattachment.com">Link in page attachment</a>
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="inline-one-image">
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
+          <p>
+            <span data-text-background-color="#00A3DB">Inline CTA: one image.</span></br></br>
+            <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
+          </p>
+        </amp-story-grid-layer>
+        <amp-story-page-attachment
+          title="Lorem ipsum"
+          layout="nodisplay"
+          cta-text="Buy a Sweater"
+          cta-image="img/sweater.jpg"
+          >
+          <div class="attachment-content">
+            <p> Lots of content. Opens to max of 80% then scrolls.</p>
+
+            <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>
+
+            <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>
+
+            <p>Ut tristique et egestas quis ipsum. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Elementum curabitur vitae nunc sed velit dignissim. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. At elementum eu facilisis sed odio morbi. Imperdiet proin fermentum leo vel orci porta non. Quam lacus suspendisse faucibus interdum. Eu non diam phasellus vestibulum lorem sed risus. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut sem viverra aliquet eget sit amet. Nulla facilisi morbi tempus iaculis. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Donec ultrices tincidunt arcu non sodales. Amet venenatis urna cursus eget. Sapien et ligula ullamcorper malesuada proin. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Venenatis tellus in metus vulputate eu scelerisque felis.</p>
+            <a href="https://linkinattachment.com">Link in page attachment</a>
+          </div>
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="inline-two-images-dark-theme">
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
+          <p>
+            <span data-text-background-color="#00A3DB">Inline CTA: two images & dark theme.</span></br></br>
+            <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
+          </p>
+        </amp-story-grid-layer>
+        <amp-story-page-attachment
+          title="Lorem ipsum"
+          layout="nodisplay"
+          cta-text="Buy a Sweater"
+          cta-image="img/sweater.jpg"
+          cta-image-2="img/boot.jpg"
+          theme="dark"
+          >
+          <p> Lots of content. Opens to max of 80% then scrolls.</p>
+
+          <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>
 
           <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>
 
           <p>Ut tristique et egestas quis ipsum. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Elementum curabitur vitae nunc sed velit dignissim. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. At elementum eu facilisis sed odio morbi. Imperdiet proin fermentum leo vel orci porta non. Quam lacus suspendisse faucibus interdum. Eu non diam phasellus vestibulum lorem sed risus. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut sem viverra aliquet eget sit amet. Nulla facilisi morbi tempus iaculis. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Donec ultrices tincidunt arcu non sodales. Amet venenatis urna cursus eget. Sapien et ligula ullamcorper malesuada proin. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Venenatis tellus in metus vulputate eu scelerisque felis.</p>
+          <a href="https://linkinattachment.com">Link in page attachment</a>
         </amp-story-page-attachment>
       </amp-story-page>
 
-      <amp-story-page id="page1">
+      <amp-story-page id="outlink-default">
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="center">
+          <p>
+            <span data-text-background-color="crimson">Default outlink CTA.</span></br></br>
+            <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
+          </p>
+        </amp-story-grid-layer>
+        <amp-story-page-outlink
+          title="Link Description"
+          href="https://www.google.com"
+          layout="nodisplay">
+        </amp-story-page-outlink>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-custom-icon-custom-text">
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="center">
+          <p>
+            <span data-text-background-color="crimson">Outlink CTA: logo & custom text.</span></br></br>
+            <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
+          </p>
+        </amp-story-grid-layer>
+        <amp-story-page-outlink
+          title="Link Description"
+          href="https://www.google.com"
+          cta-text="Shop at Forbes"
+          cta-image="img/logo.jpg"
+          layout="nodisplay">
+        </amp-story-page-outlink>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-no-image">
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="center">
+          <p>
+            <span data-text-background-color="crimson">Outlink CTA: no image.</span></br></br>
+            <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
+          </p>
+        </amp-story-grid-layer>
+        <amp-story-page-outlink
+          title="Link Description"
+          href="https://www.google.com"
+          cta-image="none"
+          layout="nodisplay">
+        </amp-story-page-outlink>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-dark-theme">
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="center">
+          <p>
+            <span data-text-background-color="crimson">Outlink CTA: dark theme.</span></br></br>
+            <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
+          </p>
+        </amp-story-grid-layer>
+        <amp-story-page-outlink
+          title="Link Description"
+          href="https://www.google.com"
+          theme="dark"
+          layout="nodisplay">
+        </amp-story-page-outlink>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-custom-background-color-pink">
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="center">
+          <p>
+            <span data-text-background-color="crimson">Outlink CTA: custom pink background.</span></br></br>
+            <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
+          </p>
+        </amp-story-grid-layer>
+        <amp-story-page-outlink
+          title="Link Description"
+          href="https://www.google.com"
+          theme="custom"
+          cta-accent-color="pink"
+          cta-accent-element="background"
+          layout="nodisplay">
+        </amp-story-page-outlink>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-custom-text-color-pink">
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="center">
+          <p>
+            <span data-text-background-color="crimson">Outlink CTA: custom pink text.</span></br></br>
+            <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
+          </p>
+        </amp-story-grid-layer>
+        <amp-story-page-outlink
+          title="Link Description"
+          href="https://www.google.com"
+          theme="custom"
+          cta-accent-color="pink"
+          cta-accent-element="text"
+          layout="nodisplay">
+        </amp-story-page-outlink>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-custom-background-color-navy">
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="center">
+          <p>
+            <span data-text-background-color="crimson">Outlink CTA: custom navy background.</span></br></br>
+            <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
+          </p>
+        </amp-story-grid-layer>
+        <amp-story-page-outlink
+          title="Link Description"
+          href="https://www.google.com"
+          theme="custom"
+          cta-accent-color="navy"
+          cta-accent-element="background"
+          layout="nodisplay">
+        </amp-story-page-outlink>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-custom-text-color-navy">
         <amp-story-grid-layer template="fill">
           <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="center">
           <p>
-            <span data-text-background-color="crimson">i can fit in that box but inspect anything brought into the house wack the mini furry mouse intently stare at the same spot. Flee in terror at cucumber discovered on floor shake treat bag</span>
+            <span data-text-background-color="crimson">Outlink CTA: custom navy text.</span></br></br>
+            <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
           </p>
         </amp-story-grid-layer>
-        <amp-story-page-attachment data-title="Link Description" href="https://www.google.com" layout="nodisplay"></amp-story-page-attachment>
+        <amp-story-page-outlink
+          title="Link Description"
+          href="https://www.google.com/search?q=why+do+cats+purr+so+loud"
+          theme="custom"
+          cta-accent-color="navy"
+          cta-accent-element="text"
+          layout="nodisplay">
+        </amp-story-page-outlink>
+      </amp-story-page>
+
+      <amp-story-page id="cta-without-data-attributes">
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="center">
+          <p>
+            <span data-text-background-color="crimson">Using title, data-title, cta-text, and data-cta-text attributes.</span></br></br>
+            <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
+          </p>
+        </amp-story-grid-layer>
+        <amp-story-page-attachment
+          title="Link Description"
+          data-title="Data-Title"
+          href="https://www.google.com"
+          cta-text="Shop at Forbes"
+          data-cta-text="Data-CTA-Text"
+          cta-image="img/logo.jpg"
+          layout="nodisplay">
+        </amp-story-page-attachment>
       </amp-story-page>
 
-      <amp-story-page id="page3">
+      <amp-story-page id="last-page-no-cta">
         <amp-story-grid-layer template="fill">
           <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>
         </amp-story-grid-layer>
-        <amp-story-grid-layer template="vertical" class="bottom blue-bottom-gradient">
+        <amp-story-grid-layer template="vertical">
           <p>
-            <span data-text-background-color="#00A3DB">Third page</span>
+            <span data-text-background-color="#00A3DB">No CTA page.</span>
           </p>
         </amp-story-grid-layer>
       </amp-story-page>
 
-      <amp-story-bookend layout="nodisplay">
+      <amp-story-social-share layout="nodisplay">
         <script type="application/json">
           {
-            "bookendVersion": "v1.0",
             "shareProviders": [
               "email",
               {"provider": "facebook", "app_id": "254325784911610"},
@@ -94,51 +353,10 @@
               "whatsapp",
               "pinterest",
               "line"
-            ],
-            "components": [
-              {
-                "type": "heading",
-                "text": "test"
-              },
-              {
-                "type": "small",
-                "title": "This is an example article",
-                "url": "/article.html",
-                "image": "http://placehold.it/500x600"
-              },
-              {
-                "type": "small",
-                "title": "This is an example article2",
-                "url": "http://example.com/article.html",
-                "image": "http://placehold.it/256x128"
-              },
-              {
-                "type": "small",
-                "title": "This is an example article3",
-                "url": "http://example.com/article.html",
-                "image": "http://placehold.it/256x128"
-              },
-              {
-                "type": "heading",
-                "text": "test2"
-              },
-              {
-                "type": "small",
-                "title": "This is an example article",
-                "url": "http://example.com/article.html",
-                "image": "http://placehold.it/256x128"
-              },
-              {
-                "type": "portrait",
-                "title": "Heading for portrait",
-                "category": "This is an example portrait",
-                "url": "http://example.com/article.html",
-                "image": "http://placehold.it/350x470"
-              }
             ]
           }
         </script>
-      </amp-story-bookend>
+      </amp-story-social-share>
     </amp-story>
   </body>
 </html>
diff --git a/examples/amp-story/auto-analytics.html b/examples/amp-story/auto-analytics.html
new file mode 100644
index 0000000000000..f366be2a46785
--- /dev/null
+++ b/examples/amp-story/auto-analytics.html
@@ -0,0 +1,114 @@
+<!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-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.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-auto-analytics" src="https://cdn.ampproject.org/v0/amp-story-auto-analytics-0.1.js"></script>
+    <title>My Story</title>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <link rel="canonical" href="analytics.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>
+      body {
+        font-family: 'Roboto', sans-serif;
+      }
+      amp-story-page {
+        background: white;
+      }
+      h1 {
+        font-size: 2.875em;
+        font-weight: normal;
+        line-height: 1.174;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+
+  <body>
+    <amp-story
+      title="Analytics amp-story example"
+      publisher="The AMP Team"
+      publisher-logo-src="https://example.com/logo/1x1.png"
+      poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
+      poster-square-src="https://example.com/my-story/poster/1x1.jpg"
+      poster-landscape-src="https://example.com/my-story/poster/4x3.jpg"
+      standalone>
+
+      <amp-story-auto-analytics gtag-id="UA-174115079-1">
+      </amp-story-auto-analytics>
+
+      <amp-story-page id="p1">
+        <amp-story-grid-layer template="vertical">
+          <h1>Page One</h1>
+        </amp-story-grid-layer>
+        <amp-story-page-attachment layout="nodisplay">
+          <div>
+            <h1>Some really cool video</h1>
+              <p style="color: black">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+              </p>
+          </div>
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="p2">
+        <amp-story-grid-layer template="vertical">
+          <h1>Page Two</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="p3">
+        <amp-story-grid-layer template="vertical">
+          <h1>Page Three</h1>
+          <a href="https://google.com">click me</a>
+        </amp-story-grid-layer>
+        <amp-story-cta-layer>
+          <a>click me</a>
+        </amp-story-cta-layer>
+      </amp-story-page>
+
+      <amp-story-page id="p4" style="background-color: grey">
+          <amp-story-grid-layer template="vertical">
+            <h1>Page Four</h1>
+            <a id="blink-3" href="https://amp.dev" role="link" target="_blank" affiliate-link-icon="shopping-cart">
+              amp.devamp.devamp.devamp.devamp.devamp.dev
+            </a>
+            <a id="blink-4" href="https://amp.dev" role="link" target="_blank" affiliate-link-icon="offer">
+              amp.devamp.devamp.devamp.devamp.devamp.dev
+            </a>
+            <a id="blink-5" href="https://amp.dev" role="link" target="_blank" affiliate-link-icon="flight">
+              amp.devamp.devamp.devamp.devamp.devamp.dev
+            </a>
+            <a id="blink-6" href="https://amp.dev" role="link" target="_blank" affiliate-link-icon="hotel">
+              amp.devamp.devamp.devamp.devamp.devamp.dev
+            </a>
+            <a id="blink-7" href="https://amp.dev" role="link" target="_blank" affiliate-link-icon="movie">
+              amp.devamp.devamp.devamp.devamp.devamp.dev
+            </a>
+            <a id="blink-8" href="https://amp.dev" role="link" target="_blank" affiliate-link-icon="activity">
+              amp.devamp.devamp.devamp.devamp.devamp.dev
+            </a>
+            <a id="blink-9" href="https://amp.dev" role="link" target="_blank" affiliate-link-icon="more-to-read">
+              amp.devamp.devamp.devamp.devamp.devamp.dev
+            </a>
+          </amp-story-grid-layer>
+        </amp-story-page>
+
+      <amp-story-page id="p5">
+        <amp-story-grid-layer template="vertical">
+          <h1>Page Five</h1>
+          <amp-video
+            id="vid1"
+            src="../av/ForBiggerJoyrides-short.mp4"
+            width="720"
+            height="405"
+            layout="responsive"
+            autoplay>
+          </amp-video>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/bookend.html b/examples/amp-story/bookend.html
deleted file mode 100644
index c18b2c38704da..0000000000000
--- a/examples/amp-story/bookend.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!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>
-    <title>My Story</title>
-    <meta name="viewport"
-          content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link rel="canonical" href="bookend.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>
-      body {
-        font-family: 'Roboto', sans-serif;
-      }
-      amp-story-page {
-        background-color: white;
-      }
-    </style>
-    <script type="application/ld+json">
-      {
-        "@context": "http://schema.org",
-        "@type": "NewsArticle",
-        "mainEntityOfPage": {
-          "@type": "WebPage",
-          "@id": "./bookend.html"
-        },
-        "headline": "My Story",
-        "image":["http://placehold.it/420x740"],
-        "datePublished": "2018-01-01T00:00:00+00:00",
-        "dateModified": "2018-01-01T00:00:00+00:00",
-        "author": {
-          "@type": "Organization",
-          "name": "AMP Project"
-        },
-        "publisher": {
-          "@type": "Organization",
-          "name": "AMP Project",
-          "logo": {
-            "@type": "ImageObject",
-            "url": "http://placehold.it/128x128"
-          }
-        },
-        "description": "My Story"
-      }
-    </script>
-  </head>
-
-  <body>
-    <amp-story
-      title="Bookend amp-story example"
-      publisher="The AMP Team"
-      publisher-logo-src="https://example.com/logo/1x1.png"
-      poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
-      poster-square-src="https://example.com/my-story/poster/1x1.jpg"
-      poster-landscape-src="https://example.com/my-story/poster/4x3.jpg"
-      standalone>
-
-      <amp-story-page id="cover">
-        <amp-story-grid-layer template="vertical">
-          <h1>Advance to see the bookend!</h1>
-        </amp-story-grid-layer>
-      </amp-story-page>
-
-      <amp-story-bookend src="./bookendv1.json" layout="nodisplay">
-      </amp-story-bookend>
-    </amp-story>
-  </body>
-</html>
diff --git a/examples/amp-story/bookend.json b/examples/amp-story/bookend.json
deleted file mode 100644
index 82d5776aa3e68..0000000000000
--- a/examples/amp-story/bookend.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "share-providers": {
-    "facebook": true,
-    "whatsapp": true
-  },
-  "related-articles": {
-    "test": [
-      {
-        "title": "This is an example article",
-        "url": "http://example.com/article.html",
-        "image": "http://placehold.it/256x128"
-      }
-    ]
-  }
-}
diff --git a/examples/amp-story/bookendv1.html b/examples/amp-story/bookendv1.html
deleted file mode 100644
index 5ef5f344a5622..0000000000000
--- a/examples/amp-story/bookendv1.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!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>
-    <title>My Story</title>
-    <meta name="viewport"
-          content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link rel="canonical" href="bookend.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>
-      body {
-        font-family: 'Roboto', sans-serif;
-      }
-      amp-story-page {
-        background-color: white;
-      }
-    </style>
-    <script type="application/ld+json">
-      {
-        "@context": "http://schema.org",
-        "@type": "NewsArticle",
-        "mainEntityOfPage": {
-          "@type": "WebPage",
-          "@id": "./bookend.html"
-        },
-        "headline": "My Story",
-        "image":["http://placehold.it/420x740"],
-        "datePublished": "2018-01-01T00:00:00+00:00",
-        "dateModified": "2018-01-01T00:00:00+00:00",
-        "author": {
-          "@type": "Organization",
-          "name": "AMP Project"
-        },
-        "publisher": {
-          "@type": "Organization",
-          "name": "AMP Project",
-          "logo": {
-            "@type": "ImageObject",
-            "url": "http://placehold.it/128x128"
-          }
-        },
-        "description": "My Story"
-      }
-    </script>
-  </head>
-  <body>
-    <amp-story standalone title="My Story"
-      publisher="The AMP Team"
-      publisher-logo-src="https://example.com/logo/1x1.png"
-      poster-portrait-src="https://example.com/my-story/poster/3x4.jpg">
-      <amp-story-page id="cover">
-        <amp-story-grid-layer template="vertical">
-          <h1>Advance to see the bookend!</h1>
-        </amp-story-grid-layer>
-      </amp-story-page>
-      <amp-story-bookend src="bookendv1.json" layout=nodisplay>
-      </amp-story-bookend>
-    </amp-story>
-  </body>
-</html>
diff --git a/examples/amp-story/bookendv1.json b/examples/amp-story/bookendv1.json
deleted file mode 100644
index 1838d13296b66..0000000000000
--- a/examples/amp-story/bookendv1.json
+++ /dev/null
@@ -1,110 +0,0 @@
-{
-  "bookendVersion": "v1.0",
-  "shareProviders": [
-    "email",
-    {"provider": "facebook", "app_id": "254325784911610"},
-    {
-      "provider": "twitter",
-      "text": "This is custom share text that I would like for the Twitter platform"
-    },
-    "whatsapp",
-    "pinterest",
-    "line"
-  ],
-  "components": [
-    {
-      "type": "heading",
-      "text": "test"
-    },
-    {
-      "type": "small",
-      "title": "This is an example article",
-      "url": "/article.html",
-      "image": "http://placehold.it/500x600"
-    },
-    {
-      "type": "small",
-      "title": "This is an example article2",
-      "url": "http://example.com/article.html",
-      "image": "http://placehold.it/256x128"
-    },
-    {
-      "type": "small",
-      "title": "This is an example article3",
-      "url": "http://example.com/article.html",
-      "image": "http://placehold.it/256x128"
-    },
-    {
-      "type": "heading",
-      "text": "test2"
-    },
-    {
-      "type": "small",
-      "title": "This is an example article",
-      "url": "http://example.com/article.html",
-      "image": "http://placehold.it/256x128"
-    },
-    {
-      "type": "portrait",
-      "title": "Heading for portrait",
-      "category": "This is an example portrait",
-      "url": "http://example.com/article.html",
-      "image": "http://placehold.it/350x470"
-    },
-    {
-      "type": "landscape",
-      "title": "TRAPPIST-1 Planets May Still Be Wet Enough for Life",
-      "url": "http://example.com/article.html",
-      "category": "astronomy",
-      "image": "http://placehold.it/360x760"
-    },
-    {
-      "type": "small",
-      "title": "This is an example article",
-      "url": "http://example.com/article.html",
-      "image": "http://placehold.it/256x128"
-    },
-    {
-      "type": "small",
-      "title": "This is an example article",
-      "url": "http://example.com/article.html",
-      "image": "http://placehold.it/256x128"
-    },
-    {
-      "type": "cta-link",
-      "links": [
-        {
-          "text": "buttonA",
-          "url": "google.com"
-        },
-        {
-          "text": "buttonB",
-          "url": "google.com"
-        },
-        {
-          "text": "longtext longtext longtext longtext longtext longtext longt",
-          "url": "google.com"
-        }
-      ]
-    },
-    {
-      "type": "small",
-      "title": "This is an example article",
-      "url": "http://example.com/article.html",
-      "image": "http://placehold.it/256x128"
-    },
-    {
-      "type": "heading",
-      "text": "credits"
-    },
-    {
-      "type": "textbox",
-      "text": [
-        "Food by Enrique McPizza",
-        "Choreography by Gabriel Filly",
-        "Script by Alan Ecma S.",
-        "Direction by Jon Tarantino"
-      ]
-    }
-  ]
-}
diff --git a/examples/amp-story/consent-geo.html b/examples/amp-story/consent-geo.html
index 60e5d07bdf0f4..aba6b081c0714 100644
--- a/examples/amp-story/consent-geo.html
+++ b/examples/amp-story/consent-geo.html
@@ -68,12 +68,9 @@
 
       <amp-consent id='ABC' layout='nodisplay'>
         <script type="application/json">{
-          "consents": {
-            "ABC": {
-              "promptIfUnknownForGeoGroup": "eea",
-              "promptUI": "ui0"
-            }
-          }
+          "consentInstanceId": "ABC",
+          "promptIfUnknownForGeoGroup": "eea",
+          "promptUI": "ui0"
         }</script>
         <amp-story-consent id="ui0" layout="nodisplay">
           <script type="application/json">{
diff --git a/examples/amp-story/consent.html b/examples/amp-story/consent.html
index ea3b2da7107c4..385d6bd54a8be 100644
--- a/examples/amp-story/consent.html
+++ b/examples/amp-story/consent.html
@@ -56,12 +56,9 @@
     <amp-story standalone publisher-logo-src="https://placekitten.com/g/64/64">
       <amp-consent id='ABC' layout='nodisplay'>
         <script type="application/json">{
-          "consents": {
-            "DEF": {
-              "checkConsentHref": "http://localhost:8000/get-consent-v1",
-              "promptUI": "ui0"
-            }
-          }
+          "consentInstanceId": "DEF",
+          "checkConsentHref": "http://localhost:8000/get-consent-v1",
+          "promptUI": "ui0"
         }</script>
 
         <amp-story-consent id="ui0" layout="nodisplay">
@@ -82,9 +79,6 @@
           <h1>You just accepted or rejected the consent!</h1>
         </amp-story-grid-layer>
       </amp-story-page>
-
-      <amp-story-bookend src="bookendv1.json" layout="nodisplay">
-      </amp-story-bookend>
     </amp-story>
   </body>
 </html>
diff --git a/examples/amp-story/cta-layer-outlink.html b/examples/amp-story/cta-layer-outlink.html
index 07bb82a892c10..f64dd992ce69d 100644
--- a/examples/amp-story/cta-layer-outlink.html
+++ b/examples/amp-story/cta-layer-outlink.html
@@ -27,7 +27,7 @@
       padding: 8px;
     }
 
-    .button {
+    amp-story-cta-layer .button {
       font: bold 20px Arial;
       text-decoration: none;
       background-color: rgba(0, 240, 248, 0.63);
diff --git a/examples/amp-story/desktop-backgrounds.html b/examples/amp-story/desktop-backgrounds.html
index add7e4884a6e4..bc7d9afc33bc5 100644
--- a/examples/amp-story/desktop-backgrounds.html
+++ b/examples/amp-story/desktop-backgrounds.html
@@ -68,9 +68,6 @@ <h1>Third Page</h1>
           <p>This is the third page of this story.</p>
         </amp-story-grid-layer>
       </amp-story-page>
-
-      <amp-story-bookend src="./bookendv1.json" layout="nodisplay">
-      </amp-story-bookend>
     </amp-story>
   </body>
 </html>
diff --git a/examples/amp-story/doubleclick.html b/examples/amp-story/doubleclick.html
index 63daefb2de721..a3558801d3e33 100644
--- a/examples/amp-story/doubleclick.html
+++ b/examples/amp-story/doubleclick.html
@@ -196,9 +196,6 @@ <h1>nineteen Page</h1>
           <h1>twenty Page</h1>
         </amp-story-grid-layer>
       </amp-story-page>
-
-      <amp-story-bookend src="../../examples/amp-story/bookendv1.json" layout="nodisplay">
-      </amp-story-bookend>
     </amp-story>
   </body>
 </html>
diff --git a/examples/amp-story/fake-ad.html b/examples/amp-story/fake-ad.html
index b54f0aaf4a61b..c1a45e5377bf3 100644
--- a/examples/amp-story/fake-ad.html
+++ b/examples/amp-story/fake-ad.html
@@ -197,9 +197,6 @@ <h1>nineteen Page</h1>
           <h1>twenty Page</h1>
         </amp-story-grid-layer>
       </amp-story-page>
-
-      <amp-story-bookend src="../../examples/amp-story/bookendv1.json" layout="nodisplay">
-      </amp-story-bookend>
     </amp-story>
   </body>
 </html>
diff --git a/examples/amp-story/grid-layer-presets.html b/examples/amp-story/grid-layer-presets.html
new file mode 100644
index 0000000000000..3a3dac02d0860
--- /dev/null
+++ b/examples/amp-story/grid-layer-presets.html
@@ -0,0 +1,153 @@
+<!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>
+    <title>Grid layer presets story</title>
+    <meta name="viewport"
+          content="width=device-width,minimum-scale=1,initial-scale=1">
+    <link rel="canonical" href="page-layer.html">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
+    <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>
+      body {
+        font-family: 'Poppins', sans-serif;
+      }
+      amp-story-page {
+        background: black;
+      }
+      .lower-title {
+        color: white;
+        padding: 0;
+        background: #ffffff11;
+        border: 2px solid #ffffff22;
+      }
+      .lower-title .contents {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-end;
+        text-align: center;
+        padding-bottom: 10vh;
+      }
+      .bordered {
+        border: 2px solid #ffffff6f;
+      }
+      .small span {
+        font-size: 0.3em;
+        color: white;
+      }
+      .lower-title span {
+        font-size: 0.2em;
+        color: white;
+      }
+      .lower-title h1 {
+        line-height: 1em;
+        margin: 0;
+        margin-bottom: 0.2em;
+        font-size: 1em;
+        color: white;
+      }
+      a.dev-tools-link {
+        position: absolute;
+        top: 20%;
+        width: 100%;
+        text-align: center;
+        padding: 3vh;
+        font-size: 1vh;
+        color: white;
+      }
+      .boat-circle {
+        border: 0.1em solid rgb(14, 208, 212);
+        width: 0.8em;
+        height: 0.8em;
+        border-radius: 50%;
+        left: 52.2%;
+        position: absolute;
+        top: 38.5%;
+      }
+      .boat-circle.wrong {
+        border-color: rgb(229, 102, 102);
+      }
+    </style>
+  </head>
+
+  <body>
+    <amp-story standalone title="Grid layer presets showcase">
+      <amp-story-page id="cover">
+        <amp-story-grid-layer template="fill">
+          <amp-img src="https://images.unsplash.com/photo-1522072629756-c9274e34ef5e?w=1000&q=80"
+            layout="responsive" width="69" height="116">
+          </amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer preset="2021-foreground" class="lower-title">
+          <a href="#development=1" data-tooltip-text="Open Dev Tools" class="dev-tools-link">Test this story with #development=1</a>
+          <div class="boat-circle wrong"></div>
+          <div class="contents">
+            <span>This is a</span>
+            <h1>full-page</h1>
+            <span>story with cover background</span>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <amp-story-page id="cover-2">
+        <amp-story-grid-layer template="fill" blurred>
+          <amp-img src="https://images.unsplash.com/photo-1522072629756-c9274e34ef5e?w=300&blur=30&q=50"
+            layout="responsive" width="69" height="116">
+          </amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill" preset="2021-background">
+          <amp-img src="https://images.unsplash.com/photo-1522072629756-c9274e34ef5e?w=1000&q=80"
+            layout="responsive" width="69" height="116">
+          </amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer preset="2021-foreground" class="lower-title">
+          <div class="boat-circle"></div>
+          <div class="contents">
+            <span>This is a</span>
+            <h1>full-page</h1>
+            <span>story with consistent background</span>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="anchors">
+        <amp-story-grid-layer template="fill" preset="2021-background">
+          <amp-img src="https://images.unsplash.com/photo-1522072629756-c9274e34ef5e?w=1000&q=80"
+            layout="responsive" width="69" height="116">
+          </amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer preset="2021-foreground" anchor="right" class="bordered small">
+          <span style="position: absolute; right: 0; top: 45%">Right</span>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer preset="2021-foreground" anchor="left" class="bordered small">
+          <span style="position: absolute; left: 0; top: 45%">Left</span>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer preset="2021-foreground" anchor="top" class="bordered small">
+          <span style="position: absolute; left: 40%; top: 0">Top</span>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer preset="2021-foreground" anchor="bottom" class="bordered small">
+          <span style="position: absolute; left: 40%; bottom: 0">Bottom</span>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer preset="2021-foreground" class="bordered small">
+          <span style="position: absolute; left: 40%; top: 45%">Center</span>
+          <span style="position: absolute; left: 0; top: 70%; right:0; text-align: center">(test with #development=1!)</span>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer preset="2021-foreground" anchor="top right" class="bordered small">
+          <span style="position: absolute; right: 0; top: 0">Top Right</span>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer preset="2021-foreground" anchor="top left" class="bordered small">
+          <span style="position: absolute; left: 0; top: 0">Top Left</span>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer preset="2021-foreground" anchor="bottom right" class="bordered small">
+          <span style="position: absolute; right: 0; bottom: 0">Bottom Right</span>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer preset="2021-foreground" anchor="bottom left" class="bordered small">
+          <span style="position: absolute; left: 0; bottom: 0">Bottom Left</span>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/helloworld-bookend.html b/examples/amp-story/helloworld-bookend.html
deleted file mode 100644
index 88801886b5275..0000000000000
--- a/examples/amp-story/helloworld-bookend.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!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>
-    <title>My Story</title>
-    <meta name="viewport"
-          content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link rel="canonical" href="helloworld.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>
-      body {
-        font-family: 'Roboto', sans-serif;
-      }
-      amp-story-page {
-        background: white;
-      }
-      h1 {
-        font-size: 2.875em;
-        font-weight: normal;
-        line-height: 1.174;
-        text-transform: uppercase;
-      }
-    </style>
-  </head>
-
-  <body>
-    <amp-story
-      title="Helloworld-bookend amp-story example"
-      publisher="The AMP Team"
-      publisher-logo-src="https://example.com/logo/1x1.png"
-      poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
-      poster-square-src="https://example.com/my-story/poster/1x1.jpg"
-      poster-landscape-src="https://example.com/my-story/poster/4x3.jpg"
-      standalone>
-
-      <amp-story-page id="cover">
-        <amp-story-grid-layer template="vertical">
-          <h1>Cover page - manual advance</h1>
-          <p>3 page story with a bookend at the end</p>
-        </amp-story-grid-layer>
-      </amp-story-page>
-
-      <amp-story-page id="page-1" auto-advance-after="3s">
-        <amp-story-grid-layer template="vertical">
-          <h1>Page 1 - auto advance after 3s</h1>
-        </amp-story-grid-layer>
-      </amp-story-page>
-
-      <amp-story-page id="page-2">
-        <amp-story-grid-layer template="vertical">
-          <h1>Page 2 - manual advance</h1>
-        </amp-story-grid-layer>
-      </amp-story-page>
-
-      <amp-story-bookend src="./bookendv1.json" layout=nodisplay>
-      </amp-story-bookend>
-    </amp-story>
-  </body>
-</html>
diff --git a/examples/amp-story/img/Equirectangular_projection_SW.jpg b/examples/amp-story/img/Equirectangular_projection_SW.jpg
new file mode 100644
index 0000000000000..8681ac13f2074
Binary files /dev/null and b/examples/amp-story/img/Equirectangular_projection_SW.jpg differ
diff --git a/examples/amp-story/img/NASA_VR_360_Astronaut_Training_Space_Walk_Clip.mp4 b/examples/amp-story/img/NASA_VR_360_Astronaut_Training_Space_Walk_Clip.mp4
new file mode 100644
index 0000000000000..6ec6cd7dd18dc
Binary files /dev/null and b/examples/amp-story/img/NASA_VR_360_Astronaut_Training_Space_Walk_Clip.mp4 differ
diff --git a/examples/amp-story/img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg b/examples/amp-story/img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg
new file mode 100644
index 0000000000000..66493c004e9f4
Binary files /dev/null and b/examples/amp-story/img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg differ
diff --git a/examples/amp-story/img/amplogo.png b/examples/amp-story/img/amplogo.png
new file mode 100644
index 0000000000000..f3ae9d7a8d98b
Binary files /dev/null and b/examples/amp-story/img/amplogo.png differ
diff --git a/examples/amp-story/img/boot.jpg b/examples/amp-story/img/boot.jpg
new file mode 100644
index 0000000000000..6531525509cc5
Binary files /dev/null and b/examples/amp-story/img/boot.jpg differ
diff --git a/examples/amp-story/img/conservatory-coords.jpg b/examples/amp-story/img/conservatory-coords.jpg
new file mode 100644
index 0000000000000..c1977770e1382
Binary files /dev/null and b/examples/amp-story/img/conservatory-coords.jpg differ
diff --git a/examples/amp-story/img/logo.jpg b/examples/amp-story/img/logo.jpg
new file mode 100644
index 0000000000000..d2da673938c48
Binary files /dev/null and b/examples/amp-story/img/logo.jpg differ
diff --git a/examples/amp-story/img/nasa_training_poster.jpg b/examples/amp-story/img/nasa_training_poster.jpg
new file mode 100644
index 0000000000000..bfbf902133d53
Binary files /dev/null and b/examples/amp-story/img/nasa_training_poster.jpg differ
diff --git a/examples/amp-story/img/stars.png b/examples/amp-story/img/stars.png
new file mode 100644
index 0000000000000..b78a488a83e8c
Binary files /dev/null and b/examples/amp-story/img/stars.png differ
diff --git a/examples/amp-story/img/sweater.jpg b/examples/amp-story/img/sweater.jpg
new file mode 100644
index 0000000000000..6a5f9293ff757
Binary files /dev/null and b/examples/amp-story/img/sweater.jpg differ
diff --git a/examples/amp-story/interactive_polls.html b/examples/amp-story/interactive_polls.html
new file mode 100644
index 0000000000000..a15567f348901
--- /dev/null
+++ b/examples/amp-story/interactive_polls.html
@@ -0,0 +1,171 @@
+<!doctype html>
+<html ⚡ lang="es">
+  <head>
+    <meta charset="utf-8">
+    <title >Interactive Story</title>
+    <link rel="canonical" href="interactive_Results.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <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-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+    <style amp-custom>
+    body {
+      font-family: 'Poppins', sans-serif;
+    }
+
+    amp-story-interactive-poll, amp-story-interactive-results {
+      align-self: center;
+      justify-self: center;
+    }
+    </style>
+  </head>
+  <body>
+    <amp-story
+        standalone
+        title="Interactive Story"
+        publisher="AMP Story testing"
+        publisher-logo-src="example.com/logo.png"
+        poster-portrait-src="example.com/poster.jpg">
+        <amp-story-page id="cover">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                animate-in="pan-left"
+                animate-in-duration="30s"
+                src="https://images.unsplash.com/photo-1415369629372-26f2fe60c467?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="thirds">
+            <div style="color:white;padding:10px;align-self:end" grid-area="lower-third">
+              <h1>What adorable animal are you?</h1>
+              <p>The ultimate animal quiz</p>
+              <p>Provided with love by the AMP team</p>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-1">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="filter:blur(4px) saturate(0.7);"
+                src="https://images.unsplash.com/photo-1546548970-71785318a17b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80" layout="responsive" height="1600" width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-poll
+            id="poll-1"
+                prompt-text="Whats your favorite food?"
+                endpoint="http://localhost:3000/interactives"
+                theme="dark"
+                chip-style="shadow"
+                style="--interactive-prompt-background: linear-gradient(120deg, rgb(255,103,38), rgb(235,69,69));"
+                option-1-text="Bones" option-1-results-category="Dog"
+                option-2-text="Fish" option-2-results-category="Cat"
+                option-3-text="Carrots" option-3-results-category="Bunny"
+                option-4-text="Cheese" option-4-results-category="Mouse">
+            </amp-story-interactive-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-2">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="img/green-stuff.jpg" layout="responsive" height="1600" width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-poll
+            id="poll-2"
+                prompt-text="How do you spend your free time?"
+                endpoint="http://localhost:3000/interactives"
+                style="--interactive-prompt-background: linear-gradient(120deg, rgb(251, 255, 38), rgb(144, 235, 69)); --interactive-prompt-text-color: black"
+                chip-style="shadow"
+                option-1-text="Stretching your back" option-1-results-category="Cat"
+                option-2-text="Caressing your mustache" option-2-results-category="Mouse"
+                option-3-text="Jumping all over the place nonstop because they want and they can do that because they are free" option-3-results-category="Bunny"
+                option-4-text="Running behind a ball" option-4-results-category="Dog">
+            </amp-story-interactive-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-3">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="filter:blur(4px)"
+                src="https://images.unsplash.com/photo-1534534573898-db5148bc8b0c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80" layout="responsive" height="1600" width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-poll
+            id="poll-3"
+                prompt-text="What would you do for holidays?"
+                style="--interactive-prompt-background: linear-gradient(120deg, rgb(83, 32, 10), rgb(143, 89, 8));"
+                endpoint="http://localhost:3000/interactives"
+                theme="dark"
+                option-1-text="Easter island" option-1-results-category="Bunny"
+                option-2-text="Drive with your tongue out" option-2-results-category="Dog"
+                option-3-text="Get far away from cats" option-3-results-category="Mouse"
+                option-4-text="Stay in bed sleeping" option-4-results-category="Cat">
+            </amp-story-interactive-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-4">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://images.unsplash.com/photo-1559807424-a38a6b10c833?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80" layout="responsive" height="1600" width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-poll
+            id="poll-4"
+                prompt-text="What's your favorite place in the house?"
+                endpoint="http://localhost:3000/interactives"
+                option-1-text="Inside my spacious cage" option-1-results-category="Mouse"
+                option-2-text="On the backyard" option-2-results-category="Bunny"
+                option-3-text="Where my owner is" option-3-results-category="Dog"
+                option-4-text="On top of the fridge" option-4-results-category="Cat">
+            </amp-story-interactive-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-results">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="filter:blur(4px)"
+                src="https://www.positive.news/wp-content/uploads/2019/03/feat-1800x0-c-center.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <amp-story-interactive-results
+								style="--interactive-accent-color: #F34E4E"
+								prompt-text="You are a"
+                option-1-results-category="Cat" option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH" option-1-image="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"
+                option-2-results-category="Dog" option-2-text="You always have energy and love being with friends. Outdoors is your favorite place" option-2-image="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg"
+                option-3-results-category="Bunny" option-3-text="You love jumping around and having fun. Your bubbly personality is contagious, and your love for carrots is unconditional" option-3-image="https://images.pexels.com/photos/326012/pexels-photo-326012.jpeg"
+                option-4-results-category="Mouse" option-4-text="Even though you're small, you're also full of curiosity and love going around finding new things to do" option-4-image="https://images.pexels.com/photos/51340/rat-pets-eat-51340.jpeg">
+            </amp-story-interactive-results>
+          </amp-story-grid-layer>
+				</amp-story-page>
+				<amp-story-page id="quiz-results-2">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="filter:blur(4px)"
+                src="https://www.positive.news/wp-content/uploads/2019/03/feat-1800x0-c-center.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <amp-story-interactive-results
+								style="--interactive-accent-color: #F34E4E"
+								prompt-text="You are a"
+								theme="dark"
+                option-1-results-category="Cat" option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH" option-1-image="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"
+                option-2-results-category="Dog" option-2-text="You always have energy and love being with friends. Outdoors is your favorite place" option-2-image="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg"
+                option-3-results-category="Bunny" option-3-text="You love jumping around and having fun. Your bubbly personality is contagious, and your love for carrots is unconditional" option-3-image="https://images.pexels.com/photos/326012/pexels-photo-326012.jpeg"
+                option-4-results-category="Mouse" option-4-text="Even though you're small, you're also full of curiosity and love going around finding new things to do" option-4-image="https://images.pexels.com/photos/51340/rat-pets-eat-51340.jpeg">
+            </amp-story-interactive-results>
+          </amp-story-grid-layer>
+        </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/interactive_quizzes.html b/examples/amp-story/interactive_quizzes.html
new file mode 100644
index 0000000000000..3ce113aa479cc
--- /dev/null
+++ b/examples/amp-story/interactive_quizzes.html
@@ -0,0 +1,553 @@
+<!--
+  Copyright 2020 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.
+-->
+
+<!doctype html>
+<html ⚡ lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <meta name="description" content="This is an interactive story with quizzes.">
+    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
+    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-story-1.0.js">
+    <link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin>
+    <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-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+    <!-- Import other AMP Extensions here -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap" rel="stylesheet">
+    <style amp-custom>
+    /* Add your styles here */
+    body {
+      font-family: 'Poppins', sans-serif;
+      color: white;
+    }
+
+    .cover-img {
+      filter: brightness(60%);
+    }
+
+    .quiz-img {
+      filter: brightness(80%);
+    }
+
+    .cover-content, .quiz-content {
+      padding: 6em 2em 2em 2em;
+    }
+
+    .cover-content {
+      text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.253);
+    }
+
+    #cover-publisher {
+      font-size: small;
+      letter-spacing: 4px;
+    }
+
+    #cover-title {
+      font-size: 3rem;
+      line-height: 4rem;
+    }
+
+    #cover-description {
+      font-size: 1.85rem;
+      margin-top: 32px;
+    }
+
+    .quiz-btn.start {
+      padding: 10px 20px;
+    }
+
+    .quiz-btn.start svg {
+      margin-left: 10px;
+      animation: start-btn-anim 0.7s ease-in-out 0s infinite alternate;
+    }
+
+    .quiz-lower {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: absolute;
+      bottom: 0px;
+      left: 0px;
+      right: 0px;
+      padding: 2em 4em;
+      padding-top: 10em;
+      background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+    }
+
+    .quiz-progress {
+      font-weight: bold;
+      font-size: 0.7em;
+    }
+
+    .quiz-btn {
+      background-color: rgba(0, 0, 0, 0.8);
+      display: flex;
+      align-items: center;
+      font-size: 20px;
+      padding: 16px;
+      border-radius: 27px;
+      border: 2px solid white;
+      align-self: flex-end;
+      font-weight: bold;
+    }
+
+    .quiz-btn.prev {
+      transform: rotate(180deg);
+    }
+
+    amp-story-interactive-quiz, .quiz-fact, amp-story-interactive-results {
+      margin-bottom: 4em;
+      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.274);
+      border-radius: 32px;
+    }
+
+    amp-story-interactive-quiz {
+      --gradient1: linear-gradient(150deg, #49a300, #1c6904);
+      --accent1: #0fda19;
+      --gradient2: linear-gradient(150deg, #da450b, #ffa600);
+      --accent2: #ff6600;
+      --gradient3: linear-gradient(150deg, #a26ef7, #1f1bf5);
+      --accent3: #a26ef7;
+      --gradient4: linear-gradient(150deg, #0084ff, #00c3ff);
+      --accent4: #00c3ff;
+    }
+
+    .quiz-fact {
+      text-align: center;
+      color: black;
+      max-width: 400px;
+      background-color: white;
+      padding: 1em;
+      border-radius: 32px;
+      font-size: 0.8em;
+    }
+
+    @keyframes start-btn-anim {
+      from {transform: translateX(0px)}
+      to {transform: translateX(4px)}
+    }
+
+    .space-vertical {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .space-center {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .quiz-upper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      right: 0px;
+      padding: 2em 4em;
+    }
+
+    .quiz-timer {
+      position: relative;
+      height: 54px;
+    }
+
+    .quiz-timer svg {
+      width: 54px;
+      height: 54px;
+      transform: rotateY(-180deg) rotateZ(-90deg);
+    }
+
+    amp-story-page[active] .quiz-timer circle {
+      animation: countdown 12s linear 1 forwards;
+    }
+
+    .quiz-timer circle {
+      stroke-dasharray: 169px;
+      stroke-dashoffset: 0px;
+      stroke-linecap: round;
+      stroke-width: 2px;
+      stroke: white;
+      fill: black;
+    }
+
+    .quiz-timer-nums {
+      height: 30px;
+      line-height: 30px;
+      overflow: hidden;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: black;
+      font-weight: bold;
+    }
+
+    amp-story-page[active] .quiz-timer-nums div {
+      animation: countdown-nums 11s cubic-bezier(1.000, 0.1, 0.000, 0.9) 1 forwards;
+      text-align: center;
+    }
+
+    amp-story-cta-layer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .docs-btn {
+      background-color: rgba(0, 0, 0, 0.8);
+      display: inline-block;
+      font-size: 20px;
+      padding: 10px 20px;
+      border-radius: 50px;
+      border: 2px solid white;
+      align-self: center;
+      font-weight: bold;
+      color: white;
+      text-decoration: none;
+    }
+
+    @keyframes bounce {
+      from {
+        transform: scale(1) rotate(30deg);
+      }
+      to {
+        transform: scale(1.1) rotate(32deg);
+      }
+    }
+
+    @keyframes countdown {
+      from {
+        stroke-dashoffset: 169px;
+      }
+      to {
+        stroke-dashoffset: 0px;
+      }
+    }
+
+    @keyframes countdown-nums {
+      0% {
+        transform: translateY(0px);
+      }
+      10% {
+        transform: translateY(-30px);
+      }
+      20% {
+        transform: translateY(-60px);
+      }
+      30% {
+        transform: translateY(-90px);
+      }
+      40% {
+        transform: translateY(-120px);
+      }
+      50% {
+        transform: translateY(-150px);
+      }
+      60% {
+        transform: translateY(-180px);
+      }
+      70% {
+        transform: translateY(-210px);
+      }
+      80% {
+        transform: translateY(-240px);
+      }
+      90% {
+        transform: translateY(-270px);
+      }
+      100% {
+        transform: translateY(-300px);
+      }
+    }
+    </style>
+    <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>
+    <link rel="canonical" href=".">
+    <title>Name that artist</title>
+  </head>
+  <body>
+    <amp-story standalone
+      publisher="Stories Format"
+      title="Name that artist"
+      poster-portrait-src="./last_supper.jpg"
+      publisher-logo-src="https://amp.dev/static/img/icons/icon-512x512.png">
+      <amp-story-page id="cover">
+        <amp-story-grid-layer template="fill">
+          <amp-img
+            class="cover-img"
+            layout="fixed" width="1600" height="1200"
+            src="https://images.unsplash.com/flagged/photo-1572392640988-ba48d1a74457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1080&q=80"/>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="cover-content space-vertical">
+            <div id="cover-top">
+              <h3 id="cover-publisher">WEB STORIES</h3>
+              <h1 id="cover-title">NAME THAT ARTIST</h1>
+              <p id="cover-description">What do you know about famous artists of the past and present?</p>
+            </div>
+            <div class="quiz-btn start">
+              <span>Start the quiz</span>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px" stroke="white">
+                <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
+              </svg>
+            </div>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <amp-story-page id="quiz-1">
+        <amp-story-grid-layer template="fill">
+          <amp-img class="quiz-img"
+            animate-in="zoom-in"
+            animate-in-duration="30s"
+            scale-start="1"
+            scale-end="1.3"
+            object-position="50% 50%"
+            layout="fixed" width="1600" height="1200"
+            src="https://images.unsplash.com/photo-1548940740-204726a19be3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1235&q=80"/>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="quiz-content space-center">
+            <div class="quiz-upper">
+              <div class="quiz-timer">
+                <svg><circle r="25" cx="27" cy="27"></circle></svg>
+                <div class="quiz-timer-nums">
+                  <div>10<br>9<br>8<br>7<br>6<br>5<br>4<br>3<br>2<br>1<br>0</div>
+                </div>
+              </div>
+            </div>
+            <div class="quiz-lower">
+              <div class="quiz-progress">1 / 4</div>
+              <div class="quiz-btn next">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px" stroke="white">
+                  <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
+                </svg>
+              </div>
+            </div>
+            <amp-story-interactive-quiz
+              id="quiz-1"
+              style="--interactive-prompt-background: var(--gradient1); --interactive-accent-color: var(--accent1)"
+              prompt-text="Who was the artist that created the famous painting &quot;The Last Supper&quot;?"
+              theme="dark"
+              chip-style="shadow"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/response2.json"
+              option-1-text="Michelangelo"
+              option-2-text="Leonardo da Vinci" option-2-correct option-2-confetti="🎨"
+              option-3-text="Raphael"
+              option-4-text="Sandro Boticelli">
+            </amp-story-interactive-quiz>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <amp-story-page id="quiz-2">
+        <amp-story-grid-layer template="fill">
+          <amp-img class="quiz-img"
+            animate-in="zoom-in"
+            animate-in-duration="30s"
+            scale-start="1"
+            scale-end="1.3"
+            object-position="53% 50%"
+            layout="fixed" width="1600" height="1200"
+            src="https://images.unsplash.com/photo-1493841160601-33a4807cb6de?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2978&q=80"/>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="quiz-content space-center">
+            <div class="quiz-upper">
+              <div class="quiz-timer">
+                <svg><circle r="25" cx="27" cy="27"></circle></svg>
+                <div class="quiz-timer-nums">
+                  <div>10<br>9<br>8<br>7<br>6<br>5<br>4<br>3<br>2<br>1<br>0</div>
+                </div>
+              </div>
+            </div>
+            <div class="quiz-lower">
+              <div class="quiz-btn prev">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px" stroke="white">
+                  <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
+                </svg>
+              </div>
+              <div class="quiz-progress">2 / 4</div>
+              <div class="quiz-btn next">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px" stroke="white">
+                  <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
+                </svg>
+              </div>
+            </div>
+            <amp-story-interactive-quiz
+              id="quiz-2"
+              style="--interactive-prompt-background: var(--gradient2); --interactive-accent-color: var(--accent2)"
+              prompt-text="How many paintings did Vincent Van Gogh sell in his life?"
+              chip-style="shadow"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/response1.json"
+              option-1-text="1 painting" option-1-correct option-1-confetti="💰"
+              option-2-text="7 paintings"
+              option-3-text="21 paintings"
+              option-4-text="78 paintings">
+            </amp-story-interactive-quiz>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <amp-story-page id="quiz-3">
+        <amp-story-grid-layer template="fill">
+          <amp-img class="quiz-img"
+          animate-in="zoom-in"
+          animate-in-duration="30s"
+          scale-start="1"
+          scale-end="1.3"
+          object-position="50% 50%"
+          layout="fixed" width="1600" height="1200"
+          src="https://images.unsplash.com/photo-1482775907821-a56ec43344fc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2552&q=80"/>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="quiz-content space-center">
+            <div class="quiz-upper">
+              <div class="quiz-timer">
+                <svg><circle r="25" cx="27" cy="27"></circle></svg>
+                <div class="quiz-timer-nums">
+                  <div>10<br>9<br>8<br>7<br>6<br>5<br>4<br>3<br>2<br>1<br>0</div>
+                </div>
+              </div>
+            </div>
+            <div class="quiz-lower">
+              <div class="quiz-btn prev">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px" stroke="white">
+                  <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
+                </svg>
+              </div>
+              <div class="quiz-progress">3 / 4</div>
+              <div class="quiz-btn next">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px" stroke="white">
+                  <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
+                </svg>
+              </div>
+            </div>
+            <amp-story-interactive-quiz
+              id="quiz-3"
+              style="--interactive-prompt-background: var(--gradient3); --interactive-accent-color: var(--accent3)"
+              theme="dark"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/response4.json"
+              prompt-text="Who painted the surrealist artwork &quot;The Persistence of Memory&quot;?"
+              option-1-text="Pablo Picasso"
+              option-2-text="Rene Magritte"
+              option-3-text="Monet"
+              option-4-text="Salvador Dali" option-4-correct option-4-confetti="⏰">
+            </amp-story-interactive-quiz>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <amp-story-page id="quiz-4">
+        <amp-story-grid-layer template="fill">
+          <amp-img class="quiz-img"
+          animate-in="zoom-in"
+          animate-in-duration="30s"
+          scale-start="1"
+          scale-end="1.3"
+          object-position="50% 50%"
+          layout="fixed" width="1600" height="1200"
+          src="https://images.unsplash.com/photo-1580089056071-11f31b94fefe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2553&q=80"/>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="quiz-content space-center">
+            <div class="quiz-upper">
+              <div class="quiz-timer">
+                <svg><circle r="25" cx="27" cy="27"></circle></svg>
+                <div class="quiz-timer-nums">
+                  <div>10<br>9<br>8<br>7<br>6<br>5<br>4<br>3<br>2<br>1<br>0</div>
+                </div>
+              </div>
+            </div>
+            <div class="quiz-lower">
+              <div class="quiz-btn prev">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px" stroke="white">
+                  <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
+                </svg>
+              </div>
+              <div class="quiz-progress">4 / 4</div>
+            </div>
+            <amp-story-interactive-quiz
+              id="quiz-4"
+              style="--interactive-prompt-background: var(--gradient4); --interactive-accent-color: var(--accent4)"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/response3.json"
+              prompt-text="Who introduced pop art?"
+              option-1-text="David Hockney"
+              option-2-text="Keith Haring"
+              option-3-text="Andy Warhol" option-3-correct option-3-confetti="🖍️"
+              option-4-text="Richard Hamilton">
+            </amp-story-interactive-quiz>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <amp-story-page id="quiz-results-1">
+        <amp-story-grid-layer template="fill">
+          <amp-img style="filter:blur(4px)"
+            src="https://images.unsplash.com/photo-1515405295579-ba7b45403062?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80"
+            layout="fixed"
+            height="1600"
+            width="900">
+          </amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="quiz-content space-center">
+            <amp-story-interactive-results
+              style="--interactive-accent-color: #F34E4E"
+              prompt-text="You are"
+              option-1-results-category="Art Expert" option-1-text="You got it all! Your knowledge in art is impeccable, be proud of it" option-1-image="https://images.unsplash.com/photo-1441471349424-351990746ff4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-1-results-threshold="100" option-1-confetti="🎨"
+              option-2-results-category="Art Enthusiast" option-2-text="Keep going! Learning about art is fun and interesting" option-2-image="https://images.unsplash.com/photo-1500628550463-c8881a54d4d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-2-results-threshold="75" option-2-confetti="🎨"
+              option-3-results-category="Art Beginner" option-3-text="Don't feel bad! You're on the right track, keep learning and you will ace this" option-3-image="https://images.unsplash.com/photo-1482245294234-b3f2f8d5f1a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-3-results-threshold="50" option-3-confetti="🎨"
+              option-4-results-category="Art Ignorant" option-4-text="Not everyone was born for this, go find something else you like. Or start learning, your choice" option-4-image="https://images.unsplash.com/photo-1471666875520-c75081f42081?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-4-results-threshold="0" option-4-confetti="🎨">
+          </amp-story-interactive-results>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <amp-story-page id="quiz-results-2">
+        <amp-story-grid-layer template="fill">
+          <amp-img style="filter:blur(4px)"
+            src="https://images.unsplash.com/photo-1515405295579-ba7b45403062?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80"
+            layout="fixed"
+            height="1600"
+            width="900">
+          </amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="quiz-content space-center">
+            <amp-story-interactive-results
+              animate-in="fly-in-bottom"
+              style="--interactive-accent-color: #A34EFE"
+              prompt-text="You are"
+              option-1-results-category="Art Expert" option-1-text="You got it all! Your knowledge in art is impeccable, be proud of it" option-1-image="https://images.unsplash.com/photo-1441471349424-351990746ff4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-1-results-threshold="100"
+              option-2-results-category="Art Enthusiast" option-2-text="Keep going! Learning about art is fun and interesting" option-2-image="https://images.unsplash.com/photo-1500628550463-c8881a54d4d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-2-results-threshold="75"
+              option-3-results-category="Art Beginner" option-3-text="Don't feel bad! You're on the right track, keep learning and you will ace this" option-3-image="https://images.unsplash.com/photo-1482245294234-b3f2f8d5f1a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-3-results-threshold="50"
+              option-4-results-category="Art Ignorant" option-4-text="Not everyone was born for this, go find something else you like. Or start learning, your choice" option-4-image="https://images.unsplash.com/photo-1471666875520-c75081f42081?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-4-results-threshold="0">
+          </amp-story-interactive-results>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/interactive_results.html b/examples/amp-story/interactive_results.html
new file mode 100644
index 0000000000000..b2f9dc55e6875
--- /dev/null
+++ b/examples/amp-story/interactive_results.html
@@ -0,0 +1,369 @@
+<!doctype html>
+<html ⚡ lang="es">
+  <head>
+    <meta charset="utf-8">
+    <title >Interactive Story</title>
+    <link rel="canonical" href="interactive_Results.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <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-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
+    <script async custom-element="amp-animation-polyfill" src="https://cdn.ampproject.org/v0/amp-animation-polyfill-0.1.js"></script>
+    <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
+    <script async custom-element="amp-story-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+    <style amp-custom>
+    body {
+      font-family: 'Poppins', sans-serif;
+    }
+
+    .center {
+      align-self: center;
+      display: inline;
+      justify-self: center;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    amp-story-interactive-results[chip-style="transparent"] {
+      border: 5px solid white;
+      background: linear-gradient(140deg, #ffffff55 25%, transparent 25%, transparent 39%, #ffffffaa 39%, #ffffff77 75%, transparent 75%, transparent 90%, #ffffffaa 90%);
+      border-radius: 2em;
+    }
+
+    amp-story-interactive-results[chip-style="transparent"][theme="dark"] {
+      background: transparent;
+      border: 2px double white;
+    }
+
+    amp-story-interactive-results[chip-style="transparent"].sharp {
+      background: linear-gradient(white 20%, #f5d7dc 20%, #f5d7dc 50%, white 50%);
+      border-radius: 0px;
+      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+      border: none;
+      --interactive-accent-color: #df1234;
+    }
+    </style>
+  </head>
+  <body>
+    <amp-story
+        standalone
+        title="Interactive Story"
+        publisher="AMP Story testing"
+        publisher-logo-src="example.com/logo.png"
+        poster-portrait-src="example.com/poster.jpg">
+        <amp-story-page id="cover">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                animate-in="pan-left"
+                animate-in-duration="30s"
+                src="https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?auto=format&fit=crop&w=1164&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="thirds">
+            <div style="color:white;padding:10px;align-self:end" grid-area="lower-third">
+              <h1>Do you want to see results?</h1>
+              <p>Yes you do!</p>
+              <p>We have cool new designs</p>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+
+        <amp-story-page id="quiz-results">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?auto=format&fit=crop&w=1164&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <div class="center">
+            <amp-story-interactive-results
+                style="--interactive-accent-color: #F34E4E"
+                animate-in="fade-in"
+                prompt-text="You are a"
+                option-1-results-category="Cat"
+                option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
+                option-1-image="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"
+                option-2-results-category="Dog">
+            </amp-story-interactive-results>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-results-dark">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?auto=format&fit=crop&w=1164&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <div class="center">
+            <amp-story-interactive-results
+                style="--interactive-accent-color: #F34E4E;"
+                animate-in="drop"
+                theme="dark"
+                prompt-text="You are a"
+                option-1-results-category="Cat"
+                option-1-image="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"
+                option-1-results-threshold="0"
+                option-2-results-category="Dog" option-2-results-threshold="100">
+            </amp-story-interactive-results>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+
+        <amp-story-page id="quiz-results-no-image" style="background-color:black">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="opacity:0.5"
+                src="https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?auto=format&fit=crop&w=1164&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <div class="center">
+            <amp-story-interactive-results
+                style="--interactive-accent-color: #F34E4E"
+                animate-in="fly-in-bottom"
+                prompt-text="You are a"
+                option-1-results-category="Cat"
+                option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
+                option-1-results-threshold="0"
+                option-2-results-category="Dog" option-2-results-threshold="100">
+            </amp-story-interactive-results>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-results-no-image-score" style="background-color:black">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="opacity:0.5"
+                src="https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?auto=format&fit=crop&w=1164&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <div class="center">
+            <amp-story-interactive-results
+                style="--interactive-accent-color: #FFAABB"
+                animate-in="rotate-in-left"
+                prompt-text="You are a"
+                option-1-results-category="Cat"
+                option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
+                option-2-results-category="Dog">
+            </amp-story-interactive-results>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+
+        <amp-story-page id="quiz-results-transparent" style="background-color:white">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="opacity:0.7"
+                src="https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?auto=format&fit=crop&w=1164&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <div class="center">
+            <amp-story-interactive-results
+                style="--interactive-accent-color: #531E2E"
+                animate-in="fly-in-top"
+                chip-style="transparent"
+                prompt-text="You are a"
+                option-1-results-category="Cat"
+                option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
+                option-1-image="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"
+                option-2-results-category="Dog">
+            </amp-story-interactive-results>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-results-dark-transparent" style="background-color:black">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="opacity:0.5"
+                src="https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?auto=format&fit=crop&w=1164&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <div class="center">
+            <amp-story-interactive-results
+                style="--interactive-accent-color: #FFAABB"
+                animate-in="twirl-in"
+                chip-style="transparent"
+                theme="dark"
+                prompt-text="You are a"
+                option-1-results-category="Cat"
+                option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
+                option-1-image="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"
+                option-1-results-threshold="0"
+                option-2-results-category="Dog" option-2-results-threshold="100">
+            </amp-story-interactive-results>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-results-transparent-no-image" style="background-color:black">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="opacity:0.5"
+                src="https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?auto=format&fit=crop&w=1164&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <div class="center">
+            <amp-story-interactive-results
+                style="--interactive-accent-color: #F34E4E; --interactive-prompt-background: #ffffff33"
+                animate-in="pulse"
+                prompt-text="You are a"
+                theme="dark"
+                chip-style="transparent"
+                option-1-results-category="Cat"
+                option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
+                option-1-results-threshold="0"
+                option-2-results-category="Dog" option-2-results-threshold="100">
+            </amp-story-interactive-results>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-results-transparent-no-image-dark" style="background-color:white">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="opacity:0.5"
+                src="https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?auto=format&fit=crop&w=1164&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <div class="center">
+            <amp-story-interactive-results
+                style="--interactive-accent-color: #F34E4E"
+                prompt-text="You are a"
+                chip-style="transparent"
+                option-1-results-category="Cat"
+                option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
+                option-1-results-threshold="0"
+                option-2-results-category="Dog" option-2-results-threshold="100">
+            </amp-story-interactive-results>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+
+        <amp-story-page id="quiz-results-light-score-no-image-top-transparent" style="background-color:white">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="opacity:0.5"
+                src="https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?auto=format&fit=crop&w=1164&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <div class="center">
+            <amp-story-interactive-results
+                style="--interactive-accent-color: #F34E4E; --interactive-prompt-background:transparent"
+                animate-in="scale-fade-down"
+                prompt-text="You are a"
+                option-1-results-category="Cat"
+                option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
+                option-1-results-threshold="0"
+                option-2-results-category="Dog" option-2-results-threshold="100">
+            </amp-story-interactive-results>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+
+        <amp-story-page id="quiz-results-light-with-score" style="background-color:white">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="opacity:0.5"
+                src="https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?auto=format&fit=crop&w=1164&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <div class="center">
+            <amp-story-interactive-results
+                style="--interactive-accent-color: #F34E4E"
+                animate-in="whoosh-in-right"
+                prompt-text="You are a"
+                option-1-results-category="Cat"
+                option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
+                option-1-image="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"
+                option-1-results-threshold="0"
+                option-2-results-category="Dog" option-2-results-threshold="100">
+            </amp-story-interactive-results>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+
+        <amp-story-page id="quiz-results-light-with-score-colored" style="background-color:white">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="opacity:0.5"
+                src="https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?auto=format&fit=crop&w=1164&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <div class="center">
+            <amp-story-interactive-results
+                style="--interactive-accent-color: #F34E4E; --interactive-prompt-background:linear-gradient(orange, red);--interactive-prompt-text-color:black"
+                animate-in="fly-in-right"
+                prompt-text="You are a"
+                option-1-results-category="Cat"
+                option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
+                option-1-results-threshold="0"
+                option-2-results-category="Dog" option-2-results-threshold="100">
+            </amp-story-interactive-results>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+
+        <amp-story-page id="quiz-results-transparent-sharp" style="background-color:white">
+          <amp-story-grid-layer template="fill">
+            <amp-img style="opacity:0.5"
+                src="https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?auto=format&fit=crop&w=1164&q=80"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer>
+            <div class="center">
+            <amp-story-interactive-results
+                animate-in="rotate-in-right"
+                prompt-text="You are a"
+                class="sharp"
+                chip-style="transparent"
+                option-1-results-category="Cat"
+                option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
+                option-1-image="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"
+                option-1-results-threshold="0"
+                option-2-results-category="Dog" option-2-results-threshold="100">
+            </amp-story-interactive-results>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/interactive_size.html b/examples/amp-story/interactive_size.html
new file mode 100644
index 0000000000000..eb73137f2f800
--- /dev/null
+++ b/examples/amp-story/interactive_size.html
@@ -0,0 +1,319 @@
+<!--
+  Copyright 2020 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.
+-->
+
+<!doctype html>
+<html ⚡ lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <meta name="description" content="This is an interactive story with quizzes.">
+    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
+    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-story-1.0.js">
+    <link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin>
+    <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-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+    <!-- Import other AMP Extensions here -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap" rel="stylesheet">
+    <style amp-custom>
+    /* Add your styles here */
+    body {
+      font-family: 'Poppins', sans-serif;
+      color: white;
+    }
+
+    .best {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 0.8em;
+      width: 22em;
+    }
+
+    .best.red {
+      --interactive-accent-color: red;
+      font-size: 0.23em;
+    }
+
+    .center-quiz {
+      position: relative;
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    amp-story-grid-layer[aspect-ratio] .announcement, amp-story-grid-layer[aspect-ratio] .announcement-2 {
+      font-size: 0.2em;
+    }
+
+    .announcement {
+      color: black;
+      background-color: white;
+      font-size: .6em;
+      position: absolute;
+      top: 15%;
+      left: 70%;
+      width: 30%;
+      height: 10%;
+      transform: translateX(-50%);
+      padding: 2%;
+      text-align: center;
+      z-index: -1;
+    }
+
+    .circle-bottom {
+      position: absolute;
+      top: 75%;
+      left: 20%;
+      transform: translate(-50%, -50%);
+      width: 13%;
+      height: 8%;
+      background: black;
+      border-radius: 50%;
+      z-index: -1;
+    }
+    </style>
+    <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>
+    <link rel="canonical" href=".">
+    <title>Name that artist</title>
+  </head>
+  <body>
+    <amp-story standalone
+      publisher="Stories Format"
+      title="Name that artist"
+      poster-portrait-src="./last_supper.jpg"
+      publisher-logo-src="https://amp.dev/static/img/icons/icon-512x512.png">
+      <amp-story-page id="quiz-1">
+        <amp-story-grid-layer template="fill">
+          <amp-img
+            animate-in="zoom-in"
+            animate-in-duration="30s"
+            scale-start="1"
+            scale-end="1.3"
+            object-position="50% 50%"
+            layout="fixed" width="1600" height="1200"
+            src="https://images.unsplash.com/photo-1548940740-204726a19be3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1235&q=80"/>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="center-quiz">
+            <div class="circle-bottom"></div>
+            <amp-story-interactive-quiz
+              class="best"
+              id="quiz-1"
+              prompt-text="Who was the artist that created the famous painting &quot;The Last Supper&quot;?"
+              theme="dark"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/response2.json"
+              option-1-text="Michelangelo"
+              option-2-text="Leonardo da Vinci" option-2-correct option-2-confetti="🎨"
+              option-3-text="Raphael"
+              option-4-text="Sandro Boticelli">
+            </amp-story-interactive-quiz>
+            <div class="announcement">
+              This grid-layer doesn't have aspect-ratio
+            </div>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <amp-story-page id="quiz-2">
+        <amp-story-grid-layer template="vertical">
+          <amp-img
+            animate-in="zoom-in"
+            animate-in-duration="30s"
+            scale-start="1"
+            scale-end="1.3"
+            object-position="50% 50%"
+            layout="fixed" width="1600" height="1200"
+            src="https://images.unsplash.com/photo-1548940740-204726a19be3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1235&q=80"/>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill" aspect-ratio="412:618">
+            <div class="center-quiz">
+              <div class="circle-bottom"></div>
+              <amp-story-interactive-quiz
+              class="best red"
+              id="quiz-2"
+              prompt-text="Who was the artist that created the famous painting &quot;The Last Supper&quot;?"
+              theme="dark"
+              chip-style="shadow"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/response2.json"
+              option-1-text="Michelangelo"
+              option-2-text="Leonardo da Vinci" option-2-correct option-2-confetti="🎨"
+              option-3-text="Raphael"
+              option-4-text="Sandro Boticelli">
+            </amp-story-interactive-quiz>
+            <div class="announcement">
+              This grid-layer has aspect-ratio
+            </div>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="poll-1">
+        <amp-story-grid-layer template="fill">
+          <amp-img
+            animate-in="zoom-in"
+            animate-in-duration="30s"
+            scale-start="1"
+            scale-end="1.3"
+            object-position="50% 50%"
+            layout="fixed" width="1600" height="1200"
+            src="https://images.unsplash.com/photo-1548940740-204726a19be3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1235&q=80"/>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="center-quiz">
+            <div class="circle-bottom"></div>
+            <amp-story-interactive-poll
+              class="best"
+              id="poll-1"
+              prompt-text="Who was the artist that created the famous painting &quot;The Last Supper&quot;?"
+              theme="dark"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/response2.json"
+              option-1-text="Michelangelo"
+              option-2-text="Leonardo da Vinci" option-2-confetti="🎨"
+              option-3-text="Raphael"
+              option-4-text="Sandro Boticelli">
+            </amp-story-interactive-poll>
+            <div class="announcement">
+              This grid-layer doesn't have aspect-ratio
+            </div>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <amp-story-page id="poll-2">
+        <amp-story-grid-layer template="vertical">
+          <amp-img
+            animate-in="zoom-in"
+            animate-in-duration="30s"
+            scale-start="1"
+            scale-end="1.3"
+            object-position="50% 50%"
+            layout="fixed" width="1600" height="1200"
+            src="https://images.unsplash.com/photo-1548940740-204726a19be3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1235&q=80"/>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill" aspect-ratio="412:618">
+            <div class="center-quiz">
+              <div class="circle-bottom"></div>
+              <amp-story-interactive-poll
+              class="best red"
+              id="poll-2"
+              prompt-text="Who was the artist that created the famous painting &quot;The Last Supper&quot;?"
+              theme="dark"
+              chip-style="shadow"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/response2.json"
+              option-1-text="Michelangelo"
+              option-2-text="Leonardo da Vinci" option-2-confetti="🎨"
+              option-3-text="Raphael"
+              option-4-text="Sandro Boticelli">
+            </amp-story-interactive-poll>
+            <div class="announcement">
+              This grid-layer has aspect-ratio
+            </div>
+            </div>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="binary-poll-1">
+        <amp-story-grid-layer template="fill">
+          <amp-img
+            animate-in="zoom-in"
+            animate-in-duration="30s"
+            scale-start="1"
+            scale-end="1.3"
+            object-position="50% 50%"
+            layout="fixed" width="1600" height="1200"
+            src="https://images.unsplash.com/photo-1548940740-204726a19be3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1235&q=80"/>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="center-quiz">
+            <div class="circle-bottom"></div>
+            <amp-story-interactive-binary-poll
+              class="best"
+              id="binary-poll-1"
+              prompt-text="Who was the artist that created the famous painting &quot;The Last Supper&quot;?"
+              theme="dark"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/response2.json"
+              option-1-text="😁"
+              option-2-text="😒">
+            </amp-story-interactive-binary-poll>
+            <div class="announcement">
+              This grid-layer doesn't have aspect-ratio
+            </div>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <amp-story-page id="binary-poll-2">
+        <amp-story-grid-layer template="vertical">
+          <amp-img
+            animate-in="zoom-in"
+            animate-in-duration="30s"
+            scale-start="1"
+            scale-end="1.3"
+            object-position="50% 50%"
+            layout="fixed" width="1600" height="1200"
+            src="https://images.unsplash.com/photo-1548940740-204726a19be3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1235&q=80"/>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill" aspect-ratio="412:618">
+            <div class="center-quiz">
+              <div class="circle-bottom"></div>
+              <amp-story-interactive-binary-poll
+              class="best red"
+              id="binary-poll-2"
+              prompt-text="Who was the artist that created the famous painting &quot;The Last Supper&quot;?"
+              theme="dark"
+              chip-style="shadow"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/response2.json"
+              option-1-text="yes"
+              option-2-text="no" option-2-confetti="🎨">
+            </amp-story-interactive-binary-poll>
+            <div class="announcement">
+              This grid-layer has aspect-ratio
+            </div>
+            </div>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="results-1">
+        <amp-story-grid-layer template="vertical">
+          <amp-img
+            animate-in="zoom-in"
+            animate-in-duration="30s"
+            scale-start="1"
+            scale-end="1.3"
+            object-position="50% 50%"
+            layout="fixed" width="1600" height="1200"
+            src="https://images.unsplash.com/photo-1548940740-204726a19be3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1235&q=80"/>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill" aspect-ratio="412:618">
+            <div class="center-quiz">
+              <div class="circle-bottom"></div>
+              <amp-story-interactive-results
+              class="best red"
+              style="--interactive-accent-color: #F34E4E"
+              prompt-text="You are"
+              option-1-results-category="Art Expert" option-1-text="You got it all! Your knowledge in art is impeccable, be proud of it" option-1-image="https://images.unsplash.com/photo-1441471349424-351990746ff4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-1-results-threshold="0"
+              option-2-results-category="Art Enthusiast">
+            </amp-story-interactive-results>
+            <div class="announcement">
+              This grid-layer has aspect-ratio
+            </div>
+            </div>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/interactives.html b/examples/amp-story/interactives.html
new file mode 100644
index 0000000000000..70c25de43d4f4
--- /dev/null
+++ b/examples/amp-story/interactives.html
@@ -0,0 +1,546 @@
+<!doctype html>
+<html ⚡ lang="es">
+  <head>
+    <meta charset="utf-8">
+    <title>Interactive Story</title>
+    <link rel="canonical" href="interactives.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+      body {
+        font-family: 'Rubik', sans-serif;
+      }
+      amp-story-interactive-quiz, amp-story-interactive-binary-poll, amp-story-interactive-poll, amp-story-interactive-results {
+        justify-self: center;
+      }
+    </style>
+    <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-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <amp-story
+        standalone
+        title="Interactive Story"
+        publisher="AMP Story testing"
+        publisher-logo-src="example.com/logo.png"
+        poster-portrait-src="example.com/poster.jpg">
+        <amp-story-page id="cover">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="img/overview.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="vertical">
+            <div style="background: #000000aa;color:white;padding:10px">
+              <h2>What is the best story ever?</h2>
+              <p>and other interactive components</p>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-intl">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="img/roadshow.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+                <h1 style="position: absolute;top: 0;z-index: 1">
+                  This is a
+                  <a href="https://example.com" tabindex="2">Link</a>
+                </h1>
+
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-quiz
+                id="international-quiz-dark"
+                endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+                style="--interactive-accent-color: #ffa600;--interactive-prompt-background: linear-gradient(150deg, #da450b, #ffa600)"
+                theme="dark"
+                chip-style="shadow"
+                prompt-text="Is this an international quiz?"
+                option-1-text="你好，这是马蒂亚斯"
+                option-2-text="مرحبا هذا ماتياس"
+                option-3-text="Yes it is, this is indeed an international quiz" option-3-correct
+                option-3-confetti="🌎"
+                option-4-text="ब्राज़ील यहाँ होना चाहिए">
+            </amp-story-interactive-quiz>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-1">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="img/roadshow.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+
+            <amp-story-interactive-quiz
+                id="first-cup-dark"
+                endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+                style="--interactive-accent-color: #20AC5E;"
+                theme="dark"
+                prompt-text="Who won the first soccer world cup?"
+                option-1-text="France"
+                option-2-text="Spain"
+                option-3-text="Uruguay" option-3-correct
+                option-3-confetti="🇺🇾"
+                option-4-text="Brazil">
+            </amp-story-interactive-quiz>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-1b">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="img/roadshow.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-quiz
+                id="last-cup-dark"
+                prompt-text="Who won the last soccer world cup?"
+                endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+                style="--interactive-accent-color: rgb(221, 17, 229);"
+                option-1-text="France" option-1-correct
+                option-1-confetti="🇫🇷"
+                option-2-text="Spain"
+                option-3-text="Uruguay"
+                option-4-text="Brazil"
+                chip-style="shadow">
+            </amp-story-interactive-quiz>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-2">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="img/blue-stuff.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-quiz
+                id="largest-mammal-light"
+                endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+                prompt-text="What is the largest mammal?"
+                option-1-text="Blue whale" option-1-correct
+                option-1-confetti="🐳"
+                option-2-text="Etruscan shrew">
+            </amp-story-interactive-quiz>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-2b">
+          <amp-story-grid-layer template="fill">
+            <div style="background: linear-gradient(rgb(69, 75, 184), #80c0c4)"></div>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-quiz
+                id="smallest-mammal-light"
+                endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+                prompt-size="large"
+                chip-style="transparent"
+                theme="dark"
+                prompt-text="What is the smallest mammal?"
+                option-1-text="Blue whale"
+                option-2-text="Etruscan shrew" option-2-correct
+                option-2-confetti="🐀"
+                option-3-text="Persian cat"
+                option-4-text="Baby yoda">
+            </amp-story-interactive-quiz>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="quiz-2c">
+          <amp-story-grid-layer template="fill">
+            <div style="background: linear-gradient(rgb(83, 87, 158), #699496)"></div>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-quiz
+                id="smallest-mammal-light"
+                endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+                prompt-size="large"
+                chip-style="transparent"
+                prompt-text="What is the smallest mammal?"
+                option-1-text="Blue whale"
+                option-2-text="Etruscan shrew" option-2-correct
+                option-2-confetti="🐀"
+                option-3-text="Persian cat"
+                option-4-text="Baby yoda">
+            </amp-story-interactive-quiz>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="poll-binary-1">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="thirds">
+            <div grid-area="lower-third" style="display: flex;align-items:center;justify-content:center;flex-direction:column;">
+              <amp-story-interactive-binary-poll
+								endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+								prompt-text="What is your favorite movie?"
+								id="movie-light-green"
+								style="--interactive-accent-color: rgb(16, 218, 93);--interactive-prompt-background: rgb(4, 41, 18);--interactive-prompt-text-color: rgb(16, 218, 93);"
+                theme="dark"
+                option-1-text="דוקטור מוזר"
+                option-2-text="פנתר שחור"
+                option-1-confetti="🎥"
+                option-2-confetti="🎬">
+              </amp-story-interactive-binary-poll>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="poll-binary-2">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-binary-poll
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+              id="movie-dark"
+              theme="dark"
+              option-1-text="Doctor Strange"
+              option-2-text="Black Panther"
+              option-1-confetti="😺"
+              option-2-confetti="🐶">
+            </amp-story-interactive-binary-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="poll-binary-3">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="thirds">
+            <div grid-area="lower-third" style="display: flex;align-items:center;justify-content:center;flex-direction:column;">
+              <h1 style="color:white;text-align:center;line-height:40px;margin-bottom:10px;">What is your favorite movie?</h1>
+              <amp-story-interactive-binary-poll
+                endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+                id="movie-light-yellow"
+                style="--interactive-accent-color: #FFC700;"
+                option-1-text="🧛"
+                option-2-text="🐆"
+                option-1-confetti="🧛"
+                option-2-confetti="🐆">
+              </amp-story-interactive-binary-poll>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="poll-binary-4">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="thirds">
+            <div grid-area="lower-third" style="display: flex;align-items:center;justify-content:center;flex-direction:column;">
+              <h1 style="color:white;text-align:center;line-height:40px;margin-bottom:10px;">What is your favorite movie?</h1>
+              <amp-story-interactive-binary-poll
+                endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+                id="movie-light-black"
+                style="--interactive-accent-color: rgb(0, 0, 0);"
+                option-1-text="Doctor"
+                option-2-text="Panther"
+                option-1-confetti="🎥"
+                option-2-confetti="🎬">
+              </amp-story-interactive-binary-poll>
+            </div>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="poll-binary-5">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="vertical">
+            <amp-story-interactive-binary-poll
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+              id="movie-light-connected"
+              theme="dark"
+              style="--interactive-accent-color: #FFFFFF;"
+              option-1-text="This is a really long text"
+              option-2-text="Panther"
+              option-1-confetti="🎥"
+              option-2-confetti="🎬">
+            </amp-story-interactive-binary-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="poll-1">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-poll
+              id="poll-1"
+              theme="dark"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+              prompt-text="What city do you like the most?"
+              option-1-text="Montevideo" option-1-confetti="🇺🇾"
+              option-2-text="Paris" option-2-confetti="🇫🇷"
+              option-3-text="Amsterdam" option-3-confetti="🇳🇱">
+            </amp-story-interactive-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="poll-2">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-poll
+              id="poll-2"
+              theme="dark"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+              chip-style="shadow"
+              style="--interactive-accent-color: #f5aa42"
+              prompt-text="What city do you like the most?"
+              option-1-text="Montevideo" option-1-confetti="🇺🇾"
+              option-2-text="Paris" option-2-confetti="🇫🇷"
+              option-3-text="Amsterdam" option-3-confetti="🇳🇱"
+              option-4-text="Madrid" option-4-confetti="🇪🇸">
+            </amp-story-interactive-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="poll-3">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-poll
+              id="poll-3"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+              style="--interactive-accent-color: rgb(255, 152, 152); --interactive-prompt-text-color: black"
+              prompt-text="What city do you like the most?"
+              option-1-text="Montevideo" option-1-confetti="🇺🇾"
+              option-2-text="Paris" option-2-confetti="🇫🇷">
+            </amp-story-interactive-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="poll-4">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-poll
+              id="poll-4"
+              chip-style="shadow"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+              style="--interactive-accent-color: #eb50a8"
+              option-1-text="Montevideo" option-1-confetti="🇺🇾"
+              option-2-text="Paris" option-2-confetti="🇫🇷"
+              option-3-text="Amsterdam" option-3-confetti="🇳🇱">
+            </amp-story-interactive-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="poll-5">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-poll
+              id="poll-4"
+              chip-style="shadow"
+              endpoint="http://localhost:3000/interactives"
+              style="--interactive-accent-color: #ff6347"
+              theme="dark"
+              prompt-text="What is your favorite food?"
+              option-1-text="Tacos"
+              option-2-text="Bacon"
+              option-3-text="Broccoli"
+              option-4-text="Ice cream"
+              option-1-confetti="🌮"
+              option-2-confetti="🥓"
+              option-3-confetti="🥦"
+              option-4-confetti="🍦"
+            amp-story-interactive-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="poll-6">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-poll
+              id="poll-4"
+              chip-style="shadow"
+              endpoint="http://localhost:3000/interactives"
+              style="--interactive-accent-color: #ff6347"
+              theme="light"
+              prompt-text="What is your favorite food?"
+              option-1-text="Tacos"
+              option-2-text="Bacon is my favourite food in the world and I eat it everyday"
+              option-3-text="Broccoli"
+              option-4-text="Ice cream"
+              option-1-confetti="🌮"
+              option-2-confetti="🥓"
+              option-3-confetti="🥦"
+              option-4-confetti="🍦"
+            amp-story-interactive-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="poll-7">
+          <amp-story-grid-layer template="fill" style="background:linear-gradient(rgb(94, 25, 25), rgb(218, 140, 25))">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900"
+                style="opacity: 0.2">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-poll
+              id="poll-7"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+              style="--interactive-accent-color: #ff6347"
+              theme="light"
+              chip-style="transparent"
+              prompt-size="large"
+              prompt-text="What is your favorite food?"
+              option-1-text="Tacos"
+              option-2-text="Bacon"
+              option-3-text="Broccoli"
+              option-4-text="Ice cream"
+              option-1-confetti="🌮"
+              option-2-confetti="🥓"
+              option-3-confetti="🥦"
+              option-4-confetti="🍦"
+            amp-story-interactive-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="poll-7">
+          <amp-story-grid-layer template="fill" style="background:linear-gradient(rgb(255, 255, 255), rgb(178, 243, 255))">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900"
+                style="opacity: 0.2">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-poll
+              id="poll-7"
+              endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+              style="--interactive-accent-color: #ff6347;--interactive-prompt-text-color:black"
+              theme="dark"
+              chip-style="transparent"
+              prompt-size="large"
+              prompt-text="What is your favorite food?"
+              option-1-text="Tacos"
+              option-2-text="Bacon"
+              option-3-text="Broccoli"
+              option-4-text="Ice cream"
+              option-1-confetti="🌮"
+              option-2-confetti="🥓"
+              option-3-confetti="🥦"
+              option-4-confetti="🍦"
+            amp-story-interactive-poll>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="results-1">
+          <amp-story-grid-layer template="fill" style="background:linear-gradient(rgb(17, 55, 87), rgb(1, 17, 20)">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900"
+                style="opacity: 0.2">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-results
+              style="--interactive-accent-color: #ffb387"
+              theme="dark"
+              chip-style="transparent"
+              prompt-text="You are an"
+              option-1-results-category="Onion" option-1-text="You are sharp and go well with many plates" option-1-image="https://images.unsplash.com/photo-1585849834908-3481231155e8?auto=format&fit=crop&w=200&q=80"
+              option-2-text="Bacon">
+            </amp-story-interactive-results>
+          </amp-story-grid-layer>
+        </amp-story-page>
+        <amp-story-page id="results-2">
+          <amp-story-grid-layer template="fill" style="background:linear-gradient(rgb(78, 167, 240), rgb(164, 227, 238)">
+            <amp-img
+                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
+                layout="responsive"
+                height="1600"
+                width="900"
+                style="opacity: 0.2">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <amp-story-interactive-results
+              style="--interactive-accent-color: #233a5c"
+              theme="light"
+              chip-style="transparent"
+              prompt-text="You are an"
+              option-1-results-category="Onion" option-1-text="You are sharp and go well with many plates" option-1-image="https://images.unsplash.com/photo-1585849834908-3481231155e8?auto=format&fit=crop&w=200&q=80"
+              option-2-text="Bacon">
+            </amp-story-interactive-results>
+          </amp-story-grid-layer>
+        </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/invalid-link-tests.html b/examples/amp-story/invalid-link-tests.html
new file mode 100644
index 0000000000000..75f795092d6fd
--- /dev/null
+++ b/examples/amp-story/invalid-link-tests.html
@@ -0,0 +1,86 @@
+<!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>
+    <title>Invalid Link Tests</title>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <link rel="canonical" href="helloworld.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>
+      body {
+        font-family: 'Roboto', sans-serif;
+      }
+      amp-story-page {
+        background: white;
+      }
+      #link1, #link2, #link3 {
+        position: relative;
+        width: 30px;
+      }
+      #link1 {
+        top: 50%;
+        left: -10%;
+      }
+      #link2 {
+        top: 60%;
+        left: 99%;
+      }
+      #link3 {
+        top: 70%;
+        left: 50%;
+      }
+      #link4 {
+        position: absolute;
+        top: 5%;
+        left: 5%;
+        height: 90%;
+        width: 90%;
+        background-color: #aa42f5;
+      }
+      #link5 {
+        background-color: #aa42f5;
+      }
+    </style>
+  </head>
+
+  <body>
+    <amp-story
+      title="Invalid-link-tests"
+      publisher="The AMP Team"
+      publisher-logo-src="https://example.com/logo/1x1.png"
+      poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
+      standalone>
+
+      <amp-story-page id="1">
+        <amp-story-grid-layer template="vertical">
+          <h2>Test Story for Invalid Links</h2>
+          <p>This story is best tested when story pages are smaller than 345px x 575px.</p>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="2">
+        <amp-story-grid-layer template="vertical">
+          <p>Clicking link(s) within 48px of the left or right edge of this page should result in navigating to the next or previous page, and not actually open the link.</p>
+          <p>Clicking the link(s) centered on this page should allow opening the link.</p>
+          <a href="http://www.google.com" id="link1">link1</a>
+          <a href="http://www.google.com" id="link2">link2</a>
+          <a href="http://www.google.com" id="link3">link3</a>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="3">
+        <amp-story-grid-layer template="vertical">
+            <a href="http://www.google.com" id="link4">Links that occupy too much area on the page should be ignored.</a>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="4">
+        <amp-story-grid-layer template="vertical">
+            <a href="http://www.google.com" id="link5">Links that do not occupy too much area on the page should be treated as normal.</a>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/json/bookend.json b/examples/amp-story/json/bookend.json
deleted file mode 100644
index 14d44e35b94e8..0000000000000
--- a/examples/amp-story/json/bookend.json
+++ /dev/null
@@ -1,106 +0,0 @@
-{
-  "bookendVersion": "v1.0",
-  "shareProviders": [
-    "email",
-    {"provider": "facebook", "app_id": "254325784911610"},
-    "whatsapp"
-  ],
-  "components": [
-    {
-      "type": "heading",
-      "text": "Getting Started"
-    },
-    {
-      "type": "small",
-      "title": "Hello World",
-      "url": "hello-world.html",
-      "image": "http://placehold.it/256x128"
-    },
-    {
-      "type": "small",
-      "title": "Hello World with Bookend",
-      "url": "hello-world-bookend.html",
-      "image": "http://placehold.it/256x128"
-    },
-
-    {
-      "type": "heading",
-      "text": "Animation Examples"
-    },
-    {
-      "type": "small",
-      "title": "Animation Presets",
-      "url": "animation-presets.html",
-      "image": "http://placehold.it/256x128"
-    },
-    {
-      "type": "small",
-      "title": "Animation Sequence",
-      "url": "animation-presets.html",
-      "image": "http://placehold.it/256x128"
-    },
-    {
-      "type": "small",
-      "title": "Visual Effects",
-      "url": "visual-effects.html",
-      "image": "http://placehold.it/256x128"
-    },
-
-    {
-      "type": "heading",
-      "text": "Bookend Examples"
-    },
-    {
-      "type": "small",
-      "title": "Bookend v0.1",
-      "url": "bookend.html",
-      "image": "http://placehold.it/256x128"
-    },
-    {
-      "type": "small",
-      "title": "Bookend v1.0",
-      "url": "bookendv1.html",
-      "image": "http://placehold.it/256x128"
-    },
-
-    {
-      "type": "heading",
-      "text": "Layers"
-    },
-    {
-      "type": "small",
-      "title": "CTA (Call-to-Action) Layer",
-      "url": "cta-layer-outlink.html",
-      "image": "http://placehold.it/256x128"
-    },
-    {
-      "type": "small",
-      "title": "Grid Layer Templates",
-      "url": "grid-layer-templates.html",
-      "image": "http://placehold.it/256x128"
-    },
-
-    {
-      "type": "heading",
-      "text": "Miscellaneous"
-    },
-    {
-      "type": "small",
-      "title": "Analytics",
-      "url": "analytics.html",
-      "image": "http://placehold.it/256x128"
-    },
-    {
-      "type": "small",
-      "title": "Progress Bar",
-      "url": "progress-bar.html",
-      "image": "http://placehold.it/256x128"
-    },
-    {
-      "type": "small",
-      "title": "Desktop Backgrounds",
-      "url": "desktop-backgrounds.html",
-      "image": "http://placehold.it/256x128"
-    }
-  ]
-}
diff --git a/examples/amp-story/player-amp.html b/examples/amp-story/player-amp.html
new file mode 100644
index 0000000000000..bc41a1bb57f6e
--- /dev/null
+++ b/examples/amp-story/player-amp.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html ⚡ lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Story Player (AMP version)</title>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <link rel="canonical" href="player-amp.html">
+    <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+    <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>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  </head>
+  <body>
+    <h1>This is an AMP page that embeds a story below:</h1>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
+    <amp-story-player layout="responsive" width="360" height="600">
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/"
+            class="story">
+          <img data-amp-story-player-poster-img src="https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/img/promo3x4.jpg" width="360" height="600" loading="lazy">
+          <span class="title">A local’s guide to what to eat and do in New York City</span>
+        </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/" class="story">
+          <img data-amp-story-player-poster-img src="https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/img/promo3x4.jpg" width="360" height="600" loading="lazy">
+          <span class="title">A local’s guide to what to eat and do in Miami</span>
+        </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/" class="story">
+          <img data-amp-story-player-poster-img src="https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/img/promo3x4.jpg" width="360" height="600" loading="lazy">
+          <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+        </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/" class="story">
+          <img data-amp-story-player-poster-img src="https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/img/promo3x4.jpg" width="360" height="600" loading="lazy">
+          <span class="title">A local’s guide to what to eat and do in Rome</span>
+        </a>
+    </amp-story-player>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
+  </body>
+</html>
diff --git a/examples/amp-story/player-local-stories.html b/examples/amp-story/player-local-stories.html
new file mode 100644
index 0000000000000..b248648b25ab3
--- /dev/null
+++ b/examples/amp-story/player-local-stories.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Story Player (Non-AMP)</title>
+    <script async src="../../dist/amp-story-player.js"></script>
+    <link href="../../build/css/amp-story-player-v0.css" rel='stylesheet' type='text/css'>
+    <style page>
+      body {
+        font-family: sans-serif;
+      }
+    </style>
+    <style injected>
+      .story-player-iframe {
+        background-size: cover;
+        display: block;
+        position: relative;
+        height: 100%;
+        width: 100%;
+        flex: 0 0 100%;
+      }
+
+      .title {
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        color: #fff;
+        font-size: 40px;
+        padding: 88px 32px 32px 32px;
+        line-height: 1.25;
+        text-shadow: 3px 3px #000;
+      }
+    </style>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  </head>
+  <body>
+    <h1>This is a NON-AMP page that embeds a story below:</h1>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
+    <amp-story-player style="width: 360px; height: 600px;">
+        <a href="./ampconf.html">
+          <img src="./img/overview.jpg" loading="lazy" data-amp-story-player-poster-img width="360" height="600"></img>
+          <span class="title">A local’s guide to what to eat and do in New York City</span>
+        </a>
+        <a href="./attachment.html">
+          <span class="title">A local’s guide to what to eat and do in Miami</span>
+        </a>
+        <a href="./videos.html">
+          <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+        </a>
+        <a href="./amp-story-animation.html">
+          <span class="title">A local’s guide to what to eat and do in Rome</span>
+        </a>
+    </amp-story-player>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
+  </body>
+</html>
diff --git a/examples/amp-story/player-story-attribution.html b/examples/amp-story/player-story-attribution.html
new file mode 100644
index 0000000000000..278e9252a464c
--- /dev/null
+++ b/examples/amp-story/player-story-attribution.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Story Attribution</title>
+    <script async src="../../dist/amp-story-player.js"></script>
+    <link href="../../build/css/amp-story-player-v0.css" rel='stylesheet' type='text/css'>
+    <style page>
+      body {
+        font-family: sans-serif;
+      }
+    </style>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  </head>
+  <body>
+    <h1>Story Attribution</h1>
+
+    <amp-story-player style="width: 360px; height: 600px;">
+        <script type="application/json">
+          {
+            "display": {
+              "attribution": "auto"
+            }
+          }
+        </script>
+        <a href="./ampconf.html">
+          <img src="./img/overview.jpg" loading="lazy" data-amp-story-player-poster-img width="360" height="600"></img>
+          <span class="title">A local’s guide to what to eat and do in New York City</span>
+        </a>
+    </amp-story-player>
+
+  </body>
+</html>
diff --git a/examples/amp-story/player-with-button.html b/examples/amp-story/player-with-button.html
new file mode 100644
index 0000000000000..a473521315fdf
--- /dev/null
+++ b/examples/amp-story/player-with-button.html
@@ -0,0 +1,60 @@
+<html>
+  <head>
+    <title>Story Player (Non-AMP)</title>
+    <script async src="../../dist/amp-story-player.js"></script>
+    <link href="../../build/css/amp-story-player-v0.css" rel='stylesheet' type='text/css'>
+    <style page>
+      body {
+        font-family: sans-serif;
+      }
+    </style>
+    <style injected>
+      .story-player-iframe {
+        background-size: cover;
+        display: block;
+        position: relative;
+        height: 100%;
+        width: 100%;
+        flex: 0 0 100%;
+      }
+
+      .title {
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        color: #fff;
+        font-size: 40px;
+        padding: 88px 32px 32px 32px;
+        line-height: 1.25;
+        text-shadow: 3px 3px #000;
+      }
+    </style>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  </head>
+  <body>
+    <h1>This is a NON-AMP page that embeds a story below:</h1>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
+    <amp-story-player style="width: 360px; height: 600px;" exit-control="close-button">
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/">
+          <img data-amp-story-player-poster-img src="https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/img/promo3x4.jpg" loading="lazy" width="360" height="600">
+          <span class="title">A local’s guide to what to eat and do in New York City</span>
+        </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/">
+          <span class="title">A local’s guide to what to eat and do in Miami</span>
+        </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/">
+          <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+        </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/">
+          <span class="title">A local’s guide to what to eat and do in Rome</span>
+        </a>
+    </amp-story-player>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
+  <script>
+    document.querySelector("amp-story-player").addEventListener("amp-story-player-close", (e) => alert("Hello!"));
+  </script>
+  </body>
+</html>
diff --git a/examples/amp-story/player.html b/examples/amp-story/player.html
index bf4ae9a2b17ff..bbbe8f49d4e3b 100644
--- a/examples/amp-story/player.html
+++ b/examples/amp-story/player.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html>
   <head>
     <title>Story Player (Non-AMP)</title>
@@ -31,34 +32,87 @@
         line-height: 1.25;
         text-shadow: 3px 3px #000;
       }
+      .actions .circle {
+        width: 65px;
+        height: 65px;
+        background-size: cover;
+        overflow: hidden;
+        border-radius: 50%;
+        display: inline-block;
+        margin: 10px;
+        box-shadow:
+          0 0 0 3px white,
+          0 0 0 7px hsl(20, 79%, 60%);
+        color: white;
+        text-align: center;
+        padding-top: 20px;
+        box-sizing: border-box;
+        text-shadow: 0px 2px 4px #000000;
+        cursor: pointer;
+      }
+
+      .actions .circle.active {
+        box-shadow:
+          0 0 0 3px white,
+          0 0 0 7px hsl(257, 79%, 60%);
+      }
     </style>
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <script>
+      window.onload = () => {
+        const player = document.querySelector('amp-story-player');
+        document.querySelector('.actions').addEventListener('click', (e) => {
+          if (e.target.hasAttribute('data-story')) {
+            player.show(e.target.getAttribute('data-story'), null, {animate: false});
+          }
+        })
+        player.addEventListener('navigation', (e) => {
+          document.querySelectorAll('.actions .circle').forEach((circle, index) => {
+            circle.classList.toggle('active', index === e.detail.index)
+          })
+        });
+      };
+    </script>
   </head>
   <body>
     <h1>This is a NON-AMP page that embeds a story below:</h1>
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
-    <amp-story-player style="width: 360px; height: 600px;">
+    <div>
+      <amp-story-player style="width: 360px; height: 600px;">
         <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/"
-            style="--story-player-poster: url('https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/img/promo3x4.jpg');"
             class="story">
+          <img data-amp-story-player-poster-img src="https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/img/promo3x4.jpg" width="360" height="600" loading="lazy">
           <span class="title">A local’s guide to what to eat and do in New York City</span>
         </a>
-        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/"
-            data-poster-portrait-src="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/img/promo3x4.jpg"
-            class="story">
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/">
+          <img data-amp-story-player-poster-img src="https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/img/promo3x4.jpg" width="360" height="600" loading="lazy">
           <span class="title">A local’s guide to what to eat and do in Miami</span>
         </a>
-        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/"
-            data-poster-portrait-src="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/img/promo3x4.jpg"
-            class="story">
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/">
+          <img data-amp-story-player-poster-img src="https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/img/promo3x4.jpg" width="360" height="600" loading="lazy">
           <span class="title">A local’s guide to what to eat and do in Mexico City</span>
         </a>
-        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/"
-            data-poster-portrait-src="https://www-washingtonpost-com.cdn.ampproject.org/v/s/washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-do-and-eat-in-rome/img/promo3x4.jpg"
-            class="story">
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/">
+          <img data-amp-story-player-poster-img src="https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/img/promo3x4.jpg" width="360" height="600" loading="lazy">
           <span class="title">A local’s guide to what to eat and do in Rome</span>
         </a>
-    </amp-story-player>
+      </amp-story-player>
+
+      <div class="actions">
+        <div class="circle active"
+            data-story="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/"
+            style="background-image: url('https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/img/42a59562-834d-11e9-b585-e36b16a531aa.jpg')">New York</div>
+        <div class="circle"
+            data-story="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/"
+            style="background-image: url('https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/img/9f1d2656-6b7a-11e9-bbe7-1c798fb80536.jpg')">Miami</div>
+        <div class="circle"
+            data-story="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/"
+            style="background-image: url('https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/img/2e0f5178-746c-11e9-9331-30bc5836f48e.jpg')">Mexico City</div>
+        <div class="circle"
+            data-story="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/"
+            style="background-image: url('https://www-washingtonpost-com.cdn.ampproject.org/i/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/img/f5903e2e-86fa-11e9-9d73-e2ba6bbf1b9b.jpg')">Rome</div>
+      </div>
+    </div>
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
   </body>
 </html>
diff --git a/examples/amp-story/progress-bar.html b/examples/amp-story/progress-bar.html
index 4f0466f898eb6..9aa2e41341cb7 100644
--- a/examples/amp-story/progress-bar.html
+++ b/examples/amp-story/progress-bar.html
@@ -38,7 +38,7 @@
 
       <amp-story-page id="cover">
         <amp-story-grid-layer template="vertical">
-          <h1>Progress Bar examples with bookend</h1>
+          <h1>Progress Bar examples</h1>
           <p>This is the cover page. It does not have auto-advance enabled</p>
         </amp-story-grid-layer>
       </amp-story-page>
@@ -101,9 +101,6 @@ <h1>Fifth Page</h1>
           <p>This is the fifth page of this story.</p>
         </amp-story-grid-layer>
       </amp-story-page>
-      
-      <amp-story-bookend src="./bookendv1.json" layout=nodisplay>
-      </amp-story-bookend>
     </amp-story>
   </body>
 </html>
diff --git a/examples/amp-story/quiz.html b/examples/amp-story/quiz.html
index 97143a38c6314..396e826ece7e5 100644
--- a/examples/amp-story/quiz.html
+++ b/examples/amp-story/quiz.html
@@ -2,7 +2,7 @@
 <html ⚡>
 <head>
   <meta charset="utf-8">
-  <title>amp-story-reaction-quiz example</title>
+  <title>amp-story-interactive-quiz example</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
@@ -14,9 +14,9 @@
       font-size: 48px;
     }
   </style>
-  <script async custom-element="amp-story"
-        src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
-        <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.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-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
 
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
@@ -31,14 +31,14 @@
       <script type="application/json">
         {
           "requests": {
-            "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/master/examples/img/ampicon.png",
+            "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png",
             "base": "${endpoint}?${type|default:foo}&path=${canonicalPath}",
-            "click": "${base}?&index=${storyPageIndex}&id=${storyPageId}&reactionType=${storyReactionType}&reactionId=${storyReactionId}&reactionResponseId=${storyReactionResponse}"
+            "click": "${base}?&index=${storyPageIndex}&id=${storyPageId}&interactiveType=${storyInteractiveType}&interactiveId=${storyInteractiveId}&interactiveesponseId=${storyInteractiveResponse}"
           },
           "triggers": {
             "trackQuizResponse": {
-              "on": "story-reaction",
-              "tagname": "amp-story-reaction-quiz",
+              "on": "story-interactive",
+              "tagname": "amp-story-interactive-quiz",
               "request": "click"
             }
           }
@@ -68,17 +68,16 @@ <h1 id="cat-facts-title">Cat Facts!</h1>
             --accent-color: cadetblue;
           }
         </style>
-        <amp-story-reaction-quiz
+        <amp-story-interactive-quiz
           id='cat-question-appear'
-          endpoint="http://localhost:3000/reactions"
-          chip-corner="sharp"
-          theme="dark">
-          <h1>When did the domestic cat first appear on the scene?</h1>
-          <option>7,000 years ago</option>
-          <option correct>500,000 years ago</option>
-          <option>2 million years ago</option>
-          <option>34 million years ago</option>
-        </amp-story-reaction-quiz>
+          endpoint="http://localhost:3000/interactives"
+          theme="dark"
+          prompt-text="When did the domestic cat first appear on the scene?"
+          option-1-text="7,000 years ago"
+          option-2-text="500,000 years ago" option-2-correct=""
+          option-3-text="2 million years ago"
+          option-4-text="34 million years ago">
+        </amp-story-interactive-quiz>
       </amp-story-grid-layer>
     </amp-story-page>
     <amp-story-page id="quiz-question-2">
@@ -88,14 +87,14 @@ <h1>When did the domestic cat first appear on the scene?</h1>
             layout="responsive">
         </amp-story-grid-layer>
         <amp-story-grid-layer>
-          <amp-story-reaction-quiz
+          <amp-story-interactive-quiz
             id='cat-question-handedness'
-            chip-style="shadow">
-            <h2>True or False: Cats can be right-pawed or left-pawed.</h2>
-            <option correct>True</option>
-            <option>False</option>
-            <option>The quick brown fox jumped over the lazy dog lorem ipsum dolor sit amet as d f ghjkl</option>
-          </amp-story-reaction-quiz>
+            chip-style="shadow"
+            prompt-text="True or False: Cats can be right-pawed or left-pawed."
+            option-1-text="True" option-1-correct="correct"
+            option-2-text="False"
+            option-3-text="The quick brown fox jumped over the lazy dog lorem ipsum dolor sit amet as d f ghjkl">
+          </amp-story-interactive-quiz>
         </amp-story-grid-layer>
       </amp-story-page>
       <amp-story-page id="quiz-question-3">
@@ -111,12 +110,12 @@ <h2>True or False: Cats can be right-pawed or left-pawed.</h2>
           }
         </style>
         <amp-story-grid-layer id="cat-question-cute">
-          <amp-story-reaction-quiz
-            id="cats-cute-quiz">
-            <h2>Are cats cute?</h2>
-            <option correct>Yes</option>
-            <option>No</option>
-          </amp-story-reaction-quiz>
+          <amp-story-interactive-quiz
+            id="cats-cute-quiz"
+            prompt-text="Are cats cute?"
+            option-1-text="Yes" option-1-correct="correct"
+            option-2-text="No">
+          </amp-story-interactive-quiz>
         </amp-story-grid-layer>
         <amp-story-page-attachment layout="nodisplay" theme="dark">
           <h1>Amazing title</h1>
diff --git a/examples/amp-story/reactions.html b/examples/amp-story/reactions.html
deleted file mode 100644
index f497c9b0cd847..0000000000000
--- a/examples/amp-story/reactions.html
+++ /dev/null
@@ -1,264 +0,0 @@
-<!doctype html>
-<html ⚡ lang="es">
-  <head>
-    <meta charset="utf-8">
-    <title>Reactions Story</title>
-    <link rel="canonical" href="reactions.html">
-    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <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>
-      body {
-        font-family: 'Rubik', sans-serif;
-      }
-      amp-story-reaction-quiz, amp-story-reaction-poll {
-        justify-self: center;
-      }
-    </style>
-    <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-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap" rel="stylesheet">
-  </head>
-  <body>
-    <amp-story
-        standalone
-        title="Reactions Story"
-        publisher="AMP Story testing"
-        publisher-logo-src="example.com/logo.png"
-        poster-portrait-src="example.com/poster.jpg">
-        <amp-story-page id="cover">
-          <amp-story-grid-layer template="fill">
-            <amp-img
-                src="img/overview.jpg"
-                layout="responsive"
-                height="1600"
-                width="900">
-            </amp-img>
-          </amp-story-grid-layer>
-          <amp-story-grid-layer template="vertical">
-            <div style="background: #000000aa;color:white;padding:10px">
-              <h2>What is the best story ever?</h2>
-              <p>and other reaction components</p>
-            </div>
-          </amp-story-grid-layer>
-        </amp-story-page>
-        <amp-story-page id="quiz-intl">
-          <amp-story-grid-layer template="fill">
-            <amp-img
-                src="img/roadshow.jpg"
-                layout="responsive"
-                height="1600"
-                width="900">
-            </amp-img>
-          </amp-story-grid-layer>
-          <amp-story-grid-layer template="center">
-            <amp-story-reaction-quiz
-                id="first-cup-dark"
-                endpoint="http://localhost:3000/reactions"
-                style="--reaction-accent-color: rgb(235, 139, 13);"
-                theme="dark"
-                prompt-text="This is an international quiz?"
-                option-1-text="你好，这是马蒂亚斯"
-                option-2-text="مرحبا هذا ماتياس"
-                option-3-text="Yes it is" option-3-correct
-                option-4-text="ब्राज़ील यहाँ होना चाहिए">
-            </amp-story-reaction-quiz>
-          </amp-story-grid-layer>
-        </amp-story-page>
-        <amp-story-page id="quiz-1">
-          <amp-story-grid-layer template="fill">
-            <amp-img
-                src="img/roadshow.jpg"
-                layout="responsive"
-                height="1600"
-                width="900">
-            </amp-img>
-          </amp-story-grid-layer>
-          <amp-story-grid-layer template="center">
-
-            <amp-story-reaction-quiz
-                id="first-cup-dark"
-                endpoint="http://localhost:3000/reactions"
-                style="--reaction-accent-color: #20AC5E;"
-                theme="dark"
-                prompt-text="Who won the first soccer world cup?"
-                option-1-text="France"
-                option-2-text="Spain"
-                option-3-text="Uruguay" option-3-correct
-                option-4-text="Brazil">
-            </amp-story-reaction-quiz>
-          </amp-story-grid-layer>
-        </amp-story-page>
-        <amp-story-page id="quiz-1b">
-          <amp-story-grid-layer template="fill">
-            <amp-img
-                src="img/roadshow.jpg"
-                layout="responsive"
-                height="1600"
-                width="900">
-            </amp-img>
-          </amp-story-grid-layer>
-          <amp-story-grid-layer template="center">
-            <amp-story-reaction-quiz
-                id="last-cup-dark"
-                theme="dark"
-                style="--reaction-accent-color: rgb(221, 17, 228);"
-                chip-corner="sharp"
-                prompt-text="Who won the last soccer world cup?"
-                option-1-text="France" option-1-correct
-                option-2-text="Spain"
-                option-3-text="Uruguay"
-                option-4-text="Brazil">
-            </amp-story-reaction-quiz>
-          </amp-story-grid-layer>
-        </amp-story-page>
-        <amp-story-page id="quiz-2">
-          <amp-story-grid-layer template="fill">
-            <amp-img
-                src="img/blue-stuff.jpg"
-                layout="responsive"
-                height="1600"
-                width="900">
-            </amp-img>
-          </amp-story-grid-layer>
-          <amp-story-grid-layer template="center">
-            <amp-story-reaction-quiz
-                id="largest-mammal-light"
-                endpoint="http://localhost:3000/reactions"
-                chip-corner="sharp"
-                prompt-text="What is the largest mammal?"
-                option-1-text="Blue whale" option-1-correct
-                option-2-text="Etruscan shrew">
-            </amp-story-reaction-quiz>
-          </amp-story-grid-layer>
-        </amp-story-page>
-        <amp-story-page id="quiz-2b">
-          <amp-story-grid-layer template="fill">
-            <amp-img
-                src="img/blue-stuff.jpg"
-                layout="responsive"
-                height="1600"
-                width="900">
-            </amp-img>
-          </amp-story-grid-layer>
-          <amp-story-grid-layer template="center">
-            <amp-story-reaction-quiz
-                id="smallest-mammal-light"
-                endpoint="http://localhost:3000/reactions"
-                chip-corner="sharp"
-                prompt-text="What is the smallest mammal?"
-                option-1-text="Blue whale"
-                option-2-text="Etruscan shrew" option-2-correct>
-            </amp-story-reaction-quiz>
-          </amp-story-grid-layer>
-        </amp-story-page>
-        <amp-story-page id="poll-binary-1">
-          <amp-story-grid-layer template="fill">
-            <amp-img
-                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
-                layout="responsive"
-                height="1600"
-                width="900">
-            </amp-img>
-          </amp-story-grid-layer>
-          <amp-story-grid-layer template="thirds">
-            <div grid-area="lower-third" style="display: flex;align-items:center;justify-content:center;flex-direction:column;">
-              <h1 style="color:white;text-align:center;line-height:40px;margin-bottom:10px;">What is your favorite movie?</h1>
-              <amp-story-reaction-poll
-                endpoint="http://localhost:3000/reactions"
-                id="movie-light-connected"
-                option-1-text="דוקטור מוזר"
-                option-2-text="פנתר שחור">
-              </amp-story-reaction-poll>
-            </div>
-          </amp-story-grid-layer>
-          <amp-story-page-attachment layout="nodisplay" data-cta-text="Read more">
-            <iframe src="https://www.amp.dev" style="width:100%;height:100%"></iframe>
-          </amp-story-page-attachment>
-        </amp-story-page>
-        <amp-story-page id="poll-binary-2">
-          <amp-story-grid-layer template="fill">
-            <amp-img
-                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
-                layout="responsive"
-                height="1600"
-                width="900">
-            </amp-img>
-          </amp-story-grid-layer>
-          <amp-story-grid-layer template="center">
-            <amp-story-reaction-poll
-              endpoint="http://localhost:3000/reactions"
-              id="movie-light-connected"
-              theme="dark"
-              option-1-text="Doctor Strange"
-              option-2-text="Black Panther">
-            </amp-story-reaction-poll>
-          </amp-story-grid-layer>
-        </amp-story-page>
-        <amp-story-page id="poll-binary-3">
-          <amp-story-grid-layer template="fill">
-            <amp-img
-                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
-                layout="responsive"
-                height="1600"
-                width="900">
-            </amp-img>
-          </amp-story-grid-layer>
-          <amp-story-grid-layer template="thirds">
-            <div grid-area="lower-third" style="display: flex;align-items:center;justify-content:center;flex-direction:column;">
-              <h1 style="color:white;text-align:center;line-height:40px;margin-bottom:10px;">What is your favorite movie?</h1>
-              <amp-story-reaction-poll
-                endpoint="http://localhost:3000/reactions"
-                id="movie-light-connected"
-                style="--reaction-accent-color: #FFC700;"
-                option-1-text="🧛"
-                option-2-text="🐆">
-              </amp-story-reaction-poll>
-            </div>
-          </amp-story-grid-layer>
-        </amp-story-page>
-        <amp-story-page id="poll-binary-4">
-          <amp-story-grid-layer template="fill">
-            <amp-img
-                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
-                layout="responsive"
-                height="1600"
-                width="900">
-            </amp-img>
-          </amp-story-grid-layer>
-          <amp-story-grid-layer template="thirds">
-            <div grid-area="lower-third" style="display: flex;align-items:center;justify-content:center;flex-direction:column;">
-              <h1 style="color:white;text-align:center;line-height:40px;margin-bottom:10px;">What is your favorite movie?</h1>
-              <amp-story-reaction-poll
-                endpoint="http://localhost:3000/reactions"
-                id="movie-light-connected"
-                style="--reaction-accent-color: rgb(0, 0, 0);"
-                option-1-text="Doctor"
-                option-2-text="Panther">
-              </amp-story-reaction-poll>
-            </div>
-          </amp-story-grid-layer>
-        </amp-story-page>
-        <amp-story-page id="poll-binary-5">
-          <amp-story-grid-layer template="fill">
-            <amp-img
-                src="https://i.pinimg.com/474x/18/62/8e/18628e2d0d342e19bead8eead15fa8cb.jpg"
-                layout="responsive"
-                height="1600"
-                width="900">
-            </amp-img>
-          </amp-story-grid-layer>
-          <amp-story-grid-layer template="vertical">
-            <amp-story-reaction-poll
-              endpoint="http://localhost:3000/reactions"
-              id="movie-light-connected"
-              theme="dark"
-              style="--reaction-accent-color: #FFFFFF;"
-              option-1-text="This is a really long text"
-              option-2-text="Panther">
-            </amp-story-reaction-poll>
-          </amp-story-grid-layer>
-        </amp-story-page>
-    </amp-story>
-  </body>
-</html>
\ No newline at end of file
diff --git a/examples/amp-story/rtl.html b/examples/amp-story/rtl.html
index 4aaece60bbf5f..e8ac47dda8fc3 100644
--- a/examples/amp-story/rtl.html
+++ b/examples/amp-story/rtl.html
@@ -298,9 +298,6 @@ <h1 grid-area="middle-third" class="bold">Join the worldwide AMP Roadshow</h1>
           </a>
         </amp-story-cta-layer>
       </amp-story-page>
-
-      <amp-story-bookend src="./bookendv1.json" layout="nodisplay">
-      </amp-story-bookend>
     </amp-story>
   </body>
 </html>
diff --git a/examples/amp-story/share.html b/examples/amp-story/share.html
new file mode 100644
index 0000000000000..8879898b52129
--- /dev/null
+++ b/examples/amp-story/share.html
@@ -0,0 +1,52 @@
+<!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>
+    <title>My Story</title>
+    <meta name="viewport"
+          content="width=device-width,minimum-scale=1,initial-scale=1">
+    <link rel="canonical" href="share.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>
+      body {
+        font-family: 'Roboto', sans-serif;
+      }
+      amp-story-page {
+        background-color: white;
+      }
+    </style>
+  </head>
+
+  <body>
+    <amp-story
+      title="Share amp-story example"
+      publisher="The AMP Team"
+      publisher-logo-src="https://example.com/logo/1x1.png"
+      poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
+      poster-square-src="https://example.com/my-story/poster/1x1.jpg"
+      poster-landscape-src="https://example.com/my-story/poster/4x3.jpg"
+      standalone>
+
+      <amp-story-page id="cover">
+        <amp-story-grid-layer template="vertical">
+          <h1>Check the share providers</h1>
+          <h2>Should show Facebook and Whatsapp</h2>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-social-share layout="nodisplay">
+        <script type="application/json">
+          {
+            "shareProviders": [
+              "facebook",
+              "whatsapp"
+            ]
+          }
+        </script>
+      </amp-story-social-share>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/show-tooltip.html b/examples/amp-story/show-tooltip.html
index c3beab60b6a1f..8ecc4dee97994 100644
--- a/examples/amp-story/show-tooltip.html
+++ b/examples/amp-story/show-tooltip.html
@@ -3,8 +3,8 @@
   <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" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+    <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
     <title>My Story</title>
     <meta name="description" content="Get started with amp-story">
 
@@ -58,6 +58,15 @@ <h1>fill</h1>
         </amp-story-grid-layer>
       </amp-story-page>
 
+      <amp-story-page id="twitter">
+        <amp-story-grid-layer>
+          <amp-twitter width="375" height="472"
+             layout="responsive"
+             data-tweetid="638793490521001985" interactive>
+          </amp-twitter>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
     </amp-story>
   </body>
 </html>
diff --git a/examples/amp-story/text-background-color.html b/examples/amp-story/text-background-color.html
index 0153e8ffb920a..3d7617fe2c528 100644
--- a/examples/amp-story/text-background-color.html
+++ b/examples/amp-story/text-background-color.html
@@ -62,7 +62,7 @@ <h1 data-text-background-color="plum">Full block background color</h1>
             <h2><span data-text-background-color="mediumvioletred">Text only background color because I'm in a &lt;span&gt;</span></h5>
       </amp-story-grid-layer>
       <amp-story-cta-layer>
-        <a href="https://amp.dev" class="button" data-text-background-color="plum"> 
+        <a href="https://amp.dev" class="button" data-text-background-color="plum">
           <p>
             Call to action example
           </p>
diff --git a/examples/amp-story/video-one-page.html b/examples/amp-story/video-one-page.html
new file mode 100644
index 0000000000000..059b31f3a7431
--- /dev/null
+++ b/examples/amp-story/video-one-page.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="video-one-page.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>Single page video story [test]</title>
+
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0/amp-viewer-integration-0.1.js"></script>
+  <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
+
+	<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>
+	.story-num {
+		display: block;
+		position: absolute;
+		left: 30px;
+		top: 30px;
+		width: 30px;
+		text-align: center;
+		font-family: sans-serif;
+		background-color: white;
+		border-radius: 50%;
+	}
+	</style>
+</head>
+  <body>
+    <amp-story standalone
+        id="story1"
+        title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
+        publisher-logo-src="./img/AMP-Brand-White-Icon.svg"
+        poster-portrait-src="./img/overview.jpg">>
+
+      <amp-story-page id="page-1">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+						id="video1"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#1"
+            layout="fill">
+            <source src="./video/stamp.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer template="vertical"><span class="story-num">1</span></amp-story-grid-layer>
+      </amp-story-page>
+
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/video-one-page2.html b/examples/amp-story/video-one-page2.html
new file mode 100644
index 0000000000000..feaf20ce7e2bd
--- /dev/null
+++ b/examples/amp-story/video-one-page2.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="video-one-page.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>Single page video story [test]</title>
+
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0/amp-viewer-integration-0.1.js"></script>
+  <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
+
+	<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>
+	.story-num {
+		display: block;
+		position: absolute;
+		left: 30px;
+		top: 30px;
+		width: 30px;
+		text-align: center;
+		font-family: sans-serif;
+		background-color: white;
+		border-radius: 50%;
+	}
+	</style>
+</head>
+  <body>
+    <amp-story standalone
+        id="story2"
+        title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
+        publisher-logo-src="./img/AMP-Brand-White-Icon.svg"
+        poster-portrait-src="./img/overview.jpg">>
+
+      <amp-story-page id="page-1">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+						id="video1"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#1"
+            layout="fill">
+            <source src="./video/stamp-animation.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer template="vertical"><span class="story-num">2</span></amp-story-grid-layer>
+      </amp-story-page>
+
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/videos-cdn.html b/examples/amp-story/videos-cdn.html
new file mode 100644
index 0000000000000..ba0ac126f187b
--- /dev/null
+++ b/examples/amp-story/videos-cdn.html
@@ -0,0 +1,239 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="ampconf.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>10 videos with flexible bitrate</title>
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async custom-element="amp-cache-url" src="https://cdn.ampproject.org/v0/amp-cache-url-0.1.js"></script>
+
+	<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>
+	.page-num {
+		display: block;
+		position: absolute;
+		left: 30px;
+		top: 30px;
+		width: 30px;
+		text-align: center;
+		font-family: sans-serif;
+		background-color: white;
+		border-radius: 50%;
+	}
+  input#flexible-bitrate-debug {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 150px;
+  }
+  span.flexible-bitrate-src-debug {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    padding: 0.2em;
+    font-size: 0.6em;
+    background-color: white;
+  }
+	</style>
+  <script>
+    (self.AMP = self.AMP || []).push(function(AMP) {
+      AMP.toggleExperiment('flexible-bitrate', true);
+    });
+    const IS_VIDEO_FULLY_LOADED_OVERRIDE_FOR_TESTING =
+      'i-amphtml-is-video-fully-loaded-override-for-testing';
+
+    window.onload = () => {
+      const debugField = document.createElement('input');
+      debugField.id = 'flexible-bitrate-debug';
+      debugField.placeholder = 'Debug command (eg: 1d)';
+      document.body.appendChild(debugField);
+      debugField.addEventListener('keyup', (e) => {
+        const number = debugField.value.slice(0, -1);
+        const videoEl = document.querySelector(`amp-video#video${number} video`);
+        if (!videoEl) {
+          return;
+        }
+        if (e.key === 'd') {
+          videoEl.dispatchEvent(new Event('downgrade'));
+        } else if (e.key === 'l') {
+          videoEl.setAttribute(IS_VIDEO_FULLY_LOADED_OVERRIDE_FOR_TESTING, 'true');
+        } else if (e.key === 'u') {
+          videoEl.setAttribute(IS_VIDEO_FULLY_LOADED_OVERRIDE_FOR_TESTING, 'false');
+        } else {
+          return;
+        }
+        // If key was command, clean field.
+        debugField.value = '';
+      });
+
+      // Show video source in video
+      document.body.querySelectorAll('amp-video').forEach((videoEl) => {
+        const srcLabel = document.createElement('span');
+        srcLabel.classList.add('flexible-bitrate-src-debug');
+        videoEl.appendChild(srcLabel);
+        srcLabel.textContent = videoEl.querySelector('video').currentSrc;
+        videoEl.addEventListener('playing', () => {
+          srcLabel.textContent = videoEl.querySelector('video').currentSrc;
+        });
+        videoEl.addEventListener('loadeddata', () => {
+          srcLabel.textContent = videoEl.querySelector('video').currentSrc;
+        });
+      });
+    }
+
+</script>
+</head>
+  <body>
+    <amp-story standalone id="cats"
+        title="Key Highlights of AMP Conf 2018" publisher="The AMP team">
+      <amp-story-page id="page-1">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+						id="video1"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#1"
+            layout="fill">
+            <source src="/examples/av/ForBiggerJoyrides-short.mp4#high" type="video/mp4" data-bitrate="2000">
+            <source src="/examples/av/ForBiggerJoyrides-short.mp4#med" type="video/mp4" data-bitrate="720">
+            <source src="/examples/av/ForBiggerJoyrides-short.mp4#low" type="video/mp4" data-bitrate="400">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">1</span></amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-2">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video2"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#2"
+            layout="fill">
+            <source src="/examples/av/ForBiggerJoyrides-short.mp4#high" type="video/mp4" data-bitrate="2000">
+            <source src="/examples/av/ForBiggerJoyrides-short.mp4#med" type="video/mp4" data-bitrate="720">
+            <source src="/examples/av/ForBiggerJoyrides-short.mp4#low" type="video/mp4" data-bitrate="400">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">2</span></amp-story-grid-layer>
+			</amp-story-page>
+
+			<amp-story-page id="page-3">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video3"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#3"
+            layout="fill"
+            src="https://amp-dev.cdn.ampproject.org/c/s/amp.dev/static/samples/video/tokyo.mp4"
+            amp-orig-src="https://amp.dev/static/samples/video/tokyo.mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">3</span></amp-story-grid-layer>
+			</amp-story-page>
+
+			<amp-story-page id="page-4">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video4"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#4"
+            layout="fill">
+            <source src="https://amp-dev.cdn.ampproject.org/c/s/amp.dev/static/samples/video/tokyo.mp4" amp-orig-src="https://amp.dev/static/samples/video/tokyo.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">4</span></amp-story-grid-layer>
+			</amp-story-page>
+
+      <amp-story-page id="page-5">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					  id="video5"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#5"
+            layout="fill"
+            cache="google">
+            <source src="https://amp.dev/static/samples/video/tokyo.mp4?amp_video_host_url=a">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">5</span></amp-story-grid-layer>
+			</amp-story-page>
+
+      <amp-story-page id="page-6">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video6"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#6"
+            layout="fill">
+            <source src="https://amp-dev.cdn.ampproject.org/c/s/amp.dev/static/samples/video/tokyo.mp4" amp-orig-src="https://amp.dev/static/samples/video/tokyo.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">6</span></amp-story-grid-layer>
+			</amp-story-page>
+
+      <amp-story-page id="page-7">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video7"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#4"
+            layout="fill">
+            <source src="https://amp-dev.cdn.ampproject.org/c/s/amp.dev/static/samples/video/tokyo.mp4" amp-orig-src="https://amp.dev/static/samples/video/tokyo.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">7</span></amp-story-grid-layer>
+			</amp-story-page>
+
+      <amp-story-page id="page-8">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video8"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#8"
+            layout="fill">
+            <source src="https://amp-dev.cdn.ampproject.org/c/s/amp.dev/static/samples/video/tokyo.mp4" amp-orig-src="https://amp.dev/static/samples/video/tokyo.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">8</span></amp-story-grid-layer>
+			</amp-story-page>
+
+      <amp-story-page id="page-9">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video9"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#9"
+            layout="fill">
+            <source src="https://amp-dev.cdn.ampproject.org/c/s/amp.dev/static/samples/video/tokyo.mp4" amp-orig-src="https://amp.dev/static/samples/video/tokyo.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">9</span></amp-story-grid-layer>
+			</amp-story-page>
+
+      <amp-story-page id="page-10">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video10"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#10"
+            layout="fill">
+            <source src="https://amp-dev.cdn.ampproject.org/c/s/amp.dev/static/samples/video/tokyo.mp4" amp-orig-src="https://amp.dev/static/samples/video/tokyo.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">10</span></amp-story-grid-layer>
+			</amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/videos-google-cache.html b/examples/amp-story/videos-google-cache.html
new file mode 100644
index 0000000000000..36a6c477e8298
--- /dev/null
+++ b/examples/amp-story/videos-google-cache.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="https://amp.dev/hello/ampconf.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>Example story with Google cache videos</title>
+
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async custom-element="amp-cache-url" src="https://cdn.ampproject.org/v0/amp-cache-url-0.1.js"></script>
+
+	<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>
+	.page-num {
+		display: block;
+		position: absolute;
+		left: 30px;
+		top: 30px;
+		width: 30px;
+		text-align: center;
+		font-family: sans-serif;
+		background-color: white;
+		border-radius: 50%;
+	}
+	</style>
+</head>
+  <body>
+    <amp-story standalone id="cats"
+        title="Key Highlights of AMP Conf 2018" publisher="The AMP team">
+
+      <amp-story-page id="page-1">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop cache="google"
+						id="video1"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#1"
+            layout="fill">
+            <source src="./video/stamp.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">1</span></amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-2">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop cache="google"
+					id="video2"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#2"
+            layout="fill">
+            <source src="./video/stamp-animation.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">2</span></amp-story-grid-layer>
+			</amp-story-page>
+
+      <amp-story-page id="page-3">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop cache="google"
+					id="video2"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#2"
+            layout="fill">
+            <source src="https://gregable.com/re2ae3Ei/sample-mp4-file.mp4?amp_video_host_url=gregable.com" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">2</span></amp-story-grid-layer>
+			</amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/videos.html b/examples/amp-story/videos.html
new file mode 100644
index 0000000000000..b103687157e48
--- /dev/null
+++ b/examples/amp-story/videos.html
@@ -0,0 +1,173 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="ampconf.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>Example story with 10 videos</title>
+
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+
+	<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>
+	.page-num {
+		display: block;
+		position: absolute;
+		left: 30px;
+		top: 30px;
+		width: 30px;
+		text-align: center;
+		font-family: sans-serif;
+		background-color: white;
+		border-radius: 50%;
+	}
+	</style>
+</head>
+  <body>
+    <amp-story standalone id="cats"
+        title="Key Highlights of AMP Conf 2018" publisher="The AMP team">
+
+      <amp-story-page id="page-1">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+						id="video1"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#1"
+            layout="fill">
+            <source src="./video/stamp.mp4#cache" amp-orig-src="./video/stamp.mp4#origin" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">1</span></amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-2">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video2"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#2"
+            layout="fill">
+            <source src="./video/stamp.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">2</span></amp-story-grid-layer>
+			</amp-story-page>
+
+			<amp-story-page id="page-3">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video3"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#3"
+            layout="fill">
+            <source src="./video/stamp.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">3</span></amp-story-grid-layer>
+			</amp-story-page>
+
+			<amp-story-page id="page-4">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video4"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#4"
+            layout="fill">
+            <source src="./video/stamp.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">4</span></amp-story-grid-layer>
+			</amp-story-page>
+
+			<amp-story-page id="page-5">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video5"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#5"
+            layout="fill">
+            <source src="./video/stamp.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">5</span></amp-story-grid-layer>
+			</amp-story-page>
+
+			<amp-story-page id="page-6">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video6"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#6"
+            layout="fill">
+            <source src="./video/stamp.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">6</span></amp-story-grid-layer>
+			</amp-story-page>
+
+			<amp-story-page id="page-7">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video7"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#7"
+            layout="fill">
+            <source src="./video/stamp.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">7</span></amp-story-grid-layer>
+			</amp-story-page>
+
+			<amp-story-page id="page-8">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video8"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#8"
+            layout="fill">
+            <source src="./video/stamp.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">8</span></amp-story-grid-layer>
+			</amp-story-page>
+
+			<amp-story-page id="page-9">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video9"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#9"
+            layout="fill">
+            <source src="./video/stamp.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">9</span></amp-story-grid-layer>
+			</amp-story-page>
+
+			<amp-story-page id="page-10">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video10"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#10"
+            layout="fill">
+            <source src="./video/stamp.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+				<amp-story-grid-layer><span class="page-num">10</span></amp-story-grid-layer>
+			</amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-subscriptions-google/amp-subscriptions-contribution.amp.html b/examples/amp-subscriptions-google/amp-subscriptions-contribution.amp.html
index c3b317d6764ff..233cd77352bdc 100644
--- a/examples/amp-subscriptions-google/amp-subscriptions-contribution.amp.html
+++ b/examples/amp-subscriptions-google/amp-subscriptions-contribution.amp.html
@@ -281,7 +281,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
             Nullam in libero nisi.
           </p>
 
-          
+
 
           <p>
             Sed pharetra semper fringilla. Nulla fringilla, neque eget
diff --git a/examples/amp-subscriptions-google/amp-subscriptions-iframe.amp.html b/examples/amp-subscriptions-google/amp-subscriptions-iframe.amp.html
index 6445a5127c637..357b96513611e 100644
--- a/examples/amp-subscriptions-google/amp-subscriptions-iframe.amp.html
+++ b/examples/amp-subscriptions-google/amp-subscriptions-iframe.amp.html
@@ -167,7 +167,7 @@
       padding: 16px;
       background: #ffc;
     }
-    
+
     amp-subscriptions-dialog {
       text-align: center;
       padding: 5px;
diff --git a/examples/amp-subscriptions-google/amp-subscriptions-iframe.provider.html b/examples/amp-subscriptions-google/amp-subscriptions-iframe.provider.html
index af82bb9ce982a..00fa169b2349a 100644
--- a/examples/amp-subscriptions-google/amp-subscriptions-iframe.provider.html
+++ b/examples/amp-subscriptions-google/amp-subscriptions-iframe.provider.html
@@ -2,9 +2,9 @@
 <html>
 <head>
   <script src="/extensions/amp-access/0.1/iframe-api/build/index.js"></script>
-  
+
   <script>
-    
+
     var pageConfig;
     var pageProtocol;
     function log() {
@@ -19,7 +19,7 @@
     var Controller = function() {
     };
     Controller.prototype.connect = function(origin, protocol, config) {
-      pageConfg = config; 
+      pageConfg = config;
       pageProtocol = protocol;
       log('connect: ', origin, protocol, config);
     };
diff --git a/examples/amp-subscriptions-google/amp-subscriptions-metering-gaa-bail.amp.html b/examples/amp-subscriptions-google/amp-subscriptions-metering-gaa-bail.amp.html
new file mode 100644
index 0000000000000..d7af812e03e87
--- /dev/null
+++ b/examples/amp-subscriptions-google/amp-subscriptions-metering-gaa-bail.amp.html
@@ -0,0 +1,198 @@
+<!--
+  Demonstrates Showcase metering,
+  with *subscription* entitlements that grant.
+
+  Since the subscription entitlements grant,
+  the metering entitlements should be ignored.
+
+  (amp-subscriptions-google)
+-->
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>Showcase with subscription entitlements that grant</title>
+    <link rel="canonical" href="amp-subscriptions-metering-gaa-bail.amp.html" />
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,initial-scale=1"
+    />
+    <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
+    >
+    <script
+      async
+      custom-element="amp-subscriptions"
+      src="https://cdn.ampproject.org/v0/amp-subscriptions-0.1.js"
+    ></script>
+    <script
+      async
+      custom-element="amp-subscriptions-google"
+      src="https://cdn.ampproject.org/v0/amp-subscriptions-google-0.1.js"
+    ></script>
+    <script
+      async
+      custom-template="amp-mustache"
+      src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"
+    ></script>
+    <script
+      async
+      custom-element="amp-analytics"
+      src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
+    ></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script type="application/ld+json">
+      {
+        "@context": "http://schema.org",
+        "@type": "NewsArticle",
+        "isAccessibleForFree": "False",
+        "publisher": {
+          "name": "The Scenic - USA",
+          "@type": "Organization",
+          "@id": "scenic-2017.appspot.com",
+          "logo": {
+            "@type": "ImageObject",
+            "url": "https://scenic-2017.appspot.com/icons/icon-2x.png"
+          }
+        },
+        "isPartOf": {
+          "@type": ["CreativeWork", "Product"],
+          "name": "Product A",
+          "productID": "scenic-2017.appspot.com:news"
+        }
+      }
+    </script>
+    <script type="application/json" id="amp-subscriptions">
+      {
+        "services": [
+          {
+            "authorizationUrl": "//localhost:8000/subscription/1/entitlements",
+            "pingbackUrl": "//localhost:8000/subscription/pingback",
+            "actions": {
+              "login": "//localhost:8000/subscription/login",
+              "subscribe": "//localhost:8000/subscription/subscribe"
+            }
+          },
+          {
+            "serviceId": "subscribe.google.com",
+            "enableMetering": true,
+            "googleSignInHelperUrl": "http://localhost:8000/examples/amp-subscriptions-google/amp-subscriptions-metering-registration-widget.html",
+            "extendedAccessRegistrationUrl": "http://localhost:8000/subscription/register"
+          }
+        ]
+      }
+    </script>
+
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <style amp-custom>
+      body {
+        margin: 0;
+        font-family: 'Roboto', Serif;
+      }
+
+      .content-container p {
+        line-height: 1.4;
+      }
+
+      header,
+      .article-body {
+        margin: 15px;
+      }
+
+      .header-time {
+        color: #a8a3ae;
+        font-family: 'Roboto';
+        font-size: 12px;
+      }
+
+      h1 {
+        margin: 5px 0;
+        font-weight: normal;
+      }
+    </style>
+  </head>
+  <body>
+    <main role="main">
+      <article>
+        <div class="content-container">
+          <header>
+            <h1 itemprop="headline">SwG Metering Example</h1>
+            <time
+              class="header-time"
+              itemprop="datePublished"
+              datetime="2015-09-14 13:00"
+              >January 1, 1970</time
+            >
+          </header>
+
+          <div subscriptions-section="content-not-granted" class="article-body">
+            <p>-- PAYWALL --</p>
+          </div>
+
+          <div subscriptions-section="content" class="article-body">
+            <p>🎉 Congratulations! You unlocked the paywall!</p>
+          </div>
+        </div>
+      </article>
+    </main>
+  </body>
+</html>
diff --git a/examples/amp-subscriptions-google/amp-subscriptions-metering-gaa.amp.html b/examples/amp-subscriptions-google/amp-subscriptions-metering-gaa.amp.html
new file mode 100644
index 0000000000000..ea52fb926a85e
--- /dev/null
+++ b/examples/amp-subscriptions-google/amp-subscriptions-metering-gaa.amp.html
@@ -0,0 +1,195 @@
+<!--
+  Demonstrates Showcase metering,
+  with *GAA metering* entitlements that grant.
+
+  (amp-subscriptions-google)
+-->
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>Showcase with GAA metering entitlements that grant</title>
+    <link rel="canonical" href="amp-subscriptions-metering-gaa.amp.html" />
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,initial-scale=1"
+    />
+    <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
+    >
+    <script
+      async
+      custom-element="amp-subscriptions"
+      src="https://cdn.ampproject.org/v0/amp-subscriptions-0.1.js"
+    ></script>
+    <script
+      async
+      custom-element="amp-subscriptions-google"
+      src="https://cdn.ampproject.org/v0/amp-subscriptions-google-0.1.js"
+    ></script>
+    <script
+      async
+      custom-template="amp-mustache"
+      src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"
+    ></script>
+    <script
+      async
+      custom-element="amp-analytics"
+      src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
+    ></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script type="application/ld+json">
+      {
+        "@context": "http://schema.org",
+        "@type": "NewsArticle",
+        "isAccessibleForFree": "False",
+        "publisher": {
+          "name": "The Scenic - USA",
+          "@type": "Organization",
+          "@id": "scenic-2017.appspot.com",
+          "logo": {
+            "@type": "ImageObject",
+            "url": "https://scenic-2017.appspot.com/icons/icon-2x.png"
+          }
+        },
+        "isPartOf": {
+          "@type": ["CreativeWork", "Product"],
+          "name": "Product A",
+          "productID": "scenic-2017.appspot.com:news"
+        }
+      }
+    </script>
+    <script type="application/json" id="amp-subscriptions">
+      {
+        "services": [
+          {
+            "authorizationUrl": "//localhost:8000/subscription/0/entitlements?rid=READER_ID",
+            "pingbackUrl": "//localhost:8000/subscription/pingback",
+            "actions": {
+              "login": "//localhost:8000/subscription/login",
+              "subscribe": "//localhost:8000/subscription/subscribe"
+            }
+          },
+          {
+            "serviceId": "subscribe.google.com",
+            "enableMetering": true,
+            "googleSignInHelperUrl": "http://localhost:8000/examples/amp-subscriptions-google/amp-subscriptions-metering-registration-widget.html",
+            "extendedAccessRegistrationUrl": "http://localhost:8000/subscription/register"
+          }
+        ]
+      }
+    </script>
+
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <style amp-custom>
+      body {
+        margin: 0;
+        font-family: 'Roboto', Serif;
+      }
+
+      .content-container p {
+        line-height: 1.4;
+      }
+
+      header,
+      .article-body {
+        margin: 15px;
+      }
+
+      .header-time {
+        color: #a8a3ae;
+        font-family: 'Roboto';
+        font-size: 12px;
+      }
+
+      h1 {
+        margin: 5px 0;
+        font-weight: normal;
+      }
+    </style>
+  </head>
+  <body>
+    <main role="main">
+      <article>
+        <div class="content-container">
+          <header>
+            <h1 itemprop="headline">SwG Metering Example</h1>
+            <time
+              class="header-time"
+              itemprop="datePublished"
+              datetime="2015-09-14 13:00"
+              >January 1, 1970</time
+            >
+          </header>
+
+          <div subscriptions-section="content-not-granted" class="article-body">
+            <p>-- PAYWALL --</p>
+          </div>
+
+          <div subscriptions-section="content" class="article-body">
+            <p>🎉 Congratulations! You unlocked the paywall!</p>
+          </div>
+        </div>
+      </article>
+    </main>
+  </body>
+</html>
diff --git a/examples/amp-subscriptions-google/amp-subscriptions-metering-laa.amp.html b/examples/amp-subscriptions-google/amp-subscriptions-metering-laa.amp.html
new file mode 100644
index 0000000000000..f27d831e7d6ff
--- /dev/null
+++ b/examples/amp-subscriptions-google/amp-subscriptions-metering-laa.amp.html
@@ -0,0 +1,194 @@
+<!--
+  Demonstrates Showcase metering,
+  with *LAA metering* entitlements that grant.
+
+  (amp-subscriptions-google)
+-->
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>Showcase with LAA metering entitlements that grant</title>
+    <link rel="canonical" href="amp-subscriptions-metering-laa.amp.html" />
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,initial-scale=1"
+    />
+    <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
+    >
+    <script
+      async
+      custom-element="amp-subscriptions"
+      src="https://cdn.ampproject.org/v0/amp-subscriptions-0.1.js"
+    ></script>
+    <script
+      async
+      custom-element="amp-subscriptions-google"
+      src="https://cdn.ampproject.org/v0/amp-subscriptions-google-0.1.js"
+    ></script>
+    <script
+      async
+      custom-template="amp-mustache"
+      src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"
+    ></script>
+    <script
+      async
+      custom-element="amp-analytics"
+      src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
+    ></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script src="https://news.google.com/swg/js/v1/swg-gaa.js"></script>
+    <script type="application/ld+json">
+      {
+        "@context": "http://schema.org",
+        "@type": "NewsArticle",
+        "isAccessibleForFree": "False",
+        "publisher": {
+          "name": "The Scenic - USA",
+          "@type": "Organization",
+          "@id": "scenic-2017.appspot.com",
+          "logo": {
+            "@type": "ImageObject",
+            "url": "https://scenic-2017.appspot.com/icons/icon-2x.png"
+          }
+        },
+        "isPartOf": {
+          "@type": ["CreativeWork", "Product"],
+          "name": "Product A",
+          "productID": "scenic-2017.appspot.com:news"
+        }
+      }
+    </script>
+    <script type="application/json" id="amp-subscriptions">
+      {
+        "services": [
+          {
+            "authorizationUrl": "//localhost:8000/subscription/0/entitlements",
+            "pingbackUrl": "//localhost:8000/subscription/pingback",
+            "actions": {
+              "login": "//localhost:8000/subscription/login",
+              "subscribe": "//localhost:8000/subscription/subscribe"
+            }
+          },
+          {
+            "serviceId": "subscribe.google.com",
+            "enableLAA": true
+          }
+        ]
+      }
+    </script>
+
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <style amp-custom>
+      body {
+        margin: 0;
+        font-family: 'Roboto', Serif;
+      }
+
+      .content-container p {
+        line-height: 1.4;
+      }
+
+      header,
+      .article-body {
+        margin: 15px;
+      }
+
+      .header-time {
+        color: #a8a3ae;
+        font-family: 'Roboto';
+        font-size: 12px;
+      }
+
+      h1 {
+        margin: 5px 0;
+        font-weight: normal;
+      }
+    </style>
+  </head>
+  <body>
+    <main role="main">
+      <article>
+        <div class="content-container">
+          <header>
+            <h1 itemprop="headline">SwG Metering Example</h1>
+            <time
+              class="header-time"
+              itemprop="datePublished"
+              datetime="2015-09-14 13:00"
+              >January 1, 1970</time
+            >
+          </header>
+
+          <div subscriptions-section="content-not-granted" class="article-body">
+            <p>-- PAYWALL --</p>
+          </div>
+
+          <div subscriptions-section="content" class="article-body">
+            <p>🎉 Congratulations! You unlocked the paywall!</p>
+          </div>
+        </div>
+      </article>
+    </main>
+  </body>
+</html>
diff --git a/examples/amp-subscriptions-google/amp-subscriptions-metering-registration-widget.html b/examples/amp-subscriptions-google/amp-subscriptions-metering-registration-widget.html
new file mode 100644
index 0000000000000..d28b604e62cae
--- /dev/null
+++ b/examples/amp-subscriptions-google/amp-subscriptions-metering-registration-widget.html
@@ -0,0 +1,25 @@
+<body>
+  <!--
+    NOTE: Replace `content` with your own Google Sign-In OAuth Client ID.
+    https://developers.google.com/identity/sign-in/web/sign-in
+  -->
+  <meta
+    content="520465458218-e9vp957krfk2r0i4ejeh6aklqm7c25p4.apps.googleusercontent.com"
+    name="google-signin-client_id"
+  />
+  <script src="https://apis.google.com/js/platform.js" async defer></script>
+  <script src="https://news.google.com/swg/js/v1/swg-gaa.js"></script>
+
+  <script>
+    GaaGoogleSignInButton.show({
+      // List the origins you trust to host your Google Sign-In button's iframe.
+      // This should include the origin(s) you serve articles from.
+      // This should also include your AMP cache origin(s), if you're using AMP.
+      allowedOrigins: [
+        "http://localhost:8000", // Local server, for development
+        "http://localhost:8080", // Local server, for development
+        "https://scenic-2017.appspot.com", // Production server, for demos
+      ],
+    });
+  </script>
+</body>
diff --git a/examples/amp-subscriptions-google/amp-subscriptions-smartbox.amp.html b/examples/amp-subscriptions-google/amp-subscriptions-smartbox.amp.html
index ecf679b9d9f74..92dddf0b1045e 100644
--- a/examples/amp-subscriptions-google/amp-subscriptions-smartbox.amp.html
+++ b/examples/amp-subscriptions-google/amp-subscriptions-smartbox.amp.html
@@ -245,6 +245,6 @@ <h3>"Smart Button (Dark w/ custom message text color)"</h3>
       subscriptions-message-text-color="rgba(0, 120, 255, 0.95)"
       subscriptions-message-number="1"
       subscriptions-decorate>Yes I will Contribute</button>
-    
+
 </body>
 </html>
diff --git a/examples/amp-subscriptions-rtp.amp.html b/examples/amp-subscriptions-rtp.amp.html
index 92c09296aef34..68eb4c220fa30 100644
--- a/examples/amp-subscriptions-rtp.amp.html
+++ b/examples/amp-subscriptions-rtp.amp.html
@@ -386,7 +386,7 @@ <h2>
       subscriptions-service="local"
       subscriptions-decorate>Publisher offer</button>
     <div subscriptions-display="NOT subscribed">btw u are not subscribed</div>
-    
+
 
   </template>
 </body>
diff --git a/examples/amp-subscriptions.rtc.amp.html b/examples/amp-subscriptions.rtc.amp.html
new file mode 100644
index 0000000000000..e9f77b7039c08
--- /dev/null
+++ b/examples/amp-subscriptions.rtc.amp.html
@@ -0,0 +1,286 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>subscriptions example</title>
+  <link rel="canonical" href="amps.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <script async custom-element="amp-subscriptions" src="https://cdn.ampproject.org/v0/amp-subscriptions-0.1.js"></script>
+  <script async custom-element="amp-subscriptions-google" src="https://cdn.ampproject.org/v0/amp-subscriptions-google-0.1.js"></script>
+  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
+  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script type="application/ld+json">
+  {
+    "@context": "http://schema.org",
+    "@type": "NewsArticle",
+    "isAccessibleForFree": "False",
+    "isPartOf": {
+      "@type": ["CreativeWork", "Product"],
+      "name" : "Product A",
+      "productID": "scenic-2017.appspot.com:news"
+    }
+  }
+  </script>
+  <script type="application/json" id="amp-subscriptions">
+    {
+      "services": [
+        {
+          "authorizationUrl": "//localhost:8000/subscription/0/entitlements",
+          "pingbackUrl": "//localhost:8000/subscription/pingback",
+          "actions":{
+            "login": "//localhost:8000/subscription/login",
+            "subscribe": "//localhost:8000/subscription/subscribe"
+          }
+        },
+        {
+          "serviceId": "subscribe.google.com",
+          "skuMapUrl": "//localhost:8000/subscriptions/skumap"
+        }
+      ]
+    }
+  </script>
+
+
+  <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
+  <style amp-custom>
+    body {
+      margin: 0;
+      font-family: 'Georgia', Serif;
+    }
+
+    .brand-logo {
+      font-family: 'Open Sans';
+    }
+
+    .ad-container {
+      display: flex;
+      justify-content: center;
+    }
+
+    .content-container p {
+      line-height: 24px;
+    }
+
+    header,
+    .article-body {
+      padding: 15px;
+    }
+
+    .full-bleed {
+      margin: 0 -15px;
+    }
+
+    figure {
+      margin: 0;
+    }
+
+    figcaption {
+      color: #6f757a;
+      padding: 15px 0;
+      font-size: .9em;
+    }
+
+    .author {
+      display: flex;
+      align-items: center;
+
+      background: #f4f4f4;
+      padding: 0 15px;
+
+      font-size: .8em;
+
+      border: solid #dcdcdc;
+      border-width: 1px 0;
+    }
+
+    .header-time {
+      color: #a8a3ae;
+      font-family: 'Roboto';
+      font-size: 12px;
+    }
+
+    .author p {
+      margin: 5px;
+    }
+
+    .byline {
+      font-family: 'Roboto';
+      display: inline-block;
+    }
+
+    .byline p {
+      line-height: normal;
+    }
+
+    .byline .brand {
+      color: #6f757a;
+    }
+
+    .standfirst {
+      color: #6f757a;
+    }
+
+    .mailto {
+      text-decoration: none;
+    }
+
+    #author-avatar {
+      margin: 10px;
+      border: 5px solid #fff;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+    }
+
+    h1 {
+      margin: 5px 0;
+      font-weight: normal;
+    }
+
+    footer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 226px;
+      background: #f4f4f4;
+    }
+
+    hr {
+      margin: 0;
+    }
+
+    amp-img {
+      background-color: #f4f4f4;
+    }
+
+    .login-section {
+      margin: 16px;
+      margin-top: 24px;
+      padding: 16px;
+      background: #ffc;
+    }
+
+    amp-subscriptions-dialog { padding: 10px;}
+
+
+
+  </style>
+</head>
+<body>
+
+
+<amp-analytics type="googleanalytics" id="analytics2">
+<script type="application/json">
+{
+  "vars": {
+    "account": "UA-YYYY-Y"
+  },
+  "triggers": {
+    "defaultPageview": {
+      "on": "visible",
+      "request": "pageview",
+      "vars": {
+        "title": "Example Pageview"
+      }
+    },
+    "authorizationReceived": {
+      "on": "subscriptions-entitlement-resolved",
+      "request": "event",
+      "vars": {
+        "eventCategory": "amp-subscriptions",
+        "eventAction": "subscriptions-entitlement-resolved",
+        "eventValue": "ACCESS_READER_ID/AUTHDATA(granted)/${serviceId}"
+      }
+    },
+    "pingbackSent": {
+      "on": "subscriptions-action-subscribe-started",
+      "request": "event",
+      "vars": {
+        "eventCategory": "amp-subscriptions",
+        "eventAction": "action-subscribe-started"
+      }
+    }
+  }
+}
+</script>
+</amp-analytics>
+
+
+  <main role="main">
+    <article>
+
+
+      <div class="content-container">
+        <header>
+          <h1 itemprop="headline">Lorem Ipsum</h1>
+          <time class="header-time" itemprop="datePublished"
+              datetime="2015-09-14 13:00">September 14, 2015</time>
+          <p class="standfirst">
+            Fusce pretium tempor justo, vitae consequat dolor maximus eget.
+          </p>
+        </header>
+
+        <div class="author">
+          <amp-img src="img/sample.jpg" id="author-avatar" placeholder
+              height="50" width="50">
+          </amp-img>
+          <div class="byline">
+            <p>
+              by <span itemscope itemtype="http://schema.org/Person"
+              itemprop="author"><b>Lorem Ipsum</b>
+              <a class="mailto" href="mailto:lorem.ipsum@example.com">
+              lorem.ipsum@</a></span>
+            </p>
+            <p class="brand">PublisherName News Reporter<p>
+          </div>
+        </div>
+
+        <section subscriptions-section="content">
+          This sample page is for real time config of SwG buttons - it looks like you are subscribed so you won't see the buttons!  Try again in incognto mode,
+        </section>
+
+
+
+        <section subscriptions-section="content-not-granted">
+          Login or subscribe to read more.
+        </section>
+
+        <br/>
+
+
+
+      </div>
+    </article>
+  </main>
+
+  <footer>
+    <div class="brand-logo">PublisherLogo</div>
+  </footer>
+
+
+  <template type="amp-mustache" subscriptions-dialog subscriptions-display="NOT Subscribed">
+    <div>Dialog for non subscribed users, the action of this button is configured by the RTC url<div>
+    <div>
+      Single SKU
+      <div id="subscribeButtonSimple" subscriptions-google-rtc="true"
+        subscriptions-display="NOT Subscribed"
+        subscriptions-action="subscribe"
+        subscriptions-service="subscribe.google.com"
+        subscriptions-decorate>Subscribe</div>
+      </div>
+    <div>
+      Carousel
+      <div id="subscribeButtonCarousel" subscriptions-google-rtc="true"
+        subscriptions-display="NOT Subscribed"
+        subscriptions-action="subscribe"
+        subscriptions-service="subscribe.google.com"
+        subscriptions-decorate>Subscribe</div>
+      </div>
+  </template>
+  <template type="amp-mustache" subscriptions-dialog subscriptions-display="Subscribed">
+    <div >You are already subscribed so you won't see buttons here.</div>
+  </template>
+</body>
+</html>
diff --git a/examples/amp-tiktok.amp.html b/examples/amp-tiktok.amp.html
new file mode 100644
index 0000000000000..e45353152ddc0
--- /dev/null
+++ b/examples/amp-tiktok.amp.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>amp-tiktok example</title>
+    <link rel="canonical" href="amps.html" />
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,initial-scale=1"
+    />
+    <!-- prettier-ignore -->
+    <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>
+      amp-tiktok {
+        color: red;
+        border-style: solid;
+      }
+    </style>
+    <script
+      async
+      custom-element="amp-tiktok"
+      src="https://cdn.ampproject.org/v0/amp-tiktok-0.1.js"
+    ></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+  <body>
+    <h2>`amp-tiktok` minimalist implementation with video id</h2>
+    <div style="display: flex; flex-direction: row;">
+      <amp-tiktok width="500" height="500" data-src="6943753342808034566">
+      </amp-tiktok>
+      <div style="height: 60vh; width: 300px">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </div>
+    </div>
+    <h2>`amp-tiktok` minimalist implementation with oEmbed request link</h2>
+    <amp-tiktok
+      width="700"
+      height="800"
+      data-src="https://www.tiktok.com/@scout2015/video/6943753342808034566"
+    >
+    </amp-tiktok>
+    <h2>`amp-tiktok` TikTok generated `blockquote` implementation</h2>
+    <amp-tiktok width="500" height="800">
+      <blockquote
+        class="tiktok-embed"
+        cite="https://www.tiktok.com/@countingprimes/video/6948210747285441798"
+        data-video-id="6948210747285441798"
+        style="max-width: 605px; min-width: 325px"
+      >
+        <section>
+          <a
+            target="_blank"
+            title="@countingprimes"
+            href="https://www.tiktok.com/@countingprimes"
+            >@countingprimes</a
+          >
+          <p>
+            VIM is great.... right up until you start typing the commands into every
+            single text editor you see. I’d like to apologize for all my unneeded
+            “:wq”’s
+          </p>
+          <a
+            target="_blank"
+            title="♬ original sound - countingprimes"
+            href="https://www.tiktok.com/music/original-sound-6948210588145175302"
+            >♬ original sound - countingprimes</a
+          >
+        </section>
+      </blockquote>
+    </amp-tiktok>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </p>
+  </body>
+</html>
diff --git a/examples/amp-timeago.amp.html b/examples/amp-timeago.amp.html
index 2c882f3e49241..3276120bb71c4 100644
--- a/examples/amp-timeago.amp.html
+++ b/examples/amp-timeago.amp.html
@@ -19,12 +19,7 @@
       border: 1px solid black;
     }
   </style>
-  <script>	
-  (self.AMP = self.AMP || []).push(function(AMP) {	
-    AMP.toggleExperiment('amp-timeago-bento', true);	
-  });	
-  </script>
-  <script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-1.0.js"></script>
+  <script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
diff --git a/examples/amp-video-iframe.html b/examples/amp-video-iframe.html
index 873571bf4cf17..cec51d8a84ffc 100644
--- a/examples/amp-video-iframe.html
+++ b/examples/amp-video-iframe.html
@@ -3,28 +3,16 @@
 <head>
   <meta charset="utf-8">
   <title>amp-video-iframe</title>
-  <link rel="canonical" href="amps.html" >
+  <link rel="canonical" href="./amp-video-iframe.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
   <style amp-custom>
     body {
-      max-width: 527px;
+      font-family: sans-serif;
+      max-width: 600px;
     }
-    [fallback] {
-      display: block;
-      /* @alternative */ display: flex;
-      flex-direction: column;
-      flex-wrap: nowrap;
-      justify-content: center;
-      align-items: center;
-      background: rgba(0, 0, 0, 0.5);
-      color: #fff;
-    }
-    .spacer {
-      height: 100vh;
-    }
-    p, h1, h2, h3 {
-      padding: 10px;
+    [placeholder] {
+      background: #ddd;
     }
   </style>
   <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>
@@ -45,5 +33,11 @@
       This is a fallback
     </div>
   </amp-video-iframe>
+  <p>
+    Different example using <code>amp-consent</code>:
+    <a href="/examples/amp-video-iframe/consent.html">
+      <code>/examples/amp-video-iframe/consent.html</code>
+    </a>
+  </p>
 </body>
 </html>
diff --git a/examples/amp-video-iframe/ForBiggerJoyRIdes.jpg b/examples/amp-video-iframe/ForBiggerJoyRIdes.jpg
new file mode 100644
index 0000000000000..e5f89819806ab
Binary files /dev/null and b/examples/amp-video-iframe/ForBiggerJoyRIdes.jpg differ
diff --git a/examples/amp-video-iframe/consent.html b/examples/amp-video-iframe/consent.html
new file mode 100644
index 0000000000000..e2ee6c4baee19
--- /dev/null
+++ b/examples/amp-video-iframe/consent.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>amp-video-iframe with amp-consent</title>
+    <link rel="canonical" href="./consent.html" />
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,initial-scale=1"
+    />
+    <script
+      async
+      custom-element="amp-consent"
+      src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"
+    ></script>
+    <script
+      async
+      custom-element="amp-video-iframe"
+      src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"
+    ></script>
+    <style amp-custom>
+      body {
+        font-family: sans-serif;
+        max-width: 600px;
+      }
+      [fallback] {
+        font-weight: bold;
+        padding: 20px;
+        background: #fdd;
+      }
+    </style>
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+  <body>
+    <amp-video-iframe
+      id="myVideo"
+      src="/examples/amp-video-iframe/frame-consent.html"
+      width="16"
+      height="9"
+      layout="responsive"
+      autoplay
+    >
+      <amp-img
+        src="/examples/amp-video-iframe/ForBiggerJoyrides.jpg"
+        layout="fill"
+        placeholder
+      ></amp-img>
+      <amp-layout type="fill" fallback>
+        Consent rejected
+      </amp-layout>
+    </amp-video-iframe>
+
+    <!-- Any amp-consent configuration -->
+    <amp-consent id="amp-consent" layout="nodisplay" type="_ping_">
+      <script type="application/json">
+        {}
+      </script>
+    </amp-consent>
+  </body>
+</html>
diff --git a/examples/amp-video-iframe/frame-consent-es2015.html b/examples/amp-video-iframe/frame-consent-es2015.html
new file mode 100644
index 0000000000000..1fab00e226529
--- /dev/null
+++ b/examples/amp-video-iframe/frame-consent-es2015.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <script async src="https://cdn.ampproject.org/video-iframe-integration-v0.js"></script>
+</head>
+<body style="margin: 0; padding: 0">
+  <!--
+    This video is blocked until consent.
+    Notice the lack of `src` or `sources`, which are added after consent data is
+    received.
+  -->
+  <video
+    playsinline
+    controls
+    style="width: 100vw; height: 100vh;"
+    data-src-after-consent="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4">
+  </video>
+
+  <!--
+    Integration script.
+    This example is written in ES2015+.
+    If you require ES5 support, transpile this code.
+    If you wish to write an integration script in ES5, see frame-consent.html
+  -->
+  <script>
+    // Wait for API to initialize
+    (window.AmpVideoIframe = window.AmpVideoIframe || [])
+      .push(integration => {
+        // `integration` is an object containing the tools required to
+        // integrate.
+        integration.getConsentData(({ consentPolicyState }) => {
+          const video = document.querySelector('video');
+
+          // Remove video and stop here when consent is not given.
+          if (
+            consentPolicyState !== /* SUFFICIENT */ 1 &&
+            consentPolicyState !== /* UNKNOWN_NOT_REQUIRED */ 3
+          ) {
+            video.parentElement.removeChild(video);
+            // Posting an error allows the host document to display a fallback
+            // element and/or dispose of the iframe.
+            integration.postEvent('error');
+            return;
+          }
+
+          // Otherwise set `src` once consent is available.
+          // This can also be accomplished by initializing the video element
+          // only at this point.
+          video.src = video.dataset.srcAfterConsent;
+
+          // And then "unblock" by defining implementation.
+          // If you're using `integration.listenTo()`, that would the only
+          // required call at this point.
+          let muted = false;
+
+          video.addEventListener('playing', () => {
+            integration.postEvent('playing');
+          });
+
+          video.addEventListener('pause', () => {
+            integration.postEvent('pause');
+          });
+
+          video.addEventListener('ended', () => {
+            integration.postEvent('ended');
+          });
+
+          video.addEventListener('canplay', () => {
+            integration.postEvent('canplay');
+          });
+
+          video.addEventListener('volumechange', () => {
+            if (video.volume < 0.01) {
+              muted = true;
+              integration.postEvent('muted');
+              return;
+            }
+            if (muted) {
+              muted = false;
+              integration.postEvent('unmuted');
+            }
+          });
+
+          integration.method('play', () => {
+            video.play();
+          });
+          integration.method('pause', () => {
+            video.pause();
+          });
+          integration.method('mute', () => {
+            video.muted = true;
+          });
+          integration.method('unmute', () => {
+            video.muted = false;
+          });
+          integration.method('showcontrols', () => {
+            video.controls = true;
+          });
+          integration.method('hidecontrols', () => {
+            video.controls = false;
+          });
+          integration.method('fullscreenenter', () => {
+            // Unsupported in example. This should be a call to `requestFullscreen`
+            // or browser equivalents.
+          });
+          integration.method('fullscreenexit', () => {
+            // Unsupported in example. This should be a call to `exitFullscreen`
+            // or browser equivalents.
+          });
+
+          setInterval(() => {
+            // Post a custom analytics event every 3 seconds.
+            integration.postAnalyticsEvent('video-custom-foo', /* optional */ {
+              'myVar': Math.random().toString(),
+            });
+          }, 3000);
+        });
+      });
+  </script>
+</body>
+</html>
diff --git a/examples/amp-video-iframe/frame-consent.html b/examples/amp-video-iframe/frame-consent.html
new file mode 100644
index 0000000000000..973cef60ad6a2
--- /dev/null
+++ b/examples/amp-video-iframe/frame-consent.html
@@ -0,0 +1,126 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <script async src="https://cdn.ampproject.org/video-iframe-integration-v0.js"></script>
+</head>
+<body style="margin: 0; padding: 0">
+  <!--
+    This video is blocked until consent.
+    Notice the lack of `src` or `sources`, which are added after consent data is
+    received.
+  -->
+  <video
+    playsinline
+    controls
+    style="width: 100vw; height: 100vh;"
+    data-src-after-consent="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4">
+  </video>
+
+  <!--
+    Integration script.
+    This example is written in ES5 for browser compatibility.
+    If you wish to write an integration script in ES2015+ that doesn't support
+    olders browser support or is otherwise transpiled into ES5, see
+    frame-consent-es2015.html
+  -->
+  <script>
+    // Wait for API to initialize
+    (window.AmpVideoIframe = window.AmpVideoIframe || [])
+        .push(onAmpIntegrationReady);
+
+    function onAmpIntegrationReady(integration) {
+      // `integration` is an object containing the tools required to
+      // integrate.
+      integration.getConsentData(function(consent) {
+        var video = document.querySelector('video');
+
+        // Remove video and stop here when consent is not given.
+        if (
+          consent.consentPolicyState !== /* SUFFICIENT */ 1 &&
+          consent.consentPolicyState !== /* UNKNOWN_NOT_REQUIRED */ 3
+        ) {
+          video.parentElement.removeChild(video);
+          // Posting an error allows the host document to display a fallback
+          // element and/or dispose of the iframe.
+          integration.postEvent('error');
+          return;
+        }
+
+        // Otherwise set `src` once consent is available.
+        // This can also be accomplished by initializing the video element
+        // only at this point.
+        video.src = video.dataset.srcAfterConsent;
+
+        // And then "unblock" by defining implementation.
+        // If you're using `integration.listenTo()`, that would the only
+        // required call at this point.
+        var muted = false;
+
+        video.addEventListener('playing', function() {
+          integration.postEvent('playing');
+        });
+
+        video.addEventListener('pause', function() {
+          integration.postEvent('pause');
+        });
+
+        video.addEventListener('ended', function() {
+          integration.postEvent('ended');
+        });
+
+        video.addEventListener('canplay', function() {
+          integration.postEvent('canplay');
+        });
+
+        video.addEventListener('volumechange', function() {
+          if (video.volume < 0.01) {
+            muted = true;
+            integration.postEvent('muted');
+            return;
+          }
+          if (muted) {
+            muted = false;
+            integration.postEvent('unmuted');
+          }
+        });
+
+        integration.method('play', function() {
+          video.play();
+        });
+        integration.method('pause', function() {
+          video.pause();
+        });
+        integration.method('mute', function() {
+          video.muted = true;
+        });
+        integration.method('unmute', function() {
+          video.muted = false;
+        });
+        integration.method('showcontrols', function() {
+          video.controls = true;
+        });
+        integration.method('hidecontrols', function() {
+          video.controls = false;
+        });
+        integration.method('fullscreenenter', function() {
+          // Unsupported in example. This should be a call to `requestFullscreen`
+          // or browser equivalents.
+        });
+        integration.method('fullscreenexit', function() {
+          // Unsupported in example. This should be a call to `exitFullscreen`
+          // or browser equivalents.
+        });
+
+        setInterval(function() {
+          // Post a custom analytics event every 3 seconds.
+          integration.postAnalyticsEvent('video-custom-foo', /* optional */ {
+            'myVar': Math.random().toString(),
+          });
+        }, 3000);
+      });
+    }
+  </script>
+</body>
+</html>
diff --git a/examples/amp-video/multi-bitrate/1000.mp4 b/examples/amp-video/multi-bitrate/1000.mp4
new file mode 100644
index 0000000000000..2cbc7d5536622
Binary files /dev/null and b/examples/amp-video/multi-bitrate/1000.mp4 differ
diff --git a/examples/amp-video/multi-bitrate/2000.mp4 b/examples/amp-video/multi-bitrate/2000.mp4
new file mode 100644
index 0000000000000..a92d845d447aa
Binary files /dev/null and b/examples/amp-video/multi-bitrate/2000.mp4 differ
diff --git a/examples/amp-video/multi-bitrate/223.mp4 b/examples/amp-video/multi-bitrate/223.mp4
new file mode 100644
index 0000000000000..250443db76355
Binary files /dev/null and b/examples/amp-video/multi-bitrate/223.mp4 differ
diff --git a/examples/amp-video/multi-bitrate/320.mp4 b/examples/amp-video/multi-bitrate/320.mp4
new file mode 100644
index 0000000000000..9a8d2dd1eb5f1
Binary files /dev/null and b/examples/amp-video/multi-bitrate/320.mp4 differ
diff --git a/examples/amp-video/multi-bitrate/611.mp4 b/examples/amp-video/multi-bitrate/611.mp4
new file mode 100644
index 0000000000000..870f1927b149a
Binary files /dev/null and b/examples/amp-video/multi-bitrate/611.mp4 differ
diff --git a/examples/amp-video/multi-bitrate/multi-bitrate.html b/examples/amp-video/multi-bitrate/multi-bitrate.html
new file mode 100644
index 0000000000000..1fbb4b208bedd
--- /dev/null
+++ b/examples/amp-video/multi-bitrate/multi-bitrate.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Multi bitrate</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+  <style amp-custom>
+    body {
+      max-width: 527px;
+      font-family: 'Questrial', Arial;
+    }
+    [fallback] {
+      display: block;
+      /* @alternative */ display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+      background: rgba(0, 0, 0, 0.5);
+      color: #fff;
+    }
+    .spacer {
+      height: 100vh;
+    }
+    p, h1, h2, h3 {
+      padding: 10px;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>amp-video</h1>
+
+  <amp-video
+      width="608"
+      height="1080"
+      layout="fixed"
+      controls
+      autoplay
+      muted
+      loop
+      multi-bitrate>
+    <source src="./223.mp4" data-bitrate="223">
+    <source src="./320.mp4" data-bitrate="320">
+    <source src="./611.mp4" data-bitrate="611">
+    <source src="./1000.mp4" data-bitrate="1000">
+    <source src="./2000.mp4" data-bitrate="2000">
+  </amp-video>
+</body>
+</html>
diff --git a/examples/amp-viewer-gpay-button.amp.html b/examples/amp-viewer-gpay-button.amp.html
deleted file mode 100644
index 9335c0ebb4106..0000000000000
--- a/examples/amp-viewer-gpay-button.amp.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>amp-viewer-gpay-button example</title>
-  <link rel="canonical" href="amps.html">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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>
-    amp-viewer-gpay-button {
-      color: red;
-    }
-  </style>
-  <script async custom-element="amp-viewer-gpay-button" src="https://cdn.ampproject.org/v0/amp-viewer-gpay-button-0.1.js"></script>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <amp-viewer-gpay-button layout="responsive" width="150" height="80"></amp-viewer-gpay-button>
-</body>
-</html>
diff --git a/examples/amp-viewer-gpay-inline.amp.html b/examples/amp-viewer-gpay-inline.amp.html
deleted file mode 100644
index 83c4cf82c603d..0000000000000
--- a/examples/amp-viewer-gpay-inline.amp.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>amp-viewer-gpay-inline example</title>
-  <link rel="canonical" href="amps.html">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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>
-    amp-viewer-gpay-inline {
-      color: red;
-    }
-  </style>
-  <script async custom-element="amp-viewer-gpay-inline" src="https://cdn.ampproject.org/v0/amp-viewer-gpay-inline-0.1.js"></script>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <amp-viewer-gpay-inline layout="responsive" width="150" height="80"></amp-viewer-gpay-inline>
-</body>
-</html>
diff --git a/examples/ampcontext-creative-json.html b/examples/ampcontext-creative-json.html
index 0da1a59a27017..04bba06626a47 100644
--- a/examples/ampcontext-creative-json.html
+++ b/examples/ampcontext-creative-json.html
@@ -1,15 +1,25 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+  <head>
+    <style>
+      body {
+        background: lightblue;
+      }
+    </style>
+    <script src="https://localhost:8000/examples/ac-creative.js"></script>
+  </head>
 
-<head>
-  <style>
-    body {
-      background: lightblue;
-    }
-  </style>
-  <script src='https://localhost:8000/examples/ac-creative.js'></script>
-</head>
-
-<body> Test Ad using ampcontext.js to create window.context <button onclick='toggleObserveIntersection()'>Toggle Observe Intersections</button>  <button onclick='toggleObserveVisibility()'>Toggle Observe visibility</button> <button onclick='window.context.requestResize(500,600)'>resize ad</button>  <button onclick='console.log(window.context)'>console.log(window.context)</button> </body>
-
+  <body>
+    Test Ad using ampcontext.js to create window.context
+    <button onclick="toggleObserveIntersection()">
+      Toggle Observe Intersections
+    </button>
+    <button onclick="toggleObserveVisibility()">
+      Toggle Observe visibility
+    </button>
+    <button onclick="resizeAd()">resize ad</button>
+    <button onclick="console.log(window.context)">
+      console.log(window.context)
+    </button>
+  </body>
 </html>
diff --git a/examples/ampcontext-creative.html b/examples/ampcontext-creative.html
index 7af805b136650..3a07d5b79353f 100644
--- a/examples/ampcontext-creative.html
+++ b/examples/ampcontext-creative.html
@@ -1,29 +1,25 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
-    <style>body { background: lightblue; }</style>
+    <style>
+      body {
+        background: lightblue;
+      }
+    </style>
     <script>
-      if (!window.context){
+      if (!window.context) {
         // window.context doesn't exist yet, must perform steps to create it
         // before using it
         console.log('window.context NOT READY');
 
-        // must add listener for the creation of window.context
-        window.addEventListener('amp-windowContextCreated', () => {
-          console.log('window.context created and ready to use');
-          window.context.onResizeSuccess(resizeSuccessCallback);
-          window.context.onResizeDenied(resizeDeniedCallback);
-        });
-
         // load ampcontext-lib.js which will create window.context
         ampContextScript = document.createElement('script');
         ampContextScript.src =
-            'http://localhost:8000/dist.3p/current/ampcontext-lib.js';
+          'http://localhost:8000/dist.3p/current/ampcontext-lib.js';
         document.head.appendChild(ampContextScript);
       }
 
-      function intersectionCallback(payload){
-        var changes = payload.changes;
+      function intersectionCallback(changes) {
         // Code below is simply an example.
         var latestChange = changes[changes.length - 1];
 
@@ -40,13 +36,12 @@
         var vy = latestChange.boundingClientRect.y;
 
         // Viewable percentage.
-        var viewablePerc = (vw * vh) / (w * h) * 100;
+        var viewablePerc = ((vw * vh) / (w * h)) * 100;
 
         console.log(viewablePerc, w, h, vw, vh, vx, vy);
-
       }
 
-      function dummyCallback(changes){
+      function dummyCallback(changes) {
         console.log(changes);
       }
 
@@ -55,50 +50,52 @@
       var shouldStopInt = false;
       var stopIntFunc;
 
-      function resizeSuccessCallback(requestedHeight, requestedWidth){
-        console.log('Success!');
-        console.log(this);
-        resizeTo(requestedHeight, requestedWidth);
-        console.log(requestedHeight);
-        console.log(requestedWidth);
-      }
-
-      function resizeTo(height, width){
-        this.innerWidth = width;
-        this.innerHeight = height;
-      }
-
-      function resizeDeniedCallback(requestedHeight, requestedWidth){
-        console.log('DENIED');
-        console.log(requestedHeight);
-        console.log(requestedWidth);
-      }
-
-      function toggleObserveIntersection(){
-        if (shouldStopInt){
+      function toggleObserveIntersection() {
+        if (shouldStopInt) {
           stopIntFunc();
         } else {
-          stopIntFunc = window.context.observeIntersection(intersectionCallback);
+          stopIntFunc = window.context.observeIntersection(
+            intersectionCallback
+          );
         }
         shouldStopInt = !shouldStopInt;
       }
 
-      function toggleObserveVisibility(){
-        if (shouldStopVis){
+      function toggleObserveVisibility() {
+        if (shouldStopVis) {
           stopVisFunc();
         } else {
           stopVisFunc = window.context.observePageVisibility(dummyCallback);
         }
         shouldStopVis = !shouldStopVis;
       }
+
+      function resizeAd() {
+        window.context
+          .requestResize(500, 600)
+          .then(function () {
+            console.log('Success!');
+            this.innerWidth = 500;
+            this.innerHeight = 600;
+          })
+          .catch(function () {
+            console.log('DENIED');
+          });
+      }
     </script>
   </head>
 
   <body>
     Test Ad using ampcontext.js to create window.context
-    <button onclick='toggleObserveIntersection()'>Toggle Observe Intersections</button>
-    <button onclick='toggleObserveVisibility()'>Toggle Observe visibility</button>
-    <button onclick='window.context.requestResize(500,600)'>resize ad</button>
-    <button onclick='console.log(window.context)'>console.log(window.context)</button>
+    <button onclick="toggleObserveIntersection()">
+      Toggle Observe Intersections
+    </button>
+    <button onclick="toggleObserveVisibility()">
+      Toggle Observe visibility
+    </button>
+    <button onclick="resizeAd()">resize ad</button>
+    <button onclick="console.log(window.context)">
+      console.log(window.context)
+    </button>
   </body>
 </html>
diff --git a/examples/amphtml-ads/README.md b/examples/amphtml-ads/README.md
index df803593b1f73..772af59d88b91 100644
--- a/examples/amphtml-ads/README.md
+++ b/examples/amphtml-ads/README.md
@@ -1,6 +1,6 @@
 Files under this folder are mainly one of the 2 types, differentiated
 by their file name patterns:
 
-- `*.a4a.html`: are AMPHTML ads, which need to be viewed through
-  one of the supported [AMPHTML ads envelopes](../../../../contributing/TESTING.md#a4a-envelope-a4a-a4a-3p).
-- `*.host.html`: are regular HTML pages that load AMPHTML ads.
+-   `*.a4a.html`: are AMPHTML ads, which need to be viewed through
+    one of the supported [AMPHTML ads envelopes](../../../../docs/testing.md#a4a-envelope-a4a-a4a-3p).
+-   `*.host.html`: are regular HTML pages that load AMPHTML ads.
diff --git a/examples/amphtml-ads/adchoices-1.a4a.html b/examples/amphtml-ads/adchoices-1.a4a.html
index d18697971c664..ccbe72360c341 100644
--- a/examples/amphtml-ads/adchoices-1.a4a.html
+++ b/examples/amphtml-ads/adchoices-1.a4a.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html amp4ads>
 <head>
     <meta charset="utf-8">
diff --git a/examples/amphtml-ads/adchoices-2.a4a.html b/examples/amphtml-ads/adchoices-2.a4a.html
index a904b96466fe4..70e7dbe320668 100644
--- a/examples/amphtml-ads/adchoices-2.a4a.html
+++ b/examples/amphtml-ads/adchoices-2.a4a.html
@@ -16,7 +16,7 @@
         a {
             color: #0000ff
         }
-        
+
         body,
         table,
         div,
@@ -25,11 +25,11 @@
             margin: 0;
             padding: 0
         }
-        
+
         body {
             font-family: "Roboto", arial, sans-serif;
         }
-        
+
         #adunit {
             overflow: hidden;
             width: 970px;
@@ -38,26 +38,26 @@
             top: 0;
             left: 0;
         }
-        
+
         #adunit .ads .ad {
             overflow: hidden;
         }
-        
+
         .attribution {
             z-index: 999;
         }
-        
+
         amp-img.contain img {
             object-fit: contain;
         }
-        
+
         #adunit #ads .image .image-link {
             width: 474px;
             height: 248px;
             background-color: transparent;
             position: relative;
         }
-        
+
         body {
             background-color: #fff;
             border: 1px solid #ddd;
@@ -67,7 +67,7 @@
             position: relative;
             width: 968px
         }
-        
+
         .attribution {
             background-color: #fff;
             border-radius: 2px;
@@ -79,7 +79,7 @@
             position: absolute;
             top: 4px
         }
-        
+
         .title {
             display: table-cell;
             height: 99px;
@@ -88,7 +88,7 @@
             padding-top: 15px;
             vertical-align: middle
         }
-        
+
         .title a {
             color: #212121;
             font-size: 24px;
@@ -96,7 +96,7 @@
             line-height: 1.4;
             text-decoration: none
         }
-        
+
         .body {
             border-bottom: 1px solid #ddd;
             color: #777;
@@ -106,45 +106,45 @@
             padding-right: 20px;
             vertical-align: bottom
         }
-        
+
         .body a {
             font-size: 16px;
             font-weight: 400;
             line-height: 1.4;
             text-decoration: none
         }
-        
+
         .image {
             float: left;
             padding-right: 25px;
             width: 474px
         }
-        
+
         .image amp-img {
             height: 100%;
             width: 100%
         }
-        
+
         .image .image-link {
             background-color: #fff;
             height: 100%;
             width: 100%
         }
-        
+
         .call-to-action {
             float: right;
             padding-right: 20px;
             padding-top: 23px;
             text-align: right
         }
-        
+
         .call-to-action a {
             color: #4285f4;
             font-size: 16px;
             font-weight: 500;
             text-decoration: none
         }
-        
+
         .logo {
             float: left;
             height: 39px;
@@ -152,61 +152,61 @@
             padding-top: 13px;
             width: 39px
         }
-        
+
         .logo amp-img {
             display: flex;
             height: 100%;
             width: 100%
         }
-        
+
         .logo .logo-link {
             height: 100%;
             width: 100%
         }
-        
+
         .advertiser {
             float: left;
             padding-top: 22px
         }
-        
+
         .advertiser a {
             color: #80868b;
             font-size: 16px;
             font-weight: 400;
             text-decoration: none
         }
-        
+
         .ads .image-link {
             display: inline-block
         }
-        
+
         .ads .image-link img {
             display: block
         }
-        
+
         .reviews {
             line-height: 0
         }
-        
+
         .body-link,
         .body-link:hover,
         .body-link:visited {
             text-decoration: none;
             color: inherit
         }
-        
+
         .abgc {
             position: absolute;
             z-index: 2147483646;
             right: 0;
             top: 0;
         }
-        
+
         .abgc amp-img,
         .abgc img {
             display: block;
         }
-        
+
         .abgs {
             position: absolute;
             -webkit-transform: translateX(110px);
@@ -214,7 +214,7 @@
             right: 16px;
             top: 0;
         }
-        
+
         .abgcp {
             position: absolute;
             right: 0;
@@ -224,18 +224,18 @@
             padding-left: 10px;
             padding-bottom: 10px;
         }
-        
+
         .abgb {
             position: relative;
             margin-right: 16px;
             top: 0;
         }
-        
+
         .abgc:hover .abgs {
             -webkit-transform: none;
             transform: none;
         }
-        
+
         .cbb {
             display: block;
             position: absolute;
@@ -247,7 +247,7 @@
             z-index: 9020;
             padding-left: 16px;
         }
-        
+
         .btn {
             display: inline-block;
             border-radius: 2px;
@@ -259,7 +259,7 @@
             font-size: 0.7em;
             margin: 0 1px 0.4em 1px;
         }
-        
+
         @media (max-width: 375px) and (min-height: 100px) {
             .btn {
                 display: block;
@@ -269,49 +269,49 @@
                 margin-right: auto;
             }
         }
-        
+
         #spv1 amp-fit-text>div {
             -webkit-justify-content: flex-start;
             justify-content: flex-start;
         }
-        
+
         .jm.sh #spv1 amp-fit-text>div {
             -webkit-justify-content: center;
             justify-content: center;
         }
-        
+
         .jt .pn amp-fit-text>div {
             -webkit-justify-content: flex-start;
             justify-content: flex-start;
         }
-        
+
         .btn > span {
             display: inline-block;
             padding: 0.5em 0.6em;
             line-height: 1em;
         }
-        
+
         #sbtn {
             background-color: #FFFFFF;
             color: #9E9EA6;
             text-decoration: none;
         }
-        
+
         #sbtn:hover,
         #sbtn:active {
             background-color: #F5F5F5;
         }
-        
+
         #rbtn {
             background-color: rgb(66, 133, 245);
             color: white;
         }
-        
+
         #rbtn:hover,
         #rbtn:active {
             background-color: #3275E5;
         }
-        
+
         #mta {
             position: absolute;
             top: 0;
@@ -321,11 +321,11 @@
             font-weight: 400;
             line-height: 1em;
         }
-        
+
         #mta input[type="radio"] {
             display: none;
         }
-        
+
         #mta .pn {
             left: -970px;
             top: -250px;
@@ -338,7 +338,7 @@
             background-color: #FAFAFA;
             text-align: center;
         }
-        
+
         #spv2 {
             display: -webkit-flex;
             display: flex;
@@ -350,75 +350,75 @@
             background-color: #FAFAFA;
             font-size: 0;
         }
-        
+
         .sv #spv2 {
             -webkit-flex-direction: column;
             flex-direction: column;
         }
-        
+
         .sh #spv2 {
             -webkit-flex-direction: row;
             flex-direction: row;
             -webkit-justify-content: center;
             justify-content: center;
         }
-        
+
         .sh.sr #spv2 {
             -webkit-justify-content: flex-start;
             justify-content: flex-start;
         }
-        
+
         .jt.sv #spv2 {
             -webkit-justify-content: flex-start;
             justify-content: flex-start;
             -webkit-align-items: center;
             align-items: center;
         }
-        
+
         .jm.sh #spv2 {
             -webkit-align-items: center;
             align-items: center;
         }
-        
+
         .jm.sv #spv2 {
             -webkit-justify-content: center;
             justify-content: center;
             -webkit-align-items: center;
             align-items: center;
         }
-        
+
         #spv2 * {
             -moz-box-sizing: border-box;
             -webkit-box-sizing: border-box;
             box-sizing: border-box;
         }
-        
+
         #mta input[name="a"]:checked ~ #cbb {
             display: none;
         }
-        
+
         #spv3 {
             opacity: 1;
         }
-        
+
         .amp-animate #spv4 {
             opacity: 0;
             transition: opacity 0.5s linear 2.5s;
         }
-        
+
         .amp-animate #spv3 amp-fit-text {
             opacity: 1;
             transition: opacity 0.5s linear 2s;
         }
-        
+
         #spr3:checked ~ #spv3 amp-fit-text {
             opacity: 0
         }
-        
+
         #spr3:checked ~ #spv4 {
             opacity: 1;
         }
-        
+
         #spr1:checked ~ #spv1,
         #spr2:checked ~ #spv2,
         #spr3:checked ~ #spv3,
@@ -426,7 +426,7 @@
             right: 0px;
             top: 0px;
         }
-        
+
         .ct svg {
             border: 0;
             margin: 0 0 -0.45em 0;
@@ -434,7 +434,7 @@
             height: 1.38em;
             opacity: 0.4;
         }
-        
+
         .ct {
             display: inline-block;
             line-height: 1.28em;
@@ -442,30 +442,30 @@
             text-align: center;
             padding: 0.3em;
         }
-        
+
         .fct {
             padding: 1em;
         }
-        
+
         #pct {
             display: block;
             font-weight: bold;
             padding: 1em 0.3em;
         }
-        
+
         #ti {
             width: 970px;
         }
-        
+
         #btns {
             width: 970px;
         }
-        
+
         .fl {
             width: 970px;
             height: 250px;
         }
-        
+
         #si {
             position: relative;
             display: inline-block;
@@ -474,12 +474,12 @@
             width: 1em;
             opacity: 0.4;
         }
-        
+
         .sb {
             flex-shrink: 0;
             height: 50px;
         }
-        
+
         .so {
             position: relative;
             z-index: 9110;
@@ -492,12 +492,12 @@
             background-color: #FFFFFF;
             cursor: pointer;
         }
-        
+
         .so:hover,
         .so:active {
             background-color: #F5F5F5;
         }
-        
+
         .so div {
             display: -webkit-flex;
             display: flex;
@@ -508,7 +508,7 @@
             width: 100%;
             height: 100%;
         }
-        
+
         .so span {
             color: #4285F4;
             font-family: Arial, sans-serif;
@@ -517,7 +517,7 @@
             line-height: 14px;
             white-space: normal;
         }
-        
+
         @media (min-height: 54px) {
             .sh.ss .so,
             .sv .so {
@@ -525,37 +525,37 @@
                 border: none;
             }
         }
-        
+
         .sh .so {
             margin-left: -1px;
             box-shadow: none;
         }
-        
+
         .sh .so:first-child {
             margin-left: 0;
         }
-        
+
         .sh.ss .so {
             margin-left: 8px;
         }
-        
+
         .sh.ss .so:first-child {
             margin-left: 0;
         }
-        
+
         .sh.jt .sb {
             margin-top: 8px;
         }
-        
+
         .sv .so,
         .sh.ss .so {
             border-radius: 2px;
         }
-        
+
         .sv .so {
             margin: 4px;
         }
-        
+
         .sv.jt .so:first-child {
             margin-top: 8px;
         }
@@ -569,9 +569,9 @@
                 <div class="attribution">Lorem ipsum</div>
                 <div class="image">
                     <a class="image-link" href="https://www.googleadservices.com/pagead/aclk?sa=L&amp;ai=CsZdHbaDHXNr0MInuBcPeoMAPxNmch1Wn9Jrs_Qivvq2khRIQASDHm8orYMnu7YaAgKAZiAEBoAHI6r6kA8gBAakCal2o6baVkj7gAgCoAwHIAwqqBL4BT9BXSSQPfC4Y-3Ax2f9d1ixc3snmPnttZnqDQoNJTyDqphQGKRw8a0d5mufIdHPOeFjuvXfGTRRHtdHj6Z-kZ2bHdL9Yj--wfYiWOKrhq4K_FPL9olXNLRQOMVH3EhccEyi3MXI2yIqTfBs1u4yBnw6ZgOMEROrMf7BMWBP0X3N8YvC23sg6HV3b5te_6EGC2rqpD3WV19D18TsHctWrrjhCNe1vA8XfN3IGEwikBmpyM29mLySqJfybGO78X-AEAZAGAaAGUYAHoJXBW4gHAZAHAqgHjs4bqAfVyRuoB-DTG6gHugaoB9nLG6gHz8wbqAemvhuoB-zVG9gHAdIIBggAEAIYDbEJgPq3j7Pgl_WACgPYEwI&amp;ae=1&amp;num=1&amp;cid=CAMSeQClSFh3rD74I7sLh9_IPAWvCgmdOJk8gJjgF2vkvq0KMVlNuhkJ9N14nwMhj10y6ji5tzMr1hbenQI_NKsuJZcPIxEisdBLT2rApUChE5s_5BuRvgatzbYzwxvkcmHzen8DqHMCPWQbJDkPB_qVNrolumz07IXOD7k&amp;sig=AOD64_0mA1J6ZbZe7i2sBxhXt63rJuYPjg&amp;client=ca-pub-4348930723288310&amp;nx=CLICK_X&amp;ny=CLICK_Y&amp;nb=9&amp;adurl=https://www.amp.dev%3Futm_source%3Dgoogle%26utm_medium%3Dcpc%26utm_campaign%3Dremarketing%26utm_source%3Dgoogle%26utm_medium%3Dcpc%26utm_campaign%3Ddisplay-remarketing%26utm_campaign%3Ddisplay-remarketing%26utm_term%3D%26utm_medium%3Dcpc%26utm_source%3Dgoogle%26hsa_kw%3D%26hsa_mt%3D%26hsa_grp%3D63353361062%26hsa_tgt%3Daud-619893710639%26hsa_net%3Dadwords%26hsa_cam%3D1685154369%26hsa_ver%3D3%26hsa_acc%3D6463132548%26hsa_src%3Dd%26hsa_ad%3D337184960052" on="tap:exit-api.exit(target='1279042624610903058',_nb='9')" target="_blank">
-                        <amp-img alt="" 
-                        class="img_ad i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-element i-amphtml-layout" 
-                        i-amphtml-layout="fill" i-amphtml-ssr="" layout="fill" 
+                        <amp-img alt=""
+                        class="img_ad i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-element i-amphtml-layout"
+                        i-amphtml-layout="fill" i-amphtml-ssr="" layout="fill"
                         src="https://amp.dev/static/img/beach.jpg"><img alt="" class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" src="https://amp.dev/static/img/beach.jpg"></amp-img>
                     </a>
                 </div>
@@ -579,7 +579,7 @@
                 <div class="body"><a class="body-link" href="https://www.googleadservices.com/pagead/aclk?sa=L&amp;ai=CsZdHbaDHXNr0MInuBcPeoMAPxNmch1Wn9Jrs_Qivvq2khRIQASDHm8orYMnu7YaAgKAZiAEBoAHI6r6kA8gBAakCal2o6baVkj7gAgCoAwHIAwqqBL4BT9BXSSQPfC4Y-3Ax2f9d1ixc3snmPnttZnqDQoNJTyDqphQGKRw8a0d5mufIdHPOeFjuvXfGTRRHtdHj6Z-kZ2bHdL9Yj--wfYiWOKrhq4K_FPL9olXNLRQOMVH3EhccEyi3MXI2yIqTfBs1u4yBnw6ZgOMEROrMf7BMWBP0X3N8YvC23sg6HV3b5te_6EGC2rqpD3WV19D18TsHctWrrjhCNe1vA8XfN3IGEwikBmpyM29mLySqJfybGO78X-AEAZAGAaAGUYAHoJXBW4gHAZAHAqgHjs4bqAfVyRuoB-DTG6gHugaoB9nLG6gHz8wbqAemvhuoB-zVG9gHAdIIBggAEAIYDbEJgPq3j7Pgl_WACgPYEwI&amp;ae=1&amp;num=1&amp;cid=CAMSeQClSFh3rD74I7sLh9_IPAWvCgmdOJk8gJjgF2vkvq0KMVlNuhkJ9N14nwMhj10y6ji5tzMr1hbenQI_NKsuJZcPIxEisdBLT2rApUChE5s_5BuRvgatzbYzwxvkcmHzen8DqHMCPWQbJDkPB_qVNrolumz07IXOD7k&amp;sig=AOD64_0mA1J6ZbZe7i2sBxhXt63rJuYPjg&amp;client=ca-pub-4348930723288310&amp;nx=CLICK_X&amp;ny=CLICK_Y&amp;nb=7&amp;adurl=https://www.amp.dev%3Futm_source%3Dgoogle%26utm_medium%3Dcpc%26utm_campaign%3Dremarketing%26utm_source%3Dgoogle%26utm_medium%3Dcpc%26utm_campaign%3Ddisplay-remarketing%26utm_campaign%3Ddisplay-remarketing%26utm_term%3D%26utm_medium%3Dcpc%26utm_source%3Dgoogle%26hsa_kw%3D%26hsa_mt%3D%26hsa_grp%3D63353361062%26hsa_tgt%3Daud-619893710639%26hsa_net%3Dadwords%26hsa_cam%3D1685154369%26hsa_ver%3D3%26hsa_acc%3D6463132548%26hsa_src%3Dd%26hsa_ad%3D337184960052" on="tap:exit-api.exit(target='1279042624610903058',_nb='7')" target="_blank">Amp.dev</a></div>
                 <div class="logo">
                     <a class="logo-link" href="https://www.googleadservices.com/pagead/aclk?sa=L&amp;ai=CsZdHbaDHXNr0MInuBcPeoMAPxNmch1Wn9Jrs_Qivvq2khRIQASDHm8orYMnu7YaAgKAZiAEBoAHI6r6kA8gBAakCal2o6baVkj7gAgCoAwHIAwqqBL4BT9BXSSQPfC4Y-3Ax2f9d1ixc3snmPnttZnqDQoNJTyDqphQGKRw8a0d5mufIdHPOeFjuvXfGTRRHtdHj6Z-kZ2bHdL9Yj--wfYiWOKrhq4K_FPL9olXNLRQOMVH3EhccEyi3MXI2yIqTfBs1u4yBnw6ZgOMEROrMf7BMWBP0X3N8YvC23sg6HV3b5te_6EGC2rqpD3WV19D18TsHctWrrjhCNe1vA8XfN3IGEwikBmpyM29mLySqJfybGO78X-AEAZAGAaAGUYAHoJXBW4gHAZAHAqgHjs4bqAfVyRuoB-DTG6gHugaoB9nLG6gHz8wbqAemvhuoB-zVG9gHAdIIBggAEAIYDbEJgPq3j7Pgl_WACgPYEwI&amp;ae=1&amp;num=1&amp;cid=CAMSeQClSFh3rD74I7sLh9_IPAWvCgmdOJk8gJjgF2vkvq0KMVlNuhkJ9N14nwMhj10y6ji5tzMr1hbenQI_NKsuJZcPIxEisdBLT2rApUChE5s_5BuRvgatzbYzwxvkcmHzen8DqHMCPWQbJDkPB_qVNrolumz07IXOD7k&amp;sig=AOD64_0mA1J6ZbZe7i2sBxhXt63rJuYPjg&amp;client=ca-pub-4348930723288310&amp;nx=CLICK_X&amp;ny=CLICK_Y&amp;nb=19&amp;adurl=https://www.amp.dev%3Futm_source%3Dgoogle%26utm_medium%3Dcpc%26utm_campaign%3Dremarketing%26utm_source%3Dgoogle%26utm_medium%3Dcpc%26utm_campaign%3Ddisplay-remarketing%26utm_campaign%3Ddisplay-remarketing%26utm_term%3D%26utm_medium%3Dcpc%26utm_source%3Dgoogle%26hsa_kw%3D%26hsa_mt%3D%26hsa_grp%3D63353361062%26hsa_tgt%3Daud-619893710639%26hsa_net%3Dadwords%26hsa_cam%3D1685154369%26hsa_ver%3D3%26hsa_acc%3D6463132548%26hsa_src%3Dd%26hsa_ad%3D337184960052" on="tap:exit-api.exit(target='1279042624610903058',_nb='19')" target="_blank">
-                        <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-element i-amphtml-layout" height="39" 
+                        <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-element i-amphtml-layout" height="39"
                         i-amphtml-layout="fixed" i-amphtml-ssr="" src="https://amp.dev/static/img/beach.jpg" style="width:39px;height:39px;" width="39"><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" src="https://tpc.googlesyndication.com/simgad/40933678460698624"></amp-img>
                     </a>
                 </div>
@@ -601,7 +601,7 @@
         <div class="abgcp" id="abgcp">
             <div class="abgs" id="abgs">
                 <a class="abgl" href="https://adssettings.google.com/whythisad?reasons=AB3afGEAAAHKW1tbW251bGwsWzEsMjFdLG51bGwsbnVsbCxudWxsLG51bGwsbnVsbCxudWxsLG51bGwsbnVsbCxudWxsLG51bGwsbnVsbCxudWxsLG51bGwsbnVsbCxudWxsLG51bGwsbnVsbCxudWxsLG51bGwsdHJ1ZV0sW251bGwsbnVsbCxbbnVsbCxudWxsLG51bGwsImh0dHBzOi8vZGlzcGxheWFkcy1mb3JtYXRzLmdvb2dsZXVzZXJjb250ZW50LmNvbS9hZHMvcHJldmlldy9jb250ZW50LmpzP2NsaWVudD13dGFcdTAwMjZvYmZ1c2NhdGVkQ3VzdG9tZXJJZD0yOTk5MDYwMzk4XHUwMDI2Y3JlYXRpdmVJZD0zMzcxODQ5NjAwNTJcdTAwMjZ2ZXJzaW9uSWQ9MFx1MDAyNmFkR3JvdXBDcmVhdGl2ZUlkPTMwODY1OTI3MjIzMVx1MDAyNmh0bWxQYXJlbnRJZD1wcmV2LTBcdTAwMjZoZWlnaHQ9MjUwXHUwMDI2d2lkdGg9OTcwXHUwMDI2c2lnPUFDaVZCX3otLV8wV0llU0dJa0ZadktQSTBJSmh1bVJwOEEiXV1dXSxbMiwxXV0l4WyR-6QM-rssvBoofOX6JesX2HbTgQ9o-VuOD8Nuual3KQNw-EM6xIeYylw7p1jUpgV972T9UFwpN_GlnqCwRTcj1fzWMqVvqxs8XMGdeD6PMhpT4hnJ6mHR7QNmMhrmHYgVwrK-Kh6fBkgEj3KDym0StIzayu0KEcmo4WCD5j1SfUw-MGvPdBkD17faTtuhd0O4etMahmZy15d1f0syHFew6rSzp-1l39_FttLUlhqi__OiuLgMS9HJGaCYH2HFYdPBSqJAVDvRG5_r5KLw21zYLOL8987-rg8YvJ1g76KhMmTH-2gIJm4YXMhwQjpf70CRRKQxdwHyyfMJkltt,tNdPrHGmyKkrl3g7GZhGEg&amp;source=display&amp;cbt=CClwYCcVCaYIp_Sa7P0IEMHUxaMGGJ7G31siCXRlc3RpbS5pbzIICAUTGJPDARRCF2NhLXB1Yi00MzQ4OTMwNzIzMjg4MzEwSAVYUXABqAEB&amp;cv=https://googleads.g.doubleclick.net/pagead/conversion/%3Fai%3DCsZdHbaDHXNr0MInuBcPeoMAPxNmch1Wn9Jrs_Qivvq2khRIQASDHm8orYMnu7YaAgKAZiAEBoAHI6r6kA8gBAakCal2o6baVkj7gAgCoAwHIAwqqBL4BT9BXSSQPfC4Y-3Ax2f9d1ixc3snmPnttZnqDQoNJTyDqphQGKRw8a0d5mufIdHPOeFjuvXfGTRRHtdHj6Z-kZ2bHdL9Yj--wfYiWOKrhq4K_FPL9olXNLRQOMVH3EhccEyi3MXI2yIqTfBs1u4yBnw6ZgOMEROrMf7BMWBP0X3N8YvC23sg6HV3b5te_6EGC2rqpD3WV19D18TsHctWrrjhCNe1vA8XfN3IGEwikBmpyM29mLySqJfybGO78X-AEAZAGAaAGUYAHoJXBW4gHAZAHAqgHjs4bqAfVyRuoB-DTG6gHugaoB9nLG6gHz8wbqAemvhuoB-zVG9gHAdIIBggAEAIYDbEJgPq3j7Pgl_WACgPYEwI%26sigh%3Dw3-DAt8muoQ%26cid%3DCAQSQwDwy9IZ5aqW1aNiyM0VDwGgCgPml3NAwgXdEOt4eInPukGWwRhWLcvlMNeHZ5K31RELqVsqx4G741UzbVd7IxeM1DI" id="abgl" target="_blank">
-                    <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-element i-amphtml-layout" height="15" i-amphtml-layout="fixed" 
+                    <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-element i-amphtml-layout" height="15" i-amphtml-layout="fixed"
                     i-amphtml-ssr="" src="https://tpc.googlesyndication.com/pagead/images/abg/ru.png" style="width:109px;height:15px;" width="109"><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" src="https://tpc.googlesyndication.com/pagead/images/abg/ru.png"></amp-img>
                 </a>
             </div>
diff --git a/examples/amphtml-ads/ads-tag-integration.js b/examples/amphtml-ads/ads-tag-integration.js
index c80176090ab8a..c9b1be7dd3ddc 100644
--- a/examples/amphtml-ads/ads-tag-integration.js
+++ b/examples/amphtml-ads/ads-tag-integration.js
@@ -24,7 +24,9 @@ initInaboxHost(win);
 // Enable amp-inabox APIs for all iframes. Normally, the actualy bootstrap
 // script would be more specific about which iframes to support.
 Array.prototype.push.apply(
-    win.ampInaboxIframes, document.querySelectorAll('iframe'));
+  win.ampInaboxIframes,
+  document.querySelectorAll('iframe')
+);
 
 /**
  * A sample bootstrap script that is to be run in ads tag.
@@ -43,7 +45,7 @@ function initInaboxHost(win) {
 
   let hostScriptRequested = false;
 
-  const listener = function(event) {
+  const listener = function (event) {
     if (!isInaboxMessage(event.data)) {
       return;
     }
@@ -55,7 +57,7 @@ function initInaboxHost(win) {
     }
     hostScriptRequested = true;
     // Load inabox-host.js when the 1st inabox message is received.
-    loadScript(win, hostScriptUrl, function() {
+    loadScript(win, hostScriptUrl, function () {
       win.removeEventListener('message', listener);
       console.log('a4a-host.js loaded.');
     });
diff --git a/examples/amphtml-ads/nws.a4a.html b/examples/amphtml-ads/nws.a4a.html
new file mode 100644
index 0000000000000..e0c5b3d51da4c
--- /dev/null
+++ b/examples/amphtml-ads/nws.a4a.html
@@ -0,0 +1,69 @@
+<!--
+	Made with Newsroom Studio https://www.nws.ai
+-->
+<!doctype html><html ⚡ i-amphtml-layout transformed="self;v=1"><head><meta charset="utf-8">
+	<link rel="shortcut icon" type="image/png" href="//cdn.thenewsroom.io/images/feed/default/homescreen-192x192.png"/>
+<meta name="robots" content="noindex" /><style amp-runtime i-amphtml-version="012006112352003">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update],amp-share-tracking{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#202125!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,0.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}
+/*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}
+/*# sourceURL=/css/ampshared.css*/</style><meta property="og:description" content><meta property="og:title" content="Web Story Auto Ads Example"><meta property="og:type" content="website"><meta property="og:url" content="https://stories.nws.ai/1288492465/web-story-auto-ads-example/"><meta property="og:image" content="https://transform.nws.ai/https%3A%2F%2Fdelivery.gettyimages.com%2Fdownloads%2F1028224946.jpg%3Fk%3D6%26e%3DI-bxTeMUOKtg9tjYI5b5FT85U5bcfShqTJQ7xCkza22e-hPF7WM9qoApxTEtJX8fizPkXKLURIzQcREkgYSCBld4cuhrRchh9FYIh9pWE1Y1kYf_SsrFjSfYuwuH1-tb/fill/300/300/"><meta property="og:image" content="https://transform.nws.ai/https%3A%2F%2Fdelivery.gettyimages.com%2Fdownloads%2F1028224946.jpg%3Fk%3D6%26e%3DI-bxTeMUOKtg9tjYI5b5FT85U5bcfShqTJQ7xCkza22e-hPF7WM9qoApxTEtJX8fizPkXKLURIzQcREkgYSCBld4cuhrRchh9FYIh9pWE1Y1kYf_SsrFjSfYuwuH1-tb/fill/1200/630/"><meta property="og:image" content="https://transform.nws.ai/https%3A%2F%2Fdelivery.gettyimages.com%2Fdownloads%2F1028224946.jpg%3Fk%3D6%26e%3DI-bxTeMUOKtg9tjYI5b5FT85U5bcfShqTJQ7xCkza22e-hPF7WM9qoApxTEtJX8fizPkXKLURIzQcREkgYSCBld4cuhrRchh9FYIh9pWE1Y1kYf_SsrFjSfYuwuH1-tb/fill/1200/628/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Web Story Auto Ads Example"><meta name="twitter:description" content><meta name="twitter:image" content="https://transform.nws.ai/https%3A%2F%2Fdelivery.gettyimages.com%2Fdownloads%2F1028224946.jpg%3Fk%3D6%26e%3DI-bxTeMUOKtg9tjYI5b5FT85U5bcfShqTJQ7xCkza22e-hPF7WM9qoApxTEtJX8fizPkXKLURIzQcREkgYSCBld4cuhrRchh9FYIh9pWE1Y1kYf_SsrFjSfYuwuH1-tb/fill/1200/627/"><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><link rel="preload" href="https://cdn.ampproject.org/v0.js" as="script"><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-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script><script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script><script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script><title>Web Story Auto Ads Example</title><link rel="canonical" href="https://stories.nws.ai/1288492465/web-story-auto-ads-example/"><style amp-custom>@font-face{font-family:"SF UI Display Bold";src:url("https://chargecdn.s3.amazonaws.com/fonts/sf/SFUIDisplay-Bold.woff2") format("woff2");font-weight:bold;font-style:normal}
+.st0{font-family:"Urbane-Bold";}
+.st1{font-size:37.2313px;}
+.NWSStory-layer .icon,.NWSStory-layer--branding svg{fill:currentColor}
+@font-face{font-family:proxima-soft;src:url("https://use.typekit.net/af/5beeef/00000000000000003b9af203/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/5beeef/00000000000000003b9af203/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/5beeef/00000000000000003b9af203/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("opentype");font-style:normal;font-weight:400}
+@font-face{font-family:proxima-soft;src:url("https://use.typekit.net/af/bd143b/00000000000000003b9af20a/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/bd143b/00000000000000003b9af20a/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/bd143b/00000000000000003b9af20a/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");font-style:normal;font-weight:700}
+@font-face{font-family:Arimo;font-style:normal;font-weight:700;src:url("https://fonts.gstatic.com/s/arimo/v11/P5sBzZCDf9_T_1Wi4TRNrZKF09E3HY4.woff2") format("woff2");unicode-range:U+100-24F,U+259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
+@font-face{font-family:Arimo;font-style:normal;font-weight:700;src:url("https://fonts.gstatic.com/s/arimo/v11/P5sBzZCDf9_T_1Wi4TRDrZKF09E3.woff2") format("woff2");unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url("https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2") format("woff2");unicode-range:U+100-24F,U+259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
+@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url("https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2") format("woff2");unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+body,html{height:100%}
+.NWSStory *{box-sizing:border-box}
+.NWSStory-layer>h1,.NWSStory-layer>h2,.NWSStory-layer>h3,.NWSStory-layer>h4,.NWSStory-layer>h5,.NWSStory-layer>h6,.NWSStory-layer>p{margin:unset;font-weight:unset}
+.NWSStory-layer>h2{font-size:1.6875em}
+.NWSStory-layer svg{pointer-events:none}
+.NWSStory-scene[data-layout=freestyle] .NWSStory-layers--fixed{z-index:52}
+.NWSStory-scene[data-layout=freestyle] .NWSStory-layers--unfixed{z-index:1;align-items:center}
+.NWSStory-scene[data-layout=freestyle] .NWSStory-layer{position:absolute}
+.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--author,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--date,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--embed,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--img,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--shape,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--subheading,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--text,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--title,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--video{transform:translateX(-50%) translateY(-50%);top:50%;left:50%}
+.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--author,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--date,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--embed,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--img,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--shape,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--subheading,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--text,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--title,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--video{transform:translateX(-50%) translateY(-50%);top:50%;left:50%}
+.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--author,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--date,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--subheading,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--text,.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--title{width:85%}
+.NWSStory-scene[data-layout=freestyle] .NWSStory-layer--overlay{z-index:1}
+.NWSStory-scene[data-type=standard][data-layout=freestyle] .NWSStory-layer--title{top:32%}
+.NWSStory-scene-content{background-color:#fff;overflow:hidden;transform:translate3d(0,0,0)}
+.NWSStory-layers{width:100%;height:100%;font-family:proxima-soft,sans-serif;font-weight:400}
+.NWSStory-layers--fixed{position:absolute;top:0;left:0;pointer-events:none}
+.NWSStory-layers--fixed>*{pointer-events:auto}
+.NWSStory-layers--unfixed{display:flex;flex-direction:column;justify-content:center}
+.NWSStory-layer{position:relative;z-index:1;line-height:0}
+.NWSStory-layer--CTA,.NWSStory-layer--bg,.NWSStory-layer--branding,.NWSStory-layer--overlay,.NWSStory-layer[style*=top]{position:absolute}
+.NWSStory-layer-content{font:inherit;word-break:break-word;line-height:normal;white-space:pre-wrap}
+.NWSStory-layer--bg{top:0;left:0;z-index:-1;width:100%;height:100%}
+.NWSStory-layer--bg .NWSStory-layer-content{width:100%;height:100%;background-color:#fff}
+.NWSStory-layer--overlay{top:0;left:0;z-index:0;width:100%;height:100%;pointer-events:none}
+.NWSStory-layer--overlay .NWSStory-layer-content{height:100%}
+.NWSStory-layer--branding{top:1.666667em;left:1em;z-index:3;display:flex;margin:0 auto;order:-1;pointer-events:auto}
+.NWSStory-layer--branding .NWSStory-layer-content{display:flex;flex-direction:row;align-items:center}
+.NWSStory-layer--branding .NWSStory-layer-content-visual{height:2.333334em;display:flex;justify-content:flex-start;align-items:flex-start}
+.NWSStory-layer--branding img,.NWSStory-layer--branding svg{display:block;width:auto;height:100%}
+.NWSStory-layer--branding img,.NWSStory-layer--branding svg{display:block;width:auto;height:100%}
+.NWSStory-layer--question,.NWSStory-layer--text,.NWSStory-layer--title{width:100%}
+.NWSStory-layer--author .NWSStory-layer-content,.NWSStory-layer--date .NWSStory-layer-content,.NWSStory-layer--question .NWSStory-layer-content,.NWSStory-layer--subheading .NWSStory-layer-content,.NWSStory-layer--text .NWSStory-layer-content,.NWSStory-layer--title .NWSStory-layer-content{font-family:"SF UI Display Bold",sans-serif}
+.NWSStory-layers{font-size:4vm;font-size:4vmin}
+@media (orientation:portrait){.NWSStory-layers{font-size:2.24888vmax}}
+@media (orientation:portrait) and (max-aspect-ratio:9/16){.NWSStory-layers{font-size:3.99vm;font-size:3.99vmin}}
+@media (orientation:landscape){.NWSStory-layers{font-size:4vm;font-size:4vmin}}
+@media (orientation:landscape) and (max-aspect-ratio:16/9){.NWSStory-layers{font-size:2.24888vmax}}
+.NWSStory[orientation=landscape] .NWSStory-scene[data-type=standard][data-layout=freestyle] .NWSStory-layer--title{top:32%}
+.NWSStory-scene[data-type=cover][data-layout="2"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=cover][data-layout="2"] .NWSStory-layer--video .NWSStory-layer-content>*>video,.NWSStory-scene[data-type=cover][data-layout="3"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=cover][data-layout="3"] .NWSStory-layer--video .NWSStory-layer-content>*>video,.NWSStory-scene[data-type=cover][data-layout="7"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=cover][data-layout="7"] .NWSStory-layer--video .NWSStory-layer-content>*>video,.NWSStory-scene[data-type=cover][data-layout="5"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=cover][data-layout="5"] .NWSStory-layer--video .NWSStory-layer-content>*>video,.NWSStory-scene[data-type=cover][data-layout="6"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=cover][data-layout="6"] .NWSStory-layer--video .NWSStory-layer-content>*>video,.NWSStory-scene[data-type=cover][data-layout="1"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=cover][data-layout="1"] .NWSStory-layer--video .NWSStory-layer-content>*>video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
+.NWSStory-scene[data-type=cover][data-layout="4"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=cover][data-layout="4"] .NWSStory-layer--video .NWSStory-layer-content>*>video,.NWSStory-scene[data-type=cover][data-layout="8"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=cover][data-layout="8"] .NWSStory-layer--video .NWSStory-layer-content>*>video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
+.NWSStory-scene[data-type=standard][data-layout="2"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=standard][data-layout="2"] .NWSStory-layer--video .NWSStory-layer-content>*>video,.NWSStory-scene[data-type=standard][data-layout="7"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=standard][data-layout="7"] .NWSStory-layer--video .NWSStory-layer-content>*>video,.NWSStory-scene[data-type=standard][data-layout="8"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=standard][data-layout="8"] .NWSStory-layer--video .NWSStory-layer-content>*>video,.NWSStory-scene[data-type=standard][data-layout="6"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=standard][data-layout="6"] .NWSStory-layer--video .NWSStory-layer-content>*>video,.NWSStory-scene[data-type=standard][data-layout="1"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=standard][data-layout="1"] .NWSStory-layer--video .NWSStory-layer-content>*>video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
+.NWSStory-scene[data-type=standard][data-layout="5"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=standard][data-layout="5"] .NWSStory-layer--video .NWSStory-layer-content>*>video,.NWSStory-scene[data-type=standard][data-layout="9"] .NWSStory-layer--img .NWSStory-layer-content>*>img,.NWSStory-scene[data-type=standard][data-layout="9"] .NWSStory-layer--video .NWSStory-layer-content>*>video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
+.NWSStory-scene-content{height:100%;padding:0;grid-template-rows:100%}
+.NWSStory-layer--branding .NWSStory-layer-content-visual>*{position:static;min-width:1px;min-height:1px}
+.NWSStory-layer--branding .NWSStory-layer-content-visual img,.NWSStory-layer--branding .NWSStory-layer-content-visual svg{position:static;width:auto;min-width:1px;height:2.333334em;max-width:none;margin:0}
+.NWSStory-layer--branding .NWSStory-layer-content-visual img,.NWSStory-layer--branding .NWSStory-layer-content-visual svg{position:static;width:auto;min-width:1px;height:2.333334em;max-width:none;margin:0}
+.NWSStory-layer--img .NWSStory-layer-content>*>img{position:static;width:auto;height:auto;min-width:0;min-height:0}
+.NWSStory-layer--video .NWSStory-layer-content>*>:not(video){position:absolute}
+.NWSStory-layer--video .NWSStory-layer-content>*>video{position:static;width:auto;height:auto}
+
+
+ #af8ec2bce-f232-4ab2-8835-43a8d4947b47 { top: 36%; width: 85%; z-index: 3; } #a3aaf8e28-c9d8-41df-abcc-4cf595b536b9 { top: 49%; z-index: 2; } #a34922c7a-9fab-443b-ae9a-b8a7558178bf { top: 42%; width: 85%; z-index: 4; } #a21e727f4-c992-4902-a0fa-9001840fca53 { top: 88%; width: 85%; z-index: 1; } #a918c73ca-ce8e-4c35-9dc2-ad6d56f02719 { top: 32%; width: 85%; z-index: 3; } #af6dffada-5ac4-4790-a2eb-38424291a55c { top: 88%; width: 85%; z-index: 1; } #ab641ba21-cd04-47aa-bc20-8f85d55ad128 { top: 38%; width: 85%; z-index: 2; } #a6dab527c-551f-4da5-b261-ab23c0ca81ab { top: 32%; width: 85%; z-index: 3; } #ace240dcf-6fc2-4b09-bc44-b336dd402105 { top: 88%; width: 85%; z-index: 1; } #a1e6f7486-40a0-4498-8a92-7833c11cd583 { top: 38%; width: 85%; z-index: 2; } #a1138c5c3-6ad1-4a83-b784-d39e540a4721 { top: 32%; width: 85%; z-index: 3; } #a3895dbdc-d7e8-4069-8ac8-8cff1d8ac6cc { top: 88%; width: 85%; z-index: 1; } #a4f14f3c8-6f19-485c-8e64-f02ca09a924b { top: 38%; width: 85%; z-index: 2; } #a26b63e20-8945-48b8-8313-12ea9646ba27 { top: 32%; width: 85%; z-index: 3; } #a95e3ec3f-b6b5-49e1-b1d4-555839ea8870 { top: 88%; width: 85%; z-index: 1; } #ae2c5f8bc-1c26-42ef-9b11-974b4498309b { top: 38%; width: 85%; z-index: 2; } #a083c1aef-6cb2-4cce-9a2b-b5411e33d385 { top: 32%; width: 85%; z-index: 3; } #aa561ef67-b64e-4313-a87b-98f2b7ebebe6 { top: 88%; width: 85%; z-index: 1; } #ab28f60e7-33eb-43f0-a03c-bc116bcc0a01 { top: 38%; width: 85%; z-index: 2; } #a02fd6ef1-2d0c-44bc-b7e0-5527271dcc5b { top: 32%; width: 85%; z-index: 3; } #a472c8ae7-c1f2-4663-9d26-b2fff623470b { top: 88%; width: 85%; z-index: 1; } #a88357af0-638b-44c2-8e18-6a2e9a76522b { top: 38%; width: 85%; z-index: 2; } #a8671a006-02b6-49da-a75c-a748a0f08f5c { top: 32%; width: 85%; z-index: 3; } #a689fffd2-534b-416e-8f07-4296861ccbda { top: 88%; width: 85%; z-index: 1; } #a9ab9d4cc-875f-49c9-9349-c8b0cabd0a9c { top: 38%; width: 85%; z-index: 2; } #ac927eee4-6354-4922-9750-6fa919114b6f { top: 32%; width: 85%; z-index: 3; } #af74a8f67-77f6-443d-99a7-61e47b64258c { top: 88%; width: 85%; z-index: 1; } #aabdde856-42a5-42eb-9399-f8c1abd6cb60 { top: 38%; width: 85%; z-index: 2; }</style><script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"//stories.nws.ai/1288492465/web-story-auto-ads-example/"},"headline":"Web Story Auto Ads Example","image":["https://cdn.thenewsroom.io/platform/posters/1539447/b7fef4c40367-"],"datePublished":"2020-07-17T12:27:07.188000+00:00","dateModified":"2020-07-17T12:35:10.164439+00:00","author":{"@type":"Person","name":"Newsroom AI"},"publisher":{"@type":"Organization","name":"Newsroom AI","logo":{"@type":"ImageObject","url":"https://transform.nws.ai/https%3A%2F%2Fcdn.thenewsroom.io%2Fplatform%2Fstory_media%2F1288711760%2Fnws/f_png,google_gvs/logo.png"},"url":"https://www.nws.ai"},"description":""}</script><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></head><body><amp-story class="NWSStory i-amphtml-layout-container" poster-landscape-src="https://cdn.thenewsroom.io/platform/posters/1539447/e7f4513769f5-" poster-portrait-src="https://cdn.thenewsroom.io/platform/posters/1539447/b7fef4c40367-" poster-square-src="https://cdn.thenewsroom.io/platform/posters/1539447/946647339816-" publisher="Newsroom AI" publisher-logo-src="https://transform.nws.ai/https%3A%2F%2Fcdn.thenewsroom.io%2Fplatform%2Fstory_media%2F1288711760%2Fnws/f_png,google_gvs/logo.png" standalone title="Web Story Auto Ads Example" i-amphtml-layout="container"><amp-story-page class="NWSStory-scene i-amphtml-layout-container" data-layout="freestyle" data-type="cover" id="dc7c8738-cea6-4765-9e61-8e093a72c37a" i-amphtml-layout="container"><amp-story-grid-layer class="NWSStory-scene-content i-amphtml-layout-container" template="vertical" i-amphtml-layout="container"><div class="NWSStory-layers NWSStory-layers--fixed"><div class="NWSStory-layer NWSStory-layer--branding"><div class="NWSStory-layer-content"><div class="NWSStory-layer-content-visual"><svg id="Layer_1" style="enable-background:new 0 0 150.5 60.2;" version="1.1" viewBox="0 0 150.5 60.2" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g><polygon points="123.4,44.3 124.9,44.3 124.1,41.9  "/><path d="M131,29.5h-9.2c-7.8,0-14,6.3-14,14s6.3,14,14,14h9.2c7.8,0,14-6.3,14-14S138.7,29.5,131,29.5z M125.8,46.5l-0.4-0.9H123   l-0.4,1.1h-2l2.6-6.8h2l2.6,6.8h-2V46.5z M130,46.5h-1.8v-6.8h1.8V46.5z"/></g><polygon points="2.4,2 9.2,2 17.9,16.2 17.9,2 24.9,2 24.9,27.5 18.2,27.5 9.6,13.2 9.6,27.5 2.4,27.5 "/><path d="M15.1,56.7l-3.3-7.8H11H9v7.8H1.8V31.2h9.1c8.5,0,11.5,3.3,11.5,8.7c0,3.1-1.3,5.9-4.2,7.6l5,9.2H15.1z M11,44.1  c3,0,3.9-1.1,3.9-3.3s-1.1-3.3-3.9-3.3H9v6.8C9,44.1,11,44.1,11,44.1z"/><path d="M22.5,44.1C22.5,35,28.2,31,34.7,31c6.3,0,12,3.9,12,13.1S41,57.2,34.5,57.2C28,57,22.5,53.1,22.5,44.1 M39.7,44.1  c0-4.2-2-6.8-5.2-6.8c-3.1,0-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C37.5,50.7,39.7,48.5,39.7,44.1"/><path d="M47.1,44.1C47.1,35,52.8,31,59.3,31c6.3,0,12,3.9,12,13.1s-5.7,13.1-12.2,13.1C52.8,57,47.1,53.1,47.1,44.1 M64.3,44.1  c0-4.2-2-6.8-5.2-6.8s-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C62.2,50.7,64.3,48.5,64.3,44.1"/><polygon points="74.2,31.2 83.1,31.2 87.7,49.3 92.5,31.2 101.2,31.2 104.9,56.7 97.7,56.7 95.7,40.6 91.2,56.7 84.4,56.7 80,40.6   77.9,56.7 70.7,56.7 "/><text class="st0 st1" transform="matrix(0.484 0 0 1 101.6523 26.2899)">-</text><polygon points="27.3,2 27.3,27.5 44.5,27.5 44.5,21.2 34.3,21.2 34.3,17.3 43.7,17.3 43.7,11.9 34.3,11.9 34.3,8.2 44.5,8.2   44.5,6.4 43,2 "/><path d="M79.2,20.3l6.8-0.6c0.6,1.8,1.8,2.8,4.1,2.8c2,0,3.3-0.7,3.1-2.2c-0.2-3.9-13.5-1.7-13.5-10.9c0-4.8,4.1-7.8,9.6-7.8  c5.9,0,10,2.4,10.5,7.4l-6.7,0.6c-0.6-1.7-1.7-2.4-3.7-2.4c-1.7,0-3,0.7-3,2c0,4.4,13.7,1.5,13.7,10.9c0,4.8-4.1,7.9-10.3,7.9  C84.2,27.8,80,25.2,79.2,20.3"/><polygon points="73.7,2 69.6,17.5 65.5,2 59.8,2 55.9,17.5 51.9,2 45.6,2 45.6,6.4 52.2,27.5 58.9,27.5 62.8,12.1 66.7,27.5   73.3,27.5 81.4,2 "/></svg></div></div></div></div><div class="NWSStory-layers NWSStory-layers--unfixed"><div class="NWSStory-layer NWSStory-layer--bg"><div class="NWSStory-layer-content" style="background-color: white; "></div></div><div class="NWSStory-layer NWSStory-layer--overlay"><div class="NWSStory-layer-content"></div></div></div></amp-story-grid-layer></amp-story-page><amp-story-page class="NWSStory-scene i-amphtml-layout-container" data-layout="freestyle" data-type="standard" id="2e164c03-d0c9-4699-8888-13af0a6ab340" i-amphtml-layout="container"><amp-story-grid-layer class="NWSStory-scene-content i-amphtml-layout-container" template="vertical" i-amphtml-layout="container"><div class="NWSStory-layers NWSStory-layers--fixed"><div class="NWSStory-layer NWSStory-layer--branding"><div class="NWSStory-layer-content"><div class="NWSStory-layer-content-visual"><svg id="Layer_1" style="enable-background:new 0 0 150.5 60.2;" version="1.1" viewBox="0 0 150.5 60.2" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g><polygon points="123.4,44.3 124.9,44.3 124.1,41.9  "/><path d="M131,29.5h-9.2c-7.8,0-14,6.3-14,14s6.3,14,14,14h9.2c7.8,0,14-6.3,14-14S138.7,29.5,131,29.5z M125.8,46.5l-0.4-0.9H123   l-0.4,1.1h-2l2.6-6.8h2l2.6,6.8h-2V46.5z M130,46.5h-1.8v-6.8h1.8V46.5z"/></g><polygon points="2.4,2 9.2,2 17.9,16.2 17.9,2 24.9,2 24.9,27.5 18.2,27.5 9.6,13.2 9.6,27.5 2.4,27.5 "/><path d="M15.1,56.7l-3.3-7.8H11H9v7.8H1.8V31.2h9.1c8.5,0,11.5,3.3,11.5,8.7c0,3.1-1.3,5.9-4.2,7.6l5,9.2H15.1z M11,44.1  c3,0,3.9-1.1,3.9-3.3s-1.1-3.3-3.9-3.3H9v6.8C9,44.1,11,44.1,11,44.1z"/><path d="M22.5,44.1C22.5,35,28.2,31,34.7,31c6.3,0,12,3.9,12,13.1S41,57.2,34.5,57.2C28,57,22.5,53.1,22.5,44.1 M39.7,44.1  c0-4.2-2-6.8-5.2-6.8c-3.1,0-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C37.5,50.7,39.7,48.5,39.7,44.1"/><path d="M47.1,44.1C47.1,35,52.8,31,59.3,31c6.3,0,12,3.9,12,13.1s-5.7,13.1-12.2,13.1C52.8,57,47.1,53.1,47.1,44.1 M64.3,44.1  c0-4.2-2-6.8-5.2-6.8s-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C62.2,50.7,64.3,48.5,64.3,44.1"/><polygon points="74.2,31.2 83.1,31.2 87.7,49.3 92.5,31.2 101.2,31.2 104.9,56.7 97.7,56.7 95.7,40.6 91.2,56.7 84.4,56.7 80,40.6   77.9,56.7 70.7,56.7 "/><text class="st0 st1" transform="matrix(0.484 0 0 1 101.6523 26.2899)">-</text><polygon points="27.3,2 27.3,27.5 44.5,27.5 44.5,21.2 34.3,21.2 34.3,17.3 43.7,17.3 43.7,11.9 34.3,11.9 34.3,8.2 44.5,8.2   44.5,6.4 43,2 "/><path d="M79.2,20.3l6.8-0.6c0.6,1.8,1.8,2.8,4.1,2.8c2,0,3.3-0.7,3.1-2.2c-0.2-3.9-13.5-1.7-13.5-10.9c0-4.8,4.1-7.8,9.6-7.8  c5.9,0,10,2.4,10.5,7.4l-6.7,0.6c-0.6-1.7-1.7-2.4-3.7-2.4c-1.7,0-3,0.7-3,2c0,4.4,13.7,1.5,13.7,10.9c0,4.8-4.1,7.9-10.3,7.9  C84.2,27.8,80,25.2,79.2,20.3"/><polygon points="73.7,2 69.6,17.5 65.5,2 59.8,2 55.9,17.5 51.9,2 45.6,2 45.6,6.4 52.2,27.5 58.9,27.5 62.8,12.1 66.7,27.5   73.3,27.5 81.4,2 "/></svg></div></div></div></div><div class="NWSStory-layers NWSStory-layers--unfixed"><div class="NWSStory-layer NWSStory-layer--bg"><div class="NWSStory-layer-content" style="background-color: white; "></div></div><div class="NWSStory-layer NWSStory-layer--overlay"><div class="NWSStory-layer-content"></div></div><div class="NWSStory-layer NWSStory-layer--title" id="a918c73ca-ce8e-4c35-9dc2-ad6d56f02719"><h2 class="NWSStory-layer-content" style="font-family: SF UI Display Bold; font-size: 1.6875em; ">Scene 1</h2></div></div></amp-story-grid-layer></amp-story-page><amp-story-page class="NWSStory-scene i-amphtml-layout-container" data-layout="freestyle" data-type="standard" id="f0bece72-e557-4790-afe1-12de3f6d5660" i-amphtml-layout="container"><amp-story-grid-layer class="NWSStory-scene-content i-amphtml-layout-container" template="vertical" i-amphtml-layout="container"><div class="NWSStory-layers NWSStory-layers--fixed"><div class="NWSStory-layer NWSStory-layer--branding"><div class="NWSStory-layer-content"><div class="NWSStory-layer-content-visual"><svg id="Layer_1" style="enable-background:new 0 0 150.5 60.2;" version="1.1" viewBox="0 0 150.5 60.2" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g><polygon points="123.4,44.3 124.9,44.3 124.1,41.9  "/><path d="M131,29.5h-9.2c-7.8,0-14,6.3-14,14s6.3,14,14,14h9.2c7.8,0,14-6.3,14-14S138.7,29.5,131,29.5z M125.8,46.5l-0.4-0.9H123   l-0.4,1.1h-2l2.6-6.8h2l2.6,6.8h-2V46.5z M130,46.5h-1.8v-6.8h1.8V46.5z"/></g><polygon points="2.4,2 9.2,2 17.9,16.2 17.9,2 24.9,2 24.9,27.5 18.2,27.5 9.6,13.2 9.6,27.5 2.4,27.5 "/><path d="M15.1,56.7l-3.3-7.8H11H9v7.8H1.8V31.2h9.1c8.5,0,11.5,3.3,11.5,8.7c0,3.1-1.3,5.9-4.2,7.6l5,9.2H15.1z M11,44.1  c3,0,3.9-1.1,3.9-3.3s-1.1-3.3-3.9-3.3H9v6.8C9,44.1,11,44.1,11,44.1z"/><path d="M22.5,44.1C22.5,35,28.2,31,34.7,31c6.3,0,12,3.9,12,13.1S41,57.2,34.5,57.2C28,57,22.5,53.1,22.5,44.1 M39.7,44.1  c0-4.2-2-6.8-5.2-6.8c-3.1,0-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C37.5,50.7,39.7,48.5,39.7,44.1"/><path d="M47.1,44.1C47.1,35,52.8,31,59.3,31c6.3,0,12,3.9,12,13.1s-5.7,13.1-12.2,13.1C52.8,57,47.1,53.1,47.1,44.1 M64.3,44.1  c0-4.2-2-6.8-5.2-6.8s-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C62.2,50.7,64.3,48.5,64.3,44.1"/><polygon points="74.2,31.2 83.1,31.2 87.7,49.3 92.5,31.2 101.2,31.2 104.9,56.7 97.7,56.7 95.7,40.6 91.2,56.7 84.4,56.7 80,40.6   77.9,56.7 70.7,56.7 "/><text class="st0 st1" transform="matrix(0.484 0 0 1 101.6523 26.2899)">-</text><polygon points="27.3,2 27.3,27.5 44.5,27.5 44.5,21.2 34.3,21.2 34.3,17.3 43.7,17.3 43.7,11.9 34.3,11.9 34.3,8.2 44.5,8.2   44.5,6.4 43,2 "/><path d="M79.2,20.3l6.8-0.6c0.6,1.8,1.8,2.8,4.1,2.8c2,0,3.3-0.7,3.1-2.2c-0.2-3.9-13.5-1.7-13.5-10.9c0-4.8,4.1-7.8,9.6-7.8  c5.9,0,10,2.4,10.5,7.4l-6.7,0.6c-0.6-1.7-1.7-2.4-3.7-2.4c-1.7,0-3,0.7-3,2c0,4.4,13.7,1.5,13.7,10.9c0,4.8-4.1,7.9-10.3,7.9  C84.2,27.8,80,25.2,79.2,20.3"/><polygon points="73.7,2 69.6,17.5 65.5,2 59.8,2 55.9,17.5 51.9,2 45.6,2 45.6,6.4 52.2,27.5 58.9,27.5 62.8,12.1 66.7,27.5   73.3,27.5 81.4,2 "/></svg></div></div></div></div><div class="NWSStory-layers NWSStory-layers--unfixed"><div class="NWSStory-layer NWSStory-layer--bg"><div class="NWSStory-layer-content" style="background-color: white; "></div></div><div class="NWSStory-layer NWSStory-layer--overlay"><div class="NWSStory-layer-content"></div></div><div class="NWSStory-layer NWSStory-layer--title" id="a6dab527c-551f-4da5-b261-ab23c0ca81ab"><h2 class="NWSStory-layer-content" style="font-family: SF UI Display Bold; font-size: 1.6875em; ">Scene 2</h2></div></div></amp-story-grid-layer></amp-story-page><amp-story-page class="NWSStory-scene i-amphtml-layout-container" data-layout="freestyle" data-type="standard" id="be4998c8-4d4c-4a83-83c4-41ac7a0bf83c" i-amphtml-layout="container"><amp-story-grid-layer class="NWSStory-scene-content i-amphtml-layout-container" template="vertical" i-amphtml-layout="container"><div class="NWSStory-layers NWSStory-layers--fixed"><div class="NWSStory-layer NWSStory-layer--branding"><div class="NWSStory-layer-content"><div class="NWSStory-layer-content-visual"><svg id="Layer_1" style="enable-background:new 0 0 150.5 60.2;" version="1.1" viewBox="0 0 150.5 60.2" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g><polygon points="123.4,44.3 124.9,44.3 124.1,41.9  "/><path d="M131,29.5h-9.2c-7.8,0-14,6.3-14,14s6.3,14,14,14h9.2c7.8,0,14-6.3,14-14S138.7,29.5,131,29.5z M125.8,46.5l-0.4-0.9H123   l-0.4,1.1h-2l2.6-6.8h2l2.6,6.8h-2V46.5z M130,46.5h-1.8v-6.8h1.8V46.5z"/></g><polygon points="2.4,2 9.2,2 17.9,16.2 17.9,2 24.9,2 24.9,27.5 18.2,27.5 9.6,13.2 9.6,27.5 2.4,27.5 "/><path d="M15.1,56.7l-3.3-7.8H11H9v7.8H1.8V31.2h9.1c8.5,0,11.5,3.3,11.5,8.7c0,3.1-1.3,5.9-4.2,7.6l5,9.2H15.1z M11,44.1  c3,0,3.9-1.1,3.9-3.3s-1.1-3.3-3.9-3.3H9v6.8C9,44.1,11,44.1,11,44.1z"/><path d="M22.5,44.1C22.5,35,28.2,31,34.7,31c6.3,0,12,3.9,12,13.1S41,57.2,34.5,57.2C28,57,22.5,53.1,22.5,44.1 M39.7,44.1  c0-4.2-2-6.8-5.2-6.8c-3.1,0-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C37.5,50.7,39.7,48.5,39.7,44.1"/><path d="M47.1,44.1C47.1,35,52.8,31,59.3,31c6.3,0,12,3.9,12,13.1s-5.7,13.1-12.2,13.1C52.8,57,47.1,53.1,47.1,44.1 M64.3,44.1  c0-4.2-2-6.8-5.2-6.8s-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C62.2,50.7,64.3,48.5,64.3,44.1"/><polygon points="74.2,31.2 83.1,31.2 87.7,49.3 92.5,31.2 101.2,31.2 104.9,56.7 97.7,56.7 95.7,40.6 91.2,56.7 84.4,56.7 80,40.6   77.9,56.7 70.7,56.7 "/><text class="st0 st1" transform="matrix(0.484 0 0 1 101.6523 26.2899)">-</text><polygon points="27.3,2 27.3,27.5 44.5,27.5 44.5,21.2 34.3,21.2 34.3,17.3 43.7,17.3 43.7,11.9 34.3,11.9 34.3,8.2 44.5,8.2   44.5,6.4 43,2 "/><path d="M79.2,20.3l6.8-0.6c0.6,1.8,1.8,2.8,4.1,2.8c2,0,3.3-0.7,3.1-2.2c-0.2-3.9-13.5-1.7-13.5-10.9c0-4.8,4.1-7.8,9.6-7.8  c5.9,0,10,2.4,10.5,7.4l-6.7,0.6c-0.6-1.7-1.7-2.4-3.7-2.4c-1.7,0-3,0.7-3,2c0,4.4,13.7,1.5,13.7,10.9c0,4.8-4.1,7.9-10.3,7.9  C84.2,27.8,80,25.2,79.2,20.3"/><polygon points="73.7,2 69.6,17.5 65.5,2 59.8,2 55.9,17.5 51.9,2 45.6,2 45.6,6.4 52.2,27.5 58.9,27.5 62.8,12.1 66.7,27.5   73.3,27.5 81.4,2 "/></svg></div></div></div></div><div class="NWSStory-layers NWSStory-layers--unfixed"><div class="NWSStory-layer NWSStory-layer--bg"><div class="NWSStory-layer-content" style="background-color: white; "></div></div><div class="NWSStory-layer NWSStory-layer--overlay"><div class="NWSStory-layer-content"></div></div><div class="NWSStory-layer NWSStory-layer--title" id="a1138c5c3-6ad1-4a83-b784-d39e540a4721"><h2 class="NWSStory-layer-content" style="font-family: SF UI Display Bold; font-size: 1.6875em; ">Scene 3</h2></div></div></amp-story-grid-layer></amp-story-page><amp-story-page class="NWSStory-scene i-amphtml-layout-container" data-layout="freestyle" data-type="standard" id="64756467-872d-4ec7-8091-30aa9e919dae" i-amphtml-layout="container"><amp-story-grid-layer class="NWSStory-scene-content i-amphtml-layout-container" template="vertical" i-amphtml-layout="container"><div class="NWSStory-layers NWSStory-layers--fixed"><div class="NWSStory-layer NWSStory-layer--branding"><div class="NWSStory-layer-content"><div class="NWSStory-layer-content-visual"><svg id="Layer_1" style="enable-background:new 0 0 150.5 60.2;" version="1.1" viewBox="0 0 150.5 60.2" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g><polygon points="123.4,44.3 124.9,44.3 124.1,41.9  "/><path d="M131,29.5h-9.2c-7.8,0-14,6.3-14,14s6.3,14,14,14h9.2c7.8,0,14-6.3,14-14S138.7,29.5,131,29.5z M125.8,46.5l-0.4-0.9H123   l-0.4,1.1h-2l2.6-6.8h2l2.6,6.8h-2V46.5z M130,46.5h-1.8v-6.8h1.8V46.5z"/></g><polygon points="2.4,2 9.2,2 17.9,16.2 17.9,2 24.9,2 24.9,27.5 18.2,27.5 9.6,13.2 9.6,27.5 2.4,27.5 "/><path d="M15.1,56.7l-3.3-7.8H11H9v7.8H1.8V31.2h9.1c8.5,0,11.5,3.3,11.5,8.7c0,3.1-1.3,5.9-4.2,7.6l5,9.2H15.1z M11,44.1  c3,0,3.9-1.1,3.9-3.3s-1.1-3.3-3.9-3.3H9v6.8C9,44.1,11,44.1,11,44.1z"/><path d="M22.5,44.1C22.5,35,28.2,31,34.7,31c6.3,0,12,3.9,12,13.1S41,57.2,34.5,57.2C28,57,22.5,53.1,22.5,44.1 M39.7,44.1  c0-4.2-2-6.8-5.2-6.8c-3.1,0-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C37.5,50.7,39.7,48.5,39.7,44.1"/><path d="M47.1,44.1C47.1,35,52.8,31,59.3,31c6.3,0,12,3.9,12,13.1s-5.7,13.1-12.2,13.1C52.8,57,47.1,53.1,47.1,44.1 M64.3,44.1  c0-4.2-2-6.8-5.2-6.8s-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C62.2,50.7,64.3,48.5,64.3,44.1"/><polygon points="74.2,31.2 83.1,31.2 87.7,49.3 92.5,31.2 101.2,31.2 104.9,56.7 97.7,56.7 95.7,40.6 91.2,56.7 84.4,56.7 80,40.6   77.9,56.7 70.7,56.7 "/><text class="st0 st1" transform="matrix(0.484 0 0 1 101.6523 26.2899)">-</text><polygon points="27.3,2 27.3,27.5 44.5,27.5 44.5,21.2 34.3,21.2 34.3,17.3 43.7,17.3 43.7,11.9 34.3,11.9 34.3,8.2 44.5,8.2   44.5,6.4 43,2 "/><path d="M79.2,20.3l6.8-0.6c0.6,1.8,1.8,2.8,4.1,2.8c2,0,3.3-0.7,3.1-2.2c-0.2-3.9-13.5-1.7-13.5-10.9c0-4.8,4.1-7.8,9.6-7.8  c5.9,0,10,2.4,10.5,7.4l-6.7,0.6c-0.6-1.7-1.7-2.4-3.7-2.4c-1.7,0-3,0.7-3,2c0,4.4,13.7,1.5,13.7,10.9c0,4.8-4.1,7.9-10.3,7.9  C84.2,27.8,80,25.2,79.2,20.3"/><polygon points="73.7,2 69.6,17.5 65.5,2 59.8,2 55.9,17.5 51.9,2 45.6,2 45.6,6.4 52.2,27.5 58.9,27.5 62.8,12.1 66.7,27.5   73.3,27.5 81.4,2 "/></svg></div></div></div></div><div class="NWSStory-layers NWSStory-layers--unfixed"><div class="NWSStory-layer NWSStory-layer--bg"><div class="NWSStory-layer-content" style="background-color: white; "></div></div><div class="NWSStory-layer NWSStory-layer--overlay"><div class="NWSStory-layer-content"></div></div><div class="NWSStory-layer NWSStory-layer--title" id="a26b63e20-8945-48b8-8313-12ea9646ba27"><h2 class="NWSStory-layer-content" style="font-family: SF UI Display Bold; font-size: 1.6875em; ">Scene 4</h2></div></div></amp-story-grid-layer></amp-story-page><amp-story-page class="NWSStory-scene i-amphtml-layout-container" data-layout="freestyle" data-type="standard" id="a114619b-a457-47da-8c08-c527eb464a37" i-amphtml-layout="container"><amp-story-grid-layer class="NWSStory-scene-content i-amphtml-layout-container" template="vertical" i-amphtml-layout="container"><div class="NWSStory-layers NWSStory-layers--fixed"><div class="NWSStory-layer NWSStory-layer--branding"><div class="NWSStory-layer-content"><div class="NWSStory-layer-content-visual"><svg id="Layer_1" style="enable-background:new 0 0 150.5 60.2;" version="1.1" viewBox="0 0 150.5 60.2" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g><polygon points="123.4,44.3 124.9,44.3 124.1,41.9  "/><path d="M131,29.5h-9.2c-7.8,0-14,6.3-14,14s6.3,14,14,14h9.2c7.8,0,14-6.3,14-14S138.7,29.5,131,29.5z M125.8,46.5l-0.4-0.9H123   l-0.4,1.1h-2l2.6-6.8h2l2.6,6.8h-2V46.5z M130,46.5h-1.8v-6.8h1.8V46.5z"/></g><polygon points="2.4,2 9.2,2 17.9,16.2 17.9,2 24.9,2 24.9,27.5 18.2,27.5 9.6,13.2 9.6,27.5 2.4,27.5 "/><path d="M15.1,56.7l-3.3-7.8H11H9v7.8H1.8V31.2h9.1c8.5,0,11.5,3.3,11.5,8.7c0,3.1-1.3,5.9-4.2,7.6l5,9.2H15.1z M11,44.1  c3,0,3.9-1.1,3.9-3.3s-1.1-3.3-3.9-3.3H9v6.8C9,44.1,11,44.1,11,44.1z"/><path d="M22.5,44.1C22.5,35,28.2,31,34.7,31c6.3,0,12,3.9,12,13.1S41,57.2,34.5,57.2C28,57,22.5,53.1,22.5,44.1 M39.7,44.1  c0-4.2-2-6.8-5.2-6.8c-3.1,0-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C37.5,50.7,39.7,48.5,39.7,44.1"/><path d="M47.1,44.1C47.1,35,52.8,31,59.3,31c6.3,0,12,3.9,12,13.1s-5.7,13.1-12.2,13.1C52.8,57,47.1,53.1,47.1,44.1 M64.3,44.1  c0-4.2-2-6.8-5.2-6.8s-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C62.2,50.7,64.3,48.5,64.3,44.1"/><polygon points="74.2,31.2 83.1,31.2 87.7,49.3 92.5,31.2 101.2,31.2 104.9,56.7 97.7,56.7 95.7,40.6 91.2,56.7 84.4,56.7 80,40.6   77.9,56.7 70.7,56.7 "/><text class="st0 st1" transform="matrix(0.484 0 0 1 101.6523 26.2899)">-</text><polygon points="27.3,2 27.3,27.5 44.5,27.5 44.5,21.2 34.3,21.2 34.3,17.3 43.7,17.3 43.7,11.9 34.3,11.9 34.3,8.2 44.5,8.2   44.5,6.4 43,2 "/><path d="M79.2,20.3l6.8-0.6c0.6,1.8,1.8,2.8,4.1,2.8c2,0,3.3-0.7,3.1-2.2c-0.2-3.9-13.5-1.7-13.5-10.9c0-4.8,4.1-7.8,9.6-7.8  c5.9,0,10,2.4,10.5,7.4l-6.7,0.6c-0.6-1.7-1.7-2.4-3.7-2.4c-1.7,0-3,0.7-3,2c0,4.4,13.7,1.5,13.7,10.9c0,4.8-4.1,7.9-10.3,7.9  C84.2,27.8,80,25.2,79.2,20.3"/><polygon points="73.7,2 69.6,17.5 65.5,2 59.8,2 55.9,17.5 51.9,2 45.6,2 45.6,6.4 52.2,27.5 58.9,27.5 62.8,12.1 66.7,27.5   73.3,27.5 81.4,2 "/></svg></div></div></div></div><div class="NWSStory-layers NWSStory-layers--unfixed"><div class="NWSStory-layer NWSStory-layer--bg"><div class="NWSStory-layer-content" style="background-color: white; "></div></div><div class="NWSStory-layer NWSStory-layer--overlay"><div class="NWSStory-layer-content"></div></div><div class="NWSStory-layer NWSStory-layer--title" id="a083c1aef-6cb2-4cce-9a2b-b5411e33d385"><h2 class="NWSStory-layer-content" style="font-family: SF UI Display Bold; font-size: 1.6875em; ">Scene 5</h2></div></div></amp-story-grid-layer></amp-story-page><amp-story-page class="NWSStory-scene i-amphtml-layout-container" data-layout="freestyle" data-type="standard" id="fab2a663-f878-409a-bf82-e8a09db084e0" i-amphtml-layout="container"><amp-story-grid-layer class="NWSStory-scene-content i-amphtml-layout-container" template="vertical" i-amphtml-layout="container"><div class="NWSStory-layers NWSStory-layers--fixed"><div class="NWSStory-layer NWSStory-layer--branding"><div class="NWSStory-layer-content"><div class="NWSStory-layer-content-visual"><svg id="Layer_1" style="enable-background:new 0 0 150.5 60.2;" version="1.1" viewBox="0 0 150.5 60.2" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g><polygon points="123.4,44.3 124.9,44.3 124.1,41.9  "/><path d="M131,29.5h-9.2c-7.8,0-14,6.3-14,14s6.3,14,14,14h9.2c7.8,0,14-6.3,14-14S138.7,29.5,131,29.5z M125.8,46.5l-0.4-0.9H123   l-0.4,1.1h-2l2.6-6.8h2l2.6,6.8h-2V46.5z M130,46.5h-1.8v-6.8h1.8V46.5z"/></g><polygon points="2.4,2 9.2,2 17.9,16.2 17.9,2 24.9,2 24.9,27.5 18.2,27.5 9.6,13.2 9.6,27.5 2.4,27.5 "/><path d="M15.1,56.7l-3.3-7.8H11H9v7.8H1.8V31.2h9.1c8.5,0,11.5,3.3,11.5,8.7c0,3.1-1.3,5.9-4.2,7.6l5,9.2H15.1z M11,44.1  c3,0,3.9-1.1,3.9-3.3s-1.1-3.3-3.9-3.3H9v6.8C9,44.1,11,44.1,11,44.1z"/><path d="M22.5,44.1C22.5,35,28.2,31,34.7,31c6.3,0,12,3.9,12,13.1S41,57.2,34.5,57.2C28,57,22.5,53.1,22.5,44.1 M39.7,44.1  c0-4.2-2-6.8-5.2-6.8c-3.1,0-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C37.5,50.7,39.7,48.5,39.7,44.1"/><path d="M47.1,44.1C47.1,35,52.8,31,59.3,31c6.3,0,12,3.9,12,13.1s-5.7,13.1-12.2,13.1C52.8,57,47.1,53.1,47.1,44.1 M64.3,44.1  c0-4.2-2-6.8-5.2-6.8s-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C62.2,50.7,64.3,48.5,64.3,44.1"/><polygon points="74.2,31.2 83.1,31.2 87.7,49.3 92.5,31.2 101.2,31.2 104.9,56.7 97.7,56.7 95.7,40.6 91.2,56.7 84.4,56.7 80,40.6   77.9,56.7 70.7,56.7 "/><text class="st0 st1" transform="matrix(0.484 0 0 1 101.6523 26.2899)">-</text><polygon points="27.3,2 27.3,27.5 44.5,27.5 44.5,21.2 34.3,21.2 34.3,17.3 43.7,17.3 43.7,11.9 34.3,11.9 34.3,8.2 44.5,8.2   44.5,6.4 43,2 "/><path d="M79.2,20.3l6.8-0.6c0.6,1.8,1.8,2.8,4.1,2.8c2,0,3.3-0.7,3.1-2.2c-0.2-3.9-13.5-1.7-13.5-10.9c0-4.8,4.1-7.8,9.6-7.8  c5.9,0,10,2.4,10.5,7.4l-6.7,0.6c-0.6-1.7-1.7-2.4-3.7-2.4c-1.7,0-3,0.7-3,2c0,4.4,13.7,1.5,13.7,10.9c0,4.8-4.1,7.9-10.3,7.9  C84.2,27.8,80,25.2,79.2,20.3"/><polygon points="73.7,2 69.6,17.5 65.5,2 59.8,2 55.9,17.5 51.9,2 45.6,2 45.6,6.4 52.2,27.5 58.9,27.5 62.8,12.1 66.7,27.5   73.3,27.5 81.4,2 "/></svg></div></div></div></div><div class="NWSStory-layers NWSStory-layers--unfixed"><div class="NWSStory-layer NWSStory-layer--bg"><div class="NWSStory-layer-content" style="background-color: white; "></div></div><div class="NWSStory-layer NWSStory-layer--overlay"><div class="NWSStory-layer-content"></div></div><div class="NWSStory-layer NWSStory-layer--title" id="a02fd6ef1-2d0c-44bc-b7e0-5527271dcc5b"><h2 class="NWSStory-layer-content" style="font-family: SF UI Display Bold; font-size: 1.6875em; ">Scene 6</h2></div></div></amp-story-grid-layer></amp-story-page><amp-story-page class="NWSStory-scene i-amphtml-layout-container" data-layout="freestyle" data-type="standard" id="e0547a9b-cff1-43b1-b52f-e908dd734d41" i-amphtml-layout="container"><amp-story-grid-layer class="NWSStory-scene-content i-amphtml-layout-container" template="vertical" i-amphtml-layout="container"><div class="NWSStory-layers NWSStory-layers--fixed"><div class="NWSStory-layer NWSStory-layer--branding"><div class="NWSStory-layer-content"><div class="NWSStory-layer-content-visual"><svg id="Layer_1" style="enable-background:new 0 0 150.5 60.2;" version="1.1" viewBox="0 0 150.5 60.2" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g><polygon points="123.4,44.3 124.9,44.3 124.1,41.9  "/><path d="M131,29.5h-9.2c-7.8,0-14,6.3-14,14s6.3,14,14,14h9.2c7.8,0,14-6.3,14-14S138.7,29.5,131,29.5z M125.8,46.5l-0.4-0.9H123   l-0.4,1.1h-2l2.6-6.8h2l2.6,6.8h-2V46.5z M130,46.5h-1.8v-6.8h1.8V46.5z"/></g><polygon points="2.4,2 9.2,2 17.9,16.2 17.9,2 24.9,2 24.9,27.5 18.2,27.5 9.6,13.2 9.6,27.5 2.4,27.5 "/><path d="M15.1,56.7l-3.3-7.8H11H9v7.8H1.8V31.2h9.1c8.5,0,11.5,3.3,11.5,8.7c0,3.1-1.3,5.9-4.2,7.6l5,9.2H15.1z M11,44.1  c3,0,3.9-1.1,3.9-3.3s-1.1-3.3-3.9-3.3H9v6.8C9,44.1,11,44.1,11,44.1z"/><path d="M22.5,44.1C22.5,35,28.2,31,34.7,31c6.3,0,12,3.9,12,13.1S41,57.2,34.5,57.2C28,57,22.5,53.1,22.5,44.1 M39.7,44.1  c0-4.2-2-6.8-5.2-6.8c-3.1,0-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C37.5,50.7,39.7,48.5,39.7,44.1"/><path d="M47.1,44.1C47.1,35,52.8,31,59.3,31c6.3,0,12,3.9,12,13.1s-5.7,13.1-12.2,13.1C52.8,57,47.1,53.1,47.1,44.1 M64.3,44.1  c0-4.2-2-6.8-5.2-6.8s-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C62.2,50.7,64.3,48.5,64.3,44.1"/><polygon points="74.2,31.2 83.1,31.2 87.7,49.3 92.5,31.2 101.2,31.2 104.9,56.7 97.7,56.7 95.7,40.6 91.2,56.7 84.4,56.7 80,40.6   77.9,56.7 70.7,56.7 "/><text class="st0 st1" transform="matrix(0.484 0 0 1 101.6523 26.2899)">-</text><polygon points="27.3,2 27.3,27.5 44.5,27.5 44.5,21.2 34.3,21.2 34.3,17.3 43.7,17.3 43.7,11.9 34.3,11.9 34.3,8.2 44.5,8.2   44.5,6.4 43,2 "/><path d="M79.2,20.3l6.8-0.6c0.6,1.8,1.8,2.8,4.1,2.8c2,0,3.3-0.7,3.1-2.2c-0.2-3.9-13.5-1.7-13.5-10.9c0-4.8,4.1-7.8,9.6-7.8  c5.9,0,10,2.4,10.5,7.4l-6.7,0.6c-0.6-1.7-1.7-2.4-3.7-2.4c-1.7,0-3,0.7-3,2c0,4.4,13.7,1.5,13.7,10.9c0,4.8-4.1,7.9-10.3,7.9  C84.2,27.8,80,25.2,79.2,20.3"/><polygon points="73.7,2 69.6,17.5 65.5,2 59.8,2 55.9,17.5 51.9,2 45.6,2 45.6,6.4 52.2,27.5 58.9,27.5 62.8,12.1 66.7,27.5   73.3,27.5 81.4,2 "/></svg></div></div></div></div><div class="NWSStory-layers NWSStory-layers--unfixed"><div class="NWSStory-layer NWSStory-layer--bg"><div class="NWSStory-layer-content" style="background-color: white; "></div></div><div class="NWSStory-layer NWSStory-layer--overlay"><div class="NWSStory-layer-content"></div></div><div class="NWSStory-layer NWSStory-layer--title" id="a8671a006-02b6-49da-a75c-a748a0f08f5c"><h2 class="NWSStory-layer-content" style="font-family: SF UI Display Bold; font-size: 1.6875em; ">Scene 7</h2></div></div></amp-story-grid-layer></amp-story-page><amp-story-page class="NWSStory-scene i-amphtml-layout-container" data-layout="freestyle" data-type="standard" id="26a168b2-8ea8-4205-8510-700dfc5f3d92" i-amphtml-layout="container"><amp-story-grid-layer class="NWSStory-scene-content i-amphtml-layout-container" template="vertical" i-amphtml-layout="container"><div class="NWSStory-layers NWSStory-layers--fixed"><div class="NWSStory-layer NWSStory-layer--branding"><div class="NWSStory-layer-content"><div class="NWSStory-layer-content-visual"><svg id="Layer_1" style="enable-background:new 0 0 150.5 60.2;" version="1.1" viewBox="0 0 150.5 60.2" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g><polygon points="123.4,44.3 124.9,44.3 124.1,41.9  "/><path d="M131,29.5h-9.2c-7.8,0-14,6.3-14,14s6.3,14,14,14h9.2c7.8,0,14-6.3,14-14S138.7,29.5,131,29.5z M125.8,46.5l-0.4-0.9H123   l-0.4,1.1h-2l2.6-6.8h2l2.6,6.8h-2V46.5z M130,46.5h-1.8v-6.8h1.8V46.5z"/></g><polygon points="2.4,2 9.2,2 17.9,16.2 17.9,2 24.9,2 24.9,27.5 18.2,27.5 9.6,13.2 9.6,27.5 2.4,27.5 "/><path d="M15.1,56.7l-3.3-7.8H11H9v7.8H1.8V31.2h9.1c8.5,0,11.5,3.3,11.5,8.7c0,3.1-1.3,5.9-4.2,7.6l5,9.2H15.1z M11,44.1  c3,0,3.9-1.1,3.9-3.3s-1.1-3.3-3.9-3.3H9v6.8C9,44.1,11,44.1,11,44.1z"/><path d="M22.5,44.1C22.5,35,28.2,31,34.7,31c6.3,0,12,3.9,12,13.1S41,57.2,34.5,57.2C28,57,22.5,53.1,22.5,44.1 M39.7,44.1  c0-4.2-2-6.8-5.2-6.8c-3.1,0-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C37.5,50.7,39.7,48.5,39.7,44.1"/><path d="M47.1,44.1C47.1,35,52.8,31,59.3,31c6.3,0,12,3.9,12,13.1s-5.7,13.1-12.2,13.1C52.8,57,47.1,53.1,47.1,44.1 M64.3,44.1  c0-4.2-2-6.8-5.2-6.8s-5.2,2.4-5.2,6.8c0,4.6,2,6.8,5.2,6.8C62.2,50.7,64.3,48.5,64.3,44.1"/><polygon points="74.2,31.2 83.1,31.2 87.7,49.3 92.5,31.2 101.2,31.2 104.9,56.7 97.7,56.7 95.7,40.6 91.2,56.7 84.4,56.7 80,40.6   77.9,56.7 70.7,56.7 "/><text class="st0 st1" transform="matrix(0.484 0 0 1 101.6523 26.2899)">-</text><polygon points="27.3,2 27.3,27.5 44.5,27.5 44.5,21.2 34.3,21.2 34.3,17.3 43.7,17.3 43.7,11.9 34.3,11.9 34.3,8.2 44.5,8.2   44.5,6.4 43,2 "/><path d="M79.2,20.3l6.8-0.6c0.6,1.8,1.8,2.8,4.1,2.8c2,0,3.3-0.7,3.1-2.2c-0.2-3.9-13.5-1.7-13.5-10.9c0-4.8,4.1-7.8,9.6-7.8  c5.9,0,10,2.4,10.5,7.4l-6.7,0.6c-0.6-1.7-1.7-2.4-3.7-2.4c-1.7,0-3,0.7-3,2c0,4.4,13.7,1.5,13.7,10.9c0,4.8-4.1,7.9-10.3,7.9  C84.2,27.8,80,25.2,79.2,20.3"/><polygon points="73.7,2 69.6,17.5 65.5,2 59.8,2 55.9,17.5 51.9,2 45.6,2 45.6,6.4 52.2,27.5 58.9,27.5 62.8,12.1 66.7,27.5   73.3,27.5 81.4,2 "/></svg></div></div></div></div><div class="NWSStory-layers NWSStory-layers--unfixed"><div class="NWSStory-layer NWSStory-layer--bg"><div class="NWSStory-layer-content" style="background-color: white; "></div></div><div class="NWSStory-layer NWSStory-layer--overlay"><div class="NWSStory-layer-content"></div></div><div class="NWSStory-layer NWSStory-layer--title" id="ac927eee4-6354-4922-9750-6fa919114b6f"><h2 class="NWSStory-layer-content" style="font-family: SF UI Display Bold; font-size: 1.6875em; ">Scene 8</h2></div></div></amp-story-grid-layer></amp-story-page><amp-story-auto-ads class="i-amphtml-layout-container" i-amphtml-layout="container"><script type="application/json">{"ad-attributes":{"type":"nws","data-slot":"1"}}</script></amp-story-auto-ads><amp-analytics class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"><script type="application/json">{"requests":{"storyImpression":"https://analytics.thenewsroom.io/story?event_type=story_impression\u0026event_value=\u0026scene_id=\u0026story_id=1539447\u0026website_id=1288492465\u0026publisher_id=1288712188\u0026referrer=${documentReferrer}","sceneImpression":"https://analytics.thenewsroom.io/story?event_type=scene_impression\u0026event_value=\u0026scene_id=${storyPageId}\u0026story_id=1539447\u0026website_id=1288492465\u0026publisher_id=1288712188\u0026referrer=${documentReferrer}","action":"https://analytics.thenewsroom.io/story?event_type=action\u0026event_value=\u0026scene_id=${storyPageId}\u0026story_id=1539447\u0026website_id=1288492465\u0026publisher_id=1288712188\u0026referrer=${documentReferrer}"},"triggers":{"storyImpression":{"on":"visible","request":"storyImpression"},"sceneImpression":{"on":"story-page-visible","request":"sceneImpression"},"action":{"on":"click","selector":".NWSStory-AMP-CTA","request":"action"}},"transport":{"beacon":true,"xhrpost":true,"image":true}}</script></amp-analytics></amp-story></body></html>
diff --git a/examples/amphtml-ads/visibility-ad.a4a.html b/examples/amphtml-ads/visibility-ad.a4a.html
index 091f626f26a41..4df77fb242442 100644
--- a/examples/amphtml-ads/visibility-ad.a4a.html
+++ b/examples/amphtml-ads/visibility-ad.a4a.html
@@ -34,7 +34,8 @@
   <script type="application/json">
     {
       "requests": {
-        "visibility": "/api/ping?type=${type}?cid=CLIENT_ID(a)&elementId=${elementId}&elementX=${elementX}&elementY=${elementY}&elementWidth=${elementWidth}&elementHeight=${elementHeight}&totalTime=${totalTime}&totalVisibleTime=${totalVisibleTime}&maxContinuousVisibleTime=${maxContinuousVisibleTime}&loadTimeVisibility=${loadTimeVisibility}&backgrounded=${backgrounded}&backgroundedAtStart=${backgroundedAtStart}&firstSeenTime=${firstSeenTime}&lastSeenTime=${lastSeenTime}&firstVisibleTime=${firstVisibleTime}&lastVisibleTime=${lastVisibleTime}&minVisiblePercentage=${minVisiblePercentage}&maxVisiblePercentage=${maxVisiblePercentage}&intersectionRatio=${intersectionRatio}&scrollHeight=${scrollHeight}&scrollWidth=${scrollWidth}"
+        "visibility": "/api/ping?type=${type}?cid=CLIENT_ID(a)&elementId=${elementId}&elementX=${elementX}&elementY=${elementY}&elementWidth=${elementWidth}&elementHeight=${elementHeight}&totalTime=${totalTime}&totalVisibleTime=${totalVisibleTime}&maxContinuousVisibleTime=${maxContinuousVisibleTime}&loadTimeVisibility=${loadTimeVisibility}&backgrounded=${backgrounded}&backgroundedAtStart=${backgroundedAtStart}&firstSeenTime=${firstSeenTime}&lastSeenTime=${lastSeenTime}&firstVisibleTime=${firstVisibleTime}&lastVisibleTime=${lastVisibleTime}&minVisiblePercentage=${minVisiblePercentage}&maxVisiblePercentage=${maxVisiblePercentage}&intersectionRatio=${intersectionRatio}&scrollHeight=${scrollHeight}&scrollWidth=${scrollWidth}",
+        "activeview": "/activeview?id=ampim&d=${elementWidth},${elementHeight}&bs=${viewportWidth},${viewportHeight}"
       },
       "triggers": {
         "visible": {
@@ -60,6 +61,16 @@
             "visiblePercentageMin": 0
           },
           "vars": { "type": "img2Visible" }
+        },
+        "activeview": {
+          "on": "visible",
+          "request": "activeview",
+          "visibilitySpec": {
+            "visiblePercentageMin": 50,
+            "selector": ":root",
+            "waitFor": "ini-load",
+            "totalTimeMin": 1000
+          }
         }
       }
     }
diff --git a/examples/analytics-notification.amp.html b/examples/analytics-notification.amp.html
index 17adb8e6b86db..57b6cf0fbd421 100644
--- a/examples/analytics-notification.amp.html
+++ b/examples/analytics-notification.amp.html
@@ -15,7 +15,7 @@
       padding: 8px;
       background: #46b6ac;
     }
-    
+
     .analytic-notification-demo-text{
       padding:16px;
     }
diff --git a/examples/analytics-vendors.amp.html b/examples/analytics-vendors.amp.html
index affc71c4e370f..b6bc87f09c75a 100644
--- a/examples/analytics-vendors.amp.html
+++ b/examples/analytics-vendors.amp.html
@@ -53,7 +53,9 @@
       <option>atinternet</option>
       <option>afsanalytics</option>
       <option>baiduanalytics</option>
+      <option>blackcrowai</option>
       <option>blueconic</option>
+      <option>bluetriangle</option>
       <option>browsi</option>
       <option>burt</option>
       <option>byside</option>
@@ -69,6 +71,7 @@
       <option>euleriananalytics</option>
       <option>facebook-pixel</option>
       <option>gemius</option>
+      <option>gfksensic</option>
       <option>googleanalytics</option>
       <option>ibeatanalytics</option>
       <option>infonline</option>
@@ -79,11 +82,13 @@
       <option>krux</option>
       <option>linkpulse</option>
       <option>lotame</option>
+      <option>mapp_intelligence</option>
       <option>marinsoftware</option>
       <option>mediametrie</option>
       <option>mediarithmics</option>
       <option>mediator</option>
       <option>memo</option>
+      <option>metrika</option>
       <option>mobify</option>
       <option>moengage</option>
       <option>mparticle</option>
@@ -99,6 +104,7 @@
       <option>piano</option>
       <option>pinpoll</option>
       <option>piStats</option>
+      <option>ppasanalytics</option>
       <option>pressboard</option>
       <option>quantcast</option>
       <option>rakam</option>
@@ -106,10 +112,12 @@
       <option>retargetly</option>
       <option>rudderstack</option>
       <option>segment</option>
+      <option>sensorsanalytics</option>
       <option>shinystat</option>
-      <option>simplereach</option>
       <option>snowplow</option>
       <option>snowplow_v2</option>
+      <option>taboola</option>
+      <option>tail</option>
       <option>teaanalytics</option>
       <option>tealiumcollect</option>
       <option>top100</option>
@@ -340,6 +348,19 @@
 </amp-analytics>
 <!-- Baidu stats example -->
 
+<!-- Black Crow AI example -->
+<amp-analytics type="blackcrowai">
+  <script type="application/json">
+    {
+      "vars": {
+        "google_tracking_id": "YOUR-GA-Account-ID-like-UA-134511847-1",
+        "site_name": "YOUR-SITE-NAME-PROVIDED-BY-YOUR-BLACK-CROW"
+      }
+    }
+  </script>
+</amp-analytics>
+<!-- END Black Crow AI example -->
+
 <!-- BlueConic analytics tracking -->
 <amp-analytics type="blueconic" id="blueconic">
   <script type="application/json">
@@ -362,6 +383,20 @@
 </amp-analytics>
 <!-- End BlueConic analytics example -->
 
+<!-- Blue Triangle example -->
+<amp-analytics type="bluetriangle" id="bluetriangle">
+  <script type="application/json">
+    {
+      "vars": {
+        "prefix": "testsite1",
+        "pageName": "AMP Test",
+        "trafficSegment": "ampTestSite1",
+      }
+    }
+  </script>
+</amp-analytics>
+<!-- End Blue Triangle example -->
+
 <!-- Browsi prediction tracking example -->
 <amp-analytics type="browsi" id="browsi">
   <script type="application/json">
@@ -693,6 +728,19 @@
 </amp-analytics>
 <!-- End Gemius  example -->
 
+<!-- GfK Sensic tracking -->
+<amp-analytics type="gfksensic" id="gfk">
+<script type="application/json">
+{
+  "vars": {
+    "regionID": "demo",
+    "mediaID": "demomedia"
+  }
+}
+</script>
+</amp-analytics>
+<!-- End Sensic  example -->
+
 <amp-analytics type="googleanalytics" id="googleanalytics">
 <script type="application/json">
 {
@@ -906,6 +954,25 @@
 </amp-analytics>
 <!-- End Lotame example -->
 
+<!-- Mapp Intelligence tracking -->
+<amp-analytics type="mapp_intelligence" id="mapp_intelligence">
+  <script type="application/json">
+    {
+      "vars": {
+        "trackDomain": "analytics.webtrekk.net",
+        "trackId": "111111111111111"
+      },
+      "triggers": {
+        "trackPageview": {
+          "on": "visible",
+          "request": "pageview"
+        }
+      }
+    }
+  </script>
+</amp-analytics>
+<!-- End Mapp Intelligence example -->
+
 <!-- Marin Software tracking.
   Configure tracker id (required)
   Configure anonymizeIp to "set" if ip should be anonymized (optional)
@@ -1300,20 +1367,36 @@
 </amp-analytics>
 <!-- End piStats example -->
 
+<!-- PPAS analytics tracking -->
+<amp-analytics type="ppasanalytics">
+  <script type="application/json">
+  {
+    "vars": {
+      "host": "analytics.example.com",
+      "website_id": "123-456-789-012",
+      "website_hash": "foobar"
+    },
+    "triggers": {
+      "trackPageview": {
+        "on": "visible",
+        "request": "pageview"
+      }
+    }
+  }
+  </script>
+</amp-analytics>
+<!-- End PPAS analytics example -->
+
 <!-- Pressboard tracking. Ensure you replace &media value with a valid media-id, and &ref value with an html-encoded URL of a pressboard sponsored story related to the used media-id -->
-<amp-analytics type="pressboard" id="pressboard" config="https://adserver.pressboard.ca/amp/config?media=5&ref=http%3A%2F%2Fwww.pressboardmedia.com%2Fnative-advertising-advice-from-the-co-founder-of-stackadapt%2F">
+<amp-analytics type="pressboard" id="pressboard" config="https://sr.studiostack.com/amp/config?media=5&ref=http%3A%2F%2Fwww.pressboardmedia.com%2Fnative-advertising-advice-from-the-co-founder-of-stackadapt%2F">
   <script type="application/json">
   {
     "vars": {
       "mediaId": "",
-      "campaignId": "",
-      "storyRequestId": "",
       "geoNameId": "",
       "country": "",
       "region": "",
-      "city": "",
-      "dbInstance": "",
-      "timeZoneOffset": ""
+      "city": ""
     }
   }
   </script>
@@ -1424,37 +1507,57 @@
 </script>
 </amp-analytics>
 
-<!-- Shinystat example -->
-<amp-analytics type="shinystat" id="shinystat">
+<!-- Sensorsanalytics stats tracking -->
+<amp-analytics type="sensorsanalytics" id="sensoranalytis">
 <script type="application/json">
-  {
-    "vars": {
-      "account": "ampshinystat",
-      "page": "Home page"
+{
+   "requests": {
+      "event": "https://jssdkdata.debugbox.sensorsdata.cn/sa?project=liangshuang"
+   },
+   "triggers": {
+      "trackPageview": {
+         "on": "visible",
+         "request": "event",
+         "vars": {
+            "event": "$pageview",
+            "amp_properties": "%7B%22a%22%3A%22www%22%7D"
+          }
+       },
+      "id_test1": {
+          "on": "click",
+          "selector": "#test1",
+          "request": "event",
+          "vars": {
+             "event": "click_test1",
+             "amp_properties": "#test1"
+          }
+       },
+       "class_test2": {
+           "on": "click",
+           "selector": ".test2",
+           "request": "event",
+           "vars": {
+              "event": "click_test2",
+              "amp_properties": ".test2"
+           }
+        }
     }
-  }
+}
 </script>
 </amp-analytics>
-<!-- End Shinystat Example -->
 
-<!-- SimpleReach Tracking -->
-<amp-analytics type="simplereach" id="simplereach">
+<!-- Shinystat example -->
+<amp-analytics type="shinystat" id="shinystat">
 <script type="application/json">
   {
     "vars": {
-      "pid": "000000000000000000000000",
-      "title": "a title",
-      "authors": ["john smith", "jane doe", "last name, first name"],
-      "categories": ["sports", "football"],
-      "tags": ["big-game", "nfl"],
-      "published_at": "2015-01-01 00:00:00",
-      "article_id": "1234567890",
-      "ignore_metadata": false
+      "account": "ampshinystat",
+      "page": "Home page"
     }
   }
 </script>
 </amp-analytics>
-<!-- End SimpleReach Example -->
+<!-- End Shinystat Example -->
 
 <!-- Snowplow Analytics tracking -->
 <amp-analytics type="snowplow" id="snowplow">
@@ -1582,6 +1685,45 @@
 </amp-analytics>
 <!-- End Snowplow Analytics example -->
 
+<!-- Taboola Example
+-->
+<amp-analytics type="taboola" id="taboola">
+  <script type="application/json">
+    {
+      "vars": {
+        "aid": "1"
+      }
+    }
+  </script>
+</amp-analytics>
+
+<!-- Tail Analytics Example
+    Ensure you replace account with your account id.
+ -->
+<amp-analytics type="tail" id="tail">
+  <script type="application/json">
+    {
+      "vars": {
+        "account": "TT-0000-0"
+      },
+      "triggers": {
+        "click": {
+          "on": "click",
+          "selector": "#test1",
+          "request": "event",
+          "vars": {
+            "eventValue": "value1",
+            "eventCategory": "category1",
+            "eventAction": "action1",
+            "eventLabel": "label1"
+          }
+        }
+      }
+    }
+  </script>
+</amp-analytics>
+<!-- End Tail Analytics example -->
+
 <!-- TEA Analytics Example
     Ensure you replace app_id with your appId.
     Ensure you replace channel with correct value.
@@ -1820,7 +1962,11 @@
     "pt": "publishTime",
     "ct": "1",
     "hid": "153",
-    "d":"m.ibeatdev.com"
+    "d":"m.ibeatdev.com",
+    "id":"123456",
+    "sec":"news",
+    "tgs":"modi,parliament",
+    "pc":"loggedin"
   }
 }
 </script>
@@ -1965,6 +2111,52 @@
   </script>
 </amp-analytics>
 <!-- end WebEngage Analytics example -->
+
+<!-- start Yandex Metrika example -->
+<amp-analytics type="metrika">
+  <script type="application/json">
+    {
+      "vars": {
+        "counterId": "71129776",
+        "yaParams": "{\"key\": \"value\"}"
+      },
+      "requests": {},
+      "triggers": {
+        "notBounce": {
+          "on": "timer",
+          "timerSpec": {
+            "immediate": false,
+            "interval": 15,
+            "maxTimerLength": 14
+          },
+          "request": "notBounce"
+        },
+        "someGoalReach": {
+          "on": "click",
+          "selector": "#test1",
+          "request": "reachGoal",
+          "vars": {
+            "goalId": "superGoalId",
+            "yaParams": "{\"inner-key\": \"inner-value\"}"
+          }
+        },
+        "halfScroll": {
+          "on": "scroll",
+          "scrollSpec": {
+            "verticalBoundaries": [
+              50
+            ]
+          },
+          "request": "reachGoal",
+          "vars": {
+            "goalId": "halfScrollGoal"
+          }
+        }
+      }
+    }
+  </script>
+</amp-analytics>
+<!-- end Yandex Metrika example -->
 </div>
 
 <div class="logo"></div>
diff --git a/examples/analytics-visibility.amp.html b/examples/analytics-visibility.amp.html
index 33d57e01fb310..1c866f008d79e 100644
--- a/examples/analytics-visibility.amp.html
+++ b/examples/analytics-visibility.amp.html
@@ -30,22 +30,31 @@
   <script type="application/json">
     {
       "requests": {
-        "endpoint": "/analytics/no-referrer"
+        "endpoint": "/analytics/no-referrer?trigger=${trigger}"
       },
       "triggers": {
         "pageview": {
           "on": "visible",
-          "request": "endpoint"
+          "request": "endpoint",
+          "vars": {
+            "trigger": "pageview"
+          }
         },
         "root": {
           "on": "visible",
           "request": "endpoint",
-          "selector": ":root"
+          "selector": ":root",
+          "vars": {
+            "trigger": "root"
+          }
         },
         "img1": {
           "on": "visible",
           "request": "endpoint",
-          "selector": "#img1"
+          "selector": "#img1",
+          "vars": {
+            "trigger": "img1"
+          }
         },
         "img1_with_spec": {
           "on": "visible",
@@ -57,12 +66,18 @@
             "totalTimeMin": 5000,
             "continuousTimeMin": 2000,
             "waitFor": "ini-load"
+          },
+          "vars": {
+            "trigger": "img1_with_spec"
           }
         },
         "img2": {
           "on": "visible",
           "request": "endpoint",
-          "selector": "#img2"
+          "selector": "#img2",
+          "vars": {
+            "trigger": "img2"
+          }
         }
       },
       "transport": {
diff --git a/examples/anim-worklet.amp.html b/examples/anim-worklet.amp.html
index 19647e09232e7..a89be173e81a4 100644
--- a/examples/anim-worklet.amp.html
+++ b/examples/anim-worklet.amp.html
@@ -68,7 +68,7 @@
           intersection-ratios="1"
           on="scroll:anim1.seekTo(percent=event.percent)"
           layout="nodisplay">
-        </amp-position-observer>        
+        </amp-position-observer>
         <amp-img layout=responsive width=411 height=411 src="https://placekitten.com/g/4000/4000"></amp-img>
       </div>
       <div></div>
diff --git a/examples/article-super-short.amp.html b/examples/article-super-short.amp.html
index ee37bca687bda..5d85f3558524a 100644
--- a/examples/article-super-short.amp.html
+++ b/examples/article-super-short.amp.html
@@ -5,7 +5,6 @@
   <title>Lorem Ipsum</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <style amp-custom>
     body {
diff --git a/examples/auto-ads.amp.html b/examples/auto-ads.amp.html
index 7bb0b49bbd24a..c0612303553a7 100644
--- a/examples/auto-ads.amp.html
+++ b/examples/auto-ads.amp.html
@@ -4,10 +4,17 @@
     <meta charset="utf-8">
     <title>AMP #0</title>
     <link rel="canonical" href="http://amp.autoplaced.com" >
-    <!--<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">-->
-    <!--<script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>-->
-    <!--<script async custom-element="amp-auto-ads" src="/dist/v0/amp-auto-ads-0.1.max.js"></script>-->
-    <script async custom-element="amp-auto-ads" src="http://localhost:8000/dist/v0/amp-auto-ads-latest.max.js"></script>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <script id="amp-access" type="application/json">
+      {
+        "authorization": "https://ampbyexample.com/components/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
+        "pingback": "https://ampbyexample.com/components/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
+        "login": "https://ampbyexample.com/components/amp-access/login?rid=READER_ID&url=CANONICAL_URL",
+        "authorizationFallbackResponse": {"error": true}
+      }
+    </script>
+    <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
+    <script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <style>
@@ -27,6 +34,7 @@
         color: #000;
         text-align: center;
         font-weight: normal;
+        margin-top: 60vh;
       }
 
       /* Shifting page content to the left to verify that the ad unit is still
@@ -65,8 +73,7 @@
     </style>
   </head>
   <body>
-    <amp-auto-ads type="adsense" data-ad-client="ca-pub-5439573510495356"></amp-auto-ads>
-    <amp-auto-ads type="premiumads" data-publisher="f326cb3e-4302-4f7b-ac75-0b31153d0c59"></amp-auto-ads>
+    <amp-auto-ads amp-access="FALSE" amp-access-hide type="adsense" data-ad-client="ca-pub-5439573510495356"></amp-auto-ads>
     <header>
       <amp-img layout="responsive" id="header-img" src="img/hero@2x.jpg" width="1200" height="900"></amp-img>
     </header>
diff --git a/examples/autocomplete.amp.html b/examples/autocomplete.amp.html
index 1ce20b23600b5..7ce7263047425 100644
--- a/examples/autocomplete.amp.html
+++ b/examples/autocomplete.amp.html
@@ -62,7 +62,7 @@
         padding: 0.5rem; /* default-ui-space-large */
         border: 1px solid rgba(0, 0, 0, 0.33); /* default-ui-med-gray */
         font-size: 1rem; /* default-ui-font-size */
-        line-height: 1.5rem; /* default-ui-space-large */        
+        line-height: 1.5rem; /* default-ui-space-large */
       }
     </style>
   </head>
@@ -75,6 +75,7 @@ <h2>Inline</h2>
         suggest-first
         filter="none"
         src="/form/mention/query"
+        [src]="colorsEndpoint"
         query="q"
         on="select:AMP.setState({inlineInputSelect: event.value})"
       >
@@ -91,6 +92,11 @@ <h2>Inline</h2>
           </div>
         </template>
       </amp-autocomplete>
+      <p>
+        <button on="tap:AMP.setState({colorsEndpoint: '/form/autocomplete/query'})">
+          mutate [src]
+        </button>
+      </p>
       <amp-autocomplete
         inline="+"
         min-characters="0"
@@ -176,6 +182,35 @@ <h2>Select Event</h2>
       </amp-autocomplete>
     <p [text]="'Hello ' + inputSelect">Hello World</p>
 
+    <h2>Select event with object value</h2>
+    <amp-autocomplete filter="token-prefix"
+        filter-value="city"
+        min-characters=0
+        on="select:AMP.setState({chosenPlace: event.valueAsObject})">
+      <input type="search" name="city">
+      <script type="application/json">
+        {
+          "items": [
+            {
+              "city": "Albany",
+              "state": "New York"
+            }, {
+              "city": "Annapolis",
+              "state": "Maryland"
+            }
+          ]
+        }
+      </script>
+      <template type="amp-mustache" id="amp-template-custom">
+        <div class="city-item" data-value="{{city}}" data-json="{{objToJson}}">
+          <div>{{city}}, {{state}}</div>
+        </div>
+      </template>
+    </amp-autocomplete>
+    <p [text]="'Your choice: ' + chosenPlace.city + ', ' + chosenPlace.state">
+      Select a place
+    </p>
+
     <h2>Disable browser autofill</h2>
     <p>form has no autocomplete attr</p>
     <form method="post" action-xhr="/form/echo-json/post" target="_blank">
diff --git a/examples/av/ForBiggerJoyrides-tiny.mp4 b/examples/av/ForBiggerJoyrides-tiny.mp4
new file mode 100644
index 0000000000000..29def93a5ea90
Binary files /dev/null and b/examples/av/ForBiggerJoyrides-tiny.mp4 differ
diff --git a/examples/bento.amp.html b/examples/bento.amp.html
new file mode 100644
index 0000000000000..3b2418a4a1644
--- /dev/null
+++ b/examples/bento.amp.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Basic Bento example</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="/build/css/amp-base-carousel-1.0.css">
+  <link rel="stylesheet" type="text/css" href="/build/css/amp-social-share-1.0.css">
+  <link rel="stylesheet" type="text/css" href="/build/css/amp-accordion-1.0.css">
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js"></script>
+  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-1.0.js"></script>
+  <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-1.0.js"></script>
+  <style amp-custom>
+    body {
+      margin: 0;
+    }
+
+    amp-base-carousel img {
+      object-fit: cover;
+    }
+
+    amp-base-carousel {
+      width: 100%;
+      aspect-ratio: 4/3;
+      border: 1px dotted;
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  </style>
+</head>
+<body>
+
+  <nav>
+    <button onclick="runAmp()">Run</button>
+    <input>
+  </nav>
+
+  <div>
+    <amp-social-share
+      type=twitter
+    ></amp-social-share>
+  </div>
+
+  <amp-base-carousel id="carousel-1" width="400" height="300" layout="responsive" loop="true">
+    <img src="img/hero@1x.jpg">
+    <img src="img/sea@1x.jpg">
+  </amp-base-carousel>
+
+  <amp-accordion>
+    <section id="section1" expanded>
+      <h2>Hero</h2>
+      <div>
+        <img src="img/hero@1x.jpg">
+      </div>
+    </section>
+    <section>
+      <h2>Sea</h2>
+      <div>
+        <img src="img/sea@1x.jpg">
+      </div>
+    </section>
+  </amp-accordion>
+
+  <script>
+    function runAmp() {
+      var s = document.createElement('script');
+      s.src = '/dist/amp.js';
+      document.head.appendChild(s);
+    }
+  </script>
+
+</body>
+</html>
diff --git a/examples/beopinion.amp.html b/examples/beopinion.amp.html
index 052ad9a9c23a5..6ff18015d64b5 100644
--- a/examples/beopinion.amp.html
+++ b/examples/beopinion.amp.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>BeOpinion examples</title>
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <link rel="canonical" href="https://www.example.com/url/to/full/document.html">
   <script async custom-element="amp-beopinion" src="https://cdn.ampproject.org/v0/amp-beopinion-0.1.js"></script>
   <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>
diff --git a/examples/bind/basic.amp.html b/examples/bind/basic.amp.html
index 6e435e206909f..f9871ba0ec465 100644
--- a/examples/bind/basic.amp.html
+++ b/examples/bind/basic.amp.html
@@ -5,7 +5,6 @@
   <title>amp-bind: Basic</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/examples/bind/carousels.amp.html b/examples/bind/carousels.amp.html
index 88217942d1125..1e43a77df8a12 100644
--- a/examples/bind/carousels.amp.html
+++ b/examples/bind/carousels.amp.html
@@ -5,7 +5,6 @@
   <title>amp-bind: Carousels</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/examples/bind/details.amp.html b/examples/bind/details.amp.html
index b4f785be7cb8a..4f3b6af66ece8 100644
--- a/examples/bind/details.amp.html
+++ b/examples/bind/details.amp.html
@@ -5,7 +5,6 @@
   <title>amp-bind: Details</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/examples/bind/errors.amp.html b/examples/bind/errors.amp.html
index 34d4fcff625a3..92b9f42ce3bb1 100644
--- a/examples/bind/errors.amp.html
+++ b/examples/bind/errors.amp.html
@@ -5,7 +5,6 @@
   <title>amp-bind: Errors</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/examples/bind/iframe.amp.html b/examples/bind/iframe.amp.html
index 27bf295f4dccf..f56864877f235 100644
--- a/examples/bind/iframe.amp.html
+++ b/examples/bind/iframe.amp.html
@@ -5,7 +5,6 @@
   <title>amp-bind: iframe</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/examples/bind/list.amp.html b/examples/bind/list.amp.html
index a0bd3671c6302..f47e77b4ede5a 100644
--- a/examples/bind/list.amp.html
+++ b/examples/bind/list.amp.html
@@ -5,7 +5,6 @@
   <title>amp-bind: Lists</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/examples/bind/macros.amp.html b/examples/bind/macros.amp.html
index 4519bf2756877..8af334697e7b6 100644
--- a/examples/bind/macros.amp.html
+++ b/examples/bind/macros.amp.html
@@ -5,7 +5,6 @@
   <title>amp-bind: Basic</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/examples/bind/performance.amp.html b/examples/bind/performance.amp.html
index a96dfd9331424..1f2348ec17d4a 100644
--- a/examples/bind/performance.amp.html
+++ b/examples/bind/performance.amp.html
@@ -5,7 +5,6 @@
   <title>amp-bind: Performance</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/examples/bind/sandbox.amp.html b/examples/bind/sandbox.amp.html
index 661789cd22070..28bfa289e9bcf 100644
--- a/examples/bind/sandbox.amp.html
+++ b/examples/bind/sandbox.amp.html
@@ -5,7 +5,6 @@
   <title>amp-bind: Sandbox</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/examples/bind/svgimage.amp.html b/examples/bind/svgimage.amp.html
index 13dc61b2d2ef5..677b8903d8b3d 100644
--- a/examples/bind/svgimage.amp.html
+++ b/examples/bind/svgimage.amp.html
@@ -5,7 +5,6 @@
   <title>amp-bind: svg</title>
   <link rel="canonical" href="amps.html" />
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/examples/bind/title.amp.html b/examples/bind/title.amp.html
index b8f31dfb57519..74b9c8917e56e 100644
--- a/examples/bind/title.amp.html
+++ b/examples/bind/title.amp.html
@@ -5,7 +5,6 @@
   <title [text]="'amp-bind: Title (' + myState.count + ')'">amp-bind: Title</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/examples/bind/video.amp.html b/examples/bind/video.amp.html
index eff95ce2dbb87..a79bbfc577154 100644
--- a/examples/bind/video.amp.html
+++ b/examples/bind/video.amp.html
@@ -5,7 +5,6 @@
   <title>amp-bind: Video</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/examples/bind/xhr.amp.html b/examples/bind/xhr.amp.html
index 33bc6e5f0a867..a08a17b87c714 100644
--- a/examples/bind/xhr.amp.html
+++ b/examples/bind/xhr.amp.html
@@ -5,7 +5,6 @@
   <title>amp-bind: XHR</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/examples/bodymovin-animation.amp.html b/examples/bodymovin-animation.amp.html
index 2a7ae1d5884bc..e8a8ffa9be5d8 100644
--- a/examples/bodymovin-animation.amp.html
+++ b/examples/bodymovin-animation.amp.html
@@ -5,7 +5,6 @@
     <title>Bodymovin Animation examples</title>
     <link rel="canonical" href="amps.html" >
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
     <script async custom-element="amp-bodymovin-animation" src="https://cdn.ampproject.org/v0/amp-bodymovin-animation-0.1.js"></script>
     <script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
     <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>
@@ -74,6 +73,36 @@ <h2>Example of a responsive layout animation</h2>
   <amp-bodymovin-animation renderer="html" layout="responsive" width="200" height="200" src="https://nainar.github.io/loader.json" loop="true">
   </amp-bodymovin-animation>
 
+  <h1>Canvas renderer</h1>
+
+  <h2>Examples of animations that loops infinitely</h2>
+  <amp-bodymovin-animation renderer="canvas" layout="fixed" width="200" height="200" src="https://nainar.github.io/loader.json" loop>
+  </amp-bodymovin-animation>
+
+  <amp-bodymovin-animation renderer="canvas" layout="fixed" width="200" height="200" src="https://nainar.github.io/loader.json">
+  </amp-bodymovin-animation>
+
+  <h2>Example of an animation that does one iteration</h2>
+  <amp-bodymovin-animation renderer="canvas" layout="fixed" width="200" height="200" src="https://nainar.github.io/loader.json" loop='false'>
+  </amp-bodymovin-animation>
+
+  <h2>Example of an animation that does 2 iteration</h2>
+  <amp-bodymovin-animation renderer="canvas" layout="fixed" width="200" height="200" src="https://nainar.github.io/loader.json" loop="2">
+  </amp-bodymovin-animation>
+
+  <h2>Example of an animation that doesn't autoplay</h2>
+  <amp-bodymovin-animation renderer="canvas" id="anim" layout="fixed" width="200" height="200" src="https://nainar.github.io/loader.json" loop="true" name="ripple_1" noautoplay>
+  </amp-bodymovin-animation>
+
+  <h2>Example of a bodymovin animation controlled by scroll position</h2>
+  <amp-bodymovin-animation renderer="canvas" layout="fixed" width="200" height="200" src="https://nainar.github.io/loader.json" loop="true" id="bodymovin-scrollable">
+  </amp-bodymovin-animation>
+  <amp-position-observer intersection-ratios="1" on="scroll:bodymovin-scrollable.seekTo(percent=event.percent)" layout="nodisplay">
+  </amp-position-observer>
+
+  <h2>Example of a responsive layout animation</h2>
+  <amp-bodymovin-animation renderer="canvas" layout="responsive" width="200" height="200" src="https://nainar.github.io/loader.json" loop="true">
+  </amp-bodymovin-animation>
 </body>
 
 </html>
diff --git a/examples/brid-player.amp.html b/examples/brid-player.amp.html
index 4ffe047330c4b..10844736eda6d 100644
--- a/examples/brid-player.amp.html
+++ b/examples/brid-player.amp.html
@@ -17,8 +17,8 @@
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
-  
-  <h2>Brid Player</h2> 
+
+  <h2>Brid Player</h2>
   <amp-brid-player
       id="myVideo"
       data-partner="264"
@@ -43,7 +43,7 @@ <h2>Autoplay</h2>
       layout="responsive"
       width="480" height="270">
   </amp-brid-player>
-  
+
   <h2>Outstream</h2>
   <amp-brid-player
       autoplay
@@ -54,6 +54,16 @@ <h2>Outstream</h2>
       width="480" height="270">
   </amp-brid-player>
 
+  <h2>Carousel</h2>
+  <amp-brid-player
+      autoplay
+      data-partner="17402"
+      data-player="26145"
+      data-carousel="459"
+      layout="responsive"
+      width="480" height="270">
+  </amp-brid-player>
+
   <h2>Dock</h2>
   <amp-brid-player
       dock
@@ -63,7 +73,7 @@ <h2>Dock</h2>
       layout="responsive"
       width="480" height="270">
   </amp-brid-player>
-  
+
   <div class="spacer"></div>
 
 </body>
diff --git a/examples/brightcove.amp.html b/examples/brightcove.amp.html
index 10bae0458b029..f61d873a699a2 100644
--- a/examples/brightcove.amp.html
+++ b/examples/brightcove.amp.html
@@ -12,7 +12,7 @@
   <style amp-custom>
     body {
       max-width: 527px;
-      font-family: 'Questrial', Arial;
+      font-family: Arial;
     }
     .spacer {
       height: 100vh;
diff --git a/examples/carousel-v1.amp.html b/examples/carousel-v1.amp.html
index 0b0ab12f8a9fe..a2af7d1b1ee51 100644
--- a/examples/carousel-v1.amp.html
+++ b/examples/carousel-v1.amp.html
@@ -8,11 +8,6 @@
       name="viewport"
       content="width=device-width,minimum-scale=1,initial-scale=1"
     />
-    <link
-      href="https://fonts.googleapis.com/css?family=Questrial"
-      rel="stylesheet"
-      type="text/css"
-    />
     <script
       async
       custom-element="amp-carousel"
diff --git a/examples/carousel.amp.html b/examples/carousel.amp.html
index 99c90d003a4d9..85a4a0ccaee56 100644
--- a/examples/carousel.amp.html
+++ b/examples/carousel.amp.html
@@ -20,7 +20,7 @@
   <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
   <script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>
   <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
-  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
+  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
   <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
   <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
   <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>
diff --git a/examples/connatix-player.amp.html b/examples/connatix-player.amp.html
index ae5441382d9c6..4aa10dbb37d81 100644
--- a/examples/connatix-player.amp.html
+++ b/examples/connatix-player.amp.html
@@ -18,21 +18,21 @@
 <body>
   <h2>Connatix AMP examples</h2>
   <h3>Connatix Player Responsive</h3>
-  <amp-connatix-player 
+  <amp-connatix-player
     data-player-id="f721b0d8-7a79-42b6-b637-fa4e86138ed9"
     layout="responsive"
     width="480"
     height="270">
   </amp-connatix-player>
   <h3>Connatix Player Fixed</h3>
-  <amp-connatix-player 
+  <amp-connatix-player
     data-player-id="f721b0d8-7a79-42b6-b637-fa4e86138ed9"
     layout="fixed"
     width="640"
     height="360">
   </amp-connatix-player>
   <h3>Connatix Player Responsive - With Media Id</h3>
-  <amp-connatix-player 
+  <amp-connatix-player
     data-player-id="f721b0d8-7a79-42b6-b637-fa4e86138ed9"
     data-media-id="527207df-2007-43c4-b87a-f90814bafd2e"
     layout="responsive"
diff --git a/examples/csa.amp.html b/examples/csa.amp.html
index 3b587903b0ff3..25a20b47095a6 100644
--- a/examples/csa.amp.html
+++ b/examples/csa.amp.html
@@ -30,7 +30,7 @@
   <div class="content">
     <h2>CSA Example</h2>
     <h3>AdSense for Search ad</h3>
-    <amp-ad 
+    <amp-ad
         height=300
         type="csa"
         data-afs-page-options='{"pubId": "gtech-codegen", "query": "flowers", "sellerRatings": true, "siteLinks": true, "clickToCall": true}'
@@ -39,9 +39,9 @@ <h3>AdSense for Search ad</h3>
 
     <!-- Make the second ad below the fold. -->
     <div class="organic">Page Content</div>
-    
+
     <h3>AdSense for Shopping ad</h3>
-    <amp-ad 
+    <amp-ad
         height=300
         type="csa"
         data-afsh-page-options='{"pubId": "vert-pla-test1-srp", "query": "flowers"}'
diff --git a/examples/dailymotion.amp.html b/examples/dailymotion.amp.html
index a5663f9e9775c..d0436833fac28 100644
--- a/examples/dailymotion.amp.html
+++ b/examples/dailymotion.amp.html
@@ -5,7 +5,6 @@
   <title>Dailymotion examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script>
   <style amp-custom>
     .spacer {
diff --git a/examples/date-picker.amp.html b/examples/date-picker.amp.html
index 2119e4d63daf5..9fbd01014d4ed 100644
--- a/examples/date-picker.amp.html
+++ b/examples/date-picker.amp.html
@@ -51,6 +51,19 @@
 </head>
 <body>
   <h1>amp-date-picker</h1>
+  <h2>highlighted and blocked attributes</h2>
+  <amp-date-picker id="simple-date-picker-3"
+    type="single"
+    mode="static"
+    layout="fixed-height"
+    height="360"
+    on="select:AMP.setState({date3: event.date ? event.date : ''})"
+    locale="en"
+    format="YYYY-MM-DD"
+    highlighted="FREQ=WEEKLY;WKST=SU;BYDAY=TH"
+    blocked="FREQ=WEEKLY;WKST=SU;BYDAY=SA,SU">
+  </amp-date-picker>
+
   <h2><code>&lt;amp-date-range&gt;</code></h2>
   <p>Try to pick a range. This is a date-range picker</p>
   <amp-date-picker
diff --git a/examples/doubleclick-rtc.amp.html b/examples/doubleclick-rtc.amp.html
deleted file mode 100644
index ea37a4bef3c8e..0000000000000
--- a/examples/doubleclick-rtc.amp.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Doubleclick RTC Example</title>
-  <link rel="canonical" href="http://nonblocking.io/" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <style amp-custom>
-    amp-ad {
-      border: 1px solid #ccc;
-      max-width: 500px;
-    }
-  </style>
-  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <h2> NOTE: Must disable check that isSecureUrl for testing </h2>
-  <h2>Doubleclick with RTC</h2>
-    <amp-ad width="320" height="50"
-            type="doubleclick"
-            data-slot="/4119129/mobile_ad_banner"
-            rtc-config='{"vendors": {"fakeVendor": {"SLOT_ID": "1", "PAGE_ID": "1"}, "nonexistent-vendor": {"SLOT_ID": "1"}, "fakeVendor2": {"SLOT_ID": "1"}}, "urls": ["https://localhost:4443/posts?slot_id=1", "https://localhost:4443/abc?timeout=true", "https://broken.zzzzzz", "https://localhost:4443/zqq?slot_id=1"], "timeoutMillis": 500}'
-            json='{"targeting":{"food":["burgers","chicken"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":0}'>
-    </amp-ad>
-
-    <amp-ad width="320" height="50"
-            type="doubleclick"
-            data-slot="/4119129/mobile_ad_banner"
-            rtc-config='{"urls": ["https://www.example.biz/?pvi=PAGEVIEWID&href=HREF&ds=ATTR(data-slot)&h=ATTR(height)&w=ATTR(width)&ovw=ATTR(data-override-width)&json=ATTR(data-json)&ovh=ATTR(data-override-height)"], "timeoutMillis": 500}'
-            json='{"targeting":{"food":["burgers","chicken"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":0}'>
-    </amp-ad>
-
-    <amp-ad width="320" height="50"
-            type="doubleclick"
-            data-slot="/4119129/mobile_ad_banner"
-            rtc-config='{
-            "vendors": {
-            "fakeVendor": {
-            "SLOT_ID": {"key":"param"}
-            }
-            }
-            }'>
-    </amp-ad>
-</body>
-</html>
diff --git a/examples/doubleload.amp.html b/examples/doubleload.amp.html
new file mode 100644
index 0000000000000..96b7cf5c2f80d
--- /dev/null
+++ b/examples/doubleload.amp.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>AMP #0</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+
+  <script custom-element="amp-carousel" src="/dist/v0/amp-carousel-0.2.js"></script>
+  <script custom-element="amp-carousel" src="/dist/v0/amp-carousel-0.2.mjs"></script>
+  <script async src="/dist/v0.js"></script>
+  <script async src="/dist/v0.mjs"></script>
+</head>
+<body class="comic-amp-font-loading">
+<amp-carousel
+  width="450"
+  height="300"
+  layout="responsive"
+  type="slides"
+  role="region"
+  aria-label="Basic carousel"
+>
+  <amp-img
+    src="/examples/img/sample.jpg"
+    width="450"
+    height="300"
+  ></amp-img>
+  <amp-img
+    src="/examples/img/sea@1x.jpg"
+    width="450"
+    height="300"
+  ></amp-img>
+  <amp-img
+    src="/examples/img/clock.jpg"
+    width="450"
+    width="450"
+    height="300"
+  ></amp-img>
+</amp-carousel>
+</body>
+</html>
diff --git a/examples/example-sw.js b/examples/example-sw.js
index 1373cec0351f5..2ced5ffbfcfa0 100644
--- a/examples/example-sw.js
+++ b/examples/example-sw.js
@@ -1,3 +1,18 @@
-self.addEventListener('fetch', e => {
+/**
+ * Copyright 2018 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.
+ */
+self.addEventListener('fetch', (e) => {
   return fetch(e.request);
 });
diff --git a/examples/experiment-1.0.amp.html b/examples/experiment-1.0.amp.html
index 39212ce3638e4..d33e6d7d8b2e7 100644
--- a/examples/experiment-1.0.amp.html
+++ b/examples/experiment-1.0.amp.html
@@ -108,7 +108,7 @@ <h1>Title TBD</h1>
       layout=nodisplay
       id="amp-user-notification">
     Dismiss this notification to see a background-color on the title on your next visit.
-    <button on="tap:amp-user-notification.dismiss" role="button">I accept</button>
+    <button on="tap:amp-user-notification.dismiss">I accept</button>
   </amp-user-notification>
 </body>
 </html>
diff --git a/examples/experiment.amp.html b/examples/experiment.amp.html
index 8081636f0bfe4..b022bc582a11a 100644
--- a/examples/experiment.amp.html
+++ b/examples/experiment.amp.html
@@ -73,7 +73,7 @@ <h1>Background color is user sticky; text color may change on a refresh</h1>
       layout=nodisplay
       id="amp-user-notification">
     Dismiss this notification to see a border around title on your next visit.
-    <button on="tap:amp-user-notification.dismiss" role="button">I accept</button>
+    <button on="tap:amp-user-notification.dismiss">I accept</button>
   </amp-user-notification>
 </body>
 </html>
diff --git a/examples/facebook.amp.html b/examples/facebook.amp.html
index 767448a97bcd8..0ec6e469cac26 100644
--- a/examples/facebook.amp.html
+++ b/examples/facebook.amp.html
@@ -5,7 +5,6 @@
     <title>Facebook examples</title>
     <link rel="canonical" href="amps.html" >
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
     <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
     <script async custom-element="amp-facebook-comments" src="https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js"></script>
     <script async custom-element="amp-facebook-like" src="https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js"></script>
@@ -51,7 +50,8 @@ <h1>More Posts</h1>
 <amp-facebook width=552 height=310
     layout="responsive"
     data-embed-as="video"
-    data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
+    data-href="https://www.facebook.com/zuck/videos/10102509264909801/"
+    data-allowfullscreen="true">
 </amp-facebook>
 
 <h2>Comments</h2>
diff --git a/examples/fake-ad.amp.html b/examples/fake-ad.amp.html
index 1fe84a88a607e..941de1efbc270 100644
--- a/examples/fake-ad.amp.html
+++ b/examples/fake-ad.amp.html
@@ -20,5 +20,34 @@ <h2>Fake Ad Network:</h2>
     <div fallback>Could not display the fake ad :(</div>
   </amp-ad>
   <br/>
+
+  <h2>Fake Ad Network [srcdoc]:</h2>
+  <amp-ad width="300" height="400"
+      id="i-amphtml-demo-id-2"
+      type="fake"
+      a4a-conversion="true"
+      srcdoc='
+        <!doctype html>
+        <html ⚡4ads>
+        <head>
+          <meta charset="utf-8">
+          <meta name="viewport" content="width=device-width,minimum-scale=1">
+          <style amp4ads-boilerplate>body{visibility:hidden}</style>
+          <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
+        </head>
+        <body>
+          <p>Hello, fake ad with srcdoc.<p>
+          <amp-img
+            layout="fixed"
+            height="250"
+            width="300"
+            src="https://placekitten.com/300/250"
+          ></amp-img>
+        </body>
+        </html>
+      '>
+    <div placeholder>Loading...</div>
+    <div fallback>Could not display the fake ad :(</div>
+  </amp-ad>
 </body>
 </html>
diff --git a/examples/fluid.amp.html b/examples/fluid.amp.html
index 5010eb324cf01..a4a84849cc5d5 100644
--- a/examples/fluid.amp.html
+++ b/examples/fluid.amp.html
@@ -5,7 +5,6 @@
     <title>DoubleClick with Fluid Example</title>
     <link rel="canonical" href="http://nonblocking.io/">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
diff --git a/examples/gfk-sensic-analytics.amp.html b/examples/gfk-sensic-analytics.amp.html
new file mode 100644
index 0000000000000..ccd82906f4c58
--- /dev/null
+++ b/examples/gfk-sensic-analytics.amp.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html ⚡>
+<head>
+    <meta charset="utf-8">
+    <title>GfK (Sensic) Media Analytics</title>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <link rel="canonical" href="gfk-analytics.amp.html" >
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
+    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+    <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>
+    </style>
+</head>
+
+<body>
+    <h1>Audio player</h1>
+    <p>Play/Pause to send event</p>
+    <amp-audio id="my-player" layout="" src="av/audio.mp3"> </amp-audio>
+
+    <p>Play/Pause to send event</p>
+    <amp-audio id="my-player2" layout="" src="av/audio.mp3"> </amp-audio>
+
+    <amp-analytics type="gfksensic">
+        <script type="application/json">
+            {
+                "vars": {
+                    "regionID": "demo",
+                    "mediaID": "demomedia"
+                },
+                "triggers": {
+                    "audioPlay": {
+                        "on": "audio-play",
+                        "request": "audio-play",
+                        "selector": "#my-player",
+                        "vars": {
+                            "contentID": "myCategory",
+                            "streamID": "my-player"
+                        }
+                    },
+                    "audioPause": {
+                        "on": "audio-pause",
+                        "request": "audio-stop",
+                        "selector": "#my-player",
+                        "vars": {
+                            "contentID": "myCategory",
+                            "streamID": "my-player"
+                        }
+                    },
+                    "audioPlay2": {
+                        "on": "audio-play",
+                        "request": "audio-play",
+                        "selector": "#my-player2",
+                        "vars": {
+                            "contentID": "myCategory",
+                            "streamID": "my-player2"
+                        }
+                    },
+                    "audioPause2": {
+                        "on": "audio-pause",
+                        "request": "audio-stop",
+                        "selector": "#my-player2",
+                        "vars": {
+                            "contentID": "myCategory",
+                            "streamID": "my-player2"
+                        }
+                    }
+                }
+            }
+        </script>
+    </amp-analytics>
+      <a href="another.html">Change page</a>
+</body>
+
+</html>
diff --git a/examples/gfycat.amp.html b/examples/gfycat.amp.html
index 810772eaa5653..212a272953544 100644
--- a/examples/gfycat.amp.html
+++ b/examples/gfycat.amp.html
@@ -5,7 +5,6 @@
     <title>Gfycat examples</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <script async custom-element="amp-gfycat" data-amp-report-test="amp-gfycat" src="https://cdn.ampproject.org/v0/amp-gfycat-0.1.js"></script>
     <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>
diff --git a/examples/gwd.amp.html b/examples/gwd.amp.html
index 99accb98454d4..adc8e9fdeeb59 100644
--- a/examples/gwd.amp.html
+++ b/examples/gwd.amp.html
@@ -100,18 +100,18 @@
   <!-- Demo animation controls. -->
   <p>
     Page1 animations:
-    <button on="tap:gwd-animation.play(id=page1)" role="button" tabindex="0">Play</button>
-    <button on="tap:gwd-animation.pause(id=page1)" role="button" tabindex="0">Pause</button>
-    <button on="tap:gwd-animation.togglePlay(id=page1)" role="button" tabindex="0">Toggle</button>
-    <button on="tap:gwd-animation.gotoAndPlay(id=page1, label=foo)" role="button" tabindex="0">
+    <button on="tap:gwd-animation.play(id=page1)" tabindex="0">Play</button>
+    <button on="tap:gwd-animation.pause(id=page1)" tabindex="0">Pause</button>
+    <button on="tap:gwd-animation.togglePlay(id=page1)" tabindex="0">Toggle</button>
+    <button on="tap:gwd-animation.gotoAndPlay(id=page1, label=foo)" tabindex="0">
       Play page from label
     </button>
   </p>
   <p>
     Page1 child animations:
-    <button on="tap:gwd-animation.play(id=child)" role="button" tabindex="0">Play</button>
-    <button on="tap:gwd-animation.pause(id=child)" role="button" tabindex="0">Pause</button>
-    <button on="tap:gwd-animation.togglePlay(id=child)" role="button" tabindex="0">Toggle</button>
+    <button on="tap:gwd-animation.play(id=child)" tabindex="0">Play</button>
+    <button on="tap:gwd-animation.pause(id=child)" tabindex="0">Pause</button>
+    <button on="tap:gwd-animation.togglePlay(id=child)" tabindex="0">Toggle</button>
   </p>
 
   <!-- Configure the animation runtime with handlers for the two timeline events. -->
diff --git a/examples/ima-video.amp.html b/examples/ima-video.amp.html
index 0a3b26750080b..0fa0794757915 100644
--- a/examples/ima-video.amp.html
+++ b/examples/ima-video.amp.html
@@ -5,7 +5,6 @@
     <title>IMA examples</title>
     <link rel="canonical" href="amps.html" >
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
     <script async custom-element="amp-ima-video" src="https://cdn.ampproject.org/v0/amp-ima-video-0.1.js"></script>
     <style amp-custom>
     .spacer {
diff --git a/examples/image-lightbox.amp.html b/examples/image-lightbox.amp.html
index 42f17a0d3396d..25e861cf1ba8f 100644
--- a/examples/image-lightbox.amp.html
+++ b/examples/image-lightbox.amp.html
@@ -89,6 +89,6 @@
   </amp-img>
 
   <amp-image-lightbox id="ampimagelightbox" layout="nodisplay"></amp-image-lightbox>
-  
+
 </body>
 </html>
\ No newline at end of file
diff --git a/examples/image-slider.amp.html b/examples/image-slider.amp.html
index 141586b4c32c4..29d4a43728380 100644
--- a/examples/image-slider.amp.html
+++ b/examples/image-slider.amp.html
@@ -150,32 +150,32 @@ <h1>Drag/Click Slider with Customizable Labels</h1>
 
     <p>NO labels; NO whatever modifications</p>
     <amp-image-slider tabindex="0" layout="responsive" width="1024" height="600">
-      <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-      <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+      <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
+      <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
     </amp-image-slider>
 
     <p>Images toggle their own fallback</p>
     <amp-image-slider tabindex="0" layout="responsive" width="1024" height="600">
       <amp-img src="boom" layout="fill">
-        <amp-img fallback src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+        <amp-img fallback src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
       </amp-img>
       <amp-img src="boom" layout="fill">
-        <amp-img fallback src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
+        <amp-img fallback src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
       </amp-img>
     </amp-image-slider>
 
     <p>Labels with NO positioning rules specified (default to both top left)</p>
     <amp-image-slider tabindex="0" layout="responsive" width="1024" height="600">
-      <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-      <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+      <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
+      <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
       <div first class="label">BEFORE</div>
       <div second class="label">AFTER</div>
     </amp-image-slider>
 
     <p>Labels with positioning rules specified</p>
     <amp-image-slider tabindex="0" layout="responsive" width="1024" height="600">
-      <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-      <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+      <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
+      <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
       <div first class="label left-label-center-xy">BEFORE</div>
       <div second class="label right-label-center-xy">AFTER</div>
     </amp-image-slider>
@@ -185,32 +185,32 @@ <h1>Customizable Hints</h1>
     <p>Hide hints through display trick</p>
     <amp-image-slider class="hint-hidden" tabindex="0" layout="responsive" width="1024" height="600"
         disable-hint-reappear>
-      <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-      <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+      <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
+      <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
       <div first class="label">BEFORE</div>
       <div second class="label">AFTER</div>
     </amp-image-slider>
 
     <p>Fully customized hint (current reversing the hint logos, changing sizes and margins)</p>
     <amp-image-slider class="reversed-hint" tabindex="0" layout="responsive" width="1024" height="600">
-      <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-      <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+      <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
+      <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
       <div first class="label">BEFORE</div>
       <div second class="label">AFTER</div>
     </amp-image-slider>
 
     <p>Fully customized hint (replace with triangles)</p>
     <amp-image-slider class="triangle-hint" tabindex="0" layout="responsive" width="1024" height="600">
-      <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-      <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+      <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
+      <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
       <div first class="label">BEFORE</div>
       <div second class="label">AFTER</div>
     </amp-image-slider>
 
     <p>Fully customized hint (centering a box)</p>
     <amp-image-slider class="centered-hint" tabindex="0" layout="responsive" width="1024" height="600">
-      <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-      <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+      <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
+      <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
       <div first class="label">BEFORE</div>
       <div second class="label">AFTER</div>
     </amp-image-slider>
@@ -218,8 +218,8 @@ <h1>Customizable Hints</h1>
     <p>No Reemerging hint</p>
     <amp-image-slider tabindex="0" layout="responsive" width="1024" height="600"
         disable-hint-reappear>
-      <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-      <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+      <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
+      <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
       <div first class="label">BEFORE</div>
       <div second class="label">AFTER</div>
     </amp-image-slider>
@@ -233,8 +233,8 @@ <h1>Inside Carousel</h1>
       type="slides"
       controls>
       <amp-image-slider layout="responsive" width="1024" height="600">
-        <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-        <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+        <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
+        <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
       </amp-image-slider>
       <amp-img src="https://unsplash.it/200/300?image=0"
         width="400"
@@ -242,8 +242,8 @@ <h1>Inside Carousel</h1>
         layout="responsive"
         alt="a sample image"></amp-img>
       <amp-image-slider layout="responsive" width="1024" height="600">
-        <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-        <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+        <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
+        <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
       </amp-image-slider>
       <amp-img src="https://unsplash.it/200/300?image=1"
         width="400"
@@ -256,8 +256,8 @@ <h1>Accessibility</h1>
 
     <p>Has ARIA labels</p>
     <amp-image-slider tabindex="0" layout="responsive" width="1024" height="600">
-      <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill" alt="Mountain"></amp-img>
-      <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill" alt="Ocean"></amp-img>
+      <amp-img src="/examples/img/sea@2x.jpg" layout="fill" alt="Mountain"></amp-img>
+      <amp-img src="/examples/img/hero@2x.jpg" layout="fill" alt="Ocean"></amp-img>
       <div first class="label">BEFORE</div>
       <div second class="label">AFTER</div>
     </amp-image-slider>
@@ -266,14 +266,14 @@ <h1>Customization</h1>
 
     <p>Set <code>initial-slider-position</code> to 0.3</p>
     <amp-image-slider tabindex="0" layout="responsive" width="1024" height="600" initial-slider-position="0.3">
-      <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-      <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+      <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
+      <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
     </amp-image-slider>
 
     <p>Set <code>step-size</code> to 0.2</p>
     <amp-image-slider tabindex="0" layout="responsive" width="1024" height="600" step-size="0.2">
-      <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-      <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+      <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
+      <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
     </amp-image-slider>
 
     <h1>Test lightbox overlay</h1>
@@ -289,7 +289,6 @@ <h1>Hello World!</h1>
     </amp-lightbox>
     <button class="ampstart-btn caps m2"
       on="tap:my-lightbox"
-      role="button"
       tabindex="0">
       Open lightbox
     </button>
diff --git a/examples/img.amp.html b/examples/img.amp.html
new file mode 100644
index 0000000000000..474f3ce751943
--- /dev/null
+++ b/examples/img.amp.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Lorem Ipsum | PublisherName</title>
+  <link rel="canonical" href="https://medium.com/p/cb7f223fad86" >
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+
+  <style amp-custom>
+    body {
+      margin: 0;
+      font-family: 'Georgia', Serif;
+      background: white;
+    }
+    amp-img {
+      background-color: #f4f4f4;
+    }
+  </style>
+  <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
+  <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>
+  <link rel="manifest" href="medium-manifest.json">
+</head>
+<body>
+  <div class="button-set">
+    <button on="tap:hero-img.show">Show</button>
+    <button on="tap:hero-img.hide">Hide</button>
+  </div>
+
+  <amp-img id="hero-img"
+      _hidden
+      src="img/hero@1x.jpg"
+      srcset="img/hero@1x.jpg 1x, img/hero@2x.jpg 2x"
+      layout="responsive" width="360" placeholder
+      alt="Picture of two chairs on a lake shore with big pine trees"
+      title="Opens image in a lightbox"
+      role="button" on="tap:headline-image-lightbox"
+      height="216" tabindex="0">
+  </amp-img>
+</body>
+</html>
diff --git a/examples/img/bigbuckbunny copy.jpg b/examples/img/bigbuckbunny copy.jpg
new file mode 100644
index 0000000000000..4d4125eac8a06
Binary files /dev/null and b/examples/img/bigbuckbunny copy.jpg differ
diff --git a/examples/img/panorama1.jpg b/examples/img/panorama1.jpg
deleted file mode 100644
index 31cfdda4d421f..0000000000000
Binary files a/examples/img/panorama1.jpg and /dev/null differ
diff --git a/examples/instagram.amp.html b/examples/instagram.amp.html
index 9d19618408da1..4b4c41845d637 100644
--- a/examples/instagram.amp.html
+++ b/examples/instagram.amp.html
@@ -5,7 +5,6 @@
   <title>Instagram examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
   <style amp-custom>
     body {
@@ -58,7 +57,7 @@ <h2>Instagram with Frame, Caption and Overflow Element</h2>
       <div overflow>Show Caption</div>
   </amp-instagram>
 
-  <h2>Instagram Default Layout</h2> 
+  <h2>Instagram Default Layout</h2>
   <amp-instagram
       data-shortcode="fBwFP"
       width="381"
diff --git a/examples/izlesene.amp.html b/examples/izlesene.amp.html
index 91fc6578f3650..7a96353a9763a 100644
--- a/examples/izlesene.amp.html
+++ b/examples/izlesene.amp.html
@@ -5,7 +5,6 @@
     <title>Izlesene examples</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <script async custom-element="amp-izlesene" src="https://cdn.ampproject.org/v0/amp-izlesene-0.1.js"></script>
      <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/examples/jwplayer.amp.html b/examples/jwplayer.amp.html
index aa8b64f0b7b78..3de23fcde3f7a 100644
--- a/examples/jwplayer.amp.html
+++ b/examples/jwplayer.amp.html
@@ -19,8 +19,8 @@ <h3>Responsive</h3>
   <amp-jwplayer
     data-media-id="BZ6tc0gy"
     data-player-id="uoIbMPm3"
-    layout="responsive" 
-    width="16" 
+    layout="responsive"
+    width="16"
     height="9"
   >
   </amp-jwplayer>
@@ -29,7 +29,7 @@ <h3>Non-responsive, with a playlist</h3>
   <amp-jwplayer
     data-playlist-id="482jsTAr"
     data-player-id="uoIbMPm3"
-    width="480" 
+    width="480"
     height="270"
   >
   </amp-jwplayer>
@@ -39,7 +39,7 @@ <h3>Docking</h3>
     data-media-id="CtaIzmFs"
     data-player-id="BjcwyK37"
     dock
-    width="480" 
+    width="480"
     height="270"
   >
   </amp-jwplayer>
@@ -51,8 +51,8 @@ <h3>Responsive contextual</h3>
     data-content-search="__CONTEXTUAL__"
     data-content-backfill=true
     data-content-recency="9D"
-    layout="responsive" 
-    width="16" 
+    layout="responsive"
+    width="16"
     height="9"
   >
   </amp-jwplayer>
@@ -61,7 +61,7 @@ <h3>Non-Responsive, with a VAST Ad</h3>
   <amp-jwplayer
     data-media-id="NsdRZqng"
     data-player-id="WmASC9FK"
-    width="480" 
+    width="480"
     height="270"
   >
   </amp-jwplayer>
@@ -70,7 +70,7 @@ <h3>Non-Responsive, with an IMA Ad</h3>
   <amp-jwplayer
     data-media-id="3h8NHAIV"
     data-player-id="n6vw37Z7"
-    width="480" 
+    width="480"
     height="270"
   >
   </amp-jwplayer>
diff --git a/examples/layout-flex-item.amp.html b/examples/layout-flex-item.amp.html
index 59d4d64c908d5..3cf2b6c1157ad 100644
--- a/examples/layout-flex-item.amp.html
+++ b/examples/layout-flex-item.amp.html
@@ -99,7 +99,7 @@ <h3>Flex container parent with non flex-item children. Children's width and heig
 <div class="container">
    <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n" width="100" height="75"></amp-img>
   <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n"  width="100" height="75"></amp-img>
-  <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no-n" width="100" height="75"></amp-img> 
+  <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no-n" width="100" height="75"></amp-img>
 </div>
 </body>
 </html>
diff --git a/examples/lightbox-gallery.amp.html b/examples/lightbox-gallery.amp.html
index c4ce7bd5a2b1b..5ce4d04409cc6 100644
--- a/examples/lightbox-gallery.amp.html
+++ b/examples/lightbox-gallery.amp.html
@@ -14,6 +14,10 @@
         max-width: 400px;
         margin-bottom: 100px;
       }
+      .amp-lightbox-gallery-caption{
+        color: red;
+        font-size: 30px;
+      }
     </style>
   </head>
   <body>
@@ -43,6 +47,47 @@ <h2>AMP lightbox gallery with just regualar old jpgs.</h2>
     >
     </amp-img>
 
+    <h2>AMP lightbox gallery with caption styling.</h2>
+    <p>We set captions to be colored red and have a 30px font size.</p>
+    <div class="container" style="display: flex">
+      <figure class="dog-walking-caption">
+        <amp-img
+          lightbox
+          src="https://picsum.photos/id/494/400/400.jpg"
+          layout="fixed"
+          width="400"
+          height="400"
+        ></amp-img>
+        <figcaption>
+          Let's walk the dog.
+        </figcaption>
+      </figure>
+      <figure class="desert-caption">
+        <amp-img
+          lightbox="caption"
+          src="https://picsum.photos/id/525/400/400.jpg"
+          layout="fixed"
+          width="400"
+          height="400"
+        ></amp-img>
+        <figcaption>
+          This is the desert.
+        </figcaption>
+      </figure>
+      <figure class="door-caption">
+        <amp-img
+          lightbox
+          src="https://picsum.photos/id/78/400/400.jpg"
+          layout="fixed"
+          width="400"
+          height="400"
+        ></amp-img>
+        <figcaption>
+          This is a door.
+        </figcaption>
+      </figure>
+    </div>
+
     <h2>AMP lightbox gallery with webp and jpeg fallback.</h2>
     <p>This doesnt work in browsers that doesnt support webp</p>
     <amp-img
diff --git a/examples/list.example.json b/examples/list.example.json
index 15c767b45bdca..11a4ea9e584ae 100644
--- a/examples/list.example.json
+++ b/examples/list.example.json
@@ -19,6 +19,9 @@
       "title": "amp-accordion",
       "url": "/components/amp-accordion/",
       "image": "img/ampicon.png"
+    },
+    {
+      "html": "<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><amp-img layout=\"responsive\" src=\"img/ampicon.png\" width=\"50\" height=\"50\" alt=\"\"></amp-img>"
     }
   ],
   "next": "./list.example.json"
diff --git a/examples/live-list-update-reverse.amp.html b/examples/live-list-update-reverse.amp.html
index ab70df1963434..fcbbb389cc31f 100644
--- a/examples/live-list-update-reverse.amp.html
+++ b/examples/live-list-update-reverse.amp.html
@@ -168,4 +168,3 @@
   <p>the quick brown fox</p>
 </body>
 </html>
-
diff --git a/examples/live-list-update.amp.html b/examples/live-list-update.amp.html
index 6ac78f965465c..6d0ede37aba5a 100644
--- a/examples/live-list-update.amp.html
+++ b/examples/live-list-update.amp.html
@@ -156,4 +156,3 @@
   </amp-live-list>
 </body>
 </html>
-
diff --git a/examples/lots-of-images.amp.html b/examples/lots-of-images.amp.html
index cfc114c99ebbe..fadf611ff3bed 100644
--- a/examples/lots-of-images.amp.html
+++ b/examples/lots-of-images.amp.html
@@ -21,7 +21,7 @@ <h1>Lots of images</h1>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <h2>Even more</h2>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -32,7 +32,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -43,7 +43,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -54,7 +54,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -65,7 +65,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -76,7 +76,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -87,7 +87,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -98,7 +98,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -109,7 +109,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -120,7 +120,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <!-- 100 -->
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -132,7 +132,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -143,7 +143,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -154,7 +154,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -165,7 +165,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -176,7 +176,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -187,7 +187,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -198,7 +198,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -209,7 +209,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -220,7 +220,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -231,7 +231,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <!-- 100 -->
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -243,7 +243,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -254,7 +254,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -265,7 +265,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -276,7 +276,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -287,7 +287,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -298,7 +298,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -309,7 +309,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -320,7 +320,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -331,7 +331,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -342,7 +342,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <!-- 100 -->
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -354,7 +354,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -365,7 +365,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -376,7 +376,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -387,7 +387,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -398,7 +398,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -409,7 +409,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -420,7 +420,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -431,7 +431,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -442,7 +442,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -453,7 +453,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <!-- 100 -->
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -465,7 +465,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -476,7 +476,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -487,7 +487,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -498,7 +498,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -509,7 +509,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -520,7 +520,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -531,7 +531,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -542,7 +542,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -553,7 +553,7 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
@@ -564,6 +564,6 @@ <h2>Even more</h2>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
   <amp-img src="img/ampicon.png" layout="fixed" height="50" width="50"></amp-img>
- 
+
 </body>
 </html>
\ No newline at end of file
diff --git a/examples/masking.amp.html b/examples/masking.amp.html
index 7657777e13161..adffb2cceda98 100644
--- a/examples/masking.amp.html
+++ b/examples/masking.amp.html
@@ -29,13 +29,13 @@ <h2>Mask with amp-state</h2>
           on="change:AMP.setState({maskedValue: event.value})"
           name="statemask"
           mask="000-000-000"
-          mask-output="alphanumeric" 
+          mask-output="alphanumeric"
           placeholder="Type some numbers..."
       /></label>
       <input type="submit">
       <div submit-success>
         <template type="amp-mustache">
-          {{statemask}}, 
+          {{statemask}},
           {{statemask-unmasked}}
         </template>
       </div>
diff --git a/examples/megaphone.amp.html b/examples/megaphone.amp.html
index 85f05d288e6c1..363a1df7ff6c2 100644
--- a/examples/megaphone.amp.html
+++ b/examples/megaphone.amp.html
@@ -5,7 +5,6 @@
   <title>Megaphone examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-megaphone" src="https://cdn.ampproject.org/v0/amp-megaphone-0.1.js"></script>
   <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -46,7 +45,7 @@ <h2>Megaphone Episode (Disabled sharing controls)</h2>
     layout="fixed-height"
     data-episode="OSC7749686951"
     data-sharing="false"></amp-megaphone>
-  
+
   <h2>Megaphone Playlist (With limited number of episodes)</h2>
   <amp-megaphone height="450"
     layout="fixed-height"
diff --git a/examples/mraid/mraid.js b/examples/mraid/mraid.js
index 7dc381ffdbdc8..4a6caf5f84af5 100644
--- a/examples/mraid/mraid.js
+++ b/examples/mraid/mraid.js
@@ -1,7 +1,22 @@
+/**
+ * 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.
+ */
 // Fake mraid.js that lets us pretend to be in a mobile app environment.
 window.mraid = {};
-console.log("initiate marid object");
-window.mraid.getState = function() {
+console.log('initiate marid object');
+window.mraid.getState = function () {
   return Math.random() < 0.5 ? 'ready' : 'loading';
 };
 const visibleRect = {
@@ -12,16 +27,16 @@ const visibleRect = {
   top: 0,
   width: 5,
   x: 0,
-  y: 0
-}
-window.mraid.addEventListener = function(event, callback) {
+  y: 0,
+};
+window.mraid.addEventListener = function (event, callback) {
   console.log('fake addEventListener API');
   console.log('event is ', event);
   if (event === 'ready') {
     window.setTimeout(callback, 1000);
   } else if (event === 'exposureChange') {
     console.log('the callback is ', callback);
-    window.setTimeout(function() {
+    window.setTimeout(function () {
       console.log('mraid.js about to call exposureChange callback');
       callback(70, visibleRect, null);
       mockVisible(callback, 50.5, 200);
@@ -31,13 +46,13 @@ window.mraid.addEventListener = function(event, callback) {
     console.log('unknown event ' + event);
   }
 };
-window.mraid.close = function() {
+window.mraid.close = function () {
   console.log('close');
 };
 window.mraid.open = function (url) {
   console.log('open ' + url);
 };
-window.mraid.expand = function() {
+window.mraid.expand = function () {
   console.log('expand');
 };
 
diff --git a/examples/nexxtv-player.amp.html b/examples/nexxtv-player.amp.html
index b6a0266158e69..3ea17ac021f65 100644
--- a/examples/nexxtv-player.amp.html
+++ b/examples/nexxtv-player.amp.html
@@ -18,9 +18,8 @@ <h2>Nexxtv Player</h2>
       data-mediaid="PTPFEC4U184674"
       data-client="583"
       data-streamtype="video"
-      data-seek-to="10"
       data-mode="static"
-      data-origin="https://embed.nexx.cloud/"
+      data-exit-mode="replay"
       layout="responsive"
       width="480" height="270"
   ></amp-nexxtv-player>
diff --git a/examples/o2player.amp.html b/examples/o2player.amp.html
index ee601c2ef065e..e7934870b40cf 100644
--- a/examples/o2player.amp.html
+++ b/examples/o2player.amp.html
@@ -5,7 +5,6 @@
   <title>O2Player examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <script async custom-element="amp-o2-player" src="https://cdn.ampproject.org/v0/amp-o2-player-0.1.js"></script>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -30,4 +29,3 @@ <h2>O2Player</h2>
 
 </body>
 </html>
-
diff --git a/examples/old-boilerplate.amp.html b/examples/old-boilerplate.amp.html
index 1ca3c5bfcd6a1..4a1b91120363e 100644
--- a/examples/old-boilerplate.amp.html
+++ b/examples/old-boilerplate.amp.html
@@ -5,7 +5,6 @@
   <title>Twitter examples</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
diff --git a/examples/onetap.amp.html b/examples/onetap.amp.html
new file mode 100644
index 0000000000000..e423b45df5ff1
--- /dev/null
+++ b/examples/onetap.amp.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>Google One Tap Example</title>
+    <link rel="canonical" href="amps.html" />
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,initial-scale=1"
+    />
+    <script
+      async
+      custom-element="amp-onetap-google"
+      src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"
+    ></script>
+    <script
+      async
+      custom-element="amp-access"
+      src="https://cdn.ampproject.org/v0/amp-access-0.1.js"
+    ></script>
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <style amp-custom>
+      body {
+        font-family: sans-serif;
+        min-height: 100vh;
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+
+    <!-- This amp-access configuration will be refreshed once login is completed. -->
+    <script id="amp-access" type="application/json">
+      {}
+    </script>
+  </head>
+  <body>
+    <h2>Google One Tap</h2>
+
+    <amp-img
+      src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n"
+      width="400"
+      height="300"
+      layout="responsive"
+    >
+    </amp-img>
+
+    <amp-onetap-google
+      layout="nodisplay"
+      data-src="https://gis-pay.appspot.com/onetap_iframe.html"
+    >
+    </amp-onetap-google>
+  </body>
+</html>
diff --git a/examples/pinterest.amp.html b/examples/pinterest.amp.html
index 64645828d81ef..fb92ea0350949 100644
--- a/examples/pinterest.amp.html
+++ b/examples/pinterest.amp.html
@@ -5,7 +5,6 @@
   <title>Pinterest examples</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
   <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>
@@ -44,7 +43,7 @@ <h3>Embedded Pins - chinese</h3>
       data-do="embedPin"
       data-url="https://www.pinterest.com/pin/192740059037785029/">
     </amp-pinterest>
-  
+
   <h3>Embedded Pins - responsive</h3>
 
     <div style="width: 320px; float: left;">
@@ -525,5 +524,13 @@ <h4>Follow Button</h4>
       data-label="Zack Argyle">
     </amp-pinterest>
 
+  <h4>Far Down a Page Embed with incorrect height</h4>
+
+    <amp-pinterest width=355 height=200
+      data-do="embedPin"
+      data-width="medium"
+      data-url="https://www.pinterest.com/pin/99360735500167749/">
+    </amp-pinterest>
+
   </body>
 </html>
diff --git a/examples/playbuzz.amp.html b/examples/playbuzz.amp.html
index fde5148317ebd..6dfc1a17c26c7 100644
--- a/examples/playbuzz.amp.html
+++ b/examples/playbuzz.amp.html
@@ -5,7 +5,6 @@
   <title>playbuzz examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-playbuzz" src="../dist/v0/amp-playbuzz-0.1.max.js"></script>
 
   <style amp-custom>
diff --git a/examples/powr-player.amp.html b/examples/powr-player.amp.html
index 09b7ec13d4cd6..3cb7935617149 100644
--- a/examples/powr-player.amp.html
+++ b/examples/powr-player.amp.html
@@ -12,7 +12,7 @@
   <style amp-custom>
     body {
       max-width: 527px;
-      font-family: 'Questrial', Arial;
+      font-family: Arial;
     }
     .spacer {
       height: 100vh;
diff --git a/examples/pwa/pwa-sw.js b/examples/pwa/pwa-sw.js
index 496d4cab5e9b0..35c1ffa290d54 100644
--- a/examples/pwa/pwa-sw.js
+++ b/examples/pwa/pwa-sw.js
@@ -16,10 +16,9 @@
 
 'use strict';
 
-self.addEventListener('install', event => {
-});
+self.addEventListener('install', (event) => {});
 
-self.addEventListener('fetch', event => {
+self.addEventListener('fetch', (event) => {
   // TODO(dvoytenko): use cache, implement one-behind.
   if (event.request.url.indexOf('amp.html') != -1) {
     // Override response with the shell unless the leaf document is explicitly
diff --git a/examples/pwa/pwa.js b/examples/pwa/pwa.js
index 4bc6408eae146..e629a776387c5 100644
--- a/examples/pwa/pwa.js
+++ b/examples/pwa/pwa.js
@@ -19,7 +19,8 @@
 function log(args) {
   var var_args = Array.prototype.slice.call(arguments, 0);
   var_args.unshift('[SHELL]');
-  console/*OK*/.log.apply(console, var_args);
+  console /*OK*/.log
+    .apply(console, var_args);
 }
 
 function startsWith(string, prefix) {
@@ -35,8 +36,10 @@ class Shell {
     this.useStreaming_ = useStreaming;
 
     /** @private @const {!AmpViewer} */
-    this.ampViewer_ = new AmpViewer(win,
-        win.document.getElementById('doc-container'));
+    this.ampViewer_ = new AmpViewer(
+      win,
+      win.document.getElementById('doc-container')
+    );
 
     /** @private {string} */
     this.currentPage_ = win.location.pathname;
@@ -44,8 +47,10 @@ class Shell {
     this.sidebarCloseButton_ = document.querySelector('#sidebarClose');
 
     win.addEventListener('popstate', this.handlePopState_.bind(this));
-    win.document.documentElement.addEventListener('click',
-        this.handleNavigate_.bind(this));
+    win.document.documentElement.addEventListener(
+      'click',
+      this.handleNavigate_.bind(this)
+    );
 
     log('Shell created');
 
@@ -67,18 +72,21 @@ class Shell {
   registerServiceWorker_() {
     if ('serviceWorker' in navigator) {
       log('Register service worker');
-      navigator.serviceWorker.register('/pwa/pwa-sw.js').then(reg => {
-        log('Service worker registered: ', reg);
-      }).catch(err => {
-        log('Service worker registration failed: ', err);
-      });
+      navigator.serviceWorker
+        .register('/pwa/pwa-sw.js')
+        .then((reg) => {
+          log('Service worker registered: ', reg);
+        })
+        .catch((err) => {
+          log('Service worker registration failed: ', err);
+        });
     }
   }
 
   unregisterServiceWorker_() {
     if ('serviceWorker' in navigator) {
       log('Register service worker');
-      navigator.serviceWorker.getRegistration('/pwa/pwa-sw.js').then(reg => {
+      navigator.serviceWorker.getRegistration('/pwa/pwa-sw.js').then((reg) => {
         log('Service worker found: ', reg);
         reg.unregister();
         log('Service worker unregistered');
@@ -105,10 +113,12 @@ class Shell {
     }
     if (a) {
       const url = new URL(a.href);
-      const location = this.win.location;
-      if (url.origin == location.origin &&
-          startsWith(url.pathname, '/pwa/') &&
-          url.pathname.indexOf('amp.html') != -1) {
+      const {location} = this.win;
+      if (
+        url.origin == location.origin &&
+        startsWith(url.pathname, '/pwa/') &&
+        url.pathname.indexOf('amp.html') != -1
+      ) {
         e.preventDefault();
         const newPage = url.pathname + location.search;
         log('Internal link to: ', newPage);
@@ -119,8 +129,6 @@ class Shell {
     }
   }
 
-  /**
-   */
   handlePopState_() {
     const newPage = this.win.location.pathname;
     log('Pop state: ', newPage, this.currentPage_);
@@ -161,10 +169,11 @@ class Shell {
     // streaming is graduated out of experimental.
     if (this.useStreaming_) {
       log('Streaming started: ', url);
-      return this.ampViewer_.showAsStream(url).then(
-          shadowDoc => streamDocument(url, shadowDoc.writer));
+      return this.ampViewer_
+        .showAsStream(url)
+        .then((shadowDoc) => streamDocument(url, shadowDoc.writer));
     }
-    return fetchDocument(url).then(doc => {
+    return fetchDocument(url).then((doc) => {
       log('Fetch complete: ', doc);
       return this.ampViewer_.show(doc, url);
     });
@@ -184,7 +193,7 @@ class Shell {
 
   closeSidebar() {
     if (this.sidebarCloseButton_) {
-      return new Promise(resolve => {
+      return new Promise((resolve) => {
         this.sidebarCloseButton_.click();
         // TODO implement a better method to detect when
         // closing sidebar has finished
@@ -196,9 +205,7 @@ class Shell {
   }
 }
 
-
 class AmpViewer {
-
   constructor(win, container) {
     /** @private @const {!Window} */
     this.win = win;
@@ -206,21 +213,21 @@ class AmpViewer {
     this.container = container;
 
     win.AMP_SHADOW = true;
-    const ampReadyPromise = new Promise(resolve => {
+    const ampReadyPromise = new Promise((resolve) => {
       (window.AMP = window.AMP || []).push(resolve);
     });
-    ampReadyPromise.then(AMP => {
+    ampReadyPromise.then((AMP) => {
       log('AMP LOADED:', AMP);
     });
 
-    const isShadowDomSupported = (
-      Element.prototype.attachShadow ||
-      Element.prototype.createShadowRoot
-    );
+    const isShadowDomSupported =
+      Element.prototype.attachShadow || Element.prototype.createShadowRoot;
     const shadowDomReadyPromise = new Promise((resolve, reject) => {
       if (isShadowDomSupported) {
         resolve();
-      } else if (this.win.document.querySelector('script[src*=webcomponents]')) {
+      } else if (
+        this.win.document.querySelector('script[src*=webcomponents]')
+      ) {
         this.win.addEventListener('WebComponentsReady', resolve);
       } else {
         // AMP polyfills small part of SD spec. It's functional, but some things
@@ -232,7 +239,7 @@ class AmpViewer {
     this.readyPromise_ = Promise.all([
       ampReadyPromise,
       shadowDomReadyPromise,
-    ]).then(results => results[0]);
+    ]).then((results) => results[0]);
 
     /** @private @const {string} */
     this.baseUrl_ = null;
@@ -245,8 +252,6 @@ class AmpViewer {
     this.installScript_('/dist/shadow-v0.js', '/dist/amp-shadow.js');
   }
 
-  /**
-   */
   clear() {
     if (this.amp_) {
       this.amp_.close();
@@ -277,7 +282,7 @@ class AmpViewer {
 
     this.container.appendChild(this.host_);
 
-    return this.readyPromise_.then(AMP => {
+    return this.readyPromise_.then((AMP) => {
       this.amp_ = AMP.attachShadowDoc(this.host_, doc, url, {});
       this.win.document.title = this.amp_.title || '';
       this.amp_.onMessage(this.onMessage_.bind(this));
@@ -307,7 +312,7 @@ class AmpViewer {
 
     this.container.appendChild(this.host_);
 
-    return this.readyPromise_.then(AMP => {
+    return this.readyPromise_.then((AMP) => {
       this.amp_ = AMP.attachShadowDocAsStream(this.host_, url, {});
       this.win.document.title = this.amp_.title || '';
       this.amp_.onMessage(this.onMessage_.bind(this));
@@ -339,7 +344,12 @@ class AmpViewer {
       log('- script failed to load: ', src, el);
       doc.head.removeChild(el);
       if (fallbackSrc) {
-        this.installScript_(fallbackSrc, undefined, customElement, customTemplate);
+        this.installScript_(
+          fallbackSrc,
+          undefined,
+          customElement,
+          customTemplate
+        );
       }
     };
     doc.head.appendChild(el);
@@ -361,22 +371,17 @@ class AmpViewer {
     return new URL(relativeUrlString, this.baseUrl_).origin;
   }
 
-  /**
-   */
-  onMessage_(type, data, rsvp) {
-  }
+  onMessage_(type, data, rsvp) {}
 }
 
-
 /**
  * @param {string} url
  * @return {boolean}
  */
 function isShellUrl(url) {
-  return (url == '/pwa' || url == '/pwa/');
+  return url == '/pwa' || url == '/pwa/';
 }
 
-
 /**
  * @param {string} url
  * @return {!Promise<!Document>}
@@ -414,7 +419,6 @@ function fetchDocument(url) {
   });
 }
 
-
 /**
  * @param {string} url
  * @param {!WritableStreamDefaultWriter} writer
@@ -423,16 +427,16 @@ function fetchDocument(url) {
 function streamDocument(url, writer) {
   // Try native first.
   if (window.fetch && window.TextDecoder && window.ReadableStream) {
-    return fetch(url).then(response => {
+    return fetch(url).then((response) => {
       // This should be a lot simpler with transforming streams and pipes,
       // but, TMK, these are not supported anywhere yet.
-      const /** !ReadableStreamDefaultReader */ reader = response.body
-          .getReader();
+      const /** !ReadableStreamDefaultReader */ reader =
+          response.body.getReader();
       const decoder = new TextDecoder();
       function readChunk(chunk) {
-        const text = decoder.decode(
-            chunk.value || new Uint8Array(),
-            {stream: !chunk.done});
+        const text = decoder.decode(chunk.value || new Uint8Array(), {
+          stream: !chunk.done,
+        });
         if (text) {
           writer.write(text);
         }
@@ -461,8 +465,10 @@ function streamDocument(url, writer) {
         reject(new Error(`Unknown HTTP status ${xhr.status}`));
         return;
       }
-      if (xhr.readyState == /* LOADING */ 3 ||
-          xhr.readyState == /* COMPLETE */ 4) {
+      if (
+        xhr.readyState == /* LOADING */ 3 ||
+        xhr.readyState == /* COMPLETE */ 4
+      ) {
         const s = xhr.responseText;
         const chunk = s.substring(pos);
         pos = s.length;
@@ -482,7 +488,6 @@ function streamDocument(url, writer) {
   });
 }
 
-
 /**
  * Parses the query string of an URL. This method returns a simple key/value
  * map. If there are duplicate keys the latest value is returned.
@@ -517,5 +522,4 @@ function parseQueryString(queryString) {
   return params;
 }
 
-
 var shell = new Shell(window, /* useStreaming */ true);
diff --git a/examples/reach-player.amp.html b/examples/reach-player.amp.html
index 9b3c3a68cb657..c2090ea934e35 100644
--- a/examples/reach-player.amp.html
+++ b/examples/reach-player.amp.html
@@ -49,4 +49,3 @@ <h3>Video distribution, for everybody.</h3>
 
 </body>
 </html>
-
diff --git a/examples/reddit.amp.html b/examples/reddit.amp.html
index 154bc5c6e3e2d..f7f6fbff0f6e8 100644
--- a/examples/reddit.amp.html
+++ b/examples/reddit.amp.html
@@ -5,7 +5,6 @@
   <title>Reddit examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <script async custom-element="amp-reddit" src="https://cdn.ampproject.org/v0/amp-reddit-0.1.js"></script>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/examples/refresh.amp.html b/examples/refresh.amp.html
index 237ce60126246..b8731f31a0f48 100644
--- a/examples/refresh.amp.html
+++ b/examples/refresh.amp.html
@@ -6,7 +6,6 @@
     <link rel="canonical" href="http://nonblocking.io/" >
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
     <meta name="amp-ad-enable-refresh" content="doubleclick=30">
-    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
diff --git a/examples/responsive-menu.amp.html b/examples/responsive-menu.amp.html
index 4eb94643b7ab1..e450963703abb 100644
--- a/examples/responsive-menu.amp.html
+++ b/examples/responsive-menu.amp.html
@@ -5,7 +5,6 @@
   <title>AMP responsive menu example</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <meta name="amp-experiments-opt-in" content="amp-mega-menu">
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-mega-menu" src="https://cdn.ampproject.org/v0/amp-mega-menu-0.1.js"></script>
   <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
diff --git a/examples/runtime/README.md b/examples/runtime/README.md
index f0140e404a119..91fe6cab388ce 100644
--- a/examples/runtime/README.md
+++ b/examples/runtime/README.md
@@ -1,7 +1,7 @@
 # Runtime performance examples
 
-This folder contains example pages owned by [@wg-runtime](https://github.com/ampproject/wg-runtime), and made for testing performance with `gulp performance`
+This folder contains example pages owned by [@wg-performance](https://github.com/ampproject/wg-performance), and made for testing performance with `amp performance`
 
-- **images.html**: This page has 1000 images. It is a good stress test for the resources system as we want to ensure it prioritizes 1vp elements over other elements within the loadRect.
-- **list-always.html**: This page contains the slowest form of an `<amp-list>`, namely one with `binding="always"`.
-- **article.html**: Meant to be as similar to a standard AMP article as possible. Contains the most used components.
+-   **images.html**: This page has 1000 images. It is a good stress test for the resources system as we want to ensure it prioritizes 1vp elements over other elements within the loadRect.
+-   **list-always.html**: This page contains the slowest form of an `<amp-list>`, namely one with `binding="always"`.
+-   **article.html**: Meant to be as similar to a standard AMP article as possible. Contains the most used components.
diff --git a/examples/runtime/article.html b/examples/runtime/article.html
index c0dc0e34a7b62..1e44c611e40b8 100644
--- a/examples/runtime/article.html
+++ b/examples/runtime/article.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 
-  <style amp-custom> 
+  <style amp-custom>
     .brand-logo {
       max-width: 1000px;
       min-width: 400px;
@@ -50,7 +50,7 @@
 
     .author p {
       margin: 5px;
-    } 
+    }
 
     #author-avatar {
       width: 16px;
@@ -68,7 +68,7 @@
       height: 226px;
       background: #f4f4f4;
     }
-    
+
     amp-sidebar {
       width: 200px;
       background: white;
@@ -129,8 +129,8 @@
   <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
   <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
   <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
-  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script> 
-  <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script> 
+  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
+  <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
   <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
   <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
   <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>
@@ -170,7 +170,7 @@ <h1 itemprop="headline">Headline of the article</h1>
         itemprop="author"><b>Lorem Ipsum</b></span></div>
         <time class="header-time" itemprop="datePublished"
             datetime="2015-09-14 13:00">September 14, 2015</time>
-        <amp-social-share type="twitter" height=30></amp-social-share> 
+        <amp-social-share type="twitter" height=30></amp-social-share>
       </header>
       <figure>
         <amp-img id="hero-img"
@@ -187,7 +187,7 @@ <h1 itemprop="headline">Headline of the article</h1>
           Fusce pretium tempor justo, vitae.
         </figcaption>
       </figure>
-      
+
       <amp-accordion id="my-accordion" disable-session-states>
         <section>
           <h2>Section 1</h2>
@@ -212,7 +212,7 @@ <h2>Section 3</h2>
             src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w300-h200-no"
             width="300" height="200">
         </amp-anim>
-      </amp-carousel> 
+      </amp-carousel>
 
       <div class="content-container">
         <div class="jump-to">
@@ -374,7 +374,7 @@ <h3>Jump To</h3>
               data-aax_src="302">
             </amp-ad>
           </div>
-          
+
           <figure>
             <amp-youtube
               data-videoid="mGENRKrdoGY"
@@ -398,13 +398,13 @@ <h3>Jump To</h3>
             torquent per conubia nostra, per inceptos himenaeos.
           </p>
         </div>
-      </div> 
+      </div>
     </article>
   </main>
 
   <footer>
     <div class="brand-logo">
-      <amp-img 
+      <amp-img
         height=479
         width=958
         layout="responsive"
diff --git a/examples/runtime/images.html b/examples/runtime/images.html
index bd7abc7b59fca..82258b13229c6 100644
--- a/examples/runtime/images.html
+++ b/examples/runtime/images.html
@@ -1009,7 +1009,6 @@
   <amp-img src="../img/hero@1x.jpg?996" width="289" height="216"></amp-img>
   <amp-img src="../img/hero@1x.jpg?997" width="289" height="216"></amp-img>
   <amp-img src="../img/hero@1x.jpg?998" width="289" height="216"></amp-img>
-  <amp-img src="../img/hero@1x.jpg?999" width="289" height="216"></amp-img> 
+  <amp-img src="../img/hero@1x.jpg?999" width="289" height="216"></amp-img>
 </body>
 </html>
-
diff --git a/examples/runtime/list-always.html b/examples/runtime/list-always.html
index e852ac98f5277..ed206cfd15c46 100644
--- a/examples/runtime/list-always.html
+++ b/examples/runtime/list-always.html
@@ -10,7 +10,7 @@
   <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
   <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" ></script>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head> 
+</head>
 <body>
   <amp-state id="nameMap">
     <script type="application/json">
@@ -30,4 +30,3 @@
   </amp-list>
 </body>
 </html>
-
diff --git a/examples/selector.amp.html b/examples/selector.amp.html
index 70983238420b8..b0318c55babd2 100644
--- a/examples/selector.amp.html
+++ b/examples/selector.amp.html
@@ -9,14 +9,67 @@
   <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>
   <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-1.0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-latest.js"></script>
+  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
   <script>
     (self.AMP = self.AMP || []).push(function(AMP) {
       AMP.toggleExperiment('amp-selector-bento', true);
     });
-</script>
+  </script>
+  <style amp-custom>
+    .radio-selector [option] {
+      display: flex;
+      align-items: center;
+    }
+    .radio-selector [option]:before {
+      transition: background 0.25s ease-in-out;
+      content: "";
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      margin: 4px;
+      border-radius: 100%;
+      border: solid 1px blue;
+    }
+    .radio-selector [option][selected]:before {
+      text-align: center;
+      content: "✓";
+      color: white;
+      background-color: blue;
+    }
+  </style>
 </head>
 <body>
-    <h1>Selector Examples</h1>
+    <h2>Form Select</h2>
+    <form id="myForm" method="post" action-xhr="/form/echo-json/post" target="_blank">
+      <amp-selector class="radio-selector"
+        name="selectorInput"
+        layout="container" multiple
+        name="my-selector">
+        <div option="a">Option A</div>
+        <div option="b">Option B</div>
+        <div option="c">Option C</div>
+      </amp-selector>
+      <button>Submit</button>
+      <div submit-success>
+        <template type="amp-mustache">
+          Success! {{selectorInput}}, {{selectorInput2}}
+        </template>
+      </div>
+    </form>
+
+    <h2>More Form Options</h2>
+    <amp-selector class="radio-selector"
+      form="myForm"
+      name="selectorInput2"
+      layout="container" multiple
+      name="my-selector">
+      <div option="d" selected>Option D</div>
+      <div option="e">Option E</div>
+      <div option="f">Option F</div>
+    </amp-selector>
+
+    <h2>Img Select</h2>
     <amp-selector class="sample-selector" layout="container">
       <amp-img
         src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
@@ -79,7 +132,7 @@ <h2>Multi Select</h2>
         <li option="4">Option 4</li>
     </ul>
     </amp-selector>
-    
+
     <p
       [text]="multiTarget == NULL ? 'Nothing selected yet.' : 'Selected target: ' + multiTarget + '. All selections: ' + multiSelections"
     >
diff --git a/examples/share-tracking-with-url.amp.html b/examples/share-tracking-with-url.amp.html
deleted file mode 100644
index a6dc1a646c8c8..0000000000000
--- a/examples/share-tracking-with-url.amp.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Share tracking examples</title>
-  <link rel="canonical" href="amps.html" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-share-tracking" src="https://cdn.ampproject.org/v0/amp-share-tracking-0.1.js"></script>
-</head>
-<body>
-  <amp-share-tracking data-href='http://localhost:8000/share-tracking/get-outgoing-fragment'>
-  </amp-share-tracking>
-  <p>Hello</p>
-  <amp-pixel src="https://foo.bar/?incoming=SHARE_TRACKING_INCOMING&outgoing=SHARE_TRACKING_OUTGOING"></amp-pixel>
-</body>
-</html>
diff --git a/examples/share-tracking.amp.html b/examples/share-tracking.amp.html
deleted file mode 100644
index 3474be3955947..0000000000000
--- a/examples/share-tracking.amp.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Share tracking examples</title>
-  <link rel="canonical" href="amps.html" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-share-tracking" src="https://cdn.ampproject.org/v0/amp-share-tracking-0.1.js"></script>
-</head>
-<body>
-  <amp-share-tracking>
-  </amp-share-tracking>
-  <p>Hello</p>
-</body>
-</html>
diff --git a/examples/sidebar.amp.html b/examples/sidebar.amp.html
index 3311cad30d7f5..53680caf95ed9 100644
--- a/examples/sidebar.amp.html
+++ b/examples/sidebar.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <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>
     body {
diff --git a/examples/social-share.amp.html b/examples/social-share.amp.html
index bf44c2fb0870d..8b4563f4b7eb5 100644
--- a/examples/social-share.amp.html
+++ b/examples/social-share.amp.html
@@ -18,12 +18,12 @@
     </script>
     <script>
       (self.AMP = self.AMP || []).push(AMP => {
-        AMP.toggleExperiment('amp-social-share-v2', true);
+        AMP.toggleExperiment('amp-social-share-bento', true);
       });
     </script>
     <script
       custom-element="amp-social-share"
-      src="https://cdn.ampproject.org/v0/amp-social-share-0.2.js"
+      src="https://cdn.ampproject.org/v0/amp-social-share-1.0.js"
       async
     ></script>
     <style amp-custom>
diff --git a/examples/soundcloud.amp.html b/examples/soundcloud.amp.html
index 2dafc90c3270c..d0fe14450d42e 100644
--- a/examples/soundcloud.amp.html
+++ b/examples/soundcloud.amp.html
@@ -5,7 +5,6 @@
   <title>Soundcloud examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>
   <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/examples/springboard-player.amp.html b/examples/springboard-player.amp.html
index eb5a477977f5a..4789ca013df27 100644
--- a/examples/springboard-player.amp.html
+++ b/examples/springboard-player.amp.html
@@ -8,7 +8,7 @@
   <script async custom-element="amp-springboard-player" src="https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js"></script>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
-  
+
 </head>
 <body>
   <h2>Springboard Player</h2>
diff --git a/examples/sticky.ads.amp.html b/examples/sticky.ads.amp.html
index 058a13cfc2ff0..89c9ddf0adabd 100644
--- a/examples/sticky.ads.amp.html
+++ b/examples/sticky.ads.amp.html
@@ -214,7 +214,7 @@
           data-persist-dismissal="false">
     This notification should ALSO ALWAYS show.
     <a href="#learn-more">Learn more.</a>
-    <button on="tap:amp-user-notification6.dismiss" role="button" tabindex="5">Dismiss</button>
+    <button on="tap:amp-user-notification6.dismiss" tabindex="5">Dismiss</button>
   </amp-user-notification>
 
 
diff --git a/examples/test-fly-in.amp.html b/examples/test-fly-in.amp.html
index 0f94b647c47bd..34156a97ea8fa 100644
--- a/examples/test-fly-in.amp.html
+++ b/examples/test-fly-in.amp.html
@@ -25,130 +25,130 @@ <h1>Welcome to the mobile web</h1>
     <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
-    
+
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
 
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
-    
+
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
 
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
-    
+
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
 
       <div amp-fx="fly-in-left" data-duration="2000ms" style="border: 2px red solid">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </div>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
-    
+
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
 
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
-    
+
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
 
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
-    
+
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
 
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
-    
+
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
 
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
-    
+
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores impedit commodi facilis doloribus architecto perferendis eaque rem minima unde est libero nisi blanditiis vero, voluptatum mollitia alias quasi saepe odio?
       </p>
-    
+
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptate commodi consectetur dolorem et in consequatur debitis earum iure id deserunt dignissimos, quaerat modi, odio culpa quia? Earum, officiis error.</p>
-    
+
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore sapiente nisi fuga, totam illum, est repellat impedit suscipit possimus aliquam consectetur nesciunt corporis atque obcaecati? Quos, repudiandae recusandae? Vitae, dolore?</p>
-    
+
   </body>
 </html>
\ No newline at end of file
diff --git a/examples/timeago.amp.html b/examples/timeago.amp.html
new file mode 100644
index 0000000000000..1bad7ebc6781b
--- /dev/null
+++ b/examples/timeago.amp.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html amp4email data-css-strict>
+<head>
+  <meta charset="utf-8">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"></script>
+  <style amp4email-boilerplate>body{visibility:hidden}</style>
+  <style amp-custom>
+    body {
+      padding: 10px;
+    }
+    span {
+      display: flex;
+      font-family: sans-serif;
+      font-size: 12pt;
+    }
+  </style>
+</head>
+<body>
+  <h1>Bad</h1>
+  <span>
+    Something happened&nbsp;
+    <amp-timeago
+      layout="fixed"
+      width="160"
+      height="20"
+      datetime="2017-04-11T00:37:33.809Z"
+      locale="en"
+    >
+      Saturday 11 April 2017 00.37
+    </amp-timeago>
+  </span>
+
+  <h1>Better</h1>
+  <span>
+    Something happened&nbsp;
+    <amp-timeago
+      layout="fixed"
+      width="160"
+      height="20"
+      datetime="2017-04-11T00:37:33.809Z"
+      locale="en"
+      role="text"
+    >
+      Saturday 11 April 2017 00.37
+    </amp-timeago>
+  </span>
+
+  <h1>Another</h1>
+  <span>
+    Something happened&nbsp;
+    <span><time datetime="2017-04-11T00:37:33.809Z">3 years ago</time></span>
+  </span>
+</body>
+</html>
diff --git a/examples/twitter.amp.html b/examples/twitter.amp.html
index e0995d0272666..36dd0af332b02 100644
--- a/examples/twitter.amp.html
+++ b/examples/twitter.amp.html
@@ -5,7 +5,6 @@
   <title>Twitter examples</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
   <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>
diff --git a/examples/user-notification.amp.html b/examples/user-notification.amp.html
index 3650bf70c2698..476f7214d3d82 100644
--- a/examples/user-notification.amp.html
+++ b/examples/user-notification.amp.html
@@ -208,7 +208,7 @@
       data-dismiss-href="https://example.com/api/echo/post">
       This site uses cookies to personalize content.
       <a href="#learn-more">Learn more.</a>
-     <button on="tap:amp-user-notification1.dismiss" role="button" tabindex="0">I accept</button>
+     <button on="tap:amp-user-notification1.dismiss" tabindex="0">I accept</button>
   </amp-user-notification>
 
   <amp-user-notification
@@ -218,14 +218,14 @@
       data-dismiss-href="https://example.com/api/echo/post">
       notify 2
       <a href="#learn-more">Learn more.</a>
-     <button on="tap:amp-user-notification2.dismiss" role="button" tabindex="1">I accept</button>
+     <button on="tap:amp-user-notification2.dismiss" tabindex="1">I accept</button>
   </amp-user-notification>
 
   <amp-user-notification
       layout=nodisplay
       id="amp-user-notification3">
       This notification doesn't need remote endpoints.
-     <button on="tap:amp-user-notification3.dismiss" role="button" tabindex="2">I accept</button>
+     <button on="tap:amp-user-notification3.dismiss" tabindex="2">I accept</button>
   </amp-user-notification>
 
   <amp-user-notification
@@ -236,7 +236,7 @@
           data-dismiss-href="https://example.com/api/echo/post">
     This notification should ALWAYS show.
     <a href="#learn-more">Learn more.</a>
-    <button on="tap:amp-user-notification4.dismiss" role="button" tabindex="3">Dismiss</button>
+    <button on="tap:amp-user-notification4.dismiss" tabindex="3">Dismiss</button>
   </amp-user-notification>
 
   <amp-user-notification
@@ -247,7 +247,7 @@
           data-dismiss-href="https://example.com/api/echo/post">
     This notification should NEVER show.
     <a href="#learn-more">Learn more.</a>
-    <button on="tap:amp-user-notification5.dismiss" role="button" tabindex="4">Dismiss</button>
+    <button on="tap:amp-user-notification5.dismiss" tabindex="4">Dismiss</button>
   </amp-user-notification>
 
   <amp-user-notification
@@ -256,7 +256,7 @@
           data-persist-dismissal="false">
     This notification should ALSO ALWAYS show.
     <a href="#learn-more">Learn more.</a>
-    <button on="tap:amp-user-notification6.dismiss" role="button" tabindex="5">Dismiss</button>
+    <button on="tap:amp-user-notification6.dismiss" tabindex="5">Dismiss</button>
   </amp-user-notification>
 
   <header>
diff --git a/examples/valueimpression.amp.html b/examples/valueimpression.amp.html
new file mode 100644
index 0000000000000..127a1ebec211b
--- /dev/null
+++ b/examples/valueimpression.amp.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html ⚡>
+
+<head>
+  <meta charset="utf-8">
+  <title>Valueimpression Example</title>
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <style amp-custom>
+    amp-ad {
+      border: 1px solid #ccc;
+      max-width: 500px;
+    }
+
+  </style>
+  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+
+<body>
+  <h2>Valueimpression Example</h2>
+  <div>
+    <amp-ad width="300" height="250" type="valueimpression" rtc-config='{
+        "urls": [
+            "https://useast.quantumdex.io/amp?client=23&metadata=autoCollect&tagid=1234"
+        ]
+      }'>
+    </amp-ad>
+  </div>
+</body>
+
+</html>
diff --git a/examples/vega-data/us-10m.json b/examples/vega-data/us-10m.json
index cd150f99bb3f5..ed329dca83cd9 100644
--- a/examples/vega-data/us-10m.json
+++ b/examples/vega-data/us-10m.json
@@ -105,122 +105,15 @@
         [[105]],
         [
           [
-            106,
-            107,
-            108,
-            109,
-            110,
-            111,
-            112,
-            113,
-            114,
-            115,
-            116,
-            117,
-            118,
-            119,
-            120,
-            121,
-            122,
-            123,
-            124,
-            125,
-            126,
-            127,
-            128,
-            129,
-            130,
-            131,
-            132,
-            133,
-            134,
-            135,
-            136,
-            137,
-            138,
-            139,
-            140,
-            141,
-            142,
-            143,
-            144,
-            145,
-            146,
-            147,
-            148,
-            149,
-            150,
-            151,
-            152,
-            153,
-            154,
-            155,
-            156,
-            157,
-            158,
-            159,
-            160,
-            161,
-            162,
-            163,
-            164,
-            165,
-            166,
-            167,
-            168,
-            169,
-            170,
-            171,
-            172,
-            173,
-            174,
-            175,
-            176,
-            177,
-            178,
-            179,
-            180,
-            181,
-            182,
-            183,
-            184,
-            185,
-            186,
-            187,
-            188,
-            189,
-            190,
-            191,
-            192,
-            193,
-            194,
-            195,
-            196,
-            197,
-            198,
-            199,
-            200,
-            201,
-            202,
-            203,
-            204,
-            205,
-            206,
-            207,
-            208,
-            209,
-            210,
-            211,
-            212,
-            213,
-            214,
-            215,
-            216,
-            217,
-            218,
-            219,
-            220,
-            221
+            106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118,
+            119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131,
+            132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144,
+            145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157,
+            158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170,
+            171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183,
+            184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196,
+            197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209,
+            210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221
           ]
         ],
         [[222, 223]],
@@ -241,242 +134,25 @@
         [[241]],
         [
           [
-            242,
-            243,
-            244,
-            245,
-            246,
-            247,
-            248,
-            249,
-            250,
-            251,
-            252,
-            253,
-            254,
-            255,
-            256,
-            257,
-            258,
-            259,
-            260,
-            261,
-            262,
-            263,
-            264,
-            265,
-            266,
-            267,
-            268,
-            269,
-            270,
-            271,
-            272,
-            273,
-            274,
-            275,
-            276,
-            277,
-            278,
-            279,
-            280,
-            281,
-            282,
-            283,
-            284,
-            285,
-            286,
-            287,
-            288,
-            289,
-            290,
-            291,
-            292,
-            293,
-            294,
-            295,
-            296,
-            297,
-            298,
-            299,
-            300,
-            301,
-            302,
-            303,
-            304,
-            305,
-            306,
-            307,
-            308,
-            309,
-            310,
-            311,
-            312,
-            313,
-            314,
-            315,
-            316,
-            317,
-            318,
-            319,
-            320,
-            321,
-            322,
-            323,
-            324,
-            325,
-            326,
-            327,
-            328,
-            329,
-            330,
-            331,
-            332,
-            333,
-            334,
-            335,
-            336,
-            337,
-            338,
-            339,
-            340,
-            341,
-            342,
-            343,
-            344,
-            345,
-            346,
-            347,
-            348,
-            349,
-            350,
-            351,
-            352,
-            353,
-            354,
-            355,
-            356,
-            357,
-            358,
-            359,
-            360,
-            361,
-            362,
-            363,
-            364,
-            365,
-            366,
-            367,
-            368,
-            369,
-            370,
-            371,
-            372,
-            373,
-            374,
-            375,
-            376,
-            377,
-            378,
-            379,
-            380,
-            381,
-            382,
-            383,
-            384,
-            385,
-            386,
-            387,
-            388,
-            389,
-            390,
-            391,
-            392,
-            393,
-            394,
-            395,
-            396,
-            397,
-            398,
-            399,
-            400,
-            401,
-            402,
-            403,
-            404,
-            405,
-            406,
-            407,
-            408,
-            409,
-            410,
-            411,
-            412,
-            413,
-            414,
-            415,
-            416,
-            417,
-            418,
-            419,
-            420,
-            421,
-            422,
-            423,
-            424,
-            425,
-            426,
-            427,
-            428,
-            429,
-            430,
-            431,
-            432,
-            433,
-            434,
-            435,
-            436,
-            437,
-            438,
-            439,
-            440,
-            441,
-            442,
-            443,
-            444,
-            445,
-            446,
-            447,
-            448,
-            449,
-            450,
-            451,
-            452,
-            453,
-            454,
-            455,
-            456,
-            457,
-            458,
-            459,
-            460,
-            461,
-            462,
-            463,
-            464,
-            465,
-            466,
-            467,
-            468,
-            469,
-            470,
-            471,
-            472,
-            473,
-            474,
-            475,
-            476,
-            477
+            242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254,
+            255, 256, 257, 258, 259, 260, 261, 262, 263, 264, 265, 266, 267,
+            268, 269, 270, 271, 272, 273, 274, 275, 276, 277, 278, 279, 280,
+            281, 282, 283, 284, 285, 286, 287, 288, 289, 290, 291, 292, 293,
+            294, 295, 296, 297, 298, 299, 300, 301, 302, 303, 304, 305, 306,
+            307, 308, 309, 310, 311, 312, 313, 314, 315, 316, 317, 318, 319,
+            320, 321, 322, 323, 324, 325, 326, 327, 328, 329, 330, 331, 332,
+            333, 334, 335, 336, 337, 338, 339, 340, 341, 342, 343, 344, 345,
+            346, 347, 348, 349, 350, 351, 352, 353, 354, 355, 356, 357, 358,
+            359, 360, 361, 362, 363, 364, 365, 366, 367, 368, 369, 370, 371,
+            372, 373, 374, 375, 376, 377, 378, 379, 380, 381, 382, 383, 384,
+            385, 386, 387, 388, 389, 390, 391, 392, 393, 394, 395, 396, 397,
+            398, 399, 400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410,
+            411, 412, 413, 414, 415, 416, 417, 418, 419, 420, 421, 422, 423,
+            424, 425, 426, 427, 428, 429, 430, 431, 432, 433, 434, 435, 436,
+            437, 438, 439, 440, 441, 442, 443, 444, 445, 446, 447, 448, 449,
+            450, 451, 452, 453, 454, 455, 456, 457, 458, 459, 460, 461, 462,
+            463, 464, 465, 466, 467, 468, 469, 470, 471, 472, 473, 474, 475,
+            476, 477
           ],
           [478, 479, 480, 481, 482, 483, 484]
         ],
@@ -586,30 +262,8 @@
             [[103]],
             [
               [
-                604,
-                107,
-                605,
-                109,
-                606,
-                111,
-                607,
-                113,
-                608,
-                115,
-                609,
-                117,
-                610,
-                199,
-                611,
-                201,
-                612,
-                215,
-                613,
-                217,
-                614,
-                219,
-                615,
-                221
+                604, 107, 605, 109, 606, 111, 607, 113, 608, 115, 609, 117, 610,
+                199, 611, 201, 612, 215, 613, 217, 614, 219, 615, 221
               ]
             ],
             [[616, 223]],
@@ -646,31 +300,8 @@
             [[64]],
             [
               [
-                627,
-                274,
-                628,
-                276,
-                629,
-                278,
-                630,
-                280,
-                631,
-                632,
-                633,
-                634,
-                635,
-                -593,
-                636,
-                637,
-                638,
-                639,
-                -503,
-                640,
-                641,
-                642,
-                643,
-                644,
-                645
+                627, 274, 628, 276, 629, 278, 630, 280, 631, 632, 633, 634, 635,
+                -593, 636, 637, 638, 639, -503, 640, 641, 642, 643, 644, 645
               ]
             ]
           ],
@@ -690,18 +321,7 @@
           "type": "Polygon",
           "arcs": [
             [
-              658,
-              659,
-              -545,
-              660,
-              661,
-              662,
-              663,
-              -508,
-              353,
-              -510,
-              664,
-              -602,
+              658, 659, -545, 660, 661, 662, 663, -508, 353, -510, 664, -602,
               665
             ]
           ],
@@ -839,21 +459,8 @@
           "type": "Polygon",
           "arcs": [
             [
-              -639,
-              770,
-              -637,
-              -592,
-              -636,
-              771,
-              -563,
-              290,
-              772,
-              292,
-              773,
-              294,
-              774,
-              296,
-              775
+              -639, 770, -637, -592, -636, 771, -563, 290, 772, 292, 773, 294,
+              774, 296, 775
             ]
           ],
           "id": 356
@@ -863,18 +470,7 @@
           "type": "Polygon",
           "arcs": [
             [
-              776,
-              -505,
-              777,
-              300,
-              778,
-              302,
-              779,
-              780,
-              781,
-              -540,
-              -527,
-              -542,
+              776, -505, 777, 300, 778, 302, 779, 780, 781, -540, -527, -542,
               480
             ]
           ],
@@ -1081,60 +677,11 @@
             [[239]],
             [
               [
-                901,
-                243,
-                902,
-                245,
-                903,
-                247,
-                904,
-                249,
-                905,
-                251,
-                906,
-                253,
-                907,
-                255,
-                908,
-                257,
-                909,
-                259,
-                910,
-                261,
-                -896,
-                -646,
-                -854,
-                -644,
-                -802,
-                483,
-                -544,
-                -734,
-                401,
-                911,
-                -574,
-                -834,
-                -706,
-                451,
-                -714,
-                -877,
-                912,
-                913,
-                914,
-                915,
-                464,
-                916,
-                466,
-                917,
-                468,
-                918,
-                470,
-                919,
-                920,
-                473,
-                921,
-                475,
-                922,
-                477
+                901, 243, 902, 245, 903, 247, 904, 249, 905, 251, 906, 253, 907,
+                255, 908, 257, 909, 259, 910, 261, -896, -646, -854, -644, -802,
+                483, -544, -734, 401, 911, -574, -834, -706, 451, -714, -877,
+                912, 913, 914, 915, 464, 916, 466, 917, 468, 918, 470, 919, 920,
+                473, 921, 475, 922, 477
               ]
             ],
             [[491]],
@@ -1149,21 +696,8 @@
           "type": "Polygon",
           "arcs": [
             [
-              925,
-              329,
-              926,
-              331,
-              -798,
-              -784,
-              -818,
-              305,
-              927,
-              307,
-              -898,
-              311,
-              -518,
-              -884,
-              928
+              925, 329, 926, 331, -798, -784, -818, 305, 927, 307, -898, 311,
+              -518, -884, 928
             ]
           ],
           "id": 682
@@ -1264,39 +798,9 @@
             [[69]],
             [
               [
-                118,
-                953,
-                120,
-                954,
-                122,
-                955,
-                124,
-                956,
-                126,
-                957,
-                128,
-                958,
-                130,
-                959,
-                132,
-                960,
-                134,
-                961,
-                136,
-                962,
-                138,
-                963,
-                140,
-                964,
-                142,
-                -846,
-                195,
-                965,
-                966,
-                967,
-                968,
-                969,
-                -611
+                118, 953, 120, 954, 122, 955, 124, 956, 126, 957, 128, 958, 130,
+                959, 132, 960, 134, 961, 136, 962, 138, 963, 140, 964, 142,
+                -846, 195, 965, 966, 967, 968, 969, -611
               ]
             ],
             [[93]],
@@ -1304,20 +808,8 @@
             [[98]],
             [
               [
-                -613,
-                202,
-                970,
-                204,
-                971,
-                206,
-                972,
-                208,
-                973,
-                210,
-                974,
-                212,
-                975,
-                214
+                -613, 202, 970, 204, 971, 206, 972, 208, 973, 210, 974, 212,
+                975, 214
               ]
             ]
           ],
diff --git a/examples/vega-data/world-110m.json b/examples/vega-data/world-110m.json
index cd150f99bb3f5..ed329dca83cd9 100644
--- a/examples/vega-data/world-110m.json
+++ b/examples/vega-data/world-110m.json
@@ -105,122 +105,15 @@
         [[105]],
         [
           [
-            106,
-            107,
-            108,
-            109,
-            110,
-            111,
-            112,
-            113,
-            114,
-            115,
-            116,
-            117,
-            118,
-            119,
-            120,
-            121,
-            122,
-            123,
-            124,
-            125,
-            126,
-            127,
-            128,
-            129,
-            130,
-            131,
-            132,
-            133,
-            134,
-            135,
-            136,
-            137,
-            138,
-            139,
-            140,
-            141,
-            142,
-            143,
-            144,
-            145,
-            146,
-            147,
-            148,
-            149,
-            150,
-            151,
-            152,
-            153,
-            154,
-            155,
-            156,
-            157,
-            158,
-            159,
-            160,
-            161,
-            162,
-            163,
-            164,
-            165,
-            166,
-            167,
-            168,
-            169,
-            170,
-            171,
-            172,
-            173,
-            174,
-            175,
-            176,
-            177,
-            178,
-            179,
-            180,
-            181,
-            182,
-            183,
-            184,
-            185,
-            186,
-            187,
-            188,
-            189,
-            190,
-            191,
-            192,
-            193,
-            194,
-            195,
-            196,
-            197,
-            198,
-            199,
-            200,
-            201,
-            202,
-            203,
-            204,
-            205,
-            206,
-            207,
-            208,
-            209,
-            210,
-            211,
-            212,
-            213,
-            214,
-            215,
-            216,
-            217,
-            218,
-            219,
-            220,
-            221
+            106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118,
+            119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131,
+            132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144,
+            145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157,
+            158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170,
+            171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183,
+            184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196,
+            197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209,
+            210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221
           ]
         ],
         [[222, 223]],
@@ -241,242 +134,25 @@
         [[241]],
         [
           [
-            242,
-            243,
-            244,
-            245,
-            246,
-            247,
-            248,
-            249,
-            250,
-            251,
-            252,
-            253,
-            254,
-            255,
-            256,
-            257,
-            258,
-            259,
-            260,
-            261,
-            262,
-            263,
-            264,
-            265,
-            266,
-            267,
-            268,
-            269,
-            270,
-            271,
-            272,
-            273,
-            274,
-            275,
-            276,
-            277,
-            278,
-            279,
-            280,
-            281,
-            282,
-            283,
-            284,
-            285,
-            286,
-            287,
-            288,
-            289,
-            290,
-            291,
-            292,
-            293,
-            294,
-            295,
-            296,
-            297,
-            298,
-            299,
-            300,
-            301,
-            302,
-            303,
-            304,
-            305,
-            306,
-            307,
-            308,
-            309,
-            310,
-            311,
-            312,
-            313,
-            314,
-            315,
-            316,
-            317,
-            318,
-            319,
-            320,
-            321,
-            322,
-            323,
-            324,
-            325,
-            326,
-            327,
-            328,
-            329,
-            330,
-            331,
-            332,
-            333,
-            334,
-            335,
-            336,
-            337,
-            338,
-            339,
-            340,
-            341,
-            342,
-            343,
-            344,
-            345,
-            346,
-            347,
-            348,
-            349,
-            350,
-            351,
-            352,
-            353,
-            354,
-            355,
-            356,
-            357,
-            358,
-            359,
-            360,
-            361,
-            362,
-            363,
-            364,
-            365,
-            366,
-            367,
-            368,
-            369,
-            370,
-            371,
-            372,
-            373,
-            374,
-            375,
-            376,
-            377,
-            378,
-            379,
-            380,
-            381,
-            382,
-            383,
-            384,
-            385,
-            386,
-            387,
-            388,
-            389,
-            390,
-            391,
-            392,
-            393,
-            394,
-            395,
-            396,
-            397,
-            398,
-            399,
-            400,
-            401,
-            402,
-            403,
-            404,
-            405,
-            406,
-            407,
-            408,
-            409,
-            410,
-            411,
-            412,
-            413,
-            414,
-            415,
-            416,
-            417,
-            418,
-            419,
-            420,
-            421,
-            422,
-            423,
-            424,
-            425,
-            426,
-            427,
-            428,
-            429,
-            430,
-            431,
-            432,
-            433,
-            434,
-            435,
-            436,
-            437,
-            438,
-            439,
-            440,
-            441,
-            442,
-            443,
-            444,
-            445,
-            446,
-            447,
-            448,
-            449,
-            450,
-            451,
-            452,
-            453,
-            454,
-            455,
-            456,
-            457,
-            458,
-            459,
-            460,
-            461,
-            462,
-            463,
-            464,
-            465,
-            466,
-            467,
-            468,
-            469,
-            470,
-            471,
-            472,
-            473,
-            474,
-            475,
-            476,
-            477
+            242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254,
+            255, 256, 257, 258, 259, 260, 261, 262, 263, 264, 265, 266, 267,
+            268, 269, 270, 271, 272, 273, 274, 275, 276, 277, 278, 279, 280,
+            281, 282, 283, 284, 285, 286, 287, 288, 289, 290, 291, 292, 293,
+            294, 295, 296, 297, 298, 299, 300, 301, 302, 303, 304, 305, 306,
+            307, 308, 309, 310, 311, 312, 313, 314, 315, 316, 317, 318, 319,
+            320, 321, 322, 323, 324, 325, 326, 327, 328, 329, 330, 331, 332,
+            333, 334, 335, 336, 337, 338, 339, 340, 341, 342, 343, 344, 345,
+            346, 347, 348, 349, 350, 351, 352, 353, 354, 355, 356, 357, 358,
+            359, 360, 361, 362, 363, 364, 365, 366, 367, 368, 369, 370, 371,
+            372, 373, 374, 375, 376, 377, 378, 379, 380, 381, 382, 383, 384,
+            385, 386, 387, 388, 389, 390, 391, 392, 393, 394, 395, 396, 397,
+            398, 399, 400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410,
+            411, 412, 413, 414, 415, 416, 417, 418, 419, 420, 421, 422, 423,
+            424, 425, 426, 427, 428, 429, 430, 431, 432, 433, 434, 435, 436,
+            437, 438, 439, 440, 441, 442, 443, 444, 445, 446, 447, 448, 449,
+            450, 451, 452, 453, 454, 455, 456, 457, 458, 459, 460, 461, 462,
+            463, 464, 465, 466, 467, 468, 469, 470, 471, 472, 473, 474, 475,
+            476, 477
           ],
           [478, 479, 480, 481, 482, 483, 484]
         ],
@@ -586,30 +262,8 @@
             [[103]],
             [
               [
-                604,
-                107,
-                605,
-                109,
-                606,
-                111,
-                607,
-                113,
-                608,
-                115,
-                609,
-                117,
-                610,
-                199,
-                611,
-                201,
-                612,
-                215,
-                613,
-                217,
-                614,
-                219,
-                615,
-                221
+                604, 107, 605, 109, 606, 111, 607, 113, 608, 115, 609, 117, 610,
+                199, 611, 201, 612, 215, 613, 217, 614, 219, 615, 221
               ]
             ],
             [[616, 223]],
@@ -646,31 +300,8 @@
             [[64]],
             [
               [
-                627,
-                274,
-                628,
-                276,
-                629,
-                278,
-                630,
-                280,
-                631,
-                632,
-                633,
-                634,
-                635,
-                -593,
-                636,
-                637,
-                638,
-                639,
-                -503,
-                640,
-                641,
-                642,
-                643,
-                644,
-                645
+                627, 274, 628, 276, 629, 278, 630, 280, 631, 632, 633, 634, 635,
+                -593, 636, 637, 638, 639, -503, 640, 641, 642, 643, 644, 645
               ]
             ]
           ],
@@ -690,18 +321,7 @@
           "type": "Polygon",
           "arcs": [
             [
-              658,
-              659,
-              -545,
-              660,
-              661,
-              662,
-              663,
-              -508,
-              353,
-              -510,
-              664,
-              -602,
+              658, 659, -545, 660, 661, 662, 663, -508, 353, -510, 664, -602,
               665
             ]
           ],
@@ -839,21 +459,8 @@
           "type": "Polygon",
           "arcs": [
             [
-              -639,
-              770,
-              -637,
-              -592,
-              -636,
-              771,
-              -563,
-              290,
-              772,
-              292,
-              773,
-              294,
-              774,
-              296,
-              775
+              -639, 770, -637, -592, -636, 771, -563, 290, 772, 292, 773, 294,
+              774, 296, 775
             ]
           ],
           "id": 356
@@ -863,18 +470,7 @@
           "type": "Polygon",
           "arcs": [
             [
-              776,
-              -505,
-              777,
-              300,
-              778,
-              302,
-              779,
-              780,
-              781,
-              -540,
-              -527,
-              -542,
+              776, -505, 777, 300, 778, 302, 779, 780, 781, -540, -527, -542,
               480
             ]
           ],
@@ -1081,60 +677,11 @@
             [[239]],
             [
               [
-                901,
-                243,
-                902,
-                245,
-                903,
-                247,
-                904,
-                249,
-                905,
-                251,
-                906,
-                253,
-                907,
-                255,
-                908,
-                257,
-                909,
-                259,
-                910,
-                261,
-                -896,
-                -646,
-                -854,
-                -644,
-                -802,
-                483,
-                -544,
-                -734,
-                401,
-                911,
-                -574,
-                -834,
-                -706,
-                451,
-                -714,
-                -877,
-                912,
-                913,
-                914,
-                915,
-                464,
-                916,
-                466,
-                917,
-                468,
-                918,
-                470,
-                919,
-                920,
-                473,
-                921,
-                475,
-                922,
-                477
+                901, 243, 902, 245, 903, 247, 904, 249, 905, 251, 906, 253, 907,
+                255, 908, 257, 909, 259, 910, 261, -896, -646, -854, -644, -802,
+                483, -544, -734, 401, 911, -574, -834, -706, 451, -714, -877,
+                912, 913, 914, 915, 464, 916, 466, 917, 468, 918, 470, 919, 920,
+                473, 921, 475, 922, 477
               ]
             ],
             [[491]],
@@ -1149,21 +696,8 @@
           "type": "Polygon",
           "arcs": [
             [
-              925,
-              329,
-              926,
-              331,
-              -798,
-              -784,
-              -818,
-              305,
-              927,
-              307,
-              -898,
-              311,
-              -518,
-              -884,
-              928
+              925, 329, 926, 331, -798, -784, -818, 305, 927, 307, -898, 311,
+              -518, -884, 928
             ]
           ],
           "id": 682
@@ -1264,39 +798,9 @@
             [[69]],
             [
               [
-                118,
-                953,
-                120,
-                954,
-                122,
-                955,
-                124,
-                956,
-                126,
-                957,
-                128,
-                958,
-                130,
-                959,
-                132,
-                960,
-                134,
-                961,
-                136,
-                962,
-                138,
-                963,
-                140,
-                964,
-                142,
-                -846,
-                195,
-                965,
-                966,
-                967,
-                968,
-                969,
-                -611
+                118, 953, 120, 954, 122, 955, 124, 956, 126, 957, 128, 958, 130,
+                959, 132, 960, 134, 961, 136, 962, 138, 963, 140, 964, 142,
+                -846, 195, 965, 966, 967, 968, 969, -611
               ]
             ],
             [[93]],
@@ -1304,20 +808,8 @@
             [[98]],
             [
               [
-                -613,
-                202,
-                970,
-                204,
-                971,
-                206,
-                972,
-                208,
-                973,
-                210,
-                974,
-                212,
-                975,
-                214
+                -613, 202, 970, 204, 971, 206, 972, 208, 973, 210, 974, 212,
+                975, 214
               ]
             ]
           ],
diff --git a/examples/viewer-cid.amp.html b/examples/viewer-cid.amp.html
index 19feaac8d7eaf..539101b9da72a 100644
--- a/examples/viewer-cid.amp.html
+++ b/examples/viewer-cid.amp.html
@@ -28,8 +28,8 @@
     layout=nodisplay
     id="myAmpUserNotificationId">
   This site uses cookies to personalize content.
-  <button on="tap:myAmpUserNotificationId.dismiss" role="button" tabindex="0">Accept</button>
-  <button on="tap:myAmpUserNotificationId.optoutOfCid" role="button">Opt Out</button>
+  <button on="tap:myAmpUserNotificationId.dismiss" tabindex="0">Accept</button>
+  <button on="tap:myAmpUserNotificationId.optoutOfCid">Opt Out</button>
 </amp-user-notification>
 <amp-analytics type="googleanalytics">
   <script type="application/json">
diff --git a/examples/viewer-iframe-poll.html b/examples/viewer-iframe-poll.html
index 330d86c8aa439..898040e604fba 100644
--- a/examples/viewer-iframe-poll.html
+++ b/examples/viewer-iframe-poll.html
@@ -172,7 +172,6 @@
       this.alreadyLoaded_ = false;
       this.stackIndex_ = 0;
       this.visibilityState_ = visible ? 'visible' : 'hidden';
-      this.prerenderSize_ = 1;
       this.csi_ = 1;
 
       this.viewer = document.querySelector('viewer');
@@ -207,7 +206,6 @@
         height: this.container./*OK*/offsetHeight,
         paddingTop: this.header./*OK*/offsetHeight,
         visibilityState: this.visibilityState_,
-        prerenderSize: this.prerenderSize_,
         origin: parseUrlDeprecated(window.location.href).origin,
         csi: this.csi_,
         cap: 'foo,a2a,swipe,handshakepoll,iframeScroll'
@@ -242,7 +240,6 @@
       this.visibilityState_ = visible ? 'visible' : 'hidden';
       this.ampViewerHost_.sendRequest('visibilitychange', {
         state: this.visibilityState_,
-        prerenderSize: this.prerenderSize
       }, true);
       if (updateToggle) {
         this.updateVisibilityToggle_();
diff --git a/examples/viewer-webview.html b/examples/viewer-webview.html
index dc304c7d11d62..68ce39359d215 100644
--- a/examples/viewer-webview.html
+++ b/examples/viewer-webview.html
@@ -172,7 +172,6 @@
       this.alreadyLoaded_ = false;
       this.stackIndex_ = 0;
       this.visibilityState_ = visible ? 'visible' : 'hidden';
-      this.prerenderSize_ = 1;
       this.csi_ = 1;
 
       this.viewer = document.querySelector('viewer');
@@ -208,7 +207,6 @@
         height: this.container./*OK*/offsetHeight,
         paddingTop: this.header./*OK*/offsetHeight,
         visibilityState: this.visibilityState_,
-        prerenderSize: this.prerenderSize_,
         origin: parseUrlDeprecated(window.location.href).origin,
         csi: this.csi_,
         cap: 'foo,a2a,swipe,iframeScroll',
@@ -244,7 +242,6 @@
       this.visibilityState_ = visible ? 'visible' : 'hidden';
       this.ampViewerHost_.sendRequest('visibilitychange', {
         state: this.visibilityState_,
-        prerenderSize: this.prerenderSize
       }, true);
       if (updateToggle) {
         this.updateVisibilityToggle_();
diff --git a/examples/viewer.html b/examples/viewer.html
index fff13eb31e78e..084d5b7dcc16f 100644
--- a/examples/viewer.html
+++ b/examples/viewer.html
@@ -214,7 +214,6 @@
       this.alreadyLoaded_ = false;
       this.stackIndex_ = 0;
       this.visibilityState_ = visible ? 'visible' : 'hidden';
-      this.prerenderSize_ = 1;
       this.csi_ = 1;
       this.startResolve_ = null;
       this.startPromise_ = null;
@@ -256,7 +255,6 @@
         height: this.container./*OK*/offsetHeight,
         paddingTop: this.header./*OK*/offsetHeight,
         visibilityState: this.visibilityState_,
-        prerenderSize: this.prerenderSize_,
         origin: parseUrlDeprecated(window.location.href).origin,
         csi: this.csi_,
         cap: this.caps_,
@@ -295,7 +293,6 @@
         this.visibilityState_ = visible ? 'visible' : 'hidden';
         this.ampViewerHost_.sendRequest('visibilitychange', {
           state: this.visibilityState_,
-          prerenderSize: this.prerenderSize
         }, true);
         if (updateToggle) {
           this.updateVisibilityToggle_();
@@ -621,7 +618,7 @@
       if (!queryString) {
         return params;
       }
-      if (startsWith(queryString, '?') || startsWith(queryString, '#')) {
+      if (queryString.startsWith('?') || queryString.startsWith('#')) {
         queryString = queryString.substr(1);
       }
       const pairs = queryString.split('&');
@@ -733,7 +730,7 @@
           '9',
           './amp-autocomplete.ssr.html?amp_js_v=0.1',
           false).start();
-      addShowContainer('9'); 
+      addShowContainer('9');
 
       showContainer('1');
     }
diff --git a/examples/vine.amp.html b/examples/vine.amp.html
index 9d97ff3754142..d84e30015db8f 100644
--- a/examples/vine.amp.html
+++ b/examples/vine.amp.html
@@ -5,7 +5,6 @@
   <title>Vine examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/examples/visual-tests/OWNERS b/examples/visual-tests/OWNERS
index dbf32d57ca33c..69a88bfe03860 100644
--- a/examples/visual-tests/OWNERS
+++ b/examples/visual-tests/OWNERS
@@ -1,15 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [
-        {name: 'danielrozenberg'},
-        {name: 'erwinmombay'},
-        {name: 'estherkim'},
-        {name: 'rsimha'},
-      ],
+      owners: [{name: 'ampproject/wg-infra'}],
     },
   ],
 }
diff --git a/examples/visual-tests/amp-autocomplete/amp-autocomplete.js b/examples/visual-tests/amp-autocomplete/amp-autocomplete.js
index bf4b567dccf5b..8092157ad7b6b 100644
--- a/examples/visual-tests/amp-autocomplete/amp-autocomplete.js
+++ b/examples/visual-tests/amp-autocomplete/amp-autocomplete.js
@@ -16,8 +16,8 @@
 'use strict';
 
 const {
-  verifySelectorsVisible,
   verifySelectorsInvisible,
+  verifySelectorsVisible,
 } = require('../../../build-system/tasks/visual-diff/helpers');
 
 module.exports = {
diff --git a/examples/visual-tests/amp-carousel/amp-carousel-slides.html b/examples/visual-tests/amp-carousel/amp-carousel-slides.html
new file mode 100644
index 0000000000000..a41a799e75edf
--- /dev/null
+++ b/examples/visual-tests/amp-carousel/amp-carousel-slides.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-carousel</title>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>
+  <link rel="canonical" href="https://preview.amp.dev/documentation/components/amp-carousel.example.3.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+</head>
+<body>
+
+<amp-carousel type="slides"
+  width="900"
+  height="1600"
+  controls
+  data-next-button-aria-label="Go to next slide"
+  data-previous-button-aria-label="Go to previous slide"
+  role="region"
+  aria-label="Slides carousel">
+  <amp-img src="/examples/visual-tests/picsum.photos/image736_900x1600.jpg"
+    width="900"
+    height="1600"></amp-img>
+  <amp-img src="/examples/visual-tests/picsum.photos/image1076_900x1600.jpg"
+    width="900"
+    height="1600"></amp-img>
+  <amp-img src="/examples/visual-tests/picsum.photos/image948_900x1600.jpg"
+    width="900"
+    height="1600"></amp-img>
+</amp-carousel>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/visual-tests/amp-carousel/amp-carousel.html b/examples/visual-tests/amp-carousel/amp-carousel.html
new file mode 100644
index 0000000000000..8c48e64aef64f
--- /dev/null
+++ b/examples/visual-tests/amp-carousel/amp-carousel.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-carousel</title>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>
+  <link rel="canonical" href="https://preview.amp.dev/documentation/components/amp-carousel.example.3.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+</head>
+<body>
+
+<amp-carousel type="carousel"
+  height="900"
+  layout="fixed-height"
+  role="region"
+  aria-label="Basic carousel">
+  <amp-img src="/examples/visual-tests/picsum.photos/image1067_1600x900.jpg"
+    height="900"
+    width="1600"></amp-img>
+  <amp-img src="/examples/visual-tests/picsum.photos/image1075_1600x900.jpg"
+    height="900"
+    width="1600"></amp-img>
+  <amp-img src="/examples/visual-tests/picsum.photos/image857_1600x900.jpg"
+    height="900"
+    width="1600"></amp-img>
+</amp-carousel>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/visual-tests/amp-date-picker/amp-date-picker.js b/examples/visual-tests/amp-date-picker/amp-date-picker.js
index e825b142178e9..5e3b42dbfa752 100644
--- a/examples/visual-tests/amp-date-picker/amp-date-picker.js
+++ b/examples/visual-tests/amp-date-picker/amp-date-picker.js
@@ -15,29 +15,34 @@
  */
 'use strict';
 
-const {verifySelectorsVisible} = require('../../../build-system/tasks/visual-diff/helpers');
+const {
+  verifySelectorsVisible,
+} = require('../../../build-system/tasks/visual-diff/helpers');
 
 module.exports = {
   'select a different date': async (page, name) => {
-    await page.tap(".i-amphtml-date-picker-container .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hideForAnimation):nth-child(2) .CalendarMonth_table > tbody > tr:nth-child(2) > td:nth-child(2)");
-    await verifySelectorsVisible(page, name,
-      [
-        ".i-amphtml-date-picker-container .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hideForAnimation):nth-child(2) .CalendarMonth_table > tbody > tr:nth-child(2) > td.CalendarDay__selected:nth-child(2)",
-        ".i-amphtml-date-picker-container .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hideForAnimation):nth-child(2) .CalendarMonth_table > tbody > tr:nth-child(3) > td:nth-child(4):not(.CalendarDay__selected)"
-      ]);
+    await page.tap(
+      '.i-amphtml-date-picker-container .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hideForAnimation):nth-child(2) .CalendarMonth_table > tbody > tr:nth-child(2) > td:nth-child(2)'
+    );
+    await verifySelectorsVisible(page, name, [
+      '.i-amphtml-date-picker-container .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hideForAnimation):nth-child(2) .CalendarMonth_table > tbody > tr:nth-child(2) > td.CalendarDay__selected:nth-child(2)',
+      '.i-amphtml-date-picker-container .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hideForAnimation):nth-child(2) .CalendarMonth_table > tbody > tr:nth-child(3) > td:nth-child(4):not(.CalendarDay__selected)',
+    ]);
   },
   'select previous month': async (page, name) => {
-    await page.tap(".i-amphtml-date-picker-container button.DayPickerNavigation_button:nth-child(1)");
-    await verifySelectorsVisible(page, name,
-      [
-        ".i-amphtml-date-picker-container button[aria-label=Thursday\\,\\ November\\ 1\\,\\ 2018]"
-      ]);
+    await page.tap(
+      '.i-amphtml-date-picker-container button.DayPickerNavigation_button:nth-child(1)'
+    );
+    await verifySelectorsVisible(page, name, [
+      '.i-amphtml-date-picker-container button[aria-label="Thursday, November 1, 2018"]',
+    ]);
   },
   'select next month': async (page, name) => {
-    await page.tap(".i-amphtml-date-picker-container button.DayPickerNavigation_button:nth-child(2)");
-    await verifySelectorsVisible(page, name,
-      [
-        ".i-amphtml-date-picker-container button[aria-label=Tuesday\\,\\ January\\ 1\\,\\ 2019]"
-      ]);
+    await page.tap(
+      '.i-amphtml-date-picker-container button.DayPickerNavigation_button:nth-child(2)'
+    );
+    await verifySelectorsVisible(page, name, [
+      '.i-amphtml-date-picker-container button[aria-label="Tuesday, January 1, 2019"]',
+    ]);
   },
- };
+};
diff --git a/examples/visual-tests/amp-list/amp-list.amp.js b/examples/visual-tests/amp-list/amp-list.amp.js
index 8bd0e13258cfc..94d3b4799d0b0 100644
--- a/examples/visual-tests/amp-list/amp-list.amp.js
+++ b/examples/visual-tests/amp-list/amp-list.amp.js
@@ -15,13 +15,13 @@
  */
 'use strict';
 
-const {verifySelectorsInvisible} = require('../../../build-system/tasks/visual-diff/helpers');
+const {
+  verifySelectorsInvisible,
+} = require('../../../build-system/tasks/visual-diff/helpers');
 
 module.exports = {
-
   'tap "see more" button': async (page, name) => {
     await page.tap('div.amp-visible[overflow]');
     await verifySelectorsInvisible(page, name, ['div.amp-visible[overflow]']);
   },
-
 };
diff --git a/examples/visual-tests/amp-mega-menu/amp-mega-menu-with-list.amp.html b/examples/visual-tests/amp-mega-menu/amp-mega-menu-with-list.amp.html
index 1205fed71af78..8f123fa215572 100644
--- a/examples/visual-tests/amp-mega-menu/amp-mega-menu-with-list.amp.html
+++ b/examples/visual-tests/amp-mega-menu/amp-mega-menu-with-list.amp.html
@@ -10,12 +10,6 @@
   <script async custom-element="amp-mega-menu" src="https://cdn.ampproject.org/v0/amp-mega-menu-0.1.js"></script>
   <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
   <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
-  <script>
-    // TODO(#24898): remove this toggle when cleaning up experiment.
-    (self.AMP=self.AMP||[]).push(function(AMP){
-        AMP.toggleExperiment('amp-mega-menu', true);
-    });
-  </script>
 </head>
 <body>
   <amp-mega-menu height="60" layout="fixed-height">
diff --git a/examples/visual-tests/amp-mega-menu/amp-mega-menu.amp.html b/examples/visual-tests/amp-mega-menu/amp-mega-menu.amp.html
index 8306519347018..80cef0e7e7560 100644
--- a/examples/visual-tests/amp-mega-menu/amp-mega-menu.amp.html
+++ b/examples/visual-tests/amp-mega-menu/amp-mega-menu.amp.html
@@ -8,12 +8,6 @@
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-mega-menu" src="https://cdn.ampproject.org/v0/amp-mega-menu-0.1.js"></script>
-  <script>
-    // TODO(#24898): remove this toggle when cleaning up experiment.
-    (self.AMP=self.AMP||[]).push(function(AMP){
-        AMP.toggleExperiment('amp-mega-menu', true);
-    });
-  </script>
 </head>
 <body>
   <amp-mega-menu height="30" layout="fixed-height">
diff --git a/examples/visual-tests/amp-mega-menu/amp-mega-menu.js b/examples/visual-tests/amp-mega-menu/amp-mega-menu.js
index dbddf41fceb27..17a3b5a5981af 100644
--- a/examples/visual-tests/amp-mega-menu/amp-mega-menu.js
+++ b/examples/visual-tests/amp-mega-menu/amp-mega-menu.js
@@ -15,13 +15,19 @@
  */
 'use strict';
 
-const {verifySelectorsVisible} = require('../../../build-system/tasks/visual-diff/helpers');
+const {
+  verifySelectorsVisible,
+} = require('../../../build-system/tasks/visual-diff/helpers');
 
 module.exports = {
   'click menu item one': async (page, name) => {
-    await page.waitFor('amp-mega-menu .i-amphtml-mega-menu-item:first-child .i-amphtml-mega-menu-heading');
-    await page.tap('amp-mega-menu .i-amphtml-mega-menu-item:first-child .i-amphtml-mega-menu-heading');
-    await page.waitFor(400);
+    await page.waitForSelector(
+      'amp-mega-menu .i-amphtml-mega-menu-item:first-child .i-amphtml-mega-menu-heading'
+    );
+    await page.tap(
+      'amp-mega-menu .i-amphtml-mega-menu-item:first-child .i-amphtml-mega-menu-heading'
+    );
+    await page.waitForTimeout(400);
     await verifySelectorsVisible(page, name, [
       'amp-mega-menu[open] .i-amphtml-mega-menu-item:first-child[open] .i-amphtml-mega-menu-content',
       'amp-mega-menu[open] .i-amphtml-mega-menu-item:first-child[open] amp-img img',
diff --git a/examples/visual-tests/amp-selector.amp.html b/examples/visual-tests/amp-selector.amp.html
index 5754e117d7634..3e33d84d37cb2 100644
--- a/examples/visual-tests/amp-selector.amp.html
+++ b/examples/visual-tests/amp-selector.amp.html
@@ -16,7 +16,7 @@
   amp-selector [selected] {
     background-color: deeppink;
   }
-    
+
   amp-selector[disabled],
   amp-selector [disabled] {
     opacity: .20;
diff --git a/examples/visual-tests/amp-selector.js b/examples/visual-tests/amp-selector.js
index 59aa5192f1680..f520f8b27d497 100644
--- a/examples/visual-tests/amp-selector.js
+++ b/examples/visual-tests/amp-selector.js
@@ -23,31 +23,35 @@ const {
 module.exports = {
   'single selector select option 2': async (page, name) => {
     await page.tap('#single_selector span[option="2"]');
-    await verifySelectorsVisible(
-      page, name, ['#single_selector span[option="2"][selected]']);
+    await verifySelectorsVisible(page, name, [
+      '#single_selector span[option="2"][selected]',
+    ]);
   },
 
   'single selector select option 2, then 3': async (page, name) => {
     await page.tap('#single_selector span[option="2"]');
-    await page.waitFor('#single_selector span[option="2"][selected]');
+    await page.waitForSelector('#single_selector span[option="2"][selected]');
     await page.tap('#single_selector span[option="3"]');
-    await verifySelectorsVisible(
-      page, name, ['#single_selector span[option="3"][selected]']);
+    await verifySelectorsVisible(page, name, [
+      '#single_selector span[option="3"][selected]',
+    ]);
   },
 
-  'try to select disabled options': async page => {
+  'try to select disabled options': async (page) => {
     await page.tap('#multi_selector span[option="2"]');
     await page.tap('#disabled_selector span[option="2"]');
     await page.tap('#disabled_selector span[option="3"]');
-    await page.waitFor(100);
+    await page.waitForTimeout(100);
   },
 
   'change mutli select': async (page, name) => {
     await page.tap('#multi_selector span[option="1"]');
     await page.tap('#multi_selector span[option="4"]');
-    await verifySelectorsInvisible(
-      page, name, ['#multi_selector span[option="1"][selected]']);
-    await verifySelectorsVisible(
-      page, name, ['#multi_selector span[option="4"][selected]']);
+    await verifySelectorsInvisible(page, name, [
+      '#multi_selector span[option="1"][selected]',
+    ]);
+    await verifySelectorsVisible(page, name, [
+      '#multi_selector span[option="4"][selected]',
+    ]);
   },
- };
+};
diff --git a/examples/visual-tests/amp-sidebar/amp-sidebar-toolbar-ol.amp.html b/examples/visual-tests/amp-sidebar/amp-sidebar-toolbar-ol.amp.html
index 07421a4bb7ab3..7f9a1af1ddb99 100644
--- a/examples/visual-tests/amp-sidebar/amp-sidebar-toolbar-ol.amp.html
+++ b/examples/visual-tests/amp-sidebar/amp-sidebar-toolbar-ol.amp.html
@@ -41,7 +41,7 @@
       width: 50vw;
     }
 
-    /* Using invalid AMP to target the sidebar. 
+    /* Using invalid AMP to target the sidebar.
     Disable transforms for visual diff test */
     .i-amphtml-sidebar-mask, amp-sidebar[side] {
       transform: none;
diff --git a/examples/visual-tests/amp-sidebar/amp-sidebar-toolbar-ul.amp.html b/examples/visual-tests/amp-sidebar/amp-sidebar-toolbar-ul.amp.html
index fbd15d39ba3c9..757ee2eabdc93 100644
--- a/examples/visual-tests/amp-sidebar/amp-sidebar-toolbar-ul.amp.html
+++ b/examples/visual-tests/amp-sidebar/amp-sidebar-toolbar-ul.amp.html
@@ -44,7 +44,7 @@
       width: 50vw;
     }
 
-    /* Using invalid AMP to target the sidebar. 
+    /* Using invalid AMP to target the sidebar.
     Disable transforms for visual diff test */
     .i-amphtml-sidebar-mask, amp-sidebar[side] {
       transform: none;
diff --git a/examples/visual-tests/amp-sidebar/amp-sidebar.amp.html b/examples/visual-tests/amp-sidebar/amp-sidebar.amp.html
index e34d7487fae04..10e69b99092ed 100644
--- a/examples/visual-tests/amp-sidebar/amp-sidebar.amp.html
+++ b/examples/visual-tests/amp-sidebar/amp-sidebar.amp.html
@@ -65,7 +65,7 @@
       width: 50vw;
     }
 
-    /* Using invalid AMP to target the sidebar. 
+    /* Using invalid AMP to target the sidebar.
     Disable transforms for visual diff test */
     .i-amphtml-sidebar-mask, amp-sidebar[side] {
       transform: none;
diff --git a/examples/visual-tests/amp-story-player/back-button.html b/examples/visual-tests/amp-story-player/back-button.html
new file mode 100644
index 0000000000000..defb20d53efe7
--- /dev/null
+++ b/examples/visual-tests/amp-story-player/back-button.html
@@ -0,0 +1,54 @@
+<html>
+  <head>
+    <title>Story Player (Non-AMP)</title>
+    <script>
+      // TODO(#17108): Remove this when getMode().test is set.
+      __AMP_TEST = true;
+    </script>
+    <script src="../../../dist/amp-story-player-v0.js"></script>
+    <link href="../../../build/css/amp-story-player-v0.css" rel='stylesheet' type='text/css'>
+    <style page>
+      body {
+        font-family: sans-serif;
+      }
+    </style>
+    <style injected>
+      .story-player-iframe {
+        background-size: cover;
+        display: block;
+        position: relative;
+        height: 100%;
+        width: 100%;
+        flex: 0 0 100%;
+      }
+
+      .title {
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        color: #fff;
+        font-size: 40px;
+        padding: 88px 32px 32px 32px;
+        line-height: 1.25;
+        text-shadow: 3px 3px #000;
+      }
+
+      /* TODO: Remove this when poster image is no longer displayed. */
+      amp-story-player a:first-of-type {
+        display: none;
+      }
+    </style>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  </head>
+  <body>
+    <amp-story-player style="width: 360px; height: 600px;" exit-control="back-button">
+      <a href="/examples/visual-tests/amp-story/amp-story-grid-layer-template-fill.html"
+          class="story">
+        <span class="title">Placeholder</span>
+      </a>
+    </amp-story-player>
+  </body>
+</html>
diff --git a/examples/visual-tests/amp-story-player/close-button.html b/examples/visual-tests/amp-story-player/close-button.html
new file mode 100644
index 0000000000000..d8a05390b4a3e
--- /dev/null
+++ b/examples/visual-tests/amp-story-player/close-button.html
@@ -0,0 +1,54 @@
+<html>
+  <head>
+    <title>Story Player (Non-AMP)</title>
+    <script>
+      // TODO(#17108): Remove this when getMode().test is set.
+      __AMP_TEST = true;
+    </script>
+    <script src="../../../dist/amp-story-player-v0.js"></script>
+    <link href="../../../build/css/amp-story-player-v0.css" rel='stylesheet' type='text/css'>
+    <style page>
+      body {
+        font-family: sans-serif;
+      }
+    </style>
+    <style injected>
+      .story-player-iframe {
+        background-size: cover;
+        display: block;
+        position: relative;
+        height: 100%;
+        width: 100%;
+        flex: 0 0 100%;
+      }
+
+      .title {
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        color: #fff;
+        font-size: 40px;
+        padding: 88px 32px 32px 32px;
+        line-height: 1.25;
+        text-shadow: 3px 3px #000;
+      }
+
+      /* TODO: Remove this when poster image is no longer displayed. */
+      amp-story-player a:first-of-type {
+        display: none;
+      }
+    </style>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  </head>
+  <body>
+    <amp-story-player style="width: 360px; height: 600px;" exit-control="close-button">
+      <a href="/examples/visual-tests/amp-story/amp-story-grid-layer-template-fill.html"
+          class="story">
+        <span class="title">Placeholder</span>
+      </a>
+    </amp-story-player>
+  </body>
+</html>
diff --git a/examples/visual-tests/amp-story-player/placeholder.js b/examples/visual-tests/amp-story-player/placeholder.js
new file mode 100644
index 0000000000000..0cadc68b96a0f
--- /dev/null
+++ b/examples/visual-tests/amp-story-player/placeholder.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2020 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';
+
+module.exports = {
+  'player ready': async (page) => {
+    await page.waitForTimeout(1000);
+    await page.$eval('iframe', (iframe) => {
+      iframe.src = '';
+      iframe.srcdoc =
+        '<html><head></head><body style="background: darkgray;"></body></html>';
+    });
+  },
+};
diff --git a/examples/visual-tests/amp-story-player/player-amp-version.html b/examples/visual-tests/amp-story-player/player-amp-version.html
new file mode 100644
index 0000000000000..9f9e569332239
--- /dev/null
+++ b/examples/visual-tests/amp-story-player/player-amp-version.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html ⚡ lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Story Player (AMP version)</title>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <link rel="canonical" href="player-amp.html">
+    <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+    <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>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <script>
+      // TODO(#17108): Remove this when getMode().test is set.
+      __AMP_TEST = true;
+    </script>
+  </head>
+  <body>
+    <h1>This is an AMP page that embeds a story below:</h1>
+    <amp-story-player layout="fixed" width="360" height="600">
+        <a href="/examples/visual-tests/amp-story/amp-story-grid-layer-template-fill.html"
+            class="story">
+          <img data-amp-story-player-poster-img src="/examples/amp-story/img/overview.jpg" width="360" height="600" loading="lazy">
+          <span class="title">AMP conf</span>
+        </a>
+    </amp-story-player>
+
+  </body>
+</html>
diff --git a/examples/visual-tests/amp-story-player/player-amp-version.js b/examples/visual-tests/amp-story-player/player-amp-version.js
new file mode 100644
index 0000000000000..a0cadce991133
--- /dev/null
+++ b/examples/visual-tests/amp-story-player/player-amp-version.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2021 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';
+
+module.exports = {
+  'AMP version of the player loading a story': async (page) => {
+    await page.waitForTimeout(5000);
+    await page.$eval('iframe', (iframe) => {
+      const contents = iframe.contentDocument.documentElement.outerHTML;
+      iframe.src = '';
+      iframe.srcdoc = contents;
+    });
+
+    await page.waitForTimeout(2000);
+  },
+};
diff --git a/examples/visual-tests/amp-story-player/player-local-story.html b/examples/visual-tests/amp-story-player/player-local-story.html
new file mode 100644
index 0000000000000..800c654b78236
--- /dev/null
+++ b/examples/visual-tests/amp-story-player/player-local-story.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Story Player (Non-AMP)</title>
+    <script>
+      // TODO(#17108): Remove this when getMode().test is set.
+      __AMP_TEST = true;
+    </script>
+    <script async src="../../../dist/amp-story-player-v0.js"></script>
+    <link href="../../../build/css/amp-story-player-v0.css" rel='stylesheet' type='text/css'>
+    <style page>
+      body {
+        font-family: sans-serif;
+      }
+    </style>
+    <style injected>
+      .story-player-iframe {
+        background-size: cover;
+        display: block;
+        position: relative;
+        height: 100%;
+        width: 100%;
+        flex: 0 0 100%;
+      }
+
+      .title {
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        color: #fff;
+        font-size: 40px;
+        padding: 88px 32px 32px 32px;
+        line-height: 1.25;
+        text-shadow: 3px 3px #000;
+      }
+
+      /* TODO: Remove this when poster image is no longer displayed. */
+      amp-story-player a:first-of-type {
+        display: none;
+      }
+    </style>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  </head>
+  <body>
+    <h1>This is a NON-AMP page that embeds a story below:</h1>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
+    <amp-story-player style="width: 360px; height: 600px;">
+      <a href="/examples/visual-tests/amp-story/amp-story-grid-layer-template-fill.html"
+          class="story">
+        <span class="title">Test one</span>
+      </a>
+    </amp-story-player>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
+  </body>
+</html>
diff --git a/examples/visual-tests/amp-story-player/story-attribution.html b/examples/visual-tests/amp-story-player/story-attribution.html
new file mode 100644
index 0000000000000..e34197e879067
--- /dev/null
+++ b/examples/visual-tests/amp-story-player/story-attribution.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Story Attribution</title>
+    <script>
+      // TODO(#17108): Remove this when getMode().test is set.
+      __AMP_TEST = true;
+    </script>
+    <script async src="../../../dist/amp-story-player-v0.js"></script>
+    <link href="../../../build/css/amp-story-player-v0.css" rel='stylesheet' type='text/css'>
+    <style page>
+      body {
+        font-family: sans-serif;
+      }
+    </style>
+
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  </head>
+  <body>
+    <h1>Story Attribution:</h1>
+    <amp-story-player style="width: 360px; height: 600px;">
+      <script type="application/json">
+        {
+          "display": {
+            "attribution": "auto"
+          }
+        }
+      </script>
+      <a href="/examples/visual-tests/amp-story/amp-story-grid-layer-template-fill.html"
+          class="story">
+        <span class="title">Test one</span>
+      </a>
+    </amp-story-player>
+  </body>
+</html>
diff --git a/examples/visual-tests/amp-story-player/story-loaded.js b/examples/visual-tests/amp-story-player/story-loaded.js
new file mode 100644
index 0000000000000..80b41582f0ee2
--- /dev/null
+++ b/examples/visual-tests/amp-story-player/story-loaded.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2020 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';
+
+module.exports = {
+  'story loaded and player ready': async (page) => {
+    await page.waitForTimeout(5000);
+    await page.$eval('iframe', (iframe) => {
+      const contents = iframe.contentDocument.documentElement.outerHTML;
+      iframe.src = '';
+      iframe.srcdoc = contents;
+    });
+    await page.waitForTimeout(2000);
+  },
+};
diff --git a/examples/visual-tests/amp-story/amp-story-360-image.html b/examples/visual-tests/amp-story/amp-story-360-image.html
new file mode 100644
index 0000000000000..e36a24a71da4d
--- /dev/null
+++ b/examples/visual-tests/amp-story/amp-story-360-image.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8">
+    <title>amp-story-360 Visual Diff</title>
+    <link rel="canonical" href="example.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <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-360" src="https://cdn.ampproject.org/v0/amp-story-360-0.1.js"></script>
+    <script>
+      // TODO(#17108): Remove this when getMode().test is set.
+      __AMP_TEST = true;
+    </script>
+  </head>
+  <body>
+    <amp-story
+        standalone
+        title="Demo Story"
+        publisher="AMP Story"
+        publisher-logo-src="example.com/logo.png"
+        poster-portrait-src="example.com/poster.jpg">
+      <amp-story-page id="cover">
+        <amp-story-grid-layer template="fill">
+          <amp-story-360 layout="fill" heading-start="45" pitch-start="-20" scene-pitch="-5">
+            <!-- Curiosity self-portrat, Sol 1462 (September 2016) Credit: NASA / JPL / MSSS / Seán Doran -->
+            <!-- https://informal.jpl.nasa.gov/museum/360-video -->
+            <amp-img src="/examples/visual-tests/amp-story/img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg" width="1998" height="999"></amp-img>
+          </amp-story-360>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/visual-tests/amp-story/amp-story-bookend.html b/examples/visual-tests/amp-story/amp-story-bookend.html
deleted file mode 100644
index a76c0aa55f552..0000000000000
--- a/examples/visual-tests/amp-story/amp-story-bookend.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!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-video"
-        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
-    <title>amp-story-bookend visual diff</title>
-    <meta name="viewport"
-          content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link rel="canonical" href="./template-vertical.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>
-      amp-story-page {
-        background: black;
-        font-family: sans-serif;
-      }
-
-      .i-amphtml-story-spinner-container {
-        /* Hide the spinner for loading pages, since this causes flakes */
-        display: none;
-      }
-
-      h1.hello-world {
-        color: white;
-        text-align: center;
-        text-shadow: 3px 3px rgba(0, 0, 0, 0.5);
-      }
-    </style>
-    <script>
-      // TODO(#17108): Remove this when getMode().test is set.
-      __AMP_TEST = true;
-
-      /**
-       * On load, open the bookend.
-       */
-      document.addEventListener('ampstory:load', () => {
-        const storyEl = document.querySelector('amp-story');
-
-        // Automatically open the bookend.
-        const openBookendEvent = new CustomEvent('ampstory:dispatchaction', {
-          detail: {
-            action: 'toggleBookend',
-            data: true,
-          }
-        });
-
-        storyEl.dispatchEvent(openBookendEvent);
-
-        // Update the CSS classes to indicate that the story is ready.
-        storyEl.classList.add('visual-diff-ready');
-      });
-    </script>
-  </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">
-
-      <amp-story-page id="cover">
-        <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
-          </amp-video>
-        </amp-story-grid-layer>
-        <amp-story-grid-layer template="vertical">
-          <h1 class="hello-world">Hello world!</h1>
-        </amp-story-grid-layer>
-      </amp-story-page>
-
-      <amp-story-bookend src="bookend-en.json" layout="nodisplay">
-      </amp-story-bookend>
-
-    </amp-story>
-  </body>
-
-</html>
diff --git a/examples/visual-tests/amp-story/amp-story-bookend.rtl.html b/examples/visual-tests/amp-story/amp-story-bookend.rtl.html
deleted file mode 100644
index 2aac4d69b9a4d..0000000000000
--- a/examples/visual-tests/amp-story/amp-story-bookend.rtl.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!doctype html>
-<html amp lang="ar" dir="rtl">
-  <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-video"
-        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
-    <title>amp-story-bookend visual diff</title>
-    <meta name="viewport"
-          content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link rel="canonical" href="./template-vertical.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>
-      amp-story-page {
-        background: black;
-        font-family: sans-serif;
-      }
-
-      .i-amphtml-story-spinner-container {
-        /* Hide the spinner for loading pages, since this causes flakes */
-        display: none;
-      }
-
-      h1.hello-world {
-        color: white;
-        text-align: center;
-        text-shadow: 3px 3px rgba(0, 0, 0, 0.5);
-      }
-    </style>
-    <script>
-      // TODO(#17108): Remove this when getMode().test is set.
-      __AMP_TEST = true;
-
-      /**
-       * On load, open the bookend.
-       */
-      document.addEventListener('ampstory:load', () => {
-        const storyEl = document.querySelector('amp-story');
-
-        // Automatically open the bookend.
-        const openBookendEvent = new CustomEvent('ampstory:dispatchaction', {
-          detail: {
-            action: 'toggleBookend',
-            data: true,
-          }
-        });
-
-        storyEl.dispatchEvent(openBookendEvent);
-
-        // Update the CSS classes to indicate that the story is ready.
-        storyEl.classList.add('visual-diff-ready');
-      });
-    </script>
-  </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">
-
-      <amp-story-page id="cover">
-        <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
-          </amp-video>
-        </amp-story-grid-layer>
-        <amp-story-grid-layer template="vertical">
-          <h1 class="hello-world">مرحبا بالعالم</h1>
-        </amp-story-grid-layer>
-      </amp-story-page>
-
-      <amp-story-bookend src="bookend-ar.json" layout="nodisplay">
-      </amp-story-bookend>
-
-    </amp-story>
-  </body>
-
-</html>
diff --git a/examples/visual-tests/amp-story/amp-story-bot-rendering.html b/examples/visual-tests/amp-story/amp-story-bot-rendering.html
index 48848928894dd..044979b7ceace 100644
--- a/examples/visual-tests/amp-story/amp-story-bot-rendering.html
+++ b/examples/visual-tests/amp-story/amp-story-bot-rendering.html
@@ -5,11 +5,10 @@
     <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-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
-    <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
-    <title>Landscape story</title>
+    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+    <title>Bot rendering</title>
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link rel="canonical" href="index.html">
+    <link rel="canonical" href="amp-story-bot-rendering.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>
       body {
@@ -31,6 +30,15 @@
       amp-story-page-attachment {
         color: rgba(0, 0, 0, 0.93);
       }
+
+      .block-to-hide-video-controls {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 80px;
+        background-color:#fff;
+      }
     </style>
     <script type="text/javascript">
       // Override user agent to trigger bot rendering.
@@ -68,7 +76,7 @@
         <amp-story-grid-layer template="fill">
           <amp-img layout="fill" src="./img/cat2.jpg"></amp-img>
         </amp-story-grid-layer>
-        <amp-story-grid-layer template="center">
+        <amp-story-grid-layer template="vertical">
           <p>
             <span data-text-background-color="crimson">i can fit in that box but inspect anything brought into the house wack the mini furry mouse intently stare at the same spot. Flee in terror at cucumber discovered on floor shake treat bag</span>
           </p>
@@ -80,7 +88,7 @@
         <amp-story-grid-layer template="fill">
           <amp-img layout="fill" src="./img/cat2.jpg"></amp-img>
         </amp-story-grid-layer>
-        <amp-story-grid-layer template="center">
+        <amp-story-grid-layer template="vertical">
           <p>
             <span data-text-background-color="crimson">i can fit in that box but inspect anything brought into the house wack the mini furry mouse intently stare at the same spot. Flee in terror at cucumber discovered on floor shake treat bag</span>
           </p>
@@ -88,8 +96,6 @@
         <amp-story-page-attachment data-title="Google" href="https://www.google.com" layout="nodisplay"></amp-story-page-attachment>
       </amp-story-page>
 
-      <!--
-      TODO(#26390) Remove comment when https://github.com/ampproject/amphtml/issues/26390 is fixed.
       <amp-story-page id="page2" title="This is a page title">
         <amp-story-grid-layer template="fill">
           <amp-video autoplay
@@ -104,8 +110,10 @@
             <track default src="../../amp-story/video/stamp.vtt" srclang="en">
           </amp-video>
         </amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
+          <div class="block-to-hide-video-controls"></div>
+        </amp-story-grid-layer>
       </amp-story-page>
-      -->
 
       <amp-story-page id="page3">
         <amp-story-grid-layer template="fill">
@@ -118,10 +126,9 @@
         </amp-story-grid-layer>
       </amp-story-page>
 
-      <amp-story-bookend layout="nodisplay">
+      <amp-story-social-share layout="nodisplay">
         <script type="application/json">
           {
-            "bookendVersion": "v1.0",
             "shareProviders": [
               "email",
               {"provider": "facebook", "app_id": "254325784911610"},
@@ -129,51 +136,10 @@
               "whatsapp",
               "pinterest",
               "line"
-            ],
-            "components": [
-              {
-                "type": "heading",
-                "text": "test"
-              },
-              {
-                "type": "small",
-                "title": "This is an example article",
-                "url": "/article.html",
-                "image": "http://placehold.it/500x600"
-              },
-              {
-                "type": "small",
-                "title": "This is an example article2",
-                "url": "http://example.com/article.html",
-                "image": "http://placehold.it/256x128"
-              },
-              {
-                "type": "small",
-                "title": "This is an example article3",
-                "url": "http://example.com/article.html",
-                "image": "http://placehold.it/256x128"
-              },
-              {
-                "type": "heading",
-                "text": "test2"
-              },
-              {
-                "type": "small",
-                "title": "This is an example article",
-                "url": "http://example.com/article.html",
-                "image": "http://placehold.it/256x128"
-              },
-              {
-                "type": "portrait",
-                "title": "Heading for portrait",
-                "category": "This is an example portrait",
-                "url": "http://example.com/article.html",
-                "image": "http://placehold.it/350x470"
-              }
             ]
           }
         </script>
-      </amp-story-bookend>
+      </amp-story-social-share>
     </amp-story>
   </body>
 </html>
diff --git a/examples/visual-tests/amp-story/amp-story-consent.html b/examples/visual-tests/amp-story/amp-story-consent.html
index a583455caac1d..8f6b181ce04e9 100644
--- a/examples/visual-tests/amp-story/amp-story-consent.html
+++ b/examples/visual-tests/amp-story/amp-story-consent.html
@@ -47,12 +47,9 @@
       <amp-consent id="myConsent" layout="nodisplay">
         <script type="application/json">
             {
-              "consents": {
-                "myConsent": {
-                  "checkConsentHref": "http://localhost:8000/get-consent-v1",
-                  "promptUI": "consentUI"
-                }
-              }
+              "consentInstanceId": "myConsent",
+              "checkConsentHref": "http://localhost:8000/get-consent-v1",
+              "promptUI": "consentUI"
             }
           </script>
         <amp-story-consent id="consentUI" layout="nodisplay">
@@ -79,8 +76,7 @@
 
       <amp-story-page id="cover">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="../../amp-story/img/poster2.jpg"></amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 id="hello-world">Hello world!</h1>
diff --git a/examples/visual-tests/amp-story/amp-story-consent.js b/examples/visual-tests/amp-story/amp-story-consent.js
index c4d3c37f3d6a4..d686b53d873be 100644
--- a/examples/visual-tests/amp-story/amp-story-consent.js
+++ b/examples/visual-tests/amp-story/amp-story-consent.js
@@ -16,12 +16,12 @@
 'use strict';
 
 module.exports = {
-  'accept consent': async (page, name) => {
+  'accept consent': async (page, unusedName) => {
     await page.tap('[on="tap:myConsent.accept"]');
     await page.waitForSelector('amp-consent.amp-hidden');
   },
 
-  'reject consent': async (page, name) => {
+  'reject consent': async (page, unusedName) => {
     await page.tap('[on="tap:myConsent.reject"]');
     await page.waitForSelector('amp-consent.amp-hidden');
   },
diff --git a/examples/visual-tests/amp-story/amp-story-consent.rtl.html b/examples/visual-tests/amp-story/amp-story-consent.rtl.html
index 93248246db061..566e4c64eee2f 100644
--- a/examples/visual-tests/amp-story/amp-story-consent.rtl.html
+++ b/examples/visual-tests/amp-story/amp-story-consent.rtl.html
@@ -46,14 +46,11 @@
 
       <amp-consent id="myConsent" layout="nodisplay">
         <script type="application/json">
-            {
-              "consents": {
-                "myConsent": {
-                  "checkConsentHref": "http://localhost:8000/get-consent-v1",
-                  "promptUI": "consentUI"
-                }
-              }
-            }
+          {
+            "consentInstanceId": "myConsent",
+            "checkConsentHref": "http://localhost:8000/get-consent-v1",
+            "promptUI": "consentUI"
+          }
           </script>
         <amp-story-consent id="consentUI" layout="nodisplay">
           <script type="application/json">
@@ -79,8 +76,7 @@
 
       <amp-story-page id="cover">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="../../amp-story/img/poster2.jpg"></amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 id="hello-world">مرحبا بالعالم</h1>
diff --git a/examples/visual-tests/amp-story/amp-story-cta-layer.html b/examples/visual-tests/amp-story/amp-story-cta-layer.html
index 878948ec9b4d1..0c953fd5987f8 100644
--- a/examples/visual-tests/amp-story/amp-story-cta-layer.html
+++ b/examples/visual-tests/amp-story/amp-story-cta-layer.html
@@ -16,7 +16,7 @@
         font-family: sans-serif;
       }
 
-      button {
+      amp-story-cta-layer button {
         background-color: blue;
         color: white;
         position: absolute;
diff --git a/examples/visual-tests/amp-story/amp-story-dev-tools.html b/examples/visual-tests/amp-story/amp-story-dev-tools.html
new file mode 100644
index 0000000000000..1231eb3c4f0fa
--- /dev/null
+++ b/examples/visual-tests/amp-story/amp-story-dev-tools.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-story-interactive-quiz example</title>
+  <link rel="canonical" href="amps.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-story-dev-tools" src="https://cdn.ampproject.org/v0/amp-story-dev-tools-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-story standalone
+    title="Dev tools"
+    publisher="The AMP Team"
+    publisher-logo-src="./img/AMP-Brand-White-Icon.svg"
+    poster-portrait-src="./img/overview.jpg">
+    <amp-story-page id="cover">
+      <amp-story-grid-layer template="fill">
+          <amp-img src="https://images.unsplash.com/photo-1562907550-096d3bf9b25c"
+          width="720" height="1280"
+          layout="responsive">
+      </amp-story-grid-layer>
+      <amp-story-grid-layer style="color: white" template="vertical">
+        This is a devtools story
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/examples/visual-tests/amp-story/amp-story-grid-layer-presets.html b/examples/visual-tests/amp-story/amp-story-grid-layer-presets.html
new file mode 100644
index 0000000000000..e81cc4f2dde30
--- /dev/null
+++ b/examples/visual-tests/amp-story/amp-story-grid-layer-presets.html
@@ -0,0 +1,74 @@
+<!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>
+    <title>amp-story-grid-layer[template="thirds"] visual diff</title>
+    <meta name="viewport"
+          content="width=device-width,minimum-scale=1,initial-scale=1">
+    <link rel="canonical" href="./amp-story-grid-layer-presets.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>
+      amp-story-page {
+        background: linear-gradient(135deg, rgb(6, 74, 108), rgb(4, 32, 67));
+        font-family: sans-serif;
+        color: white;
+        font-weight: bold;
+      }
+      .bordered {
+        border: 2px solid #ffffff22;
+        font-size: 10px;
+      }
+
+      span {
+        padding: 10px;
+      }
+    </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">
+        <amp-story-page id="anchors">
+          <amp-story-grid-layer template="fill" preset="2021-background">
+            <amp-img src="https://images.unsplash.com/photo-1522072629756-c9274e34ef5e?w=1000&q=80"
+              layout="responsive" width="69" height="116">
+            </amp-img>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer preset="2021-foreground" anchor="right" class="bordered small">
+            <span style="position: absolute; right: 0; top: 45%">Right</span>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer preset="2021-foreground" anchor="left" class="bordered small">
+            <span style="position: absolute; left: 0; top: 45%">Left</span>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer preset="2021-foreground" anchor="top" class="bordered small">
+            <span style="position: absolute; left: 40%; top: 0">Top</span>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer preset="2021-foreground" anchor="bottom" class="bordered small">
+            <span style="position: absolute; left: 40%; bottom: 0">Bottom</span>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer preset="2021-foreground" class="bordered small">
+            <span style="position: absolute; left: 40%; top: 45%">Center</span>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer preset="2021-foreground" anchor="top right" class="bordered small">
+            <span style="position: absolute; right: 0; top: 0">Top Right</span>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer preset="2021-foreground" anchor="top left" class="bordered small">
+            <span style="position: absolute; left: 0; top: 0">Top Left</span>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer preset="2021-foreground" anchor="bottom right" class="bordered small">
+            <span style="position: absolute; right: 0; bottom: 0">Bottom Right</span>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer preset="2021-foreground" anchor="bottom left" class="bordered small">
+            <span style="position: absolute; left: 0; bottom: 0">Bottom Left</span>
+          </amp-story-grid-layer>
+        </amp-story-page>
+    </amp-story>
+  </body>
+
+</html>
diff --git a/examples/visual-tests/amp-story/amp-story-interactive-quiz-sizing-positioning.html b/examples/visual-tests/amp-story/amp-story-interactive-quiz-sizing-positioning.html
new file mode 100644
index 0000000000000..8880b948ced40
--- /dev/null
+++ b/examples/visual-tests/amp-story/amp-story-interactive-quiz-sizing-positioning.html
@@ -0,0 +1,112 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-story-interactive-quiz example</title>
+  <link rel="canonical" href="amps.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+    h1 #cat-facts-title {
+      color: white;
+      font-family: Helvetica;
+      text-align: center;
+      font-size: 48px;
+    }
+  </style>
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-story-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-story standalone id="cat-facts"
+    title="Cat Facts!"
+    publisher="The AMP Team"
+    publisher-logo-src="./img/AMP-Brand-White-Icon.svg"
+    poster-portrait-src="./img/overview.jpg">
+    <amp-story-page id="quiz-question-3">
+      <amp-story-grid-layer template="fill">
+          <amp-img src="https://i.pinimg.com/originals/8d/b1/e9/8db1e9b7cc3ee52b13cabe3a53c62f05.jpg"
+          width="720" height="1280"
+          layout="responsive">
+      </amp-story-grid-layer>
+      <style>
+        #cat-question-cute {
+          justify-content: flex-end;
+          align-content: flex-end;
+        }
+        amp-story-interactive-quiz.size {
+          font-size: 16px;
+        }
+      </style>
+      <amp-story-grid-layer id='cat-question-cute'>
+        <amp-story-interactive-quiz
+        class="size"
+        prompt-text="Are cats cute?"
+        option-1-text="Yes" option-1-correct
+        option-2-text="No">
+        </amp-story-interactive-quiz>
+      </amp-story-grid-layer>
+      <amp-story-page-attachment layout="nodisplay" theme="dark">
+        <h1>Amazing title</h1>
+        <p>Bacon ipsum dolor cat cat cat.</p>
+        <amp-youtube
+            id="myLiveChannel"
+            data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
+            width="358"
+            height="204"
+            layout="responsive">
+          <amp-img
+              src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
+              placeholder
+              layout="fill">
+          </amp-img>
+        </amp-youtube>
+      </amp-story-page-attachment>
+    </amp-story-page>
+    <amp-story-page id="sleepy-cat">
+      <amp-story-grid-layer template="fill">
+          <amp-img src="https://i.pinimg.com/originals/60/3d/be/603dbeae12bb77121f912d48aee8ee4e.jpg"
+          width="720" height="1280"
+          layout="responsive">
+      </amp-story-grid-layer>
+      <amp-story-grid-layer template="vertical">
+        <h1 id="cat-facts-title">Cat Facts!</h1>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="quiz-question-1">
+      <amp-story-grid-layer template="fill">
+          <amp-img src="https://dw5orfsilhv7r.cloudfront.net/wp-content/uploads/2016/03/petandco-wallpapers-cats-phone-01.png"
+          width="720" height="1280"
+          layout="responsive">
+      </amp-story-grid-layer>
+      <amp-story-grid-layer>
+        <amp-story-interactive-quiz
+          id='cat-question-appear'
+          prompt-text="When did the domestic cat first appear on the scene?"
+          option-1-text="7,000 years ago"
+          option-2-text="500,000 years ago" option-2-correct
+          option-3-text="2 million years ago"
+          option-4-text="34 million years ago">
+        </amp-story-interactive-quiz>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="quiz-question-2">
+        <amp-story-grid-layer template="fill">
+            <amp-img src="https://i.pinimg.com/originals/08/20/d3/0820d30c849627c7939761637ac90219.jpg"
+            width="720" height="1280"
+            layout="responsive">
+        </amp-story-grid-layer>
+        <amp-story-grid-layer>
+          <amp-story-interactive-quiz
+            id='cat-question-handedness'
+            prompt-text="True or False: Cats can be right-pawed or left-pawed."
+            option-1-text="True" option-1-correct
+            option-2-text="False"
+            option-3-text="The quick brown fox jumped over the lazy dog lorem ipsum dolor sit amet as d f ghjkl">
+          </amp-story-interactive-quiz>
+        </amp-story-grid-layer>
+      </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/examples/visual-tests/amp-story/amp-story-landscape-templates.js b/examples/visual-tests/amp-story/amp-story-landscape-templates.js
index b292f28d7224c..984b2fc46767e 100644
--- a/examples/visual-tests/amp-story/amp-story-landscape-templates.js
+++ b/examples/visual-tests/amp-story/amp-story-landscape-templates.js
@@ -16,11 +16,17 @@
 'use strict';
 
 module.exports = {
-  'shows half-half template with image on the left': async (page, name) => {
-    await page.waitFor(1600);
+  'shows half-half template with image on the left': async (
+    page,
+    unusedName
+  ) => {
+    await page.waitForTimeout(1600);
   },
-  'shows half-half template with image on the right': async (page, name) => {
+  'shows half-half template with image on the right': async (
+    page,
+    unusedName
+  ) => {
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page1[active]');
+    await page.waitForSelector('amp-story-page#page1[active]');
   },
- };
+};
diff --git a/examples/visual-tests/amp-story/amp-story-live-story.js b/examples/visual-tests/amp-story/amp-story-live-story.js
index 577f45270e4b4..16f0e76a6f532 100644
--- a/examples/visual-tests/amp-story/amp-story-live-story.js
+++ b/examples/visual-tests/amp-story/amp-story-live-story.js
@@ -16,17 +16,27 @@
 'use strict';
 
 module.exports = {
-  'should show the notification.': async page => {
-    await page.waitFor('amp-story-page#cover[active]');
-    await page.$eval('.i-amphtml-story-system-layer', e => e.setAttribute('i-amphtml-story-has-new-page', 'show'));
-    await page.waitFor(2000); // For animations to finish.
-    await page.waitForSelector('.i-amphtml-story-has-new-page-notification-container', {opacity: 1});
+  'should show the notification.': async (page) => {
+    await page.waitForSelector('amp-story-page#cover[active]');
+    await page.$eval('.i-amphtml-story-system-layer', (e) =>
+      e.setAttribute('i-amphtml-story-has-new-page', 'show')
+    );
+    await page.waitForTimeout(2000); // For animations to finish.
+    await page.waitForSelector(
+      '.i-amphtml-story-has-new-page-notification-container',
+      {opacity: 1}
+    );
   },
-  '[RTL] should show the notification.': async page => {
-    await page.$eval('body', e => e.setAttribute('dir', 'rtl'));
-    await page.waitFor('amp-story-page#cover[active]');
-    await page.$eval('.i-amphtml-story-system-layer', e => e.setAttribute('i-amphtml-story-has-new-page', 'show'));
-    await page.waitFor(2000); // For animations to finish.
-    await page.waitForSelector('.i-amphtml-story-has-new-page-notification-container', {opacity: 1});
+  '[RTL] should show the notification.': async (page) => {
+    await page.$eval('body', (e) => e.setAttribute('dir', 'rtl'));
+    await page.waitForSelector('amp-story-page#cover[active]');
+    await page.$eval('.i-amphtml-story-system-layer', (e) =>
+      e.setAttribute('i-amphtml-story-has-new-page', 'show')
+    );
+    await page.waitForTimeout(2000); // For animations to finish.
+    await page.waitForSelector(
+      '.i-amphtml-story-has-new-page-notification-container',
+      {opacity: 1}
+    );
   },
- };
+};
diff --git a/examples/visual-tests/amp-story/amp-story-page-attachment-desktop.js b/examples/visual-tests/amp-story/amp-story-page-attachment-desktop.js
index da1285b088761..f99e36d413068 100644
--- a/examples/visual-tests/amp-story/amp-story-page-attachment-desktop.js
+++ b/examples/visual-tests/amp-story/amp-story-page-attachment-desktop.js
@@ -16,12 +16,12 @@
 'use strict';
 
 module.exports = {
-  'open attachment UI element': async (page, name) => {
-    await page.waitFor(1600);
+  'open attachment UI element': async (page, unusedName) => {
+    await page.waitForTimeout(1600);
   },
 
-  'open attachment': async (page, name) => {
+  'open attachment': async (page, unusedName) => {
     await page.tap('.i-amphtml-story-page-open-attachment-label');
-    await page.waitFor(410);
+    await page.waitForTimeout(410);
   },
- };
+};
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 0000000000000..6bdf96efdeb56
--- /dev/null
+++ b/examples/visual-tests/amp-story/amp-story-page-attachment-v2.html
@@ -0,0 +1,189 @@
+<!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-video"
+        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+    <script>
+      (self.AMP = self.AMP || []).push(function(AMP) {
+        AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true);
+      });
+    </script>
+    <title>AMP Story page attachment</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>
+      amp-story-page {
+        background: linear-gradient(#de6262, #ffb88c);
+        color: white;
+        font-family: sans-serif;
+      }
+
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
+      amp-story-page-attachment {
+        color: rgba(0, 0, 0, 0.87);
+        font-size: 16px;
+        line-height: 1.48em;
+      }
+
+      amp-story-page-attachment h1 {
+        padding: 0 24px;
+        font-size: 28px;
+        line-height: 1.48em;
+      }
+
+      amp-story-page-attachment p {
+        padding: 0 24px;
+      }
+    </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="inline-default">
+        <amp-story-page-attachment layout="nodisplay">
+          <h1>Some really cool video</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="inline-custom-text">
+        <amp-story-page-attachment
+          layout="nodisplay"
+          cta-text="Custom text">
+          <h1>Some really cool video</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="inline-dark-theme">
+        <amp-story-page-attachment
+          layout="nodisplay"
+          theme="dark">
+          <h1>Some really cool video</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="inline-dark-theme-1-image">
+        <amp-story-page-attachment
+          title="Lorem ipsum"
+          layout="nodisplay"
+          cta-image="../../amp-story/img/sweater.jpg"
+          theme="dark"
+          >
+          <h1>Some really cool video</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="inline-dark-theme-2-images">
+        <amp-story-page-attachment
+          title="Lorem ipsum"
+          layout="nodisplay"
+          cta-image="../../amp-story/img/sweater.jpg"
+          cta-image-2="../../amp-story/img/boot.jpg"
+          theme="dark"
+          >
+          <h1>Some really cool video</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="inline-light-theme-2-images">
+        <amp-story-page-attachment
+          title="Lorem ipsum"
+          layout="nodisplay"
+          cta-image="../../amp-story/img/sweater.jpg"
+          cta-image-2="../../amp-story/img/boot.jpg"
+          >
+          <h1>Some really cool video</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-default">
+        <amp-story-page-attachment layout="nodisplay" href="https://google.com">
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-custom-text">
+        <amp-story-page-attachment
+          layout="nodisplay"
+          href="https://google.com"
+          cta-text="Custom text">
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-no-image">
+        <amp-story-page-attachment
+          layout="nodisplay"
+          href="https://google.com"
+          cta-image="none">
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-custom-image">
+        <amp-story-page-attachment
+          layout="nodisplay"
+          href="https://google.com"
+          cta-image="../../amp-story/img/sweater.jpg">
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-dark-theme">
+        <amp-story-page-attachment
+          layout="nodisplay"
+          href="https://google.com"
+          theme="dark">
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-custom-background-color">
+        <amp-story-page-attachment
+          layout="nodisplay"
+          href="https://google.com"
+          theme="custom"
+          cta-accent-color="pink"
+          cta-accent-element="background">
+        </amp-story-page-attachment>
+      </amp-story-page>
+
+      <amp-story-page id="outlink-custom-text-color">
+        <amp-story-page-attachment
+          layout="nodisplay"
+          href="https://google.com"
+          theme="custom"
+          cta-accent-color="pink"
+          cta-accent-element="text">
+        </amp-story-page-attachment>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
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 0000000000000..afce5e45bc938
--- /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/examples/visual-tests/amp-story/amp-story-page-attachment.html b/examples/visual-tests/amp-story/amp-story-page-attachment.html
index 31475dd0e4d51..6457d533423ba 100644
--- a/examples/visual-tests/amp-story/amp-story-page-attachment.html
+++ b/examples/visual-tests/amp-story/amp-story-page-attachment.html
@@ -14,7 +14,7 @@
     <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>
       amp-story-page {
-        background: black;
+        background: linear-gradient(#de6262, #ffb88c);
         color: white;
         font-family: sans-serif;
       }
@@ -62,6 +62,10 @@ <h1>Some really cool video</h1>
           </p>
         </amp-story-page-attachment>
       </amp-story-page>
+      <amp-story-page id="page-2">
+        <amp-story-page-attachment layout="nodisplay" href="https://google.com">
+        </amp-story-page-attachment>
+      </amp-story-page>
     </amp-story>
   </body>
 </html>
diff --git a/examples/visual-tests/amp-story/amp-story-page-attachment.js b/examples/visual-tests/amp-story/amp-story-page-attachment.js
index da1285b088761..ec49dbe4116a1 100644
--- a/examples/visual-tests/amp-story/amp-story-page-attachment.js
+++ b/examples/visual-tests/amp-story/amp-story-page-attachment.js
@@ -16,12 +16,22 @@
 'use strict';
 
 module.exports = {
-  'open attachment UI element': async (page, name) => {
-    await page.waitFor(1600);
+  'open attachment UI element': async (page, unusedName) => {
+    await page.waitForTimeout(1600);
   },
 
-  'open attachment': async (page, name) => {
+  'open attachment': async (page, unusedName) => {
     await page.tap('.i-amphtml-story-page-open-attachment-label');
-    await page.waitFor(410);
+    await page.waitForTimeout(410);
   },
- };
+  /**
+   * TODO(@ampproject/wg-stories): fix flaky test:
+   * https://percy.io/ampproject/amphtml/builds-next/8331061/changed/473805330
+   *
+   * 'open attachment UI element with link': async (page, unusedName) => {
+   *   const screen = page.touchscreen;
+   *   await screen.tap(200, 240);
+   *   await page.waitForSelector('amp-story-page#page-2[active]');
+   * },
+   */
+};
diff --git a/examples/visual-tests/amp-story/amp-story-pagination-buttons.html b/examples/visual-tests/amp-story/amp-story-pagination-buttons.html
index 86cd8f35254fb..58db87b3deb8f 100644
--- a/examples/visual-tests/amp-story/amp-story-pagination-buttons.html
+++ b/examples/visual-tests/amp-story/amp-story-pagination-buttons.html
@@ -76,10 +76,6 @@
           <p>page 3</p>
         </amp-story-grid-layer>
     </amp-story-page>
-
-    <amp-story-bookend src="bookend-en.json" layout="nodisplay">
-    </amp-story-bookend>
-
   </amp-story>
   </body>
 </html>
diff --git a/examples/visual-tests/amp-story/amp-story-pagination-buttons.js b/examples/visual-tests/amp-story/amp-story-pagination-buttons.js
index 80cb76b07fa85..3f3561faa4b49 100644
--- a/examples/visual-tests/amp-story/amp-story-pagination-buttons.js
+++ b/examples/visual-tests/amp-story/amp-story-pagination-buttons.js
@@ -15,48 +15,36 @@
  */
 'use strict';
 
-const {verifySelectorsVisible} = require('../../../build-system/tasks/visual-diff/helpers');
+const {
+  verifySelectorsVisible,
+} = require('../../../build-system/tasks/visual-diff/helpers');
 
 module.exports = {
   'shows corresponding buttons for first page': async (page, name) => {
-    await verifySelectorsVisible(page, name,
-      [
-        '.next-container > .i-amphtml-story-button-move',
-        '.prev-container.i-amphtml-story-button-hidden',
-      ]);
+    await verifySelectorsVisible(page, name, [
+      '.next-container > .i-amphtml-story-button-move',
+      '.prev-container.i-amphtml-story-button-hidden',
+    ]);
   },
-  'shows corresponding buttons when there is a previous and next page':
-      async (page, name) => {
+  'shows corresponding buttons when there is a previous and next page': async (
+    page,
+    name
+  ) => {
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-2[active]');
-    await verifySelectorsVisible(page, name,
-      [
-        '.next-container > button.i-amphtml-story-button-move',
-        '.prev-container > button.i-amphtml-story-button-move',
-      ]);
+    await page.waitForSelector('amp-story-page#page-2[active]');
+    await verifySelectorsVisible(page, name, [
+      '.next-container > button.i-amphtml-story-button-move',
+      '.prev-container > button.i-amphtml-story-button-move',
+    ]);
   },
   'shows corresponding buttons for last page': async (page, name) => {
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-2[active]');
+    await page.waitForSelector('amp-story-page#page-2[active]');
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-3[active]');
-    await verifySelectorsVisible(page, name,
-      [
-        '.i-amphtml-story-fwd-more',
-        '.prev-container > button.i-amphtml-story-button-move',
-      ]);
+    await page.waitForSelector('amp-story-page#page-3[active]');
+    await verifySelectorsVisible(page, name, [
+      '.i-amphtml-story-fwd-more',
+      '.prev-container > button.i-amphtml-story-button-move',
+    ]);
   },
-  'shows corresponding buttons for bookend': async (page, name) => {
-    await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-3[active]');
-    await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('.i-amphtml-story-bookend-active');
-    await verifySelectorsVisible(page, name,
-      [
-        '.i-amphtml-story-fwd-replay',
-        '.i-amphtml-story-back-close-bookend',
-      ]);
-  },
- };
+};
diff --git a/examples/visual-tests/amp-story/amp-story-reaction-quiz-sizing-positioning.html b/examples/visual-tests/amp-story/amp-story-reaction-quiz-sizing-positioning.html
deleted file mode 100644
index bab172a1de7dc..0000000000000
--- a/examples/visual-tests/amp-story/amp-story-reaction-quiz-sizing-positioning.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>amp-story-reaction-quiz example</title>
-  <link rel="canonical" href="amps.html">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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>
-    h1 #cat-facts-title {
-      color: white;
-      font-family: Helvetica;
-      text-align: center;
-      font-size: 48px;
-    }
-  </style>
-  <script async custom-element="amp-story"
-        src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <amp-story standalone id="cat-facts"
-    title="Cat Facts!"
-    publisher="The AMP Team"
-    publisher-logo-src="./img/AMP-Brand-White-Icon.svg"
-    poster-portrait-src="./img/overview.jpg">
-    <amp-story-page id="quiz-question-3">
-      <amp-story-grid-layer template="fill">
-          <amp-img src="https://i.pinimg.com/originals/8d/b1/e9/8db1e9b7cc3ee52b13cabe3a53c62f05.jpg"
-          width="720" height="1280"
-          layout="responsive">
-      </amp-story-grid-layer>
-      <style>
-        #cat-question-cute {
-          justify-content: flex-end;
-          align-content: flex-end;
-        }
-      </style>
-      <amp-story-grid-layer id='cat-question-cute'>
-        <amp-story-reaction-quiz
-        prompt-text="Are cats cute?"
-        option-1-text="Yes" option-1-correct
-        option-2-text="No">
-        </amp-story-reaction-quiz>
-      </amp-story-grid-layer>
-      <amp-story-page-attachment layout="nodisplay" theme="dark">
-        <h1>Amazing title</h1>
-        <p>Bacon ipsum dolor cat cat cat.</p>
-        <amp-youtube
-            id="myLiveChannel"
-            data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
-            width="358"
-            height="204"
-            layout="responsive">
-          <amp-img
-              src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
-              placeholder
-              layout="fill">
-          </amp-img>
-        </amp-youtube>
-      </amp-story-page-attachment>
-    </amp-story-page>
-    <amp-story-page id="sleepy-cat">
-      <amp-story-grid-layer template="fill">
-          <amp-img src="https://i.pinimg.com/originals/60/3d/be/603dbeae12bb77121f912d48aee8ee4e.jpg"
-          width="720" height="1280"
-          layout="responsive">
-      </amp-story-grid-layer>
-      <amp-story-grid-layer template="vertical">
-        <h1 id="cat-facts-title">Cat Facts!</h1>
-      </amp-story-grid-layer>
-    </amp-story-page>
-    <amp-story-page id="quiz-question-1">
-      <amp-story-grid-layer template="fill">
-          <amp-img src="https://dw5orfsilhv7r.cloudfront.net/wp-content/uploads/2016/03/petandco-wallpapers-cats-phone-01.png"
-          width="720" height="1280"
-          layout="responsive">
-      </amp-story-grid-layer>
-      <amp-story-grid-layer>
-        <amp-story-reaction-quiz
-          id='cat-question-appear'
-          prompt-text="When did the domestic cat first appear on the scene?"
-          option-1-text="7,000 years ago"
-          option-2-text="500,000 years ago" option-2-correct
-          option-3-text="2 million years ago"
-          option-4-text="34 million years ago">
-        </amp-story-reaction-quiz>
-      </amp-story-grid-layer>
-    </amp-story-page>
-    <amp-story-page id="quiz-question-2">
-        <amp-story-grid-layer template="fill">
-            <amp-img src="https://i.pinimg.com/originals/08/20/d3/0820d30c849627c7939761637ac90219.jpg"
-            width="720" height="1280"
-            layout="responsive">
-        </amp-story-grid-layer>
-        <amp-story-grid-layer>
-          <amp-story-reaction-quiz
-            id='cat-question-handedness'
-            prompt-text="True or False: Cats can be right-pawed or left-pawed."
-            option-1-text="True" option-1-correct
-            option-2-text="False"
-            option-3-text="The quick brown fox jumped over the lazy dog lorem ipsum dolor sit amet as d f ghjkl">
-          </amp-story-reaction-quiz>
-        </amp-story-grid-layer>
-      </amp-story-page>
-  </amp-story>
-</body>
-</html>
diff --git a/examples/visual-tests/amp-story/amp-story-sidebar.js b/examples/visual-tests/amp-story/amp-story-sidebar.js
index 63918c9e1113d..6c757a9b01d32 100644
--- a/examples/visual-tests/amp-story/amp-story-sidebar.js
+++ b/examples/visual-tests/amp-story/amp-story-sidebar.js
@@ -15,43 +15,44 @@
  */
 'use strict';
 
-const {verifySelectorsVisible} = require('../../../build-system/tasks/visual-diff/helpers');
+const {
+  verifySelectorsVisible,
+} = require('../../../build-system/tasks/visual-diff/helpers');
 
 module.exports = {
-  'tapping on sidebar control button should show sidebar and opacity mask': async (page, name) => {
-    const screen = page.touchscreen;
-    await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#cover[active]');
-    await page.tap('.i-amphtml-story-sidebar-control');
-    await verifySelectorsVisible(page, name,
-      [
+  'tapping on sidebar control button should show sidebar and opacity mask':
+    async (page, name) => {
+      const screen = page.touchscreen;
+      await screen.tap(200, 240);
+      await page.waitForSelector('amp-story-page#cover[active]');
+      await page.tap('.i-amphtml-story-sidebar-control');
+      await verifySelectorsVisible(page, name, [
         'amp-sidebar[side][open]',
         '.i-amphtml-story-opacity-mask',
       ]);
-  },
-  'tapping on element with sidebar close action should close opacity mask ': async(page,name) => {
-    const screen = page.touchscreen;
-    await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#cover[active]');
-    await page.tap('.i-amphtml-story-sidebar-control');
-    await page.waitFor(400);
-    await page.tap('button#close-button');
-    await verifySelectorsVisible(page, name,
-    [
-      'amp-sidebar[hidden]',
-      '.i-amphtml-story-opacity-mask[hidden]',
-    ]);
-  },
-  'tapping on the opacity mask should close sidebar ': async(page,name) => {
+    },
+  'tapping on element with sidebar close action should close opacity mask ':
+    async (page, name) => {
+      const screen = page.touchscreen;
+      await screen.tap(200, 240);
+      await page.waitForSelector('amp-story-page#cover[active]');
+      await page.tap('.i-amphtml-story-sidebar-control');
+      await page.waitForTimeout(400);
+      await page.tap('button#close-button');
+      await verifySelectorsVisible(page, name, [
+        'amp-sidebar[hidden]',
+        '.i-amphtml-story-opacity-mask[hidden]',
+      ]);
+    },
+  'tapping on the opacity mask should close sidebar ': async (page, name) => {
     const screen = page.touchscreen;
     await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#cover[active]');
+    await page.waitForSelector('amp-story-page#cover[active]');
     await page.tap('.i-amphtml-story-sidebar-control');
     await screen.tap(200, 240);
-    await verifySelectorsVisible(page, name,
-    [
+    await verifySelectorsVisible(page, name, [
       'amp-sidebar[hidden]',
       '.i-amphtml-story-opacity-mask[hidden]',
     ]);
   },
- };
+};
diff --git a/examples/visual-tests/amp-story/amp-story-tooltip-desktop.js b/examples/visual-tests/amp-story/amp-story-tooltip-desktop.js
index a24d7237c944d..43f6f58410dad 100644
--- a/examples/visual-tests/amp-story/amp-story-tooltip-desktop.js
+++ b/examples/visual-tests/amp-story/amp-story-tooltip-desktop.js
@@ -15,83 +15,100 @@
  */
 'use strict';
 
-const {verifySelectorsVisible, verifySelectorsInvisible} = require('../../../build-system/tasks/visual-diff/helpers');
+const {
+  verifySelectorsInvisible,
+  verifySelectorsVisible,
+} = require('../../../build-system/tasks/visual-diff/helpers');
 
 module.exports = {
-  'tapping on a clickable anchor should show the tooltip': async (page, name) => {
+  'tapping on a clickable anchor should show the tooltip': async (
+    page,
+    name
+  ) => {
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForSelector('amp-story-page#page-2[active]');
+    await page.waitForTimeout(300); // For animations to finish.
     await page.tap('a.title-small.center');
-    await page.waitFor(800); // For animations to finish.
+    await page.waitForTimeout(800); // For animations to finish.
     await verifySelectorsVisible(page, name, ['a.i-amphtml-story-tooltip']);
   },
   'tapping outside tooltip should hide it': async (page, name) => {
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForSelector('amp-story-page#page-2[active]');
+    await page.waitForTimeout(300); // For animations to finish.
     await page.tap('a.title-small.center');
-    await page.waitFor('a.i-amphtml-story-tooltip');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForSelector('a.i-amphtml-story-tooltip');
+    await page.waitForTimeout(300); // For animations to finish.
     await page.tap('.i-amphtml-story-focused-state-layer');
-    await page.waitFor(800); // For animations to finish.
-    await verifySelectorsVisible(
-      page, name, ['.i-amphtml-story-focused-state-layer.i-amphtml-hidden']);
+    await page.waitForTimeout(800); // For animations to finish.
+    await verifySelectorsVisible(page, name, [
+      '.i-amphtml-story-focused-state-layer.i-amphtml-hidden',
+    ]);
   },
   'tapping on anchor tooltip should keep it open': async (page, name) => {
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForSelector('amp-story-page#page-2[active]');
+    await page.waitForTimeout(300); // For animations to finish.
     await page.tap('a.title-small.center');
-    await page.waitFor('a.i-amphtml-story-tooltip');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForSelector('a.i-amphtml-story-tooltip');
+    await page.waitForTimeout(300); // For animations to finish.
     await page.tap('a.i-amphtml-story-tooltip');
-    await page.waitFor(800); // For animations to finish.
+    await page.waitForTimeout(800); // For animations to finish.
     await verifySelectorsVisible(page, name, ['a.i-amphtml-story-tooltip']);
   },
   'tapping arrow when tooltip is open should navigate': async (page, name) => {
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForSelector('amp-story-page#page-2[active]');
+    await page.waitForTimeout(300); // For animations to finish.
     await page.tap('a.title-small.center');
-    await page.waitFor('a.i-amphtml-story-tooltip');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForSelector('a.i-amphtml-story-tooltip');
+    await page.waitForTimeout(300); // For animations to finish.
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor(800); // For animations to finish.
+    await page.waitForTimeout(800); // For animations to finish.
     await verifySelectorsVisible(page, name, ['amp-story-page#page-3[active]']);
   },
-  'tapping on embed tooltip should expand the component': async (page, name) => {
+  'tapping on embed tooltip should expand the component': async (
+    page,
+    name
+  ) => {
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForSelector('amp-story-page#page-2[active]');
+    await page.waitForTimeout(300); // For animations to finish.
     await page.tap('amp-twitter.interactive-embed');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForTimeout(300); // For animations to finish.
     await page.tap('a.i-amphtml-story-tooltip');
-    await page.waitFor(800); // For animations to finish.
-    await verifySelectorsVisible(page, name, ['amp-story-page.i-amphtml-expanded-mode']);
-  },
-  'tapping on non-interactive embed should not show tooltip or block navigation': async (page, name) => {
-    await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(300); // For animations to finish.
-    await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-3[active]');
-    await page.waitFor(300); // For animations to finish.
-    await page.tap('amp-twitter.non-interactive-embed');
-    await page.waitFor(800); // For animations to finish.
-    await verifySelectorsInvisible(page, name, ['a.i-amphtml-story-tooltip']);
-    await verifySelectorsVisible(page, name, ['amp-story-page#page-4[active]']);
+    await page.waitForTimeout(800); // For animations to finish.
+    await verifySelectorsVisible(page, name, [
+      'amp-story-page.i-amphtml-expanded-mode',
+    ]);
   },
+  'tapping on non-interactive embed should not show tooltip or block navigation':
+    async (page, name) => {
+      await page.tap('.next-container > button.i-amphtml-story-button-move');
+      await page.waitForSelector('amp-story-page#page-2[active]');
+      await page.waitForTimeout(300); // For animations to finish.
+      await page.tap('.next-container > button.i-amphtml-story-button-move');
+      await page.waitForSelector('amp-story-page#page-3[active]');
+      await page.waitForTimeout(300); // For animations to finish.
+      await page.tap('amp-twitter.non-interactive-embed');
+      await page.waitForTimeout(800); // For animations to finish.
+      await verifySelectorsInvisible(page, name, ['a.i-amphtml-story-tooltip']);
+      await verifySelectorsVisible(page, name, [
+        'amp-story-page#page-4[active]',
+      ]);
+    },
   'tapping on closing button should exit expanded view': async (page, name) => {
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForSelector('amp-story-page#page-2[active]');
+    await page.waitForTimeout(300); // For animations to finish.
     await page.tap('amp-twitter.interactive-embed');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForTimeout(300); // For animations to finish.
     await page.tap('a.i-amphtml-story-tooltip');
-    await page.waitFor('amp-story-page.i-amphtml-expanded-mode');
-    await page.waitFor(800); // For animations to finish.
+    await page.waitForSelector('amp-story-page.i-amphtml-expanded-mode');
+    await page.waitForTimeout(800); // For animations to finish.
     await page.tap('span.i-amphtml-expanded-view-close-button');
-    await verifySelectorsInvisible(page, name, ['amp-story-page.i-amphtml-expanded-mode']);
+    await verifySelectorsInvisible(page, name, [
+      'amp-story-page.i-amphtml-expanded-mode',
+    ]);
   },
- };
+};
diff --git a/examples/visual-tests/amp-story/amp-story-tooltip.html b/examples/visual-tests/amp-story/amp-story-tooltip.html
index 4b9c46bcfb2c7..8d97568191c44 100644
--- a/examples/visual-tests/amp-story/amp-story-tooltip.html
+++ b/examples/visual-tests/amp-story/amp-story-tooltip.html
@@ -47,6 +47,10 @@
         width: 50px;
         height: 200px;
       }
+
+      .anchor-container {
+        margin: 20px;
+      }
     </style>
   </head>
 
@@ -68,7 +72,9 @@ <h1 class="hello-world">Hello world!</h1>
         <amp-story-grid-layer template="vertical">
           <h1 class="hello-world">Hello world!</h1>
           <p>Page two of four</p>
-          <a href="google.com" role="link" data-tooltip-text="Hola" class="title-small center">Click me!</a>
+          <div class="anchor-container">
+            <a href="google.com" role="link" data-tooltip-text="Hola" class="title-small center">Click me!</a>
+          </div>
           <amp-twitter class="interactive-embed" interactive></amp-twitter>
           <p>Text under embed</p>
         </amp-story-grid-layer>
diff --git a/examples/visual-tests/amp-story/amp-story-tooltip.js b/examples/visual-tests/amp-story/amp-story-tooltip.js
index d8e1289bf19ee..f4f18c441853a 100644
--- a/examples/visual-tests/amp-story/amp-story-tooltip.js
+++ b/examples/visual-tests/amp-story/amp-story-tooltip.js
@@ -15,91 +15,98 @@
  */
 'use strict';
 
-const {verifySelectorsVisible, verifySelectorsInvisible} = require('../../../build-system/tasks/visual-diff/helpers');
+const {
+  verifySelectorsInvisible,
+  verifySelectorsVisible,
+} = require('../../../build-system/tasks/visual-diff/helpers');
 
 module.exports = {
-  'tapping on a clickable anchor should show the tooltip': async (page, name) => {
+  'tapping on a clickable anchor should show the tooltip': async (
+    page,
+    name
+  ) => {
     const screen = page.touchscreen;
     await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(150); // For animations to finish.
+    await page.waitForSelector('amp-story-page#page-2[active]');
+    await page.waitForTimeout(500); // For animations to finish.
     await page.tap('a.title-small.center');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForTimeout(300); // For animations to finish.
     await verifySelectorsVisible(page, name, ['a.i-amphtml-story-tooltip']);
   },
   'tapping outside tooltip should hide it': async (page, name) => {
     const screen = page.touchscreen;
     await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(150); // For animations to finish.
+    await page.waitForSelector('amp-story-page#page-2[active]');
+    await page.waitForTimeout(150); // For animations to finish.
     await page.tap('a.title-small.center');
-    await page.waitFor('a.i-amphtml-story-tooltip');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForSelector('a.i-amphtml-story-tooltip');
+    await page.waitForTimeout(300); // For animations to finish.
     await page.tap('.i-amphtml-story-focused-state-layer');
-    await page.waitFor(150); // For animations to finish.
-    await verifySelectorsVisible(
-      page, name, ['.i-amphtml-story-focused-state-layer.i-amphtml-hidden']);
-  },
-  'tapping on anchor tooltip should keep it open': async (page, name) => {
-    const screen = page.touchscreen;
-    await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(150); // For animations to finish.
-    await page.tap('a.title-small.center');
-    await page.waitFor('a.i-amphtml-story-tooltip');
-    await page.waitFor(300); // For animations to finish.
-    await page.tap('a.i-amphtml-story-tooltip');
-    await verifySelectorsVisible(page, name, ['a.i-amphtml-story-tooltip']);
+    await page.waitForTimeout(150); // For animations to finish.
+    await verifySelectorsVisible(page, name, [
+      '.i-amphtml-story-focused-state-layer.i-amphtml-hidden',
+    ]);
   },
   'tapping arrow when tooltip is open should navigate': async (page, name) => {
     const screen = page.touchscreen;
     await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(150); // For animations to finish.
+    await page.waitForSelector('amp-story-page#page-2[active]');
+    await page.waitForTimeout(150); // For animations to finish.
     await page.tap('a.title-small.center');
-    await page.waitFor('a.i-amphtml-story-tooltip');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForSelector('a.i-amphtml-story-tooltip');
+    await page.waitForTimeout(300); // For animations to finish.
     await page.tap('button.i-amphtml-story-tooltip-nav-button-left');
-    await page.waitFor(150); // For animations to finish.
+    await page.waitForTimeout(150); // For animations to finish.
     await verifySelectorsVisible(page, name, ['amp-story-page#cover[active]']);
   },
-  'tapping on embed tooltip should expand the component': async (page, name) => {
+  'tapping on embed tooltip should expand the component': async (
+    page,
+    name
+  ) => {
     const screen = page.touchscreen;
     await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(150); // For animations to finish.
+    await page.waitForSelector('amp-story-page#page-2[active]');
+    await page.waitForTimeout(800); // For animations to finish.
     await page.tap('amp-twitter.interactive-embed');
-    await page.waitFor('a.i-amphtml-story-tooltip');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForSelector('a.i-amphtml-story-tooltip');
+    await page.waitForTimeout(500); // For animations to finish.
     await page.tap('a.i-amphtml-story-tooltip');
-    await page.waitFor(300); // For animations to finish.
-    await verifySelectorsVisible(page, name, ['amp-story-page.i-amphtml-expanded-mode']);
-  },
-  'tapping on non-interactive embed should not show tooltip or block navigation': async (page, name) => {
-    const screen = page.touchscreen;
-    await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(150); // For animations to finish.
-    await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#page-3[active]');
-    await page.waitFor(150); // For animations to finish.
-    await page.tap('amp-twitter.non-interactive-embed');
-    await page.waitFor(150); // For animations to finish.
-    await verifySelectorsInvisible(page, name, ['a.i-amphtml-story-tooltip']);
-    await verifySelectorsVisible(page, name, ['amp-story-page#page-2[active]']);
+    await page.waitForTimeout(1000); // For animations to finish.
+    await verifySelectorsVisible(page, name, [
+      'amp-story-page.i-amphtml-expanded-mode',
+    ]);
   },
+  'tapping on non-interactive embed should not show tooltip or block navigation':
+    async (page, name) => {
+      const screen = page.touchscreen;
+      await screen.tap(200, 240);
+      await page.waitForSelector('amp-story-page#page-2[active]');
+      await page.waitForTimeout(150); // For animations to finish.
+      await screen.tap(300, 400);
+      await page.waitForSelector('amp-story-page#page-3[active]');
+      await page.waitForTimeout(150); // For animations to finish.
+      await page.tap('amp-twitter.non-interactive-embed');
+      await page.waitForTimeout(150); // For animations to finish.
+      await verifySelectorsInvisible(page, name, ['a.i-amphtml-story-tooltip']);
+      await verifySelectorsVisible(page, name, [
+        'amp-story-page#page-2[active]',
+      ]);
+    },
   'tapping on closing button should exit expanded view': async (page, name) => {
     const screen = page.touchscreen;
     await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#page-2[active]');
-    await page.waitFor(150); // For animations to finish.
+    await page.waitForSelector('amp-story-page#page-2[active]');
+    await page.waitForTimeout(800); // For animations to finish.
     await page.tap('amp-twitter.interactive-embed');
-    await page.waitFor('a.i-amphtml-story-tooltip');
-    await page.waitFor(300); // For animations to finish.
+    await page.waitForSelector('a.i-amphtml-story-tooltip');
+    await page.waitForTimeout(500); // For animations to finish.
     await page.tap('a.i-amphtml-story-tooltip');
-    await page.waitFor('amp-story-page.i-amphtml-expanded-mode');
-    await page.waitFor(300); // For animations to finish.
-    await page.tap('span.i-amphtml-expanded-view-close-button');
-    await verifySelectorsInvisible(page, name, ['amp-story-page.i-amphtml-expanded-mode']);
+    await page.waitForSelector('amp-story-page.i-amphtml-expanded-mode');
+    await page.waitForTimeout(1000); // For animations to finish.
+    await page.tap('button.i-amphtml-expanded-view-close-button');
+    await page.waitForTimeout(300); // For animations to finish.
+    await verifySelectorsInvisible(page, name, [
+      'amp-story-page.i-amphtml-expanded-mode',
+    ]);
   },
- };
+};
diff --git a/examples/visual-tests/amp-story/basic-transformed.html b/examples/visual-tests/amp-story/basic-transformed.html
new file mode 100644
index 0000000000000..4575653b6c2bb
--- /dev/null
+++ b/examples/visual-tests/amp-story/basic-transformed.html
@@ -0,0 +1,18 @@
+<!-- transformed with @ampproject/toolbox-optimizer -->
+<!doctype html><html amp lang="en" i-amphtml-layout transformed="self;v=1"><head><meta charset="utf-8"><style amp-runtime i-amphtml-version="012010132225003">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#202125!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,0.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}
+/*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-for-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important}
+/*# sourceURL=/css/ampshared.css*/</style><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><link rel="preload" href="https://cdn.ampproject.org/v0.js" as="script"><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><title>amp-story rtl visual diff</title><link rel="canonical" href="./template-vertical.html"><style amp-custom>amp-story-page {
+        background: black;
+        color: white;
+        font-family: sans-serif;
+      }
+
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
+      h1.hello-world {
+        color: white;
+        text-shadow: 3px 3px rgba(0, 0, 0, 0.5);
+      }</style><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></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" class="i-amphtml-layout-container" i-amphtml-layout="container"> <amp-story-page id="cover" class="i-amphtml-layout-container" i-amphtml-layout="container"> <amp-story-grid-layer template="fill" class="i-amphtml-layout-container" i-amphtml-layout="container"> <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image980_1600x900.jpg" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </amp-story-grid-layer> <amp-story-grid-layer template="vertical" class="i-amphtml-layout-container" i-amphtml-layout="container"> <h1 class="hello-world">Hello world!</h1> <p>Page one of four</p> </amp-story-grid-layer> </amp-story-page> <amp-story-page id="page-2" class="i-amphtml-layout-container" i-amphtml-layout="container"> <amp-story-grid-layer template="fill" class="i-amphtml-layout-container" i-amphtml-layout="container"> <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image981_1600x900.jpg" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </amp-story-grid-layer> <amp-story-grid-layer template="vertical" class="i-amphtml-layout-container" i-amphtml-layout="container"> <h1 class="hello-world">Hello world!</h1> <p>Page two of four</p> </amp-story-grid-layer> </amp-story-page> <amp-story-page id="page-3" class="i-amphtml-layout-container" i-amphtml-layout="container"> <amp-story-grid-layer template="fill" class="i-amphtml-layout-container" i-amphtml-layout="container"> <amp-img autoplay layout="fill" src="/examples/visual-tests/picsum.photos/image982_1600x900.jpg" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </amp-story-grid-layer> <amp-story-grid-layer template="vertical" class="i-amphtml-layout-container" i-amphtml-layout="container"> <h1 class="hello-world">Hello world!</h1> <p>Page three of four</p> </amp-story-grid-layer> </amp-story-page> <amp-story-page id="page-4" class="i-amphtml-layout-container" i-amphtml-layout="container"> <amp-story-grid-layer template="fill" class="i-amphtml-layout-container" i-amphtml-layout="container"> <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image983_1600x900.jpg" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </amp-story-grid-layer> <amp-story-grid-layer template="vertical" class="i-amphtml-layout-container" i-amphtml-layout="container"> <h1 class="hello-world">Hello world!</h1> <p>Page four of four</p> </amp-story-grid-layer> </amp-story-page> </amp-story> </body></html>
\ No newline at end of file
diff --git a/examples/visual-tests/amp-story/basic.html b/examples/visual-tests/amp-story/basic.html
index 2e61764cf4737..b877e635a208c 100644
--- a/examples/visual-tests/amp-story/basic.html
+++ b/examples/visual-tests/amp-story/basic.html
@@ -5,8 +5,6 @@
     <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-video"
-        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
     <title>amp-story rtl visual diff</title>
     <meta name="viewport"
           content="width=device-width,minimum-scale=1,initial-scale=1">
@@ -60,8 +58,8 @@
 
       <amp-story-page id="cover">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image980_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image980_1600x900.jpg">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 class="hello-world">Hello world!</h1>
@@ -71,8 +69,8 @@ <h1 class="hello-world">Hello world!</h1>
 
       <amp-story-page id="page-2">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 class="hello-world">Hello world!</h1>
@@ -82,8 +80,8 @@ <h1 class="hello-world">Hello world!</h1>
 
       <amp-story-page id="page-3">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image982_1600x900.jpg">
-          </amp-video>
+          <amp-img autoplay layout="fill" src="/examples/visual-tests/picsum.photos/image982_1600x900.jpg">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 class="hello-world">Hello world!</h1>
@@ -93,8 +91,8 @@ <h1 class="hello-world">Hello world!</h1>
 
       <amp-story-page id="page-4">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image983_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image983_1600x900.jpg">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 class="hello-world">Hello world!</h1>
diff --git a/examples/visual-tests/amp-story/basic.rtl.html b/examples/visual-tests/amp-story/basic.rtl.html
index d1f9b93ba5f7b..d0077490e0648 100644
--- a/examples/visual-tests/amp-story/basic.rtl.html
+++ b/examples/visual-tests/amp-story/basic.rtl.html
@@ -5,8 +5,6 @@
     <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-video"
-        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
     <title>amp-story rtl visual diff</title>
     <meta name="viewport"
           content="width=device-width,minimum-scale=1,initial-scale=1">
@@ -60,8 +58,8 @@
 
       <amp-story-page id="cover">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image980_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image980_1600x900.jpg">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 class="hello-world">مرحبا بالعالم</h1>
@@ -71,8 +69,8 @@ <h1 class="hello-world">مرحبا بالعالم</h1>
 
       <amp-story-page id="page-2">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 class="hello-world">مرحبا بالعالم</h1>
@@ -82,8 +80,8 @@ <h1 class="hello-world">مرحبا بالعالم</h1>
 
       <amp-story-page id="page-3">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image982_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image982_1600x900.jpg">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 class="hello-world">مرحبا بالعالم</h1>
@@ -93,8 +91,8 @@ <h1 class="hello-world">مرحبا بالعالم</h1>
 
       <amp-story-page id="page-4">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image983_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image983_1600x900.jpg">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 class="hello-world">مرحبا بالعالم</h1>
diff --git a/examples/visual-tests/amp-story/bookend-ar.json b/examples/visual-tests/amp-story/bookend-ar.json
deleted file mode 100644
index 1c5748e87b6d2..0000000000000
--- a/examples/visual-tests/amp-story/bookend-ar.json
+++ /dev/null
@@ -1,56 +0,0 @@
-{
-  "bookendVersion": "v1.0",
-  "shareProviders": [
-    "email",
-    "facebook",
-    "twitter",
-    "pinterest",
-    "whatsapp",
-    "gplus"
-  ],
-  "components": [
-    {
-      "type": "heading",
-      "text": "أمثلة"
-    },
-    {
-      "type": "small",
-      "title": "صغير",
-      "url": "http://example.com/1.html",
-      "image": "/examples/visual-tests/picsum.photos/image981_1600x900.jpg"
-    },
-    {
-      "type": "landscape",
-      "title": "أفقي",
-      "url": "http://example.com/2.html",
-      "image": "/examples/visual-tests/picsum.photos/image981_1600x900.jpg"
-    },
-    {
-      "type": "portrait",
-      "title": "عمودي",
-      "url": "http://example.com/3.html",
-      "image": "/examples/visual-tests/picsum.photos/image981_1600x900.jpg"
-    },
-    {
-      "type": "cta-link",
-      "links": [
-        {
-          "text": "واحد",
-          "url": "http://example.com/4.html"
-        },
-        {
-          "text": "اثنان",
-          "url": "http://example.com/4.html"
-        },
-        {
-          "text": "ثلاثة",
-          "url": "http://example.com/4.html"
-        }
-      ]
-    },
-    {
-      "type": "textbox",
-      "text": ["نهاد حداد", "كاظم الساهر", "أم كلثوم", "فريد الأطرش"]
-    }
-  ]
-}
diff --git a/examples/visual-tests/amp-story/bookend-en.json b/examples/visual-tests/amp-story/bookend-en.json
deleted file mode 100644
index ed25e3406fa25..0000000000000
--- a/examples/visual-tests/amp-story/bookend-en.json
+++ /dev/null
@@ -1,61 +0,0 @@
-{
-  "bookendVersion": "v1.0",
-  "shareProviders": [
-    "email",
-    "facebook",
-    "twitter",
-    "pinterest",
-    "whatsapp",
-    "gplus"
-  ],
-  "components": [
-    {
-      "type": "heading",
-      "text": "Other Examples"
-    },
-    {
-      "type": "small",
-      "title": "Small article card",
-      "url": "http://example.com/1.html",
-      "image": "/examples/visual-tests/picsum.photos/image981_1600x900.jpg"
-    },
-    {
-      "type": "landscape",
-      "title": "Landscape article card",
-      "url": "http://example.com/2.html",
-      "image": "/examples/visual-tests/picsum.photos/image981_1600x900.jpg"
-    },
-    {
-      "type": "portrait",
-      "title": "Portrait article card",
-      "url": "http://example.com/3.html",
-      "image": "/examples/visual-tests/picsum.photos/image981_1600x900.jpg"
-    },
-    {
-      "type": "cta-link",
-      "links": [
-        {
-          "text": "Link One",
-          "url": "http://example.com/4.html"
-        },
-        {
-          "text": "Link Two",
-          "url": "http://example.com/4.html"
-        },
-        {
-          "text": "Link Three",
-          "url": "http://example.com/4.html"
-        }
-      ]
-    },
-    {
-      "type": "textbox",
-      "text": [
-        "Food by Enrique McPizza",
-        "Choreography by Gabriel Filly",
-        "Script by Alan Ecma S.",
-        "Direction by Jon Tarantino"
-      ]
-    }
-  ]
-}
diff --git a/examples/visual-tests/amp-story/embed-mode-1.html b/examples/visual-tests/amp-story/embed-mode-1.html
index 02fd13db40a76..6ca96a438bf2a 100644
--- a/examples/visual-tests/amp-story/embed-mode-1.html
+++ b/examples/visual-tests/amp-story/embed-mode-1.html
@@ -5,8 +5,6 @@
     <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-video"
-        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
     <title>amp-story embed mode 1 visual diff</title>
     <meta name="viewport"
           content="width=device-width,minimum-scale=1,initial-scale=1">
@@ -46,8 +44,8 @@
 
       <amp-story-page id="cover">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 id="hello-world">Hello world!</h1>
diff --git a/examples/visual-tests/amp-story/embed-mode-2.html b/examples/visual-tests/amp-story/embed-mode-2.html
index abdd02025c4d4..e0c9d211a77a3 100644
--- a/examples/visual-tests/amp-story/embed-mode-2.html
+++ b/examples/visual-tests/amp-story/embed-mode-2.html
@@ -5,8 +5,6 @@
     <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-video"
-        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
     <title>amp-story embed mode 2 visual diff</title>
     <meta name="viewport"
           content="width=device-width,minimum-scale=1,initial-scale=1">
@@ -46,8 +44,8 @@
 
       <amp-story-page id="cover">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 id="hello-world">Hello world!</h1>
diff --git a/examples/visual-tests/amp-story/img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg b/examples/visual-tests/amp-story/img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg
new file mode 100644
index 0000000000000..ca25cb665307a
Binary files /dev/null and b/examples/visual-tests/amp-story/img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg differ
diff --git a/examples/visual-tests/amp-story/info-dialog.html b/examples/visual-tests/amp-story/info-dialog.html
index 7efdfdf25412e..ec20ecc17e815 100644
--- a/examples/visual-tests/amp-story/info-dialog.html
+++ b/examples/visual-tests/amp-story/info-dialog.html
@@ -68,10 +68,10 @@
             <script type="application/json">
               {
                 "requests": {
-                  "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/master/examples/img/ampicon.png",
+                  "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png",
                   "base": "${endpoint}?${type|default:foo}&path=${canonicalPath}",
                   "pageView": "${base}?&index=${storyPageIndex}&count=${storyPageCount}&id=${storyPageId}&muted=${storyIsMuted}&progress=${storyProgress}",
-                  "click": "${base}?&index=${storyPageIndex}&id=${storyPageId}&bookendTargetHref=${storyBookendTargetHref}&bookendCardType=${storyBookendComponentType}&bookendCardPosition=${storyBookendComponentPosition}"
+                  "click": "${base}?&index=${storyPageIndex}&id=${storyPageId}"
                 },
                 "triggers": {
                   "trackInfoDialogOpen": {
diff --git a/examples/visual-tests/amp-story/info-dialog.rtl.html b/examples/visual-tests/amp-story/info-dialog.rtl.html
index 2c6c9768f182e..91f782c4eb749 100644
--- a/examples/visual-tests/amp-story/info-dialog.rtl.html
+++ b/examples/visual-tests/amp-story/info-dialog.rtl.html
@@ -5,8 +5,6 @@
     <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-video"
-        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
     <title>amp-story info dialog visual diff</title>
     <meta name="viewport"
           content="width=device-width,minimum-scale=1,initial-scale=1">
@@ -66,17 +64,14 @@
 
       <amp-story-page id="cover">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 id="hello-world">مرحبا بالعالم</h1>
         </amp-story-grid-layer>
       </amp-story-page>
 
-      <amp-story-bookend src="bookend.json" layout="nodisplay">
-      </amp-story-bookend>
-
     </amp-story>
   </body>
 
diff --git a/examples/visual-tests/amp-story/share-menu.html b/examples/visual-tests/amp-story/share-menu.html
index 1b2716dddbda1..7eb588edad2f7 100644
--- a/examples/visual-tests/amp-story/share-menu.html
+++ b/examples/visual-tests/amp-story/share-menu.html
@@ -68,10 +68,23 @@
           <h1 id="hello-world">Hello world!</h1>
         </amp-story-grid-layer>
       </amp-story-page>
-
-      <amp-story-bookend src="bookend-en.json" layout="nodisplay">
-      </amp-story-bookend>
-
+      <amp-story-social-share layout="nodisplay">
+        <script type="application/json">
+          {
+            "shareProviders": [
+                "email",
+                {"provider": "facebook", "app_id": "254325784911610"},
+                {
+                  "provider": "twitter",
+                  "text": "This is custom share text that I would like for the Twitter platform"
+                },
+                "whatsapp",
+                "pinterest",
+                "line"
+              ]
+          }
+        </script>
+      </amp-story-social-share>
     </amp-story>
   </body>
 
diff --git a/examples/visual-tests/amp-story/share-menu.rtl.html b/examples/visual-tests/amp-story/share-menu.rtl.html
index 9a1ef3483dd82..5a97520b4114e 100644
--- a/examples/visual-tests/amp-story/share-menu.rtl.html
+++ b/examples/visual-tests/amp-story/share-menu.rtl.html
@@ -69,8 +69,23 @@ <h1 id="hello-world">مرحبا بالعالم</h1>
         </amp-story-grid-layer>
       </amp-story-page>
 
-      <amp-story-bookend src="bookend-ar.json" layout="nodisplay">
-      </amp-story-bookend>
+      <amp-story-social-share layout="nodisplay">
+        <script type="application/json">
+          {
+            "shareProviders": [
+                "email",
+                {"provider": "facebook", "app_id": "254325784911610"},
+                {
+                  "provider": "twitter",
+                  "text": "This is custom share text that I would like for the Twitter platform"
+                },
+                "whatsapp",
+                "pinterest",
+                "line"
+              ]
+          }
+        </script>
+      </amp-story-social-share>
 
     </amp-story>
   </body>
diff --git a/examples/visual-tests/amp-user-notification/amp-user-notification.amp.html b/examples/visual-tests/amp-user-notification/amp-user-notification.amp.html
index a20ac9882dc15..c7a51d26d72fb 100644
--- a/examples/visual-tests/amp-user-notification/amp-user-notification.amp.html
+++ b/examples/visual-tests/amp-user-notification/amp-user-notification.amp.html
@@ -45,7 +45,7 @@
           data-persist-dismissal="false">
     This notification should ALWAYS show.
     <a href="#learn-more">Learn more.</a>
-    <button on="tap:amp-user-notification.dismiss" role="button" tabindex="5">Dismiss</button>
+    <button on="tap:amp-user-notification.dismiss" tabindex="5">Dismiss</button>
   </amp-user-notification>
 
   <header>
@@ -62,6 +62,7 @@
               data-consent-notification-id="amp-user-notification"
               data-url='not-exist'
               data-valid='false'>
+              <div placeholder>Loading...</div>
           </amp-ad>
           <p class="standfirst">
             Fusce pretium tempor justo, vitae consequat dolor maximus eget.
diff --git a/examples/visual-tests/amp-user-notification/amp-user-notification.js b/examples/visual-tests/amp-user-notification/amp-user-notification.js
index 30aaa5fdfaad1..76e0d5fed5d7c 100644
--- a/examples/visual-tests/amp-user-notification/amp-user-notification.js
+++ b/examples/visual-tests/amp-user-notification/amp-user-notification.js
@@ -16,8 +16,8 @@
 'use strict';
 
 module.exports = {
-  'dismiss user notification': async (page, name) => {
+  'dismiss user notification': async (page, unusedName) => {
     await page.tap('amp-user-notification>button');
-    await page.waitFor(500);
+    await page.waitForTimeout(500);
   },
- };
+};
diff --git a/examples/visual-tests/amp-video-docking/amp-video-docking.js b/examples/visual-tests/amp-video-docking/amp-video-docking.js
index d4927ea787d5b..ef2b8c4b8237c 100644
--- a/examples/visual-tests/amp-video-docking/amp-video-docking.js
+++ b/examples/visual-tests/amp-video-docking/amp-video-docking.js
@@ -19,16 +19,31 @@ const {
   verifySelectorsVisible,
 } = require('../../../build-system/tasks/visual-diff/helpers');
 
+function toggleScrollable(page, toggle) {
+  return page.evaluate((toggle) => {
+    if (toggle) {
+      document.querySelector('html').style.removeProperty('overflow');
+    } else {
+      document.querySelector('html').style.overflow = 'hidden';
+    }
+  }, toggle);
+}
+
 async function scroll(page, _, target = 'bottom') {
+  await toggleScrollable(page, true);
+
   await page.tap(`#scroll-${target}-button`);
 
   // Scrolling takes 500ms as defined by the runtime, and leeway.
-  await page.waitFor(700);
+  await page.waitForTimeout(700);
+
+  // Ensures that scrollbar is hidden before capture.
+  await toggleScrollable(page, false);
 }
 
 async function dock(page, name) {
   await page.tap('#play-button');
-  await page.waitFor(200); // active playback
+  await page.waitForTimeout(200); // active playback
   await scroll(page);
   await verifySelectorsVisible(page, name, ['.amp-video-docked-shadow']);
 }
@@ -42,7 +57,7 @@ async function activateControlsBy(page, name, tapOrHover) {
   await verifySelectorsVisible(page, name, ['.amp-video-docked-controls']);
 }
 
-const testControlsActivatedBy = tapOrHover => ({
+const testControlsActivatedBy = (tapOrHover) => ({
   [`displays dock controls (controls on ${tapOrHover})`]: async (
     page,
     name
@@ -89,16 +104,18 @@ const testControlsActivatedBy = tapOrHover => ({
     await page.tap('.amp-video-docked-unmute');
   },
 
-  [`displays scrollback button on ad (controls on ${tapOrHover})`]: async (
-    page,
-    name
-  ) => {
-    await dock(page, name);
-    await activateControlsBy(page, name, tapOrHover);
-    await verifySelectorsVisible(page, name, [
-      '.amp-video-docked-control-set-scroll-back',
-    ]);
-  },
+  // TODO(#32684, @ampproject/wg-components): fix flaky test.
+  // See https://percy.io/ampproject/amphtml/builds/8876280/changed/503549685
+  // [`displays scrollback button on ad (controls on ${tapOrHover})`]: async (
+  //   page,
+  //   name
+  // ) => {
+  //   await dock(page, name);
+  //   await activateControlsBy(page, name, tapOrHover);
+  //   await verifySelectorsVisible(page, name, [
+  //     '.amp-video-docked-control-set-scroll-back',
+  //   ]);
+  // },
 });
 
 module.exports = {
diff --git a/examples/visual-tests/amphtml-ads/adchoices.js b/examples/visual-tests/amphtml-ads/adchoices.js
index 888bf1d42d84d..c86ec32cb0b5c 100644
--- a/examples/visual-tests/amphtml-ads/adchoices.js
+++ b/examples/visual-tests/amphtml-ads/adchoices.js
@@ -24,7 +24,7 @@ const {fillIframeSrcdoc} = require('./helpers');
  * parent DOM object so that it can be included in the Percy snapshot.
  */
 module.exports = {
-  'page view': async (page, name) => {
+  'page view': async (page, unusedName) => {
     await fillIframeSrcdoc(page);
   },
 };
diff --git a/examples/visual-tests/amphtml-ads/amp-fie-static.html b/examples/visual-tests/amphtml-ads/amp-fie-static.html
index 81df44143445e..deea3b9c866d9 100644
--- a/examples/visual-tests/amphtml-ads/amp-fie-static.html
+++ b/examples/visual-tests/amphtml-ads/amp-fie-static.html
@@ -21,17 +21,6 @@ <h1>AMPHTML ad - FIE - amphtml-ads/amp-creative.html</h1>
   <div fallback>Could not display the fake ad :(</div>
 </amp-ad>
 
-<h1>AMPHTML ad - FIE - /amphtml-ads/resource/amp-creative.html</h1>
-<amp-ad width="300" height="250"
-        type="fake"
-        id="i-amphtml-demo-id-2"
-        a4a-conversion="true"
-        disable3pfallback="true"
-        src="/examples/visual-tests/amphtml-ads/resource/amp-ads-fallback.html">
-  <div placeholder>Loading...</div>
-  <div fallback>Could not display the fake ad :(</div>
-</amp-ad>
-
 <h1>AMPHTML ad - FIE - amphtml-ads/carousel-ad.a4a.html</h1>
 <amp-ad width="300" height="250"
         type="fake"
diff --git a/examples/visual-tests/amphtml-ads/helpers.js b/examples/visual-tests/amphtml-ads/helpers.js
index f213856cf0e82..0ad94d6464fc6 100644
--- a/examples/visual-tests/amphtml-ads/helpers.js
+++ b/examples/visual-tests/amphtml-ads/helpers.js
@@ -17,10 +17,17 @@
 'use strict';
 
 function fillIframeSrcdoc(page) {
-  return page.$$eval("amp-ad > iframe, iframe.inabox-test",
-    els => els.forEach(el => {
-      el.srcdoc = el.contentDocument.documentElement.innerHTML;
-    }));
+  return page.$$eval('amp-ad > iframe, iframe.inabox-test', (els) =>
+    Promise.all(
+      els.map(
+        (el) =>
+          new Promise((resolve) => {
+            el.srcdoc = el.contentDocument.documentElement.innerHTML;
+            el.addEventListener('load', resolve);
+          })
+      )
+    )
+  );
 }
 
 module.exports = {
diff --git a/examples/visual-tests/amphtml-ads/resource/amp-ads-fallback.html b/examples/visual-tests/amphtml-ads/resource/amp-ads-fallback.html
index 4a7dafb655d78..3fe002a17bb7b 100644
--- a/examples/visual-tests/amphtml-ads/resource/amp-ads-fallback.html
+++ b/examples/visual-tests/amphtml-ads/resource/amp-ads-fallback.html
@@ -14,7 +14,7 @@ <h1>AMPHTML ad - Fallback</h1>
 <amp-ad width="300" height="250"
         type="fake"
         id="i-amphtml-demo-id-1"
-        src="nonexistent">
+        src="/nonexistent">
   <div fallback style="background-color: red;">Could not display the fake ad :(</div>
 </amp-ad>
 <h2 style="height: 1000px;">Placeholder</h2>
diff --git a/examples/visual-tests/amphtml-ads/static.js b/examples/visual-tests/amphtml-ads/static.js
index 888bf1d42d84d..19fd55d0e77cb 100644
--- a/examples/visual-tests/amphtml-ads/static.js
+++ b/examples/visual-tests/amphtml-ads/static.js
@@ -17,6 +17,7 @@
 'use strict';
 
 const {fillIframeSrcdoc} = require('./helpers');
+const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
 
 /**
  * Percy preserves the DOM object as snapshot so the content of iframe is not
@@ -24,7 +25,10 @@ const {fillIframeSrcdoc} = require('./helpers');
  * parent DOM object so that it can be included in the Percy snapshot.
  */
 module.exports = {
-  'page view': async (page, name) => {
+  'page view': async (page, unusedName) => {
     await fillIframeSrcdoc(page);
+
+    // To combat visual diff flakiness possibly due to image loading
+    await sleep(300);
   },
 };
diff --git a/examples/visual-tests/article.amp/article.amp.html b/examples/visual-tests/article.amp/article.amp.html
index 92136c12e96ab..7d9f982dc005b 100644
--- a/examples/visual-tests/article.amp/article.amp.html
+++ b/examples/visual-tests/article.amp/article.amp.html
@@ -191,7 +191,7 @@
       font-size: 8px;
       background: #fff;
     }
-    }
+
     amp-app-banner .actions {
       text-align: right;
       font-size: 14px;
diff --git a/examples/visual-tests/css.amp/css.amp.html b/examples/visual-tests/css.amp/css.amp.html
new file mode 100644
index 0000000000000..f7d8d6a127037
--- /dev/null
+++ b/examples/visual-tests/css.amp/css.amp.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>CSS example</title>
+    <link rel="canonical" href="amps.html" />
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,initial-scale=1"
+    />
+    <script async custom-element="amp-fit-text" src="intentionally_wrong"></script>
+    <script async custom-element="amp-truncate-text" src="intentionally_wrong"></script>
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <style amp-custom>
+      /** Styled so its size is visible */
+      i-amphtml-sizer {
+        background-color: red;
+      }
+      /** No grey background should be seen behind the sizer. */
+      .background {
+        border: 1px solid black;
+        background-color: #bebebe;
+        max-width: 400px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>responsive amp-fit-text with text child</h1>
+    <div class="background">
+      <amp-fit-text width="200" height="100" layout="responsive">
+        Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at
+        aeque inermis reprehendunt.
+      </amp-fit-text>
+    </div>
+
+    <h1>responsive amp-fit-text with element child</h1>
+    <div class="background">
+      <amp-fit-text width="200" height="100" layout="responsive">
+        <strong>Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at
+        aeque inermis reprehendunt.</strong>
+      </amp-fit-text>
+    </div>
+
+    <h1>responsive amp-truncate-text with text child</h1>
+    <div class="background">
+      <amp-truncate-text layout="responsive" height="3em" width="20em">
+        Some text that may get truncated.
+        <button slot="collapsed">See more</button>
+        <button slot="expanded">See less</button>
+      </amp-truncate-text>
+    </div>
+
+    <h1>responsive amp-truncate-text with element child</h1>
+    <div class="background">
+      <amp-truncate-text layout="responsive" height="3em" width="20em">
+        <strong>Some text that may get truncated.</strong>
+        <button slot="collapsed">See more</button>
+        <button slot="expanded">See less</button>
+      </amp-truncate-text>
+    </div>
+  </body>
+</html>
diff --git a/examples/visual-tests/font.amp.404/font.amp.js b/examples/visual-tests/font.amp.404/font.amp.js
index 4b7d55a1179d9..8fd6353729ae1 100644
--- a/examples/visual-tests/font.amp.404/font.amp.js
+++ b/examples/visual-tests/font.amp.404/font.amp.js
@@ -23,8 +23,9 @@ module.exports = {
     ];
     for (const selector of forbiddenSelectors) {
       if ((await page.$(selector)) !== null) {
-        throw new Error(`${colors.cyan(testName)} | The forbidden CSS ` +
-            `element ${colors.cyan(selector)} exists in the page`);
+        throw new Error(
+          `${name} | The forbidden CSS element ${selector} exists in the page`
+        );
       }
     }
   },
diff --git a/examples/viz-vega.amp.html b/examples/viz-vega.amp.html
index 67c14fdb78dd1..6aecede5a8b95 100644
--- a/examples/viz-vega.amp.html
+++ b/examples/viz-vega.amp.html
@@ -5,7 +5,6 @@
   <title>Vega Visualization examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
   <script async custom-element="amp-viz-vega" src="https://cdn.ampproject.org/v0/amp-viz-vega-0.1.js"></script>
   <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>
diff --git a/examples/vrview.amp.html b/examples/vrview.amp.html
deleted file mode 100644
index ea1f7c65f0ca5..0000000000000
--- a/examples/vrview.amp.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-    <meta charset="utf-8">
-    <title>AMP #0</title>
-    <link rel="canonical" href="amps.html" >
-    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <script async custom-element="amp-google-vrview-image" src="https://cdn.ampproject.org/v0/amp-google-vrview-image-0.1.js"></script>
-    <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
-    <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>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-
-<article>
-
-    <amp-google-vrview-image
-        src="https://storage.googleapis.com/vrview/examples/coral.jpg"
-        stereo
-        width="400" height="300" layout=responsive>
-    </amp-google-vrview-image>
-
-    <a on="tap:see-image-lightbox"
-       role="button"
-       class="button button-secondary play"
-       tabindex="0">
-      Show Image
-    </a>
-
-    <amp-lightbox id="see-image-lightbox"
-                  layout="nodisplay">
-      <amp-google-vrview-image
-          src="https://storage.googleapis.com/vrview/examples/coral.jpg"
-          stereo
-          layout="fill">
-      </amp-google-vrview-image>
-    </amp-lightbox>
-
-</article>
-</body>
-</html>
diff --git a/extensions/BUILD b/extensions/BUILD
new file mode 100644
index 0000000000000..3e90e693e3b26
--- /dev/null
+++ b/extensions/BUILD
@@ -0,0 +1,21 @@
+package(default_visibility = ["//visibility:public"])
+
+genrule(
+    name = "validator-extensions-protoascii_",
+    srcs = glob(
+        [
+            "*/validator-*.protoascii",
+        ],
+    ),
+    outs = ["validator-extensions-protoascii"],
+    cmd = "cat $(SRCS) > $(OUTS)",
+)
+
+filegroup(
+    name = "testdata_files",
+    srcs = glob([
+            "*/*/test/*.html",
+            "*/*/test/*.out",
+            "*/*/test/*.cpponly",
+        ])
+)
diff --git a/extensions/OWNERS b/extensions/OWNERS
index ac929f0cda8c7..94c1302366049 100644
--- a/extensions/OWNERS
+++ b/extensions/OWNERS
@@ -1,19 +1,22 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [
-        {name: 'ampproject/wg-ui-and-a11y'},
+        {name: 'ampproject/wg-components'},
+        {name: 'ampproject/wg-bento'},
         {name: 'aghassemi', requestReviews: false},
+        {name: 'gmajoulet', requestReviews: false},
+        {name: 'newmuis', requestReviews: false},
       ],
     },
     {
       pattern: '**/*-player.{js,md}',
       owners: [
         {name: 'alanorozco', notify: true},
-        {name: 'wassgha', notify: true},
+        {name: 'wassgha', notify: false},
       ],
     },
   ],
diff --git a/extensions/README.md b/extensions/README.md
index 2385085a88bfe..6bff748aee79a 100644
--- a/extensions/README.md
+++ b/extensions/README.md
@@ -23,4 +23,4 @@ See the [Components](https://www.ampproject.org/docs/reference/components) list.
 
 ## AMP HTML Extended Templates
 
-See the [AMP template spec](../spec/amp-html-templates.md) for details about supported templates.
+See the [AMP template spec](../docs/spec/amp-html-templates.md) for details about supported templates.
diff --git a/extensions/WORKSPACE b/extensions/WORKSPACE
new file mode 100644
index 0000000000000..7f5d5453e64d1
--- /dev/null
+++ b/extensions/WORKSPACE
@@ -0,0 +1 @@
+workspace(name = "amphtml-extensions")
diff --git a/extensions/amp-3d-gltf/0.1/amp-3d-gltf.js b/extensions/amp-3d-gltf/0.1/amp-3d-gltf.js
index 88f5961825a32..e4226d53838c3 100644
--- a/extensions/amp-3d-gltf/0.1/amp-3d-gltf.js
+++ b/extensions/amp-3d-gltf/0.1/amp-3d-gltf.js
@@ -13,18 +13,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {ActionTrust} from '../../../src/action-constants';
-import {Deferred} from '../../../src/utils/promise';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Services} from '../../../src/services';
 import {assertHttpsUrl, resolveRelativeUrl} from '../../../src/url';
 import {dev, devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getIframe, preloadBootstrap} from '../../../src/3p-frame';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {listenFor, postMessage} from '../../../src/iframe-helper';
+import {
+  observeContentSize,
+  unobserveContentSize,
+} from '../../../src/utils/size-observer';
+import {
+  observeWithSharedInOb,
+  unobserveWithSharedInOb,
+} from '../../../src/viewport-observer';
 import {removeElement} from '../../../src/dom';
 
 const TAG = 'amp-3d-gltf';
+const TYPE = '3d-gltf';
 
 const isWebGLSupported = () => {
   const canvas = document.createElement('canvas');
@@ -52,6 +61,8 @@ export class Amp3dGltf extends AMP.BaseElement {
 
     /** @private {?Function} */
     this.unlistenMessage_ = null;
+
+    this.onResized_ = this.onResized_.bind(this);
   }
 
   /**
@@ -60,7 +71,7 @@ export class Amp3dGltf extends AMP.BaseElement {
    */
   preconnectCallback(opt_onLayout) {
     const preconnect = Services.preconnectFor(this.win);
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
     preconnect.url(
       this.getAmpDoc(),
       'https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js',
@@ -80,6 +91,8 @@ export class Amp3dGltf extends AMP.BaseElement {
 
   /** @override */
   unlayoutCallback() {
+    unobserveWithSharedInOb(this.element);
+    this.viewportCallback_(false);
     if (this.iframe_) {
       removeElement(this.iframe_);
       this.iframe_ = null;
@@ -91,6 +104,7 @@ export class Amp3dGltf extends AMP.BaseElement {
     this.willBeReady_ = new Deferred();
     this.willBeLoaded_ = new Deferred();
 
+    unobserveContentSize(this.element, this.onResized_);
     return true;
   }
 
@@ -132,11 +146,8 @@ export class Amp3dGltf extends AMP.BaseElement {
     this.registerAction(
       'setModelRotation',
       (invocation) => {
-        this.sendCommandWhenReady_(
-          'setModelRotation',
-          invocation.args
-        ).catch((e) =>
-          dev().error('AMP-3D-GLTF', 'setModelRotation failed: %s', e)
+        this.sendCommandWhenReady_('setModelRotation', invocation.args).catch(
+          (e) => dev().error('AMP-3D-GLTF', 'setModelRotation failed: %s', e)
         );
       },
       ActionTrust.LOW
@@ -145,19 +156,24 @@ export class Amp3dGltf extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
+    observeWithSharedInOb(this.element, (inViewport) =>
+      this.viewportCallback_(inViewport)
+    );
     if (!isWebGLSupported()) {
       this.toggleFallback(true);
       return Promise.resolve();
     }
 
-    const iframe = getIframe(this.win, this.element, '3d-gltf', this.context_);
-
+    const iframe = getIframe(this.win, this.element, TYPE, this.context_);
+    iframe.title = this.element.title || 'GLTF 3D model';
     this.applyFillContent(iframe, true);
     this.iframe_ = iframe;
     this.unlistenMessage_ = devAssert(this.listenGltfViewerMessages_());
 
     this.element.appendChild(this.iframe_);
 
+    observeContentSize(this.element, this.onResized_);
+
     return this.willBeLoaded_.promise;
   }
 
@@ -215,10 +231,10 @@ export class Amp3dGltf extends AMP.BaseElement {
 
   /**
    * @param {boolean} inViewport
-   * @override
+   * @private
    */
-  viewportCallback(inViewport) {
-    return this.sendCommandWhenReady_('toggleAmpViewport', inViewport);
+  viewportCallback_(inViewport) {
+    this.sendCommandWhenReady_('toggleAmpViewport', inViewport);
   }
 
   /** @override */
@@ -233,13 +249,13 @@ export class Amp3dGltf extends AMP.BaseElement {
 
   /**
    * Sends `setSize` command when ready
-   *
+   * @param {!../layout-rect.LayoutSizeDef} size
+   * @private
    */
-  onLayoutMeasure() {
-    const box = this.getLayoutBox();
+  onResized_({height, width}) {
     this.sendCommandWhenReady_(
       'setSize',
-      dict({'width': box.width, 'height': box.height})
+      dict({'width': width, 'height': height})
     );
   }
 
diff --git a/extensions/amp-3d-gltf/0.1/test/test-amp-3d-gltf.js b/extensions/amp-3d-gltf/0.1/test/test-amp-3d-gltf.js
index 815fe2398f151..8e9ced08e8d16 100644
--- a/extensions/amp-3d-gltf/0.1/test/test-amp-3d-gltf.js
+++ b/extensions/amp-3d-gltf/0.1/test/test-amp-3d-gltf.js
@@ -57,9 +57,9 @@ describes.realWin(
       amp3dGltfEl.setAttribute('height', '240');
 
       doc.body.appendChild(amp3dGltfEl);
-      await amp3dGltfEl.build();
+      await amp3dGltfEl.buildInternal();
 
-      const amp3dGltf = amp3dGltfEl.implementation_;
+      const amp3dGltf = await amp3dGltfEl.getImpl();
       env.sandbox
         .stub(amp3dGltf, 'iframe_')
         .get(() => iframe)
@@ -80,7 +80,7 @@ describes.realWin(
       expect(!!doc.body.querySelector('amp-3d-gltf > iframe')).to.be.true;
     });
 
-    // TODO (#16080): this test times out on Travis. Re-enable when fixed.
+    // TODO (#16080): this test times out on CI. Re-enable when fixed.
     it.skip('sends toggleAmpViewport(false) when exiting viewport', async () => {
       const amp3dGltf = await createElement();
 
@@ -94,7 +94,7 @@ describes.realWin(
       expect(postMessageSpy.firstCall.args[1].args).to.be.false;
     });
 
-    // TODO (#16080): this test times out on Travis. Re-enable when fixed.
+    // TODO (#16080): this test times out on CI. Re-enable when fixed.
     it.skip('sends toggleAmpViewport(true) when entering viewport', async () => {
       const amp3dGltf = await createElement();
       const postMessageSpy = env.sandbox.spy(amp3dGltf, 'postMessage_');
diff --git a/extensions/amp-3d-gltf/OWNERS b/extensions/amp-3d-gltf/OWNERS
index 24f349f6b1b5a..4b90d1b8115ac 100644
--- a/extensions/amp-3d-gltf/OWNERS
+++ b/extensions/amp-3d-gltf/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'mixtur'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'mixtur'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-3d-gltf/amp-3d-gltf.md b/extensions/amp-3d-gltf/amp-3d-gltf.md
index 4658f75f1748f..3d8cfa9b2dfb2 100644
--- a/extensions/amp-3d-gltf/amp-3d-gltf.md
+++ b/extensions/amp-3d-gltf/amp-3d-gltf.md
@@ -50,8 +50,8 @@ You must use a [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_AP
 The component supports [glTF 2.0](https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#cameras),
 with the following exceptions:
 
-- Embedded cameras
-- Animation
+-   Embedded cameras
+-   Animation
 
 ### Set CORS headers
 
@@ -100,6 +100,10 @@ center. To enable rotation, set the value to `true`. `autorotate` defaults to
 Use the `enableZoom` attribute to disable zooming in and out of the model. To
 disable zoom, set the value to `false`. `autororate` defaults to `true`.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"GLTF 3D model"`.
+
 ## Actions
 
 ### setModelRotation
@@ -107,12 +111,12 @@ disable zoom, set the value to `false`. `autororate` defaults to `true`.
 The `setModelRotation` action specifies the model's rotation. The rotation order
 is ZYX.
 
-- Specify the rotation value of the x, y, and/or z axis with `x`, `y`, and/or
-  `z` arguments. This action accepts a number between 0 and 1. It defaults to the
-  previous value.
-- Specify the angle of rotation in radians with `xMin`, `xMax`, `yMin`, `yMax`,
-  and/or `zMin`, `zMax` arguments. Use a min and a max to define the target range.
-  The angle range defaults to `0 / pi * 2`.
+-   Specify the rotation value of the x, y, and/or z axis with `x`, `y`, and/or
+    `z` arguments. This action accepts a number between 0 and 1. It defaults to the
+    previous value.
+-   Specify the angle of rotation in radians with `xMin`, `xMax`, `yMin`, `yMax`,
+    and/or `zMin`, `zMax` arguments. Use a min and a max to define the target range.
+    The angle range defaults to `0 / pi * 2`.
 
 The following action changes the x axis of the component’s rotation to 1.57 when fired.
 
@@ -124,11 +128,11 @@ setModelRotation((x = 0.5), (xMin = 0), (xMax = 3.14))
 
 Here are a few things to keep in mind for style:
 
-- The `alpha` attribute specifies transparency.
-- The `clearColor` attribute specifies the color of the background if it isn't transparent.
-- `amp-3d-gltf` defaults to a white background if you don't specify a background color.
+-   The `alpha` attribute specifies transparency.
+-   The `clearColor` attribute specifies the color of the background if it isn't transparent.
+-   `amp-3d-gltf` defaults to a white background if you don't specify a background color.
 
 ## Validation
 
-See [amp-3d-gltf rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-3d-gltf/validator-amp-3d-gltf.protoascii)
+See [amp-3d-gltf rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-3d-gltf/validator-amp-3d-gltf.protoascii)
 in the AMP validator specification.
diff --git a/extensions/amp-3q-player/0.1/amp-3q-player.js b/extensions/amp-3q-player/0.1/amp-3q-player.js
index ee6f13fd58316..22936a872bdc2 100644
--- a/extensions/amp-3q-player/0.1/amp-3q-player.js
+++ b/extensions/amp-3q-player/0.1/amp-3q-player.js
@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
+import {addParamToUrl} from '../../../src/url';
 import {
   createFrameFor,
   objOrParseJson,
@@ -54,6 +56,9 @@ class Amp3QPlayer extends AMP.BaseElement {
     this.playerReadyResolver_ = null;
 
     this.dataId = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -86,15 +91,45 @@ class Amp3QPlayer extends AMP.BaseElement {
     Services.videoManagerForDoc(el).register(this);
   }
 
+  /** @private */
+  generateIframeSrc_() {
+    const explicitParamsAttributes = [
+      'key',
+      'timestamp',
+      'controls',
+      'userToken',
+      'userGroup',
+      'player',
+    ];
+
+    let iframeSrc = 'https://playout.3qsdn.com/';
+    if (this.element.getAttribute(`data-datasource`)) {
+      iframeSrc +=
+        'config_by_metadata/' +
+        this.element.getAttribute(`data-project`) +
+        '/' +
+        this.element.getAttribute(`data-datafield`) +
+        '/';
+    }
+
+    iframeSrc +=
+      dev().assertString(this.dataId) +
+      // Autoplay is handled by VideoManager
+      '?autoplay=false&amp=true';
+
+    explicitParamsAttributes.forEach((explicitParam) => {
+      const val = this.element.getAttribute(`data-${explicitParam}`);
+      if (val) {
+        iframeSrc = addParamToUrl(iframeSrc, explicitParam, val);
+      }
+    });
+
+    return iframeSrc;
+  }
+
   /** @override */
   layoutCallback() {
-    const iframe = createFrameFor(
-      this,
-      'https://playout.3qsdn.com/' +
-        encodeURIComponent(dev().assertString(this.dataId)) +
-        // Autoplay is handled by VideoManager
-        '?autoplay=false&amp=true'
-    );
+    const iframe = createFrameFor(this, this.generateIframeSrc_());
 
     this.iframe_ = iframe;
 
@@ -121,6 +156,8 @@ class Amp3QPlayer extends AMP.BaseElement {
     this.playerReadyPromise_ = deferred.promise;
     this.playerReadyResolver_ = deferred.resolve;
 
+    this.pauseHelper_.updatePlaying(false);
+
     return true;
   }
 
@@ -129,16 +166,9 @@ class Amp3QPlayer extends AMP.BaseElement {
     return isLayoutSizeDefined(layout);
   }
 
-  /** @override */
-  viewportCallback(visible) {
-    this.element.dispatchCustomEvent(VideoEvents.VISIBILITY, {visible});
-  }
-
   /** @override */
   pauseCallback() {
-    if (this.iframe_) {
-      this.pause();
-    }
+    this.pause();
   }
 
   /**
@@ -160,14 +190,24 @@ class Amp3QPlayer extends AMP.BaseElement {
 
     const eventType = data['data'];
 
-    if (eventType == 'ready') {
-      this.playerReadyResolver_();
+    switch (eventType) {
+      case 'ready':
+        this.playerReadyResolver_();
+        break;
+      case 'playing':
+        this.pauseHelper_.updatePlaying(true);
+        break;
+      case 'paused':
+      case 'complete':
+        this.pauseHelper_.updatePlaying(false);
+        break;
     }
 
     redispatch(this.element, eventType, {
       'ready': VideoEvents.LOAD,
       'playing': VideoEvents.PLAYING,
       'paused': VideoEvents.PAUSE,
+      'complete': VideoEvents.ENDED,
       'muted': VideoEvents.MUTED,
       'unmuted': VideoEvents.UNMUTED,
     });
@@ -194,6 +234,9 @@ class Amp3QPlayer extends AMP.BaseElement {
 
   /** @override */
   pause() {
+    if (!this.iframe_) {
+      return;
+    }
     this.sdnPostMessage_('pause');
   }
 
diff --git a/extensions/amp-3q-player/0.1/test/test-amp-3q-player.js b/extensions/amp-3q-player/0.1/test/test-amp-3q-player.js
index 8512503ad4d92..d195958cbdc88 100644
--- a/extensions/amp-3q-player/0.1/test/test-amp-3q-player.js
+++ b/extensions/amp-3q-player/0.1/test/test-amp-3q-player.js
@@ -15,9 +15,11 @@
  */
 
 import '../amp-3q-player';
+import * as dom from '../../../../src/dom';
 import {Services} from '../../../../src/services';
 import {VideoEvents} from '../../../../src/video-interface';
 import {createElementWithAttributes} from '../../../../src/dom';
+import {installResizeObserverStub} from '../../../../testing/resize-observer-stub';
 import {listenOncePromise} from '../../../../src/event-helper';
 
 describes.realWin(
@@ -31,11 +33,13 @@ describes.realWin(
     let win;
     let doc;
     let timer;
+    let resizeObserverStub;
 
     beforeEach(() => {
       win = env.win;
       doc = win.document;
       timer = Services.timerFor(win);
+      resizeObserverStub = installResizeObserverStub(env.sandbox, win);
     });
 
     async function get3QElement(playoutId) {
@@ -47,54 +51,178 @@ describes.realWin(
         player.setAttribute('data-id', playoutId);
       }
       doc.body.appendChild(player);
-      await player.build();
+      await player.buildInternal();
       player.layoutCallback();
       const iframe = player.querySelector('iframe');
-      player.implementation_.sdnBridge_({
+      const impl = await player.getImpl();
+      impl.sdnBridge_({
         source: iframe.contentWindow,
         data: JSON.stringify({data: 'ready'}),
       });
       return player;
     }
 
-    it('renders', async () => {
-      const player = await get3QElement('c8dbe7f4-7f7f-11e6-a407-0cc47a188158');
-      const iframe = player.querySelector('iframe');
-      expect(iframe).to.not.be.null;
-      expect(iframe.src).to.equal(
-        'https://playout.3qsdn.com/c8dbe7f4-7f7f-11e6-a407-0cc47a188158?autoplay=false&amp=true'
-      );
+    describe('pause', () => {
+      let player, impl, iframe;
+      let postMessageSpy;
+
+      beforeEach(async () => {
+        player = await get3QElement('c8dbe7f4-7f7f-11e6-a407-0cc47a188158');
+        impl = await player.getImpl();
+        iframe = player.querySelector('iframe');
+        postMessageSpy = env.sandbox.spy(impl, 'sdnPostMessage_');
+      });
+
+      it('should auto-pause when playing and no size', async () => {
+        sendFakeMessage(impl, iframe, 'playing');
+        resizeObserverStub.notifySync({
+          target: player,
+          borderBoxSize: [{inlineSize: 10, blockSize: 10}],
+        });
+        resizeObserverStub.notifySync({
+          target: player,
+          borderBoxSize: [{inlineSize: 0, blockSize: 0}],
+        });
+        expect(postMessageSpy).to.be.calledWith('pause');
+      });
+
+      it('should NOT auto-pause when not playing', async () => {
+        sendFakeMessage(impl, iframe, 'playing');
+        sendFakeMessage(impl, iframe, 'paused');
+        resizeObserverStub.notifySync({
+          target: player,
+          borderBoxSize: [{inlineSize: 10, blockSize: 10}],
+        });
+        resizeObserverStub.notifySync({
+          target: player,
+          borderBoxSize: [{inlineSize: 0, blockSize: 0}],
+        });
+        expect(postMessageSpy).to.not.be.calledWith('pause');
+      });
     });
 
-    it('requires data-id', () => {
-      return allowConsoleError(() => {
-        return get3QElement('').should.eventually.be.rejectedWith(
-          /The data-id attribute is required/
+    describe('rendering', async () => {
+      it('renders', async () => {
+        const player = await get3QElement(
+          'c8dbe7f4-7f7f-11e6-a407-0cc47a188158'
+        );
+        const iframe = player.querySelector('iframe');
+        expect(iframe).to.not.be.null;
+        expect(iframe.src).to.equal(
+          'https://playout.3qsdn.com/c8dbe7f4-7f7f-11e6-a407-0cc47a188158?autoplay=false&amp=true'
         );
       });
+
+      it('requires data-id', () => {
+        return allowConsoleError(() => {
+          return get3QElement('').should.eventually.be.rejectedWith(
+            /The data-id attribute is required/
+          );
+        });
+      });
+
+      it('should forward events from amp-3q-player to the amp element', async () => {
+        const player = await get3QElement(
+          'c8dbe7f4-7f7f-11e6-a407-0cc47a188158'
+        );
+        const impl = await player.getImpl();
+        const iframe = player.querySelector('iframe');
+        await Promise.resolve();
+        const p1 = listenOncePromise(player, VideoEvents.MUTED);
+        sendFakeMessage(impl, iframe, 'muted');
+        await p1;
+        const p2 = listenOncePromise(player, VideoEvents.PLAYING);
+        sendFakeMessage(impl, iframe, 'playing');
+        await p2;
+        const p3 = listenOncePromise(player, VideoEvents.PAUSE);
+        sendFakeMessage(impl, iframe, 'paused');
+        await p3;
+        const p4 = listenOncePromise(player, VideoEvents.UNMUTED);
+        sendFakeMessage(impl, iframe, 'unmuted');
+        const successTimeout = timer.promise(10);
+        return Promise.race([p4, successTimeout]);
+      });
+
+      it('removes iframe after unlayoutCallback', async () => {
+        const player = await get3QElement(
+          'c8dbe7f4-7f7f-11e6-a407-0cc47a188158'
+        );
+        const impl = await player.getImpl(false);
+        const iframe = player.querySelector('iframe');
+        expect(iframe).to.not.be.null;
+        impl.unlayoutCallback();
+        expect(player.querySelector('iframe')).to.be.null;
+        expect(impl.iframe_).to.be.null;
+      });
     });
 
-    it('should forward events from amp-3q-player to the amp element', async () => {
-      const player = await get3QElement('c8dbe7f4-7f7f-11e6-a407-0cc47a188158');
-      const iframe = player.querySelector('iframe');
-      await Promise.resolve();
-      const p1 = listenOncePromise(player, VideoEvents.MUTED);
-      sendFakeMessage(player, iframe, 'muted');
-      await p1;
-      const p2 = listenOncePromise(player, VideoEvents.PLAYING);
-      sendFakeMessage(player, iframe, 'playing');
-      await p2;
-      const p3 = listenOncePromise(player, VideoEvents.PAUSE);
-      sendFakeMessage(player, iframe, 'paused');
-      await p3;
-      const p4 = listenOncePromise(player, VideoEvents.UNMUTED);
-      sendFakeMessage(player, iframe, 'unmuted');
-      const successTimeout = timer.promise(10);
-      return Promise.race([p4, successTimeout]);
+    describe('methods', async () => {
+      let impl;
+      beforeEach(async () => {
+        const player = await get3QElement(
+          'c8dbe7f4-7f7f-11e6-a407-0cc47a188158'
+        );
+        impl = await player.getImpl(false);
+      });
+
+      it('can play', () => {
+        const spy = env.sandbox.spy(impl, 'sdnPostMessage_');
+        impl.play();
+        expect(spy).to.be.calledWith('play2');
+      });
+
+      it('can pause', () => {
+        const spy = env.sandbox.spy(impl, 'sdnPostMessage_');
+        impl.pause();
+        expect(spy).to.be.calledWith('pause');
+      });
+
+      it('can mute', () => {
+        const spy = env.sandbox.spy(impl, 'sdnPostMessage_');
+        impl.mute();
+        expect(spy).to.be.calledWith('mute');
+      });
+
+      it('can unmute', () => {
+        const spy = env.sandbox.spy(impl, 'sdnPostMessage_');
+        impl.unmute();
+        expect(spy).to.be.calledWith('unmute');
+      });
+
+      it('supports platform', () => {
+        expect(impl.supportsPlatform()).to.be.true;
+      });
+
+      it('is interactive', () => {
+        expect(impl.isInteractive()).to.be.true;
+      });
+
+      it('toggles controls', () => {
+        const spy = env.sandbox.stub(impl, 'sdnPostMessage_');
+        impl.showControls();
+        expect(spy).calledWith('showControlbar');
+        impl.hideControls();
+        expect(spy).calledWith('hideControlbar');
+        impl.showControls();
+        expect(spy).calledWith('showControlbar');
+      });
+
+      it('can enter fullscreen', () => {
+        const spy = env.sandbox.spy(dom, 'fullscreenEnter');
+        impl.fullscreenEnter();
+        expect(spy).calledWith(impl.iframe_);
+      });
+
+      it('can exit fullscreen', () => {
+        const spy = env.sandbox.spy(dom, 'fullscreenExit');
+        impl.fullscreenExit();
+        expect(spy).calledWith(impl.iframe_);
+        expect(impl.isFullscreen()).to.be.false;
+      });
     });
 
-    function sendFakeMessage(player, iframe, command) {
-      player.implementation_.sdnBridge_({
+    function sendFakeMessage(impl, iframe, command) {
+      impl.sdnBridge_({
         source: iframe.contentWindow,
         data: JSON.stringify({data: command}),
       });
diff --git a/extensions/amp-3q-player/OWNERS b/extensions/amp-3q-player/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-3q-player/OWNERS
+++ b/extensions/amp-3q-player/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-3q-player/amp-3q-player.md b/extensions/amp-3q-player/amp-3q-player.md
index 936544389ebfb..b2ca50645c91a 100644
--- a/extensions/amp-3q-player/amp-3q-player.md
+++ b/extensions/amp-3q-player/amp-3q-player.md
@@ -55,10 +55,10 @@ The `data-id` attribute specifies the appropriate `sdnPlayoutId` from 3Q SDN.
 If the `autoplay` attribute is present, and the browser supports autoplay, the
 following behaviors are enabled:
 
-- The video automatically mutes before autoplay starts.
-- When the user scrolls the video out of view, the video pauses.
-- When the user scrolls the video into view, the video resumes.
-- The video unmutes when the user taps it.
+-   The video automatically mutes before autoplay starts.
+-   When the user scrolls the video out of view, the video pauses.
+-   When the user scrolls the video into view, the video resumes.
+-   The video unmutes when the user taps it.
 
 If the user interacts with the video and then scrolls it into or out of view,
 the state of the video remains the same. For example, if the user pauses the
@@ -72,5 +72,5 @@ that are extended to all AMP components.
 
 ## Validation
 
-See [amp-3q-player rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-3q-player/validator-amp-3q-player.protoascii)
+See [amp-3q-player rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-3q-player/validator-amp-3q-player.protoascii)
 in the AMP validator specification.
diff --git a/extensions/amp-a4a/0.1/a4a-variable-source.js b/extensions/amp-a4a/0.1/a4a-variable-source.js
index 0b3b9f9e62d61..8b6f6611f3b3f 100644
--- a/extensions/amp-a4a/0.1/a4a-variable-source.js
+++ b/extensions/amp-a4a/0.1/a4a-variable-source.js
@@ -46,8 +46,6 @@ const ALLOWLISTED_VARIABLES = [
   'SCREEN_WIDTH',
   'SCROLL_HEIGHT',
   'SCROLL_WIDTH',
-  'SHARE_TRACKING_INCOMING',
-  'SHARE_TRACKING_OUTGOING',
   'SOURCE_HOST',
   'SOURCE_HOSTNAME',
   'SOURCE_PATH',
@@ -200,9 +198,8 @@ export class A4AVariableSource extends VariableSource {
       for (let j = 0; j < attributeNames.length; ++j) {
         const attributeName = attributeNames[j];
         if (elements[i].hasAttribute(attributeName)) {
-          currentResult[attributeName] = elements[i].getAttribute(
-            attributeName
-          );
+          currentResult[attributeName] =
+            elements[i].getAttribute(attributeName);
           foundAtLeastOneAttr = true;
         }
       }
diff --git a/extensions/amp-a4a/0.1/amp-a4a.js b/extensions/amp-a4a/0.1/amp-a4a.js
index 6febbd863652f..f02583dfc52fd 100644
--- a/extensions/amp-a4a/0.1/amp-a4a.js
+++ b/extensions/amp-a4a/0.1/amp-a4a.js
@@ -15,9 +15,15 @@
  */
 
 import {A4AVariableSource} from './a4a-variable-source';
+import {ADS_INITIAL_INTERSECTION_EXP} from '../../../src/experiments/ads-initial-intersection-exp';
+import {CONSENT_POLICY_STATE} from '../../../src/core/constants/consent-state';
+import {Deferred, tryResolve} from '../../../src/core/data-structures/promise';
 import {
-  CONSENT_POLICY_STATE, // eslint-disable-line no-unused-vars
-} from '../../../src/consent-state';
+  DetachedDomStream,
+  streamResponseToWriter,
+} from '../../../src/core/dom/stream';
+import {DomTransformStream} from '../../../src/utils/dom-tranform-stream';
+import {GEO_IN_GROUP} from '../../amp-geo/0.1/amp-geo-in-group';
 import {Layout, LayoutPriority, isLayoutSizeDefined} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {SignatureVerifier, VerificationStatus} from './signature-verifier';
@@ -26,43 +32,57 @@ import {
   generateSentinel,
   getDefaultBootstrapBaseUrl,
 } from '../../../src/3p-frame';
-import {assertHttpsUrl, tryDecodeUriComponent} from '../../../src/url';
-import {cancellation, isCancellation} from '../../../src/error';
+import {assertHttpsUrl} from '../../../src/url';
+import {cancellation, isCancellation} from '../../../src/error-reporting';
 import {createElementWithAttributes} from '../../../src/dom';
-import {
-  dev,
-  devAssert,
-  duplicateErrorIfNecessary,
-  user,
-} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {createSecureDocSkeleton, createSecureFrame} from './secure-frame';
+import {dev, devAssert, user, userAssert} from '../../../src/log';
+import {dict} from '../../../src/core/types/object';
+import {duplicateErrorIfNecessary} from '../../../src/core/error';
 import {
   getAmpAdRenderOutsideViewport,
   incrementLoadingAds,
   is3pThrottled,
 } from '../../amp-ad/0.1/concurrent-load';
 import {
-  getConsentPolicyGdprApplies,
+  getConsentMetadata,
   getConsentPolicyInfo,
   getConsentPolicyState,
 } from '../../../src/consent';
 import {getContextMetadata} from '../../../src/iframe-attributes';
-import {getExperimentBranch} from '../../../src/experiments';
+import {getExperimentBranch, isExperimentOn} from '../../../src/experiments';
+import {getExtensionsFromMetadata} from './amp-ad-utils';
 import {getMode} from '../../../src/mode';
 import {insertAnalyticsElement} from '../../../src/extension-analytics';
 import {
   installFriendlyIframeEmbed,
-  setFriendlyIframeEmbedVisible,
+  isSrcdocSupported,
+  preloadFriendlyIframeEmbedExtensions,
 } from '../../../src/friendly-iframe-embed';
+import {installRealTimeConfigServiceForDoc} from '../../../src/service/real-time-config/real-time-config-impl';
 import {installUrlReplacementsForEmbed} from '../../../src/service/url-replacements-impl';
+import {
+  intersectionEntryToJson,
+  measureIntersection,
+} from '../../../src/utils/intersection';
 import {isAdPositionAllowed} from '../../../src/ad-helper';
-import {isArray, isEnumValue, isObject} from '../../../src/types';
-import {parseJson} from '../../../src/json';
+import {isArray, isEnumValue, isObject} from '../../../src/core/types';
+import {tryDecodeUriComponent} from '../../../src/core/types/string/url';
+
+import {listenOnce} from '../../../src/event-helper';
+import {
+  observeWithSharedInOb,
+  unobserveWithSharedInOb,
+} from '../../../src/viewport-observer';
+import {padStart} from '../../../src/core/types/string';
+import {parseJson} from '../../../src/core/types/object/json';
+import {processHead} from './head-validation';
 import {setStyle} from '../../../src/style';
 import {signingServerURLs} from '../../../ads/_a4a-config';
+
 import {triggerAnalyticsEvent} from '../../../src/analytics';
-import {tryResolve} from '../../../src/utils/promise';
-import {utf8Decode} from '../../../src/utils/bytes';
+import {utf8Decode} from '../../../src/core/types/string/bytes';
+import {whenWithinViewport} from './within-viewport';
 
 /** @type {Array<string>} */
 const METADATA_STRINGS = [
@@ -75,7 +95,7 @@ const METADATA_STRINGS = [
 // acceptable solution to the 'Safari on iOS doesn't fetch iframe src from
 // cache' issue.  See https://github.com/ampproject/amphtml/issues/5614
 /** @type {string} */
-export const DEFAULT_SAFEFRAME_VERSION = '1-0-23';
+export const DEFAULT_SAFEFRAME_VERSION = '1-0-37';
 
 /** @const {string} */
 export const CREATIVE_SIZE_HEADER = 'X-CreativeSize';
@@ -138,7 +158,9 @@ export let CreativeMetaDataDef;
 /** @typedef {{
       consentState: (?CONSENT_POLICY_STATE|undefined),
       consentString: (?string|undefined),
+      consentStringType: (?CONSENT_STRING_TYPE|boolean),
       gdprApplies: (?boolean|undefined),
+      additionalConsent: (?string|undefined),
     }} */
 export let ConsentTupleDef;
 
@@ -173,13 +195,11 @@ const LIFECYCLE_STAGE_TO_ANALYTICS_TRIGGER = {
   'crossDomainIframeLoaded': AnalyticsTrigger.AD_IFRAME_LOADED,
 };
 
-/**
- * @const @enum {string}
- */
-export const NO_SIGNING_EXP = {
-  id: 'a4a-no-signing',
-  control: '21066324',
-  experiment: '21066325',
+/** @const @enum {string} */
+export const MODULE_NOMODULE_PARAMS_EXP = {
+  ID: 'module-nomodule',
+  CONTROL: '21066677',
+  EXPERIMENT: '21066678',
 };
 
 /**
@@ -238,7 +258,10 @@ export class AmpA4A extends AMP.BaseElement {
     /** @private {?Promise<undefined>} */
     this.keysetPromise_ = null;
 
-    /** @private {?Promise<?CreativeMetaDataDef>} */
+    /**
+     * In no signing experiment metadata will be data from head validation.
+     * @private {?Promise<?CreativeMetaDataDef|?./head-validation.ValidatedHeadDef>}
+     */
     this.adPromise_ = null;
 
     /**
@@ -274,15 +297,19 @@ export class AmpA4A extends AMP.BaseElement {
      */
     this.creativeSize_ = null;
 
-    /** @private {?../../../src/layout-rect.LayoutRectDef} */
+    /** @private {?../../../src/layout-rect.LayoutSizeDef} */
     this.originalSlotSize_ = null;
 
+    /** @private {Promise<!IntersectionObserverEntry>} */
+    this.initialIntersectionPromise_ = null;
+
     /**
      * Note(keithwrightbos) - ensure the default here is null so that ios
      * uses safeframe when response header is not specified.
      * @private {?XORIGIN_MODE}
      */
-    this.experimentalNonAmpCreativeRenderMethod_ = this.getNonAmpCreativeRenderingMethod();
+    this.experimentalNonAmpCreativeRenderMethod_ =
+      this.getNonAmpCreativeRenderingMethod();
 
     /**
      * Gets a notion of current time, in ms.  The value is not necessarily
@@ -315,13 +342,6 @@ export class AmpA4A extends AMP.BaseElement {
      */
     this.iframe = null;
 
-    /**
-     * TODO(keithwrightbos) - remove once resume behavior is verified.
-     * {boolean} whether most recent ad request was generated as part
-     *    of resume callback.
-     */
-    this.fromResumeCallback = false;
-
     /** @type {string} */
     this.safeframeVersion = DEFAULT_SAFEFRAME_VERSION;
 
@@ -363,6 +383,15 @@ export class AmpA4A extends AMP.BaseElement {
      * @type {boolean}
      */
     this.isSinglePageStoryAd = false;
+
+    /**
+     * Transfers elements from the detached body to the given body element.
+     * @private {?function(!Element)}
+     */
+    this.transferDomBody_ = null;
+
+    /** @private {function(boolean)} */
+    this.boundViewportCallback_ = this.viewportCallbackTemp.bind(this);
   }
 
   /** @override */
@@ -423,6 +452,13 @@ export class AmpA4A extends AMP.BaseElement {
     }
 
     this.isSinglePageStoryAd = this.element.hasAttribute('amp-story');
+
+    const asyncIntersection =
+      getExperimentBranch(this.win, ADS_INITIAL_INTERSECTION_EXP.id) ===
+      ADS_INITIAL_INTERSECTION_EXP.experiment;
+    this.initialIntersectionPromise_ = asyncIntersection
+      ? measureIntersection(this.element)
+      : Promise.resolve(this.element.getIntersectionChangeEntry());
   }
 
   /** @override */
@@ -521,14 +557,21 @@ export class AmpA4A extends AMP.BaseElement {
     }
   }
 
+  /** @override */
+  pauseCallback() {
+    if (this.friendlyIframeEmbed_) {
+      this.friendlyIframeEmbed_.pause();
+    }
+  }
+
   /** @override */
   resumeCallback() {
     // FIE that was not destroyed on unlayoutCallback does not require a new
     // ad request.
     if (this.friendlyIframeEmbed_) {
+      this.friendlyIframeEmbed_.resume();
       return;
     }
-    this.fromResumeCallback = true;
     // If layout of page has not changed, onLayoutMeasure will not be called
     // so do so explicitly.
     const resource = this.getResource();
@@ -595,7 +638,7 @@ export class AmpA4A extends AMP.BaseElement {
       user().warn(
         TAG,
         `<${this.element.tagName}> is not allowed to be ` +
-          `placed in elements with position:fixed: ${this.element}`
+          `placed in elements with position: fixed or sticky: ${this.element}`
       );
       return false;
     }
@@ -621,6 +664,28 @@ export class AmpA4A extends AMP.BaseElement {
     this.initiateAdRequest();
   }
 
+  /**
+   * Resolves when underlying element is within the viewport range given or
+   * has been loaded already.
+   * @param {number|boolean} viewport derived from renderOutsideViewport.
+   * @return {!Promise}
+   * @protected
+   */
+  whenWithinViewport(viewport) {
+    devAssert(viewport !== false);
+    const resource = this.getResource();
+    if (WITHIN_VIEWPORT_INOB || getMode().localDev || getMode().test) {
+      // Resolve is already laid out or viewport is true.
+      if (!resource.isLayoutPending() || viewport === true) {
+        return Promise.resolve();
+      }
+      // Track when within the specified number of viewports.
+      const viewportNum = dev().assertNumber(viewport);
+      return whenWithinViewport(this.element, viewportNum);
+    }
+    return resource.whenWithinViewport(viewport);
+  }
+
   /**
    * This is the entry point into the ad promise chain.
    *
@@ -667,7 +732,7 @@ export class AmpA4A extends AMP.BaseElement {
         // meeting the definition as opposed to waiting on the promise.
         const delay = this.delayAdRequestEnabled();
         if (delay) {
-          return this.getResource().whenWithinViewport(
+          return this.whenWithinViewport(
             typeof delay == 'number' ? delay : this.renderOutsideViewport()
           );
         }
@@ -695,18 +760,18 @@ export class AmpA4A extends AMP.BaseElement {
             return null;
           });
 
-          const gdprAppliesPromise = getConsentPolicyGdprApplies(
+          const consentMetadataPromise = getConsentMetadata(
             this.element,
             consentPolicyId
           ).catch((err) => {
-            user().error(TAG, 'Error determining gdprApplies', err);
+            user().error(TAG, 'Error determining consent metadata', err);
             return null;
           });
 
           return Promise.all([
             consentStatePromise,
             consentStringPromise,
-            gdprAppliesPromise,
+            consentMetadataPromise,
           ]);
         }
 
@@ -719,12 +784,38 @@ export class AmpA4A extends AMP.BaseElement {
 
         const consentState = consentResponse[0];
         const consentString = consentResponse[1];
-        const gdprApplies = consentResponse[2];
-
-        return /** @type {!Promise<?string>} */ (this.getAdUrl(
-          {consentState, consentString, gdprApplies},
-          this.tryExecuteRealTimeConfig_(consentState, consentString)
-        ));
+        const consentMetadata = consentResponse[2];
+        const gdprApplies = consentMetadata
+          ? consentMetadata['gdprApplies']
+          : consentMetadata;
+        const additionalConsent = consentMetadata
+          ? consentMetadata['additionalConsent']
+          : consentMetadata;
+        const consentStringType = consentMetadata
+          ? consentMetadata['consentStringType']
+          : consentMetadata;
+
+        return /** @type {!Promise<?string>} */ (
+          this.getServeNpaSignal().then((npaSignal) =>
+            this.getAdUrl(
+              {
+                consentState,
+                consentString,
+                consentStringType,
+                gdprApplies,
+                additionalConsent,
+              },
+              this.tryExecuteRealTimeConfig_(
+                consentState,
+                consentString,
+                /** @type {?Object<string, string|number|boolean|undefined>} */ (
+                  consentMetadata
+                )
+              ),
+              npaSignal
+            )
+          )
+        );
       })
       // This block returns the (possibly empty) response to the XHR request.
       /** @return {!Promise<?Response>} */
@@ -812,13 +903,11 @@ export class AmpA4A extends AMP.BaseElement {
             this.getSafeframePath()
           );
         }
-
         return fetchResponse;
       })
       .then((fetchResponse) =>
-        getExperimentBranch(this.win, NO_SIGNING_EXP.id) ===
-        NO_SIGNING_EXP.experiment
-          ? this.streamResponse_(fetchResponse)
+        this.isInNoSigningExp()
+          ? this.streamResponse_(fetchResponse, checkStillCurrent)
           : this.startValidationFlow_(fetchResponse, checkStillCurrent)
       )
       .catch((error) => {
@@ -843,11 +932,124 @@ export class AmpA4A extends AMP.BaseElement {
   }
 
   /**
-   * @param {!Response} unusedResponse
+   * @visibleForTesting
+   * @return {boolean}
+   */
+  isInNoSigningExp() {
+    return NO_SIGNING_RTV;
+  }
+
+  /**
+   * Allow subclasses to skip client side validation of non-amp creatives
+   * based on http headers for perfomance. When true, ads will fall back to
+   * x-domain earlier.
+   * @param {!Headers} unusedHeaders
+   * @return {boolean}
+   */
+  skipClientSideValidation(unusedHeaders) {
+    return false;
+  }
+
+  /**
+   * Start streaming response into the detached document.
+   * @param {!Response} httpResponse
+   * @param {function()} checkStillCurrent
+   * @return {Promise<?./head-validation.ValidatedHeadDef>}
+   */
+  streamResponse_(httpResponse, checkStillCurrent) {
+    if (httpResponse.status === 204) {
+      this.forceCollapse();
+      return Promise.reject(NO_CONTENT_RESPONSE);
+    }
+
+    // Extract size will also parse x-ampanalytics header for some subclasses.
+    const size = this.extractSize(httpResponse.headers);
+    this.creativeSize_ = size || this.creativeSize_;
+
+    if (
+      !isPlatformSupported(this.win) ||
+      this.skipClientSideValidation(httpResponse.headers)
+    ) {
+      return this.handleFallback_(httpResponse, checkStillCurrent);
+    }
+
+    // Duplicating httpResponse stream as safeframe/nameframe rendering will need the
+    // unaltered httpResponse content.
+    const fallbackHttpResponse = httpResponse.clone();
+
+    // This transformation consumes the detached DOM chunks and
+    // exposes our waitForHead and transferBody methods.
+    const transformStream = new DomTransformStream(this.win);
+    // Receives chunks of text and writes to detached DOM.
+    const detachedStream = new DetachedDomStream(
+      this.win,
+      (chunk) => transformStream.onChunk(chunk),
+      (doc) => transformStream.onEnd(doc)
+    );
+
+    this.transferDomBody_ = transformStream.transferBody.bind(transformStream);
+
+    // Decodes our httpResponse bytes and pipes them to the
+    // DetachedDomStream.
+    return streamResponseToWriter(this.win, httpResponse, detachedStream)
+      .then((responseBodyHasContent) => {
+        checkStillCurrent();
+        // `amp-ff-empty-creative` header is not present, and httpResponse.body
+        // is empty.
+        if (!responseBodyHasContent) {
+          this.forceCollapse();
+          return Promise.reject(NO_CONTENT_RESPONSE);
+        }
+      })
+      .then(() => {
+        checkStillCurrent();
+        return transformStream.waitForHead();
+      })
+      .then((head) => {
+        checkStillCurrent();
+        return this.validateHeadElement_(head);
+      })
+      .then((sanitizedHeadElement) => {
+        checkStillCurrent();
+        // We should not render as FIE.
+        if (!sanitizedHeadElement) {
+          return this.handleFallback_(fallbackHttpResponse, checkStillCurrent);
+        }
+        this.updateLayoutPriority(LayoutPriority.CONTENT);
+        this.isVerifiedAmpCreative_ = true;
+        return sanitizedHeadElement;
+      });
+  }
+
+  /**
+   * Handles case where creative cannot or has chosen not to be rendered
+   * safely in FIE. Returning null forces x-domain render in
+   * attemptToRenderCreative
+   * @param {!Response} fallbackHttpResponse
+   * @param {function()} checkStillCurrent
+   * @return {!Promise<null>}
    */
-  streamResponse_(unusedResponse) {
-    // TODO(ccordry): implement
-    dev().error(TAG, 'unsigned path not yet implemented');
+  handleFallback_(fallbackHttpResponse, checkStillCurrent) {
+    // Experiment to give non-AMP creatives same benefits as AMP so
+    // update priority.
+    if (this.inNonAmpPreferenceExp()) {
+      this.updateLayoutPriority(LayoutPriority.CONTENT);
+    }
+    return fallbackHttpResponse.arrayBuffer().then((domTextContent) => {
+      checkStillCurrent();
+      this.creativeBody_ = domTextContent;
+      return null;
+    });
+  }
+
+  /**
+   * Prepare the creative <head> by removing any non-secure elements and
+   * exracting extensions
+   * @param {!Element} headElement
+   * @return {?./head-validation.ValidatedHeadDef} head data or null if we should fall back to xdomain.
+   */
+  validateHeadElement_(headElement) {
+    return processHead(this.win, this.element, headElement);
   }
 
   /**
@@ -922,7 +1124,9 @@ export class AmpA4A extends AMP.BaseElement {
           // via #validateAdResponse_.  See GitHub issue
           // https://github.com/ampproject/amphtml/issues/4187
           let creativeMetaDataDef;
+
           if (
+            !isPlatformSupported(this.win) ||
             !creativeDecoded ||
             !(creativeMetaDataDef = this.getAmpAdMetadata(creativeDecoded))
           ) {
@@ -936,12 +1140,12 @@ export class AmpA4A extends AMP.BaseElement {
 
           // Update priority.
           this.updateLayoutPriority(LayoutPriority.CONTENT);
+
           // Load any extensions; do not wait on their promises as this
           // is just to prefetch.
-          const extensions = Services.extensionsFor(this.win);
-          creativeMetaDataDef.customElementExtensions.forEach((extensionId) =>
-            extensions.preloadExtension(extensionId)
-          );
+          const extensions = getExtensionsFromMetadata(creativeMetaDataDef);
+          preloadFriendlyIframeEmbedExtensions(this.win, extensions);
+
           // Preload any fonts.
           (creativeMetaDataDef.customStylesheets || []).forEach((font) =>
             Services.preconnectFor(this.win).preload(
@@ -1132,7 +1336,9 @@ export class AmpA4A extends AMP.BaseElement {
     if (this.isRefreshing) {
       this.destroyFrame(true);
     }
-    return this.attemptToRenderCreative();
+    return this.attemptToRenderCreative().then(() => {
+      observeWithSharedInOb(this.element, this.boundViewportCallback_);
+    });
   }
 
   /**
@@ -1153,9 +1359,16 @@ export class AmpA4A extends AMP.BaseElement {
     }
     const checkStillCurrent = this.verifyStillCurrent();
     // Promise chain will have determined if creative is valid AMP.
-    return this.adPromise_
-      .then((creativeMetaData) => {
+
+    return Promise.all([
+      this.adPromise_,
+      this.uiHandler.getScrollPromiseForStickyAd(),
+    ])
+      .then((values) => {
         checkStillCurrent();
+
+        this.uiHandler.maybeInitStickyAd();
+        const creativeMetaData = values[0];
         if (this.isCollapsed_) {
           return Promise.resolve();
         }
@@ -1165,12 +1378,29 @@ export class AmpA4A extends AMP.BaseElement {
         if (this.iframe && !this.isRefreshing) {
           return Promise.resolve();
         }
+
         if (!creativeMetaData) {
           // Non-AMP creative case, will verify ad url existence.
           return this.renderNonAmpCreative();
         }
+
+        let friendlyRenderPromise;
+
+        if (this.isInNoSigningExp()) {
+          friendlyRenderPromise = this.renderFriendlyTrustless_(
+            /** @type {!./head-validation.ValidatedHeadDef} */ (
+              creativeMetaData
+            ),
+            checkStillCurrent
+          );
+        } else {
+          friendlyRenderPromise = this.renderAmpCreative_(
+            /** @type {!CreativeMetaDataDef} */ (creativeMetaData)
+          );
+        }
+
         // Must be an AMP creative.
-        return this.renderAmpCreative_(creativeMetaData).catch((err) => {
+        return friendlyRenderPromise.catch((err) => {
           checkStillCurrent();
           // Failed to render via AMP creative path so fallback to non-AMP
           // rendering within cross domain iframe.
@@ -1202,12 +1432,13 @@ export class AmpA4A extends AMP.BaseElement {
     // Store original size of slot in order to allow re-expansion on
     // unlayoutCallback so that it is reverted to original size in case
     // of resumeCallback.
-    this.originalSlotSize_ = this.originalSlotSize_ || this.getLayoutBox();
+    this.originalSlotSize_ = this.originalSlotSize_ || this.getLayoutSize();
     return super.attemptChangeSize(newHeight, newWidth);
   }
 
   /** @override  */
   unlayoutCallback() {
+    unobserveWithSharedInOb(this.element);
     this.tearDownSlot();
     return true;
   }
@@ -1241,13 +1472,13 @@ export class AmpA4A extends AMP.BaseElement {
 
     // Remove rendering frame, if it exists.
     this.destroyFrame();
-
     this.adPromise_ = null;
     this.adUrl_ = null;
     this.creativeBody_ = null;
     this.isVerifiedAmpCreative_ = false;
-    this.fromResumeCallback = false;
-    this.experimentalNonAmpCreativeRenderMethod_ = this.getNonAmpCreativeRenderingMethod();
+    this.transferDomBody_ = null;
+    this.experimentalNonAmpCreativeRenderMethod_ =
+      this.getNonAmpCreativeRenderingMethod();
     this.postAdResponseExperimentFeatures = {};
   }
 
@@ -1283,13 +1514,17 @@ export class AmpA4A extends AMP.BaseElement {
       this.xOriginIframeHandler_.freeXOriginIframe();
       this.xOriginIframeHandler_ = null;
     }
+    if (this.uiHandler) {
+      this.uiHandler.cleanup();
+    }
   }
 
-  /** @override  */
-  viewportCallback(inViewport) {
-    if (this.friendlyIframeEmbed_) {
-      setFriendlyIframeEmbedVisible(this.friendlyIframeEmbed_, inViewport);
-    }
+  // TODO: Rename to viewportCallback once BaseElement.viewportCallback has been removed.
+  /**
+   * @param {boolean}  inViewport
+   * @protected
+   */
+  viewportCallbackTemp(inViewport) {
     if (this.xOriginIframeHandler_) {
       this.xOriginIframeHandler_.viewportCallback(inViewport);
     }
@@ -1300,12 +1535,52 @@ export class AmpA4A extends AMP.BaseElement {
    * by network.
    * @param {!ConsentTupleDef=} opt_ununsedConsentTuple
    * @param {Promise<!Array<rtcResponseDef>>=} opt_rtcResponsesPromise
+   * @param {boolean=} opt_serveNpaSignal
    * @return {!Promise<string>|string}
    */
-  getAdUrl(opt_ununsedConsentTuple, opt_rtcResponsesPromise) {
+  getAdUrl(
+    opt_ununsedConsentTuple,
+    opt_rtcResponsesPromise,
+    opt_serveNpaSignal
+  ) {
     throw new Error('getAdUrl not implemented!');
   }
 
+  /**
+   * Checks if the `always-serve-npa` attribute is present and valid
+   * based on the geolocation.  To be implemented by network.
+   * @return {!Promise<boolean>}
+   */
+  getServeNpaSignal() {
+    return Promise.resolve(false);
+  }
+
+  /**
+   * Checks if the `block-rtc` attribute is present and valid
+   * based on the geolocation.
+   * @return {!Promise<boolean>}
+   */
+  getBlockRtc_() {
+    if (!this.element.getAttribute('block-rtc')) {
+      return Promise.resolve(false);
+    }
+    return Services.geoForDocOrNull(this.element).then((geoService) => {
+      userAssert(geoService, '%s: requires <amp-geo> to use `block-rtc`', TAG);
+      const blockRtcLocations = this.element.getAttribute('block-rtc');
+      const locations = blockRtcLocations.split(',');
+      for (let i = 0; i < locations.length; i++) {
+        const geoGroup = geoService.isInCountryGroup(locations[i]);
+        if (geoGroup === GEO_IN_GROUP.IN) {
+          return true;
+        } else if (geoGroup === GEO_IN_GROUP.NOT_DEFINED) {
+          user().warn('AMP-AD', `Geo group "${locations[i]}" was not defined.`);
+        }
+      }
+      // Not in any of the defined geo groups.
+      return false;
+    });
+  }
+
   /**
    * Resets ad url state to null, used to prevent frame get fallback if error
    * is thrown after url construction but prior to layoutCallback.
@@ -1368,7 +1643,7 @@ export class AmpA4A extends AMP.BaseElement {
     devAssert(this.uiHandler);
     // Store original size to allow for reverting on unlayoutCallback so that
     // subsequent pageview allows for ad request.
-    this.originalSlotSize_ = this.originalSlotSize_ || this.getLayoutBox();
+    this.originalSlotSize_ = this.originalSlotSize_ || this.getLayoutSize();
     this.uiHandler.applyNoContentUI();
     this.isCollapsed_ = true;
   }
@@ -1526,6 +1801,86 @@ export class AmpA4A extends AMP.BaseElement {
     });
   }
 
+  /**
+   * @param {!./head-validation.ValidatedHeadDef} headData
+   * @param {function()} checkStillCurrent
+   * @return {!Promise} Whether the creative was successfully rendered.
+   */
+  renderFriendlyTrustless_(headData, checkStillCurrent) {
+    checkStillCurrent();
+    devAssert(this.element.ownerDocument);
+    this.maybeTriggerAnalyticsEvent_('renderFriendlyStart');
+
+    const {height, width} = this.creativeSize_;
+    const {extensions, fonts, head} = headData;
+    this.iframe = createSecureFrame(
+      this.win,
+      this.getIframeTitle(),
+      height,
+      width
+    );
+    if (!this.uiHandler.isStickyAd()) {
+      this.applyFillContent(this.iframe);
+    }
+
+    let body = '';
+    const transferComplete = new Deferred();
+    // If srcdoc is not supported, streaming is also not supported so we
+    // can go ahead and write the ad content body.
+    if (!isSrcdocSupported()) {
+      body = head.ownerDocument.body./*OK */ outerHTML;
+      transferComplete.resolve();
+    } else {
+      // Once skeleton doc has be written to srcdoc we start transferring
+      // body chunks.
+      listenOnce(this.iframe, 'load', () => {
+        const fieBody = this.iframe.contentDocument.body;
+        this.transferDomBody_(devAssert(fieBody)).then(
+          transferComplete.resolve
+        );
+      });
+    }
+
+    const secureDoc = createSecureDocSkeleton(
+      devAssert(this.adUrl_),
+      head./*OK*/ outerHTML,
+      body
+    );
+
+    const fieInstallPromise = this.installFriendlyIframeEmbed_(
+      secureDoc,
+      extensions,
+      fonts,
+      true // skipHtmlMerge
+    );
+
+    // Tell the FIE it is done after transferring.
+    Promise.all([fieInstallPromise, transferComplete.promise]).then(
+      (values) => {
+        const friendlyIframeEmbed = values[0];
+        // #installFriendlyIframeEmbed will return null if removed before install is complete.
+        friendlyIframeEmbed && friendlyIframeEmbed.renderCompleted();
+      }
+    );
+
+    const extensionIds = extensions.map((extension) => extension.extensionId);
+    return fieInstallPromise.then((friendlyIframeEmbed) => {
+      checkStillCurrent();
+      this.makeFieVisible_(
+        friendlyIframeEmbed,
+        // TODO(ccordry): subclasses are passed creativeMetadata which does
+        // not exist in unsigned case. All it is currently used for is to
+        // check if it is an AMP creative, and extension list.
+        {
+          minifiedCreative: '',
+          customStylesheets: [],
+          customElementExtensions: extensionIds,
+        },
+        checkStillCurrent
+      );
+    });
+  }
+
   /**
    * Render a validated AMP creative directly in the parent page.
    * @param {!CreativeMetaDataDef} creativeMetaData Metadata required to render
@@ -1538,21 +1893,26 @@ export class AmpA4A extends AMP.BaseElement {
     devAssert(!!this.element.ownerDocument, 'missing owner document?!');
     this.maybeTriggerAnalyticsEvent_('renderFriendlyStart');
     // Create and setup friendly iframe.
-    this.iframe = /** @type {!HTMLIFrameElement} */ (createElementWithAttributes(
-      /** @type {!Document} */ (this.element.ownerDocument),
-      'iframe',
-      dict({
-        // NOTE: It is possible for either width or height to be 'auto',
-        // a non-numeric value.
-        'height': this.creativeSize_.height,
-        'width': this.creativeSize_.width,
-        'frameborder': '0',
-        'allowfullscreen': '',
-        'allowtransparency': '',
-        'scrolling': 'no',
-      })
-    ));
-    this.applyFillContent(this.iframe);
+    this.iframe = /** @type {!HTMLIFrameElement} */ (
+      createElementWithAttributes(
+        /** @type {!Document} */ (this.element.ownerDocument),
+        'iframe',
+        dict({
+          // NOTE: It is possible for either width or height to be 'auto',
+          // a non-numeric value.
+          'height': this.creativeSize_.height,
+          'width': this.creativeSize_.width,
+          'frameborder': '0',
+          'allowfullscreen': '',
+          'allowtransparency': '',
+          'scrolling': 'no',
+          'title': this.getIframeTitle(),
+        })
+      )
+    );
+    if (!this.uiHandler.isStickyAd()) {
+      this.applyFillContent(this.iframe);
+    }
     const fontsArray = [];
     if (creativeMetaData.customStylesheets) {
       creativeMetaData.customStylesheets.forEach((s) => {
@@ -1563,51 +1923,100 @@ export class AmpA4A extends AMP.BaseElement {
       });
     }
     const checkStillCurrent = this.verifyStillCurrent();
+    const {minifiedCreative} = creativeMetaData;
+    const extensions = getExtensionsFromMetadata(creativeMetaData);
+    return this.installFriendlyIframeEmbed_(
+      minifiedCreative,
+      extensions,
+      fontsArray || [],
+      false // skipHtmlMerge
+    ).then((friendlyIframeEmbed) =>
+      this.makeFieVisible_(
+        friendlyIframeEmbed,
+        creativeMetaData,
+        checkStillCurrent
+      )
+    );
+  }
+
+  /**
+   * Convert the iframe to FIE impl and append to DOM.
+   * @param {string} html
+   * @param {!Array<{extensionId: string, extensionVersion: string}>} extensions
+   * @param {!Array<string>} fonts
+   * @param {boolean} skipHtmlMerge
+   * @return {!Promise<!../../../src/friendly-iframe-embed.FriendlyIframeEmbed>}
+   */
+  installFriendlyIframeEmbed_(html, extensions, fonts, skipHtmlMerge) {
     return installFriendlyIframeEmbed(
-      this.iframe,
+      devAssert(this.iframe),
       this.element,
       {
         host: this.element,
         // Need to guarantee that this is no longer null
-        url: /** @type {string} */ (this.adUrl_),
-        html: creativeMetaData.minifiedCreative,
-        extensionIds: creativeMetaData.customElementExtensions || [],
-        fonts: fontsArray,
+        url: devAssert(this.adUrl_),
+        html,
+        extensions,
+        fonts,
+        skipHtmlMerge,
       },
-      (embedWin, ampdoc) => {
-        const parentAmpdoc = this.getAmpDoc();
-        installUrlReplacementsForEmbed(
-          // TODO(#22733): Cleanup `parentAmpdoc` once ampdoc-fie is launched.
-          ampdoc || parentAmpdoc,
-          embedWin,
-          new A4AVariableSource(parentAmpdoc, embedWin)
-        );
-      }
-    ).then((friendlyIframeEmbed) => {
-      checkStillCurrent();
-      this.friendlyIframeEmbed_ = friendlyIframeEmbed;
-      setFriendlyIframeEmbedVisible(friendlyIframeEmbed, this.isInViewport());
-      // Ensure visibility hidden has been removed (set by boilerplate).
-      const frameDoc =
-        friendlyIframeEmbed.iframe.contentDocument ||
-        friendlyIframeEmbed.win.document;
-      setStyle(frameDoc.body, 'visibility', 'visible');
-      protectFunctionWrapper(this.onCreativeRender, this, (err) => {
-        dev().error(
-          TAG,
-          this.element.getAttribute('type'),
-          'Error executing onCreativeRender',
-          err
-        );
-      })(creativeMetaData, friendlyIframeEmbed.whenWindowLoaded());
-      friendlyIframeEmbed.whenIniLoaded().then(() => {
-        checkStillCurrent();
-        this.maybeTriggerAnalyticsEvent_('friendlyIframeIniLoad');
-      });
+      (embedWin, ampdoc) => this.preinstallCallback_(embedWin, ampdoc)
+    );
+  }
+
+  /**
+   *
+   * @param {!Window} embedWin
+   * @param {../../../src/service/ampdoc-impl.AmpDoc=} ampdoc
+   */
+  preinstallCallback_(embedWin, ampdoc) {
+    const parentAmpdoc = this.getAmpDoc();
+    installUrlReplacementsForEmbed(
+      ampdoc,
+      new A4AVariableSource(parentAmpdoc, embedWin)
+    );
+  }
+
+  /**
+   * Make FIE visible and execute any loading / rendering complete callbacks.
+   * @param {!../../../src/friendly-iframe-embed.FriendlyIframeEmbed} friendlyIframeEmbed
+   * @param {CreativeMetaDataDef} creativeMetaData
+   * @param {function()} checkStillCurrent
+   */
+  makeFieVisible_(friendlyIframeEmbed, creativeMetaData, checkStillCurrent) {
+    checkStillCurrent();
+    this.friendlyIframeEmbed_ = friendlyIframeEmbed;
+    // Ensure visibility hidden has been removed (set by boilerplate).
+    const frameBody = this.getFieBody_(friendlyIframeEmbed);
+    setStyle(frameBody, 'visibility', 'visible');
+
+    protectFunctionWrapper(this.onCreativeRender, this, (err) => {
+      dev().error(
+        TAG,
+        this.element.getAttribute('type'),
+        'Error executing onCreativeRender',
+        err
+      );
+    })(creativeMetaData, friendlyIframeEmbed.whenWindowLoaded());
 
-      // There's no need to wait for all resources to load.
-      // StartRender is enough
+    friendlyIframeEmbed.whenIniLoaded().then(() => {
+      checkStillCurrent();
+      this.maybeTriggerAnalyticsEvent_('friendlyIframeIniLoad');
     });
+
+    // There's no need to wait for all resources to load.
+    // StartRender is enough
+  }
+
+  /**
+   * @param {!../../../src/friendly-iframe-embed.FriendlyIframeEmbed} friendlyIframeEmbed
+   * @return {!Element}
+   */
+  getFieBody_(friendlyIframeEmbed) {
+    const frameDoc =
+      friendlyIframeEmbed.iframe.contentDocument ||
+      friendlyIframeEmbed.win.document;
+    return devAssert(frameDoc.body);
   }
 
   /**
@@ -1622,6 +2031,7 @@ export class AmpA4A extends AMP.BaseElement {
       dict({
         'height': this.creativeSize_.height,
         'width': this.creativeSize_.width,
+        'title': this.getIframeTitle(),
       })
     );
 
@@ -1632,14 +2042,15 @@ export class AmpA4A extends AMP.BaseElement {
     // as they block the UI thread for the arbitrary amount of time until the
     // request completes.
     mergedAttributes['allow'] = "sync-xhr 'none';";
-    this.iframe = /** @type {!HTMLIFrameElement} */ (createElementWithAttributes(
-      /** @type {!Document} */ (this.element.ownerDocument),
-      'iframe',
-      /** @type {!JsonObject} */ (Object.assign(
-        mergedAttributes,
-        SHARED_IFRAME_PROPERTIES
-      ))
-    ));
+    this.iframe = /** @type {!HTMLIFrameElement} */ (
+      createElementWithAttributes(
+        /** @type {!Document} */ (this.element.ownerDocument),
+        'iframe',
+        /** @type {!JsonObject} */ (
+          Object.assign(mergedAttributes, SHARED_IFRAME_PROPERTIES)
+        )
+      )
+    );
     if (this.sandboxHTMLCreativeFrame()) {
       applySandbox(this.iframe);
     }
@@ -1686,14 +2097,22 @@ export class AmpA4A extends AMP.BaseElement {
    */
   renderViaIframeGet_(adUrl) {
     this.maybeTriggerAnalyticsEvent_('renderCrossDomainStart');
-    return this.iframeRenderHelper_(
-      dict({
-        'src': Services.xhrFor(this.win).getCorsUrl(this.win, adUrl),
-        'name': JSON.stringify(
-          getContextMetadata(this.win, this.element, this.sentinel)
-        ),
-      })
+    const contextMetadata = getContextMetadata(
+      this.win,
+      this.element,
+      this.sentinel
     );
+
+    return this.initialIntersectionPromise_.then((intersection) => {
+      contextMetadata['_context']['initialIntersection'] =
+        intersectionEntryToJson(intersection);
+      return this.iframeRenderHelper_(
+        dict({
+          'src': Services.xhrFor(this.win).getCorsUrl(this.win, adUrl),
+          'name': JSON.stringify(contextMetadata),
+        })
+      );
+    });
   }
 
   /**
@@ -1759,17 +2178,22 @@ export class AmpA4A extends AMP.BaseElement {
         this.sentinel,
         this.getAdditionalContextMetadata(method == XORIGIN_MODE.SAFEFRAME)
       );
-      // TODO(bradfrizzell) Clean up name assigning.
-      if (method == XORIGIN_MODE.NAMEFRAME) {
-        contextMetadata['creative'] = creative;
-        name = JSON.stringify(contextMetadata);
-      } else if (method == XORIGIN_MODE.SAFEFRAME) {
-        contextMetadata = JSON.stringify(contextMetadata);
-        name =
-          `${this.safeframeVersion};${creative.length};${creative}` +
-          `${contextMetadata}`;
-      }
-      return this.iframeRenderHelper_(dict({'src': srcPath, 'name': name}));
+
+      return this.initialIntersectionPromise_.then((intersection) => {
+        contextMetadata['initialIntersection'] =
+          intersectionEntryToJson(intersection);
+        if (method == XORIGIN_MODE.NAMEFRAME) {
+          contextMetadata['creative'] = creative;
+          name = JSON.stringify(contextMetadata);
+        } else if (method == XORIGIN_MODE.SAFEFRAME) {
+          contextMetadata = JSON.stringify(contextMetadata);
+          name =
+            `${this.safeframeVersion};${creative.length};${creative}` +
+            `${contextMetadata}`;
+        }
+
+        return this.iframeRenderHelper_(dict({'src': srcPath, 'name': name}));
+      });
     });
   }
 
@@ -1841,6 +2265,9 @@ export class AmpA4A extends AMP.BaseElement {
       } else {
         metaData.customElementExtensions = [];
       }
+      if (metaDataObj['extensions']) {
+        metaData.extensions = metaDataObj['extensions'];
+      }
       if (metaDataObj['customStylesheets']) {
         // Expect array of objects with at least one key being 'href' whose
         // value is URL.
@@ -1909,6 +2336,13 @@ export class AmpA4A extends AMP.BaseElement {
     );
   }
 
+  /**
+   * @return {boolean} whether this is a sticky ad unit
+   */
+  isStickyAd() {
+    return false;
+  }
+
   /**
    * Checks if the given lifecycle event has a corresponding amp-analytics event
    * and fires the analytics trigger if so.
@@ -1923,10 +2357,12 @@ export class AmpA4A extends AMP.BaseElement {
     const analyticsEvent = devAssert(
       LIFECYCLE_STAGE_TO_ANALYTICS_TRIGGER[lifecycleStage]
     );
-    const analyticsVars = /** @type {!JsonObject} */ (Object.assign(
-      dict({'time': Math.round(this.getNow_())}),
-      this.getA4aAnalyticsVars(analyticsEvent)
-    ));
+    const analyticsVars = /** @type {!JsonObject} */ (
+      Object.assign(
+        dict({'time': Math.round(this.getNow_())}),
+        this.getA4aAnalyticsVars(analyticsEvent)
+      )
+    );
     triggerAnalyticsEvent(this.element, analyticsEvent, analyticsVars);
   }
 
@@ -1956,27 +2392,30 @@ export class AmpA4A extends AMP.BaseElement {
   /**
    * Attempts to execute Real Time Config, if the ad network has enabled it.
    * If it is not supported by the network, but the publisher has included
-   * the rtc-config attribute on the amp-ad element, warn.
+   * the rtc-config attribute on the amp-ad element, warn. Additionaly,
+   * if the publisher has included a valid `block-rtc` attribute, don't send.
    * @param {?CONSENT_POLICY_STATE} consentState
    * @param {?string} consentString
+   * @param {?Object<string, string|number|boolean|undefined>} consentMetadata
    * @return {Promise<!Array<!rtcResponseDef>>|undefined}
    */
-  tryExecuteRealTimeConfig_(consentState, consentString) {
-    if (!!AMP.RealTimeConfigManager) {
-      try {
-        return new AMP.RealTimeConfigManager(this).maybeExecuteRealTimeConfig(
-          this.getCustomRealTimeConfigMacros_(),
-          consentState,
-          consentString
-        );
-      } catch (err) {
-        user().error(TAG, 'Could not perform Real Time Config.', err);
-      }
-    } else if (this.element.getAttribute('rtc-config')) {
-      user().error(
-        TAG,
-        'RTC not supported for ad network ' +
-          `${this.element.getAttribute('type')}`
+  tryExecuteRealTimeConfig_(consentState, consentString, consentMetadata) {
+    if (this.element.getAttribute('rtc-config')) {
+      installRealTimeConfigServiceForDoc(this.getAmpDoc());
+      return this.getBlockRtc_().then((shouldBlock) =>
+        shouldBlock
+          ? undefined
+          : Services.realTimeConfigForDoc(this.getAmpDoc()).then(
+              (realTimeConfig) =>
+                realTimeConfig.maybeExecuteRealTimeConfig(
+                  this.element,
+                  this.getCustomRealTimeConfigMacros_(),
+                  consentState,
+                  consentString,
+                  consentMetadata,
+                  this.verifyStillCurrent()
+                )
+            )
       );
     }
   }
@@ -2036,6 +2475,69 @@ export class AmpA4A extends AMP.BaseElement {
   isVerifiedAmpCreative() {
     return this.isVerifiedAmpCreative_;
   }
+
+  /**
+   * Returns the amp-ad title attribute or a fallback string.
+   * @return {string} iframe title attribute
+   */
+  getIframeTitle() {
+    return this.element.getAttribute('title') || '3rd party ad content';
+  }
+
+  /**
+   * Queries the dom through the `runtime-type` meta. If the value is one of
+   * 2, 4, 10 (which corresponds to module/nomodule or its control diversion)
+   * and returns the correct experiment ID.
+   *
+   * @protected
+   * @return {?string}
+   */
+  getModuleNomoduleExpIds_() {
+    const runtimeType = this.getAmpDoc().getMetaByName('runtime-type');
+    // ModuleNomoduleControl = 10 (current default, just nomodule)
+    if (runtimeType === '10') {
+      return MODULE_NOMODULE_PARAMS_EXP.CONTROL;
+    }
+    // ES6 = 2 (module/nomodule mode)
+    if (runtimeType === '2') {
+      return MODULE_NOMODULE_PARAMS_EXP.EXPERIMENT;
+    }
+    return null;
+  }
+
+  /**
+   * Returns any enabled SSR experiments via the amp-usqp meta tag. These
+   * correspond to the proto field ids in cs/AmpTransformerParams.
+   *
+   * These experiments do not have a fully unique experiment id for each value,
+   * so we concatenate the key and value to generate a psuedo id. We assume
+   * that any experiment is either a boolean (so two branches), or an enum with
+   * 100 or less branches. So, the value is padded a leading 0 if necessary.
+   *
+   * @protected
+   * @return {!Array<string>}
+   */
+  getSsrExpIds_() {
+    const exps = [];
+    const meta = this.getAmpDoc().getMetaByName('amp-usqp');
+    if (meta) {
+      const keyValues = meta.split(',');
+      for (let i = 0; i < keyValues.length; i++) {
+        const kv = keyValues[i].split('=');
+        if (kv.length !== 2) {
+          continue;
+        }
+        // Reasonably assume that all important exps are either booleans, or
+        // enums with 100 or less branches.
+        const val = Number(kv[1]);
+        if (!isNaN(kv[0]) && val >= 0 && val < 100) {
+          const padded = padStart(kv[1], 2, '0');
+          exps.push(kv[0] + padded);
+        }
+      }
+    }
+    return exps;
+  }
 }
 
 /**
@@ -2076,3 +2578,28 @@ export function signatureVerifierFor(win) {
     (win[propertyName] = new SignatureVerifier(win, signingServerURLs))
   );
 }
+
+/**
+ * @param {!Window} win
+ * @return {boolean}
+ * @visibleForTesting
+ */
+export function isPlatformSupported(win) {
+  // Require Shadow DOM support for a4a.
+  if (
+    !isNative(win.Element.prototype.attachShadow) &&
+    isExperimentOn(win, 'disable-a4a-non-sd')
+  ) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Returns `true` if the passed function exists and is native to the browser.
+ * @param {Function|undefined} func
+ * @return {boolean}
+ */
+function isNative(func) {
+  return !!func && func.toString().indexOf('[native code]') != -1;
+}
diff --git a/extensions/amp-a4a/0.1/amp-ad-network-base.js b/extensions/amp-a4a/0.1/amp-ad-network-base.js
index e10f93d25188a..4c32d8e14f442 100644
--- a/extensions/amp-a4a/0.1/amp-ad-network-base.js
+++ b/extensions/amp-a4a/0.1/amp-ad-network-base.js
@@ -17,7 +17,7 @@
 import {FailureType, RecoveryModeType} from './amp-ad-type-defs';
 import {dev, devAssert} from '../../../src/log';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {map} from '../../../src/utils/object';
+import {map} from '../../../src/core/types/object';
 import {sendXhrRequest} from './amp-ad-utils';
 
 const TAG = 'amp-ad-network-base';
@@ -172,7 +172,12 @@ export class AmpAdNetworkBase extends AMP.BaseElement {
         response.headers.get('AMP-Ad-Response-Type') || 'default';
       devAssert(this.validators_[validatorType], 'Validator never registered!');
       return this.validators_[validatorType]
-        .validate(this.context_, unvalidatedBytes, response.headers)
+        .validate(
+          this.context_,
+          this.element,
+          unvalidatedBytes,
+          response.headers
+        )
         .catch((err) =>
           Promise.reject({type: FailureType.VALIDATOR_ERROR, msg: err})
         );
diff --git a/extensions/amp-a4a/0.1/amp-ad-template-helper.js b/extensions/amp-a4a/0.1/amp-ad-template-helper.js
index 0998f70f455fb..30f17f3a0b120 100644
--- a/extensions/amp-a4a/0.1/amp-ad-template-helper.js
+++ b/extensions/amp-a4a/0.1/amp-ad-template-helper.js
@@ -14,13 +14,17 @@
  * limitations under the License.
  */
 
-import {LruCache} from '../../../src/utils/lru-cache';
+import {LruCache} from '../../../src/core/data-structures/lru-cache';
 import {Services} from '../../../src/services';
 import {createElementWithAttributes} from '../../../src/dom';
 import {devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getMode} from '../../../src/mode';
-import {isArray} from '../../../src/types';
+import {
+  getServiceForDoc,
+  registerServiceBuilderForDoc,
+} from '../../../src/service';
+import {isArray} from '../../../src/core/types';
 import {parseUrlDeprecated} from '../../../src/url';
 import {urls} from '../../../src/config';
 
@@ -34,13 +38,15 @@ const TEMPLATE_CORS_CONFIG = {
   credentials: 'omit',
 };
 
+const SERVICE_ID = 'AmpAdTemplateHelper';
+
 export class AmpAdTemplateHelper {
   /**
-   * @param {!Window} win
+   * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
    */
-  constructor(win) {
-    /** @private {!Window} */
-    this.win_ = win;
+  constructor(ampdoc) {
+    /** @private @const */
+    this.parentAmpdoc_ = ampdoc;
 
     /** @private {LruCache} */
     this.cache_ = new LruCache(5);
@@ -53,14 +59,15 @@ export class AmpAdTemplateHelper {
    * @return {!Promise<string>}
    */
   fetch(templateUrl) {
+    const {win} = this.parentAmpdoc_;
     const proxyUrl =
-      getMode(this.win_).localDev && !isNaN(templateUrl)
-        ? `http://ads.localhost:${this.win_.location.port}` +
+      getMode(win).localDev && !isNaN(templateUrl)
+        ? `http://ads.localhost:${win.location.port}` +
           `/a4a_template/adzerk/${templateUrl}`
         : this.getTemplateProxyUrl_(templateUrl);
     let templatePromise = this.cache_.get(proxyUrl);
     if (!templatePromise) {
-      templatePromise = Services.xhrFor(this.win_)
+      templatePromise = Services.xhrFor(win)
         .fetchText(proxyUrl, TEMPLATE_CORS_CONFIG)
         .then((response) => response.text());
       this.cache_.put(proxyUrl, templatePromise);
@@ -75,7 +82,7 @@ export class AmpAdTemplateHelper {
    * @return {!Promise<!Element>} Promise which resolves after rendering completes.
    */
   render(templateValues, element) {
-    return Services.templatesFor(this.win_).findAndRenderTemplate(
+    return Services.templatesForDoc(element).findAndRenderTemplate(
       element,
       templateValues
     );
@@ -86,9 +93,9 @@ export class AmpAdTemplateHelper {
    * @param {!Array|!JsonObject} analyticsValue
    */
   insertAnalytics(element, analyticsValue) {
-    analyticsValue = /**@type {!Array}*/ (isArray(analyticsValue)
-      ? analyticsValue
-      : [analyticsValue]);
+    analyticsValue = /**@type {!Array}*/ (
+      isArray(analyticsValue) ? analyticsValue : [analyticsValue]
+    );
     for (let i = 0; i < analyticsValue.length; i++) {
       const config = analyticsValue[i];
       const analyticsEle = element.ownerDocument.createElement('amp-analytics');
@@ -132,3 +139,14 @@ export class AmpAdTemplateHelper {
           loc.pathname;
   }
 }
+
+/**
+ * @param {!Element|!../../../src/service/ampdoc-impl.AmpDoc} target
+ * @return {!AmpAdTemplateHelper}
+ */
+export function getAmpAdTemplateHelper(target) {
+  registerServiceBuilderForDoc(target, SERVICE_ID, AmpAdTemplateHelper);
+  return /** @type {!AmpAdTemplateHelper} */ (
+    getServiceForDoc(target, SERVICE_ID)
+  );
+}
diff --git a/extensions/amp-a4a/0.1/amp-ad-type-defs.js b/extensions/amp-a4a/0.1/amp-ad-type-defs.js
index 8d64b9c182ffa..65487506f5326 100644
--- a/extensions/amp-a4a/0.1/amp-ad-type-defs.js
+++ b/extensions/amp-a4a/0.1/amp-ad-type-defs.js
@@ -84,12 +84,18 @@ export let CrossDomainDataDef;
 export class Validator {
   /**
    * @param {!Object} unusedContext
+   * @param {!Element} unusedContainerElement
    * @param {!ArrayBuffer} unusedUnvalidatedBytes
    * @param {!Headers} unusedHeaders
    * @return {!Promise<!ValidatorOutput>}
    * @abstract
    */
-  validate(unusedContext, unusedUnvalidatedBytes, unusedHeaders) {}
+  validate(
+    unusedContext,
+    unusedContainerElement,
+    unusedUnvalidatedBytes,
+    unusedHeaders
+  ) {}
 }
 
 /**
diff --git a/extensions/amp-a4a/0.1/amp-ad-utils.js b/extensions/amp-a4a/0.1/amp-ad-utils.js
index 30a3275c6957c..f1d87c44ac37e 100644
--- a/extensions/amp-a4a/0.1/amp-ad-utils.js
+++ b/extensions/amp-a4a/0.1/amp-ad-utils.js
@@ -15,9 +15,12 @@
  */
 import {Services} from '../../../src/services';
 import {dev} from '../../../src/log';
-import {isArray, isObject} from '../../../src/types';
+import {isArray, isObject} from '../../../src/core/types';
+
 import {isSecureUrlDeprecated} from '../../../src/url';
-import {parseJson} from '../../../src/json';
+import {parseExtensionUrl} from '../../../src/service/extension-script';
+import {parseJson} from '../../../src/core/types/object/json';
+import {urls} from '../../../src/config';
 
 const TAG = 'amp-ad-util';
 
@@ -160,3 +163,55 @@ export function getAmpAdMetadata(creative) {
     return null;
   }
 }
+
+/**
+ * Merges any elements from customElementExtensions array into extensions array if
+ * the element is not present.
+ * @param {!Array<{custom-element: string, 'src': string}>} extensions
+ * @param {!Array<string>} customElementExtensions
+ */
+export function mergeExtensionsMetadata(extensions, customElementExtensions) {
+  for (let i = 0; i < customElementExtensions.length; i++) {
+    const extensionId = customElementExtensions[i];
+    if (!extensionsHasElement(extensions, extensionId)) {
+      extensions.push({
+        'custom-element': extensionId,
+        // The default version is 0.1. To specify a specific version,
+        // use metadata['extensions'] field instead.
+        src: `${urls.cdn}/v0/${extensionId}-0.1.js`,
+      });
+    }
+  }
+}
+
+/**
+ * Determine if parsed extensions metadata contains given element id.
+ * @param {!Array<{custom-element: string, src: string}>} extensions
+ * @param {string} id
+ * @return {boolean}
+ */
+export function extensionsHasElement(extensions, id) {
+  return extensions.some((entry) => entry['custom-element'] === id);
+}
+
+/**
+ * Parses extension urls from given metadata to retrieve name and version.
+ * @param {!./amp-ad-type-defs.CreativeMetaDataDef} creativeMetadata
+ * @return {!Array<?{extensionId: string, extensionVersion: string}>}
+ */
+export function getExtensionsFromMetadata(creativeMetadata) {
+  const parsedExtensions = [];
+  const {extensions} = creativeMetadata;
+  if (!extensions || !isArray(extensions)) {
+    return parsedExtensions;
+  }
+
+  for (let i = 0; i < extensions.length; i++) {
+    const extension = extensions[i];
+    const extensionData = parseExtensionUrl(extension.src);
+    if (extensionData) {
+      parsedExtensions.push(extensionData);
+    }
+  }
+  return parsedExtensions;
+}
diff --git a/extensions/amp-a4a/0.1/callout-vendors.js b/extensions/amp-a4a/0.1/callout-vendors.js
deleted file mode 100644
index 989acfd1ef933..0000000000000
--- a/extensions/amp-a4a/0.1/callout-vendors.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {getMode} from '../../../src/mode';
-import {jsonConfiguration} from '../../../src/json';
-
-//////////////////////////////////////////////////////////////////
-//                                                              //
-//     IMPORTANT: All keys in RTC_VENDORS must be lowercase     //
-//       otherwise the vendor endpoint will not be used.        //
-//                                                              //
-//////////////////////////////////////////////////////////////////
-
-// Note: disableKeyAppend is an option specifically for DoubleClick's
-// implementation of RTC. It prevents the vendor ID from being
-// appended onto each key of the RTC response, for each vendor.
-// This appending is done to prevent a collision case during merge
-// that would cause one RTC response to overwrite another if they
-// share key names.
-/** @typedef {{
-    url: string,
-    macros: Array<string>,
-    errorReportingUrl: (string|undefined),
-    disableKeyAppend: boolean}} */
-let RtcVendorDef;
-
-/** @const {!Object<string, RtcVendorDef>} */
-const RTC_VENDORS = jsonConfiguration({
-  ////////////////////////////////////////////////////////////////////
-  //                                                                //
-  //              !!!      IMPORTANT NOTE     !!!                   //
-  //                                                                //
-  //  If you are adding a new vendor config object to this object,  //
-  //  make sure to also update the RTC documentation in these two   //
-  //  files under "supported vendors".                              //
-  // https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/rtc-documentation.md
-  // https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/rtc-publisher-implementation-guide.md
-  ////////////////////////////////////////////////////////////////////
-
-  // Add vendors here
-  ozone: {
-    url:
-      'https://elb.the-ozone-project.com/openrtb2/amp?tag_id=TAG_ID&placement_id=PLACEMENT_ID&gdpr_consent=CONSENT_STRING&ad_unit_code=AD_UNIT_CODE&site_id=SITE_ID&publisher_id=PUBLISHER_ID&custom_data=TGT&pubcid=PUBCID&adcid=ADCID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&curl=CANONICAL_URL&timeout=TIMEOUT&purl=HREF',
-    macros: [
-      'TAG_ID',
-      'PLACEMENT_ID',
-      'SITE_ID',
-      'PUBLISHER_ID',
-      'AD_UNIT_CODE',
-      'PUBCID',
-    ],
-    errorReportingUrl:
-      'https://elb.the-ozone-project.com/amp_error?err=ERROR_TYPE&url=HREF',
-    disableKeyAppend: true,
-  },
-  medianet: {
-    url:
-      'https://amprtc.media.net/rtb/getrtc?cid=CID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&tgt=TGT&curl=CANONICAL_URL&to=TIMEOUT&purl=HREF&cste=CONSENT_STATE&cstr=CONSENT_STRING',
-    macros: ['CID'],
-    errorReportingUrl:
-      'https://qsearch-a.akamaihd.net/log?logid=kfk&evtid=projectevents&project=amprtc_error&error=ERROR_TYPE&rd=HREF',
-    disableKeyAppend: true,
-  },
-  prebidappnexus: {
-    url:
-      'https://prebid.adnxs.com/pbs/v1/openrtb2/amp?tag_id=PLACEMENT_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adcid=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING&account=ACCOUNT_ID',
-    macros: ['PLACEMENT_ID', 'CONSENT_STRING', 'ACCOUNT_ID'],
-    disableKeyAppend: true,
-  },
-  prebidrubicon: {
-    url:
-      'https://prebid-server.rubiconproject.com/openrtb2/amp?tag_id=REQUEST_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adc=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING&account=ACCOUNT_ID',
-    macros: ['REQUEST_ID', 'CONSENT_STRING', 'ACCOUNT_ID'],
-    disableKeyAppend: true,
-  },
-  indexexchange: {
-    url:
-      'https://amp.casalemedia.com/amprtc?v=1&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&s=SITE_ID&p=CANONICAL_URL&consent_state=CONSENT_STATE&consent_string=CONSENT_STRING',
-    macros: ['SITE_ID', 'CONSENT_STATE', 'CONSENT_STRING'],
-    disableKeyAppend: true,
-  },
-  lotame: {
-    url: 'https://ad.crwdcntrl.net/5/pe=y/c=CLIENT_ID/an=AD_NETWORK',
-    macros: ['CLIENT_ID', 'AD_NETWORK'],
-    disableKeyAppend: true,
-  },
-  yieldbot: {
-    url:
-      'https://i.yldbt.com/m/YB_PSN/v1/amp/init?curl=CANONICAL_URL&sn=YB_SLOT&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&aup=ATTR(data-slot)&pvi=PAGEVIEWID&tgt=TGT&adcid=ADCID&href=HREF',
-    macros: ['YB_PSN', 'YB_SLOT'],
-    disableKeyAppend: true,
-  },
-  salesforcedmp: {
-    url:
-      'https://cdn.krxd.net/userdata/v2/amp/ORGANIZATION_ID?segments_key=SEGMENTS_KEY&kuid_key=USER_KEY',
-    macros: ['ORGANIZATION_ID', 'SEGMENTS_KEY', 'USER_KEY'],
-    disableKeyAppend: true,
-  },
-  purch: {
-    url:
-      'https://ads.servebom.com/tmntag.js?v=1.2&fmt=amp&o={%22p%22%3APLACEMENT_ID}&div_id=DIV_ID',
-    macros: ['PLACEMENT_ID', 'DIV_ID'],
-    disableKeyAppend: true,
-  },
-  glxm: {
-    url:
-      'https://pbserver.galaxiemedia.fr/openrtb2/amp?tag_id=REQUEST_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adc=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING&account=ACCOUNT_ID',
-    macros: ['REQUEST_ID', 'CONSENT_STRING', 'ACCOUNT_ID'],
-    disableKeyAppend: true,
-  },
-  aps: {
-    url:
-      'https://aax.amazon-adsystem.com/e/dtb/bid?src=PUB_ID&pubid=PUB_UUID&amp=1&u=CANONICAL_URL&slots=%5B%7B%22sd%22%3A%22ATTR(data-slot)%22%2C%22s%22%3A%5B%22ATTR(width)xATTR(height)%22%5D%2C%22ms%22%3A%22ATTR(data-multi-size)%22%7D%5D&pj=PARAMS&gdprc=CONSENT_STRING',
-    macros: ['PUB_ID', 'PARAMS', 'PUB_UUID', 'CONSENT_STRING'],
-    disableKeyAppend: true,
-  },
-  openwrap: {
-    // PubMatic OpenWrap
-    url:
-      'https://ow.pubmatic.com/amp?v=1&w=ATTR(width)&h=ATTR(height)&ms=ATTR(data-multi-size)&auId=ATTR(data-slot)&purl=HREF&pubId=PUB_ID&profId=PROFILE_ID',
-    macros: ['PUB_ID', 'PROFILE_ID'],
-    errorReportingUrl: 'https://ow.pubmatic.com/amp_error?e=ERROR_TYPE&h=HREF',
-    disableKeyAppend: true,
-  },
-  criteo: {
-    url:
-      'https://bidder.criteo.com/amp/rtc?zid=ZONE_ID&nid=NETWORK_ID&psubid=PUBLISHER_SUB_ID&lir=LINE_ITEM_RANGES&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&timeout=TIMEOUT&curl=CANONICAL_URL&href=HREF&cst=CONSENT_STATE&cst_str=CONSENT_STRING',
-    macros: [
-      'ZONE_ID',
-      'NETWORK_ID',
-      'PUBLISHER_SUB_ID',
-      'LINE_ITEM_RANGES',
-      'CONSENT_STATE',
-      'CONSENT_STRING',
-    ],
-    disableKeyAppend: true,
-  },
-  navegg: {
-    url: 'https://usr.navdmp.com/usr?acc=NVG_ACC&wst=0&v=10',
-    macros: ['NVG_ACC'],
-    disableKeyAppend: true,
-  },
-  sonobi: {
-    url:
-      'https://apex.go.sonobi.com/trinity.json?key_maker=%7B%22_DIVIDER_ATTR(data-slot)%7C1%22%3A%22PLACEMENT_ID_DIVIDER_ATTR(width)xATTR(height)%2CATTR(data-multi-size)%22%7D&ref=CANONICAL_URL&lib_name=amp&lib_v=0.1&pv=PAGEVIEWID&amp=1',
-    disableKeyAppend: true,
-    macros: ['PLACEMENT_ID', '_DIVIDER_'],
-  },
-  kargo: {
-    url:
-      'https://krk.kargo.com/api/v1/amprtc?slot=SLOT_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&pslot=ATTR(data-slot)&pvid=PAGEVIEWID&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&acid=ADCID&purl=HREF',
-    macros: ['SLOT_ID'],
-    errorReportingUrl:
-      'https://krk.kargo.com/api/v1/event/amprtc-error?error_type=ERROR_TYPE&url=HREF',
-    disableKeyAppend: true,
-  },
-  yieldlab: {
-    url: 'https://ad.yieldlab.net/yp/ADSLOT_ID?content=amp&t=amp%3D1',
-    macros: ['ADSLOT_ID'],
-    disableKeyAppend: true,
-  },
-  automatad: {
-    url: 'https://pbs01.automatad.com/openrtb2/amp?tag_id=TAG_ID',
-    macros: ['TAG_ID'],
-    disableKeyAppend: true,
-  },
-  prebidflux: {
-    url: 'https://prebid-server.flux-adserver.com/openrtb2/amp?tag_id=TAG_ID',
-    macros: ['TAG_ID'],
-    disableKeyAppend: true,
-  },
-  browsi: {
-    url:
-      'https://amp.browsiprod.com/predict?pvid=PAGEVIEWID_64&ot=ELEMENT_POS&ul=SCROLL_TOP&pl=PAGE_HEIGHT&bks=BKG_STATE&pk=PUB_KEY&sk=SITE_KEY&h=ATTR(height)&adix=ATTR(data-amp-slot-index)&ref=REFERRER&url=HREF',
-    macros: ['PUB_KEY', 'SITE_KEY'],
-    errorReportingUrl:
-      'https://events.browsiprod.com/events/amp?e=ERROR_TYPE&h=HREF&et=predict_error',
-    disableKeyAppend: true,
-  },
-});
-
-// DO NOT MODIFY: Setup for tests
-if (getMode().localDev || getMode().test) {
-  RTC_VENDORS['fakevendor'] = /** @type {RtcVendorDef} */ ({
-    url:
-      'https://localhost:8000/examples/rtcE1.json?slot_id=SLOT_ID&page_id=PAGE_ID&foo_id=FOO_ID',
-    macros: ['SLOT_ID', 'PAGE_ID', 'FOO_ID'],
-  });
-  RTC_VENDORS['fakevendor2'] = /** @type {RtcVendorDef} */ ({
-    url:
-      'https://localhost:8000/examples/rtcE1.json?slot_id=SLOT_ID&page_id=PAGE_ID&foo_id=FOO_ID',
-    errorReportingUrl: 'https://localhost:8000/examples/ERROR_TYPE',
-    disableKeyAppend: true,
-  });
-}
-
-export {RTC_VENDORS};
diff --git a/extensions/amp-a4a/0.1/cryptographic-validator.js b/extensions/amp-a4a/0.1/cryptographic-validator.js
index ec5ce40e127b9..711df5169bd52 100644
--- a/extensions/amp-a4a/0.1/cryptographic-validator.js
+++ b/extensions/amp-a4a/0.1/cryptographic-validator.js
@@ -19,7 +19,7 @@ import {SignatureVerifier, VerificationStatus} from './signature-verifier';
 import {getAmpAdMetadata} from './amp-ad-utils';
 import {signingServerURLs} from '../../../ads/_a4a-config';
 import {user} from '../../../src/log';
-import {utf8Decode} from '../../../src/utils/bytes';
+import {utf8Decode} from '../../../src/core/types/string/bytes';
 
 export const SIGNATURE_VERIFIER_PROPERTY_NAME =
   'AMP_FAST_FETCH_SIGNATURE_VERIFIER_';
@@ -62,7 +62,7 @@ export class CryptographicValidator extends Validator {
   }
 
   /** @override */
-  validate(context, unvalidatedBytes, headers) {
+  validate(context, containerElement, unvalidatedBytes, headers) {
     return this.getSignatureVerifier_(context.win)
       .verify(
         unvalidatedBytes,
diff --git a/extensions/amp-a4a/0.1/friendly-frame-renderer.js b/extensions/amp-a4a/0.1/friendly-frame-renderer.js
index c6fc637b93c92..6fca1ab201a13 100644
--- a/extensions/amp-a4a/0.1/friendly-frame-renderer.js
+++ b/extensions/amp-a4a/0.1/friendly-frame-renderer.js
@@ -41,7 +41,7 @@ export class FriendlyFrameRenderer extends Renderer {
   render(context, element, creativeData) {
     creativeData = /** @type {CreativeData} */ (creativeData);
 
-    const {size, adUrl} = context;
+    const {adUrl, size} = context;
     const {creativeMetadata} = creativeData;
 
     devAssert(size, 'missing creative size');
diff --git a/extensions/amp-a4a/0.1/friendly-frame-util.js b/extensions/amp-a4a/0.1/friendly-frame-util.js
index e56ab750a7a37..3b4a2f1e0cf50 100644
--- a/extensions/amp-a4a/0.1/friendly-frame-util.js
+++ b/extensions/amp-a4a/0.1/friendly-frame-util.js
@@ -16,16 +16,14 @@
 
 import {A4AVariableSource} from '../../amp-a4a/0.1/a4a-variable-source';
 import {createElementWithAttributes} from '../../../src/dom';
-import {dict} from '../../../src/utils/object';
-import {
-  installFriendlyIframeEmbed,
-  setFriendlyIframeEmbedVisible,
-} from '../../../src/friendly-iframe-embed';
+import {dict} from '../../../src/core/types/object';
+import {getExtensionsFromMetadata} from './amp-ad-utils';
+import {installFriendlyIframeEmbed} from '../../../src/friendly-iframe-embed';
 import {installUrlReplacementsForEmbed} from '../../../src/service/url-replacements-impl';
 import {setStyle} from '../../../src/style';
 
 /**
- * Renders a creative into a "NameFrame" iframe.
+ * Renders a creative into a friendly iframe.
  *
  * @param {string} adUrl The ad request URL.
  * @param {!./amp-ad-type-defs.LayoutInfoDef} size The size and layout of the
@@ -43,20 +41,22 @@ export function renderCreativeIntoFriendlyFrame(
   creativeMetadata
 ) {
   // Create and setup friendly iframe.
-  const iframe = /** @type {!HTMLIFrameElement} */ (createElementWithAttributes(
-    /** @type {!Document} */ (element.ownerDocument),
-    'iframe',
-    dict({
-      // NOTE: It is possible for either width or height to be 'auto',
-      // a non-numeric value.
-      'height': size.height,
-      'width': size.width,
-      'frameborder': '0',
-      'allowfullscreen': '',
-      'allowtransparency': '',
-      'scrolling': 'no',
-    })
-  ));
+  const iframe = /** @type {!HTMLIFrameElement} */ (
+    createElementWithAttributes(
+      /** @type {!Document} */ (element.ownerDocument),
+      'iframe',
+      dict({
+        // NOTE: It is possible for either width or height to be 'auto',
+        // a non-numeric value.
+        'height': size.height,
+        'width': size.width,
+        'frameborder': '0',
+        'allowfullscreen': '',
+        'allowtransparency': '',
+        'scrolling': 'no',
+      })
+    )
+  );
   iframe.classList.add('i-amphtml-fill-content');
 
   const fontsArray = [];
@@ -69,6 +69,7 @@ export function renderCreativeIntoFriendlyFrame(
     });
   }
 
+  const extensions = getExtensionsFromMetadata(creativeMetadata);
   return installFriendlyIframeEmbed(
     iframe,
     element,
@@ -76,20 +77,17 @@ export function renderCreativeIntoFriendlyFrame(
       host: element,
       url: /** @type {string} */ (adUrl),
       html: creativeMetadata.minifiedCreative,
-      extensionIds: creativeMetadata.customElementExtensions || [],
+      extensions,
       fonts: fontsArray,
     },
     (embedWin, ampdoc) => {
       const parentAmpdoc = element.getAmpDoc();
       installUrlReplacementsForEmbed(
-        // TODO(#22733): Cleanup `parentAmpdoc` once ampdoc-fie is launched.
-        ampdoc || parentAmpdoc,
-        embedWin,
+        ampdoc,
         new A4AVariableSource(parentAmpdoc, embedWin)
       );
     }
   ).then((friendlyIframeEmbed) => {
-    setFriendlyIframeEmbedVisible(friendlyIframeEmbed, element.isInViewport());
     // Ensure visibility hidden has been removed (set by boilerplate).
     const frameDoc =
       friendlyIframeEmbed.iframe.contentDocument ||
diff --git a/extensions/amp-a4a/0.1/head-validation.js b/extensions/amp-a4a/0.1/head-validation.js
new file mode 100644
index 0000000000000..d80c55a198529
--- /dev/null
+++ b/extensions/amp-a4a/0.1/head-validation.js
@@ -0,0 +1,232 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Services} from '../../../src/services';
+import {getMode} from '../../../src/mode';
+import {includes} from '../../../src/core/types/string';
+import {map} from '../../../src/core/types/object';
+import {parseExtensionUrl} from '../../../src/service/extension-script';
+import {preloadFriendlyIframeEmbedExtensions} from '../../../src/friendly-iframe-embed';
+import {removeElement, rootNodeFor} from '../../../src/dom';
+import {urls} from '../../../src/config';
+
+/**
+ * @typedef {{
+ *    extensions: !Array<{extensionId: (string|undefined), extensionVersion: (string|undefined)}>,
+ *    head: !Element
+ * }}
+ */
+export let ValidatedHeadDef;
+
+// From validator/validator-main.protoascii
+const ALLOWED_FONT_REGEX = new RegExp(
+  'https://cdn\\.materialdesignicons\\.com/' +
+    '([0-9]+\\.?)+/css/materialdesignicons\\.min\\.css|' +
+    'https://cloud\\.typography\\.com/' +
+    '[0-9]*/[0-9]*/css/fonts\\.css|' +
+    'https://fast\\.fonts\\.net/.*|' +
+    'https://fonts\\.googleapis\\.com/css2?\\?.*|' +
+    'https://fonts\\.googleapis\\.com/icon\\?.*|' +
+    'https://fonts\\.googleapis\\.com/earlyaccess/.*\\.css|' +
+    'https://maxcdn\\.bootstrapcdn\\.com/font-awesome/' +
+    '([0-9]+\\.?)+/css/font-awesome\\.min\\.css(\\?.*)?|' +
+    'https://(use|pro)\\.fontawesome\\.com/releases/v([0-9]+\\.?)+' +
+    '/css/[0-9a-zA-Z-]+\\.css|' +
+    'https://(use|pro)\\.fontawesome\\.com/[0-9a-zA-Z-]+\\.css|' +
+    'https://use\\.typekit\\.net/[\\w\\p{L}\\p{N}_]+\\.css'
+);
+
+// If editing please also change:
+// extensions/amp-a4a/amp-a4a-format.md#allowed-amp-extensions-and-builtins
+const EXTENSION_ALLOWLIST = map({
+  'amp-accordion': true,
+  'amp-ad-exit': true,
+  'amp-analytics': true,
+  'amp-anim': true,
+  'amp-animation': true,
+  'amp-audio': true,
+  'amp-bind': true,
+  'amp-carousel': true,
+  'amp-fit-text': true,
+  'amp-font': true,
+  'amp-form': true,
+  'amp-gwd-animation': true,
+  'amp-img': true,
+  'amp-layout': true,
+  'amp-lightbox': true,
+  'amp-mraid': true,
+  'amp-mustache': true,
+  'amp-pixel': true,
+  'amp-position-observer': true,
+  'amp-selector': true,
+  'amp-social-share': true,
+  'amp-video': true,
+});
+
+/**
+ * Escape any regex chars from given string.
+ * https://developer.cdn.mozilla.net/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
+ * @param {string} string
+ * @return {string}
+ */
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
+
+const EXTENSION_URL_PREFIX = new RegExp(
+  '^' + escapeRegExp(urls.cdn) + '/(rtv/\\d+/)?v0/'
+);
+
+/**
+ * Sanitizes AMPHTML Ad head element and extracts extensions to be installed.
+ * @param {!Window} win
+ * @param {!Element} adElement
+ * @param {?Element} head
+ * @return {?ValidatedHeadDef}
+ */
+export function processHead(win, adElement, head) {
+  if (!head || !head.firstChild) {
+    return null;
+  }
+
+  const root = rootNodeFor(head);
+  const htmlTag = root.documentElement;
+  if (
+    !htmlTag ||
+    (!htmlTag.hasAttribute('amp4ads') &&
+      !htmlTag.hasAttribute('⚡️4ads') &&
+      !htmlTag.hasAttribute('⚡4ads')) // Unicode weirdness.
+  ) {
+    return null;
+  }
+
+  const urlService = Services.urlForDoc(adElement);
+  /** @type {!Array<{extensionId: string, extensionVersion: string}>} */
+  const extensions = [];
+  const fonts = [];
+  const images = [];
+
+  let element = head.firstElementChild;
+  while (element) {
+    // Store next element here as the following code will remove
+    // certain elements from the detached DOM.
+    const nextElement = element.nextElementSibling;
+    switch (element.tagName.toUpperCase()) {
+      case 'SCRIPT':
+        handleScript(extensions, element);
+        break;
+      case 'STYLE':
+        handleStyle(element);
+        break;
+      case 'LINK':
+        handleLink(fonts, images, element);
+        break;
+      // Allow these without validation.
+      case 'META':
+      case 'TITLE':
+        break;
+      default:
+        removeElement(element);
+        break;
+    }
+
+    element = nextElement;
+  }
+
+  // Load any extensions; do not wait on their promises as this
+  // is just to prefetch.
+  preloadFriendlyIframeEmbedExtensions(win, extensions);
+
+  // Preload any fonts.
+  fonts.forEach((fontUrl) =>
+    Services.preconnectFor(win).preload(adElement.getAmpDoc(), fontUrl)
+  );
+
+  // Preload any AMP images.
+  images.forEach(
+    (imageUrl) =>
+      urlService.isSecure(imageUrl) &&
+      Services.preconnectFor(win).preload(adElement.getAmpDoc(), imageUrl)
+  );
+
+  return {
+    extensions,
+    head,
+  };
+}
+
+/**
+ * Allows json scripts and allowlisted amp elements while removing others.
+ * @param {!Array<{extensionId: string, extensionVersion: string}>} extensions
+ * @param {!Element} script
+ */
+function handleScript(extensions, script) {
+  if (script.type === 'application/json') {
+    return;
+  }
+
+  const {src} = script;
+  const isTesting = getMode().test || getMode().localDev;
+  if (
+    EXTENSION_URL_PREFIX.test(src) ||
+    // Integration tests point to local files.
+    (isTesting && includes(src, '/dist/'))
+  ) {
+    const extensionInfo = parseExtensionUrl(src);
+    if (extensionInfo && EXTENSION_ALLOWLIST[extensionInfo.extensionId]) {
+      extensions.push(extensionInfo);
+    }
+  }
+
+  removeElement(script);
+}
+
+/**
+ * Collect links that are from allowed font providers or used for image
+ * preloading. Remove other <link> elements.
+ * @param {!Array<string>} fonts
+ * @param {!Array<string>} images
+ * @param {!Element} link
+ */
+function handleLink(fonts, images, link) {
+  const {as, href, rel} = link;
+  if (rel === 'preload' && as === 'image') {
+    images.push(href);
+    return;
+  }
+
+  if (rel === 'stylesheet' && ALLOWED_FONT_REGEX.test(href)) {
+    fonts.push(href);
+    return;
+  }
+
+  removeElement(link);
+}
+
+/**
+ * Remove any non `amp-custom` or `amp-keyframe` styles.
+ * @param {!Element} style
+ */
+function handleStyle(style) {
+  if (
+    style.hasAttribute('amp-custom') ||
+    style.hasAttribute('amp-keyframes') ||
+    style.hasAttribute('amp4ads-boilerplate')
+  ) {
+    return;
+  }
+  removeElement(style);
+}
diff --git a/extensions/amp-a4a/0.1/name-frame-renderer.js b/extensions/amp-a4a/0.1/name-frame-renderer.js
index 9dd3c3f59ceba..18ae4aca71ce6 100644
--- a/extensions/amp-a4a/0.1/name-frame-renderer.js
+++ b/extensions/amp-a4a/0.1/name-frame-renderer.js
@@ -14,12 +14,18 @@
  * limitations under the License.
  */
 
+import {ADS_INITIAL_INTERSECTION_EXP} from '../../../src/experiments/ads-initial-intersection-exp';
 import {Renderer} from './amp-ad-type-defs';
 import {createElementWithAttributes} from '../../../src/dom';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getContextMetadata} from '../../../src/iframe-attributes';
 import {getDefaultBootstrapBaseUrl} from '../../../src/3p-frame';
-import {utf8Decode} from '../../../src/utils/bytes';
+import {getExperimentBranch} from '../../../src/experiments';
+import {
+  intersectionEntryToJson,
+  measureIntersection,
+} from '../../../src/utils/intersection';
+import {utf8Decode} from '../../../src/core/types/string/bytes';
 
 /**
  * Render a non-AMP creative into a NameFrame.
@@ -27,7 +33,9 @@ import {utf8Decode} from '../../../src/utils/bytes';
 export class NameFrameRenderer extends Renderer {
   /** @override */
   render(context, element, crossDomainData) {
-    crossDomainData = /** @type {!./amp-ad-type-defs.CrossDomainDataDef} */ (crossDomainData);
+    crossDomainData = /** @type {!./amp-ad-type-defs.CrossDomainDataDef} */ (
+      crossDomainData
+    );
 
     if (!crossDomainData.creative && !crossDomainData.rawCreativeBytes) {
       // No creative, nothing to do.
@@ -50,28 +58,40 @@ export class NameFrameRenderer extends Renderer {
       crossDomainData.additionalContextMetadata
     );
     contextMetadata['creative'] = creative;
-    const attributes = dict({
-      'src': srcPath,
-      'name': JSON.stringify(contextMetadata),
-      'height': context.size.height,
-      'width': context.size.width,
-      'frameborder': '0',
-      'allowfullscreen': '',
-      'allowtransparency': '',
-      'scrolling': 'no',
-      'marginwidth': '0',
-      'marginheight': '0',
+
+    const asyncIntersection =
+      getExperimentBranch(
+        element.ownerDocument.defaultView,
+        ADS_INITIAL_INTERSECTION_EXP.id
+      ) === ADS_INITIAL_INTERSECTION_EXP.experiment;
+    const intersectionPromise = asyncIntersection
+      ? measureIntersection(element)
+      : Promise.resolve(element.getIntersectionChangeEntry());
+    return intersectionPromise.then((intersection) => {
+      contextMetadata['_context']['initialIntersection'] =
+        intersectionEntryToJson(intersection);
+      const attributes = dict({
+        'src': srcPath,
+        'name': JSON.stringify(contextMetadata),
+        'height': context.size.height,
+        'width': context.size.width,
+        'frameborder': '0',
+        'allowfullscreen': '',
+        'allowtransparency': '',
+        'scrolling': 'no',
+        'marginwidth': '0',
+        'marginheight': '0',
+      });
+      if (crossDomainData.sentinel) {
+        attributes['data-amp-3p-sentinel'] = crossDomainData.sentinel;
+      }
+      const iframe = createElementWithAttributes(
+        /** @type {!Document} */ (element.ownerDocument),
+        'iframe',
+        /** @type {!JsonObject} */ (attributes)
+      );
+      // TODO(glevitzky): Ensure that applyFillContent or equivalent is called.
+      element.appendChild(iframe);
     });
-    if (crossDomainData.sentinel) {
-      attributes['data-amp-3p-sentinel'] = crossDomainData.sentinel;
-    }
-    const iframe = createElementWithAttributes(
-      /** @type {!Document} */ (element.ownerDocument),
-      'iframe',
-      /** @type {!JsonObject} */ (attributes)
-    );
-    // TODO(glevitzky): Ensure that applyFillContent or equivalent is called.
-    element.appendChild(iframe);
-    return Promise.resolve();
   }
 }
diff --git a/extensions/amp-a4a/0.1/real-time-config-manager.js b/extensions/amp-a4a/0.1/real-time-config-manager.js
deleted file mode 100644
index d50839e55ef5e..0000000000000
--- a/extensions/amp-a4a/0.1/real-time-config-manager.js
+++ /dev/null
@@ -1,611 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {CONSENT_POLICY_STATE} from '../../../src/consent-state';
-import {RTC_VENDORS} from './callout-vendors';
-import {Services} from '../../../src/services';
-import {dev, user, userAssert} from '../../../src/log';
-import {getMode} from '../../../src/mode';
-import {isArray, isObject} from '../../../src/types';
-import {isCancellation} from '../../../src/error';
-import {tryParseJson} from '../../../src/json';
-
-/** @type {string} */
-const TAG = 'real-time-config';
-
-/** @type {number} */
-const MAX_RTC_CALLOUTS = 5;
-
-/** @type {number} */
-const MAX_URL_LENGTH = 16384;
-
-/** @type {boolean} */
-const ERROR_REPORTING_ENABLED =
-  getMode(window).localDev || getMode(window).test || Math.random() < 0.01;
-
-/** @typedef {{
-    urls: (undefined|Array<string>|
-      Array<{url:string, errorReportingUrl:string,
-        sendRegardlessOfConsentState:(undefined|boolean|Array<string>)}>),
-    vendors: (undefined|Object),
-    timeoutMillis: number,
-    errorReportingUrl: (undefined|string),
-    sendRegardlessOfConsentState: (undefined|boolean|Array<string>)
-}} */
-let RtcConfigDef;
-
-/**
- * Enum starts at 4 because 1-3 reserved as:
- *  1 = custom remote.html in use.
- *  2 = RTC succeeded.
- *  3 = deprecated generic RTC failures.
- * @enum {string}
- */
-export const RTC_ERROR_ENUM = {
-  // Occurs when response is unparseable as JSON
-  MALFORMED_JSON_RESPONSE: '4',
-  // Occurs when a publisher has specified the same url
-  // or vendor url (after macros are substituted) to call out to more than once.
-  DUPLICATE_URL: '5',
-  // Occurs when a URL fails isSecureUrl check.
-  INSECURE_URL: '6',
-  // Occurs when 5 valid callout urls have already been built, and additional
-  // urls are still specified.
-  MAX_CALLOUTS_EXCEEDED: '7',
-  // Occurs due to XHR failure.
-  NETWORK_FAILURE: '8',
-  // Occurs when a specified vendor does not exist in RTC_VENDORS.
-  UNKNOWN_VENDOR: '9',
-  // Occurs when request took longer than timeout
-  TIMEOUT: '10',
-  // Occurs when URL expansion time exceeded allowed timeout, request never
-  // sent.
-  MACRO_EXPAND_TIMEOUT: '11',
-};
-
-export class RealTimeConfigManager {
-  /**
-   * @param {!./amp-a4a.AmpA4A} a4aElement
-   */
-  constructor(a4aElement) {
-    /** @private {!./amp-a4a.AmpA4A} */
-    this.a4aElement_ = a4aElement;
-
-    /** @private {!Window} */
-    this.win_ = this.a4aElement_.win;
-
-    /** @private {!Object<string, boolean>} */
-    this.seenUrls_ = {};
-
-    /** @private {?number} */
-    this.rtcStartTime_ = null;
-
-    /** @private {!Array<!Promise<!rtcResponseDef>>} */
-    this.promiseArray_ = [];
-
-    /** @private {?RtcConfigDef} */
-    this.rtcConfig_ = null;
-
-    /** @protected {!../../../src/service/ampdoc-impl.AmpDoc} */
-    this.ampDoc_ = this.a4aElement_.getAmpDoc();
-
-    /** @private {?CONSENT_POLICY_STATE} */
-    this.consentState_ = null;
-
-    /** @private {?string} */
-    this.consentString_ = null;
-  }
-
-  /**
-   * @param {string} error
-   * @param {string} callout
-   * @param {string} errorReportingUrl
-   * @param {number=} opt_rtcTime
-   * @return {!Promise<!rtcResponseDef>}
-   * @private
-   */
-  buildErrorResponse_(error, callout, errorReportingUrl, opt_rtcTime) {
-    dev().warn(TAG, `RTC callout to ${callout} caused ${error}`);
-    if (errorReportingUrl) {
-      this.sendErrorMessage(error, errorReportingUrl);
-    }
-    return Promise.resolve(
-      /**@type {rtcResponseDef} */ ({error, callout, rtcTime: opt_rtcTime || 0})
-    );
-  }
-
-  /**
-   * @param {string} errorType Uses the RTC_ERROR_ENUM above.
-   * @param {string} errorReportingUrl
-   */
-  sendErrorMessage(errorType, errorReportingUrl) {
-    if (!ERROR_REPORTING_ENABLED) {
-      return;
-    }
-    const allowlist = {ERROR_TYPE: true, HREF: true};
-    const macros = {
-      ERROR_TYPE: errorType,
-      HREF: this.win_.location.href,
-    };
-    const service = Services.urlReplacementsForDoc(this.a4aElement_.element);
-    const url = service.expandUrlSync(errorReportingUrl, macros, allowlist);
-    new this.win_.Image().src = url;
-  }
-
-  /**
-   * Converts a URL into its corresponding shortened callout string.
-   * We also truncate to a maximum length of 50 characters.
-   * For instance, if we are passed
-   * "https://example.test/example.php?foo=a&bar=b, then we return
-   * example.test/example.php
-   * @param {string} url
-   * @return {string}
-   */
-  getCalloutParam_(url) {
-    const urlService = Services.urlForDoc(this.a4aElement_.element);
-    const parsedUrl = urlService.parse(url);
-    return (parsedUrl.hostname + parsedUrl.pathname).substr(0, 50);
-  }
-
-  /**
-   * For a given A4A Element, sends out Real Time Config requests to
-   * any urls or vendors specified by the publisher.
-   * @param {!Object<string, !../../../src/service/variable-source.AsyncResolverDef>} customMacros The ad-network specified macro
-   *   substitutions available to use.
-   * @param {?CONSENT_POLICY_STATE} consentState
-   * @param {?string} consentString
-   * @return {Promise<!Array<!rtcResponseDef>>|undefined}
-   * @visibleForTesting
-   */
-  maybeExecuteRealTimeConfig(customMacros, consentState, consentString) {
-    if (!this.validateRtcConfig_(this.a4aElement_.element)) {
-      return;
-    }
-    this.consentState_ = consentState;
-    this.consentString_ = consentString;
-    this.modifyRtcConfigForConsentStateSettings();
-    customMacros = this.assignMacros(customMacros);
-    this.rtcStartTime_ = Date.now();
-    this.handleRtcForCustomUrls(customMacros);
-    this.handleRtcForVendorUrls(customMacros);
-    return Promise.all(this.promiseArray_);
-  }
-
-  /**
-   * Returns whether a given callout object is valid to send an RTC request
-   * to, for the given consentState.
-   * @param {Object|string} calloutConfig
-   * @param {boolean=} optIsGloballyValid
-   * @return {boolean}
-   * @visibleForTesting
-   */
-  isValidCalloutForConsentState(calloutConfig, optIsGloballyValid) {
-    const {sendRegardlessOfConsentState} = calloutConfig;
-    if (!isObject(calloutConfig) || !sendRegardlessOfConsentState) {
-      return !!optIsGloballyValid;
-    }
-
-    if (typeof sendRegardlessOfConsentState == 'boolean') {
-      return sendRegardlessOfConsentState;
-    }
-
-    if (isArray(sendRegardlessOfConsentState)) {
-      for (let i = 0; i < sendRegardlessOfConsentState.length; i++) {
-        if (
-          this.consentState_ ==
-          CONSENT_POLICY_STATE[sendRegardlessOfConsentState[i]]
-        ) {
-          return true;
-        } else if (!CONSENT_POLICY_STATE[sendRegardlessOfConsentState[i]]) {
-          dev().warn(
-            TAG,
-            'Invalid RTC consent state given: ' +
-              `${sendRegardlessOfConsentState[i]}`
-          );
-        }
-      }
-      return false;
-    }
-    user().warn(
-      TAG,
-      'Invalid value for sendRegardlessOfConsentState:' +
-        `${sendRegardlessOfConsentState}`
-    );
-    return !!optIsGloballyValid;
-  }
-
-  /**
-   * Goes through the RTC config, and for any URL that we should not callout
-   * as per the current consent state, deletes it from the RTC config.
-   * For example, if the RTC config looked like:
-   *    {vendors: {vendorA: {'sendRegardlessOfConsentState': true}
-   *               vendorB: {'macros': {'SLOT_ID': 1}}},
-   *     urls: ['https://www.rtc.example/example',
-   *            {url: 'https://www.rtcSite2.example/example',
-   *             sendRegardlessOfConsentState: ['UNKNOWN']}]
-   *    }
-   * and the consentState is CONSENT_POLICY_STATE.UNKNOWN,
-   * then this method call would clear the callouts to vendorB, and to the first
-   * custom URL.
-   */
-  modifyRtcConfigForConsentStateSettings() {
-    if (
-      this.consentState_ == undefined ||
-      this.consentState_ == CONSENT_POLICY_STATE.SUFFICIENT ||
-      this.consentState_ == CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED
-    ) {
-      return;
-    }
-
-    const isGloballyValid = this.isValidCalloutForConsentState(this.rtcConfig_);
-    this.rtcConfig_.urls = (this.rtcConfig_.urls || []).filter((url) =>
-      this.isValidCalloutForConsentState(url, isGloballyValid)
-    );
-
-    Object.keys(this.rtcConfig_.vendors || {}).forEach((vendor) => {
-      if (
-        !this.isValidCalloutForConsentState(
-          this.rtcConfig_.vendors[vendor],
-          isGloballyValid
-        )
-      ) {
-        delete this.rtcConfig_.vendors[vendor];
-      }
-    });
-  }
-
-  /**
-   * Assigns constant macros that should exist for all RTC to object of custom
-   * per-network macros.
-   * @param {!Object<string, !../../../src/service/variable-source.AsyncResolverDef>} macros
-   * @return {!Object<string, !../../../src/service/variable-source.AsyncResolverDef>}
-   */
-  assignMacros(macros) {
-    macros['TIMEOUT'] = () => this.rtcConfig_.timeoutMillis;
-    macros['CONSENT_STATE'] = () => this.consentState_;
-    macros['CONSENT_STRING'] = () => this.consentString_;
-    return macros;
-  }
-
-  /**
-   * Manages sending the RTC callouts for the Custom URLs.
-   * @param {!Object<string, !../../../src/service/variable-source.AsyncResolverDef>} customMacros The ad-network specified macro
-   */
-  handleRtcForCustomUrls(customMacros) {
-    // For each publisher defined URL, inflate the url using the macros,
-    // and send the RTC request.
-    (this.rtcConfig_.urls || []).forEach((urlObj) => {
-      let url, errorReportingUrl;
-      if (isObject(urlObj)) {
-        url = urlObj.url;
-        errorReportingUrl = urlObj.errorReportingUrl;
-      } else if (typeof urlObj == 'string') {
-        url = urlObj;
-      } else {
-        dev().warn(TAG, `Invalid url: ${urlObj}`);
-      }
-      this.inflateAndSendRtc_(url, customMacros, errorReportingUrl);
-    });
-  }
-
-  /**
-   * Manages sending the RTC callouts for all specified vendors.
-   * @param {!Object<string, !../../../src/service/variable-source.AsyncResolverDef>} customMacros The ad-network specified macro
-   */
-  handleRtcForVendorUrls(customMacros) {
-    // For each vendor the publisher has specified, inflate the vendor
-    // url if it exists, and send the RTC request.
-    Object.keys(this.rtcConfig_.vendors || []).forEach((vendor) => {
-      const vendorObject = RTC_VENDORS[vendor.toLowerCase()];
-      const url = vendorObject ? vendorObject.url : '';
-      const errorReportingUrl =
-        vendorObject && vendorObject.errorReportingUrl
-          ? vendorObject.errorReportingUrl
-          : '';
-      if (!url) {
-        return this.promiseArray_.push(
-          this.buildErrorResponse_(
-            RTC_ERROR_ENUM.UNKNOWN_VENDOR,
-            vendor,
-            errorReportingUrl
-          )
-        );
-      }
-      // There are two valid configurations of the vendor object.
-      // It can either be an object of macros mapping string to string,
-      // or it can be an object with sub-objects, one of which can be
-      // 'macros'. This is for backwards compatability.
-      const vendorMacros = isObject(this.rtcConfig_.vendors[vendor]['macros'])
-        ? this.rtcConfig_.vendors[vendor]['macros']
-        : this.rtcConfig_.vendors[vendor];
-      const validVendorMacros = {};
-      Object.keys(vendorMacros).forEach((macro) => {
-        if (!(vendorObject.macros && vendorObject.macros.includes(macro))) {
-          user().error(TAG, `Unknown macro: ${macro} for vendor: ${vendor}`);
-        } else {
-          const value = vendorMacros[macro];
-          validVendorMacros[macro] =
-            isObject(value) || isArray(value) ? JSON.stringify(value) : value;
-        }
-      });
-      // The ad network defined macros override vendor defined/pub specifed.
-      const macros = Object.assign(validVendorMacros, customMacros);
-      this.inflateAndSendRtc_(
-        url,
-        macros,
-        errorReportingUrl,
-        vendor.toLowerCase()
-      );
-    });
-  }
-
-  /**
-   * @param {string} url
-   * @param {!Object<string, !../../../src/service/variable-source.AsyncResolverDef>} macros
-   * @param {string} errorReportingUrl
-   * @param {string=} opt_vendor
-   * @private
-   */
-  inflateAndSendRtc_(url, macros, errorReportingUrl, opt_vendor) {
-    let {timeoutMillis} = this.rtcConfig_;
-    const callout = opt_vendor || this.getCalloutParam_(url);
-    const checkStillCurrent = this.a4aElement_.verifyStillCurrent.bind(
-      this.a4aElement_
-    )();
-    /**
-     * The time that it takes to substitute the macros into the URL can vary
-     * depending on what the url requires to be substituted, i.e. a long
-     * async call. Thus, however long the URL replacement took is treated as a
-     * time penalty.
-     * @param {string} url
-     * @return {*} TODO(#23582): Specify return type
-     */
-    const send = (url) => {
-      if (Object.keys(this.seenUrls_).length == MAX_RTC_CALLOUTS) {
-        return this.buildErrorResponse_(
-          RTC_ERROR_ENUM.MAX_CALLOUTS_EXCEEDED,
-          callout,
-          errorReportingUrl
-        );
-      }
-      if (!Services.urlForDoc(this.a4aElement_.element).isSecure(url)) {
-        return this.buildErrorResponse_(
-          RTC_ERROR_ENUM.INSECURE_URL,
-          callout,
-          errorReportingUrl
-        );
-      }
-      if (this.seenUrls_[url]) {
-        return this.buildErrorResponse_(
-          RTC_ERROR_ENUM.DUPLICATE_URL,
-          callout,
-          errorReportingUrl
-        );
-      }
-      this.seenUrls_[url] = true;
-      if (url.length > MAX_URL_LENGTH) {
-        url = this.truncUrl_(url);
-      }
-      return this.sendRtcCallout_(
-        url,
-        timeoutMillis,
-        callout,
-        checkStillCurrent,
-        errorReportingUrl
-      );
-    };
-
-    const allowlist = {};
-    Object.keys(macros).forEach((key) => (allowlist[key] = true));
-    const urlReplacementStartTime = Date.now();
-    this.promiseArray_.push(
-      Services.timerFor(this.win_)
-        .timeoutPromise(
-          timeoutMillis,
-          Services.urlReplacementsForDoc(
-            this.a4aElement_.element
-          ).expandUrlAsync(url, macros, allowlist)
-        )
-        .then((url) => {
-          checkStillCurrent();
-          timeoutMillis -= urlReplacementStartTime - Date.now();
-          return send(url);
-        })
-        .catch((error) => {
-          return isCancellation(error)
-            ? undefined
-            : this.buildErrorResponse_(
-                RTC_ERROR_ENUM.MACRO_EXPAND_TIMEOUT,
-                callout,
-                errorReportingUrl
-              );
-        })
-    );
-  }
-
-  /**
-   * @param {string} url
-   * @return {string}
-   */
-  truncUrl_(url) {
-    url = url.substr(0, MAX_URL_LENGTH - 12).replace(/%\w?$/, '');
-    return url + '&__trunc__=1';
-  }
-
-  /**
-   * @param {string} url
-   * @param {number} timeoutMillis
-   * @param {string} callout
-   * @param {!Function} checkStillCurrent
-   * @param {string} errorReportingUrl
-   * @return {!Promise<!rtcResponseDef>}
-   * @private
-   */
-  sendRtcCallout_(
-    url,
-    timeoutMillis,
-    callout,
-    checkStillCurrent,
-    errorReportingUrl
-  ) {
-    /**
-     * Note: Timeout is enforced by timerFor, not the value of
-     *   rtcTime. There are situations where rtcTime could thus
-     *   end up being greater than timeoutMillis.
-     */
-    return Services.timerFor(this.win_)
-      .timeoutPromise(
-        timeoutMillis,
-        Services.xhrFor(this.win_)
-          .fetchJson(
-            // NOTE(bradfrizzell): we could include ampCors:false allowing
-            // the request to be cached across sites but for now assume that
-            // is not a required feature.
-            url,
-            {credentials: 'include'}
-          )
-          .then((res) => {
-            checkStillCurrent();
-            return res.text().then((text) => {
-              checkStillCurrent();
-              const rtcTime = Date.now() - this.rtcStartTime_;
-              // An empty text response is allowed, not an error.
-              if (!text) {
-                return {rtcTime, callout};
-              }
-              const response = tryParseJson(text);
-              return response
-                ? {response, rtcTime, callout}
-                : this.buildErrorResponse_(
-                    RTC_ERROR_ENUM.MALFORMED_JSON_RESPONSE,
-                    callout,
-                    errorReportingUrl,
-                    rtcTime
-                  );
-            });
-          })
-      )
-      .catch((error) => {
-        return isCancellation(error)
-          ? undefined
-          : this.buildErrorResponse_(
-              // The relevant error message for timeout looks like it is
-              // just 'message' but is in fact 'messageXXX' where the
-              // X's are hidden special characters. That's why we use
-              // match here.
-              /^timeout/.test(error.message)
-                ? RTC_ERROR_ENUM.TIMEOUT
-                : RTC_ERROR_ENUM.NETWORK_FAILURE,
-              callout,
-              errorReportingUrl,
-              Date.now() - this.rtcStartTime_
-            );
-      });
-  }
-
-  /**
-   * Attempts to parse the publisher-defined RTC config off the amp-ad
-   * element, then validates that the rtcConfig exists, and contains
-   * an entry for either vendor URLs, or publisher-defined URLs. If the
-   * config contains an entry for timeoutMillis, validates that it is a
-   * number, or converts to a number if number-like, otherwise overwrites
-   * with the default.
-   * IMPORTANT: If the rtcConfig is invalid, RTC is aborted, and the ad
-   *   request continues without RTC.
-   * @param {!Element} element
-   * @return {boolean}
-   */
-  validateRtcConfig_(element) {
-    const defaultTimeoutMillis = 1000;
-    const unparsedRtcConfig = element.getAttribute('rtc-config');
-    if (!unparsedRtcConfig) {
-      return false;
-    }
-    const rtcConfig = tryParseJson(unparsedRtcConfig);
-    if (!rtcConfig) {
-      user().warn(TAG, 'Could not JSON parse rtc-config attribute');
-      return false;
-    }
-
-    let timeout;
-    try {
-      userAssert(
-        rtcConfig['vendors'] || rtcConfig['urls'],
-        'RTC Config must specify vendors or urls'
-      );
-      Object.keys(rtcConfig).forEach((key) => {
-        switch (key) {
-          case 'vendors':
-            userAssert(isObject(rtcConfig[key]), 'RTC invalid vendors');
-            break;
-          case 'urls':
-            userAssert(isArray(rtcConfig[key]), 'RTC invalid urls');
-            break;
-          case 'timeoutMillis':
-            timeout = parseInt(rtcConfig[key], 10);
-            if (isNaN(timeout)) {
-              user().warn(
-                TAG,
-                'Invalid RTC timeout is NaN, ' +
-                  `using default timeout ${defaultTimeoutMillis}ms`
-              );
-              timeout = undefined;
-            } else if (timeout > defaultTimeoutMillis || timeout < 0) {
-              user().warn(
-                TAG,
-                `Invalid RTC timeout: ${timeout}ms, ` +
-                  `using default timeout ${defaultTimeoutMillis}ms`
-              );
-              timeout = undefined;
-            }
-            break;
-          default:
-            user().warn(TAG, `Unknown RTC Config key: ${key}`);
-            break;
-        }
-      });
-      if (
-        !Object.keys(rtcConfig['vendors'] || {}).length &&
-        !(rtcConfig['urls'] || []).length
-      ) {
-        return false;
-      }
-      const validateErrorReportingUrl = (urlObj) => {
-        const errorUrl = urlObj['errorReportingUrl'];
-        if (
-          errorUrl &&
-          !Services.urlForDoc(this.a4aElement_.element).isSecure(errorUrl)
-        ) {
-          dev().warn(TAG, `Insecure RTC errorReportingUrl: ${errorUrl}`);
-          urlObj['errorReportingUrl'] = undefined;
-        }
-      };
-      /** @type {!Array} */ (rtcConfig['urls'] || []).forEach((urlObj) => {
-        if (isObject(urlObj)) {
-          validateErrorReportingUrl(urlObj);
-        }
-      });
-      validateErrorReportingUrl(rtcConfig);
-    } catch (unusedErr) {
-      // This error would be due to the asserts above.
-      return false;
-    }
-    rtcConfig['timeoutMillis'] =
-      timeout !== undefined ? timeout : defaultTimeoutMillis;
-    this.rtcConfig_ = /** @type {RtcConfigDef} */ (rtcConfig);
-    return true;
-  }
-}
-AMP.RealTimeConfigManager = RealTimeConfigManager;
diff --git a/extensions/amp-a4a/0.1/refresh-intersection-observer-polyfill-wrapper.js b/extensions/amp-a4a/0.1/refresh-intersection-observer-polyfill-wrapper.js
deleted file mode 100644
index db9b65a3aa6a1..0000000000000
--- a/extensions/amp-a4a/0.1/refresh-intersection-observer-polyfill-wrapper.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {IntersectionObserverPolyfill} from '../../../src/utils/intersection-observer-polyfill';
-import {devAssert} from '../../../src/log';
-
-// TODO(#27807): Remove once InOb polyfill has been launched.
-export class RefreshIntersectionObserverPolyfillWrapper {
-  /**
-   * A thin wrapper class to allow the IntersectionObserverPolyfill to work with
-   * refresh.
-   * @param {function(!Array<!IntersectionObserverEntry>)} callback
-   * @param {!AMP.BaseElement} baseElement
-   * @param {Object} config
-   */
-  constructor(callback, baseElement, config) {
-    /**
-     * @private @const {!IntersectionObserverPolyfill}
-     */
-    this.intersectionObserver_ = new IntersectionObserverPolyfill(
-      callback,
-      config
-    );
-
-    /**
-     * Stores elements and their original viewportCallback functions so that
-     * they can be reverted upon invocation of unobserve.
-     * @private {!Object<string, function()>}
-     */
-    this.viewportCallbacks_ = {};
-
-    /** @private @const {!../../../src/service/viewport/viewport-interface.ViewportInterface} */
-    this.viewport_ = baseElement.getViewport();
-
-    /**
-     * Flag that indicates when #tick should be called on the observer
-     * polyfill.
-     * @private {boolean}
-     */
-    this.updateObserver_ = false;
-  }
-
-  /**
-   * Begin observing the given element.
-   * @param {!Element} element
-   */
-  observe(element) {
-    // The attribute name is exported in refresh-manager.js as
-    // DATA_MANAGER_ID_NAME, but unfortunately, it can't be imported without
-    // creating a cyclical dependency.
-    const refreshId = element.getAttribute('data-amp-ad-refresh-id');
-    devAssert(refreshId, 'observe invoked on element without refresh id');
-
-    if (!this.viewportCallbacks_[refreshId]) {
-      const viewportCallback = element.viewportCallback.bind(element);
-      this.viewportCallbacks_[refreshId] = viewportCallback;
-      element.viewportCallback = (inViewport) => {
-        if (this.updateObserver_) {
-          this.intersectionObserver_.tick(this.viewport_.getRect());
-        }
-        viewportCallback(inViewport);
-      };
-    }
-
-    this.updateObserver_ = true;
-    this.intersectionObserver_.observe(element);
-    // Elements that appear and remain within the viewport for the duration of
-    // their existence may never have viewportCallback invoked. To ensure that
-    // refresh is triggered, we need to make this initial call.
-    this.intersectionObserver_.tick(this.viewport_.getRect());
-  }
-
-  /**
-   * Cease observing the given element.
-   * @param {!Element} element
-   */
-  unobserve(element) {
-    // We need to call 'tick' to update current host viewport state, otherwise
-    // the next time we call 'observe', the viewport state might be stale, and
-    // indicate that the element is in the viewport when it's not.
-    this.intersectionObserver_.tick(this.viewport_.getRect());
-    this.intersectionObserver_.unobserve(element);
-    this.updateObserver_ = false;
-  }
-}
diff --git a/extensions/amp-a4a/0.1/refresh-manager.js b/extensions/amp-a4a/0.1/refresh-manager.js
index b06fee26250a2..90eb47878d87f 100644
--- a/extensions/amp-a4a/0.1/refresh-manager.js
+++ b/extensions/amp-a4a/0.1/refresh-manager.js
@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-import {RefreshIntersectionObserverPolyfillWrapper} from './refresh-intersection-observer-polyfill-wrapper';
 import {Services} from '../../../src/services';
 import {devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 
 /**
  * - visibilePercentageMin: The percentage of pixels that need to be on screen
@@ -81,6 +80,9 @@ export function getPublisherSpecifiedRefreshInterval(element, unusedWin) {
  * @return {?number}
  */
 function checkAndSanitizeRefreshInterval(refreshInterval) {
+  if (refreshInterval === 'false') {
+    return null;
+  }
   const refreshIntervalNum = Number(refreshInterval);
   if (isNaN(refreshIntervalNum) || refreshIntervalNum < MIN_REFRESH_INTERVAL) {
     user().warn(
@@ -132,7 +134,7 @@ const RefreshLifecycleState = {
  * Each IO is configured to a different threshold, and all elements that
  * share the same visiblePercentageMin will be monitored by the same IO.
  *
- * @const {!Object<string, (!IntersectionObserver|!RefreshIntersectionObserverPolyfillWrapper)>}
+ * @const {!Object<string, (!IntersectionObserver)>}
  */
 const observers = {};
 
@@ -226,20 +228,16 @@ export class RefreshManager {
    * one if one does not yet exist.
    *
    * @param {number} threshold
-   * @return {(!IntersectionObserver|!RefreshIntersectionObserverPolyfillWrapper)}
+   * @return {!IntersectionObserver}
    */
   getIntersectionObserverWithThreshold_(threshold) {
     const thresholdString = String(threshold);
     return (
       observers[thresholdString] ||
-      (observers[thresholdString] =
-        'IntersectionObserver' in this.win_
-          ? new this.win_['IntersectionObserver'](this.ioCallback_, {threshold})
-          : new RefreshIntersectionObserverPolyfillWrapper(
-              this.ioCallback_,
-              this.a4a_,
-              {threshold}
-            ))
+      (observers[thresholdString] = new this.win_.IntersectionObserver(
+        this.ioCallback_,
+        {threshold}
+      ))
     );
   }
 
diff --git a/extensions/amp-a4a/0.1/secure-frame.js b/extensions/amp-a4a/0.1/secure-frame.js
new file mode 100644
index 0000000000000..9f232e02e9b02
--- /dev/null
+++ b/extensions/amp-a4a/0.1/secure-frame.js
@@ -0,0 +1,103 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createElementWithAttributes, escapeHtml} from '../../../src/dom';
+import {dict} from '../../../src/core/types/object';
+import {getFieSafeScriptSrcs} from '../../../src/friendly-iframe-embed';
+
+// If making changes also change ALLOWED_FONT_REGEX in head-validation.js
+/** @const {string} */
+const fontProviderAllowList = [
+  'https://cdn.materialdesignicons.com',
+  'https://cloud.typography.com',
+  'https://fast.fonts.net',
+  'https://fonts.googleapis.com',
+  'https://maxcdn.bootstrapcdn.com',
+  'https://p.typekit.net',
+  'https://pro.fontawesome.com',
+  'https://use.fontawesome.com',
+  'https://use.typekit.net',
+].join(' ');
+
+/** @const {string} */
+const sandboxVals =
+  'allow-forms ' +
+  'allow-popups ' +
+  'allow-popups-to-escape-sandbox ' +
+  'allow-same-origin ' +
+  'allow-scripts ' +
+  'allow-top-navigation';
+
+/**
+ * Create the starting html for all FIE ads. If streaming is supported body will be
+ * piped in later.
+ * @param {string} url
+ * @param {string} sanitizedHeadElements
+ * @param {string} body
+ * @return {string}
+ */
+export const createSecureDocSkeleton = (url, sanitizedHeadElements, body) =>
+  `<!DOCTYPE html>
+  <html ⚡4ads lang="en">
+  <head>
+    <base href="${escapeHtml(url)}">
+    <meta charset="UTF-8">
+    <meta http-equiv=Content-Security-Policy content="
+      img-src * data:;
+      media-src *;
+      font-src *;
+      connect-src *;
+      script-src ${getFieSafeScriptSrcs()};
+      object-src 'none';
+      child-src 'none';
+      default-src 'none';
+      style-src ${fontProviderAllowList} 'unsafe-inline';
+    ">
+    ${sanitizedHeadElements}
+  </head>
+  <body>${body}</body>
+  </html>`;
+
+/**
+ * Create iframe with predefined CSP and sandbox attributes for security.
+ * @param {!Window} win
+ * @param {string} title
+ * @param {string} height
+ * @param {string} width
+ * @return {!HTMLIFrameElement}
+ */
+export function createSecureFrame(win, title, height, width) {
+  const {document} = win;
+  const iframe = /** @type {!HTMLIFrameElement} */ (
+    createElementWithAttributes(
+      document,
+      'iframe',
+      dict({
+        // NOTE: It is possible for either width or height to be 'auto',
+        // a non-numeric value.
+        'height': height,
+        'width': width,
+        'title': title,
+        'frameborder': '0',
+        'allowfullscreen': '',
+        'allowtransparency': '',
+        'scrolling': 'no',
+        'sandbox': sandboxVals,
+      })
+    )
+  );
+  return iframe;
+}
diff --git a/extensions/amp-a4a/0.1/signature-verifier.js b/extensions/amp-a4a/0.1/signature-verifier.js
index 601dc67847092..d327c5dd3882f 100644
--- a/extensions/amp-a4a/0.1/signature-verifier.js
+++ b/extensions/amp-a4a/0.1/signature-verifier.js
@@ -15,9 +15,9 @@
  */
 
 import {Services} from '../../../src/services';
-import {base64DecodeToBytes} from '../../../src/utils/base64';
+import {base64DecodeToBytes} from '../../../src/core/types/string/base64';
 import {dev, devAssert, user} from '../../../src/log';
-import {isArray} from '../../../src/types';
+import {isArray} from '../../../src/core/types';
 
 /** @visibleForTesting */
 export const AMP_SIGNATURE_HEADER = 'AMP-Fast-Fetch-Signature';
@@ -167,7 +167,8 @@ export class SignatureVerifier {
    * @return {!Promise<!VerificationStatus>}
    */
   verify(creative, headers) {
-    const signatureFormat = /^([A-Za-z0-9._-]+):([A-Za-z0-9._-]+):([A-Za-z0-9+/]{341}[AQgw]==)$/;
+    const signatureFormat =
+      /^([A-Za-z0-9._-]+):([A-Za-z0-9._-]+):([A-Za-z0-9+/]{341}[AQgw]==)$/;
     if (!headers.has(AMP_SIGNATURE_HEADER)) {
       return Promise.resolve(VerificationStatus.UNVERIFIED);
     }
diff --git a/extensions/amp-a4a/0.1/template-renderer.js b/extensions/amp-a4a/0.1/template-renderer.js
index 0b27bae362e59..a859de7ca6818 100644
--- a/extensions/amp-a4a/0.1/template-renderer.js
+++ b/extensions/amp-a4a/0.1/template-renderer.js
@@ -16,7 +16,7 @@
 
 import {Renderer} from './amp-ad-type-defs';
 import {devAssert} from '../../../src/log';
-import {getAmpAdTemplateHelper} from './template-validator';
+import {getAmpAdTemplateHelper} from './amp-ad-template-helper';
 import {renderCreativeIntoFriendlyFrame} from './friendly-frame-util';
 
 /**
@@ -40,11 +40,22 @@ export class TemplateRenderer extends Renderer {
     super();
   }
 
+  /**
+   * Retrieve the content document depending on browser support
+   *
+   * @param {*} iframe
+   *   The iframe to retrieve the document of
+   * @return {*}
+   */
+  getDocument(iframe) {
+    return iframe.contentDocument || iframe.contentWindow.document;
+  }
+
   /** @override */
   render(context, element, creativeData) {
     creativeData = /** @type {CreativeData} */ (creativeData);
 
-    const {size, adUrl} = context;
+    const {adUrl, size} = context;
     const {creativeMetadata} = creativeData;
 
     devAssert(size, 'missing creative size');
@@ -56,23 +67,25 @@ export class TemplateRenderer extends Renderer {
       element,
       creativeMetadata
     ).then((iframe) => {
-      const templateData = /** @type {!./amp-ad-type-defs.AmpTemplateCreativeDef} */ (creativeData.templateData);
+      const templateData =
+        /** @type {!./amp-ad-type-defs.AmpTemplateCreativeDef} */ (
+          creativeData.templateData
+        );
       const {data} = templateData;
       if (!data) {
         return Promise.resolve();
       }
-      const templateHelper = getAmpAdTemplateHelper(context.win);
+      const templateHelper = getAmpAdTemplateHelper(element);
       return templateHelper
-        .render(data, iframe.contentWindow.document.body)
+        .render(data, this.getDocument(iframe).body)
         .then((renderedElement) => {
           const {analytics} = templateData;
           if (analytics) {
             templateHelper.insertAnalytics(renderedElement, analytics);
           }
           // This element must exist, or #render() would have thrown.
-          const templateElement = iframe.contentWindow.document.querySelector(
-            'template'
-          );
+          const templateElement =
+            this.getDocument(iframe).querySelector('template');
           templateElement.parentNode.replaceChild(
             renderedElement,
             templateElement
diff --git a/extensions/amp-a4a/0.1/template-validator.js b/extensions/amp-a4a/0.1/template-validator.js
index 066a460d6ef27..e7f962e3055f7 100644
--- a/extensions/amp-a4a/0.1/template-validator.js
+++ b/extensions/amp-a4a/0.1/template-validator.js
@@ -15,42 +15,34 @@
  */
 
 import {AdResponseType, Validator, ValidatorResult} from './amp-ad-type-defs';
-import {AmpAdTemplateHelper} from '../../amp-a4a/0.1/amp-ad-template-helper';
-import {Services} from '../../../src/services';
-import {getAmpAdMetadata} from './amp-ad-utils';
-import {pushIfNotExist} from '../../../src/utils/array';
-import {tryParseJson} from '../../../src/json';
-import {utf8Decode} from '../../../src/utils/bytes';
+import {
+  extensionsHasElement,
+  getAmpAdMetadata,
+  getExtensionsFromMetadata,
+  mergeExtensionsMetadata,
+} from './amp-ad-utils';
+import {getAmpAdTemplateHelper} from './amp-ad-template-helper';
+import {preloadFriendlyIframeEmbedExtensions} from '../../../src/friendly-iframe-embed';
+import {tryParseJson} from '../../../src/core/types/object/json';
+import {urls} from '../../../src/config';
+import {utf8Decode} from '../../../src/core/types/string/bytes';
 
 /** @const {string} */
 export const AMP_TEMPLATED_CREATIVE_HEADER_NAME = 'AMP-Ad-Template-Extension';
 export const DEPRECATED_AMP_TEMPLATED_CREATIVE_HEADER_NAME =
   'AMP-template-amp-creative';
 
-/** @type {?AmpAdTemplateHelper} */
-let ampAdTemplateHelper;
-
-/**
- * Returns the global template helper.
- * @param {!Window} win
- * @return {!AmpAdTemplateHelper}
- */
-export function getAmpAdTemplateHelper(win) {
-  return (
-    ampAdTemplateHelper || (ampAdTemplateHelper = new AmpAdTemplateHelper(win))
-  );
-}
-
 /**
  * Validator for Template ads.
  */
 export class TemplateValidator extends Validator {
   /** @override */
-  validate(context, unvalidatedBytes, headers) {
+  validate(context, containerElement, unvalidatedBytes, headers) {
     const body = utf8Decode(/** @type {!ArrayBuffer} */ (unvalidatedBytes));
-    const parsedResponseBody = /** @type {./amp-ad-type-defs.AmpTemplateCreativeDef} */ (tryParseJson(
-      body
-    ));
+    const parsedResponseBody =
+      /** @type {./amp-ad-type-defs.AmpTemplateCreativeDef} */ (
+        tryParseJson(body)
+      );
 
     // If we're missing the relevant header, or headers altogether, we cannot
     // proceed. In this case, we return a NON_AMP response, since we cannot
@@ -75,25 +67,35 @@ export class TemplateValidator extends Validator {
       );
     }
 
-    return getAmpAdTemplateHelper(context.win)
+    return getAmpAdTemplateHelper(containerElement)
       .fetch(parsedResponseBody.templateUrl)
       .then((template) => {
         const creativeMetadata = getAmpAdMetadata(template);
-        if (parsedResponseBody.analytics) {
-          pushIfNotExist(
-            creativeMetadata['customElementExtensions'],
-            'amp-analytics'
-          );
-        }
-        pushIfNotExist(
-          creativeMetadata['customElementExtensions'],
-          'amp-mustache'
+        creativeMetadata['extensions'] = creativeMetadata['extensions'] || [];
+        const extensions = creativeMetadata['extensions'];
+        mergeExtensionsMetadata(
+          extensions,
+          creativeMetadata['customElementExtensions']
         );
+        if (
+          parsedResponseBody.analytics &&
+          !extensionsHasElement(extensions, 'amp-analytics')
+        ) {
+          extensions.push({
+            'custom-element': 'amp-analytics',
+            src: `${urls.cdn}/v0/amp-analytics-0.1.js`,
+          });
+        }
+        if (!extensionsHasElement(extensions, 'amp-mustache')) {
+          extensions.push({
+            'custom-element': 'amp-mustache',
+            src: `${urls.cdn}/v0/amp-mustache-latest.js`,
+          });
+        }
+
+        const extensionsInfo = getExtensionsFromMetadata(creativeMetadata);
+        preloadFriendlyIframeEmbedExtensions(context.win, extensionsInfo);
 
-        const extensions = Services.extensionsFor(context.win);
-        creativeMetadata.customElementExtensions.forEach((extensionId) =>
-          extensions./*OK*/ preloadExtension(extensionId)
-        );
         // TODO(levitzky) Add preload logic for fonts / images.
         return Promise.resolve(
           /** @type {!./amp-ad-type-defs.ValidatorOutput} */ ({
diff --git a/extensions/amp-a4a/0.1/test/fetch-mock.js b/extensions/amp-a4a/0.1/test/fetch-mock.js
index 381e124a04c88..98b456b5ff388 100644
--- a/extensions/amp-a4a/0.1/test/fetch-mock.js
+++ b/extensions/amp-a4a/0.1/test/fetch-mock.js
@@ -120,7 +120,7 @@ export class FetchMock {
       if (data === null || typeof data == 'string') {
         return new Response(data);
       } else {
-        const {body, status, headers} = data;
+        const {body, headers, status} = data;
         return new Response(
           body,
           /** @type {!ResponseInit} */ ({status, headers})
diff --git a/extensions/amp-a4a/0.1/test/test-a4a-integration.js b/extensions/amp-a4a/0.1/test/test-a4a-integration.js
index 71e26cc170d12..19f4c9b94fa3f 100644
--- a/extensions/amp-a4a/0.1/test/test-a4a-integration.js
+++ b/extensions/amp-a4a/0.1/test/test-a4a-integration.js
@@ -54,8 +54,8 @@ async function expectRenderedInFriendlyIframe(element, srcdoc) {
   expect(element, 'ad element').to.be.ok;
   const child = element.querySelector('iframe[srcdoc]');
   expect(child, 'iframe child').to.be.ok;
-  expect(child.getAttribute('srcdoc')).to.contain.string(srcdoc);
   await loadPromise(child);
+  expect(child.contentDocument.body.innerHTML).to.contain.string(srcdoc);
   const childDocument = child.contentDocument.documentElement;
   expect(childDocument, 'iframe doc').to.be.ok;
   expect(element, 'ad tag').to.be.visible;
@@ -78,7 +78,7 @@ function expectRenderedInXDomainIframe(element, src) {
   expect(child, 'iframe child').to.be.visible;
 }
 
-describe('integration test: a4a', () => {
+describes.sandboxed('integration test: a4a', {}, (env) => {
   let fixture;
   let fetchMock;
   let adResponse;
@@ -130,11 +130,14 @@ describe('integration test: a4a', () => {
     return expectRenderedInFriendlyIframe(a4aElement, 'Hello, world.');
   });
 
-  it('should fall back to 3p when no signature is present', async () => {
-    delete adResponse.headers[AMP_SIGNATURE_HEADER];
-    await fixture.addElement(a4aElement);
-    return expectRenderedInXDomainIframe(a4aElement, TEST_URL);
-  });
+  // TODO(#27189): remove crypto checks as part of no signing cleanup.
+  if (!NO_SIGNING_RTV) {
+    it('should fall back to 3p when no signature is present', async () => {
+      delete adResponse.headers[AMP_SIGNATURE_HEADER];
+      await fixture.addElement(a4aElement);
+      return expectRenderedInXDomainIframe(a4aElement, TEST_URL);
+    });
+  }
 
   it('should not send request if display none', async () => {
     a4aElement.style.display = 'none';
@@ -148,7 +151,7 @@ describe('integration test: a4a', () => {
     // TODO(tdrl) Currently layoutCallback rejects, even though something *is*
     // rendered.  This should be fixed in a refactor, and we should change this
     // .catch to a .then.
-    const forceCollapseStub = window.sandbox.spy(
+    const forceCollapseStub = env.sandbox.spy(
       MockA4AImpl.prototype,
       'forceCollapse'
     );
@@ -166,7 +169,7 @@ describe('integration test: a4a', () => {
   it('should collapse slot when creative response has code 204', async () => {
     adResponse.status = 204;
     adResponse.body = null;
-    const forceCollapseStub = window.sandbox.spy(
+    const forceCollapseStub = env.sandbox.spy(
       MockA4AImpl.prototype,
       'forceCollapse'
     );
@@ -176,7 +179,7 @@ describe('integration test: a4a', () => {
 
   it('should collapse slot when creative response.arrayBuffer() is empty', async () => {
     adResponse.body = '';
-    const forceCollapseStub = window.sandbox.spy(
+    const forceCollapseStub = env.sandbox.spy(
       MockA4AImpl.prototype,
       'forceCollapse'
     );
@@ -188,7 +191,7 @@ describe('integration test: a4a', () => {
     await fixture.addElement(a4aElement);
     await expectRenderedInFriendlyIframe(a4aElement, 'Hello, world.');
     const a4a = new MockA4AImpl(a4aElement);
-    const initiateAdRequestMock = window.sandbox
+    const initiateAdRequestMock = env.sandbox
       .stub(MockA4AImpl.prototype, 'initiateAdRequest')
       .callsFake(() => {
         a4a.adPromise_ = Promise.resolve();
@@ -196,16 +199,16 @@ describe('integration test: a4a', () => {
         // up any unrelated asserts.
         a4a.isRefreshing = false;
       });
-    const tearDownSlotMock = window.sandbox.stub(
+    const tearDownSlotMock = env.sandbox.stub(
       MockA4AImpl.prototype,
       'tearDownSlot'
     );
     tearDownSlotMock.returns(undefined);
-    const destroyFrameSpy = window.sandbox.spy(
+    const destroyFrameSpy = env.sandbox.spy(
       MockA4AImpl.prototype,
       'destroyFrame'
     );
-    const callback = window.sandbox.spy();
+    const callback = env.sandbox.spy();
     await a4a.refresh(callback);
     expect(initiateAdRequestMock).to.be.called;
     expect(tearDownSlotMock).to.be.called;
diff --git a/extensions/amp-a4a/0.1/test/test-a4a-var-source.js b/extensions/amp-a4a/0.1/test/test-a4a-var-source.js
index 1632c71ea334b..1b57acd8ea48f 100644
--- a/extensions/amp-a4a/0.1/test/test-a4a-var-source.js
+++ b/extensions/amp-a4a/0.1/test/test-a4a-var-source.js
@@ -18,7 +18,7 @@ import {A4AVariableSource} from '../a4a-variable-source';
 import {createIframePromise} from '../../../../testing/iframe';
 import {installDocumentInfoServiceForDoc} from '../../../../src/service/document-info-impl';
 
-describe('A4AVariableSource', () => {
+describes.sandboxed('A4AVariableSource', {}, () => {
   let varSource;
 
   beforeEach(async () => {
diff --git a/extensions/amp-a4a/0.1/test/test-amp-a4a-within-viewport.js b/extensions/amp-a4a/0.1/test/test-amp-a4a-within-viewport.js
new file mode 100644
index 0000000000000..ff8c0e0c0cc6f
--- /dev/null
+++ b/extensions/amp-a4a/0.1/test/test-amp-a4a-within-viewport.js
@@ -0,0 +1,157 @@
+/**
+ * Copyright 2020 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.
+ */
+
+// Need the following side-effect import because in actual production code,
+// Fast Fetch impls are always loaded via an AmpAd tag, which means AmpAd is
+// always available for them. However, when we test an impl in isolation,
+// AmpAd is not loaded already, so we need to load it separately.
+import '../../../../extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler';
+import '../../../amp-ad/0.1/amp-ad';
+import {AmpA4A} from '../amp-a4a';
+import {htmlFor} from '../../../../src/static-template';
+import {pushIfNotExist, removeItem} from '../../../../src/core/types/array';
+import {upgradeOrRegisterElement} from '../../../../src/service/custom-element-registry';
+
+describes.realWin(
+  'amp-a4a: whenWithinViewport',
+  {
+    amp: true,
+  },
+  (env) => {
+    let win, doc, html;
+    let element;
+    let impl;
+    let observers;
+
+    beforeEach(async () => {
+      win = env.win;
+      doc = win.document;
+      html = htmlFor(doc);
+
+      observers = [];
+      env.sandbox
+        .stub(win, 'IntersectionObserver')
+        .callsFake((callback, options) => {
+          const elements = [];
+          observers.push({elements, callback, options: options || {}});
+          return {
+            observe(element) {
+              pushIfNotExist(elements, element);
+            },
+            unobserve(element) {
+              removeItem(elements, element);
+            },
+            disconnect() {
+              elements.length = 0;
+            },
+          };
+        });
+
+      upgradeOrRegisterElement(win, 'amp-a4a', AmpA4A);
+
+      element = html`
+        <amp-a4a layout="fixed" width="100" height="100"></amp-a4a>
+      `;
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      impl = await element.getImpl();
+    });
+
+    function notifyIntersection(rootMargin, isIntersecting) {
+      for (let i = 0; i < observers.length; i++) {
+        const {callback, elements, options} = observers[i];
+        if (
+          elements.includes(element) &&
+          options.root === doc &&
+          options.rootMargin === rootMargin
+        ) {
+          callback([
+            {
+              target: element,
+              isIntersecting,
+              intersectionRatio: isIntersecting ? 1 : 0,
+              boundingClientRect: element.getBoundingClientRect(),
+              intersectionRect: element.getBoundingClientRect(),
+              rootBounds: doc.documentElement.getBoundingClientRect(),
+            },
+          ]);
+        }
+      }
+    }
+
+    function isObserved(rootMargin) {
+      for (let i = 0; i < observers.length; i++) {
+        const {elements, options} = observers[i];
+        if (
+          elements.includes(element) &&
+          options.root === doc &&
+          options.rootMargin === rootMargin
+        ) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    it('should resolve immediately when viewport=true is provided', async () => {
+      await impl.whenWithinViewport(true);
+    });
+
+    it('should resolve immediately when the element is already loaded', async () => {
+      env.sandbox.stub(impl.getResource(), 'isLayoutPending').returns(false);
+      await impl.whenWithinViewport(1);
+    });
+
+    it('should wait for within-viewport for viewport=1', async () => {
+      const promise = impl.whenWithinViewport(1);
+      expect(isObserved('0%')).to.be.true;
+      notifyIntersection('0%', true);
+
+      expect(isObserved('0%')).to.be.false;
+      await promise;
+    });
+
+    it('should wait for within-viewport for viewport=3', async () => {
+      const promise = impl.whenWithinViewport(3);
+      // 200% = (3 - 1) * 100%
+      expect(isObserved('200%')).to.be.true;
+      notifyIntersection('200%', true);
+
+      expect(isObserved('200%')).to.be.false;
+      await promise;
+    });
+
+    it('should ignore non-intersecting notifications', () => {
+      impl.whenWithinViewport(1);
+      expect(isObserved('0%')).to.be.true;
+      notifyIntersection('0%', false);
+
+      expect(isObserved('0%')).to.be.true;
+    });
+
+    it('should ignore notifications for other root margins', () => {
+      impl.whenWithinViewport(1);
+      impl.whenWithinViewport(3);
+      expect(isObserved('0%')).to.be.true;
+      expect(isObserved('200%')).to.be.true;
+
+      notifyIntersection('0%', true);
+
+      expect(isObserved('0%')).to.be.false;
+      expect(isObserved('200%')).to.be.true;
+    });
+  }
+);
diff --git a/extensions/amp-a4a/0.1/test/test-amp-a4a.js b/extensions/amp-a4a/0.1/test/test-amp-a4a.js
index 060b192557408..6bc91eff80c3e 100644
--- a/extensions/amp-a4a/0.1/test/test-amp-a4a.js
+++ b/extensions/amp-a4a/0.1/test/test-amp-a4a.js
@@ -24,6 +24,7 @@ import '../../../amp-ad/0.1/amp-ad';
 // methods in tests.
 import * as analytics from '../../../../src/analytics';
 import * as analyticsExtension from '../../../../src/extension-analytics';
+import * as mode from '../../../../src/mode';
 import {AMP_SIGNATURE_HEADER, VerificationStatus} from '../signature-verifier';
 import {
   AmpA4A,
@@ -36,21 +37,18 @@ import {
   assignAdUrlToError,
   protectFunctionWrapper,
 } from '../amp-a4a';
-import {
-  AmpDoc,
-  installDocService,
-  updateFieModeForTesting,
-} from '../../../../src/service/ampdoc-impl';
-import {CONSENT_POLICY_STATE} from '../../../../src/consent-state';
+import {AmpAdXOriginIframeHandler} from '../../../../extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler';
+import {AmpDoc, installDocService} from '../../../../src/service/ampdoc-impl';
+import {CONSENT_POLICY_STATE} from '../../../../src/core/constants/consent-state';
 import {Extensions} from '../../../../src/service/extensions-impl';
 import {FetchMock, networkFailure} from './fetch-mock';
 import {FriendlyIframeEmbed} from '../../../../src/friendly-iframe-embed';
+import {GEO_IN_GROUP} from '../../../amp-geo/0.1/amp-geo-in-group';
 import {LayoutPriority} from '../../../../src/layout';
 import {MockA4AImpl, TEST_URL} from './utils';
-import {RealTimeConfigManager} from '../real-time-config-manager';
 import {Services} from '../../../../src/services';
-import {Signals} from '../../../../src/utils/signals';
-import {cancellation} from '../../../../src/error';
+import {Signals} from '../../../../src/core/data-structures/signals';
+import {cancellation} from '../../../../src/error-reporting';
 import {createElementWithAttributes} from '../../../../src/dom';
 import {createIframePromise} from '../../../../testing/iframe';
 import {dev, user} from '../../../../src/log';
@@ -58,14 +56,244 @@ import {
   incrementLoadingAds,
   is3pThrottled,
 } from '../../../amp-ad/0.1/concurrent-load';
-
-import {layoutRectLtwh} from '../../../../src/layout-rect';
+import {installRealTimeConfigServiceForDoc} from '../../../../src/service/real-time-config/real-time-config-impl';
+import {
+  layoutRectLtwh,
+  layoutSizeFromRect,
+} from '../../../../src/core/math/layout-rect';
+import {macroTask} from '../../../../testing/yield';
 import {resetScheduledElementForTesting} from '../../../../src/service/custom-element-registry';
 import {data as testFragments} from './testdata/test_fragments';
-import {toggleAmpdocFieForTesting} from '../../../../src/ampdoc-fie';
+import {toggleExperiment} from '../../../../src/experiments';
 import {data as validCSSAmp} from './testdata/valid_css_at_rules_amp.reserialized';
 
-describe('amp-a4a', () => {
+describes.realWin('amp-a4a: no signing', {amp: true}, (env) => {
+  let doc;
+  let element;
+  let a4a;
+  let attachShadowStub;
+
+  beforeEach(() => {
+    doc = env.win.document;
+    env.sandbox.stub(AmpA4A.prototype, 'isInNoSigningExp').returns(true);
+    element = createElementWithAttributes(env.win.document, 'amp-ad', {
+      'width': '300',
+      'height': '250',
+      'type': 'doubleclick',
+      'layout': 'fixed',
+    });
+    doc.body.appendChild(element);
+    a4a = new AmpA4A(element);
+    // Make the ad think it has size.
+    env.sandbox.stub(a4a, 'getIntersectionElementLayoutBox').returns({
+      height: 250,
+      width: 300,
+    });
+    env.sandbox.stub(a4a, 'getAdUrl').returns('https://adnetwork.com');
+    env.fetchMock.mock(
+      'begin:https://adnetwork.com',
+      validCSSAmp.minifiedCreative
+    );
+
+    attachShadowStub = env.sandbox.stub(
+      env.win.Element.prototype,
+      'attachShadow'
+    );
+    // Emulate native function.
+    attachShadowStub.value(function () {
+      return '[native code]';
+    });
+  });
+
+  it('should contain the correct csp meta content', async () => {
+    await a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    await a4a.layoutCallback();
+    const fie = doc.body.querySelector('iframe[srcdoc]');
+    expect(fie.getAttribute('sandbox')).to.equal(
+      'allow-forms allow-popups allow-popups-to-escape-sandbox ' +
+        'allow-same-origin allow-scripts allow-top-navigation'
+    );
+    const cspMeta = fie.contentDocument.querySelector(
+      'meta[http-equiv=Content-Security-Policy]'
+    );
+    expect(cspMeta).to.be.ok;
+    expect(cspMeta.content).to.include('img-src * data:;');
+    expect(cspMeta.content).to.include('media-src *;');
+    expect(cspMeta.content).to.include('font-src *;');
+    expect(cspMeta.content).to.include('connect-src *;');
+    expect(cspMeta.content).to.include(
+      'script-src http://localhost:8000/dist/lts/ ' +
+        'http://localhost:8000/dist/rtv/ ' +
+        'http://localhost:8000/dist/sw/;'
+    );
+    expect(cspMeta.content).to.include("object-src 'none';");
+    expect(cspMeta.content).to.include("child-src 'none';");
+    expect(cspMeta.content).to.include("default-src 'none';");
+    expect(cspMeta.content).to.include(
+      'style-src ' +
+        'https://cdn.materialdesignicons.com ' +
+        'https://cloud.typography.com ' +
+        'https://fast.fonts.net ' +
+        'https://fonts.googleapis.com ' +
+        'https://maxcdn.bootstrapcdn.com https://p.typekit.net https://pro.fontawesome.com ' +
+        'https://use.fontawesome.com ' +
+        'https://use.typekit.net ' +
+        "'unsafe-inline';"
+    );
+  });
+
+  it('should set the correct sandbox features', async () => {
+    env.sandbox.stub(Services.platformFor(env.win), 'isSafari').returns(false);
+    await a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    await a4a.layoutCallback();
+    const fie = doc.body.querySelector('iframe[srcdoc]');
+    expect(fie.getAttribute('sandbox')).to.equal(
+      'allow-forms allow-popups allow-popups-to-escape-sandbox ' +
+        'allow-same-origin allow-scripts allow-top-navigation'
+    );
+  });
+
+  it('FIE should contain <base> with adurl', async () => {
+    await a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    await a4a.layoutCallback();
+    const fie = doc.body.querySelector('iframe[srcdoc]');
+    const base = fie.contentDocument.querySelector('base');
+    expect(base).to.be.ok;
+    expect(base.href).to.equal('https://adnetwork.com/');
+  });
+
+  it('should complete the rendering FIE', async () => {
+    const prioritySpy = env.sandbox.spy(a4a, 'updateLayoutPriority');
+    await a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    await a4a.layoutCallback();
+    const fie = doc.body.querySelector('iframe[srcdoc]');
+    expect(fie).to.be.ok;
+    expect(fie.contentDocument.body.textContent).to.contain.string(
+      'Hello, world.'
+    );
+    expect(prioritySpy).to.be.calledWith(LayoutPriority.CONTENT);
+  });
+
+  it('should not throw on polyfill scripts', async () => {
+    env.sandbox.stub(mode, 'getMode').returns({localDev: false});
+    await a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    await a4a.layoutCallback();
+    const fie = doc.body.querySelector('iframe[srcdoc]');
+    const violationSpy = env.sandbox.spy();
+    fie.contentWindow.addEventListener('securitypolicyviolation', violationSpy);
+    const fakePolyfill = doc.createElement('script');
+    fakePolyfill.src = 'https://cdn.ampproject.org/rtv/some-polyfill.js';
+    fie.contentDocument.head.appendChild(fakePolyfill);
+    await macroTask();
+    expect(violationSpy).not.to.be.called;
+  });
+
+  it('should throw on non-approved injected scripts', async () => {
+    env.sandbox.stub(mode, 'getMode').returns({localDev: false});
+    await a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    await a4a.layoutCallback();
+    const fie = doc.body.querySelector('iframe[srcdoc]');
+    const violationSpy = env.sandbox.spy();
+    fie.contentWindow.addEventListener('securitypolicyviolation', violationSpy);
+    const fakePolyfill = doc.createElement('script');
+    fakePolyfill.src = 'https://www.cats.example';
+    fie.contentDocument.head.appendChild(fakePolyfill);
+    await macroTask();
+    expect(violationSpy).to.be.called;
+  });
+
+  it('should collapse on no content', async () => {
+    env.fetchMock.config.overwriteRoutes = true;
+    env.fetchMock.mock('begin:https://adnetwork.com', ''); // no content.
+    const iframe3pInit = env.sandbox
+      .stub(AmpAdXOriginIframeHandler.prototype, 'init')
+      .resolves();
+    const collapseSpy = env.sandbox.spy(a4a, 'forceCollapse');
+
+    await a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    await a4a.layoutCallback();
+    expect(collapseSpy).to.be.called;
+    expect(iframe3pInit).not.to.be.called;
+  });
+
+  it('should fallback to x-domain without ⚡️4ads', async () => {
+    env.fetchMock.config.overwriteRoutes = true;
+    env.fetchMock.mock(
+      'begin:https://adnetwork.com',
+      testFragments.minimalDocOneStyle
+    );
+    const iframe3pInit = env.sandbox
+      .stub(AmpAdXOriginIframeHandler.prototype, 'init')
+      .resolves();
+    await a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    await a4a.layoutCallback();
+    expect(iframe3pInit).to.be.called;
+  });
+
+  it('should not try to validate if #skipClientSideValidation', async () => {
+    const fallbackSpy = env.sandbox.spy(a4a, 'handleFallback_');
+    env.sandbox.stub(a4a, 'skipClientSideValidation').returns(true);
+    await a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    await a4a.adPromise_;
+    expect(fallbackSpy).to.be.called;
+  });
+
+  it('should validate if #skipClientSideValidation == false', async () => {
+    const fallbackSpy = env.sandbox.spy(a4a, 'handleFallback_');
+    env.sandbox.stub(a4a, 'skipClientSideValidation').returns(false);
+    await a4a.buildCallback();
+    await a4a.onLayoutMeasure();
+    await a4a.adPromise_;
+    expect(fallbackSpy).not.to.be.called;
+  });
+
+  it('should fallback when shadow DOM is not supported', async () => {
+    toggleExperiment(env.win, 'disable-a4a-non-sd', true, true);
+    attachShadowStub.value(undefined);
+    const fallbackSpy = env.sandbox.spy(a4a, 'handleFallback_');
+    env.sandbox.stub(a4a, 'skipClientSideValidation').returns(false);
+    await a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    await a4a.adPromise_;
+    expect(fallbackSpy).to.be.called;
+  });
+
+  it('should fallback when shadow DOM is polyfilled', async () => {
+    toggleExperiment(env.win, 'disable-a4a-non-sd', true, true);
+    attachShadowStub.value(function () {
+      // A non-native function.
+      return null;
+    });
+    const fallbackSpy = env.sandbox.spy(a4a, 'handleFallback_');
+    env.sandbox.stub(a4a, 'skipClientSideValidation').returns(false);
+    await a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    await a4a.adPromise_;
+    expect(fallbackSpy).to.be.called;
+  });
+
+  it('should ignore shadow DOM requirement without an experiment', async () => {
+    toggleExperiment(env.win, 'disable-a4a-non-sd', false, true);
+    attachShadowStub.value(undefined);
+    const fallbackSpy = env.sandbox.spy(a4a, 'handleFallback_');
+    env.sandbox.stub(a4a, 'skipClientSideValidation').returns(false);
+    await a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    await a4a.adPromise_;
+    expect(fallbackSpy).to.not.be.called;
+  });
+});
+
+describes.realWin('amp-a4a', {amp: true}, (env) => {
   const IFRAME_SANDBOXING_FLAGS = [
     'allow-forms',
     'allow-modals',
@@ -86,18 +314,15 @@ describe('amp-a4a', () => {
 
   beforeEach(() => {
     fetchMock = null;
-    getSigningServiceNamesMock = window.sandbox.stub(
+    getSigningServiceNamesMock = env.sandbox.stub(
       AmpA4A.prototype,
       'getSigningServiceNames'
     );
-    onCreativeRenderSpy = window.sandbox.spy(
-      AmpA4A.prototype,
-      'onCreativeRender'
-    );
+    onCreativeRenderSpy = env.sandbox.spy(AmpA4A.prototype, 'onCreativeRender');
     getSigningServiceNamesMock.returns(['google']);
-    whenVisibleMock = window.sandbox.stub(AmpDoc.prototype, 'whenFirstVisible');
+    whenVisibleMock = env.sandbox.stub(AmpDoc.prototype, 'whenFirstVisible');
     whenVisibleMock.returns(Promise.resolve());
-    getResourceStub = window.sandbox.stub(AmpA4A.prototype, 'getResource');
+    getResourceStub = env.sandbox.stub(AmpA4A.prototype, 'getResource');
     getResourceStub.returns({
       getUpgradeDelayMs: () => 12345,
     });
@@ -115,7 +340,7 @@ describe('amp-a4a', () => {
       fetchMock./*OK*/ restore();
       fetchMock = null;
     }
-    resetScheduledElementForTesting(window, 'amp-a4a');
+    resetScheduledElementForTesting(env.win, 'amp-a4a');
   });
 
   /**
@@ -142,6 +367,16 @@ describe('amp-a4a', () => {
     const ampStyle = doc.createElement('style');
     ampStyle.setAttribute('amp-runtime', 'scratch-fortesting');
     doc.head.appendChild(ampStyle);
+
+    // Emulate native shadow DOM support. Will be reverted for some tests.
+    const attachShadowStub = env.sandbox.stub(
+      fixture.win.Element.prototype,
+      'attachShadow'
+    );
+    attachShadowStub.value(function () {
+      return '[native code]';
+    });
+    return {attachShadowStub};
   }
 
   /**
@@ -155,6 +390,7 @@ describe('amp-a4a', () => {
       'height': opt_rect ? String(opt_rect.height) : '50',
       'type': 'adsense',
     });
+    const layoutBox = opt_rect || layoutRectLtwh(0, 0, 200, 50);
     element.getAmpDoc = () => {
       const ampdocService = Services.ampdocServiceFor(doc.defaultView);
       return ampdocService.getAmpDoc(element);
@@ -162,14 +398,16 @@ describe('amp-a4a', () => {
     element.isBuilt = () => {
       return true;
     };
-    element.getLayoutBox = () => {
-      return opt_rect || layoutRectLtwh(0, 0, 200, 50);
-    };
-    element.getPageLayoutBox = () => {
-      return element.getLayoutBox.apply(element, arguments);
-    };
+    element.getLayout = () => 'fixed';
+    element.getLayoutBox = () => layoutBox;
+    element.getLayoutSize = () => layoutSizeFromRect(layoutBox);
     element.getIntersectionChangeEntry = () => {
-      return null;
+      return {
+        time: null,
+        boundingClientRect: {},
+        rootBounds: {},
+        intersectionRect: {},
+      };
     };
     const signals = new Signals();
     element.signals = () => signals;
@@ -212,9 +450,7 @@ describe('amp-a4a', () => {
     expect(element.querySelector('iframe[src]')).to.not.be.ok;
     const friendlyChild = element.querySelector('iframe[srcdoc]');
     expect(friendlyChild).to.be.ok;
-    expect(friendlyChild.getAttribute('srcdoc')).to.have.string(
-      '<html ⚡4ads>'
-    );
+    expect(friendlyChild.getAttribute('srcdoc')).to.have.string('<html ⚡4ads');
     expect(element).to.be.visible;
     expect(friendlyChild).to.be.visible;
   }
@@ -341,7 +577,7 @@ describe('amp-a4a', () => {
       .concat(additionalEvents)
       .forEach((evnt) =>
         expect(triggerAnalyticsEventSpy).to.be.calledWith(a4a.element, evnt, {
-          'time': window.sandbox.match.number,
+          'time': env.sandbox.match.number,
         })
       );
   }
@@ -366,12 +602,13 @@ describe('amp-a4a', () => {
 
     it('for SafeFrame rendering case', async () => {
       // Make sure there's no signature, so that we go down the 3p iframe path.
+      adResponse.body = adResponse.body.replace('⚡4ads', '');
       delete adResponse.headers['AMP-Fast-Fetch-Signature'];
       delete adResponse.headers[AMP_SIGNATURE_HEADER];
       // If rendering type is safeframe, we SHOULD attach a SafeFrame.
       adResponse.headers[RENDERING_TYPE_HEADER] = 'safeframe';
       a4a.buildCallback();
-      const lifecycleEventStub = window.sandbox.stub(
+      const lifecycleEventStub = env.sandbox.stub(
         a4a,
         'maybeTriggerAnalyticsEvent_'
       );
@@ -386,9 +623,10 @@ describe('amp-a4a', () => {
 
     it('for ios defaults to SafeFrame rendering', async () => {
       const platform = Services.platformFor(fixture.win);
-      window.sandbox.stub(platform, 'isIos').returns(true);
+      env.sandbox.stub(platform, 'isIos').returns(true);
       a4a = new MockA4AImpl(a4aElement);
       // Make sure there's no signature, so that we go down the 3p iframe path.
+      adResponse.body = adResponse.body.replace('⚡4ads', '');
       delete adResponse.headers['AMP-Fast-Fetch-Signature'];
       delete adResponse.headers[AMP_SIGNATURE_HEADER];
       // Ensure no rendering type header (ios on safari will default to
@@ -406,6 +644,7 @@ describe('amp-a4a', () => {
 
     it('for cached content iframe rendering case', async () => {
       // Make sure there's no signature, so that we go down the 3p iframe path.
+      adResponse.body = adResponse.body.replace('⚡4ads', '');
       delete adResponse.headers['AMP-Fast-Fetch-Signature'];
       delete adResponse.headers[AMP_SIGNATURE_HEADER];
       a4a.buildCallback();
@@ -443,7 +682,7 @@ describe('amp-a4a', () => {
     });
 
     it('detachedCallback should destroy FIE and detach frame', async () => {
-      const fieDestroySpy = window.sandbox./*OK*/ spy(
+      const fieDestroySpy = env.sandbox./*OK*/ spy(
         FriendlyIframeEmbed.prototype,
         'destroy'
       );
@@ -456,11 +695,15 @@ describe('amp-a4a', () => {
     });
 
     it('for A4A layout should resolve once FIE is created', async () => {
+      // This test calls renderAmpCreative before onlayoutMeasure has
+      // populated adUrl_. This cannot happen in real world because rendering
+      // is blocked by A4A.adPromise_.
+      a4a.adUrl_ = 'https://adnetwork.com';
       a4a.buildCallback();
       a4a.onLayoutMeasure();
 
       // Never resolve
-      window.sandbox
+      env.sandbox
         ./*OK*/ stub(FriendlyIframeEmbed.prototype, 'whenIniLoaded')
         .callsFake(() => {
           return new Promise(() => {});
@@ -477,11 +720,11 @@ describe('amp-a4a', () => {
       const iniLoadPromise = new Promise((resolve) => {
         iniLoadResolver = resolve;
       });
-      const whenIniLoadedStub = window.sandbox
+      const whenIniLoadedStub = env.sandbox
         .stub(FriendlyIframeEmbed.prototype, 'whenIniLoaded')
         .callsFake(() => iniLoadPromise);
       a4a.buildCallback();
-      const triggerAnalyticsEventSpy = window.sandbox.spy(
+      const triggerAnalyticsEventSpy = env.sandbox.spy(
         analytics,
         'triggerAnalyticsEvent'
       );
@@ -493,26 +736,12 @@ describe('amp-a4a', () => {
       verifyA4aAnalyticsTriggersWereFired(a4a, triggerAnalyticsEventSpy);
     });
 
-    it('should update embed visibility', async () => {
-      window.sandbox.stub(a4a, 'isInViewport').callsFake(() => false);
-      a4a.buildCallback();
-      a4a.onLayoutMeasure();
-      await a4a.layoutCallback();
-      expect(a4a.friendlyIframeEmbed_).to.exist;
-      expect(a4a.friendlyIframeEmbed_.isVisible()).to.be.false;
-
-      a4a.viewportCallback(true);
-      expect(a4a.friendlyIframeEmbed_.isVisible()).to.be.true;
-
-      a4a.viewportCallback(false);
-      expect(a4a.friendlyIframeEmbed_.isVisible()).to.be.false;
-
-      a4a.viewportCallback(true);
-      expect(a4a.friendlyIframeEmbed_.isVisible()).to.be.true;
-    });
-
     it('for requests from insecure HTTP pages', async () => {
-      window.sandbox
+      // TODO(ccordry): delete this test when we remove crypto.
+      if (NO_SIGNING_RTV) {
+        return;
+      }
+      env.sandbox
         .stub(Services.cryptoFor(fixture.win), 'isPkcsAvailable')
         .returns(false);
       a4a.buildCallback();
@@ -525,13 +754,13 @@ describe('amp-a4a', () => {
     });
 
     it('should fire amp-analytics triggers', async () => {
-      const triggerAnalyticsEventSpy = window.sandbox.spy(
+      const triggerAnalyticsEventSpy = env.sandbox.spy(
         analytics,
         'triggerAnalyticsEvent'
       );
       a4a.buildCallback();
       a4a.onLayoutMeasure();
-      window.sandbox
+      env.sandbox
         ./*OK*/ stub(FriendlyIframeEmbed.prototype, 'whenIniLoaded')
         .callsFake(() => Promise.resolve());
       await a4a.layoutCallback();
@@ -539,11 +768,11 @@ describe('amp-a4a', () => {
     });
 
     it('should not fire amp-analytics triggers without config', async () => {
-      window.sandbox
+      env.sandbox
         .stub(MockA4AImpl.prototype, 'getA4aAnalyticsConfig')
         .callsFake(() => null);
       a4a = new MockA4AImpl(a4aElement);
-      const triggerAnalyticsEventSpy = window.sandbox.spy(
+      const triggerAnalyticsEventSpy = env.sandbox.spy(
         analytics,
         'triggerAnalyticsEvent'
       );
@@ -554,11 +783,11 @@ describe('amp-a4a', () => {
     });
 
     it('should insert an amp-analytics element', async () => {
-      window.sandbox
+      env.sandbox
         .stub(MockA4AImpl.prototype, 'getA4aAnalyticsConfig')
         .callsFake(() => ({'foo': 'bar'}));
       a4a = new MockA4AImpl(a4aElement);
-      const insertAnalyticsElementSpy = window.sandbox.spy(
+      const insertAnalyticsElementSpy = env.sandbox.spy(
         analyticsExtension,
         'insertAnalyticsElement'
       );
@@ -571,11 +800,11 @@ describe('amp-a4a', () => {
     });
 
     it('should not insert an amp-analytics element if config is null', () => {
-      window.sandbox
+      env.sandbox
         .stub(MockA4AImpl.prototype, 'getA4aAnalyticsConfig')
         .callsFake(() => null);
       a4a = new MockA4AImpl(a4aElement);
-      const insertAnalyticsElementSpy = window.sandbox.spy(
+      const insertAnalyticsElementSpy = env.sandbox.spy(
         analyticsExtension,
         'insertAnalyticsElement'
       );
@@ -611,7 +840,7 @@ describe('amp-a4a', () => {
       });
       const layoutCallbackPromise = a4a.layoutCallback();
       a4a.unlayoutCallback();
-      const renderNonAmpCreativeSpy = window.sandbox.spy(
+      const renderNonAmpCreativeSpy = env.sandbox.spy(
         AmpA4A.prototype,
         'renderNonAmpCreative'
       );
@@ -654,6 +883,7 @@ describe('amp-a4a', () => {
     let a4a;
     beforeEach(async () => {
       // Make sure there's no signature, so that we go down the 3p iframe path.
+      adResponse.body = adResponse.body.replace('⚡4ads', '');
       delete adResponse.headers['AMP-Fast-Fetch-Signature'];
       delete adResponse.headers[AMP_SIGNATURE_HEADER];
       // If rendering type is safeframe, we SHOULD attach a SafeFrame.
@@ -669,8 +899,6 @@ describe('amp-a4a', () => {
       a4aElement = createA4aElement(doc);
       a4a = new MockA4AImpl(a4aElement);
       a4a.releaseType_ = '0';
-      a4a.createdCallback();
-      a4a.firstAttachedCallback();
       a4a.buildCallback();
       expect(onCreativeRenderSpy).to.not.be.called;
     });
@@ -724,7 +952,7 @@ describe('amp-a4a', () => {
     describe('illegal render mode value', () => {
       let devErrLogStub;
       beforeEach(() => {
-        devErrLogStub = window.sandbox.stub(dev(), 'error');
+        devErrLogStub = env.sandbox.stub(dev(), 'error');
         // If rendering type is unknown, should fall back to cached content
         // iframe and generate an error.
         adResponse.headers[RENDERING_TYPE_HEADER] = 'random illegal value';
@@ -732,7 +960,7 @@ describe('amp-a4a', () => {
       });
 
       it('should render via cached iframe', async () => {
-        const triggerAnalyticsEventSpy = window.sandbox.spy(
+        const triggerAnalyticsEventSpy = env.sandbox.spy(
           analytics,
           'triggerAnalyticsEvent'
         );
@@ -752,7 +980,7 @@ describe('amp-a4a', () => {
       });
 
       it('should fire amp-analytics triggers for illegal render modes', async () => {
-        const triggerAnalyticsEventSpy = window.sandbox.spy(
+        const triggerAnalyticsEventSpy = env.sandbox.spy(
           analytics,
           'triggerAnalyticsEvent'
         );
@@ -810,9 +1038,9 @@ describe('amp-a4a', () => {
 
       ['', 'client_cache', 'safeframe', 'some_random_thing'].forEach(
         (headerVal) => {
-          // TODO(wg-ads, #25690): Fails on Travis.
+          // TODO(wg-monetization, #25690): Fails on CI.
           it.skip(`should not attach a NameFrame when header is ${headerVal}`, async () => {
-            const devStub = window.sandbox.stub(dev(), 'error');
+            const devStub = env.sandbox.stub(dev(), 'error');
             // Make sure there's no signature, so that we go down the 3p
             // iframe path.
             delete adResponse.headers['AMP-Fast-Fetch-Signature'];
@@ -847,7 +1075,7 @@ describe('amp-a4a', () => {
       );
 
       it('should fire amp-analytics triggers for lifecycle stages', async () => {
-        const triggerAnalyticsEventSpy = window.sandbox.spy(
+        const triggerAnalyticsEventSpy = env.sandbox.spy(
           analytics,
           'triggerAnalyticsEvent'
         );
@@ -921,7 +1149,7 @@ describe('amp-a4a', () => {
       ['', 'client_cache', 'nameframe', 'some_random_thing'].forEach(
         (headerVal) => {
           it(`should not attach a SafeFrame when header is ${headerVal}`, async () => {
-            const devStub = window.sandbox.stub(dev(), 'error');
+            const devStub = env.sandbox.stub(dev(), 'error');
             // If rendering type is anything but safeframe, we SHOULD NOT
             // attach a SafeFrame.
             adResponse.headers[RENDERING_TYPE_HEADER] = headerVal;
@@ -966,7 +1194,7 @@ describe('amp-a4a', () => {
       });
 
       it('should fire amp-analytics triggers for lifecycle stages', async () => {
-        const triggerAnalyticsEventSpy = window.sandbox.spy(
+        const triggerAnalyticsEventSpy = env.sandbox.spy(
           analytics,
           'triggerAnalyticsEvent'
         );
@@ -1027,7 +1255,7 @@ describe('amp-a4a', () => {
           const friendlyChild = a4aElement.querySelector('iframe[srcdoc]');
           expect(friendlyChild).to.be.ok;
           expect(friendlyChild.getAttribute('srcdoc')).to.have.string(
-            '<html ⚡4ads>'
+            '<html ⚡4ads'
           );
         }
       );
@@ -1036,6 +1264,7 @@ describe('amp-a4a', () => {
 
   it('should set height/width on iframe matching header value', async () => {
     // Make sure there's no signature, so that we go down the 3p iframe path.
+    adResponse.body = adResponse.body.replace('⚡4ads', '');
     delete adResponse.headers['AMP-Fast-Fetch-Signature'];
     delete adResponse.headers[AMP_SIGNATURE_HEADER];
     adResponse.headers['X-CreativeSize'] = '320x50';
@@ -1063,9 +1292,69 @@ describe('amp-a4a', () => {
     expect(child.getAttribute('height')).to.equal('50');
   });
 
+  it('should set a default title on the iframe', async () => {
+    // Make sure there's no signature, so that we go down the 3p iframe path.
+    adResponse.body = adResponse.body.replace('⚡4ads', '');
+    delete adResponse.headers['AMP-Fast-Fetch-Signature'];
+    delete adResponse.headers[AMP_SIGNATURE_HEADER];
+    adResponse.headers['X-CreativeSize'] = '320x50';
+    const fixture = await createIframePromise();
+    setupForAdTesting(fixture);
+    fetchMock.getOnce(
+      TEST_URL + '&__amp_source_origin=about%3Asrcdoc',
+      () => adResponse,
+      {name: 'ad'}
+    );
+    const {doc} = fixture;
+    const a4aElement = createA4aElement(doc);
+    a4aElement.setAttribute('width', 480);
+    a4aElement.setAttribute('height', 75);
+    a4aElement.setAttribute('type', 'doubleclick');
+    const a4a = new MockA4AImpl(a4aElement);
+    doc.body.appendChild(a4aElement);
+    a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    const renderPromise = a4a.layoutCallback();
+    await renderPromise;
+    const child = a4aElement.querySelector('iframe[name]');
+    expect(child).to.be.ok;
+    expect(child.getAttribute('title')).to.equal('3rd party ad content');
+  });
+
+  it('should use the amp-ad title on the iframe if set', async () => {
+    // Make sure there's no signature, so that we go down the 3p iframe path.
+    adResponse.body = adResponse.body.replace('⚡4ads', '');
+    delete adResponse.headers['AMP-Fast-Fetch-Signature'];
+    delete adResponse.headers[AMP_SIGNATURE_HEADER];
+    adResponse.headers['X-CreativeSize'] = '320x50';
+    const fixture = await createIframePromise();
+    setupForAdTesting(fixture);
+    fetchMock.getOnce(
+      TEST_URL + '&__amp_source_origin=about%3Asrcdoc',
+      () => adResponse,
+      {name: 'ad'}
+    );
+    const {doc} = fixture;
+    const a4aElement = createA4aElement(doc);
+    a4aElement.setAttribute('width', 480);
+    a4aElement.setAttribute('height', 75);
+    a4aElement.setAttribute('type', 'doubleclick');
+    a4aElement.setAttribute('title', 'Custom title');
+    const a4a = new MockA4AImpl(a4aElement);
+    doc.body.appendChild(a4aElement);
+    a4a.buildCallback();
+    a4a.onLayoutMeasure();
+    const renderPromise = a4a.layoutCallback();
+    await renderPromise;
+    const child = a4aElement.querySelector('iframe[name]');
+    expect(child).to.be.ok;
+    expect(child.getAttribute('title')).to.equal('Custom title');
+  });
+
   describe('#onLayoutMeasure', () => {
     it('resumeCallback calls onLayoutMeasure', async () => {
       // Force non-FIE
+      adResponse.body = adResponse.body.replace('⚡4ads', '');
       delete adResponse.headers['AMP-Fast-Fetch-Signature'];
       delete adResponse.headers[AMP_SIGNATURE_HEADER];
       const fixture = await createIframePromise();
@@ -1081,7 +1370,7 @@ describe('amp-a4a', () => {
       s.textContent = '.fixed {position:fixed;}';
       doc.head.appendChild(s);
       const a4a = new MockA4AImpl(a4aElement);
-      const renderNonAmpCreativeSpy = window.sandbox.spy(
+      const renderNonAmpCreativeSpy = env.sandbox.spy(
         a4a,
         'renderNonAmpCreative'
       );
@@ -1098,11 +1387,11 @@ describe('amp-a4a', () => {
         'hasBeenMeasured': () => true,
         'isMeasureRequested': () => false,
       });
-      const onLayoutMeasureSpy = window.sandbox.spy(a4a, 'onLayoutMeasure');
+      const onLayoutMeasureSpy = env.sandbox.spy(a4a, 'onLayoutMeasure');
       a4a.resumeCallback();
       expect(onLayoutMeasureSpy).to.be.calledOnce;
-      expect(a4a.fromResumeCallback).to.be.true;
     });
+
     it('resumeCallback does not call onLayoutMeasure for FIE', async () => {
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
@@ -1117,9 +1406,9 @@ describe('amp-a4a', () => {
       s.textContent = '.fixed {position:fixed;}';
       doc.head.appendChild(s);
       const a4a = new MockA4AImpl(a4aElement);
-      const renderAmpCreativeSpy = window.sandbox.spy(
+      const renderAmpCreativeSpy = env.sandbox.spy(
         a4a,
-        'renderAmpCreative_'
+        NO_SIGNING_RTV ? 'renderFriendlyTrustless_' : 'renderAmpCreative_'
       );
       a4a.buildCallback();
       a4a.onLayoutMeasure();
@@ -1129,14 +1418,15 @@ describe('amp-a4a', () => {
         renderAmpCreativeSpy.calledOnce,
         'renderAmpCreative_ called exactly once'
       ).to.be.true;
-      window.sandbox.stub(a4a, 'unlayoutCallback').callsFake(() => false);
-      const onLayoutMeasureSpy = window.sandbox.spy(a4a, 'onLayoutMeasure');
+      env.sandbox.stub(a4a, 'unlayoutCallback').callsFake(() => false);
+      const onLayoutMeasureSpy = env.sandbox.spy(a4a, 'onLayoutMeasure');
       a4a.resumeCallback();
       expect(onLayoutMeasureSpy).to.not.be.called;
-      expect(a4a.fromResumeCallback).to.be.false;
     });
+
     it('resumeCallback w/ measure required no onLayoutMeasure', async () => {
       // Force non-FIE
+      adResponse.body = adResponse.body.replace('⚡4ads', '');
       delete adResponse.headers['AMP-Fast-Fetch-Signature'];
       delete adResponse.headers[AMP_SIGNATURE_HEADER];
       const fixture = await createIframePromise();
@@ -1152,7 +1442,7 @@ describe('amp-a4a', () => {
       s.textContent = '.fixed {position:fixed;}';
       doc.head.appendChild(s);
       const a4a = new MockA4AImpl(a4aElement);
-      const renderNonAmpCreativeSpy = window.sandbox.spy(
+      const renderNonAmpCreativeSpy = env.sandbox.spy(
         a4a,
         'renderNonAmpCreative'
       );
@@ -1165,13 +1455,17 @@ describe('amp-a4a', () => {
         'renderNonAmpCreative called exactly once'
       ).to.be.true;
       a4a.unlayoutCallback();
-      const onLayoutMeasureSpy = window.sandbox.spy(a4a, 'onLayoutMeasure');
+      const onLayoutMeasureSpy = env.sandbox.spy(a4a, 'onLayoutMeasure');
       getResourceStub.returns({'hasBeenMeasured': () => false});
       a4a.resumeCallback();
       expect(onLayoutMeasureSpy).to.not.be.called;
-      expect(a4a.fromResumeCallback).to.be.true;
     });
+
     it('should run end-to-end and render in friendly iframe', async () => {
+      // TODO(ccordry): delete this test when no signing launches.
+      if (NO_SIGNING_RTV) {
+        return;
+      }
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
       fetchMock.getOnce(
@@ -1181,32 +1475,32 @@ describe('amp-a4a', () => {
       );
       const {doc} = fixture;
       const a4aElement = createA4aElement(doc);
+      a4aElement.setAttribute('rtc-config', true);
       const a4a = new MockA4AImpl(a4aElement);
       a4a.releaseType_ = '0';
-      const getAdUrlSpy = window.sandbox.spy(a4a, 'getAdUrl');
+      const getAdUrlSpy = env.sandbox.spy(a4a, 'getAdUrl');
       const rtcResponse = Promise.resolve([
         {response: 'a', rtcTime: 1, callout: 'https://a.com'},
       ]);
-      const maybeExecuteRealTimeConfigStub = window.sandbox
+
+      installRealTimeConfigServiceForDoc(doc);
+      const maybeExecuteRealTimeConfigStub = env.sandbox
         .stub()
         .returns(rtcResponse);
-      AMP.RealTimeConfigManager = RealTimeConfigManager;
-      window.sandbox
-        .stub(AMP.RealTimeConfigManager.prototype, 'maybeExecuteRealTimeConfig')
+      const rtc = await Services.realTimeConfigForDoc(doc);
+      env.sandbox
+        .stub(rtc, 'maybeExecuteRealTimeConfig')
         .callsFake(maybeExecuteRealTimeConfigStub);
-      const tryExecuteRealTimeConfigSpy = window.sandbox.spy(
+      const tryExecuteRealTimeConfigSpy = env.sandbox.spy(
         a4a,
         'tryExecuteRealTimeConfig_'
       );
-      const updateLayoutPriorityStub = window.sandbox.stub(
+      const updateLayoutPriorityStub = env.sandbox.stub(
         a4a,
         'updateLayoutPriority'
       );
-      const renderAmpCreativeSpy = window.sandbox.spy(
-        a4a,
-        'renderAmpCreative_'
-      );
-      const preloadExtensionSpy = window.sandbox.spy(
+      const renderAmpCreativeSpy = env.sandbox.spy(a4a, 'renderAmpCreative_');
+      const preloadExtensionSpy = env.sandbox.spy(
         Extensions.prototype,
         'preloadExtension'
       );
@@ -1219,11 +1513,26 @@ describe('amp-a4a', () => {
       expect(a4a.isVerifiedAmpCreative()).to.be.true;
       expect(tryExecuteRealTimeConfigSpy.calledOnce).to.be.true;
       expect(maybeExecuteRealTimeConfigStub.calledOnce).to.be.true;
-      expect(maybeExecuteRealTimeConfigStub.calledWith({}, null)).to.be.true;
+      expect(
+        maybeExecuteRealTimeConfigStub.calledWith(
+          a4aElement,
+          {},
+          null,
+          null,
+          null,
+          env.sandbox.match.any
+        )
+      ).to.be.true;
       expect(getAdUrlSpy.calledOnce, 'getAdUrl called exactly once').to.be.true;
       expect(
         getAdUrlSpy.calledWith(
-          {consentState: null, consentString: null, gdprApplies: null},
+          {
+            consentState: null,
+            consentString: null,
+            gdprApplies: null,
+            consentStringType: null,
+            additionalConsent: null,
+          },
           rtcResponse
         )
       ).to.be.true;
@@ -1268,16 +1577,110 @@ describe('amp-a4a', () => {
         )
       ).to.be.ok;
       expect(doc.querySelector('script[src*="amp-font-0.1"]')).to.be.ok;
-      expect(onCreativeRenderSpy.withArgs(window.sandbox.match.object)).to.be
+      expect(onCreativeRenderSpy.withArgs(env.sandbox.match.object)).to.be
         .calledOnce;
       expect(updateLayoutPriorityStub).to.be.calledOnce;
       expect(updateLayoutPriorityStub.args[0][0]).to.equal(
         LayoutPriority.CONTENT
       );
     });
+
+    it('should fallback to non-AMP creative if shadow dom not supported', async () => {
+      const fixture = await createIframePromise();
+      const {attachShadowStub} = setupForAdTesting(fixture);
+
+      // Remove attachShadow.
+      attachShadowStub.value(undefined);
+      toggleExperiment(fixture.win, 'disable-a4a-non-sd', true, true);
+
+      fetchMock.getOnce(
+        TEST_URL + '&__amp_source_origin=about%3Asrcdoc',
+        () => adResponse,
+        {name: 'ad'}
+      );
+      const {doc} = fixture;
+      const a4aElement = createA4aElement(doc);
+      a4aElement.setAttribute('rtc-config', true);
+      const a4a = new MockA4AImpl(a4aElement);
+      const rtcResponse = Promise.resolve([
+        {response: 'a', rtcTime: 1, callout: 'https://a.com'},
+      ]);
+
+      installRealTimeConfigServiceForDoc(doc);
+      const maybeExecuteRealTimeConfigStub = env.sandbox
+        .stub()
+        .returns(rtcResponse);
+      const rtc = await Services.realTimeConfigForDoc(doc);
+      env.sandbox
+        .stub(rtc, 'maybeExecuteRealTimeConfig')
+        .callsFake(maybeExecuteRealTimeConfigStub);
+      const renderAmpCreativeSpy = env.sandbox.spy(a4a, 'renderAmpCreative_');
+      const renderNonAmpCreativeSpy = env.sandbox.spy(
+        a4a,
+        'renderNonAmpCreative'
+      );
+
+      a4a.buildCallback();
+      a4a.onLayoutMeasure();
+      await a4a.layoutCallback();
+      expect(renderAmpCreativeSpy).to.not.be.called;
+      expect(renderNonAmpCreativeSpy).to.be.calledOnce;
+      expect(a4aElement.getElementsByTagName('iframe').length).to.equal(1);
+      expect(a4aElement.querySelector('iframe[src]')).to.exist;
+      expect(a4aElement.querySelector('iframe[srcdoc]')).to.be.null;
+    });
+
+    it('should fallback to non-AMP creative if shadow dom is polyfilled', async () => {
+      const fixture = await createIframePromise();
+      const {attachShadowStub} = setupForAdTesting(fixture);
+
+      // Emulate polyfill.
+      attachShadowStub.value(function () {
+        return null;
+      });
+      toggleExperiment(fixture.win, 'disable-a4a-non-sd', true, true);
+
+      fetchMock.getOnce(
+        TEST_URL + '&__amp_source_origin=about%3Asrcdoc',
+        () => adResponse,
+        {name: 'ad'}
+      );
+      const {doc} = fixture;
+      const a4aElement = createA4aElement(doc);
+      a4aElement.setAttribute('rtc-config', true);
+      const a4a = new MockA4AImpl(a4aElement);
+      const rtcResponse = Promise.resolve([
+        {response: 'a', rtcTime: 1, callout: 'https://a.com'},
+      ]);
+
+      installRealTimeConfigServiceForDoc(doc);
+      const maybeExecuteRealTimeConfigStub = env.sandbox
+        .stub()
+        .returns(rtcResponse);
+      const rtc = await Services.realTimeConfigForDoc(doc);
+      env.sandbox
+        .stub(rtc, 'maybeExecuteRealTimeConfig')
+        .callsFake(maybeExecuteRealTimeConfigStub);
+      const renderAmpCreativeSpy = env.sandbox.spy(a4a, 'renderAmpCreative_');
+      const renderNonAmpCreativeSpy = env.sandbox.spy(
+        a4a,
+        'renderNonAmpCreative'
+      );
+
+      a4a.buildCallback();
+      a4a.onLayoutMeasure();
+      await a4a.layoutCallback();
+      expect(renderAmpCreativeSpy).to.not.be.called;
+      expect(renderNonAmpCreativeSpy).to.be.calledOnce;
+      expect(a4aElement.getElementsByTagName('iframe').length).to.equal(1);
+      expect(a4aElement.querySelector('iframe[src]')).to.exist;
+      expect(a4aElement.querySelector('iframe[srcdoc]')).to.be.null;
+    });
+
     it('should update priority for non AMP if in experiment', async () => {
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
+      adResponse.body = adResponse.body.replace('⚡4ads', '');
       delete adResponse.headers['AMP-Fast-Fetch-Signature'];
       delete adResponse.headers[AMP_SIGNATURE_HEADER];
       adResponse.headers[EXPERIMENT_FEATURE_HEADER_NAME] =
@@ -1291,18 +1694,24 @@ describe('amp-a4a', () => {
       const element = createA4aElement(fixture.doc);
       element.setAttribute('type', 'adsense');
       const a4a = new MockA4AImpl(element);
-      const updateLayoutPriorityStub = window.sandbox.stub(
+      const updateLayoutPriorityStub = env.sandbox.stub(
         a4a,
         'updateLayoutPriority'
       );
-      const renderNonAmpCreativeSpy = window.sandbox.spy(
+      const renderNonAmpCreativeSpy = env.sandbox.spy(
         a4a,
         'renderNonAmpCreative'
       );
-      window.sandbox
+      env.sandbox
         .stub(a4a, 'maybeValidateAmpCreative')
         .returns(Promise.resolve());
       a4a.onLayoutMeasure();
+      a4a.uiHandler = {
+        getScrollPromiseForStickyAd: () => Promise.resolve(null),
+        isStickyAd: () => false,
+        maybeInitStickyAd: () => {},
+      };
+      await a4a.buildCallback();
       await a4a.layoutCallback();
       expect(
         renderNonAmpCreativeSpy.calledOnce,
@@ -1313,9 +1722,14 @@ describe('amp-a4a', () => {
       );
       expect(is3pThrottled(a4a.win)).to.be.false;
     });
+
     // TODO (keithwrightbos) - move into above e2e once signed creative with
     // image within creative can be regenerated.
     it('should prefetch amp images', async () => {
+      // TODO(ccordry): delete this test when launched.
+      if (NO_SIGNING_RTV) {
+        return;
+      }
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
       fetchMock.getOnce(
@@ -1326,7 +1740,7 @@ describe('amp-a4a', () => {
       const {doc} = fixture;
       const a4aElement = createA4aElement(doc);
       const a4a = new MockA4AImpl(a4aElement);
-      window.sandbox.stub(a4a, 'getAmpAdMetadata').callsFake((creative) => {
+      env.sandbox.stub(a4a, 'getAmpAdMetadata').callsFake((creative) => {
         const metaData = AmpA4A.prototype.getAmpAdMetadata.call(a4a, creative);
         metaData.images = [
           'https://prefetch.me.com?a=b',
@@ -1354,6 +1768,7 @@ describe('amp-a4a', () => {
         )
       ).to.not.be.ok;
     });
+
     it('must not be position:fixed', async () => {
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
@@ -1372,6 +1787,7 @@ describe('amp-a4a', () => {
       a4a.onLayoutMeasure();
       expect(a4a.adPromise_).to.not.be.ok;
     });
+
     it('does not initialize promise chain 0 height/width', async () => {
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
@@ -1398,6 +1814,7 @@ describe('amp-a4a', () => {
       a4a.onLayoutMeasure();
       expect(a4a.adPromise_).to.be.ok;
     });
+
     it('does not initialize promise chain when hidden by media query', async () => {
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
@@ -1419,6 +1836,7 @@ describe('amp-a4a', () => {
       a4a.onLayoutMeasure();
       expect(a4a.adPromise_).to.be.ok;
     });
+
     it('does not initialize promise chain when has attribute "hidden"', async () => {
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
@@ -1459,20 +1877,25 @@ describe('amp-a4a', () => {
       const {doc} = fixture;
       const a4aElement = createA4aElement(doc);
       const a4a = new MockA4AImpl(a4aElement);
-      const getAdUrlSpy = window.sandbox.spy(a4a, 'getAdUrl');
-      const updateLayoutPriorityStub = window.sandbox.stub(
+      const getAdUrlSpy = env.sandbox.spy(a4a, 'getAdUrl');
+      const updateLayoutPriorityStub = env.sandbox.stub(
         a4a,
         'updateLayoutPriority'
       );
       if (!isValidCreative) {
+        adResponse.body = adResponse.body.replace('⚡4ads', '');
         delete adResponse.headers['AMP-Fast-Fetch-Signature'];
         delete adResponse.headers[AMP_SIGNATURE_HEADER];
       }
       a4a.promiseErrorHandler_ = () => {};
       if (opt_failAmpRender) {
-        window.sandbox
+        // TODO(ccordry): remove renderAmpCreative_ when no signing launched.
+        env.sandbox
           .stub(a4a, 'renderAmpCreative_')
           .returns(Promise.reject('amp render failure'));
+        env.sandbox
+          .stub(a4a, 'renderFriendlyTrustless_')
+          .returns(Promise.reject('amp render failure'));
       }
       a4a.buildCallback();
       a4a.onLayoutMeasure();
@@ -1483,7 +1906,8 @@ describe('amp-a4a', () => {
       expect(a4a.isVerifiedAmpCreative()).to.equal(isValidCreative);
       if (isValidCreative) {
         expect(promiseResult).to.be.ok;
-        expect(promiseResult.minifiedCreative).to.be.ok;
+        // TODO(ccordry): delete this check when launched.
+        !NO_SIGNING_RTV && !expect(promiseResult.minifiedCreative).to.be.ok;
       } else {
         expect(promiseResult).to.not.be.ok;
       }
@@ -1492,7 +1916,7 @@ describe('amp-a4a', () => {
       const iframe = a4aElement.getElementsByTagName('iframe')[0];
       if (isValidCreative && !opt_failAmpRender) {
         expect(iframe.getAttribute('src')).to.be.null;
-        expect(onCreativeRenderSpy.withArgs(window.sandbox.match.object)).to.be
+        expect(onCreativeRenderSpy.withArgs(env.sandbox.match.object)).to.be
           .calledOnce;
         expect(updateLayoutPriorityStub).to.be.calledOnce;
         expect(updateLayoutPriorityStub.args[0][0]).to.equal(
@@ -1509,15 +1933,19 @@ describe('amp-a4a', () => {
         }
       }
     }
+
     it('#layoutCallback valid AMP', () => {
       return executeLayoutCallbackTest(true);
     });
+
     it('#layoutCallback not valid AMP', () => {
       return executeLayoutCallbackTest(false);
     });
+
     it('#layoutCallback AMP render fail, recover non-AMP', () => {
       return executeLayoutCallbackTest(true, true);
     });
+
     it('should run end-to-end in the presence of an XHR error', async () => {
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
@@ -1529,8 +1957,8 @@ describe('amp-a4a', () => {
       const {doc} = fixture;
       const a4aElement = createA4aElement(doc);
       const a4a = new MockA4AImpl(a4aElement);
-      const getAdUrlSpy = window.sandbox.spy(a4a, 'getAdUrl');
-      const onNetworkFailureSpy = window.sandbox.spy(a4a, 'onNetworkFailure');
+      const getAdUrlSpy = env.sandbox.spy(a4a, 'getAdUrl');
+      const onNetworkFailureSpy = env.sandbox.spy(a4a, 'onNetworkFailure');
       a4a.buildCallback();
       a4a.onLayoutMeasure();
       expect(a4a.adPromise_).to.be.instanceof(Promise);
@@ -1545,6 +1973,7 @@ describe('amp-a4a', () => {
       expect(iframe).to.be.visible;
       expect(onCreativeRenderSpy.withArgs(null)).to.be.called;
     });
+
     it('should use adUrl from onNetworkFailure', async () => {
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
@@ -1556,11 +1985,11 @@ describe('amp-a4a', () => {
       const {doc} = fixture;
       const a4aElement = createA4aElement(doc);
       const a4a = new MockA4AImpl(a4aElement);
-      const getAdUrlSpy = window.sandbox.spy(a4a, 'getAdUrl');
-      window.sandbox
+      const getAdUrlSpy = env.sandbox.spy(a4a, 'getAdUrl');
+      env.sandbox
         .stub(a4a, 'onNetworkFailure')
         .withArgs(
-          window.sandbox.match(
+          env.sandbox.match(
             (val) =>
               val.message && val.message.indexOf('XHR Failed fetching') == 0
           ),
@@ -1580,6 +2009,7 @@ describe('amp-a4a', () => {
       expect(iframe).to.be.visible;
       expect(onCreativeRenderSpy.withArgs(null)).to.be.called;
     });
+
     it('should not execute frame GET if disabled via onNetworkFailure', async () => {
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
@@ -1592,11 +2022,11 @@ describe('amp-a4a', () => {
       const a4aElement = createA4aElement(doc);
       const a4a = new MockA4AImpl(a4aElement);
       a4a.promiseErrorHandler_ = () => {};
-      const getAdUrlSpy = window.sandbox.spy(a4a, 'getAdUrl');
-      window.sandbox
+      const getAdUrlSpy = env.sandbox.spy(a4a, 'getAdUrl');
+      env.sandbox
         .stub(a4a, 'onNetworkFailure')
         .withArgs(
-          window.sandbox.match(
+          env.sandbox.match(
             (val) =>
               val.message && val.message.indexOf('XHR Failed fetching') == 0
           ),
@@ -1610,6 +2040,7 @@ describe('amp-a4a', () => {
       const iframe = a4aElement.querySelector('iframe');
       expect(iframe).to.not.be.ok;
     });
+
     it('should handle XHR error when resolves before layoutCallback', async () => {
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
@@ -1632,6 +2063,7 @@ describe('amp-a4a', () => {
       expect(iframe).to.be.visible;
       expect(onCreativeRenderSpy.withArgs(null)).to.be.called;
     });
+
     it('should handle XHR error when resolves after layoutCallback', async () => {
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
@@ -1682,7 +2114,10 @@ describe('amp-a4a', () => {
       },
       {
         name: 'no fill header',
-        fn: () => (adResponse.headers['amp-ff-empty-creative'] = ''),
+        fn: () => {
+          adResponse.body = adResponse.body.replace('⚡4ads', '');
+          adResponse.headers['amp-ff-empty-creative'] = '';
+        },
       },
     ].forEach((test) => {
       it(`should collapse ${test.name}`, async () => {
@@ -1698,9 +2133,9 @@ describe('amp-a4a', () => {
         const a4aElement = createA4aElement(doc);
         const a4a = new MockA4AImpl(a4aElement);
         a4a.buildCallback();
-        const forceCollapseSpy = window.sandbox.spy(a4a, 'forceCollapse');
-        const noContentUISpy = window.sandbox.spy();
-        const unlayoutUISpy = window.sandbox.spy();
+        const forceCollapseSpy = env.sandbox.spy(a4a, 'forceCollapse');
+        const noContentUISpy = env.sandbox.spy();
+        const unlayoutUISpy = env.sandbox.spy();
         a4a.uiHandler = {
           applyNoContentUI: () => {
             noContentUISpy();
@@ -1708,9 +2143,12 @@ describe('amp-a4a', () => {
           applyUnlayoutUI: () => {
             unlayoutUISpy();
           },
+          getScrollPromiseForStickyAd: () => Promise.resolve(null),
+          maybeInitStickyAd: () => {},
+          cleanup: () => {},
         };
-        window.sandbox
-          .stub(a4a, 'getLayoutBox')
+        env.sandbox
+          .stub(a4a, 'getLayoutSize')
           .returns({width: 123, height: 456});
         a4a.onLayoutMeasure();
         expect(a4a.adPromise_).to.be.ok;
@@ -1730,7 +2168,7 @@ describe('amp-a4a', () => {
         const attemptChangeSizePromise = new Promise((resolve) => {
           attemptChangeSizeResolver = resolve;
         });
-        window.sandbox
+        env.sandbox
           .stub(AMP.BaseElement.prototype, 'attemptChangeSize')
           .returns(attemptChangeSizePromise);
         a4a.unlayoutCallback();
@@ -1745,6 +2183,7 @@ describe('amp-a4a', () => {
     it('should process safeframe version header properly', async () => {
       adResponse.headers[SAFEFRAME_VERSION_HEADER] = '1-2-3';
       adResponse.headers[RENDERING_TYPE_HEADER] = 'safeframe';
+      adResponse.body = adResponse.body.replace('⚡4ads', '');
       delete adResponse.headers['AMP-Fast-Fetch-Signature'];
       delete adResponse.headers[AMP_SIGNATURE_HEADER];
       const fixture = await createIframePromise();
@@ -1776,6 +2215,7 @@ describe('amp-a4a', () => {
     describe('delay request experiment', () => {
       let getAdUrlSpy;
       let a4a;
+
       beforeEach(async () => {
         const fixture = await createIframePromise();
         setupForAdTesting(fixture);
@@ -1787,58 +2227,66 @@ describe('amp-a4a', () => {
         const {doc} = fixture;
         const a4aElement = createA4aElement(doc);
         a4a = new MockA4AImpl(a4aElement);
-        getAdUrlSpy = window.sandbox.spy(a4a, 'getAdUrl');
+        getAdUrlSpy = env.sandbox.spy(a4a, 'getAdUrl');
       });
+
       it('should delay request until within renderOutsideViewport', async () => {
-        window.sandbox.stub(a4a, 'delayAdRequestEnabled').returns(true);
+        env.sandbox.stub(a4a, 'delayAdRequestEnabled').returns(true);
         let whenWithinViewportResolve;
         getResourceStub.returns({
           getUpgradeDelayMs: () => 1,
           renderOutsideViewport: () => 3,
-          whenWithinViewport: (viewport) => {
-            expect(viewport).to.equal(3);
+        });
+        const whenWithinViewportStub = env.sandbox
+          .stub(a4a, 'whenWithinViewport')
+          .callsFake(() => {
             return new Promise((resolve) => {
               whenWithinViewportResolve = resolve;
             });
-          },
-        });
+          });
         a4a.buildCallback();
         a4a.onLayoutMeasure();
         expect(a4a.adPromise_).to.be.instanceof(Promise);
         // Delay to all getAdUrl to potentially execute.
         await Services.timerFor(a4a.win).promise(1);
         expect(getAdUrlSpy).to.not.be.called;
+        expect(whenWithinViewportStub).to.be.calledOnce.calledWith(3);
         whenWithinViewportResolve();
         await a4a.adPromise_;
         return expect(getAdUrlSpy).to.be.calledOnce;
       });
+
       it('should delay request until numeric value', async () => {
-        window.sandbox.stub(a4a, 'delayAdRequestEnabled').returns(6);
+        env.sandbox.stub(a4a, 'delayAdRequestEnabled').returns(6);
         let whenWithinViewportResolve;
         getResourceStub.returns({
           getUpgradeDelayMs: () => 1,
           renderOutsideViewport: () => 3,
-          whenWithinViewport: (viewport) => {
-            expect(viewport).to.equal(6);
+        });
+        const whenWithinViewportStub = env.sandbox
+          .stub(a4a, 'whenWithinViewport')
+          .callsFake(() => {
             return new Promise((resolve) => {
               whenWithinViewportResolve = resolve;
             });
-          },
-        });
+          });
         a4a.buildCallback();
         a4a.onLayoutMeasure();
         expect(a4a.adPromise_).to.be.instanceof(Promise);
         // Delay to all getAdUrl to potentially execute.
         await Services.timerFor(a4a.win).promise(1);
         expect(getAdUrlSpy).to.not.be.called;
+        expect(whenWithinViewportStub).to.be.calledOnce.calledWith(6);
         whenWithinViewportResolve();
         await a4a.adPromise_;
         return expect(getAdUrlSpy).to.be.calledOnce;
       });
     });
+
     it('should ignore invalid safeframe version header', async () => {
       adResponse.headers[SAFEFRAME_VERSION_HEADER] = 'some-bad-item';
       adResponse.headers[RENDERING_TYPE_HEADER] = 'safeframe';
+      adResponse.body = adResponse.body.replace('⚡4ads', '');
       delete adResponse.headers['AMP-Fast-Fetch-Signature'];
       delete adResponse.headers[AMP_SIGNATURE_HEADER];
       const fixture = await createIframePromise();
@@ -1900,6 +2348,7 @@ describe('amp-a4a', () => {
       a4a = new MockA4AImpl(createA4aElement(fixture.doc));
       return fixture;
     });
+
     it('should parse metadata', () => {
       const actual = a4a.getAmpAdMetadata(buildCreativeString(metaData));
       const expected = Object.assign(metaData, {
@@ -1907,6 +2356,29 @@ describe('amp-a4a', () => {
       });
       expect(actual).to.deep.equal(expected);
     });
+
+    it('should copy over any extensions detail', () => {
+      metaData.extensions = [
+        {
+          'custom-element': 'amp-analytics',
+          'src': 'https://cdn.ampproject.org/v0/amp-analytics-0.1.js',
+        },
+        {
+          'custom-element': 'amp-mustache',
+          'src': 'https://cdn.ampproject.org/v0/amp-mustache-1.0.js',
+        },
+      ];
+      const actual = a4a.getAmpAdMetadata(buildCreativeString(metaData));
+      expect(actual.extensions).to.deep.include({
+        'custom-element': 'amp-analytics',
+        'src': 'https://cdn.ampproject.org/v0/amp-analytics-0.1.js',
+      });
+      expect(actual.extensions).to.deep.include({
+        'custom-element': 'amp-mustache',
+        'src': 'https://cdn.ampproject.org/v0/amp-mustache-1.0.js',
+      });
+    });
+
     // TODO(levitzky) remove the following two tests after metadata bug is
     // fixed.
     it('should parse metadata with wrong opening tag', () => {
@@ -1921,6 +2393,7 @@ describe('amp-a4a', () => {
       };
       expect(actual).to.deep.equal(expected);
     });
+
     it('should return null if metadata opening tag is (truly) wrong', () => {
       const creative = buildCreativeString(metaData).replace(
         '<script type="application/json" amp-ad-metadata>',
@@ -1940,14 +2413,17 @@ describe('amp-a4a', () => {
         )
       ).to.be.null;
     });
+
     it('should return null if invalid extensions', () => {
       metaData.customElementExtensions = 'amp-vine';
       expect(a4a.getAmpAdMetadata(buildCreativeString(metaData))).to.be.null;
     });
+
     it('should return null if non-array stylesheets', () => {
       metaData.customStylesheets = 'https://fonts.googleapis.com/css?foobar';
       expect(a4a.getAmpAdMetadata(buildCreativeString(metaData))).to.be.null;
     });
+
     it('should return null if invalid stylesheet object', () => {
       metaData.customStylesheets = [
         {href: 'https://fonts.googleapis.com/css?foobar'},
@@ -1955,6 +2431,7 @@ describe('amp-a4a', () => {
       ];
       expect(a4a.getAmpAdMetadata(buildCreativeString(metaData))).to.be.null;
     });
+
     it('should not include amp images if not an array', () => {
       metaData.images = 'https://foo.com';
       const actual = a4a.getAmpAdMetadata(buildCreativeString(metaData));
@@ -1965,6 +2442,7 @@ describe('amp-a4a', () => {
       delete expected.images;
       expect(actual).to.deep.equal(expected);
     });
+
     it('should tolerate missing images', () => {
       delete metaData.images;
       const actual = a4a.getAmpAdMetadata(buildCreativeString(metaData));
@@ -1975,6 +2453,7 @@ describe('amp-a4a', () => {
       delete expected.images;
       expect(actual).to.deep.equal(expected);
     });
+
     it('should limit to 5 images', () => {
       while (metaData.images.length < 10) {
         metaData.images.push('https://another.image.com?abc=def');
@@ -2059,6 +2538,7 @@ describe('amp-a4a', () => {
     let a4aElement;
     let a4a;
     let fixture;
+
     beforeEach(async () => {
       fixture = await createIframePromise();
       setupForAdTesting(fixture);
@@ -2067,15 +2547,18 @@ describe('amp-a4a', () => {
       a4a.buildCallback();
       return fixture;
     });
+
     it('should return false if throttled', () => {
       incrementLoadingAds(fixture.win);
       expect(a4a.renderOutsideViewport()).to.be.false;
     });
+
     it('should return true if throttled, but AMP creative', () => {
       incrementLoadingAds(fixture.win);
       a4a.isVerifiedAmpCreative_ = true;
       expect(a4a.renderOutsideViewport()).to.equal(3);
     });
+
     it('should return 1.25 if prefer-viewability-over-views', () => {
       a4aElement.setAttribute(
         'data-loading-strategy',
@@ -2091,49 +2574,21 @@ describe('amp-a4a', () => {
     const metaData = AmpA4A.prototype.getAmpAdMetadata(buildCreativeString());
     let a4aElement;
     let a4a;
+
     beforeEach(async () => {
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
       const {doc} = fixture;
       a4aElement = createA4aElement(doc);
       a4a = new AmpA4A(a4aElement);
-      window.sandbox.stub(a4a, 'getFallback').callsFake(() => {
+      env.sandbox.stub(a4a, 'getFallback').callsFake(() => {
         return true;
       });
       a4a.buildCallback();
       a4a.adUrl_ = 'https://nowhere.org';
     });
+
     it('should render correctly', async () => {
-      // TODO(#22733): remove this test once ampdoc-fie is launched.
-      const parentWin = a4aElement.ownerDocument.defaultView;
-      await a4a.renderAmpCreative_(metaData);
-      // Verify iframe presence.
-      expect(a4aElement.children.length).to.equal(1);
-      const friendlyIframe = a4aElement.children[0];
-      expect(friendlyIframe.tagName).to.equal('IFRAME');
-      expect(friendlyIframe.src).to.not.be.ok;
-      expect(friendlyIframe.srcdoc).to.be.ok;
-      const frameDoc = friendlyIframe.contentDocument;
-      const styles = frameDoc.querySelectorAll('style[amp-custom]');
-      expect(
-        Array.prototype.some.call(styles, (s) => {
-          return s.innerHTML == 'p { background: green }';
-        }),
-        'Some style is "background: green"'
-      ).to.be.true;
-      expect(frameDoc.body.innerHTML.trim()).to.equal('<p>some text</p>');
-      expect(
-        Services.urlReplacementsForDoc(frameDoc.documentElement)
-      ).to.not.equal(Services.urlReplacementsForDoc(a4aElement));
-      expect(
-        Services.urlReplacementsForDoc(frameDoc.documentElement).ampdoc.win
-      ).to.equal(parentWin);
-    });
-    it('should render correctly in ampdoc-fie mode', async () => {
-      const parentWin = a4aElement.ownerDocument.defaultView;
-      const ampdocService = Services.ampdocServiceFor(parentWin);
-      toggleAmpdocFieForTesting(parentWin, true);
-      updateFieModeForTesting(ampdocService, true);
       await a4a.renderAmpCreative_(metaData);
       // Verify iframe presence.
       expect(a4aElement.children.length).to.equal(1);
@@ -2227,7 +2682,7 @@ describe('amp-a4a', () => {
       const a4a = new MockA4AImpl(a4aElement);
       a4a.buildCallback();
       a4a.onLayoutMeasure();
-      const attemptChangeSizeStub = window.sandbox.stub(
+      const attemptChangeSizeStub = env.sandbox.stub(
         AMP.BaseElement.prototype,
         'attemptChangeSize'
       );
@@ -2253,8 +2708,8 @@ describe('amp-a4a', () => {
       const {doc} = fixture;
       const a4aElement = createA4aElement(doc);
       const a4a = new MockA4AImpl(a4aElement);
-      const getAdUrlSpy = window.sandbox.spy(a4a, 'getAdUrl');
-      const errorHandlerSpy = window.sandbox.spy(a4a, 'promiseErrorHandler_');
+      const getAdUrlSpy = env.sandbox.spy(a4a, 'getAdUrl');
+      const errorHandlerSpy = env.sandbox.spy(a4a, 'promiseErrorHandler_');
       a4a.buildCallback();
       a4a.onLayoutMeasure();
       const adPromise = a4a.adPromise_;
@@ -2273,7 +2728,7 @@ describe('amp-a4a', () => {
     });
 
     describe('consent integration', () => {
-      let fixture, a4aElement, a4a, consentString, gdprApplies;
+      let fixture, a4aElement, a4a, consentString, consentMetadata, gdprApplies;
       beforeEach(async () => {
         fixture = await createIframePromise();
         setupForAdTesting(fixture);
@@ -2286,29 +2741,32 @@ describe('amp-a4a', () => {
         a4a = new MockA4AImpl(a4aElement);
         consentString = 'test-consent-string';
         gdprApplies = true;
+        consentMetadata = {
+          gdprApplies,
+          'consentStringType': 1,
+          'additionalConsent': 'abc123',
+        };
         return fixture;
       });
 
       it('should delay ad url by getConsentPolicyState', async () => {
-        window.sandbox
+        env.sandbox
           .stub(AMP.BaseElement.prototype, 'getConsentPolicy')
           .returns('default');
         let inResolver;
         const policyPromise = new Promise(
           (resolver) => (inResolver = resolver)
         );
-        window.sandbox
-          .stub(Services, 'consentPolicyServiceForDocOrNull')
-          .returns(
-            Promise.resolve({
-              whenPolicyResolved: () => policyPromise,
-              getConsentStringInfo: () => consentString,
-              getGdprApplies: () => gdprApplies,
-            })
-          );
+        env.sandbox.stub(Services, 'consentPolicyServiceForDocOrNull').returns(
+          Promise.resolve({
+            whenPolicyResolved: () => policyPromise,
+            getConsentStringInfo: () => consentString,
+            getConsentMetadataInfo: () => consentMetadata,
+          })
+        );
 
-        const getAdUrlSpy = window.sandbox.spy(a4a, 'getAdUrl');
-        const tryExecuteRealTimeConfigSpy = window.sandbox.spy(
+        const getAdUrlSpy = env.sandbox.spy(a4a, 'getAdUrl');
+        const tryExecuteRealTimeConfigSpy = env.sandbox.spy(
           a4a,
           'tryExecuteRealTimeConfig_'
         );
@@ -2325,21 +2783,24 @@ describe('amp-a4a', () => {
             consentState: CONSENT_POLICY_STATE.SUFFICIENT,
             consentString,
             gdprApplies,
+            consentStringType: consentMetadata['consentStringType'],
+            additionalConsent: consentMetadata['additionalConsent'],
           })
         ).calledOnce;
         expect(
           tryExecuteRealTimeConfigSpy.withArgs(
             CONSENT_POLICY_STATE.SUFFICIENT,
-            consentString
+            consentString,
+            consentMetadata
           )
         ).calledOnce;
       });
 
       it('should not wait on consent if no policy', async () => {
-        window.sandbox
+        env.sandbox
           .stub(AMP.BaseElement.prototype, 'getConsentPolicy')
           .returns(null);
-        const consentServiceSpy = window.sandbox.spy(
+        const consentServiceSpy = env.sandbox.spy(
           Services,
           'consentPolicyServiceForDocOrNull'
         );
@@ -2350,22 +2811,20 @@ describe('amp-a4a', () => {
       });
 
       it('should pass consent state to getAdUrl', async () => {
-        window.sandbox
+        env.sandbox
           .stub(AMP.BaseElement.prototype, 'getConsentPolicy')
           .returns('default');
-        window.sandbox
-          .stub(Services, 'consentPolicyServiceForDocOrNull')
-          .returns(
-            Promise.resolve({
-              whenPolicyResolved: () =>
-                Promise.resolve(CONSENT_POLICY_STATE.SUFFICIENT),
-              getConsentStringInfo: () => consentString,
-              getGdprApplies: () => gdprApplies,
-            })
-          );
+        env.sandbox.stub(Services, 'consentPolicyServiceForDocOrNull').returns(
+          Promise.resolve({
+            whenPolicyResolved: () =>
+              Promise.resolve(CONSENT_POLICY_STATE.SUFFICIENT),
+            getConsentStringInfo: () => consentString,
+            getConsentMetadataInfo: () => consentMetadata,
+          })
+        );
 
-        const getAdUrlSpy = window.sandbox.spy(a4a, 'getAdUrl');
-        const tryExecuteRealTimeConfigSpy = window.sandbox.spy(
+        const getAdUrlSpy = env.sandbox.spy(a4a, 'getAdUrl');
+        const tryExecuteRealTimeConfigSpy = env.sandbox.spy(
           a4a,
           'tryExecuteRealTimeConfig_'
         );
@@ -2378,39 +2837,40 @@ describe('amp-a4a', () => {
             consentState: CONSENT_POLICY_STATE.SUFFICIENT,
             consentString,
             gdprApplies,
+            consentStringType: consentMetadata['consentStringType'],
+            additionalConsent: consentMetadata['additionalConsent'],
           })
         ).calledOnce;
         expect(
           tryExecuteRealTimeConfigSpy.withArgs(
             CONSENT_POLICY_STATE.SUFFICIENT,
-            consentString
+            consentString,
+            consentMetadata
           )
         ).calledOnce;
       });
 
       it('should return UNKNOWN if consent exception', async () => {
         expectAsyncConsoleError(/Error determining consent state.*consent err/);
-        window.sandbox
+        env.sandbox
           .stub(AMP.BaseElement.prototype, 'getConsentPolicy')
           .returns('default');
-        window.sandbox
-          .stub(Services, 'consentPolicyServiceForDocOrNull')
-          .returns(
-            Promise.resolve({
-              whenPolicyResolved: () => {
-                throw new Error('consent err!');
-              },
-              getConsentStringInfo: () => {
-                throw new Error('consent err!');
-              },
-              getGdprApplies: () => {
-                throw new Error('consent err!');
-              },
-            })
-          );
+        env.sandbox.stub(Services, 'consentPolicyServiceForDocOrNull').returns(
+          Promise.resolve({
+            whenPolicyResolved: () => {
+              throw new Error('consent err!');
+            },
+            getConsentStringInfo: () => {
+              throw new Error('consent err!');
+            },
+            getConsentMetadata: () => {
+              throw new Error('consent err!');
+            },
+          })
+        );
 
-        const getAdUrlSpy = window.sandbox.spy(a4a, 'getAdUrl');
-        const tryExecuteRealTimeConfigSpy = window.sandbox.spy(
+        const getAdUrlSpy = env.sandbox.spy(a4a, 'getAdUrl');
+        const tryExecuteRealTimeConfigSpy = env.sandbox.spy(
           a4a,
           'tryExecuteRealTimeConfig_'
         );
@@ -2422,12 +2882,15 @@ describe('amp-a4a', () => {
           getAdUrlSpy.withArgs({
             consentState: CONSENT_POLICY_STATE.UNKNOWN,
             consentString: null,
+            consentStringType: null,
             gdprApplies: null,
+            additionalConsent: null,
           })
         ).calledOnce;
         expect(
           tryExecuteRealTimeConfigSpy.withArgs(
             CONSENT_POLICY_STATE.UNKNOWN,
+            null,
             null
           )
         ).calledOnce;
@@ -2501,9 +2964,9 @@ describe('amp-a4a', () => {
     let devExpectedErrorStub;
 
     beforeEach(async () => {
-      userErrorStub = window.sandbox.stub(user(), 'error');
-      userWarnStub = window.sandbox.stub(user(), 'warn');
-      devExpectedErrorStub = window.sandbox.stub(dev(), 'expectedError');
+      userErrorStub = env.sandbox.stub(user(), 'error');
+      userWarnStub = env.sandbox.stub(user(), 'warn');
+      devExpectedErrorStub = env.sandbox.stub(dev(), 'expectedError');
       const fixture = await createIframePromise();
       setupForAdTesting(fixture);
       const {doc} = fixture;
@@ -2519,7 +2982,7 @@ describe('amp-a4a', () => {
     });
 
     it('should create an error if needed', () => {
-      window.__AMP_MODE = {development: true};
+      env.sandbox.stub(mode, 'getMode').returns({development: true});
       a4a.promiseErrorHandler_('intentional');
       expect(userErrorStub).to.be.calledOnce;
       expect(userErrorStub.args[0][1]).to.be.instanceOf(Error);
@@ -2528,7 +2991,7 @@ describe('amp-a4a', () => {
     });
 
     it('should configure ignoreStack when specified', () => {
-      window.__AMP_MODE = {development: true};
+      env.sandbox.stub(mode, 'getMode').returns({development: true});
       a4a.promiseErrorHandler_('intentional', /* ignoreStack */ true);
       expect(userErrorStub).to.be.calledOnce;
       expect(userErrorStub.args[0][1]).to.be.instanceOf(Error);
@@ -2538,7 +3001,7 @@ describe('amp-a4a', () => {
 
     it('should route error to user.error in dev mode', () => {
       const error = new Error('intentional');
-      window.__AMP_MODE = {development: true};
+      env.sandbox.stub(mode, 'getMode').returns({development: true});
       a4a.promiseErrorHandler_(error);
       expect(userErrorStub).to.be.calledOnce;
       expect(userErrorStub.args[0][1]).to.be.equal(error);
@@ -2549,7 +3012,7 @@ describe('amp-a4a', () => {
 
     it('should route error to user.warn in prod mode', () => {
       const error = new Error('intentional');
-      window.__AMP_MODE = {development: false};
+      env.sandbox.stub(mode, 'getMode').returns({development: false});
       a4a.promiseErrorHandler_(error);
       expect(userWarnStub).to.be.calledOnce;
       expect(userWarnStub.args[0][1]).to.be.equal(error);
@@ -2559,8 +3022,8 @@ describe('amp-a4a', () => {
 
     it('should send an expected error in prod mode with sampling', () => {
       const error = new Error('intentional');
-      window.sandbox.stub(Math, 'random').callsFake(() => 0.005);
-      window.__AMP_MODE = {development: false};
+      env.sandbox.stub(Math, 'random').callsFake(() => 0.005);
+      env.sandbox.stub(mode, 'getMode').returns({development: false});
       a4a.promiseErrorHandler_(error);
       expect(devExpectedErrorStub).to.be.calledOnce;
       expect(devExpectedErrorStub.args[0][1]).to.be.equal(error);
@@ -2570,13 +3033,97 @@ describe('amp-a4a', () => {
 
     it('should NOT send an expected error in prod mode with sampling', () => {
       const error = new Error('intentional');
-      window.sandbox.stub(Math, 'random').callsFake(() => 0.011);
-      window.__AMP_MODE = {development: false};
+      env.sandbox.stub(Math, 'random').callsFake(() => 0.011);
+      env.sandbox.stub(mode, 'getMode').returns({development: false});
       a4a.promiseErrorHandler_(error);
       expect(devExpectedErrorStub).to.not.be.called;
     });
   });
 
+  describe('block-rtc attribute', () => {
+    describes.realWin('block-rtc attribute', {}, (env) => {
+      let geoService, a4a, element, fixture;
+
+      beforeEach(async () => {
+        fixture = await createIframePromise();
+        element = createA4aElement(fixture.doc);
+        a4a = new MockA4AImpl(element);
+        geoService = {
+          isInCountryGroup(country) {
+            switch (country) {
+              case 'usca':
+                return GEO_IN_GROUP.IN;
+              case 'gdpr':
+                return GEO_IN_GROUP.NOT_IN;
+              default:
+                return GEO_IN_GROUP.NOT_DEFINED;
+            }
+          },
+        };
+        return fixture;
+      });
+
+      it('should return false if no attribute found', async () => {
+        expect(await a4a.getBlockRtc_()).to.false;
+      });
+
+      it('should return false if empty string', async () => {
+        element.setAttribute('block-rtc', '');
+        expect(await a4a.getBlockRtc_()).to.false;
+      });
+
+      it('should return if doc is served from a defined geo group', async () => {
+        env.sandbox
+          .stub(Services, 'geoForDocOrNull')
+          .returns(Promise.resolve(geoService));
+        element.setAttribute('block-rtc', 'gdpr,usca');
+        expect(await a4a.getBlockRtc_()).to.true;
+      });
+
+      it('should return false when doc is in an undefined group or not in', async () => {
+        const warnSpy = env.sandbox.stub(user(), 'warn');
+        env.sandbox
+          .stub(Services, 'geoForDocOrNull')
+          .returns(Promise.resolve(geoService));
+
+        // Undefined group
+        element.setAttribute('block-rtc', 'tx');
+        expect(await a4a.getBlockRtc_()).to.false;
+        expect(warnSpy.args[0][0]).to.match(/AMP-AD/);
+        expect(warnSpy.args[0][1]).to.match(/Geo group "tx" was not defined./);
+        expect(warnSpy).to.have.been.calledOnce;
+        // Not in
+        element.setAttribute('block-rtc', 'gdpr');
+        expect(await a4a.getBlockRtc_()).to.false;
+      });
+
+      it('should throw an error when there is no geoService', async () => {
+        geoService = null;
+        env.sandbox
+          .stub(Services, 'geoForDocOrNull')
+          .returns(Promise.resolve(geoService));
+        element.setAttribute('block-rtc', 'usca');
+        await expect(a4a.getBlockRtc_()).to.be.rejectedWith(
+          /requires <amp-geo> to use `block-rtc`/
+        );
+      });
+
+      it('should not execute RealTimeConfig if the attribute is valid', async () => {
+        env.sandbox
+          .stub(Services, 'geoForDocOrNull')
+          .returns(Promise.resolve(geoService));
+
+        const realTimeConfigStub = env.sandbox.stub(
+          Services,
+          'realTimeConfigForDoc'
+        );
+        element.setAttribute('block-rtc', 'usca');
+        await a4a.tryExecuteRealTimeConfig_();
+        expect(realTimeConfigStub).to.not.be.called;
+      });
+    });
+  });
+
   describe('#assignAdUrlToError', () => {
     it('should attach info to error correctly', () => {
       const error = new Error('foo');
@@ -2629,28 +3176,28 @@ describe('amp-a4a', () => {
         };
       };
       a4a.mutateElement = (func) => func();
-      a4a.togglePlaceholder = window.sandbox.spy();
+      a4a.togglePlaceholder = env.sandbox.spy();
 
       // We don't really care about the behavior of the following methods, so
       // long as they're called the appropriate number of times. We stub them
       // out here because they would otherwise throw errors unrelated to the
       // behavior actually being tested.
-      const initiateAdRequestMock = window.sandbox.stub(
+      const initiateAdRequestMock = env.sandbox.stub(
         AmpA4A.prototype,
         'initiateAdRequest'
       );
       initiateAdRequestMock.returns(undefined);
-      const tearDownSlotMock = window.sandbox.stub(
+      const tearDownSlotMock = env.sandbox.stub(
         AmpA4A.prototype,
         'tearDownSlot'
       );
       tearDownSlotMock.returns(undefined);
-      const destroyFrameMock = window.sandbox.stub(
+      const destroyFrameMock = env.sandbox.stub(
         AmpA4A.prototype,
         'destroyFrame'
       );
       destroyFrameMock.returns(undefined);
-      window.sandbox.stub(analytics, 'triggerAnalyticsEvent');
+      env.sandbox.stub(analytics, 'triggerAnalyticsEvent');
 
       expect(a4a.isRefreshing).to.be.false;
       await a4a.refresh(() => {});
@@ -2674,29 +3221,29 @@ describe('amp-a4a', () => {
         };
       };
       a4a.mutateElement = (func) => func();
-      a4a.togglePlaceholder = window.sandbox.spy();
+      a4a.togglePlaceholder = env.sandbox.spy();
 
       // We don't really care about the behavior of the following methods, so
       // long as they're called the appropriate number of times. We stub them
       // out here because they would otherwise throw errors unrelated to the
       // behavior actually being tested.
-      const initiateAdRequestMock = window.sandbox.stub(
+      const initiateAdRequestMock = env.sandbox.stub(
         AmpA4A.prototype,
         'initiateAdRequest'
       );
       initiateAdRequestMock.returns(undefined);
-      const tearDownSlotMock = window.sandbox.stub(
+      const tearDownSlotMock = env.sandbox.stub(
         AmpA4A.prototype,
         'tearDownSlot'
       );
       tearDownSlotMock.returns(undefined);
-      const destroyFrameMock = window.sandbox.stub(
+      const destroyFrameMock = env.sandbox.stub(
         AmpA4A.prototype,
         'destroyFrame'
       );
       destroyFrameMock.returns(undefined);
 
-      const triggerAnalyticsEventStub = window.sandbox.stub(
+      const triggerAnalyticsEventStub = env.sandbox.stub(
         analytics,
         'triggerAnalyticsEvent'
       );
@@ -2719,13 +3266,13 @@ describe('amp-a4a', () => {
         };
       };
       a4a.mutateElement = (func) => func();
-      a4a.togglePlaceholder = window.sandbox.spy();
+      a4a.togglePlaceholder = env.sandbox.spy();
 
-      window.sandbox
+      env.sandbox
         .stub(AmpA4A.prototype, 'initiateAdRequest')
         .returns(undefined);
-      window.sandbox.stub(AmpA4A.prototype, 'tearDownSlot').returns(undefined);
-      const callback = window.sandbox.spy();
+      env.sandbox.stub(AmpA4A.prototype, 'tearDownSlot').returns(undefined);
+      const callback = env.sandbox.spy();
       await a4a.refresh(callback);
       expect(callback).to.not.be.called;
     });
@@ -2750,6 +3297,50 @@ describe('amp-a4a', () => {
     });
   });
 
+  describe('pause and resume', () => {
+    let a4a;
+    let pauseStub, resumeStub;
+
+    beforeEach(async () => {
+      const fixture = await createIframePromise();
+      const element = createA4aElement(fixture.doc);
+      a4a = new MockA4AImpl(element);
+      await a4a.buildCallback();
+      a4a.onLayoutMeasure();
+      await a4a.layoutCallback();
+
+      // Never resolve
+      env.sandbox
+        ./*OK*/ stub(FriendlyIframeEmbed.prototype, 'whenIniLoaded')
+        .callsFake(() => {
+          return new Promise(() => {});
+        });
+      const creativeString = buildCreativeString();
+      const metaData = a4a.getAmpAdMetadata(creativeString);
+      await a4a.renderAmpCreative_(metaData);
+
+      pauseStub = env.sandbox./*OK*/ stub(
+        FriendlyIframeEmbed.prototype,
+        'pause'
+      );
+      resumeStub = env.sandbox./*OK*/ stub(
+        FriendlyIframeEmbed.prototype,
+        'resume'
+      );
+    });
+
+    it('should pause the embed', () => {
+      expect(pauseStub).to.not.be.called;
+      expect(resumeStub).to.not.be.called;
+
+      a4a.pauseCallback();
+      expect(pauseStub).to.be.calledOnce;
+
+      a4a.resumeCallback();
+      expect(resumeStub).to.be.calledOnce;
+    });
+  });
+
   describe('canonical AMP', () => {
     describe('preferential rendering', () => {
       let a4aElement;
@@ -2769,8 +3360,12 @@ describe('amp-a4a', () => {
         return fixture;
       });
 
+      // TODO(ccordry): delete crypto tests when launched.
       it('by default not allowed if crypto signature present but no SSL', async () => {
-        window.sandbox
+        if (NO_SIGNING_RTV) {
+          return;
+        }
+        env.sandbox
           .stub(Services.cryptoFor(fixture.win), 'isPkcsAvailable')
           .returns(false);
         a4a.buildCallback();
@@ -2784,10 +3379,10 @@ describe('amp-a4a', () => {
         'allowed if crypto signature present, no SSL, and overrided' +
           ' shouldPreferentialRenderWithoutCrypto',
         async () => {
-          window.sandbox
+          env.sandbox
             .stub(Services.cryptoFor(fixture.win), 'isPkcsAvailable')
             .returns(false);
-          window.sandbox
+          env.sandbox
             .stub(AmpA4A.prototype, 'shouldPreferentialRenderWithoutCrypto')
             .callsFake(() => true);
           a4a.buildCallback();
@@ -2798,9 +3393,12 @@ describe('amp-a4a', () => {
       );
 
       it('not allowed if no crypto signature present', async () => {
+        if (NO_SIGNING_RTV) {
+          return;
+        }
         delete adResponse.headers['AMP-Fast-Fetch-Signature'];
         delete adResponse.headers[AMP_SIGNATURE_HEADER];
-        window.sandbox
+        env.sandbox
           .stub(AmpA4A.prototype, 'shouldPreferentialRenderWithoutCrypto')
           .callsFake(() => true);
         a4a.buildCallback();
@@ -2836,7 +3434,6 @@ describe('amp-a4a', () => {
 describes.realWin('AmpA4a-RTC', {amp: true}, (env) => {
   let element;
   let a4a;
-  let errorSpy;
 
   beforeEach(() => {
     // ensures window location == AMP cache passes
@@ -2850,32 +3447,12 @@ describes.realWin('AmpA4a-RTC', {amp: true}, (env) => {
     });
     doc.body.appendChild(element);
     a4a = new AmpA4A(element);
-    errorSpy = env.sandbox.spy(user(), 'error');
   });
 
   describe('#tryExecuteRealTimeConfig', () => {
-    beforeEach(() => {
-      AMP.RealTimeConfigManager = undefined;
-    });
-
     it('should not execute if RTC never imported', () => {
       expect(a4a.tryExecuteRealTimeConfig_()).to.be.undefined;
     });
-    it('should log user error if RTC Config set but RTC not supported', () => {
-      element.setAttribute(
-        'rtc-config',
-        JSON.stringify({'urls': ['https://a.com']})
-      );
-      expect(allowConsoleError(() => a4a.tryExecuteRealTimeConfig_())).to.be
-        .undefined;
-      expect(errorSpy.calledOnce).to.be.true;
-      expect(
-        errorSpy.calledWith(
-          'amp-a4a',
-          'RTC not supported for ad network doubleclick'
-        )
-      ).to.be.true;
-    });
   });
 
   describe('#getCustomRealTimeConfigMacros_', () => {
@@ -2897,7 +3474,7 @@ describes.realWin('AmpA4a-RTC', {amp: true}, (env) => {
       {type: 'otherNetwork', prefVal: true},
     ].forEach((test) =>
       it(JSON.stringify(test), () => {
-        const {type, prefVal, expected} = test;
+        const {expected, prefVal, type} = test;
         if (type) {
           a4a.element.setAttribute('type', type);
         }
diff --git a/extensions/amp-a4a/0.1/test/test-amp-ad-template-helper.js b/extensions/amp-a4a/0.1/test/test-amp-ad-template-helper.js
index c094e241dd0e5..0161998a02fcb 100644
--- a/extensions/amp-a4a/0.1/test/test-amp-ad-template-helper.js
+++ b/extensions/amp-a4a/0.1/test/test-amp-ad-template-helper.js
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
+import '../../../amp-mustache/0.2/amp-mustache';
 import {AmpAdTemplateHelper} from '../amp-ad-template-helper';
-import {AmpMustache} from '../../../amp-mustache/0.1/amp-mustache';
 import {Xhr} from '../../../../src/service/xhr-impl';
 
 describes.fakeWin('AmpAdTemplateHelper', {amp: true}, (env) => {
@@ -24,7 +24,7 @@ describes.fakeWin('AmpAdTemplateHelper', {amp: true}, (env) => {
     'adserver.com/amp_template_1';
   const canonicalUrl = 'https://adserver.com/amp_template_1';
 
-  let win, doc;
+  let win, doc, ampdoc;
   let fetchTextMock;
   let ampAdTemplateHelper;
 
@@ -32,8 +32,16 @@ describes.fakeWin('AmpAdTemplateHelper', {amp: true}, (env) => {
     win = env.win;
     win.__AMP_MODE = {localDev: false};
     doc = win.document;
+    ampdoc = env.ampdoc;
     fetchTextMock = env.sandbox.stub(Xhr.prototype, 'fetchText');
-    ampAdTemplateHelper = new AmpAdTemplateHelper(win);
+    ampAdTemplateHelper = new AmpAdTemplateHelper(ampdoc);
+
+    env.installExtension(
+      'amp-mustache',
+      '0.2',
+      /* latest */ true,
+      /* auto */ false
+    );
   });
 
   it('should return a promise resolving to a string template', () => {
@@ -67,11 +75,6 @@ describes.fakeWin('AmpAdTemplateHelper', {amp: true}, (env) => {
   });
 
   it('should render a template with correct values', () => {
-    win.AMP.registerTemplate('amp-mustache', AmpMustache);
-  });
-
-  it('should render a template with correct values', () => {
-    win.AMP.registerTemplate('amp-mustache', AmpMustache);
     const parentDiv = doc.createElement('div');
     parentDiv./*OK*/ innerHTML =
       '<template type="amp-mustache"><p>{{foo}}</p></template>';
diff --git a/extensions/amp-a4a/0.1/test/test-amp-ad-utils.js b/extensions/amp-a4a/0.1/test/test-amp-ad-utils.js
index 47cde5ec42b25..faf50242d738c 100644
--- a/extensions/amp-a4a/0.1/test/test-amp-ad-utils.js
+++ b/extensions/amp-a4a/0.1/test/test-amp-ad-utils.js
@@ -15,9 +15,14 @@
  */
 
 import {data} from './testdata/valid_css_at_rules_amp.reserialized';
-import {getAmpAdMetadata} from '../amp-ad-utils';
+import {
+  extensionsHasElement,
+  getAmpAdMetadata,
+  getExtensionsFromMetadata,
+  mergeExtensionsMetadata,
+} from '../amp-ad-utils';
 
-describe('getAmpAdMetadata', () => {
+describes.sandboxed('getAmpAdMetadata', {}, () => {
   it('should parse metadata successfully', () => {
     const creativeMetadata = getAmpAdMetadata(data.reserialized);
     expect(creativeMetadata).to.be.ok;
@@ -56,3 +61,95 @@ describe('getAmpAdMetadata', () => {
     expect(creativeMetadata).to.be.null;
   });
 });
+
+describes.sandboxed('mergeExtensionsMetadata', {}, () => {
+  it('should add els that exist in customElementExtensions but not extensions', () => {
+    const customElementExtensions = ['amp-analytics'];
+    const extensions = [];
+    mergeExtensionsMetadata(extensions, customElementExtensions);
+    expect(extensions).to.have.lengthOf(1);
+    expect(extensions).to.deep.include({
+      'custom-element': 'amp-analytics',
+      'src': 'https://cdn.ampproject.org/v0/amp-analytics-0.1.js',
+    });
+  });
+
+  it('should ignore elements that already exist in extensions', () => {
+    const customElementExtensions = ['amp-analytics', 'amp-foo'];
+    const extensions = [
+      {
+        'custom-element': 'amp-analytics',
+        'src': 'https://cdn.ampproject.org/v0/amp-analytics-latest.js',
+      },
+    ];
+    mergeExtensionsMetadata(extensions, customElementExtensions);
+    expect(extensions).to.have.lengthOf(2);
+    expect(extensions).to.deep.include({
+      'custom-element': 'amp-analytics',
+      'src': 'https://cdn.ampproject.org/v0/amp-analytics-latest.js',
+    });
+    expect(extensions).to.deep.include({
+      'custom-element': 'amp-foo',
+      'src': 'https://cdn.ampproject.org/v0/amp-foo-0.1.js',
+    });
+  });
+});
+
+describes.sandboxed('extensionsHasElement', {}, () => {
+  it('should return true if containing extension', () => {
+    const extensions = [
+      {
+        'custom-element': 'amp-cats',
+        src: 'https://cdn.ampproject.org/v0/amp-cats-0.1.js',
+      },
+    ];
+    expect(extensionsHasElement(extensions, 'amp-cats')).to.be.true;
+  });
+
+  it('should return false if it does not contain extension', () => {
+    const extensions = [
+      {
+        'custom-element': 'amp-cats',
+        src: 'https://cdn.ampproject.org/v0/amp-cats-0.1.js',
+      },
+    ];
+    expect(extensionsHasElement(extensions, 'amp-dogs')).to.be.false;
+  });
+
+  it('should return false if empty array', () => {
+    const extensions = [];
+    expect(extensionsHasElement(extensions, 'amp-dogs')).to.be.false;
+  });
+});
+
+describes.sandboxed('getExtensionsFromMetadata', {}, () => {
+  it('should return extension name and version', () => {
+    const metadata = {
+      extensions: [
+        {
+          'custom-element': 'amp-analytics',
+          'src': 'https://cdn.ampproject.org/v0/amp-analytics-0.1.js',
+        },
+        {
+          'custom-element': 'amp-mustache',
+          'src': 'https://cdn.ampproject.org/v0/amp-mustache-1.0.js',
+        },
+      ],
+    };
+    const extensions = getExtensionsFromMetadata(metadata);
+    expect(extensions).to.deep.include({
+      extensionId: 'amp-analytics',
+      extensionVersion: '0.1',
+    });
+    expect(extensions).to.deep.include({
+      extensionId: 'amp-mustache',
+      extensionVersion: '1.0',
+    });
+  });
+
+  it('should handle no `extensions` key in metadata', () => {
+    const metadata = {};
+    const extensions = getExtensionsFromMetadata(metadata);
+    expect(extensions).to.eql([]);
+  });
+});
diff --git a/extensions/amp-a4a/0.1/test/test-cryptographic-validator.js b/extensions/amp-a4a/0.1/test/test-cryptographic-validator.js
index caf76c77cd4ad..1ac6d702e426d 100644
--- a/extensions/amp-a4a/0.1/test/test-cryptographic-validator.js
+++ b/extensions/amp-a4a/0.1/test/test-cryptographic-validator.js
@@ -22,7 +22,7 @@ import {
 import {VerificationStatus} from '../signature-verifier';
 import {data} from './testdata/valid_css_at_rules_amp.reserialized';
 import {user} from '../../../../src/log';
-import {utf8Encode} from '../../../../src/utils/bytes';
+import {utf8Encode} from '../../../../src/core/types/string/bytes';
 
 const realWinConfig = {
   amp: {},
@@ -34,10 +34,14 @@ describes.realWin('CryptographicValidator', realWinConfig, (env) => {
   const headers = {'Content-Type': 'application/jwk-set+json'};
   let userErrorStub;
   let validator;
+  let containerElement;
 
   beforeEach(() => {
     validator = new CryptographicValidator();
     userErrorStub = env.sandbox.stub(user(), 'error');
+
+    containerElement = env.win.document.createElement('div');
+    env.win.document.body.appendChild(containerElement);
   });
 
   it('should have AMP validator result', () => {
@@ -47,7 +51,12 @@ describes.realWin('CryptographicValidator', realWinConfig, (env) => {
       verify: () => Promise.resolve(VerificationStatus.OK),
     };
     return validator
-      .validate({win: env.win}, utf8Encode(data.reserialized), headers)
+      .validate(
+        {win: env.win},
+        containerElement,
+        utf8Encode(data.reserialized),
+        headers
+      )
       .then((validatorOutput) => {
         expect(validatorOutput).to.be.ok;
         expect(validatorOutput.type).to.equal(ValidatorResult.AMP);
@@ -66,7 +75,12 @@ describes.realWin('CryptographicValidator', realWinConfig, (env) => {
       verify: () => Promise.resolve(VerificationStatus.UNVERIFIED),
     };
     return validator
-      .validate({win: env.win}, utf8Encode(data.reserialized), headers)
+      .validate(
+        {win: env.win},
+        containerElement,
+        utf8Encode(data.reserialized),
+        headers
+      )
       .then((validatorOutput) => {
         expect(validatorOutput).to.be.ok;
         expect(validatorOutput.type).to.equal(ValidatorResult.NON_AMP);
@@ -88,6 +102,7 @@ describes.realWin('CryptographicValidator', realWinConfig, (env) => {
     return validator
       .validate(
         {win: env.win},
+        containerElement,
         utf8Encode(data.reserializedInvalidOffset),
         headers
       )
diff --git a/extensions/amp-a4a/0.1/test/test-friendly-frame-renderer.js b/extensions/amp-a4a/0.1/test/test-friendly-frame-renderer.js
index 1af6e5de21da8..689e62c34cba1 100644
--- a/extensions/amp-a4a/0.1/test/test-friendly-frame-renderer.js
+++ b/extensions/amp-a4a/0.1/test/test-friendly-frame-renderer.js
@@ -25,6 +25,7 @@ const realWinConfig = {
 describes.realWin('FriendlyFrameRenderer', realWinConfig, (env) => {
   const minifiedCreative = '<p>Hello, World!</p>';
 
+  let window, document;
   let containerElement;
   let context;
   let creativeData;
@@ -32,6 +33,9 @@ describes.realWin('FriendlyFrameRenderer', realWinConfig, (env) => {
   let renderPromise;
 
   beforeEach(() => {
+    window = env.win;
+    document = window.document;
+
     context = {
       size: {width: '320', height: '50'},
       adUrl: 'http://www.google.com',
@@ -47,6 +51,8 @@ describes.realWin('FriendlyFrameRenderer', realWinConfig, (env) => {
     renderer = new FriendlyFrameRenderer();
     containerElement = document.createElement('div');
     containerElement.signals = () => ({
+      signal: () => {},
+      reset: () => {},
       whenSignal: () => Promise.resolve(),
     });
     containerElement.renderStarted = () => {};
@@ -78,15 +84,17 @@ describes.realWin('FriendlyFrameRenderer', realWinConfig, (env) => {
   });
 
   it('should set the correct srcdoc on the iframe', () => {
-    const srcdoc =
-      '<base href="http://www.google.com">' +
-      '<meta http-equiv=Content-Security-Policy content="script-src ' +
-      "'none';object-src 'none';child-src 'none'\">" +
-      '<p>Hello, World!</p>';
     return renderPromise.then(() => {
       const iframe = containerElement.querySelector('iframe');
       expect(iframe).to.be.ok;
-      expect(iframe.getAttribute('srcdoc')).to.equal(srcdoc);
+      const srcdoc = iframe.getAttribute('srcdoc');
+      expect(srcdoc).to.contain('<base href="http://www.google.com">');
+      expect(srcdoc).to.contain(
+        '<meta http-equiv=Content-Security-Policy content="script-src '
+      );
+      expect(srcdoc).to.contain(
+        ";object-src 'none';child-src 'none'\"><p>Hello, World!</p>"
+      );
     });
   });
 
diff --git a/extensions/amp-a4a/0.1/test/test-friendly-frame-util.js b/extensions/amp-a4a/0.1/test/test-friendly-frame-util.js
index 2bbe42ba9374f..07335c6ef7544 100644
--- a/extensions/amp-a4a/0.1/test/test-friendly-frame-util.js
+++ b/extensions/amp-a4a/0.1/test/test-friendly-frame-util.js
@@ -25,12 +25,18 @@ const realWinConfig = {
 describes.realWin('FriendlyFrameUtil', realWinConfig, (env) => {
   const minifiedCreative = '<p>Hello, World!</p>';
 
+  let window, document;
   let containerElement;
   let renderPromise;
 
   beforeEach(() => {
+    window = env.win;
+    document = window.document;
+
     containerElement = document.createElement('div');
     containerElement.signals = () => ({
+      signal: () => {},
+      reset: () => {},
       whenSignal: () => Promise.resolve(),
     });
     containerElement.renderStarted = () => {};
@@ -74,14 +80,16 @@ describes.realWin('FriendlyFrameUtil', realWinConfig, (env) => {
   });
 
   it('should set the correct srcdoc on the iframe', () => {
-    const srcdoc =
-      '<base href="http://www.google.com">' +
-      '<meta http-equiv=Content-Security-Policy content="script-src ' +
-      "'none';object-src 'none';child-src 'none'\">" +
-      '<p>Hello, World!</p>';
     return renderPromise.then((iframe) => {
       expect(iframe).to.be.ok;
-      expect(iframe.getAttribute('srcdoc')).to.equal(srcdoc);
+      const srcdoc = iframe.getAttribute('srcdoc');
+      expect(srcdoc).to.contain('<base href="http://www.google.com">');
+      expect(srcdoc).to.contain(
+        '<meta http-equiv=Content-Security-Policy content="script-src '
+      );
+      expect(srcdoc).to.contain(
+        ";object-src 'none';child-src 'none'\"><p>Hello, World!</p>"
+      );
     });
   });
 
diff --git a/extensions/amp-a4a/0.1/test/test-head-validation.js b/extensions/amp-a4a/0.1/test/test-head-validation.js
new file mode 100644
index 0000000000000..6497d0f42861c
--- /dev/null
+++ b/extensions/amp-a4a/0.1/test/test-head-validation.js
@@ -0,0 +1,223 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Services} from '../../../../src/services';
+import {processHead} from '../head-validation';
+import {rootNodeFor} from '../../../../src/dom';
+
+describes.realWin('head validation', {amp: true}, (env) => {
+  let adElement;
+  let head;
+
+  beforeEach(() => {
+    const doc = env.win.document;
+    adElement = doc.createElement('amp-ad');
+    doc.body.appendChild(adElement);
+    head = doc.createElement('head');
+    doc.body.appendChild(head);
+    rootNodeFor(head).documentElement.setAttribute('amp4ads', '');
+  });
+
+  describe('processHead', () => {
+    it('returns null when head is empty', () => {
+      const validated = processHead(env.win, adElement, head);
+      expect(validated).to.be.null;
+    });
+
+    it('returns null when no amp4ads or ⚡️4ads', () => {
+      const validated = processHead(env.win, adElement, head);
+      expect(validated).to.be.null;
+    });
+
+    it('should allow meta and title', () => {
+      head.innerHTML = `
+        <title>cool cat pics</title>
+        <meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport">
+      `;
+      const validated = processHead(env.win, adElement, head);
+      expect(validated.head.querySelector('title')).to.exist;
+      expect(validated.head.querySelector('meta')).to.exist;
+    });
+
+    it('removes unknown elements', () => {
+      head.innerHTML = `
+        <cats>meow</cats>
+      `;
+      const validated = processHead(env.win, adElement, head);
+      expect(validated.head.querySelector('cats')).not.to.exist;
+    });
+
+    it('saves amp extension ids, preloads them, and removes from DOM', () => {
+      const preloadStub = env.sandbox.stub(
+        Services.extensionsFor(env.win),
+        'preloadExtension'
+      );
+      head.innerHTML = `
+        <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
+        <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+      `;
+      const validated = processHead(env.win, adElement, head);
+      expect(validated.head.querySelector('script')).not.to.exist;
+      expect(validated.extensions).to.have.length(2);
+      expect(validated.extensions[0].extensionId).to.equal('amp-fit-text');
+      expect(validated.extensions[1].extensionId).to.equal('amp-video');
+      expect(preloadStub).calledTwice;
+      expect(preloadStub.firstCall).calledWith('amp-fit-text');
+      expect(preloadStub.secondCall).calledWith('amp-video');
+    });
+
+    it('registers extensions with RTV', () => {
+      const preloadStub = env.sandbox.stub(
+        Services.extensionsFor(env.win),
+        'preloadExtension'
+      );
+      head.innerHTML = `
+        <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/rtv/012104070150000/v0/amp-analytics-0.1.js"></script>
+      `;
+      const validated = processHead(env.win, adElement, head);
+      expect(validated.head.querySelector('script')).not.to.exist;
+      expect(validated.extensions).to.have.length(1);
+      expect(preloadStub).calledOnce;
+      expect(validated.extensions[0].extensionId).to.equal('amp-analytics');
+      expect(preloadStub.firstCall).calledWith('amp-analytics');
+    });
+
+    it('ignores v0 scripts (versioned & unversioned)', () => {
+      const preloadStub = env.sandbox.stub(
+        Services.extensionsFor(env.win),
+        'preloadExtension'
+      );
+      head.innerHTML = `
+        <script async src="https://cdn.ampproject.org/v0.js"></script>
+        <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
+        <script async src="https://cdn.ampproject.org/rtv/012104070150000/v0.js"></script>
+        <script async src="https://cdn.ampproject.org/rtv/012104070150000/amp4ads-v0.js"></script>
+      `;
+      const validated = processHead(env.win, adElement, head);
+      expect(validated.head.querySelector('script')).not.to.exist;
+      expect(validated.extensions).to.have.length(0);
+      expect(preloadStub).not.to.be.called;
+    });
+
+    it('removes non-allowlisted amp elements scripts', () => {
+      const preloadStub = env.sandbox.stub(
+        Services.extensionsFor(env.win),
+        'preloadExtension'
+      );
+      head.innerHTML = `
+        <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
+      `;
+      const validated = processHead(env.win, adElement, head);
+      expect(validated.head.querySelector('script')).not.to.exist;
+      expect(preloadStub).not.to.be.called;
+    });
+
+    it('allows application/json scripts', () => {
+      head.innerHTML = `
+        <script type="application/json"></script>
+        <script src="evil.com"></script>
+      `;
+      const validated = processHead(env.win, adElement, head);
+      const script = validated.head.querySelectorAll('script');
+      expect(script).to.have.length(1);
+      expect(script[0].type).to.equal('application/json');
+    });
+
+    it('removes inabox runtime script', () => {
+      head.innerHTML = `
+        <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
+      `;
+      const validated = processHead(env.win, adElement, head);
+      expect(validated.head.querySelector('script')).not.to.exist;
+    });
+
+    it('keeps <link> preloading images, and preloads', () => {
+      const preloadStub = env.sandbox.stub(
+        Services.preconnectFor(env.win),
+        'preload'
+      );
+      head.innerHTML = `
+        <link rel="preload" as="image" href="https://cats.com/meow.jpg" >
+      `;
+      const validated = processHead(env.win, adElement, head);
+      expect(validated.head.querySelector('link')).to.exist;
+      expect(preloadStub).calledWith(env.ampdoc, 'https://cats.com/meow.jpg');
+    });
+
+    it('ignores other <link> preloads', () => {
+      const preloadStub = env.sandbox.stub(
+        Services.preconnectFor(env.win),
+        'preload'
+      );
+      head.innerHTML = `
+        <link rel="preload" href="myFont.woff2" as="font" type="font/woff2">
+        <link rel="preload" href="/styles/other.css" as="style">
+        <link rel="preload" href="https://example.com/some/embed" as="embed">
+      `;
+      const validated = processHead(env.win, adElement, head);
+      expect(validated.head.querySelector('link')).not.to.exist;
+      expect(preloadStub).not.to.be.called;
+    });
+
+    it('keeps <link> preloading allowlisted fonts, and preloads', () => {
+      const preloadStub = env.sandbox.stub(
+        Services.preconnectFor(env.win),
+        'preload'
+      );
+      head.innerHTML = `
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat+Subrayada&display=swap" rel="stylesheet">
+      `;
+      const validated = processHead(env.win, adElement, head);
+      expect(validated.head.querySelector('link')).to.exist;
+      expect(preloadStub).calledWith(
+        env.ampdoc,
+        'https://fonts.googleapis.com/css2?family=Montserrat+Subrayada&display=swap'
+      );
+    });
+
+    it('does not allow arbitrary font providers', () => {
+      const preloadStub = env.sandbox.stub(
+        Services.preconnectFor(env.win),
+        'preload'
+      );
+      head.innerHTML = `
+        <link href="https://evil.fonts.com" rel="stylesheet">
+      `;
+      const validated = processHead(env.win, adElement, head);
+      expect(validated.head.querySelector('link')).not.to.exist;
+      expect(preloadStub).not.to.be.called;
+    });
+
+    it('keeps amp styles', () => {
+      head.innerHTML = `
+        <style amp-custom></style>
+        <style amp-keyframes></style>
+        <style amp4ads-boilerplate></style>
+      `;
+      const validated = processHead(env.win, adElement, head);
+      expect(validated.head.querySelectorAll('style')).to.have.length(3);
+    });
+
+    it('removes other styles', () => {
+      head.innerHTML = `
+        <style></style>
+        <style random></style>
+      `;
+      const validated = processHead(env.win, adElement, head);
+      expect(validated.head.querySelector('style')).not.to.exist;
+    });
+  });
+});
diff --git a/extensions/amp-a4a/0.1/test/test-name-frame-renderer.js b/extensions/amp-a4a/0.1/test/test-name-frame-renderer.js
index d1f3c0494823d..32662a95ed913 100644
--- a/extensions/amp-a4a/0.1/test/test-name-frame-renderer.js
+++ b/extensions/amp-a4a/0.1/test/test-name-frame-renderer.js
@@ -15,8 +15,8 @@
  */
 
 import {NameFrameRenderer} from '../name-frame-renderer';
-import {parseJson} from '../../../../src/json';
-import {utf8Encode} from '../../../../src/utils/bytes';
+import {parseJson} from '../../../../src/core/types/object/json';
+import {utf8Encode} from '../../../../src/core/types/string/bytes';
 
 const realWinConfig = {
   amp: {},
@@ -31,7 +31,7 @@ describes.realWin('NameFrameRenderer', realWinConfig, (env) => {
   let context;
   let creativeData;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     context = {
       size: {width: '320', height: '50'},
       requestUrl: 'http://www.google.com',
@@ -45,23 +45,22 @@ describes.realWin('NameFrameRenderer', realWinConfig, (env) => {
       additionalContextMetadata: {},
     };
 
-    containerElement = document.createElement('div');
+    containerElement = env.win.document.createElement('div');
     containerElement.setAttribute('height', 50);
     containerElement.setAttribute('width', 320);
-    containerElement.getPageLayoutBox = () => ({
-      left: 0,
-      top: 0,
-      width: 0,
-      height: 0,
+    containerElement.getIntersectionChangeEntry = () => ({
+      time: null,
+      boundingClientRect: {},
+      rootBounds: {},
+      intersectionRect: {},
     });
-    containerElement.getIntersectionChangeEntry = () => ({});
-    document.body.appendChild(containerElement);
+    env.win.document.body.appendChild(containerElement);
 
-    new NameFrameRenderer().render(context, containerElement, creativeData);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(containerElement);
+    await new NameFrameRenderer().render(
+      context,
+      containerElement,
+      creativeData
+    );
   });
 
   it('should append iframe child', () => {
diff --git a/extensions/amp-a4a/0.1/test/test-real-time-config-manager.js b/extensions/amp-a4a/0.1/test/test-real-time-config-manager.js
deleted file mode 100644
index 1aad0b29cca97..0000000000000
--- a/extensions/amp-a4a/0.1/test/test-real-time-config-manager.js
+++ /dev/null
@@ -1,997 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-// Need the following side-effect import because in actual production code,
-// Fast Fetch impls are always loaded via an AmpAd tag, which means AmpAd is
-// always available for them. However, when we test an impl in isolation,
-// AmpAd is not loaded already, so we need to load it separately.
-import '../../../amp-ad/0.1/amp-ad';
-import {AmpA4A} from '../amp-a4a';
-import {CONSENT_POLICY_STATE} from '../../../../src/consent-state';
-import {
-  RTC_ERROR_ENUM,
-  RealTimeConfigManager,
-} from '../real-time-config-manager';
-import {Services} from '../../../../src/services';
-import {Xhr} from '../../../../src/service/xhr-impl';
-import {createElementWithAttributes} from '../../../../src/dom';
-import {dev, user} from '../../../../src/log';
-import {isFiniteNumber} from '../../../../src/types';
-
-describes.realWin('real-time-config-manager', {amp: true}, (env) => {
-  let element;
-  let a4aElement;
-  let fetchJsonStub;
-  let getCalloutParam_, maybeExecuteRealTimeConfig_, validateRtcConfig_;
-  let truncUrl_, inflateAndSendRtc_, sendErrorMessage;
-  let rtc;
-
-  beforeEach(() => {
-    // Ensures window location == AMP cache passes.
-    env.win.__AMP_MODE.test = true;
-
-    const doc = env.win.document;
-    element = createElementWithAttributes(env.win.document, 'amp-ad', {
-      'width': '200',
-      'height': '50',
-      'type': 'doubleclick',
-      'layout': 'fixed',
-    });
-    doc.body.appendChild(element);
-    fetchJsonStub = env.sandbox.stub(Xhr.prototype, 'fetchJson');
-    a4aElement = new AmpA4A(element);
-
-    // RealTimeConfigManager uses the UrlReplacements service scoped to the A4A
-    // (FIE), but for testing stub in the parent service for simplicity.
-    const urlReplacements = Services.urlReplacementsForDoc(element);
-    env.sandbox
-      .stub(Services, 'urlReplacementsForDoc')
-      .withArgs(a4aElement.element)
-      .returns(urlReplacements);
-
-    rtc = new RealTimeConfigManager(a4aElement);
-    maybeExecuteRealTimeConfig_ = rtc.maybeExecuteRealTimeConfig.bind(rtc);
-    getCalloutParam_ = rtc.getCalloutParam_.bind(rtc);
-    validateRtcConfig_ = rtc.validateRtcConfig_.bind(rtc);
-    truncUrl_ = rtc.truncUrl_.bind(rtc);
-    inflateAndSendRtc_ = rtc.inflateAndSendRtc_.bind(rtc);
-    sendErrorMessage = rtc.sendErrorMessage.bind(rtc);
-  });
-
-  function setFetchJsonStubBehavior(params, response, isString, shouldFail) {
-    if (shouldFail) {
-      fetchJsonStub.withArgs(params).returns(Promise.reject('FAIL'));
-    } else {
-      const textFunction = () => {
-        return !isString
-          ? Promise.resolve(JSON.stringify(response))
-          : Promise.resolve(response);
-      };
-      fetchJsonStub.withArgs(params).returns(
-        Promise.resolve({
-          status: 200,
-          text: textFunction,
-        })
-      );
-    }
-  }
-
-  function setRtcConfig(rtcConfig) {
-    element.setAttribute('rtc-config', JSON.stringify(rtcConfig));
-  }
-
-  describe('#truncUrl_', () => {
-    it('truncates URL', () => {
-      let url = 'https://www.example.biz/?';
-      for (let i = 0; i < 1000; i++) {
-        url += '&23456=8901234567';
-      }
-      expect(url.length).to.be.above(16384);
-      url = truncUrl_(url);
-      expect(url.length).to.be.at.most(16384);
-      expect(url).to.contain('&__trunc__=1');
-    });
-  });
-
-  describe('#getCalloutParam_', () => {
-    it('should convert url to callout param when parseable', () => {
-      const url = 'https://www.example.test/endpoint.php?unincluded';
-      const ard = getCalloutParam_(url);
-      expect(ard).to.equal('www.example.test/endpoint.php');
-    });
-
-    it('should convert & trunc url when parseable', () => {
-      const url =
-        'https://www.example.test/thisIsTooMany' +
-        'Characters1234567891011121314.php';
-      const ard = getCalloutParam_(url);
-      expect(ard).to.equal(
-        'www.example.test/thisIsTooManyCharacters1234567891'
-      );
-    });
-  });
-
-  describe('#maybeExecuteRealTimeConfig_', () => {
-    function executeTest(args) {
-      const {
-        urls,
-        vendors,
-        timeoutMillis,
-        rtcCalloutResponses,
-        expectedCalloutUrls,
-        responseIsString,
-        failXhr,
-        expectedRtcArray,
-        calloutCount,
-      } = args;
-      setRtcConfig({urls, vendors, timeoutMillis});
-      (expectedCalloutUrls || []).forEach((expectedUrl, i) => {
-        setFetchJsonStubBehavior(
-          expectedUrl,
-          rtcCalloutResponses[i],
-          responseIsString,
-          failXhr
-        );
-      });
-      const customMacros = args['customMacros'] || {};
-      const rtcResponsePromiseArray = maybeExecuteRealTimeConfig_(customMacros);
-      return rtcResponsePromiseArray.then((rtcResponseArray) => {
-        expect(rtcResponseArray.length).to.equal(expectedRtcArray.length);
-        expect(fetchJsonStub.callCount).to.equal(calloutCount);
-        (expectedCalloutUrls || []).forEach((url) => {
-          expect(fetchJsonStub).to.have.been.calledWith(url);
-        });
-        rtcResponseArray.forEach((rtcResponse, i) => {
-          expect(rtcResponse.response).to.deep.equal(
-            expectedRtcArray[i].response
-          );
-          expect(rtcResponse.callout).to.equal(expectedRtcArray[i].callout);
-          expect(rtcResponse.error).to.equal(expectedRtcArray[i].error);
-          expect(Object.keys(rtcResponse).sort()).to.deep.equal(
-            Object.keys(expectedRtcArray[i]).sort()
-          );
-          expect(isFiniteNumber(rtcResponse.rtcTime)).to.be.true;
-        });
-      });
-    }
-
-    const urlMacros = [
-      'slot_id=SLOT_ID',
-      'page_id=PAGE_ID',
-      'adx=ADX',
-      'ady=ADY',
-    ];
-
-    function generateUrls(numUrls, numMacroUrls) {
-      const urls = [];
-      for (let i = 0; i < numUrls; i++) {
-        urls.push(`https://www.${i}.com/`);
-      }
-      for (let i = 0; i < numMacroUrls; i++) {
-        urls.push(
-          `https://www.${i + numUrls}.com/?${urlMacros
-            .slice(0, i + 1)
-            .join('&')}`
-        );
-      }
-      return urls;
-    }
-
-    function rtcEntry(response, url, error, isVendor) {
-      // If this is an entry for a vendor, then the callout is just
-      // the vendor name passed in to url here.
-      const callout = !!isVendor ? url : getCalloutParam_(url);
-      return response
-        ? {response, callout, rtcTime: 10}
-        : {callout, error, rtcTime: 10};
-    }
-
-    function generateCalloutResponses(numGoodResponses) {
-      const rtcCalloutResponses = [];
-      let response;
-      for (let i = 0; i < numGoodResponses; i++) {
-        response = {};
-        response[`response${i}`] = {};
-        response[`response${i}`][`foo${i}`] = [`a${i}`, `b${i}`, `c${i}`];
-        rtcCalloutResponses.push(response);
-      }
-      return rtcCalloutResponses;
-    }
-
-    it('should send RTC callouts for all specified URLS without macros', () => {
-      const calloutCount = 5;
-      const urls = generateUrls(5);
-      const rtcCalloutResponses = [
-        {'response1': {'fooArray': ['foo']}},
-        {'response2': {'test': 'test2'}},
-        {'response3': {'apple': 'banana'}},
-        {
-          'response4': {
-            'animalArray': ['cat', 'dog'],
-            'foodObject': {'apple': true, 'car': false},
-          },
-        },
-        {'response5': [1, 2, 3]},
-      ];
-      const expectedRtcArray = [];
-      urls.forEach((url, i) => {
-        expectedRtcArray.push({
-          callout: getCalloutParam_(url),
-          rtcTime: 10,
-          response: rtcCalloutResponses[i],
-        });
-      });
-      return executeTest({
-        urls,
-        inflatedUrls: urls,
-        rtcCalloutResponses,
-        calloutCount,
-        expectedCalloutUrls: urls,
-        expectedRtcArray,
-      });
-    });
-
-    it('should send only 5 RTC callouts for all URLS without macros', () => {
-      const urls = generateUrls(7);
-      const expectedCalloutUrls = generateUrls(5);
-      const rtcCalloutResponses = generateCalloutResponses(7);
-      const calloutCount = 5;
-      const expectedRtcArray = [];
-      for (let i = 0; i < 5; i++) {
-        expectedRtcArray.push(rtcEntry(rtcCalloutResponses[i], urls[i]));
-      }
-      expectedRtcArray.push(
-        rtcEntry(null, urls[5], RTC_ERROR_ENUM.MAX_CALLOUTS_EXCEEDED)
-      );
-      expectedRtcArray.push(
-        rtcEntry(null, urls[6], RTC_ERROR_ENUM.MAX_CALLOUTS_EXCEEDED)
-      );
-      return executeTest({
-        urls,
-        inflatedUrls: urls,
-        rtcCalloutResponses,
-        calloutCount,
-        expectedCalloutUrls,
-        expectedRtcArray,
-      });
-    });
-
-    it('should send RTC callouts to inflated publisher URLs', () => {
-      const urls = generateUrls(1, 2);
-      const inflatedUrls = [
-        'https://www.0.com/',
-        'https://www.1.com/?slot_id=1',
-        'https://www.2.com/?slot_id=1&page_id=2',
-      ];
-      const rtcCalloutResponses = generateCalloutResponses(3);
-      const customMacros = {
-        SLOT_ID: 1,
-        PAGE_ID: () => 2,
-        FOO_ID: () => 3,
-      };
-      const expectedRtcArray = [];
-      rtcCalloutResponses.forEach((rtcResponse, i) => {
-        expectedRtcArray.push(rtcEntry(rtcResponse, inflatedUrls[i]));
-      });
-      const calloutCount = 3;
-      return executeTest({
-        urls,
-        customMacros,
-        inflatedUrls,
-        rtcCalloutResponses,
-        calloutCount,
-        expectedCalloutUrls: inflatedUrls,
-        expectedRtcArray,
-      });
-    });
-    it('should send RTC callouts to inflated vendor URLs', () => {
-      const vendors = {
-        'fAkeVeNdOR': {SLOT_ID: 1, PAGE_ID: 2},
-      };
-      const inflatedUrls = [
-        'https://localhost:8000/examples/rtcE1.json?slot_id=1&page_id=3&foo_id=4',
-      ];
-      const rtcCalloutResponses = [{'response1': {'fooArray': ['foo']}}];
-      const customMacros = {
-        PAGE_ID: () => 3,
-        FOO_ID: () => 4,
-      };
-      const calloutCount = 1;
-      const expectedRtcArray = [];
-      expectedRtcArray.push(
-        rtcEntry(
-          rtcCalloutResponses[0],
-          Object.keys(vendors)[0].toLowerCase(),
-          undefined,
-          true
-        )
-      );
-      return executeTest({
-        vendors,
-        customMacros,
-        inflatedUrls,
-        rtcCalloutResponses,
-        calloutCount,
-        expectedCalloutUrls: inflatedUrls,
-        expectedRtcArray,
-      });
-    });
-    it('should send callouts to vendor URLs with object/array macros', () => {
-      const vendors = {
-        'fAkeVeNdOR': {
-          SLOT_ID: {'key': 'value'},
-          PAGE_ID: [1, 2, 3],
-          FOO_ID: 'String',
-        },
-      };
-      const inflatedUrls = [
-        'https://localhost:8000/examples/rtcE1.json?slot_id=%7B%22key%22%3A%22' +
-          'value%22%7D&page_id=%5B1%2C2%2C3%5D&foo_id=String',
-      ];
-      const rtcCalloutResponses = [{'response1': {'fooArray': ['foo']}}];
-      const calloutCount = 1;
-      const expectedRtcArray = [];
-      expectedRtcArray.push(
-        rtcEntry(
-          rtcCalloutResponses[0],
-          Object.keys(vendors)[0].toLowerCase(),
-          undefined,
-          true
-        )
-      );
-      return executeTest({
-        vendors,
-        inflatedUrls,
-        rtcCalloutResponses,
-        calloutCount,
-        expectedCalloutUrls: inflatedUrls,
-        expectedRtcArray,
-      });
-    });
-    it('should send RTC callouts to inflated publisher and vendor URLs', () => {
-      const urls = generateUrls(2, 2);
-      const vendors = {
-        'fAkeVeNdOR': {SLOT_ID: 0, PAGE_ID: 1},
-      };
-      const inflatedUrls = [
-        'https://www.0.com/',
-        'https://www.1.com/',
-        'https://www.2.com/?slot_id=1',
-        'https://www.3.com/?slot_id=1&page_id=2',
-        'https://localhost:8000/examples/rtcE1.json?slot_id=1&page_id=2&foo_id=3',
-      ];
-      const rtcCalloutResponses = generateCalloutResponses(5);
-      const customMacros = {
-        SLOT_ID: 1,
-        PAGE_ID: () => 2,
-        FOO_ID: () => 3,
-      };
-      const expectedRtcArray = [];
-      for (let i = 0; i < 4; i++) {
-        expectedRtcArray.push(
-          rtcEntry(rtcCalloutResponses[i], inflatedUrls[i])
-        );
-      }
-      expectedRtcArray.push(
-        rtcEntry(
-          rtcCalloutResponses[4],
-          Object.keys(vendors)[0].toLowerCase(),
-          undefined,
-          true
-        )
-      );
-      const calloutCount = 5;
-      return executeTest({
-        urls,
-        vendors,
-        customMacros,
-        inflatedUrls,
-        rtcCalloutResponses,
-        calloutCount,
-        expectedCalloutUrls: inflatedUrls,
-        expectedRtcArray,
-      });
-    });
-    it('should ignore bad macros for vendor urls', () => {
-      const vendors = {
-        'fAkeVeNdOR': {'slot_id=SLOT_ID': 0, PAGE_ID: 1},
-      };
-      const inflatedUrls = [
-        'https://localhost:8000/examples/rtcE1.json?slot_id=SLOT_ID&page_id=1&foo_id=FOO_ID',
-      ];
-      const rtcCalloutResponses = generateCalloutResponses(1);
-      const expectedRtcArray = [];
-      for (let i = 0; i < 1; i++) {
-        expectedRtcArray.push(
-          rtcEntry(
-            rtcCalloutResponses[i],
-            Object.keys(vendors)[0].toLowerCase(),
-            undefined,
-            true
-          )
-        );
-      }
-      const calloutCount = 1;
-      env.sandbox.stub(user(), 'error').callsFake(() => {});
-      return executeTest({
-        vendors,
-        inflatedUrls,
-        rtcCalloutResponses,
-        calloutCount,
-        expectedCalloutUrls: inflatedUrls,
-        expectedRtcArray,
-      });
-    });
-
-    it('should favor publisher URLs over vendor URLs', () => {
-      const urls = generateUrls(3, 2);
-      const vendors = {
-        'fAkeVeNdOR': {SLOT_ID: 0, PAGE_ID: 1},
-      };
-      const inflatedUrls = [
-        'https://www.0.com/',
-        'https://www.1.com/',
-        'https://www.2.com/',
-        'https://www.3.com/?slot_id=1',
-        'https://www.4.com/?slot_id=1&page_id=2',
-      ];
-      const rtcCalloutResponses = generateCalloutResponses(6);
-      const customMacros = {
-        SLOT_ID: 1,
-        PAGE_ID: () => 2,
-        FOO_ID: () => 3,
-      };
-      const expectedRtcArray = [];
-      for (let i = 0; i < 5; i++) {
-        expectedRtcArray.push(
-          rtcEntry(rtcCalloutResponses[i], inflatedUrls[i])
-        );
-      }
-      expectedRtcArray.push(
-        rtcEntry(
-          null,
-          Object.keys(vendors)[0].toLowerCase(),
-          RTC_ERROR_ENUM.MAX_CALLOUTS_EXCEEDED,
-          true
-        )
-      );
-      const calloutCount = 5;
-      return executeTest({
-        urls,
-        vendors,
-        customMacros,
-        rtcCalloutResponses,
-        calloutCount,
-        expectedCalloutUrls: inflatedUrls,
-        expectedRtcArray,
-      });
-    });
-    it('should not send more than one RTC callout to the same url', () => {
-      const urls = ['https://www.0.com/', 'https://www.0.com/'];
-      const rtcCalloutResponses = generateCalloutResponses(1);
-      const calloutCount = 1;
-      const expectedCalloutUrls = ['https://www.0.com/'];
-      const expectedRtcArray = [
-        {
-          response: rtcCalloutResponses[0],
-          callout: getCalloutParam_(urls[0]),
-          rtcTime: 10,
-        },
-        {
-          callout: getCalloutParam_(urls[1]),
-          error: RTC_ERROR_ENUM.DUPLICATE_URL,
-          rtcTime: 10,
-        },
-      ];
-      return executeTest({
-        urls,
-        inflatedUrls: urls,
-        rtcCalloutResponses,
-        calloutCount,
-        expectedCalloutUrls,
-        expectedRtcArray,
-      });
-    });
-
-    it('should not send an RTC callout to an insecure url', () => {
-      const urls = [
-        'https://www.1.com/',
-        'https://www.2.com',
-        'http://www.insecure.biz/',
-      ];
-      const rtcCalloutResponses = [
-        {'response1': {'fooArray': ['foo']}},
-        {'response2': {'insecure': ['virus']}},
-      ];
-      const calloutCount = 2;
-      const expectedCalloutUrls = ['https://www.1.com/', 'https://www.2.com'];
-      const expectedRtcArray = [
-        {
-          response: rtcCalloutResponses[0],
-          callout: getCalloutParam_(urls[0]),
-          rtcTime: 10,
-        },
-        {
-          response: rtcCalloutResponses[1],
-          callout: getCalloutParam_(urls[1]),
-          rtcTime: 10,
-        },
-        {
-          callout: getCalloutParam_(urls[2]),
-          error: RTC_ERROR_ENUM.INSECURE_URL,
-          rtcTime: 10,
-        },
-      ];
-      return executeTest({
-        urls,
-        inflatedUrls: urls,
-        rtcCalloutResponses,
-        calloutCount,
-        expectedCalloutUrls,
-        expectedRtcArray,
-      });
-    });
-    it('should not send RTC callout to unknown vendor', () => {
-      const vendors = {
-        'unknownvendor': {SLOT_ID: 1, PAGE_ID: 2},
-      };
-      const calloutCount = 0;
-      const expectedRtcArray = [];
-      expectedRtcArray.push(
-        rtcEntry(
-          null,
-          Object.keys(vendors)[0].toLowerCase(),
-          RTC_ERROR_ENUM.UNKNOWN_VENDOR,
-          true
-        )
-      );
-      return executeTest({vendors, calloutCount, expectedRtcArray});
-    });
-    it('should handle bad JSON response', () => {
-      const urls = generateUrls(1);
-      const rtcCalloutResponses = ['{foo:bar'];
-      const expectedRtcArray = [];
-      rtcCalloutResponses.forEach((rtcResponse, i) => {
-        expectedRtcArray.push(
-          rtcEntry(null, urls[i], RTC_ERROR_ENUM.MALFORMED_JSON_RESPONSE)
-        );
-      });
-      const calloutCount = 1;
-      return executeTest({
-        urls,
-        inflatedUrls: urls,
-        rtcCalloutResponses,
-        calloutCount,
-        expectedCalloutUrls: urls,
-        expectedRtcArray,
-        responseIsString: true,
-      });
-    });
-    it('should catch errors due to network failure', () => {
-      const urls = generateUrls(1);
-      const rtcCalloutResponses = generateCalloutResponses(1);
-      const expectedRtcArray = [];
-      rtcCalloutResponses.forEach((rtcResponse, i) => {
-        expectedRtcArray.push(
-          rtcEntry(null, urls[i], RTC_ERROR_ENUM.NETWORK_FAILURE)
-        );
-      });
-      const calloutCount = 1;
-      return executeTest({
-        urls,
-        inflatedUrls: urls,
-        rtcCalloutResponses,
-        calloutCount,
-        expectedCalloutUrls: urls,
-        expectedRtcArray,
-        failXhr: true,
-      });
-    });
-    for (const consentState in CONSENT_POLICY_STATE) {
-      it(`should handle consentState ${consentState}`, () => {
-        setRtcConfig({urls: ['https://foo.com']});
-        const rtcResult = maybeExecuteRealTimeConfig_(
-          {},
-          CONSENT_POLICY_STATE[consentState]
-        );
-        switch (CONSENT_POLICY_STATE[consentState]) {
-          case CONSENT_POLICY_STATE.SUFFICIENT:
-          case CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED:
-            expect(rtcResult).to.be.ok;
-            return rtcResult.then(() => expect(fetchJsonStub).to.be.calledOnce);
-          case CONSENT_POLICY_STATE.UNKNOWN:
-          case CONSENT_POLICY_STATE.INSUFFICIENT:
-            return rtcResult.then((result) => {
-              expect(result).to.deep.equal([]);
-              expect(fetchJsonStub).to.not.be.called;
-            });
-            break;
-          default:
-            throw new Error(`unknown consent state ${consentState}`);
-        }
-      });
-    }
-  });
-
-  describe('#validateRtcConfig', () => {
-    let validatedRtcConfig;
-    afterEach(() => {
-      element.removeAttribute('rtc-config');
-    });
-
-    it('should return parsed rtcConfig for valid rtcConfig', () => {
-      const rtcConfig = {
-        'vendors': {
-          'fakeVendor': {'SLOT_ID': '1', 'PAGE_ID': '1'},
-          'nonexistent-vendor': {'SLOT_ID': '1'},
-          'fakeVendor2': {'SLOT_ID': '1'},
-        },
-        'urls': [
-          'https://localhost:4443/posts?slot_id=SLOT_ID',
-          'https://broken.zzzzzzz',
-        ],
-        'timeoutMillis': 500,
-      };
-      setRtcConfig(rtcConfig);
-      validateRtcConfig_(element);
-      expect(rtc.rtcConfig_).to.be.ok;
-      expect(rtc.rtcConfig_).to.deep.equal(rtcConfig);
-    });
-
-    it('should allow timeout of 0', () => {
-      const rtcConfig = {
-        'vendors': {
-          'fakeVendor': {'SLOT_ID': '1', 'PAGE_ID': '1'},
-          'nonexistent-vendor': {'SLOT_ID': '1'},
-          'fakeVendor2': {'SLOT_ID': '1'},
-        },
-        'urls': [
-          'https://localhost:4443/posts?slot_id=SLOT_ID',
-          'https://broken.zzzzzzz',
-        ],
-        'timeoutMillis': 0,
-      };
-      setRtcConfig(rtcConfig);
-      validateRtcConfig_(element);
-      expect(rtc.rtcConfig_).to.be.ok;
-      expect(rtc.rtcConfig_).to.deep.equal(rtcConfig);
-    });
-
-    it('should not allow timeout greater than default', () => {
-      const rtcConfig = {
-        'vendors': {
-          'fakeVendor': {'SLOT_ID': '1', 'PAGE_ID': '1'},
-          'nonexistent-vendor': {'SLOT_ID': '1'},
-          'fakeVendor2': {'SLOT_ID': '1'},
-        },
-        'urls': [
-          'https://localhost:4443/posts?slot_id=SLOT_ID',
-          'https://broken.zzzzzzz',
-        ],
-        'timeoutMillis': 1000000,
-      };
-      const expectedRtcConfig = {
-        'vendors': {
-          'fakeVendor': {'SLOT_ID': '1', 'PAGE_ID': '1'},
-          'nonexistent-vendor': {'SLOT_ID': '1'},
-          'fakeVendor2': {'SLOT_ID': '1'},
-        },
-        'urls': [
-          'https://localhost:4443/posts?slot_id=SLOT_ID',
-          'https://broken.zzzzzzz',
-        ],
-        'timeoutMillis': 1000,
-      };
-      setRtcConfig(rtcConfig);
-      validateRtcConfig_(element);
-      expect(rtc.rtcConfig_).to.be.ok;
-      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
-    });
-
-    it('should return false if rtc-config not specified', () => {
-      expect(validateRtcConfig_(element)).to.be.false;
-    });
-
-    // Test various misconfigurations that are missing vendors or urls.
-    [
-      {'timeoutMillis': 500},
-      {'vendors': {}},
-      {'urls': []},
-      {'vendors': {}, 'urls': []},
-      {'vendors': 'incorrect', 'urls': 'incorrect'},
-    ].forEach((rtcConfig) => {
-      it('should return false for rtcConfig missing required values', () => {
-        setRtcConfig(rtcConfig);
-        allowConsoleError(() => {
-          dev().error('RTCTESTS', 'Error');
-          validatedRtcConfig = validateRtcConfig_(element);
-        });
-        expect(validatedRtcConfig).to.be.false;
-      });
-    });
-
-    it('should return false for bad JSON rtcConfig', () => {
-      const rtcConfig = '{"urls" : ["https://google.com"]';
-      element.setAttribute('rtc-config', rtcConfig);
-      validatedRtcConfig = validateRtcConfig_(element);
-      expect(validatedRtcConfig).to.be.false;
-    });
-  });
-
-  describe('#inflateAndSendRtc_', () => {
-    it('should not send RTC if macro expansion exceeds timeout', () => {
-      const url = 'https://www.example.biz/?dummy=DUMMY';
-      rtc.rtcConfig_ = {
-        timeoutMillis: 10,
-      };
-      const macroDelay = 20;
-      const macros = {
-        DUMMY: () => {
-          return Services.timerFor(env.win)
-            .promise(macroDelay)
-            .then(() => {
-              return 'foo';
-            });
-        },
-      };
-      inflateAndSendRtc_(url, macros);
-      return rtc.promiseArray_[0].then((errorResponse) => {
-        expect(errorResponse.error).to.equal(
-          RTC_ERROR_ENUM.MACRO_EXPAND_TIMEOUT
-        );
-      });
-    });
-
-    it('should not send RTC if no longer current', () => {
-      const url = 'https://www.example.biz/';
-      rtc.rtcConfig_ = {
-        timeoutMillis: 1000,
-      };
-      const macros = {};
-      // Simulate an unlayoutCallback call
-      inflateAndSendRtc_(url, macros);
-      a4aElement.promiseId_++;
-      return rtc.promiseArray_[0].then((errorResponse) => {
-        expect(errorResponse).to.be.undefined;
-      });
-    });
-  });
-
-  describe('modifyRtcConfigForConsentStateSettings', () => {
-    beforeEach(() => {
-      rtc.rtcConfig_ = {
-        'vendors': {
-          'vendorA': {'SLOT_ID': '1', 'PAGE_ID': '1'},
-          'vendorB': {'SLOT_ID': '1'},
-          'vendorC': {'PAGE_ID': '1'},
-        },
-        'urls': [
-          'https://www.rtc.com/example1',
-          'https://www.other-rtc.com/example2',
-        ],
-        'timeoutMillis': 500,
-      };
-    });
-
-    it('should not modify rtcConfig if consent state is valid', () => {
-      const expectedRtcConfig = {...rtc.rtcConfig_};
-      rtc.consentState_ = CONSENT_POLICY_STATE.SUFFICIENT;
-      rtc.modifyRtcConfigForConsentStateSettings();
-      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
-    });
-
-    it('should clear all callouts if global setting mismatched', () => {
-      rtc.rtcConfig_.sendRegardlessOfConsentState = ['INSUFFICIENT'];
-      const expectedRtcConfig = {...rtc.rtcConfig_};
-      expectedRtcConfig.vendors = {};
-      expectedRtcConfig.urls = [];
-      rtc.consentState_ = CONSENT_POLICY_STATE.UNKNOWN;
-      rtc.modifyRtcConfigForConsentStateSettings();
-      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
-    });
-
-    it('should handle empty urls array', () => {
-      rtc.consentState_ = CONSENT_POLICY_STATE.UNKNOWN;
-      rtc.rtcConfig_.urls = [];
-      expect(() => rtc.modifyRtcConfigForConsentStateSettings()).not.to.throw();
-    });
-
-    it('should handle empty vendors object', () => {
-      rtc.consentState_ = CONSENT_POLICY_STATE.UNKNOWN;
-      rtc.rtcConfig_.vendors = {};
-      expect(() => rtc.modifyRtcConfigForConsentStateSettings()).not.to.throw();
-    });
-
-    it('should handle missing urls array', () => {
-      rtc.consentState_ = CONSENT_POLICY_STATE.UNKNOWN;
-      rtc.rtcConfig_.urls = undefined;
-      expect(() => rtc.modifyRtcConfigForConsentStateSettings()).not.to.throw();
-    });
-
-    it('should handle missing vendors object', () => {
-      rtc.consentState_ = CONSENT_POLICY_STATE.UNKNOWN;
-      rtc.rtcConfig_.vendors = undefined;
-      expect(() => rtc.modifyRtcConfigForConsentStateSettings()).not.to.throw();
-    });
-
-    it('should clear just invalid custom URLs', () => {
-      rtc.rtcConfig_.vendors = {
-        'vendorA': {
-          'sendRegardlessOfConsentState': true,
-          'macros': {'SLOT_ID': '1', 'PAGE_ID': '1'},
-        },
-        'vendorB': {
-          'sendRegardlessOfConsentState': ['INSUFFICIENT', 'UNKNOWN'],
-          'macros': {'SLOT_ID': '1'},
-        },
-        'vendorC': {
-          'sendRegardlessOfConsentState': ['UNKNOWN'],
-          'macros': {'SLOT_ID': '1'},
-        },
-      };
-      const expectedRtcConfig = {...rtc.rtcConfig_};
-      expectedRtcConfig.urls = [];
-      rtc.consentState_ = CONSENT_POLICY_STATE.UNKNOWN;
-      rtc.modifyRtcConfigForConsentStateSettings();
-      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
-    });
-
-    it('should clear just invalid vendor callouts', () => {
-      rtc.rtcConfig_.urls = [
-        {
-          'sendRegardlessOfConsentState': true,
-          'url': 'https://www.rtc.com/example1',
-        },
-        {
-          'sendRegardlessOfConsentState': ['INSUFFICIENT', 'UNKNOWN'],
-          'url': 'https://www.other-rtc.com/example2',
-        },
-      ];
-      const expectedRtcConfig = {...rtc.rtcConfig_};
-      expectedRtcConfig.vendors = {};
-      rtc.consentState_ = CONSENT_POLICY_STATE.INSUFFICIENT;
-      rtc.modifyRtcConfigForConsentStateSettings();
-      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
-    });
-
-    it('should not clear callouts if per-callout setting valid', () => {
-      rtc.rtcConfig_.vendors = {
-        'vendorA': {
-          'sendRegardlessOfConsentState': true,
-          'macros': {'SLOT_ID': '1', 'PAGE_ID': '1'},
-        },
-        'vendorB': {
-          'sendRegardlessOfConsentState': ['UNKNOWN'],
-          'macros': {'SLOT_ID': '1'},
-        },
-        'vendorC': {'SLOT_ID': '1'},
-      };
-      rtc.rtcConfig_.urls = [
-        {
-          'sendRegardlessOfConsentState': true,
-          'url': 'https://www.rtc.com/example1',
-        },
-        'https://www.other-rtc.com/example2',
-      ];
-      const expectedRtcConfig = {...rtc.rtcConfig_};
-      expectedRtcConfig.vendors = {
-        'vendorA': {
-          'sendRegardlessOfConsentState': true,
-          'macros': {'SLOT_ID': '1', 'PAGE_ID': '1'},
-        },
-      };
-      expectedRtcConfig.urls = [
-        {
-          'sendRegardlessOfConsentState': true,
-          'url': 'https://www.rtc.com/example1',
-        },
-      ];
-      rtc.consentState_ = CONSENT_POLICY_STATE.INSUFFICIENT;
-      rtc.modifyRtcConfigForConsentStateSettings();
-      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
-    });
-
-    it('should handle mix of global and individual consent settings', () => {
-      rtc.rtcConfig_.vendors = {
-        'vendorA': {
-          'sendRegardlessOfConsentState': true,
-          'macros': {'SLOT_ID': '1', 'PAGE_ID': '1'},
-        },
-        'vendorB': {
-          'sendRegardlessOfConsentState': ['UNKNOWN'],
-          'macros': {'SLOT_ID': '1'},
-        },
-        'vendorC': {'SLOT_ID': '1'},
-      };
-      rtc.rtcConfig_.urls = [
-        {
-          'sendRegardlessOfConsentState': true,
-          'url': 'https://www.rtc.com/example1',
-        },
-        'https://www.other-rtc.com/example2',
-      ];
-      rtc.rtcConfig_.sendRegardlessOfConsentState = ['INSUFFICIENT'];
-      const expectedRtcConfig = {...rtc.rtcConfig_};
-      expectedRtcConfig.vendors = {
-        'vendorA': {
-          'sendRegardlessOfConsentState': true,
-          'macros': {'SLOT_ID': '1', 'PAGE_ID': '1'},
-        },
-        'vendorC': {'SLOT_ID': '1'},
-      };
-      expectedRtcConfig.urls = [
-        {
-          'sendRegardlessOfConsentState': true,
-          'url': 'https://www.rtc.com/example1',
-        },
-        'https://www.other-rtc.com/example2',
-      ];
-      rtc.consentState_ = CONSENT_POLICY_STATE.INSUFFICIENT;
-      rtc.modifyRtcConfigForConsentStateSettings();
-      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
-    });
-
-    it('should always clear RTC for a new consent state', () => {
-      rtc.consentState_ = 'FAKE_NEW_CONSENT_STATE';
-      const expectedRtcConfig = {...rtc.rtcConfig_};
-
-      rtc.modifyRtcConfigForConsentStateSettings();
-      expectedRtcConfig.urls = [];
-      expectedRtcConfig.vendors = {};
-      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
-    });
-
-    it('should not clear RTC for a null consent state', () => {
-      rtc.consentState_ = null;
-      const expectedRtcConfig = {...rtc.rtcConfig_};
-      rtc.modifyRtcConfigForConsentStateSettings();
-      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
-    });
-  });
-
-  describe('sendErrorMessage', () => {
-    let imageStub, requestUrl;
-    let errorType, errorReportingUrl;
-    let imageMock;
-
-    beforeEach(() => {
-      // Make sure that we always send the message, as we are using
-      // the check Math.random() < reporting frequency.
-      env.sandbox.stub(Math, 'random').returns(0);
-      env.sandbox.stub(Xhr.prototype, 'fetch');
-      imageMock = {};
-      imageStub = env.sandbox.stub(env.win, 'Image').returns(imageMock);
-
-      errorType = RTC_ERROR_ENUM.TIMEOUT;
-      errorReportingUrl = 'https://www.example.test?e=ERROR_TYPE&h=HREF';
-      const allowlist = {ERROR_TYPE: true, HREF: true};
-      const macros = {
-        ERROR_TYPE: errorType,
-        HREF: env.win.location.href,
-      };
-
-      requestUrl = Services.urlReplacementsForDoc(
-        a4aElement.element
-      ).expandUrlSync(errorReportingUrl, macros, allowlist);
-    });
-
-    it('should send error message pingback to correct url', () => {
-      sendErrorMessage(errorType, errorReportingUrl);
-      expect(imageStub).to.be.calledOnce;
-      expect(imageMock.src).to.equal(requestUrl);
-    });
-  });
-});
diff --git a/extensions/amp-a4a/0.1/test/test-refresh.js b/extensions/amp-a4a/0.1/test/test-refresh.js
index 21573d4a52891..56c3dd4240301 100644
--- a/extensions/amp-a4a/0.1/test/test-refresh.js
+++ b/extensions/amp-a4a/0.1/test/test-refresh.js
@@ -21,10 +21,9 @@ import {
   RefreshManager,
   getPublisherSpecifiedRefreshInterval,
 } from '../refresh-manager';
-import {RefreshIntersectionObserverPolyfillWrapper} from '../refresh-intersection-observer-polyfill-wrapper';
 import {Services} from '../../../../src/services';
 
-describe('refresh', () => {
+describes.sandboxed('refresh', {}, (env) => {
   let mockA4a;
   const config = {
     visiblePercentageMin: 50,
@@ -37,7 +36,7 @@ describe('refresh', () => {
     div.setAttribute('style', 'width:1px; height:1px;');
     div.setAttribute('type', 'doubleclick');
     div.setAttribute(DATA_ATTR_NAME, '35');
-    window.sandbox.replaceGetter(div, 'isConnected', () => true);
+    env.sandbox.replaceGetter(div, 'isConnected', () => true);
     div.getAmpDoc = () => {
       return {
         getMetaByName: (name) => {
@@ -71,6 +70,17 @@ describe('refresh', () => {
       ).to.be.null;
     });
 
+    it('should get null refreshInterval when disabled via data attr', () => {
+      mockA4a.element.setAttribute(DATA_ATTR_NAME, false);
+      expect(
+        getPublisherSpecifiedRefreshInterval(
+          mockA4a.element,
+          window,
+          'doubleclick'
+        )
+      ).to.be.null;
+    });
+
     it('should get refreshInterval from slot', () => {
       expect(
         getPublisherSpecifiedRefreshInterval(
@@ -97,7 +107,7 @@ describe('refresh', () => {
     });
 
     it('should call convertConfiguration_ and set proper units', () => {
-      const getConfigurationSpy = window.sandbox.spy(
+      const getConfigurationSpy = env.sandbox.spy(
         RefreshManager.prototype,
         'convertAndSanitizeConfiguration_'
       );
@@ -161,7 +171,7 @@ describe('refresh', () => {
     it('should execute the refresh event correctly', () => {
       // Attach element to DOM, as is necessary for request ampdoc.
       window.document.body.appendChild(mockA4a.element);
-      const refreshSpy = window.sandbox.spy(mockA4a, 'refresh');
+      const refreshSpy = env.sandbox.spy(mockA4a, 'refresh');
 
       // Ensure initial call to initiateRefreshCycle doesn't trigger refresh, as
       // this can have flaky results.
@@ -187,110 +197,4 @@ describe('refresh', () => {
         });
     });
   });
-
-  describe('RefreshIntersectionObserverPolyfillWrapper', () => {
-    let callback;
-    let callbackPromise;
-    let getRect;
-    let observerWrapper;
-
-    beforeEach(() => {
-      getRect = () => ({
-        top: 0,
-        bottom: 10,
-        left: 0,
-        right: 10,
-        width: 10,
-        height: 10,
-        x: 0,
-        y: 0,
-      });
-
-      window.sandbox.stub(Services, 'viewportForDoc').callsFake(() => {
-        return {
-          getRect,
-        };
-      });
-      window.sandbox.stub(Services, 'ampdoc').callsFake(() => {
-        return {
-          getRootNode: () => {
-            return window.document;
-          },
-          win: window,
-          isSingleDoc: () => {
-            return true;
-          },
-        };
-      });
-
-      mockA4a.element.setAttribute(DATA_MANAGER_ID_NAME, '0');
-      mockA4a.element.viewportCallback = () => {};
-      mockA4a.element.getLayoutBox = getRect;
-      mockA4a.element.getOwner = () => mockA4a.element;
-      mockA4a.getViewport = () => ({getRect});
-
-      let resolver;
-      callbackPromise = new Promise((resolve) => {
-        resolver = resolve;
-      });
-      callback = (entries) => resolver(entries);
-      observerWrapper = new RefreshIntersectionObserverPolyfillWrapper(
-        callback,
-        mockA4a,
-        {threshold: 0.5}
-      );
-    });
-
-    it('should invoke callback with intersection ratio 1', () => {
-      observerWrapper.observe(mockA4a.element);
-      return callbackPromise.then((entries) => {
-        expect(entries).to.be.ok;
-        expect(entries[0]).to.be.ok;
-        expect(entries[0].intersectionRatio).to.equal(1);
-      });
-    });
-
-    it('should invoke callback with intersection ratio 0.5', () => {
-      observerWrapper.viewport_ = {
-        getRect: () => ({
-          top: 0,
-          bottom: 5,
-          left: 0,
-          right: 10,
-          width: 10,
-          height: 5,
-          x: 0,
-          y: 0,
-        }),
-      };
-      observerWrapper.observe(mockA4a.element);
-      return callbackPromise.then((entries) => {
-        expect(entries).to.be.ok;
-        expect(entries[0]).to.be.ok;
-        expect(entries[0].intersectionRatio).to.equal(0.5);
-      });
-    });
-
-    it('should not invoke callback', () => {
-      const callbackSpy = window.sandbox.spy(callback);
-      observerWrapper.viewport_ = {
-        getRect: () => ({
-          top: 10,
-          bottom: 5,
-          left: 0,
-          right: 10,
-          width: 10,
-          height: 5,
-          x: 0,
-          y: 0,
-        }),
-      };
-      observerWrapper.observe(mockA4a.element);
-      return Services.timerFor(window)
-        .promise(500)
-        .then(() => {
-          expect(callbackSpy).to.not.be.called;
-        });
-    });
-  });
 });
diff --git a/extensions/amp-a4a/0.1/test/test-signature-verifier.js b/extensions/amp-a4a/0.1/test/test-signature-verifier.js
index 08db7aec34345..4eefb7089cd90 100644
--- a/extensions/amp-a4a/0.1/test/test-signature-verifier.js
+++ b/extensions/amp-a4a/0.1/test/test-signature-verifier.js
@@ -17,9 +17,9 @@
 // TODO(@jridgewell, #11081): fix linter to allow fixing weird indentation
 
 import {SignatureVerifier, VerificationStatus} from '../signature-verifier';
-import {base64EncodeFromBytes} from '../../../../src/utils/base64';
+import {base64EncodeFromBytes} from '../../../../src/core/types/string/base64';
 import {dev, user} from '../../../../src/log';
-import {utf8Encode} from '../../../../src/utils/bytes';
+import {utf8Encode} from '../../../../src/core/types/string/bytes';
 
 const networkFailure = {throws: new TypeError('Failed to fetch')};
 
diff --git a/extensions/amp-a4a/0.1/test/test-template-renderer.js b/extensions/amp-a4a/0.1/test/test-template-renderer.js
index 7e7e2cde0ce47..a542d1e899cfc 100644
--- a/extensions/amp-a4a/0.1/test/test-template-renderer.js
+++ b/extensions/amp-a4a/0.1/test/test-template-renderer.js
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
+import '../../../amp-mustache/0.2/amp-mustache';
 import {
   AMP_TEMPLATED_CREATIVE_HEADER_NAME,
   TemplateValidator,
-  getAmpAdTemplateHelper,
 } from '../template-validator';
-import {AmpMustache} from '../../../amp-mustache/0.1/amp-mustache';
 import {TemplateRenderer} from '../template-renderer';
 import {ValidatorResult} from '../amp-ad-type-defs';
 import {data} from './testdata/valid_css_at_rules_amp.reserialized';
-import {utf8Encode} from '../../../../src/utils/bytes';
+import {getAmpAdTemplateHelper} from '../amp-ad-template-helper';
+import {utf8Encode} from '../../../../src/core/types/string/bytes';
 
 const realWinConfig = {
   amp: {},
@@ -41,7 +41,7 @@ describes.realWin('TemplateRenderer', realWinConfig, (env) => {
     },
   };
 
-  let doc;
+  let doc, ampdoc;
   let containerElement;
   let context;
   let renderer;
@@ -50,6 +50,7 @@ describes.realWin('TemplateRenderer', realWinConfig, (env) => {
 
   beforeEach(() => {
     doc = env.win.document;
+    ampdoc = env.ampdoc;
     renderer = new TemplateRenderer();
     validator = new TemplateValidator();
 
@@ -57,15 +58,11 @@ describes.realWin('TemplateRenderer', realWinConfig, (env) => {
     containerElement.setAttribute('height', 50);
     containerElement.setAttribute('width', 320);
     containerElement.signals = () => ({
+      signal: () => {},
+      reset: () => {},
       whenSignal: () => Promise.resolve(),
     });
     containerElement.renderStarted = () => {};
-    containerElement.getPageLayoutBox = () => ({
-      left: 0,
-      top: 0,
-      width: 0,
-      height: 0,
-    });
     containerElement.getLayoutBox = () => ({
       left: 0,
       top: 0,
@@ -85,7 +82,7 @@ describes.realWin('TemplateRenderer', realWinConfig, (env) => {
     };
 
     env.sandbox
-      .stub(getAmpAdTemplateHelper(env.win), 'fetch')
+      .stub(getAmpAdTemplateHelper(ampdoc), 'fetch')
       .callsFake((url) => {
         expect(url).to.equal(templateUrl);
         return Promise.resolve(data.adTemplate);
@@ -93,6 +90,7 @@ describes.realWin('TemplateRenderer', realWinConfig, (env) => {
 
     validatorPromise = validator.validate(
       context,
+      containerElement,
       utf8Encode(
         JSON.stringify({
           templateUrl,
@@ -109,7 +107,12 @@ describes.realWin('TemplateRenderer', realWinConfig, (env) => {
   });
 
   it('should append iframe child with correct template values', () => {
-    env.win.AMP.registerTemplate('amp-mustache', AmpMustache);
+    env.installExtension(
+      'amp-mustache',
+      '0.2',
+      /* latest */ true,
+      /* auto */ false
+    );
     return validatorPromise.then((validatorOutput) => {
       // Sanity check. This behavior is tested in test-template-validator.js.
       expect(validatorOutput).to.be.ok;
@@ -122,8 +125,8 @@ describes.realWin('TemplateRenderer', realWinConfig, (env) => {
           const iframe = containerElement.querySelector('iframe');
           expect(iframe).to.be.ok;
           expect(iframe.contentWindow.document.body.innerHTML.trim()).to.equal(
-            '<div>\n      <p>ipsum lorem</p>\n      <a href=' +
-              '"https://buy.com/buy-1" target="_top">Click for ad!</a>' +
+            '<div>\n      <p>ipsum lorem</p>\n      <a target="_top" href=' +
+              '"https://buy.com/buy-1">Click for ad!</a>' +
               '\n    <amp-analytics class="i-amphtml-element i-amphtml' +
               '-notbuilt amp-notbuilt i-amphtml-layout-fixed i-amphtml' +
               '-layout-size-defined amp-unresolved i-amphtml-' +
@@ -135,7 +138,12 @@ describes.realWin('TemplateRenderer', realWinConfig, (env) => {
   });
 
   it('should set correct attributes on the iframe', () => {
-    env.win.AMP.registerTemplate('amp-mustache', AmpMustache);
+    env.installExtension(
+      'amp-mustache',
+      '0.2',
+      /* latest */ true,
+      /* auto */ false
+    );
     return validatorPromise.then((validatorOutput) => {
       // Sanity check. This behavior is tested in test-template-validator.js.
       expect(validatorOutput).to.be.ok;
@@ -158,7 +166,12 @@ describes.realWin('TemplateRenderer', realWinConfig, (env) => {
   });
 
   it('should style body of iframe document to be visible', () => {
-    env.win.AMP.registerTemplate('amp-mustache', AmpMustache);
+    env.installExtension(
+      'amp-mustache',
+      '0.2',
+      /* latest */ true,
+      /* auto */ false
+    );
     return validatorPromise.then((validatorOutput) => {
       // Sanity check. This behavior is tested in test-template-validator.js.
       expect(validatorOutput).to.be.ok;
@@ -178,9 +191,14 @@ describes.realWin('TemplateRenderer', realWinConfig, (env) => {
   });
 
   it('should insert analytics', () => {
-    env.win.AMP.registerTemplate('amp-mustache', AmpMustache);
+    env.installExtension(
+      'amp-mustache',
+      '0.2',
+      /* latest */ true,
+      /* auto */ false
+    );
     const insertAnalyticsSpy = env.sandbox.spy(
-      getAmpAdTemplateHelper(env.win),
+      getAmpAdTemplateHelper(ampdoc),
       'insertAnalytics'
     );
     return validatorPromise.then((validatorOutput) => {
diff --git a/extensions/amp-a4a/0.1/test/test-template-validator.js b/extensions/amp-a4a/0.1/test/test-template-validator.js
index 2cf3ad4856c5b..cd425c2d48476 100644
--- a/extensions/amp-a4a/0.1/test/test-template-validator.js
+++ b/extensions/amp-a4a/0.1/test/test-template-validator.js
@@ -18,11 +18,11 @@ import {
   AMP_TEMPLATED_CREATIVE_HEADER_NAME,
   DEPRECATED_AMP_TEMPLATED_CREATIVE_HEADER_NAME,
   TemplateValidator,
-  getAmpAdTemplateHelper,
 } from '../template-validator';
 import {AdResponseType, ValidatorResult} from '../amp-ad-type-defs';
 import {data} from './testdata/valid_css_at_rules_amp.reserialized';
-import {utf8Encode} from '../../../../src/utils/bytes';
+import {getAmpAdTemplateHelper} from '../amp-ad-template-helper';
+import {utf8Encode} from '../../../../src/core/types/string/bytes';
 
 const realWinConfig = {
   amp: {},
@@ -39,10 +39,15 @@ describes.realWin('TemplateValidator', realWinConfig, (env) => {
       }
     },
   };
+
   let validator;
+  let containerElement;
 
   beforeEach(() => {
     validator = new TemplateValidator();
+
+    containerElement = env.win.document.createElement('div');
+    env.win.document.body.appendChild(containerElement);
   });
 
   describe('AMP Result', () => {
@@ -50,7 +55,7 @@ describes.realWin('TemplateValidator', realWinConfig, (env) => {
 
     beforeEach(() => {
       env.sandbox
-        .stub(getAmpAdTemplateHelper(env.win), 'fetch')
+        .stub(getAmpAdTemplateHelper(env.ampdoc), 'fetch')
         .callsFake((url) => {
           expect(url).to.equal(templateUrl);
           return Promise.resolve(data.adTemplate);
@@ -58,6 +63,7 @@ describes.realWin('TemplateValidator', realWinConfig, (env) => {
 
       validatorPromise = validator.validate(
         {win: env.win},
+        containerElement,
         utf8Encode(
           JSON.stringify({
             templateUrl,
@@ -82,6 +88,7 @@ describes.realWin('TemplateValidator', realWinConfig, (env) => {
       validator
         .validate(
           {win: env.win},
+          containerElement,
           utf8Encode(
             JSON.stringify({
               templateUrl,
@@ -123,24 +130,55 @@ describes.realWin('TemplateValidator', realWinConfig, (env) => {
       });
     });
 
-    it('should have amp-analytics and mustache in customElementExtensions', () => {
+    it('should have amp-analytics and mustache in extensions', () => {
       return validatorPromise.then((validatorOutput) => {
         expect(validatorOutput).to.be.ok;
         expect(validatorOutput.creativeData).to.be.ok;
         const {creativeMetadata} = validatorOutput.creativeData;
-        expect(creativeMetadata.customElementExtensions).to.deep.equal([
-          'amp-analytics',
-          'amp-mustache',
-        ]);
+        expect(creativeMetadata.extensions).to.deep.include({
+          'custom-element': 'amp-analytics',
+          'src': 'https://cdn.ampproject.org/v0/amp-analytics-0.1.js',
+        });
+        expect(creativeMetadata.extensions).to.deep.include({
+          'custom-element': 'amp-mustache',
+          'src': 'https://cdn.ampproject.org/v0/amp-mustache-latest.js',
+        });
       });
     });
   });
 
+  it('should add elements in creativeMetaData to extensions if not present', async () => {
+    const templateHelper = getAmpAdTemplateHelper(env.ampdoc);
+    const response = data.adTemplate.replace(
+      /"customElementExtensions" : \[\]/,
+      '"customElementExtensions" : ["amp-cats"]'
+    );
+    env.sandbox.stub(templateHelper, 'fetch').resolves(response);
+    const validatorOutput = await validator.validate(
+      {win: env.win},
+      containerElement,
+      utf8Encode(
+        JSON.stringify({
+          templateUrl,
+          data: {url: 'https://buy.com/buy-1'},
+          analytics: {foo: 'bar'},
+        })
+      ),
+      headers
+    );
+    const {creativeMetadata} = validatorOutput.creativeData;
+    expect(creativeMetadata.extensions).to.deep.include({
+      'custom-element': 'amp-cats',
+      'src': 'https://cdn.ampproject.org/v0/amp-cats-0.1.js',
+    });
+  });
+
   describe('Non-AMP Result', () => {
     it('should have NON_AMP validator result due to lack of headers', () => {
       return validator
         .validate(
           {win: env.win},
+          containerElement,
           utf8Encode(
             JSON.stringify({
               templateUrl,
@@ -159,6 +197,7 @@ describes.realWin('TemplateValidator', realWinConfig, (env) => {
       return validator
         .validate(
           {win: env.win},
+          containerElement,
           utf8Encode(
             JSON.stringify({
               templateUrl,
@@ -180,6 +219,7 @@ describes.realWin('TemplateValidator', realWinConfig, (env) => {
       return validator
         .validate(
           {win: env.win},
+          containerElement,
           utf8Encode(
             JSON.stringify({
               templateUrl,
@@ -198,9 +238,14 @@ describes.realWin('TemplateValidator', realWinConfig, (env) => {
 
     it('should have the response body as the creative in creativeData', () => {
       return validator
-        .validate({win: env.win}, utf8Encode(JSON.stringify({templateUrl})), {
-          get: () => null,
-        })
+        .validate(
+          {win: env.win},
+          containerElement,
+          utf8Encode(JSON.stringify({templateUrl})),
+          {
+            get: () => null,
+          }
+        )
         .then((validatorOutput) => {
           expect(validatorOutput).to.be.ok;
           expect(validatorOutput.creativeData).to.be.ok;
diff --git a/extensions/amp-a4a/0.1/test/testdata/valid_css_at_rules_amp.original.html b/extensions/amp-a4a/0.1/test/testdata/valid_css_at_rules_amp.original.html
index 1021b5cfb4cd4..1a2f74fa8295c 100644
--- a/extensions/amp-a4a/0.1/test/testdata/valid_css_at_rules_amp.original.html
+++ b/extensions/amp-a4a/0.1/test/testdata/valid_css_at_rules_amp.original.html
@@ -24,7 +24,6 @@
   <style amp4ads-boilerplate>body{visibility:hidden}</style>
   <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
   <script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <style amp-custom>
     amp-user-notification.amp-active {
       opacity: 0;
diff --git a/extensions/amp-a4a/0.1/test/utils.js b/extensions/amp-a4a/0.1/test/utils.js
index 0060b8842df6d..9ebaae4eb3316 100644
--- a/extensions/amp-a4a/0.1/test/utils.js
+++ b/extensions/amp-a4a/0.1/test/utils.js
@@ -15,7 +15,7 @@
  */
 
 import {AmpA4A} from '../amp-a4a';
-import {dict} from '../../../../src/utils/object';
+import {dict} from '../../../../src/core/types/object';
 
 /** @type {string} @private */
 export const TEST_URL =
diff --git a/extensions/amp-a4a/0.1/within-viewport.js b/extensions/amp-a4a/0.1/within-viewport.js
new file mode 100644
index 0000000000000..15fc6840d3ab1
--- /dev/null
+++ b/extensions/amp-a4a/0.1/within-viewport.js
@@ -0,0 +1,90 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {getMode} from '../../../src/mode';
+import {isIframed} from '../../../src/dom';
+import {memo} from '../../../src/core/types/object';
+import {toWin} from '../../../src/types';
+
+const OBSERVERS_MAP_PROP = '__AMP_A4A_VP_MAP';
+
+/**
+ * Resolves when the underlying element is within the given viewport range.
+ * @param {!Element} element
+ * @param {number} viewportNum
+ * @return {!Promise}
+ */
+export function whenWithinViewport(element, viewportNum) {
+  // This can only fully be implemented when `root=document` is polyfilled
+  // everywhere.
+  if (!(WITHIN_VIEWPORT_INOB || getMode().localDev || getMode().test)) {
+    return Promise.reject('!WITHIN_VIEWPORT_INOB');
+  }
+
+  const win = toWin(element.ownerDocument.defaultView);
+  const observersMap = memo(win, OBSERVERS_MAP_PROP, createObserversMap);
+
+  let observer = observersMap.get(viewportNum);
+  if (!observer) {
+    observer = createObserver(win, viewportNum);
+    observersMap.set(viewportNum, observer);
+  }
+  return observer(element);
+}
+
+/** @return {!Map<string, function(!Element):!Promise>} */
+const createObserversMap = () => new Map();
+
+/**
+ * @param {!Window} win
+ * @param {number} viewportNum
+ * @return {function(!Element):!Promise}
+ */
+function createObserver(win, viewportNum) {
+  const elements = new WeakMap();
+
+  const callback = (records) => {
+    for (let i = 0; i < records.length; i++) {
+      const {isIntersecting, target: element} = records[i];
+      const deferred = elements.get(element);
+      if (deferred && isIntersecting) {
+        deferred.resolve();
+        observer.unobserve(element);
+        elements.delete(element);
+      }
+    }
+  };
+
+  const iframed = isIframed(win);
+  const root = /** @type {?Element} */ (
+    iframed ? /** @type {*} */ (win.document) : null
+  );
+  const observer = new win.IntersectionObserver(callback, {
+    root,
+    rootMargin: `${(viewportNum - 1) * 100}%`,
+  });
+
+  return (element) => {
+    let deferred = elements.get(element);
+    if (!deferred) {
+      deferred = new Deferred();
+      elements.set(element, deferred);
+      observer.observe(element);
+    }
+    return deferred.promise;
+  };
+}
diff --git a/extensions/amp-a4a/OWNERS b/extensions/amp-a4a/OWNERS
index 94b65ebe76929..1b8c3b93f6d99 100644
--- a/extensions/amp-a4a/OWNERS
+++ b/extensions/amp-a4a/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-a4a/amp-a4a-format.md b/extensions/amp-a4a/amp-a4a-format.md
index fbe15cfba9ea1..3f41a1c40db50 100644
--- a/extensions/amp-a4a/amp-a4a-format.md
+++ b/extensions/amp-a4a/amp-a4a-format.md
@@ -93,7 +93,7 @@ In addition, creatives must obey the following rules:
 
 ### Boilerplate
 
-AMPHTML ad creatives require a different, and considerably simpler, boilerplate style line than [general AMP documents do](https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md):
+AMPHTML ad creatives require a different, and considerably simpler, boilerplate style line than [general AMP documents do](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-boilerplate.md):
 
 ```html
 <style amp4ads-boilerplate>
@@ -118,7 +118,7 @@ Finally, the AMPHTML ad boilerplate uses `amp-a4a-boilerplate` rather than
 more accurate error messages to help developers.
 
 Note that the same rules about mutations to the boilerplate text apply as in
-the [general AMP boilerplate](https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md).
+the [general AMP boilerplate](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-boilerplate.md).
 
 ### CSS
 
@@ -165,11 +165,11 @@ the [general AMP boilerplate](https://github.com/ampproject/amphtml/blob/master/
 
 The `transition` and `animation` properties are only allowed on selectors that:
 
-- Contain only `transition`, `animation`, `transform`, `visibility`, or
-  `opacity` properties.
+-   Contain only `transition`, `animation`, `transform`, `visibility`, or
+    `opacity` properties.
 
-  _Rationale:_ This allows the AMP runtime to remove this class from context
-  to deactivate animations, when necessary for page performance.
+    _Rationale:_ This allows the AMP runtime to remove this class from context
+    to deactivate animations, when necessary for page performance.
 
 **Good**
 
@@ -244,27 +244,27 @@ transition: background-color 2s;
 The following are _allowed_ AMP extension modules and AMP built-in tags in an
 AMPHTML ad creative. Extensions or builtin tags not explicitly listed are prohibited.
 
-- [amp-accordion](https://amp.dev/documentation/components/amp-accordion)
-- [amp-ad-exit](https://amp.dev/documentation/components/amp-ad-exit)
-- [amp-analytics](https://amp.dev/documentation/components/amp-analytics)
-- [amp-anim](https://amp.dev/documentation/components/amp-anim)
-- [amp-animation](https://amp.dev/documentation/components/amp-animation)
-- [amp-audio](https://amp.dev/documentation/components/amp-audio)
-- [amp-bind](https://amp.dev/documentation/components/amp-bind)
-- [amp-carousel](https://amp.dev/documentation/components/amp-carousel)
-- [amp-fit-text](https://amp.dev/documentation/components/amp-fit-text)
-- [amp-font](https://amp.dev/documentation/components/amp-font)
-- [amp-form](https://amp.dev/documentation/components/amp-form)
-- [amp-img](https://amp.dev/documentation/components/amp-img)
-- [amp-layout](https://amp.dev/documentation/components/amp-layout)
-- [amp-lightbox](https://amp.dev/documentation/components/amp-lightbox)
-- amp-mraid, on an experimental basis. If you're considering using this, please open an issue at [wg-ads](https://github.com/ampproject/wg-ads/issues/new).
-- [amp-mustache](https://amp.dev/documentation/components/amp-mustache)
-- [amp-pixel](https://amp.dev/documentation/components/amp-pixel)
-- [amp-position-observer](https://amp.dev/documentation/components/amp-position-observer)
-- [amp-selector](https://amp.dev/documentation/components/amp-selector)
-- [amp-social-share](https://amp.dev/documentation/components/amp-social-share)
-- [amp-video](https://amp.dev/documentation/components/amp-video)
+-   [amp-accordion](https://amp.dev/documentation/components/amp-accordion)
+-   [amp-ad-exit](https://amp.dev/documentation/components/amp-ad-exit)
+-   [amp-analytics](https://amp.dev/documentation/components/amp-analytics)
+-   [amp-anim](https://amp.dev/documentation/components/amp-anim)
+-   [amp-animation](https://amp.dev/documentation/components/amp-animation)
+-   [amp-audio](https://amp.dev/documentation/components/amp-audio)
+-   [amp-bind](https://amp.dev/documentation/components/amp-bind)
+-   [amp-carousel](https://amp.dev/documentation/components/amp-carousel)
+-   [amp-fit-text](https://amp.dev/documentation/components/amp-fit-text)
+-   [amp-font](https://amp.dev/documentation/components/amp-font)
+-   [amp-form](https://amp.dev/documentation/components/amp-form)
+-   [amp-img](https://amp.dev/documentation/components/amp-img)
+-   [amp-layout](https://amp.dev/documentation/components/amp-layout)
+-   [amp-lightbox](https://amp.dev/documentation/components/amp-lightbox)
+-   amp-mraid, on an experimental basis. If you're considering using this, please open an issue at [wg-monetization](https://github.com/ampproject/wg-monetization/issues/new).
+-   [amp-mustache](https://amp.dev/documentation/components/amp-mustache)
+-   [amp-pixel](https://amp.dev/documentation/components/amp-pixel)
+-   [amp-position-observer](https://amp.dev/documentation/components/amp-position-observer)
+-   [amp-selector](https://amp.dev/documentation/components/amp-selector)
+-   [amp-social-share](https://amp.dev/documentation/components/amp-social-share)
+-   [amp-video](https://amp.dev/documentation/components/amp-video)
 
 Most of the omissions are either for performance or to make AMPHTML ads
 simpler to analyze.
@@ -277,7 +277,7 @@ _Example:_ `<amp-iframe>` is omitted from this list. It is disallowed
 because ads could use it to execute arbitrary Javascript and load arbitrary
 content. Ads wanting to use such capabilities should return `false` from
 their
-[a4aRegistry](https://github.com/ampproject/amphtml/blob/master/ads/_a4a-config.js#L40)
+[a4aRegistry](https://github.com/ampproject/amphtml/blob/main/ads/_a4a-config.js#L40)
 entry and use the existing '3p iframe' ad rendering mechanism.
 
 _Example:_ `<amp-facebook>`, `<amp-instagram>`, `<amp-twitter>`, and
@@ -297,7 +297,7 @@ is demonstrated desire for it.
 
 The following are _allowed_ tags in an AMPHTML ads creative. Tags not explicitly
 allowed are prohibited. This list is a subset of the general [AMP tag
-addendum allowlist](../../spec/amp-tag-addendum.md). Like that list, it is
+addendum allowlist](../../docs/spec/amp-tag-addendum.md). Like that list, it is
 ordered consistent with HTML5 spec in section 4 [The Elements of HTML](http://www.w3.org/TR/html5/single-page.html#html-elements).
 
 Most of the omissions are either for performance or because the tags are not
@@ -311,7 +311,7 @@ HTML5 compatible.
 
 4.1.1 `<html>`
 
-- Must use types `<html ⚡4ads>` or `<html amp4ads>`
+-   Must use types `<html ⚡4ads>` or `<html amp4ads>`
 
 #### 4.2 Document metadata
 
@@ -321,12 +321,12 @@ HTML5 compatible.
 
 4.2.4 `<link>`
 
-- `<link rel=...>` tags are disallowed, except for `<link rel=stylesheet>`.
-- **Note:** Unlike in general AMP, `<link rel="canonical">` tags are
-  prohibited.
+-   `<link rel=...>` tags are disallowed, except for `<link rel=stylesheet>`.
+-   **Note:** Unlike in general AMP, `<link rel="canonical">` tags are
+    prohibited.
 
-  4.2.5 `<style>`
-  4.2.6 `<meta>`
+    4.2.5 `<style>`
+    4.2.6 `<meta>`
 
 #### 4.3 Sections
 
@@ -397,8 +397,8 @@ HTML5 compatible.
 
 #### 4.7 Embedded Content
 
-- Embedded content is supported only via AMP tags, such as `<amp-img>` or
-  `<amp-video>`.
+-   Embedded content is supported only via AMP tags, such as `<amp-img>` or
+    `<amp-video>`.
 
 #### 4.7.4 `<source>`
 
@@ -455,17 +455,17 @@ SVG tags are not in the HTML5 namespace. They are listed below without section i
 
 #### 4.11 Scripting
 
-- Like a general AMP document, the creative's `<head>` tag must contain a
-  `<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>` tag.
-- Unlike general AMP, `<noscript>` is prohibited.
-  - _Rationale:_ Since AMPHTML ads requires Javascript to be enabled to function
-    at all, `<noscript>` blocks serve no purpose in AMPHTML ads and
-    only cost network bandwidth.
-- Unlike general AMP, `<script type="application/ld+json">` is
-  prohibited.
-  - _Rationale:_ JSON LD is used for structured data markup on host
-    pages, but ad creatives are not standalone documents and don't
-    contain structured data. JSON LD blocks in them would just cost
-    network bandwidth.
-- All other scripting rules and exclusions are carried over from general
-  AMP.
+-   Like a general AMP document, the creative's `<head>` tag must contain a
+    `<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>` tag.
+-   Unlike general AMP, `<noscript>` is prohibited.
+    -   _Rationale:_ Since AMPHTML ads requires Javascript to be enabled to function
+        at all, `<noscript>` blocks serve no purpose in AMPHTML ads and
+        only cost network bandwidth.
+-   Unlike general AMP, `<script type="application/ld+json">` is
+    prohibited.
+    -   _Rationale:_ JSON LD is used for structured data markup on host
+        pages, but ad creatives are not standalone documents and don't
+        contain structured data. JSON LD blocks in them would just cost
+        network bandwidth.
+-   All other scripting rules and exclusions are carried over from general
+    AMP.
diff --git a/extensions/amp-a4a/rtc-documentation.md b/extensions/amp-a4a/rtc-documentation.md
index 6cf36fc42944e..a87966e75539d 100644
--- a/extensions/amp-a4a/rtc-documentation.md
+++ b/extensions/amp-a4a/rtc-documentation.md
@@ -76,31 +76,31 @@ The value of `rtc-config` must conform to the following specification:
 }
 ```
 
-- `vendors`
-  - Optional parameter
-  - Type: Object
-    - Key is the name of the vendor to use.
-      - Vendor to use must appear as a key in [callout-vendors.js ](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/0.1/callout-vendors.js)
-    - Value is a mapping of macros to values.
-  - Macros for a given vendor URL are specified by that particular vendor.
-    - For example, in the Example 1 above, VendorA has specified the macro SLOT_ID in their callout URL (see [Vendor URL Specification](#vendor-url-specification)). The RTC config specifies the value "1" to substitute for SLOT_ID in the callout URL. You may also set the value of a macro as a JSON object or array. This JSON object will be stringified automatically prior to replacement in the URL.
-    - Vendors can use the same macros as other vendors.
-- `urls`
-  - Optional parameter
-  - Type: Array of strings or objects.
-  - Each value in the array must be a valid RTC endpoint URL, or an object that contains a `url` and an `errorReportingUrl` as URL strings. Note that all URL strings must be secure (i.e. start with HTTPS). The array can be a mix of both of these types, as seen in the example above. In the case that an object is specified, the `url` within this object is treated equivalently as if it had been specified directly within the array, and errors from callouts to that URL are sent to its corresponding **errorReportingUrl**. The URLs specified here are the "custom URLs" mentioned above and throughout this document.
-    - See [RTC Callout Endpoint and Response Specification](#rtc-callout-endpoint-and-response-specification) section below on all requirements for endpoint.
-    - See [RTC Error Pingback](#rtc-error-pingback) section below for information on how errorReportingUrl is used to send sampled RTC errors, and how to specify an errorReportingUrl.
-- `timeoutMillis`
-  - Optional parameter
-  - Type: integer
-  - Value in milliseconds for timeout to use for each individual RTC callout. Must be less than default value of 1000ms, and greater than 0.
+-   `vendors`
+    -   Optional parameter
+    -   Type: Object
+        -   Key is the name of the vendor to use.
+            -   Vendor to use must appear as a key in [callout-vendors.js](https://github.com/ampproject/amphtml/blob/main/src/service/real-time-config/callout-vendors.js)
+        -   Value is a mapping of macros to values.
+    -   Macros for a given vendor URL are specified by that particular vendor.
+        -   For example, in the Example 1 above, VendorA has specified the macro SLOT_ID in their callout URL (see [Vendor URL Specification](#vendor-url-specification)). The RTC config specifies the value "1" to substitute for SLOT_ID in the callout URL. You may also set the value of a macro as a JSON object or array. This JSON object will be stringified automatically prior to replacement in the URL.
+        -   Vendors can use the same macros as other vendors.
+-   `urls`
+    -   Optional parameter
+    -   Type: Array of strings or objects.
+    -   Each value in the array must be a valid RTC endpoint URL, or an object that contains a `url` and an `errorReportingUrl` as URL strings. Note that all URL strings must be secure (i.e. start with HTTPS). The array can be a mix of both of these types, as seen in the example above. In the case that an object is specified, the `url` within this object is treated equivalently as if it had been specified directly within the array, and errors from callouts to that URL are sent to its corresponding **errorReportingUrl**. The URLs specified here are the "custom URLs" mentioned above and throughout this document.
+        -   See [RTC Callout Endpoint and Response Specification](#rtc-callout-endpoint-and-response-specification) section below on all requirements for endpoint.
+        -   See [RTC Error Pingback](#rtc-error-pingback) section below for information on how errorReportingUrl is used to send sampled RTC errors, and how to specify an errorReportingUrl.
+-   `timeoutMillis`
+    -   Optional parameter
+    -   Type: integer
+    -   Value in milliseconds for timeout to use for each individual RTC callout. Must be less than default value of 1000ms, and greater than 0.
 
 While all three parameters of rtc-config are optional, either "vendors" or "urls" _must be specified_ for RTC to occur. Both may be specified simultaneously. If neither "vendors" nor "urls" are specified, there are no endpoints to callout to and RTC is aborted. An error will be logged to the console.
 
 ### Vendor URL Specification
 
-To spare publishers the details of having to construct URLs for external vendors, vendors may register a URL with macros in a central file called [callout-vendors.js ](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/0.1/callout-vendors.js), which maps unique vendor names to an object which includes a URL and a list of allowed macros that can be substituted into `url`. Vendors may include these macros in their URLs, which publishers can then specify the value for. Additionally, vendors may specify an `errorReportingUrl`. This errorReportingUrl will be sent 1% sampled-per-page errors from callouts to their RTC endpoint. For instance:
+To spare publishers the details of having to construct URLs for external vendors, vendors may register a URL with macros in a central file called [callout-vendors.js](https://github.com/ampproject/amphtml/blob/main/src/service/real-time-config/callout-vendors.js), which maps unique vendor names to an object which includes a URL and a list of allowed macros that can be substituted into `url`. Vendors may include these macros in their URLs, which publishers can then specify the value for. Additionally, vendors may specify an `errorReportingUrl`. This errorReportingUrl will be sent 1% sampled-per-page errors from callouts to their RTC endpoint. For instance:
 
 ```text
 /** amp-a4a/0.1/callout-vendors.js */
@@ -123,37 +123,49 @@ The `errorReportingUrl` property is optional. The only available macros are ERRO
 
 #### Currently Supported Vendors
 
-- AppNexus
-- APS
-- Automatad
-- Browsi
-- Criteo
-- FLUX
-- IndexExchange
-- Lotame
-- Media.net
-- The Ozone Project
-- PubMatic OpenWrap
-- Purch
-- Galaxie Media
-- Rubicon
-- Salesforce
-- Yieldbot
-- Kargo
-- Yieldlab
+-   Admax
+-   Adpushup
+-   AppNexus
+-   AppNexus PSP
+-   APS
+-   Automatad
+-   Andbeyond
+-   Browsi
+-   Criteo
+-   FLUX
+-   Freestar
+-   Future Plc
+-   Galaxie Media
+-   Highfivve
+-   IndexExchange
+-   Kargo
+-   NewsPassID
+-   Lotame
+-   Media.net
+-   Nexx360.io
+-   OpenX
+-   PubMatic OpenWrap
+-   Purch
+-   Rubicon
+-   Salesforce
+-   T13
+-   Tail
+-   The Ozone Project
+-   Yieldbot
+-   Yieldlab
 
 ### RTC Callout Request Specification
 
 RTC callout requests are sent from the AMP runtime with the following headers:
 
-- Accept: application/JSON
-- Origin: Whatever the origin of the page is.
-- Referer: Referer URL
-- User-Agent: Standard user-agent information
+-   Accept: application/JSON
+-   Origin: Whatever the origin of the page is.
+-   Referer: Referer URL
+-   User-Agent: Standard user-agent information
 
 Additionally, query string parameters are optionally sent as per the specification of the URL.
 
-RTC requests are sent using the [fetchJson method defined in xhr-impl.js.](https://github.com/ampproject/amphtml/blob/master/src/service/xhr-impl.js#L213) For RTC, in practice this is a GET request.
+RTC requests are sent using the [fetchJson method defined in xhr-impl.js.](https://github.com/ampproject/amphtml/blob/main/src/service/xhr-impl.js#L213) For RTC, in practice this is a GET request.
 
 RTC requests are only sent to HTTPS endpoints.
 
@@ -167,11 +179,11 @@ The RTC callout endpoint must use HTTPS. HTTP requests are forbidden.
 
 The RTC Response to a GET request must meet the following requirements:
 
-- Status Code = 200
-- See [here for Required Headers](https://github.com/ampproject/amphtml/blob/master/spec/amp-cors-requests.md#ensuring-secure-responses) and note that Access-Control-Allow-Credentials: true must be present for cookies to be included in the request.
-- Body of response is a JSON object of targeting information such as:
-  - **<code>{"targeting": {"sport":["rugby","cricket"]}}</code>**</strong>
-  - The response body must be JSON, but the actual structure of that data need not match the structure here. Refer to Fast Fetch Network specific documentation for the required spec. (for example, if using DoubleClick, refer to DoubleClick docs).
+-   Status Code = 200
+-   See [here for Required Headers](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-cors-requests.md#ensuring-secure-responses) and note that Access-Control-Allow-Credentials: true must be present for cookies to be included in the request.
+-   Body of response is a JSON object of targeting information such as:
+    -   **<code>{"targeting": {"sport":["rugby","cricket"]}}</code>**</strong>
+    -   The response body must be JSON, but the actual structure of that data need not match the structure here. Refer to Fast Fetch Network specific documentation for the required spec. (for example, if using DoubleClick, refer to DoubleClick docs).
 
 ### RTC Error Pingback
 
@@ -214,21 +226,21 @@ For custom URLs specified by a publisher directly on the RTC Config, they specif
 
 In both cases, the requirements for an errorReportingUrl are the same:
 
-- errorReportingUrl must use HTTPS.
-- Response should be an empty 200.
-- errorReportingUrl may utilize two available macros that will be substituted in:
-  - **ERROR_TYPE** - Will be sent as an enum value that corresponds to values in `RTC_ERROR_ENUM` found in [real-time-config-manager.js](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/0.1/real-time-config-manager.js).
-  - **HREF** - The actual full URL of the page. Equivalent to historical value of AMP's window.context.location.href.
+-   errorReportingUrl must use HTTPS.
+-   Response should be an empty 200.
+-   errorReportingUrl may utilize two available macros that will be substituted in:
+    -   **ERROR_TYPE** - Will be sent as an enum value that corresponds to values in `RTC_ERROR_ENUM` found in [real-time-config-impl.js](https://github.com/ampproject/amphtml/blob/main/src/service/real-time-config/real-time-config-impl.js).
+    -   **HREF** - The actual full URL of the page. Equivalent to historical value of AMP's window.context.location.href.
 
-The error ping will be sent by creating an image pixel in the document. See `sendErrorMessage` in [real-time-config-manager.js](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/0.1/real-time-config-manager.js) for implementation details.
+The error ping will be sent by creating an image pixel in the document. See `sendErrorMessage` in [real-time-config-impl.js](https://github.com/ampproject/amphtml/blob/main/src/service/real-time-config/real-time-config-impl.js) for implementation details.
 
 ### AMP Consent Integration
 
-The AMP-Consent extension provides publishers the ability to collect and store a user's consent through a UI control, while also providing the ability to block other AMP components based on the user's consent. See [here for documentation](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md).
+The AMP-Consent extension provides publishers the ability to collect and store a user's consent through a UI control, while also providing the ability to block other AMP components based on the user's consent. See [here for documentation](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md).
 
 Real Time Config supports integration with AMP-Consent. If the AMP-consent response is neither `SUFFICIENT` nor `UNKNOWN_NOT_REQUIRED`, then by default all RTC callouts are suppressed. However, you may optionally modify this setting, to allow specific RTC callouts that should be sent regardless of the consent state. A publisher can modify this across all RTC requests for a given ad slot or on a per-RTC-callout basis. A publisher also may either permit all consent states, or only specific consent states, using the RTC Config attribute `sendRegardlessOfConsentState`.
 
-The value of `sendRegardlessOfConsentState` should either be the boolean `true` or an array of consent policy state strings as defined in src/consent-state.js (i.e. use the string keys, like`"UNKNOWN"` not its corresponding numeric value). In a case where the RTC callout would normally be supressed (for example if the AMP-consent response is `UNKNOWN`), it will instead be sent if `sendRegardlessOfConsentState` is set to boolean `true` or an array of values that contains a match for the AMP-consent state response (e.g. `['UNKNOWN']`). If set to an array, then only the values in that array (in addition to the defualt values of `SUFFICIENT` and `UNKNOWN_NOT_REQUIRED`) are treated as valid.
+The value of `sendRegardlessOfConsentState` should either be the boolean `true` or an array of consent policy state strings as defined in src/core/constants/consent-state.js (i.e. use the string keys, like`"UNKNOWN"` not its corresponding numeric value). In a case where the RTC callout would normally be supressed (for example if the AMP-consent response is `UNKNOWN`), it will instead be sent if `sendRegardlessOfConsentState` is set to boolean `true` or an array of values that contains a match for the AMP-consent state response (e.g. `['UNKNOWN']`). If set to an array, then only the values in that array (in addition to the defualt values of `SUFFICIENT` and `UNKNOWN_NOT_REQUIRED`) are treated as valid.
 
 The setting of `sendRegardlessOfConsentState` can either be done once for the entire ad slot by setting it as a top-level attribute on the RTC Config, or be done individually by setting it on any individual callouts as needed. If it is set at both the top-level and per-callout level, then if there is a mismatch, the per-callout level "wins". This is detailed below in the examples.
 
@@ -388,13 +400,50 @@ Let's first take an example where the page consent-state is `SUFFICIENT`. This i
 
 Next, let's take an example where the page consent-state is `UNKNOWN`. The callout to vendorA is set to allow consent-state `INSUFFICIENT`, so it will not be sent. The callouts to vendorB and vendorC do not have individual `sendRegardlessOfConsentState` settings, so the top-level setting of `true` applies to them, and they will each be sent. In the `urls` array, the first URL has an individual setting of `UNKNOWN`, which is the current state, so it will be sent. Lastly, the final url does not have an individual setting, so the top-level setting of `true` applies to it, and it will be sent.
 
+### Blocking RTC
+
+The `block-rtc` provides a way to utilize the `<amp-geo>` component to detect user's geo location to decide if a RTC callout should be prevented. The value of `block-rtc` should be a comma delimited string of geo group codes which are defined in `<amp-geo>` (details [here](https://github.com/ampproject/amphtml/blob/main/extensions/amp-geo/amp-geo.md)). If no `<amp-geo>` element is found or no valid value for this attribute, then the RTC callout will occur as normal.
+
+```html
+<amp-ad
+  width="300"
+  height="200"
+  type="network-foo"
+  data-slot="/1234/5678"
+  block-rtc="geoGroup1,geoGroup2"
+  rtc-config='{
+            "vendors": {
+              "vendorA": {"SLOT_ID": "1"},
+              "vendorB": {"PAGE_ID": "2"},
+              "vendorC": {"SLOT_W": "320", "SLOT_H": "50"}
+              },
+            "urls": [
+              "https://www.AmpPublisher.biz/targetingA",
+              "https://www.AmpPublisher.biz/targetingB"
+            ],
+            "sendRegardlessOfConsentState": true}'
+>
+</amp-ad>
+
+<amp-geo>
+  <script type="application/json">
+    {
+      "ISOCountryGroups": {
+        "geoGroup1": [ "preset-eea", "unknown" ],
+        "geoGroup2": [ "preset-us-ca" ]
+      }
+    }
+  </script>
+</amp-geo>
+```
+
 ### URL Macro Substitution
 
 RTC supports macro substitution for building callout URLs. These macros can be specified by vendors, and by Fast Fetch implementations.
 
 #### Vendor Defined Macros
 
-A vendor can specify macros for substitution in their URL. The only requirement to do this is to include text in their URL in [callout-vendors.js ](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/0.1/callout-vendors.js) that is intended to be replaced.
+A vendor can specify macros for substitution in their URL. The only requirement to do this is to include text in their URL in [callout-vendors.js](https://github.com/ampproject/amphtml/blob/main/src/service/real-time-config/callout-vendors.js) that is intended to be replaced.
 
 **Example**
 
@@ -433,7 +482,7 @@ The resulting RTC callout URL will then be, after macro expansion:
 
 #### Fast Fetch Implementation Defined Macros
 
-In addition to vendor-defined macros, with publishers specifying the values for substitution, there is also the ability to utilize macros defined by the Fast Fetch implementation. For example, imagine if there is a property, **fooProp,** of the element **fooEl** that is only calculated at runtime. A Fast Fetch network that wants to support optionally adding the value of fooProp to RTC callout URLs that it sends can do so by overriding the method [getCustomRealTimeConfigMacros on AmpA4a ](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/0.1/amp-a4a.js)in their Fast Fetch implementation. The method should return a mapping of macros to values or functions that resolve to a value.
+In addition to vendor-defined macros, with publishers specifying the values for substitution, there is also the ability to utilize macros defined by the Fast Fetch implementation. For example, imagine if there is a property, **fooProp,** of the element **fooEl** that is only calculated at runtime. A Fast Fetch network that wants to support optionally adding the value of fooProp to RTC callout URLs that it sends can do so by overriding the method [getCustomRealTimeConfigMacros on AmpA4a ](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/0.1/amp-a4a.js)in their Fast Fetch implementation. The method should return a mapping of macros to values or functions that resolve to a value.
 
 ##### Example 3: Fast Fetch implementation defined macros
 
@@ -461,7 +510,7 @@ It is possible for a vendor to specify macros in their URL into which the Fast F
 
 ###### Example 4
 
-Vendor1 wants to allow publishers to substitute in the value of the slot_id, and allow the Fast Fetch network implementation to substitute in the start time. Thus, they define their URL in [callout-vendors.js ](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/0.1/callout-vendors.js) as follows. Note, the vendor only lists SLOT_ID in the macros array, even though SLOT_ID and START are both macros in their URL. The macros array is a list of macros that can be utilized by the publisher. Fast Fetch will always attempt to substitute in network-defined macros, regardless of whether they are defined in the macros array.
+Vendor1 wants to allow publishers to substitute in the value of the slot_id, and allow the Fast Fetch network implementation to substitute in the start time. Thus, they define their URL in [callout-vendors.js](https://github.com/ampproject/amphtml/blob/main/src/service/real-time-config/callout-vendors.js) as follows. Note, the vendor only lists SLOT_ID in the macros array, even though SLOT_ID and START are both macros in their URL. The macros array is a list of macros that can be utilized by the publisher. Fast Fetch will always attempt to substitute in network-defined macros, regardless of whether they are defined in the macros array.
 
 ```js
 /** amp-a4a/0.1/callout-vendors.js */
@@ -542,7 +591,7 @@ The merging of the results of the RTC callouts into the ad request URL is determ
 
 ### Error Cases
 
-Listed below are the most prominent error cases in RTC. For usage of the following error cases, see [real-time-config-manager.js](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/0.1/real-time-config-manager.js)
+Listed below are the most prominent error cases in RTC. For usage of the following error cases, see [real-time-config-impl.js](https://github.com/ampproject/amphtml/blob/main/src/service/real-time-config/real-time-config-impl.js)
 
 ##### Misconfigured RTC Config
 
diff --git a/extensions/amp-a4a/rtc-publisher-implementation-guide.md b/extensions/amp-a4a/rtc-publisher-implementation-guide.md
index 62bb16f205e02..ebafbc500f9d7 100644
--- a/extensions/amp-a4a/rtc-publisher-implementation-guide.md
+++ b/extensions/amp-a4a/rtc-publisher-implementation-guide.md
@@ -14,28 +14,39 @@ AMP Real Time Config (RTC) is a new feature of Fast Fetch that allows Publishers
 
 To use RTC, you must meet the following requirements:
 
-- Use an ad network that supports Fast Fetch and AMP RTC
-- Set the `rtc-config` attribute on each amp-ad element for which RTC is to be used, as specified below.
+-   Use an ad network that supports Fast Fetch and AMP RTC
+-   Set the `rtc-config` attribute on each amp-ad element for which RTC is to be used, as specified below.
 
 ### Supported Vendors
 
-- AppNexus
-- APS
-- Automatad
-- Browsi
-- Criteo
-- FLUX
-- IndexExchange
-- Lotame
-- Media.net
-- The Ozone Project
-- PubMatic OpenWrap
-- Purch
-- Rubicon
-- Salesforce
-- Yieldbot
-- Kargo
-- Yieldlab
+-   Admax
+-   Adpushup
+-   AppNexus
+-   AppNexus PSP
+-   APS
+-   Automatad
+-   Andbeyond
+-   Browsi
+-   Criteo
+-   FLUX
+-   [Freestar](https://freestar.com)
+-   Future Plc
+-   [Highfivve](https://highfivve.com)
+-   IndexExchange
+-   Kargo
+-   Newspassid
+-   Lotame
+-   Media.net
+-   OpenX
+-   PubMatic OpenWrap
+-   Purch
+-   Rubicon
+-   Salesforce
+-   T13
+-   Tail
+-   The Ozone Project
+-   Yieldbot
+-   Yieldlab
 
 ### Overview
 
@@ -61,11 +72,11 @@ Each individual RTC callout has this 1 second timeout imposed on it, but the cal
 
 Example from Figure 1:
 
-- RTC Callout 1 starts at 0ms, and returns at 780ms, for a total time of 780ms. It does not timeout.
-- RTC Callout 2 starts at 20ms, and returns at 760ms, for a total time of 740ms. It does not timeout.
-- RTC Callout 3 starts at 50ms, and doesn't return until 1125ms, for a total time of 1075ms. This time surpasses the timeout of 1000ms. Thus, the request is resolved as an empty response by real-time-config-manager at 1050ms, when exactly 1000ms has elapsed from the perspective of RTC Callout 3. The ultimate response from RTC Callout 3 is dropped.
-- RTC Callout 4 starts at 75ms, and returns at 760ms, for a total time of 685ms. It is not timed out.
-- RTC Callout 5 starts at 100ms, and returns at 1010ms, for a total time of 910ms. It is not timed out. Note that RTC Callout 5 finishes more than 1000ms after the first RTC Callout is started.
+-   RTC Callout 1 starts at 0ms, and returns at 780ms, for a total time of 780ms. It does not timeout.
+-   RTC Callout 2 starts at 20ms, and returns at 760ms, for a total time of 740ms. It does not timeout.
+-   RTC Callout 3 starts at 50ms, and doesn't return until 1125ms, for a total time of 1075ms. This time surpasses the timeout of 1000ms. Thus, the request is resolved as an empty response by real-time-config-manager at 1050ms, when exactly 1000ms has elapsed from the perspective of RTC Callout 3. The ultimate response from RTC Callout 3 is dropped.
+-   RTC Callout 4 starts at 75ms, and returns at 760ms, for a total time of 685ms. It is not timed out.
+-   RTC Callout 5 starts at 100ms, and returns at 1010ms, for a total time of 910ms. It is not timed out. Note that RTC Callout 5 finishes more than 1000ms after the first RTC Callout is started.
 
 The publisher-defined URLs take precedence over the vendor-defined ones, i.e. if a publisher specifies 5 custom URLs, and 5 vendors, only the 5 custom URLs will be called out to. The vendor- and publisher-defined URLs allow for macro substitution to build the callout URL. For instance, a publisher may specify the macro values that they wish to substitute into the vendor-defined url, or a publisher may define macros in their custom URL into which the ad network Fast Fetch implementation may substitute values.
 
@@ -123,25 +134,25 @@ The value of `rtc-config` must conform to the following specification:
 }
 ```
 
-- `vendors`
-  - Optional parameter
-  - Type: Object
-    - Key is the name of the vendor to use.
-      - Vendor to use must appear as a key in [callout-vendors.js ](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/0.1/callout-vendors.js)
-    - Value is a mapping of macros to values.
-  - Macros for a given vendor URL are specified by that particular vendor.
-    - E.g., in Example 1 above, VendorA has specified the macro SLOT_ID in their callout URL (see Vendor URL Specification below). The RTC config specifies the value "1" to substitute for SLOT_ID in the callout URL.
-    - Vendors can use the same macros as other vendors.
-- `urls`
-  - Optional parameter
-  - Type: Array
-  - Each value in the array must be a valid RTC endpoint URL, or an object that contains a "url" and an "errorReportingUrl". The array can be a mix of both of these types, as seen in the example above. In the case that an object is specified, the "url" within this object is treated equivalently as if it had been specified directly within the array, and errors from callouts to that URL are sent to its corresponding **errorReportingUrl**. The URLs specified here are the "custom URLs" mentioned above and throughout this document.
-    - See [RTC Callout Endpoint and Response Specification](#rtc-callout-endpoint-and-response-specification) section below on all requirements for endpoint.
-    - See [RTC Error Pingback](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/rtc-documentation.md#rtc-error-pingback) for information on how errorReportingUrl is used to send sampled RTC errors, and how to specify an errorReportingUrl.
-- `timeoutMillis`
-  - Optional parameter
-  - Type: integer
-  - Value in milliseconds for timeout to use for each individual RTC callout. Must be less than default value of 1000ms, and greater than 0.
+-   `vendors`
+    -   Optional parameter
+    -   Type: Object
+        -   Key is the name of the vendor to use.
+            -   Vendor to use must appear as a key in [callout-vendors.js](https://github.com/ampproject/amphtml/blob/main/src/service/real-time-config/callout-vendors.js)
+        -   Value is a mapping of macros to values.
+    -   Macros for a given vendor URL are specified by that particular vendor.
+        -   E.g., in Example 1 above, VendorA has specified the macro SLOT_ID in their callout URL (see Vendor URL Specification below). The RTC config specifies the value "1" to substitute for SLOT_ID in the callout URL.
+        -   Vendors can use the same macros as other vendors.
+-   `urls`
+    -   Optional parameter
+    -   Type: Array
+    -   Each value in the array must be a valid RTC endpoint URL, or an object that contains a "url" and an "errorReportingUrl". The array can be a mix of both of these types, as seen in the example above. In the case that an object is specified, the "url" within this object is treated equivalently as if it had been specified directly within the array, and errors from callouts to that URL are sent to its corresponding **errorReportingUrl**. The URLs specified here are the "custom URLs" mentioned above and throughout this document.
+        -   See [RTC Callout Endpoint and Response Specification](#rtc-callout-endpoint-and-response-specification) section below on all requirements for endpoint.
+        -   See [RTC Error Pingback](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/rtc-documentation.md#rtc-error-pingback) for information on how errorReportingUrl is used to send sampled RTC errors, and how to specify an errorReportingUrl.
+-   `timeoutMillis`
+    -   Optional parameter
+    -   Type: integer
+    -   Value in milliseconds for timeout to use for each individual RTC callout. Must be less than default value of 1000ms, and greater than 0.
 
 While all three parameters of `rtc-config` are optional, either "vendors" or "urls" _must be specified_ for RTC to occur. Both may be specified simultaneously. If neither "vendors" nor "urls" are specified, there are no endpoints to callout to and RTC is aborted. An error will be logged to the console.
 
@@ -157,11 +168,11 @@ The endpoint must use HTTPS.
 
 The RTC Response to a GET must meet the following requirements:
 
-- Status Code = 200
-- See [here for Required Headers](https://github.com/ampproject/amphtml/blob/master/spec/amp-cors-requests.md#ensuring-secure-responses) and note that Access-Control-Allow-Credentials: true must be present for cookies to be included in the request.
-- Body of response is a JSON object of targeting information such as:
-  - `{"targeting": {"sport":["rugby","cricket"]}}`
-  - The response body must be JSON, but the actual structure of that data need not match the structure here. Refer to Fast Fetch Network-specific documentation for the required spec. (for example, if using DoubleClick, refer to DoubleClick docs).
+-   Status Code = 200
+-   See [here for Required Headers](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-cors-requests.md#ensuring-secure-responses) and note that Access-Control-Allow-Credentials: true must be present for cookies to be included in the request.
+-   Body of response is a JSON object of targeting information such as:
+    -   `{"targeting": {"sport":["rugby","cricket"]}}`
+    -   The response body must be JSON, but the actual structure of that data need not match the structure here. Refer to Fast Fetch Network-specific documentation for the required spec. (for example, if using DoubleClick, refer to DoubleClick docs).
 
 ### Merging RTC Results into Ad Requests
 
diff --git a/extensions/amp-access-laterpay/0.1/laterpay-impl.js b/extensions/amp-access-laterpay/0.1/laterpay-impl.js
index 8928dd1aefd3c..6d95e27b668c6 100644
--- a/extensions/amp-access-laterpay/0.1/laterpay-impl.js
+++ b/extensions/amp-access-laterpay/0.1/laterpay-impl.js
@@ -17,7 +17,7 @@
 import {CSS} from '../../../build/amp-access-laterpay-0.1.css';
 import {Services} from '../../../src/services';
 import {dev, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getMode} from '../../../src/mode';
 import {installStylesForDoc} from '../../../src/style-installer';
 import {listen} from '../../../src/event-helper';
@@ -141,11 +141,13 @@ export class LaterpayVendor {
     this.currentLocale_ = this.laterpayConfig_['locale'] || 'en';
 
     /** @private {!JsonObject} */
-    this.i18n_ = /** @type {!JsonObject} */ (Object.assign(
-      dict(),
-      DEFAULT_MESSAGES,
-      this.laterpayConfig_['localeMessages'] || dict()
-    ));
+    this.i18n_ = /** @type {!JsonObject} */ (
+      Object.assign(
+        dict(),
+        DEFAULT_MESSAGES,
+        this.laterpayConfig_['localeMessages'] || dict()
+      )
+    );
 
     /** @private {string} */
     this.purchaseConfigBaseUrl_ = this.getConfigUrl_() + CONFIG_BASE_PATH;
@@ -335,12 +337,10 @@ export class LaterpayVendor {
     }
     this.renderTextBlock_('header');
     const listContainer = this.createElement_('ul');
-    this.purchaseConfig_['premiumcontent']['title'] = this.i18n_[
-      'premiumContentTitle'
-    ];
-    this.purchaseConfig_['premiumcontent'][
-      'description'
-    ] = this.getArticleTitle_();
+    this.purchaseConfig_['premiumcontent']['title'] =
+      this.i18n_['premiumContentTitle'];
+    this.purchaseConfig_['premiumcontent']['description'] =
+      this.getArticleTitle_();
     listContainer.appendChild(
       this.createPurchaseOption_(this.purchaseConfig_['premiumcontent'])
     );
diff --git a/extensions/amp-access-laterpay/0.2/OWNERS b/extensions/amp-access-laterpay/0.2/OWNERS
index 7f50188aa0f8f..53363d247cb15 100644
--- a/extensions/amp-access-laterpay/0.2/OWNERS
+++ b/extensions/amp-access-laterpay/0.2/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-access-laterpay/0.2/laterpay-impl.js b/extensions/amp-access-laterpay/0.2/laterpay-impl.js
index c66ec34c7fe5f..e6e126172f4d9 100644
--- a/extensions/amp-access-laterpay/0.2/laterpay-impl.js
+++ b/extensions/amp-access-laterpay/0.2/laterpay-impl.js
@@ -17,7 +17,7 @@
 import {CSS} from '../../../build/amp-access-laterpay-0.2.css';
 import {Services} from '../../../src/services';
 import {dev, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getMode} from '../../../src/mode';
 import {installStylesForDoc} from '../../../src/style-installer';
 import {listen} from '../../../src/event-helper';
@@ -170,11 +170,13 @@ export class LaterpayVendor {
     this.currentLocale_ = this.laterpayConfig_['locale'] || 'en';
 
     /** @private {!JsonObject} */
-    this.i18n_ = /** @type {!JsonObject} */ (Object.assign(
-      dict(),
-      DEFAULT_MESSAGES,
-      this.laterpayConfig_['localeMessages'] || dict()
-    ));
+    this.i18n_ = /** @type {!JsonObject} */ (
+      Object.assign(
+        dict(),
+        DEFAULT_MESSAGES,
+        this.laterpayConfig_['localeMessages'] || dict()
+      )
+    );
 
     /** @private {string} */
     this.purchaseConfigBaseUrl_ = this.getConfigUrl_() + CONFIG_BASE_PATH;
diff --git a/extensions/amp-access-laterpay/amp-access-laterpay.md b/extensions/amp-access-laterpay/amp-access-laterpay.md
index bc7c040bf21f3..40a328f30c7a3 100644
--- a/extensions/amp-access-laterpay/amp-access-laterpay.md
+++ b/extensions/amp-access-laterpay/amp-access-laterpay.md
@@ -3,7 +3,7 @@ $category@: dynamic-content
 formats:
   - websites
 teaser:
-  text: Allows publishers to easily integrate with the LaterPay micropayments platform.
+  text: Allows publishers to integrate with the LaterPay micropayments platform.
 ---
 
 <!---
@@ -24,19 +24,19 @@ limitations under the License.
 
 # amp-access-laterpay
 
-`amp-access-laterpay` is based on, and requires <a href="https://amp.dev/documentation/components/amp-access">AMP Access</a>.
+## Usage
 
-## Behavior
+[LaterPay](https://laterpay.net) is a micropayment platform that allows users to buy any online content with just two clicks, and get immediate access – without upfront registration, personal data, or payment. Users only pay, once their purchases have reached a total of \$5 or 5€ across websites. Content providers can sell individual items or time passes, which allow flatrate access or time limited access to content.
 
-<a href="https://laterpay.net">LaterPay</a> is a micropayment platform that allows users to buy any online content with just two clicks, and get immediate access – without upfront registration, personal data, or payment. Users only pay, once their purchases have reached a total of \$5 or 5€ across websites. Content providers can sell individual items or time passes, which allow flatrate access or time limited access to content.
+The `amp-access-laterpay` component is based on, and requires [`amp-access`](../amp-access/amp-access.md).
 
 If you're integrating LaterPay via the [Connector Script integration](https://docs.laterpay.net/connector/) you won't be able to use that integration on AMP pages. `amp-access-laterpay` is analogous to Connector Script, providing a similar set of features, but built for AMP pages.
 
 It's also possible to sell content via LaterPay simply using `amp-access-laterpay` as the sole integration method.
 
-The `amp-access-laterpay` component uses AMP Access internally to provide a behavior similar to AMP Access, but tailored for usage with the LaterPay service.
+The `amp-access-laterpay` component uses `amp-access` internally to provide a behavior similar to `amp-access`, but tailored for usage with the LaterPay service.
 
-If you have your own paywall service that you'd like to use with AMP Access and would like to use it together with LaterPay on the same page, it's <a href="#using-amp-access-laterpay-together-with-amp-access ">also possible to do so</a>.
+If you have your own paywall service that you'd like to use with `amp-access` and would like to use it together with LaterPay on the same page, it's also possible to do so.
 
 The `amp-access-laterpay` component does not require an authorization or pingback configuration, because it is pre-configured to work with the LaterPay service. It also does not require manual setup of login links.
 
@@ -46,11 +46,102 @@ You can refer to the documentation on configuring the [LaterPay Connector](https
 
 The generated list can be styled and presented according to the publisher's preference.
 
-This component also relies on [Access Content Markup](https://amp.dev/documentation/components/amp-access#access-content-markup) to show and hide content.
+This component also relies on [Access Content Markup](../amp-access/amp-access.md) to show and hide content.
 
-## Configuration
+### Using amp-access-laterpay with amp-access
 
-Configuration is similar to AMP Access, but no authorization, pingback and login links are required.
+If you have an existing subscription system and you intend to use LaterPay only for individual article sales, it's possible to have both sale methods coexist in the same page, using both `amp-access` and `amp-access-laterpay` together.
+
+First of, please refer to the [`amp-access`](../amp-access/amp-access.md) documentation to learn how to configure `amp-access` with your existing paywall.
+
+The [multiple providers](../amp-access/amp-access.md) section explains how to setup multiple providers with namespaces.
+
+When using it with LaterPay and an existing paywall integration, the necessary configuration can look something like this:
+
+```html
+<script id="amp-access" type="application/json">
+  [
+    {
+      "vendor": "laterpay",
+      "laterpay": {
+        "region": "us"
+      },
+      "namespace": "laterpay"
+    },
+    {
+      "authorization": "https://pub.com/amp-access?rid=READER_ID&url=SOURCE_URL",
+      "pingback": "https://pub.com/amp-ping?rid=READER_ID&url=SOURCE_URL",
+      "login": "https://pub.com/amp-login?rid=READER_ID&url=SOURCE_URL",
+      "authorizationFallbackResponse": {"error": true},
+      "namespace": "publishername"
+    }
+  ]
+</script>
+```
+
+Where as the content access markup could end up looking like this:
+
+```html
+<section
+  amp-access="NOT error AND NOT laterpay.access AND NOT publishername.access"
+  amp-access-hide
+>
+  <p>
+    <a on="tap:amp-access.login-publishername"
+      >Login here to access your PublisherName subscription.</a
+    >
+  </p>
+
+  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
+</section>
+
+<section amp-access="error" amp-access-hide class="error-section">
+  Oops... Something broke.
+</section>
+
+<div amp-access="laterpay.access OR publishername.access" amp-access-hide>
+  <p>...article content...</p>
+</div>
+```
+
+You can find a more complete example [here](https://ampexample.laterpay.net/dual-amp-access.html).
+
+[tip type="read-on"]
+
+The following resources provide further documentation on using LaterPay with AMP:
+
+-   [`amp-access`](https://amp.dev/documentation/components/amp-access)
+-   [LaterPay](https://www.laterpay.net)
+-   [LaterPay: How we do MicroPayments](https://docs.laterpay.net/how_we_do_micropayments/)
+-   [LaterPay Connector](https://docs.laterpay.net/connector/) - Similar to `amp-access-laterpay` but for non AMP pages.
+
+[/tip]
+
+### Using Access Content Markup and showing the purchase list
+
+Access Content Markup should be used in the same way as with `amp-access`.
+
+The element with id `amp-access-laterpay-dialog` will render a list of purchase options when the user does not have access to the article. This list has some very basic styling and can be customized to feel more integrated in the publisher's page.
+
+Make sure you add the `amp-access-laterpay` class if you want to use the default styling.
+
+```html
+<section amp-access="NOT error AND NOT access" amp-access-hide>
+  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
+</section>
+
+<section amp-access="error" amp-access-hide class="error-section">
+  Oops... Something broke.
+</section>
+
+<div amp-access="access" amp-access-hide>
+  <p>...article content...</p>
+</div>
+```
+
+### Configuration
+
+Configuration is similar to `amp-access`, but no authorization, pingback and login links are required.
 
 ```html
 <script id="amp-access" type="application/json">
@@ -118,28 +209,6 @@ The following values can be set in the `laterpay` config object:
   </tr>
 </table>
 
-## Using Access Content Markup and showing the purchase list
-
-Access Content Markup should be used in the same way as with AMP Access.
-
-The element with id `amp-access-laterpay-dialog` will render a list of purchase options when the user does not have access to the article. This list has some very basic styling and can be customized to feel more integrated in the publisher's page.
-
-Make sure you add the `amp-access-laterpay` class if you want to use the default styling.
-
-```html
-<section amp-access="NOT error AND NOT access" amp-access-hide>
-  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
-</section>
-
-<section amp-access="error" amp-access-hide class="error-section">
-  Oops... Something broke.
-</section>
-
-<div amp-access="access" amp-access-hide>
-  <p>...article content...</p>
-</div>
-```
-
 ## Styling
 
 Multiple classes are applied to some of the elements in the generated markup. Elements with no classes can be referred unambiguously through CSS element selectors.
@@ -186,6 +255,12 @@ The structure created for the dialog looks as follows:
 </div>
 ```
 
+## Analytics
+
+Given that `amp-access-laterpay` is based on `amp-access` it supports all the [analytics events](../amp-access/amp-access.md) sent by `amp-access`.
+
+The examples at [https://ampexample.laterpay.net/](https://ampexample.laterpay.net/) are all configured to send these analytics events if you'd like to see a more complete example as to how this would look in practice.
+
 ## Localization
 
 The text shown in the dialog for the purchase options will be defined by the publisher in the LaterPay Connector UI.
@@ -245,77 +320,6 @@ The following message keys can be translated or customized, but be aware that th
   </tr>
 </table>
 
-## Analytics
-
-Given that `amp-access-laterpay` is based on `amp-access` it supports all the [analytics events](https://amp.dev/documentation/components/amp-access#integration-with-amp-analytics) sent by `amp-access`.
-
-The examples at https://ampexample.laterpay.net/ are all configured to send these analytics events if you'd like to see a more complete example as to how this would look in practice.
-
-## Using AMP Access LaterPay together with AMP Access
-
-If you have an existing subscription system and you intend to use LaterPay only for individual article sales, it's possible to have both sale methods coexist in the same page, using both AMP Access and AMP Access LaterPay together.
-
-First of, please refer to the [AMP Access](https://amp.dev/documentation/components/amp-access) documentation to learn how to configure AMP Access with your existing paywall.
-
-The [multiple providers](https://amp.dev/documentation/components/amp-access#multiple-access-providers) section explains how to setup multiple providers with namespaces.
-
-When using it with LaterPay and an existing paywall integration, the necessary configuration can look something like this:
-
-```html
-<script id="amp-access" type="application/json">
-  [
-    {
-      "vendor": "laterpay",
-      "laterpay": {
-        "region": "us"
-      },
-      "namespace": "laterpay"
-    },
-    {
-      "authorization": "https://pub.com/amp-access?rid=READER_ID&url=SOURCE_URL",
-      "pingback": "https://pub.com/amp-ping?rid=READER_ID&url=SOURCE_URL",
-      "login": "https://pub.com/amp-login?rid=READER_ID&url=SOURCE_URL",
-      "authorizationFallbackResponse": {"error": true},
-      "namespace": "publishername"
-    }
-  ]
-</script>
-```
-
-Where as the content access markup could end up looking like this:
-
-```html
-<section
-  amp-access="NOT error AND NOT laterpay.access AND NOT publishername.access"
-  amp-access-hide
->
-  <p>
-    <a on="tap:amp-access.login-publishername"
-      >Login here to access your PublisherName subscription.</a
-    >
-  </p>
-
-  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
-</section>
-
-<section amp-access="error" amp-access-hide class="error-section">
-  Oops... Something broke.
-</section>
-
-<div amp-access="laterpay.access OR publishername.access" amp-access-hide>
-  <p>...article content...</p>
-</div>
-```
-
-You can find a more complete example at https://ampexample.laterpay.net/dual-amp-access.html
-
-## Related Documentation
-
-- [AMP Access](https://amp.dev/documentation/components/amp-access)
-- [LaterPay](https://www.laterpay.net)
-- [LaterPay: How we do MicroPayments](https://docs.laterpay.net/how_we_do_micropayments/)
-- [LaterPay Connector](https://connectormwi.laterpay.net/docs/index.html) - Similar to AMP Access LaterPay but for non AMP pages.
-
 ## Validation
 
-See [amp-access-laterpay rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-access-laterpay/validator-amp-access-laterpay.protoascii) in the AMP validator specification.
+See [`amp-access-laterpay` rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-access-laterpay/validator-amp-access-laterpay.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-access-poool/0.1/poool-impl.js b/extensions/amp-access-poool/0.1/poool-impl.js
index 85d4d78b9c1b9..47601b3871400 100644
--- a/extensions/amp-access-poool/0.1/poool-impl.js
+++ b/extensions/amp-access-poool/0.1/poool-impl.js
@@ -16,7 +16,7 @@
 import {Services} from '../../../src/services';
 import {addParamToUrl, addParamsToUrl} from '../../../src/url';
 import {dev, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getMode} from '../../../src/mode';
 import {listenFor} from '../../../src/iframe-helper';
 import {resetStyles, setStyle, setStyles} from '../../../src/style';
@@ -38,13 +38,15 @@ const AUTHORIZATION_TIMEOUT = 3000;
 /**
  * @typedef {{
  *   appId: string,
- *   pageType: (string),
- *   debug: (boolean|null),
- *   forceWidget: (string|null),
- *   loginButtonEnabled: (boolean),
- *   videoClient: (string|null),
- *   customSegment: (string|null),
- *   cookiesEnabled: (boolean),
+ *   pageType: string,
+ *   debug: ?boolean,
+ *   forceWidget: ?string,
+ *   loginButtonEnabled: boolean,
+ *   videoClient: ?string,
+ *   customSegment: ?string,
+ *   cookiesEnabled: boolean,
+ *   locale: ?string,
+ *   context: ?string,
  * }}
  */
 let PooolConfigDef;
@@ -205,6 +207,8 @@ export class PooolVendor {
               : getMode().development || getMode().localDev,
           'fw': this.pooolConfig_['forceWidget'],
           'cs': this.pooolConfig_['customSegment'],
+          'lo': this.pooolConfig_['locale'],
+          'co': this.pooolConfig_['context'],
         })
       ),
       false
diff --git a/extensions/amp-access-poool/0.1/test/validator-amp-access-poool.out b/extensions/amp-access-poool/0.1/test/validator-amp-access-poool.out
index b8eb8e8b0fe63..93e1bcb2d8a2e 100644
--- a/extensions/amp-access-poool/0.1/test/validator-amp-access-poool.out
+++ b/extensions/amp-access-poool/0.1/test/validator-amp-access-poool.out
@@ -146,4 +146,4 @@ PASS
 |
 |    </div>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-access-poool/OWNERS b/extensions/amp-access-poool/OWNERS
index eaafe408e7fc6..1592b7c2593dc 100644
--- a/extensions/amp-access-poool/OWNERS
+++ b/extensions/amp-access-poool/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-access-poool/amp-access-poool.md b/extensions/amp-access-poool/amp-access-poool.md
index c0d69c299fa28..191a9d2115f05 100644
--- a/extensions/amp-access-poool/amp-access-poool.md
+++ b/extensions/amp-access-poool/amp-access-poool.md
@@ -24,30 +24,34 @@ limitations under the License.
 
 # amp-access-poool
 
-See [poool.tech](https://poool.tech) and [demo.poool.tech](https://demo.poool.tech) for more details. `amp-access-poool` is based on, and requires,
-[AMP Access](https://amp.dev/documentation/components/amp-access).
-
-## Behavior
+## Usage
 
 The `amp-access-poool` component, based on `amp-access`, loads and shows a paywall using your `bundleID` from Poool's Dashboard configuration.
 
+See [poool.tech](https://poool.tech) for more details. `amp-access-poool` is based on, and requires,
+[`amp-access`](https://amp.dev/documentation/components/amp-access).
+
 As you'll know if you're familiar with how Poool works outside of AMP, you cannot use `excerpt` and `hide` modes here. This is due to AMP's specific behavior. You will be able to lock or unlock your content with the `access` variable which is provided by `amp-access`. Check out the `poool-widget` section just below.
 
 The `amp-access-poool` component does not require an authorization or pingback configuration because it is pre-configured to work with Poool.
 
 For more information about modes, check out our [SDK documentation](https://dev.poool.tech/doc/sdk#mode).
 
-## Configurations
+### Configurations
+
+You have to set configuration attributes within AMP in camelCase instead of the underscore (" \_ ") symbol traditionally used by Poool.
+
+For example : use `customSegment="amp-custom-segment"` to achieve `poool("config", "custom_segment", "amp-custom-segment");`.
 
-### HTML sections
+#### HTML sections
 
 **Set poool-widget section, which contain poool paywall when access isn't granted.**
 
 The `amp-access-poool` component requires 3 different sections:
 
-- The article preview, shown when access hasn't been granted yet (with `amp-access="NOT access"`) and identified by Poool using the `poool-access-preview` attribute
-- The article content, shown when access has been granted (with `amp-access="access"`), hidden by the `amp-access-hide` attribute until access has been granted, and identified by Poool using the `poool-access-content` attribute
-- Poool's Paywall container, shown when access hasn't been granted yet (with `amp-access="NOT error AND NOT access"`), identified by Poool using the `poool` id
+-   The article preview, shown when access hasn't been granted yet (with `amp-access="NOT access"`) and identified by Poool using the `poool-access-preview` attribute
+-   The article content, shown when access has been granted (with `amp-access="access"`), hidden by the `amp-access-hide` attribute until access has been granted, and identified by Poool using the `poool-access-content` attribute
+-   Poool's Paywall container, shown when access hasn't been granted yet (with `amp-access="NOT error AND NOT access"`), identified by Poool using the `poool` id
 
 ```html
 <section poool-access-preview amp-access="NOT access">
@@ -75,7 +79,7 @@ The `amp-access-poool` component requires 3 different sections:
 <section amp-access="NOT error AND NOT access" id="poool"></section>
 ```
 
-### amp-access script - poool config
+#### amp-access script - poool config
 
 **Example: Basic paywall configuration (with default values)**
 
@@ -114,62 +118,66 @@ Configuration is similar to AMP Access, except no authorization, pingback or log
 
 For more information about configuration variables, check out our [SDK documentation](https://dev.poool.tech/doc/sdk#configuration).
 
-##### Notice
-
-You have to set configuration attributes within AMP in camelCase instead of the underscore (" \_ ") symbol traditionally used by Poool.
-
-For example : use `customSegment="amp-custom-segment"` to achieve `poool("config", "custom_segment", "amp-custom-segment");`.
-
 ## Attributes
 
-##### bundleID (required)
+### bundleID (required)
 
 Your App ID (you can find it on your Dashboard).
 
-##### itemID (required)
+### itemID (required)
 
 Your **unique** article ID.
 
-##### pageType (required)
+### pageType (required)
 
 Used to tell Poool that a page has been visited by the current user.
 See [documentation](https://dev.poool.tech/doc/sdk#page_view) for more information.
 
-##### debug
+### debug
 
 Enable/disable debug mode.
 See [documentation](https://dev.poool.tech/doc/sdk#debug) for more information.
 
-##### forceWidget
+### forceWidget
 
 Override current widget for user.
 See [documentation](https://dev.poool.tech/doc/sdk#force_widget) for more information.
 
-##### loginButtonEnabled
+### loginButtonEnabled
 
 Enable/disable paywall "login" button.
 See [documentation](https://dev.poool.tech/doc/sdk#login_button_enabled) for more information.
 
-##### signatureEnabled
+### signatureEnabled
 
 Enable/disable paywall signature, shown under article content when the article has been unlocked.
 See [documentation](https://dev.poool.tech/doc/sdk#signature_enabled) for more information.
 
-##### videoClient
+### videoClient
 
 Set default video client (vast, googima) for video widget.
 See [documentation](https://dev.poool.tech/doc/sdk#video_client) for more information.
 
-##### customSegment
+### customSegment
 
 Override native segments with a custom group/segment slug.
 See [documentation](https://dev.poool.tech/doc/sdk#custom_segment) for more information.
 
-##### cookiesEnabled
+### cookiesEnabled
 
 Following latest GDPR requirements, we decided to disable cookies by default inside our paywall. You will have to explicitly set this attribute to reflect the user's consent.
 See [documentation](https://dev.poool.tech/doc/sdk#cookies_enabled) for more information.
 
+### locale
+
+Set default locale for all texts inside the paywall.
+See [documentation](https://dev.poool.tech/doc/sdk#locale) for more information.
+
+### context
+
+Override default or native contexts with a custom context value.
+See [documentation](https://dev.poool.tech/doc/sdk#context) for more information.
+
 ## Validation
 
-See [amp-access-poool rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-access-poool/validator-amp-access-poool.protoascii) in the AMP validator specification.
+See [`amp-access-poool` rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-access-poool/validator-amp-access-poool.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-access-scroll/0.1/amp-access-scroll.css b/extensions/amp-access-scroll/0.1/amp-access-scroll.css
index 53932780a7995..0d39c59431f3d 100644
--- a/extensions/amp-access-scroll/0.1/amp-access-scroll.css
+++ b/extensions/amp-access-scroll/0.1/amp-access-scroll.css
@@ -24,6 +24,8 @@
   left: auto;
   right: 0px;
   width: 48px;
+  margin: 0;
+  padding: 0;
 }
 
 .amp-access-scroll-sheet {
diff --git a/extensions/amp-access-scroll/0.1/read-depth-tracker.js b/extensions/amp-access-scroll/0.1/read-depth-tracker.js
index 476d191012318..3d37066985d54 100644
--- a/extensions/amp-access-scroll/0.1/read-depth-tracker.js
+++ b/extensions/amp-access-scroll/0.1/read-depth-tracker.js
@@ -15,7 +15,7 @@
  */
 
 import {Services} from '../../../src/services';
-import {debounce} from '../../../src/utils/rate-limit';
+import {debounce} from '../../../src/core/types/function';
 
 export class ReadDepthTracker {
   /**
diff --git a/extensions/amp-access-scroll/0.1/scroll-bar.js b/extensions/amp-access-scroll/0.1/scroll-bar.js
index 271d47e0cf86b..c0d5e2e63d8da 100644
--- a/extensions/amp-access-scroll/0.1/scroll-bar.js
+++ b/extensions/amp-access-scroll/0.1/scroll-bar.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import {PROTOCOL_VERSION} from './scroll-protocol';
 import {ScrollComponent} from './scroll-component';
-import {dict} from '../../../src/utils/object';
+import {buildUrl, connectHostname} from './scroll-url';
+import {dict} from '../../../src/core/types/object';
 
 /**
  * UI for Scroll users.
@@ -27,17 +27,13 @@ export class ScrollBar extends ScrollComponent {
   /**
    * @param {!../../../src/service/ampdoc-impl.AmpDoc} doc
    * @param {!../../amp-access/0.1/amp-access-source.AccessSource} accessSource
-   * @param {string} baseUrl
    */
-  constructor(doc, accessSource, baseUrl) {
+  constructor(doc, accessSource) {
     super(doc);
 
     /** @protected */
     this.accessSource_ = accessSource;
 
-    /** @protected */
-    this.baseUrl_ = baseUrl;
-
     this.render_();
   }
 
@@ -56,21 +52,23 @@ export class ScrollBar extends ScrollComponent {
    * @protected
    * */
   makeIframe_() {
-    this.frame_ = /** @type {!HTMLIFrameElement} */ (this.el(
-      'iframe',
-      dict({
-        'scrolling': 'no',
-        'frameborder': '0',
-        'allowtransparency': 'true',
-        'title': 'Scroll',
-        'width': '100%',
-        'height': '100%',
-        'sandbox':
-          'allow-scripts allow-same-origin ' +
-          'allow-top-navigation allow-popups ' +
-          'allow-popups-to-escape-sandbox',
-      })
-    ));
+    this.frame_ = /** @type {!HTMLIFrameElement} */ (
+      this.el(
+        'iframe',
+        dict({
+          'scrolling': 'no',
+          'frameborder': '0',
+          'allowtransparency': 'true',
+          'title': 'Scroll',
+          'width': '100%',
+          'height': '100%',
+          'sandbox':
+            'allow-scripts allow-same-origin ' +
+            'allow-top-navigation allow-popups ' +
+            'allow-popups-to-escape-sandbox',
+        })
+      )
+    );
 
     this.root_ = this.el(
       'div',
@@ -83,20 +81,13 @@ export class ScrollBar extends ScrollComponent {
     this.mount();
 
     // Set iframe to scrollbar URL.
-    this.accessSource_
-      .buildUrl(
-        `${this.baseUrl_}/html/amp/scrolltab` +
-          '?rid=READER_ID' +
-          '&cid=CLIENT_ID(scroll1)' +
-          '&c=CANONICAL_URL' +
-          '&o=AMPDOC_URL' +
-          `&p=${PROTOCOL_VERSION}` +
-          '&x=QUERY_PARAM(scrollx)',
-        false
-      )
-      .then((scrollbarUrl) => {
-        this.frame_.setAttribute('src', scrollbarUrl);
-      });
+    buildUrl(
+      this.accessSource_,
+      connectHostname(this.accessSource_.getAdapterConfig()) +
+        '/html/amp/scrolltab'
+    ).then((scrollbarUrl) => {
+      this.frame_.setAttribute('src', scrollbarUrl);
+    });
   }
 
   /**
diff --git a/extensions/amp-access-scroll/0.1/scroll-component.js b/extensions/amp-access-scroll/0.1/scroll-component.js
index 9d8e18c6647c6..633a112a269e2 100644
--- a/extensions/amp-access-scroll/0.1/scroll-component.js
+++ b/extensions/amp-access-scroll/0.1/scroll-component.js
@@ -18,7 +18,7 @@ import {Services} from '../../../src/services';
 import {assertDoesNotContainDisplay, px, setStyles} from '../../../src/style';
 import {createElementWithAttributes} from '../../../src/dom';
 import {devAssert} from '../../../src/log';
-import {hasOwn} from '../../../src/utils/object';
+import {hasOwn} from '../../../src/core/types/object';
 
 /** @abstract */
 export class ScrollComponent {
diff --git a/extensions/amp-access-scroll/0.1/scroll-impl.js b/extensions/amp-access-scroll/0.1/scroll-impl.js
index 7a9ce1d43e853..e40c4aea132e5 100644
--- a/extensions/amp-access-scroll/0.1/scroll-impl.js
+++ b/extensions/amp-access-scroll/0.1/scroll-impl.js
@@ -22,11 +22,12 @@ import {Relay} from './scroll-relay';
 import {ScrollBar} from './scroll-bar';
 import {Services} from '../../../src/services';
 import {Sheet} from './scroll-sheet';
+import {addParamToUrl, isProxyOrigin} from '../../../src/url';
+import {buildUrl, connectHostname} from './scroll-url';
 import {createElementWithAttributes} from '../../../src/dom';
-import {dict} from '../../../src/utils/object';
-import {getMode} from '../../../src/mode';
+import {dict} from '../../../src/core/types/object';
 import {installStylesForDoc} from '../../../src/style-installer';
-import {parseQueryString} from '../../../src/url';
+import {parseQueryString} from '../../../src/core/types/string/url';
 
 const TAG = 'amp-access-scroll-elt';
 /**
@@ -95,28 +96,6 @@ const analyticsConfig = (baseUrl) => {
   return ANALYTICS_CONFIG;
 };
 
-/**
- * The eTLD for scroll URLs in development mode.
- *
- * Enables amp-access-scroll to work with dev/staging environments.
- *
- * @param {!JsonObject} config
- * @return {string}
- */
-const devEtld = (config) => {
-  return getMode().development && config['etld'] ? config['etld'] : '';
-};
-
-/**
- * The connect server hostname.
- *
- * @param {!JsonObject} config
- * @return {string}
- */
-const connectHostname = (config) => {
-  return `https://connect${devEtld(config) || '.scroll.com'}`;
-};
-
 /**
  * amp-access vendor that authenticates against the scroll.com service.
  * If the user is authenticated, also adds a fixed position iframe
@@ -159,11 +138,7 @@ export class ScrollAccessVendor extends AccessClientAdapter {
       if (response && response['scroll']) {
         if (!isStory) {
           // Display Scrollbar and set up features
-          const bar = new ScrollBar(
-            this.ampdoc,
-            this.accessSource_,
-            this.baseUrl_
-          );
+          const bar = new ScrollBar(this.ampdoc, this.accessSource_);
           const sheet = new Sheet(this.ampdoc);
 
           const relay = new Relay(this.baseUrl_);
@@ -195,7 +170,11 @@ export class ScrollAccessVendor extends AccessClientAdapter {
           response['blocker'] &&
           ScrollContentBlocker.shouldCheck(this.ampdoc)
         ) {
-          new ScrollContentBlocker(this.ampdoc, this.accessSource_).check();
+          new ScrollContentBlocker(
+            this.ampdoc,
+            this.accessSource_,
+            response['features'] && response['features']['r']
+          ).check();
         }
       }
       return response;
@@ -220,13 +199,17 @@ class ScrollContentBlocker {
   /**
    * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
    * @param {!../../amp-access/0.1/amp-access-source.AccessSource} accessSource
+   * @param {boolean} redirect
    */
-  constructor(ampdoc, accessSource) {
+  constructor(ampdoc, accessSource, redirect) {
     /** @const @private {!../../../src/service/ampdoc-impl.AmpDoc} */
     this.ampdoc_ = ampdoc;
 
     /** @const @private {!../../amp-access/0.1/amp-access-source.AccessSource} */
     this.accessSource_ = accessSource;
+
+    /** @const @private {boolean} */
+    this.redirect_ = redirect;
   }
 
   /**
@@ -236,26 +219,40 @@ class ScrollContentBlocker {
     Services.xhrFor(this.ampdoc_.win)
       .fetchJson('https://block.scroll.com/check.json')
       .then(
-        () => false,
+        (response) => response.json().then((json) => json['dns'] === true),
         (e) => this.blockedByScrollApp_(e.message)
       )
       .then((blockedByScrollApp) => {
         if (blockedByScrollApp === true) {
-          // TODO(dbow): Ideally we would automatically redirect to the page
-          // here, but for now we are adding a button so we redirect on user
-          // action.
-          const baseUrl = connectHostname(
-            this.accessSource_.getAdapterConfig()
+          this.handleBlocked_();
+        }
+      });
+  }
+
+  /** @private */
+  handleBlocked_() {
+    // Redirect app auth flow if enabled and not on AMP proxy.
+    if (this.redirect_ && !isProxyOrigin(this.ampdoc_.win.location)) {
+      buildUrl(this.accessSource_, 'https://scroll.com/loginwithapp').then(
+        (url) => {
+          const navigationService = Services.navigationForDoc(this.ampdoc_);
+          navigationService.navigateTo(
+            this.ampdoc_.win,
+            addParamToUrl(url, 'feature', 'r')
           );
-          const bar = new ScrollBar(this.ampdoc_, this.accessSource_, baseUrl);
-          const relay = new Relay(baseUrl);
-          relay.register(bar.window, (message) => {
-            if (message['_scramp'] === 'st') {
-              bar.update(message);
-            }
-          });
+        }
+      );
+    } else {
+      // Prompt to activate.
+      const baseUrl = connectHostname(this.accessSource_.getAdapterConfig());
+      const bar = new ScrollBar(this.ampdoc_, this.accessSource_);
+      const relay = new Relay(baseUrl);
+      relay.register(bar.window, (message) => {
+        if (message['_scramp'] === 'st') {
+          bar.update(message);
         }
       });
+    }
   }
 
   /**
diff --git a/extensions/amp-access-scroll/0.1/scroll-sheet.js b/extensions/amp-access-scroll/0.1/scroll-sheet.js
index b831e9a8c7150..dbcde3c1276f8 100644
--- a/extensions/amp-access-scroll/0.1/scroll-sheet.js
+++ b/extensions/amp-access-scroll/0.1/scroll-sheet.js
@@ -15,7 +15,7 @@
  */
 
 import {ScrollComponent} from './scroll-component';
-import {dict, hasOwn} from '../../../src/utils/object';
+import {dict, hasOwn} from '../../../src/core/types/object';
 import {toggle} from '../../../src/style';
 
 /** Provides iframe for the Scroll Audio Player. */
@@ -93,20 +93,22 @@ export class Sheet extends ScrollComponent {
    * @private
    * */
   makeIframe_() {
-    this.frame_ = /** @type {!HTMLIFrameElement} */ (this.el(
-      'iframe',
-      dict({
-        'class': 'amp-access-scroll-sheet',
-        'scrolling': 'no',
-        'frameborder': '0',
-        'allowtransparency': 'true',
-        'title': this.DEFAULT_TITLE_,
-        'sandbox':
-          'allow-scripts allow-same-origin ' +
-          'allow-top-navigation allow-popups ' +
-          'allow-popups-to-escape-sandbox',
-      })
-    ));
+    this.frame_ = /** @type {!HTMLIFrameElement} */ (
+      this.el(
+        'iframe',
+        dict({
+          'class': 'amp-access-scroll-sheet',
+          'scrolling': 'no',
+          'frameborder': '0',
+          'allowtransparency': 'true',
+          'title': this.DEFAULT_TITLE_,
+          'sandbox':
+            'allow-scripts allow-same-origin ' +
+            'allow-top-navigation allow-popups ' +
+            'allow-popups-to-escape-sandbox',
+        })
+      )
+    );
     this.root_ = this.frame_;
     this.mount();
   }
diff --git a/extensions/amp-access-scroll/0.1/scroll-url.js b/extensions/amp-access-scroll/0.1/scroll-url.js
new file mode 100644
index 0000000000000..8009ecb997f62
--- /dev/null
+++ b/extensions/amp-access-scroll/0.1/scroll-url.js
@@ -0,0 +1,60 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {PROTOCOL_VERSION} from './scroll-protocol';
+import {getMode} from '../../../src/mode';
+
+/**
+ * The eTLD for scroll URLs in development mode.
+ *
+ * Enables amp-access-scroll to work with dev/staging environments.
+ *
+ * @param {!JsonObject} config
+ * @return {string}
+ */
+const devEtld = (config) => {
+  return getMode().development && config['etld'] ? config['etld'] : '';
+};
+
+/**
+ * The connect server hostname.
+ *
+ * @param {!JsonObject} config
+ * @return {string}
+ */
+export const connectHostname = (config) => {
+  return `https://connect${devEtld(config) || '.scroll.com'}`;
+};
+
+/**
+ * Get the url for iframe source or redirect, including necessary query params.
+ *
+ * @param {!../../amp-access/0.1/amp-access-source.AccessSource} accessSource
+ * @param {string} base
+ * @return {Promise<string>}
+ */
+export function buildUrl(accessSource, base) {
+  return accessSource.buildUrl(
+    `${base}` +
+      '?rid=READER_ID' +
+      '&cid=CLIENT_ID(scroll1)' +
+      '&c=CANONICAL_URL' +
+      '&o=AMPDOC_URL' +
+      `&p=${PROTOCOL_VERSION}` +
+      '&x=QUERY_PARAM(scrollx)',
+    false
+  );
+}
diff --git a/extensions/amp-access-scroll/OWNERS b/extensions/amp-access-scroll/OWNERS
index 86c09f3c64ec0..be244fe8ae13f 100644
--- a/extensions/amp-access-scroll/OWNERS
+++ b/extensions/amp-access-scroll/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-access-scroll/amp-access-scroll.md b/extensions/amp-access-scroll/amp-access-scroll.md
index 9bb723913434b..e7c9221c3887a 100644
--- a/extensions/amp-access-scroll/amp-access-scroll.md
+++ b/extensions/amp-access-scroll/amp-access-scroll.md
@@ -3,7 +3,7 @@ $category@: dynamic-content
 formats:
   - websites
 teaser:
-  text: Integrates wth Scroll, a better internet that doesn't rely on ads.
+  text: Integrates with Scroll membership.
 ---
 
 <!---
@@ -24,30 +24,11 @@ limitations under the License.
 
 # amp-access-scroll
 
-Lets sites in the <a href="https://scroll.com">Scroll</a> network identify Scroll members in order to serve them an ad-free, directly-monetized experience.
+## Usage
 
-<table>
-  <tr>
-    <td class="col-fourty"><strong>Required Scripts</strong></td>
-    <td>
-      <div>
-        <code>&lt;script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js">&lt;/script></code>
-      </div>
-      <div>
-        <code>&lt;script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">&lt;/script></code>
-      </div>
-      <div>
-        <code>&lt;script async custom-element="amp-access-scroll" src="https://cdn.ampproject.org/v0/amp-access-scroll-0.1.js">&lt;/script></code>
-      </div>
-    </td>
-  </tr>
-</table>
+Lets sites in the [Scroll](https://scroll.com) network identify Scroll members in order to serve them an ad-free, directly-monetized experience.
 
-[TOC]
-
-## Behavior
-
-### Configure
+### Configuration
 
 In `<head>`, add
 
@@ -74,8 +55,8 @@ Add an `amp-access` attribute to each ad container.
 </div>
 ```
 
-Learn more at https://developer.scroll.com/amp
+Learn more at [https://developer.scroll.com/amp](https://developer.scroll.com/amp).
 
 ## Validation
 
-See [amp-access-scroll rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-access-scroll/validator-amp-access-scroll.protoascii) in the AMP validator specification.
+See [`amp-access-scroll` rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-access-scroll/validator-amp-access-scroll.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-access/0.1/access-expr.js b/extensions/amp-access/0.1/access-expr.js
index da2ce90d07273..440c0353f7e34 100644
--- a/extensions/amp-access/0.1/access-expr.js
+++ b/extensions/amp-access/0.1/access-expr.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {hasOwn, map} from '../../../src/utils/object';
+import {hasOwn, map} from '../../../src/core/types/object';
 import {accessParser as parser} from '../../../build/parsers/access-expr-impl';
 
 /**
@@ -22,7 +22,7 @@ import {accessParser as parser} from '../../../build/parsers/access-expr-impl';
  *
  * The grammar is defined in the `access-expr-impl.jison` and compiled using
  * (Jison)[https://zaach.github.io/jison/] parser. The compilation steps are
- * built into the `gulp build` and `gulp dist` tasks.
+ * built into the `amp build` and `amp dist` tasks.
  *
  * Grammar highlights:
  * - Shorthand truthy expressions are allowed, such as `field`. Truthy value
diff --git a/extensions/amp-access/0.1/access-vars.js b/extensions/amp-access/0.1/access-vars.js
index 85f3a77f2ca77..efcf251981928 100644
--- a/extensions/amp-access/0.1/access-vars.js
+++ b/extensions/amp-access/0.1/access-vars.js
@@ -38,7 +38,7 @@ export class AccessVars {
    * This is a restricted API.
    *
    * @param {string} unusedField
-   * @return {?Promise<*|null>}
+   * @return {?Promise<*>}
    */
   getAuthdataField(unusedField) {}
 }
diff --git a/extensions/amp-access/0.1/amp-access-client.js b/extensions/amp-access/0.1/amp-access-client.js
index 54e0e2f726043..774fef22530a7 100644
--- a/extensions/amp-access/0.1/amp-access-client.js
+++ b/extensions/amp-access/0.1/amp-access-client.js
@@ -17,7 +17,7 @@
 import {Services} from '../../../src/services';
 import {assertHttpsUrl} from '../../../src/url';
 import {dev, devAssert, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getMode} from '../../../src/mode';
 
 /** @const {string} */
@@ -58,9 +58,8 @@ export class AccessClientAdapter {
     }
 
     /** @const @private {number} */
-    this.authorizationTimeout_ = this.buildConfigAuthorizationTimeout_(
-      configJson
-    );
+    this.authorizationTimeout_ =
+      this.buildConfigAuthorizationTimeout_(configJson);
 
     /** @const @private {!../../../src/service/xhr-impl.Xhr} */
     this.xhr_ = Services.xhrFor(ampdoc.win);
diff --git a/extensions/amp-access/0.1/amp-access-iframe.js b/extensions/amp-access/0.1/amp-access-iframe.js
index e793224ec0c27..475803186b469 100644
--- a/extensions/amp-access/0.1/amp-access-iframe.js
+++ b/extensions/amp-access/0.1/amp-access-iframe.js
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Messenger} from './iframe-api/messenger';
 import {Services} from '../../../src/services';
 import {assertHttpsUrl, parseUrlDeprecated} from '../../../src/url';
 import {dev, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getMode} from '../../../src/mode';
-import {isArray} from '../../../src/types';
-import {parseJson} from '../../../src/json';
+import {isArray} from '../../../src/core/types';
+import {parseJson} from '../../../src/core/types/object/json';
 import {toggle} from '../../../src/style';
 
 const AUTHORIZATION_TIMEOUT = 3000;
diff --git a/extensions/amp-access/0.1/amp-access-server-jwt.js b/extensions/amp-access/0.1/amp-access-server-jwt.js
index ce8be5ee74b93..88d9f534d2e99 100644
--- a/extensions/amp-access/0.1/amp-access-server-jwt.js
+++ b/extensions/amp-access/0.1/amp-access-server-jwt.js
@@ -24,11 +24,11 @@ import {
   serializeQueryString,
 } from '../../../src/url';
 import {dev, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {escapeCssSelectorIdent} from '../../../src/css';
+import {dict} from '../../../src/core/types/object';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {fetchDocument} from '../../../src/document-fetcher';
 import {getMode} from '../../../src/mode';
-import {isArray} from '../../../src/types';
+import {isArray} from '../../../src/core/types';
 import {isExperimentOn} from '../../../src/experiments';
 
 /** @const {string} */
diff --git a/extensions/amp-access/0.1/amp-access-server.js b/extensions/amp-access/0.1/amp-access-server.js
index 3eba031ca8c67..cc1c8aff89ab4 100644
--- a/extensions/amp-access/0.1/amp-access-server.js
+++ b/extensions/amp-access/0.1/amp-access-server.js
@@ -17,12 +17,12 @@
 import {AccessClientAdapter} from './amp-access-client';
 import {Services} from '../../../src/services';
 import {dev, devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {escapeCssSelectorIdent} from '../../../src/css';
+import {dict} from '../../../src/core/types/object';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {fetchDocument} from '../../../src/document-fetcher';
 import {isExperimentOn} from '../../../src/experiments';
 import {isProxyOrigin, removeFragment} from '../../../src/url';
-import {parseJson} from '../../../src/json';
+import {parseJson} from '../../../src/core/types/object/json';
 
 /** @const {string} */
 const TAG = 'amp-access-server';
diff --git a/extensions/amp-access/0.1/amp-access-source.js b/extensions/amp-access/0.1/amp-access-source.js
index 401153cb83e05..866e9f06b205b 100644
--- a/extensions/amp-access/0.1/amp-access-source.js
+++ b/extensions/amp-access/0.1/amp-access-source.js
@@ -20,15 +20,15 @@ import {AccessOtherAdapter} from './amp-access-other';
 import {AccessServerAdapter} from './amp-access-server';
 import {AccessServerJwtAdapter} from './amp-access-server-jwt';
 import {AccessVendorAdapter} from './amp-access-vendor';
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Services} from '../../../src/services';
-import {assertHttpsUrl, parseQueryString} from '../../../src/url';
+import {assertHttpsUrl} from '../../../src/url';
 import {dev, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict, getValueForExpr} from '../../../src/core/types/object';
 import {getLoginUrl, openLoginDialog} from './login-dialog';
-import {getValueForExpr} from '../../../src/json';
 import {isExperimentOn} from '../../../src/experiments';
-import {isObject} from '../../../src/types';
+import {isObject} from '../../../src/core/types';
+import {parseQueryString} from '../../../src/core/types/string/url';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
 
 /** @const */
@@ -227,13 +227,6 @@ export class AccessSource {
       user().info(TAG, 'Forcing access type: SERVER');
       type = AccessType.SERVER;
     }
-    if (
-      type == AccessType.IFRAME &&
-      !isExperimentOn(this.ampdoc.win, 'amp-access-iframe')
-    ) {
-      user().error(TAG, 'Experiment "amp-access-iframe" is not enabled.');
-      type = AccessType.CLIENT;
-    }
     return type;
   }
 
@@ -278,7 +271,12 @@ export class AccessSource {
    * @private
    */
   analyticsEvent_(eventType) {
-    triggerAnalyticsEvent(this.getRootElement_(), eventType);
+    triggerAnalyticsEvent(
+      this.getRootElement_(),
+      eventType,
+      /** vars */ undefined,
+      /** enableDataVars */ false
+    );
   }
 
   /**
diff --git a/extensions/amp-access/0.1/amp-access-vendor.js b/extensions/amp-access/0.1/amp-access-vendor.js
index 12fe616e8bb3b..183d05aad78df 100644
--- a/extensions/amp-access/0.1/amp-access-vendor.js
+++ b/extensions/amp-access/0.1/amp-access-vendor.js
@@ -15,7 +15,7 @@
  */
 
 import './access-vendor';
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {dev, userAssert} from '../../../src/log';
 
 /** @const {string} */
diff --git a/extensions/amp-access/0.1/amp-access.css b/extensions/amp-access/0.1/amp-access.css
index 0bfc2985f386a..afe69188c9873 100644
--- a/extensions/amp-access/0.1/amp-access.css
+++ b/extensions/amp-access/0.1/amp-access.css
@@ -13,4 +13,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
diff --git a/extensions/amp-access/0.1/amp-access.js b/extensions/amp-access/0.1/amp-access.js
index 57bc88eee8718..456e0f1fbfde0 100644
--- a/extensions/amp-access/0.1/amp-access.js
+++ b/extensions/amp-access/0.1/amp-access.js
@@ -16,24 +16,23 @@
 
 import {AccessSource, AccessType} from './amp-access-source';
 import {AccessVars} from './access-vars';
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {AmpAccessEvaluator} from './access-expr';
-import {AmpEvents} from '../../../src/amp-events';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {CSS} from '../../../build/amp-access-0.1.css';
-import {Observable} from '../../../src/observable';
+import {Observable} from '../../../src/core/data-structures/observable';
 import {Services} from '../../../src/services';
-import {TickLabel} from '../../../src/enums';
-import {cancellation} from '../../../src/error';
+import {TickLabel} from '../../../src/core/constants/enums';
+import {cancellation} from '../../../src/error-reporting';
 import {dev, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict, getValueForExpr} from '../../../src/core/types/object';
 import {getSourceOrigin} from '../../../src/url';
-import {getValueForExpr, tryParseJson} from '../../../src/json';
 import {installStylesForDoc} from '../../../src/style-installer';
-import {isArray} from '../../../src/types';
+import {isArray} from '../../../src/core/types';
 import {isJsonScriptTag} from '../../../src/dom';
 import {listenOnce} from '../../../src/event-helper';
-import {startsWith} from '../../../src/string';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 /** @const */
 const TAG = 'amp-access';
@@ -91,7 +90,7 @@ export class AccessService {
     this.viewport_ = Services.viewportForDoc(ampdoc);
 
     /** @private @const {!../../../src/service/template-impl.Templates} */
-    this.templates_ = Services.templatesFor(ampdoc.win);
+    this.templates_ = Services.templatesForDoc(ampdoc);
 
     /** @private @const {!../../../src/service/mutator-interface.MutatorInterface} */
     this.mutator_ = Services.mutatorForDoc(ampdoc);
@@ -262,7 +261,10 @@ export class AccessService {
     for (let i = 0; i < this.sources_.length; i++) {
       const source = this.sources_[i];
       if (source.getType() == AccessType.VENDOR) {
-        const vendorAdapter = /** @type {!./amp-access-vendor.AccessVendorAdapter} */ (source.getAdapter());
+        const vendorAdapter =
+          /** @type {!./amp-access-vendor.AccessVendorAdapter} */ (
+            source.getAdapter()
+          );
         if (vendorAdapter.getVendorName() == name) {
           return source;
         }
@@ -298,7 +300,12 @@ export class AccessService {
    * @private
    */
   analyticsEvent_(eventType) {
-    triggerAnalyticsEvent(this.getRootElement_(), eventType);
+    triggerAnalyticsEvent(
+      this.getRootElement_(),
+      eventType,
+      /** vars */ undefined,
+      /** enableDataVars */ false
+    );
   }
 
   /**
@@ -460,16 +467,24 @@ export class AccessService {
    */
   applyAuthorizationToElement_(element, response) {
     const expr = element.getAttribute('amp-access');
-    const on = this.evaluator_.evaluate(expr, response);
-    let renderPromise = null;
-    if (on) {
-      renderPromise = this.renderTemplates_(element, response);
+    let on = false;
+    try {
+      on = this.evaluator_.evaluate(expr, response);
+    } catch (err) {
+      // If evaluating the expression yields an error
+      // it is most likely an invalid expression (publisher error).
+      user().error(TAG, err);
     }
-    if (renderPromise) {
-      return renderPromise.then(() =>
-        this.applyAuthorizationAttrs_(element, on)
-      );
+
+    if (on) {
+      const renderTemplate = this.renderTemplates_(element, response);
+      if (renderTemplate) {
+        return renderTemplate.then(() =>
+          this.applyAuthorizationAttrs_(element, on)
+        );
+      }
     }
+
     return this.applyAuthorizationAttrs_(element, on);
   }
 
@@ -698,7 +713,7 @@ export class AccessService {
         invocation.event.preventDefault();
       }
       this.loginWithType_('');
-    } else if (startsWith(invocation.method, 'login-')) {
+    } else if (invocation.method.startsWith('login-')) {
       if (invocation.event) {
         invocation.event.preventDefault();
       }
@@ -759,8 +774,9 @@ export class AccessService {
    */
   combinedResponses() {
     if (this.sources_.length == 1 && !this.sources_[0].getNamespace()) {
-      return /** @type {!JsonObject} */ (this.sources_[0].getAuthResponse() ||
-        {});
+      return /** @type {!JsonObject} */ (
+        this.sources_[0].getAuthResponse() || {}
+      );
     }
 
     const combined = /** @type {!JsonObject} */ ({});
diff --git a/extensions/amp-access/0.1/amp-login-done-dialog.js b/extensions/amp-access/0.1/amp-login-done-dialog.js
index 12f030092f3bc..bb8d567caad4f 100644
--- a/extensions/amp-access/0.1/amp-login-done-dialog.js
+++ b/extensions/amp-access/0.1/amp-login-done-dialog.js
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
+import {assertAbsoluteHttpOrHttpsUrl} from '../../../src/url';
+import {listen} from '../../../src/event-helper';
 import {
-  assertAbsoluteHttpOrHttpsUrl,
   parseQueryString,
   tryDecodeUriComponent,
-} from '../../../src/url';
-import {listen} from '../../../src/event-helper';
+} from '../../../src/core/types/string/url';
 
 /**
  * @private Visible for testing.
diff --git a/extensions/amp-access/0.1/amp-login-done.html b/extensions/amp-access/0.1/amp-login-done.html
index 40f9cb4a388bd..5ade2f753c2f1 100644
--- a/extensions/amp-access/0.1/amp-login-done.html
+++ b/extensions/amp-access/0.1/amp-login-done.html
@@ -105,8 +105,7 @@
       </svg>
     </div>
     <div class="logo-text">
-      <div>Accelerated</div>
-      <div>Mobile Pages</div>
+      <div>AMP</div>
     </div>
   </header>
 
diff --git a/extensions/amp-access/0.1/amp-login-done.js b/extensions/amp-access/0.1/amp-login-done.js
index 0c25173023c52..002594779891e 100644
--- a/extensions/amp-access/0.1/amp-login-done.js
+++ b/extensions/amp-access/0.1/amp-login-done.js
@@ -23,8 +23,8 @@ import '../../../src/polyfills';
 import {LoginDoneDialog} from './amp-login-done-dialog';
 import {bodyAlwaysVisible} from '../../../src/style-installer';
 import {initLogConstructor, setReportError} from '../../../src/log';
-import {onDocumentReady} from '../../../src/document-ready';
-import {reportError} from '../../../src/error';
+import {onDocumentReady} from '../../../src/core/document-ready';
+import {reportError} from '../../../src/error-reporting';
 
 bodyAlwaysVisible(window);
 initLogConstructor();
diff --git a/extensions/amp-access/0.1/iframe-api/OWNERS b/extensions/amp-access/0.1/iframe-api/OWNERS
new file mode 100644
index 0000000000000..a794c2b2ba73b
--- /dev/null
+++ b/extensions/amp-access/0.1/iframe-api/OWNERS
@@ -0,0 +1,14 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      pattern: '{package.json,package-lock.json}',
+      owners: [
+        {name: 'ampproject/wg-infra', requestReviews: false},
+        {name: 'ampproject/wg-performance', requestReviews: false},
+      ],
+    },
+  ],
+}
diff --git a/extensions/amp-access/0.1/iframe-api/package.json b/extensions/amp-access/0.1/iframe-api/package.json
index 58be34f67f561..ca94e82374b23 100644
--- a/extensions/amp-access/0.1/iframe-api/package.json
+++ b/extensions/amp-access/0.1/iframe-api/package.json
@@ -11,13 +11,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/ampproject/amphtml/tree/master/extensions/amp-access/0.1/iframe-api/"
+    "url": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-access/0.1/iframe-api/"
   },
   "devDependencies": {
     "babel-plugin-external-helpers": "6.22.0",
     "babel-preset-env": "1.7.0",
-    "rollup": "2.15.0",
+    "rollup": "2.50.2",
     "rollup-plugin-babel": "4.4.0",
-    "rollup-plugin-cleanup": "3.1.1"
+    "rollup-plugin-cleanup": "3.2.1"
   }
 }
diff --git a/extensions/amp-access/0.1/iframe-api/rollup.config.js b/extensions/amp-access/0.1/iframe-api/rollup.config.js
index b24997ba2ef4b..4e8f618f71978 100644
--- a/extensions/amp-access/0.1/iframe-api/rollup.config.js
+++ b/extensions/amp-access/0.1/iframe-api/rollup.config.js
@@ -33,5 +33,5 @@ export default {
     }),
     cleanup(),
   ],
-  external: [path.resolve('../../../../src/polyfills.js')],
+  external: [path.resolve('../../../../src/polyfills/index.js')],
 };
diff --git a/extensions/amp-access/0.1/jwt.js b/extensions/amp-access/0.1/jwt.js
index f0169dc90899c..b3e9752f9915f 100644
--- a/extensions/amp-access/0.1/jwt.js
+++ b/extensions/amp-access/0.1/jwt.js
@@ -14,10 +14,12 @@
  * limitations under the License.
  */
 
-import {base64UrlDecodeToBytes} from '../../../src/utils/base64';
-import {pemToBytes} from '../../../src/utils/pem';
-import {stringToBytes, utf8Decode} from '../../../src/utils/bytes';
-import {tryParseJson} from '../../../src/json';
+import {
+  base64DecodeToBytes,
+  base64UrlDecodeToBytes,
+} from '../../../src/core/types/string/base64';
+import {stringToBytes, utf8Decode} from '../../../src/core/types/string/bytes';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 /**
  * @typedef {{
@@ -29,6 +31,26 @@ import {tryParseJson} from '../../../src/json';
  */
 let JwtTokenInternalDef;
 
+/**
+ * Converts a text in PEM format into a binary array buffer.
+ * @param {string} pem
+ * @return {!Uint8Array}
+ * @visibleForTesting
+ */
+export function pemToBytes(pem) {
+  const key = pem
+    .trim()
+    // Remove pem prefix, e.g. "----BEGIN PUBLIC KEY----".
+    .replace(/^-+BEGIN[^-]*-+/, '')
+    // Remove pem suffix, e.g. "----END PUBLIC KEY----".
+    .replace(/-+END[^-]*-+$/, '')
+    // Remove line breaks.
+    .replace(/[\r\n]/g, '')
+    // Remove surrounding whitespace.
+    .trim();
+  return base64DecodeToBytes(key);
+}
+
 /**
  * Provides helper methods to decode and verify JWT tokens.
  */
diff --git a/extensions/amp-access/0.1/login-dialog.js b/extensions/amp-access/0.1/login-dialog.js
index 9e08f1cb7530c..2d21dc5c08ef4 100644
--- a/extensions/amp-access/0.1/login-dialog.js
+++ b/extensions/amp-access/0.1/login-dialog.js
@@ -16,7 +16,7 @@
 
 import {Services} from '../../../src/services';
 import {dev, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getData, listen} from '../../../src/event-helper';
 import {getMode} from '../../../src/mode';
 import {openWindowDialog} from '../../../src/dom';
diff --git a/extensions/amp-access/0.1/test/test-access-expr.js b/extensions/amp-access/0.1/test/test-access-expr.js
index 35c3156cecded..a09f89c479bc7 100644
--- a/extensions/amp-access/0.1/test/test-access-expr.js
+++ b/extensions/amp-access/0.1/test/test-access-expr.js
@@ -16,7 +16,7 @@
 
 import {AmpAccessEvaluator} from '../access-expr';
 
-describe('evaluate', () => {
+describes.sandboxed('evaluate', {}, () => {
   let evaluator;
   beforeEach(() => {
     evaluator = new AmpAccessEvaluator();
diff --git a/extensions/amp-access/0.1/test/test-amp-access-client.js b/extensions/amp-access/0.1/test/test-amp-access-client.js
index ae0378c9660e0..a128f4d104c4b 100644
--- a/extensions/amp-access/0.1/test/test-amp-access-client.js
+++ b/extensions/amp-access/0.1/test/test-amp-access-client.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import * as mode from '../../../../src/mode';
 import {AccessClientAdapter} from '../amp-access-client';
 
@@ -32,7 +32,7 @@ describes.realWin(
 
     beforeEach(() => {
       ampdoc = env.ampdoc;
-      clock = lolex.install({target: ampdoc.win});
+      clock = fakeTimers.withGlobal(ampdoc.win).install();
 
       validConfig = {
         'authorization': 'https://acme.com/a?rid=READER_ID',
diff --git a/extensions/amp-access/0.1/test/test-amp-access-iframe.js b/extensions/amp-access/0.1/test/test-amp-access-iframe.js
index ac8cb3dcbb4aa..99e45e7e81ee6 100644
--- a/extensions/amp-access/0.1/test/test-amp-access-iframe.js
+++ b/extensions/amp-access/0.1/test/test-amp-access-iframe.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {AccessIframeAdapter} from '../amp-access-iframe';
 import {Messenger} from '../iframe-api/messenger';
 import {dev} from '../../../../src/log';
@@ -33,8 +33,7 @@ describes.fakeWin(
 
     beforeEach(() => {
       ampdoc = env.ampdoc;
-      clock = lolex.install({
-        target: ampdoc.win,
+      clock = fakeTimers.withGlobal(ampdoc.win).install({
         toFake: ['Date', 'setTimeout', 'clearTimeout'],
       });
 
diff --git a/extensions/amp-access/0.1/test/test-amp-access-server-jwt.js b/extensions/amp-access/0.1/test/test-amp-access-server-jwt.js
index aaa78df2a0354..9a42a9ae1e0f4 100644
--- a/extensions/amp-access/0.1/test/test-amp-access-server-jwt.js
+++ b/extensions/amp-access/0.1/test/test-amp-access-server-jwt.js
@@ -15,7 +15,7 @@
  */
 
 import * as DocumentFetcher from '../../../../src/document-fetcher';
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {AccessServerJwtAdapter} from '../amp-access-server-jwt';
 import {isUserErrorMessage} from '../../../../src/log';
 import {removeFragment, serializeQueryString} from '../../../../src/url';
@@ -32,7 +32,7 @@ describes.realWin('AccessServerJwtAdapter', {amp: true}, (env) => {
   beforeEach(() => {
     win = env.win;
     ampdoc = env.ampdoc;
-    clock = lolex.install({target: win});
+    clock = fakeTimers.withGlobal(win).install();
 
     validConfig = {
       'authorization': 'https://acme.com/a?rid=READER_ID',
diff --git a/extensions/amp-access/0.1/test/test-amp-access-server.js b/extensions/amp-access/0.1/test/test-amp-access-server.js
index a3b75a84acc9b..f7a12803b9373 100644
--- a/extensions/amp-access/0.1/test/test-amp-access-server.js
+++ b/extensions/amp-access/0.1/test/test-amp-access-server.js
@@ -15,7 +15,7 @@
  */
 
 import * as DocumentFetcher from '../../../../src/document-fetcher';
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {AccessServerAdapter} from '../amp-access-server';
 import {removeFragment} from '../../../../src/url';
 
@@ -33,7 +33,7 @@ describes.realWin('AccessServerAdapter', {amp: true}, (env) => {
     win = env.win;
     document = win.document;
     ampdoc = env.ampdoc;
-    clock = lolex.install({target: win});
+    clock = fakeTimers.withGlobal(win).install();
 
     validConfig = {
       'authorization': 'https://acme.com/a?rid=READER_ID',
diff --git a/extensions/amp-access/0.1/test/test-amp-access-source.js b/extensions/amp-access/0.1/test/test-amp-access-source.js
index e54cb08761cae..cd08744a279ee 100644
--- a/extensions/amp-access/0.1/test/test-amp-access-source.js
+++ b/extensions/amp-access/0.1/test/test-amp-access-source.js
@@ -58,7 +58,6 @@ describes.fakeWin(
 
     afterEach(() => {
       toggleExperiment(win, 'amp-access-server', false);
-      toggleExperiment(win, 'amp-access-iframe', false);
     });
 
     function expectSourceType(ampdoc, config, type, adapter) {
@@ -111,12 +110,8 @@ describes.fakeWin(
       config['type'] = 'client';
       expectSourceType(ampdoc, config, 'client', AccessClientAdapter);
 
-      allowConsoleError(() => {
-        config['type'] = 'iframe';
-        expectSourceType(ampdoc, config, 'client', AccessClientAdapter);
-        toggleExperiment(win, 'amp-access-iframe', true);
-        expectSourceType(ampdoc, config, 'iframe', AccessIframeAdapter);
-      });
+      config['type'] = 'iframe';
+      expectSourceType(ampdoc, config, 'iframe', AccessIframeAdapter);
 
       config['type'] = 'server';
       expectSourceType(ampdoc, config, 'client', AccessClientAdapter);
diff --git a/extensions/amp-access/0.1/test/test-amp-access.js b/extensions/amp-access/0.1/test/test-amp-access.js
index cf339295c129b..7b7c1d9bc303e 100644
--- a/extensions/amp-access/0.1/test/test-amp-access.js
+++ b/extensions/amp-access/0.1/test/test-amp-access.js
@@ -16,8 +16,8 @@
 
 import {AccessClientAdapter} from '../amp-access-client';
 import {AccessService} from '../amp-access';
-import {AmpEvents} from '../../../../src/amp-events';
-import {Observable} from '../../../../src/observable';
+import {AmpEvents} from '../../../../src/core/constants/amp-events';
+import {Observable} from '../../../../src/core/data-structures/observable';
 import {Services} from '../../../../src/services';
 import {cidServiceForDocForTesting} from '../../../../src/service/cid-impl';
 import {installPerformanceService} from '../../../../src/service/performance-impl';
@@ -704,6 +704,18 @@ describes.fakeWin(
       templatesMock.expects('renderTemplate').never();
       service.applyAuthorizationToElement_(elementOff, {access: true});
     });
+
+    it('Invalid access expression should be treated as unathorized', () => {
+      const elementError = document.createElement('div');
+      elementError.setAttribute('amp-access', 'NOT (');
+      document.body.appendChild(elementError);
+      templatesMock.expects('renderTemplate').never();
+
+      // Should not throw, but should emit user().error().
+      allowConsoleError(() => {
+        service.applyAuthorizationToElement_(elementError, {access: true});
+      });
+    });
   }
 );
 
diff --git a/extensions/amp-access/0.1/test/test-amp-login-done-dialog.js b/extensions/amp-access/0.1/test/test-amp-login-done-dialog.js
index 4d7285b46aaee..b7ba02fc6d6df 100644
--- a/extensions/amp-access/0.1/test/test-amp-login-done-dialog.js
+++ b/extensions/amp-access/0.1/test/test-amp-login-done-dialog.js
@@ -16,7 +16,7 @@
 
 import {LoginDoneDialog, buildLangSelector} from '../amp-login-done-dialog';
 
-describe('LoginDoneDialog', () => {
+describes.sandboxed('LoginDoneDialog', {}, (env) => {
   let clock;
   let windowApi;
   let dialog;
@@ -25,19 +25,19 @@ describe('LoginDoneDialog', () => {
   let closeButton;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
 
     messageListener = undefined;
     closeButton = {};
     windowApi = {
-      close: window.sandbox.spy(),
+      close: env.sandbox.spy(),
       navigator: {
         language: 'fr-FR',
       },
       location: {
         hash: '#result1',
         search: '',
-        replace: window.sandbox.spy(),
+        replace: env.sandbox.spy(),
       },
       addEventListener: (type, callback) => {
         if (type == 'message') {
@@ -73,7 +73,7 @@ describe('LoginDoneDialog', () => {
         },
       },
     };
-    openerMock = window.sandbox.mock(windowApi.opener);
+    openerMock = env.sandbox.mock(windowApi.opener);
 
     dialog = new LoginDoneDialog(windowApi);
   });
@@ -160,7 +160,7 @@ describe('LoginDoneDialog', () => {
       openerMock
         .expects('postMessage')
         .withExactArgs(
-          window.sandbox.match((arg) => {
+          env.sandbox.match((arg) => {
             return (
               arg.sentinel == 'amp' &&
               arg.type == 'result' &&
@@ -310,7 +310,7 @@ describe('LoginDoneDialog', () => {
       openerMock
         .expects('postMessage')
         .withExactArgs(
-          window.sandbox.match((arg) => {
+          env.sandbox.match((arg) => {
             return (
               arg.sentinel == 'amp' &&
               arg.type == 'result' &&
@@ -359,7 +359,7 @@ describe('LoginDoneDialog', () => {
     });
 
     it('should revert to error mode if window is not closed', () => {
-      dialog.postbackError_ = window.sandbox.spy();
+      dialog.postbackError_ = env.sandbox.spy();
       dialog.postbackSuccess_();
       expect(windowApi.close).to.be.calledOnce;
       expect(dialog.postbackError_).to.have.not.been.called;
diff --git a/extensions/amp-access/0.1/test/test-jwt.js b/extensions/amp-access/0.1/test/test-jwt.js
index c20763aca6604..655f8c2122213 100644
--- a/extensions/amp-access/0.1/test/test-jwt.js
+++ b/extensions/amp-access/0.1/test/test-jwt.js
@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-import {JwtHelper} from '../jwt';
-import {pemToBytes} from '../../../../src/utils/pem';
+import {JwtHelper, pemToBytes} from '../jwt';
 
-describe('JwtHelper', () => {
+describes.sandboxed('JwtHelper', {}, (env) => {
   // Generated from https://jwt.io/#debugger
   // Name deliberately changed from "John Doe" to "John ௵Z加䅌ਇ☎Èʘغޝ" to test
   // correct unicode handling on our part.
@@ -172,7 +171,7 @@ describe('JwtHelper', () => {
         importKey: () => {},
         verify: () => {},
       };
-      subtleMock = window.sandbox.mock(subtle);
+      subtleMock = env.sandbox.mock(subtle);
 
       windowApi = {
         crypto: {subtle},
@@ -238,8 +237,8 @@ describe('JwtHelper', () => {
         .withExactArgs(
           {name: 'RSASSA-PKCS1-v1_5'},
           key,
-          /* sig */ window.sandbox.match(() => true),
-          /* verifiable */ window.sandbox.match(() => true)
+          /* sig */ env.sandbox.match(() => true),
+          /* verifiable */ env.sandbox.match(() => true)
         )
         .returns(Promise.resolve(true))
         .once();
@@ -249,3 +248,79 @@ describe('JwtHelper', () => {
     });
   });
 });
+
+// TODO(amphtml, #25621): Cannot find atob / btoa on Safari.
+describes.sandboxed
+  .configure()
+  .skipSafari()
+  .run('pemToBytes', {}, () => {
+    const PLAIN_TEXT =
+      'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDdlatRjRjogo3WojgGHFHYLugd' +
+      'UWAY9iR3fy4arWNA1KoS8kVw33cJibXr8bvwUAUparCwlvdbH6dvEOfou0/gCFQs' +
+      'HUfQrSDv+MuSUMAe8jzKE4qW+jK+xQU9a03GUnKHkkle+Q0pX/g6jXZ7r1/xAK5D' +
+      'o2kQ+X5xK9cipRgEKwIDAQAB';
+    const PEM =
+      '-----BEGIN PUBLIC KEY-----\n' +
+      'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDdlatRjRjogo3WojgGHFHYLugd\n' +
+      'UWAY9iR3fy4arWNA1KoS8kVw33cJibXr8bvwUAUparCwlvdbH6dvEOfou0/gCFQs\n' +
+      'HUfQrSDv+MuSUMAe8jzKE4qW+jK+xQU9a03GUnKHkkle+Q0pX/g6jXZ7r1/xAK5D\n' +
+      'o2kQ+X5xK9cipRgEKwIDAQAB\n' +
+      '-----END PUBLIC KEY-----';
+
+    it('should convert a valid key', () => {
+      const binary = pemToBytes(PEM);
+      const plain = atob(PLAIN_TEXT);
+      const len = plain.length;
+      expect(binary.byteLength).to.equal(len);
+      expect(binary[0]).to.equal(plain.charCodeAt(0));
+      expect(binary[1]).to.equal(plain.charCodeAt(1));
+      expect(binary[len - 1]).to.equal(plain.charCodeAt(len - 1));
+      expect(binary[len - 2]).to.equal(plain.charCodeAt(len - 2));
+    });
+
+    it('should convert without headers, footers, line breaks', () => {
+      const binary = pemToBytes(PLAIN_TEXT);
+      const plain = atob(PLAIN_TEXT);
+      const len = plain.length;
+      expect(binary.byteLength).to.equal(len);
+      expect(binary[0]).to.equal(plain.charCodeAt(0));
+      expect(binary[1]).to.equal(plain.charCodeAt(1));
+      expect(binary[len - 1]).to.equal(plain.charCodeAt(len - 1));
+      expect(binary[len - 2]).to.equal(plain.charCodeAt(len - 2));
+    });
+
+    it('should convert without line breaks', () => {
+      const binary = pemToBytes(
+        '-----BEGIN PUBLIC KEY-----' + PLAIN_TEXT + '-----END PUBLIC KEY-----'
+      );
+      const plain = atob(PLAIN_TEXT);
+      const len = plain.length;
+      expect(binary.byteLength).to.equal(len);
+      expect(binary[0]).to.equal(plain.charCodeAt(0));
+      expect(binary[1]).to.equal(plain.charCodeAt(1));
+      expect(binary[len - 1]).to.equal(plain.charCodeAt(len - 1));
+      expect(binary[len - 2]).to.equal(plain.charCodeAt(len - 2));
+    });
+
+    it('should convert without header', () => {
+      const binary = pemToBytes(PLAIN_TEXT + '-----END PUBLIC KEY-----');
+      const plain = atob(PLAIN_TEXT);
+      const len = plain.length;
+      expect(binary.byteLength).to.equal(len);
+      expect(binary[0]).to.equal(plain.charCodeAt(0));
+      expect(binary[1]).to.equal(plain.charCodeAt(1));
+      expect(binary[len - 1]).to.equal(plain.charCodeAt(len - 1));
+      expect(binary[len - 2]).to.equal(plain.charCodeAt(len - 2));
+    });
+
+    it('should convert without footer', () => {
+      const binary = pemToBytes('-----BEGIN PUBLIC KEY-----' + PLAIN_TEXT);
+      const plain = atob(PLAIN_TEXT);
+      const len = plain.length;
+      expect(binary.byteLength).to.equal(len);
+      expect(binary[0]).to.equal(plain.charCodeAt(0));
+      expect(binary[1]).to.equal(plain.charCodeAt(1));
+      expect(binary[len - 1]).to.equal(plain.charCodeAt(len - 1));
+      expect(binary[len - 2]).to.equal(plain.charCodeAt(len - 2));
+    });
+  });
diff --git a/extensions/amp-access/0.1/test/test-login-dialog.js b/extensions/amp-access/0.1/test/test-login-dialog.js
index 4cee9e58cbf66..01faed0fafd72 100644
--- a/extensions/amp-access/0.1/test/test-login-dialog.js
+++ b/extensions/amp-access/0.1/test/test-login-dialog.js
@@ -36,7 +36,7 @@ describes.sandboxed('ViewerLoginDialog', {}, (env) => {
 
     windowApi = {
       __AMP_SERVICES: {
-        'viewer': {obj: viewer},
+        'viewer': {obj: viewer, ctor: Object},
       },
       screen: {width: 1000, height: 1000},
       document: {
@@ -168,7 +168,7 @@ describes.sandboxed('WebLoginDialog', {}, (env) => {
     };
     const windowObj = {
       __AMP_SERVICES: {
-        'viewer': {obj: viewer},
+        'viewer': {obj: viewer, ctor: Object},
       },
       open: () => {},
       document: {
diff --git a/extensions/amp-access/0.1/test/validator-amp-access-missing-extension.out b/extensions/amp-access/0.1/test/validator-amp-access-missing-extension.out
index 291ef70dd2736..598c505291116 100644
--- a/extensions/amp-access/0.1/test/validator-amp-access-missing-extension.out
+++ b/extensions/amp-access/0.1/test/validator-amp-access-missing-extension.out
@@ -31,7 +31,7 @@ FAIL
 |    <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
 |    <script id="amp-access" type="application/json">
 >>   ^~~~~~~~~
-amp-access/0.1/test/validator-amp-access-missing-extension.html:31:2 The tag 'amp-access extension .json script' requires including the 'amp-access' extension JavaScript. (see https://amp.dev/documentation/components/amp-access)
+amp-access/0.1/test/validator-amp-access-missing-extension.html:31:2 The tag 'script' requires including the 'amp-access' extension JavaScript. (see https://amp.dev/documentation/components/amp-access)
 |      {
 |        "contents": "currently untested"
 |      }
diff --git a/extensions/amp-access/OWNERS b/extensions/amp-access/OWNERS
index 7f50188aa0f8f..53363d247cb15 100644
--- a/extensions/amp-access/OWNERS
+++ b/extensions/amp-access/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-access/amp-access-analytics.md b/extensions/amp-access/amp-access-analytics.md
index f62e4a52ba850..0b4f28a5a1d96 100644
--- a/extensions/amp-access/amp-access-analytics.md
+++ b/extensions/amp-access/amp-access-analytics.md
@@ -149,7 +149,7 @@ When only one Login URL is configured, the event is `access-login[-type]-failed`
 
 ## Access analytics variables
 
-Access contributes the following URL substitutions to the [amp-var-substitutions.md](../../spec/amp-var-substitutions.md).
+Access contributes the following URL substitutions to the [amp-var-substitutions.md](../../docs/spec/amp-var-substitutions.md).
 
 ### ACCESS_READER_ID
 
diff --git a/extensions/amp-access/amp-access.md b/extensions/amp-access/amp-access.md
index 25665d18372d9..151f45120a824 100644
--- a/extensions/amp-access/amp-access.md
+++ b/extensions/amp-access/amp-access.md
@@ -50,12 +50,12 @@ use `amp-subscriptions`.
 
 The proposed solution gives control to the Publisher over the following decisions and flows:
 
-- Create and maintain users
-- Control of metering (allow for a certain number of free views)
-- Responsibility for the login flow
-- Responsibility for authenticating the user
-- Responsibility for access rules and authorization
-- Flexibility over access parameters on a per-document basis
+-   Create and maintain users
+-   Control of metering (allow for a certain number of free views)
+-   Responsibility for the login flow
+-   Responsibility for authenticating the user
+-   Responsibility for access rules and authorization
+-   Flexibility over access parameters on a per-document basis
 
 The solution comprises the following components:
 
@@ -206,7 +206,7 @@ It is possible to specify multiple access providers using an array instead of a
 
 ### Access URL Variables
 
-When configuring the URLs for various endpoints, the Publisher can use substitution variables. The full list of these variables are defined in the [AMP Var Spec](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md). In addition, this spec adds a few access-specific variables such as `READER_ID` and `AUTHDATA`. Some of the most relevant variables are described in the table below:
+When configuring the URLs for various endpoints, the Publisher can use substitution variables. The full list of these variables are defined in the [AMP Var Spec](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md). In addition, this spec adds a few access-specific variables such as `READER_ID` and `AUTHDATA`. Some of the most relevant variables are described in the table below:
 
 <table>
   <tr>
@@ -313,8 +313,8 @@ Here’s an example that shows either login link or the complete content based o
 
 Here:
 
-- _subscriber_ is a boolean field in the authorization response returned by the Authorization endpoint. This section is hidden by default, which is optional.
-- This example elects to show full content optimistically.
+-   _subscriber_ is a boolean field in the authorization response returned by the Authorization endpoint. This section is hidden by default, which is optional.
+-   This example elects to show full content optimistically.
 
 Here’s another example that shows the disclaimer to the Reader about the state of metering:
 
@@ -352,18 +352,18 @@ https://publisher.com/amp-access.json?
 
 The response is a free-form JSON object: it can contain any properties and values with few limitations. The limitations are:
 
-- The property names have to conform to the restrictions defined by the `amp-access` expressions grammar (see [Appendix A][1]). This mostly means that the property names cannot contain characters such as spaces, dashes and other characters that do not conform to the “amp-access” specification.
-- The property values can only be one of the types: string, number, boolean.
-- Values can also be nested as objects with values of the same types: string, number, boolean.
-- The total size of the serialized authorization response cannot exceed 500 bytes.
-- Please ensure that the response does not include any personally identifiable information (PII) or personal data.
+-   The property names have to conform to the restrictions defined by the `amp-access` expressions grammar (see [Appendix A][1]). This mostly means that the property names cannot contain characters such as spaces, dashes and other characters that do not conform to the “amp-access” specification.
+-   The property values can only be one of the types: string, number, boolean.
+-   Values can also be nested as objects with values of the same types: string, number, boolean.
+-   The total size of the serialized authorization response cannot exceed 500 bytes.
+-   Please ensure that the response does not include any personally identifiable information (PII) or personal data.
 
 Here’s a small list of possible ideas for properties that can be returned from the Authorization endpoint:
 
-- Metering info: maximum allowed number of views and current number of views.
-- Whether the Reader is logged in or a subscriber.
-- A more detailed type of the subscription: basic, premium
-- Geo: country, region, custom publication region
+-   Metering info: maximum allowed number of views and current number of views.
+-   Whether the Reader is logged in or a subscriber.
+-   A more detailed type of the subscription: basic, premium
+-   Geo: country, region, custom publication region
 
 Here’s an example of the response when the Reader is not a subscriber and is metered at 10 articles/month and has viewed 6 articles already:
 
@@ -423,8 +423,8 @@ The Pingback endpoint is called when the Reader has started viewing the document
 
 The publisher may choose to use the pingback:
 
-- to count down the number of free views of the page
-- to map the AMP Reader ID to the Publisher’s identity, since as a credentialed CORS endpoint, the Pingback may contain Publisher cookies
+-   to count down the number of free views of the page
+-   to map the AMP Reader ID to the Publisher’s identity, since as a credentialed CORS endpoint, the Pingback may contain Publisher cookies
 
 The request format is:
 
@@ -549,27 +549,27 @@ As usual, the Reader ID should be included in the call to Login Page and can be
 
 ## AMP Glossary
 
-- **AMP Document** - the HTML document that follows AMP format and validated by AMP Validator. AMP Documents are cacheable by Google AMP Cache.
-- **AMP Validator** - the computer program that performs a static analysis of an HTML document and returns success or failure depending on whether the document conforms to the AMP format.
-- **AMP Runtime** - the JavaScript runtime that executes AMP Document.
-- **Google AMP Cache** - the proxying cache for AMP documents.
-- **AMP Viewer** - the Web or native application that displays/embeds AMP Documents.
-- **Publisher.com** - the site of an AMP publisher.
-- **CORS endpoint** - cross-origin HTTPS endpoint. See [https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) for more info. See [CORS Origin Security][9] for how such requests can be secured.
-- **Reader** - the actual person viewing AMP documents.
-- **AMP Prerendering** - AMP Viewers may take advantage of prerendering, which renders a hidden document before it can be shown. This adds a significant performance boost. But it is important to take into account the fact that the document prerendering does not constitute a view since the Reader may never actually see the document.
+-   **AMP Document** - the HTML document that follows AMP format and validated by AMP Validator. AMP Documents are cacheable by Google AMP Cache.
+-   **AMP Validator** - the computer program that performs a static analysis of an HTML document and returns success or failure depending on whether the document conforms to the AMP format.
+-   **AMP Runtime** - the JavaScript runtime that executes AMP Document.
+-   **Google AMP Cache** - the proxying cache for AMP documents.
+-   **AMP Viewer** - the Web or native application that displays/embeds AMP Documents.
+-   **Publisher.com** - the site of an AMP publisher.
+-   **CORS endpoint** - cross-origin HTTPS endpoint. See [https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) for more info. See [CORS Origin Security][9] for how such requests can be secured.
+-   **Reader** - the actual person viewing AMP documents.
+-   **AMP Prerendering** - AMP Viewers may take advantage of prerendering, which renders a hidden document before it can be shown. This adds a significant performance boost. But it is important to take into account the fact that the document prerendering does not constitute a view since the Reader may never actually see the document.
 
 ## Revisions
 
-- 2016-Sep-02: "noPingback" configuration property and optional pingback.
-- 2016-Mar-03: Resend pingback after login (v0.5).
-- 2016-Feb-19: Corrected samples to remove `{}` from URL var substitutions.
-- 2016-Feb-15: [Configuration][8] and [Authorization Endpoint][4] now allow "authorizationFallbackResponse" property that can be used when authorization fails.
-- 2016-Feb-11: Authorization request timeout in [Authorization Endpoint][4].
-- 2016-Feb-11: Nested field references such as `object.field` are now allowed.
-- 2016-Feb-09: [First-click-free][13] and [Metering][12] sections.
-- 2016-Feb-03: Spec for "source origin" security added to the [CORS Origin security][9].
-- 2016-Feb-01: "return" query parameter for Login Page can be customized using RETURN_URL URL substitution.
+-   2016-Sep-02: "noPingback" configuration property and optional pingback.
+-   2016-Mar-03: Resend pingback after login (v0.5).
+-   2016-Feb-19: Corrected samples to remove `{}` from URL var substitutions.
+-   2016-Feb-15: [Configuration][8] and [Authorization Endpoint][4] now allow "authorizationFallbackResponse" property that can be used when authorization fails.
+-   2016-Feb-11: Authorization request timeout in [Authorization Endpoint][4].
+-   2016-Feb-11: Nested field references such as `object.field` are now allowed.
+-   2016-Feb-09: [First-click-free][13] and [Metering][12] sections.
+-   2016-Feb-03: Spec for "source origin" security added to the [CORS Origin security][9].
+-   2016-Feb-01: "return" query parameter for Login Page can be customized using RETURN_URL URL substitution.
 
 ## Appendix A: “amp-access” expression grammar
 
@@ -629,4 +629,4 @@ This section will cover a detailed explanation of the design underlying the amp-
 
 ## Validation
 
-See [amp-access rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-access/validator-amp-access.protoascii) in the AMP validator specification.
+See [amp-access rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-access/validator-amp-access.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-accordion/0.1/amp-accordion.css b/extensions/amp-accordion/0.1/amp-accordion.css
index 0acea615b6afe..80ab21976e1b6 100644
--- a/extensions/amp-accordion/0.1/amp-accordion.css
+++ b/extensions/amp-accordion/0.1/amp-accordion.css
@@ -14,7 +14,18 @@
  * limitations under the License.
  */
 
-/* heading/clontent */
+/*
+ * Restore the default layout from ampshared.css, which only used until
+ * the build is complete.
+ */
+amp-accordion > section > :last-child {
+  display: none !important;
+}
+amp-accordion > section[expanded] > :last-child {
+  display: block !important;
+}
+
+/* heading/content */
 .i-amphtml-accordion-header,
 .i-amphtml-accordion-content {
   margin: 0;
@@ -30,18 +41,6 @@
   border: solid 1px #dfdfdf;
 }
 
-amp-accordion > section:not([expanded]) > :last-child[rendersubtree] {
-  border: none !important;
-  display: block !important;
-  height: 0px !important;
-  margin: 0px !important;
-  opacity: 0 !important;
-  padding: 0 !important;
-  position: absolute !important;
-  top: -999999px !important;
-  width: 100% !important;
-}
-
 /* Media should never play when a section is collapsed */
 amp-accordion > section:not([expanded]) .i-amphtml-media-component,
 amp-accordion > section:not([expanded]) .i-amphtml-media-component * {
diff --git a/extensions/amp-accordion/0.1/amp-accordion.js b/extensions/amp-accordion/0.1/amp-accordion.js
index 5311360ac02f0..3855e5ff16772 100644
--- a/extensions/amp-accordion/0.1/amp-accordion.js
+++ b/extensions/amp-accordion/0.1/amp-accordion.js
@@ -14,27 +14,25 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {Animation} from '../../../src/animation';
 import {CSS} from '../../../build/amp-accordion-0.1.css';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Layout} from '../../../src/layout';
 import {Services} from '../../../src/services';
-import {bezierCurve} from '../../../src/curve';
-import {clamp} from '../../../src/utils/math';
-import {closest, tryFocus} from '../../../src/dom';
+import {bezierCurve} from '../../../src/core/data-structures/curve';
+import {clamp} from '../../../src/core/math';
+import {closest, dispatchCustomEvent, tryFocus} from '../../../src/dom';
 import {createCustomEvent} from '../../../src/event-helper';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {getMode} from '../../../src/mode';
+import {dict} from '../../../src/core/types/object';
 import {getStyle, setImportantStyles, setStyles} from '../../../src/style';
-import {isExperimentOn} from '../../../src/experiments';
 import {
   numeric,
   px,
   setStyles as setStylesTransition,
 } from '../../../src/transition';
-import {parseJson} from '../../../src/json';
+import {parseJson} from '../../../src/core/types/object/json';
 import {removeFragment} from '../../../src/url';
 
 const TAG = 'amp-accordion';
@@ -43,14 +41,12 @@ const MIN_TRANSITION_DURATION = 200; // ms
 const EXPAND_CURVE_ = bezierCurve(0.47, 0, 0.745, 0.715);
 const COLLAPSE_CURVE_ = bezierCurve(0.39, 0.575, 0.565, 1);
 
-const isDisplayLockingEnabledForAccordion = (win) => {
-  return (
-    isExperimentOn(win, 'amp-accordion-display-locking') &&
-    ('renderSubtree' in Element.prototype || getMode().test)
-  );
-};
-
 class AmpAccordion extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -82,11 +78,6 @@ class AmpAccordion extends AMP.BaseElement {
     return layout == Layout.CONTAINER;
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   buildCallback() {
     this.action_ = Services.actionServiceForDoc(this.element);
@@ -102,7 +93,7 @@ class AmpAccordion extends AMP.BaseElement {
       userAssert(
         section.tagName.toLowerCase() == 'section',
         'Sections should be enclosed in a <section> tag, ' +
-          'See https://github.com/ampproject/amphtml/blob/master/extensions/' +
+          'See https://github.com/ampproject/amphtml/blob/main/extensions/' +
           'amp-accordion/amp-accordion.md. Found in: %s',
         this.element
       );
@@ -110,25 +101,35 @@ class AmpAccordion extends AMP.BaseElement {
       userAssert(
         sectionComponents.length == 2,
         'Each section must have exactly two children. ' +
-          'See https://github.com/ampproject/amphtml/blob/master/extensions/' +
+          'See https://github.com/ampproject/amphtml/blob/main/extensions/' +
           'amp-accordion/amp-accordion.md. Found in: %s',
         this.element
       );
-      const content = sectionComponents[1];
+      const {0: header, 1: content} = sectionComponents;
       content.classList.add('i-amphtml-accordion-content');
+
+      // Ensure each accordion has a unique id, helping screen readers
+      // understand the relationship between the pieces of content.
       let contentId = content.getAttribute('id');
       if (!contentId) {
-        // To ensure that we pass Accessibility audits -
-        // we need to make sure that each accordion has a unique ID.
-        // In case the accordion doesn't have an ID we use a
-        // random number to ensure uniqueness.
         contentId = this.prefix_ + '_AMP_content_' + index;
         content.setAttribute('id', contentId);
       }
+      let headerId = header.getAttribute('id');
+      if (!headerId) {
+        headerId = this.prefix_ + '_AMP_header_' + index;
+        header.setAttribute('id', headerId);
+      }
 
       this.registerAction('toggle', (i) => this.handleAction_(i));
       this.registerAction('expand', (i) => this.handleAction_(i));
       this.registerAction('collapse', (i) => this.handleAction_(i));
+      /** If the element is in an email document, allow its `open` and `close` actions. */
+      this.action_.addToAllowlist(
+        TAG,
+        ['toggle', 'expand', 'collapse'],
+        ['email']
+      );
 
       // Listen for mutations on the 'data-expand' attribute.
       const expandObserver = new this.win.MutationObserver((mutations) => {
@@ -154,20 +155,30 @@ class AmpAccordion extends AMP.BaseElement {
         // for details.
       });
 
+      userAssert(
+        !section.hasAttribute('[expanded]') &&
+          !section.hasAttribute('data-amp-bind-expanded'),
+        'The "expanded" attribute cannot be used with amp-bind in version ' +
+          '0.1 of amp-accordion. Please bind to [data-expand] instead. ' +
+          'Found in: %s',
+        this.element
+      );
+
       const isExpanded = section.hasAttribute('expanded');
-      const header = sectionComponents[0];
       header.classList.add('i-amphtml-accordion-header');
-      header.setAttribute('role', 'button');
+      if (!header.hasAttribute('role')) {
+        header.setAttribute('role', 'button');
+      }
       header.setAttribute('aria-controls', contentId);
       header.setAttribute('aria-expanded', String(isExpanded));
-      this.setRenderSubtreeIfEnabled_(
-        content,
-        isExpanded ? '' : 'invisible skip-viewport-activation'
-      );
       if (!header.hasAttribute('tabindex')) {
         header.setAttribute('tabindex', 0);
       }
       this.headers_.push(header);
+      content.setAttribute('aria-labelledby', headerId);
+      if (!content.hasAttribute('role')) {
+        content.setAttribute('role', 'region');
+      }
 
       userAssert(
         this.action_.hasAction(header, 'tap', section) == false,
@@ -176,14 +187,6 @@ class AmpAccordion extends AMP.BaseElement {
 
       header.addEventListener('click', this.clickHandler_.bind(this));
       header.addEventListener('keydown', this.keyDownHandler_.bind(this));
-
-      if (isDisplayLockingEnabledForAccordion(this.win)) {
-        content.addEventListener('rendersubtreeactivation', (event) => {
-          // Event occurs on the content element whose parent is the section to open.
-          const parentSection = dev().assertElement(event.target.parentElement);
-          this.toggle_(parentSection, ActionTrust.LOW, /* force expand */ true);
-        });
-      }
     });
   }
 
@@ -192,7 +195,7 @@ class AmpAccordion extends AMP.BaseElement {
    * @private
    */
   handleAction_(invocation) {
-    const {method, args, trust} = invocation;
+    const {args, method, trust} = invocation;
 
     let toExpand = undefined;
     if (method === 'expand') {
@@ -239,9 +242,9 @@ class AmpAccordion extends AMP.BaseElement {
         dev().assertString(this.sessionId_)
       );
       return sessionStr
-        ? /** @type {!JsonObject} */ (devAssert(
-            parseJson(dev().assertString(sessionStr))
-          ))
+        ? /** @type {!JsonObject} */ (
+            devAssert(parseJson(dev().assertString(sessionStr)))
+          )
         : dict();
     } catch (e) {
       dev().fine(
@@ -292,7 +295,7 @@ class AmpAccordion extends AMP.BaseElement {
     );
     this.action_.trigger(section, name, event, trust);
 
-    this.element.dispatchCustomEvent(name);
+    dispatchCustomEvent(this.element, name);
   }
 
   /**
@@ -327,26 +330,17 @@ class AmpAccordion extends AMP.BaseElement {
     if (this.element.hasAttribute('animate')) {
       if (toExpand) {
         header.setAttribute('aria-expanded', 'true');
-        this.setRenderSubtreeIfEnabled_(content, '');
         this.animateExpand_(section, trust);
         if (this.element.hasAttribute('expand-single-section')) {
           this.sections_.forEach((sectionIter) => {
             if (sectionIter != section) {
               this.animateCollapse_(sectionIter, trust);
               sectionIter.children[0].setAttribute('aria-expanded', 'false');
-              this.setRenderSubtreeIfEnabled_(
-                sectionIter.children[1],
-                'invisible skip-viewport-activation'
-              );
             }
           });
         }
       } else {
         header.setAttribute('aria-expanded', 'false');
-        this.setRenderSubtreeIfEnabled_(
-          content,
-          'invisible skip-viewport-activation'
-        );
         this.animateCollapse_(section, trust);
       }
     } else {
@@ -355,7 +349,6 @@ class AmpAccordion extends AMP.BaseElement {
         if (toExpand) {
           this.triggerEvent_('expand', section, trust);
           section.setAttribute('expanded', '');
-          this.setRenderSubtreeIfEnabled_(content, '');
           header.setAttribute('aria-expanded', 'true');
           // if expand-single-section is set, only allow one <section> to be
           // expanded at a time
@@ -367,10 +360,6 @@ class AmpAccordion extends AMP.BaseElement {
                   sectionIter.removeAttribute('expanded');
                 }
                 sectionIter.children[0].setAttribute('aria-expanded', 'false');
-                this.setRenderSubtreeIfEnabled_(
-                  sectionIter.children[1],
-                  'invisible skip-viewport-activation'
-                );
               }
             });
           }
@@ -378,10 +367,6 @@ class AmpAccordion extends AMP.BaseElement {
           this.triggerEvent_('collapse', section, trust);
           section.removeAttribute('expanded');
           header.setAttribute('aria-expanded', 'false');
-          this.setRenderSubtreeIfEnabled_(
-            content,
-            'invisible skip-viewport-activation'
-          );
         }
       }, section);
     }
@@ -389,20 +374,6 @@ class AmpAccordion extends AMP.BaseElement {
     this.setSessionState_();
   }
 
-  /**
-   * If Display Locking API is enabled, set the renderSubtree attribute
-   * on the given element with the given value.
-   * @param {Element} element
-   * @param {string} value
-   * @private
-   */
-  setRenderSubtreeIfEnabled_(element, value) {
-    if (!isDisplayLockingEnabledForAccordion(this.win) || !element) {
-      return;
-    }
-    element['renderSubtree'] = value;
-  }
-
   /**
    * @param {!Element} section
    * @param {!ActionTrust} trust
diff --git a/extensions/amp-accordion/0.1/amp-accordion.md b/extensions/amp-accordion/0.1/amp-accordion.md
new file mode 100644
index 0000000000000..4246d0b6bc150
--- /dev/null
+++ b/extensions/amp-accordion/0.1/amp-accordion.md
@@ -0,0 +1,363 @@
+---
+$category@: layout
+formats:
+  - websites
+  - ads
+  - email
+teaser:
+  text: A stacked list of headers that collapse or expand content sections with user interaction.
+---
+
+<!---
+Copyright 2016 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.
+-->
+
+# amp-accordion
+
+Provides a way for viewers to glance at the content outline and jump to any section. This is helpful for mobile devices where even a couple of sentences into a section requires scrolling.
+
+## Usage
+
+The `amp-accordion` component allows you to display collapsible and expandable
+content sections. This component provides a way for viewers to glance at the
+content outline and jump to any section. Effective use reduces scrolling needs
+on mobile devices.
+
+[filter formats="websites, ads"]
+
+-   An `amp-accordion` accepts one or more `<section>` elements as its direct
+    children.
+-   Each `<section>` must contain exactly two direct children.
+-   The first child in a `<section>` is the heading for that section of the
+    `amp-accordion`. It must be a heading element such as `<h1>-<h6>` or
+    `<header>`.
+-   The second child in a `<section>` is the expandable/collapsible content. It
+    can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).
+-   A click or tap on a `<section>` heading expands or collapses the section.
+-   An `amp-accordion` with a defined `id` preserves the collapsed or expanded
+    state of each section while the user remains on your domain.
+
+[/filter] <!-- formats="websites, ads" -->
+
+[filter formats="email"]
+
+-   An `amp-accordion` accepts one or more `<section>` elements as its direct
+    children.
+-   Each `<section>` must contain exactly two direct children.
+-   The first child in a `<section>` is the heading for that section of the
+    `amp-accordion`. It must be a heading element such as `<h1>-<h6>` or
+    `<header>`.
+-   The second child in a `<section>` is the expandable/collapsible content. It
+    can be any tag allowed in [AMP for Email](https://github.com/ampproject/amphtml/blob/main/docs/spec/email/amp-email-html.md).
+-   A click or tap on a `<section>` heading expands or collapses the section.
+
+[/filter]
+
+## Example
+
+The example below contains an `amp-accordion` with three sections. The
+`expanded` attribute on the third section expands it on page load.
+[filter formats="websites, ads"]Include the `disable-session-state` attribute
+to preserve the collapsed/expanded state.[/filter]
+
+[example preview="top-frame" playground="true"]
+
+```html
+<amp-accordion id="my-accordion"{% if not format=='email'%} disable-session-states{% endif %}>
+  <section>
+    <h2>Section 1</h2>
+    <p>Content in section 1.</p>
+  </section>
+  <section>
+    <h2>Section 2</h2>
+    <div>Content in section 2.</div>
+  </section>
+  <section expanded>
+    <h2>Section 3</h2>
+    <amp-img src="{{server_for_email}}/static/inline-examples/images/squirrel.jpg"
+      width="320"
+      height="256"></amp-img>
+  </section>
+</amp-accordion>
+```
+
+[/example]
+
+## Attributes
+
+### animate
+
+Include the `animate` attribute in `<amp-accordion>` to add a "roll down"
+animation when the content is expanded and "roll up" animation when collapsed.
+
+[example preview="top-frame" playground="true"]
+
+```html
+<amp-accordion animate>
+  <section>
+    <h2>Section 1</h2>
+    <p>Content in section 1.</p>
+  </section>
+  <section>
+    <h2>Section 2</h2>
+    <div>Content in section 2.</div>
+  </section>
+  <section>
+    <h2>Section 3</h2>
+    <amp-img
+      src="{{server_for_email}}/static/inline-examples/images/squirrel.jpg"
+      width="320"
+      height="256"
+    ></amp-img>
+  </section>
+</amp-accordion>
+```
+
+[/example]
+
+[filter formats="websites"]
+
+### disable-session-states
+
+Include the `disable-session-states` attribute on `<amp-accordion>` to disable
+collapsed/expanded state preservation.
+
+[/filter] <!-- formats="websites" -->
+
+### expanded
+
+Apply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.
+
+### expand-single-section
+
+Apply the `expand-single-section` attribute to `amp-accordion` to specify that
+only one `<section>` can expand at a time. If the user clicks or taps on a
+collapsed `<section>`, any currently expanded `<section>` collapses.
+
+[example preview="top-frame" playground="true"]
+
+```html
+<amp-accordion expand-single-section>
+  <section>
+    <h2>Section 1</h2>
+    <p>Content in section 1.</p>
+  </section>
+  <section>
+    <h2>Section 2</h2>
+    <div>Content in section 2.</div>
+  </section>
+  <section>
+    <h2>Section 3</h2>
+    <amp-img
+      src="{{server_for_email}}/static/inline-examples/images/squirrel.jpg"
+      width="320"
+      height="256"
+    ></amp-img>
+  </section>
+</amp-accordion>
+```
+
+[/example]
+
+### [data-expand]
+
+Bind the `[data-expand]` attribute to a `<section>` to expand or collapse that
+section. An expanded section collapses if the expression evaluates as false. A
+collapsed section expands if the expression evaluates as anything other than
+false.
+
+[example preview="top-frame" playground="true"]
+
+```html
+<amp-accordion>
+  <section
+    [data-expand]="sectionOne"
+    on="expand:AMP.setState({sectionOne: true});collapse:AMP.setState({sectionOne: false})"
+  >
+    <h2>Section 1</h2>
+    <p>Bunch of awesome content</p>
+  </section>
+  <section>
+    <h2>Section 2</h2>
+    <div>Bunch of awesome content</div>
+  </section>
+  <section>
+    <h2>Section 3</h2>
+    <div>Bunch of awesome content</div>
+  </section>
+</amp-accordion>
+<button on="tap:AMP.setState({sectionOne: true})">Expand section 1</button>
+<button on="tap:AMP.setState({sectionOne: false})">Collapse section 1</button>
+```
+
+[/example]
+
+[filter formats="websites"]
+
+## Actions
+
+### toggle
+
+The `toggle` action switches the `expanded` and `collapsed` states of
+`amp-accordion` sections. When called with no arguments, it toggles all sections
+of the accordion. To specify a specific section, add the `section` argument and
+use its corresponding `id` as the value.
+
+[example preview="top-frame" playground="true"]
+
+```html
+<amp-accordion id="myAccordion">
+  <section id="section1">
+    <h2>Section 1</h2>
+    <p>Bunch of awesome content</p>
+  </section>
+  <section>
+    <h2>Section 2</h2>
+    <div>Bunch of awesome content</div>
+  </section>
+  <section>
+    <h2>Section 3</h2>
+    <div>Bunch of awesome content</div>
+  </section>
+</amp-accordion>
+<button on="tap:myAccordion.toggle">Toggle All Sections</button>
+<button on="tap:myAccordion.toggle(section='section1')">
+  Toggle Section 1
+</button>
+```
+
+[/example]
+
+### expand
+
+The `expand` action expands the sections of the `amp-accordion`. If a section
+is already expanded, it stays expanded. When called with no arguments, it
+expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.
+
+```html
+<button on="tap:myAccordion.expand">Expand All Sections</button>
+<button on="tap:myAccordion.expand(section='section1')">
+  Expand Section 1
+</button>
+```
+
+### collapse
+
+The `collapse` action collapses the sections of the `amp-accordion`. If a
+section is already collapsed, it stays collapsed. When called with no arguments,
+it collapses all sections of the accordion. To specify a section, add the
+`section` argument, and use its corresponding `id` as the value.
+
+```html
+<button on="tap:myAccordion.collapse">Collapse All Sections</button>
+<button on="tap:myAccordion.collapse(section='section1')">
+  Collapse Section 1
+</button>
+```
+
+[/filter] <!-- formats="websites" -->
+
+## Events
+
+The following `amp-accordion` events trigger on accordion sections when they're
+clicked or tapped.
+
+### expand
+
+The `expand` event triggers the targeted `amp-accordion` section to change from
+the collapsed state to the expanded state. Call `expand` on an already expanded
+section to trigger the `expand` event.
+
+[example preview="top-frame" playground="true"]
+
+```html
+<amp-accordion id="myAccordion">
+  <section id="section1" on="expand:myAccordion.expand(section='section2')">
+    <h2>Section 1</h2>
+    <p>Opening me will open Section 2</p>
+  </section>
+  <section>
+    <h2>Section 3</h2>
+    <div>Bunch of awesome content</div>
+  </section>
+</amp-accordion>
+```
+
+[/example]
+
+### collapse
+
+The `collapse` event triggers the targeted `amp-accordion` section to change
+from the expanded state to the collapsed state. Call `collapse` on an already
+collapsed section to trigger the event.
+
+[example preview="top-frame" playground="true"]
+
+```html
+<amp-accordion id="myAccordion">
+  <section id="section2" on="collapse:myAccordion.collapse(section='section1')">
+    <h2>Section 2</h2>
+    <div>Closing me will close Section 1</div>
+  </section>
+  <section>
+    <h2>Section 3</h2>
+    <div>Bunch of awesome content</div>
+  </section>
+</amp-accordion>
+```
+
+[/example]
+
+## Styling
+
+The `amp-accordion` element selector styles an `amp-accordion` according to your
+specifications. The following example changes the background color to green:
+
+```css
+amp-accordion {
+  background-color: green;
+}
+```
+
+Keep the following points in mind when you style an amp-accordion:
+
+-   `amp-accordion` elements are always `display: block`.
+-   `float` cannot style a `<section>`, heading, nor content elements.
+-   An expanded section applies the `expanded` attribute to the `<section>`
+    element.
+-   The content element is clear-fixed with `overflow: hidden` and hence cannot
+    have scrollbars.
+-   Margins of the `<amp-accordion>`, `<section>`, heading, and content elements
+    are set to `0`, but can be overridden in custom styles.
+-   Both the header and content elements are `position: relative`.
+
+## Accessibility
+
+`amp-accordion` automatically adds the following [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA):
+
+-   `aria-controls`: Applied to the header element of each `amp-accordion` section.
+-   `aria-expanded (state)`: Applied to the header element of each `amp-accordion` section.
+-   `aria-labelledby`: Applied to the content element of each `amp-accordion` section.
+
+`amp-accordion` also automatically adds the following accessibility attributes:
+
+-   `tabindex`: Applied to the header element of each `amp-accordion` section.
+-   `role=button`: Applied to the header element of each `amp-accordion` section.
+-   `role=region`: Applied to the content element of each `amp-accordion` section.
+
+## Validation
+
+See [amp-accordion rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-accordion/validator-amp-accordion.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-accordion/0.1/test/integration/test-amp-accordion.js b/extensions/amp-accordion/0.1/test/integration/test-amp-accordion.js
index a58b88560a5d3..6bea056bc7caf 100644
--- a/extensions/amp-accordion/0.1/test/integration/test-amp-accordion.js
+++ b/extensions/amp-accordion/0.1/test/integration/test-amp-accordion.js
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-describe
+describes.sandboxed
   .configure()
   .skipEdge()
-  .run('amp-accordion', function () {
+  .run('amp-accordion', {}, function () {
     this.timeout(10000);
     const extensions = ['amp-accordion'];
     const body = `
diff --git a/extensions/amp-accordion/0.1/test/test-amp-accordion.js b/extensions/amp-accordion/0.1/test/test-amp-accordion.js
index d691c05ca1095..bf9885f1e2f1d 100644
--- a/extensions/amp-accordion/0.1/test/test-amp-accordion.js
+++ b/extensions/amp-accordion/0.1/test/test-amp-accordion.js
@@ -15,12 +15,18 @@
  */
 
 import '../amp-accordion';
-import {ActionTrust} from '../../../../src/action-constants';
-import {Keys} from '../../../../src/utils/key-codes';
+import {ActionService} from '../../../../src/service/action-impl';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
+import {Keys} from '../../../../src/core/constants/key-codes';
+import {Services} from '../../../../src/services';
 import {computedStyle} from '../../../../src/style';
+import {
+  createElementWithAttributes,
+  tryFocus,
+  whenUpgradedToCustomElement,
+} from '../../../../src/dom';
+import {htmlFor} from '../../../../src/static-template';
 import {poll} from '../../../../testing/iframe';
-import {toggleExperiment} from '../../../../src/experiments';
-import {tryFocus} from '../../../../src/dom';
 
 describes.realWin(
   'amp-accordion',
@@ -58,9 +64,10 @@ describes.realWin(
       }
       doc.body.appendChild(ampAccordion);
       return ampAccordion
-        .build()
-        .then(() => {
-          ampAccordion.implementation_.mutateElement = (fn) =>
+        .buildInternal()
+        .then(() => ampAccordion.getImpl())
+        .then((impl) => {
+          impl.mutateElement = (fn) =>
             new Promise(() => {
               fn();
             });
@@ -93,265 +100,196 @@ describes.realWin(
       impl.executeAction(invocation);
     }
 
-    it('should expand when high trust toggle action is triggered on a collapsed section', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const impl = ampAccordion.implementation_;
-        const headerElements = doc.querySelectorAll('section > *:first-child');
-        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-          .false;
-        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-          'false'
-        );
-        impl.toggle_(headerElements[0].parentNode, ActionTrust.HIGH);
-        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-          .true;
-        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-          'true'
-        );
-      });
+    it('should expand when high trust toggle action is triggered on a collapsed section', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be.false;
+      expect(headerElements[0].getAttribute('aria-expanded')).to.equal('false');
+      impl.toggle_(headerElements[0].parentNode, ActionTrust.HIGH);
+      expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[0].getAttribute('aria-expanded')).to.equal('true');
     });
 
-    it('multiple accordions should not have the same IDs on content', () => {
-      return getAmpAccordion().then(() => {
-        return getAmpAccordion().then(() => {
-          const contentElements = doc.getElementsByClassName(
-            'i-amphtml-accordion-content'
-          );
-          for (let i = 0; i < contentElements.length; i++) {
-            expect(contentElements[i].id.startsWith('_AMP_content_')).to.be
-              .false;
-          }
-        });
-      });
+    it('multiple accordions should not have the same IDs on content', async () => {
+      await getAmpAccordion();
+      const contentElements = doc.getElementsByClassName(
+        'i-amphtml-accordion-content'
+      );
+      for (let i = 0; i < contentElements.length; i++) {
+        expect(contentElements[i].id.startsWith('_AMP_content_')).to.be.false;
+      }
     });
 
-    it('should collapse when high trust toggle action is triggered on a expanded section', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const impl = ampAccordion.implementation_;
-        const headerElements = doc.querySelectorAll('section > *:first-child');
-        expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
-          .true;
-        expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
-          'true'
-        );
+    it('should collapse when high trust toggle action is triggered on a expanded section', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[1].getAttribute('aria-expanded')).to.equal('true');
 
-        impl.toggle_(headerElements[1].parentNode, ActionTrust.HIGH);
+      impl.toggle_(headerElements[1].parentNode, ActionTrust.HIGH);
 
-        expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
-          .false;
-        expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
-          'false'
-        );
-      });
+      expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be.false;
+      expect(headerElements[1].getAttribute('aria-expanded')).to.equal('false');
     });
 
-    it('should expand when expand action is triggered on a collapsed section', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const impl = ampAccordion.implementation_;
-        const headerElements = doc.querySelectorAll('section > *:first-child');
-        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-          .false;
-        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-          'false'
-        );
-        impl.toggle_(headerElements[0].parentNode, ActionTrust.HIGH, true);
-        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-          .true;
-        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-          'true'
-        );
-      });
+    it('should expand when expand action is triggered on a collapsed section', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be.false;
+      expect(headerElements[0].getAttribute('aria-expanded')).to.equal('false');
+      impl.toggle_(headerElements[0].parentNode, ActionTrust.HIGH, true);
+      expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[0].getAttribute('aria-expanded')).to.equal('true');
     });
 
     it(
       'should collapse other sections when expand action is triggered on a ' +
         'collapsed section if expand-single-section attribute is set',
-      () => {
-        return getAmpAccordion().then((ampAccordion) => {
-          ampAccordion.setAttribute('expand-single-section', '');
-          expect(ampAccordion.hasAttribute('expand-single-section')).to.be.true;
-          const impl = ampAccordion.implementation_;
-          const headerElements = doc.querySelectorAll(
-            'section > *:first-child'
-          );
-          // second section is expanded by default
-          expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
-            .true;
-          expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
-            'true'
-          );
-          // expand the first section
-          impl.toggle_(headerElements[0].parentNode, ActionTrust.HIGH, true);
-          // we expect the first section to be expanded
-          expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-            .true;
-          expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-            'true'
-          );
-          // we expect the second section to be collapsed
-          expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
-            .false;
-          expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
-            'false'
-          );
-        });
-      }
-    );
-
-    it('should expand when low trust toggle action is triggered on a collapsed section', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const impl = ampAccordion.implementation_;
+      async () => {
+        const ampAccordion = await getAmpAccordion();
+        const impl = await ampAccordion.getImpl();
+        ampAccordion.setAttribute('expand-single-section', '');
+        expect(ampAccordion.hasAttribute('expand-single-section')).to.be.true;
         const headerElements = doc.querySelectorAll('section > *:first-child');
-        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-          .false;
-        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-          'false'
-        );
-        impl.toggle_(headerElements[0].parentNode, ActionTrust.LOW);
-        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
+        // second section is expanded by default
+        expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
           .true;
-        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
+        expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
           'true'
         );
-      });
-    });
-
-    it('should collapse when low trust toggle action is triggered on an expanded section', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const impl = ampAccordion.implementation_;
-        const headerElements = doc.querySelectorAll('section > *:first-child');
-        expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
+        // expand the first section
+        impl.toggle_(headerElements[0].parentNode, ActionTrust.HIGH, true);
+        // we expect the first section to be expanded
+        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
           .true;
-        expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
+        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
           'true'
         );
-
-        impl.toggle_(headerElements[1].parentNode, ActionTrust.LOW);
-
+        // we expect the second section to be collapsed
         expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
           .false;
         expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
           'false'
         );
-      });
+      }
+    );
+
+    it('should expand when low trust toggle action is triggered on a collapsed section', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be.false;
+      expect(headerElements[0].getAttribute('aria-expanded')).to.equal('false');
+      impl.toggle_(headerElements[0].parentNode, ActionTrust.LOW);
+      expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[0].getAttribute('aria-expanded')).to.equal('true');
     });
 
-    it('should expand when rendersubtreeactivation event is triggered on a collapsed section', () => {
-      toggleExperiment(win, 'amp-accordion-display-locking', true);
-      return getAmpAccordion().then(() => {
-        const section = doc.querySelector('section:not([expanded])');
-        const header = section.firstElementChild;
-        const content = section.children[1];
-        expect(section.hasAttribute('expanded')).to.be.false;
-        expect(header.getAttribute('aria-expanded')).to.equal('false');
-        content.dispatchEvent(new Event('rendersubtreeactivation'));
-        expect(section.hasAttribute('expanded')).to.be.true;
-        expect(header.getAttribute('aria-expanded')).to.equal('true');
-        toggleExperiment(win, 'amp-accordion-display-locking', false);
-      });
+    it('should collapse when low trust toggle action is triggered on an expanded section', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[1].getAttribute('aria-expanded')).to.equal('true');
+
+      impl.toggle_(headerElements[1].parentNode, ActionTrust.LOW);
+
+      expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be.false;
+      expect(headerElements[1].getAttribute('aria-expanded')).to.equal('false');
     });
 
     it(
       "should trigger a section's expand event the section is expanded " +
         'without animation',
-      () => {
-        let impl;
-        return getAmpAccordion(true)
-          .then((ampAccordion) => {
-            impl = ampAccordion.implementation_;
-            impl.sections_[0].setAttribute(
-              'on',
-              `expand:acc${counter}.expand(section='acc${counter}sec${2}')`
-            );
-            expect(impl.sections_[2].hasAttribute('expanded')).to.be.false;
-            impl.toggle_(impl.sections_[0], ActionTrust.HIGH, true);
-            return poll('wait for first section to expand', () =>
-              impl.sections_[0].hasAttribute('expanded')
-            );
-          })
-          .then(() => {
-            expect(impl.sections_[2].hasAttribute('expanded')).to.be.true;
-          });
+      async () => {
+        const ampAccordion = await getAmpAccordion(true);
+        const impl = await ampAccordion.getImpl();
+
+        impl.sections_[0].setAttribute(
+          'on',
+          `expand:acc${counter}.expand(section='acc${counter}sec${2}')`
+        );
+        expect(impl.sections_[2].hasAttribute('expanded')).to.be.false;
+        impl.toggle_(impl.sections_[0], ActionTrust.HIGH, true);
+
+        await poll('wait for first section to expand', () =>
+          impl.sections_[0].hasAttribute('expanded')
+        );
+        expect(impl.sections_[2].hasAttribute('expanded')).to.be.true;
       }
     );
 
     it(
       "should trigger a section's collapse event the section is expanded " +
         'without animation',
-      () => {
-        let impl;
-        return getAmpAccordion(true)
-          .then((ampAccordion) => {
-            impl = ampAccordion.implementation_;
-            impl.sections_[1].setAttribute(
-              'on',
-              `collapse:acc${counter}.expand(section='acc${counter}sec${2}')`
-            );
-            expect(impl.sections_[2].hasAttribute('expanded')).to.be.false;
-            impl.toggle_(impl.sections_[1], ActionTrust.HIGH, false);
-            return poll(
-              'wait for first section to expand',
-              () => !impl.sections_[1].hasAttribute('expanded')
-            );
-          })
-          .then(() => {
-            expect(impl.sections_[2].hasAttribute('expanded')).to.be.true;
-          });
+      async () => {
+        const ampAccordion = await getAmpAccordion(true);
+        const impl = await ampAccordion.getImpl();
+
+        impl.sections_[1].setAttribute(
+          'on',
+          `collapse:acc${counter}.expand(section='acc${counter}sec${2}')`
+        );
+        expect(impl.sections_[2].hasAttribute('expanded')).to.be.false;
+        impl.toggle_(impl.sections_[1], ActionTrust.HIGH, false);
+
+        await poll(
+          'wait for first section to expand',
+          () => !impl.sections_[1].hasAttribute('expanded')
+        );
+        expect(impl.sections_[2].hasAttribute('expanded')).to.be.true;
       }
     );
 
     it(
       "should trigger a section's expand event the section is expanded " +
         'with animation',
-      () => {
-        let impl;
-        return getAmpAccordion(true)
-          .then((ampAccordion) => {
-            ampAccordion.setAttribute('animate', '');
-            impl = ampAccordion.implementation_;
-            impl.sections_[0].setAttribute(
-              'on',
-              `expand:acc${counter}.expand(section='acc${counter}sec${2}')`
-            );
-            expect(impl.sections_[2].hasAttribute('expanded')).to.be.false;
-            impl.toggle_(impl.sections_[0], ActionTrust.HIGH, true);
-            return poll('wait for first section to expand', () =>
-              impl.sections_[0].hasAttribute('expanded')
-            );
-          })
-          .then(() => {
-            return poll('wait for second section to expand', () =>
-              impl.sections_[2].hasAttribute('expanded')
-            );
-          });
+      async () => {
+        const ampAccordion = await getAmpAccordion(true);
+        const impl = await ampAccordion.getImpl();
+
+        ampAccordion.setAttribute('animate', '');
+        impl.sections_[0].setAttribute(
+          'on',
+          `expand:acc${counter}.expand(section='acc${counter}sec${2}')`
+        );
+        expect(impl.sections_[2].hasAttribute('expanded')).to.be.false;
+        impl.toggle_(impl.sections_[0], ActionTrust.HIGH, true);
+
+        await poll('wait for first section to expand', () =>
+          impl.sections_[0].hasAttribute('expanded')
+        );
+        await poll('wait for second section to expand', () =>
+          impl.sections_[2].hasAttribute('expanded')
+        );
       }
     );
 
     it(
       "should trigger a section's collapse event the section is expanded " +
         'with animation',
-      () => {
-        let impl;
-        return getAmpAccordion(true)
-          .then((ampAccordion) => {
-            ampAccordion.setAttribute('animate', '');
-            impl = ampAccordion.implementation_;
-            impl.sections_[1].setAttribute(
-              'on',
-              `collapse:acc${counter}.expand(section='acc${counter}sec${2}')`
-            );
-            expect(impl.sections_[2].hasAttribute('expanded')).to.be.false;
-            impl.toggle_(impl.sections_[1], ActionTrust.HIGH, false);
-            return poll(
-              'wait for first section to expand',
-              () => !impl.sections_[1].hasAttribute('expanded')
-            );
-          })
-          .then(() => {
-            return poll('wait for second section to expand', () =>
-              impl.sections_[2].hasAttribute('expanded')
-            );
-          });
+      async () => {
+        const ampAccordion = await getAmpAccordion(true);
+        const impl = await ampAccordion.getImpl();
+
+        ampAccordion.setAttribute('animate', '');
+        impl.sections_[1].setAttribute(
+          'on',
+          `collapse:acc${counter}.expand(section='acc${counter}sec${2}')`
+        );
+        expect(impl.sections_[2].hasAttribute('expanded')).to.be.false;
+        impl.toggle_(impl.sections_[1], ActionTrust.HIGH, false);
+
+        await poll(
+          'wait for first section to expand',
+          () => !impl.sections_[1].hasAttribute('expanded')
+        );
+        await poll('wait for second section to expand', () =>
+          impl.sections_[2].hasAttribute('expanded')
+        );
       }
     );
 
@@ -363,7 +301,7 @@ describes.realWin(
     `,
       ];
       const ampAccordion = await getAmpAccordionWithContents(contents, true);
-      const impl = ampAccordion.implementation_;
+      const impl = await ampAccordion.getImpl();
       const firstSection = impl.sections_[0];
       const content = firstSection.querySelector('amp-layout');
 
@@ -391,7 +329,7 @@ describes.realWin(
     `,
       ];
       const ampAccordion = await getAmpAccordionWithContents(contents, true);
-      const impl = ampAccordion.implementation_;
+      const impl = await ampAccordion.getImpl();
       const firstSection = impl.sections_[0];
       const content = firstSection.querySelector('amp-layout');
 
@@ -411,64 +349,117 @@ describes.realWin(
       });
     });
 
-    it('should stay expanded on the expand action when expanded', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const impl = ampAccordion.implementation_;
-        const headerElements = doc.querySelectorAll('section > *:first-child');
-        expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
-          .true;
-        expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
-          'true'
-        );
-        impl.toggle_(headerElements[1].parentNode, ActionTrust.HIGH, true);
-        expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
-          .true;
-        expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
-          'true'
-        );
-      });
+    it('should stay expanded on the expand action when expanded', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[1].getAttribute('aria-expanded')).to.equal('true');
+      impl.toggle_(headerElements[1].parentNode, ActionTrust.HIGH, true);
+      expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[1].getAttribute('aria-expanded')).to.equal('true');
     });
 
-    it('should collapse on the collapse action when expanded', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const impl = ampAccordion.implementation_;
-        const headerElements = doc.querySelectorAll('section > *:first-child');
-        expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
-          .true;
-        expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
-          'true'
-        );
-        impl.toggle_(headerElements[1].parentNode, ActionTrust.HIGH, false);
-        expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
-          .false;
-        expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
-          'false'
-        );
-      });
+    it('should collapse on the collapse action when expanded', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[1].getAttribute('aria-expanded')).to.equal('true');
+      impl.toggle_(headerElements[1].parentNode, ActionTrust.HIGH, false);
+      expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be.false;
+      expect(headerElements[1].getAttribute('aria-expanded')).to.equal('false');
     });
 
-    it('should stay collapsed on the collapse action when collapsed', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const impl = ampAccordion.implementation_;
-        const headerElements = doc.querySelectorAll('section > *:first-child');
-        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-          .false;
-        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-          'false'
-        );
-        impl.toggle_(headerElements[0].parentNode, ActionTrust.HIGH, false);
-        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-          .false;
-        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-          'false'
-        );
-      });
+    it('should stay collapsed on the collapse action when collapsed', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be.false;
+      expect(headerElements[0].getAttribute('aria-expanded')).to.equal('false');
+      impl.toggle_(headerElements[0].parentNode, ActionTrust.HIGH, false);
+      expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be.false;
+      expect(headerElements[0].getAttribute('aria-expanded')).to.equal('false');
+    });
+
+    it('should expand when header of a collapsed section is clicked', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      const clickEvent = {
+        target: headerElements[0],
+        currentTarget: headerElements[0],
+        preventDefault: env.sandbox.spy(),
+      };
+      expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be.false;
+      expect(headerElements[0].getAttribute('aria-expanded')).to.equal('false');
+      impl.onHeaderPicked_(clickEvent);
+      expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[0].getAttribute('aria-expanded')).to.equal('true');
+      expect(clickEvent.preventDefault.called).to.be.true;
+    });
+
+    it("should expand section when header's child is clicked", async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      const header = headerElements[0];
+      const child = doc.createElement('div');
+      header.appendChild(child);
+      const clickEvent = {
+        target: child,
+        currentTarget: header,
+        preventDefault: env.sandbox.spy(),
+      };
+      expect(header.parentNode.hasAttribute('expanded')).to.be.false;
+      expect(header.getAttribute('aria-expanded')).to.equal('false');
+      impl.onHeaderPicked_(clickEvent);
+      expect(header.parentNode.hasAttribute('expanded')).to.be.true;
+      expect(header.getAttribute('aria-expanded')).to.equal('true');
+      expect(clickEvent.preventDefault).to.have.been.called;
     });
 
-    it('should expand when header of a collapsed section is clicked', () => {
-      return getAmpAccordion().then((ampAccordion) => {
+    it('should collapse when header of an expanded section is clicked', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      const clickEvent = {
+        target: headerElements[1],
+        currentTarget: headerElements[1],
+        preventDefault: env.sandbox.spy(),
+      };
+      expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[1].getAttribute('aria-expanded')).to.equal('true');
+      impl.onHeaderPicked_(clickEvent);
+      expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be.false;
+      expect(headerElements[1].getAttribute('aria-expanded')).to.equal('false');
+      expect(clickEvent.preventDefault).to.have.been.called;
+    });
+
+    it('should allow for clickable links in header', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      const a = doc.createElement('a');
+      headerElements[0].appendChild(a);
+      const aClickEvent = {
+        target: a,
+        currentTarget: headerElements[0],
+        preventDefault: env.sandbox.spy(),
+      };
+      impl.clickHandler_(aClickEvent);
+      expect(aClickEvent.preventDefault).to.not.have.been.called;
+    });
+
+    it(
+      'should expand when header of a collapsed section is ' +
+        'activated via keyboard',
+      async () => {
+        const ampAccordion = await getAmpAccordion();
+        const impl = await ampAccordion.getImpl();
         const headerElements = doc.querySelectorAll('section > *:first-child');
-        const clickEvent = {
+        const keyDownEvent = {
+          key: Keys.SPACE,
           target: headerElements[0],
           currentTarget: headerElements[0],
           preventDefault: env.sandbox.spy(),
@@ -478,40 +469,55 @@ describes.realWin(
         expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
           'false'
         );
-        ampAccordion.implementation_.onHeaderPicked_(clickEvent);
+        impl.keyDownHandler_(keyDownEvent);
         expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
           .true;
         expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
           'true'
         );
-        expect(clickEvent.preventDefault.called).to.be.true;
-      });
-    });
+        expect(keyDownEvent.preventDefault.called).to.be.true;
+      }
+    );
 
-    it("should expand section when header's child is clicked", () => {
-      return getAmpAccordion().then((ampAccordion) => {
+    it(
+      "should NOT expand section when header's child is " +
+        'activated via keyboard',
+      async () => {
+        const ampAccordion = await getAmpAccordion();
+        const impl = await ampAccordion.getImpl();
         const headerElements = doc.querySelectorAll('section > *:first-child');
-        const header = headerElements[0];
         const child = doc.createElement('div');
-        header.appendChild(child);
-        const clickEvent = {
+        headerElements[0].appendChild(child);
+        const keyDownEvent = {
+          key: Keys.ENTER,
           target: child,
-          currentTarget: header,
+          currentTarget: headerElements[0],
           preventDefault: env.sandbox.spy(),
         };
-        expect(header.parentNode.hasAttribute('expanded')).to.be.false;
-        expect(header.getAttribute('aria-expanded')).to.equal('false');
-        ampAccordion.implementation_.onHeaderPicked_(clickEvent);
-        expect(header.parentNode.hasAttribute('expanded')).to.be.true;
-        expect(header.getAttribute('aria-expanded')).to.equal('true');
-        expect(clickEvent.preventDefault).to.have.been.called;
-      });
-    });
+        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
+          .false;
+        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
+          'false'
+        );
+        impl.keyDownHandler_(keyDownEvent);
+        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
+          .false;
+        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
+          'false'
+        );
+        expect(keyDownEvent.preventDefault.called).to.be.false;
+      }
+    );
 
-    it('should collapse when header of an expanded section is clicked', () => {
-      return getAmpAccordion().then((ampAccordion) => {
+    it(
+      'should collapse when header of an expanded section is ' +
+        'activated via keyboard',
+      async () => {
+        const ampAccordion = await getAmpAccordion();
+        const impl = await ampAccordion.getImpl();
         const headerElements = doc.querySelectorAll('section > *:first-child');
-        const clickEvent = {
+        const keyDownEvent = {
+          key: Keys.ENTER,
           target: headerElements[1],
           currentTarget: headerElements[1],
           preventDefault: env.sandbox.spy(),
@@ -521,336 +527,405 @@ describes.realWin(
         expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
           'true'
         );
-        ampAccordion.implementation_.onHeaderPicked_(clickEvent);
+        impl.keyDownHandler_(keyDownEvent);
         expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
           .false;
         expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
           'false'
         );
-        expect(clickEvent.preventDefault).to.have.been.called;
-      });
-    });
-
-    it('should allow for clickable links in header', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const headerElements = doc.querySelectorAll('section > *:first-child');
-        const a = doc.createElement('a');
-        headerElements[0].appendChild(a);
-        const aClickEvent = {
-          target: a,
-          currentTarget: headerElements[0],
-          preventDefault: env.sandbox.spy(),
-        };
-        ampAccordion.implementation_.clickHandler_(aClickEvent);
-        expect(aClickEvent.preventDefault).to.not.have.been.called;
-      });
-    });
-
-    it(
-      'should expand when header of a collapsed section is ' +
-        'activated via keyboard',
-      () => {
-        return getAmpAccordion().then((ampAccordion) => {
-          const headerElements = doc.querySelectorAll(
-            'section > *:first-child'
-          );
-          const keyDownEvent = {
-            key: Keys.SPACE,
-            target: headerElements[0],
-            currentTarget: headerElements[0],
-            preventDefault: env.sandbox.spy(),
-          };
-          expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-            .false;
-          expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-            'false'
-          );
-          ampAccordion.implementation_.keyDownHandler_(keyDownEvent);
-          expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-            .true;
-          expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-            'true'
-          );
-          expect(keyDownEvent.preventDefault.called).to.be.true;
-        });
-      }
-    );
-
-    it(
-      "should NOT expand section when header's child is " +
-        'activated via keyboard',
-      () => {
-        return getAmpAccordion().then((ampAccordion) => {
-          const headerElements = doc.querySelectorAll(
-            'section > *:first-child'
-          );
-          const child = doc.createElement('div');
-          headerElements[0].appendChild(child);
-          const keyDownEvent = {
-            key: Keys.ENTER,
-            target: child,
-            currentTarget: headerElements[0],
-            preventDefault: env.sandbox.spy(),
-          };
-          expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-            .false;
-          expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-            'false'
-          );
-          ampAccordion.implementation_.keyDownHandler_(keyDownEvent);
-          expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-            .false;
-          expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-            'false'
-          );
-          expect(keyDownEvent.preventDefault.called).to.be.false;
-        });
-      }
-    );
-
-    it(
-      'should collapse when header of an expanded section is ' +
-        'activated via keyboard',
-      () => {
-        return getAmpAccordion().then((ampAccordion) => {
-          const headerElements = doc.querySelectorAll(
-            'section > *:first-child'
-          );
-          const keyDownEvent = {
-            key: Keys.ENTER,
-            target: headerElements[1],
-            currentTarget: headerElements[1],
-            preventDefault: env.sandbox.spy(),
-          };
-          expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
-            .true;
-          expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
-            'true'
-          );
-          ampAccordion.implementation_.keyDownHandler_(keyDownEvent);
-          expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
-            .false;
-          expect(headerElements[1].getAttribute('aria-expanded')).to.equal(
-            'false'
-          );
-          expect(keyDownEvent.preventDefault.called).to.be.true;
-        });
+        expect(keyDownEvent.preventDefault.called).to.be.true;
       }
     );
 
     it(
       'should be navigable by up and down arrow keys when ' +
         'any header has focus',
-      () => {
-        return getAmpAccordion().then((ampAccordion) => {
-          const headerElements = doc.querySelectorAll(
-            'section > *:first-child'
-          );
-          // Focus the first header,
-          tryFocus(headerElements[0]);
-          expect(doc.activeElement).to.equal(headerElements[0]);
-          const upArrowEvent = {
-            key: Keys.UP_ARROW,
-            target: headerElements[0],
-            currentTarget: headerElements[0],
-            preventDefault: env.sandbox.spy(),
-          };
-          ampAccordion.implementation_.keyDownHandler_(upArrowEvent);
-          expect(doc.activeElement).to.equal(
-            headerElements[headerElements.length - 1]
-          );
-          const downArrowEvent = {
-            key: Keys.DOWN_ARROW,
-            target: headerElements[headerElements.length - 1],
-            currentTarget: headerElements[headerElements.length - 1],
-            preventDefault: env.sandbox.spy(),
-          };
-          ampAccordion.implementation_.keyDownHandler_(downArrowEvent);
-          expect(doc.activeElement).to.equal(headerElements[0]);
-        });
-      }
-    );
-
-    it('should return correct sessionStorageKey', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const impl = ampAccordion.implementation_;
-        const url = win.location.href;
-        impl.element.id = '321';
-        const id = impl.getSessionStorageKey_();
-        const correctId = 'amp-321-' + url;
-        expect(id).to.be.equal(correctId);
-      });
-    });
-
-    it('should set sessionStorage on change in expansion', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const impl = ampAccordion.implementation_;
+      async () => {
+        const ampAccordion = await getAmpAccordion();
+        const impl = await ampAccordion.getImpl();
         const headerElements = doc.querySelectorAll('section > *:first-child');
-        const clickEventExpandElement = {
+        // Focus the first header,
+        tryFocus(headerElements[0]);
+        expect(doc.activeElement).to.equal(headerElements[0]);
+        const upArrowEvent = {
+          key: Keys.UP_ARROW,
           target: headerElements[0],
           currentTarget: headerElements[0],
           preventDefault: env.sandbox.spy(),
         };
-        const clickEventCollapseElement = {
-          target: headerElements[1],
-          currentTarget: headerElements[1],
+        impl.keyDownHandler_(upArrowEvent);
+        expect(doc.activeElement).to.equal(
+          headerElements[headerElements.length - 1]
+        );
+        const downArrowEvent = {
+          key: Keys.DOWN_ARROW,
+          target: headerElements[headerElements.length - 1],
+          currentTarget: headerElements[headerElements.length - 1],
           preventDefault: env.sandbox.spy(),
         };
-        expect(Object.keys(impl.currentState_)).to.have.length(0);
-        impl.onHeaderPicked_(clickEventExpandElement);
-        expect(Object.keys(impl.currentState_)).to.have.length(1);
-        expect(impl.currentState_['test0']).to.be.true;
-        impl.onHeaderPicked_(clickEventCollapseElement);
-        expect(Object.keys(impl.currentState_)).to.have.length(2);
-        expect(impl.currentState_['test0']).to.be.true;
-        expect(impl.currentState_['test1']).to.be.false;
-      });
+        impl.keyDownHandler_(downArrowEvent);
+        expect(doc.activeElement).to.equal(headerElements[0]);
+      }
+    );
+
+    it('should return correct sessionStorageKey', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const url = win.location.href;
+      impl.element.id = '321';
+      const id = impl.getSessionStorageKey_();
+      const correctId = 'amp-321-' + url;
+      expect(id).to.be.equal(correctId);
     });
 
-    it('should respect session states and expand/collapse', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const impl = ampAccordion.implementation_;
-        let headerElements = doc.querySelectorAll('section > *:first-child');
-        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-          .false;
-        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-          'false'
-        );
-        expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
-          .true;
-        expect(headerElements[2].parentNode.hasAttribute('expanded')).to.be
-          .false;
-        impl.getSessionState_ = function () {
-          return {
-            'test0': true,
-          };
-        };
-        impl.buildCallback();
-        headerElements = doc.querySelectorAll('section > *:first-child');
-        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-          .true;
-        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-          'true'
-        );
-        expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
-          .true;
-        expect(headerElements[2].parentNode.hasAttribute('expanded')).to.be
-          .false;
-        impl.getSessionState_ = function () {
-          return {
-            'test0': true,
-            'test1': false,
-          };
-        };
-        impl.buildCallback();
-        headerElements = doc.querySelectorAll('section > *:first-child');
-        expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be
-          .true;
-        expect(headerElements[0].getAttribute('aria-expanded')).to.equal(
-          'true'
-        );
-        expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be
-          .false;
-        expect(headerElements[2].parentNode.hasAttribute('expanded')).to.be
-          .false;
-      });
+    it('should set sessionStorage on change in expansion', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      const clickEventExpandElement = {
+        target: headerElements[0],
+        currentTarget: headerElements[0],
+        preventDefault: env.sandbox.spy(),
+      };
+      const clickEventCollapseElement = {
+        target: headerElements[1],
+        currentTarget: headerElements[1],
+        preventDefault: env.sandbox.spy(),
+      };
+      expect(Object.keys(impl.currentState_)).to.have.length(0);
+      impl.onHeaderPicked_(clickEventExpandElement);
+      expect(Object.keys(impl.currentState_)).to.have.length(1);
+      expect(impl.currentState_['test0']).to.be.true;
+      impl.onHeaderPicked_(clickEventCollapseElement);
+      expect(Object.keys(impl.currentState_)).to.have.length(2);
+      expect(impl.currentState_['test0']).to.be.true;
+      expect(impl.currentState_['test1']).to.be.false;
     });
 
-    it('should disable sessionStorage when opt-out', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const impl = ampAccordion.implementation_;
-        const setSessionStateSpy = env.sandbox.spy();
-        const getSessionStateSpy = env.sandbox.spy();
-        impl.win.sessionStorage.setItem = function () {
-          setSessionStateSpy();
+    it('should respect session states and expand/collapse', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      let headerElements = doc.querySelectorAll('section > *:first-child');
+      expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be.false;
+      expect(headerElements[0].getAttribute('aria-expanded')).to.equal('false');
+      expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[2].parentNode.hasAttribute('expanded')).to.be.false;
+      impl.getSessionState_ = function () {
+        return {
+          'test0': true,
         };
-        impl.win.sessionStorage.getItem = function () {
-          getSessionStateSpy();
+      };
+      impl.buildCallback();
+      headerElements = doc.querySelectorAll('section > *:first-child');
+      expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[0].getAttribute('aria-expanded')).to.equal('true');
+      expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[2].parentNode.hasAttribute('expanded')).to.be.false;
+      impl.getSessionState_ = function () {
+        return {
+          'test0': true,
+          'test1': false,
         };
+      };
+      impl.buildCallback();
+      headerElements = doc.querySelectorAll('section > *:first-child');
+      expect(headerElements[0].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements[0].getAttribute('aria-expanded')).to.equal('true');
+      expect(headerElements[1].parentNode.hasAttribute('expanded')).to.be.false;
+      expect(headerElements[2].parentNode.hasAttribute('expanded')).to.be.false;
+    });
 
-        ampAccordion.setAttribute('disable-session-states', null);
-        impl.buildCallback();
-        expect(Object.keys(impl.currentState_)).to.have.length(0);
-        const headerElements = doc.querySelectorAll('section > *:first-child');
-        const clickEventExpandElement = {
-          target: headerElements[0],
-          currentTarget: headerElements[0],
-          preventDefault: env.sandbox.spy(),
-        };
-        impl.onHeaderPicked_(clickEventExpandElement);
-        expect(getSessionStateSpy).to.not.have.been.called;
-        expect(setSessionStateSpy).to.not.have.been.called;
-        expect(Object.keys(impl.currentState_)).to.have.length(1);
-      });
+    it('should disable sessionStorage when opt-out', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const setSessionStateSpy = env.sandbox.spy();
+      const getSessionStateSpy = env.sandbox.spy();
+      impl.win.sessionStorage.setItem = function () {
+        setSessionStateSpy();
+      };
+      impl.win.sessionStorage.getItem = function () {
+        getSessionStateSpy();
+      };
+
+      ampAccordion.setAttribute('disable-session-states', null);
+      impl.buildCallback();
+      expect(Object.keys(impl.currentState_)).to.have.length(0);
+      const headerElements = doc.querySelectorAll('section > *:first-child');
+      const clickEventExpandElement = {
+        target: headerElements[0],
+        currentTarget: headerElements[0],
+        preventDefault: env.sandbox.spy(),
+      };
+      impl.onHeaderPicked_(clickEventExpandElement);
+      expect(getSessionStateSpy).to.not.have.been.called;
+      expect(setSessionStateSpy).to.not.have.been.called;
+      expect(Object.keys(impl.currentState_)).to.have.length(1);
     });
 
-    it('two accordions should not affect each other', () => {
-      return getAmpAccordion().then((ampAccordion) => {
-        const ampAccordion1 = ampAccordion;
-        const ampAccordion2 = doc.createElement('amp-accordion');
-        for (let i = 0; i < 3; i++) {
-          const section = doc.createElement('section');
-          section.innerHTML =
-            '<h2>Section ' +
-            i +
-            "<span>nested stuff<span></h2><div id='test" +
-            i +
-            "'>Loreum ipsum</div>";
-          ampAccordion2.appendChild(section);
-        }
-        doc.body.appendChild(ampAccordion2);
-        return ampAccordion2
-          .build()
-          .then(() => {
-            ampAccordion.implementation_.mutateElement = (fn) => fn();
-            return ampAccordion.layoutCallback();
-          })
-          .then(() => {
-            const headerElements1 = ampAccordion1.querySelectorAll(
-              'section > *:first-child'
-            );
-            const clickEventElement = {
-              target: headerElements1[0],
-              currentTarget: headerElements1[0],
-              preventDefault: env.sandbox.spy(),
-            };
-            ampAccordion1.implementation_.onHeaderPicked_(clickEventElement);
-            const headerElements2 = ampAccordion2.querySelectorAll(
-              'section > *:first-child'
-            );
-            expect(headerElements1[0].parentNode.hasAttribute('expanded')).to.be
-              .true;
-            expect(headerElements2[0].parentNode.hasAttribute('expanded')).to.be
-              .false;
-          });
-      });
+    it('two accordions should not affect each other', async () => {
+      const ampAccordion = await getAmpAccordion();
+      const impl = await ampAccordion.getImpl();
+      const ampAccordion1 = ampAccordion;
+      const ampAccordion2 = doc.createElement('amp-accordion');
+      for (let i = 0; i < 3; i++) {
+        const section = doc.createElement('section');
+        section.innerHTML =
+          '<h2>Section ' +
+          i +
+          "<span>nested stuff<span></h2><div id='test" +
+          i +
+          "'>Loreum ipsum</div>";
+        ampAccordion2.appendChild(section);
+      }
+      doc.body.appendChild(ampAccordion2);
+      await ampAccordion2.buildInternal();
+
+      impl.mutateElement = (fn) => fn();
+      await ampAccordion.layoutCallback();
+
+      const headerElements1 = ampAccordion1.querySelectorAll(
+        'section > *:first-child'
+      );
+      const clickEventElement = {
+        target: headerElements1[0],
+        currentTarget: headerElements1[0],
+        preventDefault: env.sandbox.spy(),
+      };
+      impl.onHeaderPicked_(clickEventElement);
+      const headerElements2 = ampAccordion2.querySelectorAll(
+        'section > *:first-child'
+      );
+      expect(headerElements1[0].parentNode.hasAttribute('expanded')).to.be.true;
+      expect(headerElements2[0].parentNode.hasAttribute('expanded')).to.be
+        .false;
     });
 
-    it('should trigger expand/collapse events', () => {
-      return getAmpAccordion(true).then((ampAccordion) => {
-        const impl = ampAccordion.implementation_;
+    it('should trigger expand/collapse events', async () => {
+      const ampAccordion = await getAmpAccordion(true);
+      const impl = await ampAccordion.getImpl();
+
+      const actions = impl.getActionServiceForTesting();
+      env.sandbox.stub(actions, 'trigger');
 
-        const actions = impl.getActionServiceForTesting();
-        env.sandbox.stub(actions, 'trigger');
+      execute(impl, 'collapse', 123, `acc${counter}sec1`);
 
-        execute(impl, 'collapse', 123, `acc${counter}sec1`);
+      expect(actions.trigger).to.be.calledOnce;
+      expect(actions.trigger.getCall(0)).to.be.calledWith(
+        /* element */ env.sandbox.match.has('tagName'),
+        'collapse',
+        /* event */ env.sandbox.match.has('detail'),
+        /* trust */ 123
+      );
 
-        expect(actions.trigger).to.be.calledOnce;
-        expect(actions.trigger.getCall(0)).to.be.calledWith(
-          /* element */ env.sandbox.match.has('tagName'),
-          'collapse',
-          /* event */ env.sandbox.match.has('detail'),
-          /* trust */ 123
+      execute(impl, 'expand', 456, `acc${counter}sec1`);
+
+      expect(actions.trigger).to.be.calledTwice;
+      expect(actions.trigger.getCall(1)).to.be.calledWith(
+        /* element */ env.sandbox.match.has('tagName'),
+        'expand',
+        /* event */ env.sandbox.match.has('detail'),
+        /* trust */ 456
+      );
+    });
+
+    it('should include a11y related attributes', async () => {
+      await getAmpAccordion();
+
+      const sectionElements = doc.querySelectorAll('section');
+      expect(sectionElements.length).to.equal(3);
+
+      const section0 = sectionElements[0];
+      const section1 = sectionElements[1];
+      const section2 = sectionElements[2];
+      const {firstElementChild: header0, lastElementChild: content0} = section0;
+      const {firstElementChild: header1, lastElementChild: content1} = section1;
+      const {firstElementChild: header2, lastElementChild: content2} = section2;
+
+      expect(header0).to.have.attribute('id');
+      expect(header0.getAttribute('aria-controls')).to.equal('test0');
+      expect(header0.getAttribute('tabindex')).to.equal('0');
+      expect(header0.getAttribute('role')).to.equal('button');
+      expect(content0).to.have.attribute('aria-labelledby');
+      expect(content0.getAttribute('id')).to.equal('test0');
+      expect(content0.getAttribute('role')).to.equal('region');
+      expect(header0.getAttribute('aria-controls')).to.equal(
+        content0.getAttribute('id')
+      );
+      expect(header0.getAttribute('id')).to.equal(
+        content0.getAttribute('aria-labelledby')
+      );
+
+      expect(header1).to.have.attribute('id');
+      expect(header1.getAttribute('aria-controls')).to.equal('test1');
+      expect(header1.getAttribute('tabindex')).to.equal('0');
+      expect(header1.getAttribute('role')).to.equal('button');
+      expect(content1).to.have.attribute('aria-labelledby');
+      expect(content1.getAttribute('id')).to.equal('test1');
+      expect(content1.getAttribute('role')).to.equal('region');
+      expect(header1.getAttribute('aria-controls')).to.equal(
+        content1.getAttribute('id')
+      );
+      expect(header1.getAttribute('id')).to.equal(
+        content1.getAttribute('aria-labelledby')
+      );
+
+      expect(header2).to.have.attribute('id');
+      expect(header2.getAttribute('aria-controls')).to.equal('test2');
+      expect(header2.getAttribute('tabindex')).to.equal('0');
+      expect(header2.getAttribute('role')).to.equal('button');
+      expect(content2).to.have.attribute('aria-labelledby');
+      expect(content2.getAttribute('id')).to.equal('test2');
+      expect(content2.getAttribute('role')).to.equal('region');
+      expect(header2.getAttribute('aria-controls')).to.equal(
+        content2.getAttribute('id')
+      );
+      expect(header2.getAttribute('id')).to.equal(
+        content2.getAttribute('aria-labelledby')
+      );
+    });
+
+    it('should respect pre-existing a11y related attributes', async () => {
+      const contents = [0, 1, 2].map((i) => {
+        return (
+          '<h2 role="header" tabindex="0">' +
+          `Section ${i}<span>nested stuff<span>` +
+          `</h2><div id='test${i}' role="comment">Lorem ipsum</div>`
         );
+      });
+      await getAmpAccordionWithContents(contents);
+
+      const sectionElements = doc.querySelectorAll('section');
+      expect(sectionElements.length).to.equal(3);
+
+      const section0 = sectionElements[0];
+      const section1 = sectionElements[1];
+      const section2 = sectionElements[2];
+      const {firstElementChild: header0, lastElementChild: content0} = section0;
+      const {firstElementChild: header1, lastElementChild: content1} = section1;
+      const {firstElementChild: header2, lastElementChild: content2} = section2;
+
+      expect(header0).to.have.attribute('id');
+      expect(header0.getAttribute('aria-controls')).to.equal('test0');
+      expect(header0.getAttribute('tabindex')).to.equal('0');
+      expect(header0.getAttribute('role')).to.equal('header');
+      expect(content0).to.have.attribute('aria-labelledby');
+      expect(content0.getAttribute('id')).to.equal('test0');
+      expect(content0.getAttribute('role')).to.equal('comment');
+      expect(header0.getAttribute('aria-controls')).to.equal(
+        content0.getAttribute('id')
+      );
+      expect(header0.getAttribute('id')).to.equal(
+        content0.getAttribute('aria-labelledby')
+      );
+
+      expect(header1).to.have.attribute('id');
+      expect(header1.getAttribute('aria-controls')).to.equal('test1');
+      expect(header1.getAttribute('tabindex')).to.equal('0');
+      expect(header1.getAttribute('role')).to.equal('header');
+      expect(content1).to.have.attribute('aria-labelledby');
+      expect(content1.getAttribute('id')).to.equal('test1');
+      expect(content1.getAttribute('role')).to.equal('comment');
+      expect(header1.getAttribute('aria-controls')).to.equal(
+        content1.getAttribute('id')
+      );
+      expect(header1.getAttribute('id')).to.equal(
+        content1.getAttribute('aria-labelledby')
+      );
+
+      expect(header2).to.have.attribute('id');
+      expect(header2.getAttribute('aria-controls')).to.equal('test2');
+      expect(header2.getAttribute('tabindex')).to.equal('0');
+      expect(header2.getAttribute('role')).to.equal('header');
+      expect(content2).to.have.attribute('aria-labelledby');
+      expect(content2.getAttribute('id')).to.equal('test2');
+      expect(content2.getAttribute('role')).to.equal('comment');
+      expect(header2.getAttribute('aria-controls')).to.equal(
+        content2.getAttribute('id')
+      );
+      expect(header2.getAttribute('id')).to.equal(
+        content2.getAttribute('aria-labelledby')
+      );
+    });
 
-        execute(impl, 'expand', 456, `acc${counter}sec1`);
+    it('should throw an error when amp-bind used with expanded attribute ', async () => {
+      const errors = [];
+      const consoleError = console.error;
+      console.error = (msg) => {
+        errors.push(msg);
+      };
+
+      const html = htmlFor(win.document);
+      const accordion = html`
+        <amp-accordion animate>
+          <section [expanded]="section1">
+            <h2>Section 1</h2>
+            <div>Puppies are cute.</div>
+          </section>
+        </amp-accordion>
+      `;
+      doc.body.appendChild(accordion);
+
+      await accordion.buildInternal().catch((err) => {
+        expect(err.message).to.include('The "expanded" attribute');
+      });
+
+      expect(errors.length).to.equal(1);
+      expect(errors[0]).to.include('The "expanded" attribute');
+      console.error = consoleError;
+    });
+  }
+);
 
-        expect(actions.trigger).to.be.calledTwice;
-        expect(actions.trigger.getCall(1)).to.be.calledWith(
-          /* element */ env.sandbox.match.has('tagName'),
-          'expand',
-          /* event */ env.sandbox.match.has('detail'),
-          /* trust */ 456
+describes.realWin(
+  'amp-accordion component with runtime on',
+  {
+    amp: {
+      extensions: ['amp-accordion:0.1'],
+      runtimeOn: true,
+    },
+  },
+  (env) => {
+    it('should allow default actions in email documents', async () => {
+      env.win.document.documentElement.setAttribute('amp4email', '');
+      const action = new ActionService(env.ampdoc, env.win.document);
+      env.sandbox.stub(Services, 'actionServiceForDoc').returns(action);
+
+      const element = createElementWithAttributes(
+        env.win.document,
+        'amp-accordion',
+        {'layout': 'container'}
+      );
+      const section = env.win.document.createElement('section');
+      section.appendChild(env.win.document.createElement('h1'));
+      section.appendChild(env.win.document.createElement('p'));
+      element.appendChild(section);
+      env.win.document.body.appendChild(element);
+      env.sandbox.spy(element, 'enqueAction');
+      env.sandbox.stub(element, 'getDefaultActionAlias');
+      await whenUpgradedToCustomElement(element);
+      await element.whenBuilt();
+
+      ['toggle', 'expand', 'collapse'].forEach((method) => {
+        action.execute(
+          element,
+          method,
+          null,
+          'source',
+          'caller',
+          'event',
+          ActionTrust.HIGH
+        );
+        expect(element.enqueAction).to.be.calledWith(
+          env.sandbox.match({
+            actionEventType: '?',
+            args: null,
+            caller: 'caller',
+            event: 'event',
+            method,
+            node: element,
+            source: 'source',
+            trust: ActionTrust.HIGH,
+          })
         );
       });
     });
diff --git a/extensions/amp-accordion/0.1/test/validator-amp-accordion.html b/extensions/amp-accordion/0.1/test/validator-amp-accordion.html
index d9b5b32e52890..e472848985c71 100644
--- a/extensions/amp-accordion/0.1/test/validator-amp-accordion.html
+++ b/extensions/amp-accordion/0.1/test/validator-amp-accordion.html
@@ -26,6 +26,7 @@
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
+  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
 </head>
 <body>
   <!-- a valid example -->
@@ -72,5 +73,53 @@ <h2>Section with bound [data-expand] attribute</h2>
       <div>a third child</div>
     </section>
   </amp-accordion>
+
+  <!-- accordion should allow access-hide in section -->
+  <!-- (part of amp-access) (see: #25807) -->
+  <amp-accordion expand-single-section disable-session-states>
+    <section amp-access="NOT nwPlus" access-hide>
+        <h2 class="accordion-header">
+          Web-Abo
+          <span class="show-more">&#9207;</span>
+          <span class="show-less">&#9206;</span>
+        </h2>
+        <div>***</div>
+    </section>
+    <!-- access-hide attribute should not have non-empty value -->
+    <section amp-access="NOT nwPlus" access-hide="test">
+        <h2 class="accordion-header">
+          Tagespass
+          <span class="show-more">&#9207;</span>
+          <span class="show-less">&#9206;</span>
+        </h2>
+        <div>***</div>
+    </section>
+    <!-- LOGIN-Form -->
+    <section amp-access="NOT loggedIn" amp-access-hide>
+        <h2 class="accordion-header">
+          Login
+          <span class="show-more">&#9207;</span>
+          <span class="show-less">&#9206;</span>
+        </h2>
+        <form
+          id="loginform-overlay"
+          class="text-center"
+          method="post"
+          action-xhr="test"
+          target="_top"
+          on="submit:loading-spinner.show;submit-success:loginform.hide,loading-spinner.hide,logoutform.show"
+        >
+          <input
+            id="my_user"
+            type="text"
+            name="my_user"
+            maxlength="50"
+            size="20"
+            placeholder="Benutzername o. E-Mail"
+            required
+          />
+        </form>
+    </section>
+  </amp-accordion>
 </body>
 </html>
diff --git a/extensions/amp-accordion/0.1/test/validator-amp-accordion.out b/extensions/amp-accordion/0.1/test/validator-amp-accordion.out
index 0b7a895bf6918..94002fed874be 100644
--- a/extensions/amp-accordion/0.1/test/validator-amp-accordion.out
+++ b/extensions/amp-accordion/0.1/test/validator-amp-accordion.out
@@ -27,6 +27,7 @@ FAIL
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
+|    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
 |  </head>
 |  <body>
 |    <!-- a valid example -->
@@ -66,20 +67,70 @@ FAIL
 |    <amp-accordion>
 |      <amp-accordion> <!-- can't nest amp-accordion -->
 >>     ^~~~~~~~~
-amp-accordion/0.1/test/validator-amp-accordion.html:66:4 Tag 'amp-accordion' is disallowed as child of tag 'amp-accordion'. Child tag must be one of ['section']. (see https://amp.dev/documentation/components/amp-accordion)
+amp-accordion/0.1/test/validator-amp-accordion.html:67:4 Tag 'amp-accordion' is disallowed as child of tag 'amp-accordion'. Child tag must be one of ['section']. (see https://amp.dev/documentation/components/amp-accordion/)
 |      </amp-accordion>
 |      <p>Some paragraph of text that doesn't belong here.</p>
 >>     ^~~~~~~~~
-amp-accordion/0.1/test/validator-amp-accordion.html:68:4 Tag 'p' is disallowed as child of tag 'amp-accordion'. Child tag must be one of ['section']. (see https://amp.dev/documentation/components/amp-accordion)
+amp-accordion/0.1/test/validator-amp-accordion.html:69:4 Tag 'p' is disallowed as child of tag 'amp-accordion'. Child tag must be one of ['section']. (see https://amp.dev/documentation/components/amp-accordion/)
 |      <section>
 >>     ^~~~~~~~~
-amp-accordion/0.1/test/validator-amp-accordion.html:69:4 Tag 'amp-accordion > section' must have 2 child tags - saw 3 child tags.
+amp-accordion/0.1/test/validator-amp-accordion.html:70:4 Tag 'amp-accordion > section' must have 2 child tags - saw 3 child tags.
 |        <div>header which isn't h1-h6.</div>
 >>       ^~~~~~~~~
-amp-accordion/0.1/test/validator-amp-accordion.html:70:6 Tag 'div' is disallowed as first child of tag 'amp-accordion > section'. First child tag must be one of ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header'].
+amp-accordion/0.1/test/validator-amp-accordion.html:71:6 Tag 'div' is disallowed as first child of tag 'amp-accordion > section'. First child tag must be one of ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header'].
 |        <div>a second child</div>
 |        <div>a third child</div>
 |      </section>
 |    </amp-accordion>
+|
+|    <!-- accordion should allow access-hide in section -->
+|    <!-- (part of amp-access) (see: #25807) -->
+|    <amp-accordion expand-single-section disable-session-states>
+|      <section amp-access="NOT nwPlus" access-hide>
+|          <h2 class="accordion-header">
+|            Web-Abo
+|            <span class="show-more">&#9207;</span>
+|            <span class="show-less">&#9206;</span>
+|          </h2>
+|          <div>***</div>
+|      </section>
+|      <!-- access-hide attribute should not have non-empty value -->
+|      <section amp-access="NOT nwPlus" access-hide="test">
+>>     ^~~~~~~~~
+amp-accordion/0.1/test/validator-amp-accordion.html:89:4 The attribute 'access-hide' in tag 'amp-accordion > section' is set to the invalid value 'test'.
+|          <h2 class="accordion-header">
+|            Tagespass
+|            <span class="show-more">&#9207;</span>
+|            <span class="show-less">&#9206;</span>
+|          </h2>
+|          <div>***</div>
+|      </section>
+|      <!-- LOGIN-Form -->
+|      <section amp-access="NOT loggedIn" amp-access-hide>
+|          <h2 class="accordion-header">
+|            Login
+|            <span class="show-more">&#9207;</span>
+|            <span class="show-less">&#9206;</span>
+|          </h2>
+|          <form
+|            id="loginform-overlay"
+|            class="text-center"
+|            method="post"
+|            action-xhr="test"
+|            target="_top"
+|            on="submit:loading-spinner.show;submit-success:loginform.hide,loading-spinner.hide,logoutform.show"
+|          >
+|            <input
+|              id="my_user"
+|              type="text"
+|              name="my_user"
+|              maxlength="50"
+|              size="20"
+|              placeholder="Benutzername o. E-Mail"
+|              required
+|            />
+|          </form>
+|      </section>
+|    </amp-accordion>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-accordion/1.0/amp-accordion.css b/extensions/amp-accordion/1.0/amp-accordion.css
new file mode 100644
index 0000000000000..1c82ba1dce8cf
--- /dev/null
+++ b/extensions/amp-accordion/1.0/amp-accordion.css
@@ -0,0 +1,75 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/*
+ * Pre-upgrade:
+ * - display:block element
+ * - contain:layout element
+ */
+amp-accordion {
+  display: block;
+  contain: layout;
+}
+
+amp-accordion,
+amp-accordion > section,
+amp-accordion > section > :first-child {
+  margin: 0;
+}
+
+/* Display the first 2 elements (heading and content) */
+amp-accordion > section > * {
+  display: block;
+  float: none;
+  overflow: hidden; /* clearfix */
+  position: relative;
+}
+
+/**
+ * This media query is used instead of @supports due to low compatibility.
+ * At the time of this change (4/6/2021) no version of Webkit support @supports queries.
+ *
+ * Note! This is a new CSS incompatible with older browsers. It provides
+ * low-specificity UI styles. The same styles are later set for older browsers
+ * via the `i-amphtml-accordion-header` class.
+ */
+@media (min-width: 1px) {
+  :where(amp-accordion > section) > :first-child {
+    cursor: pointer;
+    background-color: #efefef;
+    padding-right: 20px;
+    border: 1px solid #dfdfdf;
+  }
+}
+
+/* heading
+ * TODO(#30445): update these styles after team agrees on styling
+ */
+.i-amphtml-accordion-header {
+  cursor: pointer;
+  background-color: #efefef;
+  padding-right: 20px;
+  border: 1px solid #dfdfdf;
+}
+
+/* Collapse content by default. */
+amp-accordion > section:not([expanded]) > :last-child:not(.i-amphtml-animating),
+amp-accordion
+  > section:not([expanded])
+  > :last-child:not(.i-amphtml-animating)
+  * {
+  display: none !important;
+}
diff --git a/extensions/amp-accordion/1.0/amp-accordion.js b/extensions/amp-accordion/1.0/amp-accordion.js
new file mode 100644
index 0000000000000..904bc3831eb38
--- /dev/null
+++ b/extensions/amp-accordion/1.0/amp-accordion.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {BaseElement} from './base-element';
+import {CSS} from '../../../build/amp-accordion-1.0.css';
+import {Services} from '../../../src/services';
+import {createCustomEvent} from '../../../src/event-helper';
+import {isExperimentOn} from '../../../src/experiments';
+import {toWin} from '../../../src/types';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-accordion';
+
+/** @extends {PreactBaseElement<AccordionDef.AccordionApi>} */
+class AmpAccordion extends BaseElement {
+  /** @override */
+  init() {
+    this.registerApiAction('toggle', (api, invocation) =>
+      api./*OK*/ toggle(invocation.args && invocation.args['section'])
+    );
+    this.registerApiAction('expand', (api, invocation) =>
+      api./*OK*/ expand(invocation.args && invocation.args['section'])
+    );
+    this.registerApiAction('collapse', (api, invocation) =>
+      api./*OK*/ collapse(invocation.args && invocation.args['section'])
+    );
+
+    return super.init();
+  }
+
+  /** @override */
+  triggerEvent(section, eventName, detail) {
+    const event = createCustomEvent(
+      toWin(section.ownerDocument.defaultView),
+      `accordionSection.${eventName}`,
+      detail
+    );
+    Services.actionServiceForDoc(section).trigger(
+      section,
+      eventName,
+      event,
+      ActionTrust.HIGH
+    );
+
+    super.triggerEvent(section, eventName, detail);
+  }
+
+  /** @override */
+  isLayoutSupported(unusedLayout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-accordion'),
+      'expected global "bento" or specific "bento-accordion" experiment to be enabled'
+    );
+    return true;
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpAccordion, CSS);
+});
diff --git a/extensions/amp-accordion/1.0/animations.js b/extensions/amp-accordion/1.0/animations.js
new file mode 100644
index 0000000000000..a4fc889397ef6
--- /dev/null
+++ b/extensions/amp-accordion/1.0/animations.js
@@ -0,0 +1,141 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {getStyle, setStyles} from '../../../src/style';
+
+const MAX_TRANSITION_DURATION = 500; // ms
+const MIN_TRANSITION_DURATION = 200; // ms
+const EXPAND_CURVE = 'cubic-bezier(0.47, 0, 0.745, 0.715)';
+const COLLAPSE_CURVE = 'cubic-bezier(0.39, 0.575, 0.565, 1)';
+
+/**
+ * @param {!Element} content
+ * @return {!UnlistenDef}
+ */
+export function animateExpand(content) {
+  return animate(content, () => {
+    const oldHeight = getStyle(content, 'height');
+    const oldOpacity = getStyle(content, 'opacity');
+    const oldOverflowY = getStyle(content, 'overflowY');
+
+    // Measure the expanded height. This is relatively heavy with a sync
+    // layout. But no way around it. The hope that the `commitStyles` API
+    // may eventually make this unneeded.
+    setStyles(content, {
+      height: 0,
+      opacity: 0,
+      overflowY: 'auto',
+    });
+    const targetHeight = content./*OK*/ scrollHeight;
+
+    // Reset back. The animation will take care of these properties
+    // going forward.
+    setStyles(content, {
+      height: oldHeight,
+      opacity: oldOpacity,
+      overflowY: oldOverflowY,
+    });
+
+    const duration = getTransitionDuration(targetHeight);
+
+    return content.animate(
+      [
+        {
+          height: 0,
+          opacity: 0,
+          overflowY: 'hidden',
+        },
+        {
+          height: targetHeight + 'px',
+          opacity: 1,
+          overflowY: 'hidden',
+        },
+      ],
+      {
+        easing: EXPAND_CURVE,
+        duration,
+      }
+    );
+  });
+}
+
+/**
+ * @param {!Element} content
+ * @return {!UnlistenDef}
+ */
+export function animateCollapse(content) {
+  return animate(content, () => {
+    const startHeight = content./*OK*/ offsetHeight;
+    const duration = getTransitionDuration(startHeight);
+
+    return content.animate(
+      [
+        {
+          height: startHeight + 'px',
+          opacity: 1,
+          overflowY: 'hidden',
+        },
+        {
+          height: '0',
+          opacity: 0,
+          overflowY: 'hidden',
+        },
+      ],
+      {
+        easing: COLLAPSE_CURVE,
+        duration,
+      }
+    );
+  });
+}
+
+/**
+ * @param {!Element} element
+ * @param {function():!Animation} prepare
+ * @param {function()=} cleanup
+ * @return {!UnlistenDef}
+ */
+function animate(element, prepare, cleanup = undefined) {
+  element.classList.add('i-amphtml-animating');
+  let player = prepare();
+  player.onfinish = player.oncancel = () => {
+    player = null;
+    if (cleanup) {
+      cleanup();
+    }
+    element.classList.remove('i-amphtml-animating');
+  };
+  return () => {
+    if (player) {
+      player.cancel();
+    }
+  };
+}
+
+/**
+ * Calculates transition duration from vertical distance traveled
+ * @param {number} dy
+ * @return {number}
+ */
+function getTransitionDuration(dy) {
+  const maxY = window./*OK*/ innerHeight;
+  const distanceAdjustedDuration =
+    (Math.abs(dy) / maxY) * MAX_TRANSITION_DURATION;
+  return Math.min(
+    Math.max(distanceAdjustedDuration, MIN_TRANSITION_DURATION),
+    MAX_TRANSITION_DURATION
+  );
+}
diff --git a/extensions/amp-accordion/1.0/base-element.js b/extensions/amp-accordion/1.0/base-element.js
new file mode 100644
index 0000000000000..f47e698c11435
--- /dev/null
+++ b/extensions/amp-accordion/1.0/base-element.js
@@ -0,0 +1,259 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionSection,
+} from './component';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {childElementsByTag, toggleAttribute} from '../../../src/dom';
+import {devAssert} from '../../../src/log';
+import {dict, memo} from '../../../src/core/types/object';
+import {forwardRef} from '../../../src/preact/compat';
+import {toArray} from '../../../src/core/types/array';
+import {useDOMHandle} from '../../../src/preact/component';
+import {useLayoutEffect, useRef} from '../../../src/preact';
+import {useSlotContext} from '../../../src/preact/slot';
+
+const SECTION_SHIM_PROP = '__AMP_S_SHIM';
+const HEADER_SHIM_PROP = '__AMP_H_SHIM';
+const CONTENT_SHIM_PROP = '__AMP_C_SHIM';
+const SECTION_POST_RENDER = '__AMP_PR';
+const EXPAND_STATE_SHIM_PROP = '__AMP_EXPAND_STATE_SHIM';
+
+/** @extends {PreactBaseElement<AccordionDef.AccordionApi>} */
+export class BaseElement extends PreactBaseElement {
+  /** @override */
+  init() {
+    const getExpandStateTrigger = (section) => (expanded) =>
+      this.triggerEvent(section, expanded ? 'expand' : 'collapse');
+
+    const {element} = this;
+    const mu = new MutationObserver(() => {
+      this.mutateProps(getState(element, mu, getExpandStateTrigger));
+    });
+    mu.observe(element, {
+      attributeFilter: ['expanded', 'id'],
+      subtree: true,
+      childList: true,
+    });
+
+    const {'children': children} = getState(element, mu, getExpandStateTrigger);
+    return dict({
+      'children': children,
+    });
+  }
+}
+
+/**
+ * @param {!Element} element
+ * @param {MutationObserver} mu
+ * @param {!Function} getExpandStateTrigger
+ * @return {!JsonObject}
+ */
+function getState(element, mu, getExpandStateTrigger) {
+  const sections = toArray(childElementsByTag(element, 'section'));
+
+  const children = sections.map((section) => {
+    // TODO(wg-bento): This implementation causes infinite loops on DOM mutation.
+    // See https://github.com/ampproject/amp-react-prototype/issues/40.
+    if (!section[SECTION_POST_RENDER]) {
+      section[SECTION_POST_RENDER] = () => mu.takeRecords();
+    }
+
+    const sectionShim = memo(
+      section,
+      SECTION_SHIM_PROP,
+      bindSectionShimToElement
+    );
+    const headerShim = memo(section, HEADER_SHIM_PROP, bindHeaderShimToElement);
+    const contentShim = memo(
+      section,
+      CONTENT_SHIM_PROP,
+      bindContentShimToElement
+    );
+    const expandStateShim = memo(
+      section,
+      EXPAND_STATE_SHIM_PROP,
+      getExpandStateTrigger
+    );
+    const sectionProps = dict({
+      'key': section,
+      'as': sectionShim,
+      'expanded': section.hasAttribute('expanded'),
+      'id': section.getAttribute('id'),
+      'onExpandStateChange': expandStateShim,
+    });
+    // For headerProps and contentProps:
+    // || undefined needed for the `role` attribute since an element w/o
+    // role results in `null`.  When `null` is passed into Preact, the
+    // default prop value is not used.  `undefined` triggers default prop
+    // value.  This is not needed for `id` since this is handled with
+    // explicit logic (not default prop value) and all falsy values are
+    // handled the same.
+    const headerProps = dict({
+      'as': headerShim,
+      'id': section.firstElementChild.getAttribute('id'),
+      'role': section.firstElementChild.getAttribute('role') || undefined,
+    });
+    const contentProps = dict({
+      'as': contentShim,
+      'id': section.lastElementChild.getAttribute('id'),
+      'role': section.lastElementChild.getAttribute('role') || undefined,
+    });
+    return (
+      <AccordionSection {...sectionProps}>
+        <AccordionHeader {...headerProps}></AccordionHeader>
+        <AccordionContent {...contentProps}></AccordionContent>
+      </AccordionSection>
+    );
+  });
+  return dict({'children': children});
+}
+
+/**
+ * @param {!Element} sectionElement
+ * @param {!AccordionDef.SectionShimProps} props
+ * @return {PreactDef.Renderable}
+ */
+function SectionShim(sectionElement, {children, expanded}) {
+  useLayoutEffect(() => {
+    toggleAttribute(sectionElement, 'expanded', expanded);
+    if (sectionElement[SECTION_POST_RENDER]) {
+      sectionElement[SECTION_POST_RENDER]();
+    }
+  }, [sectionElement, expanded]);
+  return children;
+}
+
+/**
+ * @param {!Element} element
+ * @return {function(!AccordionDef.SectionProps):PreactDef.Renderable}
+ */
+const bindSectionShimToElement = (element) => SectionShim.bind(null, element);
+
+/**
+ * @param {!Element} sectionElement
+ * @param {!AccordionDef.HeaderShimProps} props
+ * @return {PreactDef.Renderable}
+ */
+function HeaderShim(
+  sectionElement,
+  {
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    id,
+    onClick,
+    role,
+  }
+) {
+  const headerElement = sectionElement.firstElementChild;
+  useLayoutEffect(() => {
+    if (!headerElement || !onClick) {
+      return;
+    }
+    headerElement.setAttribute('id', id);
+    headerElement.classList.add('i-amphtml-accordion-header');
+    headerElement.addEventListener('click', onClick);
+    if (!headerElement.hasAttribute('tabindex')) {
+      headerElement.setAttribute('tabindex', 0);
+    }
+    headerElement.setAttribute('aria-expanded', ariaExpanded);
+    headerElement.setAttribute('aria-controls', ariaControls);
+    headerElement.setAttribute('role', role);
+    if (sectionElement[SECTION_POST_RENDER]) {
+      sectionElement[SECTION_POST_RENDER]();
+    }
+    return () => {
+      headerElement.removeEventListener('click', devAssert(onClick));
+    };
+  }, [
+    sectionElement,
+    headerElement,
+    id,
+    role,
+    onClick,
+    ariaControls,
+    ariaExpanded,
+  ]);
+  return <header />;
+}
+
+/**
+ * @param {!Element} element
+ * @return {function(!AccordionDef.HeaderProps):PreactDef.Renderable}
+ */
+const bindHeaderShimToElement = (element) => HeaderShim.bind(null, element);
+
+/**
+ * @param {!Element} sectionElement
+ * @param {!AccordionDef.ContentShimProps} props
+ * @param {{current: ?}} ref
+ * @return {PreactDef.Renderable}
+ */
+function ContentShimWithRef(
+  sectionElement,
+  {'aria-labelledby': ariaLabelledBy, id, role},
+  ref
+) {
+  const contentElement = sectionElement.lastElementChild;
+  const contentRef = useRef();
+  contentRef.current = contentElement;
+  useSlotContext(contentRef);
+  useDOMHandle(ref, contentElement);
+  useLayoutEffect(() => {
+    if (!contentElement) {
+      return;
+    }
+    contentElement.classList.add('i-amphtml-accordion-content');
+    contentElement.setAttribute('id', id);
+    contentElement.setAttribute('role', role);
+    contentElement.setAttribute('aria-labelledby', ariaLabelledBy);
+    if (sectionElement[SECTION_POST_RENDER]) {
+      sectionElement[SECTION_POST_RENDER]();
+    }
+  }, [sectionElement, contentElement, id, role, ariaLabelledBy]);
+  return <div />;
+}
+
+/**
+ * @param {!Element} element
+ * @return {function(!AccordionDef.ContentProps):PreactDef.Renderable}
+ */
+const bindContentShimToElement = (element) =>
+  forwardRef(
+    /** @type {function(?, {current:?}):PreactDef.Renderable} */ (
+      ContentShimWithRef.bind(null, element)
+    )
+  );
+
+/** @override */
+BaseElement['Component'] = Accordion;
+
+/** @override */
+BaseElement['detached'] = true;
+
+/** @override */
+BaseElement['props'] = {
+  'animate': {attr: 'animate', type: 'boolean', media: true},
+  'expandSingleSection': {
+    attr: 'expand-single-section',
+    type: 'boolean',
+  },
+};
diff --git a/extensions/amp-accordion/1.0/component.js b/extensions/amp-accordion/1.0/component.js
new file mode 100644
index 0000000000000..5308a273f5569
--- /dev/null
+++ b/extensions/amp-accordion/1.0/component.js
@@ -0,0 +1,443 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {WithAmpContext} from '../../../src/preact/context';
+import {animateCollapse, animateExpand} from './animations';
+import {forwardRef} from '../../../src/preact/compat';
+import {omit} from '../../../src/core/types/object';
+import {
+  randomIdGenerator,
+  sequentialIdGenerator,
+} from '../../../src/core/math/id-generator';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from '../../../src/preact';
+import {useStyles} from './component.jss';
+import objstr from 'obj-str';
+
+const AccordionContext = Preact.createContext(
+  /** @type {AccordionDef.AccordionContext} */ ({})
+);
+
+const SectionContext = Preact.createContext(
+  /** @type {AccordionDef.SectionContext} */ ({})
+);
+
+/** @type {!Object<string, boolean>} */
+const EMPTY_EXPANDED_MAP = {};
+
+/** @type {!Object<string, function(boolean):undefined|undefined>} */
+const EMPTY_EVENT_MAP = {};
+
+const generateSectionId = sequentialIdGenerator();
+const generateRandomId = randomIdGenerator(100000);
+
+/**
+ * @param {!AccordionDef.AccordionProps} props
+ * @param {{current: ?AccordionDef.AccordionApi}} ref
+ * @return {PreactDef.Renderable}
+ */
+function AccordionWithRef(
+  {
+    animate = false,
+    as: Comp = 'section',
+    children,
+    expandSingleSection = false,
+    id,
+    ...rest
+  },
+  ref
+) {
+  const [expandedMap, setExpandedMap] = useState(EMPTY_EXPANDED_MAP);
+  const eventMapRef = useRef(EMPTY_EVENT_MAP);
+  const [randomPrefix] = useState(generateRandomId);
+  const prefix = id || `a${randomPrefix}`;
+
+  useEffect(() => {
+    if (!expandSingleSection) {
+      return;
+    }
+    setExpandedMap((expandedMap) => {
+      const newExpandedMap = {};
+      let expanded = 0;
+      for (const k in expandedMap) {
+        newExpandedMap[k] = expandedMap[k] && expanded++ == 0;
+      }
+      return newExpandedMap;
+    });
+  }, [expandSingleSection]);
+
+  const registerSection = useCallback(
+    (id, defaultExpanded, {current: onExpandStateChange}) => {
+      setExpandedMap((expandedMap) => {
+        return setExpanded(
+          id,
+          defaultExpanded,
+          expandedMap,
+          expandSingleSection
+        );
+      });
+      eventMapRef.current = {...eventMapRef.current, [id]: onExpandStateChange};
+      return () => {
+        setExpandedMap((expandedMap) => omit(expandedMap, id));
+        eventMapRef.current = omit(
+          /** @type {!Object} */ (eventMapRef.current),
+          id
+        );
+      };
+    },
+    [expandSingleSection]
+  );
+
+  const toggleExpanded = useCallback(
+    (id, opt_expand) => {
+      setExpandedMap((expandedMap) => {
+        const newExpanded = opt_expand ?? !expandedMap[id];
+        const newExpandedMap = setExpanded(
+          id,
+          newExpanded,
+          expandedMap,
+          expandSingleSection
+        );
+
+        // Schedule a single microtask to fire events for
+        // all changed sections (order not defined)
+        Promise.resolve().then(() => {
+          for (const k in expandedMap) {
+            const onExpandStateChange = eventMapRef.current[k];
+            if (onExpandStateChange && expandedMap[k] != newExpandedMap[k]) {
+              onExpandStateChange(newExpandedMap[k]);
+            }
+          }
+        });
+        return newExpandedMap;
+      });
+    },
+    [expandSingleSection]
+  );
+
+  const isExpanded = useCallback(
+    (id, defaultExpanded) => expandedMap[id] ?? defaultExpanded,
+    [expandedMap]
+  );
+
+  const toggle = useCallback(
+    (id) => {
+      if (id) {
+        if (id in expandedMap) {
+          toggleExpanded(id);
+        }
+      } else {
+        // Toggle all should do nothing when expandSingleSection is true
+        if (!expandSingleSection) {
+          for (const k in expandedMap) {
+            toggleExpanded(k);
+          }
+        }
+      }
+    },
+    [expandedMap, toggleExpanded, expandSingleSection]
+  );
+
+  const expand = useCallback(
+    (id) => {
+      if (id) {
+        if (!isExpanded(id, true)) {
+          toggleExpanded(id);
+        }
+      } else {
+        // Expand all should do nothing when expandSingleSection is true
+        if (!expandSingleSection) {
+          for (const k in expandedMap) {
+            if (!isExpanded(k, true)) {
+              toggleExpanded(k);
+            }
+          }
+        }
+      }
+    },
+    [expandedMap, toggleExpanded, isExpanded, expandSingleSection]
+  );
+
+  const collapse = useCallback(
+    (id) => {
+      if (id) {
+        if (isExpanded(id, false)) {
+          toggleExpanded(id);
+        }
+      } else {
+        for (const k in expandedMap) {
+          if (isExpanded(k, false)) {
+            toggleExpanded(k);
+          }
+        }
+      }
+    },
+    [expandedMap, toggleExpanded, isExpanded]
+  );
+
+  useImperativeHandle(
+    ref,
+    () =>
+      /** @type {!AccordionDef.AccordionApi} */ ({
+        toggle,
+        expand,
+        collapse,
+      }),
+    [toggle, collapse, expand]
+  );
+
+  const context = useMemo(
+    () =>
+      /** @type {!AccordionDef.AccordionContext} */ ({
+        registerSection,
+        toggleExpanded,
+        isExpanded,
+        animate,
+        prefix,
+      }),
+    [registerSection, toggleExpanded, isExpanded, animate, prefix]
+  );
+
+  return (
+    <Comp id={id} {...rest}>
+      <AccordionContext.Provider value={context}>
+        {children}
+      </AccordionContext.Provider>
+    </Comp>
+  );
+}
+
+const Accordion = forwardRef(AccordionWithRef);
+Accordion.displayName = 'Accordion'; // Make findable for tests.
+export {Accordion};
+
+/**
+ * @param {string} id
+ * @param {boolean} value
+ * @param {!Object<string, boolean>} expandedMap
+ * @param {boolean} expandSingleSection
+ * @return {!Object<string, boolean>}
+ */
+function setExpanded(id, value, expandedMap, expandSingleSection) {
+  let newExpandedMap;
+  if (expandSingleSection && value) {
+    newExpandedMap = {[id]: value};
+    for (const k in expandedMap) {
+      if (k != id) {
+        newExpandedMap[k] = false;
+      }
+    }
+  } else {
+    newExpandedMap = {...expandedMap, [id]: value};
+  }
+  return newExpandedMap;
+}
+
+/**
+ * @param {!AccordionDef.AccordionSectionProps} props
+ * @return {PreactDef.Renderable}
+ */
+export function AccordionSection({
+  animate: defaultAnimate = false,
+  as: Comp = 'section',
+  children,
+  expanded: defaultExpanded = false,
+  id: propId,
+  onExpandStateChange,
+  ...rest
+}) {
+  const [genId] = useState(generateSectionId);
+  const id = propId || genId;
+  const [suffix] = useState(generateRandomId);
+  const [expandedState, setExpandedState] = useState(defaultExpanded);
+  const [contentIdState, setContentIdState] = useState(null);
+  const [headerIdState, setHeaderIdState] = useState(null);
+
+  const {
+    animate: contextAnimate,
+    isExpanded,
+    prefix,
+    registerSection,
+    toggleExpanded,
+  } = useContext(AccordionContext);
+
+  const expanded = isExpanded ? isExpanded(id, defaultExpanded) : expandedState;
+  const animate = contextAnimate ?? defaultAnimate;
+  const contentId =
+    contentIdState || `${prefix || 'a'}-content-${id}-${suffix}`;
+  const headerId = headerIdState || `${prefix || 'a'}-header-${id}-${suffix}`;
+
+  // Storing this state change callback in a ref because this may change
+  // frequently and we do not want to trigger a re-register of the section
+  // each time  the callback is updated
+  const onExpandStateChangeRef = useRef(
+    /** @type {?function(boolean):undefined|undefined} */ (null)
+  );
+  onExpandStateChangeRef.current = onExpandStateChange;
+  useLayoutEffect(() => {
+    if (registerSection) {
+      return registerSection(id, defaultExpanded, onExpandStateChangeRef);
+    }
+  }, [registerSection, id, defaultExpanded]);
+
+  const toggleHandler = useCallback(
+    (opt_expand) => {
+      if (toggleExpanded) {
+        toggleExpanded(id, opt_expand);
+      } else {
+        setExpandedState((prev) => {
+          const newValue = opt_expand ?? !prev;
+          Promise.resolve().then(() => {
+            const onExpandStateChange = onExpandStateChangeRef.current;
+            if (onExpandStateChange) {
+              onExpandStateChange(newValue);
+            }
+          });
+          return newValue;
+        });
+      }
+    },
+    [id, toggleExpanded]
+  );
+
+  const context = useMemo(
+    () =>
+      /** @type {AccordionDef.SectionContext} */ ({
+        animate,
+        contentId,
+        headerId,
+        expanded,
+        toggleHandler,
+        setContentId: setContentIdState,
+        setHeaderId: setHeaderIdState,
+      }),
+    [animate, contentId, headerId, expanded, toggleHandler]
+  );
+
+  return (
+    <Comp {...rest} expanded={expanded}>
+      <SectionContext.Provider value={context}>
+        {children}
+      </SectionContext.Provider>
+    </Comp>
+  );
+}
+
+/**
+ * @param {!AccordionDef.AccordionHeaderProps} props
+ * @return {PreactDef.Renderable}
+ */
+export function AccordionHeader({
+  as: Comp = 'div',
+  children,
+  className = '',
+  id,
+  role = 'button',
+  tabIndex = 0,
+  ...rest
+}) {
+  const {contentId, expanded, headerId, setHeaderId, toggleHandler} =
+    useContext(SectionContext);
+  const classes = useStyles();
+
+  useLayoutEffect(() => {
+    if (setHeaderId) {
+      setHeaderId(id);
+    }
+  }, [setHeaderId, id]);
+
+  return (
+    <Comp
+      {...rest}
+      id={headerId}
+      role={role}
+      className={`${className} ${classes.sectionChild} ${classes.header}`}
+      tabIndex={tabIndex}
+      aria-controls={contentId}
+      onClick={() => toggleHandler()}
+      aria-expanded={String(expanded)}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+/**
+ * @param {!AccordionDef.AccordionContentProps} props
+ * @return {PreactDef.Renderable}
+ */
+export function AccordionContent({
+  as: Comp = 'div',
+  children,
+  className = '',
+  id,
+  role = 'region',
+  ...rest
+}) {
+  const ref = useRef(null);
+  const hasMountedRef = useRef(false);
+  const {animate, contentId, expanded, headerId, setContentId} =
+    useContext(SectionContext);
+  const classes = useStyles();
+
+  useEffect(() => {
+    hasMountedRef.current = true;
+    return () => (hasMountedRef.current = false);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (setContentId) {
+      setContentId(id);
+    }
+  }, [setContentId, id]);
+
+  useLayoutEffect(() => {
+    const hasMounted = hasMountedRef.current;
+    const content = ref.current;
+    if (!animate || !hasMounted || !content || !content.animate) {
+      return;
+    }
+    return expanded ? animateExpand(content) : animateCollapse(content);
+  }, [expanded, animate]);
+
+  return (
+    <WithAmpContext renderable={expanded}>
+      <Comp
+        {...rest}
+        ref={ref}
+        className={objstr({
+          [className]: true,
+          [classes.sectionChild]: true,
+          [classes.contentHidden]: !expanded,
+        })}
+        id={contentId}
+        aria-labelledby={headerId}
+        role={role}
+      >
+        {children}
+      </Comp>
+    </WithAmpContext>
+  );
+}
diff --git a/extensions/amp-accordion/1.0/component.jss.js b/extensions/amp-accordion/1.0/component.jss.js
new file mode 100644
index 0000000000000..dfb85326aa997
--- /dev/null
+++ b/extensions/amp-accordion/1.0/component.jss.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+const sectionChild = {
+  // Make animations measurable. Without this, padding and margin can skew
+  // animations.
+  boxSizing: 'border-box !important',
+  // Cancel out the margin collapse. Also helps with animations to avoid
+  // overflow.
+  overflow: 'hidden !important',
+  // Ensure that any absolute elements are positioned within the section.
+  position: 'relative !important',
+};
+
+const header = {
+  cursor: 'pointer',
+  backgroundColor: '#efefef',
+  paddingRight: '20px',
+  border: 'solid 1px #dfdfdf',
+};
+
+const contentHidden = {
+  '&:not(.i-amphtml-animating)': {
+    display: 'none !important',
+  },
+};
+
+const JSS = {
+  sectionChild,
+  header,
+  contentHidden,
+};
+
+// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
+// eslint-disable-next-line local/no-export-side-effect
+export const useStyles = createUseStyles(JSS);
diff --git a/extensions/amp-accordion/1.0/component.type.js b/extensions/amp-accordion/1.0/component.type.js
new file mode 100644
index 0000000000000..6ffcbad632045
--- /dev/null
+++ b/extensions/amp-accordion/1.0/component.type.js
@@ -0,0 +1,134 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/** @const */
+var AccordionDef = {};
+
+/**
+ * @typedef {{
+ *   as: (string|PreactDef.FunctionalComponent|undefined),
+ *   expandSingleSection: (boolean|undefined),
+ *   animate: (boolean|undefined),
+ *   id: (string|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+AccordionDef.AccordionProps;
+
+/**
+ * @typedef {{
+ *   as: (string|PreactDef.FunctionalComponent|undefined),
+ *   expanded: (boolean|undefined),
+ *   animate: (boolean|undefined),
+ *   id: (string|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ *   onExpandStateChange: (function(boolean):undefined|undefined),
+ * }}
+ */
+AccordionDef.AccordionSectionProps;
+
+/**
+ * @typedef {{
+ *   as: (string|PreactDef.FunctionalComponent|undefined),
+ *   role: (string|undefined),
+ *   className: (string|undefined),
+ *   tabIndex: (number|string|undefined),
+ *   id: (string|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+AccordionDef.AccordionHeaderProps;
+
+/**
+ * @typedef {{
+ *   as: (string|PreactDef.FunctionalComponent|undefined),
+ *   role: (string|undefined),
+ *   className: (string|undefined),
+ *   id: (string|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+AccordionDef.AccordionContentProps;
+
+/**
+ * This is not a public API, it exists to define properties for reference
+ * that are used in the HeaderShim defined in amp-accordion
+ * @typedef {{
+ *   id: (string),
+ *   role: (string),
+ *   onClick: (function()|undefined),
+ *   aria-controls: (string),
+ *   aria-expanded: (string),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+AccordionDef.HeaderShimProps;
+
+/**
+ * This is not a public API, it exists to define properties for reference
+ * that are used in the ContentShim defined in amp-accordion
+ * @typedef {{
+ *   id: (string),
+ *   role: (string),
+ *   aria-labelledby: (string),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+AccordionDef.ContentShimProps;
+
+/**
+ * @typedef {{
+ *   registerSection: (function(string)|undefined),
+ *   isExpanded: (function(string, boolean):boolean),
+ *   toggleExpanded: (function(string)|undefined),
+ *   animate: (boolean|undefined),
+ *   prefix: (string),
+ * }}
+ */
+AccordionDef.AccordionContext;
+
+/**
+ * @typedef {{
+ *   animate: (boolean),
+ *   contentId: (string),
+ *   headerId: (string),
+ *   expanded: (boolean),
+ *   expandHandler: (function()),
+ *   setContentId: (function(string)),
+ *   setHeaderId: (function(string)),
+ * }}
+ */
+AccordionDef.SectionContext;
+
+/** @interface */
+AccordionDef.AccordionApi = class {
+  /**
+   * @param {string|undefined} section
+   */
+  toggle(section) {}
+
+  /**
+   * @param {string|undefined} section
+   */
+  expand(section) {}
+
+  /**
+   * @param {string|undefined} section
+   */
+  collapse(section) {}
+};
diff --git a/extensions/amp-accordion/1.0/package.json b/extensions/amp-accordion/1.0/package.json
new file mode 100644
index 0000000000000..088782e839a4d
--- /dev/null
+++ b/extensions/amp-accordion/1.0/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-accordion",
+  "version": "VERSION",
+  "description": "AMP Accordion Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "./dist/component.js",
+  "module": "./dist/component-preact.module.js",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "./dist/component-preact.module.js",
+      "require": "./dist/component-preact.js"
+    },
+    "./react": {
+      "import": "./dist/component-react.module.js",
+      "require": "./dist/component-react.js"
+    }
+  },
+  "files": ["dist/*", "react.js"],
+  "repository": {
+      "type": "git",
+      "url": "https://github.com/ampproject/amphtml.git",
+      "directory": "extensions/amp-accordion/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0",
+  "peerDependencies": {
+      "preact": "^10.2.1",
+      "react": "^17.0.0"
+  }
+}
diff --git a/extensions/amp-accordion/1.0/react.js b/extensions/amp-accordion/1.0/react.js
new file mode 100644
index 0000000000000..0b2957c35c38d
--- /dev/null
+++ b/extensions/amp-accordion/1.0/react.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-env node */
+// eslint-disable-next-line local/no-module-exports
+module.exports = require('./dist/component-react');
diff --git a/extensions/amp-accordion/1.0/storybook/Basic.amp.js b/extensions/amp-accordion/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..9d219591c8be1
--- /dev/null
+++ b/extensions/amp-accordion/1.0/storybook/Basic.amp.js
@@ -0,0 +1,111 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-accordion-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-accordion', version: '1.0'}],
+    experiments: ['bento'],
+  },
+};
+
+export const _default = () => {
+  const expandSingleSection = boolean('expandSingleSection', false);
+  const animate = boolean('animate', false);
+  return (
+    <main>
+      <amp-accordion
+        id="accordion"
+        expand-single-section={expandSingleSection}
+        animate={animate}
+      >
+        <section id="section1">
+          <h2>Section 1</h2>
+          <div>Puppies are cute.</div>
+        </section>
+        <section>
+          <h2>Section 2</h2>
+          <div>Kittens are furry.</div>
+        </section>
+        <section expanded>
+          <h2>Section 3</h2>
+          <div>Elephants have great memory.</div>
+        </section>
+      </amp-accordion>
+
+      <div class="buttons" style={{marginTop: 8}}>
+        <button on="tap:accordion.toggle(section='section1')">
+          toggle(section1)
+        </button>
+        <button on="tap:accordion.toggle()">toggle all</button>
+        <button on="tap:accordion.expand(section='section1')">
+          expand(section1)
+        </button>
+        <button on="tap:accordion.expand()">expand all</button>
+        <button on="tap:accordion.collapse(section='section1')">
+          collapse(section1)
+        </button>
+        <button on="tap:accordion.collapse()">collapse all</button>
+      </div>
+    </main>
+  );
+};
+
+export const events = () => {
+  const expandSingleSection = boolean('expandSingleSection', false);
+  const animate = boolean('animate', false);
+  return (
+    <main>
+      <amp-accordion
+        id="accordion"
+        expand-single-section={expandSingleSection}
+        animate={animate}
+      >
+        <section id="section1">
+          <h2>Section 1</h2>
+          <div>Puppies are cute.</div>
+        </section>
+        <section id="section2" on="expand:accordion.expand(section='section3')">
+          <h2>Section 2</h2>
+          <div>Kittens are furry.</div>
+        </section>
+        <section
+          id="section3"
+          on="collapse:accordion.collapse(section='section2')"
+        >
+          <h2>Section 3</h2>
+          <div>Elephants have great memory.</div>
+        </section>
+      </amp-accordion>
+
+      <div class="buttons" style={{marginTop: 8}}>
+        <button on="tap:accordion.expand(section='section2')">
+          expand(section2)
+        </button>
+        <button on="tap:accordion.collapse(section='section3')">
+          collapse(section3)
+        </button>
+        <button on="tap:accordion.toggle()">toggle all</button>
+      </div>
+    </main>
+  );
+};
diff --git a/extensions/amp-accordion/1.0/storybook/Basic.js b/extensions/amp-accordion/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..bca13d2e0becc
--- /dev/null
+++ b/extensions/amp-accordion/1.0/storybook/Basic.js
@@ -0,0 +1,163 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionSection,
+} from '../component';
+import {boolean, withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'Accordion',
+  component: Accordion,
+  decorators: [withKnobs],
+};
+
+/**
+ * @param {!Object} props
+ * @return {*}
+ */
+function AccordionWithActions(props) {
+  // TODO(#30447): replace imperative calls with "button" knobs when the
+  // Storybook 6.1 is released.
+  const ref = Preact.useRef();
+  return (
+    <section>
+      <Accordion ref={ref} {...props} />
+      <div style={{marginTop: 8}}>
+        <button onClick={() => ref.current.toggle('section1')}>
+          toggle(section1)
+        </button>
+        <button onClick={() => ref.current.toggle()}>toggle all</button>
+        <button onClick={() => ref.current.expand('section1')}>
+          expand(section1)
+        </button>
+        <button onClick={() => ref.current.expand()}>expand all</button>
+        <button onClick={() => ref.current.collapse('section1')}>
+          collapse(section1)
+        </button>
+        <button onClick={() => ref.current.collapse()}>collapse all</button>
+      </div>
+    </section>
+  );
+}
+
+export const _default = () => {
+  const expandSingleSection = boolean('expandSingleSection', false);
+  const animate = boolean('animate', false);
+  return (
+    <main>
+      <AccordionWithActions
+        expandSingleSection={expandSingleSection}
+        animate={animate}
+      >
+        <AccordionSection id="section1" key={1}>
+          <AccordionHeader>
+            <h2>Section 1</h2>
+          </AccordionHeader>
+          <AccordionContent>Puppies are cute.</AccordionContent>
+        </AccordionSection>
+        <AccordionSection key={2}>
+          <AccordionHeader>
+            <h2>Section 2</h2>
+          </AccordionHeader>
+          <AccordionContent>Kittens are furry.</AccordionContent>
+        </AccordionSection>
+        <AccordionSection key={3} expanded>
+          <AccordionHeader>
+            <h2>Section 3</h2>
+          </AccordionHeader>
+          <AccordionContent>Elephants have great memory.</AccordionContent>
+        </AccordionSection>
+      </AccordionWithActions>
+    </main>
+  );
+};
+
+/**
+ * @param {!Object} props
+ * @return {*}
+ */
+function AccordionWithEvents(props) {
+  // TODO(#30447): replace imperative calls with "button" knobs when the
+  // Storybook 6.1 is released.
+  const ref = Preact.useRef();
+  return (
+    <section>
+      <Accordion ref={ref} {...props}>
+        <AccordionSection id="section1" key={1} expanded>
+          <AccordionHeader>
+            <h2>Section 1</h2>
+          </AccordionHeader>
+          <AccordionContent>Puppies are cute.</AccordionContent>
+        </AccordionSection>
+        <AccordionSection
+          id="section2"
+          key={2}
+          onExpandStateChange={(expanded) => {
+            if (expanded) {
+              ref.current.expand('section3');
+            }
+          }}
+        >
+          <AccordionHeader>
+            <h2>Section 2</h2>
+          </AccordionHeader>
+          <AccordionContent>Kittens are furry.</AccordionContent>
+        </AccordionSection>
+        <AccordionSection
+          id="section3"
+          key={3}
+          onExpandStateChange={(expanded) => {
+            if (!expanded) {
+              ref.current.collapse('section2');
+            }
+          }}
+        >
+          <AccordionHeader>
+            <h2>Section 3</h2>
+          </AccordionHeader>
+          <AccordionContent>Elephants have great memory.</AccordionContent>
+        </AccordionSection>
+      </Accordion>
+      <div style={{marginTop: 8}}>
+        <button onClick={() => ref.current.expand('section2')}>
+          expand(section2)
+        </button>
+        <button onClick={() => ref.current.collapse('section3')}>
+          collapse(section3)
+        </button>
+        <button onClick={() => ref.current.toggle()}>toggle all</button>
+      </div>
+    </section>
+  );
+}
+
+export const events = () => {
+  const expandSingleSection = boolean('expandSingleSection', false);
+  const animate = boolean('animate', false);
+  return (
+    <main>
+      <AccordionWithEvents
+        expandSingleSection={expandSingleSection}
+        animate={animate}
+      ></AccordionWithEvents>
+    </main>
+  );
+};
diff --git a/extensions/amp-accordion/1.0/storybook/Bind.amp.js b/extensions/amp-accordion/1.0/storybook/Bind.amp.js
new file mode 100644
index 0000000000000..adf97d17d1989
--- /dev/null
+++ b/extensions/amp-accordion/1.0/storybook/Bind.amp.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-accordion-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [
+      {name: 'amp-bind', version: '0.1'},
+      {name: 'amp-accordion', version: '1.0'},
+    ],
+    experiments: ['bento'],
+  },
+};
+
+export const withAmpBind = () => {
+  const expandSingleSection = boolean('expandSingleSection', false);
+  const animate = boolean('animate', false);
+  return (
+    <main>
+      <amp-accordion
+        expand-single-section={expandSingleSection}
+        animate={animate}
+      >
+        <section data-amp-bind-expanded="section1">
+          <h2>Section 1</h2>
+          <div>Puppies are cute.</div>
+        </section>
+        <section data-amp-bind-expanded="section2">
+          <h2>Section 2</h2>
+          <div>Kittens are furry.</div>
+        </section>
+        <section data-amp-bind-expanded="section3">
+          <h2>Section 3</h2>
+          <div>Elephants have great memory.</div>
+        </section>
+      </amp-accordion>
+
+      <div class="buttons" style={{marginTop: 8}}>
+        <button on="tap:AMP.setState({section1: true})">
+          Expand Section 1
+        </button>
+        <button on="tap:AMP.setState({section1: false})">
+          Collapse Section 1
+        </button>
+        <button on="tap:AMP.setState({section2: true})">
+          Expand Section 2
+        </button>
+        <button on="tap:AMP.setState({section2: false})">
+          Collapse Section 2
+        </button>
+        <button on="tap:AMP.setState({section3: true})">
+          Expand Section 3
+        </button>
+        <button on="tap:AMP.setState({section3: false})">
+          Collapse Section 3
+        </button>
+      </div>
+    </main>
+  );
+};
diff --git a/extensions/amp-accordion/1.0/test-e2e/test-amp-accordion.js b/extensions/amp-accordion/1.0/test-e2e/test-amp-accordion.js
new file mode 100644
index 0000000000000..68d96ad36dec0
--- /dev/null
+++ b/extensions/amp-accordion/1.0/test-e2e/test-amp-accordion.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright 2021 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.
+ */
+
+describes.endtoend(
+  'amp-accordion',
+  {
+    version: '1.0',
+    fixture: 'amp-accordion/amp-accordion.html',
+    experiments: ['bento-accordion'],
+    environments: ['single', 'viewer-demo'],
+  },
+  async (env) => {
+    let controller;
+
+    let header1;
+
+    let content1;
+    let content2;
+    let content3;
+
+    let button1;
+    let button2;
+
+    beforeEach(async () => {
+      controller = env.controller;
+
+      header1 = await controller.findElement('#header1');
+
+      content1 = await controller.findElement('#content1');
+      content2 = await controller.findElement('#content2');
+      content3 = await controller.findElement('#content3');
+
+      button1 = await controller.findElement('#button1');
+      button2 = await controller.findElement('#button2');
+    });
+
+    it('expands and collapses when a header section is clicked', async () => {
+      // section 1 is not expanded
+      await expect(
+        controller.getElementProperty(content1, 'clientHeight')
+      ).to.equal(0);
+
+      await controller.click(header1);
+
+      // section 1 is expanded
+      await expect(
+        controller.getElementProperty(content1, 'clientHeight')
+      ).to.equal(25);
+
+      await controller.click(header1);
+
+      // section 1 is collapsed
+      await expect(
+        controller.getElementProperty(content1, 'clientHeight')
+      ).to.equal(0);
+    });
+
+    it('renders section in expanded state when expanded attribute provided', async () => {
+      // section 3 should start in expanded state since it has
+      // "expanded" attribute
+      await expect(
+        controller.getElementProperty(content3, 'clientHeight')
+      ).to.equal(25);
+    });
+
+    it('expands and collapses when buttons are clicked', async () => {
+      // section 1 is not expanded
+      await expect(
+        controller.getElementProperty(content1, 'clientHeight')
+      ).to.equal(0);
+
+      // toggle section 1
+      await controller.click(button1);
+
+      // section 1 is expanded
+      await expect(
+        controller.getElementProperty(content1, 'clientHeight')
+      ).to.equal(25);
+
+      // collapse all button
+      await controller.click(button2);
+
+      // all sections collapsed
+      await expect(
+        controller.getElementProperty(content1, 'clientHeight')
+      ).to.equal(0);
+      await expect(
+        controller.getElementProperty(content2, 'clientHeight')
+      ).to.equal(0);
+      await expect(
+        controller.getElementProperty(content3, 'clientHeight')
+      ).to.equal(0);
+    });
+  }
+);
diff --git a/extensions/amp-accordion/1.0/test-e2e/test-single-expand.js b/extensions/amp-accordion/1.0/test-e2e/test-single-expand.js
new file mode 100644
index 0000000000000..7281a6ef27bc3
--- /dev/null
+++ b/extensions/amp-accordion/1.0/test-e2e/test-single-expand.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright 2021 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.
+ */
+
+describes.endtoend(
+  'amp-accordion',
+  {
+    version: '1.0',
+    fixture: 'amp-accordion/single-expand.html',
+    experiments: ['bento-accordion'],
+    environments: ['single', 'viewer-demo'],
+  },
+  async (env) => {
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    it('expands only one section at a time for "expand-single-section" accordion', async () => {
+      const header1 = await controller.findElement('#header2-1');
+      const header2 = await controller.findElement('#header2-2');
+      const content1 = await controller.findElement('#content2-1');
+      const content2 = await controller.findElement('#content2-2');
+
+      // section 1 is not expanded
+      await expect(
+        controller.getElementProperty(content1, 'clientHeight')
+      ).to.equal(0);
+
+      // expand section 1
+      await controller.click(header1);
+
+      // section 1 is expanded
+      await expect(
+        controller.getElementProperty(content1, 'clientHeight')
+      ).to.equal(25);
+
+      // expand section 2
+      await controller.click(header2);
+
+      // section 2 is expanded, section 1 is collapsed
+      await expect(
+        controller.getElementProperty(content1, 'clientHeight')
+      ).to.equal(0);
+      await expect(
+        controller.getElementProperty(content2, 'clientHeight')
+      ).to.equal(25);
+    });
+  }
+);
diff --git a/extensions/amp-accordion/1.0/test/test-amp-accordion.js b/extensions/amp-accordion/1.0/test/test-amp-accordion.js
new file mode 100644
index 0000000000000..d9d2b848294e7
--- /dev/null
+++ b/extensions/amp-accordion/1.0/test/test-amp-accordion.js
@@ -0,0 +1,838 @@
+/**
+ * Copyright 2020 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.
+ */
+import '../amp-accordion';
+import {ActionInvocation} from '../../../../src/service/action-impl';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
+import {CanRender} from '../../../../src/context/contextprops';
+import {htmlFor} from '../../../../src/static-template';
+import {subscribe, unsubscribe} from '../../../../src/context';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-accordion:1.0',
+  {
+    amp: {
+      extensions: ['amp-accordion:1.0'],
+    },
+  },
+  (env) => {
+    let win;
+    let html;
+    let element;
+
+    async function waitForExpanded(el, expanded) {
+      const isExpandedOrNot = () =>
+        el.hasAttribute('expanded') === expanded &&
+        el.firstElementChild.getAttribute('aria-expanded') === String(expanded);
+      await waitFor(isExpandedOrNot, 'element expanded updated');
+    }
+
+    function readContextProp(element, prop) {
+      return new Promise((resolve) => {
+        const handler = (value) => {
+          resolve(value);
+          unsubscribe(element, [prop], handler);
+        };
+        subscribe(element, [prop], handler);
+      });
+    }
+
+    beforeEach(async () => {
+      win = env.win;
+      html = htmlFor(win.document);
+      toggleExperiment(win, 'bento-accordion', true, true);
+      element = html`
+        <amp-accordion layout="fixed" width="300" height="200">
+          <section expanded id="section1">
+            <h1>header1</h1>
+            <div>content1</div>
+          </section>
+          <section>
+            <h1>header2</h1>
+            <div>content2</div>
+          </section>
+          <section>
+            <h1>header3</h1>
+            <div>content3</div>
+          </section>
+        </amp-accordion>
+      `;
+      win.document.body.appendChild(element);
+      await element.buildInternal();
+    });
+
+    it('should render expanded and collapsed sections', () => {
+      const sections = element.children;
+      expect(sections[0]).to.have.attribute('expanded');
+      expect(
+        sections[0].firstElementChild.getAttribute('aria-expanded')
+      ).to.equal('true');
+      expect(sections[0].lastElementChild).to.have.display('block');
+
+      expect(sections[1]).to.not.have.attribute('expanded');
+      expect(
+        sections[1].firstElementChild.getAttribute('aria-expanded')
+      ).to.equal('false');
+      expect(sections[1].lastElementChild).to.have.display('none');
+
+      expect(sections[2]).to.not.have.attribute('expanded');
+      expect(
+        sections[2].firstElementChild.getAttribute('aria-expanded')
+      ).to.equal('false');
+      expect(sections[2].lastElementChild).to.have.display('none');
+    });
+
+    it('should propagate renderable context', async () => {
+      const sections = element.children;
+      const renderables = await Promise.all([
+        readContextProp(sections[0].lastElementChild, CanRender),
+        readContextProp(sections[1].lastElementChild, CanRender),
+        readContextProp(sections[2].lastElementChild, CanRender),
+      ]);
+      expect(renderables[0]).to.be.true;
+      expect(renderables[1]).to.be.false;
+      expect(renderables[2]).to.be.false;
+    });
+
+    it('should have amp specific classes for CSS', () => {
+      const sections = element.children;
+      const {firstElementChild: header0, lastElementChild: content0} =
+        sections[0];
+      const {firstElementChild: header1, lastElementChild: content1} =
+        sections[1];
+      const {firstElementChild: header2, lastElementChild: content2} =
+        sections[2];
+
+      // Check classes
+      expect(header0.className).to.include('i-amphtml-accordion-header');
+      expect(header1.className).to.include('i-amphtml-accordion-header');
+      expect(header2.className).to.include('i-amphtml-accordion-header');
+      expect(content0.className).to.include('i-amphtml-accordion-content');
+      expect(content1.className).to.include('i-amphtml-accordion-content');
+      expect(content2.className).to.include('i-amphtml-accordion-content');
+
+      // Check computed styles
+      expect(win.getComputedStyle(header0).margin).to.equal('0px');
+      expect(win.getComputedStyle(header0).cursor).to.equal('pointer');
+      expect(win.getComputedStyle(header0).backgroundColor).to.equal(
+        'rgb(239, 239, 239)'
+      );
+      expect(win.getComputedStyle(header0).paddingRight).to.equal('20px');
+      expect(win.getComputedStyle(header0).border).to.equal(
+        '1px solid rgb(223, 223, 223)'
+      );
+
+      expect(win.getComputedStyle(header1).margin).to.equal('0px');
+      expect(win.getComputedStyle(header1).cursor).to.equal('pointer');
+      expect(win.getComputedStyle(header1).backgroundColor).to.equal(
+        'rgb(239, 239, 239)'
+      );
+      expect(win.getComputedStyle(header1).paddingRight).to.equal('20px');
+      expect(win.getComputedStyle(header1).border).to.equal(
+        '1px solid rgb(223, 223, 223)'
+      );
+
+      expect(win.getComputedStyle(header2).margin).to.equal('0px');
+      expect(win.getComputedStyle(header2).cursor).to.equal('pointer');
+      expect(win.getComputedStyle(header2).backgroundColor).to.equal(
+        'rgb(239, 239, 239)'
+      );
+      expect(win.getComputedStyle(header2).paddingRight).to.equal('20px');
+      expect(win.getComputedStyle(header2).border).to.equal(
+        '1px solid rgb(223, 223, 223)'
+      );
+
+      expect(win.getComputedStyle(content0).margin).to.equal('0px');
+      expect(win.getComputedStyle(content1).margin).to.equal('0px');
+      expect(win.getComputedStyle(content2).margin).to.equal('0px');
+    });
+
+    it('should expand and collapse on click', async () => {
+      const sections = element.children;
+
+      sections[1].firstElementChild.click();
+      await waitForExpanded(sections[1], true);
+
+      expect(sections[0]).to.have.attribute('expanded');
+      expect(sections[0].lastElementChild).to.have.display('block');
+
+      expect(sections[1]).to.have.attribute('expanded');
+      expect(sections[1].lastElementChild).to.have.display('block');
+
+      expect(sections[2]).to.not.have.attribute('expanded');
+      expect(sections[2].lastElementChild).to.have.display('none');
+
+      sections[0].firstElementChild.click();
+      await waitForExpanded(sections[0], false);
+
+      expect(sections[0]).to.not.have.attribute('expanded');
+      expect(sections[0].lastElementChild).to.have.display('none');
+
+      expect(sections[1]).to.have.attribute('expanded');
+      expect(sections[1].lastElementChild).to.have.display('block');
+
+      expect(sections[2]).to.not.have.attribute('expanded');
+      expect(sections[2].lastElementChild).to.have.display('none');
+    });
+
+    it('should switch expand-single-section value', async () => {
+      const sections = element.children;
+      sections[1].firstElementChild.click();
+      await waitForExpanded(sections[1], true);
+
+      const getExpandedCount = () =>
+        element.querySelectorAll('[expanded]').length;
+      expect(getExpandedCount()).to.equal(2);
+
+      element.setAttribute('expand-single-section', '');
+      await waitFor(
+        () => getExpandedCount() == 1,
+        'only one element stays expanded'
+      );
+    });
+
+    it('should expand and collapse on attribute change', async () => {
+      const sections = element.children;
+
+      sections[1].setAttribute('expanded', '');
+      await waitForExpanded(sections[1], true);
+
+      expect(sections[0]).to.have.attribute('expanded');
+      expect(sections[0].lastElementChild).to.have.display('block');
+
+      expect(sections[1]).to.have.attribute('expanded');
+      expect(sections[1].lastElementChild).to.have.display('block');
+
+      expect(sections[2]).to.not.have.attribute('expanded');
+      expect(sections[2].lastElementChild).to.have.display('none');
+
+      sections[0].removeAttribute('expanded');
+      await waitForExpanded(sections[0], false);
+
+      expect(sections[0]).to.not.have.attribute('expanded');
+      expect(sections[0].lastElementChild).to.have.display('none');
+
+      expect(sections[1]).to.have.attribute('expanded');
+      expect(sections[1].lastElementChild).to.have.display('block');
+
+      expect(sections[2]).to.not.have.attribute('expanded');
+      expect(sections[2].lastElementChild).to.have.display('none');
+    });
+
+    it('should include a11y related attributes', async () => {
+      const sections = element.children;
+
+      const {firstElementChild: header0, lastElementChild: content0} =
+        sections[0];
+      const {firstElementChild: header1, lastElementChild: content1} =
+        sections[1];
+      const {firstElementChild: header2, lastElementChild: content2} =
+        sections[2];
+
+      expect(header0).to.have.attribute('tabindex');
+      expect(header0).to.have.attribute('aria-controls');
+      expect(header0).to.have.attribute('role');
+      expect(header0).to.have.attribute('aria-expanded');
+      expect(header0).to.have.attribute('id');
+      expect(header0.getAttribute('aria-expanded')).to.equal('true');
+      expect(content0).to.have.attribute('id');
+      expect(content0).to.have.attribute('aria-labelledby');
+      expect(content0).to.have.attribute('role');
+      expect(header0.getAttribute('aria-controls')).to.equal(
+        content0.getAttribute('id')
+      );
+      expect(header0.getAttribute('id')).to.equal(
+        content0.getAttribute('aria-labelledby')
+      );
+
+      expect(header1).to.have.attribute('tabindex');
+      expect(header1).to.have.attribute('aria-controls');
+      expect(header1).to.have.attribute('role');
+      expect(header1).to.have.attribute('aria-expanded');
+      expect(header1).to.have.attribute('id');
+      expect(header1.getAttribute('aria-expanded')).to.equal('false');
+      expect(content1).to.have.attribute('id');
+      expect(content1).to.have.attribute('aria-labelledby');
+      expect(content1).to.have.attribute('role');
+      expect(header1.getAttribute('aria-controls')).to.equal(
+        content1.getAttribute('id')
+      );
+      expect(header1.getAttribute('id')).to.equal(
+        content1.getAttribute('aria-labelledby')
+      );
+
+      expect(header2).to.have.attribute('tabindex');
+      expect(header2).to.have.attribute('aria-controls');
+      expect(header2).to.have.attribute('role');
+      expect(header2).to.have.attribute('aria-expanded');
+      expect(header2).to.have.attribute('id');
+      expect(header2.getAttribute('aria-expanded')).to.equal('false');
+      expect(content2).to.have.attribute('id');
+      expect(content2).to.have.attribute('aria-labelledby');
+      expect(content2).to.have.attribute('role');
+      expect(header2.getAttribute('aria-controls')).to.equal(
+        content2.getAttribute('id')
+      );
+      expect(header2.getAttribute('id')).to.equal(
+        content2.getAttribute('aria-labelledby')
+      );
+    });
+
+    it('should not overwrite existing header and content ids', async () => {
+      element = html`
+        <amp-accordion layout="fixed" width="300" height="200">
+          <section expanded id="section1">
+            <h1 id="h1">header1</h1>
+            <div id="c1">content1</div>
+          </section>
+          <section>
+            <h1 id="h2">header2</h1>
+            <div>content2</div>
+          </section>
+          <section>
+            <h1>header3</h1>
+            <div id="c3">content3</div>
+          </section>
+        </amp-accordion>
+      `;
+      win.document.body.appendChild(element);
+      await element.buildInternal();
+
+      const sections = element.children;
+      const {firstElementChild: header0, lastElementChild: content0} =
+        sections[0];
+      const {firstElementChild: header1, lastElementChild: content1} =
+        sections[1];
+      const {firstElementChild: header2, lastElementChild: content2} =
+        sections[2];
+
+      expect(header0.getAttribute('id')).to.equal('h1');
+      expect(content0.getAttribute('id')).to.equal('c1');
+      expect(header0.getAttribute('aria-controls')).to.equal(
+        content0.getAttribute('id')
+      );
+      expect(header0.getAttribute('id')).to.equal(
+        content0.getAttribute('aria-labelledby')
+      );
+
+      expect(header1.getAttribute('id')).to.equal('h2');
+      expect(header1.getAttribute('aria-controls')).to.equal(
+        content1.getAttribute('id')
+      );
+      expect(header1.getAttribute('id')).to.equal(
+        content1.getAttribute('aria-labelledby')
+      );
+
+      expect(content2.getAttribute('id')).to.equal('c3');
+      expect(header2.getAttribute('aria-controls')).to.equal(
+        content2.getAttribute('id')
+      );
+      expect(header2.getAttribute('id')).to.equal(
+        content2.getAttribute('aria-labelledby')
+      );
+    });
+
+    it('should not overwrite existing role attributes', async () => {
+      element = html`
+        <amp-accordion layout="fixed" width="300" height="200">
+          <section expanded id="section1">
+            <h1 role="cat">header1</h1>
+            <div role="dog">content1</div>
+          </section>
+          <section>
+            <h1 id="h2">header2</h1>
+            <div>content2</div>
+          </section>
+        </amp-accordion>
+      `;
+      win.document.body.appendChild(element);
+      await element.buildInternal();
+
+      const sections = element.children;
+      const {firstElementChild: header0, lastElementChild: content0} =
+        sections[0];
+      const {firstElementChild: header1, lastElementChild: content1} =
+        sections[1];
+
+      expect(header0).to.have.attribute('role');
+      expect(header0.getAttribute('role')).to.equal('cat');
+      expect(content0).to.have.attribute('role');
+      expect(content0.getAttribute('role')).to.equal('dog');
+
+      expect(header1).to.have.attribute('role');
+      expect(header1.getAttribute('role')).to.equal('button');
+      expect(content1).to.have.attribute('role');
+      expect(content1.getAttribute('role')).to.equal('region');
+    });
+
+    it('should pick up new children', async () => {
+      const newSection = document.createElement('section');
+      newSection.setAttribute('expanded', '');
+      newSection.appendChild(document.createElement('h2'));
+      newSection.appendChild(document.createElement('div'));
+      element.appendChild(newSection);
+
+      await waitForExpanded(newSection, true);
+
+      expect(newSection.firstElementChild.className).to.include(
+        'i-amphtml-accordion-header'
+      );
+      expect(newSection.lastElementChild.className).to.include(
+        'i-amphtml-accordion-content'
+      );
+    });
+
+    describe('fire events on expand and collapse', () => {
+      beforeEach(async () => {
+        element = html`
+          <amp-accordion id="testAccordion">
+            <section>
+              <h2>Section 1</h2>
+              <div>Content 1</div>
+            </section>
+            <section
+              id="section2"
+              on="expand:testAccordion.expand(section='section3')"
+            >
+              <h2>Section 2</h2>
+              <div>Bunch of awesome content</div>
+            </section>
+            <section
+              id="section3"
+              on="collapse:testAccordion.collapse(section='section2')"
+            >
+              <h2>Section 3</h2>
+              <div>Content 3</div>
+            </section>
+          </amp-accordion>
+        `;
+        win.document.body.appendChild(element);
+        await element.buildInternal();
+      });
+
+      function invocation(method, args = {}) {
+        const source = null;
+        const caller = null;
+        const event = null;
+        const trust = ActionTrust.DEFAULT;
+        return new ActionInvocation(
+          element,
+          method,
+          args,
+          source,
+          caller,
+          event,
+          trust
+        );
+      }
+
+      it('should fire events on click', async () => {
+        const section1 = element.children[0];
+        const section2 = element.children[1];
+        const section3 = element.children[2];
+
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+
+        section2.firstElementChild.click();
+        await waitForExpanded(section2, true);
+
+        // Expanding section2 also expands section3
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.have.attribute('expanded');
+        expect(section3).to.have.attribute('expanded');
+
+        section3.firstElementChild.click();
+        await waitForExpanded(section3, false);
+
+        // Collapsing section3 also collapses section2
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+      });
+
+      it('should fire events on API toggle', async () => {
+        const section1 = element.children[0];
+        const section2 = element.children[1];
+        const section3 = element.children[2];
+
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+
+        element.enqueAction(invocation('expand', {section: 'section2'}));
+        await waitForExpanded(section2, true);
+
+        // Expanding section2 also expands section3
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.have.attribute('expanded');
+        expect(section3).to.have.attribute('expanded');
+
+        element.enqueAction(invocation('collapse', {section: 'section3'}));
+        await waitForExpanded(section3, false);
+
+        // Collapsing section3 also collapses section2
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+
+        element.enqueAction(invocation('expand', {section: 'section3'}));
+        await waitForExpanded(section3, true);
+
+        // Expanding section3 does not expand section2
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.have.attribute('expanded');
+
+        element.enqueAction(invocation('toggle'));
+        await waitForExpanded(section1, true);
+
+        // Section 3 closed on initial toggle
+        // Then section 3 opened based on section 2 opening
+        // Then section 2 closed based on section 3's initial close
+        expect(section1).to.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.have.attribute('expanded');
+      });
+
+      it('should capture events in bento mode (w/o "on" attribute)', async () => {
+        const section1 = element.children[0];
+        const section3 = element.children[2];
+
+        // Set up section 1 to trigger expand of section 3 on expand
+        // and collapse of section 3 on collapse
+        const api = await element.getApi();
+        section1.addEventListener('expand', () => api.expand('section3'));
+        section1.addEventListener('collapse', () => api.collapse('section3'));
+
+        // initally both section 1 and 3 are collapsed
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+
+        // expand section 1
+        section1.firstElementChild.click();
+        await waitForExpanded(section1, true);
+
+        // both section 1 and 3 are expanded
+        expect(section1).to.have.attribute('expanded');
+        expect(section3).to.have.attribute('expanded');
+
+        // collapse section 1
+        section1.firstElementChild.click();
+        await waitForExpanded(section1, false);
+
+        // both section 1 and 3 are collapsed
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+      });
+
+      it('should fire and listen for "expand" and "collapse" events', async () => {
+        const section1 = element.children[0];
+
+        // Add spy functions for expand and collapse
+        const spyE = env.sandbox.spy();
+        const spyC = env.sandbox.spy();
+        section1.addEventListener('expand', spyE);
+        section1.addEventListener('collapse', spyC);
+
+        expect(spyE).to.not.be.called;
+        expect(spyC).to.not.be.called;
+
+        // expand section 1
+        section1.firstElementChild.click();
+        await waitForExpanded(section1, true);
+
+        expect(spyE).to.be.calledOnce;
+        expect(spyC).to.not.be.called;
+
+        // collapse section 1
+        section1.firstElementChild.click();
+        await waitForExpanded(section1, false);
+
+        expect(spyE).to.be.calledOnce;
+        expect(spyC).to.be.calledOnce;
+      });
+    });
+
+    describe('animate', () => {
+      let animateStub;
+
+      beforeEach(async () => {
+        animateStub = env.sandbox.stub(win.Element.prototype, 'animate');
+        element = html`
+          <amp-accordion animate layout="fixed" width="300" height="200">
+            <section expanded>
+              <h1>header1</h1>
+              <div>content1</div>
+            </section>
+            <section>
+              <h1>header2</h1>
+              <div>content2</div>
+            </section>
+          </amp-accordion>
+        `;
+        win.document.body.appendChild(element);
+        await element.buildInternal();
+      });
+
+      it('should not animate on build', () => {
+        expect(animateStub).to.not.be.called;
+      });
+
+      it('should animate expand', async () => {
+        const animation = {};
+        animateStub.returns(animation);
+        const sections = element.children;
+        const section = sections[1];
+
+        section.setAttribute('expanded', '');
+        await waitForExpanded(sections[1], true);
+
+        expect(animateStub).to.be.calledOnce;
+        animation.onfinish();
+
+        expect(section).to.have.attribute('expanded');
+        expect(section.lastElementChild).to.have.display('block');
+      });
+
+      it('should animate collapse', async () => {
+        const animation = {};
+        animateStub.returns(animation);
+        const sections = element.children;
+        const section = sections[0];
+
+        section.removeAttribute('expanded');
+        await waitFor(() => animateStub.callCount > 0, 'animation started');
+
+        expect(animateStub).to.be.calledOnce;
+        expect(section).to.not.have.attribute('expanded');
+        // Still displayed while animating.
+        expect(section.lastElementChild).to.have.display('block');
+
+        animation.onfinish();
+        await waitForExpanded(sections[0], false);
+        expect(section.lastElementChild).to.have.display('none');
+      });
+    });
+
+    describe('imperative api', () => {
+      let section1;
+      let section2;
+      let section3;
+
+      beforeEach(() => {
+        section1 = element.children[0];
+        section2 = element.children[1];
+        section3 = element.children[2];
+      });
+
+      function invocation(method, args = {}) {
+        const source = null;
+        const caller = null;
+        const event = null;
+        const trust = ActionTrust.DEFAULT;
+        return new ActionInvocation(
+          element,
+          method,
+          args,
+          source,
+          caller,
+          event,
+          trust
+        );
+      }
+
+      describe('multi-expand accordion', () => {
+        it('toggle all', async () => {
+          element.enqueAction(invocation('toggle'));
+          await waitForExpanded(section1, false);
+
+          // All sections are toggled
+          expect(section1).to.not.have.attribute('expanded');
+          expect(section2).to.have.attribute('expanded');
+          expect(section3).to.have.attribute('expanded');
+        });
+
+        it('toggle one section', async () => {
+          element.enqueAction(invocation('toggle', {section: 'section1'}));
+          await waitForExpanded(section1, false);
+
+          // Only section 1 is toggled
+          expect(section1).to.not.have.attribute('expanded');
+          expect(section2).to.not.have.attribute('expanded');
+          expect(section3).to.not.have.attribute('expanded');
+        });
+
+        it('expand all', async () => {
+          element.enqueAction(invocation('expand'));
+          await waitForExpanded(section2, true);
+
+          // All sections are expanded
+          expect(section1).to.have.attribute('expanded');
+          expect(section2).to.have.attribute('expanded');
+          expect(section3).to.have.attribute('expanded');
+        });
+
+        it('expand one section', async () => {
+          // Collapse first section to setup the test
+          element.enqueAction(invocation('collapse'));
+          await waitForExpanded(section1, false);
+
+          // Expand the first section
+          element.enqueAction(invocation('expand', {section: 'section1'}));
+          await waitForExpanded(section1, true);
+
+          // Only the first section is expanded
+          expect(section1).to.have.attribute('expanded');
+          expect(section2).to.not.have.attribute('expanded');
+          expect(section3).to.not.have.attribute('expanded');
+        });
+
+        it('collapse all', async () => {
+          element.enqueAction(invocation('collapse'));
+          await waitForExpanded(section1, false);
+
+          // All sections are collapsed
+          expect(section1).to.not.have.attribute('expanded');
+          expect(section2).to.not.have.attribute('expanded');
+          expect(section3).to.not.have.attribute('expanded');
+        });
+
+        it('collapse one section', async () => {
+          element.enqueAction(invocation('collapse', {section: 'section1'}));
+          await waitForExpanded(section1, false);
+
+          // Only the first section is collapsed
+          expect(section1).to.not.have.attribute('expanded');
+          expect(section2).to.not.have.attribute('expanded');
+          expect(section3).to.not.have.attribute('expanded');
+        });
+      });
+
+      describe('single-expand accordion', () => {
+        beforeEach(async () => {
+          element = html`
+            <amp-accordion
+              expand-single-section
+              layout="fixed"
+              width="300"
+              height="200"
+            >
+              <section expanded id="section1">
+                <h1>header1</h1>
+                <div>content1</div>
+              </section>
+              <section id="section2">
+                <h1>header2</h1>
+                <div>content2</div>
+              </section>
+              <section>
+                <h1>header3</h1>
+                <div>content3</div>
+              </section>
+            </amp-accordion>
+          `;
+          win.document.body.appendChild(element);
+          await element.buildInternal();
+
+          section1 = element.children[0];
+          section2 = element.children[1];
+          section3 = element.children[2];
+        });
+
+        it('toggle all', async () => {
+          // First action should do nothing
+          element.enqueAction(invocation('toggle'));
+
+          // Use a second action as we need something to waitFor
+          element.enqueAction(invocation('toggle', {section: 'section1'}));
+          await waitForExpanded(section1, false);
+
+          // Verify state after both actions (should reflect only 2nd action)
+          expect(section1).to.not.have.attribute('expanded');
+          expect(section2).to.not.have.attribute('expanded');
+          expect(section3).to.not.have.attribute('expanded');
+        });
+
+        it('toggle one section', async () => {
+          element.enqueAction(invocation('toggle', {section: 'section2'}));
+          await waitForExpanded(section1, false);
+
+          // Verify that the second section is expanded and the first
+          // section is un-expanded
+          expect(section1).to.not.have.attribute('expanded');
+          expect(section2).to.have.attribute('expanded');
+          expect(section3).to.not.have.attribute('expanded');
+
+          element.enqueAction(invocation('toggle', {section: 'section2'}));
+          await waitForExpanded(section2, false);
+
+          // Verify that the second section is collapsed
+          expect(section1).to.not.have.attribute('expanded');
+          expect(section2).to.not.have.attribute('expanded');
+          expect(section3).to.not.have.attribute('expanded');
+        });
+
+        it('expand all', async () => {
+          // First action should do nothing
+          element.enqueAction(invocation('expand'));
+
+          // Use a second action as we need something to waitFor
+          element.enqueAction(invocation('toggle', {section: 'section1'}));
+          await waitForExpanded(section1, false);
+
+          // Verify state after both actions (should reflect only 2nd action)
+          expect(section1).to.not.have.attribute('expanded');
+          expect(section2).to.not.have.attribute('expanded');
+          expect(section3).to.not.have.attribute('expanded');
+        });
+
+        it('expand one section', async () => {
+          element.enqueAction(invocation('expand', {section: 'section2'}));
+          await waitForExpanded(section1, false);
+
+          // Verify that the second section is expanded and the first
+          // section is un-expanded
+          expect(section1).to.not.have.attribute('expanded');
+          expect(section2).to.have.attribute('expanded');
+          expect(section3).to.not.have.attribute('expanded');
+        });
+
+        it('collapse all', async () => {
+          element.enqueAction(invocation('collapse'));
+          await waitForExpanded(section1, false);
+
+          // All sections are collapsed
+          expect(section1).to.not.have.attribute('expanded');
+          expect(section2).to.not.have.attribute('expanded');
+          expect(section3).to.not.have.attribute('expanded');
+        });
+
+        it('collapse one section', async () => {
+          element.enqueAction(invocation('collapse', {section: 'section1'}));
+          await waitForExpanded(section1, false);
+
+          // Section 1 is collapsed
+          expect(section1).to.not.have.attribute('expanded');
+          expect(section2).to.not.have.attribute('expanded');
+          expect(section3).to.not.have.attribute('expanded');
+        });
+      });
+    });
+  }
+);
diff --git a/extensions/amp-accordion/1.0/test/test-component.js b/extensions/amp-accordion/1.0/test/test-component.js
new file mode 100644
index 0000000000000..274f51b2129d7
--- /dev/null
+++ b/extensions/amp-accordion/1.0/test/test-component.js
@@ -0,0 +1,974 @@
+/**
+ * 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionSection,
+} from '../component';
+import {mount} from 'enzyme';
+import {useAmpContext} from '../../../../src/preact/context';
+import {waitFor} from '../../../../testing/test-helper';
+
+const ContextReader = (props) => {
+  const {renderable} = useAmpContext();
+  return <div data-renderable={String(renderable)} {...props} />;
+};
+
+describes.sandboxed('Accordion preact component', {}, (env) => {
+  describe('standalone accordion section', () => {
+    it('should render a default section', () => {
+      const wrapper = mount(
+        <AccordionSection>
+          <AccordionHeader>
+            <h1>header1</h1>
+          </AccordionHeader>
+          <AccordionContent>content1</AccordionContent>
+        </AccordionSection>
+      );
+
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('section');
+      expect(dom).to.not.have.attribute('expanded');
+      expect(dom.children).to.have.lengthOf(2);
+
+      const header = dom.children[0];
+      expect(header.localName).to.equal('div');
+      expect(header.innerHTML).to.equal('<h1>header1</h1>');
+      expect(header.getAttribute('aria-expanded')).to.equal('false');
+
+      const content = dom.children[1];
+      expect(content.localName).to.equal('div');
+      expect(content.innerHTML).to.equal('content1');
+      expect(content.className.includes('content-hidden')).to.be.true;
+    });
+
+    it('should render an expanded section', () => {
+      const wrapper = mount(
+        <AccordionSection expanded>
+          <AccordionHeader>
+            <h1>header1</h1>
+          </AccordionHeader>
+          <AccordionContent>content1</AccordionContent>
+        </AccordionSection>
+      );
+
+      const dom = wrapper.getDOMNode();
+      expect(dom).to.have.attribute('expanded');
+
+      const header = dom.children[0];
+      expect(header.localName).to.equal('div');
+      expect(header.innerHTML).to.equal('<h1>header1</h1>');
+      expect(header.getAttribute('aria-expanded')).to.equal('true');
+
+      const content = dom.children[1];
+      expect(content.localName).to.equal('div');
+      expect(content.innerHTML).to.equal('content1');
+      expect(content.className.includes('content-hidden')).to.be.false;
+    });
+
+    it('should toggle expanded state', () => {
+      const wrapper = mount(
+        <AccordionSection>
+          <AccordionHeader>
+            <h1>header1</h1>
+          </AccordionHeader>
+          <AccordionContent>content1</AccordionContent>
+        </AccordionSection>
+      );
+      const dom = wrapper.getDOMNode();
+      const header = dom.children[0];
+      const content = dom.children[1];
+
+      // Start unexpanded.
+      expect(dom).to.not.have.attribute('expanded');
+      expect(header.getAttribute('aria-expanded')).to.equal('false');
+      expect(content.className.includes('content-hidden')).to.be.true;
+
+      // Click on header to expand.
+      wrapper.find('div').at(0).simulate('click');
+      expect(dom).to.have.attribute('expanded');
+      expect(header.getAttribute('aria-expanded')).to.equal('true');
+      expect(content.className.includes('content-hidden')).to.be.false;
+
+      // Click on header again to collapse.
+      wrapper.find('div').at(0).simulate('click');
+      expect(dom).to.not.have.attribute('expanded');
+      expect(header.getAttribute('aria-expanded')).to.equal('false');
+      expect(content.className.includes('content-hidden')).to.be.true;
+    });
+
+    it('should propagate renderable/playable context when expanded', () => {
+      const wrapper = mount(
+        <AccordionSection expanded>
+          <AccordionHeader>
+            <h1>header1</h1>
+          </AccordionHeader>
+          <AccordionContent>
+            <ContextReader id="content" />
+          </AccordionContent>
+        </AccordionSection>
+      );
+      const dom = wrapper.getDOMNode();
+      expect(
+        dom.querySelector('#content').getAttribute('data-renderable')
+      ).to.equal('true');
+    });
+
+    it('should propagate renderable/playable context when collapsed', () => {
+      const wrapper = mount(
+        <AccordionSection>
+          <AccordionHeader>
+            <h1>header1</h1>
+          </AccordionHeader>
+          <AccordionContent>
+            <ContextReader id="content" />
+          </AccordionContent>
+        </AccordionSection>
+      );
+      const dom = wrapper.getDOMNode();
+      expect(
+        dom.querySelector('#content').getAttribute('data-renderable')
+      ).to.equal('false');
+    });
+  });
+
+  describe('multi-expand accordion', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = mount(
+        <Accordion>
+          <AccordionSection key={1} expanded>
+            <AccordionHeader>header1</AccordionHeader>
+            <AccordionContent>content1</AccordionContent>
+          </AccordionSection>
+          <AccordionSection key={2}>
+            <AccordionHeader>header2</AccordionHeader>
+            <AccordionContent>content2</AccordionContent>
+          </AccordionSection>
+          <AccordionSection key={3}>
+            <AccordionHeader>header3</AccordionHeader>
+            <AccordionContent>content3</AccordionContent>
+          </AccordionSection>
+        </Accordion>
+      );
+    });
+
+    it('should render all sections', () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('section');
+
+      const sections = wrapper.find(AccordionSection);
+      expect(sections).to.have.lengthOf(3);
+
+      // Expanded state.
+      expect(sections.at(0).getDOMNode()).to.have.attribute('expanded');
+      expect(sections.at(1).getDOMNode()).to.not.have.attribute('expanded');
+      expect(sections.at(2).getDOMNode()).to.not.have.attribute('expanded');
+
+      const header0 = sections.at(0).find('div').at(0).getDOMNode();
+      const header1 = sections.at(1).find('div').at(0).getDOMNode();
+      const header2 = sections.at(2).find('div').at(0).getDOMNode();
+      const content0 = sections.at(0).find('div').at(1).getDOMNode();
+      const content1 = sections.at(1).find('div').at(1).getDOMNode();
+      const content2 = sections.at(2).find('div').at(1).getDOMNode();
+
+      // Headers.
+      expect(header0.textContent).to.equal('header1');
+      expect(header1.textContent).to.equal('header2');
+      expect(header2.textContent).to.equal('header3');
+
+      // Contents.
+      expect(content0.textContent).to.equal('content1');
+      expect(content1.textContent).to.equal('content2');
+      expect(content2.textContent).to.equal('content3');
+      expect(content0.className.includes('content-hidden')).to.be.false;
+      expect(content1.className.includes('content-hidden')).to.be.true;
+      expect(content2.className.includes('content-hidden')).to.be.true;
+
+      // Styling.
+      expect(header0.className.includes('section-child')).to.be.true;
+      expect(header0.className.includes('header')).to.be.true;
+      expect(header1.className.includes('section-child')).to.be.true;
+      expect(header1.className.includes('header')).to.be.true;
+      expect(header2.className.includes('section-child')).to.be.true;
+      expect(header2.className.includes('header')).to.be.true;
+      expect(content0.className.includes('section-child')).to.be.true;
+      expect(content1.className.includes('section-child')).to.be.true;
+      expect(content2.className.includes('section-child')).to.be.true;
+    });
+
+    it('should include a11y related attributes', () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('section');
+
+      const sections = wrapper.find(AccordionSection);
+      expect(sections).to.have.lengthOf(3);
+
+      const header0 = sections.at(0).find('div').at(0).getDOMNode();
+      const header1 = sections.at(1).find('div').at(0).getDOMNode();
+      const header2 = sections.at(2).find('div').at(0).getDOMNode();
+      const content0 = sections.at(0).find('div').at(1).getDOMNode();
+      const content1 = sections.at(1).find('div').at(1).getDOMNode();
+      const content2 = sections.at(2).find('div').at(1).getDOMNode();
+
+      expect(header0).to.have.attribute('tabindex');
+      expect(header0).to.have.attribute('aria-controls');
+      expect(header0).to.have.attribute('role');
+      expect(header0).to.have.attribute('aria-expanded');
+      expect(header0).to.have.attribute('id');
+      expect(header0.getAttribute('aria-expanded')).to.equal('true');
+      expect(content0).to.have.attribute('id');
+      expect(content0).to.have.attribute('aria-labelledby');
+      expect(content0).to.have.attribute('role');
+      expect(header0.getAttribute('aria-controls')).to.equal(
+        content0.getAttribute('id')
+      );
+      expect(header0.getAttribute('id')).to.equal(
+        content0.getAttribute('aria-labelledby')
+      );
+
+      expect(header1).to.have.attribute('tabindex');
+      expect(header1).to.have.attribute('aria-controls');
+      expect(header1).to.have.attribute('role');
+      expect(header1).to.have.attribute('aria-expanded');
+      expect(header1).to.have.attribute('id');
+      expect(header1.getAttribute('aria-expanded')).to.equal('false');
+      expect(content1).to.have.attribute('id');
+      expect(content1).to.have.attribute('aria-labelledby');
+      expect(content1).to.have.attribute('role');
+      expect(header1.getAttribute('aria-controls')).to.equal(
+        content1.getAttribute('id')
+      );
+      expect(header1.getAttribute('id')).to.equal(
+        content1.getAttribute('aria-labelledby')
+      );
+
+      expect(header2).to.have.attribute('tabindex');
+      expect(header2).to.have.attribute('aria-controls');
+      expect(header2).to.have.attribute('role');
+      expect(header2).to.have.attribute('aria-expanded');
+      expect(header2).to.have.attribute('id');
+      expect(header2.getAttribute('aria-expanded')).to.equal('false');
+      expect(content2).to.have.attribute('id');
+      expect(content2).to.have.attribute('aria-labelledby');
+      expect(content2).to.have.attribute('role');
+      expect(header2.getAttribute('aria-controls')).to.equal(
+        content2.getAttribute('id')
+      );
+      expect(header2.getAttribute('id')).to.equal(
+        content2.getAttribute('aria-labelledby')
+      );
+    });
+
+    it('should not overwrite existing header and content ids', () => {
+      wrapper = mount(
+        <Accordion>
+          <AccordionSection key={1} expanded>
+            <AccordionHeader id="h1">header1</AccordionHeader>
+            <AccordionContent id="c1">content1</AccordionContent>
+          </AccordionSection>
+          <AccordionSection key={2}>
+            <AccordionHeader id="h2">header2</AccordionHeader>
+            <AccordionContent>content2</AccordionContent>
+          </AccordionSection>
+          <AccordionSection key={3}>
+            <AccordionHeader>header3</AccordionHeader>
+            <AccordionContent id="c3">content3</AccordionContent>
+          </AccordionSection>
+        </Accordion>
+      );
+
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('section');
+
+      const sections = wrapper.find(AccordionSection);
+      expect(sections).to.have.lengthOf(3);
+
+      const header0 = sections.at(0).find('div').at(0).getDOMNode();
+      const header1 = sections.at(1).find('div').at(0).getDOMNode();
+      const header2 = sections.at(2).find('div').at(0).getDOMNode();
+      const content0 = sections.at(0).find('div').at(1).getDOMNode();
+      const content1 = sections.at(1).find('div').at(1).getDOMNode();
+      const content2 = sections.at(2).find('div').at(1).getDOMNode();
+
+      expect(header0.getAttribute('id')).to.equal('h1');
+      expect(content0.getAttribute('id')).to.equal('c1');
+      expect(header0.getAttribute('aria-controls')).to.equal(
+        content0.getAttribute('id')
+      );
+      expect(header0.getAttribute('id')).to.equal(
+        content0.getAttribute('aria-labelledby')
+      );
+
+      expect(header1.getAttribute('id')).to.equal('h2');
+      expect(header1.getAttribute('aria-controls')).to.equal(
+        content1.getAttribute('id')
+      );
+      expect(header1.getAttribute('id')).to.equal(
+        content1.getAttribute('aria-labelledby')
+      );
+
+      expect(content2.getAttribute('id')).to.equal('c3');
+      expect(header2.getAttribute('aria-controls')).to.equal(
+        content2.getAttribute('id')
+      );
+      expect(header2.getAttribute('id')).to.equal(
+        content2.getAttribute('aria-labelledby')
+      );
+    });
+
+    it('should default role attribute unless role prop provided', () => {
+      wrapper = mount(
+        <Accordion>
+          <AccordionSection key={1} expanded>
+            <AccordionHeader role="cat">header1</AccordionHeader>
+            <AccordionContent role="dog">content1</AccordionContent>
+          </AccordionSection>
+          <AccordionSection key={2}>
+            <AccordionHeader>header2</AccordionHeader>
+            <AccordionContent>content2</AccordionContent>
+          </AccordionSection>
+        </Accordion>
+      );
+
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('section');
+
+      const sections = wrapper.find(AccordionSection);
+      expect(sections).to.have.lengthOf(2);
+
+      const header0 = sections.at(0).find('div').at(0).getDOMNode();
+      const header1 = sections.at(1).find('div').at(0).getDOMNode();
+      const content0 = sections.at(0).find('div').at(1).getDOMNode();
+      const content1 = sections.at(1).find('div').at(1).getDOMNode();
+
+      expect(header0).to.have.attribute('role');
+      expect(header0.getAttribute('role')).to.equal('cat');
+      expect(content0).to.have.attribute('role');
+      expect(content0.getAttribute('role')).to.equal('dog');
+
+      expect(header1).to.have.attribute('role');
+      expect(header1.getAttribute('role')).to.equal('button');
+      expect(content1).to.have.attribute('role');
+      expect(content1.getAttribute('role')).to.equal('region');
+    });
+
+    it('should expand a section on click', () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('section');
+
+      const sections = wrapper.find(AccordionSection);
+      expect(sections).to.have.lengthOf(3);
+
+      // Click to expand.
+      sections.at(1).find('div').at(0).simulate('click');
+
+      // Expanded state.
+      expect(sections.at(0).getDOMNode()).to.have.attribute('expanded');
+      expect(sections.at(1).getDOMNode()).to.have.attribute('expanded');
+
+      // Contents.
+      expect(sections.at(0).find('div').at(1).getDOMNode().hidden).to.be.false;
+      expect(sections.at(1).find('div').at(1).getDOMNode().hidden).to.be.false;
+    });
+
+    it('should collapse a section on click', () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('section');
+
+      const sections = wrapper.find(AccordionSection);
+      expect(sections).to.have.lengthOf(3);
+
+      // Click to expand.
+      sections.at(0).find('div').at(0).simulate('click');
+
+      // Expanded state.
+      expect(sections.at(0).getDOMNode()).to.not.have.attribute('expanded');
+
+      // Contents.
+      expect(
+        sections
+          .at(0)
+          .find('div')
+          .at(1)
+          .getDOMNode()
+          .className.includes('content-hidden')
+      ).to.be.true;
+    });
+
+    it('should adjust state when expandSingleSection changes', async () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('section');
+
+      const sections = wrapper.find(AccordionSection);
+
+      function countExpanded() {
+        const nodes = [
+          sections.at(0).getDOMNode(),
+          sections.at(1).getDOMNode(),
+          sections.at(2).getDOMNode(),
+        ];
+        return nodes
+          .map((section) => section.hasAttribute('expanded'))
+          .reduce((sum, v) => sum + (v ? 1 : 0), 0);
+      }
+
+      expect(countExpanded()).to.equal(1);
+
+      sections.at(1).find('div').at(0).simulate('click');
+      expect(countExpanded()).to.equal(2);
+
+      await new Promise((resolve) => {
+        wrapper.setProps({expandSingleSection: true}, resolve);
+      });
+
+      // One of the expanded sections should be collapsed.
+      expect(countExpanded()).to.equal(1);
+    });
+  });
+
+  describe('single-expand accordion', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = mount(
+        <Accordion expandSingleSection>
+          <AccordionSection key={1} expanded>
+            <AccordionHeader>header1</AccordionHeader>
+            <AccordionContent>content1</AccordionContent>
+          </AccordionSection>
+          <AccordionSection key={2}>
+            <AccordionHeader>header2</AccordionHeader>
+            <AccordionContent>content2</AccordionContent>
+          </AccordionSection>
+          <AccordionSection key={3}>
+            <AccordionHeader>header3</AccordionHeader>
+            <AccordionContent>content3</AccordionContent>
+          </AccordionSection>
+        </Accordion>
+      );
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it('should expand a section on click', () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('section');
+
+      const sections = wrapper.find(AccordionSection);
+      expect(sections).to.have.lengthOf(3);
+      expect(sections.at(0).getDOMNode()).to.have.attribute('expanded');
+
+      // Click to expand.
+      sections.at(1).find('div').at(0).simulate('click');
+
+      // Expanded state.
+      expect(sections.at(0).getDOMNode()).to.not.have.attribute('expanded');
+      expect(sections.at(1).getDOMNode()).to.have.attribute('expanded');
+
+      // Contents.
+      expect(
+        sections
+          .at(0)
+          .find('div')
+          .at(1)
+          .getDOMNode()
+          .className.includes('content-hidden')
+      ).to.be.true;
+      expect(
+        sections
+          .at(1)
+          .find('div')
+          .at(1)
+          .getDOMNode()
+          .className.includes('content-hidden')
+      ).to.be.false;
+    });
+
+    it('should collapse a section on click', () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('section');
+
+      const sections = wrapper.find(AccordionSection);
+      expect(sections).to.have.lengthOf(3);
+
+      // Click to expand.
+      sections.at(0).find('div').at(0).simulate('click');
+
+      // Expanded state.
+      expect(sections.at(0).getDOMNode()).to.not.have.attribute('expanded');
+
+      // Contents.
+      expect(
+        sections
+          .at(0)
+          .find('div')
+          .at(1)
+          .getDOMNode()
+          .className.includes('content-hidden')
+      ).to.be.true;
+    });
+  });
+
+  describe('animate', () => {
+    let wrapper;
+    let animateStub;
+
+    beforeEach(() => {
+      animateStub = env.sandbox.stub(Element.prototype, 'animate');
+      wrapper = mount(
+        <Accordion animate>
+          <AccordionSection key={1} expanded>
+            <AccordionHeader>header1</AccordionHeader>
+            <AccordionContent>content1</AccordionContent>
+          </AccordionSection>
+          <AccordionSection key={2}>
+            <AccordionHeader>header2</AccordionHeader>
+            <AccordionContent>content2</AccordionContent>
+          </AccordionSection>
+        </Accordion>
+      );
+      document.body.appendChild(wrapper.getDOMNode());
+    });
+
+    it('should not animate on mount', () => {
+      expect(animateStub).to.not.be.called;
+    });
+
+    it('should animate expand on change', () => {
+      const animation = {};
+      animateStub.returns(animation);
+      const sections = wrapper.find(AccordionSection);
+      const section = sections.at(1);
+      const content = section.find('div').at(1).getDOMNode();
+
+      // Click to expand.
+      section.find('div').at(0).simulate('click');
+
+      // The state is immediately reflected.
+      expect(section.getDOMNode()).to.have.attribute('expanded');
+      expect(content.hidden).to.be.false;
+      expect(content).to.have.display('block');
+
+      // Animation has been started.
+      expect(animateStub).to.be.calledOnce;
+
+      const keyframes = animateStub.firstCall.firstArg;
+      const lastFrame = keyframes[keyframes.length - 1];
+      const options = animateStub.firstCall.args[1];
+
+      expect(parseFloat(lastFrame.height)).to.be.greaterThan(1);
+      expect(parseFloat(lastFrame.opacity)).to.equal(1);
+      expect(lastFrame.overflowY).to.equal('hidden');
+
+      expect(options.duration).to.be.greaterThan(100);
+      expect(options.easing).to.be.ok;
+    });
+
+    it('should animate collapse on change', () => {
+      const animation = {};
+      animateStub.returns(animation);
+      const sections = wrapper.find(AccordionSection);
+      const section = sections.at(0);
+      const content = section.find('div').at(1).getDOMNode();
+
+      // Click to expand.
+      section.find('div').at(0).simulate('click');
+
+      // The state is NOT immediately reflected: expanded attribute is removed,
+      // but `content[hidden]` is deferred until animation is complete.
+      expect(section.getDOMNode()).to.not.have.attribute('expanded');
+      expect(content.className.includes('i-amphtml-animating')).to.be.true;
+      expect(content).to.have.display('block');
+
+      // Animation has been started.
+      expect(animateStub).to.be.calledOnce;
+
+      const keyframes = animateStub.firstCall.firstArg;
+      const lastFrame = keyframes[keyframes.length - 1];
+      const options = animateStub.firstCall.args[1];
+
+      expect(parseFloat(lastFrame.height)).to.be.equal(0);
+      expect(parseFloat(lastFrame.opacity)).to.equal(0);
+      expect(lastFrame.overflowY).to.equal('hidden');
+
+      expect(options.duration).to.be.greaterThan(100);
+      expect(options.easing).to.be.ok;
+
+      // Cleanup the animation.
+      animation.onfinish();
+      expect(content.className.includes('i-amphtml-animating')).to.be.false;
+      expect(content.className.includes('content-hidden')).to.be.true;
+    });
+
+    it('should make animations cancelable', () => {
+      const animation = {
+        cancel: env.sandbox.spy(),
+      };
+      animateStub.onFirstCall().returns(animation).onSecondCall().returns({});
+      const sections = wrapper.find(AccordionSection);
+      const section = sections.at(0);
+      const content = section.find('div').at(1).getDOMNode();
+
+      // Click to expand.
+      section.find('div').at(0).simulate('click');
+      expect(animateStub).to.be.calledOnce;
+
+      // Currently animating
+      expect(content.className.includes('i-amphtml-animating')).to.be.true;
+
+      // Unclick. This should cancel the previous animation.
+      section.find('div').at(0).simulate('click');
+      expect(animateStub).to.be.calledTwice;
+
+      expect(animation.cancel).to.be.calledOnce;
+      animation.oncancel();
+      expect(content.className.includes('i-amphtml-animating')).to.be.false;
+    });
+
+    it('should ignore animations if not available on the platform', () => {
+      animateStub./*OK*/ restore();
+      const sections = wrapper.find(AccordionSection);
+      const section = sections.at(0);
+      const content = section.find('div').at(1).getDOMNode();
+      env.sandbox.stub(content, 'animate').value(null);
+
+      // Collapse a section.
+      section.find('div').at(0).simulate('click');
+
+      // Immediately hidden, which means animation has not been even tried.
+      expect(content.className.includes('content-hidden')).to.be.true;
+    });
+  });
+
+  describe('fire events on expand and collapse', () => {
+    let wrapper;
+    let ref;
+    let onExpandStateChange;
+
+    beforeEach(() => {
+      onExpandStateChange = env.sandbox.spy();
+      ref = Preact.createRef();
+
+      wrapper = mount(
+        <Accordion ref={ref}>
+          <AccordionSection key={1} expanded>
+            <AccordionHeader>header1</AccordionHeader>
+            <AccordionContent>content1</AccordionContent>
+          </AccordionSection>
+          <AccordionSection
+            key={2}
+            id="section2"
+            onExpandStateChange={onExpandStateChange}
+          >
+            <AccordionHeader>header2</AccordionHeader>
+            <AccordionContent>content2</AccordionContent>
+          </AccordionSection>
+          <AccordionSection key={3}>
+            <AccordionHeader>header3</AccordionHeader>
+            <AccordionContent>content3</AccordionContent>
+          </AccordionSection>
+        </Accordion>
+      );
+      document.body.appendChild(wrapper.getDOMNode());
+    });
+
+    it('should fire events on click', async () => {
+      const sections = wrapper.find(AccordionSection);
+
+      // Expand
+      sections.at(1).find('div').at(0).simulate('click');
+      await waitFor(
+        () => onExpandStateChange.callCount == 1,
+        'event callback called'
+      );
+      expect(onExpandStateChange.callCount).to.equal(1);
+      expect(onExpandStateChange.args[0][0]).to.be.true;
+
+      // Collapse
+      sections.at(1).find('div').at(0).simulate('click');
+      await waitFor(
+        () => onExpandStateChange.callCount == 2,
+        'event callback called'
+      );
+      expect(onExpandStateChange.callCount).to.equal(2);
+      expect(onExpandStateChange.args[1][0]).to.be.false;
+
+      // Expand
+      sections.at(1).find('div').at(0).simulate('click');
+      await waitFor(
+        () => onExpandStateChange.callCount == 3,
+        'event callback called'
+      );
+      expect(onExpandStateChange.callCount).to.equal(3);
+      expect(onExpandStateChange.args[2][0]).to.be.true;
+
+      // Collapse
+      sections.at(1).find('div').at(0).simulate('click');
+      await waitFor(
+        () => onExpandStateChange.callCount == 4,
+        'event callback called'
+      );
+      expect(onExpandStateChange.callCount).to.equal(4);
+      expect(onExpandStateChange.args[3][0]).to.be.false;
+    });
+
+    it('should fire events on API toggle', async () => {
+      // Expand All
+      ref.current.toggle();
+      wrapper.update();
+      await waitFor(
+        () => onExpandStateChange.callCount == 1,
+        'event callback called'
+      );
+      expect(onExpandStateChange.callCount).to.equal(1);
+      expect(onExpandStateChange.args[0][0]).to.be.true;
+
+      // Collapse All
+      ref.current.collapse();
+      wrapper.update();
+      await waitFor(
+        () => onExpandStateChange.callCount == 2,
+        'event callback called'
+      );
+      expect(onExpandStateChange.callCount).to.equal(2);
+      expect(onExpandStateChange.args[1][0]).to.be.false;
+
+      // Collapsing an already collapsed section should do nothing
+      ref.current.collapse('section2');
+      wrapper.update();
+      await waitFor(
+        () => onExpandStateChange.callCount == 2,
+        'event callback called'
+      );
+      expect(onExpandStateChange.callCount).to.equal(2);
+      expect(onExpandStateChange.args[1][0]).to.be.false;
+
+      // Expand All
+      ref.current.expand();
+      wrapper.update();
+      await waitFor(
+        () => onExpandStateChange.callCount == 3,
+        'event callback called'
+      );
+      expect(onExpandStateChange.callCount).to.equal(3);
+      expect(onExpandStateChange.args[2][0]).to.be.true;
+    });
+  });
+
+  describe('imperative api', () => {
+    let wrapper;
+    let ref;
+
+    let section1;
+    let section2;
+    let section3;
+
+    describe('multi-expand accordion', () => {
+      beforeEach(() => {
+        ref = Preact.createRef();
+        wrapper = mount(
+          <Accordion ref={ref}>
+            <AccordionSection key={1} expanded id="section1">
+              <AccordionHeader>header1</AccordionHeader>
+              <AccordionContent>content1</AccordionContent>
+            </AccordionSection>
+            <AccordionSection key={2} id="section2">
+              <AccordionHeader>header2</AccordionHeader>
+              <AccordionContent>content2</AccordionContent>
+            </AccordionSection>
+            <AccordionSection key={3}>
+              <AccordionHeader>header3</AccordionHeader>
+              <AccordionContent>content3</AccordionContent>
+            </AccordionSection>
+          </Accordion>
+        );
+
+        const sections = wrapper.find(AccordionSection);
+        section1 = sections.at(0).getDOMNode();
+        section2 = sections.at(1).getDOMNode();
+        section3 = sections.at(2).getDOMNode();
+      });
+
+      it('toggle all', () => {
+        ref.current.toggle();
+        wrapper.update();
+
+        // All sections are toggled
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.have.attribute('expanded');
+        expect(section3).to.have.attribute('expanded');
+      });
+
+      it('toggle one section', async () => {
+        ref.current.toggle('section1');
+        wrapper.update();
+
+        // Only section 1 is toggled
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+      });
+
+      it('expand all', async () => {
+        ref.current.expand();
+        wrapper.update();
+
+        // All sections are expanded
+        expect(section1).to.have.attribute('expanded');
+        expect(section2).to.have.attribute('expanded');
+        expect(section3).to.have.attribute('expanded');
+      });
+
+      it('expand one section', async () => {
+        // Collapse first section to setup the test
+        ref.current.collapse();
+        wrapper.update();
+
+        // Expand the first section
+        ref.current.expand('section1');
+        wrapper.update();
+
+        // Only the first section is expanded
+        expect(section1).to.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+      });
+
+      it('collapse all', async () => {
+        ref.current.collapse();
+        wrapper.update();
+
+        // All sections are collapsed
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+      });
+
+      it('collapse one section', async () => {
+        ref.current.collapse('section1');
+        wrapper.update();
+
+        // Only the first section is collapsed
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+      });
+    });
+
+    describe('single-expand accordion', () => {
+      beforeEach(() => {
+        ref = Preact.createRef();
+        wrapper = mount(
+          <Accordion ref={ref} expandSingleSection>
+            <AccordionSection key={1} expanded header="header1" id="section1">
+              content1
+            </AccordionSection>
+            <AccordionSection key={2} header="header2" id="section2">
+              content2
+            </AccordionSection>
+            <AccordionSection key={3} header="header3">
+              content3
+            </AccordionSection>
+          </Accordion>
+        );
+
+        const sections = wrapper.find(AccordionSection);
+        section1 = sections.at(0).getDOMNode();
+        section2 = sections.at(1).getDOMNode();
+        section3 = sections.at(2).getDOMNode();
+      });
+
+      it('toggle all', async () => {
+        ref.current.toggle();
+        wrapper.update();
+
+        // Accordion is unchanged (toggle does nothing for single-expand
+        // accordion)
+        expect(section1).to.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+      });
+
+      it('toggle one section', async () => {
+        ref.current.toggle('section2');
+        wrapper.update();
+
+        // Verify that the second section is expanded and the first
+        // section is un-expanded
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+
+        ref.current.toggle('section2');
+        wrapper.update();
+
+        // Verify that the second section is collapsed
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+      });
+
+      it('expand all', async () => {
+        ref.current.expand();
+        wrapper.update();
+
+        // Accordion is unchanged (expand does nothing for single-expand
+        // accordion)
+        expect(section1).to.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+      });
+
+      it('expand one section', async () => {
+        ref.current.expand('section2');
+        wrapper.update();
+
+        // Verify that the second section is expanded and the first
+        // section is un-expanded
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+      });
+
+      it('collapse all', async () => {
+        ref.current.collapse();
+        wrapper.update();
+
+        // All sections are collapsed
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+      });
+
+      it('collapse one section', async () => {
+        ref.current.collapse('section1');
+        wrapper.update();
+
+        // Section 1 is collapsed
+        expect(section1).to.not.have.attribute('expanded');
+        expect(section2).to.not.have.attribute('expanded');
+        expect(section3).to.not.have.attribute('expanded');
+      });
+    });
+  });
+});
diff --git a/extensions/amp-accordion/1.0/test/validator-amp-accordion.html b/extensions/amp-accordion/1.0/test/validator-amp-accordion.html
new file mode 100644
index 0000000000000..94eab1af9bede
--- /dev/null
+++ b/extensions/amp-accordion/1.0/test/validator-amp-accordion.html
@@ -0,0 +1,155 @@
+<!--
+  Copyright 2015 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.
+-->
+<!--
+  Test Description:
+  Tests amp-accordion.
+-->
+<!DOCTYPE html>
+<!-- prettier-ignore -->
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-1.0.js"></script>
+  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
+</head>
+<body>
+  <!-- a valid example -->
+  <amp-accordion>
+    <section>
+      <h2>Section 1</h2>
+      <p>Bunch of awesome content</p>
+    </section>
+    <section expanded>
+      <h2>Section 2</h2>
+      <div>Bunch of awesome content</div>
+    </section>
+    <section expanded>
+      <h2>Section 3</h2>
+      <amp-img src="/awesome.png" width="300" height="300"></amp-img>
+    </section>
+    <section>
+      <h2>Properly nested amp-accordion</h2>
+      <amp-accordion expand-single-section animate>
+        <section>
+          <h2>Nested section</h2>
+          <p>It's possible to nest amp-accordions.</p>
+        </section>
+      </amp-accordion>
+    </section>
+    <section>
+      <header>The header tag is supported as well.</header>
+      <p>Even more awesome.</p>
+    </section>
+    <section [data-expand]="">
+      <h2>Section with bound [data-expand] attribute</h2>
+      <amp-img src="/awesome.png" width="300" height="300"></amp-img>
+    </section>
+  </amp-accordion>
+
+  <!-- invalid example -->
+  <amp-accordion>
+    <amp-accordion> <!-- can't nest amp-accordion -->
+    </amp-accordion>
+    <p>Some paragraph of text that doesn't belong here.</p>
+    <section>
+      <div>header which isn't h1-h6.</div>
+      <div>a second child</div>
+      <div>a third child</div>
+    </section>
+  </amp-accordion>
+
+  <!-- accordion should allow access-hide in section -->
+  <!-- (part of amp-access) (see: #25807) -->
+  <amp-accordion expand-single-section disable-session-states>
+    <section amp-access="NOT nwPlus" access-hide>
+        <h2 class="accordion-header">
+          Web-Abo
+          <span class="show-more">&#9207;</span>
+          <span class="show-less">&#9206;</span>
+        </h2>
+        <div>***</div>
+    </section>
+    <!-- access-hide attribute should not have non-empty value -->
+    <section amp-access="NOT nwPlus" access-hide="test">
+        <h2 class="accordion-header">
+          Tagespass
+          <span class="show-more">&#9207;</span>
+          <span class="show-less">&#9206;</span>
+        </h2>
+        <div>***</div>
+    </section>
+    <!-- LOGIN-Form -->
+    <section amp-access="NOT loggedIn" amp-access-hide>
+        <h2 class="accordion-header">
+          Login
+          <span class="show-more">&#9207;</span>
+          <span class="show-less">&#9206;</span>
+        </h2>
+        <form
+          id="loginform-overlay"
+          class="text-center"
+          method="post"
+          action-xhr="test"
+          target="_top"
+          on="submit:loading-spinner.show;submit-success:loginform.hide,loading-spinner.hide,logoutform.show"
+        >
+          <input
+            id="my_user"
+            type="text"
+            name="my_user"
+            maxlength="50"
+            size="20"
+            placeholder="Benutzername o. E-Mail"
+            required
+          />
+        </form>
+    </section>
+  </amp-accordion>
+  <!-- Valid test: Testing amp-bind on [expanded] attribute and expanded attribute standalone -->
+  <amp-accordion animate>
+    <section [expanded]="section1">
+      <h2>Section 1</h2>
+      <div>Puppies are cute.</div>
+    </section>
+    <section data-amp-bind-expanded="section2">
+      <h2>Section 2</h2>
+      <div>Kittens are furry.</div>
+    </section>
+    <section expanded data-amp-bind-expanded="section3">
+      <h2>Section 3</h2>
+      <div>Elephants have great memory.</div>
+    </section>
+  </amp-accordion>
+  <div class="buttons">
+    <button on="tap:AMP.setState({section1: true})">Expand Section 1</button>
+    <button on="tap:AMP.setState({section1: false})">
+      Collapse Section 1
+    </button>
+    <button on="tap:AMP.setState({section2: true})">Expand Section 2</button>
+    <button on="tap:AMP.setState({section2: false})">
+      Collapse Section 2
+    </button>
+    <button on="tap:AMP.setState({section3: true})">Expand Section 3</button>
+    <button on="tap:AMP.setState({section3: false})">
+      Collapse Section 3
+    </button>
+  </div>
+</body>
+</html>
diff --git a/extensions/amp-accordion/1.0/test/validator-amp-accordion.out b/extensions/amp-accordion/1.0/test/validator-amp-accordion.out
new file mode 100644
index 0000000000000..1017d1932b1ed
--- /dev/null
+++ b/extensions/amp-accordion/1.0/test/validator-amp-accordion.out
@@ -0,0 +1,166 @@
+FAIL
+|  <!--
+|    Copyright 2015 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests amp-accordion.
+|  -->
+|  <!DOCTYPE html>
+|  <!-- prettier-ignore -->
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-1.0.js"></script>
+|    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
+|  </head>
+|  <body>
+|    <!-- a valid example -->
+|    <amp-accordion>
+|      <section>
+|        <h2>Section 1</h2>
+|        <p>Bunch of awesome content</p>
+|      </section>
+|      <section expanded>
+|        <h2>Section 2</h2>
+|        <div>Bunch of awesome content</div>
+|      </section>
+|      <section expanded>
+|        <h2>Section 3</h2>
+|        <amp-img src="/awesome.png" width="300" height="300"></amp-img>
+|      </section>
+|      <section>
+|        <h2>Properly nested amp-accordion</h2>
+|        <amp-accordion expand-single-section animate>
+|          <section>
+|            <h2>Nested section</h2>
+|            <p>It's possible to nest amp-accordions.</p>
+|          </section>
+|        </amp-accordion>
+|      </section>
+|      <section>
+|        <header>The header tag is supported as well.</header>
+|        <p>Even more awesome.</p>
+|      </section>
+|      <section [data-expand]="">
+|        <h2>Section with bound [data-expand] attribute</h2>
+|        <amp-img src="/awesome.png" width="300" height="300"></amp-img>
+|      </section>
+|    </amp-accordion>
+|
+|    <!-- invalid example -->
+|    <amp-accordion>
+|      <amp-accordion> <!-- can't nest amp-accordion -->
+>>     ^~~~~~~~~
+amp-accordion/1.0/test/validator-amp-accordion.html:68:4 Tag 'amp-accordion' is disallowed as child of tag 'amp-accordion'. Child tag must be one of ['section']. (see https://amp.dev/documentation/components/amp-accordion/)
+|      </amp-accordion>
+|      <p>Some paragraph of text that doesn't belong here.</p>
+>>     ^~~~~~~~~
+amp-accordion/1.0/test/validator-amp-accordion.html:70:4 Tag 'p' is disallowed as child of tag 'amp-accordion'. Child tag must be one of ['section']. (see https://amp.dev/documentation/components/amp-accordion/)
+|      <section>
+>>     ^~~~~~~~~
+amp-accordion/1.0/test/validator-amp-accordion.html:71:4 Tag 'amp-accordion > section' must have 2 child tags - saw 3 child tags.
+|        <div>header which isn't h1-h6.</div>
+>>       ^~~~~~~~~
+amp-accordion/1.0/test/validator-amp-accordion.html:72:6 Tag 'div' is disallowed as first child of tag 'amp-accordion > section'. First child tag must be one of ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header'].
+|        <div>a second child</div>
+|        <div>a third child</div>
+|      </section>
+|    </amp-accordion>
+|
+|    <!-- accordion should allow access-hide in section -->
+|    <!-- (part of amp-access) (see: #25807) -->
+|    <amp-accordion expand-single-section disable-session-states>
+|      <section amp-access="NOT nwPlus" access-hide>
+|          <h2 class="accordion-header">
+|            Web-Abo
+|            <span class="show-more">&#9207;</span>
+|            <span class="show-less">&#9206;</span>
+|          </h2>
+|          <div>***</div>
+|      </section>
+|      <!-- access-hide attribute should not have non-empty value -->
+|      <section amp-access="NOT nwPlus" access-hide="test">
+>>     ^~~~~~~~~
+amp-accordion/1.0/test/validator-amp-accordion.html:90:4 The attribute 'access-hide' in tag 'amp-accordion > section' is set to the invalid value 'test'.
+|          <h2 class="accordion-header">
+|            Tagespass
+|            <span class="show-more">&#9207;</span>
+|            <span class="show-less">&#9206;</span>
+|          </h2>
+|          <div>***</div>
+|      </section>
+|      <!-- LOGIN-Form -->
+|      <section amp-access="NOT loggedIn" amp-access-hide>
+|          <h2 class="accordion-header">
+|            Login
+|            <span class="show-more">&#9207;</span>
+|            <span class="show-less">&#9206;</span>
+|          </h2>
+|          <form
+|            id="loginform-overlay"
+|            class="text-center"
+|            method="post"
+|            action-xhr="test"
+|            target="_top"
+|            on="submit:loading-spinner.show;submit-success:loginform.hide,loading-spinner.hide,logoutform.show"
+|          >
+|            <input
+|              id="my_user"
+|              type="text"
+|              name="my_user"
+|              maxlength="50"
+|              size="20"
+|              placeholder="Benutzername o. E-Mail"
+|              required
+|            />
+|          </form>
+|      </section>
+|    </amp-accordion>
+|    <!-- Valid test: Testing amp-bind on [expanded] attribute and expanded attribute standalone -->
+|    <amp-accordion animate>
+|      <section [expanded]="section1">
+|        <h2>Section 1</h2>
+|        <div>Puppies are cute.</div>
+|      </section>
+|      <section data-amp-bind-expanded="section2">
+|        <h2>Section 2</h2>
+|        <div>Kittens are furry.</div>
+|      </section>
+|      <section expanded data-amp-bind-expanded="section3">
+|        <h2>Section 3</h2>
+|        <div>Elephants have great memory.</div>
+|      </section>
+|    </amp-accordion>
+|    <div class="buttons">
+|      <button on="tap:AMP.setState({section1: true})">Expand Section 1</button>
+|      <button on="tap:AMP.setState({section1: false})">
+|        Collapse Section 1
+|      </button>
+|      <button on="tap:AMP.setState({section2: true})">Expand Section 2</button>
+|      <button on="tap:AMP.setState({section2: false})">
+|        Collapse Section 2
+|      </button>
+|      <button on="tap:AMP.setState({section3: true})">Expand Section 3</button>
+|      <button on="tap:AMP.setState({section3: false})">
+|        Collapse Section 3
+|      </button>
+|    </div>
+|  </body>
+|  </html>
diff --git a/extensions/amp-accordion/OWNERS b/extensions/amp-accordion/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-accordion/OWNERS
+++ b/extensions/amp-accordion/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-accordion/amp-accordion.md b/extensions/amp-accordion/amp-accordion.md
index 30862b235987d..6e099923d3e6f 100644
--- a/extensions/amp-accordion/amp-accordion.md
+++ b/extensions/amp-accordion/amp-accordion.md
@@ -2,14 +2,14 @@
 $category@: layout
 formats:
   - websites
-  - ads
-  - email
 teaser:
   text: A stacked list of headers that collapse or expand content sections with user interaction.
+experimental: true
+bento: true
 ---
 
 <!---
-Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+Copyright 2021 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.
@@ -30,33 +30,47 @@ Provides a way for viewers to glance at the content outline and jump to any sect
 
 ## Usage
 
-The `amp-accordion` component allows you to display collapsible and expandable content sections. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.
+The `amp-accordion` component allows you to display collapsible and expandable
+content sections. This component provides a way for viewers to glance at the
+content outline and jump to any section. Effective use reduces scrolling needs
+on mobile devices.
 
 [filter formats="websites, ads"]
 
-- An `amp-accordion` accepts one or more `<section>` elements as its direct children.
-- Each `<section>` must contain exactly two direct children.
-  - The first child in a `<section>` is the heading for that section of the `amp-accordion`. It must be a heading element: [`<h1>-<h6>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/heading_elements) or [`<header>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header).
-  - The second child in a `<section>` is the expandable/collapsable content. It can be any tag allowed in [AMP HTML](../../spec/amp-html-format.md).
-- Clicking/tapping on a `<section>` heading expands or collapses the section.
-- An `amp-accordion` with a defined `id` preserves the collapsed/expanded state of each section while the user remains on your domain.
+-   An `amp-accordion` accepts one or more `<section>` elements as its direct
+    children.
+-   Each `<section>` must contain exactly two direct children.
+-   The first child in a `<section>` is the heading for that section of the
+    `amp-accordion`. It must be a heading element such as `<h1>-<h6>` or
+    `<header>`.
+-   The second child in a `<section>` is the expandable/collapsible content. It
+    can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).
+-   A click or tap on a `<section>` heading expands or collapses the section.
+-   An `amp-accordion` with a defined `id` preserves the collapsed or expanded
+    state of each section while the user remains on your domain.
 
 [/filter] <!-- formats="websites, ads" -->
+
 [filter formats="email"]
 
-- An `amp-accordion` accepts one or more `<section>` elements as its direct children.
-- Each `<section>` must contain exactly two direct children.
-  - The first child in a `<section>` is the heading for that section of the `amp-accordion`. It must be a heading element: [`<h1>-<h6>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/heading_elements) or [`<header>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header).
-  - The second child in a `<section>` is the expandable/collapsable content. It can be any tag allowed in [AMP for Email](../../spec/email/amp-email-html.md).
-- Clicking/tapping on a `<section>` heading expands or collapses the section.
+-   An `amp-accordion` accepts one or more `<section>` elements as its direct
+    children.
+-   Each `<section>` must contain exactly two direct children.
+-   The first child in a `<section>` is the heading for that section of the
+    `amp-accordion`. It must be a heading element such as `<h1>-<h6>` or
+    `<header>`.
+-   The second child in a `<section>` is the expandable/collapsible content. It
+    can be any tag allowed in [AMP for Email](https://github.com/ampproject/amphtml/blob/main/docs/spec/email/amp-email-html.md).
+-   A click or tap on a `<section>` heading expands or collapses the section.
 
-[/filter] <!-- formats="email" -->
+[/filter]
 
-### Example
+## Example
 
-The example below contains an `amp-accordion` with three sections. The `expanded` attribute on the third section expands it on page load. [filter formats="websites, ads"]Including the `disable-session-state` attribute preserves the collapsed/expanded state.[/filter] <!-- formats="websites, ads" -->
+The example below contains an `amp-accordion` with three sections. The
+`expanded` attribute on the third section expands it on page load.
 
-[example preview="inline" playground="true" imports="amp-accordion"]
+[example preview="top-frame" playground="true" imports="amp-accordion:1.0"]
 
 ```html
 <amp-accordion id="my-accordion"{% if not format=='email'%} disable-session-states{% endif %}>
@@ -79,201 +93,301 @@ The example below contains an `amp-accordion` with three sections. The `expanded
 
 [/example]
 
-## Attributes
+### Standalone use outside valid AMP documents
 
-### `animate`
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
 
-Include the `animate` attribute on `<amp-accordion>` to add a slight "roll down" animation on expansion, and "roll up" animation on collapse.
+#### Example
 
-[example preview="inline" playground="true" imports="amp-accordion"]
+The example below demonstrates `amp-accordion` component in standalone use.
+
+[example preview="top-frame" playground="false"]
 
 ```html
-<amp-accordion animate>
-  <section>
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-accordion-1.0.css">
+  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-1.0.js"></script>
+</head>
+<amp-accordion id="myAccordion" animate='true'>
+  <section id="section1">
     <h2>Section 1</h2>
-    <p>Content in section 1.</p>
+    <div>Puppies are cute.</div>
   </section>
-  <section>
+  <section id="section2">
     <h2>Section 2</h2>
-    <div>Content in section 2.</div>
+    <div>Kittens are furry.</div>
   </section>
-  <section>
+  <section id="section3">
     <h2>Section 3</h2>
-    <amp-img
-      src="{{server_for_email}}/static/inline-examples/images/squirrel.jpg"
-      width="320"
-      height="256"
-    ></amp-img>
+    <div>Elephants have great memory.</div>
   </section>
 </amp-accordion>
+<div class="buttons" style="margin-top: 8px;">
+  <button id='button1'>Toggle All Sections</button>
+  <button id='button2'>Expand Section 2</button>
+  <button id='button3'>Collapse Section 3</button>
+</div>
+<script>
+  (async () => {
+    const accordion = document.querySelector('#myAccordion');
+    await customElements.whenDefined('amp-accordion');
+    const api = await accordion.getApi();
+
+    // programatically toggle (expands) all sections
+    api.toggle();
+
+    // set up button actions
+    document.querySelector('#button1').onclick = () => api.toggle();
+    document.querySelector('#button2').onclick = () => api.expand('section2');
+    document.querySelector('#button3').onclick = () => api.collapse('section3');
+  })();
+</script>
 ```
 
 [/example]
 
-[filter formats="websites, stories"]
-
-### `disable-session-states`
+#### Interactivity and API usage
 
-Include the `disable-session-states` attribute on `<amp-accordion>` to disable collapsed/expanded state preservation.
+Bento enabled components in standalone use are highly interactive through their API. In Bento standalone use, the element's API replaces AMP Actions and Events and [`amp-bind`](https://amp.dev/documentation/components/amp-bind/?format=websites).
 
-[/filter]<!-- formats="websites, stories" -->
+The `amp-accordion` component API is accessible by including the following script tag in your document:
 
-### `expanded`
-
-Include the `expanded` attribute on one or more nested `<section>` to display those section as expanded on page load.
-
-### `expand-single-section`
+```html
+await customElements.whenDefined('amp-accordion');
+const api = await accordion.getApi();
+```
 
-Include the `expand-single-section` attribute to enforce one `<section>` expansion at a time. If the user clicks/taps on an unopened `<section>`, any currently expanded `<section>` will collapse.
+##### Actions
 
-[example preview="inline" playground="true" imports="amp-accordion"]
+**toggle()**
+The `toggle` action switches the `expanded` and `collapsed` states of
+`amp-accordion` sections. When called with no arguments, it toggles all sections
+of the accordion. To specify a specific section, add the `section` argument and
+use its corresponding `id` as the value.
 
 ```html
-<amp-accordion expand-single-section>
-  <section>
+<amp-accordion id="myAccordion">
+  <section id="section1">
     <h2>Section 1</h2>
-    <p>Content in section 1.</p>
+    <p>Bunch of awesome content</p>
   </section>
   <section>
     <h2>Section 2</h2>
-    <div>Content in section 2.</div>
+    <div>Bunch of awesome content</div>
   </section>
   <section>
     <h2>Section 3</h2>
-    <amp-img
-      src="{{server_for_email}}/static/inline-examples/images/squirrel.jpg"
-      width="320"
-      height="256"
-    ></amp-img>
+    <div>Bunch of awesome content</div>
   </section>
 </amp-accordion>
+<button id="button1">Toggle All Sections</button>
+<button id="button2">Toggle Section 1</button>
+<script>
+  (async () => {
+    const accordion = document.querySelector('#myAccordion');
+    await customElements.whenDefined('amp-accordion');
+    const api = await accordion.getApi();
+
+    // set up button actions
+    document.querySelector('#button1').onclick = () => api.toggle();
+    document.querySelector('#button2').onclick = () => api.toggle('section1');
+  })();
+</script>
 ```
 
-[/example]
+**expand()**
+The `expand` action expands the sections of the `amp-accordion`. If a section
+is already expanded, it stays expanded. When called with no arguments, it
+expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.
 
-### `[data-expand]`
+```html
+<button id="button1">Expand All Sections</button>
+<button id="button2">Expand Section 1</button>
+<script>
+  (async () => {
+    const accordion = document.querySelector('#myAccordion');
+    await customElements.whenDefined('amp-accordion');
+    const api = await accordion.getApi();
+
+    // set up button actions
+    document.querySelector('#button1').onclick = () => api.expand();
+    document.querySelector('#button2').onclick = () => api.expand('section1');
+  })();
+</script>
+```
 
-Bind the `[data-expand]` attribute on a `<section>` to expand or collapse the section. An expanded section will collapse if the expression evaluates to false. A collapsed section will expand if the expression evaluates to anything that is not false.
+**collapse()**
+The `collapse` action collapses the sections of the `amp-accordion`. If a
+section is already collapsed, it stays collapsed. When called with no arguments,
+it collapses all sections of the accordion. To specify a section, add the
+`section` argument, and use its corresponding `id` as the value.
 
-[example preview="inline" playground="true" imports="amp-accordion, amp-bind"]
+```html
+<button id="button1">Collapse All Sections</button>
+<button id="button2">Collapse Section 1</button>
+<script>
+  (async () => {
+    const accordion = document.querySelector('#myAccordion');
+    await customElements.whenDefined('amp-accordion');
+    const api = await accordion.getApi();
+
+    // set up button actions
+    document.querySelector('#button1').onclick = () => api.collapse();
+    document.querySelector('#button2').onclick = () => api.collapse('section1');
+  })();
+</script>
+```
+
+##### Events
+
+The `amp-accordion` API allows you to register and respond to the following events:
+
+**expand**
+This event is triggered when an accordion section is expanded and is dispatched from the expanded section.
+
+**collapse**
+This event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.
+
+In the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.
 
 ```html
-<amp-accordion>
-  <section
-    [data-expand]="sectionOne"
-    on="expand:AMP.setState({sectionOne: true});collapse:AMP.setState({sectionOne: false})"
-  >
+<amp-accordion id="eventsAccordion" animate='true'>
+  <section id="section1">
     <h2>Section 1</h2>
-    <p>Bunch of awesome content</p>
+    <div>Puppies are cute.</div>
   </section>
-  <section>
+  <section id="section2">
     <h2>Section 2</h2>
-    <div>Bunch of awesome content</div>
-  </section>
-  <section>
-    <h2>Section 3</h2>
-    <div>Bunch of awesome content</div>
+    <div>Kittens are furry.</div>
   </section>
 </amp-accordion>
-<button on="tap:AMP.setState({sectionOne: true})">Expand section 1</button>
-<button on="tap:AMP.setState({sectionOne: false})">Collapse section 1</button>
+
+<script>
+  (async () => {
+    const accordion = document.querySelector('#eventsAccordion');
+    await customElements.whenDefined('amp-accordion');
+    const api = await accordion.getApi();
+
+    // when section 1 expands, section 2 also expands
+    // when section 2 collapses, section 1 also collapses
+    const section1 = document.querySelector('#section1');
+    const section2 = document.querySelector('#section2');
+    section1.addEventListener('expand', () => api.expand('section2'));
+    section2.addEventListener('collapse', () => api.collapse('section1'));
+  })();
+</script>
 ```
 
-[/example]
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
 
-[filter formats="websites, stories"]
+```
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-accordion-1.0.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
+
+## Attributes
 
-## Actions
+### animate
 
-### `toggle`
+Include the `animate` attribute in `<amp-accordion>` to add a "roll down"
+animation when the content is expanded and "roll up" animation when collapsed.
 
-The `toggle` action switches the `expanded` and `collapsed` states of the `amp-accordion` sections. When called with no arguments, it will toggle all sections of the accordion. Specify a specific section by adding the `section` argument and the corresponding `id` as the value.
+This attribute can be configured to based on a [media query](./../../docs/spec/amp-html-responsive-attributes.md).
 
-[example preview="inline" playground="true" imports="amp-accordion"]
+[example preview="top-frame" playground="true" imports="amp-accordion:1.0"]
 
 ```html
-<amp-accordion id="myAccordion">
-  <section id="section1">
+<amp-accordion animate>
+  <section>
     <h2>Section 1</h2>
-    <p>Bunch of awesome content</p>
+    <p>Content in section 1.</p>
   </section>
   <section>
     <h2>Section 2</h2>
-    <div>Bunch of awesome content</div>
+    <div>Content in section 2.</div>
   </section>
   <section>
     <h2>Section 3</h2>
-    <div>Bunch of awesome content</div>
+    <amp-img
+      src="{{server_for_email}}/static/inline-examples/images/squirrel.jpg"
+      width="320"
+      height="256"
+    ></amp-img>
   </section>
 </amp-accordion>
-<button on="tap:myAccordion.toggle">Toggle All Sections</button>
-<button on="tap:myAccordion.toggle(section='section1')">
-  Toggle Section 1
-</button>
 ```
 
 [/example]
 
-### `expand`
-
-The `expand` action expands the sections of the `amp-accordion`. If a section is already expanded, it will stay expanded. When called with no arguments, it will expand all sections of the accordion. Specify a section by adding the `section` argument and the corresponding `id` as the value.
+### expanded
 
-```html
-<button on="tap:myAccordion.expand">Expand All Sections</button>
-<button on="tap:myAccordion.expand(section='section1')">
-  Expand Section 1
-</button>
-```
+Apply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.
 
-### `collapse`
+Use `amp-bind` to bind the `[expanded]` attribute to programmatically expand or collapse a `<section>` element. An expanded section collapses when the expression evaluates as `false`. A collapsed section expands if the expression evaluates to anything other than `false`.
 
-The `collapse` action collapses the sections of the `amp-accordion`. If a section is already collapsed, it will stay collapsed. When called with no argument, it will collapse all section of the accordion. Specify a section by adding the `section` argument and the corresponding `id` as the value.
+[example preview="top-frame" playground="true" imports="amp-accordion:1.0"]
 
 ```html
-<button on="tap:myAccordion.collapse">Collapse All Sections</button>
-<button on="tap:myAccordion.collapse(section='section1')">
-  Collapse Section 1
-</button>
+<amp-accordion>
+  <section
+    [expanded]="sectionOne"
+    on="expand:AMP.setState({sectionOne: true});collapse:AMP.setState({sectionOne: false})"
+  >
+    <h2>Section 1</h2>
+    <p>Bunch of awesome content</p>
+  </section>
+  <section>
+    <h2>Section 2</h2>
+    <div>Bunch of awesome content</div>
+  </section>
+  <section expanded>
+    <h2>Section 3</h2>
+    <div>Bunch of awesome content</div>
+  </section>
+</amp-accordion>
+<button on="tap:AMP.setState({sectionOne: true})">Expand section 1</button>
+<button on="tap:AMP.setState({sectionOne: false})">Collapse section 1</button>
 ```
 
-[/filter]<!-- formats="websites, stories" -->
+[/example]
 
-## Events
+### expand-single-section
 
-The `amp-accordion` events below trigger on accordion sections when clicked.
+Allow only one section to expand at a time by applying the `expand-single-section` attribute to the `<amp-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.
 
-[example preview="inline" playground="true" imports="amp-accordion"]
+[example preview="top-frame" playground="true" imports="amp-accordion:1.0"]
 
 ```html
-<amp-accordion id="myAccordion">
-  <section id="section1" on="expand:myAccordion.expand(section='section2')">
+<amp-accordion expand-single-section>
+  <section>
     <h2>Section 1</h2>
-    <p>Opening me will open Section 2</p>
+    <p>Content in section 1.</p>
   </section>
-  <section id="section2" on="collapse:myAccordion.collapse(section='section1')">
+  <section>
     <h2>Section 2</h2>
-    <div>Closing me will close Section 1</div>
+    <div>Content in section 2.</div>
   </section>
   <section>
     <h2>Section 3</h2>
-    <div>Bunch of awesome content</div>
+    <amp-img
+      src="{{server_for_email}}/static/inline-examples/images/squirrel.jpg"
+      width="320"
+      height="256"
+    ></amp-img>
   </section>
 </amp-accordion>
 ```
 
 [/example]
 
-### `expand`
-
-The `expand` event triggers on the target `amp-accordion` section that changes from the collapsed state to the expanded state. Calling `expand` on an already expanded section will not trigger the `expand` event.
-
-### `collapse`
-
-The `collapse` event triggers on the target `amp-accordion` section that changes from the expanded state to the collapsed state. Calling `collapse` on an already collapsed section will not trigger the event.
-
 ## Styling
 
-Use the `amp-accordion` element selector to style an `amp-accordion`.
+The `amp-accordion` element selector styles an `amp-accordion` according to your
+specifications. The following example changes the background color to green:
 
 ```css
 amp-accordion {
@@ -281,20 +395,34 @@ amp-accordion {
 }
 ```
 
-- `amp-accordion` elements are always `display: block`.
-- [`float`](https://www.w3schools.com/cssref/pr_class_float.asp) cannot style the `<section>`, heading, and content elements.
-- An expanded section applies the `expanded` attribute to the `<section>` element.
-- The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.
-- Margins of the `<amp-accordion>`, `<section>`, heading, and content elements are set to 0 and can be overridden in custom styles.
-- Both the header and content elements are `position: relative`.
+Keep the following points in mind when you style an amp-accordion:
+
+-   `amp-accordion` elements are always `display: block`.
+-   `float` cannot style a `<section>`, heading, nor content elements.
+-   An expanded section applies the `expanded` attribute to the `<section>`
+    element.
+-   The content element is clear-fixed with `overflow: hidden` and hence cannot
+    have scrollbars.
+-   Margins of the `<amp-accordion>`, `<section>`, heading, and content elements
+    are set to `0`, but can be overridden in custom styles.
+-   Both the header and content elements are `position: relative`.
 
 ## Accessibility
 
 `amp-accordion` automatically adds the following [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA):
 
-- [`aria-controls`](https://www.w3.org/TR/wai-aria-1.1/#aria-controls): applied to the header element of each `amp-accordion` section.
-- [`aria-expanded` (state)](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded): applied to the header element of each `amp-accordion` section.
+-   `aria-controls`: Applied to the header element of each `amp-accordion` section.
+-   `aria-expanded (state)`: Applied to the header element of each `amp-accordion` section.
+-   `aria-labelledby`: Applied to the content element of each `amp-accordion` section.
+
+`amp-accordion` also automatically adds the following accessibility attributes:
+
+-   `tabindex`: Applied to the header element of each `amp-accordion` section.
+-   `role=button`: Applied to the header element of each `amp-accordion` section.
+-   `role=region`: Applied to the content element of each `amp-accordion` section.
+
+## Version notes
 
-## Validation
+The experimental `1.0` version of `amp-accordion` does not support session states. It behaves as if the `disable-session-states` attribute is always applied.
 
-See [amp-accordion rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-accordion/validator-amp-accordion.protoascii) in the AMP validator specification.
+Version `0.1` and `1.0` are compatible with `amp-bind`, but some binding syntax is different. You may bind directly with the `expanded` attribute in version `1.0`. The `data-expand` binding is not supported in version `1.0`. See the [`expanded` attribute](#expanded) for further information.
diff --git a/extensions/amp-accordion/validator-amp-accordion.protoascii b/extensions/amp-accordion/validator-amp-accordion.protoascii
index c1f007a2af737..98b5b3e62aa32 100644
--- a/extensions/amp-accordion/validator-amp-accordion.protoascii
+++ b/extensions/amp-accordion/validator-amp-accordion.protoascii
@@ -13,13 +13,28 @@
 # See the License for the specific language governing permissions and
 # limitations under the license.
 #
-tags: {  # amp-accordion
+
+tags: {  # amp-accordion for websites
+  html_format: AMP
+  tag_name: "SCRIPT"
+  satisfies: "amp-accordion 1.0"
+  excludes: "amp-accordion 0.1"
+  extension_spec: {
+    name: "amp-accordion"
+    version_name: "v1.0"
+    version: "1.0"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # amp-accordion for ads
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
+  satisfies: "amp-accordion 0.1"
+  excludes: "amp-accordion 1.0"
   extension_spec: {
     name: "amp-accordion"
+    version_name: "v0.1"
     version: "0.1"
     version: "latest"
     requires_usage: EXEMPTED
@@ -44,7 +59,6 @@ tags: {  # <amp-accordion>
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "AMP-ACCORDION"
   requires_extension: "amp-accordion"
   attrs: { name: "animate" value: "" }
@@ -59,7 +73,7 @@ tags: {  # <amp-accordion>
   child_tags: {
     child_tag_name_oneof: "SECTION"
   }
-  spec_url: "https://amp.dev/documentation/components/amp-accordion"
+  spec_url: "https://amp.dev/documentation/components/amp-accordion/"
   amp_layout: {
     supported_layouts: CONTAINER
   }
@@ -68,15 +82,28 @@ tags: {  # <amp-accordion> > <section>
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "SECTION"
   spec_name: "amp-accordion > section"
+  descriptive_name: "amp-accordion > section"
   mandatory_parent: "AMP-ACCORDION"
+  attrs: {
+    # amp-access is disabled in AMP4EMAIL
+    disabled_by: "amp4email"
+    name: "access-hide"
+    value: ""
+  }
   attrs: { name: "expanded" value: "" }
   # amp-bind
-  attrs: {
+  attrs: { # binding to this attribute in 1.0 performs no action (see #33493)
     name: "[data-expand]"
   }
+  # amp-bind
+  attrs: {
+    # this attribute is used in 1.0 only
+    # this is disabled in AMP4EMAIL which only uses 0.1
+    disabled_by: "amp4email"
+    name: "[expanded]"
+  }
   child_tags: {
     mandatory_num_child_tags: 2
     first_child_tag_name_oneof: "H1"
diff --git a/extensions/amp-action-macro/0.1/amp-action-macro.js b/extensions/amp-action-macro/0.1/amp-action-macro.js
index 199c9fbbdeda4..920a7e039cffc 100644
--- a/extensions/amp-action-macro/0.1/amp-action-macro.js
+++ b/extensions/amp-action-macro/0.1/amp-action-macro.js
@@ -15,7 +15,6 @@
  */
 import {LayoutPriority} from '../../../src/layout';
 import {Services} from '../../../src/services';
-import {isExperimentOn} from '../../../src/experiments';
 import {userAssert} from '../../../src/log';
 
 /** @const {string} */
@@ -38,10 +37,6 @@ export class AmpActionMacro extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
-    userAssert(
-      isExperimentOn(this.win, 'amp-action-macro'),
-      'Experiment is off'
-    );
     const {element} = this;
 
     this.actions_ = Services.actionServiceForDoc(element);
diff --git a/extensions/amp-action-macro/0.1/test/test-amp-action-macro.js b/extensions/amp-action-macro/0.1/test/test-amp-action-macro.js
index 4759511a07a34..e95fde909a831 100644
--- a/extensions/amp-action-macro/0.1/test/test-amp-action-macro.js
+++ b/extensions/amp-action-macro/0.1/test/test-amp-action-macro.js
@@ -15,10 +15,9 @@
  */
 
 import {ActionInvocation} from '../../../../src/service/action-impl';
-import {ActionTrust} from '../../../../src/action-constants';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
 import {AmpActionMacro} from '../amp-action-macro';
 import {Services} from '../../../../src/services';
-import {toggleExperiment} from '../../../../src/experiments';
 
 describes.realWin(
   'amp-action-macro',
@@ -35,37 +34,17 @@ describes.realWin(
     beforeEach(() => {
       win = env.win;
       doc = win.document;
-
-      toggleExperiment(win, 'amp-action-macro', true);
     });
 
     function newActionMacro() {
       const actionMacro = doc.createElement('amp-action-macro');
       doc.body.appendChild(actionMacro);
-      return actionMacro.build().then(() => {
+      return actionMacro.buildInternal().then(() => {
         return actionMacro.layoutCallback();
       });
     }
 
-    it('should build if experiment is on', (done) => {
-      newActionMacro().then(
-        () => {
-          done();
-        },
-        (unused) => {
-          done(new Error('component should have built'));
-        }
-      );
-    });
-
-    it('should not build if experiment is off', () => {
-      return allowConsoleError(() => {
-        toggleExperiment(env.win, 'amp-action-macro', false);
-        return newActionMacro().catch((err) => {
-          expect(err.message).to.include('Experiment is off');
-        });
-      });
-    });
+    it('should build', newActionMacro);
 
     describe('registered action', () => {
       let macro;
@@ -75,8 +54,6 @@ describes.realWin(
       let unreferrableMacro;
       let unreferrableMacroElement;
       beforeEach(() => {
-        toggleExperiment(win, 'amp-action-macro', true);
-
         // This macro is referrable and can be invoked by the macro element(s)
         // defined after it.
         referrableMacroElement = doc.createElement('amp-action-macro');
diff --git a/extensions/amp-action-macro/OWNERS b/extensions/amp-action-macro/OWNERS
index 97513fe74e563..f115451d766a8 100644
--- a/extensions/amp-action-macro/OWNERS
+++ b/extensions/amp-action-macro/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-action-macro/amp-action-macro.md b/extensions/amp-action-macro/amp-action-macro.md
index e672b3e5d0209..f314e55a4d273 100644
--- a/extensions/amp-action-macro/amp-action-macro.md
+++ b/extensions/amp-action-macro/amp-action-macro.md
@@ -68,7 +68,7 @@ is allowed here.
 ```html
 <amp-action-macro
   id="navigate-action"
-  execute="AMP.navigateTo('http://www.ampproject.org')"
+  execute="AMP.navigateTo(url='http://www.ampproject.org')"
 ></amp-action-macro>
 
 <amp-action-macro
@@ -77,9 +77,9 @@ is allowed here.
 ></amp-action-macro>
 <amp-list id="ampList" src="...">...</amp-list>
 
-<button on="tap:navigate-action"></button>
+<button on="tap:navigate-action.execute()"></button>
 
-<button on="tap:refresh-amp-list"></button>
+<button on="tap:refresh-amp-list.execute()"></button>
 ```
 
 ### arguments
diff --git a/extensions/amp-action-macro/validator-amp-action-macro.protoascii b/extensions/amp-action-macro/validator-amp-action-macro.protoascii
index 63ab2755ca093..22a34c3efed77 100644
--- a/extensions/amp-action-macro/validator-amp-action-macro.protoascii
+++ b/extensions/amp-action-macro/validator-amp-action-macro.protoascii
@@ -15,7 +15,6 @@
 #
 tags: {  # amp-action-macro
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-action-macro"
@@ -26,7 +25,6 @@ tags: {  # amp-action-macro
 }
 tags: {  # <amp-action-macro>
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "AMP-ACTION-MACRO"
   requires_extension: "amp-action-macro"
   attrs: {
@@ -37,5 +35,5 @@ tags: {  # <amp-action-macro>
     mandatory: true
   }
   attr_lists: "mandatory-id-attr"
-  spec_url: "https://amp.dev/documentation/components/amp-action-macro"
+  spec_url: "https://amp.dev/documentation/components/amp-action-macro/"
 }
diff --git a/extensions/amp-ad-custom/0.1/amp-ad-custom.js b/extensions/amp-ad-custom/0.1/amp-ad-custom.js
index 3c7d09f8c503b..88710441b7e06 100644
--- a/extensions/amp-ad-custom/0.1/amp-ad-custom.js
+++ b/extensions/amp-ad-custom/0.1/amp-ad-custom.js
@@ -25,7 +25,6 @@ import {TemplateRenderer} from '../../amp-a4a/0.1/template-renderer';
 import {TemplateValidator} from '../../amp-a4a/0.1/template-validator';
 import {addParamToUrl} from '../../../src/url';
 import {devAssert} from '../../../src/log';
-import {startsWith} from '../../../src/string';
 
 // These have no side-effects, and so may be reused between all instances.
 const validator = new TemplateValidator();
@@ -71,7 +70,7 @@ export class AmpAdTemplate extends AmpAdNetworkBase {
     // 'data-request-param-<field_name>=<val>`, and append &<field_name>=<val>
     // to the add request URL.
     Object.keys(this.element.dataset).forEach((dataField) => {
-      if (startsWith(dataField, DATA_REQUEST_PARAM_PREFIX)) {
+      if (dataField.startsWith(DATA_REQUEST_PARAM_PREFIX)) {
         const requestParamName = dataField.slice(
           DATA_REQUEST_PARAM_PREFIX.length,
           dataField.length
diff --git a/extensions/amp-ad-custom/0.1/test/test-amp-ad-custom.js b/extensions/amp-ad-custom/0.1/test/test-amp-ad-custom.js
index b8f938d193f75..69be846374467 100644
--- a/extensions/amp-ad-custom/0.1/test/test-amp-ad-custom.js
+++ b/extensions/amp-ad-custom/0.1/test/test-amp-ad-custom.js
@@ -14,15 +14,13 @@
  * limitations under the License.
  */
 
-import {
-  AMP_TEMPLATED_CREATIVE_HEADER_NAME,
-  getAmpAdTemplateHelper,
-} from '../../../amp-a4a/0.1/template-validator';
+import '../../../amp-mustache/0.2/amp-mustache';
+import {AMP_TEMPLATED_CREATIVE_HEADER_NAME} from '../../../amp-a4a/0.1/template-validator';
 import {AmpAdTemplate} from '../amp-ad-custom';
-import {AmpMustache} from '../../../amp-mustache/0.1/amp-mustache';
 import {data} from '../../../amp-a4a/0.1/test/testdata/valid_css_at_rules_amp.reserialized';
-import {tryParseJson} from '../../../../src/json';
-import {utf8Encode} from '../../../../src/utils/bytes';
+import {getAmpAdTemplateHelper} from '../../../amp-a4a/0.1/amp-ad-template-helper';
+import {tryParseJson} from '../../../../src/core/types/object/json';
+import {utf8Encode} from '../../../../src/core/types/string/bytes';
 
 const realWinConfig = {
   amp: {},
@@ -33,33 +31,34 @@ const realWinConfig = {
 describes.realWin('TemplateRenderer', realWinConfig, (env) => {
   const templateUrl = '/adzerk/1';
 
-  let doc;
+  let doc, ampdoc;
   let containerElement;
   let impl;
 
   beforeEach(() => {
     doc = env.win.document;
+    ampdoc = env.ampdoc;
     containerElement = doc.createElement('div');
     containerElement.setAttribute('height', 50);
     containerElement.setAttribute('width', 320);
     containerElement.setAttribute('src', templateUrl);
     containerElement.signals = () => ({
+      signal: () => {},
+      reset: () => {},
       whenSignal: () => Promise.resolve(),
     });
     containerElement.renderStarted = () => {};
-    containerElement.getPageLayoutBox = () => ({
-      left: 0,
-      top: 0,
-      width: 0,
-      height: 0,
-    });
     containerElement.getLayoutBox = () => ({
       left: 0,
       top: 0,
       width: 0,
       height: 0,
     });
-    containerElement.getIntersectionChangeEntry = () => ({});
+    containerElement.getIntersectionChangeEntry = () => ({
+      rootBounds: {},
+      intersectionRect: {},
+      boundingClientRect: {},
+    });
     containerElement.isInViewport = () => true;
     containerElement.getAmpDoc = () => env.ampdoc;
     doc.body.appendChild(containerElement);
@@ -69,7 +68,13 @@ describes.realWin('TemplateRenderer', realWinConfig, (env) => {
       impl.element.style.width = width;
       impl.element.style.height = height;
     };
-    env.win.AMP.registerTemplate('amp-mustache', AmpMustache);
+
+    env.installExtension(
+      'amp-mustache',
+      '0.2',
+      /* latest */ true,
+      /* auto */ false
+    );
   });
 
   afterEach(() => {
@@ -105,7 +110,7 @@ describes.realWin('TemplateRenderer', realWinConfig, (env) => {
       });
 
       env.sandbox
-        .stub(getAmpAdTemplateHelper(env.win), 'fetch')
+        .stub(getAmpAdTemplateHelper(ampdoc), 'fetch')
         .callsFake((url) => {
           expect(url).to.equal(templateUrl);
           return Promise.resolve(data.adTemplate);
@@ -117,8 +122,8 @@ describes.realWin('TemplateRenderer', realWinConfig, (env) => {
         const iframe = containerElement.querySelector('iframe');
         expect(iframe).to.be.ok;
         expect(iframe.contentWindow.document.body.innerHTML.trim()).to.equal(
-          '<div>\n      <p>ipsum lorem</p>\n      <a href="https://' +
-            'www.google.com/" target="_top">Click for ad!</a>\n    ' +
+          '<div>\n      <p>ipsum lorem</p>\n      <a target="_top"' +
+            ' href="https://www.google.com/">Click for ad!</a>\n    ' +
             '</div>'
         );
       });
diff --git a/extensions/amp-ad-custom/OWNERS b/extensions/amp-ad-custom/OWNERS
index 94b65ebe76929..1b8c3b93f6d99 100644
--- a/extensions/amp-ad-custom/OWNERS
+++ b/extensions/amp-ad-custom/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-ad-custom/amp-ad-custom.md b/extensions/amp-ad-custom/amp-ad-custom.md
index e14140b78d107..334effc378a19 100644
--- a/extensions/amp-ad-custom/amp-ad-custom.md
+++ b/extensions/amp-ad-custom/amp-ad-custom.md
@@ -30,9 +30,9 @@ AMP template ads are an alternative way to serve valid AMPHTML ads without the c
 
 For any ad network to serve AMPHTML template ads, the integration consists of 3 parts:
 
-- AMPHTML Ad template creation
-- Ad server change: ad serving endpoint
-- Ads tag in AMP
+-   AMPHTML Ad template creation
+-   Ad server change: ad serving endpoint
+-   Ads tag in AMP
 
 ## AMPHTML Ad Template Creation
 
@@ -75,9 +75,9 @@ The ad network needs to provide a new serving endpoint that returns a CORS respo
 
 The response requires a couple of custom headers:
 
-- custom headers for CORS
-- AMP-Ad-Template-Extension: amp-mustache
-- Amp-Ad-Response-Type: template
+-   custom headers for CORS
+-   AMP-Ad-Template-Extension: amp-mustache
+-   Amp-Ad-Response-Type: template
 
 ## Ads tag
 
diff --git a/extensions/amp-ad-custom/validator-amp-ad-custom.protoascii b/extensions/amp-ad-custom/validator-amp-ad-custom.protoascii
index 9009cf4e80868..c6e5528bc029e 100644
--- a/extensions/amp-ad-custom/validator-amp-ad-custom.protoascii
+++ b/extensions/amp-ad-custom/validator-amp-ad-custom.protoascii
@@ -16,7 +16,6 @@
 tags: {  # amp-ad-custom
   html_format: AMP  # AMP only as ads are not allowed inside AMP Ads
   tag_name: "SCRIPT"
-  spec_name: "amp-ad-custom extension .js script"
   extension_spec: {
     name: "amp-ad-custom"
     version: "0.1"
diff --git a/extensions/amp-ad-exit/0.1/amp-ad-exit.js b/extensions/amp-ad-exit/0.1/amp-ad-exit.js
index 79e53a10f338b..1fb09c9abb98f 100644
--- a/extensions/amp-ad-exit/0.1/amp-ad-exit.js
+++ b/extensions/amp-ad-exit/0.1/amp-ad-exit.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {FilterType} from './filters/filter';
 import {HostServices} from '../../../src/inabox/host-services';
 import {
@@ -31,10 +31,10 @@ import {getData} from '../../../src/event-helper';
 import {getMode} from '../../../src/mode';
 import {getTopWindow} from '../../../src/service';
 import {isJsonScriptTag, openWindowDialog} from '../../../src/dom';
-import {isObject} from '../../../src/types';
+import {isObject} from '../../../src/core/types';
 import {makeClickDelaySpec} from './filters/click-delay';
 import {makeInactiveElementSpec} from './filters/inactive-element';
-import {parseJson} from '../../../src/json';
+import {parseJson} from '../../../src/core/types/object/json';
 import {parseUrlDeprecated} from '../../../src/url';
 
 const TAG = 'amp-ad-exit';
@@ -126,7 +126,9 @@ export class AmpAdExit extends AMP.BaseElement {
     const target = this.targets_[targetName];
     userAssert(target, `Exit target not found: '${targetName}'`);
     userAssert(event, 'Unexpected null event');
-    event = /** @type {!../../../src/service/action-impl.ActionEventDef} */ (event);
+    event = /** @type {!../../../src/service/action-impl.ActionEventDef} */ (
+      event
+    );
 
     event.preventDefault();
     if (
@@ -199,9 +201,9 @@ export class AmpAdExit extends AMP.BaseElement {
         if (customVarName[0] != '_') {
           continue;
         }
-        const customVar = /** @type {!./config.VariableDef} */ (target['vars'][
-          customVarName
-        ]);
+        const customVar = /** @type {!./config.VariableDef} */ (
+          target['vars'][customVarName]
+        );
         if (!customVar) {
           continue;
         }
@@ -375,7 +377,7 @@ export class AmpAdExit extends AMP.BaseElement {
           vars: target['vars'] || {},
           filters: (target['filters'] || [])
             .map((f) => this.userFilters_[f])
-            .filter((f) => f),
+            .filter(Boolean),
           behaviors: target['behaviors'] || {},
         };
         // Build a map of {vendor, origin} for 3p custom variables in the config
diff --git a/extensions/amp-ad-exit/0.1/test-e2e/test-amp-ad-exit.js b/extensions/amp-ad-exit/0.1/test-e2e/test-amp-ad-exit.js
index 1c4afa54f7915..d977d6e9e03a5 100644
--- a/extensions/amp-ad-exit/0.1/test-e2e/test-amp-ad-exit.js
+++ b/extensions/amp-ad-exit/0.1/test-e2e/test-amp-ad-exit.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'amp-ad-exit',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amphtml-ads/amp-ad-exit.amp.html',
+    fixture: 'amphtml-ads/amp-ad-exit.amp.html',
     environments: 'amp4ads-preset',
   },
   (env) => {
diff --git a/extensions/amp-ad-exit/0.1/test/filters/test-click-delay.js b/extensions/amp-ad-exit/0.1/test/filters/test-click-delay.js
index 85d86f76fb9c0..eb14572ffd5ce 100644
--- a/extensions/amp-ad-exit/0.1/test/filters/test-click-delay.js
+++ b/extensions/amp-ad-exit/0.1/test/filters/test-click-delay.js
@@ -17,7 +17,7 @@
 import {ClickDelayFilter} from '../../filters/click-delay';
 import {FilterType} from '../../filters/filter';
 
-describe('click-delay', () => {
+describes.sandboxed('click-delay', {}, (env) => {
   const DEFAULT_CONFIG = {
     type: FilterType.CLICK_DELAY,
     delay: 123,
@@ -26,7 +26,7 @@ describe('click-delay', () => {
 
   it('should use performance timing', () => {
     const win = {performance: {timing: {'navigationStart': 456}}};
-    window.sandbox.stub(Date, 'now').returns(123);
+    env.sandbox.stub(Date, 'now').returns(123);
     expect(
       new ClickDelayFilter('foo', DEFAULT_CONFIG, win).intervalStart
     ).to.equal(456);
@@ -57,7 +57,7 @@ describe('click-delay', () => {
               ).to.throw(win.err)
             );
           } else {
-            window.sandbox.stub(Date, 'now').returns(123);
+            env.sandbox.stub(Date, 'now').returns(123);
             expect(
               new ClickDelayFilter('foo', test.config, test.win).intervalStart
             ).to.equal(123);
@@ -72,7 +72,7 @@ describe('click-delay', () => {
       const filter = new ClickDelayFilter('foo', DEFAULT_CONFIG, {
         performance: {timing: {navigationStart: 1}},
       });
-      const nowStub = window.sandbox.stub(Date, 'now');
+      const nowStub = env.sandbox.stub(Date, 'now');
       nowStub.onFirstCall().returns(1001);
       expect(filter.filter()).to.be.true;
     });
@@ -81,7 +81,7 @@ describe('click-delay', () => {
       const filter = new ClickDelayFilter('foo', DEFAULT_CONFIG, {
         performance: {timing: {navigationStart: 1}},
       });
-      const nowStub = window.sandbox.stub(Date, 'now');
+      const nowStub = env.sandbox.stub(Date, 'now');
       nowStub.onFirstCall().returns(1);
       nowStub.onSecondCall().returns(125);
       expect(filter.filter()).to.be.false;
diff --git a/extensions/amp-ad-exit/0.1/test/test-amp-ad-exit.js b/extensions/amp-ad-exit/0.1/test/test-amp-ad-exit.js
index 46cf8ebd2b597..2ca50807eabf6 100644
--- a/extensions/amp-ad-exit/0.1/test/test-amp-ad-exit.js
+++ b/extensions/amp-ad-exit/0.1/test/test-amp-ad-exit.js
@@ -160,7 +160,7 @@ describes.realWin(
       json.setAttribute('type', 'application/json');
       el.appendChild(json);
       win.document.body.appendChild(el);
-      return el.build().then(() => el);
+      return el.buildInternal().then(() => el);
     }
 
     // Ad ad div or the relativeTo element cannot be found.
@@ -175,16 +175,18 @@ describes.realWin(
       win.document.body.appendChild(adDiv);
     }
 
-    function pointTo(target) {
-      element.implementation_.executeAction({
+    async function pointTo(target) {
+      const impl = await element.getImpl();
+      impl.executeAction({
         method: 'setVariable',
         args: {name: 'indirect', target},
         satisfiesTrust: () => true,
       });
     }
 
-    function exitIndirect() {
-      element.implementation_.executeAction({
+    async function exitIndirect() {
+      const impl = await element.getImpl();
+      impl.executeAction({
         method: 'exit',
         args: {variable: 'indirect', default: 'simple'},
         event: makeClickEvent(1001),
@@ -218,15 +220,16 @@ describes.realWin(
       el.appendChild(win.document.createElement('p'));
       win.document.body.appendChild(el);
       let promise;
-      allowConsoleError(() => (promise = el.build()));
+      allowConsoleError(() => (promise = el.buildInternal()));
       return promise.should.be.rejectedWith(/application\/json/);
     });
 
-    it('should do nothing for missing targets', () => {
+    it('should do nothing for missing targets', async () => {
       const open = env.sandbox.stub(win, 'open');
+      const impl = await element.getImpl();
       try {
         allowConsoleError(() =>
-          element.implementation_.executeAction({
+          impl.executeAction({
             method: 'exit',
             args: {target: 'not-a-real-target'},
             event: makeClickEvent(1001),
@@ -237,9 +240,10 @@ describes.realWin(
       } catch (expected) {}
     });
 
-    it('should stop event propagation', () => {
+    it('should stop event propagation', async () => {
       const event = makeClickEvent(1001);
-      element.implementation_.executeAction({
+      const impl = await element.getImpl();
+      impl.executeAction({
         method: 'exit',
         args: {target: 'twoSecondDelay'},
         event,
@@ -248,17 +252,18 @@ describes.realWin(
       expect(event.preventDefault).to.have.been.called;
     });
 
-    it('should reject fast clicks', () => {
+    it('should reject fast clicks', async () => {
       const open = env.sandbox.stub(win, 'open');
+      const impl = await element.getImpl();
 
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'simple'},
         event: makeClickEvent(999),
         satisfiesTrust: () => true,
       });
 
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'twoSecondDelay'},
         event: makeClickEvent(1000), // 1000 ms + 999 from the previous exit.
@@ -268,8 +273,8 @@ describes.realWin(
       expect(open).to.not.have.been.called;
     });
 
-    it('should use options.startTimingEvent', () => {
-      return makeElementWithConfig({
+    it('should use options.startTimingEvent', async () => {
+      const el = await makeElementWithConfig({
         targets: {
           navStart: {
             'finalUrl': 'http://localhost:8000/simple',
@@ -283,24 +288,25 @@ describes.realWin(
             delay: 2000,
           },
         },
-      }).then((el) => {
-        expect(el.implementation_.defaultFilters_.length).to.equal(2);
-        let clickFilter = el.implementation_.defaultFilters_[0];
-        expect(clickFilter.spec.type).to.equal(FilterType.CLICK_DELAY);
-        expect(clickFilter.spec.startTimingEvent).to.equal('navigationStart');
-        clickFilter = el.implementation_.userFilters_['twoSecond'];
-        expect(clickFilter).to.be.ok;
-        expect(clickFilter.spec.type).to.equal(FilterType.CLICK_DELAY);
-        expect(clickFilter.spec.startTimingEvent).to.equal('navigationStart');
       });
+      const impl = await el.getImpl();
+      expect(impl.defaultFilters_.length).to.equal(2);
+      let clickFilter = impl.defaultFilters_[0];
+      expect(clickFilter.spec.type).to.equal(FilterType.CLICK_DELAY);
+      expect(clickFilter.spec.startTimingEvent).to.equal('navigationStart');
+      clickFilter = impl.userFilters_['twoSecond'];
+      expect(clickFilter).to.be.ok;
+      expect(clickFilter.spec.type).to.equal(FilterType.CLICK_DELAY);
+      expect(clickFilter.spec.startTimingEvent).to.equal('navigationStart');
     });
 
-    it('should attempt new-tab navigation', () => {
+    it('should attempt new-tab navigation', async () => {
       const open = env.sandbox.stub(win, 'open').callsFake(() => {
         return {name: 'fakeWin'};
       });
+      const impl = await element.getImpl();
 
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'simple'},
         event: makeClickEvent(1001),
@@ -314,10 +320,11 @@ describes.realWin(
       );
     });
 
-    it('should fall back to top navigation', () => {
+    it('should fall back to top navigation', async () => {
       const open = env.sandbox.stub(win, 'open').callsFake(() => null);
+      const impl = await element.getImpl();
 
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'simple'},
         event: makeClickEvent(1001),
@@ -335,12 +342,13 @@ describes.realWin(
       );
     });
 
-    it('should attempt same-tab navigation', () => {
+    it('should attempt same-tab navigation', async () => {
       const open = env.sandbox.stub(win, 'open').callsFake(() => {
         return {name: 'fakeWin'};
       });
+      const impl = await element.getImpl();
 
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'clickTargetTest'},
         event: makeClickEvent(1001),
@@ -354,15 +362,16 @@ describes.realWin(
       );
     });
 
-    it('should ping tracking URLs with sendBeacon', () => {
+    it('should ping tracking URLs with sendBeacon', async () => {
       const open = env.sandbox.stub(win, 'open').callsFake(() => {
         return {name: 'fakeWin'};
       });
       const sendBeacon = env.sandbox
         .stub(win.navigator, 'sendBeacon')
         .callsFake(() => true);
+      const impl = await element.getImpl();
 
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'tracking'},
         event: makeClickEvent(1001),
@@ -385,10 +394,11 @@ describes.realWin(
       );
     });
 
-    it('should ping tracking URLs with image requests (no sendBeacon)', () => {
+    it('should ping tracking URLs with image requests (no sendBeacon)', async () => {
       const open = env.sandbox.stub(win, 'open').callsFake(() => {
         return {name: 'fakeWin'};
       });
+      const impl = await element.getImpl();
 
       let sendBeacon;
       if (win.navigator.sendBeacon) {
@@ -396,9 +406,10 @@ describes.realWin(
           .stub(win.navigator, 'sendBeacon')
           .callsFake(() => true);
       }
-      const createElement = env.sandbox.spy(win.document, 'createElement');
+      const {createElement} = win.document;
+      createElement.resetHistory();
 
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'tracking'},
         event: makeClickEvent(1001),
@@ -417,17 +428,19 @@ describes.realWin(
       }
     });
 
-    it('should ping tracking URLs with image requests (sendBeacon fails)', () => {
+    it('should ping tracking URLs with image requests (sendBeacon fails)', async () => {
       const open = env.sandbox.stub(win, 'open').callsFake(() => {
         return {name: 'fakeWin'};
       });
+      const impl = await element.getImpl();
 
       const sendBeacon = env.sandbox
         .stub(win.navigator, 'sendBeacon')
         .callsFake(() => false);
-      const createElement = env.sandbox.spy(win.document, 'createElement');
+      const {createElement} = win.document;
+      createElement.resetHistory();
 
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'tracking'},
         event: makeClickEvent(1001),
@@ -443,7 +456,7 @@ describes.realWin(
       expect(imgs[2].src).to.equal('http://localhost:8000/tracking?3');
     });
 
-    it('should ping tracking URLs with image requests (transport)', () => {
+    it('should ping tracking URLs with image requests (transport)', async () => {
       const config = {
         targets: EXIT_CONFIG.targets,
         filters: EXIT_CONFIG.filters,
@@ -451,37 +464,39 @@ describes.realWin(
           beacon: false,
         },
       };
-      return makeElementWithConfig(config).then((el) => {
-        const open = env.sandbox.stub(win, 'open').callsFake(() => {
-          return {name: 'fakeWin'};
-        });
-
-        const sendBeacon = env.sandbox
-          .stub(win.navigator, 'sendBeacon')
-          .callsFake(() => true);
-        const createElement = env.sandbox.spy(win.document, 'createElement');
+      const el = await makeElementWithConfig(config);
+      const impl = await el.getImpl();
+      const open = env.sandbox.stub(win, 'open').callsFake(() => {
+        return {name: 'fakeWin'};
+      });
 
-        el.implementation_.executeAction({
-          method: 'exit',
-          args: {target: 'tracking'},
-          event: makeClickEvent(1001),
-          satisfiesTrust: () => true,
-        });
+      const sendBeacon = env.sandbox
+        .stub(win.navigator, 'sendBeacon')
+        .callsFake(() => true);
+      const {createElement} = win.document;
+      createElement.resetHistory();
 
-        expect(open).to.have.been.calledOnce;
-        expect(sendBeacon).to.not.have.been.called;
-        expect(createElement.withArgs('img')).to.have.been.calledThrice;
-        const imgs = createElement.withArgs('img').returnValues;
-        expect(imgs[0].src).to.equal('http://localhost:8000/tracking?1');
-        expect(imgs[1].src).to.equal('http://localhost:8000/tracking?2');
-        expect(imgs[2].src).to.equal('http://localhost:8000/tracking?3');
+      impl.executeAction({
+        method: 'exit',
+        args: {target: 'tracking'},
+        event: makeClickEvent(1001),
+        satisfiesTrust: () => true,
       });
+
+      expect(open).to.have.been.calledOnce;
+      expect(sendBeacon).to.not.have.been.called;
+      expect(createElement.withArgs('img')).to.have.been.calledThrice;
+      const imgs = createElement.withArgs('img').returnValues;
+      expect(imgs[0].src).to.equal('http://localhost:8000/tracking?1');
+      expect(imgs[1].src).to.equal('http://localhost:8000/tracking?2');
+      expect(imgs[2].src).to.equal('http://localhost:8000/tracking?3');
     });
 
-    it('should replace standard URL variables', () => {
+    it('should replace standard URL variables', async () => {
       const open = env.sandbox.stub(win, 'open').callsFake(() => {
         return {name: 'fakeWin'};
       });
+      const impl = await element.getImpl();
 
       if (!win.navigator) {
         win.navigator = {sendBeacon: () => false};
@@ -490,7 +505,7 @@ describes.realWin(
         .stub(win.navigator, 'sendBeacon')
         .callsFake(() => true);
 
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'variables'},
         event: makeClickEvent(1001, 101, 102),
@@ -511,10 +526,11 @@ describes.realWin(
       expect(sendBeacon).to.have.been.calledWith(trackingMatcher, '');
     });
 
-    it('should replace custom URL variables with vars', () => {
+    it('should replace custom URL variables with vars', async () => {
       const open = env.sandbox.stub(win, 'open').callsFake(() => {
         return {name: 'fakeWin'};
       });
+      const impl = await element.getImpl();
 
       if (!win.navigator) {
         win.navigator = {sendBeacon: () => false};
@@ -523,7 +539,7 @@ describes.realWin(
         .stub(win.navigator, 'sendBeacon')
         .callsFake(() => true);
 
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {
           target: 'customVars',
@@ -550,21 +566,22 @@ describes.realWin(
       );
     });
 
-    it('border protection', () => {
+    it('border protection', async () => {
       const open = env.sandbox.stub(win, 'open').callsFake(() => {
         return {name: 'fakeWin'};
       });
+      const impl = await element.getImpl();
 
       win.innerWidth = 1000;
       win.innerHeight = 2000;
       // Replace the getVsync function so that the measure can happen at once.
-      element.implementation_.getVsync = () => {
+      impl.getVsync = () => {
         return {measure: (callback) => callback()};
       };
-      element.implementation_.onLayoutMeasure();
+      impl.onLayoutMeasure();
 
       // The click is within the top border.
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'borderProtection'},
         event: makeClickEvent(1001, 500, 8),
@@ -572,7 +589,7 @@ describes.realWin(
       });
 
       // The click is within the right border.
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'borderProtection'},
         event: makeClickEvent(1001, 993, 500),
@@ -580,7 +597,7 @@ describes.realWin(
       });
 
       // The click is within the bottom border.
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'borderProtection'},
         event: makeClickEvent(1001, 500, 1992),
@@ -591,7 +608,7 @@ describes.realWin(
 
       // The click is within the left border but left border protection is not
       // set.
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'borderProtection'},
         event: makeClickEvent(1001, 8, 500),
@@ -599,7 +616,7 @@ describes.realWin(
       });
 
       // THe click is not within the border area.
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'borderProtection'},
         event: makeClickEvent(1001, 500, 500),
@@ -612,19 +629,20 @@ describes.realWin(
       );
     });
 
-    it('border protection relative to div', () => {
+    it('border protection relative to div', async () => {
       const open = env.sandbox.stub(win, 'open').callsFake(() => {
         return {name: 'fakeWin'};
       });
+      const impl = await element.getImpl();
 
       // Replace the getVsync function so that the measure can happen at once.
-      element.implementation_.getVsync = () => {
+      impl.getVsync = () => {
         return {measure: (callback) => callback()};
       };
-      element.implementation_.onLayoutMeasure();
+      impl.onLayoutMeasure();
 
       // The click is within the top border.
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'borderProtectionRelativeTo'},
         event: makeClickEvent(1001, 200, 208),
@@ -632,7 +650,7 @@ describes.realWin(
       });
 
       // The click is within the right border.
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'borderProtectionRelativeTo'},
         event: makeClickEvent(1001, 293, 300),
@@ -640,7 +658,7 @@ describes.realWin(
       });
 
       // The click is within the bottom border.
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'borderProtectionRelativeTo'},
         event: makeClickEvent(1001, 200, 392),
@@ -651,7 +669,7 @@ describes.realWin(
 
       // The click is within the left border but left border protection is not
       // set.
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'borderProtectionRelativeTo'},
         event: makeClickEvent(1001, 103, 300),
@@ -659,7 +677,7 @@ describes.realWin(
       });
 
       // THe click is not within the border area.
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'borderProtectionRelativeTo'},
         event: makeClickEvent(1001, 200, 300),
@@ -672,11 +690,12 @@ describes.realWin(
       );
     });
 
-    it('should not trigger for amp-carousel buttons', () => {
+    it('should not trigger for amp-carousel buttons', async () => {
       const open = env.sandbox.stub(win, 'open');
+      const impl = await element.getImpl();
       const fakeCarouselButton = document.createElement('div');
       fakeCarouselButton.classList.add('amp-carousel-button');
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'simple'},
         event: makeClickEvent(1001, 200, 300, fakeCarouselButton),
@@ -685,18 +704,19 @@ describes.realWin(
       expect(open).to.not.have.been.called;
     });
 
-    it('should not trigger for elements matching InactiveElementFilter', () => {
+    it('should not trigger for elements matching InactiveElementFilter', async () => {
       const open = env.sandbox.stub(win, 'open');
+      const impl = await element.getImpl();
       const unclickable = document.createElement('span');
       unclickable.id = 'unclickable';
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'inactiveElementTest'},
         event: makeClickEvent(1001, 200, 300, unclickable),
         satisfiesTrust: () => true,
       });
       expect(open).to.not.have.been.called;
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'inactiveElementTest'},
         event: makeClickEvent(1001, 200, 300, win.document.body),
@@ -705,10 +725,11 @@ describes.realWin(
       expect(open).to.have.been.called;
     });
 
-    it('should replace custom URL variables with 3P Analytics defaults', () => {
+    it('should replace custom URL variables with 3P Analytics defaults', async () => {
       const open = env.sandbox.stub(win, 'open').returns({name: 'fakeWin'});
+      const impl = await element.getImpl();
 
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'variableFrom3pAnalytics'},
         event: makeClickEvent(1004),
@@ -721,17 +742,18 @@ describes.realWin(
       );
     });
 
-    it('should replace custom URL variables with 3P Analytics signals', () => {
+    it('should replace custom URL variables with 3P Analytics signals', async () => {
       const open = env.sandbox.stub(win, 'open').callsFake(() => {
         return {name: 'fakeWin'};
       });
+      const impl = await element.getImpl();
 
-      element.implementation_.vendorResponses_[TEST_3P_VENDOR] = {
+      impl.vendorResponses_[TEST_3P_VENDOR] = {
         'unused': 'unused',
         'collected-data': 'abc123',
       };
 
-      element.implementation_.executeAction({
+      impl.executeAction({
         method: 'exit',
         args: {target: 'variableFrom3pAnalytics'},
         event: makeClickEvent(1005),
@@ -763,9 +785,8 @@ describes.realWin(
       doc.body.appendChild(ampAd);
       const adFrame = doc.createElement('iframe');
       ampAd.appendChild(adFrame);
-      const ampAdExitElement = adFrame.contentDocument.createElement(
-        'amp-ad-exit'
-      );
+      const ampAdExitElement =
+        adFrame.contentDocument.createElement('amp-ad-exit');
       adFrame.contentDocument.body.appendChild(ampAdExitElement);
       installTimerService(frame.contentWindow);
       installPlatformService(frame.contentWindow);
@@ -775,11 +796,11 @@ describes.realWin(
       );
     });
 
-    it('should exit to the default target if varible target is never set', () => {
+    it('should exit to the default target if varible target is never set', async () => {
       const open = env.sandbox.stub(win, 'open').callsFake(() => {
         return {name: 'fakeWin'};
       });
-      exitIndirect();
+      await exitIndirect();
       expect(open).to.have.been.calledOnce;
       expect(open).to.have.been.calledWith(
         EXIT_CONFIG.targets.simple.finalUrl,
@@ -787,10 +808,11 @@ describes.realWin(
       );
     });
 
-    it('should cause error when variable target is never set and default value is not provided', () => {
+    it('should cause error when variable target is never set and default value is not provided', async () => {
+      const impl = await element.getImpl();
       try {
         allowConsoleError(() => {
-          element.implementation_.executeAction({
+          impl.executeAction({
             method: 'exit',
             args: {
               variable: 'indirect',
@@ -805,10 +827,15 @@ describes.realWin(
       expect.fail();
     });
 
-    it('should cause error when variable target was pointed to an invalid target', () => {
+    it('should cause error when variable target was pointed to an invalid target', async () => {
+      const impl = await element.getImpl();
       try {
         allowConsoleError(() => {
-          pointTo('not-a-real-target');
+          impl.executeAction({
+            method: 'setVariable',
+            args: {name: 'indirect', target: 'not-a-real-target'},
+            satisfiesTrust: () => true,
+          });
         });
       } catch (expected) {
         return;
@@ -816,10 +843,11 @@ describes.realWin(
       expect.fail();
     });
 
-    it('should cause error when exiting to an invalid variable target', () => {
+    it('should cause error when exiting to an invalid variable target', async () => {
+      const impl = await element.getImpl();
       try {
         allowConsoleError(() => {
-          element.implementation_.executeAction({
+          impl.executeAction({
             method: 'exit',
             args: {variable: 'not-a-real-target', default: 'not-a-real-target'},
             event: makeClickEvent(1001),
@@ -832,10 +860,11 @@ describes.realWin(
       expect.fail();
     });
 
-    it('should cause error when neither "target" nor "variable" is provided in arguments', () => {
+    it('should cause error when neither "target" nor "variable" is provided in arguments', async () => {
+      const impl = await element.getImpl();
       try {
         allowConsoleError(() => {
-          element.implementation_.executeAction({
+          impl.executeAction({
             method: 'exit',
             args: {},
             event: makeClickEvent(1001),
@@ -848,10 +877,11 @@ describes.realWin(
       expect.fail();
     });
 
-    it('should cause error when both "target" and "variable" are provided in arguments', () => {
+    it('should cause error when both "target" and "variable" are provided in arguments', async () => {
+      const impl = await element.getImpl();
       try {
         allowConsoleError(() => {
-          element.implementation_.executeAction({
+          impl.executeAction({
             method: 'exit',
             args: {
               target: 'customVars',
@@ -868,10 +898,11 @@ describes.realWin(
       expect.fail();
     });
 
-    it('should exit to the pointed-to target and work with custom URL variables', () => {
+    it('should exit to the pointed-to target and work with custom URL variables', async () => {
       const open = env.sandbox.stub(win, 'open').callsFake(() => {
         return {name: 'fakeWin'};
       });
+      const impl = await element.getImpl();
       if (!win.navigator) {
         win.navigator = {sendBeacon: () => false};
       }
@@ -879,16 +910,16 @@ describes.realWin(
         .stub(win.navigator, 'sendBeacon')
         .callsFake(() => true);
 
-      pointTo('clickTargetTest');
-      exitIndirect();
+      await pointTo('clickTargetTest');
+      await exitIndirect();
       expect(open).to.have.been.calledOnce;
       expect(open).to.have.been.calledWith(
         EXIT_CONFIG.targets.clickTargetTest.finalUrl,
         '_top'
       );
 
-      pointTo('customVars');
-      element.implementation_.executeAction({
+      await pointTo('customVars');
+      impl.executeAction({
         method: 'exit',
         args: {
           variable: 'indirect',
diff --git a/extensions/amp-ad-exit/0.1/test/validator-amp4ads-amp-ad-exit.out b/extensions/amp-ad-exit/0.1/test/validator-amp4ads-amp-ad-exit.out
index 4adb8d9eb297e..c8e5d8880bc1e 100644
--- a/extensions/amp-ad-exit/0.1/test/validator-amp4ads-amp-ad-exit.out
+++ b/extensions/amp-ad-exit/0.1/test/validator-amp4ads-amp-ad-exit.out
@@ -53,7 +53,7 @@ FAIL
 |  <!-- Invalid: wrong layout -->
 |  <amp-ad-exit id="exit-api-layoutfill" layout="fill">
 >> ^~~~~~~~~
-amp-ad-exit/0.1/test/validator-amp4ads-amp-ad-exit.html:53:0 The specified layout 'FILL' is not supported by tag 'amp-ad-exit'. (see https://amp.dev/documentation/components/amp-ad-exit)
+amp-ad-exit/0.1/test/validator-amp4ads-amp-ad-exit.html:53:0 The specified layout 'FILL' is not supported by tag 'amp-ad-exit'. (see https://amp.dev/documentation/components/amp-ad-exit/)
 |  <script type="application/json">
 |  {"targets": {"target1": {"finalUrl": "http://example.com/"}}}
 |  </script>
@@ -61,13 +61,13 @@ amp-ad-exit/0.1/test/validator-amp4ads-amp-ad-exit.html:53:0 The specified layou
 |  <!-- Invalid: non-script children -->
 |  <amp-ad-exit id="exit-api-children">
 >> ^~~~~~~~~
-amp-ad-exit/0.1/test/validator-amp4ads-amp-ad-exit.html:59:0 Tag 'amp-ad-exit' must have 1 child tags - saw 2 child tags. (see https://amp.dev/documentation/components/amp-ad-exit)
+amp-ad-exit/0.1/test/validator-amp4ads-amp-ad-exit.html:59:0 Tag 'amp-ad-exit' must have 1 child tags - saw 2 child tags. (see https://amp.dev/documentation/components/amp-ad-exit/)
 |  <script type="application/json">
 |  {"targets": {"target1": {"finalUrl": "http://example.com/"}}}
 |  </script>
 |  <p>p</p>
 >> ^~~~~~~~~
-amp-ad-exit/0.1/test/validator-amp4ads-amp-ad-exit.html:63:0 Tag 'p' is disallowed as child of tag 'amp-ad-exit'. Child tag must be one of ['script']. (see https://amp.dev/documentation/components/amp-ad-exit)
+amp-ad-exit/0.1/test/validator-amp4ads-amp-ad-exit.html:63:0 Tag 'p' is disallowed as child of tag 'amp-ad-exit'. Child tag must be one of ['script']. (see https://amp.dev/documentation/components/amp-ad-exit/)
 |  </amp-ad-exit>
 |
 |  </amp-ad-exit>
diff --git a/extensions/amp-ad-exit/OWNERS b/extensions/amp-ad-exit/OWNERS
index 94b65ebe76929..1b8c3b93f6d99 100644
--- a/extensions/amp-ad-exit/OWNERS
+++ b/extensions/amp-ad-exit/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-ad-exit/amp-ad-exit.md b/extensions/amp-ad-exit/amp-ad-exit.md
index 90faaf6fe0180..93b4bee709325 100644
--- a/extensions/amp-ad-exit/amp-ad-exit.md
+++ b/extensions/amp-ad-exit/amp-ad-exit.md
@@ -7,6 +7,10 @@ teaser:
   text: Provides configurable behavior for ad exits for AMPHTML ads.
 ---
 
+# amp-ad-exit
+
+Provides configurable ad exit behavior for AMPHTML ads.
+
 <!--
 Copyright 2017 The AMP HTML Authors. All Rights Reserved.
 
@@ -23,95 +27,40 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-# amp-ad-exit
+## Usage
 
-## Overview
+Use the `amp-ad-exit` component to expose an “exit” action to other elements
+in the [AMPHTML ad](https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec).
 
-The `amp-ad-exit` element is configured with a JSON child script element and
-exposes an "exit" action to other elements in the [AMPHTML ad)](https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec). Elements can be annotated to exit when tapped, passing a target name and extra URL parameter values to insert. The exit action performs these steps:
+Configure the `amp-ad-exit` component with a JSON child script element. Use
+the component to annotate other elements to exit when tapped and pass a target
+name and extra URL parameters to the user's browser. The exit action performs
+the following steps:
 
-1. Parse the JSON config (if it hasn't yet been parsed).
-2. Find the requested exit target.
-3. Determine whether the exit should be allowed by processing the click event through declared filters.
-4. Rewrite URL variables (see [Variable Substitution](#variable-substitution))
-5. Ping any click tracking URLs.
-6. Perform the navigation by opening the target URL in a new tab.
+1. Parse the JSON config if it hasn't already been parsed.
+1. Find the requested exit target.
+1. Process the click event through declared filters to determine whether the
+   exit should be allowed.
+1. Rewrite [URL variables](https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad-exit/amp-ad-exit.md#variable-substitution).
+1. Ping click-tracking URLs.
+1. Open the target URL in a new tab.
 
-## Example
+### Configuration spec
 
-```html
-<amp-ad-exit id="exit-api">
-  <script type="application/json">
-    {
-      "targets": {
-        "landingPage": {
-          "finalUrl": "https://example.com/artisan-baking/?from=_clickArea",
-          "vars": {
-            "_clickArea": {
-              "defaultValue": "headline"
-            }
-          }
-        },
-        "flour": {
-          "finalUrl": "https://adclickserver.example.com/click?id=af319adec901&x=CLICK_X&y=CLICK_Y&adurl=https://example.com/artisan-baking/flour",
-          "filters": ["3sClick", "borderProtection"],
-          "behaviors": {
-            "clickTarget": "_top"
-          }
-        },
-        "bannetons": {
-          "finalUrl": "https://example.com/artisan-baking/bannetons",
-          "trackingUrls": [
-            "https://adclickserver.example.com/click?id=af319adec901&x=CLICK_X&y=CLICK_Y",
-            "https://tracker.adnetwork.example.com/?url=example.com"
-          ],
-          "filters": ["3sClick", "borderProtection"]
-        }
-      },
-      "filters": {
-        "3sClick": {
-          "type": "clickDelay",
-          "delay": 3000
-        },
-        "borderProtection": {
-          "type": "clickLocation",
-          "top": 10,
-          "right": 10,
-          "bottom": 10,
-          "left": 10
-        }
-      }
-    }
-  </script>
-</amp-ad-exit>
+See the `AmpAdExitConfig` typedef in
+[config.js](https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad-exit/0.1/config.js)
+for a configuration spec.
 
-<h1 on="tap:exit-api.exit(target='landingPage')">Artisan Baking Supplies</h1>
-<div id="product0" on="tap:exit-api.exit(target='flour')">
-  <p>Rye flour</p>
-  <amp-img src="..." width="..." height="..."></amp-img>
-</div>
-<div id="product1" on="tap:exit-api.exit(target='bannetons')">
-  <p>Bannetons</p>
-  <amp-img src="..." width="..." height="..."></amp-img>
-</div>
-<div
-  id="footer"
-  on="tap:exit-api.exit(target='landingPage', _clickArea='footer')"
->
-  example.com/artisan-baking
-</div>
-```
-
-## Filters
+### Filters
 
-Filters are specified in the `filters` section of the config. Targets reference
-filters by their property name in the `filters` section.
+You can specify filters in the `filters` section of your config. You can then
+reference these filters by their property name in the `filters` section.
 
-There are three types of filters: location-based, time-based, and element-based. Other filters (such as a confirmation prompt) could be added as needed.
+There are three primary types of filters: location-based, time-based, and element-based. Other filters, such as a confirmation prompt, can be added as needed.
 
-### clickLocation filter
+#### clickLocation filter
 
-The `clickLocation` filter type specifies the minimum distance a click must be from the edges of the creative or the edges of a specific element in the creative. The clickLocation filter may have the following properties:
+The `clickLocation` filter specifies the minimum distance a click must be from the edges of the creative or the edges of a specific element in the creative. The `clickLocation` filter may have the following properties:
 
 <table>
   <tr>
@@ -120,35 +69,53 @@ The `clickLocation` filter type specifies the minimum distance a click must be f
     <th>Meaning</th>
   </tr>
   <tr>
-    <td class="col-thirty"><code>top</code></td>
-    <td class="col-twenty"><code>number</code></td>
-    <td>Distance in px from the top edge. Default is 0.</td>
+    <td><code>top</code></td>
+    <td>number</td>
+    <td>The distance in px from the top edge. Specify to overwrite the default
+      value of 0.</td>
   </tr>
   <tr>
     <td><code>right</code></td>
-    <td><code>number</code></td>
-    <td>Distance in px from the right edge. Default is 0.</td>
+    <td>number</td>
+    <td>The distance in px from the right edge. Specify to overwrite the
+      default value of 0.</td>
   </tr>
   <tr>
     <td><code>bottom</code></td>
-    <td><code>number</code></td>
-    <td>Distance in px from the bottom edge. Default is 0.</td>
+    <td>number</td>
+    <td>The distance in px from the bottom edge. Specify to overwrite the
+      default value of 0.</td>
   </tr>
   <tr>
     <td><code>left</code></td>
-    <td><code>number</code></td>
-    <td>Distance in px from the left edge. Default is 0.</td>
+    <td>number</td>
+    <td>The distance in px from the left edge. Specify to overwrite the default
+      value of 0.</td>
   </tr>
   <tr>
     <td><code>relativeTo</code></td>
-    <td><code>string</code></td>
-    <td>Selects the element to use for edge boundaries. The full creative <code>body</code> is used if this is not specified. The selected element does not need to be the element that triggers the exit. The selected element must be in a fixed position for the life of the creative (no resizing, repositioning, etc.). Selector must use CSS selector syntax. </td>
+    <td>string</td>
+    <td>
+      <p>Selects the element to use for edge boundaries. If unspecified, the
+        full <code>body</code> of the creative is used by default.</p>
+      <ul>
+        <li>The selected element doesn't need to be the element that triggers
+          the exit.</li>
+        <li>The selected element must be in a fixed position for the life of
+          the creative.</li>
+        <li>The selector must use CSS selector syntax.</li>
+      </ul>
+    </td>
   </tr>
 </table>
 
-### clickDelay filter
+#### clickDelay filter
 
-The `clickDelay` filter type specifies the time to wait before responding to clicks. The `amp-ad-exit` element imposes a minimum delay of 1 second on all exits. The `clickDelay` filter requires the following properties:
+The `clickDelay` filter type specifies the amount of time to wait before clicks
+are responded to. Keep in mind that `amp-ad-exit` imposes a minimum delay of 1
+second on all exits.
+
+The `clickDelay` filter requires the following properties:
 
 <table>
   <tr>
@@ -157,18 +124,27 @@ The `clickDelay` filter type specifies the time to wait before responding to cli
     <th>Meaning</th>
   </tr>
   <tr>
-    <td class="col-thirty"><code>delay</code></td>
-    <td class="col-twenty"><code>number</code></td>
+    <td><code>delay</code></td>
+    <td>number</td>
     <td>Time in ms to reject any clicks after entering the viewport.</td>
   </tr>
   <tr>
-    <td class="col-thirty"><code>startTimingEvent</code></td>
-    <td class="col-twenty"><code>string</code></td>
-    <td>Based on window performance timing, name of event to use as delay start interval (e.g. navigationStart).</td>
+    <td>`startTimingEvent`</td>
+    <td>string</td>
+    <td>The name of an event to use as a delay start interval, such as
+      <code>navigationStart</code>. Based on window performance timing.</td>
   </tr>
 </table>
 
-Note that the default 1 second click delay uses time from extension load as interval. However, this can be overridden to use startTimingEvent value via options object in the root of the config. All other click filters will use the startTimingEvent if a value is not explicitly given. Example:
+> Note: The default 1 second click delay uses extension load time as an
+> interval. However, this can be overridden to use the `startTimingEvent`
+> value. Use the `options` object in the root of the config for this purpose.
+> If a value isn't explicitly given, all other click filters use the
+> `startTimingEvent`.
+
+##### Example
+
+In the following example, the default click protection imposes a 1 second delay from `navigationStart` with two additional, specified click protections of 2 seconds from `navigationStart` and 3 seconds from `DOMContentLoaded` start.
 
 ```html
 <amp-ad-exit id="exit-api">
@@ -199,28 +175,28 @@ Note that the default 1 second click delay uses time from extension load as inte
 </amp-ad-exit>
 ```
 
-In this case, the default click protection will impose a 1 second delay from navigationStart with two additional, specified click protections of 2 seconds from navigationStart and 3 seconds from DOMContentLoaded start.
+#### inactiveElement filter
 
-### inactiveElement filter
+The `inactiveElement` filter type specifies elements that shouldn't cause an exit when they're the source of an event. Remember that, by default, `amp-ad-exit` ignores clicks on the previous and next buttons of an `amp-carousel`.
 
-The `inactiveElement` filter type specifies elements that should not cause exits when they are the source of an event. The `amp-ad-exit` element ignores clicks on the previous/next buttons of an `amp-carousel` by default. The `inactiveElement` filter requires the following properties:
+The `inactiveElement` filter requires the following property:
 
 <table>
   <tr>
     <th>Property</th>
     <th>Value</th>
-    <th>Meaning</th>
+    <th>Description</th>
   </tr>
   <tr>
-    <td class="col-thirty"><code>selector</code></td>
-    <td class="col-twenty"><code>string</code></td>
-    <td>A CSS selector. If the event that triggers an exit has a `target` that matches the selector, the exit will not be performed.</td>
+    <td><code>selector</code></td>
+    <td>string</td>
+    <td>A CSS selector. If the event that triggers an exit has a `target` that matches the selector, the exit isn't performed.</td>
   </tr>
 </table>
 
-_Example: Using filters_
+##### Example
 
-```json
+```css
 {
   "targets": {
     "ad": {
@@ -259,15 +235,16 @@ _Example: Using filters_
 }
 ```
 
-## Click tracking URLs
+### Click-tracking URLs
 
-Navigation targets can be associated with click tracking URLs in the config.
-Before navigation, amp-ad-exit attempts to ping the tracking URLs by using:
+Navigation targets can be associated with click-tracking URLs in the config.
+Before navigation, `amp-ad-exit` attempts to use the following to ping the
+tracking URLs:
 
-1. `navigator.sendBeacon`, if available
-2. image request
+-   `navigator.sendBeacon`, if available
+-   image request
 
-You can override this behavior with a "transport" object on the config:
+You can override this behavior with a `"transport"` object on the config, such as in this example:
 
 ```json
 {
@@ -279,13 +256,14 @@ You can override this behavior with a "transport" object on the config:
 }
 ```
 
-## Variable Substitution
+### Variable Substitution
 
-URL variable substitution works like standard [AMP variable substitution](../../spec/amp-var-substitutions.md) with
-custom variables and a limited set of platform variables. Variable substitution
-applies to navigation URLs and click tracking URLs.
+Variable substitution applies to navigation URLs and click-tracking URLs. URL
+variable substitution works like standard
+[AMP variable substitution](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md)
+with custom variables and a limited set of platform variables.
 
-### Platform variables
+#### Platform variables
 
 <table>
   <tr>
@@ -293,34 +271,26 @@ applies to navigation URLs and click tracking URLs.
     <th>Value</th>
   </tr>
   <tr>
-    <td>RANDOM</td>
-    <td>A random float. See <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#random">RANDOM</a>.</td>
+    <td><code>RANDOM</code></td>
+    <td>A <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md#random">random</a> float.</td>
   </tr>
   <tr>
-    <td>CLICK_X</td>
+    <td><code>CLICK_X</code></td>
     <td>The <code>x</code> coordinate of the click in the viewport.</td>
   </tr>
   <tr>
-    <td>CLICK_Y</td>
+    <td><code>CLICK_Y</code></td>
     <td>The <code>y</code> coordinate of the click in the viewport.</td>
   </tr>
 </table>
 
 ### Custom variables
 
-Custom variables must begin with an underscore. Define variables in the
-config alongside the navigation target. Variables should have a `"defaultValue"`
-property. The default value can be overridden in the `exit` action invocation:
+Custom variables must begin with an underscore. Define variables in the config alongside the navigation target. Variables should have a `"defaultValue"` property. You can override the default value in the `exit` action invocation.
 
-Variable values can also come from 3P analytics. Use
-`<amp-analytics type='example-3p-vendor'>` to install a 3P analytics
-vendor iframe and reference it in the variable definition with the
-`"iframeTransportSignal"` property. The format of `"iframeTransportSignal"` is
-`"IFRAME_TRANSPORT_SIGNAL(example-3p-vendor,collected-data)"`, where `example-3p-vendor`
-is the name of the vendor and `collected-data` is a key in the message from the
-vendor iframe. There must not be a space after the comma.
+Variable values can also come from 3P analytics. Use `<amp-analytics type='example-3p-vendor'>` to install a 3P analytics vendor iframe and reference it in the variable definition with the `"iframeTransportSignal"` property. The format of `"iframeTransportSignal"` is `"IFRAME_TRANSPORT_SIGNAL(example-3p-vendor,collected-data)"`, where `example-3p-vendor` is the name of the vendor and `collected-data` is a key in the message from the vendor iframe. Don't place a space after the comma between the two.
 
-Example:
+Conventionally, user-defined variables should be in `_camelCase`, and system variables in `ALL_CAPS`.
 
 ```html
 <amp-ad-exit id="exit-api"
@@ -351,31 +321,99 @@ Example:
 >
 ```
 
-By convention, user-defined variables should be in `_camelCase`. System
-variables are in `ALL_CAPS`.
+> Caution: Be careful with your variable names. Substitution works by simple
+> string replacement. Any occurrence of the variable in the URL is replaced.
+> For example, if you define a custom variable named "\_b" with value "foo",
+> `/?a_b_c=_b` will become `/?afoo_c=foo`.
 
-{% call callout('Warning', type='caution') %}
-Be careful with your variable names. Substitution works by simple
-string replacement. _Any_ occurrence of the variable in the URL will be
-replaced. For example, if you define a custom variable named "\_b" with value
-"foo", `/?a_b_c=_b` will become `/?afoo_c=foo`.
-{% endcall %}
+### Behaviors
 
-## Behaviors
+Behaviors specify additional properties of the `exit` action.
 
-Behaviors specify additional properties of the exit action.
+#### clickTarget
 
-### Click Target
+The `clickTarget` behavior specifies where a target's click should try to open. A click defaults to open in a new tab if that's possible in the environment. If set to `"_top"`, a user can specify that the click should open in the same tab. If this is set to anything other than `"_top"`, it opens in a new tab.
 
-The `clickTarget` behavior specifies where a target's click should try to open. A click defaults to opening a new tab, if it is possible in the environment. With this behavior a user can specify that the click should try open the same tab, by setting this to `"_top"`. If this is not set to `"_top"`, then it will fall back to opening a new tab.
+##### Example
 
-## Actions
+```html
+<amp-ad-exit id="exit-api">
+  <script type="application/json">
+    {
+      "targets": {
+        "landingPage": {
+          "finalUrl": "https://example.com/artisan-baking/?from=_clickArea",
+          "vars": {
+            "_clickArea": {
+              "defaultValue": "headline"
+            }
+          }
+        },
+        "flour": {
+          "finalUrl": "https://adclickserver.example.com/click?id=af319adec901&x=CLICK_X&y=CLICK_Y&adurl=https://example.com/artisan-baking/flour",
+          "filters": ["3sClick", "borderProtection"],
+          "behaviors": {
+            "clickTarget": "_top"
+          }
+        },
+        "bannetons": {
+          "finalUrl": "https://example.com/artisan-baking/bannetons",
+          "trackingUrls": [
+            "https://adclickserver.example.com/click?id=af319adec901&x=CLICK_X&y=CLICK_Y",
+            "https://tracker.adnetwork.example.com/?url=example.com"
+          ],
+          "filters": ["3sClick", "borderProtection"]
+        }
+      },
+      "filters": {
+        "3sClick": {
+          "type": "clickDelay",
+          "delay": 3000
+        },
+        "borderProtection": {
+          "type": "clickLocation",
+          "top": 10,
+          "right": 10,
+          "bottom": 10,
+          "left": 10
+        }
+      }
+    }
+  </script>
+</amp-ad-exit>
 
-### `setVariable` action
+<h1 on="tap:exit-api.exit(target='landingPage')">Artisan Baking Supplies</h1>
+<div id="product0" on="tap:exit-api.exit(target='flour')">
+  <p>Rye flour</p>
+  <amp-img src="..." width="..." height="..."></amp-img>
+</div>
+<div id="product1" on="tap:exit-api.exit(target='bannetons')">
+  <p>Bannetons</p>
+  <amp-img src="..." width="..." height="..."></amp-img>
+</div>
+<div
+  id="footer"
+  on="tap:exit-api.exit(target='landingPage', _clickArea='footer')"
+>
+  example.com/artisan-baking
+</div>
+```
 
-`amp-ad-exit` also supports variable targets. The variable targets do not define exit URLs by themselves, but instead point to one of the named `NavigationTarget`s in the `ExitConfig`. Not to be confused with the URL custom variables, these are state variables maintained by the `amp-ad-exit` element that can be updated at runtime which enable stateful exit behavior. See the example below.
+## Attributes
 
-`setVariable` action is used to set up the mapping from a state variable to a named `NavigationTarget` in the `ExitConfig`.
+### Id
+
+An `id` is required so that `amp-exit` can be referenced by tappable elements.
+
+## Actions
+
+### setVariable
+
+`amp-ad-exit` also supports variable targets. The variable targets don't
+define exit URLs by themselves. Instead, they point to a named
+`NavigationTarget` in the `ExitConfig`. Don't confuse these with URL custom
+variables. These are state variables that are maintained by the `amp-ad-exit`
+element. They can be updated at runtime to enable stateful exit behavior.
 
 <table>
   <tr>
@@ -384,20 +422,21 @@ The `clickTarget` behavior specifies where a target's click should try to open.
     <th>Meaning</th>
   </tr>
   <tr>
-    <td class="col-thirty"><code>name</code></td>
-    <td class="col-thirty"><code>string</code></td>
+    <td><code>name</code></td>
+    <td>string</td>
     <td>The name of the state variable.</td>
   </tr>
   <tr>
-    <td class="col-thirty"><code>target</code></td>
-    <td class="col-thirty"><code>string</code></td>
-    <td>The name of the <code>NavigationTarget</code> in the <code>ExitConfig</code> that this state variable points to.</td>
+    <td><code>target</code></td>
+    <td>string</td>
+    <td>The name of the `NavigationTarget` in the <code>ExitConfig</code> that
+      this state variable points to.</td>
   </tr>
 </table>
 
-### `exit` action
+### exit
 
-The `amp-ad-exit` element exposes an `exit` action that other elements reference in `on="tap:..."` attributes. The action accepts a "target" string parameter that must match a named `NavigationTarget` in the `ExitConfig`, or a "variable" string parameter which is a state variable that points to a `NavigationTarget`. Custom variables beginning with an underscore can also be passed in.
+The `amp-ad-exit` element exposes an `exit` action that other elements reference in `on="tap:..." attributes`. The action accepts a `"target"` string parameter that must match a named `NavigationTarget` in the `ExitConfig`, or a `"variable"` string parameter which is a state variable that points to a `NavigationTarget`. Custom variables that begin with an underscore can also be passed in.
 
 <table>
   <tr>
@@ -406,32 +445,35 @@ The `amp-ad-exit` element exposes an `exit` action that other elements reference
     <th>Meaning</th>
   </tr>
   <tr>
-    <td class="col-thirty"><code>target</code></td>
-    <td class="col-thirty"><code>string</code></td>
-    <td>The name of a  <code>NavigationTarget</code> in the <code>ExitConfig</code>.</td>
+    <td><code>target</code></td>
+    <td>string</td>
+    <td>The name of the state variable.</td>
   </tr>
   <tr>
-    <td class="col-thirty"><code>variable</code></td>
-    <td class="col-thirty"><code>string</code></td>
-    <td>The name of a state variable.</td>
+    <td><code>variable</code></td>
+    <td>string</td>
+    <td>The name of the `NavigationTarget` in the `ExitConfig` that this state
+      variable points to.</td>
   </tr>
   <tr>
-    <td class="col-thirty"><code>default</code></td>
-    <td class="col-thirty"><code>string</code></td>
-    <td>The name of the default <code>NavigationTarget</code> that the state variable points to when it's never set, only meaningful when <code>variable</code> is used.</td>
+    <td><code>default`</code></td>
+    <td>string</td>
+    <td>The name of the default `NavigationTarget` that the state variable
+      should point to when it's not set. This is only meaningful when the
+      variable is used.</td>
   </tr>
   <tr>
     <td><code>_[a-zA-Z0-9_-]+</code></td>
-    <td><code>string|boolean|number</code></td>
-    <td>Replace the URL parameter with this name and value into the final and tracking URLs.</td>
+    <td>string, boolean, or number</td>
+    <td>Replace the URL parameter in the final and tracking URLs with this name
+      and value.</td>
   </tr>
 </table>
 
-{% call callout('Warning', type='caution') %}
-When triggering the `exit` action, either `target` or `variable` should be provided, but not both, e.g. `exit(target='product1')` or `exit(variable='currentProduct', default='product1')`.
-{% endcall %}
+> Caution: When you trigger the exit action, either the target or the variable
+> should be provided, but not both.
 
-_Example: Using variable targets_
+#### Example
 
 ```html
 <amp-ad-exit id="exit-api" layout="nodisplay">
@@ -467,20 +509,8 @@ _Example: Using variable targets_
 </amp-carousel>
 ```
 
-## Configuration spec
-
-See the `AmpAdExitConfig` typedef in [config.js](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-exit/0.1/config.js).
-
-## Attributes
-
-<table>
-  <tr>
-    <td width="40%"><strong>id</strong></td>
-    <td>An <code>id</code> is required so that <code>amp-exit</code> can be referenced by tappable elements.</td>
-  </tr>
-</table>
-
 ## Validation
 
-The `amp-ad-exit` element is only available for [AMPHTML ads)](https://www.ampproject.org/docs/ads/amphtml_ads).
-See [amp-ad-exit rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-exit/validator-amp-ad-exit.protoascii) for the AMP validator specification.
+The amp-ad-exit element is only available for [AMPHTML ads](https://www.ampproject.org/docs/ads/amphtml_ads).
+Read [amp-ad-exit rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad-exit/validator-amp-ad-exit.protoascii)
+for the AMP validator specification.
diff --git a/extensions/amp-ad-exit/validator-amp-ad-exit.protoascii b/extensions/amp-ad-exit/validator-amp-ad-exit.protoascii
index 0a725539c9910..d31e7d12b2631 100644
--- a/extensions/amp-ad-exit/validator-amp-ad-exit.protoascii
+++ b/extensions/amp-ad-exit/validator-amp-ad-exit.protoascii
@@ -35,7 +35,7 @@ tags: {  # <amp-ad-exit>
     mandatory_num_child_tags: 1
     child_tag_name_oneof: "SCRIPT"
   }
-  spec_url: "https://amp.dev/documentation/components/amp-ad-exit"
+  spec_url: "https://amp.dev/documentation/components/amp-ad-exit/"
   amp_layout {
     supported_layouts: NODISPLAY
     supported_layouts: CONTAINER  # To allow an unspecified layout (container is default).
@@ -55,5 +55,5 @@ tags: {  # amp-ad-exit config JSON
     dispatch_key: NAME_VALUE_PARENT_DISPATCH
   }
   attr_lists: "nonce-attr"
-  spec_url: "https://amp.dev/documentation/components/amp-ad-exit"
+  spec_url: "https://amp.dev/documentation/components/amp-ad-exit/"
 }
diff --git a/extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js b/extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js
index 4ef77a7229508..7b2513ac42fbc 100644
--- a/extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js
+++ b/extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js
@@ -20,11 +20,17 @@
 // Most other ad networks will want to put their A4A code entirely in the
 // extensions/amp-ad-network-${NETWORK_NAME}-impl directory.
 
-import {EXPERIMENT_INFO_MAP as AMPDOC_FIE_EXPERIMENT_INFO_MAP} from '../../../src/ampdoc-fie';
+import {ADS_INITIAL_INTERSECTION_EXP} from '../../../src/experiments/ads-initial-intersection-exp';
+import {AMP_SIGNATURE_HEADER} from '../../amp-a4a/0.1/signature-verifier';
+import {AdsenseSharedState} from './adsense-shared-state';
+import {AmpA4A} from '../../amp-a4a/0.1/amp-a4a';
+import {
+  CONSENT_POLICY_STATE,
+  CONSENT_STRING_TYPE,
+} from '../../../src/core/constants/consent-state';
+import {Navigation} from '../../../src/service/navigation';
 import {
-  AMP_AD_NO_CENTER_CSS_EXP,
   QQID_HEADER,
-  RENDER_ON_IDLE_FIX_EXP,
   SANDBOX_HEADER,
   ValidAdContainerTypes,
   addCsiSignalsToAmpAnalyticsConfig,
@@ -34,38 +40,36 @@ import {
   getCsiAmpAnalyticsVariables,
   getEnclosingContainerTypes,
   getIdentityToken,
+  getServeNpaPromise,
   googleAdUrl,
   isCdnProxy,
   isReportingEnabled,
   maybeAppendErrorParameter,
 } from '../../../ads/google/a4a/utils';
-import {AdsenseSharedState} from './adsense-shared-state';
-import {AmpA4A, NO_SIGNING_EXP} from '../../amp-a4a/0.1/amp-a4a';
-import {CONSENT_POLICY_STATE} from '../../../src/consent-state';
-import {FIE_INIT_CHUNKING_EXP} from '../../../src/friendly-iframe-embed';
-import {Navigation} from '../../../src/service/navigation';
 import {ResponsiveState} from './responsive-state';
 import {Services} from '../../../src/services';
+import {StoryAdAutoAdvance} from '../../../src/experiments/story-ad-auto-advance';
+import {StoryAdPlacements} from '../../../src/experiments/story-ad-placements';
 import {
+  addAmpExperimentIdToElement,
   addExperimentIdToElement,
   isInManualExperiment,
 } from '../../../ads/google/a4a/traffic-experiments';
 import {computedStyle, setStyles} from '../../../src/style';
 import {dev, devAssert, user} from '../../../src/log';
-import {domFingerprintPlain} from '../../../src/utils/dom-fingerprint';
+import {domFingerprintPlain} from '../../../src/core/dom/fingerprint';
 import {getAmpAdRenderOutsideViewport} from '../../amp-ad/0.1/concurrent-load';
 import {getData} from '../../../src/event-helper';
 import {getDefaultBootstrapBaseUrl} from '../../../src/3p-frame';
 import {
   getExperimentBranch,
-  isExperimentOn,
   randomlySelectUnsetExperiments,
 } from '../../../src/experiments';
 import {getMode} from '../../../src/mode';
 import {insertAnalyticsElement} from '../../../src/extension-analytics';
 import {removeElement} from '../../../src/dom';
-import {stringHash32} from '../../../src/string';
-import {utf8Decode} from '../../../src/utils/bytes';
+import {stringHash32} from '../../../src/core/types/string';
+import {utf8Decode} from '../../../src/core/types/string/bytes';
 
 /** @const {string} */
 const ADSENSE_BASE_URL = 'https://googleads.g.doubleclick.net/pagead/ads';
@@ -85,9 +89,6 @@ export function resetSharedState() {
   sharedState.reset();
 }
 
-/** @type {string} */
-const FORMAT_EXP = 'as-use-attr-for-format';
-
 /** @final */
 export class AmpAdNetworkAdsenseImpl extends AmpA4A {
   /**
@@ -187,23 +188,35 @@ export class AmpAdNetworkAdsenseImpl extends AmpA4A {
         getIdentityToken(this.win, this.getAmpDoc(), super.getConsentPolicy())
       );
 
-    return ResponsiveState.maybeUpgradeToResponsive(
-      this.element,
-      this.getAdClientId_()
-    ).then((state) => {
-      if (state != null) {
-        this.responsiveState_ = state;
-      }
-      if (
-        this.responsiveState_ != null &&
-        !this.responsiveState_.isContainerWidthState()
-      ) {
-        return this.responsiveState_.attemptToMatchResponsiveHeight();
-      }
-      // This should happen last, as some diversion criteria rely on some of the
-      // preceding logic (specifically responsive logic).
-      this.divertExperiments();
-    });
+    // Convert the full-width tag to container width for desktop users.
+    if (
+      this.element.hasAttribute('data-auto-format') &&
+      !ResponsiveState.isLayoutViewportNarrow(this.element)
+    ) {
+      return ResponsiveState.convertToContainerWidth(this.element).then(
+        (state) => {
+          if (state != null) {
+            this.responsiveState_ = state;
+          }
+          this.divertExperiments();
+        }
+      );
+    } else {
+      return ResponsiveState.maybeUpgradeToResponsive(
+        this.element,
+        this.getAdClientId_()
+      ).then((state) => {
+        if (state != null) {
+          this.responsiveState_ = state;
+        }
+        if (this.responsiveState_ != null) {
+          return this.responsiveState_.attemptToMatchResponsiveHeight();
+        }
+        // This should happen last, as some diversion criteria rely on some of the
+        // preceding logic (specifically responsive logic).
+        this.divertExperiments();
+      });
+    }
   }
 
   /** @override */
@@ -218,46 +231,49 @@ export class AmpAdNetworkAdsenseImpl extends AmpA4A {
    * @visibleForTesting
    */
   divertExperiments() {
-    const experimentInfoMap = /** @type {!Object<string,
-        !../../../src/experiments.ExperimentInfo>} */ ({
-      [FORMAT_EXP]: {
-        isTrafficEligible: () =>
-          !this.responsiveState_ &&
-          Number(this.element.getAttribute('width')) > 0 &&
-          Number(this.element.getAttribute('height')) > 0,
-        branches: ['21062003', '21062004'],
-      },
-      [AMP_AD_NO_CENTER_CSS_EXP.id]: {
-        isTrafficEligible: () => true,
-        branches: [
-          AMP_AD_NO_CENTER_CSS_EXP.control,
-          AMP_AD_NO_CENTER_CSS_EXP.experiment,
-        ],
-      },
-      [[FIE_INIT_CHUNKING_EXP.id]]: {
-        isTrafficEligible: () => true,
-        branches: [
-          [FIE_INIT_CHUNKING_EXP.control],
-          [FIE_INIT_CHUNKING_EXP.experiment],
-        ],
-      },
-      [[RENDER_ON_IDLE_FIX_EXP.id]]: {
-        isTrafficEligible: () => true,
-        branches: [
-          [RENDER_ON_IDLE_FIX_EXP.control],
-          [RENDER_ON_IDLE_FIX_EXP.experiment],
-        ],
-      },
-      [NO_SIGNING_EXP.id]: {
-        isTrafficEligible: () => true,
-        branches: [[NO_SIGNING_EXP.control], [NO_SIGNING_EXP.experiment]],
-      },
-      ...AMPDOC_FIE_EXPERIMENT_INFO_MAP,
-    });
-    const setExps = randomlySelectUnsetExperiments(this.win, experimentInfoMap);
+    const experimentInfoList =
+      /** @type {!Array<!../../../src/experiments.ExperimentInfo>} */ ([
+        {
+          experimentId: ADS_INITIAL_INTERSECTION_EXP.id,
+          isTrafficEligible: () => true,
+          branches: [
+            ADS_INITIAL_INTERSECTION_EXP.control,
+            ADS_INITIAL_INTERSECTION_EXP.experiment,
+          ],
+        },
+      ]);
+    const setExps = randomlySelectUnsetExperiments(
+      this.win,
+      experimentInfoList
+    );
     Object.keys(setExps).forEach((expName) =>
       addExperimentIdToElement(setExps[expName], this.element)
     );
+    const moduleNomoduleExpId = this.getModuleNomoduleExpIds_();
+    if (moduleNomoduleExpId) {
+      addExperimentIdToElement(moduleNomoduleExpId, this.element);
+    }
+
+    const ssrExpIds = this.getSsrExpIds_();
+    for (let i = 0; i < ssrExpIds.length; i++) {
+      addAmpExperimentIdToElement(ssrExpIds[i], this.element);
+    }
+
+    const storyAdPlacementsExpId = getExperimentBranch(
+      this.win,
+      StoryAdPlacements.ID
+    );
+    if (storyAdPlacementsExpId) {
+      addExperimentIdToElement(storyAdPlacementsExpId, this.element);
+    }
+
+    const autoAdvanceExpBranch = getExperimentBranch(
+      this.win,
+      StoryAdAutoAdvance.ID
+    );
+    if (autoAdvanceExpBranch) {
+      addExperimentIdToElement(autoAdvanceExpBranch, this.element);
+    }
   }
 
   /**
@@ -275,14 +291,18 @@ export class AmpAdNetworkAdsenseImpl extends AmpA4A {
   }
 
   /** @override */
-  getAdUrl(consentTuple) {
+  getAdUrl(consentTuple, opt_unusedRtcResponsesPromise, opt_serveNpaSignal) {
     let consentState = undefined;
     let consentString = undefined;
     let gdprApplies = undefined;
+    let additionalConsent = undefined;
+    let consentStringType = undefined;
     if (consentTuple) {
       consentState = consentTuple.consentState;
       consentString = consentTuple.consentString;
       gdprApplies = consentTuple.gdprApplies;
+      additionalConsent = consentTuple.additionalConsent;
+      consentStringType = consentTuple.consentStringType;
     }
     if (
       consentState == CONSENT_POLICY_STATE.UNKNOWN &&
@@ -299,19 +319,16 @@ export class AmpAdNetworkAdsenseImpl extends AmpA4A {
     const adTestOn =
       this.element.getAttribute('data-adtest') ||
       isInManualExperiment(this.element);
+
     const width = Number(this.element.getAttribute('width'));
     const height = Number(this.element.getAttribute('height'));
-
     if (
       this.responsiveState_ != null &&
       this.responsiveState_.isContainerWidthState()
     ) {
       this.size_ = {width, height};
     } else {
-      this.size_ =
-        getExperimentBranch(this.win, FORMAT_EXP) == '21062004'
-          ? {width, height}
-          : this.getIntersectionElementLayoutBox();
+      this.size_ = this.getIntersectionElementLayoutBox();
     }
 
     const sizeToSend = this.isSinglePageStoryAd
@@ -348,10 +365,12 @@ export class AmpAdNetworkAdsenseImpl extends AmpA4A {
       'format': format,
       'w': sizeToSend.width,
       'h': sizeToSend.height,
+      'ptt': 12,
       'iu': slotname,
       'npa':
         consentState == CONSENT_POLICY_STATE.INSUFFICIENT ||
-        consentState == CONSENT_POLICY_STATE.UNKNOWN
+        consentState == CONSENT_POLICY_STATE.UNKNOWN ||
+        !!opt_serveNpaSignal
           ? 1
           : null,
       'adtest': adTestOn ? 'on' : null,
@@ -372,13 +391,20 @@ export class AmpAdNetworkAdsenseImpl extends AmpA4A {
       'prev_slotnames': sharedStateParams.prevSlotnames || null,
       'brdim': additionalDimensions(this.win, viewportSize),
       'ifi': this.ifi_,
-      'rc': this.fromResumeCallback ? 1 : null,
       'rafmt':
         this.responsiveState_ != null
           ? this.responsiveState_.getRafmtParam()
           : null,
       'gdpr': gdprApplies === true ? '1' : gdprApplies === false ? '0' : null,
-      'gdpr_consent': consentString,
+      'gdpr_consent':
+        consentStringType != CONSENT_STRING_TYPE.US_PRIVACY_STRING
+          ? consentString
+          : null,
+      'addtl_consent': additionalConsent,
+      'us_privacy':
+        consentStringType == CONSENT_STRING_TYPE.US_PRIVACY_STRING
+          ? consentString
+          : null,
       'pfx': pfx ? '1' : '0',
       'aanf': /^(true|false)$/i.test(this.element.getAttribute('data-no-fill'))
         ? this.element.getAttribute('data-no-fill')
@@ -418,6 +444,11 @@ export class AmpAdNetworkAdsenseImpl extends AmpA4A {
     });
   }
 
+  /** @override */
+  getServeNpaSignal() {
+    return getServeNpaPromise(this.element);
+  }
+
   /** @override */
   onNetworkFailure(error, adUrl) {
     dev().info(TAG, 'network error, attempt adding of error parameter', error);
@@ -450,6 +481,13 @@ export class AmpAdNetworkAdsenseImpl extends AmpA4A {
     return this.size_;
   }
 
+  /**
+   * @override
+   */
+  skipClientSideValidation(headers) {
+    return headers && !headers.has(AMP_SIGNATURE_HEADER);
+  }
+
   /**
    * @param {string} format
    * @return {string} The ad unit hash key string.
@@ -537,18 +575,6 @@ export class AmpAdNetworkAdsenseImpl extends AmpA4A {
       height: `${this.size_.height}px`,
     });
 
-    // Set the centering CSS if the experiment is off
-    if (
-      !isExperimentOn(this.win, 'amp-ad-no-center-css') ||
-      getExperimentBranch(this.win, AMP_AD_NO_CENTER_CSS_EXP.id) ===
-        AMP_AD_NO_CENTER_CSS_EXP.control
-    ) {
-      setStyles(dev().assertElement(this.iframe), {
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-      });
-    }
     if (this.qqid_) {
       this.element.setAttribute('data-google-query-id', this.qqid_);
     }
diff --git a/extensions/amp-ad-network-adsense-impl/0.1/responsive-state.js b/extensions/amp-ad-network-adsense-impl/0.1/responsive-state.js
index e693121c482cd..1a07016f5ded1 100644
--- a/extensions/amp-ad-network-adsense-impl/0.1/responsive-state.js
+++ b/extensions/amp-ad-network-adsense-impl/0.1/responsive-state.js
@@ -22,14 +22,14 @@ import {
 } from '../../../ads/google/utils';
 import {Services} from '../../../src/services';
 import {addExperimentIdToElement} from '../../../ads/google/a4a/traffic-experiments';
-import {clamp} from '../../../src/utils/math';
-import {computedStyle, setStyle} from '../../../src/style';
+import {clamp} from '../../../src/core/math';
+import {computedStyle, getStyle, setStyle} from '../../../src/style';
 import {dev, devAssert, user} from '../../../src/log';
 import {getData} from '../../../src/event-helper';
-import {hasOwn} from '../../../src/utils/object';
+import {hasOwn} from '../../../src/core/types/object';
 import {randomlySelectUnsetExperiments} from '../../../src/experiments';
 import {toWin} from '../../../src/types';
-import {tryParseJson} from '../../../src/json';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 const TAG = 'amp-ad-network-adsense-impl';
 
@@ -86,10 +86,8 @@ export class ResponsiveState {
    *  corresponds to a responsive ad, otherwise null.
    */
   static createIfResponsive(element) {
-    if (
-      !this.isContainerWidth_ &&
-      !hasOwn(RAFMT_PARAMS, element.getAttribute('data-auto-format'))
-    ) {
+    const autoFormat = element.getAttribute('data-auto-format');
+    if (!hasOwn(RAFMT_PARAMS, autoFormat)) {
       return null;
     }
     return new ResponsiveState(element);
@@ -103,27 +101,6 @@ export class ResponsiveState {
     return new ResponsiveState(element, true);
   }
 
-  /**
-   * Upgrades the ad unit to full-width responsive if it does not fall back to container width.
-   * @param {!Element} element
-   * @param {string} adClientId
-   * @return {!Promise<?ResponsiveState>} a promise that resolves when any upgrade is complete.
-   */
-  static maybeUpgradeToResponsive(element, adClientId) {
-    // For Desktop Full-width Ad request, it should fall back to container width.
-    if (
-      element.hasAttribute('data-auto-format') &&
-      !ResponsiveState.isLayoutViewportNarrow_(element)
-    ) {
-      return ResponsiveState.convertToContainerWidth_(element);
-    }
-
-    return ResponsiveState.maybeUpgradeToFullWidthResponsive(
-      element,
-      adClientId
-    );
-  }
-
   /**
    * Upgrades the ad unit to responsive if there is an opt-in setting in localstorage.
    * See https://github.com/ampproject/amphtml/issues/23568 for design.
@@ -131,17 +108,14 @@ export class ResponsiveState {
    * @param {string} adClientId
    * @return {!Promise<?ResponsiveState>} a promise that resolves when any upgrade is complete.
    */
-  static maybeUpgradeToFullWidthResponsive(element, adClientId) {
-    if (!ResponsiveState.isInAdSizeOptimizationExperimentBranch_(element)) {
-      return Promise.resolve(null);
-    }
+  static maybeUpgradeToResponsive(element, adClientId) {
     // If the ad unit is already responsive we don't upgrade again.
     if (element.hasAttribute('data-auto-format')) {
       return Promise.resolve(null);
     }
 
     // If the user already has a wide viewport layout, we don't upgrade to responsive.
-    if (!ResponsiveState.isLayoutViewportNarrow_(element)) {
+    if (!ResponsiveState.isLayoutViewportNarrow(element)) {
       return Promise.resolve(null);
     }
 
@@ -189,9 +163,8 @@ export class ResponsiveState {
    *
    * @param {!Element} element
    * @return {!Promise<?ResponsiveState>} a promise that return container width responsive state.
-   * @private
    */
-  static convertToContainerWidth_(element) {
+  static convertToContainerWidth(element) {
     const vsync = Services.vsyncFor(toWin(element.ownerDocument.defaultView));
 
     return vsync
@@ -214,7 +187,6 @@ export class ResponsiveState {
       .then(() => {
         const state = ResponsiveState.createContainerWidthState(element);
         devAssert(state != null, 'Convert to container width state failed');
-        this.isContainerWidth_ = true;
         return /** @type {!ResponsiveState} */ (state);
       });
   }
@@ -351,6 +323,11 @@ export class ResponsiveState {
     this.isAlignedToViewport_ = true;
     const vsync = Services.vsyncFor(this.win_);
     const layoutBox = this.element_.getLayoutBox();
+    const viewportSize = Services.viewportForDoc(
+      this.element_.getAmpDoc()
+    ).getSize();
+    const elementStyleWidth =
+      parseInt(getStyle(this.element_, 'width'), 10) || 0;
     // Nudge into the correct horizontal position by changing side margin.
     vsync.run(
       {
@@ -368,6 +345,10 @@ export class ResponsiveState {
           if (this.isContainerWidth_) {
             setStyle(this.element_, 'width', '100%');
           } else {
+            // Exit if the full-width resize did not succeed before.
+            if (elementStyleWidth != viewportSize.width) {
+              return;
+            }
             if (state.direction == 'rtl') {
               setStyle(this.element_, 'marginRight', layoutBox.left, 'px');
             } else {
@@ -400,49 +381,23 @@ export class ResponsiveState {
     return RAFMT_PARAMS[this.getAutoFormat_()];
   }
 
-  /**
-   * Selects into the ad size optimization experiment.
-   * @param {!Element} element
-   * @return {boolean}
-   */
-  static isInAdSizeOptimizationExperimentBranch_(element) {
-    const experimentInfoMap = /** @type {!Object<string,
-        !../../../src/experiments.ExperimentInfo>} */ ({
-      [[AD_SIZE_OPTIMIZATION_EXP.branch]]: {
-        isTrafficEligible: () => true,
-        branches: [
-          [AD_SIZE_OPTIMIZATION_EXP.control],
-          [AD_SIZE_OPTIMIZATION_EXP.experiment],
-        ],
-      },
-    });
-    const win = toWin(element.ownerDocument.defaultView);
-    const setExps = randomlySelectUnsetExperiments(win, experimentInfoMap);
-    Object.keys(setExps).forEach((expName) =>
-      addExperimentIdToElement(setExps[expName], element)
-    );
-    return (
-      setExps[AD_SIZE_OPTIMIZATION_EXP.branch] ==
-      AD_SIZE_OPTIMIZATION_EXP.experiment
-    );
-  }
-
   /**
    * Selects into the inconsistent responsive height fix experiment.
    * @return {boolean}
    * @private
    */
   isInResponsiveHeightFixExperimentBranch_() {
-    const experimentInfoMap = /** @type {!Object<string,
-        !../../../src/experiments.ExperimentInfo>} */ ({
-      [[MAX_HEIGHT_EXP.branch]]: {
-        isTrafficEligible: () => true,
-        branches: [[MAX_HEIGHT_EXP.control], [MAX_HEIGHT_EXP.experiment]],
-      },
-    });
+    const experimentInfoList =
+      /** @type {!Array<!../../../src/experiments.ExperimentInfo>} */ ([
+        {
+          experimentId: MAX_HEIGHT_EXP.branch,
+          isTrafficEligible: () => true,
+          branches: [MAX_HEIGHT_EXP.control, MAX_HEIGHT_EXP.experiment],
+        },
+      ]);
     const setExps = randomlySelectUnsetExperiments(
       this.win_,
-      experimentInfoMap
+      experimentInfoList
     );
     Object.keys(setExps).forEach((expName) =>
       addExperimentIdToElement(setExps[expName], this.element_)
@@ -462,16 +417,16 @@ export class ResponsiveState {
     // Attempt to resize to the correct height. The width should already be
     // 100vw, but is fixed here so that future resizes of the viewport don't
     // affect it.
-    return this.element_
-      .getImpl(/* waitForBuild= */ false)
-      .then((impl) =>
-        impl
-          .attemptChangeSize(
-            this.getResponsiveHeight_(viewportSize),
-            viewportSize.width
-          )
-          .catch(() => {})
-      );
+    return this.element_.getImpl(/* waitForBuild= */ false).then((impl) =>
+      impl
+        .attemptChangeSize(
+          this.getResponsiveHeight_(viewportSize),
+          viewportSize.width
+        )
+        .catch(() => {
+          dev().info(TAG, `Change size attempt failed.`);
+        })
+    );
   }
 
   /**
@@ -506,9 +461,8 @@ export class ResponsiveState {
    * Estimate if the viewport has a narrow layout.
    * @param {!Element} element
    * @return {boolean}
-   * @private
    */
-  static isLayoutViewportNarrow_(element) {
+  static isLayoutViewportNarrow(element) {
     const viewportSize = Services.viewportForDoc(element).getSize();
 
     return viewportSize.width < 488;
diff --git a/extensions/amp-ad-network-adsense-impl/0.1/test/test-amp-ad-network-adsense-impl.js b/extensions/amp-ad-network-adsense-impl/0.1/test/test-amp-ad-network-adsense-impl.js
index 71840b3a9a33b..de1b04495c2a4 100644
--- a/extensions/amp-ad-network-adsense-impl/0.1/test/test-amp-ad-network-adsense-impl.js
+++ b/extensions/amp-ad-network-adsense-impl/0.1/test/test-amp-ad-network-adsense-impl.js
@@ -19,17 +19,21 @@
 // always available for them. However, when we test an impl in isolation,
 // AmpAd is not loaded already, so we need to load it separately.
 import '../../../amp-ad/0.1/amp-ad';
+import * as experiments from '../../../../src/experiments';
 import {AD_SIZE_OPTIMIZATION_EXP} from '../responsive-state';
-import {AmpA4A} from '../../../amp-a4a/0.1/amp-a4a';
+import {AmpA4A, MODULE_NOMODULE_PARAMS_EXP} from '../../../amp-a4a/0.1/amp-a4a';
 import {AmpAd} from '../../../amp-ad/0.1/amp-ad';
 import {
   AmpAdNetworkAdsenseImpl,
   resetSharedState,
-} from '../amp-ad-network-adsense-impl'; // eslint-disable-line no-unused-vars
+} from '../amp-ad-network-adsense-impl';
 import {
   AmpAdXOriginIframeHandler, // eslint-disable-line no-unused-vars
 } from '../../../amp-ad/0.1/amp-ad-xorigin-iframe-handler';
-import {CONSENT_POLICY_STATE} from '../../../../src/consent-state';
+import {
+  CONSENT_POLICY_STATE,
+  CONSENT_STRING_TYPE,
+} from '../../../../src/core/constants/consent-state';
 import {Services} from '../../../../src/services';
 import {
   addAttributesToElement,
@@ -39,7 +43,8 @@ import {
   forceExperimentBranch,
   toggleExperiment,
 } from '../../../../src/experiments';
-import {utf8Decode, utf8Encode} from '../../../../src/utils/bytes';
+import {toWin} from '../../../../src/types';
+import {utf8Decode, utf8Encode} from '../../../../src/core/types/string/bytes';
 
 function createAdsenseImplElement(attributes, doc, opt_tag) {
   const tag = opt_tag || 'amp-ad';
@@ -95,6 +100,18 @@ describes.realWin(
           return Promise.reject(new Error('No token'));
         },
       });
+      env.sandbox
+        .stub(impl, 'getIntersectionElementLayoutBox')
+        .callsFake(() => {
+          return {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            width: 320,
+            height: 50,
+          };
+        });
     });
 
     /**
@@ -336,9 +353,8 @@ describes.realWin(
                 '1';
             }
             impl.onCreativeRender(false);
-            const ampAnalyticsElement = impl.element.querySelector(
-              'amp-analytics'
-            );
+            const ampAnalyticsElement =
+              impl.element.querySelector('amp-analytics');
             expect(ampAnalyticsElement).to.be.ok;
             expect(ampAnalyticsElement.CONFIG).jsonEqual(
               impl.ampAnalyticsConfig_
@@ -554,14 +570,11 @@ describes.realWin(
     });
 
     describe('#getAdUrl', () => {
-      const adsenseFormatExpName = 'as-use-attr-for-format';
-
       beforeEach(() => {
         resetSharedState();
       });
 
       afterEach(() => {
-        toggleExperiment(impl.win, adsenseFormatExpName, false);
         toggleExperiment(
           impl.win,
           'ADSENSE_AMP_AUTO_ADS_HOLDOUT_EXPERIMENT_NAME',
@@ -623,8 +636,7 @@ describes.realWin(
         element.setAttribute('width', 'auto');
         expect(impl.element.getAttribute('width')).to.equal('auto');
         return impl.getAdUrl().then((url) =>
-          // With exp as-use-attr-for-format off, we can't test for specific
-          // numbers, but we know that the values should be numeric.
+          // The values should be numeric.
           expect(url).to.match(/format=\d+x\d+&w=\d+&h=\d+/)
         );
       });
@@ -632,13 +644,11 @@ describes.realWin(
         element.setAttribute('height', 'auto');
         expect(impl.element.getAttribute('height')).to.equal('auto');
         return impl.getAdUrl().then((url) =>
-          // With exp as-use-attr-for-format off, we can't test for specific
-          // numbers, but we know that the values should be numeric.
+          // The values should be numeric.
           expect(url).to.match(/format=\d+x\d+&w=\d+&h=\d+/)
         );
       });
-      it('has correct format when as-use-attr-for-format is on', () => {
-        forceExperimentBranch(impl.win, adsenseFormatExpName, '21062004');
+      it('has correct format when width and height are specified', () => {
         impl.divertExperiments();
         const width = element.getAttribute('width');
         const height = element.getAttribute('height');
@@ -650,20 +660,6 @@ describes.realWin(
             )
           );
       });
-      it('has experiment eid in adsense frmt exp and width/height numeric', () => {
-        forceExperimentBranch(impl.win, adsenseFormatExpName, '21062004');
-        impl.divertExperiments();
-        return impl
-          .getAdUrl()
-          .then((url) => expect(url).to.match(/eid=[^&]*21062004/));
-      });
-      it('has control eid in adsense frmt exp and width/height numeric', () => {
-        forceExperimentBranch(impl.win, adsenseFormatExpName, '21062003');
-        impl.divertExperiments();
-        return impl
-          .getAdUrl()
-          .then((url) => expect(url).to.match(/eid=[^&]*21062003/));
-      });
       it('returns the right URL', () => {
         env.sandbox.stub(impl, 'isXhrAllowed').returns(true);
         element.setAttribute('data-ad-slot', 'some_slot');
@@ -737,6 +733,14 @@ describes.realWin(
             /(\?|&)is_amp=5(&|$)/
           );
         });
+        it('does not set ptt parameter by default', () =>
+          expect(impl.getAdUrl()).to.not.eventually.match(/(\?|&)ptt=(&|$)/));
+        it('sets ptt parameter', () => {
+          forceExperimentBranch(impl.win, 'adsense-ptt-exp', '21068092');
+          return expect(impl.getAdUrl()).to.eventually.match(
+            /(\?|&)ptt=12(&|$)/
+          );
+        });
       });
 
       // Not using arrow function here because otherwise the way closure behaves
@@ -782,7 +786,6 @@ describes.realWin(
         const impl1 = new AmpAdNetworkAdsenseImpl(elem1);
         const impl2 = new AmpAdNetworkAdsenseImpl(elem2);
         const impl3 = new AmpAdNetworkAdsenseImpl(elem3);
-        toggleExperiment(impl1.win, 'as-use-attr-for-format', true);
         return impl1.getAdUrl().then((adUrl1) => {
           expect(adUrl1).to.match(/pv=2/);
           expect(adUrl1).to.not.match(/prev_fmts/);
@@ -811,11 +814,12 @@ describes.realWin(
 
       it('should include identity', () => {
         // Force get identity result by overloading window variable.
-        const token = /**@type {!../../../ads/google/a4a/utils.IdentityToken}*/ ({
-          token: 'abcdef',
-          jar: 'some_jar',
-          pucrd: 'some_pucrd',
-        });
+        const token =
+          /**@type {!../../../ads/google/a4a/utils.IdentityToken}*/ ({
+            token: 'abcdef',
+            jar: 'some_jar',
+            pucrd: 'some_pucrd',
+          });
         impl.win['goog_identity_prom'] = Promise.resolve(token);
         impl.buildCallback();
         return impl.getAdUrl().then((url) => {
@@ -868,6 +872,27 @@ describes.realWin(
           .then((url) => {
             expect(url).to.not.match(/(\?|&)npa=(&|$)/);
           }));
+      it('should include npa=1 if `serveNpaSignal` is found, regardless of consent', () =>
+        impl
+          .getAdUrl(
+            {consentState: CONSENT_POLICY_STATE.SUFFICIENT},
+            undefined,
+            true
+          )
+          .then((url) => {
+            expect(url).to.match(/(\?|&)npa=1(&|$)/);
+          }));
+
+      it('should include npa=1 if `serveNpaSignal` is false & insufficient consent', () =>
+        impl
+          .getAdUrl(
+            {consentState: CONSENT_POLICY_STATE.INSUFFICIENT},
+            undefined,
+            false
+          )
+          .then((url) => {
+            expect(url).to.match(/(\?|&)npa=1(&|$)/);
+          }));
 
       it('should include gdpr_consent, if TC String is provided', () =>
         impl.getAdUrl({consentString: 'tcstring'}).then((url) => {
@@ -889,6 +914,46 @@ describes.realWin(
           expect(url).to.not.match(/(\?|&)gdpr=(&|$)/);
         }));
 
+      it('should include addtl_consent', () =>
+        impl.getAdUrl({additionalConsent: 'abc123'}).then((url) => {
+          expect(url).to.match(/(\?|&)addtl_consent=abc123(&|$)/);
+        }));
+
+      it('should not include addtl_consent, if additionalConsent is missing', () =>
+        impl.getAdUrl({}).then((url) => {
+          expect(url).to.not.match(/(\?|&)addtl_consent=(&|$)/);
+        }));
+
+      it('should include us_privacy, if consentStringType matches', () =>
+        impl
+          .getAdUrl({
+            consentStringType: CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+            consentString: 'usPrivacyString',
+          })
+          .then((url) => {
+            expect(url).to.match(/(\?|&)us_privacy=usPrivacyString(&|$)/);
+            expect(url).to.not.match(/(\?|&)gdpr_consent=/);
+          }));
+
+      it('should include gdpr_consent, if consentStringType is not US_PRIVACY_STRING', () =>
+        impl
+          .getAdUrl({
+            consentStringType: CONSENT_STRING_TYPE.TCF_V2,
+            consentString: 'gdprString',
+          })
+          .then((url) => {
+            expect(url).to.match(/(\?|&)gdpr_consent=gdprString(&|$)/);
+            expect(url).to.not.match(/(\?|&)us_privacy=/);
+          }));
+
+      it('should include gdpr_consent, if consentStringType is undefined', () =>
+        impl
+          .getAdUrl({consentStringType: undefined, consentString: 'gdprString'})
+          .then((url) => {
+            expect(url).to.match(/(\?|&)gdpr_consent=gdprString(&|$)/);
+            expect(url).to.not.match(/(\?|&)us_privacy=/);
+          }));
+
       it('should have spsa and size 1x1 when single page story ad', () => {
         impl.isSinglePageStoryAd = true;
         return impl.getAdUrl().then((url) => {
@@ -898,6 +963,106 @@ describes.realWin(
           expect(url).to.match(/spsa=\d+?x\d+?/);
         });
       });
+
+      describe('module/nomodule', () => {
+        it('should have module nomodule experiment id in url when runtime type is 2', () => {
+          env.sandbox
+            .stub(ampdoc, 'getMetaByName')
+            .withArgs('runtime-type')
+            .returns('2');
+          return impl.buildCallback().then(() => {
+            impl.getAdUrl().then((url) => {
+              expect(url).to.have.string(MODULE_NOMODULE_PARAMS_EXP.EXPERIMENT);
+            });
+          });
+        });
+
+        it('should have module nomodule experiment id in url when runtime type is 10', () => {
+          env.sandbox
+            .stub(ampdoc, 'getMetaByName')
+            .withArgs('runtime-type')
+            .returns('10');
+          return impl.buildCallback().then(() => {
+            impl.getAdUrl().then((url) => {
+              expect(url).to.have.string(MODULE_NOMODULE_PARAMS_EXP.CONTROL);
+            });
+          });
+        });
+
+        // 2, 4, and 10 should the only one that triggers this experiment diversion.
+        it('should not have module nomodule experiment id in url when runtime type is 0', () => {
+          env.sandbox
+            .stub(ampdoc, 'getMetaByName')
+            .withArgs('runtime-type')
+            .returns('0');
+          impl.buildCallback();
+          return impl.getAdUrl().then((url) => {
+            expect(url).to.not.have.string(MODULE_NOMODULE_PARAMS_EXP.CONTROL);
+            expect(url).to.not.have.string(
+              MODULE_NOMODULE_PARAMS_EXP.EXPERIMENT
+            );
+          });
+        });
+      });
+
+      describe('SSR experiments', () => {
+        it('should include SSR experiments', () => {
+          env.sandbox
+            .stub(ampdoc, 'getMetaByName')
+            .withArgs('amp-usqp')
+            .returns('5798237482=45,3579282=0');
+          return impl.buildCallback().then(() => {
+            impl.getAdUrl().then((url) => {
+              expect(url).to.have.string('579823748245!357928200');
+            });
+          });
+        });
+
+        it('should pad value to two chars', () => {
+          env.sandbox
+            .stub(ampdoc, 'getMetaByName')
+            .withArgs('amp-usqp')
+            .returns('5798237482=1');
+          return impl.buildCallback().then(() => {
+            impl.getAdUrl().then((url) => {
+              expect(url).to.have.string('579823748201');
+            });
+          });
+        });
+
+        it('should ignore excessively large value', () => {
+          env.sandbox
+            .stub(ampdoc, 'getMetaByName')
+            .withArgs('amp-usqp')
+            .returns('5798237482=100');
+          impl.buildCallback();
+          return impl.getAdUrl().then((url) => {
+            expect(url).not.to.have.string('5798237482');
+          });
+        });
+
+        it('should ignore negative values', () => {
+          env.sandbox
+            .stub(ampdoc, 'getMetaByName')
+            .withArgs('amp-usqp')
+            .returns('5798237482=-1');
+          impl.buildCallback();
+          return impl.getAdUrl().then((url) => {
+            expect(url).not.to.have.string('5798237482');
+          });
+        });
+
+        it('should ignore non-number values', () => {
+          env.sandbox
+            .stub(ampdoc, 'getMetaByName')
+            .withArgs('amp-usqp')
+            .returns('5798237482=testing');
+          impl.buildCallback();
+          return impl.getAdUrl().then((url) => {
+            expect(url).not.to.have.string('5798237482');
+          });
+        });
+      });
     });
 
     describe('#unlayoutCallback', () => {
@@ -909,7 +1074,7 @@ describes.realWin(
         impl.win.ampAdSlotIdCounter = 1;
         expect(impl.element.getAttribute('data-amp-slot-index')).to.not.be.ok;
         impl.layoutMeasureExecuted_ = true;
-        impl.uiHandler = {applyUnlayoutUI: () => {}};
+        impl.uiHandler = {applyUnlayoutUI: () => {}, cleanup: () => {}};
         const placeholder = doc.createElement('div');
         placeholder.setAttribute('placeholder', '');
         const fallback = doc.createElement('div');
@@ -960,6 +1125,8 @@ describes.realWin(
 
       let iframe;
       let didAttemptSizeChange;
+      let didMeasure;
+      let didMutate;
 
       function constructImpl(config) {
         config.type = 'adsense';
@@ -987,6 +1154,20 @@ describes.realWin(
             },
           })
         );
+
+        didMeasure = false;
+        didMutate = false;
+        const vsyncMock = Services.vsyncFor(
+          toWin(element.ownerDocument.defaultView)
+        );
+        env.sandbox.stub(vsyncMock, 'runPromise').callsFake((task, state) => {
+          didMeasure = true;
+          didMutate = true;
+          task.measure(state);
+          task.mutate(state);
+          return Promise.resolve();
+        });
+
         return impl;
       }
 
@@ -1000,6 +1181,29 @@ describes.realWin(
         await promise;
 
         expect(didAttemptSizeChange).to.be.false;
+        expect(didMeasure).to.be.false;
+        expect(didMutate).to.be.false;
+      });
+
+      it('should not schedule a resize for desktop container width responsive', async () => {
+        const adsense = constructImpl({
+          width: '100vw',
+          height: '100',
+          'data-auto-format': 'rspv',
+        });
+        // Overwrite the viewport size to be wide viewport one.
+        adsense.getViewport().getSize = () => ({
+          width: 1400,
+          height: 1024,
+        });
+
+        const promise = adsense.buildCallback();
+        expect(promise).to.exist;
+        await promise;
+
+        expect(didAttemptSizeChange).to.be.false;
+        expect(didMeasure).to.be.true;
+        expect(didMutate).to.be.true;
       });
 
       it('should schedule a resize for responsive', async () => {
@@ -1014,6 +1218,8 @@ describes.realWin(
         await promise;
 
         expect(didAttemptSizeChange).to.be.true;
+        expect(didMeasure).to.be.false;
+        expect(didMutate).to.be.false;
       });
 
       it('should schedule a resize for matched content responsive', async () => {
@@ -1027,6 +1233,8 @@ describes.realWin(
         expect(promise).to.exist;
         await promise;
         expect(didAttemptSizeChange).to.be.true;
+        expect(didMeasure).to.be.false;
+        expect(didMutate).to.be.false;
       });
 
       describe('for publisher opted in to auto ad size optimization', () => {
@@ -1039,25 +1247,6 @@ describes.realWin(
           });
         });
 
-        it('does nothing if experiment is disabled', async () => {
-          forceExperimentBranch(
-            impl.win,
-            AD_SIZE_OPTIMIZATION_EXP.branch,
-            AD_SIZE_OPTIMIZATION_EXP.control
-          );
-          const adsense = constructImpl({
-            width: '320',
-            height: '150',
-          });
-
-          const promise = adsense.buildCallback();
-          expect(promise).to.exist;
-          await promise;
-
-          expect(didAttemptSizeChange).to.be.false;
-          expect(adsense.element.hasAttribute('data-auto-format')).to.be.false;
-        });
-
         it('does nothing if ad unit is responsive already', async () => {
           forceExperimentBranch(
             impl.win,
@@ -1374,7 +1563,8 @@ describes.realWin(
         });
         ampStickyAd.appendChild(element);
         doc.body.appendChild(ampStickyAd);
-        const letCreativeTriggerRenderStart = impl.letCreativeTriggerRenderStart();
+        const letCreativeTriggerRenderStart =
+          impl.letCreativeTriggerRenderStart();
         expect(letCreativeTriggerRenderStart).to.equal(true);
       });
 
@@ -1412,9 +1602,30 @@ describes.realWin(
         );
         ampStickyAd.appendChild(element);
         doc.body.appendChild(ampStickyAd);
-        const letCreativeTriggerRenderStart = impl.letCreativeTriggerRenderStart();
+        const letCreativeTriggerRenderStart =
+          impl.letCreativeTriggerRenderStart();
         expect(letCreativeTriggerRenderStart).to.equal(false);
       });
     });
+
+    describe('#divertExperiments', () => {
+      it('should have correctly formatted experiment map', () => {
+        const randomlySelectUnsetExperimentsStub = env.sandbox.stub(
+          experiments,
+          'randomlySelectUnsetExperiments'
+        );
+        randomlySelectUnsetExperimentsStub.returns({});
+        impl.divertExperiments();
+        const experimentMap =
+          randomlySelectUnsetExperimentsStub.firstCall.args[1];
+        Object.keys(experimentMap).forEach((key) => {
+          expect(key).to.be.a('string');
+          const {branches} = experimentMap[key];
+          expect(branches).to.exist;
+          expect(branches).to.be.a('array');
+          branches.forEach((branch) => expect(branch).to.be.a('string'));
+        });
+      });
+    });
   }
 );
diff --git a/extensions/amp-ad-network-adsense-impl/0.1/test/test-responsive-state.js b/extensions/amp-ad-network-adsense-impl/0.1/test/test-responsive-state.js
index f868a6a636b6f..9a83c55d076e9 100644
--- a/extensions/amp-ad-network-adsense-impl/0.1/test/test-responsive-state.js
+++ b/extensions/amp-ad-network-adsense-impl/0.1/test/test-responsive-state.js
@@ -30,7 +30,7 @@ import {
   createElementWithAttributes,
 } from '../../../../src/dom';
 import {forceExperimentBranch} from '../../../../src/experiments';
-import {layoutRectLtwh} from '../../../../src/layout-rect';
+import {layoutRectLtwh} from '../../../../src/core/math/layout-rect';
 import {toWin} from '../../../../src/types';
 
 const AD_CLIENT_ID = 'ca-pub-123';
@@ -255,9 +255,10 @@ describes.realWin(
         const state = createState({
           'data-auto-format': [ADSENSE_RSPV_TAG],
           'data-full-width': '',
-          'height': '500px',
+          'height': '200px',
           'width': '100vw',
         });
+        element.style.width = '375px';
 
         state.alignToViewport();
 
@@ -269,9 +270,10 @@ describes.realWin(
         const state = createState({
           'data-auto-format': [ADSENSE_RSPV_TAG],
           'data-full-width': '',
-          'height': '500px',
+          'height': '200px',
           'width': '100vw',
         });
+        element.style.width = '375px';
         element.parentElement.style.direction = 'rtl';
 
         state.alignToViewport();
@@ -281,6 +283,24 @@ describes.realWin(
 
         element.parentElement.style.direction = '';
       });
+
+      it('Do not align the element if its full-width resize failed', () => {
+        const state = createState({
+          'data-auto-format': [ADSENSE_RSPV_TAG],
+          'data-full-width': '',
+          'height': '100px',
+          'width': '100vw',
+        });
+        // The viewport width is 375.
+        element.style.width = '200px';
+
+        state.alignToViewport();
+
+        expect(element.style.marginLeft).to.be.equal('');
+        expect(element.style.marginRight).to.be.equal('');
+
+        element.parentElement.style.direction = '';
+      });
     });
 
     describe('maybeUpgradeToResponsive', () => {
@@ -386,6 +406,36 @@ describes.realWin(
         expect(result).to.be.null;
       });
 
+      it('returns a valid responsive state and upgrades element when the ad unit is not responsive and ad size optimization is enabled', async () => {
+        forceExperimentBranch(
+          win,
+          AD_SIZE_OPTIMIZATION_EXP.branch,
+          AD_SIZE_OPTIMIZATION_EXP.experiment
+        );
+        const element = createElement({
+          'data-ad-client': AD_CLIENT_ID,
+          'height': '200px',
+          'width': '50vw',
+        });
+        storageContent[`aas-${AD_CLIENT_ID}`] = true;
+
+        const result = await ResponsiveState.maybeUpgradeToResponsive(
+          element,
+          AD_CLIENT_ID
+        );
+
+        expect(result).to.not.be.null;
+        expect(result.isValidElement()).to.be.true;
+        expect(element.getAttribute('height')).to.be.equal(
+          `${ADSENSE_RSPV_ALLOWED_HEIGHT}`
+        );
+        expect(element.getAttribute('width')).to.be.equal('100vw');
+        expect(element).to.have.attribute('data-full-width');
+        expect(element.getAttribute('data-auto-format')).to.be.equal('rspv');
+      });
+    });
+
+    describe('convertToContainerWidth', () => {
       it('Fall back to container width state for full-width responsive user on desktop site', async () => {
         const element = createElementWithNoStub({
           'data-ad-client': AD_CLIENT_ID,
@@ -413,7 +463,7 @@ describes.realWin(
           },
         });
 
-        const result = await ResponsiveState.maybeUpgradeToResponsive(
+        const result = await ResponsiveState.convertToContainerWidth(
           element,
           AD_CLIENT_ID
         );
@@ -427,35 +477,8 @@ describes.realWin(
         expect(element).to.not.have.attribute('data-full-width');
         expect(element).to.not.have.attribute('data-auto-format');
       });
-
-      it('returns a valid responsive state and upgrades element when the ad unit is not responsive and ad size optimization is enabled', async () => {
-        forceExperimentBranch(
-          win,
-          AD_SIZE_OPTIMIZATION_EXP.branch,
-          AD_SIZE_OPTIMIZATION_EXP.experiment
-        );
-        const element = createElement({
-          'data-ad-client': AD_CLIENT_ID,
-          'height': '200px',
-          'width': '50vw',
-        });
-        storageContent[`aas-${AD_CLIENT_ID}`] = true;
-
-        const result = await ResponsiveState.maybeUpgradeToResponsive(
-          element,
-          AD_CLIENT_ID
-        );
-
-        expect(result).to.not.be.null;
-        expect(result.isValidElement()).to.be.true;
-        expect(element.getAttribute('height')).to.be.equal(
-          `${ADSENSE_RSPV_ALLOWED_HEIGHT}`
-        );
-        expect(element.getAttribute('width')).to.be.equal('100vw');
-        expect(element).to.have.attribute('data-full-width');
-        expect(element.getAttribute('data-auto-format')).to.be.equal('rspv');
-      });
     });
+
     describe('maybeAttachSettingsListener', () => {
       describe('sets up a listener that', () => {
         let promise;
diff --git a/extensions/amp-ad-network-adsense-impl/OWNERS b/extensions/amp-ad-network-adsense-impl/OWNERS
index e5fa2ea9ccf04..659f864645301 100644
--- a/extensions/amp-ad-network-adsense-impl/OWNERS
+++ b/extensions/amp-ad-network-adsense-impl/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-ad-network-adsense-impl/amp-ad-network-adsense-impl-internal.md b/extensions/amp-ad-network-adsense-impl/amp-ad-network-adsense-impl-internal.md
index 3daeab00cc58b..6ad0f6abbed8f 100644
--- a/extensions/amp-ad-network-adsense-impl/amp-ad-network-adsense-impl-internal.md
+++ b/extensions/amp-ad-network-adsense-impl/amp-ad-network-adsense-impl-internal.md
@@ -39,7 +39,7 @@ of this library, publishers can include its script declaration.
 
 #### AMP Consent integration
 
-The `<amp-consent>` element can be used to block the ad request until the user or AMP consent [checkConsentHref](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md#consent-configuration) end point provide consent state. After the amp-consent extension has been configured (please refer to its [documentation](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md)), it can be linked to the amp-ad element via the `data-block-on-consent` attribute.
+The `<amp-consent>` element can be used to block the ad request until the user or AMP consent [checkConsentHref](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md#consent-configuration) end point provide consent state. After the amp-consent extension has been configured (please refer to its [documentation](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md)), it can be linked to the amp-ad element via the `data-block-on-consent` attribute.
 
 If the user has responded negatively to the amp-consent component (user rejects the consent prompt), RTC call-outs will not be made and [non-personalized ads](https://support.google.com/dfp_premium/answer/9005435) will be requested.
 
@@ -65,4 +65,31 @@ Example - AdSense Ad
 
 #### Attributes
 
+##### always-serve-npa
+
+`always-serve-npa` provides a way to utilize the `<amp-geo>` component to detect user's geo location to decide if a non-personalized ad should be requested from AdSense, regardless of the [user's consent decision](#AMP-Consent-integration). The value of `always-serve-npa` should be a comma delimited string of geo group codes which are defined in `<amp-geo>` (details [here](https://github.com/ampproject/amphtml/blob/main/extensions/amp-geo/amp-geo.md)). If no value is found or an empty string is provided, then a NPA will always be requested, regardless of the location.
+
+```html
+<amp-ad
+  width="300"
+  height="200"
+  type="adsense"
+  always-serve-npa="geoGroup1,geoGroup2"
+  data-ad-client="ca-pub-8125901705757971"
+  data-ad-slot="7783467241"
+>
+</amp-ad>
+
+<amp-geo>
+  <script type="application/json">
+    {
+      "ISOCountryGroups": {
+        "geoGroup1": [ "preset-eea", "unknown" ],
+        "geoGroup2": [ "preset-us-ca" ]
+      }
+    }
+  </script>
+</amp-geo>
+```
+
 TODO: Add attributes
diff --git a/extensions/amp-ad-network-adzerk-impl/0.1/amp-ad-network-adzerk-impl.js b/extensions/amp-ad-network-adzerk-impl/0.1/amp-ad-network-adzerk-impl.js
index c396f7efcd303..efad21c2d4157 100644
--- a/extensions/amp-ad-network-adzerk-impl/0.1/amp-ad-network-adzerk-impl.js
+++ b/extensions/amp-ad-network-adzerk-impl/0.1/amp-ad-network-adzerk-impl.js
@@ -19,13 +19,14 @@ import {
   CreativeMetaDataDef,
   NO_CONTENT_RESPONSE,
 } from '../../amp-a4a/0.1/amp-a4a';
-import {AmpAdTemplateHelper} from '../../amp-a4a/0.1/amp-ad-template-helper';
 import {AmpTemplateCreativeDef} from '../../amp-a4a/0.1/amp-ad-type-defs';
 import {dev, devAssert} from '../../../src/log';
+import {getAmpAdTemplateHelper} from '../../amp-a4a/0.1/amp-ad-template-helper';
 import {getMode} from '../../../src/mode';
-import {tryParseJson} from '../../../src/json';
-import {tryResolve} from '../../../src/utils/promise';
-import {utf8Decode, utf8Encode} from '../../../src/utils/bytes';
+import {mergeExtensionsMetadata} from '../../amp-a4a/0.1/amp-ad-utils';
+import {tryParseJson} from '../../../src/core/types/object/json';
+import {tryResolve} from '../../../src/core/data-structures/promise';
+import {utf8Decode, utf8Encode} from '../../../src/core/types/string/bytes';
 
 /** @type {string} */
 const TAG = 'amp-ad-network-adzerk-impl';
@@ -33,9 +34,6 @@ const TAG = 'amp-ad-network-adzerk-impl';
 /** @visibleForTesting @type {string} */
 export const AMP_TEMPLATED_CREATIVE_HEADER_NAME = 'AMP-template-amp-creative';
 
-/** @private {?AmpAdTemplateHelper} */
-let ampAdTemplateHelper;
-
 /**
  * Fast Fetch implementation for AdZerk network that allows AMP creative
  * preferential render via AMP cache stored template expansion using
@@ -66,9 +64,6 @@ export class AmpAdNetworkAdzerkImpl extends AmpA4A {
 
     /** @private {?../../amp-a4a/0.1/amp-ad-type-defs.AmpTemplateCreativeDef} */
     this.ampCreativeJson_ = null;
-
-    ampAdTemplateHelper =
-      ampAdTemplateHelper || new AmpAdTemplateHelper(this.win);
   }
 
   /**
@@ -99,17 +94,21 @@ export class AmpAdNetworkAdzerkImpl extends AmpA4A {
 
   /** @override */
   maybeValidateAmpCreative(bytes, headers) {
+    // TODO(wg-monetization): this header name has been deprecated elsewhere,
+    // and is never returned by dev server.
     if (headers.get(AMP_TEMPLATED_CREATIVE_HEADER_NAME) !== 'amp-mustache') {
-      return /**@type {!Promise<(ArrayBuffer|null)>}*/ (Promise.resolve(null));
+      return /**@type {!Promise<?ArrayBuffer>}*/ (Promise.resolve(null));
     }
     // Shorthand for: reject promise if current promise chain is out of date.
     const checkStillCurrent = this.verifyStillCurrent();
     return tryResolve(() => utf8Decode(bytes)).then((body) => {
       checkStillCurrent();
-      this.ampCreativeJson_ = /** @type {!../../amp-a4a/0.1/amp-ad-type-defs.AmpTemplateCreativeDef} */ (tryParseJson(
-        body
-      ) || {});
+      this.ampCreativeJson_ =
+        /** @type {!../../amp-a4a/0.1/amp-ad-type-defs.AmpTemplateCreativeDef} */ (
+          tryParseJson(body) || {}
+        );
       // TODO(keithwrightbos): macro value validation?  E.g. http invalid?
+      const ampAdTemplateHelper = getAmpAdTemplateHelper(this.element);
       return ampAdTemplateHelper
         .fetch(this.ampCreativeJson_.templateUrl)
         .then((parsedTemplate) => {
@@ -169,12 +168,19 @@ export class AmpAdNetworkAdzerkImpl extends AmpA4A {
       this.creativeMetadata_['customElementExtensions'],
       'amp-mustache'
     );
+    this.creativeMetadata_['extensions'] =
+      this.creativeMetadata_['extensions'] || [];
+    mergeExtensionsMetadata(
+      this.creativeMetadata_['extensions'],
+      this.creativeMetadata_['customElementExtensions']
+    );
     return /**@type {?CreativeMetaDataDef}*/ (this.creativeMetadata_);
   }
 
   /** @override */
   onCreativeRender(unusedMetadata) {
     if (this.ampCreativeJson_ && this.ampCreativeJson_.data) {
+      const ampAdTemplateHelper = getAmpAdTemplateHelper(this.element);
       ampAdTemplateHelper
         .render(
           this.ampCreativeJson_.data,
diff --git a/extensions/amp-ad-network-adzerk-impl/0.1/test/test-amp-ad-network-adzerk-impl.js b/extensions/amp-ad-network-adzerk-impl/0.1/test/test-amp-ad-network-adzerk-impl.js
index c1862c2bff907..698673bfabf29 100644
--- a/extensions/amp-ad-network-adzerk-impl/0.1/test/test-amp-ad-network-adzerk-impl.js
+++ b/extensions/amp-ad-network-adzerk-impl/0.1/test/test-amp-ad-network-adzerk-impl.js
@@ -19,14 +19,14 @@
 // always available for them. However, when we test an impl in isolation,
 // AmpAd is not loaded already, so we need to load it separately.
 import '../../../amp-ad/0.1/amp-ad';
+import '../../../amp-mustache/0.1/amp-mustache';
 import {
   AMP_TEMPLATED_CREATIVE_HEADER_NAME,
   AmpAdNetworkAdzerkImpl,
 } from '../amp-ad-network-adzerk-impl';
-import {AmpMustache} from '../../../amp-mustache/0.1/amp-mustache';
 import {Xhr} from '../../../../src/service/xhr-impl';
 import {createElementWithAttributes} from '../../../../src/dom';
-import {utf8Decode, utf8Encode} from '../../../../src/utils/bytes';
+import {utf8Decode, utf8Encode} from '../../../../src/core/types/string/bytes';
 
 describes.fakeWin('amp-ad-network-adzerk-impl', {amp: true}, (env) => {
   let win, doc;
@@ -36,8 +36,15 @@ describes.fakeWin('amp-ad-network-adzerk-impl', {amp: true}, (env) => {
   beforeEach(() => {
     win = env.win;
     win.__AMP_MODE = {localDev: false};
-    win.AMP.registerTemplate('amp-mustache', AmpMustache);
     doc = win.document;
+
+    env.installExtension(
+      'amp-mustache',
+      '0.1',
+      /* latest */ true,
+      /* auto */ false
+    );
+
     fetchTextMock = env.sandbox.stub(Xhr.prototype, 'fetchText');
     element = createElementWithAttributes(doc, 'amp-ad', {
       'type': 'adzerk',
@@ -144,7 +151,12 @@ describes.fakeWin('amp-ad-network-adzerk-impl', {amp: true}, (env) => {
           expect(impl.getAmpAdMetadata()).to.jsonEqual({
             minifiedCreative: creative,
             customElementExtensions: ['amp-mustache'],
-            extensions: [],
+            extensions: [
+              {
+                'custom-element': 'amp-mustache',
+                'src': 'https://cdn.ampproject.org/v0/amp-mustache-0.1.js',
+              },
+            ],
           });
         });
     });
@@ -203,13 +215,31 @@ describes.fakeWin('amp-ad-network-adzerk-impl', {amp: true}, (env) => {
           expect(impl.getAmpAdMetadata()).to.jsonEqual({
             minifiedCreative: creative,
             customElementExtensions: ['amp-analytics', 'amp-mustache'],
-            extensions: [],
+            extensions: [
+              {
+                'custom-element': 'amp-analytics',
+                'src': 'https://cdn.ampproject.org/v0/amp-analytics-0.1.js',
+              },
+              {
+                'custom-element': 'amp-mustache',
+                'src': 'https://cdn.ampproject.org/v0/amp-mustache-0.1.js',
+              },
+            ],
           });
           // Won't insert duplicate
           expect(impl.getAmpAdMetadata()).to.jsonEqual({
             minifiedCreative: creative,
             customElementExtensions: ['amp-analytics', 'amp-mustache'],
-            extensions: [],
+            extensions: [
+              {
+                'custom-element': 'amp-analytics',
+                'src': 'https://cdn.ampproject.org/v0/amp-analytics-0.1.js',
+              },
+              {
+                'custom-element': 'amp-mustache',
+                'src': 'https://cdn.ampproject.org/v0/amp-mustache-0.1.js',
+              },
+            ],
           });
         });
     });
@@ -235,7 +265,12 @@ describes.fakeWin('amp-ad-network-adzerk-impl', {amp: true}, (env) => {
           expect(impl.getAmpAdMetadata()).to.jsonEqual({
             minifiedCreative: creative,
             customElementExtensions: ['amp-mustache'],
-            extensions: [],
+            extensions: [
+              {
+                'custom-element': 'amp-mustache',
+                'src': 'https://cdn.ampproject.org/v0/amp-mustache-0.1.js',
+              },
+            ],
           });
         });
     });
diff --git a/extensions/amp-ad-network-adzerk-impl/OWNERS b/extensions/amp-ad-network-adzerk-impl/OWNERS
index 94b65ebe76929..1b8c3b93f6d99 100644
--- a/extensions/amp-ad-network-adzerk-impl/OWNERS
+++ b/extensions/amp-ad-network-adzerk-impl/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js b/extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js
index 06fdc3cf4de56..bdec8159a7df5 100644
--- a/extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js
+++ b/extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js
@@ -20,13 +20,18 @@
 // Most other ad networks will want to put their A4A code entirely in the
 // extensions/amp-ad-network-${NETWORK_NAME}-impl directory.
 
-import '../../amp-a4a/0.1/real-time-config-manager';
-import {EXPERIMENT_INFO_MAP as AMPDOC_FIE_EXPERIMENT_INFO_MAP} from '../../../src/ampdoc-fie';
+import '../../../src/service/real-time-config/real-time-config-impl';
+import {ADS_INITIAL_INTERSECTION_EXP} from '../../../src/experiments/ads-initial-intersection-exp';
+import {
+  AmpA4A,
+  ConsentTupleDef,
+  DEFAULT_SAFEFRAME_VERSION,
+  XORIGIN_MODE,
+  assignAdUrlToError,
+} from '../../amp-a4a/0.1/amp-a4a';
 import {
-  AMP_AD_NO_CENTER_CSS_EXP,
   AmpAnalyticsConfigDef,
   QQID_HEADER,
-  RENDER_ON_IDLE_FIX_EXP,
   SANDBOX_HEADER,
   ValidAdContainerTypes,
   addCsiSignalsToAmpAnalyticsConfig,
@@ -35,6 +40,7 @@ import {
   getCsiAmpAnalyticsVariables,
   getEnclosingContainerTypes,
   getIdentityToken,
+  getServeNpaPromise,
   googleAdUrl,
   googleBlockParameters,
   googlePageParameters,
@@ -45,23 +51,17 @@ import {
   truncAndTimeUrl,
 } from '../../../ads/google/a4a/utils';
 import {
-  AmpA4A,
-  ConsentTupleDef,
-  DEFAULT_SAFEFRAME_VERSION,
-  NO_SIGNING_EXP,
-  XORIGIN_MODE,
-  assignAdUrlToError,
-} from '../../amp-a4a/0.1/amp-a4a';
-import {CONSENT_POLICY_STATE} from '../../../src/consent-state';
-import {Deferred} from '../../../src/utils/promise';
-import {FIE_INIT_CHUNKING_EXP} from '../../../src/friendly-iframe-embed';
+  CONSENT_POLICY_STATE,
+  CONSENT_STRING_TYPE,
+} from '../../../src/core/constants/consent-state';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {
   FlexibleAdSlotDataTypeDef,
   getFlexibleAdSlotData,
 } from './flexible-ad-slot-utils';
 import {Layout, isLayoutSizeDefined} from '../../../src/layout';
 import {Navigation} from '../../../src/service/navigation';
-import {RTC_VENDORS} from '../../amp-a4a/0.1/callout-vendors';
+import {RTC_VENDORS} from '../../../src/service/real-time-config/callout-vendors';
 import {
   RefreshManager, // eslint-disable-line no-unused-vars
   getRefreshManager,
@@ -75,6 +75,12 @@ import {
   sraBlockCallbackHandler,
 } from './sra-utils';
 import {WindowInterface} from '../../../src/window-interface';
+import {
+  addAmpExperimentIdToElement,
+  addExperimentIdToElement,
+  extractUrlExperimentId,
+  isInManualExperiment,
+} from '../../../ads/google/a4a/traffic-experiments';
 import {
   assertDoesNotContainDisplay,
   setImportantStyles,
@@ -85,21 +91,20 @@ import {
   isRTL,
   removeElement,
 } from '../../../src/dom';
-import {deepMerge, dict} from '../../../src/utils/object';
+import {deepMerge, dict} from '../../../src/core/types/object';
 import {dev, devAssert, user} from '../../../src/log';
-import {domFingerprintPlain} from '../../../src/utils/dom-fingerprint';
-import {escapeCssSelectorIdent} from '../../../src/css';
-import {
-  extractUrlExperimentId,
-  isInManualExperiment,
-} from '../../../ads/google/a4a/traffic-experiments';
+import {domFingerprintPlain} from '../../../src/core/dom/fingerprint';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {
   getAmpAdRenderOutsideViewport,
   incrementLoadingAds,
   is3pThrottled,
   waitFor3pThrottle,
 } from '../../amp-ad/0.1/concurrent-load';
-import {getCryptoRandomBytesArray, utf8Decode} from '../../../src/utils/bytes';
+import {
+  getCryptoRandomBytesArray,
+  utf8Decode,
+} from '../../../src/core/types/string/bytes';
 import {
   getExperimentBranch,
   isExperimentOn,
@@ -107,18 +112,23 @@ import {
 } from '../../../src/experiments';
 import {getMode} from '../../../src/mode';
 import {getMultiSizeDimensions} from '../../../ads/google/utils';
+
 import {getOrCreateAdCid} from '../../../src/ad-cid';
 
+import {AMP_SIGNATURE_HEADER} from '../../amp-a4a/0.1/signature-verifier';
+import {StoryAdAutoAdvance} from '../../../src/experiments/story-ad-auto-advance';
+import {StoryAdPlacements} from '../../../src/experiments/story-ad-placements';
+import {getPageLayoutBoxBlocking} from '../../../src/utils/page-layout-box';
 import {insertAnalyticsElement} from '../../../src/extension-analytics';
-import {isArray} from '../../../src/types';
-import {isCancellation} from '../../../src/error';
+import {isArray} from '../../../src/core/types';
+import {isCancellation} from '../../../src/error-reporting';
 import {
   lineDelimitedStreamer,
   metaJsonCreativeGrouper,
 } from '../../../ads/google/a4a/line-delimited-response-handler';
-import {parseQueryString} from '../../../src/url';
-import {stringHash32} from '../../../src/string';
-import {tryParseJson} from '../../../src/json';
+import {parseQueryString} from '../../../src/core/types/string/url';
+import {stringHash32} from '../../../src/core/types/string';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 /** @type {string} */
 const TAG = 'amp-ad-network-doubleclick-impl';
@@ -150,27 +160,12 @@ const ZINDEX_EXP_BRANCHES = {
 };
 
 /** @const {string} */
-const RANDOM_SUBDOMAIN_SAFEFRAME_EXP = 'random-subdomain-for-safeframe';
-
-/**
- * Branches of the random subdomain for SafeFrame experiment.
- * @const @enum{string}
- * @visibleForTesting
- */
-export const RANDOM_SUBDOMAIN_SAFEFRAME_BRANCHES = {
-  CONTROL: '21065817',
-  EXPERIMENT: '21065818',
-};
+const IDLE_CWV_EXP = 'dfp-render-on-idle-cwv-exp';
 
-/**
- * @const @enum {string}
- * @visibleForTesting
- * TODO(#28555): Clean up experiment
- */
-export const EXPAND_JSON_TARGETING_EXP = {
-  ID: 'expand-json-targeting',
-  CONTROL: '21066261',
-  EXPERIMENT: '21066262',
+/** @const @enum{string} */
+const IDLE_CWV_EXP_BRANCHES = {
+  CONTROL: '20208860',
+  EXPERIMENT: '20208859',
 };
 
 /**
@@ -242,6 +237,9 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
     /** @private {!../../../src/service/extensions-impl.Extensions} */
     this.extensions_ = Services.extensionsFor(this.win);
 
+    /** @private @const {?../../../src/service/performance-impl.Performance} */
+    this.performance_ = Services.performanceForOrNull(this.win);
+
     /** @private {?string} */
     this.qqid_ = null;
 
@@ -266,6 +264,9 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
     /** @type {!Array<string>} */
     this.experimentIds = [];
 
+    /** @type {!Array<string>} */
+    this.ampExperimentIds = [];
+
     /** @protected {boolean} */
     this.useSra = false;
 
@@ -359,6 +360,12 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
      * @private {boolean}
      */
     this.inZIndexHoldBack_ = false;
+
+    /**
+     * A signal from publishers to serve NPA through ad url.
+     * @private {boolean}
+     */
+    this.serveNpaSignal_ = false;
   }
 
   /**
@@ -380,7 +387,27 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
       // holdback branch sends non-numeric value.
       return false;
     }
-    return vpRange || 12;
+
+    if (vpRange) {
+      return vpRange;
+    }
+
+    let fallbackRange = 12;
+    if (!this.performance_) {
+      return fallbackRange;
+    }
+
+    const idleCwvExpSelectedBranch = getExperimentBranch(
+      this.win,
+      IDLE_CWV_EXP
+    );
+    if (idleCwvExpSelectedBranch === IDLE_CWV_EXP_BRANCHES.CONTROL) {
+      this.performance_.addEnabledExperiment('dfp-idle-cwv-control');
+    } else if (idleCwvExpSelectedBranch === IDLE_CWV_EXP_BRANCHES.EXPERIMENT) {
+      fallbackRange = 3;
+      this.performance_.addEnabledExperiment('dfp-idle-cwv-exp');
+    }
+    return fallbackRange;
   }
 
   /** @override */
@@ -400,9 +427,9 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
     // being schedule due to being beyond viewport max offset.  If slot
     // comes within standard outside viewport range, then ensure throttling
     // will not be applied.
-    this.getResource()
-      .whenWithinViewport(renderOutsideViewport)
-      .then(() => (this.isIdleRender_ = false));
+    this.whenWithinViewport(renderOutsideViewport).then(
+      () => (this.isIdleRender_ = false)
+    );
     return vpRange;
   }
 
@@ -437,80 +464,86 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
         this.experimentIds.push(forcedExperimentId);
       }
     }
-    const experimentInfoMap = /** @type {!Object<string, !../../../src/experiments.ExperimentInfo>} */ ({
-      [DOUBLECLICK_SRA_EXP]: {
-        isTrafficEligible: () =>
-          !forcedExperimentId &&
-          !this.win.document./*OK*/ querySelector(
-            'meta[name=amp-ad-enable-refresh], ' +
-              'amp-ad[type=doubleclick][data-enable-refresh], ' +
-              'meta[name=amp-ad-doubleclick-sra]'
+    const experimentInfoList =
+      /** @type {!Array<!../../../src/experiments.ExperimentInfo>} */ ([
+        {
+          experimentId: DOUBLECLICK_SRA_EXP,
+          isTrafficEligible: () =>
+            !forcedExperimentId &&
+            !this.win.document./*OK*/ querySelector(
+              'meta[name=amp-ad-enable-refresh], ' +
+                'amp-ad[type=doubleclick][data-enable-refresh], ' +
+                'meta[name=amp-ad-doubleclick-sra]'
+            ),
+          branches: Object.keys(DOUBLECLICK_SRA_EXP_BRANCHES).map(
+            (key) => DOUBLECLICK_SRA_EXP_BRANCHES[key]
           ),
-        branches: Object.keys(DOUBLECLICK_SRA_EXP_BRANCHES).map(
-          (key) => DOUBLECLICK_SRA_EXP_BRANCHES[key]
-        ),
-      },
-      [ZINDEX_EXP]: {
-        isTrafficEligible: () => true,
-        branches: Object.values(ZINDEX_EXP_BRANCHES),
-      },
-      [RANDOM_SUBDOMAIN_SAFEFRAME_EXP]: {
-        isTrafficEligible: () => true,
-        branches: [
-          RANDOM_SUBDOMAIN_SAFEFRAME_BRANCHES.CONTROL,
-          RANDOM_SUBDOMAIN_SAFEFRAME_BRANCHES.EXPERIMENT,
-        ],
-      },
-      [AMP_AD_NO_CENTER_CSS_EXP.id]: {
-        isTrafficEligible: () => true,
-        branches: [
-          [AMP_AD_NO_CENTER_CSS_EXP.control],
-          [AMP_AD_NO_CENTER_CSS_EXP.experiment],
-        ],
-      },
-      [[FIE_INIT_CHUNKING_EXP.id]]: {
-        isTrafficEligible: () => true,
-        branches: [
-          [FIE_INIT_CHUNKING_EXP.control],
-          [FIE_INIT_CHUNKING_EXP.experiment],
-        ],
-      },
-      [[EXPAND_JSON_TARGETING_EXP.ID]]: {
-        isTrafficEligible: () => true,
-        branches: [
-          [EXPAND_JSON_TARGETING_EXP.CONTROL],
-          [EXPAND_JSON_TARGETING_EXP.EXPERIMENT],
-        ],
-      },
-      [[RENDER_ON_IDLE_FIX_EXP.id]]: {
-        isTrafficEligible: () => true,
-        branches: [
-          [RENDER_ON_IDLE_FIX_EXP.control],
-          [RENDER_ON_IDLE_FIX_EXP.experiment],
-        ],
-      },
-      [NO_SIGNING_EXP.id]: {
-        isTrafficEligible: () => true,
-        branches: [[NO_SIGNING_EXP.control], [NO_SIGNING_EXP.experiment]],
-      },
-      ...AMPDOC_FIE_EXPERIMENT_INFO_MAP,
-    });
-    const setExps = this.randomlySelectUnsetExperiments_(experimentInfoMap);
+        },
+        {
+          experimentId: ZINDEX_EXP,
+          isTrafficEligible: () => true,
+          branches: Object.values(ZINDEX_EXP_BRANCHES),
+        },
+        {
+          experimentId: ADS_INITIAL_INTERSECTION_EXP.id,
+          isTrafficEligible: () => true,
+          branches: [
+            ADS_INITIAL_INTERSECTION_EXP.control,
+            ADS_INITIAL_INTERSECTION_EXP.experiment,
+          ],
+        },
+        {
+          experimentId: IDLE_CWV_EXP,
+          isTrafficEligible: () => {
+            return (
+              !!this.performance_ &&
+              !this.element.getAttribute('data-loading-strategy')
+            );
+          },
+          branches: Object.values(IDLE_CWV_EXP_BRANCHES),
+        },
+      ]);
+    const setExps = this.randomlySelectUnsetExperiments_(experimentInfoList);
     Object.keys(setExps).forEach(
       (expName) => setExps[expName] && this.experimentIds.push(setExps[expName])
     );
+    const moduleNomoduleExpId = this.getModuleNomoduleExpIds_();
+    if (moduleNomoduleExpId) {
+      this.experimentIds.push(moduleNomoduleExpId);
+    }
+
+    const ssrExpIds = this.getSsrExpIds_();
+    for (let i = 0; i < ssrExpIds.length; i++) {
+      addAmpExperimentIdToElement(ssrExpIds[i], this.element);
+    }
     if (setExps[ZINDEX_EXP] == ZINDEX_EXP_BRANCHES.HOLDBACK) {
       this.inZIndexHoldBack_ = true;
     }
+
+    const storyAdPlacementsExpId = getExperimentBranch(
+      this.win,
+      StoryAdPlacements.ID
+    );
+    if (storyAdPlacementsExpId) {
+      addExperimentIdToElement(storyAdPlacementsExpId, this.element);
+    }
+
+    const autoAdvanceExpBranch = getExperimentBranch(
+      this.win,
+      StoryAdAutoAdvance.ID
+    );
+    if (autoAdvanceExpBranch) {
+      addExperimentIdToElement(autoAdvanceExpBranch, this.element);
+    }
   }
 
   /**
    * For easier unit testing.
-   * @param {!Object<string, !../../../src/experiments.ExperimentInfo>} experimentInfoMap
+   * @param {!Array<!../../../src/experiments.ExperimentInfo>} experimentInfoList
    * @return {!Object<string, string>}
    */
-  randomlySelectUnsetExperiments_(experimentInfoMap) {
-    return randomlySelectUnsetExperiments(this.win, experimentInfoMap);
+  randomlySelectUnsetExperiments_(experimentInfoList) {
+    return randomlySelectUnsetExperiments(this.win, experimentInfoList);
   }
 
   /**
@@ -612,12 +645,15 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
   getPageParameters(consentTuple, instances) {
     instances = instances || [this];
     const tokens = getPageviewStateTokensForAdRequest(instances);
-    const {consentString, gdprApplies} = consentTuple;
+    const {additionalConsent, consentString, consentStringType, gdprApplies} =
+      consentTuple;
 
     return {
+      'ptt': 13,
       'npa':
         consentTuple.consentState == CONSENT_POLICY_STATE.INSUFFICIENT ||
-        consentTuple.consentState == CONSENT_POLICY_STATE.UNKNOWN
+        consentTuple.consentState == CONSENT_POLICY_STATE.UNKNOWN ||
+        this.serveNpaSignal_
           ? 1
           : null,
       'gdfp_req': '1',
@@ -626,10 +662,25 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
       'gct': this.getLocationQueryParameterValue('google_preview') || null,
       'psts': tokens.length ? tokens : null,
       'gdpr': gdprApplies === true ? '1' : gdprApplies === false ? '0' : null,
-      'gdpr_consent': consentString,
+      'gdpr_consent':
+        consentStringType != CONSENT_STRING_TYPE.US_PRIVACY_STRING
+          ? consentString
+          : null,
+      'addtl_consent': additionalConsent,
+      'us_privacy':
+        consentStringType == CONSENT_STRING_TYPE.US_PRIVACY_STRING
+          ? consentString
+          : null,
     };
   }
 
+  /**
+   * @override
+   */
+  skipClientSideValidation(headers) {
+    return headers && !headers.has(AMP_SIGNATURE_HEADER);
+  }
+
   /**
    * Constructs block-level url parameters.
    * @return {!Object<string,string|boolean|number>}
@@ -642,7 +693,7 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
     this.ifi_ =
       (this.isRefreshing && this.ifi_) || this.win['ampAdGoogleIfiCounter']++;
     const pageLayoutBox = this.isSinglePageStoryAd
-      ? this.element.getPageLayoutBox()
+      ? getPageLayoutBoxBlocking(this.element)
       : null;
     let msz = null;
     let psz = null;
@@ -651,7 +702,7 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
       this.win,
       this.element.parentElement
     );
-    const {fwSignal, slotWidth, parentWidth} = this.flexibleAdSlotData_;
+    const {fwSignal, parentWidth, slotWidth} = this.flexibleAdSlotData_;
     // If slotWidth is -1, that means its width must be determined by its
     // parent container, and so should have the same value as parentWidth.
     msz = `${slotWidth == -1 ? parentWidth : slotWidth}x-1`;
@@ -669,7 +720,6 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
       'adtest': isInManualExperiment(this.element) ? 'on' : null,
       'ifi': this.ifi_,
       'rc': this.refreshCount_ || null,
-      'frc': Number(this.fromResumeCallback) || null,
       'fluid': this.isFluidRequest_ ? 'height' : null,
       'fsf': this.forceSafeframe ? '1' : null,
       'msz': msz,
@@ -724,10 +774,11 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
   }
 
   /** @override */
-  getAdUrl(opt_consentTuple, opt_rtcResponsesPromise) {
+  getAdUrl(opt_consentTuple, opt_rtcResponsesPromise, opt_serveNpaSignal) {
     if (this.useSra) {
       this.sraDeferred = this.sraDeferred || new Deferred();
     }
+    this.serveNpaSignal_ = !!opt_serveNpaSignal;
     const consentTuple = opt_consentTuple || {};
     if (
       consentTuple.consentState == CONSENT_POLICY_STATE.UNKNOWN &&
@@ -766,19 +817,11 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
       return this.mergeRtcResponses_(results);
     });
 
-    // TODO(#28555): Delete extra logic when 'expand-json-targeting' exp launches.
-    const isJsonTargetingExpOn =
-      isExperimentOn(this.win, 'expand-json-targeting') &&
-      getExperimentBranch(this.win, EXPAND_JSON_TARGETING_EXP.ID) ===
-        EXPAND_JSON_TARGETING_EXP.EXPERIMENT;
-
-    const targetingExpansionPromise = isJsonTargetingExpOn
-      ? timerService
-          .timeoutPromise(1000, this.expandJsonTargeting_(rtcParamsPromise))
-          .catch(() => {
-            dev().warn(TAG, 'JSON Targeting expansion failed/timed out.');
-          })
-      : Promise.resolve();
+    const targetingExpansionPromise = timerService
+      .timeoutPromise(1000, this.expandJsonTargeting_(rtcParamsPromise))
+      .catch(() => {
+        dev().warn(TAG, 'JSON Targeting expansion failed/timed out.');
+      });
 
     Promise.all([
       rtcParamsPromise,
@@ -805,6 +848,11 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
     return this.getAdUrlDeferred.promise;
   }
 
+  /** @override */
+  getServeNpaSignal() {
+    return getServeNpaPromise(this.element);
+  }
+
   /**
    * Waits for RTC to complete, then overwrites json attr targeting values
    * with expanded vars.
@@ -908,16 +956,16 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
           if (!exclusions) {
             exclusions = {};
             if (this.jsonTargeting['categoryExclusions']) {
-              /** @type {!Array} */ (this.jsonTargeting[
-                'categoryExclusions'
-              ]).forEach((exclusion) => {
+              /** @type {!Array} */ (
+                this.jsonTargeting['categoryExclusions']
+              ).forEach((exclusion) => {
                 exclusions[exclusion] = true;
               });
             }
           }
-          /** @type {!Array} */ (rtcResponse.response[
-            'categoryExclusions'
-          ]).forEach((exclusion) => {
+          /** @type {!Array} */ (
+            rtcResponse.response['categoryExclusions']
+          ).forEach((exclusion) => {
             exclusions[exclusion] = true;
           });
         }
@@ -939,6 +987,7 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
     const allowlist = {
       'height': true,
       'width': true,
+      'json': true,
       'data-slot': true,
       'data-multi-size': true,
       'data-multi-size-validation': true,
@@ -965,12 +1014,12 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
         ),
       ATTR: (name) => {
         if (!allowlist[name.toLowerCase()]) {
-          dev().warn('TAG', `Invalid attribute ${name}`);
+          dev().warn(TAG, `Invalid attribute ${name}`);
         } else {
           return this.element.getAttribute(name);
         }
       },
-      ELEMENT_POS: () => this.element.getPageLayoutBox().top,
+      ELEMENT_POS: () => getPageLayoutBoxBlocking(this.element).top,
       SCROLL_TOP: () =>
         Services.viewportForDoc(this.getAmpDoc()).getScrollTop(),
       PAGE_HEIGHT: () =>
@@ -1091,7 +1140,7 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
    * @return {!LayoutRectOrDimsDef}
    */
   getSlotSize() {
-    const {width, height} = this.getDeclaredSlotSize_();
+    const {height, width} = this.getDeclaredSlotSize_();
     return width && height
       ? {width, height}
       : // width/height could be 'auto' in which case we fallback to measured.
@@ -1198,8 +1247,8 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
   }
 
   /** @override */
-  viewportCallback(inViewport) {
-    super.viewportCallback(inViewport);
+  viewportCallbackTemp(inViewport) {
+    super.viewportCallbackTemp(inViewport);
     if (this.reattemptToExpandFluidCreative_ && !inViewport) {
       // If the initial expansion attempt failed (e.g., the slot was within the
       // viewport), then we will re-attempt to expand it here whenever the slot
@@ -1223,11 +1272,6 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
 
   /** @override */
   getSafeframePath() {
-    const randomSubdomainExperimentBranch =
-      RANDOM_SUBDOMAIN_SAFEFRAME_BRANCHES.EXPERIMENT;
-    if (!this.experimentIds.includes(randomSubdomainExperimentBranch)) {
-      return super.getSafeframePath();
-    }
     safeFrameRandomSubdomain =
       safeFrameRandomSubdomain || this.getRandomString_();
 
@@ -1315,11 +1359,11 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
       position: isMultiSizeFluid ? 'relative' : null,
     });
 
-    // Set the centering CSS if the experiment is off
+    // Check if this is a multi-size creative that's narrower than the ad slot.
     if (
-      !isExperimentOn(this.win, 'amp-ad-no-center-css') ||
-      getExperimentBranch(this.win, AMP_AD_NO_CENTER_CSS_EXP.id) ===
-        AMP_AD_NO_CENTER_CSS_EXP.control
+      this.returnedSize_ &&
+      this.returnedSize_.width &&
+      this.returnedSize_.width < this.getSlotSize().width
     ) {
       setStyles(dev().assertElement(this.iframe), {
         top: '50%',
@@ -1421,7 +1465,7 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
               'Attempt to change size failed on fluid ' +
                 'creative. Will re-attempt when slot is out of the viewport.'
             );
-            const {width, height} = this.getSlotSize();
+            const {height, width} = this.getSlotSize();
             if (width && height) {
               // This call is idempotent, so it's okay to make it multiple
               // times.
@@ -1474,7 +1518,7 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
       newWidth &&
       newHeight
     );
-    const {width, height} = this.getDeclaredSlotSize_();
+    const {height, width} = this.getDeclaredSlotSize_();
     const returnedSizeDifferent = newWidth != width || newHeight != height;
     const heightNotIncreased = newHeight <= height;
     if (
@@ -1511,7 +1555,7 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
     ) {
       return;
     }
-    const {parentWidth, parentStyle} = this.flexibleAdSlotData_;
+    const {parentStyle, parentWidth} = this.flexibleAdSlotData_;
     const isRtl = isRTL(this.win.document);
     const dirStr = isRtl ? 'Right' : 'Left';
     const /** !Object<string, string> */ style = this.inZIndexHoldBack_
@@ -1534,7 +1578,7 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
       } else {
         // Must center creative within the viewport
         const viewportWidth = this.getViewport().getRect().width;
-        const pageLayoutBox = this.element.getPageLayoutBox();
+        const pageLayoutBox = getPageLayoutBoxBlocking(this.element);
         const whitespace = (viewportWidth - newWidth) / 2;
         if (isRtl) {
           style['margin-right'] = getMarginStr(
@@ -1676,8 +1720,10 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
               checkStillCurrent();
               // Exclude any instances that do not have an adPromise_ as this
               // indicates they were invalid.
-              const typeInstances = /** @type {!Array<!AmpAdNetworkDoubleclickImpl>}*/ (instances).filter(
-                (instance) => {
+              const typeInstances =
+                /** @type {!Array<!AmpAdNetworkDoubleclickImpl>}*/ (
+                  instances
+                ).filter((instance) => {
                   const isValid = instance.hasAdPromise();
                   if (!isValid) {
                     dev().info(
@@ -1688,8 +1734,7 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
                     );
                   }
                   return isValid;
-                }
-              );
+                });
               if (!typeInstances.length) {
                 // Only contained invalid elements.
                 return;
@@ -1736,7 +1781,8 @@ export class AmpAdNetworkDoubleclickImpl extends AmpA4A {
                         headersObj,
                         done,
                         sraRequestAdUrlResolvers,
-                        sraUrl
+                        sraUrl,
+                        this.isInNoSigningExp()
                       );
                     }
                   );
diff --git a/extensions/amp-ad-network-doubleclick-impl/0.1/safeframe-host.js b/extensions/amp-ad-network-doubleclick-impl/0.1/safeframe-host.js
index dbf96e89c4daf..e240d2274e78c 100644
--- a/extensions/amp-ad-network-doubleclick-impl/0.1/safeframe-host.js
+++ b/extensions/amp-ad-network-doubleclick-impl/0.1/safeframe-host.js
@@ -16,12 +16,13 @@
 
 import {Services} from '../../../src/services';
 import {dev, devAssert, user} from '../../../src/log';
-import {dict, hasOwn} from '../../../src/utils/object';
+import {dict, hasOwn} from '../../../src/core/types/object';
 import {getData} from '../../../src/event-helper';
+import {getPageLayoutBoxBlocking} from '../../../src/utils/page-layout-box';
 import {getStyle, setStyles} from '../../../src/style';
 import {parseUrlDeprecated} from '../../../src/url';
-import {throttle} from '../../../src/utils/rate-limit';
-import {tryParseJson} from '../../../src/json';
+import {throttle} from '../../../src/core/types/function';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 /**
  * Used to manage messages for different Safeframe ad slots.
@@ -203,7 +204,7 @@ export class SafeframeHostApi {
    * Returns true if the given window matches the Safeframe's content window.
    * Comparing to a null window will always return false.
    *
-   * @param {Window|null} otherWindow
+   * @param {?Window} otherWindow
    * @return {boolean}
    */
   equalsSafeframeContentWindow(otherWindow) {
@@ -282,15 +283,11 @@ export class SafeframeHostApi {
    * Returns the initialGeometry to assign to the name of the safeframe
    * for rendering. This needs to be done differently than all the other
    * geometry updates, because we don't actually have access to the
-   * rendered safeframe yet. Note that we are using getPageLayoutBox,
-   * which is not guaranteed to be perfectly accurate as it is from
-   * the last measure of the element. This is fine for our use case
-   * here, as even if the position is slightly off, we'll send the right
-   * size.
+   * rendered safeframe yet.
    * @return {string}
    */
   getInitialGeometry() {
-    const ampAdBox = this.baseInstance_.getPageLayoutBox();
+    const ampAdBox = getPageLayoutBoxBlocking(this.baseInstance_.element);
     const heightOffset = (ampAdBox.height - this.creativeSize_.height) / 2;
     const widthOffset = (ampAdBox.width - this.creativeSize_.width) / 2;
     const iframeBox = /** @type {!../../../src/layout-rect.LayoutRectDef} */ ({
@@ -754,7 +751,7 @@ export class SafeframeHostApi {
       })
       .catch((err) => {
         user().warn(TAG, err);
-        const {width, height} = this.baseInstance_.getSlotSize();
+        const {height, width} = this.baseInstance_.getSlotSize();
         if (width && height) {
           this.onFluidResize_(height);
         }
diff --git a/extensions/amp-ad-network-doubleclick-impl/0.1/sra-utils.js b/extensions/amp-ad-network-doubleclick-impl/0.1/sra-utils.js
index ce762dde5542e..9ceb8d2d22622 100644
--- a/extensions/amp-ad-network-doubleclick-impl/0.1/sra-utils.js
+++ b/extensions/amp-ad-network-doubleclick-impl/0.1/sra-utils.js
@@ -17,10 +17,11 @@
 import {RENDERING_TYPE_HEADER, XORIGIN_MODE} from '../../amp-a4a/0.1/amp-a4a';
 import {dev, devAssert} from '../../../src/log';
 import {getEnclosingContainerTypes} from '../../../ads/google/a4a/utils';
+import {getPageLayoutBoxBlocking} from '../../../src/utils/page-layout-box';
 import {isInManualExperiment} from '../../../ads/google/a4a/traffic-experiments';
-import {isObject} from '../../../src/types';
-import {tryResolve} from '../../../src/utils/promise';
-import {utf8Encode} from '../../../src/utils/bytes';
+import {isObject} from '../../../src/core/types';
+import {tryResolve} from '../../../src/core/data-structures/promise';
+import {utf8Encode} from '../../../src/core/types/string/bytes';
 
 /** @type {string} */
 const TAG = 'amp-ad-network-doubleclick-impl';
@@ -306,7 +307,7 @@ export function getPageOffsets(impls) {
   const adxs = [];
   const adys = [];
   impls.forEach((impl) => {
-    const layoutBox = impl.getPageLayoutBox();
+    const layoutBox = getPageLayoutBoxBlocking(impl.element);
     adxs.push(layoutBox.left);
     adys.push(layoutBox.top);
   });
@@ -399,13 +400,15 @@ function serializeItem_(key, value) {
  * @param {boolean} done
  * @param {!Array<function(?Response)>} sraRequestAdUrlResolvers
  * @param {string} sraUrl url of SRA request for error reporting
+ * @param {boolean=} isNoSigning
  */
 export function sraBlockCallbackHandler(
   creative,
   headersObj,
   done,
   sraRequestAdUrlResolvers,
-  sraUrl
+  sraUrl,
+  isNoSigning
 ) {
   const headerNames = Object.keys(headersObj);
   if (headerNames.length == 1 && isObject(headersObj[headerNames[0]])) {
@@ -435,12 +438,20 @@ export function sraBlockCallbackHandler(
       },
       has: (name) => !!headersObj[name.toLowerCase()],
     });
-  const fetchResponse =
-    /** @type {?Response} */
-    ({
-      headers,
-      arrayBuffer: () => tryResolve(() => utf8Encode(creative)),
-    });
+
+  let fetchResponse;
+  if (isNoSigning) {
+    const stringifiedHeaders = stringifyHeaderValues(headersObj);
+    fetchResponse = new Response(creative, {headers: stringifiedHeaders});
+  } else {
+    fetchResponse =
+      /** @type {?Response} */
+      ({
+        headers,
+        arrayBuffer: () => tryResolve(() => utf8Encode(creative)),
+      });
+  }
+
   // Pop head off of the array of resolvers as the response
   // should match the order of blocks declared in the ad url.
   // This allows the block to start rendering while the SRA
@@ -457,3 +468,21 @@ export function sraBlockCallbackHandler(
     );
   }
 }
+
+/**
+ * Takes any parsed header values from the object that are not strings and
+ * converts them back to the orginal stringified version.
+ * TODO above indicates this might get fixed upstream at some point.
+ * @param {!Object} headersObj
+ * @return {!Object<string, string>}
+ */
+function stringifyHeaderValues(headersObj) {
+  return Object.keys(headersObj).reduce((stringifiedHeaders, headerName) => {
+    let headerValue = headersObj[headerName];
+    if (headerValue && typeof headerValue != 'string') {
+      headerValue = JSON.stringify(headerValue);
+    }
+    stringifiedHeaders[headerName] = headerValue;
+    return stringifiedHeaders;
+  }, {});
+}
diff --git a/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-amp-ad-network-doubleclick-impl.js b/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-amp-ad-network-doubleclick-impl.js
index 8cc108b8bc0e2..0a60b756d59b9 100644
--- a/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-amp-ad-network-doubleclick-impl.js
+++ b/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-amp-ad-network-doubleclick-impl.js
@@ -19,7 +19,11 @@
 // always available for them. However, when we test an impl in isolation,
 // AmpAd is not loaded already, so we need to load it separately.
 import '../../../amp-ad/0.1/amp-ad';
-import * as bytesUtils from '../../../../src/utils/bytes';
+import * as bytesUtils from '../../../../src/core/types/string/bytes';
+import {
+  AMP_EXPERIMENT_ATTRIBUTE,
+  QQID_HEADER,
+} from '../../../../ads/google/a4a/utils';
 import {
   AMP_SIGNATURE_HEADER,
   VerificationStatus,
@@ -27,31 +31,29 @@ import {
 import {
   AmpA4A,
   CREATIVE_SIZE_HEADER,
+  MODULE_NOMODULE_PARAMS_EXP,
   XORIGIN_MODE,
   signatureVerifierFor,
 } from '../../../amp-a4a/0.1/amp-a4a';
 import {AmpAd} from '../../../amp-ad/0.1/amp-ad';
 import {
   AmpAdNetworkDoubleclickImpl,
-  EXPAND_JSON_TARGETING_EXP,
-  RANDOM_SUBDOMAIN_SAFEFRAME_BRANCHES,
   getNetworkId,
   getPageviewStateTokensForAdRequest,
   resetLocationQueryParametersForTesting,
   resetTokensToInstancesMap,
 } from '../amp-ad-network-doubleclick-impl';
-import {CONSENT_POLICY_STATE} from '../../../../src/consent-state';
-import {Deferred} from '../../../../src/utils/promise';
+import {
+  CONSENT_POLICY_STATE,
+  CONSENT_STRING_TYPE,
+} from '../../../../src/core/constants/consent-state';
+import {Deferred} from '../../../../src/core/data-structures/promise';
 import {FriendlyIframeEmbed} from '../../../../src/friendly-iframe-embed';
 import {Layout} from '../../../../src/layout';
-import {QQID_HEADER} from '../../../../ads/google/a4a/utils';
 import {SafeframeHostApi} from '../safeframe-host';
 import {Services} from '../../../../src/services';
 import {createElementWithAttributes} from '../../../../src/dom';
-import {
-  forceExperimentBranch,
-  toggleExperiment,
-} from '../../../../src/experiments';
+import {toggleExperiment} from '../../../../src/experiments';
 
 /**
  * We're allowing external resources because otherwise using realWin causes
@@ -68,12 +70,6 @@ const realWinConfig = {
   allowExternalResources: true,
 };
 
-const realWinConfigAmpAd = {
-  amp: {ampdoc: 'amp-ad'},
-  ampAdCss: true,
-  allowExternalResources: true,
-};
-
 /**
  * Creates an iframe promise, and instantiates element and impl, adding the
  * former to the document of the iframe.
@@ -408,10 +404,8 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
         env.sandbox.stub(impl, 'getViewport').callsFake(() => ({
           getRect: () => ({width: 400}),
         }));
-        env.sandbox.stub(impl.element, 'getPageLayoutBox').callsFake(() => ({
-          left: 25,
-          right: 25,
-        }));
+        env.sandbox.stub(impl.element, 'offsetLeft').value(25);
+        env.sandbox.stub(impl.element, 'offsetTop').value(25);
         const dirStr = testCase.direction == 'ltr' ? 'Left' : 'Right';
         impl.flexibleAdSlotData_ = {
           parentWidth: testCase.parentWidth,
@@ -527,9 +521,8 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
               '1';
           }
           impl.onCreativeRender(false);
-          const ampAnalyticsElement = impl.element.querySelector(
-            'amp-analytics'
-          );
+          const ampAnalyticsElement =
+            impl.element.querySelector('amp-analytics');
           expect(ampAnalyticsElement).to.be.ok;
           expect(ampAnalyticsElement.CONFIG).jsonEqual(
             impl.ampAnalyticsConfig_
@@ -638,7 +631,7 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
       doc.body.appendChild(element);
       impl = new AmpAdNetworkDoubleclickImpl(element);
       // Temporary fix for local test failure.
-      window.sandbox
+      env.sandbox
         .stub(impl, 'getIntersectionElementLayoutBox')
         .callsFake(() => {
           return {
@@ -650,19 +643,6 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
             height: 50,
           };
         });
-
-      // Reproduced from noopMethods in ads/google/a4a/test/test-utils.js,
-      // to fix failures when this is run after 'gulp build', without a 'dist'.
-      window.sandbox.stub(impl, 'getPageLayoutBox').callsFake(() => {
-        return {
-          top: 11,
-          left: 12,
-          right: 0,
-          bottom: 0,
-          width: 0,
-          height: 0,
-        };
-      });
     });
 
     afterEach(() => {
@@ -817,12 +797,6 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
     });
 
     it('expands CLIENT_ID in targeting', () => {
-      toggleExperiment(win, 'expand-json-targeting', true, true);
-      forceExperimentBranch(
-        win,
-        EXPAND_JSON_TARGETING_EXP.ID,
-        EXPAND_JSON_TARGETING_EXP.EXPERIMENT
-      );
       element.setAttribute(
         'json',
         `{
@@ -838,12 +812,6 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
     });
 
     it('expands CLIENT_ID in targeting inside array', () => {
-      toggleExperiment(win, 'expand-json-targeting', true, true);
-      forceExperimentBranch(
-        win,
-        EXPAND_JSON_TARGETING_EXP.ID,
-        EXPAND_JSON_TARGETING_EXP.EXPERIMENT
-      );
       element.setAttribute(
         'json',
         `{
@@ -997,17 +965,10 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
             return impl.getAdUrl().then((url2) => {
               expect(url2).to.match(/(\?|&)rc=1(&|$)/);
               expect(url1).to.match(/(\?|&)ifi=1(&|$)/);
-              expect(url2).to.not.match(/(\?|&)frc=1(&|$)/);
             });
           });
       });
     });
-    it('has correct frc value', () => {
-      impl.fromResumeCallback = true;
-      impl.getAdUrl().then((url) => {
-        expect(url).to.match(/(\?|&)frc=1(&|$)/);
-      });
-    });
     it('should include identity', () => {
       // Force get identity result by overloading window variable.
       const token = /**@type {!../../../ads/google/a4a/utils.IdentityToken}*/ ({
@@ -1064,6 +1025,39 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
           expect(url).to.not.match(/(\?|&)npa=(&|$)/);
         }));
 
+    it('should save opt_serveNpaSignal', () =>
+      impl
+        .getAdUrl(
+          {consentState: CONSENT_POLICY_STATE.SUFFICIENT},
+          undefined,
+          true
+        )
+        .then(() => {
+          expect(impl.serveNpaSignal_).to.be.true;
+        }));
+
+    it('should include npa=1 if `serveNpaSignal` is found, regardless of consent', () =>
+      impl
+        .getAdUrl(
+          {consentState: CONSENT_POLICY_STATE.SUFFICIENT},
+          undefined,
+          true
+        )
+        .then((url) => {
+          expect(url).to.match(/(\?|&)npa=1(&|$)/);
+        }));
+
+    it('should include npa=1 if `serveNpaSignal` is false & insufficient consent', () =>
+      impl
+        .getAdUrl(
+          {consentState: CONSENT_POLICY_STATE.INSUFFICIENT},
+          undefined,
+          false
+        )
+        .then((url) => {
+          expect(url).to.match(/(\?|&)npa=1(&|$)/);
+        }));
+
     it('should include gdpr_consent, if TC String is provided', () =>
       impl.getAdUrl({consentString: 'tcstring'}).then((url) => {
         expect(url).to.match(/(\?|&)gdpr_consent=tcstring(&|$)/);
@@ -1084,6 +1078,46 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
         expect(url).to.not.match(/(\?|&)gdpr=(&|$)/);
       }));
 
+    it('should include addtl_consent', () =>
+      impl.getAdUrl({additionalConsent: 'abc123'}).then((url) => {
+        expect(url).to.match(/(\?|&)addtl_consent=abc123(&|$)/);
+      }));
+
+    it('should not include addtl_consent, if additionalConsent is missing', () =>
+      impl.getAdUrl({}).then((url) => {
+        expect(url).to.not.match(/(\?|&)addtl_consent=/);
+      }));
+
+    it('should include us_privacy, if consentStringType matches', () =>
+      impl
+        .getAdUrl({
+          consentStringType: CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+          consentString: 'usPrivacyString',
+        })
+        .then((url) => {
+          expect(url).to.match(/(\?|&)us_privacy=usPrivacyString(&|$)/);
+          expect(url).to.not.match(/(\?|&)gdpr_consent=/);
+        }));
+
+    it('should include gdpr_consent, if consentStringType is not US_PRIVACY_STRING', () =>
+      impl
+        .getAdUrl({
+          consentStringType: CONSENT_STRING_TYPE.TCF_V2,
+          consentString: 'gdprString',
+        })
+        .then((url) => {
+          expect(url).to.match(/(\?|&)gdpr_consent=gdprString(&|$)/);
+          expect(url).to.not.match(/(\?|&)us_privacy=/);
+        }));
+
+    it('should include gdpr_consent, if consentStringType is undefined', () =>
+      impl
+        .getAdUrl({consentStringType: undefined, consentString: 'gdprString'})
+        .then((url) => {
+          expect(url).to.match(/(\?|&)gdpr_consent=gdprString(&|$)/);
+          expect(url).to.not.match(/(\?|&)us_privacy=/);
+        }));
+
     it('should include msz/psz/fws if in holdback control', () => {
       env.sandbox
         .stub(impl, 'randomlySelectUnsetExperiments_')
@@ -1105,6 +1139,9 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
         expect(url).to.not.match(/(=|%2C)2106317(3|4)(%2C|&|$)/);
       });
     });
+
+    it('sets ptt parameter', () =>
+      expect(impl.getAdUrl()).to.eventually.match(/(\?|&)ptt=13(&|$)/));
   });
 
   describe('#getPageParameters', () => {
@@ -1122,6 +1159,23 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
         }).npa
       ).to.equal(1);
     });
+
+    it('should include npa=1 when `serveNpaSignal_` is true', () => {
+      const element = createElementWithAttributes(doc, 'amp-ad', {
+        type: 'doubleclick',
+        height: 320,
+        width: 50,
+        'data-slot': '/1234/abc/def',
+        'always-serve-npa': 'gdpr',
+      });
+      const impl = new AmpAdNetworkDoubleclickImpl(element);
+      impl.serveNpaSignal_ = true;
+      expect(
+        impl.getPageParameters({
+          consentState: CONSENT_POLICY_STATE.SUFFICIENT,
+        }).npa
+      ).to.equal(1);
+    });
   });
 
   describe('#unlayoutCallback', () => {
@@ -1142,7 +1196,7 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
       impl.win.ampAdSlotIdCounter = 1;
       expect(impl.element.getAttribute('data-amp-slot-index')).to.not.be.ok;
       impl.layoutMeasureExecuted_ = true;
-      impl.uiHandler = {applyUnlayoutUI: () => {}};
+      impl.uiHandler = {applyUnlayoutUI: () => {}, cleanup: () => {}};
       const placeholder = doc.createElement('div');
       placeholder.setAttribute('placeholder', '');
       const fallback = doc.createElement('div');
@@ -1305,16 +1359,6 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
       env.sandbox
         .stub(impl, 'shouldInitializePromiseChain_')
         .callsFake(() => true);
-      env.sandbox.stub(impl, 'getPageLayoutBox').callsFake(() => {
-        return {
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          width: 200,
-          height: 50,
-        };
-      });
       env.sandbox.stub(impl, 'attemptChangeSize').callsFake((height, width) => {
         impl.element.style.height = `${height}px`;
         impl.element.style.width = `${width}px`;
@@ -1375,6 +1419,57 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
       });
     });
 
+    it('should center iframe if narrower than ad slot', () => {
+      env.sandbox
+        .stub(impl, 'sendXhrRequest')
+        .returns(mockSendXhrRequest('150x50', false));
+      impl.buildCallback();
+      impl.onLayoutMeasure();
+      return impl.layoutCallback().then(() => {
+        const {iframe} = impl;
+        expect(iframe).to.be.ok;
+        expect(iframe.getAttribute('style')).to.match(/left: 50%/);
+        expect(iframe.getAttribute('style')).to.match(/top: 50%/);
+        expect(iframe.getAttribute('style')).to.match(
+          /transform: translate\(-50%\, -50%\)/
+        );
+      });
+    });
+
+    it('should not center iframe if narrower than slot but is fluid', () => {
+      env.sandbox
+        .stub(impl, 'sendXhrRequest')
+        .returns(mockSendXhrRequest('0x0', false));
+      impl.buildCallback();
+      impl.onLayoutMeasure();
+      return impl.layoutCallback().then(() => {
+        const {iframe} = impl;
+        expect(iframe).to.be.ok;
+        expect(iframe.getAttribute('style')).to.not.match(/left: 50%/);
+        expect(iframe.getAttribute('style')).to.not.match(/top: 50%/);
+        expect(iframe.getAttribute('style')).to.not.match(
+          /transform: translate\(-50%\, -50%\)/
+        );
+      });
+    });
+
+    it('should not center iframe if same size as ad slot', () => {
+      env.sandbox
+        .stub(impl, 'sendXhrRequest')
+        .returns(mockSendXhrRequest('200x50', false));
+      impl.buildCallback();
+      impl.onLayoutMeasure();
+      return impl.layoutCallback().then(() => {
+        const {iframe} = impl;
+        expect(iframe).to.be.ok;
+        expect(iframe.getAttribute('style')).to.not.match(/left: 50%/);
+        expect(iframe.getAttribute('style')).to.not.match(/top: 50%/);
+        expect(iframe.getAttribute('style')).to.not.match(
+          /transform: translate\(-50%\, -50%\)/
+        );
+      });
+    });
+
     it('amp creative - should force iframe to match size of slot', () => {
       stubForAmpCreative();
       env.sandbox
@@ -1564,8 +1659,6 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
     });
 
     it('should use random subdomain when experiment is enabled', () => {
-      impl.experimentIds = [RANDOM_SUBDOMAIN_SAFEFRAME_BRANCHES.EXPERIMENT];
-
       const expectedPath =
         '^https:\\/\\/[\\w\\d]{32}.safeframe.googlesyndication.com' +
         '\\/safeframe\\/\\d+-\\d+-\\d+\\/html\\/container\\.html$';
@@ -1574,20 +1667,15 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
     });
 
     it('should use the same random subdomain for every slot on a page', () => {
-      impl.experimentIds = [RANDOM_SUBDOMAIN_SAFEFRAME_BRANCHES.EXPERIMENT];
-
       const first = impl.getSafeframePath();
 
       impl = new AmpAdNetworkDoubleclickImpl(element);
-      impl.experimentIds = [RANDOM_SUBDOMAIN_SAFEFRAME_BRANCHES.EXPERIMENT];
       const second = impl.getSafeframePath();
 
       expect(first).to.equal(second);
     });
 
     it('uses random subdomain if experiment is on without win.crypto', () => {
-      impl.experimentIds = [RANDOM_SUBDOMAIN_SAFEFRAME_BRANCHES.EXPERIMENT];
-
       env.sandbox.stub(bytesUtils, 'getCryptoRandomBytesArray').returns(null);
 
       const expectedPath =
@@ -1596,14 +1684,6 @@ describes.realWin('amp-ad-network-doubleclick-impl', realWinConfig, (env) => {
 
       expect(impl.getSafeframePath()).to.match(new RegExp(expectedPath));
     });
-
-    it('should use constant subdomain when experiment is disabled', () => {
-      const expectedPath =
-        '^https://tpc.googlesyndication.com' +
-        '\\/safeframe\\/\\d+-\\d+-\\d+\\/html\\/container\\.html$';
-
-      expect(impl.getSafeframePath()).to.match(new RegExp(expectedPath));
-    });
   });
 });
 
@@ -1644,96 +1724,6 @@ describes.realWin(
       });
     });
 
-    describes.realWin('centering', realWinConfigAmpAd, (env) => {
-      const size = {width: '300px', height: '150px'};
-
-      /**
-       * @param {!Element} iframe
-       * @param {{width: number, height: number}} expectedSize
-       */
-      function verifyCss(iframe, expectedSize) {
-        expect(iframe).to.be.ok;
-        const style = env.win.getComputedStyle(iframe);
-        expect(style.width).to.equal(expectedSize.width);
-        expect(style.height).to.equal(expectedSize.height);
-        // We don't know the exact values by which the frame will be
-        // translated, as this can vary depending on whether we use the
-        // height/width attributes, or the actual size of the frame. To make
-        // this less of a hassle, we'll just match against regexp.
-        expect(style.transform).to.equal('none');
-      }
-
-      afterEach(() => env.win.document.body.removeChild(impl.element));
-
-      it('centers iframe in slot when height && width', () => {
-        const setup = createImplTag(
-          {
-            width: '300',
-            height: '150',
-          },
-          element,
-          impl,
-          env
-        );
-        element = setup[0];
-        impl = setup[1];
-        env = setup[2];
-        expect(impl.element.getAttribute('width')).to.equal('300');
-        expect(impl.element.getAttribute('height')).to.equal('150');
-        verifyCss(impl.iframe, size);
-      });
-      it('centers iframe in slot when !height && !width', () => {
-        const setup = createImplTag(
-          {
-            layout: 'fixed',
-          },
-          element,
-          impl,
-          env
-        );
-        element = setup[0];
-        impl = setup[1];
-        env = setup[2];
-        expect(impl.element.getAttribute('width')).to.be.null;
-        expect(impl.element.getAttribute('height')).to.be.null;
-        verifyCss(impl.iframe, size);
-      });
-      it('centers iframe in slot when !height && width', () => {
-        const setup = createImplTag(
-          {
-            width: '300',
-            layout: 'fixed',
-          },
-          element,
-          impl,
-          env
-        );
-        element = setup[0];
-        impl = setup[1];
-        env = setup[2];
-        expect(impl.element.getAttribute('width')).to.equal('300');
-        expect(impl.element.getAttribute('height')).to.be.null;
-        verifyCss(impl.iframe, size);
-      });
-      it('centers iframe in slot when height && !width', () => {
-        const setup = createImplTag(
-          {
-            height: '150',
-            layout: 'fixed',
-          },
-          element,
-          impl,
-          env
-        );
-        element = setup[0];
-        impl = setup[1];
-        env = setup[2];
-        expect(impl.element.getAttribute('width')).to.be.null;
-        expect(impl.element.getAttribute('height')).to.equal('150');
-        verifyCss(impl.iframe, size);
-      });
-    });
-
     describe('#fireDelayedImpressions', () => {
       let isSecureStub;
       beforeEach(() => {
@@ -1809,9 +1799,7 @@ describes.realWin(
           'type': 'doubleclick',
         });
         impl = new AmpAdNetworkDoubleclickImpl(element);
-        env.sandbox
-          .stub(impl, 'getResource')
-          .returns({whenWithinViewport: () => Promise.resolve()});
+        env.sandbox.stub(impl, 'whenWithinViewport').returns(Promise.resolve());
       });
 
       it('should use experiment value', () => {
@@ -1916,6 +1904,11 @@ describes.realWin(
     describe('#setPageLevelExperiments', () => {
       let randomlySelectUnsetExperimentsStub;
       let extractUrlExperimentIdStub;
+      const ampdocMock = {
+        whenFirstVisible: () => new Deferred().promise,
+        getMetaByName: () => null,
+      };
+
       beforeEach(() => {
         randomlySelectUnsetExperimentsStub = env.sandbox.stub(
           impl,
@@ -1926,29 +1919,41 @@ describes.realWin(
           'extractUrlExperimentId_'
         );
         env.sandbox.stub(AmpA4A.prototype, 'buildCallback').callsFake(() => {});
-        env.sandbox.stub(impl, 'getAmpDoc').returns({
-          whenFirstVisible: () => new Deferred().promise,
-          getMetaByName: () => null,
-        });
+        env.sandbox.stub(impl, 'getAmpDoc').returns(ampdocMock);
       });
+
       afterEach(() => {
         toggleExperiment(env.win, 'envDfpInvOrigDeprecated', false);
       });
 
+      it('should have correctly formatted experiment map', () => {
+        randomlySelectUnsetExperimentsStub.returns({});
+        impl.buildCallback();
+        const experimentMap =
+          randomlySelectUnsetExperimentsStub.firstCall.args[0];
+        Object.keys(experimentMap).forEach((key) => {
+          expect(key).to.be.a('string');
+          const {branches} = experimentMap[key];
+          expect(branches).to.exist;
+          expect(branches).to.be.a('array');
+          branches.forEach((branch) => expect(branch).to.be.a('string'));
+        });
+      });
+
       it('should select SRA experiments', () => {
         randomlySelectUnsetExperimentsStub.returns({
           doubleclickSraExp: '117152667',
         });
         extractUrlExperimentIdStub.returns(undefined);
         impl.buildCallback();
-        expect(impl.experimentIds.includes('117152667')).to.be.true;
+        expect(impl.experimentIds).to.include('117152667');
         expect(impl.useSra).to.be.true;
       });
 
       it('should force-select SRA experiment from URL experiment ID', () => {
         randomlySelectUnsetExperimentsStub.returns({});
         impl.setPageLevelExperiments('8');
-        expect(impl.experimentIds.includes('117152667')).to.be.true;
+        expect(impl.experimentIds).to.include('117152667');
       });
 
       describe('should properly limit SRA traffic', () => {
@@ -1958,9 +1963,8 @@ describes.realWin(
           impl.setPageLevelExperiments();
           // args format is call array followed by parameter array so expect
           // first call, first param.
-          experimentInfoMap =
-            randomlySelectUnsetExperimentsStub.args[0][0]['doubleclickSraExp'];
-          expect(experimentInfoMap).to.be.ok;
+          experimentInfoMap = randomlySelectUnsetExperimentsStub.args[0][0][0];
+          expect(experimentInfoMap.experimentId).to.equal('doubleclickSraExp');
           expect(impl.useSra).to.be.false;
         });
 
@@ -1990,6 +1994,104 @@ describes.realWin(
           expect(experimentInfoMap.isTrafficEligible()).to.be.false;
         });
       });
+
+      describe('detect module/nomodule experiment', () => {
+        it('should identify module/nomodule control when runtime-type is 10', () => {
+          env.sandbox
+            .stub(ampdocMock, 'getMetaByName')
+            .withArgs('runtime-type')
+            .returns('10');
+          randomlySelectUnsetExperimentsStub.returns({});
+          impl.setPageLevelExperiments();
+          expect(impl.experimentIds).to.include(
+            MODULE_NOMODULE_PARAMS_EXP.CONTROL
+          );
+        });
+
+        it('should identify module/nomodule experiment when runtime-type is 2', () => {
+          env.sandbox
+            .stub(ampdocMock, 'getMetaByName')
+            .withArgs('runtime-type')
+            .returns('2');
+          randomlySelectUnsetExperimentsStub.returns({});
+          impl.setPageLevelExperiments();
+          expect(impl.experimentIds).to.include(
+            MODULE_NOMODULE_PARAMS_EXP.EXPERIMENT
+          );
+        });
+
+        // Only 2, 4, 10 should be recognized.
+        it('should ignore module/nomodule experiment when runtime-type is 6', () => {
+          env.sandbox
+            .stub(ampdocMock, 'getMetaByName')
+            .withArgs('runtime-type')
+            .returns('6');
+          randomlySelectUnsetExperimentsStub.returns({});
+          impl.setPageLevelExperiments();
+          expect(
+            impl.experimentIds.includes(MODULE_NOMODULE_PARAMS_EXP.EXPERIMENT)
+          ).to.be.false;
+          expect(
+            impl.experimentIds.includes(MODULE_NOMODULE_PARAMS_EXP.CONTROL)
+          ).to.be.false;
+        });
+      });
+
+      describe('SSR experiments', () => {
+        it('should include SSR experiments', () => {
+          env.sandbox
+            .stub(ampdocMock, 'getMetaByName')
+            .withArgs('amp-usqp')
+            .returns('5798237482=45,3579282=0');
+          randomlySelectUnsetExperimentsStub.returns({});
+          impl.setPageLevelExperiments();
+          expect(element.getAttribute(AMP_EXPERIMENT_ATTRIBUTE)).to.equal(
+            '579823748245,357928200'
+          );
+        });
+
+        it('should pad value to two chars', () => {
+          env.sandbox
+            .stub(ampdocMock, 'getMetaByName')
+            .withArgs('amp-usqp')
+            .returns('5798237482=1');
+          randomlySelectUnsetExperimentsStub.returns({});
+          impl.setPageLevelExperiments();
+          expect(element.getAttribute(AMP_EXPERIMENT_ATTRIBUTE)).to.equal(
+            '579823748201'
+          );
+        });
+
+        it('should ignore excessively large value', () => {
+          env.sandbox
+            .stub(ampdocMock, 'getMetaByName')
+            .withArgs('amp-usqp')
+            .returns('5798237482=100');
+          randomlySelectUnsetExperimentsStub.returns({});
+          impl.setPageLevelExperiments();
+          expect(element.getAttribute(AMP_EXPERIMENT_ATTRIBUTE)).to.be.null;
+        });
+
+        it('should ignore negative values', () => {
+          env.sandbox
+            .stub(ampdocMock, 'getMetaByName')
+            .withArgs('amp-usqp')
+            .returns('5798237482=-1');
+          randomlySelectUnsetExperimentsStub.returns({});
+          impl.setPageLevelExperiments();
+          expect(element.getAttribute(AMP_EXPERIMENT_ATTRIBUTE)).to.be.null;
+        });
+
+        it('should ignore non-number values', () => {
+          env.sandbox
+            .stub(ampdocMock, 'getMetaByName')
+            .withArgs('amp-usqp')
+            .returns('5798237482=testing');
+          randomlySelectUnsetExperimentsStub.returns({});
+          impl.setPageLevelExperiments();
+          expect(element.getAttribute(AMP_EXPERIMENT_ATTRIBUTE)).to.be.null;
+        });
+      });
     });
 
     describe('#getPageviewStateTokensForAdRequest', () => {
@@ -2131,9 +2233,6 @@ describes.realWin(
       it('should change safeframeApi value', () => {
         impl.safeframeApi_ = mockSafeFrameApi;
         impl.isRefreshing = true;
-        env.sandbox
-          .stub(impl, 'getPageLayoutBox')
-          .returns({width: 411, height: 1500, left: 0, right: 0});
         impl.getAdditionalContextMetadata(/* isSafeFrame= */ true);
         expect(impl.safeframeApi_).to.not.equal(mockSafeFrameApi);
         // We just want to make sure the value's changed and is not null.
diff --git a/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-fluid.js b/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-fluid.js
index 0b1ba85972949..9178e349b0244 100644
--- a/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-fluid.js
+++ b/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-fluid.js
@@ -22,7 +22,7 @@ import '../../../amp-ad/0.1/amp-ad';
 import {AmpAdNetworkDoubleclickImpl} from '../amp-ad-network-doubleclick-impl';
 import {SafeframeHostApi, removeSafeframeListener} from '../safeframe-host';
 import {createElementWithAttributes} from '../../../../src/dom';
-import {utf8Encode} from '../../../../src/utils/bytes';
+import {utf8Encode} from '../../../../src/core/types/string/bytes';
 
 /**
  * We're allowing external resources because otherwise using realWin causes
@@ -374,9 +374,9 @@ describes.realWin('DoubleClick Fast Fetch Fluid', realWinConfig, (env) => {
     impl.isVerifiedAmpCreative_ = true;
     impl.reattemptToExpandFluidCreative_ = true;
     // Should do nothing
-    impl.viewportCallback(true);
+    impl.viewportCallbackTemp(true);
     expect(attemptChangeHeightStub).to.not.be.called;
-    impl.viewportCallback(false);
+    impl.viewportCallbackTemp(false);
     expect(attemptChangeHeightStub).to.be.calledOnce;
   });
 
diff --git a/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-rtc.js b/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-rtc.js
index 4cd7410a75a89..37d4e884fb30d 100644
--- a/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-rtc.js
+++ b/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-rtc.js
@@ -20,8 +20,8 @@
 // AmpAd is not loaded already, so we need to load it separately.
 import '../../../amp-ad/0.1/amp-ad';
 import {AmpAdNetworkDoubleclickImpl} from '../amp-ad-network-doubleclick-impl';
-import {RTC_ERROR_ENUM} from '../../../amp-a4a/0.1/real-time-config-manager';
-import {RTC_VENDORS} from '../../../amp-a4a/0.1/callout-vendors';
+import {RTC_ERROR_ENUM} from '../../../../src/service/real-time-config/real-time-config-impl';
+import {RTC_VENDORS} from '../../../../src/service/real-time-config/callout-vendors';
 import {Services} from '../../../../src/services';
 import {createElementWithAttributes} from '../../../../src/dom';
 
@@ -152,6 +152,7 @@ describes.realWin('DoubleClick Fast Fetch RTC', {amp: true}, (env) => {
         expectedParams,
         expectedJsonTargeting
       );
+      delete RTC_VENDORS['TEMP_VENDOR'];
     });
 
     it('should properly merge into existing json', () => {
diff --git a/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-safeframe.js b/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-safeframe.js
index 7f4b40f3736d8..9b744535ca369 100644
--- a/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-safeframe.js
+++ b/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-safeframe.js
@@ -341,14 +341,6 @@ describes.realWin(
       });
 
       it('should get current geometry when safeframe fills amp-ad', () => {
-        env.sandbox
-          ./*OK*/ stub(safeframeHost.baseInstance_, 'getPageLayoutBox')
-          .returns({
-            top: 0,
-            left: 0,
-            right: 300,
-            bottom: 250,
-          });
         const safeframeMock = createElementWithAttributes(doc, 'iframe', {
           'class': 'safeframe',
         });
@@ -392,14 +384,6 @@ describes.realWin(
       });
 
       it('should get geometry when safeframe does not fill amp-ad', () => {
-        env.sandbox
-          ./*OK*/ stub(safeframeHost.baseInstance_, 'getPageLayoutBox')
-          .returns({
-            top: 0,
-            left: 0,
-            right: 50,
-            bottom: 50,
-          });
         // In this case, the safeframe is smaller than its containing
         // amp-ad element.
         const safeframeMock = createElementWithAttributes(doc, 'iframe', {
@@ -444,14 +428,6 @@ describes.realWin(
 
       it('should handle cancellation', () => {
         expectAsyncConsoleError(/cancellation/i, 1);
-        env.sandbox
-          ./*OK*/ stub(safeframeHost.baseInstance_, 'getPageLayoutBox')
-          .returns({
-            top: 0,
-            left: 0,
-            right: 50,
-            bottom: 50,
-          });
         // In this case, the safeframe is smaller than its containing
         // amp-ad element.
         const safeframeMock = createElementWithAttributes(doc, 'iframe', {
@@ -481,14 +457,6 @@ describes.realWin(
       });
 
       it('should get geometry when scrolled', () => {
-        env.sandbox
-          ./*OK*/ stub(safeframeHost.baseInstance_, 'getPageLayoutBox')
-          .returns({
-            top: 0,
-            left: 0,
-            right: 50,
-            bottom: 50,
-          });
         // In this case, the safeframe is smaller than its containing
         // amp-ad element.
         const safeframeMock = createElementWithAttributes(doc, 'iframe', {
@@ -589,14 +557,6 @@ describes.realWin(
 
     describe('formatGeom', () => {
       it('should build proper geometry update', () => {
-        env.sandbox
-          ./*OK*/ stub(safeframeHost.baseInstance_, 'getPageLayoutBox')
-          .returns({
-            top: 200,
-            left: 100,
-            right: 400,
-            bottom: 800,
-          });
         const iframeBox = {
           top: 300,
           left: 200,
diff --git a/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-sra.js b/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-sra.js
index 1f9a550031a99..25719ca9948a6 100644
--- a/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-sra.js
+++ b/extensions/amp-ad-network-doubleclick-impl/0.1/test/test-doubleclick-sra.js
@@ -26,7 +26,7 @@ import {
   resetSraStateForTesting,
 } from '../amp-ad-network-doubleclick-impl';
 import {BaseElement} from '../../../../src/base-element';
-import {Deferred} from '../../../../src/utils/promise';
+import {Deferred} from '../../../../src/core/data-structures/promise';
 import {EXPERIMENT_ATTRIBUTE} from '../../../../ads/google/a4a/utils';
 import {MANUAL_EXPERIMENT_ID} from '../../../../ads/google/a4a/traffic-experiments';
 import {SignatureVerifier} from '../../../amp-a4a/0.1/signature-verifier';
@@ -51,8 +51,8 @@ import {
 import {Xhr} from '../../../../src/service/xhr-impl';
 import {createElementWithAttributes} from '../../../../src/dom';
 import {devAssert} from '../../../../src/log';
-import {layoutRectLtwh} from '../../../../src/layout-rect';
-import {utf8Decode, utf8Encode} from '../../../../src/utils/bytes';
+import {layoutRectLtwh} from '../../../../src/core/math/layout-rect';
+import {utf8Decode, utf8Encode} from '../../../../src/core/types/string/bytes';
 
 const config = {amp: true, allowExternalResources: true};
 
@@ -83,6 +83,20 @@ describes.realWin('Doubleclick SRA', config, (env) => {
     return element;
   }
 
+  function createElementWithRect(rect) {
+    const el = doc.createElement('div');
+    setElementRect(el, rect);
+    return el;
+  }
+
+  function setElementRect(el, {height, left, top, width}) {
+    env.sandbox.stub(el, 'offsetParent').value(null);
+    env.sandbox.stub(el, 'offsetLeft').value(left);
+    env.sandbox.stub(el, 'offsetTop').value(top);
+    env.sandbox.stub(el, 'offsetWidth').value(width);
+    env.sandbox.stub(el, 'offsetHeight').value(height);
+  }
+
   describe('#SRA enabled', () => {
     it('should be disabled by default', () => {
       const element = createAndAppendAdElement();
@@ -274,12 +288,12 @@ describes.realWin('Doubleclick SRA', config, (env) => {
       expect(getForceSafeframe(impls)).to.jsonEqual({'fsfs': '0,1,1'});
     });
     it('should combine page offsets', () => {
-      impls[0] = {getPageLayoutBox: () => ({left: 123, top: 456})};
+      impls[0] = {element: createElementWithRect({left: 123, top: 456})};
       expect(getPageOffsets(impls)).to.jsonEqual({
         'adxs': '123',
         'adys': '456',
       });
-      impls[1] = {getPageLayoutBox: () => ({left: 123, top: 789})};
+      impls[1] = {element: createElementWithRect({left: 123, top: 789})};
       expect(getPageOffsets(impls)).to.jsonEqual({
         'adxs': '123,123',
         'adys': '456,789',
@@ -362,21 +376,20 @@ describes.realWin('Doubleclick SRA', config, (env) => {
           'data-multi-size': '9999x9999',
         };
         const element1 = createElementWithAttributes(doc, 'amp-ad', config1);
+        setElementRect(element1, {top: 123, left: 456});
         const impl1 = new AmpAdNetworkDoubleclickImpl(element1);
-        env.sandbox
-          .stub(impl1, 'getPageLayoutBox')
-          .returns({top: 123, left: 456});
         impl1.experimentIds = [MANUAL_EXPERIMENT_ID];
         env.sandbox
           .stub(impl1, 'generateAdKey_')
           .withArgs('50x320')
           .returns('13579');
         impl1.populateAdUrlState();
-        impl1.identityToken = /**@type {!../../../ads/google/a4a/utils.IdentityToken}*/ ({
-          token: 'abcdef',
-          jar: 'some_jar',
-          pucrd: 'some_pucrd',
-        });
+        impl1.identityToken =
+          /**@type {!../../../ads/google/a4a/utils.IdentityToken}*/ ({
+            token: 'abcdef',
+            jar: 'some_jar',
+            pucrd: 'some_pucrd',
+          });
         const targeting2 = {
           cookieOptOut: 1,
           categoryExclusions: 'food',
@@ -393,10 +406,8 @@ describes.realWin('Doubleclick SRA', config, (env) => {
           'data-multi-size': '1x2,3x4',
         };
         const element2 = createElementWithAttributes(doc, 'amp-ad', config2);
+        setElementRect(element2, {top: 789, left: 101});
         const impl2 = new AmpAdNetworkDoubleclickImpl(element2);
-        env.sandbox
-          .stub(impl2, 'getPageLayoutBox')
-          .returns({top: 789, left: 101});
         env.sandbox
           .stub(impl2, 'generateAdKey_')
           .withArgs('250x300')
@@ -800,6 +811,40 @@ describes.realWin('Doubleclick SRA', config, (env) => {
       });
     });
 
+    it('should return a real response in no-siging exp', async () => {
+      const headerObj = {a: 'b', c: 123};
+      const slotDeferred = new Deferred();
+      const sraRequestAdUrlResolvers = [
+        slotDeferred.resolve,
+        {
+          resolve: () => {
+            throw new Error();
+          },
+        },
+      ];
+      sraBlockCallbackHandler(
+        creative,
+        headerObj,
+        /* done */ false,
+        sraRequestAdUrlResolvers,
+        /* sraUrl */ 'http://www.example.com',
+        /* isNoSigning */ true
+      );
+      expect(sraRequestAdUrlResolvers.length).to.equal(1);
+      const fetchResponse = await slotDeferred.promise;
+      expect(fetchResponse).to.be.an.instanceof(Response);
+      expect(fetchResponse.body).to.be.an.instanceof(ReadableStream);
+      expect(fetchResponse.headers.get('a')).to.equal('b');
+      expect(fetchResponse.headers.get('c')).to.equal('123');
+      expect(
+        fetchResponse.headers.get(RENDERING_TYPE_HEADER.toLowerCase())
+      ).to.equal(XORIGIN_MODE.SAFEFRAME);
+      expect(fetchResponse.headers.has('unknown')).to.be.false;
+
+      const text = await fetchResponse.text();
+      expect(text).to.equal(creative);
+    });
+
     it('should handle multiple blocks', () => {
       const blocks = [
         {
@@ -821,7 +866,7 @@ describes.realWin('Doubleclick SRA', config, (env) => {
       const promises = [];
       const resolvers = blocks.map((block) => block.deferred.resolve);
       for (let i = 1; i <= blocks.length; i++) {
-        const {creative, headers, deferred} = blocks[i - 1];
+        const {creative, deferred, headers} = blocks[i - 1];
         sraBlockCallbackHandler(
           creative,
           headers,
diff --git a/extensions/amp-ad-network-doubleclick-impl/OWNERS b/extensions/amp-ad-network-doubleclick-impl/OWNERS
index bbe27198cbdba..add75ed6646e5 100644
--- a/extensions/amp-ad-network-doubleclick-impl/OWNERS
+++ b/extensions/amp-ad-network-doubleclick-impl/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-ad-network-doubleclick-impl/always-serve-npa.md b/extensions/amp-ad-network-doubleclick-impl/always-serve-npa.md
new file mode 100644
index 0000000000000..dc57407c46f91
--- /dev/null
+++ b/extensions/amp-ad-network-doubleclick-impl/always-serve-npa.md
@@ -0,0 +1,41 @@
+<!---
+Copyright 2020 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.
+-->
+
+# Always Serve NPA
+
+`always-serve-npa` provides a way to utilize the `<amp-geo>` component to detect user's geo location to decide if a non-personalized ad should be requested, regardless of the [user's consent decision](amp-consent.md). The value of `always-serve-npa` should be a comma delimited string of geo group codes which are defined in `<amp-geo>` (details [here](https://github.com/ampproject/amphtml/blob/main/extensions/amp-geo/amp-geo.md)). If no value is found or an empty string is provided, then a NPA will always be requested, regardless of the location.
+
+```html
+<amp-ad
+  width="320"
+  height="50"
+  always-serve-npa="geoGroup1,geoGroup2"
+  type="doubleclick"
+  data-slot="/4119129/mobile_ad_banner"
+>
+</amp-ad>
+
+<amp-geo>
+  <script type="application/json">
+    {
+      "ISOCountryGroups": {
+        "geoGroup1": [ "preset-eea", "unknown" ],
+        "geoGroup2": [ "preset-us-ca" ]
+      }
+    }
+  </script>
+</amp-geo>
+```
diff --git a/extensions/amp-ad-network-doubleclick-impl/amp-ad-network-doubleclick-impl-internal.md b/extensions/amp-ad-network-doubleclick-impl/amp-ad-network-doubleclick-impl-internal.md
index 4d49835538e75..101e7e7623382 100644
--- a/extensions/amp-ad-network-doubleclick-impl/amp-ad-network-doubleclick-impl-internal.md
+++ b/extensions/amp-ad-network-doubleclick-impl/amp-ad-network-doubleclick-impl-internal.md
@@ -70,6 +70,11 @@ limitations under the License.
     <td>Allows slots 3-12 viewports down to render while the AMP scheduler is idle.</td>
     <td>Launched</td>
   </tr>
+  <tr>
+    <td><a href="lazy-fetch.md">Lazy Fetch</a></td>
+    <td>Allows for delaying ad request until slot is within a configurable distance from the viewport.</td>
+    <td>Launched</td>
+  </tr>
   <tr>
     <td><a href="refresh.md">Refresh</a></td>
     <td>Enabled slots will periodically refetch new creatives.</td>
@@ -94,6 +99,11 @@ limitations under the License.
     <td>Integration with AMP Consent extension.</td>
     <td>Launched</td>
   </tr>
+  <tr>
+    <td><a href="always-serve-npa.md">Always Serve NPA</a></td>
+    <td>Utilizes <code>&lt;amp-geo></code> to detect user's geo location to decide if a non-personalized ad should be requested regardless of user consent.</td>
+    <td>Beta</td>
+  </tr>
 </table>
 
 #### Examples
@@ -131,21 +141,21 @@ For multi-size attributes, see the <a href="multi-size.md">multi-size documentat
 
 ### Supported parameters
 
-- `data-slot`: Full path of the ad unit with the network code and unit code.
-- `data-multi-size`: See the <a href="multi-size.md">multi-size documentation page</a> for details.
-- `data-multi-size-validation`
+-   `data-slot`: Full path of the ad unit with the network code and unit code.
+-   `data-multi-size`: See the <a href="multi-size.md">multi-size documentation page</a> for details.
+-   `data-multi-size-validation`
 
 Supported via `json` attribute:
 
-- `categoryExclusions`: Sets a slot-level category exclusion for the given label name.
-- `cookieOptions`: Sets options for ignoring DFP cookies on the current page.
-  - 0: Enables DFP cookies on ad requests on the page. This option is set by default.
-  - 1: Ignores DFP cookies on subsequent ad requests and prevents cookies from being created on the page.
-- `tagForChildDirectedTreatment`: Configures whether the slot should be treated as child-directed.
-  See the TFCD article for <a href="https://support.google.com/dfp_sb/answer/3721907">Small Business</a> or <a href="https://support.google.com/dfp_premium/answer/3671211">Premium</a> for more details and allowed values.
-- `targeting`: Sets a custom targeting parameter for this slot. Values must of the form:
-  - `"<key_string>":"<value_string>"` or
-  - `"<key_string>":["<value1>", "<value2>", ...]`. See below for example.
+-   `categoryExclusions`: Sets a slot-level category exclusion for the given label name.
+-   `cookieOptions`: Sets options for ignoring DFP cookies on the current page.
+    -   0: Enables DFP cookies on ad requests on the page. This option is set by default.
+    -   1: Ignores DFP cookies on subsequent ad requests and prevents cookies from being created on the page.
+-   `tagForChildDirectedTreatment`: Configures whether the slot should be treated as child-directed.
+    See the TFCD article for <a href="https://support.google.com/dfp_sb/answer/3721907">Small Business</a> or <a href="https://support.google.com/dfp_premium/answer/3671211">Premium</a> for more details and allowed values.
+-   `targeting`: Sets a custom targeting parameter for this slot. Values must of the form:
+    -   `"<key_string>":"<value_string>"` or
+    -   `"<key_string>":["<value1>", "<value2>", ...]`. See below for example.
 
 Example with json attribute:
 
@@ -162,11 +172,11 @@ Example with json attribute:
 
 ### Supported DFP Formats
 
-- Anchor Ads / Adhesion Units may be implemented using <a href="../../extensions/amp-sticky-ad/amp-sticky-ad.md">amp-sticky-ads</a>.
-- Expandable formats can now leverage the <a href="safeframe.md">Safeframe API</a>.
+-   Anchor Ads / Adhesion Units may be implemented using <a href="../../extensions/amp-sticky-ad/amp-sticky-ad.md">amp-sticky-ads</a>.
+-   Expandable formats can now leverage the <a href="safeframe.md">Safeframe API</a>.
 
 ### Unsupported DFP Formats
 
-- Interstitials
-- Flash
-- Creatives served over HTTP.
+-   Interstitials
+-   Flash
+-   Creatives served over HTTP.
diff --git a/extensions/amp-ad-network-doubleclick-impl/amp-consent.md b/extensions/amp-ad-network-doubleclick-impl/amp-consent.md
index 0f30e99fbbd23..c0475f9e77c2d 100644
--- a/extensions/amp-ad-network-doubleclick-impl/amp-consent.md
+++ b/extensions/amp-ad-network-doubleclick-impl/amp-consent.md
@@ -16,7 +16,7 @@ limitations under the License.
 
 # AMP Consent integration
 
-The `<amp-consent>` element can be used to block the ad request and any [RTC](./doubleclick-rtc.md) requests from being sent until the user or AMP consent [checkConsentHref](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md#consent-configuration) end point provide consent state. After the amp-consent extension has been configured (please refer to its [documentation](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md)), it can be linked to the amp-ad element via the `data-block-on-consent` attribute.
+The `<amp-consent>` element can be used to block the ad request and any [RTC](./doubleclick-rtc.md) requests from being sent until the user or AMP consent [checkConsentHref](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md#consent-configuration) end point provide consent state. After the amp-consent extension has been configured (please refer to its [documentation](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md)), it can be linked to the amp-ad element via the `data-block-on-consent` attribute.
 
 If the user has responded negatively to the amp-consent component (user rejects the consent prompt), RTC call-outs will not be made and [non-personalized ads](https://support.google.com/dfp_premium/answer/9005435) will be requested.  
 If the user’s response to the amp-consent is unknown (user dismisses the consent prompt), by default, no ad requests or RTC call-outs are sent.  
diff --git a/extensions/amp-ad-network-doubleclick-impl/doubleclick-rtc.md b/extensions/amp-ad-network-doubleclick-impl/doubleclick-rtc.md
index ae5183ebab9e8..01aeb408db3fc 100644
--- a/extensions/amp-ad-network-doubleclick-impl/doubleclick-rtc.md
+++ b/extensions/amp-ad-network-doubleclick-impl/doubleclick-rtc.md
@@ -6,38 +6,39 @@ This implementation guide is intended for publishers who wish to use Real Time C
 
 ## Background
 
-For full details and background, please refer to the [RTC Documentation](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/rtc-documentation.md) and the generic [RTC Publisher Implementation Guide](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/rtc-publisher-implementation-guide.md). This guide is intended to highlight some of the details of Google Ad Manager's implementation of RTC.
+For full details and background, please refer to the [RTC Documentation](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/rtc-documentation.md) and the generic [RTC Publisher Implementation Guide](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/rtc-publisher-implementation-guide.md). This guide is intended to highlight some of the details of Google Ad Manager's implementation of RTC.
 
 AMP Real Time Config (RTC) is a feature of Fast Fetch that allows Publishers to augment ad requests with targeting information that is retrieved at runtime. This dynamic targeting data can be applied in addition to any existing statically-defined data on each amp-ad element. RTC allows 5 callouts to targeting servers for each individual ad slot, the results of which can be added to the ad request. To use RTC with Google Ad Manager, you must simply setup the rtc-config on each amp-ad element.
 
 ## Setting Up RTC-Config
 
-For instructions on how to set the rtc-config attribute on the amp-ad, refer to [Setting Up RTC-Config](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/rtc-publisher-implementation-guide.md#setting-up-rtc-config) in the Publisher Implementation Guide.
+For instructions on how to set the rtc-config attribute on the amp-ad, refer to [Setting Up RTC-Config](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/rtc-publisher-implementation-guide.md#setting-up-rtc-config) in the Publisher Implementation Guide.
 
 ## Available URL Macros
 
 Google Ad Manager's RTC implementation has made many macros available for RTC url expansion. Please note that the time to expand the URL is counted against the RTC timeout. Additionally, note that all RTC URLs are truncated at 16384 characters, so keep possible truncation in mind when determining which macros to include, and which order to include them in your URL. Currently available macros are as follows:
 
-- **PAGEVIEWID** - pageViewId
-- **PAGEVIEWID_64** - pageViewId64
-- **HREF** - equivalent to window.context.location.href
-- **ATTR(height)** - Height attribute of the amp-ad element
-- **ATTR(width)** - Width attribute of the amp-ad element
-- **ATTR(data-slot)** - data-slot attribute of the amp-ad element
-- **ATTR(data-multi-size)** - data-multi-size attribute of the amp-ad element
-- **ATTR(data-multi-size-validation)** - data-multi-size-validation attribute of the amp-ad element
-- **ATTR(data-override-width)** - data-override-width attribute of the amp-ad element
-- **ATTR(data-override-height)** - data-override-height attribute of the amp-ad element
-- **ATTR(data-json)** - data-json attribute of the amp-ad element
-- **ELEMENT_POS** - Offset of the element from document's top
-- **SCROLL_TOP** - Number of pixels that the user scrolled from the document's top
-- **PAGE_HEIGHT** - Height of the amp-doc
-- **BKG_STATE** - Current visibility state of the amp-doc
-- **ADCID** - adClientId
-- **TGT** - Just the targeting piece of data-json
-- **CANONICAL_URL** - The canonical URL of the page
-
-- **TIMEOUT** - The publisher-specified timeout for the RTC callout.
+-   **PAGEVIEWID** - pageViewId
+-   **PAGEVIEWID_64** - pageViewId64
+-   **HREF** - equivalent to window.context.location.href
+-   **REFERRER** - Referrer URL
+-   **ATTR(height)** - Height attribute of the amp-ad element
+-   **ATTR(width)** - Width attribute of the amp-ad element
+-   **ATTR(data-slot)** - data-slot attribute of the amp-ad element
+-   **ATTR(data-multi-size)** - data-multi-size attribute of the amp-ad element
+-   **ATTR(data-multi-size-validation)** - data-multi-size-validation attribute of the amp-ad element
+-   **ATTR(data-override-width)** - data-override-width attribute of the amp-ad element
+-   **ATTR(data-override-height)** - data-override-height attribute of the amp-ad element
+-   **ATTR(json)** - json attribute of the amp-ad element
+-   **ELEMENT_POS** - Offset of the element from document's top
+-   **SCROLL_TOP** - Number of pixels that the user scrolled from the document's top
+-   **PAGE_HEIGHT** - Height of the amp-doc
+-   **BKG_STATE** - Current visibility state of the amp-doc
+-   **ADCID** - adClientId
+-   **TGT** - Just the targeting piece of json
+-   **CANONICAL_URL** - The canonical URL of the page
+
+-   **TIMEOUT** - The publisher-specified timeout for the RTC callout.
 
 ## Response and Endpoint Specification
 
@@ -47,11 +48,11 @@ The requirements for an RTC endpoint to be used with Google Ad Manager are the s
 
 The RTC Response to a GET must meet the following requirements:
 
-- Status Code = 200
-- See [here for Required Headers](https://github.com/ampproject/amphtml/blob/master/spec/amp-cors-requests.md#ensuring-secure-responses) and note that Access-Control-Allow-Credentials: true must be present for cookies to be included in the request.
-- Body of response is a JSON object of targeting information such as:
-  - **<code>{"targeting": {"sport":["rugby","cricket"]}}</code>**</strong>
-  - The response body must be JSON, but the actual structure of that data need not match the structure here. Refer to Fast Fetch Network specific documentation for the required spec. (for example, if using Google Ad Manager, refer to Google Ad Manager docs).
+-   Status Code = 200
+-   See [here for Required Headers](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-cors-requests.md#ensuring-secure-responses) and note that Access-Control-Allow-Credentials: true must be present for cookies to be included in the request.
+-   Body of response is a JSON object of targeting information such as:
+    -   **<code>{"targeting": {"sport":["rugby","cricket"]}}</code>**</strong>
+    -   The response body must be JSON, but the actual structure of that data need not match the structure here. Refer to Fast Fetch Network specific documentation for the required spec. (for example, if using Google Ad Manager, refer to Google Ad Manager docs).
 
 The body of the response must meet the following specification:
 
@@ -68,12 +69,12 @@ The body of the response must meet the following specification:
   </tr>
 </table>
 
-- "targeting"
-  - Optional parameter
-  - Value is an object of key/value pairs to use for targeting in DFP
-- "categoryExclusions"
-  - Optional parameter
-  - Value is an array of categories to use for category exclusions in DFP
+-   "targeting"
+    -   Optional parameter
+    -   Value is an object of key/value pairs to use for targeting in DFP
+-   "categoryExclusions"
+    -   Optional parameter
+    -   Value is an array of categories to use for category exclusions in DFP
 
 The RTC responses will be merged with whatever JSON targeting is specified on the amp-ad element.
 
diff --git a/extensions/amp-ad-network-doubleclick-impl/lazy-fetch.md b/extensions/amp-ad-network-doubleclick-impl/lazy-fetch.md
new file mode 100644
index 0000000000000..73ff72a2045ac
--- /dev/null
+++ b/extensions/amp-ad-network-doubleclick-impl/lazy-fetch.md
@@ -0,0 +1,31 @@
+<!---
+Copyright 2020 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.
+-->
+
+# AMP Ad Lazy Fetch
+
+By default, Doubeclick type AMP Ad fetches all slots on the page independent of their location relative to the viewport. However when they render is dependent on <a href="render-on-idle.md">Render on Idle</a>. If a publisher is seeking to delay the ad request instead of just render, data-lazy-fetch=true attribute can be set on the amp-ad element:
+
+```html
+<amp-ad ... data-lazy-fetch="true"></amp-ad>
+```
+
+When set, the ad request will be delayed until the slot is 3 viewports away (can be set to a specific viewport value based on data-loading-strategy=viewports. Publishers using data-loading-strategy=prefer-viewability-over-views will use current 1.25 viewports. Example of setting lazy fetch to 2 viewports:
+
+```html
+<amp-ad ... data-lazy-fetch="true" data-loading-strategy="2"></amp-ad>
+```
+
+Note that when lazy fetch is enabled <a href="sra.md">SRA</a> is disabled.
diff --git a/extensions/amp-ad-network-doubleclick-impl/multi-size.md b/extensions/amp-ad-network-doubleclick-impl/multi-size.md
index 7bfeb60c92d0c..32ccecf66d415 100644
--- a/extensions/amp-ad-network-doubleclick-impl/multi-size.md
+++ b/extensions/amp-ad-network-doubleclick-impl/multi-size.md
@@ -33,8 +33,8 @@ slots use `layout="fixed"`.</b>
 
 Below the term `primary size` refers to the width and height pair specified by the `width` and `height` attributes of the tag.
 
-- `data-multi-size` A string of comma separated sizes, which if present, forces the tag to request an ad with all of the given sizes, including the primary size. Each individual size must be a number (the width) followed by a lowercase 'x' followed by a number (the height). Each dimension specified this way must not be larger than its counterpart in the primary size. Further, each dimension must be no less than 2/3rds of the corresponding primary dimension, unless `data-mutli-size-validation` is set to false.
-- `data-multi-size-validation` If set to false, this will allow secondary sizes (those specified in the `data-multi-size` attribute) to be less than 2/3rds of the corresponding primary size. By default this is assumed to be true.
+-   `data-multi-size` A string of comma separated sizes, which if present, forces the tag to request an ad with all of the given sizes, including the primary size. Each individual size must be a number (the width) followed by a lowercase 'x' followed by a number (the height). Each dimension specified this way must not be larger than its counterpart in the primary size. Further, each dimension must be no less than 2/3rds of the corresponding primary dimension, unless `data-multi-size-validation` is set to false.
+-   `data-multi-size-validation` If set to false, this will allow secondary sizes (those specified in the `data-multi-size` attribute) to be less than 2/3rds of the corresponding primary size. By default this is assumed to be true.
 
 Example - Valid multi-size request
 
diff --git a/extensions/amp-ad-network-doubleclick-impl/safeframe.md b/extensions/amp-ad-network-doubleclick-impl/safeframe.md
index d1c324375f281..4807723d62b9a 100644
--- a/extensions/amp-ad-network-doubleclick-impl/safeframe.md
+++ b/extensions/amp-ad-network-doubleclick-impl/safeframe.md
@@ -75,10 +75,10 @@ This API call requests that the SafeFrame be expanded. The parameter passed in i
 
 **Important Caveats:**
 
-- **A request to expand is not guaranteed to succeed**. You should register a callback with \$sf.ext.register() that will execute on geometry changes, including from the results of expansion and collapse.
-- **AMP does not support expansion left or up.** However, the majority of ad slots are centered in the page, which means an expansion to the right will in effect end up expanding to both the left and right. For instance, expanding by 100px to the right for a centered SafeFrame, would in effect appear as expanding by 50px to both the left and right.
-- **Expand by overlay is only allowed within the confines of amp-ad; expand by push is allowed for any size.** Within the confines of the amp-ad, creatives may expand by overlay or push. Creatives attempting to expand to a size greater than that of the amp-ad may only use push.
-- **Publisher may disallow expand by push or overlay.** The publisher may set an attribute called **data-safeframe-config** on the amp-ad element, using a JSON object like the following: **{"expandByPush": true, "expandByOverlay": false}**
+-   **A request to expand is not guaranteed to succeed**. You should register a callback with \$sf.ext.register() that will execute on geometry changes, including from the results of expansion and collapse.
+-   **AMP does not support expansion left or up.** However, the majority of ad slots are centered in the page, which means an expansion to the right will in effect end up expanding to both the left and right. For instance, expanding by 100px to the right for a centered SafeFrame, would in effect appear as expanding by 50px to both the left and right.
+-   **Expand by overlay is only allowed within the confines of amp-ad; expand by push is allowed for any size.** Within the confines of the amp-ad, creatives may expand by overlay or push. Creatives attempting to expand to a size greater than that of the amp-ad may only use push.
+-   **Publisher may disallow expand by push or overlay.** The publisher may set an attribute called **data-safeframe-config** on the amp-ad element, using a JSON object like the following: **{"expandByPush": true, "expandByOverlay": false}**
 
 **Expansion Successes and Failures**
 
@@ -105,11 +105,11 @@ For AMP's implementation of SafeFrame, a collapse() request impacts two separate
 
 ### Examples
 
-- Expand is called while out of viewport and succeeds for both the amp-ad and the SafeFrame. The user scrolls the page such that the SafeFrame is in the viewport. The ad calls collapse(). The amp-ad element can not be resized without causing reflow, so only the SafeFrame is resized, as in the image below:
+-   Expand is called while out of viewport and succeeds for both the amp-ad and the SafeFrame. The user scrolls the page such that the SafeFrame is in the viewport. The ad calls collapse(). The amp-ad element can not be resized without causing reflow, so only the SafeFrame is resized, as in the image below:
 
 ![alt_text](images/sf_example_3.png 'image_tooltip')
 
-- Expand is called while out of viewport and succeeds for both the amp-ad and the SafeFrame. Collapse is then called either while out of viewport, or during a user-interaction. The amp-ad element and the SafeFrame are both collapsed to **the original size of the SafeFrame. Important to note that even if the amp-ad was originally a different size than the SafeFrame, collapsing the SafeFrame will attempt to collapse the amp-ad to the same size as the SafeFrame. **See picture below:
+-   Expand is called while out of viewport and succeeds for both the amp-ad and the SafeFrame. Collapse is then called either while out of viewport, or during a user-interaction. The amp-ad element and the SafeFrame are both collapsed to **the original size of the SafeFrame. Important to note that even if the amp-ad was originally a different size than the SafeFrame, collapsing the SafeFrame will attempt to collapse the amp-ad to the same size as the SafeFrame. **See picture below:
 
 ![alt_text](images/sf_example_4.png 'image_tooltip')
 
@@ -117,13 +117,13 @@ For AMP's implementation of SafeFrame, a collapse() request impacts two separate
 
 These methods all work the same as they do on non-AMP pages, so please see [standard SafeFrame documentation](https://www.iab.com/wp-content/uploads/2014/08/SafeFrames_v1.1_final.pdf) for details
 
-- \$sf.ext.register()
-- \$sf.ext.supports()
-- \$sf.ext.status()
-- \$sf.ext.meta()
-- \$sf.ext.inViewPercentage()
+-   \$sf.ext.register()
+-   \$sf.ext.supports()
+-   \$sf.ext.status()
+-   \$sf.ext.meta()
+-   \$sf.ext.inViewPercentage()
 
 # Unsupported methods
 
-- \$sf.ext.winHasFocus()
-- \$sf.ext.cookie()
+-   \$sf.ext.winHasFocus()
+-   \$sf.ext.cookie()
diff --git a/extensions/amp-ad-network-doubleclick-impl/single-page-ad.md b/extensions/amp-ad-network-doubleclick-impl/single-page-ad.md
index 48beb697e9cfb..4d35ce64c9880 100644
--- a/extensions/amp-ad-network-doubleclick-impl/single-page-ad.md
+++ b/extensions/amp-ad-network-doubleclick-impl/single-page-ad.md
@@ -16,7 +16,7 @@ limitations under the License.
 
 # Single Page Ads
 
-A single page ad allows an ad creative to appear as a full page, dynamically interleaved, within the pages of an AMP story. For more information about AMP stories, see [here](https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/amp-story-ads.md).
+A single page ad allows an ad creative to appear as a full page, dynamically interleaved, within the pages of an AMP story. For more information about AMP stories, see [here](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/amp-story-ads.md).
 
 ## Adding a Single Page Ad to Your Story
 
@@ -39,14 +39,14 @@ You **cannot** use an `<amp-ad>` element to display a single page ad within a st
 
 ## Single Page Ad Creatives
 
-Single page ad creatives _must_ contain two meta tags: one to specify the [call-to-action enum](https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/amp-story-ads.md#cta-text-enum), and one to specify the outlink URL. E.g.,
+Single page ad creatives _must_ contain two meta tags: one to specify the [call-to-action enum](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/amp-story-ads.md#cta-text-enum), and one to specify the outlink URL. E.g.,
 
 ```html
 <meta name="amp-cta-url" content="https://www.example-ads.com/landing?q=123" />
 <meta name="amp-cta-type" content="EXPLORE" />
 ```
 
-A third meta tag should also be included to indicate the [landing page type](https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/amp-story-ads.md#cta-landing-page-enum)
+A third meta tag should also be included to indicate the [landing page type](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/amp-story-ads.md#cta-landing-page-enum)
 
 ```html
 <meta name="amp-cta-landing-page-type" content="NONAMP" />
diff --git a/extensions/amp-ad-network-doubleclick-impl/sra.md b/extensions/amp-ad-network-doubleclick-impl/sra.md
index b34f9e8aa4302..334a70bc765ec 100644
--- a/extensions/amp-ad-network-doubleclick-impl/sra.md
+++ b/extensions/amp-ad-network-doubleclick-impl/sra.md
@@ -24,7 +24,7 @@ In order to use this feature, add the following meta tag to the head of the AMP
 Note that SRA is only available if:
 
 1. The AMP page is served from a valid AMP cache, and
-2. The publisher does not use [`remote.html`](https://github.com/ampproject/amphtml/blob/master/ads/README.md#1st-party-cookies).
+2. The publisher does not use [`remote.html`](https://github.com/ampproject/amphtml/blob/main/ads/README.md#1st-party-cookies).
 
 Note also that <a href="refresh.md">Refresh</a> is not compatible with SRA. If both SRA and Refresh are enabled on the same slot, Refresh will be disabled in favor of SRA.
 
diff --git a/extensions/amp-ad-network-fake-impl/0.1/amp-ad-metadata-transformer.js b/extensions/amp-ad-network-fake-impl/0.1/amp-ad-metadata-transformer.js
index 0fd386834bffe..0b2ccdaa0d427 100644
--- a/extensions/amp-ad-network-fake-impl/0.1/amp-ad-metadata-transformer.js
+++ b/extensions/amp-ad-network-fake-impl/0.1/amp-ad-metadata-transformer.js
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import {dict} from '../../../src/utils/object';
-import {parseJson} from '../../../src/json';
+import {dict} from '../../../src/core/types/object';
+import {parseJson} from '../../../src/core/types/object/json';
 import {user} from '../../../src/log';
 
 export class AmpAdMetadataTransformer {
@@ -221,10 +221,10 @@ export class AmpAdMetadataTransformer {
     let start = 0;
     let end = 0;
     if (this.firstRuntimeElement_ != null) {
-      const firstRuntimeElementString = this.firstRuntimeElement_
-        ./*OK*/ outerHTML;
-      const lastRuntimeElementString = this.lastRuntimeElement_
-        ./*OK*/ outerHTML;
+      const firstRuntimeElementString =
+        this.firstRuntimeElement_./*OK*/ outerHTML;
+      const lastRuntimeElementString =
+        this.lastRuntimeElement_./*OK*/ outerHTML;
       start = creative.indexOf(firstRuntimeElementString);
       end =
         creative.indexOf(lastRuntimeElementString) +
diff --git a/extensions/amp-ad-network-fake-impl/0.1/amp-ad-network-fake-impl.js b/extensions/amp-ad-network-fake-impl/0.1/amp-ad-network-fake-impl.js
index 6ff9d54b38ef0..faf264b6f9173 100644
--- a/extensions/amp-ad-network-fake-impl/0.1/amp-ad-network-fake-impl.js
+++ b/extensions/amp-ad-network-fake-impl/0.1/amp-ad-network-fake-impl.js
@@ -17,11 +17,18 @@
 import {AmpA4A} from '../../amp-a4a/0.1/amp-a4a';
 import {AmpAdMetadataTransformer} from './amp-ad-metadata-transformer';
 import {ExternalReorderHeadTransformer} from './external-reorder-head-transformer';
-import {startsWith} from '../../../src/string';
+import {forceExperimentBranch} from '../../../src/experiments';
+import {includes} from '../../../src/core/types/string';
 import {user, userAssert} from '../../../src/log';
 
 const TAG = 'AMP-AD-NETWORK-FAKE-IMPL';
 
+/**
+ * Allow elements to opt into an experiment branch.
+ * @const {string}
+ */
+const EXPERIMENT_BRANCH_ATTR = 'data-experiment-id';
+
 export class AmpAdNetworkFakeImpl extends AmpA4A {
   /**
    * @param {!Element} element
@@ -38,10 +45,19 @@ export class AmpAdNetworkFakeImpl extends AmpA4A {
   /** @override */
   buildCallback() {
     userAssert(
-      this.element.hasAttribute('src'),
-      'Attribute src required for <amp-ad type="fake">: %s',
+      this.element.hasAttribute('src') || this.element.hasAttribute('srcdoc'),
+      'Attribute src or srcdoc required for <amp-ad type="fake">: %s',
       this.element
     );
+    if (this.element.hasAttribute(EXPERIMENT_BRANCH_ATTR)) {
+      this.element
+        .getAttribute(EXPERIMENT_BRANCH_ATTR)
+        .split(',')
+        .forEach((experiment) => {
+          const expParts = experiment.split(':');
+          forceExperimentBranch(this.win, expParts[0], expParts[1]);
+        });
+    }
     super.buildCallback();
   }
 
@@ -51,7 +67,7 @@ export class AmpAdNetworkFakeImpl extends AmpA4A {
     // value start with `i-amphtml-demo-`. So that fake ad can only be used in
     // invalid AMP pages.
     const id = this.element.getAttribute('id');
-    if (!id || !startsWith(id, 'i-amphtml-demo-')) {
+    if (!id || !id.startsWith('i-amphtml-demo-')) {
       user().warn(TAG, 'Only works with id starts with i-amphtml-demo-');
       return false;
     }
@@ -60,7 +76,12 @@ export class AmpAdNetworkFakeImpl extends AmpA4A {
 
   /** @override */
   getAdUrl() {
-    return this.element.getAttribute('src');
+    const src = this.element.getAttribute('src');
+    if (src) {
+      return src;
+    }
+    const srcdoc = this.element.getAttribute('srcdoc');
+    return `data:text/html,${encodeURIComponent(srcdoc)}`;
   }
 
   /** @override */
@@ -69,25 +90,28 @@ export class AmpAdNetworkFakeImpl extends AmpA4A {
       if (!response) {
         return null;
       }
-      const {
-        status,
-        headers,
-      } = /** @type {{status: number, headers: !Headers}} */ (response);
+      const {headers, status} =
+        /** @type {{status: number, headers: !Headers}} */ (response);
 
       // In the convert creative mode the content is the plain AMP HTML.
-      // This mode is primarily used for A4A Envelop for testing.
-      // See DEVELOPING.md for more info.
+      // This mode is primarily used for A4A Envelope for testing.
+      // See developing.md for more info.
       if (this.element.getAttribute('a4a-conversion') == 'true') {
-        return response.text().then(
-          (responseText) =>
-            new Response(this.transformCreative_(responseText), {
-              status,
-              headers,
-            })
-        );
+        return response.text().then((responseText) => {
+          // When using data: url the legacy amp cors param is interpreted as
+          // part of the body, so remove it.
+          if (includes(responseText, '?__amp_source_origin=')) {
+            responseText = responseText.split('?__amp_source_origin=')[0];
+          }
+          return new Response(this.transformCreative_(responseText), {
+            status,
+            headers,
+          });
+        });
       }
 
-      // Normal mode: Expect the creative is written in AMP4ADS doc.
+      // Normal mode: Expect the creative is already transformed and includes
+      // amp-ad-metadata
       return response;
     });
   }
diff --git a/extensions/amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_html_attr.html b/extensions/amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_html_attr.html
index c39d0c873cf17..a08e7e784d25a 100644
--- a/extensions/amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_html_attr.html
+++ b/extensions/amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_html_attr.html
@@ -48,4 +48,3 @@
     </div>
   </body>
 </html>
-
diff --git a/extensions/amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_iframe_transport.html b/extensions/amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_iframe_transport.html
index e57fcd3ecfbff..82fb358909888 100644
--- a/extensions/amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_iframe_transport.html
+++ b/extensions/amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_iframe_transport.html
@@ -83,4 +83,3 @@
     </div>
   </body>
 </html>
-
diff --git a/extensions/amp-ad-network-fake-impl/0.1/external-reorder-head-transformer.js b/extensions/amp-ad-network-fake-impl/0.1/external-reorder-head-transformer.js
index b81f04caa609e..ca9982ab354ae 100644
--- a/extensions/amp-ad-network-fake-impl/0.1/external-reorder-head-transformer.js
+++ b/extensions/amp-ad-network-fake-impl/0.1/external-reorder-head-transformer.js
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {endsWith, startsWith} from '../../../src/string';
+import {endsWith} from '../../../src/core/types/string';
 import {urls} from '../../../src/config';
 
 export class ExternalReorderHeadTransformer {
@@ -163,11 +163,8 @@ export class ExternalReorderHeadTransformer {
     }
     if (
       isAsync &&
-      ((startsWith(src, urls.cdn) &&
-        (endsWith(src, '/v0.js') ||
-          endsWith(src, '/v0.js.br') ||
-          endsWith(src, '/amp4ads-v0.js') ||
-          endsWith(src, '/amp4ads-v0.js.br'))) ||
+      ((src.startsWith(urls.cdn) &&
+        (endsWith(src, '/v0.js') || endsWith(src, '/amp4ads-v0.js'))) ||
         endsWith(src, '/dist/amp.js') ||
         endsWith(src, '/dist/amp-inabox.js') ||
         endsWith(src, '/dist/v0.js') ||
@@ -178,7 +175,7 @@ export class ExternalReorderHeadTransformer {
     }
     if (
       isAsync &&
-      startsWith(src, urls.cdn + '/v0/amp-viewer-integration-gmail-') &&
+      src.startsWith(urls.cdn + '/v0/amp-viewer-integration-gmail-') &&
       endsWith(src, '.js')
     ) {
       this.headComponents_.scriptGmailAmpViewer = element;
@@ -186,9 +183,8 @@ export class ExternalReorderHeadTransformer {
     }
     if (
       isAsync &&
-      (startsWith(src, urls.cdn + '/v0/amp-viewer-integration-') ||
-        (startsWith(src, urls.cdn + '/viewer/google/v') &&
-          endsWith(src, '.js')))
+      (src.startsWith(urls.cdn + '/v0/amp-viewer-integration-') ||
+        (src.startsWith(urls.cdn + '/viewer/google/v') && endsWith(src, '.js')))
     ) {
       this.headComponents_.scriptAmpViewer = element;
       return;
@@ -233,7 +229,7 @@ export class ExternalReorderHeadTransformer {
     const rel = element.getAttribute('rel');
     if (rel == 'stylesheet') {
       if (
-        startsWith(element.getAttribute('href'), urls.cdn) &&
+        element.getAttribute('href').startsWith(urls.cdn) &&
         endsWith(element.getAttribute('href'), '/v0.css')
       ) {
         this.headComponents_.linkStylesheetRuntimeCss = element;
diff --git a/extensions/amp-ad-network-fake-impl/0.1/test/test-amp-ad-network-fake-impl.js b/extensions/amp-ad-network-fake-impl/0.1/test/test-amp-ad-network-fake-impl.js
index 19686c04f6f5a..5feafa60071e9 100644
--- a/extensions/amp-ad-network-fake-impl/0.1/test/test-amp-ad-network-fake-impl.js
+++ b/extensions/amp-ad-network-fake-impl/0.1/test/test-amp-ad-network-fake-impl.js
@@ -47,6 +47,9 @@ describes.realWin(
       fakeImplElem = doc.createElement('amp-ad');
       fakeImplElem.setAttribute('type', 'fake');
       fakeImplElem.setAttribute('src', 'https://fake.com');
+      fakeImplElem.setAttribute('layout', 'fixed');
+      fakeImplElem.setAttribute('width', '300');
+      fakeImplElem.setAttribute('height', '250');
     });
 
     it('should not send ad request with valid id', () => {
@@ -221,5 +224,47 @@ describes.realWin(
         `"images":["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAD6BAMAAADpQ2fAAAAAG1BMVEUiIiKqqqqIiIhVVVVmZmYzMzN3d3dERESZmZlLV2+BAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEWklEQVR4nO2azVPaQBiHUyHGY0OtchS0jEeVOvYIlmqPItPao0ypcixTrT2KtZY/u7sJyW7ebBJ2wiZO5/dcDNlk87gfb/ZdsCwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwX9FwU9h7nlodaEFrzqDdPtO85ZPM0HVv5c/LsbL2Xfd7nvu7Oe9PAFo6QEsHaOkALR2gpQO0dICWDtDSwbDWxcnudPbwVXmJ/bY5q8+aoyPF8tiolv0xWOJfxwt/igRg57BILUdKRn7TwneRzGSHVGJQy46kSG+ihb9IxlSfn6/2PFjmMuqF6KfqKVpd73Gt0dWu9+BI3VXfpdlqzuZe84I1VZZ3v0Stc/7ca284O2N2vC4XstZwa0feof3juEAte8qswhbiI6kjCnljrYsJ6BwXpvUlImKz5nklCtmIrkXCwqBRjBZvrL/SZ94+QoQVXpLrg79+cs68D0Wqrpv3J2utsC48IxduSY619GpNBQhW7+vIiVWpF1lP/SlFy6YRgXdcEJusfubOjiEt1k0b8SfticOM4WJIq0/70BttW/PDYRgPCtbaj3dTRZg2RH8Wq9VQdNM0DPSNrIloSMuODy3edYFMWa1VicR08ahQsJyxxYLUy9jJfnhp9krbjNaaFNLlk53woZdlaCnj5WooowgfhWhNVGerYROulvRO7KrCeCVcoThuVi+a0VJONUfMgyFdbxWjpQxMthhRfLEXy4WK0FKMHaa1GRyydaD7mNJeZrSmiiAva3n5h1v7ULAWe+RdHDn0e9ma+xRLpw1rqRFaQcad0GJlaVnOcH7uMWFhVI6W2DepKxqsPC2eHM5PfytMSzXk7+5uyXU3Y9+rU5SWIkAo8VusTusoW8uyDuK9ay6cZi3WJT5zL5JUmtHKXqzL8JC/GT31HLR4JeR6M1rZOUSEaqwXzWjp1jqke1hmtCaav5hao4PLjFY/M7WJUiFbq+YSsnudWmyac5jRWs3MuAh06prRcminZDGMa+l/R5CpZcUCUQY0oujOGUqC1lCz2oK0JppjnnZiP+fv5hK0VlQ7SSnQd7tuhKEkaDl0Wz6d2DbdC9WWT34tvkupUW+VNq5u4KMkafV1VoL86ug2nXbgW1CLvU40RkeDXlzVDXwLaqVuypyTW1jbkI0nWzfwLarF5iLZlLGPg6NJPZLk82+P6byd5osQybuzPKXZlj4PGuH/z6Latmgd/l1jrMO7+XoxWYv3jPsUFA7GUrcwLbf2/izQdRV7lt4OmH/FzdMytfjrlov12u3eydTLBoOSvp+0Pox6vSs/s76kNzveDa0ev1VjSi+gZQebHwGhlkNLFDuDXVG6XC3qtSG9fA8iJapRVJma0rJs6em100jRYCyKtpU3V0MvrbfrQjgnu/4oim/7XfhF9VHSv+V4I7LeOk0oz4ed/CN6O+tL+5R7AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIC8/APxIjOC0ym0IgAAAABJRU5ErkJggg=="]`
       );
     });
+
+    it('renders using srcdoc', async () => {
+      // Allow real fetching of data url, fetch-mock is unable to handle it.
+      env.win.fetch = env.fetchMock.realFetch;
+      const creative = `
+      <!doctype html>
+      <html ⚡4ads>
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,minimum-scale=1">
+        <style amp4ads-boilerplate>body{visibility:hidden}</style>
+        <style amp-custom>
+          #foo { background-color: red; }
+        </style>
+        <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
+      </head>
+      <body>
+        <p id="foo">Hello, AMP4ADS world.</p>
+      </body>
+      </html>
+      `;
+      fakeImplElem.removeAttribute('src');
+      fakeImplElem.setAttribute('srcdoc', creative);
+      fakeImplElem.setAttribute('id', 'i-amphtml-demo-fake');
+      fakeImplElem.setAttribute('a4a-conversion', true);
+      doc.body.appendChild(fakeImplElem);
+
+      const fakeImpl = new AmpAdNetworkFakeImpl(fakeImplElem);
+      fakeImpl.buildCallback();
+
+      expect(fakeImpl.isValidElement()).to.be.true;
+      expect(fakeImpl.getAdUrl()).to.equal(
+        'data:text/html,' + encodeURIComponent(creative)
+      );
+      const response = await fakeImpl.sendXhrRequest(fakeImpl.getAdUrl());
+      const responseText = await response.text();
+      expect(responseText).to.contain('#foo { background-color: red; }');
+      expect(responseText).to.contain('<p id="foo">Hello, AMP4ADS world.</p>');
+      expect(responseText).to.contain(
+        '<script type="application/json" amp-ad-metadata>{"ampRuntimeUtf16CharOffsets":[110,183]}</script></body></html>'
+      );
+    });
   }
 );
diff --git a/extensions/amp-ad-network-fake-impl/OWNERS b/extensions/amp-ad-network-fake-impl/OWNERS
index 94b65ebe76929..1b8c3b93f6d99 100644
--- a/extensions/amp-ad-network-fake-impl/OWNERS
+++ b/extensions/amp-ad-network-fake-impl/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-ad-network-fake-impl/amp-ad-network-fake-impl-internal.md b/extensions/amp-ad-network-fake-impl/amp-ad-network-fake-impl-internal.md
index 2a3a4a659498e..2d57178403bf5 100644
--- a/extensions/amp-ad-network-fake-impl/amp-ad-network-fake-impl-internal.md
+++ b/extensions/amp-ad-network-fake-impl/amp-ad-network-fake-impl-internal.md
@@ -43,7 +43,12 @@ which makes the AMP page invalid.
 Like all A4A ad networks, you do not place an `<amp-ad-network-fake-impl>`
 tag directly on the page. Instead, you place an `<amp-ad type="fake">` tag.
 
-The fake impl loads an A4A creative or an AMP creative and convert it to an A4A
+The fake implementation will fetch the creative from the given path if using
+the `src` attribute. If using the `srcdoc` attribute the fake impl will write
+the inlined document string as the test creative. Using either `src` or
+`srcdoc` is required.
+
+The fake impl loads an A4A creative or an AMP creative and converts it to an A4A
 creative. Use `a4a-conversion` attribute to instruct the fake impl to perform creative
 conversion.
 
@@ -56,12 +61,14 @@ verification fails.
 Fake impl largely uses the same tags as `<amp-ad>`. The following are
 special tags for fake or special behaviors of existing tags:
 
-**id** Must starts with `i-amphtml-demo-` to enable sending ad request.
+**id** Must start with `i-amphtml-demo-` to enable sending ad request.
 
 **type** Must be `"fake"`.
 
 **src** The file source.
 
+**srcdoc** Inlined text containing creative's document.
+
 **a4a-conversion** To instruct the fake impl to convert creative response to A4A creative.
 
 **checksig** To enforce the signature check.
diff --git a/extensions/amp-ad-network-nws-impl/0.1/amp-ad-network-nws-impl.js b/extensions/amp-ad-network-nws-impl/0.1/amp-ad-network-nws-impl.js
new file mode 100644
index 0000000000000..f9c91675f38d5
--- /dev/null
+++ b/extensions/amp-ad-network-nws-impl/0.1/amp-ad-network-nws-impl.js
@@ -0,0 +1,123 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {AmpA4A} from '../../amp-a4a/0.1/amp-a4a';
+import {dev, devAssert} from '../../../src/log';
+import {insertAnalyticsElement} from '../../../src/extension-analytics';
+import {parseJson} from '../../../src/core/types/object/json';
+import {removeElement} from '../../../src/dom';
+
+const URL = 'https://svr.nws.ai/a4a';
+
+const NWS_HEADER = 'X-NWS';
+
+/**
+ *  Fast Fetch implementation for Newsroom AI
+ */
+export class AmpAdNetworkNwsImpl extends AmpA4A {
+  /**
+   * @param {!Element} element
+   */
+  constructor(element) {
+    super(element);
+
+    /**
+     * Config to generate amp-analytics element for active view reporting.
+     * @type {?JsonObject}
+     * @private
+     */
+    this.ampAnalyticsConfig_ = null;
+
+    /** @private {?Element} */
+    this.ampAnalyticsElement_ = null;
+  }
+
+  /**
+   * Extracts configuration used to build amp-analytics element for active view
+   * and begin to render.
+   *
+   * @param {!Headers} responseHeaders
+   *   XHR service FetchResponseHeaders object containing the response
+   *   headers.
+   * @return {?JsonObject} config or null if invalid/missing.
+   */
+  extractAmpAnalyticsConfig(responseHeaders) {
+    if (!responseHeaders.has(NWS_HEADER)) {
+      return null;
+    }
+    try {
+      const responseConfig = parseJson(responseHeaders.get(NWS_HEADER));
+      const analyticsConfig = responseConfig['ampAnalytics'];
+      const config = {
+        'transport': {'beacon': true, 'xhrpost': true, 'image': true},
+        'requests': {},
+        'triggers': {},
+      };
+      Object.assign(config, analyticsConfig);
+
+      return config;
+    } catch (err) {
+      dev().error(
+        'AMP-A4A',
+        'Invalid analytics',
+        err,
+        responseHeaders.get(NWS_HEADER)
+      );
+    }
+  }
+
+  /** @override */
+  getAdUrl(unusedConsentState, opt_rtcResponsesPromise) {
+    const dataSlot = this.element.getAttribute('data-slot');
+    const url = `${URL}?slot=${encodeURIComponent(dataSlot)}`;
+    return url;
+  }
+
+  /** @override */
+  extractSize(responseHeaders) {
+    this.ampAnalyticsConfig_ = this.extractAmpAnalyticsConfig(responseHeaders);
+    const size = super.extractSize(responseHeaders);
+    return size;
+  }
+
+  /** @override */
+  tearDownSlot() {
+    super.tearDownSlot();
+    if (this.ampAnalyticsElement_) {
+      removeElement(this.ampAnalyticsElement_);
+      this.ampAnalyticsElement_ = null;
+    }
+    this.ampAnalyticsConfig_ = null;
+  }
+
+  /** @override */
+  onCreativeRender(creativeMetaData, opt_onLoadPromise) {
+    super.onCreativeRender(creativeMetaData);
+    devAssert(!this.ampAnalyticsElement_);
+    if (this.ampAnalyticsConfig_) {
+      this.ampAnalyticsElement_ = insertAnalyticsElement(
+        this.element,
+        this.ampAnalyticsConfig_,
+        /*loadAnalytics*/ true,
+        false
+      );
+    }
+  }
+}
+
+AMP.extension('amp-ad-network-nws-impl', '0.1', (AMP) => {
+  AMP.registerElement('amp-ad-network-nws-impl', AmpAdNetworkNwsImpl);
+});
diff --git a/extensions/amp-ad-network-nws-impl/0.1/test/test-nws-a4a-config.js b/extensions/amp-ad-network-nws-impl/0.1/test/test-nws-a4a-config.js
new file mode 100644
index 0000000000000..7dfc65e2d43be
--- /dev/null
+++ b/extensions/amp-ad-network-nws-impl/0.1/test/test-nws-a4a-config.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright 2020 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.
+ */
+
+// These two are required for reasons internal to AMP
+import '../../../../extensions/amp-ad/0.1/amp-ad-ui';
+import '../../../../extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler';
+import {AmpAdNetworkNwsImpl} from '../amp-ad-network-nws-impl';
+import {Services} from '../../../../src/services';
+import {createElementWithAttributes} from '../../../../src/dom';
+
+describes.fakeWin('amp-ad-network-nws-impl', {amp: true}, (env) => {
+  let win, doc, element, impl, preloadExtensionSpy;
+
+  beforeEach(() => {
+    win = env.win;
+    win.__AMP_MODE = {localDev: false};
+    doc = win.document;
+    element = createElementWithAttributes(doc, 'amp-ad', {
+      'type': 'nws',
+    });
+    doc.body.appendChild(element);
+    impl = new AmpAdNetworkNwsImpl(element);
+    const extensions = Services.extensionsFor(impl.win);
+    preloadExtensionSpy = env.sandbox.spy(extensions, 'preloadExtension');
+  });
+
+  describe('#getAdUrl', () => {
+    it('should be valid', () => {
+      const dataSlot = '1';
+      element.setAttribute('data-slot', dataSlot);
+      expect(impl.getAdUrl()).to.equal(
+        `https://svr.nws.ai/a4a?slot=${encodeURIComponent(dataSlot)}`
+      );
+    });
+  });
+
+  describe('#extractSize', () => {
+    it('should not load amp-analytics without header', () => {
+      impl.extractSize({
+        get() {
+          return undefined;
+        },
+        has() {
+          return false;
+        },
+      });
+      expect(preloadExtensionSpy.withArgs('amp-analytics')).to.not.be.called;
+    });
+    it('should load amp-analytics with header', () => {
+      impl.extractSize({
+        get(name) {
+          switch (name) {
+            case 'X-NWS':
+              return '{"ampAnalytics": {}}';
+            default:
+              return undefined;
+          }
+        },
+        has(name) {
+          return !!this.get(name);
+        },
+      });
+      expect(preloadExtensionSpy.withArgs('amp-analytics')).to.not.be.called;
+    });
+  });
+});
diff --git a/extensions/amp-ad-network-nws-impl/OWNERS b/extensions/amp-ad-network-nws-impl/OWNERS
new file mode 100644
index 0000000000000..c43851d92e681
--- /dev/null
+++ b/extensions/amp-ad-network-nws-impl/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'ampproject/wg-ads-reviewers'}, {name: 'danielstockton'}],
+    },
+  ],
+}
diff --git a/extensions/amp-ad-network-nws-impl/amp-ad-network-nws-impl-internal.md b/extensions/amp-ad-network-nws-impl/amp-ad-network-nws-impl-internal.md
new file mode 100644
index 0000000000000..c1861697592cc
--- /dev/null
+++ b/extensions/amp-ad-network-nws-impl/amp-ad-network-nws-impl-internal.md
@@ -0,0 +1,36 @@
+<!---
+Copyright 2020 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.
+-->
+
+# amp-ad-network-nws-impl
+
+Newsroom AI fast fetch implementation for serving AMP story ads via `<amp-story-auto-ads>`:
+
+https://amp.dev/documentation/guides-and-tutorials/develop/advertise_amp_stories/
+
+### Example configuration:
+
+```html
+<amp-story-auto-ads>
+  <script type="application/json">
+    {
+      "ad-attributes": {
+        "type": "nws",
+        "data-slot": "<slot_id>"
+      }
+    }
+  </script>
+</amp-story-auto-ads>
+```
diff --git a/extensions/amp-ad-network-oblivki-impl/0.1/amp-ad-network-oblivki-impl.js b/extensions/amp-ad-network-oblivki-impl/0.1/amp-ad-network-oblivki-impl.js
index 2143c01557fde..33c0a5649a682 100644
--- a/extensions/amp-ad-network-oblivki-impl/0.1/amp-ad-network-oblivki-impl.js
+++ b/extensions/amp-ad-network-oblivki-impl/0.1/amp-ad-network-oblivki-impl.js
@@ -15,7 +15,6 @@
  */
 
 import {AmpA4A} from '../../amp-a4a/0.1/amp-a4a';
-import {startsWith} from '../../../src/string';
 
 /**
  * Oblivki base URL
@@ -51,8 +50,8 @@ export class AmpAdNetworkOblivkiImpl extends AmpA4A {
     const src = this.element.getAttribute('src') || '';
     return (
       this.isAmpAdElement() &&
-      (startsWith(src, OBLIVKI_BASE_URL_) ||
-        startsWith(src, OBLIVKI_BASE_A4A_URL_))
+      (src.startsWith(OBLIVKI_BASE_URL_) ||
+        src.startsWith(OBLIVKI_BASE_A4A_URL_))
     );
   }
 }
diff --git a/extensions/amp-ad-network-oblivki-impl/0.1/oblivki-a4a-config.js b/extensions/amp-ad-network-oblivki-impl/0.1/oblivki-a4a-config.js
index 011b25f30e95c..b12c83ae68845 100644
--- a/extensions/amp-ad-network-oblivki-impl/0.1/oblivki-a4a-config.js
+++ b/extensions/amp-ad-network-oblivki-impl/0.1/oblivki-a4a-config.js
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import {startsWith} from '../../../src/string';
-
 /** @const @private {string} */
 const OBLIVKI_SRC_PREFIX_ = 'https://oblivki.biz/amp/';
 
@@ -34,7 +32,7 @@ export function oblivkiIsA4AEnabled(win, element, useRemoteHtml) {
     !useRemoteHtml &&
     !!(src = element.getAttribute('src')) &&
     !!element.getAttribute('data-use-a4a') &&
-    (startsWith(src, OBLIVKI_SRC_PREFIX_) ||
-      startsWith(src, OBLIVKI_SRC_A4A_PREFIX_))
+    (src.startsWith(OBLIVKI_SRC_PREFIX_) ||
+      src.startsWith(OBLIVKI_SRC_A4A_PREFIX_))
   );
 }
diff --git a/extensions/amp-ad-network-oblivki-impl/OWNERS b/extensions/amp-ad-network-oblivki-impl/OWNERS
index 8f73c118231c3..8ab99926682f4 100644
--- a/extensions/amp-ad-network-oblivki-impl/OWNERS
+++ b/extensions/amp-ad-network-oblivki-impl/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-ad-network-smartads-impl/0.1/amp-ad-network-smartads-impl.js b/extensions/amp-ad-network-smartads-impl/0.1/amp-ad-network-smartads-impl.js
index 2a3333b8e043f..f0ae041cbd3f2 100644
--- a/extensions/amp-ad-network-smartads-impl/0.1/amp-ad-network-smartads-impl.js
+++ b/extensions/amp-ad-network-smartads-impl/0.1/amp-ad-network-smartads-impl.js
@@ -15,7 +15,6 @@
  */
 
 import {AmpA4A} from '../../amp-a4a/0.1/amp-a4a';
-import {startsWith} from '../../../src/string';
 
 /**
  * Base URL
@@ -49,7 +48,7 @@ export class AmpAdNetworkSmartAdsImpl extends AmpA4A {
     const src = this.element.getAttribute('src') || '';
     return (
       this.isAmpAdElement() &&
-      (startsWith(src, BASE_URL_) || startsWith(src, BASE_A4A_URL_))
+      (src.startsWith(BASE_URL_) || src.startsWith(BASE_A4A_URL_))
     );
   }
 }
diff --git a/extensions/amp-ad-network-smartads-impl/0.1/smartads-a4a-config.js b/extensions/amp-ad-network-smartads-impl/0.1/smartads-a4a-config.js
index d0ea4919bf265..e3128952759ec 100644
--- a/extensions/amp-ad-network-smartads-impl/0.1/smartads-a4a-config.js
+++ b/extensions/amp-ad-network-smartads-impl/0.1/smartads-a4a-config.js
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import {startsWith} from '../../../src/string';
-
 /** @const @private {string} */
 const SRC_PREFIX_ = 'https://smart-ads.biz/_amp';
 
@@ -34,6 +32,6 @@ export function smartAdsIsA4AEnabled(win, element, useRemoteHtml) {
     !useRemoteHtml &&
     !!src &&
     !!element.getAttribute('data-use-a4a') &&
-    (startsWith(src, SRC_PREFIX_) || startsWith(src, SRC_A4A_PREFIX_))
+    (src.startsWith(SRC_PREFIX_) || src.startsWith(SRC_A4A_PREFIX_))
   );
 }
diff --git a/extensions/amp-ad-network-smartads-impl/OWNERS b/extensions/amp-ad-network-smartads-impl/OWNERS
index c9b277c7206d2..229ec278ec907 100644
--- a/extensions/amp-ad-network-smartads-impl/OWNERS
+++ b/extensions/amp-ad-network-smartads-impl/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-ad-network-valueimpression-impl/0.1/amp-ad-network-valueimpression-impl.js b/extensions/amp-ad-network-valueimpression-impl/0.1/amp-ad-network-valueimpression-impl.js
new file mode 100644
index 0000000000000..7b6d2af9af769
--- /dev/null
+++ b/extensions/amp-ad-network-valueimpression-impl/0.1/amp-ad-network-valueimpression-impl.js
@@ -0,0 +1,649 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import '../../../src/service/real-time-config/real-time-config-impl';
+import {AmpA4A} from '../../amp-a4a/0.1/amp-a4a';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {RefreshManager} from '../../amp-a4a/0.1/refresh-manager';
+import {Services} from '../../../src/services';
+import {WindowInterface} from '../../../src/window-interface';
+import {dev} from '../../../src/log';
+import {domFingerprintPlain} from '../../../src/core/dom/fingerprint';
+import {getBinaryType, isExperimentOn} from '../../../src/experiments';
+import {getFlexibleAdSlotData} from './flexible-ad-slot-utils';
+import {getOrCreateAdCid} from '../../../src/ad-cid';
+import {getPageLayoutBoxBlocking} from '../../../src/utils/page-layout-box';
+import {internalRuntimeVersion} from '../../../src/internal-version';
+import {stringHash32} from '../../../src/core/types/string';
+
+/** @type {string} */
+const TAG = 'amp-ad-network-valueimpression-impl';
+
+/** @const {string} */
+const DOUBLECLICK_BASE_URL =
+  'https://securepubads.g.doubleclick.net/gampad/ads';
+
+/** @const {Object} */
+const CDN_PROXY_REGEXP =
+  /^https:\/\/([a-zA-Z0-9_-]+\.)?cdn\.ampproject\.org((\/.*)|($))+/;
+
+/** @enum {string} */
+const AmpAdImplementation = {
+  AMP_AD_XHR_TO_IFRAME: '2',
+  AMP_AD_XHR_TO_IFRAME_OR_AMP: '3',
+  AMP_AD_IFRAME_GET: '5',
+};
+
+/**
+ * Enum for browser capabilities. NOTE: Since JS is 32-bit, do not add anymore
+ * than 32 capabilities to this enum.
+ * @enum {number}
+ */
+const Capability = {
+  SVG_SUPPORTED: 1 << 0,
+  SANDBOXING_ALLOW_TOP_NAVIGATION_BY_USER_ACTIVATION_SUPPORTED: 1 << 1,
+  SANDBOXING_ALLOW_POPUPS_TO_ESCAPE_SANDBOX_SUPPORTED: 1 << 2,
+};
+
+/**
+ * See `VisibilityState` enum.
+ * @const {!Object<string, string>}
+ */
+const visibilityStateCodes = {
+  'visible': '1',
+  'hidden': '2',
+  'prerender': '3',
+  'unloaded': '5',
+};
+
+/** @const {number} */
+const MAX_URL_LENGTH = 15360;
+
+/**
+ * @const {!./shared/url-builder.QueryParameterDef}
+ * @visibleForTesting
+ */
+const TRUNCATION_PARAM = {name: 'trunc', value: '1'};
+
+/** @const {string} */
+const RTC_SUCCESS = '2';
+
+/** @final */
+export class AmpAdNetworkValueimpressionImpl extends AmpA4A {
+  /**
+   * @param {!Element} element
+   */
+  constructor(element) {
+    super(element);
+
+    /** @protected {!Deferred<string>} */
+    this.getAdUrlDeferred = new Deferred();
+
+    this.remoteSettings = null;
+
+    /**
+     * Set after the ad request is built.
+     * @private {?FlexibleAdSlotDataTypeDef}
+     */
+    this.flexibleAdSlotData_ = null;
+
+    /** @private {?RefreshManager} */
+    this.refreshManager_ = null;
+
+    /** @private {number} */
+    this.ifi_ = 0;
+  }
+
+  /** @override */
+  isValidElement() {
+    return this.isAmpAdElement();
+  }
+
+  /** @override */
+  tearDownSlot() {
+    super.tearDownSlot();
+    this.remoteSettings = null;
+    this.getAdUrlDeferred = new Deferred();
+  }
+
+  /** @override */
+  onCreativeRender(creativeMetaData, opt_onLoadPromise) {
+    super.onCreativeRender(creativeMetaData);
+
+    this.iframe.setAttribute(
+      'width',
+      Number(this.element.getAttribute('width'))
+    );
+    this.iframe.setAttribute(
+      'height',
+      Number(this.element.getAttribute('height'))
+    );
+
+    if (
+      this.remoteSettings.refreshInterval !== false &&
+      this.remoteSettings.refreshInterval > 0
+    ) {
+      this.refreshManager_ =
+        this.refreshManager_ ||
+        new RefreshManager(
+          this,
+          {
+            'visiblePercentageMin': 50,
+            'continuousTimeMin': 1,
+          },
+          this.remoteSettings.refreshInterval
+        );
+    }
+
+    if (this.isRefreshing) {
+      this.refreshManager_.initiateRefreshCycle();
+      this.isRefreshing = false;
+    }
+  }
+
+  /** @override */
+  getCustomRealTimeConfigMacros_() {
+    /**
+     * This lists allowed attributes on the amp-ad element to be used as
+     * macros for constructing the RTC URL. Add attributes here, in lowercase,
+     * to make them available.
+     */
+    return {
+      autoCollect: () => {
+        const data = {
+          'href': this.win.location.href,
+          'canonical_url': Services.documentInfoForDoc(this.element)
+            .canonicalUrl,
+          'width': this.element.getAttribute('width'),
+          'height': this.element.getAttribute('height'),
+          'element_pos': getPageLayoutBoxBlocking(this.element).top,
+          'scroll_top': Services.viewportForDoc(
+            this.getAmpDoc()
+          ).getScrollTop(),
+          'page_height': Services.viewportForDoc(
+            this.getAmpDoc()
+          ).getScrollHeight(),
+          'bkg_state': this.getAmpDoc().isVisible() ? 'visible' : 'hidden',
+        };
+        return Object.keys(data)
+          .map((key) => key + '=' + data[key])
+          .join('&');
+      },
+    };
+  }
+
+  /**
+   * @param {string} size
+   * @param {string} slot
+   * @return {string} The ad unit hash key string.
+   * @private
+   */
+  generateAdKey_(size, slot) {
+    const {element} = this;
+    const domFingerprint = domFingerprintPlain(element);
+    const multiSize = element.getAttribute('data-multi-size') || '';
+    const string = `${slot}:${size}:${multiSize}:${domFingerprint}`;
+    return stringHash32(string);
+  }
+
+  /** @override */
+  getAdUrl(opt_consentTuple, opt_rtcResponsesPromise, opt_serveNpaSignal) {
+    const consentTuple = opt_consentTuple || {};
+    const {consentString, gdprApplies} = consentTuple;
+    const {win} = this;
+    const ampDoc = this.getAmpDoc();
+
+    opt_rtcResponsesPromise = opt_rtcResponsesPromise || Promise.resolve();
+    let artc = [];
+    let ati = [];
+    let ard = [];
+    const rtcParamsPromise = opt_rtcResponsesPromise.then((results) => {
+      if (!results) {
+        return null;
+      }
+      results.forEach((rtcResponse) => {
+        if (rtcResponse) {
+          artc.push(rtcResponse.rtcTime);
+          ati.push(rtcResponse.error || RTC_SUCCESS);
+          ard.push(rtcResponse.callout);
+        }
+      });
+
+      artc = artc.join();
+      ati = ati.join();
+      ard = ard.join();
+
+      if (results.length === 1 && results[0].response) {
+        return results[0].response;
+      }
+      return null;
+    });
+
+    const referrerPromise = Services.timerFor(win)
+      .timeoutPromise(1000, Services.viewerForDoc(ampDoc).getReferrerUrl())
+      .catch(() => {
+        dev().expectedError('AMP-A4A', 'Referrer timeout!');
+        return '';
+      });
+    const startTime = Date.now();
+
+    Promise.all([
+      rtcParamsPromise,
+      referrerPromise,
+      getOrCreateAdCid(ampDoc, 'AMP_ECID_GOOGLE', '_ga'),
+    ]).then((results) => {
+      const clientId = results[2];
+      const referrer = results[1];
+      this.remoteSettings = results[0];
+      if (!this.remoteSettings) {
+        return this.getAdUrlDeferred.resolve('');
+      }
+
+      if (!this.remoteSettings.dfpSlot) {
+        if (
+          this.remoteSettings.targeting &&
+          this.remoteSettings.targeting.hb_cache_id &&
+          this.remoteSettings.targeting.hb_cache_host &&
+          this.remoteSettings.targeting.hb_cache_path
+        ) {
+          return this.getAdUrlDeferred.resolve(
+            'https://' +
+              this.remoteSettings.targeting.hb_cache_host +
+              this.remoteSettings.targeting.hb_cache_path +
+              '?showAdm=1&uuid=' +
+              this.remoteSettings.targeting.hb_cache_id
+          );
+        } else {
+          return this.getAdUrlDeferred.resolve('');
+          // return Promise.resolve('');
+        }
+      }
+
+      const width = Number(this.element.getAttribute('width'));
+      const height = Number(this.element.getAttribute('height'));
+      const size = `${width}x${height}`;
+      const adKey = this.generateAdKey_(size, this.remoteSettings.dfpSlot);
+
+      let msz = null;
+      let psz = null;
+      let fws = null;
+      this.flexibleAdSlotData_ = getFlexibleAdSlotData(
+        this.win,
+        this.element.parentElement
+      );
+      const {fwSignal, parentWidth, slotWidth} = this.flexibleAdSlotData_;
+      // If slotWidth is -1, that means its width must be determined by its
+      // parent container, and so should have the same value as parentWidth.
+      msz = `${slotWidth == -1 ? parentWidth : slotWidth}x-1`;
+      psz = `${parentWidth}x-1`;
+      fws = fwSignal ? fwSignal : '0';
+
+      const {canonicalUrl, pageViewId} = Services.documentInfoForDoc(ampDoc);
+      const domLoading = ampDoc.getParam('visibilityState')
+        ? ampDoc.getLastVisibleTime()
+        : getNavigationTiming(win, 'domLoading');
+      // Read by GPT for GA/GPT integration.
+      const {screen} = win;
+      const viewport = Services.viewportForDoc(ampDoc);
+      const viewportRect = viewport.getRect();
+      const viewportSize = viewport.getSize();
+      const visibilityState = ampDoc.getVisibilityState();
+      win.gaGlobal = win.gaGlobal || {cid: clientId, hid: pageViewId};
+
+      const targeting = {
+        'vli_sf': 1,
+        'vli_adslot': this.remoteSettings.zoneID,
+        'vli_adtype': 'display',
+      };
+      Object.assign(targeting, this.remoteSettings.targeting);
+      this.win['ampAdGoogleIfiCounter'] =
+        this.win['ampAdGoogleIfiCounter'] || 1;
+      this.ifi_ =
+        (this.isRefreshing && this.ifi_) || this.win['ampAdGoogleIfiCounter']++;
+      const parameters = {
+        'iu': this.remoteSettings.dfpSlot,
+        'adk': adKey,
+        'sz': size,
+        'output': 'html',
+        'impl': 'ifr',
+        'ifi': this.ifi_,
+        'msz': msz,
+        'psz': psz,
+        'fws': fws,
+        'scp': Object.keys(targeting)
+          .map((key) => key + '=' + targeting[key])
+          .join('&'),
+        'gdfp_req': 1,
+        'sfv': '1-0-37',
+        'u_sd': WindowInterface.getDevicePixelRatio(),
+        'artc': artc,
+        'ati': ati,
+        'ard': ard,
+        'is_amp': this.isXhrAllowed()
+          ? AmpAdImplementation.AMP_AD_XHR_TO_IFRAME_OR_AMP
+          : AmpAdImplementation.AMP_AD_IFRAME_GET,
+        'amp_v': internalRuntimeVersion(),
+        'd_imp': 1,
+        'c': getCorrelator(win, ampDoc, clientId),
+        'ga_cid': win.gaGlobal.cid || null,
+        'ga_hid': win.gaGlobal.hid || null,
+        'dt': startTime,
+        'biw': viewportRect.width,
+        'bih': viewportRect.height,
+        'u_aw': screen ? screen.availWidth : null,
+        'u_ah': screen ? screen.availHeight : null,
+        'u_cd': screen ? screen.colorDepth : null,
+        'u_w': screen ? screen.width : null,
+        'u_h': screen ? screen.height : null,
+        'u_tz': -new Date().getTimezoneOffset(),
+        'u_his': getHistoryLength(win),
+        'isw': win != win.top ? viewportSize.width : null,
+        'ish': win != win.top ? viewportSize.height : null,
+        'art': getAmpRuntimeTypeParameter(win),
+        'vis': visibilityStateCodes[visibilityState] || '0',
+        'scr_x': Math.round(viewport.getScrollLeft()),
+        'scr_y': Math.round(viewport.getScrollTop()),
+        'bc': getBrowserCapabilitiesBitmap(win) || null,
+        'url': canonicalUrl || null,
+        'top': win != win.top ? topWindowUrlOrDomain(win, referrer) : null,
+        'loc': win.location.href == canonicalUrl ? null : win.location.href,
+        'ref': referrer || null,
+        'bdt': domLoading ? startTime - domLoading : null,
+        'dtd': elapsedTimeWithCeiling(Date.now(), startTime),
+        'gdpr': gdprApplies === true ? '1' : gdprApplies === false ? '0' : null,
+        'gdpr_consent': consentString,
+      };
+      const adUrl = buildUrl(
+        DOUBLECLICK_BASE_URL,
+        parameters,
+        MAX_URL_LENGTH - 10,
+        TRUNCATION_PARAM
+      );
+      this.getAdUrlDeferred.resolve(adUrl);
+    });
+    return this.getAdUrlDeferred.promise;
+  }
+}
+
+AMP.extension(TAG, '0.1', (AMP) => {
+  AMP.registerElement(TAG, AmpAdNetworkValueimpressionImpl);
+});
+
+/**
+ * @param {!Window} win
+ * @return {number}
+ */
+function getHistoryLength(win) {
+  // We have seen cases where accessing history length causes errors.
+  try {
+    return win.history.length;
+  } catch (e) {
+    return 0;
+  }
+}
+
+/**
+ * Returns an enum value representing the AMP binary type, or null if this is a
+ * canonical page.
+ * @param {!Window} win
+ * @return {?string} The binary type enum.
+ * @visibleForTesting
+ */
+function getAmpRuntimeTypeParameter(win) {
+  const art = getBinaryTypeNumericalCode(getBinaryType(win));
+  return isCdnProxy(win) && art != '0' ? art : null;
+}
+
+/**
+ * Returns a numerical code representing the binary type.
+ * @param {string} type
+ * @return {?string}
+ */
+function getBinaryTypeNumericalCode(type) {
+  return (
+    {
+      'production': '0',
+      'control': '1',
+      'experimental': '2',
+      'rc': '3',
+      'nightly': '4',
+      'nightly-control': '5',
+      'experimentA': '10',
+      'experimentB': '11',
+      'experimentC': '12',
+      'nomod': '42',
+      'mod': '43',
+    }[type] || null
+  );
+}
+
+/**
+ * Returns whether we are running on the AMP CDN.
+ * @param {!Window} win
+ * @return {boolean}
+ */
+function isCdnProxy(win) {
+  return CDN_PROXY_REGEXP.test(win.location.origin);
+}
+
+/**
+ * Returns a bitmap representing what features are supported by this browser.
+ * @param {!Window} win
+ * @return {number}
+ */
+function getBrowserCapabilitiesBitmap(win) {
+  let browserCapabilities = 0;
+  const doc = win.document;
+  if (win.SVGElement && doc.createElementNS) {
+    browserCapabilities |= Capability.SVG_SUPPORTED;
+  }
+  const iframeEl = doc.createElement('iframe');
+  if (iframeEl.sandbox && iframeEl.sandbox.supports) {
+    if (iframeEl.sandbox.supports('allow-top-navigation-by-user-activation')) {
+      browserCapabilities |=
+        Capability.SANDBOXING_ALLOW_TOP_NAVIGATION_BY_USER_ACTIVATION_SUPPORTED;
+    }
+    if (iframeEl.sandbox.supports('allow-popups-to-escape-sandbox')) {
+      browserCapabilities |=
+        Capability.SANDBOXING_ALLOW_POPUPS_TO_ESCAPE_SANDBOX_SUPPORTED;
+    }
+  }
+  return browserCapabilities;
+}
+
+/**
+ * Returns the value of some navigation timing parameter.
+ * Feature detection is used for safety on browsers that do not support the
+ * performance API.
+ * @param {!Window} win
+ * @param {string} timingEvent The name of the timing event, e.g.
+ *     'navigationStart' or 'domContentLoadEventStart'.
+ * @return {number}
+ */
+function getNavigationTiming(win, timingEvent) {
+  return (
+    (win['performance'] &&
+      win['performance']['timing'] &&
+      win['performance']['timing'][timingEvent]) ||
+    0
+  );
+}
+
+/**
+ * @param {number} time
+ * @param {number} start
+ * @return {(number|string)}
+ */
+function elapsedTimeWithCeiling(time, start) {
+  const duration = time - start;
+  if (duration >= 1e6) {
+    return 'M';
+  } else if (duration >= 0) {
+    return duration;
+  }
+  return '-M';
+}
+
+/**
+ * Builds a URL from query parameters, truncating to a maximum length if
+ * necessary.
+ * @param {string} baseUrl scheme, domain, and path for the URL.
+ * @param {!Object<string,string|number|null>} queryParams query parameters for
+ *     the URL.
+ * @param {number} maxLength length to truncate the URL to if necessary.
+ * @param {?QueryParameterDef=} opt_truncationQueryParam query parameter to
+ *     append to the URL iff any query parameters were truncated.
+ * @return {string} the fully constructed URL.
+ */
+function buildUrl(baseUrl, queryParams, maxLength, opt_truncationQueryParam) {
+  const encodedParams = [];
+  const encodedTruncationParam =
+    opt_truncationQueryParam &&
+    !(
+      opt_truncationQueryParam.value == null ||
+      opt_truncationQueryParam.value === ''
+    )
+      ? encodeURIComponent(opt_truncationQueryParam.name) +
+        '=' +
+        encodeURIComponent(String(opt_truncationQueryParam.value))
+      : null;
+  let capacity = maxLength - baseUrl.length;
+  if (encodedTruncationParam) {
+    capacity -= encodedTruncationParam.length + 1;
+  }
+  const keys = Object.keys(queryParams);
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    const value = queryParams[key];
+    if (value == null || value === '') {
+      continue;
+    }
+    const encodedNameAndSep = encodeURIComponent(key) + '=';
+    const encodedValue = encodeURIComponent(String(value));
+    const fullLength = encodedNameAndSep.length + encodedValue.length + 1;
+    if (fullLength > capacity) {
+      const truncatedValue = encodedValue
+        .substr(0, capacity - encodedNameAndSep.length - 1)
+        // Don't end with a partially truncated escape sequence
+        .replace(/%\w?$/, '');
+      if (truncatedValue) {
+        encodedParams.push(encodedNameAndSep + truncatedValue);
+      }
+      if (encodedTruncationParam) {
+        encodedParams.push(encodedTruncationParam);
+      }
+      break;
+    }
+    encodedParams.push(encodedNameAndSep + encodedValue);
+    capacity -= fullLength;
+  }
+  if (!encodedParams.length) {
+    return baseUrl;
+  }
+  return baseUrl + '?' + encodedParams.join('&');
+}
+
+/**
+ * `nodeOrDoc` must be passed for correct behavior in shadow AMP (PWA) case.
+ * @param {!Window} win
+ * @param {!Element|!../../../src/service/ampdoc-impl.AmpDoc} elementOrAmpDoc
+ * @param {string=} opt_cid
+ * @return {number} The correlator.
+ */
+function getCorrelator(win, elementOrAmpDoc, opt_cid) {
+  if (!win.ampAdPageCorrelator) {
+    win.ampAdPageCorrelator = isExperimentOn(win, 'exp-new-correlator')
+      ? Math.floor(4503599627370496 * Math.random())
+      : makeCorrelator(
+          Services.documentInfoForDoc(elementOrAmpDoc).pageViewId,
+          opt_cid
+        );
+  }
+  return win.ampAdPageCorrelator;
+}
+
+/**
+ * @param {string} pageViewId
+ * @param {string=} opt_clientId
+ * @return {number}
+ */
+function makeCorrelator(pageViewId, opt_clientId) {
+  const pageViewIdNumeric = Number(pageViewId || 0);
+  if (opt_clientId) {
+    return pageViewIdNumeric + (opt_clientId.replace(/\D/g, '') % 1e6) * 1e6;
+  } else {
+    // In this case, pageViewIdNumeric is only 4 digits => too low entropy
+    // to be useful as a page correlator.  So synthesize one from scratch.
+    // 4503599627370496 == 2^52.  The guaranteed range of JS Number is at least
+    // 2^53 - 1.
+    return Math.floor(4503599627370496 * Math.random());
+  }
+}
+
+/**
+ * @param {string} url
+ * @return {string} hostname portion of url
+ * @visibleForTesting
+ */
+function extractHost(url) {
+  return (/^(?:https?:\/\/)?([^\/\?:]+)/i.exec(url) || [])[1] || url;
+}
+
+/**
+ * @param {!Window} win
+ * @param {string} referrer
+ * @return {?string}
+ */
+function topWindowUrlOrDomain(win, referrer) {
+  const {ancestorOrigins} = win.location;
+  if (ancestorOrigins) {
+    const {origin} = win.location;
+    const topOrigin = ancestorOrigins[ancestorOrigins.length - 1];
+    if (origin == topOrigin) {
+      return win.top.location.hostname;
+    }
+    const secondFromTop = secondWindowFromTop(win);
+    if (
+      secondFromTop == win ||
+      origin == ancestorOrigins[ancestorOrigins.length - 2]
+    ) {
+      return extractHost(referrer);
+    }
+    return extractHost(topOrigin);
+  } else {
+    try {
+      return win.top.location.hostname;
+    } catch (e) {}
+    try {
+      return extractHost(referrer);
+    } catch (e) {}
+    return null;
+  }
+}
+
+/**
+ * @param {!Window} win
+ * @return {!Window}
+ */
+function secondWindowFromTop(win) {
+  let secondFromTop = win;
+  let depth = 0;
+  while (secondFromTop.parent != secondFromTop.parent.parent && depth < 100) {
+    secondFromTop = secondFromTop.parent;
+    depth++;
+  }
+  return secondFromTop;
+}
diff --git a/extensions/amp-ad-network-valueimpression-impl/0.1/flexible-ad-slot-utils.js b/extensions/amp-ad-network-valueimpression-impl/0.1/flexible-ad-slot-utils.js
new file mode 100644
index 0000000000000..41e053ae25820
--- /dev/null
+++ b/extensions/amp-ad-network-valueimpression-impl/0.1/flexible-ad-slot-utils.js
@@ -0,0 +1,137 @@
+/**
+ * Copyright 2020 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.
+ */
+import {
+  DomAncestorVisitor,
+  VisitorCallbackTypeDef,
+} from '../../../src/utils/dom-ancestor-visitor';
+import {Layout} from '../../../src/layout';
+import {Services} from '../../../src/services';
+import {dev} from '../../../src/log';
+
+/** @const @enum {number} */
+const FULL_WIDTH_SIGNALS = {
+  OVERFLOW_HIDDEN: 4,
+  ELEMENT_HIDDEN: 128,
+};
+
+/**
+ * Returns a visitor callback that gets the maximum width the given element may
+ * occupy.
+ * @param {function(?number): undefined} setWidth Callback to set the value of
+ *   the width.
+ * @return {!VisitorCallbackTypeDef} Visitor callback.
+ */
+function getElementWidthVisitor(setWidth) {
+  return (element, style) => {
+    const layout = element.getAttribute('layout');
+    switch (layout) {
+      case Layout.FIXED:
+        setWidth(parseInt(element.getAttribute('width'), 10) || 0);
+        return true;
+      case Layout.RESPONSIVE:
+      case Layout.FILL:
+      case Layout.FIXED_HEIGHT:
+      case Layout.FLUID:
+        // The above layouts determine the width of the element by the
+        // containing element, or by CSS max-width property.
+        const maxWidth = parseInt(style.maxWidth, 10);
+        if (maxWidth || maxWidth == 0) {
+          setWidth(maxWidth);
+          return true;
+        }
+        break;
+      case Layout.CONTAINER:
+        // Container layout allows the container's size to be determined by
+        // the children within it, so in principle we can grow as large as the
+        // viewport.
+        const viewport = Services.viewportForDoc(dev().assertElement(element));
+        setWidth(viewport.getSize().width);
+        return true;
+      case Layout.NODISPLAY:
+      case Layout.FLEX_ITEM:
+        setWidth(0);
+        return true;
+      default:
+        // If no layout is provided, we must use getComputedStyle. Padding and
+        // border is not included in the overall computed width, so we must
+        // manually include them.
+        const paddingLeft = parseInt(style.paddingLeft, 10) || 0;
+        const paddingRight = parseInt(style.paddingRight, 10) || 0;
+        const totalPadding = paddingLeft + paddingRight;
+        const borderLeft = parseInt(style.borderLeftWidth, 10) || 0;
+        const borderRight = parseInt(style.borderRightWidth, 10) || 0;
+        const totalBorder = borderLeft + borderRight;
+        setWidth((parseInt(style.width, 10) || 0) + totalPadding + totalBorder);
+        return true;
+    }
+  };
+}
+
+/**
+ * Returns a Dom visitor callback that will compute the 'fws' request
+ * parameter.
+ * @param {function(!FULL_WIDTH_SIGNALS): undefined} setSignal Callback to set
+ *   the 'fws' value.
+ * @return {!VisitorCallbackTypeDef}
+ */
+function getFullWidthSignalVisitor(setSignal) {
+  return (element, style) => {
+    if (style.overflowY && style.overflowY != 'visible') {
+      setSignal(FULL_WIDTH_SIGNALS.OVERFLOW_HIDDEN);
+      return true;
+    }
+    if (style.display == 'none') {
+      setSignal(FULL_WIDTH_SIGNALS.ELEMENT_HIDDEN);
+      return true;
+    }
+  };
+}
+
+/** @typedef {{
+ *    fwSignal: number,
+ *    slotWidth: number,
+ *    parentWidth: number,
+ *    parentStyle: ?Object<string, string>,
+ * }}
+ */
+export let FlexibleAdSlotDataTypeDef;
+
+/**
+ * Returns the fixed size of the given element, or the fixed size of its nearest
+ * ancestor that has a fixed size, if the given element has none.
+ * @param {!Window} win
+ * @param {?Element} element
+ * @return {!FlexibleAdSlotDataTypeDef} A record containing data needed for
+ *   generating flex ad slot ad requests, and for adjusting the slot
+ *   post-response. See type def for more details.
+ */
+export function getFlexibleAdSlotData(win, element) {
+  let fwSignal = 0;
+  let slotWidth = -1;
+  let parentWidth = -1;
+  let parentStyle = null;
+  const setFws = (val) => (fwSignal = val);
+  const setMsz = (val) => (slotWidth = val);
+  const setPsz = (val) => (parentWidth = val);
+  new DomAncestorVisitor(win)
+    .addVisitor(getElementWidthVisitor(setMsz), 1 /* maxDepth */)
+    .addVisitor(getElementWidthVisitor(setPsz), 100 /* maxDepth */)
+    .addVisitor(getFullWidthSignalVisitor(setFws), 100 /* maxDepth */)
+    // Used to acquire the parentStyle object so as to not recompute it later
+    .addVisitor((el, style) => (parentStyle = style), 1 /* maxDepth */)
+    .visitAncestorsStartingFrom(element);
+  return {fwSignal, slotWidth, parentWidth, parentStyle};
+}
diff --git a/extensions/amp-ad-network-valueimpression-impl/0.1/test/test-amp-ad-network-valueimpression-impl.js b/extensions/amp-ad-network-valueimpression-impl/0.1/test/test-amp-ad-network-valueimpression-impl.js
new file mode 100644
index 0000000000000..259d374b9fdb6
--- /dev/null
+++ b/extensions/amp-ad-network-valueimpression-impl/0.1/test/test-amp-ad-network-valueimpression-impl.js
@@ -0,0 +1,221 @@
+/**
+ * Copyright 2016 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.
+ */
+
+// Need the following side-effect import because in actual production code,
+// Fast Fetch impls are always loaded via an AmpAd tag, which means AmpAd is
+// always available for them. However, when we test an impl in isolation,
+// AmpAd is not loaded already, so we need to load it separately.
+import '../../../amp-ad/0.1/amp-ad';
+import {AmpAdNetworkValueimpressionImpl} from '../amp-ad-network-valueimpression-impl';
+import {Services} from '../../../../src/services';
+import {createElementWithAttributes} from '../../../../src/dom';
+
+/**
+ * We're allowing external resources because otherwise using realWin causes
+ * strange behavior with iframes, as it doesn't load resources that we
+ * normally load in prod.
+ * We're turning on ampAdCss because using realWin means that we don't
+ * inherit that CSS from the parent page anymore.
+ */
+const realWinConfig = {
+  amp: {
+    extensions: ['amp-ad-network-valueimpression-impl'],
+  },
+  ampAdCss: true,
+  allowExternalResources: true,
+};
+
+describes.realWin(
+  'amp-ad-network-valueimpression-impl',
+  realWinConfig,
+  (env) => {
+    let win, doc;
+    let element;
+    let impl;
+
+    beforeEach(() => {
+      win = env.win;
+      doc = win.document;
+    });
+
+    afterEach(() => {});
+
+    describe('#isValidElement', () => {
+      beforeEach(() => {
+        element = doc.createElement('amp-ad');
+        element.setAttribute('type', 'valueimpression');
+        impl = new AmpAdNetworkValueimpressionImpl(element);
+      });
+
+      it('should be valid (amp-ad)', () => {
+        expect(impl.isValidElement()).to.be.true;
+      });
+
+      it('should be valid (amp-embed)', () => {
+        element = doc.createElement('amp-embed');
+        element.setAttribute('type', 'valueimpression');
+        impl = new AmpAdNetworkValueimpressionImpl(element);
+        expect(impl.isValidElement()).to.be.true;
+      });
+
+      it('should NOT be valid (impl tag name)', () => {
+        element = doc.createElement('amp-ad-network-valueimpression-impl');
+        element.setAttribute('type', 'valueimpression');
+        impl = new AmpAdNetworkValueimpressionImpl(element);
+        expect(impl.isValidElement()).to.be.false;
+      });
+    });
+
+    describe('#getCustomRealTimeConfigMacros_', () => {
+      it('should return correct macros', () => {
+        const macros = {
+          'height': '250',
+          'width': '300',
+        };
+        const rtcConfig = {
+          'urls': [
+            'https://useast.quantumdex.io/ampv2?client=23&metadata=autoCollect&tagid=1234',
+          ],
+        };
+        element = createElementWithAttributes(env.win.document, 'amp-ad', {
+          width: macros['width'],
+          height: macros['height'],
+          type: 'valueimpression',
+          layout: 'fixed',
+          'rtc-config': JSON.stringify(rtcConfig),
+        });
+        env.win.document.body.appendChild(element);
+
+        impl = new AmpAdNetworkValueimpressionImpl(
+          element,
+          env.win.document,
+          env.win
+        );
+        const customMacros = impl.getCustomRealTimeConfigMacros_();
+        expect(customMacros.autoCollect()).to.equal(
+          'href=about:srcdoc&canonical_url=http://localhost:9876/context.html&width=300&height=250&element_pos=0&scroll_top=0&page_height=254&bkg_state=visible'
+        );
+      });
+    });
+
+    describe('#getAdUrl', () => {
+      beforeEach(() => {
+        const rtcConfig = {
+          'urls': [
+            'https://useast.quantumdex.io/ampv2?client=23&metadata=autoCollect&tagid=1234',
+          ],
+        };
+
+        element = doc.createElement('amp-ad');
+        element.setAttribute('type', 'valueimpression');
+        element.setAttribute('width', '300');
+        element.setAttribute('height', '250');
+        element.setAttribute('rtc-config', JSON.stringify(rtcConfig));
+        doc.body.appendChild(element);
+        impl = new AmpAdNetworkValueimpressionImpl(element);
+        env.sandbox
+          .stub(impl, 'getIntersectionElementLayoutBox')
+          .callsFake(() => {
+            return {
+              top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0,
+              width: 320,
+              height: 350,
+            };
+          });
+      });
+
+      afterEach(() => {
+        doc.body.removeChild(element);
+      });
+
+      it('returns the right URL', () => {
+        const rtcResponseArray = [
+          {
+            response: {
+              'dfpSlot': '/21766683948/example.com',
+              'refreshInterval': 20000,
+              'targeting': {
+                'hb_cache_id': '0487b374-a394-46d8-9337-955793ab03fa',
+                'hb_pb': '0.01',
+                'hb_cache_path': '/cache/amp',
+                'hb_size': '300x250',
+                'hb_bidder': 'quantumdex',
+                'hb_cache_host': 'quantumsyndication.com',
+                'hb_bidid': 'e6e66901-6814-4919-8473-ba1fe65dffc1',
+                'vli_sf': '1',
+                'vli_adslot': '130',
+                'vli_adtype': 'display',
+              },
+            },
+            callout: 'useast.quantumdex.io/ampv2',
+            rtcTime: 250,
+          },
+        ];
+
+        const viewer = Services.viewerForDoc(element);
+        env.sandbox
+          .stub(viewer, 'getReferrerUrl')
+          .returns(Promise.resolve('http://example.com/?foo=bar'));
+
+        const impl = new AmpAdNetworkValueimpressionImpl(element);
+        return impl
+          .getAdUrl(
+            {consentString: 'user_consent_string', gdprApplies: true},
+            Promise.resolve(rtcResponseArray),
+            1
+          )
+          .then((url) => {
+            [
+              /^https:\/\/securepubads\.g\.doubleclick\.net\/gampad\/ads/,
+              /(\?|&)adk=\d+(&|$)/,
+              /(\?|&)gdfp_req=1(&|$)/,
+              /(\?|&)impl=ifr(&|$)/,
+              /(\?|&)sfv=\d+-\d+-\d+(&|$)/,
+              /(\?|&)sz=300x250(&|$)/,
+              /(\?|&)u_sd=[0-9]+(&|$)/,
+              /(\?|&)is_amp=3(&|$)/,
+              /(\?|&)amp_v=%24internalRuntimeVersion%24(&|$)/,
+              /(\?|&)d_imp=1(&|$)/,
+              /(\?|&)dt=[0-9]+(&|$)/,
+              /(\?|&)ifi=[0-9]+(&|$)/,
+              /(\?|&)c=[0-9]+(&|$)/,
+              /(\?|&)output=html(&|$)/,
+              /(\?|&)biw=[0-9]+(&|$)/,
+              /(\?|&)bih=[0-9]+(&|$)/,
+              /(\?|&)u_aw=[0-9]+(&|$)/,
+              /(\?|&)u_ah=[0-9]+(&|$)/,
+              /(\?|&)u_cd=(24|30)(&|$)/,
+              /(\?|&)u_w=[0-9]+(&|$)/,
+              /(\?|&)u_h=[0-9]+(&|$)/,
+              /(\?|&)u_tz=-?[0-9]+(&|$)/,
+              /(\?|&)u_his=[0-9]+(&|$)/,
+              /(\?|&)isw=[0-9]+(&|$)/,
+              /(\?|&)ish=[0-9]+(&|$)/,
+              /(\?|&)url=https?%3A%2F%2F[a-zA-Z0-9.:%-]+(&|$)/,
+              /(\?|&)top=localhost(&|$)/,
+              /(\?|&)ref=http%3A%2F%2Fexample.com%2F%3Ffoo%3Dbar/,
+              /(\?|&)dtd=[0-9]+(&|$)/,
+              /(\?|&)vis=[0-5]+(&|$)/,
+              /(\?|&)bdt=[1-9][0-9]*(&|$)/,
+            ].forEach((regexp) => expect(url).to.match(regexp));
+          });
+      });
+    });
+  }
+);
diff --git a/extensions/amp-ad-network-valueimpression-impl/0.1/test/test-flexible-ad-slot-utils.js b/extensions/amp-ad-network-valueimpression-impl/0.1/test/test-flexible-ad-slot-utils.js
new file mode 100644
index 0000000000000..422b188909d7a
--- /dev/null
+++ b/extensions/amp-ad-network-valueimpression-impl/0.1/test/test-flexible-ad-slot-utils.js
@@ -0,0 +1,200 @@
+/**
+ * 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.
+ */
+import {Services} from '../../../../src/services';
+import {createElementWithAttributes} from '../../../../src/dom';
+import {getFlexibleAdSlotData} from '../flexible-ad-slot-utils';
+
+describes.realWin('#getFlexibleAdSlotData', {amp: true}, (env) => {
+  let doc, win;
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+  });
+
+  function createResource(
+    config,
+    layout,
+    tagName = 'amp-ad',
+    parent = doc.body
+  ) {
+    config['layout'] = layout;
+    const element = createElementWithAttributes(doc, tagName, config);
+    parent.appendChild(element);
+    return element;
+  }
+
+  it('should return the fixed width for FIXED layout', () => {
+    const element = createResource({width: 300, height: 250}, 'fixed');
+    expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(300);
+  });
+
+  it('should return 0 for FIXED layout and invalid width', () => {
+    allowConsoleError(() => {
+      const element = createResource({width: 'auto', height: 250}, 'fixed');
+      expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(0);
+    });
+  });
+
+  it('should return 0 for NODISPLAY layout', () => {
+    const element = createResource({width: 500}, 'nodisplay');
+    expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(0);
+  });
+
+  it('should return 0 for FLEX_ITEM layout', () => {
+    const element = createResource({width: 500}, 'flex-item');
+    expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(0);
+  });
+
+  it('should return 0 for invalid layout', () => {
+    allowConsoleError(() => {
+      const element = createResource({width: 500}, 'qwerty');
+      expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(0);
+    });
+  });
+
+  it('should return the max-width, if present, for FILL layout', () => {
+    const element = createResource({maxWidth: 300}, 'fill');
+    expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(300);
+  });
+
+  it("should return parent's fixed width for FILL layout", () => {
+    const parent = document.createElement('div');
+    parent.setAttribute('width', 300);
+    parent.setAttribute('layout', 'fixed');
+    doc.body.appendChild(parent);
+    const element = createResource({} /* config */, 'fill', 'amp-ad', parent);
+    expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(300);
+  });
+
+  it('should return the max-width, if present, for FIXED_HEIGHT layout', () => {
+    const element = createResource({height: 300}, 'fixed-height');
+    element.style.maxWidth = '250px';
+    expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(250);
+  });
+
+  it("should return parent's fixed width for FIXED_HEIGHT layout", () => {
+    const parent = document.createElement('div');
+    parent.setAttribute('width', 300);
+    parent.setAttribute('layout', 'fixed');
+    doc.body.appendChild(parent);
+    const element = createResource(
+      {height: 250},
+      'fixed-height',
+      'amp-ad',
+      parent
+    );
+    expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(300);
+  });
+
+  it('should return the max-width, if present, for FLUID layout', () => {
+    const element = createResource({height: 300}, 'fluid');
+    element.style.maxWidth = '250px';
+    expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(250);
+  });
+
+  it("should return parent's fixed width for FLUID layout", () => {
+    const parent = document.createElement('div');
+    parent.setAttribute('width', 300);
+    parent.setAttribute('layout', 'fixed');
+    doc.body.appendChild(parent);
+    const element = createResource({height: 250}, 'fluid', 'amp-ad', parent);
+    expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(300);
+  });
+
+  it('should return the max-width, if present, for RESPONSIVE layout', () => {
+    const element = createResource({height: 200, width: 200}, 'responsive');
+    element.style.maxWidth = '250px';
+    expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(250);
+  });
+
+  it("should return parent's fixed width for RESPONSIVE layout", () => {
+    const parent = document.createElement('div');
+    parent.setAttribute('width', 300);
+    parent.setAttribute('layout', 'fixed');
+    doc.body.appendChild(parent);
+    const element = createResource(
+      {height: 250, width: 250},
+      'responsive',
+      'amp-ad',
+      parent
+    );
+    expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(300);
+  });
+
+  it('should return the viewport width for CONTAINER layout', () => {
+    const element = createResource({} /* config */, 'container');
+    env.sandbox
+      .stub(Services.viewportForDoc(element), 'getSize')
+      .returns({width: 300});
+    expect(getFlexibleAdSlotData(win, element).parentWidth).to.equal(300);
+  });
+
+  it('should return msz=-1 for non-fixed layouts', () => {
+    ['fill', 'fixed-height', 'fluid', 'responsive'].forEach((layout) => {
+      const parent = document.createElement('div');
+      parent.setAttribute('width', 300);
+      parent.setAttribute('layout', layout);
+      doc.body.appendChild(parent);
+      const element = createResource(
+        {width: 300, height: 250},
+        'responsive',
+        'amp-ad',
+        parent
+      );
+      expect(getFlexibleAdSlotData(win, element).slotWidth).to.equal(-1);
+    });
+  });
+
+  it('should have fwSignal=0 by default', () => {
+    const element = document.createElement('div');
+    const parent = document.createElement('div');
+    parent.appendChild(element);
+    doc.body.appendChild(parent);
+    for (let el = parent.parentElement; el != null; el = el.parentElement) {
+      el.setAttribute('style', 'overflow: visible !important;');
+    }
+    expect(getFlexibleAdSlotData(win, element).fwSignal).to.equal(0);
+  });
+
+  it('should have fwSignal=128 when ancestor is hidden', () => {
+    const element = document.createElement('div');
+    const parent = document.createElement('div');
+    parent.setAttribute('style', 'display: none;');
+    parent.appendChild(element);
+    doc.body.appendChild(parent);
+    for (let el = parent.parentElement; el != null; el = el.parentElement) {
+      el.setAttribute('style', 'overflow: visible !important;');
+    }
+    expect(getFlexibleAdSlotData(win, element).fwSignal).to.equal(128);
+  });
+
+  it('should have fwSignal=4 when ancestor has overflow hidden', () => {
+    const element = document.createElement('div');
+    const parent = document.createElement('div');
+    parent.setAttribute('style', 'overflow: hidden;');
+    parent.appendChild(element);
+    doc.body.appendChild(parent);
+    for (let el = parent.parentElement; el != null; el = el.parentElement) {
+      el.setAttribute('style', 'overflow: visible !important;');
+    }
+    expect(getFlexibleAdSlotData(win, element).fwSignal).to.equal(4);
+  });
+
+  it('should have parentStyle', () => {
+    const element = createResource({height: 200, width: 200}, 'fixed');
+    expect(getFlexibleAdSlotData(win, element).parentStyle).to.be.ok;
+  });
+});
diff --git a/extensions/amp-ad-network-valueimpression-impl/OWNERS b/extensions/amp-ad-network-valueimpression-impl/OWNERS
new file mode 100644
index 0000000000000..3e4eca5c11c11
--- /dev/null
+++ b/extensions/amp-ad-network-valueimpression-impl/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'ampproject/wg-ads-reviewers'}, {name: 'thuyhq'}],
+    },
+  ],
+}
diff --git a/extensions/amp-ad-network-valueimpression-impl/amp-ad-network-valueimpression-impl-internal.md b/extensions/amp-ad-network-valueimpression-impl/amp-ad-network-valueimpression-impl-internal.md
new file mode 100644
index 0000000000000..7542b350250b3
--- /dev/null
+++ b/extensions/amp-ad-network-valueimpression-impl/amp-ad-network-valueimpression-impl-internal.md
@@ -0,0 +1,64 @@
+<!---
+Copyright 2020 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.
+-->
+
+# amp-ad-network-valueimpression-impl
+
+ValueImpression implementation of AMP Ad tag which requests early by XHR and renders natively within the page if a valid AMP Ad is returned. Should not be directly referenced by pages and instead is dynamically loaded via the amp-ad tag. However, in order to remove an async script load of this library, publishers can include its script declaration.
+
+<table>
+  <tr>
+    <td class="col-fourty" width="50%"><strong>Availability</strong></td>
+    <td>In Development</td>
+  </tr>
+  <tr>
+    <td class="col-fourty"><strong>Required Script</strong></td>
+    <td><code>&lt;script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js">&lt;/script></code></td>
+  </tr>
+</table>
+
+ValueImpression uses the Real Time Config (RTC) to preload configuration settings for ad placements. So the ad tag only works when the install is loaded via the RTC from the following endpoint: `https://useast.quantumdex.io/ampv2`
+
+The following parameters are required
+
+<table>
+  <tr>
+    <td class="col-fourty" width="50%"><strong>client</strong></td>
+    <td>We set this value to "23" and cannot be changed by the publisher</td>
+  </tr>
+  <tr>
+    <td class="col-fourty"><strong>metadata</strong></td>
+    <td>We set this value to "autoCollect" and cannot be changed by the publisher</td>
+  </tr>
+  <tr>
+    <td class="col-fourty"><strong>tagid</strong></td>
+    <td>Tag ID is provided by valueimpression for each ad position. Example: 1234</td>
+  </tr>
+</table>
+
+## Example
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="valueimpression"
+  rtc-config='{
+    "urls": [
+        "https://useast.quantumdex.io/ampv2?client=26&metadata=autoCollect&tagid=1234"
+    ]
+  }'>
+</amp-ad>
+```
diff --git a/extensions/amp-ad/0.1/amp-ad-3p-impl.js b/extensions/amp-ad/0.1/amp-ad-3p-impl.js
index bb88145fe006e..25f1c96ba050d 100644
--- a/extensions/amp-ad/0.1/amp-ad-3p-impl.js
+++ b/extensions/amp-ad/0.1/amp-ad-3p-impl.js
@@ -18,11 +18,12 @@ import {
   ADSENSE_MCRSPV_TAG,
   getMatchedContentResponsiveHeightAndUpdatePubParams,
 } from '../../../ads/google/utils';
+import {ADS_INITIAL_INTERSECTION_EXP} from '../../../src/experiments/ads-initial-intersection-exp';
 import {AmpAdUIHandler} from './amp-ad-ui';
 import {AmpAdXOriginIframeHandler} from './amp-ad-xorigin-iframe-handler';
 import {
   CONSENT_POLICY_STATE, // eslint-disable-line no-unused-vars
-} from '../../../src/consent-state';
+} from '../../../src/core/constants/consent-state';
 import {
   Layout, // eslint-disable-line no-unused-vars
   LayoutPriority,
@@ -30,10 +31,10 @@ import {
 } from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {adConfig} from '../../../ads/_config';
-import {clamp} from '../../../src/utils/math';
+import {clamp} from '../../../src/core/math';
 import {computedStyle, setStyle} from '../../../src/style';
 import {dev, devAssert, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getAdCid} from '../../../src/ad-cid';
 import {getAdContainer, isAdPositionAllowed} from '../../../src/ad-helper';
 import {
@@ -42,12 +43,22 @@ import {
   is3pThrottled,
 } from './concurrent-load';
 import {
+  getConsentMetadata,
   getConsentPolicyInfo,
   getConsentPolicySharedData,
   getConsentPolicyState,
 } from '../../../src/consent';
+import {getExperimentBranch} from '../../../src/experiments';
 import {getIframe, preloadBootstrap} from '../../../src/3p-frame';
-import {moveLayoutRect} from '../../../src/layout-rect';
+import {
+  intersectionEntryToJson,
+  measureIntersection,
+} from '../../../src/utils/intersection';
+import {moveLayoutRect} from '../../../src/core/math/layout-rect';
+import {
+  observeWithSharedInOb,
+  unobserveWithSharedInOb,
+} from '../../../src/viewport-observer';
 import {toWin} from '../../../src/types';
 
 /** @const {string} Tag name for 3P AD implementation. */
@@ -109,6 +120,9 @@ export class AmpAd3PImpl extends AMP.BaseElement {
      */
     this.unlistenViewportChanges_ = null;
 
+    /** @private {Array<Function>} */
+    this.unlisteners_ = [];
+
     /**
      * @private {IntersectionObserver}
      * @visibleForTesting
@@ -136,6 +150,9 @@ export class AmpAd3PImpl extends AMP.BaseElement {
      * @private {boolean}
      */
     this.isFullWidthRequested_ = false;
+
+    /** @private {Promise<!IntersectionObserverEntry>} */
+    this.initialIntersectionPromise_ = null;
   }
 
   /** @override */
@@ -201,6 +218,13 @@ export class AmpAd3PImpl extends AMP.BaseElement {
     if (this.isFullWidthRequested_) {
       return this.attemptFullWidthSizeChange_();
     }
+
+    const asyncIntersection =
+      getExperimentBranch(this.win, ADS_INITIAL_INTERSECTION_EXP.id) ===
+      ADS_INITIAL_INTERSECTION_EXP.experiment;
+    this.initialIntersectionPromise_ = asyncIntersection
+      ? measureIntersection(this.element)
+      : Promise.resolve(this.element.getIntersectionChangeEntry());
   }
 
   /**
@@ -235,12 +259,7 @@ export class AmpAd3PImpl extends AMP.BaseElement {
   preconnectCallback(opt_onLayout) {
     const preconnect = Services.preconnectFor(this.win);
     // We always need the bootstrap.
-    preloadBootstrap(
-      this.win,
-      this.getAmpDoc(),
-      preconnect,
-      this.config.remoteHTMLDisabled
-    );
+    preloadBootstrap(this.win, this.type_, this.getAmpDoc(), preconnect);
     if (typeof this.config.prefetch == 'string') {
       preconnect.preload(this.getAmpDoc(), this.config.prefetch, 'script');
     } else if (this.config.prefetch) {
@@ -334,9 +353,9 @@ export class AmpAd3PImpl extends AMP.BaseElement {
       this.measureIframeLayoutBox_();
     }
 
-    const iframe = /** @type {!../../../src/layout-rect.LayoutRectDef} */ (devAssert(
-      this.iframeLayoutBox_
-    ));
+    const iframe = /** @type {!../../../src/layout-rect.LayoutRectDef} */ (
+      devAssert(this.iframeLayoutBox_)
+    );
     return moveLayoutRect(iframe, box.left, box.top);
   }
 
@@ -346,9 +365,9 @@ export class AmpAd3PImpl extends AMP.BaseElement {
       return this.layoutPromise_;
     }
     userAssert(
-      !this.isInFixedContainer_,
+      !this.isInFixedContainer_ || this.uiHandler.isStickyAd(),
       '<amp-ad> is not allowed to be placed in elements with ' +
-        'position:fixed: %s',
+        'position:fixed: %s unless it has sticky attribute',
       this.element
     );
 
@@ -357,55 +376,78 @@ export class AmpAd3PImpl extends AMP.BaseElement {
     const consentStringPromise = consentPolicyId
       ? getConsentPolicyInfo(this.element, consentPolicyId)
       : Promise.resolve(null);
+    const consentMetadataPromise = consentPolicyId
+      ? getConsentMetadata(this.element, consentPolicyId)
+      : Promise.resolve(null);
     const sharedDataPromise = consentPolicyId
       ? getConsentPolicySharedData(this.element, consentPolicyId)
       : Promise.resolve(null);
 
+    // For sticky ad only: must wait for scrolling event before loading the ad
+    const scrollPromise = this.uiHandler.getScrollPromiseForStickyAd();
+
     this.layoutPromise_ = Promise.all([
       getAdCid(this),
       consentPromise,
       sharedDataPromise,
       consentStringPromise,
-    ]).then((consents) => {
-      // Use JsonObject to preserve field names so that ampContext can access
-      // values with name
-      // ampcontext.js and this file are compiled in different compilation unit
-
-      // Note: Field names can by perserved by using JsonObject, or by adding
-      // perserved name to extern. We are doing both right now.
-      // Please also add new introduced variable
-      // name to the extern list.
-      const opt_context = dict({
-        'clientId': consents[0] || null,
-        'container': this.container_,
-        'initialConsentState': consents[1],
-        'consentSharedData': consents[2],
+      consentMetadataPromise,
+      scrollPromise,
+    ])
+      .then((consents) => {
+        this.uiHandler.maybeInitStickyAd();
+
+        // Use JsonObject to preserve field names so that ampContext can access
+        // values with name
+        // ampcontext.js and this file are compiled in different compilation unit
+
+        // Note: Field names can by perserved by using JsonObject, or by adding
+        // perserved name to extern. We are doing both right now.
+        // Please also add new introduced variable
+        // name to the extern list.
+        const opt_context = dict({
+          'clientId': consents[0] || null,
+          'container': this.container_,
+          'initialConsentState': consents[1],
+          'consentSharedData': consents[2],
+          'initialConsentValue': consents[3],
+          'initialConsentMetadata': consents[4],
+        });
+
+        // In this path, the request and render start events are entangled,
+        // because both happen inside a cross-domain iframe.  Separating them
+        // here, though, allows us to measure the impact of ad throttling via
+        // incrementLoadingAds().
+
+        return this.initialIntersectionPromise_.then((intersection) => {
+          const iframe = getIframe(
+            toWin(this.element.ownerDocument.defaultView),
+            this.element,
+            this.type_,
+            opt_context,
+            {
+              initialIntersection: intersectionEntryToJson(intersection),
+            }
+          );
+          iframe.title = this.element.title || 'Advertisement';
+          this.xOriginIframeHandler_ = new AmpAdXOriginIframeHandler(this);
+          return this.xOriginIframeHandler_.init(iframe);
+        });
+      })
+      .then(() => {
+        observeWithSharedInOb(this.element, (inViewport) =>
+          this.viewportCallback_(inViewport)
+        );
       });
-      opt_context['initialConsentValue'] = consents[3];
-
-      // In this path, the request and render start events are entangled,
-      // because both happen inside a cross-domain iframe.  Separating them
-      // here, though, allows us to measure the impact of ad throttling via
-      // incrementLoadingAds().
-      const iframe = getIframe(
-        toWin(this.element.ownerDocument.defaultView),
-        this.element,
-        this.type_,
-        opt_context,
-        {disallowCustom: this.config.remoteHTMLDisabled}
-      );
-      this.xOriginIframeHandler_ = new AmpAdXOriginIframeHandler(this);
-      return this.xOriginIframeHandler_.init(iframe);
-    });
     incrementLoadingAds(this.win, this.layoutPromise_);
     return this.layoutPromise_;
   }
 
   /**
    * @param {boolean} inViewport
-   * @override
+   * @private
    */
-  viewportCallback(inViewport) {
+  viewportCallback_(inViewport) {
     if (this.xOriginIframeHandler_) {
       this.xOriginIframeHandler_.viewportCallback(inViewport);
     }
@@ -413,33 +455,24 @@ export class AmpAd3PImpl extends AMP.BaseElement {
 
   /** @override */
   unlayoutOnPause() {
-    return (
-      !this.xOriginIframeHandler_ || !this.xOriginIframeHandler_.isPausable()
-    );
-  }
-
-  /** @override  */
-  pauseCallback() {
-    if (this.xOriginIframeHandler_) {
-      this.xOriginIframeHandler_.setPaused(true);
-    }
-  }
-
-  /** @override  */
-  resumeCallback() {
-    if (this.xOriginIframeHandler_) {
-      this.xOriginIframeHandler_.setPaused(false);
-    }
+    return true;
   }
 
   /** @override  */
   unlayoutCallback() {
+    this.unlisteners_.forEach((unlisten) => unlisten());
+    this.unlisteners_.length = 0;
+    unobserveWithSharedInOb(this.element);
+
     this.layoutPromise_ = null;
     this.uiHandler.applyUnlayoutUI();
     if (this.xOriginIframeHandler_) {
       this.xOriginIframeHandler_.freeXOriginIframe();
       this.xOriginIframeHandler_ = null;
     }
+    if (this.uiHandler) {
+      this.uiHandler.cleanup();
+    }
     return true;
   }
 
diff --git a/extensions/amp-ad/0.1/amp-ad-custom.js b/extensions/amp-ad/0.1/amp-ad-custom.js
index 2724259d643fe..2bed7c45e0931 100644
--- a/extensions/amp-ad/0.1/amp-ad-custom.js
+++ b/extensions/amp-ad/0.1/amp-ad-custom.js
@@ -15,7 +15,7 @@
  */
 
 import {AmpAdUIHandler} from './amp-ad-ui';
-import {CommonSignals} from '../../../src/common-signals';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
 import {LayoutPriority, isLayoutSizeDefined} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {addParamToUrl} from '../../../src/url';
@@ -24,7 +24,7 @@ import {
   closestAncestorElementBySelector,
   removeChildren,
 } from '../../../src/dom';
-import {hasOwn} from '../../../src/utils/object';
+import {hasOwn} from '../../../src/core/types/object';
 import {userAssert} from '../../../src/log';
 
 /** @const {string} Tag name for custom ad implementation. */
@@ -123,7 +123,7 @@ export class AmpAdCustom extends AMP.BaseElement {
       this.renderStarted();
 
       try {
-        Services.templatesFor(this.win)
+        Services.templatesForDoc(this.element)
           .findAndRenderTemplate(this.element, templateData)
           .then((renderedElement) => {
             // Get here when the template has been rendered Clear out the
diff --git a/extensions/amp-ad/0.1/amp-ad-ui.js b/extensions/amp-ad/0.1/amp-ad-ui.js
index e343193690edf..a86739a7afb0c 100644
--- a/extensions/amp-ad/0.1/amp-ad-ui.js
+++ b/extensions/amp-ad/0.1/amp-ad-ui.js
@@ -15,8 +15,32 @@
  */
 
 import {Services} from '../../../src/services';
-import {ancestorElementsByTag} from '../../../src/dom';
+import {
+  ancestorElementsByTag,
+  createElementWithAttributes,
+  removeElement,
+} from '../../../src/dom';
+import {devAssert} from '../../../src/log';
+import {dict} from '../../../src/core/types/object';
+
 import {getAdContainer} from '../../../src/ad-helper';
+import {listen} from '../../../src/event-helper';
+import {setStyle, setStyles} from '../../../src/style';
+
+const STICKY_AD_MAX_SIZE_LIMIT = 0.2;
+const STICKY_AD_MAX_HEIGHT_LIMIT = 0.5;
+
+/**
+ * Permissible sticky ad options.
+ * @const @enum {string}
+ */
+const StickyAdPositions = {
+  TOP: 'top',
+  BOTTOM: 'bottom',
+  BOTTOM_RIGHT: 'bottom-right',
+};
+
+const STICKY_AD_PROP = 'sticky';
 
 export class AmpAdUIHandler {
   /**
@@ -34,6 +58,31 @@ export class AmpAdUIHandler {
 
     this.containerElement_ = null;
 
+    /**
+     * If this is a sticky ad unit, the sticky position option.
+     * @private {?StickyAdPositions}
+     */
+    this.stickyAdPosition_ = null;
+    if (this.element_.hasAttribute(STICKY_AD_PROP)) {
+      // TODO(powerivq@) Kargo is currently running an experiment using empty sticky attribute, so
+      // we default the position to bottom right. Remove this default afterwards.
+      this.stickyAdPosition_ =
+        this.element_.getAttribute(STICKY_AD_PROP) ||
+        StickyAdPositions.BOTTOM_RIGHT;
+      this.element_.setAttribute(STICKY_AD_PROP, this.stickyAdPosition_);
+    }
+
+    /**
+     * Whether the close button has been rendered for a sticky ad unit.
+     */
+    this.closeButtonRendered_ = false;
+
+    /**
+     * Unlisteners to be unsubscribed after destroying.
+     * @private {!Array<!Function>}
+     */
+    this.unlisteners_ = [];
+
     if (this.element_.hasAttribute('data-ad-container-id')) {
       const id = this.element_.getAttribute('data-ad-container-id');
       const container = this.doc_.getElementById(id);
@@ -146,6 +195,90 @@ export class AmpAdUIHandler {
     return uiComponent;
   }
 
+  /**
+   * @return {boolean}
+   */
+  isStickyAd() {
+    return this.stickyAdPosition_ !== null;
+  }
+
+  /**
+   * Initialize sticky ad related features
+   */
+  maybeInitStickyAd() {
+    if (this.isStickyAd()) {
+      setStyle(this.element_, 'visibility', 'visible');
+
+      if (this.stickyAdPosition_ == StickyAdPositions.BOTTOM) {
+        const paddingBar = this.doc_.createElement('amp-ad-sticky-padding');
+        this.element_.insertBefore(
+          paddingBar,
+          devAssert(
+            this.element_.firstChild,
+            'amp-ad should have been expanded.'
+          )
+        );
+      }
+    }
+  }
+
+  /**
+   * Scroll promise for sticky ad
+   * @return {Promise}
+   */
+  getScrollPromiseForStickyAd() {
+    if (this.isStickyAd()) {
+      return new Promise((resolve) => {
+        const unlisten = Services.viewportForDoc(
+          this.element_.getAmpDoc()
+        ).onScroll(() => {
+          resolve();
+          unlisten();
+        });
+      });
+    }
+    return Promise.resolve(null);
+  }
+
+  /**
+   * When a sticky ad is shown, the close button should be rendered at the same time.
+   */
+  onResizeSuccess() {
+    if (this.isStickyAd() && !this.closeButtonRendered_) {
+      this.addCloseButton_();
+      this.closeButtonRendered_ = true;
+    }
+  }
+
+  /**
+   * The function that add a close button to sticky ad
+   */
+  addCloseButton_() {
+    const closeButton = createElementWithAttributes(
+      /** @type {!Document} */ (this.element_.ownerDocument),
+      'button',
+      dict({
+        'aria-label':
+          this.element_.getAttribute('data-close-button-aria-label') ||
+          'Close this ad',
+      })
+    );
+
+    this.unlisteners_.push(
+      listen(closeButton, 'click', () => {
+        Services.vsyncFor(this.baseInstance_.win).mutate(() => {
+          const viewport = Services.viewportForDoc(this.element_.getAmpDoc());
+          viewport.removeFromFixedLayer(this.element);
+          removeElement(this.element_);
+          viewport.updatePaddingBottom(0);
+        });
+      })
+    );
+
+    closeButton.classList.add('amp-ad-close-button');
+    this.element_.appendChild(closeButton);
+  }
+
   /**
    * @param {number|string|undefined} height
    * @param {number|string|undefined} width
@@ -189,16 +322,55 @@ export class AmpAdUIHandler {
       resizeInfo.success = false;
       return Promise.resolve(resizeInfo);
     }
+
+    // Special case: for sticky ads, we enforce 20% size limit and 50% height limit
+    if (this.isStickyAd()) {
+      const viewport = this.baseInstance_.getViewport();
+      if (
+        height * width >
+          STICKY_AD_MAX_SIZE_LIMIT *
+            viewport.getHeight() *
+            viewport.getWidth() ||
+        newHeight > STICKY_AD_MAX_HEIGHT_LIMIT * viewport.getHeight()
+      ) {
+        resizeInfo.success = false;
+        return Promise.resolve(resizeInfo);
+      }
+    }
     return this.baseInstance_
       .attemptChangeSize(newHeight, newWidth, event)
       .then(
-        () => resizeInfo,
+        () => {
+          this.setSize_(this.element_.querySelector('iframe'), height, width);
+          return resizeInfo;
+        },
         () => {
           resizeInfo.success = false;
           return resizeInfo;
         }
       );
   }
+
+  /**
+   * Force set the dimensions for an element
+   * @param {Any} element
+   * @param {number} newHeight
+   * @param {number} newWidth
+   */
+  setSize_(element, newHeight, newWidth) {
+    setStyles(element, {
+      'height': `${newHeight}px`,
+      'width': `${newWidth}px`,
+    });
+  }
+
+  /**
+   * Clean up the listeners
+   */
+  cleanup() {
+    this.unlisteners_.forEach((unlistener) => unlistener());
+    this.unlisteners_.length = 0;
+  }
 }
 
 // Make the class available to other late loaded amp-ad implementations
diff --git a/extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js b/extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js
index 4c0b2eff09826..f71cefe1ceed4 100644
--- a/extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js
+++ b/extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js
@@ -15,34 +15,34 @@
  */
 
 import {CONSTANTS, MessageType} from '../../../src/3p-frame-messaging';
-import {CommonSignals} from '../../../src/common-signals';
-import {Deferred} from '../../../src/utils/promise';
-import {IntersectionObserverHostForAd} from './intersection-observer-host';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {LegacyAdIntersectionObserverHost} from './legacy-ad-intersection-observer-host';
 import {Services} from '../../../src/services';
 import {
   SubscriptionApi,
-  isPausable,
   listenFor,
   listenForOncePromise,
-  makePausable,
   postMessageToWindows,
-  setPaused,
 } from '../../../src/iframe-helper';
 import {dev, devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getData} from '../../../src/event-helper';
-import {getHtml} from '../../../src/get-html';
+import {getHtml} from '../../../src/core/dom/get-html';
 import {isExperimentOn} from '../../../src/experiments';
 import {isGoogleAdsA4AValidEnvironment} from '../../../ads/google/a4a/utils';
 import {removeElement} from '../../../src/dom';
-import {reportErrorToAnalytics} from '../../../src/error';
+import {reportErrorToAnalytics} from '../../../src/error-reporting';
 import {setStyle} from '../../../src/style';
-import {throttle} from '../../../src/utils/rate-limit';
+import {throttle} from '../../../src/core/types/function';
 
 const VISIBILITY_TIMEOUT = 10000;
 
 const MIN_INABOX_POSITION_EVENT_INTERVAL = 100;
 
+/** @type {string} */
+const TAG = 'amp-ad-xorigin-iframe';
+
 export class AmpAdXOriginIframeHandler {
   /**
    * @param {!./amp-ad-3p-impl.AmpAd3PImpl|!../../amp-a4a/0.1/amp-a4a.AmpA4A} baseInstance
@@ -63,8 +63,8 @@ export class AmpAdXOriginIframeHandler {
     /** @type {?HTMLIFrameElement} iframe instance */
     this.iframe = null;
 
-    /** @private {?IntersectionObserverHostForAd} */
-    this.intersectionObserverHost_ = null;
+    /** @private {?LegacyAdIntersectionObserverHost} */
+    this.legacyIntersectionObserverApiHost_ = null;
 
     /** @private {SubscriptionApi} */
     this.embedStateApi_ = null;
@@ -81,6 +81,9 @@ export class AmpAdXOriginIframeHandler {
     /** @private @const {!../../../src/service/viewport/viewport-interface.ViewportInterface} */
     this.viewport_ = Services.viewportForDoc(this.baseInstance_.getAmpDoc());
 
+    /** @private {boolean} */
+    this.inViewport_ = false;
+
     /** @private {boolean} */
     this.sendPositionPending_ = false;
   }
@@ -97,21 +100,21 @@ export class AmpAdXOriginIframeHandler {
     devAssert(!this.iframe, 'multiple invocations of init without destroy!');
     this.iframe = iframe;
     this.iframe.setAttribute('scrolling', 'no');
-    this.baseInstance_.applyFillContent(this.iframe);
+    if (!this.uiHandler_.isStickyAd()) {
+      this.baseInstance_.applyFillContent(this.iframe);
+    }
     const timer = Services.timerFor(this.baseInstance_.win);
 
-    // Init IntersectionObserver service.
-    this.intersectionObserverHost_ = new IntersectionObserverHostForAd(
-      this.baseInstance_,
-      this.iframe,
-      true
-    );
+    // Init the legacy observeInterection API service.
+    // (Behave like position observer)
+    this.legacyIntersectionObserverApiHost_ =
+      new LegacyAdIntersectionObserverHost(this.baseInstance_, this.iframe);
 
     this.embedStateApi_ = new SubscriptionApi(
       this.iframe,
       'send-embed-state',
       true,
-      () => this.sendEmbedInfo_(this.baseInstance_.isInViewport())
+      () => this.sendEmbedInfo_(this.inViewport_)
     );
 
     // Enable creative position observer if inabox experiment enabled OR
@@ -167,6 +170,7 @@ export class AmpAdXOriginIframeHandler {
             this.element_.warnOnMissingOverflow = false;
           }
           this.handleResize_(
+            data['id'],
             data['height'],
             data['width'],
             source,
@@ -179,9 +183,24 @@ export class AmpAdXOriginIframeHandler {
       )
     );
 
+    if (this.uiHandler_.isStickyAd()) {
+      setStyle(iframe, 'pointer-events', 'none');
+      this.unlisteners_.push(
+        listenFor(
+          this.iframe,
+          'signal-interactive',
+          () => {
+            setStyle(iframe, 'pointer-events', 'auto');
+          },
+          true,
+          true
+        )
+      );
+    }
+
     this.unlisteners_.push(
       this.baseInstance_.getAmpDoc().onVisibilityChanged(() => {
-        this.sendEmbedInfo_(this.baseInstance_.isInViewport());
+        this.sendEmbedInfo_(this.inViewport_);
       })
     );
 
@@ -190,7 +209,10 @@ export class AmpAdXOriginIframeHandler {
         this.iframe,
         MessageType.USER_ERROR_IN_IFRAME,
         (data) => {
-          this.userErrorForAnalytics_(data['message']);
+          this.userErrorForAnalytics_(
+            data['message'],
+            data['expected'] == true
+          );
         },
         true,
         true /* opt_includingNestedWindows */
@@ -210,14 +232,10 @@ export class AmpAdXOriginIframeHandler {
       });
 
     // Calculate render-start and no-content signals.
-    const {
-      promise: renderStartPromise,
-      resolve: renderStartResolve,
-    } = new Deferred();
-    const {
-      promise: noContentPromise,
-      resolve: noContentResolve,
-    } = new Deferred();
+    const {promise: renderStartPromise, resolve: renderStartResolve} =
+      new Deferred();
+    const {promise: noContentPromise, resolve: noContentResolve} =
+      new Deferred();
 
     if (
       this.baseInstance_.config &&
@@ -264,12 +282,6 @@ export class AmpAdXOriginIframeHandler {
       this.baseInstance_.signals().signal(CommonSignals.INI_LOAD);
     });
 
-    // If "pausable-iframe" enabled, try to make the iframe pausable. It doesn't
-    // matter here whether this will succeed or not.
-    if (isExperimentOn(this.win_, 'pausable-iframe')) {
-      makePausable(this.iframe);
-    }
-
     this.element_.appendChild(this.iframe);
     if (opt_isA4A && !opt_letCreativeTriggerRenderStart) {
       // A4A writes creative frame directly to page once creative is received
@@ -357,6 +369,7 @@ export class AmpAdXOriginIframeHandler {
   renderStartMsgHandler_(info) {
     const data = getData(info);
     this.handleResize_(
+      undefined,
       data['height'],
       data['width'],
       info['source'],
@@ -411,9 +424,9 @@ export class AmpAdXOriginIframeHandler {
       this.inaboxPositionApi_.destroy();
       this.inaboxPositionApi_ = null;
     }
-    if (this.intersectionObserverHost_) {
-      this.intersectionObserverHost_.destroy();
-      this.intersectionObserverHost_ = null;
+    if (this.legacyIntersectionObserverApiHost_) {
+      this.legacyIntersectionObserverApiHost_.destroy();
+      this.legacyIntersectionObserverApiHost_ = null;
     }
   }
 
@@ -421,6 +434,7 @@ export class AmpAdXOriginIframeHandler {
    * Updates the element's dimensions to accommodate the iframe's
    * requested dimensions. Notifies the window that request the resize
    * of success or failure.
+   * @param {number|undefined} id
    * @param {number|string|undefined} height
    * @param {number|string|undefined} width
    * @param {!Window} source
@@ -428,7 +442,7 @@ export class AmpAdXOriginIframeHandler {
    * @param {!MessageEvent} event
    * @private
    */
-  handleResize_(height, width, source, origin, event) {
+  handleResize_(id, height, width, source, origin, event) {
     this.baseInstance_.getVsync().mutate(() => {
       if (!this.iframe) {
         // iframe can be cleanup before vsync.
@@ -440,8 +454,10 @@ export class AmpAdXOriginIframeHandler {
         .updateSize(height, width, iframeHeight, iframeWidth, event)
         .then(
           (info) => {
+            this.uiHandler_.onResizeSuccess();
             this.sendEmbedSizeResponse_(
               info.success,
+              id,
               info.newWidth,
               info.newHeight,
               source,
@@ -456,6 +472,7 @@ export class AmpAdXOriginIframeHandler {
   /**
    * Sends a response to the window which requested a resize.
    * @param {boolean} success
+   * @param {number|undefined} id
    * @param {number} requestedWidth
    * @param {number} requestedHeight
    * @param {!Window} source
@@ -464,6 +481,7 @@ export class AmpAdXOriginIframeHandler {
    */
   sendEmbedSizeResponse_(
     success,
+    id,
     requestedWidth,
     requestedHeight,
     source,
@@ -478,6 +496,7 @@ export class AmpAdXOriginIframeHandler {
       [{win: source, origin}],
       success ? 'embed-size-changed' : 'embed-size-denied',
       dict({
+        'id': id,
         'requestedWidth': requestedWidth,
         'requestedHeight': requestedHeight,
       }),
@@ -573,9 +592,7 @@ export class AmpAdXOriginIframeHandler {
    * @param {boolean} inViewport
    */
   viewportCallback(inViewport) {
-    if (this.intersectionObserverHost_) {
-      this.intersectionObserverHost_.onViewportCallback(inViewport);
-    }
+    this.inViewport_ = inViewport;
     this.sendEmbedInfo_(inViewport);
   }
 
@@ -585,43 +602,28 @@ export class AmpAdXOriginIframeHandler {
   onLayoutMeasure() {
     // When the framework has the need to remeasure us, our position might
     // have changed. Send an intersection record if needed.
-    if (this.intersectionObserverHost_) {
-      this.intersectionObserverHost_.fire();
+    if (this.legacyIntersectionObserverApiHost_) {
+      this.legacyIntersectionObserverApiHost_.fire();
     }
   }
 
   /**
    * @param {string} message
+   * @param {boolean} expected
    * @private
    */
-  userErrorForAnalytics_(message) {
-    if (typeof message == 'string') {
+  userErrorForAnalytics_(message, expected) {
+    if (typeof message != 'string') {
+      return;
+    }
+    if (expected) {
+      dev().expectedError(TAG, message);
+    } else {
       const e = new Error(message);
       e.name = '3pError';
       reportErrorToAnalytics(e, this.baseInstance_.win);
     }
   }
-
-  /**
-   * @return {boolean}
-   */
-  isPausable() {
-    return (
-      isExperimentOn(this.win_, 'pausable-iframe') &&
-      !!this.iframe &&
-      isPausable(this.iframe)
-    );
-  }
-
-  /**
-   * See `BaseElement.pauseCallback()` and `BaseElement.resumeCallback()`.
-   * @param {boolean} paused
-   */
-  setPaused(paused) {
-    if (isExperimentOn(this.win_, 'pausable-iframe') && this.iframe) {
-      setPaused(this.iframe, paused);
-    }
-  }
 }
 
 // Make the class available to other late loaded amp-ad implementations
diff --git a/extensions/amp-ad/0.1/amp-ad.css b/extensions/amp-ad/0.1/amp-ad.css
index cdfe5180f11af..e3ff90dca1c9f 100644
--- a/extensions/amp-ad/0.1/amp-ad.css
+++ b/extensions/amp-ad/0.1/amp-ad.css
@@ -38,7 +38,7 @@ amp-embed iframe {
 }
 
 .i-amphtml-ad-default-holder:after {
-  content: "Ad";
+  content: 'Ad';
   content: attr(data-ad-holder-text);
   background-color: transparent;
   border-radius: 2px;
@@ -50,22 +50,108 @@ amp-embed iframe {
   border: 1px, solid, #696969;
 }
 
-amp-ad[type="adsense"], amp-ad[type="doubleclick"] {
+amp-ad[sticky] {
+  visibility: hidden;
+  align-items: center;
+}
+
+amp-ad[type='adsense'],
+amp-ad[type='doubleclick'] {
   direction: ltr;
 }
 
-amp-ad[data-a4a-upgrade-type="amp-ad-network-doubleclick-impl"] > iframe,
-amp-ad[data-a4a-upgrade-type="amp-ad-network-adsense-impl"] > iframe {
+amp-ad[data-a4a-upgrade-type='amp-ad-network-doubleclick-impl'] > iframe,
+amp-ad[data-a4a-upgrade-type='amp-ad-network-adsense-impl'] > iframe {
   min-height: 0;
   min-width: 0;
 }
 
-amp-ad[data-a4a-upgrade-type="amp-ad-network-doubleclick-impl"][height="fluid"] > iframe {
+amp-ad[data-a4a-upgrade-type='amp-ad-network-doubleclick-impl'][height='fluid']
+  > iframe {
   height: 100% !important;
   width: 100% !important;
   position: relative;
 }
 
-amp-ad[data-a4a-upgrade-type="amp-ad-network-doubleclick-impl"][height="fluid"] {
+amp-ad[data-a4a-upgrade-type='amp-ad-network-doubleclick-impl'][height='fluid'] {
+  width: 100% !important;
+}
+
+amp-ad .amp-ad-close-button {
+  position: absolute;
+  visibility: visible;
+  width: 28px;
+  height: 28px;
+  top: -28px;
+  right: 0;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="13" height="13" viewBox="341 8 13 13" xmlns="http://www.w3.org/2000/svg"><path fill="#4F4F4F" d="M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z" fill-rule="evenodd"/></svg>');
+  background-size: 13px 13px;
+  background-position: 9px center;
+  background-color: #fff;
+  background-repeat: no-repeat;
+  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
+  border: none;
+  border-radius: 12px 0 0 0;
+}
+
+/* Increase tapping area of the dismiss button */
+amp-ad .amp-ad-close-button:before {
+  position: absolute;
+  content: '';
+  top: -20px;
+  right: 0;
+  left: -20px;
+  bottom: 0;
+}
+
+[dir='rtl'] amp-ad .amp-ad-close-button {
+  right: auto;
+  left: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 12px;
+  background-position: 6px center;
+}
+
+[dir='rtl'] amp-ad .amp-ad-close-button:before {
+  right: -20px;
+  left: 0;
+}
+
+amp-ad-sticky-padding {
+  display: block;
+  width: 100% !important;
+  background: #fff;
+  height: 4px;
+  max-height: 5px !important;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  /** Must be above the dismiss button to cover bottom shadow */
+  z-index: 12;
+}
+
+amp-ad[sticky] {
+  z-index: 11;
+  position: fixed;
+  overflow: visible !important;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2) !important;
+  display: flex;
+  flex-direction: column;
+}
+
+amp-ad[sticky='top'] {
   width: 100% !important;
+  background: #fff;
+  top: 0;
+}
+
+amp-ad[sticky='bottom'] {
+  width: 100% !important;
+  background: #fff;
+  bottom: 0;
+}
+
+amp-ad[sticky='bottom-right'] {
+  bottom: 0;
+  right: 0;
 }
diff --git a/extensions/amp-ad/0.1/amp-ad.js b/extensions/amp-ad/0.1/amp-ad.js
index 084c3ae2eca2e..74aa15379b627 100644
--- a/extensions/amp-ad/0.1/amp-ad.js
+++ b/extensions/amp-ad/0.1/amp-ad.js
@@ -19,7 +19,7 @@ import {CSS} from '../../../build/amp-ad-0.1.css';
 import {Services} from '../../../src/services';
 import {adConfig} from '../../../ads/_config';
 import {getA4ARegistry} from '../../../ads/_a4a-config';
-import {hasOwn} from '../../../src/utils/object';
+import {hasOwn} from '../../../src/core/types/object';
 import {userAssert} from '../../../src/log';
 
 /**
@@ -74,9 +74,9 @@ export class AmpAd extends AMP.BaseElement {
         this.getVsync().mutate(() => {
           this.element.setAttribute('data-amp-slot-index', slotId);
 
-          const useRemoteHtml =
-            !(adConfig[type] || {})['remoteHTMLDisabled'] &&
-            this.element.getAmpDoc().getMetaByName('amp-3p-iframe-src');
+          const useRemoteHtml = this.element
+            .getAmpDoc()
+            .getMetaByName('amp-3p-iframe-src');
           // TODO(tdrl): Check amp-ad registry to see if they have this already.
           // TODO(a4a-cam): Shorten this predicate.
           if (
diff --git a/extensions/amp-ad/0.1/concurrent-load.js b/extensions/amp-ad/0.1/concurrent-load.js
index caf42564c77bb..6f458fecad743 100644
--- a/extensions/amp-ad/0.1/concurrent-load.js
+++ b/extensions/amp-ad/0.1/concurrent-load.js
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Services} from '../../../src/services';
 import {user, userAssert} from '../../../src/log';
 
diff --git a/extensions/amp-ad/0.1/intersection-observer-host.js b/extensions/amp-ad/0.1/intersection-observer-host.js
deleted file mode 100644
index b4bd3b65b5c33..0000000000000
--- a/extensions/amp-ad/0.1/intersection-observer-host.js
+++ /dev/null
@@ -1,292 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {Services} from '../../../src/services';
-import {SubscriptionApi} from '../../../src/iframe-helper';
-import {devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {
-  layoutRectLtwh,
-  moveLayoutRect,
-  rectIntersection,
-} from '../../../src/layout-rect';
-
-/**
- * The structure that defines the rectangle used in intersection observers.
- *
- * @typedef {{
- *   top: number,
- *   bottom: number,
- *   left: number,
- *   right: number,
- *   width: number,
- *   height: number,
- *   x: number,
- *   y: number,
- * }}
- */
-export let DOMRect;
-
-/**
- * Returns the ratio of the smaller box's area to the larger box's area.
- * @param {!../../../src/layout-rect.LayoutRectDef} smaller
- * @param {!../../../src/layout-rect.LayoutRectDef} larger
- * @return {number}
- */
-function intersectionRatio(smaller, larger) {
-  return (smaller.width * smaller.height) / (larger.width * larger.height);
-}
-
-/**
- * Produces a change entry for that should be compatible with
- * IntersectionObserverEntry.
- *
- * Mutates passed in rootBounds to have x and y according to spec.
- *
- * @param {!../../../src/layout-rect.LayoutRectDef} element The element's layout rectangle
- * @param {?../../../src/layout-rect.LayoutRectDef} owner The owner's layout rect, if
- *     there is an owner.
- * @param {!../../../src/layout-rect.LayoutRectDef} viewport The viewport's layout rect.
- * @return {!IntersectionObserverEntry} A change entry.
- * @private
- * @visibleForTesting
- */
-export function getIntersectionChangeEntry(element, owner, viewport) {
-  devAssert(
-    element.width >= 0 && element.height >= 0,
-    'Negative dimensions in element.'
-  );
-  // Building an IntersectionObserverEntry.
-
-  let intersectionRect = element;
-  if (owner) {
-    intersectionRect =
-      rectIntersection(owner, element) ||
-      // No intersection.
-      layoutRectLtwh(0, 0, 0, 0);
-  }
-  intersectionRect =
-    rectIntersection(viewport, intersectionRect) ||
-    // No intersection.
-    layoutRectLtwh(0, 0, 0, 0);
-
-  // The element is relative to (0, 0), while the viewport moves. So, we must
-  // adjust.
-  const boundingClientRect = moveLayoutRect(
-    element,
-    -viewport.left,
-    -viewport.top
-  );
-  intersectionRect = moveLayoutRect(
-    intersectionRect,
-    -viewport.left,
-    -viewport.top
-  );
-  // Now, move the viewport to (0, 0)
-  const rootBounds = moveLayoutRect(viewport, -viewport.left, -viewport.top);
-
-  return /** @type {!IntersectionObserverEntry} */ ({
-    time: Date.now(),
-    rootBounds,
-    boundingClientRect,
-    intersectionRect,
-    intersectionRatio: intersectionRatio(intersectionRect, element),
-  });
-}
-
-/**
- * The IntersectionObserver class lets any element share its viewport
- * intersection data with an iframe of its choice (most likely contained within
- * the element itself.). When instantiated the class will start listening for a
- * 'send-intersections' postMessage from the iframe, and only then  would start
- * sending intersection data to the iframe. The intersection data would be sent
- * when the element is moved inside or outside the viewport as well as on scroll
- * and resize. The element should create an IntersectionObserver instance once
- * the Iframe element is created. The IntersectionObserver class exposes a
- * `fire` method that would send the intersection data to the iframe. The
- * IntersectionObserver class exposes a `onViewportCallback` method that should
- * be called inside if the viewportCallback of the element. This would let the
- * element sent intersection data automatically when there element comes inside
- * or goes outside the viewport and also manage sending intersection data
- * onscroll and resize. Note: The IntersectionObserver would not send any data
- * over to the iframe if it had not requested the intersection data already via
- * a postMessage.
- */
-export class IntersectionObserverHostForAd {
-  /**
-   * @param {!AMP.BaseElement} baseElement
-   * @param {!Element} iframe Iframe element which requested the
-   *     intersection data.
-   * @param {?boolean} opt_is3p Set to `true` when the iframe is 3'rd party.
-   */
-  constructor(baseElement, iframe, opt_is3p) {
-    /** @private @const {!AMP.BaseElement} */
-    this.baseElement_ = baseElement;
-    /** @private @const {!../../../src/service/timer-impl.Timer} */
-    this.timer_ = Services.timerFor(baseElement.win);
-    /** @private {boolean} */
-    this.shouldSendIntersectionChanges_ = false;
-    /** @private {boolean} */
-    this.inViewport_ = false;
-
-    /** @private {!Array<!IntersectionObserverEntry>} */
-    this.pendingChanges_ = [];
-
-    /** @private {number|string} */
-    this.flushTimeout_ = 0;
-
-    /** @private @const {function()} */
-    this.boundFlush_ = this.flush_.bind(this);
-
-    /**
-     * An object which handles tracking subscribers to the
-     * intersection updates for this element.
-     * Triggered by context.observeIntersection(…) inside the ad/iframe
-     * or by directly posting a send-intersections message.
-     * @private {!SubscriptionApi}
-     */
-    this.postMessageApi_ = new SubscriptionApi(
-      iframe,
-      'send-intersections',
-      opt_is3p || false,
-      // Each time someone subscribes we make sure that they
-      // get an update.
-      () => this.startSendingIntersectionChanges_()
-    );
-
-    /** @private {?Function} */
-    this.unlistenViewportChanges_ = null;
-  }
-
-  /**
-   * Fires element intersection
-   */
-  fire() {
-    this.sendElementIntersection_();
-  }
-
-  /**
-   * Check if we need to unlisten when moving out of viewport,
-   * unlisten and reset unlistenViewportChanges_.
-   * @private
-   */
-  unlistenOnOutViewport_() {
-    if (this.unlistenViewportChanges_) {
-      this.unlistenViewportChanges_();
-      this.unlistenViewportChanges_ = null;
-    }
-  }
-  /**
-   * Called via postMessage from the child iframe when the ad/iframe starts
-   * observing its position in the viewport.
-   * Sets a flag, measures the iframe position if necessary and sends
-   * one change record to the iframe.
-   * Note that this method may be called more than once if a single ad
-   * has multiple parties interested in viewability data.
-   * @private
-   */
-  startSendingIntersectionChanges_() {
-    this.shouldSendIntersectionChanges_ = true;
-    this.baseElement_.getVsync().measure(() => {
-      if (this.baseElement_.isInViewport()) {
-        this.onViewportCallback(true);
-      }
-      this.fire();
-    });
-  }
-
-  /**
-   * Triggered by the AmpElement to when it either enters or exits the visible
-   * viewport.
-   * @param {boolean} inViewport true if the element is in viewport.
-   */
-  onViewportCallback(inViewport) {
-    if (this.inViewport_ == inViewport) {
-      return;
-    }
-    this.inViewport_ = inViewport;
-    // Lets the ad know that it became visible or no longer is.
-    this.fire();
-    // And update the ad about its position in the viewport while
-    // it is visible.
-    if (inViewport) {
-      const send = this.fire.bind(this);
-      // Scroll events.
-      const unlistenScroll = this.baseElement_.getViewport().onScroll(send);
-      // Throttled scroll events. Also fires for resize events.
-      const unlistenChanged = this.baseElement_.getViewport().onChanged(send);
-      this.unlistenViewportChanges_ = () => {
-        unlistenScroll();
-        unlistenChanged();
-      };
-    } else {
-      this.unlistenOnOutViewport_();
-    }
-  }
-
-  /**
-   * Sends 'intersection' message to ad/iframe with intersection change records
-   * if this has been activated and we measured the layout box of the iframe
-   * at least once.
-   * @private
-   */
-  sendElementIntersection_() {
-    if (!this.shouldSendIntersectionChanges_) {
-      return;
-    }
-    const change = this.baseElement_.element.getIntersectionChangeEntry();
-    if (
-      this.pendingChanges_.length > 0 &&
-      this.pendingChanges_[this.pendingChanges_.length - 1].time == change.time
-    ) {
-      return;
-    }
-    this.pendingChanges_.push(change);
-    if (!this.flushTimeout_) {
-      // Send one immediately, …
-      this.flush_();
-      // but only send a maximum of 10 postMessages per second.
-      this.flushTimeout_ = this.timer_.delay(this.boundFlush_, 100);
-    }
-  }
-
-  /**
-   * @private
-   */
-  flush_() {
-    this.flushTimeout_ = 0;
-    if (!this.pendingChanges_.length) {
-      return;
-    }
-    // Note that SubscribeApi multicasts the update to all interested windows.
-    this.postMessageApi_.send(
-      'intersection',
-      dict({
-        'changes': this.pendingChanges_,
-      })
-    );
-    this.pendingChanges_.length = 0;
-  }
-
-  /**
-   * Provide a function to clear timeout before set this intersection to null.
-   */
-  destroy() {
-    this.timer_.cancel(this.flushTimeout_);
-    this.unlistenOnOutViewport_();
-    this.postMessageApi_.destroy();
-  }
-}
diff --git a/extensions/amp-ad/0.1/legacy-ad-intersection-observer-host.js b/extensions/amp-ad/0.1/legacy-ad-intersection-observer-host.js
new file mode 100644
index 0000000000000..6ea02df0a4b76
--- /dev/null
+++ b/extensions/amp-ad/0.1/legacy-ad-intersection-observer-host.js
@@ -0,0 +1,242 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {MessageType} from '../../../src/3p-frame-messaging';
+import {Services} from '../../../src/services';
+import {SubscriptionApi} from '../../../src/iframe-helper';
+import {dict} from '../../../src/core/types/object';
+import {intersectionEntryToJson} from '../../../src/utils/intersection';
+
+/**
+ * LegacyAdIntersectionObserverHost exists for backward compatibility to support
+ * the context.observeIntersect API in 3P ad.
+ * Use IntersectionObserver3pHost instead.
+ *
+ * The LegacyAdIntersectionObserverHost class lets a 3P ad share its viewport
+ * intersection data with an iframe of its choice (most likely contained within
+ * the element itself.) in the format of IntersectionObserverEntry.
+ * When instantiated the class will start listening for a
+ * 'send-intersections' postMessage from the iframe, and only then would start
+ * sending intersection data to the iframe. The intersection data would be sent
+ * when the element enters/exits the viewport, as well as on scroll
+ * and resize when the element intersects with the viewport.
+ * The class uses IntersectionObserver to monitor the element's enter/exit of
+ * the viewport. It also exposes a `fire` method to allow AMP to send the
+ * intersection data to the iframe at remeasure.
+ *
+ * Note: The LegacyAdIntersectionObserverHost would not send any data
+ * over to the iframe if it had not requested the intersection data already via
+ * 'send-intersections' postMessage.
+ */
+export class LegacyAdIntersectionObserverHost {
+  /**
+   * @param {!AMP.BaseElement} baseElement
+   * @param {!Element} adIframe Iframe element which requested the
+   *     intersection data.
+   */
+  constructor(baseElement, adIframe) {
+    /** @private @const {!AMP.BaseElement} */
+    this.baseElement_ = baseElement;
+
+    /** @private @const {!../../../src/service/timer-impl.Timer} */
+    this.timer_ = Services.timerFor(baseElement.win);
+
+    /** @private {?IntersectionObserver} */
+    this.intersectionObserver_ = null;
+
+    /** @private {?IntersectionObserver} */
+    this.fireInOb_ = null;
+
+    /** @private {boolean} */
+    this.inViewport_ = false;
+
+    /** @private {!Array<!IntersectionObserverEntry>} */
+    this.pendingChanges_ = [];
+
+    /** @private {number|string} */
+    this.flushTimeout_ = 0;
+
+    /** @private @const {function()} */
+    this.boundFlush_ = this.flush_.bind(this);
+
+    /**
+     * An object which handles tracking subscribers to the
+     * intersection updates for this element.
+     * Triggered by context.observeIntersection(…) inside the ad/iframe
+     * or by directly posting a send-intersections message.
+     * @private {!SubscriptionApi}
+     */
+    this.postMessageApi_ = new SubscriptionApi(
+      adIframe,
+      MessageType.SEND_INTERSECTIONS,
+      true, // is3p
+      // Each time someone subscribes we make sure that they
+      // get an update.
+      () => this.startSendingIntersectionChanges_()
+    );
+
+    /** @private {?Function} */
+    this.unlistenViewportChanges_ = null;
+  }
+
+  /**
+   * Fires element intersection
+   */
+  fire() {
+    if (!this.fireInOb_) {
+      return;
+    }
+    this.fireInOb_.unobserve(this.baseElement_.element);
+    this.fireInOb_.observe(this.baseElement_.element);
+  }
+
+  /**
+   * Check if we need to unlisten when moving out of viewport,
+   * unlisten and reset unlistenViewportChanges_.
+   * @private
+   */
+  unlistenOnOutViewport_() {
+    if (this.unlistenViewportChanges_) {
+      this.unlistenViewportChanges_();
+      this.unlistenViewportChanges_ = null;
+    }
+  }
+  /**
+   * Called via postMessage from the child iframe when the ad/iframe starts
+   * observing its position in the viewport.
+   * Sets a flag, measures the iframe position if necessary and sends
+   * one change record to the iframe.
+   * Note that this method may be called more than once if a single ad
+   * has multiple parties interested in viewability data.
+   * @private
+   */
+  startSendingIntersectionChanges_() {
+    if (!this.intersectionObserver_) {
+      this.intersectionObserver_ = new IntersectionObserver((entries) => {
+        const lastEntry = entries[entries.length - 1];
+        this.onViewportCallback_(lastEntry);
+      });
+      this.intersectionObserver_.observe(this.baseElement_.element);
+    }
+    if (!this.fireInOb_) {
+      this.fireInOb_ = new IntersectionObserver((entries) => {
+        const lastEntry = entries[entries.length - 1];
+        this.sendElementIntersection_(lastEntry);
+      });
+    }
+    this.fire();
+  }
+
+  /**
+   * Triggered when the ad either enters or exits the visible viewport.
+   * @param {!IntersectionObserverEntry} entry handed over by the IntersectionObserver.
+   */
+  onViewportCallback_(entry) {
+    const inViewport = entry.intersectionRatio != 0;
+    if (this.inViewport_ == inViewport) {
+      return;
+    }
+    this.inViewport_ = inViewport;
+
+    // Lets the ad know that it became visible or no longer is.
+    this.sendElementIntersection_(entry);
+
+    // And update the ad about its position in the viewport while
+    // it is visible.
+    if (inViewport) {
+      const send = this.fire.bind(this);
+      // Scroll events.
+      const unlistenScroll = this.baseElement_.getViewport().onScroll(send);
+      // Throttled scroll events. Also fires for resize events.
+      const unlistenChanged = this.baseElement_.getViewport().onChanged(send);
+      this.unlistenViewportChanges_ = () => {
+        unlistenScroll();
+        unlistenChanged();
+      };
+    } else {
+      this.unlistenOnOutViewport_();
+    }
+  }
+
+  /**
+   * Sends 'intersection' message to ad/iframe with intersection change records
+   * if this has been activated and we measured the layout box of the iframe
+   * at least once.
+   * @param {!IntersectionObserverEntry} entry - handed over by the IntersectionObserver.
+   * @private
+   */
+  sendElementIntersection_(entry) {
+    const change = intersectionEntryToJson(entry);
+    // rootBounds is always null in 3p iframe (e.g. Viewer).
+    // See https://github.com/w3c/IntersectionObserver/issues/79
+    //
+    // Since before using a real InOb we used to provide rootBounds,
+    // we are temporarily continuing to do so now.
+    // TODO: determine if consumers rely on this functionality and remove if not.
+    if (change.rootBounds === null) {
+      change.rootBounds = this.baseElement_.getViewport().getRect();
+    }
+
+    if (
+      this.pendingChanges_.length > 0 &&
+      this.pendingChanges_[this.pendingChanges_.length - 1].time == change.time
+    ) {
+      return;
+    }
+    this.pendingChanges_.push(change);
+    if (!this.flushTimeout_) {
+      // Send one immediately, …
+      this.flush_();
+      // but only send a maximum of 10 postMessages per second.
+      this.flushTimeout_ = this.timer_.delay(this.boundFlush_, 100);
+    }
+  }
+
+  /**
+   * @private
+   */
+  flush_() {
+    this.flushTimeout_ = 0;
+    if (!this.pendingChanges_.length) {
+      return;
+    }
+    // Note that SubscribeApi multicasts the update to all interested windows.
+    this.postMessageApi_.send(
+      MessageType.INTERSECTION,
+      dict({
+        'changes': this.pendingChanges_,
+      })
+    );
+    this.pendingChanges_.length = 0;
+  }
+
+  /**
+   * Provide a function to clear timeout before set this intersection to null.
+   */
+  destroy() {
+    if (this.intersectionObserver_) {
+      this.intersectionObserver_.disconnect();
+      this.intersectionObserver_ = null;
+    }
+    if (this.fireInOb_) {
+      this.fireInOb_.disconnect();
+      this.fireInOb_ = null;
+    }
+    this.timer_.cancel(this.flushTimeout_);
+    this.unlistenOnOutViewport_();
+    this.postMessageApi_.destroy();
+  }
+}
diff --git a/extensions/amp-ad/0.1/test/test-amp-ad-3p-impl.js b/extensions/amp-ad/0.1/test/test-amp-ad-3p-impl.js
index 20287b2b1f920..ff0141d29ef7c 100644
--- a/extensions/amp-ad/0.1/test/test-amp-ad-3p-impl.js
+++ b/extensions/amp-ad/0.1/test/test-amp-ad-3p-impl.js
@@ -18,15 +18,15 @@ import '../../../amp-ad/0.1/amp-ad';
 import '../../../amp-sticky-ad/1.0/amp-sticky-ad';
 import * as adCid from '../../../../src/ad-cid';
 import * as consent from '../../../../src/consent';
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {AmpAd3PImpl} from '../amp-ad-3p-impl';
-import {CONSENT_POLICY_STATE} from '../../../../src/consent-state';
+import {AmpAdUIHandler} from '../amp-ad-ui';
+import {CONSENT_POLICY_STATE} from '../../../../src/core/constants/consent-state';
 import {LayoutPriority} from '../../../../src/layout';
 import {Services} from '../../../../src/services';
 import {adConfig} from '../../../../ads/_config';
 import {createElementWithAttributes} from '../../../../src/dom';
 import {macroTask} from '../../../../testing/yield';
-import {user} from '../../../../src/log';
 
 function createAmpAd(win, attachToAmpdoc = false, ampdoc) {
   const ampAdElement = createElementWithAttributes(win.document, 'amp-ad', {
@@ -46,7 +46,11 @@ function createAmpAd(win, attachToAmpdoc = false, ampdoc) {
     return true;
   };
 
-  return new AmpAd3PImpl(ampAdElement);
+  const impl = new AmpAd3PImpl(ampAdElement);
+  // Initialize internal implementation structure since `isBuilt` is forced
+  // to return `true` above.
+  ampAdElement.impl_ = impl;
+  return impl;
 }
 
 describes.realWin(
@@ -64,6 +68,10 @@ describes.realWin(
     let registryBackup;
     const whenFirstVisible = Promise.resolve();
 
+    function mockMode(mode) {
+      env.sandbox.stub(win.parent, '__AMP_MODE').value(mode);
+    }
+
     beforeEach(() => {
       registryBackup = Object.create(null);
       Object.keys(adConfig).forEach((k) => {
@@ -146,7 +154,7 @@ describes.realWin(
         });
       });
 
-      it('should propagate consent state to ad iframe', () => {
+      it('should propagate consent values to ad iframe', () => {
         ad3p.element.setAttribute('data-block-on-consent', '');
         env.sandbox
           .stub(consent, 'getConsentPolicyState')
@@ -154,6 +162,9 @@ describes.realWin(
         env.sandbox
           .stub(consent, 'getConsentPolicySharedData')
           .resolves({a: 1, b: 2});
+        env.sandbox
+          .stub(consent, 'getConsentMetadata')
+          .resolves({consentStringType: 2, gdprApplies: true});
 
         return ad3p.layoutCallback().then(() => {
           const frame = ad3p.element.querySelector('iframe[src]');
@@ -165,6 +176,10 @@ describes.realWin(
             CONSENT_POLICY_STATE.SUFFICIENT
           );
           expect(data._context.consentSharedData).to.deep.equal({a: 1, b: 2});
+          expect(data._context.initialConsentMetadata).to.deep.equal({
+            consentStringType: 2,
+            gdprApplies: true,
+          });
         });
       });
 
@@ -192,6 +207,7 @@ describes.realWin(
         adContainerElement.style.position = 'fixed';
         win.document.body.appendChild(adContainerElement);
         const ad3p = createAmpAd(win);
+        ad3p.uiHandler = new AmpAdUIHandler(ad3p);
         adContainerElement.appendChild(ad3p.element);
 
         ad3p.onLayoutMeasure();
@@ -243,24 +259,6 @@ describes.realWin(
           ).to.be.ok;
         });
       });
-
-      it('should use default path if custom disabled', () => {
-        const meta = win.document.createElement('meta');
-        meta.setAttribute('name', 'amp-3p-iframe-src');
-        meta.setAttribute('content', 'https://src.test/boot/remote.html');
-        win.document.head.appendChild(meta);
-        ad3p.config.remoteHTMLDisabled = true;
-        ad3p.onLayoutMeasure();
-        env.sandbox.stub(user(), 'error');
-        return ad3p.layoutCallback().then(() => {
-          expect(
-            win.document.querySelector(
-              'iframe[src="' +
-                'http://ads.localhost:9876/dist.3p/current/frame.max.html"]'
-            )
-          ).to.be.ok;
-        });
-      });
     });
 
     describe('pause/resume', () => {
@@ -278,64 +276,51 @@ describes.realWin(
         });
       });
 
-      describe('after layout', () => {
-        let xOriginIframeHandler;
-
-        beforeEach(() => {
-          return ad3p.layoutCallback().then(() => {
-            xOriginIframeHandler = ad3p.xOriginIframeHandler_;
-          });
-        });
-
-        it('should require unlayout if iframe is not pausable', () => {
-          env.sandbox
-            ./*OK*/ stub(xOriginIframeHandler, 'isPausable')
-            .returns(false);
-          expect(ad3p.unlayoutOnPause()).to.be.true;
-        });
-
-        it('should NOT require unlayout if iframe is pausable', () => {
-          window.sandbox
-            ./*OK*/ stub(xOriginIframeHandler, 'isPausable')
-            .returns(true);
-          expect(ad3p.unlayoutOnPause()).to.be.false;
+      describe('during layout', () => {
+        it('sticky ad: should not layout w/o scroll', () => {
+          ad3p.uiHandler.stickyAdPosition_ = 'bottom';
+          expect(ad3p.xOriginIframeHandler_).to.be.null;
+          const layoutPromise = ad3p.layoutCallback();
+          return Promise.race([macroTask(), layoutPromise])
+            .then(() => {
+              expect(ad3p.xOriginIframeHandler_).to.be.null;
+            })
+            .then(() => {
+              Services.viewportForDoc(env.ampdoc).scrollObservable_.fire();
+              return layoutPromise;
+            })
+            .then(() => {
+              expect(ad3p.xOriginIframeHandler_).to.not.be.null;
+            });
         });
+      });
 
-        it('should pause iframe', () => {
-          const stub = window.sandbox./*OK*/ stub(
-            xOriginIframeHandler,
-            'setPaused'
-          );
-          ad3p.pauseCallback();
-          expect(stub).to.be.calledOnce.calledWith(true);
+      describe('after layout', () => {
+        beforeEach(async () => {
+          await ad3p.layoutCallback();
         });
 
-        it('should resume iframe', () => {
-          const stub = window.sandbox./*OK*/ stub(
-            xOriginIframeHandler,
-            'setPaused'
-          );
-          ad3p.resumeCallback();
-          expect(stub).to.be.calledOnce.calledWith(false);
+        it('should require unlayout', () => {
+          expect(ad3p.unlayoutOnPause()).to.be.true;
         });
       });
     });
 
     describe('preconnectCallback', () => {
       it('should add preconnect and prefetch to DOM header', () => {
+        mockMode({});
         ad3p.buildCallback();
         ad3p.preconnectCallback();
         return whenFirstVisible.then(() => {
           const fetches = win.document.querySelectorAll('link[rel=preload]');
           expect(fetches).to.have.length(2);
-          expect(
-            Array.from(fetches)
-              .map((link) => link.href)
-              .sort()
-          ).to.jsonEqual([
-            'http://ads.localhost:9876/dist.3p/current/frame.max.html',
-            'http://ads.localhost:9876/dist.3p/current/integration.js',
-          ]);
+          expect(fetches[0].href).to.match(
+            /^https:\/\/d-\d+\.ampproject\.net\/\$internalRuntimeVersion\$\/frame\.html$/
+          );
+          expect(fetches[1]).to.have.property(
+            'href',
+            'https://3p.ampproject.net/$internalRuntimeVersion$/f.js'
+          );
 
           const preconnects = win.document.querySelectorAll(
             'link[rel=preconnect]'
@@ -363,27 +348,6 @@ describes.realWin(
           ).to.be.true;
         });
       });
-
-      it('should not use remote html path for preload if disabled', () => {
-        const meta = win.document.createElement('meta');
-        meta.setAttribute('name', 'amp-3p-iframe-src');
-        meta.setAttribute('content', 'https://src.test/boot/remote.html');
-        win.document.head.appendChild(meta);
-        ad3p.config.remoteHTMLDisabled = true;
-        ad3p.buildCallback();
-        allowConsoleError(() => {
-          ad3p.preconnectCallback();
-        });
-        return whenFirstVisible.then(() => {
-          expect(
-            Array.from(win.document.querySelectorAll('link[rel=preload]')).some(
-              (link) =>
-                link.href ==
-                'http://ads.localhost:9876/dist.3p/current/frame.max.html'
-            )
-          ).to.be.true;
-        });
-      });
     });
 
     // TODO: add test for noContentHandler_()
@@ -405,9 +369,9 @@ describes.realWin(
         }
       );
 
-      it('should only allow rendering one ad per second', function* () {
-        const clock = lolex.install({
-          target: win,
+      it('should only allow rendering one ad per second', async () => {
+        ad3p.getVsync().runScheduledTasks_();
+        const clock = fakeTimers.withGlobal(win).install({
           toFake: ['Date', 'setTimeout', 'clearTimeout'],
         });
         const ad3p2 = createAmpAd(win);
@@ -420,10 +384,12 @@ describes.realWin(
 
         // Ad loading should only block 1s.
         clock.tick(999);
-        yield macroTask();
+        await macroTask();
         expect(ad3p2.renderOutsideViewport()).to.equal(false);
         clock.tick(2);
-        yield oneSecPromise;
+        await oneSecPromise;
+        clock.tick(2);
+        await macroTask();
         expect(ad3p2.renderOutsideViewport()).to.equal(3);
       });
 
@@ -670,7 +636,7 @@ describes.realWin(
   }
 );
 
-describe('#getLayoutPriority', () => {
+describes.sandboxed('#getLayoutPriority', {}, () => {
   describes.realWin(
     'with shadow AmpDoc',
     {
diff --git a/extensions/amp-ad/0.1/test/test-amp-ad-custom.js b/extensions/amp-ad/0.1/test/test-amp-ad-custom.js
index 876a72fca172a..67c6fe34869ef 100644
--- a/extensions/amp-ad/0.1/test/test-amp-ad-custom.js
+++ b/extensions/amp-ad/0.1/test/test-amp-ad-custom.js
@@ -188,8 +188,8 @@ describes.realWin('Amp custom ad', {amp: true}, (env) => {
   });
 });
 
-// TODO(wg-ads, #25726): This test fails when run by itself.
-describe.skip('#getLayoutPriority', () => {
+// TODO(wg-monetization, #25726): This test fails when run by itself.
+describes.sandboxed.skip('#getLayoutPriority', {}, () => {
   const url = '/examples/custom.ad.example.json';
   const slot = 'myslot';
 
diff --git a/extensions/amp-ad/0.1/test/test-amp-ad-ui.js b/extensions/amp-ad/0.1/test/test-amp-ad-ui.js
index f18ad7980e344..2bf13c45f10d8 100644
--- a/extensions/amp-ad/0.1/test/test-amp-ad-ui.js
+++ b/extensions/amp-ad/0.1/test/test-amp-ad-ui.js
@@ -245,6 +245,7 @@ describes.realWin(
             height: '50px',
           });
           env.win.document.body.appendChild(adElement);
+          env.sandbox.stub(uiHandler, 'setSize_');
           env.sandbox
             .stub(adImpl, 'attemptChangeSize')
             .callsFake((height, width) => {
@@ -262,6 +263,7 @@ describes.realWin(
         });
 
         it('should tolerate string input', () => {
+          env.sandbox.stub(uiHandler, 'setSize_');
           env.sandbox
             .stub(adImpl, 'attemptChangeSize')
             .callsFake((height, width) => {
@@ -321,5 +323,20 @@ describes.realWin(
         });
       });
     });
+
+    describe('sticky ads', () => {
+      it('should render close buttons on render once', () => {
+        expect(uiHandler.unlisteners_).to.be.empty;
+        uiHandler.stickyAdPosition_ = 'bottom';
+        uiHandler.onResizeSuccess();
+        expect(uiHandler.closeButtonRendered_).to.be.true;
+        expect(uiHandler.unlisteners_.length).to.equal(1);
+        expect(uiHandler.element_.querySelector('.amp-ad-close-button')).to.be
+          .not.null;
+
+        uiHandler.onResizeSuccess();
+        expect(uiHandler.unlisteners_.length).to.equal(1);
+      });
+    });
   }
 );
diff --git a/extensions/amp-ad/0.1/test/test-amp-ad-xorigin-iframe-handler.js b/extensions/amp-ad/0.1/test/test-amp-ad-xorigin-iframe-handler.js
index edbb84e05b06d..a2f50899b891c 100644
--- a/extensions/amp-ad/0.1/test/test-amp-ad-xorigin-iframe-handler.js
+++ b/extensions/amp-ad/0.1/test/test-amp-ad-xorigin-iframe-handler.js
@@ -18,15 +18,15 @@ import {AmpAdUIHandler} from '../amp-ad-ui';
 import {AmpAdXOriginIframeHandler} from '../amp-ad-xorigin-iframe-handler';
 import {BaseElement} from '../../../../src/base-element';
 import {Services} from '../../../../src/services';
-import {Signals} from '../../../../src/utils/signals';
+import {Signals} from '../../../../src/core/data-structures/signals';
 import {
   createIframeWithMessageStub,
   expectPostMessage,
 } from '../../../../testing/iframe';
-import {layoutRectLtwh} from '../../../../src/layout-rect';
+import {layoutRectLtwh} from '../../../../src/core/math/layout-rect';
 import {toggleExperiment} from '../../../../src/experiments';
 
-describe('amp-ad-xorigin-iframe-handler', () => {
+describes.sandboxed('amp-ad-xorigin-iframe-handler', {}, (env) => {
   let ampdoc;
   let adImpl;
   let signals;
@@ -47,7 +47,7 @@ describe('amp-ad-xorigin-iframe-handler', () => {
     };
     signals = new Signals();
     adElement.signals = () => signals;
-    renderStartedSpy = window.sandbox.spy();
+    renderStartedSpy = env.sandbox.spy();
     adElement.renderStarted = () => {
       renderStartedSpy();
       signals.signal('render-start');
@@ -61,6 +61,7 @@ describe('amp-ad-xorigin-iframe-handler', () => {
     };
     document.body.appendChild(adElement);
     adImpl.uiHandler = new AmpAdUIHandler(adImpl);
+    adImpl.uiHandler.onResizeSuccess = env.sandbox.spy();
     iframeHandler = new AmpAdXOriginIframeHandler(adImpl);
     testIndex++;
 
@@ -81,14 +82,14 @@ describe('amp-ad-xorigin-iframe-handler', () => {
 
       beforeEach(() => {
         adImpl.config = {renderStartImplemented: true};
-        window.sandbox.stub(adImpl.uiHandler, 'updateSize').callsFake(() => {
+        env.sandbox.stub(adImpl.uiHandler, 'updateSize').callsFake(() => {
           return Promise.resolve({
             success: true,
             newWidth: 114,
             newHeight: 217,
           });
         });
-        noContentSpy = window.sandbox./*OK*/ spy(
+        noContentSpy = env.sandbox./*OK*/ spy(
           iframeHandler,
           'freeXOriginIframe'
         );
@@ -142,9 +143,8 @@ describe('amp-ad-xorigin-iframe-handler', () => {
           type: 'render-start',
           sentinel: 'amp3ptest' + testIndex,
         });
-        const expectResponsePromise = iframe.expectMessageFromParent(
-          'embed-size-changed'
-        );
+        const expectResponsePromise =
+          iframe.expectMessageFromParent('embed-size-changed');
         const renderStartPromise = signals.whenSignal('render-start');
         return Promise.all([renderStartPromise, initPromise])
           .then(() => {
@@ -203,7 +203,7 @@ describe('amp-ad-xorigin-iframe-handler', () => {
           sentinel: 'amp3ptest' + testIndex,
           type: 'bootstrap-loaded',
         }).then(() => {
-          const clock = window.sandbox.useFakeTimers();
+          const clock = env.sandbox.useFakeTimers();
           clock.tick(0);
           const timeoutPromise = Services.timerFor(window).timeoutPromise(
             2000,
@@ -235,7 +235,7 @@ describe('amp-ad-xorigin-iframe-handler', () => {
       it('should be able to use user-error API', () => {
         const err = new Error();
         err.message = 'error test';
-        const userErrorReportSpy = window.sandbox./*OK*/ spy(
+        const userErrorReportSpy = env.sandbox.stub(
           iframeHandler,
           'userErrorForAnalytics_'
         );
@@ -268,7 +268,7 @@ describe('amp-ad-xorigin-iframe-handler', () => {
     );
 
     it('should trigger visibility on timeout', () => {
-      const clock = window.sandbox.useFakeTimers();
+      const clock = env.sandbox.useFakeTimers();
       iframe.name = 'test_master';
       initPromise = iframeHandler.init(iframe);
       return new Promise((resolve) => {
@@ -300,7 +300,7 @@ describe('amp-ad-xorigin-iframe-handler', () => {
     });
 
     it('should be able to use embed-state API', () => {
-      window.sandbox./*OK*/ stub(ampdoc, 'isVisible').returns(true);
+      env.sandbox./*OK*/ stub(ampdoc, 'isVisible').returns(true);
       iframe.postMessageToParent({
         type: 'send-embed-state',
         sentinel: 'amp3ptest' + testIndex,
@@ -316,7 +316,7 @@ describe('amp-ad-xorigin-iframe-handler', () => {
     });
 
     it('should be able to use embed-size API, change size deny', () => {
-      window.sandbox.stub(adImpl.uiHandler, 'updateSize').callsFake(() => {
+      env.sandbox.stub(adImpl.uiHandler, 'updateSize').callsFake(() => {
         return Promise.resolve({
           success: false,
           newWidth: 114,
@@ -342,7 +342,7 @@ describe('amp-ad-xorigin-iframe-handler', () => {
     });
 
     it('should be able to use embed-size API, change size succeed', () => {
-      window.sandbox.stub(adImpl.uiHandler, 'updateSize').callsFake(() => {
+      env.sandbox.stub(adImpl.uiHandler, 'updateSize').callsFake(() => {
         return Promise.resolve({
           success: true,
           newWidth: 114,
@@ -364,11 +364,12 @@ describe('amp-ad-xorigin-iframe-handler', () => {
             type: 'embed-size-changed',
             sentinel: 'amp3ptest' + testIndex,
           });
+          expect(adImpl.uiHandler.onResizeSuccess).to.be.called;
         });
     });
 
     it('should be able to use embed-size API to resize height only', () => {
-      window.sandbox.stub(adImpl.uiHandler, 'updateSize').callsFake(() => {
+      env.sandbox.stub(adImpl.uiHandler, 'updateSize').callsFake(() => {
         return Promise.resolve({
           success: true,
           newWidth: undefined,
@@ -389,6 +390,7 @@ describe('amp-ad-xorigin-iframe-handler', () => {
             type: 'embed-size-changed',
             sentinel: 'amp3ptest' + testIndex,
           });
+          expect(adImpl.uiHandler.onResizeSuccess).to.be.called;
         });
     });
 
@@ -399,12 +401,12 @@ describe('amp-ad-xorigin-iframe-handler', () => {
       iframe.setAttribute('data-amp-3p-sentinel', 'amp3ptest' + testIndex);
       iframe.name = 'test_nomaster';
       iframeHandler.init(iframe);
-      window.sandbox
+      env.sandbox
         ./*OK*/ stub(iframeHandler.viewport_, 'getClientRectAsync')
         .callsFake(() => {
           return Promise.resolve(layoutRectLtwh(1, 1, 1, 1));
         });
-      window.sandbox
+      env.sandbox
         ./*OK*/ stub(iframeHandler.viewport_, 'getRect')
         .callsFake(() => {
           return layoutRectLtwh(1, 1, 1, 1);
@@ -443,51 +445,5 @@ describe('amp-ad-xorigin-iframe-handler', () => {
           });
         });
     });
-
-    it('should be not pausable w/o experiment', () => {
-      expect(iframeHandler.iframe).to.equal(iframe);
-      expect(iframe.getAttribute('allow') || '').to.not.have.string(
-        'execution-while-not-rendered'
-      );
-      expect(iframeHandler.isPausable()).to.be.false;
-      iframeHandler.setPaused(true);
-      expect(iframe).to.not.have.attribute('hidden');
-    });
-  });
-
-  describe('Initialized iframe with pausable-iframe', () => {
-    beforeEach(() => {
-      toggleExperiment(window, 'pausable-iframe', true);
-      iframeHandler.init(iframe);
-    });
-
-    afterEach(() => {
-      toggleExperiment(window, 'pausable-iframe', false);
-    });
-
-    it('should be configured pausable w/experiment', () => {
-      expect(iframe.getAttribute('allow') || '').to.have.string(
-        "execution-while-not-rendered 'none'"
-      );
-    });
-
-    it('should introspect as pausable w/experiment when supported', () => {
-      // Even if configured, the pausability still depends on whether the
-      // platform supports the relevant feature policies.
-      if (
-        iframe.featurePolicy &&
-        iframe.featurePolicy.features().includes('execution-while-not-rendered')
-      ) {
-        expect(iframeHandler.isPausable()).to.be.true;
-      }
-    });
-
-    it('should be hidden on pause', () => {
-      expect(iframe).to.not.have.attribute('hidden');
-      iframeHandler.setPaused(true);
-      expect(iframe).to.have.attribute('hidden');
-      iframeHandler.setPaused(false);
-      expect(iframe).to.not.have.attribute('hidden');
-    });
   });
 });
diff --git a/extensions/amp-ad/0.1/test/test-amp-ad.js b/extensions/amp-ad/0.1/test/test-amp-ad.js
index 0dff21c1f81aa..386822821389e 100644
--- a/extensions/amp-ad/0.1/test/test-amp-ad.js
+++ b/extensions/amp-ad/0.1/test/test-amp-ad.js
@@ -63,7 +63,7 @@ describes.realWin('Ad loader', {amp: true}, (env) => {
 
       beforeEach(() => {
         const getUserNotificationStub = stubService(
-          window.sandbox,
+          env.sandbox,
           win,
           'userNotificationManager',
           'get'
@@ -208,35 +208,6 @@ describes.realWin('Ad loader', {amp: true}, (env) => {
         });
       });
 
-      it('uses Fast Fetch if remote.html is used but disabled', () => {
-        const meta = doc.createElement('meta');
-        meta.setAttribute('name', 'amp-3p-iframe-src');
-        meta.setAttribute('content', 'https://example.test/remote.html');
-        doc.head.appendChild(meta);
-        adConfig['zort'] = {remoteHTMLDisabled: true};
-        a4aRegistry['zort'] = function () {
-          return true;
-        };
-        ampAdElement.setAttribute('type', 'zort');
-        const zortInstance = {};
-        const zortConstructor = function () {
-          return zortInstance;
-        };
-        const extensions = Services.extensionsFor(win);
-        const extensionsStub = env.sandbox
-          .stub(extensions, 'loadElementClass')
-          .withArgs('amp-ad-network-zort-impl')
-          .returns(Promise.resolve(zortConstructor));
-        ampAd = new AmpAd(ampAdElement);
-        return ampAd.upgradeCallback().then((baseElement) => {
-          expect(extensionsStub).to.be.called;
-          expect(ampAdElement.getAttribute('data-a4a-upgrade-type')).to.equal(
-            'amp-ad-network-zort-impl'
-          );
-          expect(baseElement).to.equal(zortInstance);
-        });
-      });
-
       it('upgrades to registered, A4A type network-specific element', () => {
         a4aRegistry['zort'] = function () {
           return true;
@@ -277,6 +248,8 @@ describes.realWin('Ad loader', {amp: true}, (env) => {
             const extensions = Services.extensionsFor(win);
             extensions.registerExtension(
               'amp-ad-network-zort-impl',
+              '0.1',
+              true,
               () => {
                 extensions.addElement(
                   'amp-ad-network-zort-impl',
diff --git a/extensions/amp-ad/0.1/test/test-concurrent-load.js b/extensions/amp-ad/0.1/test/test-concurrent-load.js
index d7bf9abbdc41c..5b19c2b92002e 100644
--- a/extensions/amp-ad/0.1/test/test-concurrent-load.js
+++ b/extensions/amp-ad/0.1/test/test-concurrent-load.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {createElementWithAttributes} from '../../../../src/dom';
 import {
   getAmpAdRenderOutsideViewport,
@@ -78,8 +78,7 @@ describes.realWin('concurrent-load', {}, (env) => {
 
     beforeEach(() => {
       win = env.win;
-      clock = lolex.install({
-        target: win,
+      clock = fakeTimers.withGlobal(win).install({
         toFake: ['Date', 'setTimeout', 'clearTimeout'],
       });
       installTimerService(win);
diff --git a/extensions/amp-ad/0.1/test/test-intersection-observer-host.js b/extensions/amp-ad/0.1/test/test-intersection-observer-host.js
deleted file mode 100644
index be046eef9ae88..0000000000000
--- a/extensions/amp-ad/0.1/test/test-intersection-observer-host.js
+++ /dev/null
@@ -1,538 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {BaseElement} from '../../../../src/base-element';
-import {
-  IntersectionObserverHostForAd,
-  getIntersectionChangeEntry,
-} from '../intersection-observer-host';
-import {createAmpElementForTesting} from '../../../../src/custom-element';
-import {layoutRectLtwh} from '../../../../src/layout-rect';
-
-describes.sandboxed('getIntersectionChangeEntry', {}, () => {
-  beforeEach(() => {
-    window.sandbox.useFakeTimers();
-  });
-
-  it('intersect correctly base', () => {
-    const rootBounds = layoutRectLtwh(0, 100, 100, 100);
-    const layoutBox = layoutRectLtwh(50, 50, 150, 200);
-    const change = getIntersectionChangeEntry(layoutBox, null, rootBounds);
-
-    expect(change).to.be.an('object');
-    expect(change.time).to.equal(Date.now());
-
-    expect(change.rootBounds).to.deep.equal({
-      'left': 0,
-      'top': 0,
-      'width': 100,
-      'height': 100,
-      'bottom': 100,
-      'right': 100,
-      'x': 0,
-      'y': 0,
-    });
-    expect(change.boundingClientRect).to.deep.equal({
-      'left': 50,
-      'top': -50,
-      'width': 150,
-      'height': 200,
-      'bottom': 150,
-      'right': 200,
-      'x': 50,
-      'y': -50,
-    });
-    expect(change.intersectionRect).to.deep.equal({
-      'left': 50,
-      'top': 0,
-      'width': 50,
-      'height': 100,
-      'bottom': 100,
-      'right': 100,
-      'x': 50,
-      'y': 0,
-    });
-    expect(change.intersectionRatio).to.be.closeTo(0.1666666, 0.0001);
-  });
-
-  it('intersects on the edge', () => {
-    const rootBounds = layoutRectLtwh(0, 100, 100, 100);
-    const layoutBox = layoutRectLtwh(50, 200, 150, 200);
-    const change = getIntersectionChangeEntry(layoutBox, null, rootBounds);
-
-    expect(change).to.be.an('object');
-    expect(change.time).to.equal(Date.now());
-
-    expect(change.rootBounds).to.deep.equal({
-      'left': 0,
-      'top': 0,
-      'width': 100,
-      'height': 100,
-      'bottom': 100,
-      'right': 100,
-      'x': 0,
-      'y': 0,
-    });
-    expect(change.boundingClientRect).to.deep.equal({
-      'left': 50,
-      'top': 100,
-      'width': 150,
-      'height': 200,
-      'bottom': 300,
-      'right': 200,
-      'x': 50,
-      'y': 100,
-    });
-    expect(change.intersectionRect).to.deep.equal({
-      'left': 50,
-      'top': 100,
-      'width': 50,
-      'height': 0,
-      'bottom': 100,
-      'right': 100,
-      'x': 50,
-      'y': 100,
-    });
-    expect(change.intersectionRatio).to.equal(0);
-  });
-
-  it('intersect correctly 2', () => {
-    const rootBounds = layoutRectLtwh(0, 100, 100, 100);
-    const layoutBox = layoutRectLtwh(50, 199, 150, 200);
-    const change = getIntersectionChangeEntry(layoutBox, null, rootBounds);
-
-    expect(change.intersectionRect).to.deep.equal({
-      'left': 50,
-      'top': 99,
-      'width': 50,
-      'height': 1,
-      'bottom': 100,
-      'right': 100,
-      'x': 50,
-      'y': 99,
-    });
-  });
-
-  it('intersect correctly 3', () => {
-    const rootBounds = layoutRectLtwh(198, 299, 100, 100);
-    const layoutBox = layoutRectLtwh(50, 100, 150, 200);
-    const change = getIntersectionChangeEntry(layoutBox, null, rootBounds);
-
-    expect(change.intersectionRect.height).to.equal(1);
-    expect(change.intersectionRect.width).to.equal(2);
-  });
-
-  it('intersect correctly 3', () => {
-    const rootBounds = layoutRectLtwh(202, 299, 100, 100);
-    const layoutBox = layoutRectLtwh(50, 100, 150, 200);
-    const change = getIntersectionChangeEntry(layoutBox, null, rootBounds);
-
-    expect(change.intersectionRect.height).to.equal(0);
-    expect(change.intersectionRect.width).to.equal(0);
-  });
-
-  it('intersects with an owner element', () => {
-    const rootBounds = layoutRectLtwh(0, 100, 100, 100);
-    const ownerBounds = layoutRectLtwh(40, 110, 20, 20);
-    const layoutBox = layoutRectLtwh(50, 50, 150, 200);
-    const change = getIntersectionChangeEntry(
-      layoutBox,
-      ownerBounds,
-      rootBounds
-    );
-
-    expect(change).to.be.an('object');
-    expect(change.time).to.equal(Date.now());
-
-    expect(change.rootBounds).to.deep.equal({
-      'left': 0,
-      'top': 0,
-      'width': 100,
-      'height': 100,
-      'bottom': 100,
-      'right': 100,
-      'x': 0,
-      'y': 0,
-    });
-    expect(change.boundingClientRect).to.deep.equal({
-      'left': 50,
-      'top': -50,
-      'width': 150,
-      'height': 200,
-      'bottom': 150,
-      'right': 200,
-      'x': 50,
-      'y': -50,
-    });
-    expect(change.intersectionRect).to.deep.equal({
-      'left': 50,
-      'top': 10,
-      'width': 10,
-      'height': 20,
-      'bottom': 30,
-      'right': 60,
-      'x': 50,
-      'y': 10,
-    });
-    expect(change.intersectionRatio).to.be.closeTo(0.0066666, 0.0001);
-  });
-
-  it('does not intersect with an elements out of viewport', () => {
-    const rootBounds = layoutRectLtwh(0, 100, 100, 100);
-    const ownerBounds = layoutRectLtwh(0, 200, 100, 100);
-    const layoutBox = layoutRectLtwh(50, 225, 100, 100);
-    const change = getIntersectionChangeEntry(
-      layoutBox,
-      ownerBounds,
-      rootBounds
-    );
-
-    expect(change).to.be.an('object');
-    expect(change.time).to.equal(Date.now());
-
-    expect(change.rootBounds).to.deep.equal({
-      'left': 0,
-      'top': 0,
-      'width': 100,
-      'height': 100,
-      'bottom': 100,
-      'right': 100,
-      'x': 0,
-      'y': 0,
-    });
-    expect(change.boundingClientRect).to.deep.equal({
-      'left': 50,
-      'top': 125,
-      'width': 100,
-      'height': 100,
-      'bottom': 225,
-      'right': 150,
-      'x': 50,
-      'y': 125,
-    });
-    expect(change.intersectionRect).to.deep.equal({
-      'left': 0,
-      'top': 0,
-      'width': 0,
-      'height': 0,
-      'bottom': 0,
-      'right': 0,
-      'x': 0,
-      'y': 0,
-    });
-    expect(change.intersectionRatio).to.equal(0);
-  });
-
-  it('does not intersect with an element out of viewport', () => {
-    const rootBounds = layoutRectLtwh(0, 100, 100, 100);
-    const ownerBounds = layoutRectLtwh(0, 100, 100, 100);
-    const layoutBox = layoutRectLtwh(50, 225, 100, 100);
-    const change = getIntersectionChangeEntry(
-      layoutBox,
-      ownerBounds,
-      rootBounds
-    );
-
-    expect(change).to.be.an('object');
-    expect(change.time).to.equal(Date.now());
-
-    expect(change.rootBounds).to.deep.equal({
-      'left': 0,
-      'top': 0,
-      'width': 100,
-      'height': 100,
-      'bottom': 100,
-      'right': 100,
-      'x': 0,
-      'y': 0,
-    });
-    expect(change.boundingClientRect).to.deep.equal({
-      'left': 50,
-      'top': 125,
-      'width': 100,
-      'height': 100,
-      'bottom': 225,
-      'right': 150,
-      'x': 50,
-      'y': 125,
-    });
-    expect(change.intersectionRect).to.deep.equal({
-      'left': 0,
-      'top': 0,
-      'width': 0,
-      'height': 0,
-      'bottom': 0,
-      'right': 0,
-      'x': 0,
-      'y': 0,
-    });
-    expect(change.intersectionRatio).to.equal(0);
-  });
-});
-
-describes.sandboxed('IntersectionObserverHostForAd', {}, () => {
-  let testElementCreatedCallback;
-  let testElementPreconnectCallback;
-  let testElementFirstAttachedCallback;
-  let testElementBuildCallback;
-  let testElementLayoutCallback;
-  let testElementFirstLayoutCompleted;
-  let testElementViewportCallback;
-
-  class TestElement extends BaseElement {
-    isLayoutSupported(unusedLayout) {
-      return true;
-    }
-    createdCallback() {
-      testElementCreatedCallback();
-    }
-    preconnectCallback(onLayout) {
-      testElementPreconnectCallback(onLayout);
-    }
-    firstAttachedCallback() {
-      testElementFirstAttachedCallback();
-    }
-    buildCallback() {
-      testElementBuildCallback();
-    }
-    layoutCallback() {
-      testElementLayoutCallback();
-      return Promise.resolve();
-    }
-    firstLayoutCompleted() {
-      testElementFirstLayoutCompleted();
-    }
-    viewportCallback(inViewport) {
-      testElementViewportCallback(inViewport);
-    }
-    getIntersectionElementLayoutBox() {
-      testElementGetInsersectionElementLayoutBox();
-      return {top: 10, left: 10, width: 11, height: 1};
-    }
-  }
-
-  const ElementClass = createAmpElementForTesting(window, TestElement);
-  customElements.define('amp-int', ElementClass);
-
-  const iframeSrc =
-    'http://iframe.localhost:' +
-    location.port +
-    '/test/fixtures/served/iframe-intersection.html';
-
-  let testIframe;
-  let element;
-  let getIntersectionChangeEntrySpy;
-  let onScrollSpy;
-  let onChangeSpy;
-  let clock;
-  let testElementGetInsersectionElementLayoutBox;
-
-  function getIframe(src) {
-    const i = document.createElement('iframe');
-    i.src = src;
-    return i;
-  }
-
-  function insert(iframe) {
-    document.body.appendChild(iframe);
-  }
-
-  beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
-    testElementCreatedCallback = window.sandbox.spy();
-    testElementPreconnectCallback = window.sandbox.spy();
-    testElementFirstAttachedCallback = window.sandbox.spy();
-    testElementBuildCallback = window.sandbox.spy();
-    testElementLayoutCallback = window.sandbox.spy();
-    testElementFirstLayoutCompleted = window.sandbox.spy();
-    testElementViewportCallback = window.sandbox.spy();
-    testElementGetInsersectionElementLayoutBox = window.sandbox.spy();
-    getIntersectionChangeEntrySpy = window.sandbox.spy();
-    onScrollSpy = window.sandbox.spy();
-    onChangeSpy = window.sandbox.spy();
-    testIframe = getIframe(iframeSrc);
-    element = new ElementClass();
-    element.win = window;
-    element.getVsync = function () {
-      return {
-        measure(fn) {
-          fn();
-        },
-      };
-    };
-    element.getViewport = function () {
-      return {
-        onScroll() {
-          onScrollSpy();
-          return function () {};
-        },
-        onChanged() {
-          onChangeSpy();
-          return function () {};
-        },
-      };
-    };
-    element.element = {
-      getIntersectionChangeEntry() {
-        getIntersectionChangeEntrySpy();
-        const rootBounds = layoutRectLtwh(198, 299, 100, 100);
-        const layoutBox = layoutRectLtwh(50, 100, 150, 200);
-        return getIntersectionChangeEntry(layoutBox, null, rootBounds);
-      },
-    };
-    element.isInViewport = () => false;
-  });
-
-  afterEach(() => {
-    testIframe.parentNode.removeChild(testIframe);
-  });
-
-  it('should not send intersection', () => {
-    const ioInstance = new IntersectionObserverHostForAd(element, testIframe);
-    insert(testIframe);
-    const postMessageSpy = window.sandbox /*OK*/
-      .spy(testIframe.contentWindow, 'postMessage');
-    ioInstance.sendElementIntersection_();
-    expect(postMessageSpy).to.have.not.been.called;
-    expect(ioInstance.pendingChanges_).to.have.length(0);
-  });
-
-  it('should send intersection', () => {
-    const messages = [];
-    const ioInstance = new IntersectionObserverHostForAd(element, testIframe);
-    insert(testIframe);
-    testIframe.contentWindow.postMessage = (message) => {
-      // Copy because arg is modified in place.
-      messages.push(JSON.parse(JSON.stringify(message)));
-    };
-    clock.tick(33);
-    ioInstance.postMessageApi_.clientWindows_ = [
-      {win: testIframe.contentWindow, origin: '*'},
-    ];
-    ioInstance.startSendingIntersectionChanges_();
-    expect(getIntersectionChangeEntrySpy).to.be.calledOnce;
-    expect(messages).to.have.length(1);
-    expect(ioInstance.pendingChanges_).to.have.length(0);
-    expect(messages[0].changes).to.have.length(1);
-    expect(messages[0].changes[0].time).to.equal(33);
-  });
-
-  it('should send more intersections', () => {
-    const messages = [];
-    const ioInstance = new IntersectionObserverHostForAd(element, testIframe);
-    insert(testIframe);
-    testIframe.contentWindow.postMessage = (message) => {
-      // Copy because arg is modified in place.
-      messages.push(JSON.parse(JSON.stringify(message)));
-    };
-    ioInstance.postMessageApi_.clientWindows_ = [
-      {win: testIframe.contentWindow, origin: '*'},
-    ];
-    ioInstance.startSendingIntersectionChanges_();
-    expect(getIntersectionChangeEntrySpy).to.be.calledOnce;
-    expect(messages).to.have.length(1);
-    expect(messages[0].changes).to.have.length(1);
-    expect(messages[0].changes[0].time).to.equal(0);
-    clock.tick(98);
-    ioInstance.fire();
-    clock.tick(1);
-    ioInstance.fire();
-    ioInstance.fire(); // Same time
-    ioInstance.fire(); // Same time
-    expect(ioInstance.pendingChanges_).to.have.length(2);
-    expect(messages).to.have.length(1);
-    clock.tick(1);
-    expect(messages).to.have.length(2);
-    expect(messages[1].changes).to.have.length(2);
-    expect(messages[1].changes[0].time).to.equal(98);
-    expect(messages[1].changes[1].time).to.equal(99);
-    expect(ioInstance.pendingChanges_).to.have.length(0);
-    ioInstance.fire();
-    expect(ioInstance.pendingChanges_).to.have.length(0);
-    expect(messages).to.have.length(3);
-    clock.tick(99);
-    ioInstance.fire();
-    expect(ioInstance.pendingChanges_).to.have.length(1);
-    expect(messages).to.have.length(3);
-    clock.tick(1);
-    expect(ioInstance.pendingChanges_).to.have.length(0);
-    expect(messages).to.have.length(4);
-    expect(messages[2].changes).to.have.length(1);
-    expect(messages[2].changes[0].time).to.equal(100);
-    expect(messages[3].changes).to.have.length(1);
-    expect(messages[3].changes[0].time).to.equal(199);
-  });
-
-  it('should init listeners when element is in viewport', () => {
-    const fireSpy = window.sandbox.spy(
-      IntersectionObserverHostForAd.prototype,
-      'fire'
-    );
-    const ioInstance = new IntersectionObserverHostForAd(element, testIframe);
-    insert(testIframe);
-    ioInstance.onViewportCallback(true);
-    expect(fireSpy).to.be.calledOnce;
-    expect(onScrollSpy).to.be.calledOnce;
-    expect(onChangeSpy).to.be.calledOnce;
-    expect(ioInstance.unlistenViewportChanges_).to.not.be.null;
-  });
-
-  it('should unlisten listeners when element is out of viewport', () => {
-    const fireSpy = window.sandbox.spy(
-      IntersectionObserverHostForAd.prototype,
-      'fire'
-    );
-    const ioInstance = new IntersectionObserverHostForAd(element, testIframe);
-    insert(testIframe);
-    ioInstance.onViewportCallback(true);
-    ioInstance.onViewportCallback();
-    expect(fireSpy).to.have.callCount(2);
-    expect(ioInstance.unlistenViewportChanges_).to.be.null;
-  });
-
-  it('should go into in-viewport state for initially visible element', () => {
-    element.isInViewport = () => true;
-    const ioInstance = new IntersectionObserverHostForAd(element, testIframe);
-    insert(testIframe);
-    ioInstance.startSendingIntersectionChanges_();
-    expect(getIntersectionChangeEntrySpy).to.have.callCount(2);
-    expect(onScrollSpy).to.be.calledOnce;
-    expect(onChangeSpy).to.be.calledOnce;
-    expect(ioInstance.unlistenViewportChanges_).to.not.be.null;
-  });
-
-  it('should not send intersection after destroy is called', () => {
-    const messages = [];
-    const ioInstance = new IntersectionObserverHostForAd(element, testIframe);
-    insert(testIframe);
-    ioInstance.onViewportCallback(true);
-    testIframe.contentWindow.postMessage = (message) => {
-      // Copy because arg is modified in place.
-      messages.push(JSON.parse(JSON.stringify(message)));
-    };
-    ioInstance.postMessageApi_.clientWindows_ = [
-      {win: testIframe.contentWindow, origin: '*'},
-    ];
-    ioInstance.startSendingIntersectionChanges_();
-    expect(messages).to.have.length(1);
-    ioInstance.fire();
-    clock.tick(50);
-    ioInstance.destroy();
-    clock.tick(50);
-    expect(messages).to.have.length(1);
-    expect(ioInstance.unlistenViewportChanges_).to.be.null;
-  });
-});
diff --git a/extensions/amp-ad/0.1/test/test-legacy-ad-intersection-observer-host.js b/extensions/amp-ad/0.1/test/test-legacy-ad-intersection-observer-host.js
new file mode 100644
index 0000000000000..7be1c0c7229b2
--- /dev/null
+++ b/extensions/amp-ad/0.1/test/test-legacy-ad-intersection-observer-host.js
@@ -0,0 +1,251 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {BaseElement} from '../../../../src/base-element';
+import {LegacyAdIntersectionObserverHost} from '../legacy-ad-intersection-observer-host';
+import {createAmpElementForTesting} from '../../../../src/custom-element';
+import {deserializeMessage} from '../../../../src/3p-frame-messaging';
+import {getIntersectionChangeEntry} from '../../../../src/utils/intersection-observer-3p-host';
+import {layoutRectLtwh} from '../../../../src/core/math/layout-rect';
+
+describes.sandboxed('IntersectionObserverHostForAd', {}, (env) => {
+  const ElementClass = createAmpElementForTesting(window, BaseElement);
+  customElements.define('amp-int', ElementClass);
+
+  const iframeSrc =
+    'http://iframe.localhost:' +
+    location.port +
+    '/test/fixtures/served/iframe-intersection.html';
+
+  let testIframe;
+  let element;
+  let onScrollSpy;
+  let onChangeSpy;
+  let clock;
+  let stubFireInOb;
+
+  function getInObEntry() {
+    const rootBounds = layoutRectLtwh(198, 299, 100, 100);
+    const layoutBox = layoutRectLtwh(50, 100, 150, 200);
+    return getIntersectionChangeEntry(layoutBox, null, rootBounds);
+  }
+
+  function getIframe(src) {
+    const i = document.createElement('iframe');
+    i.src = src;
+    return i;
+  }
+
+  function insert(iframe) {
+    document.body.appendChild(iframe);
+  }
+
+  beforeEach(() => {
+    clock = env.sandbox.useFakeTimers();
+    onScrollSpy = env.sandbox.spy();
+    onChangeSpy = env.sandbox.spy();
+    testIframe = getIframe(iframeSrc);
+    element = new ElementClass();
+    element.win = window;
+    element.getViewport = function () {
+      return {
+        onScroll() {
+          onScrollSpy();
+          return function () {};
+        },
+        onChanged() {
+          onChangeSpy();
+          return function () {};
+        },
+      };
+    };
+
+    stubFireInOb = (host) => {
+      let fireObserved = false;
+      host.fireInOb_ = {
+        observe() {
+          if (!fireObserved) {
+            setTimeout(() => {
+              host.sendElementIntersection_(getInObEntry());
+              fireObserved = false;
+            }, 0);
+          }
+          fireObserved = true;
+        },
+        unobserve: () => (fireObserved = false),
+        disconnect: env.sandbox.spy(),
+      };
+      return host.fireInOb_;
+    };
+
+    element.element = document.createElement('amp-int');
+  });
+
+  afterEach(() => {
+    testIframe.parentNode.removeChild(testIframe);
+  });
+
+  it('should not send intersection', () => {
+    const ioInstance = new LegacyAdIntersectionObserverHost(
+      element,
+      testIframe
+    );
+    insert(testIframe);
+    const postMessageSpy = env.sandbox /*OK*/
+      .spy(testIframe.contentWindow, 'postMessage');
+    ioInstance.fire();
+    clock.tick(0);
+    expect(postMessageSpy).to.have.not.been.called;
+    expect(ioInstance.pendingChanges_).to.have.length(0);
+  });
+
+  it('should send intersection', () => {
+    const messages = [];
+    const ioInstance = new LegacyAdIntersectionObserverHost(
+      element,
+      testIframe
+    );
+    stubFireInOb(ioInstance);
+    insert(testIframe);
+    testIframe.contentWindow.postMessage = (message) => {
+      messages.push(deserializeMessage(message));
+    };
+    clock.tick(33);
+    ioInstance.postMessageApi_.clientWindows_ = [
+      {win: testIframe.contentWindow, origin: '*'},
+    ];
+    ioInstance.startSendingIntersectionChanges_();
+    clock.tick(0);
+    expect(messages).to.have.length(1);
+    expect(ioInstance.pendingChanges_).to.have.length(0);
+    expect(messages[0].changes).to.have.length(1);
+    expect(messages[0].changes[0].time).to.equal(33);
+  });
+
+  it('should send more intersections', () => {
+    const messages = [];
+    const ioInstance = new LegacyAdIntersectionObserverHost(
+      element,
+      testIframe
+    );
+    stubFireInOb(ioInstance);
+    insert(testIframe);
+    testIframe.contentWindow.postMessage = (message) => {
+      messages.push(deserializeMessage(message));
+    };
+    ioInstance.postMessageApi_.clientWindows_ = [
+      {win: testIframe.contentWindow, origin: '*'},
+    ];
+    ioInstance.startSendingIntersectionChanges_();
+    clock.tick(0);
+    expect(messages).to.have.length(1);
+    expect(messages[0].changes).to.have.length(1);
+    expect(messages[0].changes[0].time).to.equal(0);
+    clock.tick(98);
+    ioInstance.fire();
+    clock.tick(1);
+    ioInstance.fire();
+    ioInstance.fire(); // Same time
+    ioInstance.fire(); // Same time
+    clock.tick(0);
+    expect(ioInstance.pendingChanges_).to.have.length(2);
+    expect(messages).to.have.length(1);
+    clock.tick(1);
+    expect(messages).to.have.length(2);
+    expect(messages[1].changes).to.have.length(2);
+    expect(messages[1].changes[0].time).to.equal(98);
+    expect(messages[1].changes[1].time).to.equal(99);
+    expect(ioInstance.pendingChanges_).to.have.length(0);
+    ioInstance.fire();
+    clock.tick(0);
+    expect(ioInstance.pendingChanges_).to.have.length(0);
+    expect(messages).to.have.length(3);
+    clock.tick(99);
+    ioInstance.fire();
+    clock.tick(0);
+    expect(ioInstance.pendingChanges_).to.have.length(1);
+    expect(messages).to.have.length(3);
+    clock.tick(1);
+    expect(ioInstance.pendingChanges_).to.have.length(0);
+    expect(messages).to.have.length(4);
+    expect(messages[2].changes).to.have.length(1);
+    expect(messages[2].changes[0].time).to.equal(100);
+    expect(messages[3].changes).to.have.length(1);
+    expect(messages[3].changes[0].time).to.equal(199);
+  });
+
+  it('should init listeners when element is in viewport', () => {
+    const sendElementIntersectionSpy = env.sandbox.spy(
+      LegacyAdIntersectionObserverHost.prototype,
+      'sendElementIntersection_'
+    );
+    const ioInstance = new LegacyAdIntersectionObserverHost(
+      element,
+      testIframe
+    );
+    stubFireInOb(ioInstance);
+    insert(testIframe);
+    ioInstance.onViewportCallback_(getInObEntry());
+    expect(sendElementIntersectionSpy).to.be.calledOnce;
+    expect(onScrollSpy).to.be.calledOnce;
+    expect(onChangeSpy).to.be.calledOnce;
+    expect(ioInstance.unlistenViewportChanges_).to.not.be.null;
+  });
+
+  it('should unlisten listeners when element is out of viewport', () => {
+    const sendElementIntersectionSpy = env.sandbox.spy(
+      LegacyAdIntersectionObserverHost.prototype,
+      'sendElementIntersection_'
+    );
+    const ioInstance = new LegacyAdIntersectionObserverHost(
+      element,
+      testIframe
+    );
+    insert(testIframe);
+    ioInstance.onViewportCallback_(getInObEntry());
+    ioInstance.onViewportCallback_({...getInObEntry(), intersectionRatio: 0});
+    expect(sendElementIntersectionSpy).to.have.callCount(2);
+    expect(ioInstance.unlistenViewportChanges_).to.be.null;
+  });
+
+  it('should not send intersection after destroy is called', () => {
+    const messages = [];
+    const ioInstance = new LegacyAdIntersectionObserverHost(
+      element,
+      testIframe
+    );
+    const fireInOb = stubFireInOb(ioInstance);
+    insert(testIframe);
+    testIframe.contentWindow.postMessage = (message) => {
+      messages.push(deserializeMessage(message));
+    };
+    ioInstance.postMessageApi_.clientWindows_ = [
+      {win: testIframe.contentWindow, origin: '*'},
+    ];
+
+    ioInstance.startSendingIntersectionChanges_();
+    ioInstance.onViewportCallback_(getInObEntry());
+    clock.tick(0);
+    expect(messages).to.have.length(1);
+    ioInstance.fire();
+    clock.tick(50);
+    ioInstance.destroy();
+    clock.tick(50);
+    expect(messages).to.have.length(1);
+    expect(ioInstance.unlistenViewportChanges_).to.be.null;
+    expect(fireInOb.disconnect).calledOnce;
+  });
+});
diff --git a/extensions/amp-ad/0.1/test/validator-amp-ad.html b/extensions/amp-ad/0.1/test/validator-amp-ad.html
index 217ec354fb6f6..a6f0dd2f94f13 100644
--- a/extensions/amp-ad/0.1/test/validator-amp-ad.html
+++ b/extensions/amp-ad/0.1/test/validator-amp-ad.html
@@ -40,6 +40,9 @@
           data-aax_src="302">
   </amp-ad>
   <!-- Valid -->
+  <amp-ad sticky width=300 height=250 type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302">
+  </amp-ad>
+  <!-- Valid -->
   <amp-ad width=300 height=250
       type="custom"
       data-url="https://foobar.com"
diff --git a/extensions/amp-ad/0.1/test/validator-amp-ad.out b/extensions/amp-ad/0.1/test/validator-amp-ad.out
index 08fc5cacb08a7..608146d3b04df 100644
--- a/extensions/amp-ad/0.1/test/validator-amp-ad.out
+++ b/extensions/amp-ad/0.1/test/validator-amp-ad.out
@@ -41,6 +41,9 @@ FAIL
 |            data-aax_src="302">
 |    </amp-ad>
 |    <!-- Valid -->
+|    <amp-ad sticky width=300 height=250 type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302">
+|    </amp-ad>
+|    <!-- Valid -->
 |    <amp-ad width=300 height=250
 |        type="custom"
 |        data-url="https://foobar.com"
@@ -62,29 +65,29 @@ FAIL
 |    <amp-fx-flying-carpet height="300">
 |      <amp-ad data-multi-size="" height="300" type="foo"></amp-ad>
 >>     ^~~~~~~~~
-amp-ad/0.1/test/validator-amp-ad.html:62:4 The tag 'amp-ad with data-multi-size attribute' may not appear as a descendant of tag 'amp-fx-flying-carpet'. (see https://amp.dev/documentation/components/amp-ad)
+amp-ad/0.1/test/validator-amp-ad.html:65:4 The tag 'amp-ad' may not appear as a descendant of tag 'amp-fx-flying-carpet'. (see https://amp.dev/documentation/components/amp-ad/)
 |    </amp-fx-flying-carpet>
 |    <!-- Invalid: amp-ad in an amp ad container with data-multi-size attr -->
 |    <amp-fx-flying-carpet height="300">
 |      <amp-embed data-multi-size="" height="300" type="foo"></amp-ad>
 >>     ^~~~~~~~~
-amp-ad/0.1/test/validator-amp-ad.html:66:4 The tag 'amp-embed with data-multi-size attribute' may not appear as a descendant of tag 'amp-fx-flying-carpet'. (see https://amp.dev/documentation/components/amp-ad)
+amp-ad/0.1/test/validator-amp-ad.html:69:4 The tag 'amp-embed' may not appear as a descendant of tag 'amp-fx-flying-carpet'. (see https://amp.dev/documentation/components/amp-ad/)
 |    </amp-fx-flying-carpet>
 |    <!-- Invalid: amp-ad missing layout=fluid for fluid ad -->
 |    <amp-ad type=doubleclick width="100" height="fluid"></amp-ad>
 >>   ^~~~~~~~~
-amp-ad/0.1/test/validator-amp-ad.html:69:2 The attribute 'height' in tag 'amp-ad' is set to the invalid value 'fluid'. (see https://amp.dev/documentation/components/amp-ad)
+amp-ad/0.1/test/validator-amp-ad.html:72:2 The attribute 'height' in tag 'amp-ad' is set to the invalid value 'fluid'. (see https://amp.dev/documentation/components/amp-ad/)
 |    <!-- Invalid: amp-ad type=custom missing data-url-->
 |    <amp-ad width=300 height=250
 >>   ^~~~~~~~~
-amp-ad/0.1/test/validator-amp-ad.html:71:2 The mandatory attribute 'data-url' is missing in tag 'amp-ad with type=custom'. (see https://github.com/ampproject/amphtml/blob/master/ads/custom.md)
+amp-ad/0.1/test/validator-amp-ad.html:74:2 The mandatory attribute 'data-url' is missing in tag 'amp-ad'. (see https://github.com/ampproject/amphtml/blob/main/ads/custom.md)
 |        type="custom"
 |        template="template-1">
 |    </amp-ad>
 |    <!-- Invalid: amp-ad type=custom non-https data-url-->
 |    <amp-ad width=300 height=250
 >>   ^~~~~~~~~
-amp-ad/0.1/test/validator-amp-ad.html:76:2 Invalid URL protocol 'http:' for attribute 'data-url' in tag 'amp-ad with type=custom'. (see https://github.com/ampproject/amphtml/blob/master/ads/custom.md)
+amp-ad/0.1/test/validator-amp-ad.html:79:2 Invalid URL protocol 'http:' for attribute 'data-url' in tag 'amp-ad'. (see https://github.com/ampproject/amphtml/blob/main/ads/custom.md)
 |        type="custom"
 |        data-url="http://foobar.com"
 |        template="template-1">
diff --git a/extensions/amp-ad/OWNERS b/extensions/amp-ad/OWNERS
index 94b65ebe76929..1b8c3b93f6d99 100644
--- a/extensions/amp-ad/OWNERS
+++ b/extensions/amp-ad/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-ad/amp-ad.md b/extensions/amp-ad/amp-ad.md
index 93b8d18dce2b2..7b46c59515016 100644
--- a/extensions/amp-ad/amp-ad.md
+++ b/extensions/amp-ad/amp-ad.md
@@ -24,13 +24,15 @@ limitations under the License.
 
 # amp-ad / amp-embed
 
-The `amp-embed` is an alias to the `amp-ad` tag, deriving all of its functionality with a different tag name. Use `amp-embed` when semantically more accurate. AMP documents only support ads/embeds served via HTTPS.
+## Usage
 
-{% call callout('Note', type='note') %}
-The specification of `amp-ad` / `amp-embed` is likely to significantly evolve over time. The current approach is designed to bootstrap the format to be able to show ads.
-{% endcall %}
+The `amp-embed` is an alias to the `amp-ad` tag, deriving all of its functionality with a different tag name. Use `amp-embed` when semantically more accurate. AMP documents only support ads/embeds served via HTTPS.
 
-## Behavior
+[tip type="note"]
+The specification of `amp-ad` / `amp-embed` is likely to significantly
+evolve over time. The current approach is designed to bootstrap the format to be
+able to show ads.
+[/tip]
 
 Ads are loaded like all other resources in AMP documents, with a special
 custom element called `<amp-ad>`. No ad network-provided JavaScript is allowed to run inside the AMP document. Instead, the AMP runtime loads an iframe from a
@@ -39,7 +41,7 @@ network’s JS inside that iframe sandbox.
 
 The `<amp-ad>` requires width and height values to be specified according to the [rule](<https://amp.dev/documentation/guides-and-tutorials/learn/amp-html-layout/#(tl;dr)-summary-of-layout-requirements-&-behaviors>) of its layout type. It requires a `type` argument that select what ad network is displayed. All `data-*` attributes on the tag are automatically passed as arguments to the code that eventually renders the ad. What `data-` attributes are required for a given type of network depends and must be documented with the ad network.
 
-#### Example: Displaying a few ads
+**Example: Displaying a few ads**
 
 [example preview="inline" playground="true" imports="amp-ad"]
 
@@ -81,49 +83,7 @@ The `<amp-ad>` requires width and height values to be specified according to the
 
 [/example]
 
-## Attributes
-
-<table>
-  <tr>
-    <td width="40%"><strong>type (required)</strong></td>
-    <td>Specifies an identifier for the <a href="#supported-ad-networks">ad network</a>. The <code>type</code>attribute selects the template to use for the ad tag.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>src (optional)</strong></td>
-    <td>Use this attribute to load a script tag for the specified ad network. This can be used for ad networks that require exactly a single script tag to be inserted in the page. The <code>src</code> value must have a prefix that is white-listed for the specified ad network, and the value must use <code>https</code> protocol.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-foo-bar</strong></td>
-    <td>Most ad networks require further configuration, which can be passed to the network by using HTML <code>data-</code> attributes. The parameter names are subject to standard data attribute dash to camel case conversion. For example, "data-foo-bar" is send to the ad for configuration as "fooBar". See the documentation for the <a href="#supported-ad-networks">ad network</a> on which attributes can be used.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-vars-foo-bar</strong></td>
-    <td>Attributes starting with <code>data-vars-</code> are reserved for <a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md#variables-as-data-attribute"><code>amp-analytics</code> vars</a>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>json (optional)</strong></td>
-    <td>Use this attribute to pass a configuration to the ad as an arbitrarily complex JSON object. The object is passed to the ad as-is with no mangling done on the names.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-consent-notification-id (optional)</strong></td>
-    <td>If provided, requires confirming the <a href="https://amp.dev/documentation/components/amp-user-notification.html">amp-user-notification</a> with the given HTML-id until the "AMP client id" for the user (similar to a cookie) is passed to the ad. This means that ad rendering is delayed until the user confirms the notification.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-loading-strategy (optional)</strong></td>
-    <td>Instructs the ad to start loading when the ad is within the given number of viewports away from the current viewport. Without the <code>data-loading-strategy</code> attribute, the number is 3 by default. You can specify a float value in the range of [0, 3] (If the value is not specified the value is set to 1.25). Use a smaller value to gain a higher degree of viewability (i.e., increase the chance that an ad, once loaded, will be seen) but with the risk of generating fewer impressions (i.e., fewer ads loaded). If the attribute is specified but the value is left blank, the system assigns a float value, which optimizes for viewability without drastically impacting the impressions. Note, specifying <code>prefer-viewability-over-views</code> as the value also automatically optimizes viewability.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-ad-container-id (optional)</strong></td>
-    <td>Informs the ad of the container component id in the case of attempting to collapse. The container component must be an <code>&lt;amp-layout&gt;</code> component that's parent of the ad. When the <code>data-ad-container-id</code> is specified, and such a <code>&lt;amp-layout&gt;</code> container component is found, AMP runtime will try to collapse the container component instead of the ad component during no fill. This feature can be useful when an ad indicator is in presence.
-</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
-
-## Placeholder
+### Placeholder
 
 Optionally, `amp-ad` supports a child element with the `placeholder` attribute. If supported by the ad network, this element is shown until the ad is available for viewing. Learn more in [Placeholders & Fallbacks](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders).
 
@@ -133,13 +93,13 @@ Optionally, `amp-ad` supports a child element with the `placeholder` attribute.
 </amp-ad>
 ```
 
-## No ad available
+### No ad available
 
 If no ad is available for the slot, AMP attempts to collapse the `amp-ad` element (that is, set to `display: none`). AMP determines that this operation can be performed without affecting the user's scroll position. If the ad is in the current viewport, the ad will not be collapsed because it affects the user's scroll position; however, if the ad is outside of the current viewport, it will be collapsed.
 
 In the case that the attempt to collapse fails. The `amp-ad` component supports a child element with the `fallback` attribute. If there is a fallback element in presence, the customized fallback element is shown. Otherwise AMP will apply a default fallback.
 
-Example with fallback:
+**Example with fallback:**
 
 ```html
 <amp-ad width="300" height="250" type="foo">
@@ -147,11 +107,11 @@ Example with fallback:
 </amp-ad>
 ```
 
-## Serving video ads
+### Serving video ads
 
 There are 3 ways to monetize videos in AMP with video ads:
 
-1. AMP natively supports a number video players like BrightCove, DailyMotion, etc. that can monetize ads. For a full list, see the [media](https://www.ampproject.org/docs/reference/components#media) components.
+1. AMP natively supports a number video players like BrightCove, DailyMotion, etc. that can monetize ads. For a full list, see the [media](https://amp.dev/documentation/components/?referrer=ampproject.org#media) components.
 
 2. Use the [amp-ima-video](https://amp.dev/documentation/components/amp-ima-video.html) component that comes with a built-in IMA SDK and HTML5 video player
 
@@ -160,7 +120,7 @@ There are 3 ways to monetize videos in AMP with video ads:
    _ Make sure there is a poster if loading the player in the first viewport. [Details](https://amp.dev/documentation/components/amp-iframe#iframe-with-placeholder).
    _ Video and poster must be served over HTTPS.
 
-## Running ads from a custom domain
+### Running ads from a custom domain
 
 AMP supports loading the bootstrap iframe that is used to load ads from a custom domain such as your own domain.
 
@@ -173,26 +133,26 @@ To enable this, copy the file [remote.html](../../3p/remote.html) to your web se
 />
 ```
 
-The `content` attribute of the meta tag is the absolute URL to your copy of the remote.html file on your web server. This URL must use a "https" schema. It cannot reside on the same origin as your AMP files. For example, if you host AMP files on `www.example.com`, this URL must not be on `www.example.com` but `something-else.example.com` is OK. See ["Iframe origin policy"](../../spec/amp-iframe-origin-policy.md) for further details on allowed origins for iframes.
+The `content` attribute of the meta tag is the absolute URL to your copy of the remote.html file on your web server. This URL must use a "https" schema. It cannot reside on the same origin as your AMP files. For example, if you host AMP files on `www.example.com`, this URL must not be on `www.example.com` but `something-else.example.com` is OK. See ["Iframe origin policy"](../../docs/spec/amp-iframe-origin-policy.md) for further details on allowed origins for iframes.
 
-### Security
+#### Security
 
 **Validate incoming data** before passing it on to the `draw3p` function, to make sure your iframe only does things it expects to do. This is true, in particular, for ad networks that allow custom JavaScript injection.
 
 Iframes should also enforce that they are only iframed into origins that they expect to be iframed into. The origins would be:
 
-- your own origins
-- `https://cdn.ampproject.org` for the AMP cache
+-   your own origins
+-   `https://cdn.ampproject.org` for the AMP cache
 
 In the case of the AMP cache you also need to check that the "source origin" (origin of the document served by cdn.ampproject.org) is one of your origins.
 
 Enforcing origins can be done with the 3rd argument to `draw3p` and must additionally be done using the [allow-from](https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options) directive for full browser support.
 
-### Enhance incoming ad configuration
+#### Enhance incoming ad configuration
 
 This is completely optional: It is sometimes desired to enhance the ad request before making the ad request to the ad server.
 
-If your ad network supports [fast fetch](https://amp.dev/documentation/guides-and-tutorials/contribute/adnetwork_integration#creating-an-amp-ad-implementation), then please use [Real Time Config](https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/rtc-documentation.md) (RTC). (e.g. DoubleClick and AdSense integrations both support fast fetch and RTC)
+If your ad network supports [fast fetch](https://amp.dev/documentation/guides-and-tutorials/contribute/adnetwork_integration#creating-an-amp-ad-implementation), then please use [Real Time Config](https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/rtc-documentation.md) (RTC). (e.g. DoubleClick and AdSense integrations both support fast fetch and RTC)
 
 If your ad network uses delayed fetch, you can pass a callback to the `draw3p` function call in the [remote.html](../../3p/remote.html) file. The callback receives the incoming configuration as first argument and then receives another callback as second argument (Called `done` in the example below). This callback must be called with the updated config in order for ad rendering to proceed.
 
@@ -209,6 +169,84 @@ draw3p(function(config, done) {
 }, ['allowed-ad-type'], ['your-domain.com']);
 ```
 
+## Attributes
+
+### `type` (required)
+
+Specifies an identifier for the
+[ad network](#supported-ad-networks).
+The `type` attribute selects the template to use for the ad tag.
+
+### `data-foo-bar`
+
+Most ad networks require further configuration, which can be passed to the
+network by using HTML `data–` attributes. The parameter names are subject to
+standard data attribute dash to camel case conversion. For example,
+"data-foo-bar" is send to the ad for configuration as "fooBar". See the
+documentation for the
+[ad network](#supported-ad-networks)
+on which attributes can be used.
+
+### `data-vars-foo-bar`
+
+Attributes starting with `data-vars–` are reserved for
+[`amp-analytics` vars](https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/analytics-vars.md#variables-as-data-attribute).
+
+### `src` (optional)
+
+Use this attribute to load a script tag for the specified ad network. This can
+be used for ad networks that require exactly a single script tag to be inserted
+in the page. The `src` value must have a prefix that is allow-listed for the
+specified ad network, and the value must use `https` protocol.
+
+### `json` (optional)
+
+Use this attribute to pass a configuration to the ad as an arbitrarily complex
+JSON object. The object is passed to the ad as-is with no mangling done on the
+names.
+
+### `data-consent-notification-id` (optional)
+
+If provided, requires confirming the
+[amp-user-notification](https://amp.dev/documentation/components/amp-user-notification.html)
+with the given HTML-id until the "AMP client id" for the user (similar to a
+cookie) is passed to the ad. This means that ad rendering is delayed until the
+user confirms the notification.
+
+### `data-loading-strategy` (optional)
+
+Instructs the ad to start loading when the ad is within the given number of
+viewports away from the current viewport. Without the `data-loading-strategy`
+attribute, the number is 3 by default. You can specify a float value in the
+range of \[0, 3\] (If the value is not specified the value is set to 1.25).
+
+Use a smaller value to gain a higher degree of viewability (i.e., increase the
+chance that an ad, once loaded, will be seen) but with the risk of generating
+fewer impressions (i.e., fewer ads loaded). If the attribute is specified but
+the value is left blank, the system assigns a float value, which optimizes for
+viewability without drastically impacting the impressions. Note, specifying
+`prefer-viewability-over-views` as the value also automatically optimizes
+viewability.
+
+### `data-ad-container-id` (optional)
+
+Informs the ad of the container component id in the case of attempting to
+collapse. The container component must be an `<amp-layout>` component that's
+parent of the ad. When the `data-ad-container-id` is specified, and such a
+`<amp-layout>` container component is found, AMP runtime will try to collapse
+the container component instead of the ad component during no fill. This feature
+can be useful when an ad indicator is in presence.
+
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Advertisement"`.
+
+### common attributes
+
+This element includes
+[common attributes extended](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes/)
+to AMP components.
+
 ## Styling
 
 `<amp-ad>` elements may not themselves have or be placed in containers that have CSS `position: fixed` set (with the exception of `amp-lightbox`).
@@ -216,250 +254,268 @@ This is due to the UX implications of full page overlay ads. It may be considere
 
 ## Validation
 
-See [amp-ad rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad/validator-amp-ad.protoascii) in the AMP validator specification.
+See [amp-ad rules](validator-amp-ad.protoascii) in the AMP validator specification.
 
 ## Supported ad networks
 
-- [A8](../../ads/a8.md)
-- [A9](../../ads/a9.md)
-- [AccessTrade](../../ads/accesstrade.md)
-- [Adblade](../../ads/adblade.md)
-- [AdButler](../../ads/adbutler.md)
-- [Adform](../../ads/adform.md)
-- [Adfox](../../ads/adfox.md)
-- [Ad Generation](../../ads/adgeneration.md)
-- [AdGlare](../../ads/adglare.md)
-- [Adhese](../../ads/adhese.md)
-- [Adincube](../../ads/adincube.md)
-- [ADITION](../../ads/adition.md)
-- [Adman](../../ads/adman.md)
-- [AdmanMedia](../../ads/admanmedia.md)
-- [Admixer](../../ads/admixer.md)
-- [AdOcean](../../ads/adocean.md)
-- [Adop](../../ads/adop.md)
-- [AdPicker](../../ads/adpicker.md)
-- [AdPlugg](../../ads/adplugg.md)
-- [Adpon](../../ads/adpon.md)
-- [AdReactor](../../ads/adreactor.md)
-- [AdSense](../../ads/google/adsense.md)
-- [AdSensor](../../ads/adsensor.md)
-- [AdServSolutions](../../ads/adservsolutions.md)
-- [AdsLoom](../../ads/adsloom.md)
-- [AdsNative](../../ads/adsnative.md)
-- [AdSpeed](../../ads/adspeed.md)
-- [AdSpirit](../../ads/adspirit.md)
-- [AdStir](../../ads/adstir.md)
-- [AdStyle](../../ads/adstyle.md)
-- [AdTech](../../ads/adtech.md)
-- [AdThrive](../../ads/adthrive.md)
-- [AdUnity](../../ads/adunity.md)
-- [Ad Up Technology](../../ads/aduptech.md)
-- [Adventive](../../ads/adventive.md)
-- [Adverline](../../ads/adverline.md)
-- [Adverticum](../../ads/adverticum.md)
-- [AdvertServe](../../ads/advertserve.md)
-- [Adyoulike](../../ads/adyoulike.md)
-- [Affiliate-B](../../ads/affiliateb.md)
-- [AJA](../../ads/aja.md)
-- [AMoAd](../../ads/amoad.md)
-- [Aniview](../../ads/aniview.md)
-- [AnyClip](../../ads/anyclip.md)
-- [AppNexus](../../ads/appnexus.md)
-- [AppVador](../../ads/appvador.md)
-- [Atomx](../../ads/atomx.md)
-- [Baidu](../../ads/baidu.md)
-- [BeaverAds](../../ads/beaverads.md)
-- [BeOpinion](../amp-beopinion/amp-beopinion.md)
-- [Bidtellect](../../ads/bidtellect.md)
-- [Blade](../../ads/blade.md)
-- [brainy](../../ads/brainy.md)
-- [Broadstreet Ads](../../ads/broadstreetads.md)
-- [ByPlay](../../ads/byplay.md)
-- [CA A.J.A. Infeed](../../ads/caajainfeed.md)
-- [CA-ProFit-X](../../ads/caprofitx.md)
-- [Cedato](../../ads/cedato.md)
-- [Colombia](../../ads/colombia.md)
-- [Connatix](../../ads/connatix.md)
-- [Conative](../../ads/conative.md)
-- [Content.ad](../../ads/contentad.md)
-- [Criteo](../../ads/criteo.md)
-- [CSA](../../ads/google/csa.md)
-- [CxenseDisplay](../../ads/eas.md)
-- [Directadvert](../../ads/directadvert.md)
-- [DistroScale](../../ads/distroscale.md)
-- [Dot and Media](../../ads/dotandads.md)
-- [Doubleclick](../../ads/google/doubleclick.md)
-- [DynAd](../../ads/dynad.md)
-- [eADV](../../ads/eadv.md)
-- [E-Planning](../../ads/eplanning.md)
-- [Empower](../../ads/empower.md)
-- [Ezoic](../../ads/ezoic.md)
-- [Felmat](../../ads/felmat.md)
-- [FlexOneELEPHANT](../../ads/f1e.md)
-- [FlexOneHARRIER](../../ads/f1h.md)
-- [Flite](../../ads/flite.md)
-- [fluct](../../ads/fluct.md)
-- [Fork Media](../../ads/forkmedia.md)
-- [FreeWheel](../../ads/freewheel.md)
-- [Fusion](../../ads/fusion.md)
-- [GenieeSSP](../../ads/genieessp.md)
-- [Giraff](../../ads/giraff.md)
-- [GMOSSP](../../ads/gmossp.md)
-- [GumGum](../../ads/gumgum.md)
-- [Holder](../../ads/holder.md)
-- [iBillboard](../../ads/ibillboard.md)
-- [Idealmedia](../../ads/idealmedia.md)
-- [I-Mobile](../../ads/imobile.md)
-- [Imonomy](../../ads/imonomy.md)
-- [Imedia](../../ads/imedia.md)
-- [Improve Digital](../../ads/improvedigital.md)
-- [Insticator](../../ads/insticator.md)
-- [Index Exchange](../../ads/ix.md)
-- [Industrybrains](../../ads/industrybrains.md)
-- [InMobi](../../ads/inmobi.md)
-- [Innity](../../ads/innity.md)
-- [Invibes](../../ads/invibes.md)
-- [Iprom](../../ads/iprom.md)
-- [Kargo](../../ads/kargo.md)
-- [Kiosked](../../ads/kiosked.md)
-- [Kixer](../../ads/kixer.md)
-- [Kuadio](../../ads/kuadio.md)
-- [Lentainform](../../ads/lentainform.md)
-- [Ligatus](../../ads/ligatus.md)
-- [LockerDome](../../ads/lockerdome.md)
-- [LOGLY](../../ads/logly.md)
-- [LOKA](../../ads/loka.md)
-- [MADS](../../ads/mads.md)
-- [MANTIS](../../ads/mantis.md)
-- [Mediaad.org](../../ads/mediaad.md)
-- [Marfeel](../../ads/marfeel.md)
-- [Media.net](../../ads/medianet.md)
-- [Mediavine](../../ads/mediavine.md)
-- [Medyanet](../../ads/medyanet.md)
-- [Meg](../../ads/meg.md)
-- [Mgid](../../ads/mgid.md)
-- [MicroAd](../../ads/microad.md)
-- [MixiMedia](../../ads/miximedia.md)
-- [Mixpo](../../ads/mixpo.md)
-- [Monetizer101](../../ads/monetizer101.md)
-- [mox](../../ads/mox.md)
-- [my6Sense](../../ads/my6sense.md)
-- [myTarget](../../ads/mytarget.md)
-- [myWidget](../../ads/mywidget.md)
-- [NativeRoll](../../ads/nativeroll.md)
-- [Nativery](../../ads/nativery.md)
-- [Nativo](../../ads/nativo.md)
-- [Navegg](../../ads/navegg.md)
-- [Nend](../../ads/nend.md)
-- [NETLETIX](../../ads/netletix.md)
-- [Noddus](../../ads/noddus.md)
-- [Nokta](../../ads/nokta.md)
-- [Newsroom AI](../../ads/nws.md)
-- [OneAD](../../ads/onead.md)
-- [OnNetwork](../../ads/onnetwork.md)
-- [Open AdStream (OAS)](../../ads/openadstream.md)
-- [OpenX](../../ads/openx.md)
-- [opinary](../../ads/opinary.md)
-- [Pixels](../../ads/pixels.md)
-- [plista](../../ads/plista.md)
-- [polymorphicAds](../../ads/polymorphicads.md)
-- [popin](../../ads/popin.md)
-- [PPStudio](../../ads/ppstudio.md)
-- [Pressboard](../../ads/pressboard.md)
-- [PromoteIQ](../../ads/promoteiq.md)
-- [PubGuru](../../ads/pubguru.md)
-- [PubMatic](../../ads/pubmatic.md)
-- [Pubmine](../../ads/pubmine.md)
-- [PulsePoint](../../ads/pulsepoint.md)
-- [PuffNetwork](../../ads/puffnetwork.md)
-- [Purch](../../ads/purch.md)
-- [Rakuten Unified Ads](../../ads/rakutenunifiedads.md)
-- [Rambler&Co](../../ads/capirs.md)
-- [RbInfoxSg](../../ads/rbinfox.md)
-- [Realclick](../../ads/realclick.md)
-- [recomAD](../../ads/recomad.md)
-- [Red for Publishers](../../ads/rfp.md)
-- [Relap](../../ads/relap.md)
-- [RelapPro](../../ads/relappro.md)
-- [Revcontent](../../ads/revcontent.md)
-- [RevJet](../../ads/revjet.md)
-- [rnetplus](../../ads/rnetplus.md)
-- [Rubicon Project](../../ads/rubicon.md)
-- [RUNative](../../ads/runative.md)
-- [SAS CI 360 Match](../../ads/sas.md)
-- [Seeding Alliance](../../ads/seedingalliance.md)
-- [Sekindo](../../ads/sekindo.md)
-- [Sharethrough](../../ads/sharethrough.md)
-- [SHE Media](../../ads/shemedia.md)
-- [Sklik](../../ads/sklik.md)
-- [SSP](../../ads/ssp.md)
-- [SlimCut Media](../../ads/slimcutmedia.md)
-- [Smart AdServer](../../ads/smartadserver.md)
-- [smartclip](../../ads/smartclip.md)
-- [SmileWanted](../../ads/smilewanted.md)
-- [sogou Ad](../../ads/sogouad.md)
-- [Sortable](../../ads/sortable.md)
-- [SOVRN](../../ads/sovrn.md)
-- [Speakol](../../ads/speakol.md)
-- [SpotX](../../ads/spotx.md)
-- [SpringAds](../../ads/springAds.md)
-- [Sulvo](../../ads/sulvo.md)
-- [SunMedia](../../ads/sunmedia.md)
-- [Swoop](../../ads/swoop.md)
-- [TcsEmotion](../../ads/tcsemotion.md)
-- [Teads](../../ads/teads.md)
-- [torimochi](../../ads/torimochi.md)
-- [Tracdelight](../../ads/tracdelight.md)
-- [TripleLift](../../ads/triplelift.md)
-- [Trugaze](../../ads/trugaze.md)
-- [UZOU](../../ads/uzou.md)
-- [ValueCommerce](../../ads/valuecommerce.md)
-- [video intelligence](../../ads/videointelligence.md)
-- [Videonow](../../ads/videonow.md)
-- [Viralize](../../ads/viralize.md)
-- [UAS](../../ads/uas.md)
-- [ucfunnel](../../ads/ucfunnel.md)
-- [Unruly](../../ads/unruly.md)
-- [VMFive](../../ads/vmfive.md)
-- [Webediads](../../ads/webediads.md)
-- [Weborama](../../ads/weborama.md)
-- [Widespace](../../ads/widespace.md)
-- [Wisteria](../../ads/wisteria.md)
-- [WPMedia](../../ads/wpmedia.md)
-- [Xlift](../../ads/xlift.md)
-- [Yahoo](../../ads/yahoo.md)
-- [YahooJP](../../ads/yahoojp.md)
-- [Yandex](../../ads/yandex.md)
-- [Yengo](../../ads/yengo.md)
-- [Yieldbot](../../ads/yieldbot.md)
-- [Yieldmo](../../ads/yieldmo.md)
-- [Yieldone](../../ads/yieldone.md)
-- [Yieldpro](../../ads/yieldpro.md)
-- [Zedo](../../ads/zedo.md)
-- [Zucks](../../ads/zucks.md)
+-   [A8](../../ads/vendors/a8.md)
+-   [A9](../../ads/vendors/a9.md)
+-   [AccessTrade](../../ads/vendors/accesstrade.md)
+-   [Adblade](../../ads/vendors/adblade.md)
+-   [AdButler](../../ads/vendors/adbutler.md)
+-   [Adform](../../ads/vendors/adform.md)
+-   [Adfox](../../ads/vendors/adfox.md)
+-   [Ad Generation](../../ads/vendors/adgeneration.md)
+-   [AdGlare](../../ads/vendors/adglare.md)
+-   [Adhese](../../ads/vendors/adhese.md)
+-   [Adincube](../../ads/vendors/adincube.md)
+-   [ADITION](../../ads/vendors/adition.md)
+-   [Adman](../../ads/vendors/adman.md)
+-   [AdmanMedia](../../ads/vendors/admanmedia.md)
+-   [Admixer](../../ads/vendors/admixer.md)
+-   [Adnuntius](../../ads/vendors/adnuntius.md)
+-   [AdOcean](../../ads/vendors/adocean.md)
+-   [Adop](../../ads/vendors/adop.md)
+-   [AdPicker](../../ads/vendors/adpicker.md)
+-   [AdPlugg](../../ads/vendors/adplugg.md)
+-   [Adpon](../../ads/vendors/adpon.md)
+-   [Adpushup](../../ads/vendors/adpushup.md)
+-   [AdReactor](../../ads/vendors/adreactor.md)
+-   [AdSense](../../ads/google/adsense.md)
+-   [AdSensor](../../ads/vendors/adsensor.md)
+-   [AdServSolutions](../../ads/vendors/adservsolutions.md)
+-   [AdsLoom](../../ads/vendors/adsloom.md)
+-   [AdsNative](../../ads/vendors/adsnative.md)
+-   [AdSpeed](../../ads/vendors/adspeed.md)
+-   [AdSpirit](../../ads/vendors/adspirit.md)
+-   [AdStir](../../ads/vendors/adstir.md)
+-   [AdStyle](../../ads/vendors/adstyle.md)
+-   [AdTech](../../ads/vendors/adtech.md)
+-   [Adtelligent](../../ads/vendors/adtelligent.md)
+-   [AdThrive](../../ads/vendors/adthrive.md)
+-   [AdUnity](../../ads/vendors/adunity.md)
+-   [AdUp Technology](../../ads/vendors/aduptech.md)
+-   [Adventive](../../ads/vendors/adventive.md)
+-   [Adverline](../../ads/vendors/adverline.md)
+-   [Adverticum](../../ads/vendors/adverticum.md)
+-   [AdvertServe](../../ads/vendors/advertserve.md)
+-   [Adyoulike](../../ads/vendors/adyoulike.md)
+-   [Affiliate-B](../../ads/vendors/affiliateb.md)
+-   [AJA](../../ads/vendors/aja.md)
+-   [AMoAd](../../ads/vendors/amoad.md)
+-   [Aniview](../../ads/vendors/aniview.md)
+-   [AnyClip](../../ads/vendors/anyclip.md)
+-   [AppNexus](../../ads/vendors/appnexus.md)
+-   [AppVador](../../ads/vendors/appvador.md)
+-   [Atomx](../../ads/vendors/atomx.md)
+-   [Baidu](../../ads/vendors/baidu.md)
+-   [BeaverAds](../../ads/vendors/beaverads.md)
+-   [BeOpinion](../amp-beopinion/amp-beopinion.md)
+-   [Bidtellect](../../ads/vendors/bidtellect.md)
+-   [Blade](../../ads/vendors/blade.md)
+-   [brainy](../../ads/vendors/brainy.md)
+-   [Broadstreet Ads](../../ads/vendors/broadstreetads.md)
+-   [ByPlay](../../ads/vendors/byplay.md)
+-   [CA A.J.A. Infeed](../../ads/vendors/caajainfeed.md)
+-   [CA-ProFit-X](../../ads/vendors/caprofitx.md)
+-   [Cedato](../../ads/vendors/cedato.md)
+-   [Colombia](../../ads/vendors/colombia.md)
+-   [Connatix](../../ads/vendors/connatix.md)
+-   [Conative](../../ads/vendors/conative.md)
+-   [Content.ad](../../ads/vendors/contentad.md)
+-   [Criteo](../../ads/vendors/criteo.md)
+-   [CSA](../../ads/vendors/csa.md)
+-   [Digiteka](../../ads/vendors/digiteka.md)
+-   [Directadvert](../../ads/vendors/directadvert.md)
+-   [DistroScale](../../ads/vendors/distroscale.md)
+-   [Dot and Media](../../ads/vendors/dotandads.md)
+-   [Doubleclick](../../ads/google/doubleclick.md)
+-   [DynAd](../../ads/vendors/dynad.md)
+-   [eADV](../../ads/vendors/eadv.md)
+-   [E-Planning](../../ads/vendors/eplanning.md)
+-   [Empower](../../ads/vendors/empower.md)
+-   [Ezoic](../../ads/vendors/ezoic.md)
+-   [FeedAd](../../ads/vendors/feedad.md)
+-   [Felmat](../../ads/vendors/felmat.md)
+-   [finative](../../ads/vendors/finative.md)
+-   [FlexOneELEPHANT](../../ads/vendors/f1e.md)
+-   [FlexOneHARRIER](../../ads/vendors/f1h.md)
+-   [Flite](../../ads/vendors/flite.md)
+-   [fluct](../../ads/vendors/fluct.md)
+-   [Fork Media](../../ads/vendors/forkmedia.md)
+-   [FreeWheel](../../ads/vendors/freewheel.md)
+-   [Fusion](../../ads/vendors/fusion.md)
+-   [GenieeSSP](../../ads/vendors/genieessp.md)
+-   [Giraff](../../ads/vendors/giraff.md)
+-   [Glomex](../../ads/vendors/glomex.md)
+-   [GMOSSP](../../ads/vendors/gmossp.md)
+-   [GumGum](../../ads/vendors/gumgum.md)
+-   [Holder](../../ads/vendors/holder.md)
+-   [iBillboard](../../ads/vendors/ibillboard.md)
+-   [I-Mobile](../../ads/vendors/imobile.md)
+-   [Imonomy](../../ads/vendors/imonomy.md)
+-   [Imedia](../../ads/vendors/imedia.md)
+-   [Improve Digital](../../ads/vendors/improvedigital.md)
+-   [Insticator](../../ads/vendors/insticator.md)
+-   [Index Exchange](../../ads/vendors/ix.md)
+-   [Industrybrains](../../ads/vendors/industrybrains.md)
+-   [InMobi](../../ads/vendors/inmobi.md)
+-   [Innity](../../ads/vendors/innity.md)
+-   [Invibes](../../ads/vendors/invibes.md)
+-   [Iprom](../../ads/vendors/iprom.md)
+-   [Kargo](../../ads/vendors/kargo.md)
+-   [Ketshwa](../../ads/vendors/ketshwa.md)
+-   [Kiosked](../../ads/vendors/kiosked.md)
+-   [Kixer](../../ads/vendors/kixer.md)
+-   [Kuadio](../../ads/vendors/kuadio.md)
+-   [Ligatus](../../ads/vendors/ligatus.md)
+-   [LockerDome](../../ads/vendors/lockerdome.md)
+-   [LOGLY](../../ads/vendors/logly.md)
+-   [LOKA](../../ads/vendors/loka.md)
+-   [LuckyAds](../../ads/vendors/luckyads.md)
+-   [Macaw](../../ads/vendors/macaw.md)
+-   [MADS](../../ads/vendors/mads.md)
+-   [MANTIS](../../ads/vendors/mantis.md)
+-   [Mediaad.org](../../ads/vendors/mediaad.md)
+-   [Marfeel](../../ads/vendors/marfeel.md)
+-   [Media.net](../../ads/vendors/medianet.md)
+-   [Mediavine](../../ads/vendors/mediavine.md)
+-   [Medyanet](../../ads/vendors/medyanet.md)
+-   [Meg](../../ads/vendors/meg.md)
+-   [MicroAd](../../ads/vendors/microad.md)
+-   [MixiMedia](../../ads/vendors/miximedia.md)
+-   [Mixpo](../../ads/vendors/mixpo.md)
+-   [Monetizer101](../../ads/vendors/monetizer101.md)
+-   [mox](../../ads/vendors/mox.md)
+-   [my6Sense](../../ads/vendors/my6sense.md)
+-   [myFinance](../../ads/vendors/myfinance.md)
+-   [MyOffrz](../../ads/vendors/myoffrz.md)
+-   [myTarget](../../ads/vendors/mytarget.md)
+-   [myWidget](../../ads/vendors/mywidget.md)
+-   [NativeRoll](../../ads/vendors/nativeroll.md)
+-   [Nativery](../../ads/vendors/nativery.md)
+-   [Nativo](../../ads/vendors/nativo.md)
+-   [Navegg](../../ads/vendors/navegg.md)
+-   [Nend](../../ads/vendors/nend.md)
+-   [NETLETIX](../../ads/vendors/netletix.md)
+-   [Noddus](../../ads/vendors/noddus.md)
+-   [Nokta](../../ads/vendors/nokta.md)
+-   [Newsroom AI](../../ads/vendors/nws.md)
+-   [Oblivki](../../ads/vendors/oblivki.md)
+-   [OneAD](../../ads/vendors/onead.md)
+-   [OnNetwork](../../ads/vendors/onnetwork.md)
+-   [Open AdStream (OAS)](../../ads/vendors/openadstream.md)
+-   [OpenX](../../ads/vendors/openx.md)
+-   [opinary](../../ads/vendors/opinary.md)
+-   [Pixels](../../ads/vendors/pixels.md)
+-   [plista](../../ads/vendors/plista.md)
+-   [polymorphicAds](../../ads/vendors/polymorphicads.md)
+-   [popin](../../ads/vendors/popin.md)
+-   [PPStudio](../../ads/vendors/ppstudio.md)
+-   [Pressboard](../../ads/vendors/pressboard.md)
+-   [PromoteIQ](../../ads/vendors/promoteiq.md)
+-   [PubGuru](../../ads/vendors/pubguru.md)
+-   [PubMatic](../../ads/vendors/pubmatic.md)
+-   [Pubmine](../../ads/vendors/pubmine.md)
+-   [Pulse](../../ads/vendors/pulse.md)
+-   [PulsePoint](../../ads/vendors/pulsepoint.md)
+-   [PuffNetwork](../../ads/vendors/puffnetwork.md)
+-   [Purch](../../ads/vendors/purch.md)
+-   [Rakuten Unified Ads](../../ads/vendors/rakutenunifiedads.md)
+-   [Rambler&Co](../../ads/vendors/capirs.md)
+-   [RbInfoxSg](../../ads/vendors/rbinfox.md)
+-   [Rcmwidget](../../ads/vendors/rcmwidget.md)
+-   [Realclick](../../ads/vendors/realclick.md)
+-   [recomAD](../../ads/vendors/recomad.md)
+-   [recreativ](../../ads/vendors/recreativ.md)
+-   [Red for Publishers](../../ads/vendors/rfp.md)
+-   [Relap](../../ads/vendors/relap.md)
+-   [RelapPro](../../ads/vendors/relappro.md)
+-   [Remixd](../../ads/vendors/remixd.md)
+-   [Revcontent](../../ads/vendors/revcontent.md)
+-   [RevJet](../../ads/vendors/revjet.md)
+-   [rnetplus](../../ads/vendors/rnetplus.md)
+-   [Rubicon Project](../../ads/vendors/rubicon.md)
+-   [RUNative](../../ads/vendors/runative.md)
+-   [SAS CI 360 Match](../../ads/vendors/sas.md)
+-   [Seeding Alliance](../../ads/vendors/seedingalliance.md)
+-   [Sekindo](../../ads/vendors/sekindo.md)
+-   [Sharethrough](../../ads/vendors/sharethrough.md)
+-   [SHE Media](../../ads/vendors/shemedia.md)
+-   [Sklik](../../ads/vendors/sklik.md)
+-   [SSP](../../ads/vendors/ssp.md)
+-   [SlimCut Media](../../ads/vendors/slimcutmedia.md)
+-   [Smart AdServer](../../ads/vendors/smartadserver.md)
+-   [smartclip](../../ads/vendors/smartclip.md)
+-   [SmileWanted](../../ads/vendors/smilewanted.md)
+-   [sogou Ad](../../ads/vendors/sogouad.md)
+-   [Sortable](../../ads/vendors/sortable.md)
+-   [SOVRN](../../ads/vendors/sovrn.md)
+-   [Speakol](../../ads/vendors/speakol.md)
+-   [SpotX](../../ads/vendors/spotx.md)
+-   [SpringAds](../../ads/vendors/springAds.md)
+-   [Sulvo](../../ads/vendors/sulvo.md)
+-   [SunMedia](../../ads/vendors/sunmedia.md)
+-   [Swoop](../../ads/vendors/swoop.md)
+-   [TcsEmotion](../../ads/vendors/tcsemotion.md)
+-   [Teads](../../ads/vendors/teads.md)
+-   [torimochi](../../ads/vendors/torimochi.md)
+-   [Tracdelight](../../ads/vendors/tracdelight.md)
+-   [TripleLift](../../ads/vendors/triplelift.md)
+-   [Trugaze](../../ads/vendors/trugaze.md)
+-   [UZOU](../../ads/vendors/uzou.md)
+-   [ValueCommerce](../../ads/vendors/valuecommerce.md)
+-   [video intelligence](../../ads/vendors/videointelligence.md)
+-   [Videonow](../../ads/vendors/videonow.md)
+-   [Viralize](../../ads/vendors/viralize.md)
+-   [UAS](../../ads/vendors/uas.md)
+-   [ucfunnel](../../ads/vendors/ucfunnel.md)
+-   [Unruly](../../ads/vendors/unruly.md)
+-   [VMFive](../../ads/vendors/vmfive.md)
+-   [Webediads](../../ads/vendors/webediads.md)
+-   [Weborama](../../ads/vendors/weborama.md)
+-   [Widespace](../../ads/vendors/widespace.md)
+-   [Wisteria](../../ads/vendors/wisteria.md)
+-   [WPMedia](../../ads/vendors/wpmedia.md)
+-   [Xlift](../../ads/vendors/xlift.md)
+-   [Yahoo](../../ads/vendors/yahoo.md)
+-   [YahooJP](../../ads/vendors/yahoojp.md)
+-   [Yandex](../../ads/vendors/yandex.md)
+-   [Yektanet](../../ads/vendors/yektanet.md)
+-   [Yengo](../../ads/vendors/yengo.md)
+-   [Yieldbot](../../ads/vendors/yieldbot.md)
+-   [Yieldmo](../../ads/vendors/yieldmo.md)
+-   [Yieldone](../../ads/vendors/yieldone.md)
+-   [Yieldpro](../../ads/vendors/yieldpro.md)
+-   [Zedo](../../ads/vendors/zedo.md)
+-   [Zucks](../../ads/vendors/zucks.md)
 
 ## Supported embed types
 
-- [1wo](../../ads/1wo.md)
-- [24smi](../../ads/24smi.md)
-- [AdsLoom](../../ads/adsloom.md)
-- [Bringhub](../../ads/bringhub.md)
-- [Dable](../../ads/dable.md)
-- [Engageya](../../ads/engageya.md)
-- [Epeex](../../ads/epeex.md)
-- [Insticator](../../ads/insticator.md)
-- [Jubna](../../ads/jubna.md)
-- [Outbrain](../../ads/outbrain.md)
-- [Postquare](../../ads/postquare.md)
-- [PubExchange](../../ads/pubexchange.md)
-- [ReadMo](../../ads/readmo.md)
-- [Smi2](../../ads/smi2.md)
-- [SVK-Native](../../ads/svknative.md)
-- [Strossle](../../ads/strossle.md)
-- [Taboola](../../ads/taboola.md)
-- [TE Medya](../../ads/temedya.md)
-- [Whopa InFeed](../../ads/whopainfeed.md)
-- [Yahoo Native-Display Ads Federation](../../ads/yahoofedads.md)
-- [Yahoo Native Ads](../../ads/yahoonativeads.md)
-- [Zen](../../ads/zen.md)
-- [ZergNet](../../ads/zergnet.md)
+-   [1wo](../../ads/vendors/1wo.md)
+-   [24smi](../../ads/vendors/24smi.md)
+-   [AdsLoom](../../ads/vendors/adsloom.md)
+-   [Bringhub](../../ads/vendors/bringhub.md)
+-   [Dable](../../ads/vendors/dable.md)
+-   [Engageya](../../ads/vendors/engageya.md)
+-   [Epeex](../../ads/vendors/epeex.md)
+-   [Idealmedia](../../ads/vendors/idealmedia.md)
+-   [Insticator](../../ads/vendors/insticator.md)
+-   [Jubna](../../ads/vendors/jubna.md)
+-   [Lentainform](../../ads/vendors/lentainform.md)
+-   [Mgid](../../ads/vendors/mgid.md)
+-   [Outbrain](../../ads/vendors/outbrain.md)
+-   [Postquare](../../ads/vendors/postquare.md)
+-   [PubExchange](../../ads/vendors/pubexchange.md)
+-   [ReadMo](../../ads/vendors/readmo.md)
+-   [Smi2](../../ads/vendors/smi2.md)
+-   [SVK-Native](../../ads/vendors/svknative.md)
+-   [Strossle](../../ads/vendors/strossle.md)
+-   [Taboola](../../ads/vendors/taboola.md)
+-   [TE Medya](../../ads/vendors/temedya.md)
+-   [vlyby](../../ads/vendors/vlyby.md)
+-   [Whopa InFeed](../../ads/vendors/whopainfeed.md)
+-   [Yahoo Native-Display Ads Federation](../../ads/vendors/yahoofedads.md)
+-   [Yahoo Native Ads](../../ads/vendors/yahoonativeads.md)
+-   [Zen](../../ads/vendors/zen.md)
+-   [ZergNet](../../ads/vendors/zergnet.md)
diff --git a/extensions/amp-ad/validator-amp-ad.protoascii b/extensions/amp-ad/validator-amp-ad.protoascii
index 52d5cfa406855..3c6f41fd0cc30 100644
--- a/extensions/amp-ad/validator-amp-ad.protoascii
+++ b/extensions/amp-ad/validator-amp-ad.protoascii
@@ -33,7 +33,7 @@ tags: {  # amp-ad
   # Typically the extension_spec takes care of this, but we have
   # a unique situation where we need to refer to this earlier in
   # the rules processing for the also_requires_tag_warning below.
-  spec_name: "amp-ad extension .js script"
+  spec_name: "amp-ad extension script"
   extension_spec: {
     name: "amp-ad"
     version: "0.1"
@@ -47,7 +47,7 @@ tags: {  # <amp-ad>
   html_format: AMP  # Ads are not allowed inside ads
   tag_name: "AMP-AD"
   requires_extension: "amp-ad"  # See note at top of file
-  also_requires_tag_warning: "amp-ad extension .js script"
+  also_requires_tag_warning: "amp-ad extension script"
   # If modifying disallowed_ancestors, then please also edit
   # extensions/amp-auto-ads/*/placement.js
   disallowed_ancestor: "AMP-APP-BANNER"
@@ -64,8 +64,11 @@ tags: {  # <amp-ad>
   }
   attrs: { name: "template" }
   attrs: { name: "type" mandatory: true }
+  attrs: { name: "sticky" value: "" }
+  attrs: { name: "always-serve-npa" }
+  attrs: { name: "block-rtc" }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-ad"
+  spec_url: "https://amp.dev/documentation/components/amp-ad/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
@@ -82,7 +85,7 @@ tags: {  # <amp-ad type="custom">
   tag_name: "AMP-AD"
   spec_name: "amp-ad with type=custom"
   requires_extension: "amp-ad"  # See note at top of file
-  also_requires_tag_warning: "amp-ad extension .js script"
+  also_requires_tag_warning: "amp-ad extension script"
   # If modifying disallowed_ancestors, then please also edit
   # extensions/amp-auto-ads/*/placement.js
   disallowed_ancestor: "AMP-APP-BANNER"
@@ -101,7 +104,7 @@ tags: {  # <amp-ad type="custom">
     dispatch_key: NAME_VALUE_DISPATCH
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://github.com/ampproject/amphtml/blob/master/ads/custom.md"
+  spec_url: "https://github.com/ampproject/amphtml/blob/main/ads/custom.md"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
@@ -118,7 +121,7 @@ tags: {  # <amp-ad data-multi-size>
   tag_name: "AMP-AD"
   spec_name: "amp-ad with data-multi-size attribute"
   requires_extension: "amp-ad"  # See note at top of file
-  also_requires_tag_warning: "amp-ad extension .js script"
+  also_requires_tag_warning: "amp-ad extension script"
   # If modifying disallowed_ancestors, then please also edit
   # extensions/amp-auto-ads/*/placement.js
   disallowed_ancestor: "AMP-APP-BANNER"
@@ -145,9 +148,11 @@ tags: {  # <amp-ad data-multi-size>
     }
     disallowed_value_regex: "__amp_source_origin"
   }
+  attrs: { name: "always-serve-npa" }
+  attrs: { name: "block-rtc" }
   attrs: { name: "type" mandatory: true }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-ad"
+  spec_url: "https://amp.dev/documentation/components/amp-ad/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
@@ -165,7 +170,7 @@ tags: {  # <amp-ad data-enable-refresh>
   tag_name: "AMP-AD"
   spec_name: "amp-ad with data-enable-refresh attribute"
   requires_extension: "amp-ad"  # See note at top of file
-  also_requires_tag_warning: "amp-ad extension .js script"
+  also_requires_tag_warning: "amp-ad extension script"
   # If modifying disallowed_ancestors, then please also edit
   # extensions/amp-auto-ads/*/placement.js
   disallowed_ancestor: "AMP-APP-BANNER"
@@ -191,7 +196,7 @@ tags: {  # <amp-ad data-enable-refresh>
   }
   attrs: { name: "type" mandatory: true }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-ad"
+  spec_url: "https://amp.dev/documentation/components/amp-ad/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
@@ -208,7 +213,7 @@ tags: {  # <amp-embed>
   html_format: AMP
   tag_name: "AMP-EMBED"
   requires_extension: "amp-ad"  # See note at top of file
-  also_requires_tag_warning: "amp-ad extension .js script"
+  also_requires_tag_warning: "amp-ad extension script"
   disallowed_ancestor: "AMP-APP-BANNER"
   attrs: { name: "alt" }
   attrs: { name: "json" }
@@ -222,8 +227,10 @@ tags: {  # <amp-embed>
     disallowed_value_regex: "__amp_source_origin"
   }
   attrs: { name: "type" mandatory: true }
+  attrs: { name: "always-serve-npa" }
+  attrs: { name: "block-rtc" }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-ad"
+  spec_url: "https://amp.dev/documentation/components/amp-ad/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
@@ -240,7 +247,7 @@ tags: {  # <amp-embed data-multi-size>
   tag_name: "AMP-EMBED"
   spec_name: "amp-embed with data-multi-size attribute"
   requires_extension: "amp-ad"  # See note at top of file
-  also_requires_tag_warning: "amp-ad extension .js script"
+  also_requires_tag_warning: "amp-ad extension script"
   disallowed_ancestor: "AMP-APP-BANNER"
   # amp-embed elements cannot be both children of an amp ad container and have
   # data-multi-size attribute.
@@ -257,6 +264,8 @@ tags: {  # <amp-embed data-multi-size>
   }
   attrs: { name: "json" }
   attrs: { name: "rtc-config" }
+  attrs: { name: "always-serve-npa" }
+  attrs: { name: "block-rtc" }
   attrs: {
     name: "src"
     value_url: {
@@ -267,7 +276,7 @@ tags: {  # <amp-embed data-multi-size>
   }
   attrs: { name: "type" mandatory: true }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-ad"
+  spec_url: "https://amp.dev/documentation/components/amp-ad/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-addthis/0.1/addthis-utils/classify.js b/extensions/amp-addthis/0.1/addthis-utils/classify.js
index 3ba52e4ddc934..1363e9d8132d9 100644
--- a/extensions/amp-addthis/0.1/addthis-utils/classify.js
+++ b/extensions/amp-addthis/0.1/addthis-utils/classify.js
@@ -16,7 +16,6 @@
 import {RE_NONALPHA, RE_WHITESPACE} from '../constants';
 import {getDetailsForMeta} from './meta';
 import {rot13Array} from './rot13';
-import {startsWith} from '../../../../src/string';
 
 const MAX_KEYWORD_LENGTH = 200;
 const PORN_BIT = 0x1;
@@ -26,8 +25,8 @@ const REFERRER_BITS = {
   ON_DOMAIN: 0x2,
   OFF_DOMAIN: 0x4,
 };
-// eslint-disable-next-line max-len
-const RE_SEARCH_TERMS = /^(?:q|search|bs|wd|p|kw|keyword|query|qry|querytext|text|searchcriteria|searchstring|searchtext|sp_q)=(.*)/i;
+const RE_SEARCH_TERMS =
+  /^(?:q|search|bs|wd|p|kw|keyword|query|qry|querytext|text|searchcriteria|searchstring|searchtext|sp_q)=(.*)/i;
 const RE_SEARCH_REFERRER = /ws\/results\/(web|images|video|news)/;
 const RE_SEARCH_GOOGLE = /google.*\/(search|url|aclk|m\?)/;
 const RE_SEARCH_AOL = /aol.*\/aol/;
@@ -168,24 +167,25 @@ const isSearchUrl = (url = '') => {
   return (
     lowerUrl.indexOf('addthis') === -1 &&
     (RE_SEARCH_GOOGLE.test(lowerUrl) ||
-    RE_SEARCH_AOL.test(lowerUrl) /* search.aol.* /aol/search?q=*/ ||
-    lowerUrl.indexOf('/pagead/aclk?') > -1 /*googleadservices*/ ||
-    lowerUrl.indexOf(com + 'url') > -1 /*bing*/ ||
-    lowerUrl.indexOf(com + 'l.php') > -1 /*facebook graph search*/ ||
-    lowerUrl.indexOf('/search?') > -1 /* many */ ||
-    lowerUrl.indexOf('/search/?') > -1 /* a few */ ||
-    lowerUrl.indexOf('search?') > -1 /*yandex.ru, and presumably others*/ ||
-    lowerUrl.indexOf('yandex.ru/clck/jsredir?') > -1 /*yandex, no one else */ ||
-    lowerUrl.indexOf(com + 'search') >
-      -1 /* yahoo (including yahoo int'l), many others */ ||
-    lowerUrl.indexOf(org + 'search') > -1 /*many .org searches*/ ||
-    lowerUrl.indexOf('/search.html?') > -1 /* a few */ ||
-    lowerUrl.indexOf('search/results.') > -1 /*cars.com, gmc.com*/ ||
-    lowerUrl.indexOf(com + 's?bs') > -1 /*baidu*/ ||
-    lowerUrl.indexOf(com + 's?wd') > -1 /*baidu*/ ||
-    lowerUrl.indexOf(com + 'mb?search') > -1 /*manta*/ ||
-    lowerUrl.indexOf(com + 'mvc/search') > -1 /*eonline*/ ||
-    lowerUrl.indexOf(com + 'web') > -1 /*ask.com (same in .ca), altavista*/ ||
+      RE_SEARCH_AOL.test(lowerUrl) /* search.aol.* /aol/search?q=*/ ||
+      lowerUrl.indexOf('/pagead/aclk?') > -1 /*googleadservices*/ ||
+      lowerUrl.indexOf(com + 'url') > -1 /*bing*/ ||
+      lowerUrl.indexOf(com + 'l.php') > -1 /*facebook graph search*/ ||
+      lowerUrl.indexOf('/search?') > -1 /* many */ ||
+      lowerUrl.indexOf('/search/?') > -1 /* a few */ ||
+      lowerUrl.indexOf('search?') > -1 /*yandex.ru, and presumably others*/ ||
+      lowerUrl.indexOf('yandex.ru/clck/jsredir?') >
+        -1 /*yandex, no one else */ ||
+      lowerUrl.indexOf(com + 'search') >
+        -1 /* yahoo (including yahoo int'l), many others */ ||
+      lowerUrl.indexOf(org + 'search') > -1 /*many .org searches*/ ||
+      lowerUrl.indexOf('/search.html?') > -1 /* a few */ ||
+      lowerUrl.indexOf('search/results.') > -1 /*cars.com, gmc.com*/ ||
+      lowerUrl.indexOf(com + 's?bs') > -1 /*baidu*/ ||
+      lowerUrl.indexOf(com + 's?wd') > -1 /*baidu*/ ||
+      lowerUrl.indexOf(com + 'mb?search') > -1 /*manta*/ ||
+      lowerUrl.indexOf(com + 'mvc/search') > -1 /*eonline*/ ||
+      lowerUrl.indexOf(com + 'web') > -1 /*ask.com (same in .ca), altavista*/ ||
       lowerUrl.indexOf('hotbot' + com) > -1) /*hotbot*/
   );
 };
@@ -202,7 +202,7 @@ export const classifyPage = (pageInfo, metaElements) => {
     classifyString(pageInfo.title) | classifyString(pageInfo.hostname, true);
 
   metaElements.forEach((metaElement) => {
-    const {name, content} = getDetailsForMeta(metaElement);
+    const {content, name} = getDetailsForMeta(metaElement);
 
     if (name === 'description' || name === 'keywords') {
       bitmask |= classifyString(content);
@@ -270,9 +270,9 @@ export const isProductPage = (doc, metaElements) => {
 
   // see if 'og:type' meta tag === 'product'
   const ogTags = metaElements.reduce((tags, metaElement) => {
-    const {name, content} = getDetailsForMeta(metaElement);
+    const {content, name} = getDetailsForMeta(metaElement);
 
-    if (startsWith(name, 'og:')) {
+    if (name.startsWith('og:')) {
       const ogProperty = name.split(':').pop();
       tags[ogProperty] = content;
     }
diff --git a/extensions/amp-addthis/0.1/addthis-utils/eng.js b/extensions/amp-addthis/0.1/addthis-utils/eng.js
index 28c7599d22d5f..6ef093eb7038c 100644
--- a/extensions/amp-addthis/0.1/addthis-utils/eng.js
+++ b/extensions/amp-addthis/0.1/addthis-utils/eng.js
@@ -17,7 +17,7 @@ import {API_SERVER} from '../constants';
 import {Services} from '../../../../src/services';
 
 import {addParamsToUrl} from '../../../../src/url';
-import {dict} from '../../../../src/utils/object';
+import {dict} from '../../../../src/core/types/object';
 import {getSessionId} from './session';
 import {pixelDrop} from './pixel';
 
@@ -27,14 +27,10 @@ import {pixelDrop} from './pixel';
  * @return {{al: (string|undefined), amp: number, dc: number, dp: string, dt: string, fp: string, ict: string, ivh: number, pct: number, pfm: number, ph: number, pub: string, sh: number, sid: string}}
  */
 const getEngData = (params) => {
-  const {monitors, loc, ampDoc, pubId} = params;
-  const {
-    dwellMonitor,
-    scrollMonitor,
-    clickMonitor,
-    activeToolsMonitor,
-  } = monitors;
-  const {host, pathname, hash} = loc;
+  const {ampDoc, loc, monitors, pubId} = params;
+  const {activeToolsMonitor, clickMonitor, dwellMonitor, scrollMonitor} =
+    monitors;
+  const {hash, host, pathname} = loc;
   const viewport = Services.viewportForDoc(ampDoc);
 
   return {
diff --git a/extensions/amp-addthis/0.1/addthis-utils/get-widget-id-overloaded-with-json-for-anonymous-mode.js b/extensions/amp-addthis/0.1/addthis-utils/get-widget-id-overloaded-with-json-for-anonymous-mode.js
index 92cc21ba8a878..ec9d6186faec2 100644
--- a/extensions/amp-addthis/0.1/addthis-utils/get-widget-id-overloaded-with-json-for-anonymous-mode.js
+++ b/extensions/amp-addthis/0.1/addthis-utils/get-widget-id-overloaded-with-json-for-anonymous-mode.js
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {dict} from '../../../../src/utils/object';
+import {dict} from '../../../../src/core/types/object';
 
 const overrideKeys = [
   'backgroundColor',
diff --git a/extensions/amp-addthis/0.1/addthis-utils/lojson.js b/extensions/amp-addthis/0.1/addthis-utils/lojson.js
index 477ca727e8e83..8abab5205df54 100644
--- a/extensions/amp-addthis/0.1/addthis-utils/lojson.js
+++ b/extensions/amp-addthis/0.1/addthis-utils/lojson.js
@@ -27,11 +27,11 @@ import {
   getFragmentId,
   getServiceFromUrlFragment,
 } from './fragment';
-import {dict} from '../../../../src/utils/object';
+import {dict} from '../../../../src/core/types/object';
 import {getMetaElements} from './meta';
 import {getSessionId} from './session';
 import {parseUrlDeprecated} from '../../../../src/url';
-import {toArray} from '../../../../src/types';
+import {toArray} from '../../../../src/core/types/array';
 
 const VIEW_EVENT_CHANNEL = 100;
 const nonTrackedDomainMatcher = /\.gov|\.mil/;
@@ -76,8 +76,8 @@ let AtConfigDef;
  * @return {!JsonObject}
  */
 export function getLojsonData(jsonData) {
-  const {loc, title, pubId, atConfig, referrer, ampDoc} = jsonData;
-  const {href, hostname, host, search, pathname, hash, protocol, port} = loc;
+  const {ampDoc, atConfig, loc, pubId, referrer, title} = jsonData;
+  const {hash, host, hostname, href, pathname, port, protocol, search} = loc;
   const pageInfo = {
     du: href.split('#').shift(),
     hostname,
diff --git a/extensions/amp-addthis/0.1/addthis-utils/mode.js b/extensions/amp-addthis/0.1/addthis-utils/mode.js
index d96104014052a..3d0a753d4c18b 100644
--- a/extensions/amp-addthis/0.1/addthis-utils/mode.js
+++ b/extensions/amp-addthis/0.1/addthis-utils/mode.js
@@ -28,7 +28,7 @@
  * @return {number} -1 indicates an error has occurred
  */
 export function getAddThisMode(_) {
-  const {hasPubId, hasWidgetId, hasProductCode} = getAddThisModeObject(_);
+  const {hasProductCode, hasPubId, hasWidgetId} = getAddThisModeObject(_);
   if (hasPubId) {
     if (hasWidgetId && !hasProductCode) {
       return 1;
@@ -50,7 +50,7 @@ export function getAddThisMode(_) {
  * }}
  */
 export function getAddThisModeObject(mode) {
-  const {pubId, widgetId, productCode} = mode;
+  const {productCode, pubId, widgetId} = mode;
   const hasPubId = isPubId(pubId);
   // widget ids are 4-character strings with lower-case letters and numbers only
   const hasWidgetId = isWidgetId(widgetId);
diff --git a/extensions/amp-addthis/0.1/addthis-utils/pixel.js b/extensions/amp-addthis/0.1/addthis-utils/pixel.js
index 569d91ea4fd3c..41f212ec8a98b 100644
--- a/extensions/amp-addthis/0.1/addthis-utils/pixel.js
+++ b/extensions/amp-addthis/0.1/addthis-utils/pixel.js
@@ -17,10 +17,10 @@ import {COOKIELESS_API_SERVER} from '../constants';
 import {Services} from '../../../../src/services';
 import {addParamsToUrl, parseUrlDeprecated} from '../../../../src/url';
 import {createElementWithAttributes} from '../../../../src/dom';
-import {dict} from '../../../../src/utils/object';
+import {dict} from '../../../../src/core/types/object';
 import {getData} from '../../../../src/event-helper';
-import {isObject} from '../../../../src/types';
-import {parseJson} from '../../../../src/json';
+import {isObject} from '../../../../src/core/types';
+import {parseJson} from '../../../../src/core/types/object/json';
 
 import {setStyles, toggle} from '../../../../src/style';
 
@@ -134,7 +134,7 @@ const dropPixelatorPixel = (url, ampDoc) => {
  * @param  {{sid: string, ampDoc: *}} options
  */
 const dropPixelGroups = (pixels, options) => {
-  const {sid, ampDoc} = options;
+  const {ampDoc, sid} = options;
   const pixelGroups = groupPixelsByTime(pixels);
   pixelGroups.forEach((pixelGroup) => {
     const {delay, pixels} = pixelGroup;
diff --git a/extensions/amp-addthis/0.1/addthis-utils/pjson.js b/extensions/amp-addthis/0.1/addthis-utils/pjson.js
index ce250823f0397..7738cd19946aa 100644
--- a/extensions/amp-addthis/0.1/addthis-utils/pjson.js
+++ b/extensions/amp-addthis/0.1/addthis-utils/pjson.js
@@ -20,7 +20,7 @@ import {classifyPage, classifyReferrer, getKeywordsString} from './classify';
 import {getMetaElements} from './meta';
 import {getSessionId} from './session';
 import {parseUrlDeprecated} from '../../../../src/url';
-import {toArray} from '../../../../src/types';
+import {toArray} from '../../../../src/core/types/array';
 
 // "gen" value for shares
 const SHARE = 300;
@@ -37,8 +37,8 @@ const SHARE = 300;
  * @return {{amp: number, cb: number, dc: number, dest: *, gen: number, mk: string, pub: *, rb: number, sid, url}}
  */
 const getPjsonData = (pjson) => {
-  const {loc, referrer, title, ampDoc, pubId, data} = pjson;
-  const {href, hostname, search, pathname, hash, protocol, port} = loc;
+  const {ampDoc, data, loc, pubId, referrer, title} = pjson;
+  const {hash, hostname, href, pathname, port, protocol, search} = loc;
   /** @typedef {{
    * du: string,
    * hostname: string,
diff --git a/extensions/amp-addthis/0.1/amp-addthis.js b/extensions/amp-addthis/0.1/amp-addthis.js
index 2ccb457be94bc..1c2d29389fe03 100644
--- a/extensions/amp-addthis/0.1/amp-addthis.js
+++ b/extensions/amp-addthis/0.1/amp-addthis.js
@@ -56,7 +56,7 @@ import {callEng} from './addthis-utils/eng';
 import {callLojson} from './addthis-utils/lojson';
 import {callPjson} from './addthis-utils/pjson';
 import {createElementWithAttributes, removeElement} from '../../../src/dom';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {
   getAddThisMode,
   isProductCode,
@@ -120,7 +120,7 @@ class AmpAddThis extends AMP.BaseElement {
     /** @private {string} */
     this.referrer_ = '';
 
-    /** @private {(?JsonObject<string, string>|null)} */
+    /** @private {?JsonObject<string, string>} */
     this.shareConfig_ = null;
 
     /** @private {(?JsonObject)} */
@@ -403,13 +403,18 @@ class AmpAddThis extends AMP.BaseElement {
     }, {});
   }
 
+  /**
+   * @typedef {{
+   *   ampdoc: !../../../src/service/ampdoc-impl.AmpDoc,
+   *   loc: *,
+   *   pubId: *,
+   * }} SetupListenersInput
+   */
+
   /**
    * Sets up listeners.
    *
-   * @param {!Object} input
-   * @param {!../../../src/service/ampdoc-impl.AmpDoc} [input.ampdoc]
-   * @param {*} [input.loc]
-   * @param {*} [input.pubId]
+   * @param {!SetupListenersInput} input
    * @memberof AmpAddThis
    */
   setupListeners_(input) {
diff --git a/extensions/amp-addthis/0.1/config-manager.js b/extensions/amp-addthis/0.1/config-manager.js
index cb8dc7001b757..317b9d155f5f8 100644
--- a/extensions/amp-addthis/0.1/config-manager.js
+++ b/extensions/amp-addthis/0.1/config-manager.js
@@ -16,7 +16,7 @@
 import {CONFIGURATION_EVENT, ORIGIN} from './constants';
 import {getAddThisMode} from './addthis-utils/mode';
 
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 
 /**
  * Configuration request status enum.
@@ -91,12 +91,12 @@ export class ConfigManager {
 
     iframeData.forEach((iframeDatum) => {
       const {
-        iframe,
-        widgetId,
-        shareConfig,
         atConfig,
-        productCode,
         containerClassName,
+        iframe,
+        productCode,
+        shareConfig,
+        widgetId,
       } = iframeDatum;
       this.sendConfiguration_({
         iframe,
@@ -111,31 +111,34 @@ export class ConfigManager {
   }
 
   /**
-   * @param {!Object} input
-   * @param {*} [input.iframe]
-   * @param {string} [input.widgetId]
-   * @param {string} [input.pubId]
-   * @param {!Object} [input.shareConfig]
-   * @param {!Object} [input.atConfig]
-   * @param {string} [input.productCode]
-   * @param {string} [input.containerClassName]
+   * @typedef {{
+   *  iframe: *,
+   *  widgetId: string,
+   *  pubId: string,
+   *  shareConfig: !Object,
+   *  atConfig: !Object,
+   *  productCode: string,
+   *  containerClassName: string,
+   * }} SendConfigurationInput
+   */
+
+  /**
+   * @param {!SendConfigurationInput} input
    * @private
    */
   sendConfiguration_(input) {
     const {
+      atConfig,
+      containerClassName,
       iframe,
-      widgetId,
+      productCode,
       pubId,
       shareConfig,
-      atConfig,
-      productCode,
-      containerClassName,
+      widgetId,
     } = input;
     const pubData = this.dataForPubId_[pubId];
-    const {
-      config: dashboardConfig,
-      requestStatus: configRequestStatus,
-    } = pubData;
+    const {config: dashboardConfig, requestStatus: configRequestStatus} =
+      pubData;
     const jsonToSend = dict({
       'event': CONFIGURATION_EVENT,
       'shareConfig': shareConfig,
@@ -206,15 +209,15 @@ export class ConfigManager {
    */
   register(config) {
     const {
-      pubId,
-      widgetId,
-      productCode,
+      activeToolsMonitor,
+      atConfig,
       containerClassName,
       iframe,
       iframeLoadPromise,
+      productCode,
+      pubId,
       shareConfig,
-      atConfig,
-      activeToolsMonitor,
+      widgetId,
     } = config;
     if (!this.activeToolsMonitor_) {
       this.activeToolsMonitor_ = activeToolsMonitor;
@@ -261,7 +264,7 @@ export class ConfigManager {
    * @param {{pubId:string, iframe:Element}} param
    */
   unregister(param) {
-    const {pubId, iframe} = param;
+    const {iframe, pubId} = param;
     this.configProviderIframes_ = this.configProviderIframes_.filter(
       (providerFrame) => providerFrame !== iframe
     );
diff --git a/extensions/amp-addthis/0.1/post-message-dispatcher.js b/extensions/amp-addthis/0.1/post-message-dispatcher.js
index b22b99db253b3..ea1e0a5b0a17d 100644
--- a/extensions/amp-addthis/0.1/post-message-dispatcher.js
+++ b/extensions/amp-addthis/0.1/post-message-dispatcher.js
@@ -16,10 +16,8 @@
 
 import {CONFIGURATION_EVENT, ORIGIN, SHARE_EVENT} from './constants';
 import {getData} from '../../../src/event-helper';
-import {isObject} from '../../../src/types';
-import {startsWith} from '../../../src/string';
-
-import {tryParseJson} from '../../../src/json';
+import {isObject} from '../../../src/core/types';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 export class PostMessageDispatcher {
   /**
@@ -68,7 +66,7 @@ export class PostMessageDispatcher {
       return /** @type {!JsonObject} */ (data);
     }
 
-    if (typeof data === 'string' && startsWith(data, '{')) {
+    if (typeof data === 'string' && data.startsWith('{')) {
       return tryParseJson(data);
     }
 
diff --git a/extensions/amp-addthis/0.1/test/addthis-utils/test-fragment.js b/extensions/amp-addthis/0.1/test/addthis-utils/test-fragment.js
index 5451f1f3f3433..48ffd24a214e3 100644
--- a/extensions/amp-addthis/0.1/test/addthis-utils/test-fragment.js
+++ b/extensions/amp-addthis/0.1/test/addthis-utils/test-fragment.js
@@ -16,7 +16,7 @@
 
 import {clearOurFragment} from '../../addthis-utils/fragment';
 
-describe('fragment', () => {
+describes.sandboxed('fragment', {}, () => {
   it('clears AddThis fragments from an url', () => {
     let url =
       'http://www.example.com/2012-07-25?utm_campaign=linkedin-Share-Web#at_pco=cfd-1.0';
diff --git a/extensions/amp-addthis/0.1/test/addthis-utils/test-rot13.js b/extensions/amp-addthis/0.1/test/addthis-utils/test-rot13.js
index 15ad4148101fe..b3d901224dd65 100644
--- a/extensions/amp-addthis/0.1/test/addthis-utils/test-rot13.js
+++ b/extensions/amp-addthis/0.1/test/addthis-utils/test-rot13.js
@@ -16,7 +16,7 @@
 
 import {rot13Array} from '../../addthis-utils/rot13';
 
-describe('rot13', () => {
+describes.sandboxed('rot13', {}, () => {
   it('should properly rotate alphabetical characters', () => {
     const expected = [
       '',
diff --git a/extensions/amp-addthis/0.1/test/test-amp-addthis.js b/extensions/amp-addthis/0.1/test/test-amp-addthis.js
index 0b87b149f5a86..33a02040dde8f 100644
--- a/extensions/amp-addthis/0.1/test/test-amp-addthis.js
+++ b/extensions/amp-addthis/0.1/test/test-amp-addthis.js
@@ -19,7 +19,7 @@ import {ConfigManager} from '../config-manager';
 
 import {createCUID, isDateInFuture} from '../addthis-utils/cuid';
 import {createElementWithAttributes} from '../../../../src/dom';
-import {dict} from '../../../../src/utils/object';
+import {dict} from '../../../../src/core/types/object';
 import {
   getAddThisMode,
   isProductCode,
@@ -31,8 +31,7 @@ import {getDetailsForMeta, getMetaElements} from './../addthis-utils/meta';
 import {getKeywordsString} from './../addthis-utils/classify';
 import {getSessionId} from '../addthis-utils/session';
 import {getWidgetOverload} from '../addthis-utils/get-widget-id-overloaded-with-json-for-anonymous-mode';
-import {startsWith} from '../../../../src/string';
-import {toArray} from '../../../../src/types';
+import {toArray} from '../../../../src/core/types/array';
 
 describes.realWin(
   'amp-addthis',
@@ -86,7 +85,7 @@ describes.realWin(
       }
       doc.body.appendChild(at);
       return at
-        .build()
+        .buildInternal()
         .then(() => {
           if (opt_beforeLayoutCallback) {
             opt_beforeLayoutCallback(at);
@@ -104,7 +103,7 @@ describes.realWin(
       expect(iframe).to.not.equal(null);
       const srcPrefix = `${ORIGIN}/dc/amp-addthis.html?`;
       expect(
-        startsWith(iframe.getAttribute('src'), srcPrefix),
+        iframe.getAttribute('src').startsWith(srcPrefix),
         `iframe src starts with ${srcPrefix}`
       ).to.be.true;
       expect(iframe.getAttribute('title')).to.equal(ALT_TEXT);
@@ -197,14 +196,13 @@ describes.realWin(
       ).to.not.equal(void 0);
     });
 
-    it('removes the iframe after unlayoutCallback', () => {
-      return getAT({pubId, widgetId}).then(({at}) => {
-        const obj = at.implementation_;
-        testIframe(at.querySelector('iframe'));
-        obj.unlayoutCallback();
-        expect(at.querySelector('iframe')).to.equal(null);
-        expect(obj.iframe_).to.equal(null);
-      });
+    it('removes the iframe after unlayoutCallback', async () => {
+      const {at} = await getAT({pubId, widgetId});
+      const obj = await at.getImpl();
+      testIframe(at.querySelector('iframe'));
+      obj.unlayoutCallback();
+      expect(at.querySelector('iframe')).to.equal(null);
+      expect(obj.iframe_).to.equal(null);
     });
 
     it('registers the frame with the configManager on layout', () => {
@@ -213,13 +211,12 @@ describes.realWin(
       });
     });
 
-    it('unregisters the frame with the configManager on unlayoutCallback', () => {
-      return getAT({pubId, widgetId}).then(({at}) => {
-        const obj = at.implementation_;
-        obj.unlayoutCallback();
+    it('unregisters the frame with the configManager on unlayoutCallback', async () => {
+      const {at} = await getAT({pubId, widgetId});
+      const obj = await at.getImpl();
+      obj.unlayoutCallback();
 
-        expect(unregisterStub.calledOnce).to.equal(true);
-      });
+      expect(unregisterStub.calledOnce).to.equal(true);
     });
 
     it('accepts and stores shareConfig data via custom attributes', () => {
@@ -240,13 +237,12 @@ describes.realWin(
       });
     });
 
-    it("defaults to sharing ownerDocument's title and url", () => {
-      return getAT({pubId, widgetId}).then(({at}) => {
-        const obj = at.implementation_;
-        const {shareConfig_} = obj;
-        expect(shareConfig_.title).to.equal(doc.title);
-        expect(shareConfig_.url).to.equal(doc.location.href);
-      });
+    it("defaults to sharing ownerDocument's title and url", async () => {
+      const {at} = await getAT({pubId, widgetId});
+      const obj = await at.getImpl();
+      const {shareConfig_} = obj;
+      expect(shareConfig_.title).to.equal(doc.title);
+      expect(shareConfig_.url).to.equal(doc.location.href);
     });
 
     it('registers a view at most once per "session"', (done) => {
diff --git a/extensions/amp-addthis/OWNERS b/extensions/amp-addthis/OWNERS
index 22d892ae75609..207634a381e85 100644
--- a/extensions/amp-addthis/OWNERS
+++ b/extensions/amp-addthis/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-addthis/amp-addthis.md b/extensions/amp-addthis/amp-addthis.md
index 3f695220bffab..34b7737eac2b2 100644
--- a/extensions/amp-addthis/amp-addthis.md
+++ b/extensions/amp-addthis/amp-addthis.md
@@ -24,15 +24,14 @@ limitations under the License.
 
 # amp-addthis
 
-## Why AddThis?
+## Usage
 
-The `amp-addthis` component provides beautiful, simple share buttons. Make it easy for your website visitors share content to over 200 social channels including Messenger, WhatsApp, Facebook, Twitter, Pinterest and many more.
+The `amp-addthis` component provides integration of
+[AddThis share buttons](https://www.addthis.com/get/share/) in AMP pages. Website visitors use AddThis share buttons to share content to over 200 social channels including Messenger, WhatsApp, Facebook, Twitter, Pinterest and more.
 
-AddThis is trusted by over 15,000,000 websites with over 2 billion unique users, sharing content all over the world, in more than sixty languages.
+### Share Buttons
 
-## Share Buttons
-
-### Floating
+#### Floating
 
 Placed on the sides, top, or bottom of your page, following your reader as they scroll. A great way to promote sharing without getting too in-your-face.
 
@@ -55,7 +54,7 @@ Example:
 </amp-addthis>
 ```
 
-### Inline
+#### Inline
 
 Integrate share buttons into your content for a seamless sharing experience.
 
@@ -77,46 +76,9 @@ Example:
 </amp-addthis>
 ```
 
-## Attributes
+### Implementation Documentation
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-pub-id</strong></td>
-    <td>The AddThis publisher ID found in the URL in the <a href="https://addthis.com/dashboard">AddThis dashboard</a> after logging in. For example, in the URL <code>https://www.addthis.com/dashboard#gallery/pub/ra-5c191331410932ff</code>, <code>ra-5c191331410932ff</code> is the publisher ID.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-widget-id</strong></td>
-    <td>The AddThis widget ID for the tool to be displayed, also found on the <a href="https://addthis.com/dashboard">AddThis dashboard</a>. The widget Id for a specific tool can be found by opening that tool in the AddThis dashboard and copying the last part of the URL. For example, in the URL <code>https://www.addthis.com/dashboard#tool-config/pub/ra-5c191331410932ff/widgetId/957l</code>, <code>957l</code> is the widget Id.</td>
-  </tr>
-  <tr>
-     <td width="40%"><strong>data-widget-type</strong></td>
-     <td>Attribute that describes the type of widget.</p>
-<ul>
-  <li>Floating: `data-widget-type="floating"`</li>
-  <li>Inline: `data-widget-type="inline"`</li>
-</ul></td>
-   </tr>
-  <tr>
-    <td width="40%"><strong>data-title</strong></td>
-    <td>Optional. If set, this is the title that the AddThis tool will attempt to share when sharing occurs. If not set, the title of the document containing the <code>amp-addthis</code> tag will be used.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-url</strong></td>
-    <td>Optional. If set, this is the URL that the AddThis tool will attempt to share when sharing occurs. If not set, the <code>location.href</code> property of the document containing the <code>amp-addthis</code> tag will be used.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-media</strong></td>
-    <td>Optional. If set, this is an URL for a piece of media (e.g., image or video) that the AddThis tool will attempt to share when sharing occurs. If not set, this is left undefined.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-description</strong></td>
-    <td>Optional. If set, this is the description of the page that the AddThis tool will attempt to share when sharing occurs. If not set, this is left undefined.</td>
-  </tr>
-</table>
-
-## Implementation Documentation
-
-1. If you haven’t already, you will need to create an AddThis account at <https://www.addthis.com/register>. Creating an AddThis account is entirely free and allows you to access our entire suite of website tools as well as our in-depth analytics reports to better understand your site’s social traffic.
+1. If you haven’t already, you will need to [create an AddThis account](https://www.addthis.com/register). Creating an AddThis account is entirely free and allows you to access AddThis' entire suite of website tools as well as our in-depth analytics reports to better understand your site’s social traffic.
 2. Go to your [dashboard](https://addthis.com/dashboard) and customize your Share Buttons (AMP currently only supports Floating & Inline Share Buttons).
 3. Customize your sharing buttons to your liking, then hit “activate tool”. This will redirect you to our Get The Code page.
 4. Last but not least, copy and paste the inline code into the body section of your page where you want the share buttons to appear. For the Floating Share Buttons, you can place this code anywhere in the body as it will automatically appear on either the left or right side of your screen, depending on where you’ve set it in the tool’s settings.
@@ -126,28 +88,59 @@ And that’s it! You should see the share buttons appearing on your page!
 Check out our [YouTube video](https://www.youtube.com/watch?v=BSkuAB4er2o) for step-by-step instructions:
 <amp-youtube data-videoid="BSkuAB4er2o" layout="responsive" width="480" height="270"></amp-youtube>
 
-## Validation
-
-See [amp-addthis rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-addthis/validator-amp-addthis.protoascii) in the AMP validator specification.
-
 ## Privacy
 
-<http://www.addthis.com/privacy/privacy-policy/>
-
-The AddThis Tools and AddThis Toolbar collect information from the device used by the End User to interact with Publisher Sites or by the Toolbar User to interact with the AddThis Toolbar (“AddThis Data”).
+The AddThis Tools and AddThis Toolbar collect information from the device used by the End User to interact with Publisher Sites or by the Toolbar User to interact with the AddThis Toolbar (“AddThis Data”). Read the full [AddThis Privacy Policy](http://www.addthis.com/privacy/privacy-policy/).
 
 AddThis Data may consist of the following:
 
-- Internet Protocol (IP) address, Mobile Advertising ID (MAID) (which allows mobile app developers to identify who is using their mobile apps), mobile application ID, browser type, browser language, type of operating system, and the date and time the End User visited a Publisher Site or Toolbar
-- User used the Toolbar;
-- Behavior on a Publisher Site, such as how long the End User visited the Publisher Site, End User sharing behavior of content on a Publisher Site, and scrolling behavior of an End User on a Publisher Site;
-- The referring URL and the web search the End User used to locate and navigate to a Publisher Site;
-- Keywords entered into the AddThis Toolbar search functionality, and whether and when the Toolbar User downloads, installs, or uninstalls the AddThis Toolbar;
-- Information regarding how often an End User uses the AddThis Tools and how often a Toolbar User uses the AddThis Toolbar; and
-- Geo-location data derived from an End User’s and Toolbar User’s IP address.
+-   Internet Protocol (IP) address, Mobile Advertising ID (MAID) (which allows mobile app developers to identify who is using their mobile apps), mobile application ID, browser type, browser language, type of operating system, and the date and time the End User visited a Publisher Site or Toolbar
+-   User used the Toolbar;
+-   Behavior on a Publisher Site, such as how long the End User visited the Publisher Site, End User sharing behavior of content on a Publisher Site, and scrolling behavior of an End User on a Publisher Site;
+-   The referring URL and the web search the End User used to locate and navigate to a Publisher Site;
+-   Keywords entered into the AddThis Toolbar search functionality, and whether and when the Toolbar User downloads, installs, or uninstalls the AddThis Toolbar;
+-   Information regarding how often an End User uses the AddThis Tools and how often a Toolbar User uses the AddThis Toolbar; and
+-   Geo-location data derived from an End User’s and Toolbar User’s IP address.
 
 AddThis Data will be treated as personal information to the extent required under applicable law. Publishers are required per the AddThis Terms of Service to obtain all necessary End User consents and authorizations, and provide any required notices for the provision of AddThis Data collected from End Users to Oracle.
 
 ## Support
 
 If you have any questions or need any help in implementing AddThis on AMP, please contact our fabulous support team by submitting a ticket [here](https://www.addthis.com/support/) or by emailing [help@addthis.com](mailto:help@addthis.com).
+
+## Attributes
+
+### data-pub-id
+
+The AddThis publisher ID found in the URL in the [AddThis dashboard](https://addthis.com/dashboard) after logging in. For example, in the URL `https://www.addthis.com/dashboard#gallery/pub/ra-5c191331410932ff`, `ra-5c191331410932ff` is the publisher ID.
+
+### data-widget-id
+
+The AddThis widget ID for the tool to be displayed, also found on the [AddThis dashboard](https://addthis.com/dashboard). The widget Id for a specific tool can be found by opening that tool in the AddThis dashboard and copying the last part of the URL. For example, in the URL `https://www.addthis.com/dashboard#tool-config/pub/ra-5c191331410932ff/widgetId/957l`, `957l` is the widget Id.
+
+### data-widget-type
+
+Attribute that describes the type of widget.
+
+-   Floating: `data-widget-type="floating"`
+-   Inline: `data-widget-type="inline"`
+
+### data-title
+
+Optional. If set, this is the title that the AddThis tool will attempt to share when sharing occurs. If not set, the title of the document containing the `amp-addthis` tag will be used.
+
+### data-url
+
+Optional. If set, this is the URL that the AddThis tool will attempt to share when sharing occurs. If not set, the `location.href` property of the document containing the `amp-addthis` tag will be used.
+
+### data-media
+
+Optional. If set, this is an URL for a piece of media (e.g., image or video) that the AddThis tool will attempt to share when sharing occurs. If not set, this is left undefined.
+
+### data-description
+
+Optional. If set, this is the description of the page that the AddThis tool will attempt to share when sharing occurs. If not set, this is left undefined.
+
+## Validation
+
+See [`amp-addthis` rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-addthis/validator-amp-addthis.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-analytics/0.1/activity-impl.js b/extensions/amp-analytics/0.1/activity-impl.js
index 3d5ae89b76f78..01f63b4d24686 100644
--- a/extensions/amp-analytics/0.1/activity-impl.js
+++ b/extensions/amp-analytics/0.1/activity-impl.js
@@ -20,7 +20,7 @@
  */
 
 import {Services} from '../../../src/services';
-import {hasOwn} from '../../../src/utils/object';
+import {hasOwn} from '../../../src/core/types/object';
 import {listen} from '../../../src/event-helper';
 import {registerServiceBuilderForDoc} from '../../../src/service';
 
diff --git a/extensions/amp-analytics/0.1/amp-analytics.js b/extensions/amp-analytics/0.1/amp-analytics.js
index 9da4314713e00..06daac63c0930 100644
--- a/extensions/amp-analytics/0.1/amp-analytics.js
+++ b/extensions/amp-analytics/0.1/amp-analytics.js
@@ -19,7 +19,7 @@ import {AnalyticsConfig, mergeObjects} from './config';
 import {AnalyticsEventType} from './events';
 import {ChunkPriority, chunk} from '../../../src/chunk';
 import {CookieWriter} from './cookie-writer';
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {
   ExpansionOptions,
   VariableService,
@@ -35,16 +35,16 @@ import {LinkerManager} from './linker-manager';
 import {RequestHandler, expandPostMessage} from './requests';
 import {Services} from '../../../src/services';
 import {Transport} from './transport';
-import {dev, devAssert, rethrowAsync, user} from '../../../src/log';
-import {dict, hasOwn} from '../../../src/utils/object';
-import {expandTemplate} from '../../../src/string';
+import {dev, devAssert, user} from '../../../src/log';
+import {dict, hasOwn} from '../../../src/core/types/object';
+import {expandTemplate} from '../../../src/core/types/string';
 import {getMode} from '../../../src/mode';
 import {installLinkerReaderService} from './linker-reader';
-import {isAnalyticsChunksExperimentOn} from './analytics-group';
-import {isArray, isEnumValue} from '../../../src/types';
+import {isArray, isEnumValue} from '../../../src/core/types';
+import {rethrowAsync} from '../../../src/core/error';
+
 import {isIframed} from '../../../src/dom';
 import {isInFie} from '../../../src/iframe-helper';
-import {toggle} from '../../../src/style';
 
 const TAG = 'amp-analytics';
 
@@ -53,6 +53,8 @@ const MAX_REPLACES = 16; // The maximum number of entries in a extraUrlParamsRep
 const ALLOWLIST_EVENT_IN_SANDBOX = [
   AnalyticsEventType.VISIBLE,
   AnalyticsEventType.HIDDEN,
+  AnalyticsEventType.INI_LOAD,
+  AnalyticsEventType.RENDER_START,
 ];
 
 export class AmpAnalytics extends AMP.BaseElement {
@@ -208,16 +210,14 @@ export class AmpAnalytics extends AMP.BaseElement {
     if (this.iniPromise_) {
       return this.iniPromise_;
     }
-    toggle(this.element, false);
 
-    this.iniPromise_ = this.getAmpDoc()
+    const ampdoc = this.getAmpDoc();
+    this.iniPromise_ = ampdoc
       .whenFirstVisible()
       // Rudimentary "idle" signal.
       .then(() => Services.timerFor(this.win).promise(1))
       .then(() => this.consentPromise_)
-      .then(() => Services.ampdocServiceFor(this.win))
-      .then((ampDocService) => ampDocService.getAmpDoc(this.element))
-      .then((ampdoc) =>
+      .then(() =>
         Promise.all([
           instrumentationServicePromiseForDoc(ampdoc),
           variableServicePromiseForDoc(ampdoc),
@@ -231,10 +231,11 @@ export class AmpAnalytics extends AMP.BaseElement {
           const configPromise = new AnalyticsConfig(this.element).loadConfig();
           loadConfigDeferred.resolve(configPromise);
         };
-        if (isAnalyticsChunksExperimentOn(this.win)) {
-          chunk(this.element, loadConfigTask, ChunkPriority.HIGH);
-        } else {
+        if (this.isInabox_) {
+          // Chunk in inabox ad leads to activeview regression, handle seperately
           loadConfigTask();
+        } else {
+          chunk(this.element, loadConfigTask, ChunkPriority.HIGH);
         }
         return loadConfigDeferred.promise;
       })
@@ -245,12 +246,15 @@ export class AmpAnalytics extends AMP.BaseElement {
       })
       .then(() => {
         this.transport_ = new Transport(
-          this.win,
+          this.getAmpDoc(),
           this.config_['transport'] || {}
         );
       })
       .then(this.registerTriggers_.bind(this))
       .then(this.initializeLinker_.bind(this));
+    this.iniPromise_.then(() => {
+      this./*OK*/ collapse();
+    });
     return this.iniPromise_;
   }
 
@@ -372,7 +376,7 @@ export class AmpAnalytics extends AMP.BaseElement {
               trigger['selector'] = this.element.parentElement.tagName;
               trigger['selectionMethod'] = 'closest';
               return this.addTrigger_(trigger);
-            } else if (trigger['selector']) {
+            } else if (trigger['selector'] && !isArray(trigger['selector'])) {
               // Expand the selector using variable expansion.
               return this.variableService_
                 .expandTemplate(
@@ -414,7 +418,6 @@ export class AmpAnalytics extends AMP.BaseElement {
    * Calls `AnalyticsGroup.addTrigger` and reports any errors.
    * @param {!JsonObject} config
    * @private
-   * @noinline
    * @return {!Promise}
    */
   addTrigger_(config) {
@@ -583,10 +586,11 @@ export class AmpAnalytics extends AMP.BaseElement {
     const linkerTask = () => {
       this.linkerManager_.init();
     };
-    if (isAnalyticsChunksExperimentOn(this.win)) {
-      chunk(this.element, linkerTask, ChunkPriority.LOW);
-    } else {
+    if (this.isInabox_) {
+      // Chunk in inabox ad leads to activeview regression, handle seperately
       linkerTask();
+    } else {
+      chunk(this.element, linkerTask, ChunkPriority.LOW);
     }
   }
 
@@ -638,11 +642,20 @@ export class AmpAnalytics extends AMP.BaseElement {
       }
     }
     this.checkTriggerEnabled_(trigger, event).then((enabled) => {
-      if (!enabled) {
+      const isConnected =
+        this.element.ownerDocument && this.element.ownerDocument.defaultView;
+      if (!enabled || !isConnected) {
         return;
       }
       this.expandAndSendRequest_(request, trigger, event);
-      this.expandAndPostMessage_(trigger, event);
+
+      const shouldSendToAmpAd =
+        trigger['parentPostMessage'] &&
+        this.allowParentPostMessage_() &&
+        isIframed(this.win);
+      if (shouldSendToAmpAd) {
+        this.expandAndPostMessage_(trigger, event);
+      }
     });
   }
 
@@ -669,10 +682,6 @@ export class AmpAnalytics extends AMP.BaseElement {
    */
   expandAndPostMessage_(trigger, event) {
     const msg = trigger['parentPostMessage'];
-    if (!msg || !this.allowParentPostMessage_()) {
-      // Only send message for AMP ad with parentPostMessage specified.
-      return;
-    }
     const expansionOptions = this.expansionOptions_(event, trigger);
     expandPostMessage(
       this.getAmpDoc(),
@@ -682,10 +691,7 @@ export class AmpAnalytics extends AMP.BaseElement {
       expansionOptions,
       this.element
     ).then((message) => {
-      if (isIframed(this.win)) {
-        // Only post message with explict `parentPostMessage`
-        this.win.parent./*OK*/ postMessage(message, '*');
-      }
+      this.win.parent./*OK*/ postMessage(message, '*');
     });
   }
 
@@ -720,10 +726,11 @@ export class AmpAnalytics extends AMP.BaseElement {
           .then((digest) => digest * 100 < threshold);
         sampleDeferred.resolve(samplePromise);
       };
-      if (isAnalyticsChunksExperimentOn(this.win)) {
-        chunk(this.element, sampleInTask, ChunkPriority.LOW);
-      } else {
+      if (this.isInabox_) {
+        // Chunk in inabox ad leads to activeview regression, handle seperately
         sampleInTask();
+      } else {
+        chunk(this.element, sampleInTask, ChunkPriority.LOW);
       }
       return sampleDeferred.promise;
     }
@@ -778,10 +785,9 @@ export class AmpAnalytics extends AMP.BaseElement {
       return Promise.resolve(spec);
     }
 
-    return this.expandTemplateWithUrlParams_(
-      spec,
-      expansionOptions
-    ).then((val) => stringToBool(val));
+    return this.expandTemplateWithUrlParams_(spec, expansionOptions).then(
+      (val) => stringToBool(val)
+    );
   }
 
   /**
diff --git a/extensions/amp-analytics/0.1/analytics-group.js b/extensions/amp-analytics/0.1/analytics-group.js
index 30c74fae4f3cc..2d298410a151c 100644
--- a/extensions/amp-analytics/0.1/analytics-group.js
+++ b/extensions/amp-analytics/0.1/analytics-group.js
@@ -15,11 +15,10 @@
  */
 
 import {ChunkPriority, chunk} from '../../../src/chunk';
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {dev, userAssert} from '../../../src/log';
 import {getMode} from '../../../src/mode';
 import {getTrackerKeyName, getTrackerTypesForParentType} from './events';
-import {isExperimentOn} from '../../../src/experiments';
 import {toWin} from '../../../src/types';
 
 /**
@@ -106,7 +105,7 @@ export class AnalyticsGroup {
     };
     if (
       this.triggerCount_ < IMMEDIATE_TRIGGER_THRES ||
-      !isAnalyticsChunksExperimentOn(this.win_)
+      getMode(this.win_).runtime == 'inabox'
     ) {
       task();
     } else {
@@ -120,15 +119,3 @@ export class AnalyticsGroup {
     return deferred.promise;
   }
 }
-
-/**
- * Determine if the analytics-chunks experiment should be applied
- * @param {!Window} win
- * @return {boolean}
- */
-export function isAnalyticsChunksExperimentOn(win) {
-  if (getMode(win).runtime == 'inabox') {
-    return isExperimentOn(win, 'analytics-chunks-inabox');
-  }
-  return isExperimentOn(win, 'analytics-chunks');
-}
diff --git a/extensions/amp-analytics/0.1/analytics-root.js b/extensions/amp-analytics/0.1/analytics-root.js
index 3c2b6fbdba0a2..1a220e1ad6e01 100644
--- a/extensions/amp-analytics/0.1/analytics-root.js
+++ b/extensions/amp-analytics/0.1/analytics-root.js
@@ -14,10 +14,8 @@
  * limitations under the License.
  */
 
-import {HostServices} from '../../../src/inabox/host-services';
 import {ScrollManager} from './scroll-manager';
 import {Services} from '../../../src/services';
-import {VisibilityManagerForMApp} from './visibility-manager-for-mapp';
 import {
   closestAncestorElementBySelector,
   getDataParamsFromAttributes,
@@ -26,12 +24,12 @@ import {
 } from '../../../src/dom';
 import {dev, user, userAssert} from '../../../src/log';
 import {getMode} from '../../../src/mode';
-import {isArray} from '../../../src/types';
+import {isArray} from '../../../src/core/types';
 import {isExperimentOn} from '../../../src/experiments';
-import {layoutRectLtwh} from '../../../src/layout-rect';
-import {map} from '../../../src/utils/object';
+import {layoutRectLtwh} from '../../../src/core/math/layout-rect';
+import {map} from '../../../src/core/types/object';
 import {provideVisibilityManager} from './visibility-manager';
-import {tryResolve} from '../../../src/utils/promise';
+import {tryResolve} from '../../../src/core/data-structures/promise';
 import {whenContentIniLoad} from '../../../src/ini-load';
 
 const TAG = 'amp-analytics/analytics-root';
@@ -62,45 +60,6 @@ export class AnalyticsRoot {
 
     /** @private {?./scroll-manager.ScrollManager} */
     this.scrollManager_ = null;
-
-    /** @private {?Promise} */
-    this.usingHostAPIPromise_ = null;
-
-    /** @private {?../../../src/inabox/host-services.VisibilityInterface} */
-    this.hostVisibilityService_ = null;
-  }
-
-  /**
-   * @return {!Promise<boolean>}
-   */
-  isUsingHostAPI() {
-    if (this.usingHostAPIPromise_) {
-      return this.usingHostAPIPromise_;
-    }
-    if (!HostServices.isAvailable(this.ampdoc)) {
-      this.usingHostAPIPromise_ = Promise.resolve(false);
-    } else {
-      // TODO: Using the visibility service and apply it for all tracking types
-      const promise = HostServices.visibilityForDoc(this.ampdoc);
-      this.usingHostAPIPromise_ = promise
-        .then((visibilityService) => {
-          this.hostVisibilityService_ = visibilityService;
-          return true;
-        })
-        .catch((error) => {
-          dev().fine(
-            TAG,
-            'VisibilityServiceError - fallback=' + error.fallback
-          );
-          if (error.fallback) {
-            // Do not use HostAPI, fallback to original implementation.
-            return false;
-          }
-          // Cannot fallback, service error. Throw user error.
-          throw user().createError('Host Visibility Service Error');
-        });
-    }
-    return this.usingHostAPIPromise_;
   }
 
   /** @override */
@@ -307,7 +266,6 @@ export class AnalyticsRoot {
         }
         elementArray = this.getDataVarsElements_(elementArray, selector);
         userAssert(elementArray.length, `Element "${selector}" not found`);
-        this.verifyAmpElements_(elementArray, selector);
         elements = elements.concat(elementArray);
       }
       // Return unique
@@ -372,7 +330,7 @@ export class AnalyticsRoot {
   }
 
   /**
-   * Searches for the AMP element(s) that matches the selector
+   * Searches for the element(s) that matches the selector
    * within the scope of the analytics root in relationship to
    * the specified context node.
    *
@@ -380,9 +338,9 @@ export class AnalyticsRoot {
    * @param {!Array<string>|string} selectors DOM query selector(s).
    * @param {?string=} selectionMethod Allowed values are `null`,
    *   `'closest'` and `'scope'`.
-   * @return {!Promise<!Array<!AmpElement>>} Array of AMP elements corresponding to the selector if found.
+   * @return {!Promise<!Array<!Element>>} Array of elements corresponding to the selector if found.
    */
-  getAmpElements(context, selectors, selectionMethod) {
+  getElements(context, selectors, selectionMethod) {
     if (
       isExperimentOn(this.ampdoc.win, 'visibility-trigger-improvements') &&
       isArray(selectors)
@@ -396,7 +354,7 @@ export class AnalyticsRoot {
         /** @type {!Array<string>} */ (selectors)
       );
     }
-    return this.getAmpElement(
+    return this.getElement(
       context,
       /** @type {string} */ (selectors),
       selectionMethod
@@ -492,22 +450,11 @@ export class AnalyticsRoot {
    * Returns the visibility root corresponding to this analytics root (ampdoc
    * or embed). The visibility root is created lazily as needed and takes
    * care of all visibility tracking functions.
-   *
-   * The caller needs to make sure to call getVisibilityManager after
-   * usingHostAPIPromise has resolved
    * @return {!./visibility-manager.VisibilityManager}
    */
   getVisibilityManager() {
     if (!this.visibilityManager_) {
-      if (this.hostVisibilityService_) {
-        // If there is hostAPI (hostAPI never exist with the FIE case)
-        this.visibilityManager_ = new VisibilityManagerForMApp(
-          this.ampdoc,
-          this.hostVisibilityService_
-        );
-      } else {
-        this.visibilityManager_ = provideVisibilityManager(this.getRoot());
-      }
+      this.visibilityManager_ = provideVisibilityManager(this.getRoot());
     }
     return this.visibilityManager_;
   }
@@ -635,7 +582,6 @@ export class EmbedAnalyticsRoot extends AnalyticsRoot {
  * @param  {!Element} el
  * @param  {string} selector
  * @return {boolean}
- * @noinline
  */
 function tryMatches_(el, selector) {
   try {
diff --git a/extensions/amp-analytics/0.1/config.js b/extensions/amp-analytics/0.1/config.js
index 8902b49a432cf..c0a499edcdc29 100644
--- a/extensions/amp-analytics/0.1/config.js
+++ b/extensions/amp-analytics/0.1/config.js
@@ -17,13 +17,15 @@
 import {DEFAULT_CONFIG} from './default-config';
 import {Services} from '../../../src/services';
 import {assertHttpsUrl} from '../../../src/url';
-import {calculateScriptBaseUrl} from '../../../src/service/extension-location';
-import {deepMerge, dict, hasOwn} from '../../../src/utils/object';
+import {calculateScriptBaseUrl} from '../../../src/service/extension-script';
+import {deepMerge, dict, hasOwn} from '../../../src/core/types/object';
 import {dev, user, userAssert} from '../../../src/log';
 import {getChildJsonConfig} from '../../../src/json';
 import {getMode} from '../../../src/mode';
-import {isArray, isObject, toWin} from '../../../src/types';
+import {isArray, isObject} from '../../../src/core/types';
 import {isCanary} from '../../../src/experiments';
+
+import {toWin} from '../../../src/types';
 import {variableServiceForDoc} from './variables';
 
 const TAG = 'amp-analytics/config';
@@ -215,9 +217,8 @@ export class AnalyticsConfig {
         body: config,
       };
       if (this.element_.hasAttribute('data-credentials')) {
-        fetchConfig.credentials = this.element_.getAttribute(
-          'data-credentials'
-        );
+        fetchConfig.credentials =
+          this.element_.getAttribute('data-credentials');
       }
       return (
         Services.urlReplacementsForDoc(this.element_)
@@ -378,7 +379,6 @@ export class AnalyticsConfig {
   /**
    * @private
    * @return {!JsonObject}
-   * @noinline
    */
   getInlineConfig_() {
     if (this.element_.CONFIG) {
diff --git a/extensions/amp-analytics/0.1/cookie-writer.js b/extensions/amp-analytics/0.1/cookie-writer.js
index 41fded841a0f7..835fb47da12c9 100644
--- a/extensions/amp-analytics/0.1/cookie-writer.js
+++ b/extensions/amp-analytics/0.1/cookie-writer.js
@@ -16,13 +16,12 @@
 
 import {BASE_CID_MAX_AGE_MILLIS} from '../../../src/service/cid-impl';
 import {ChunkPriority, chunk} from '../../../src/chunk';
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {SameSite, setCookie} from '../../../src/cookies';
 import {Services} from '../../../src/services';
-import {hasOwn} from '../../../src/utils/object';
-import {isAnalyticsChunksExperimentOn} from './analytics-group';
+import {hasOwn} from '../../../src/core/types/object';
 import {isCookieAllowed} from './cookie-reader';
-import {isObject} from '../../../src/types';
-import {setCookie} from '../../../src/cookies';
+import {isObject} from '../../../src/core/types';
 import {user} from '../../../src/log';
 import {variableServiceForDoc} from './variables';
 
@@ -35,6 +34,9 @@ const RESERVED_KEYS = {
   'cookieMaxAge': true,
   'cookieSecure': true,
   'cookieDomain': true,
+  'sameSite': true,
+  'SameSite': true,
+  'secure': true,
 };
 
 export class CookieWriter {
@@ -72,11 +74,8 @@ export class CookieWriter {
       const task = () => {
         this.writeDeferred_.resolve(this.init_());
       };
-      if (isAnalyticsChunksExperimentOn(this.win_)) {
-        chunk(this.element_, task, ChunkPriority.LOW);
-      } else {
-        task();
-      }
+      // CookieWriter is not supported in inabox ad. Always chunk
+      chunk(this.element_, task, ChunkPriority.LOW);
     }
     return this.writeDeferred_.promise;
   }
@@ -117,7 +116,7 @@ export class CookieWriter {
 
     if (inputConfig['enabled'] === false) {
       // Enabled by default
-      // TODO: Allow indiviual cookie object to override the value
+      // TODO: Allow individual cookie object to override the value
       return Promise.resolve();
     }
 
@@ -128,12 +127,20 @@ export class CookieWriter {
     for (let i = 0; i < ids.length; i++) {
       const cookieName = ids[i];
       const cookieObj = inputConfig[cookieName];
+      const sameSite = this.getSameSiteType_(
+        // individual cookie sameSite/SameSite overrides config sameSite/SameSite
+        cookieObj['sameSite'] ||
+          cookieObj['SameSite'] ||
+          inputConfig['sameSite'] ||
+          inputConfig['SameSite']
+      );
       if (this.isValidCookieConfig_(cookieName, cookieObj)) {
         promises.push(
           this.expandAndWrite_(
             cookieName,
             cookieObj['value'],
-            cookieExpireDateMs
+            cookieExpireDateMs,
+            sameSite
           )
         );
       }
@@ -212,9 +219,10 @@ export class CookieWriter {
    * @param {string} cookieName
    * @param {string} cookieValue
    * @param {number} cookieExpireDateMs
+   * @param {!SameSite=} sameSite
    * @return {!Promise}
    */
-  expandAndWrite_(cookieName, cookieValue, cookieExpireDateMs) {
+  expandAndWrite_(cookieName, cookieValue, cookieExpireDateMs, sameSite) {
     // Note: Have to use `expandStringAsync` because QUERY_PARAM can wait for
     // trackImpressionPromise and resolve async
     return this.urlReplacementService_
@@ -224,8 +232,13 @@ export class CookieWriter {
         // provide a way to overwrite or erase existing cookie
         if (value) {
           const expireDate = Date.now() + cookieExpireDateMs;
+          // SameSite=None must be secure as per
+          // https://web.dev/samesite-cookies-explained/#samesitenone-must-be-secure
+          const secure = sameSite === SameSite.NONE;
           setCookie(this.win_, cookieName, value, expireDate, {
             highestAvailableDomain: true,
+            sameSite,
+            secure,
           });
         }
       })
@@ -233,4 +246,22 @@ export class CookieWriter {
         user().error(TAG, 'Error expanding cookie string', e);
       });
   }
+
+  /**
+   * Converts SameSite string to SameSite type.
+   * @param {string=} sameSite
+   * @return {SameSite|undefined}
+   */
+  getSameSiteType_(sameSite) {
+    switch (sameSite) {
+      case 'Strict':
+        return SameSite.STRICT;
+      case 'Lax':
+        return SameSite.LAX;
+      case 'None':
+        return SameSite.NONE;
+      default:
+        return;
+    }
+  }
 }
diff --git a/extensions/amp-analytics/0.1/crc32.js b/extensions/amp-analytics/0.1/crc32.js
index 198a4db5d76ad..960aa507b2513 100644
--- a/extensions/amp-analytics/0.1/crc32.js
+++ b/extensions/amp-analytics/0.1/crc32.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {utf8Encode} from '../../../src/utils/bytes';
+import {utf8Encode} from '../../../src/core/types/string/bytes';
 
 /**
  * Standard key for CRC32
diff --git a/extensions/amp-analytics/0.1/default-config.js b/extensions/amp-analytics/0.1/default-config.js
index 1c9ddee768178..c8337931d5631 100644
--- a/extensions/amp-analytics/0.1/default-config.js
+++ b/extensions/amp-analytics/0.1/default-config.js
@@ -14,19 +14,20 @@
  * limitations under the License.
  */
 
-import {jsonConfiguration} from '../../../src/json';
+import {jsonConfiguration} from '../../../src/core/types/object/json';
 
 // TODO(zhouyx@: Rename file and object name)
 const defaultConfig = jsonConfiguration({
   'transport': {'beacon': true, 'xhrpost': true, 'image': true},
   'vars': {
     'accessReaderId': 'ACCESS_READER_ID',
-    'ampdocHost': 'AMPDOC_HOST',
-    'ampdocHostname': 'AMPDOC_HOSTNAME',
-    'ampdocUrl': 'AMPDOC_URL',
     'ampGeo': 'AMP_GEO',
     'ampState': 'AMP_STATE',
     'ampVersion': 'AMP_VERSION',
+    'ampdocHost': 'AMPDOC_HOST',
+    'ampdocHostname': 'AMPDOC_HOSTNAME',
+    'ampdocMeta': 'AMPDOC_META',
+    'ampdocUrl': 'AMPDOC_URL',
     'authdata': 'AUTHDATA',
     'availableScreenHeight': 'AVAILABLE_SCREEN_HEIGHT',
     'availableScreenWidth': 'AVAILABLE_SCREEN_WIDTH',
@@ -38,29 +39,32 @@ const defaultConfig = jsonConfiguration({
     'canonicalUrl': 'CANONICAL_URL',
     'clientId': 'CLIENT_ID',
     'consentState': 'CONSENT_STATE',
+    'consentString': 'CONSENT_STRING',
     'contentLoadTime': 'CONTENT_LOAD_TIME',
     'cookie': 'COOKIE',
     'counter': 'COUNTER',
     'cumulativeLayoutShift': 'CUMULATIVE_LAYOUT_SHIFT',
     'documentCharset': 'DOCUMENT_CHARSET',
     'documentReferrer': 'DOCUMENT_REFERRER',
-    'domainLookupTime': 'DOMAIN_LOOKUP_TIME',
     'domInteractiveTime': 'DOM_INTERACTIVE_TIME',
+    'domainLookupTime': 'DOMAIN_LOOKUP_TIME',
+    'experimentBranches': 'EXPERIMENT_BRANCHES',
     'externalReferrer': 'EXTERNAL_REFERRER',
     'firstContentfulPaint': 'FIRST_CONTENTFUL_PAINT',
     'firstInputDelay': 'FIRST_INPUT_DELAY',
     'firstViewportReady': 'FIRST_VIEWPORT_READY',
     'fragmentParam': 'FRAGMENT_PARAM',
-    'largestContentfulPaint': 'LARGEST_CONTENTFUL_PAINT',
-    'makeBodyVisible': 'MAKE_BODY_VISIBLE',
     'htmlAttr': 'HTML_ATTR',
     'incrementalEngagedTime': 'INCREMENTAL_ENGAGED_TIME',
+    'largestContentfulPaint': 'LARGEST_CONTENTFUL_PAINT',
+    'makeBodyVisible': 'MAKE_BODY_VISIBLE',
     'navRedirectCount': 'NAV_REDIRECT_COUNT',
     'navTiming': 'NAV_TIMING',
     'navType': 'NAV_TYPE',
     'pageDownloadTime': 'PAGE_DOWNLOAD_TIME',
     'pageLoadTime': 'PAGE_LOAD_TIME',
     'pageViewId': 'PAGE_VIEW_ID',
+    'pageViewId64': 'PAGE_VIEW_ID_64',
     'queryParam': 'QUERY_PARAM',
     'random': 'RANDOM',
     'redirectTime': 'REDIRECT_TIME',
@@ -73,10 +77,10 @@ const defaultConfig = jsonConfiguration({
     'scrollTop': 'SCROLL_TOP',
     'scrollWidth': 'SCROLL_WIDTH',
     'serverResponseTime': 'SERVER_RESPONSE_TIME',
-    'sourceUrl': 'SOURCE_URL',
     'sourceHost': 'SOURCE_HOST',
     'sourceHostname': 'SOURCE_HOSTNAME',
     'sourcePath': 'SOURCE_PATH',
+    'sourceUrl': 'SOURCE_URL',
     'tcpConnectTime': 'TCP_CONNECT_TIME',
     'timestamp': 'TIMESTAMP',
     'timezone': 'TIMEZONE',
diff --git a/extensions/amp-analytics/0.1/events.js b/extensions/amp-analytics/0.1/events.js
index fdc9588645214..d82343d037ccf 100644
--- a/extensions/amp-analytics/0.1/events.js
+++ b/extensions/amp-analytics/0.1/events.js
@@ -14,20 +14,19 @@
  * limitations under the License.
  */
 
-import {CommonSignals} from '../../../src/common-signals';
-import {Deferred} from '../../../src/utils/promise';
-import {Observable} from '../../../src/observable';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {Observable} from '../../../src/core/data-structures/observable';
 import {
   PlayingStates,
   VideoAnalyticsEvents,
   videoAnalyticsCustomEventTypeKey,
 } from '../../../src/video-interface';
+import {deepMerge, dict, hasOwn} from '../../../src/core/types/object';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict, hasOwn} from '../../../src/utils/object';
 import {getData} from '../../../src/event-helper';
-import {getDataParamsFromAttributes} from '../../../src/dom';
-import {isArray, isEnumValue, isFiniteNumber} from '../../../src/types';
-import {startsWith} from '../../../src/string';
+import {getDataParamsFromAttributes, isAmpElement} from '../../../src/dom';
+import {isArray, isEnumValue, isFiniteNumber} from '../../../src/core/types';
 
 const SCROLL_PRECISION_PERCENT = 5;
 const VAR_H_SCROLL_BOUNDARY = 'horizontalScrollBoundary';
@@ -148,7 +147,7 @@ export const trackerTypeForTesting = TRACKER_TYPE;
  * @return {boolean}
  */
 function isAmpStoryTriggerType(triggerType) {
-  return startsWith(triggerType, 'story');
+  return triggerType.startsWith('story');
 }
 
 /**
@@ -156,7 +155,7 @@ function isAmpStoryTriggerType(triggerType) {
  * @return {boolean}
  */
 function isVideoTriggerType(triggerType) {
-  return startsWith(triggerType, 'video');
+  return triggerType.startsWith('video');
 }
 
 /**
@@ -199,10 +198,29 @@ export function getTrackerTypesForParentType(parentType) {
     ) {
       filtered[key] = TRACKER_TYPE[key].klass;
     }
-  }, this);
+  });
   return filtered;
 }
 
+/**
+ * Expand the event variables to include default data-vars
+ * eventVars value will override data-vars value
+ * @param {!Element} target
+ * @param {!JsonObject} eventVars
+ * @return {!JsonObject}
+ */
+function mergeDataVars(target, eventVars) {
+  const vars = getDataParamsFromAttributes(
+    target,
+    /* computeParamNameFunc */ undefined,
+    VARIABLE_DATA_ATTRIBUTE_KEY
+  );
+  // Merge eventVars into vars, depth=0 because
+  // vars and eventVars are not supposed to contain nested object.
+  deepMerge(vars, eventVars, 0);
+  return vars;
+}
+
 /**
  * @interface
  */
@@ -229,15 +247,17 @@ export class AnalyticsEvent {
   /**
    * @param {!Element} target The most relevant target element.
    * @param {string} type The type of event.
-   * @param {?JsonObject=} opt_vars A map of vars and their values.
+   * @param {!JsonObject} vars A map of vars and their values.
+   * @param {boolean} enableDataVars A boolean to indicate if data-vars-*
+   * attribute value from target element should be included.
    */
-  constructor(target, type, opt_vars) {
+  constructor(target, type, vars = dict(), enableDataVars = true) {
     /** @const */
     this['target'] = target;
     /** @const */
     this['type'] = type;
     /** @const */
-    this['vars'] = opt_vars || dict();
+    this['vars'] = enableDataVars ? mergeDataVars(target, vars) : vars;
   }
 }
 
@@ -331,7 +351,7 @@ export class CustomEventTracker extends EventTracker {
       selectionMethod
     );
 
-    const isSandboxEvent = startsWith(eventType, 'sandbox-');
+    const isSandboxEvent = eventType.startsWith('sandbox-');
 
     // Push recent events if any.
     const buffer = isSandboxEvent
@@ -379,7 +399,7 @@ export class CustomEventTracker extends EventTracker {
    */
   trigger(event) {
     const eventType = event['type'];
-    const isSandboxEvent = startsWith(eventType, 'sandbox-');
+    const isSandboxEvent = eventType.startsWith('sandbox-');
     const observables = this.observables_[eventType];
 
     // If listeners already present - trigger right away.
@@ -544,12 +564,7 @@ export class ClickEventTracker extends EventTracker {
    * @private
    */
   handleClick_(listener, target, unusedEvent) {
-    const params = getDataParamsFromAttributes(
-      target,
-      /* computeParamNameFunc */ undefined,
-      VARIABLE_DATA_ATTRIBUTE_KEY
-    );
-    listener(new AnalyticsEvent(target, 'click', params));
+    listener(new AnalyticsEvent(target, 'click'));
   }
 }
 
@@ -566,7 +581,7 @@ export class ScrollEventTracker extends EventTracker {
     /** @private {!./analytics-root.AnalyticsRoot} root */
     this.root_ = root;
 
-    /** @private {function(!Object)|null} */
+    /** @private {?function(!Object)} */
     this.boundScrollHandler_ = null;
   }
 
@@ -631,7 +646,7 @@ export class ScrollEventTracker extends EventTracker {
   scrollHandler_(boundsH, boundsV, useInitialPageSize, listener, e) {
     // Calculates percentage scrolled by adding screen height/width to
     // top/left and dividing by the total scroll height/width.
-    const {scrollWidth, scrollHeight} = useInitialPageSize ? e.initialSize : e;
+    const {scrollHeight, scrollWidth} = useInitialPageSize ? e.initialSize : e;
 
     this.triggerScrollEvents_(
       boundsV,
@@ -709,7 +724,8 @@ export class ScrollEventTracker extends EventTracker {
         new AnalyticsEvent(
           this.root_.getRootElement(),
           AnalyticsEventType.SCROLL,
-          vars
+          vars,
+          /** enableDataVars */ false
         )
       );
     }
@@ -1206,7 +1222,8 @@ export class TimerEventTracker extends EventTracker {
     return new AnalyticsEvent(
       this.root.getRootElement(),
       eventType,
-      this.trackers_[timerId].getTimerVars()
+      this.trackers_[timerId].getTimerVars(),
+      /** enableDataVars */ false
     );
   }
 
@@ -1335,7 +1352,12 @@ export class VideoEventTracker extends EventTracker {
         devAssert(isFiniteNumber(normalizedPercentageInt));
         devAssert(normalizedPercentageInt % percentageInterval == 0);
 
-        if (lastPercentage == normalizedPercentageInt) {
+        // Don't trigger if current percentage is the same as
+        // last triggered percentage
+        if (
+          lastPercentage == normalizedPercentageInt &&
+          percentages.length > 1
+        ) {
           return;
         }
 
@@ -1395,11 +1417,11 @@ function normalizeVideoEventType(type, details) {
 
 /**
  * @param {?JsonObject|undefined} details
- * @return {?JsonObject|undefined}
+ * @return {!JsonObject|undefined}
  */
 function removeInternalVars(details) {
   if (!details) {
-    return details;
+    return dict();
   }
   const clean = {...details};
   delete clean[videoAnalyticsCustomEventTypeKey];
@@ -1428,10 +1450,8 @@ export class VisibilityTracker extends EventTracker {
     const visibilitySpec = config['visibilitySpec'] || {};
     const selector = config['selector'] || visibilitySpec['selector'];
     const waitForSpec = visibilitySpec['waitFor'];
-    let readyPromiseWaitForSpec;
     let reportWhenSpec = visibilitySpec['reportWhen'];
     let createReportReadyPromiseFunc = null;
-    const unlistenPromises = [];
     if (reportWhenSpec) {
       userAssert(
         !visibilitySpec['repeat'],
@@ -1450,23 +1470,14 @@ export class VisibilityTracker extends EventTracker {
       reportWhenSpec = 'documentHidden';
     }
 
-    const visibilityManagerPromise = this.root
-      .isUsingHostAPI()
-      .then((hasHostAPI) => {
-        if (hasHostAPI) {
-          this.assertMeasurableWithHostApi_(selector, reportWhenSpec);
-        }
-        return this.root.getVisibilityManager();
-      });
+    const visibilityManager = this.root.getVisibilityManager();
 
     if (reportWhenSpec == 'documentHidden') {
-      createReportReadyPromiseFunc = this.createReportReadyPromiseForDocumentHidden_.bind(
-        this
-      );
+      createReportReadyPromiseFunc =
+        this.createReportReadyPromiseForDocumentHidden_.bind(this);
     } else if (reportWhenSpec == 'documentExit') {
-      createReportReadyPromiseFunc = this.createReportReadyPromiseForDocumentExit_.bind(
-        this
-      );
+      createReportReadyPromiseFunc =
+        this.createReportReadyPromiseForDocumentExit_.bind(this);
     } else {
       userAssert(
         !reportWhenSpec,
@@ -1479,61 +1490,47 @@ export class VisibilityTracker extends EventTracker {
     if (!selector || selector == ':root' || selector == ':host') {
       // When `selector` is specified, we always use "ini-load" signal as
       // a "ready" signal.
-      readyPromiseWaitForSpec = waitForSpec || (selector ? 'ini-load' : null);
-      unlistenPromises.push(
-        visibilityManagerPromise.then(
-          (visibilityManager) => {
-            return visibilityManager.listenRoot(
-              visibilitySpec,
-              this.getReadyPromise(readyPromiseWaitForSpec),
-              createReportReadyPromiseFunc,
-              this.onEvent_.bind(
-                this,
-                eventType,
-                listener,
-                this.root.getRootElement()
-              )
-            );
-          },
-          () => {}
+      const readyPromiseWaitForSpec =
+        waitForSpec || (selector ? 'ini-load' : 'none');
+      return visibilityManager.listenRoot(
+        visibilitySpec,
+        this.getReadyPromise(readyPromiseWaitForSpec),
+        createReportReadyPromiseFunc,
+        this.onEvent_.bind(
+          this,
+          eventType,
+          listener,
+          this.root.getRootElement()
         )
       );
-    } else {
-      // An AMP-element. Wait for DOM to be fully parsed to avoid
-      // false missed searches.
-      // Array selectors do not suppor the special cases: ':host' & ':root'
-      const selectionMethod =
-        config['selectionMethod'] || visibilitySpec['selectionMethod'];
-      readyPromiseWaitForSpec = waitForSpec || 'ini-load';
-      this.assertUniqueSelectors_(selector);
-      this.root
-        .getAmpElements(
-          context.parentElement || context,
-          selector,
-          selectionMethod
-        )
-        .then((elements) => {
-          for (let i = 0; i < elements.length; i++) {
-            unlistenPromises.push(
-              visibilityManagerPromise.then(
-                (visibilityManager) => {
-                  return visibilityManager.listenElement(
-                    elements[i],
-                    visibilitySpec,
-                    this.getReadyPromise(readyPromiseWaitForSpec, elements[i]),
-                    createReportReadyPromiseFunc,
-                    this.onEvent_.bind(this, eventType, listener, elements[i])
-                  );
-                },
-                () => {}
-              )
-            );
-          }
-        });
     }
 
+    // An element. Wait for DOM to be fully parsed to avoid
+    // false missed searches.
+    // Array selectors do not suppor the special cases: ':host' & ':root'
+    const selectionMethod =
+      config['selectionMethod'] || visibilitySpec['selectionMethod'];
+    this.assertUniqueSelectors_(selector);
+    const unlistenPromise = this.root
+      .getElements(context.parentElement || context, selector, selectionMethod)
+      .then((elements) => {
+        const unlistenCallbacks = [];
+        for (let i = 0; i < elements.length; i++) {
+          unlistenCallbacks.push(
+            visibilityManager.listenElement(
+              elements[i],
+              visibilitySpec,
+              this.getReadyPromise(waitForSpec, elements[i]),
+              createReportReadyPromiseFunc,
+              this.onEvent_.bind(this, eventType, listener, elements[i])
+            )
+          );
+        }
+        return unlistenCallbacks;
+      });
+
     return function () {
-      return Promise.all(unlistenPromises).then((unlistenCallbacks) => {
+      unlistenPromise.then((unlistenCallbacks) => {
         for (let i = 0; i < unlistenCallbacks.length; i++) {
           unlistenCallbacks[i]();
         }
@@ -1559,24 +1556,6 @@ export class VisibilityTracker extends EventTracker {
     }
   }
 
-  /**
-   * Assert that the setting is measurable with host API
-   * @param {string=} selector
-   * @param {string=} reportWhenSpec
-   */
-  assertMeasurableWithHostApi_(selector, reportWhenSpec) {
-    userAssert(
-      !selector || selector == ':root' || selector == ':host',
-      'Element %s that is not root is not supported with host API',
-      selector
-    );
-
-    userAssert(
-      reportWhenSpec !== 'documentExit',
-      'reportWhen : documentExit is not supported with host API'
-    );
-  }
-
   /**
    * Returns a Promise indicating that we're ready to report the analytics,
    * in the case of reportWhen: documentHidden
@@ -1663,14 +1642,26 @@ export class VisibilityTracker extends EventTracker {
    * @visibleForTesting
    */
   getReadyPromise(waitForSpec, opt_element) {
-    if (!waitForSpec) {
+    if (opt_element) {
+      if (!isAmpElement(opt_element)) {
+        userAssert(
+          !waitForSpec || waitForSpec == 'none',
+          'waitFor for non-AMP elements must be none or null. Found %s',
+          waitForSpec
+        );
+      } else {
+        waitForSpec = waitForSpec || 'ini-load';
+      }
+    }
+
+    if (!waitForSpec || waitForSpec == 'none') {
       // Default case, waitFor selector is not defined, wait for nothing
       return null;
     }
 
     const trackerAllowlist = getTrackerTypesForParentType('visible');
     userAssert(
-      waitForSpec == 'none' || trackerAllowlist[waitForSpec] !== undefined,
+      trackerAllowlist[waitForSpec] !== undefined,
       'waitFor value %s not supported',
       waitForSpec
     );
@@ -1698,6 +1689,7 @@ export class VisibilityTracker extends EventTracker {
    * @private
    */
   onEvent_(eventType, listener, target, state) {
+    // TODO: Verify usage and change behavior to have state override data-vars
     const attr = getDataParamsFromAttributes(
       target,
       /* computeParamNameFunc */ undefined,
@@ -1706,6 +1698,8 @@ export class VisibilityTracker extends EventTracker {
     for (const key in attr) {
       state[key] = attr[key];
     }
-    listener(new AnalyticsEvent(target, eventType, state));
+    listener(
+      new AnalyticsEvent(target, eventType, state, /** enableDataVars */ false)
+    );
   }
 }
diff --git a/extensions/amp-analytics/0.1/iframe-transport-vendors.js b/extensions/amp-analytics/0.1/iframe-transport-vendors.js
index 2d4e40d6e9648..1a79675034708 100644
--- a/extensions/amp-analytics/0.1/iframe-transport-vendors.js
+++ b/extensions/amp-analytics/0.1/iframe-transport-vendors.js
@@ -39,4 +39,6 @@ const canaryConfig = {
 };
 
 export const IFRAME_TRANSPORTS = /** @type {!JsonObject} */ (prodConfig);
-export const IFRAME_TRANSPORTS_CANARY = /** @type {!JsonObject} */ (canaryConfig);
+export const IFRAME_TRANSPORTS_CANARY = /** @type {!JsonObject} */ (
+  canaryConfig
+);
diff --git a/extensions/amp-analytics/0.1/iframe-transport.js b/extensions/amp-analytics/0.1/iframe-transport.js
index d51d81f11adc5..537e7a4207b34 100644
--- a/extensions/amp-analytics/0.1/iframe-transport.js
+++ b/extensions/amp-analytics/0.1/iframe-transport.js
@@ -18,9 +18,8 @@ import {IframeTransportMessageQueue} from './iframe-transport-message-queue';
 import {createElementWithAttributes} from '../../../src/dom';
 import {devAssert, user} from '../../../src/log';
 import {getMode} from '../../../src/mode';
-import {hasOwn} from '../../../src/utils/object';
+import {hasOwn} from '../../../src/core/types/object';
 import {internalRuntimeVersion} from '../../../src/internal-version';
-import {isLongTaskApiSupported} from '../../../src/service/jank-meter';
 import {toggle} from '../../../src/style';
 import {urls} from '../../../src/config';
 
@@ -200,31 +199,29 @@ export class IframeTransport {
     if (!isLongTaskApiSupported(this.ampWin_)) {
       return;
     }
-    // TODO(jonkeller): Consider merging with jank-meter.js
-    IframeTransport.performanceObservers_[
-      this.type_
-    ] = new this.ampWin_.PerformanceObserver((entryList) => {
-      if (!entryList) {
-        return;
-      }
-      entryList.getEntries().forEach((entry) => {
-        if (
-          entry &&
-          entry['entryType'] == 'longtask' &&
-          entry['name'] == 'cross-origin-descendant' &&
-          entry.attribution
-        ) {
-          /** @type {!Array} */ (entry.attribution).forEach((attrib) => {
-            if (
-              this.frameUrl_ == attrib['containerSrc'] &&
-              ++this.numLongTasks_ % LONG_TASK_REPORTING_THRESHOLD == 0
-            ) {
-              user().error(TAG_, `Long Task: Vendor: "${this.type_}"`);
-            }
-          });
+    IframeTransport.performanceObservers_[this.type_] =
+      new this.ampWin_.PerformanceObserver((entryList) => {
+        if (!entryList) {
+          return;
         }
+        entryList.getEntries().forEach((entry) => {
+          if (
+            entry &&
+            entry['entryType'] == 'longtask' &&
+            entry['name'] == 'cross-origin-descendant' &&
+            entry.attribution
+          ) {
+            /** @type {!Array} */ (entry.attribution).forEach((attrib) => {
+              if (
+                this.frameUrl_ == attrib['containerSrc'] &&
+                ++this.numLongTasks_ % LONG_TASK_REPORTING_THRESHOLD == 0
+              ) {
+                user().error(TAG_, `Long Task: Vendor: "${this.type_}"`);
+              }
+            });
+          }
+        });
       });
-    });
     IframeTransport.performanceObservers_[this.type_].observe({
       entryTypes: ['longtask'],
     });
@@ -339,6 +336,18 @@ export class IframeTransport {
   }
 }
 
+/**
+ * @param {!Window} win
+ * @return {boolean}
+ */
+export function isLongTaskApiSupported(win) {
+  return (
+    !!win.PerformanceObserver &&
+    !!win['TaskAttributionTiming'] &&
+    'containerName' in win['TaskAttributionTiming'].prototype
+  );
+}
+
 /** @private {Object<string, FrameData>} */
 IframeTransport.crossDomainIframes_ = {};
 
diff --git a/extensions/amp-analytics/0.1/instrumentation.js b/extensions/amp-analytics/0.1/instrumentation.js
index b5f1431098ac4..a2311f823754f 100644
--- a/extensions/amp-analytics/0.1/instrumentation.js
+++ b/extensions/amp-analytics/0.1/instrumentation.js
@@ -24,6 +24,7 @@ import {
 import {AmpdocAnalyticsRoot, EmbedAnalyticsRoot} from './analytics-root';
 import {AnalyticsGroup} from './analytics-group';
 import {Services} from '../../../src/services';
+import {dict} from '../../../src/core/types/object';
 import {getFriendlyIframeEmbedOptional} from '../../../src/iframe-helper';
 import {
   getParentWindowFrameElement,
@@ -91,16 +92,22 @@ export class InstrumentationService {
    *
    * @param {!Element} target
    * @param {string} eventType
-   * @param {!JsonObject=} opt_vars A map of vars and their values.
+   * @param {!JsonObject} vars A map of vars and their values.
+   * @param {boolean} enableDataVars A boolean to indicate if data-vars-*
+   * attribute value from target element should be included.
    */
-  triggerEventForTarget(target, eventType, opt_vars) {
-    const event = new AnalyticsEvent(target, eventType, opt_vars);
+  triggerEventForTarget(
+    target,
+    eventType,
+    vars = dict(),
+    enableDataVars = true
+  ) {
+    const event = new AnalyticsEvent(target, eventType, vars, enableDataVars);
     const root = this.findRoot_(target);
     const trackerName = getTrackerKeyName(eventType);
-    const tracker = /** @type {!CustomEventTracker|!AmpStoryEventTracker} */ (root.getTracker(
-      trackerName,
-      this.getTrackerClass_(trackerName)
-    ));
+    const tracker = /** @type {!CustomEventTracker|!AmpStoryEventTracker} */ (
+      root.getTracker(trackerName, this.getTrackerClass_(trackerName))
+    );
     tracker.trigger(event);
   }
 
@@ -150,10 +157,9 @@ export class InstrumentationService {
  * @return {!Promise<InstrumentationService>}
  */
 export function instrumentationServicePromiseForDoc(elementOrAmpDoc) {
-  return /** @type {!Promise<InstrumentationService>} */ (getServicePromiseForDoc(
-    elementOrAmpDoc,
-    'amp-analytics-instrumentation'
-  ));
+  return /** @type {!Promise<InstrumentationService>} */ (
+    getServicePromiseForDoc(elementOrAmpDoc, 'amp-analytics-instrumentation')
+  );
 }
 
 /**
diff --git a/extensions/amp-analytics/0.1/linker-manager.js b/extensions/amp-analytics/0.1/linker-manager.js
index e7f6579181ee5..e99fc273bb9b3 100644
--- a/extensions/amp-analytics/0.1/linker-manager.js
+++ b/extensions/amp-analytics/0.1/linker-manager.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {AMPDOC_SINGLETON_NAME} from '../../../src/enums';
+import {AMPDOC_SINGLETON_NAME} from '../../../src/core/constants/enums';
 import {ExpansionOptions, variableServiceForDoc} from './variables';
 import {Priority} from '../../../src/service/navigation';
 import {Services} from '../../../src/services';
@@ -22,9 +22,9 @@ import {WindowInterface} from '../../../src/window-interface';
 import {addMissingParamsToUrl, addParamToUrl} from '../../../src/url';
 import {createElementWithAttributes} from '../../../src/dom';
 import {createLinker} from './linker';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getHighestAvailableDomain} from '../../../src/cookies';
-import {isObject} from '../../../src/types';
+import {isObject} from '../../../src/core/types';
 import {user} from '../../../src/log';
 
 /** @const {string} */
@@ -278,7 +278,11 @@ export class LinkerManager {
    */
   maybeAppendLinker_(url, name, config) {
     const /** @type {Array} */ domains = config['destinationDomains'];
-    if (this.isDomainMatch_(url, name, domains)) {
+    const location = this.urlService_.parse(url);
+    if (
+      this.isDomainMatch_(location, name, domains) &&
+      this.isProtocolMatch_(location)
+    ) {
       const linkerValue = createLinker(
         /* version */ '1',
         this.resolvedIds_[name]
@@ -294,13 +298,20 @@ export class LinkerManager {
 
   /**
    * Check to see if the url is a match for the given set of domains.
-   * @param {string} url
+   * @param {Location} location
    * @param {string} name Name given in linker config.
    * @param {?Array} domains
-   * @return {*} TODO(#23582): Specify return type
+   * @return {boolean}
    */
-  isDomainMatch_(url, name, domains) {
-    const {hostname} = this.urlService_.parse(url);
+  isDomainMatch_(location, name, domains) {
+    const {hostname} = location;
+    // Don't append linker for exact domain match, relative urls, or
+    // fragments.
+    const winHostname = WindowInterface.getHostname(this.ampdoc_.win);
+    if (winHostname === hostname) {
+      return false;
+    }
+
     // If given domains, but not in the right format.
     if (domains && !Array.isArray(domains)) {
       user().warn(TAG, '%s destinationDomains must be an array.', name);
@@ -313,15 +324,7 @@ export class LinkerManager {
     }
 
     // Fallback to default behavior
-
-    // Don't append linker for exact domain match, relative urls, or
-    // fragments.
-    const winHostname = WindowInterface.getHostname(this.ampdoc_.win);
-    if (winHostname === hostname) {
-      return false;
-    }
-
-    const {sourceUrl, canonicalUrl} = Services.documentInfoForDoc(this.ampdoc_);
+    const {canonicalUrl, sourceUrl} = Services.documentInfoForDoc(this.ampdoc_);
     const canonicalOrigin = this.urlService_.parse(canonicalUrl).hostname;
     const isFriendlyCanonicalOrigin = areFriendlyDomains(
       canonicalOrigin,
@@ -349,6 +352,15 @@ export class LinkerManager {
     );
   }
 
+  /**
+   * Only matching protocols should use Linker parameters.
+   * @param {Location} location
+   * @return {boolean}
+   */
+  isProtocolMatch_(location) {
+    return location.protocol === 'https:' || location.protocol === 'http:';
+  }
+
   /**
    * Helper method to find out if hostname match the destinationDomain array.
    * @param {Array<string>} domains
@@ -391,7 +403,7 @@ export class LinkerManager {
    * @param {!../../amp-form/0.1/form-submit-service.FormSubmitEventDef} event
    */
   handleFormSubmit_(event) {
-    const {form, actionXhrMutator} = event;
+    const {actionXhrMutator, form} = event;
 
     for (const linkerName in this.config_) {
       const config = this.config_[linkerName];
@@ -399,8 +411,8 @@ export class LinkerManager {
 
       const url =
         form.getAttribute('action-xhr') || form.getAttribute('action');
-
-      if (this.isDomainMatch_(url, linkerName, domains)) {
+      const location = this.urlService_.parse(url);
+      if (this.isDomainMatch_(location, linkerName, domains)) {
         this.addDataToForm_(form, actionXhrMutator, linkerName);
       }
     }
diff --git a/extensions/amp-analytics/0.1/linker-reader.js b/extensions/amp-analytics/0.1/linker-reader.js
index eec21d4a5c0b8..77c3439cdc769 100644
--- a/extensions/amp-analytics/0.1/linker-reader.js
+++ b/extensions/amp-analytics/0.1/linker-reader.js
@@ -15,9 +15,10 @@
  */
 
 import {getService, registerServiceBuilder} from '../../../src/service';
-import {hasOwn} from '../../../src/utils/object';
+import {hasOwn} from '../../../src/core/types/object';
 import {parseLinker} from './linker';
-import {parseQueryString, removeParamsFromSearch} from '../../../src/url';
+import {parseQueryString} from '../../../src/core/types/string/url';
+import {removeParamsFromSearch} from '../../../src/url';
 
 import {user} from '../../../src/log';
 
diff --git a/extensions/amp-analytics/0.1/linker.js b/extensions/amp-analytics/0.1/linker.js
index b9527637c4308..f5297e08332ad 100644
--- a/extensions/amp-analytics/0.1/linker.js
+++ b/extensions/amp-analytics/0.1/linker.js
@@ -18,7 +18,7 @@ import {WindowInterface} from '../../../src/window-interface';
 import {
   base64UrlDecodeFromString,
   base64UrlEncodeFromString,
-} from '../../../src/utils/base64';
+} from '../../../src/core/types/string/base64';
 import {crc32} from './crc32';
 import {user} from '../../../src/log';
 
diff --git a/extensions/amp-analytics/0.1/opacity.js b/extensions/amp-analytics/0.1/opacity.js
index 7afa32e42b430..2245cfe4c95a0 100644
--- a/extensions/amp-analytics/0.1/opacity.js
+++ b/extensions/amp-analytics/0.1/opacity.js
@@ -18,7 +18,7 @@ import {computedStyle} from '../../../src/style';
 
 /**
  *  Returns the min opacity found amongst the element and its ancestors
- *  @param {!Element|null} el
+ *  @param {?Element} el
  *  @return {number} minimum opacity value
  */
 export function getMinOpacity(el) {
@@ -56,7 +56,7 @@ function getElementOpacity(el) {
   if (!el) {
     return fullyVisibleValue;
   }
-  const {visibility, opacity} = computedStyle(win, el);
+  const {opacity, visibility} = computedStyle(win, el);
 
   if (visibility === 'hidden') {
     return fullyHiddenValue;
@@ -73,7 +73,7 @@ function getElementOpacity(el) {
 /**
  * Returns the node tree of the current element starting from
  * the document root
- * @param {!Element|null} el
+ * @param {?Element} el
  * @return {Array} node list of the element's node tree
  */
 function getElementNodeTree(el) {
diff --git a/extensions/amp-analytics/0.1/requests.js b/extensions/amp-analytics/0.1/requests.js
index ee7b3724f9282..7dde8a3d1e0d3 100644
--- a/extensions/amp-analytics/0.1/requests.js
+++ b/extensions/amp-analytics/0.1/requests.js
@@ -20,9 +20,9 @@ import {ExpansionOptions, variableServiceForDoc} from './variables';
 import {SANDBOX_AVAILABLE_VARS} from './sandbox-vars-allowlist';
 import {Services} from '../../../src/services';
 import {devAssert, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getResourceTiming} from './resource-timing';
-import {isArray, isFiniteNumber, isObject} from '../../../src/types';
+import {isArray, isFiniteNumber, isObject} from '../../../src/core/types';
 
 const BATCH_INTERVAL_MIN = 200;
 
@@ -71,9 +71,6 @@ export class RequestHandler {
     /** @private {?Promise<string>} */
     this.baseUrlPromise_ = null;
 
-    /** @private {?Promise<string>} */
-    this.baseUrlTemplatePromise_ = null;
-
     /** @private {?Promise<string>} */
     this.requestOriginPromise_ = null;
 
@@ -116,9 +113,9 @@ export class RequestHandler {
    * Real ping may be batched and send out later.
    * @param {?JsonObject} configParams
    * @param {!JsonObject} trigger
-   * @param {!./variables.ExpansionOptions} expansionOption
+   * @param {!./variables.ExpansionOptions} expansionOptions
    */
-  send(configParams, trigger, expansionOption) {
+  send(configParams, trigger, expansionOptions) {
     const isImportant = trigger['important'] === true;
     if (!this.reportRequest_ && !isImportant) {
       // Ignore non important trigger out reportWindow
@@ -135,52 +132,29 @@ export class RequestHandler {
     );
 
     if (!this.baseUrlPromise_) {
-      expansionOption.freezeVar('extraUrlParams');
+      expansionOptions.freezeVar('extraUrlParams');
 
-      this.baseUrlTemplatePromise_ = this.variableService_.expandTemplate(
+      this.baseUrlPromise_ = this.expandTemplateUrl_(
         this.baseUrl,
-        expansionOption,
-        this.element_,
-        bindings,
-        this.allowlist_
+        expansionOptions,
+        bindings
       );
-
-      this.baseUrlPromise_ = this.baseUrlTemplatePromise_.then((baseUrl) => {
-        return this.urlReplacementService_.expandUrlAsync(
-          baseUrl,
-          bindings,
-          this.allowlist_
-        );
-      });
     }
 
     // expand requestOrigin if it is declared
     if (!this.requestOriginPromise_ && this.requestOrigin_) {
       // do not encode vars in request origin
-      const requestOriginExpansionOpt = new ExpansionOptions(
-        expansionOption.vars,
-        expansionOption.iterations,
-        true // opt_noEncode
+      const requestOriginExpansionOptions = new ExpansionOptions(
+        expansionOptions.vars,
+        expansionOptions.iterations,
+        /* opt_noEncode */ true
       );
 
-      this.requestOriginPromise_ = this.variableService_
-        // expand variables in request origin
-        .expandTemplate(
-          this.requestOrigin_,
-          requestOriginExpansionOpt,
-          this.element_,
-          bindings,
-          this.allowlist_
-        )
-        // substitute in URL values e.g. DOCUMENT_REFERRER -> https://example.com
-        .then((expandedRequestOrigin) => {
-          return this.urlReplacementService_.expandUrlAsync(
-            expandedRequestOrigin,
-            bindings,
-            this.allowlist_,
-            true // opt_noEncode
-          );
-        });
+      this.requestOriginPromise_ = this.expandTemplateUrl_(
+        this.requestOrigin_,
+        requestOriginExpansionOptions,
+        bindings
+      );
     }
 
     const params = {...configParams, ...trigger['extraUrlParams']};
@@ -189,7 +163,7 @@ export class RequestHandler {
       this.variableService_,
       this.urlReplacementService_,
       params,
-      expansionOption,
+      expansionOptions,
       bindings,
       this.element_,
       this.allowlist_
@@ -222,6 +196,30 @@ export class RequestHandler {
     }
   }
 
+  /**
+   * @param {string} url
+   * @param {!ExpansionOptions} expansionOptions
+   * @param {!Object<string, (!../../../src/service/variable-source.ResolverReturnDef|!../../../src/service/variable-source.SyncResolverDef)>=} bindings
+   * @return {!Promise<string>}
+   */
+  expandTemplateUrl_(url, expansionOptions, bindings) {
+    return this.variableService_
+      .expandTemplate(
+        url,
+        expansionOptions,
+        this.element_,
+        bindings,
+        this.allowlist_
+      )
+      .then((url) =>
+        this.urlReplacementService_
+          .expandUrlAsync(url, bindings, this.allowlist_)
+          .catch((e) =>
+            userAssert(false, `Could not expand URL "${url}": ${e.message}`)
+          )
+      );
+  }
+
   /**
    * Function that schedule the actual request send.
    * @param {boolean} isImmediate
@@ -245,18 +243,17 @@ export class RequestHandler {
    */
   fire_() {
     const {
-      requestOriginPromise_: requestOriginPromise,
-      baseUrlTemplatePromise_: baseUrlTemplatePromise,
       baseUrlPromise_: baseUrlPromise,
       batchSegmentPromises_: segmentPromises,
+      requestOriginPromise_: requestOriginPromise,
     } = this;
     const trigger = /** @type {!JsonObject} */ (this.lastTrigger_);
     this.reset_();
 
-    // preconnect to requestOrigin if available, otherwise baseUrlTemplate
+    // preconnect to requestOrigin if available, otherwise baseUrl
     const preconnectPromise = requestOriginPromise
       ? requestOriginPromise
-      : baseUrlTemplatePromise;
+      : baseUrlPromise;
 
     preconnectPromise.then((preUrl) => {
       this.preconnect_.url(this.ampdoc_, preUrl, true);
@@ -273,6 +270,7 @@ export class RequestHandler {
       if (batchSegments.length === 0) {
         return;
       }
+
       // TODO: iframePing will not work with batch. Add a config validation.
       if (trigger['iframePing']) {
         userAssert(
@@ -297,7 +295,6 @@ export class RequestHandler {
   reset_() {
     this.queueSize_ = 0;
     this.baseUrlPromise_ = null;
-    this.baseUrlTemplatePromise_ = null;
     this.batchSegmentPromises_ = [];
     this.lastTrigger_ = null;
   }
@@ -468,6 +465,7 @@ function expandExtraUrlParams(
   element,
   opt_allowlist
 ) {
+  const newParams = {};
   const requestPromises = [];
   // Don't encode param values here,
   // as we'll do it later in the getExtraUrlParamsString call.
@@ -477,27 +475,41 @@ function expandExtraUrlParams(
     true /* noEncode */
   );
 
-  const expandObject = (params, key) => {
-    const value = params[key];
+  const expandObject = (data, key, expandedData) => {
+    const value = data[key];
 
     if (typeof value === 'string') {
+      expandedData[key] = undefined;
       const request = variableService
         .expandTemplate(value, option, element)
         .then((value) =>
           urlReplacements.expandStringAsync(value, bindings, opt_allowlist)
         )
-        .then((value) => (params[key] = value));
+        .then((value) => {
+          expandedData[key] = value;
+        });
       requestPromises.push(request);
     } else if (isArray(value)) {
-      /** @type {!Array} */ (value).forEach((_, index) =>
-        expandObject(value, index)
-      );
+      expandedData[key] = [];
+      for (let index = 0; index < value.length; index++) {
+        expandObject(value, index, expandedData[key]);
+      }
     } else if (isObject(value) && value !== null) {
-      Object.keys(value).forEach((key) => expandObject(value, key));
+      expandedData[key] = {};
+      const valueKeys = Object.keys(value);
+      for (let index = 0; index < valueKeys.length; index++) {
+        expandObject(value, valueKeys[index], expandedData[key]);
+      }
+    } else {
+      // Number, bool, null
+      expandedData[key] = value;
     }
   };
 
-  Object.keys(params).forEach((key) => expandObject(params, key));
+  const paramKeys = Object.keys(params);
+  for (let index = 0; index < paramKeys.length; index++) {
+    expandObject(params, paramKeys[index], newParams);
+  }
 
-  return Promise.all(requestPromises).then(() => params);
+  return Promise.all(requestPromises).then(() => newParams);
 }
diff --git a/extensions/amp-analytics/0.1/resource-timing.js b/extensions/amp-analytics/0.1/resource-timing.js
index 3a1257315a369..628a90142ec07 100644
--- a/extensions/amp-analytics/0.1/resource-timing.js
+++ b/extensions/amp-analytics/0.1/resource-timing.js
@@ -15,9 +15,8 @@
  */
 
 import {ExpansionOptions, variableServiceForDoc} from './variables';
-import {findIndex} from '../../../src/utils/array';
-import {isObject} from '../../../src/types';
-import {parseUrlDeprecated} from '../../../src/url';
+import {findIndex} from '../../../src/core/types/array';
+import {isObject} from '../../../src/core/types';
 import {user} from '../../../src/log';
 
 /**
@@ -120,9 +119,9 @@ function validateResourceTimingSpec(spec) {
  * @return {!Array<!PerformanceResourceTiming>}
  */
 function getResourceTimingEntries(win) {
-  return /** @type {!Array<!PerformanceResourceTiming>} */ (win.performance.getEntriesByType(
-    'resource'
-  ));
+  return /** @type {!Array<!PerformanceResourceTiming>} */ (
+    win.performance.getEntriesByType('resource')
+  );
 }
 
 /**
@@ -163,7 +162,7 @@ function entryToExpansionOptions(entry, name, format) {
  * @return {?string} The name of the entry, or null if no matching name exists.
  */
 function nameForEntry(entry, resourcesByHost) {
-  const url = parseUrlDeprecated(entry.name);
+  const url = entry.name;
   for (let i = 0; i < resourcesByHost.length; ++i) {
     const {hostPattern, resources} = resourcesByHost[i];
     if (!hostPattern.test(url.host)) {
diff --git a/extensions/amp-analytics/0.1/sandbox-vars-allowlist.js b/extensions/amp-analytics/0.1/sandbox-vars-allowlist.js
index 4b08a7fc9f9d4..50e78cc64727a 100644
--- a/extensions/amp-analytics/0.1/sandbox-vars-allowlist.js
+++ b/extensions/amp-analytics/0.1/sandbox-vars-allowlist.js
@@ -19,34 +19,34 @@
  * @const {!Object<string, boolean>}
  */
 export const SANDBOX_AVAILABLE_VARS = {
-  'RANDOM': true,
-  'CANONICAL_URL': true,
+  'AMPDOC_HOST': true,
+  'AMPDOC_HOSTNAME': true,
+  'AMPDOC_URL': true,
+  'AMP_VERSION': true,
+  'AVAILABLE_SCREEN_HEIGHT': true,
+  'AVAILABLE_SCREEN_WIDTH': true,
+  'BACKGROUND_STATE': true,
+  'BROWSER_LANGUAGE': true,
   'CANONICAL_HOST': true,
   'CANONICAL_HOSTNAME': true,
   'CANONICAL_PATH': true,
-  'AMPDOC_URL': true,
-  'AMPDOC_HOST': true,
-  'AMPDOC_HOSTNAME': true,
-  'SOURCE_URL': true,
+  'CANONICAL_URL': true,
+  'DOCUMENT_CHARSET': true,
+  'FIRST_CONTENTFUL_PAINT': true,
+  'FIRST_VIEWPORT_READY': true,
+  'MAKE_BODY_VISIBLE': true,
+  'RANDOM': true,
+  'SCREEN_COLOR_DEPTH': true,
+  'SCREEN_HEIGHT': true,
+  'SCREEN_WIDTH': true,
   'SOURCE_HOST': true,
   'SOURCE_HOSTNAME': true,
   'SOURCE_PATH': true,
+  'SOURCE_URL': true,
   'TIMESTAMP': true,
   'TIMEZONE': true,
   'TIMEZONE_CODE': true,
+  'USER_AGENT': true,
   'VIEWPORT_HEIGHT': true,
   'VIEWPORT_WIDTH': true,
-  'SCREEN_WIDTH': true,
-  'SCREEN_HEIGHT': true,
-  'AVAILABLE_SCREEN_HEIGHT': true,
-  'AVAILABLE_SCREEN_WIDTH': true,
-  'SCREEN_COLOR_DEPTH': true,
-  'DOCUMENT_CHARSET': true,
-  'BROWSER_LANGUAGE': true,
-  'AMP_VERSION': true,
-  'BACKGROUND_STATE': true,
-  'USER_AGENT': true,
-  'FIRST_CONTENTFUL_PAINT': true,
-  'FIRST_VIEWPORT_READY': true,
-  'MAKE_BODY_VISIBLE': true,
 };
diff --git a/extensions/amp-analytics/0.1/scroll-manager.js b/extensions/amp-analytics/0.1/scroll-manager.js
index 714480a440d78..1cba7e7617b34 100644
--- a/extensions/amp-analytics/0.1/scroll-manager.js
+++ b/extensions/amp-analytics/0.1/scroll-manager.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Observable} from '../../../src/observable';
+import {Observable} from '../../../src/core/data-structures/observable';
 import {Services} from '../../../src/services';
 import {devAssert} from '../../../src/log';
 
@@ -51,7 +51,7 @@ export class ScrollManager {
     /** @const @private {!../../../src/service/mutator-interface.MutatorInterface} */
     this.mutator_ = Services.mutatorForDoc(root.ampdoc);
 
-    /** @private {!UnlistenDef|null} */
+    /** @private {?UnlistenDef} */
     this.viewportOnChangedUnlistener_ = null;
 
     /** @private {!Observable<!./scroll-manager.ScrollEventDef>} */
@@ -95,10 +95,10 @@ export class ScrollManager {
       // In the case of shadow/embedded documents, the root element's
       // layoutRect is relative to the parent doc's origin
       const {
-        top: scrollTop,
+        height: scrollHeight,
         left: scrollLeft,
+        top: scrollTop,
         width: scrollWidth,
-        height: scrollHeight,
       } = initRootElementRect;
 
       /** {./scroll-manager.ScrollEventDef} */
@@ -143,10 +143,10 @@ export class ScrollManager {
       const {height: initialScrollHeight, width: initialScrollWidth} = rects[0];
       // Current root layout rectangle
       const {
-        top: scrollTop,
+        height: scrollHeight,
         left: scrollLeft,
+        top: scrollTop,
         width: scrollWidth,
-        height: scrollHeight,
       } = rects[1];
       /** {./scroll-manager.ScrollEventDef} */
       const scrollEvent = {
diff --git a/extensions/amp-analytics/0.1/test-e2e/test-iframe-transport.js b/extensions/amp-analytics/0.1/test-e2e/test-iframe-transport.js
index 95900c803127b..937790baa95c5 100644
--- a/extensions/amp-analytics/0.1/test-e2e/test-iframe-transport.js
+++ b/extensions/amp-analytics/0.1/test-e2e/test-iframe-transport.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'amp-analytics iframe transport',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amphtml-ads/botguard.a4a.html',
+    fixture: 'amphtml-ads/botguard.a4a.html',
     environments: ['a4a-fie'],
   },
   (env) => {
diff --git a/extensions/amp-analytics/0.1/test/test-amp-analytics.js b/extensions/amp-analytics/0.1/test/test-amp-analytics.js
index 4f1faaa8edc59..4486bfe96f295 100644
--- a/extensions/amp-analytics/0.1/test/test-amp-analytics.js
+++ b/extensions/amp-analytics/0.1/test/test-amp-analytics.js
@@ -34,6 +34,7 @@ import {
 import {installCryptoService} from '../../../../src/service/crypto-impl';
 import {installUserNotificationManagerForTesting} from '../../../amp-user-notification/0.1/amp-user-notification';
 import {instrumentationServiceForDocForTesting} from '../instrumentation';
+import {macroTask} from '../../../../testing/yield';
 
 describes.realWin(
   'amp-analytics',
@@ -152,7 +153,6 @@ describes.realWin(
 
       el.connectedCallback();
       const analytics = new AmpAnalytics(el);
-      analytics.createdCallback();
       analytics.buildCallback();
       return analytics;
     }
@@ -201,7 +201,6 @@ describes.realWin(
         const analytics = new AmpAnalytics(el);
         doc.body.appendChild(el);
         el.connectedCallback();
-        analytics.createdCallback();
         analytics.buildCallback();
         // Initialization has not started.
         expect(analytics.iniPromise_).to.be.null;
@@ -216,20 +215,22 @@ describes.realWin(
         el.textContent = config;
         const whenFirstVisibleStub = env.sandbox
           .stub(ampdoc, 'whenFirstVisible')
-          .callsFake(() => new Promise(function () {}));
+          .callsFake(() => Promise.resolve());
         doc.body.appendChild(el);
         const analytics = new AmpAnalytics(el);
         el.getAmpDoc = () => ampdoc;
         analytics.buildCallback();
         const iniPromise = analytics.iniPromise_;
         expect(iniPromise).to.be.ok;
-        expect(el).to.have.attribute('hidden');
         // Viewer.whenFirstVisible is the first blocking call to initialize.
         expect(whenFirstVisibleStub).to.be.calledOnce;
 
         // Repeated call, returns pre-created promise.
         expect(analytics.ensureInitialized_()).to.equal(iniPromise);
         expect(whenFirstVisibleStub).to.be.calledOnce;
+        return iniPromise.then(() => {
+          expect(el).to.have.attribute('hidden');
+        });
       });
 
       it('does not send a hit when multiple child tags exist', function () {
@@ -250,7 +251,6 @@ describes.realWin(
         doc.body.appendChild(el);
         const analytics = new AmpAnalytics(el);
         el.connectedCallback();
-        analytics.createdCallback();
         analytics.buildCallback();
 
         return waitForNoSendRequest(analytics);
@@ -266,7 +266,6 @@ describes.realWin(
         doc.body.appendChild(el);
         const analytics = new AmpAnalytics(el);
         el.connectedCallback();
-        analytics.createdCallback();
         analytics.buildCallback();
 
         return waitForNoSendRequest(analytics);
@@ -399,7 +398,7 @@ describes.realWin(
         });
       });
 
-      it('fills internally provided trigger vars', function () {
+      it('fills internally provided trigger vars', async function* () {
         const analytics = getAnalyticsTag({
           'requests': {
             'timer':
@@ -415,7 +414,7 @@ describes.realWin(
             'visibility': {'on': 'visible', 'request': 'visible'},
           },
         });
-
+        await macroTask();
         return waitForSendRequest(analytics).then(() => {
           requestVerifier.verifyRequestMatch(
             /https:\/\/e.com\/start=[0-9]+&duration=[0-9]/
@@ -457,7 +456,7 @@ describes.realWin(
         });
       });
 
-      it('updates requestCount on each request', () => {
+      it('updates requestCount on each request', async function* () {
         const analytics = getAnalyticsTag({
           'host': 'example.test',
           'requests': {
@@ -469,6 +468,7 @@ describes.realWin(
             {'on': 'visible', 'request': 'pageview2'},
           ],
         });
+        await macroTask();
         return waitForSendRequest(analytics).then(() => {
           requestVerifier.verifyRequest('/test1=1');
           requestVerifier.verifyRequest('/test2=2');
@@ -1469,7 +1469,10 @@ describes.realWin(
       beforeEach(() => {
         // Unfortunately need to fake sandbox analytics element's parent
         // to an AMP element
+        // Set the doc width/height to 1 to trigger visible event.
         doc.body.classList.add('i-amphtml-element');
+        doc.body.style.minWidth = '1px';
+        doc.body.style.minHeight = '1px';
       });
 
       afterEach(() => {
@@ -1699,12 +1702,13 @@ describes.realWin(
         analytics.getAmpDoc = () => ampdoc;
       });
 
-      it('Initializes a new Linker.', () => {
+      it('Initializes a new Linker.', async function* () {
         env.sandbox.stub(AnalyticsConfig.prototype, 'loadConfig').resolves({});
 
         const linkerStub = env.sandbox.stub(LinkerManager.prototype, 'init');
 
         analytics.buildCallback();
+        await macroTask();
         return analytics.layoutCallback().then(() => {
           expect(linkerStub.calledOnce).to.be.true;
         });
@@ -1751,6 +1755,11 @@ describes.realWin(
     describe('parentPostMessage', () => {
       let postMessageSpy;
 
+      beforeEach(() => {
+        doc.body.style.minWidth = '1px';
+        doc.body.style.minHeight = '1px';
+      });
+
       function waitForParentPostMessage(opt_max) {
         if (postMessageSpy.callCount) {
           return Promise.resolve();
diff --git a/extensions/amp-analytics/0.1/test/test-analytics-group.js b/extensions/amp-analytics/0.1/test/test-analytics-group.js
index 7d74fc19841c3..bcf58a57189b0 100644
--- a/extensions/amp-analytics/0.1/test/test-analytics-group.js
+++ b/extensions/amp-analytics/0.1/test/test-analytics-group.js
@@ -26,7 +26,7 @@ import {
   VisibilityTracker,
 } from '../events';
 import {AnalyticsGroup} from '../analytics-group.js';
-import {toggleExperiment} from '../../../../src/experiments.js';
+import {toggleExperiment} from '../../../../src/experiments';
 
 describes.realWin('AnalyticsGroup', {amp: 1}, (env) => {
   let win;
diff --git a/extensions/amp-analytics/0.1/test/test-analytics-root.js b/extensions/amp-analytics/0.1/test/test-analytics-root.js
index c953ceea951bf..2884612d11e26 100644
--- a/extensions/amp-analytics/0.1/test/test-analytics-root.js
+++ b/extensions/amp-analytics/0.1/test/test-analytics-root.js
@@ -18,13 +18,11 @@ import * as IniLoad from '../../../../src/ini-load';
 import {AmpDocShadow} from '../../../../src/service/ampdoc-impl';
 import {AmpdocAnalyticsRoot, EmbedAnalyticsRoot} from '../analytics-root';
 import {AnalyticsEventType, CustomEventTracker} from '../events';
-import {HostServices} from '../../../../src/inabox/host-services';
 import {ScrollManager} from '../scroll-manager';
 import {
   VisibilityManagerForDoc,
   VisibilityManagerForEmbed,
 } from '../visibility-manager';
-import {VisibilityManagerForMApp} from '../visibility-manager-for-mapp';
 import {toggleExperiment} from '../../../../src/experiments';
 import {user} from '../../../../src/log';
 
@@ -34,7 +32,6 @@ describes.realWin('AmpdocAnalyticsRoot', {amp: 1}, (env) => {
   let viewport;
   let root;
   let body, target, child, other;
-  let mockVisibilityInterface;
 
   beforeEach(() => {
     win = env.win;
@@ -57,10 +54,6 @@ describes.realWin('AmpdocAnalyticsRoot', {amp: 1}, (env) => {
     other.id = 'other';
     other.className = 'other';
     body.appendChild(other);
-
-    mockVisibilityInterface = {
-      onVisibilityChange: () => {},
-    };
   });
 
   it('should initialize correctly', () => {
@@ -151,30 +144,6 @@ describes.realWin('AmpdocAnalyticsRoot', {amp: 1}, (env) => {
     expect(root.getVisibilityManager()).to.equal(visibilityManager);
   });
 
-  it('should create correct visiblityManager', () => {
-    env.sandbox.stub(HostServices, 'isAvailable').callsFake(() => true);
-    env.sandbox.stub(HostServices, 'visibilityForDoc').callsFake(() => {
-      return Promise.resolve(mockVisibilityInterface);
-    });
-    return root.isUsingHostAPI().then(() => {
-      const visibilityManager = root.getVisibilityManager();
-      expect(visibilityManager).to.be.instanceOf(VisibilityManagerForMApp);
-    });
-  });
-
-  it('should fallback to correct visibilityManager', () => {
-    env.sandbox.stub(HostServices, 'isAvailable').callsFake(() => true);
-    env.sandbox.stub(HostServices, 'visibilityForDoc').callsFake(() => {
-      return Promise.reject({
-        fallback: true,
-      });
-    });
-    return root.isUsingHostAPI().then(() => {
-      const visibilityManager = root.getVisibilityManager();
-      expect(visibilityManager).to.be.instanceOf(VisibilityManagerForDoc);
-    });
-  });
-
   it('should create scroll manager', () => {
     const scrollManager = root.getScrollManager();
     expect(scrollManager).to.be.instanceOf(ScrollManager);
@@ -354,7 +323,7 @@ describes.realWin('AmpdocAnalyticsRoot', {amp: 1}, (env) => {
       });
     });
 
-    describe('get amp elements', () => {
+    describe('get elements', () => {
       let child2;
       let child3;
 
@@ -381,14 +350,15 @@ describes.realWin('AmpdocAnalyticsRoot', {amp: 1}, (env) => {
         child.classList.add('myClass');
         child2.classList.add('myClass');
         child3.classList.add('notMyClass');
-        expect(
-          await root.getAmpElements(body, ['.myClass'], null)
-        ).to.deep.equal([child, child2]);
+        expect(await root.getElements(body, ['.myClass'], null)).to.deep.equal([
+          child,
+          child2,
+        ]);
         // Check that non-experiment works
         toggleExperiment(win, 'visibility-trigger-improvements', false);
-        expect(
-          await root.getAmpElements(body, '.notMyClass', null)
-        ).to.deep.equal([child3]);
+        expect(await root.getElements(body, '.notMyClass', null)).to.deep.equal(
+          [child3]
+        );
       });
 
       it('should only find elements with data-vars-*', async () => {
@@ -399,7 +369,7 @@ describes.realWin('AmpdocAnalyticsRoot', {amp: 1}, (env) => {
         child3.classList.add('myClass');
 
         child3.removeAttribute('data-vars-id');
-        const children = await root.getAmpElements(body, ['.myClass']);
+        const children = await root.getElements(body, ['.myClass']);
         expect(spy).callCount(1);
         expect(spy).to.have.been.calledWith(
           'amp-analytics/analytics-root',
@@ -414,7 +384,7 @@ describes.realWin('AmpdocAnalyticsRoot', {amp: 1}, (env) => {
         child.id = 'myId';
         child.classList.add('myClass');
         expect(
-          await root.getAmpElements(body, ['.myClass', '#myId'], null)
+          await root.getElements(body, ['.myClass', '#myId'], null)
         ).to.deep.equal([child]);
       });
 
@@ -422,35 +392,47 @@ describes.realWin('AmpdocAnalyticsRoot', {amp: 1}, (env) => {
         child.classList.add('myClass');
         expectAsyncConsoleError(/Element ":host" not found/, 1);
         await expect(
-          root.getAmpElements(body, [':host'], null)
+          root.getElements(body, [':host'], null)
         ).to.be.rejectedWith(/Element ":host" not found​​​/);
       });
 
       it('should handle missing selector for AMP search', async () => {
         expectAsyncConsoleError(/Element "#unknown" not found/, 1);
         await expect(
-          root.getAmpElements(body, ['#unknown'], null)
+          root.getElements(body, ['#unknown'], null)
         ).to.be.rejectedWith(/Element "#unknown" not found​​​/);
       });
 
       it('should handle invalid selector', async () => {
         expectAsyncConsoleError(/Invalid query selector 12345/, 1);
-        await expect(
-          root.getAmpElements(body, [12345], null)
-        ).to.be.rejectedWith(/Invalid query selector 12345​​​/);
+        await expect(root.getElements(body, [12345], null)).to.be.rejectedWith(
+          /Invalid query selector 12345​​​/
+        );
       });
 
-      it('should fail if the found element is not AMP for AMP search', async () => {
-        expectAsyncConsoleError(/required to be an AMP element/, 1);
+      it('should find both AMP and non AMP elements within array selector', async () => {
         child.classList.remove('i-amphtml-element');
-        await expect(
-          root.getAmpElements(body, ['#child'], null)
-        ).to.be.rejectedWith(/required to be an AMP element/);
+        child.classList.add('myClass');
+        child2.classList.add('myClass');
+        expect(await root.getElements(body, ['.myClass'], null)).to.deep.equal([
+          child,
+          child2,
+        ]);
+      });
+
+      it('should find non AMP element with single selector', async () => {
+        toggleExperiment(win, 'visibility-trigger-improvements', false);
+        child.classList.remove('i-amphtml-element');
+        child.removeAttribute('data-vars-id');
+        child.classList.add('myClass');
+        expect(await root.getElements(body, '.myClass', null)).to.deep.equal([
+          child,
+        ]);
       });
 
       it('should fail if selection method is found', async () => {
         try {
-          await root.getAmpElements(body, ['#child'], 'scope');
+          await root.getElements(body, ['#child'], 'scope');
         } catch (e) {
           expect(e).to.match(
             /Cannot have selectionMethod scope defined with an array selector/
@@ -571,7 +553,7 @@ describes.realWin(
     let win;
     let embed;
     let ampdoc;
-    let parentRoot;
+    let parentAmpdoc, parentRoot;
     let root;
     let body, target, child, other;
 
@@ -580,7 +562,8 @@ describes.realWin(
       embed = env.embed;
       ampdoc = env.ampdoc;
       embed.host = ampdoc.win.document.createElement('amp-embed-host');
-      parentRoot = new AmpdocAnalyticsRoot(ampdoc);
+      parentAmpdoc = env.parentAmpdoc;
+      parentRoot = new AmpdocAnalyticsRoot(parentAmpdoc);
       root = new EmbedAnalyticsRoot(ampdoc, embed);
       body = win.document.body;
 
@@ -671,7 +654,9 @@ describes.realWin(
     it('should create visibility root', () => {
       const visibilityManager = root.getVisibilityManager();
       expect(visibilityManager).to.be.instanceOf(VisibilityManagerForEmbed);
-      expect(visibilityManager.ampdoc).to.equal(ampdoc);
+      // TODO(#22733): switch from `parentAmpdoc` to `ampdoc` once ampdoc-fie
+      // is cleaned up.
+      expect(visibilityManager.ampdoc).to.equal(parentAmpdoc);
       expect(visibilityManager.embed).to.equal(embed);
       expect(visibilityManager.parent).to.equal(
         parentRoot.getVisibilityManager()
@@ -747,7 +732,7 @@ describes.realWin(
       });
     });
 
-    describe('get amp elements', () => {
+    describe('get elements', () => {
       let child2;
       let child3;
 
@@ -769,11 +754,7 @@ describes.realWin(
         child2.setAttribute('data-vars-id', '456');
         child3.setAttribute('data-vars-id', '789');
 
-        toggleExperiment(
-          parentRoot.ampdoc.win,
-          'visibility-trigger-improvements',
-          true
-        );
+        toggleExperiment(win, 'visibility-trigger-improvements', true);
       });
 
       afterEach(() => {
@@ -782,13 +763,13 @@ describes.realWin(
       });
 
       it('should find all elements by selector', async () => {
-        const elements = await root.getAmpElements(body, ['.myClass'], null);
+        const elements = await root.getElements(body, ['.myClass'], null);
 
         expect(elements).to.deep.equals([child, child2]);
         // Check that non-experiment version works
         toggleExperiment(win, 'visibility-trigger-improvements', false);
         expect(
-          await root.getAmpElements(body, '.notMyClass', null)
+          await root.getElements(body, '.notMyClass', null)
         ).to.deep.equals([child3]);
       });
 
@@ -799,7 +780,7 @@ describes.realWin(
         parentChild.classList.add('i-amphtml-element');
         parentChild.setAttribute('data-vars-id', 'abc');
 
-        const elements = await root.getAmpElements(body, ['.myClass'], null);
+        const elements = await root.getElements(body, ['.myClass'], null);
         expect(elements).to.deep.equals([child, child2]);
       });
 
@@ -809,7 +790,7 @@ describes.realWin(
         child3.classList.add('myClass');
         child3.removeAttribute('data-vars-id');
 
-        const children = await root.getAmpElements(body, ['.myClass']);
+        const children = await root.getElements(body, ['.myClass']);
         expect(spy).callCount(1);
         expect(spy).to.have.been.calledWith(
           'amp-analytics/analytics-root',
@@ -827,24 +808,32 @@ describes.realWin(
         child2.classList.add('myClass');
         // Each selector should find both elements, but only report once
         expect(
-          await root.getAmpElements(body, ['.myClass', '#myId'], null)
+          await root.getElements(body, ['.myClass', '#myId'], null)
         ).to.deep.equal([child, child2]);
       });
 
       it('should handle missing selector for AMP search', async () => {
         expectAsyncConsoleError(/Element "#unknown" not found/, 1);
         await expect(
-          root.getAmpElements(body, ['#unknown'], null)
+          root.getElements(body, ['#unknown'], null)
         ).to.be.rejectedWith(/Element "#unknown" not found​​​/);
       });
 
-      it('should fail if the found element is not AMP for AMP search', async () => {
-        expectAsyncConsoleError(/required to be an AMP element/, 1);
+      it('should find both AMP and non AMP elements', async () => {
         child.classList.remove('i-amphtml-element');
         child.setAttribute('data-vars-id', '123');
-        await expect(
-          root.getAmpElements(body, ['#child'], null)
-        ).to.be.rejectedWith(/required to be an AMP element/);
+        expect(await root.getElements(body, ['.myClass'], null)).to.deep.equal([
+          child,
+          child2,
+        ]);
+      });
+
+      it('should find non AMP element with single selector', async () => {
+        toggleExperiment(win, 'visibility-trigger-improvements', false);
+        child.classList.remove('i-amphtml-element');
+        expect(await root.getElements(body, '.myClass', null)).to.deep.equal([
+          child,
+        ]);
       });
     });
 
diff --git a/extensions/amp-analytics/0.1/test/test-config.js b/extensions/amp-analytics/0.1/test/test-config.js
index 2289ed04d2a77..ad4441c471575 100644
--- a/extensions/amp-analytics/0.1/test/test-config.js
+++ b/extensions/amp-analytics/0.1/test/test-config.js
@@ -17,7 +17,7 @@
 import {AnalyticsConfig, expandConfigRequest, mergeObjects} from '../config';
 import {Services} from '../../../../src/services';
 import {installDocService} from '../../../../src/service/ampdoc-impl';
-import {map} from '../../../../src/utils/object';
+import {map} from '../../../../src/core/types/object';
 import {stubService} from '../../../../testing/test-helper';
 import {user} from '../../../../src/log';
 
diff --git a/extensions/amp-analytics/0.1/test/test-cookie-writer.js b/extensions/amp-analytics/0.1/test/test-cookie-writer.js
index 48fe04aba87ce..58b8ef16ce42b 100644
--- a/extensions/amp-analytics/0.1/test/test-cookie-writer.js
+++ b/extensions/amp-analytics/0.1/test/test-cookie-writer.js
@@ -15,9 +15,9 @@
  */
 
 import * as cookie from '../../../../src/cookies';
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {CookieWriter} from '../cookie-writer';
-import {dict} from '../../../../src/utils/object';
+import {dict} from '../../../../src/core/types/object';
 import {installLinkerReaderService} from '../linker-reader';
 import {installVariableServiceForTesting} from '../variables';
 import {stubService} from '../../../../testing/test-helper';
@@ -214,8 +214,7 @@ describes.fakeWin('amp-analytics.cookie-writer value', {amp: true}, (env) => {
   beforeEach(() => {
     win = env.win;
     doc = env.ampdoc;
-    clock = lolex.install({
-      target: window,
+    clock = fakeTimers.withGlobal(window).install({
       now: new Date('2018-01-01T08:00:00Z'),
     });
     installVariableServiceForTesting(doc);
@@ -290,7 +289,7 @@ describes.fakeWin('amp-analytics.cookie-writer value', {amp: true}, (env) => {
     });
   });
 
-  it('should write cookie with custom expiration (number value)', () => {
+  it('should write cookie with custom expiration (number value) and default to SameSite=Lax', () => {
     win.location = 'https://www.example.test/';
     const cookieWriter = new CookieWriter(
       win,
@@ -312,6 +311,99 @@ describes.fakeWin('amp-analytics.cookie-writer value', {amp: true}, (env) => {
     });
   });
 
+  it('should write cookie with the specified sameSite (lowercase S) value', () => {
+    win.location = 'https://www.example.test/';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'cookieMaxAge': 604800, // 1 week in seconds
+          'sameSite': 'Lax',
+          'aCookie': {
+            'value': '123',
+          },
+        },
+      })
+    );
+    return cookieWriter.write().then(() => {
+      expect(win.document.lastSetCookieRaw).to.equal(
+        'aCookie=123; path=/; domain=example.test; ' +
+          'expires=Mon, 08 Jan 2018 08:00:00 GMT; SameSite=Lax'
+      );
+    });
+  });
+
+  it('should write cookie with the specified SameSite (capital S) value', () => {
+    win.location = 'https://www.example.test/';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'cookieMaxAge': 604800, // 1 week in seconds
+          'SameSite': 'Strict',
+          'aCookie': {
+            'value': '123',
+          },
+        },
+      })
+    );
+    return cookieWriter.write().then(() => {
+      expect(win.document.lastSetCookieRaw).to.equal(
+        'aCookie=123; path=/; domain=example.test; ' +
+          'expires=Mon, 08 Jan 2018 08:00:00 GMT; SameSite=Strict'
+      );
+    });
+  });
+
+  it('should override the sameSite value', () => {
+    win.location = 'https://www.example.test/';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'cookieMaxAge': 604800, // 1 week in seconds
+          'sameSite': 'Lax',
+          'aCookie': {
+            'value': '123',
+            'sameSite': 'Strict',
+          },
+        },
+      })
+    );
+    return cookieWriter.write().then(() => {
+      expect(win.document.lastSetCookieRaw).to.equal(
+        'aCookie=123; path=/; domain=example.test; ' +
+          'expires=Mon, 08 Jan 2018 08:00:00 GMT; SameSite=Strict'
+      );
+    });
+  });
+
+  it('should append Secure for when sameSite value is "None"', () => {
+    win.location = 'https://www.example.test/';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'cookieMaxAge': 604800, // 1 week in seconds
+          'aCookie': {
+            'value': 'testValue',
+            'sameSite': 'None',
+          },
+        },
+      })
+    );
+    return cookieWriter.write().then(() => {
+      expect(win.document.lastSetCookieRaw).to.equal(
+        'aCookie=testValue; path=/; domain=example.test; ' +
+          'expires=Mon, 08 Jan 2018 08:00:00 GMT; SameSite=None; Secure'
+      );
+    });
+  });
+
   it('should write cookie with custom expiration (string value)', () => {
     win.location = 'https://www.example.test/';
     const cookieWriter = new CookieWriter(
diff --git a/extensions/amp-analytics/0.1/test/test-crc32.js b/extensions/amp-analytics/0.1/test/test-crc32.js
index 4804460e7a599..407c1c42ce39d 100644
--- a/extensions/amp-analytics/0.1/test/test-crc32.js
+++ b/extensions/amp-analytics/0.1/test/test-crc32.js
@@ -59,7 +59,7 @@ const testVectors = [
   },
 ];
 
-describe('CRC32 Implementation', () => {
+describes.sandboxed('CRC32 Implementation', {}, () => {
   testVectors.forEach((test, i) => {
     it(`test #${i}: "${test.input}"`, () => {
       expect(crc32(test.input)).to.equal(test.output);
diff --git a/extensions/amp-analytics/0.1/test/test-events.js b/extensions/amp-analytics/0.1/test/test-events.js
index 50463533bfd72..b8d928fb5a117 100644
--- a/extensions/amp-analytics/0.1/test/test-events.js
+++ b/extensions/amp-analytics/0.1/test/test-events.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {
   AmpStoryEventTracker,
   AnalyticsEvent,
@@ -29,8 +29,8 @@ import {
   trackerTypeForTesting,
 } from '../events';
 import {AmpdocAnalyticsRoot} from '../analytics-root';
-import {Deferred} from '../../../../src/utils/promise';
-import {Signals} from '../../../../src/utils/signals';
+import {Deferred} from '../../../../src/core/data-structures/promise';
+import {Signals} from '../../../../src/core/data-structures/signals';
 import {macroTask} from '../../../../testing/yield';
 import {toggleExperiment} from '../../../../src/experiments';
 
@@ -41,9 +41,7 @@ describes.realWin('Events', {amp: 1}, (env) => {
   let handler;
   let analyticsElement;
   let target;
-  let target2;
   let child;
-  let child2;
 
   beforeEach(() => {
     win = env.win;
@@ -58,17 +56,53 @@ describes.realWin('Events', {amp: 1}, (env) => {
     target.classList.add('target');
     win.document.body.appendChild(target);
 
-    target2 = win.document.createElement('div');
-    target2.classList.add('target2');
-    win.document.body.appendChild(target2);
-
     child = win.document.createElement('div');
     child.classList.add('child');
     target.appendChild(child);
+  });
+
+  describe('AnalyticsEvent', () => {
+    it('should handle data-vars', () => {
+      let analyticsEvent = new AnalyticsEvent(target, 'custom-event', {
+        'var': 'test',
+      });
+      expect(analyticsEvent.vars).to.deep.equal({
+        'var': 'test',
+      });
+
+      target.setAttribute('data-params-test-param', 'error');
+      target.setAttribute('data-vars-test-var', 'default');
+      analyticsEvent = new AnalyticsEvent(target, 'custom-event');
+      expect(analyticsEvent.vars).to.deep.equal({
+        'testVar': 'default',
+      });
 
-    child2 = win.document.createElement('div');
-    child2.classList.add('child2');
-    target2.appendChild(child2);
+      analyticsEvent = new AnalyticsEvent(
+        target,
+        'custom-event',
+        {
+          'var': 'test',
+        },
+        false
+      );
+      expect(analyticsEvent.vars).to.deep.equal({
+        'var': 'test',
+      });
+    });
+
+    it('event vars should override data-vars', () => {
+      target.setAttribute('data-vars-test-var', 'error');
+      target.setAttribute('data-vars-test-var1', 'test1');
+      const analyticsEvent = new AnalyticsEvent(target, 'custom-event', {
+        'testVar': 'override',
+        'someVar': 'test',
+      });
+      expect(analyticsEvent.vars).to.deep.equal({
+        'testVar': 'override',
+        'testVar1': 'test1',
+        'someVar': 'test',
+      });
+    });
   });
 
   describe('AnalyticsEventType', () => {
@@ -1135,7 +1169,7 @@ describes.realWin('Events', {amp: 1}, (env) => {
     let tracker;
 
     beforeEach(() => {
-      clock = lolex.install({target: root.ampdoc.win});
+      clock = fakeTimers.withGlobal(root.ampdoc.win).install();
       tracker = root.getTracker(AnalyticsEventType.TIMER, TimerEventTracker);
     });
 
@@ -1776,12 +1810,12 @@ describes.realWin('Events', {amp: 1}, (env) => {
     let saveCallback;
     let matchEmptySpec;
     let matchFunc;
-    let getAmpElementSpy;
+    let getElementSpy;
 
     beforeEach(() => {
       tracker = root.getTracker('visible', VisibilityTracker);
       visibilityManagerMock = env.sandbox.mock(root.getVisibilityManager());
-      getAmpElementSpy = env.sandbox.spy(root, 'getAmpElement');
+      getElementSpy = env.sandbox.spy(root, 'getElement');
       tracker.waitForTrackers_['ini-load'] = root.getTracker(
         'ini-load',
         IniLoadTracker
@@ -1790,6 +1824,16 @@ describes.realWin('Events', {amp: 1}, (env) => {
         tracker.waitForTrackers_['ini-load']
       );
 
+      target.parentNode.removeChild(target);
+
+      target = win.document.createElement('amp-list');
+      target.classList.add('target');
+      win.document.body.appendChild(target);
+
+      child = win.document.createElement('div');
+      child.classList.add('child');
+      target.appendChild(child);
+
       target.classList.add('i-amphtml-element');
       targetSignals = new Signals();
       target.signals = () => targetSignals;
@@ -1838,7 +1882,8 @@ describes.realWin('Events', {amp: 1}, (env) => {
           /* createReportReadyPromiseFunc */ null,
           saveCallback
         )
-        .once();
+        .once()
+        .returns(() => {});
       const res = tracker.add(analyticsElement, 'visible', {}, eventResolver);
       expect(res).to.be.a('function');
       await macroTask();
@@ -1857,7 +1902,8 @@ describes.realWin('Events', {amp: 1}, (env) => {
       visibilityManagerMock
         .expects('listenRoot')
         .withExactArgs(matchEmptySpec, readyPromise, null, saveCallback)
-        .once();
+        .once()
+        .returns(() => {});
       const res = tracker.add(
         analyticsElement,
         'visible',
@@ -1886,7 +1932,8 @@ describes.realWin('Events', {amp: 1}, (env) => {
           /* createReportReadyPromiseFunc */ null,
           saveCallback
         )
-        .once();
+        .once()
+        .returns(() => {});
       const res = tracker.add(
         analyticsElement,
         'visible',
@@ -1929,7 +1976,7 @@ describes.realWin('Events', {amp: 1}, (env) => {
           eventResolver
         );
         expect(res).to.be.a('function');
-        const unlistenReady = getAmpElementSpy.returnValues[0];
+        const unlistenReady = getElementSpy.returnValues[0];
         // #getAmpElement Promise
         await unlistenReady;
         // #assertMeasurable_ Promise
@@ -1951,6 +1998,7 @@ describes.realWin('Events', {amp: 1}, (env) => {
         let eventsSpy;
         let res;
         let error;
+        let target2;
 
         beforeEach(() => {
           toggleExperiment(win, 'visibility-trigger-improvements', true);
@@ -1961,6 +2009,10 @@ describes.realWin('Events', {amp: 1}, (env) => {
 
           eventsSpy = env.sandbox.spy(tracker, 'onEvent_');
 
+          target2 = win.document.createElement('amp-list');
+          win.document.body.appendChild(target2);
+
+          target2.classList.add('target2');
           target2.classList.add('i-amphtml-element');
           targetSignals2 = new Signals();
           target2.signals = () => targetSignals2;
@@ -2035,8 +2087,8 @@ describes.realWin('Events', {amp: 1}, (env) => {
             .once();
           // Dispose function
           res = tracker.add(analyticsElement, 'visible', config, eventResolver);
-          const unlistenReady = getAmpElementSpy.returnValues[0];
-          const unlistenReady2 = getAmpElementSpy.returnValues[1];
+          const unlistenReady = getElementSpy.returnValues[0];
+          const unlistenReady2 = getElementSpy.returnValues[1];
           // #getAmpElement Promise
           await unlistenReady;
           await unlistenReady2;
@@ -2106,7 +2158,7 @@ describes.realWin('Events', {amp: 1}, (env) => {
         eventResolver
       );
       expect(res).to.be.a('function');
-      const unlistenReady = getAmpElementSpy.returnValues[0];
+      const unlistenReady = getElementSpy.returnValues[0];
       // #getAmpElement Promise
       await unlistenReady;
       // #assertMeasurable_ Promise
@@ -2131,8 +2183,8 @@ describes.realWin('Events', {amp: 1}, (env) => {
         .returns(null)
         .once();
       tracker.add(analyticsElement, 'hidden', config, eventResolver);
-      const unlistenReady = getAmpElementSpy.returnValues[0];
-      // #getAmpElement Promise
+      const unlistenReady = getElementSpy.returnValues[0];
+      // #getElement Promise
       yield unlistenReady;
       // #assertMeasurable_ Promise
       yield macroTask();
@@ -2193,6 +2245,50 @@ describes.realWin('Events', {amp: 1}, (env) => {
           return promise2;
         });
       });
+
+      describe('non AMP elements', () => {
+        it('with non AMP element and waitFor NONE or null', () => {
+          const element = win.document.createElement('p');
+          expect(tracker.getReadyPromise('none', element)).to.be.null;
+          expect(tracker.getReadyPromise(null, element)).to.be.null;
+          expect(tracker.getReadyPromise(undefined, element)).to.be.null;
+        });
+
+        it('error with non AMP element and waitFor not NONE or null', () => {
+          const element = win.document.createElement('p');
+          expect(() => tracker.getReadyPromise('ini-load', element)).to.throw(
+            /waitFor for non-AMP elements must be none or null. Found ini-load/
+          );
+        });
+
+        it('should set default waitFor for AMP element', async () => {
+          const element = win.document.createElement('amp-list');
+          tracker.waitForTrackers_['render-start'] = root.getTracker(
+            'render-start',
+            SignalTracker
+          );
+          const signalTrackerMock = env.sandbox.mock(
+            tracker.waitForTrackers_['render-start']
+          );
+          const iniLoadTrackerMock = env.sandbox.mock(
+            tracker.waitForTrackers_['ini-load']
+          );
+
+          await tracker.getReadyPromise(null, element);
+          iniLoadTrackerMock
+            .expects('getElementSignal')
+            .withExactArgs('ini-load', element)
+            .returns(Promise.resolve())
+            .once();
+
+          await tracker.getReadyPromise('render-start', element);
+          signalTrackerMock
+            .expects('getElementSignal')
+            .withExactArgs('render-start')
+            .returns(Promise.resolve())
+            .once();
+        });
+      });
     });
 
     describe('should create correct reportReadyPromise', () => {
@@ -2278,31 +2374,5 @@ describes.realWin('Events', {amp: 1}, (env) => {
         });
       });
     });
-
-    describe('Unmeasurable with HostAPI', () => {
-      beforeEach(() => {
-        env.sandbox.stub(tracker.root, 'isUsingHostAPI').callsFake(() => {
-          return Promise.resolve(true);
-        });
-      });
-
-      it('element level selector is unmeasurable', () => {
-        expectAsyncConsoleError(
-          /Element  .target that is not root is not supported with host API/
-        );
-        const config = {visibilitySpec: {selector: '.target'}};
-        tracker.add(analyticsElement, 'visible', config, eventResolver);
-      });
-
-      it('reportWhen documentExit is unmeasurable', () => {
-        expectAsyncConsoleError(
-          /reportWhen : documentExit is not supported with host API/
-        );
-        const config = {
-          visibilitySpec: {selector: ':root', reportWhen: 'documentExit'},
-        };
-        tracker.add(analyticsElement, 'visible', config, eventResolver);
-      });
-    });
   });
 });
diff --git a/extensions/amp-analytics/0.1/test/test-iframe-transport-client.js b/extensions/amp-analytics/0.1/test/test-iframe-transport-client.js
index b21c1fddb6d2e..1c115cb28d048 100644
--- a/extensions/amp-analytics/0.1/test/test-iframe-transport-client.js
+++ b/extensions/amp-analytics/0.1/test/test-iframe-transport-client.js
@@ -28,7 +28,7 @@ function createUniqueId() {
   return String(++nextId);
 }
 
-describe('iframe-transport-client', () => {
+describes.sandboxed('iframe-transport-client', {}, (env) => {
   let iframeTransportClient;
   let sentinel;
 
@@ -123,7 +123,7 @@ describe('iframe-transport-client', () => {
   });
 
   it('calls onNewContextInstance', () => {
-    const onNewContextInstanceSpy = window.sandbox.spy();
+    const onNewContextInstanceSpy = env.sandbox.spy();
     window.onNewContextInstance = (ctx) => onNewContextInstanceSpy(ctx);
     const ctx = new IframeTransportContext(
       window,
@@ -137,7 +137,7 @@ describe('iframe-transport-client', () => {
   });
 
   it('Sets listener and baseMessage properly', () => {
-    const onNewContextInstanceSpy = window.sandbox.spy();
+    const onNewContextInstanceSpy = env.sandbox.spy();
     window.onNewContextInstance = (ctx) => onNewContextInstanceSpy(ctx);
     const ctx = new IframeTransportContext(
       window,
@@ -149,8 +149,8 @@ describe('iframe-transport-client', () => {
     expect(ctx.baseMessage_).to.not.be.null;
     expect(ctx.baseMessage_.creativeId).to.equal('my_creative');
     expect(ctx.baseMessage_.vendor).to.equal('my_vendor');
-    const listener1 = window.sandbox.spy();
-    const listener2 = window.sandbox.spy();
+    const listener1 = env.sandbox.spy();
+    const listener2 = env.sandbox.spy();
     ctx.onAnalyticsEvent(listener1);
     expect(ctx.listener_).to.equal(listener1);
     ctx.onAnalyticsEvent(listener2);
@@ -159,7 +159,7 @@ describe('iframe-transport-client', () => {
   });
 
   it('dispatches event', () => {
-    const onNewContextInstanceSpy = window.sandbox.spy();
+    const onNewContextInstanceSpy = env.sandbox.spy();
     window.onNewContextInstance = (ctx) => onNewContextInstanceSpy(ctx);
     const ctx = new IframeTransportContext(
       window,
@@ -167,7 +167,7 @@ describe('iframe-transport-client', () => {
       'my_creative',
       'my_vendor'
     );
-    const listener = window.sandbox.spy();
+    const listener = env.sandbox.spy();
     ctx.onAnalyticsEvent(listener);
     const event = 'Something important happened';
     ctx.dispatch(event);
@@ -177,7 +177,7 @@ describe('iframe-transport-client', () => {
   });
 
   it('sends response', () => {
-    const onNewContextInstanceSpy = window.sandbox.spy();
+    const onNewContextInstanceSpy = env.sandbox.spy();
     window.onNewContextInstance = (ctx) => onNewContextInstanceSpy(ctx);
     // This const exists solely to avoid triggering a false positive on the
     // presubmit rule that says you can't call stub() on a cross-domain iframe.
@@ -189,7 +189,7 @@ describe('iframe-transport-client', () => {
       'my_vendor'
     );
     const response = {foo: 'bar', answer: '42'};
-    window.sandbox.stub(imc, 'sendMessage').callsFake((type, opt_payload) => {
+    env.sandbox.stub(imc, 'sendMessage').callsFake((type, opt_payload) => {
       expect(type).to.equal(MessageType.IFRAME_TRANSPORT_RESPONSE);
       expect(opt_payload).to.not.be.null;
       expect(opt_payload.creativeId).to.equal('my_creative');
diff --git a/extensions/amp-analytics/0.1/test/test-instrumentation.js b/extensions/amp-analytics/0.1/test/test-instrumentation.js
index 4afc586c64b66..142bfe74c1ed1 100644
--- a/extensions/amp-analytics/0.1/test/test-instrumentation.js
+++ b/extensions/amp-analytics/0.1/test/test-instrumentation.js
@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-import {AmpDocFie} from '../../../../src/service/ampdoc-impl';
 import {AmpdocAnalyticsRoot, EmbedAnalyticsRoot} from '../analytics-root';
 import {AnalyticsEventType, CustomEventTracker} from '../events';
 import {InstrumentationService} from '../instrumentation.js';
-import {Services} from '../../../../src/services';
 
 describes.realWin('InstrumentationService', {amp: 1}, (env) => {
   let win;
@@ -68,7 +66,7 @@ describes.realWin('InstrumentationService', {amp: 1}, (env) => {
 });
 
 describes.realWin(
-  'InstrumentationService in FIE',
+  'InstrumentationService in main doc accessing FIE',
   {
     amp: {ampdoc: 'fie'},
   },
@@ -85,7 +83,7 @@ describes.realWin(
       win = env.win;
       embed = env.embed;
       ampdoc = env.ampdoc;
-      service = new InstrumentationService(ampdoc);
+      service = new InstrumentationService(env.parentAmpdoc);
       root = service.root_;
 
       analyticsElement = win.document.createElement('amp-analytics');
@@ -97,7 +95,7 @@ describes.realWin(
 
     it('should create and reuse embed root', () => {
       expect(root).to.be.instanceof(AmpdocAnalyticsRoot);
-      expect(root.ampdoc).to.equal(ampdoc);
+      expect(root.ampdoc).to.equal(env.parentAmpdoc);
 
       const group1 = service.createAnalyticsGroup(analyticsElement);
       const embedRoot = group1.root_;
@@ -111,19 +109,52 @@ describes.realWin(
       const group2 = service.createAnalyticsGroup(analyticsElement2);
       expect(group2.root_).to.equal(embedRoot);
     });
+  }
+);
+
+describes.realWin(
+  'InstrumentationService in FIE',
+  {
+    amp: {ampdoc: 'fie'},
+  },
+  (env) => {
+    let win;
+    let embed;
+    let ampdoc;
+    let service;
+    let root;
+    let analyticsElement;
+    let target;
 
-    it('should create embed root for ampdoc-fie', () => {
-      const parentAmpdoc = ampdoc;
-      ampdoc = new AmpDocFie(win, 'https://example.org', parentAmpdoc);
-      env.sandbox.stub(Services, 'ampdoc').callsFake((context) => {
-        if (context == win.document) {
-          return ampdoc;
-        }
-      });
+    beforeEach(() => {
+      win = env.win;
+      embed = env.embed;
+      ampdoc = env.ampdoc;
       service = new InstrumentationService(ampdoc);
       root = service.root_;
+
+      analyticsElement = win.document.createElement('amp-analytics');
+      win.document.body.appendChild(analyticsElement);
+
+      target = win.document.createElement('div');
+      win.document.body.appendChild(target);
+    });
+
+    it('should create and reuse embed root', () => {
       expect(root).to.be.instanceof(EmbedAnalyticsRoot);
       expect(root.ampdoc).to.equal(ampdoc);
+
+      const group1 = service.createAnalyticsGroup(analyticsElement);
+      const embedRoot = group1.root_;
+      expect(embedRoot).to.equal(root);
+      expect(embedRoot.ampdoc).to.equal(ampdoc);
+      expect(embedRoot.embed).to.equal(embed);
+
+      // Reuse the previously created instance.
+      const analyticsElement2 = win.document.createElement('amp-analytics');
+      win.document.body.appendChild(analyticsElement2);
+      const group2 = service.createAnalyticsGroup(analyticsElement2);
+      expect(group2.root_).to.equal(embedRoot);
     });
   }
 );
diff --git a/extensions/amp-analytics/0.1/test/test-linker-manager.js b/extensions/amp-analytics/0.1/test/test-linker-manager.js
index 23fe0a8ca8a59..5bb194adf0e7c 100644
--- a/extensions/amp-analytics/0.1/test/test-linker-manager.js
+++ b/extensions/amp-analytics/0.1/test/test-linker-manager.js
@@ -290,8 +290,7 @@ describes.realWin('Linker Manager', {amp: true}, (env) => {
 
       windowInterface.history = {replaceState: () => {}};
       windowInterface.location = {
-        href:
-          'https://www.source.test/dest?a=1&testLinker=1*4o2q85*cid*MTIzNDU.',
+        href: 'https://www.source.test/dest?a=1&testLinker=1*4o2q85*cid*MTIzNDU.',
         search: '?a=1&testLinker=1*4o2q85*cid*MTIzNDU.',
         origin: 'https://www.source.test',
         pathname: '/dest',
@@ -318,13 +317,15 @@ describes.realWin('Linker Manager', {amp: true}, (env) => {
             ids: {
               id: '222',
             },
-            destinationDomains: ['foo.com', 'bar.com'],
+            destinationDomains: ['foo.com', 'bar.com', 'testdomain.com'],
           },
         },
       };
 
       const lm = new LinkerManager(ampdoc, config, /* type */ null, element);
       return lm.init().then(() => {
+        windowInterface.getHostname.returns('testdomain.com');
+
         // testLinker1 should apply to both canonical and source
         // testLinker2 should not
         const canonicalDomainUrl = clickAnchor(
@@ -346,6 +347,12 @@ describes.realWin('Linker Manager', {amp: true}, (env) => {
         const barDomainUrl = clickAnchor('https://bar.com/path');
         expect(barDomainUrl).to.not.contain('testLinker1=');
         expect(barDomainUrl).to.contain('testLinker2=');
+
+        // When the window host name matches the target,
+        // the linker should not be applied.
+        const localDomainUrl = clickAnchor('https://testdomain.com/path');
+        expect(localDomainUrl).to.not.contain('testLinker1=');
+        expect(localDomainUrl).to.not.contain('testLinker2=');
       });
     });
 
@@ -626,7 +633,7 @@ describes.realWin('Linker Manager', {amp: true}, (env) => {
       });
     });
 
-    it('should add linker if same domain is in destination domains', () => {
+    it('should not add linker if same domain is in destination domains', () => {
       const config = {
         linkers: {
           testLinker: {
@@ -642,7 +649,7 @@ describes.realWin('Linker Manager', {amp: true}, (env) => {
       const lm = new LinkerManager(ampdoc, config, /* type */ null, element);
       return lm.init().then(() => {
         const url = clickAnchor('https://amp.source.test/');
-        expect(url).to.contain('testLinker');
+        expect(url).not.to.contain('testLinker');
       });
     });
 
@@ -658,6 +665,19 @@ describes.realWin('Linker Manager', {amp: true}, (env) => {
       });
     });
 
+    it('should not add linker if protocol is not http/https', () => {
+      const lm = new LinkerManager(ampdoc, config, /* type */ null, element);
+      return lm.init().then(() => {
+        const a = {
+          href: '123132111',
+          protocol: 'tel:',
+          hostname: 'amp.source.test',
+        };
+        anchorClickHandlers.forEach((handler) => handler(a, {type: 'click'}));
+        expect(a.href).to.not.contain('testLinker');
+      });
+    });
+
     it('should not add linker if href is relative', () => {
       const lm = new LinkerManager(ampdoc, config, /* type */ null, element);
       return lm.init().then(() => {
@@ -1050,7 +1070,7 @@ describes.realWin('Linker Manager', {amp: true}, (env) => {
   });
 });
 
-describe('areFriendlyDomains', () => {
+describes.sandboxed('areFriendlyDomains', {}, () => {
   it('should work', () => {
     expect(areFriendlyDomains('amp.source.test', 'www.source.test')).to.be.true;
     expect(areFriendlyDomains('m.source.test', 'www.source.test')).to.be.true;
@@ -1065,7 +1085,7 @@ describe('areFriendlyDomains', () => {
   });
 });
 
-describe('wildcard matching', () => {
+describes.sandboxed('wildcard matching', {}, () => {
   const testCases = [
     {
       hostname: 'amp.foo.com',
@@ -1104,7 +1124,7 @@ describe('wildcard matching', () => {
     },
   ];
   testCases.forEach((test) => {
-    const {hostname, domain, result} = test;
+    const {domain, hostname, result} = test;
     it(`wildcard test: ${hostname}, ${domain}, ${result}`, () => {
       expect(isWildCardMatch(hostname, domain)).to.equal(result);
     });
diff --git a/extensions/amp-analytics/0.1/test/test-linker-reader.js b/extensions/amp-analytics/0.1/test/test-linker-reader.js
index 7a6f64313b9e9..22b517e811f87 100644
--- a/extensions/amp-analytics/0.1/test/test-linker-reader.js
+++ b/extensions/amp-analytics/0.1/test/test-linker-reader.js
@@ -20,16 +20,16 @@ import {
 } from '../linker-reader';
 import {mockWindowInterface} from '../../../../testing/test-helper';
 
-describe('LinkerReader', () => {
+describes.sandboxed('LinkerReader', {}, (env) => {
   let linkerReader;
   let mockWin;
 
   beforeEach(() => {
     // Can not import from test-linker.js because all test in test-liner.js
     // will be run with the test-linker-reader if we do so.
-    window.sandbox.useFakeTimers(1533329483292);
-    window.sandbox.stub(Date.prototype, 'getTimezoneOffset').returns(420);
-    mockWin = mockWindowInterface(window.sandbox);
+    env.sandbox.useFakeTimers(1533329483292);
+    env.sandbox.stub(Date.prototype, 'getTimezoneOffset').returns(420);
+    mockWin = mockWindowInterface(env.sandbox);
     mockWin.getUserAgent.returns(
       'Mozilla/5.0 (X11; Linux x86_64) ' +
         'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 ' +
diff --git a/extensions/amp-analytics/0.1/test/test-linker.js b/extensions/amp-analytics/0.1/test/test-linker.js
index 8bbdd31772d15..ed78000233ef7 100644
--- a/extensions/amp-analytics/0.1/test/test-linker.js
+++ b/extensions/amp-analytics/0.1/test/test-linker.js
@@ -245,13 +245,13 @@ const createLinkerTests = [
   },
 ];
 
-describe('Linker', () => {
+describes.sandboxed('Linker', {}, (env) => {
   let mockWin;
   beforeEach(() => {
     // Linker uses a timestamp value to generate checksum.
-    window.sandbox.useFakeTimers(BASE_TIME);
-    window.sandbox.stub(Date.prototype, 'getTimezoneOffset').returns(420);
-    mockWin = mockWindowInterface(window.sandbox);
+    env.sandbox.useFakeTimers(BASE_TIME);
+    env.sandbox.stub(Date.prototype, 'getTimezoneOffset').returns(420);
+    mockWin = mockWindowInterface(env.sandbox);
     mockWin.getUserAgent.returns(
       'Mozilla/5.0 (X11; Linux x86_64) ' +
         'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 ' +
@@ -278,7 +278,7 @@ describe('Linker', () => {
           expectAsyncConsoleError(TAG + ' ' + test.errorMsg);
         }
         if (test.currentTime) {
-          window.sandbox.useFakeTimers(test.currentTime);
+          env.sandbox.useFakeTimers(test.currentTime);
         }
         expect(parseLinker(test.value)).to.deep.equal(test.output);
       });
diff --git a/extensions/amp-analytics/0.1/test/test-requests.js b/extensions/amp-analytics/0.1/test/test-requests.js
index 3198d3f04febd..61653b08970d2 100644
--- a/extensions/amp-analytics/0.1/test/test-requests.js
+++ b/extensions/amp-analytics/0.1/test/test-requests.js
@@ -15,9 +15,11 @@
  */
 
 import * as ResourceTiming from '../resource-timing';
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
+import * as log from '../../../../src/log';
 import {ExpansionOptions, installVariableServiceForTesting} from '../variables';
 import {RequestHandler, expandPostMessage} from '../requests';
+import {Services} from '../../../../src/services';
 import {installLinkerReaderService} from '../linker-reader';
 import {macroTask} from '../../../../testing/yield';
 
@@ -33,7 +35,7 @@ describes.realWin('Requests', {amp: 1}, (env) => {
     installLinkerReaderService(env.win);
     installVariableServiceForTesting(ampdoc);
     ampdoc.defaultView = env.win;
-    clock = lolex.install({target: ampdoc.win});
+    clock = fakeTimers.withGlobal(ampdoc.win).install();
     preconnectSpy = env.sandbox.spy();
     preconnect = {
       url: preconnectSpy,
@@ -64,6 +66,32 @@ describes.realWin('Requests', {amp: 1}, (env) => {
         spy = env.sandbox.spy();
       });
 
+      it('should convert expandUrlAsync(baseUrl) errors into user errors', async () => {
+        env.sandbox.stub(Services, 'urlReplacementsForDoc').returns({
+          expandUrlAsync: async () => {
+            throw new Error('Invalid URL');
+          },
+        });
+
+        env.sandbox.stub(log, 'userAssert');
+
+        const baseUrl = 'https://?';
+        const r = {baseUrl, 'origin': 'http://example.test'};
+        const handler = createRequestHandler(r, spy);
+        const expansionOptions = new ExpansionOptions({});
+
+        handler.send({}, {}, expansionOptions, {});
+
+        await macroTask();
+
+        expect(
+          log.userAssert.withArgs(
+            false,
+            env.sandbox.match(new RegExp(`${baseUrl}.+Invalid URL`))
+          )
+        ).to.have.been.calledOnce;
+      });
+
       it('should prepend request origin', function* () {
         const r = {'baseUrl': '/r1', 'origin': 'http://example.test'};
         const handler = createRequestHandler(r, spy);
@@ -217,7 +245,7 @@ describes.realWin('Requests', {amp: 1}, (env) => {
         yield macroTask();
         expect(preconnectSpy).to.be.calledWith(
           env.sandbox.match.object, // AmpDoc
-          'r2?cid=CLIENT_ID(scope)&var=expanded'
+          env.sandbox.match(/^r2\?cid=amp-[^&]+&var=expanded$/)
         );
       });
     });
@@ -469,6 +497,64 @@ describes.realWin('Requests', {amp: 1}, (env) => {
         ]);
       });
 
+      it('should respect nested extraUrlParam', async () => {
+        const spy = env.sandbox.spy();
+        const r = {'baseUrl': 'r1', 'batchInterval': 1};
+        const handler = createRequestHandler(r, spy);
+
+        const expansionOptions = new ExpansionOptions({
+          'test1': 'TEST1',
+          'test2': 'TEST2',
+          'test3': 'TEST3',
+        });
+        const expansionOptions2 = new ExpansionOptions({
+          'test1': 'Test1',
+          'test2': 'Test2',
+          'test3': 'Test3',
+        });
+        const trigger = {
+          'extraUrlParams': {
+            'e1': {
+              'e2': {
+                'data': '${test1}',
+              },
+            },
+            'e3': [['${test2}'], '${test3}'],
+          },
+        };
+        handler.send({}, trigger, expansionOptions, {});
+        handler.send({}, trigger, expansionOptions2, {});
+
+        clock.tick(1000);
+        await macroTask();
+        expect(spy).to.be.calledWith('r1', [
+          {
+            extraUrlParams: {
+              e1: {
+                e2: {
+                  data: 'TEST1',
+                },
+              },
+              e3: [['TEST2'], 'TEST3'],
+            },
+            timestamp: 0,
+            trigger: undefined,
+          },
+          {
+            extraUrlParams: {
+              e1: {
+                e2: {
+                  data: 'Test1',
+                },
+              },
+              e3: [['Test2'], 'Test3'],
+            },
+            timestamp: 0,
+            trigger: undefined,
+          },
+        ]);
+      });
+
       it('should keep extraUrlParam', function* () {
         const spy = env.sandbox.spy();
         const r = {'baseUrl': 'r1&${extraUrlParams}&r2', 'batchInterval': 1};
@@ -552,6 +638,21 @@ describes.realWin('Requests', {amp: 1}, (env) => {
     expect(spy).to.be.calledWith('r1&test&test2');
   });
 
+  it('should replace dynamic bindings CONSENT_METADATA', async () => {
+    const spy = env.sandbox.spy();
+    const r = {
+      'baseUrl':
+        'r1&$CONSENT_METADATA(gdprApplies)test&${consentMetadata(additionalConsent)}test2',
+    };
+    const handler = createRequestHandler(r, spy);
+    const expansionOptions = new ExpansionOptions({
+      'consentMetadata': 'CONSENT_METADATA',
+    });
+    handler.send({}, {}, expansionOptions);
+    await macroTask();
+    expect(spy).to.be.calledWith('r1&test&test2');
+  });
+
   it('COOKIE read cookie value', function* () {
     const spy = env.sandbox.spy();
     const r = {'baseUrl': 'r1&c1=COOKIE(test)&c2=${cookie(test)}'};
@@ -579,10 +680,14 @@ describes.realWin('Requests', {amp: 1}, (env) => {
     beforeEach(() => {
       expansionOptions = new ExpansionOptions({
         'teste1': 'TESTE1',
+        'teste3': 3,
+        'teste4': true,
       });
       params = {
         'e1': '${teste1}',
         'e2': 'teste2',
+        'e3': '${teste3}',
+        'e4': '${teste4}',
       };
       // expandPostMessage() uses the URL replacements service scoped to the
       // passed element. Use the top-level service for testing.
@@ -620,7 +725,7 @@ describes.realWin('Requests', {amp: 1}, (env) => {
         element
       );
       return replacePromise.then((replace) => {
-        expect(replace).to.equal('test e1=TESTE1&e2=teste2 foo');
+        expect(replace).to.equal('test e1=TESTE1&e2=teste2&e3=3&e4=true foo');
         expect(appendPromise).to.eventually.equal('test foo');
       });
     });
diff --git a/extensions/amp-analytics/0.1/test/test-resource-timing.js b/extensions/amp-analytics/0.1/test/test-resource-timing.js
index 3c40870053def..4523b0e33276a 100644
--- a/extensions/amp-analytics/0.1/test/test-resource-timing.js
+++ b/extensions/amp-analytics/0.1/test/test-resource-timing.js
@@ -66,8 +66,13 @@ export function newPerformanceResourceTiming(
   const tcpTime = cached ? 0 : duration * 0.2;
   const serverTime = cached ? duration : duration * 0.4;
   const transferTime = cached ? 0 : duration * 0.3;
+  function urlify(url) {
+    const a = document.createElement('a');
+    a.href = url;
+    return {host: a.host, pathname: a.pathname, search: a.search};
+  }
   return {
-    name: url,
+    name: urlify(url),
     initiatorType,
     startTime,
     duration,
diff --git a/extensions/amp-analytics/0.1/test/test-transport-serializers.js b/extensions/amp-analytics/0.1/test/test-transport-serializers.js
index 257ce4fd8f493..c69534ab9ec67 100644
--- a/extensions/amp-analytics/0.1/test/test-transport-serializers.js
+++ b/extensions/amp-analytics/0.1/test/test-transport-serializers.js
@@ -15,8 +15,8 @@
  */
 
 import {TransportSerializers} from '../transport-serializer';
-import {dict} from '../../../../src/utils/object';
-import {isArray} from '../../../../src/types';
+import {dict} from '../../../../src/core/types/object';
+import {isArray} from '../../../../src/core/types';
 
 /**
  * Please add your custom test data here in alphabetic order.
@@ -110,7 +110,7 @@ const SerializerTests = {
 /**
  * Real test. Plugin vendors don't need to modify
  */
-describe('Transport serializers', () => {
+describes.sandboxed('Transport serializers', {}, () => {
   it('TransportSerializers sort in alphabetic order', () => {
     const keys = Object.keys(TransportSerializers);
     const sorted = Object.keys(TransportSerializers).sort();
diff --git a/extensions/amp-analytics/0.1/test/test-transport.js b/extensions/amp-analytics/0.1/test/test-transport.js
index af01237c42012..6398b04172b24 100644
--- a/extensions/amp-analytics/0.1/test/test-transport.js
+++ b/extensions/amp-analytics/0.1/test/test-transport.js
@@ -14,11 +14,13 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
+import {AmpScriptService} from '../../../../extensions/amp-script/0.1/amp-script';
 import {
   ImagePixelVerifier,
   mockWindowInterface,
 } from '../../../../testing/test-helper';
+import {Services} from '../../../../src/services';
 import {Transport} from '../transport';
 import {getMode} from '../../../../src/mode';
 import {installDocService} from '../../../../src/service/ampdoc-impl';
@@ -28,11 +30,12 @@ import {loadPromise} from '../../../../src/event-helper';
 describes.realWin(
   'amp-analytics.transport',
   {
-    amp: false,
+    amp: true,
     allowExternalResources: true,
   },
   (env) => {
     let win;
+    let ampdoc;
     let doc;
     let openXhrStub;
     let sendXhrStub;
@@ -41,6 +44,7 @@ describes.realWin(
 
     beforeEach(() => {
       win = env.win;
+      ampdoc = env.ampdoc;
       doc = win.document;
       openXhrStub = env.sandbox.stub();
       sendXhrStub = env.sandbox.stub();
@@ -163,7 +167,7 @@ describes.realWin(
 
     it('send single segment request', () => {
       setupStubs(true, true);
-      new Transport(win, {beacon: true}).sendRequest(
+      new Transport(ampdoc, {beacon: true}).sendRequest(
         'https://e.com/test',
         [
           {
@@ -182,7 +186,7 @@ describes.realWin(
 
     it('send single segment request in batch', () => {
       setupStubs(true, true);
-      new Transport(win, {beacon: true}).sendRequest(
+      new Transport(ampdoc, {beacon: true}).sendRequest(
         'https://e.com/test',
         [
           {
@@ -201,7 +205,7 @@ describes.realWin(
 
     it('send single segment request useBody', () => {
       setupStubs(true, true);
-      new Transport(win, {beacon: true, useBody: true}).sendRequest(
+      new Transport(ampdoc, {beacon: true, useBody: true}).sendRequest(
         'https://e.com/test',
         [
           {
@@ -220,7 +224,7 @@ describes.realWin(
 
     it('send single segment request useBody in batch', () => {
       setupStubs(true, true);
-      new Transport(win, {beacon: true, useBody: true}).sendRequest(
+      new Transport(ampdoc, {beacon: true, useBody: true}).sendRequest(
         'https://e.com/test',
         [
           {
@@ -239,7 +243,7 @@ describes.realWin(
 
     it('send multi-segment request w/o batch (only 1st sent)', () => {
       setupStubs(true, true);
-      new Transport(win, {beacon: true}).sendRequest(
+      new Transport(ampdoc, {beacon: true}).sendRequest(
         'https://e.com/test',
         [
           {
@@ -264,7 +268,7 @@ describes.realWin(
 
     it('send multi-segment request in batch', () => {
       setupStubs(true, true);
-      new Transport(win, {beacon: true}).sendRequest(
+      new Transport(ampdoc, {beacon: true}).sendRequest(
         'https://e.com/test',
         [
           {
@@ -289,7 +293,7 @@ describes.realWin(
 
     it('send multi-segment request useBody in batch', () => {
       setupStubs(true, true);
-      new Transport(win, {beacon: true, useBody: true}).sendRequest(
+      new Transport(ampdoc, {beacon: true, useBody: true}).sendRequest(
         'https://e.com/test',
         [
           {
@@ -338,11 +342,12 @@ describes.realWin(
         'http://iframe.localhost:9876/test/fixtures/served/iframe.html';
 
       function sendRequestUsingIframe(win, url) {
-        new Transport(win).sendRequestUsingIframe(url, {});
+        const ampdoc = {win};
+        new Transport(ampdoc).sendRequestUsingIframe(url, {});
       }
 
       it('should create and delete an iframe', () => {
-        const clock = lolex.install({target: win});
+        const clock = fakeTimers.withGlobal(win).install();
         installTimerService(win);
         sendRequestUsingIframe(win, url);
         const iframe = doc.querySelector('iframe[src="' + url + '"]');
@@ -380,9 +385,49 @@ describes.realWin(
       });
     });
 
+    describe('amp-script transport', () => {
+      beforeEach(() => {
+        env.sandbox
+          .stub(Services, 'scriptForDocOrNull')
+          .returns(Promise.resolve(new AmpScriptService(env.ampdoc)));
+      });
+
+      it('should throw if the url does not begin with amp-script scheme', () => {
+        const req = Transport.forwardRequestToAmpScript(env.ampdoc, {
+          url: 'receiver.functionId',
+        });
+        expect(req).rejectedWith(/URL must begin with/);
+      });
+
+      it('should throw if the amp-script cannot be found', () => {
+        const req = Transport.forwardRequestToAmpScript(env.ampdoc, {
+          url: 'amp-script:nonexistent.functionId',
+        });
+        expect(req).rejectedWith(/could not find/);
+      });
+
+      it('should forward the payload to the specifed amp-script element', async () => {
+        const callFunctionSpy = env.sandbox.spy();
+        const ampScript = doc.createElement('amp-script');
+        ampScript.id = 'receiver';
+        ampScript.getImpl = () => ({
+          then: (fn) => fn({callFunction: callFunctionSpy}),
+        });
+        doc.body.appendChild(ampScript);
+
+        const payload = '{}';
+        await Transport.forwardRequestToAmpScript(env.ampdoc, {
+          url: 'amp-script:receiver.functionId',
+          payload,
+        });
+
+        expect(callFunctionSpy).calledWith('functionId', JSON.parse(payload));
+      });
+    });
+
     describe('iframe transport', () => {
       it('does not initialize transport iframe if not used', () => {
-        const transport = new Transport(win, {
+        const transport = new Transport(ampdoc, {
           image: true,
           xhrpost: true,
           beacon: false,
@@ -395,7 +440,7 @@ describes.realWin(
       });
 
       it('initialize iframe transport when used', () => {
-        const transport = new Transport(win, {
+        const transport = new Transport(ampdoc, {
           iframe: '//test',
         });
 
@@ -408,9 +453,8 @@ describes.realWin(
           '<amp-analytics type="bg"></amp-analytics>'
         );
         frame.contentWindow.__AMP_TOP = win;
-        const ampAnalyticsEl = frame.contentWindow.document.querySelector(
-          'amp-analytics'
-        );
+        const ampAnalyticsEl =
+          frame.contentWindow.document.querySelector('amp-analytics');
 
         transport.maybeInitIframeTransport(ampAnalyticsEl);
         expect(transport.iframeTransport_).to.be.ok;
@@ -424,7 +468,7 @@ describes.realWin(
         win.__AMP_MODE.runtime = 'inabox';
         expect(getMode(win).runtime).to.equal('inabox');
 
-        const transport = new Transport(win, {
+        const transport = new Transport(ampdoc, {
           iframe: '//test',
         });
 
@@ -434,9 +478,8 @@ describes.realWin(
           '<amp-analytics type="bg"></amp-analytics>'
         );
         frame.contentWindow.__AMP_TOP = win;
-        const ampAnalyticsEl = frame.contentWindow.document.querySelector(
-          'amp-analytics'
-        );
+        const ampAnalyticsEl =
+          frame.contentWindow.document.querySelector('amp-analytics');
 
         transport.maybeInitIframeTransport(ampAnalyticsEl);
         expect(transport.iframeTransport_).to.be.ok;
@@ -447,7 +490,7 @@ describes.realWin(
 
       it('send via iframe transport', () => {
         setupStubs(true, true);
-        const transport = new Transport(win, {
+        const transport = new Transport(ampdoc, {
           beacon: true,
           xhrpost: true,
           image: true,
@@ -484,7 +527,7 @@ describes.realWin(
     }
 
     function sendRequest(win, request, options) {
-      new Transport(win, options).sendRequest(request, [{}], false);
+      new Transport(ampdoc, options).sendRequest(request, [{}], false);
     }
 
     function expectBeacon(url, payload) {
diff --git a/extensions/amp-analytics/0.1/test/test-variables.js b/extensions/amp-analytics/0.1/test/test-variables.js
index 02181eba2909d..8bc7ae82a2cca 100644
--- a/extensions/amp-analytics/0.1/test/test-variables.js
+++ b/extensions/amp-analytics/0.1/test/test-variables.js
@@ -23,17 +23,18 @@ import {
   variableServiceForDoc,
 } from '../variables';
 import {Services} from '../../../../src/services';
+import {forceExperimentBranch} from '../../../../src/experiments';
 import {
   installLinkerReaderService,
   linkerReaderServiceFor,
 } from '../linker-reader';
 
-const fakeElement = document.documentElement;
-
 describes.fakeWin('amp-analytics.VariableService', {amp: true}, (env) => {
+  let fakeElement;
   let variables;
 
   beforeEach(() => {
+    fakeElement = env.win.document.documentElement;
     installLinkerReaderService(env.win);
     variables = new VariableService(env.ampdoc);
   });
@@ -352,6 +353,40 @@ describes.fakeWin('amp-analytics.VariableService', {amp: true}, (env) => {
       return check('$BASE64(Hello World!)', 'SGVsbG8gV29ybGQh');
     });
 
+    describe('$CALC', () => {
+      it('calc addition works', () => check('$CALC(1, 2, add)', '3'));
+
+      it('calc addition works with rounding flag', () =>
+        check('$CALC(1, 2, add, true)', '3'));
+
+      it('calc subtraction works', () =>
+        check('$CALC(1, 2, subtract, true)', '-1'));
+
+      it('calc multiplication works', () =>
+        check('$CALC(1, 2, multiply, true)', '2'));
+
+      it('calc division works', () =>
+        check('$CALC(1, 2, divide, false)', '0.5'));
+
+      it('calc division should round 2/3 to 1', () =>
+        check('$CALC(2, 3, divide, true)', '1'));
+
+      it('calc division should round 1/3 to 0', () =>
+        check('$CALC(1, 3, divide, true)', '0'));
+
+      it('calc division should round 1/2 to 1', () =>
+        check('$CALC(1, 2, divide, true)', '1'));
+
+      it('calc with unknown operation defaults to zero', () =>
+        check('$CALC(1, 2, somethingelse, true)', '0'));
+
+      it('calc with nested macro works', () =>
+        check('$CALC($SUBSTR(123456, 2, 5), 10, multiply, false)', '34560'));
+
+      it('calc should replace CUMULATIVE_LAYOUT_SHIFT with 1', () =>
+        check('$CALC(CUMULATIVE_LAYOUT_SHIFT, 10, multiply, true)', '10'));
+    });
+
     it('if works with true', () =>
       check('$IF(true, truthy, falsey)', 'truthy'));
 
@@ -443,6 +478,37 @@ describes.fakeWin('amp-analytics.VariableService', {amp: true}, (env) => {
       );
     });
 
+    it('replaces CONSENT_METADATA', () => {
+      env.sandbox.stub(Services, 'consentPolicyServiceForDocOrNull').returns(
+        Promise.resolve({
+          getConsentMetadataInfo: () => {
+            return Promise.resolve({
+              'gdprApplies': true,
+              'additionalConsent': 'abc123',
+              'consentStringType': 1,
+            });
+          },
+        })
+      );
+
+      return check(
+        'CONSENT_METADATA(gdprApplies)&CONSENT_METADATA(additionalConsent)&CONSENT_METADATA(consentStringType)&CONSENT_METADATA(invalid_key)',
+        'true&abc123&1&'
+      );
+    });
+
+    it('replaces CONSENT_STRING', () => {
+      env.sandbox.stub(Services, 'consentPolicyServiceForDocOrNull').returns(
+        Promise.resolve({
+          getConsentStringInfo: () => {
+            return Promise.resolve('userConsentString');
+          },
+        })
+      );
+
+      return check('a=CONSENT_STRING', 'a=userConsentString');
+    });
+
     it('"COOKIE" resolves cookie value', async () => {
       doc.cookie = 'test=123';
       await check('COOKIE(test)', '123');
@@ -497,6 +563,25 @@ describes.fakeWin('amp-analytics.VariableService', {amp: true}, (env) => {
       return check('CUMULATIVE_LAYOUT_SHIFT', '1');
     });
 
+    it('should expand EXPERIMENT_BRANCHES to name:value comma separated list', () => {
+      forceExperimentBranch(env.win, 'exp1', '1234');
+      forceExperimentBranch(env.win, 'exp2', '5678');
+      return check('EXPERIMENT_BRANCHES', 'exp1%3A1234%2Cexp2%3A5678');
+    });
+
+    it('EXPERIMENT_BRANCHES should be empty string if no branches', () => {
+      return check('EXPERIMENT_BRANCHES', '');
+    });
+
+    it('should expand EXPERIMENT_BRANCHES(expName) to experiment value', () => {
+      forceExperimentBranch(env.win, 'exp1', '1234');
+      return check('EXPERIMENT_BRANCHES(exp1)', '1234');
+    });
+
+    it('EXPERIMENT_BRANCHES(expName) should be empty string if not set', () => {
+      return check('EXPERIMENT_BRANCHES(exp1)', '');
+    });
+
     describe('$MATCH', () => {
       it('handles default index', () => {
         return check('$MATCH(thisisatest, thisisatest)', 'thisisatest');
@@ -566,6 +651,32 @@ describes.fakeWin('amp-analytics.VariableService', {amp: true}, (env) => {
       scrollTopValue = 99.5;
       await check('SCROLL_TOP', '100');
     });
+
+    describe('AMPDOC_META', () => {
+      it('should replace with meta tag content', () => {
+        env.sandbox.stub(env.ampdoc, 'getMeta').returns({
+          'foo': 'bar',
+        });
+        return check('AMPDOC_META(foo)', 'bar');
+      });
+
+      it('should replace with "" when no meta tag', () => {
+        env.sandbox.stub(env.ampdoc, 'getMeta').returns({});
+        return check('AMPDOC_META(foo)', '');
+      });
+
+      it('should replace with default_value when no meta tag', () => {
+        env.sandbox.stub(env.ampdoc, 'getMeta').returns({});
+        return check('AMPDOC_META(foo, default_value)', 'default_value');
+      });
+
+      it('should prefer empty meta tag over default_value', () => {
+        env.sandbox.stub(env.ampdoc, 'getMeta').returns({
+          'foo': '',
+        });
+        return check('AMPDOC_META(foo, default_value)', '');
+      });
+    });
   });
 
   describe('getNameArgs:', () => {
diff --git a/extensions/amp-analytics/0.1/test/test-vendors.js b/extensions/amp-analytics/0.1/test/test-vendors.js
index 63a9fb1c2527d..054d6398b616b 100644
--- a/extensions/amp-analytics/0.1/test/test-vendors.js
+++ b/extensions/amp-analytics/0.1/test/test-vendors.js
@@ -23,11 +23,9 @@ import {
   mockWindowInterface,
 } from '../../../../testing/test-helper';
 import {Services} from '../../../../src/services';
-import {hasOwn} from '../../../../src/utils/object';
+import {hasOwn} from '../../../../src/core/types/object';
 import {macroTask} from '../../../../testing/yield';
-
-/* global require: false */
-const VENDOR_REQUESTS = require('./vendor-requests.json');
+import VENDOR_REQUESTS from './vendor-requests.json' assert {type: 'json'}; // lgtm[js/syntax-error]
 
 describes.realWin(
   'amp-analytics',
@@ -51,6 +49,8 @@ describes.realWin(
       elementMacros = {
         'COOKIE': null,
         'CONSENT_STATE': null,
+        'CONSENT_STRING': null,
+        'CONSENT_METADATA': null,
       };
     });
 
@@ -84,7 +84,7 @@ describes.realWin(
             const urlReplacements = Services.urlReplacementsForDoc(
               doc.documentElement
             );
-            window.sandbox
+            env.sandbox
               .stub(urlReplacements.getVariableSource(), 'get')
               .callsFake(function (name) {
                 expect(this.replacements_).to.have.property(name);
@@ -93,7 +93,7 @@ describes.realWin(
                 };
               });
 
-            window.sandbox
+            env.sandbox
               .stub(ExpansionOptions.prototype, 'getVar')
               .callsFake(function (name) {
                 let val = this.vars[name];
@@ -112,7 +112,7 @@ describes.realWin(
             // Have to get service after analytics element is created
             const variableService = variableServiceForDoc(doc);
 
-            window.sandbox
+            env.sandbox
               .stub(variableService, 'getMacros')
               .callsFake(function () {
                 // Add all the macros in amp-analytics
@@ -135,7 +135,7 @@ describes.realWin(
                 'Request for ' +
                   vendor +
                   ' not found. Please make sure you run ' +
-                  '"gulp vendor-configs" or build amp-analytics ' +
+                  '"amp analytics-vendor-configs" or build amp-analytics ' +
                   'before running the test'
               );
             }
@@ -218,7 +218,6 @@ function getAnalyticsTag(doc, vendor) {
   doc.body.appendChild(el);
   el.connectedCallback();
   const analytics = new AmpAnalytics(el);
-  analytics.createdCallback();
   analytics.buildCallback();
   return analytics;
 }
diff --git a/extensions/amp-analytics/0.1/test/test-visibility-manager-for-mapp.js b/extensions/amp-analytics/0.1/test/test-visibility-manager-for-mapp.js
deleted file mode 100644
index f270fefc043df..0000000000000
--- a/extensions/amp-analytics/0.1/test/test-visibility-manager-for-mapp.js
+++ /dev/null
@@ -1,207 +0,0 @@
-/**
- * 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.
- */
-
-import {VisibilityManagerForMApp} from '../visibility-manager-for-mapp';
-import {VisibilityState} from '../../../../src/visibility-state';
-import {dict} from '../../../../src/utils/object';
-import {layoutRectLtwh} from '../../../../src/layout-rect';
-
-class MockVisibilityInterface {
-  constructor(opt_ratio, opt_rect) {
-    this.callback_ = null;
-    this.initRatio_ = opt_ratio || 0;
-    this.initRect_ = opt_rect || null;
-  }
-
-  onVisibilityChange(callback) {
-    this.callback_ = callback;
-    callback(this.constructVisibilityData_(this.initRatio_, this.initRect_));
-  }
-
-  constructVisibilityData_(ratio, opt_rect) {
-    return {
-      visibleRect: opt_rect || layoutRectLtwh(0, 0, 100, 101),
-      visibleRatio: ratio,
-    };
-  }
-
-  fireVisibilityChangeForTesting(ratio, opt_rect) {
-    if (!this.callback_) {
-      return;
-    }
-    this.callback_(this.constructVisibilityData_(ratio, opt_rect));
-  }
-}
-
-describes.fakeWin('VisibilityManagerForMapp', {amp: true}, (env) => {
-  let win;
-  let ampdoc;
-  let clock;
-  let viewer;
-  let root;
-  let eventResolver, eventPromise;
-  let visibilityInterface;
-
-  beforeEach(() => {
-    win = env.win;
-    ampdoc = env.ampdoc;
-    clock = env.sandbox.useFakeTimers();
-    clock.tick(1);
-
-    viewer = win.__AMP_SERVICES.viewer.obj;
-    env.sandbox.stub(ampdoc, 'getFirstVisibleTime').returns(1);
-    visibilityInterface = new MockVisibilityInterface();
-    root = new VisibilityManagerForMApp(ampdoc, visibilityInterface);
-
-    win.IntersectionObserver = null;
-
-    eventPromise = new Promise((resolve) => {
-      eventResolver = resolve;
-    });
-  });
-
-  it('should initialize correctly', () => {
-    viewer.setVisibilityState_(VisibilityState.HIDDEN);
-    visibilityInterface = new MockVisibilityInterface(0.5);
-    root = new VisibilityManagerForMApp(ampdoc, visibilityInterface);
-    expect(root.parent).to.be.null;
-    expect(root.ampdoc).to.equal(ampdoc);
-    expect(root.getStartTime()).to.equal(ampdoc.getFirstVisibleTime());
-    expect(root.isBackgrounded()).to.be.true;
-    expect(root.isBackgroundedAtStart()).to.be.true;
-
-    // Root model starts invisible.
-    expect(root.getRootVisibility()).to.equal(0.5);
-    expect(root.getRootMinOpacity()).to.equal(1);
-  });
-
-  it('should resolve root layout box', () => {
-    expect(root.getRootLayoutBox()).to.contain({
-      left: 0,
-      top: 0,
-      width: 100,
-      height: 101,
-    });
-  });
-
-  it('should switch visibility based on VisibilityInterface trigger', () => {
-    expect(root.getRootVisibility()).to.equal(0);
-    visibilityInterface.fireVisibilityChangeForTesting(0.5);
-    expect(root.getRootVisibility()).to.equal(0.5);
-
-    visibilityInterface.fireVisibilityChangeForTesting(0.5);
-    expect(root.getRootVisibility()).to.equal(0.5);
-  });
-
-  it('should switch root model to no-visibility on dispose', () => {
-    visibilityInterface = new MockVisibilityInterface(1);
-    root = new VisibilityManagerForMApp(ampdoc, visibilityInterface);
-    expect(root.getRootVisibility()).to.equal(1);
-    root.dispose();
-    expect(root.getRootVisibility()).to.equal(0);
-  });
-
-  it('should not support listen on element', () => {
-    const target = win.document.createElement('div');
-    //root.listenElement(target, {}, null, null, () => {});
-    allowConsoleError(() => {
-      expect(() => {
-        root.listenElement(target, {}, null, null, () => {});
-      }).to.throw(/element level visibility not supported/);
-    });
-    allowConsoleError(() => {
-      expect(() => {
-        root.observe();
-      }).to.throw(/element level visibility not supported/);
-    });
-    allowConsoleError(() => {
-      expect(() => {
-        root.getElementVisibility();
-      }).to.throw(/element level visibility not supported/);
-    });
-  });
-
-  it('should protect from invalid intersection values', () => {
-    root.listenRoot({}, null, null, eventResolver);
-    expect(root.models_).to.have.length(1);
-    const model = root.models_[0];
-
-    expect(model.getVisibility_()).to.equal(0);
-
-    // Valid value.
-    visibilityInterface.fireVisibilityChangeForTesting(0.3);
-    expect(model.getVisibility_()).to.equal(0.3);
-
-    // Invalid negative value.
-    visibilityInterface.fireVisibilityChangeForTesting(-0.01);
-    expect(model.getVisibility_()).to.equal(0);
-
-    // // Invalid overflow value.
-    visibilityInterface.fireVisibilityChangeForTesting(1.01);
-    expect(model.getVisibility_()).to.equal(1);
-  });
-
-  it('listen on root integrated', () => {
-    // There's a clock.tick(1) in beforeEach, so firstSeenTime is
-    // /*tick*/1 + /*tick*/1 - /*ampdoc.getFirstVisibleTime*/ 1)
-    clock.tick(1);
-    const disposed = env.sandbox.spy();
-    const spec = dict({
-      'totalTimeMin': 10,
-      'visiblePercentageMin': 20,
-    });
-    root.listenRoot(spec, null, null, eventResolver);
-
-    expect(root.models_).to.have.length(1);
-    const model = root.models_[0];
-    model.unsubscribe(disposed);
-
-    // Go visible.
-    visibilityInterface.fireVisibilityChangeForTesting(0.5);
-    clock.tick(8);
-
-    // Less than visiblePercentageMin
-    visibilityInterface.fireVisibilityChangeForTesting(0.19);
-    clock.tick(3);
-
-    expect(disposed).to.not.be.called;
-
-    // Back to visible range
-    visibilityInterface.fireVisibilityChangeForTesting(
-      0.3,
-      layoutRectLtwh(1, 2, 100, 201)
-    );
-    clock.tick(3);
-    return eventPromise.then((state) => {
-      expect(disposed).to.be.calledOnce;
-      expect(root.models_).to.have.length(0);
-      expect(state.totalVisibleTime).to.equal(10);
-
-      expect(state.firstSeenTime).to.equal(1);
-      expect(state.backgrounded).to.equal(0);
-      expect(state.backgroundedAtStart).to.equal(0);
-
-      expect(state.totalTime).to.equal(15);
-      expect(state.opacity).to.equal(1);
-
-      expect(state.elementX).to.equal(1);
-      expect(state.elementY).to.equal(2);
-      expect(state.elementWidth).to.equal(100);
-      expect(state.elementHeight).to.equal(201);
-      expect(state.intersectionRatio).to.equal(0.3);
-    });
-  });
-});
diff --git a/extensions/amp-analytics/0.1/test/test-visibility-manager.js b/extensions/amp-analytics/0.1/test/test-visibility-manager.js
index 943bb3a85cf0c..0ccafb701156c 100644
--- a/extensions/amp-analytics/0.1/test/test-visibility-manager.js
+++ b/extensions/amp-analytics/0.1/test/test-visibility-manager.js
@@ -14,20 +14,18 @@
  * limitations under the License.
  */
 
-import {AnalyticsEventType} from '../events';
 import {FIE_EMBED_PROP} from '../../../../src/iframe-helper';
-import {
-  IntersectionObserverPolyfill,
-  nativeIntersectionObserverSupported,
-} from '../../../../src/utils/intersection-observer-polyfill';
 import {Services} from '../../../../src/services';
 import {
   VisibilityManagerForDoc,
   VisibilityManagerForEmbed,
   provideVisibilityManager,
 } from '../visibility-manager';
-import {VisibilityState} from '../../../../src/visibility-state';
-import {layoutRectLtwh, rectIntersection} from '../../../../src/layout-rect';
+import {VisibilityState} from '../../../../src/core/constants/visibility-state';
+import {
+  layoutRectLtwh,
+  rectIntersection,
+} from '../../../../src/core/math/layout-rect';
 import {setParentWindow} from '../../../../src/service';
 
 class IntersectionObserverStub {
@@ -207,6 +205,7 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, (env) => {
         target: otherTarget,
         intersectionRatio: 0.3,
         intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
       },
     ]);
     expect(root.getRootVisibility()).to.equal(0);
@@ -217,11 +216,13 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, (env) => {
         target: otherTarget,
         intersectionRatio: 0.5,
         intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
       },
       {
         target: win.document.documentElement,
         intersectionRatio: 0.3,
         intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
       },
     ]);
     expect(root.getRootVisibility()).to.equal(0.3);
@@ -232,11 +233,36 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, (env) => {
         target: win.document.documentElement,
         intersectionRatio: 0,
         intersectionRect: layoutRectLtwh(0, 0, 0, 0),
+        boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
       },
     ]);
     expect(root.getRootVisibility()).to.equal(0);
   });
 
+  it('should switch visibility on window resize for inabox', () => {
+    win.__AMP_MODE = {runtime: 'inabox'};
+    root = new VisibilityManagerForDoc(ampdoc);
+
+    // Check observer is correctly set.
+    const inOb = root.intersectionObserver_;
+    expect(inOb).to.be.instanceOf(IntersectionObserverStub);
+    expect(inOb.elements).to.contain(win.document.documentElement);
+
+    inOb.callback([
+      {
+        target: win.document.documentElement,
+        intersectionRatio: 1,
+        intersectionRect: layoutRectLtwh(0, 0, 0, 0),
+        boundingClientRect: layoutRectLtwh(1, 1, 100, 0),
+      },
+    ]);
+
+    expect(root.getRootVisibility()).to.equal(0);
+    const resizeEvent = new Event('resize');
+    ampdoc.win.eventListeners.fire(resizeEvent);
+    expect(root.getRootVisibility()).to.equal(1);
+  });
+
   it('should switch root model to no-visibility on dispose', () => {
     expect(root.getRootVisibility()).to.equal(1);
     root.dispose();
@@ -385,72 +411,6 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, (env) => {
     expect(inOb.elements).to.not.contain(otherTarget);
   });
 
-  it('should polyfill and dispose intersection observer', () => {
-    delete win.IntersectionObserver;
-
-    const startScrollCount = viewport.scrollObservable_.getHandlerCount();
-    const startChangeCount = viewport.changeObservable_.getHandlerCount();
-
-    // Check observer is correctly set.
-    const inOb = root.getIntersectionObserver_();
-    expect(inOb).to.be.instanceOf(IntersectionObserverPolyfill);
-    expect(viewport.scrollObservable_.getHandlerCount()).to.equal(
-      startScrollCount + 1
-    );
-    expect(viewport.changeObservable_.getHandlerCount()).to.equal(
-      startChangeCount + 1
-    );
-
-    root.dispose();
-    expect(viewport.scrollObservable_.getHandlerCount()).to.equal(
-      startScrollCount
-    );
-    expect(viewport.changeObservable_.getHandlerCount()).to.equal(
-      startChangeCount
-    );
-  });
-
-  it('should support polyfill on non-amp root element', () => {
-    delete win.IntersectionObserver;
-    const inOb = root.getIntersectionObserver_();
-
-    const rootElement = win.document.documentElement;
-    root.listenElement(rootElement, {}, null, null, eventResolver);
-    expect(root.models_).to.have.length(1);
-    const model = root.models_[0];
-    expect(inOb.observeEntries_).to.have.length(1);
-
-    // AMP API is polyfilled.
-    expect(rootElement.getLayoutBox).to.be.a('function');
-    expect(rootElement.getOwner()).to.be.null;
-
-    // Starts as invisible.
-    expect(model.getVisibility_()).to.equal(0);
-
-    // Trigger tick.
-    env.sandbox.stub(viewport, 'getRect').callsFake(() => {
-      return layoutRectLtwh(0, 0, 100, 100);
-    });
-    env.sandbox.stub(viewport, 'getLayoutRect').callsFake((element) => {
-      if (element == rootElement) {
-        return layoutRectLtwh(0, 50, 100, 100);
-      }
-      return null;
-    });
-    expect(rootElement.getLayoutBox()).to.contain({
-      left: 0,
-      top: 50,
-      width: 100,
-      height: 100,
-    });
-    viewport.scrollObservable_.fire({type: AnalyticsEventType.SCROLL});
-    expect(model.getVisibility_()).to.equal(0.5);
-
-    return eventPromise.then(() => {
-      expect(inOb.observeEntries_).to.have.length(0);
-    });
-  });
-
   it('should listen on root', () => {
     clock.tick(1);
     const disposed = env.sandbox.spy();
@@ -596,6 +556,7 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, (env) => {
         target,
         intersectionRatio: 0.3,
         intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
       },
     ]);
     expect(model.getVisibility_()).to.equal(0.3);
@@ -640,6 +601,7 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, (env) => {
         target,
         intersectionRatio: 0.3,
         intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
       },
     ]);
     expect(model.getVisibility_()).to.equal(0.3);
@@ -650,6 +612,7 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, (env) => {
         target,
         intersectionRatio: -0.01,
         intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
       },
     ]);
     expect(model.getVisibility_()).to.equal(0);
@@ -659,6 +622,7 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, (env) => {
         target,
         intersectionRatio: -1000,
         intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
       },
     ]);
     expect(model.getVisibility_()).to.equal(0);
@@ -669,6 +633,7 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, (env) => {
         target,
         intersectionRatio: 1.01,
         intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
       },
     ]);
     expect(model.getVisibility_()).to.equal(1);
@@ -678,11 +643,55 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, (env) => {
         target,
         intersectionRatio: 1000,
         intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
       },
     ]);
     expect(model.getVisibility_()).to.equal(1);
   });
 
+  it('should protect from zero size element', () => {
+    const target = win.document.createElement('div');
+    root.listenElement(target, {}, null, null, eventResolver);
+    expect(root.models_).to.have.length(1);
+    const model = root.models_[0];
+
+    const inOb = root.getIntersectionObserver_();
+    expect(model.getVisibility_()).to.equal(0);
+
+    // Valid element size
+    inOb.callback([
+      {
+        target,
+        intersectionRatio: 1,
+        intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 10, 10),
+      },
+    ]);
+    expect(model.getVisibility_()).to.equal(1);
+
+    // zero element size.
+    inOb.callback([
+      {
+        target,
+        intersectionRatio: 1,
+        intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 0, 10),
+      },
+    ]);
+    expect(model.getVisibility_()).to.equal(0);
+
+    // zero element size, high resolution screen.
+    inOb.callback([
+      {
+        target,
+        intersectionRatio: 0.8,
+        intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 10, 0.452),
+      },
+    ]);
+    expect(model.getVisibility_()).to.equal(0);
+  });
+
   it('should listen on a element with different specs', () => {
     clock.tick(1);
     const inOb = root.getIntersectionObserver_();
@@ -708,6 +717,7 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, (env) => {
         target,
         intersectionRatio: 0.3,
         intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
       },
     ]);
     expect(model1.getVisibility_()).to.equal(0.3);
@@ -765,15 +775,9 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, (env) => {
     clock.tick(1);
     const target = win.document.createElement('div');
     target.id = 'targetElementId';
-    const resource = {
-      getLayoutBox() {
-        return {top: 10, left: 11, width: 110, height: 111};
-      },
-    };
-    const resources = win.__AMP_SERVICES.resources.obj;
     env.sandbox
-      .stub(resources, 'getResourceForElementOptional')
-      .callsFake(() => resource);
+      .stub(target, 'getBoundingClientRect')
+      .returns({top: 10, left: 11, width: 110, height: 111});
     const spec = {totalTimeMin: 10};
     root.listenElement(target, spec, null, null, eventResolver);
 
@@ -783,6 +787,7 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, (env) => {
         target,
         intersectionRatio: 0.3,
         intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+        boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
       },
     ]);
 
@@ -811,29 +816,29 @@ describes.realWin(
   (env) => {
     let parentWin;
     let win;
-    let ampdoc;
     let embed;
     let clock;
     let viewer;
     let viewport;
+    let parentAmpdoc;
     let parentRoot;
     let root;
     let inob;
 
     beforeEach(() => {
       parentWin = env.parentWin;
+      parentAmpdoc = env.parentAmpdoc;
       win = env.win;
-      ampdoc = env.ampdoc;
       embed = env.embed;
-      embed.host = ampdoc.win.document.createElement('amp-host');
+      embed.host = parentAmpdoc.win.document.createElement('amp-host');
       clock = env.sandbox.useFakeTimers();
       clock.tick(1);
 
       viewport = parentWin.__AMP_SERVICES.viewport.obj;
       viewer = parentWin.__AMP_SERVICES.viewer.obj;
-      env.sandbox.stub(ampdoc, 'getFirstVisibleTime').returns(1);
+      env.sandbox.stub(parentAmpdoc, 'getFirstVisibleTime').returns(1);
 
-      parentRoot = new VisibilityManagerForDoc(ampdoc);
+      parentRoot = new VisibilityManagerForDoc(parentAmpdoc);
       parentWin.IntersectionObserver = IntersectionObserverStub;
       parentWin.IntersectionObserverEntry = function () {};
       parentWin.IntersectionObserverEntry.prototype.intersectionRatio = 1;
@@ -871,7 +876,7 @@ describes.realWin(
       root = new VisibilityManagerForEmbed(parentRoot, embed);
 
       expect(root.parent).to.equal(parentRoot);
-      expect(root.ampdoc).to.equal(ampdoc);
+      expect(root.ampdoc).to.equal(parentAmpdoc);
       expect(root.getStartTime()).to.equal(embed.getStartTime());
       expect(root.isBackgrounded()).to.be.true;
       expect(root.isBackgroundedAtStart()).to.be.true;
@@ -882,7 +887,7 @@ describes.realWin(
 
     it('should initialize correctly in foreground', () => {
       expect(root.parent).to.equal(parentRoot);
-      expect(root.ampdoc).to.equal(ampdoc);
+      expect(root.ampdoc).to.equal(parentAmpdoc);
       expect(root.getStartTime()).to.equal(embed.getStartTime());
       expect(root.isBackgrounded()).to.be.false;
       expect(root.isBackgroundedAtStart()).to.be.false;
@@ -966,6 +971,7 @@ describes.realWin(
           target: embed.host,
           intersectionRatio: 0.5,
           intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+          boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
         },
       ]);
       expect(root.getRootVisibility()).to.equal(0.5);
@@ -978,6 +984,7 @@ describes.realWin(
           target: otherTarget,
           intersectionRatio: 0.45,
           intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+          boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
         },
       ]);
       expect(root.getRootVisibility()).to.equal(0.5);
@@ -1004,6 +1011,7 @@ describes.realWin(
           target: embed.host,
           intersectionRatio: 0,
           intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+          boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
         },
       ]);
       expect(root.getRootVisibility()).to.equal(0);
@@ -1016,6 +1024,7 @@ describes.realWin(
           target: otherTarget,
           intersectionRatio: 0.55,
           intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+          boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
         },
       ]);
       expect(root.getRootVisibility()).to.equal(0);
@@ -1028,6 +1037,7 @@ describes.realWin(
           target: embed.host,
           intersectionRatio: 0.7,
           intersectionRect: layoutRectLtwh(0, 0, 1, 1),
+          boundingClientRect: layoutRectLtwh(1, 1, 1, 1),
         },
       ]);
       expect(root.getRootVisibility()).to.equal(0.7);
@@ -1070,14 +1080,7 @@ describes.realWin('VisibilityManager integrated', {amp: true}, (env) => {
         unobserve: unobserveSpy,
       };
     };
-    if (nativeIntersectionObserverSupported(ampdoc.win)) {
-      env.sandbox.stub(win, 'IntersectionObserver').callsFake(inob);
-    } else {
-      win.IntersectionObserver = inob;
-      win.IntersectionObserverEntry = function () {};
-      win.IntersectionObserverEntry.prototype.intersectionRatio = 0;
-      expect(nativeIntersectionObserverSupported(ampdoc.win)).to.be.true;
-    }
+    env.sandbox.stub(win, 'IntersectionObserver').callsFake(inob);
 
     readyPromise = new Promise((resolve) => {
       readyResolver = resolve;
@@ -1116,10 +1119,9 @@ describes.realWin('VisibilityManager integrated', {amp: true}, (env) => {
       startTime = 10000;
       clock.tick(startTime);
 
-      const resource = resources.getResourceForElement(ampElement);
       scrollTop = 10;
       env.sandbox
-        .stub(resource, 'getLayoutBox')
+        .stub(ampElement, 'getBoundingClientRect')
         .callsFake(() => layoutRectLtwh(0, scrollTop, 100, 100));
     });
   });
diff --git a/extensions/amp-analytics/0.1/test/validator-analytics.html b/extensions/amp-analytics/0.1/test/validator-analytics.html
index b85cfef43b67c..fdd80f8881c63 100644
--- a/extensions/amp-analytics/0.1/test/validator-analytics.html
+++ b/extensions/amp-analytics/0.1/test/validator-analytics.html
@@ -47,7 +47,7 @@
 {
   "transport": {"beacon": false, "xhrpost": false},
   "requests": {
-    "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/master/examples/img/ampicon.png",
+    "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png",
     "base": "${endpoint}?${type|default:foo}&path=${canonicalPath}",
     "event": "${base}&scrollY=${scrollTop}&scrollX=${scrollLeft}&height=${availableScreenHeight}&width=${availableScreenWidth}&scrollBoundV=${verticalScrollBoundary}&scrollBoundH=${horizontalScrollBoundary}",
     "visibility": "${base}&a=${maxContinuousVisibleTime}&b=${totalVisibleTime}&c=${firstSeenTime}&d=${lastSeenTime}&e=${firstVisibleTime}&f=${lastVisibleTime}&g=${minVisiblePercentage}&h=${maxVisiblePercentage}&i=${elementX}&j=${elementY}&k=${elementWidth}&l=${elementHeight}&m=${totalTime}&n=${loadTimeVisibility}&o=${backgroundedAtStart}&p=${backgrounded}&subTitle=${subTitle}",
@@ -212,7 +212,7 @@ <h1 id="top">AMP Analytics</h1>
     {
       "transport": {"beacon": false, "xhrpost": false},
       "requests": {
-        "visibility": "https://raw.githubusercontent.com/ampproject/amphtml/master/examples/img/ampicon.png?${type}&RANDOM"
+        "visibility": "https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png?${type}&RANDOM"
       },
       "triggers": {
         "visibilityScope": {
diff --git a/extensions/amp-analytics/0.1/test/validator-analytics.out b/extensions/amp-analytics/0.1/test/validator-analytics.out
index 298e5c0990141..25f408987fe45 100644
--- a/extensions/amp-analytics/0.1/test/validator-analytics.out
+++ b/extensions/amp-analytics/0.1/test/validator-analytics.out
@@ -48,7 +48,7 @@ PASS
 |  {
 |    "transport": {"beacon": false, "xhrpost": false},
 |    "requests": {
-|      "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/master/examples/img/ampicon.png",
+|      "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png",
 |      "base": "${endpoint}?${type|default:foo}&path=${canonicalPath}",
 |      "event": "${base}&scrollY=${scrollTop}&scrollX=${scrollLeft}&height=${availableScreenHeight}&width=${availableScreenWidth}&scrollBoundV=${verticalScrollBoundary}&scrollBoundH=${horizontalScrollBoundary}",
 |      "visibility": "${base}&a=${maxContinuousVisibleTime}&b=${totalVisibleTime}&c=${firstSeenTime}&d=${lastSeenTime}&e=${firstVisibleTime}&f=${lastVisibleTime}&g=${minVisiblePercentage}&h=${maxVisiblePercentage}&i=${elementX}&j=${elementY}&k=${elementWidth}&l=${elementHeight}&m=${totalTime}&n=${loadTimeVisibility}&o=${backgroundedAtStart}&p=${backgrounded}&subTitle=${subTitle}",
@@ -213,7 +213,7 @@ PASS
 |      {
 |        "transport": {"beacon": false, "xhrpost": false},
 |        "requests": {
-|          "visibility": "https://raw.githubusercontent.com/ampproject/amphtml/master/examples/img/ampicon.png?${type}&RANDOM"
+|          "visibility": "https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png?${type}&RANDOM"
 |        },
 |        "triggers": {
 |          "visibilityScope": {
diff --git a/extensions/amp-analytics/0.1/test/vendor-requests.json b/extensions/amp-analytics/0.1/test/vendor-requests.json
index def9279ca987a..5bbbcb19e0603 100644
--- a/extensions/amp-analytics/0.1/test/vendor-requests.json
+++ b/extensions/amp-analytics/0.1/test/vendor-requests.json
@@ -37,10 +37,18 @@
     "pageview": "https://hm.baidu.com/hm.gif?si=!token&nv=0&st=4&v=pixel-1.0&rnd=_timestamp_&et=0",
     "event": "https://hm.baidu.com/hm.gif?si=!token&nv=0&st=4&v=pixel-1.0&rnd=_timestamp_&ep=!category*!action*!label*!value&et=4&api=8_0"
   },
+  "blackcrowai": {
+    "pageview": "https://api.blackcrow.ai/v1/js/events/view?page_referrer_url=_document_referrer_&visitor_id=_client_id(_ga)_&page_url=_source_url_&google_tracking_id=!google_tracking_id&device_info=_user_agent_&site_name=!site_name&page_id=amp&page_title=_title_"
+  },
   "blueconic": {
     "event": "https://!tenantId/s/!pixelId.gif?",
     "trackingIdentifier": "https://!tenantId/s/!pixelId.gif?property=!property&!property=_client_id(cid-scope-cookie-fallback-name)_!extraTrackingValues",
-    "defaultTrackingValues": "https://!tenantId/s/!pixelId.gif?property=!property&!property=_client_id(cid-scope-cookie-fallback-name)_!extraTrackingValues&sourceUrl=_source_url_&canonicalUrl=_canonical_url_&referrer=_document_referrer_&title=_title_&visitDate=_timestamp_&geoLocation=_amp_geo_&userAgent=_user_agent_"
+    "defaultTrackingValues": "https://!tenantId/s/!pixelId.gif?property=!property&!property=_client_id(cid-scope-cookie-fallback-name)_!extraTrackingValues&sourceUrl=_source_url_&canonicalUrl=_canonical_url_&referrer=_document_referrer_&title=_title_&visitDate=_timestamp_&geoLocation=_amp_geo(ISOCountry)_&userAgent=_user_agent_"
+  },
+  "bluetriangle": {
+    "host": "https://d.btttag.com",
+    "endpoint": "https://d.btttag.com/btt.gif",
+    "pageview": "https://d.btttag.com/btt.gif?gID=_client_id(bluetriangle_guid)_&sID=_client_id(bluetriangle_sessionid)_&siteID=!siteID&pageName=!pageName&txnName=!trafficSegment&thisURL=_canonical_url_&RefURL=_document_referrer_&dom=_nav_timing(domLoading%2CdomComplete)_&domContentLoadedEnd=_nav_timing(domContentLoadedEventEnd)_&domContentLoadedStart=_nav_timing(domContentLoadedEventStart)_&domInteractive=_nav_timing(domInteractive)_&domLoading=_nav_timing(domLoading)_&domainLookupStart=_nav_timing(domainLookupStart)_&elementCount=0&fByte=_nav_timing(requestStart%2CresponseStart)_&fCPnt=FIRST_CONTENTFUL_PAINT&fetchStart=_nav_timing(fetchStart)_&firstPaint=0&fmp=0&fps=0&fps_tti=0&loadEventStart=_nav_timing(loadEventStart)_&lt_tti=0&nst=_nav_timing(navigationStart)_&orderTND=0&pSz=0&pWSz=0&pageValue=&pgTm=_nav_timing(navigationStart%2CloadEventStart)_&redirectCount=_nav_redirect_count_&redirectStart=_nav_timing(redirectStart)_&requestStart=_nav_timing(requestStart)_&responseStart=_nav_timing(responseStart)_&secureConnectionStart=_nav_timing(secureConnectionStart)_&ssl=_nav_timing(secureConnectionStart%2CresponseStart)_&tcp=_nav_timing(connectStart%2CconnectEnd)_&top=0&totRD=0&tti=0&tul=0&unloadEventStart=_nav_timing(unloadEventStart)_&largestContentfulPaint=LARGEST_CONTENTFUL_PAINT&cumulativeLayoutShift=CUMULATIVE_LAYOUT_SHIFT&firstInputDelay=FIRST_INPUT_DELAY&wcd=0&eT=1&navigationType=1"
   },
   "browsi": {
     "host": "https://events.browsiprod.com/events/amp",
@@ -67,14 +75,14 @@
   "chartbeat": {
     "host": "https://ping.chartbeat.net",
     "basePrefix": "/ping?h=!domain&p=_canonical_path_&u=_client_id(_cb)_&d=_canonical_host_&g=!uid&g0=!sections&g1=!authors&g2=!zone&g3=!sponsorName&g4=!contentType&c=!totalTime&x=_scroll_top_&m=!maxScrollDepth&y=_scroll_height_&o=_scroll_width_&w=_viewport_height_&j=!decayTime&R=1&W=0&I=0&E=_total_engaged_time_&r=_document_referrer_&t=_page_view_id__client_id(_cb)_&b=_page_load_time_&i=_title_&T=_timestamp_&tz=_timezone_&sn=1&C=2",
-    "baseSuffix": "&_",
-    "interval": "https://ping.chartbeat.net/ping?h=!domain&p=_canonical_path_&u=_client_id(_cb)_&d=_canonical_host_&g=!uid&g0=!sections&g1=!authors&g2=!zone&g3=!sponsorName&g4=!contentType&c=!totalTime&x=_scroll_top_&m=!maxScrollDepth&y=_scroll_height_&o=_scroll_width_&w=_viewport_height_&j=!decayTime&R=1&W=0&I=0&E=_total_engaged_time_&r=_document_referrer_&t=_page_view_id__client_id(_cb)_&b=_page_load_time_&i=_title_&T=_timestamp_&tz=_timezone_&sn=1&C=2&_",
-    "anchorClick": "https://ping.chartbeat.net/ping?h=!domain&p=_canonical_path_&u=_client_id(_cb)_&d=_canonical_host_&g=!uid&g0=!sections&g1=!authors&g2=!zone&g3=!sponsorName&g4=!contentType&c=!totalTime&x=_scroll_top_&m=!maxScrollDepth&y=_scroll_height_&o=_scroll_width_&w=_viewport_height_&j=!decayTime&R=1&W=0&I=0&E=_total_engaged_time_&r=_document_referrer_&t=_page_view_id__client_id(_cb)_&b=_page_load_time_&i=_title_&T=_timestamp_&tz=_timezone_&sn=1&C=2&_"
+    "baseSuffix": "&&_",
+    "interval": "https://ping.chartbeat.net/ping?h=!domain&p=_canonical_path_&u=_client_id(_cb)_&d=_canonical_host_&g=!uid&g0=!sections&g1=!authors&g2=!zone&g3=!sponsorName&g4=!contentType&c=!totalTime&x=_scroll_top_&m=!maxScrollDepth&y=_scroll_height_&o=_scroll_width_&w=_viewport_height_&j=!decayTime&R=1&W=0&I=0&E=_total_engaged_time_&r=_document_referrer_&t=_page_view_id__client_id(_cb)_&b=_page_load_time_&i=_title_&T=_timestamp_&tz=_timezone_&sn=1&C=2&&_",
+    "anchorClick": "https://ping.chartbeat.net/ping?h=!domain&p=_canonical_path_&u=_client_id(_cb)_&d=_canonical_host_&g=!uid&g0=!sections&g1=!authors&g2=!zone&g3=!sponsorName&g4=!contentType&c=!totalTime&x=_scroll_top_&m=!maxScrollDepth&y=_scroll_height_&o=_scroll_width_&w=_viewport_height_&j=!decayTime&R=1&W=0&I=0&E=_total_engaged_time_&r=_document_referrer_&t=_page_view_id__client_id(_cb)_&b=_page_load_time_&i=_title_&T=_timestamp_&tz=_timezone_&sn=1&C=2&&_"
   },
   "clicky": {
     "base": "https://in.getclicky.com/in.php?site_id=!site_id",
     "baseSuffix": "&mime=!contentType&x=_random_",
-    "pageview": "https://in.getclicky.com/in.php?site_id=!site_id&res=_screen_width_x_screen_height_&lang=_browser_language_&secure=1&type=pageview&href=_canonical_path_&title=_title_&mime=!contentType&x=_random_",
+    "pageview": "https://in.getclicky.com/in.php?site_id=!site_id&res=_screen_width_x_screen_height_&lang=_browser_language_&secure=1&type=pageview&href=_canonical_path_&title=_title_&ref=_document_referrer_&mime=!contentType&x=_random_",
     "interval": "https://in.getclicky.com/in.php?site_id=!site_id&type=ping&mime=!contentType&x=_random_"
   },
   "colanalytics": {
@@ -93,9 +101,9 @@
     "pageview": "https://scomcluster.cxense.com/Repo/rep.gif?ver=1&typ=pgv&sid=!siteId&ckp=_client_id(cX_P)_&loc=_source_url_&rnd=_random_&ref=_document_referrer_&ltm=_timestamp_&wsz=_screen_width_x_screen_height_&bln=_browser_language_&chs=_document_charset_&col=_screen_color_depth_&tzo=_timezone_&cp_cx_channel=amp"
   },
   "deepbi": {
-    "base": "https://api.deep.bi/v1/pixel/!datasetKey/p.gif?accessKey=!accessKey&gdpr=true&page_href=_source_url_&referrer_href=_document_referrer_&page_title=_title_&amp=true",
-    "pageview": "https://api.deep.bi/v1/pixel/!datasetKey/p.gif?accessKey=!accessKey&gdpr=true&page_href=_source_url_&referrer_href=_document_referrer_&page_title=_title_&amp=true&event_type=page-open",
-    "event": "https://api.deep.bi/v1/pixel/!datasetKey/p.gif?accessKey=!accessKey&gdpr=true&page_href=_source_url_&referrer_href=_document_referrer_&page_title=_title_&amp=true&event_type=event"
+    "base": "https://api.deep.bi/v1/pixel/!datasetKey/p.gif?accessKey=!accessKey&gdpr=true&page_href=_source_url_&referrer_href=_document_referrer_&page_title=_title_&deepbiampid=_client_id(deepbi_amp)_&amp=true",
+    "pageview": "https://api.deep.bi/v1/pixel/!datasetKey/p.gif?accessKey=!accessKey&gdpr=true&page_href=_source_url_&referrer_href=_document_referrer_&page_title=_title_&deepbiampid=_client_id(deepbi_amp)_&amp=true&event_type=page-open",
+    "event": "https://api.deep.bi/v1/pixel/!datasetKey/p.gif?accessKey=!accessKey&gdpr=true&page_href=_source_url_&referrer_href=_document_referrer_&page_title=_title_&deepbiampid=_client_id(deepbi_amp)_&amp=true&event_type=event"
   },
   "dynatrace": {
     "endpoint": "https://!tenant.live.dynatrace.com:443/ampbf/!tenantpath",
@@ -135,6 +143,14 @@
     "pageview": "https://!prefix.hit.gemius.pl/__timestamp_/redot.gif?l=91&id=!identifier&tz=_timezone_&col=_screen_color_depth_&screen=_screen_width_x_screen_height_&window=_viewport_width_x_viewport_height_&fr=1&href=_source_url_&ref=_document_referrer_&sarg=_canonical_url_&extra=gemamp%3D1%7Campid%3D_client_id(gemius)_%7C!extraparams&nc=0&et=view&hsrc=1",
     "event": "https://!prefix.hit.gemius.pl/__timestamp_/redot.gif?l=91&id=!identifier&tz=_timezone_&col=_screen_color_depth_&screen=_screen_width_x_screen_height_&window=_viewport_width_x_viewport_height_&fr=1&href=_source_url_&ref=_document_referrer_&sarg=_canonical_url_&extra=gemamp%3D1%7Campid%3D_client_id(gemius)_%7C!extraparams&nc=0&et=action&hsrc=3"
   },
+  "gfksensic": {
+    "base": "https://%21regionid-config.sensic.net/tp?r=_ampdoc_host_&ua=_user_agent_&v=0.0.1&l=_browser_language_&p=!regionID&m=!mediaID&cid=_client_id(cid)_",
+    "page_params": "<ignore for test>",
+    "client_params": "<ignore for test>",
+    "event_params": "<ignore for test>",
+    "audio-play": "https://%21regionid-config.sensic.net/tp?r=_ampdoc_host_&ua=_user_agent_&v=0.0.1&l=_browser_language_&p=!regionID&m=!mediaID&cid=_client_id(cid)_&ut=_timestamp_&pr=_page_view_id_!streamID&rn=1&c=default&vt=1&sp=-1&st=_timestamp_&ty=PL&sn=_counter(play__page_view_id_!streamID)_",
+    "audio-stop": "https://%21regionid-config.sensic.net/tp?r=_ampdoc_host_&ua=_user_agent_&v=0.0.1&l=_browser_language_&p=!regionID&m=!mediaID&cid=_client_id(cid)_&ut=_timestamp_&pr=_page_view_id_!streamID&rn=1&c=default&vt=1&sp=-1&st=_timestamp_&ty=ST&sn=_counter(stop__page_view_id_!streamID)_"
+  },
   "googleadwords": {
     "conversion_prefix": "<ignore for test>",
     "remarketing_prefix": "<ignore for test>",
@@ -145,24 +161,24 @@
   },
   "googleanalytics": {
     "host": "https://www.google-analytics.com",
-    "basePrefix": "v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&_utmht=_timestamp_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga)_&tid=!account&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_",
+    "basePrefix": "v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&_utmht=_timestamp_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga%2Ctrue)_&tid=!account&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_",
     "baseSuffix": "&a=_page_view_id_&z=_random_",
-    "pageview": "https://www.google-analytics.com/r/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&_utmht=_timestamp_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga)_&tid=!account&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=pageview&jid=_random_&_r=1&a=_page_view_id_&z=_random_",
-    "event": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&_utmht=_timestamp_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga)_&tid=!account&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=event&jid=&ec=!eventCategory&ea=!eventAction&el=!eventLabel&ev=0&a=_page_view_id_&z=_random_",
-    "social": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&_utmht=_timestamp_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga)_&tid=!account&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=social&jid=&sa=!socialAction&sn=!socialNetwork&st=!socialTarget&a=_page_view_id_&z=_random_",
-    "timing": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&_utmht=_timestamp_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga)_&tid=!account&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=!timingRequestType&jid=&plt=_page_load_time_&dns=_domain_lookup_time_&tcp=_tcp_connect_time_&rrt=_redirect_time_&srt=_server_response_time_&pdt=_page_download_time_&clt=_content_load_time_&dit=_dom_interactive_time_&a=_page_view_id_&z=_random_",
-    "error": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&_utmht=_timestamp_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga)_&tid=!account&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=exception&exd=!errorName-!errorMessage&a=_page_view_id_&z=_random_"
+    "pageview": "https://www.google-analytics.com/r/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&_utmht=_timestamp_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga%2Ctrue)_&tid=!account&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=pageview&jid=_random_&_r=1&a=_page_view_id_&z=_random_",
+    "event": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&_utmht=_timestamp_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga%2Ctrue)_&tid=!account&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=event&jid=&ec=!eventCategory&ea=!eventAction&el=!eventLabel&ev=0&a=_page_view_id_&z=_random_",
+    "social": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&_utmht=_timestamp_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga%2Ctrue)_&tid=!account&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=social&jid=&sa=!socialAction&sn=!socialNetwork&st=!socialTarget&a=_page_view_id_&z=_random_",
+    "timing": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&_utmht=_timestamp_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga%2Ctrue)_&tid=!account&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=!timingRequestType&jid=&plt=_page_load_time_&dns=_domain_lookup_time_&tcp=_tcp_connect_time_&rrt=_redirect_time_&srt=_server_response_time_&pdt=_page_download_time_&clt=_content_load_time_&dit=_dom_interactive_time_&a=_page_view_id_&z=_random_",
+    "error": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&_utmht=_timestamp_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga%2Ctrue)_&tid=!account&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=exception&exd=!errorName-!errorMessage&a=_page_view_id_&z=_random_"
   },
   "gtag": {
     "uaHost": "<ignore for test>",
     "uaBasePrefix": "<ignore for test>",
     "uaBaseSuffix": "<ignore for test>",
     "uaPageviewCommon": "<ignore for test>",
-    "uaPageview": "https://www.google-analytics.com/r/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga)_&tid=!trackingId&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=pageview&jid=_random_&gjid=_random_&_r=1&a=_page_view_id_&z=_random_",
-    "uaPageviewNpa": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga)_&tid=!trackingId&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=pageview&jid=_random_&gjid=_random_&_r=1&a=_page_view_id_&z=_random_",
-    "uaEvent": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga)_&tid=!trackingId&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=event&jid=&a=_page_view_id_&z=_random_",
-    "uaTiming": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga)_&tid=!trackingId&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&jid=&plt=_page_load_time_&dns=_domain_lookup_time_&tcp=_tcp_connect_time_&rrt=_redirect_time_&srt=_server_response_time_&pdt=_page_download_time_&clt=_content_load_time_&dit=_dom_interactive_time_&a=_page_view_id_&z=_random_",
-    "uaError": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga)_&tid=!trackingId&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=exception&exd=!errorName-!errorMessage&a=_page_view_id_&z=_random_",
+    "uaPageview": "https://www.google-analytics.com/r/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga%2Ctrue)_&tid=!trackingId&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=pageview&jid=_random_&gjid=_random_&_r=1&a=_page_view_id_&z=_random_",
+    "uaPageviewNpa": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga%2Ctrue)_&tid=!trackingId&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=pageview&jid=_random_&gjid=_random_&_r=1&a=_page_view_id_&z=_random_",
+    "uaEvent": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga%2Ctrue)_&tid=!trackingId&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=event&jid=&a=_page_view_id_&z=_random_",
+    "uaTiming": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga%2Ctrue)_&tid=!trackingId&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&jid=&plt=_page_load_time_&dns=_domain_lookup_time_&tcp=_tcp_connect_time_&rrt=_redirect_time_&srt=_server_response_time_&pdt=_page_download_time_&clt=_content_load_time_&dit=_dom_interactive_time_&a=_page_view_id_&z=_random_",
+    "uaError": "https://www.google-analytics.com/collect?v=1&_v=a1&ds=AMP&aip&_s=1&dt=_title_&sr=_screen_width_x_screen_height_&cid=_client_id(AMP_ECID_GOOGLE%2C%2C_ga%2Ctrue)_&tid=!trackingId&dl=_source_url_&dr=_external_referrer_&sd=_screen_color_depth_&ul=_browser_language_&de=_document_charset_&t=exception&exd=!errorName-!errorMessage&a=_page_view_id_&z=_random_",
     "awConversionPrefix": "<ignore for test>",
     "awRemarketingPrefix": "<ignore for test>",
     "awCommonParams": "<ignore for test>",
@@ -174,11 +190,11 @@
   },
   "ibeatanalytics": {
     "host": "https://api.ibeat-analytics.com",
-    "track": "https://api.ibeat-analytics.com/ping-amp?url=_source_url_&sid=_client_id(_iibeat_session)_&ua=_user_agent_&ref=_document_referrer_&at=_incremental_engaged_time_&tt=!totalTime&pid=_page_view_id_&d=!d&dn=_source_hostname_&ct=!ct&pt=!pt&hid=!hid&au=!au&ag=!ag&aid=!aid&cn=_canonical_url_&pot=!timerStart&rct=1"
+    "track": "https://api.ibeat-analytics.com/ping-amp?url=_source_url_&sid=_client_id(_iibeat_session)_&ua=_user_agent_&ref=_document_referrer_&at=_incremental_engaged_time_&tt=!totalTime&pid=_page_view_id_&d=!d&dn=_source_hostname_&ct=!ct&pt=!pt&hid=!hid&au=!au&ag=!ag&aid=!aid&cn=_canonical_url_&pot=!timerStart&rct=1&id=!id&sec=!sec&tgs=!tgs&pc=!pc"
   },
   "infonline": {
-    "pageview": "!url?st=!st&sv=ke&ap=1&co=!co&cp=!cp&ps=!ps&host=_canonical_host_&path=_canonical_path_&type=pageview",
-    "event": "!url?st=!st&ev=!ev&sv=ke&ap=1&co=!co&cp=!cp&ps=!ps&host=_canonical_host_&path=_canonical_path_&type=event"
+    "pageview": "!url?st=!st&sv=ke&ap=1&co=!co&cp=!cp&ps=!ps&act=_consent_string_&acs=_if(_equals(_consent_state_%2Csufficient)_%2C1)__if(_equals(_consent_state_%2Cinsufficient)_%2C0)__if(_equals(_consent_state_%2C)_%2C-1)_&host=_canonical_host_&path=_canonical_path_&type=pageview",
+    "event": "!url?st=!st&ev=!ev&sv=ke&ap=1&co=!co&cp=!cp&ps=!ps&act=_consent_string_&acs=_if(_equals(_consent_state_%2Csufficient)_%2C1)__if(_equals(_consent_state_%2Cinsufficient)_%2C0)__if(_equals(_consent_state_%2C)_%2C-1)_&host=_canonical_host_&path=_canonical_path_&type=event"
   },
   "infonline_anonymous": {
     "pageview": "!url?ap=1&dn=!dn&cn=!cn&st=!st&co=!co&cp=!cp&au=_canonical_url_&ar=_document_referrer_&ash=_screen_height_&asw=_screen_width_&tp=pageview",
@@ -216,6 +232,23 @@
   "lotame": {
     "pageview": "https://bcp.crwdcntrl.net/amp?c=!account&pv=y"
   },
+  "mapp_intelligence": {
+    "trackURL": "https://!trackDomain/!trackId/wt",
+    "basePrefix": "?p=440,_title_,1,_screen_width_x_screen_height_,_screen_color_depth_,1,",
+    "baseSuffix": ",_document_referrer_,_viewport_width_x_viewport_height_,0&tz=_timezone_&eid=_client_id(amp-wt3-eid)_&la=_browser_language_",
+    "parameterPrefix": "?p=440,_title_,1,_screen_width_x_screen_height_,_screen_color_depth_,1,_timestamp_,_document_referrer_,_viewport_width_x_viewport_height_,0&tz=_timezone_&eid=_client_id(amp-wt3-eid)_&la=_browser_language_",
+    "parameterSuffix": "&pu=_source_url_&eor=1",
+    "pageview": "https://!trackDomain/!trackId/wt?p=440,_title_,1,_screen_width_x_screen_height_,_screen_color_depth_,1,_timestamp_,_document_referrer_,_viewport_width_x_viewport_height_,0&tz=_timezone_&eid=_client_id(amp-wt3-eid)_&la=_browser_language_&&cp570=_page_load_time_&pu=_source_url_&eor=1",
+    "event": "https://!trackDomain/!trackId/wt?p=440,_title_,1,_screen_width_x_screen_height_,_screen_color_depth_,1,_timestamp_,_document_referrer_,_viewport_width_x_viewport_height_,0&tz=_timezone_&eid=_client_id(amp-wt3-eid)_&la=_browser_language_&ct=webtrekk_ignore&&pu=_source_url_&eor=1",
+    "scroll": "https://!trackDomain/!trackId/wt?p=440,_title_,1,_screen_width_x_screen_height_,_screen_color_depth_,1,_timestamp_,_document_referrer_,_viewport_width_x_viewport_height_,0&tz=_timezone_&eid=_client_id(amp-wt3-eid)_&la=_browser_language_&ct=webtrekk_ignore&ck540=!verticalScrollBoundary&pu=_source_url_&eor=1",
+    "mediaPrefix": "https://!trackDomain/!trackId/wt?p=440,_title_,1,_screen_width_x_screen_height_,_screen_color_depth_,1,,_document_referrer_,_viewport_width_x_viewport_height_,0&tz=_timezone_&eid=_client_id(amp-wt3-eid)_&la=_browser_language_&mi=!id",
+    "mediaSuffix": "&mt1=!currentTime&mt2=!duration&&pu=_source_url_&eor=1&x=!playedTotal",
+    "mediaPlay": "https://!trackDomain/!trackId/wt?p=440,_title_,1,_screen_width_x_screen_height_,_screen_color_depth_,1,,_document_referrer_,_viewport_width_x_viewport_height_,0&tz=_timezone_&eid=_client_id(amp-wt3-eid)_&la=_browser_language_&mi=!id&mk=play&mt1=!currentTime&mt2=!duration&&pu=_source_url_&eor=1&x=!playedTotal",
+    "mediaPause": "https://!trackDomain/!trackId/wt?p=440,_title_,1,_screen_width_x_screen_height_,_screen_color_depth_,1,,_document_referrer_,_viewport_width_x_viewport_height_,0&tz=_timezone_&eid=_client_id(amp-wt3-eid)_&la=_browser_language_&mi=!id&mk=pause&mt1=!currentTime&mt2=!duration&&pu=_source_url_&eor=1&x=!playedTotal",
+    "mediaPosition": "https://!trackDomain/!trackId/wt?p=440,_title_,1,_screen_width_x_screen_height_,_screen_color_depth_,1,,_document_referrer_,_viewport_width_x_viewport_height_,0&tz=_timezone_&eid=_client_id(amp-wt3-eid)_&la=_browser_language_&mi=!id&mk=pos&mt1=!currentTime&mt2=!duration&&pu=_source_url_&eor=1&x=!playedTotal",
+    "mediaEnded": "https://!trackDomain/!trackId/wt?p=440,_title_,1,_screen_width_x_screen_height_,_screen_color_depth_,1,,_document_referrer_,_viewport_width_x_viewport_height_,0&tz=_timezone_&eid=_client_id(amp-wt3-eid)_&la=_browser_language_&mi=!id&mk=eof&mt1=!currentTime&mt2=!duration&&pu=_source_url_&eor=1&x=!playedTotal",
+    "mediaCustomEvent": "https://!trackDomain/!trackId/wt?p=440,_title_,1,_screen_width_x_screen_height_,_screen_color_depth_,1,,_document_referrer_,_viewport_width_x_viewport_height_,0&tz=_timezone_&eid=_client_id(amp-wt3-eid)_&la=_browser_language_&mi=!id&mk=customMediaEvent&mt1=!currentTime&mt2=!duration&&pu=_source_url_&eor=1&x=!playedTotal"
+  },
   "marinsoftware": {
     "base": "https://tracker.marinsm.com/tp",
     "baseParams": "cid=!trackerId&ampVersion=_amp_version_&ds=AMP&ref=_external_referrer_&page=_source_url_&uuid=_client_id(marin_amp_id)_&rnd=_random_",
@@ -249,17 +282,18 @@
     "timer": "https://elsa.memoinsights.com/t?amp=true&pid=!pid&title=_title_&url=_canonical_url_&date=!published_at&authors=!authors&referrer=_document_referrer_&page_url=_source_url_&user_id=_client_id(memo_amp_id)_&domain=_canonical_host_&v=amp&t=5000&e=5000"
   },
   "metrika": {
-    "pageview": "https://mc.yandex.ru/watch/!counterId?browser-info=amp%3A1%3Az%3A_timezone_%3Ai%3A_timestamp_%3Arn%3A_random_%3Ala%3A_browser_language_%3Aen%3A_document_charset_%3Arqn%3A1%3As%3A_screen_width_x_screen_height_x_screen_color_depth_%3Aw%3A_available_screen_width_x_available_screen_height_%3Ads%3A_domain_lookup_time_%2C_tcp_connect_time_%2C_server_response_time_%2C_page_download_time_%2C_redirect_time_%2C_nav_timing(redirectStart%2CredirectEnd)_%2C_nav_redirect_count_%2C_nav_timing(domLoading%2CdomInteractive)_%2C_nav_timing(domContentLoadedEventStart%2CdomContentLoadedEventEnd)_%2C_nav_timing(navigationStart%2CdomComplete)_%2C_page_load_time_%2C_nav_timing(loadEventStart%2CloadEventEnd)_%2C_content_load_time_%3Auid%3A_client_id(_ym_uid)_%3Apvid%3A_page_view_id_%3At%3A_title_&site-info=!yaParams&page-url=_source_url_&page-ref=_document_referrer_",
-    "notBounce": "https://mc.yandex.ru/watch/!counterId?browser-info=ar%3A1%3Anb%3A1%3Aamp%3A1%3Az%3A_timezone_%3Ai%3A_timestamp_%3Arn%3A_random_%3Ala%3A_browser_language_%3Aen%3A_document_charset_%3Arqn%3A1%3As%3A_screen_width_x_screen_height_x_screen_color_depth_%3Aw%3A_available_screen_width_x_available_screen_height_%3Ads%3A_domain_lookup_time_%2C_tcp_connect_time_%2C_server_response_time_%2C_page_download_time_%2C_redirect_time_%2C_nav_timing(redirectStart%2CredirectEnd)_%2C_nav_redirect_count_%2C_nav_timing(domLoading%2CdomInteractive)_%2C_nav_timing(domContentLoadedEventStart%2CdomContentLoadedEventEnd)_%2C_nav_timing(navigationStart%2CdomComplete)_%2C_page_load_time_%2C_nav_timing(loadEventStart%2CloadEventEnd)_%2C_content_load_time_%3Auid%3A_client_id(_ym_uid)_%3Apvid%3A_page_view_id_%3At%3A_title_&page-url=_source_url_&page-ref=_document_referrer_",
-    "externalLink": "https://mc.yandex.ru/watch/!counterId?browser-info=ln%3A1%3Aamp%3A1%3Az%3A_timezone_%3Ai%3A_timestamp_%3Arn%3A_random_%3Ala%3A_browser_language_%3Aen%3A_document_charset_%3Arqn%3A1%3As%3A_screen_width_x_screen_height_x_screen_color_depth_%3Aw%3A_available_screen_width_x_available_screen_height_%3Ads%3A_domain_lookup_time_%2C_tcp_connect_time_%2C_server_response_time_%2C_page_download_time_%2C_redirect_time_%2C_nav_timing(redirectStart%2CredirectEnd)_%2C_nav_redirect_count_%2C_nav_timing(domLoading%2CdomInteractive)_%2C_nav_timing(domContentLoadedEventStart%2CdomContentLoadedEventEnd)_%2C_nav_timing(navigationStart%2CdomComplete)_%2C_page_load_time_%2C_nav_timing(loadEventStart%2CloadEventEnd)_%2C_content_load_time_%3Auid%3A_client_id(_ym_uid)_%3Apvid%3A_page_view_id_%3At%3A_title_&page-url=_source_url_&page-ref=_document_referrer_",
-    "reachGoal": "https://mc.yandex.ru/watch/!counterId?browser-info=ar%3A1%3Aamp%3A1%3Az%3A_timezone_%3Ai%3A_timestamp_%3Arn%3A_random_%3Ala%3A_browser_language_%3Aen%3A_document_charset_%3Arqn%3A1%3As%3A_screen_width_x_screen_height_x_screen_color_depth_%3Aw%3A_available_screen_width_x_available_screen_height_%3Ads%3A_domain_lookup_time_%2C_tcp_connect_time_%2C_server_response_time_%2C_page_download_time_%2C_redirect_time_%2C_nav_timing(redirectStart%2CredirectEnd)_%2C_nav_redirect_count_%2C_nav_timing(domLoading%2CdomInteractive)_%2C_nav_timing(domContentLoadedEventStart%2CdomContentLoadedEventEnd)_%2C_nav_timing(navigationStart%2CdomComplete)_%2C_page_load_time_%2C_nav_timing(loadEventStart%2CloadEventEnd)_%2C_content_load_time_%3Auid%3A_client_id(_ym_uid)_%3Apvid%3A_page_view_id_%3At%3A_title_&site-info=!yaParams&page-url=goal%3A%2F%2F_source_host_%2F!goalId&page-ref=_source_url_",
+    "pageview": "https://mc.yandex.ru/watch/!counterId?browser-info=pv%3A1%3Aamp%3A1%3Az%3A_timezone_%3Ai%3A_timestamp_%3Arn%3A_random_%3Ala%3A_browser_language_%3Aen%3A_document_charset_%3Arqn%3A1%3As%3A_screen_width_x_screen_height_x_screen_color_depth_%3Aw%3A_available_screen_width_x_available_screen_height_%3Ads%3A_domain_lookup_time_%2C_tcp_connect_time_%2C_server_response_time_%2C_page_download_time_%2C_nav_timing(navigationStart%2CfetchStart)_%2C_redirect_time_%2C_nav_redirect_count_%2C_nav_timing(domLoading%2CdomInteractive)_%2C_nav_timing(domContentLoadedEventStart%2CdomContentLoadedEventEnd)_%2C_nav_timing(navigationStart%2CdomComplete)_%2C_page_load_time_%2C_nav_timing(loadEventStart%2CloadEventEnd)_%2C_content_load_time_%3Au%3A_client_id(_ym_uid)_%3Ahid%3A_page_view_id_%3At%3A_title_&site-info=!yaParams&page-url=_source_url_&page-ref=_external_referrer_",
+    "notBounce": "https://mc.yandex.ru/watch/!counterId?browser-info=ar%3A1%3Anb%3A1%3Aamp%3A1%3Az%3A_timezone_%3Ai%3A_timestamp_%3Arn%3A_random_%3Ala%3A_browser_language_%3Aen%3A_document_charset_%3Arqn%3A1%3As%3A_screen_width_x_screen_height_x_screen_color_depth_%3Aw%3A_available_screen_width_x_available_screen_height_%3Ads%3A_domain_lookup_time_%2C_tcp_connect_time_%2C_server_response_time_%2C_page_download_time_%2C_nav_timing(navigationStart%2CfetchStart)_%2C_redirect_time_%2C_nav_redirect_count_%2C_nav_timing(domLoading%2CdomInteractive)_%2C_nav_timing(domContentLoadedEventStart%2CdomContentLoadedEventEnd)_%2C_nav_timing(navigationStart%2CdomComplete)_%2C_page_load_time_%2C_nav_timing(loadEventStart%2CloadEventEnd)_%2C_content_load_time_%3Au%3A_client_id(_ym_uid)_%3Ahid%3A_page_view_id_%3At%3A_title_&page-url=_source_url_&page-ref=_external_referrer_",
+    "externalLink": "https://mc.yandex.ru/watch/!counterId?browser-info=ln%3A1%3Aamp%3A1%3Az%3A_timezone_%3Ai%3A_timestamp_%3Arn%3A_random_%3Ala%3A_browser_language_%3Aen%3A_document_charset_%3Arqn%3A1%3As%3A_screen_width_x_screen_height_x_screen_color_depth_%3Aw%3A_available_screen_width_x_available_screen_height_%3Ads%3A_domain_lookup_time_%2C_tcp_connect_time_%2C_server_response_time_%2C_page_download_time_%2C_nav_timing(navigationStart%2CfetchStart)_%2C_redirect_time_%2C_nav_redirect_count_%2C_nav_timing(domLoading%2CdomInteractive)_%2C_nav_timing(domContentLoadedEventStart%2CdomContentLoadedEventEnd)_%2C_nav_timing(navigationStart%2CdomComplete)_%2C_page_load_time_%2C_nav_timing(loadEventStart%2CloadEventEnd)_%2C_content_load_time_%3Au%3A_client_id(_ym_uid)_%3Ahid%3A_page_view_id_%3At%3A_title_&page-url=_source_url_&page-ref=_external_referrer_",
+    "reachGoal": "https://mc.yandex.ru/watch/!counterId?browser-info=ar%3A1%3Aamp%3A1%3Az%3A_timezone_%3Ai%3A_timestamp_%3Arn%3A_random_%3Ala%3A_browser_language_%3Aen%3A_document_charset_%3Arqn%3A1%3As%3A_screen_width_x_screen_height_x_screen_color_depth_%3Aw%3A_available_screen_width_x_available_screen_height_%3Ads%3A_domain_lookup_time_%2C_tcp_connect_time_%2C_server_response_time_%2C_page_download_time_%2C_nav_timing(navigationStart%2CfetchStart)_%2C_redirect_time_%2C_nav_redirect_count_%2C_nav_timing(domLoading%2CdomInteractive)_%2C_nav_timing(domContentLoadedEventStart%2CdomContentLoadedEventEnd)_%2C_nav_timing(navigationStart%2CdomComplete)_%2C_page_load_time_%2C_nav_timing(loadEventStart%2CloadEventEnd)_%2C_content_load_time_%3Au%3A_client_id(_ym_uid)_%3Ahid%3A_page_view_id_%3At%3A_title_&site-info=!yaParams&page-url=goal%3A%2F%2F_source_host_%2F!goalId&page-ref=_source_url_",
     "_domain": "https://mc.yandex.ru",
     "_watch": "https://mc.yandex.ru/watch/!counterId",
-    "_suffix": "page-url=_source_url_&page-ref=_document_referrer_",
+    "_prefix": "https://mc.yandex.ru/watch/!counterId?browser-info=",
+    "_suffix": "page-url=_source_url_&page-ref=_external_referrer_",
     "_goalSuffix": "page-url=goal%3A%2F%2F_source_host_%2F!goalId&page-ref=_source_url_",
     "_techInfo": "amp%3A1%3Az%3A_timezone_%3Ai%3A_timestamp_%3Arn%3A_random_%3Ala%3A_browser_language_%3Aen%3A_document_charset_%3Arqn%3A1%3As%3A_screen_width_x_screen_height_x_screen_color_depth_%3Aw%3A_available_screen_width_x_available_screen_height_%3Ads%3A_domain_lookup_time_%2C_tcp_connect_time_%2C_server_response_time_%2C_page_download_time_%2C_redirect_time_%2C_nav_timing(redirectStart%2CredirectEnd)_%2C_nav_redirect_count_%2C_nav_timing(domLoading%2CdomInteractive)_%2C_nav_timing(domContentLoadedEventStart%2CdomContentLoadedEventEnd)_%2C_nav_timing(navigationStart%2CdomComplete)_%2C_page_load_time_%2C_nav_timing(loadEventStart%2CloadEventEnd)_%2C_content_load_time_%3Auid%3A_client_id(_ym_uid)_%3Apvid%3A_page_view_id_",
     "_timings": "_domain_lookup_time_%2C_tcp_connect_time_%2C_server_response_time_%2C_page_download_time_%2C_redirect_time_%2C_nav_timing(redirectStart%2CredirectEnd)_%2C_nav_redirect_count_%2C_nav_timing(domLoading%2CdomInteractive)_%2C_nav_timing(domContentLoadedEventStart%2CdomContentLoadedEventEnd)_%2C_nav_timing(navigationStart%2CdomComplete)_%2C_page_load_time_%2C_nav_timing(loadEventStart%2CloadEventEnd)_%2C_content_load_time_",
-    "_brInfo": "amp%3A1%3Az%3A_timezone_%3Ai%3A_timestamp_%3Arn%3A_random_%3Ala%3A_browser_language_%3Aen%3A_document_charset_%3Arqn%3A1%3As%3A_screen_width_x_screen_height_x_screen_color_depth_%3Aw%3A_available_screen_width_x_available_screen_height_%3Ads%3A_domain_lookup_time_%2C_tcp_connect_time_%2C_server_response_time_%2C_page_download_time_%2C_redirect_time_%2C_nav_timing(redirectStart%2CredirectEnd)_%2C_nav_redirect_count_%2C_nav_timing(domLoading%2CdomInteractive)_%2C_nav_timing(domContentLoadedEventStart%2CdomContentLoadedEventEnd)_%2C_nav_timing(navigationStart%2CdomComplete)_%2C_page_load_time_%2C_nav_timing(loadEventStart%2CloadEventEnd)_%2C_content_load_time_%3Auid%3A_client_id(_ym_uid)_%3Apvid%3A_page_view_id_%3At%3A_title_",
+    "_brInfo": "amp%3A1%3Az%3A_timezone_%3Ai%3A_timestamp_%3Arn%3A_random_%3Ala%3A_browser_language_%3Aen%3A_document_charset_%3Arqn%3A1%3As%3A_screen_width_x_screen_height_x_screen_color_depth_%3Aw%3A_available_screen_width_x_available_screen_height_%3Ads%3A_domain_lookup_time_%2C_tcp_connect_time_%2C_server_response_time_%2C_page_download_time_%2C_nav_timing(navigationStart%2CfetchStart)_%2C_redirect_time_%2C_nav_redirect_count_%2C_nav_timing(domLoading%2CdomInteractive)_%2C_nav_timing(domContentLoadedEventStart%2CdomContentLoadedEventEnd)_%2C_nav_timing(navigationStart%2CdomComplete)_%2C_page_load_time_%2C_nav_timing(loadEventStart%2CloadEventEnd)_%2C_content_load_time_%3Au%3A_client_id(_ym_uid)_%3Ahid%3A_page_view_id_%3At%3A_title_",
     "_title": "t%3A_title_",
     "_siteInfo": "site-info=!yaParams"
   },
@@ -352,11 +386,11 @@
     "heartbeat": "https://srv.pixel.parsely.com/plogger/?rand=_timestamp_&idsite=!apikey&url=_ampdoc_url_&urlref=_document_referrer_&screen=_screen_width_x_screen_height_%7C_available_screen_width_x_available_screen_height_%7C_screen_color_depth_&title=_title_&date=_timestamp_&ampid=_client_id(_parsely_visitor)_&action=heartbeat&tt=_total_engaged_time_&inc=_incremental_engaged_time(parsely-js)_"
   },
   "permutive": {
-    "track": "https://!namespace.amp.permutive.com/track?k=!key&i=_client_id(_ga)_&it=amp&_ep_client.type=amp&_ep_client.title=_title_&_ep_client.domain=_canonical_host_&_ep_client.url=_canonical_url_&_ep_client.referrer=_document_referrer_&_ep_client.user_agent=_user_agent_",
-    "pageview": "https://!namespace.amp.permutive.com/track?k=!key&i=_client_id(_ga)_&it=amp&e=Pageview&_ep_isp_info=%24ip_isp_info&_ep_geo_info=%24ip_geo_info&_ep_client.type=amp&_ep_client.title=_title_&_ep_client.domain=_canonical_host_&_ep_client.url=_canonical_url_&_ep_client.referrer=_document_referrer_&_ep_client.user_agent=_user_agent_",
-    "engagement": "https://!namespace.amp.permutive.com/track?k=!key&i=_client_id(_ga)_&it=amp&e=PageviewEngagement&_ep_engaged_time=5&_ep_client.type=amp&_ep_client.title=_title_&_ep_client.domain=_canonical_host_&_ep_client.url=_canonical_url_&_ep_client.referrer=_document_referrer_&_ep_client.user_agent=_user_agent_",
-    "completion": "https://!namespace.amp.permutive.com/track?k=!key&i=_client_id(_ga)_&it=amp&e=PageviewEngagement&_ep_completion=0.25&_ep_client.type=amp&_ep_client.title=_title_&_ep_client.domain=_canonical_host_&_ep_client.url=_canonical_url_&_ep_client.referrer=_document_referrer_&_ep_client.user_agent=_user_agent_",
-    "custom": "https://!namespace.amp.permutive.com/track?k=!key&i=_client_id(_ga)_&it=amp&e=!event&_ep_client.type=amp&_ep_client.title=_title_&_ep_client.domain=_canonical_host_&_ep_client.url=_canonical_url_&_ep_client.referrer=_document_referrer_&_ep_client.user_agent=_user_agent_"
+    "track": "https://!namespace.amp.permutive.com/track?k=!key&i=_client_id(_ga)_&it=amp&vid=_page_view_id_64_&s=_page_view_id_64_&_ep_client.type=amp&_ep_client.title=_title_&_ep_client.domain=_canonical_host_&_ep_client.url=_canonical_url_&_ep_client.referrer=_document_referrer_&_ep_client.user_agent=_user_agent_",
+    "pageview": "https://!namespace.amp.permutive.com/track?k=!key&i=_client_id(_ga)_&it=amp&vid=_page_view_id_64_&s=_page_view_id_64_&e=Pageview&_ep_isp_info=%24ip_isp_info&_ep_geo_info=%24ip_geo_info&_ep_client.type=amp&_ep_client.title=_title_&_ep_client.domain=_canonical_host_&_ep_client.url=_canonical_url_&_ep_client.referrer=_document_referrer_&_ep_client.user_agent=_user_agent_",
+    "engagement": "https://!namespace.amp.permutive.com/track?k=!key&i=_client_id(_ga)_&it=amp&vid=_page_view_id_64_&s=_page_view_id_64_&e=PageviewEngagement&_ep_engaged_time=5&_ep_client.type=amp&_ep_client.title=_title_&_ep_client.domain=_canonical_host_&_ep_client.url=_canonical_url_&_ep_client.referrer=_document_referrer_&_ep_client.user_agent=_user_agent_",
+    "completion": "https://!namespace.amp.permutive.com/track?k=!key&i=_client_id(_ga)_&it=amp&vid=_page_view_id_64_&s=_page_view_id_64_&e=PageviewEngagement&_ep_completion=0.25&_ep_client.type=amp&_ep_client.title=_title_&_ep_client.domain=_canonical_host_&_ep_client.url=_canonical_url_&_ep_client.referrer=_document_referrer_&_ep_client.user_agent=_user_agent_",
+    "custom": "https://!namespace.amp.permutive.com/track?k=!key&i=_client_id(_ga)_&it=amp&vid=_page_view_id_64_&s=_page_view_id_64_&e=!event&_ep_client.type=amp&_ep_client.title=_title_&_ep_client.domain=_canonical_host_&_ep_client.url=_canonical_url_&_ep_client.referrer=_document_referrer_&_ep_client.user_agent=_user_agent_"
   },
   "piStats": {
     "host": "https://events.pi-stats.com",
@@ -372,11 +406,22 @@
   "pinpoll": {
     "pageview": "https://pa.pinpoll.com/v1?url=_source_url_&sourceHost=_source_host_&sourceHostname=_source_hostname_&sourcePath=_source_path_&canonicalUrl=_canonical_url_&platform=AMP&title=_title_&referrer=_document_referrer_&screenHeight=_screen_height_&screenWidth=_screen_width_&screenColorDepth=_screen_color_depth_&ua=_user_agent_&clientId=_client_id(pinpoll)_"
   },
+  "ppasanalytics": {
+    "basePrefix": "https://!host/ppms.php?",
+    "baseSuffix": "&idsite=!website_id&rec=1&r=_substr(_replace(_random_%2C0.%2C)_%2C0%2C6)_&url=_source_url_&_id=_if(_match(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__%2Camp-%2C0)%2C_substr(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_substr(_tolowercase(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__)_%2C4%2C16)_%2Cg%2C10)_%2Ch%2C11)_%2Ci%2C12)_%2Cj%2C13)_%2Ck%2C14)_%2Cl%2C15)_%2Cm%2C16)_%2Cn%2C17)_%2Co%2C18)_%2Cp%2C19)_%2Cq%2C1a)_%2Cr%2C1b)_%2Cs%2C1c)_%2Ct%2C1d)_%2Cu%2C1e)_%2Cv%2C1f)_%2Cw%2C20)_%2Cx%2C21)_%2Cy%2C22)_%2Cz%2C23)_%2CA%2C24)_%2CB%2C25)_%2CC%2C26)_%2CD%2C27)_%2CE%2C28)_%2CF%2C29)_%2CG%2C2a)_%2CH%2C2b)_%2CI%2C2c)_%2CJ%2C2d)_%2CK%2C2e)_%2CL%2C2f)_%2CM%2C30)_%2CN%2C31)_%2CO%2C32)_%2CP%2C33)_%2CQ%2C34)_%2CR%2C35)_%2CS%2C36)_%2CT%2C37)_%2CU%2C38)_%2CV%2C39)_%2CW%2C3a)_%2CX%2C3b)_%2CY%2C3c)_%2CZ%2C3d)_%2C_%2C3e)_%2C-%2C3f)%2C0%2C16)%2C_replace(_client_id(_pk_id.!website_id.!website_hash)_%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)_)&apiv=1&urlref=_document_referrer_&res=_screen_width_x_screen_height_&lang=_browser_language_&gt_ms=_server_response_time_&cs=_document_charset_&pv_id=_substr(_page_view_id_64_%2C0%2C6)_",
+    "performanceMetrics": "https://!host/ppms.php?ping=1&idsite=!website_id&rec=1&r=_substr(_replace(_random_%2C0.%2C)_%2C0%2C6)_&url=_source_url_&_id=_if(_match(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__%2Camp-%2C0)%2C_substr(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_substr(_tolowercase(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__)_%2C4%2C16)_%2Cg%2C10)_%2Ch%2C11)_%2Ci%2C12)_%2Cj%2C13)_%2Ck%2C14)_%2Cl%2C15)_%2Cm%2C16)_%2Cn%2C17)_%2Co%2C18)_%2Cp%2C19)_%2Cq%2C1a)_%2Cr%2C1b)_%2Cs%2C1c)_%2Ct%2C1d)_%2Cu%2C1e)_%2Cv%2C1f)_%2Cw%2C20)_%2Cx%2C21)_%2Cy%2C22)_%2Cz%2C23)_%2CA%2C24)_%2CB%2C25)_%2CC%2C26)_%2CD%2C27)_%2CE%2C28)_%2CF%2C29)_%2CG%2C2a)_%2CH%2C2b)_%2CI%2C2c)_%2CJ%2C2d)_%2CK%2C2e)_%2CL%2C2f)_%2CM%2C30)_%2CN%2C31)_%2CO%2C32)_%2CP%2C33)_%2CQ%2C34)_%2CR%2C35)_%2CS%2C36)_%2CT%2C37)_%2CU%2C38)_%2CV%2C39)_%2CW%2C3a)_%2CX%2C3b)_%2CY%2C3c)_%2CZ%2C3d)_%2C_%2C3e)_%2C-%2C3f)%2C0%2C16)%2C_replace(_client_id(_pk_id.!website_id.!website_hash)_%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)_)&apiv=1&urlref=_document_referrer_&res=_screen_width_x_screen_height_&lang=_browser_language_&gt_ms=_server_response_time_&cs=_document_charset_&pv_id=_substr(_page_view_id_64_%2C0%2C6)_&t_di=_dom_interactive_time_&t_le=_content_load_time_&t_dc=_page_download_time_&t_ee=_page_load_time_",
+    "pageview": "https://!host/ppms.php?action_name=_title_&idsite=!website_id&rec=1&r=_substr(_replace(_random_%2C0.%2C)_%2C0%2C6)_&url=_source_url_&_id=_if(_match(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__%2Camp-%2C0)%2C_substr(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_substr(_tolowercase(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__)_%2C4%2C16)_%2Cg%2C10)_%2Ch%2C11)_%2Ci%2C12)_%2Cj%2C13)_%2Ck%2C14)_%2Cl%2C15)_%2Cm%2C16)_%2Cn%2C17)_%2Co%2C18)_%2Cp%2C19)_%2Cq%2C1a)_%2Cr%2C1b)_%2Cs%2C1c)_%2Ct%2C1d)_%2Cu%2C1e)_%2Cv%2C1f)_%2Cw%2C20)_%2Cx%2C21)_%2Cy%2C22)_%2Cz%2C23)_%2CA%2C24)_%2CB%2C25)_%2CC%2C26)_%2CD%2C27)_%2CE%2C28)_%2CF%2C29)_%2CG%2C2a)_%2CH%2C2b)_%2CI%2C2c)_%2CJ%2C2d)_%2CK%2C2e)_%2CL%2C2f)_%2CM%2C30)_%2CN%2C31)_%2CO%2C32)_%2CP%2C33)_%2CQ%2C34)_%2CR%2C35)_%2CS%2C36)_%2CT%2C37)_%2CU%2C38)_%2CV%2C39)_%2CW%2C3a)_%2CX%2C3b)_%2CY%2C3c)_%2CZ%2C3d)_%2C_%2C3e)_%2C-%2C3f)%2C0%2C16)%2C_replace(_client_id(_pk_id.!website_id.!website_hash)_%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)_)&apiv=1&urlref=_document_referrer_&res=_screen_width_x_screen_height_&lang=_browser_language_&gt_ms=_server_response_time_&cs=_document_charset_&pv_id=_substr(_page_view_id_64_%2C0%2C6)_",
+    "customevent": "https://!host/ppms.php?e_c=!event_category&e_a=!event_action&e_n=!event_name&e_v=_default(!event_value%2C0)_&idsite=!website_id&rec=1&r=_substr(_replace(_random_%2C0.%2C)_%2C0%2C6)_&url=_source_url_&_id=_if(_match(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__%2Camp-%2C0)%2C_substr(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_substr(_tolowercase(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__)_%2C4%2C16)_%2Cg%2C10)_%2Ch%2C11)_%2Ci%2C12)_%2Cj%2C13)_%2Ck%2C14)_%2Cl%2C15)_%2Cm%2C16)_%2Cn%2C17)_%2Co%2C18)_%2Cp%2C19)_%2Cq%2C1a)_%2Cr%2C1b)_%2Cs%2C1c)_%2Ct%2C1d)_%2Cu%2C1e)_%2Cv%2C1f)_%2Cw%2C20)_%2Cx%2C21)_%2Cy%2C22)_%2Cz%2C23)_%2CA%2C24)_%2CB%2C25)_%2CC%2C26)_%2CD%2C27)_%2CE%2C28)_%2CF%2C29)_%2CG%2C2a)_%2CH%2C2b)_%2CI%2C2c)_%2CJ%2C2d)_%2CK%2C2e)_%2CL%2C2f)_%2CM%2C30)_%2CN%2C31)_%2CO%2C32)_%2CP%2C33)_%2CQ%2C34)_%2CR%2C35)_%2CS%2C36)_%2CT%2C37)_%2CU%2C38)_%2CV%2C39)_%2CW%2C3a)_%2CX%2C3b)_%2CY%2C3c)_%2CZ%2C3d)_%2C_%2C3e)_%2C-%2C3f)%2C0%2C16)%2C_replace(_client_id(_pk_id.!website_id.!website_hash)_%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)_)&apiv=1&urlref=_document_referrer_&res=_screen_width_x_screen_height_&lang=_browser_language_&gt_ms=_server_response_time_&cs=_document_charset_&pv_id=_substr(_page_view_id_64_%2C0%2C6)_",
+    "download": "https://!host/ppms.php?download=!download_url&idsite=!website_id&rec=1&r=_substr(_replace(_random_%2C0.%2C)_%2C0%2C6)_&url=_source_url_&_id=_if(_match(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__%2Camp-%2C0)%2C_substr(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_substr(_tolowercase(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__)_%2C4%2C16)_%2Cg%2C10)_%2Ch%2C11)_%2Ci%2C12)_%2Cj%2C13)_%2Ck%2C14)_%2Cl%2C15)_%2Cm%2C16)_%2Cn%2C17)_%2Co%2C18)_%2Cp%2C19)_%2Cq%2C1a)_%2Cr%2C1b)_%2Cs%2C1c)_%2Ct%2C1d)_%2Cu%2C1e)_%2Cv%2C1f)_%2Cw%2C20)_%2Cx%2C21)_%2Cy%2C22)_%2Cz%2C23)_%2CA%2C24)_%2CB%2C25)_%2CC%2C26)_%2CD%2C27)_%2CE%2C28)_%2CF%2C29)_%2CG%2C2a)_%2CH%2C2b)_%2CI%2C2c)_%2CJ%2C2d)_%2CK%2C2e)_%2CL%2C2f)_%2CM%2C30)_%2CN%2C31)_%2CO%2C32)_%2CP%2C33)_%2CQ%2C34)_%2CR%2C35)_%2CS%2C36)_%2CT%2C37)_%2CU%2C38)_%2CV%2C39)_%2CW%2C3a)_%2CX%2C3b)_%2CY%2C3c)_%2CZ%2C3d)_%2C_%2C3e)_%2C-%2C3f)%2C0%2C16)%2C_replace(_client_id(_pk_id.!website_id.!website_hash)_%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)_)&apiv=1&urlref=_document_referrer_&res=_screen_width_x_screen_height_&lang=_browser_language_&gt_ms=_server_response_time_&cs=_document_charset_&pv_id=_substr(_page_view_id_64_%2C0%2C6)_",
+    "outlink": "https://!host/ppms.php?link=!outlink_url&idsite=!website_id&rec=1&r=_substr(_replace(_random_%2C0.%2C)_%2C0%2C6)_&url=_source_url_&_id=_if(_match(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__%2Camp-%2C0)%2C_substr(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_substr(_tolowercase(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__)_%2C4%2C16)_%2Cg%2C10)_%2Ch%2C11)_%2Ci%2C12)_%2Cj%2C13)_%2Ck%2C14)_%2Cl%2C15)_%2Cm%2C16)_%2Cn%2C17)_%2Co%2C18)_%2Cp%2C19)_%2Cq%2C1a)_%2Cr%2C1b)_%2Cs%2C1c)_%2Ct%2C1d)_%2Cu%2C1e)_%2Cv%2C1f)_%2Cw%2C20)_%2Cx%2C21)_%2Cy%2C22)_%2Cz%2C23)_%2CA%2C24)_%2CB%2C25)_%2CC%2C26)_%2CD%2C27)_%2CE%2C28)_%2CF%2C29)_%2CG%2C2a)_%2CH%2C2b)_%2CI%2C2c)_%2CJ%2C2d)_%2CK%2C2e)_%2CL%2C2f)_%2CM%2C30)_%2CN%2C31)_%2CO%2C32)_%2CP%2C33)_%2CQ%2C34)_%2CR%2C35)_%2CS%2C36)_%2CT%2C37)_%2CU%2C38)_%2CV%2C39)_%2CW%2C3a)_%2CX%2C3b)_%2CY%2C3c)_%2CZ%2C3d)_%2C_%2C3e)_%2C-%2C3f)%2C0%2C16)%2C_replace(_client_id(_pk_id.!website_id.!website_hash)_%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)_)&apiv=1&urlref=_document_referrer_&res=_screen_width_x_screen_height_&lang=_browser_language_&gt_ms=_server_response_time_&cs=_document_charset_&pv_id=_substr(_page_view_id_64_%2C0%2C6)_",
+    "search": "https://!host/ppms.php?search=!search_keyword&search_cat=!search_category&search_count=!search_result_count&idsite=!website_id&rec=1&r=_substr(_replace(_random_%2C0.%2C)_%2C0%2C6)_&url=_source_url_&_id=_if(_match(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__%2Camp-%2C0)%2C_substr(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_substr(_tolowercase(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__)_%2C4%2C16)_%2Cg%2C10)_%2Ch%2C11)_%2Ci%2C12)_%2Cj%2C13)_%2Ck%2C14)_%2Cl%2C15)_%2Cm%2C16)_%2Cn%2C17)_%2Co%2C18)_%2Cp%2C19)_%2Cq%2C1a)_%2Cr%2C1b)_%2Cs%2C1c)_%2Ct%2C1d)_%2Cu%2C1e)_%2Cv%2C1f)_%2Cw%2C20)_%2Cx%2C21)_%2Cy%2C22)_%2Cz%2C23)_%2CA%2C24)_%2CB%2C25)_%2CC%2C26)_%2CD%2C27)_%2CE%2C28)_%2CF%2C29)_%2CG%2C2a)_%2CH%2C2b)_%2CI%2C2c)_%2CJ%2C2d)_%2CK%2C2e)_%2CL%2C2f)_%2CM%2C30)_%2CN%2C31)_%2CO%2C32)_%2CP%2C33)_%2CQ%2C34)_%2CR%2C35)_%2CS%2C36)_%2CT%2C37)_%2CU%2C38)_%2CV%2C39)_%2CW%2C3a)_%2CX%2C3b)_%2CY%2C3c)_%2CZ%2C3d)_%2C_%2C3e)_%2C-%2C3f)%2C0%2C16)%2C_replace(_client_id(_pk_id.!website_id.!website_hash)_%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)_)&apiv=1&urlref=_document_referrer_&res=_screen_width_x_screen_height_&lang=_browser_language_&gt_ms=_server_response_time_&cs=_document_charset_&pv_id=_substr(_page_view_id_64_%2C0%2C6)_",
+    "goal": "https://!host/ppms.php?idgoal=!goal_id&revenue=!revenue&idsite=!website_id&rec=1&r=_substr(_replace(_random_%2C0.%2C)_%2C0%2C6)_&url=_source_url_&_id=_if(_match(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__%2Camp-%2C0)%2C_substr(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_replace(_substr(_tolowercase(_replace(_client_id(_pk_id.!website_id.!website_hash)__%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)__)_%2C4%2C16)_%2Cg%2C10)_%2Ch%2C11)_%2Ci%2C12)_%2Cj%2C13)_%2Ck%2C14)_%2Cl%2C15)_%2Cm%2C16)_%2Cn%2C17)_%2Co%2C18)_%2Cp%2C19)_%2Cq%2C1a)_%2Cr%2C1b)_%2Cs%2C1c)_%2Ct%2C1d)_%2Cu%2C1e)_%2Cv%2C1f)_%2Cw%2C20)_%2Cx%2C21)_%2Cy%2C22)_%2Cz%2C23)_%2CA%2C24)_%2CB%2C25)_%2CC%2C26)_%2CD%2C27)_%2CE%2C28)_%2CF%2C29)_%2CG%2C2a)_%2CH%2C2b)_%2CI%2C2c)_%2CJ%2C2d)_%2CK%2C2e)_%2CL%2C2f)_%2CM%2C30)_%2CN%2C31)_%2CO%2C32)_%2CP%2C33)_%2CQ%2C34)_%2CR%2C35)_%2CS%2C36)_%2CT%2C37)_%2CU%2C38)_%2CV%2C39)_%2CW%2C3a)_%2CX%2C3b)_%2CY%2C3c)_%2CZ%2C3d)_%2C_%2C3e)_%2C-%2C3f)%2C0%2C16)%2C_replace(_client_id(_pk_id.!website_id.!website_hash)_%2C%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%5BA-Za-z0-9%5D*%5C.%2C)_)&apiv=1&urlref=_document_referrer_&res=_screen_width_x_screen_height_&lang=_browser_language_&gt_ms=_server_response_time_&cs=_document_charset_&pv_id=_substr(_page_view_id_64_%2C0%2C6)_"
+  },
   "pressboard": {
-    "host": "https://adserver.pressboard.ca",
-    "common_params": "&amp=1&url=_canonical_url_&referrer=_document_referrer_&ts=_timestamp_&ua=_user_agent_&rand=_random_&uid=_client_id(_pressboardmedia)_&mid=!mediaId&cid=!campaignId&sid=!storyRequestId&geoid=!geoNameId&cn=!country&rg=!region&ct=!city&dbi=!dbInstance&tz=!timeZoneOffset",
-    "conversion_params": "&hbt=1&pvid=_page_view_id_&asurl=_source_url_&ash=_scroll_height_&asnh=_screen_height_&aasnh=_available_screen_height_&avh=_viewport_height_&ast=_scroll_top_&atet=_total_engaged_time_",
-    "conversion": "https://adserver.pressboard.ca/track/attention-amp?&amp=1&url=_canonical_url_&referrer=_document_referrer_&ts=_timestamp_&ua=_user_agent_&rand=_random_&uid=_client_id(_pressboardmedia)_&mid=!mediaId&cid=!campaignId&sid=!storyRequestId&geoid=!geoNameId&cn=!country&rg=!region&ct=!city&dbi=!dbInstance&tz=!timeZoneOffset&hbt=1&pvid=_page_view_id_&asurl=_source_url_&ash=_scroll_height_&asnh=_screen_height_&aasnh=_available_screen_height_&avh=_viewport_height_&ast=_scroll_top_&atet=_total_engaged_time_"
+    "host": "https://sr.studiostack.com",
+    "common_params": "&amp=1&url=_canonical_url_&referrer=_document_referrer_&ts=_timestamp_&ua=_user_agent_&rand=_random_&uid=_client_id(_pbss)_&mid=!mediaId&geoid=!geoNameId&cn=!country&rg=!region&ct=!city",
+    "conversion_params": "&hbt=1&pvid=_page_view_id_64_&asurl=_source_url_&ash=_scroll_height_&asnh=_screen_height_&aasnh=_available_screen_height_&avh=_viewport_height_&ast=_scroll_top_&atet=_total_engaged_time_",
+    "conversion": "https://sr.studiostack.com/track/attention-amp?&amp=1&url=_canonical_url_&referrer=_document_referrer_&ts=_timestamp_&ua=_user_agent_&rand=_random_&uid=_client_id(_pbss)_&mid=!mediaId&geoid=!geoNameId&cn=!country&rg=!region&ct=!city&hbt=1&pvid=_page_view_id_64_&asurl=_source_url_&ash=_scroll_height_&asnh=_screen_height_&aasnh=_available_screen_height_&avh=_viewport_height_&ast=_scroll_top_&atet=_total_engaged_time_"
   },
   "subscriptions-propensity": {
     "baseParams": "u_tz=240&v=1&cookie=_client_id(__gads)_&cdm=!sourceHostName&_amp_source_origin=_source_host_&extrainfo=",
@@ -414,6 +459,9 @@
     "page": "https://api.segment.io/v1/pixel/page?writeKey=!writeKey&context.library.name=amp&anonymousId=_client_id(AMP_ECID_GOOGLE%2C%2C_ga)_&context.locale=_browser_language_&context.page.path=_canonical_path_&context.page.url=_canonical_url_&context.page.referrer=_document_referrer_&context.page.title=_title_&context.screen.width=_screen_width_&context.screen.height=_screen_height_&name=!name",
     "track": "https://api.segment.io/v1/pixel/track?writeKey=!writeKey&context.library.name=amp&anonymousId=_client_id(AMP_ECID_GOOGLE%2C%2C_ga)_&context.locale=_browser_language_&context.page.path=_canonical_path_&context.page.url=_canonical_url_&context.page.referrer=_document_referrer_&context.page.title=_title_&context.screen.width=_screen_width_&context.screen.height=_screen_height_&event=!event"
   },
+  "sensorsanalytics": {
+    "trackTest": "https://jssdkdata.debugbox.sensorsdata.cn/sa?project=liangshuang&distinct_id=_client_id(sensors_amp_id)_&lib=%5Bobject%20Object%5D&properties=%5Bobject%20Object%5D&type=track&event=!event&time=_timestamp_"
+  },
   "shinystat": {
     "base": "https://amp.shinystat.com/cgi-bin/shinyamp.cgi",
     "commpar": "AMP=1&RM=_random_&USER=!account&PAG=!page&HR=_source_url_&REFER=_document_referrer_&RES=_screen_width_X_screen_height_&COLOR=_screen_color_depth_&CID=_client_id(AMP_CID)_&PAGID=_page_view_id_&TITL=_title_&RQC=1",
@@ -424,12 +472,6 @@
     "event": "https://amp.shinystat.com/cgi-bin/shinyamp.cgi?AMP=1&RM=_random_&USER=!account&PAG=!page&HR=_source_url_&REFER=_document_referrer_&RES=_screen_width_X_screen_height_&COLOR=_screen_color_depth_&CID=_client_id(AMP_CID)_&PAGID=_page_view_id_&TITL=_title_&RQC=1&SSXL=1",
     "link": "https://amp.shinystat.com/cgi-bin/shinyamp.cgi?AMP=1&RM=_random_&USER=!account&PAG=!page&HR=_source_url_&REFER=_document_referrer_&RES=_screen_width_X_screen_height_&COLOR=_screen_color_depth_&CID=_client_id(AMP_CID)_&PAGID=_page_view_id_&TITL=_title_&RQC=1&LINK=!outboundLink"
   },
-  "simplereach": {
-    "host": "https://edge.simplereach.com",
-    "baseParams": "amp=true&pid=!pid&title=_title_&url=_canonical_url_&date=!published_at&authors=!authors&channels=!categories&tags=!tags&referrer=_document_referrer_&page_url=_source_url_&user_id=_client_id(sr_amp_id)_&domain=_canonical_host_&article_id=!article_id&ignore_metadata=!ignore_metadata",
-    "visible": "https://edge.simplereach.com/n?amp=true&pid=!pid&title=_title_&url=_canonical_url_&date=!published_at&authors=!authors&channels=!categories&tags=!tags&referrer=_document_referrer_&page_url=_source_url_&user_id=_client_id(sr_amp_id)_&domain=_canonical_host_&article_id=!article_id&ignore_metadata=!ignore_metadata",
-    "timer": "https://edge.simplereach.com/t?amp=true&pid=!pid&title=_title_&url=_canonical_url_&date=!published_at&authors=!authors&channels=!categories&tags=!tags&referrer=_document_referrer_&page_url=_source_url_&user_id=_client_id(sr_amp_id)_&domain=_canonical_host_&article_id=!article_id&ignore_metadata=!ignore_metadata&t=5000&e=5000"
-  },
   "snowplow": {
     "aaVersion": "amp-0.3",
     "basePrefix": "https://!collectorHost/i?url=_canonical_url_&page=_title_&res=_screen_width_x_screen_height_&stm=_timestamp_&tz=_timezone_code_&aid=!appId&p=web&tv=amp-0.3&cd=_screen_color_depth_&cs=_document_charset_&duid=_client_id(_sp_id)_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ds=_scroll_width_x_scroll_height_",
@@ -437,12 +479,22 @@
     "structEvent": "https://!collectorHost/i?url=_canonical_url_&page=_title_&res=_screen_width_x_screen_height_&stm=_timestamp_&tz=_timezone_code_&aid=!appId&p=web&tv=amp-0.3&cd=_screen_color_depth_&cs=_document_charset_&duid=_client_id(_sp_id)_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ds=_scroll_width_x_scroll_height_&e=se&se_ca=!structEventCategory&se_ac=!structEventAction&se_la=!structEventLabel&se_pr=!structEventProperty&se_va=!structEventValue"
   },
   "snowplow_v2": {
-    "basePrefix": "https://!collectorHost/i?p=web&tv=amp-1.0.1&url=_ampdoc_url_&page=_title_&res=_screen_width_x_screen_height_&dtm=_timestamp_&tz=_timezone_code_&aid=!appId&cd=_screen_color_depth_&cs=_document_charset_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ua=_user_agent_&ds=_scroll_width_x_scroll_height_&uid=!userId&co=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Fcontexts%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%5B%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_id%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampClientId%22%3A%22_client_id(_sp_id)_%22%2C%20%22domainUserid%22%3A%20%22_cookie(_sp_duid)_%22%2C%20%22userId%22%3A%20%22!userId%22%7D%7D%2C_replace(!customContexts%2C%5E%2C*(.%2B%3F)%2C*%24%2C%241%2C)_%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_web_page%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampPageViewId%22%3A%22_page_view_id_64_%22%7D%7D%5D%7D",
-    "pageView": "https://!collectorHost/i?p=web&tv=amp-1.0.1&e=pv&url=_ampdoc_url_&page=_title_&res=_screen_width_x_screen_height_&dtm=_timestamp_&tz=_timezone_code_&aid=!appId&cd=_screen_color_depth_&cs=_document_charset_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ua=_user_agent_&ds=_scroll_width_x_scroll_height_&uid=!userId&co=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Fcontexts%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%5B%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_id%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampClientId%22%3A%22_client_id(_sp_id)_%22%2C%20%22domainUserid%22%3A%20%22_cookie(_sp_duid)_%22%2C%20%22userId%22%3A%20%22!userId%22%7D%7D%2C_replace(!customContexts%2C%5E%2C*(.%2B%3F)%2C*%24%2C%241%2C)_%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_web_page%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampPageViewId%22%3A%22_page_view_id_64_%22%7D%7D%5D%7D",
-    "structEvent": "https://!collectorHost/i?p=web&tv=amp-1.0.1&e=se&se_ca=!structEventCategory&se_ac=!structEventAction&se_la=!structEventLabel&se_pr=!structEventProperty&se_va=_if(!structEventValue%2C!structEventValue%2Cnull)_&url=_ampdoc_url_&page=_title_&res=_screen_width_x_screen_height_&dtm=_timestamp_&tz=_timezone_code_&aid=!appId&cd=_screen_color_depth_&cs=_document_charset_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ua=_user_agent_&ds=_scroll_width_x_scroll_height_&uid=!userId&co=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Fcontexts%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%5B%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_id%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampClientId%22%3A%22_client_id(_sp_id)_%22%2C%20%22domainUserid%22%3A%20%22_cookie(_sp_duid)_%22%2C%20%22userId%22%3A%20%22!userId%22%7D%7D%2C_replace(!customContexts%2C%5E%2C*(.%2B%3F)%2C*%24%2C%241%2C)_%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_web_page%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampPageViewId%22%3A%22_page_view_id_64_%22%7D%7D%5D%7D",
-    "pagePing": "https://!collectorHost/i?p=web&tv=amp-1.0.1&e=pp&pp_mix=_scroll_left_&pp_miy=_scroll_top_&url=_ampdoc_url_&page=_title_&res=_screen_width_x_screen_height_&dtm=_timestamp_&tz=_timezone_code_&aid=!appId&cd=_screen_color_depth_&cs=_document_charset_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ua=_user_agent_&ds=_scroll_width_x_scroll_height_&uid=!userId&co=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Fcontexts%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%5B%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_id%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampClientId%22%3A%22_client_id(_sp_id)_%22%2C%20%22domainUserid%22%3A%20%22_cookie(_sp_duid)_%22%2C%20%22userId%22%3A%20%22!userId%22%7D%7D%2C_replace(!customContexts%2C%5E%2C*(.%2B%3F)%2C*%24%2C%241%2C)_%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_web_page%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampPageViewId%22%3A%22_page_view_id_64_%22%7D%7D%5D%7D",
-    "selfDescribingEvent": "https://!collectorHost/i?p=web&tv=amp-1.0.1&e=ue&ue_pr=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Funstruct_event%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22schema%22%3A%22iglu%3A!customEventSchemaVendor%2F!customEventSchemaName%2Fjsonschema%2F!customEventSchemaVersion%22%2C%22data%22%3A!customEventSchemaData%7D%7D&url=_ampdoc_url_&page=_title_&res=_screen_width_x_screen_height_&dtm=_timestamp_&tz=_timezone_code_&aid=!appId&cd=_screen_color_depth_&cs=_document_charset_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ua=_user_agent_&ds=_scroll_width_x_scroll_height_&uid=!userId&co=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Fcontexts%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%5B%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_id%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampClientId%22%3A%22_client_id(_sp_id)_%22%2C%20%22domainUserid%22%3A%20%22_cookie(_sp_duid)_%22%2C%20%22userId%22%3A%20%22!userId%22%7D%7D%2C_replace(!customContexts%2C%5E%2C*(.%2B%3F)%2C*%24%2C%241%2C)_%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_web_page%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampPageViewId%22%3A%22_page_view_id_64_%22%7D%7D%5D%7D",
-    "ampPagePing": "https://!collectorHost/i?p=web&tv=amp-1.0.1&e=ue&ue_pr=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Funstruct_event%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_page_ping%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22scrollLeft%22%3A_scroll_left_%2C%22scrollWidth%22%3A_scroll_width_%2C%22viewportWidth%22%3A_viewport_width_%2C%22scrollTop%22%3A_scroll_top_%2C%22scrollHeight%22%3A_scroll_height_%2C%22viewportHeight%22%3A_viewport_height_%2C%22totalEngagedTime%22%3A_total_engaged_time_%7D%7D%7D&url=_ampdoc_url_&page=_title_&res=_screen_width_x_screen_height_&dtm=_timestamp_&tz=_timezone_code_&aid=!appId&cd=_screen_color_depth_&cs=_document_charset_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ua=_user_agent_&ds=_scroll_width_x_scroll_height_&uid=!userId&co=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Fcontexts%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%5B%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_id%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampClientId%22%3A%22_client_id(_sp_id)_%22%2C%20%22domainUserid%22%3A%20%22_cookie(_sp_duid)_%22%2C%20%22userId%22%3A%20%22!userId%22%7D%7D%2C_replace(!customContexts%2C%5E%2C*(.%2B%3F)%2C*%24%2C%241%2C)_%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_web_page%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampPageViewId%22%3A%22_page_view_id_64_%22%7D%7D%5D%7D"
+    "basePrefix": "https://!collectorHost/i?p=web&tv=amp-1.0.2&url=_ampdoc_url_&page=_title_&res=_screen_width_x_screen_height_&dtm=_timestamp_&tz=_timezone_code_&aid=!appId&cd=_screen_color_depth_&cs=_document_charset_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ua=_user_agent_&ds=_scroll_width_x_scroll_height_&uid=!userId&co=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Fcontexts%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%5B%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_id%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampClientId%22%3A%22_client_id(_sp_ampid)_%22%2C%20%22domainUserid%22%3A%20%22_if(_substr(_query_param(_sp)_%2C0%2C36)_%2C_substr(_query_param(_sp)_%2C0%2C36)_%2C_if(_linker_param(sp_amp_linker%2C_sp_duid)_%2C_linker_param(sp_amp_linker%2C_sp_duid)_%2C_cookie(_sp_duid)_)_)_%22%2C%20%22userId%22%3A%20%22!userId%22%7D%7D%2C_replace(!customContexts%2C%5E%2C*(.%2B%3F)%2C*%24%2C%241%2C)_%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_web_page%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampPageViewId%22%3A%22_page_view_id_64_%22%7D%7D%5D%7D",
+    "pageView": "https://!collectorHost/i?p=web&tv=amp-1.0.2&e=pv&url=_ampdoc_url_&page=_title_&res=_screen_width_x_screen_height_&dtm=_timestamp_&tz=_timezone_code_&aid=!appId&cd=_screen_color_depth_&cs=_document_charset_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ua=_user_agent_&ds=_scroll_width_x_scroll_height_&uid=!userId&co=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Fcontexts%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%5B%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_id%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampClientId%22%3A%22_client_id(_sp_ampid)_%22%2C%20%22domainUserid%22%3A%20%22_if(_substr(_query_param(_sp)_%2C0%2C36)_%2C_substr(_query_param(_sp)_%2C0%2C36)_%2C_if(_linker_param(sp_amp_linker%2C_sp_duid)_%2C_linker_param(sp_amp_linker%2C_sp_duid)_%2C_cookie(_sp_duid)_)_)_%22%2C%20%22userId%22%3A%20%22!userId%22%7D%7D%2C_replace(!customContexts%2C%5E%2C*(.%2B%3F)%2C*%24%2C%241%2C)_%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_web_page%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampPageViewId%22%3A%22_page_view_id_64_%22%7D%7D%5D%7D",
+    "structEvent": "https://!collectorHost/i?p=web&tv=amp-1.0.2&e=se&se_ca=!structEventCategory&se_ac=!structEventAction&se_la=!structEventLabel&se_pr=!structEventProperty&se_va=_if(!structEventValue%2C!structEventValue%2Cnull)_&url=_ampdoc_url_&page=_title_&res=_screen_width_x_screen_height_&dtm=_timestamp_&tz=_timezone_code_&aid=!appId&cd=_screen_color_depth_&cs=_document_charset_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ua=_user_agent_&ds=_scroll_width_x_scroll_height_&uid=!userId&co=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Fcontexts%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%5B%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_id%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampClientId%22%3A%22_client_id(_sp_ampid)_%22%2C%20%22domainUserid%22%3A%20%22_if(_substr(_query_param(_sp)_%2C0%2C36)_%2C_substr(_query_param(_sp)_%2C0%2C36)_%2C_if(_linker_param(sp_amp_linker%2C_sp_duid)_%2C_linker_param(sp_amp_linker%2C_sp_duid)_%2C_cookie(_sp_duid)_)_)_%22%2C%20%22userId%22%3A%20%22!userId%22%7D%7D%2C_replace(!customContexts%2C%5E%2C*(.%2B%3F)%2C*%24%2C%241%2C)_%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_web_page%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampPageViewId%22%3A%22_page_view_id_64_%22%7D%7D%5D%7D",
+    "pagePing": "https://!collectorHost/i?p=web&tv=amp-1.0.2&e=pp&pp_mix=_scroll_left_&pp_miy=_scroll_top_&url=_ampdoc_url_&page=_title_&res=_screen_width_x_screen_height_&dtm=_timestamp_&tz=_timezone_code_&aid=!appId&cd=_screen_color_depth_&cs=_document_charset_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ua=_user_agent_&ds=_scroll_width_x_scroll_height_&uid=!userId&co=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Fcontexts%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%5B%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_id%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampClientId%22%3A%22_client_id(_sp_ampid)_%22%2C%20%22domainUserid%22%3A%20%22_if(_substr(_query_param(_sp)_%2C0%2C36)_%2C_substr(_query_param(_sp)_%2C0%2C36)_%2C_if(_linker_param(sp_amp_linker%2C_sp_duid)_%2C_linker_param(sp_amp_linker%2C_sp_duid)_%2C_cookie(_sp_duid)_)_)_%22%2C%20%22userId%22%3A%20%22!userId%22%7D%7D%2C_replace(!customContexts%2C%5E%2C*(.%2B%3F)%2C*%24%2C%241%2C)_%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_web_page%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampPageViewId%22%3A%22_page_view_id_64_%22%7D%7D%5D%7D",
+    "selfDescribingEvent": "https://!collectorHost/i?p=web&tv=amp-1.0.2&e=ue&ue_pr=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Funstruct_event%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22schema%22%3A%22iglu%3A!customEventSchemaVendor%2F!customEventSchemaName%2Fjsonschema%2F!customEventSchemaVersion%22%2C%22data%22%3A!customEventSchemaData%7D%7D&url=_ampdoc_url_&page=_title_&res=_screen_width_x_screen_height_&dtm=_timestamp_&tz=_timezone_code_&aid=!appId&cd=_screen_color_depth_&cs=_document_charset_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ua=_user_agent_&ds=_scroll_width_x_scroll_height_&uid=!userId&co=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Fcontexts%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%5B%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_id%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampClientId%22%3A%22_client_id(_sp_ampid)_%22%2C%20%22domainUserid%22%3A%20%22_if(_substr(_query_param(_sp)_%2C0%2C36)_%2C_substr(_query_param(_sp)_%2C0%2C36)_%2C_if(_linker_param(sp_amp_linker%2C_sp_duid)_%2C_linker_param(sp_amp_linker%2C_sp_duid)_%2C_cookie(_sp_duid)_)_)_%22%2C%20%22userId%22%3A%20%22!userId%22%7D%7D%2C_replace(!customContexts%2C%5E%2C*(.%2B%3F)%2C*%24%2C%241%2C)_%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_web_page%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampPageViewId%22%3A%22_page_view_id_64_%22%7D%7D%5D%7D",
+    "ampPagePing": "https://!collectorHost/i?p=web&tv=amp-1.0.2&e=ue&ue_pr=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Funstruct_event%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_page_ping%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22scrollLeft%22%3A_scroll_left_%2C%22scrollWidth%22%3A_scroll_width_%2C%22viewportWidth%22%3A_viewport_width_%2C%22scrollTop%22%3A_scroll_top_%2C%22scrollHeight%22%3A_scroll_height_%2C%22viewportHeight%22%3A_viewport_height_%2C%22totalEngagedTime%22%3A_total_engaged_time_%7D%7D%7D&url=_ampdoc_url_&page=_title_&res=_screen_width_x_screen_height_&dtm=_timestamp_&tz=_timezone_code_&aid=!appId&cd=_screen_color_depth_&cs=_document_charset_&lang=_browser_language_&refr=_document_referrer_&vp=_viewport_width_x_viewport_height_&ua=_user_agent_&ds=_scroll_width_x_scroll_height_&uid=!userId&co=%7B%22schema%22%3A%22iglu%3Acom.snowplowanalytics.snowplow%2Fcontexts%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%5B%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_id%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampClientId%22%3A%22_client_id(_sp_ampid)_%22%2C%20%22domainUserid%22%3A%20%22_if(_substr(_query_param(_sp)_%2C0%2C36)_%2C_substr(_query_param(_sp)_%2C0%2C36)_%2C_if(_linker_param(sp_amp_linker%2C_sp_duid)_%2C_linker_param(sp_amp_linker%2C_sp_duid)_%2C_cookie(_sp_duid)_)_)_%22%2C%20%22userId%22%3A%20%22!userId%22%7D%7D%2C_replace(!customContexts%2C%5E%2C*(.%2B%3F)%2C*%24%2C%241%2C)_%7B%22schema%22%3A%22iglu%3Adev.amp.snowplow%2Famp_web_page%2Fjsonschema%2F1-0-0%22%2C%22data%22%3A%7B%22ampPageViewId%22%3A%22_page_view_id_64_%22%7D%7D%5D%7D"
+  },
+  "taboola": {
+    "loadamptrkhtml": "https://c3.taboola.com/amp/amp-analytics-taboola.html?url=_canonical_url_&aid=!aid&cnsntstr=_consent_string_&cnsntst=_if(_equals(_consent_state_%2Csufficient)_%2C1)__if(_equals(_consent_state_%2Cinsufficient)_%2C0)__if(_equals(_consent_state_%2C)_%2C-1)_"
+  },
+  "tail": {
+    "host": "https://amp.t.tailtarget.com/amp/!account",
+    "domain": "https://amp.t.tailtarget.com/amp",
+    "baseData": "uid=_client_id(tt.u)_&url=_canonical_url_&ref=_document_referrer_&lang=_browser_language_",
+    "pageview": "https://amp.t.tailtarget.com/amp/!account?v=1&uid=_client_id(tt.u)_&url=_canonical_url_&ref=_document_referrer_&lang=_browser_language_",
+    "event": "https://amp.t.tailtarget.com/amp/!account?v=1&uid=_client_id(tt.u)_&url=_canonical_url_&ref=_document_referrer_&lang=_browser_language_&type=event&category=!eventCategory&action=!eventAction&label=!eventLabel&value=!eventValue"
   },
   "teaanalytics": {
     "domain": "https://!channel/v1/amp",
diff --git a/extensions/amp-analytics/0.1/transport-serializer.js b/extensions/amp-analytics/0.1/transport-serializer.js
index 6fb72584db9d5..6b394150cdbc3 100644
--- a/extensions/amp-analytics/0.1/transport-serializer.js
+++ b/extensions/amp-analytics/0.1/transport-serializer.js
@@ -115,7 +115,7 @@ export const TransportSerializers = {
 export function defaultSerializer(baseUrl, batchSegments) {
   const extraUrlParamsStr = batchSegments
     .map((item) => serializeQueryString(item['extraUrlParams']))
-    .filter((queryString) => !!queryString)
+    .filter(Boolean)
     .join('&');
   let requestUrl;
   if (baseUrl.indexOf(EXTRA_URL_PARAM_VAR) >= 0) {
diff --git a/extensions/amp-analytics/0.1/transport.js b/extensions/amp-analytics/0.1/transport.js
index 57d0578a2e8cd..336062a3f9ba4 100644
--- a/extensions/amp-analytics/0.1/transport.js
+++ b/extensions/amp-analytics/0.1/transport.js
@@ -27,6 +27,7 @@ import {WindowInterface} from '../../../src/window-interface';
 import {
   assertHttpsUrl,
   checkCorsUrl,
+  isAmpScriptUri,
   parseUrlDeprecated,
 } from '../../../src/url';
 import {createPixel} from '../../../src/pixel';
@@ -34,6 +35,7 @@ import {dev, user, userAssert} from '../../../src/log';
 import {getAmpAdResourceId} from '../../../src/ad-helper';
 import {getMode} from '../../../src/mode';
 import {getTopWindow} from '../../../src/service';
+
 import {loadPromise} from '../../../src/event-helper';
 import {removeElement} from '../../../src/dom';
 import {toWin} from '../../../src/types';
@@ -47,20 +49,23 @@ const TAG_ = 'amp-analytics/transport';
  */
 export class Transport {
   /**
-   * @param {!Window} win
+   * @param {!AmpDoc} ampdoc
    * @param {!JsonObject} options
    */
-  constructor(win, options = /** @type {!JsonObject} */ ({})) {
+  constructor(ampdoc, options = /** @type {!JsonObject} */ ({})) {
+    /** @private {!AmpDoc} */
+    this.ampdoc_ = ampdoc;
+
     /** @private {!Window} */
-    this.win_ = win;
+    this.win_ = ampdoc.win;
 
     /** @private {!JsonObject} */
     this.options_ = options;
 
     /** @private {string|undefined} */
-    this.referrerPolicy_ = /** @type {string|undefined} */ (this.options_[
-      'referrerPolicy'
-    ]);
+    this.referrerPolicy_ = /** @type {string|undefined} */ (
+      this.options_['referrerPolicy']
+    );
 
     // no-referrer is only supported in image transport
     if (this.referrerPolicy_ === 'no-referrer') {
@@ -75,7 +80,7 @@ export class Transport {
     this.iframeTransport_ = null;
 
     /** @private {boolean} */
-    this.isInabox_ = getMode(win).runtime == 'inabox';
+    this.isInabox_ = getMode(this.win_).runtime == 'inabox';
   }
 
   /**
@@ -97,8 +102,10 @@ export class Transport {
       const request = inBatch
         ? serializer.generateBatchRequest(url, segments, withPayload)
         : serializer.generateRequest(url, segments[0], withPayload);
-      assertHttpsUrl(request.url, 'amp-analytics request');
-      checkCorsUrl(request.url);
+      if (!isAmpScriptUri(request.url)) {
+        assertHttpsUrl(request.url, 'amp-analytics request');
+        checkCorsUrl(request.url);
+      }
       return request;
     }
 
@@ -113,6 +120,14 @@ export class Transport {
       return;
     }
 
+    if (this.options_['amp-script']) {
+      Transport.forwardRequestToAmpScript(this.ampdoc_, {
+        url,
+        payload: getRequest(true).payload,
+      });
+      return;
+    }
+
     if (
       this.options_['beacon'] &&
       Transport.sendRequestUsingBeacon(this.win_, getRequest(this.useBody_))
@@ -207,7 +222,7 @@ export class Transport {
         parseUrlDeprecated(this.win_.location.href).origin,
       'Origin of iframe request must not be equal to the document origin.' +
         ' See https://github.com/ampproject/' +
-        'amphtml/blob/master/spec/amp-iframe-origin-policy.md for details.'
+        'amphtml/blob/main/docs/spec/amp-iframe-origin-policy.md for details.'
     );
 
     /** @const {!Element} */
@@ -229,9 +244,9 @@ export class Transport {
    * @return {!TransportSerializerDef}
    */
   getSerializer_() {
-    return /** @type {!TransportSerializerDef} */ (TransportSerializers[
-      'default'
-    ]);
+    return /** @type {!TransportSerializerDef} */ (
+      TransportSerializers['default']
+    );
   }
 
   /**
@@ -306,6 +321,18 @@ export class Transport {
     xhr.send(request.payload || '');
     return true;
   }
+
+  /**
+   * @param {!AmpDoc} ampdoc
+   * @param {!RequestDef} request
+   * @return {!Promise}
+   */
+  static forwardRequestToAmpScript(ampdoc, request) {
+    return Services.scriptForDocOrNull(ampdoc).then((ampScriptService) => {
+      userAssert(ampScriptService, 'AMP-SCRIPT is not installed');
+      ampScriptService.fetch(request.url, JSON.parse(request.payload));
+    });
+  }
 }
 
 /**
diff --git a/extensions/amp-analytics/0.1/variables.js b/extensions/amp-analytics/0.1/variables.js
index 1d3b80232cdb6..55c683bb8da7e 100644
--- a/extensions/amp-analytics/0.1/variables.js
+++ b/extensions/amp-analytics/0.1/variables.js
@@ -15,19 +15,28 @@
  */
 
 import {Services} from '../../../src/services';
-import {TickLabel} from '../../../src/enums';
-import {asyncStringReplace} from '../../../src/string';
-import {base64UrlEncodeFromString} from '../../../src/utils/base64';
+import {TickLabel} from '../../../src/core/constants/enums';
+import {asyncStringReplace} from '../../../src/core/types/string';
+import {base64UrlEncodeFromString} from '../../../src/core/types/string/base64';
 import {cookieReader} from './cookie-reader';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {getConsentPolicyState} from '../../../src/consent';
+import {dict} from '../../../src/core/types/object';
+import {
+  getActiveExperimentBranches,
+  getExperimentBranch,
+} from '../../../src/experiments';
+import {
+  getConsentMetadata,
+  getConsentPolicyInfo,
+  getConsentPolicyState,
+} from '../../../src/consent';
 import {
   getServiceForDoc,
   getServicePromiseForDoc,
   registerServiceBuilderForDoc,
 } from '../../../src/service';
-import {isArray, isFiniteNumber} from '../../../src/types';
+import {isArray, isFiniteNumber} from '../../../src/core/types';
+
 import {isInFie} from '../../../src/iframe-helper';
 import {linkerReaderServiceFor} from './linker-reader';
 
@@ -173,6 +182,59 @@ function matchMacro(string, matchPattern, opt_matchingGroupIndexStr) {
   return matches && matches[index] ? matches[index] : '';
 }
 
+/**
+ * This macro function allows arithmetic operations over other analytics variables.
+ *
+ * @param {string} leftOperand
+ * @param {string} rightOperand
+ * @param {string} operation
+ * @param {string} round If this flag is truthy the result will be rounded
+ * @return {number}
+ */
+function calcMacro(leftOperand, rightOperand, operation, round) {
+  const left = Number(leftOperand);
+  const right = Number(rightOperand);
+  userAssert(!isNaN(left), 'CALC macro - left operand must be a number');
+  userAssert(!isNaN(right), 'CALC macro - right operand must be a number');
+  let result = 0;
+  switch (operation) {
+    case 'add':
+      result = left + right;
+      break;
+    case 'subtract':
+      result = left - right;
+      break;
+    case 'multiply':
+      result = left * right;
+      break;
+    case 'divide':
+      userAssert(right, 'CALC macro - cannot divide by 0');
+      result = left / right;
+      break;
+    default:
+      user().error(TAG, 'CALC macro - Invalid operation');
+  }
+  return stringToBool(round) ? Math.round(result) : result;
+}
+
+/**
+ * If given an experiment name returns the branch id if a branch is selected.
+ * If no branch name given, it returns a comma separated list of active branch
+ * experiment ids and their names or an empty string if none exist.
+ * @param {!Window} win
+ * @param {string=} opt_expName
+ * @return {string}
+ */
+function experimentBranchesMacro(win, opt_expName) {
+  if (opt_expName) {
+    return getExperimentBranch(win, opt_expName) || '';
+  }
+  const branches = getActiveExperimentBranches(win);
+  return Object.keys(branches)
+    .map((expName) => `${expName}:${branches[expName]}`)
+    .join(',');
+}
+
 /**
  * Provides support for processing of advanced variable syntax like nested
  * expansions macros etc.
@@ -204,6 +266,7 @@ export class VariableService {
     );
     this.register_('$REPLACE', replaceMacro);
     this.register_('$MATCH', matchMacro);
+    this.register_('$CALC', calcMacro);
     this.register_(
       '$EQUALS',
       (firstValue, secValue) => firstValue === secValue
@@ -236,6 +299,15 @@ export class VariableService {
     this.register_('SCROLL_LEFT', () =>
       Math.round(Services.viewportForDoc(this.ampdoc_).getScrollLeft())
     );
+
+    this.register_('EXPERIMENT_BRANCHES', (opt_expName) =>
+      experimentBranchesMacro(this.ampdoc_.win, opt_expName)
+    );
+
+    // Returns the content of a meta tag in the ampdoc
+    this.register_('AMPDOC_META', (meta, defaultValue = '') => {
+      return this.ampdoc_.getMetaByName(meta) ?? defaultValue;
+    });
   }
 
   /**
@@ -247,6 +319,12 @@ export class VariableService {
       'COOKIE': (name) =>
         cookieReader(this.ampdoc_.win, dev().assertElement(element), name),
       'CONSENT_STATE': getConsentStateStr(element),
+      'CONSENT_STRING': getConsentPolicyInfo(element),
+      'CONSENT_METADATA': (key) =>
+        getConsentMetadataValue(
+          element,
+          userAssert(key, 'CONSENT_METADATA macro must contain a key')
+        ),
     };
     const perfMacros = isInFie(element)
       ? {}
@@ -269,7 +347,7 @@ export class VariableService {
             ),
           'FIRST_INPUT_DELAY': () =>
             Services.performanceFor(this.ampdoc_.win).getMetric(
-              TickLabel.FIRST_INPUT_DELAY_VISIBLE
+              TickLabel.FIRST_INPUT_DELAY
             ),
           'CUMULATIVE_LAYOUT_SHIFT': () =>
             Services.performanceFor(this.ampdoc_.win).getMetric(
@@ -319,7 +397,7 @@ export class VariableService {
 
       // Split the key to name and args
       // e.g.: name='SOME_MACRO', args='(arg1, arg2)'
-      const {name, argList} = getNameArgs(key);
+      const {argList, name} = getNameArgs(key);
       if (options.freezeVars[name]) {
         // Do nothing with frozen params
         return match;
@@ -424,7 +502,7 @@ export function encodeVars(raw) {
     return raw.map(encodeVars).join(',');
   }
   // Separate out names and arguments from the value and encode the value.
-  const {name, argList} = getNameArgs(String(raw));
+  const {argList, name} = getNameArgs(String(raw));
   return encodeURIComponent(name) + argList;
 }
 
@@ -470,10 +548,9 @@ export function variableServiceForDoc(elementOrAmpDoc) {
  * @return {!Promise<!VariableService>}
  */
 export function variableServicePromiseForDoc(elementOrAmpDoc) {
-  return /** @type {!Promise<!VariableService>} */ (getServicePromiseForDoc(
-    elementOrAmpDoc,
-    'amp-analytics-variables'
-  ));
+  return /** @type {!Promise<!VariableService>} */ (
+    getServicePromiseForDoc(elementOrAmpDoc, 'amp-analytics-variables')
+  );
 }
 
 /**
@@ -499,6 +576,22 @@ function getConsentStateStr(element) {
   });
 }
 
+/**
+ * Get the associated value from the resolved consent metadata object
+ * @param {!Element} element
+ * @param {string} key
+ * @return {!Promise<?Object>}
+ */
+function getConsentMetadataValue(element, key) {
+  // Get the metadata using the default policy id
+  return getConsentMetadata(element).then((consentMetadata) => {
+    if (!consentMetadata) {
+      return null;
+    }
+    return consentMetadata[key];
+  });
+}
+
 /**
  * Converts string to boolean
  * @param {string} str
diff --git a/extensions/amp-analytics/0.1/vendors/blackcrowai.json b/extensions/amp-analytics/0.1/vendors/blackcrowai.json
new file mode 100644
index 0000000000000..a72b7a543ee44
--- /dev/null
+++ b/extensions/amp-analytics/0.1/vendors/blackcrowai.json
@@ -0,0 +1,24 @@
+{
+  "requests": {
+    "pageview": "https://api.blackcrow.ai/v1/js/events/view"
+  },
+  "triggers": {
+    "trackPageview": {
+      "on": "visible",
+      "request": "pageview"
+    }
+  },
+  "transport": {
+    "useBody": true
+  },
+  "extraUrlParams": {
+    "page_referrer_url": "DOCUMENT_REFERRER",
+    "visitor_id": "CLIENT_ID(_ga)",
+    "page_url": "SOURCE_URL",
+    "google_tracking_id": "${google_tracking_id}",
+    "device_info": "USER_AGENT",
+    "site_name": "${site_name}",
+    "page_id": "amp",
+    "page_title": "TITLE"
+  }
+}
diff --git a/extensions/amp-analytics/0.1/vendors/blueconic.json b/extensions/amp-analytics/0.1/vendors/blueconic.json
index a4546c1808f97..3dfb466744ef0 100644
--- a/extensions/amp-analytics/0.1/vendors/blueconic.json
+++ b/extensions/amp-analytics/0.1/vendors/blueconic.json
@@ -2,9 +2,14 @@
   "requests": {
     "event": "https://${tenantId}/s/${pixelId}.gif?",
     "trackingIdentifier": "${event}property=${property}&${property}=${clientId(cid-scope-cookie-fallback-name)}${extraTrackingValues}",
-    "defaultTrackingValues": "${trackingIdentifier}&sourceUrl=${sourceUrl}&canonicalUrl=${canonicalUrl}&referrer=${documentReferrer}&title=${title}&visitDate=${timestamp}&geoLocation=${ampGeo}&userAgent=${userAgent}"
+    "defaultTrackingValues": "${trackingIdentifier}&sourceUrl=${sourceUrl}&canonicalUrl=${canonicalUrl}&referrer=${documentReferrer}&title=${title}&visitDate=${timestamp}&geoLocation=${ampGeo(ISOCountry)}&userAgent=${userAgent}"
   },
   "vars": {
     "extraTrackingValues": ""
+  },
+  "transport": {
+    "beacon": false,
+    "xhrpost": false,
+    "image": true
   }
 }
diff --git a/extensions/amp-analytics/0.1/vendors/bluetriangle.json b/extensions/amp-analytics/0.1/vendors/bluetriangle.json
new file mode 100644
index 0000000000000..f34f4b5e9b029
--- /dev/null
+++ b/extensions/amp-analytics/0.1/vendors/bluetriangle.json
@@ -0,0 +1,26 @@
+{
+  "vars": {
+    "siteID": "",
+    "pageName": "",
+    "trafficSegment": "",
+    "pageType": "AMP Default",
+    "guid": "${clientId(bluetriangle_guid)}",
+    "sessionID": "${clientId(bluetriangle_sessionid)}"
+  },
+  "requests": {
+    "host": "https://d.btttag.com",
+    "endpoint": "${host}/btt.gif",
+    "pageview": "${endpoint}?gID=${guid}&sID=${sessionID}&siteID=${siteID}&pageName=${pageName}&txnName=${trafficSegment}&thisURL=${canonicalUrl}&RefURL=${documentReferrer}&dom=${navTiming(domLoading,domComplete)}&domContentLoadedEnd=${navTiming(domContentLoadedEventEnd)}&domContentLoadedStart=${navTiming(domContentLoadedEventStart)}&domInteractive=${navTiming(domInteractive)}&domLoading=${navTiming(domLoading)}&domainLookupStart=${navTiming(domainLookupStart)}&elementCount=0&fByte=${navTiming(requestStart,responseStart)}&fCPnt=${firstContentfulPaint}&fetchStart=${navTiming(fetchStart)}&firstPaint=0&fmp=0&fps=0&fps_tti=0&loadEventStart=${navTiming(loadEventStart)}&lt_tti=0&nst=${navTiming(navigationStart)}&orderTND=0&pSz=0&pWSz=0&pageValue=&pgTm=${navTiming(navigationStart, loadEventStart)}&redirectCount=${navRedirectCount}&redirectStart=${navTiming(redirectStart)}&requestStart=${navTiming(requestStart)}&responseStart=${navTiming(responseStart)}&secureConnectionStart=${navTiming(secureConnectionStart)}&ssl=${navTiming(secureConnectionStart, responseStart)}&tcp=${navTiming(connectStart, connectEnd)}&top=0&totRD=0&tti=0&tul=0&unloadEventStart=${navTiming(unloadEventStart)}&largestContentfulPaint=${largestContentfulPaint}&cumulativeLayoutShift=${cumulativeLayoutShift}&firstInputDelay=${firstInputDelay}&wcd=0&eT=1&navigationType=1"
+  },
+  "transport": {
+    "beacon": false,
+    "xhrpost": true,
+    "image": false
+  },
+  "triggers": {
+    "trackPageview": {
+      "on": "ini-load",
+      "request": "pageview"
+    }
+  }
+}
diff --git a/extensions/amp-analytics/0.1/vendors/chartbeat.json b/extensions/amp-analytics/0.1/vendors/chartbeat.json
index 17e3f51b046db..3cf7cf9e67ba2 100644
--- a/extensions/amp-analytics/0.1/vendors/chartbeat.json
+++ b/extensions/amp-analytics/0.1/vendors/chartbeat.json
@@ -2,7 +2,7 @@
   "requests": {
     "host": "https://ping.chartbeat.net",
     "basePrefix": "/ping?h=${domain}&p=${canonicalPath}&u=${clientId(_cb)}&d=${canonicalHost}&g=${uid}&g0=${sections}&g1=${authors}&g2=${zone}&g3=${sponsorName}&g4=${contentType}&c=${totalTime}&x=${scrollTop}&m=${maxScrollDepth}&y=${scrollHeight}&o=${scrollWidth}&w=${viewportHeight}&j=${decayTime}&R=1&W=0&I=0&E=${totalEngagedTime}&r=${documentReferrer}&t=${pageViewId}${clientId(_cb)}&b=${pageLoadTime}&i=${title}&T=${timestamp}&tz=${timezone}&sn=${requestCount}&C=2",
-    "baseSuffix": "&_",
+    "baseSuffix": "&${extraUrlParams}&_",
     "interval": "${host}${basePrefix}${baseSuffix}",
     "anchorClick": "${host}${basePrefix}${baseSuffix}"
   },
diff --git a/extensions/amp-analytics/0.1/vendors/clicky.json b/extensions/amp-analytics/0.1/vendors/clicky.json
index d361bf53df346..857dbc394d929 100644
--- a/extensions/amp-analytics/0.1/vendors/clicky.json
+++ b/extensions/amp-analytics/0.1/vendors/clicky.json
@@ -5,7 +5,7 @@
   "requests": {
     "base": "https://in.getclicky.com/in.php?site_id=${site_id}",
     "baseSuffix": "&mime=${contentType}&x=${random}",
-    "pageview": "${base}&res=${screenWidth}x${screenHeight}&lang=${browserLanguage}&secure=1&type=pageview&href=${canonicalPath}&title=${title}${baseSuffix}",
+    "pageview": "${base}&res=${screenWidth}x${screenHeight}&lang=${browserLanguage}&secure=1&type=pageview&href=${canonicalPath}&title=${title}&ref=${documentReferrer}${baseSuffix}",
     "interval": "${base}&type=ping${baseSuffix}"
   },
   "triggers": {
@@ -17,7 +17,8 @@
       "on": "timer",
       "timerSpec": {
         "interval": 60,
-        "maxTimerLength": 600
+        "maxTimerLength": 600,
+        "immediate": false
       },
       "request": "interval"
     }
diff --git a/extensions/amp-analytics/0.1/vendors/deepbi.json b/extensions/amp-analytics/0.1/vendors/deepbi.json
index 7ba60d0672a9e..614d1349ed90a 100644
--- a/extensions/amp-analytics/0.1/vendors/deepbi.json
+++ b/extensions/amp-analytics/0.1/vendors/deepbi.json
@@ -5,7 +5,7 @@
     "endpoint": "api.deep.bi"
   },
   "requests": {
-    "base": "/v1/pixel/${datasetKey}/p.gif?accessKey=${accessKey}&gdpr=${gdpr}&page_href=${sourceUrl}&referrer_href=${documentReferrer}&page_title=${title}&amp=true",
+    "base": "/v1/pixel/${datasetKey}/p.gif?accessKey=${accessKey}&gdpr=${gdpr}&page_href=${sourceUrl}&referrer_href=${documentReferrer}&page_title=${title}&deepbiampid=${clientId(deepbi_amp)}&amp=true",
     "pageview": "${base}&event_type=page-open",
     "event": "${base}&event_type=event"
   },
@@ -19,5 +19,13 @@
     "beacon": false,
     "xhrpost": false,
     "image": true
+  },
+  "linkers": {
+    "deepbi": {
+      "ids": {
+        "deepbiampid": "CLIENT_ID(deepbi_amp)"
+      },
+      "proxyOnly": false
+    }
   }
 }
diff --git a/extensions/amp-analytics/0.1/vendors/gfksensic.json b/extensions/amp-analytics/0.1/vendors/gfksensic.json
new file mode 100644
index 0000000000000..9742b9f555f7a
--- /dev/null
+++ b/extensions/amp-analytics/0.1/vendors/gfksensic.json
@@ -0,0 +1,30 @@
+{
+  "requestOrigin": "https://${regionID}-config.sensic.net",
+  "requests": {
+    "base": "/tp?${page_params}&${client_params}",
+    "page_params": "r=${r}&ua=${ua}&v=${v}&l=${l}",
+    "client_params": "p=${regionID}&m=${mediaID}&cid=${clientId(cid)}",
+    "event_params": "ut=${ut}&pr=${pr}&rn=${rn}&c=${contentID}&vt=${vt}&sp=${sp}&st=${st}",
+    "audio-play": "${base}&${event_params}&ty=PL&sn=COUNTER(play_${pr})",
+    "audio-stop": "${base}&${event_params}&ty=ST&sn=COUNTER(stop_${pr})"
+  },
+  "vars": {
+    "ty": "HB",
+    "contentID": "default",
+    "v": "0.0.1",
+    "r": "${ampdocHost}",
+    "ut": "${timestamp}",
+    "ua": "${userAgent}",
+    "l": "${browserLanguage}",
+    "pr": "${pageViewId}${streamID}",
+    "rn": "${requestCount}",
+    "vt": "1",
+    "sp": "-1",
+    "st": "${ut}"
+  },
+  "transport": {
+    "beacon": false,
+    "xhrpost": false,
+    "image": true
+  }
+}
diff --git a/extensions/amp-analytics/0.1/vendors/googleanalytics.json b/extensions/amp-analytics/0.1/vendors/googleanalytics.json
index 222ea4254a402..c5385bffe2bc7 100644
--- a/extensions/amp-analytics/0.1/vendors/googleanalytics.json
+++ b/extensions/amp-analytics/0.1/vendors/googleanalytics.json
@@ -2,7 +2,7 @@
   "vars": {
     "eventValue": "0",
     "documentLocation": "SOURCE_URL",
-    "clientId": "CLIENT_ID(AMP_ECID_GOOGLE,,_ga)",
+    "clientId": "CLIENT_ID(AMP_ECID_GOOGLE,,_ga,true)",
     "dataSource": "AMP",
     "anonymizeIP": "aip",
     "errorParam": "${errorName}-${errorMessage}"
diff --git a/extensions/amp-analytics/0.1/vendors/gtag.json b/extensions/amp-analytics/0.1/vendors/gtag.json
index d5115c86893ed..236b1f5099507 100644
--- a/extensions/amp-analytics/0.1/vendors/gtag.json
+++ b/extensions/amp-analytics/0.1/vendors/gtag.json
@@ -18,7 +18,7 @@
   },
   "vars": {
     "eventValue": "0",
-    "clientId": "CLIENT_ID(AMP_ECID_GOOGLE,,_ga)",
+    "clientId": "CLIENT_ID(AMP_ECID_GOOGLE,,_ga,true)",
     "dataSource": "AMP",
     "anonymizeIP": "aip",
     "errorParam": "${errorName}-${errorMessage}"
diff --git a/extensions/amp-analytics/0.1/vendors/ibeatanalytics.json b/extensions/amp-analytics/0.1/vendors/ibeatanalytics.json
index 6d977038edbe3..ea38af444602f 100644
--- a/extensions/amp-analytics/0.1/vendors/ibeatanalytics.json
+++ b/extensions/amp-analytics/0.1/vendors/ibeatanalytics.json
@@ -1,7 +1,7 @@
 {
   "requests": {
     "host": "https://api.ibeat-analytics.com",
-    "track": "${host}/ping-amp?url=${sourceUrl}&sid=${clientId(_iibeat_session)}&ua=${userAgent}&ref=${documentReferrer}&at=${incrementalEngagedTime}&tt=${totalTime}&pid=${pageViewId}&d=${d}&dn=${sourceHostname}&ct=${ct}&pt=${pt}&hid=${hid}&au=${au}&ag=${ag}&aid=${aid}&cn=${canonicalUrl}&pot=${timerStart}&rct=${requestCount}"
+    "track": "${host}/ping-amp?url=${sourceUrl}&sid=${clientId(_iibeat_session)}&ua=${userAgent}&ref=${documentReferrer}&at=${incrementalEngagedTime}&tt=${totalTime}&pid=${pageViewId}&d=${d}&dn=${sourceHostname}&ct=${ct}&pt=${pt}&hid=${hid}&au=${au}&ag=${ag}&aid=${aid}&cn=${canonicalUrl}&pot=${timerStart}&rct=${requestCount}&id=${id}&sec=${sec}&tgs=${tgs}&pc=${pc}"
   },
   "triggers": {
     "trackInterval": {
diff --git a/extensions/amp-analytics/0.1/vendors/infonline.json b/extensions/amp-analytics/0.1/vendors/infonline.json
index 7257ae0363103..e668c13aeaf6a 100644
--- a/extensions/amp-analytics/0.1/vendors/infonline.json
+++ b/extensions/amp-analytics/0.1/vendors/infonline.json
@@ -9,8 +9,8 @@
     "image": true
   },
   "requests": {
-    "pageview": "${url}?st=${st}&sv=${sv}&ap=${ap}&co=${co}&cp=${cp}&ps=${ps}&host=${canonicalHost}&path=${canonicalPath}&type=pageview",
-    "event": "${url}?st=${st}&ev=${ev}&sv=${sv}&ap=${ap}&co=${co}&cp=${cp}&ps=${ps}&host=${canonicalHost}&path=${canonicalPath}&type=event"
+    "pageview": "${url}?st=${st}&sv=${sv}&ap=${ap}&co=${co}&cp=${cp}&ps=${ps}&act=${consentString}&acs=$IF($EQUALS(${consentState}, sufficient), 1)$IF($EQUALS(${consentState}, insufficient), 0)$IF($EQUALS(${consentState}, ), -1)&host=${canonicalHost}&path=${canonicalPath}&type=pageview",
+    "event": "${url}?st=${st}&ev=${ev}&sv=${sv}&ap=${ap}&co=${co}&cp=${cp}&ps=${ps}&act=${consentString}&acs=$IF($EQUALS(${consentState}, sufficient), 1)$IF($EQUALS(${consentState}, insufficient), 0)$IF($EQUALS(${consentState}, ), -1)&host=${canonicalHost}&path=${canonicalPath}&type=event"
   },
   "triggers": {
     "pageview": {
diff --git a/extensions/amp-analytics/0.1/vendors/mapp_intelligence.json b/extensions/amp-analytics/0.1/vendors/mapp_intelligence.json
new file mode 100644
index 0000000000000..d4a918274d57a
--- /dev/null
+++ b/extensions/amp-analytics/0.1/vendors/mapp_intelligence.json
@@ -0,0 +1,41 @@
+{
+  "vars": {
+    "actionName": "webtrekk_ignore",
+    "contentId": "${title}",
+    "mediaName": "${id}",
+    "everId": "${clientId(amp-wt3-eid)}",
+    "mediaEventName": "customMediaEvent"
+  },
+  "requests": {
+    "trackURL": "https://${trackDomain}/${trackId}/wt",
+    "basePrefix": "?p=440,${contentId},1,${screenWidth}x${screenHeight},${screenColorDepth},1,",
+    "baseSuffix": ",${documentReferrer},${viewportWidth}x${viewportHeight},0&tz=${timezone}&eid=${everId}&la=${browserLanguage}",
+    "parameterPrefix": "${basePrefix}${timestamp}${baseSuffix}",
+    "parameterSuffix": "&pu=${sourceUrl}&eor=1",
+    "pageview": "${trackURL}${parameterPrefix}&${extraUrlParams}&cp570=${pageLoadTime}${parameterSuffix}",
+    "event": "${trackURL}${parameterPrefix}&ct=${actionName}&${extraUrlParams}${parameterSuffix}",
+    "scroll": "${trackURL}${parameterPrefix}&ct=${actionName}&ck540=${verticalScrollBoundary}${parameterSuffix}",
+    "mediaPrefix": "${trackURL}${basePrefix}${baseSuffix}&mi=${mediaName}",
+    "mediaSuffix": "&mt1=${currentTime}&mt2=${duration}&${extraUrlParams}${parameterSuffix}&x=${playedTotal}",
+    "mediaPlay": "${mediaPrefix}&mk=play${mediaSuffix}",
+    "mediaPause": "${mediaPrefix}&mk=pause${mediaSuffix}",
+    "mediaPosition": "${mediaPrefix}&mk=pos${mediaSuffix}",
+    "mediaEnded": "${mediaPrefix}&mk=eof${mediaSuffix}",
+    "mediaCustomEvent": "${mediaPrefix}&mk=${mediaEventName}${mediaSuffix}"
+  },
+  "extraUrlParamsReplaceMap": {
+    "pageParameter": "cp",
+    "contentGroup": "cg",
+    "actionParameter": "ck",
+    "sessionParameter": "cs",
+    "ecommerceParameter": "cb",
+    "urmCategory": "uc",
+    "campaignParameter": "cc",
+    "mediaCategory": "mg"
+  },
+  "transport": {
+    "beacon": false,
+    "xhrpost": false,
+    "image": true
+  }
+}
diff --git a/extensions/amp-analytics/0.1/vendors/metrika.json b/extensions/amp-analytics/0.1/vendors/metrika.json
index fc5d75f1ce9c3..582fc145967c4 100644
--- a/extensions/amp-analytics/0.1/vendors/metrika.json
+++ b/extensions/amp-analytics/0.1/vendors/metrika.json
@@ -4,20 +4,31 @@
     "xhrpost": true,
     "image": false
   },
+  "vars": {
+    "_commonData": "amp:1:z:${timezone}:i:${timestamp}:rn:${random}:la:${browserLanguage}:en:${documentCharset}:rqn:${requestCount}",
+    "_screenData": ":s:${screenWidth}x${screenHeight}x${screenColorDepth}:w:${availableScreenWidth}x${availableScreenHeight}",
+    "_timings": ":ds:${domainLookupTime},${tcpConnectTime},${serverResponseTime},${pageDownloadTime},${navTiming(navigationStart,fetchStart)},${redirectTime},${navRedirectCount},${navTiming(domLoading,domInteractive)},${navTiming(domContentLoadedEventStart,domContentLoadedEventEnd)},${navTiming(navigationStart,domComplete)},${pageLoadTime},${navTiming(loadEventStart,loadEventEnd)},${contentLoadTime}",
+    "_idInfo": ":u:${clientId(_ym_uid)}:hid:${pageViewId}",
+    "_title": ":t:${title}",
+    "_notBounceBrInfo": "ar:1:nb:1:",
+    "_externalLinkBrInfo": "ln:1:",
+    "_reachGoalBrInfo": "ar:1:",
+    "_pageViewBrInfo": "pv:1:",
+    "_pageUrl": "${sourceUrl}",
+    "_goalUrl": "goal://${sourceHost}/${goalId}"
+  },
   "requests": {
-    "pageview": "${_watch}?browser-info=${_brInfo}&${_siteInfo}&${_suffix}",
-    "notBounce": "${_watch}?browser-info=ar%3A1%3Anb%3A1%3A${_brInfo}&${_suffix}",
-    "externalLink": "${_watch}?browser-info=ln%3A1%3A${_brInfo}&${_suffix}",
-    "reachGoal": "${_watch}?browser-info=ar%3A1%3A${_brInfo}&${_siteInfo}&${_goalSuffix}",
-    "_domain": "https://mc.yandex.ru",
+    "pageview": "${_prefix}${_pageViewBrInfo}${_brInfo}&${_siteInfo}&${_suffix}",
+    "notBounce": "${_prefix}${_notBounceBrInfo}${_brInfo}&${_suffix}",
+    "externalLink": "${_prefix}${_externalLinkBrInfo}${_brInfo}&${_suffix}",
+    "reachGoal": "${_prefix}${_reachGoalBrInfo}${_brInfo}&${_siteInfo}&${_goalSuffix}",
+    "_prefix": "${_watch}?browser-info=",
     "_watch": "${_domain}/watch/${counterId}",
-    "_suffix": "page-url=${sourceUrl}&page-ref=${documentReferrer}",
-    "_goalSuffix": "page-url=goal%3A%2F%2F${sourceHost}%2F${goalId}&page-ref=${sourceUrl}",
-    "_techInfo": "amp%3A1%3Az%3A${timezone}%3Ai%3A${timestamp}%3Arn%3A${random}%3Ala%3A${browserLanguage}%3Aen%3A${documentCharset}%3Arqn%3A${requestCount}%3As%3A${screenWidth}x${screenHeight}x${screenColorDepth}%3Aw%3A${availableScreenWidth}x${availableScreenHeight}%3Ads%3A${_timings}%3Auid%3A${clientId(_ym_uid)}%3Apvid%3A${pageViewId}",
-    "_timings": "${domainLookupTime}%2C${tcpConnectTime}%2C${serverResponseTime}%2C${pageDownloadTime}%2C${redirectTime}%2C${navTiming(redirectStart,redirectEnd)}%2C${navRedirectCount}%2C${navTiming(domLoading,domInteractive)}%2C${navTiming(domContentLoadedEventStart,domContentLoadedEventEnd)}%2C${navTiming(navigationStart,domComplete)}%2C${pageLoadTime}%2C${navTiming(loadEventStart,loadEventEnd)}%2C${contentLoadTime}",
-    "_brInfo": "${_techInfo}%3A${_title}",
-    "_title": "t%3A${title}",
-    "_siteInfo": "site-info=${yaParams}"
+    "_domain": "https://mc.yandex.ru",
+    "_brInfo": "${_commonData}${_screenData}${_timings}${_idInfo}${_title}",
+    "_siteInfo": "site-info=${yaParams}",
+    "_suffix": "page-url=${_pageUrl}&page-ref=${externalReferrer}",
+    "_goalSuffix": "page-url=${_goalUrl}&page-ref=${_pageUrl}"
   },
   "triggers": {
     "pageview": {
diff --git a/extensions/amp-analytics/0.1/vendors/permutive.json b/extensions/amp-analytics/0.1/vendors/permutive.json
index c5c2b89199911..7ed18c202abf1 100644
--- a/extensions/amp-analytics/0.1/vendors/permutive.json
+++ b/extensions/amp-analytics/0.1/vendors/permutive.json
@@ -1,9 +1,10 @@
 {
   "vars": {
-    "identity": "${clientId(_ga)}"
+    "identity": "${clientId(_ga)}",
+    "viewId": "PAGE_VIEW_ID_64"
   },
   "requests": {
-    "track": "https://${namespace}.amp.permutive.com/track?k=${key}&i=${identity}&it=amp",
+    "track": "https://${namespace}.amp.permutive.com/track?k=${key}&i=${identity}&it=amp&vid=${viewId}&s=${viewId}",
     "pageview": "${track}&e=Pageview&_ep_isp_info=%24ip_isp_info&_ep_geo_info=%24ip_geo_info",
     "engagement": "${track}&e=PageviewEngagement&_ep_engaged_time=5",
     "completion": "${track}&e=PageviewEngagement&_ep_completion=0.25",
diff --git a/extensions/amp-analytics/0.1/vendors/ppasanalytics.json b/extensions/amp-analytics/0.1/vendors/ppasanalytics.json
new file mode 100644
index 0000000000000..f055a33af8c43
--- /dev/null
+++ b/extensions/amp-analytics/0.1/vendors/ppasanalytics.json
@@ -0,0 +1,38 @@
+{
+  "vars": {
+    "host": "",
+    "website_id": "",
+    "website_hash": "",
+    "pk_cookie_value": "$REPLACE($CLIENT_ID(_pk_id.${website_id}.${website_hash}),\\.[A-Za-z0-9]*\\.[A-Za-z0-9]*\\.[A-Za-z0-9]*\\.[A-Za-z0-9]*\\.,)",
+    "visitor_id_from_cookie": "$IF($MATCH(${pk_cookie_value},amp-,0),$SUBSTR($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($REPLACE($SUBSTR($TOLOWERCASE(${pk_cookie_value}),4,16),g,10),h,11),i,12),j,13),k,14),l,15),m,16),n,17),o,18),p,19),q,1a),r,1b),s,1c),t,1d),u,1e),v,1f),w,20),x,21),y,22),z,23),A,24),B,25),C,26),D,27),E,28),F,29),G,2a),H,2b),I,2c),J,2d),K,2e),L,2f),M,30),N,31),O,32),P,33),Q,34),R,35),S,36),T,37),U,38),V,39),W,3a),X,3b),Y,3c),Z,3d),_,3e),-,3f),0,16),${pk_cookie_value})",
+    "request_random": "$SUBSTR($REPLACE(${random},0.,), 0, 6)",
+    "vid": "${visitor_id_from_cookie}"
+  },
+  "requests": {
+    "basePrefix": "https://${host}/ppms.php?",
+    "baseSuffix": "&idsite=${website_id}&rec=1&r=${request_random}&url=${sourceUrl}&_id=${visitor_id_from_cookie}&apiv=1&urlref=${documentReferrer}&res=${screenWidth}x${screenHeight}&lang=${browserLanguage}&gt_ms=${serverResponseTime}&cs=${documentCharset}&pv_id=$SUBSTR($PAGE_VIEW_ID_64, 0, 6)",
+    "performanceMetrics": "${basePrefix}ping=1${baseSuffix}&t_di=${domInteractiveTime}&t_le=${contentLoadTime}&t_dc=${pageDownloadTime}&t_ee=${pageLoadTime}",
+    "pageview": "${basePrefix}action_name=${title}${baseSuffix}",
+    "customevent": "${basePrefix}e_c=${event_category}&e_a=${event_action}&e_n=${event_name}&e_v=$DEFAULT(${event_value}, 0)${baseSuffix}",
+    "download": "${basePrefix}download=${download_url}${baseSuffix}",
+    "outlink": "${basePrefix}link=${outlink_url}${baseSuffix}",
+    "search": "${basePrefix}search=${search_keyword}&search_cat=${search_category}&search_count=${search_result_count}${baseSuffix}",
+    "goal": "${basePrefix}idgoal=${goal_id}&revenue=${revenue}${baseSuffix}"
+  },
+  "triggers": {
+    "trackPageview": {
+      "on": "visible",
+      "request": "pageview"
+    }
+  },
+  "linkers": {
+    "enabled": true,
+    "pk_vid": {
+      "ids": {
+        "vid": "${visitor_id_from_cookie}",
+        "timestamp": "${timestamp}"
+      },
+      "proxyOnly": false
+    }
+  }
+}
diff --git a/extensions/amp-analytics/0.1/vendors/pressboard.json b/extensions/amp-analytics/0.1/vendors/pressboard.json
index bc960acbf3613..750c951d6a72d 100644
--- a/extensions/amp-analytics/0.1/vendors/pressboard.json
+++ b/extensions/amp-analytics/0.1/vendors/pressboard.json
@@ -1,20 +1,16 @@
 {
   "vars": {
     "mediaId": "",
-    "campaignId": "",
-    "storyRequestId": "",
     "geoNameId": "",
     "country": "",
     "region": "",
     "city": "",
-    "dbInstance": "",
-    "timeZoneOffset": "",
-    "clientId": "CLIENT_ID(_pressboardmedia)"
+    "clientId": "CLIENT_ID(_pbss)"
   },
   "requests": {
-    "host": "https://adserver.pressboard.ca",
-    "common_params": "&amp=1&url=${canonicalUrl}&referrer=${documentReferrer}&ts=${timestamp}&ua=${userAgent}&rand=${random}&uid=${clientId}&mid=${mediaId}&cid=${campaignId}&sid=${storyRequestId}&geoid=${geoNameId}&cn=${country}&rg=${region}&ct=${city}&dbi=${dbInstance}&tz=${timeZoneOffset}",
-    "conversion_params": "&hbt=${requestCount}&pvid=${pageViewId}&asurl=${sourceUrl}&ash=${scrollHeight}&asnh=${screenHeight}&aasnh=${availableScreenHeight}&avh=${viewportHeight}&ast=${scrollTop}&atet=${totalEngagedTime}",
+    "host": "https://sr.studiostack.com",
+    "common_params": "&amp=1&url=${canonicalUrl}&referrer=${documentReferrer}&ts=${timestamp}&ua=${userAgent}&rand=${random}&uid=${clientId}&mid=${mediaId}&geoid=${geoNameId}&cn=${country}&rg=${region}&ct=${city}",
+    "conversion_params": "&hbt=${requestCount}&pvid=${pageViewId64}&asurl=${sourceUrl}&ash=${scrollHeight}&asnh=${screenHeight}&aasnh=${availableScreenHeight}&avh=${viewportHeight}&ast=${scrollTop}&atet=${totalEngagedTime}",
     "conversion": "${host}/track/attention-amp?${common_params}${conversion_params}"
   },
   "triggers": {
@@ -34,7 +30,7 @@
   },
   "transport": {
     "beacon": false,
-    "xhrpost": false,
+    "xhrpost": true,
     "image": true
   }
 }
diff --git a/extensions/amp-analytics/0.1/vendors/sensorsanalytics.json b/extensions/amp-analytics/0.1/vendors/sensorsanalytics.json
new file mode 100644
index 0000000000000..1e5f7ce0c972c
--- /dev/null
+++ b/extensions/amp-analytics/0.1/vendors/sensorsanalytics.json
@@ -0,0 +1,33 @@
+{
+  "transport": {
+    "xhrpost": true,
+    "useBody": true
+  },
+  "requests": {
+    "trackTest": "https://jssdkdata.debugbox.sensorsdata.cn/sa?project=liangshuang"
+  },
+  "vars": {
+    "distinctId": "${clientId(sensors_amp_id)}"
+  },
+  "extraUrlParams": {
+    "distinct_id": "${distinctId}",
+    "lib": {
+      "$lib": "amp",
+      "$lib_method": "code",
+      "$lib_version": "1.0.0"
+    },
+    "properties": {
+      "$lib": "amp",
+      "$lib_version": "1.0.0",
+      "$url": "${ampdocUrl}",
+      "$title": "${title}",
+      "$referrer": "${documentReferrer}",
+      "$screen_width": "${screenWidth}",
+      "$screen_height": "${screenHeight}",
+      "amp_properties": "${amp_properties}"
+    },
+    "type": "track",
+    "event": "${event}",
+    "time": "${timestamp}"
+  }
+}
diff --git a/extensions/amp-analytics/0.1/vendors/simplereach.json b/extensions/amp-analytics/0.1/vendors/simplereach.json
deleted file mode 100644
index bb6ce6e479198..0000000000000
--- a/extensions/amp-analytics/0.1/vendors/simplereach.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "vars": {
-    "pid": "",
-    "published_at": "",
-    "authors": [],
-    "channels": [],
-    "tags": []
-  },
-  "requests": {
-    "host": "https://edge.simplereach.com",
-    "baseParams": "amp=true&pid=${pid}&title=${title}&url=${canonicalUrl}&date=${published_at}&authors=${authors}&channels=${categories}&tags=${tags}&referrer=${documentReferrer}&page_url=${sourceUrl}&user_id=${clientId(sr_amp_id)}&domain=${canonicalHost}&article_id=${article_id}&ignore_metadata=${ignore_metadata}",
-    "visible": "${host}/n?${baseParams}",
-    "timer": "${host}/t?${baseParams}&t=5000&e=5000"
-  },
-  "triggers": {
-    "visible": {
-      "on": "visible",
-      "request": "visible"
-    },
-    "timer": {
-      "on": "timer",
-      "timerSpec": {
-        "interval": 5,
-        "maxTimerLength": 1200
-      },
-      "request": "timer"
-    }
-  }
-}
diff --git a/extensions/amp-analytics/0.1/vendors/snowplow_v2.json b/extensions/amp-analytics/0.1/vendors/snowplow_v2.json
index acbe47476f2ae..279e3d8076f14 100644
--- a/extensions/amp-analytics/0.1/vendors/snowplow_v2.json
+++ b/extensions/amp-analytics/0.1/vendors/snowplow_v2.json
@@ -1,6 +1,6 @@
 {
   "linkers": {
-    "linker": {
+    "sp_amp_linker": {
       "ids": {
         "_sp_duid": "${duid}",
         "amp_id": "${ampVistorId}"
@@ -10,23 +10,24 @@
   "cookies": {
     "enabled": true,
     "_sp_duid": {
-      "value": "$IF($IF(COOKIE(_sp_duid), COOKIE(_sp_duid), LINKER_PARAM(linker,_sp_duid)), $IF(COOKIE(_sp_duid), COOKIE(_sp_duid), LINKER_PARAM(linker,_sp_duid)), $SUBSTR(QUERY_PARAM(_sp),0,36))"
+      "value": "$IF($SUBSTR(QUERY_PARAM(_sp),0,36), $SUBSTR(QUERY_PARAM(_sp),0,36), $IF(LINKER_PARAM(sp_amp_linker,_sp_duid), LINKER_PARAM(sp_amp_linker,_sp_duid), COOKIE(_sp_duid)))"
     },
-    "_sp_id": {
-      "value": "LINKER_PARAM(linker, amp_id)"
+    "_sp_ampid": {
+      "value": "$IF(COOKIE(_sp_ampid), LINKER_PARAM(sp_amp_linker, amp_id), $IF(LINKER_PARAM(sp_amp_linker, amp_id), LINKER_PARAM(sp_amp_linker, amp_id), COOKIE(_sp_id)))"
     }
   },
   "vars": {
-    "aaVersion": "amp-1.0.1",
-    "ampVistorId": "CLIENT_ID(_sp_id)",
+    "trackerVersion": "amp-1.0.2",
+    "ampVistorId": "CLIENT_ID(_sp_ampid)",
+    "duid": "$IF($SUBSTR(QUERY_PARAM(_sp),0,36), $SUBSTR(QUERY_PARAM(_sp),0,36), $IF(LINKER_PARAM(sp_amp_linker,_sp_duid), LINKER_PARAM(sp_amp_linker,_sp_duid), COOKIE(_sp_duid)))",
     "nullString": "null",
     "customEventTemplate": "{\"schema\":\"iglu:com.snowplowanalytics.snowplow/unstruct_event/jsonschema/1-0-0\",\"data\":{\"schema\":\"iglu:${customEventSchemaVendor}/${customEventSchemaName}/jsonschema/${customEventSchemaVersion}\",\"data\":${customEventSchemaData}}}",
-    "contextsHead": "{\"schema\":\"iglu:com.snowplowanalytics.snowplow/contexts/jsonschema/1-0-0\",\"data\":[{\"schema\":\"iglu:dev.amp.snowplow/amp_id/jsonschema/1-0-0\",\"data\":{\"ampClientId\":\"${ampVistorId}\", \"domainUserid\": \"COOKIE(_sp_duid)\", \"userId\": \"${userId}\"}},$REPLACE(`${customContexts}`, `^,*(.+?),*$`, `$1,`)",
+    "contextsHead": "{\"schema\":\"iglu:com.snowplowanalytics.snowplow/contexts/jsonschema/1-0-0\",\"data\":[{\"schema\":\"iglu:dev.amp.snowplow/amp_id/jsonschema/1-0-0\",\"data\":{\"ampClientId\":\"${ampVistorId}\", \"domainUserid\": \"${duid}\", \"userId\": \"${userId}\"}},$REPLACE(`${customContexts}`, `^,*(.+?),*$`, `$1,`)",
     "contextsTail": "{\"schema\":\"iglu:dev.amp.snowplow/amp_web_page/jsonschema/1-0-0\",\"data\":{\"ampPageViewId\":\"PAGE_VIEW_ID_64\"}}]}",
     "ampPagePingTemplate": "{\"schema\":\"iglu:com.snowplowanalytics.snowplow/unstruct_event/jsonschema/1-0-0\",\"data\":{\"schema\":\"iglu:dev.amp.snowplow/amp_page_ping/jsonschema/1-0-0\",\"data\":{\"scrollLeft\":${scrollLeft},\"scrollWidth\":${scrollWidth},\"viewportWidth\":${viewportWidth},\"scrollTop\":${scrollTop},\"scrollHeight\":${scrollHeight},\"viewportHeight\":${viewportHeight},\"totalEngagedTime\":${totalEngagedTime}}}}"
   },
   "requests": {
-    "basePrefix": "https://${collectorHost}/i?p=web&tv=${aaVersion}",
+    "basePrefix": "https://${collectorHost}/i?p=web&tv=${trackerVersion}",
     "pageView": "${basePrefix}&e=pv",
     "structEvent": "${basePrefix}&e=se&se_ca=${structEventCategory}&se_ac=${structEventAction}&se_la=${structEventLabel}&se_pr=${structEventProperty}&se_va=$IF(${structEventValue}, ${structEventValue}, ${nullString})",
     "pagePing": "${basePrefix}&e=pp&pp_mix=${scrollLeft}&pp_miy=${scrollTop}",
diff --git a/extensions/amp-analytics/0.1/vendors/taboola.json b/extensions/amp-analytics/0.1/vendors/taboola.json
new file mode 100644
index 0000000000000..f06cb3fb11581
--- /dev/null
+++ b/extensions/amp-analytics/0.1/vendors/taboola.json
@@ -0,0 +1,20 @@
+{
+  "vars": {
+    "aid": ""
+  },
+  "requests": {
+    "loadamptrkhtml": "https://c3.taboola.com/amp/amp-analytics-taboola.html?url=${canonicalUrl}&aid=${aid}&cnsntstr=${consentString}&cnsntst=$IF($EQUALS(${consentState}, sufficient), 1)$IF($EQUALS(${consentState}, insufficient), 0)$IF($EQUALS(${consentState}, ), -1)"
+  },
+  "triggers": {
+    "pageview": {
+      "on": "visible",
+      "request": "loadamptrkhtml",
+      "iframePing": true
+    }
+  },
+  "transport": {
+    "beacon": false,
+    "xhrpost": false,
+    "image": true
+  }
+}
diff --git a/extensions/amp-analytics/0.1/vendors/tail.json b/extensions/amp-analytics/0.1/vendors/tail.json
new file mode 100644
index 0000000000000..57bffd51ddbc1
--- /dev/null
+++ b/extensions/amp-analytics/0.1/vendors/tail.json
@@ -0,0 +1,21 @@
+{
+  "requests": {
+    "host": "https://amp.t.tailtarget.com/amp/${account}",
+    "baseData": "uid=${clientId(tt.u)}&url=${canonicalUrl}&ref=${documentReferrer}&lang=${browserLanguage}",
+    "pageview": "${host}?v=1&${baseData}",
+    "event": "${host}?v=1&${baseData}&type=event&category=${eventCategory}&action=${eventAction}&label=${eventLabel}&value=${eventValue}"
+  },
+  "triggers": {
+    "trackpageview": {
+      "on": "visible",
+      "request": "pageview"
+    }
+  },
+  "transport": {
+    "beacon": false,
+    "xhrpost": false,
+    "image": {
+      "suppressWarnings": true
+    }
+  }
+}
diff --git a/extensions/amp-analytics/0.1/visibility-manager-for-mapp.js b/extensions/amp-analytics/0.1/visibility-manager-for-mapp.js
deleted file mode 100644
index 4fd6efbb23534..0000000000000
--- a/extensions/amp-analytics/0.1/visibility-manager-for-mapp.js
+++ /dev/null
@@ -1,174 +0,0 @@
-/**
- * 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.
- */
-
-import {VisibilityManager} from './visibility-manager';
-import {dev, devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {getMinOpacity} from './opacity';
-
-const TAG = 'amp-analytics/visibility-manager';
-
-export class VisibilityManagerForMApp extends VisibilityManager {
-  /**
-   *
-   * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
-   * @param {!../../../src/inabox/host-services.VisibilityInterface} visibilityInterface
-   */
-  constructor(ampdoc, visibilityInterface) {
-    super(/* parent */ null, ampdoc);
-
-    /**
-     * In VisibilityManagerForMApp case,
-     */
-
-    /** @const @private {!../../../src/inabox/host-services.VisibilityInterface} */
-    this.visibilityInterface_ = visibilityInterface;
-
-    /** @const @private {boolean} */
-    this.backgroundedAtStart_ = !ampdoc.isVisible();
-
-    /** @private {?../../../src/layout-rect.LayoutRectDef} */
-    this.intersectionRect_ = null;
-
-    /** @private {boolean} */
-    this.disposed_ = false;
-
-    // Initate the listener
-    this.visibilityInterface_.onVisibilityChange(
-      this.onVisibilityChangeHandler_.bind(this)
-    );
-  }
-
-  /** @override */
-  dispose() {
-    super.dispose();
-    this.disposed_ = true;
-  }
-
-  /** @override */
-  getStartTime() {
-    // AmpDoc.getFirstVisibleTime depend on the visibilitychange API and
-    // document['hidden']
-    // Expect the ampdoc is always visible in webview
-    return dev().assertNumber(this.ampdoc.getFirstVisibleTime());
-  }
-
-  /** @override */
-  isBackgrounded() {
-    // Listens to visibilitychange event, in theory this never fires
-    return !this.ampdoc.isVisible();
-  }
-
-  /** @override */
-  isBackgroundedAtStart() {
-    // Return the first visible state. In theory this is always true in mApp
-    return this.backgroundedAtStart_;
-  }
-
-  /** @override */
-  getRootMinOpacity() {
-    // Copied the implementation from VisibilityManagerForDoc,
-    // doesn't count iframe opacity
-    const root = this.ampdoc.getRootNode();
-    const rootElement = dev().assertElement(
-      root.documentElement || root.body || root
-    );
-    return getMinOpacity(rootElement);
-  }
-
-  /** @override */
-  listenElement() {
-    // #listenElement not supported in mApp
-    devAssert(
-      false,
-      '%s: element level visibility not supported, ' +
-        'getElementIntersectionRect should not be called in ' +
-        'VisibilityManager for mApp',
-      TAG
-    );
-    return () => {};
-  }
-
-  /**
-   * @override
-   */
-  getRootLayoutBox() {
-    // By the time `#getRootLayoutBox` is called, it is guaranteed that
-    // onVisibilityChangeHandler has been called at least once
-    return /** @type {!../../../src/layout-rect.LayoutRectDef} */ (devAssert(
-      this.intersectionRect_
-    ));
-  }
-
-  /**
-   * @param {!../../../src/inabox/host-services.VisibilityDataDef} visibilityData
-   * @private
-   */
-  onVisibilityChangeHandler_(visibilityData) {
-    if (this.disposed_) {
-      return;
-    }
-    //TODO: Need discussion
-    // rootVisibility is set by hostAPI, instead of ampdoc.isVisible
-    let ratio = visibilityData.visibleRatio;
-    // Convert to valid ratio range in [0, 1]
-    ratio = Math.min(Math.max(0, ratio), 1);
-    this.setRootVisibility(ratio);
-    this.intersectionRect_ = visibilityData.visibleRect;
-  }
-
-  /**
-   * @override
-   */
-  observe() {
-    devAssert(
-      false,
-      '%s: element level visibility not supported, ' +
-        'getElementIntersectionRect should not be called in ' +
-        'VisibilityManager for mApp',
-      TAG
-    );
-    return () => {};
-  }
-
-  /**
-   * @override
-   */
-  getElementVisibility() {
-    devAssert(
-      false,
-      '%s: element level visibility not supported, ' +
-        'getElementIntersectionRect should not be called in ' +
-        'VisibilityManager for mApp',
-      TAG
-    );
-    return 0;
-  }
-
-  /**
-   * @override
-   * @return {?JsonObject}
-   */
-  getElementIntersectionRect() {
-    dev().error(
-      TAG,
-      'element level visibility not supported, ' +
-        'getElementIntersectionRect should not be called in ' +
-        'VisibilityManager for mApp'
-    );
-    return dict({});
-  }
-}
diff --git a/extensions/amp-analytics/0.1/visibility-manager.js b/extensions/amp-analytics/0.1/visibility-manager.js
index 45383cefdd47f..d285697876319 100644
--- a/extensions/amp-analytics/0.1/visibility-manager.js
+++ b/extensions/amp-analytics/0.1/visibility-manager.js
@@ -14,24 +14,20 @@
  * limitations under the License.
  */
 
-import {
-  DEFAULT_THRESHOLD,
-  IntersectionObserverPolyfill,
-  nativeIntersectionObserverSupported,
-} from '../../../src/utils/intersection-observer-polyfill';
 import {Services} from '../../../src/services';
 import {VisibilityModel} from './visibility-model';
 import {dev, user} from '../../../src/log';
-import {dict, map} from '../../../src/utils/object';
+import {dict, map} from '../../../src/core/types/object';
 import {getFriendlyIframeEmbedOptional} from '../../../src/iframe-helper';
 import {getMinOpacity} from './opacity';
 import {getMode} from '../../../src/mode';
 import {getParentWindowFrameElement} from '../../../src/service';
-import {isArray, isFiniteNumber} from '../../../src/types';
+import {isArray, isFiniteNumber} from '../../../src/core/types';
+
 import {
   layoutPositionRelativeToScrolledViewport,
   layoutRectLtwh,
-} from '../../../src/layout-rect';
+} from '../../../src/core/math/layout-rect';
 import {rootNodeFor} from '../../../src/dom';
 
 const TAG = 'amp-analytics/visibility-manager';
@@ -39,6 +35,11 @@ const TAG = 'amp-analytics/visibility-manager';
 const PROP = '__AMP_VIS';
 const VISIBILITY_ID_PROP = '__AMP_VIS_ID';
 
+export const DEFAULT_THRESHOLD = [
+  0, 0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65,
+  0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1,
+];
+
 /** @type {number} */
 let visibilityIdCounter = 1;
 
@@ -104,9 +105,6 @@ export class VisibilityManager {
     /** @const @protected */
     this.ampdoc = ampdoc;
 
-    /** @const @private */
-    this.resources_ = Services.resourcesForDoc(ampdoc);
-
     /** @private {number} */
     this.rootVisibility_ = 0;
 
@@ -391,7 +389,12 @@ export class VisibilityManager {
         const newSpec = spec;
         newSpec['visiblePercentageMin'] = min;
         newSpec['visiblePercentageMax'] = max;
-        const model = new VisibilityModel(newSpec, calcVisibility);
+        const model = new VisibilityModel(
+          newSpec,
+          calcVisibility,
+          /** @type {?../../../src/service/viewport/viewport-impl.ViewportImpl} */
+          (Services.viewportForDoc(this.ampdoc))
+        );
         unlisteners.push(
           this.listen_(
             model,
@@ -407,7 +410,12 @@ export class VisibilityManager {
         unlisteners.forEach((unlistener) => unlistener());
       };
     }
-    const model = new VisibilityModel(spec, calcVisibility);
+    const model = new VisibilityModel(
+      spec,
+      calcVisibility,
+      /** @type {?../../../src/service/viewport/viewport-impl.ViewportImpl} */
+      (Services.viewportForDoc(this.ampdoc))
+    );
     return this.listen_(
       model,
       spec,
@@ -470,12 +478,7 @@ export class VisibilityManager {
       if (opt_element) {
         state['elementId'] = opt_element.id;
         state['opacity'] = getMinOpacity(opt_element);
-        const resource = this.resources_.getResourceForElementOptional(
-          opt_element
-        );
-        layoutBox = resource
-          ? resource.getLayoutBox()
-          : viewport.getLayoutRect(opt_element);
+        layoutBox = viewport.getLayoutRect(opt_element);
         const intersectionRatio = this.getElementVisibility(opt_element);
         const intersectionRect = this.getElementIntersectionRect(opt_element);
         Object.assign(
@@ -590,12 +593,14 @@ export class VisibilityManagerForDoc extends VisibilityManager {
      * @private {!Object<number, {
      *   element: !Element,
      *   intersectionRatio: number,
+     *   isVisible: boolean,
+     *   boundingClientRect: ?../../../src/layout-rect.LayoutRectDef,
      *   listeners: !Array<function(number)>
      * }>}
      */
     this.trackedElements_ = map();
 
-    /** @private {?IntersectionObserver|?IntersectionObserverPolyfill} */
+    /** @private {?IntersectionObserver} */
     this.intersectionObserver_ = null;
 
     if (getMode(this.ampdoc.win).runtime == 'inabox') {
@@ -607,6 +612,30 @@ export class VisibilityManagerForDoc extends VisibilityManager {
       this.unsubscribe(
         this.observe(rootElement, this.setRootVisibility.bind(this))
       );
+      // Observe inabox window resize event.
+      const resizeListener = () => {
+        const id = getElementId(rootElement);
+        const trackedRoot = this.trackedElements_[id];
+        if (!trackedRoot) {
+          return;
+        }
+        if (
+          this.ampdoc.win./*OK*/ innerHeight < 1 ||
+          this.ampdoc.win./*OK*/ innerWidth < 1
+        ) {
+          trackedRoot.isVisible = false;
+        } else {
+          trackedRoot.isVisible = true;
+        }
+        this.setRootVisibility(
+          trackedRoot.isVisible ? trackedRoot.intersectionRatio : 0
+        );
+      };
+      this.ampdoc.win.addEventListener('resize', resizeListener);
+
+      this.unsubscribe(() => {
+        this.ampdoc.win.removeEventListener('resize', resizeListener);
+      });
     } else {
       // Main document: visibility is based on the ampdoc.
       this.setRootVisibility(this.ampdoc.isVisible() ? 1 : 0);
@@ -667,8 +696,6 @@ export class VisibilityManagerForDoc extends VisibilityManager {
 
   /** @override */
   observe(element, listener) {
-    this.polyfillAmpElementIfNeeded_(element);
-
     const id = getElementId(element);
     let trackedElement = this.trackedElements_[id];
     if (!trackedElement) {
@@ -676,10 +703,15 @@ export class VisibilityManagerForDoc extends VisibilityManager {
         element,
         intersectionRatio: 0,
         intersectionRect: null,
+        isVisible: false,
+        boundingClientRect: null,
         listeners: [],
       };
       this.trackedElements_[id] = trackedElement;
-    } else if (trackedElement.intersectionRatio > 0) {
+    } else if (
+      trackedElement.intersectionRatio > 0 &&
+      trackedElement.isVisible
+    ) {
       // This has already been tracked and the `intersectionRatio` is fresh.
       listener(trackedElement.intersectionRatio);
     }
@@ -707,7 +739,12 @@ export class VisibilityManagerForDoc extends VisibilityManager {
     }
     const id = getElementId(element);
     const trackedElement = this.trackedElements_[id];
-    return (trackedElement && trackedElement.intersectionRatio) || 0;
+    return (
+      (trackedElement &&
+        trackedElement.isVisible &&
+        trackedElement.intersectionRatio) ||
+      0
+    );
   }
 
   /**
@@ -729,63 +766,18 @@ export class VisibilityManagerForDoc extends VisibilityManager {
   }
 
   /**
-   * @return {!IntersectionObserver|!IntersectionObserverPolyfill}
+   * @return {!IntersectionObserver}
    * @private
    */
   getIntersectionObserver_() {
     if (!this.intersectionObserver_) {
-      this.intersectionObserver_ = this.createIntersectionObserver_();
-    }
-    return this.intersectionObserver_;
-  }
-
-  /**
-   * @return {!IntersectionObserver|!IntersectionObserverPolyfill}
-   * @private
-   */
-  createIntersectionObserver_() {
-    // Native.
-    const {win} = this.ampdoc;
-    if (nativeIntersectionObserverSupported(win)) {
-      return new win.IntersectionObserver(
+      const {win} = this.ampdoc;
+      this.intersectionObserver_ = new win.IntersectionObserver(
         this.onIntersectionChanges_.bind(this),
         {threshold: DEFAULT_THRESHOLD}
       );
     }
-
-    // Polyfill.
-    const intersectionObserverPolyfill = new IntersectionObserverPolyfill(
-      this.onIntersectionChanges_.bind(this),
-      {threshold: DEFAULT_THRESHOLD}
-    );
-    const ticker = () => {
-      intersectionObserverPolyfill.tick(this.viewport_.getRect());
-    };
-    this.unsubscribe(this.viewport_.onScroll(ticker));
-    this.unsubscribe(this.viewport_.onChanged(ticker));
-    // Tick in the next event loop. That's how native InOb works.
-    setTimeout(ticker);
-    return intersectionObserverPolyfill;
-  }
-
-  /**
-   * @param {!Element} element
-   * @private
-   */
-  polyfillAmpElementIfNeeded_(element) {
-    const {win} = this.ampdoc;
-    if (nativeIntersectionObserverSupported(win)) {
-      return;
-    }
-
-    // InOb polyfill requires partial AmpElement implementation.
-    if (typeof element.getLayoutBox == 'function') {
-      return;
-    }
-    element.getLayoutBox = () => {
-      return this.viewport_.getLayoutRect(element);
-    };
-    element.getOwner = () => null;
+    return this.intersectionObserver_;
   }
 
   /**
@@ -803,10 +795,20 @@ export class VisibilityManagerForDoc extends VisibilityManager {
         Number(intersection.width),
         Number(intersection.height)
       );
+      let {boundingClientRect} = change;
+      boundingClientRect =
+        boundingClientRect &&
+        layoutRectLtwh(
+          Number(boundingClientRect.left),
+          Number(boundingClientRect.top),
+          Number(boundingClientRect.width),
+          Number(boundingClientRect.height)
+        );
       this.onIntersectionChange_(
         change.target,
         change.intersectionRatio,
-        intersection
+        intersection,
+        boundingClientRect
       );
     });
   }
@@ -815,17 +817,38 @@ export class VisibilityManagerForDoc extends VisibilityManager {
    * @param {!Element} target
    * @param {number} intersectionRatio
    * @param {!../../../src/layout-rect.LayoutRectDef} intersectionRect
+   * @param {!../../../src/layout-rect.LayoutRectDef} boundingClientRect
    * @private
    */
-  onIntersectionChange_(target, intersectionRatio, intersectionRect) {
+  onIntersectionChange_(
+    target,
+    intersectionRatio,
+    intersectionRect,
+    boundingClientRect
+  ) {
     intersectionRatio = Math.min(Math.max(intersectionRatio, 0), 1);
     const id = getElementId(target);
     const trackedElement = this.trackedElements_[id];
+
+    // This is different from the InOb v2 isVisible definition.
+    // isVisible here only checks for element size
+    let isVisible = true;
+
+    if (boundingClientRect.width < 1 || boundingClientRect.height < 1) {
+      // Set isVisible to false when the element is not visible.
+      // Use < 1 because the width/height can
+      // be a double value on high resolution screen
+      isVisible = false;
+    }
     if (trackedElement) {
+      trackedElement.isVisible = isVisible;
       trackedElement.intersectionRatio = intersectionRatio;
       trackedElement.intersectionRect = intersectionRect;
+      trackedElement.boundingClientRect = boundingClientRect;
       for (let i = 0; i < trackedElement.listeners.length; i++) {
-        trackedElement.listeners[i](intersectionRatio);
+        trackedElement.listeners[i](
+          trackedElement.isVisible ? intersectionRatio : 0
+        );
       }
     }
   }
diff --git a/extensions/amp-analytics/0.1/visibility-model.js b/extensions/amp-analytics/0.1/visibility-model.js
index 5f64f2f28140e..397be2954e1da 100644
--- a/extensions/amp-analytics/0.1/visibility-model.js
+++ b/extensions/amp-analytics/0.1/visibility-model.js
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
-import {Observable} from '../../../src/observable';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {Observable} from '../../../src/core/data-structures/observable';
 import {devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 
 /**
  * This class implements visibility calculations based on the
@@ -437,6 +437,7 @@ export class VisibilityModel {
         this.minVisiblePercentage_ > 0
           ? Math.min(this.minVisiblePercentage_, visibility)
           : visibility;
+
       this.maxVisiblePercentage_ = Math.max(
         this.maxVisiblePercentage_,
         visibility
diff --git a/extensions/amp-analytics/OWNERS b/extensions/amp-analytics/OWNERS
index 23e4696ec1ce9..e64d6f6ef915c 100644
--- a/extensions/amp-analytics/OWNERS
+++ b/extensions/amp-analytics/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-analytics/amp-analytics.md b/extensions/amp-analytics/amp-analytics.md
index 55a002e3b2a4d..e2d3ffceb330f 100644
--- a/extensions/amp-analytics/amp-analytics.md
+++ b/extensions/amp-analytics/amp-analytics.md
@@ -26,28 +26,84 @@ limitations under the License.
 
 # amp-analytics
 
-## Sending analytics to a vendor or in-house?
+## Usage
 
-Before you start using AMP analytics on your site, you need to decide whether you will use third-party analytics tools to analyze user engagement, or your own in-house solution.
+The `<amp-analytics>` component specifies a JSON configuration object that
+contains the details for what to measure and where to send analytics data. It can report to an in-house or integrated third-party solution.
 
-{% call callout('Read on', type='read') %}
-Learn all about AMP analytics in the [Configure Analytics](https://amp.dev/documentation/guides-and-tutorials/optimize-measure/configure-analytics/) guide.
-{% endcall %}
+<a name="configuration-object"></a>The configuration object for
+`<amp-analytics>` uses the following format:
 
-### Sending data to an analytics vendor <a name="analytics-vendors"></a>
+```javascript
+{
+  "requests": {
+    "request-name": request-value,
+    ...
+  },
+  "vars": {
+    "var-name": var-value,
+    ...
+  },
+  "extraUrlParams": {
+    "extraurlparam-name": extraurlparam-value,
+    ...
+  },
+  "triggers": {
+    "trigger-name": trigger-object,
+    ...
+  },
+  "transport": {
+    "beacon": *boolean*,
+    "xhrpost": *boolean*,
+    "image": *boolean*,
+  }
+}
+```
 
-AMP analytics is specifically designed to measure once and report to many. If you are already working with one or more analytics vendors, check the list of [Analytics Vendors](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/#vendors) to see if they’ve integrated their solution with AMP.
+The configuration data may be specified inline or fetched remotely by specifying
+a URL in the `config` attribute. Additionally, built-in configuration for
+popular analytics vendors can be selected by using the `type` attribute.
 
-For integrated AMP analytics vendors:
+If configuration data from more than one of these sources is used, the
+configuration objects (`vars`, `requests`, and `triggers`) will be merged
+together such that:
 
-1.  In the `<amp-analytics>` tag, add the `type`attribute and set its value to the specified [vendor](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/#vendors).
-2.  Determine what data you want to capture and track, and specify those details in the configuration data. See the vendor's documentation for instructions on how to capture analytics data.
+1. Remote configuration takes precedence over inline configuration and
+1. Inline configuration takes precedence over vendor configuration.
 
-If the analytics vendor hasn’t integrated with AMP, reach out to the vendor to ask for their support. We also encourage you to let us know by [filing an issue](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#report-a-bug) requesting that the vendor be added. See also [Integrating your analytics tools in AMP HTML](../amp-analytics/integrating-analytics.md). Alternatively, work with your vendor to send the data to their specified URL. Learn more in the [Sending data in-house](#sending-data-in-house) section below.
+Before you start using AMP analytics on your site, you need to decide whether
+you will use third-party analytics tools to analyze user engagement, or your own
+in-house solution.
 
-_Example: Sending data to a third-party analytics provider_
+[tip type="read-on"]
+Learn all about AMP analytics in the
+[Configure Analytics](https://amp.dev/documentation/guides-and-tutorials/optimize-measure/configure-analytics/)
+guide.
+[/tip]
 
-In the following example, analytics data is sent to Nielsen, a third-party analytics provider that has integrated with AMP. Details for configuring analytics data for Nielsen can be found in the [Nielsen](https://engineeringportal.nielsen.com/docs/DCR_Static_Google_AMP_Cloud_API) documentation.
+### Send data to an analytics vendor
+
+The `amp-analytics` component is specifically designed to measure once and report to many. If
+you are already working with one or more analytics vendors, check the list of
+[Analytics Vendors](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/#vendors)
+to see if they’ve integrated their solution with AMP.
+
+#### Integrated analytics vendors
+
+For integrated AMP analytics vendors:
+
+1.  In the `<amp-analytics>` tag, add the `type` attribute and set its value to
+    the specified
+    [vendor](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/#vendors).
+1.  Determine what data you want to capture and track, and specify those details
+    in the configuration data. See the vendor's documentation for instructions
+    on how to capture analytics data.
+
+In the following example, analytics data is sent to Nielsen, a third-party
+analytics provider that has integrated with AMP. Details for configuring
+analytics data for Nielsen can be found in the
+[Nielsen](https://engineeringportal.nielsen.com/docs/DCR_Static_Google_AMP_Cloud_API)
+documentation.
 
 ```html
 <amp-analytics type="nielsen">
@@ -67,26 +123,47 @@ In the following example, analytics data is sent to Nielsen, a third-party analy
 </amp-analytics>
 ```
 
-### Sending data in-house
+#### Non-integrated analytics vendors
 
-If you have your own in-house solution for measuring user engagement, the only thing you will need to integrate AMP analytics with that solution is a URL. This is where you will send the data. You can also send data to various URLs. For example, you can send page view data to one URL, and social engagement data to another URL.
+If the analytics vendor hasn’t integrated with AMP, reach out to the vendor to
+ask for their support. We also encourage you to let us know by
+[filing an issue](../../docs/contributing.md#report-a-bug)
+requesting that the vendor be added. See also
+[Integrating your analytics tools in AMP HTML](integrating-analytics.md).
+Alternatively, work with your vendor to send the data to their specified URL.
+Learn more in the [Send data in-house](#send-data-in-house) section below.
 
-{% call callout('Note', type='note') %}
-If your in-house solution involves working with an analytics vendor that hasn't integrated with AMP, work with the vendor to determine what configuration information is required.
-{% endcall %}
+### Send data in-house <a name="send-data-in-house"></a>
 
-To send data to a specific URL:
+If you have your own in-house solution for measuring user engagement, the only
+thing you will need to integrate AMP analytics with that solution is a URL. This
+is where you will send the data. You can also send data to various URLs. For
+example, you can send page view data to one URL, and social engagement data to
+another URL.
+
+[tip type="note"]
+If your in-house solution involves working with an analytics vendor that hasn't
+integrated with AMP, work with the vendor to determine what configuration
+information is required.
+[/tip]
 
-1.  Determine what data you want to capture and track, and [specify those details in the configuration data](#specifying-configuration-data).
-2.  In the [`requests`](#requests) configuration object, specify the type of request to track (e.g., pageview, specific triggered events) and the url(s) of where you want to send the tracking data to.
+To send data to a specific URL:
 
-{% call callout('Note', type='note') %}
-When processing AMP URLs in the referrer header of analytics requests, strip out or ignore the `usqp` parameter. This parameter is used by Google to trigger experiments for the Google AMP Cache.
-{% endcall %}
+1.  Determine what data you want to capture and track, and
+    [specify those details in the configuration data](#configuration-object).
+1.  In the [`requests`](#requests) configuration object, specify the type of
+    request to track (e.g., pageview, specific triggered events) and the url(s)
+    of where you want to send the tracking data to.
 
-_Example: Sending data to a URL_
+[tip type="note"]
+When processing AMP URLs in the referrer header of analytics requests, strip out
+or ignore the `usqp` parameter. This parameter is used by Google to trigger
+experiments for the Google AMP Cache.
+[/tip]
 
-Here's a simple example that tracks page views. Every time a page is visible, the trigger event fires, and sends the pageview data to a defined URL along with a random ID.
+The example below tracks page views. Every time a page is visible,
+the trigger event fires, and sends the pageview data to a defined URL along with
+a random ID.
 
 ```html
 <amp-analytics>
@@ -106,57 +183,24 @@ Here's a simple example that tracks page views. Every time a page is visible, th
 </amp-analytics>
 ```
 
-{% call callout('Tip', type='success') %}
-For some common tracking use cases (e.g., page views, page clicks, scrolling, etc.) see [Analytics: Use Cases](https://amp.dev/documentation/guides-and-tutorials/optimize-measure/configure-analytics/use_cases).
-{% endcall %}
-
-## Specifying configuration data
-
-In the `<amp-analytics>` element, you specify a JSON configuration object that contains the details for what to measure and where to send the analytics data.
-
-The configuration object for `<amp-analytics>` uses the following format:
-
-```javascript
-{
-  "requests": {
-    "request-name": request-value,
-    ...
-  },
-  "vars": {
-    "var-name": var-value,
-    ...
-  },
-  "extraUrlParams": {
-    "extraurlparam-name": extraurlparam-value,
-    ...
-  },
-  "triggers": {
-    "trigger-name": trigger-object,
-    ...
-  },
-  "transport": {
-    "beacon": *boolean*,
-    "xhrpost": *boolean*,
-    "image": *boolean*,
-  }
-}
-```
-
-### Inline or remote configuration
-
-The configuration data may be specified inline or fetched remotely by specifying a URL in the `config` attribute. Additionally, built-in configuration for popular analytics vendors can be selected by using the `type` attribute.
-
-If configuration data from more than one of these sources is used, the configuration objects (vars, requests and triggers) will
-be merged together such that:
-
-1.  Remote configuration takes precedence over inline configuration and
-2.  Inline configuration takes precedence over vendor configuration.
+[tip type="note"]
+For some common tracking use cases (e.g., page views, page clicks, scrolling,
+etc.) see
+[Analytics: Use Cases](https://amp.dev/documentation/guides-and-tutorials/optimize-measure/configure-analytics/use_cases).
+[/tip]
 
-#### Loading remote configuration
+### Load remote configuration
 
-To load a remote configuration, in the `<amp-analytics>` element, specify the `config` attribute and the URL for the configuration data. The URL specified should use the HTTPS scheme. The URL may include [AMP URL vars](../../spec/amp-var-substitutions.md). To access cookies, see the [`data-credentials`](#data-credentials) attribute. The response must follow the [AMP CORS security guidelines](../../spec/amp-cors-requests.md).
+To load a remote configuration, in the `<amp-analytics>` element, specify the
+`config` attribute and the URL for the configuration data. The URL specified
+should use the HTTPS scheme. The URL may include
+[AMP URL vars](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md).
+To access cookies, see the [`data-credentials`](#data-credentials) attribute.
+The response must follow the
+[AMP CORS security guidelines](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-cors-requests.md).
 
-In this example, we specify the `config` attribute to load the configuration data from the specified URL.
+In this example, we specify the `config` attribute to load the configuration
+data from the specified URL.
 
 ```html
 <amp-analytics
@@ -164,9 +208,13 @@ In this example, we specify the `config` attribute to load the configuration dat
 ></amp-analytics>
 ```
 
-#### Configuration Rewriter
+### Dynamically rewrite a configuration
 
-The configuration rewriter feature is designed to allow analytics providers to dynamically rewrite a provided configuration. This is similar to the remote configuration feature but additionally includes any user-provided configuration in the request made to the sever. This currently can only be enabled by an analytics vendor.
+The configuration rewriter feature is designed to allow analytics providers to
+dynamically rewrite a provided configuration. This is similar to the remote
+configuration feature but additionally includes any user-provided configuration
+in the request made to the sever. This currently can only be enabled by an
+analytics vendor.
 
 An analytics vendor specifies a configRewriter property with a server url.
 
@@ -180,19 +228,31 @@ export const VENDOR_ANALYTICS_CONFIG = {
 }
 ```
 
-The runtime sends a request containing the inlined configuration, merged with the provided remote configuration, to the configRewriter endpoint given by the vendor. The vendor uses this data server side to construction and return a new rewritten configuration.
+AMP sends a request containing the inlined configuration, merged with
+the provided remote configuration, to the `configRewriter` endpoint given by the
+vendor. The vendor uses this data server side to construction and return a new
+rewritten configuration.
 
-The runtime then merges all the provided configuration to determine the final configuration in order of highest to lowest precedence:
+AMP then merges all the provided configurations to determine the final
+configuration in order of highest to lowest precedence:
 
 1. Rewritten Configuration
 1. Inlined Configuration
 1. Vendor defined configuration
 
-##### Variable Groups
+### Enable Predfined Variable Groups
 
-Variable Groups is a feature that allows analytics providers to group a predefined set of variables that can easily be enabled by a user. These variables will then be resolved and sent along to the specified `configRewriter` endpoint.
+Variable Groups is a feature that allows analytics providers to group a
+predefined set of variables that can easily be enabled. These
+variables will then be resolved and sent along to the specified `configRewriter`
+endpoint.
 
-Analytics providers need to create a new `varGroups` object inside of the `configRewriter` configuration to enable this feature. Publishers can then include any named analytic provider created `varGroups` they wish to enable in their analytics configuration. All of the variables supported by [AMP HTML Substitutions Guide](../../spec/amp-var-substitutions.md) can be used. _Important note_: the \${varName} variants will not work.
+Analytics providers need to create a new `varGroups` object inside of the
+`configRewriter` configuration to enable this feature. Publishers can then
+include any named analytic provider created `varGroups` they wish to enable in
+their analytics configuration. All of the variables supported by
+[AMP HTML Substitutions Guide](../../docs/spec/amp-var-substitutions.md)
+can be used. _Important note:_ the `${varName}` variants will not work.
 
 For example we may have a vendor whose configuration looks like this:
 
@@ -215,9 +275,16 @@ export const VENDOR_ANALYTICS_CONFIG = {
 }
 ```
 
-You can specify which variable groups are enabled by including `{enabled: true}` for the specified `varGroups` within the provider's `<amp-analytics>` configuration. `enabled` is a reserved keyword, and can not be used as a variable name.
+You can specify which variable groups are enabled by including `{enabled: true}`
+for the specified `varGroups` within the provider's `<amp-analytics>`
+configuration. `enabled` is a reserved keyword, and can not be used as a
+variable name.
 
-In the example below, both `group1` and `group2` have been enabled. Any groups that have not been specifically enabled will be ignored. The runtime will then resolve all of these enabled variables, and merge them into a single `configRewriter.vars` object that will be sent to the configuration rewriter url.
+In the example below, both `group1` and `group2` have been enabled. Any groups
+that have not been specifically enabled will be ignored. The runtime will then
+resolve all of these enabled variables, and merge them into a single
+`configRewriter.vars` object that will be sent to the configuration rewriter
+url.
 
 ```html
 /* Included on publisher page */
@@ -254,17 +321,24 @@ In this example the request body would look something like this:
 
 ### Configuration data objects
 
-#### Requests
+#### Requests <a name="requests"></a>
 
-The `requests` configuration object specifies the URLs used to transmit data to an analytics platform as well as batching or reporting behavior of the request. The `request-name` specifies what request should be sent in response to a particular event (e.g., `pageview`, `event`, etc.) . The `request-value` contains an https URL, the value may include placeholder tokens that can reference other requests or variables. The `request-value` can also be an object that contains optional request configs.
-
-##### Request configs
+The `requests` configuration object specifies the URLs used to transmit data to
+an analytics platform as well as batching or reporting behavior of the request.
+The `request-name` specifies what request should be sent in response to a
+particular event (e.g., `pageview`, `event`, etc.) . The `request-value`
+contains an https URL, the value may include placeholder tokens that can
+reference other requests or variables. The `request-value` can also be an object
+that contains optional request configs.
 
 The properties for defining a request with an object are:
 
-- `baseUrl`: Defines the url of the request (required).
-- `reportWindow`: An optional property to specify the time (in seconds) to stop reporting requests. The trigger with `important: true` overrides the maximum report window constraint.
-- [`origin`](#request-origin): An optional property to specify the origin for requests
+-   `baseUrl`: Defines the url of the request (required).
+-   `reportWindow`: An optional property to specify the time (in seconds) to
+    stop reporting requests. The trigger with `important: true` overrides the
+    maximum report window constraint.
+-   [`origin`](#request-origin): An optional property to specify the origin for
+    requests
 
 In this example, all requests are valid.
 
@@ -282,11 +356,18 @@ In this example, all requests are valid.
 }
 ```
 
-Some analytics providers have an already-provided configuration, which you use via the `type` attribute. If you are using an analytics provider, you may not need to include requests information. See your vendor documentation to find out if requests need to be configured, and how.
+Some analytics providers have an already-provided configuration, which you use
+via the `type` attribute. If you are using an analytics provider, you may not
+need to include requests information. See your vendor documentation to find out
+if requests need to be configured, and how.
 
-##### Request Origin
+##### Define a request origin <a name="request-origin"></a>
 
-The top-level `requestOrigin` property accepts an absolute URL and defines the origin for requests. If `requestOrigin` is declared, the origin will be extracted from the value and it will be prepended to `baseUrl`. `requestOrigin` accepts and supports variables substitution. Variables will **not** be encoded in `requestOrigin`.
+The top-level `requestOrigin` property accepts an absolute URL and defines the
+origin for requests. If `requestOrigin` is declared, the origin will be
+extracted from the value and it will be prepended to `baseUrl`. `requestOrigin`
+accepts and supports variables substitution. Variables will not be encoded in
+`requestOrigin`.
 
 ```json
 "requestOrigin": "${example}/ignore_query",
@@ -304,9 +385,14 @@ The top-level `requestOrigin` property accepts an absolute URL and defines the o
 }
 ```
 
-In this example, outgoing requests will be `https://example.com/analytics?a=${account}&type=pageview` for `pageview` requests and `https://example.com/analytics?a=${account}&type=event` for `event` requests. Notice that the `requestOrigin` value is not encoded and that only the origin is added to `baseUrl`.
+In this example, outgoing requests will be
+`https://example.com/analytics?a=${account}&type=pageview` for `pageview`
+requests and `https://example.com/analytics?a=${account}&type=event` for `event`
+requests. Notice that the `requestOrigin` value is not encoded and that only the
+origin is added to `baseUrl`.
 
-Request objects can also have an `origin` property that will override this top-level `requestOrigin` property.
+Request objects can also have an `origin` property that will override this
+top-level `requestOrigin` property.
 
 ```json
 "requestOrigin": "https://example.com",
@@ -318,17 +404,21 @@ Request objects can also have an `origin` property that will override this top-l
 }
 ```
 
-In this example, the outgoing request will be `https://newexample.com/analytics?type=pageview` for the `pageview` request.
-
-##### Batching configs
+In this example, the outgoing request will be
+`https://newexample.com/analytics?type=pageview` for the `pageview` request.
 
-To reduce the number of request pings, you can specify batching behaviors in the request configuration. Any [`extraUrlParams`](#extra-url-params) from `triggers` that use the same request are appended to the `baseUrl` of the request.
+##### Schedule batch requests
 
-The batching properties are:
+To reduce the number of request pings, you can specify batching behaviors in the
+request configuration. Any [`extraUrlParams`](#extra-url-parameters) from
+`triggers` that use the same request are appended to the `baseUrl` of the
+request.
 
-- `batchInterval`: This property specifies the time interval (in seconds) to flush request pings in the batching queue. `batchInterval` can be a number or an array of numbers (the minimum time interval is 200ms). The request will respect every value in the array, and then repeat the last interval value (or the single value) when it reaches the end of the array.
+The batching property is `batchInterval`. This property specifies the time interval (in seconds) to flush request pings in the batching queue. `batchInterval` can be a number or an array of numbers (the minimum time interval 200ms). The request will respect every value in the array, and then repe the last interval value (or the single value) when it reaches the end the array.
 
-For example, the following config sends out a single request ping every 2 seconds, with one sample request ping looking like `https://example.com/analytics?rc=1&rc=2`.
+For example, the following config sends out a single request ping every 2
+seconds, with one sample request ping looking like
+`https://example.com/analytics?rc=1&rc=2`.
 
 ```json
 "requests": {
@@ -351,7 +441,10 @@ For example, the following config sends out a single request ping every 2 second
 }
 ```
 
-The following config sends out the first request ping after 1 second and then sends out a request every 3 seconds. The first request ping looks like `https://example.com/analytics?rc=1`, the second request ping looks like `https://example.com/analytics?rc=2&rc=3&rc=4`.
+The following config sends out the first request ping after 1 second and then
+sends out a request every 3 seconds. The first request ping looks like
+`https://example.com/analytics?rc=1`, the second request ping looks like
+`https://example.com/analytics?rc=2&rc=3&rc=4`.
 
 ```json
 "requests": {
@@ -376,9 +469,26 @@ The following config sends out the first request ping after 1 second and then se
 
 #### Vars
 
-The `amp-analytics` component defines many basic variables that can be used in requests. A list of all such variables is available in the [`amp-analytics` Variables Guide](./analytics-vars.md). In addition, all of the variables supported by [AMP HTML Substitutions Guide](../../spec/amp-var-substitutions.md) are also supported.
-
-The `vars` configuration object can be used to define new key-value pairs or override existing variables that can be referenced in `request` values. New variables are commonly used to specify publisher specific information. Arrays can be used to specify a list of values that should be URL encoded separately while preserving the comma delimiter. Substituting built-in and custom variables within arrays is supported, except when the variable expands into another array.
+The `amp-analytics` component defines many basic variables that can be used in
+requests. A list of all such variables is available in the
+[`amp-analytics` Variables Guide](analytics-vars.md).
+In addition, all of the variables supported by
+[AMP HTML Substitutions Guide](../../docs/spec/amp-var-substitutions.md)
+are also supported.
+
+Variables are resolved asynchronously and can delay the request until they are
+fulfilled. For example, some metrics such as Cumulative Layout Shift and
+Largest Contentful Paint are calculated after the page is hidden. For First
+Input Delay, it is resolved after the user interacts with the page. For this
+reason these metrics might not be suitable for use with all triggers (for
+example, on timer or visible).
+
+The `vars` configuration object can be used to define new key-value pairs or
+override existing variables that can be referenced in `request` values. New
+variables are commonly used to specify publisher specific information. Arrays
+can be used to specify a list of values that should be URL encoded separately
+while preserving the comma delimiter. Substituting built-in and custom variables
+within arrays is supported, except when the variable expands into another array.
 
 ```json
 "vars": {
@@ -388,45 +498,20 @@ The `vars` configuration object can be used to define new key-value pairs or ove
 }
 ```
 
-#### Extra URL Params
-
-The `extraUrlParams` configuration object specifies additional parameters to be included in the request. By default, extra URL params are appended to the query string of a request URL via the usual "&foo=baz" convention.
-
-Here's an example that would append `&a=1&b=2&c=3` to a request:
-
-```json
-"extraUrlParams": {
-  "a": "1",
-  "b": "2",
-  "c": "3"
-}
-```
-
-`extraUrlParams` may be sent via the request body instead of the URL if `useBody` is enabled and the request is sent via the `beacon` or `xhrpost` transport methods. In this case, the parameters are not URL encoded or flattened. See [Use Body for Extra URL Params](#use-body-for-extra-url-params) for more details.
-
-The `extraUrlParamsReplaceMap` attribute specifies a map of keys and values that act as parameters to `String.replace()` to pre-process keys in the `extraUrlParams` configuration. For example, if an `extraUrlParams` configuration defines `"page.title": "The title of my page"` and the `extraUrlParamsReplaceMap` defines `"page.": "_p_"`, then `&_p_title=The%20title%20of%20my%20page%20` will be appended to the request.
-
-`extraUrlParamsReplaceMap` is not required to use `extraUrlParams`. If `extraUrlParamsReplaceMap` is not defined, then no string substitution will happens and the strings defined in `extraUrlParams` are used as-is.
+#### Register event triggers <a name="triggers"></a>
 
-If `useBody` is enabled and the request is sent via the `beacon` or `xhrpost` transport methods, `extraUrlParamsReplaceMap` string substitution will only be performed on the top-level keys in `extraUrlParams`.
+The `triggers` configuration object describes when an analytics request should
+be sent. The `triggers` attribute contains a key-value pair of trigger-name and
+trigger-configuration. A trigger-name can be any string comprised of
+alphanumeric characters (a-zA-Z0-9). Triggers from a configuration with lower
+precedence are overridden by triggers with the same names from a configuration
+with higher precedence.
 
-#### Triggers
+For details on how to set up triggers, see
+[Available triggers](#available-triggers).
 
-The `triggers` configuration object describes when an analytics request should be sent. The `triggers` attribute contains a key-value pair of trigger-name and trigger-configuration. A trigger-name can be any string comprised of alphanumeric characters (a-zA-Z0-9). Triggers from a configuration with lower precedence are overridden by triggers with the same names from a configuration with higher precedence.
-
-- `on` (required) The event to listen for. Valid values are `render-start`, `ini-load`, `click`, `scroll`, `timer`, `visible`, `hidden`, `user-error`, [`access-*`](../amp-access/amp-access-analytics.md), and [`video-*`](./amp-video-analytics.md)
-- `request` (required) Name of the request to send (as specified in the `requests` section).
-- `vars` An object containing key-value pairs used to override `vars` defined in the top level config, or to specify vars unique to this trigger.
-- `important` can be specified to work with requests that support the batching behavior or the report window. Setting `important` to `true` can help to flush batched request queue with some certain triggers. In this case, it's possible to reduce the request pings number without losing important trigger events. Setting `important` to `true` can also override the request's `reportWindow` value to send out important request pings regardless.
-- `selector` and `selectionMethod` can be specified for some triggers, such as `click` and `visible`. See [Element selector](#element-selector) for details.
-- `scrollSpec` (required when `on` is set to `scroll`) This configuration is used in conjunction with the `scroll` trigger. Please see below for details.
-- `timerSpec` (required when `on` is set to `timer`) This configuration is used in conjunction with the `timer` trigger. Please see below for details.
-- `sampleSpec` This object is used to define how the requests can be sampled before they are sent. This setting allows sampling based on random input or other platform supported vars. The object contains configuration to specify an input that is used to generate a hash and a threshold that the hash must meet.
-  - `sampleOn` This string template is expanded by filling in the platform variables and then hashed to generate a number for the purposes of the sampling logic described under threshold below.
-  - `threshold` This configuration is used to filter out requests that do not meet particular criteria: For a request to go through to the analytics vendor, the following logic should be true `HASH(sampleOn) < threshold`.
-- `videoSpec` (used when `on` is set to `video-*`) This configuration is used in conjunction with the [`video-*`](./amp-video-analytics.md) triggers.
-
-As an example, the following configuration can be used to sample 50% of the requests based on random input or at 1% based on client id.
+As an example, the following configuration can be used to sample 50% of the
+requests based on random input or at 1% based on client id.
 
 ```json
 "triggers": {
@@ -449,23 +534,51 @@ As an example, the following configuration can be used to sample 50% of the requ
 }
 ```
 
-##### Element selector
+###### Element selector <a name="element-selector"></a>
 
-Some triggers such as `click` and `visible` allow specifying an single element or a collection of elements using the selector properties. Different triggers can apply different limitations and interpretations on selected elements, such as whether a selector applies to all matched elements or the first one, or which elements can be matched: all or only AMP elements. See the documentation for each relevant trigger for more details.
+Some triggers such as `click` and `visible` allow specifying a single element or
+a collection of elements using the selector properties. Different triggers can
+apply different limitations and interpretations on selected elements, such as
+whether a selector applies to all matched elements or the first one, or which
+elements can be matched: all or only AMP elements. See the documentation for
+each relevant trigger for more details.
 
 The selector properties are:
 
-- `selector` This property is used to find an element or a collection of elements using CSS/DOM query. The semantics of how the element is matched can be changed using `selectionMethod`. The value of this property can be one of:
-  - a valid CSS selector, e.g. `#ad1` or `amp-ad`.
-  - `:root` - a special selector that matches the document root.
-- `selectionMethod` When specified, this property can have one of two values: `scope` or `closest`. `scope` allows selection of element within the parent element of `amp-analytics` tag. `closest` searches for the closest ancestor of the `amp-analytics` tag that satisfies the given selector. The default value is `scope`.
+-   `selector` This property is used to find an element or a collection of
+    elements using CSS/DOM query. The semantics of how the element is matched
+    can be changed using `selectionMethod`. The value of this property can be
+    one of:
+
+    -   a valid CSS selector, e.g. `#ad1` or `amp-ad`.
+    -   `:root` - a special selector that matches the document root.
+
+-   `selectionMethod` When specified, this property can have one of two values:
+    `scope` or `closest`. `scope` allows selection of element within the parent
+    element of `amp-analytics` tag. `closest` searches for the closest ancestor
+    of the `amp-analytics` tag that satisfies the given selector. The default
+    value is `scope`.
+
+##### Available triggers <a name="available-triggers"></a>
 
-##### Embed render start trigger
+The `on` trigger provides an event to listen for. Valid values are
+`render-start`, `ini-load`, `click`, `scroll`, `timer`, `visible`, `hidden`,
+`user-error`, `access-*`, and
+`video-*`.
 
-AMP elements that embed other documents in iframes (e.g., ads) may report a render start event (`"on": "render-start"`). This event
-is typically emitted as soon as it's possible to confirm that rendering of the embedded document has started. Consult the documentation of a particular AMP element to see whether it emits this event.
+Other available triggers include `request`, `vars`, `important`, `selector`,
+`selectionMethod`, `scrollSpec`, `timerSpec`, `sampleSpec`, and `videoSpec`.
 
-The trigger for the embed element must include a [`selector`](#element-selector) that points to the embedding element:
+###### `"on": "render-start"` trigger
+
+AMP elements that embed other documents in iframes (e.g., ads) may report a
+render start event (`"on": "render-start"`). This event is typically emitted as
+soon as it's possible to confirm that rendering of the embedded document has
+started. Consult the documentation of a particular AMP element to see whether it
+emits this event.
+
+The trigger for the embed element must include a [`selector`](#element-selector)
+that points to the embedding element:
 
 ```json
 "triggers": {
@@ -477,7 +590,8 @@ The trigger for the embed element must include a [`selector`](#element-selector)
 }
 ```
 
-The render start event is also emitted by the document itself and can be configured as:
+The render start event is also emitted by the document itself and can be
+configured as:
 
 ```json
 "triggers": {
@@ -488,18 +602,22 @@ The render start event is also emitted by the document itself and can be configu
 }
 ```
 
-##### Initial load trigger
+###### `"on": "ini-load"` trigger <a name="ini-load"></a>
 
-The initial load event (`"on": "ini-load"`) is triggered when the initial contents of an AMP element or an AMP document have been loaded.
+The initial load event (`"on": "ini-load"`) is triggered when the initial
+contents of an AMP element or an AMP document have been loaded.
 
-The "initial load" is defined in relationship to the container and its initial size.
-More specifically:
+The "initial load" is defined in relationship to the container and its initial
+size. More specifically:
 
-- For a document: all elements in the first viewport.
-- For an embed element: all content elements in the embed document that are positioned within the initial size of the embed element.
-- For a simple AMP element (e.g. `amp-img`): the resources itself, such as an image or a video.
+-   For a document: all elements in the first viewport.
+-   For an embed element: all content elements in the embed document that are
+    positioned within the initial size of the embed element.
+-   For a simple AMP element (e.g. `amp-img`): the resources itself, such as an
+    image or a video.
 
-The trigger for an embed or an AMP element must include a [`selector`](#element-selector) that points to the element:
+The trigger for an embed or an AMP element must include a
+[`selector`](#element-selector) that points to the element:
 
 ```json
 "triggers": {
@@ -511,7 +629,8 @@ The trigger for an embed or an AMP element must include a [`selector`](#element-
 }
 ```
 
-The initial load event is also emitted by the document itself and can be configured as:
+The initial load event is also emitted by the document itself and can be
+configured as:
 
 ```json
 "triggers": {
@@ -522,135 +641,12 @@ The initial load event is also emitted by the document itself and can be configu
 }
 ```
 
-##### Page and element visibility trigger
-
-Use the page visibility trigger (`"on": "visible"`) to fire a request when the page becomes visible. The firing of this trigger can be configured using `visibilitySpec`.
-
-```json
-"triggers": {
-  "defaultPageview": {
-    "on": "visible",
-    "request": "pageview"
-  }
-}
-```
-
-The element visibility trigger can be configured for any AMP element or a document root using [`selector`](#element-selector). The trigger will fire when the specified element matches the visibility parameters that can be customized using the `visibilitySpec`.
-
-```json
-"triggers": {
-  "defaultPageview": {
-    "on": "visible",
-    "request": "elementview",
-    "selector": "#ad1",
-    "visibilitySpec": {/* optional visibility spec */}
-  }
-}
-```
-
-Notice that selector can be used to only specify a single element, not a collection. The element can be either an [AMP extended element](https://github.com/ampproject/amphtml/blob/master/spec/amp-tag-addendum.md#amp-specific-tags) or a document root.
-
-The element visibility trigger waits for the signal specified by the `waitFor` property in `visibilitySpec` before tracking element visibility. If `waitFor` is not specified, it waits for element's [`ini-load`](#initial-load-trigger) signal. See `waitFor` docs for more details.
-If `reportWhen` is specified, the trigger waits for that signal before sending the event. This is useful, for example, in sending analytics events when the page is closed.
-
-##### Error trigger
-
-The user error event (`"on": "user-error"`) is triggered when an error occurs that is attributable to the author of the page or to software that is used in publishing the page. This includes, but not limited to, misconfiguration of an AMP component, misconfigured ads, or failed assertions. User errors are also reported in the developer console.
-
-```json
-"triggers": {
-  "userError": {
-    "on": "user-error",
-    "request": "error"
-  }
-}
-```
-
-NOTE: There is a [known issue](https://github.com/ampproject/amphtml/issues/10891) that it still reports errors from A4A iframe embeds, which are irrelevant to the page.
-
-<strong><a id="visibility-spec"></a>Visibility Spec</strong>
-
-The `visibilitySpec` is a set of conditions and properties that can be applied to `visible` or `hidden` triggers to change when they fire. If multiple properties are specified, they must all be true in order for a request to fire. Configuration properties supported in `visibilitySpec` are:
-
-- `waitFor`: This property indicates that the visibility trigger should wait for a certain signal before tracking visibility. The supported values are `none`, `ini-load` and `render-start`. If `waitFor` is undefined, it is defaulted to [`ini-load`](#initial-load-trigger) when selector is specified, or to `none` otherwise.
-- `reportWhen`: This property indicates that the visibility trigger should wait for a certain signal before sending the trigger. The only supported value is `documentExit`. `reportWhen` and `repeat` may not both be used in the same visibilitySpec. Note that when `reportWhen` is specified, the report will be sent at the time of the signal even if visibility requirements are not met at that time or have not been met previously. Any relevant variables (`totalVisibleTime`, etc.) will be populated according to the visibility requirements in this `visibilitySpec`.
-- `continuousTimeMin` and `continuousTimeMax`: These properties indicate that a request should be fired when (any part of) an element has been within the viewport for a continuous amount of time that is between the minimum and maximum specified times. The times are expressed in milliseconds. The `continuousTimeMin` is defaulted to 0 when not specified.
-- `totalTimeMin` and `totalTimeMax`: These properties indicate that a request should be fired when (any part of) an element has been within the viewport for a total amount of time that is between the minimum and maximum specified times. The times are expressed in milliseconds. The `totalTimeMin` is defaulted to 0 when not specified.
-- `visiblePercentageMin` and `visiblePercentageMax`: These properties indicate that a request should be fired when the proportion of an element that is visible within the viewport is between the minimum and maximum specified percentages. Percentage values between 0 and 100 are valid. Note that the upper bound (`visiblePercentageMax`) is inclusive. The lower bound (`visiblePercentageMin`) is exclusive, unless both bounds are set to 0 or both are set to 100. If both bounds are set to 0, then the trigger fires when the element is not visible. If both bounds are set to 100, the trigger fires when the element is fully visible. When these properties are defined along with other timing related properties, only the time when these properties are met are counted. The default values for `visiblePercentageMin` and `visiblePercentageMax` are 0 and 100, respectively.
-- `repeat`: If this property is set to `true`, the trigger fires each time that the `visibilitySpec` conditions are met. In the following example, if the element is scrolled to 51% in view, then 49%, then 51% again, the trigger fires twice. However, if `repeat` was `false`, the trigger fires once. The default value of `repeat` is `false`. `reportWhen` and `repeat` may not both be used in the same visibilitySpec.
-
-```json
-"visibilitySpec": {
-  "visiblePercentageMin": 50,
-  "repeat": true
-}
-```
-
-`visiblePercentageThresholds` may be used as a shorthand for creating multiple `visibilitySpec` instances that differ only in `visiblePercentageMin` and `visiblePercentageMax`. For example the following are equivalent:
+###### `"on": "click"` trigger
 
-```json
-// Two triggers with visibilitySpecs that only differ in visiblePercentageMin and visiblePercentageMax:
-"triggers": {
-  "pageView_30_to_40": {
-    "on": "visible",
-    "request": "pageview",
-    "selector": "#ad1",
-    "visibilitySpec": {
-      "visiblePercentageMin": 30,
-      "visiblePercentageMax": 40,
-      "continuousTimeMin": 1000
-    }
-  },
-  "pageView_40_to_50": {
-    "on": "visible",
-    "request": "pageview",
-    "selector": "#ad1",
-    "visibilitySpec": {
-      "visiblePercentageMin": 40,
-      "visiblePercentageMax": 50,
-      "continuousTimeMin": 1000
-    }
-  }
-}
-
-// A single trigger equivalent to both of the above:
-"triggers": {
-  "pageView": {
-    "on": "visible",
-    "request": "pageview",
-    "selector": "#ad1",
-    "visibilitySpec": {
-      "visiblePercentageThresholds": [[30, 40], [40, 50]],
-      "continuousTimeMin": 1000
-    }
-  }
-}
-```
-
-In addition to the conditions above, `visibilitySpec` also enables certain variables which are documented [here](./analytics-vars.md#visibility-variables).
-
-```json
-"triggers": {
-  "defaultPageview": {
-    "on": "visible",
-    "request": "pageview",
-    "selector": "#ad1",
-    "visibilitySpec": {
-      "waitFor": "ini-load",
-      "reportWhen": "documentExit",
-      "visiblePercentageMin": 20,
-      "totalTimeMin": 500,
-      "continuousTimeMin": 200
-    }
-  }
-}
-```
-
-In addition to the variables provided as part of triggers you can also specify additional / overrides for [variables as data attribute](./analytics-vars.md#variables-as-data-attribute). If used, these data attributes have to be part of element specified as the [`selector`](#element-selector).
-
-##### Click trigger
-
-Use the click trigger (`"on": "click"`) to fire a request when a specified element is clicked. Use [`selector`](#element-selector) to control which elements will cause this request to fire. The trigger will fire for all elements matched by the specified selector.
+Use the click trigger (`"on": "click"`) to fire a request when a specified
+element is clicked. Use [`selector`](#element-selector) to control which
+elements will cause this request to fire. The trigger will fire for all elements
+matched by the specified selector.
 
 ```json
 "vars": {
@@ -669,34 +665,48 @@ Use the click trigger (`"on": "click"`) to fire a request when a specified eleme
 }
 ```
 
-In addition to the variables provided as part of triggers you can also specify additional / overrides for [variables as data attribute](./analytics-vars.md#variables-as-data-attribute). If used, these data attributes have to be part of element specified as the `selector`
+In addition to the variables provided as part of triggers you can also specify
+additional / overrides for
+[variables as data attribute](analytics-vars.md#variables-as-data-attribute).
+If used, these data attributes have to be part of element specified as the
+`selector`.
 
-##### Scroll trigger
+###### `"on": "scroll"` trigger <a name="scroll"></a>
 
-Use the scroll trigger (`"on": "scroll"`) to fire a request under certain conditions when the page is scrolled. This trigger provides [special vars](./analytics-vars.md#interaction) that indicate the boundaries that triggered a request to be sent. Use `scrollSpec` to control when this will fire:
+Use the scroll trigger (`"on": "scroll"`) to fire a request under certain
+conditions when the page is scrolled. This trigger provides
+[special vars](analytics-vars.md#interaction)
+that indicate the boundaries that triggered a request to be sent. Use
+`scrollSpec` to control when this will fire.
 
-- `scrollSpec` is an object that contains the properties:
+`scrollSpec` is an object that contains the properties:
 
-  - `horizontalBoundaries`, `verticalBoundaries`
-    (At least one of these is required for a scroll event to fire.)
+-   `horizontalBoundaries`, `verticalBoundaries` (At least one of these is
+    required for a scroll event to fire.)
 
-    These should be number arrays containing the percentage
-    boundaries on which a scroll event is fired.
+    These should be number arrays containing the percentage boundaries on which a scroll event is fired.
 
-    (To keep the page performant, these percentages are rounded
-    to multiples of `5`.)
+    (To keep the page performant, these percentages are rounded to multiples of `5`.)
 
-  - `useInitialPageSize` (optional, default `false`)
+-   `useInitialPageSize` (optional, default `false`)
 
-    If set to `true`, scroll position scroll position is calculated based
-    on the initial sizing of the page, ignoring its new dimensions when
+    If set to `true`, scroll position is calculated based on
+    the initial sizing of the page, ignoring its new dimensions when
     resized.
 
-    {% call callout('Note', type='note') %}
-    When using `<amp-analytics>` with infinitely scrolling experiences such as `<amp-next-page>` and `<amp-list>`, you might find it helpful to use `useInitialPageSize` in order to have scroll triggers report on the initial height of the pages (before `<amp-next-page>` or `<amp-list>` elements get added). Note that this will also ignore the size changes caused by other extensions (such as expanding embedded content) so some scroll events might fire prematurely instead.
-    {% endcall %}
+[tip type="note"]
+When using `<amp-analytics>` with infinitely scrolling experiences such as
+`<amp-next-page>` and `<amp-list>`, you might find it helpful to use
+`useInitialPageSize` in order to have scroll triggers report on the initial
+height of the pages (before `<amp-next-page>` or `<amp-list>` elements get
+added). Note that this will also ignore the size changes caused by other
+extensions (such as expanding embedded content) so some scroll events might fire
+prematurely instead.
+[/tip]
 
-For instance, in the following code snippet, the scroll event will be fired when page is scrolled vertically by 25%, 50% and 90%. Additionally, the event will also fire when the page is horizontally scrolled to 90% of scroll width.
+For instance, in the following code snippet, the scroll event will be fired when
+page is scrolled vertically by 25%, 50% and 90%. Additionally, the event will
+also fire when the page is horizontally scrolled to 90% of scroll width.
 
 ```json
 "triggers": {
@@ -711,14 +721,26 @@ For instance, in the following code snippet, the scroll event will be fired when
 }
 ```
 
-##### Timer trigger
+###### `"on": "timer"` trigger <a name="timer"></a>
 
-Use the timer trigger (`"on": "timer"`) to fire a request on a regular time interval. Use `timerSpec` to control when this will fire:
+Use the timer trigger (`"on": "timer"`) to fire a request on a regular time
+interval. Use `timerSpec` to control when this will fire.
 
-- `timerSpec` Specification for triggers of type `timer`. Unless a `startSpec` is specified, the timer will trigger immediately (by default, can be unset) and then at a specified interval thereafter.
-  - `interval` Length of the timer interval, in seconds.
-  - `maxTimerLength` Maximum duration for which the timer will fire, in seconds. An addtional request will be triggered when the `maxTimerLength` has been reached. The default is 2 hours. When a `stopSpec` is present, but no maxTimerLength is specified, the default will be infinity.
-  - `immediate` trigger timer immediately or not. Boolean, defaults to true
+`timerSpec` Specification for triggers of type `timer`. Unless a `startSpec` is specified, the timer will trigger immediately (by default, can be unset) and then at a specified interval thereafter.
+
+-   `interval` Length of the timer interval, in seconds.
+-   `maxTimerLength` Maximum duration for which the timer will fire, in
+    seconds. An additional request will be triggered when the
+    `maxTimerLength` has been reached. The default is 2 hours. When a
+    `stopSpec` is present, but no `maxTimerLength` is specified, the default
+    will be infinity.
+-   `immediate` trigger timer immediately or not. Boolean, defaults to true
+
+[tip type="note"]
+The timer trigger will continue to send out requests regardless of document state (inactive or hidden), until the `maxTimerLength` has been reached (default to 2 hours if `stopSpec` doesn't exist and inifity if it does) or `stopSpec` has been met. In the case of no `stopSpec`, the `maxTimerLength` will default to infinity.
+[/tip]
+
+See the following example:
 
 ```json
 "triggers": {
@@ -735,11 +757,34 @@ Use the timer trigger (`"on": "timer"`) to fire a request on a regular time inte
 
 To configure a timer which times user events use:
 
-- `startSpec` Specification for triggering when a timer starts. Use the value of `on` and `selector` to track specific events. A config with a `startSpec` but no `stopSpec` will only stop after `maxTimerLength` has been reached.
-- `stopSpec` Specification for triggering when a timer stops. A config with a `stopSpec` but no `startSpec` will start immediately but only stop on the specified event.
+-   `startSpec` Specification for triggering when a timer starts. Use the value of
+    `on` and `selector` to track specific events. A config with a `startSpec`
+    but no `stopSpec` will only stop after `maxTimerLength` has been reached.
+-   `stopSpec` Specification for triggering when a timer stops. A config with a
+    `stopSpec` but no `startSpec` will start immediately but only stop on the
+    specified event.
+
+See the spec on [triggers](#triggers) for details on creating nested timer
+triggers. Note that using a timer trigger to start or stop a timer is not
+allowed. The example below demonstrates how to configure a trigger based on a documents `hidden` and `visible` events and a trigger based on a videos `play` and `pause` events.
 
 ```json
 "triggers": {
+  "startOnVisibleStopOnHiddenTimer": {
+    "on": "timer",
+    "timerSpec": {
+      "interval": 5,
+      "startSpec": {
+        "on": "visible",
+        "selector": ":root"
+      },
+      "stopSpec": {
+        "on": "hidden",
+        "selector": ":root"
+      }
+    },
+    "request": "timerRequest"
+  },
   "videoPlayTimer": {
     "on": "timer",
     "timerSpec": {
@@ -758,11 +803,61 @@ To configure a timer which times user events use:
 }
 ```
 
-See the spec on [triggers](#triggers) for details on creating nested timer triggers. Note that using a timer trigger to start or stop a timer is not allowed.
+###### `"on": "visible"` trigger
+
+Use the page visibility trigger (`"on": "visible"`) to fire a request when the
+page becomes visible. The firing of this trigger can be configured using
+`visibilitySpec`.
+
+```json
+"triggers": {
+  "defaultPageview": {
+    "on": "visible",
+    "request": "pageview"
+  }
+}
+```
+
+The element visibility trigger can be configured for any AMP or non-AMP element or a
+document root using [`selector`](#element-selector). The trigger will fire when
+the specified element matches the visibility parameters that can be customized
+using the `visibilitySpec`.
+
+```json
+"triggers": {
+  "defaultPageview": {
+    "on": "visible",
+    "request": "elementview",
+    "selector": "#ad1",
+    "visibilitySpec": {/* optional visibility spec */}
+  }
+}
+```
+
+The element visibility trigger waits for the signal specified by the `waitFor`
+property in `visibilitySpec` before tracking element visibility. If `waitFor` is
+not specified, it waits for element's [`ini-load`](#ini-load) signal. See
+`waitFor` docs for more details. If `reportWhen` is specified, the trigger waits
+for that signal before sending the event. This is useful, for example, in
+sending analytics events when the page is closed.
 
-##### Hidden trigger
+`selector` can either be a single selector string (shown above) or an array of selector strings (shown below). If `selector` is a string, then it will be used to only specify a single element or a document root. If `selector` is an array of strings, each selector will specify all the elements in the doc that share the selector and have the `data-vars-*` attribute (useful for identifying elements).
 
-Use the hidden trigger (`"on": "hidden"`) to fire a request when the page becomes hidden.
+```json
+"triggers": {
+  "defaultPageview": {
+    "on": "visible",
+    "request": "adViewWithId",
+    "selector": ["amp-ad", "#myImg.red"],
+    "visibilitySpec": {/* optional visibility spec */}
+  }
+}
+```
+
+###### `"on": "hidden"` trigger
+
+Use the hidden trigger (`"on": "hidden"`) to fire a request when the page
+becomes hidden.
 
 ```json
 "triggers": {
@@ -773,7 +868,8 @@ Use the hidden trigger (`"on": "hidden"`) to fire a request when the page become
 }
 ```
 
-A [`visibilitySpec`](#visibility-spec) can be included so that a request is only fired if the visibility duration conditions are satisfied.
+A [`visibilitySpec`](#visibility-spec) can be included so that a request is only
+fired if the visibility duration conditions are satisfied.
 
 ```json
 "triggers": {
@@ -791,30 +887,130 @@ A [`visibilitySpec`](#visibility-spec) can be included so that a request is only
 
 The above configuration translates to:
 
-> When page becomes hidden, fire a request if the element #anim-id has been visible (more than 20% area in viewport) for more than 3s in total.
+> When page becomes hidden, fire a request if the element `#anim-id` has been
+> visible (more than 20% area in viewport) for more than 3s in total.
 
-##### Access triggers
+###### `"on": "user-error"` trigger
 
-AMP Access system issues numerous events for different states in the access flow. For details on access triggers (`"on": "access-*"`), see [AMP Access and Analytics](../amp-access/amp-access-analytics.md).
+The user error event (`"on": "user-error"`) is triggered when an error occurs
+that is attributable to the author of the page or to software that is used in
+publishing the page. This includes, but not limited to, misconfiguration of an
+AMP component, misconfigured ads, or failed assertions. User errors are also
+reported in the developer console.
 
-##### Video analytics triggers
+```json
+"triggers": {
+  "userError": {
+    "on": "user-error",
+    "request": "error"
+  }
+}
+```
 
-Video analytics provides several triggers (`"on": "video-*"`) that publishers can use to track different events occurring during a video's lifecycle. More details are available in [AMP Video Analytics](./amp-video-analytics.md).
+[tip type="note"]
+There is a
+[known issue](https://github.com/ampproject/amphtml/issues/10891) that it still
+reports errors from A4A iframe embeds, which are irrelevant to the page.
+[/tip]
 
-#### Transport
+###### `"on":` Component-specific triggers
+
+-   Access triggers: AMP Access system issues numerous events for different
+    states in the access flow. For details on access triggers
+    (`"on": "access-*"`), see
+    [AMP Access and Analytics](../amp-access/amp-access-analytics.md).
+-   Video analytics triggers: Video analytics provides several triggers
+    (`"on": "video-*"`) that publishers can use to track different events
+    occurring during a video's lifecycle. More details are available in
+    [AMP Video Analytics](amp-video-analytics.md).
+
+###### `request` trigger
+
+Name of the request to send (as specified in the `requests` section).
+
+###### `vars` trigger (optional)
+
+An object containing key-value pairs used to override `vars` defined in the top
+level config, or to specify `vars` unique to this trigger.
+
+###### `important` trigger (optional)
 
-The `transport` configuration object specifies how to send a request. The value is an object with fields that
-indicate which transport methods are acceptable.
+Can be specified to work with requests that support the batching behavior or the
+report window. Setting `important` to `true` can help to flush batched request
+queue with some certain triggers. In this case, it's possible to reduce the
+request pings number without losing important trigger events. Setting
+`important` to `true` can also override the request's `reportWindow` value to
+send out important request pings regardless.
 
-- `beacon` Indicates [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) can be used to transmit the request. This will send a POST request with credentials. The request will be sent with an empty body unless `useBody` is true. See [Use Body for Extra URL Params](#use-body-for-extra-url-params) for more information about `useBody`.
-- `xhrpost` Indicates `XMLHttpRequest` can be used to transmit the request. This will send a POST request with credentials. The request will be sent with an empty body unless `useBody` is true. See [Use Body for Extra URL Params](#use-body-for-extra-url-params) for more information about `useBody`.
-- `image` Indicates the request can be sent by generating an `Image` tag. This will send a GET request. To suppress console warnings due to empty responses or request failures, set `"image": {"suppressWarnings": true}`.
+###### `selector` and `selectionMethod` trigger (optional)
 
-MRC-accredited vendors may utilize a fourth transport mechanism, "iframe transport", by adding a URL string to iframe-transport-vendors.js. This indicates that an iframe should be created, with its `src` attribute set to this URL, and requests will be sent to that iframe via `window.postMessage()`. In this case, requests need not be full-fledged URLs. `iframe` may only be specified in `iframe-transport-vendors.js`, not inline within the `amp-analytics` tag, nor via remote configuration. Furthermore, the vendor frame may send a response, to be used by amp-ad-exit. See [analytics-iframe-transport-remote-frame.html](https://github.com/ampproject/amphtml/blob/master/examples/analytics-iframe-transport-remote-frame.html) and [fake_amp_ad_with_iframe_transport.html](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_iframe_transport.html): the former file sends a response JSON object of {'collected-data': 'abc'}, and the latter file uses that object to substitute 'abc' for 'bar\_' in finalUrl.
+Can be specified for some triggers, such as `click` and `visible`. See
+[Element selector](#element-selector) for details.
 
-If more than one of the above transport methods are enabled, the precedence is `iframe` > `beacon` > `xhrpost` > `image`. Only one transport method will be used, and it will be the highest precedence one that is permitted and available. If the client's user agent does not support a method, the next highest precedence method enabled will be used. By default, all four methods above are enabled.
+###### `scrollSpec` trigger
 
-In the example below, an `iframe` URL is not specified, and `beacon` and `xhrpost` are set to `false`, so they will not be used even though they have higher precedence than `image`. `image` would be set `true` by default, but it is explicitly declared here. If the client's user agent supports the `image` method, then it will be used; otherwise, no request would be sent.
+This configuration is used in conjunction with the `scroll` trigger. See
+[`scroll`](#scroll) for details. Required when `on` is set to `scroll`.
+
+###### `timerSpec` trigger
+
+This configuration is used in conjunction with the `timer` trigger. See
+[`timer`](#timer) for details. Required when `on` is set to `timer`.
+
+###### `sampleSpec` trigger (optional)
+
+This object is used to define how the requests can be sampled before they are
+sent. This setting allows sampling based on random input or other platform
+supported `vars`. The object contains configuration to specify an input that is
+used to generate a hash and a threshold that the hash must meet.
+
+-   `sampleOn`: This string template is expanded by filling in the platform
+    variables and then hashed to generate a number for the purposes of the
+    sampling logic described under `threshold` below.
+-   `threshold`: This configuration is used to filter out requests that do not
+    meet particular criteria. For a request to go through to the analytics
+    vendor, the following logic should be true `HASH(sampleOn) < threshold`.
+
+###### `videoSpec` trigger
+
+This configuration is used in conjunction with the
+[`video-*`](https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md)
+triggers. Used when `on` is set to `video-*`.
+
+#### Transport
+
+The `transport` configuration object specifies how to send a request. The value
+is an object with fields that indicate which transport methods are acceptable.
+
+-   `beacon` Indicates
+    [`navigator.sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon)
+    can be used to transmit the request. This will send a POST request with
+    credentials. The request will be sent with an empty body unless `useBody` is
+    true. See [ Extra URL parameters](#extra-url-parameters) for more
+    information about `useBody`.
+-   `xhrpost` Indicates `XMLHttpRequest` can be used to transmit the request.
+    This will send a POST request with credentials. The request will be sent
+    with an empty body unless `useBody` is true. See
+    [Extra URL parameters](#extra-url-parameters) for more information about
+    `useBody`.
+-   `image` Indicates the request can be sent by generating an `Image` tag. This
+    will send a GET request. To suppress console warnings due to empty responses
+    or request failures, set `"image": {"suppressWarnings": true}`.
+-   `iframe` Indicates that an `iframe` can be used to transmit the request. See
+    [`iframe`](#iframe) for details.
+
+If more than one of the above transport methods are enabled, the precedence is
+`iframe` > `beacon` > `xhrpost` > `image`. Only one transport method will be
+used, and it will be the highest precedence one that is permitted and available.
+If the client's user agent does not support a method, the next highest
+precedence method enabled will be used. By default, all four methods above are
+enabled.
+
+In the example below, an `iframe` URL is not specified, and `beacon` and
+`xhrpost` are set to `false`, so they will not be used even though they have
+higher precedence than `image`. `image` would be set `true` by default, but it
+is explicitly declared here. If the client's user agent supports the `image`
+method, then it will be used; otherwise, no request would be sent.
 
 ```json
 "transport": {
@@ -824,15 +1020,80 @@ In the example below, an `iframe` URL is not specified, and `beacon` and `xhrpos
 }
 ```
 
-To learn more, see [this example that implements iframe transport client API](https://github.com/ampproject/amphtml/blob/master/examples/analytics-iframe-transport-remote-frame.html) and [this example page that incorporates that iframe](https://github.com/ampproject/amphtml/blob/master/examples/analytics-iframe-transport.amp.html). The example loads a [fake ad](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_iframe_transport.html), which contains the `amp-analytics` tag. Note that the fake ad content includes some extra configuration instructions that must be followed.
+To learn more, see
+[this example that implements iframe transport client API](../../examples/analytics-iframe-transport-remote-frame.html)
+and [this example page that incorporates that iframe](../../examples/analytics-iframe-transport.amp.html).
+The example loads a [fake ad](../amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_iframe_transport.html),
+which contains the `amp-analytics` tag. Note that the fake ad content includes
+some extra configuration instructions that must be followed.
+
+##### iframe
+
+MRC-accredited vendors may utilize a fourth transport mechanism, "iframe
+transport", by adding a URL string to iframe-transport-vendors.js. This
+indicates that an iframe should be created, with its `src` attribute set to this
+URL, and requests will be sent to that iframe via `window.postMessage()`. In
+this case, requests need not be full-fledged URLs. `iframe` may only be
+specified in `iframe-transport-vendors.js`, not inline within the
+`amp-analytics` tag, nor via remote configuration. Furthermore, the vendor frame
+may send a response, to be used by `amp-ad-exit`. See
+[analytics-iframe-transport-remote-frame.html](../../examples/analytics-iframe-transport-remote-frame.html)
+and [fake_amp_ad_with_iframe_transport.html](../amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_iframe_transport.html):
+the former file sends a response JSON object of `{'collected-data': 'abc'}`, and
+the latter file uses that object to substitute `'abc'` for `'bar_'` in
+`finalUrl`.
+
+##### Referrer policy
+
+Referrer policy can be specified as `referrerPolicy` field in the `transport`
+config. Currently only `no-referrer` is supported. Referrer policy is only
+available for `image` transport. If `referrerPolicy: no-referrer` is specified,
+the `beacon` & `xhrpost` transports are overridden to `false`.
 
-##### Use Body for Extra URL Params
+```json
+"transport": {
+  "beacon": false,
+  "xhrpost": false,
+  "image": true,
+  "referrerPolicy": "no-referrer"
+}
+```
 
-The `useBody` configuration option indicates whether or not to include `extraUrlParams` in the POST request body instead of in the URL as URL-encoded query parameters.
+#### Extra URL parameters <a name="extra-url-parameters"></a>
 
-`useBody` is only available for the `beacon` and `xhrpost` transport methods. If `useBody` is true and used in conjunction with either of these transport methods, `extraUrlParams` are sent in the POST request body. Otherwise, the request is sent with an empty body and the `extraUrlParams` are included as URL parameters.
+The `extraUrlParams` configuration object specifies additional parameters to be
+included in the request. By default, extra URL params are appended to the query
+string of a request URL via the usual `"&foo=baz"` convention.
 
-With `useBody`, you can include nested objects in `extraUrlParams`. However, if the request falls back to other transport options that don't support `useBody` (e.g. `image`), then those nested objects will be stringified into the URL as `[object Object]`.
+Here's an example that would append `&a=1&b=2&c=3` to a request:
+
+```json
+"extraUrlParams": {
+  "a": "1",
+  "b": "2",
+  "c": "3"
+}
+```
+
+`extraUrlParams` may be sent via the request body instead of the URL if
+`useBody` is enabled and the request is sent via the `beacon` or `xhrpost`
+transport methods. In this case, the parameters are not URL encoded or
+flattened.
+
+The `useBody` configuration option indicates whether or not to include
+`extraUrlParams` in the POST request body instead of in the URL as URL-encoded
+query parameters.
+
+`useBody` is only available for the `beacon` and `xhrpost` transport methods. If
+`useBody` is true and used in conjunction with either of these transport
+methods, `extraUrlParams` are sent in the POST request body. Otherwise, the
+request is sent with an empty body and the `extraUrlParams` are included as URL
+parameters.
+
+With `useBody`, you can include nested objects in `extraUrlParams`. However, if
+the request falls back to other transport options that don't support `useBody`
+(e.g. `image`), then those nested objects will be stringified into the URL as
+`[object Object]`.
 
 ```json
 "transport": {
@@ -843,47 +1104,190 @@ With `useBody`, you can include nested objects in `extraUrlParams`. However, if
 }
 ```
 
-##### Referrer Policy
-
-Referrer policy can be specified as `referrerPolicy` field in the `transport` config. Currently only `no-referrer` is supported.
-Referrer policy is only available for `image` transport. If `referrerPolicy: no-referrer` is specified, the `beacon` & `xhrpost` transports are overridden to `false`.
+##### Map replacement strings in parameters
+
+The `extraUrlParamsReplaceMap` attribute specifies a map of keys and values that
+act as parameters to `String.replace()` to pre-process keys in the
+`extraUrlParams` configuration. For example, if an `extraUrlParams`
+configuration defines `"page.title": "The title of my page"` and the
+`extraUrlParamsReplaceMap` defines `"page.": "_p_"`, then
+`&_p_title=The%20title%20of%20my%20page%20` will be appended to the request.
+
+`extraUrlParamsReplaceMap` is not required to use `extraUrlParams`. If
+`extraUrlParamsReplaceMap` is not defined, then no string substitution will
+happens and the strings defined in `extraUrlParams` are used as-is.
+
+If `useBody` is enabled and the request is sent via the `beacon` or `xhrpost`
+transport methods, `extraUrlParamsReplaceMap` string substitution will only be
+performed on the top-level keys in `extraUrlParams`.
+
+### Customize the `visible` and `hidden` triggers with `visibilitySpec` <a name="visibility-spec"></a>
+
+The `visibilitySpec` is a set of conditions and properties that can be applied
+to `visible` or `hidden` triggers to change when they fire. If multiple
+properties are specified, they must all be true in order for a request to fire.
+Configuration properties supported in `visibilitySpec` are:
+
+-   `waitFor`: This property indicates that the visibility trigger should wait
+    for a certain signal before tracking visibility. The supported values are
+    `none`, `ini-load`, and `render-start`. If `waitFor` is undefined, it is
+    defaulted to [`ini-load`](#ini-load) (for AMP elements) when selector is specified, or to `none` otherwise. When tracking non-AMP elements, only `none` is supported, which is its default value. Tracking non-AMP elements may not always work as intended. For example, tracking a `<div>` element that contains an `<amp-iframe>`, may not accurately wait for the iframe to load before sending the signal out.
+
+-   `reportWhen`: This property indicates that the visibility trigger should
+    wait for a certain signal before sending the trigger. The only supported
+    value is `documentExit`. `reportWhen` and `repeat` may not both be used in the
+    same `visibilitySpec`. Note that when `reportWhen` is specified, the report
+    will be sent at the time of the signal even if visibility requirements are
+    not met at that time or have not been met previously. Any relevant variables
+    (`totalVisibleTime`, etc.) will be populated according to the visibility
+    requirements in this `visibilitySpec`.
+
+-   `continuousTimeMin` and `continuousTimeMax`: These properties indicate that
+    a request should be fired when (any part of) an element has been within the
+    viewport for a continuous amount of time that is between the minimum and
+    maximum specified times. The times are expressed in milliseconds. The
+    `continuousTimeMin` is defaulted to `0` when not specified.
+
+-   `totalTimeMin` and `totalTimeMax`: These properties indicate that a request
+    should be fired when (any part of) an element has been within the viewport
+    for a total amount of time that is between the minimum and maximum specified
+    times. The times are expressed in milliseconds. The `totalTimeMin` is
+    defaulted to `0` when not specified.
+
+-   `visiblePercentageMin` and `visiblePercentageMax`: These properties indicate
+    that a request should be fired when the proportion of an element that is
+    visible within the viewport is between the minimum and maximum specified
+    percentages. Percentage values between 0 and 100 are valid. Note that the
+    upper bound (`visiblePercentageMax`) is inclusive. The lower bound
+    (`visiblePercentageMin`) is exclusive, unless both bounds are set to 0 or
+    both are set to 100. If both bounds are set to 0, then the trigger fires
+    when the element is not visible. If both bounds are set to 100, the trigger
+    fires when the element is fully visible. When these properties are defined
+    along with other timing related properties, only the time when these
+    properties are met are counted. The default values for
+    `visiblePercentageMin` and `visiblePercentageMax` are `0` and `100`,
+    respectively.
+
+-   `repeat`: If this property is set to `true`, the trigger fires each time
+    that the `visibilitySpec` conditions are met. In the following example, if
+    the element is scrolled to 51% in view, then 49%, then 51% again, the
+    trigger fires twice. However, if `repeat` was `false`, the trigger fires
+    once. The default value of `repeat` is `false`. `reportWhen` and `repeat`
+    may not both be used in the same visibilitySpec.
 
 ```json
-"transport": {
-  "beacon": false,
-  "xhrpost": false,
-  "image": true,
-  "referrerPolicy": "no-referrer"
+"visibilitySpec": {
+  "visiblePercentageMin": 50,
+  "repeat": true
 }
 ```
 
-#### Linkers
+`visiblePercentageThresholds` may be used as a shorthand for creating multiple
+`visibilitySpec` instances that differ only in `visiblePercentageMin` and
+`visiblePercentageMax`. For example the following are equivalent:
 
-The `linkers` feature is used to enable cross domain ID syncing. `amp-analytics` will use a [configuration object](./linker-id-forwarding.md#format) to create a "linker string" which will be appended to the specified outgoing links on the page as URL param. When a user clicks on one of these links, the destination page will read the linker string from the URL param to perform ID syncing. This is typically used to join user sessions across an AMP proxy domain and publisher domain.
+```json
+// Two triggers with visibilitySpecs that only differ in visiblePercentageMin and visiblePercentageMax:
+"triggers": {
+  "pageView_30_to_40": {
+    "on": "visible",
+    "request": "pageview",
+    "selector": "#ad1",
+    "visibilitySpec": {
+      "visiblePercentageMin": 30,
+      "visiblePercentageMax": 40,
+      "continuousTimeMin": 1000
+    }
+  },
+  "pageView_40_to_50": {
+    "on": "visible",
+    "request": "pageview",
+    "selector": "#ad1",
+    "visibilitySpec": {
+      "visiblePercentageMin": 40,
+      "visiblePercentageMax": 50,
+      "continuousTimeMin": 1000
+    }
+  }
+}
+
+// A single trigger equivalent to both of the above:
+"triggers": {
+  "pageView": {
+    "on": "visible",
+    "request": "pageview",
+    "selector": "#ad1",
+    "visibilitySpec": {
+      "visiblePercentageThresholds": [[30, 40], [40, 50]],
+      "continuousTimeMin": 1000
+    }
+  }
+}
+```
 
-Details on setting up your linker configuration are outlined in [Linker ID Forwarding](./linker-id-forwarding.md)
+In addition to the conditions above, `visibilitySpec` also enables certain
+variables which are documented
+[here](analytics-vars.md#visibility-variables).
 
-If you need to ingest this parameter, information on how this parameter is created is illustrated in [Linker ID Receiving](./linker-id-receiving.md).
+```json
+"triggers": {
+  "defaultPageview": {
+    "on": "visible",
+    "request": "pageview",
+    "selector": "#ad1",
+    "visibilitySpec": {
+      "waitFor": "ini-load",
+      "reportWhen": "documentExit",
+      "visiblePercentageMin": 20,
+      "totalTimeMin": 500,
+      "continuousTimeMin": 200
+    }
+  }
+}
+```
 
-#### Cookies
+In addition to the variables provided as part of triggers you can also specify
+additional / overrides for
+[variables as data attribute](analytics-vars.md#variables-as-data-attribute).
+If used, these data attributes have to be part of element specified as the
+[`selector`](#element-selector).
 
-The `cookies` feature supports writing cookies to the origin domain by extracting [`QUERY_PARAM`](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#query-parameter) and [`LINKER_PARAM`](./linker-id-receiving.md#linker-param) information from the document url. It can be used along with `linkers` features to perform ID syncing from the AMP proxied domain to AMP pages on a publisher's domain.
+### Linkers
 
-Details on setting up the `cookies` configuration can be found at [Receiving Linker Params on AMP Pages](./linker-id-receiving.md#receiving-linker-params-on-amp-pages)
+The `linkers` feature is used to enable cross domain ID syncing. `amp-analytics`
+will use a
+[configuration object](linker-id-forwarding.md#format)
+to create a "linker string" which will be appended to the specified outgoing
+links on the page as URL param. When a user clicks on one of these links, the
+destination page will read the linker string from the URL param to perform ID
+syncing. This is typically used to join user sessions across an AMP proxy domain
+and publisher domain.
 
-## Validation
+Details on setting up your linker configuration are outlined in
+[Linker ID Forwarding](linker-id-forwarding.md).
 
-See [amp-analytics rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/validator-amp-analytics.protoascii) in the AMP validator specification.
+If you need to ingest this parameter, information on how this parameter is
+created is illustrated in
+[Linker ID Receiving](linker-id-receiving.md).
 
-### Valid attributes for `<amp-analytics>`
+### Cookies
 
-These are the valid attributes for the `amp-analytics` component:
+The `cookies` feature supports writing cookies to the origin domain by
+extracting [`QUERY_PARAM`](../../docs/spec/amp-var-substitutions.md#query-parameter)
+and [`LINKER_PARAM`](linker-id-receiving.md#linker-param)
+information from the document url. It can be used along with `linkers` features
+to perform ID syncing from the AMP proxied domain to AMP pages on a publisher's
+domain.
 
-**type**
+Details on setting up the `cookies` configuration can be found at
+[Receiving Linker Params on AMP Pages](linker-id-receiving.md#receiving-linker-params-on-amp-pages).
 
-Specifies the type of vendor. For details, see the list of [Analytics vendors](https://amp.dev/documentation/guides-and-tutorials/optimize-measure/configure-analytics/analytics-vendors).
+## Attributes
 
-Example:
+### `type`
+
+Specifies the type of vendor. For details, see the list of
+[Analytics vendors](https://amp.dev/documentation/guides-and-tutorials/optimize-measure/configure-analytics/analytics-vendors).
 
 ```html
 <amp-analytics
@@ -892,11 +1296,14 @@ Example:
 ></amp-analytics>
 ```
 
-**config**
-
-This is an optional attribute that can be used to load a configuration from a specified remote URL. The URL specified should use the HTTPS scheme. See also the `data-include-credentials` attribute below. The URL may include [AMP URL vars](../../spec/amp-var-substitutions.md). The response must follow the [AMP CORS security guidelines](../../spec/amp-cors-requests.md).
+### `config` (optional)
 
-Example:
+This is an optional attribute that can be used to load a configuration from a
+specified remote URL. The URL specified should use the HTTPS scheme. See also
+the `data-include-credentials` attribute below. The URL may include
+[AMP URL vars](../../docs/spec/amp-var-substitutions.md).
+The response must follow the
+[AMP CORS security guidelines](../../docs/spec/amp-cors-requests.md).
 
 ```html
 <amp-analytics
@@ -904,14 +1311,25 @@ Example:
 ></amp-analytics>
 ```
 
-**data-credentials**<a name="data-credentials"></a>
+### `data-credentials` (optional) <a name="data-credentials"></a>
+
+If set to `include`, this turns on the ability to read and write cookies on the
+request specified via the `config` attribute. This is an optional attribute.
 
-If set to `include`, this turns on the ability to read and write cookies on the request specified via the `config` attribute. This is an optional attribute.
+### `data-consent-notification-id` (optional)
 
-**data-consent-notification-id**
+If provided, the page will not process analytics requests until an
+[amp-user-notification](../amp-user-notification/amp-user-notification.md)
+with the given HTML element id is confirmed (accepted) by the user. This is an
+optional attribute.
 
-If provided, the page will not process analytics requests until an [amp-user-notification](../../extensions/amp-user-notification/amp-user-notification.md) with the given HTML element id is confirmed (accepted) by the user. This is an optional attribute.
+## Analytics
 
-## Analytics for AMP components
+AMP component developers can implement collection of data using AMP analytics.
+For more information, please refer to
+[Implementing analytics for AMP components](amp-components-analytics.md).
+
+## Validation
 
-AMP component developers can implement collection of data using AMP analytics. For more information, please refer to [Implementing analytics for AMP components](./amp-components-analytics.md)
+See [`amp-analytics` rules](validator-amp-analytics.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-analytics/amp-components-analytics.md b/extensions/amp-analytics/amp-components-analytics.md
index 171407d0d1c9f..871a965386c62 100644
--- a/extensions/amp-analytics/amp-components-analytics.md
+++ b/extensions/amp-analytics/amp-components-analytics.md
@@ -20,9 +20,9 @@ limitations under the License.
 
 Third-party content providers are encouraged to create their own AMP components. To collect analytics for those components, use the AMP analytics APIs described in this document.
 
-- To collect custom events that the AMP component triggers programmatically in its own code, use the [CustomEventReporter API](#CustomEventReporter-API).
+-   To collect custom events that the AMP component triggers programmatically in its own code, use the [CustomEventReporter API](#CustomEventReporter-API).
 
-- To collect the `visible` or `hidden` analytics events defined by the [amp-analytics spec](amp-analytics.md#Triggers) that are triggered through user interaction, use the [useAnalyticsInSandbox API](#useAnalyticsInSandbox-API).
+-   To collect the `visible` or `hidden` analytics events defined by the [amp-analytics spec](amp-analytics.md#Triggers) that are triggered through user interaction, use the [useAnalyticsInSandbox API](#useAnalyticsInSandbox-API).
 
 The two APIs can be used individually or together.
 
@@ -64,7 +64,7 @@ Note: With the use of **`customEventReporter`**, AMP assumes all custom events a
 
 ### useAnalyticsInSandbox API
 
-Third-party AMP components can contain an amp-analytics [configuration](amp-analytics.md#sending-analytics-to-a-vendor-or-in-house) to collect analytics events. Currently, only the `visible` and `hidden` events are supported. To request other existing analytics [events](amp-analytics.md#triggers) (e.g., `ini-load`, `click`) to support analytics in third-party AMP components, please submit a [feature request in Github](https://github.com/ampproject/amphtml/issues/new).
+Third-party AMP components can contain an amp-analytics [configuration](amp-analytics.md#sending-analytics-to-a-vendor-or-in-house) to collect analytics events. Currently, only the `visible` and `hidden` events are supported. To request other existing analytics [events](amp-analytics.md#triggers) (e.g., `ini-load`, `click`) to support analytics in third-party AMP components, please submit a [feature request](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Feature+Request&template=feature-request.yml) on GitHub.
 
 To send analytics pings, third-party AMP components must call the `useAnalyticsInSandbox()` API function and provide a promise that resolves with their analytics configuration when it is ready. The analytics configuration should be a JSON object specified in accordance with the amp-analytics [spec](amp-analytics.md#triggers).
 
@@ -80,7 +80,7 @@ Both APIs will insert an `<amp-analytics>` element into the DOM when the third-p
 
 ## Restrictions
 
-An inserted amp-analytics element is sandboxed within its parent third-party AMP component. This means its selector cannot access elements outside of its parent scope, and the [URL variable substitution](../../spec/amp-var-substitutions.md) only works if variable is included in the [allowlist](./0.1/sandbox-vars-allowlist.js).
+An inserted amp-analytics element is sandboxed within its parent third-party AMP component. This means its selector cannot access elements outside of its parent scope, and the [URL variable substitution](../../docs/spec/amp-var-substitutions.md) only works if variable is included in the [allowlist](./0.1/sandbox-vars-allowlist.js).
 
 ## Documentation requirements
 
diff --git a/extensions/amp-analytics/amp-video-analytics.md b/extensions/amp-analytics/amp-video-analytics.md
index 751e57a144668..ddb515a48934e 100644
--- a/extensions/amp-analytics/amp-video-analytics.md
+++ b/extensions/amp-analytics/amp-video-analytics.md
@@ -56,6 +56,8 @@ The `video-play` trigger is fired when the video begins playing from a user clic
 }
 ```
 
+_Note:_ This event was initially mapped to the `playing` event emitted by video elements instead of the `play` event. This may lead to overcounting as those events are also emitted when playing was interrupted by network issues. While this bug has been fixed in general, individual video players may continue to use the `playing` event internally instead of the `play` event.
+
 ### Video pause trigger (`"on": "video-pause"`)
 
 The `video-pause` trigger is fired when the video stops playing from a user clicking pause, from autoplay pausing, or from the video reaching the end. Use these configurations to fire a request for this event.
@@ -227,7 +229,7 @@ If you'd like to capture the initial `play` event (e.g. click-to-play), you can
 
 ## Video analytics variables
 
-Video analytics contributes the following variables to [AMP URL Variable Substitutions](../../spec/amp-var-substitutions.md).
+Video analytics contributes the following variables to [AMP URL Variable Substitutions](../../docs/spec/amp-var-substitutions.md).
 
 ### VIDEO_STATE
 
diff --git a/extensions/amp-analytics/analytics-vars.md b/extensions/amp-analytics/analytics-vars.md
index 5d10e0a3e7023..ea601f951acab 100644
--- a/extensions/amp-analytics/analytics-vars.md
+++ b/extensions/amp-analytics/analytics-vars.md
@@ -37,8 +37,8 @@ Vars can be defined by the platform, in the config at the top level, inside the
 
 For the following event types, variables can be passed as part of the element level data attribute
 
-- visible
-- click
+-   visible
+-   click
 
 The variables passed as data attributes should follow the format `data-vars-*`.
 
@@ -59,7 +59,7 @@ When the same `var` is defined in multiple locations, the value is picked in the
 
 ## Variables
 
-For a list of variables supported in `amp-analytics`, see [Variable Substitutions](../../spec/amp-var-substitutions.md). These variables may be substituted as well as nested within each other. For example, a variable that is substituted to
+For a list of variables supported in `amp-analytics`, see [Variable Substitutions](../../docs/spec/amp-var-substitutions.md). These variables may be substituted as well as nested within each other. For example, a variable that is substituted to
 
 ```javascript
 {
diff --git a/extensions/amp-analytics/analytics-vendors-list.md b/extensions/amp-analytics/analytics-vendors-list.md
index 2249b8c531cc7..6d702490b83f5 100644
--- a/extensions/amp-analytics/analytics-vendors-list.md
+++ b/extensions/amp-analytics/analytics-vendors-list.md
@@ -14,12 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
+<!--
+  Run to insert missing sections:
+    amp check-analytics-vendors-list --fix
+
+  (Some are intentionally commented-out and should be kept for the CI check.)
+-->
+
 # Analytics Vendors <a name="vendors"></a>
 
 This document lists analytics vendors that have built-in configurations for use with the [`amp-analytics`](https://amp.dev/documentation/components/amp-analytics/) component.
 
 Vendors that wish to integrate their service with [`<amp-analytics>`](https://amp.dev/documentation/components/amp-analytics/) should refer to the details in [Integrate your analytics tools with AMP](https://amp.dev/documentation/guides-and-tutorials/contribute/integrate-your-analytics-tools).
 
+<!--
+### _fake_
+
+Type attribute value: `_fake_`
+-->
+
 ### Acquia Lift
 
 Type attribute value: `acquialift`
@@ -28,9 +41,21 @@ Adds support for Acquia Lift. The `decisionApiUrl`, `accountId` and `siteId` mus
 
 ### Adobe Analytics
 
-Type attribute value: `adobeanalytics`
+Type attribute value: `adobeanalytics`, `adobeanalytics_nativeConfig`
+
+Adds support for Adobe Analytics. More details for adding Adobe Analytics support can be found at [experienceleague.adobe.com](https://experienceleague.adobe.com/docs/analytics/implementation/other/amp.html).
 
-Adds support for Adobe Analytics. More details for adding Adobe Analytics support can be found at [marketing.adobe.com](https://marketing.adobe.com/resources/help/en_US/sc/implement/accelerated-mobile-pages.html).
+[tip type="important"]
+
+Do not use both the `adobeanalytics` and `adobeanalytics_nativeConfig` types on the same page. If you attempt to do so, you can generate errors in the browser console and double-count visitors.
+
+[/tip]
+
+<!--
+### adobeanalytics_nativeConfig (included above)
+
+Type attribute value: `adobeanalytics_nativeConfig`
+-->
 
 ### AFS Analytics
 
@@ -42,8 +67,12 @@ Adds support for AFS Analytics. Additionally, the `websiteid` and `server` varia
 
 Type attribute value: `alexametrics`
 
+<!-- markdown-link-check-disable -->
+
 Adds support for Alexa Certified Site Metrics. The `atrk_acct` and `domain` variables must be specified. More information can be found at [Alexa’s Certified Metrics FAQ](https://support.alexa.com/hc/en-us/sections/200063374-Certified-Site-Metrics).
 
+<!-- markdown-link-check-enable -->
+
 ### Amplitude
 
 Type attribute value: `amplitude`
@@ -58,12 +87,40 @@ Adds support for AT Internet. More details for adding AT Internet support can be
 
 Type attribute value: `baiduanalytics`
 
+<!-- markdown-link-check-disable -->
+
 Adds support for Baidu Analytics. More details for adding Baidu Analytics support can be found at [tongji.baidu.com/](http://tongji.baidu.com/web/help/article?id=268&type=0).
 
+<!-- markdown-link-check-enable -->
+
+<!--
+### bg.canary
+
+Type attribute value: `bg.canary`
+-->
+
+<!--
+### bg
+
+Type attribute value: `bg`
+-->
+
+### Black Crow AI
+
+Type attribute value: `blackcrowai`
+
+Adds support for Black Crow AI. You are required to fill out the `site_name` variable which is assigned to you by your account manager. If you wish to send scores to Google, please also include your GA account ID (i.e. `UA-123401-1`).
+
 ### BlueConic
 
 Type attribute value: `blueconic`
 
+### Blue Triangle
+
+Type attribute value: `bluetriangle`
+
+Adds support for blue Triangle. More details can be found at [help.bluetriangle.com](https://help.bluetriangle.com/hc/en-us/articles/1500006133061).
+
 ### Browsi
 
 Type attribute value: `browsi`
@@ -94,6 +151,10 @@ Type attribute value: `clicky`
 
 Adds support for Clicky Web Analytics. More details for adding Clicky support can be found at [clicky.com](https://clicky.com/help/apps-plugins).
 
+### colanalytics
+
+Type attribute value: `colanalytics`
+
 ### comScore
 
 Type attribute value: `comscore`
@@ -141,6 +202,13 @@ Type attribute value: `gemius`
 
 Adds support for Gemius Audience/Prism analytics. Additionally, the gemius-provided `prefix` and `identifier` variables must be specified. It's also possible to specify the optional variable `extraparams` (key1=value1|key2=value2). More details can be found at [gemius.com](https://www.gemius.com).
 
+### GfK Sensic
+
+Type attribute value: `gfksensic`
+
+Adds support for GfK Sensic audio stream usage analytics.
+Please refer to our [client documentation](https://confluence-docu.gfk.com/display/SENSIC/AMP+Integration) for details.
+
 ### Google Ads
 
 Type attribute value: `googleadwords`
@@ -153,6 +221,10 @@ Type attribute value: `googleanalytics`
 
 Adds support for Google Analytics. More details for adding Google Analytics support can be found at [developers.google.com](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
 
+### gtag
+
+Type attribute value: `gtag`
+
 ### Google Tag Manager
 
 Type attribute value: N/A
@@ -165,34 +237,38 @@ Type attribute value: `ibeatanalytics`
 
 Adds support for Ibeat Analytics. More details for adding Ibeat support can be found at [Ibeat Integration Support](https://ibeat.indiatimes.com/support.html#h.a5rit14mwie1).
 
+<!-- markdown-link-check-disable -->
+
 ### INFOnline / IVW
 
 Type attribute value: `infonline`
 
-Adds support for [INFOnline](https://www.infonline.de) / [IVW](http://www.ivw.de). Requires a copy of [amp-analytics-infonline.html](https://3p.ampproject.net/custom/amp-analytics-infonline.html) on a different subdomain than the including AMP file ([why?](https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md)). The file must be served via HTTPS. For example, if your AMP files are hosted on `www.example.com`, then `amp-analytics-infonline.html` needs to be on another subdomain such as `iframe.example.com` or `assets.example.com`.
+Adds support for [INFOnline](https://www.infonline.de) / [IVW](http://www.ivw.de). Requires a copy of [amp-analytics-infonline.html](https://3p.ampproject.net/custom/amp-analytics-infonline.html) on a different subdomain than the including AMP file ([why?](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-iframe-origin-policy.md)). The file must be served via HTTPS. For example, if your AMP files are hosted on `www.example.com`, then `amp-analytics-infonline.html` needs to be on another subdomain such as `iframe.example.com` or `assets.example.com`.
+
+<!-- markdown-link-check-enable -->
 
 Additionally, the following variables must be defined:
 
-- `st`: offer ID
-- `co`: comment
-- `cp`: code
-- `url`: HTTPS location of `amp-analytics-infonline.html`
+-   `st`: offer ID
+-   `co`: comment
+-   `cp`: code
+-   `url`: HTTPS location of `amp-analytics-infonline.html`
 
 More details for adding INFOnline / IVW support can be found at [www.infonline.de](https://www.infonline.de/).
 
 ### INFOnline anonymous
 
-Type attribute value: `infonline-anonymous`
+Type attribute value: `infonline_anonymous`
 
-Adds support for the [anonymous INFOnline](https://www.infonline.de). Requires a copy of [infonline-anonymous.html](https://www.infonline.de/amp/infonline-anonymous.html) on a different subdomain than the including AMP file ([why?](https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md)). The file must be served via HTTPS. For example, if your AMP files are hosted on `www.example.com`, then `infonline-anonymous.html` needs to be on another subdomain such as `iframe.example.com` or `assets.example.com`.
+Adds support for the [anonymous INFOnline](https://www.infonline.de). Requires a copy of [infonline-anonymous.html](https://www.infonline.de/amp/infonline-anonymous.html) on a different subdomain than the including AMP file ([why?](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-iframe-origin-policy.md)). The file must be served via HTTPS. For example, if your AMP files are hosted on `www.example.com`, then `infonline-anonymous.html` needs to be on another subdomain such as `iframe.example.com` or `assets.example.com`.
 
 Additionally, the following variables must be defined:
 
-- `st`: offer ID
-- `co`: comment
-- `cp`: code
-- `url`: HTTPS location of `infonline-anonymous.html`
-- `dn`: The relay domain name
+-   `st`: offer ID
+-   `co`: comment
+-   `cp`: code
+-   `url`: HTTPS location of `infonline-anonymous.html`
+-   `dn`: The relay domain name
 
 More details for adding INFOnline anonymous support can be found at [www.infonline.de](https://www.infonline.de/).
 
@@ -206,8 +282,8 @@ Type attribute value: `keen`
 
 Adds support for Keen. Additionally, the following `vars` must be defined:
 
-- `projectId`: your project id
-- `writeKey`: your write key
+-   `projectId`: your project id
+-   `writeKey`: your write key
 
 Use `extraUrlParams` to add more data. Configuration details can be found at [keen.io/docs/api](https://keen.io/docs/api/).
 
@@ -221,8 +297,12 @@ Adds support for Kenshoo. More information and configuration details can be foun
 
 Type attribute value: `krux`
 
+<!-- markdown-link-check-disable -->
+
 Adds support for Krux. Configuration details can be found at [help.krux.com](https://konsole.zendesk.com/hc/en-us/articles/216596608).
 
+<!-- markdown-link-check-enable -->
+
 ### Linkpulse
 
 Type attribute value: `linkpulse`
@@ -233,7 +313,13 @@ Adds support for Linkpulse. Configuration details can be found at [docs.linkpuls
 
 Type attribute value: `lotame`
 
-Adds support for Lotame. More information and configuration details can be found at [mylotame.force.com](https://mylotame.force.com/s/article/Google-AMP).
+Adds support for Lotame. More information and configuration details can be found at [my.lotame.com](https://my.lotame.com/t/83h37h9/overview-1st-party-data-collection-in-google-amp).
+
+### Mapp Intelligence
+
+Type attribute value: `mapp_intelligence`
+
+Adds support for Mapp Intelligence tracking. More information and configuration details can be found at [docs.mapp.com](https://docs.mapp.com/pages/viewpage.action?pageId=10027966).
 
 ### Marin Software
 
@@ -251,14 +337,20 @@ Type attribute value: `mediarithmics`
 
 Adds support for mediarithmics. More information and configuration details can be found at `https://developer.mediarithmics.com`.
 
+### mediator
+
+Type attribute value: `mediator`
+
 ### Memo
 
 Type attribute value: `memo`
 
-### Metrika
+### Yandex Metrica
 
 Type attribute value: `metrika`
 
+Adds support for Yandex Metrica. Configuration details can be found at [Yandex Support](https://yandex.com/support/metrica/code/install-counter-amp.xml).
+
 ### Moat Analytics
 
 Type attribute value: `moat`
@@ -281,6 +373,16 @@ Type attribute value: `mparticle`
 
 Adds support for mParticle. More details for adding mParticle support can be found at [docs.mparticle.com](http://docs.mparticle.com/?javascript#amp).
 
+### SOASTA mPulse
+
+Type attribute value: `mpulse`
+
+<!-- markdown-link-check-disable -->
+
+Adds support for [SOASTA mPulse](https://www.soasta.com/mPulse). Configuration details can be found at [docs.soasta.com](http://docs.soasta.com/).
+
+<!-- markdown-link-check-enable -->
+
 ### Navegg
 
 Type attribute value: `navegg`
@@ -307,21 +409,27 @@ Adds support for Nielsen Marketing Cloud. More details can be found at [Nielsen
 
 Type attribute value: `oewa`
 
-Adds support for `[OEWA](https://www.oewa.at)`. Requires a copy of [amp-analytics-oewa.html](http://www.oewa.at/fileadmin/downloads/amp-analytics-oewa.html) on a different subdomain than the including AMP file ([why?](https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md)). The file must be served via HTTPS. For example, if your AMP files are hosted on `www.example.com`, then `amp-analytics-oewa.html` needs to be on another subdomain such as `oewa-amp.example.com`. More details for adding OEWA support can be found [here](http://www.oewa.at/Implementierung).
+Adds support for [OEWA](http://www.oewa.at). Requires a copy of [amp-analytics-oewa.html](http://www.oewa.at/fileadmin/downloads/amp-analytics-oewa.html) on a different subdomain than the including AMP file ([why?](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-iframe-origin-policy.md)). The file must be served via HTTPS. For example, if your AMP files are hosted on `www.example.com`, then `amp-analytics-oewa.html` needs to be on another subdomain such as `oewa-amp.example.com`. More details for adding OEWA support can be found [here](http://www.oewa.at/Implementierung).
 
 Additionally, the following variables must be defined:
 
 In the `vars` section:
 
-- `s`: offer
-- `cp`: category path
+-   `s`: offer
+-   `cp`: category path
 
 In the `requests` section:
 
-- `url`: HTTPS location of `amp-analytics-oewa.html`
+-   `url`: HTTPS location of `amp-analytics-oewa.html`
+
+### oewadirect
+
+Type attribute value: `oewadirect`
+
+[tip type="important"]
+
+This is a variation of `oewa` that does not use the iframe-ping solution and has a better client detection by using `AMP CLIENT_ID`. This is currently EXPERIMENTAL, and prohibited by the OEWA because it does not use `oewa2.js`.
 
-[tip type="note"]
-**NOTE –** There is a variation named `oewadirect` that does not use the iframe-ping solution and has a better client detection by using `AMP CLIENT_ID`. This is currently EXPERIMENTAL, and prohibited by the OEWA because it does not use `oewa2.js`.
 [/tip]
 
 ### Oracle Infinity Analytics
@@ -340,20 +448,20 @@ Type attribute value: `permutive`
 
 Adds support for Permutive event collection. Additionally, the following `vars` must be defined:
 
-- `namespace`: your Permutive AMP namespace
-- `key`: your Permutive public API key
+-   `namespace`: your Permutive AMP namespace
+-   `key`: your Permutive public API key
 
 Use `extraUrlParams` to add additional event properties. Full configuration details can be found at [support.permutive.com](http://support.permutive.com).
 
-### Pistats
-
-Type attribute value: `piStats`
-
 ### Piano
 
 Type attribute value: `piano`
 
-Adds support for Piano. Configuration details can be found at [vx.piano.io](http://vx.piano.io/javascript-tracking-amp).
+<!--
+(The following link 404s, it's unclear whether vendor is still supported or if docs are now private.)
+
+Adds support for Piano. Configuration details can be found at `http://vx.piano.io/javascript-tracking-amp`
+-->
 
 ### Pinpoll
 
@@ -361,18 +469,32 @@ Type attribute value: `pinpoll`
 
 Adds support for Pinpoll. Configuration details can be found at [pinpoll.com](https://pinpoll.com/).
 
+### Pistats
+
+Type attribute value: `piStats`
+
+### Piwik PRO Analytics Suite
+
+Type attribute value: `ppasanalytics`
+
+Adds support for Piwik PRO Analytics Suite. Configuration details can be found at [piwik.pro](https://developers.piwik.pro/en/latest/integrations/AMP_integration.html).
+
 ### Pressboard
 
 Type attribute value: `pressboard`
 
-Adds support for Pressboard. Configuration details can be found at [help.pressboard.ca](http://help.pressboard.ca/publisher-resources/getting-started/implementing-google-amp).
+Adds support for Pressboard. Configuration details can be found at [help.pressboardmedia.com](https://help.pressboardmedia.com/implementing-google-amp).
 
 ### Quantcast Measurement
 
 Type attribute value: `quantcast`
 
+<!-- markdown-link-check-disable -->
+
 Adds support for Quantcast Measurement. More details for adding Quantcast Measurement can be found at [quantcast.com](https://www.quantcast.com/help/guides/)
 
+<!-- markdown-link-check-enable -->
+
 ### Rakam
 
 Type attribute value: `rakam`
@@ -390,7 +512,7 @@ Type attribute value: `retargetly`
 Type attribute value: `rudderstack`
 
 Adds support for RudderStack page views and events.
-Find out more on the implementation check our [documentation](https://docs.rudderstack.com/sdk-integration-guide/getting-started-with-javascript-sdk/amp-analytics).
+Find out more on the implementation check our documentation at [docs.rudderstack.com](https://docs.rudderstack.com/rudderstack-sdk-integration-guides/amp-analytics).
 
 ### Segment
 
@@ -399,33 +521,43 @@ Type attribute value: `segment`
 Adds support for segment page views and events.
 To see the full list of fields that you can send, see [Segment Spec](https://segment.com/docs/spec/).
 
+### SensorsData
+
+Type attribute value: `sensorsanalytics`
+
+Adds support for Sensors Data. More details for adding Sensors Data support can be found at [sensorsdata.com](https://manual.sensorsdata.cn/sa/latest/web-js-sdk-7548149.html).
+
 ### ShinyStat
 
 Type attribute value: `shinystat`
 
-### SOASTA mPulse
+### Snowplow Analytics
 
-Type attribute value: `mpulse`
+Type attribute value: `snowplow`, `snowplow_v2`
 
-Adds support for [SOASTA mPulse](https://www.soasta.com/mPulse). Configuration details can be found at [docs.soasta.com](http://docs.soasta.com/).
+Adds support for Snowplow Analytics. More details for adding Snowplow Analytics support can be found at [docs.snowplowanalytics.com](https://docs.snowplowanalytics.com/docs/collecting-data/collecting-from-own-applications/google-amp-tracker/).
 
-### SimpleReach
+<!--
+### snowplow_v2 (included above)
 
-Type attribute value: `simplereach`
+Type attribute value: `snowplow_v2`
+-->
 
-Adds support for SimpleReach. Configuration details can be found at `http://docs.simplereach.com/dev-guide/implementation/google-amp-implementation`.
+### subscriptions-propensity
 
-### Snowplow Analytics
+Type attribute value: `subscriptions-propensity`
 
-Type attribute value: `snowplow`, `snowplow_v2`
+### Taboola
 
-Adds support for Snowplow Analytics. More details for adding Snowplow Analytics support can be found at [github.com/snowplow/snowplow/wiki](https://github.com/snowplow/snowplow/wiki/Google-AMP-Tracker).
+Type attribute value: `taboola`
 
-### Rambler/TOP-100
+Adds support for Taboola. More details for adding Taboola support can be found at [Taboola](https://taboola.com).
 
-Type attribute value: `top100`
+### Tail
 
-Adds support for Rambler/TOP-100. Configuration details can be found at [top100.rambler.ru](https://top100.rambler.ru).
+Type attribute value: `tail`
+
+Adds support for Tail. More details for adding Tail support can be found at [tail.digital](https://tail.digital).
 
 ### TEA Analytics
 
@@ -439,6 +571,12 @@ Type attribute value: `tealiumcollect`
 
 Adds support for Tealium Collect. More details for adding Tealium Collect support can be found at [docs.tealium.com](https://docs.tealium.com/platforms/amp/install/).
 
+### Rambler/TOP-100
+
+Type attribute value: `top100`
+
+Adds support for Rambler/TOP-100. Configuration details can be found at [top100.rambler.ru](https://top100.rambler.ru).
+
 ### Top.Mail.Ru
 
 Type attribute value: `topmailru`
@@ -449,7 +587,7 @@ Adds support for Top.Mail.Ru. Configuration details can be found at [Top.Mail.Ru
 
 Type attribute value: `treasuredata`
 
-Adds support for Treasure Data. Configuration details can be found at [treasuredata.com](https://docs.treasuredata.com/articles/javascript-sdk-google-amp).
+Adds support for Treasure Data. Configuration details can be found at [docs.treasuredata.com](https://docs.treasuredata.com/display/public/INT/Google+Accelerated+Mobile+Pages+AMP).
 
 ### Umeng+ Analytics
 
@@ -465,20 +603,26 @@ Type attribute value: `upscore`
 
 Type attribute value: `vponanalytics`
 
-Adds support for Vpon Vpon Analytics. Configuration details can be found at [Vpon Analytics](https://cmp.vpadn.com/dmp/doc/amp_analytics.html).
+Adds support for Vpon Analytics. Configuration details can be found at [Vpon Analytics](https://cmp.vpadn.com/dmp/doc/amp_analytics.html).
 
 ### Webengage
 
-Type attribute `webengage`
+Type attribute value: `webengage`
+
+<!--
+### webtrekk (deprecated, see below)
+
+Type attribute value: `webtrekk`
+-->
 
 ### Webtrekk
 
-The attribute value ~~`webtrekk`~~ is deprecated (will remove on 31/12/2018) - use `webtrekk_v2` instead
+Type attribute value: `webtrekk_v2`
 
-Adds support for Webtrekk. Configuration details can be found at [supportcenter.webtrekk.com](https://supportcenter.webtrekk.com/en/public/amp-analytics.html).
+[tip type="important"]
 
-### Yandex Metrica
+<span style="text-decoration: line-through;">`webtrekk`</span> is deprecated. **Use `webtrekk_v2` instead.**
 
-Type attribute value: `metrika`
+[/tip]
 
-Adds support for Yandex Metrica. Configuration details can be found at [Yandex Support](https://yandex.com/support/metrica/code/install-counter-amp.xml).
+Adds support for Webtrekk. Configuration details can be found at [supportcenter.webtrekk.com](https://supportcenter.webtrekk.com/en/public/amp-analytics.html).
diff --git a/extensions/amp-analytics/integrating-analytics.md b/extensions/amp-analytics/integrating-analytics.md
index 0080cc75ff030..01925b9d18be8 100644
--- a/extensions/amp-analytics/integrating-analytics.md
+++ b/extensions/amp-analytics/integrating-analytics.md
@@ -8,33 +8,31 @@ If you operate a software-as-a-service tool for publishers to better understand
 
 Before you can add your analytics service to AMP HTML runtime, you may need to:
 
-- Identify the kinds of [variables](analytics-vars.md) and [requests](amp-analytics.md#requests) you'll need in an AMP HTML document for your analytics service.
-- Determine if the batching plugin function is required to construct the final url if using requests with batching behavior.
-- Identify the triggers that result in analytics requests being sent from a page that would be relevant for your service.
-- Consider if and how you will [track users across](https://github.com/ampproject/amphtml/blob/master/spec/amp-managing-user-state.md) first-party and third-party AMP contexts.
-- Determine how your analytics dashboard handles AMP traffic.
-- Identify any missing functionality in `amp-analytics`, and [file requests](https://github.com/ampproject/amphtml/issues/new) for needed features.
-- AMP Analytics sends its variables to a preconfigured endpoint. If you do not already have an existing endpoint, review [this sample](https://github.com/ampproject/amp-publisher-sample#amp-analytics-sample) for an overview on how to build one.
-  - For all transport types except `iframe`, variables are sent as query string parameters in a HTTPS request.
-  - For the `iframe` transport type, an iframe is created and variables are sent to it via `window.postMessage`. In this case, the message need not be a URL. This option is available only to MRC-accredited vendors.
-- Consider how integration with `amp-analytics` may impact any policies (particularly your privacy policy) or agreements you may have.
+-   Identify the kinds of [variables](analytics-vars.md) and [requests](amp-analytics.md#requests) you'll need in an AMP HTML document for your analytics service.
+-   Identify the triggers that result in analytics requests being sent from a page that would be relevant for your service.
+-   Consider if and how you will [track users across](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-managing-user-state.md) first-party and third-party AMP contexts.
+-   Determine how your analytics dashboard handles AMP traffic.
+-   Identify any missing functionality in `amp-analytics`, and [file requests](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Feature+Request&template=feature-request.yml) for needed features.
+-   AMP Analytics sends its variables to a preconfigured endpoint. If you do not already have an existing endpoint, review [this sample](https://github.com/ampproject/amp-publisher-sample#amp-analytics-sample) for an overview on how to build one.
+    -   For all transport types except `iframe`, variables are sent as query string parameters in a HTTPS request.
+    -   For the `iframe` transport type, an iframe is created and variables are sent to it via `window.postMessage`. In this case, the message need not be a URL. This option is available only to MRC-accredited vendors.
+-   Consider how integration with `amp-analytics` may impact any policies (particularly your privacy policy) or agreements you may have.
 
 ## Adding your configuration to the AMP HTML runtime
 
-1. Create an [Intent-To-Implement issue](../../CONTRIBUTING.md#contributing-features) stating that you'll be adding your analytics service's configuration to AMP HTML's runtime. Be sure to include **cc @ampproject/wg-analytics** in your description.
+1. Create an [Intent-To-Implement issue](../../docs/contributing.md#contributing-features) stating that you'll be adding your analytics service's configuration to AMP HTML's runtime. Be sure to include **cc @ampproject/wg-analytics** in your description.
 1. Develop a patch that implements the following:
-   1. A new configuration json file `${vendorName}.json` in the vendors [folder](https://github.com/ampproject/amphtml/tree/master/extensions/amp-analytics/0.1/vendors) including any options above and beyond the default, such as:
-      1. `"vars": {}` for additional default variables.
-      1. `"requests": {}` for requests that your service will use.
-      1. `"optout":` if needed. We currently don't have a great opt-out system, so please reach out to help us design one that works well for you.
-      1. `"warningMessage":` if needed. Displays warning information from the vendor (such as deprecation or migration) in the console.
-   1. If you are using iframe transport, also add a new line to ANALYTICS_IFRAME_TRANSPORT_CONFIG in iframe-transport-vendors.js containing `"*vendor-name*": "*url*"`
-   1. An example in the [examples/analytics-vendors.amp.html](../../examples/analytics-vendors.amp.html).
-      reference.
-   1. A test in the [extensions/amp-analytics/0.1/test/vendor-requests.json
-      ](../../extensions/amp-analytics/0.1/test/vendor-requests.json) file.
-   1. Add your analytics service to the supported vendors list in the [extensions/amp-analytics/0.1/analytics-vendors-list.md](./analytics-vendors-list.md) file. Include the type, description, and link to your usage documentation.
-1. If a new batch plugin if required. Please refer to [Add Batch Plugin](#add-batch-plugin) for instructions.
+    1. A new configuration json file `${vendorName}.json` in the vendors [folder](https://github.com/ampproject/amphtml/tree/main/extensions/amp-analytics/0.1/vendors) including any options above and beyond the default, such as:
+        1. `"vars": {}` for additional default variables.
+        1. `"requests": {}` for requests that your service will use.
+        1. `"optout":` if needed. We currently don't have a great opt-out system, so please reach out to help us design one that works well for you.
+        1. `"warningMessage":` if needed. Displays warning information from the vendor (such as deprecation or migration) in the console.
+    1. If you are using iframe transport, also add a new line to ANALYTICS_IFRAME_TRANSPORT_CONFIG in iframe-transport-vendors.js containing `"*vendor-name*": "*url*"`
+    1. An example in the [examples/analytics-vendors.amp.html](../../examples/analytics-vendors.amp.html).
+       reference.
+    1. A test in the [extensions/amp-analytics/0.1/test/vendor-requests.json
+       ](../../extensions/amp-analytics/0.1/test/vendor-requests.json) file.
+    1. Add your analytics service to the supported vendors list in the [extensions/amp-analytics/0.1/analytics-vendors-list.md](./analytics-vendors-list.md) file. Include the type, description, and link to your usage documentation.
 1. Test the new example you put in [examples/analytics-vendors.amp.html](../../examples/analytics-vendors.amp.html) to ensure the hits from the example are working as expected. For example, the data needed is being collected and displayed in your analytics dashboard.
 1. Submit a Pull Request with this patch, referencing the Intent-To-Implement issue.
 1. Update your service's usage documentation and inform your customers.
@@ -44,8 +42,8 @@ Before you can add your analytics service to AMP HTML runtime, you may need to:
 
 Tag management services have two options for integrating with AMP Analytics:
 
-- **Endpoint approach:** Acting as the an additional endpoint for `amp-analytics`, and conducting marketing management in the backend.
-- **Config approach:** Conducting tag management via a dynamically generated JSON config file unique to each publisher.
+-   **Endpoint approach:** Acting as the an additional endpoint for `amp-analytics`, and conducting marketing management in the backend.
+-   **Config approach:** Conducting tag management via a dynamically generated JSON config file unique to each publisher.
 
 The endpoint approach is the same as the standard approach detailed in the previous section. The config approach consists of creating a unique configuration for amp-analytics that is specific to each publisher and includes all of their compatible analytics packages. A publisher would include the configuration using a syntax similar to this:
 
@@ -59,8 +57,8 @@ To take this approach, review the documentation for publishers' integration with
 
 ## Further Resources
 
-- Deep Dive: [Why not just use an iframe?](why-not-iframe.md)
-- Deep Dive: [Managing non-authenticated user state with AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-managing-user-state.md)
-- [amp-analytics sample](https://github.com/ampproject/amp-publisher-sample#amp-analytics-sample)
-- [amp-analytics](https://amp.dev/documentation/components/amp-analytics) reference documentation
-- [amp-analytics variables](analytics-vars.md) reference documentation
+-   Deep Dive: [Why not just use an iframe?](why-not-iframe.md)
+-   Deep Dive: [Managing non-authenticated user state with AMP](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-managing-user-state.md)
+-   [amp-analytics sample](https://github.com/ampproject/amp-publisher-sample#amp-analytics-sample)
+-   [amp-analytics](https://amp.dev/documentation/components/amp-analytics) reference documentation
+-   [amp-analytics variables](analytics-vars.md) reference documentation
diff --git a/extensions/amp-analytics/linker-id-forwarding.md b/extensions/amp-analytics/linker-id-forwarding.md
index 6b9c8fc1edaf3..1b015c72a3dc1 100644
--- a/extensions/amp-analytics/linker-id-forwarding.md
+++ b/extensions/amp-analytics/linker-id-forwarding.md
@@ -19,11 +19,11 @@ This document outlines the configuration options that will determine in which co
 }
 ```
 
-- `paramName` - This user defined name determines the name of the query parameter appended to the links.
-- `ids` - An object containing key-value pairs that is partially encoded and passed along in the param.
-- `proxyOnly` - (optional) Flag indicating whether the links should only be appended on pages served on a proxy origin. Defaults to `true`.
-- `destinationDomains` - (optional) Links will be decorated if their domains are included in this array. Defaults to [`canonical`](https://github.com/ampproject/amphtml/blob/3b0feadab3b9b12ddb80edc9a30f959087134905/spec/amp-html-format.md#canon) and `source` domains. A link matching the exact same hostname will not be decorated unless specified in this array.
-- `enabled` - Publishers must explicity set this to `true` to opt-in to using this feature.
+-   `paramName` - This user defined name determines the name of the query parameter appended to the links.
+-   `ids` - An object containing key-value pairs that is partially encoded and passed along in the param.
+-   `proxyOnly` - (optional) Flag indicating whether the links should only be appended on pages served on a proxy origin. Defaults to `true`.
+-   `destinationDomains` - (optional) Links will be decorated if their domains are included in this array. Defaults to [`canonical`](https://github.com/ampproject/amphtml/blob/3b0feadab3b9b12ddb80edc9a30f959087134905/spec/amp-html-format.md#canon) and `source` domains. A link matching the exact same hostname will not be decorated unless specified in this array. Links will never be decorated when the window host matches the link host.
+-   `enabled` - Publishers must explicitly set this to `true` to opt-in to using this feature.
 
 This linker uses this configuration to generate a string in this structure: `<paramName>=<version>*<checkSum>*<idName1>*<idValue1>*<idName2>*<idValue2>...` For more details see [Linker Param Format](./linker-id-receiving.md#Format)
 
@@ -61,7 +61,7 @@ An example of a config that grants more granular control may look like the examp
 }
 ```
 
-In this example configuration, the parameter would be appendend to any outgoing links matching the `source` or `canonical` domains that are not an exact hostname match. This is because the `destinationDomains` entry has been omitted and this is the default behavior. The example has `proxyOnly` set to `false`, this overrides the default behavior and indicates that the linker should manage outgoing links in all contexts this amp page might be served in. Finally, we have set `enabled` to be `true`. This is necessary to tell the runtime that we would like to enable this linker configuration.
+In this example configuration, the parameter would be appended to any outgoing links matching the `source` or `canonical` domains that are not an exact hostname match. This is because the `destinationDomains` entry has been omitted and this is the default behavior. The example has `proxyOnly` set to `false`, this overrides the default behavior and indicates that the linker should manage outgoing links in all contexts this amp page might be served in. Finally, we have set `enabled` to be `true`. This is necessary to tell the runtime that we would like to enable this linker configuration.
 
 #### Destination Domain Matching
 
@@ -88,7 +88,7 @@ For example: you may have a site `example.com` that links to `a.example.com`, `b
 "destinationDomains": ["*.example.com"]
 ```
 
-Using this configuration links to `a.example.com`, `b.example.com` and `a.b.example.com` will all be decorated. Similarily, you may want to decorate links to `example.co`, `example.co.uk`, and `example.fr`. This can be accomplished using the config below.
+Using this configuration links to `a.example.com`, `b.example.com` and `a.b.example.com` will all be decorated. Similarly, you may want to decorate links to `example.co`, `example.co.uk`, and `example.fr`. This can be accomplished using the config below.
 
 ```json
 "destinationDomains": ["example.*"]
diff --git a/extensions/amp-analytics/linker-id-receiving.md b/extensions/amp-analytics/linker-id-receiving.md
index d3f3eec511b38..6f1b5ad7f9681 100644
--- a/extensions/amp-analytics/linker-id-receiving.md
+++ b/extensions/amp-analytics/linker-id-receiving.md
@@ -12,10 +12,10 @@ The linker param will be formatted in the following structure:
 
 The asterisk `*` is used to seperate each piece of data.
 
-- `paramName` - Name of parameter given in configuration.
-- `version` - The version of the linker used to create the param.
-- `checkSum` - A unique value generated by the linker. Details about how this value is generated are [here](#checksum)
-- `idName1*idValue1` This is where any key value pairs in the `ids` object will be included. The values will be "URL Safe" base64 encoded, while the keys will remain in their raw form.
+-   `paramName` - Name of parameter given in configuration.
+-   `version` - The version of the linker used to create the param.
+-   `checkSum` - A unique value generated by the linker. Details about how this value is generated are [here](#checksum)
+-   `idName1*idValue1` This is where any key value pairs in the `ids` object will be included. The values will be "URL Safe" base64 encoded, while the keys will remain in their raw form.
 
 #### Example
 
@@ -38,9 +38,9 @@ The above config would generate a parameter similar to the following: `linker1=1
 
 There are several parts to this url parameter. First, the name of the param `linker1` matches the name from the configuration above. The param value contains several pieces of data seperated by the `*`delimiter.
 
-- The first value `1` indicates the version number of the linker used.
-- The second value `5epghs` is a [checksum](#checksum) generated by the linker.
-- After that, the two key value pairs given in the `ids` object. The linker has resolved any macros that may exist, base64 encoded them in a url-safe format, and then appended them to the parameter. This results in `cid*YW1wLVNsQjJnZmlpXzExZFdxdFNyM3pUNHc.`, and `uid*MTIzNA..`.
+-   The first value `1` indicates the version number of the linker used.
+-   The second value `5epghs` is a [checksum](#checksum) generated by the linker.
+-   After that, the two key value pairs given in the `ids` object. The linker has resolved any macros that may exist, base64 encoded them in a url-safe format, and then appended them to the parameter. This results in `cid*YW1wLVNsQjJnZmlpXzExZFdxdFNyM3pUNHc.`, and `uid*MTIzNA..`.
 
 #### Checksum
 
@@ -50,11 +50,11 @@ It is generated from the following formula.
 
 `base36(CRC32(fingerprint*timestampRoundedInMin*key1*val1*key2*val2...))`
 
-- `fingerprint` - A semi-unique value for page visitors. Generated by using `User Agent + * + timezone + * + language`.
-- `minutesSinceEpoch` - Time since epoch. Floored to minute resolution.
-- `key1...` - Each key value pair that will be passed along. The key will remain in its raw form, while the value will be url-safe base64 endcoded.
-- `CRC32` - A standard CRC32 implementation.
-- `base36` - The result of the CRC32 algorithm is base36 encoded.
+-   `fingerprint` - A semi-unique value for page visitors. Generated by using `User Agent + * + timezone + * + language`.
+-   `minutesSinceEpoch` - Time since epoch. Floored to minute resolution.
+-   `key1...` - Each key value pair that will be passed along. The key will remain in its raw form, while the value will be url-safe base64 endcoded.
+-   `CRC32` - A standard CRC32 implementation.
+-   `base36` - The result of the CRC32 algorithm is base36 encoded.
 
 You can find all the code for our implementaion in the [linker.js](./0.1/linker.js)
 
@@ -86,18 +86,57 @@ The `enabled` value can be used to override default vendor settings.
 
 ##### Cookie Names
 
-Each key within the `cookies` config object defines the cookie name. It's value needs to be an object containing a single key-value pair. That key should be named `value`, and its value should be the macro that determines the information stored in the cookie.
+Each key within the `cookies` config object defines the cookie name. It's value needs to be an object. The key should be named `value`, and its value should be the macro that determines the information stored in the cookie.
 
-Note: The following key values are reserved, and cannot be used as cookie names. They are ['`referrerDomains`', '`enabled`', '`cookiePath`', '`cookieMaxAge`', '`cookieSecure`', '`cookieDomain`'].
+Note: The following key values are reserved, and cannot be used as cookie names. They are ['`referrerDomains`', '`enabled`', '`cookiePath`', '`cookieMaxAge`', '`cookieSecure`', '`cookieDomain`', '`sameSite`', '`SameSite`', '`secure`'].
 
 ##### Cookie Values
 
 Each cookie to write is defined by an object, where the value is defined by the required `value` field.
 
-Two macros are supported for the `value` field. [`QUERY_PARAM`](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#query-parameter) and [`LINKER_PARAM`](#linker-param).
+Two macros are supported for the `value` field. [`QUERY_PARAM`](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md#query-parameter) and [`LINKER_PARAM`](#linker-param).
 
 If there's error resoving the value, or the value is resolved to empty string. Nothing will be written to the cookie.
 
+##### SameSite Cookies
+
+To specify a SameSite value for a cookie, include a key-value pair where the key is `sameSite` and the value is one of `Strict`, `Lax` or `None`. If `sameSite` is set to `None`, we pair it with the `Secure` attribute as [recommended](https://web.dev/samesite-cookies-explained/#samesitenone-must-be-secure) to prevent the cookie from getting rejected.
+
+There are 2 ways to set SameSite cookies:
+
+1. Set the SameSite attribute for all cookies using the `sameSite` key and value as one of `Strict`, `Lax` or `None` in the `cookies` config object, such as:
+
+```js
+'cookies': {
+  'sameSite': 'Strict',
+  'cookieName1': {
+    'value': 'QUERY_PARAM(example)',
+  },
+  'cookieName2': {
+    'value': 'LINKER_PARAM(exampleParamName, exampleIdName)',
+  },
+}
+```
+
+This will set SameSite=Strict for `cookieName1` and `cookieName2`.
+
+1. Set or override the SameSite attribute using the `sameSite` key on an individual cookie object, such as:
+
+```js
+'cookies': {
+  'sameSite': 'None',
+  'cookieName1': {
+    'value': 'QUERY_PARAM(example)',
+    'sameSite': 'Strict',
+  },
+  'cookieName2': {
+    'value': 'LINKER_PARAM(exampleParamName, exampleIdName)',
+  },
+}
+```
+
+This will set the SameSite=None for `cookieName2` and override `cookieName1` to SameSite=Strict.
+
 ##### LINKER PARAM
 
 `LINKER_PARAM` takes two arguments, the `name` and the `value`. It will verify the checksum and read the `idName1*idValue1` key value pair from the linker param. The `value` ('idValue1' here) will be returned.
diff --git a/extensions/amp-analytics/validator-amp-analytics.protoascii b/extensions/amp-analytics/validator-amp-analytics.protoascii
index 8befc7df0361d..59b3042efcbbf 100644
--- a/extensions/amp-analytics/validator-amp-analytics.protoascii
+++ b/extensions/amp-analytics/validator-amp-analytics.protoascii
@@ -18,7 +18,6 @@
 tags: {  # amp-analytics
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-analytics"
@@ -32,9 +31,9 @@ tags: {  # amp-analytics
 tags: {  # amp-analytics (json)
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   spec_name: "amp-analytics extension .json script"
+  descriptive_name: "amp-analytics extension .json script"
   requires_extension: "amp-analytics"
   mandatory_parent: "AMP-ANALYTICS"
   attrs: {
@@ -50,12 +49,11 @@ tags: {  # amp-analytics (json)
       error_message: "html comments"
     }
   }
-  spec_url: "https://amp.dev/documentation/components/amp-analytics"
+  spec_url: "https://amp.dev/documentation/components/amp-analytics/"
 }
 tags: {  # <amp-analytics>
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "AMP-ANALYTICS"
   requires_extension: "amp-analytics"
   attrs: {
@@ -68,5 +66,5 @@ tags: {  # <amp-analytics>
     disallowed_value_regex: "__amp_source_origin"
   }
   attrs: { name: "type" }
-  spec_url: "https://amp.dev/documentation/components/amp-analytics"
+  spec_url: "https://amp.dev/documentation/components/amp-analytics/"
 }
diff --git a/extensions/amp-analytics/why-not-iframe.md b/extensions/amp-analytics/why-not-iframe.md
index 0739301f42d06..f33fb990279f6 100644
--- a/extensions/amp-analytics/why-not-iframe.md
+++ b/extensions/amp-analytics/why-not-iframe.md
@@ -2,19 +2,19 @@
 
 AMP uses the AMP Analytics system instead of relegating analytics providers to a separate iframe. This was done for a number of reasons, including:
 
-- **Performance:** Ultimately, the major driver is performance. By centralizing client-side code, AMP Analytics is able to remove duplication of effort in collecting data points between analytics providers, thus improving runtime performance.
-- **Ability to read and set cookies:** Relegating analytics to a cross origin amp-iframe means that this amp-iframe may not be able to set cookies, as it's in a third-party context.
-- **Future-proofing Configuration:** Because elements of vendor-specific configuration are able to be abstracted away in a centralized GitHub repo, and not on each AMP document, revisions to configuration do not require revisions to publisher pages.
-- **More features:** By centralizing the client-side code, unique mobile-first functionality could be added to `amp-analytics`, such as:
-- Events related to paywall usage
-- Events related to advertising viewability
-- Integrations with other amp-tags for user interactions (social actions, video player interactions etc)
-- **Limitations in Sandboxing:** Because an amp-iframe is in a distinct sandbox from the article, it is unaware of click events, scroll events, and data pertaining to the AMP page or the window it's viewed in (browser width/height).
-- **Latency/Reliability:** Iframes can have several limitations compared to scripts running in the main document. Iframe may not get rendered in a timely fashion or it may be slower to load. This will result in inaccurate data.
+-   **Performance:** Ultimately, the major driver is performance. By centralizing client-side code, AMP Analytics is able to remove duplication of effort in collecting data points between analytics providers, thus improving runtime performance.
+-   **Ability to read and set cookies:** Relegating analytics to a cross origin amp-iframe means that this amp-iframe may not be able to set cookies, as it's in a third-party context.
+-   **Future-proofing Configuration:** Because elements of vendor-specific configuration are able to be abstracted away in a centralized GitHub repo, and not on each AMP document, revisions to configuration do not require revisions to publisher pages.
+-   **More features:** By centralizing the client-side code, unique mobile-first functionality could be added to `amp-analytics`, such as:
+-   Events related to paywall usage
+-   Events related to advertising viewability
+-   Integrations with other amp-tags for user interactions (social actions, video player interactions etc)
+-   **Limitations in Sandboxing:** Because an amp-iframe is in a distinct sandbox from the article, it is unaware of click events, scroll events, and data pertaining to the AMP page or the window it's viewed in (browser width/height).
+-   **Latency/Reliability:** Iframes can have several limitations compared to scripts running in the main document. Iframe may not get rendered in a timely fashion or it may be slower to load. This will result in inaccurate data.
 
 The disadvantages of this approach are:
 
-- **Fewer data points (initially):** Initially, the `amp-analytics` extension's data collection will not be as complete as existing systems. This is being addressed by multiple partners in the Github repo. AMP is committed to enhancing the capabilities of amp-analytics based on the foundation that’s been built thus far.
-- **Adaption to a new technical approach:** For example, you may use a client-side collection technique that needs to be substituted for a server-side solution.
+-   **Fewer data points (initially):** Initially, the `amp-analytics` extension's data collection will not be as complete as existing systems. This is being addressed by multiple partners in the Github repo. AMP is committed to enhancing the capabilities of amp-analytics based on the foundation that’s been built thus far.
+-   **Adaption to a new technical approach:** For example, you may use a client-side collection technique that needs to be substituted for a server-side solution.
 
 If this is insufficient, MRC-accredited vendors may still use an embedded iframe. This is discussed in the [amp-analytics documentation](amp-analytics.md). Note that the cross-domain frame is loaded after the creative due to AMP’s prioritization constraints for cross-domain iframes, which may lead to ping loss. Should the previously-existing solution (beacon, image, and/or xhrpost) meet your needs, it is recommended that it be used.
diff --git a/extensions/amp-anim/0.1/amp-anim.js b/extensions/amp-anim/0.1/amp-anim.js
index 4a7993fd49dea..47205b27615cb 100644
--- a/extensions/amp-anim/0.1/amp-anim.js
+++ b/extensions/amp-anim/0.1/amp-anim.js
@@ -18,6 +18,10 @@ import * as st from '../../../src/style';
 import {dev} from '../../../src/log';
 import {guaranteeSrcForSrcsetUnsupportedBrowsers} from '../../../src/utils/img';
 import {isLayoutSizeDefined} from '../../../src/layout';
+import {
+  observeWithSharedInOb,
+  unobserveWithSharedInOb,
+} from '../../../src/viewport-observer';
 import {propagateObjectFitStyles} from '../../../src/style';
 
 const TAG = 'amp-anim';
@@ -40,9 +44,6 @@ export class AmpAnim extends AMP.BaseElement {
 
     /** @private {?Element} */
     this.img_ = null;
-
-    /** @private {boolean} */
-    this.hasLoaded_ = false;
   }
 
   /** @override */
@@ -93,37 +94,33 @@ export class AmpAnim extends AMP.BaseElement {
       /* opt_removeMissingAttrs */ true
     );
     guaranteeSrcForSrcsetUnsupportedBrowsers(img);
-    return this.loadPromise(img);
+    return this.loadPromise(img).then(() => {
+      observeWithSharedInOb(this.element, (inViewport) =>
+        this.viewportCallback_(inViewport)
+      );
+    });
   }
 
   /** @override */
   firstLayoutCompleted() {
     // Keep the placeholder: amp-anim is using it to start/stop playing.
-    this.hasLoaded_ = true;
-    this.updateInViewport_();
-  }
-
-  /** @override */
-  viewportCallback(unusedInViewport) {
-    if (!this.hasLoaded_) {
-      // do nothing if element has not laid out.
-      return;
-    }
-    this.updateInViewport_();
   }
 
   /** @override */
   unlayoutCallback() {
+    unobserveWithSharedInOb(this.element);
+    this.viewportCallback_(false);
     // Release memory held by the image - animations are typically large.
     this.img_.src = SRC_PLACEHOLDER;
     this.img_.srcset = SRC_PLACEHOLDER;
-    this.hasLoaded_ = false;
     return true;
   }
 
-  /** @private */
-  updateInViewport_() {
-    const inViewport = this.isInViewport();
+  /**
+   * @param {boolean} inViewport
+   * @private
+   */
+  viewportCallback_(inViewport) {
     this.togglePlaceholder(!inViewport);
     st.toggle(dev().assertElement(this.img_), inViewport);
   }
diff --git a/extensions/amp-anim/0.1/test/validator-amp-anim.out b/extensions/amp-anim/0.1/test/validator-amp-anim.out
index 027fe02b68a40..0f9e085f7877e 100644
--- a/extensions/amp-anim/0.1/test/validator-amp-anim.out
+++ b/extensions/amp-anim/0.1/test/validator-amp-anim.out
@@ -52,7 +52,7 @@ FAIL
 |    <!-- Invalid: Missing src attribute. -->
 |    <amp-anim
 >>   ^~~~~~~~~
-amp-anim/0.1/test/validator-amp-anim.html:52:2 The mandatory attribute 'src' is missing in tag 'amp-anim'. (see https://amp.dev/documentation/components/amp-anim)
+amp-anim/0.1/test/validator-amp-anim.html:52:2 The mandatory attribute 'src' is missing in tag 'amp-anim'. (see https://amp.dev/documentation/components/amp-anim/)
 |      layout="responsive"
 |      height="300"
 |      width="400">
@@ -61,7 +61,7 @@ amp-anim/0.1/test/validator-amp-anim.html:52:2 The mandatory attribute 'src' is
 |    <!-- Invalid: illegal layout. -->
 |    <amp-anim
 >>   ^~~~~~~~~
-amp-anim/0.1/test/validator-amp-anim.html:59:2 The specified layout 'CONTAINER' is not supported by tag 'amp-anim'. (see https://amp.dev/documentation/components/amp-anim)
+amp-anim/0.1/test/validator-amp-anim.html:59:2 The specified layout 'CONTAINER' is not supported by tag 'amp-anim'. (see https://amp.dev/documentation/components/amp-anim/)
 |      layout="container"
 |      height="300"
 |      width="400"
diff --git a/extensions/amp-anim/OWNERS b/extensions/amp-anim/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-anim/OWNERS
+++ b/extensions/amp-anim/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-anim/amp-anim.md b/extensions/amp-anim/amp-anim.md
index 24f232bcc17b9..915a797b0db43 100644
--- a/extensions/amp-anim/amp-anim.md
+++ b/extensions/amp-anim/amp-anim.md
@@ -26,9 +26,15 @@ limitations under the License.
 
 # amp-anim
 
-## Behavior
+## Usage
 
-The `amp-anim` component is almost identical to the `amp-img` element, but allows the AMP runtime to reduce CPU usage when the animation is off-screen. Like [other elements](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders), it supports an optional `placeholder` child, to display while the `src` file is loading:
+The `amp-anim` component displays a GIF animation with optimized CPU management.
+
+The `amp-anim` component lets the AMP framework reduce the resources it spends
+on the animation when it's off-screen. Otherwise, the behavior of `amp-anim` is
+identical to [`amp-img`](https://amp.dev/documentation/components/amp-img/). You
+can implement a [placeholder](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/)
+element to further optimize `amp-anim`.
 
 ```html
 <amp-anim width="400" height="300" src="my-gif.gif">
@@ -37,69 +43,66 @@ The `amp-anim` component is almost identical to the `amp-img` element, but allow
 </amp-anim>
 ```
 
-In the future, additional functionality, such as animation playback control, could be added.
-
 ## Attributes
 
-### src
+### `src`
 
-Similar to the `src` attribute on the `img` tag. The value must be a URL that
-points to a publicly-cacheable image file. Cache providers and email clients may rewrite these
-URLs when ingesting AMP files to point to a cached version of the image.
+Specifies the URL for a GIF image.
 
 [filter formats="email"]
+In an AMP email, the `src` must point to an absolute `https` URL. Use of
+`amp-anim` in email doesn't allow the following attributes:
 
-In AMP email, this <strong>must</strong> be an absolute URL.
+-   `srcset`
+-   `object-fit`
+-   `object-position`
 
-[/filter] <!-- formats="email" -->
+[/filter]
 
-[filter formats="websites, ads, stories"]
+[filter formats="websites, ads"]
 
-### srcset
+### `srcset`
 
-Same as `srcset` attribute on the `img` tag.
+Specifies the image URL to use in different circumstances. Operates the same as
+the [`srcset` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset)
+on the `img` tag.
 
-[/filter] <!-- formats="websites, ads, stories" -->
+[/filter]
 
-### alt
+### `alt`
 
-A string of alternate text, similar to the `alt` attribute on `img`.
+Provides a string of alternate text for accessibility purposes. Operates the
+same as the [`alt` attribute](https://www.w3schools.com/tags/att_img_alt.asp) on
+the `img` tag.
 
-### attribution
+### `attribution`
 
-A string that indicates the attribution of the image. For example, `attribution="CC courtesy of Cats on Flicker"`.
+Indicates the attribution of the image. For example, `attribution="CC courtesy of Cats on Flicker"`.
 
-### height and width
+### `width` and `height`
 
-An explicit size of the image, which is used by the AMP runtime to determine the aspect ratio without fetching the image.
+Provides the explicit size of the image.
 
 ### Common attributes
 
-This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
-
-[filter formats="email"]
-
-### Invalid AMP email attributes
-
-The AMP for Email spec disallows the use of the following attributes on the AMP email format.
-
-- `srcset`
-- `object-fit`
-- `object-position`
-
-[/filter] <!-- formats="email" -->
+`amp-anim` includes the
+[common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
 ## Styling
 
-`amp-img` can be styled directly via CSS properties. Setting a grey background
-placeholder for example could be achieved via:
+You can directly style `amp-img` with CSS properties. The following example sets
+a grey background placeholder:
 
-```css
-amp-anim {
-  background-color: grey;
-}
+```html
+<style amp-custom>
+      .amp-anim {
+          background-color: grey;
+       }
+</amp style-custom>
 ```
 
 ## Validation
 
-See [amp-anim rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-anim/validator-amp-anim.protoascii) in the AMP validator specification.
+See [`amp-anim` rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-anim/validator-amp-anim.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-anim/validator-amp-anim.protoascii b/extensions/amp-anim/validator-amp-anim.protoascii
index b6656fbfd5634..d842fdec6cc24 100644
--- a/extensions/amp-anim/validator-amp-anim.protoascii
+++ b/extensions/amp-anim/validator-amp-anim.protoascii
@@ -17,7 +17,6 @@
 tags: {  # amp-anim
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-anim"
@@ -31,7 +30,7 @@ tags: {  # amp-anim
 tags: {  # amp-anim
   html_format: AMP4EMAIL
   tag_name: "SCRIPT"
-  spec_name: "amp-anim extension .js script (AMP4EMAIL)"
+  spec_name: "amp-anim extension script (AMP4EMAIL)"
   extension_spec: {
     name: "amp-anim"
     # AMP4EMAIL doesn't allow version: "latest".
@@ -42,7 +41,6 @@ tags: {  # amp-anim
 tags: {  # <amp-anim>
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "AMP-ANIM"
   requires_extension: "amp-anim"
   attrs: { name: "alt" }
@@ -51,7 +49,7 @@ tags: {  # <amp-anim>
   attrs: { name: "object-position" }
   attr_lists: "extended-amp-global"
   attr_lists: "mandatory-src-or-srcset"
-  spec_url: "https://amp.dev/documentation/components/amp-anim"
+  spec_url: "https://amp.dev/documentation/components/amp-anim/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
@@ -73,7 +71,7 @@ tags: {  # <amp-anim>
   attrs: { name: "attribution" }
   attr_lists: "extended-amp-global"
   attr_lists: "mandatory-src-amp4email"
-  spec_url: "https://amp.dev/documentation/components/amp-anim"
+  spec_url: "https://amp.dev/documentation/components/amp-anim/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-animation-polyfill/0.1/amp-animation-polyfill.js b/extensions/amp-animation-polyfill/0.1/amp-animation-polyfill.js
new file mode 100644
index 0000000000000..75372c9edc813
--- /dev/null
+++ b/extensions/amp-animation-polyfill/0.1/amp-animation-polyfill.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Services} from '../../../src/services';
+import {installWebAnimations} from 'web-animations-js/web-animations.install';
+
+/**
+ * Tries to find an existing amp-lightbox-gallery, if there is none, it adds a
+ * default one.
+ * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
+ * @return {!Promise<undefined>}
+ */
+export function install(ampdoc) {
+  installWebAnimations(ampdoc.win);
+}
+Services.extensionsFor(AMP.win).addDocFactory(install);
diff --git a/extensions/amp-animation-polyfill/OWNERS b/extensions/amp-animation-polyfill/OWNERS
new file mode 100644
index 0000000000000..04c3c75bfccd6
--- /dev/null
+++ b/extensions/amp-animation-polyfill/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'ampproject/wg-performance'}],
+    },
+  ],
+}
diff --git a/extensions/amp-animation/0.1/amp-animation.js b/extensions/amp-animation/0.1/amp-animation.js
index e9c73bfd7d375..362cbfd5d893b 100644
--- a/extensions/amp-animation/0.1/amp-animation.js
+++ b/extensions/amp-animation/0.1/amp-animation.js
@@ -14,21 +14,19 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {Builder} from './web-animations';
 import {Pass} from '../../../src/pass';
 import {Services} from '../../../src/services';
 import {WebAnimationPlayState} from './web-animation-types';
 import {WebAnimationService} from './web-animation-service';
-import {clamp} from '../../../src/utils/math';
+import {clamp} from '../../../src/core/math';
+import {dev, userAssert} from '../../../src/log';
 import {getChildJsonConfig} from '../../../src/json';
 import {getDetail, listen} from '../../../src/event-helper';
-import {getFriendlyIframeEmbedOptional} from '../../../src/iframe-helper';
-import {getParentWindowFrameElement} from '../../../src/service';
-import {installWebAnimationsIfNecessary} from './web-animations-polyfill';
-import {isFiniteNumber} from '../../../src/types';
+import {installWebAnimationsIfNecessary} from './install-polyfill';
+import {isFiniteNumber} from '../../../src/core/types';
 import {setInitialDisplay, setStyles, toggle} from '../../../src/style';
-import {userAssert} from '../../../src/log';
 
 const TAG = 'amp-animation';
 
@@ -40,6 +38,9 @@ export class AmpAnimation extends AMP.BaseElement {
     /** @private {boolean} */
     this.triggerOnVisibility_ = false;
 
+    /** @private {boolean} */
+    this.isIntersecting_ = false;
+
     /** @private {boolean} */
     this.visible_ = false;
 
@@ -49,8 +50,8 @@ export class AmpAnimation extends AMP.BaseElement {
     /** @private {boolean} */
     this.triggered_ = false;
 
-    /** @private {?../../../src/friendly-iframe-embed.FriendlyIframeEmbed} */
-    this.embed_ = null;
+    /** @private {!Array<!UnlistenDef>} */
+    this.cleanups_ = [];
 
     /** @private {?JsonObject} */
     this.configJson_ = null;
@@ -79,17 +80,6 @@ export class AmpAnimation extends AMP.BaseElement {
       );
     }
 
-    // TODO(dvoytenko): Remove once we support direct parent visibility.
-    if (trigger == 'visibility') {
-      userAssert(
-        this.element.parentNode == this.element.ownerDocument.body ||
-          this.element.parentNode == ampdoc.getBody(),
-        '%s is only allowed as a direct child of <body> element when trigger' +
-          ' is visibility. This restriction will be removed soon.',
-        TAG
-      );
-    }
-
     this.configJson_ = getChildJsonConfig(this.element);
 
     if (this.triggerOnVisibility_) {
@@ -121,28 +111,24 @@ export class AmpAnimation extends AMP.BaseElement {
     );
 
     // Visibility.
-    const frameElement = getParentWindowFrameElement(this.element, ampdoc.win);
-    const embed = frameElement
-      ? getFriendlyIframeEmbedOptional(frameElement)
-      : null;
-    if (embed) {
-      this.embed_ = embed;
-      this.setVisible_(embed.isVisible());
-      embed.onVisibilityChanged(() => {
-        this.setVisible_(embed.isVisible());
-      });
-      listen(this.embed_.win, 'resize', () => this.onResize_());
-    } else {
-      this.setVisible_(ampdoc.isVisible());
+    this.cleanups_.push(
       ampdoc.onVisibilityChanged(() => {
-        this.setVisible_(ampdoc.isVisible());
-      });
-      this.getViewport().onResize((e) => {
-        if (e.relayoutAll) {
-          this.onResize_();
-        }
-      });
-    }
+        this.setVisible_(this.isIntersecting_ && ampdoc.isVisible());
+      })
+    );
+    const io = new ampdoc.win.IntersectionObserver(
+      (records) => {
+        const {isIntersecting} = records[records.length - 1];
+        this.isIntersecting_ = isIntersecting;
+        this.setVisible_(this.isIntersecting_ && ampdoc.isVisible());
+      },
+      {threshold: 0.001}
+    );
+    io.observe(dev().assertElement(this.element.parentElement));
+    this.cleanups_.push(() => io.disconnect());
+
+    // Resize.
+    this.cleanups_.push(listen(this.win, 'resize', () => this.onResize_()));
 
     // Actions.
     this.registerDefaultAction(
@@ -188,6 +174,13 @@ export class AmpAnimation extends AMP.BaseElement {
     );
   }
 
+  /** @override */
+  detachedCallback() {
+    const cleanups = this.cleanups_.slice(0);
+    this.cleanups_.length = 0;
+    cleanups.forEach((cleanup) => cleanup());
+  }
+
   /**
    * Returns the animation spec.
    * @return {?JsonObject}
@@ -296,10 +289,6 @@ export class AmpAnimation extends AMP.BaseElement {
    * @private
    */
   seekToAction_(invocation) {
-    // The animation will be triggered (in paused state) and seek will happen
-    // regardless of visibility
-    this.triggered_ = true;
-
     let positionObserverData = null;
     if (invocation.event) {
       const detail = getDetail(/** @type {!Event} */ (invocation.event));
@@ -309,6 +298,9 @@ export class AmpAnimation extends AMP.BaseElement {
     }
 
     return this.createRunnerIfNeeded_(null, positionObserverData).then(() => {
+      // The animation will be triggered (in paused state) and seek will happen
+      // regardless of visibility
+      this.triggered_ = true;
       this.pause_();
       this.pausedByAction_ = true;
       // time based seek
@@ -380,7 +372,7 @@ export class AmpAnimation extends AMP.BaseElement {
   onResize_() {
     // Store the previous `triggered` and `pausedByAction` value since
     // `cancel` may reset it.
-    const {triggered_: triggered, pausedByAction_: pausedByAction} = this;
+    const {pausedByAction_: pausedByAction, triggered_: triggered} = this;
 
     // Stop animation right away.
     if (this.runner_) {
@@ -473,21 +465,20 @@ export class AmpAnimation extends AMP.BaseElement {
   createRunner_(opt_args, opt_positionObserverData) {
     // Force cast to `WebAnimationDef`. It will be validated during preparation
     // phase.
-    const configJson = /** @type {!./web-animation-types.WebAnimationDef} */ (this
-      .configJson_);
-    const args = /** @type {?./web-animation-types.WebAnimationDef} */ (opt_args ||
-      null);
+    const configJson = /** @type {!./web-animation-types.WebAnimationDef} */ (
+      this.configJson_
+    );
+    const args = /** @type {?./web-animation-types.WebAnimationDef} */ (
+      opt_args || null
+    );
 
     // Ensure polyfill is installed.
-    installWebAnimationsIfNecessary(this.win);
-
     const ampdoc = this.getAmpDoc();
-    const readyPromise = this.embed_
-      ? this.embed_.whenReady()
-      : ampdoc.whenReady();
-    const hostWin = this.embed_ ? this.embed_.win : this.win;
-    const baseUrl = this.embed_ ? this.embed_.getUrl() : ampdoc.getUrl();
-    return readyPromise.then(() => {
+    const polyfillPromise = installWebAnimationsIfNecessary(ampdoc);
+    const readyPromise = ampdoc.whenReady();
+    const hostWin = this.win;
+    const baseUrl = ampdoc.getUrl();
+    return Promise.all([polyfillPromise, readyPromise]).then(() => {
       const builder = new Builder(
         hostWin,
         this.getRootNode_(),
@@ -504,9 +495,7 @@ export class AmpAnimation extends AMP.BaseElement {
    * @private
    */
   getRootNode_() {
-    return this.embed_
-      ? this.embed_.win.document
-      : this.getAmpDoc().getRootNode();
+    return this.getAmpDoc().getRootNode();
   }
 
   /** @private */
diff --git a/extensions/amp-animation/0.1/install-polyfill.js b/extensions/amp-animation/0.1/install-polyfill.js
new file mode 100644
index 0000000000000..3585911055620
--- /dev/null
+++ b/extensions/amp-animation/0.1/install-polyfill.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright 2016 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.
+ */
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {Services} from '../../../src/services';
+
+/** @type {!WeakMap<!../../../src/service/ampdoc-impl.AmpDoc, !Promise>} */
+const polyfillPromiseMap = new WeakMap();
+
+/**
+ * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
+ * @return {Promise<void>}
+ */
+export function installWebAnimationsIfNecessary(ampdoc) {
+  if (polyfillPromiseMap.has(ampdoc)) {
+    return polyfillPromiseMap.get(ampdoc);
+  }
+
+  const {promise, resolve} = new Deferred();
+  polyfillPromiseMap.set(ampdoc, promise);
+
+  const {win} = ampdoc;
+  const platform = Services.platformFor(win);
+  if (platform.isSafari() && platform.getMajorVersion() < 14) {
+    /*
+      Force Web Animations polyfill on Safari versions before 14.
+      Native Web Animations on WebKit did not respect easing for individual
+      keyframes and break overall timing. See https://go.amp.dev/issue/27762 and
+      https://bugs.webkit.org/show_bug.cgi?id=210526
+      */
+    // Using string access syntax to bypass typecheck.
+    win.Element.prototype['animate'] = null;
+  }
+
+  if (win.Element.prototype['animate']) {
+    // Native Support exists, there is no reason to load the polyfill.
+    resolve();
+    return promise;
+  }
+
+  resolve(
+    Services.extensionsFor(win).installExtensionForDoc(
+      ampdoc,
+      'amp-animation-polyfill'
+    )
+  );
+
+  return promise;
+}
diff --git a/extensions/amp-animation/0.1/parsers/css-expr-ast.js b/extensions/amp-animation/0.1/parsers/css-expr-ast.js
index 4cf19691c7e72..a71c98a035a55 100644
--- a/extensions/amp-animation/0.1/parsers/css-expr-ast.js
+++ b/extensions/amp-animation/0.1/parsers/css-expr-ast.js
@@ -17,7 +17,8 @@
 const FINAL_URL_RE = /^(data|https)\:/i;
 const DEG_TO_RAD = (2 * Math.PI) / 360;
 const GRAD_TO_RAD = Math.PI / 200;
-const VAR_CSS_RE = /\b(calc|min|max|clamp|var|url|rand|index|width|height|num|length|x|y)\(/i;
+const VAR_CSS_RE =
+  /\b(calc|min|max|clamp|var|url|rand|index|width|height|num|length|x|y)\(/i;
 const NORM_CSS_RE = /\d(%|em|rem|vw|vh|vmin|vmax|s|deg|grad)/i;
 const INFINITY_RE = /^(infinity|infinite)$/i;
 const BOX_DIMENSIONS = ['h', 'w', 'h', 'w'];
diff --git a/extensions/amp-animation/0.1/parsers/keyframes-extractor.js b/extensions/amp-animation/0.1/parsers/keyframes-extractor.js
index e534c4506f1d3..11a071c50fddb 100644
--- a/extensions/amp-animation/0.1/parsers/keyframes-extractor.js
+++ b/extensions/amp-animation/0.1/parsers/keyframes-extractor.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {endsWith} from '../../../../src/string';
+import {endsWith} from '../../../../src/core/types/string';
 import {toWin} from '../../../../src/types';
 
 /**
@@ -137,8 +137,9 @@ function isEnabled(win, rule) {
 function buildKeyframes(keyframesRule) {
   const array = [];
   for (let i = 0; i < keyframesRule.cssRules.length; i++) {
-    const keyframeRule = /** @type {!CSSKeyframeRule} */ (keyframesRule
-      .cssRules[i]);
+    const keyframeRule = /** @type {!CSSKeyframeRule} */ (
+      keyframesRule.cssRules[i]
+    );
     const keyframe = {};
     keyframe['offset'] =
       keyframeRule.keyText == 'from'
diff --git a/extensions/amp-animation/0.1/runners/native-web-animation-runner.js b/extensions/amp-animation/0.1/runners/native-web-animation-runner.js
index 8b023a63e1ac5..0b584134d9e72 100644
--- a/extensions/amp-animation/0.1/runners/native-web-animation-runner.js
+++ b/extensions/amp-animation/0.1/runners/native-web-animation-runner.js
@@ -15,7 +15,7 @@
  */
 
 import {AnimationRunner} from './animation-runner';
-import {Observable} from '../../../../src/observable';
+import {Observable} from '../../../../src/core/data-structures/observable';
 import {
   WebAnimationDef,
   WebAnimationPlayState,
diff --git a/extensions/amp-animation/0.1/storybook/Basic.amp.js b/extensions/amp-animation/0.1/storybook/Basic.amp.js
index ede6ede13a7ae..f77d263430012 100644
--- a/extensions/amp-animation/0.1/storybook/Basic.amp.js
+++ b/extensions/amp-animation/0.1/storybook/Basic.amp.js
@@ -17,8 +17,7 @@
 import * as Preact from '../../../../src/preact';
 import {AnimationTemplate} from './template';
 import {select, text, withKnobs} from '@storybook/addon-knobs';
-import {storiesOf} from '@storybook/preact';
-import withAmp from '../../../../build-system/tasks/storybook/amp-env/decorator.js';
+import {withAmp} from '@ampproject/storybook-addon';
 
 const KEYFRAMES_OPTIONS = {
   'rotate': {
@@ -50,30 +49,36 @@ const BLOCK_STYLE = {
   height: '100px',
 };
 
-// eslint-disable-next-line
-storiesOf('Animation', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withAmp)
-  .addParameters({extensions: [{name: 'amp-animation', version: 0.1}]})
-  .add('default', () => {
-    const keyframesOptions = Object.keys(KEYFRAMES_OPTIONS);
-    const keyframesName = select(
-      'Keyframes',
-      keyframesOptions,
-      keyframesOptions[0]
-    );
-    const keyframes = KEYFRAMES_OPTIONS[keyframesName];
-    const easing = text('Easing', 'cubic-bezier(0,0,.21,1)');
-    const spec = {
-      animations: {
-        selector: '#block',
-        easing,
-        keyframes,
-      },
-    };
-    return (
-      <AnimationTemplate spec={spec}>
-        <div id="block" style={BLOCK_STYLE} />
-      </AnimationTemplate>
-    );
-  });
+export default {
+  title: 'Animation',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-animation', version: 0.1}],
+  },
+};
+
+export const Default = () => {
+  const keyframesOptions = Object.keys(KEYFRAMES_OPTIONS);
+  const keyframesName = select(
+    'Keyframes',
+    keyframesOptions,
+    keyframesOptions[0]
+  );
+  const keyframes = KEYFRAMES_OPTIONS[keyframesName];
+  const easing = text('Easing', 'cubic-bezier(0,0,.21,1)');
+  const spec = {
+    animations: {
+      selector: '#block',
+      easing,
+      keyframes,
+    },
+  };
+  return (
+    <AnimationTemplate spec={spec}>
+      <div id="block" style={BLOCK_STYLE} />
+    </AnimationTemplate>
+  );
+};
+
+Default.storyName = 'default';
diff --git a/extensions/amp-animation/0.1/storybook/Random.amp.js b/extensions/amp-animation/0.1/storybook/Random.amp.js
index 33b3bbdcc0174..22416434cdee0 100644
--- a/extensions/amp-animation/0.1/storybook/Random.amp.js
+++ b/extensions/amp-animation/0.1/storybook/Random.amp.js
@@ -16,9 +16,8 @@
 
 import * as Preact from '../../../../src/preact';
 import {AnimationTemplate} from './template';
-import {storiesOf} from '@storybook/preact';
+import {withAmp} from '@ampproject/storybook-addon';
 import {withKnobs} from '@storybook/addon-knobs';
-import withAmp from '../../../../build-system/tasks/storybook/amp-env/decorator.js';
 
 const CONTAINER_STYLE = {
   position: 'absolute',
@@ -41,43 +40,49 @@ const DROP_STYLE = {
   transform: 'translateY(-20vh)',
 };
 
-// eslint-disable-next-line
-storiesOf('Animation', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withAmp)
-  .addParameters({extensions: [{name: 'amp-animation', version: 0.1}]})
-  .add('random', () => {
-    const spec = {
-      selector: '.drop',
-      '--delay': 'rand(0.1s, 5s)',
-      delay: 'var(--delay)',
-      direction: 'normal',
-      subtargets: [
-        {
-          index: 0,
-          direction: 'reverse',
-        },
-        {
-          selector: '.antigrav',
-          direction: 'reverse',
-          '--delay': '0s',
-        },
-      ],
-      keyframes: {
-        transform: 'translateY(120vh)',
+export default {
+  title: 'Animation',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-animation', version: 0.1}],
+  },
+};
+
+export const Random = () => {
+  const spec = {
+    selector: '.drop',
+    '--delay': 'rand(0.1s, 5s)',
+    delay: 'var(--delay)',
+    direction: 'normal',
+    subtargets: [
+      {
+        index: 0,
+        direction: 'reverse',
       },
-    };
-    return (
-      <AnimationTemplate spec={spec}>
-        <div style={CONTAINER_STYLE}>
-          <div class="drop" style={DROP_STYLE}></div>
-          <div class="drop" style={DROP_STYLE}></div>
-          <div class="drop antigrav" style={DROP_STYLE}></div>
-          <div class="drop" style={DROP_STYLE}></div>
-          <div class="drop" style={DROP_STYLE}></div>
-          <div class="drop" style={DROP_STYLE}></div>
-          <div class="drop" style={DROP_STYLE}></div>
-        </div>
-      </AnimationTemplate>
-    );
-  });
+      {
+        selector: '.antigrav',
+        direction: 'reverse',
+        '--delay': '0s',
+      },
+    ],
+    keyframes: {
+      transform: 'translateY(120vh)',
+    },
+  };
+  return (
+    <AnimationTemplate spec={spec}>
+      <div style={CONTAINER_STYLE}>
+        <div class="drop" style={DROP_STYLE}></div>
+        <div class="drop" style={DROP_STYLE}></div>
+        <div class="drop antigrav" style={DROP_STYLE}></div>
+        <div class="drop" style={DROP_STYLE}></div>
+        <div class="drop" style={DROP_STYLE}></div>
+        <div class="drop" style={DROP_STYLE}></div>
+        <div class="drop" style={DROP_STYLE}></div>
+      </div>
+    </AnimationTemplate>
+  );
+};
+
+Random.storyName = 'random';
diff --git a/extensions/amp-animation/0.1/storybook/template.js b/extensions/amp-animation/0.1/storybook/template.js
index 07a8ce5e0db43..472d7fd7aa893 100644
--- a/extensions/amp-animation/0.1/storybook/template.js
+++ b/extensions/amp-animation/0.1/storybook/template.js
@@ -58,7 +58,7 @@ const INFO_STYLE = {
  * @return {!Object}
  */
 export function AnimationTemplate(props) {
-  const {spec, children} = props;
+  const {children, spec} = props;
   const duration = text('Duration', '1s');
   const iterations = number('Iterations', 2);
   const fill = select('Fill', FILL_OPTIONS, 'both');
diff --git a/extensions/amp-animation/0.1/test-e2e/test-amp-animation.js b/extensions/amp-animation/0.1/test-e2e/test-amp-animation.js
index 581752799dc43..020773e3f831b 100644
--- a/extensions/amp-animation/0.1/test-e2e/test-amp-animation.js
+++ b/extensions/amp-animation/0.1/test-e2e/test-amp-animation.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'amp-animation',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-animation/simple.html',
+    fixture: 'amp-animation/simple.html',
     // TODO(powerivq): Reenable for all environments
     environments: 'amp4ads-preset',
   },
@@ -29,7 +28,8 @@ describes.endtoend(
       controller = env.controller;
     });
 
-    it('transparency animation should pause and restart', async () => {
+    // TODO(#33438, wg-components): Fix flakiness
+    it.skip('transparency animation should pause and restart', async () => {
       const cancelBtn = await controller.findElement('#cancelBtn');
       await controller.click(cancelBtn);
 
diff --git a/extensions/amp-animation/0.1/test/test-amp-animation.js b/extensions/amp-animation/0.1/test/test-amp-animation.js
index c5b51b51e6892..bc073e0b0aaf2 100644
--- a/extensions/amp-animation/0.1/test/test-amp-animation.js
+++ b/extensions/amp-animation/0.1/test/test-amp-animation.js
@@ -15,12 +15,42 @@
  */
 
 import {AmpAnimation} from '../amp-animation';
-import {DEFAULT_ACTION} from '../../../../src/action-constants';
+import {DEFAULT_ACTION} from '../../../../src/core/constants/action-constants';
 import {NativeWebAnimationRunner} from '../runners/native-web-animation-runner';
 import {WebAnimationPlayState} from '../web-animation-types';
 
-describes.sandboxed('AmpAnimation', {}, () => {
+describes.sandboxed('AmpAnimation', {}, (env) => {
+  let ioCallbacks;
+
+  beforeEach(() => {
+    ioCallbacks = [];
+  });
+
   function createAnimInWindow(win, attrs, config) {
+    let ioCallback;
+    class IoStub {
+      constructor(callback) {
+        ioCallback = callback;
+        ioCallbacks.push(callback);
+      }
+      observe(target) {
+        const isIntersecting = (config && config.isIntersecting) ?? true;
+        const intersectionRatio =
+          (config && config.intersectionRatio) ?? (isIntersecting ? 1 : 0);
+        ioCallback([
+          {
+            target,
+            isIntersecting,
+            intersectionRatio,
+            boundingClientRect: target.getBoundingClientRect(),
+          },
+        ]);
+      }
+      unobserve() {}
+      disconnect() {}
+    }
+    env.sandbox.stub(win, 'IntersectionObserver').value(IoStub);
+
     const element = win.document.createElement('amp-animation');
     element.setAttribute('id', 'anim1');
     element.setAttribute('layout', 'nodisplay');
@@ -40,7 +70,20 @@ describes.sandboxed('AmpAnimation', {}, () => {
     }
 
     win.document.body.appendChild(element);
-    return element.build().then(() => element.implementation_);
+    return element.buildInternal().then(() => element.getImpl());
+  }
+
+  function updateIntersection(target, intersectionRatio) {
+    ioCallbacks.forEach((callback) => {
+      callback([
+        {
+          target,
+          isIntersecting: intersectionRatio > 0,
+          intersectionRatio,
+          boundingClientRect: target.getBoundingClientRect(),
+        },
+      ]);
+    });
   }
 
   describes.realWin(
@@ -130,11 +173,25 @@ describes.sandboxed('AmpAnimation', {}, () => {
         );
       });
 
-      it('should update visibility from viewer', function* () {
-        const anim = yield createAnim({}, {duration: 1001});
+      it('should update visibility from viewer', async () => {
+        const anim = await createAnim({}, {duration: 1001});
+        expect(anim.visible_).to.be.false;
+
+        viewer.setVisibilityState_('visible');
+        expect(anim.visible_).to.be.true;
+      });
+
+      it('should update visibility from intersection observer', function* () {
+        const anim = yield createAnim(
+          {},
+          {duration: 1001, isIntersecting: false}
+        );
         expect(anim.visible_).to.be.false;
 
         viewer.setVisibilityState_('visible');
+        expect(anim.visible_).to.be.false;
+
+        updateIntersection(anim.element.parentElement, 1);
         expect(anim.visible_).to.be.true;
       });
 
@@ -313,14 +370,9 @@ describes.sandboxed('AmpAnimation', {}, () => {
       it('should resize from ampdoc viewport', function* () {
         const anim = yield createAnim({}, {duration: 1001});
         const stub = env.sandbox.stub(anim, 'onResize_');
-        const viewport = win.__AMP_SERVICES.viewport.obj;
-
-        // No size changes.
-        viewport.resizeObservable_.fire({relayoutAll: false});
-        expect(stub).to.not.be.called;
 
         // Size has changed.
-        viewport.resizeObservable_.fire({relayoutAll: true});
+        win.eventListeners.fire({type: 'resize'});
         expect(stub).to.be.calledOnce;
       });
 
@@ -781,23 +833,14 @@ describes.sandboxed('AmpAnimation', {}, () => {
 
       beforeEach(() => {
         embed = env.embed;
-        embed.setVisible_(false);
       });
 
       function createAnim(attrs, config) {
         return createAnimInWindow(embed.win, attrs, config);
       }
 
-      it('should update visibility from embed', function* () {
-        const anim = yield createAnim({}, {duration: 1001});
-        expect(anim.visible_).to.be.false;
-
-        embed.setVisible_(true);
-        expect(anim.visible_).to.be.true;
-      });
-
       it('should find target in the embed only via selector', function* () {
-        const parentWin = env.ampdoc.win;
+        const {parentWin} = env;
         const embedWin = embed.win;
         const anim = yield createAnim(
           {},
@@ -817,7 +860,7 @@ describes.sandboxed('AmpAnimation', {}, () => {
       });
 
       it('should find target in the embed only via target', function* () {
-        const parentWin = env.ampdoc.win;
+        const {parentWin} = env;
         const embedWin = embed.win;
         const anim = yield createAnim(
           {},
diff --git a/extensions/amp-animation/0.1/test/test-web-animations.js b/extensions/amp-animation/0.1/test/test-web-animations.js
index a85b724915778..0b0203b89c42d 100644
--- a/extensions/amp-animation/0.1/test/test-web-animations.js
+++ b/extensions/amp-animation/0.1/test/test-web-animations.js
@@ -19,7 +19,8 @@ import {Services} from '../../../../src/services';
 import {WebAnimationPlayState} from '../web-animation-types';
 import {closestAncestorElementBySelector} from '../../../../src/dom';
 import {htmlFor, htmlRefs} from '../../../../src/static-template';
-import {isArray, isObject} from '../../../../src/types';
+import {isArray, isObject} from '../../../../src/core/types';
+
 import {poll} from '../../../../testing/iframe';
 import {user} from '../../../../src/log';
 
@@ -1064,8 +1065,9 @@ describes.realWin('MeasureScanner', {amp: 1}, (env) => {
     beforeEach(() => {
       animation2Spec = {};
       animation2 = env.createAmpElement('amp-animation');
-      animation2.implementation_.getAnimationSpec = () => animation2Spec;
-      animation2.signals().signal('built');
+      env.sandbox.stub(animation2, 'getImpl').resolves({
+        getAnimationSpec: () => animation2Spec,
+      });
       animation2.id = 'animation2';
       doc.body.appendChild(animation2);
 
diff --git a/extensions/amp-animation/0.1/web-animation-service.js b/extensions/amp-animation/0.1/web-animation-service.js
index a83f095f77a55..6cb14af4f77e5 100644
--- a/extensions/amp-animation/0.1/web-animation-service.js
+++ b/extensions/amp-animation/0.1/web-animation-service.js
@@ -16,7 +16,7 @@
 import {Builder} from './web-animations';
 import {Services} from '../../../src/services';
 import {WebAnimationBuilderOptionsDef} from './web-animation-types';
-import {installWebAnimationsIfNecessary} from './web-animations-polyfill';
+import {installWebAnimationsIfNecessary} from './install-polyfill';
 
 export class WebAnimationService {
   /**
@@ -35,18 +35,19 @@ export class WebAnimationService {
 
   /**
    * @param {!WebAnimationBuilderOptionsDef} options
-   * @return {!Builder}
+   * @return {!Promise<Builder>}
    */
   createBuilder(options) {
-    installWebAnimationsIfNecessary(this.ampdoc_.win);
-
-    return new Builder(
-      this.ampdoc_.win,
-      this.ampdoc_.getRootNode(),
-      this.ampdoc_.getUrl(),
-      this.vsync_,
-      this.owners_,
-      options
+    return installWebAnimationsIfNecessary(this.ampdoc_).then(
+      () =>
+        new Builder(
+          this.ampdoc_.win,
+          this.ampdoc_.getRootNode(),
+          this.ampdoc_.getUrl(),
+          this.vsync_,
+          this.owners_,
+          options
+        )
     );
   }
 }
diff --git a/extensions/amp-animation/0.1/web-animations-polyfill.js b/extensions/amp-animation/0.1/web-animations-polyfill.js
deleted file mode 100644
index 021bc0929a261..0000000000000
--- a/extensions/amp-animation/0.1/web-animations-polyfill.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-import {Services} from '../../../src/services';
-import {installWebAnimations} from 'web-animations-js/web-animations.install';
-
-const POLYFILLED = '__AMP_WA';
-
-/**
- * Force Web Animations polyfill on Safari.
- * Native Web Animations on WebKit do not respect easing for individual
- * keyframes and break overall timing. See https://go.amp.dev/issue/27762 and
- * https://bugs.webkit.org/show_bug.cgi?id=210526
- * @param {!Window} win
- */
-function forceOnSafari(win) {
-  if (Services.platformFor(win).isSafari()) {
-    // Using string access syntax to bypass typecheck.
-    win.Element.prototype['animate'] = null;
-  }
-}
-
-/**
- * @param {!Window} win
- */
-export function installWebAnimationsIfNecessary(win) {
-  if (!win[POLYFILLED]) {
-    forceOnSafari(win);
-    win[POLYFILLED] = true;
-    installWebAnimations(win);
-  }
-}
diff --git a/extensions/amp-animation/0.1/web-animations.js b/extensions/amp-animation/0.1/web-animations.js
index de366fe7cdb3a..b57a087fa0e54 100644
--- a/extensions/amp-animation/0.1/web-animations.js
+++ b/extensions/amp-animation/0.1/web-animations.js
@@ -16,7 +16,7 @@
 
 import {CssNumberNode, CssTimeNode, isVarCss} from './parsers/css-expr-ast';
 import {
-  InternalWebAnimationRequestDef, // eslint-disable-line no-unused-vars
+  InternalWebAnimationRequestDef,
   WebAnimationDef,
   WebAnimationSelectorDef,
   WebAnimationSubtargetDef,
@@ -40,16 +40,17 @@ import {
   scopedQuerySelectorAll,
 } from '../../../src/dom';
 import {computedStyle, getVendorJsPropertyName} from '../../../src/style';
-import {dashToCamelCase, startsWith} from '../../../src/string';
+import {dashToCamelCase} from '../../../src/core/types/string';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {escapeCssSelectorIdent} from '../../../src/css';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {extractKeyframes} from './parsers/keyframes-extractor';
 import {getMode} from '../../../src/mode';
-import {isArray, isObject, toArray} from '../../../src/types';
+import {isArray, toArray} from '../../../src/core/types/array';
 import {isExperimentOn} from '../../../src/experiments';
 import {isInFie} from '../../../src/iframe-helper';
-import {layoutRectLtwh} from '../../../src/layout-rect';
-import {map} from '../../../src/utils/object';
+import {isObject} from '../../../src/core/types';
+import {layoutRectLtwh} from '../../../src/core/math/layout-rect';
+import {map} from '../../../src/core/types/object';
 import {parseCss} from './parsers/css-expr';
 
 /** @const {string} */
@@ -422,10 +423,10 @@ export class MeasureScanner extends Scanner {
     });
     this.with_(spec, () => {
       const {
-        target_: target,
         index_: index,
-        vars_: vars,
+        target_: target,
         timing_: timing,
+        vars_: vars,
       } = this;
       const promise = otherSpecPromise
         .then((otherSpec) => {
@@ -592,10 +593,10 @@ export class MeasureScanner extends Scanner {
   with_(spec, callback) {
     // Save context.
     const {
-      target_: prevTarget,
       index_: prevIndex,
-      vars_: prevVars,
+      target_: prevTarget,
       timing_: prevTiming,
+      vars_: prevVars,
     } = this;
 
     // Push new context and perform calculations.
@@ -725,13 +726,13 @@ export class MeasureScanner extends Scanner {
     // the previous and new vars.
     const result = map(prevVars);
     for (const k in newVars) {
-      if (startsWith(k, '--')) {
+      if (k.startsWith('--')) {
         result[k] = newVars[k];
       }
     }
     this.css_.withVars(result, () => {
       for (const k in newVars) {
-        if (startsWith(k, '--')) {
+        if (k.startsWith('--')) {
           result[k] = this.css_.resolveCss(newVars[k]);
         }
       }
@@ -770,14 +771,12 @@ export class MeasureScanner extends Scanner {
 
     // Identifier CSS values.
     const easing = this.css_.resolveIdent(newTiming.easing, prevTiming.easing);
-    const direction = /** @type {!WebAnimationTimingDirection} */ (this.css_.resolveIdent(
-      newTiming.direction,
-      prevTiming.direction
-    ));
-    const fill = /** @type {!WebAnimationTimingFill} */ (this.css_.resolveIdent(
-      newTiming.fill,
-      prevTiming.fill
-    ));
+    const direction = /** @type {!WebAnimationTimingDirection} */ (
+      this.css_.resolveIdent(newTiming.direction, prevTiming.direction)
+    );
+    const fill = /** @type {!WebAnimationTimingFill} */ (
+      this.css_.resolveIdent(newTiming.fill, prevTiming.fill)
+    );
 
     // Validate.
     this.validateTime_(duration, newTiming.duration, 'duration');
@@ -853,7 +852,7 @@ class CssContextImpl {
    * @param {!./web-animation-types.WebAnimationBuilderOptionsDef} options
    */
   constructor(win, rootNode, baseUrl, options) {
-    const {scope = null, scaleByScope = false} = options;
+    const {scaleByScope = false, scope = null} = options;
 
     /** @const @private */
     this.win_ = win;
@@ -966,13 +965,13 @@ class CssContextImpl {
     let styles = this.computedStyleCache_[targetId];
     if (!styles) {
       styles = computedStyle(this.win_, target);
-      this.computedStyleCache_[
-        targetId
-      ] = /** @type {!CSSStyleDeclaration} */ (styles);
+      this.computedStyleCache_[targetId] = /** @type {!CSSStyleDeclaration} */ (
+        styles
+      );
     }
 
     // Resolve a var or a property.
-    return startsWith(prop, '--')
+    return prop.startsWith('--')
       ? styles.getPropertyValue(prop)
       : styles[getVendorJsPropertyName(styles, dashToCamelCase(prop))];
   }
@@ -994,7 +993,7 @@ class CssContextImpl {
    * @protected
    */
   withTarget(target, index, callback) {
-    const {currentTarget_: prev, currentIndex_: prevIndex} = this;
+    const {currentIndex_: prevIndex, currentTarget_: prev} = this;
     this.currentTarget_ = target;
     this.currentIndex_ = index;
     const result = callback(target);
@@ -1199,7 +1198,7 @@ class CssContextImpl {
     if (!this.viewportParams_) {
       if (this.scope_ && this.scaleByScope_) {
         const rect = this.scope_./*OK*/ getBoundingClientRect();
-        const {offsetWidth, offsetHeight} = this.scope_;
+        const {offsetHeight, offsetWidth} = this.scope_;
         this.viewportParams_ = {
           offset: {x: rect.x, y: rect.y},
           size: {width: offsetWidth, height: offsetHeight},
@@ -1207,7 +1206,7 @@ class CssContextImpl {
           scaleFactorY: offsetHeight / (rect.height || 1),
         };
       } else {
-        const {innerWidth, innerHeight} = this.win_;
+        const {innerHeight, innerWidth} = this.win_;
         this.viewportParams_ = {
           offset: {x: 0, y: 0},
           size: {width: innerWidth, height: innerHeight},
@@ -1301,7 +1300,7 @@ class CssContextImpl {
    */
   getElementRect_(target) {
     const {offset, scaleFactorX, scaleFactorY} = this.getViewportParams_();
-    const {x, y, width, height} = target./*OK*/ getBoundingClientRect();
+    const {height, width, x, y} = target./*OK*/ getBoundingClientRect();
 
     // This assumes default `transform-origin: center center`
     return layoutRectLtwh(
diff --git a/extensions/amp-animation/OWNERS b/extensions/amp-animation/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-animation/OWNERS
+++ b/extensions/amp-animation/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-animation/amp-animation.md b/extensions/amp-animation/amp-animation.md
index ed2d2388e6ae7..914f8a2bca4c4 100644
--- a/extensions/amp-animation/amp-animation.md
+++ b/extensions/amp-animation/amp-animation.md
@@ -27,9 +27,17 @@ limitations under the License.
 
 ## Usage
 
-The `amp-animation` component defines and runs custom animations and effects. It relies on the [Web Animations API](https://www.w3.org/TR/web-animations/).
-
-An `amp-animation` component defines animations in a JSON structure. The top-level section defines the overarching animation by declaring target element(s), execution conditions, timing properties and [keyframes effect](https://www.w3.org/TR/web-animations/#dom-keyframeeffect-keyframeeffect). The overarching process can contain any arbitrary number of animation parts defined within the `animations` array. Animation parts in the animation's array may have their own target elements, execution conditions, timing properties, and keyframes effects.
+The `amp-animation` component defines and runs custom animations and effects. It
+relies on the [Web Animations API](https://www.w3.org/TR/web-animations/).
+
+An `amp-animation` component defines animations in a JSON structure. The
+top-level section defines the overarching animation by declaring target
+element(s), execution conditions, timing properties and
+[keyframes effect](https://www.w3.org/TR/web-animations/#dom-keyframeeffect-keyframeeffect).
+The overarching process can contain any arbitrary number of animation parts
+defined within the `animations` array. Animation parts in the animation's array
+may have their own target elements, execution conditions, timing properties, and
+keyframes effects.
 
 ```html
 <amp-animation layout="nodisplay">
@@ -61,7 +69,8 @@ An `amp-animation` component defines animations in a JSON structure. The top-lev
 </amp-animation>
 ```
 
-If the animation uses a single element and a single keyframes effect, the configuration is valid as a single animation definition.
+If the animation uses a single element and a single keyframes effect, the
+configuration is valid as a single animation definition.
 
 ```html
 <amp-animation layout="nodisplay">
@@ -75,7 +84,8 @@ If the animation uses a single element and a single keyframes effect, the config
 </amp-animation>
 ```
 
-If the animation uses multiple elements, but does not have a top-level animation, the configuration is valid as an array of definitions.
+If the animation uses multiple elements, but does not have a top-level
+animation, the configuration is valid as an array of definitions.
 
 ```html
 <amp-animation layout="nodisplay">
@@ -97,17 +107,25 @@ If the animation uses multiple elements, but does not have a top-level animation
 </amp-animation>
 ```
 
-Trigger the start of one or multiple animations via the `trigger` attribute or an [action](#actions).
+Trigger the start of one or multiple animations via the `trigger` attribute or
+an [action](#actions).
 
-You may place `amp-animation` controlled via actions anywhere in the DOM. If the animation contains `trigger="visibility"` it must be a direct child of the `<body>`.
+You may place `amp-animation` controlled via actions anywhere in the DOM. If the
+animation contains `trigger="visibility"` it will be triggered when
+the parent element comes into the viewport, and paused when it leaves the
+viewport.
 
 ### Defining effects
 
 #### Keyframes
 
-You must declare effects as keyframes to apply animations using `amp-animations`.
+You must declare effects as keyframes to apply animations using
+`amp-animations`.
 
-You may specify keyframes in amp-animation in the same way as defined in MDN's [Keyframe Formats](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats). You may also reference the @keyframes name defined as CSS within the `<style amp-custom>` or `<style amp-keyframes>` tag.
+You may specify keyframes in amp-animation in the same way as defined in MDN's
+[Keyframe Formats](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats).
+You may also reference the `@keyframes` name defined as CSS within the
+`<style amp-custom>` or `<style amp-keyframes>` tag.
 
 Some typical examples of keyframes definitions are below.
 
@@ -119,7 +137,8 @@ Shorthand object-form "to" format specifies the final state at 100%:
 }
 ```
 
-Shorthand object-form "from-to" format specifies the starting and final states at 0 and 100%:
+Shorthand object-form "from-to" format specifies the starting and final states
+at 0 and 100%:
 
 ```text
 {
@@ -130,7 +149,8 @@ Shorthand object-form "from-to" format specifies the starting and final states a
 }
 ```
 
-Shorthand object-form "value-array" format specifies multiple values for starting, final states and multiple (equal-spaced) offsets:
+Shorthand object-form "value-array" format specifies multiple values for
+starting, final states and multiple (equal-spaced) offsets:
 
 ```text
 {
@@ -141,7 +161,8 @@ Shorthand object-form "value-array" format specifies multiple values for startin
 }
 ```
 
-The array-form specifies keyframes. Offsets are assigned automatically at 0, 100% and spaced evenly in-between:
+The array-form specifies keyframes. Offsets are assigned automatically at 0,
+100% and spaced evenly in-between:
 
 ```text
 {
@@ -199,87 +220,141 @@ Using the `@keyframes` CSS rule:
 </amp-animation>
 ```
 
-Most CSS `@keyframes` match the JSON inline keyframes definition in the [Web Animations spec](https://www.w3.org/TR/web-animations/#processing-a-keyframes-argument) with the following nuances:
+Most CSS `@keyframes` match the JSON inline keyframes definition in the
+[Web Animations spec](https://www.w3.org/TR/web-animations/#processing-a-keyframes-argument)
+with the following nuances:
+
+-   You may need vendor prefixes, such as `@-ms-keyframes {}` or
+    `-moz-transform` for broad-platform support. Vendor prefixes are not needed
+    and not allowed in the JSON format, but in CSS they could be necessary.
+
+-   In unsupported platforms, `amp-animation`'s polyfills will fail when using
+    `calc()` and `var()` with keyframes specified in CSS. Use fallback values in
+    CSS to avoid this.
+
+-   CSS extensions such as `width()`, `height()`, `x()`, `y()`, `num()`,
+    `rand()`, `index()`, and `length()` are not available to `@keyframes`.
+
+##### On `prefers-reduced-motion`
+
+Oftentimes, a running animation will finalize by putting an element in a visible state, and initial CSS will hide the element to depend on the animation finalizing later.
+
+Users may configure their devices to [use reduced animation](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). With this option, animations will not run at all. In this case, you need to disable CSS properties that depend on an animation runnning later.
 
-- You may need vendor prefixes, such as `@-ms-keyframes {}` or `-moz-transform` for broad-platform support. Vendor prefixes are not needed and not allowed in the JSON format, but in CSS they could be necessary.
-- In unsupported platforms, `amp-animation`'s pollyfills will fail when using calc() and var() with keyframes specified in CSS. Use fallback values in CSS to avoid this.
-- CSS extensions such as `width()`, `height()`, `x()`, `y()`, `num()`, `rand()`, `index()` and `length()` are not available to `@keyframes`.
+You can use a media query for this purpose. In the following example, an `<amp-animation>` would later animate the element into visibility by setting `opacity: 1`. When animations are disabled, the element is always visible:
+
+```html
+<style amp-custom>
+  .my-hidden-element {
+    opacity: 1;
+  }
+  @media not (prefers-reduced-motion) {
+    .my-hidden-element {
+      opacity: 0;
+    }
+  }
+</style>
+<amp-animation layout="nodisplay">
+  <script type="application/json">
+    [
+      {
+        "selector": ".my-hidden-element",
+        "duration": "1s",
+        "keyframes": {"opacity": 1}
+      }
+    ]
+  </script>
+</amp-animation>
+```
 
 ##### Allowed properties for keyframes
 
-The amp-animation component restricts CSS allowable properties to optimize performance. Below is the allow-listed properties:
+The amp-animation component restricts CSS allowable properties to optimize
+performance. Below is the allow-listed properties:
 
-- [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
-- [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
-- [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
-- [`offset-distance`](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance)
-- [`clip-path`](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path). Only supported values are
-  `inset()`, `circle()`, `ellipse()`, and `polygon()`.
+-   [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
+-   [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
+-   [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
+-   [`offset-distance`](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance)
+-   [`clip-path`](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path).
+    Only supported values are `inset()`, `circle()`, `ellipse()`, and
+    `polygon()`.
 
 Use of vendor prefixed CSS properties is neither needed nor allowed.
 
 #### Timing properties
 
-Top-level animation and animation components may contain timing properties. Below is the allowed set of properties:
+Top-level animation and animation components may contain timing properties.
+Below is the allowed set of properties:
 
 <table>
-  <tr>
-    <th class="col-twenty">Property</th>
-    <th class="col-twenty">Type</th>
-    <th class="col-twenty">Default</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td><code>duration</code></td>
-    <td>time</td>
-    <td>0</td>
-    <td>The animation duration. Either a numeric value in milliseconds or a CSS time value, e.g. `2s`.</td>
-  </tr>
-  <tr>
-    <td><code>delay</code></td>
-    <td>time</td>
-    <td>0</td>
-    <td>The delay before animation starts executing. Either a numeric value in milliseconds or a CSS time value, e.g. `2s`.</td>
-  </tr>
-  <tr>
-    <td><code>endDelay</code></td>
-    <td>time</td>
-    <td>0</td>
-    <td>The delay after the animation completes and before it's actually considered to be complete. Either a numeric value in milliseconds or a CSS time value, e.g. `2s`.</td>
-  </tr>
-  <tr>
-    <td><code>iterations</code></td>
-    <td>number or<br>"Infinity" or<br>"infinite"</td>
-    <td>1</td>
-    <td>The number of times the animation effect repeats.</td>
-  </tr>
-  <tr>
-    <td><code>iterationStart</code></td>
-    <td>number/CSS</td>
-    <td>0</td>
-    <td>The time offset at which the effect begins animating.</td>
-  </tr>
-  <tr>
-    <td><code>easing</code></td>
-    <td>string</td>
-    <td>"linear"</td>
-    <td>The <a href="https://www.w3.org/TR/web-animations/#timing-function">timing function</a> used to scale the time to produce easing effects.</td>
-  </tr>
-  <tr>
-    <td><code>direction</code></td>
-    <td>string</td>
-    <td>"normal" </td>
-    <td>One of "normal", "reverse", "alternate" or "alternate-reverse".</td>
-  </tr>
-  <tr>
-    <td><code>fill</code></td>
-    <td>string</td>
-    <td>"none"</td>
-    <td>One of "none", "forwards", "backwards", "both", "auto".</td>
-  </tr>
+  <thead>
+    <tr>
+      <th class="col-twenty">Property</th>
+      <th class="col-twenty">Type</th>
+      <th class="col-twenty">Default</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>duration</code></td>
+      <td>time</td>
+      <td>0</td>
+      <td>The animation duration. Either a numeric value in milliseconds or a
+        CSS time value, e.g. <code>2s</code>.</td>
+    </tr>
+    <tr>
+      <td><code>delay</code></td>
+      <td>time</td>
+      <td>0</td>
+      <td>The delay before animation starts executing. Either a numeric value in
+        milliseconds or a CSS time value, e.g. <code>2s</code>.</td>
+    </tr>
+    <tr>
+      <td><code>endDelay</code></td>
+      <td>time</td>
+      <td>0</td>
+      <td>The delay after the animation completes and before it's actually
+        considered to be complete. Either a numeric value in milliseconds or a
+        CSS time value, e.g. <code>2s</code>.</td>
+    </tr>
+    <tr>
+      <td><code>iterations</code></td>
+      <td>number or<br>"Infinity" or<br>"infinite"</td>
+      <td>1</td>
+      <td>The number of times the animation effect repeats.</td>
+    </tr>
+    <tr>
+      <td><code>iterationStart</code></td>
+      <td>number/CSS</td>
+      <td>0</td>
+      <td>The time offset at which the effect begins animating.</td>
+    </tr>
+    <tr>
+      <td><code>easing</code></td>
+      <td>string</td>
+      <td>"linear"</td>
+      <td>The <a href="https://www.w3.org/TR/web-animations/#timing-function">timing
+        function</a> used to scale the time to produce easing effects.</td>
+    </tr>
+    <tr>
+      <td><code>direction</code></td>
+      <td>string</td>
+      <td>"normal"</td>
+      <td>One of "normal", "reverse", "alternate" or "alternate-reverse".</td>
+    </tr>
+    <tr>
+      <td><code>fill</code></td>
+      <td>string</td>
+      <td>"none"</td>
+      <td>One of "none", "forwards", "backwards", "both", "auto".</td>
+    </tr>
+  </tbody>
 </table>
 
-All timing properties allow either a direct numeric/string values or CSS values. For instance, `1000` or `1s` or `1000m` are all valid values for "duration".
+All timing properties allow either a direct numeric/string values or CSS values.
+For instance, `1000` or `1s` or `1000m` are all valid values for `duration`.
 
 An example of timing properties in JSON:
 
@@ -294,11 +369,13 @@ An example of timing properties in JSON:
 }
 ```
 
-Animation components inherit timing properties specified for the top-level animation.
+Animation components inherit timing properties specified for the top-level
+animation.
 
 #### Variables and calculated expressions
 
-`amp-animation` allows use of `var()`, `calc()`, `min()` and `max()` expressions for timing and keyframes values.
+`amp-animation` allows use of `var()`, `calc()`, `min()`, and `max()`
+expressions for timing and keyframes values.
 
 ```html
 <amp-animation layout="nodisplay">
@@ -316,9 +393,11 @@ Animation components inherit timing properties specified for the top-level anima
 </amp-animation>
 ```
 
-You may declare CSS variables to use for timing and keyframe values via the `var()` expressions.
+You may declare CSS variables to use for timing and keyframe values via
+the `var()` expressions.
 
-CSS variables are available to nested animations, but nested animations may override the variable's value.
+CSS variables are available to nested animations, but nested animations
+may override the variable's value.
 
 ```html
 <amp-animation layout="nodisplay">
@@ -342,11 +421,18 @@ CSS variables are available to nested animations, but nested animations may over
 
 In the example above:
 
-- The nested animation applies the var `--delay` to the delay of `#target1` animation.
-- While `--x` propagates into the nested animation, it is overridden. The ending translate value is `150px`.
-- `--y` is not specified anywhere in the `<amp-animation>` component. It defaults to `0px` if the query does not find it defined as CSS within the `<amp style-custom>` tags.
+-   The nested animation applies the var `--delay` to the delay of
+    `#target1` animation.
 
-Pollyfills apply to both `var()` and `calc()` on supported platforms. As a best practice, include default values for `var()`.
+-   While `--x` propagates into the nested animation, it is overridden.
+    The ending translate value is `150px`.
+
+-   `--y` is not specified anywhere in the `<amp-animation>` component.
+    It defaults to `0px` if the query does not find it defined as CSS
+    within the `<amp style-custom>` tags.
+
+Polyfills apply to both `var()` and `calc()` on supported platforms. As
+a best practice, include default values for `var()`.
 
 ```html
 <amp-animation layout="nodisplay">
@@ -362,17 +448,29 @@ Pollyfills apply to both `var()` and `calc()` on supported platforms. As a best
 </amp-animation>
 ```
 
-Override variables of target elements specified in the `<style amp-custom>` tag by using `--var-name` fields in `amp-animation` component. `var()` expressions first try to resolve values specified within the animation component and then resolve target styles.
+Override variables of target elements specified in the
+`<style amp-custom>` tag by using `--var-name` fields in `amp-animation`
+component. `var()` expressions first try to resolve values specified
+within the animation component and then resolve target styles.
 
 #### CSS extensions
 
-The `amp-animation` component provides the following CSS extensions: `rand()`, `num()`, `width()`, `height()`, `x()` and `y()`. The allowed CSS extensions are valid everywhere where CSS values are usable within the `amp-animation` definition. This includes timing and keyframes values.
+The `amp-animation` component provides the following CSS extensions:
+`rand()`, `num()`, `width()`, `height()`, `x()`, and `y()`. The allowed
+CSS extensions are valid everywhere where CSS values are usable within
+the `amp-animation` definition. This includes timing and keyframes
+values.
 
 ##### CSS `index()` extension
 
-The `index()` function returns an index of the current target element in the animation effect. This is most relevant when animating multiple targets with the same effect using `selector` property. The first target matched by the `selector` will have `index 0`, the second will have `index 1` and so on.
+The `index()` function returns an index of the current target element in
+the animation effect. This is most relevant when animating multiple
+targets with the same effect using `selector` property. The first target
+matched by the `selector` will have `index 0`, the second will have
+`index 1` and so on.
 
-Among other uses, this property can combine with `calc()` expressions to create a staggered effect. For instance:
+Among other uses, this property can combine with `calc()` expressions to
+create a staggered effect. For instance:
 
 ```json
 {
@@ -383,7 +481,8 @@ Among other uses, this property can combine with `calc()` expressions to create
 
 ##### CSS `length()` extension
 
-The `length()` function returns the number of target elements in the animation effect. This is most relevant when combined with `index()`:
+The `length()` function returns the number of target elements in the
+animation effect. This is most relevant when combined with `index()`:
 
 ```json
 {
@@ -404,7 +503,8 @@ The form without arguments returns the random number between 0 and 1.
 }
 ```
 
-The second form has two arguments and returns the random value between these two arguments.
+The second form has two arguments and returns the random value between
+these two arguments.
 
 ```json
 {
@@ -414,17 +514,32 @@ The second form has two arguments and returns the random value between these two
 
 ##### CSS `width()`, `height()`, `x()` and `y()` extensions
 
-The `width()`/`height()` and `x()`/`y()` extensions return the size or coordinates of the animated element or the element specified by the selector. The returned value is in pixels, e.g. `100px`.
+The `width()`/`height()` and `x()`/`y()` extensions return the size or
+coordinates of the animated element or the element specified by the selector.
+The returned value is in pixels, e.g. `100px`.
 
 `amp-animation` supports the following forms:
 
-- `width()`, `height()`, `x()`, `y()` - width/height or coordinates of the animated element.
-- With a selector, such as `width('.selector')` or `x('.selector')` - dimension or coordinate of the element specified by the selector. Any CSS selector is usable. For instance, `height('#container > li')`.
-- With a closest selector, such as `height(closest('.selector'))` or `y(closest('.selector'))` - dimension or coordinate of the element specified by the closest selector.
+-   `width()`, `height()`, `x()`, `y()` - width/height or coordinates of the
+    animated element.
+
+-   With a selector, such as `width('.selector')` or `x('.selector')` - dimension
+    or coordinate of the element specified by the selector. Any CSS selector is
+    usable. For instance, `height('#container > li')`.
 
-The `width()` and `height()` are especially useful for transforms. The `left`, `top` and similar CSS properties that can use `%` values to express animations proportional to container size. However, `transform` property interpretes `%` values differently - as a percent of the selected element. Thus, the `width()` and `height()` can be used to express transform animations in terms of container elements and similar.
+-   With a closest selector, such as `height(closest('.selector'))` or
+    `y(closest('.selector'))` - dimension or coordinate of the element specified
+    by the closest selector.
 
-These functions can be combined with `calc()`, `var()` and other CSS expressions. For instance:
+The `width()` and `height()` are especially useful for transforms. The `left`,
+`top` and similar CSS properties that can use `%` values to express animations
+proportional to container size. However, `transform` property interprets `%`
+values differently - as a percent of the selected element. Thus, the `width()`
+and `height()` can be used to express transform animations in terms of container
+elements and similar.
+
+These functions can be combined with `calc()`, `var()` and other CSS
+expressions. For instance:
 
 ```json
 {
@@ -434,13 +549,15 @@ These functions can be combined with `calc()`, `var()` and other CSS expressions
 
 ##### CSS `num()` extension
 
-The `num()` function returns a number representation of a CSS value. For instance:
+The `num()` function returns a number representation of a CSS value. For
+instance:
 
-- `num(11px)` yields `11`;
-- `num(110ms)` yields `110`;
-- etc.
+-   `num(11px)` yields `11`;
+-   `num(110ms)` yields `110`;
+-   etc.
 
-For instance, the following expression calculates the delay in seconds proportional to the element's width:
+For instance, the following expression calculates the delay in seconds
+proportional to the element's width:
 
 ```json
 {
@@ -450,7 +567,9 @@ For instance, the following expression calculates the delay in seconds proportio
 
 #### Override effects on subtargets
 
-Override timing properties or variables defined in the top-level animation with subtargets. Define subtargets via `subtargets: []` where desired, in the same space as valid `selector`s. Specify a subtarget by index or a CSS selector.
+Override timing properties or variables defined in the top-level animation with
+subtargets. Define subtargets via `subtargets: []` where desired, in the same
+space as valid `selector`s. Specify a subtarget by index or a CSS selector.
 
 ```json
 {
@@ -472,8 +591,15 @@ Override timing properties or variables defined in the top-level animation with
 
 In the example above:
 
-- The top-level animation defaults targets matched by "`.target"` to a delay of `100` and `"--y"` of `100px`. -`"subtargets": []` includes the first target, `"index": 0`. This definition overrides the default delay of `100` to `200`.
-- `"subtargets": []` includes `"selector": ":nth-child(2n+1)"`. This definition overrides the `--y` variable's default value of `100px` to `200px`.
+-   The top-level animation defaults targets matched by `".target"` to a delay
+    of `100` and `"--y"` of `100px`.
+
+-   `"subtargets": []` includes the first target, `"index": 0`. This definition
+    overrides the default delay of `100` to `200`.
+
+-   `"subtargets": []` includes `"selector": ":nth-child(2n+1)"`. This
+    definition overrides the `--y` variable's default value of `100px` to
+    `200px`.
 
 Multiple subtargets can match one target `selector` element.
 
@@ -481,32 +607,55 @@ Multiple subtargets can match one target `selector` element.
 
 SVGs are awesome and we recommend their use for animations!
 
-The `amp-animation` component supports SVG animations with the allowed listed CSS keyframe properties, with the following nuances:
+The `amp-animation` component supports SVG animations with the allowed listed
+CSS keyframe properties, with the following nuances:
+
+-   IE/Edge SVG elements
+    [do not support CSS `transform` properties](https://stackoverflow.com/questions/34434005/svg-transform-property-not-taking-acount-in-ie-edge).
+    While the `transform` animation itself is polyfilled, the initial state
+    defined in a stylesheet is not applied. If the initial transformed state is
+    important on IE/Edge, it's recommended to duplicate it via
+    [SVG `transform` attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform).
 
-- IE/Edge SVG elements [do not support CSS `transform` properties](https://stackoverflow.com/questions/34434005/svg-transform-property-not-taking-acount-in-ie-edge). While the `transform` animation itself is polyfilled, the initial state defined in a stylesheet is not applied. If the initial transformed state is important on IE/Edge, it's recommended to duplicate it via [SVG `transform` attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform).
-- It is impossible to pollyfill `transform-origin` for IE/Edge. For compatibility, use only the default `transform-origin`.
-- Use [CSS `transform-box`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box) to avoid `transform-origin` interpretation problems. See issues for [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=740300), [Safari](https://bugs.webkit.org/show_bug.cgi?id=174285) and [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1379340).
+-   It is impossible to polyfill `transform-origin` for IE/Edge. For
+    compatibility, use only the default `transform-origin`.
+
+-   Use [CSS `transform-box`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box)
+    to avoid `transform-origin` interpretation problems. See issues for
+    [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=740300),
+    [Safari](https://bugs.webkit.org/show_bug.cgi?id=174285), and
+    [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1379340).
 
 ### Compatibility and fallbacks
 
-Use media queries, support conditions and switch statements for platform compatibility and fallback options.
+Use media queries, support conditions and switch statements for platform
+compatibility and fallback options.
 
 #### Media queries
 
-Specify media queries with the `media` property. This property can contain any expression allowed
-for [Window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) API and corresponds to `@media` CSS rule.
+Specify media queries with the `media` property. This property can contain any
+expression allowed for
+[Window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+API and corresponds to `@media` CSS rule.
 
-When specified, the animation component will only execute when the environment supports the specified CSS feature.
+When specified, the animation component will only execute when the environment
+supports the specified CSS feature.
 
 #### Supports condition
 
-Specify supports conditions using the supports property. The support property contains any expression allowed for [CSS.supports](https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports) API and corresponds to `@supports` CSS rule.
+Specify supports conditions using the `supports` property. The `supports`
+property contains any expression allowed for
+[`CSS.supports`](https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports)
+API and corresponds to `@supports` CSS rule.
 
-When specified, the animation component will only execute when the environment supports the specified CSS feature.
+When specified, the animation component will only execute when the environment
+supports the specified CSS feature.
 
 ### Animation `switch` statement
 
-In some cases, you may need to combine conditional animations with an optional default into a single animation. Use the `switch` animation statement to define the conditions.
+In some cases, you may need to combine conditional animations with an optional
+default into a single animation. Use the `switch` animation statement to define
+the conditions.
 
 ```json
 {
@@ -528,9 +677,12 @@ In some cases, you may need to combine conditional animations with an optional d
 }
 ```
 
-The `amp-animation` component evaluates `switch` animation definitions in the defined order. It executes the first animation to match the condition and ignores the rest.
+The `amp-animation` component evaluates `switch` animation definitions in the
+defined order. It executes the first animation to match the condition and
+ignores the rest.
 
-In the example below, the animation runs motion-path animation if supported and falls back to transform:
+In the example below, the animation runs motion-path animation if supported and
+falls back to transform:
 
 ```json
 {
@@ -554,7 +706,10 @@ In the example below, the animation runs motion-path animation if supported and
 
 ### Combine and split animations
 
-Animations defined in `amp-animation` can reference each other. This ability allows combining multiple `amp-animation` declarations into a single animation. Splitting up animations into different `amp-animation` component allows the reuse of smaller animations, while enabling the same effect as nesting.
+Animations defined in `amp-animation` can reference each other. This ability
+allows combining multiple `amp-animation` declarations into a single animation.
+Splitting up animations into different `amp-animation` components allows the
+reuse of smaller animations, while enabling the same effect as nesting.
 
 ```html
 <amp-animation id="anim1" layout="nodisplay">
@@ -577,10 +732,12 @@ Animations defined in `amp-animation` can reference each other. This ability all
 </amp-animation>
 ```
 
-The example animation above combines "anim2" animation as part of "anim1". The "anim2" does not require a `selector` target. In such case, the included animation references its own target.
+The example animation above combines `"anim2"` animation as part of `"anim1"`.
+The `"anim2"` does not require a `selector` target. In such case, the included
+animation references its own target.
 
-Another form allows the including animation to provide the target or multiple targets. In that case, the included
-animation executes for each matched target.
+Another form allows the including animation to provide the target or multiple
+targets. In that case, the included animation executes for each matched target.
 
 ```html
 <amp-animation id="anim1" layout="nodisplay">
@@ -603,9 +760,11 @@ animation executes for each matched target.
 </amp-animation>
 ```
 
-In the example above, "anim2" executes for each matched ".target-class". Variables and timing properties specified int he caller animation pass to the combined animation.
+In the example above, `"anim2"` executes for each matched `".target-class"`.
+Variables and timing properties specified in the caller animation pass to the
+combined animation.
 
-#### Triggering via `on` action
+#### Triggering via on action
 
 For instance:
 
@@ -616,30 +775,68 @@ For instance:
 <button on="tap:anim1.start">Animate</button>
 ```
 
+### Accessibility considerations for animations
+
+If you are using animations to convey meaning or content, make sure that this is also conveyed in some other form for users who may not be able to see those animations. At the most basic level, make sure that your text content conveys the same information as the animation. For instance, if you're using an `<amp-animation>` to illustrate a sequence of steps in a process, make sure that there is also text (either on the same page, or in a linked page) that describes the same sequence of steps in words.
+
+Animations can't usually be paused/stopped by users. This can, depending on the type of animation, its size, and whether it loops/repeats or not, be a minor distraction, or a major problem for certain user groups - particularly, if the animation contains fast strobing color changes. In general, we recommend avoiding the use of large, infinitely repeating animations, unless you are certain that they won't have an adverse impact on users. Consider providing a control to allow users to pause an animation. Consider taking advantage of the [`prefers-reduced-motion`](https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion) [media query](#media-queries), and only having an animation take effect if the user has <em>not</em> indicated a preference for reduced motion/animations.
+
+```html
+<amp-animation ... media="not (prefers-reduced-motion: reduce)">
+  <!-- this animation will only play if the user has *not*
+       expressed a preference for reduced motion -->
+  ...
+</amp-animation>
+```
+
+You can take this further and provide separate, more subtle fallback animations to take effect when `prefers-reduced-motion: reduce` does evaluate to true, or split out smaller animations that should happen in all cases, regardless of the media feature.
+
+```html
+<amp-animation ... media="(prefers-reduced-motion: reduce)">
+  <!-- fallback subtle animation effects that only play if the user
+       has expressed a preference for reduced motion -->
+  ...
+</amp-animation>
+
+<amp-animation ...>
+  <!-- general/common animation effects that will take effect
+       regardless of any user preference for reduced motion -->
+  ...
+</amp-animation>
+```
+
+See [MDN - `prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) and this introductory article on [web.dev - prefers-reduced-motion: Sometimes less movement is more](https://web.dev/prefers-reduced-motion/) for further details.
+
+For animations that are not purely decorative/visual effects, but actually convey information, make sure that any important text and graphical/non-text elements have sufficient color contrast. See [web.dev color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) for an introduction (primarily around text contrast) and [Knowbility: Exploring WCAG 2.1 — 1.4.11 Non‑text Contrast](https://knowbility.org/blog/2018/WCAG21-1411Contrast/) for more details around non-text elements.
+
 ## Attributes
 
-### trigger
+### `trigger`
 
 Determines when the animation should be triggered. This must be set to
-`visibility` so the animation starts when a story page becomes visible and active.
+`visibility` so the animation starts when a story page becomes visible and
+active.
 
-### layout
+### `layout`
 
 Should always be `nodisplay`.
 
-### id [optional]
+### `id` (optional)
 
-The `id` of the animation component. Used to reference the animation and chain a sequence of animations.
+The `id` of the animation component. Used to reference the animation and chain a
+sequence of animations.
 
-## Actions
+## Actions <a name="actions"></a>
 
 ### `start`
 
-Starts the animation is it's not running already. Timing properties and variables. Can specify as action arguments. E.g. `anim1.start(delay=-100, --scale=2)`.
+Starts the animation if it's not running already. Timing properties and
+variables. Can specify as action arguments. E.g. `anim1.start(delay=-100, --scale=2)`.
 
 ### `restart`
 
-Starts the animation or restarts the currently running one. Timing properties and variables. Can specify as action arguments. E.g. `anim1.start(delay=-100, --scale=2)`.
+Starts the animation or restarts the currently running one. Timing properties
+and variables. Can specify as action arguments. E.g. `anim1.start(delay=-100, --scale=2)`.
 
 ### `pause`
 
@@ -655,7 +852,9 @@ Toggles pause/resume actions.
 
 ### `seekTo`
 
-Pauses the animation and seeks to the point of time specified by the `time` argument in milliseconds or `percent` argument as a percentage point in the timeline.
+Pauses the animation and seeks to the point of time specified by the `time`
+argument in milliseconds or `percent` argument as a percentage point in the
+timeline.
 
 ### `reverse`
 
@@ -668,3 +867,12 @@ Finishes the animation.
 ### `cancel`
 
 Cancels the animation.
+
+## amp-story usage
+
+If you want to use `<amp-animation>` with `<amp-story>`, please note that you should use `<amp-story-animation>` instead. More information on how to use it at the [Advanced animations](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/amp-story.md#Advanced-animations) section of the documentation.
+
+## Validation
+
+See [`amp-animation` rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-animation/validator-amp-animation.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-animation/validator-amp-animation.protoascii b/extensions/amp-animation/validator-amp-animation.protoascii
index 477695c94e8a7..0fce911925414 100644
--- a/extensions/amp-animation/validator-amp-animation.protoascii
+++ b/extensions/amp-animation/validator-amp-animation.protoascii
@@ -17,7 +17,6 @@
 tags: {  # amp-animation
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-animation"
@@ -29,7 +28,6 @@ tags: {  # amp-animation
 tags: {  # <amp-animation> (json)
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   spec_name: "amp-animation extension .json script"
   mandatory_parent: "AMP-ANIMATION"
@@ -52,7 +50,6 @@ tags: {  # <amp-animation> (json)
 tags: {  # <amp-animation>
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "AMP-ANIMATION"
   requires_extension: "amp-animation"
   requires: "amp-animation extension .json script"
diff --git a/extensions/amp-apester-media/0.1/amp-apester-media.js b/extensions/amp-apester-media/0.1/amp-apester-media.js
index a31948149b104..6f6db2a8e79fc 100644
--- a/extensions/amp-apester-media/0.1/amp-apester-media.js
+++ b/extensions/amp-apester-media/0.1/amp-apester-media.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 import {CSS} from '../../../build/amp-apester-media-0.1.css';
-import {IntersectionObserverHostApi} from '../../../src/utils/intersection-observer-polyfill';
+import {IntersectionObserver3pHost} from '../../../src/utils/intersection-observer-3p-host';
 import {Services} from '../../../src/services';
 import {addParamsToUrl} from '../../../src/url';
 import {dev, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {
   extractTags,
   getPlatform,
@@ -28,8 +28,13 @@ import {
 } from './utils';
 import {getLengthNumeral, isLayoutSizeDefined} from '../../../src/layout';
 import {handleCompanionAds} from './monetization';
+import {
+  observeWithSharedInOb,
+  unobserveWithSharedInOb,
+} from '../../../src/viewport-observer';
+import {px, setStyles} from '../../../src/style';
 import {removeElement} from '../../../src/dom';
-import {setStyles} from '../../../src/style';
+
 /** @const */
 const TAG = 'amp-apester-media';
 /**
@@ -70,8 +75,6 @@ class AmpApesterMedia extends AMP.BaseElement {
     this.iframe_ = null;
     /** @private {?Element}  */
     this.placeholder_ = null;
-    /** @private {boolean}  */
-    this.ready_ = false;
     /** @private {?number|undefined}  */
     this.width_ = null;
     /** @private {?number|undefined}  */
@@ -92,7 +95,7 @@ class AmpApesterMedia extends AMP.BaseElement {
     this.mediaId_ = null;
     /** @private {!Array<function()>} */
     this.unlisteners_ = [];
-    /** @private {?IntersectionObserverHostApi} */
+    /** @private {?IntersectionObserver3pHost} */
     this.intersectionObserverHostApi_ = null;
   }
 
@@ -112,11 +115,11 @@ class AmpApesterMedia extends AMP.BaseElement {
     return isLayoutSizeDefined(layout);
   }
 
-  /** @override */
-  viewportCallback(inViewport) {
-    if (this.intersectionObserverHostApi_) {
-      this.intersectionObserverHostApi_.onViewportCallback(inViewport);
-    }
+  /**
+   * @param {boolean} inViewport
+   * @private
+   */
+  viewportCallback_(inViewport) {
     if (inViewport && !this.seen_) {
       if (this.iframe_ && this.iframe_.contentWindow) {
         dev().fine(TAG, 'media seen');
@@ -124,9 +127,6 @@ class AmpApesterMedia extends AMP.BaseElement {
         this.iframe_.contentWindow./*OK*/ postMessage('interaction seen', '*');
       }
     }
-    if (this.getPlaceholder() && !this.ready_) {
-      this.togglePlaceholder(inViewport);
-    }
   }
 
   /** @override */
@@ -156,31 +156,16 @@ class AmpApesterMedia extends AMP.BaseElement {
     };
   }
 
-  /** @override */
-  firstLayoutCompleted() {
-    this.viewportCallback(this.isInViewport());
-    // Do not hide placeholder
-  }
-
-  /**
-   * @override
-   */
-  onLayoutMeasure() {
-    if (this.intersectionObserverHostApi_) {
-      this.intersectionObserverHostApi_.fire();
-    }
-  }
-
   /**
    * @return {string}
    **/
   buildUrl_() {
     const {
-      idOrToken,
-      playlist,
-      inative,
       distributionChannelId,
       fallback,
+      idOrToken,
+      inative,
+      playlist,
       tags,
     } = this.embedOptions_;
     const encodedMediaAttribute = encodeURIComponent(
@@ -268,11 +253,10 @@ class AmpApesterMedia extends AMP.BaseElement {
    * @return {!Element}
    */
   constructLoaderImg_() {
-    const img = this.element.ownerDocument.createElement('amp-img');
+    const img = this.element.ownerDocument.createElement('img');
+    img.setAttribute('loading', 'lazy');
     img.setAttribute('src', this.loaderUrl_);
-    img.setAttribute('layout', 'fixed');
-    img.setAttribute('width', '100');
-    img.setAttribute('height', '100');
+    setStyles(img, {'width': px(100), 'height': px(100)});
     return img;
   }
 
@@ -302,14 +286,16 @@ class AmpApesterMedia extends AMP.BaseElement {
         const payload = response['payload'];
         // If it's a playlist we choose a media randomly.
         // The response will be an array.
-        const media = /** @type {!JsonObject} */ (this.embedOptions_.playlist
-          ? payload[Math.floor(Math.random() * payload.length)]
-          : payload);
+        const media = /** @type {!JsonObject} */ (
+          this.embedOptions_.playlist
+            ? payload[Math.floor(Math.random() * payload.length)]
+            : payload
+        );
         const interactionId = media['interactionId'];
         const usePlayer = media['usePlayer'];
         const src = this.constructUrlFromMedia_(interactionId, usePlayer);
         const iframe = this.constructIframe_(src);
-        this.intersectionObserverHostApi_ = new IntersectionObserverHostApi(
+        this.intersectionObserverHostApi_ = new IntersectionObserver3pHost(
           this,
           iframe
         );
@@ -340,8 +326,6 @@ class AmpApesterMedia extends AMP.BaseElement {
                     );
                   }
                 }
-                this.togglePlaceholder(false);
-                this.ready_ = true;
                 let height = 0;
                 if (media && media['data'] && media['data']['size']) {
                   height = media['data']['size']['height'];
@@ -357,6 +341,11 @@ class AmpApesterMedia extends AMP.BaseElement {
               });
             });
           })
+          .then(() => {
+            observeWithSharedInOb(this.element, (inViewport) =>
+              this.viewportCallback_(inViewport)
+            );
+          })
           .catch((error) => {
             dev().error(TAG, 'Display', error);
             return undefined;
@@ -400,6 +389,7 @@ class AmpApesterMedia extends AMP.BaseElement {
 
   /** @override */
   unlayoutCallback() {
+    unobserveWithSharedInOb(this.element);
     if (this.iframe_) {
       this.intersectionObserverHostApi_.destroy();
       this.intersectionObserverHostApi_ = null;
diff --git a/extensions/amp-apester-media/0.1/monetization/companion/display.js b/extensions/amp-apester-media/0.1/monetization/companion/display.js
index 4d7db97c078b2..bef907425c993 100644
--- a/extensions/amp-apester-media/0.1/monetization/companion/display.js
+++ b/extensions/amp-apester-media/0.1/monetization/companion/display.js
@@ -16,9 +16,8 @@
 
 import {Services} from '../../../../../src/services';
 import {createElementWithAttributes} from '../../../../../src/dom';
-import {getValueForExpr} from '../../../../../src/json';
+import {dict, getValueForExpr} from '../../../../../src/core/types/object';
 const ALLOWED_AD_PROVIDER = 'gdt';
-import {dict} from '../../../../../src/utils/object';
 
 /**
  * @param {!JsonObject} media
diff --git a/extensions/amp-apester-media/0.1/monetization/companion/video.js b/extensions/amp-apester-media/0.1/monetization/companion/video.js
index 4d7e04527bd75..8cb4968a9e87c 100644
--- a/extensions/amp-apester-media/0.1/monetization/companion/video.js
+++ b/extensions/amp-apester-media/0.1/monetization/companion/video.js
@@ -17,8 +17,7 @@
 import {Services} from '../../../../../src/services';
 const ALLOWED_AD_PROVIDER = 'sr';
 import {createElementWithAttributes} from '../../../../../src/dom';
-import {dict} from '../../../../../src/utils/object';
-import {getValueForExpr} from '../../../../../src/json';
+import {dict, getValueForExpr} from '../../../../../src/core/types/object';
 
 /**
  * @param {!JsonObject} media
@@ -148,12 +147,12 @@ function getSrMacros(interactionModel, campaignId, apesterElement, consentObj) {
     'param1': interactionId,
     'param2': publisherId,
     'param6': campaignId,
-    'page_url': pageUrl, // eslint-disable-line google-camelcase/google-camelcase
+    'page_url': pageUrl,
   });
 
   if (consentObj['gdpr']) {
     macros['gdpr'] = consentObj['gdpr'];
-    macros['user_consent'] = consentObj['user_consent']; // eslint-disable-line google-camelcase/google-camelcase
+    macros['user_consent'] = consentObj['user_consent'];
     macros['param4'] = consentObj['gdprString'];
   }
 
diff --git a/extensions/amp-apester-media/0.1/monetization/consent-util.js b/extensions/amp-apester-media/0.1/monetization/consent-util.js
index 33883e2f322b7..ecd4572095a9d 100644
--- a/extensions/amp-apester-media/0.1/monetization/consent-util.js
+++ b/extensions/amp-apester-media/0.1/monetization/consent-util.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {dict} from '../../../../src/utils/object';
+import {dict} from '../../../../src/core/types/object';
 import {
   getConsentPolicyInfo,
   getConsentPolicyState,
@@ -22,7 +22,7 @@ import {
 
 import {dev} from '../../../../src/log';
 
-import {CONSENT_POLICY_STATE} from '../../../../src/consent-state';
+import {CONSENT_POLICY_STATE} from '../../../../src/core/constants/consent-state';
 
 const TAG = 'amp-apester-media';
 
diff --git a/extensions/amp-apester-media/0.1/test/test-amp-apester-media-utils.js b/extensions/amp-apester-media/0.1/test/test-amp-apester-media-utils.js
index e09c99a4e7de2..2c3998951d996 100644
--- a/extensions/amp-apester-media/0.1/test/test-amp-apester-media-utils.js
+++ b/extensions/amp-apester-media/0.1/test/test-amp-apester-media-utils.js
@@ -22,8 +22,12 @@ import {
   extractTitle,
 } from '../utils';
 
-describes.realWin('amp-apester-media-utils', {}, (unused) => {
+describes.realWin('amp-apester-media-utils', {amp: true}, (env) => {
+  let window, document;
+
   beforeEach(() => {
+    window = env.win;
+    document = window.document;
     document.body.textContent = '';
     document.head.textContent = '';
   });
diff --git a/extensions/amp-apester-media/0.1/test/test-amp-apester-media.js b/extensions/amp-apester-media/0.1/test/test-amp-apester-media.js
index 2ccdaf6be8885..184b587e34acb 100644
--- a/extensions/amp-apester-media/0.1/test/test-amp-apester-media.js
+++ b/extensions/amp-apester-media/0.1/test/test-amp-apester-media.js
@@ -40,7 +40,7 @@ describes.realWin(
       }
     });
 
-    function getApester(attributes, opt_responsive) {
+    async function getApester(attributes, opt_responsive) {
       const media = doc.createElement('amp-apester-media');
       const regularResponse = {
         status: 200,
@@ -81,14 +81,6 @@ describes.realWin(
           ? playlistResponse
           : regularResponse;
 
-      changeSizeSpy = env.sandbox.spy(
-        media.implementation_,
-        'forceChangeHeight'
-      );
-      attemptChangeSizeSpy = env.sandbox.spy(
-        media.implementation_,
-        'attemptChangeHeight'
-      );
       xhrMock = env.sandbox.mock(Services.xhrFor(win));
       if (attributes) {
         xhrMock.expects('fetchJson').returns(
@@ -112,12 +104,14 @@ describes.realWin(
         media.setAttribute('layout', 'responsive');
       }
       doc.body.appendChild(media);
-      return media
-        .build()
-        .then(() => {
-          return media.layoutCallback();
-        })
-        .then(() => media);
+      await media.buildInternal();
+
+      const impl = await media.getImpl();
+      changeSizeSpy = env.sandbox.spy(impl, 'forceChangeHeight');
+      attemptChangeSizeSpy = env.sandbox.spy(impl, 'attemptChangeHeight');
+
+      await media.layoutCallback();
+      return media;
     }
 
     it('renders', () => {
@@ -186,21 +180,20 @@ describes.realWin(
       });
     });
 
-    it('removes iframe after unlayoutCallback', () => {
-      return getApester({
+    it('removes iframe after unlayoutCallback', async () => {
+      const ape = await getApester({
         'data-apester-media-id': '5aaa70c79aaf0c5443078d31',
-      }).then((ape) => {
-        const iframe = ape.querySelector('iframe');
-        expect(iframe).to.not.be.null;
-        expect(iframe.src).not.to.be.null;
-        const url = new URL(iframe.src);
-        expect(url.hostname).to.equal('renderer.apester.com');
-        expect(url.pathname).to.equal('/interaction/5aaa70c79aaf0c5443078d31');
-        const tag = ape.implementation_;
-        tag.unlayoutCallback();
-        expect(ape.querySelector('iframe')).to.be.null;
-        expect(tag.iframe_).to.be.null;
       });
+      const tag = await ape.getImpl();
+      const iframe = ape.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+      expect(iframe.src).not.to.be.null;
+      const url = new URL(iframe.src);
+      expect(url.hostname).to.equal('renderer.apester.com');
+      expect(url.pathname).to.equal('/interaction/5aaa70c79aaf0c5443078d31');
+      tag.unlayoutCallback();
+      expect(ape.querySelector('iframe')).to.be.null;
+      expect(tag.iframe_).to.be.null;
     });
 
     it('requires media-id or channel-token', () => {
diff --git a/extensions/amp-apester-media/0.1/test/test-amp-apester-monetization.js b/extensions/amp-apester-media/0.1/test/test-amp-apester-monetization.js
index 0346396178829..89cc196d425a2 100644
--- a/extensions/amp-apester-media/0.1/test/test-amp-apester-monetization.js
+++ b/extensions/amp-apester-media/0.1/test/test-amp-apester-monetization.js
@@ -114,10 +114,10 @@ describes.realWin('amp-apester-media-monetization', {}, (env) => {
 });
 
 function createCampaignData({
+  disabledAmpCompanionAds,
   display,
   srAbove,
   srBelow,
-  disabledAmpCompanionAds,
 }) {
   const media = {};
   const campaignData = {
diff --git a/extensions/amp-apester-media/0.1/utils.js b/extensions/amp-apester-media/0.1/utils.js
index 94dbc62cdab72..1287b85dd50ea 100644
--- a/extensions/amp-apester-media/0.1/utils.js
+++ b/extensions/amp-apester-media/0.1/utils.js
@@ -16,8 +16,8 @@
 
 import * as events from '../../../src/event-helper';
 import {isJsonLdScriptTag} from '../../../src/dom';
-import {toArray} from '../../../src/types';
-import {tryParseJson} from '../../../src/json';
+import {toArray} from '../../../src/core/types/array';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 const rules = [
   // if it says it's a webview, let's go with that
@@ -124,7 +124,7 @@ export function extractArticleTags(ampdoc) {
   return (ampdoc.getMetaByName('keywords') || '')
     .split(',')
     .map((e) => e.trim())
-    .filter((e) => e);
+    .filter(Boolean);
 }
 
 /**
diff --git a/extensions/amp-apester-media/OWNERS b/extensions/amp-apester-media/OWNERS
index a3e3dde3c8f59..cbcedab851b42 100644
--- a/extensions/amp-apester-media/OWNERS
+++ b/extensions/amp-apester-media/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'OmriKeret'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'OmriKeret'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-apester-media/amp-apester-media.md b/extensions/amp-apester-media/amp-apester-media.md
index b5629f564e300..c1a1377902eb8 100644
--- a/extensions/amp-apester-media/amp-apester-media.md
+++ b/extensions/amp-apester-media/amp-apester-media.md
@@ -24,34 +24,41 @@ limitations under the License.
 
 # amp-apester-media
 
-## Examples
+## Usage
 
-Single Mode:
+Displays an Apester smart unit.
+
+## Attributes
+
+### `data-apester-media-id`
+
+This attribute is required for single mode, and it represents the ID of the
+media (string value).
 
 ```html
-<amp-apester-media height="390" data-apester-media-id="#"> </amp-apester-media>
+<amp-apester-media height="390" data-apester-media-id="#"></amp-apester-media>
 ```
 
-Playlist Mode:
+### `data-apester-channel-token`
+
+This attribute is required for playlist mode, and it represents the token of the
+channel (string value).
 
 ```html
-<amp-apester-media height="390" data-apester-channel-token="#">
-</amp-apester-media>
+<amp-apester-media
+  height="390"
+  data-apester-channel-token="#"
+></amp-apester-media>
 ```
 
-## Attributes
+## Accessibility
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-apester-media-id</strong></td>
-    <td>This attribute is required for single mode, and it represents the ID of the media (string value).</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-apester-channel-token</strong></td>
-    <td>This attribute is required for playlist mode, and it represents the token of the channel (string value).</td>
-  </tr>
-</table>
+`amp-apester-media` automatically adds the
+[`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) attribute. This
+[ARIA attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
+is applied to the Apester Media loading image.
 
 ## Validation
 
-See [amp-apester-media rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-apester-media/validator-amp-apester-media.protoascii) in the AMP validator specification.
+See [`amp-apester-media` rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-apester-media/validator-amp-apester-media.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-apester-media/validator-amp-apester-media.protoascii b/extensions/amp-apester-media/validator-amp-apester-media.protoascii
index 1ecb27d54b3b3..30dbb269df673 100644
--- a/extensions/amp-apester-media/validator-amp-apester-media.protoascii
+++ b/extensions/amp-apester-media/validator-amp-apester-media.protoascii
@@ -49,5 +49,5 @@ tags: {  # <amp-apester-media>
       supported_layouts: NODISPLAY
       supported_layouts: RESPONSIVE
   }
-  spec_url: "https://amp.dev/documentation/components/amp-apester-media"
+  spec_url: "https://amp.dev/documentation/components/amp-apester-media/"
 }
diff --git a/extensions/amp-app-banner/0.1/amp-app-banner.js b/extensions/amp-app-banner/0.1/amp-app-banner.js
index 832175df219b1..da74448fe6268 100644
--- a/extensions/amp-app-banner/0.1/amp-app-banner.js
+++ b/extensions/amp-app-banner/0.1/amp-app-banner.js
@@ -16,9 +16,10 @@
 
 import {CSS} from '../../../build/amp-app-banner-0.1.css';
 import {Services} from '../../../src/services';
-import {dev, rethrowAsync, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dev, user, userAssert} from '../../../src/log';
+import {dict} from '../../../src/core/types/object';
 import {openWindowDialog, removeElement} from '../../../src/dom';
+import {rethrowAsync} from '../../../src/core/error';
 
 const TAG = 'amp-app-banner';
 const OPEN_LINK_TIMEOUT = 1500;
@@ -384,11 +385,13 @@ export class AmpAndroidAppBanner extends AbstractAppBanner {
 
   /** @override */
   buildCallback() {
-    const {win, element} = this;
+    const {element, win} = this;
     const viewer = Services.viewerForDoc(this.getAmpDoc());
-    this.manifestLink_ = /** @type {?HTMLLinkElement} */ (win.document.head.querySelector(
-      'link[rel=manifest],link[rel=origin-manifest]'
-    ));
+    this.manifestLink_ = /** @type {?HTMLLinkElement} */ (
+      win.document.head.querySelector(
+        'link[rel=manifest],link[rel=origin-manifest]'
+      )
+    );
 
     const platform = Services.platformFor(win);
     const url = Services.urlForDoc(element);
diff --git a/extensions/amp-app-banner/0.1/test/test-amp-app-banner.js b/extensions/amp-app-banner/0.1/test/test-amp-app-banner.js
index e9c54c3a326f4..6aa7e8c2fcebe 100644
--- a/extensions/amp-app-banner/0.1/test/test-amp-app-banner.js
+++ b/extensions/amp-app-banner/0.1/test/test-amp-app-banner.js
@@ -69,7 +69,7 @@ describes.realWin(
       }
     }
 
-    function getAppBanner(config = {}) {
+    async function getAppBanner(config = {}) {
       if (config.iosMeta) {
         const meta = doc.createElement('meta');
         meta.setAttribute('name', 'apple-itunes-app');
@@ -106,27 +106,24 @@ describes.realWin(
 
       banner.id = 'banner0';
       doc.body.appendChild(banner);
-      return banner
-        .build()
-        .then(() => banner.layoutCallback())
-        .then(() => banner);
+      await banner.buildInternal();
+      await banner.layoutCallback();
+      return banner;
     }
 
-    function testSetupAndShowBanner() {
-      return getAppBanner({iosMeta, androidManifest}).then((banner) => {
-        return banner.implementation_.isDismissed().then(() => {
-          expect(banner.parentElement).to.not.be.null;
-          expect(banner).to.not.have.display('none');
-          const bannerTop = banner.querySelector(
-            'i-amphtml-app-banner-top-padding'
-          );
-          expect(bannerTop).to.exist;
-          const dismissBtn = banner.querySelector(
-            '.amp-app-banner-dismiss-button'
-          );
-          expect(dismissBtn).to.exist;
-        });
-      });
+    async function testSetupAndShowBanner() {
+      const banner = await getAppBanner({iosMeta, androidManifest});
+      const impl = await banner.getImpl();
+      await impl.isDismissed();
+
+      expect(banner.parentElement).to.not.be.null;
+      expect(banner).to.not.have.display('none');
+      const bannerTop = banner.querySelector(
+        'i-amphtml-app-banner-top-padding'
+      );
+      expect(bannerTop).to.exist;
+      const dismissBtn = banner.querySelector('.amp-app-banner-dismiss-button');
+      expect(dismissBtn).to.exist;
     }
 
     function testRemoveBanner(config = {iosMeta, androidManifest}) {
@@ -157,19 +154,18 @@ describes.realWin(
     }
 
     function testSuiteIos() {
-      it('should preconnect to app store', () => {
-        return getAppBanner({iosMeta}).then((banner) => {
-          const preconnect = Services.preconnectFor(win);
-          env.sandbox.stub(preconnect, 'url');
-
-          const impl = banner.implementation_;
-          impl.preconnectCallback(true);
-          expect(preconnect.url).to.be.calledOnce;
-          expect(preconnect.url).to.have.been.calledWith(
-            env.sandbox.match.object, // AmpDoc
-            'https://itunes.apple.com'
-          );
-        });
+      it('should preconnect to app store', async () => {
+        const banner = await getAppBanner({iosMeta});
+        const preconnect = Services.preconnectFor(win);
+        env.sandbox.stub(preconnect, 'url');
+
+        const impl = await banner.getImpl();
+        impl.preconnectCallback(true);
+        expect(preconnect.url).to.be.calledOnce;
+        expect(preconnect.url).to.have.been.calledWith(
+          env.sandbox.match.object, // AmpDoc
+          'https://itunes.apple.com'
+        );
       });
 
       // TODO(alanorozco, #15844): Unskip.
@@ -242,48 +238,44 @@ describes.realWin(
     }
 
     function testSuiteAndroid() {
-      it('should preconnect to play store and preload manifest', () => {
-        return getAppBanner({androidManifest}).then((banner) => {
-          const preconnect = Services.preconnectFor(win);
-          env.sandbox.stub(preconnect, 'url');
-          env.sandbox.stub(preconnect, 'preload');
-
-          const impl = banner.implementation_;
-          impl.preconnectCallback(true);
-          expect(preconnect.url).to.have.been.calledOnce;
-          expect(preconnect.url).to.have.been.calledWith(
-            env.sandbox.match.object, // AmpDoc
-            'https://play.google.com'
-          );
+      it('should preconnect to play store and preload manifest', async () => {
+        const banner = await getAppBanner({androidManifest});
+        const preconnect = Services.preconnectFor(win);
+        env.sandbox.stub(preconnect, 'url');
+        env.sandbox.stub(preconnect, 'preload');
+
+        const impl = await banner.getImpl();
+        impl.preconnectCallback(true);
+        expect(preconnect.url).to.have.been.calledOnce;
+        expect(preconnect.url).to.have.been.calledWith(
+          env.sandbox.match.object, // AmpDoc
+          'https://play.google.com'
+        );
 
-          expect(preconnect.preload).to.be.calledOnce;
-          expect(preconnect.preload).to.have.been.calledWith(
-            env.sandbox.match.object, // AmpDoc
-            'https://example.com/manifest.json'
-          );
-        });
+        expect(preconnect.preload).to.be.calledOnce;
+        expect(preconnect.preload).to.have.been.calledWith(
+          env.sandbox.match.object, // AmpDoc
+          'https://example.com/manifest.json'
+        );
       });
 
-      it('should preconnect to play store and preload origin-manifest', () => {
-        return getAppBanner({originManifest: androidManifest}).then(
-          (banner) => {
-            const preconnect = Services.preconnectFor(win);
-            env.sandbox.stub(preconnect, 'url');
-            env.sandbox.stub(preconnect, 'preload');
-
-            const impl = banner.implementation_;
-            impl.preconnectCallback(true);
-            expect(preconnect.url).to.have.been.calledOnce;
-            expect(preconnect.url).to.have.been.calledWith(
-              env.sandbox.match.object, // AmpDoc
-              'https://play.google.com'
-            );
-            expect(preconnect.preload).to.be.calledOnce;
-            expect(preconnect.preload).to.have.been.calledWith(
-              env.sandbox.match.object, // AmpDoc
-              'https://example.com/manifest.json'
-            );
-          }
+      it('should preconnect to play store and preload origin-manifest', async () => {
+        const banner = await getAppBanner({originManifest: androidManifest});
+        const preconnect = Services.preconnectFor(win);
+        env.sandbox.stub(preconnect, 'url');
+        env.sandbox.stub(preconnect, 'preload');
+
+        const impl = await banner.getImpl();
+        impl.preconnectCallback(true);
+        expect(preconnect.url).to.have.been.calledOnce;
+        expect(preconnect.url).to.have.been.calledWith(
+          env.sandbox.match.object, // AmpDoc
+          'https://play.google.com'
+        );
+        expect(preconnect.preload).to.be.calledOnce;
+        expect(preconnect.preload).to.have.been.calledWith(
+          env.sandbox.match.object, // AmpDoc
+          'https://example.com/manifest.json'
         );
       });
 
@@ -363,26 +355,26 @@ describes.realWin(
     });
 
     describe('Choosing platform', () => {
-      it('should upgrade to AmpIosAppBanner on iOS', () => {
+      it('should upgrade to AmpIosAppBanner on iOS', async () => {
         isIos = true;
-        return getAppBanner({iosMeta, androidManifest}).then((banner) => {
-          expect(banner.implementation_).to.be.instanceof(AmpIosAppBanner);
-        });
+        const banner = await getAppBanner({iosMeta, androidManifest});
+        const impl = await banner.getImpl();
+        expect(impl).to.be.instanceof(AmpIosAppBanner);
       });
 
-      it('should upgrade to AmpAndroidAppBanner on Android', () => {
+      it('should upgrade to AmpAndroidAppBanner on Android', async () => {
         isAndroid = true;
-        return getAppBanner({iosMeta, androidManifest}).then((banner) => {
-          expect(banner.implementation_).to.be.instanceof(AmpAndroidAppBanner);
-        });
+        const banner = await getAppBanner({iosMeta, androidManifest});
+        const impl = await banner.getImpl();
+        expect(impl).to.be.instanceof(AmpAndroidAppBanner);
       });
 
-      it('should not upgrade if platform not supported', () => {
+      it('should not upgrade if platform not supported', async () => {
         isEdge = true;
-        return getAppBanner({iosMeta, androidManifest}).then((banner) => {
-          expect(banner.implementation_).to.be.instanceof(AmpAppBanner);
-          expect(banner.implementation_.upgradeCallback()).to.be.null;
-        });
+        const banner = await getAppBanner({iosMeta, androidManifest});
+        const impl = await banner.getImpl();
+        expect(impl).to.be.instanceof(AmpAppBanner);
+        expect(impl.upgradeCallback()).to.be.null;
       });
     });
 
diff --git a/extensions/amp-app-banner/0.1/test/validator-amp-app-banner-missing-meta.out b/extensions/amp-app-banner/0.1/test/validator-amp-app-banner-missing-meta.out
index e1062909e1cf3..302994c01d57d 100644
--- a/extensions/amp-app-banner/0.1/test/validator-amp-app-banner-missing-meta.out
+++ b/extensions/amp-app-banner/0.1/test/validator-amp-app-banner-missing-meta.out
@@ -46,4 +46,4 @@ FAIL
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-amp-app-banner/0.1/test/validator-amp-app-banner-missing-meta.html:46:6 The tag 'amp-app-banner data source' is missing or incorrect, but required by 'amp-app-banner'. (see https://amp.dev/documentation/components/amp-app-banner)
+amp-app-banner/0.1/test/validator-amp-app-banner-missing-meta.html:46:6 The tag 'amp-app-banner data source' is missing or incorrect, but required by 'amp-app-banner'. (see https://amp.dev/documentation/components/amp-app-banner/)
diff --git a/extensions/amp-app-banner/OWNERS b/extensions/amp-app-banner/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-app-banner/OWNERS
+++ b/extensions/amp-app-banner/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-app-banner/amp-app-banner.md b/extensions/amp-app-banner/amp-app-banner.md
index e3ddd6cff8faa..b71e9ac74a957 100644
--- a/extensions/amp-app-banner/amp-app-banner.md
+++ b/extensions/amp-app-banner/amp-app-banner.md
@@ -24,25 +24,102 @@ limitations under the License.
 
 # amp-app-banner
 
-Includes conditional logic to direct to the right app on the right platform, and to hide permanently if the user dismisses the banner.
+## Usage
 
-## Behavior
+A wrapper and minimal UI for a cross-platform, fixed-position banner that shows
+a call-to-action to install an app.
 
-`amp-app-banner` is a wrapper and minimal UI for a cross-platform, fixed-position banner showing a call-to-action to install an app. Includes conditional logic to direct to the right app on the right platform, and to hide permanently if the user dismisses the banner.
+The `amp-app-banner` component includes conditional logic to direct users to the
+right app on the right platform. If the user dismisses the banner, the banner is
+hidden permanently.
 
-## Data Sources
-
-To extend and promote the usage of the natively supported app banners on <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html">iOS</a> and <a href="https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android?hl=en#span-idnativenative-app-install-bannerspan">Android</a>, we are using the exact data-sources the native app banners use on the respective platforms. iOS uses a `<meta name="apple-itunes-app">` tag in the head of the document and Android uses a `<link rel="manifest">`.
+```html
+<head>
+  <meta
+    name="apple-itunes-app"
+    content="app-id=123456789, app-argument=app-name://link/to/app-content"
+  />
+  <link rel="manifest" href="https://link/to/manifest.json" />
+</head>
 
-The AMP runtime parses the meta tag content attribute on iOS extracting the App ID and `app-argument` (usually used for deep-linking URIs - app-protocols like `whatsapp://` or `medium://`). On Android, the AMP runtimes makes an XHR request to fetch the `manifest.json` file, and parses its content to extract `app_id` from `related_applications` and it calculates the app store URL as well as open-in-app URL:
+. . .
 
-```text
-android-app://${appId}/${protocol}/${host}${pathname}
+<body>
+  <amp-app-banner layout="nodisplay" id="demo-app-banner-2134">
+    <amp-img src="https://example.com/icon.png" width="60" height="51">
+    </amp-img>
+    <h3>App Name</h3>
+    <p>Experience a richer experience on our mobile app!</p>
+    <div class="actions">
+      <button open-button>Get the app</button>
+    </div>
+  </amp-app-banner>
+</body>
 ```
 
-**Note**: The protocol/host/pathname are calculated from the canonical URL of the AMP document, and your native app needs to register the links in their manifest as <a href="https://developer.android.com/training/app-indexing/deep-linking.html">documented here</a>.
+For a full-page example, see
+[article.amp.html](../../examples/article.amp.html).
+
+Use of `amp-app-banner` must meet the following requirements:
+
+-   Don't include [`amp-ad/amp-embed`](../amp-ad/amp-ad.md),
+    [`amp-sticky-ad`](../amp-sticky-ad/amp-sticky-ad.md), or
+    [`amp-iframe`](../amp-iframe/amp-iframe.md) as
+    descendants.
+
+-   [`height`](https://www.w3schools.com/tags/att_height.asp) can't exceed
+    `100px`.
+
+-   Must be a direct child of the
+    [`<body>`](https://www.w3schools.com/tags/tag_body.asp) tag.
+
+-   The Android manifest
+    [`href`](https://www.w3schools.com/tags/att_link_href.asp) attribute must be
+    served over `https`.
+
+-   Don't include more than one `amp-app-banner` on a single page.
+
+### Specify data sources
+
+To extend and promote the usage of the natively supported app banners on
+[iOS](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html)
+and [Android](https://web.dev/customize-install/), `amp-app-banner` uses the
+exact data sources that the native app banners use on their respective
+platforms. iOS uses a
+[`<meta name="apple-itunes-app">`](https://www.w3schools.com/tags/tag_meta.asp)
+tag in the head of the document, while Android uses a
+[`<link rel="manifest">`](https://www.w3schools.com/tags/tag_link.asp) tag.
+
+-   On iOS, the AMP runtime parses the `<meta>` tag content attribute to extract
+    the App ID and `app-argument`. These are usually used for deep link URIs,
+    such as app-protocols like `whatsapp://` or `medium://`.
+
+    -   The `<meta>` tag must have the
+        [`name`](https://www.w3schools.com/tags/att_meta_name.asp) and
+        [`content`](https://www.w3schools.com/tags/att_meta_content.asp)
+        attributes.
+
+    -   The value of the `content` attribute must contain `app-id=`.
+
+-   On Android, the AMP runtime makes an XHR request to fetch the
+    `manifest.json` file. The runtime parses the
+    content to extract `app_id` from `related_applications` and calculates the
+    app store URL as well as open-in-app URL, which has the following form:
+    `android-app://${appId}/${protocol}/${host}${pathname}`
+
+    -   The `<link>` tag must have the
+        [`"rel='manifest'"`](https://www.w3schools.com/tags/tag_link.asp)
+        attribute and value, as well as the
+        [`href`](https://www.w3schools.com/tags/att_link_href.asp) attribute.
 
-### App manifest example
+[tip type="note"]
+The protocol, host, and pathname are calculated from the canonical URL of the
+AMP document. Your native app needs to register the links in their manifest. For
+more information, read up on
+[mobile deep linking](https://en.wikipedia.org/wiki/Mobile_deep_linking).
+[/tip]
+
+#### Example app manifest <a name="example-for-manifest-json"></a>
 
 ```xml
 <activity
@@ -59,7 +136,7 @@ android-app://${appId}/${protocol}/${host}${pathname}
 </activity>
 ```
 
-### manifest.json example
+#### Example manifest.json
 
 ```javascript
 {
@@ -74,111 +151,80 @@ android-app://${appId}/${protocol}/${host}${pathname}
 }
 ```
 
-## Appearance Behavior
+### UI behavior
 
-`amp-app-banner` provides no default UI and leaves the UI to the developer. The developer can build any kind of UI inside the banner and style it accordingly. There is one UI element that has limits to the amount of customization--the "X" button that dismisses the banner. This button can be styled with the `.amp-app-banner-dismiss-button` class. It should be kept visible and easily accessible on mobile devices, to avoid blocking content.
+`amp-app-banner` provides no default UI. Instead, the developer can build any
+kind of UI inside the banner and style it accordingly.
 
-One required UI element is the `button[open-button]` button, which is the click target for the banner to install the app, or open the deep-link if the app is already installed.
+Currently, the banner is always displayed until it's dismissed. After it's
+dismissed, the banner never displays on that domain unless the user visits on a
+different browser or clears their local storage.
 
-### OS/Browser/Viewer Dependencies
+#### Required attribute in the UI
 
-Because native app banners currently are not shown in the viewer context, `<amp-app-banner>` is shown inside of the viewer when the appropriate markup is present. Because system-level app banners are already shown in Android/Chrome and iOS/Safari OS/Browser combinations, `<amp-app-banner>` is hidden in those contexts to avoid redundancy.
+The `button[open-button]` button is required in the banner. This is the click
+target that either installs the app or, if it's already installed, opens the
+deep link.
 
-<table>
-  <tr>
-    <th>Context</th>
-    <th>Android + Chrome</th>
-    <th>iOS + Safari</th>
-    <th>Other OS + browser</th>
-  </tr>
-  <tr>
-    <td>In AMP viewer</td>
-    <td>Show amp-app-banner</td>
-    <td>Show amp-app-banner</td>
-    <td>Show amp-app-banner</td>
-  </tr>
-  <tr>
-    <td>Outside of AMP viewer</td>
-    <td>Show system banner</td>
-    <td>Show system banner</td>
-    <td>Show amp-app-banner</td>
-  </tr>
-</table>
+[tip type="note"]
+The `button[open-button]` element can't have the value `disabled`.
+[/tip]
 
-## Dismissal Persistence
+#### Dismissal button restrictions
 
-Currently, the banner will be displayed always unless it was dismissed. Once dismissed, the banner will never be displayed on that domain unless the user visits on a different browser or clears their local storage.
+The "X" button used to dismiss the banner has limits on how you can customize
+it. You can style this button with the `.amp-app-banner-dismiss-button` class.
+Keep the dismissal button visible and easily accessible on mobile devices so
+that the banner doesn't block content.
 
-## Tags
+#### OS, browser, and viewer dependencies
 
-**At least one of**: `meta[name="apple-itunes-app"]` or `link[rel=manifest]`
+The native app banners aren't shown in the viewer context. As such,
+`amp-app-banner` is shown inside of the viewer when the appropriate markup is
+present.
 
-- The `<meta>` tag must have the `name` and `content` attributes.
-- The value of the `content` attribute must contain `app-id=`.
-- The `<link>` tag must have the `"rel='manifest'"` attribute and value, as well as the `href` attribute.
-
-## Attributes
-
-### Attributes on `amp-app-banner`
+However, system-level app banners are shown when viewed with a browser on a
+compatible OS, such as Android and Chrome, or iOS and Safari. In those cases,
+the `amp-app-banner` is hidden to avoid redundancy. The following table shows
+these dependencies:
 
 <table>
-  <tr>
-    <td width="40%"><strong>id (Required)</strong></td>
-    <td>A unique identifier for an amp-app-banner; used for persistence logic.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>layout (Required)</strong></td>
-    <td>The value must be `nodisplay`.</td>
-  </tr>
+  <thead>
+    <tr>
+      <th>Context</th>
+      <th>Android + Chrome</th>
+      <th>iOS + Safari</th>
+      <th>Other OS + browser</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>In AMP viewer</td>
+      <td>Show amp-app-banner</td>
+      <td>Show amp-app-banner</td>
+      <td>Show amp-app-banner</td>
+    </tr>
+    <tr>
+      <td>Outside of AMP viewer</td>
+      <td>Show system banner</td>
+      <td>Show system banner</td>
+      <td>Show amp-app-banner</td>
+    </tr>
+  </tbody>
 </table>
 
-### Attributes on `button` descendant element
-
-<table>
-  <tr>
-    <td width="40%"><strong>open-button (Required)</strong></td>
-    <td>The click target for the banner to install the app, or open the deep-link if the app is already installed.<br>
-    Not permitted: **disabled**
-    </td>
-  </tr>
-</table>
-
-## Additional Validations
-
-- Cannot have `<amp-ad>`, `<amp-sticky-ad>`, `<amp-embed>`, or `<amp-iframe>` as descendants
-- Height cannot exceed 100px
-- Must be a direct child of `<body>`
-- Android manifest `href` must be served over `https`
-- Cannot have more than one `<amp-app-banner>` on a single page
-
-## Example
+## Attributes
 
-([link to full page example](https://github.com/ampproject/amphtml/blob/master/examples/article.amp.html))
+### `id`
 
-```html
-<head>
-  <meta
-    name="apple-itunes-app"
-    content="app-id=123456789, app-argument=app-name://link/to/app-content"
-  />
-  <link rel="manifest" href="https://link/to/manifest.json" />
-</head>
+Defines a unique identifier for an `amp-app-banner` component. The `id` value is
+used for persistence logic.
 
-. . .
+### `layout`
 
-<body>
-  <amp-app-banner layout="nodisplay" id="demo-app-banner-2134">
-    <amp-img src="https://example.com/icon.png" width="60" height="51">
-    </amp-img>
-    <h3>App Name</h3>
-    <p>Experience a richer experience on our mobile app!</p>
-    <div class="actions">
-      <button open-button>Get the app</button>
-    </div>
-  </amp-app-banner>
-</body>
-```
+Specifies the layout of the banner. The value must be `nodisplay`.
 
 ## Validation
 
-See [amp-app-banner rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-app-banner/validator-amp-app-banner.protoascii) in the AMP validator specification.
+See [`amp-app-banner` rules](validator-amp-app-banner.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-app-banner/validator-amp-app-banner.protoascii b/extensions/amp-app-banner/validator-amp-app-banner.protoascii
index 8d85d3a37e602..47b766cadf95f 100644
--- a/extensions/amp-app-banner/validator-amp-app-banner.protoascii
+++ b/extensions/amp-app-banner/validator-amp-app-banner.protoascii
@@ -37,7 +37,7 @@ tags: {  # <amp-app-banner>
   attr_lists: "extended-amp-global"
   attr_lists: "mandatory-id-attr"
   unique: true
-  spec_url: "https://amp.dev/documentation/components/amp-app-banner"
+  spec_url: "https://amp.dev/documentation/components/amp-app-banner/"
   amp_layout: {
     supported_layouts: NODISPLAY
   }
diff --git a/extensions/amp-audio/0.1/amp-audio.js b/extensions/amp-audio/0.1/amp-audio.js
index 18599a7229f4c..9491dfaeba9fc 100644
--- a/extensions/amp-audio/0.1/amp-audio.js
+++ b/extensions/amp-audio/0.1/amp-audio.js
@@ -20,6 +20,7 @@ import {
   parseOgImage,
   parseSchemaImage,
   setMediaSession,
+  validateMediaMetadata,
 } from '../../../src/mediasession-helper';
 import {Layout, isLayoutSizeFixed} from '../../../src/layout';
 import {assertHttpsUrl} from '../../../src/url';
@@ -289,13 +290,8 @@ export class AmpAudio extends AMP.BaseElement {
     };
 
     // Update the media session
-    setMediaSession(
-      this.element,
-      this.win,
-      this.metadata_,
-      playHandler,
-      pauseHandler
-    );
+    validateMediaMetadata(this.element, this.metadata_);
+    setMediaSession(this.win, this.metadata_, playHandler, pauseHandler);
   }
 }
 
diff --git a/extensions/amp-audio/0.1/test/test-amp-audio.js b/extensions/amp-audio/0.1/test/test-amp-audio.js
index 5b3e172083ddc..511b5eefa85c7 100644
--- a/extensions/amp-audio/0.1/test/test-amp-audio.js
+++ b/extensions/amp-audio/0.1/test/test-amp-audio.js
@@ -62,7 +62,7 @@ describes.realWin(
       naturalDimensions_['AMP-AUDIO'] = {width: '300px', height: '30px'};
       const ampAudio = getAmpAudio(attributes, opt_childNodesAttrs);
       return ampAudio
-        .build()
+        .buildInternal()
         .then(() => ampAudio.layoutCallback())
         .then(() => ampAudio)
         .catch((error) => {
@@ -86,7 +86,7 @@ describes.realWin(
       doc.body.appendChild(ampStory);
 
       return ampAudio
-        .build()
+        .buildInternal()
         .then(() => ampAudio.layoutCallback())
         .then(() => ampAudio)
         .catch((error) => {
@@ -135,22 +135,22 @@ describes.realWin(
     it(
       'should attach `<audio>` element and execute relevant actions for ' +
         'layout="nodisplay"',
-      () => {
-        return attachAndRun({
+      async () => {
+        const ampAudio = await attachAndRun({
           src: 'audio.mp3',
           preload: 'none',
           layout: 'nodisplay',
-        }).then((ampAudio) => {
-          const audio = ampAudio.querySelector('audio');
-          expect(audio).to.not.be.null;
+        });
+        const impl = await ampAudio.getImpl();
 
-          const impl = ampAudio.implementation_;
-          impl.executeAction({method: 'play', satisfiesTrust: () => true});
-          expect(impl.isPlaying).to.be.true;
+        const audio = ampAudio.querySelector('audio');
+        expect(audio).to.not.be.null;
 
-          impl.executeAction({method: 'pause', satisfiesTrust: () => true});
-          expect(impl.isPlaying).to.be.false;
-        });
+        impl.executeAction({method: 'play', satisfiesTrust: () => true});
+        expect(impl.isPlaying).to.be.true;
+
+        impl.executeAction({method: 'pause', satisfiesTrust: () => true});
+        expect(impl.isPlaying).to.be.false;
       }
     );
 
@@ -251,35 +251,35 @@ describes.realWin(
       });
     });
 
-    it('should play/pause when `play`/`pause` actions are called', () => {
-      return attachAndRun({
+    it('should play/pause when `play`/`pause` actions are called', async () => {
+      const ampAudio = await attachAndRun({
         'width': '500',
         src: 'audio.mp3',
-      }).then((ampAudio) => {
-        const impl = ampAudio.implementation_;
-        impl.executeAction({method: 'play', satisfiesTrust: () => true});
-        expect(impl.isPlaying).to.be.true;
-
-        impl.executeAction({method: 'pause', satisfiesTrust: () => true});
-        expect(impl.isPlaying).to.be.false;
       });
+      const impl = await ampAudio.getImpl();
+
+      impl.executeAction({method: 'play', satisfiesTrust: () => true});
+      expect(impl.isPlaying).to.be.true;
+
+      impl.executeAction({method: 'pause', satisfiesTrust: () => true});
+      expect(impl.isPlaying).to.be.false;
     });
 
     it(
       'should not play/pause when `amp-audio` is a direct descendant ' +
         'of `amp-story`',
-      () => {
-        return attachToAmpStoryAndRun({
+      async () => {
+        const ampAudio = await attachToAmpStoryAndRun({
           'width': '500',
           src: 'audio.mp3',
-        }).then((ampAudio) => {
-          const impl = ampAudio.implementation_;
-          impl.executeAction({method: 'play', satisfiesTrust: () => true});
-          expect(impl.isPlaying).to.be.false;
-
-          impl.executeAction({method: 'pause', satisfiesTrust: () => true});
-          expect(impl.isPlaying).to.be.false;
         });
+        const impl = await ampAudio.getImpl();
+
+        impl.executeAction({method: 'play', satisfiesTrust: () => true});
+        expect(impl.isPlaying).to.be.false;
+
+        impl.executeAction({method: 'pause', satisfiesTrust: () => true});
+        expect(impl.isPlaying).to.be.false;
       }
     );
   }
diff --git a/extensions/amp-audio/0.1/test/validator-amp4ads-amp-audio.out b/extensions/amp-audio/0.1/test/validator-amp4ads-amp-audio.out
index 5b24a30acd648..ad9d67ec6eebd 100644
--- a/extensions/amp-audio/0.1/test/validator-amp4ads-amp-audio.out
+++ b/extensions/amp-audio/0.1/test/validator-amp4ads-amp-audio.out
@@ -41,7 +41,7 @@ FAIL
 |    <!-- Invalid: autoplay present. -->
 |    <amp-audio width="400" height="300" autoplay src="https://yourhost.com/audios/myaudio.mp3">
 >>   ^~~~~~~~~
-amp-audio/0.1/test/validator-amp4ads-amp-audio.html:41:2 The attribute 'autoplay' may not appear in tag 'amp-audio (A4A)'. (see https://amp.dev/documentation/components/amp-audio)
+amp-audio/0.1/test/validator-amp4ads-amp-audio.html:41:2 The attribute 'autoplay' may not appear in tag 'amp-audio'. (see https://amp.dev/documentation/components/amp-audio/)
 |      <div fallback>
 |        <p>Your browser doesn’t support HTML5 audio</p>
 |      </div>
diff --git a/extensions/amp-audio/OWNERS b/extensions/amp-audio/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-audio/OWNERS
+++ b/extensions/amp-audio/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-audio/amp-audio.md b/extensions/amp-audio/amp-audio.md
index db6ea1c289cff..4698865abf095 100644
--- a/extensions/amp-audio/amp-audio.md
+++ b/extensions/amp-audio/amp-audio.md
@@ -26,18 +26,18 @@ limitations under the License.
 
 # amp-audio
 
-The `amp-audio` component is only to be used for direct HTML5 audio file embeds.
+## Usage
 
-## Behavior
+Use the `amp-audio` components with direct HTML5 audio file embeds.
 
 The `amp-audio` component loads the audio resource specified by its `src` attribute at a time determined by the runtime. It can be controlled in much the same way as a standard HTML5 `audio` tag.
 Like all embedded external resources in an AMP file, the audio is "lazily" loaded, only when the `amp-audio` element is in or near the viewport
 
 The `amp-audio` component accepts up to three unique types of HTML nodes as children:
 
-- `source` tags: Just like in the HTML `<audio>` tag, you can add `<source>` tag children to specify different source media files to play.
-- a placeholder for before the audio starts: One or zero immediate child nodes can have the `placeholder` attribute. If present, this node and its children form a placeholder that will display instead of the audio. A click or tap anywhere inside of the `amp-audio` container will replace the placeholder with the audio itself.
-- a fallback if the browser doesn’t support HTML5 audio: One or zero immediate child nodes can have the `fallback` attribute. If present, this node and its children form the content that displays if HTML5 audio is not supported on the user’s browser.
+-   `source` tags: Just like in the HTML `<audio>` tag, you can add `<source>` tag children to specify different source media files to play.
+-   a placeholder for before the audio starts: One or zero immediate child nodes can have the `placeholder` attribute. If present, this node and its children form a placeholder that will display instead of the audio. A click or tap anywhere inside of the `amp-audio` container will replace the placeholder with the audio itself.
+-   a fallback if the browser doesn’t support HTML5 audio: One or zero immediate child nodes can have the `fallback` attribute. If present, this node and its children form the content that displays if HTML5 audio is not supported on the user’s browser.
 
 For example:
 
@@ -57,56 +57,44 @@ For example:
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>src</strong></td>
-    <td>Required if no <code>&lt;source&gt;</code> children are present. Must be HTTPS.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>preload</strong></td>
-    <td>If present, sets the preload attribute in the html <code>&lt;audio&gt;</code> tag which specifies if the author thinks that the audio file should be loaded when the page loads.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>autoplay</strong></td>
-    <td>If present, the attribute implies that the audio will start playing as soon as
-it is ready.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>loop</strong></td>
-    <td>If present, the audio will automatically loop back to the start upon reaching the end.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>muted</strong></td>
-    <td>If present, will mute the audio by default.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>controlsList</strong></td>
-    <td>Same as <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList">controlsList</a> attribute of HTML5 audio element. Only supported by certain browsers. Please see <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList">https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList</a> for details.</td>
-  </tr>
-</table>
-
-## Media Session Attributes
-
-`amp-audio` implements the [Media Session API](https://developers.google.com/web/updates/2017/02/media-session) enabling developers to specify more information about the audio file that is playing to be displayed in the notification center of user's devices (along with play/pause controls).
-
-<table>
-  <tr>
-    <td width="40%"><strong>artwork</strong></td>
-    <td>URL to a PNG/JPG/ICO image serving as the audio's artwork. If not present, the MediaSessionAPI Helper will use either the `image` field in the `schema.org` definition, the `og:image` or the website's `favicon`.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>artist</strong></td>
-    <td>(string) indicates the author of the audio</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>album</strong></td>
-    <td>(string) indicates the album the audio was taken from</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>title</strong></td>
-    <td>(string) part of the [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes), doubles as the audio's name displayed in the MediaSession notification. If not provided, the MediaSessionAPI Helper will use either the `aria-label` attribute or fall back to the page's title.</td>
-  </tr>
-</table>
+### `src`
+
+Required if no `<source>` children are present. Must be HTTPS.
+
+### `preload`
+
+If present, sets the preload attribute in the html `<audio>` tag which specifies
+if the author thinks that the audio file should be loaded when the page loads.
+
+### `autoplay`
+
+If present, the attribute implies that the audio will start playing as soon as
+it is ready.
+
+### `loop`
+
+If present, the audio will automatically loop back to the start upon reaching
+the end.
+
+### `muted`
+
+If present, will mute the audio by default.
+
+### `controlsList`
+
+Same as
+[controlsList](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList)
+attribute of HTML5 audio element. Only supported by certain browsers. Please
+see [https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList)
+for details.
+
+### Media Session Attributes
+
+`amp-audio` implements the
+[Media Session API](https://developers.google.com/web/updates/2017/02/media-session)
+enabling developers to specify more information about the audio file that is
+playing to be displayed in the notification center of user's devices (along with
+play/pause controls).
 
 Example:
 
@@ -124,15 +112,44 @@ Example:
 </amp-audio>
 ```
 
+#### `artwork`
+
+URL to a PNG/JPG/ICO image serving as the audio's artwork. If not present, the
+MediaSessionAPI Helper will use either the `image` field in the `schema.org`
+definition, the `og:image` or the website's `favicon`.
+
+#### `artist`
+
+(string) indicates the author of the audio.
+
+#### `album`
+
+(string) indicates the album the audio was taken from.
+
+#### `title`
+
+(string) part of the
+[common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes),
+doubles as the audio's name displayed in the MediaSession notification. If not
+provided, the MediaSessionAPI Helper will use either the `aria-label` attribute
+or fall back to the page's title.
+
 ## Analytics
 
-AMP audio analytics gathers data about how users interact with audios in AMP documents. AMP audio extension issues analytics events during their lifecycle. These events can be reported through the analytics configuration using `audio-*` triggers. `audio-play` and `audio-pause` are the two analytics events supported now.
+AMP audio analytics gathers data about how users interact with audios in AMP
+documents. AMP audio extension issues analytics events during their lifecycle.
+These events can be reported through the analytics configuration using `audio-*`
+triggers. `audio-play` and `audio-pause` are the two analytics events supported
+now.
 
-See [the AMP Analytics component](../amp-analytics/amp-analytics.md) for details on _amp-analytics_ configuration.
+See the [AMP Analytics component](https://amp.dev/documentation/components/amp-analytics/)
+for details on amp-analytics configuration.
 
 ### Audio play trigger (`"on": "audio-play"`)
 
-The `audio-play` trigger is fired when the audio begins playing from a user clicking play or from autoplay beginning or resuming. Use these configurations to fire a request for this event.
+The `audio-play` trigger is fired when the audio begins playing from a user
+clicking play or from autoplay beginning or resuming. Use these configurations
+to fire a request for this event.
 
 ```javascript
 "triggers": {
@@ -146,7 +163,9 @@ The `audio-play` trigger is fired when the audio begins playing from a user clic
 
 ### Audio pause trigger (`"on": "audio-pause"`)
 
-The `audio-pause` trigger is fired when the audio stops playing from a user clicking pause, from autoplay pausing, or from the audio reaching the end. Use these configurations to fire a request for this event.
+The `audio-pause` trigger is fired when the audio stops playing from a user
+clicking pause, from autoplay pausing, or from the audio reaching the end.
+Use these configurations to fire a request for this event.
 
 ```javascript
 "triggers": {
@@ -160,4 +179,4 @@ The `audio-pause` trigger is fired when the audio stops playing from a user clic
 
 ## Validation
 
-See [amp-audio rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-audio/validator-amp-audio.protoascii) in the AMP validator specification.
+See [amp-audio rules](validator-amp-audio.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-audio/validator-amp-audio.protoascii b/extensions/amp-audio/validator-amp-audio.protoascii
index 752a20819cab1..a489a0dfc40bd 100644
--- a/extensions/amp-audio/validator-amp-audio.protoascii
+++ b/extensions/amp-audio/validator-amp-audio.protoascii
@@ -70,7 +70,7 @@ tags: {  # <amp-audio> for AMP (autoplay attribute allowed)
   }
   attr_lists: "amp-audio-common"
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-audio"
+  spec_url: "https://amp.dev/documentation/components/amp-audio/"
   amp_layout {
     defines_default_height: true
     # TODO(johannes): in the longer run, defines_default_width should
@@ -95,7 +95,7 @@ tags: {  # <amp-audio> for AMP, amp-story (autoplay attribute mandatory)
   }
   attr_lists: "amp-audio-common"
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-audio"
+  spec_url: "https://amp.dev/documentation/components/amp-audio/"
   amp_layout {
     supported_layouts: NODISPLAY
   }
@@ -108,7 +108,7 @@ tags: {  # <amp-audio> for A4A (autoplay attribute disallowed)
   requires_extension: "amp-audio"
   attr_lists: "amp-audio-common"
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-audio"
+  spec_url: "https://amp.dev/documentation/components/amp-audio/"
   amp_layout {
     defines_default_height: true
     defines_default_width: true
diff --git a/extensions/amp-auto-ads/0.1/ad-network-config.js b/extensions/amp-auto-ads/0.1/ad-network-config.js
index 2c31a6dfde494..3c66636078099 100644
--- a/extensions/amp-auto-ads/0.1/ad-network-config.js
+++ b/extensions/amp-auto-ads/0.1/ad-network-config.js
@@ -15,8 +15,10 @@
  */
 
 import {AdSenseNetworkConfig} from './adsense-network-config';
+import {AlrightNetworkConfig} from './alright-network-config';
 import {DenakopNetworkConfig} from './denakop-network-config';
 import {DoubleclickNetworkConfig} from './doubleclick-network-config';
+import {FirstImpressionIoConfig} from './firstimpression.io-network-config';
 import {PingNetworkConfig} from './ping-network-config';
 import {PremiumadsNetworkConfig} from './premiumads-network-config';
 import {getMode} from '../../../src/mode';
@@ -81,12 +83,18 @@ export function getAdNetworkConfig(type, autoAmpAdsElement) {
   if (type == 'adsense') {
     return new AdSenseNetworkConfig(autoAmpAdsElement);
   }
+  if (type == 'alright') {
+    return new AlrightNetworkConfig(autoAmpAdsElement);
+  }
   if (type == 'denakop') {
     return new DenakopNetworkConfig(autoAmpAdsElement);
   }
   if (type == 'doubleclick') {
     return new DoubleclickNetworkConfig(autoAmpAdsElement);
   }
+  if (type == 'firstimpression.io') {
+    return new FirstImpressionIoConfig(autoAmpAdsElement);
+  }
   if (type == 'premiumads') {
     return new PremiumadsNetworkConfig(autoAmpAdsElement);
   }
diff --git a/extensions/amp-auto-ads/0.1/ad-strategy.js b/extensions/amp-auto-ads/0.1/ad-strategy.js
index bae611893b85c..7845a9367d0bd 100644
--- a/extensions/amp-auto-ads/0.1/ad-strategy.js
+++ b/extensions/amp-auto-ads/0.1/ad-strategy.js
@@ -16,7 +16,7 @@
 
 import {PlacementState} from './placement';
 import {SizeInfoDef} from './ad-network-config';
-import {tryResolve} from '../../../src/utils/promise';
+import {tryResolve} from '../../../src/core/data-structures/promise';
 import {user} from '../../../src/log';
 
 /** @const */
diff --git a/extensions/amp-auto-ads/0.1/ad-tracker.js b/extensions/amp-auto-ads/0.1/ad-tracker.js
index 8fd65d75b5a63..67506f71bb5f1 100644
--- a/extensions/amp-auto-ads/0.1/ad-tracker.js
+++ b/extensions/amp-auto-ads/0.1/ad-tracker.js
@@ -15,8 +15,8 @@
  */
 
 import {Services} from '../../../src/services';
-import {endsWith} from '../../../src/string';
-import {getElementLayoutBox} from './utils';
+import {endsWith} from '../../../src/core/types/string';
+import {measurePageLayoutBox} from '../../../src/utils/page-layout-box';
 import {user} from '../../../src/log';
 
 /** @const */
@@ -136,7 +136,7 @@ export class AdTracker {
    * @private
    */
   getDistanceFromAd_(yPosition, ad) {
-    return getElementLayoutBox(ad).then((box) => {
+    return measurePageLayoutBox(ad).then((box) => {
       if (yPosition >= box.top && yPosition <= box.bottom) {
         return 0;
       } else {
diff --git a/extensions/amp-auto-ads/0.1/adsense-network-config.js b/extensions/amp-auto-ads/0.1/adsense-network-config.js
index cde28235f6865..e9ff9793d13cd 100644
--- a/extensions/amp-auto-ads/0.1/adsense-network-config.js
+++ b/extensions/amp-auto-ads/0.1/adsense-network-config.js
@@ -16,7 +16,7 @@
 
 import {Services} from '../../../src/services';
 import {buildUrl} from '../../../ads/google/a4a/shared/url-builder';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {parseUrlDeprecated} from '../../../src/url';
 import {toWin} from '../../../src/types';
 
diff --git a/extensions/amp-auto-ads/0.1/alright-network-config.js b/extensions/amp-auto-ads/0.1/alright-network-config.js
new file mode 100644
index 0000000000000..ebd0470a12410
--- /dev/null
+++ b/extensions/amp-auto-ads/0.1/alright-network-config.js
@@ -0,0 +1,104 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Layout} from '../../../src/layout';
+import {Services} from '../../../src/services';
+import {buildUrl} from '../../../ads/google/a4a/shared/url-builder';
+import {dict} from '../../../src/core/types/object';
+
+/**
+ * @implements {./ad-network-config.AdNetworkConfigDef}
+ */
+export class AlrightNetworkConfig {
+  /**
+   * @param {!Element} autoAmpAdsElement
+   */
+  constructor(autoAmpAdsElement) {
+    this.autoAmpAdsElement_ = autoAmpAdsElement;
+  }
+
+  /**
+   * @override
+   */
+  isEnabled() {
+    return true;
+  }
+
+  /**
+   * True if responsive is enabled for auto-ads
+   */
+  isResponsiveEnabled() {
+    return false;
+  }
+
+  /** @override */
+  getConfigUrl() {
+    const docInfo = Services.documentInfoForDoc(this.autoAmpAdsElement_);
+    const publisherId =
+      this.autoAmpAdsElement_.getAttribute('data-publisher-id');
+    const pageType = this.autoAmpAdsElement_.getAttribute('data-page-type');
+    const contentCategory =
+      this.autoAmpAdsElement_.getAttribute('data-content-category') || '';
+    return buildUrl(
+      '//analytics.alright.network/amp/',
+      {
+        'p': publisherId,
+        't': pageType,
+        'c': contentCategory,
+        'u': docInfo.canonicalUrl,
+        'w': window.screen.width,
+        'h': window.screen.height,
+      },
+      4096
+    );
+  }
+
+  /** @override */
+  getAttributes() {
+    const attributes = dict({
+      'width': 300,
+      'height': 250,
+      'layout': Layout.RESPONSIVE,
+      'data-multi-size-validation': 'false',
+      'type': 'doubleclick',
+      'data-ad': 'alright',
+    });
+    return attributes;
+  }
+
+  /** @override */
+  getDefaultAdConstraints() {
+    const viewportHeight = Services.viewportForDoc(
+      this.autoAmpAdsElement_
+    ).getSize().height;
+    return {
+      initialMinSpacing: viewportHeight,
+      subsequentMinSpacing: [
+        {adCount: 3, spacing: viewportHeight * 2},
+        {adCount: 6, spacing: viewportHeight * 3},
+      ],
+      maxAdCount: 8,
+    };
+  }
+
+  /** @override */
+  getSizing() {
+    return {
+      width: 300,
+      height: 250,
+    };
+  }
+}
diff --git a/extensions/amp-auto-ads/0.1/amp-auto-ads.js b/extensions/amp-auto-ads/0.1/amp-auto-ads.js
index 5de0783fa484c..d2dadc49081fb 100644
--- a/extensions/amp-auto-ads/0.1/amp-auto-ads.js
+++ b/extensions/amp-auto-ads/0.1/amp-auto-ads.js
@@ -23,9 +23,10 @@ import {
 import {AnchorAdStrategy} from './anchor-ad-strategy';
 import {Attributes, getAttributesFromConfigObj} from './attributes';
 import {Services} from '../../../src/services';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getAdNetworkConfig} from './ad-network-config';
 import {getPlacementsFromConfigObj} from './placement';
+import {isExperimentOn} from '../../../src/experiments';
 import {userAssert} from '../../../src/log';
 
 /** @const */
@@ -40,10 +41,11 @@ export class AmpAutoAds extends AMP.BaseElement {
     const type = this.element.getAttribute('type');
     userAssert(type, 'Missing type attribute');
 
-    const adNetwork = getAdNetworkConfig(type, this.element);
-    userAssert(adNetwork, 'No AdNetworkConfig for type: ' + type);
+    /** @private {?./ad-network-config.AdNetworkConfigDef} */
+    this.adNetwork_ = getAdNetworkConfig(type, this.element);
+    userAssert(this.adNetwork_, 'No AdNetworkConfig for type: ' + type);
 
-    if (!adNetwork.isEnabled(this.win)) {
+    if (!this.adNetwork_.isEnabled(this.win)) {
       return;
     }
 
@@ -53,46 +55,16 @@ export class AmpAutoAds extends AMP.BaseElement {
       AD_TAG
     );
 
-    const whenVisible = this.getAmpDoc().whenFirstVisible();
-
-    whenVisible
+    /** @private {!Promise<!JsonObject>} */
+    this.configPromise_ = this.getAmpDoc()
+      .whenFirstVisible()
       .then(() => {
-        return this.getConfig_(adNetwork.getConfigUrl());
-      })
-      .then((configObj) => {
-        if (!configObj) {
-          return;
-        }
-        const noConfigReason = configObj['noConfigReason'];
-        if (noConfigReason) {
-          this.user().warn(TAG, noConfigReason);
-        }
-
-        const placements = getPlacementsFromConfigObj(ampdoc, configObj);
-        const attributes = /** @type {!JsonObject} */ (Object.assign(
-          dict({}),
-          adNetwork.getAttributes(),
-          getAttributesFromConfigObj(configObj, Attributes.BASE_ATTRIBUTES)
-        ));
-        const sizing = adNetwork.getSizing();
-        const adConstraints =
-          getAdConstraintsFromConfigObj(ampdoc, configObj) ||
-          adNetwork.getDefaultAdConstraints();
-        const adTracker = new AdTracker(getExistingAds(ampdoc), adConstraints);
-        new AdStrategy(
-          placements,
-          attributes,
-          sizing,
-          adTracker,
-          adNetwork.isResponsiveEnabled()
-        ).run();
-        const stickyAdAttributes = /** @type {!JsonObject} */ (Object.assign(
-          dict({}),
-          attributes,
-          getAttributesFromConfigObj(configObj, Attributes.STICKY_AD_ATTRIBUTES)
-        ));
-        new AnchorAdStrategy(ampdoc, stickyAdAttributes, configObj).run();
+        return this.getConfig_(this.adNetwork_.getConfigUrl());
       });
+
+    if (!this.isAutoAdsLayoutCallbackExperimentOn_()) {
+      this.placeAds_();
+    }
   }
 
   /** @override */
@@ -100,6 +72,14 @@ export class AmpAutoAds extends AMP.BaseElement {
     return true;
   }
 
+  /** @override */
+  layoutCallback() {
+    if (this.isAutoAdsLayoutCallbackExperimentOn_()) {
+      return this.placeAds_();
+    }
+    return Promise.resolve();
+  }
+
   /**
    * Tries to load an auto-ads configuration from the given URL. This uses a
    * non-credentialed request.
@@ -122,6 +102,60 @@ export class AmpAutoAds extends AMP.BaseElement {
         return null;
       });
   }
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  isAutoAdsLayoutCallbackExperimentOn_() {
+    return isExperimentOn(this.win, 'auto-ads-layout-callback');
+  }
+
+  /**
+   * @return {!Promise}
+   * @private
+   */
+  placeAds_() {
+    const ampdoc = this.getAmpDoc();
+    return this.configPromise_.then((configObj) => {
+      if (!configObj) {
+        return;
+      }
+      const noConfigReason = configObj['noConfigReason'];
+      if (noConfigReason) {
+        this.user().warn(TAG, noConfigReason);
+      }
+
+      const placements = getPlacementsFromConfigObj(ampdoc, configObj);
+      const attributes = /** @type {!JsonObject} */ (
+        Object.assign(
+          dict({}),
+          this.adNetwork_.getAttributes(),
+          getAttributesFromConfigObj(configObj, Attributes.BASE_ATTRIBUTES)
+        )
+      );
+      const sizing = this.adNetwork_.getSizing();
+      const adConstraints =
+        getAdConstraintsFromConfigObj(ampdoc, configObj) ||
+        this.adNetwork_.getDefaultAdConstraints();
+      const adTracker = new AdTracker(getExistingAds(ampdoc), adConstraints);
+      new AdStrategy(
+        placements,
+        attributes,
+        sizing,
+        adTracker,
+        this.adNetwork_.isResponsiveEnabled()
+      ).run();
+      const stickyAdAttributes = /** @type {!JsonObject} */ (
+        Object.assign(
+          dict({}),
+          attributes,
+          getAttributesFromConfigObj(configObj, Attributes.STICKY_AD_ATTRIBUTES)
+        )
+      );
+      new AnchorAdStrategy(ampdoc, stickyAdAttributes, configObj).run();
+    });
+  }
 }
 
 AMP.extension(TAG, '0.1', (AMP) => {
diff --git a/extensions/amp-auto-ads/0.1/anchor-ad-strategy.js b/extensions/amp-auto-ads/0.1/anchor-ad-strategy.js
index c3d5e6bd176c7..ae63e9c5d249b 100644
--- a/extensions/amp-auto-ads/0.1/anchor-ad-strategy.js
+++ b/extensions/amp-auto-ads/0.1/anchor-ad-strategy.js
@@ -15,7 +15,7 @@
  */
 import {Services} from '../../../src/services';
 import {createElementWithAttributes} from '../../../src/dom';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {user} from '../../../src/log';
 
 const TAG = 'amp-auto-ads';
@@ -27,7 +27,7 @@ export class AnchorAdStrategy {
    * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
    * @param {!JsonObject<string, string>} baseAttributes Any attributes that
    *     should be added to any inserted ads.
-   * @param {!JSONType} configObj
+   * @param {!JsonObject} configObj
    */
   constructor(ampdoc, baseAttributes, configObj) {
     /** @const {!../../../src/service/ampdoc-impl.AmpDoc} */
@@ -36,7 +36,7 @@ export class AnchorAdStrategy {
     /** @const @private {!JsonObject<string, string>} */
     this.baseAttributes_ = baseAttributes;
 
-    /** @const @private {!JSONType} */
+    /** @const @private {!JsonObject} */
     this.configObj_ = configObj;
   }
 
@@ -87,15 +87,18 @@ export class AnchorAdStrategy {
    * @private
    */
   placeStickyAd_() {
+    const baseAttributes = this.baseAttributes_;
     const viewportWidth = Services.viewportForDoc(this.ampdoc).getWidth();
-    const attributes = /** @type {!JsonObject} */ (Object.assign(
-      dict(),
-      this.baseAttributes_,
-      dict({
-        'width': String(viewportWidth),
-        'height': '100',
-      })
-    ));
+    const attributes = /** @type {!JsonObject} */ (
+      Object.assign(
+        dict(),
+        baseAttributes,
+        dict({
+          'width': String(viewportWidth),
+          'height': baseAttributes.height || '100',
+        })
+      )
+    );
     const doc = this.ampdoc.win.document;
     const ampAd = createElementWithAttributes(doc, 'amp-ad', attributes);
     const stickyAd = createElementWithAttributes(
diff --git a/extensions/amp-auto-ads/0.1/attributes.js b/extensions/amp-auto-ads/0.1/attributes.js
index 159ac8215d29e..34d5d4531a769 100644
--- a/extensions/amp-auto-ads/0.1/attributes.js
+++ b/extensions/amp-auto-ads/0.1/attributes.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import {dict} from '../../../src/utils/object';
-import {isArray, isObject} from '../../../src/types';
-import {startsWith} from '../../../src/string';
+import {dict} from '../../../src/core/types/object';
+import {isArray, isObject} from '../../../src/core/types';
+
 import {user} from '../../../src/log';
 
 /** @const */
@@ -28,6 +28,9 @@ const TAG = 'amp-auto-ads';
 const NON_DATA_ATTRIBUTE_ALLOWLIST = {
   'type': true,
   'rtc-config': true,
+  'layout': true,
+  'height': true,
+  'width': true,
 };
 
 /**
@@ -64,7 +67,7 @@ export function getAttributesFromConfigObj(configObj, attributes) {
 function parseAttributes(attributeObject) {
   const attributes = dict();
   for (const key in attributeObject) {
-    if (!NON_DATA_ATTRIBUTE_ALLOWLIST[key] && !startsWith(key, 'data-')) {
+    if (!NON_DATA_ATTRIBUTE_ALLOWLIST[key] && !key.startsWith('data-')) {
       user().warn(TAG, 'Attribute not whitlisted: ' + key);
       continue;
     }
diff --git a/extensions/amp-auto-ads/0.1/denakop-network-config.js b/extensions/amp-auto-ads/0.1/denakop-network-config.js
index a2e9adea48bd7..8e8720f8a182e 100644
--- a/extensions/amp-auto-ads/0.1/denakop-network-config.js
+++ b/extensions/amp-auto-ads/0.1/denakop-network-config.js
@@ -16,7 +16,7 @@
 
 import {Services} from '../../../src/services';
 import {buildUrl} from '../../../ads/google/a4a/shared/url-builder';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 
 /**
  * @implements {./ad-network-config.AdNetworkConfigDef}
@@ -41,15 +41,27 @@ export class DenakopNetworkConfig {
    * True if responsive is enabled for auto-ads
    */
   isResponsiveEnabled() {
-    return false;
+    return true;
   }
 
   /** @override */
   getConfigUrl() {
     const docInfo = Services.documentInfoForDoc(this.autoAmpAdsElement_);
-    const publisherId = this.autoAmpAdsElement_.getAttribute(
-      'data-publisher-id'
-    );
+    const accountId = this.autoAmpAdsElement_.getAttribute('data-account-id');
+    if (accountId) {
+      return buildUrl(
+        'https://v3.denakop.com/ad-request',
+        {
+          'a': accountId,
+          'v': 'amp',
+          'u': docInfo.canonicalUrl,
+        },
+        /* maxLength */ 4096
+      );
+    }
+
+    const publisherId =
+      this.autoAmpAdsElement_.getAttribute('data-publisher-id');
     const tagId = this.autoAmpAdsElement_.getAttribute('data-tag-id');
     return buildUrl(
       '//v2.denakop.com/ad-request/amp',
@@ -57,8 +69,6 @@ export class DenakopNetworkConfig {
         'p': publisherId,
         't': tagId,
         'u': docInfo.canonicalUrl,
-        'w': window.screen.width,
-        'h': window.screen.height,
       },
       /* maxLength */ 4096
     );
@@ -67,10 +77,10 @@ export class DenakopNetworkConfig {
   /** @override */
   getAttributes() {
     const attributes = dict({
-      'layout': 'fixed',
       'data-multi-size-validation': 'false',
       'type': 'doubleclick',
       'data-ad': 'denakop',
+      'style': 'position:relative !important',
     });
     return attributes;
   }
@@ -83,10 +93,10 @@ export class DenakopNetworkConfig {
     return {
       initialMinSpacing: viewportHeight,
       subsequentMinSpacing: [
-        {adCount: 3, spacing: viewportHeight * 2},
-        {adCount: 6, spacing: viewportHeight * 3},
+        {adCount: 4, spacing: viewportHeight * 2},
+        {adCount: 8, spacing: viewportHeight * 3},
       ],
-      maxAdCount: 8,
+      maxAdCount: 20,
     };
   }
 
diff --git a/extensions/amp-auto-ads/0.1/doubleclick-network-config.js b/extensions/amp-auto-ads/0.1/doubleclick-network-config.js
index 3a747095f61f9..9bc164af1262c 100644
--- a/extensions/amp-auto-ads/0.1/doubleclick-network-config.js
+++ b/extensions/amp-auto-ads/0.1/doubleclick-network-config.js
@@ -16,9 +16,9 @@
 
 import {Services} from '../../../src/services';
 import {buildUrl} from '../../../ads/google/a4a/shared/url-builder';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {parseUrlDeprecated} from '../../../src/url';
-import {tryParseJson} from '../../../src/json';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 /**
  * @implements {./ad-network-config.AdNetworkConfigDef}
diff --git a/extensions/amp-auto-ads/0.1/firstimpression.io-network-config.js b/extensions/amp-auto-ads/0.1/firstimpression.io-network-config.js
new file mode 100644
index 0000000000000..2af6201bb4813
--- /dev/null
+++ b/extensions/amp-auto-ads/0.1/firstimpression.io-network-config.js
@@ -0,0 +1,149 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Services} from '../../../src/services';
+import {buildUrl} from '../../../ads/google/a4a/shared/url-builder';
+import {dict} from '../../../src/core/types/object';
+import {parseQueryString} from '../../../src/core/types/string/url';
+
+/**
+ * @implements {./ad-network-config.AdNetworkConfigDef}
+ */
+export class FirstImpressionIoConfig {
+  /**
+   * @param {!Element} autoAmpAdsElement
+   */
+  constructor(autoAmpAdsElement) {
+    this.autoAmpAdsElement_ = autoAmpAdsElement;
+    this.pvid64 = 0;
+  }
+
+  /**
+   * @param {!Window} unused
+   * @override
+   */
+  isEnabled(unused) {
+    return true;
+  }
+
+  /**
+   * True if responsive is enabled for auto-ads
+   */
+  isResponsiveEnabled() {
+    return false;
+  }
+
+  /** @override */
+  getConfigUrl() {
+    let previewId = 0;
+
+    Services.documentInfoForDoc(this.autoAmpAdsElement_).pageViewId64.then(
+      (pageViewId64Value) => {
+        this.pvid64 = pageViewId64Value;
+      }
+    );
+
+    const {hash, host, pathname, search} = window.location;
+    const hashParams = Object.assign(
+      parseQueryString(hash),
+      parseQueryString(search)
+    );
+    const docInfo = Services.documentInfoForDoc(this.autoAmpAdsElement_);
+
+    const previewFlowRegex = /amp\/fi\/(\d+)\//;
+    const previewFlowParam = pathname.match(previewFlowRegex);
+    if (previewFlowParam != null && previewFlowParam.length == 2) {
+      previewId = previewFlowParam[1];
+    }
+
+    const fiReveal = hashParams['fi_reveal'];
+    const fiDemand = hashParams['fi_demand'];
+    const fiGeo = hashParams['fi_geo'];
+    const fiDisable = hashParams['disable_fi'];
+
+    const cdnHost =
+      hashParams['fi_cdnhost'] || (previewId ? host : 'cdn.firstimpression.io');
+    const cdnpath =
+      hashParams['fi_cdnpath'] ||
+      (previewId ? '/amp-preview.php' : '/delivery/amp.php');
+
+    const websiteId = this.autoAmpAdsElement_.getAttribute('data-website-id');
+    const targeting = this.autoAmpAdsElement_.getAttribute('data-targeting');
+
+    const queryParams = {
+      'id': websiteId,
+      'url': docInfo.canonicalUrl,
+      'w': window.screen.width,
+      'h': window.screen.height,
+    };
+
+    if (targeting) {
+      queryParams['targeting'] = targeting;
+    }
+    if (fiReveal !== undefined) {
+      queryParams['fi_reveal'] = fiReveal;
+    }
+    if (fiDemand !== undefined) {
+      queryParams['fi_demand'] = fiDemand;
+    }
+    if (fiGeo) {
+      queryParams['fi_geo'] = fiGeo;
+    }
+    if (fiDisable) {
+      queryParams['disable_fi'] = fiDisable;
+    }
+    if (previewId) {
+      queryParams['preview_id'] = previewId;
+    }
+
+    return buildUrl(
+      'https://' + cdnHost + cdnpath,
+      queryParams,
+      /* maxLength */ 4096
+    );
+  }
+
+  /** @override */
+  getAttributes() {
+    const attributes = dict({
+      'type': 'firstimpression',
+      'data-pvid64': this.pvid64,
+    });
+    return attributes;
+  }
+
+  /** @override */
+  getDefaultAdConstraints() {
+    const viewportHeight = Services.viewportForDoc(
+      this.autoAmpAdsElement_
+    ).getSize().height;
+    return {
+      initialMinSpacing: viewportHeight,
+      subsequentMinSpacing: [
+        {adCount: 3, spacing: viewportHeight * 2},
+        {adCount: 6, spacing: viewportHeight * 3},
+      ],
+      maxAdCount: 8,
+    };
+  }
+
+  /** @override */
+  getSizing() {
+    return {
+      height: 1,
+    };
+  }
+}
diff --git a/extensions/amp-auto-ads/0.1/ping-network-config.js b/extensions/amp-auto-ads/0.1/ping-network-config.js
index b5bf130c93acc..d8c3d20f1b17a 100644
--- a/extensions/amp-auto-ads/0.1/ping-network-config.js
+++ b/extensions/amp-auto-ads/0.1/ping-network-config.js
@@ -16,7 +16,7 @@
 
 import {Services} from '../../../src/services';
 import {buildUrl} from '../../../ads/google/a4a/shared/url-builder';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 
 /**
  * A fake ad network integration that is mainly used for testing
diff --git a/extensions/amp-auto-ads/0.1/placement.js b/extensions/amp-auto-ads/0.1/placement.js
index 2f843ef1ca7bb..063a489627000 100644
--- a/extensions/amp-auto-ads/0.1/placement.js
+++ b/extensions/amp-auto-ads/0.1/placement.js
@@ -18,7 +18,7 @@ import {Attributes, getAttributesFromConfigObj} from './attributes';
 import {
   LayoutMarginsChangeDef,
   cloneLayoutMarginsChangeDef,
-} from '../../../src/layout-rect';
+} from '../../../src/core/math/layout-rect';
 import {Services} from '../../../src/services';
 import {
   closestAncestorElementBySelector,
@@ -27,8 +27,8 @@ import {
   whenUpgradedToCustomElement,
 } from '../../../src/dom';
 import {dev, user} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {getElementLayoutBox} from './utils';
+import {dict} from '../../../src/core/types/object';
+import {measurePageLayoutBox} from '../../../src/utils/page-layout-box';
 
 /** @const */
 const TAG = 'amp-auto-ads';
@@ -158,9 +158,9 @@ export class Placement {
    * @return {!Promise<number>}
    */
   getEstimatedPosition() {
-    return getElementLayoutBox(this.anchorElement_).then((layoutBox) => {
-      return this.getEstimatedPositionFromAchorLayout_(layoutBox);
-    });
+    return measurePageLayoutBox(this.anchorElement_).then((layoutBox) =>
+      this.getEstimatedPositionFromAnchorLayout_(layoutBox)
+    );
   }
 
   /**
@@ -168,7 +168,7 @@ export class Placement {
    * @return {number}
    * @private
    */
-  getEstimatedPositionFromAchorLayout_(anchorLayout) {
+  getEstimatedPositionFromAnchorLayout_(anchorLayout) {
     // TODO: This should really take account of margins and padding too.
     switch (this.position_) {
       case Position.BEFORE:
@@ -194,6 +194,10 @@ export class Placement {
    */
   placeAd(baseAttributes, sizing, adTracker, isResponsiveEnabled) {
     return this.getEstimatedPosition().then((yPosition) => {
+      if (this.ampdoc.win./*OK*/ scrollY > yPosition) {
+        this.state_ = PlacementState.UNUSED;
+        return this.state_;
+      }
       return adTracker.isTooNearAnAd(yPosition).then((tooNear) => {
         if (tooNear) {
           this.state_ = PlacementState.TOO_NEAR_EXISTING_AD;
@@ -213,7 +217,7 @@ export class Placement {
           return (
             whenUpgradedToCustomElement(this.getAdElement())
               // Responsive ads set their own size when built.
-              .then(() => this.getAdElement().whenBuilt())
+              .then(() => this.getAdElement().build())
               .then(() => {
                 const resized = !this.getAdElement().classList.contains(
                   'i-amphtml-layout-awaiting-size'
@@ -231,7 +235,7 @@ export class Placement {
           // synchronously. So we explicitly wait for CustomElement to be
           // ready.
           return whenUpgradedToCustomElement(this.getAdElement())
-            .then(() => this.getAdElement().whenBuilt())
+            .then(() => this.getAdElement().build())
             .then(() => {
               return this.mutator_.requestChangeSize(
                 this.getAdElement(),
@@ -278,16 +282,18 @@ export class Placement {
    * @private
    */
   createAdElement_(baseAttributes, width) {
-    const attributes = /** @type {!JsonObject} */ (Object.assign(
-      dict({
-        'layout': width ? 'fixed' : 'fixed-height',
-        'height': '0',
-        'width': width ? width : 'auto',
-        'class': 'i-amphtml-layout-awaiting-size',
-      }),
-      baseAttributes,
-      this.attributes_
-    ));
+    const attributes = /** @type {!JsonObject} */ (
+      Object.assign(
+        dict({
+          'layout': width ? 'fixed' : 'fixed-height',
+          'height': '0',
+          'width': width ? width : 'auto',
+          'class': 'i-amphtml-layout-awaiting-size',
+        }),
+        baseAttributes,
+        this.attributes_
+      )
+    );
     return createElementWithAttributes(
       this.ampdoc.win.document,
       'amp-ad',
@@ -301,18 +307,20 @@ export class Placement {
    * @private
    */
   createFullWidthResponsiveAdElement_(baseAttributes) {
-    const attributes = /** @type {!JsonObject} */ (Object.assign(
-      dict({
-        'width': '100vw',
-        'height': '0',
-        'layout': 'fixed',
-        'class': 'i-amphtml-layout-awaiting-size',
-        'data-auto-format': 'rspv',
-        'data-full-width': '',
-      }),
-      baseAttributes,
-      this.attributes_
-    ));
+    const attributes = /** @type {!JsonObject} */ (
+      Object.assign(
+        dict({
+          'width': '100vw',
+          'height': '0',
+          'layout': 'fixed',
+          'class': 'i-amphtml-layout-awaiting-size',
+          'data-auto-format': 'rspv',
+          'data-full-width': '',
+        }),
+        baseAttributes,
+        this.attributes_
+      )
+    );
     return createElementWithAttributes(
       this.ampdoc.win.document,
       'amp-ad',
diff --git a/extensions/amp-auto-ads/0.1/premiumads-network-config.js b/extensions/amp-auto-ads/0.1/premiumads-network-config.js
index 40e719877bef2..7c230b55c3892 100644
--- a/extensions/amp-auto-ads/0.1/premiumads-network-config.js
+++ b/extensions/amp-auto-ads/0.1/premiumads-network-config.js
@@ -13,11 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import {Layout} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {buildUrl} from '../../../ads/google/a4a/shared/url-builder';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 
 /**
  * @implements {./ad-network-config.AdNetworkConfigDef}
@@ -39,31 +38,27 @@ export class PremiumadsNetworkConfig {
    * True if responsive is enabled for auto-ads
    */
   isResponsiveEnabled() {
-    return true;
+    return false;
   }
 
   /** @override */
   getConfigUrl() {
-    return buildUrl(
-      'https://tags.premiumads.com.br/autoads/' +
-        this.autoAmpAdsElement_.getAttribute('data-publisher'),
-      {},
-      4096
-    );
+    const data = this.autoAmpAdsElement_.dataset;
+    const host = data.host || 'https://tags.premiumads.com.br';
+    return buildUrl(`${host}/autoads/${data.publisher}`, {}, 4096);
   }
 
   /** @override */
   getAttributes() {
-    const attributesObj = dict({
+    const data = this.autoAmpAdsElement_.dataset;
+    return dict({
       'type': 'doubleclick',
       'data-ad': 'premiumads',
-      'width': 336,
-      'height': 280,
-      'layout': Layout.RESPONSIVE,
-      'sizes': '(min-width: 320px) 320px, 100vw',
-      'style': 'position:relative!important',
+      'layout': data.layout || Layout.FIXED,
+      'style':
+        data['style'] ||
+        'margin: 15px auto; position: relative !important; display: block !important;',
     });
-    return attributesObj;
   }
 
   /** @override */
diff --git a/extensions/amp-auto-ads/0.1/test/test-ad-tracker.js b/extensions/amp-auto-ads/0.1/test/test-ad-tracker.js
index a05f1c4deaa05..2401ab53bb42a 100644
--- a/extensions/amp-auto-ads/0.1/test/test-ad-tracker.js
+++ b/extensions/amp-auto-ads/0.1/test/test-ad-tracker.js
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import * as Utils from '../utils';
+import * as Utils from '../../../../src/utils/page-layout-box';
 import {
   AdTracker,
   getAdConstraintsFromConfigObj,
   getExistingAds,
 } from '../ad-tracker';
 import {Services} from '../../../../src/services';
-import {layoutRectLtwh} from '../../../../src/layout-rect';
+import {layoutRectLtwh} from '../../../../src/core/math/layout-rect';
 
 describes.realWin('ad-tracker', {amp: true}, (env) => {
   let win, doc;
@@ -31,7 +31,7 @@ describes.realWin('ad-tracker', {amp: true}, (env) => {
     win = env.win;
     doc = win.document;
 
-    env.sandbox.stub(Utils, 'getElementLayoutBox').callsFake((element) => {
+    env.sandbox.stub(Utils, 'measurePageLayoutBox').callsFake((element) => {
       return Promise.resolve(element.layoutBox);
     });
 
diff --git a/extensions/amp-auto-ads/0.1/test/test-alright-network-config.js b/extensions/amp-auto-ads/0.1/test/test-alright-network-config.js
new file mode 100644
index 0000000000000..f7a9ab8d0d9b1
--- /dev/null
+++ b/extensions/amp-auto-ads/0.1/test/test-alright-network-config.js
@@ -0,0 +1,105 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Services} from '../../../../src/services';
+import {getAdNetworkConfig} from '../ad-network-config';
+
+describes.realWin(
+  'alright-network-config',
+  {
+    amp: {
+      canonicalUrl: 'https://foo.bar/baz',
+      runtimeOn: true,
+      ampdoc: 'single',
+    },
+  },
+  (env) => {
+    let ampAutoAdsElem;
+    let document;
+
+    beforeEach(() => {
+      document = env.win.document;
+      ampAutoAdsElem = document.createElement('amp-auto-ads');
+      env.win.document.body.appendChild(ampAutoAdsElem);
+    });
+
+    afterEach(() => {
+      env.win.document.body.removeChild(ampAutoAdsElem);
+    });
+
+    describe('Alright', () => {
+      const PUBLISHER_ID = '1';
+      const PAGE_TYPE = 'home';
+
+      beforeEach(() => {
+        ampAutoAdsElem.setAttribute('data-publisher-id', PUBLISHER_ID);
+        ampAutoAdsElem.setAttribute('data-page-type', PAGE_TYPE);
+      });
+
+      it('should report enabled always', () => {
+        const adNetwork = getAdNetworkConfig('alright', ampAutoAdsElem);
+        expect(adNetwork.isEnabled(env.win)).to.equal(true);
+      });
+
+      it('should generate the config fetch URL', () => {
+        const adNetwork = getAdNetworkConfig('alright', ampAutoAdsElem);
+        const configUrl = adNetwork.getConfigUrl();
+
+        expect(configUrl).to.contain('//analytics.alright.network/amp/');
+        expect(configUrl).to.contain('p=' + PUBLISHER_ID);
+        expect(configUrl).to.contain('t=' + PAGE_TYPE);
+        expect(configUrl).to.contain('u=https%3A%2F%2Ffoo.bar%2Fbaz');
+      });
+
+      it('should generate the attributes', () => {
+        const adNetwork = getAdNetworkConfig('alright', ampAutoAdsElem);
+        expect(adNetwork.getAttributes()).to.deep.equal({
+          'width': 300,
+          'height': 250,
+          'layout': 'responsive',
+          'data-multi-size-validation': 'false',
+          'type': 'doubleclick',
+          'data-ad': 'alright',
+        });
+      });
+
+      it('should get the default ad constraints', () => {
+        const viewportMock = env.sandbox.mock(
+          Services.viewportForDoc(env.win.document)
+        );
+        viewportMock
+          .expects('getSize')
+          .returns({width: 320, height: 500})
+          .atLeast(1);
+
+        const adNetwork = getAdNetworkConfig('alright', ampAutoAdsElem);
+        expect(adNetwork.getDefaultAdConstraints()).to.deep.equal({
+          initialMinSpacing: 500,
+          subsequentMinSpacing: [
+            {adCount: 3, spacing: 1000},
+            {adCount: 6, spacing: 1500},
+          ],
+          maxAdCount: 8,
+        });
+      });
+
+      it('should not be responsive-enabled', () => {
+        const adNetwork = getAdNetworkConfig('alright', ampAutoAdsElem);
+        expect(adNetwork.isResponsiveEnabled()).to.be.false;
+      });
+    });
+  }
+);
diff --git a/extensions/amp-auto-ads/0.1/test/test-amp-auto-ads.js b/extensions/amp-auto-ads/0.1/test/test-amp-auto-ads.js
index 3dc8df259a26d..ffa77bda9d838 100644
--- a/extensions/amp-auto-ads/0.1/test/test-amp-auto-ads.js
+++ b/extensions/amp-auto-ads/0.1/test/test-amp-auto-ads.js
@@ -179,7 +179,7 @@ describes.realWin(
         ampAutoAds.setAttribute('type', type || '_ping_');
       }
       doc.body.appendChild(ampAutoAds);
-      return ampAutoAds.build().then(() => {
+      return ampAutoAds.buildInternal().then(() => {
         return ampAutoAds.layoutCallback();
       });
     }
diff --git a/extensions/amp-auto-ads/0.1/test/test-anchor-ad-strategy.js b/extensions/amp-auto-ads/0.1/test/test-anchor-ad-strategy.js
index 3384120fe1437..1a5ec8f3cef62 100644
--- a/extensions/amp-auto-ads/0.1/test/test-anchor-ad-strategy.js
+++ b/extensions/amp-auto-ads/0.1/test/test-anchor-ad-strategy.js
@@ -114,9 +114,8 @@ describes.realWin(
       it('should not insert sticky ad if exists one', () => {
         configObj['optInStatus'].push(2);
 
-        const existingStickyAd = env.win.document.createElement(
-          'amp-sticky-ad'
-        );
+        const existingStickyAd =
+          env.win.document.createElement('amp-sticky-ad');
         env.win.document.body.appendChild(existingStickyAd);
 
         const anchorAdStrategy = new AnchorAdStrategy(
diff --git a/extensions/amp-auto-ads/0.1/test/test-attributes.js b/extensions/amp-auto-ads/0.1/test/test-attributes.js
index 2996fd14e8e9c..d979924ceae76 100644
--- a/extensions/amp-auto-ads/0.1/test/test-attributes.js
+++ b/extensions/amp-auto-ads/0.1/test/test-attributes.js
@@ -16,7 +16,7 @@
 
 import {Attributes, getAttributesFromConfigObj} from '../attributes';
 
-describe('attributes', () => {
+describes.sandboxed('attributes', {}, () => {
   it('should ignore attributes field if an array', () => {
     const configObj = {
       attributes: ['val1', 'val2'],
@@ -43,6 +43,7 @@ describe('attributes', () => {
       getAttributesFromConfigObj(configObj, Attributes.BASE_ATTRIBUTES)
     ).to.deep.equal({
       'type': 'val2',
+      'layout': 'val3',
       'data-something': 'val5',
       'data-1234': 'val6',
     });
diff --git a/extensions/amp-auto-ads/0.1/test/test-denakop-network-config.js b/extensions/amp-auto-ads/0.1/test/test-denakop-network-config.js
index 014b6503dd406..30b203808c5fb 100644
--- a/extensions/amp-auto-ads/0.1/test/test-denakop-network-config.js
+++ b/extensions/amp-auto-ads/0.1/test/test-denakop-network-config.js
@@ -28,12 +28,15 @@ describes.realWin(
   },
   (env) => {
     let ampAutoAdsElem;
+    let oldAmpAutoAdsElem;
     let document;
 
     beforeEach(() => {
       document = env.win.document;
       ampAutoAdsElem = document.createElement('amp-auto-ads');
       env.win.document.body.appendChild(ampAutoAdsElem);
+      oldAmpAutoAdsElem = document.createElement('amp-auto-ads');
+      env.win.document.body.appendChild(oldAmpAutoAdsElem);
     });
 
     afterEach(() => {
@@ -41,12 +44,14 @@ describes.realWin(
     });
 
     describe('Denakop', () => {
+      const ACCOUNT_ID = '1';
       const PUBLISHER_ID = '1000';
       const TAG_ID = '2819896d-f724';
 
       beforeEach(() => {
-        ampAutoAdsElem.setAttribute('data-publisher-id', PUBLISHER_ID);
-        ampAutoAdsElem.setAttribute('data-tag-id', TAG_ID);
+        oldAmpAutoAdsElem.setAttribute('data-publisher-id', PUBLISHER_ID);
+        oldAmpAutoAdsElem.setAttribute('data-tag-id', TAG_ID);
+        ampAutoAdsElem.setAttribute('data-account-id', ACCOUNT_ID);
       });
 
       it('should report enabled always', () => {
@@ -58,34 +63,29 @@ describes.realWin(
         const adNetwork = getAdNetworkConfig('denakop', ampAutoAdsElem);
         const configUrl = adNetwork.getConfigUrl();
 
-        expect(configUrl).to.contain('//v2.denakop.com/ad-request/amp');
-        expect(configUrl).to.contain('p=' + PUBLISHER_ID);
-        expect(configUrl).to.contain('t=' + TAG_ID);
+        expect(configUrl).to.contain('https://v3.denakop.com/ad-request');
+        expect(configUrl).to.contain('a=' + ACCOUNT_ID);
+        expect(configUrl).to.contain('v=amp');
         expect(configUrl).to.contain('u=https%3A%2F%2Ffoo.bar%2Fbaz');
       });
 
-      it.skip("should truncate the URL if it's too long", () => {
-        const adNetwork = getAdNetworkConfig('denakop', ampAutoAdsElem);
-
-        const canonicalUrl =
-          'http://foo.bar/a'.repeat(4050) + 'shouldnt_be_included';
-
-        const docInfo = Services.documentInfoForDoc(ampAutoAdsElem);
-        env.sandbox.stub(docInfo, 'canonicalUrl').callsFake(canonicalUrl);
+      it('should generate the old config fetch URL', () => {
+        const adNetwork = getAdNetworkConfig('denakop', oldAmpAutoAdsElem);
+        const configUrl = adNetwork.getConfigUrl();
 
-        const url = adNetwork.getConfigUrl();
-        expect(url).to.contain('ama_t=amp');
-        expect(url).to.contain('url=http%3A%2F%2Ffoo.bar');
-        expect(url).not.to.contain('shouldnt_be_included');
+        expect(configUrl).to.contain('//v2.denakop.com/ad-request/amp');
+        expect(configUrl).to.contain('p=' + PUBLISHER_ID);
+        expect(configUrl).to.contain('t=' + TAG_ID);
+        expect(configUrl).to.contain('u=https%3A%2F%2Ffoo.bar%2Fbaz');
       });
 
       it('should generate the attributes', () => {
         const adNetwork = getAdNetworkConfig('denakop', ampAutoAdsElem);
         expect(adNetwork.getAttributes()).to.deep.equal({
-          'layout': 'fixed',
           'data-multi-size-validation': 'false',
           'type': 'doubleclick',
           'data-ad': 'denakop',
+          'style': 'position:relative !important',
         });
       });
 
@@ -102,16 +102,16 @@ describes.realWin(
         expect(adNetwork.getDefaultAdConstraints()).to.deep.equal({
           initialMinSpacing: 500,
           subsequentMinSpacing: [
-            {adCount: 3, spacing: 1000},
-            {adCount: 6, spacing: 1500},
+            {adCount: 4, spacing: 1000},
+            {adCount: 8, spacing: 1500},
           ],
-          maxAdCount: 8,
+          maxAdCount: 20,
         });
       });
 
-      it('should not be responsive-enabled', () => {
+      it('responsive should be enabled', () => {
         const adNetwork = getAdNetworkConfig('denakop', ampAutoAdsElem);
-        expect(adNetwork.isResponsiveEnabled()).to.be.false;
+        expect(adNetwork.isResponsiveEnabled()).to.be.true;
       });
     });
   }
diff --git a/extensions/amp-auto-ads/0.1/test/test-premiumads-network-config.js b/extensions/amp-auto-ads/0.1/test/test-premiumads-network-config.js
index 926814e3bc03c..9cec7258c210c 100644
--- a/extensions/amp-auto-ads/0.1/test/test-premiumads-network-config.js
+++ b/extensions/amp-auto-ads/0.1/test/test-premiumads-network-config.js
@@ -87,11 +87,9 @@ describes.realWin(
         expect(adNetwork.getAttributes()).to.deep.equal({
           'type': 'doubleclick',
           'data-ad': 'premiumads',
-          'width': 336,
-          'height': 280,
-          'layout': Layout.RESPONSIVE,
-          'sizes': '(min-width: 320px) 320px, 100vw',
-          'style': 'position:relative!important',
+          'layout': Layout.FIXED,
+          'style':
+            'margin: 15px auto; position: relative !important; display: block !important;',
         });
       });
 
@@ -117,7 +115,7 @@ describes.realWin(
 
       it('should be responsive-enabled', () => {
         const adNetwork = getAdNetworkConfig('premiumads', ampAutoAdsElem);
-        expect(adNetwork.isResponsiveEnabled()).to.be.true;
+        expect(adNetwork.isResponsiveEnabled()).to.be.false;
       });
     });
   }
diff --git a/extensions/amp-auto-ads/0.1/test/test-utils.js b/extensions/amp-auto-ads/0.1/test/test-utils.js
deleted file mode 100644
index d608a1e10b667..0000000000000
--- a/extensions/amp-auto-ads/0.1/test/test-utils.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 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.
- */
-
-import {Services} from '../../../../src/services';
-import {getElementLayoutBox} from '../utils';
-import {layoutRectLtwh} from '../../../../src/layout-rect';
-
-const BOX = layoutRectLtwh(1, 5, 10, 10);
-
-describes.realWin('amp-auto-ads utils', {amp: true}, (env) => {
-  let win;
-  let element;
-  let measureStub;
-
-  beforeEach(() => {
-    win = env.win;
-
-    element = env.createAmpElement('amp-foobar');
-    win.document.body.appendChild(element);
-  });
-
-  describe('getElementLayoutBox', () => {
-    beforeEach(() => {
-      const viewport = Services.viewportForDoc(element);
-      measureStub = env.sandbox
-        .stub(viewport, 'getLayoutRect')
-        .callsFake((el) => {
-          if (el === element) {
-            return BOX;
-          }
-        });
-    });
-
-    it('should measure the element', () => {
-      return expect(getElementLayoutBox(element)).to.eventually.eql(BOX);
-    });
-
-    it('should only measure once for resource backed element', () => {
-      const resources = Services.resourcesForDoc(element);
-      resources.add(element);
-      return getElementLayoutBox(element)
-        .then((layoutBox) => {
-          expect(layoutBox).to.eql(BOX);
-          expect(measureStub).to.be.calledOnce;
-        })
-        .then(() => {
-          return getElementLayoutBox(element);
-        })
-        .then((layoutBox) => {
-          expect(layoutBox).to.eql(BOX);
-          expect(measureStub).to.be.calledOnce;
-        });
-    });
-  });
-});
diff --git a/extensions/amp-auto-ads/0.1/utils.js b/extensions/amp-auto-ads/0.1/utils.js
deleted file mode 100644
index 78c5479424017..0000000000000
--- a/extensions/amp-auto-ads/0.1/utils.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * 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.
- */
-
-import {Services} from '../../../src/services';
-import {toWin} from '../../../src/types';
-
-/**
- * Returns a promise to the layoutBox for the element. If the element is
- * resource-backed then makes use of the resource layoutBox, otherwise
- * measures the element directly.
- * @param {!Element} element
- * @return {!Promise<!../../../src/layout-rect.LayoutRectDef>}
- */
-export function getElementLayoutBox(element) {
-  const resources = Services.resourcesForDoc(element);
-  const resource = resources.getResourceForElementOptional(element);
-  if (resource) {
-    return resource.getPageLayoutBoxAsync();
-  }
-  const vsync = Services.vsyncFor(toWin(element.ownerDocument.defaultView));
-  return vsync.measurePromise(() => {
-    const viewport = Services.viewportForDoc(element);
-    return viewport.getLayoutRect(element);
-  });
-}
diff --git a/extensions/amp-auto-ads/OWNERS b/extensions/amp-auto-ads/OWNERS
index f29f79cfb4a71..afc747642c94a 100644
--- a/extensions/amp-auto-ads/OWNERS
+++ b/extensions/amp-auto-ads/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-auto-ads/amp-auto-ads.md b/extensions/amp-auto-ads/amp-auto-ads.md
index 1d0b1d4704c7d..cc75a7726fa2e 100644
--- a/extensions/amp-auto-ads/amp-auto-ads.md
+++ b/extensions/amp-auto-ads/amp-auto-ads.md
@@ -24,7 +24,9 @@ limitations under the License.
 
 # amp-auto-ads
 
-## Behavior
+## Usage
+
+Dynamically injects ads into an AMP page by using a remotely-served configuration file.
 
 Given a sufficient number of valid placements (supplied in the configuration),
 `amp-auto-ads` tries to insert additional ads while adhering to a set of
@@ -47,35 +49,20 @@ should be specified on the tag.
 </amp-auto-ads>
 ```
 
-## Supported ad networks
-
-- [AdSense](../../ads/google/adsense.md)
-- [Denakop](https://denakop.com)
-- [DoubleClick (experimental)](../../ads/google/doubleclick.md)
-- [Premium Programmatic](https://premiumads.com.br)
+### Supported ad networks
 
-## Attributes
-
-<table>
-  <tr>
-    <td width="40%"><strong>type (required)</strong></td>
-    <td>An identifier for the ad network.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-foo-bar</strong></td>
-    <td>Most ad networks require further configuration, which can be passed to the network by using HTML <code>data-</code> attributes. The parameter names are subject to standard data attribute dash to camel case conversion. For example, "data-foo-bar" is send to the ad for configuration as "fooBar". See the documentation for the <a href="#supported-ad-networks">ad network</a> on which attributes can be used.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+-   [AdSense](../../ads/google/adsense.md)
+-   [Alright](https://alright.com.br)
+-   [Denakop](https://denakop.com)
+-   [DoubleClick (experimental)](../../ads/google/doubleclick.md)
+-   [FirstImpression.io](https://www.firstimpression.io)
+-   [Premium Programmatic](https://premiumads.com.br)
 
-## Configuration Spec
+### Configuration Spec
 
 The configuration defines where on the page `<amp-auto-ads>` can place ads. The configuration is fetched from a third-party ad network at the URL defined in `ad-network-config.js`. The configuration should be a serialized JSON object matching the [`ConfigObj`](#configobj) definition described below.
 
-### Example Configuration
+#### Example Configuration
 
 The following example specifies that the ad should be positioned immediately
 positions immediately after all `<P class='paragraph'>` elements that are within the third `<DIV id='domId'>` on the page. An ad placed in any of these positions should be of type BANNER and have a top margin of 4px and a bottom margin of 10px.
@@ -103,9 +90,9 @@ positions immediately after all `<P class='paragraph'>` elements that are within
 }
 ```
 
-### Object Definitions
+#### Object Definitions
 
-#### ConfigObj
+##### ConfigObj
 
 The fields to specify in the configuration object:
 
@@ -135,13 +122,13 @@ The fields to specify in the configuration object:
     <td><code>adConstraints</code></td>
     <td>AdConstraintsObj</td>
     <td>
-      An <em>optional</em> field that specifies the contraints that should be used when placing ads on the page. If not specified then
+      An <em>optional</em> field that specifies the constraints that should be used when placing ads on the page. If not specified then
       <code>amp-auto-ads</code> will attempt to use the default constraints specified in [ad-network-config.js](0.1/ad-network-config.js).
     </td>
   </tr>
 </table>
 
-#### PlacementObj
+##### PlacementObj
 
 The fields to specify in the `placements` configuration object:
 
@@ -195,7 +182,7 @@ The fields to specify in the `placements` configuration object:
   </tr>
 </table>
 
-#### AnchorObj
+##### AnchorObj
 
 The fields to specify in the `anchor` configuration object:
 
@@ -235,7 +222,7 @@ The fields to specify in the `anchor` configuration object:
   </tr>
 </table>
 
-#### PlacementStyleObj
+##### PlacementStyleObj
 
 The fields to specify in the `style` configuration object:
 
@@ -259,7 +246,7 @@ The fields to specify in the `style` configuration object:
   </tr>
 </table>
 
-#### RelativePositionEnum
+##### RelativePositionEnum
 
 The ENUM values for the `pos` field in the `placements` configuration object:
 
@@ -291,7 +278,7 @@ The ENUM values for the `pos` field in the `placements` configuration object:
   </tr>
 </table>
 
-#### AttributesEnum
+##### AttributesEnum
 
 The ENUM value indicates attributes from configuration object for different ad formats:
 
@@ -313,7 +300,7 @@ The ENUM value indicates attributes from configuration object for different ad f
   </tr>
 </table>
 
-#### PlacementTypeEnum
+##### PlacementTypeEnum
 
 The ENUM values for the `type` field in the `placements` configuration object:
 
@@ -330,7 +317,7 @@ The ENUM values for the `type` field in the `placements` configuration object:
   </tr>
 </table>
 
-#### AdConstraintsObj
+##### AdConstraintsObj
 
 The fields to specify in the `adConstraints` configuration object:
 
@@ -370,7 +357,7 @@ The fields to specify in the `adConstraints` configuration object:
   </tr>
 </table>
 
-#### SubsequentMinSpacingObj
+##### SubsequentMinSpacingObj
 
 The fields to specify in the `subsequentMinSpacing` configuration object. `subsequentMinSpacing` entries
 can be used to change the spacing required between any additional ads based on the number of ads already on
@@ -426,6 +413,27 @@ it to be clear of other ads by at least 1000px.
   </tr>
 </table>
 
+## Attributes
+
+### `type` (required)
+
+An identifier for the ad network.
+
+### `data-foo-bar`
+
+Most ad networks require further configuration, which can be passed to the
+network by using HTML `data–` attributes. The parameter names are subject to
+standard data attribute dash to camel case conversion. For example,
+"data-foo-bar" is send to the ad for configuration as "fooBar". See the
+documentation for the
+[ad network](#supported-ad-networks)
+on which attributes can be used.
+
+### common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
+
 ## Validation
 
-See [amp-auto-ads rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-auto-ads/validator-amp-auto-ads.protoascii) in the AMP validator specification.
+See [amp-auto-ads rules](validator-amp-auto-ads.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-auto-ads/validator-amp-auto-ads.protoascii b/extensions/amp-auto-ads/validator-amp-auto-ads.protoascii
index fd0e152c45b5b..08b1bdb8a6121 100644
--- a/extensions/amp-auto-ads/validator-amp-auto-ads.protoascii
+++ b/extensions/amp-auto-ads/validator-amp-auto-ads.protoascii
@@ -33,5 +33,5 @@ tags: {  # <amp-auto-ads>
     mandatory: true
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-auto-ads"
+  spec_url: "https://amp.dev/documentation/components/amp-auto-ads/"
 }
diff --git a/extensions/amp-auto-lightbox/0.1/amp-auto-lightbox.js b/extensions/amp-auto-lightbox/0.1/amp-auto-lightbox.js
index 9ea47a9f1ded8..24d7f7b438b3d 100644
--- a/extensions/amp-auto-lightbox/0.1/amp-auto-lightbox.js
+++ b/extensions/amp-auto-lightbox/0.1/amp-auto-lightbox.js
@@ -22,17 +22,19 @@
  * Instead, the runtime loads it when encountering an <amp-img>.
  */
 
-import {AmpEvents} from '../../../src/amp-events';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {AutoLightboxEvents} from '../../../src/auto-lightbox';
-import {CommonSignals} from '../../../src/common-signals';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
 import {Services} from '../../../src/services';
 import {
   closestAncestorElementBySelector,
+  dispatchCustomEvent,
   whenUpgradedToCustomElement,
 } from '../../../src/dom';
 import {dev} from '../../../src/log';
-import {toArray} from '../../../src/types';
-import {tryParseJson} from '../../../src/json';
+import {measureIntersectionNoRoot} from '../../../src/utils/intersection-no-root';
+import {toArray} from '../../../src/core/types/array';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 const TAG = 'amp-auto-lightbox';
 
@@ -123,11 +125,13 @@ const getRootNode = (ampdoc) => ampdoc.getRootNode();
 export class Criteria {
   /**
    * @param {!Element} element
+   * @param {number} renderWidth
+   * @param {number} renderHeight
    * @return {boolean}
    */
-  static meetsAll(element) {
+  static meetsAll(element, renderWidth, renderHeight) {
     return (
-      Criteria.meetsSizingCriteria(element) &&
+      Criteria.meetsSizingCriteria(element, renderWidth, renderHeight) &&
       Criteria.meetsTreeShapeCriteria(element)
     );
   }
@@ -151,17 +155,17 @@ export class Criteria {
 
   /**
    * @param {!Element} element
+   * @param {number} renderWidth
+   * @param {number} renderHeight
    * @return {boolean}
    */
-  static meetsSizingCriteria(element) {
-    const {naturalWidth, naturalHeight} = getMaxNaturalDimensions(
+  static meetsSizingCriteria(element, renderWidth, renderHeight) {
+    const {naturalHeight, naturalWidth} = getMaxNaturalDimensions(
       dev().assertElement(element.querySelector('img'))
     );
 
-    const {width: renderWidth, height: renderHeight} = element.getLayoutBox();
-
     const viewport = Services.viewportForDoc(element);
-    const {width: vw, height: vh} = viewport.getSize();
+    const {height: vh, width: vw} = viewport.getSize();
 
     return meetsSizingCriteria(
       renderWidth,
@@ -213,7 +217,7 @@ export function getMaxWidthFromSrcset(img) {
  * @return {{naturalWidth: number, naturalHeight: number}}
  */
 export function getMaxNaturalDimensions(img) {
-  const {naturalWidth, naturalHeight} = img;
+  const {naturalHeight, naturalWidth} = img;
   const ratio = naturalWidth / naturalHeight;
   const maxWidthFromSrcset = getMaxWidthFromSrcset(img);
   if (maxWidthFromSrcset > naturalWidth) {
@@ -340,7 +344,7 @@ export class DocMetaAnnotations {
         const {textContent} = el;
         return (tryParseJson(textContent) || {})['@type'];
       })
-      .filter((typeOrUndefined) => typeOrUndefined);
+      .filter(Boolean);
   }
 
   /**
@@ -420,7 +424,7 @@ export function apply(ampdoc, element) {
       REQUIRED_EXTENSION
     );
 
-    element.dispatchCustomEvent(AutoLightboxEvents.NEWLY_SET);
+    dispatchCustomEvent(element, AutoLightboxEvents.NEWLY_SET);
 
     return element;
   });
@@ -434,16 +438,21 @@ export function apply(ampdoc, element) {
 export function runCandidates(ampdoc, candidates) {
   return candidates.map((candidate) =>
     whenLoaded(candidate).then(() => {
-      // <amp-img> will change the img's src inline data on unlayout and remove
-      // it from DOM, but a LOAD_END event would still be triggered afterwards.
-      if (candidate.signals().get(CommonSignals.UNLOAD)) {
-        return;
-      }
-      if (!Criteria.meetsAll(candidate)) {
-        return;
-      }
-      dev().info(TAG, 'apply', candidate);
-      return apply(ampdoc, candidate);
+      return measureIntersectionNoRoot(candidate).then(
+        ({boundingClientRect}) => {
+          // <amp-img> will change the img's src inline data on unlayout and
+          // remove it from DOM.
+          if (!candidate.signals().get(CommonSignals.LOAD_END)) {
+            return;
+          }
+          const {height, width} = boundingClientRect;
+          if (!Criteria.meetsAll(candidate, width, height)) {
+            return;
+          }
+          dev().info(TAG, 'apply', candidate);
+          return apply(ampdoc, candidate);
+        }
+      );
     }, NOOP)
   );
 }
diff --git a/extensions/amp-auto-lightbox/0.1/test-e2e/test-amp-auto-lightbox.js b/extensions/amp-auto-lightbox/0.1/test-e2e/test-amp-auto-lightbox.js
index 2d472fa227d21..539b8d9c09867 100644
--- a/extensions/amp-auto-lightbox/0.1/test-e2e/test-amp-auto-lightbox.js
+++ b/extensions/amp-auto-lightbox/0.1/test-e2e/test-amp-auto-lightbox.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'amp-auto-lightbox e2e',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-auto-lightbox/amp-auto-lightbox.html',
+    fixture: 'amp-auto-lightbox/amp-auto-lightbox.html',
     initialRect: {width: 600, height: 600},
     environments: ['single'],
     browsers: ['chrome'],
diff --git a/extensions/amp-auto-lightbox/0.1/test/test-amp-auto-lightbox.js b/extensions/amp-auto-lightbox/0.1/test/test-amp-auto-lightbox.js
index 44261a1b503e8..ce551fc021cd2 100644
--- a/extensions/amp-auto-lightbox/0.1/test/test-amp-auto-lightbox.js
+++ b/extensions/amp-auto-lightbox/0.1/test/test-amp-auto-lightbox.js
@@ -15,7 +15,7 @@
  */
 
 import {AutoLightboxEvents} from '../../../../src/auto-lightbox';
-import {CommonSignals} from '../../../../src/common-signals';
+import {CommonSignals} from '../../../../src/core/constants/common-signals';
 import {
   Criteria,
   DocMetaAnnotations,
@@ -33,11 +33,11 @@ import {
   scan,
 } from '../amp-auto-lightbox';
 import {Services} from '../../../../src/services';
-import {Signals} from '../../../../src/utils/signals';
+import {Signals} from '../../../../src/core/data-structures/signals';
 import {createElementWithAttributes} from '../../../../src/dom';
 import {htmlFor} from '../../../../src/static-template';
-import {isArray} from '../../../../src/types';
-import {tryResolve} from '../../../../src/utils/promise';
+import {isArray} from '../../../../src/core/types';
+import {tryResolve} from '../../../../src/core/data-structures/promise';
 
 const TAG = 'amp-auto-lightbox';
 
@@ -133,7 +133,7 @@ describes.realWin(
         `Criteria.meetsTreeShapeCriteria(html\`${outerHtml}\`)`;
 
       function itAcceptsOrRejects(scenarios) {
-        scenarios.forEach(({rejects, accepts, mutate, wrapWith}) => {
+        scenarios.forEach(({accepts, mutate, rejects, wrapWith}) => {
           const maybeWrap = (root) =>
             wrapWith ? wrap(root, wrapWith()) : root;
           const maybeMutate = (root) => mutate && mutate(root);
@@ -259,7 +259,7 @@ describes.realWin(
 
     describe('meetsSizingCriteria', () => {
       const areaDeltaPerc = RENDER_AREA_RATIO * 100;
-      const {vw, vh} = {vw: 1000, vh: 600};
+      const {vh, vw} = {vw: 1000, vh: 600};
 
       const expectMeetsSizingCriteria = (
         renderWidth,
@@ -517,10 +517,16 @@ describes.realWin(
         const signals = new Signals();
         img.signals = () => signals;
 
-        signals.signal(CommonSignals.UNLOAD);
         signals.signal(CommonSignals.LOAD_END);
 
-        const elected = await Promise.all(runCandidates(env.ampdoc, [img]));
+        const candidatePromise = Promise.all(runCandidates(env.ampdoc, [img]));
+
+        // Skip microtask and reset LOAD_END to emulate unloading in the middle
+        // of the candidate's measurement.
+        await new Promise((resolve) => resolve());
+        signals.reset(CommonSignals.LOAD_END);
+
+        const elected = await candidatePromise;
         expect(elected[0]).to.be.undefined;
       });
 
@@ -727,13 +733,11 @@ describes.realWin(
           <amp-img src="chabuddy.g" layout="flex-item"></amp-img>
         `;
 
-        element.dispatchCustomEvent = env.sandbox.spy();
+        const eventSpy = env.sandbox.spy();
+        element.addEventListener(AutoLightboxEvents.NEWLY_SET, eventSpy);
 
         await apply(env.ampdoc, element);
-
-        expect(
-          element.dispatchCustomEvent.withArgs(AutoLightboxEvents.NEWLY_SET)
-        ).to.have.been.calledOnce;
+        expect(eventSpy).to.be.calledOnce;
       });
     });
   }
diff --git a/extensions/amp-auto-lightbox/0.1/utils/promise.js b/extensions/amp-auto-lightbox/0.1/utils/promise.js
deleted file mode 100644
index 3b26513d4a11d..0000000000000
--- a/extensions/amp-auto-lightbox/0.1/utils/promise.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * 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.
- */
-import {tryResolve} from '../../../../src/utils/promise';
-
-export const resolveFalse = () => tryResolve(() => false);
-export const resolveTrue = () => tryResolve(() => true);
diff --git a/extensions/amp-auto-lightbox/OWNERS b/extensions/amp-auto-lightbox/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-auto-lightbox/OWNERS
+++ b/extensions/amp-auto-lightbox/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-autocomplete/0.1/amp-autocomplete.js b/extensions/amp-autocomplete/0.1/amp-autocomplete.js
index 2895115fb4c96..deed6149ef40c 100644
--- a/extensions/amp-autocomplete/0.1/amp-autocomplete.js
+++ b/extensions/amp-autocomplete/0.1/amp-autocomplete.js
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {AutocompleteBindingDef} from './autocomplete-binding-def';
 import {AutocompleteBindingInline} from './autocomplete-binding-inline';
 import {AutocompleteBindingSingle} from './autocomplete-binding-single';
 import {CSS} from '../../../build/amp-autocomplete-0.1.css';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Layout} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {SsrTemplateHelper} from '../../../src/ssr-template-helper';
@@ -31,13 +31,21 @@ import {
 import {addParamToUrl} from '../../../src/url';
 import {createCustomEvent} from '../../../src/event-helper';
 import {dev, user, userAssert} from '../../../src/log';
-import {dict, hasOwn, map, ownProperty} from '../../../src/utils/object';
-import {getValueForExpr, tryParseJson} from '../../../src/json';
-import {includes, startsWith} from '../../../src/string';
+import {
+  dict,
+  getValueForExpr,
+  hasOwn,
+  map,
+  ownProperty,
+} from '../../../src/core/types/object';
+
+import {includes} from '../../../src/core/types/string';
 import {isAmp4Email} from '../../../src/format';
-import {isArray, isEnumValue, toArray} from '../../../src/types';
-import {mod} from '../../../src/utils/math';
-import {once} from '../../../src/utils/function';
+import {isArray, isEnumValue} from '../../../src/core/types';
+import {tryParseJson} from '../../../src/core/types/object/json';
+
+import {mod} from '../../../src/core/math';
+import {once} from '../../../src/core/types/function';
 import {removeChildren, tryFocus} from '../../../src/dom';
 import {
   setupAMPCors,
@@ -47,6 +55,15 @@ import {
 import {toggle} from '../../../src/style';
 import fuzzysearch from '../../../third_party/fuzzysearch/index';
 
+/**
+ * @typedef {{
+ *   selectedObject: ?JsonObject,
+ *   selectedText: ?string
+ * }}
+ */
+// eslint-disable-next-line no-unused-vars
+let SelectionValues;
+
 const TAG = 'amp-autocomplete';
 
 /**
@@ -102,10 +119,10 @@ export class AmpAutocomplete extends AMP.BaseElement {
     this.minChars_ = 1;
 
     /**
-     * The value of the "max-entries" attribute on <autocomplete>.
+     * The value of the "max-items" attribute on <autocomplete>.
      * @private {?number}
      */
-    this.maxEntries_ = null;
+    this.maxItems_ = null;
 
     /**
      * If the "suggest-first" attribute is present on <autocomplete>.
@@ -177,8 +194,8 @@ export class AmpAutocomplete extends AMP.BaseElement {
      */
     this.initialAutocompleteAttr_ = null;
 
-    /** @const @private {!../../../src/service/template-impl.Templates} */
-    this.templates_ = Services.templatesFor(this.win);
+    /** @private {?../../../src/service/template-impl.Templates} */
+    this.templates_ = null;
 
     /**
      * Whether a <template> or <script type="text/plain"> tag is present.
@@ -211,11 +228,24 @@ export class AmpAutocomplete extends AMP.BaseElement {
     this.viewport_ = null;
 
     /** @private {boolean} */
-    this.interacted_ = false;
+    this.hasFetchedInitialData_ = false;
+
+    /**
+     * To ensure that we provide an accessible experience,
+    * the suggestion container must have a unique ID.
+     * In case the autocomplete doesn't have an ID we use a
+     * random number to ensure uniqueness.
+     @private {number|string}
+     */
+    this.containerId_ = element.id
+      ? element.id
+      : Math.floor(Math.random() * 100) + '_AMP_content_';
   }
 
   /** @override */
   buildCallback() {
+    this.templates_ = Services.templatesForDoc(this.element);
+
     const doc = this.element.ownerDocument;
     const isEmail = doc && isAmp4Email(doc);
     userAssert(
@@ -257,7 +287,15 @@ export class AmpAutocomplete extends AMP.BaseElement {
 
     this.inputElement_.setAttribute('dir', 'auto');
     this.inputElement_.setAttribute('aria-autocomplete', 'both');
-    this.inputElement_.setAttribute('role', 'combobox');
+    this.inputElement_.setAttribute('role', 'textbox');
+    this.inputElement_.setAttribute('aria-controls', this.containerId_);
+    if (this.inputElement_.tagName === 'INPUT') {
+      this.element.setAttribute('role', 'combobox');
+      this.inputElement_.setAttribute('aria-multiline', 'false');
+    }
+    this.element.setAttribute('aria-haspopup', 'listbox');
+    this.element.setAttribute('aria-expanded', 'false');
+    this.element.setAttribute('aria-owns', this.containerId_);
 
     const form = this.getFormOrNull_();
     if (form && form.hasAttribute('autocomplete')) {
@@ -285,42 +323,71 @@ export class AmpAutocomplete extends AMP.BaseElement {
         !this.element.hasAttribute('filter'),
         `${TAG} does not support client-side filter when server-side render is required.`
       );
-      this.filter_ = FilterType.NONE;
-    } else {
-      this.filter_ = userAssert(
-        this.element.getAttribute('filter'),
-        '%s requires "filter" attribute. %s',
-        TAG,
-        this.element
-      );
-      userAssert(
-        isEnumValue(FilterType, this.filter_),
-        'Unexpected filter: %s. %s',
-        this.filter_,
-        this.element
-      );
     }
+    this.filter_ = this.element.getAttribute('filter') || FilterType.NONE;
+    userAssert(
+      isEnumValue(FilterType, this.filter_),
+      'Unexpected filter: %s. %s',
+      this.filter_,
+      this.element
+    );
 
     // Read configuration attributes
     this.minChars_ = this.element.hasAttribute('min-characters')
       ? parseInt(this.element.getAttribute('min-characters'), 10)
       : 1;
-    this.maxEntries_ = this.element.hasAttribute('max-entries')
-      ? parseInt(this.element.getAttribute('max-entries'), 10)
-      : null;
+    if (this.element.hasAttribute('max-entries')) {
+      user().warn(TAG, '"max-items" attribute is preferred to "max-entries"');
+    }
+    const maxItems =
+      this.element.getAttribute('max-items') ||
+      this.element.getAttribute('max-entries');
+    this.maxItems_ = maxItems ? parseInt(maxItems, 10) : null;
     this.shouldSuggestFirst_ = this.binding_.shouldSuggestFirst();
     this.highlightUserEntry_ = this.element.hasAttribute(
       'highlight-user-entry'
     );
 
-    // Set accessibility attributes
-    this.element.setAttribute('aria-haspopup', 'listbox');
     this.container_ = this.createContainer_();
     this.element.appendChild(this.container_);
 
+    this.initializeListeners_();
+
     return Promise.resolve();
   }
 
+  /**
+   * Initializes listeners for keydown, mousedown, focus, etc. events.
+   * @private
+   */
+  initializeListeners_() {
+    this.inputElement_.addEventListener(
+      'touchstart',
+      () => {
+        this.checkFirstInteractionAndMaybeFetchData_();
+      },
+      {passive: true}
+    );
+    this.inputElement_.addEventListener('input', () => {
+      this.inputHandler_();
+    });
+    this.inputElement_.addEventListener('keydown', (e) => {
+      this.keyDownHandler_(e);
+    });
+    this.inputElement_.addEventListener('focus', () => {
+      this.checkFirstInteractionAndMaybeFetchData_().then(() => {
+        const display = this.binding_.shouldShowOnFocus();
+        this.toggleResultsHandler_(display);
+      });
+    });
+    this.inputElement_.addEventListener('blur', () => {
+      this.toggleResultsHandler_(false);
+    });
+    this.container_.addEventListener('mousedown', (e) => {
+      this.selectHandler_(e);
+    });
+  }
+
   /**
    * amp-autocomplete expects exactly one nested input or textarea.
    * @return {!HTMLInputElement}
@@ -406,6 +473,7 @@ export class AmpAutocomplete extends AMP.BaseElement {
         const attributes = dict({
           'ampAutocompleteAttributes': {
             'items': itemsExpr,
+            'maxItems': this.maxItems_,
           },
         });
         return this.getSsrTemplateHelper().ssr(
@@ -465,6 +533,7 @@ export class AmpAutocomplete extends AMP.BaseElement {
       container.classList.add('i-amphtml-autocomplete-results-up');
     }
     container.setAttribute('role', 'listbox');
+    container.setAttribute('id', this.containerId_);
     toggle(container, false);
     return container;
   }
@@ -474,32 +543,9 @@ export class AmpAutocomplete extends AMP.BaseElement {
     // Disable autofill in browsers.
     this.inputElement_.setAttribute('autocomplete', 'off');
 
-    // Register event handlers.
-    this.inputElement_.addEventListener(
-      'touchstart',
-      () => {
-        this.checkFirstInteractionAndMaybeFetchData_();
-      },
-      {passive: true}
-    );
-    this.inputElement_.addEventListener('input', () => {
-      this.inputHandler_();
-    });
-    this.inputElement_.addEventListener('keydown', (e) => {
-      this.keyDownHandler_(e);
-    });
-    this.inputElement_.addEventListener('focus', () => {
-      this.checkFirstInteractionAndMaybeFetchData_().then(() => {
-        const display = this.binding_.shouldShowOnFocus();
-        this.toggleResultsHandler_(display);
-      });
-    });
-    this.inputElement_.addEventListener('blur', () => {
-      this.toggleResultsHandler_(false);
-    });
-    this.container_.addEventListener('mousedown', (e) => {
-      this.selectHandler_(e);
-    });
+    if (this.element.hasAttribute('prefetch')) {
+      this.checkFirstInteractionAndMaybeFetchData_();
+    }
 
     return this.autocomplete_(this.sourceData_, this.userInput_);
   }
@@ -511,6 +557,7 @@ export class AmpAutocomplete extends AMP.BaseElement {
       return Promise.resolve();
     }
     if (typeof src === 'string') {
+      this.srcBase_ = src;
       return this.getRemoteData_().then(
         (remoteData) => {
           this.sourceData_ = remoteData || [];
@@ -575,9 +622,9 @@ export class AmpAutocomplete extends AMP.BaseElement {
   inputHandler_() {
     if (
       this.binding_.shouldAutocomplete(
-        /** @type {!HTMLInputElement} */ (dev().assertElement(
-          this.inputElement_
-        ))
+        /** @type {!HTMLInputElement} */ (
+          dev().assertElement(this.inputElement_)
+        )
       )
     ) {
       return this.maybeFetchAndAutocomplete_();
@@ -642,9 +689,11 @@ export class AmpAutocomplete extends AMP.BaseElement {
    */
   selectHandler_(event) {
     const element = dev().assertElement(event.target);
-    const selectedValue = this.setInputValue_(this.getItemElement_(element));
+    const selectedElement = this.getItemElement_(element);
+    const {selectedObject, selectedText} =
+      this.updateAndGetElementSelections_(selectedElement);
     return this.mutateElement(() => {
-      this.selectItem_(selectedValue);
+      this.selectItem_(selectedText, selectedObject);
     });
   }
 
@@ -658,9 +707,10 @@ export class AmpAutocomplete extends AMP.BaseElement {
    */
   autocomplete_(data, opt_input = '') {
     this.clearAllItems_();
-    if (opt_input.length < this.minChars_ || !data) {
+    if (!data || opt_input.length < this.minChars_) {
       return Promise.resolve();
-    } else if (this.isSsr_) {
+    }
+    if (this.isSsr_) {
       return hasOwn(data, 'html')
         ? this.renderResults_(
             data,
@@ -668,9 +718,8 @@ export class AmpAutocomplete extends AMP.BaseElement {
             opt_input
           )
         : Promise.resolve();
-    } else {
-      return this.filterDataAndRenderResults_(data, opt_input);
     }
+    return this.filterDataAndRenderResults_(data, opt_input);
   }
 
   /**
@@ -686,8 +735,19 @@ export class AmpAutocomplete extends AMP.BaseElement {
       return Promise.resolve();
     }
     const filteredData = this.filterData_(sourceData, input);
+    const dataWithConverter = filteredData.map((item) => {
+      let itemWithConverter = item;
+      // Add a function that converts the object itself to a JSON string,
+      // to make it available in mustache templates.
+      // We add a function instead of the already stringified representation
+      // so that we only convert these objects when data-json is present in the DOM.
+      if (typeof item === 'object') {
+        itemWithConverter = {...item, objToJson: () => JSON.stringify(item)};
+      }
+      return itemWithConverter;
+    });
     return this.renderResults_(
-      filteredData,
+      dataWithConverter,
       dev().assertElement(this.container_),
       input
     );
@@ -708,9 +768,7 @@ export class AmpAutocomplete extends AMP.BaseElement {
       renderPromise = this.getSsrTemplateHelper()
         .applySsrOrCsrTemplate(this.element, filteredData)
         .then((rendered) => {
-          const elements = isArray(rendered)
-            ? rendered
-            : toArray(rendered.children);
+          const elements = isArray(rendered) ? rendered : [rendered];
           elements.forEach((child) => {
             if (child.hasAttribute('data-disabled')) {
               child.setAttribute('aria-disabled', 'true');
@@ -752,7 +810,7 @@ export class AmpAutocomplete extends AMP.BaseElement {
   filterData_(data, input) {
     // Server-side filtering.
     if (this.filter_ === FilterType.NONE) {
-      return this.truncateToMaxEntries_(data);
+      return this.truncateToMaxItems_(data);
     }
 
     // Client-side filtering.
@@ -774,7 +832,7 @@ export class AmpAutocomplete extends AMP.BaseElement {
         case FilterType.SUBSTRING:
           return includes(item, input);
         case FilterType.PREFIX:
-          return startsWith(item, input);
+          return item.startsWith(input);
         case FilterType.TOKEN_PREFIX:
           return this.tokenPrefixMatch_(item, input);
         case FilterType.FUZZY:
@@ -790,7 +848,7 @@ export class AmpAutocomplete extends AMP.BaseElement {
       }
     });
 
-    return this.truncateToMaxEntries_(filteredData);
+    return this.truncateToMaxItems_(filteredData);
   }
 
   /**
@@ -850,7 +908,7 @@ export class AmpAutocomplete extends AMP.BaseElement {
       match &&
       (lastInputToken === '' ||
         remainingItemTokens.some((itemToken) => {
-          return startsWith(itemToken, lastInputToken);
+          return itemToken.startsWith(lastInputToken);
         }))
     );
   }
@@ -886,14 +944,14 @@ export class AmpAutocomplete extends AMP.BaseElement {
   }
 
   /**
-   * Truncate the given data to a maximum length of the max-entries attribute.
+   * Truncate the given data to a maximum length of the max-items attribute.
    * @param {!Array<!JsonObject|string>} data
    * @return {!Array<!JsonObject|string>}
    * @private
    */
-  truncateToMaxEntries_(data) {
-    if (this.maxEntries_ && this.maxEntries_ < data.length) {
-      data = data.slice(0, this.maxEntries_);
+  truncateToMaxItems_(data) {
+    if (this.maxItems_ && this.maxItems_ < data.length) {
+      data = data.slice(0, this.maxItems_);
     }
     return data;
   }
@@ -952,10 +1010,10 @@ export class AmpAutocomplete extends AMP.BaseElement {
    * @private
    */
   checkFirstInteractionAndMaybeFetchData_() {
-    if (this.interacted_ || !this.element.hasAttribute('src')) {
+    if (this.hasFetchedInitialData_ || !this.element.hasAttribute('src')) {
       return Promise.resolve();
     }
-    this.interacted_ = true;
+    this.hasFetchedInitialData_ = true;
     return this.getRemoteData_().then(
       (remoteData) => {
         this.sourceData_ = remoteData;
@@ -1022,39 +1080,78 @@ export class AmpAutocomplete extends AMP.BaseElement {
   }
 
   /**
-   * Writes the selected value into the input field.
-   * @param {?Element} element
-   * @return {?string}
+   * Updates the input value field with the textual representation of the selected element
+   * and returns an object containing both the textual representation of the selected element
+   * as well as its object representation, if available.
+   * @param {?Element} element Element selected by the user
+   * @return {!SelectionValues}
    * @private
    */
-  setInputValue_(element) {
+  updateAndGetElementSelections_(element) {
     if (element === null || element.hasAttribute('data-disabled')) {
-      return null;
+      return /** @type {!SelectionValues} */ ({
+        selectedObject: null,
+        selectedText: null,
+      });
     }
 
-    const selectedValue =
-      element.getAttribute('data-value') || element.textContent || '';
+    const selectedText = this.getSelectedTextValue_(element);
+    this.setInputValue_(selectedText);
+    const selectedObject = this.getSelectedObjectValue_(element);
+    return /** @type {!SelectionValues} */ ({selectedObject, selectedText});
+  }
 
+  /**
+   * Updates the input value with the provided textual representation of the selected element.
+   * @param {string} selectedText textual representation of the selected element
+   * @private
+   */
+  setInputValue_(selectedText) {
     this.inputElement_.value = this.binding_.getUserInputForUpdateWithSelection(
-      selectedValue,
+      selectedText,
       this.inputElement_,
       this.userInput_
     );
     this.userInput_ = this.binding_.getUserInputForUpdate(this.inputElement_);
+  }
 
-    return selectedValue;
+  /**
+   * Gets the textual representation of the selected element.
+   * @param {!Element} element
+   * @return {string}
+   * @private
+   */
+  getSelectedTextValue_(element) {
+    return element.getAttribute('data-value') || element.textContent || '';
+  }
+
+  /**
+   * Returns the object representation of the selected element.
+   * @param {!Element} element
+   * @return {?JsonObject}
+   * @private
+   */
+  getSelectedObjectValue_(element) {
+    if (!element.hasAttribute('data-json')) {
+      return null;
+    }
+
+    return tryParseJson(element.getAttribute('data-json'), (error) => {
+      throw error;
+    });
   }
 
   /**
    * Finish item selection with the selected value.
-   * @param {?string} value
+   * @param {?string} selectedText Textual representation of the selected value
+   * @param {?JsonObject} selectedObject Object representation of the selected value
    * @private
    */
-  selectItem_(value) {
-    if (value === null) {
+  selectItem_(selectedText, selectedObject) {
+    if (selectedText === null) {
       return;
     }
-    this.fireSelectAndChangeEvents_(value);
+    this.fireSelectAndChangeEvents_(selectedText, selectedObject);
     this.clearAllItems_();
     this.toggleResults_(false);
   }
@@ -1063,15 +1160,20 @@ export class AmpAutocomplete extends AMP.BaseElement {
    * Triggers select event on amp-autocomplete element and change events (bind
    * and native, for amp-script) on child input/textarea with the given value
    * as the value emitted.
-   * @param {string} value
+   * @param {string} selectedText Textual representation of the selected value
+   * @param {?JsonObject} selectedObject Object representation of the selected value
    * @private
    */
-  fireSelectAndChangeEvents_(value) {
+  fireSelectAndChangeEvents_(selectedText, selectedObject) {
     const selectName = 'select';
+    const eventValue = /** @type {!JsonObject} */ ({
+      value: selectedText,
+      ...(selectedObject && {valueAsObject: selectedObject}),
+    });
     const selectEvent = createCustomEvent(
       this.win,
       `amp-autocomplete.${selectName}`,
-      /** @type {!JsonObject} */ ({value})
+      eventValue
     );
     this.action_.trigger(
       this.element,
@@ -1080,25 +1182,12 @@ export class AmpAutocomplete extends AMP.BaseElement {
       ActionTrust.HIGH
     );
 
-    // Ensure on="change" is triggered for input
-    const changeName = 'change';
-    const changeEvent = createCustomEvent(
-      this.win,
-      `amp-autocomplete.${changeName}`,
-      /** @type {!JsonObject} */ ({value})
-    );
-    this.action_.trigger(
-      dev().assertElement(this.inputElement_),
-      changeName,
-      changeEvent,
-      ActionTrust.HIGH
-    );
-
     // Ensure native change listeners are triggered
     const nativeChangeEvent = createCustomEvent(
       this.win,
       'change',
-      /** @type {!JsonObject} */ ({value})
+      eventValue,
+      {bubbles: true}
     );
     this.inputElement_.dispatchEvent(nativeChangeEvent);
   }
@@ -1130,9 +1219,9 @@ export class AmpAutocomplete extends AMP.BaseElement {
     const newValue = newActiveElement.getAttribute('data-value');
 
     this.binding_.displayActiveItemInInput(
-      /** @type {!HTMLInputElement} */ (dev().assertElement(
-        this.inputElement_
-      )),
+      /** @type {!HTMLInputElement} */ (
+        dev().assertElement(this.inputElement_)
+      ),
       newValue,
       this.userInput_
     );
@@ -1142,11 +1231,9 @@ export class AmpAutocomplete extends AMP.BaseElement {
 
     return this.measureMutateElement(
       () => {
-        const {offsetTop: itemTop, offsetHeight: itemHeight} = newActiveElement;
-        const {
-          scrollTop: resultTop,
-          offsetHeight: resultHeight,
-        } = this.container_;
+        const {offsetHeight: itemHeight, offsetTop: itemTop} = newActiveElement;
+        const {offsetHeight: resultHeight, scrollTop: resultTop} =
+          this.container_;
         shouldScroll =
           resultTop > itemTop ||
           resultTop + resultHeight < itemTop + itemHeight;
@@ -1269,9 +1356,10 @@ export class AmpAutocomplete extends AMP.BaseElement {
         }
         this.binding_.removeSelectionHighlighting(this.inputElement_);
         if (this.areResultsDisplayed_() && this.activeElement_) {
-          const selectedValue = this.setInputValue_(this.activeElement_);
+          const {selectedObject, selectedText} =
+            this.updateAndGetElementSelections_(this.activeElement_);
           return this.mutateElement(() => {
-            this.selectItem_(selectedValue);
+            this.selectItem_(selectedText, selectedObject);
             this.resetActiveElement_();
           });
         }
@@ -1290,9 +1378,10 @@ export class AmpAutocomplete extends AMP.BaseElement {
       case Keys.TAB:
         if (this.areResultsDisplayed_() && this.activeElement_) {
           event.preventDefault();
-          const selectedValue = this.setInputValue_(this.activeElement_);
+          const {selectedObject, selectedText} =
+            this.updateAndGetElementSelections_(this.activeElement_);
           return this.mutateElement(() => {
-            this.selectItem_(selectedValue);
+            this.selectItem_(selectedText, selectedObject);
           });
         }
         return Promise.resolve();
diff --git a/extensions/amp-autocomplete/0.1/autocomplete-binding-inline.js b/extensions/amp-autocomplete/0.1/autocomplete-binding-inline.js
index 36a9d3c1ab00d..edfc0735a7d63 100644
--- a/extensions/amp-autocomplete/0.1/autocomplete-binding-inline.js
+++ b/extensions/amp-autocomplete/0.1/autocomplete-binding-inline.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {ownProperty} from '../../../src/utils/object';
+import {ownProperty} from '../../../src/core/types/object';
 import {tryFocus} from '../../../src/dom';
 import {userAssert} from '../../../src/log';
 
@@ -83,7 +83,7 @@ export class AutocompleteBindingInline {
       return null;
     }
 
-    const {value, selectionStart: cursor} = inputEl;
+    const {selectionStart: cursor, value} = inputEl;
     let match, lastMatch;
 
     while ((match = regex.exec(value)) !== null) {
diff --git a/extensions/amp-autocomplete/0.1/autocomplete-binding-single.js b/extensions/amp-autocomplete/0.1/autocomplete-binding-single.js
index 6f0dc7f0c6863..36c68ffb4ca51 100644
--- a/extensions/amp-autocomplete/0.1/autocomplete-binding-single.js
+++ b/extensions/amp-autocomplete/0.1/autocomplete-binding-single.js
@@ -1,5 +1,3 @@
-import {userAssert} from '../../../src/log';
-
 /**
  * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
  *
@@ -16,6 +14,8 @@ import {userAssert} from '../../../src/log';
  * limitations under the License.
  */
 
+import {user} from '../../../src/log';
+
 /**
  * Single implementation of autocomplete. This supports autocompleting
  * a single input value in its entirety.
@@ -28,9 +28,6 @@ export class AutocompleteBindingSingle {
    */
   constructor(ampElement) {
     const {element} = ampElement;
-    /** @private {!Element} */
-    this.element_ = element;
-
     /**
      * The Single implementation of autocomplete should highlight
      * the diff between the user input and the active suggestion
@@ -40,13 +37,13 @@ export class AutocompleteBindingSingle {
      */
     this.shouldSuggestFirst_ = element.hasAttribute('suggest-first');
     const filter = element.getAttribute('filter');
-    userAssert(
-      !this.shouldSuggestFirst_ || filter === 'prefix',
-      '"suggest-first" requires "filter" type "prefix". ' +
-        ' Unexpected "filter" type: %s, %s',
-      filter,
-      this.element_
-    );
+    if (this.shouldSuggestFirst_ && filter !== 'prefix') {
+      this.shouldSuggestFirst_ = false;
+      user().warn(
+        'AMP-AUTOCOMPLETE',
+        '"suggest-first" expected "filter" type "prefix".'
+      );
+    }
 
     /**
      * The Single implementation of autocomplete will allow form
diff --git a/extensions/amp-autocomplete/0.1/test-e2e/test-amp-autocomplete-inline.js b/extensions/amp-autocomplete/0.1/test-e2e/test-amp-autocomplete-inline.js
index 14db8a232abe5..9bf8d456ea0d7 100644
--- a/extensions/amp-autocomplete/0.1/test-e2e/test-amp-autocomplete-inline.js
+++ b/extensions/amp-autocomplete/0.1/test-e2e/test-amp-autocomplete-inline.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'amp-autocomplete',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-autocomplete/amp-autocomplete-inline.amp.html',
+    fixture: 'amp-autocomplete/amp-autocomplete-inline.amp.html',
     // TODO: Restore 'environments' to default after supporting fourth test in
     // shadow environment.
     environments: ['single', 'viewer-demo'],
diff --git a/extensions/amp-autocomplete/0.1/test-e2e/test-amp-autocomplete.js b/extensions/amp-autocomplete/0.1/test-e2e/test-amp-autocomplete.js
index b84b15b91e10e..48411cf0917bc 100644
--- a/extensions/amp-autocomplete/0.1/test-e2e/test-amp-autocomplete.js
+++ b/extensions/amp-autocomplete/0.1/test-e2e/test-amp-autocomplete.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'amp-autocomplete',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-autocomplete/amp-autocomplete.amp.html',
+    fixture: 'amp-autocomplete/amp-autocomplete.amp.html',
     // TODO: Restore 'environments' to default after supporting fourth test in
     // shadow environment.
     environments: ['single', 'viewer-demo'],
diff --git a/extensions/amp-autocomplete/0.1/test/test-amp-autocomplete-bindings.js b/extensions/amp-autocomplete/0.1/test/test-amp-autocomplete-bindings.js
index d0984c4f28142..76f7231f68748 100644
--- a/extensions/amp-autocomplete/0.1/test/test-amp-autocomplete-bindings.js
+++ b/extensions/amp-autocomplete/0.1/test/test-amp-autocomplete-bindings.js
@@ -75,15 +75,14 @@ describes.realWin(
         expect(binding.shouldSuggestFirst()).to.be.false;
       });
 
-      it('should error when suggest first is present without prefix filter', () => {
-        expect(() => getBindingSingle({'suggest-first': 'true'})).to.throw(
-          /"suggest-first" requires "filter" type "prefix"/
-        );
+      it('should ignore when suggest first is present without prefix filter', () => {
+        binding = getBindingSingle({'suggest-first': ''});
+        expect(binding.shouldSuggestFirst()).to.be.false;
       });
 
-      it('should not suggest first when attribute is not present', () => {
+      it('should suggest first when attribute is present', () => {
         binding = getBindingSingle({
-          'suggest-first': 'true',
+          'suggest-first': '',
           'filter': 'prefix',
         });
         expect(binding.shouldSuggestFirst()).to.be.true;
diff --git a/extensions/amp-autocomplete/0.1/test/test-amp-autocomplete-init.js b/extensions/amp-autocomplete/0.1/test/test-amp-autocomplete-init.js
index 24c4c48e451d9..8c3b270e2f190 100644
--- a/extensions/amp-autocomplete/0.1/test/test-amp-autocomplete-init.js
+++ b/extensions/amp-autocomplete/0.1/test/test-amp-autocomplete-init.js
@@ -74,114 +74,96 @@ describes.realWin(
       );
       form.appendChild(ampAutocomplete);
       doc.body.appendChild(form);
-      return ampAutocomplete.build().then(() => ampAutocomplete);
+      return ampAutocomplete.buildInternal().then(() => ampAutocomplete);
     }
 
-    it('should build with "inline" and "query" when specified', () => {
-      return getAutocomplete({
+    it('should build with "inline" and "query" when specified', async () => {
+      const ampAutocomplete = await getAutocomplete({
         'filter': 'substring',
         'query': 'q',
-      }).then((ampAutocomplete) => {
-        const impl = ampAutocomplete.implementation_;
-        expect(impl.queryKey_).to.equal('q');
       });
+      const impl = await ampAutocomplete.getImpl();
+      expect(impl.queryKey_).to.equal('q');
     });
 
-    it('should layout', () => {
-      let impl, autocompleteSpy, clearAllSpy, filterSpy, renderSpy;
-      return getAutocomplete({
+    it('should layout', async () => {
+      const ampAutocomplete = await getAutocomplete({
         'filter': 'substring',
-      })
-        .then((ampAutocomplete) => {
-          impl = ampAutocomplete.implementation_;
-          const expectedItems = ['apple', 'banana', 'orange'];
-          expect(impl.sourceData_).to.have.ordered.members(expectedItems);
-          expect(impl.inputElement_).not.to.be.null;
-          expect(impl.container_).not.to.be.null;
-          expect(impl.filter_).to.equal('substring');
-          autocompleteSpy = env.sandbox.spy(impl, 'autocomplete_');
-          clearAllSpy = env.sandbox.spy(impl, 'clearAllItems_');
-          filterSpy = env.sandbox.spy(impl, 'filterData_');
-          renderSpy = env.sandbox.spy(impl, 'renderResults_');
-          return ampAutocomplete.layoutCallback();
-        })
-        .then(() => {
-          expect(impl.inputElement_.hasAttribute('autocomplete')).to.be.true;
-          expect(autocompleteSpy).to.have.been.calledOnce;
-          expect(clearAllSpy).to.have.been.calledOnce;
-          expect(filterSpy).not.to.have.been.called;
-          expect(renderSpy).not.to.have.been.called;
-        });
+      });
+      const impl = await ampAutocomplete.getImpl();
+
+      const expectedItems = ['apple', 'banana', 'orange'];
+      expect(impl.sourceData_).to.have.ordered.members(expectedItems);
+      expect(impl.inputElement_).not.to.be.null;
+      expect(impl.container_).not.to.be.null;
+      expect(impl.filter_).to.equal('substring');
+      const autocompleteSpy = env.sandbox.spy(impl, 'autocomplete_');
+      const clearAllSpy = env.sandbox.spy(impl, 'clearAllItems_');
+      const filterSpy = env.sandbox.spy(impl, 'filterData_');
+      const renderSpy = env.sandbox.spy(impl, 'renderResults_');
+
+      await ampAutocomplete.layoutCallback();
+      expect(impl.inputElement_.hasAttribute('autocomplete')).to.be.true;
+      expect(autocompleteSpy).to.have.been.calledOnce;
+      expect(clearAllSpy).to.have.been.calledOnce;
+      expect(filterSpy).not.to.have.been.called;
+      expect(renderSpy).not.to.have.been.called;
     });
 
-    it('should render inline data before first user interaction', () => {
-      let impl, filterAndRenderSpy, clearAllSpy, filterSpy, renderSpy;
-      return getAutocomplete({
+    it('should render inline data before first user interaction', async () => {
+      const ampAutocomplete = await getAutocomplete({
         'filter': 'substring',
         'min-characters': '0',
-      })
-        .then((ampAutocomplete) => {
-          impl = ampAutocomplete.implementation_;
-          const expectedItems = ['apple', 'banana', 'orange'];
-          expect(impl.sourceData_).to.have.ordered.members(expectedItems);
-          expect(impl.inputElement_).not.to.be.null;
-          expect(impl.container_).not.to.be.null;
-          expect(impl.filter_).to.equal('substring');
-          filterAndRenderSpy = env.sandbox.spy(
-            impl,
-            'filterDataAndRenderResults_'
-          );
-          clearAllSpy = env.sandbox.spy(impl, 'clearAllItems_');
-          filterSpy = env.sandbox.spy(impl, 'filterData_');
-          renderSpy = env.sandbox.spy(impl, 'renderResults_');
-          return ampAutocomplete.layoutCallback();
-        })
-        .then(() => {
-          expect(impl.inputElement_.hasAttribute('autocomplete')).to.be.true;
-          expect(filterAndRenderSpy).to.have.been.calledOnce;
-          expect(clearAllSpy).to.have.been.calledOnce;
-          expect(filterSpy).to.have.been.called;
-          expect(renderSpy).to.have.been.called;
-        });
+      });
+      const impl = await ampAutocomplete.getImpl();
+
+      const expectedItems = ['apple', 'banana', 'orange'];
+      expect(impl.sourceData_).to.have.ordered.members(expectedItems);
+      expect(impl.inputElement_).not.to.be.null;
+      expect(impl.container_).not.to.be.null;
+      expect(impl.filter_).to.equal('substring');
+      const filterAndRenderSpy = env.sandbox.spy(
+        impl,
+        'filterDataAndRenderResults_'
+      );
+      const clearAllSpy = env.sandbox.spy(impl, 'clearAllItems_');
+      const filterSpy = env.sandbox.spy(impl, 'filterData_');
+      const renderSpy = env.sandbox.spy(impl, 'renderResults_');
+
+      await ampAutocomplete.layoutCallback();
+      expect(impl.inputElement_.hasAttribute('autocomplete')).to.be.true;
+      expect(filterAndRenderSpy).to.have.been.calledOnce;
+      expect(clearAllSpy).to.have.been.calledOnce;
+      expect(filterSpy).to.have.been.called;
+      expect(renderSpy).to.have.been.called;
     });
 
-    it('should not render remote data before first user interaction', () => {
-      let impl, autocompleteSpy, clearAllSpy, filterSpy, renderSpy;
-      return getAutocomplete(
+    it('should not render remote data before first user interaction', async () => {
+      const ampAutocomplete = await getAutocomplete(
         {
           'filter': 'substring',
           'min-characters': '0',
         },
         '{ "items" : ["apple", "banana", "orange"] }',
         false
-      )
-        .then((ampAutocomplete) => {
-          impl = ampAutocomplete.implementation_;
-          expect(impl.sourceData_).to.be.null;
-          expect(impl.inputElement_).not.to.be.null;
-          expect(impl.container_).not.to.be.null;
-          expect(impl.filter_).to.equal('substring');
-          autocompleteSpy = env.sandbox.spy(impl, 'autocomplete_');
-          clearAllSpy = env.sandbox.spy(impl, 'clearAllItems_');
-          filterSpy = env.sandbox.spy(impl, 'filterData_');
-          renderSpy = env.sandbox.spy(impl, 'renderResults_');
-          return ampAutocomplete.layoutCallback();
-        })
-        .then(() => {
-          expect(impl.inputElement_.hasAttribute('autocomplete')).to.be.true;
-          expect(autocompleteSpy).to.have.been.calledOnce;
-          expect(clearAllSpy).to.have.been.calledOnce;
-          expect(filterSpy).not.to.have.been.called;
-          expect(renderSpy).not.to.have.been.called;
-        });
-    });
+      );
+      const impl = await ampAutocomplete.getImpl();
 
-    it('should require filter attribute', () => {
-      return allowConsoleError(() => {
-        return expect(getAutocomplete({})).to.be.rejectedWith(
-          /requires "filter" attribute/
-        );
-      });
+      expect(impl.sourceData_).to.be.null;
+      expect(impl.inputElement_).not.to.be.null;
+      expect(impl.container_).not.to.be.null;
+      expect(impl.filter_).to.equal('substring');
+      const autocompleteSpy = env.sandbox.spy(impl, 'autocomplete_');
+      const clearAllSpy = env.sandbox.spy(impl, 'clearAllItems_');
+      const filterSpy = env.sandbox.spy(impl, 'filterData_');
+      const renderSpy = env.sandbox.spy(impl, 'renderResults_');
+
+      await ampAutocomplete.layoutCallback();
+      expect(impl.inputElement_.hasAttribute('autocomplete')).to.be.true;
+      expect(autocompleteSpy).to.have.been.calledOnce;
+      expect(clearAllSpy).to.have.been.calledOnce;
+      expect(filterSpy).not.to.have.been.called;
+      expect(renderSpy).not.to.have.been.called;
     });
 
     it('should require valid filter attribute', () => {
@@ -194,24 +176,32 @@ describes.realWin(
       });
     });
 
-    it('should render with min-characters passed', () => {
-      return getAutocomplete({
+    it('should render with min-characters passed', async () => {
+      const ampAutocomplete = await getAutocomplete({
         'filter': 'substring',
         'min-characters': '3',
-      }).then((ampAutocomplete) => {
-        expect(ampAutocomplete.implementation_.minChars_).to.equal(3);
       });
+      const impl = await ampAutocomplete.getImpl();
+      expect(impl.minChars_).to.equal(3);
     });
 
-    it('should render with max-entries passed', () => {
-      return getAutocomplete({
+    it('should render with max-entries passed', async () => {
+      const ampAutocomplete = await getAutocomplete({
         'filter': 'substring',
         'max-entries': '10',
-      }).then((ampAutocomplete) => {
-        expect(ampAutocomplete.implementation_.maxEntries_).to.equal(10);
       });
+      const impl = await ampAutocomplete.getImpl();
+      expect(impl.maxItems_).to.equal(10);
     });
 
+    it('should render with max-items passed', async () => {
+      const ampAutocomplete = await getAutocomplete({
+        'filter': 'substring',
+        'max-items': '10',
+      });
+      const impl = await ampAutocomplete.getImpl();
+      expect(impl.maxItems_).to.equal(10);
+    });
     it('should error with invalid JSON script', () => {
       expectAsyncConsoleError(
         'Unexpected token o in JSON at position 32 [object HTMLElement]'
@@ -226,48 +216,45 @@ describes.realWin(
       ).to.be.rejectedWith('Unexpected token o in JSON at position 32');
     });
 
-    it('should accept empty JSON script', () => {
-      return getAutocomplete(
+    it('should accept empty JSON script', async () => {
+      const ampAutocomplete = await getAutocomplete(
         {
           'filter': 'substring',
         },
         '{}'
-      ).then((ampAutocomplete) => {
-        const impl = ampAutocomplete.implementation_;
-        expect(impl.sourceData_).to.be.an('array').that.is.empty;
-      });
+      );
+      const impl = await ampAutocomplete.getImpl();
+      expect(impl.sourceData_).to.be.an('array').that.is.empty;
     });
 
-    it('should accept empty items JSON script', () => {
-      return getAutocomplete(
+    it('should accept empty items JSON script', async () => {
+      const ampAutocomplete = await getAutocomplete(
         {
           'filter': 'substring',
         },
         '{ "items" : [] }'
-      ).then((ampAutocomplete) => {
-        const impl = ampAutocomplete.implementation_;
-        expect(impl.sourceData_).to.be.an('array').that.is.empty;
-      });
+      );
+      const impl = await ampAutocomplete.getImpl();
+      expect(impl.sourceData_).to.be.an('array').that.is.empty;
     });
 
-    it('should accept different item property from JSON script', () => {
-      return getAutocomplete(
+    it('should accept different item property from JSON script', async () => {
+      const ampAutocomplete = await getAutocomplete(
         {
           'filter': 'substring',
           'items': 'fruit',
         },
         '{ "fruit" : [ "apples", "bananas", "pears" ] }'
-      ).then((ampAutocomplete) => {
-        const impl = ampAutocomplete.implementation_;
-        expect(impl.sourceData_).to.have.ordered.members([
-          'apples',
-          'bananas',
-          'pears',
-        ]);
-      });
+      );
+      const impl = await ampAutocomplete.getImpl();
+      expect(impl.sourceData_).to.have.ordered.members([
+        'apples',
+        'bananas',
+        'pears',
+      ]);
     });
 
-    it('should not fetch remote data when specified in src before first user interaction', () => {
+    it('should not fetch remote data when specified in src before first user interaction', async () => {
       const data = {
         items: [
           'Albany, New York',
@@ -277,22 +264,19 @@ describes.realWin(
           'Austin, Texas',
         ],
       };
-      return getAutocomplete(
+      const ampAutocomplete = await getAutocomplete(
         {
           'filter': 'substring',
           'src': 'https://examples.com/json',
         },
         data,
         false
-      ).then((ampAutocomplete) => {
-        ampAutocomplete.layoutCallback().then(() => {
-          const impl = ampAutocomplete.implementation_;
-          expect(impl.sourceData_).to.be.null;
-        });
-      });
+      );
+      const impl = await ampAutocomplete.getImpl();
+      expect(impl.sourceData_).to.be.null;
     });
 
-    it('should not fetch remote data when specified in src and using items property before first user interaction', () => {
+    it('should not fetch remote data when specified in src and using items property before first user interaction', async () => {
       const data = {
         cities: [
           'Albany, New York',
@@ -302,7 +286,7 @@ describes.realWin(
           'Austin, Texas',
         ],
       };
-      return getAutocomplete(
+      const ampAutocomplete = await getAutocomplete(
         {
           'filter': 'substring',
           'src': 'https://examples.com/json',
@@ -310,15 +294,29 @@ describes.realWin(
         },
         data,
         false
-      ).then((ampAutocomplete) => {
-        ampAutocomplete.layoutCallback().then(() => {
-          const impl = ampAutocomplete.implementation_;
-          expect(impl.sourceData_).to.be.null;
-        });
-      });
+      );
+      const impl = await ampAutocomplete.getImpl();
+      expect(impl.sourceData_).to.be.null;
+    });
+
+    it('should prefetch remote data if prefetch attribute is specified', async () => {
+      const ampAutocomplete = await getAutocomplete(
+        {
+          'prefetch': '', // boolean attribute, presence means prefetch is enabled.
+          'src': 'https://examples.com/json',
+          'filter': 'substring',
+        },
+        '{}',
+        false
+      );
+      const impl = await ampAutocomplete.getImpl();
+      expect(impl.hasFetchedInitialData_).to.be.false;
+
+      await ampAutocomplete.layoutCallback();
+      expect(impl.hasFetchedInitialData_).to.be.true;
     });
 
-    it('should not fetch remote data when specified in src and using nested items property before first user interactino', () => {
+    it('should not fetch remote data when specified in src and using nested items property before first user interactino', async () => {
       const data = {
         deeply: {
           nested: {
@@ -332,7 +330,7 @@ describes.realWin(
           },
         },
       };
-      return getAutocomplete(
+      const ampAutocomplete = await getAutocomplete(
         {
           'filter': 'substring',
           'src': 'https://examples.com/json',
@@ -340,45 +338,44 @@ describes.realWin(
         },
         data,
         false
-      ).then((ampAutocomplete) => {
-        ampAutocomplete.layoutCallback().then(() => {
-          const impl = ampAutocomplete.implementation_;
-          expect(impl.sourceData_).be.null;
-        });
-      });
+      );
+      const impl = await ampAutocomplete.getImpl();
+      await ampAutocomplete.layoutCallback();
+      expect(impl.sourceData_).be.null;
     });
 
     it('should not require a form ancestor', () => {
       const autocomplete = setupAutocomplete({'filter': 'substring'});
       doc.body.appendChild(autocomplete);
-      return expect(autocomplete.build()).to.be.fulfilled;
+      return expect(autocomplete.buildInternal()).to.be.fulfilled;
     });
 
-    it('should read the autocomplete attribute on the form as null', () => {
-      return getAutocomplete({'filter': 'substring'}).then(
-        (ampAutocomplete) => {
-          const impl = ampAutocomplete.implementation_;
-          expect(impl.initialAutocompleteAttr_).to.be.null;
-        }
-      );
+    it('should read the autocomplete attribute on the form as null', async () => {
+      const ampAutocomplete = await getAutocomplete({'filter': 'substring'});
+      const impl = await ampAutocomplete.getImpl();
+      expect(impl.initialAutocompleteAttr_).to.be.null;
     });
 
-    it('should read the autocomplete attribute on the form as on', () => {
-      return getAutocomplete({'filter': 'substring'}, '{}', true, 'on').then(
-        (ampAutocomplete) => {
-          const impl = ampAutocomplete.implementation_;
-          expect(impl.initialAutocompleteAttr_).to.equal('on');
-        }
+    it('should read the autocomplete attribute on the form as on', async () => {
+      const ampAutocomplete = await getAutocomplete(
+        {'filter': 'substring'},
+        '{}',
+        true,
+        'on'
       );
+      const impl = await ampAutocomplete.getImpl();
+      expect(impl.initialAutocompleteAttr_).to.equal('on');
     });
 
-    it('should read the autocomplete attribute on the form as off', () => {
-      return getAutocomplete({'filter': 'substring'}, '{}', true, 'off').then(
-        (ampAutocomplete) => {
-          const impl = ampAutocomplete.implementation_;
-          expect(impl.initialAutocompleteAttr_).to.equal('off');
-        }
+    it('should read the autocomplete attribute on the form as off', async () => {
+      const ampAutocomplete = await getAutocomplete(
+        {'filter': 'substring'},
+        '{}',
+        true,
+        'off'
       );
+      const impl = await ampAutocomplete.getImpl();
+      expect(impl.initialAutocompleteAttr_).to.equal('off');
     });
   }
 );
diff --git a/extensions/amp-autocomplete/0.1/test/test-amp-autocomplete.js b/extensions/amp-autocomplete/0.1/test/test-amp-autocomplete.js
index 8bc7ca1760031..63874b6a11450 100644
--- a/extensions/amp-autocomplete/0.1/test/test-amp-autocomplete.js
+++ b/extensions/amp-autocomplete/0.1/test/test-amp-autocomplete.js
@@ -16,7 +16,7 @@
 
 import '../amp-autocomplete';
 import {AmpAutocomplete} from '../amp-autocomplete';
-import {Keys} from '../../../../src/utils/key-codes';
+import {Keys} from '../../../../src/core/constants/key-codes';
 import {createElementWithAttributes} from '../../../../src/dom';
 import {htmlFor} from '../../../../src/static-template';
 
@@ -73,13 +73,11 @@ describes.realWin(
 
     function getRenderedSuggestions() {
       const html = htmlFor(doc);
-      return html`
-        <div>
-          <div data-value="apple"></div>
-          <div data-value="mango"></div>
-          <div data-value="pear"></div>
-        </div>
-      `;
+      return [
+        html`<div data-value="apple"></div>`,
+        html`<div data-value="mango"></div>`,
+        html`<div data-value="pear"></div>`,
+      ];
     }
 
     describe('mutatedAttributesCallback_()', () => {
@@ -127,6 +125,29 @@ describes.realWin(
           });
       });
 
+      it('should mutate expected src value with "query" attribute', () => {
+        return impl
+          .layoutCallback()
+          .then(() => {
+            impl.queryKey_ = 'q';
+            impl.srcBase_ = 'https://www.data.com/';
+            expect(impl.generateSrc_('')).to.equal('https://www.data.com/?q=');
+            expect(impl.generateSrc_('abc')).to.equal(
+              'https://www.data.com/?q=abc'
+            );
+            return impl.mutatedAttributesCallback({
+              'src': 'https://example.com',
+            });
+          })
+          .then(() => {
+            expect(impl.srcBase_).to.equal('https://example.com');
+            expect(impl.generateSrc_('')).to.equal('https://example.com?q=');
+            expect(impl.generateSrc_('abc')).to.equal(
+              'https://example.com?q=abc'
+            );
+          });
+      });
+
       it('should pass on calls when src is type object with "items"', () => {
         return impl
           .mutatedAttributesCallback({'src': {'items': ['a', 'b', 'c']}})
@@ -265,6 +286,82 @@ describes.realWin(
       });
     });
 
+    describe('filterDataAndRenderResults_()', () => {
+      let renderSpy;
+
+      describe('with string data', () => {
+        beforeEach(() => {
+          // Use prefix filter for these tests.
+          impl.filter_ = 'prefix';
+          renderSpy = env.sandbox.spy(impl, 'renderResults_');
+        });
+
+        it('should resolve when data is []', async () => {
+          await impl.filterDataAndRenderResults_([], '');
+          expect(renderSpy).not.to.have.been.called;
+        });
+
+        it('should render data unchanged when input empty', async () => {
+          await impl.filterDataAndRenderResults_(['aa', 'bb', 'cc'], '');
+          expect(renderSpy).to.have.been.calledWith(
+            ['aa', 'bb', 'cc'],
+            impl.container_,
+            ''
+          );
+        });
+
+        it("should render no data when input doesn't match", async () => {
+          await impl.filterDataAndRenderResults_(['aa', 'bb', 'cc'], 'd');
+          expect(renderSpy).to.have.been.calledWith([], impl.container_, 'd');
+        });
+
+        it('should filter string data when input provided', async () => {
+          await impl.filterDataAndRenderResults_(['aa', 'bb', 'cc'], 'a');
+          expect(renderSpy).to.have.been.calledWith(
+            ['aa'],
+            impl.container_,
+            'a'
+          );
+        });
+      });
+
+      describe('with object data', () => {
+        beforeEach(async () => {
+          impl = await buildAmpAutocomplete(true);
+          impl.filter_ = 'prefix';
+          renderSpy = env.sandbox.spy(impl, 'renderResults_');
+          env.sandbox
+            .stub(impl.getSsrTemplateHelper(), 'applySsrOrCsrTemplate')
+            .returns(Promise.resolve(getRenderedSuggestions()));
+        });
+
+        it('should add objToJson property to objects', async () => {
+          const obj1 = {value: 'aa', any: 'zz'};
+          const obj2 = {value: 'bb', any: 'yy'};
+          await impl.filterDataAndRenderResults_([obj1, obj2], '');
+          expect(renderSpy).to.have.been.calledWithMatch(
+            [
+              {...obj1, objToJson: env.sandbox.match.func},
+              {...obj2, objToJson: env.sandbox.match.func},
+            ],
+            impl.container_,
+            ''
+          );
+        });
+
+        it('should add objToJson property to objects and filter', async () => {
+          const obj1 = {value: 'aa', any: 'zz'};
+          const obj2 = {value: 'bb', any: 'yy'};
+          await impl.filterDataAndRenderResults_([obj1, obj2], 'a');
+          expect(renderSpy).to.have.been.calledWithMatch(
+            [{...obj1, objToJson: env.sandbox.match.func}],
+            impl.container_,
+            'a'
+          );
+        });
+      });
+    });
+
     describe('renderResults()', () => {
       it('should delegate template rendering to viewer', async () => {
         impl = await buildAmpAutocomplete(true);
@@ -422,18 +519,18 @@ describes.realWin(
       expect(impl.tokenPrefixMatch_(item, 'd c')).to.be.false;
     });
 
-    it('truncateToMaxEntries_() should truncate given data', () => {
+    it('truncateToMaxItems_() should truncate given data', () => {
       expect(
-        impl.truncateToMaxEntries_(['a', 'b', 'c', 'd'])
+        impl.truncateToMaxItems_(['a', 'b', 'c', 'd'])
       ).to.have.ordered.members(['a', 'b', 'c', 'd']);
-      impl.maxEntries_ = 3;
-      expect(
-        impl.truncateToMaxEntries_(['a', 'b', 'c', 'd'])
-      ).to.have.ordered.members(['a', 'b', 'c']);
+      impl.maxItems_ = 3;
       expect(
-        impl.truncateToMaxEntries_(['a', 'b', 'c'])
+        impl.truncateToMaxItems_(['a', 'b', 'c', 'd'])
       ).to.have.ordered.members(['a', 'b', 'c']);
-      expect(impl.truncateToMaxEntries_(['a', 'b'])).to.have.ordered.members([
+      expect(impl.truncateToMaxItems_(['a', 'b', 'c'])).to.have.ordered.members(
+        ['a', 'b', 'c']
+      );
+      expect(impl.truncateToMaxItems_(['a', 'b'])).to.have.ordered.members([
         'a',
         'b',
       ]);
@@ -824,15 +921,49 @@ describes.realWin(
         });
     });
 
+    it('should set input based on data-value and select item from data-json', async () => {
+      const selectItemSpy = env.sandbox.spy(impl, 'selectItem_');
+      const mockEl = impl.createElementFromItem_('abc');
+      const object = {a: 'aa', b: 'bb'};
+      mockEl.setAttribute('data-json', JSON.stringify(object));
+
+      await impl.layoutCallback();
+      await impl.selectHandler_({target: mockEl});
+
+      expect(impl.inputElement_.value).to.equal('abc');
+      expect(selectItemSpy).to.have.been.calledWith('abc', object);
+    });
+
     it('should fire events from selectItem_', () => {
       const fireEventSpy = env.sandbox.spy(impl, 'fireSelectAndChangeEvents_');
       const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
       const dispatchSpy = env.sandbox.spy(impl.inputElement_, 'dispatchEvent');
       return impl.layoutCallback().then(() => {
         impl.toggleResults_(true);
-        impl.selectItem_('test');
+        impl.selectItem_('test', {val: 'v'});
+        expect(fireEventSpy).to.have.been.calledOnce;
+        expect(fireEventSpy).to.have.been.calledWith('test', {val: 'v'});
+        expect(triggerSpy).to.have.been.calledWith(impl.element, 'select');
+        expect(triggerSpy).to.have.been.calledWith(
+          impl.inputElement_,
+          'change'
+        );
+        expect(dispatchSpy).to.have.been.calledOnce;
+      });
+    });
+
+    it('should fire event if when selectedObject is null', () => {
+      const fireEventSpy = env.sandbox.spy(impl, 'fireSelectAndChangeEvents_');
+      const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
+      const dispatchSpy = env.sandbox.spy(impl.inputElement_, 'dispatchEvent');
+      return impl.layoutCallback().then(() => {
+        impl.toggleResults_(true);
+        impl.selectItem_('test', /* selectedObject= */ null);
         expect(fireEventSpy).to.have.been.calledOnce;
-        expect(fireEventSpy).to.have.been.calledWith('test');
+        expect(fireEventSpy).to.have.been.calledWith(
+          'test',
+          /* selectedObject= */ null
+        );
         expect(triggerSpy).to.have.been.calledWith(impl.element, 'select');
         expect(triggerSpy).to.have.been.calledWith(
           impl.inputElement_,
@@ -933,8 +1064,8 @@ describes.realWin(
       impl = await buildAmpAutocomplete(true);
       const sourceData = ['apple', 'mango', 'pear'];
       const rendered = getRenderedSuggestions();
-      rendered.children[2].removeAttribute('data-value', '');
-      rendered.children[2].setAttribute('data-disabled', '');
+      rendered[2].removeAttribute('data-value', '');
+      rendered[2].setAttribute('data-disabled', '');
       env.sandbox
         .stub(impl.getSsrTemplateHelper(), 'applySsrOrCsrTemplate')
         .returns(Promise.resolve(rendered));
diff --git a/extensions/amp-autocomplete/0.1/test/validator-amp-autocomplete.html b/extensions/amp-autocomplete/0.1/test/validator-amp-autocomplete.html
index e25f2bf4a3c92..d87aed8335ea4 100644
--- a/extensions/amp-autocomplete/0.1/test/validator-amp-autocomplete.html
+++ b/extensions/amp-autocomplete/0.1/test/validator-amp-autocomplete.html
@@ -311,6 +311,14 @@
       </script>
     </amp-autocomplete>
 
+    <!-- Valid: amp-component with static data and max-items attribute -->
+    <amp-autocomplete filter="prefix" max-items="10">
+      <input />
+      <script type="application/json">
+        {}
+      </script>
+    </amp-autocomplete>
+
     <!-- Valid: amp-component with remote data and max-entries attribute -->
     <amp-autocomplete
       filter="prefix"
@@ -320,6 +328,15 @@
       <input />
     </amp-autocomplete>
 
+    <!-- Valid: amp-component with remote data and max-items attribute -->
+    <amp-autocomplete
+      filter="prefix"
+      max-items="10"
+      src="https://data.com/articles.json?ref=CANONICAL_URL"
+    >
+      <input />
+    </amp-autocomplete>
+
     <!-- Valid: amp-component suggest-first attribute and filter attribute-->
     <amp-autocomplete suggest-first filter="prefix">
       <input />
@@ -393,6 +410,20 @@
       </template>
     </amp-autocomplete>
 
+    <!-- Valid: amp-component with static data and rich content template with data-json -->
+    <amp-autocomplete filter="prefix">
+      <input />
+      <script type="application/json">
+        {}
+      </script>
+      <template type="amp-mustache" id="amp-template-default">
+        <div class="city-item" data-value="{{value}}" data-json="{{objToJson}}">
+          <div>{{value}}</div>
+          <div class="custom-population">Population: {{population}}</div>
+        </div>
+      </template>
+    </amp-autocomplete>
+
     <!-- Valid: amp-component with remote data and rich content template -->
     <amp-autocomplete
       filter="prefix"
@@ -407,6 +438,20 @@
       </template>
     </amp-autocomplete>
 
+    <!-- Valid: amp-component with remote data and rich content template with data-json -->
+    <amp-autocomplete
+      filter="prefix"
+      src="https://data.com/articles.json?ref=CANONICAL_URL"
+    >
+      <input />
+      <template type="amp-mustache" id="amp-template-default">
+        <div class="city-item" data-value="{{value}}" data-json="{{objToJson}}">
+          <div>{{value}}</div>
+          <div class="custom-population">Population: {{population}}</div>
+        </div>
+      </template>
+    </amp-autocomplete>
+
     <!-- Valid: amp-component with remote data and rich content template -->
     <amp-autocomplete
       filter="prefix"
@@ -543,5 +588,23 @@
     <amp-autocomplete filter="prefix" query="q">
       <input />
     </amp-autocomplete>
+
+    <!-- Valid: amp-component with remote data, filter=prefix and prefetch attribute -->
+    <amp-autocomplete
+      filter="prefix"
+      src="https://data.com/articles.json?ref=CANONICAL_URL"
+      prefetch
+    >
+      <input />
+    </amp-autocomplete>
+
+    <!-- Invalid: prefetch is mistyped -->
+    <amp-autocomplete
+      filter="prefix"
+      src="https://data.com/articles.json?ref=CANONICAL_URL"
+      prefecth
+    >
+      <input />
+    </amp-autocomplete>
   </body>
 </html>
diff --git a/extensions/amp-autocomplete/0.1/test/validator-amp-autocomplete.out b/extensions/amp-autocomplete/0.1/test/validator-amp-autocomplete.out
index 07f1fa8e69a9d..251c285df43e2 100644
--- a/extensions/amp-autocomplete/0.1/test/validator-amp-autocomplete.out
+++ b/extensions/amp-autocomplete/0.1/test/validator-amp-autocomplete.out
@@ -312,6 +312,14 @@ FAIL
 |        </script>
 |      </amp-autocomplete>
 |
+|      <!-- Valid: amp-component with static data and max-items attribute -->
+|      <amp-autocomplete filter="prefix" max-items="10">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
 |      <!-- Valid: amp-component with remote data and max-entries attribute -->
 |      <amp-autocomplete
 |        filter="prefix"
@@ -321,6 +329,15 @@ FAIL
 |        <input />
 |      </amp-autocomplete>
 |
+|      <!-- Valid: amp-component with remote data and max-items attribute -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        max-items="10"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
 |      <!-- Valid: amp-component suggest-first attribute and filter attribute-->
 |      <amp-autocomplete suggest-first filter="prefix">
 |        <input />
@@ -394,6 +411,20 @@ FAIL
 |        </template>
 |      </amp-autocomplete>
 |
+|      <!-- Valid: amp-component with static data and rich content template with data-json -->
+|      <amp-autocomplete filter="prefix">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|        <template type="amp-mustache" id="amp-template-default">
+|          <div class="city-item" data-value="{{value}}" data-json="{{objToJson}}">
+|            <div>{{value}}</div>
+|            <div class="custom-population">Population: {{population}}</div>
+|          </div>
+|        </template>
+|      </amp-autocomplete>
+|
 |      <!-- Valid: amp-component with remote data and rich content template -->
 |      <amp-autocomplete
 |        filter="prefix"
@@ -408,6 +439,20 @@ FAIL
 |        </template>
 |      </amp-autocomplete>
 |
+|      <!-- Valid: amp-component with remote data and rich content template with data-json -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|        <template type="amp-mustache" id="amp-template-default">
+|          <div class="city-item" data-value="{{value}}" data-json="{{objToJson}}">
+|            <div>{{value}}</div>
+|            <div class="custom-population">Population: {{population}}</div>
+|          </div>
+|        </template>
+|      </amp-autocomplete>
+|
 |      <!-- Valid: amp-component with remote data and rich content template -->
 |      <amp-autocomplete
 |        filter="prefix"
@@ -479,7 +524,7 @@ FAIL
 |      <!-- Invalid: filter unspecified -->
 |      <amp-autocomplete>
 >>     ^~~~~~~~~
-amp-autocomplete/0.1/test/validator-amp-autocomplete.html:479:4 The mandatory attribute 'filter' is missing in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:524:4 The mandatory attribute 'filter' is missing in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete/)
 |        <input />
 |        <script type="application/json">
 |          {}
@@ -489,7 +534,7 @@ amp-autocomplete/0.1/test/validator-amp-autocomplete.html:479:4 The mandatory at
 |      <!-- Invalid: width is mistyped -->
 |      <amp-autocomplete widht="100" filter="prefix">
 >>     ^~~~~~~~~
-amp-autocomplete/0.1/test/validator-amp-autocomplete.html:487:4 The attribute 'widht' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:532:4 The attribute 'widht' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete/)
 |        <input />
 |        <script type="application/json">
 |          {}
@@ -499,7 +544,7 @@ amp-autocomplete/0.1/test/validator-amp-autocomplete.html:487:4 The attribute 'w
 |      <!-- Invalid: responsive layout is not supported -->
 |      <amp-autocomplete layout="responsive" filter="prefix">
 >>     ^~~~~~~~~
-amp-autocomplete/0.1/test/validator-amp-autocomplete.html:495:4 The specified layout 'RESPONSIVE' is not supported by tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:540:4 The specified layout 'RESPONSIVE' is not supported by tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete/)
 |        <input />
 |        <script type="application/json">
 |          {}
@@ -509,10 +554,10 @@ amp-autocomplete/0.1/test/validator-amp-autocomplete.html:495:4 The specified la
 |      <!-- Invalid: amp-autocomplete with invalid input types -->
 |      <amp-autocomplete widht="100" filter="prefix">
 >>     ^~~~~~~~~
-amp-autocomplete/0.1/test/validator-amp-autocomplete.html:503:4 The attribute 'widht' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:548:4 The attribute 'widht' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete/)
 |        <input type="file" />
 >>       ^~~~~~~~~
-amp-autocomplete/0.1/test/validator-amp-autocomplete.html:504:6 The tag 'INPUT [type=file]' may only appear as a descendant of tag 'form [method=post]'. (see https://amp.dev/documentation/components/amp-form)
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:549:6 The tag 'input' may only appear as a descendant of tag 'form [method=post]'. (see https://amp.dev/documentation/components/amp-form/)
 |        <script type="application/json">
 |          {}
 |        </script>
@@ -521,7 +566,7 @@ amp-autocomplete/0.1/test/validator-amp-autocomplete.html:504:6 The tag 'INPUT [
 |      <!-- Invalid: amp-autocomplete with filter=custom and no filter-expr attribute -->
 |      <amp-autocomplete filter="custom">
 >>     ^~~~~~~~~
-amp-autocomplete/0.1/test/validator-amp-autocomplete.html:511:4 The attribute 'filter-expr' in tag 'amp-autocomplete' is missing or incorrect, but required by attribute 'filter'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:556:4 The attribute 'filter-expr' in tag 'amp-autocomplete' is missing or incorrect, but required by attribute 'filter'. (see https://amp.dev/documentation/components/amp-autocomplete/)
 |        <input />
 |        <script type="application/json">
 |          {}
@@ -531,7 +576,7 @@ amp-autocomplete/0.1/test/validator-amp-autocomplete.html:511:4 The attribute 'f
 |      <!-- Invalid: amp-autocomplete with filter=custom and no filter-expr attribute -->
 |      <amp-autocomplete
 >>     ^~~~~~~~~
-amp-autocomplete/0.1/test/validator-amp-autocomplete.html:519:4 The attribute 'filter-expr' in tag 'amp-autocomplete' is missing or incorrect, but required by attribute 'filter'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:564:4 The attribute 'filter-expr' in tag 'amp-autocomplete' is missing or incorrect, but required by attribute 'filter'. (see https://amp.dev/documentation/components/amp-autocomplete/)
 |        filter="custom"
 |        src="https://data.com/articles.json?ref=CANONICAL_URL"
 |      >
@@ -541,7 +586,7 @@ amp-autocomplete/0.1/test/validator-amp-autocomplete.html:519:4 The attribute 'f
 |      <!-- Invalid: amp-autocomplete with unexpected filter -->
 |      <amp-autocomplete filter="random">
 >>     ^~~~~~~~~
-amp-autocomplete/0.1/test/validator-amp-autocomplete.html:527:4 The attribute 'filter' in tag 'amp-autocomplete' is set to the invalid value 'random'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:572:4 The attribute 'filter' in tag 'amp-autocomplete' is set to the invalid value 'random'. (see https://amp.dev/documentation/components/amp-autocomplete/)
 |        <input />
 |        <script type="application/json">
 |          {}
@@ -551,7 +596,7 @@ amp-autocomplete/0.1/test/validator-amp-autocomplete.html:527:4 The attribute 'f
 |      <!-- Invalid: amp-autocomplete with unexpected filter and src attr -->
 |      <amp-autocomplete
 >>     ^~~~~~~~~
-amp-autocomplete/0.1/test/validator-amp-autocomplete.html:535:4 The attribute 'filter' in tag 'amp-autocomplete' is set to the invalid value 'random'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:580:4 The attribute 'filter' in tag 'amp-autocomplete' is set to the invalid value 'random'. (see https://amp.dev/documentation/components/amp-autocomplete/)
 |        filter="random"
 |        src="https://data.com/articles.json?ref=CANONICAL_URL"
 |      >
@@ -561,7 +606,27 @@ amp-autocomplete/0.1/test/validator-amp-autocomplete.html:535:4 The attribute 'f
 |      <!-- Invalid: amp-autocomplete with query attr missing src attr -->
 |      <amp-autocomplete filter="prefix" query="q">
 >>     ^~~~~~~~~
-amp-autocomplete/0.1/test/validator-amp-autocomplete.html:543:4 The attribute 'src' in tag 'amp-autocomplete' is missing or incorrect, but required by attribute 'query'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:588:4 The attribute 'src' in tag 'amp-autocomplete' is missing or incorrect, but required by attribute 'query'. (see https://amp.dev/documentation/components/amp-autocomplete/)
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data, filter=prefix and prefetch attribute -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        prefetch
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Invalid: prefetch is mistyped -->
+|      <amp-autocomplete
+>>     ^~~~~~~~~
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:602:4 The attribute 'prefecth' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete/)
+|        filter="prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        prefecth
+|      >
 |        <input />
 |      </amp-autocomplete>
 |    </body>
diff --git a/extensions/amp-autocomplete/0.1/test/validator-amp-autocomplete.out.cpponly b/extensions/amp-autocomplete/0.1/test/validator-amp-autocomplete.out.cpponly
new file mode 100644
index 0000000000000..61b95b07a2ae8
--- /dev/null
+++ b/extensions/amp-autocomplete/0.1/test/validator-amp-autocomplete.out.cpponly
@@ -0,0 +1,633 @@
+FAIL
+|  <!--
+|    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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-autocomplete tag.
+|  -->
+|
+|  <!DOCTYPE html>
+|  <html ⚡>
+|    <head>
+|      <meta charset="utf-8" />
+|      <title>amp-autocomplete example</title>
+|      <link rel="canonical" href="amps.html" />
+|      <meta
+|        name="viewport"
+|        content="width=device-width,minimum-scale=1,initial-scale=1"
+|      />
+|      <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
+|      >
+|      <script
+|        async
+|        custom-element="amp-autocomplete"
+|        src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"
+|      ></script>
+|      <script
+|        async
+|        custom-element="amp-bind"
+|        src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
+|      ></script>
+|      <script
+|        async
+|        custom-element="amp-form"
+|        src="https://cdn.ampproject.org/v0/amp-form-0.1.js"
+|      ></script>
+|      <script
+|        async
+|        custom-template="amp-mustache"
+|        src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"
+|      ></script>
+|      <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    </head>
+|    <body>
+|      <!-- Valid: amp-component with static data and filter=prefix attribute -->
+|      <amp-autocomplete filter="prefix">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and filter=prefix attribute -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: textarea and src attr -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <textarea></textarea>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: textarea with other attr, autocomplete with src attr -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <textarea autoexpand placeholder="Reply"></textarea>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: input and src and query attr -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        query="q"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: input and [src] attr -->
+|      <amp-autocomplete filter="prefix" [src]="foo.bar">
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: input tag with type "text" and script tag -->
+|      <amp-autocomplete filter="prefix">
+|        <input type="text" />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: input tag with type "search" and script tag -->
+|      <amp-autocomplete filter="prefix">
+|        <input type="search" />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and filter=token-prefix attribute -->
+|      <amp-autocomplete filter="token-prefix">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and filter=token-prefix attribute -->
+|      <amp-autocomplete
+|        filter="token-prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and filter=substring attribute -->
+|      <amp-autocomplete filter="substring">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and filter=substring attribute -->
+|      <amp-autocomplete
+|        filter="substring"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and filter=fuzzy attribute -->
+|      <amp-autocomplete filter="fuzzy">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and filter=fuzzy attribute -->
+|      <amp-autocomplete
+|        filter="fuzzy"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and filter=none attribute -->
+|      <amp-autocomplete filter="none">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and filter=none attribute -->
+|      <amp-autocomplete
+|        filter="none"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and filter=custom and filter-expr attribute -->
+|      <amp-autocomplete filter="custom" filter-expr="true">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and filter=custom and filter-expr attribute -->
+|      <amp-autocomplete
+|        filter="custom"
+|        filter-expr="true"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and inline=@ attribute -->
+|      <amp-autocomplete inline="@" filter="prefix">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and inline=@ attribute -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        inline="@"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and items=property attribute -->
+|      <amp-autocomplete filter="prefix" items="property">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and items=property attribute -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        items="property"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and min-characters attribute -->
+|      <amp-autocomplete filter="prefix" min-characters="3">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and min-characters attribute -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        min-characters="3"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and max-entries attribute -->
+|      <amp-autocomplete filter="prefix" max-entries="10">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and max-items attribute -->
+|      <amp-autocomplete filter="prefix" max-items="10">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and max-entries attribute -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        max-entries="10"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and max-items attribute -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        max-items="10"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component suggest-first attribute and filter attribute-->
+|      <amp-autocomplete suggest-first filter="prefix">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component suggest-first attribute and filter!="prefix" attribute-->
+|      <amp-autocomplete suggest-first filter="substring">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and suggest-first attribute -->
+|      <amp-autocomplete
+|        suggest-first
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        filter="prefix"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and highlight-user-entry attribute -->
+|      <amp-autocomplete filter="prefix" highlight-user-entry>
+|        <input type="text" />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and highlight-user-entry attribute -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        highlight-user-entry
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input type="text" />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and submit-on-enter attribute -->
+|      <amp-autocomplete filter="prefix" submit-on-enter>
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and submit-on-enter attribute -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        submit-on-enter
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and rich content template -->
+|      <amp-autocomplete filter="prefix">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|        <template type="amp-mustache" id="amp-template-default">
+|          <div class="city-item" data-value="{{value}}">
+|            <div>{{value}}</div>
+|            <div class="custom-population">Population: {{population}}</div>
+|          </div>
+|        </template>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and rich content template with data-json -->
+|      <amp-autocomplete filter="prefix">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|        <template type="amp-mustache" id="amp-template-default">
+|          <div class="city-item" data-value="{{value}}" data-json="{{objToJson}}">
+|            <div>{{value}}</div>
+|            <div class="custom-population">Population: {{population}}</div>
+|          </div>
+|        </template>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and rich content template -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|        <template type="amp-mustache" id="amp-template-default">
+|          <div class="city-item" data-value="{{value}}">
+|            <div>{{value}}</div>
+|            <div class="custom-population">Population: {{population}}</div>
+|          </div>
+|        </template>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and rich content template with data-json -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|        <template type="amp-mustache" id="amp-template-default">
+|          <div class="city-item" data-value="{{value}}" data-json="{{objToJson}}">
+|            <div>{{value}}</div>
+|            <div class="custom-population">Population: {{population}}</div>
+|          </div>
+|        </template>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and rich content template -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|        <template type="amp-mustache" id="amp-template-default">
+|          {{#disabled}}
+|          <div data-disabled>
+|            <b>{{value}}</b>
+|          </div>
+|          {{/disabled}} {{^disabled}}
+|          <div class="city-item" data-value="{{value}}">
+|            <div>{{value}}</div>
+|            <div class="custom-population">Population: {{population}}</div>
+|          </div>
+|          {{/disabled}}
+|        </template>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and template attr -->
+|      <amp-autocomplete filter="prefix" template="my-template-id">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and template attr -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        template="my-template-id"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with static data and template script child -->
+|      <amp-autocomplete filter="prefix">
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|        <script type="text/plain" template="amp-mustache">
+|          <div class="city-item" data-value="{{value}}">
+|            <div>{{value}}</div>
+|            <div class="custom-population">Population: {{population}}</div>
+|          </div>
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data and template attr -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|        <script type="application/json">
+|          {}
+|        </script>
+|        <script type="text/plain" template="amp-mustache">
+|          <div class="city-item" data-value="{{value}}">
+|            <div>{{value}}</div>
+|            <div class="custom-population">Population: {{population}}</div>
+|          </div>
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Invalid: filter unspecified -->
+|      <amp-autocomplete>
+|        <input />
+>>     ^~~~~~~~~
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:525:4 The mandatory attribute 'filter' is missing in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete/)
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Invalid: width is mistyped -->
+|      <amp-autocomplete widht="100" filter="prefix">
+|        <input />
+>>     ^~~~~~~~~
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:533:4 The attribute 'widht' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete/)
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Invalid: responsive layout is not supported -->
+|      <amp-autocomplete layout="responsive" filter="prefix">
+|        <input />
+>>     ^~~~~~~~~
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:541:4 The specified layout 'RESPONSIVE' is not supported by tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete/)
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Invalid: amp-autocomplete with invalid input types -->
+|      <amp-autocomplete widht="100" filter="prefix">
+|        <input type="file" />
+>>     ^~~~~~~~~
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:549:4 The attribute 'widht' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete/)
+|        <script type="application/json">
+>>       ^~~~~~~~~
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:550:6 The tag 'input' may only appear as a descendant of tag 'form [method=post]'. (see https://amp.dev/documentation/components/amp-form/)
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Invalid: amp-autocomplete with filter=custom and no filter-expr attribute -->
+|      <amp-autocomplete filter="custom">
+|        <input />
+>>     ^~~~~~~~~
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:557:4 The attribute 'filter-expr' in tag 'amp-autocomplete' is missing or incorrect, but required by attribute 'filter'. (see https://amp.dev/documentation/components/amp-autocomplete/)
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Invalid: amp-autocomplete with filter=custom and no filter-expr attribute -->
+|      <amp-autocomplete
+|        filter="custom"
+>>     ^~~~~~~~~
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:565:4 The attribute 'filter-expr' in tag 'amp-autocomplete' is missing or incorrect, but required by attribute 'filter'. (see https://amp.dev/documentation/components/amp-autocomplete/)
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Invalid: amp-autocomplete with unexpected filter -->
+|      <amp-autocomplete filter="random">
+|        <input />
+>>     ^~~~~~~~~
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:573:4 The attribute 'filter' in tag 'amp-autocomplete' is set to the invalid value 'random'. (see https://amp.dev/documentation/components/amp-autocomplete/)
+|        <script type="application/json">
+|          {}
+|        </script>
+|      </amp-autocomplete>
+|
+|      <!-- Invalid: amp-autocomplete with unexpected filter and src attr -->
+|      <amp-autocomplete
+|        filter="random"
+>>     ^~~~~~~~~
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:581:4 The attribute 'filter' in tag 'amp-autocomplete' is set to the invalid value 'random'. (see https://amp.dev/documentation/components/amp-autocomplete/)
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Invalid: amp-autocomplete with query attr missing src attr -->
+|      <amp-autocomplete filter="prefix" query="q">
+|        <input />
+>>     ^~~~~~~~~
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:589:4 The attribute 'src' in tag 'amp-autocomplete' is missing or incorrect, but required by attribute 'query'. (see https://amp.dev/documentation/components/amp-autocomplete/)
+|      </amp-autocomplete>
+|
+|      <!-- Valid: amp-component with remote data, filter=prefix and prefetch attribute -->
+|      <amp-autocomplete
+|        filter="prefix"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        prefetch
+|      >
+|        <input />
+|      </amp-autocomplete>
+|
+|      <!-- Invalid: prefetch is mistyped -->
+|      <amp-autocomplete
+|        filter="prefix"
+>>     ^~~~~~~~~
+amp-autocomplete/0.1/test/validator-amp-autocomplete.html:603:4 The attribute 'prefecth' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete/)
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        prefecth
+|      >
+|        <input />
+|      </amp-autocomplete>
+|    </body>
+|  </html>
diff --git a/extensions/amp-autocomplete/OWNERS b/extensions/amp-autocomplete/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-autocomplete/OWNERS
+++ b/extensions/amp-autocomplete/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-autocomplete/amp-autocomplete.md b/extensions/amp-autocomplete/amp-autocomplete.md
index bb5dbacaa914d..08ed09e957d32 100644
--- a/extensions/amp-autocomplete/amp-autocomplete.md
+++ b/extensions/amp-autocomplete/amp-autocomplete.md
@@ -25,20 +25,22 @@ limitations under the License.
 
 # amp-autocomplete
 
+## Usage
+
+The `amp-autocomplete` extension should be used for suggesting completed items based on user input to help users carry out their task more quickly.
+
 [filter formats="email"]
 
 Warning: This component is currently experimental in the AMP for Email format as email clients add support for the feature. Until the component is publicly available in the format, you will notice the component is in some cases valid and sendable in emails but may be only functioning in its fallback behavior capacity across email clients as well as in their respective playgrounds. The fallback for the component does not display autocomplete suggestions, and will behave as the unenhanced `input` or `textarea` field it is given.
 
 [/filter] <!-- formats="email" -->
 
-## Behavior
-
-The `amp-autocomplete` extension should be used for suggesting completed items based on user input to help users carry out their task more quickly.
-
 This can be used to power search experiences, in cases where the user may not know the full range of potential inputs, or in forms to help ensure inputs where there may be multiple ways to express the same intent (using a state abbreviation instead of its full name, for example) yield more predictable results.
 
 Example:
 
+[filter formats="websites"]
+
 ```html
 <amp-autocomplete filter="substring" id="myAutocomplete">
   <input />
@@ -48,79 +50,135 @@ Example:
 </amp-autocomplete>
 ```
 
+[/filter] <!-- formats="websites" -->
+
+[filter formats="email"]
+
+```html
+<amp-autocomplete
+  id="myAutocomplete"
+  src="{{server_for_email}}/static/samples/json/amp-autocomplete-cities.json"
+>
+  <input />
+  <template type="amp-mustache">
+    <div data-value="{{.}}">{{.}}</div>
+  </template>
+</amp-autocomplete>
+```
+
+[/filter] <!-- formats="email" -->
+
+When using the `src` attribute with `amp-autocomplete`, the response from the endpoint contains data to be rendered in the specified template.
+
+You can specify a template in one of two ways:
+
+-   a `template` attribute that references an ID of an existing templating element.
+-   a templating element nested directly inside the `amp-autocomplete` element.
+
+For more details on templates, see [AMP HTML Templates](../../docs/spec/amp-html-templates.md).
+
+[tip type="note"]
+Note also that a good practice is to provide templates a single top-level element to prevent unintended side effects. This also guarantees control of the [`data-value` or `data-disabled`](https://amp.dev/documentation/examples/components/amp-autocomplete/#suggesting-rich-content) attribute on the delimiting element. As an example, the following input:
+
+```html
+<template type="amp-mustache">
+  {% raw %}
+  <!-- NOT RECOMMENDED -->
+  <div class="item">{{item}}</div>
+  <div class="price">{{price}}</div>
+  {% endraw %}
+</template>
+```
+
+Would most predictably be applied and rendered if instead provided as follows:
+
+```html
+<template type="amp-mustache">
+  {% raw %}
+  <!-- RECOMMENDED -->
+  <div data-value="{{items}}">
+    <div class="item">{{item}}</div>
+    <div class="price">{{price}}</div>
+  </div>
+  {% endraw %}
+</template>
+```
+
+[/tip]
+
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>filter (required)</strong></td>
-    <td>The filtering mechanism applied to source data to produce filtered results for user input. In all cases the filtered results will be displayed in array order of data retrieved. If filtering is being done (<code>filter != none</code>), it is done client side. The following are supported values:
-    <ul>
-      <li><strong>substring</strong>: if the user input is a substring of an item, then the item is suggested</li>
-      <li><strong>prefix</strong>: if the user input is a prefix of an item, then the item gets suggested</li>
-      <li><strong>token-prefix</strong>: if the user input is a prefix of any word in a multi-worded item, then the item gets suggested; example “je” is a token-prefix in “blue jeans”</li>
-      <li><strong>fuzzy</strong>: typos in the input field can result in partial match items appearing in the filtered results—need further research</li>
-      <li><strong>none</strong>: no client-side filter; renders retrieved data based on bound <code>[src]</code> attribute; truncates to <code>max-entries</code> attribute if provided</li>
-      <li><strong>custom</strong>: a conditional statement involving an item and a user input to be applied to each item such that evaluating to true implies the item gets suggested; using this filter requires including <code>amp-bind</code> if <code>filter==custom</code>, an additional attribute <code>filter-expr</code> is required to specify a boolean expression by which to perform the custom filter.</li>
-    </td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>src (optional)</strong></td>
-    <td>The URL of the remote endpoint that returns the JSON that will be filtered and rendered within this <code>amp-autocomplete</code>. This must be a CORS HTTP service and the URL's protocol must be HTTPS. The endpoint must implement the requirements specified in the <a href="https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests?referrer=ampproject.org">CORS Requests in AMP</a> spec. If fetching the data at the src URL fails, the <code>amp-autocomplete</code> triggers a fallback. The src attribute may be omitted if the <code>[src]</code> attribute exists.
-    </td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>query (optional)</strong></td>
-    <td>The query parameter to generate a static remote endpoint that returns the JSON that will be filtered and rendered within this <code>amp-autocomplete</code>. This requires the presence of the <code>src</code> attribute. For example, if <code>src="http://www.example.com"</code> and <code>query="q"</code>, then when a user types in <code>abc</code>, the component will retrieve data from <code>http://www.example.com?q=abc</code>.
-    </td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>filter-expr (optional)</strong></td>
-    <td>Required if <code>filter==custom</code></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>filter-value (optional)</strong></td>
-    <td>If data is an array of JsonObjects, the filter-value is the property name that will be accessed for client side filtering. This attribute is unnecessary if filter is none. Defaults to "value".</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>min-characters (optional)</strong></td>
-    <td>
-      The min character length of a user input to provide results, default 1
-    </td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>max-entries (optional)</strong></td>
-    <td>
-      The max specified number of items to suggest at once based on a user input, displays all if unspecified
-    </td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>suggest-first (optional)</strong></td>
-    <td>
-      Suggest the first entry in the list of results by marking it active; only possible if <code>filter==prefix</code> (does nothing otherwise)
-    </td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>submit-on-enter (optional)</strong></td>
-    <td>
-      The enter key is primarily used for selecting suggestions in autocomplete, so it shouldn’t also submit the form unless the developer explicitly sets it to do so (for search fields/one field forms, et cetera).
-      The user flow is as follows: If <code>submit-on-enter</code> is <code>true</code>, pressing <code>Enter</code> will select any currently active item and engage in default behavior, including submitting the form if applicable. If <code>submit-on-enter</code> is <code>false</code>, pressing <code>Enter</code> <em>while suggestions are displaying</em> will select any currently active item only and prevent any other default behavior. If suggestions are not displaying, autocomplete allows default behavior. <strong>Defaults to false.</strong>
-    </td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>highlight-user-entry (optional)</strong></td>
-    <td>If present, exposes the <code>autocomplete-partial</code> class on the substring within the suggested item that resulted in its match with the user input. This can be used to stylize the corresponding match to stand out to the user. <strong>Defaults to false.</strong>
-    </td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>items (optional)</strong></td>
-    <td>Specifies the key to the data array within the JSON response. Nested keys can be expressed with a dot-notated value such as <code>field1.field2.</code> The default value is <code>"items"</code>. The following are examples with and without usage:
-    <pre lang="html">
+[filter formats="websites"]
+
+### `filter` (required)
+
+The filtering mechanism applied to source data to produce filtered results for user input. In all cases the filtered results will be displayed in array order of data retrieved. If filtering is being done (<code>filter != none</code>), it is done client side. The following are supported values:
+
+-   `substring`: if the user input is a substring of an item, then the item is suggested
+-   `prefix`: if the user input is a prefix of an item, then the item gets suggested
+-   `token-prefix`: if the user input is a prefix of any word in a multi-worded item, then the item gets suggested; example “je” is a token-prefix in “blue jeans”
+-   `fuzzy`: typos in the input field can result in partial match items appearing in the filtered results—need further research
+-   `none`: no client-side filter; renders retrieved data based on bound <code>[src]</code> attribute; truncates to <code>max-items</code> attribute if provided
+-   `custom`: a conditional statement involving an item and a user input to be applied to each item such that evaluating to true implies the item gets suggested; using this filter requires including <code>amp-bind</code> if <code>filter==custom</code>, an additional attribute <code>filter-expr</code> is required to specify a boolean expression by which to perform the custom filter
+
+### `filter-expr`
+
+Required if <code>filter==custom</code>
+
+### `filter-value`
+
+If data is an array of JsonObjects, the filter-value is the property name that will be accessed for client side filtering. This attribute is unnecessary if filter is none. Defaults to "value".
+
+[/filter] <!-- formats="websites" -->
+
+### `src`
+
+The URL of the remote endpoint that returns the JSON that will be filtered and rendered within this <code>amp-autocomplete</code>. This must be a CORS HTTP service and the URL's protocol must be HTTPS. The endpoint must implement the requirements specified in the <a href="https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests?referrer=ampproject.org">CORS Requests in AMP</a> spec. If fetching the data at the src URL fails, the <code>amp-autocomplete</code> triggers a fallback. The src attribute may be omitted if the <code>[src]</code> attribute exists.
+
+[filter formats="email"]
+
+Please note when personalizing autocomplete items with a server endpoint, it is good practice to <a href="https://amp.dev/documentation/guides-and-tutorials/learn/email_fundamentals/#authenticating-requests">authenticate requests</a> containing user data.
+
+[/filter] <!-- formats="email" -->
+
+### `query`
+
+The query parameter to generate a static remote endpoint that returns the JSON that will be filtered and rendered within this <code>amp-autocomplete</code>. This requires the presence of the <code>src</code> attribute. For example, if <code>src="http://www.example.com"</code> and <code>query="q"</code>, then when a user types in <code>abc</code>, the component will retrieve data from <code>http://www.example.com?q=abc</code>.
+
+### `min-characters`
+
+The min character length of a user input to provide results, default 1
+
+### `max-items`
+
+The max specified number of items to suggest at once based on a user input, displays all if unspecified
+
+### `suggest-first`
+
+Suggest the first entry in the list of results by marking it active; only possible if <code>filter==prefix</code> (does nothing otherwise)
+
+### `submit-on-enter`
+
+The enter key is primarily used for selecting suggestions in autocomplete, so it shouldn’t also submit the form unless the developer explicitly sets it to do so (for search fields/one field forms, et cetera).
+
+The user flow is as follows: If <code>submit-on-enter</code> is <code>true</code>, pressing <code>Enter</code> will select any currently active item and engage in default behavior, including submitting the form if applicable. If <code>submit-on-enter</code> is <code>false</code>, pressing <code>Enter</code> <em>while suggestions are displaying</em> will select any currently active item only and prevent any other default behavior. If suggestions are not displaying, autocomplete allows default behavior. <strong>Defaults to false.</strong>
+
+### `highlight-user-entry`
+
+If present, exposes the <code>autocomplete-partial</code> class on the substring within the suggested item that resulted in its match with the user input. This can be used to stylize the corresponding match to stand out to the user. <strong>Defaults to false.</strong>
+
+### `items`
+
+Specifies the key to the data array within the JSON response. Nested keys can be expressed with a dot-notated value such as <code>field1.field2.</code> The default value is <code>"items"</code>. The following are examples with and without usage:
+
+  <pre lang="html">
 
       <amp-autocomplete filter="prefix">
           <input type="text">
           <script type=application/json>
             { "items" : ["apples", "bananas", "pears"] }
            </script>
+
       </amp-autocomplete>
 
   </pre>
@@ -135,27 +193,59 @@ Example:
 
   </pre>
       In the first example, the JSON payload is queued by the "items" key, and thus no component attribute is needed because the default value corresponds. In the second example, the JSON payload is queued by the "fruit" key, so the <code>items</code> attribute is given the value <code>"fruit"</code> so as to accurately etrieve the intended datasource. In both examples, the end user interaction is the same.
-    </td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>inline (optional)</strong></td>
-    <td>Whether the <code>amp-autocomplete</code> should autosuggest on the full user input or only a triggered substring of the user input. By default when the attribute is absent, suggestions will be based on the full user input. The attribute cannot have an empty value but must take a single character token, i.e. <code>@</code> which activates the autocomplete behavior. For example, if <code>inline="@"</code> then user input of <code>hello</code> will not retrieve suggestions but a user input of <code>hello @abc</code> might trigger options filtered on the substring <code>abc</code>. Currently triggered substrings are delimited on whitespace characters, however this is subject to change in the future.
-    </td>
-  </tr>
-</table>
+
+### `inline`
+
+Whether the <code>amp-autocomplete</code> should autosuggest on the full user input or only a triggered substring of the user input. By default when the attribute is absent, suggestions will be based on the full user input. The attribute cannot have an empty value but must take a single character token, i.e. <code>@</code> which activates the autocomplete behavior. For example, if <code>inline="@"</code> then user input of <code>hello</code> will not retrieve suggestions but a user input of <code>hello @abc</code> might trigger options filtered on the substring <code>abc</code>. Currently triggered substrings are delimited on whitespace characters, however this is subject to change in the future.
+
+### `prefetch`
+
+Include the `prefetch` attribute to prefetch remote data to improve responsiveness for users. Requires `src` to be specified.
 
 ## Events
 
-Events may trigger actions on other AMP components using the `on` attribute.
-e.g. `on="select: my-tab.show"`
+### `select`
+
+`amp-autocomplete` triggers the `select` event when the user selects an option
+via click, tap, keyboard navigation or accepting typeahead. It also fires the
+`select` event if a user keyboard navigates to an item and Tabs away from the
+input field. `event` contains the `value` attribute value of the selected
+element which is its textual representation (e.g., value of data-value).
 
-Read more about [AMP Actions and Events](../../spec/amp-actions-and-events.md).
+`event` may also contain the entire object in the `valueAsObject` field, if
+the suggestion template contains `data-json={{objToJson}}`. This causes
+the rendered element to have a `data-json` data attribute with a JSON string
+representation of the corresponding object, which is then made available in
+the `valueAsObject` field of the `event`.
+
+Example:
+
+```html
+<amp-autocomplete
+  filter="substring"
+  id="myAutocomplete"
+  on="select:AMP.setState({chosenFruit: event.valueAsObject})"
+>
+  <input />
+  <script type="application/json">
+    {
+      "items": [
+        {"fruit": "apple", "color": "red"},
+        {"fruit": "banana", "color": "yellow"}
+      ]
+    }
+  </script>
+  <template type="amp-mustache">
+    <div data-value="{{fruit}}" data-json="{{objToJson}}">
+      {{color}} {{fruit}}
+    </div>
+  </template>
+</amp-autocomplete>
+<p [text]="'Your fruit: ' + chosenFruit.color + ', ' + chosenFruit.fruit">
+  No fruit selected
+</p>
+```
 
-<table>
-  <tr>
-    <td width="40%"><strong>select</strong></td>
-    <td><code>amp-autocomplete</code> triggers the <code>select</code> event when the user selects an option via click, tap, keyboard navigation or accepting typeahead. It also fires the <code>select</code> event if a user keyboard navigates to an item and Tabs away from the input field.
-    <code>event</code> contains the <code>value</code> attribute value of the selected element.</td>
-  </tr>
+## Validation
 
-</table>
+See [amp-autocomplete rules](validator-amp-autocomplete.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-autocomplete/validator-amp-autocomplete.protoascii b/extensions/amp-autocomplete/validator-amp-autocomplete.protoascii
index 608aa0f58857d..55b28076d13fe 100644
--- a/extensions/amp-autocomplete/validator-amp-autocomplete.protoascii
+++ b/extensions/amp-autocomplete/validator-amp-autocomplete.protoascii
@@ -63,7 +63,9 @@ tags: {  # <amp-autocomplete>
   attrs: { name: "inline" }
   attrs: { name: "items" }
   attrs: { name: "max-entries" }
+  attrs: { name: "max-items" }
   attrs: { name: "min-characters" }
+  attrs: { name: "prefetch" }
   attrs: {
     name: "query"
     trigger: {
@@ -87,7 +89,7 @@ tags: {  # <amp-autocomplete>
     name: "[src]"
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-autocomplete"
+  spec_url: "https://amp.dev/documentation/components/amp-autocomplete/"
   amp_layout: {
     supported_layouts: CONTAINER
   }
@@ -104,8 +106,9 @@ tags: {  # <amp-autocomplete>
   attrs: { name: "highlight-user-entry" }
   attrs: { name: "inline" }
   attrs: { name: "items" }
-  attrs: { name: "max-entries" }
+  attrs: { name: "max-items" }
   attrs: { name: "min-characters" }
+  attrs: { name: "prefetch" }
   attrs: {
     name: "query"
     trigger: {
diff --git a/extensions/amp-base-carousel/0.1/amp-base-carousel.css b/extensions/amp-base-carousel/0.1/amp-base-carousel.css
index dbffa37f82ac4..57c8c5228ee6c 100644
--- a/extensions/amp-base-carousel/0.1/amp-base-carousel.css
+++ b/extensions/amp-base-carousel/0.1/amp-base-carousel.css
@@ -59,12 +59,12 @@ amp-base-carousel[dir="rtl"] .i-amphtml-base-carousel-arrow-next-slot {
   transform: scaleX(-1);
 }
 
-amp-base-carousel[loop="false"] .i-amphtml-base-carousel-arrow-prev-slot > [disabled],
-amp-base-carousel[loop="false"] .i-amphtml-base-carousel-arrow-next-slot > [disabled],
+amp-base-carousel .i-amphtml-carousel-scroll[loop="false"] + .i-amphtml-base-carousel-arrows > .i-amphtml-base-carousel-arrow-prev-slot > [disabled],
+amp-base-carousel .i-amphtml-carousel-scroll[loop="false"] + .i-amphtml-base-carousel-arrows > .i-amphtml-base-carousel-arrow-next-slot > [disabled],
 amp-base-carousel[i-amphtml-base-carousel-hide-buttons] .i-amphtml-base-carousel-arrow-prev-slot > *,
 amp-base-carousel[i-amphtml-base-carousel-hide-buttons] .i-amphtml-base-carousel-arrow-next-slot > * {
   opacity: 0;
-  /** 
+  /**
    * Note, screen readers can still activate the buttons when hide buttons is
    * specified, even though we have `pointer-events: none`.
    */
diff --git a/extensions/amp-base-carousel/0.1/amp-base-carousel.js b/extensions/amp-base-carousel/0.1/amp-base-carousel.js
index 5c7a83b99843a..09589384d7afd 100644
--- a/extensions/amp-base-carousel/0.1/amp-base-carousel.js
+++ b/extensions/amp-base-carousel/0.1/amp-base-carousel.js
@@ -15,12 +15,12 @@
  */
 
 import {ActionSource} from './action-source';
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {CSS} from '../../../build/amp-base-carousel-0.1.css';
 import {Carousel} from './carousel.js';
 import {CarouselEvents} from './carousel-events';
 import {ChildLayoutManager} from './child-layout-manager';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {
   ResponsiveAttributes,
   getResponsiveAttributeValue,
@@ -28,16 +28,17 @@ import {
 import {Services} from '../../../src/services';
 import {createCustomEvent, getDetail} from '../../../src/event-helper';
 import {dev, devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {htmlFor} from '../../../src/static-template';
-import {isLayoutSizeDefined} from '../../../src/layout';
+import {dict} from '../../../src/core/types/object';
 import {
+  dispatchCustomEvent,
   isRTL,
   iterateCursor,
   scopedQuerySelectorAll,
   toggleAttribute,
 } from '../../../src/dom';
-import {toArray} from '../../../src/types';
+import {htmlFor} from '../../../src/static-template';
+import {isLayoutSizeDefined} from '../../../src/layout';
+import {toArray} from '../../../src/core/types/array';
 
 /**
  * @enum {number}
@@ -57,6 +58,11 @@ function isSizer(el) {
 }
 
 class AmpCarousel extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -159,11 +165,6 @@ class AmpCarousel extends AMP.BaseElement {
     return isLayoutSizeDefined(layout);
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   buildCallback() {
     this.action_ = Services.actionServiceForDoc(this.element);
@@ -243,7 +244,8 @@ class AmpCarousel extends AMP.BaseElement {
    *   actionSource: (!ActionSource|undefined),
    * }=} options
    */
-  goToSlide(index, {smoothScroll = false, actionSource} = {}) {
+  goToSlide(index, options = {}) {
+    const {actionSource, smoothScroll = false} = options;
     this.carousel_.goToSlide(index, {smoothScroll, actionSource});
   }
 
@@ -448,7 +450,7 @@ class AmpCarousel extends AMP.BaseElement {
       'goToSlide',
       (actionInvocation) => {
         const {args, trust} = actionInvocation;
-        this.carousel_.goToSlide(args['index'] || -1, {
+        this.carousel_.goToSlide(Number(args['index'] ?? -1), {
           actionSource: this.getActionSource_(trust),
         });
       },
@@ -537,14 +539,18 @@ class AmpCarousel extends AMP.BaseElement {
   updateUi_() {
     const index = this.carousel_.getCurrentIndex();
     const loop = this.carousel_.isLooping();
+    const visibleCount = this.carousel_.getVisibleCount();
+    const isAtEnd = this.carousel_.isAtEnd();
+    const isAtStart = this.carousel_.isAtStart();
     // TODO(sparhami) for Shadow DOM, we will need to get the assigned nodes
     // instead.
     iterateCursor(this.prevArrowSlot_.children, (child) => {
-      const disabled = !loop && index === 0;
+      const disabled = (!loop && index === 0) || isAtStart;
       toggleAttribute(child, 'disabled', disabled);
     });
     iterateCursor(this.nextArrowSlot_.children, (child) => {
-      const disabled = !loop && index === this.slides_.length - 1;
+      const disabled =
+        (!loop && index >= this.slides_.length - visibleCount) || isAtEnd;
       toggleAttribute(child, 'disabled', disabled);
     });
     toggleAttribute(
@@ -637,7 +643,7 @@ class AmpCarousel extends AMP.BaseElement {
 
     const action = createCustomEvent(this.win, `slidescroll.${name}`, data);
     this.action_.trigger(this.element, name, action, trust);
-    this.element.dispatchCustomEvent(name, data);
+    dispatchCustomEvent(this.element, name, data);
     this.hadTouch_ = this.hadTouch_ || actionSource === ActionSource.TOUCH;
     this.updateUi_();
   }
diff --git a/extensions/amp-base-carousel/0.1/amp-base-carousel.md b/extensions/amp-base-carousel/0.1/amp-base-carousel.md
new file mode 100644
index 0000000000000..070a3208523d4
--- /dev/null
+++ b/extensions/amp-base-carousel/0.1/amp-base-carousel.md
@@ -0,0 +1,293 @@
+---
+$category@: layout
+formats:
+  - websites
+teaser:
+  text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.
+experimental: true
+---
+
+<!---
+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.
+-->
+
+# amp-base-carousel
+
+## Usage
+
+A generic carousel for displaying multiple similar pieces of content along a
+horizontal or vertical axis.
+
+Each of the `amp-base-carousel` component’s immediate children is considered an
+item in the carousel. Each of these nodes may also have arbitrary HTML children.
+
+The carousel consists of an arbitrary number of items, as well as optional
+navigational arrows to go forward or backwards a single item.
+
+The carousel advances between items if the user swipes or uses the customizable
+arrow buttons.
+
+## Attributes
+
+### Media Queries
+
+The attributes for `<amp-base-carousel>` can be configured to use different
+options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).
+
+### Configuration Options
+
+#### Number of Visible Slides
+
+##### mixed-length
+
+Either `true` or `false`, defaults to `false`. When true, uses the existing
+width (or height when horizontal) for each of the slides. This allows for a
+carousel with slides of different widths to be used.
+
+##### visible-count
+
+A number, defaults to `1`. Determines how many slides should be shown at a given
+time. Fractional values can be used to make part of a(n) additional slide(s)
+visible. This option is ignored when `mixed-length` is `true`.
+
+##### advance-count
+
+A number, defaults to `1`. Determines how many slides the carousel will advance
+when advancing using the previous or next arrows. This is useful when specifying
+the `visible-count` attribute.
+
+#### Auto Advance
+
+##### auto-advance
+
+Either `true` or `false`, defaults to `false`. Automatically advances the
+carousel to the next slide based on a delay. If the user manually changes
+slides, then the auto advance is stopped. Note that if `loop` is not enabled,
+when reaching the last item, the auto advance will move backwards to the first
+item.
+
+##### auto-advance-count
+
+A number, defaults to `1`. Determines how many slides the carousel will advance
+when automatically advancing. This is useful when specifying the `visible-count`
+attribute.
+
+##### auto-advance-interval
+
+A number, defaults to `1000`. Specifies the amount of time, in milliseconds,
+between subsequent automatic advances of the carousel.
+
+##### auto-advance-loops
+
+A number, defaults to `∞`. The number of times the carousel should advance
+through the slides before stopping.
+
+#### Snapping
+
+##### snap
+
+Either `true` or `false`, defaults to `true`. Determines whether or not the
+carousel should snap on slides when scrolling.
+
+##### snap-align
+
+Either `start` or `center`. When start aligning, the start of a slide (e.g. the
+left edge, when horizontal aligning) is aligned with the start of a carousel.
+When center aligning, the center of a slide is aligned with the center of a
+carousel.
+
+##### snap-by
+
+A number, defaults to `1`. This determines the granularity of snapping and is
+useful when using `visible-count`. This
+
+#### Miscellaneous
+
+##### controls
+
+Either `"always"`, `"auto"`, or `"never"`, defaults to `"auto"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `"always"`.
+
+-   `always`: Arrows are always displayed.
+-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.
+-   `never`: Arrows are never displayed.
+
+##### slide
+
+A number, defaults to `0`. This determines the initial slide shown in the
+carousel. This may be used with `amp-bind` to control which slide is currently
+showing.
+
+##### loop
+
+Either `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.
+
+##### horizontal
+
+Either `true` or `false`, defaults to `true`. When true the carousel will lay
+out horizontally, with the user being able to swipe left and right. When false,
+the carousel lays out vertically, with the user being able to swipe up and down.
+
+##### common attributes
+
+This element includes
+[common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
+
+## Actions
+
+### next
+
+Moves the carousel forwards by `advance-count` slides.
+
+### prev
+
+Moves the carousel backwards by `advance-count` slides.
+
+### goToSlide
+
+Moves the carousel to the slide specified by the `index` argument.
+
+## Events
+
+### slideChange
+
+This event is triggered when the index displayed by the carousel has changed.
+The new index is available via `event.index`.
+
+## Styling
+
+You may use the `amp-base-carousel` element selector to style the carousel
+freely.
+
+### Customizing Arrow Buttons
+
+Arrow buttons can be customized by passing in your own custom markup. For
+example, you can recreate the default styling with the following HTML and CSS:
+
+```css
+.carousel-prev,
+.carousel-next {
+  filter: drop-shadow(0px 1px 2px #4a4a4a);
+  width: 40px;
+  height: 40px;
+  padding: 20px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.carousel-prev {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M14,7.4 L9.4,12 L14,16.6" fill="none" stroke="#fff" stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" /></svg>');
+}
+
+.carousel-next {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M10,7.4 L14.6,12 L10,16.6" fill="none" stroke="#fff" stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" /></svg>');
+}
+```
+
+```html
+<amp-base-carousel …>
+  <div>first slide</div>
+  …
+  <button slot="next-arrow" class="carousel-next" aria-label="Next"></button>
+  <button
+    slot="prev-arrow"
+    class="carousel-prev"
+    aria-label="Previous"
+  ></button>
+</amp-base-carousel>
+```
+
+If you want more customization for the arrow buttons, you can use the `next` and
+`prev` actions. For example, if you want to place buttons under the carousel and
+use the words "Previous" and "Next" instead of having them in the default
+location, you can use the following HTML:
+
+```html
+  <amp-base-carousel id="carousel-1" …>
+    …
+    <div slot="next-arrow"></div>
+    <div slot="prev-arrow"></div>
+  </amp-carousel>
+  <button on="tap:carousel-1.prev()">Previous</button>
+  <button on="tap:carousel-1.next()">Next</button>
+```
+
+## Usage Notes
+
+### RTL
+
+`<amp-base-carousel>` currently requires that you let it know when it is in an
+right-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will
+generally work without this, there may be a few bugs. You can let the carousel
+know that it should operate as `rtl` as follows:
+
+```html
+<amp-base-carousel dir="rtl" …>
+  …
+</amp-base-carousel>
+```
+
+If the carousel is in a RTL context, and you want the carousel to operate as
+LTR, you can explicitly set the `dir="ltr"` on the carousel.
+
+### Slide layout
+
+Slides are automatically sized by the carousel when **not** specifying
+`mixed-lengths`. You should give the slides `layout="flex-item"`:
+
+```html
+<amp-base-carousel …>
+  <amp-img layout="flex-item" src="…"></amp-img>
+</amp-base-carousel>
+```
+
+The slides have a default height of `100%` when the carousel is laid out
+horizontally. This can easily be changed with CSS or by using
+`layout="fixed-height"`. When specifying the height, the slide will be
+vertically centered within the carousel.
+
+If you want to horizontally center your slide content, you will want to create a
+wrapping element, and use that to center the content.
+
+### Number of Visible Slides
+
+When changing the number of visible slides using `visible-slides`, in response
+to a media query, you will likely want to change the aspect ratio of the
+carousel itself to match the new number of visible slides. For example, if you
+want to show three slides at a time with a one by one aspect ratio, you would
+want an aspect ratio of three by one for the carousel itself. Similiarly, with
+four slides at a time you would want an aspect ratio of four by one. In
+addition, when changing `visible-slides`, you likely want to change
+`advance-count`.
+
+```html
+<!-- Using an aspect ratio of 3:2 for the slides in this example. -->
+<amp-base-carousel
+  layout="responsive"
+  width="3"
+  height="1"
+  heights="(min-width: 600px) calc(100% * 4 * 3 / 2), calc(100% * 3 * 3 / 2)"
+  visible-count="(min-width: 600px) 4, 3"
+  advance-count="(min-width: 600px) 4, 3"
+>
+  <amp-img layout="flex-item" src="…"></amp-img>
+  …
+</amp-base-carousel>
+```
+
+## Validation
+
+See [amp-base-carousel rules](../validator-amp-base-carousel.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-base-carousel/0.1/array-util.js b/extensions/amp-base-carousel/0.1/array-util.js
index 9cbd0837bfc17..0efc8b232c79a 100644
--- a/extensions/amp-base-carousel/0.1/array-util.js
+++ b/extensions/amp-base-carousel/0.1/array-util.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {mod} from '../../../src/utils/math';
+import {mod} from '../../../src/core/math';
 
 /**
  * Calculates the forwards distance between two indicies in an Array, treating
diff --git a/extensions/amp-base-carousel/0.1/auto-advance.js b/extensions/amp-base-carousel/0.1/auto-advance.js
index caa2ab4351ec3..78db269054d37 100644
--- a/extensions/amp-base-carousel/0.1/auto-advance.js
+++ b/extensions/amp-base-carousel/0.1/auto-advance.js
@@ -16,7 +16,7 @@
 
 import {ActionSource} from './action-source';
 import {CarouselEvents} from './carousel-events';
-import {debounce} from '../../../src/utils/rate-limit';
+import {debounce} from '../../../src/core/types/function';
 import {getDetail, listen, listenOnce} from '../../../src/event-helper';
 
 const MIN_AUTO_ADVANCE_INTERVAL = 1000;
@@ -48,7 +48,7 @@ export class AutoAdvance {
    * }} config
    */
   constructor(config) {
-    const {win, element, scrollContainer, advanceable} = config;
+    const {advanceable, element, scrollContainer, win} = config;
     /** @private @const */
     this.win_ = win;
 
diff --git a/extensions/amp-base-carousel/0.1/carousel-accessibility.js b/extensions/amp-base-carousel/0.1/carousel-accessibility.js
index 21f9538be5046..dbc21568d6d23 100644
--- a/extensions/amp-base-carousel/0.1/carousel-accessibility.js
+++ b/extensions/amp-base-carousel/0.1/carousel-accessibility.js
@@ -39,7 +39,7 @@ export class CarouselAccessibility {
    * }} config
    */
   constructor(config) {
-    const {win, element, scrollContainer, runMutate, stoppable} = config;
+    const {element, runMutate, scrollContainer, stoppable, win} = config;
     /** @protected @const */
     this.win_ = win;
 
diff --git a/extensions/amp-base-carousel/0.1/carousel.css b/extensions/amp-base-carousel/0.1/carousel.css
index fb1a40605a7aa..8b26f4b8e1d5d 100644
--- a/extensions/amp-base-carousel/0.1/carousel.css
+++ b/extensions/amp-base-carousel/0.1/carousel.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
- /**
+/**
   * We need a separate container for `position: absolute` for two reasons:
   *
   * 1. We do not want to make the scrolling area positioned, so that content
@@ -57,17 +57,17 @@
  * calculating the 100% height (or width) of the slide.
 */
 /* Firefox */
-.i-amphtml-carousel-scroll[hide-scrollbar="true"] {
-  scrollbar-width: none; 
+.i-amphtml-carousel-scroll[hide-scrollbar='true'] {
+  scrollbar-width: none;
 }
 
- /* Chrome, Safari */
-.i-amphtml-carousel-scroll[hide-scrollbar="true"]::-webkit-scrollbar {
+/* Chrome, Safari */
+.i-amphtml-carousel-scroll[hide-scrollbar='true']::-webkit-scrollbar {
   display: none;
   box-sizing: content-box !important;
 }
 
-.i-amphtml-carousel-scroll[horizontal="true"] {
+.i-amphtml-carousel-scroll[horizontal='true'] {
   flex-direction: row;
   scroll-snap-type-x: mandatory; /* Firefox, IE */
   scroll-snap-type: x mandatory;
@@ -76,7 +76,7 @@
   overflow-y: hidden;
 }
 
-.i-amphtml-carousel-scroll[horizontal="false"] {
+.i-amphtml-carousel-scroll[horizontal='false'] {
   flex-direction: column;
   scroll-snap-type-y: mandatory; /* Firefox, IE */
   scroll-snap-type: y mandatory;
@@ -85,16 +85,17 @@
   overflow-x: hidden;
 }
 
-.i-amphtml-carousel-scroll[snap="false"] {
+.i-amphtml-carousel-scroll[snap='false'] {
   scroll-snap-type: none;
 }
 
-.i-amphtml-carousel-scroll[user-scrollable="false"] {
+.i-amphtml-carousel-scroll[user-scrollable='false'] {
   overflow: hidden;
 }
 
 .i-amphtml-carousel-spacer {
-  z-index: -1;  
+  visibility: hidden;
+  z-index: -1;
 }
 
 .i-amphtml-carousel-slotted,
@@ -107,29 +108,37 @@
   scroll-snap-stop: always;
 }
 
-.i-amphtml-carousel-scroll[horizontal="true"][mixed-length="false"] > .i-amphtml-carousel-slotted,
-.i-amphtml-carousel-scroll[horizontal="true"][mixed-length="false"] > .i-amphtml-carousel-spacer {
+.i-amphtml-carousel-scroll[horizontal='true'][mixed-length='false']
+  > .i-amphtml-carousel-slotted,
+.i-amphtml-carousel-scroll[horizontal='true'][mixed-length='false']
+  > .i-amphtml-carousel-spacer {
   /** TODO(sparhami) Do not use CSS custom property */
   width: calc(100% / var(--visible-count)) !important;
   min-width: auto !important;
   max-width: none !important;
 }
 
-.i-amphtml-carousel-scroll[horizontal="false"][mixed-length="false"] > .i-amphtml-carousel-slotted,
-.i-amphtml-carousel-scroll[horizontal="false"][mixed-length="false"] > .i-amphtml-carousel-spacer {
+.i-amphtml-carousel-scroll[horizontal='false'][mixed-length='false']
+  > .i-amphtml-carousel-slotted,
+.i-amphtml-carousel-scroll[horizontal='false'][mixed-length='false']
+  > .i-amphtml-carousel-spacer {
   /** TODO(sparhami) Do not use CSS custom property */
   height: calc(100% / var(--visible-count)) !important;
   min-height: auto !important;
   max-height: none !important;
 }
 
-.i-amphtml-carousel-scroll[horizontal="true"][snap="true"][mixed-length="true"] > .i-amphtml-carousel-slotted,
-.i-amphtml-carousel-scroll[horizontal="true"][snap="true"][mixed-length="true"] > .i-amphtml-carousel-spacer {
+.i-amphtml-carousel-scroll[horizontal='true'][snap='true'][mixed-length='true']
+  > .i-amphtml-carousel-slotted,
+.i-amphtml-carousel-scroll[horizontal='true'][snap='true'][mixed-length='true']
+  > .i-amphtml-carousel-spacer {
   max-width: 100% !important;
 }
 
-.i-amphtml-carousel-scroll[horizontal="false"][snap="true"][mixed-length="true"] > .i-amphtml-carousel-slotted,
-.i-amphtml-carousel-scroll[horizontal="false"][snap="true"][mixed-length="true"] > .i-amphtml-carousel-spacer {
+.i-amphtml-carousel-scroll[horizontal='false'][snap='true'][mixed-length='true']
+  > .i-amphtml-carousel-slotted,
+.i-amphtml-carousel-scroll[horizontal='false'][snap='true'][mixed-length='true']
+  > .i-amphtml-carousel-spacer {
   max-height: 100% !important;
 }
 
diff --git a/extensions/amp-base-carousel/0.1/carousel.js b/extensions/amp-base-carousel/0.1/carousel.js
index ce3e040a05226..afd8f92042802 100644
--- a/extensions/amp-base-carousel/0.1/carousel.js
+++ b/extensions/amp-base-carousel/0.1/carousel.js
@@ -30,10 +30,11 @@ import {AutoAdvance} from './auto-advance';
 import {CarouselAccessibility} from './carousel-accessibility';
 import {CarouselEvents} from './carousel-events';
 import {backwardWrappingDistance, forwardWrappingDistance} from './array-util';
-import {clamp, mod} from '../../../src/utils/math';
+import {clamp, mod} from '../../../src/core/math';
 import {createCustomEvent, listen, listenOnce} from '../../../src/event-helper';
-import {debounce} from '../../../src/utils/rate-limit';
-import {dict} from '../../../src/utils/object';
+import {debounce} from '../../../src/core/types/function';
+import {dev} from '../../../src/log';
+import {dict} from '../../../src/core/types/object';
 import {
   getStyle,
   setImportantStyles,
@@ -52,6 +53,8 @@ import {iterateCursor} from '../../../src/dom';
  */
 const RESET_SCROLL_REFERENCE_POINT_WAIT_MS = 200;
 
+const SPACER_CLASS = 'i-amphtml-carousel-spacer';
+
 /**
  * Runs a callback while disabling smooth scrolling by temporarily setting
  * the `scrollBehavior` to `auto`.
@@ -152,7 +155,7 @@ export class Carousel {
    * }} config
    */
   constructor(config) {
-    const {win, element, scrollContainer, runMutate} = config;
+    const {element, initialIndex, runMutate, scrollContainer, win} = config;
     /** @private @const */
     this.win_ = win;
 
@@ -310,7 +313,7 @@ export class Carousel {
      * restingIndex to currentIndex.
      * @private {number}
      */
-    this.currentIndex_ = 0;
+    this.currentIndex_ = initialIndex || 0;
 
     /**
      * Whether or not looping is requested. Do not use directly, but rather use
@@ -391,8 +394,9 @@ export class Carousel {
    *   allowWrap: (boolean|undefined),
    * }=} options
    */
-  advance(delta, {actionSource, allowWrap = false} = {}) {
-    const {slides_, currentIndex_, requestedIndex_} = this;
+  advance(delta, options = {}) {
+    const {currentIndex_, requestedIndex_, slides_} = this;
+    const {actionSource, allowWrap = false} = options;
 
     // If we have a requested index, use that as the reference point. The
     // current index may not be updated yet.This allows calling `advance`
@@ -404,17 +408,20 @@ export class Carousel {
     const atEnd = index === endIndex;
     const passingStart = newIndex < 0;
     const passingEnd = newIndex > endIndex;
+    const forwardWithinLastWindow =
+      delta > 0 && this.inLastWindow_(index) && this.inLastWindow_(newIndex);
 
     let slideIndex;
     if (this.isLooping()) {
       slideIndex = mod(newIndex, endIndex + 1);
     } else if (!allowWrap) {
-      slideIndex = clamp(newIndex, 0, endIndex);
-    } else if (
-      delta > 0 &&
-      this.inLastWindow_(index) &&
-      this.inLastWindow_(newIndex)
-    ) {
+      // We only need to bail out if both indices are in the
+      // the last window. If we didn't bail, we would attempt
+      // to scroll the container, when it shouldn't.
+      slideIndex = forwardWithinLastWindow
+        ? index
+        : clamp(newIndex, 0, endIndex);
+    } else if (forwardWithinLastWindow) {
       slideIndex = 0;
     } else if ((passingStart && atStart) || (passingEnd && !atEnd)) {
       slideIndex = endIndex;
@@ -478,7 +485,8 @@ export class Carousel {
    *   actionSource: (!ActionSource|undefined),
    * }=} options
    */
-  goToSlide(index, {smoothScroll = true, actionSource} = {}) {
+  goToSlide(index, options = {}) {
+    const {actionSource, smoothScroll = true} = options;
     if (index < 0 || index > this.slides_.length - 1 || isNaN(index)) {
       return;
     }
@@ -605,9 +613,19 @@ export class Carousel {
    * @param {!Array<!Element>} slides
    */
   updateSlides(slides) {
+    const {length} = slides;
+    if (!length) {
+      const TAG = this.element_.tagName.toUpperCase();
+      dev().warn(TAG, 'No slides were found.');
+      return;
+    }
     this.slides_ = slides;
+    // Normalize current index to updated slide length.
+    this.currentIndex_ = this.isLooping()
+      ? mod(this.currentIndex_, length)
+      : clamp(this.currentIndex_, 0, length - 1) || 0;
     this.carouselAccessibility_.updateSlides(slides);
-    // TODO(sparhami) Should need to call `this.updateUi()` here.
+    this.updateUi();
   }
 
   /**
@@ -902,9 +920,7 @@ export class Carousel {
       return false;
     }
 
-    return this.forwards_
-      ? this.isScrollAtRightEdge()
-      : this.isScrollAtLeftEdge();
+    return this.isScrollAtEndingEdge_();
   }
 
   /**
@@ -916,29 +932,38 @@ export class Carousel {
       return false;
     }
 
-    return this.forwards_
-      ? this.isScrollAtLeftEdge()
-      : this.isScrollAtRightEdge();
+    return this.isScrollAtBeginningEdge_();
   }
 
   /**
    * @return {boolean} True if the scrolling is at the right edge of the
-   *    carousel. Note that this ignores RTL, and only checks for the right
-   *    edge.
+   *    carousel in LTR and left edge of the carousel if RTL.
+   * @private
    */
-  isScrollAtRightEdge() {
+  isScrollAtEndingEdge_() {
     const el = this.scrollContainer_;
-    const {width} = el./*OK*/ getBoundingClientRect();
-    return el./*OK*/ scrollLeft + Math.ceil(width) >= el./*OK*/ scrollWidth;
+    const vector =
+      el./*OK*/ getBoundingClientRect().width * (this.forwards_ ? 1 : -1);
+    const roundedVector = this.forwards_
+      ? Math.ceil(vector)
+      : Math.floor(vector);
+    const edgeClosestToEnd = el./*OK*/ scrollLeft + roundedVector;
+    const containerScrollWidth = el./*OK*/ scrollWidth;
+
+    const atEndingEdge = this.forwards_
+      ? edgeClosestToEnd >= containerScrollWidth
+      : edgeClosestToEnd <= -containerScrollWidth;
+    return atEndingEdge;
   }
 
   /**
    * @return {boolean} True if the scrolling is at the left edge of the
-   *    carousel. Note that this ignores RTL, and only checks for the left
-   *    edge.
+   *    carousel for LTR and right edge for RTL.
+   * @private
    */
-  isScrollAtLeftEdge() {
-    return this.scrollContainer_./*OK*/ scrollLeft <= 0;
+  isScrollAtBeginningEdge_() {
+    const currentScrollPos = this.scrollContainer_./*OK*/ scrollLeft;
+    return this.forwards_ ? currentScrollPos <= 0 : currentScrollPos >= 0;
   }
 
   /**
@@ -950,7 +975,7 @@ export class Carousel {
     const spacers = [];
     for (let i = 0; i < count; i++) {
       const spacer = document.createElement('div');
-      spacer.className = 'i-amphtml-carousel-spacer';
+      spacer.className = SPACER_CLASS;
       spacers.push(spacer);
     }
     return spacers;
@@ -1033,10 +1058,17 @@ export class Carousel {
       // If an item is at the start of the group, it gets an aligned.
       const shouldSnap = mod(slideIndex, this.snapBy_) === 0;
 
-      setStyles(child, {
-        'scroll-snap-align': shouldSnap ? this.alignment_ : 'none',
-        'scroll-snap-coordinate': shouldSnap ? coordinate : 'none',
-      });
+      // Only apply `snap` feature on non-looping carousels
+      // or only the spacers of the looping carousels.
+      // Adding `snap` feature to non-spacers in a looping carousel
+      // causes all weird behaviors due to non-homogenous siblings,
+      // i.e. <amp-img> with lots of non-fixed sized children, etc.
+      if (child.classList.contains(SPACER_CLASS) || !this.isLooping()) {
+        setStyles(child, {
+          'scroll-snap-align': shouldSnap ? this.alignment_ : 'none',
+          'scroll-snap-coordinate': shouldSnap ? coordinate : 'none',
+        });
+      }
     });
   }
 
@@ -1081,8 +1113,8 @@ export class Carousel {
    */
   updateCurrent_() {
     const {
-      allSpacers_,
       alignment_,
+      allSpacers_,
       axis_,
       currentIndex_,
       scrollContainer_,
@@ -1178,10 +1210,11 @@ export class Carousel {
     }
 
     // We are updating during a programmatic scroll, so go to the correct
-    // index.
+    // index (and update offset accordingly).
     if (this.requestedIndex_ !== null) {
       this.currentIndex_ = this.requestedIndex_;
       this.requestedIndex_ = null;
+      this.currentElementOffset_ = 0;
     }
 
     const totalLength = sum(this.getSlideLengths_());
@@ -1327,7 +1360,7 @@ export class Carousel {
   /**
    * Checks if a given index is in the last window of items. For example, if
    * showing two slides at a time with the slides [a, b, c, d], both slide
-   * b and c are in the last window.
+   * c and d are in the last window.
    * @param {number} index The index to check.
    * @return {boolean} True if the slide is in the last window, false
    *    otherwise.
diff --git a/extensions/amp-base-carousel/0.1/child-layout-manager.js b/extensions/amp-base-carousel/0.1/child-layout-manager.js
index 42dbea81f5e62..015b5ae7ccf9b 100644
--- a/extensions/amp-base-carousel/0.1/child-layout-manager.js
+++ b/extensions/amp-base-carousel/0.1/child-layout-manager.js
@@ -73,7 +73,7 @@ const ViewportChangeState = {
  * intersect with the AMP component. The parent AMP component should notify the
  * manager as its own layout state changes so that the children can be updated
  * accordingly.
- * 
+ *
  * Note: For Safari 12, this does not schedule layout for slides until they
  * enter the viewport, since `rootMargin` on `IntersectionObserver` is not
  * properly handled.
@@ -87,7 +87,7 @@ const ViewportChangeState = {
  *     ampElement: this,
  *   });
  * }
- 
+
  * buildCallback() {
  *   // Call this each time the effective children you want to manage change.
  *   this.childLayoutManager.updateChildren(children);
@@ -128,6 +128,7 @@ export class ChildLayoutManager {
       viewportIntersectionThreshold = intersectionThreshold,
       viewportIntersectionCallback = () => {},
     } = config;
+
     /** @private @const */
     this.ampElement_ = ampElement;
 
@@ -197,11 +198,6 @@ export class ChildLayoutManager {
    * @param {boolean} isIntersecting
    */
   triggerVisibility_(target, isIntersecting) {
-    this.owners_.updateInViewport(
-      this.ampElement_.element,
-      target,
-      isIntersecting
-    );
     this.viewportIntersectionCallback_(target, isIntersecting);
   }
 
@@ -302,7 +298,7 @@ export class ChildLayoutManager {
    */
   processInViewportChanges_(entries) {
     entries.forEach((entry) => {
-      const {target, isIntersecting} = entry;
+      const {isIntersecting, target} = entry;
       target[IN_VIEWPORT_FLAG] = isIntersecting
         ? ViewportChangeState.ENTER
         : ViewportChangeState.LEAVE;
@@ -358,6 +354,7 @@ export class ChildLayoutManager {
       const child = this.children_[i];
 
       if (child[IN_VIEWPORT_FLAG] == ViewportChangeState.ENTER) {
+        this.triggerLayout_(child, true);
         this.triggerVisibility_(child, true);
       } else if (child[IN_VIEWPORT_FLAG] == ViewportChangeState.LEAVE) {
         this.triggerVisibility_(child, false);
diff --git a/extensions/amp-base-carousel/0.1/dimensions.js b/extensions/amp-base-carousel/0.1/dimensions.js
index ef9e74c4f7cbf..078e6e925a87e 100644
--- a/extensions/amp-base-carousel/0.1/dimensions.js
+++ b/extensions/amp-base-carousel/0.1/dimensions.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {mod} from '../../../src/utils/math';
+import {mod} from '../../../src/core/math';
 import {setImportantStyles, setStyle} from '../../../src/style';
 
 /**
@@ -48,14 +48,8 @@ let DimensionDef;
  * @return {!DimensionDef} The dimension for the Element along the given Axis.
  */
 export function getDimension(axis, el) {
-  const {
-    top,
-    bottom,
-    height,
-    left,
-    right,
-    width,
-  } = el./*OK*/ getBoundingClientRect();
+  const {bottom, height, left, right, top, width} =
+    el./*OK*/ getBoundingClientRect();
 
   return {
     start: axis == Axis.X ? left : top,
@@ -70,7 +64,7 @@ export function getDimension(axis, el) {
  * @return {number} The center point.
  */
 export function getCenter(axis, el) {
-  const {start, end} = getDimension(axis, el);
+  const {end, start} = getDimension(axis, el);
   return (start + end) / 2;
 }
 
@@ -134,7 +128,7 @@ export function setTransformTranslateStyle(axis, el, delta) {
  * @return {boolean} If the element overlaps the position along the given axis.
  */
 export function overlaps(axis, el, position) {
-  const {start, end} = getDimension(axis, el);
+  const {end, start} = getDimension(axis, el);
   // Ignore the end point, since that is shared with the adjacent Element.
   return start <= position && position < end;
 }
diff --git a/extensions/amp-base-carousel/0.1/responsive-attributes.js b/extensions/amp-base-carousel/0.1/responsive-attributes.js
index bb11e1b8f36a2..896ae853ab344 100644
--- a/extensions/amp-base-carousel/0.1/responsive-attributes.js
+++ b/extensions/amp-base-carousel/0.1/responsive-attributes.js
@@ -50,7 +50,7 @@ function getMediaQueryListsAndValues(value) {
       })
       // Remove any items that did not match the regex above and are
       // undefined as a result.
-      .filter((item) => item)
+      .filter(Boolean)
   );
 }
 
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/helpers.js b/extensions/amp-base-carousel/0.1/test-e2e/helpers.js
index e921dfe46257f..2b70d7904f940 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/helpers.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/helpers.js
@@ -39,8 +39,10 @@ export async function waitForCarouselImg(controller, n) {
   return await waitForImgLoad(controller, el);
 }
 
-export function getSlides(controller) {
-  return controller.findElements(`${TAG_NAME} .${SLOTTED_CLASS}`);
+export function getSlides(controller, opt_carouselId = '') {
+  return controller.findElements(
+    `${TAG_NAME}${opt_carouselId} .${SLOTTED_CLASS}`
+  );
 }
 
 export async function getSlide(controller, n) {
@@ -78,3 +80,7 @@ export function getPrevArrow(controller) {
 export function getNextArrow(controller) {
   return controller.findElement(NEXT_ARROW_SELECTOR);
 }
+
+export function sleep(ms) {
+  return new Promise((res) => setTimeout(res, ms));
+}
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-advance.js b/extensions/amp-base-carousel/0.1/test-e2e/test-advance.js
new file mode 100644
index 0000000000000..7157807601eef
--- /dev/null
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-advance.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {getNextArrow, getPrevArrow, getSlides, sleep} from './helpers';
+
+const pageWidth = 500;
+const pageHeight = 800;
+
+describes.endtoend(
+  'amp-base-carousel - advance',
+  {
+    version: '0.1',
+    fixture: 'amp-base-carousel/advance.amp.html',
+    experiments: ['amp-base-carousel'],
+    environments: ['single'],
+    initialRect: {width: pageWidth, height: pageHeight},
+  },
+  async (env) => {
+    let controller;
+    let nextArrow;
+    let prevArrow;
+
+    function css(handle, name) {
+      return controller.getElementCssValue(handle, name);
+    }
+
+    function rect(el) {
+      return controller.getElementRect(el);
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+
+      nextArrow = await getNextArrow(controller);
+    });
+
+    // TODO(micajuine-ho, #24195): This test is flaky during CI.
+    it.skip('should move forwards once', async () => {
+      await controller.click(nextArrow);
+      await sleep(500);
+      prevArrow = await getPrevArrow(controller);
+      await expect(css(prevArrow, 'opacity')).to.equal('1');
+      await expect(css(nextArrow, 'opacity')).to.equal('1');
+
+      const slides = await getSlides(controller);
+      const slideOne = await rect(slides[0]);
+      const slideTwo = await rect(slides[1]);
+
+      await expect(slideOne['x']).to.be.lessThan(0);
+      await expect(slideTwo['x']).to.be.at.least(0);
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-arrows-in-lightbox.js b/extensions/amp-base-carousel/0.1/test-e2e/test-arrows-in-lightbox.js
new file mode 100644
index 0000000000000..79683f20a0882
--- /dev/null
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-arrows-in-lightbox.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {getNextArrow, getPrevArrow} from './helpers';
+
+describes.endtoend(
+  'amp base carousel in lightbox',
+  {
+    fixture: 'amp-base-carousel/arrows-in-lightbox.amp.html',
+    environments: ['single'],
+  },
+  async (env) => {
+    let controller;
+    let nextArrow;
+    let prevArrow;
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    it('should open with both arrows', async () => {
+      // Click on image 2
+      const secondImage = await controller.findElement('#second');
+      await controller.click(secondImage);
+
+      // Wait for lightbox to load the carousel and image
+      const lightbox = await controller.findElement('#lightbox1');
+      await expect(await controller.getElementProperty(lightbox, 'style')).to
+        .not.be.null;
+
+      // Both arrows should be showing
+      prevArrow = await getPrevArrow(controller);
+      nextArrow = await getNextArrow(controller);
+      await expect(
+        controller.getElementCssValue(prevArrow, 'opacity')
+      ).to.equal('1');
+      await expect(
+        controller.getElementCssValue(nextArrow, 'opacity')
+      ).to.equal('1');
+    });
+
+    it('should open with one arrow', async () => {
+      // Click on last image
+      const lastImage = await controller.findElement('#fourth');
+      await controller.click(lastImage);
+
+      // Wait for lightbox to load the carousel and image
+      const lightbox = await controller.findElement('#lightbox1');
+      await expect(await controller.getElementProperty(lightbox, 'style')).to
+        .not.be.null;
+
+      // Only prev arrow should be showing since non-looping carousel is on the last slide.
+      prevArrow = await getPrevArrow(controller);
+      nextArrow = await getNextArrow(controller);
+      await expect(
+        controller.getElementCssValue(prevArrow, 'opacity')
+      ).to.equal('1');
+      await expect(
+        controller.getElementCssValue(nextArrow, 'opacity')
+      ).to.equal('0');
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-arrows-non-looping.js b/extensions/amp-base-carousel/0.1/test-e2e/test-arrows-non-looping.js
index 148bd6bd282fe..e77d36e446fbc 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/test-arrows-non-looping.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-arrows-non-looping.js
@@ -22,10 +22,10 @@ const pageWidth = 600;
 const pageHeight = 600;
 
 describes.endtoend(
-  'AMP carousel arrows when non-looping',
+  'amp-base-carousel - arrows when non-looping',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-base-carousel/non-looping.amp.html',
+    version: '0.1',
+    fixture: 'amp-base-carousel/non-looping.amp.html',
     experiments: ['amp-base-carousel', 'layers'],
     initialRect: {width: pageWidth, height: pageHeight},
     //TODO(spaharmi): fails on shadow demo
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-arrows.js b/extensions/amp-base-carousel/0.1/test-e2e/test-arrows.js
index 37f437a1a6961..7f3c8da4f9ddf 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/test-arrows.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-arrows.js
@@ -20,10 +20,10 @@ import {getNextArrow, getPrevArrow, getSlide} from './helpers';
 const SLIDE_COUNT = 7;
 
 describes.endtoend(
-  'AMP carousel arrows with custom arrows',
+  'amp-base-carousel - arrows with custom arrows',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-base-carousel/custom-arrows.amp.html',
+    version: '0.1',
+    fixture: 'amp-base-carousel/custom-arrows.amp.html',
     experiments: [
       'amp-base-carousel',
       'layers',
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-autoadvance.js b/extensions/amp-base-carousel/0.1/test-e2e/test-autoadvance.js
index 5334def9ccd28..e405e3a5da4bc 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/test-autoadvance.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-autoadvance.js
@@ -20,10 +20,10 @@ const pageWidth = 800;
 const pageHeight = 600;
 
 describes.endtoend(
-  'AMP carousel autoadvance',
+  'amp-base-carousel - autoadvance',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-base-carousel/autoadvance.amp.html',
+    version: '0.1',
+    fixture: 'amp-base-carousel/autoadvance.amp.html',
     experiments: ['amp-base-carousel', 'layers'],
     initialRect: {width: pageWidth, height: pageHeight},
   },
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-carousel.js b/extensions/amp-base-carousel/0.1/test-e2e/test-carousel.js
index 768ea3b1c9345..95856f9240b68 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/test-carousel.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-carousel.js
@@ -19,14 +19,14 @@ import {getScrollingElement, getSlide, waitForCarouselImg} from './helpers';
 const pageWidth = 800;
 const pageHeight = 600;
 
-/** Increase timeout for running on Travis macOS **/
+/** Increase timeout for running on macOS **/
 const testTimeout = 20000;
 
 describes.endtoend(
-  'AMP carousel',
+  'amp-base-carousel - basic functionality',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-base-carousel/basic.amp.html',
+    version: '0.1',
+    fixture: 'amp-base-carousel/basic.amp.html',
     experiments: [
       'amp-base-carousel',
       'amp-lightbox-gallery-base-carousel',
@@ -49,7 +49,7 @@ describes.endtoend(
       controller = env.controller;
     });
 
-    it('should render correctly', async function () {
+    it.skip('should render correctly', async function () {
       this.timeout(testTimeout);
       const el = await getScrollingElement(controller);
 
@@ -113,7 +113,7 @@ describes.endtoend(
       await expect(prop(el, 'scrollLeft')).to.equal(scrollLeft);
     });
 
-    // TODO(wg-ui-and-a11y, #27701): Flaky on Chrome+viewer environment.
+    // TODO(wg-components, #27701): Flaky on Chrome+viewer environment.
     it.skip('should have the correct scroll position when resizing', async function () {
       this.timeout(testTimeout);
       // Note: 513 seems to be the smallest settable width.
@@ -145,6 +145,26 @@ describes.endtoend(
       });
     });
 
+    it.skip('should go to slide 0 when index is set to 0 ', async function () {
+      this.timeout(testTimeout);
+      const el = await getScrollingElement(controller);
+
+      const firstSlide = await getSlide(controller, 0);
+      const secondSlide = await getSlide(controller, 1);
+      const goToSlideBtn = await controller.findElement(
+        'button[on="tap:carousel-1.goToSlide(index = 0)"]'
+      );
+
+      await waitForCarouselImg(controller, 0);
+      await waitForCarouselImg(controller, 1);
+
+      await controller.scrollTo(el, {left: 1});
+      await expect(controller.getElementRect(secondSlide)).to.include({x: 0});
+
+      await controller.click(goToSlideBtn);
+      await expect(controller.getElementRect(firstSlide)).to.include({x: 0});
+    });
+
     describe('looping', function () {
       it('should show the last slide when looping', async function () {
         this.timeout(testTimeout);
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-default-attributes.js b/extensions/amp-base-carousel/0.1/test-e2e/test-default-attributes.js
new file mode 100644
index 0000000000000..9ac69364de32a
--- /dev/null
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-default-attributes.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright 2020 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.
+ */
+
+const pageWidth = 800;
+const pageHeight = 800;
+
+describes.endtoend(
+  'amp-base-carousel - default attributes',
+  {
+    version: '0.1',
+    fixture: 'amp-base-carousel/default-attributes.amp.html',
+    // TODO (micajuineho): Add viewer-demo support.
+    environments: ['single'],
+    initialRect: {width: pageWidth, height: pageHeight},
+  },
+  async function (env) {
+    let controller;
+    let scrollContainer;
+    let loop;
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    function getScrollContainerByCarouselId(id) {
+      return controller.findElement(
+        `amp-base-carousel#${id} .i-amphtml-carousel-scroll`
+      );
+    }
+
+    it('should add loop="false" when loop is omitted (carousel-1)', async () => {
+      scrollContainer = await getScrollContainerByCarouselId('carousel-1');
+      loop = await controller.getElementAttribute(scrollContainer, 'loop');
+      await expect(loop).to.be.equal('false');
+    });
+
+    it('should keep loop="true" when valid (carousel-2)', async () => {
+      scrollContainer = await getScrollContainerByCarouselId('carousel-2');
+      loop = await controller.getElementAttribute(scrollContainer, 'loop');
+      await expect(loop).to.equal('true');
+    });
+
+    it('should set loop to "false" when invalid (carousel-3)', async () => {
+      scrollContainer = await getScrollContainerByCarouselId('carousel-3');
+      loop = await controller.getElementAttribute(scrollContainer, 'loop');
+      await expect(loop).to.equal('false');
+    });
+
+    it('should update loop based on media query', async () => {
+      scrollContainer = await getScrollContainerByCarouselId('carousel-4');
+      loop = await controller.getElementAttribute(scrollContainer, 'loop');
+      await expect(loop).to.equal('false');
+
+      await controller.setWindowRect({
+        width: 1200,
+        height: 1200,
+      });
+
+      scrollContainer = await getScrollContainerByCarouselId('carousel-4');
+      loop = await controller.getElementAttribute(scrollContainer, 'loop');
+      await expect(loop).to.equal('true');
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-goToSlide.js b/extensions/amp-base-carousel/0.1/test-e2e/test-goToSlide.js
new file mode 100644
index 0000000000000..c978661adc972
--- /dev/null
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-goToSlide.js
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {getPrevArrow, getSlides} from './helpers';
+
+describes.endtoend(
+  'amp base carousel in lightbox go to slide',
+  {
+    fixture: 'amp-base-carousel/arrows-in-lightbox.amp.html',
+    environments: ['single'],
+  },
+  async (env) => {
+    let controller;
+    let slides;
+    let prevArrow;
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    it('should move to first slide when prev arrow is clicked', async () => {
+      // Click on image 2
+      const secondImage = await controller.findElement('#second');
+      await controller.click(secondImage);
+
+      // Wait for lightbox to load the carousel and image
+      const lightbox = await controller.findElement('#lightbox1');
+      await expect(await controller.getElementProperty(lightbox, 'style')).to
+        .not.be.null;
+
+      // Expect second slide to be shown
+      slides = await getSlides(controller);
+      await expect(controller.getElementRect(slides[1])).to.include({x: 0});
+
+      // Click prev arrow
+      prevArrow = await getPrevArrow(controller);
+      await controller.click(prevArrow);
+
+      slides = await getSlides(controller);
+      await expect(controller.getElementRect(slides[0])).to.include({x: 0});
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-grouping.js b/extensions/amp-base-carousel/0.1/test-e2e/test-grouping.js
index bc389c9a3d7e3..9d05ca27e9745 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/test-grouping.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-grouping.js
@@ -20,11 +20,10 @@ const pageWidth = 800;
 const pageHeight = 600;
 
 describes.endtoend(
-  'AMP carousel grouping',
+  'amp-base-carousel - grouping',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-base-carousel/' +
-      'grouping-move-by-2.amp.html',
+    version: '0.1',
+    fixture: 'amp-base-carousel/grouping-move-by-2.amp.html',
     experiments: ['amp-base-carousel', 'layers'],
     initialRect: {width: pageWidth, height: pageHeight},
   },
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-hidden-controls.js b/extensions/amp-base-carousel/0.1/test-e2e/test-hidden-controls.js
index a632380aca719..d050997a087e0 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/test-hidden-controls.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-hidden-controls.js
@@ -17,10 +17,10 @@
 import {getNextArrow} from './helpers';
 
 describes.endtoend(
-  'AMP carousel arrows with hidden controls',
+  'amp-base-carousel - arrows with hidden controls',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-base-carousel/hidden-controls.amp.html',
+    version: '0.1',
+    fixture: 'amp-base-carousel/hidden-controls.amp.html',
     experiments: ['amp-base-carousel'],
     environments: ['single'],
   },
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-initial-slide.js b/extensions/amp-base-carousel/0.1/test-e2e/test-initial-slide.js
index 24b601ae87e4a..a0d431ee226a5 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/test-initial-slide.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-initial-slide.js
@@ -20,12 +20,11 @@ const pageWidth = 600;
 const pageHeight = 600;
 
 describes.endtoend(
-  'AMP carousel',
+  'amp-base-carousel - initial slide',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-base-carousel/' +
-      'initial-slide.amp.html',
-    experiments: ['amp-base-carousel', 'layers'],
+    version: '0.1',
+    fixture: 'amp-base-carousel/initial-slide.amp.html',
+    environments: ['single', 'viewer-demo'],
     initialRect: {width: pageWidth, height: pageHeight},
   },
   async (env) => {
@@ -35,8 +34,7 @@ describes.endtoend(
       controller = env.controller;
     });
 
-    //TODO(spaharmi): fails on all environments
-    it.skip('should render with the correct initial slide', async () => {
+    it('should render with the correct initial slide', async () => {
       const thirdSlide = await getSlide(controller, 2);
 
       // Normally, resizing would cause the position to change. We're testing
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-mixed-length-arrows.js b/extensions/amp-base-carousel/0.1/test-e2e/test-mixed-length-arrows.js
new file mode 100644
index 0000000000000..efa51fdad4150
--- /dev/null
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-mixed-length-arrows.js
@@ -0,0 +1,91 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {getNextArrow, getPrevArrow} from './helpers';
+
+describes.endtoend(
+  'amp-base-carousel - mixed length carousel arrows',
+  {
+    version: '0.1',
+    fixture: 'amp-base-carousel/no-arrows.amp.html',
+    environments: ['single'],
+  },
+  async function (env) {
+    let controller;
+    let prevArrow;
+    let nextArrow;
+
+    /**
+     * Attach an event listener to page to capture the 'slideChange' event.
+     * If given a selector, click on it to fire the event being listened for.
+     * @return {!Promise}
+     */
+    function slideChangeEventAfterClicking(opt_selector) {
+      return controller.evaluate((opt_selector) => {
+        return new Promise((resolve) => {
+          document.addEventListener(
+            'slideChange',
+            (e) => resolve(e.data),
+            {once: true} // Remove listener after first invocation
+          );
+          if (opt_selector) {
+            document.querySelector(opt_selector).click();
+          }
+        });
+      }, opt_selector);
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+
+      nextArrow = await getNextArrow(controller);
+      prevArrow = await getPrevArrow(controller);
+    });
+
+    it('should not have arrows when at start or end', async () => {
+      await expect(
+        controller.getElementCssValue(prevArrow, 'opacity')
+      ).to.equal('0');
+      await expect(
+        controller.getElementCssValue(nextArrow, 'opacity')
+      ).to.equal('1');
+
+      // click next
+      await slideChangeEventAfterClicking(
+        '.i-amphtml-base-carousel-arrow-next-slot :first-child'
+      );
+
+      await expect(
+        controller.getElementCssValue(prevArrow, 'opacity')
+      ).to.equal('1');
+      await expect(
+        controller.getElementCssValue(nextArrow, 'opacity')
+      ).to.equal('0');
+
+      // click back
+      await slideChangeEventAfterClicking(
+        '.i-amphtml-base-carousel-arrow-prev-slot :first-child'
+      );
+
+      await expect(
+        controller.getElementCssValue(prevArrow, 'opacity')
+      ).to.equal('0');
+      await expect(
+        controller.getElementCssValue(nextArrow, 'opacity')
+      ).to.equal('1');
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-mixed-lengths-no-snap.js b/extensions/amp-base-carousel/0.1/test-e2e/test-mixed-lengths-no-snap.js
index 9a187968ac9bc..064b0dc95e249 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/test-mixed-lengths-no-snap.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-mixed-lengths-no-snap.js
@@ -20,11 +20,10 @@ const pageWidth = 800;
 const pageHeight = 600;
 
 describes.endtoend(
-  'AMP carousel mixed length slides',
+  'amp-base-carousel - mixed length slides without snapping',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-base-carousel/' +
-      'mixed-lengths-no-snap.amp.html',
+    version: '0.1',
+    fixture: 'amp-base-carousel/mixed-lengths-no-snap.amp.html',
     experiments: ['amp-base-carousel', 'layers'],
     initialRect: {width: pageWidth, height: pageHeight},
     //TODO(spaharmi): fails on viewer and shadow demo
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-mixed-lengths.js b/extensions/amp-base-carousel/0.1/test-e2e/test-mixed-lengths.js
index eca4f5d89856e..eea4be7fa1c91 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/test-mixed-lengths.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-mixed-lengths.js
@@ -20,11 +20,10 @@ const pageWidth = 800;
 const pageHeight = 600;
 
 describes.endtoend(
-  'AMP carousel mixed length slides',
+  'amp-base-carousel - mixed length slides',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-base-carousel/' +
-      'mixed-lengths.amp.html',
+    version: '0.1',
+    fixture: 'amp-base-carousel/mixed-lengths.amp.html',
     experiments: ['amp-base-carousel', 'layers'],
     initialRect: {width: pageWidth, height: pageHeight},
   },
@@ -76,7 +75,7 @@ describes.endtoend(
         .run('should snap on the center point', async () => {
           const el = await getScrollingElement(controller);
           const slides = await getSlides(controller);
-          const scrollAmount = 1 + (slideOneWidth + slideTwoWidth) / 2;
+          const scrollAmount = 1 + slideOneWidth / 2;
 
           await controller.scrollBy(el, {left: scrollAmount});
           await expect(controller.getElementRect(slides[1])).to.include({
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-multi-visible-single-advance.js b/extensions/amp-base-carousel/0.1/test-e2e/test-multi-visible-single-advance.js
new file mode 100644
index 0000000000000..9f0c9fe6138b6
--- /dev/null
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-multi-visible-single-advance.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {getNextArrow, getPrevArrow, getSlides, sleep} from './helpers';
+
+describes.endtoend(
+  'amp-base-carousel - advancing with multiple visible slides',
+  {
+    version: '0.1',
+    fixture: 'amp-base-carousel/multi-visible-single-advance.amp.html',
+    environments: ['single'],
+  },
+  async function (env) {
+    let controller;
+    let prevArrow;
+    let nextArrow;
+
+    function rect(el) {
+      return controller.getElementRect(el);
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+      nextArrow = await getNextArrow(controller);
+      prevArrow = await getPrevArrow(controller);
+    });
+
+    it('should not go forward past end and it should be able to go back correctly', async () => {
+      const slideCount = 7;
+      const slidesInView = 3;
+      const slides = await getSlides(controller);
+
+      // Click `next` to get to the end
+      for (let i = 0; i < slideCount - slidesInView; i++) {
+        await controller.click(nextArrow);
+        // Need to sleep due to amp-base-carousel buffering clicks
+        await sleep(1000);
+      }
+
+      let slideRect = await rect(slides[slideCount - slidesInView]);
+      // Check that last 3 slides are in view
+      // Less than 5 for flakiness that comes from `controller.getElementRect()`
+      await expect(slideRect['x']).to.be.lessThan(5);
+
+      // Check that arrows are correctly enabled/disabled
+      await expect(controller.getElementProperty(nextArrow, 'disabled')).to.be
+        .true;
+      await expect(controller.getElementProperty(prevArrow, 'disabled')).to.be
+        .false;
+
+      // Click `prev` the correct number of times to take us back to first slide.
+      for (let i = 0; i < slideCount - slidesInView; i++) {
+        await controller.click(prevArrow);
+        await sleep(1000);
+      }
+
+      slideRect = await rect(slides[0]);
+      // Check that last 3 slides are in view
+      // Less than 5 for flakiness that comes from `controller.getElementRect()`
+      await expect(slideRect['x']).to.be.lessThan(5);
+
+      // Check that arrows are correctly enabled/disabled
+      await expect(controller.getElementProperty(nextArrow, 'disabled')).to.be
+        .false;
+      await expect(controller.getElementProperty(prevArrow, 'disabled')).to.be
+        .true;
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-non-looping.js b/extensions/amp-base-carousel/0.1/test-e2e/test-non-looping.js
index 5f8459f08f098..42edecd0fb9ad 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/test-non-looping.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-non-looping.js
@@ -20,11 +20,10 @@ const pageWidth = 800;
 const pageHeight = 600;
 
 describes.endtoend(
-  'Non-looping AMP carousel',
+  'amp-base-carousel - non-looping',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-base-carousel/' +
-      'non-looping.amp.html',
+    version: '0.1',
+    fixture: 'amp-base-carousel/non-looping.amp.html',
     experiments: ['amp-base-carousel', 'layers'],
     initialRect: {width: pageWidth, height: pageHeight},
   },
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-responsive.js b/extensions/amp-base-carousel/0.1/test-e2e/test-responsive.js
index 4f277f9075512..8c9037a388cef 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/test-responsive.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-responsive.js
@@ -20,11 +20,10 @@ const pageWidth = 1000;
 const pageHeight = 600;
 
 describes.endtoend(
-  'AMP Carousel responsive attributes',
+  'amp-base-carousel - responsive attributes',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-base-carousel/' +
-      'responsive.amp.html',
+    version: '0.1',
+    fixture: 'amp-base-carousel/responsive.amp.html',
     experiments: ['amp-base-carousel', 'layers'],
     initialRect: {width: pageWidth, height: pageHeight},
     //TODO(spaharmi): fails on shadow demo
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-rtl.js b/extensions/amp-base-carousel/0.1/test-e2e/test-rtl.js
index 854eef51e9b83..dd50e5afef639 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/test-rtl.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-rtl.js
@@ -21,10 +21,10 @@ const pageHeight = 600;
 const arrowMargin = 12;
 
 describes.endtoend(
-  'AMP carousel rtl',
+  'amp-base-carousel - rtl',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-base-carousel/basic-rtl.amp.html',
+    version: '0.1',
+    fixture: 'amp-base-carousel/basic-rtl.amp.html',
     experiments: ['amp-base-carousel', 'layers'],
     initialRect: {width: pageWidth, height: pageHeight},
     // TODO(sparhami) Make other environments work too
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-snap-property.js b/extensions/amp-base-carousel/0.1/test-e2e/test-snap-property.js
new file mode 100644
index 0000000000000..a966c81a06960
--- /dev/null
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-snap-property.js
@@ -0,0 +1,60 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {getSlides, getSpacers} from './helpers';
+
+describes.endtoend(
+  'amp-base-carousel - snap property',
+  {
+    version: '0.1',
+    fixture: 'amp-base-carousel/snap-property.amp.html',
+    environments: ['single'],
+  },
+  async function (env) {
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    it('should set snap property on spacers', async () => {
+      const spacers = await getSpacers(controller);
+      for (let i = 0; i < spacers.length; i++) {
+        const spacer = spacers[i];
+        const styles = await controller.getElementProperty(spacer, 'style');
+        await expect(styles).to.contain('scroll-snap-align');
+      }
+    });
+
+    it('should not set snap property on slides when carousel is looped', async () => {
+      const slides = await getSlides(controller, '[loop="true"]');
+      for (let i = 0; i < slides.length; i++) {
+        const slide = slides[i];
+        const styles = await controller.getElementProperty(slide, 'style');
+        await expect(styles).to.not.contain('scroll-snap-align');
+      }
+    });
+
+    it('should set snap property on slides when carousel is not looped', async () => {
+      const slides = await getSlides(controller, '[loop="false"]');
+      for (let i = 0; i < slides.length; i++) {
+        const slide = slides[i];
+        const styles = await controller.getElementProperty(slide, 'style');
+        await expect(styles).to.contain('scroll-snap-align');
+      }
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/0.1/test-e2e/test-vertical.js b/extensions/amp-base-carousel/0.1/test-e2e/test-vertical.js
index c4dd360ef81b0..7617a894a082b 100644
--- a/extensions/amp-base-carousel/0.1/test-e2e/test-vertical.js
+++ b/extensions/amp-base-carousel/0.1/test-e2e/test-vertical.js
@@ -20,11 +20,10 @@ const pageWidth = 800;
 const pageHeight = 600;
 
 describes.endtoend(
-  'Vertical AMP carousel',
+  'amp-base-carousel - vertical orientation',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-base-carousel/' +
-      'vertical.amp.html',
+    version: '0.1',
+    fixture: 'amp-base-carousel/vertical.amp.html',
     experiments: ['amp-base-carousel', 'layers'],
     initialRect: {width: pageWidth, height: pageHeight},
   },
diff --git a/extensions/amp-base-carousel/0.1/test/test-carousel.js b/extensions/amp-base-carousel/0.1/test/test-carousel.js
index cf2fa8ac99483..30d64914c87ed 100644
--- a/extensions/amp-base-carousel/0.1/test/test-carousel.js
+++ b/extensions/amp-base-carousel/0.1/test/test-carousel.js
@@ -18,8 +18,9 @@
  */
 
 import {Carousel} from '../carousel';
+import {dev} from '../../../../src/log';
 import {setInitialDisplay, setStyle, setStyles} from '../../../../src/style';
-import {toArray} from '../../../../src/types';
+import {toArray} from '../../../../src/core/types/array';
 
 describes.realWin('carousel implementation', {}, (env) => {
   let win;
@@ -68,15 +69,21 @@ describes.realWin('carousel implementation', {}, (env) => {
    *  forwards: boolean,
    * }} options
    */
-  async function createCarousel({slideCount, loop, forwards = true}) {
+  async function createCarousel({
+    forwards = true,
+    initialIndex,
+    loop,
+    slideCount,
+  }) {
     const carousel = new Carousel({
       win,
       element,
       scrollContainer,
       runMutate,
+      initialIndex,
     });
-    carousel.updateSlides(setSlides(slideCount));
     carousel.updateLoop(loop);
+    carousel.updateSlides(setSlides(slideCount));
     carousel.updateForwards(forwards);
     await runMutate(() => {});
 
@@ -234,4 +241,116 @@ describes.realWin('carousel implementation', {}, (env) => {
       expect(carousel.isAtStart()).to.be.false;
     });
   });
+
+  describe('resetScrollReferencePoint_', () => {
+    it(
+      'currentElementOffset_ & currentIndex_ should be set when it is a' +
+        ' programmatic scroll',
+      async () => {
+        const carousel = await createCarousel({
+          slideCount: 12,
+          loop: false,
+        });
+
+        // Fake the scroll that ends short of the correct index.
+        // This is handled by scroll event listener.
+        carousel.touching_ = false;
+        carousel.requestedIndex_ = 1;
+        carousel.currentIndex_ = 0;
+        carousel.restingIndex_ = 0;
+        carousel.currentElementOffset_ = -0.99382;
+
+        carousel.resetScrollReferencePoint_();
+
+        expect(carousel.currentElementOffset_).to.equal(0);
+        expect(carousel.currentIndex_).to.equal(1);
+        expect(carousel.requestedIndex_).to.be.null;
+      }
+    );
+  });
+
+  it('should warn if no slides', async () => {
+    const warnSpy = env.sandbox.spy(dev(), 'warn');
+    await createCarousel({slideCount: 0, loop: false});
+
+    expect(warnSpy).to.be.calledOnce;
+    expect(warnSpy.args[0][1]).to.match(/No slides were found./);
+
+    warnSpy.resetHistory();
+    await createCarousel({
+      slideCount: 12,
+      loop: false,
+    });
+    expect(warnSpy).to.not.be.called;
+  });
+
+  describe('initialIndex', () => {
+    it('should start at slide 1 with initialIndex set to 1', async () => {
+      const carousel = await createCarousel({
+        slideCount: 3,
+        initialIndex: 1,
+      });
+      expect(carousel.isAtStart()).to.be.false;
+    });
+
+    it('should start at slide 0 with negative initialIndex', async () => {
+      const carousel = await createCarousel({
+        slideCount: 3,
+        initialIndex: -1,
+      });
+      expect(carousel.isAtStart()).to.be.true;
+    });
+
+    it('should clamp to last index with initialIndex that is greater than last slide index', async () => {
+      const carousel = await createCarousel({
+        slideCount: 3,
+        initialIndex: 4,
+      });
+      expect(carousel.isAtEnd()).to.be.true;
+    });
+
+    it('should start at slide 0 with invalid initialIndex', async () => {
+      const carousel = await createCarousel({
+        slideCount: 3,
+        initialIndex: NaN,
+      });
+      expect(carousel.isAtStart()).to.be.true;
+    });
+
+    it('should start at slide 1 with initialIndex set to 1', async () => {
+      const carousel = await createCarousel({
+        slideCount: 3,
+        initialIndex: 1,
+        loop: true,
+      });
+      expect(carousel.getCurrentIndex()).to.equal(1);
+    });
+
+    it('should normalize slide with negative initialIndex when looping', async () => {
+      const carousel = await createCarousel({
+        slideCount: 3,
+        initialIndex: -1,
+        loop: true,
+      });
+      expect(carousel.getCurrentIndex()).to.equal(2);
+    });
+
+    it('should normalize slide with initialIndex that is greater than last slide index when looping', async () => {
+      const carousel = await createCarousel({
+        slideCount: 3,
+        initialIndex: 4,
+        loop: true,
+      });
+      expect(carousel.getCurrentIndex()).to.equal(1);
+    });
+
+    it('should start at slide 0 with invalid initialIndex when looping', async () => {
+      const carousel = await createCarousel({
+        slideCount: 3,
+        initialIndex: NaN,
+        loop: true,
+      });
+      expect(carousel.getCurrentIndex()).to.equal(0);
+    });
+  });
 });
diff --git a/extensions/amp-base-carousel/0.1/test/test-child-layout-manager.js b/extensions/amp-base-carousel/0.1/test/test-child-layout-manager.js
index b92b16497cc9d..0a872944eb4fb 100644
--- a/extensions/amp-base-carousel/0.1/test/test-child-layout-manager.js
+++ b/extensions/amp-base-carousel/0.1/test/test-child-layout-manager.js
@@ -95,7 +95,6 @@ describes.realWin('child layout manager', {}, (env) => {
       scheduleUnlayout: env.sandbox.spy(),
       schedulePause: env.sandbox.spy(),
       scheduleResume: env.sandbox.spy(),
-      updateInViewport: env.sandbox.spy(),
     };
     env.sandbox.stub(Services, 'ownersForDoc').returns(ownersMock);
   });
@@ -171,7 +170,7 @@ describes.realWin('child layout manager', {}, (env) => {
       await afterRenderPromise();
 
       expect(ownersMock.scheduleLayout)
-        .to.have.callCount(2)
+        .to.have.callCount(3)
         .to.have.been.calledWith(domElementMock, el.children[0])
         .to.have.been.calledWith(domElementMock, el.children[1]);
     });
@@ -192,7 +191,7 @@ describes.realWin('child layout manager', {}, (env) => {
       await afterRenderPromise();
 
       expect(ownersMock.scheduleLayout)
-        .to.have.callCount(2)
+        .to.have.callCount(3)
         .to.have.been.calledWith(domElementMock, el.children[0])
         .to.have.been.calledWith(domElementMock, el.children[1]);
     });
@@ -214,7 +213,7 @@ describes.realWin('child layout manager', {}, (env) => {
       await afterRenderPromise();
 
       expect(ownersMock.scheduleLayout)
-        .to.have.callCount(2)
+        .to.have.callCount(3)
         .to.have.been.calledWith(domElementMock, newChildren[0])
         .to.have.been.calledWith(domElementMock, newChildren[1]);
     });
@@ -229,14 +228,6 @@ describes.realWin('child layout manager', {}, (env) => {
       clm.updateChildren(el.children);
       clm.wasLaidOut();
       await afterRenderPromise();
-
-      expect(ownersMock.updateInViewport)
-        .to.have.callCount(5)
-        .to.have.been.calledWith(domElementMock, el.children[0], true)
-        .to.have.been.calledWith(domElementMock, el.children[1], false)
-        .to.have.been.calledWith(domElementMock, el.children[2], false)
-        .to.have.been.calledWith(domElementMock, el.children[3], false)
-        .to.have.been.calledWith(domElementMock, el.children[4], false);
     });
 
     it('should call the viewportIntersectionCallback', async () => {
@@ -276,7 +267,7 @@ describes.realWin('child layout manager', {}, (env) => {
       await afterScrollAndIntersectingPromise(el.children[1], el);
 
       expect(ownersMock.scheduleLayout)
-        .to.have.callCount(1)
+        .to.have.callCount(2)
         .to.have.been.calledWith(domElementMock, el.children[2]);
     });
 
@@ -326,27 +317,6 @@ describes.realWin('child layout manager', {}, (env) => {
         .to.have.been.calledWith(domElementMock, el.children[3])
         .to.have.been.calledWith(domElementMock, el.children[4]);
     });
-
-    it('should updateInViewport on scroll', async () => {
-      const el = createHorizontalScroller(5);
-      const clm = new ChildLayoutManager({
-        ampElement: ampElementMock,
-        intersectionElement: el,
-      });
-
-      clm.updateChildren(el.children);
-      clm.wasLaidOut();
-      await afterRenderPromise();
-
-      ownersMock.updateInViewport.resetHistory();
-      await afterScrollAndIntersectingPromise(el.children[1], el);
-      await afterRenderPromise();
-
-      expect(ownersMock.updateInViewport)
-        .to.have.callCount(2)
-        .to.have.been.calledWith(domElementMock, el.children[0], false)
-        .to.have.been.calledWith(domElementMock, el.children[1], true);
-    });
   });
 
   describe('queuing changes', () => {
@@ -387,7 +357,7 @@ describes.realWin('child layout manager', {}, (env) => {
       clm.flushChanges();
 
       expect(ownersMock.scheduleLayout)
-        .to.have.callCount(1)
+        .to.have.callCount(2)
         .to.have.been.calledWith(domElementMock, el.children[2]);
     });
 
@@ -420,33 +390,5 @@ describes.realWin('child layout manager', {}, (env) => {
         .to.have.callCount(1)
         .to.have.been.calledWith(domElementMock, el.children[0]);
     });
-
-    it('should queue updateInViewport on scroll', async () => {
-      const el = createHorizontalScroller(5);
-      const clm = new ChildLayoutManager({
-        ampElement: ampElementMock,
-        intersectionElement: el,
-      });
-
-      clm.setQueueChanges(true);
-      clm.updateChildren(el.children);
-      clm.wasLaidOut();
-      await afterRenderPromise();
-
-      clm.flushChanges();
-      ownersMock.updateInViewport.resetHistory();
-      await afterScrollAndIntersectingPromise(el.children[1], el);
-      await afterRenderPromise();
-
-      // Make sure changes are not applied yet.
-      expect(ownersMock.updateInViewport).to.have.not.been.called;
-      // Now flush the changes and check that they are applied.
-      clm.flushChanges();
-
-      expect(ownersMock.updateInViewport)
-        .to.have.callCount(2)
-        .to.have.been.calledWith(domElementMock, el.children[0], false)
-        .to.have.been.calledWith(domElementMock, el.children[1], true);
-    });
   });
 });
diff --git a/extensions/amp-base-carousel/0.1/test/test-responsive-attributes.js b/extensions/amp-base-carousel/0.1/test/test-responsive-attributes.js
index ddd3accdda12c..4e145924db5e2 100644
--- a/extensions/amp-base-carousel/0.1/test/test-responsive-attributes.js
+++ b/extensions/amp-base-carousel/0.1/test/test-responsive-attributes.js
@@ -16,11 +16,11 @@
 
 import {ResponsiveAttributes} from '../responsive-attributes';
 
-describe('ResponsiveAttributes', () => {
+describes.sandboxed('ResponsiveAttributes', {}, (env) => {
   let matchMediaStub;
 
   beforeEach(() => {
-    matchMediaStub = window.sandbox.stub(window, 'matchMedia');
+    matchMediaStub = env.sandbox.stub(window, 'matchMedia');
     matchMediaStub.returns({matches: false});
     matchMediaStub.withArgs('').returns({matches: true});
   });
@@ -29,7 +29,7 @@ describe('ResponsiveAttributes', () => {
     matchMediaStub.withArgs('(min-width: 600px)').returns({matches: true});
     matchMediaStub.withArgs('(min-width: 300px)').returns({matches: true});
 
-    const spy = window.sandbox.spy();
+    const spy = env.sandbox.spy();
     const ra = new ResponsiveAttributes({
       'one': spy,
     });
@@ -45,7 +45,7 @@ describe('ResponsiveAttributes', () => {
   it('should pass non-matching media queries', () => {
     matchMediaStub.withArgs('(min-width: 300px)').returns({matches: true});
 
-    const spy = window.sandbox.spy();
+    const spy = env.sandbox.spy();
     const ra = new ResponsiveAttributes({
       'one': spy,
     });
@@ -59,7 +59,7 @@ describe('ResponsiveAttributes', () => {
   });
 
   it('should fall back to the default value', () => {
-    const spy = window.sandbox.spy();
+    const spy = env.sandbox.spy();
     const ra = new ResponsiveAttributes({
       'one': spy,
     });
@@ -73,7 +73,7 @@ describe('ResponsiveAttributes', () => {
   });
 
   it('should handle empty groups', () => {
-    const spy = window.sandbox.spy();
+    const spy = env.sandbox.spy();
     const ra = new ResponsiveAttributes({
       'one': spy,
     });
@@ -86,7 +86,7 @@ describe('ResponsiveAttributes', () => {
   it('should update when the matching value changes', () => {
     matchMediaStub.withArgs('(min-width: 600px)').returns({matches: true});
 
-    const spy = window.sandbox.spy();
+    const spy = env.sandbox.spy();
     const ra = new ResponsiveAttributes({
       'one': spy,
     });
@@ -111,7 +111,7 @@ describe('ResponsiveAttributes', () => {
       },
     });
 
-    const spy = window.sandbox.spy();
+    const spy = env.sandbox.spy();
     const ra = new ResponsiveAttributes({
       'one': spy,
     });
@@ -130,7 +130,7 @@ describe('ResponsiveAttributes', () => {
   });
 
   it('should clear onchange when the attribute value changes', async () => {
-    const onchangeSpy = window.sandbox.spy();
+    const onchangeSpy = env.sandbox.spy();
 
     matchMediaStub.withArgs('(min-width: 600px)').returns({
       matches: false,
@@ -139,7 +139,7 @@ describe('ResponsiveAttributes', () => {
       },
     });
 
-    const spy = window.sandbox.spy();
+    const spy = env.sandbox.spy();
     const ra = new ResponsiveAttributes({
       'one': spy,
     });
@@ -157,7 +157,7 @@ describe('ResponsiveAttributes', () => {
   it('should handle number values', () => {
     matchMediaStub.withArgs('(min-width: 600px)').returns({matches: true});
 
-    const spy = window.sandbox.spy();
+    const spy = env.sandbox.spy();
     const ra = new ResponsiveAttributes({
       'one': spy,
     });
diff --git a/extensions/amp-base-carousel/0.1/test/validator-amp-base-carousel.out b/extensions/amp-base-carousel/0.1/test/validator-amp-base-carousel.out
index c7cd95b2cd268..8868e9b441f8b 100644
--- a/extensions/amp-base-carousel/0.1/test/validator-amp-base-carousel.out
+++ b/extensions/amp-base-carousel/0.1/test/validator-amp-base-carousel.out
@@ -46,22 +46,22 @@ FAIL
 |      <!-- Invalid: no default value-->
 |      <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true">
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:46:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) true'. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:46:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) true'. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |      <!-- Invalid: no value -->
 |      <amp-base-carousel width="4" height="3" auto-advance>
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:49:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:49:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |      <!-- Invalid: incorrect value -->
 |      <amp-base-carousel width="4" height="3" auto-advance="5">
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:52:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value '5'. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:52:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value '5'. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |      <!-- Invalid: incorrect in media query -->
 |      <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true, (max-height: 1000px) 5, false">
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:55:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) true, (max-height: 1000px) 5, false'. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:55:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) true, (max-height: 1000px) 5, false'. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |    </section>
 |
@@ -82,22 +82,22 @@ amp-base-carousel/0.1/test/validator-amp-base-carousel.html:55:4 The attribute '
 |      <!-- Invalid: no default value-->
 |      <amp-base-carousel width="4" height="3" advance-count="(min-width: 800px) 3">
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:74:4 The attribute 'advance-count' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) 3'. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:74:4 The attribute 'advance-count' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) 3'. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |      <!-- Invalid: no value -->
 |      <amp-base-carousel width="4" height="3" advance-count>
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:77:4 The attribute 'advance-count' in tag 'amp-base-carousel' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:77:4 The attribute 'advance-count' in tag 'amp-base-carousel' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |      <!-- Invalid: floating point value -->
 |      <amp-base-carousel width="4" height="3" advance-count="3.2">
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:80:4 The attribute 'advance-count' in tag 'amp-base-carousel' is set to the invalid value '3.2'. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:80:4 The attribute 'advance-count' in tag 'amp-base-carousel' is set to the invalid value '3.2'. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |      <!-- Invalid: floating point value in media query -->
 |      <amp-base-carousel width="4" height="3" advance-count="(min-width: 800px) -3, (max-height: 1000px) 3.2, 1">
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:83:4 The attribute 'advance-count' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) -3, (max-height: 1000px) 3.2, 1'. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:83:4 The attribute 'advance-count' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) -3, (max-height: 1000px) 3.2, 1'. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |    </section>
 |
@@ -118,27 +118,27 @@ amp-base-carousel/0.1/test/validator-amp-base-carousel.html:83:4 The attribute '
 |      <!-- Invalid: negative integer value -->
 |      <amp-base-carousel width="4" height="3" visible-count="-2">
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:102:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value '-2'. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:102:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value '-2'. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |      <!-- Invalid: no default value-->
 |      <amp-base-carousel width="4" height="3" visible-count="(min-width: 800px) 3">
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:105:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) 3'. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:105:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) 3'. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |      <!-- Invalid: no value -->
 |      <amp-base-carousel width="4" height="3" visible-count>
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:108:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:108:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |      <!-- Invalid: string value -->
 |      <amp-base-carousel width="4" height="3" visible-count="foo">
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:111:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value 'foo'. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:111:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value 'foo'. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |      <!-- Invalid: negative value in media query -->
 |      <amp-base-carousel width="4" height="3" visible-count="(min-width: 800px) -3, (max-height: 1000px) 3, 1">
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:114:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) -3, (max-height: 1000px) 3, 1'. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:114:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) -3, (max-height: 1000px) 3, 1'. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |    </section>
 |
@@ -153,7 +153,7 @@ amp-base-carousel/0.1/test/validator-amp-base-carousel.html:114:4 The attribute
 |      <!-- Invalid: no space between media query and value -->
 |      <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px)true, false">
 >>     ^~~~~~~~~
-amp-base-carousel/0.1/test/validator-amp-base-carousel.html:127:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px)true, false'. (see https://amp.dev/documentation/components/amp-base-carousel)
+amp-base-carousel/0.1/test/validator-amp-base-carousel.html:127:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px)true, false'. (see https://amp.dev/documentation/components/amp-base-carousel/)
 |      </amp-base-carousel>
 |    </section>
 |  </body>
diff --git a/extensions/amp-base-carousel/1.0/amp-base-carousel.css b/extensions/amp-base-carousel/1.0/amp-base-carousel.css
new file mode 100644
index 0000000000000..1c3d031edd063
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/amp-base-carousel.css
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/*
+ * Pre-upgrade:
+ * - display:block element
+ * - size-defined element
+ */
+amp-base-carousel {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Pre-upgrade: size-defining element - hide children. */
+amp-base-carousel:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc) {
+  display: none;
+  content-visibility: hidden;
+}
diff --git a/extensions/amp-base-carousel/1.0/amp-base-carousel.js b/extensions/amp-base-carousel/1.0/amp-base-carousel.js
new file mode 100644
index 0000000000000..74a4b9d070272
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/amp-base-carousel.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {BaseElement} from './base-element';
+import {CSS} from '../../../build/amp-base-carousel-1.0.css';
+import {Services} from '../../../src/services';
+import {createCustomEvent} from '../../../src/event-helper';
+import {isExperimentOn} from '../../../src/experiments';
+import {toWin} from '../../../src/types';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-base-carousel';
+
+/** @extends {PreactBaseElement<BaseCarouselDef.CarouselApi>} */
+class AmpBaseCarousel extends BaseElement {
+  /** @override */
+  init() {
+    this.registerApiAction('prev', (api) => api.prev(), ActionTrust.LOW);
+    this.registerApiAction('next', (api) => api.next(), ActionTrust.LOW);
+    this.registerApiAction(
+      'goToSlide',
+      (api, invocation) => {
+        const {args} = invocation;
+        api.goToSlide(args['index'] || -1);
+      },
+      ActionTrust.LOW
+    );
+
+    return super.init();
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-carousel'),
+      'expected global "bento" or specific "bento-carousel" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+
+  /** @override */
+  triggerEvent(element, eventName, detail) {
+    const event = createCustomEvent(
+      toWin(element.ownerDocument.defaultView),
+      `amp-base-carousel.${eventName}`,
+      detail
+    );
+    Services.actionServiceForDoc(element).trigger(
+      element,
+      eventName,
+      event,
+      ActionTrust.HIGH
+    );
+    super.triggerEvent(element, eventName, detail);
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpBaseCarousel, CSS);
+});
diff --git a/extensions/amp-base-carousel/1.0/arrow.js b/extensions/amp-base-carousel/1.0/arrow.js
new file mode 100644
index 0000000000000..8ddb14e0e7ab6
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/arrow.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {useStyles} from './component.jss';
+import objstr from 'obj-str';
+
+/**
+ * @param {!BaseCarouselDef.ArrowProps} props
+ * @return {PreactDef.Renderable}
+ */
+export function Arrow({
+  advance,
+  as: Comp = DefaultArrow,
+  by,
+  disabled,
+  outsetArrows,
+  rtl,
+  ...rest
+}) {
+  const classes = useStyles();
+  const onClick = () => {
+    if (!disabled) {
+      advance();
+    }
+  };
+  return (
+    <Comp
+      aria-disabled={String(!!disabled)}
+      by={by}
+      className={objstr({
+        [classes.arrow]: true,
+        [classes.arrowDisabled]: disabled,
+        [classes.arrowPrev]: by < 0,
+        [classes.arrowNext]: by > 0,
+        [classes.outsetArrow]: outsetArrows,
+        [classes.insetArrow]: !outsetArrows,
+        [classes.rtl]: rtl,
+        [classes.ltr]: !rtl,
+      })}
+      disabled={disabled}
+      onClick={onClick}
+      outsetArrows={outsetArrows}
+      rtl={rtl}
+      {...rest}
+    />
+  );
+}
+
+/**
+ * @param {!BaseCarouselDef.ArrowProps} props
+ * @return {PreactDef.Renderable}
+ */
+function DefaultArrow({by, className, ...rest}) {
+  const classes = useStyles();
+  return (
+    <div className={className}>
+      <button
+        aria-label={
+          by < 0 ? 'Previous item in carousel' : 'Next item in carousel'
+        }
+        className={classes.defaultArrowButton}
+        {...rest}
+      >
+        <div
+          className={`${classes.arrowBaseStyle} ${classes.arrowFrosting}`}
+        ></div>
+        <div
+          className={`${classes.arrowBaseStyle} ${classes.arrowBackdrop}`}
+        ></div>
+        <div
+          className={`${classes.arrowBaseStyle} ${classes.arrowBackground}`}
+        ></div>
+        <svg className={classes.arrowIcon} viewBox="0 0 24 24">
+          <path
+            d={
+              by < 0 ? 'M14,7.4 L9.4,12 L14,16.6' : 'M10,7.4 L14.6,12 L10,16.6'
+            }
+            fill="none"
+            stroke-width="2px"
+            stroke-linejoin="round"
+            stroke-linecap="round"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}
diff --git a/extensions/amp-base-carousel/1.0/base-element.js b/extensions/amp-base-carousel/1.0/base-element.js
new file mode 100644
index 0000000000000..a67646d011249
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/base-element.js
@@ -0,0 +1,114 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {BaseCarousel} from './component';
+import {CSS as COMPONENT_CSS} from './component.jss';
+import {CarouselContextProp} from './carousel-props';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {dict} from '../../../src/core/types/object';
+
+export class BaseElement extends PreactBaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {?number} */
+    this.slide_ = null;
+  }
+
+  /** @override */
+  init() {
+    const {element} = this;
+    this.slide_ = parseInt(element.getAttribute('slide'), 10);
+    return dict({
+      'defaultSlide': this.slide_ || 0,
+      'onSlideChange': (index) => {
+        this.triggerEvent(element, 'slideChange', dict({'index': index}));
+      },
+    });
+  }
+
+  /** @override */
+  mutationObserverCallback() {
+    const slide = parseInt(this.element.getAttribute('slide'), 10);
+    if (slide === this.slide_) {
+      return;
+    }
+    this.slide_ = slide;
+    if (!isNaN(slide)) {
+      this.api().goToSlide(slide);
+    }
+  }
+}
+
+/** @override */
+BaseElement['Component'] = BaseCarousel;
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['props'] = {
+  'advanceCount': {attr: 'advance-count', type: 'number', media: true},
+  'arrowPrevAs': {
+    selector: '[slot="prev-arrow"]',
+    single: true,
+    as: true,
+  },
+  'arrowNextAs': {
+    selector: '[slot="next-arrow"]',
+    single: true,
+    as: true,
+  },
+  'autoAdvance': {attr: 'auto-advance', type: 'boolean', media: true},
+  'autoAdvanceCount': {attr: 'auto-advance-count', type: 'number', media: true},
+  'autoAdvanceInterval': {
+    attr: 'auto-advance-interval',
+    type: 'number',
+    media: true,
+  },
+  'autoAdvanceLoops': {attr: 'auto-advance-loops', type: 'number', media: true},
+  'controls': {attr: 'controls', type: 'string', media: true},
+  'orientation': {
+    attr: 'orientation',
+    type: 'string',
+    media: true,
+    default: 'horizontal',
+  },
+  'loop': {attr: 'loop', type: 'boolean', media: true},
+  'mixedLength': {attr: 'mixed-length', type: 'boolean', media: true},
+  'outsetArrows': {attr: 'outset-arrows', type: 'boolean', media: true},
+  'snap': {attr: 'snap', type: 'boolean', media: true, default: true},
+  'snapBy': {attr: 'snap-by', type: 'number', media: true},
+  'snapAlign': {attr: 'snap-align', type: 'string', media: true},
+  'visibleCount': {attr: 'visible-count', type: 'number', media: true},
+  'children': {
+    props: {
+      'thumbnailSrc': {attr: 'data-thumbnail-src'},
+    },
+    selector: '*', // This should be last as catch-all.
+    single: false,
+  },
+};
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
+
+/** @override */
+BaseElement['shadowCss'] = COMPONENT_CSS;
+
+/** @override */
+BaseElement['useContexts'] = [CarouselContextProp];
diff --git a/extensions/amp-base-carousel/1.0/carousel-context.js b/extensions/amp-base-carousel/1.0/carousel-context.js
new file mode 100644
index 0000000000000..05659f168ef86
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/carousel-context.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright 2020 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.
+ */
+import {createContext} from '../../../src/preact';
+
+const CarouselContext = createContext(
+  /** @type {BaseCarouselDef.ContextProps} */ ({
+    slides: [],
+    setSlides: (unusedSlides) => {},
+  })
+);
+export {CarouselContext};
diff --git a/extensions/amp-base-carousel/1.0/carousel-props.js b/extensions/amp-base-carousel/1.0/carousel-props.js
new file mode 100644
index 0000000000000..118977d386f40
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/carousel-props.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {CarouselContext} from './carousel-context';
+import {contextProp} from '../../../src/context';
+
+const CarouselContextProp = contextProp('base-carousel:1.0:context', {
+  type: CarouselContext,
+  recursive: true,
+  defaultValue: null,
+});
+
+export {CarouselContextProp};
diff --git a/extensions/amp-base-carousel/1.0/component.js b/extensions/amp-base-carousel/1.0/component.js
new file mode 100644
index 0000000000000..f7c90760ccfc8
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/component.js
@@ -0,0 +1,402 @@
+/**
+ * Copyright 2020 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.
+ */
+import * as Preact from '../../../src/preact';
+import {
+  Alignment,
+  Axis,
+  Orientation,
+  getDimension,
+  getOffsetPosition,
+  getScrollEnd,
+} from './dimensions';
+import {Arrow} from './arrow';
+import {CarouselContext} from './carousel-context';
+import {ContainWrapper} from '../../../src/preact/component';
+import {Scroller} from './scroller';
+import {WithAmpContext} from '../../../src/preact/context';
+import {WithLightbox} from '../../amp-lightbox-gallery/1.0/component';
+import {forwardRef, toChildArray} from '../../../src/preact/compat';
+import {isRTL} from '../../../src/dom';
+import {mod} from '../../../src/core/math';
+import {toWin} from '../../../src/types';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from '../../../src/preact';
+import {useStyles} from './component.jss';
+
+/**
+ * @enum {string}
+ */
+const Controls = {
+  ALWAYS: 'always',
+  NEVER: 'never',
+  AUTO: 'auto',
+};
+
+/**
+ * @enum {string}
+ */
+const Interaction = {
+  GENERIC: 0,
+  FOCUS: 1,
+  MOUSE: 2,
+  TOUCH: 3,
+  NONE: 4,
+};
+
+/**
+ * @enum {string}
+ */
+const Direction = {
+  LTR: 'ltr',
+  RTL: 'rtl',
+  AUTO: 'auto',
+};
+
+const MIN_AUTO_ADVANCE_INTERVAL = 1000;
+
+/**
+ * @param {!BaseCarouselDef.Props} props
+ * @param {{current: ?BaseCarouselDef.CarouselApi}} ref
+ * @return {PreactDef.Renderable}
+ */
+function BaseCarouselWithRef(
+  {
+    advanceCount = 1,
+    arrowPrevAs,
+    arrowNextAs,
+    autoAdvance: shouldAutoAdvance = false,
+    autoAdvanceCount = 1,
+    autoAdvanceInterval: customAutoAdvanceInterval = MIN_AUTO_ADVANCE_INTERVAL,
+    autoAdvanceLoops = Number.POSITIVE_INFINITY,
+    children,
+    controls = Controls.AUTO,
+    defaultSlide = 0,
+    dir = Direction.AUTO,
+    lightbox = false,
+    loop,
+    mixedLength = false,
+    onFocus,
+    onMouseEnter,
+    onSlideChange,
+    onTouchStart,
+    orientation = Orientation.HORIZONTAL,
+    outsetArrows = false,
+    snap = true,
+    snapAlign = Alignment.START,
+    snapBy = 1,
+    visibleCount = 1,
+    _thumbnails = false,
+    ...rest
+  },
+  ref
+) {
+  const classes = useStyles();
+  const childrenArray = useMemo(() => toChildArray(children), [children]);
+  const {length} = childrenArray;
+  const carouselContext = useContext(CarouselContext);
+  const [currentSlideState, setCurrentSlideState] = useState(
+    Math.min(Math.max(defaultSlide, 0), length)
+  );
+  const globalCurrentSlide = carouselContext.currentSlide ?? currentSlideState;
+  const setGlobalCurrentSlide =
+    carouselContext.setCurrentSlide ?? setCurrentSlideState;
+  const currentSlide = _thumbnails ? currentSlideState : globalCurrentSlide;
+  const setCurrentSlide = _thumbnails
+    ? setCurrentSlideState
+    : setGlobalCurrentSlide;
+  const currentSlideRef = useRef(currentSlide);
+  const axis = orientation == Orientation.HORIZONTAL ? Axis.X : Axis.Y;
+
+  useLayoutEffect(() => {
+    // noop if !_thumbnails || !carouselContext.
+    setCurrentSlide(globalCurrentSlide);
+  }, [globalCurrentSlide, setCurrentSlide]);
+
+  const {setSlides, slides} = carouselContext;
+
+  const scrollRef = useRef(null);
+  const containRef = useRef(null);
+  const contentRef = useRef(null);
+
+  const autoAdvanceTimesRef = useRef(0);
+  const autoAdvanceInterval = useMemo(
+    () => Math.max(customAutoAdvanceInterval, MIN_AUTO_ADVANCE_INTERVAL),
+    [customAutoAdvanceInterval]
+  );
+
+  const autoAdvance = useCallback(() => {
+    if (
+      autoAdvanceTimesRef.current + visibleCount / length >= autoAdvanceLoops ||
+      interaction.current !== Interaction.NONE
+    ) {
+      return false;
+    }
+    if (loop || currentSlideRef.current + visibleCount < length) {
+      scrollRef.current.advance(autoAdvanceCount); // Advance forward by specified count
+      // Count autoadvance loops as proportions of the carousel we have advanced through.
+      autoAdvanceTimesRef.current += autoAdvanceCount / length;
+    } else {
+      scrollRef.current.advance(-currentSlideRef.current); // Advance in reverse to first slide
+      autoAdvanceTimesRef.current = Math.ceil(autoAdvanceTimesRef.current);
+    }
+    return true;
+  }, [autoAdvanceCount, autoAdvanceLoops, length, loop, visibleCount]);
+  const next = useCallback(() => scrollRef.current.next(), []);
+  const prev = useCallback(() => scrollRef.current.prev(), []);
+
+  useEffect(() => {
+    if (!shouldAutoAdvance || !containRef.current) {
+      return;
+    }
+    const win = toWin(containRef.current.ownerDocument.defaultView);
+    const interval = win.setInterval(() => {
+      const autoAdvanced = autoAdvance();
+      if (!autoAdvanced) {
+        win.clearInterval(interval);
+      }
+    }, autoAdvanceInterval);
+    return () => win.clearInterval(interval);
+  }, [autoAdvance, autoAdvanceInterval, shouldAutoAdvance]);
+
+  const setRestingIndex = useCallback(
+    (index) => {
+      if (length <= 0 || isNaN(index)) {
+        return;
+      }
+      index = Math.min(Math.max(index, 0), length - 1);
+      setCurrentSlide(index);
+      if (currentSlideRef.current !== index) {
+        currentSlideRef.current = index;
+        if (onSlideChange) {
+          onSlideChange(index);
+        }
+      }
+    },
+    [length, setCurrentSlide, onSlideChange]
+  );
+
+  useImperativeHandle(
+    ref,
+    () =>
+      /** @type {!BaseCarouselDef.CarouselApi} */ ({
+        goToSlide: (index) => {
+          interaction.current = Interaction.GENERIC;
+          setRestingIndex(index);
+        },
+        next: () => {
+          interaction.current = Interaction.GENERIC;
+          next();
+        },
+        prev: () => {
+          interaction.current = Interaction.GENERIC;
+          prev();
+        },
+        get root() {
+          return containRef.current;
+        },
+        get node() {
+          return contentRef.current;
+        },
+      }),
+    [next, prev, setRestingIndex]
+  );
+
+  useEffect(() => {
+    // For now, do not update slides if they are the same length as before.
+    // Otherwise this causes an infinite loop when updating the AMP Context.
+    if (!_thumbnails && slides && slides.length !== childrenArray.length) {
+      setSlides(childrenArray);
+    }
+  }, [_thumbnails, childrenArray, setSlides, slides]);
+
+  const disableForDir = (dir) => {
+    if (loop) {
+      // Arrows always available when looping.
+      return false;
+    }
+    if (currentSlide + dir < 0) {
+      // Can no longer advance backwards.
+      return true;
+    }
+    if (currentSlide + visibleCount + dir > length) {
+      // Can no longer advance forwards.
+      return true;
+    }
+    if (mixedLength && dir > 0) {
+      // Measure container to see if we have reached the end.
+      if (!scrollRef.current) {
+        return false;
+      }
+      const container = scrollRef.current.node;
+      if (!container || !container.children.length) {
+        return false;
+      }
+      const scrollEnd = getScrollEnd(axis, container);
+      const scrollStart = getOffsetPosition(
+        axis,
+        container.children[currentSlide]
+      );
+      const {length} = getDimension(axis, container);
+      if (length !== scrollEnd && length + scrollStart >= scrollEnd) {
+        // Can no longer scroll forwards.
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const interaction = useRef(Interaction.NONE);
+  const hideControls = useMemo(() => {
+    if (controls === Controls.ALWAYS || outsetArrows) {
+      return false;
+    }
+    if (controls === Controls.NEVER) {
+      return true;
+    }
+    return interaction.current === Interaction.TOUCH;
+  }, [controls, outsetArrows]);
+
+  const [rtl, setRtl] = useState(dir === Direction.RTL);
+  useLayoutEffect(() => {
+    if (!containRef.current || dir !== Direction.AUTO) {
+      return;
+    }
+    const doc = containRef.current.ownerDocument;
+    if (!doc) {
+      return;
+    }
+    setRtl(isRTL(doc));
+  }, [dir, setRtl]);
+
+  return (
+    <ContainWrapper
+      size={true}
+      layout={true}
+      paint={true}
+      contentStyle={{
+        display: 'flex',
+        direction: rtl ? Direction.RTL : Direction.LTR,
+      }}
+      ref={containRef}
+      onFocus={(e) => {
+        if (onFocus) {
+          onFocus(e);
+        }
+        interaction.current = Interaction.FOCUS;
+      }}
+      onMouseEnter={(e) => {
+        if (onMouseEnter) {
+          onMouseEnter(e);
+        }
+        interaction.current = Interaction.MOUSE;
+      }}
+      onTouchStart={(e) => {
+        if (onTouchStart) {
+          onTouchStart(e);
+        }
+        interaction.current = Interaction.TOUCH;
+      }}
+      tabIndex="0"
+      wrapperClassName={classes.carousel}
+      contentAs={lightbox ? WithLightbox : 'div'}
+      contentRef={contentRef}
+      contentProps={{
+        enableActivation: false,
+        render: () => children,
+      }}
+      {...rest}
+    >
+      {!hideControls && (
+        <Arrow
+          advance={prev}
+          as={arrowPrevAs}
+          by={-advanceCount}
+          disabled={disableForDir(-1)}
+          outsetArrows={outsetArrows}
+          rtl={rtl}
+        />
+      )}
+      <Scroller
+        advanceCount={advanceCount}
+        alignment={snapAlign}
+        axis={axis}
+        lightbox={lightbox}
+        loop={loop}
+        mixedLength={mixedLength}
+        restingIndex={currentSlide}
+        setRestingIndex={setRestingIndex}
+        snap={snap}
+        snapBy={snapBy}
+        ref={scrollRef}
+        visibleCount={mixedLength ? 1 : visibleCount}
+        _thumbnails={_thumbnails}
+      >
+        {/*
+          TODO(#30283): TBD: this is an interesting concept. We could decide
+          to render only N slides at a time and for others just output an empty
+          placeholder. When a slide's slot is unrendered, the slide
+          automatically gets unslotted and gets CanRender=false w/o any extra
+          state management code.
+
+          Note: We naively display all slides for mixedLength as multiple
+          can be visible within the carousel viewport - eventually these can also
+          be optimized to only display the minimum necessary for the current
+          and next viewport.
+        */}
+        {childrenArray.map((child, index) =>
+          Math.min(
+            // Distance from currentSlide.
+            Math.abs(index - currentSlide),
+            // Account for wraparound when looping.
+            loop ? mod(length + currentSlide - index, length) : length
+          ) < Math.ceil(visibleCount * 3) || mixedLength ? (
+            <WithAmpContext
+              key={index}
+              renderable={index == currentSlide}
+              playable={index == currentSlide}
+            >
+              {child}
+            </WithAmpContext>
+          ) : (
+            <></>
+          )
+        )}
+      </Scroller>
+      {!hideControls && (
+        <Arrow
+          advance={next}
+          by={advanceCount}
+          as={arrowNextAs}
+          disabled={disableForDir(1)}
+          outsetArrows={outsetArrows}
+          rtl={rtl}
+        />
+      )}
+    </ContainWrapper>
+  );
+}
+
+const BaseCarousel = forwardRef(BaseCarouselWithRef);
+BaseCarousel.displayName = 'BaseCarousel'; // Make findable for tests.
+export {BaseCarousel};
diff --git a/extensions/amp-base-carousel/1.0/component.jss.js b/extensions/amp-base-carousel/1.0/component.jss.js
new file mode 100644
index 0000000000000..84ad5d51b8cf4
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/component.jss.js
@@ -0,0 +1,296 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+const carousel = {
+  overscrollBehavior: 'contain',
+};
+
+const scrollContainer = {
+  position: 'relative',
+  boxSizing: 'content-box !important',
+  width: '100%',
+  height: '100%',
+  outline: 'none',
+
+  display: 'flex',
+  flexWrap: 'nowrap',
+  flexGrow: 1,
+
+  scrollBehavior: 'smooth',
+  WebkitOverflowScrolling: 'touch',
+};
+
+const horizontalScroll = {
+  flexDirection: 'row',
+  scrollSnapTypeX: 'mandatory', // Firefox/IE
+  scrollSnapType: 'x mandatory',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  touchAction: 'pan-x pinch-zoom',
+  // Hide scrollbar.
+  '&$hideScrollbar': {
+    paddingBottom: '20px',
+  },
+};
+
+const verticalScroll = {
+  flexDirection: 'column',
+  scrollSnapTypeY: 'mandatory', // Firefox/IE
+  scrollSnapType: 'y mandatory',
+  overflowX: 'hidden',
+  touchAction: 'pan-y pinch-zoom',
+};
+
+/*
+ * Styles to hide scrollbars, with three different methods:
+ *
+ * 1. scrollbar-width
+ *  - Note: this is actually scrollbar *thickness* and applies to horizontal
+ *    scrollbars as well
+ * 2. ::-webkit-scrollbar
+ * 3. Using padding to push scrollbar outside of the overflow
+ *
+ * The last method has side-effect of having the bottom of the slides being
+ * cut-off, since the height (or width) of the scrollbar is included when
+ * calculating the 100% height (or width) of the slide.
+ */
+const hideScrollbar = {
+  // Firefox.
+  scrollbarWidth: 'none',
+
+  boxSizing: '',
+
+  // Chrome, Safari
+  '&::-webkit-scrollbar': {
+    display: 'none',
+    boxSizing: 'content-box !important',
+  },
+};
+
+const slideElement = {
+  position: 'relative',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+const startAlign = {};
+
+const centerAlign = {};
+
+const enableSnap = {
+  scrollSnapStop: 'always',
+  '&$startAlign': {
+    scrollSnapAlign: 'start',
+  },
+  '&$centerAlign': {
+    scrollSnapAlign: 'center',
+  },
+};
+
+const disableSnap = {
+  scrollSnapStop: 'none',
+  scrollSnapAlign: 'none',
+  scrollSnapCoordinate: 'none',
+};
+
+/** Slides only have one child */
+const slideSizing = {
+  '& > :first-child, & > ::slotted(*)': {
+    boxSizing: 'border-box !important',
+    margin: '0 !important',
+    flexShrink: '0 !important',
+    maxHeight: '100%',
+    maxWidth: '100%',
+  },
+  '& > ::slotted(*)': {
+    width: '100%',
+  },
+  '&$thumbnails': {
+    padding: '0px 4px',
+  },
+};
+
+const thumbnails = {};
+
+const arrow = {
+  zIndex: 1,
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  // Center the button vertically.
+  top: '50%',
+  alignItems: 'center',
+  pointerEvents: 'auto',
+  '&$ltr': {
+    transform: 'translateY(-50%)',
+  },
+  '&$rtl': {
+    transform: 'scaleX(-1) translateY(-50%)',
+  },
+  '&$arrowPrev$ltr, &$arrowNext$rtl': {
+    left: 0,
+  },
+  '&$arrowNext$ltr, &$arrowPrev$rtl': {
+    right: 0,
+  },
+};
+
+const rtl = {};
+
+const ltr = {};
+
+const arrowPrev = {};
+
+const arrowNext = {};
+
+const arrowDisabled = {
+  pointerEvents: 'none',
+  '&$insetArrow': {
+    opacity: 0,
+  },
+  '&$outsetArrow': {
+    opacity: 0.5,
+  },
+};
+
+const insetArrow = {
+  position: 'absolute',
+  padding: '12px',
+};
+
+const outsetArrow = {
+  position: 'relative',
+  flexShrink: 0,
+  height: '100%',
+  borderRadius: '50%',
+  backgroundSize: '24px 24px',
+  // Center the button vertically.
+  top: '50%',
+  transform: 'translateY(-50%)',
+  alignItems: 'center',
+  pointerEvents: 'auto',
+  '&$arrowPrev': {
+    marginInlineStart: '4px',
+    marginInlineEnd: '10px',
+  },
+  '&$arrowNext': {
+    marginInlineStart: '10px',
+    marginInlineEnd: '4px',
+  },
+};
+
+const defaultArrowButton = {
+  position: 'relative',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '36px',
+  height: '36px',
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 'none',
+  outline: 'none',
+  stroke: 'currentColor',
+  transition: '200ms stroke',
+  color: '#FFF',
+  '&:hover:not([disabled])': {
+    color: '#222',
+  },
+  '&:active:not([disabled])': {
+    transitionDuration: '0ms',
+  },
+  '&:hover:not([disabled]) $arrowBackground': {
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+  },
+  '&:active:not([disabled]) $arrowBackground': {
+    backgroundColor: 'rgba(255, 255, 255, 1.0)',
+    transitionDuration: '0ms',
+  },
+  '&:focus': {
+    border: '1px black solid',
+    borderRadius: '50%',
+    boxShadow: '0 0 0 1pt white',
+  },
+};
+
+const arrowBaseStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  borderRadius: '50%',
+};
+
+const arrowFrosting = {
+  backdropFilter: 'blur(3px)',
+};
+
+const arrowBackdrop = {
+  backdropFilter: 'blur(12px) invert(1) grayscale(0.6) brightness(0.8)',
+  opacity: 0.5,
+};
+
+const arrowBackground = {
+  boxShadow: `0 0 0px 1px rgba(0, 0, 0, 0.08) inset,
+      0 1px 4px 1px rgba(0, 0, 0, 0.2)`,
+  transition: '200ms background-color',
+  backgroundColor: 'rgba(0, 0, 0, 0.3)',
+};
+
+const arrowIcon = {
+  position: 'relative',
+  width: '24px',
+  height: '24px',
+};
+
+const JSS = {
+  carousel,
+  scrollContainer,
+  hideScrollbar,
+  horizontalScroll,
+  verticalScroll,
+  slideElement,
+  thumbnails,
+  startAlign,
+  centerAlign,
+  enableSnap,
+  disableSnap,
+  slideSizing,
+  arrow,
+  ltr,
+  rtl,
+  arrowPrev,
+  arrowNext,
+  arrowDisabled,
+  insetArrow,
+  outsetArrow,
+  defaultArrowButton,
+  arrowBaseStyle,
+  arrowFrosting,
+  arrowBackdrop,
+  arrowBackground,
+  arrowIcon,
+};
+
+// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
+// eslint-disable-next-line local/no-export-side-effect
+export const useStyles = createUseStyles(JSS);
diff --git a/extensions/amp-base-carousel/1.0/component.type.js b/extensions/amp-base-carousel/1.0/component.type.js
new file mode 100644
index 0000000000000..c7368a705381e
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/component.type.js
@@ -0,0 +1,114 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/** @const */
+var BaseCarouselDef = {};
+
+/**
+ * @typedef {{
+ *   advanceCount: (number|undefined),
+ *   arrowNext: (?PreactDef.VNode|undefined),
+ *   arrowPrev: (?PreactDef.VNode|undefined),
+ *   autoAdvance: (boolean|undefined),
+ *   autoAdvanceCount: (number|undefined),
+ *   autoAdvanceInterval: (number|undefined),
+ *   autoAdvanceLoops: (number|undefined),
+ *   children: (!PreactDef.Renderable),
+ *   controls: (string|undefined),
+ *   defaultSlide: (number|undefined),
+ *   loop: (boolean|undefined),
+ *   mixedLength: (boolean|undefined),
+ *   onSlideChange: (function(number):undefined|undefined),
+ *   orientation: (string|undefined),
+ *   snap: (boolean|undefined),
+ *   snapAlign: (string|undefined),
+ *   snapBy: (number|undefined),
+ *   visibleCount: (number|undefined),
+ * }}
+ */
+BaseCarouselDef.Props;
+
+/**
+ * @typedef {{
+ *   advanceCount: (number|undefined),
+ *   axis: number,
+ *   children: !Array<PreactDef.Renderable>,
+ *   loop: (boolean|undefined),
+ *   mixedLength: (boolean|undefined),
+ *   restingIndex: number,
+ *   setRestingIndex: (function(number):undefined),
+ *   snap: (boolean|undefined),
+ *   snapAlign: (string|undefined),
+ *   snapBy: (number|undefined),
+ *   visibleCount: (number|undefined),
+ * }}
+ */
+BaseCarouselDef.ScrollerProps;
+
+/**
+ * @typedef {{
+ *   alt: (string|undefined),
+ *   children: !Array<PreactDef.Renderable>,
+ *   loop: (boolean|undefined),
+ *   mixedLength: (boolean|undefined),
+ *   offsetRef: {current: (null|number)},
+ *   pivotIndex: number,
+ *   restingIndex: number,
+ *   snap: (boolean|undefined),
+ *   snapBy: (number|undefined),
+ *   src: (string|undefined),
+ *   thumbnailSrc: (string|undefined),
+ *   visibleCount: (number|undefined),
+ * }}
+ */
+BaseCarouselDef.SlideProps;
+
+/**
+ * @typedef {{
+ *   advance: (function():undefined|undefined),
+ *   customArrow: (PreactDef.VNode|undefined),
+ *   by: number,
+ *   disabled: (boolean|undefined),
+ *   outsetArrows: (boolean|undefined),
+ * }}
+ */
+BaseCarouselDef.ArrowProps;
+
+/**
+ * @typedef {{
+ *   currentSlide: (number|undefined),
+ *   setCurrentSlide: (function(number):undefined),
+ *   slides: !Array<BaseCarouselDef.SlideProps>,
+ *   setSlides: (function(Array):undefined),
+ * }}
+ */
+BaseCarouselDef.ContextProps;
+
+/** @interface */
+BaseCarouselDef.CarouselApi = class {
+  /**
+   * @param {number} index
+   */
+  goToSlide(index) {}
+
+  /** Advance slides forward by `advanceCount` */
+  next() {}
+
+  /** Advance slides backward by `advanceCount` */
+  prev() {}
+};
diff --git a/extensions/amp-base-carousel/1.0/dimensions.js b/extensions/amp-base-carousel/1.0/dimensions.js
new file mode 100644
index 0000000000000..d9edd5663332f
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/dimensions.js
@@ -0,0 +1,271 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {mod} from '../../../src/core/math';
+
+/**
+ * @enum {number}
+ */
+export const Axis = {
+  X: 0,
+  Y: 1,
+};
+
+/**
+ * @enum {string}
+ */
+export const Alignment = {
+  START: 'start',
+  CENTER: 'center',
+};
+
+/**
+ * @enum {string}
+ */
+export const Orientation = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical',
+};
+
+/**
+ * @typedef {{
+ *   start: number,
+ *   end: number,
+ *   length: number,
+ * }}
+ */
+let BaseCarouselDimensionDef;
+
+/**
+ * @param {!Axis} axis The Axis to get the Dimension for.
+ * @param {*} el The Element to get the Dimension For.
+ * @return {!BaseCarouselDimensionDef} The dimension for the Element along the given Axis.
+ */
+export function getDimension(axis, el) {
+  const {bottom, height, left, right, top, width} =
+    el./*OK*/ getBoundingClientRect();
+
+  return {
+    start: Math.round(axis == Axis.X ? left : top),
+    end: Math.round(axis == Axis.X ? right : bottom),
+    length: Math.round(axis == Axis.X ? width : height),
+  };
+}
+
+/**
+ * @param {!Axis} axis The axis to get the center point for.
+ * @param {!Element} el The Element to get the center point for.
+ * @return {number} The center point.
+ */
+export function getCenter(axis, el) {
+  const {end, start} = getDimension(axis, el);
+  return (start + end) / 2;
+}
+
+/**
+ * @param {!Axis} axis The axis to get the start point for.
+ * @param {!Element} el The Element to get the start point for.
+ * @return {number} The start point.
+ */
+export function getStart(axis, el) {
+  const {start} = getDimension(axis, el);
+  return start;
+}
+
+/**
+ * @param {!Axis} axis The Axis to get the position for.
+ * @param {!Alignment} alignment The Alignment to get the position for.
+ * @param {!Element} el The Element to get the position for.
+ * @return {number} The position for the given Element along the given axis for
+ *    the given alignment.
+ */
+export function getPosition(axis, alignment, el) {
+  return alignment == Alignment.START
+    ? getStart(axis, el)
+    : getCenter(axis, el);
+}
+
+/**
+ * @param {!Axis} axis The axis to check for overlap.
+ * @param {!Element} el The Element to check for overlap.
+ * @param {number} position A position to check.
+ * @return {boolean} If the element overlaps the position along the given axis.
+ */
+export function overlaps(axis, el, position) {
+  const {end, start} = getDimension(axis, el);
+  // Ignore the end point, since that is shared with the adjacent Element.
+  return start <= position && position < end;
+}
+
+/**
+ * @param {!Axis} axis The axis to align on.
+ * @param {!Alignment} alignment The desired alignment.
+ * @param {!Element} container The container to align against.
+ * @param {!Element} el The Element get the offset for.
+ * @return {number} How far el is from alignment, as a percentage of its length.
+ */
+export function getPercentageOffsetFromAlignment(
+  axis,
+  alignment,
+  container,
+  el
+) {
+  const elPos = getPosition(axis, alignment, el);
+  const containerPos = getPosition(axis, alignment, container);
+  const {length: elLength} = getDimension(axis, el);
+  return (elPos - containerPos) / elLength;
+}
+
+/**
+ * Finds the index of a child that overlaps a point within the parent,
+ * determined by an axis and alignment. A startIndex is used to look at the
+ * children that are more likely to overlap first.
+ * @param {!Axis} axis The axis to look along.
+ * @param {!Alignment} alignment The alignment to look for within the parent
+ *    container.
+ * @param {!Element} container  The parent container to look in.
+ * @param {!HTMLCollection} children The children to look among.
+ * @param {number} startIndex The index to start looking at.
+ * @return {number|undefined} The overlapping index, if one exists.
+ */
+export function findOverlappingIndex(
+  axis,
+  alignment,
+  container,
+  children,
+  startIndex
+) {
+  const pos = getPosition(axis, alignment, container);
+
+  // First look at the start index, since is the most likely to overlap.
+  if (overlaps(axis, children[startIndex], pos)) {
+    return startIndex;
+  }
+
+  // Move outwards, since the closer indicies are more likely to overlap.
+  for (let i = 1; i <= children.length / 2; i++) {
+    const nextIndex = mod(startIndex + i, children.length);
+    const prevIndex = mod(startIndex - i, children.length);
+
+    if (overlaps(axis, children[nextIndex], pos)) {
+      return nextIndex;
+    }
+
+    if (overlaps(axis, children[prevIndex], pos)) {
+      return prevIndex;
+    }
+  }
+}
+
+/**
+ * Gets the current scroll position for an element along a given axis.
+ * @param {!Axis} axis The axis to get the scroll position for.
+ * @param {!Element} el The Element to get the scroll position for.
+ * @return {number} The scroll position.
+ */
+export function getScrollPosition(axis, el) {
+  if (axis == Axis.X) {
+    return el./*OK*/ scrollLeft;
+  }
+
+  return el./*OK*/ scrollTop;
+}
+
+/**
+ * Gets the scroll capacity for an element along a given axis.
+ * @param {!Axis} axis The axis to get the scroll capacity for.
+ * @param {!Element} el The Element to get the scroll capacity for.
+ * @return {number} The scroll capacity.
+ */
+export function getScrollEnd(axis, el) {
+  if (axis == Axis.X) {
+    return el./*OK*/ scrollWidth;
+  }
+
+  return el./*OK*/ scrollHeight;
+}
+
+/**
+ * Gets the offset position for an element along a given axis.
+ * @param {!Axis} axis The axis to get the offset position for.
+ * @param {!Element} el The Element to get the offset position for.
+ * @return {number} The offset position.
+ */
+export function getOffsetPosition(axis, el) {
+  if (axis == Axis.X) {
+    return el./*OK*/ offsetLeft;
+  }
+
+  return el./*OK*/ offetTop;
+}
+
+/**
+ * Sets the scroll position for an element along a given axis.
+ * @param {!Axis} axis The axis to set the scroll position for.
+ * @param {!Element} el The Element to set the scroll position for.
+ * @param {number} position The scroll position.
+ */
+export function setScrollPosition(axis, el, position) {
+  if (axis == Axis.X) {
+    el./*OK*/ scrollLeft = position;
+  } else {
+    el./*OK*/ scrollTop = position;
+  }
+}
+
+/**
+ * Updates the scroll position for an element along a given axis.
+ * @param {!Axis} axis The axis to set the scroll position for.
+ * @param {!Element} el The Element to set the scroll position for.
+ * @param {number} delta The scroll delta.
+ */
+export function updateScrollPosition(axis, el, delta) {
+  setScrollPosition(axis, el, getScrollPosition(axis, el) + delta);
+}
+
+/**
+ * Scrolls the position within a scrolling container to an Element. Unlike
+ * `scrollIntoView`, this function does not scroll the container itself into
+ * view.
+ * @param {!Axis} axis The axis to scroll along.
+ * @param {!Alignment} alignment How to align the element within the container.
+ * @param {!Element} container The scrolling container.
+ * @param {!Element} el The Element to scroll to.
+ * @param {number} offset A percentage offset within the element to scroll to.
+ * @return {boolean} Whether not scrolling was performed.
+ */
+export function scrollContainerToElement(
+  axis,
+  alignment,
+  container,
+  el,
+  offset = 0
+) {
+  const startAligned = alignment == Alignment.START;
+  const {length} = getDimension(axis, el);
+  const snapOffset = startAligned ? getStart(axis, el) : getCenter(axis, el);
+  const scrollOffset = startAligned
+    ? getStart(axis, container)
+    : getCenter(axis, container);
+  const delta = Math.round(snapOffset - scrollOffset - offset * length);
+  updateScrollPosition(axis, container, delta);
+
+  const {length: containerLength} = getDimension(axis, container);
+  const canScroll =
+    containerLength + getScrollPosition(axis, container) + delta <
+    getScrollEnd(axis, container);
+  return !!delta && canScroll;
+}
diff --git a/extensions/amp-base-carousel/1.0/package.json b/extensions/amp-base-carousel/1.0/package.json
new file mode 100644
index 0000000000000..dbc47a4611ad7
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-base-carousel",
+  "version": "VERSION",
+  "description": "AMP Base Carousel Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "./dist/component.js",
+  "module": "./dist/component-preact.module.js",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "./dist/component-preact.module.js",
+      "require": "./dist/component-preact.js"
+    },
+    "./react": {
+      "import": "./dist/component-react.module.js",
+      "require": "./dist/component-react.js"
+    }
+  },
+  "files": ["dist/*", "react.js"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml.git",
+    "directory": "extensions/amp-base-carousel/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-base-carousel/1.0",
+  "peerDependencies": {
+    "preact": "^10.2.1",
+    "react": "^17.0.0"
+  }
+}
diff --git a/extensions/amp-base-carousel/1.0/react.js b/extensions/amp-base-carousel/1.0/react.js
new file mode 100644
index 0000000000000..0b2957c35c38d
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/react.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-env node */
+// eslint-disable-next-line local/no-module-exports
+module.exports = require('./dist/component-react');
diff --git a/extensions/amp-base-carousel/1.0/scroller.js b/extensions/amp-base-carousel/1.0/scroller.js
new file mode 100644
index 0000000000000..22dd6baf8ef22
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/scroller.js
@@ -0,0 +1,415 @@
+/**
+ * Copyright 2020 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.
+ */
+import * as Preact from '../../../src/preact';
+import {
+  Alignment,
+  Axis,
+  findOverlappingIndex,
+  getPercentageOffsetFromAlignment,
+  scrollContainerToElement,
+} from './dimensions';
+import {LightboxGalleryContext} from '../../amp-lightbox-gallery/1.0/context';
+import {debounce} from '../../../src/core/types/function';
+import {forwardRef} from '../../../src/preact/compat';
+import {mod} from '../../../src/core/math';
+import {setStyle} from '../../../src/style';
+import {toWin} from '../../../src/types';
+import {
+  useCallback,
+  useContext,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from '../../../src/preact';
+import {useStyles} from './component.jss';
+
+/**
+ * How long to wait prior to resetting the scrolling position after the last
+ * scroll event. Ideally this should be low, so that once the user stops
+ * scrolling, things are immediately centered again. Since there can be some
+ * delay between scroll events, and we do not want to interrupt a scroll with a
+ * render, it cannot be too small. 200ms seems to be around the lower limit for
+ * this value on Android / iOS.
+ */
+const RESET_SCROLL_REFERENCE_POINT_WAIT_MS = 200;
+
+/**
+ * @param {!BaseCarouselDef.ScrollerProps} props
+ * @param {{current: ?T}} ref
+ * @return {PreactDef.Renderable}
+ * @template T
+ */
+function ScrollerWithRef(
+  {
+    _thumbnails,
+    advanceCount,
+    alignment,
+    axis,
+    children,
+    lightbox,
+    loop,
+    mixedLength,
+    restingIndex,
+    setRestingIndex,
+    snap,
+    snapBy = 1,
+    visibleCount,
+    ...rest
+  },
+  ref
+) {
+  // We still need our own ref that we can always rely on to be there.
+  const containerRef = useRef(null);
+
+  /**
+   * The number of slides we want to place before the reference or resting index.
+   * Normalized to == restingIndex if loop=false.
+   */
+  const pivotIndex = loop ? Math.floor(children.length / 2) : restingIndex;
+
+  /**
+   * Whether to early exit from the scroll handler.
+   * This is useful on each render where the container is scrolled to the active
+   * slide at a non-integer pixel position. This is likely to happen
+   * with responsive containers or non-integer `visibleCount`.
+   */
+  const ignoreProgrammaticScrollRef = useRef(false);
+
+  const advance = useCallback(
+    (by) => {
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      // Smooth scrolling is preferred to `setRestingIndex` whenever possible.
+      // Note: `setRestingIndex` will still be called on debounce by scroll handler.
+      currentIndex.current = mod(currentIndex.current + by, children.length);
+      scrollOffset.current = 0;
+      const didScroll = scrollContainerToElement(
+        axis,
+        alignment,
+        container,
+        container.children[mod(pivotIndex + by, container.children.length)],
+        scrollOffset.current
+      );
+      if (!didScroll) {
+        setRestingIndex(currentIndex.current);
+      }
+    },
+    [alignment, axis, children.length, pivotIndex, setRestingIndex]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      advance,
+      next: () => advance(advanceCount),
+      prev: () => advance(-advanceCount),
+      get node() {
+        return containerRef.current;
+      },
+    }),
+    [advance, advanceCount]
+  );
+  const classes = useStyles();
+
+  /**
+   * The dynamic position that the slide at the resting index
+   * is with respect to its scrolling order. Only needed if loop=true.
+   */
+  const offsetRef = useRef(restingIndex);
+
+  /**
+   * The partial scroll position as a percentage of the current visible slide.
+   * Only modified if snap=false.
+   */
+  const scrollOffset = useRef(0);
+
+  const {open: openLightbox} = useContext(LightboxGalleryContext);
+  const slides = renderSlides(
+    {
+      alignment,
+      children,
+      loop,
+      mixedLength,
+      offsetRef,
+      openLightbox: lightbox && openLightbox,
+      pivotIndex,
+      restingIndex,
+      snap,
+      snapBy,
+      visibleCount,
+      _thumbnails,
+    },
+    classes
+  );
+  const currentIndex = useRef(restingIndex);
+
+  const scrollToActiveSlide = useCallback(() => {
+    if (!containerRef.current || !containerRef.current.children.length) {
+      return;
+    }
+    const container = containerRef.current;
+    setStyle(container, 'scrollBehavior', 'auto');
+    ignoreProgrammaticScrollRef.current = true;
+    scrollContainerToElement(
+      axis,
+      alignment,
+      container,
+      container.children[pivotIndex],
+      scrollOffset.current
+    );
+    setStyle(container, 'scrollBehavior', 'smooth');
+  }, [alignment, axis, pivotIndex]);
+
+  // useLayoutEffect to avoid FOUC while scrolling for looping layouts.
+  useLayoutEffect(() => {
+    if (!containerRef.current || !loop) {
+      return;
+    }
+    const container = containerRef.current;
+    if (!container.children.length) {
+      return;
+    }
+    scrollToActiveSlide();
+  }, [loop, restingIndex, scrollToActiveSlide]);
+
+  // Adjust slide position when container size changes.
+  useLayoutEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const node = containerRef.current;
+    if (!node) {
+      return;
+    }
+    // Use local window.
+    const win = toWin(node.ownerDocument.defaultView);
+    if (!win) {
+      return undefined;
+    }
+    const observer = new win.ResizeObserver(scrollToActiveSlide);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [scrollToActiveSlide]);
+
+  // Trigger render by setting the resting index to the current scroll state.
+  const debouncedResetScrollReferencePoint = useMemo(() => {
+    // Use local window if possible.
+    const win = containerRef.current
+      ? toWin(containerRef.current.ownerDocument.defaultView)
+      : window;
+    return debounce(
+      win,
+      () => {
+        // Check if the resting index we are centered around is the same as where
+        // we stopped scrolling. If so, we do not need to move anything.
+        if (
+          currentIndex.current === null ||
+          currentIndex.current === restingIndex
+        ) {
+          return;
+        }
+        setRestingIndex(currentIndex.current);
+      },
+      RESET_SCROLL_REFERENCE_POINT_WAIT_MS
+    );
+  }, [restingIndex, setRestingIndex]);
+
+  // Track current slide without forcing render.
+  // This is necessary for smooth scrolling because
+  // intermediary renders will interupt scroll and cause jank.
+  const updateCurrentIndex = () => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const overlappingIndex = findOverlappingIndex(
+      axis,
+      alignment,
+      container,
+      container.children,
+      pivotIndex
+    );
+    if (!snap) {
+      scrollOffset.current = getPercentageOffsetFromAlignment(
+        axis,
+        alignment,
+        container,
+        container.children[overlappingIndex]
+      );
+    }
+    currentIndex.current = mod(
+      overlappingIndex - offsetRef.current,
+      children.length
+    );
+  };
+
+  const handleScroll = () => {
+    if (ignoreProgrammaticScrollRef.current) {
+      ignoreProgrammaticScrollRef.current = false;
+      return;
+    }
+    updateCurrentIndex();
+    debouncedResetScrollReferencePoint();
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      onScroll={handleScroll}
+      class={`${classes.scrollContainer} ${classes.hideScrollbar} ${
+        axis === Axis.X ? classes.horizontalScroll : classes.verticalScroll
+      }`}
+      tabindex={0}
+      {...rest}
+    >
+      {slides}
+    </div>
+  );
+}
+
+const Scroller = forwardRef(ScrollerWithRef);
+Scroller.displayName = 'Scroller'; // Make findable for tests.
+export {Scroller};
+
+/**
+ * How the slides are ordered when looping:
+ *
+ * We want to make sure that the user can scroll all the way to the opposite
+ * end (either forwards or backwards) of the carousel, but no further (no
+ * looping back past where you started). We render elements dynamically
+ * for a desirable scrolling order to allow the browser to scroll as well as
+ * providing targets for the browser to snap on. This is important as these
+ * targets need to be present before the scroll starts for things to work
+ * correctly.
+ *
+ * The elements are ordered depending on the reference point, called
+ * the restingIndex to allow full movement forwards and backwards. You can
+ * imagine the DOM structure looks like the following if you have 5 slides:
+ *
+ * [1][2][3][4][5]
+ *
+ * When the restingIndex is the first index, we should translate slides as follows:
+ *
+ * [4][5][1][2][3]
+ *
+ * This ensures that if you move left or right, there is a slide to show.
+ *
+ * When the user stops scrolling, we update the restingIndex and show/hide the
+ * appropriate spacers. For example, if the user started at slide '1' and moved
+ * left to slide '4', the UI would eventually stop because there is
+ * nothing more to the left of slide '4'.
+ *
+ * [4][5][1][2][3]
+ *
+ * Once scrolling stops, however, the reference point would be reset and this would
+ * update to the following with the next render:
+ *
+ * [2][3][4][5][1]
+ *
+ * Ordering slides:
+ *
+ * Slides are ordered to be before or after the current slide and do not rearrange
+ * dynamically as the user scrolls. Only once the scrolling has ended do they rearrange.
+ * Currently, half the slides are ordered before and half the slides are ordered after.
+ * This could be a bit smarter and only place as many as are necessary on either side of
+ * the reference point to have a sufficient amount of buffer.
+ *
+ * Initial index:
+ *
+ * The initial index can be specified, which will make the carousel scroll to
+ * the desired index when it first renders.
+ *
+ * @param {!BaseCarouselDef.SlideProps} props
+ * @param {!Object} classes
+ * @return {PreactDef.Renderable}
+ */
+function renderSlides(
+  {
+    _thumbnails,
+    alignment,
+    children,
+    loop,
+    mixedLength,
+    offsetRef,
+    openLightbox,
+    pivotIndex,
+    restingIndex,
+    snap,
+    snapBy,
+    visibleCount,
+  },
+  classes
+) {
+  const {length} = children;
+  const lightboxProps = openLightbox && {
+    role: 'button',
+    tabindex: '0',
+    onClick: () => openLightbox(),
+  };
+  const slides = children.map((child, index) => {
+    const key = `slide-${child.key || index}`;
+    return (
+      <div
+        key={key}
+        data-slide={index}
+        class={`${classes.slideSizing} ${classes.slideElement} ${
+          snap && mod(index, snapBy) === 0
+            ? classes.enableSnap
+            : classes.disableSnap
+        } ${
+          alignment === Alignment.CENTER
+            ? classes.centerAlign
+            : classes.startAlign
+        } ${_thumbnails ? classes.thumbnails : ''} `}
+        part="slide"
+        style={{
+          flex: mixedLength ? '0 0 auto' : `0 0 ${100 / visibleCount}%`,
+        }}
+        {...lightboxProps}
+      >
+        {child}
+      </div>
+    );
+  });
+
+  if (!loop) {
+    return slides;
+  }
+
+  const before = [];
+  const after = [];
+  const shift = mod(length - restingIndex + pivotIndex, length);
+  if (restingIndex <= pivotIndex) {
+    for (let i = 0; i < shift; i++) {
+      before.unshift(slides.pop());
+    }
+  } else {
+    for (let i = 0; i < length - shift; i++) {
+      after.push(slides.shift());
+    }
+  }
+
+  offsetRef.current = before.length ? before.length : -after.length;
+  return (
+    <>
+      {before}
+      {slides}
+      {after}
+    </>
+  );
+}
diff --git a/extensions/amp-base-carousel/1.0/storybook/Basic.amp.js b/extensions/amp-base-carousel/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..a2f9039033e18
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/storybook/Basic.amp.js
@@ -0,0 +1,189 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, number, select, text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+const ORIENTATIONS = ['horizontal', 'vertical'];
+
+export default {
+  title: 'amp-base-carousel-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [
+      {name: 'amp-bind', version: '0.1'},
+      {name: 'amp-base-carousel', version: '1.0'},
+    ],
+    experiments: ['bento'],
+  },
+};
+
+export const Default = () => {
+  const loop = boolean('loop', true);
+  const snap = boolean('snap', true);
+  const snapAlign = select('snap alignment', ['start', 'center'], 'start');
+  const snapBy = number('snap by', 1);
+  const advanceCount = number('advance count', 1, {min: 1});
+  const autoAdvance = boolean('auto advance', true);
+  const autoAdvanceCount = number('auto advance count', 1);
+  const autoAdvanceInterval = number('auto advance interval', 1000);
+  const autoAdvanceLoops = number('auto advance loops', 3);
+  const visibleCount = text('visible count', '(min-width: 400px) 2, 1');
+  const outsetArrows = text('outset arrows', '(min-width: 400px) true, false');
+  const controls = select('show controls', ['auto', 'always', 'never']);
+  const defaultSlide = number('default slide', 0);
+  const orientation = select('orientation', ORIENTATIONS, 'vertical');
+  const slideCount = number('slide count', 5, {min: 0, max: 99});
+  const colorIncrement = Math.floor(255 / (slideCount + 1));
+
+  return (
+    <main>
+      <amp-base-carousel
+        id="carousel"
+        advance-count={advanceCount}
+        auto-advance={autoAdvance}
+        auto-advance-count={autoAdvanceCount}
+        auto-advance-interval={autoAdvanceInterval}
+        auto-advance-loops={autoAdvanceLoops}
+        controls={controls}
+        orientation={orientation}
+        outset-arrows={outsetArrows}
+        width="450"
+        height="450"
+        data-amp-bind-slide="activeSlide"
+        slide={defaultSlide}
+        snap={String(snap)}
+        snap-align={snapAlign}
+        snap-by={snapBy}
+        loop={loop}
+        visible-count={visibleCount}
+      >
+        {Array.from({length: slideCount}, (x, i) => {
+          const v = colorIncrement * (i + 1);
+          return (
+            <amp-layout width="225" height="225" layout="responsive">
+              <div
+                style={{
+                  backgroundColor: `rgb(${v}, 100, 100)`,
+                  width: '100%',
+                  height: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '48pt',
+                }}
+              >
+                {i}
+              </div>
+            </amp-layout>
+          );
+        })}
+      </amp-base-carousel>
+
+      <div class="buttons" style={{marginTop: 8}}>
+        <button on="tap:carousel.goToSlide(index=3)">goToSlide(index=3)</button>
+        <button on="tap:carousel.next">Next</button>
+        <button on="tap:carousel.prev">Prev</button>
+        <button on="tap:AMP.setState({activeSlide: 3})">
+          mutate slide to index 3
+        </button>
+      </div>
+    </main>
+  );
+};
+
+export const mixedLength = () => {
+  const width = number('width', 300);
+  const height = number('height', 300);
+  const slideCount = number('slide count', 7, {min: 0, max: 99});
+  const colorIncrement = Math.floor(255 / (slideCount + 1));
+  const loop = boolean('loop', true);
+  const snap = boolean('snap', true);
+  const snapAlign = select('snap alignment', ['start', 'center'], 'start');
+  const snapBy = number('snap by', 1);
+  const mixedLength = boolean('mixed length', true);
+  const controls = select('show controls', ['auto', 'always', 'never']);
+  const randomPreset = [
+    [143, 245, 289, 232, 280, 233, 182, 155, 114, 269, 242, 196, 249, 265, 241],
+    [225, 158, 201, 205, 230, 233, 231, 255, 143, 264, 227, 157, 120, 203, 144],
+    [252, 113, 115, 186, 248, 188, 162, 104, 100, 109, 175, 227, 143, 249, 280],
+  ];
+  const preset = select('random preset', [1, 2, 3]);
+  const orientation = select('orientation', ORIENTATIONS, 'vertical');
+  const horizontal = orientation == 'horizontal';
+
+  return (
+    <amp-base-carousel
+      controls={controls}
+      mixed-length={mixedLength}
+      loop={loop}
+      orientation={orientation}
+      snap={String(snap)}
+      snap-align={snapAlign}
+      snap-by={snapBy}
+      width={width}
+      height={height}
+    >
+      {Array.from({length: slideCount}, (x, i) => {
+        const v = colorIncrement * (i + 1);
+        return (
+          <div
+            style={{
+              backgroundColor: `rgb(${v}, 100, 100)`,
+              border: 'solid white 1px',
+              width: horizontal
+                ? `${randomPreset[preset - 1 || 0][i]}px`
+                : '100px',
+              height: horizontal
+                ? '100px'
+                : `${randomPreset[preset - 1 || 0][i]}px`,
+            }}
+          ></div>
+        );
+      })}
+    </amp-base-carousel>
+  );
+};
+
+export const customArrows = () => {
+  const width = number('width', 400);
+  const height = number('height', 200);
+  const slideCount = number('slide count', 7, {min: 0, max: 99});
+  const colorIncrement = Math.floor(255 / (slideCount + 1));
+  return (
+    <amp-base-carousel id="my-carousel" width={width} height={height}>
+      {Array.from({length: slideCount}, (x, i) => {
+        const v = colorIncrement * (i + 1);
+        return (
+          <div
+            style={{
+              backgroundColor: `rgb(${v}, 100, 100)`,
+              border: 'solid white 1px',
+              width: '100%',
+              height: '100%',
+            }}
+          ></div>
+        );
+      })}
+      <button slot="next-arrow">Next</button>
+      <button slot="prev-arrow">Prev</button>
+    </amp-base-carousel>
+  );
+};
+
+Default.storyName = 'default';
diff --git a/extensions/amp-base-carousel/1.0/storybook/Basic.js b/extensions/amp-base-carousel/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..7d02f0c1cfe2f
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/storybook/Basic.js
@@ -0,0 +1,277 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {BaseCarousel} from '../component';
+import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
+
+const CONTROLS = ['auto', 'always', 'never'];
+const SNAP_ALIGN = ['start', 'center'];
+const ORIENTATIONS = ['horizontal', 'vertical'];
+
+export default {
+  title: 'BaseCarousel',
+  component: BaseCarousel,
+  decorators: [withKnobs],
+};
+
+/**
+ * @param {!Object} props
+ * @return {*}
+ */
+function CarouselWithActions(props) {
+  // TODO(#30447): replace imperative calls with "button" knobs when the
+  // Storybook 6.1 is released.
+  const ref = Preact.useRef();
+  return (
+    <section>
+      <BaseCarousel ref={ref} {...props} />
+      <div style={{marginTop: 8}}>
+        <button onClick={() => ref.current.goToSlide(3)}>goToSlide(3)</button>
+        <button onClick={() => ref.current.next()}>next</button>
+        <button onClick={() => ref.current.prev()}>prev</button>
+      </div>
+    </section>
+  );
+}
+
+export const _default = () => {
+  const width = number('width', 225);
+  const height = number('height', 440);
+  const slideCount = number('slide count', 5, {min: 0, max: 99});
+  const snap = boolean('snap', true);
+  const snapAlign = select('snap alignment', SNAP_ALIGN, 'start');
+  const snapBy = number('snap by', 1);
+  const orientation = select('orientation', ORIENTATIONS, 'vertical');
+  const loop = boolean('loop', true);
+  const advanceCount = number('advance count', 1, {min: 1});
+  const visibleCount = number('visible count', 2, {min: 1});
+  const outsetArrows = boolean('outset arrows', false);
+  const colorIncrement = Math.floor(255 / (slideCount + 1));
+  const controls = select('show controls', CONTROLS);
+  const defaultSlide = number('default slide', 0);
+  return (
+    <CarouselWithActions
+      advanceCount={advanceCount}
+      controls={controls}
+      defaultSlide={defaultSlide}
+      loop={loop}
+      orientation={orientation}
+      outsetArrows={outsetArrows}
+      snap={snap}
+      snapAlign={snapAlign}
+      snapBy={snapBy}
+      style={{width, height}}
+      visibleCount={visibleCount}
+    >
+      {Array.from({length: slideCount}, (x, i) => {
+        const v = colorIncrement * (i + 1);
+        return (
+          <div
+            style={{
+              backgroundColor: `rgb(${v}, 100, 100)`,
+              width,
+              height,
+              textAlign: 'center',
+              fontSize: '48pt',
+              lineHeight: height / visibleCount + 'px',
+            }}
+          >
+            {i}
+          </div>
+        );
+      })}
+    </CarouselWithActions>
+  );
+};
+
+export const mixedLength = () => {
+  const width = number('width', 300);
+  const height = number('height', 300);
+  const slideCount = 15;
+  const colorIncrement = Math.floor(255 / (slideCount + 1));
+  const autoAdvance = boolean('auto advance', true);
+  const autoAdvanceCount = number('auto advance count', 1);
+  const autoAdvanceInterval = number('auto advance interval', 1000);
+  const autoAdvanceLoops = number('auto advance loops', 3);
+  const loop = boolean('loop', true);
+  const snap = boolean('snap', true);
+  const snapAlign = select('snap alignment', SNAP_ALIGN, 'start');
+  const snapBy = number('snap by', 1);
+  const mixedLength = boolean('mixed length', true);
+  const controls = select('show controls', ['auto', 'always', 'never']);
+  const randomPreset = [
+    [143, 245, 289, 232, 280, 233, 182, 155, 114, 269, 242, 196, 249, 265, 241],
+    [225, 158, 201, 205, 230, 233, 231, 255, 143, 264, 227, 157, 120, 203, 144],
+    [252, 113, 115, 186, 248, 188, 162, 104, 100, 109, 175, 227, 143, 249, 280],
+  ];
+  const preset = select('random preset', [1, 2, 3]);
+  const orientation = select('orientation', ORIENTATIONS, 'vertical');
+  const horizontal = orientation == 'horizontal';
+  return (
+    <BaseCarousel
+      autoAdvance={autoAdvance}
+      autoAdvanceCount={autoAdvanceCount}
+      autoAdvanceInterval={autoAdvanceInterval}
+      autoAdvanceLoops={autoAdvanceLoops}
+      controls={controls}
+      mixedLength={mixedLength}
+      loop={loop}
+      orientation={orientation}
+      snap={snap}
+      snapAlign={snapAlign}
+      snapBy={snapBy}
+      style={{width, height}}
+    >
+      {Array.from({length: slideCount}, (x, i) => {
+        const v = colorIncrement * (i + 1);
+        return (
+          <div
+            style={{
+              backgroundColor: `rgb(${v}, 100, 100)`,
+              border: 'solid white 1px',
+              width: horizontal
+                ? `${randomPreset[preset - 1 || 0][i]}px`
+                : '100px',
+              height: horizontal
+                ? '100px'
+                : `${randomPreset[preset - 1 || 0][i]}px`,
+            }}
+          ></div>
+        );
+      })}
+    </BaseCarousel>
+  );
+};
+
+export const provideArrows = () => {
+  const outsetArrows = boolean('outset arrows', false);
+  const width = number('width', 440);
+  const height = number('height', 225);
+  const controls = select('show controls', CONTROLS);
+  const myButtonStyle = {
+    background: 'lightblue',
+    borderRadius: '50%',
+    fontSize: 14,
+    color: 'white',
+    width: '30px',
+    height: '30px',
+    padding: '1px 6px',
+  };
+  const MyButton = (props) => {
+    const {children} = props;
+    return (
+      <button style={myButtonStyle} {...props}>
+        {children}
+      </button>
+    );
+  };
+  return (
+    <BaseCarousel
+      controls={controls}
+      style={{width, height}}
+      outsetArrows={outsetArrows}
+      arrowPrevAs={(props) => <MyButton {...props}>←</MyButton>}
+      arrowNextAs={(props) => <MyButton {...props}>→</MyButton>}
+    >
+      {['lightcoral', 'peachpuff', 'lavender'].map((color) => (
+        <div style={{backgroundColor: color, width, height}}></div>
+      ))}
+    </BaseCarousel>
+  );
+};
+
+export const WithCaptions = () => {
+  const controls = select('show controls', CONTROLS);
+  return (
+    <BaseCarousel
+      visibleCount={3}
+      controls={controls}
+      loop
+      style={{width: '500px', height: '400px'}}
+    >
+      <figure>
+        <img
+          style={{width: '500px', height: '300px'}}
+          src="https://amp.dev/static/samples/img/landscape_lake_1280x857.jpg"
+        />
+        <figcaption>Each image has a different caption.</figcaption>
+      </figure>
+      <figure>
+        <img
+          style={{width: '600px', height: '300px'}}
+          src="https://amp.dev/static/samples/img/landscape_village_1280x853.jpg"
+        />
+        <figcaption>This caption is different.</figcaption>
+      </figure>
+      <figure>
+        <img
+          style={{width: '500px', height: '300px'}}
+          src="https://amp.dev/static/samples/img/landscape_desert_1280x853.jpg"
+        />
+        <figcaption>The third image has its caption.</figcaption>
+      </figure>
+    </BaseCarousel>
+  );
+};
+
+export const AutoAdvance = () => {
+  const slideCount = number('slide count', 5, {min: 0, max: 99});
+  const snap = boolean('snap', true);
+  const snapAlign = select('snap alignment', SNAP_ALIGN, 'start');
+  const snapBy = number('snap by', 1);
+  const loop = boolean('loop', true);
+  const autoAdvance = boolean('auto advance', true);
+  const autoAdvanceCount = number('auto advance count', 1);
+  const autoAdvanceInterval = number('auto advance interval', 1000);
+  const autoAdvanceLoops = number('auto advance loops', 3);
+  const advanceCount = number('advance count', 1, {min: 1});
+  const visibleCount = number('visible count', 2, {min: 1});
+  const colorIncrement = Math.floor(255 / (slideCount + 1));
+  return (
+    <CarouselWithActions
+      advanceCount={advanceCount}
+      autoAdvanceCount={autoAdvanceCount}
+      autoAdvanceInterval={autoAdvanceInterval}
+      autoAdvanceLoops={autoAdvanceLoops}
+      autoAdvance={autoAdvance}
+      loop={loop}
+      snap={snap}
+      snapAlign={snapAlign}
+      snapBy={snapBy}
+      style={{width: '600px', height: '300px'}}
+      visibleCount={visibleCount}
+    >
+      {Array.from({length: slideCount}, (x, i) => {
+        const v = colorIncrement * (i + 1);
+        return (
+          <div
+            style={{
+              backgroundColor: `rgb(${v}, 100, 100)`,
+              width: '900px',
+              height: '300px',
+              textAlign: 'center',
+              fontSize: '48pt',
+              lineHeight: '300px',
+            }}
+          >
+            {i}
+          </div>
+        );
+      })}
+    </CarouselWithActions>
+  );
+};
diff --git a/extensions/amp-base-carousel/1.0/test-e2e/helpers.js b/extensions/amp-base-carousel/1.0/test-e2e/helpers.js
new file mode 100644
index 0000000000000..c36aea839c50b
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test-e2e/helpers.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright 2020 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.
+ */
+
+const TAG_NAME = 'amp-base-carousel';
+const SLIDE_CLASS = 'slideElement';
+const SCROLLER_CLASS = 'hideScrollbar';
+const PREV_ARROW_CLASS = 'arrowPrev';
+const NEXT_ARROW_CLASS = 'arrowNext';
+const PREV_ARROW_SLOT_SELECTOR = '[slot="prev-arrow"]';
+const NEXT_ARROW_SLOT_SELECTOR = '[slot="next-arrow"]';
+
+/** Increase element wait timeout for Selenium controller */
+const ELEMENT_WAIT_TIMEOUT = 10000;
+
+export function getCarousel(controller) {
+  return controller.findElement(TAG_NAME);
+}
+
+export function getSlides(styles, controller) {
+  return controller.findElements(`.${styles[SLIDE_CLASS]}`);
+}
+
+export async function getSlide(styles, controller, n) {
+  return controller.findElement(`.${styles[SLIDE_CLASS]}[data-slide="${n}"]`);
+}
+
+export async function getScrollingElement(styles, controller) {
+  return controller.findElement(
+    `.${styles[SCROLLER_CLASS]}`,
+    ELEMENT_WAIT_TIMEOUT
+  );
+}
+
+export async function getPrevArrowSlot(controller) {
+  return controller.findElement(PREV_ARROW_SLOT_SELECTOR);
+}
+
+export async function getNextArrowSlot(controller) {
+  return controller.findElement(NEXT_ARROW_SLOT_SELECTOR);
+}
+
+export async function getPrevArrow(styles, controller) {
+  return controller.findElement(
+    `.${styles[PREV_ARROW_CLASS]}`,
+    ELEMENT_WAIT_TIMEOUT
+  );
+}
+
+export async function getNextArrow(styles, controller) {
+  return controller.findElement(
+    `.${styles[NEXT_ARROW_CLASS]}`,
+    ELEMENT_WAIT_TIMEOUT
+  );
+}
+
+export function sleep(ms) {
+  return new Promise((res) => setTimeout(res, ms));
+}
diff --git a/extensions/amp-base-carousel/1.0/test-e2e/test-advance.js b/extensions/amp-base-carousel/1.0/test-e2e/test-advance.js
new file mode 100644
index 0000000000000..012e39b8c9d43
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test-e2e/test-advance.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  getCarousel,
+  getNextArrow,
+  getPrevArrow,
+  getSlides,
+  sleep,
+} from './helpers';
+import {useStyles} from '../component.jss';
+
+const pageWidth = 500;
+const pageHeight = 800;
+
+describes.endtoend(
+  'amp-base-carousel - advance',
+  {
+    version: '1.0',
+    fixture: 'amp-base-carousel/advance.amp.html',
+    experiments: ['bento-carousel'],
+    environments: ['single'],
+    initialRect: {width: pageWidth, height: pageHeight},
+  },
+  async (env) => {
+    let controller;
+    let nextArrow;
+    let prevArrow;
+    const styles = useStyles();
+
+    function css(handle, name) {
+      return controller.getElementCssValue(handle, name);
+    }
+
+    function rect(el) {
+      return controller.getElementRect(el);
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+      const carousel = await getCarousel(controller);
+      await controller.switchToShadowRoot(carousel);
+
+      nextArrow = await getNextArrow(styles, controller);
+      prevArrow = await getPrevArrow(styles, controller);
+    });
+
+    // TODO(carolineliu, #24195): This test is flaky during CI.
+    it.skip('should move forwards once', async () => {
+      await controller.click(nextArrow);
+
+      // Wait for render with updated active slide.
+      await sleep(400);
+
+      await expect(css(prevArrow, 'opacity')).to.equal('1');
+      await expect(css(nextArrow, 'opacity')).to.equal('1');
+
+      const slides = await getSlides(styles, controller);
+      const slideOne = await rect(slides[0]);
+      const slideTwo = await rect(slides[1]);
+
+      await expect(slideOne['x']).to.be.lessThan(0);
+      await expect(slideTwo['x']).to.be.at.least(0);
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/1.0/test-e2e/test-arrows-non-looping.js b/extensions/amp-base-carousel/1.0/test-e2e/test-arrows-non-looping.js
new file mode 100644
index 0000000000000..d6dc59ed3ae87
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test-e2e/test-arrows-non-looping.js
@@ -0,0 +1,78 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  getCarousel,
+  getNextArrow,
+  getPrevArrow,
+  getScrollingElement,
+} from './helpers';
+import {useStyles} from '../component.jss';
+
+/** The total number of slides in the carousel */
+const SLIDE_COUNT = 4;
+const pageWidth = 600;
+const pageHeight = 600;
+
+describes.endtoend(
+  'amp-base-carousel - arrows when non-looping',
+  {
+    version: '1.0',
+    fixture: 'amp-base-carousel/non-looping.amp.html',
+    experiments: ['bento-carousel'],
+    initialRect: {width: pageWidth, height: pageHeight},
+    environments: ['single', 'viewer-demo'],
+  },
+  async (env) => {
+    const styles = useStyles();
+    let controller;
+    let prevArrow;
+    let nextArrow;
+
+    function css(handle, name) {
+      return controller.getElementCssValue(handle, name);
+    }
+
+    beforeEach(async function () {
+      controller = env.controller;
+      const carousel = await getCarousel(controller);
+      await controller.switchToShadowRoot(carousel);
+
+      prevArrow = await getPrevArrow(styles, controller);
+      nextArrow = await getNextArrow(styles, controller);
+    });
+
+    // TODO(wg-bento): getPrevArrow does not always find element in time.
+    it.skip('should have the arrows in the correct initial state', async () => {
+      await expect(css(prevArrow, 'opacity')).to.equal('0');
+      await expect(css(nextArrow, 'opacity')).to.equal('1');
+    });
+
+    it.skip('should show the prev arrow when going to the first slide', async () => {
+      await controller.click(nextArrow);
+      await expect(css(prevArrow, 'opacity')).to.equal('1');
+      await expect(css(nextArrow, 'opacity')).to.equal('1');
+    });
+
+    it.skip('should hide the next arrow when going to the end', async () => {
+      const el = await getScrollingElement(styles, controller);
+      await controller.scrollTo(el, {left: (SLIDE_COUNT - 1) * pageWidth});
+
+      await expect(css(prevArrow, 'opacity')).to.equal('1');
+      await expect(css(nextArrow, 'opacity')).to.equal('0');
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/1.0/test-e2e/test-arrows.js b/extensions/amp-base-carousel/1.0/test-e2e/test-arrows.js
new file mode 100644
index 0000000000000..8fd81ed12ca79
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test-e2e/test-arrows.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  getCarousel,
+  getNextArrowSlot,
+  getPrevArrowSlot,
+  getSlide,
+} from './helpers';
+import {useStyles} from '../component.jss';
+
+/** The total number of slides in the carousel */
+const SLIDE_COUNT = 7;
+
+describes.endtoend(
+  'amp-base-carousel - arrows with custom arrows',
+  {
+    version: '1.0',
+    fixture: 'amp-base-carousel/custom-arrows.amp.html',
+    experiments: ['bento-carousel'],
+    environments: ['single', 'viewer-demo'],
+  },
+  async function (env) {
+    const styles = useStyles();
+    let controller;
+    let carousel;
+    let prevArrow;
+    let nextArrow;
+
+    beforeEach(async () => {
+      controller = env.controller;
+      carousel = await getCarousel(controller);
+      nextArrow = await getNextArrowSlot(controller);
+      prevArrow = await getPrevArrowSlot(controller);
+    });
+
+    afterEach(async () => {
+      await controller.switchToLight();
+    });
+
+    it('should go to the next slide', async () => {
+      await controller.click(nextArrow);
+      await controller.switchToShadowRoot(carousel);
+      const secondSlide = await getSlide(styles, controller, 1);
+      await expect(controller.getElementRect(secondSlide)).to.include({
+        'x': 0,
+      });
+    });
+
+    it('should go to the previous slide', async () => {
+      await controller.click(prevArrow);
+      await controller.switchToShadowRoot(carousel);
+      const lastSlide = await getSlide(styles, controller, SLIDE_COUNT - 1);
+      await expect(controller.getElementRect(lastSlide)).to.include({
+        'x': 0,
+      });
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/1.0/test-e2e/test-autoadvance.js b/extensions/amp-base-carousel/1.0/test-e2e/test-autoadvance.js
new file mode 100644
index 0000000000000..808513a0caf7e
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test-e2e/test-autoadvance.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {getCarousel, getSlides, sleep} from './helpers';
+import {useStyles} from '../component.jss';
+
+const pageWidth = 800;
+const pageHeight = 600;
+
+describes.endtoend(
+  'amp-base-carousel - autoadvance',
+  {
+    version: '1.0',
+    fixture: 'amp-base-carousel/1.0/autoadvance.amp.html',
+    experiments: ['bento-carousel'],
+    initialRect: {width: pageWidth, height: pageHeight},
+    environments: ['single', 'viewer-demo'],
+  },
+  async (env) => {
+    let controller;
+    const styles = useStyles();
+
+    function rect(el) {
+      return controller.getElementRect(el);
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+      const carousel = await getCarousel(controller);
+      await controller.switchToShadowRoot(carousel);
+    });
+
+    // TODO(wg-bento, #24195): getSlides does not always find elements in time.
+    it.skip('should move forwards', async () => {
+      const slides = await getSlides(styles, controller);
+
+      await expect(rect(slides[1])).to.include({x: 0});
+      await expect(rect(slides[2])).to.include({x: 0});
+      await expect(rect(slides[0])).to.include({x: 0});
+    });
+
+    // TODO(wg-bento, #24195): getSlides does not always find elements in time.
+    it.skip('should go to start and complete two full iterations only', async () => {
+      const slides = await getSlides(styles, controller);
+
+      // first iteration
+      await expect(rect(slides[1])).to.include({x: 0});
+      await expect(rect(slides[2])).to.include({x: 0});
+      await expect(rect(slides[0])).to.include({x: 0});
+
+      // second iteration
+      await expect(rect(slides[1])).to.include({x: 0});
+      await expect(rect(slides[2])).to.include({x: 0});
+      await expect(rect(slides[0])).to.include({x: 0});
+
+      // if autoadvancing, it should have done so by now,
+      // so we can be confident that the slide did not transition,
+      // as expected due to auto-advance-loops="2"
+      await sleep(1001);
+      await expect(rect(slides[0])).to.include({x: 0});
+    });
+
+    it('should not autoadvance after using imperative api', async () => {
+      await controller.switchToLight();
+      const button = await controller.findElement('#next');
+      await controller.click(button);
+
+      const carousel = await getCarousel(controller);
+      await controller.switchToShadowRoot(carousel);
+      const slides = await getSlides(styles, controller);
+      await expect(rect(slides[1])).to.include({x: 0});
+
+      // if autoadvancing, it should have done so by now,
+      // so we can be confident that the slide did not transition,
+      // as expected due to auto-advance-loops="2"
+      await sleep(1001);
+      await expect(rect(slides[1])).to.include({x: 0});
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/1.0/test-e2e/test-component.js b/extensions/amp-base-carousel/1.0/test-e2e/test-component.js
new file mode 100644
index 0000000000000..8822bed35eae4
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test-e2e/test-component.js
@@ -0,0 +1,178 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {getCarousel, getScrollingElement, getSlide, getSlides} from './helpers';
+import {useStyles} from '../component.jss';
+
+const pageWidth = 800;
+const pageHeight = 800;
+
+/** Increase timeout for running on CircleCI **/
+const testTimeout = 40000;
+
+describes.endtoend(
+  'amp-base-carousel - basic functionality',
+  {
+    version: '1.0',
+    fixture: 'amp-base-carousel/1.0/basic.amp.html',
+    experiments: ['bento-carousel'],
+    initialRect: {width: pageWidth, height: pageHeight},
+    environments: ['single', 'viewer-demo'],
+  },
+  async (env) => {
+    /** The total number of slides in the carousel */
+    const SLIDE_COUNT = 7;
+    let controller;
+
+    const styles = useStyles();
+
+    function prop(el, name) {
+      return controller.getElementProperty(el, name);
+    }
+
+    beforeEach(async function () {
+      controller = env.controller;
+      const carousel = await getCarousel(controller);
+      await controller.switchToShadowRoot(carousel);
+    });
+
+    // TODO(wg-bento, #24195): getScrollingElement does not always find element in time.
+    it.skip('should render correctly', async function () {
+      this.timeout(testTimeout);
+      const el = await getScrollingElement(styles, controller);
+
+      // We should have space for all slides
+      await expect(prop(el, 'scrollWidth')).to.equal(pageWidth * SLIDE_COUNT);
+    });
+
+    // TODO(wg-bento, #24195): getScrollingElement does not always find element in time.
+    it.skip('should snap when scrolling', async function () {
+      this.timeout(testTimeout);
+      const el = await getScrollingElement(styles, controller);
+      const firstSlide = await getSlide(styles, controller, 0);
+
+      const slideWidth = await prop(firstSlide, 'offsetWidth');
+      const scrollLeft = await prop(el, 'scrollLeft');
+      const snappedScrollLeft = scrollLeft + slideWidth;
+      const requestedScrollLeft = snappedScrollLeft + 1;
+
+      await controller.scrollTo(el, {left: requestedScrollLeft});
+      // We should have snapped to the edge of the slide rather than the
+      // requested scroll position.
+      await expect(prop(el, 'scrollLeft')).to.equal(snappedScrollLeft);
+    });
+
+    // TODO(wg-bento, #24195): getScrollingElement does not always find element in time.
+    it.skip('should reset the window after scroll', async function () {
+      this.timeout(testTimeout);
+      const el = await getScrollingElement(styles, controller);
+      const firstSlide = await getSlide(styles, controller, 0);
+
+      const slideWidth = await prop(firstSlide, 'offsetWidth');
+      const scrollWidth = await prop(el, 'scrollWidth');
+      const scrollLeft = await prop(el, 'scrollLeft');
+      const snappedScrollLeft = scrollLeft + slideWidth;
+      const requestedScrollLeft = snappedScrollLeft + 1;
+
+      await controller.scrollTo(el, {left: requestedScrollLeft});
+      // Wait for the scrolling to settle
+      await expect(prop(el, 'scrollLeft')).to.equal(snappedScrollLeft);
+      // The new scroll width/left should eventually be the same as before,
+      // since the windowing should have been reset around the new element.
+      await expect(prop(el, 'scrollWidth')).to.equal(scrollWidth);
+      await expect(prop(el, 'scrollLeft')).to.equal(scrollLeft);
+    });
+
+    // TODO(wg-bento, #24195): getScrollingElement does not always find element in time.
+    describe.skip('looping', function () {
+      it('should show the last slide when looping', async function () {
+        this.timeout(testTimeout);
+        const el = await getScrollingElement(styles, controller);
+        const lastSlide = await getSlide(styles, controller, SLIDE_COUNT - 1);
+
+        // Scroll to the previous slide by moving left by the last slide's width.
+        const slideWidth = await prop(lastSlide, 'offsetWidth');
+        const restingScrollLeft = await prop(el, 'scrollLeft');
+        const snappedScrollLeft = restingScrollLeft - slideWidth;
+        const requestedScrollLeft = snappedScrollLeft - 1;
+        await controller.scrollTo(el, {left: requestedScrollLeft});
+
+        await expect(prop(el, 'scrollLeft')).to.equal(snappedScrollLeft);
+      });
+
+      it('should show the first slide when looping', async function () {
+        this.timeout(testTimeout);
+        const el = await getScrollingElement(styles, controller);
+        const lastSlide = await getSlide(styles, controller, SLIDE_COUNT - 1);
+
+        // Go to the last slide, wait for scrolling to move and window to reset.
+        const slideWidth = await prop(lastSlide, 'offsetWidth');
+        const restingScrollLeft = await prop(el, 'scrollLeft');
+        const lastSlideScrollPos = restingScrollLeft - slideWidth;
+        await controller.scrollTo(el, {left: lastSlideScrollPos});
+        await expect(prop(el, 'scrollLeft')).to.equal(lastSlideScrollPos);
+        await expect(prop(el, 'scrollLeft')).to.equal(restingScrollLeft);
+
+        // Go to the next slide by moving the slides width to the right.
+        const snappedScrollLeft = restingScrollLeft + slideWidth;
+        const requestedScrollLeft = snappedScrollLeft + 1;
+        await controller.scrollTo(el, {left: requestedScrollLeft});
+
+        await expect(prop(el, 'scrollLeft')).to.equal(snappedScrollLeft);
+      });
+
+      // Make sure we can move all the way forwards to the last slide and that it
+      // is in the right place.
+      it('should display slides correctly when moving forwards', async function () {
+        this.timeout(testTimeout);
+        const el = await getScrollingElement(styles, controller);
+        const slides = await getSlides(styles, controller);
+        const lastSlide = slides[SLIDE_COUNT - 1];
+
+        // Go to the last slide, wait for scrolling to move.
+        const slideWidth = await prop(lastSlide, 'offsetWidth');
+        const restingScrollLeft = await prop(el, 'scrollLeft');
+        await controller.scrollTo(el, {
+          left: slideWidth * SLIDE_COUNT,
+        });
+
+        await expect(prop(el, 'scrollLeft')).to.equal(restingScrollLeft);
+        await expect(controller.getElementRect(lastSlide)).to.include({
+          x: 0,
+          width: slideWidth,
+        });
+      });
+
+      // Make sure we can move all the way backwards and rerender
+      it('should display slides correctly when moving backwards', async function () {
+        this.timeout(testTimeout);
+        const el = await getScrollingElement(styles, controller);
+        const secondSlide = await getSlide(styles, controller, 1);
+
+        // Go to the last rendered slide, wait for scrolling to move.
+        const slideWidth = await prop(secondSlide, 'offsetWidth');
+        const restingScrollLeft = await prop(el, 'scrollLeft');
+        await controller.scrollTo(el, {
+          left: -(slideWidth * Math.floor(SLIDE_COUNT / 2)),
+        });
+
+        // Rerender with last slide in the centered scroll position.
+        await expect(prop(el, 'scrollLeft')).to.not.equal(restingScrollLeft);
+        await expect(prop(el, 'scrollLeft')).to.equal(restingScrollLeft);
+      });
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/1.0/test-e2e/test-grouping.js b/extensions/amp-base-carousel/1.0/test-e2e/test-grouping.js
new file mode 100644
index 0000000000000..5722795e6bb44
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test-e2e/test-grouping.js
@@ -0,0 +1,94 @@
+/**
+ * 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.
+ */
+
+import {getCarousel, getScrollingElement, getSlide} from './helpers';
+import {useStyles} from '../component.jss';
+
+const pageWidth = 800;
+const pageHeight = 600;
+const advanceCount = 2;
+const slideCount = 8;
+const pivotIndex = Math.floor(slideCount / 2);
+const expectedScrollPosition = (pageWidth / advanceCount) * pivotIndex;
+
+describes.endtoend(
+  'amp-base-carousel - grouping',
+  {
+    version: '1.0',
+    fixture: 'amp-base-carousel/1.0/grouping-move-by-2.amp.html',
+    experiments: ['bento-carousel'],
+    initialRect: {width: pageWidth, height: pageHeight},
+    environments: ['single'],
+  },
+  async (env) => {
+    let controller, btnPrev, btnNext;
+
+    const styles = useStyles();
+
+    function prop(el, name) {
+      return controller.getElementProperty(el, name);
+    }
+
+    beforeEach(async function () {
+      controller = env.controller;
+      // Retrieve buttons before entering shadow root
+      btnPrev = await controller.findElement('[on="tap:carousel-1.prev()"]');
+      btnNext = await controller.findElement('[on="tap:carousel-1.next()"]');
+      const carousel = await getCarousel(controller);
+      await controller.switchToShadowRoot(carousel);
+    });
+
+    it('should move forwards by the advance-count', async () => {
+      const el = await getScrollingElement(styles, controller);
+      await expect(prop(el, 'scrollLeft')).to.equal(expectedScrollPosition);
+
+      const slide0 = await getSlide(styles, controller, 0);
+      await expect(prop(slide0, 'offsetLeft')).to.equal(expectedScrollPosition);
+
+      await controller.click(btnNext);
+      const slide2 = await getSlide(styles, controller, 2);
+      await expect(prop(slide2, 'offsetLeft')).to.equal(expectedScrollPosition);
+
+      await controller.click(btnNext);
+      const slide4 = await getSlide(styles, controller, 4);
+      await expect(prop(slide4, 'offsetLeft')).to.equal(expectedScrollPosition);
+
+      await controller.click(btnNext);
+      const slide6 = await getSlide(styles, controller, 6);
+      await expect(prop(slide6, 'offsetLeft')).to.equal(expectedScrollPosition);
+    });
+
+    it.skip('should move backwards by the advance-count', async () => {
+      const el = await getScrollingElement(styles, controller);
+      await expect(prop(el, 'scrollLeft')).to.equal(expectedScrollPosition);
+
+      const slide0 = await getSlide(styles, controller, 0);
+      await expect(prop(slide0, 'offsetLeft')).to.equal(expectedScrollPosition);
+
+      await controller.click(btnPrev);
+      const slide6 = await getSlide(styles, controller, 6);
+      await expect(prop(slide6, 'offsetLeft')).to.equal(expectedScrollPosition);
+
+      await controller.click(btnPrev);
+      const slide4 = await getSlide(styles, controller, 4);
+      await expect(prop(slide4, 'offsetLeft')).to.equal(expectedScrollPosition);
+
+      await controller.click(btnPrev);
+      const slide2 = await getSlide(styles, controller, 2);
+      await expect(prop(slide2, 'offsetLeft')).to.equal(expectedScrollPosition);
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/1.0/test-e2e/test-mixed-lengths-no-snap.js b/extensions/amp-base-carousel/1.0/test-e2e/test-mixed-lengths-no-snap.js
new file mode 100644
index 0000000000000..9ff17405d1658
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test-e2e/test-mixed-lengths-no-snap.js
@@ -0,0 +1,75 @@
+/**
+ * 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.
+ */
+
+import {getCarousel, getScrollingElement, getSlide} from './helpers';
+import {useStyles} from '../component.jss';
+
+const pageWidth = 800;
+const pageHeight = 600;
+
+describes.endtoend(
+  'amp-base-carousel - mixed length slides without snapping',
+  {
+    version: '1.0',
+    fixture: 'amp-base-carousel/1.0/mixed-lengths-no-snap.amp.html',
+    experiments: ['bento-carousel'],
+    initialRect: {width: pageWidth, height: pageHeight},
+    environments: ['single', 'viewer-demo'],
+  },
+  async (env) => {
+    let controller;
+    const styles = useStyles();
+
+    function prop(el, name) {
+      return controller.getElementProperty(el, name);
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+      const carousel = await getCarousel(controller);
+      await controller.switchToShadowRoot(carousel);
+    });
+
+    // Test mixed lengths without snapping. This is start aligned as that seems
+    // make the most sense for non-snapping mixed lengths.
+    describe('no snap', () => {
+      const slideWidth = pageWidth * 0.75;
+
+      // TODO(wg-components, #24195): Flaky during CI.
+      it.skip('should have the correct initial slide positions', async () => {
+        const slideOne = await getSlide(styles, controller, 0);
+        const slideTwo = await getSlide(styles, controller, 1);
+
+        await expect(prop(slideOne, 'offsetWidth')).to.equal(slideWidth);
+        await expect(controller.getElementRect(slideOne)).to.include({x: 0});
+
+        await expect(prop(slideTwo, 'offsetWidth')).to.equal(slideWidth);
+        await expect(controller.getElementRect(slideTwo)).to.include({
+          x: slideWidth,
+        });
+      });
+
+      // TODO(wg-components, #24195): Flaky during CI.
+      it.skip('should scroll freely', async () => {
+        const el = await getScrollingElement(styles, controller);
+        const slideOne = await getSlide(styles, controller, 0);
+
+        await controller.scrollBy(el, {left: 10});
+        await expect(controller.getElementRect(slideOne)).to.include({x: -10});
+      });
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/1.0/test-e2e/test-mixed-lengths.js b/extensions/amp-base-carousel/1.0/test-e2e/test-mixed-lengths.js
new file mode 100644
index 0000000000000..e87f110d3d6e8
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test-e2e/test-mixed-lengths.js
@@ -0,0 +1,78 @@
+/**
+ * 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.
+ */
+
+import {getCarousel, getScrollingElement, getSlide} from './helpers';
+import {useStyles} from '../component.jss';
+
+const pageWidth = 800;
+const pageHeight = 600;
+
+describes.endtoend(
+  'amp-base-carousel - mixed length slides',
+  {
+    version: '1.0',
+    fixture: 'amp-base-carousel/1.0/mixed-lengths.amp.html',
+    experiments: ['bento-carousel'],
+    environments: ['single', 'viewer-demo'],
+    initialRect: {width: pageWidth, height: pageHeight},
+  },
+  async (env) => {
+    let controller;
+    const styles = useStyles();
+
+    function prop(el, name) {
+      return controller.getElementProperty(el, name);
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+      const carousel = await getCarousel(controller);
+      await controller.switchToShadowRoot(carousel);
+    });
+
+    // Test mixed lengths with snapping.
+    // TODO(wg-bento, #24195): getSlide/getScrollingElement do not always find element in time.
+    describe.skip('snap', () => {
+      const slideWidth = pageWidth * 0.75;
+
+      it('should have the correct initial slide positions', async function () {
+        const slideOne = await getSlide(styles, controller, 0);
+        const slideTwo = await getSlide(styles, controller, 1);
+
+        await expect(prop(slideOne, 'offsetWidth')).to.equal(slideWidth);
+        await expect(controller.getElementRect(slideOne)).to.include({
+          x: (pageWidth - slideWidth) / 2,
+        });
+
+        await expect(prop(slideTwo, 'offsetWidth')).to.equal(slideWidth);
+        await expect(controller.getElementRect(slideTwo)).to.include({
+          x: slideWidth + (pageWidth - slideWidth) / 2,
+        });
+      });
+
+      it('should snap on the center point', async function () {
+        const el = await getScrollingElement(styles, controller);
+        const slideTwo = await getSlide(styles, controller, 1);
+        const scrollAmount = 1;
+
+        await controller.scrollBy(el, {left: scrollAmount});
+        await expect(controller.getElementRect(slideTwo)).to.include({
+          x: (pageWidth - slideWidth) / 2,
+        });
+      });
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/1.0/test-e2e/test-non-looping.js b/extensions/amp-base-carousel/1.0/test-e2e/test-non-looping.js
new file mode 100644
index 0000000000000..45f67fdf942bf
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test-e2e/test-non-looping.js
@@ -0,0 +1,99 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {getCarousel, getScrollingElement, getSlide} from './helpers';
+import {useStyles} from '../component.jss';
+
+const pageWidth = 800;
+const pageHeight = 600;
+
+describes.endtoend(
+  'amp-base-carousel - non-looping',
+  {
+    version: '1.0',
+    fixture: 'amp-base-carousel/non-looping.amp.html',
+    experiments: ['bento-carousel'],
+    environments: ['single', 'viewer-demo'],
+    initialRect: {width: pageWidth, height: pageHeight},
+  },
+  async (env) => {
+    /** The total number of slides in the carousel */
+    const SLIDE_COUNT = 4;
+    const styles = useStyles();
+    let controller;
+
+    function prop(el, name) {
+      return controller.getElementProperty(el, name);
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+      const carousel = await getCarousel(controller);
+      await controller.switchToShadowRoot(carousel);
+    });
+
+    // TODO(wg-components, #24195): Flaky during CI.
+    it.skip('should render correctly', async () => {
+      const el = await getScrollingElement(styles, controller);
+
+      await expect(prop(el, 'scrollWidth')).to.equal(pageWidth * SLIDE_COUNT);
+    });
+
+    // TODO(wg-bento, #24195): getScrollingElement does not always find element in time.
+    it.skip('should snap when scrolling', async () => {
+      const el = await getScrollingElement(styles, controller);
+      const firstSlide = await getSlide(styles, controller, 0);
+
+      const slideWidth = await prop(firstSlide, 'offsetWidth');
+      const scrollLeft = await prop(el, 'scrollLeft');
+      const snappedScrollLeft = scrollLeft + slideWidth;
+      const requestedScrollLeft = snappedScrollLeft + 1;
+
+      await controller.scrollTo(el, {left: requestedScrollLeft});
+      // We should have snapped to the edge of the slide rather than the
+      // requested scroll position.
+      await expect(prop(el, 'scrollLeft')).to.equal(snappedScrollLeft);
+    });
+
+    // TODO(wg-bento, #24195): Flaky
+    it.skip('should have the correct scroll position when resizing', async () => {
+      // Note: 513 seems to be the smallest settable width.
+      await controller.setWindowRect({
+        width: 800,
+        height: 600,
+      });
+
+      const firstSlide = await getSlide(styles, controller, 0);
+
+      await expect(controller.getElementRect(firstSlide)).to.include({
+        'x': 0,
+        'width': 800,
+      });
+
+      await controller.setWindowRect({
+        width: 900,
+        height: 600,
+      });
+
+      // Normally, resizing would cause the position to change. We're testing
+      // that the carousel moves this to the correct position again.
+      await expect(controller.getElementRect(firstSlide)).to.include({
+        'x': 0,
+        'width': 900,
+      });
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/1.0/test-e2e/test-responsive.js b/extensions/amp-base-carousel/1.0/test-e2e/test-responsive.js
new file mode 100644
index 0000000000000..a3470c9d94e60
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test-e2e/test-responsive.js
@@ -0,0 +1,119 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {getCarousel, getScrollingElement, getSlide, sleep} from './helpers';
+import {useStyles} from '../component.jss';
+
+const pageWidth = 1000;
+const pageHeight = 600;
+
+describes.endtoend(
+  'amp-base-carousel - responsive attributes',
+  {
+    version: '1.0',
+    fixture: 'amp-base-carousel/responsive.amp.html',
+    experiments: ['bento-carousel'],
+    initialRect: {width: pageWidth, height: pageHeight},
+    environments: ['single', 'viewer-demo'],
+  },
+  async (env) => {
+    const styles = useStyles();
+    let controller;
+    let carousel;
+
+    function prop(el, name) {
+      return controller.getElementProperty(el, name);
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+      carousel = await getCarousel(controller);
+      await controller.switchToShadowRoot(carousel);
+    });
+
+    it('should layout correctly initially', async () => {
+      const firstSlide = await getSlide(styles, controller, 0);
+
+      // 3 slides width width 1000 = 333 width per slide.
+      await expect(controller.getElementRect(firstSlide)).to.include({
+        width: 333,
+        x: 0,
+      });
+    });
+
+    it('should layout correctly after resize', async () => {
+      const firstSlide = await getSlide(styles, controller, 0);
+
+      await controller.setWindowRect({
+        width: 600,
+        height: 600,
+      });
+      // 2 slides width width 600 = 300 width per slide.
+      await expect(controller.getElementRect(firstSlide)).to.include({
+        width: 300,
+        x: 0,
+      });
+    });
+
+    it('should retain position when changing the visible count', async () => {
+      const el = await getScrollingElement(styles, controller);
+      const secondSlide = await getSlide(styles, controller, 1);
+
+      await controller.scrollTo(el, {left: 333});
+      await expect(prop(el, 'scrollLeft')).to.equal(333);
+
+      // Wait for render with updated active slide.
+      await sleep(100);
+      await controller.setWindowRect({
+        width: 600,
+        height: 600,
+      });
+
+      await expect(controller.getElementRect(secondSlide)).to.include({x: 0});
+    });
+
+    it('should respond to attribute changes', async () => {
+      const firstSlide = await getSlide(styles, controller, 0);
+
+      // 3 slides width width 1000 = 333 width per slide.
+      await expect(controller.getElementRect(firstSlide)).to.include({
+        width: 333,
+        x: 0,
+      });
+      // Switch over to `visible-count="(min-width: 650px) 5, 4".
+      await controller.switchToLight();
+      const btn = await controller.findElement('#responsive-5-4');
+      await controller.click(btn);
+      await controller.switchToShadowRoot(carousel);
+
+      // 5 slides width width 1000 = 200 width per slide
+      await expect(controller.getElementRect(firstSlide)).to.include({
+        width: 200,
+        x: 0,
+      });
+      // Now make sure new media query is active.
+      await controller.setWindowRect({
+        width: 600,
+        height: 600,
+      });
+      // 4 slides width width 600 = 150 width per slide.
+      await expect(controller.getElementRect(firstSlide)).to.include({
+        width: 150,
+        x: 0,
+      });
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/1.0/test-e2e/test-rtl.js b/extensions/amp-base-carousel/1.0/test-e2e/test-rtl.js
new file mode 100644
index 0000000000000..647d406f16d98
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test-e2e/test-rtl.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {getCarousel, getNextArrow, getPrevArrow, getSlide} from './helpers';
+import {useStyles} from '../component.jss';
+
+const pageWidth = 800;
+const pageHeight = 600;
+
+// TODO(wg-bento, #24195): getSlide/getArrow does not always find element in time.
+describes.endtoend(
+  'amp-base-carousel - rtl',
+  {
+    version: '1.0',
+    fixture: 'amp-base-carousel/basic-rtl.amp.html',
+    experiments: ['bento-carousel'],
+    initialRect: {width: pageWidth, height: pageHeight},
+    environments: ['single'],
+  },
+  async (env) => {
+    const styles = useStyles();
+
+    /** The total number of slides in the carousel */
+    const SLIDE_COUNT = 7;
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+      const carousel = await getCarousel(controller);
+      await controller.switchToShadowRoot(carousel);
+    });
+
+    it.skip('should place the second slide to the left', async () => {
+      const secondSlide = await getSlide(styles, controller, 1);
+      await expect(controller.getElementRect(secondSlide)).to.include({
+        left: -pageWidth,
+      });
+    });
+
+    it.skip('should place the last slide to the right', async () => {
+      const lastSlide = await getSlide(styles, controller, SLIDE_COUNT - 1);
+      await expect(controller.getElementRect(lastSlide)).to.include({
+        left: pageWidth,
+      });
+    });
+
+    it.skip('should place the arrows correctly', async () => {
+      const prevArrow = await getPrevArrow(styles, controller);
+      const nextArrow = await getNextArrow(styles, controller);
+      await expect(controller.getElementRect(prevArrow)).to.include({
+        right: pageWidth,
+      });
+      await expect(controller.getElementRect(nextArrow)).to.include({
+        left: 0,
+      });
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/1.0/test-e2e/test-vertical.js b/extensions/amp-base-carousel/1.0/test-e2e/test-vertical.js
new file mode 100644
index 0000000000000..748aab87cb0de
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test-e2e/test-vertical.js
@@ -0,0 +1,133 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {getCarousel, getScrollingElement, getSlide} from './helpers';
+import {useStyles} from '../component.jss';
+
+const pageWidth = 600;
+const pageHeight = 600;
+
+describes.endtoend(
+  'amp-base-carousel - vertical orientation',
+  {
+    version: '1.0',
+    fixture: 'amp-base-carousel/1.0/vertical.amp.html',
+    experiments: ['bento-carousel'],
+    initialRect: {width: pageWidth, height: pageHeight},
+    environments: ['single', 'viewer-demo'],
+  },
+  async (env) => {
+    /** The total number of slides in the carousel */
+    const SLIDE_COUNT = 7;
+    let controller;
+
+    const styles = useStyles();
+
+    function prop(el, name) {
+      return controller.getElementProperty(el, name);
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+      const carousel = await getCarousel(controller);
+      await controller.switchToShadowRoot(carousel);
+    });
+
+    // TODO(wg-bento, #24195): getScrollingElement does not always find element in time.
+    it.skip('should render correctly', async () => {
+      const el = await getScrollingElement(styles, controller);
+      const firstSlide = await getSlide(styles, controller, 0);
+
+      // We should have space for all slides
+      const slideHeight = await prop(firstSlide, 'offsetHeight');
+      await expect(prop(el, 'scrollHeight')).to.equal(
+        slideHeight * SLIDE_COUNT
+      );
+    });
+
+    // TODO(wg-bento, #24195): getScrollingElement does not always find element in time.
+    it.skip('should snap when scrolling', async () => {
+      const el = await getScrollingElement(styles, controller);
+      const firstSlide = await getSlide(styles, controller, 0);
+
+      const slideHeight = await prop(firstSlide, 'offsetHeight');
+      const scrollTop = await prop(el, 'scrollTop');
+      const snappedScrollTop = scrollTop + slideHeight;
+      const requestedScrollTop = snappedScrollTop + 1;
+
+      await controller.scrollTo(el, {top: requestedScrollTop});
+      // We should have snapped to the edge of the slide rather than the
+      // requested scroll position.
+      await expect(prop(el, 'scrollTop')).to.equal(snappedScrollTop);
+    });
+
+    // TODO(wg-bento, #24195): getScrollingElement does not always find element in time.
+    it.skip('should reset the window after scroll', async function () {
+      const el = await getScrollingElement(styles, controller);
+      const firstSlide = await getSlide(styles, controller, 0);
+
+      const slideHeight = await prop(firstSlide, 'offsetHeight');
+      const scrollHeight = await prop(el, 'scrollHeight');
+      const scrollTop = await prop(el, 'scrollTop');
+      const snappedScrollTop = scrollTop + slideHeight;
+      const requestedScrollTop = snappedScrollTop + 1;
+
+      await controller.scrollTo(el, {top: requestedScrollTop});
+      // Wait for the scrolling to settle
+      await expect(prop(el, 'scrollTop')).to.equal(snappedScrollTop);
+
+      // The new scroll width/left should eventually be the same as before,
+      // since the windowing should have been reset around the new element.
+      await expect(prop(el, 'scrollHeight')).to.equal(scrollHeight);
+      await expect(prop(el, 'scrollTop')).to.equal(scrollTop);
+    });
+
+    // TODO(wg-bento): getScrollingElement does not always find element in time.
+    describe.skip('looping', () => {
+      it('should display slides correctly when moving forwards', async () => {
+        const el = await getScrollingElement(styles, controller);
+        const lastSlide = await getSlide(styles, controller, SLIDE_COUNT - 1);
+
+        // Go to the last slide, wait for scrolling to move.
+        const slideHeight = await prop(lastSlide, 'offsetHeight');
+        const restingScrollTop = await prop(el, 'scrollTop');
+        await controller.scrollBy(el, {
+          top: slideHeight * (SLIDE_COUNT - 1),
+        });
+
+        await expect(prop(el, 'scrollTop')).to.equal(restingScrollTop);
+        await expect(controller.getElementRect(lastSlide)).to.include({
+          height: slideHeight,
+        });
+      });
+
+      it('should display slides correctly when moving backwards', async () => {
+        const el = await getScrollingElement(styles, controller);
+        const secondSlide = await getSlide(styles, controller, 1);
+
+        // Go to the last slide, wait for scrolling to move.
+        const slideHeight = await prop(secondSlide, 'offsetHeight');
+        const restingScrollTop = await prop(el, 'scrollTop');
+        await controller.scrollBy(el, {
+          top: -(slideHeight * (SLIDE_COUNT - 1)),
+        });
+
+        await expect(prop(el, 'scrollTop')).to.not.equal(restingScrollTop);
+        await expect(prop(el, 'scrollTop')).to.equal(restingScrollTop);
+      });
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/1.0/test/test-amp-base-carousel.js b/extensions/amp-base-carousel/1.0/test/test-amp-base-carousel.js
new file mode 100644
index 0000000000000..46364adc3e882
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test/test-amp-base-carousel.js
@@ -0,0 +1,435 @@
+/**
+ * Copyright 2020 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.
+ */
+import '../amp-base-carousel';
+import {ActionInvocation} from '../../../../src/service/action-impl';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
+import {
+  createElementWithAttributes,
+  waitForChildPromise,
+} from '../../../../src/dom';
+import {mod} from '../../../../src/core/math';
+import {setStyles} from '../../../../src/style';
+import {toArray} from '../../../../src/core/types/array';
+import {toggleExperiment} from '../../../../src/experiments';
+import {useStyles} from '../component.jss';
+import {waitFor, whenCalled} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-base-carousel:1.0',
+  {
+    amp: {
+      runtimeOn: true,
+      extensions: ['amp-base-carousel:1.0'],
+    },
+  },
+  (env) => {
+    let win;
+    let element;
+
+    const styles = useStyles();
+
+    async function getSlideWrappersFromShadow() {
+      await whenCalled(env.sandbox.spy(element, 'attachShadow'));
+      const shadow = element.shadowRoot;
+      await waitForChildPromise(shadow, (shadow) => {
+        return shadow.querySelectorAll('[class*=hideScrollbar]');
+      });
+      await waitFor(
+        () =>
+          shadow.querySelectorAll(`[class*=${styles.hideScrollbar}] `).length >
+          0,
+        'slots rendered'
+      );
+      return shadow.querySelectorAll(
+        `[class*=${styles.hideScrollbar}] [class*=${styles.slideElement}]`
+      );
+    }
+
+    async function getSlidesFromShadow() {
+      const wrappers = await getSlideWrappersFromShadow();
+      const slots = Array.from(wrappers)
+        .map((wrapper) => wrapper.querySelector('slot'))
+        .filter(Boolean);
+      return toArray(slots).reduce(
+        (acc, slot) => acc.concat(slot.assignedElements()),
+        []
+      );
+    }
+
+    /**
+     * @param {number} count
+     * @return {!Array<!Element>}
+     */
+    function setSlides(count) {
+      toArray(element.querySelectorAll('test-slide')).forEach((slide) =>
+        element.removeChild(slide)
+      );
+
+      const slides = new Array(count).fill(null).map((x, i) => {
+        const slide = document.createElement('div');
+        slide.className = 'test-slide';
+        setStyles(slide, {
+          flexShrink: '0',
+          height: '100px',
+          width: '100%',
+        });
+        slide.textContent = 'slide #' + (i + 1);
+        return slide;
+      });
+
+      slides.forEach((slide) => element.appendChild(slide));
+      return slides;
+    }
+
+    beforeEach(() => {
+      win = env.win;
+      toggleExperiment(win, 'bento-carousel', true, true);
+      element = createElementWithAttributes(win.document, 'amp-base-carousel', {
+        'layout': 'fixed',
+        'width': '300px',
+        'height': '200px',
+      });
+    });
+
+    afterEach(() => {
+      toggleExperiment(win, 'bento-carousel', false, true);
+    });
+
+    it('should render slides and arrows when built', async () => {
+      const userSuppliedChildren = setSlides(3);
+      userSuppliedChildren.forEach((child) => element.appendChild(child));
+      win.document.body.appendChild(element);
+
+      const renderedSlides = await getSlidesFromShadow();
+      expect(renderedSlides).to.have.ordered.members(userSuppliedChildren);
+      const buttons = element.shadowRoot.querySelectorAll('button');
+      expect(buttons).to.have.length(2);
+    });
+
+    it('should render custom arrows when given', async () => {
+      const customPrev = createElementWithAttributes(win.document, 'button', {
+        'slot': 'prev-arrow',
+      });
+      const customNext = createElementWithAttributes(win.document, 'button', {
+        'slot': 'next-arrow',
+      });
+      element.appendChild(customPrev);
+      element.appendChild(customNext);
+      const userSuppliedChildren = setSlides(3);
+      userSuppliedChildren.forEach((child) => element.appendChild(child));
+      win.document.body.appendChild(element);
+
+      const renderedSlides = await getSlidesFromShadow();
+      expect(renderedSlides).to.have.ordered.members(userSuppliedChildren);
+
+      const defaultButtons = element.shadowRoot.querySelectorAll('button');
+      expect(defaultButtons).to.have.length(0);
+
+      const slotButtons = element.shadowRoot.querySelectorAll(
+        'slot[name="prev-arrow"], slot[name="next-arrow"]'
+      );
+      expect(slotButtons).to.have.length(2);
+      expect(slotButtons[0].assignedElements()).to.have.ordered.members([
+        customPrev,
+      ]);
+      expect(slotButtons[1].assignedElements()).to.have.ordered.members([
+        customNext,
+      ]);
+    });
+
+    it('should render in preparation for looping with loop prop', async () => {
+      element.setAttribute('loop', '');
+      const userSuppliedChildren = setSlides(3);
+      userSuppliedChildren.forEach((child) => element.appendChild(child));
+      win.document.body.appendChild(element);
+
+      const renderedSlideWrappers = await getSlideWrappersFromShadow();
+      // Given slides [0][1][2] should be rendered as [2][0][1]. But [2] is
+      // a placeholder.
+      expect(renderedSlideWrappers).to.have.lengthOf(3);
+      expect(
+        renderedSlideWrappers[0].querySelector('slot').assignedElements()
+      ).to.deep.equal([userSuppliedChildren[2]]);
+      expect(
+        renderedSlideWrappers[1].querySelector('slot').assignedElements()
+      ).to.deep.equal([userSuppliedChildren[0]]);
+      expect(
+        renderedSlideWrappers[2].querySelector('slot').assignedElements()
+      ).to.deep.equal([userSuppliedChildren[1]]);
+    });
+
+    describe('snapping', () => {
+      it('should snap to slides by default', async () => {
+        const userSuppliedChildren = setSlides(3);
+        userSuppliedChildren.forEach((child) => element.appendChild(child));
+        win.document.body.appendChild(element);
+
+        const renderedSlideWrappers = await getSlideWrappersFromShadow();
+        expect(renderedSlideWrappers).to.have.lengthOf(3);
+        renderedSlideWrappers.forEach((slide) => {
+          expect(slide.classList.contains(styles.enableSnap)).to.be.true;
+        });
+      });
+
+      it('should snap to slides with snap attribute', async () => {
+        element.setAttribute('snap', '');
+        const userSuppliedChildren = setSlides(3);
+        userSuppliedChildren.forEach((child) => element.appendChild(child));
+        win.document.body.appendChild(element);
+
+        const renderedSlideWrappers = await getSlideWrappersFromShadow();
+        expect(renderedSlideWrappers).to.have.lengthOf(3);
+        renderedSlideWrappers.forEach((slide) => {
+          expect(slide.classList.contains(styles.enableSnap)).to.be.true;
+        });
+      });
+
+      it('should snap to slides with snap="true"', async () => {
+        element.setAttribute('snap', 'true');
+        const userSuppliedChildren = setSlides(3);
+        userSuppliedChildren.forEach((child) => element.appendChild(child));
+        win.document.body.appendChild(element);
+
+        const renderedSlideWrappers = await getSlideWrappersFromShadow();
+        expect(renderedSlideWrappers).to.have.lengthOf(3);
+        renderedSlideWrappers.forEach((slide) => {
+          expect(slide.classList.contains(styles.enableSnap)).to.be.true;
+        });
+      });
+
+      it('should not snap to slides with snap="false"', async () => {
+        element.setAttribute('snap', 'false');
+        const userSuppliedChildren = setSlides(3);
+        userSuppliedChildren.forEach((child) => element.appendChild(child));
+        win.document.body.appendChild(element);
+
+        const renderedSlideWrappers = await getSlideWrappersFromShadow();
+        expect(renderedSlideWrappers).to.have.lengthOf(3);
+        renderedSlideWrappers.forEach((slide) => {
+          expect(slide.classList.contains(styles.disableSnap)).to.be.true;
+        });
+      });
+
+      it('should only set snap on slides according to snap-by', async () => {
+        element.setAttribute('snap', '');
+        element.setAttribute('snap-by', '2');
+        const userSuppliedChildren = setSlides(4);
+        userSuppliedChildren.forEach((child) => element.appendChild(child));
+        win.document.body.appendChild(element);
+
+        const renderedSlideWrappers = await getSlideWrappersFromShadow();
+        expect(renderedSlideWrappers).to.have.lengthOf(4);
+        renderedSlideWrappers.forEach((slide, index) => {
+          if (mod(index, 2) === 0) {
+            expect(slide.classList.contains(styles.enableSnap)).to.be.true;
+            expect(slide.classList.contains(styles.disableSnap)).to.be.false;
+          } else {
+            expect(slide.classList.contains(styles.enableSnap)).to.be.false;
+            expect(slide.classList.contains(styles.disableSnap)).to.be.true;
+          }
+        });
+      });
+    });
+
+    it('should fire DOM event', async () => {
+      const userSuppliedChildren = setSlides(3);
+      userSuppliedChildren.forEach((child) => element.appendChild(child));
+      win.document.body.appendChild(element);
+      await getSlidesFromShadow();
+
+      const eventSpy = env.sandbox.spy();
+      element.addEventListener('slideChange', eventSpy);
+      element.setAttribute('slide', '1');
+
+      await waitFor(() => eventSpy.callCount > 0, 'event fired');
+      expect(eventSpy).to.be.calledOnce;
+      expect(eventSpy.firstCall).calledWithMatch({
+        'data': {
+          'index': 1,
+        },
+      });
+    });
+
+    describe('imperative api', () => {
+      let scroller;
+      let slides;
+
+      beforeEach(async () => {
+        const userSuppliedChildren = setSlides(3);
+        userSuppliedChildren.forEach((child) => element.appendChild(child));
+        win.document.body.appendChild(element);
+        slides = await getSlidesFromShadow();
+
+        scroller = element.shadowRoot.querySelector(
+          `[class*=${styles.scrollContainer}]`
+        );
+      });
+
+      afterEach(() => {
+        win.document.body.removeChild(element);
+      });
+
+      function invocation(method, args = {}) {
+        const source = null;
+        const caller = null;
+        const event = null;
+        const trust = ActionTrust.DEFAULT;
+        return new ActionInvocation(
+          element,
+          method,
+          args,
+          source,
+          caller,
+          event,
+          trust
+        );
+      }
+
+      it('should execute next and prev actions', async () => {
+        element.enqueAction(invocation('next'));
+        await waitFor(
+          () => scroller.scrollLeft === slides[1].offsetLeft,
+          'advanced to next slide'
+        );
+
+        element.enqueAction(invocation('prev'));
+        await waitFor(
+          () => scroller.scrollLeft === slides[0].offsetLeft,
+          'returned to prev slide'
+        );
+      });
+
+      it('should execute goToSlide action', async () => {
+        element.enqueAction(invocation('goToSlide', {index: 1}));
+        await waitFor(() => scroller.scrollLeft > 0, 'to slide 1');
+
+        element.enqueAction(invocation('goToSlide', {index: 0}));
+        await waitFor(
+          () => scroller.scrollLeft == 0,
+          'returned to first slide'
+        );
+      });
+    });
+
+    it('should render arrows when controls=always', async () => {
+      element.setAttribute('controls', 'always');
+      const userSuppliedChildren = setSlides(3);
+      userSuppliedChildren.forEach((child) => element.appendChild(child));
+      win.document.body.appendChild(element);
+
+      const renderedSlides = await getSlidesFromShadow();
+      expect(renderedSlides).to.have.ordered.members(userSuppliedChildren);
+      const buttons = element.shadowRoot.querySelectorAll('button');
+      expect(buttons).to.have.length(2);
+    });
+
+    it('should not render arrows when controls=never', async () => {
+      element.setAttribute('controls', 'never');
+      const userSuppliedChildren = setSlides(3);
+      userSuppliedChildren.forEach((child) => element.appendChild(child));
+      win.document.body.appendChild(element);
+
+      const renderedSlides = await getSlidesFromShadow();
+      expect(renderedSlides).to.have.ordered.members(userSuppliedChildren);
+      const buttons = element.shadowRoot.querySelectorAll('button');
+      expect(buttons).to.have.length(0);
+    });
+
+    it('should go to slide 0 when index is set to 0', async () => {
+      const userSuppliedChildren = setSlides(3);
+      userSuppliedChildren.forEach((child) => element.appendChild(child));
+      win.document.body.appendChild(element);
+      await getSlidesFromShadow();
+
+      const scroller = element.shadowRoot.querySelector(
+        `[class*=${styles.scrollContainer}]`
+      );
+
+      function invocation(method, args = {}) {
+        const source = null;
+        const caller = null;
+        const event = null;
+        const trust = ActionTrust.DEFAULT;
+        return new ActionInvocation(
+          element,
+          method,
+          args,
+          source,
+          caller,
+          event,
+          trust
+        );
+      }
+
+      element.enqueAction(invocation('goToSlide', {index: 1}));
+      await waitFor(() => scroller.scrollLeft > 0, 'go to slide 1');
+
+      element.enqueAction(invocation('goToSlide', {index: 0}));
+      await waitFor(() => scroller.scrollLeft == 0, 'returned to first slide');
+    });
+
+    it('should go to slide 0 when slide attr is mutated to 0', async () => {
+      const userSuppliedChildren = setSlides(3);
+      userSuppliedChildren.forEach((child) => element.appendChild(child));
+      win.document.body.appendChild(element);
+      await getSlidesFromShadow();
+
+      const scroller = element.shadowRoot.querySelector(
+        `[class*=${styles.scrollContainer}]`
+      );
+
+      element.setAttribute('slide', '1');
+      await waitFor(() => scroller.scrollLeft > 0, 'go to slide 1');
+
+      element.setAttribute('slide', '0');
+      await waitFor(() => scroller.scrollLeft == 0, 'returned to first slide');
+    });
+
+    it('should start at slide 1 with slide attr set to 1', async () => {
+      element.setAttribute('slide', '1');
+      const userSuppliedChildren = setSlides(3);
+      userSuppliedChildren.forEach((child) => element.appendChild(child));
+      win.document.body.appendChild(element);
+      await getSlidesFromShadow();
+
+      const scroller = element.shadowRoot.querySelector(
+        `[class*=${styles.scrollContainer}]`
+      );
+      await waitFor(() => scroller.scrollLeft > 0, 'render at slide 1');
+    });
+
+    it('should respect outset-arrows even if controls=never', async () => {
+      element.setAttribute('controls', 'never');
+      element.setAttribute('outset-arrows', '');
+      const userSuppliedChildren = setSlides(3);
+      userSuppliedChildren.forEach((child) => element.appendChild(child));
+      win.document.body.appendChild(element);
+
+      await whenCalled(env.sandbox.spy(element, 'attachShadow'));
+      const shadow = element.shadowRoot;
+
+      // Container is 300px and arrows each take up 50px after padding
+      expect(element.offsetWidth).to.equal(300);
+      const scroller = shadow.querySelector(`[class*=${styles.hideScrollbar}]`);
+      expect(scroller.offsetWidth).to.equal(200);
+
+      const prevButton = shadow.querySelector(`[class*=${styles.arrowPrev}]`);
+      expect(prevButton.offsetWidth).to.equal(36);
+      const nextButton = shadow.querySelector(`[class*=${styles.arrowNext}]`);
+      expect(nextButton.offsetWidth).to.equal(36);
+    });
+  }
+);
diff --git a/extensions/amp-base-carousel/1.0/test/test-component.js b/extensions/amp-base-carousel/1.0/test/test-component.js
new file mode 100644
index 0000000000000..6f27ac5279800
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test/test-component.js
@@ -0,0 +1,174 @@
+/**
+ * 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {BaseCarousel} from '../component';
+import {mount} from 'enzyme';
+import {useStyles} from '../component.jss';
+
+describes.sandboxed('BaseCarousel preact component', {}, () => {
+  const styles = useStyles();
+
+  it('should render Arrows and propagates children to Scroller', () => {
+    const wrapper = mount(
+      <BaseCarousel>
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </BaseCarousel>
+    );
+    expect(wrapper.find('Arrow')).to.have.lengthOf(2);
+
+    const slides = wrapper.find('[data-slide]');
+    expect(slides).to.have.lengthOf(3);
+
+    expect(slides.first().text()).to.equal('slide 1');
+    expect(slides.at(1).text()).to.equal('slide 2');
+    expect(slides.last().text()).to.equal('slide 3');
+  });
+
+  it('should render custom Arrows when given', () => {
+    const arrowPrev = (props) => (
+      <div {...props} className="my-custom-arrow-prev">
+        left
+      </div>
+    );
+    const arrowNext = (props) => (
+      <div {...props} className="my-custom-arrow-next">
+        right
+      </div>
+    );
+    const wrapper = mount(
+      <BaseCarousel arrowPrevAs={arrowPrev} arrowNextAs={arrowNext}>
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </BaseCarousel>
+    );
+    const arrows = wrapper.find('Arrow');
+    expect(arrows).to.have.lengthOf(2);
+    expect(arrows.first().props().as).to.equal(arrowPrev);
+    expect(arrows.last().props().as).to.equal(arrowNext);
+  });
+
+  it('should not loop by default', () => {
+    const wrapper = mount(
+      <BaseCarousel>
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </BaseCarousel>
+    );
+    const slides = wrapper.find('[data-slide]');
+    expect(slides).to.have.lengthOf(3);
+
+    // Given slides [1][2][3] should be rendered as is, but [3] is a
+    // placeholder.
+    expect(slides.first().text()).to.equal('slide 1');
+    expect(slides.at(1).text()).to.equal('slide 2');
+    expect(slides.last().text()).to.equal('slide 3');
+  });
+
+  it('should render in preparation for looping with loop prop', () => {
+    const wrapper = mount(
+      <BaseCarousel loop>
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </BaseCarousel>
+    );
+    const slides = wrapper.find('[data-slide]');
+    expect(slides).to.have.lengthOf(3);
+
+    // Given slides [1][2][3] should be rendered as [3][1][2]. But [3] is a
+    // placeholder.
+    expect(slides.at(0).text()).to.equal('slide 3');
+    expect(slides.at(1).text()).to.equal('slide 1');
+    expect(slides.at(2).text()).to.equal('slide 2');
+  });
+
+  it('should snap to slides by default', () => {
+    const wrapper = mount(
+      <BaseCarousel>
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </BaseCarousel>
+    );
+    expect(wrapper.find(`[snap="true"]`)).not.to.be.null;
+    expect(wrapper.find(`.${styles.enableSnap}`)).to.have.lengthOf(3);
+  });
+
+  it('should not snap to slides with snap={false}', () => {
+    const wrapper = mount(
+      <BaseCarousel snap={false}>
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </BaseCarousel>
+    );
+    expect(wrapper.find(`[snap="false"]`)).not.to.be.null;
+    expect(wrapper.find(`.${styles.disableSnap}`)).to.have.lengthOf(3);
+  });
+
+  it('should render Arrows with controls=always', () => {
+    const wrapper = mount(
+      <BaseCarousel controls="always">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </BaseCarousel>
+    );
+    expect(wrapper.find('Arrow')).to.have.lengthOf(2);
+  });
+
+  it('should render Arrows with controls=never and outset-arrows', () => {
+    const wrapper = mount(
+      <BaseCarousel controls="never" outsetArrows>
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </BaseCarousel>
+    );
+    expect(wrapper.find('Arrow')).to.have.lengthOf(2);
+  });
+
+  it('should not render Arrows with controls=never', () => {
+    const wrapper = mount(
+      <BaseCarousel controls="never">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </BaseCarousel>
+    );
+    expect(wrapper.find('Arrow')).to.have.lengthOf(0);
+  });
+
+  it('should respect snap-by if snapping', () => {
+    const wrapper = mount(
+      <BaseCarousel snapBy={2} controls="never">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+        <div>slide 4</div>
+      </BaseCarousel>
+    );
+    const snapEnabledSlides = wrapper.find(`.${styles.enableSnap}`);
+    expect(snapEnabledSlides).to.have.lengthOf(2);
+    expect(snapEnabledSlides.at(0).text()).to.equal('slide 1');
+    expect(snapEnabledSlides.at(1).text()).to.equal('slide 3');
+  });
+});
diff --git a/extensions/amp-base-carousel/1.0/test/validator-amp-base-carousel.html b/extensions/amp-base-carousel/1.0/test/validator-amp-base-carousel.html
new file mode 100644
index 0000000000000..7b0b66ca155ac
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test/validator-amp-base-carousel.html
@@ -0,0 +1,159 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-base-carousel tag. See the inline comments.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js"></script>
+</head>
+<body>
+  <!-- Boolean values -->
+  <section>
+    <!-- Valid: true -->
+    <amp-base-carousel width="4" height="3" auto-advance="true">
+    </amp-base-carousel>
+    <!-- Valid: false -->
+    <amp-base-carousel width="4" height="3" auto-advance="false">
+    </amp-base-carousel>
+    <!-- Valid: booleans with a media query -->
+    <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true, false">
+    </amp-base-carousel>
+    <!-- Valid: booleans with multiple media queries -->
+    <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true, (max-height: 1000px) true, false">
+    </amp-base-carousel>
+    <!-- Invalid: no default value-->
+    <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true">
+    </amp-base-carousel>
+    <!-- Invalid: no value -->
+    <amp-base-carousel width="4" height="3" auto-advance>
+    </amp-base-carousel>
+    <!-- Invalid: incorrect value -->
+    <amp-base-carousel width="4" height="3" auto-advance="5">
+    </amp-base-carousel>
+    <!-- Invalid: incorrect in media query -->
+    <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true, (max-height: 1000px) 5, false">
+    </amp-base-carousel>
+  </section>
+
+  <!-- Integer values-->
+  <section>
+    <!-- Valid: positive integer value -->
+    <amp-base-carousel width="4" height="3" advance-count="2">
+    </amp-base-carousel>
+    <!-- Valid: negative integer value -->
+    <amp-base-carousel width="4" height="3" advance-count="-2">
+    </amp-base-carousel>
+    <!-- Valid: integer values with media queries -->
+    <amp-base-carousel width="4" height="3" advance-count="(min-width: 800px) 3, 1">
+    </amp-base-carousel>
+    <!-- Valid: integer values with multiple media queries -->
+    <amp-base-carousel width="4" height="3" advance-count="(min-width: 800px) -3, (max-height: 1000px) 3, 1">
+    </amp-base-carousel>
+    <!-- Invalid: no default value-->
+    <amp-base-carousel width="4" height="3" advance-count="(min-width: 800px) 3">
+    </amp-base-carousel>
+    <!-- Invalid: no value -->
+    <amp-base-carousel width="4" height="3" advance-count>
+    </amp-base-carousel>
+    <!-- Invalid: floating point value -->
+    <amp-base-carousel width="4" height="3" advance-count="3.2">
+    </amp-base-carousel>
+    <!-- Invalid: floating point value in media query -->
+    <amp-base-carousel width="4" height="3" advance-count="(min-width: 800px) -3, (max-height: 1000px) 3.2, 1">
+    </amp-base-carousel>
+  </section>
+
+  <!-- Positive float values-->
+  <section>
+    <!-- Valid: integer value -->
+    <amp-base-carousel width="4" height="3" visible-count="2">
+    </amp-base-carousel>
+    <!-- Valid: floating point value -->
+    <amp-base-carousel width="4" height="3" visible-count="3.2">
+    </amp-base-carousel>
+    <!-- Valid: mixed value with one media query -->
+    <amp-base-carousel width="4" height="3" visible-count="(min-width: 800px) 3.2, 1">
+    </amp-base-carousel>
+    <!-- Valid: mixed values with multiple media queries -->
+    <amp-base-carousel width="4" height="3" visible-count="(min-width: 800px) 3, (max-height: 1000px) 3, 1.1">
+    </amp-base-carousel>
+    <!-- Invalid: negative integer value -->
+    <amp-base-carousel width="4" height="3" visible-count="-2">
+    </amp-base-carousel>
+    <!-- Invalid: no default value-->
+    <amp-base-carousel width="4" height="3" visible-count="(min-width: 800px) 3">
+    </amp-base-carousel>
+    <!-- Invalid: no value -->
+    <amp-base-carousel width="4" height="3" visible-count>
+    </amp-base-carousel>
+    <!-- Invalid: string value -->
+    <amp-base-carousel width="4" height="3" visible-count="foo">
+    </amp-base-carousel>
+    <!-- Invalid: negative value in media query -->
+    <amp-base-carousel width="4" height="3" visible-count="(min-width: 800px) -3, (max-height: 1000px) 3, 1">
+    </amp-base-carousel>
+  </section>
+
+  <!-- String values -->
+  <section>
+    <!-- Valid: horizontal -->
+    <amp-base-carousel width="4" height="3" orientation="horizontal">
+    </amp-base-carousel>
+    <!-- Valid: vertical -->
+    <amp-base-carousel width="4" height="3" orientation="vertical">
+    </amp-base-carousel>
+    <!-- Valid: strings with a media query -->
+    <amp-base-carousel width="4" height="3" orientation="(min-width: 800px) horizontal, vertical">
+    </amp-base-carousel>
+    <!-- Valid: strings with multiple media queries -->
+    <amp-base-carousel width="4" height="3" orientation="(min-width: 800px) horizontal, (max-height: 1000px) horizontal, vertical">
+    </amp-base-carousel>
+    <!-- Invalid: no default value-->
+    <amp-base-carousel width="4" height="3" orientation="(min-width: 800px) horizontal">
+    </amp-base-carousel>
+    <!-- Invalid: no value -->
+    <amp-base-carousel width="4" height="3" orientation>
+    </amp-base-carousel>
+    <!-- Invalid: incorrect value -->
+    <amp-base-carousel width="4" height="3" orientation="true">
+    </amp-base-carousel>
+    <!-- Invalid: incorrect in media query -->
+    <amp-base-carousel width="4" height="3" orientation="(min-width: 800px) vertical, (max-height: 1000px) true, horizontal">
+    </amp-base-carousel>
+  </section>
+
+  <!-- Spaces-->
+  <section>
+    <!-- Valid: spaces between groups -->
+    <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true, false">
+    </amp-base-carousel>
+    <!-- Valid: no spaces between groups -->
+    <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true,(max-height: 1000px) true,false">
+    </amp-base-carousel>
+    <!-- Invalid: no space between media query and value -->
+    <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px)true, false">
+    </amp-base-carousel>
+  </section>
+</body>
+</html>
diff --git a/extensions/amp-base-carousel/1.0/test/validator-amp-base-carousel.out b/extensions/amp-base-carousel/1.0/test/validator-amp-base-carousel.out
new file mode 100644
index 0000000000000..2ba0965a91d78
--- /dev/null
+++ b/extensions/amp-base-carousel/1.0/test/validator-amp-base-carousel.out
@@ -0,0 +1,196 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-base-carousel tag. See the inline comments.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js"></script>
+|  </head>
+|  <body>
+|    <!-- Boolean values -->
+|    <section>
+|      <!-- Valid: true -->
+|      <amp-base-carousel width="4" height="3" auto-advance="true">
+|      </amp-base-carousel>
+|      <!-- Valid: false -->
+|      <amp-base-carousel width="4" height="3" auto-advance="false">
+|      </amp-base-carousel>
+|      <!-- Valid: booleans with a media query -->
+|      <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true, false">
+|      </amp-base-carousel>
+|      <!-- Valid: booleans with multiple media queries -->
+|      <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true, (max-height: 1000px) true, false">
+|      </amp-base-carousel>
+|      <!-- Invalid: no default value-->
+|      <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:46:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) true'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|      <!-- Invalid: no value -->
+|      <amp-base-carousel width="4" height="3" auto-advance>
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:49:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|      <!-- Invalid: incorrect value -->
+|      <amp-base-carousel width="4" height="3" auto-advance="5">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:52:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value '5'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|      <!-- Invalid: incorrect in media query -->
+|      <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true, (max-height: 1000px) 5, false">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:55:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) true, (max-height: 1000px) 5, false'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|    </section>
+|
+|    <!-- Integer values-->
+|    <section>
+|      <!-- Valid: positive integer value -->
+|      <amp-base-carousel width="4" height="3" advance-count="2">
+|      </amp-base-carousel>
+|      <!-- Valid: negative integer value -->
+|      <amp-base-carousel width="4" height="3" advance-count="-2">
+|      </amp-base-carousel>
+|      <!-- Valid: integer values with media queries -->
+|      <amp-base-carousel width="4" height="3" advance-count="(min-width: 800px) 3, 1">
+|      </amp-base-carousel>
+|      <!-- Valid: integer values with multiple media queries -->
+|      <amp-base-carousel width="4" height="3" advance-count="(min-width: 800px) -3, (max-height: 1000px) 3, 1">
+|      </amp-base-carousel>
+|      <!-- Invalid: no default value-->
+|      <amp-base-carousel width="4" height="3" advance-count="(min-width: 800px) 3">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:74:4 The attribute 'advance-count' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) 3'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|      <!-- Invalid: no value -->
+|      <amp-base-carousel width="4" height="3" advance-count>
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:77:4 The attribute 'advance-count' in tag 'amp-base-carousel' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|      <!-- Invalid: floating point value -->
+|      <amp-base-carousel width="4" height="3" advance-count="3.2">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:80:4 The attribute 'advance-count' in tag 'amp-base-carousel' is set to the invalid value '3.2'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|      <!-- Invalid: floating point value in media query -->
+|      <amp-base-carousel width="4" height="3" advance-count="(min-width: 800px) -3, (max-height: 1000px) 3.2, 1">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:83:4 The attribute 'advance-count' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) -3, (max-height: 1000px) 3.2, 1'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|    </section>
+|
+|    <!-- Positive float values-->
+|    <section>
+|      <!-- Valid: integer value -->
+|      <amp-base-carousel width="4" height="3" visible-count="2">
+|      </amp-base-carousel>
+|      <!-- Valid: floating point value -->
+|      <amp-base-carousel width="4" height="3" visible-count="3.2">
+|      </amp-base-carousel>
+|      <!-- Valid: mixed value with one media query -->
+|      <amp-base-carousel width="4" height="3" visible-count="(min-width: 800px) 3.2, 1">
+|      </amp-base-carousel>
+|      <!-- Valid: mixed values with multiple media queries -->
+|      <amp-base-carousel width="4" height="3" visible-count="(min-width: 800px) 3, (max-height: 1000px) 3, 1.1">
+|      </amp-base-carousel>
+|      <!-- Invalid: negative integer value -->
+|      <amp-base-carousel width="4" height="3" visible-count="-2">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:102:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value '-2'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|      <!-- Invalid: no default value-->
+|      <amp-base-carousel width="4" height="3" visible-count="(min-width: 800px) 3">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:105:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) 3'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|      <!-- Invalid: no value -->
+|      <amp-base-carousel width="4" height="3" visible-count>
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:108:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|      <!-- Invalid: string value -->
+|      <amp-base-carousel width="4" height="3" visible-count="foo">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:111:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value 'foo'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|      <!-- Invalid: negative value in media query -->
+|      <amp-base-carousel width="4" height="3" visible-count="(min-width: 800px) -3, (max-height: 1000px) 3, 1">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:114:4 The attribute 'visible-count' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) -3, (max-height: 1000px) 3, 1'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|    </section>
+|
+|    <!-- String values -->
+|    <section>
+|      <!-- Valid: horizontal -->
+|      <amp-base-carousel width="4" height="3" orientation="horizontal">
+|      </amp-base-carousel>
+|      <!-- Valid: vertical -->
+|      <amp-base-carousel width="4" height="3" orientation="vertical">
+|      </amp-base-carousel>
+|      <!-- Valid: strings with a media query -->
+|      <amp-base-carousel width="4" height="3" orientation="(min-width: 800px) horizontal, vertical">
+|      </amp-base-carousel>
+|      <!-- Valid: strings with multiple media queries -->
+|      <amp-base-carousel width="4" height="3" orientation="(min-width: 800px) horizontal, (max-height: 1000px) horizontal, vertical">
+|      </amp-base-carousel>
+|      <!-- Invalid: no default value-->
+|      <amp-base-carousel width="4" height="3" orientation="(min-width: 800px) horizontal">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:133:4 The attribute 'orientation' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) horizontal'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|      <!-- Invalid: no value -->
+|      <amp-base-carousel width="4" height="3" orientation>
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:136:4 The attribute 'orientation' in tag 'amp-base-carousel' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|      <!-- Invalid: incorrect value -->
+|      <amp-base-carousel width="4" height="3" orientation="true">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:139:4 The attribute 'orientation' in tag 'amp-base-carousel' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|      <!-- Invalid: incorrect in media query -->
+|      <amp-base-carousel width="4" height="3" orientation="(min-width: 800px) vertical, (max-height: 1000px) true, horizontal">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:142:4 The attribute 'orientation' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px) vertical, (max-height: 1000px) true, horizontal'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|    </section>
+|
+|    <!-- Spaces-->
+|    <section>
+|      <!-- Valid: spaces between groups -->
+|      <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true, false">
+|      </amp-base-carousel>
+|      <!-- Valid: no spaces between groups -->
+|      <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px) true,(max-height: 1000px) true,false">
+|      </amp-base-carousel>
+|      <!-- Invalid: no space between media query and value -->
+|      <amp-base-carousel width="4" height="3" auto-advance="(min-width: 800px)true, false">
+>>     ^~~~~~~~~
+amp-base-carousel/1.0/test/validator-amp-base-carousel.html:155:4 The attribute 'auto-advance' in tag 'amp-base-carousel' is set to the invalid value '(min-width: 800px)true, false'. (see https://amp.dev/documentation/components/amp-base-carousel/)
+|      </amp-base-carousel>
+|    </section>
+|  </body>
+|  </html>
diff --git a/extensions/amp-base-carousel/OWNERS b/extensions/amp-base-carousel/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-base-carousel/OWNERS
+++ b/extensions/amp-base-carousel/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-base-carousel/amp-base-carousel.md b/extensions/amp-base-carousel/amp-base-carousel.md
index 5ddbdf60316af..d545bd683e17c 100644
--- a/extensions/amp-base-carousel/amp-base-carousel.md
+++ b/extensions/amp-base-carousel/amp-base-carousel.md
@@ -5,10 +5,11 @@ formats:
 teaser:
   text: Displays multiple similar pieces of content along a horizontal axis or vertical axis.
 experimental: true
+bento: true
 ---
 
 <!---
-Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+Copyright 2021 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.
@@ -25,142 +26,356 @@ limitations under the License.
 
 # amp-base-carousel
 
-A generic carousel for displaying multiple similar pieces of content along a horizontal or vertical axis.
+## Usage
 
-## Behavior
+A generic carousel for displaying multiple similar pieces of content along a
+horizontal or vertical axis.
 
-Each of the `amp-base-carousel` component’s immediate children is considered an item in the carousel. Each of these nodes may also have arbitrary HTML children.
+Each of the `amp-base-carousel` component’s immediate children is considered an
+item in the carousel. Each of these nodes may also have arbitrary HTML children.
 
-The carousel consists of an arbitrary number of items, as well as optional navigational arrows to go forward or backwards a single item.
+The carousel consists of an arbitrary number of items, as well as optional
+navigational arrows to go forward or backwards a single item.
 
-The carousel advances between items if the user swipes or uses the customizable arrow buttons.
+The carousel advances between items if the user swipes or uses the customizable
+arrow buttons.
 
-## Attributes
+### Standalone use outside valid AMP documents
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+#### Example
 
-### Using Media Queries
+The example below demonstrates `amp-base-carousel` component in standalone use.
 
-The attributes for `<amp-base-carousel>` can be configured to use different options based on a media query. You can also use a value without any media queries. The format looks like:
+[example preview="top-frame" playground="false"]
 
 ```html
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css">
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js"></script>
+  <style>
+    amp-base-carousel, amp-base-carousel > div {
+      aspect-ratio: 4/1;
+    }
+    .red-gradient {
+      background: brown;
+      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);
+    }
+    .blue-gradient {
+      background: steelblue;
+      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);
+    }
+    .green-gradient {
+      background: seagreen;
+      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);
+    }
+  </style>
+</head>
+<amp-base-carousel id="my-carousel">
+  <div class="red-gradient"></div>
+  <div class="blue-gradient"></div>
+  <div class="green-gradient"></div>
+</amp-base-carousel>
+<div class="buttons" style="margin-top: 8px;">
+  <button id='prev-button'>Go to previous slide</button>
+  <button id='next-button'>Go to next slide</button>
+  <button id='go-to-button'>Go to slide with green gradient</button>
+</div>
+
+<script>
+  (async () => {
+    const carousel = document.querySelector('#my-carousel');
+    await customElements.whenDefined('amp-base-carousel');
+    const api = await carousel.getApi();
+
+    // programatically advance to next slide
+    api.next();
+
+    // set up button actions
+    document.querySelector('#prev-button').onclick = () => api.prev();
+    document.querySelector('#next-button').onclick = () => api.next();
+    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);
+  })();
+</script>
+```
+
+[/example]
+
+#### Interactivity and API usage
+
+Bento enabled components in standalone use are highly interactive through their API. In Bento standalone use, the element's API replaces AMP Actions and events and [`amp-bind`](https://amp.dev/documentation/components/amp-bind/?format=websites).
+
+The `amp-base-carousel` component API is accessible by including the following script tag in your document:
+
+```
+await customElements.whenDefined('amp-base-carousel');
+const api = await carousel.getApi();
+```
+
+##### Actions
+
+The `amp-base-carousel` API allows you to perform the following actions:
+
+**next()**
+Moves the carousel forwards by `advance-count` slides.
+
+```
+api.next();
+```
+
+**prev()**
+Moves the carousel backwards by `advance-count` slides.
+
+```
+api.prev();
+```
+
+**goToSlide(index: number)**
+Moves the carousel to the slide specified by the `index` argument.
+Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.
+
+```
+api.goToSlide(0); // Advance to first slide.
+api.goToSlide(length - 1); // Advance to last slide.
+```
+
+##### Events
+
+The `amp-base-carousel` API allows you to register and respond to the following events:
+
+**slideChange**
+
+This event is triggered when the index displayed by the carousel has changed.
+The new index is available via `event.data.index`.
+
+```
+carousel.addEventListener('slideChange', (e) => console.log(e.data.index))
+```
+
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
+
+**Container type**
+
+The `amp-base-carousel` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):
+
+```css
+amp-base-carousel {
+  height: 100px;
+  width: 100%;
+}
+
+amp-base-carousel > * {
+  aspect-ratio: 4/1
+}
+```
+
+### Behavior users should be aware of
+
+#### RTL
+
+`<amp-base-carousel>` currently requires that you let it know when it is in an
+right-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will
+generally work without this, there may be a few bugs. You can let the carousel
+know that it should operate as `rtl` as follows:
+
+```html
+<amp-base-carousel dir="rtl" …>
+  …
+</amp-base-carousel>
+```
+
+If the carousel is in a RTL context, and you want the carousel to operate as
+LTR, you can explicitly set the `dir="ltr"` on the carousel.
+
+#### Slide layout
+
+Slides are automatically sized by the carousel when **not** specifying
+`mixed-lengths`. You should give the slides `layout="flex-item"`:
+
+```html
+<amp-base-carousel …>
+  <amp-img layout="flex-item" src="…"></amp-img>
+</amp-base-carousel>
+```
+
+The slides have a default height of `100%` when the carousel is laid out
+horizontally. This can easily be changed with CSS or by using
+`layout="fixed-height"`. When specifying the height, the slide will be
+vertically centered within the carousel.
+
+If you want to horizontally center your slide content, you will want to create a
+wrapping element, and use that to center the content.
+
+#### Number of Visible Slides
+
+When changing the number of visible slides using `visible-slides`, in response
+to a media query, you will likely want to change the aspect ratio of the
+carousel itself to match the new number of visible slides. For example, if you
+want to show three slides at a time with a one by one aspect ratio, you would
+want an aspect ratio of three by one for the carousel itself. Similiarly, with
+four slides at a time you would want an aspect ratio of four by one. In
+addition, when changing `visible-slides`, you likely want to change
+`advance-count`.
+
+```html
+<!-- Using an aspect ratio of 3:2 for the slides in this example. -->
 <amp-base-carousel
-  attr-name="(min-width: 1000px) valueOne, (min-width: 600px) valueTwo, defaultValue"
-></amp-base-carousel>
+  layout="responsive"
+  width="3"
+  height="1"
+  heights="(min-width: 600px) calc(100% * 4 * 3 / 2), calc(100% * 3 * 3 / 2)"
+  visible-count="(min-width: 600px) 4, 3"
+  advance-count="(min-width: 600px) 4, 3"
+>
+  <amp-img layout="flex-item" src="…"></amp-img>
+  …
+</amp-base-carousel>
 ```
 
-The media queries are evaluated from left to right, with the first matching media query being used. A default value (without a media query) is required. In this case, if the page has a screen width of 1000px or more, `valueOne` is used. If the width is between 999px and 600px, `valueTwo` is used. When it is 599px or smaller, `defaultValue` is used.
+## Attributes
+
+### Media Queries
+
+The attributes for `<amp-base-carousel>` can be configured to use different
+options based on a [media query](./../../docs/spec/amp-html-responsive-attributes.md).
 
 ### Configuration Options
 
 #### Number of Visible Slides
 
-<table>
-  <tr>
-    <td width="40%"><strong><code>mixed-length</code></strong></td>
-    <td>Either <code>true</code> or <code>false</code>, defaults to <code>false</code>. When true, uses the existing width (or height when horizontal) for each of the slides. This allows for a carousel with slides of different widths to be used.
-  </tr>
-  <tr>
-    <td width="40%"><strong><code>visible-count</code></strong></td>
-    <td>A number, defaults to <code>1</code>. Determines how many slides should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible. This option is ignored when <code>mixed-length</code> is <code>true</code>.
-  </tr>
-  <tr>
-    <td width="40%"><strong><code>advance-count</code></strong></td>
-    <td>A number, defaults to <code>1</code>. Determines how many slides the carousel will advance when advancing using the previous or next arrows. This is useful when specifying the <code>visible-count</code> attribute.
-  </tr>
-</table>
+##### mixed-length
+
+Either `true` or `false`, defaults to `false`. When true, uses the existing
+width (or height when horizontal) for each of the slides. This allows for a
+carousel with slides of different widths to be used.
+
+##### visible-count
+
+A number, defaults to `1`. Determines how many slides should be shown at a given
+time. Fractional values can be used to make part of a(n) additional slide(s)
+visible. This option is ignored when `mixed-length` is `true`.
+
+##### advance-count
+
+A number, defaults to `1`. Determines how many slides the carousel will advance
+when advancing using the previous or next arrows. This is useful when specifying
+the `visible-count` attribute.
 
 #### Auto Advance
 
-<table>
-  <tr>
-    <td width="40%"><strong><code>auto-advance</code></strong></td>
-    <td>Either <code>true</code> or <code>false</code>, defaults to <code>false</code>. Automatically advances the carousel to the next slide based on a delay. If the user manually changes slides, then the auto advance is stopped. Note that if <code>loop</code> is not enabled, when reaching the last item, the auto advance will move backwards to the first item.
-  </tr>
-  <tr>
-    <td width="40%"><strong><code>auto-advance-count</code></strong></td>
-    <td>A number, defaults to <code>1</code>. Determines how many slides the carousel will advance when automatically advancing. This is useful when specifying the <code>visible-count</code> attribute.
-  </tr>
-  <tr>
-    <td width="40%"><strong><code>auto-advance-interval</code></strong></td>
-    <td>A number, defaults to <code>1000</code>. Specifies the amount of time, in milliseconds, between subsequent automatic advances of the carousel.
-  </tr>
-  <tr>
-    <td width="40%"><strong><code>auto-advance-loops</code></strong></td>
-    <td>A number, defaults to <code>∞</code>. The number of times the carousel should advance through the slides before stopping.
-  </tr>
-</table>
+##### auto-advance
+
+Either `true` or `false`, defaults to `false`. Automatically advances the
+carousel to the next slide based on a delay. If the user manually changes
+slides, then the auto advance is stopped. Note that if `loop` is not enabled,
+when reaching the last item, the auto advance will move backwards to the first
+item.
+
+##### auto-advance-count
+
+A number, defaults to `1`. Determines how many slides the carousel will advance
+when automatically advancing. This is useful when specifying the `visible-count`
+attribute.
+
+##### auto-advance-interval
+
+A number, defaults to `1000`. Specifies the amount of time, in milliseconds,
+between subsequent automatic advances of the carousel.
+
+##### auto-advance-loops
+
+A number, defaults to `∞`. The number of times the carousel should advance
+through the slides before stopping.
 
 #### Snapping
 
-<table>
-  <tr>
-    <td width="40%"><strong><code>snap</code></strong></td>
-    <td>Either <code>true</code> or <code>false</code>, defaults to <code>true</code>. Determines whether or not the carousel should snap on slides when scrolling.
-  </tr>
-  <tr>
-    <td width="40%"><strong><code>snap-align</code></strong></td>
-    <td>Either <code>start</code> or <code>center</code>. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.
-  </tr>
-  <tr>
-    <td width="40%"><strong><code>snap-by</code></strong></td>
-    <td>A number, defaults to <code>1</code>. This determines the granularity of snapping and is useful when using
-    <code>visible-count</code>. This
-  </tr>
-</table>
+##### snap
+
+Either `true` or `false`, defaults to `true`. Determines whether or not the
+carousel should snap on slides when scrolling.
+
+##### snap-align
+
+Either `start` or `center`. When start aligning, the start of a slide (e.g. the
+left edge, when horizontal aligning) is aligned with the start of a carousel.
+When center aligning, the center of a slide is aligned with the center of a
+carousel.
+
+##### snap-by
+
+A number, defaults to `1`. This determines the granularity of snapping and is
+useful when using `visible-count`.
 
 #### Miscellaneous
 
-<table>
-  <tr>
-    <td width="40%"><strong><code>slide</code></strong></td>
-    <td>A number, defaults to <code>0</code>. This determines the initial slide shown in the carousel. This may be used with <code>amp-bind</code> to control which slide is currently showing.
-  </tr>
-  <tr>
-    <td width="40%"><strong><code>loop</code></strong></td>
-    <td>Either <code>true</code> or <code>false</code>, defaults to <code>true</code>. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.
-  </tr>
-  <tr>
-    <td width="40%"><strong><code>horizontal</code></strong></td>
-    <td>Either <code>true</code> or <code>false</code>, defaults to <code>true</code>. When true the carousel will lay out horizontally, with the user being able to swipe left and right. When false, the carousel lays out vertically, with the user being able to swipe up and down.
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+##### controls
 
-## Events
+Either `"always"`, `"auto"`, or `"never"`, defaults to `"auto"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `"always"`.
+
+-   `always`: Arrows are always displayed.
+-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.
+-   `never`: Arrows are never displayed.
+
+##### slide
+
+A number, defaults to `0`. This determines the initial slide shown in the
+carousel. This may be used with `amp-bind` to control which slide is currently
+showing.
+
+##### loop
+
+Either `true` or `false`, defaults to `false` when omitted. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three times the `visible-count` of slides present for looping to occur.
 
-<table>
-  <tr>
-    <td width="40%"><strong><code>slideChange</code></strong></td>
-    <td>This event is triggered when the index displayed by the carousel has changed. The new index is available via <code>event.index</code>.</td>
-  </tr>
-</table>
+##### orientation
+
+Either `horizontal` or `vertical`, defaults to `horizontal`. When `horizontal` the carousel will lay out horizontally, with the user being able to swipe left and right. When `vertical`, the carousel lays out vertically, with the user being able to swipe up and down.
+
+##### common attributes
+
+This element includes
+[common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
 ## Actions
 
-<table>
-  <tr>
-    <td width="40%"><strong><code>next</code></strong></td>
-    <td>Moves the carousel forwards by <code>advance-count</code> slides.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong><code>prev</code></strong></td>
-    <td>Moves the carousel backwards by <code>advance-count</code> slides.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong><code>goToSlide</code></strong></td>
-    <td>Moves the carousel to the slide specified by the  <code>index</code> argument.</td>
-  </tr>
-</table>
+### next
+
+Moves the carousel forwards by `advance-count` slides.
+
+### prev
+
+Moves the carousel backwards by `advance-count` slides.
+
+### goToSlide
+
+Moves the carousel to the slide specified by the `index` argument.
+
+## Events
+
+### slideChange
+
+This event is triggered when the index displayed by the carousel has changed.
+The new index is available via `event.index`.
 
 ## Styling
 
-- You may use the `amp-base-carousel` element selector to style the carousel freely.
+You may use the `amp-base-carousel` element selector to style the carousel
+freely.
 
 ### Customizing Arrow Buttons
 
-Arrow buttons can be customized by passing in your own custom markup. For example, you can recreate the default styling with the following HTML and CSS:
+Arrow buttons can be customized by passing in your own custom markup. For
+example, you can recreate the default styling with the following HTML and CSS:
 
 ```css
 .carousel-prev,
@@ -196,7 +411,10 @@ Arrow buttons can be customized by passing in your own custom markup. For exampl
 </amp-base-carousel>
 ```
 
-If you want more customization for the arrow buttons, you can use the `next` and `prev` actions. For example, if you want to place buttons under the carousel and use the words "Previous" and "Next" instead of having them in the default location, you can use the following HTML:
+If you want more customization for the arrow buttons, you can use the `next` and
+`prev` actions. For example, if you want to place buttons under the carousel and
+use the words "Previous" and "Next" instead of having them in the default
+location, you can use the following HTML:
 
 ```html
   <amp-base-carousel id="carousel-1" …>
@@ -208,53 +426,6 @@ If you want more customization for the arrow buttons, you can use the `next` and
   <button on="tap:carousel-1.next()">Next</button>
 ```
 
-## Usage Notes
-
-### RTL
-
-`<amp-base-carousel>` currently requires that you let it know when it is in an right-to-left (rtl) context (e.g. Arabic, Hebrew pages). While the carousel will generally work without this, there may be a few bugs. You can let the carousel know that it should operate as `rtl` as follows:
-
-```html
-<amp-base-carousel dir="rtl" …>
-  …
-</amp-base-carousel>
-```
-
-If the carousel is in a RTL context, and you want the carousel to operate as LTR, you can explicitly set the `dir="ltr"` on the carousel.
-
-### Slide layout
-
-Slides are automatically sized by the carousel when **not** specifying `mixed-lengths`. You should give the slides `layout="flex-item"`:
-
-```html
-<amp-base-carousel …>
-  <amp-img layout="flex-item" src="…"></amp-img>
-</amp-base-carousel>
-```
-
-The slides have a default height of `100%` when the carousel is laid out horizontally. This can easily be changed with CSS or by using `layout="fixed-height"`. When specifying the height, the slide will be vertically centered within the carousel.
-
-If you want to horizontally center your slide content, you will want to create a wrapping element, and use that to center the content.
-
-### Number of Visible Slides
-
-When changing the number of visible slides using `visible-slides`, in response to a media query, you will likely want to change the aspect ratio of the carousel itself to match the new number of visible slides. For example, if you want to show three slides at a time with a one by one aspect ratio, you would want an aspect ratio of three by one for the carousel itself. Similiarly, with four slides at a time you would want an aspect ratio of four by one. In addition, when changing `visible-slides`, you likely want to change `advance-count`.
-
-```html
-<!-- Using an aspect ratio of 3:2 for the slides in this example. -->
-<amp-base-carousel
-  layout="responsive"
-  width="3"
-  height="1"
-  heights="(min-width: 600px) calc(100% * 4 * 3 / 2), calc(100% * 3 * 3 / 2)"
-  visible-count="(min-width: 600px) 4, 3"
-  advance-count="(min-width: 600px) 4, 3"
->
-  <amp-img layout="flex-item" src="…"></amp-img>
-  …
-</amp-base-carousel>
-```
-
-## Validation
+## Version notes
 
-See [amp-carousel rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-base-carousel/validator-amp-base-carousel.protoascii) in the AMP validator specification.
+Unlike `0.1`, the experimental `1.0` version of `amp-base-carousel` allows configuring the carousel slide orientation via `"orientation"="horizontal"|"vertical"` attributes instead of `"horizontal"="true"|"false"` attributes.
diff --git a/extensions/amp-base-carousel/validator-amp-base-carousel.protoascii b/extensions/amp-base-carousel/validator-amp-base-carousel.protoascii
index e950ffe6300b3..6c80f07f78b11 100644
--- a/extensions/amp-base-carousel/validator-amp-base-carousel.protoascii
+++ b/extensions/amp-base-carousel/validator-amp-base-carousel.protoascii
@@ -16,11 +16,11 @@
 
 tags: {  # amp-base-carousel
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-base-carousel"
     version: "0.1"
+    version: "1.0"
     version: "latest"
   }
   attr_lists: "common-extension-attrs"
@@ -58,7 +58,12 @@ attr_lists: {
     value_regex: "([^,]+\\s+(\\d+),\\s*)*(\\d+)"
   }
   attrs: {
-    name: "horizontal"
+    name: "controls"
+    # Media query / (always|auto|never)
+    value_regex: "([^,]+\\s+(always|auto|never),\\s*)*(always|auto|never)"
+  }
+  attrs: {
+    name: "horizontal" # 0.1 only
     # Media query / boolean pairs
     value_regex: "([^,]+\\s+(true|false),\\s*)*(true|false)"
   }
@@ -72,6 +77,11 @@ attr_lists: {
     # Media query / boolean pairs
     value_regex: "([^,]+\\s+(true|false),\\s*)*(true|false)"
   }
+  attrs: {
+    name: "orientation" # 1.0 only
+    # Media query / boolean pairs
+    value_regex: "([^,]+\\s+(horizontal|vertical),\\s*)*(horizontal|vertical)"
+  }
   attrs: {
     name: "slide"
     # Media query / positive integer pairs
@@ -104,9 +114,10 @@ attr_lists: {
   attrs: { name: "[auto-advance-count]" }
   attrs: { name: "[auto-advance-interval]" }
   attrs: { name: "[auto-advance-loops]" }
-  attrs: { name: "[horizontal]" }
+  attrs: { name: "[horizontal]" } # 0.1 only
   attrs: { name: "[loop]" }
   attrs: { name: "[mixed-length]" }
+  attrs: { name: "[orientation]" } # 1.0 only
   attrs: { name: "[slide]" }
   attrs: { name: "[snap]" }
   attrs: { name: "[snap-align]" }
@@ -116,12 +127,11 @@ attr_lists: {
 
 tags: {  # <amp-base-carousel>
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "AMP-BASE-CAROUSEL"
   requires_extension: "amp-base-carousel"
   attr_lists: "amp-base-carousel-common"
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-base-carousel"
+  spec_url: "https://amp.dev/documentation/components/amp-base-carousel/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
@@ -135,7 +145,6 @@ tags: {  # <amp-base-carousel>
 
 tags: {  # <amp-base-carousel lightbox>
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "AMP-BASE-CAROUSEL"
   spec_name: "AMP-BASE-CAROUSEL [lightbox]"
   requires_extension: "amp-base-carousel"
@@ -146,7 +155,7 @@ tags: {  # <amp-base-carousel lightbox>
   }
   attr_lists: "amp-base-carousel-common"
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-base-carousel"
+  spec_url: "https://amp.dev/documentation/components/amp-base-carousel/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
@@ -166,7 +175,6 @@ tags: {  # <amp-base-carousel lightbox>
 
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "$REFERENCE_POINT"
   spec_name: "AMP-BASE-CAROUSEL lightbox [lightbox-exclude]"
   attrs: {
@@ -176,7 +184,6 @@ tags: {
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "$REFERENCE_POINT"
   spec_name: "AMP-BASE-CAROUSEL lightbox [child]"
   attrs: {
diff --git a/extensions/amp-beopinion/0.1/amp-beopinion.js b/extensions/amp-beopinion/0.1/amp-beopinion.js
index abb80f652e479..4f3dd67935ab0 100644
--- a/extensions/amp-beopinion/0.1/amp-beopinion.js
+++ b/extensions/amp-beopinion/0.1/amp-beopinion.js
@@ -23,6 +23,8 @@ import {removeElement} from '../../../src/dom';
 /** @const */
 const TAG = 'amp-beopinion';
 
+const TYPE = 'beopinion';
+
 class AmpBeOpinion extends AMP.BaseElement {
   /** @param {!AmpElement} element */
   constructor(element) {
@@ -38,7 +40,7 @@ class AmpBeOpinion extends AMP.BaseElement {
    */
   preconnectCallback(opt_onLayout) {
     const preconnect = Services.preconnectFor(this.win);
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
     // Hosts the script that renders widgets.
     preconnect.preload(
       this.getAmpDoc(),
@@ -68,7 +70,8 @@ class AmpBeOpinion extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    const iframe = getIframe(this.win, this.element, 'beopinion');
+    const iframe = getIframe(this.win, this.element, TYPE);
+    iframe.title = this.element.title || 'BeOpinion content';
     this.applyFillContent(iframe);
     listenFor(
       iframe,
diff --git a/extensions/amp-beopinion/0.1/test/test-amp-beopinion.js b/extensions/amp-beopinion/0.1/test/test-amp-beopinion.js
index fe9736cc60ddd..fbb01b2666b7c 100644
--- a/extensions/amp-beopinion/0.1/test/test-amp-beopinion.js
+++ b/extensions/amp-beopinion/0.1/test/test-amp-beopinion.js
@@ -43,7 +43,7 @@ describes.realWin(
       ampBeOpinion.setAttribute('height', '222');
       doc.body.appendChild(ampBeOpinion);
       return ampBeOpinion
-        .build()
+        .buildInternal()
         .then(() => ampBeOpinion.layoutCallback())
         .then(() => ampBeOpinion);
     }
@@ -77,16 +77,16 @@ describes.realWin(
       expect(content).not.to.be.undefined;
     });
 
-    it('removes iframe after unlayoutCallback', () => {
-      return getAmpBeOpinion(accountId).then((ampBeOpinion) => {
-        const iframe = ampBeOpinion.querySelector('iframe');
-        expect(iframe).to.not.be.null;
-        const obj = ampBeOpinion.implementation_;
-        obj.unlayoutCallback();
-        expect(ampBeOpinion.querySelector('iframe')).to.be.null;
-        expect(obj.iframe_).to.be.null;
-        expect(obj.unlayoutOnPause()).to.be.true;
-      });
+    it('removes iframe after unlayoutCallback', async () => {
+      const ampBeOpinion = await getAmpBeOpinion(accountId);
+      const obj = await ampBeOpinion.getImpl();
+
+      const iframe = ampBeOpinion.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+      obj.unlayoutCallback();
+      expect(ampBeOpinion.querySelector('iframe')).to.be.null;
+      expect(obj.iframe_).to.be.null;
+      expect(obj.unlayoutOnPause()).to.be.true;
     });
   }
 );
diff --git a/extensions/amp-beopinion/0.1/test/validator-amp-beopinion.html b/extensions/amp-beopinion/0.1/test/validator-amp-beopinion.html
index e0553d4a1bdb9..2640f37e57a3f 100644
--- a/extensions/amp-beopinion/0.1/test/validator-amp-beopinion.html
+++ b/extensions/amp-beopinion/0.1/test/validator-amp-beopinion.html
@@ -24,7 +24,6 @@
   <title>BeOpinion examples</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-beopinion" src="https://cdn.ampproject.org/v0/amp-beopinion-0.1.js"></script>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/extensions/amp-beopinion/0.1/test/validator-amp-beopinion.out b/extensions/amp-beopinion/0.1/test/validator-amp-beopinion.out
index f1e0f68e0ac55..2a3ea399eda68 100644
--- a/extensions/amp-beopinion/0.1/test/validator-amp-beopinion.out
+++ b/extensions/amp-beopinion/0.1/test/validator-amp-beopinion.out
@@ -25,7 +25,6 @@ PASS
 |    <title>BeOpinion examples</title>
 |    <link rel="canonical" href="amps.html" >
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
 |    <script async custom-element="amp-beopinion" src="https://cdn.ampproject.org/v0/amp-beopinion-0.1.js"></script>
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -61,4 +60,4 @@ PASS
 |        data-account="556f2afc6ebef601004fb60f">
 |    </amp-beopinion>
 |  </body>
-|  </html>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-beopinion/OWNERS b/extensions/amp-beopinion/OWNERS
index 94b65ebe76929..1b8c3b93f6d99 100644
--- a/extensions/amp-beopinion/OWNERS
+++ b/extensions/amp-beopinion/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-beopinion/amp-beopinion.md b/extensions/amp-beopinion/amp-beopinion.md
index 51f9d8bfbcd0c..a7ea65648f3aa 100644
--- a/extensions/amp-beopinion/amp-beopinion.md
+++ b/extensions/amp-beopinion/amp-beopinion.md
@@ -24,7 +24,7 @@ limitations under the License.
 
 # amp-beopinion
 
-## Behavior
+## Usage
 
 The `amp-beopinion` component allows you to embed [BeOpinion](https://beop.io/) content in your AMP page for a given BeOpinion account. BeOpinion is a tool for content creators to add interactive blocks such as polls and quizzes to their pages. BeOpinion mostly works with journalists of major media groups in Europe.
 
@@ -59,11 +59,7 @@ The `amp-beopinion` component allows you to embed [BeOpinion](https://beop.io/)
 </amp-ad>
 ```
 
-## Appearance
-
-BeOpinion does not currently provide an API that yields fixed aspect ratio for embedded contents. Currently, AMP automatically proportionally scales the content to fit the provided size, but this may yield less than ideal appearance. You might need to manually tweak the provided width and height. Also, you can use the `media` attribute to select the aspect ratio based on the screen width.
-
-## Placeholders & fallbacks
+### Placeholders & fallbacks
 
 An element marked with a `placeholder` attribute displays while the content for the content is loading or initializing. Placeholders are hidden once the AMP component's content displays. An element marked with a `fallback` attribute displays if `amp-beopinion` isn't supported by the browser or if the content doesn't exist or has been deleted.
 
@@ -71,30 +67,42 @@ Visit the [Placeholders & fallbacks](https://amp.dev/documentation/guides-and-tu
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-account (required)</strong></td>
-    <td>The ID of the BeOpinion account (page owner).</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-content (optional)</strong></td>
-    <td>The ID of the BeOpinion content to be displayed on the page.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-name (optional)</strong></td>
-    <td>The name of the BeOpinion slot on the page.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-my-content (optional - <code>amp-ad</code> only !)</strong></td>
-    <td>For <code>amp-ad</code> elements of type <code>beopinion</code>, the value can be set to <code>"0"</code> (default value).
-Warning: the <code>amp-beopinion</code> element overrides this value to <code>"1"</code>, to prevent the serving of ads outside of an <code>amp-ad</code> element.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+### `data-account`
+
+The ID of the BeOpinion account (page owner).
+
+### `data-content` (optional)
+
+The ID of the BeOpinion content to be displayed on the page.
+
+### `data-name` (optional)
+
+The name of the BeOpinion slot on the page.
+
+[filter formats="ads"]
+
+### `data-my-content` (optional)
+
+For `amp-ad` elements of type `beopinion`, the value can be set to `"0"`
+(default value).
+
+[tip type="important"]
+
+The `amp-beopinion` element overrides this value to `"1"`, to prevent the
+serving of ads outside of an `amp-ad` element.
+
+[/tip]
+
+[/filter]<!-- formats="ads" -->
+
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"BeOpinion content"`.
+
+## Styling
+
+BeOpinion does not currently provide an API that yields fixed aspect ratio for embedded contents. Currently, AMP automatically proportionally scales the content to fit the provided size, but this may yield less than ideal appearance. You might need to manually tweak the provided width and height. Also, you can use the `media` attribute to select the aspect ratio based on the screen width.
 
 ## Validation
 
-See [amp-beopinion rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-beopinion/validator-amp-beopinion.protoascii) in the AMP validator specification.
+See [amp-beopinion rules](validator-amp-beopinion.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-bind/0.1/amp-state.js b/extensions/amp-bind/0.1/amp-state.js
index 53b715e562efe..8050985006a68 100644
--- a/extensions/amp-bind/0.1/amp-state.js
+++ b/extensions/amp-bind/0.1/amp-state.js
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
-import {Deferred} from '../../../src/utils/promise';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {LayoutPriority} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {
@@ -24,12 +24,11 @@ import {
 } from '../../../src/batched-json';
 import {createCustomEvent} from '../../../src/event-helper';
 import {dev, devAssert, userAssert} from '../../../src/log';
-import {dict, map} from '../../../src/utils/object';
+import {dict, map} from '../../../src/core/types/object';
 import {getSourceOrigin} from '../../../src/url';
-import {getViewerAuthTokenIfAvailable} from '../../../src/utils/xhr-utils';
 import {isJsonScriptTag} from '../../../src/dom';
 import {toggle} from '../../../src/style';
-import {tryParseJson} from '../../../src/json';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 export class AmpState extends AMP.BaseElement {
   /**
@@ -160,15 +159,13 @@ export class AmpState extends AMP.BaseElement {
    * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
    * @param {!UrlReplacementPolicy} policy
    * @param {boolean=} opt_refresh
-   * @param {string=} token
    * @return {!Promise<!JsonObject|!Array<JsonObject>>}
    * @private
    */
-  fetch_(ampdoc, policy, opt_refresh, token = undefined) {
+  fetch_(ampdoc, policy, opt_refresh) {
     return batchFetchJsonFor(ampdoc, this.element, {
       urlReplacement: policy,
       refresh: opt_refresh,
-      token,
     });
   }
 
@@ -176,7 +173,7 @@ export class AmpState extends AMP.BaseElement {
    * Transforms and prepares the fetch request.
    * @param {boolean} isInit
    * @param {boolean=} opt_refresh
-   * @return {!Promise<!JsonObject|!Array<JsonObject>>}
+   * @return {!Promise<!JsonObject|!Array<JsonObject>|undefined>}
    */
   prepareAndSendFetch_(isInit, opt_refresh) {
     const {element} = this;
@@ -192,20 +189,18 @@ export class AmpState extends AMP.BaseElement {
         ? UrlReplacementPolicy.OPT_IN
         : UrlReplacementPolicy.ALL;
 
-    return getViewerAuthTokenIfAvailable(element).then((token) =>
-      this.fetch_(ampdoc, policy, opt_refresh, token).catch((error) => {
-        const event = error
-          ? createCustomEvent(
-              this.win,
-              'amp-state.error',
-              dict({'response': error.response})
-            )
-          : null;
-        // Trigger "fetch-error" event on fetch failure.
-        const actions = Services.actionServiceForDoc(element);
-        actions.trigger(element, 'fetch-error', event, ActionTrust.LOW);
-      })
-    );
+    return this.fetch_(ampdoc, policy, opt_refresh).catch((error) => {
+      const event = error
+        ? createCustomEvent(
+            this.win,
+            'amp-state.error',
+            dict({'response': error.response})
+          )
+        : null;
+      // Trigger "fetch-error" event on fetch failure.
+      const actions = Services.actionServiceForDoc(element);
+      actions.trigger(element, 'fetch-error', event, ActionTrust.LOW);
+    });
   }
 
   /**
diff --git a/extensions/amp-bind/0.1/bind-evaluator.js b/extensions/amp-bind/0.1/bind-evaluator.js
index 1910a9a2f1e9a..79ee8747bdab4 100644
--- a/extensions/amp-bind/0.1/bind-evaluator.js
+++ b/extensions/amp-bind/0.1/bind-evaluator.js
@@ -17,7 +17,7 @@
 import {BindExpression} from './bind-expression';
 import {BindMacro} from './bind-macro';
 import {BindValidator} from './bind-validator';
-import {remove} from '../../../src/utils/array';
+import {remove} from '../../../src/core/types/array';
 
 /**
  * Asynchronously evaluates a set of Bind expressions.
@@ -135,7 +135,7 @@ export class BindEvaluator {
         errors[expressionString] = {message: error.message, stack: error.stack};
         return;
       }
-      const {result, error} = this.evaluate_(expression, scope);
+      const {error, result} = this.evaluate_(expression, scope);
       if (error) {
         errors[expressionString] = error;
         return;
@@ -145,7 +145,7 @@ export class BindEvaluator {
 
     // Then, validate each binding and delete invalid expression results.
     this.bindings_.forEach((binding) => {
-      const {tagName, property, expressionString} = binding;
+      const {expressionString, property, tagName} = binding;
       const result = cache[expressionString];
       if (result === undefined) {
         return;
diff --git a/extensions/amp-bind/0.1/bind-expression.js b/extensions/amp-bind/0.1/bind-expression.js
index 15df96d6412dd..04fff27153319 100644
--- a/extensions/amp-bind/0.1/bind-expression.js
+++ b/extensions/amp-bind/0.1/bind-expression.js
@@ -16,9 +16,10 @@
 
 import {AstNodeType} from './bind-expr-defines';
 import {devAssert, user} from '../../../src/log';
-import {dict, hasOwn, map} from '../../../src/utils/object';
+import {dict, hasOwn, map} from '../../../src/core/types/object';
 import {getMode} from '../../../src/mode';
-import {isArray, isObject} from '../../../src/types';
+import {isArray, isObject} from '../../../src/core/types';
+
 import {bindParser as parser} from '../../../build/parsers/bind-expr-impl';
 
 const TAG = 'amp-bind';
@@ -184,7 +185,8 @@ function generateFunctionAllowlist() {
       const func = functionsForType[name];
       if (func) {
         devAssert(
-          !func.name || name === func.name,
+          // Partial match to account for bundlers adding a suffix to the name.
+          !func.name || func.name.startsWith(name),
           'Listed function name ' +
             `"${name}" doesn't match name property "${func.name}".`
         );
@@ -338,7 +340,7 @@ export class BindExpression {
       return null;
     }
 
-    const {type, args, value} = node;
+    const {args, type, value} = node;
 
     // `value` should always exist for literals.
     if (type === AstNodeType.LITERAL && value !== undefined) {
diff --git a/extensions/amp-bind/0.1/bind-impl.js b/extensions/amp-bind/0.1/bind-impl.js
index 3b48ab7f9d10a..623870d178709 100644
--- a/extensions/amp-bind/0.1/bind-impl.js
+++ b/extensions/amp-bind/0.1/bind-impl.js
@@ -14,35 +14,45 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../../src/amp-events';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {BindEvents} from './bind-events';
 import {BindValidator} from './bind-validator';
 import {ChunkPriority, chunk} from '../../../src/chunk';
-import {Deferred} from '../../../src/utils/promise';
-import {RAW_OBJECT_ARGS_KEY} from '../../../src/action-constants';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {RAW_OBJECT_ARGS_KEY} from '../../../src/core/constants/action-constants';
 import {Services} from '../../../src/services';
-import {Signals} from '../../../src/utils/signals';
+import {Signals} from '../../../src/core/data-structures/signals';
 import {
   closestAncestorElementBySelector,
   iterateCursor,
   whenUpgradedToCustomElement,
 } from '../../../src/dom';
 import {createCustomEvent, getDetail} from '../../../src/event-helper';
-import {debounce} from '../../../src/utils/rate-limit';
-import {deepEquals, getValueForExpr, parseJson} from '../../../src/json';
-import {deepMerge, dict, map} from '../../../src/utils/object';
+import {debounce} from '../../../src/core/types/function';
+import {deepEquals, parseJson} from '../../../src/core/types/object/json';
+import {
+  deepMerge,
+  dict,
+  getValueForExpr,
+  map,
+} from '../../../src/core/types/object';
 import {dev, devAssert, user} from '../../../src/log';
-import {escapeCssSelectorIdent} from '../../../src/css';
-import {findIndex, remove} from '../../../src/utils/array';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
+import {
+  findIndex,
+  isArray,
+  remove,
+  toArray,
+} from '../../../src/core/types/array';
 import {getMode} from '../../../src/mode';
-import {installServiceInEmbedScope} from '../../../src/service';
+
 import {invokeWebWorker} from '../../../src/web-worker/amp-worker';
 import {isAmp4Email} from '../../../src/format';
-import {isArray, isFiniteNumber, isObject, toArray} from '../../../src/types';
-import {reportError} from '../../../src/error';
+
+import {isFiniteNumber, isObject} from '../../../src/core/types';
+
+import {reportError} from '../../../src/error-reporting';
 import {rewriteAttributesForElement} from '../../../src/url-rewrite';
-import {startsWith} from '../../../src/string';
-import {whenDocumentReady} from '../../../src/document-ready';
 
 /** @const {string} */
 const TAG = 'amp-bind';
@@ -71,6 +81,12 @@ const FORM_VALUE_PROPERTIES = {
   },
   'TEXTAREA': {
     'text': true,
+    // amp-form relies on FORM_VALUE_CHANGE to update form validity state due
+    // to value changes from amp-bind. However, disabled form elements always
+    // report "valid" even if they have invalid values! A consequence is that
+    // toggling `disabled` via amp-bind may affect validity, so we need to
+    // inform amp-form about these too.
+    'disabled': true,
   },
 };
 
@@ -87,6 +103,15 @@ let BoundPropertyDef;
  */
 let BoundElementDef;
 
+/**
+ * The options bag for binding application.
+ *
+ * @typedef {Record} ApplyOptionsDef
+ * @property {boolean=} skipAmpState If true, skips <amp-state> elements.
+ * @property {Array<!Element>=} constrain If provided, restricts application to children of the provided elements.
+ * @property {boolean=} evaluateOnly If provided, caches the evaluated result on each bound element and skips the actual DOM updates.
+ */
+
 /**
  * A map of tag names to arrays of attributes that do not have non-bind
  * counterparts. For instance, amp-carousel allows a `[slide]` attribute,
@@ -95,8 +120,7 @@ let BoundElementDef;
  */
 const BIND_ONLY_ATTRIBUTES = map({
   'AMP-CAROUSEL': ['slide'],
-  // TODO (#18875): add is-layout-container to validator file for amp-list
-  'AMP-LIST': ['state', 'is-layout-container'],
+  'AMP-LIST': ['is-layout-container'],
   'AMP-SELECTOR': ['selected'],
 });
 
@@ -109,17 +133,12 @@ const FAST_RESCAN_TAGS = ['AMP-LIST'];
 /**
  * Bind is an ampdoc-scoped service that handles the Bind lifecycle, from
  * scanning for bindings to evaluating expressions to mutating elements.
- * @implements {../../../src/service.EmbeddableService}
  */
 export class Bind {
   /**
-   * If `opt_win` is provided, scans its document for bindings instead.
    * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
-   * @param {!Window=} opt_win
    */
-  constructor(ampdoc, opt_win) {
-    // TODO(#22733): remove opt_win subroooting once ampdoc-fie is launched.
-
+  constructor(ampdoc) {
     /** @const {!../../../src/service/ampdoc-impl.AmpDoc} */
     this.ampdoc = ampdoc;
 
@@ -131,7 +150,7 @@ export class Bind {
      * May differ from the `ampdoc`'s window e.g. in FIE.
      * @const @private {!Window}
      */
-    this.localWin_ = opt_win || ampdoc.win;
+    this.localWin_ = ampdoc.win;
 
     /**
      * Array of ActionInvocation.sequenceId values that have been invoked.
@@ -199,14 +218,8 @@ export class Bind {
 
     /** @const @private {!Promise<!Document>} */
     this.rootNodePromise_ = ampdoc.whenFirstVisible().then(() => {
-      if (opt_win) {
-        // In FIE, scan the document node of the iframe window.
-        const {document} = opt_win;
-        return whenDocumentReady(document).then(() => document);
-      } else {
-        // Otherwise, scan the root node of the ampdoc.
-        return ampdoc.whenReady().then(() => ampdoc.getRootNode());
-      }
+      // Otherwise, scan the root node of the ampdoc.
+      return ampdoc.whenReady().then(() => ampdoc.getRootNode());
     });
 
     /**
@@ -233,15 +246,6 @@ export class Bind {
     g.eval = g.eval || this.debugEvaluate_.bind(this);
   }
 
-  /**
-   * @param {!Window} embedWin
-   * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
-   * @nocollapse
-   */
-  static installInEmbedWindow(embedWin, ampdoc) {
-    installServiceInEmbedScope(embedWin, 'bind', new Bind(ampdoc, embedWin));
-  }
-
   /**
    * @return {!../../../src/utils/signals.Signals}
    */
@@ -896,26 +900,13 @@ export class Bind {
   scanNode_(node, limit) {
     /** @type {!Array<!BindBindingDef>} */
     const bindings = [];
-    const doc = devAssert(
-      node.nodeType == Node.DOCUMENT_NODE ? node : node.ownerDocument,
-      'ownerDocument is null.'
-    );
-    // Third and fourth params of `createTreeWalker` are not optional on IE11.
-    const walker = doc.createTreeWalker(
-      node,
-      NodeFilter.SHOW_ELEMENT,
-      null,
-      /* entityReferenceExpansion */ false
-    );
+    const walker = new BindWalker(node);
     // Set to true if number of bindings in `node` exceeds `limit`.
     let limitExceeded = false;
     // Helper function for scanning the tree walker's next node.
     // Returns true if the walker has no more nodes.
     const scanNextNode_ = () => {
       const node = walker.currentNode;
-      if (!node) {
-        return true;
-      }
       // If `node` is a Document, it will be scanned first (despite
       // NodeFilter.SHOW_ELEMENT). Skip it.
       if (node.nodeType !== Node.ELEMENT_NODE) {
@@ -930,7 +921,7 @@ export class Bind {
       // rescan() with {fast: true} for better performance. Note that only
       // children are opted-out (e.g. amp-list children, not amp-list itself).
       const next = FAST_RESCAN_TAGS.includes(node.nodeName)
-        ? this.skipSubtree_(walker)
+        ? walker.skipSubtree()
         : walker.nextNode();
       return !next || limitExceeded;
     };
@@ -963,23 +954,6 @@ export class Bind {
     });
   }
 
-  /**
-   * Skips the subtree at the walker's current node and returns the next node
-   * in document order, if any. Otherwise, returns null.
-   * @param {!TreeWalker} walker
-   * @return {?Node}
-   * @private
-   */
-  skipSubtree_(walker) {
-    for (let n = walker.currentNode; n; n = walker.parentNode()) {
-      const sibling = walker.nextSibling();
-      if (sibling) {
-        return sibling;
-      }
-    }
-    return null;
-  }
-
   /**
    * Scans the element for bindings and adds up to |quota| to `outBindings`.
    * Also updates ivars `boundElements_` and `expressionToElements_`.
@@ -1001,7 +975,7 @@ export class Bind {
     }
     const {tagName} = element;
     boundProperties.forEach((boundProperty) => {
-      const {property, expressionString} = boundProperty;
+      const {expressionString, property} = boundProperty;
       outBindings.push({tagName, property, expressionString});
       if (!this.expressionToElements_[expressionString]) {
         this.expressionToElements_[expressionString] = [];
@@ -1045,7 +1019,7 @@ export class Bind {
     let property;
     if (attr.length > 2 && attr[0] === '[' && attr[attr.length - 1] === ']') {
       property = attr.substr(1, attr.length - 2);
-    } else if (startsWith(attr, 'data-amp-bind-')) {
+    } else if (attr.startsWith('data-amp-bind-')) {
       property = attr.substr(14);
       // Ignore `data-amp-bind-foo` if `[foo]` already exists.
       if (element.hasAttribute(`[${property}]`)) {
@@ -1083,7 +1057,7 @@ export class Bind {
         return this.ww_('bind.evaluateExpression', [expression, scope]);
       })
       .then((returnValue) => {
-        const {result, error} = returnValue;
+        const {error, result} = returnValue;
         if (error) {
           // Throw to reject promise.
           throw this.reportWorkerError_(
@@ -1104,7 +1078,7 @@ export class Bind {
   evaluate_() {
     const evaluatePromise = this.ww_('bind.evaluateBindings', [this.state_]);
     return evaluatePromise.then((returnValue) => {
-      const {results, errors} = returnValue;
+      const {errors, results} = returnValue;
       // Report evaluation errors.
       Object.keys(errors).forEach((expressionString) => {
         const elements = this.expressionToElements_[expressionString];
@@ -1141,7 +1115,7 @@ export class Bind {
     const mismatches = {};
 
     this.boundElements_.forEach((boundElement) => {
-      const {element, boundProperties} = boundElement;
+      const {boundProperties, element} = boundElement;
 
       // If provided, filter elements that are _not_ children of `opt_elements`.
       if (elements && !this.elementsContains_(elements, element)) {
@@ -1158,8 +1132,8 @@ export class Bind {
           return;
         }
         const {tagName} = element;
-        const {property, expressionString} = boundProperty;
-        const {expected, actual} = mismatch;
+        const {expressionString, property} = boundProperty;
+        const {actual, expected} = mismatch;
 
         // Only store unique mismatches (dupes possible when rendering an array
         // of data to a template).
@@ -1229,12 +1203,7 @@ export class Bind {
    * Applies expression results to elements in the document.
    *
    * @param {Object<string, BindExpressionResultDef>} results
-   * @param {!Object} opts
-   * @param {boolean=} opts.skipAmpState If true, skips <amp-state> elements.
-   * @param {Array<!Element>=} opts.constrain If provided, restricts application
-   *   to children of the provided elements.
-   * @param {boolean=} opts.evaluateOnly If provided, caches the evaluated
-   *   result on each bound element and skips the actual DOM updates.
+   * @param {!ApplyOptionsDef} opts
    * @return {!Promise}
    * @private
    */
@@ -1257,7 +1226,7 @@ export class Bind {
         return;
       }
 
-      const {element, boundProperties} = boundElement;
+      const {boundProperties, element} = boundElement;
       const updates = this.calculateUpdates_(boundProperties, results);
       // If this is a "evaluate only" application, skip the DOM mutations.
       if (opts.evaluateOnly) {
@@ -1831,3 +1800,103 @@ export class Bind {
     }
   }
 }
+
+class BindWalker {
+  /**
+   * @param {!Node} root
+   */
+  constructor(root) {
+    const doc = devAssert(
+      root.nodeType == Node.DOCUMENT_NODE ? root : root.ownerDocument,
+      'ownerDocument is null.'
+    );
+
+    const useQuerySelector =
+      doc.documentElement.hasAttribute('i-amphtml-binding');
+    /** @private @const {boolean} */
+    this.useQuerySelector_ = useQuerySelector;
+
+    /** @type {!Node} */
+    this.currentNode = root;
+
+    /** @private {number} */
+    this.index_ = 0;
+
+    /** @private @const {!Array<!Element>} */
+    this.nodeList_ = useQuerySelector
+      ? toArray(root.querySelectorAll('[i-amphtml-binding]'))
+      : [];
+
+    // Confusingly, the old TreeWalker hit the root node. We need to match that behavior.
+    if (
+      useQuerySelector &&
+      root.nodeType === Node.ELEMENT_NODE &&
+      root.hasAttribute('i-amphtml-binding')
+    ) {
+      this.nodeList_.unshift(root);
+    }
+
+    /**
+     * Third and fourth params of `createTreeWalker` are not optional on IE11.
+     * @private @const {?TreeWalker}
+     */
+    this.treeWalker_ = useQuerySelector
+      ? null
+      : doc.createTreeWalker(
+          root,
+          NodeFilter.SHOW_ELEMENT,
+          null,
+          /* entityReferenceExpansion */ false
+        );
+  }
+
+  /**
+   * Finds the next node in document order, if it exists. Returns that node, or null if it doesn't exist.
+   * Updates currentNode, if it exists, else currentNode stays the same.
+   *
+   * @return {?Node}
+   */
+  nextNode() {
+    if (this.useQuerySelector_) {
+      if (this.index_ == this.nodeList_.length) {
+        return null;
+      }
+      const next = this.nodeList_[this.index_++];
+      this.currentNode = next;
+      return next;
+    }
+
+    const walker = this.treeWalker_;
+    const next = walker.nextNode();
+    // This matches the TreeWalker's behavior.
+    if (next !== null) {
+      this.currentNode = next;
+    }
+    return next;
+  }
+
+  /**
+   * Skips the remaining sibling nodes in the current parent. Returns the next node in document order.
+   * @return {?Node}
+   */
+  skipSubtree() {
+    if (this.useQuerySelector_) {
+      const {currentNode} = this;
+      let next = null;
+      do {
+        next = this.nextNode();
+      } while (next !== null && currentNode.contains(next));
+      return next;
+    }
+
+    const walker = this.treeWalker_;
+    for (let n = walker.currentNode; n; n = walker.parentNode()) {
+      const sibling = walker.nextSibling();
+      if (sibling !== null) {
+        this.currentNode = sibling;
+        return sibling;
+      }
+    }
+    return null;
+  }
+}
diff --git a/extensions/amp-bind/0.1/bind-validator.js b/extensions/amp-bind/0.1/bind-validator.js
index b98af338f2466..1a72dd08744c4 100644
--- a/extensions/amp-bind/0.1/bind-validator.js
+++ b/extensions/amp-bind/0.1/bind-validator.js
@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import {hasOwn, ownProperty} from '../../../src/utils/object';
+import {hasOwn, ownProperty} from '../../../src/core/types/object';
 import {parseSrcset} from '../../../src/srcset';
-import {startsWith} from '../../../src/string';
 import {user} from '../../../src/log';
 
 const TAG = 'amp-bind';
@@ -139,7 +138,7 @@ export class BindValidator {
         }
       }
     }
-    // @see validator/engine/validator.ParsedTagSpec.validateAttributes()
+    // @see validator/js/engine/validator.ParsedTagSpec.validateAttributes()
     const {denylistedValueRegex} = rules;
     if (value && denylistedValueRegex) {
       const re = new RegExp(denylistedValueRegex, 'i');
@@ -159,7 +158,7 @@ export class BindValidator {
    * @private
    */
   isUrlValid_(url, rules) {
-    // @see validator/engine/validator.js#validateUrlAndProtocol()
+    // @see validator/js/engine/validator.js#validateUrlAndProtocol()
     if (url) {
       if (/__amp_source_origin/.test(url)) {
         return false;
@@ -191,7 +190,7 @@ export class BindValidator {
    */
   rulesForTagAndProperty_(tag, property) {
     // Allow binding to all ARIA attributes.
-    if (startsWith(property, 'aria-')) {
+    if (property.startsWith('aria-')) {
       return null;
     }
     // Disallow URL property bindings if configured as such.
@@ -203,7 +202,7 @@ export class BindValidator {
       return /** @type {PropertyRulesDef} */ (globalRules);
     }
     const ampPropertyRules = ownProperty(AMP_PROPERTY_RULES, property);
-    if (startsWith(tag, 'AMP-') && ampPropertyRules !== undefined) {
+    if (tag.startsWith('AMP-') && ampPropertyRules !== undefined) {
       return /** @type {PropertyRulesDef} */ (ampPropertyRules);
     }
     const tagRules = ownProperty(ELEMENT_RULES, tag);
@@ -312,6 +311,13 @@ function createElementRules_() {
       'state': null,
       'is-layout-container': null,
     },
+    'AMP-RENDER': {
+      'src': {
+        'allowedProtocols': {
+          'https': true,
+        },
+      },
+    },
     'AMP-SELECTOR': {
       'disabled': null,
       'selected': null,
@@ -444,6 +450,7 @@ function createElementRules_() {
     },
     'SECTION': {
       'data-expand': null,
+      'expanded': null,
     },
     'SELECT': {
       'autofocus': null,
diff --git a/extensions/amp-bind/0.1/test/integration/test-bind-impl.js b/extensions/amp-bind/0.1/test/integration/test-bind-impl.js
index cb66db0032b30..9c7331b4f4b55 100644
--- a/extensions/amp-bind/0.1/test/integration/test-bind-impl.js
+++ b/extensions/amp-bind/0.1/test/integration/test-bind-impl.js
@@ -19,36 +19,49 @@
  * because it requires building web-worker binary.
  */
 
-import * as lolex from 'lolex';
-import {AmpEvents} from '../../../../../src/amp-events';
+import * as fakeTimers from '@sinonjs/fake-timers';
+import {AmpEvents} from '../../../../../src/core/constants/amp-events';
 import {Bind} from '../../bind-impl';
 import {BindEvents} from '../../bind-events';
-import {Deferred} from '../../../../../src/utils/promise';
-import {RAW_OBJECT_ARGS_KEY} from '../../../../../src/action-constants';
+import {Deferred} from '../../../../../src/core/data-structures/promise';
+import {RAW_OBJECT_ARGS_KEY} from '../../../../../src/core/constants/action-constants';
 import {Services} from '../../../../../src/services';
 import {chunkInstanceForTesting} from '../../../../../src/chunk';
 import {dev, user} from '../../../../../src/log';
-import {toArray} from '../../../../../src/types';
+import {toArray} from '../../../../../src/core/types/array';
 
 /**
  * @param {!Object} env
  * @param {?Element} container
  * @param {string} binding
- * @param {string=} opt_tag Tag name of element (default is <p>).
- * @param {boolean=} opt_amp Is this an AMP element?
- * @param {boolean=} opt_head Add element to document <head>?
+ * @param {string=} opts.tag Tag name of element (default is <p>).
+ * @param {boolean=} opts.amp Is this an AMP element?
+ * @param {boolean=} opts.insertInHead Add element to document <head>?
+ * @param {boolean=} opts.insertQuerySelectorAttr Add i-amphtml-binding attribute to element?
  * @return {!Element}
  */
-function createElement(env, container, binding, opt_tag, opt_amp, opt_head) {
-  const tag = opt_tag || 'p';
+function createElement(env, container, binding, opts = {}) {
+  const {
+    amp = false,
+    insertInHead = false,
+    insertQuerySelectorAttr = false,
+    tag = 'p',
+  } = opts;
   const div = env.win.document.createElement('div');
   div.innerHTML = `<${tag} ${binding}></${tag}>`;
   const element = div.firstElementChild;
-  if (opt_amp) {
+
+  if (amp) {
     element.className = 'i-amphtml-foo -amp-foo amp-foo';
+
     element.mutatedAttributesCallback = () => {};
   }
-  if (opt_head) {
+
+  if (insertQuerySelectorAttr) {
+    element.setAttribute('i-amphtml-binding', '');
+  }
+
+  if (insertInHead) {
     env.win.document.head.appendChild(element);
   } else if (container) {
     container.appendChild(element);
@@ -65,7 +78,9 @@ function createElement(env, container, binding, opt_tag, opt_amp, opt_head) {
 function addAmpState(env, container, id, fetchingPromise) {
   const ampState = env.win.document.createElement('amp-state');
   ampState.setAttribute('id', id);
+
   ampState.createdCallback = () => {};
+
   ampState.getImpl = () =>
     Promise.resolve({
       getFetchingPromise() {
@@ -188,6 +203,7 @@ function waitForEvent(env, name) {
       resolve();
       env.win.removeEventListener(name, callback);
     };
+
     env.win.addEventListener(name, callback);
   });
 }
@@ -196,11 +212,22 @@ const FORM_VALUE_CHANGE_EVENT_ARGUMENTS = {
   type: AmpEvents.FORM_VALUE_CHANGE,
   bubbles: true,
 };
-
-describe
-  .configure()
-  .ifChrome()
-  .run('Bind', function () {
+const chromed = describes.sandboxed.configure().ifChrome();
+chromed.run('Bind', {}, function () {
+  describes.repeated(
+    'Walker',
+    {
+      'using TreeWalker': {useQuerySelector: false},
+      'using querySelectorAll': {useQuerySelector: true},
+    },
+    (name, variant) => {
+      describe(name, function () {
+        testSuite.call(this, variant.useQuerySelector);
+      });
+    }
+  );
+
+  function testSuite(useQuerySelector) {
     // Give more than default 2000ms timeout for local testing.
     const TIMEOUT = Math.max(window.ampTestRuntimeConfig.mochaTimeout, 4000);
     this.timeout(TIMEOUT);
@@ -216,24 +243,32 @@ describe
       },
       (env) => {
         let fieBind;
-        let fieBody;
-        let fieWindow;
-
-        let hostWindow;
+        let fieWindow, fieBody;
+        let hostWindow, hostBody;
 
         beforeEach(() => {
           // Make sure we have a chunk instance for testing.
           chunkInstanceForTesting(env.ampdoc);
 
-          fieWindow = env.embed.win;
-          fieBind = new Bind(env.ampdoc, fieWindow);
-          fieBody = env.embed.getBodyElement();
+          if (useQuerySelector) {
+            env.win.document.documentElement.setAttribute(
+              'i-amphtml-binding',
+              ''
+            );
+          }
+
+          fieBind = new Bind(env.ampdoc);
+          fieWindow = env.ampdoc.win;
+          fieBody = env.ampdoc.getBody();
 
-          hostWindow = env.ampdoc.win;
+          hostWindow = env.parentWin;
+          hostBody = env.parentAmpdoc.getBody();
         });
 
         it('should scan for bindings when ampdoc is ready', () => {
-          createElement(env, fieBody, '[text]="1+1"');
+          createElement(env, fieBody, '[text]="1+1"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(fieBind.numberOfBindings()).to.equal(0);
           return onBindReady(env, fieBind).then(() => {
             expect(fieBind.numberOfBindings()).to.equal(1);
@@ -241,14 +276,12 @@ describe
         });
 
         it('should not update host document title for <title> elements', () => {
-          createElement(
-            env,
-            fieBody,
-            '[text]="\'bar\'"',
-            'title',
-            /* opt_amp */ false,
-            /* opt_head */ true
-          );
+          createElement(env, fieBody, '[text]="\'bar\'"', {
+            tag: 'title',
+            amp: false,
+            insertInHead: true,
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           fieWindow.document.title = 'foo';
           hostWindow.document.title = 'foo';
           return onBindReadyAndSetState(env, fieBind, {}).then(() => {
@@ -260,16 +293,18 @@ describe
 
         describe('with Bind in host window', () => {
           let hostBind;
-          let hostBody;
 
           beforeEach(() => {
-            hostBind = new Bind(env.ampdoc);
-            hostBody = env.ampdoc.getBody();
+            hostBind = new Bind(env.parentAmpdoc);
           });
 
           it('should only scan elements in provided window', () => {
-            createElement(env, fieBody, '[text]="1+1"');
-            createElement(env, hostBody, '[text]="2+2"');
+            createElement(env, fieBody, '[text]="1+1"', {
+              insertQuerySelectorAttr: useQuerySelector,
+            });
+            createElement(env, hostBody, '[text]="2+2"', {
+              insertQuerySelectorAttr: useQuerySelector,
+            });
             return Promise.all([
               onBindReady(env, fieBind),
               onBindReady(env, hostBind),
@@ -280,11 +315,14 @@ describe
           });
 
           it('should not be able to access variables from other windows', () => {
-            const element = createElement(env, fieBody, '[text]="foo + bar"');
+            const element = createElement(env, fieBody, '[text]="foo + bar"', {
+              insertQuerySelectorAttr: useQuerySelector,
+            });
             const parentElement = createElement(
               env,
               hostBody,
-              '[text]="foo + bar"'
+              '[text]="foo + bar"',
+              {insertQuerySelectorAttr: useQuerySelector}
             );
             const promises = [
               onBindReadyAndSetState(env, fieBind, {foo: '123', bar: '456'}),
@@ -298,7 +336,7 @@ describe
           });
         });
       }
-    ); // in FIE
+    );
 
     describes.realWin(
       'in shadow ampdoc',
@@ -317,12 +355,21 @@ describe
           // Make sure we have a chunk instance for testing.
           chunkInstanceForTesting(env.ampdoc);
 
+          if (useQuerySelector) {
+            env.win.document.documentElement.setAttribute(
+              'i-amphtml-binding',
+              ''
+            );
+          }
+
           bind = new Bind(env.ampdoc);
           container = env.ampdoc.getBody();
         });
 
         it('should scan for bindings when ampdoc is ready', () => {
-          createElement(env, container, '[text]="1+1"');
+          createElement(env, container, '[text]="1+1"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(bind.numberOfBindings()).to.equal(0);
           return onBindReady(env, bind).then(() => {
             expect(bind.numberOfBindings()).to.equal(1);
@@ -330,14 +377,12 @@ describe
         });
 
         it('should not update document title for <title> elements', () => {
-          createElement(
-            env,
-            container,
-            '[text]="\'bar\'"',
-            'title',
-            /* opt_amp */ false,
-            /* opt_head */ true
-          );
+          createElement(env, container, '[text]="\'bar\'"', {
+            tag: 'title',
+            amp: false,
+            insertInHead: true,
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           env.win.document.title = 'foo';
           return onBindReadyAndSetState(env, bind, {}).then(() => {
             // Make sure does not update the host window's document title.
@@ -345,7 +390,7 @@ describe
           });
         });
       }
-    ); // in shadow ampdoc
+    );
 
     describes.realWin(
       'in single ampdoc',
@@ -368,18 +413,25 @@ describe
 
           // Make sure we have a chunk instance for testing.
           chunkInstanceForTesting(ampdoc);
-
           viewer = Services.viewerForDoc(ampdoc);
           env.sandbox.stub(viewer, 'sendMessage');
 
-          bind = new Bind(ampdoc);
+          if (useQuerySelector) {
+            env.win.document.documentElement.setAttribute(
+              'i-amphtml-binding',
+              ''
+            );
+          }
 
+          bind = new Bind(ampdoc);
           // Connected <div> element created by describes.js.
           container = win.document.getElementById('parent');
 
           history = bind.historyForTesting();
 
-          clock = lolex.install({target: win, toFake: ['Date', 'setTimeout']});
+          clock = fakeTimers.withGlobal(win).install({
+            toFake: ['Date', 'setTimeout'],
+          });
         });
 
         afterEach(() => {
@@ -396,14 +448,22 @@ describe
         });
 
         it('should not send "bindReady" until all <amp-state> are built', () => {
-          const element = createElement(env, container, '', 'amp-state', true);
+          const element = createElement(env, container, '', {
+            tag: 'amp-state',
+            amp: true,
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+
           // Makes dom.whenUpgradedToCustomElement() resolve immediately.
           element.createdCallback = () => {};
+
           const parseAndUpdate = env.sandbox.spy();
+
           element.getImpl = () => {
             expect(viewer.sendMessage).to.not.be.called;
             return Promise.resolve({parseAndUpdate});
           };
+
           return onBindReady(env, bind).then(() => {
             expect(parseAndUpdate).to.be.calledOnce;
             expect(viewer.sendMessage).to.be.calledOnce;
@@ -412,7 +472,9 @@ describe
         });
 
         it('should scan for bindings when ampdoc is ready', () => {
-          createElement(env, container, '[text]="1+1"');
+          createElement(env, container, '[text]="1+1"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(bind.numberOfBindings()).to.equal(0);
           return onBindReady(env, bind).then(() => {
             expect(bind.numberOfBindings()).to.equal(1);
@@ -430,14 +492,21 @@ describe
           // </p>
           const parent = document.createElement('div');
           container.appendChild(parent);
-
           const uncle = document.createElement('p');
           container.appendChild(uncle);
 
-          const list = createElement(env, parent, `[class]="'x'"`, 'amp-list');
-          const child = createElement(env, list, '[text]="2+2"', 'h1');
-          const cousin = createElement(env, uncle, '[text]="3+3"', 'span');
-
+          const list = createElement(env, parent, `[class]="'x'"`, {
+            tag: 'amp-list',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+          const child = createElement(env, list, '[text]="2+2"', {
+            tag: 'h1',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+          const cousin = createElement(env, uncle, '[text]="3+3"', {
+            tag: 'span',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(bind.numberOfBindings()).to.equal(0);
           return onBindReadyAndSetState(env, bind, {}).then(() => {
             // Children of amp-list should be skipped.
@@ -450,10 +519,14 @@ describe
         });
 
         it('should not update attribute for non-primitive new values', () => {
-          const list = createElement(env, container, `[src]="x"`, 'amp-list');
+          const list = createElement(env, container, `[src]="x"`, {
+            tag: 'amp-list',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           list.setAttribute('src', 'https://foo.example/data.json');
-
-          return onBindReadyAndSetState(env, bind, {x: [1, 2, 3]}).then(() => {
+          return onBindReadyAndSetState(env, bind, {
+            x: [1, 2, 3],
+          }).then(() => {
             expect(list.getAttribute('src')).to.equal(
               'https://foo.example/data.json'
             );
@@ -467,7 +540,9 @@ describe
           doc.documentElement.appendChild(pseudoFixedLayer);
 
           // Make sure that the sibling <body> is scanned for bindings.
-          createElement(env, pseudoFixedLayer, '[text]="1+1"');
+          createElement(env, pseudoFixedLayer, '[text]="1+1"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           return onBindReady(env, bind).then(() => {
             expect(bind.numberOfBindings()).to.equal(1);
           });
@@ -477,7 +552,8 @@ describe
           const element = createElement(
             env,
             container,
-            'data-amp-bind-text="1+1"'
+            'data-amp-bind-text="1+1"',
+            {insertQuerySelectorAttr: useQuerySelector}
           );
           expect(bind.numberOfBindings()).to.equal(0);
           expect(element.textContent).to.equal('');
@@ -491,7 +567,8 @@ describe
           const element = createElement(
             env,
             container,
-            '[text]="1+1" data-amp-bind-text="2+2"'
+            '[text]="1+1" data-amp-bind-text="2+2"',
+            {insertQuerySelectorAttr: useQuerySelector}
           );
           expect(bind.numberOfBindings()).to.equal(0);
           expect(element.textContent).to.equal('');
@@ -501,20 +578,27 @@ describe
           });
         });
 
-        it('should call createTreeWalker() with all params', () => {
-          const spy = env.sandbox.spy(env.win.document, 'createTreeWalker');
-          createElement(env, container, '[text]="1+1"');
-          return onBindReady(env, bind).then(() => {
-            // createTreeWalker() on IE does not support optional arguments.
-            expect(spy.callCount).to.equal(1);
-            expect(spy.firstCall.args.length).to.equal(4);
+        if (!useQuerySelector) {
+          it('should call createTreeWalker() with all params', () => {
+            const spy = env.sandbox.spy(env.win.document, 'createTreeWalker');
+            createElement(env, container, '[text]="1+1"', {
+              insertQuerySelectorAttr: useQuerySelector,
+            });
+            return onBindReady(env, bind).then(() => {
+              // createTreeWalker() on IE does not support optional arguments.
+              expect(spy.callCount).to.equal(1);
+              expect(spy.firstCall.args.length).to.equal(4);
+            });
           });
-        });
+        }
 
         it('should have same state after removing + re-adding a subtree', () => {
           for (let i = 0; i < 5; i++) {
-            createElement(env, container, '[text]="1+1"');
+            createElement(env, container, '[text]="1+1"', {
+              insertQuerySelectorAttr: useQuerySelector,
+            });
           }
+
           expect(bind.numberOfBindings()).to.equal(0);
           return onBindReady(env, bind)
             .then(() => {
@@ -537,7 +621,9 @@ describe
           return onBindReady(env, bind)
             .then(() => {
               expect(bind.numberOfBindings()).to.equal(0);
-              const element = createElement(env, container, '[text]="1+1"');
+              const element = createElement(env, container, '[text]="1+1"', {
+                insertQuerySelectorAttr: useQuerySelector,
+              });
               dynamicTag.appendChild(element);
               dynamicTag.dispatchEvent(
                 new Event(AmpEvents.DOM_UPDATE, {bubbles: true})
@@ -550,7 +636,9 @@ describe
         });
 
         it('should NOT apply expressions on first load', () => {
-          const element = createElement(env, container, '[text]="1+1"');
+          const element = createElement(env, container, '[text]="1+1"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(element.textContent).to.equal('');
           return onBindReady(env, bind).then(() => {
             expect(element.textContent).to.equal('');
@@ -558,11 +646,23 @@ describe
         });
 
         it('should verify class bindings in dev mode', () => {
-          window.__AMP_MODE = {development: true, test: true};
-          createElement(env, container, '[class]="\'foo\'" class="foo"');
-          createElement(env, container, '[class]="\'foo\'" class=" foo "');
-          createElement(env, container, '[class]="\'\'"');
-          createElement(env, container, '[class]="\'bar\'" class="qux"'); // Error
+          window.__AMP_MODE = {
+            development: true,
+            test: true,
+          };
+          createElement(env, container, '[class]="\'foo\'" class="foo"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+          createElement(env, container, '[class]="\'foo\'" class=" foo "', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+          createElement(env, container, '[class]="\'\'"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+          createElement(env, container, '[class]="\'bar\'" class="qux"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+          // Error
           const warnSpy = env.sandbox.spy(user(), 'warn');
           return onBindReady(env, bind).then(() => {
             expect(warnSpy).to.be.calledOnce;
@@ -571,12 +671,16 @@ describe
         });
 
         it('should verify string attribute bindings in dev mode', () => {
-          window.__AMP_MODE = {development: true, test: true};
+          window.__AMP_MODE = {
+            development: true,
+            test: true,
+          };
           // Only the initial value for [a] binding does not match.
           createElement(
             env,
             container,
-            '[text]="\'a\'" [class]="\'b\'" class="b"'
+            '[text]="\'a\'" [class]="\'b\'" class="b"',
+            {insertQuerySelectorAttr: useQuerySelector}
           );
           const warnSpy = env.sandbox.spy(user(), 'warn');
           return onBindReady(env, bind).then(() => {
@@ -586,10 +690,23 @@ describe
         });
 
         it('should verify boolean attribute bindings in dev mode', () => {
-          window.__AMP_MODE = {development: true, test: true};
-          createElement(env, container, '[disabled]="true" disabled', 'button');
-          createElement(env, container, '[disabled]="false"', 'button');
-          createElement(env, container, '[disabled]="true"', 'button'); // Mismatch.
+          window.__AMP_MODE = {
+            development: true,
+            test: true,
+          };
+          createElement(env, container, '[disabled]="true" disabled', {
+            tag: 'button',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+          createElement(env, container, '[disabled]="false"', {
+            tag: 'button',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+          createElement(env, container, '[disabled]="true"', {
+            tag: 'button',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+          // Mismatch.
           const warnSpy = env.sandbox.spy(user(), 'warn');
           return onBindReady(env, bind).then(() => {
             expect(warnSpy).to.be.calledOnce;
@@ -598,7 +715,9 @@ describe
         });
 
         it('should skip digest if specified in setState()', () => {
-          const element = createElement(env, container, '[text]="1+1"');
+          const element = createElement(env, container, '[text]="1+1"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(element.textContent).to.equal('');
           return onBindReady(env, bind).then(() => {
             bind.setState({}, /* opt_skipDigest */ true);
@@ -608,7 +727,9 @@ describe
         });
 
         it('should support binding to string attributes', () => {
-          const element = createElement(env, container, '[text]="1+1"');
+          const element = createElement(env, container, '[text]="1+1"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(element.textContent).to.equal('');
           return onBindReadyAndSetState(env, bind, {}).then(() => {
             expect(element.textContent).to.equal('2');
@@ -620,7 +741,10 @@ describe
             env,
             container,
             '[checked]="true" [disabled]="false" disabled',
-            /* opt_tagName */ 'input'
+            {
+              tag: 'input',
+              insertQuerySelectorAttr: useQuerySelector,
+            }
           );
           expect(element.getAttribute('checked')).to.equal(null);
           expect(element.getAttribute('disabled')).to.equal('');
@@ -632,12 +756,10 @@ describe
 
         it('should update values first, then attributes', () => {
           const spy = env.sandbox.spy();
-          const element = createElement(
-            env,
-            container,
-            '[value]="foo"',
-            'input'
-          );
+          const element = createElement(env, container, '[value]="foo"', {
+            tag: 'input',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           env.sandbox.stub(element, 'value').set(spy);
           env.sandbox.stub(element, 'setAttribute').callsFake(spy);
           return onBindReadyAndSetState(env, bind, {'foo': '2'}).then(() => {
@@ -650,12 +772,10 @@ describe
         });
 
         it('should update properties for empty strings', function* () {
-          const element = createElement(
-            env,
-            container,
-            '[value]="foo"',
-            'input'
-          );
+          const element = createElement(env, container, '[value]="foo"', {
+            tag: 'input',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           yield onBindReadyAndSetState(env, bind, {'foo': 'bar'});
           expect(element.value).to.equal('bar');
           yield onBindReadyAndSetState(env, bind, {'foo': ''});
@@ -663,7 +783,9 @@ describe
         });
 
         it('should support binding to Node.textContent', () => {
-          const element = createElement(env, container, '[text]="\'abc\'"');
+          const element = createElement(env, container, '[text]="\'abc\'"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(element.textContent).to.equal('');
           return onBindReadyAndSetState(env, bind, {}).then(() => {
             expect(element.textContent).to.equal('abc');
@@ -671,12 +793,10 @@ describe
         });
 
         it('should set value for [text] in <textarea>', () => {
-          const element = createElement(
-            env,
-            container,
-            '[text]="\'abc\'"',
-            'textarea'
-          );
+          const element = createElement(env, container, '[text]="\'abc\'"', {
+            tag: 'textarea',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(element.textContent).to.equal('');
           expect(element.value).to.equal('');
           return onBindReadyAndSetState(env, bind, {}).then(() => {
@@ -690,7 +810,10 @@ describe
             env,
             container,
             '[defaultText]="\'abc\'"',
-            'textarea'
+            {
+              tag: 'textarea',
+              insertQuerySelectorAttr: useQuerySelector,
+            }
           );
           expect(element.textContent).to.equal('');
           expect(element.value).to.equal('');
@@ -703,14 +826,12 @@ describe
         });
 
         it('should update document title for <title> elements', () => {
-          const element = createElement(
-            env,
-            container,
-            '[text]="\'bar\'"',
-            'title',
-            /* opt_amp */ false,
-            /* opt_head */ true
-          );
+          const element = createElement(env, container, '[text]="\'bar\'"', {
+            tag: 'title',
+            amp: false,
+            insertInHead: true,
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           element.textContent = 'foo';
           env.win.document.title = 'foo';
           return onBindReadyAndSetState(env, bind, {}).then(() => {
@@ -727,14 +848,19 @@ describe
           title.textContent = 'foo';
           env.win.document.head.appendChild(title);
           // Add <title [text]="'bar'"> to <body>.
-          createElement(env, container, '[text]="\'bar\'"', 'title');
+          createElement(env, container, '[text]="\'bar\'"', {
+            tag: 'title',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           return onBindReadyAndSetState(env, bind, {}).then(() => {
             expect(env.win.document.title).to.equal('foo');
           });
         });
 
         it('should support binding to CSS classes with strings', () => {
-          const element = createElement(env, container, '[class]="[\'abc\']"');
+          const element = createElement(env, container, '[class]="[\'abc\']"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(toArray(element.classList)).to.deep.equal([]);
           return onBindReadyAndSetState(env, bind, {}).then(() => {
             expect(toArray(element.classList)).to.deep.equal(['abc']);
@@ -745,7 +871,8 @@ describe
           const element = createElement(
             env,
             container,
-            "[class]=\"['a','b']\""
+            "[class]=\"['a','b']\"",
+            {insertQuerySelectorAttr: useQuerySelector}
           );
           expect(toArray(element.classList)).to.deep.equal([]);
           return onBindReadyAndSetState(env, bind, {}).then(() => {
@@ -754,7 +881,9 @@ describe
         });
 
         it('should support binding to CSS classes with a null value', () => {
-          const element = createElement(env, container, '[class]="null"');
+          const element = createElement(env, container, '[class]="null"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(toArray(element.classList)).to.deep.equal([]);
           return onBindReadyAndSetState(env, bind, {}).then(() => {
             expect(toArray(element.classList)).to.deep.equal([]);
@@ -762,12 +891,10 @@ describe
         });
 
         it('should support binding to CSS classes for svg tags', () => {
-          const element = createElement(
-            env,
-            container,
-            '[class]="[\'abc\']"',
-            'svg'
-          );
+          const element = createElement(env, container, '[class]="[\'abc\']"', {
+            tag: 'svg',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(toArray(element.classList)).to.deep.equal([]);
           return onBindReadyAndSetState(env, bind, {}).then(() => {
             expect(toArray(element.classList)).to.deep.equal(['abc']);
@@ -775,12 +902,10 @@ describe
         });
 
         it('supports binding to CSS classes for svg tags with a null value', () => {
-          const element = createElement(
-            env,
-            container,
-            '[class]="null"',
-            'svg'
-          );
+          const element = createElement(env, container, '[class]="null"', {
+            tag: 'svg',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(toArray(element.classList)).to.deep.equal([]);
           return onBindReadyAndSetState(env, bind, {}).then(() => {
             expect(toArray(element.classList)).to.deep.equal([]);
@@ -858,7 +983,9 @@ describe
         });
 
         it('should support parsing exprs in setStateWithExpression()', () => {
-          const element = createElement(env, container, '[text]="onePlusOne"');
+          const element = createElement(env, container, '[text]="onePlusOne"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(element.textContent).to.equal('');
           const promise = onBindReadyAndSetStateWithExpression(
             env,
@@ -910,7 +1037,7 @@ describe
 
           describe('with trusted viewer', () => {
             beforeEach(() => {
-              window.sandbox
+              env.sandbox
                 .stub(viewer, 'isTrustedViewer')
                 .returns(Promise.resolve(true));
             });
@@ -953,7 +1080,8 @@ describe
           const element = createElement(
             env,
             container,
-            '[text]="mystate.mykey"'
+            '[text]="mystate.mykey"',
+            {insertQuerySelectorAttr: useQuerySelector}
           );
           expect(element.textContent).to.equal('');
           const promise = onBindReadyAndSetStateWithObject(env, bind, {
@@ -1030,7 +1158,9 @@ describe
         it('should support pushStateWithExpression()', () => {
           env.sandbox.spy(history, 'push');
 
-          const element = createElement(env, container, '[text]="foo"');
+          const element = createElement(env, container, '[text]="foo"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(element.textContent).to.equal('');
           const promise = bind.pushStateWithExpression('{"foo": "bar"}', {});
           return promise
@@ -1051,7 +1181,9 @@ describe
         it('pushStateWithExpression() should work with nested objects', () => {
           env.sandbox.spy(history, 'push');
 
-          const element = createElement(env, container, '[text]="foo.bar"');
+          const element = createElement(env, container, '[text]="foo.bar"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(element.textContent).to.equal('');
           return bind
             .pushStateWithExpression('{foo: {bar: 0}}', {})
@@ -1076,12 +1208,11 @@ describe
         });
 
         it('should ignore <amp-state> updates if specified in setState()', () => {
-          const element = createElement(
-            env,
-            container,
-            '[src]="foo"',
-            'amp-state'
-          );
+          const element = createElement(env, container, '[src]="foo"', {
+            tag: 'amp-state',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+
           // Makes dom.whenUpgradedToCustomElement() resolve immediately.
           element.createdCallback = () => {};
           element.getImpl = () =>
@@ -1101,13 +1232,10 @@ describe
         });
 
         it('should support NOT override internal AMP CSS classes', () => {
-          const element = createElement(
-            env,
-            container,
-            '[class]="[\'abc\']"',
-            /* opt_tagName */ undefined,
-            /* opt_amp */ true
-          );
+          const element = createElement(env, container, '[class]="[\'abc\']"', {
+            amp: true,
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(toArray(element.classList)).to.deep.equal([
             'i-amphtml-foo',
             '-amp-foo',
@@ -1127,13 +1255,11 @@ describe
           const binding =
             '[text]="1+1" [value]="\'4\'" value="4" ' +
             'checked [checked]="false" [disabled]="true" [multiple]="false"';
-          const element = createElement(
-            env,
-            container,
-            binding,
-            /* opt_tagName */ 'input',
-            /* opt_amp */ true
-          );
+          const element = createElement(env, container, binding, {
+            tag: 'input',
+            amp: true,
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           const spy = env.sandbox.spy(element, 'mutatedAttributesCallback');
           return onBindReadyAndSetState(env, bind, {}).then(() => {
             expect(spy).calledWithMatch({
@@ -1148,13 +1274,15 @@ describe
                 value: 4,
                 multiple: false,
               })
-            ).to.be.true; // sinon-chai doesn't support "never" API.
+            ).to.be.true;
           });
         });
 
         it('should support scope variable references', () => {
           const binding = '[text]="foo + bar + baz.qux.join(\',\')"';
-          const element = createElement(env, container, binding);
+          const element = createElement(env, container, binding, {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           expect(element.textContent).to.equal('');
           return onBindReadyAndSetState(env, bind, {
             foo: 'abc',
@@ -1170,7 +1298,10 @@ describe
         it('should NOT mutate elements if expression result is unchanged', () => {
           const binding =
             '[value]="foo" [class]="\'abc\'" [text]="\'a\'+\'b\'"';
-          const element = createElement(env, container, binding, 'input');
+          const element = createElement(env, container, binding, {
+            tag: 'input',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           element.mutatedAttributesCallback = env.sandbox.spy();
           return onBindReadyAndSetState(env, bind, {foo: {bar: [1]}})
             .then(() => {
@@ -1201,7 +1332,8 @@ describe
           const element = createElement(
             env,
             container,
-            '[invalidBinding]="1+1"'
+            '[invalidBinding]="1+1"',
+            {insertQuerySelectorAttr: useQuerySelector}
           );
           return onBindReadyAndSetState(env, bind, {}).then(() => {
             expect(element.getAttribute('invalidbinding')).to.be.null;
@@ -1209,8 +1341,14 @@ describe
         });
 
         it('should rewrite attribute values regardless of result type', () => {
-          const withString = createElement(env, container, '[href]="foo"', 'a');
-          const withArray = createElement(env, container, '[href]="bar"', 'a');
+          const withString = createElement(env, container, '[href]="foo"', {
+            tag: 'a',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+          const withArray = createElement(env, container, '[href]="bar"', {
+            tag: 'a',
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           return onBindReadyAndSetState(env, bind, {
             foo: '?__amp_source_origin',
             bar: ['?__amp_source_origin'],
@@ -1224,14 +1362,18 @@ describe
           bind.setMaxNumberOfBindingsForTesting(2);
           const errorStub = env.sandbox.stub(dev(), 'expectedError');
 
-          const foo = createElement(env, container, '[text]="foo"');
+          const foo = createElement(env, container, '[text]="foo"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           const bar = createElement(
             env,
             container,
-            '[text]="bar" [class]="baz"'
+            '[text]="bar" [class]="baz"',
+            {insertQuerySelectorAttr: useQuerySelector}
           );
-          const qux = createElement(env, container, '[text]="qux"');
-
+          const qux = createElement(env, container, '[text]="qux"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           return onBindReadyAndSetState(env, bind, {
             foo: 1,
             bar: 2,
@@ -1255,11 +1397,18 @@ describe
           bind.addOverridableKey('foo');
           bind.addOverridableKey('bar');
 
-          const foo = createElement(env, container, '[text]="foo"');
-          const bar = createElement(env, container, '[text]="bar"');
-          const baz = createElement(env, container, '[text]="baz"');
-          const qux = createElement(env, container, '[text]="qux"');
-
+          const foo = createElement(env, container, '[text]="foo"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+          const bar = createElement(env, container, '[text]="bar"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+          const baz = createElement(env, container, '[text]="baz"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
+          const qux = createElement(env, container, '[text]="qux"', {
+            insertQuerySelectorAttr: useQuerySelector,
+          });
           return onBindReadyAndSetState(env, bind, {
             foo: 1,
             bar: 2,
@@ -1289,9 +1438,13 @@ describe
           let toAdd;
 
           beforeEach(async () => {
-            toRemove = createElement(env, container, '[text]="foo"');
+            toRemove = createElement(env, container, '[text]="foo"', {
+              insertQuerySelectorAttr: useQuerySelector,
+            });
             // New elements to rescan() don't need to be attached to DOM.
-            toAdd = createElement(env, /* container */ null, '[text]="1+1"');
+            toAdd = createElement(env, /* container */ null, '[text]="1+1"', {
+              insertQuerySelectorAttr: useQuerySelector,
+            });
           });
 
           it('{update: true, fast: true}', async () => {
@@ -1365,9 +1518,11 @@ describe
           });
 
           it('{update: "evaluate"}', async () => {
-            toAdd = createElement(env, /* container */ null, '[text]="x"');
             const options = {update: 'evaluate', fast: false};
 
+            toAdd = createElement(env, /* container */ null, '[text]="x"', {
+              insertQuerySelectorAttr: useQuerySelector,
+            });
             // `toRemove` is updated normally before removal.
             await onBindReadyAndSetState(env, bind, {foo: 'foo', x: '1'});
             expect(toRemove.textContent).to.equal('foo');
@@ -1392,12 +1547,10 @@ describe
 
         describe('AmpEvents.FORM_VALUE_CHANGE', () => {
           it('should dispatch FORM_VALUE_CHANGE on <input [value]> changes', () => {
-            const element = createElement(
-              env,
-              container,
-              '[value]="foo"',
-              'input'
-            );
+            const element = createElement(env, container, '[value]="foo"', {
+              tag: 'input',
+              insertQuerySelectorAttr: useQuerySelector,
+            });
             const spy = env.sandbox.spy(element, 'dispatchEvent');
 
             return onBindReadyAndSetState(env, bind, {foo: 'bar'}).then(() => {
@@ -1407,12 +1560,10 @@ describe
           });
 
           it('should dispatch FORM_VALUE_CHANGE on <input [checked]> changes', () => {
-            const element = createElement(
-              env,
-              container,
-              '[checked]="foo"',
-              'input'
-            );
+            const element = createElement(env, container, '[checked]="foo"', {
+              tag: 'input',
+              insertQuerySelectorAttr: useQuerySelector,
+            });
             const spy = env.sandbox.spy(element, 'dispatchEvent');
 
             return onBindReadyAndSetState(env, bind, {foo: 'checked'}).then(
@@ -1425,11 +1576,13 @@ describe
 
           it('should dispatch FORM_VALUE_CHANGE at parent <select> on <option [selected]> changes', () => {
             const select = env.win.document.createElement('select');
-            select.innerHTML = `
-              <optgroup>
-                <option [selected]="foo"></option>
-              </optgroup>
-            `;
+            const optgroup = createElement(env, select, '', {
+              tag: 'optgroup',
+            });
+            createElement(env, optgroup, '[selected]="foo"', {
+              tag: 'option',
+              insertQuerySelectorAttr: useQuerySelector,
+            });
             container.appendChild(select);
 
             const spy = env.sandbox.spy(select, 'dispatchEvent');
@@ -1446,12 +1599,10 @@ describe
           });
 
           it('should dispatch FORM_VALUE_CHANGE on <textarea [text]> changes', () => {
-            const element = createElement(
-              env,
-              container,
-              '[text]="foo"',
-              'textarea'
-            );
+            const element = createElement(env, container, '[text]="foo"', {
+              tag: 'textarea',
+              insertQuerySelectorAttr: useQuerySelector,
+            });
             const spy = env.sandbox.spy(element, 'dispatchEvent');
 
             return onBindReadyAndSetState(env, bind, {foo: 'bar'}).then(() => {
@@ -1464,12 +1615,10 @@ describe
           });
 
           it('should NOT dispatch FORM_VALUE_CHANGE on other attributes changes', () => {
-            const element = createElement(
-              env,
-              container,
-              '[name]="foo"',
-              'input'
-            );
+            const element = createElement(env, container, '[name]="foo"', {
+              tag: 'input',
+              insertQuerySelectorAttr: useQuerySelector,
+            });
             const spy = env.sandbox.spy(element, 'dispatchEvent');
 
             return onBindReadyAndSetState(env, bind, {foo: 'name'}).then(() => {
@@ -1478,7 +1627,10 @@ describe
           });
 
           it('should NOT dispatch FORM_VALUE_CHANGE on other element changes', () => {
-            const element = createElement(env, container, '[text]="foo"', 'p');
+            const element = createElement(env, container, '[text]="foo"', {
+              tag: 'p',
+              insertQuerySelectorAttr: useQuerySelector,
+            });
             const spy = env.sandbox.spy(element, 'dispatchEvent');
 
             return onBindReadyAndSetState(env, bind, {foo: 'selected'}).then(
@@ -1489,5 +1641,6 @@ describe
           });
         });
       }
-    ); // in single ampdoc
-  });
+    );
+  }
+});
diff --git a/extensions/amp-bind/0.1/test/test-amp-state.js b/extensions/amp-bind/0.1/test/test-amp-state.js
index 35ce9ecd9af61..710eb30853552 100644
--- a/extensions/amp-bind/0.1/test/test-amp-state.js
+++ b/extensions/amp-bind/0.1/test/test-amp-state.js
@@ -15,8 +15,7 @@
  */
 
 import '../amp-bind';
-import * as xhrUtils from '../../../../src/utils/xhr-utils';
-import {ActionTrust} from '../../../../src/action-constants';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
 import {Services} from '../../../../src/services';
 import {UrlReplacementPolicy} from '../../../../src/batched-json';
 
@@ -48,8 +47,8 @@ describes.realWin(
       return el;
     }
 
-    beforeEach(() => {
-      ({win, ampdoc} = env);
+    beforeEach(async () => {
+      ({ampdoc, win} = env);
 
       whenFirstVisiblePromise = new Promise((resolve, reject) => {
         whenFirstVisiblePromiseResolve = resolve;
@@ -61,11 +60,7 @@ describes.realWin(
       env.sandbox.stub(ampdoc, 'hasBeenVisible').returns(false);
 
       element = getAmpState();
-      ampState = element.implementation_;
-
-      env.sandbox
-        .stub(xhrUtils, 'getViewerAuthTokenIfAvailable')
-        .returns(Promise.resolve());
+      ampState = await element.getImpl(false);
 
       // TODO(choumx): Remove stubbing of private function fetch_() once
       // batchFetchJsonFor() is easily stub-able.
@@ -79,7 +74,7 @@ describes.realWin(
 
     it('should not fetch until doc is visible', async () => {
       element.setAttribute('src', 'https://foo.com/bar?baz=1');
-      element.build();
+      await element.buildInternal();
 
       whenFirstVisiblePromiseReject();
       await whenFirstVisiblePromise.catch(() => {});
@@ -90,7 +85,7 @@ describes.realWin(
 
     it('should fetch if `src` attribute exists', async () => {
       element.setAttribute('src', 'https://foo.com/bar?baz=1');
-      element.build();
+      await element.buildInternal();
 
       whenFirstVisiblePromiseResolve();
       await whenFirstVisiblePromise;
@@ -102,8 +97,7 @@ describes.realWin(
       expect(ampState.fetch_).to.have.been.calledWithExactly(
         /* ampdoc */ env.sandbox.match.any,
         UrlReplacementPolicy.ALL,
-        /* refresh */ env.sandbox.match.falsy,
-        /* token */ env.sandbox.match.falsy
+        /* refresh */ env.sandbox.match.falsy
       );
 
       expect(bind.setState).calledWithMatch(
@@ -119,7 +113,7 @@ describes.realWin(
       env.sandbox.stub(Services, 'actionServiceForDoc').returns(actions);
 
       element.setAttribute('src', 'https://foo.com/bar?baz=1');
-      element.build();
+      await element.buildInternal();
 
       expect(actions.trigger).to.not.have.been.called;
 
@@ -141,7 +135,7 @@ describes.realWin(
       env.sandbox.spy(ampState, 'registerAction');
 
       element.setAttribute('src', 'https://foo.com/bar?baz=1');
-      element.build();
+      await element.buildInternal();
 
       expect(ampState.registerAction).calledWithExactly(
         'refresh',
@@ -153,7 +147,7 @@ describes.realWin(
       env.sandbox.spy(ampState, 'registerAction');
 
       element.setAttribute('src', 'https://foo.com/bar?baz=1');
-      element.build();
+      await element.buildInternal();
 
       const action = {method: 'refresh', satisfiesTrust: () => true};
       await ampState.executeAction(action);
@@ -175,7 +169,7 @@ describes.realWin(
     it('should parse its child script', async () => {
       element.innerHTML =
         '<script type="application/json">{"local": "data"}</script>';
-      await element.build();
+      await element.buildInternal();
 
       expect(bind.setState).calledWithMatch(
         {myAmpState: {local: 'data'}},
@@ -192,7 +186,7 @@ describes.realWin(
       element.innerHTML =
         '<script type="application/json">{"local": "data"}</script>';
       element.setAttribute('src', 'https://foo.com/bar?baz=1');
-      await element.build();
+      await element.buildInternal();
 
       // No fetch should happen until doc is visible.
       expect(ampState.fetch_).to.not.have.been.called;
@@ -213,9 +207,9 @@ describes.realWin(
       );
     });
 
-    it('should not fetch if `src` is mutated and doc is not visible', () => {
+    it('should not fetch if `src` is mutated and doc is not visible', async () => {
       element.setAttribute('src', 'https://foo.com/bar?baz=1');
-      element.build();
+      await element.buildInternal();
 
       // No fetch should happen until doc is visible.
       expect(ampState.fetch_).to.not.have.been.called;
@@ -230,7 +224,7 @@ describes.realWin(
 
     it('should fetch json if `src` is mutated', async () => {
       element.setAttribute('src', 'https://foo.com/bar?baz=1');
-      element.build();
+      await element.buildInternal();
 
       // No fetch should happen until doc is visible.
       expect(ampState.fetch_).to.not.have.been.called;
@@ -251,34 +245,5 @@ describes.realWin(
         {skipEval: false, skipAmpState: true}
       );
     });
-
-    it('should use token with [crossorigin="amp-viewer-auth-token-via-post"]`', async () => {
-      xhrUtils.getViewerAuthTokenIfAvailable.returns(
-        Promise.resolve('idToken')
-      );
-
-      element.setAttribute('src', 'https://foo.com/bar?baz=1');
-      element.setAttribute('crossorigin', 'amp-viewer-auth-token-via-post');
-      element.build();
-
-      whenFirstVisiblePromiseResolve();
-      await whenFirstVisiblePromise;
-
-      // await a single macro-task to let promise chains resolve.
-      await new Promise((resolve) => setTimeout(resolve, 0));
-
-      expect(ampState.fetch_).to.have.been.calledOnce;
-      expect(ampState.fetch_).to.have.been.calledWithExactly(
-        /* ampdoc */ env.sandbox.match.any,
-        UrlReplacementPolicy.ALL,
-        /* refresh */ env.sandbox.match.falsy,
-        'idToken'
-      );
-
-      expect(bind.setState).calledWithMatch(
-        {myAmpState: {remote: 'data'}},
-        {skipEval: true, skipAmpState: false}
-      );
-    });
   }
 );
diff --git a/extensions/amp-bind/0.1/test/test-bind-evaluator.js b/extensions/amp-bind/0.1/test/test-bind-evaluator.js
index af83959488b92..5a181811d5dd8 100644
--- a/extensions/amp-bind/0.1/test/test-bind-evaluator.js
+++ b/extensions/amp-bind/0.1/test/test-bind-evaluator.js
@@ -17,7 +17,7 @@
 import {BindEvaluator} from '../bind-evaluator';
 import {BindExpression} from '../bind-expression';
 
-describe('BindEvaluator', () => {
+describes.sandboxed('BindEvaluator', {}, (env) => {
   let evaluator;
 
   beforeEach(() => {
@@ -91,7 +91,7 @@ describe('BindEvaluator', () => {
         expressionString: '1+1',
       },
     ]);
-    const stub = window.sandbox.stub(BindExpression.prototype, 'evaluate');
+    const stub = env.sandbox.stub(BindExpression.prototype, 'evaluate');
     stub.returns('stubbed');
     evaluator.evaluateBindings({});
     expect(stub.calledOnce).to.be.true;
@@ -126,7 +126,7 @@ describe('BindEvaluator', () => {
       },
     ]);
     expect(numberOfBindings()).to.equal(1);
-    const {results, errors} = evaluator.evaluateBindings({oneplusone: 2});
+    const {errors, results} = evaluator.evaluateBindings({oneplusone: 2});
     expect(results['oneplusone + 2']).to.equal(4);
     expect(errors['oneplusone + 2']).to.be.undefined;
   });
@@ -139,13 +139,13 @@ describe('BindEvaluator', () => {
         expressionString: 'global',
       },
     ]);
-    let {results, errors} = evaluator.evaluateBindings({x: 1});
+    let {errors, results} = evaluator.evaluateBindings({x: 1});
     expect(results['global']).to.deep.include({x: 1});
     expect(results['global']).to.have.property('global');
     expect(errors['global']).to.be.undefined;
 
     // "global" should be overridable by user-defined variables.
-    ({results, errors} = evaluator.evaluateBindings({
+    ({errors, results} = evaluator.evaluateBindings({
       x: 1,
       global: {x: 2},
     }));
@@ -163,7 +163,7 @@ describe('BindEvaluator', () => {
       },
     ]);
     expect(numberOfBindings()).to.equal(1);
-    const {results, errors} = evaluator.evaluateBindings({});
+    const {errors, results} = evaluator.evaluateBindings({});
     expect(results['doesntExist']).to.be.null;
     expect(errors['doesntExist']).to.be.undefined;
   });
@@ -177,7 +177,7 @@ describe('BindEvaluator', () => {
         expressionString: string,
       },
     ]);
-    let {results, errors} = evaluator.evaluateBindings({});
+    let {errors, results} = evaluator.evaluateBindings({});
     expect(results[string]).to.equal(
       /* eslint no-script-url: 0 */ 'javascript:alert(1)'
     );
@@ -191,7 +191,7 @@ describe('BindEvaluator', () => {
         expressionString: string,
       },
     ]);
-    ({results, errors} = evaluator.evaluateBindings({}));
+    ({errors, results} = evaluator.evaluateBindings({}));
     expect(results[string]).to.be.undefined;
     expect(errors[string].message).to.match(/not a valid result/);
   });
@@ -213,7 +213,7 @@ describe('BindEvaluator', () => {
       },
     ]);
     expect(numberOfBindings()).to.equal(1);
-    const {results, errors} = evaluator.evaluateBindings({oneplusone: 2});
+    const {errors, results} = evaluator.evaluateBindings({oneplusone: 2});
     expect(results['add(oneplusone, 2)']).to.equal(4);
     expect(errors['add(oneplusone, 2)']).to.be.undefined;
   });
@@ -240,7 +240,7 @@ describe('BindEvaluator', () => {
       },
     ]);
     expect(numberOfBindings()).to.equal(1);
-    const {results, errors} = evaluator.evaluateBindings({oneplusone: 2});
+    const {errors, results} = evaluator.evaluateBindings({oneplusone: 2});
     expect(results['addThree(oneplusone, 2, 2)']).to.equal(6);
     expect(errors['addThree(oneplusone, 2, 2)']).to.be.undefined;
   });
@@ -253,7 +253,7 @@ describe('BindEvaluator', () => {
         expressionString: '[0].map(x => ({a: x+1}))',
       },
     ]);
-    const {results, errors} = evaluator.evaluateBindings({});
+    const {errors, results} = evaluator.evaluateBindings({});
     expect(results['[0].map(x => ({a: x+1}))']).to.deep.equal([{a: 1}]);
     expect(errors['[0].map(x => ({a: x+1}))']).to.be.undefined;
   });
@@ -274,7 +274,7 @@ describe('BindEvaluator', () => {
       },
     ]);
 
-    const {results, errors} = evaluator.evaluateBindings({});
+    const {errors, results} = evaluator.evaluateBindings({});
     expect(results['recurse()']).to.be.undefined;
     expect(errors['recurse()'].message).to.match(
       /recurse is not a supported function/
@@ -303,7 +303,7 @@ describe('BindEvaluator', () => {
       },
     ]);
 
-    const {results, errors} = evaluator.evaluateBindings({});
+    const {errors, results} = evaluator.evaluateBindings({});
     expect(results['bar()']).to.be.undefined;
     expect(errors['bar()'].message).to.match(/bar is not a supported function/);
   });
diff --git a/extensions/amp-bind/0.1/test/test-bind-expression.js b/extensions/amp-bind/0.1/test/test-bind-expression.js
index d0c5b9d0cfc35..9e344807cbf44 100644
--- a/extensions/amp-bind/0.1/test/test-bind-expression.js
+++ b/extensions/amp-bind/0.1/test/test-bind-expression.js
@@ -17,7 +17,7 @@
 import {BindExpression} from '../bind-expression';
 import {BindMacro} from '../bind-macro';
 
-describe('BindExpression', () => {
+describes.sandboxed('BindExpression', {}, () => {
   const argumentTypeError = 'Unexpected argument type';
   const unsupportedFunctionError = 'not a supported function';
   const expressionSizeExceededError = 'exceeds max';
@@ -347,27 +347,18 @@ describe('BindExpression', () => {
     it('custom Array#sort()', () => {
       expect(evaluate('[11, 1, 2].sort()')).to.deep.equal([1, 11, 2]);
       expect(evaluate('[11, 1, 2].sort((x, y) => x - y)')).to.deep.equal([
-        1,
-        2,
-        11,
+        1, 2, 11,
       ]);
 
       const a = [11, 1, 2];
       expect(evaluate('a.sort()', {a})).to.deep.equal([1, 11, 2]);
       expect(evaluate('a.sort((x, y) => x - y)', {a})).to.deep.equal([
-        1,
-        2,
-        11,
+        1, 2, 11,
       ]);
 
       // Sort should be out-of-place i.e. does not sort the caller.
       expect(evaluate('a.sort().concat(a)', {a})).to.deep.equal([
-        1,
-        11,
-        2,
-        11,
-        1,
-        2,
+        1, 11, 2, 11, 1, 2,
       ]);
     });
 
@@ -385,10 +376,7 @@ describe('BindExpression', () => {
 
       // Splice should be out-of-place i.e. does not splice the caller.
       expect(evaluate('a.splice(1).concat(a)', {a})).to.deep.equal([
-        1,
-        1,
-        2,
-        3,
+        1, 1, 2, 3,
       ]);
     });
 
diff --git a/extensions/amp-bind/0.1/test/test-bind-validator.js b/extensions/amp-bind/0.1/test/test-bind-validator.js
index 1686c3dbf5e09..23f20e24a1271 100644
--- a/extensions/amp-bind/0.1/test/test-bind-validator.js
+++ b/extensions/amp-bind/0.1/test/test-bind-validator.js
@@ -16,7 +16,7 @@
 
 import {BindValidator} from '../bind-validator';
 
-describe('BindValidator (allowUrlProperties=true)', () => {
+describes.sandboxed('BindValidator (allowUrlProperties=true)', {}, () => {
   let val;
 
   beforeEach(() => {
@@ -258,6 +258,10 @@ describe('BindValidator (allowUrlProperties=true)', () => {
       expect(val.canBind('AMP-LIST', 'is-layout-container')).to.be.true;
     });
 
+    it('should support <amp-render>', () => {
+      expect(val.canBind('AMP-RENDER', 'src')).to.be.true;
+    });
+
     it('should support <amp-selector>', () => {
       expect(val.canBind('AMP-SELECTOR', 'disabled')).to.be.true;
       expect(val.canBind('AMP-SELECTOR', 'selected')).to.be.true;
@@ -302,10 +306,15 @@ describe('BindValidator (allowUrlProperties=true)', () => {
         )
       ).to.be.false;
     });
+
+    it('should support <section> elements (from <amp-accordion>)', () => {
+      expect(val.canBind('SECTION', 'data-expand')).to.be.true;
+      expect(val.canBind('SECTION', 'expanded')).to.be.true;
+    });
   });
 });
 
-describe('BindValidator (allowUrlProperties=false)', () => {
+describes.sandboxed('BindValidator (allowUrlProperties=false)', {}, () => {
   let val;
 
   beforeEach(() => {
diff --git a/extensions/amp-bind/0.1/test/validator-amp-bind.html b/extensions/amp-bind/0.1/test/validator-amp-bind.html
index a8af4051be921..14223b0f24cbe 100644
--- a/extensions/amp-bind/0.1/test/validator-amp-bind.html
+++ b/extensions/amp-bind/0.1/test/validator-amp-bind.html
@@ -23,7 +23,6 @@
   <title>amp-bind: Basic</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/extensions/amp-bind/0.1/test/validator-amp-bind.out b/extensions/amp-bind/0.1/test/validator-amp-bind.out
index 8cefc1647dd76..8964e6d84c0b4 100644
--- a/extensions/amp-bind/0.1/test/validator-amp-bind.out
+++ b/extensions/amp-bind/0.1/test/validator-amp-bind.out
@@ -24,7 +24,6 @@ PASS
 |    <title>amp-bind: Basic</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
diff --git a/extensions/amp-bind/OWNERS b/extensions/amp-bind/OWNERS
index 64b7f29936f43..63247e011b9b0 100644
--- a/extensions/amp-bind/OWNERS
+++ b/extensions/amp-bind/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-bind/amp-bind.md b/extensions/amp-bind/amp-bind.md
index f1f6dcb2f565a..0d029a72db0d2 100644
--- a/extensions/amp-bind/amp-bind.md
+++ b/extensions/amp-bind/amp-bind.md
@@ -61,9 +61,9 @@ For performance, and to avoid the risk of unexpected content jumping, `amp-bind`
 
 In the example above:
 
-- The **state** begins as empty.
-- It has a single **binding** to `[text]`, the text content of a node, on the `<p>` element.
-- The `[text]` value contains the **expression**, `'Hello ' + foo`. This expression concatenates the string 'Hello ' and the value of the **state variable** foo.
+-   The **state** begins as empty.
+-   It has a single **binding** to `[text]`, the text content of a node, on the `<p>` element.
+-   The `[text]` value contains the **expression**, `'Hello ' + foo`. This expression concatenates the string 'Hello ' and the value of the **state variable** foo.
 
 When the user taps/clicks the button:
 
@@ -91,6 +91,9 @@ Calling `AMP.setState()` in some examples may set or change states of other exam
     .redBorder {
       border: 5px solid red;
     }
+    .defaultBorder {
+      border: 5px solid transparent;
+    }
   </style>
 </head>
 <body>
@@ -108,7 +111,7 @@ Calling `AMP.setState()` in some examples may set or change states of other exam
       }
     </script>
   </amp-state>
-  <div class="greenBorder" [class]="theFood[currentMeal].style">
+  <div class="defaultBorder" [class]="theFood[currentMeal].style || 'defaultBorder'">
     <p>Each food has a different border color.</p>
     <p [text]="'I want to eat ' + currentMeal + '.'">I want to eat cupcakes.</p>
     <amp-img
@@ -130,15 +133,15 @@ Calling `AMP.setState()` in some examples may set or change states of other exam
 
 In the example above:
 
-- The `<amp-state>` component declares state using JSON. The `<amp-state>` element has an `id` of `theFood` to allow us to reference the defined data. But because `<amp-bind>` does not evaluate `<amp-state>` on page load, the **state** is empty.
-- The page loads with visual defaults.
-  - The `<div>` element has `class="greenBorder"` defined.
-  - The second `<p>` element has "I want cupcakes." defined within the tags.
-  - The `<amp-img>` `src` points to a url.
-- Changeable elements have **bindings** that point to **expressions**.
-  - The `[class]` attribute on the `<div>` is bound to the `theFood[currentMeal].style` **expression**.
-  - The `[text]` attribute on the second `<p>` is bound to the `'I want to eat ' + currentMeal + '.'` **expression**.
-  - The `[src]` attribute is bound to the `theFood[currentMeal].imageUrl` **expression**.
+-   The `<amp-state>` component declares state using JSON. The `<amp-state>` element has an `id` of `theFood` to allow us to reference the defined data. But because `<amp-bind>` does not evaluate `<amp-state>` on page load, the **state** is empty.
+-   The page loads with visual defaults.
+    -   The `<div>` element has `class="greenBorder"` defined.
+    -   The second `<p>` element has "I want cupcakes." defined within the tags.
+    -   The `<amp-img>` `src` points to a url.
+-   Changeable elements have **bindings** that point to **expressions**.
+    -   The `[class]` attribute on the `<div>` is bound to the `theFood[currentMeal].style` **expression**.
+    -   The `[text]` attribute on the second `<p>` is bound to the `'I want to eat ' + currentMeal + '.'` **expression**.
+    -   The `[src]` attribute is bound to the `theFood[currentMeal].imageUrl` **expression**.
 
 If a user clicks the "Set to sushi" button:
 
@@ -151,10 +154,10 @@ If a user clicks the "Set to sushi" button:
 
 Using `[class]="theFood[currentMeal].style"` as an example of **expression** syntax evaluation:
 
-- `[class]` is the property to update.
-- `theFood` is the id of the `<amp-state>` component.
-- `currentMeal` is the state name. In the case of `theFood` it will be `cupcakes` or `sushi`.
-- `style` is the **state variable**. It corresponds to the matching JSON key, and sets the bound property to that key's value.
+-   `[class]` is the property to update.
+-   `theFood` is the id of the `<amp-state>` component.
+-   `currentMeal` is the state name. In the case of `theFood` it will be `cupcakes` or `sushi`.
+-   `style` is the **state variable**. It corresponds to the matching JSON key, and sets the bound property to that key's value.
 
 [/filter] <!-- formats="websites, ads" -->
 
@@ -197,14 +200,14 @@ Using `[class]="theFood[currentMeal].style"` as an example of **expression** syn
 
 [/example]
 
-- The `<amp-state>` component declares state using a JSON object. It has an `id` of `theFood` to allow us to reference the defined data. But because `<amp-bind>` does not evaluate `<amp-state>` on email load, the **state** is empty.
-- The page loads with visual defaults.
-- The `<div>` element has `class="greenBorder"` defined.
-- The second `<p>` element has "I want cupcakes." defined within the tags.
-- The `<amp-img>` `src` points to a url.
-- Changeable elements have **bindings** that point to **expressions**.
-- The `[class]` attribute on the `<div>` is bound to the `theFood[currentMeal].style` **expression**.
-- The `[text]` attribute on the second `<p>` is bound to the `theFood[currentMeal].text` **expression**.
+-   The `<amp-state>` component declares state using a JSON object. It has an `id` of `theFood` to allow us to reference the defined data. But because `<amp-bind>` does not evaluate `<amp-state>` on email load, the **state** is empty.
+-   The page loads with visual defaults.
+-   The `<div>` element has `class="greenBorder"` defined.
+-   The second `<p>` element has "I want cupcakes." defined within the tags.
+-   The `<amp-img>` `src` points to a url.
+-   Changeable elements have **bindings** that point to **expressions**.
+-   The `[class]` attribute on the `<div>` is bound to the `theFood[currentMeal].style` **expression**.
+-   The `[text]` attribute on the second `<p>` is bound to the `theFood[currentMeal].text` **expression**.
 
 If a user clicks the "Set to sushi" button:
 
@@ -216,10 +219,10 @@ If a user clicks the "Set to sushi" button:
 
 Using `[class]="theFood[currentMeal].style"` as an example of **expression** syntax evaluation:
 
-- `[class]` is the property to update
-- `theFood` is the id of the `<amp-state>` component.
-- `currentMeal` is the state name. In the case of `theFood` it will be `cupcakes` or `sushi`.
-- `style` is the **state variable**. It corresponds to the matching JSON key, and sets the bound property to that key's value.
+-   `[class]` is the property to update
+-   `theFood` is the id of the `<amp-state>` component.
+-   `currentMeal` is the state name. In the case of `theFood` it will be `cupcakes` or `sushi`.
+-   `style` is the **state variable**. It corresponds to the matching JSON key, and sets the bound property to that key's value.
 
 [/filter] <!-- formats="email" -->
 
@@ -263,7 +266,7 @@ An `amp-state` element must contain a child `<script>` element.
 
 ### `src` (optional)
 
-The URL of the remote endpoint that must return JSON, which is used to this `amp-state`. This must be a HTTP service with a proper CORS configuration for the page. The `src` attribute allows all standard URL variable substitutions. See the [Substitutions Guide](../../spec/amp-var-substitutions.md) for more info.
+The URL of the remote endpoint that must return JSON, which is used to this `amp-state`. This must be a HTTP service with a proper CORS configuration for the page. The `src` attribute allows all standard URL variable substitutions. See the [Substitutions Guide](../../docs/spec/amp-var-substitutions.md) for more info.
 
 AMP batches XMLHttpRequests (XHRs) to JSON endpoints, that is, you can use a single JSON data request as a data source for multiple consumers (e.g., multiple `amp-state` elements) on an AMP page.
 
@@ -277,8 +280,8 @@ The endpoint must implement the requirements specified in the [CORS Requests in
 
 Defines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/).
 
-- Supported values: `omit`, `include`
-- Default: `omit`
+-   Supported values: `omit`, `include`
+-   Default: `omit`
 
 To send credentials, pass the value of `include`. If this value is set, the response must follow the [AMP CORS security guidelines](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/#cors-security-in-amp).
 
@@ -314,7 +317,7 @@ An `<amp-state>` element's JSON data has a maximum size of 100KB.
 
 ### Defining and initializing state with `<amp-state>`
 
-Expressions are not evaluates on page load, but you may define an initial state. The `<amp-state>` component contains different **states** and their **state variables**. While this defines a **states**, it will not reflect on the page until after a user interacts.
+Expressions are not evaluated on page load, but you may define an initial state. The `<amp-state>` component contains different **states** and their **state variables**. While this defines a **state**, it will not reflect on the page until after a user interacts.
 
 [example preview="inline" playground="true" imports="amp-bind"]
 
@@ -343,7 +346,7 @@ An `<amp-state>` element can also specify a CORS URL instead of a child JSON scr
 
 ### Updating state variables with `AMP.setState()`
 
-The [`AMP.setState()`](../../spec/amp-actions-and-events.md#amp) action merges an object literal into the state. This means you can update the value of a defined state variable.
+The [`AMP.setState()`](../../docs/spec/amp-actions-and-events.md#amp) action merges an object literal into the state. This means you can update the value of a defined state variable.
 
 [example preview="inline" playground="true" imports="amp-bind"]
 
@@ -510,6 +513,8 @@ Calling `AMP.setState()` deep-merges the provided object literal with the curren
 
 [/example]
 
+[filter formats="websites, ads"]
+
 ### Modifying history with `AMP.pushState()`
 
 `AMP.pushState()` writes state changes to the history. Navigating back, will restore the previous state. To test this, increase the count in the example below and use your browser's back button to decrease the count.
@@ -530,18 +535,20 @@ Calling `AMP.setState()` deep-merges the provided object literal with the curren
 
 Using `AMP.pushState()` sets the current state to the most recent pushed state.
 
+[/filter] <!-- formats="websites, ads" -->
+
 ## Expressions
 
 `amp-bind` uses JavaScript-like expressions that can reference the state.
 
 ### Differences from JavaScript
 
-- Expressions may only access the containing document's [state](#state).
-- Expressions **do not** have access to `window` or `document`. `global` references the top-level state.
-- Only `amp-bind` [allowed-listed functions](#allowed-listed functions) and operators are usable. are usable. Use of arrow functions are allowed as function parameters, e.g. `[1, 2, 3].map(x => x + 1)`.
-  - Custom functions, classes and loops are disallowed.
-- Undefined variables and array-index-out-of-bounds return `null` instead of `undefined` or throwing errors.
-- A single expression is currently capped at 50 operands for performance. Please [contact us](https://github.com/ampproject/amphtml/issues/new) if this is insufficient for your use case.
+-   Expressions may only access the containing document's [state](#state).
+-   Expressions **do not** have access to `window` or `document`. `global` references the top-level state.
+-   Only `amp-bind` [allowlisted functions](#allowlisted-functions) and operators are usable. are usable. Use of arrow functions are allowed as function parameters, e.g. `[1, 2, 3].map(x => x + 1)`.
+    -   Custom functions, classes and loops are disallowed.
+-   Undefined variables and array-index-out-of-bounds return `null` instead of `undefined` or throwing errors.
+-   A single expression is currently capped at 50 operands for performance. Please [contact us](https://github.com/ampproject/amphtml/issues/new/choose) if this is insufficient for your use case.
 
 The following are all valid expressions:
 
@@ -575,24 +582,24 @@ The following are all valid expressions:
 
 Find the full expression grammar and implementation in [bind-expr-impl.jison](./0.1/bind-expr-impl.jison) and [bind-expression.js](./0.1/bind-expression.js).
 
-### Allowed-listed functions
+### Allowlisted functions
 
 #### [`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods)
 
 Single-parameter arrow functions can't have parentheses, e.g. use `x => x + 1` instead of `(x) => x + 1`. `sort()` and `splice()` return modified copies instead of operating in-place.
 
-- [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)
-- [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
-- [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
-- [indexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
-- [join](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
-- [lastIndexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf)
-- [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
-- [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
-- [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)
-- [some](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
-- [sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
-- [splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) (not-in-place)
+-   [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)
+-   [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
+-   [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
+-   [indexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
+-   [join](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
+-   [lastIndexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf)
+-   [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+-   [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
+-   [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)
+-   [some](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
+-   [sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
+-   [splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) (not-in-place)
 
 [example preview="inline" playground="true" imports="amp-bind"]
 
@@ -606,7 +613,7 @@ Single-parameter arrow functions can't have parentheses, e.g. use `x => x + 1` i
     }
   </script>
 </amp-state>
-<p [text]="'concat: ' + myArrayState.foo.concat()">concat: 1, 2, 3</p>
+<p [text]="'concat: ' + myArrayState.foo.concat(4)">concat: 1, 2, 3</p>
 <p [text]="'filter: ' + myArrayState.bar.filter(word => word.length > 3)">
   filter: words with less than three letter
 </p>
@@ -645,10 +652,10 @@ Single-parameter arrow functions can't have parentheses, e.g. use `x => x + 1` i
 
 #### [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#Methods)
 
-- [toExponential](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential)
-- [toFixed](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed)
-- [toPrecision](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision)
-- [toString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString)
+-   [toExponential](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential)
+-   [toFixed](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed)
+-   [toPrecision](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision)
+-   [toString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString)
 
 [example preview="inline" playground="true" imports="amp-bind"]
 
@@ -672,17 +679,17 @@ Single-parameter arrow functions can't have parentheses, e.g. use `x => x + 1` i
 
 #### [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Methods)
 
-- [charAt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt)
-- [charCodeAt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt)
-- [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat)
-- [indexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)
-- [lastIndexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)
-- [replace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace)
-- [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice)
-- [split](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split)
-- [substr](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr)
-- [toLowerCase](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)
-- [toUpperCase](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase)
+-   [charAt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt)
+-   [charCodeAt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt)
+-   [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat)
+-   [indexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)
+-   [lastIndexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)
+-   [replace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace)
+-   [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice)
+-   [split](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split)
+-   [substr](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr)
+-   [toLowerCase](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)
+-   [toUpperCase](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase)
 
 [example preview="inline" playground="true" imports="amp-bind"]
 
@@ -731,15 +738,15 @@ Single-parameter arrow functions can't have parentheses, e.g. use `x => x + 1` i
 
 Static functions are not namespaced, e.g. use `abs(-1)` instead of `Math.abs(-1)`
 
-- [abs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/abs)
-- [ceil](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil)
-- [floor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)
-- [max](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max)
-- [min](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min)
-- [pow](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow)
-- [random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
-- [round](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round)
-- [sign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign)
+-   [abs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/abs)
+-   [ceil](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil)
+-   [floor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)
+-   [max](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max)
+-   [min](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min)
+-   [pow](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow)
+-   [random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
+-   [round](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round)
+-   [sign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign)
 
 [example preview="inline" playground="true" imports="amp-bind"]
 
@@ -766,8 +773,8 @@ Static functions are not namespaced, e.g. use `abs(-1)` instead of `Math.abs(-1)
 
 Static functions are not namespaced, e.g. use `keys(Object)` instead of `Object.abs(Object)`
 
-- [keys](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)
-- [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)
+-   [keys](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)
+-   [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)
 
 [example preview="inline" playground="true" imports="amp-bind"]
 
@@ -793,8 +800,8 @@ Static functions are not namespaced, e.g. use `keys(Object)` instead of `Object.
 
 #### [`Global`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
 
-- [encodeURI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI)
-- [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)
+-   [encodeURI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI)
+-   [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)
 
 [example preview="inline" playground="true" imports="amp-bind"]
 
@@ -844,7 +851,7 @@ A macro can also call other macros <i>defined before itself</i>. A macro cannot
 
 ## Bindings
 
-A **binding** is a special attribute of the form `[property]` that links an element's property to an [expression](#expressions). Use the alternative,[XML-compatible](#xml-compatibility) syntax if developing in XML.
+A **binding** is a special attribute of the form `[property]` that links an element's property to an [expression](#expressions). Use the alternative,[XML-compatible](#react-and-xml-compatibility) syntax if developing in XML.
 
 When the **state** changes, expressions tied to that state are evaluated. The element properties **bound** to the **state** are updated with the new expression results.
 
@@ -933,7 +940,7 @@ Bind an element's `class` using the `[class]` attribute. A `[class]` expression
   </button>
   <!-- String arrays also work -->
   <button
-    on="tap:AMP.setState({ myClass: ['background-green'], ['border-red'] })"
+    on="tap:AMP.setState({ myClass: ['background-green', 'border-red'] })"
   >
     Working string array: Change Class
   </button>
@@ -1003,18 +1010,18 @@ Some AMP components and HTML elements have specific bindable attributes. They ar
 
 **`<amp-brightcove>`**
 
-- `[data-account]`
-- `[data-embed]`
-- `[data-player]`
-- `[data-player-id]`
-- `[data-playlist-id]`
-- `[data-video-id]` Changes the displayed Brightcove video.
+-   `[data-account]`
+-   `[data-embed]`
+-   `[data-player]`
+-   `[data-player-id]`
+-   `[data-playlist-id]`
+-   `[data-video-id]` Changes the displayed Brightcove video.
 
 [/filter] <!-- formats="websites" -->
 
 **`<amp-carousel type=slides>`**
 
-- `[slide]` Changes the currently displayed slide index.
+-   `[slide]` Changes the currently displayed slide index.
 
 [See an example](https://amp.dev/documentation/examples/multimedia-animations/image_galleries_with_amp-carousel/#linking-carousels-with-amp-bind).
 
@@ -1022,42 +1029,42 @@ Some AMP components and HTML elements have specific bindable attributes. They ar
 
 **`<amp-date-picker>`**
 
-- `[min]` Sets the earliest selectable date
-- `[max]` Sets the latest selectable date
+-   `[min]` Sets the earliest selectable date
+-   `[max]` Sets the latest selectable date
 
 **`<amp-google-document-embed>`**
 
-- `[src]` Displays the document at the updated URL.
-- `[title]` Changes the document's title.
+-   `[src]` Displays the document at the updated URL.
+-   `[title]` Changes the document's title.
 
 **`<amp-iframe>`**
 
-- `[src]` Changes the iframe's source URL.
+-   `[src]` Changes the iframe's source URL.
 
 [/filter] <!-- formats="websites" -->
 [filter formats="websites, ads"]
 
 **`<amp-img>`**
 
-- `[alt]`
-- `[attribution]`
-- `[src]`
-- `[srcset]`
+-   `[alt]`
+-   `[attribution]`
+-   `[src]`
+-   `[srcset]`
 
-Bind to `[srcset]` instead of `[src]` to support responsive images. See corresponding [`amp-img` attributes](../../builtins/amp-img.md#attributes).
+Bind to `[srcset]` instead of `[src]` to support responsive images. See corresponding [`amp-img` attributes](../../builtins/amp-img/amp-img.md#attributes).
 [/filter] <!-- formats="websites, ads" -->
 [filter formats="email"]
 
 **`<amp-img>`**
 
-- `[alt]`
-- `[attribution]`
+-   `[alt]`
+-   `[attribution]`
 
 [/filter] <!-- formats="email" -->
 
 **`<amp-lightbox>`**
 
-- `[open]` Toggles display of the lightbox.
+-   `[open]` Toggles display of the lightbox.
 
 [tip type="default"]
 Use `on="lightboxClose: AMP.setState(...)"` to update variables when the lightbox is closed.
@@ -1067,7 +1074,7 @@ Use `on="lightboxClose: AMP.setState(...)"` to update variables when the lightbo
 
 **`<amp-list>`**
 
-- `[src]`
+-   `[src]`
 
 If the expression is a string, it fetches and renders JSON from the string URL. If the expression is an object or array, it renders the expression data.
 
@@ -1077,8 +1084,8 @@ If the expression is a string, it fetches and renders JSON from the string URL.
 
 **`<amp-selector>`**
 
-- `[selected]` Changes the currently selected children element(s) identified by their `option` attribute values. Supports a comma-separated list of values for multiple selection. [See an example](https://amp.dev/documentation/examples/multimedia-animations/image_galleries_with_amp-carousel/?format=email#linking-carousels-with-amp-bind).
-- `[disabled]`
+-   `[selected]` Changes the currently selected children element(s) identified by their `option` attribute values. Supports a comma-separated list of values for multiple selection. [See an example](https://amp.dev/documentation/examples/multimedia-animations/image_galleries_with_amp-carousel/?format=email#linking-carousels-with-amp-bind).
+-   `[disabled]`
 
 [tip type="note"]
 `[selected]` does not have a non-bindable attribute. The AMP Validator will throw an error if `selected` is used.
@@ -1090,7 +1097,7 @@ If the expression is a string, it fetches and renders JSON from the string URL.
 
 **`<amp-state>`**
 
-- `[src]`
+-   `[src]`
 
 Fetches JSON from the new URL and merges it into the existing state. The following update will ignore `<amp-state>`elements to prevent cycles.
 
@@ -1100,7 +1107,7 @@ Fetches JSON from the new URL and merges it into the existing state. The followi
 
 **`<amp-twitter>`**
 
-- `[data-tweetid]` Changes the displayed Tweet.
+-   `[data-tweetid]` Changes the displayed Tweet.
 
 [/filter] <!-- formats="websites" -->
 
@@ -1108,13 +1115,13 @@ Fetches JSON from the new URL and merges it into the existing state. The followi
 
 **`<amp-video>`**
 
-- `[alt]`
-- `[attribution]`
-- `[controls]`
-- `[loop]`
-- `[poster]`
-- `[preload]`
-- `[src]`
+-   `[alt]`
+-   `[attribution]`
+-   `[controls]`
+-   `[loop]`
+-   `[poster]`
+-   `[preload]`
+-   `[src]`
 
 See corresponding [`amp-video` attributes](../amp-video/amp-video.md#attributes).
 [/filter] <!-- formats="websites, ads" -->
@@ -1123,7 +1130,7 @@ See corresponding [`amp-video` attributes](../amp-video/amp-video.md#attributes)
 
 **`<amp-youtube>`**
 
-- `[data-videoid]` Changes the displayed YouTube video.
+-   `[data-videoid]` Changes the displayed YouTube video.
 
 [/filter] <!-- formats="websites, ads" -->
 
@@ -1133,13 +1140,13 @@ See corresponding [`amp-video` attributes](../amp-video/amp-video.md#attributes)
 
 **`<a>`**
 
-- `[href]` Changes the link.
+-   `[href]` Changes the link.
 
 **`<button>`**
 
-- `[disabled]`
-- `[type]`
-- `[value]`
+-   `[disabled]`
+-   `[type]`
+-   `[value]`
 
 [/filter] <!-- formats="websites, ads" -->
 
@@ -1147,8 +1154,8 @@ See corresponding [`amp-video` attributes](../amp-video/amp-video.md#attributes)
 
 **`<button>`**
 
-- `[disabled]`
-- `[value]`
+-   `[disabled]`
+-   `[value]`
 
 See corresponding [button attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes).
 
@@ -1156,17 +1163,17 @@ See corresponding [button attributes](https://developer.mozilla.org/en-US/docs/W
 
 **`<details>`**
 
-- `[open]`
+-   `[open]`
 
 See corresponding [details attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Attributes).
 
 **`<fieldset>`**
 
-- `[disabled]` Enables or disables the fieldset.
+-   `[disabled]` Enables or disables the fieldset.
 
 **`<image>`**
 
-- `[xlink:href]`
+-   `[xlink:href]`
 
 See corresponding [image attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image).
 
@@ -1174,27 +1181,27 @@ See corresponding [image attributes](https://developer.mozilla.org/en-US/docs/We
 
 **`<input>`**
 
-- `[accept]`
-- `[accessKey]`
-- `[autocomplete]`
-- `[checked]`
-- `[disabled]`
-- `[height]`
-- `[inputmode]`
-- `[max]`
-- `[maxlength]`
-- `[multiple]`
-- `[pattern]`
-- `[placeholder]`
-- `[readonly]`
-- `[required]`
-- `[selectiondirection]`
-- `[size]`
-- `[spellcheck]`
-- `[step]`
-- `[type]`
-- `[value]`
-- `[width]`
+-   `[accept]`
+-   `[accessKey]`
+-   `[autocomplete]`
+-   `[checked]`
+-   `[disabled]`
+-   `[height]`
+-   `[inputmode]`
+-   `[max]`
+-   `[maxlength]`
+-   `[multiple]`
+-   `[pattern]`
+-   `[placeholder]`
+-   `[readonly]`
+-   `[required]`
+-   `[selectiondirection]`
+-   `[size]`
+-   `[spellcheck]`
+-   `[step]`
+-   `[type]`
+-   `[value]`
+-   `[width]`
 
 See corresponding [input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes).
 
@@ -1204,21 +1211,21 @@ See corresponding [input attributes](https://developer.mozilla.org/en-US/docs/We
 
 **`<input>`**
 
-- `[autocomplete]`
-- `[disabled]`
-- `[height]`
-- `[max]`
-- `[maxlength]`
-- `[multiple]`
-- `[pattern]`
-- `[placeholder]`
-- `[readonly]`
-- `[required]`
-- `[size]`
-- `[spellcheck]`
-- `[step]`
-- `[value]`
-- `[width]`
+-   `[autocomplete]`
+-   `[disabled]`
+-   `[height]`
+-   `[max]`
+-   `[maxlength]`
+-   `[multiple]`
+-   `[pattern]`
+-   `[placeholder]`
+-   `[readonly]`
+-   `[required]`
+-   `[size]`
+-   `[spellcheck]`
+-   `[step]`
+-   `[value]`
+-   `[width]`
 
 See corresponding [input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes).
 
@@ -1226,33 +1233,33 @@ See corresponding [input attributes](https://developer.mozilla.org/en-US/docs/We
 
 **`<option>`**
 
-- `[disabled]`
-- `[label]`
-- `[selected]`
-- `[value]`
+-   `[disabled]`
+-   `[label]`
+-   `[selected]`
+-   `[value]`
 
 See corresponding [option attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#Attributes).
 
 **`<optgroup>`**
 
-- `[disabled]`
-- `[label]`
+-   `[disabled]`
+-   `[label]`
 
 See corresponding [optgroup attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup#Attributes).
 
 **`<section>`**
 
-- `[data-expand]` Changes the expansion of a `section` in an [`amp-accordion`](../amp-accordion/amp-accordion.md).
+-   `[data-expand]` Changes the expansion of a `section` in an [`amp-accordion`](../amp-accordion/amp-accordion.md).
 
 [filter formats="websites, ads"]
 
 **`<select>`**
 
-- `[autofocus]`
-- `[disabled]`
-- `[multiple]`
-- `[required]`
-- `[size]`
+-   `[autofocus]`
+-   `[disabled]`
+-   `[multiple]`
+-   `[required]`
+-   `[size]`
 
 See corresponding [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Attributes).
 
@@ -1262,10 +1269,10 @@ See corresponding [select attributes](https://developer.mozilla.org/en-US/docs/W
 
 **`<select>`**
 
-- `[disabled]`
-- `[multiple]`
-- `[required]`
-- `[size]`
+-   `[disabled]`
+-   `[multiple]`
+-   `[required]`
+-   `[size]`
 
 See corresponding [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Attributes).
 
@@ -1275,16 +1282,16 @@ See corresponding [select attributes](https://developer.mozilla.org/en-US/docs/W
 
 **`<source>`**
 
-- `[src]`
-- `[type]`
+-   `[src]`
+-   `[type]`
 
 See corresponding [source attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#Attributes).
 
 **`<track>`**
 
-- [label]
-- [src]
-- [srclang]
+-   [label]
+-   [src]
+-   [srclang]
 
 See corresponding [track attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track#Attributes).
 
@@ -1294,22 +1301,22 @@ See corresponding [track attributes](https://developer.mozilla.org/en-US/docs/We
 
 **`<textarea>`**
 
-- `[autocomplete]`
-- `[autofocus]`
-- `[cols]`
-- `[disabled]`
-- `[defaultText]`
-- `[maxlength]`
-- `[minlength]`
-- `[placeholder]`
-- `[readonly]`
-- `[required]`
-- `[rows]`
-- `[selectiondirection]`
-- `[selectionend]`
-- `[selectionstart]`
-- `[spellcheck]`
-- `[wrap]`
+-   `[autocomplete]`
+-   `[autofocus]`
+-   `[cols]`
+-   `[disabled]`
+-   `[defaultText]`
+-   `[maxlength]`
+-   `[minlength]`
+-   `[placeholder]`
+-   `[readonly]`
+-   `[required]`
+-   `[rows]`
+-   `[selectiondirection]`
+-   `[selectionend]`
+-   `[selectionstart]`
+-   `[spellcheck]`
+-   `[wrap]`
 
 Use `[defaultText]` to update initial text, and `[text]` to update current text. See corresponding [textarea attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes).
 
@@ -1319,18 +1326,18 @@ Use `[defaultText]` to update initial text, and `[text]` to update current text.
 
 **`<textarea>`**
 
-- `[autocomplete]`
-- `[cols]`
-- `[disabled]`
-- `[defaultText]`
-- `[maxlength]`
-- `[minlength]`
-- `[placeholder]`
-- `[readonly]`
-- `[required]`
-- `[rows]`
-- `[spellcheck]`
-- `[wrap]`
+-   `[autocomplete]`
+-   `[cols]`
+-   `[disabled]`
+-   `[defaultText]`
+-   `[maxlength]`
+-   `[minlength]`
+-   `[placeholder]`
+-   `[readonly]`
+-   `[required]`
+-   `[rows]`
+-   `[spellcheck]`
+-   `[wrap]`
 
 Use `[defaultText]` to update initial text, and `[text]` to update current text. See corresponding [textarea attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes).
 
@@ -1389,7 +1396,7 @@ Below outlines the types of errors that may arise when working with `amp-bind`.
   <tr>
     <td class="col-thirty">Invalid binding</td>
     <td class="col-fourty"><em>Binding to [foo] on &lt;P> is not allowed</em>.</td>
-    <td class="col-thirty">Use only <a href="#element-specific-attributes">white-listed bindings</a>.</td>
+    <td class="col-thirty">Use only <a href="#amp-component-specific-attributes">allowlisted bindings</a>.</td>
   </tr>
   <tr>
     <td>Syntax error</td>
diff --git a/extensions/amp-bind/validator-amp-bind.protoascii b/extensions/amp-bind/validator-amp-bind.protoascii
index 4f27be6b43b3a..2e062877969bd 100644
--- a/extensions/amp-bind/validator-amp-bind.protoascii
+++ b/extensions/amp-bind/validator-amp-bind.protoascii
@@ -16,7 +16,6 @@
 tags: {  # amp-bind
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-bind"
@@ -48,7 +47,6 @@ tags: {  # <amp-state> (json)
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   spec_name: "amp-bind extension .json script"
   requires_extension: "amp-bind"
@@ -68,7 +66,7 @@ tags: {  # <amp-state> (json)
       error_message: "html comments"
     }
   }
-  spec_url: "https://amp.dev/documentation/components/amp-bind"
+  spec_url: "https://amp.dev/documentation/components/amp-bind/"
 }
 tags: {  # <amp-state>
   html_format: AMP
@@ -95,7 +93,7 @@ tags: {  # <amp-state>
   child_tags: {
     first_child_tag_name_oneof: "SCRIPT"
   }
-  spec_url: "https://amp.dev/documentation/components/amp-bind"
+  spec_url: "https://amp.dev/documentation/components/amp-bind/"
 }
 # AMP4ADS and AMP4EMAIL enforces the the same restrictions on the 'src'
 # attribute of AMP-IMG and AMP-LIST on the src attribute of AMP-STATE. Use of
@@ -113,43 +111,10 @@ tags: {  # <amp-state>
   child_tags: {
     first_child_tag_name_oneof: "SCRIPT"
   }
-  spec_url: "https://amp.dev/documentation/components/amp-bind"
-}
-# ACTIONS <amp-state> with POST identity
-tags: { # <amp-state>
-  html_format: ACTIONS
-  tag_name: "AMP-STATE"
-  spec_name: "AMP-STATE (ACTIONS)"
-  requires_extension: "amp-bind"
-  attrs: {
-    name: "credentials"
-  }
-  attrs: {
-    name: "crossorigin"
-    value: "amp-viewer-auth-token-via-post"
-  }
-  attrs: {
-    name: "overridable"
-  }
-  attrs: {
-    name: "src"
-    value_url: {
-      protocol: "https"
-      allow_relative: true  # Will be set to false at a future date.
-    }
-    disallowed_value_regex: "__amp_source_origin"
-  }
-  attr_lists: "mandatory-id-attr"
-  # <amp-bind>
-  attrs: { name: "[src]" }
-  child_tags: {
-    first_child_tag_name_oneof: "SCRIPT"
-  }
-  spec_url: "https://amp.dev/documentation/components/amp-bind"
+  spec_url: "https://amp.dev/documentation/components/amp-bind/"
 }
 tags: {  # <amp-bind-macro>
   html_format: AMP
-  html_format: ACTIONS
   html_format: AMP4EMAIL
   tag_name: "AMP-BIND-MACRO"
   requires_extension: "amp-bind"
@@ -161,5 +126,5 @@ tags: {  # <amp-bind-macro>
     mandatory: true
   }
   attr_lists: "mandatory-id-attr"
-  spec_url: "https://amp.dev/documentation/components/amp-bind"
+  spec_url: "https://amp.dev/documentation/components/amp-bind/"
 }
diff --git a/extensions/amp-bodymovin-animation/0.1/amp-bodymovin-animation.js b/extensions/amp-bodymovin-animation/0.1/amp-bodymovin-animation.js
index 8ecb2cd78512d..5b816cea09272 100644
--- a/extensions/amp-bodymovin-animation/0.1/amp-bodymovin-animation.js
+++ b/extensions/amp-bodymovin-animation/0.1/amp-bodymovin-animation.js
@@ -14,23 +14,24 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
-import {Deferred} from '../../../src/utils/promise';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Services} from '../../../src/services';
 import {assertHttpsUrl} from '../../../src/url';
 import {batchFetchJsonFor} from '../../../src/batched-json';
-import {clamp} from '../../../src/utils/math';
-import {dict} from '../../../src/utils/object';
+import {clamp} from '../../../src/core/math';
+import {dict} from '../../../src/core/types/object';
 import {getData, listen} from '../../../src/event-helper';
 import {getIframe, preloadBootstrap} from '../../../src/3p-frame';
-import {isFiniteNumber, isObject} from '../../../src/types';
+import {isFiniteNumber, isObject} from '../../../src/core/types';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {parseJson} from '../../../src/json';
+
+import {parseJson} from '../../../src/core/types/object/json';
 import {removeElement} from '../../../src/dom';
-import {startsWith} from '../../../src/string';
 import {userAssert} from '../../../src/log';
 
 const TAG = 'amp-bodymovin-animation';
+const TYPE = 'bodymovinanimation';
 
 export class AmpBodymovinAnimation extends AMP.BaseElement {
   /** @param {!AmpElement} element */
@@ -73,12 +74,14 @@ export class AmpBodymovinAnimation extends AMP.BaseElement {
    */
   preconnectCallback(opt_onLayout) {
     const preconnect = Services.preconnectFor(this.win);
-    const scriptToLoad =
-      this.renderer_ === 'svg'
-        ? 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin_light.min.js'
-        : 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin.min.js';
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
-    preconnect.url(this.getAmpDoc(), scriptToLoad, opt_onLayout);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
+    // Different scripts are loaded based on `renderer` but their origin is the
+    // same. See 3p/bodymovinanimation.js#libSourceUrl.
+    preconnect.url(
+      this.getAmpDoc(),
+      'https://cdnjs.cloudflare.com',
+      opt_onLayout
+    );
   }
 
   /** @override */
@@ -139,12 +142,8 @@ export class AmpBodymovinAnimation extends AMP.BaseElement {
         renderer: this.renderer_,
         animationData: data,
       };
-      const iframe = getIframe(
-        this.win,
-        this.element,
-        'bodymovinanimation',
-        opt_context
-      );
+      const iframe = getIframe(this.win, this.element, TYPE, opt_context);
+      iframe.title = this.element.title || 'Airbnb BodyMovin animation';
       return Services.vsyncFor(this.win)
         .mutatePromise(() => {
           this.applyFillContent(iframe);
@@ -189,16 +188,16 @@ export class AmpBodymovinAnimation extends AMP.BaseElement {
       !getData(event) ||
       !(
         isObject(getData(event)) ||
-        startsWith(/** @type {string} */ (getData(event)), '{')
+        /** @type {string} */ (getData(event)).startsWith('{')
       )
     ) {
       return; // Doesn't look like JSON.
     }
 
     /** @const {?JsonObject} */
-    const eventData = /** @type {?JsonObject} */ (isObject(getData(event))
-      ? getData(event)
-      : parseJson(getData(event)));
+    const eventData = /** @type {?JsonObject} */ (
+      isObject(getData(event)) ? getData(event) : parseJson(getData(event))
+    );
     if (eventData === undefined) {
       return; // We only process valid JSON.
     }
diff --git a/extensions/amp-bodymovin-animation/0.1/test/integration/test-amp-bodymovin-animation.js b/extensions/amp-bodymovin-animation/0.1/test/integration/test-amp-bodymovin-animation.js
index b2a4b8fc8e8a3..c689a6595e3fd 100644
--- a/extensions/amp-bodymovin-animation/0.1/test/integration/test-amp-bodymovin-animation.js
+++ b/extensions/amp-bodymovin-animation/0.1/test/integration/test-amp-bodymovin-animation.js
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-describe
+describes.sandboxed
   .configure()
   .ifChrome()
-  .run('amp-bodymovin-animation', function () {
+  .run('amp-bodymovin-animation', {}, function () {
     const extensions = ['amp-bodymovin-animation'];
     const bodymovinBody = `
     <amp-bodymovin-animation id="anim"
diff --git a/extensions/amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.html b/extensions/amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.html
index 01b83670fdbad..79ed47682c784 100644
--- a/extensions/amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.html
+++ b/extensions/amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.html
@@ -53,6 +53,9 @@
   <amp-bodymovin-animation renderer="html" layout="responsive" width="200" height="200" src="https://nainar.github.io/loader.json" loop='true'>
   </amp-bodymovin-animation></body>
 
+  <amp-bodymovin-animation renderer="canvas" layout="fixed" width="200" height="200" src="https://nainar.github.io/loader.json">
+  </amp-bodymovin-animation>
+
   Invalid test cases
   <!-- Invalid because missing `height` and `width` attributes for `layout="fixed"` -->
   <amp-bodymovin-animation layout="fixed" src="https://nainar.github.io/loader.json">
diff --git a/extensions/amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.out b/extensions/amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.out
index 3dbcb7ef87cdf..d185a1b3f63c2 100644
--- a/extensions/amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.out
+++ b/extensions/amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.out
@@ -54,22 +54,25 @@ FAIL
 |    <amp-bodymovin-animation renderer="html" layout="responsive" width="200" height="200" src="https://nainar.github.io/loader.json" loop='true'>
 |    </amp-bodymovin-animation></body>
 |
+|    <amp-bodymovin-animation renderer="canvas" layout="fixed" width="200" height="200" src="https://nainar.github.io/loader.json">
+|    </amp-bodymovin-animation>
+|
 |    Invalid test cases
 |    <!-- Invalid because missing `height` and `width` attributes for `layout="fixed"` -->
 |    <amp-bodymovin-animation layout="fixed" src="https://nainar.github.io/loader.json">
 >>   ^~~~~~~~~
-amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.html:58:2 The mandatory attribute 'height' is missing in tag 'amp-bodymovin-animation'. (see https://amp.dev/documentation/components/amp-bodymovin-animation)
+amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.html:61:2 The mandatory attribute 'height' is missing in tag 'amp-bodymovin-animation'. (see https://amp.dev/documentation/components/amp-bodymovin-animation/)
 |    </amp-bodymovin-animation>
 |
 |    <!-- Invalid becuase `loop`is set to an invalid value. -->
 |    <amp-bodymovin-animation layout="fixed" width="200" height="200" src="https://nainar.github.io/loader.json" loop='nope'>
 >>   ^~~~~~~~~
-amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.html:62:2 The attribute 'loop' in tag 'amp-bodymovin-animation' is set to the invalid value 'nope'. (see https://amp.dev/documentation/components/amp-bodymovin-animation)
+amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.html:65:2 The attribute 'loop' in tag 'amp-bodymovin-animation' is set to the invalid value 'nope'. (see https://amp.dev/documentation/components/amp-bodymovin-animation/)
 |    </amp-bodymovin-animation>
 |
 |    <!-- Invalid becuase `autoplay`attribute isn't allowed on `<amp-bodymovin-animation>`. -->
 |    <amp-bodymovin-animation layout="responsive" width="200" height="200" src="https://nainar.github.io/loader.json" loop='true' autoplay>
 >>   ^~~~~~~~~
-amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.html:66:2 The attribute 'autoplay' may not appear in tag 'amp-bodymovin-animation'. (see https://amp.dev/documentation/components/amp-bodymovin-animation)
+amp-bodymovin-animation/0.1/test/validator-amp-bodymovin-animation.html:69:2 The attribute 'autoplay' may not appear in tag 'amp-bodymovin-animation'. (see https://amp.dev/documentation/components/amp-bodymovin-animation/)
 |    </amp-bodymovin-animation>
 |  </html>
diff --git a/extensions/amp-bodymovin-animation/OWNERS b/extensions/amp-bodymovin-animation/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-bodymovin-animation/OWNERS
+++ b/extensions/amp-bodymovin-animation/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-bodymovin-animation/amp-bodymovin-animation.html b/extensions/amp-bodymovin-animation/amp-bodymovin-animation.html
index eb7632866dd25..66c95498a20f0 100644
--- a/extensions/amp-bodymovin-animation/amp-bodymovin-animation.html
+++ b/extensions/amp-bodymovin-animation/amp-bodymovin-animation.html
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   ## Introduction
 
   Embed Bodymovin animations in your AMP HTML files.
diff --git a/extensions/amp-bodymovin-animation/amp-bodymovin-animation.md b/extensions/amp-bodymovin-animation/amp-bodymovin-animation.md
index 9ba2a76b04960..f382f5085acec 100644
--- a/extensions/amp-bodymovin-animation/amp-bodymovin-animation.md
+++ b/extensions/amp-bodymovin-animation/amp-bodymovin-animation.md
@@ -24,14 +24,12 @@ limitations under the License.
 
 # amp-bodymovin-animation
 
-The `<amp-bodymovin-animation>` component embeds an [AirBnB Bodymovin animation player](http://airbnb.io/lottie/), which renders an animation from JSON generated by [Adobe After Effects](https://www.adobe.com/products/aftereffects.html).
+## Usage
 
-## Behavior
+The `<amp-bodymovin-animation>` component embeds an [AirBnB Bodymovin animation player](http://airbnb.io/lottie/), which renders an animation from JSON generated by [Adobe After Effects](https://www.adobe.com/products/aftereffects.html).
 
 The `width` and `height` attributes determine the aspect ratio of the animation embedded in responsive layouts.
 
-Example:
-
 ```html
 <amp-bodymovin-animation
   layout="fixed"
@@ -45,33 +43,64 @@ Example:
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>src</strong></td>
-    <td>The path to the exported Bodymovin animation object. Must be <code>https</code> protocol.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>loop (optional)</strong></td>
-    <td>Indicates whether the animation should be looping or not. By default, this attribute is set to <code>true</code>. Values for this attribute can be: <code>true</code>, <code>false</code>, or a number value. If a number is specified, the animation loops that number of times.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>noautoplay (optional)</strong></td>
-    <td>By default, an animation autoplays. If this attribute is added the video waits for an action to start playing.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>renderer (optional)</strong></td>
-    <td>By default, this component uses the SVG renderer, this uses a light version of the Bodymovin animation player. However, if developers feel that they need the full player and want to use an HTML renderer they may do so by specifying the <code>renderer</code> attribute to be <code>html</code>.<br>This attribute only accepts the values <code>html</code> and <code>svg</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+### `src`
+
+The path to the exported Bodymovin animation object. Must be `https` protocol.
+
+### `loop` (optional)
+
+Indicates whether the animation should be looping or not. By default, this
+attribute is set to `true`. Values for this attribute can be: `true`, `false`,
+or a number value. If a number is specified, the animation loops that number of
+times.
+
+### `noautoplay` (optional)
+
+By default, an animation autoplays. If this attribute is added the video waits
+for an action to start playing.
+
+### `renderer` (optional)
+
+Multiple [renderers](https://airbnb.io/lottie/#/web?id=usage) are supported and
+can be specified:
+
+-   `canvas`
+-   `html`
+-   `svg` (default)
+
+### `title` (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Airbnb BodyMovin animation"`.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
 ## Actions
 
-Please see [AMP Action Documentation](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events#amp-bodymovin-animation) for the actions available on `amp-bodymovin-animation` component.
+### `play`
+
+Plays the animation.
+
+### `pause`
+
+Pauses the animation.
+
+### `stop`
+
+Stops the animation.
+
+### `seekTo(time=INTEGER)`
+
+Sets the `currentTime` of the animation to the specified value and pauses
+animation.
+
+### `seekTo(percent=[0,1])`
+
+Uses the given percentage value to determine the `currentTime` of the animation
+to the specified value and pauses animation.
 
 ## Validation
 
-See [amp-bodymovin-animation rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-bodymovin-animation/validator-amp-bodymovin-animation.protoascii) in the AMP validator specification.
+See [amp-bodymovin-animation rules](validator-amp-bodymovin-animation.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-bodymovin-animation/validator-amp-bodymovin-animation.protoascii b/extensions/amp-bodymovin-animation/validator-amp-bodymovin-animation.protoascii
index e500cc7d5f789..5d9e022ac34b8 100644
--- a/extensions/amp-bodymovin-animation/validator-amp-bodymovin-animation.protoascii
+++ b/extensions/amp-bodymovin-animation/validator-amp-bodymovin-animation.protoascii
@@ -31,9 +31,7 @@ tags: {  # <amp-bodymovin-animation>
 
   attrs: {
     name: "loop"
-    value_casei: "false"
-    value_casei: "number"
-    value_casei: "true"
+    value_regex_casei: "[1-9][0-9]*|false|true"
   }
   attrs: {
     name: "noautoplay"
@@ -49,10 +47,11 @@ tags: {  # <amp-bodymovin-animation>
   }
   attrs: {
     name: "renderer"
-    value_casei: "svg"
+    value_casei: "canvas"
     value_casei: "html"
+    value_casei: "svg"
   }
-  spec_url: "https://amp.dev/documentation/components/amp-bodymovin-animation"
+  spec_url: "https://amp.dev/documentation/components/amp-bodymovin-animation/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-brid-player/0.1/amp-brid-player.js b/extensions/amp-brid-player/0.1/amp-brid-player.js
index 82755d21d60cc..139271f3f4753 100644
--- a/extensions/amp-brid-player/0.1/amp-brid-player.js
+++ b/extensions/amp-brid-player/0.1/amp-brid-player.js
@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {CONSENT_POLICY_STATE} from '../../../src/core/constants/consent-state';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
 import {assertAbsoluteHttpOrHttpsUrl} from '../../../src/url';
@@ -26,11 +28,16 @@ import {
 } from '../../../src/iframe-video';
 import {dev, userAssert} from '../../../src/log';
 import {
+  dispatchCustomEvent,
   fullscreenEnter,
   fullscreenExit,
   isFullscreenElement,
   removeElement,
 } from '../../../src/dom';
+import {
+  getConsentPolicyInfo,
+  getConsentPolicyState,
+} from '../../../src/consent';
 import {getData, listen} from '../../../src/event-helper';
 import {htmlFor} from '../../../src/static-template';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
@@ -78,6 +85,9 @@ class AmpBridPlayer extends AMP.BaseElement {
 
     /** @private {?Function} */
     this.unlistenMessage_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -121,6 +131,8 @@ class AmpBridPlayer extends AMP.BaseElement {
       feedType = this.element.getAttribute('data-dynamic');
     } else if (this.element.hasAttribute('data-playlist')) {
       feedType = 'playlist';
+    } else if (this.element.hasAttribute('data-carousel')) {
+      feedType = 'carousel';
     } else if (this.element.hasAttribute('data-outstream')) {
       feedType = 'outstream';
     }
@@ -163,8 +175,9 @@ class AmpBridPlayer extends AMP.BaseElement {
     this.feedID_ = userAssert(
       element.getAttribute('data-video') ||
         element.getAttribute('data-playlist') ||
+        element.getAttribute('data-carousel') ||
         element.getAttribute('data-outstream'),
-      'Either the data-video or the data-playlist or the data-outstream ' +
+      'Either the data-video, data-playlist, data-carousel or data-outstream ' +
         'attributes must be specified for <amp-brid-player> %s',
       element
     );
@@ -205,6 +218,9 @@ class AmpBridPlayer extends AMP.BaseElement {
     const deferred = new Deferred();
     this.playerReadyPromise_ = deferred.promise;
     this.playerReadyResolver_ = deferred.resolve;
+
+    this.pauseHelper_.updatePlaying(false);
+
     return true; // Call layoutCallback again.
   }
 
@@ -224,29 +240,31 @@ class AmpBridPlayer extends AMP.BaseElement {
       return;
     }
 
-    const {partnerID_: partnerID, feedID_: feedID} = this;
+    const {feedID_: feedID, partnerID_: partnerID} = this;
 
-    const placeholder = htmlFor(element)`
-      <amp-img referrerpolicy=origin layout=fill placeholder>
-        <amp-img referrerpolicy=origin layout=fill fallback
-            src="https://cdn.brid.tv/live/default/defaultSnapshot.png">
-        </amp-img>
-      </amp-img>`;
+    const html = htmlFor(element);
+    const placeholder = html`
+      <img placeholder referrerpolicy="origin" loading="lazy" />
+    `;
 
     this.propagateAttributes(['aria-label'], placeholder);
     this.applyFillContent(placeholder);
 
+    const altText = placeholder.hasAttribute('aria-label')
+      ? 'Loading video - ' + placeholder.getAttribute('aria-label')
+      : 'Loading video';
+
+    placeholder.setAttribute('alt', altText);
+
     placeholder.setAttribute(
       'src',
       `https://cdn.brid.tv/live/partners/${encodeURIComponent(partnerID)}` +
         `/snapshot/${encodeURIComponent(feedID)}.jpg`
     );
 
-    const altText = placeholder.hasAttribute('aria-label')
-      ? 'Loading video - ' + placeholder.getAttribute('aria-label')
-      : 'Loading video';
-
-    placeholder.setAttribute('alt', altText);
+    this.loadPromise(placeholder).catch(() => {
+      placeholder.src = 'https://cdn.brid.tv/live/default/defaultSnapshot.png';
+    });
 
     return placeholder;
   }
@@ -267,6 +285,52 @@ class AmpBridPlayer extends AMP.BaseElement {
     });
   }
 
+  /**
+   * Requests consent data from consent module
+   * and forwards information to player
+   * @private
+   */
+  getConsentData_() {
+    const consentPolicy = this.getConsentPolicy() || 'default';
+    const consentStatePromise = getConsentPolicyState(
+      this.element,
+      consentPolicy
+    );
+    const consentStringPromise = getConsentPolicyInfo(
+      this.element,
+      consentPolicy
+    );
+
+    return Promise.all([consentStatePromise, consentStringPromise]).then(
+      (consents) => {
+        let consentData;
+        switch (consents[0]) {
+          case CONSENT_POLICY_STATE.SUFFICIENT:
+            consentData = {
+              'gdprApplies': true,
+              'userConsent': 1,
+              'gdprString': consents[1],
+            };
+            break;
+          case CONSENT_POLICY_STATE.INSUFFICIENT:
+          case CONSENT_POLICY_STATE.UNKNOWN:
+            consentData = {
+              'gdprApplies': true,
+              'userConsent': 0,
+              'gdprString': consents[1],
+            };
+            break;
+          case CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED:
+          default:
+            consentData = {
+              'gdprApplies': false,
+            };
+        }
+        this.sendCommand_('setAMPGDPR', JSON.stringify(consentData));
+      }
+    );
+  }
+
   /**
    * @param {!Event} event
    * @private
@@ -285,8 +349,20 @@ class AmpBridPlayer extends AMP.BaseElement {
     const params = eventData.split('|');
 
     if (params[2] == 'trigger') {
-      if (params[3] == 'ready') {
-        this.playerReadyResolver_(this.iframe_);
+      switch (params[3]) {
+        case 'ready':
+          this.playerReadyResolver_(this.iframe_);
+          break;
+        case 'requestAMPGDPR':
+          this.getConsentData_();
+          break;
+        case 'play':
+          this.pauseHelper_.updatePlaying(true);
+          break;
+        case 'pause':
+        case 'ended':
+          this.pauseHelper_.updatePlaying(false);
+          break;
       }
       redispatch(element, params[3], {
         'ready': VideoEvents.LOAD,
@@ -301,7 +377,7 @@ class AmpBridPlayer extends AMP.BaseElement {
 
     if (params[2] == 'volume') {
       this.volume_ = parseFloat(params[3]);
-      element.dispatchCustomEvent(mutedOrUnmutedEvent(this.volume_ <= 0));
+      dispatchCustomEvent(element, mutedOrUnmutedEvent(this.volume_ <= 0));
     }
 
     if (params[2] == 'currentTime') {
@@ -324,8 +400,8 @@ class AmpBridPlayer extends AMP.BaseElement {
   }
 
   /** @override */
-  play(unusedIsAutoplay) {
-    this.sendCommand_('play');
+  play(isAutoplay) {
+    this.sendCommand_('play', isAutoplay ? 'auto' : '');
   }
 
   /** @override */
diff --git a/extensions/amp-brid-player/0.1/test/test-amp-brid-player.js b/extensions/amp-brid-player/0.1/test/test-amp-brid-player.js
index 1607d480f9051..f46fa4f4b405c 100644
--- a/extensions/amp-brid-player/0.1/test/test-amp-brid-player.js
+++ b/extensions/amp-brid-player/0.1/test/test-amp-brid-player.js
@@ -49,18 +49,21 @@ describes.realWin(
       }
 
       // see yt test implementation
-      timer.promise(50).then(() => {
-        const bridTimerIframe = bc.querySelector('iframe');
+      timer
+        .promise(50)
+        .then(() => bc.getImpl())
+        .then((impl) => {
+          const bridTimerIframe = bc.querySelector('iframe');
 
-        bc.implementation_.handleBridMessage_({
-          origin: 'https://services.brid.tv',
-          source: bridTimerIframe.contentWindow,
-          data: 'Brid|0|trigger|ready',
+          impl.handleBridMessage_({
+            origin: 'https://services.brid.tv',
+            source: bridTimerIframe.contentWindow,
+            data: 'Brid|0|trigger|ready',
+          });
         });
-      });
       doc.body.appendChild(bc);
       return bc
-        .build()
+        .buildInternal()
         .then(() => {
           bc.layoutCallback();
         })
@@ -119,43 +122,87 @@ describes.realWin(
       });
     });
 
-    it('should forward events from brid-player to the amp element', () => {
-      return getBridPlayer(
+    it('requires data-partner for playlists', () => {
+      return allowConsoleError(() => {
+        return getBridPlayer({
+          'data-player': '4144',
+          'data-playlist': '13663',
+        }).should.eventually.be.rejectedWith(
+          /The data-partner attribute is required for/
+        );
+      });
+    });
+
+    it('requires data-player for playlists', () => {
+      return allowConsoleError(() => {
+        return getBridPlayer({
+          'data-partner': '264',
+          'data-playlist': '13663',
+        }).should.eventually.be.rejectedWith(
+          /The data-player attribute is required for/
+        );
+      });
+    });
+
+    it('requires data-partner for carousels', () => {
+      return allowConsoleError(() => {
+        return getBridPlayer({
+          'data-player': '4144',
+          'data-carousel': '459',
+        }).should.eventually.be.rejectedWith(
+          /The data-partner attribute is required for/
+        );
+      });
+    });
+
+    it('requires data-player for carousels', () => {
+      return allowConsoleError(() => {
+        return getBridPlayer({
+          'data-partner': '264',
+          'data-carousel': '459',
+        }).should.eventually.be.rejectedWith(
+          /The data-player attribute is required for/
+        );
+      });
+    });
+
+    it('should forward events from brid-player to the amp element', async () => {
+      const bc = await getBridPlayer(
         {
           'data-partner': '1177',
           'data-player': '979',
           'data-video': '5204',
         },
         true
-      ).then((bc) => {
-        const iframe = bc.querySelector('iframe');
+      );
+      const impl = await bc.getImpl();
 
-        return Promise.resolve()
-          .then(() => {
-            const p = listenOncePromise(bc, VideoEvents.PLAYING);
-            sendFakeMessage(bc, iframe, 'trigger|play');
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(bc, VideoEvents.MUTED);
-            sendFakeMessage(bc, iframe, 'volume|0');
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(bc, VideoEvents.PAUSE);
-            sendFakeMessage(bc, iframe, 'trigger|pause');
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(bc, VideoEvents.UNMUTED);
-            sendFakeMessage(bc, iframe, 'volume|1');
-            return p;
-          });
-      });
+      const iframe = bc.querySelector('iframe');
+      return Promise.resolve()
+        .then(() => {
+          const p = listenOncePromise(bc, VideoEvents.PLAYING);
+          sendFakeMessage(impl, iframe, 'trigger|play');
+          return p;
+        })
+        .then(() => {
+          const p = listenOncePromise(bc, VideoEvents.MUTED);
+          sendFakeMessage(impl, iframe, 'volume|0');
+          return p;
+        })
+        .then(() => {
+          const p = listenOncePromise(bc, VideoEvents.PAUSE);
+          sendFakeMessage(impl, iframe, 'trigger|pause');
+          return p;
+        })
+        .then(() => {
+          const p = listenOncePromise(bc, VideoEvents.UNMUTED);
+          sendFakeMessage(impl, iframe, 'volume|1');
+          return p;
+        });
     });
 
-    function sendFakeMessage(bc, iframe, command) {
-      bc.implementation_.handleBridMessage_({
+    function sendFakeMessage(impl, iframe, command) {
+      impl.handleBridMessage_({
         origin: 'https://services.brid.tv',
         source: iframe.contentWindow,
         data: 'Brid|0|' + command,
@@ -169,13 +216,13 @@ describes.realWin(
           'data-player': '979',
           'data-video': '13663',
         }).then((brid) => {
-          const img = brid.querySelector('amp-img');
+          const img = brid.querySelector('img');
           expect(img).to.not.be.null;
           expect(img.getAttribute('src')).to.equal(
             'https://cdn.brid.tv/live/partners/264/snapshot/13663.jpg'
           );
-          expect(img.getAttribute('layout')).to.equal('fill');
-          expect(img.hasAttribute('placeholder')).to.be.true;
+          expect(img).to.have.class('i-amphtml-fill-content');
+          expect(img).to.have.attribute('placeholder');
           expect(img.getAttribute('alt')).to.equal('Loading video');
           expect(img.getAttribute('referrerpolicy')).to.equal('origin');
         });
@@ -187,30 +234,13 @@ describes.realWin(
           'data-video': '13663',
           'aria-label': 'great video',
         }).then((brid) => {
-          const img = brid.querySelector('amp-img');
+          const img = brid.querySelector('img');
           expect(img).to.not.be.null;
           expect(img.getAttribute('alt')).to.equal(
             'Loading video - great video'
           );
         });
       });
-      it('should create a fallback for default snapshot', () => {
-        return getBridPlayer({
-          'data-partner': '264',
-          'data-player': '979',
-          'data-video': '13663',
-        }).then((brid) => {
-          const img = brid.querySelector('amp-img');
-          const fallbackImg = img.querySelector('amp-img');
-          expect(fallbackImg).to.not.be.null;
-          expect(fallbackImg.getAttribute('src')).to.equal(
-            'https://cdn.brid.tv/live/default/defaultSnapshot.png'
-          );
-          expect(fallbackImg.getAttribute('layout')).to.equal('fill');
-          expect(fallbackImg.hasAttribute('fallback')).to.be.true;
-          expect(fallbackImg.getAttribute('referrerpolicy')).to.equal('origin');
-        });
-      });
     });
   }
 );
diff --git a/extensions/amp-brid-player/0.1/test/validator-amp-brid-player.html b/extensions/amp-brid-player/0.1/test/validator-amp-brid-player.html
index 64e0bf4ef767a..ea918a8653fa9 100644
--- a/extensions/amp-brid-player/0.1/test/validator-amp-brid-player.html
+++ b/extensions/amp-brid-player/0.1/test/validator-amp-brid-player.html
@@ -53,6 +53,14 @@
       layout="responsive"
       width="480" height="270">
   </amp-brid-player>
+  <!-- Alternate valid example using a carousel. -->
+  <amp-brid-player
+      data-partner="264"
+      data-player="4144"
+      data-carousel="255"
+      layout="responsive"
+      width="480" height="270">
+  </amp-brid-player>
   <!-- Alternate valid example using a outstream. -->
   <amp-brid-player
       data-partner="6205"
diff --git a/extensions/amp-brid-player/0.1/test/validator-amp-brid-player.out b/extensions/amp-brid-player/0.1/test/validator-amp-brid-player.out
index 484eafd7a92d5..54d0667072c9a 100644
--- a/extensions/amp-brid-player/0.1/test/validator-amp-brid-player.out
+++ b/extensions/amp-brid-player/0.1/test/validator-amp-brid-player.out
@@ -54,6 +54,14 @@ FAIL
 |        layout="responsive"
 |        width="480" height="270">
 |    </amp-brid-player>
+|    <!-- Alternate valid example using a carousel. -->
+|    <amp-brid-player
+|        data-partner="264"
+|        data-player="4144"
+|        data-carousel="255"
+|        layout="responsive"
+|        width="480" height="270">
+|    </amp-brid-player>
 |    <!-- Alternate valid example using a outstream. -->
 |    <amp-brid-player
 |        data-partner="6205"
@@ -65,7 +73,7 @@ FAIL
 |    <!-- Invalid example missing a player id. -->
 |    <amp-brid-player
 >>   ^~~~~~~~~
-amp-brid-player/0.1/test/validator-amp-brid-player.html:65:2 The mandatory attribute 'data-player' is missing in tag 'amp-brid-player'. (see https://amp.dev/documentation/components/amp-brid-player)
+amp-brid-player/0.1/test/validator-amp-brid-player.html:73:2 The mandatory attribute 'data-player' is missing in tag 'amp-brid-player'. (see https://amp.dev/documentation/components/amp-brid-player/)
 |        data-partner="264"
 |        data-video="13663"
 |        layout="responsive"
@@ -74,7 +82,7 @@ amp-brid-player/0.1/test/validator-amp-brid-player.html:65:2 The mandatory attri
 |    <!-- Invalid example missing video, playlist and outstream. -->
 |    <amp-brid-player
 >>   ^~~~~~~~~
-amp-brid-player/0.1/test/validator-amp-brid-player.html:72:2 The tag 'amp-brid-player' is missing a mandatory attribute - pick one of ['data-outstream', 'data-playlist', 'data-video']. (see https://amp.dev/documentation/components/amp-brid-player)
+amp-brid-player/0.1/test/validator-amp-brid-player.html:80:2 The tag 'amp-brid-player' is missing a mandatory attribute - pick one of ['data-carousel', 'data-outstream', 'data-playlist', 'data-video']. (see https://amp.dev/documentation/components/amp-brid-player/)
 |        data-partner="264"
 |        data-player="4144"
 |        layout="responsive"
@@ -83,7 +91,7 @@ amp-brid-player/0.1/test/validator-amp-brid-player.html:72:2 The tag 'amp-brid-p
 |    <!-- Invalid: `dock` without `amp-video-docking` extension. -->
 |    <amp-brid-player
 >>   ^~~~~~~~~
-amp-brid-player/0.1/test/validator-amp-brid-player.html:79:2 The attribute 'dock' requires including the 'amp-video-docking' extension JavaScript.
+amp-brid-player/0.1/test/validator-amp-brid-player.html:87:2 The attribute 'dock' requires including the 'amp-video-docking' extension JavaScript.
 |        dock
 |        data-partner="264"
 |        data-player="4144"
diff --git a/extensions/amp-brid-player/OWNERS b/extensions/amp-brid-player/OWNERS
index 4e53dfefb6ae3..683b068bb8e82 100644
--- a/extensions/amp-brid-player/OWNERS
+++ b/extensions/amp-brid-player/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'pedjoni8'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'pedjoni8'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-brid-player/amp-brid-player.md b/extensions/amp-brid-player/amp-brid-player.md
index 834a802275952..bdb90d9d16046 100644
--- a/extensions/amp-brid-player/amp-brid-player.md
+++ b/extensions/amp-brid-player/amp-brid-player.md
@@ -26,12 +26,8 @@ limitations under the License.
 
 An `amp-brid-player` displays the Brid Player used in [Brid.tv](https://www.brid.tv/) Video Platform.
 
-## Example
-
 The `width` and `height` attributes determine the aspect ratio of the player embedded in responsive layouts.
 
-Example:
-
 ```html
 <amp-brid-player
   data-partner="264"
@@ -44,57 +40,87 @@ Example:
 </amp-brid-player>
 ```
 
-## Attributes
-
-<table>
-  <tr>
-    <td width="40%"><strong>autoplay</strong></td>
-    <td>If this attribute is present, and the browser supports autoplay:
-<ul>
-  <li>the video is automatically muted before autoplay starts</li>
-  <li>when the video is scrolled out of view, the video is paused</li>
-  <li>when the video is scrolled into view, the video resumes playback</li>
-  <li>when the user taps the video, the video is unmuted</li>
-  <li>if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.</li>
-</ul></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-partner</strong></td>
-    <td>The Brid.tv partner ID.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-player</strong></td>
-    <td>The Brid.tv player ID. Specific to every partner.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-video</strong></td>
-    <td>The Brid.tv video ID.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-playlist</strong></td>
-    <td>The Brid.tv playlist ID or custom string value for dynamic playlists.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-outstream</strong></td>
-    <td>The Brid.tv outstream unit ID.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-dynamic</strong></td>
-    <td>Parameter used to specify type of dynamic playlist, e.g. latest, channel, tag.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>dock</strong></td>
-    <td><strong>Requires <code>amp-video-docking</code> extension.</strong> If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
-    For more details, see <a href="https://amp.dev/documentation/components/amp-video-docking">documentation on the docking extension itself.</a></td>
-  </tr>
-</table>
-
-Embed code must either have video, playlist or outstream attribute.
+### `autoplay`
+
+If this attribute is present, and the browser supports autoplay:
+
+-   the video is automatically muted before autoplay starts
+-   when the video is scrolled out of view, the video is paused
+-   when the video is scrolled into view, the video resumes playback
+-   when the user taps the video, the video is unmuted
+-   if the user has interacted with the video (e.g., mutes/unmutes,
+    pauses/resumes, etc.), and the video is scrolled in or out of view, the
+    state of the video remains as how the user left it. For example, if the user
+    pauses the video, then scrolls the video out of view and returns to the
+    video, the video is still paused.
+
+### `data-partner`
+
+The Brid.tv partner ID.
+
+### `data-player`
+
+The Brid.tv player ID. Specific to every partner.
+
+### `data-video`
+
+The Brid.tv video ID. Embed code must either have `video`, `playlist`, `carousel`
+or `outstream` attribute.
+
+### `data-playlist`
+
+The Brid.tv playlist ID or custom string value for dynamic playlists. Embed code
+must either have `video`, `playlist`, `carousel` or `outstream` attribute.
+
+### `data-carousel`
+
+The Brid.tv carousel ID. Embed code must either have `video`, `playlist`, `carousel`
+or `outstream` attribute.
+
+### `data-outstream`
+
+The Brid.tv outstream unit ID. Embed code must either have `video`, `playlist`, `carousel`
+or `outstream` attribute.
+
+### `data-dynamic`
+
+Parameter used to specify type of dynamic playlist, e.g. latest, channel, tag.
+
+### `dock`
+
+**Requires `amp-video-docking` extension.** If this attribute is present and the
+video is playing manually, the video will be "minimized" and fixed to a corner
+or an element when the user scrolls out of the video component's visual area.
+
+For more details, see [documentation on the docking extension itself](https://amp.dev/documentation/components/amp-video-docking).
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
+
+## Actions
+
+### `play`
+
+Plays the video.
+
+### `pause`
+
+Pauses the video.
+
+### `mute`
+
+Mutes the video.
+
+### `unmute`
+
+Unmutes the video.
+
+### `fullscreenenter`
+
+Takes the video to fullscreen.
 
 ## Validation
 
-See [amp-brid-player rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-brid-player/validator-amp-brid-player.protoascii) in the AMP validator specification.
+See [amp-brid-player rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-brid-player/validator-amp-brid-player.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-brid-player/validator-amp-brid-player.protoascii b/extensions/amp-brid-player/validator-amp-brid-player.protoascii
index e00484b0c9838..a569c3ca7983d 100644
--- a/extensions/amp-brid-player/validator-amp-brid-player.protoascii
+++ b/extensions/amp-brid-player/validator-amp-brid-player.protoascii
@@ -37,7 +37,7 @@ tags: {  # <amp-brid-player>
   }
   attrs: {
     name: "data-outstream"
-    mandatory_oneof: "['data-outstream', 'data-playlist', 'data-video']"
+    mandatory_oneof: "['data-carousel', 'data-outstream', 'data-playlist', 'data-video']"
     value_regex: "[0-9]+"
   }
   attrs: {
@@ -52,12 +52,17 @@ tags: {  # <amp-brid-player>
   }
   attrs: {
     name: "data-playlist"
-    mandatory_oneof: "['data-outstream', 'data-playlist', 'data-video']"
+    mandatory_oneof: "['data-carousel', 'data-outstream', 'data-playlist', 'data-video']"
     value_regex: ".+"
   }
   attrs: {
     name: "data-video"
-    mandatory_oneof: "['data-outstream', 'data-playlist', 'data-video']"
+    mandatory_oneof: "['data-carousel', 'data-outstream', 'data-playlist', 'data-video']"
+    value_regex: "[0-9]+"
+  }
+  attrs: {
+    name: "data-carousel"
+    mandatory_oneof: "['data-carousel', 'data-outstream', 'data-playlist', 'data-video']"
     value_regex: "[0-9]+"
   }
   attrs: {
@@ -65,7 +70,7 @@ tags: {  # <amp-brid-player>
     requires_extension: "amp-video-docking"
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-brid-player"
+  spec_url: "https://amp.dev/documentation/components/amp-brid-player/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-brightcove/0.1/amp-brightcove.js b/extensions/amp-brightcove/0.1/amp-brightcove.js
index 52c5d68bf14ac..6322d75c95ede 100644
--- a/extensions/amp-brightcove/0.1/amp-brightcove.js
+++ b/extensions/amp-brightcove/0.1/amp-brightcove.js
@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
-import {addParamsToUrl} from '../../../src/url';
+import {addParamToUrl, addParamsToUrl} from '../../../src/url';
 import {
   createFrameFor,
   isJsonOrObj,
@@ -26,14 +27,20 @@ import {
   redispatch,
 } from '../../../src/iframe-video';
 import {dev, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {
+  dispatchCustomEvent,
   fullscreenEnter,
   fullscreenExit,
   getDataParamsFromAttributes,
   isFullscreenElement,
   removeElement,
 } from '../../../src/dom';
+import {
+  getConsentPolicyInfo,
+  getConsentPolicySharedData,
+  getConsentPolicyState,
+} from '../../../src/consent';
 import {getData, listen} from '../../../src/event-helper';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
 import {isLayoutSizeDefined} from '../../../src/layout';
@@ -85,6 +92,18 @@ class AmpBrightcove extends AMP.BaseElement {
 
     /** @private {?../../../src/service/url-replacements-impl.UrlReplacements} */
     this.urlReplacements_ = null;
+
+    /**@private {?number} */
+    this.consentState_ = null;
+
+    /**@private {?object} */
+    this.consentSharedData_ = null;
+
+    /**@private {?string} */
+    this.consentString_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /** @override */
@@ -100,13 +119,6 @@ class AmpBrightcove extends AMP.BaseElement {
     return isLayoutSizeDefined(layout);
   }
 
-  /** @override */
-  viewportCallback(visible) {
-    this.element.dispatchCustomEvent(VideoEvents.VISIBILITY, {
-      visible,
-    });
-  }
-
   /** @override */
   buildCallback() {
     this.urlReplacements_ = Services.urlReplacementsForDoc(this.element);
@@ -116,32 +128,57 @@ class AmpBrightcove extends AMP.BaseElement {
     this.playerReadyResolver_ = deferred.resolve;
 
     // Warn if the player does not have video interface support
-    this.readyTimeout_ = /** @type {number} */ (Services.timerFor(window).delay(
-      () => {
+    this.readyTimeout_ = /** @type {number} */ (
+      Services.timerFor(window).delay(() => {
         user().warn(
           TAG,
           'Did not receive ready callback from player %s.' +
             ' Ensure it has the videojs-amp-support plugin.',
           this.playerId_
         );
-      },
-      3000
-    ));
+      }, 3000)
+    );
+  }
 
-    this.playerReadyResolver_(this.iframe_);
+  /**
+   * @return {Promise}
+   */
+  getConsents_() {
+    const consentPolicy = super.getConsentPolicy();
+    const consentPromise = consentPolicy
+      ? getConsentPolicyState(this.element, consentPolicy)
+      : Promise.resolve(null);
+    const consentStringPromise = consentPolicy
+      ? getConsentPolicyInfo(this.element, consentPolicy)
+      : Promise.resolve(null);
+    const sharedDataPromise = consentPolicy
+      ? getConsentPolicySharedData(this.element, consentPolicy)
+      : Promise.resolve(null);
+    return Promise.all([
+      consentPromise,
+      sharedDataPromise,
+      consentStringPromise,
+    ]).then((arr) => {
+      this.consentState_ = arr[0];
+      this.consentSharedData_ = arr[1];
+      this.consentString_ = arr[2];
+    });
   }
 
-  /** @override */
+  /**
+   * @override
+   * @return {!Promise}
+   */
   layoutCallback() {
-    const iframe = createFrameFor(this, this.getIframeSrc_());
-
-    this.iframe_ = iframe;
-
-    this.unlistenMessage_ = listen(this.win, 'message', (e) =>
-      this.handlePlayerMessage_(e)
-    );
-
-    return this.loadPromise(iframe).then(() => this.playerReadyPromise_);
+    return this.getConsents_().then(() => {
+      this.iframe_ = createFrameFor(this, this.getIframeSrc_());
+      this.unlistenMessage_ = listen(this.win, 'message', (e) =>
+        this.handlePlayerMessage_(e)
+      );
+      return this.loadPromise(this.iframe_).then(
+        () => this.playerReadyPromise_
+      );
+    });
   }
 
   /**
@@ -194,15 +231,19 @@ class AmpBrightcove extends AMP.BaseElement {
       return;
     }
 
-    if (eventType === 'ready') {
-      this.onReady_(data);
-    }
-
-    if (eventType === 'playing') {
-      this.playing_ = true;
-    }
-    if (eventType === 'pause') {
-      this.playing_ = false;
+    switch (eventType) {
+      case 'ready':
+        this.onReady_(data);
+        break;
+      case 'playing':
+        this.playing_ = true;
+        this.pauseHelper_.updatePlaying(true);
+        break;
+      case 'pause':
+      case 'ended':
+        this.playing_ = false;
+        this.pauseHelper_.updatePlaying(false);
+        break;
     }
 
     if (data['ct']) {
@@ -235,7 +276,7 @@ class AmpBrightcove extends AMP.BaseElement {
         return;
       }
       this.muted_ = muted;
-      element.dispatchCustomEvent(mutedOrUnmutedEvent(this.muted_));
+      dispatchCustomEvent(element, mutedOrUnmutedEvent(this.muted_));
       return;
     }
   }
@@ -254,6 +295,8 @@ class AmpBrightcove extends AMP.BaseElement {
     installVideoManagerForDoc(element);
     Services.videoManagerForDoc(element).register(this);
 
+    this.playerReadyResolver_(this.iframe_);
+
     dev().info(
       TAG,
       'Player %s ready. ' +
@@ -265,16 +308,18 @@ class AmpBrightcove extends AMP.BaseElement {
   }
 
   /**
-   * @return {string}
+   * @return {string} iframe source url
    * @private
    */
   getIframeSrc_() {
     const {element: el} = this;
+
     const account = userAssert(
       el.getAttribute('data-account'),
       'The data-account attribute is required for <amp-brightcove> %s',
       el
     );
+
     const embed = el.getAttribute('data-embed') || 'default';
 
     this.playerId_ =
@@ -282,28 +327,47 @@ class AmpBrightcove extends AMP.BaseElement {
       el.getAttribute('data-player-id') ||
       'default';
 
-    const src =
+    let src =
       `https://players.brightcove.net/${encodeURIComponent(account)}` +
       `/${encodeURIComponent(this.playerId_)}` +
       `_${encodeURIComponent(embed)}/index.html` +
+      '?amp=1' +
       // These are encodeURIComponent'd in encodeId_().
       (el.getAttribute('data-playlist-id')
-        ? '?playlistId=' + this.encodeId_(el.getAttribute('data-playlist-id'))
+        ? '&playlistId=' + this.encodeId_(el.getAttribute('data-playlist-id'))
         : el.getAttribute('data-video-id')
-        ? '?videoId=' + this.encodeId_(el.getAttribute('data-video-id'))
+        ? '&videoId=' + this.encodeId_(el.getAttribute('data-video-id'))
         : '');
 
     const customReferrer = el.getAttribute('data-referrer');
 
     if (customReferrer) {
-      el.setAttribute(
-        'data-param-referrer',
+      src = addParamToUrl(
+        src,
+        'referrer',
         this.urlReplacements_.expandUrlSync(customReferrer)
       );
     }
 
+    if (this.consentState_) {
+      src = addParamToUrl(src, 'ampInitialConsentState', this.consentState_);
+    }
+    if (this.consentSharedData_) {
+      src = addParamToUrl(
+        src,
+        'ampConsentSharedData',
+        JSON.stringify(this.consentSharedData_)
+      );
+    }
+    if (this.consentString_) {
+      src = addParamToUrl(src, 'ampInitialConsentValue', this.consentString_);
+    }
+
     el.setAttribute('data-param-playsinline', 'true');
 
+    if (el.hasAttribute('data-param-autoplay')) {
+      el.removeAttribute('data-param-autoplay');
+    }
     // Pass through data-param-* attributes as params for plugin use
     return addParamsToUrl(src, getDataParamsFromAttributes(el));
   }
@@ -378,6 +442,8 @@ class AmpBrightcove extends AMP.BaseElement {
     this.playerReadyPromise_ = deferred.promise;
     this.playerReadyResolver_ = deferred.resolve;
 
+    this.pauseHelper_.updatePlaying(false);
+
     return true; // Call layoutCallback again.
   }
 
@@ -392,8 +458,8 @@ class AmpBrightcove extends AMP.BaseElement {
   }
 
   /** @override */
-  play(unusedIsAutoplay) {
-    this.sendCommand_('play');
+  play(isAutoplay) {
+    this.sendCommand_('play', isAutoplay);
   }
 
   /** @override */
diff --git a/extensions/amp-brightcove/0.1/test/test-amp-brightcove.js b/extensions/amp-brightcove/0.1/test/test-amp-brightcove.js
index 79103fabfe4a7..5a1beb8fb46b2 100644
--- a/extensions/amp-brightcove/0.1/test/test-amp-brightcove.js
+++ b/extensions/amp-brightcove/0.1/test/test-amp-brightcove.js
@@ -15,8 +15,17 @@
  */
 
 import '../amp-brightcove';
+import * as consent from '../../../../src/consent';
+import {BaseElement} from '../../../../src/base-element';
+import {CONSENT_POLICY_STATE} from '../../../../src/core/constants/consent-state';
+import {CommonSignals} from '../../../../src/core/constants/common-signals';
 import {VideoEvents} from '../../../../src/video-interface';
+import {
+  createElementWithAttributes,
+  whenUpgradedToCustomElement,
+} from '../../../../src/dom';
 import {listenOncePromise} from '../../../../src/event-helper';
+import {macroTask} from '../../../../testing/yield';
 import {parseUrlDeprecated} from '../../../../src/url';
 
 describes.realWin(
@@ -24,6 +33,7 @@ describes.realWin(
   {
     amp: {
       extensions: ['amp-brightcove'],
+      runtimeOn: true,
     },
   },
   (env) => {
@@ -32,33 +42,68 @@ describes.realWin(
     beforeEach(() => {
       win = env.win;
       doc = win.document;
+
+      // make sync
+      env.sandbox
+        .stub(BaseElement.prototype, 'mutateElement')
+        .callsFake((mutator) => {
+          mutator();
+        });
     });
 
-    function getBrightcove(attributes, opt_responsive) {
-      const bc = doc.createElement('amp-brightcove');
-      for (const key in attributes) {
-        bc.setAttribute(key, attributes[key]);
-      }
-      bc.setAttribute('width', '111');
-      bc.setAttribute('height', '222');
-      if (opt_responsive) {
-        bc.setAttribute('layout', 'responsive');
+    async function getBrightcoveBuild(attributes) {
+      const element = createElementWithAttributes(doc, 'amp-brightcove', {
+        width: '111',
+        height: '222',
+        ...attributes,
+      });
+
+      doc.body.appendChild(element);
+
+      await whenUpgradedToCustomElement(element);
+      await element.whenBuilt();
+
+      return element;
+    }
+
+    async function getBrightcove(attributes) {
+      const element = await getBrightcoveBuild(attributes);
+      const impl = await element.getImpl(false);
+
+      await element.signals().whenSignal(CommonSignals.LOAD_START);
+
+      // Wait for the promise in layoutCallback() to resolve
+      await macroTask();
+
+      try {
+        fakePostMessage(impl, {event: 'ready'});
+      } catch (_) {
+        // This fails when the iframe is not available (after layoutCallback
+        // fails) in which case awaiting the LOAD_END sigal below will throw.
       }
-      doc.body.appendChild(bc);
-      return bc
-        .build()
-        .then(() => bc.layoutCallback())
-        .then(() => bc);
+
+      await element.signals().whenSignal(CommonSignals.LOAD_END);
+
+      return element;
     }
 
-    function fakePostMessage(bc, info) {
-      bc.implementation_.handlePlayerMessage_({
+    function fakePostMessage(impl, info) {
+      impl.handlePlayerMessage_({
         origin: 'https://players.brightcove.net',
-        source: bc.querySelector('iframe').contentWindow,
+        source: impl.element.querySelector('iframe').contentWindow,
         data: JSON.stringify(info),
       });
     }
 
+    it('should not remove `dock`', async () => {
+      const element = await getBrightcoveBuild({
+        'data-account': '1290862519001',
+        'data-video-id': 'ref:amp-test-video',
+        'dock': '',
+      });
+      expect(element.hasAttribute('dock')).to.be.true;
+    });
+
     it('renders', () => {
       return getBrightcove({
         'data-account': '1290862519001',
@@ -69,58 +114,46 @@ describes.realWin(
         expect(iframe.tagName).to.equal('IFRAME');
         expect(iframe.src).to.equal(
           'https://players.brightcove.net/1290862519001/default_default' +
-            '/index.html?videoId=ref:amp-test-video&playsinline=true'
+            '/index.html?amp=1' +
+            '&videoId=ref:amp-test-video&playsinline=true'
         );
       });
     });
 
-    it('renders responsively', () => {
-      return getBrightcove(
-        {
-          'data-account': '1290862519001',
-          'data-video-id': 'ref:amp-test-video',
-        },
-        true
-      ).then((bc) => {
-        const iframe = bc.querySelector('iframe');
-        expect(iframe).to.not.be.null;
-        expect(iframe.className).to.match(/i-amphtml-fill-content/);
+    it('removes iframe after unlayoutCallback', async () => {
+      const bc = await getBrightcove({
+        'data-account': '1290862519001',
+        'data-video-id': 'ref:amp-test-video',
       });
+      const obj = await bc.getImpl();
+      const iframe = bc.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+      obj.unlayoutCallback();
+      expect(bc.querySelector('iframe')).to.be.null;
+      expect(obj.iframe_).to.be.null;
     });
 
-    it('requires data-account', () => {
-      expectAsyncConsoleError(/The data-account attribute is required for/, 1);
-      return getBrightcove({}).should.eventually.be.rejectedWith(
-        /The data-account attribute is required for/
-      );
-    });
-
-    it('removes iframe after unlayoutCallback', () => {
-      return getBrightcove(
-        {
-          'data-account': '1290862519001',
-          'data-video-id': 'ref:amp-test-video',
-        },
-        true
-      ).then((bc) => {
+    it('should pass data-param-* attributes to the iframe src', () => {
+      return getBrightcove({
+        'data-account': '1290862519001',
+        'data-video-id': 'ref:amp-test-video',
+        'data-param-my-param': 'hello world',
+      }).then((bc) => {
         const iframe = bc.querySelector('iframe');
-        expect(iframe).to.not.be.null;
-        const obj = bc.implementation_;
-        obj.unlayoutCallback();
-        expect(bc.querySelector('iframe')).to.be.null;
-        expect(obj.iframe_).to.be.null;
+        const params = parseUrlDeprecated(iframe.src).search.split('&');
+        expect(params).to.contain('myParam=hello%20world');
       });
     });
 
-    it('should pass data-param-* attributes to the iframe src', () => {
+    it('should exclude data-param-autoplay attribute', () => {
       return getBrightcove({
         'data-account': '1290862519001',
         'data-video-id': 'ref:amp-test-video',
-        'data-param-my-param': 'hello world',
+        'data-param-autoplay': 'muted',
       }).then((bc) => {
         const iframe = bc.querySelector('iframe');
         const params = parseUrlDeprecated(iframe.src).search.split('&');
-        expect(params).to.contain('myParam=hello%20world');
+        expect(params).to.not.contain('autoplay');
       });
     });
 
@@ -133,7 +166,8 @@ describes.realWin(
 
         expect(iframe.src).to.equal(
           'https://players.brightcove.net/1290862519001/default_default' +
-            '/index.html?videoId=ref:amp-test-video&playsinline=true'
+            '/index.html?amp=1' +
+            '&videoId=ref:amp-test-video&playsinline=true'
         );
 
         bc.setAttribute('data-account', '12345');
@@ -145,7 +179,8 @@ describes.realWin(
 
         expect(iframe.src).to.equal(
           'https://players.brightcove.net/' +
-            '12345/default_default/index.html?videoId=abcdef&playsinline=true'
+            '12345/default_default/index.html?amp=1' +
+            '&videoId=abcdef&playsinline=true'
         );
       });
     });
@@ -197,82 +232,125 @@ describes.realWin(
       });
     });
 
-    it('should forward events', () => {
+    it('should forward events', async () => {
+      const bc = await getBrightcove({
+        'data-account': '1290862519001',
+        'data-video-id': 'ref:amp-test-video',
+      });
+      const impl = await bc.getImpl();
+      return Promise.resolve()
+        .then(() => {
+          const p = listenOncePromise(bc, VideoEvents.LOAD);
+          fakePostMessage(impl, {event: 'ready', muted: false, playing: false});
+          return p;
+        })
+        .then(() => {
+          const p = listenOncePromise(bc, VideoEvents.LOADEDMETADATA);
+          fakePostMessage(impl, {
+            event: 'loadedmetadata',
+            muted: false,
+            playing: false,
+          });
+          return p;
+        })
+        .then(() => {
+          const p = listenOncePromise(bc, VideoEvents.AD_START);
+          fakePostMessage(impl, {
+            event: 'ads-ad-started',
+            muted: false,
+            playing: false,
+          });
+          return p;
+        })
+        .then(() => {
+          const p = listenOncePromise(bc, VideoEvents.AD_END);
+          fakePostMessage(impl, {
+            event: 'ads-ad-ended',
+            muted: false,
+            playing: false,
+          });
+          return p;
+        })
+        .then(() => {
+          const p = listenOncePromise(bc, VideoEvents.PLAYING);
+          fakePostMessage(impl, {
+            event: 'playing',
+            muted: false,
+            playing: true,
+          });
+          return p;
+        })
+        .then(() => {
+          const p = listenOncePromise(bc, VideoEvents.MUTED);
+          fakePostMessage(impl, {
+            event: 'volumechange',
+            muted: true,
+            playing: true,
+          });
+          return p;
+        })
+        .then(() => {
+          const p = listenOncePromise(bc, VideoEvents.UNMUTED);
+          fakePostMessage(impl, {
+            event: 'volumechange',
+            muted: false,
+            playing: true,
+          });
+          return p;
+        })
+        .then(() => {
+          const p = listenOncePromise(bc, VideoEvents.PAUSE);
+          fakePostMessage(impl, {event: 'pause', muted: false, playing: false});
+          return p;
+        })
+        .then(() => {
+          const p = listenOncePromise(bc, VideoEvents.ENDED);
+          fakePostMessage(impl, {event: 'ended', muted: false, playing: false});
+          return p;
+        });
+    });
+
+    it('should propagate consent state to iframe', () => {
+      env.sandbox
+        .stub(consent, 'getConsentPolicyState')
+        .resolves(CONSENT_POLICY_STATE.SUFFICIENT);
+      env.sandbox
+        .stub(consent, 'getConsentPolicySharedData')
+        .resolves({a: 1, b: 2});
+      env.sandbox.stub(consent, 'getConsentPolicyInfo').resolves('abc');
+
       return getBrightcove({
         'data-account': '1290862519001',
         'data-video-id': 'ref:amp-test-video',
+        'data-block-on-consent': '_till_accepted',
       }).then((bc) => {
-        return Promise.resolve()
-          .then(() => {
-            const p = listenOncePromise(bc, VideoEvents.LOAD);
-            fakePostMessage(bc, {event: 'ready', muted: false, playing: false});
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(bc, VideoEvents.LOADEDMETADATA);
-            fakePostMessage(bc, {
-              event: 'loadedmetadata',
-              muted: false,
-              playing: false,
-            });
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(bc, VideoEvents.AD_START);
-            fakePostMessage(bc, {
-              event: 'ads-ad-started',
-              muted: false,
-              playing: false,
-            });
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(bc, VideoEvents.AD_END);
-            fakePostMessage(bc, {
-              event: 'ads-ad-ended',
-              muted: false,
-              playing: false,
-            });
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(bc, VideoEvents.PLAYING);
-            fakePostMessage(bc, {
-              event: 'playing',
-              muted: false,
-              playing: true,
-            });
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(bc, VideoEvents.MUTED);
-            fakePostMessage(bc, {
-              event: 'volumechange',
-              muted: true,
-              playing: true,
-            });
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(bc, VideoEvents.UNMUTED);
-            fakePostMessage(bc, {
-              event: 'volumechange',
-              muted: false,
-              playing: true,
-            });
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(bc, VideoEvents.PAUSE);
-            fakePostMessage(bc, {event: 'pause', muted: false, playing: false});
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(bc, VideoEvents.ENDED);
-            fakePostMessage(bc, {event: 'ended', muted: false, playing: false});
-            return p;
-          });
+        const iframe = bc.querySelector('iframe');
+
+        expect(iframe.src).to.contain(
+          `ampInitialConsentState=${CONSENT_POLICY_STATE.SUFFICIENT}`
+        );
+        expect(iframe.src).to.contain(
+          `ampConsentSharedData=${encodeURIComponent(
+            JSON.stringify({a: 1, b: 2})
+          )}`
+        );
+        expect(iframe.src).to.contain('ampInitialConsentValue=abc');
       });
     });
+
+    it('should distinguish autoplay', async () => {
+      const bc = await getBrightcove({
+        'data-account': '1290862519001',
+        'data-video-id': 'ref:amp-test-video',
+      });
+      const impl = await bc.getImpl();
+      const spy = env.sandbox.spy(impl, 'sendCommand_');
+
+      impl.play(true);
+      expect(spy).to.be.calledWith('play', true);
+
+      impl.play(false);
+      expect(spy).to.be.calledWith('play', false);
+    });
   }
 );
diff --git a/extensions/amp-brightcove/0.1/test/validator-amp-brightcove.out b/extensions/amp-brightcove/0.1/test/validator-amp-brightcove.out
index c43cc407095e3..c4dcc4d6e1c13 100644
--- a/extensions/amp-brightcove/0.1/test/validator-amp-brightcove.out
+++ b/extensions/amp-brightcove/0.1/test/validator-amp-brightcove.out
@@ -55,7 +55,7 @@ FAIL
 |         leaving them out results in an error. -->
 |    <amp-brightcove
 >>   ^~~~~~~~~
-amp-brightcove/0.1/test/validator-amp-brightcove.html:55:2 The mandatory attribute 'data-account' is missing in tag 'amp-brightcove'. (see https://amp.dev/documentation/components/amp-brightcove)
+amp-brightcove/0.1/test/validator-amp-brightcove.html:55:2 The mandatory attribute 'data-account' is missing in tag 'amp-brightcove'. (see https://amp.dev/documentation/components/amp-brightcove/)
 |        layout="responsive" width="480" height="270">
 |    </amp-brightcove>
 |    <!-- Invalid: `dock` without `amp-video-docking` extension. -->
diff --git a/extensions/amp-brightcove/OWNERS b/extensions/amp-brightcove/OWNERS
index 49d57bc6f8d6b..c9a78e3ab2145 100644
--- a/extensions/amp-brightcove/OWNERS
+++ b/extensions/amp-brightcove/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'mister-ben'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'mister-ben'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-brightcove/amp-brightcove.md b/extensions/amp-brightcove/amp-brightcove.md
index 08adb4e083cef..e96e0d89c52dc 100644
--- a/extensions/amp-brightcove/amp-brightcove.md
+++ b/extensions/amp-brightcove/amp-brightcove.md
@@ -24,14 +24,12 @@ limitations under the License.
 
 # amp-brightcove
 
-An `amp-brightcove` component displays the Brightcove Player as used in Brightcove's [Video Cloud](https://www.brightcove.com/en/online-video-platform) or [Brightcove Player](https://www.brightcove.com/en/player).
+## Usage
 
-## Example
+An `amp-brightcove` component displays the Brightcove Player as used in Brightcove's [Video Cloud](https://www.brightcove.com/en/online-video-platform) or [Brightcove Player](https://www.brightcove.com/en/player).
 
 The `width` and `height` attributes determine the aspect ratio of the player embedded in responsive layouts.
 
-Example:
-
 ```html
 <amp-brightcove
   data-account="12345"
@@ -45,65 +43,88 @@ Example:
 </amp-brightcove>
 ```
 
-## Attributes
-
-<table>
-  <tr>
-    <td width="40%"><strong>data-account</strong></td>
-    <td>The Brightcove Video Cloud or Perform account id.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-player or data-player-id</strong></td>
-    <td>The Brightcove player id. This is a GUID, shortid or "default". The default value is "default".<br><code>data-player</code> is preferred. <code>data-player-id</code> is also supported for backwards-compatibility.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-embed</strong></td>
-    <td>The Brightcove player id. This is a GUID or "default". The default value and most common value is "default".</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-video-id</strong></td>
-    <td>The Video Cloud video id. Most Video Cloud players will need this.<br>This is not used for Perform players by default; use it if you have added a plugin that expects a <code>videoId</code> param in the query string.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-playlist-id</strong></td>
-    <td><p>The Video Cloud playlist id. For AMP HTML uses a video id will normally be used instead. If both a playlist and a video are specified, the playlist takes precedence.</p>
-<p>This is not used for Perform players by default; use it if you have added a plugin that expects a <code>playlistId</code> param in the query string.</p></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-referrer</strong></td>
-    <td>Sets the referrer to be used for the Video Cloud analytics within the player. Requires Brightcove Player version v6.25.0+. This supports AMP varables such as <code>EXTERNAL_REFERRER</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-param-*</strong></td>
-    <td>All <code>data-param-*</code> attributes will be added as query parameter to the player iframe src. This may be used to pass custom values through to player plugins, such as ad parameters or video ids for Perform players.
-<br>
-Keys and values will be URI encoded. Keys will be camel cased.</p>
-<ul>
-  <li>`data-param-language="de"` becomes `&language=de`</li>
-  <li>`data-param-custom-ad-data="key:value;key2:value2"` becomes `&customAdData=key%3Avalue%3Bkey2%3Avalue2`</li>
-</ul></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>autoplay</strong></td>
-    <td>If this attribute is present, and the browser supports autoplay, the video will be automatically
-played as soon as it becomes visible. There are some conditions that the component needs to meet
-to be played, <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-video-interface.md#autoplay">which are outlined in the Video in AMP spec</a>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>dock</strong></td>
-    <td><strong>Requires <code>amp-video-docking</code> extension.</strong> If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
-    For more details, see <a href="https://amp.dev/documentation/components/amp-video-docking">documentation on the docking extension itself.</a></td>
-  </tr>
-</table>
-
-## Player configuration
-
-To support AMP's video interface, which is recommended, make sure you configure players used with the AMP Support plugin. See [Brightcove's support documentation](https://support.brightcove.com/amp) for player configuration instructions.
+### Player Configuration
+
+Make sure you configure players used with the AMP Support plugin to support AMP's video interface. See [Brightcove's support documentation](https://support.brightcove.com/amp) for player configuration instructions.
+
+## Component Attributes
+
+### `data-account`
+
+The Brightcove Video Cloud or Perform account id.
+
+### `data-player` or `data-player-id`
+
+The Brightcove player id. This is a GUID, shortid or "default". The default
+value is "default".
+
+`data-player` is preferred. `data-player-id` is also supported for
+backwards-compatibility.
+
+### `data-embed`
+
+The Brightcove player id. This is a GUID or "default". The default value and
+most common value is "default".
+
+### `data-video-id`
+
+The Video Cloud video id. Most Video Cloud players will need this.
+
+This is not used for Perform players by default; use it if you have added a
+plugin that expects a `videoId` param in the query string.
+
+### `data-playlist-id`
+
+The Video Cloud playlist id. For AMP HTML uses a video id will normally be used
+instead. If both a playlist and a video are specified, the playlist takes
+precedence.
+
+This is not used for Perform players by default; use it if you have added a
+plugin that expects a `playlistId` param in the query string.
+
+### `data-referrer`
+
+Sets the referrer to be used for the Video Cloud analytics within the player.
+Requires Brightcove Player version v6.25.0+. This supports AMP variables such as
+`EXTERNAL_REFERRER`.
+
+### `data-param-*`
+
+All `data-param-*` attributes will be added as query parameters to the player
+iframe src. This may be used to pass custom values through to player plugins,
+such as ad parameters or video ids for Perform players.
+
+Keys and values will be URI encoded. Keys will be camel cased.
+
+-   `data-param-language="de"` becomes `&language=de`
+-   `data-param-custom-ad-data="key:value;key2:value2"` becomes
+    `&customAdData=key%3Avalue%3Bkey2%3Avalue2`
+
+### `autoplay`
+
+If this attribute is present, and the browser supports autoplay, the video will
+be automatically played as soon as it becomes visible. There are some conditions
+that the component needs to meet to be played, [which are outlined in the Video
+in AMP spec](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-video-interface.md#autoplay).
+
+### `dock`
+
+**Requires `amp-video-docking` extension.** If this attribute is present and the
+video is playing manually, the video will be "minimized" and fixed to a corner
+or an element when the user scrolls out of the video component's visual area.
+
+For more details, see
+[documentation on the docking extension itself](https://amp.dev/documentation/components/amp-video-docking).
+
+### `data-block-on-consent`
+
+If [amp-consent](https://amp.dev/documentation/components/amp-consent/) is used, adding `data-block-on-consent="_till_responded"` will delay player load until the consent state is resolved. The consent state is passed to the player's iframe as query parameters for customisation of advertising implementations in the player. See [Brightcove's support documentation](https://support.brightcove.com/amp) for player configuration instructions.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
 ## Validation
 
-See [amp-brightcove rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-brightcove/validator-amp-brightcove.protoascii) in the AMP validator specification.
+See [amp-brightcove rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-brightcove/validator-amp-brightcove.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-brightcove/validator-amp-brightcove.protoascii b/extensions/amp-brightcove/validator-amp-brightcove.protoascii
index c9079d25cd236..e38295a94a072 100644
--- a/extensions/amp-brightcove/validator-amp-brightcove.protoascii
+++ b/extensions/amp-brightcove/validator-amp-brightcove.protoascii
@@ -51,7 +51,7 @@ tags: {  # <amp-brightcove>
   attrs: { name: "[data-video-id]" }
   attrs: { name: "[data-referrer]" }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-brightcove"
+  spec_url: "https://amp.dev/documentation/components/amp-brightcove/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-byside-content/0.1/amp-byside-content.js b/extensions/amp-byside-content/0.1/amp-byside-content.js
index 7c1d00dfe3429..36ffa606acdb8 100644
--- a/extensions/amp-byside-content/0.1/amp-byside-content.js
+++ b/extensions/amp-byside-content/0.1/amp-byside-content.js
@@ -36,8 +36,8 @@ import {CSS} from '../../../build/amp-byside-content-0.1.css';
 import {Services} from '../../../src/services';
 import {addParamsToUrl, assertHttpsUrl} from '../../../src/url';
 import {createElementWithAttributes, removeElement} from '../../../src/dom';
-import {debounce} from '../../../src/utils/rate-limit';
-import {dict} from '../../../src/utils/object';
+import {debounce} from '../../../src/core/types/function';
+import {dict} from '../../../src/core/types/object';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {listenFor} from '../../../src/iframe-helper';
 import {setStyles} from '../../../src/style';
diff --git a/extensions/amp-byside-content/0.1/test/test-amp-byside-content.js b/extensions/amp-byside-content/0.1/test/test-amp-byside-content.js
index 50a4f47816797..b01761a8f0cb4 100644
--- a/extensions/amp-byside-content/0.1/test/test-amp-byside-content.js
+++ b/extensions/amp-byside-content/0.1/test/test-amp-byside-content.js
@@ -51,10 +51,11 @@ describes.realWin(
 
       doc.body.appendChild(elem);
       return elem
-        .build()
-        .then(() => {
+        .buildInternal()
+        .then(() => elem.getImpl())
+        .then((impl) => {
           urlMock.expandUrlAsync
-            .returns(Promise.resolve(elem.implementation_.baseUrl_))
+            .returns(Promise.resolve(impl.baseUrl_))
             .withArgs(env.sandbox.match.any);
           if (opt_beforeLayoutCallback) {
             opt_beforeLayoutCallback(elem);
@@ -65,23 +66,23 @@ describes.realWin(
         .then(() => elem);
     }
 
-    function testIframe(elem) {
+    function testIframe(elem, impl) {
       const iframe = elem.querySelector('iframe');
       expect(iframe).to.not.be.null;
       expect(iframe.getAttribute('frameborder')).to.equal('0');
       expect(iframe.className).to.match(/i-amphtml-fill-content/);
       expect(iframe.fakeSrc).to.satisfy((src) => {
-        return src.startsWith(elem.implementation_.baseUrl_);
+        return src.startsWith(impl.baseUrl_);
       });
     }
 
-    it('renders', () => {
-      return getElement({
+    it('renders', async () => {
+      const elem = await getElement({
         'data-webcare-id': 'D6604AE5D0',
         'data-label': 'amp-simple',
-      }).then((elem) => {
-        testIframe(elem);
       });
+      const impl = await elem.getImpl();
+      testIframe(elem, impl);
     });
 
     it('requires data-label', () => {
@@ -104,29 +105,25 @@ describes.realWin(
       });
     });
 
-    it('generates correct default origin', () => {
-      return getElement({
+    it('generates correct default origin', async () => {
+      const elem = await getElement({
         'data-webcare-id': 'D6604AE5D0',
         'data-label': 'placeholder-label',
-      }).then((elem) => {
-        expect(elem.implementation_.origin_).to.equal(
-          'https://webcare.byside.com'
-        );
       });
+      const impl = await elem.getImpl();
+      expect(impl.origin_).to.equal('https://webcare.byside.com');
     });
 
-    it('generates correct provided webcare zone', () => {
+    it('generates correct provided webcare zone', async () => {
       const webcareZone = 'sa1';
 
-      return getElement({
+      const elem = await getElement({
         'data-webcare-id': 'D6604AE5D0',
         'data-label': 'placeholder-label',
         'data-webcare-zone': webcareZone,
-      }).then((elem) => {
-        expect(elem.implementation_.origin_).to.equal(
-          'https://' + webcareZone + '.byside.com'
-        );
       });
+      const impl = await elem.getImpl();
+      expect(impl.origin_).to.equal('https://' + webcareZone + '.byside.com');
     });
 
     it('should create a loading animation', () => {
@@ -141,33 +138,31 @@ describes.realWin(
       });
     });
 
-    it('builds a placeholder loading animation without inserting iframe', () => {
+    it('builds a placeholder loading animation without inserting iframe', async () => {
       const attributes = {
         'data-webcare-id': 'D6604AE5D0',
         'data-label': 'placeholder-label',
       };
 
-      return getElement(attributes, true, (elem) => {
+      const elem = await getElement(attributes, true, (elem) => {
         const placeholder = elem.querySelector('[placeholder]');
         const iframe = elem.querySelector('iframe');
         expect(iframe).to.be.null;
         expect(placeholder).to.not.have.display('none');
-      }).then((elem) => {
-        const placeholder = elem.querySelector('[placeholder]');
-        elem.getVsync = () => {
-          return {
-            mutate: (fn) => fn(),
-          };
+      });
+      const impl = await elem.getImpl();
+
+      elem.getVsync = () => {
+        return {
+          mutate: (fn) => fn(),
         };
+      };
 
-        // test iframe
-        testIframe(elem);
+      // test iframe
+      testIframe(elem, impl);
 
-        // test placeholder too
-        elem.implementation_.iframePromise_.then(() => {
-          expect(placeholder).to.have.display('none');
-        });
-      });
+      // test placeholder too
+      await impl.iframePromise_;
     });
 
     it('passes down sandbox attribute to iframe', () => {
diff --git a/extensions/amp-byside-content/OWNERS b/extensions/amp-byside-content/OWNERS
index 71c56a760bf38..ad903f3c08a31 100644
--- a/extensions/amp-byside-content/OWNERS
+++ b/extensions/amp-byside-content/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-byside-content/amp-byside-content.md b/extensions/amp-byside-content/amp-byside-content.md
index b2631abf72c1c..06c70dbcc0b83 100644
--- a/extensions/amp-byside-content/amp-byside-content.md
+++ b/extensions/amp-byside-content/amp-byside-content.md
@@ -24,9 +24,9 @@ limitations under the License.
 
 # amp-byside-content
 
-Displays dynamic content from the [BySide service](http://www.byside.com/).
+## Usage
 
-## Behavior
+Displays dynamic content from the [BySide service](http://www.byside.com/).
 
 The `amp-byside-content` component is available for BySide customers and
 displays dynamic content that can be retrieved from the [BySide](http://www.byside.com/) customization mechanisms.
@@ -39,6 +39,7 @@ The `width` and `height` attributes determine the aspect ratio of the embedded B
 <amp-byside-content
   data-webcare-id="D6604AE5D0"
   data-label="amp-responsive"
+  data-webcare-zone="we2"
   data-lang="en"
   width="1024"
   height="500"
@@ -47,42 +48,48 @@ The `width` and `height` attributes determine the aspect ratio of the embedded B
 </amp-byside-content>
 ```
 
+### Privacy and cookies policy
+
+[BySide](http://www.byside.com) is committed to respect and protect your privacy and developing technology that gives you the most powerful and safe online experience. BySide privacy statement and cookies policy can be found on the following url's:
+
+-   [http://www.byside.com/privacy.html](http://www.byside.com/privacy.html)
+-   [http://www.byside.com/cookies.html](http://www.byside.com/cookies.html)
+
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-webcare-id (required)</strong></td>
-    <td>The BySide customer account ID.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-label (required)</strong></td>
-    <td>The content label as seen in your BySide account.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-lang</strong></td>
-    <td>The language to show the contents in, as specified in the BySide customer account localization. Defaults to Portuguese ("pt").</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-channel</strong></td>
-    <td>The channel identifier to use for content validation. Defaults to an empty string.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-fid</strong></td>
-    <td>The visitor force id. Use this when a unique visitor identifier is available, usually for authenticated users. Defaults to an empty string.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
-
-## Privacy and cookies policy
+### `data-webcare-id`
 
-[BySide](http://www.byside.com) is committed to respect and protect your privacy and developing technology that gives you the most powerful and safe online experience. BySide privacy statement and cookies policy can be found on the following url's:
+The BySide customer account ID.
+
+### `data-label`
+
+The content label as seen in your BySide account.
+
+### `data-webcare-zone`
+
+The webcare zone property, as specified in the BySide customer account
+geographic zone. Defaults to main zone ("we1").
+
+### `data-lang`
+
+The language to show the contents in, as specified in the BySide customer
+account localization. Defaults to Portuguese ("pt").
+
+### `data-channel`
+
+The channel identifier to use for content validation. Defaults to an empty
+string.
+
+### `data-fid`
+
+The visitor force id. Use this when a unique visitor identifier is available,
+usually for authenticated users. Defaults to an empty string.
+
+### Common attributes
 
-- [http://www.byside.com/privacy.html](http://www.byside.com/privacy.html)
-- [http://www.byside.com/cookies.html](http://www.byside.com/cookies.html)
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
 ## Validation
 
-See [amp-byside-content rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-byside-content/validator-amp-byside-content.protoascii) in the AMP validator specification.
+See [amp-byside-content rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-byside-content/validator-amp-byside-content.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-cache-url/0.1/amp-cache-url.js b/extensions/amp-cache-url/0.1/amp-cache-url.js
new file mode 100644
index 0000000000000..53f534651f169
--- /dev/null
+++ b/extensions/amp-cache-url/0.1/amp-cache-url.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as ampToolboxCacheUrl from '@ampproject/toolbox-cache-url';
+import {urls} from '../../../src/config';
+
+export class AmpCacheUrlService {
+  /**
+   * Create cache url service
+   */
+  constructor() {}
+
+  /**
+   *
+   * @param {string} url
+   * @param {string=} cacheDomain the cache domain name (eg: cdn.approject.org)
+   * @return {!Promise<string>}
+   */
+  createCacheUrl(url, cacheDomain = urls.cdn) {
+    return ampToolboxCacheUrl.createCacheUrl(
+      cacheDomain.replace(/https?:\/\//, ''),
+      url
+    );
+  }
+}
+
+AMP.extension('amp-cache-url', '0.1', (AMP) => {
+  AMP.registerServiceForDoc('cache-url', AmpCacheUrlService);
+});
diff --git a/extensions/amp-cache-url/0.1/test/test-amp-cache-url.js b/extensions/amp-cache-url/0.1/test/test-amp-cache-url.js
new file mode 100644
index 0000000000000..5a6c4a8c39363
--- /dev/null
+++ b/extensions/amp-cache-url/0.1/test/test-amp-cache-url.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {AmpCacheUrlService} from '../amp-cache-url';
+
+describes.fakeWin(
+  'amp-cache-url',
+  {amp: {extensions: ['amp-cache-url']}},
+  () => {
+    it('should return a cached url', async () => {
+      const cacheUrlService = new AmpCacheUrlService();
+      const result = await cacheUrlService.createCacheUrl(
+        'https://amp.dev/stories'
+      );
+      expect(result).to.equal(
+        'https://amp-dev.cdn.ampproject.org/c/s/amp.dev/stories'
+      );
+    });
+
+    it('should not throw with empty url', async () => {
+      const cacheUrlService = new AmpCacheUrlService();
+      expect(cacheUrlService.createCacheUrl('')).to.not.be.rejected;
+    });
+
+    it('should not throw with invalid url', async () => {
+      const cacheUrlService = new AmpCacheUrlService();
+      expect(cacheUrlService.createCacheUrl('invalid url')).to.not.be.rejected;
+    });
+  }
+);
diff --git a/extensions/amp-cache-url/OWNERS b/extensions/amp-cache-url/OWNERS
new file mode 100644
index 0000000000000..532da73792258
--- /dev/null
+++ b/extensions/amp-cache-url/OWNERS
@@ -0,0 +1,20 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {
+          name: 'gmajoulet',
+          notify: true,
+        },
+        {
+          name: 'mszylkowski',
+          notify: true,
+        },
+        {name: 'newmuis'},
+      ],
+    },
+  ],
+}
diff --git a/extensions/amp-cache-url/README.md b/extensions/amp-cache-url/README.md
new file mode 100644
index 0000000000000..6dd8137a2f0db
--- /dev/null
+++ b/extensions/amp-cache-url/README.md
@@ -0,0 +1,3 @@
+# Cache URL service
+
+This extension installs a service to convert URLs to cache URLs using the [AMP Toolbox Cache URL](https://github.com/ampproject/amp-toolbox/tree/main/packages/cache-url).
diff --git a/extensions/amp-cache-url/validator-amp-cache-url.protoascii b/extensions/amp-cache-url/validator-amp-cache-url.protoascii
new file mode 100644
index 0000000000000..2ac897267e78c
--- /dev/null
+++ b/extensions/amp-cache-url/validator-amp-cache-url.protoascii
@@ -0,0 +1,25 @@
+#
+# Copyright 2021 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.
+#
+
+tags: {  # amp-cache-url
+  html_format: AMP
+  tag_name: "SCRIPT"
+  extension_spec: {
+    name: "amp-cache-url"
+    version: "0.1"
+  }
+  attr_lists: "common-extension-attrs"
+}
diff --git a/extensions/amp-call-tracking/0.1/test/test-amp-call-tracking.js b/extensions/amp-call-tracking/0.1/test/test-amp-call-tracking.js
index 5d6af5d93c6a1..45d9cf824ed1b 100644
--- a/extensions/amp-call-tracking/0.1/test/test-amp-call-tracking.js
+++ b/extensions/amp-call-tracking/0.1/test/test-amp-call-tracking.js
@@ -53,7 +53,7 @@ describes.realWin(
 
       doc.body.appendChild(callTrackingEl);
       return callTrackingEl
-        .build()
+        .buildInternal()
         .then(() => {
           return callTrackingEl.layoutCallback();
         })
diff --git a/extensions/amp-call-tracking/0.1/test/validator-amp-call-tracking.out b/extensions/amp-call-tracking/0.1/test/validator-amp-call-tracking.out
index 410c62d18c443..28bdaaf8a1f3c 100644
--- a/extensions/amp-call-tracking/0.1/test/validator-amp-call-tracking.out
+++ b/extensions/amp-call-tracking/0.1/test/validator-amp-call-tracking.out
@@ -37,13 +37,13 @@ FAIL
 |    <!-- Invalid: no <A> tag -->
 |    <amp-call-tracking config="https://example.com/calltracking.json">
 >>   ^~~~~~~~~
-amp-call-tracking/0.1/test/validator-amp-call-tracking.html:37:2 Tag 'amp-call-tracking' must have 1 child tags - saw 0 child tags. (see https://amp.dev/documentation/components/amp-call-tracking)
+amp-call-tracking/0.1/test/validator-amp-call-tracking.html:37:2 Tag 'amp-call-tracking' must have 1 child tags - saw 0 child tags. (see https://amp.dev/documentation/components/amp-call-tracking/)
 |    </amp-call-tracking>
 |
 |    <!-- Invalid: more than one <A> tag -->
 |    <amp-call-tracking config="https://example.com/calltracking.json">
 >>   ^~~~~~~~~
-amp-call-tracking/0.1/test/validator-amp-call-tracking.html:41:2 Tag 'amp-call-tracking' must have 1 child tags - saw 2 child tags. (see https://amp.dev/documentation/components/amp-call-tracking)
+amp-call-tracking/0.1/test/validator-amp-call-tracking.html:41:2 Tag 'amp-call-tracking' must have 1 child tags - saw 2 child tags. (see https://amp.dev/documentation/components/amp-call-tracking/)
 |      <a href="tel:12345678">+1 (23) 45-678</a>
 |      <a href="tel:98765432">(987) 654-321</a>
 |    </amp-call-tracking>
@@ -51,7 +51,7 @@ amp-call-tracking/0.1/test/validator-amp-call-tracking.html:41:2 Tag 'amp-call-t
 |    <!-- Invalid: no "config" attribute -->
 |    <amp-call-tracking>
 >>   ^~~~~~~~~
-amp-call-tracking/0.1/test/validator-amp-call-tracking.html:47:2 The mandatory attribute 'config' is missing in tag 'amp-call-tracking'. (see https://amp.dev/documentation/components/amp-call-tracking)
+amp-call-tracking/0.1/test/validator-amp-call-tracking.html:47:2 The mandatory attribute 'config' is missing in tag 'amp-call-tracking'. (see https://amp.dev/documentation/components/amp-call-tracking/)
 |      <a href="tel:12345678">+1 (23) 45-678</a>
 |    </amp-call-tracking>
 |
@@ -59,7 +59,7 @@ amp-call-tracking/0.1/test/validator-amp-call-tracking.html:47:2 The mandatory a
 |    <amp-call-tracking config="https://example.com/calltracking.json">
 |      <div></div>
 >>     ^~~~~~~~~
-amp-call-tracking/0.1/test/validator-amp-call-tracking.html:53:4 Tag 'div' is disallowed as child of tag 'amp-call-tracking'. Child tag must be one of ['a']. (see https://amp.dev/documentation/components/amp-call-tracking)
+amp-call-tracking/0.1/test/validator-amp-call-tracking.html:53:4 Tag 'div' is disallowed as child of tag 'amp-call-tracking'. Child tag must be one of ['a']. (see https://amp.dev/documentation/components/amp-call-tracking/)
 |    </amp-call-tracking>
 |  </body>
 |  </html>
diff --git a/extensions/amp-call-tracking/OWNERS b/extensions/amp-call-tracking/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-call-tracking/OWNERS
+++ b/extensions/amp-call-tracking/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-call-tracking/amp-call-tracking.md b/extensions/amp-call-tracking/amp-call-tracking.md
index 3709e505f2656..6ca90b002b715 100644
--- a/extensions/amp-call-tracking/amp-call-tracking.md
+++ b/extensions/amp-call-tracking/amp-call-tracking.md
@@ -24,49 +24,43 @@ limitations under the License.
 
 # amp-call-tracking
 
+## Usage
+
 Dynamically replaces a phone number in a hyperlink to enable call
 tracking. Executes a CORS request to substitute the number.
 
-## Usage
-
 The `<amp-call-tracking>` tag must wrap a normal anchor tag that hyperlinks a
 phone number. This phone number will be replaced with the values provided
 by a CORS endpoint.
 
-**Example**
-
 ```html
 <amp-call-tracking config="https://example.com/calltracking.json">
   <a href="tel:123456789">+1 (23) 456-789</a>
 </amp-call-tracking>
 ```
 
-{% call callout('Note', type='note') %}
 Each unique CORS endpoint is called only once per page.
-{% endcall %}
+
+### Related documentation
+
+-   [Design doc](https://docs.google.com/document/d/1UDMYv0f2R9CvMUSBQhxjtkSnC4984t9dJeqwm_8WiAM/edit#heading=h.zha4avn54it8)
+-   [PR](https://github.com/ampproject/amphtml/pull/7493)
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>config (required)</strong></td>
-    <td><p>Defines a CORS URL. The URL's protocol must be HTTPS. The response must consist
-  of a valid JSON object with the following fields:</p>
-<ul>
-  <li>`phoneNumber` (required): Specifies the phone number to call when the user clicks the link.</li>
-  <li>`formattedPhoneNumber` (optional): Specifies the phone number to display. If not specified, the value in `phoneNumber` is used.</li>
-</ul>
-<p>{% call callout('Important', type='caution') %}
-  Your XHR endpoint must implement the requirements specified in the <a href="https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests">CORS Requests in AMP</a> spec.
-  {% endcall %}</p></td>
-  </tr>
-</table>
+### `config` (required)
 
-## Validation
+Defines a CORS URL. The URL's protocol must be HTTPS. The response must consist
+of a valid JSON object with the following fields:
+
+-   `phoneNumber` (required): Specifies the phone number to call when the user
+    clicks the link.
 
-See [amp-call-tracking rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-call-tracking/validator-amp-call-tracking.protoascii) in the AMP validator specification.
+-   `formattedPhoneNumber` (optional): Specifies the phone number to display. If
+    not specified, the value in `phoneNumber` is used.
 
-## See also
+Your XHR endpoint must implement the requirements specified in the [CORS Requests in AMP](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests).
+
+## Validation
 
-- [Design doc](https://docs.google.com/document/d/1UDMYv0f2R9CvMUSBQhxjtkSnC4984t9dJeqwm_8WiAM/edit#heading=h.zha4avn54it8)
-- [PR](https://github.com/ampproject/amphtml/pull/7493)
+See [amp-call-tracking rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-call-tracking/validator-amp-call-tracking.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-call-tracking/validator-amp-call-tracking.protoascii b/extensions/amp-call-tracking/validator-amp-call-tracking.protoascii
index 55488b5746d53..128183afefcd5 100644
--- a/extensions/amp-call-tracking/validator-amp-call-tracking.protoascii
+++ b/extensions/amp-call-tracking/validator-amp-call-tracking.protoascii
@@ -43,7 +43,7 @@ tags: {  # <amp-call-tracking>
     mandatory_num_child_tags: 1
     child_tag_name_oneof: "A"
   }
-  spec_url: "https://amp.dev/documentation/components/amp-call-tracking"
+  spec_url: "https://amp.dev/documentation/components/amp-call-tracking/"
   amp_layout: {
     supported_layouts: CONTAINER
     supported_layouts: FILL
diff --git a/extensions/amp-carousel/0.1/amp-carousel.css b/extensions/amp-carousel/0.1/amp-carousel.css
index 0a0643642146b..f9a027314851e 100644
--- a/extensions/amp-carousel/0.1/amp-carousel.css
+++ b/extensions/amp-carousel/0.1/amp-carousel.css
@@ -47,6 +47,11 @@ amp-carousel {
   z-index: 10;
 }
 
+.amp-carousel-button:focus {
+  border: 1px black solid;
+  outline: 1px white solid;
+}
+
 amp-carousel[controls] .amp-carousel-button,
 amp-carousel.i-amphtml-carousel-has-controls .amp-carousel-button,
 .amp-mode-mouse .amp-carousel-button {
@@ -87,8 +92,13 @@ amp-carousel.i-amphtml-carousel-has-controls .amp-carousel-button,
 
 amp-carousel .amp-carousel-button.amp-disabled {
   animation: none;
-  opacity: 0;
-  visibility: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 
 amp-carousel[i-amphtml-carousel-hide-buttons] .amp-carousel-button-prev,
diff --git a/extensions/amp-carousel/0.1/amp-carousel.md b/extensions/amp-carousel/0.1/amp-carousel.md
index 497d7058e0c77..514a9aa159faf 100644
--- a/extensions/amp-carousel/0.1/amp-carousel.md
+++ b/extensions/amp-carousel/0.1/amp-carousel.md
@@ -39,7 +39,14 @@ The carousel advances between items if the user swipes or clicks an optional nav
 [example preview="inline" playground="true" imports="amp-carousel"]
 
 ```html
-<amp-carousel width="450" height="300" layout="responsive" type="slides">
+<amp-carousel
+  width="450"
+  height="300"
+  layout="responsive"
+  type="slides"
+  role="region"
+  aria-label="Basic carousel"
+>
   <amp-img
     src="{{server_for_email}}/static/inline-examples/images/image1.jpg"
     width="450"
@@ -75,6 +82,8 @@ In the following example, we have a carousel of three images with preview button
   height="300"
   layout="responsive"
   type="slides"
+  role="region"
+  aria-label="Carousel with slide previews"
 >
   <amp-img
     src="{{server_for_email}}/static/inline-examples/images/image1.jpg"
@@ -128,6 +137,14 @@ In the following example, we have a carousel of three images with preview button
 
 [/example]
 
+### Accessibility considerations for `amp-carousel`
+
+Autoplaying, and particularly infinitely looping, carousels can be very distracting and confusing for users - especially for users with cognitive impairments. In general, we recommend avoiding autoplaying carousels. While autoplaying carousels stop once the user has interacted with the carousel, consider also adding an explicit "Play/Pause" control.
+
+By default, the `<amp-carousel>` is programmatically identified as a list when rendered (using `role="list"` on the container element, and `role="listitem"` on each item). However, for `<amp-carousel type="slides">`, no specific `role` is currently provided. As a result, it will not be obvious for assistive technology users reading/navigating through a page when they reach a carousel. We recommend including an explicit `role="region"` and a descriptive `aria-label` (either a generic `aria-label="Carousel"` or a more descriptive label such as `aria-label="Latest news items"`) to `<amp-carousel>`.
+
+Currently, an `<amp-carousel type="slides">` carousel is declared as an ARIA live region (using `aria-live="polite"`), meaning that every time a new slide is shown, the entire content of the slide is announced by assistive technologies (such as screen readers). Due to the way carousels are initially rendered, this can also result in the carousel's content being announced in its entirety when a page is loaded. This also means that pages that contain an `autoplay` carousel will continuously announce whenever a slide auto-advances. There is currently no work-around for this issue.
+
 ## Attributes
 
 <table>
@@ -179,7 +196,7 @@ The visibility of arrows can also be controlled via styling, and a media query c
   </tr>
   <tr>
     <td width="40%"><strong>delay (optional)</strong></td>
-    <td>Specifies the duration (in milliseconds) to delay advancing to the next slide when <code>autoplay</code> is enabled. The <code>delay</code> attribute is only applicable to carousels with <code>type=slides</code>.</td>
+    <td>Specifies the duration (in milliseconds) to delay advancing to the next slide when <code>autoplay</code> is enabled.  Note that the minimum allowed value for <code>delay</code> is 1000 milliseconds.The <code>delay</code> attribute is only applicable to carousels with <code>type=slides</code>.</td>
   </tr>
   <tr>
     <td width="40%"><strong>loop (optional)</strong></td>
@@ -197,7 +214,9 @@ The visibility of arrows can also be controlled via styling, and a media query c
   {% if not format=='email'%}  autoplay
   delay="3000"{% endif %}
   data-next-button-aria-label="Go to next slide"
-  data-previous-button-aria-label="Go to previous slide">
+  data-previous-button-aria-label="Go to previous slide"
+  role="region"
+  aria-label="Looping carousel">
   <amp-img src="{{server_for_email}}/static/inline-examples/images/image1.jpg"
     width="450"
     height="300"></amp-img>
@@ -221,10 +240,10 @@ The visibility of arrows can also be controlled via styling, and a media query c
 
 ## Styling
 
-- You may use the `amp-carousel` element selector to style it freely.
-- You may use the `.amp-carousel-slide` class selector to target carousel items.
-- The visual state of an `amp-carousel` button when it's disabled is hidden.
-- By default, `.amp-carousel-button` uses an inlined SVG as the background-image of the buttons. You may override this with your own SVG or image as in the example below.
+-   You may use the `amp-carousel` element selector to style it freely.
+-   You may use the `.amp-carousel-slide` class selector to target carousel items.
+-   The visual state of an `amp-carousel` button when it's disabled is hidden.
+-   By default, `.amp-carousel-button` uses an inlined SVG as the background-image of the buttons. You may override this with your own SVG or image as in the example below.
 
 _Example: Default `.amp-carousel-button` inlined SVG_
 
@@ -250,10 +269,10 @@ Note that the SVG content needs to have certain characters, including `<`, `>` a
 
 As noted above, the `type="slides"` designation on `amp-carousel 0.1` supports the following layouts: `fill`, `fixed`, `fixed-height`, `flex-item`, `nodisplay`, and `responsive`.
 
-Publishers should be aware that while this mode explictly supports `fixed` layout sizes, it also employs `display: flex;` in its styling. In other words nested elements can have `layout=fixed` sizing, though via styling it only respects absolute width up to 100%. One way to workaround this limitation is by using `flex-shrink: 0` on any fixed layout slides.
+Publishers should be aware that while this mode explicitly supports `fixed` layout sizes, it also employs `display: flex;` in its styling. In other words nested elements can have `layout=fixed` sizing, though via styling it only respects absolute width up to 100%. One way to workaround this limitation is by using `flex-shrink: 0` on any fixed layout slides.
 
 For an accessible and smooth user experience, it is generally good practice when using `type="slides"` that all children of that carousel and the carousel itself share the same dimensional ratios as well as the same layout type.
 
 ## Validation
 
-See [amp-carousel rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/validator-amp-carousel.protoascii) in the AMP validator specification.
+See [amp-carousel rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-carousel/validator-amp-carousel.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-carousel/0.1/base-carousel.js b/extensions/amp-carousel/0.1/base-carousel.js
index 61df9cb35c6b6..9b17054ef64fa 100644
--- a/extensions/amp-carousel/0.1/base-carousel.js
+++ b/extensions/amp-carousel/0.1/base-carousel.js
@@ -13,15 +13,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Services} from '../../../src/services';
 import {isAmp4Email} from '../../../src/format';
+import {
+  observeWithSharedInOb,
+  unobserveWithSharedInOb,
+} from '../../../src/viewport-observer';
 import {toggleAttribute} from '../../../src/dom';
 
+const _CONTROL_HIDE_ATTRIBUTE = 'i-amphtml-carousel-hide-buttons';
+const _HAS_CONTROL_CLASS = 'i-amphtml-carousel-has-controls';
 /**
  * @abstract
  */
 export class BaseCarousel extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -40,34 +51,42 @@ export class BaseCarousel extends AMP.BaseElement {
   buildCallback() {
     const input = Services.inputFor(this.win);
     const doc = /** @type {!Document} */ (this.element.ownerDocument);
-    this.showControls_ =
-      isAmp4Email(doc) ||
-      input.isMouseDetected() ||
-      this.element.hasAttribute('controls');
 
-    if (this.showControls_) {
-      this.element.classList.add('i-amphtml-carousel-has-controls');
+    if (isAmp4Email(doc) || this.element.hasAttribute('controls')) {
+      this.showControls_ = true;
+      this.element.classList.add(_HAS_CONTROL_CLASS);
+    } else {
+      input.onMouseDetected((mouseDetected) => {
+        if (mouseDetected) {
+          this.showControls_ = true;
+          toggleAttribute(
+            this.element,
+            _CONTROL_HIDE_ATTRIBUTE,
+            !this.showControls_
+          );
+          this.element.classList.add(_HAS_CONTROL_CLASS);
+        }
+      }, true);
     }
+
     this.buildCarousel();
     this.buildButtons();
     this.setupGestures();
     this.setControlsState();
   }
 
-  /** @override */
-  viewportCallback(inViewport) {
-    this.onViewportCallback(inViewport);
-    if (inViewport) {
-      this.hintControls();
-    }
-  }
+  // TODO(samouri): rename to viewportCallback once
+  // BaseElement.viewportCallback is deleted
 
   /**
-   * Handles element specific viewport based events.
-   * @param {boolean} unusedInViewport
+   * @param {boolean} inViewport
    * @protected
    */
-  onViewportCallback(unusedInViewport) {}
+  viewportCallbackTemp(inViewport) {
+    if (inViewport) {
+      this.hintControls();
+    }
+  }
 
   /**
    * Builds a carousel button for next/prev.
@@ -121,11 +140,6 @@ export class BaseCarousel extends AMP.BaseElement {
     this.element.appendChild(this.nextButton_);
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   isRelayoutNeeded() {
     return true;
@@ -175,13 +189,15 @@ export class BaseCarousel extends AMP.BaseElement {
     this.prevButton_.setAttribute('aria-disabled', !this.hasPrev());
     this.nextButton_.classList.toggle('amp-disabled', !this.hasNext());
     this.nextButton_.setAttribute('aria-disabled', !this.hasNext());
+    this.prevButton_.tabIndex = this.hasPrev() ? 0 : -1;
+    this.nextButton_.tabIndex = this.hasNext() ? 0 : -1;
   }
 
   /**
    * Shows the controls and then fades them away.
    */
   hintControls() {
-    if (this.showControls_ || !this.isInViewport()) {
+    if (this.showControls_) {
       return;
     }
     this.getVsync().mutate(() => {
@@ -231,8 +247,16 @@ export class BaseCarousel extends AMP.BaseElement {
     );
   }
 
+  /** @override */
+  layoutCallback() {
+    observeWithSharedInOb(this.element, (inViewport) =>
+      this.viewportCallbackTemp(inViewport)
+    );
+    return Promise.resolve();
+  }
   /** @override */
   unlayoutCallback() {
+    unobserveWithSharedInOb(this.element);
     return true;
   }
 
diff --git a/extensions/amp-carousel/0.1/base-slides.js b/extensions/amp-carousel/0.1/base-slides.js
index 30f0c86e3a9dc..e91b460fe4a04 100644
--- a/extensions/amp-carousel/0.1/base-slides.js
+++ b/extensions/amp-carousel/0.1/base-slides.js
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {BaseCarousel} from './base-carousel';
 import {Services} from '../../../src/services';
-import {isFiniteNumber} from '../../../src/types';
+import {isFiniteNumber} from '../../../src/core/types';
 import {userAssert} from '../../../src/log';
 
 export class BaseSlides extends BaseCarousel {
@@ -95,8 +95,8 @@ export class BaseSlides extends BaseCarousel {
   }
 
   /** @override */
-  onViewportCallback(inViewport) {
-    this.updateViewportState(inViewport);
+  viewportCallbackTemp(inViewport) {
+    super.viewportCallbackTemp(inViewport);
     if (inViewport) {
       this.autoplay_();
     } else {
@@ -126,13 +126,6 @@ export class BaseSlides extends BaseCarousel {
     // Subclasses may override.
   }
 
-  /**
-   * Updates the viewport state when there is a viewport callback.
-   * @param {boolean} unusedInViewport
-   * @protected
-   */
-  updateViewportState(unusedInViewport) {}
-
   /**
    * Checks if a carousel is eligible to loop, regardless of the loop attribute.
    * @return {boolean}
@@ -175,12 +168,17 @@ export class BaseSlides extends BaseCarousel {
       return;
     }
     this.clearAutoplay();
-    this.autoplayTimeoutId_ = /** @type {number} */ (Services.timerFor(
-      this.win
-    ).delay(
-      this.go.bind(this, /* dir */ 1, /* animate */ true, /* autoplay */ true),
-      this.autoplayDelay_
-    ));
+    this.autoplayTimeoutId_ = /** @type {number} */ (
+      Services.timerFor(this.win).delay(
+        this.go.bind(
+          this,
+          /* dir */ 1,
+          /* animate */ true,
+          /* autoplay */ true
+        ),
+        this.autoplayDelay_
+      )
+    );
   }
 
   /**
diff --git a/extensions/amp-carousel/0.1/scrollable-carousel.js b/extensions/amp-carousel/0.1/scrollable-carousel.js
index a57aab01699a3..7b0fcc2289e6d 100644
--- a/extensions/amp-carousel/0.1/scrollable-carousel.js
+++ b/extensions/amp-carousel/0.1/scrollable-carousel.js
@@ -14,15 +14,19 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {Animation} from '../../../src/animation';
 import {BaseCarousel} from './base-carousel';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Services} from '../../../src/services';
 import {dev} from '../../../src/log';
 import {isLayoutSizeFixed} from '../../../src/layout';
 import {listen} from '../../../src/event-helper';
 import {numeric} from '../../../src/transition';
+import {
+  observeWithSharedInOb,
+  unobserveWithSharedInOb,
+} from '../../../src/viewport-observer';
 
 /** @const {string} */
 const TAG = 'amp-scrollable-carousel';
@@ -111,6 +115,10 @@ export class AmpScrollableCarousel extends BaseCarousel {
 
   /** @override */
   layoutCallback() {
+    observeWithSharedInOb(this.element, (inViewport) =>
+      this.viewportCallbackTemp(inViewport)
+    );
+
     this.doLayout_(this.pos_);
     this.preloadNext_(this.pos_, 1);
     this.setControlsState();
@@ -118,7 +126,14 @@ export class AmpScrollableCarousel extends BaseCarousel {
   }
 
   /** @override */
-  onViewportCallback(unusedInViewport) {
+  unlayoutCallback() {
+    unobserveWithSharedInOb(this.element);
+    return super.unlayoutCallback();
+  }
+
+  /** @override */
+  viewportCallbackTemp(inViewport) {
+    super.viewportCallbackTemp(inViewport);
     this.updateInViewport_(this.pos_, this.pos_);
   }
 
@@ -240,29 +255,29 @@ export class AmpScrollableCarousel extends BaseCarousel {
    * @private
    */
   waitForScroll_(startingScrollLeft) {
-    this.scrollTimerId_ = /** @type {number} */ (Services.timerFor(
-      this.win
-    ).delay(() => {
-      // TODO(yuxichen): test out the threshold for identifying fast scrolling
-      if (Math.abs(startingScrollLeft - this.pos_) < 30) {
-        dev().fine(
-          TAG,
-          'slow scrolling: %s - %s',
-          startingScrollLeft,
-          this.pos_
-        );
-        this.scrollTimerId_ = null;
-        this.commitSwitch_(this.pos_);
-      } else {
-        dev().fine(
-          TAG,
-          'fast scrolling: %s - %s',
-          startingScrollLeft,
-          this.pos_
-        );
-        this.waitForScroll_(this.pos_);
-      }
-    }, 100));
+    this.scrollTimerId_ = /** @type {number} */ (
+      Services.timerFor(this.win).delay(() => {
+        // TODO(yuxichen): test out the threshold for identifying fast scrolling
+        if (Math.abs(startingScrollLeft - this.pos_) < 30) {
+          dev().fine(
+            TAG,
+            'slow scrolling: %s - %s',
+            startingScrollLeft,
+            this.pos_
+          );
+          this.scrollTimerId_ = null;
+          this.commitSwitch_(this.pos_);
+        } else {
+          dev().fine(
+            TAG,
+            'fast scrolling: %s - %s',
+            startingScrollLeft,
+            this.pos_
+          );
+          this.waitForScroll_(this.pos_);
+        }
+      }, 100)
+    );
   }
 
   /**
@@ -306,7 +321,7 @@ export class AmpScrollableCarousel extends BaseCarousel {
    * @private
    */
   withinWindow_(pos, callback) {
-    const containerWidth = this.element.getLayoutWidth();
+    const containerWidth = this.element./*OK*/ offsetWidth;
     for (let i = 0; i < this.cells_.length; i++) {
       const cell = this.cells_[i];
       if (
@@ -351,17 +366,11 @@ export class AmpScrollableCarousel extends BaseCarousel {
     const seen = [];
     this.withinWindow_(newPos, (cell) => {
       seen.push(cell);
-      Services.ownersForDoc(this.element).updateInViewport(
-        this.element,
-        cell,
-        true
-      );
     });
     if (oldPos != newPos) {
       this.withinWindow_(oldPos, (cell) => {
         if (!seen.includes(cell)) {
           const owners = Services.ownersForDoc(this.element);
-          owners.updateInViewport(this.element, cell, false);
           owners.schedulePause(this.element, cell);
         }
       });
@@ -375,7 +384,7 @@ export class AmpScrollableCarousel extends BaseCarousel {
 
   /** @override */
   hasNext() {
-    const containerWidth = this.element.getLayoutWidth();
+    const containerWidth = this.element./*OK*/ offsetWidth;
     const scrollWidth = this.container_./*OK*/ scrollWidth;
     const maxPos = Math.max(scrollWidth - containerWidth, 0);
     return this.pos_ != maxPos;
diff --git a/extensions/amp-carousel/0.1/slidescroll.js b/extensions/amp-carousel/0.1/slidescroll.js
index 0c6a1c9ec3c16..b255c5475ff4e 100644
--- a/extensions/amp-carousel/0.1/slidescroll.js
+++ b/extensions/amp-carousel/0.1/slidescroll.js
@@ -14,22 +14,32 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {Animation} from '../../../src/animation';
 import {BaseSlides} from './base-slides';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Services} from '../../../src/services';
-import {bezierCurve} from '../../../src/curve';
-import {closestAncestorElementBySelector} from '../../../src/dom';
+import {bezierCurve} from '../../../src/core/data-structures/curve';
+import {
+  closestAncestorElementBySelector,
+  dispatchCustomEvent,
+} from '../../../src/dom';
 import {createCustomEvent, listen} from '../../../src/event-helper';
 import {dev, user} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getStyle, setStyle} from '../../../src/style';
 import {isExperimentOn} from '../../../src/experiments';
-import {isFiniteNumber} from '../../../src/types';
+import {isFiniteNumber} from '../../../src/core/types';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {numeric} from '../../../src/transition';
-import {startsWith} from '../../../src/string';
+import {
+  observeContentSize,
+  unobserveContentSize,
+} from '../../../src/utils/size-observer';
+import {
+  observeWithSharedInOb,
+  unobserveWithSharedInOb,
+} from '../../../src/viewport-observer';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
 
 /** @const {string} */
@@ -118,6 +128,9 @@ export class AmpSlideScroll extends BaseSlides {
     /** @private @const {boolean} */
     this.isIos_ = platform.isIos();
 
+    /** @private @const {boolean} */
+    this.isSafari_ = platform.isSafari();
+
     /** @private {?../../../src/service/action-impl.ActionService} */
     this.action_ = null;
 
@@ -128,14 +141,18 @@ export class AmpSlideScroll extends BaseSlides {
     // - iOS devices on version 10.3
     // - Non iOS devices with the flag turned off.
     /** @private {boolean} */
-    this.shouldDisableCssSnap_ = startsWith(
-      Services.platformFor(this.win).getIosVersionString(),
-      '10.3'
-    )
+    this.shouldDisableCssSnap_ = Services.platformFor(this.win)
+      .getIosVersionString()
+      .startsWith('10.3')
       ? true
       : this.isIos_
       ? false
       : !isExperimentOn(this.win, 'amp-carousel-chrome-scroll-snap');
+
+    /** @private {boolean} */
+    this.hasFirstResizedOccured_ = false;
+
+    this.onResized_ = this.onResized_.bind(this);
   }
 
   /** @override */
@@ -241,6 +258,16 @@ export class AmpSlideScroll extends BaseSlides {
     );
   }
 
+  /** @override */
+  attachedCallback() {
+    observeContentSize(this.element, this.onResized_);
+  }
+
+  /** @override */
+  detachedCallback() {
+    unobserveContentSize(this.element, this.onResized_);
+  }
+
   /** @override */
   isLoopingEligible() {
     return this.noOfSlides_ > 1;
@@ -273,23 +300,23 @@ export class AmpSlideScroll extends BaseSlides {
       Services.timerFor(this.win).cancel(this.scrollTimeout_);
     }
 
-    this.scrollTimeout_ = /** @type {number} */ (Services.timerFor(
-      this.win
-    ).delay(() => {
-      this.scrollTimeout_ = null;
+    this.scrollTimeout_ = /** @type {number} */ (
+      Services.timerFor(this.win).delay(() => {
+        this.scrollTimeout_ = null;
 
-      if (this.snappingInProgress_ || this.isTouching_) {
-        return;
-      }
+        if (this.snappingInProgress_ || this.isTouching_) {
+          return;
+        }
 
-      const currentScrollLeft = this.slidesContainer_./*OK*/ scrollLeft;
+        const currentScrollLeft = this.slidesContainer_./*OK*/ scrollLeft;
 
-      if (this.hasNativeSnapPoints_) {
-        this.updateOnScroll_(currentScrollLeft, ActionTrust.LOW);
-      } else {
-        this.customSnap_(currentScrollLeft, undefined, ActionTrust.LOW);
-      }
-    }, timeout));
+        if (this.hasNativeSnapPoints_) {
+          this.updateOnScroll_(currentScrollLeft, ActionTrust.LOW);
+        } else {
+          this.customSnap_(currentScrollLeft, undefined, ActionTrust.LOW);
+        }
+      }, timeout)
+    );
   }
 
   /**
@@ -304,13 +331,21 @@ export class AmpSlideScroll extends BaseSlides {
     this.waitForScrollSettled_(timeout);
   }
 
-  /** @override */
-  onLayoutMeasure() {
-    this.slideWidth_ = this.element.getLayoutWidth();
+  /**
+   * @param {!../layout-rect.LayoutSizeDef} size
+   * @private
+   */
+  onResized_(size) {
+    this.slideWidth_ = size.width;
+    this.hasFirstResizedOccured_ = true;
   }
 
   /** @override */
   layoutCallback() {
+    observeWithSharedInOb(this.element, (inViewport) =>
+      this.viewportCallbackTemp(inViewport)
+    );
+
     // TODO(sparhami) #19259 Tracks a more generic way to do this. Remove once
     // we have something better.
     const isScaled = closestAncestorElementBySelector(
@@ -321,6 +356,12 @@ export class AmpSlideScroll extends BaseSlides {
       return Promise.resolve();
     }
 
+    // Account for race when onResized_ has not fired before layoutCallback,
+    // since we need slideWidth_ to proceed.
+    if (!this.hasFirstResizedOccured_) {
+      this.slideWidth_ = this.slidesContainer_./*OK*/ clientWidth;
+    }
+
     if (this.slideIndex_ === null) {
       this.showSlide_(this.initialSlideIndex_);
     } else {
@@ -347,23 +388,11 @@ export class AmpSlideScroll extends BaseSlides {
 
   /** @override */
   unlayoutCallback() {
+    unobserveWithSharedInOb(this.element);
     this.slideIndex_ = null;
     return super.unlayoutCallback();
   }
 
-  /** @override */
-  updateViewportState(inViewport) {
-    if (this.slideIndex_ !== null) {
-      Services.ownersForDoc(this.element).updateInViewport(
-        this.element,
-        this.slides_[
-          user().assertNumber(this.slideIndex_, 'E#19457 this.slideIndex_')
-        ],
-        inViewport
-      );
-    }
-  }
-
   /** @override */
   hasPrev() {
     return this.shouldLoop || this.slideIndex_ > 0;
@@ -404,7 +433,7 @@ export class AmpSlideScroll extends BaseSlides {
   scrollHandler_(unusedEvent) {
     const currentScrollLeft = this.slidesContainer_./*OK*/ scrollLeft;
 
-    if (!this.isIos_) {
+    if (!this.isIos_ && !this.isSafari_) {
       this.handleCustomElasticScroll_(currentScrollLeft);
     }
 
@@ -505,6 +534,11 @@ export class AmpSlideScroll extends BaseSlides {
    * @return {number} a number representing the next slide index.
    */
   getNextSlideIndex_(currentScrollLeft) {
+    // Addresses race where slideWidth is 0, due to being hidden
+    // while snapping is occuring.
+    if (!currentScrollLeft && !this.slideWidth_) {
+      return 0;
+    }
     // This can be only 0, 1 or 2, since only a max of 3 slides are shown at
     // a time.
     const scrolledSlideIndex = Math.round(currentScrollLeft / this.slideWidth_);
@@ -689,15 +723,6 @@ export class AmpSlideScroll extends BaseSlides {
     if (nextIndex != null && nextIndex !== prevIndex) {
       showIndexArr.push(nextIndex);
     }
-    if (this.slideIndex_ !== null) {
-      Services.ownersForDoc(this.element).updateInViewport(
-        this.element,
-        this.slides_[
-          user().assertNumber(this.slideIndex_, 'E#19457 this.slideIndex_')
-        ],
-        false
-      );
-    }
     const newSlideInView = this.slides_[newIndex];
 
     if (newSlideInView === undefined) {
@@ -709,11 +734,6 @@ export class AmpSlideScroll extends BaseSlides {
       );
       return false;
     }
-    Services.ownersForDoc(this.element).updateInViewport(
-      this.element,
-      newSlideInView,
-      true
-    );
     showIndexArr.forEach((showIndex, loopIndex) => {
       if (this.shouldLoop) {
         setStyle(this.slideWrappers_[showIndex], 'order', loopIndex + 1);
@@ -729,9 +749,8 @@ export class AmpSlideScroll extends BaseSlides {
         this.slides_[showIndex].setAttribute('aria-hidden', 'true');
       }
     });
-    this.slidesContainer_./*OK*/ scrollLeft = this.getScrollLeftForIndex_(
-      newIndex
-    );
+    this.slidesContainer_./*OK*/ scrollLeft =
+      this.getScrollLeftForIndex_(newIndex);
     this.triggerAnalyticsEvent_(newIndex);
     this.slideIndex_ = newIndex;
     // If we have a specified number of autoplay loops and
@@ -768,7 +787,7 @@ export class AmpSlideScroll extends BaseSlides {
       );
       this.action_.trigger(this.element, name, event, opt_trust);
 
-      this.element.dispatchCustomEvent(name, {
+      dispatchCustomEvent(this.element, name, {
         index: newIndex,
         actionTrust: opt_trust,
       });
diff --git a/extensions/amp-carousel/0.1/test-e2e/test-hidden-controls.js b/extensions/amp-carousel/0.1/test-e2e/test-hidden-controls.js
index b6bb30f8fb797..c80a5d38cda1c 100644
--- a/extensions/amp-carousel/0.1/test-e2e/test-hidden-controls.js
+++ b/extensions/amp-carousel/0.1/test-e2e/test-hidden-controls.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'AMP carousel 0.1 buttons with hidden controls',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-carousel/0.1/hidden-controls.amp.html',
+    fixture: 'amp-carousel/0.1/hidden-controls.amp.html',
     experiments: ['amp-carousel'],
     environments: ['single'],
   },
diff --git a/extensions/amp-carousel/0.1/test-e2e/test-slidescroll-autoplay.js b/extensions/amp-carousel/0.1/test-e2e/test-slidescroll-autoplay.js
index d28004e100f38..6154f4a8b78ed 100644
--- a/extensions/amp-carousel/0.1/test-e2e/test-slidescroll-autoplay.js
+++ b/extensions/amp-carousel/0.1/test-e2e/test-slidescroll-autoplay.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'AMP carousel 0.1 slideChange on type="slide" with autoplay',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-carousel/0.1/slidescroll-autoplay.html',
+    fixture: 'amp-carousel/0.1/slidescroll-autoplay.html',
     environments: ['single'],
   },
   async function (env) {
diff --git a/extensions/amp-carousel/0.1/test/test-base-slide.js b/extensions/amp-carousel/0.1/test/test-base-slide.js
index b740f96887b97..6c988c292f351 100644
--- a/extensions/amp-carousel/0.1/test/test-base-slide.js
+++ b/extensions/amp-carousel/0.1/test/test-base-slide.js
@@ -35,7 +35,7 @@ import {BaseSlides} from '../base-slides';
 describes.fakeWin('BaseSlides', {amp: true}, (env) => {
   let win, doc;
   let buildSlidesSpy;
-  let onViewportCallbackSpy;
+  let viewportCallbackSpy;
   let hasPrevSpy;
   let hasNextSpy;
   let goCallbackSpy;
@@ -52,7 +52,7 @@ describes.fakeWin('BaseSlides', {amp: true}, (env) => {
     win = env.win;
     doc = win.document;
     buildSlidesSpy = env.sandbox.spy();
-    onViewportCallbackSpy = env.sandbox.spy();
+    viewportCallbackSpy = env.sandbox.spy();
     hasPrevSpy = env.sandbox.spy();
     hasNextSpy = env.sandbox.spy();
     goCallbackSpy = env.sandbox.spy();
@@ -66,9 +66,9 @@ describes.fakeWin('BaseSlides', {amp: true}, (env) => {
     hintControlsSpy = env.sandbox.spy(BaseSlides.prototype, 'hintControls');
     autoplaySpy = env.sandbox.spy(BaseSlides.prototype, 'autoplay_');
     clearAutoplaySpy = env.sandbox.spy(BaseSlides.prototype, 'clearAutoplay');
-    onViewportCallbackSpy = env.sandbox.spy(
+    viewportCallbackSpy = env.sandbox.spy(
       BaseSlides.prototype,
-      'onViewportCallback'
+      'viewportCallbackTemp'
     );
   });
 
@@ -174,8 +174,8 @@ describes.fakeWin('BaseSlides', {amp: true}, (env) => {
       })
     );
 
-    carousel.viewportCallback(true);
-    expect(onViewportCallbackSpy).to.have.been.calledWith(true);
+    carousel.viewportCallbackTemp(true);
+    expect(viewportCallbackSpy).to.have.been.calledWith(true);
     expect(hintControlsSpy).to.have.been.called;
     expect(autoplaySpy).to.have.been.called;
     expect(clearAutoplaySpy).to.not.have.been.called;
@@ -189,8 +189,8 @@ describes.fakeWin('BaseSlides', {amp: true}, (env) => {
       })
     );
 
-    carousel.viewportCallback(false);
-    expect(onViewportCallbackSpy).to.have.been.calledWith(false);
+    carousel.viewportCallbackTemp(false);
+    expect(viewportCallbackSpy).to.have.been.calledWith(false);
     expect(hintControlsSpy).to.not.have.been.called;
     expect(autoplaySpy).to.not.have.been.called;
     expect(clearAutoplaySpy).to.have.been.called;
diff --git a/extensions/amp-carousel/0.1/test/test-scrollable-carousel.js b/extensions/amp-carousel/0.1/test/test-scrollable-carousel.js
index b32f31ae43e13..8bd35fbfe87d1 100644
--- a/extensions/amp-carousel/0.1/test/test-scrollable-carousel.js
+++ b/extensions/amp-carousel/0.1/test/test-scrollable-carousel.js
@@ -16,7 +16,7 @@
 
 import '../amp-carousel';
 import {ActionService} from '../../../../src/service/action-impl';
-import {ActionTrust} from '../../../../src/action-constants';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
 import {Services} from '../../../../src/services';
 import {
   createElementWithAttributes,
@@ -35,7 +35,6 @@ describes.realWin(
     let win,
       doc,
       owners,
-      updateInViewportSpy,
       schedulePauseSpy,
       scheduleLayoutSpy,
       schedulePreloadSpy;
@@ -47,7 +46,6 @@ describes.realWin(
       env.iframe.height = '200';
 
       owners = Services.ownersForDoc(doc);
-      updateInViewportSpy = env.sandbox.spy(owners, 'updateInViewport');
       schedulePauseSpy = env.sandbox.spy(owners, 'schedulePause');
       scheduleLayoutSpy = env.sandbox.spy(owners, 'scheduleLayout');
       schedulePreloadSpy = env.sandbox.spy(owners, 'schedulePreload');
@@ -76,7 +74,7 @@ describes.realWin(
 
       doc.body.appendChild(carouselElement);
       return carouselElement
-        .build()
+        .buildInternal()
         .then(() => {
           carouselElement.updateLayoutBox({
             top: 0,
@@ -92,145 +90,156 @@ describes.realWin(
     it(
       'should initialize correctly: create container, build initial slides ' +
         'and show control buttons',
-      () => {
-        return getAmpScrollableCarousel().then((carousel) => {
-          const impl = carousel.implementation_;
-
-          // create container
-          expect(
-            carousel.getElementsByClassName(
-              'i-amphtml-scrollable-carousel-container'
-            ).length
-          ).to.equal(1);
-          const container = carousel.getElementsByClassName(
+      async () => {
+        const carousel = await getAmpScrollableCarousel();
+        const impl = await carousel.getImpl();
+
+        // create container
+        expect(
+          carousel.getElementsByClassName(
             'i-amphtml-scrollable-carousel-container'
-          )[0];
-          const containerStyle = win.getComputedStyle(container, null);
-
-          expect(containerStyle.getPropertyValue('overflow-x')).to.equal(
-            'auto'
-          );
-          expect(containerStyle.getPropertyValue('overflow-y')).to.equal(
-            'hidden'
-          );
-          expect(containerStyle.getPropertyValue('white-space')).to.equal(
-            'nowrap'
-          );
-
-          // build child slides
-          const carouselSlideEls = container.getElementsByClassName(
-            'amp-carousel-slide'
-          );
-          expect(carouselSlideEls.length).to.equal(7);
-          expect(carouselSlideEls[0]).to.have.display('inline-block');
-
-          // show control buttons correctly
-          expect(impl.hasPrev()).to.be.false;
-          expect(impl.hasNext()).to.be.true;
-          expect(impl.prevButton_.classList.contains('amp-disabled')).to.be
-            .true;
-          expect(impl.nextButton_.classList.contains('amp-disabled')).to.be
-            .false;
-          // Controls are hidden from screen readers as they do not provide
-          // any functionality for scrollable carousel.
-          // ATs see this is a scrolling div and can scroll it as user navigates
-          // items just fine (unlike type=slide which requires next/prev)
-          expect(impl.nextButton_.getAttribute('role')).equal('presentation');
-          expect(impl.prevButton_.getAttribute('role')).equal('presentation');
-        });
+          ).length
+        ).to.equal(1);
+        const container = carousel.getElementsByClassName(
+          'i-amphtml-scrollable-carousel-container'
+        )[0];
+        const containerStyle = win.getComputedStyle(container, null);
+
+        expect(containerStyle.getPropertyValue('overflow-x')).to.equal('auto');
+        expect(containerStyle.getPropertyValue('overflow-y')).to.equal(
+          'hidden'
+        );
+        expect(containerStyle.getPropertyValue('white-space')).to.equal(
+          'nowrap'
+        );
+
+        // build child slides
+        const carouselSlideEls =
+          container.getElementsByClassName('amp-carousel-slide');
+        expect(carouselSlideEls.length).to.equal(7);
+        expect(carouselSlideEls[0]).to.have.display('inline-block');
+
+        // show control buttons correctly
+        expect(impl.hasPrev()).to.be.false;
+        expect(impl.hasNext()).to.be.true;
+        expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.true;
+        expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.false;
+        // Controls are hidden from screen readers as they do not provide
+        // any functionality for scrollable carousel.
+        // ATs see this is a scrolling div and can scroll it as user navigates
+        // items just fine (unlike type=slide which requires next/prev)
+        expect(impl.nextButton_.getAttribute('role')).equal('presentation');
+        expect(impl.prevButton_.getAttribute('role')).equal('presentation');
       }
     );
 
+    it('should properly style controls; focusable but not visible', async () => {
+      const carousel = await getAmpScrollableCarousel();
+      const impl = await carousel.getImpl();
+      const container = carousel.getElementsByClassName(
+        'i-amphtml-scrollable-carousel-container'
+      )[0];
+      const carouselSlideEls =
+        container.getElementsByClassName('amp-carousel-slide');
+
+      // show control buttons correctly
+      expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.true;
+      expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.false;
+      // Explicitly check if buttons don't have visibility hidden or display none
+      expect(impl.prevButton_.tabIndex).to.equal(-1);
+      expect(impl.nextButton_.tabIndex).to.equal(0);
+      expect(isScreenReaderHidden(impl.prevButton_)).to.be.false;
+      expect(isScreenReaderHidden(impl.nextButton_)).to.be.false;
+
+      impl.nextButton_.focus();
+      expect(doc.activeElement).to.equal(impl.nextButton_);
+
+      // Scroll to end
+      for (let i = 0; i < carouselSlideEls.length - 1; i++) {
+        impl.goCallback(1, /*animate*/ false);
+      }
+      // Explicitly check if buttons don't have visibility hidden or display none
+      expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.false;
+      expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.true;
+      expect(impl.prevButton_.tabIndex).to.equal(0);
+      expect(impl.nextButton_.tabIndex).to.equal(-1);
+      expect(isScreenReaderHidden(impl.prevButton_)).to.be.false;
+      expect(isScreenReaderHidden(impl.nextButton_)).to.be.false;
+      expect(doc.activeElement).to.equal(impl.nextButton_);
+
+      impl.prevButton_.focus();
+
+      for (let i = 0; i < carouselSlideEls.length - 1; i++) {
+        impl.goCallback(-1, /*animate*/ false);
+      }
+      // Explicitly check if buttons don't have visibility hidden or display none
+      expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.true;
+      expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.false;
+      expect(impl.prevButton_.tabIndex).to.equal(-1);
+      expect(impl.nextButton_.tabIndex).to.equal(0);
+      expect(isScreenReaderHidden(impl.prevButton_)).to.be.false;
+      expect(isScreenReaderHidden(impl.nextButton_)).to.be.false;
+      expect(doc.activeElement).to.equal(impl.prevButton_);
+    });
+
     // TODO(#17197): This test triggers sinonjs/sinon issues 1709 and 1321.
     it.skip(
       'should behave correctly when clicking on next button and the ' +
         'space to the right is MORE than containerWidth',
-      () => {
-        return getAmpScrollableCarousel().then((carousel) => {
-          const impl = carousel.implementation_;
-
-          // click on the next button
-          impl.goCallback(1, /*animate*/ false);
-
-          // scroll to the correct position
-          expect(impl.container_./*OK*/ scrollLeft).to.equal(300);
-
-          // load new slides in viewport
-          expect(updateInViewportSpy).to.have.callCount(5);
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[2],
-            true
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[3],
-            true
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[4],
-            true
-          );
-
-          // unload and pause old slides in viewport
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[0],
-            false
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[1],
-            false
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[0]
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[1]
-          );
-
-          // schedule layout for new slides
-          expect(scheduleLayoutSpy).to.have.callCount(3);
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[2]
-          );
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[3]
-          );
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[4]
-          );
-
-          // preload slides in viewport
-          expect(schedulePreloadSpy).to.have.callCount(3);
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[4]
-          );
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[5]
-          );
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[6]
-          );
-
-          // set control buttons correctly
-          expect(impl.hasPrev()).to.be.true;
-          expect(impl.hasNext()).to.be.true;
-          expect(impl.prevButton_.classList.contains('amp-disabled')).to.be
-            .false;
-          expect(impl.nextButton_.classList.contains('amp-disabled')).to.be
-            .false;
-        });
+      async () => {
+        const carousel = await getAmpScrollableCarousel();
+        const impl = await carousel.getImpl();
+
+        // click on the next button
+        impl.goCallback(1, /*animate*/ false);
+
+        // scroll to the correct position
+        expect(impl.container_./*OK*/ scrollLeft).to.equal(300);
+
+        expect(schedulePauseSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[0]
+        );
+        expect(schedulePauseSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[1]
+        );
+
+        // schedule layout for new slides
+        expect(scheduleLayoutSpy).to.have.callCount(3);
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[2]
+        );
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[3]
+        );
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[4]
+        );
+
+        // preload slides in viewport
+        expect(schedulePreloadSpy).to.have.callCount(3);
+        expect(schedulePreloadSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[4]
+        );
+        expect(schedulePreloadSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[5]
+        );
+        expect(schedulePreloadSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[6]
+        );
+
+        // set control buttons correctly
+        expect(impl.hasPrev()).to.be.true;
+        expect(impl.hasNext()).to.be.true;
+        expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.false;
+        expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.false;
       }
     );
 
@@ -238,84 +247,52 @@ describes.realWin(
     it.skip(
       'should behave correctly when clicking on next button and the ' +
         'space to the right is LESS than containerWidth',
-      () => {
-        return getAmpScrollableCarousel().then((carousel) => {
-          const impl = carousel.implementation_;
-
-          // click on the next button the first time
-          impl.goCallback(1, /*animate*/ false);
-
-          // click on the next button the second time
-          impl.goCallback(1, /*animate*/ false);
-
-          // scroll to the correct position
-          // note the correct scrollLeft is not 600 (300 * 2) but 588 (888 - 300)
-          expect(impl.container_./*OK*/ scrollLeft).to.equal(588);
-
-          // load new slides in viewport
-          expect(updateInViewportSpy).to.have.callCount(5);
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[4],
-            true
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[5],
-            true
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[6],
-            true
-          );
-
-          // unload and pause old slides in viewport
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[2],
-            false
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[3],
-            false
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[2]
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[3]
-          );
-
-          // schedule layout for new slides
-          expect(scheduleLayoutSpy).to.have.callCount(3);
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[4]
-          );
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[5]
-          );
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[6]
-          );
-
-          // preload slides in viewport
-          expect(schedulePreloadSpy).to.have.not.been.called;
-
-          // set control buttons correctly
-          expect(impl.hasPrev()).to.be.true;
-          expect(impl.hasNext()).to.be.false;
-          expect(impl.prevButton_.classList.contains('amp-disabled')).to.be
-            .false;
-          expect(impl.nextButton_.classList.contains('amp-disabled')).to.be
-            .true;
-        });
+      async () => {
+        const carousel = await getAmpScrollableCarousel();
+        const impl = await carousel.getImpl();
+
+        // click on the next button the first time
+        impl.goCallback(1, /*animate*/ false);
+
+        // click on the next button the second time
+        impl.goCallback(1, /*animate*/ false);
+
+        // scroll to the correct position
+        // note the correct scrollLeft is not 600 (300 * 2) but 588 (888 - 300)
+        expect(impl.container_./*OK*/ scrollLeft).to.equal(588);
+
+        expect(schedulePauseSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[2]
+        );
+        expect(schedulePauseSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[3]
+        );
+
+        // schedule layout for new slides
+        expect(scheduleLayoutSpy).to.have.callCount(3);
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[4]
+        );
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[5]
+        );
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[6]
+        );
+
+        // preload slides in viewport
+        expect(schedulePreloadSpy).to.have.not.been.called;
+
+        // set control buttons correctly
+        expect(impl.hasPrev()).to.be.true;
+        expect(impl.hasNext()).to.be.false;
+        expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.false;
+        expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.true;
       }
     );
 
@@ -323,97 +300,65 @@ describes.realWin(
     it.skip(
       'should behave correctly when clicking on previous button and the ' +
         'space to the left is MORE than containerWidth',
-      () => {
-        return getAmpScrollableCarousel().then((carousel) => {
-          const impl = carousel.implementation_;
-
-          // click on the next button twice to reach the right end
-          // scrollLeft after second click is 588
-          impl.goCallback(1, /*animate*/ false);
-          impl.goCallback(1, /*animate*/ false);
-
-          // click on the previous button
-          impl.goCallback(-1, /*animate*/ false);
-
-          // scroll to the correct position
-          expect(impl.container_./*OK*/ scrollLeft).to.equal(288);
-
-          // load new slides in viewport
-          expect(updateInViewportSpy).to.have.callCount(5);
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[2],
-            true
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[3],
-            true
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[4],
-            true
-          );
-
-          // unload and pause old slides in viewport
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[5],
-            false
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[6],
-            false
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[5]
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[6]
-          );
-
-          // schedule layout for new slides
-          expect(scheduleLayoutSpy).to.have.callCount(3);
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[2]
-          );
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[3]
-          );
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[4]
-          );
-
-          // preload slides in viewport
-          expect(schedulePreloadSpy).to.have.callCount(3);
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[0]
-          );
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[1]
-          );
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[2]
-          );
-
-          // set control buttons correctly
-          expect(impl.hasPrev()).to.be.true;
-          expect(impl.hasNext()).to.be.true;
-          expect(impl.prevButton_.classList.contains('amp-disabled')).to.be
-            .false;
-          expect(impl.nextButton_.classList.contains('amp-disabled')).to.be
-            .false;
-        });
+      async () => {
+        const carousel = await getAmpScrollableCarousel();
+        const impl = await carousel.getImpl();
+
+        // click on the next button twice to reach the right end
+        // scrollLeft after second click is 588
+        impl.goCallback(1, /*animate*/ false);
+        impl.goCallback(1, /*animate*/ false);
+
+        // click on the previous button
+        impl.goCallback(-1, /*animate*/ false);
+
+        // scroll to the correct position
+        expect(impl.container_./*OK*/ scrollLeft).to.equal(288);
+
+        expect(schedulePauseSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[5]
+        );
+        expect(schedulePauseSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[6]
+        );
+
+        // schedule layout for new slides
+        expect(scheduleLayoutSpy).to.have.callCount(3);
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[2]
+        );
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[3]
+        );
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[4]
+        );
+
+        // preload slides in viewport
+        expect(schedulePreloadSpy).to.have.callCount(3);
+        expect(schedulePreloadSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[0]
+        );
+        expect(schedulePreloadSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[1]
+        );
+        expect(schedulePreloadSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[2]
+        );
+
+        // set control buttons correctly
+        expect(impl.hasPrev()).to.be.true;
+        expect(impl.hasNext()).to.be.true;
+        expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.false;
+        expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.false;
       }
     );
 
@@ -421,86 +366,54 @@ describes.realWin(
     it.skip(
       'should behave correctly when clicking on previous button and the ' +
         'space to the left is LESS than containerWidth',
-      () => {
-        return getAmpScrollableCarousel().then((carousel) => {
-          const impl = carousel.implementation_;
-
-          // click on the next button twice to reach the right end and click on
-          // the previous button once, scrollLeft after third click is 288
-          impl.goCallback(1, /*animate*/ false);
-          impl.goCallback(1, /*animate*/ false);
-          impl.goCallback(-1, /*animate*/ false);
-
-          // click on the previous button
-          impl.goCallback(-1, /*animate*/ false);
-
-          // scroll to the correct position
-          expect(impl.container_./*OK*/ scrollLeft).to.equal(0);
-
-          // load new slides in viewport
-          expect(updateInViewportSpy).to.have.callCount(5);
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[0],
-            true
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[1],
-            true
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[2],
-            true
-          );
-
-          // unload and pause old slides in viewport
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[3],
-            false
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[4],
-            false
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[3]
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[4]
-          );
-
-          // schedule layout for new slides
-          expect(scheduleLayoutSpy).to.have.callCount(3);
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[0]
-          );
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[1]
-          );
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.cells_[2]
-          );
-
-          // preload slides in viewport
-          expect(schedulePreloadSpy).to.have.not.been.called;
-
-          // set control buttons correctly
-          expect(impl.hasPrev()).to.be.false;
-          expect(impl.hasNext()).to.be.true;
-          expect(impl.prevButton_.classList.contains('amp-disabled')).to.be
-            .true;
-          expect(impl.nextButton_.classList.contains('amp-disabled')).to.be
-            .false;
-        });
+      async () => {
+        const carousel = await getAmpScrollableCarousel();
+        const impl = await carousel.getImpl();
+
+        // click on the next button twice to reach the right end and click on
+        // the previous button once, scrollLeft after third click is 288
+        impl.goCallback(1, /*animate*/ false);
+        impl.goCallback(1, /*animate*/ false);
+        impl.goCallback(-1, /*animate*/ false);
+
+        // click on the previous button
+        impl.goCallback(-1, /*animate*/ false);
+
+        // scroll to the correct position
+        expect(impl.container_./*OK*/ scrollLeft).to.equal(0);
+
+        expect(schedulePauseSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[3]
+        );
+        expect(schedulePauseSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[4]
+        );
+
+        // schedule layout for new slides
+        expect(scheduleLayoutSpy).to.have.callCount(3);
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[0]
+        );
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[1]
+        );
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.cells_[2]
+        );
+
+        // preload slides in viewport
+        expect(schedulePreloadSpy).to.have.not.been.called;
+
+        // set control buttons correctly
+        expect(impl.hasPrev()).to.be.false;
+        expect(impl.hasNext()).to.be.true;
+        expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.true;
+        expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.false;
       }
     );
 
@@ -562,3 +475,15 @@ describes.realWin(
     });
   }
 );
+
+/**
+ *
+ * @param {Element} element
+ * @returns {boolean}
+ */
+function isScreenReaderHidden(element) {
+  const computedStyle = getComputedStyle(element);
+  return (
+    computedStyle.visibility === 'hidden' || computedStyle.display === 'none'
+  );
+}
diff --git a/extensions/amp-carousel/0.1/test/test-slidescroll.js b/extensions/amp-carousel/0.1/test/test-slidescroll.js
index 26c1e5ce2fecd..259a849556d58 100644
--- a/extensions/amp-carousel/0.1/test/test-slidescroll.js
+++ b/extensions/amp-carousel/0.1/test/test-slidescroll.js
@@ -16,12 +16,13 @@
 
 import '../amp-carousel';
 import {ActionService} from '../../../../src/service/action-impl';
-import {ActionTrust} from '../../../../src/action-constants';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
 import {Services} from '../../../../src/services';
 import {
   createElementWithAttributes,
   whenUpgradedToCustomElement,
 } from '../../../../src/dom';
+import {installResizeObserverStub} from '../../../../testing/resize-observer-stub';
 import {user} from '../../../../src/log';
 
 describes.realWin(
@@ -29,18 +30,19 @@ describes.realWin(
   {
     amp: {
       extensions: ['amp-carousel'],
-      runtimeOn: true,
     },
   },
   (env) => {
     const SHOW_CLASS = 'i-amphtml-slide-item-show';
     let win, doc;
+    let resizeObserverStub;
 
     beforeEach(() => {
       win = env.win;
       doc = win.document;
       env.iframe.width = '1000';
       env.iframe.height = '1000';
+      resizeObserverStub = installResizeObserverStub(env.sandbox, win);
     });
 
     function getAmpSlideScroll(
@@ -86,13 +88,11 @@ describes.realWin(
       if (opt_attachToDom) {
         doc.body.appendChild(ampSlideScroll);
         return ampSlideScroll
-          .build()
+          .buildInternal()
           .then(() => {
-            ampSlideScroll.updateLayoutBox({
-              top: 0,
-              left: 0,
-              width: 400,
-              height: 300,
+            resizeObserverStub.notifySync({
+              target: ampSlideScroll,
+              contentRect: {width: 400, height: 300},
             });
             return ampSlideScroll.layoutCallback();
           })
@@ -101,59 +101,633 @@ describes.realWin(
       return Promise.resolve(ampSlideScroll);
     }
 
-    it('should create container and wrappers and show initial slides', () => {
-      return getAmpSlideScroll().then((ampSlideScroll) => {
-        expect(
-          ampSlideScroll.getElementsByClassName('i-amphtml-slides-container')
-            .length
-        ).to.equal(1);
-        expect(
-          ampSlideScroll.querySelectorAll(
-            '.i-amphtml-slides-container > .i-amphtml-slide-item'
-          ).length
-        ).to.equal(5);
-        expect(
-          ampSlideScroll.getElementsByClassName('amp-carousel-slide').length
-        ).to.equal(5);
-        expect(
-          ampSlideScroll
-            .querySelector('.i-amphtml-slides-container')
-            .getAttribute('aria-live')
-        ).to.equal('polite');
-        const impl = ampSlideScroll.implementation_;
-        expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
-          .true;
-        expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
-          .true;
-        expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('false');
-        expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('true');
-      });
+    /**
+     * @param {Element} element
+     * @returns {boolean}
+     */
+    function isScreenReaderHidden(element) {
+      const computedStyle = getComputedStyle(element);
+      return (
+        computedStyle.visibility === 'hidden' ||
+        computedStyle.display === 'none'
+      );
+    }
+
+    it('should create container and wrappers and show initial slides', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+      expect(
+        ampSlideScroll.getElementsByClassName('i-amphtml-slides-container')
+          .length
+      ).to.equal(1);
+      expect(
+        ampSlideScroll.querySelectorAll(
+          '.i-amphtml-slides-container > .i-amphtml-slide-item'
+        ).length
+      ).to.equal(5);
+      expect(
+        ampSlideScroll.getElementsByClassName('amp-carousel-slide').length
+      ).to.equal(5);
+      expect(
+        ampSlideScroll
+          .querySelector('.i-amphtml-slides-container')
+          .getAttribute('aria-live')
+      ).to.equal('polite');
+      expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('false');
+      expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('true');
     });
 
-    it('should go to the correct slide on button click', () => {
-      return getAmpSlideScroll().then((ampSlideScroll) => {
-        const impl = ampSlideScroll.implementation_;
-        const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
+    it('should go to the correct slide on button click', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
 
-        impl.goCallback(1);
-        expect(showSlideSpy).to.have.been.calledWith(1);
-        expect(showSlideSpy).to.be.calledOnce;
+      const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
 
-        impl.goCallback(-1);
-        expect(showSlideSpy).to.have.been.calledWith(0);
-        expect(showSlideSpy).to.have.callCount(2);
+      impl.goCallback(1);
+      expect(showSlideSpy).to.have.been.calledWith(1);
+      expect(showSlideSpy).to.be.calledOnce;
 
-        impl.goCallback(0);
-        expect(showSlideSpy).to.have.callCount(2);
+      impl.goCallback(-1);
+      expect(showSlideSpy).to.have.been.calledWith(0);
+      expect(showSlideSpy).to.have.callCount(2);
+
+      impl.goCallback(0);
+      expect(showSlideSpy).to.have.callCount(2);
+    });
+
+    // TODO(#17197): This test triggers sinonjs/sinon issues 1709 and 1321.
+    it.skip('should show the correct slide', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+
+      const owners = Services.ownersForDoc(impl.element);
+      const scheduleLayoutSpy = env.sandbox.spy(owners, 'scheduleLayout');
+      const schedulePreloadSpy = env.sandbox.spy(owners, 'schedulePreload');
+      const hideRestOfTheSlidesSpy = env.sandbox.spy(
+        impl,
+        'hideRestOfTheSlides_'
+      );
+      const setControlsStateSpy = env.sandbox.spy(impl, 'setControlsState');
+      const analyticsEventSpy = env.sandbox.spy(impl, 'analyticsEvent_');
+
+      expect(impl.showSlide_(-1)).to.be.false;
+      expect(scheduleLayoutSpy).to.not.have.been.called;
+      expect(schedulePreloadSpy).to.not.have.been.called;
+      expect(hideRestOfTheSlidesSpy).to.not.have.been.called;
+      expect(setControlsStateSpy).to.not.have.been.called;
+      expect(analyticsEventSpy).to.not.have.been.called;
+
+      expect(impl.showSlide_(5)).to.be.false;
+      expect(scheduleLayoutSpy).to.not.have.been.called;
+      expect(schedulePreloadSpy).to.not.have.been.called;
+      expect(hideRestOfTheSlidesSpy).to.not.have.been.called;
+      expect(setControlsStateSpy).to.not.have.been.called;
+      expect(analyticsEventSpy).to.not.have.been.called;
+
+      expect(impl.showSlide_(impl.slideIndex_)).to.be.false;
+      expect(scheduleLayoutSpy).to.not.have.been.called;
+      expect(schedulePreloadSpy).to.not.have.been.called;
+      expect(hideRestOfTheSlidesSpy).to.not.have.been.called;
+      expect(setControlsStateSpy).to.not.have.been.called;
+      expect(analyticsEventSpy).to.not.have.been.called;
+
+      expect(impl.showSlide_(1)).to.be.true;
+      expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(impl.slideWrappers_[2].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(schedulePreloadSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[0]
+      );
+      expect(scheduleLayoutSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[1]
+      );
+      expect(schedulePreloadSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[2]
+      );
+      expect(scheduleLayoutSpy).to.be.calledOnce;
+      expect(schedulePreloadSpy).to.have.callCount(2);
+      expect(impl.slideIndex_).to.equal(1);
+      expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(
+        impl.slideWidth_
+      );
+      expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([0, 1, 2]);
+      expect(hideRestOfTheSlidesSpy).to.be.calledOnce;
+      expect(setControlsStateSpy).to.be.calledOnce;
+      expect(analyticsEventSpy).to.have.callCount(2);
+      expect(analyticsEventSpy).to.have.been.calledWith('amp-carousel-next', {
+        'fromSlide': 'slide-id',
+        'toSlide': '1',
+      });
+      expect(analyticsEventSpy).to.have.been.calledWith('amp-carousel-change', {
+        'fromSlide': 'slide-id',
+        'toSlide': '1',
       });
+      expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('true');
+      expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('false');
+      expect(impl.slides_[2].getAttribute('aria-hidden')).to.equal('true');
+
+      expect(impl.showSlide_(0)).to.be.true;
+      expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(impl.slideWrappers_[2].classList.contains(SHOW_CLASS)).to.be.false;
+      expect(scheduleLayoutSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[0]
+      );
+      expect(schedulePreloadSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[1]
+      );
+      expect(scheduleLayoutSpy).to.have.callCount(2);
+      expect(schedulePreloadSpy).to.have.callCount(3);
+      expect(impl.slideIndex_).to.equal(0);
+      expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(0);
+      expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([0, 1]);
+      expect(hideRestOfTheSlidesSpy).to.have.callCount(2);
+      expect(setControlsStateSpy).to.have.callCount(2);
+      expect(analyticsEventSpy).to.have.callCount(4);
+      expect(analyticsEventSpy).to.have.been.calledWith('amp-carousel-prev', {
+        'fromSlide': '1',
+        'toSlide': 'slide-id',
+      });
+      expect(analyticsEventSpy).to.have.been.calledWith('amp-carousel-change', {
+        'fromSlide': '1',
+        'toSlide': 'slide-id',
+      });
+      expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('false');
+      expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('true');
+
+      expect(impl.showSlide_(4)).to.be.true;
+      expect(impl.slideWrappers_[3].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(schedulePreloadSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[3]
+      );
+      expect(scheduleLayoutSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[4]
+      );
+      expect(scheduleLayoutSpy).to.have.callCount(3);
+      expect(schedulePreloadSpy).to.have.callCount(4);
+      expect(impl.slideIndex_).to.equal(4);
+      expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(
+        impl.slideWidth_
+      );
+      expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([3, 4]);
+      expect(hideRestOfTheSlidesSpy).to.have.callCount(3);
+      expect(setControlsStateSpy).to.have.callCount(3);
+      expect(analyticsEventSpy).to.have.callCount(6);
+      expect(analyticsEventSpy).to.have.been.calledWith('amp-carousel-prev', {
+        'fromSlide': 'slide-id',
+        'toSlide': '4',
+      });
+      expect(analyticsEventSpy).to.have.been.calledWith('amp-carousel-change', {
+        'fromSlide': 'slide-id',
+        'toSlide': '4',
+      });
+      expect(impl.slides_[3].getAttribute('aria-hidden')).to.equal('true');
+      expect(impl.slides_[4].getAttribute('aria-hidden')).to.equal('false');
+      expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal(null);
     });
 
     // TODO(#17197): This test triggers sinonjs/sinon issues 1709 and 1321.
-    it.skip('should show the correct slide', () => {
-      return getAmpSlideScroll().then((ampSlideScroll) => {
-        const impl = ampSlideScroll.implementation_;
+    it.skip('should hide the unwanted slides', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+
+      const owners = Services.ownersForDoc(impl.element);
+      const schedulePauseSpy = env.sandbox.spy(owners, 'schedulePause');
+      const hideRestOfTheSlidesSpy = env.sandbox.spy(
+        impl,
+        'hideRestOfTheSlides_'
+      );
+
+      impl.showSlide_(1);
+
+      expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([0, 1, 2]);
+      expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(impl.slideWrappers_[2].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(impl.slideWrappers_[3].classList.contains(SHOW_CLASS)).to.be.false;
+      expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be.false;
+      expect(schedulePauseSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[0]
+      );
+      expect(schedulePauseSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[2]
+      );
+      expect(schedulePauseSpy).to.have.callCount(2);
+
+      impl.showSlide_(0);
+
+      expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([0, 1]);
+      expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(impl.slideWrappers_[2].classList.contains(SHOW_CLASS)).to.be.false;
+      expect(impl.slideWrappers_[3].classList.contains(SHOW_CLASS)).to.be.false;
+      expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be.false;
+      expect(schedulePauseSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[1]
+      );
+      expect(schedulePauseSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[2]
+      );
+      expect(schedulePauseSpy).to.have.callCount(4);
+
+      impl.showSlide_(4);
+
+      expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([3, 4]);
+
+      expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be.false;
+      expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be.false;
+      expect(impl.slideWrappers_[2].classList.contains(SHOW_CLASS)).to.be.false;
+      expect(impl.slideWrappers_[3].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be.true;
+      expect(schedulePauseSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[0]
+      );
+      expect(schedulePauseSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[1]
+      );
+      expect(schedulePauseSpy).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[3]
+      );
+      expect(schedulePauseSpy).to.have.callCount(7);
+    });
+
+    it('should show/hide the correct controls', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+
+      impl.showSlide_(1);
+      expect(impl.hasNext()).to.be.true;
+      expect(impl.hasPrev()).to.be.true;
+      expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.false;
+      expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.false;
+
+      impl.showSlide_(0);
+      expect(impl.hasNext()).to.be.true;
+      expect(impl.hasPrev()).to.be.false;
+      expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.false;
+      expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.true;
+
+      impl.showSlide_(4);
+      expect(impl.hasNext()).to.be.false;
+      expect(impl.hasPrev()).to.be.true;
+      expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.true;
+      expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.false;
+
+      // Verify aria roles for the button
+      expect(impl.nextButton_.getAttribute('role')).equal('button');
+      expect(impl.prevButton_.getAttribute('role')).equal('button');
+    });
+
+    it('should properly style controls; focusable but not visible', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+
+      impl.showSlide_(0);
+      expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.false;
+      expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.true;
+      expect(impl.prevButton_.tabIndex).to.equal(-1);
+      expect(impl.nextButton_.tabIndex).to.equal(0);
+      expect(isScreenReaderHidden(impl.prevButton_)).to.be.false;
+      expect(isScreenReaderHidden(impl.nextButton_)).to.be.false;
+
+      impl.nextButton_.focus();
+      expect(doc.activeElement).to.equal(impl.nextButton_);
+
+      impl.showSlide_(4);
+      expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.true;
+      expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.false;
+      expect(impl.prevButton_.tabIndex).to.equal(0);
+      expect(impl.nextButton_.tabIndex).to.equal(-1);
+      expect(isScreenReaderHidden(impl.prevButton_)).to.be.false;
+      expect(isScreenReaderHidden(impl.nextButton_)).to.be.false;
+      expect(doc.activeElement).to.equal(impl.nextButton_);
+    });
+
+    it('should show focus outline and border on next and prev buttons', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+
+      impl.showSlide_(1);
+
+      impl.prevButton_.focus();
+      expect(doc.activeElement).to.equal(impl.prevButton_);
+      expect(win.getComputedStyle(impl.prevButton_).outline).to.equal(
+        'rgb(255, 255, 255) solid 1px'
+      );
+      expect(win.getComputedStyle(impl.prevButton_).border).to.equal(
+        '1px solid rgb(0, 0, 0)'
+      );
+
+      impl.nextButton_.focus();
+      expect(doc.activeElement).to.equal(impl.nextButton_);
+      expect(win.getComputedStyle(impl.nextButton_).outline).to.equal(
+        'rgb(255, 255, 255) solid 1px'
+      );
+      expect(win.getComputedStyle(impl.nextButton_).border).to.equal(
+        '1px solid rgb(0, 0, 0)'
+      );
+    });
+
+    it('should set the correct scrollLeft when there is only one slide', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+
+      impl.noOfSlides_ = 1;
+      impl.showSlide_(0);
+      expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(0);
+    });
+
+    it('should update to the right slide on scroll', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+
+      const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
+
+      impl.vsync_ = {
+        mutatePromise: (cb) => {
+          cb();
+          return {
+            then: (cb2) => {
+              cb2();
+            },
+          };
+        },
+        mutate: (cb) => {
+          cb();
+        },
+      };
+
+      // Move to slide 1 (from slide 0).
+      impl.showSlide_(1);
+      expect(showSlideSpy).to.be.calledWith(1);
+      expect(impl.snappingInProgress_).to.be.false;
+
+      //Move to slide 0 - via scrolling back.
+      impl.updateOnScroll_(1);
+      expect(showSlideSpy).to.be.calledWith(0);
+      expect(impl.slideIndex_).to.equal(0);
+
+      // Try scrolling Fwd and move to slide 1.
+      impl.updateOnScroll_(401);
+      expect(showSlideSpy).to.be.calledWith(1);
+      expect(impl.slideIndex_).to.equal(1);
+
+      impl.updateOnScroll_(700);
+      expect(showSlideSpy).to.be.calledWith(2);
+      expect(impl.slideIndex_).to.equal(2);
+
+      impl.showSlide_(4);
+      impl.updateOnScroll_(700);
+      expect(showSlideSpy).to.be.calledWith(4);
+      expect(impl.slideIndex_).to.equal(4);
+    });
+
+    it('should get the correct next slide index for a scrollLeft', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+
+      // Already at slide 0;
+      expect(impl.getNextSlideIndex_(0)).to.equal(0);
+      expect(impl.getNextSlideIndex_(100)).to.equal(0);
+      expect(impl.getNextSlideIndex_(200)).to.equal(1);
+      expect(impl.getNextSlideIndex_(400)).to.equal(1);
+
+      impl.showSlide_(3);
+
+      expect(impl.getNextSlideIndex_(0)).to.equal(2);
+      expect(impl.getNextSlideIndex_(100)).to.equal(2);
+      expect(impl.getNextSlideIndex_(200)).to.equal(3);
+      expect(impl.getNextSlideIndex_(400)).to.equal(3);
+      expect(impl.getNextSlideIndex_(500)).to.equal(3);
+      expect(impl.getNextSlideIndex_(600)).to.equal(4);
+      expect(impl.getNextSlideIndex_(800)).to.equal(4);
+
+      impl.showSlide_(4);
+      expect(impl.getNextSlideIndex_(0)).to.equal(3);
+      expect(impl.getNextSlideIndex_(100)).to.equal(3);
+      expect(impl.getNextSlideIndex_(200)).to.equal(4);
+      expect(impl.getNextSlideIndex_(400)).to.equal(4);
+    });
+
+    it('should custom snap to the correct slide', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+
+      const animateScrollLeftSpy = env.sandbox.spy(impl, 'animateScrollLeft_');
+
+      impl.customSnap_(0);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(0, 0);
+      impl.customSnap_(100);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(100, 0);
+      impl.customSnap_(200);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(200, 400);
+      impl.customSnap_(400);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(400, 400);
+
+      impl.showSlide_(3);
+
+      impl.customSnap_(0);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(0, 0);
+      impl.customSnap_(100);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(100, 0);
+      impl.customSnap_(200);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(200, 400);
+      impl.customSnap_(400);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(400, 400);
+      impl.customSnap_(500);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(500, 400);
+      impl.customSnap_(600);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(600, 800);
+      impl.customSnap_(800);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(800, 800);
+
+      impl.showSlide_(4);
+
+      impl.customSnap_(0);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(0, 0);
+      impl.customSnap_(100);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(100, 0);
+      impl.customSnap_(200);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(200, 400);
+      impl.customSnap_(400);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(400, 400);
+
+      impl.showSlide_(0);
+
+      impl.customSnap_(0, -1);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(0, 0);
+      impl.customSnap_(0, 1);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(0, 400);
+
+      impl.showSlide_(3);
+
+      impl.customSnap_(400, -1);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(400, 0);
+      impl.customSnap_(400, 1);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(0, 400);
+
+      impl.showSlide_(4);
+
+      impl.customSnap_(400, -1);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(400, 0);
+      impl.customSnap_(400, 1);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(400, 400);
+    });
+
+    it('should custom snap to the correct slide - special case', async () => {
+      const ampSlideScroll = await getAmpSlideScroll(null, 2);
+      const impl = await ampSlideScroll.getImpl();
+
+      const animateScrollLeftSpy = env.sandbox.spy(impl, 'animateScrollLeft_');
+
+      impl.customSnap_(0, 1);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(0, 400);
+
+      impl.showSlide_(1);
+
+      impl.customSnap_(400, -1);
+      expect(animateScrollLeftSpy).to.have.been.calledWith(400, 0);
+    });
+
+    it('should handle custom elastic scroll', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+
+      const customSnapSpy = env.sandbox
+        .stub(impl, 'customSnap_')
+        .callsFake(() => {
+          return {
+            then: (cb) => {
+              cb();
+            },
+          };
+        });
+
+      impl.handleCustomElasticScroll_(-10);
+      expect(impl.elasticScrollState_).to.equal(-1);
+      impl.previousScrollLeft_ = -10;
+      impl.handleCustomElasticScroll_(-5);
+      expect(customSnapSpy).to.have.been.calledWith(-5);
+
+      impl.previousScrollLeft_ = null;
+
+      impl.handleCustomElasticScroll_(410);
+      expect(impl.elasticScrollState_).to.equal(1);
+      impl.previousScrollLeft_ = 410;
+      impl.handleCustomElasticScroll_(405);
+      expect(customSnapSpy).to.have.been.calledWith(405);
+    });
+
+    it('should not elastic scroll on iOS scrolling', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+      impl.isIos_ = true;
+
+      const customSnapSpy = env.sandbox.spy(impl, 'handleCustomElasticScroll_');
+
+      impl.scrollHandler_();
+      expect(customSnapSpy).to.not.be.called;
+    });
+
+    it('should not elastic scroll on Safari scrolling', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+      impl.isSafari_ = true;
+
+      const customSnapSpy = env.sandbox.spy(impl, 'handleCustomElasticScroll_');
+
+      impl.scrollHandler_();
+      expect(customSnapSpy).to.not.be.called;
+    });
+
+    it('should handle layout measures (orientation changes)', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+
+      resizeObserverStub.notifySync({
+        target: ampSlideScroll,
+        contentRect: {width: 200, height: 400},
+      });
+      expect(impl.slideWidth_).to.equal(200);
+
+      // Show the first slide, make sure the scroll position is correct.
+      impl.showSlide_(1);
+      expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(200);
+
+      // Now do a layout measure letting the component know it changed size.
+      resizeObserverStub.notifySync({
+        target: ampSlideScroll,
+        contentRect: {width: 400, height: 200},
+      });
+      expect(impl.slideWidth_).to.equal(400);
+      expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(200);
+
+      // Make sure the scroll position is correct after layoutCallback.
+      await impl.unlayoutCallback(); // cannot call layoutCallback() twice without an unlayout in between.
+      await impl.layoutCallback();
+      impl.showSlide_(1);
+      expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(400);
+    });
+
+    it('should relayout the current slide on layoutCallback', async () => {
+      const ampSlideScroll = await getAmpSlideScroll();
+      const impl = await ampSlideScroll.getImpl();
+
+      const owners = Services.ownersForDoc(impl.element);
+      const scheduleLayoutSpy_ = env.sandbox.spy(owners, 'scheduleLayout');
+      impl.slideIndex_ = null;
+      await impl.unlayoutCallback(); // cannot call layoutCallback() twice without an unlayout in between.
+      impl.layoutCallback();
+      expect(scheduleLayoutSpy_).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[0]
+      );
+
+      impl.showSlide_(1);
+      await impl.unlayoutCallback(); // cannot call layoutCallback() twice without an unlayout in between.
+      impl.layoutCallback();
+      expect(scheduleLayoutSpy_).to.have.been.calledWith(
+        impl.element,
+        impl.slides_[1]
+      );
+    });
+
+    describe('Looping', () => {
+      it('should create container and wrappers and show initial slides', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true);
+        const impl = await ampSlideScroll.getImpl();
+
+        expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be
+          .true;
+        expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
+          .true;
+        expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
+          .true;
+      });
+
+      // TODO(#17197): This test triggers sinonjs/sinon issues 1709 and 1321.
+      it.skip('should show the correct slides when looping', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true);
+        const impl = await ampSlideScroll.getImpl();
+
         const owners = Services.ownersForDoc(impl.element);
-        const updateInViewportSpy = env.sandbox.spy(owners, 'updateInViewport');
         const scheduleLayoutSpy = env.sandbox.spy(owners, 'scheduleLayout');
         const schedulePreloadSpy = env.sandbox.spy(owners, 'schedulePreload');
         const hideRestOfTheSlidesSpy = env.sandbox.spy(
@@ -161,44 +735,13 @@ describes.realWin(
           'hideRestOfTheSlides_'
         );
         const setControlsStateSpy = env.sandbox.spy(impl, 'setControlsState');
-        const analyticsEventSpy = env.sandbox.spy(impl, 'analyticsEvent_');
-
-        expect(impl.showSlide_(-1)).to.be.false;
-        expect(updateInViewportSpy).to.not.have.been.called;
-        expect(scheduleLayoutSpy).to.not.have.been.called;
-        expect(schedulePreloadSpy).to.not.have.been.called;
-        expect(hideRestOfTheSlidesSpy).to.not.have.been.called;
-        expect(setControlsStateSpy).to.not.have.been.called;
-        expect(analyticsEventSpy).to.not.have.been.called;
-
-        expect(impl.showSlide_(5)).to.be.false;
-        expect(updateInViewportSpy).to.not.have.been.called;
-        expect(scheduleLayoutSpy).to.not.have.been.called;
-        expect(schedulePreloadSpy).to.not.have.been.called;
-        expect(hideRestOfTheSlidesSpy).to.not.have.been.called;
-        expect(setControlsStateSpy).to.not.have.been.called;
-        expect(analyticsEventSpy).to.not.have.been.called;
-
-        expect(impl.showSlide_(impl.slideIndex_)).to.be.false;
-        expect(updateInViewportSpy).to.not.have.been.called;
-        expect(scheduleLayoutSpy).to.not.have.been.called;
-        expect(schedulePreloadSpy).to.not.have.been.called;
-        expect(hideRestOfTheSlidesSpy).to.not.have.been.called;
-        expect(setControlsStateSpy).to.not.have.been.called;
-        expect(analyticsEventSpy).to.not.have.been.called;
-
-        expect(impl.showSlide_(1)).to.be.true;
-        expect(updateInViewportSpy).to.have.been.calledWith(
-          impl.element,
-          impl.slides_[0],
-          false
-        );
-        expect(updateInViewportSpy).to.have.been.calledWith(
-          impl.element,
-          impl.slides_[1],
-          true
-        );
-        expect(updateInViewportSpy).to.have.callCount(2);
+
+        expect(impl.slides_[4].getAttribute('aria-hidden')).to.equal('true');
+        expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('false');
+        expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('true');
+
+        impl.showSlide_(1);
+
         expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
           .true;
         expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
@@ -226,31 +769,14 @@ describes.realWin(
         expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([0, 1, 2]);
         expect(hideRestOfTheSlidesSpy).to.be.calledOnce;
         expect(setControlsStateSpy).to.be.calledOnce;
-        expect(analyticsEventSpy).to.have.callCount(2);
-        expect(analyticsEventSpy).to.have.been.calledWith('amp-carousel-next', {
-          'fromSlide': 'slide-id',
-          'toSlide': '1',
-        });
-        expect(analyticsEventSpy).to.have.been.calledWith(
-          'amp-carousel-change',
-          {'fromSlide': 'slide-id', 'toSlide': '1'}
-        );
         expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('true');
         expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('false');
         expect(impl.slides_[2].getAttribute('aria-hidden')).to.equal('true');
 
-        expect(impl.showSlide_(0)).to.be.true;
-        expect(updateInViewportSpy).to.have.been.calledWith(
-          impl.element,
-          impl.slides_[1],
-          false
-        );
-        expect(updateInViewportSpy).to.have.been.calledWith(
-          impl.element,
-          impl.slides_[0],
-          true
-        );
-        expect(updateInViewportSpy).to.have.callCount(4);
+        impl.showSlide_(0);
+
+        expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be
+          .true;
         expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
           .true;
         expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
@@ -265,77 +791,162 @@ describes.realWin(
           impl.element,
           impl.slides_[1]
         );
+        expect(schedulePreloadSpy).to.have.been.calledWith(
+          impl.element,
+          impl.slides_[4]
+        );
         expect(scheduleLayoutSpy).to.have.callCount(2);
-        expect(schedulePreloadSpy).to.have.callCount(3);
+        expect(schedulePreloadSpy).to.have.callCount(4);
         expect(impl.slideIndex_).to.equal(0);
-        expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(0);
-        expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([0, 1]);
+        expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(400);
+        expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([4, 0, 1]);
         expect(hideRestOfTheSlidesSpy).to.have.callCount(2);
         expect(setControlsStateSpy).to.have.callCount(2);
-        expect(analyticsEventSpy).to.have.callCount(4);
-        expect(analyticsEventSpy).to.have.been.calledWith('amp-carousel-prev', {
-          'fromSlide': '1',
-          'toSlide': 'slide-id',
-        });
-        expect(analyticsEventSpy).to.have.been.calledWith(
-          'amp-carousel-change',
-          {'fromSlide': '1', 'toSlide': 'slide-id'}
-        );
+        expect(impl.slides_[4].getAttribute('aria-hidden')).to.equal('true');
         expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('false');
         expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('true');
 
-        expect(impl.showSlide_(4)).to.be.true;
-        expect(updateInViewportSpy).to.have.been.calledWith(
-          impl.element,
-          impl.slides_[0],
-          false
-        );
-        expect(updateInViewportSpy).to.have.been.calledWith(
-          impl.element,
-          impl.slides_[4],
-          true
-        );
-        expect(updateInViewportSpy).to.have.callCount(6);
+        impl.showSlide_(4);
+
         expect(impl.slideWrappers_[3].classList.contains(SHOW_CLASS)).to.be
           .true;
         expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be
           .true;
+        expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
+          .true;
         expect(schedulePreloadSpy).to.have.been.calledWith(
           impl.element,
           impl.slides_[3]
         );
+        expect(schedulePreloadSpy).to.have.been.calledWith(
+          impl.element,
+          impl.slides_[0]
+        );
         expect(scheduleLayoutSpy).to.have.been.calledWith(
           impl.element,
           impl.slides_[4]
         );
         expect(scheduleLayoutSpy).to.have.callCount(3);
-        expect(schedulePreloadSpy).to.have.callCount(4);
+        expect(schedulePreloadSpy).to.have.callCount(6);
         expect(impl.slideIndex_).to.equal(4);
         expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(
           impl.slideWidth_
         );
-        expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([3, 4]);
+        expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([3, 4, 0]);
         expect(hideRestOfTheSlidesSpy).to.have.callCount(3);
         expect(setControlsStateSpy).to.have.callCount(3);
-        expect(analyticsEventSpy).to.have.callCount(6);
-        expect(analyticsEventSpy).to.have.been.calledWith('amp-carousel-prev', {
-          'fromSlide': 'slide-id',
-          'toSlide': '4',
-        });
-        expect(analyticsEventSpy).to.have.been.calledWith(
-          'amp-carousel-change',
-          {'fromSlide': 'slide-id', 'toSlide': '4'}
-        );
         expect(impl.slides_[3].getAttribute('aria-hidden')).to.equal('true');
         expect(impl.slides_[4].getAttribute('aria-hidden')).to.equal('false');
-        expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal(null);
+        expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('true');
+      });
+
+      it('show correct slides when looping with `autoplay` for 2 slides', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true, 2);
+        const impl = await ampSlideScroll.getImpl();
+
+        const owners = Services.ownersForDoc(impl.element);
+        const scheduleLayoutSpy = env.sandbox.spy(owners, 'scheduleLayout');
+        const schedulePreloadSpy = env.sandbox.spy(owners, 'schedulePreload');
+        const hideRestOfTheSlidesSpy = env.sandbox.spy(
+          impl,
+          'hideRestOfTheSlides_'
+        );
+        const setControlsStateSpy = env.sandbox.spy(impl, 'setControlsState');
+
+        expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('false');
+        expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('true');
+
+        impl.showSlide_(1);
+
+        expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
+          .true;
+        expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
+          .true;
+        expect(schedulePreloadSpy).to.have.been.calledWith(
+          impl.element,
+          impl.slides_[0]
+        );
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.slides_[1]
+        );
+        expect(scheduleLayoutSpy).to.be.calledOnce;
+        expect(schedulePreloadSpy).to.have.callCount(1);
+        expect(impl.slideIndex_).to.equal(1);
+        expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(
+          impl.slideWidth_
+        );
+        expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([0, 1]);
+        expect(hideRestOfTheSlidesSpy).to.be.calledOnce;
+        expect(setControlsStateSpy).to.be.calledOnce;
+        expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('true');
+        expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('false');
+
+        impl.showSlide_(0);
+
+        expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
+          .true;
+        expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
+          .true;
+        expect(scheduleLayoutSpy).to.have.been.calledWith(
+          impl.element,
+          impl.slides_[0]
+        );
+        expect(schedulePreloadSpy).to.have.been.calledWith(
+          impl.element,
+          impl.slides_[1]
+        );
+        expect(scheduleLayoutSpy).to.have.callCount(2);
+        expect(schedulePreloadSpy).to.have.callCount(2);
+        expect(impl.slideIndex_).to.equal(0);
+        expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([0, 1]);
+        expect(hideRestOfTheSlidesSpy).to.have.callCount(2);
+        expect(setControlsStateSpy).to.have.callCount(2);
+        expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('false');
+        expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('true');
+      });
+
+      it('do not set `autoplay` status if `autoplay=0` specified', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(false, 3, true, true, 0);
+        const impl = await ampSlideScroll.getImpl();
+        const setupAutoplaySpy = env.sandbox.spy(impl, 'setupAutoplay_');
+        expect(setupAutoplaySpy).to.not.have.been.called;
+      });
+
+      it('removes `autoplay` status after provided loops are made', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(false, 3, true, true, 2);
+        const impl = await ampSlideScroll.getImpl();
+
+        const removeAutoplaySpy = env.sandbox.spy(impl, 'removeAutoplay');
+        impl.showSlide_(1);
+        impl.showSlide_(2);
+        expect(impl.loopsMade_).to.equal(1);
+        impl.showSlide_(0);
+        impl.showSlide_(1);
+        impl.showSlide_(2);
+        expect(impl.loopsMade_).to.equal(2);
+        expect(removeAutoplaySpy).to.have.been.called;
+        expect(ampSlideScroll.hasAttribute('loop')).to.be.false;
       });
-    });
 
-    // TODO(#17197): This test triggers sinonjs/sinon issues 1709 and 1321.
-    it.skip('should hide the unwanted slides', () => {
-      return getAmpSlideScroll().then((ampSlideScroll) => {
-        const impl = ampSlideScroll.implementation_;
+      it('sets the correct scrollLeft for looping carousel', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true, 7, false, true);
+        doc.body.appendChild(ampSlideScroll);
+        await ampSlideScroll.buildInternal();
+        const impl = await ampSlideScroll.getImpl();
+        ampSlideScroll.layoutCallback();
+        expect(impl.slideWidth_).to.not.be.null;
+        expect(impl.slideWidth_).to.be.greaterThan(0);
+
+        // I.e. the scrollContainer is centered (not at 0)
+        expect(impl.slidesContainer_.scrollLeft).to.equal(impl.slideWidth_);
+      });
+
+      // TODO(#17197): This test triggers sinonjs/sinon issues 1709 and 1321.
+      it.skip('should hide unwanted slides when looping', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true);
+        const impl = await ampSlideScroll.getImpl();
+
         const owners = Services.ownersForDoc(impl.element);
         const schedulePauseSpy = env.sandbox.spy(owners, 'schedulePause');
         const hideRestOfTheSlidesSpy = env.sandbox.spy(
@@ -356,6 +967,17 @@ describes.realWin(
           .false;
         expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be
           .false;
+
+        expect(impl.slideWrappers_[0].style.order).to.equal('1');
+        expect(impl.slideWrappers_[1].style.order).to.equal('2');
+        expect(impl.slideWrappers_[2].style.order).to.equal('3');
+        expect(impl.slideWrappers_[3].style.order).to.equal('');
+        expect(impl.slideWrappers_[4].style.order).to.equal('');
+
+        expect(schedulePauseSpy).to.have.been.calledWith(
+          impl.element,
+          impl.slides_[4]
+        );
         expect(schedulePauseSpy).to.have.been.calledWith(
           impl.element,
           impl.slides_[0]
@@ -364,11 +986,12 @@ describes.realWin(
           impl.element,
           impl.slides_[2]
         );
-        expect(schedulePauseSpy).to.have.callCount(2);
+        expect(schedulePauseSpy).to.have.callCount(3);
 
         impl.showSlide_(0);
 
-        expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([0, 1]);
+        expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([4, 0, 1]);
+
         expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
           .true;
         expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
@@ -378,23 +1001,32 @@ describes.realWin(
         expect(impl.slideWrappers_[3].classList.contains(SHOW_CLASS)).to.be
           .false;
         expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be
-          .false;
+          .true;
+        expect(impl.slideWrappers_[0].style.order).to.equal('2');
+        expect(impl.slideWrappers_[1].style.order).to.equal('3');
+        expect(impl.slideWrappers_[2].style.order).to.equal('');
+        expect(impl.slideWrappers_[3].style.order).to.equal('');
+        expect(impl.slideWrappers_[4].style.order).to.equal('1');
         expect(schedulePauseSpy).to.have.been.calledWith(
           impl.element,
-          impl.slides_[1]
+          impl.slides_[2]
         );
         expect(schedulePauseSpy).to.have.been.calledWith(
           impl.element,
-          impl.slides_[2]
+          impl.slides_[4]
+        );
+        expect(schedulePauseSpy).to.have.been.calledWith(
+          impl.element,
+          impl.slides_[1]
         );
-        expect(schedulePauseSpy).to.have.callCount(4);
+        expect(schedulePauseSpy).to.have.callCount(6);
 
         impl.showSlide_(4);
 
-        expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([3, 4]);
+        expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([3, 4, 0]);
 
         expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
-          .false;
+          .true;
         expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
           .false;
         expect(impl.slideWrappers_[2].classList.contains(SHOW_CLASS)).to.be
@@ -403,25 +1035,29 @@ describes.realWin(
           .true;
         expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be
           .true;
+        expect(impl.slideWrappers_[0].style.order).to.equal('3');
+        expect(impl.slideWrappers_[1].style.order).to.equal('');
+        expect(impl.slideWrappers_[2].style.order).to.equal('');
+        expect(impl.slideWrappers_[3].style.order).to.equal('1');
+        expect(impl.slideWrappers_[4].style.order).to.equal('2');
         expect(schedulePauseSpy).to.have.been.calledWith(
           impl.element,
-          impl.slides_[0]
+          impl.slides_[3]
         );
         expect(schedulePauseSpy).to.have.been.calledWith(
           impl.element,
-          impl.slides_[1]
+          impl.slides_[0]
         );
         expect(schedulePauseSpy).to.have.been.calledWith(
           impl.element,
-          impl.slides_[3]
+          impl.slides_[1]
         );
-        expect(schedulePauseSpy).to.have.callCount(7);
+        expect(schedulePauseSpy).to.have.callCount(9);
       });
-    });
 
-    it('should show/hide the correct controls', () => {
-      return getAmpSlideScroll().then((ampSlideScroll) => {
-        const impl = ampSlideScroll.implementation_;
+      it('should show/hide the correct controls when looping', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true);
+        const impl = await ampSlideScroll.getImpl();
 
         impl.showSlide_(1);
         expect(impl.hasNext()).to.be.true;
@@ -431,46 +1067,33 @@ describes.realWin(
 
         impl.showSlide_(0);
         expect(impl.hasNext()).to.be.true;
-        expect(impl.hasPrev()).to.be.false;
+        expect(impl.hasPrev()).to.be.true;
         expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.false;
-        expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.true;
+        expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.false;
 
         impl.showSlide_(4);
-        expect(impl.hasNext()).to.be.false;
+        expect(impl.hasNext()).to.be.true;
         expect(impl.hasPrev()).to.be.true;
-        expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.true;
+        expect(impl.nextButton_.classList.contains('amp-disabled')).to.be.false;
         expect(impl.prevButton_.classList.contains('amp-disabled')).to.be.false;
-
-        // Verify aria roles for the button
-        expect(impl.nextButton_.getAttribute('role')).equal('button');
-        expect(impl.prevButton_.getAttribute('role')).equal('button');
       });
-    });
 
-    it('should set the correct scrollLeft when there is only one slide', () => {
-      return getAmpSlideScroll().then((ampSlideScroll) => {
-        const impl = ampSlideScroll.implementation_;
+      it('should set the correct scrollLeft when there is only one slide', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true, 1);
+        const impl = await ampSlideScroll.getImpl();
 
         impl.noOfSlides_ = 1;
         impl.showSlide_(0);
         expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(0);
       });
-    });
 
-    it('should update to the right slide on scroll', () => {
-      return getAmpSlideScroll().then((ampSlideScroll) => {
-        const impl = ampSlideScroll.implementation_;
+      it('should update to the right slide on scroll', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true);
+        const impl = await ampSlideScroll.getImpl();
+
         const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
 
         impl.vsync_ = {
-          mutatePromise: (cb) => {
-            cb();
-            return {
-              then: (cb2) => {
-                cb2();
-              },
-            };
-          },
           mutate: (cb) => {
             cb();
           },
@@ -486,31 +1109,38 @@ describes.realWin(
         expect(showSlideSpy).to.be.calledWith(0);
         expect(impl.slideIndex_).to.equal(0);
 
-        // Try scrolling Fwd and move to slide 1.
+        // Try scrolling Fwd and move a little fwd to stay in the same slide.
         impl.updateOnScroll_(401);
-        expect(showSlideSpy).to.be.calledWith(1);
-        expect(impl.slideIndex_).to.equal(1);
+        expect(showSlideSpy).to.be.calledWith(0);
+        expect(impl.slideIndex_).to.equal(0);
 
         impl.updateOnScroll_(700);
-        expect(showSlideSpy).to.be.calledWith(2);
-        expect(impl.slideIndex_).to.equal(2);
+        expect(showSlideSpy).to.be.calledWith(1);
+        expect(impl.slideIndex_).to.equal(1);
 
         impl.showSlide_(4);
         impl.updateOnScroll_(700);
+        expect(showSlideSpy).to.be.calledWith(0);
+        expect(impl.slideIndex_).to.equal(0);
+
+        impl.updateOnScroll_(1);
         expect(showSlideSpy).to.be.calledWith(4);
         expect(impl.slideIndex_).to.equal(4);
       });
-    });
 
-    it('should get the correct next slide index for a scrollLeft', () => {
-      return getAmpSlideScroll().then((ampSlideScroll) => {
-        const impl = ampSlideScroll.implementation_;
+      it('should get the correct next slide index for a scrollLeft', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true);
+        const impl = await ampSlideScroll.getImpl();
 
         // Already at slide 0;
-        expect(impl.getNextSlideIndex_(0)).to.equal(0);
-        expect(impl.getNextSlideIndex_(100)).to.equal(0);
-        expect(impl.getNextSlideIndex_(200)).to.equal(1);
-        expect(impl.getNextSlideIndex_(400)).to.equal(1);
+
+        expect(impl.getNextSlideIndex_(0)).to.equal(4);
+        expect(impl.getNextSlideIndex_(100)).to.equal(4);
+        expect(impl.getNextSlideIndex_(200)).to.equal(0);
+        expect(impl.getNextSlideIndex_(400)).to.equal(0);
+        expect(impl.getNextSlideIndex_(500)).to.equal(0);
+        expect(impl.getNextSlideIndex_(600)).to.equal(1);
+        expect(impl.getNextSlideIndex_(800)).to.equal(1);
 
         impl.showSlide_(3);
 
@@ -527,28 +1157,20 @@ describes.realWin(
         expect(impl.getNextSlideIndex_(100)).to.equal(3);
         expect(impl.getNextSlideIndex_(200)).to.equal(4);
         expect(impl.getNextSlideIndex_(400)).to.equal(4);
+        expect(impl.getNextSlideIndex_(500)).to.equal(4);
+        expect(impl.getNextSlideIndex_(600)).to.equal(0);
+        expect(impl.getNextSlideIndex_(800)).to.equal(0);
       });
-    });
 
-    it('should custom snap to the correct slide', () => {
-      return getAmpSlideScroll().then((ampSlideScroll) => {
-        const impl = ampSlideScroll.implementation_;
+      it('should custom snap to the correct slide', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true);
+        const impl = await ampSlideScroll.getImpl();
+
         const animateScrollLeftSpy = env.sandbox.spy(
           impl,
           'animateScrollLeft_'
         );
 
-        impl.customSnap_(0);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(0, 0);
-        impl.customSnap_(100);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(100, 0);
-        impl.customSnap_(200);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(200, 400);
-        impl.customSnap_(400);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(400, 400);
-
-        impl.showSlide_(3);
-
         impl.customSnap_(0);
         expect(animateScrollLeftSpy).to.have.been.calledWith(0, 0);
         impl.customSnap_(100);
@@ -564,864 +1186,241 @@ describes.realWin(
         impl.customSnap_(800);
         expect(animateScrollLeftSpy).to.have.been.calledWith(800, 800);
 
-        impl.showSlide_(4);
-
-        impl.customSnap_(0);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(0, 0);
-        impl.customSnap_(100);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(100, 0);
-        impl.customSnap_(200);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(200, 400);
-        impl.customSnap_(400);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(400, 400);
-
-        impl.showSlide_(0);
-
-        impl.customSnap_(0, -1);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(0, 0);
-        impl.customSnap_(0, 1);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(0, 400);
-
-        impl.showSlide_(3);
-
-        impl.customSnap_(400, -1);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(400, 0);
-        impl.customSnap_(400, 1);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(0, 400);
-
-        impl.showSlide_(4);
-
         impl.customSnap_(400, -1);
         expect(animateScrollLeftSpy).to.have.been.calledWith(400, 0);
         impl.customSnap_(400, 1);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(400, 400);
+        expect(animateScrollLeftSpy).to.have.been.calledWith(400, 800);
       });
-    });
 
-    it('should custom snap to the correct slide - special case', () => {
-      return getAmpSlideScroll(null, 2).then((ampSlideScroll) => {
-        const impl = ampSlideScroll.implementation_;
-        const animateScrollLeftSpy = env.sandbox.spy(
-          impl,
-          'animateScrollLeft_'
-        );
+      it('should go to the correct slide on button click', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true);
+        const impl = await ampSlideScroll.getImpl();
 
-        impl.customSnap_(0, 1);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(0, 400);
+        const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
 
-        impl.showSlide_(1);
+        impl.goCallback(-1);
+        expect(showSlideSpy).to.have.been.calledWith(4);
+        expect(showSlideSpy).to.be.calledOnce;
 
-        impl.customSnap_(400, -1);
-        expect(animateScrollLeftSpy).to.have.been.calledWith(400, 0);
-      });
-    });
+        impl.goCallback(1);
+        expect(showSlideSpy).to.have.been.calledWith(0);
+        expect(showSlideSpy).to.have.callCount(2);
 
-    it('should handle custom elastic scroll', () => {
-      return getAmpSlideScroll().then((ampSlideScroll) => {
-        const impl = ampSlideScroll.implementation_;
-        const customSnapSpy = env.sandbox
-          .stub(impl, 'customSnap_')
-          .callsFake(() => {
-            return {
-              then: (cb) => {
-                cb();
-              },
-            };
-          });
-
-        impl.handleCustomElasticScroll_(-10);
-        expect(impl.elasticScrollState_).to.equal(-1);
-        impl.previousScrollLeft_ = -10;
-        impl.handleCustomElasticScroll_(-5);
-        expect(customSnapSpy).to.have.been.calledWith(-5);
-
-        impl.previousScrollLeft_ = null;
-
-        impl.handleCustomElasticScroll_(410);
-        expect(impl.elasticScrollState_).to.equal(1);
-        impl.previousScrollLeft_ = 410;
-        impl.handleCustomElasticScroll_(405);
-        expect(customSnapSpy).to.have.been.calledWith(405);
+        impl.goCallback(1);
+        expect(showSlideSpy).to.have.been.calledWith(1);
+        expect(showSlideSpy).to.have.callCount(3);
       });
-    });
-
-    it('should handle layout measures (orientation changes)', async () => {
-      const ampSlideScroll = await getAmpSlideScroll();
-      const getLayoutWidthStub = env.sandbox.stub(
-        ampSlideScroll,
-        'getLayoutWidth'
-      );
-      const impl = ampSlideScroll.implementation_;
-
-      getLayoutWidthStub.returns(200);
-      impl.onLayoutMeasure();
-      expect(getLayoutWidthStub).to.have.been.calledOnce;
-      expect(impl.slideWidth_).to.equal(200);
-
-      // Show the first slide, make sure the scroll position is correct.
-      impl.showSlide_(1);
-      expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(200);
 
-      // Now do a layout measure letting the component know it changed size.
-      getLayoutWidthStub.returns(400);
-      impl.onLayoutMeasure();
-      expect(getLayoutWidthStub).to.have.callCount(2);
-      expect(impl.slideWidth_).to.equal(400);
-      expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(200);
+      // TODO(#17197): This test triggers sinonjs/sinon issues 1709 and 1321.
+      it.skip('should update slide when `slide` attribute is mutated', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true);
+        const impl = await ampSlideScroll.getImpl();
+        expectAsyncConsoleError(/Invalid \[slide\] value:/, 1);
 
-      // Make sure the scroll position is correct after layoutCallback.
-      await impl.layoutCallback();
-      expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(400);
-    });
+        const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
 
-    it('should relayout the current slide on layoutCallback', () => {
-      return getAmpSlideScroll().then((ampSlideScroll) => {
-        const impl = ampSlideScroll.implementation_;
-        const owners = Services.ownersForDoc(impl.element);
-        const scheduleLayoutSpy_ = env.sandbox.spy(owners, 'scheduleLayout');
-        impl.slideIndex_ = null;
-        impl.layoutCallback();
-        expect(scheduleLayoutSpy_).to.have.been.calledWith(
-          impl.element,
-          impl.slides_[0]
-        );
+        impl.mutatedAttributesCallback({slide: 2});
+        expect(showSlideSpy).to.have.been.calledWith(2);
 
-        impl.showSlide_(1);
-        impl.layoutCallback();
-        expect(scheduleLayoutSpy_).to.have.been.calledWith(
-          impl.element,
-          impl.slides_[1]
-        );
-      });
-    });
+        impl.mutatedAttributesCallback({slide: 0});
+        expect(showSlideSpy).to.have.been.calledWith(0);
 
-    describe('Looping', () => {
-      it('should create container and wrappers and show initial slides', () => {
-        return getAmpSlideScroll(true).then((ampSlideScroll) => {
-          const impl = ampSlideScroll.implementation_;
-          expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
-            .true;
-        });
+        // Don't call showSlide_() if slide is not finite.
+        showSlideSpy.resetHistory();
+        impl.mutatedAttributesCallback({slide: Number.POSITIVE_INFINITY});
+        expect(showSlideSpy.called).to.be.false;
       });
 
-      // TODO(#17197): This test triggers sinonjs/sinon issues 1709 and 1321.
-      it.skip('should show the correct slides when looping', () => {
-        return getAmpSlideScroll(true).then((ampSlideScroll) => {
-          const impl = ampSlideScroll.implementation_;
-          const owners = Services.ownersForDoc(impl.element);
-          const updateInViewportSpy = env.sandbox.spy(
-            owners,
-            'updateInViewport'
-          );
-          const scheduleLayoutSpy = env.sandbox.spy(owners, 'scheduleLayout');
-          const schedulePreloadSpy = env.sandbox.spy(owners, 'schedulePreload');
-          const hideRestOfTheSlidesSpy = env.sandbox.spy(
-            impl,
-            'hideRestOfTheSlides_'
-          );
-          const setControlsStateSpy = env.sandbox.spy(impl, 'setControlsState');
+      it('should trigger `slideChange` action when user changes slides', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true);
+        const impl = await ampSlideScroll.getImpl();
 
-          expect(impl.slides_[4].getAttribute('aria-hidden')).to.equal('true');
-          expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('false');
-          expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('true');
+        const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
 
-          impl.showSlide_(1);
+        impl.goCallback(-1, /* animate */ false);
+        expect(triggerSpy).to.have.been.calledWith(
+          ampSlideScroll,
+          'slideChange',
+          /* CustomEvent */ env.sandbox.match.has('detail', {index: 4}),
+          ActionTrust.HIGH
+        );
 
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[0],
-            false
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[1],
-            true
-          );
-          expect(updateInViewportSpy).to.have.callCount(2);
-          expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[2].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[0]
-          );
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[1]
-          );
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[2]
-          );
-          expect(scheduleLayoutSpy).to.be.calledOnce;
-          expect(schedulePreloadSpy).to.have.callCount(2);
-          expect(impl.slideIndex_).to.equal(1);
-          expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(
-            impl.slideWidth_
-          );
-          expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([0, 1, 2]);
-          expect(hideRestOfTheSlidesSpy).to.be.calledOnce;
-          expect(setControlsStateSpy).to.be.calledOnce;
-          expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('true');
-          expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('false');
-          expect(impl.slides_[2].getAttribute('aria-hidden')).to.equal('true');
-
-          impl.showSlide_(0);
-
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.slides_[1],
-            false
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.slides_[0],
-            true
-          );
-          expect(updateInViewportSpy).to.have.callCount(4);
-          expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[2].classList.contains(SHOW_CLASS)).to.be
-            .false;
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[0]
-          );
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[1]
-          );
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[4]
-          );
-          expect(scheduleLayoutSpy).to.have.callCount(2);
-          expect(schedulePreloadSpy).to.have.callCount(4);
-          expect(impl.slideIndex_).to.equal(0);
-          expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(400);
-          expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([4, 0, 1]);
-          expect(hideRestOfTheSlidesSpy).to.have.callCount(2);
-          expect(setControlsStateSpy).to.have.callCount(2);
-          expect(impl.slides_[4].getAttribute('aria-hidden')).to.equal('true');
-          expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('false');
-          expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('true');
-
-          impl.showSlide_(4);
-
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[0],
-            false
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[4],
-            true
-          );
-          expect(updateInViewportSpy).to.have.callCount(6);
-          expect(impl.slideWrappers_[3].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[3]
-          );
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[0]
-          );
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[4]
-          );
-          expect(scheduleLayoutSpy).to.have.callCount(3);
-          expect(schedulePreloadSpy).to.have.callCount(6);
-          expect(impl.slideIndex_).to.equal(4);
-          expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(
-            impl.slideWidth_
-          );
-          expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([3, 4, 0]);
-          expect(hideRestOfTheSlidesSpy).to.have.callCount(3);
-          expect(setControlsStateSpy).to.have.callCount(3);
-          expect(impl.slides_[3].getAttribute('aria-hidden')).to.equal('true');
-          expect(impl.slides_[4].getAttribute('aria-hidden')).to.equal('false');
-          expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('true');
-        });
+        impl.goCallback(1, /* animate */ false);
+        expect(triggerSpy).to.have.been.calledWith(
+          ampSlideScroll,
+          'slideChange',
+          /* CustomEvent */ env.sandbox.match.has('detail', {index: 0}),
+          ActionTrust.HIGH
+        );
       });
 
-      it('show correct slides when looping with `autoplay` for 2 slides', () => {
-        return getAmpSlideScroll(true, 2).then((ampSlideScroll) => {
-          const impl = ampSlideScroll.implementation_;
-          const owners = Services.ownersForDoc(impl.element);
-          const updateInViewportSpy = env.sandbox.spy(
-            owners,
-            'updateInViewport'
-          );
-          const scheduleLayoutSpy = env.sandbox.spy(owners, 'scheduleLayout');
-          const schedulePreloadSpy = env.sandbox.spy(owners, 'schedulePreload');
-          const hideRestOfTheSlidesSpy = env.sandbox.spy(
-            impl,
-            'hideRestOfTheSlides_'
-          );
-          const setControlsStateSpy = env.sandbox.spy(impl, 'setControlsState');
+      it('should fire `slideChange` DOM event with high trust when user changes slides', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true);
+        const impl = await ampSlideScroll.getImpl();
 
-          expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('false');
-          expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('true');
+        let event;
+        win.document.addEventListener('slideChange', (e) => (event = e));
 
-          impl.showSlide_(1);
-
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[0],
-            false
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[1],
-            true
-          );
-          expect(updateInViewportSpy).to.have.callCount(2);
-          expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[0]
-          );
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[1]
-          );
-          expect(scheduleLayoutSpy).to.be.calledOnce;
-          expect(schedulePreloadSpy).to.have.callCount(1);
-          expect(impl.slideIndex_).to.equal(1);
-          expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(
-            impl.slideWidth_
-          );
-          expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([0, 1]);
-          expect(hideRestOfTheSlidesSpy).to.be.calledOnce;
-          expect(setControlsStateSpy).to.be.calledOnce;
-          expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('true');
-          expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('false');
-
-          impl.showSlide_(0);
-
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[1],
-            false
-          );
-          expect(updateInViewportSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[0],
-            true
-          );
-          expect(updateInViewportSpy).to.have.callCount(4);
-          expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(scheduleLayoutSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[0]
-          );
-          expect(schedulePreloadSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[1]
-          );
-          expect(scheduleLayoutSpy).to.have.callCount(2);
-          expect(schedulePreloadSpy).to.have.callCount(2);
-          expect(impl.slideIndex_).to.equal(0);
-          expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([0, 1]);
-          expect(hideRestOfTheSlidesSpy).to.have.callCount(2);
-          expect(setControlsStateSpy).to.have.callCount(2);
-          expect(impl.slides_[0].getAttribute('aria-hidden')).to.equal('false');
-          expect(impl.slides_[1].getAttribute('aria-hidden')).to.equal('true');
-        });
-      });
+        impl.goCallback(-1, /* animate */ false);
+        expect(win.document.eventListeners.count('slideChange')).to.equal(1);
+        expect(event.data.index).to.equal(4);
+        expect(event.data.actionTrust).to.equal(ActionTrust.HIGH);
 
-      it('do not set `autoplay` status if `autoplay=0` specified', () => {
-        return getAmpSlideScroll(false, 3, true, true, 0).then(
-          (ampSlideScroll) => {
-            const impl = ampSlideScroll.implementation_;
-            const setupAutoplaySpy = env.sandbox.spy(impl, 'setupAutoplay_');
-            expect(setupAutoplaySpy).to.not.have.been.called;
-          }
-        );
+        impl.goCallback(1, /* animate */ false);
+        expect(win.document.eventListeners.count('slideChange')).to.equal(1);
+        expect(event.data.index).to.equal(0);
+        expect(event.data.actionTrust).to.equal(ActionTrust.HIGH);
       });
 
-      it('removes `autoplay` status after provided loops are made', () => {
-        return getAmpSlideScroll(false, 3, true, true, 2).then(
-          (ampSlideScroll) => {
-            const impl = ampSlideScroll.implementation_;
-            const removeAutoplaySpy = env.sandbox.spy(impl, 'removeAutoplay');
-            impl.showSlide_(1);
-            impl.showSlide_(2);
-            expect(impl.loopsMade_).to.equal(1);
-            impl.showSlide_(0);
-            impl.showSlide_(1);
-            impl.showSlide_(2);
-            expect(impl.loopsMade_).to.equal(2);
-            expect(removeAutoplaySpy).to.have.been.called;
-            expect(ampSlideScroll.hasAttribute('loop')).to.be.false;
-          }
-        );
-      });
+      it('should goToSlide on action', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true);
+        const impl = await ampSlideScroll.getImpl();
 
-      // TODO(#17197): This test triggers sinonjs/sinon issues 1709 and 1321.
-      it.skip('should hide unwanted slides when looping', () => {
-        return getAmpSlideScroll(true).then((ampSlideScroll) => {
-          const impl = ampSlideScroll.implementation_;
-          const owners = Services.ownersForDoc(impl.element);
-          const schedulePauseSpy = env.sandbox.spy(owners, 'schedulePause');
-          const hideRestOfTheSlidesSpy = env.sandbox.spy(
-            impl,
-            'hideRestOfTheSlides_'
-          );
+        expectAsyncConsoleError(/Invalid \[slide\] value:/, 4);
 
-          impl.showSlide_(1);
-
-          expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([0, 1, 2]);
-          expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[2].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[3].classList.contains(SHOW_CLASS)).to.be
-            .false;
-          expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be
-            .false;
-
-          expect(impl.slideWrappers_[0].style.order).to.equal('1');
-          expect(impl.slideWrappers_[1].style.order).to.equal('2');
-          expect(impl.slideWrappers_[2].style.order).to.equal('3');
-          expect(impl.slideWrappers_[3].style.order).to.equal('');
-          expect(impl.slideWrappers_[4].style.order).to.equal('');
-
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[4]
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[0]
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[2]
-          );
-          expect(schedulePauseSpy).to.have.callCount(3);
-
-          impl.showSlide_(0);
-
-          expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([4, 0, 1]);
-
-          expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[2].classList.contains(SHOW_CLASS)).to.be
-            .false;
-          expect(impl.slideWrappers_[3].classList.contains(SHOW_CLASS)).to.be
-            .false;
-          expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[0].style.order).to.equal('2');
-          expect(impl.slideWrappers_[1].style.order).to.equal('3');
-          expect(impl.slideWrappers_[2].style.order).to.equal('');
-          expect(impl.slideWrappers_[3].style.order).to.equal('');
-          expect(impl.slideWrappers_[4].style.order).to.equal('1');
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[2]
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[4]
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[1]
-          );
-          expect(schedulePauseSpy).to.have.callCount(6);
-
-          impl.showSlide_(4);
-
-          expect(hideRestOfTheSlidesSpy).to.have.been.calledWith([3, 4, 0]);
-
-          expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[1].classList.contains(SHOW_CLASS)).to.be
-            .false;
-          expect(impl.slideWrappers_[2].classList.contains(SHOW_CLASS)).to.be
-            .false;
-          expect(impl.slideWrappers_[3].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[4].classList.contains(SHOW_CLASS)).to.be
-            .true;
-          expect(impl.slideWrappers_[0].style.order).to.equal('3');
-          expect(impl.slideWrappers_[1].style.order).to.equal('');
-          expect(impl.slideWrappers_[2].style.order).to.equal('');
-          expect(impl.slideWrappers_[3].style.order).to.equal('1');
-          expect(impl.slideWrappers_[4].style.order).to.equal('2');
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[3]
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[0]
-          );
-          expect(schedulePauseSpy).to.have.been.calledWith(
-            impl.element,
-            impl.slides_[1]
-          );
-          expect(schedulePauseSpy).to.have.callCount(9);
-        });
-      });
+        const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
+        const satisfiesTrust = () => true;
 
-      it('should show/hide the correct controls when looping', () => {
-        return getAmpSlideScroll(true).then((ampSlideScroll) => {
-          const impl = ampSlideScroll.implementation_;
-
-          impl.showSlide_(1);
-          expect(impl.hasNext()).to.be.true;
-          expect(impl.hasPrev()).to.be.true;
-          expect(impl.nextButton_.classList.contains('amp-disabled')).to.be
-            .false;
-          expect(impl.prevButton_.classList.contains('amp-disabled')).to.be
-            .false;
-
-          impl.showSlide_(0);
-          expect(impl.hasNext()).to.be.true;
-          expect(impl.hasPrev()).to.be.true;
-          expect(impl.nextButton_.classList.contains('amp-disabled')).to.be
-            .false;
-          expect(impl.prevButton_.classList.contains('amp-disabled')).to.be
-            .false;
-
-          impl.showSlide_(4);
-          expect(impl.hasNext()).to.be.true;
-          expect(impl.hasPrev()).to.be.true;
-          expect(impl.nextButton_.classList.contains('amp-disabled')).to.be
-            .false;
-          expect(impl.prevButton_.classList.contains('amp-disabled')).to.be
-            .false;
-        });
-      });
+        let args = {'index': '123'};
+        impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
+        expect(showSlideSpy).to.not.have.been.called;
 
-      it('should set the correct scrollLeft when there is only one slide', () => {
-        return getAmpSlideScroll(true, 1).then((ampSlideScroll) => {
-          const impl = ampSlideScroll.implementation_;
+        args = {'index': '5'};
+        impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
+        expect(showSlideSpy).to.not.have.been.called;
 
-          impl.noOfSlides_ = 1;
-          impl.showSlide_(0);
-          expect(impl.slidesContainer_./*OK*/ scrollLeft).to.equal(0);
-        });
-      });
+        args = {'index': 'ssds11'};
+        impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
+        expect(showSlideSpy).to.not.have.been.called;
 
-      it('should update to the right slide on scroll', () => {
-        return getAmpSlideScroll(true).then((ampSlideScroll) => {
-          const impl = ampSlideScroll.implementation_;
-          const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
+        args = {'index': '-1'};
+        impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
+        expect(showSlideSpy).to.not.have.been.called;
 
-          impl.vsync_ = {
-            mutate: (cb) => {
-              cb();
-            },
-          };
+        args = {'index': '0'};
+        impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
+        expect(showSlideSpy).to.have.been.calledWith(0);
 
-          // Move to slide 1 (from slide 0).
-          impl.showSlide_(1);
-          expect(showSlideSpy).to.be.calledWith(1);
-          expect(impl.snappingInProgress_).to.be.false;
-
-          //Move to slide 0 - via scrolling back.
-          impl.updateOnScroll_(1);
-          expect(showSlideSpy).to.be.calledWith(0);
-          expect(impl.slideIndex_).to.equal(0);
-
-          // Try scrolling Fwd and move a little fwd to stay in the same slide.
-          impl.updateOnScroll_(401);
-          expect(showSlideSpy).to.be.calledWith(0);
-          expect(impl.slideIndex_).to.equal(0);
-
-          impl.updateOnScroll_(700);
-          expect(showSlideSpy).to.be.calledWith(1);
-          expect(impl.slideIndex_).to.equal(1);
-
-          impl.showSlide_(4);
-          impl.updateOnScroll_(700);
-          expect(showSlideSpy).to.be.calledWith(0);
-          expect(impl.slideIndex_).to.equal(0);
-
-          impl.updateOnScroll_(1);
-          expect(showSlideSpy).to.be.calledWith(4);
-          expect(impl.slideIndex_).to.equal(4);
-        });
+        args = {'index': '4'};
+        impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
+        expect(showSlideSpy).to.have.been.calledWith(4);
       });
 
-      it('should get the correct next slide index for a scrollLeft', () => {
-        return getAmpSlideScroll(true).then((ampSlideScroll) => {
-          const impl = ampSlideScroll.implementation_;
-
-          // Already at slide 0;
-
-          expect(impl.getNextSlideIndex_(0)).to.equal(4);
-          expect(impl.getNextSlideIndex_(100)).to.equal(4);
-          expect(impl.getNextSlideIndex_(200)).to.equal(0);
-          expect(impl.getNextSlideIndex_(400)).to.equal(0);
-          expect(impl.getNextSlideIndex_(500)).to.equal(0);
-          expect(impl.getNextSlideIndex_(600)).to.equal(1);
-          expect(impl.getNextSlideIndex_(800)).to.equal(1);
-
-          impl.showSlide_(3);
-
-          expect(impl.getNextSlideIndex_(0)).to.equal(2);
-          expect(impl.getNextSlideIndex_(100)).to.equal(2);
-          expect(impl.getNextSlideIndex_(200)).to.equal(3);
-          expect(impl.getNextSlideIndex_(400)).to.equal(3);
-          expect(impl.getNextSlideIndex_(500)).to.equal(3);
-          expect(impl.getNextSlideIndex_(600)).to.equal(4);
-          expect(impl.getNextSlideIndex_(800)).to.equal(4);
-
-          impl.showSlide_(4);
-          expect(impl.getNextSlideIndex_(0)).to.equal(3);
-          expect(impl.getNextSlideIndex_(100)).to.equal(3);
-          expect(impl.getNextSlideIndex_(200)).to.equal(4);
-          expect(impl.getNextSlideIndex_(400)).to.equal(4);
-          expect(impl.getNextSlideIndex_(500)).to.equal(4);
-          expect(impl.getNextSlideIndex_(600)).to.equal(0);
-          expect(impl.getNextSlideIndex_(800)).to.equal(0);
-        });
-      });
+      it('should handle carousel snapping & hiding race', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(true);
+        const impl = await ampSlideScroll.getImpl();
 
-      it('should custom snap to the correct slide', () => {
-        return getAmpSlideScroll(true).then((ampSlideScroll) => {
-          const impl = ampSlideScroll.implementation_;
-          const animateScrollLeftSpy = env.sandbox.spy(
-            impl,
-            'animateScrollLeft_'
-          );
+        // simluate carousel hidding
+        impl.slideWidth_ = 0;
 
-          impl.customSnap_(0);
-          expect(animateScrollLeftSpy).to.have.been.calledWith(0, 0);
-          impl.customSnap_(100);
-          expect(animateScrollLeftSpy).to.have.been.calledWith(100, 0);
-          impl.customSnap_(200);
-          expect(animateScrollLeftSpy).to.have.been.calledWith(200, 400);
-          impl.customSnap_(400);
-          expect(animateScrollLeftSpy).to.have.been.calledWith(400, 400);
-          impl.customSnap_(500);
-          expect(animateScrollLeftSpy).to.have.been.calledWith(500, 400);
-          impl.customSnap_(600);
-          expect(animateScrollLeftSpy).to.have.been.calledWith(600, 800);
-          impl.customSnap_(800);
-          expect(animateScrollLeftSpy).to.have.been.calledWith(800, 800);
-
-          impl.customSnap_(400, -1);
-          expect(animateScrollLeftSpy).to.have.been.calledWith(400, 0);
-          impl.customSnap_(400, 1);
-          expect(animateScrollLeftSpy).to.have.been.calledWith(400, 800);
-        });
+        // simulate snapping
+        expect(impl.getNextSlideIndex_(0)).to.equal(0);
       });
 
-      it('should go to the correct slide on button click', () => {
-        return getAmpSlideScroll(true).then((ampSlideScroll) => {
-          const impl = ampSlideScroll.implementation_;
-          const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
-
-          impl.goCallback(-1);
-          expect(showSlideSpy).to.have.been.calledWith(4);
-          expect(showSlideSpy).to.be.calledOnce;
-
-          impl.goCallback(1);
-          expect(showSlideSpy).to.have.been.calledWith(0);
-          expect(showSlideSpy).to.have.callCount(2);
+      it('should NOT call showSlide_ before layout', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(
+          true,
+          5,
+          /* opt_attachToDom */ false
+        );
 
-          impl.goCallback(1);
-          expect(showSlideSpy).to.have.been.calledWith(1);
-          expect(showSlideSpy).to.have.callCount(3);
-        });
-      });
+        // Layout happens asynchronously after attaching to DOM, so we can
+        // test pre-layoutCallback logic now.
+        doc.body.appendChild(ampSlideScroll);
+        await ampSlideScroll.buildInternal();
 
-      // TODO(#17197): This test triggers sinonjs/sinon issues 1709 and 1321.
-      it.skip('should update slide when `slide` attribute is mutated', () => {
-        return getAmpSlideScroll(true).then((ampSlideScroll) => {
-          expectAsyncConsoleError(/Invalid \[slide\] value:/, 1);
+        const impl = await ampSlideScroll.getImpl();
+        const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
+        const satisfiesTrust = () => true;
 
-          const impl = ampSlideScroll.implementation_;
-          const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
+        const args = {'index': '3'};
+        impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
+        expect(showSlideSpy).to.not.have.been.called;
 
-          impl.mutatedAttributesCallback({slide: 2});
-          expect(showSlideSpy).to.have.been.calledWith(2);
+        impl.mutatedAttributesCallback({slide: 2});
+        expect(showSlideSpy).to.not.have.been.called;
 
-          impl.mutatedAttributesCallback({slide: 0});
-          expect(showSlideSpy).to.have.been.calledWith(0);
+        ampSlideScroll.layoutCallback();
 
-          // Don't call showSlide_() if slide is not finite.
-          showSlideSpy.resetHistory();
-          impl.mutatedAttributesCallback({slide: Number.POSITIVE_INFINITY});
-          expect(showSlideSpy.called).to.be.false;
-        });
+        // Should show the last slide index requested before layout.
+        expect(showSlideSpy).to.have.been.calledWith(2);
+        expect(showSlideSpy).to.be.calledOnce;
       });
 
-      it('should trigger `slideChange` action when user changes slides', () => {
-        return getAmpSlideScroll(true).then((ampSlideScroll) => {
-          const impl = ampSlideScroll.implementation_;
-          const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
-
-          impl.goCallback(-1, /* animate */ false);
-          expect(triggerSpy).to.have.been.calledWith(
-            ampSlideScroll,
-            'slideChange',
-            /* CustomEvent */ env.sandbox.match.has('detail', {index: 4}),
-            ActionTrust.HIGH
-          );
+      it('should NOT call showSlide_ before re-layout', async () => {
+        const ampSlideScroll = await getAmpSlideScroll(false, 5, false);
+        doc.body.appendChild(ampSlideScroll);
+        await ampSlideScroll.buildInternal();
 
-          impl.goCallback(1, /* animate */ false);
-          expect(triggerSpy).to.have.been.calledWith(
-            ampSlideScroll,
-            'slideChange',
-            /* CustomEvent */ env.sandbox.match.has('detail', {index: 0}),
-            ActionTrust.HIGH
-          );
-        });
-      });
+        const impl = await ampSlideScroll.getImpl();
+        const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
+        const satisfiesTrust = () => true;
 
-      it('should fire `slideChange` DOM event with high trust when user changes slides', () => {
-        return getAmpSlideScroll(true).then((ampSlideScroll) => {
-          let event;
-          win.document.addEventListener('slideChange', (e) => (event = e));
-          const impl = ampSlideScroll.implementation_;
-
-          impl.goCallback(-1, /* animate */ false);
-          expect(win.document.eventListeners.count('slideChange')).to.equal(1);
-          expect(event.data.index).to.equal(4);
-          expect(event.data.actionTrust).to.equal(ActionTrust.HIGH);
-
-          impl.goCallback(1, /* animate */ false);
-          expect(win.document.eventListeners.count('slideChange')).to.equal(1);
-          expect(event.data.index).to.equal(0);
-          expect(event.data.actionTrust).to.equal(ActionTrust.HIGH);
-        });
-      });
+        // Test that showSlide_ due to goToSlide(index=1) is not called before
+        // layout.
+        let args = {'index': '1'};
+        impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
+        expect(showSlideSpy).to.not.have.been.called;
 
-      it('should goToSlide on action', () => {
-        return getAmpSlideScroll(true).then((ampSlideScroll) => {
-          expectAsyncConsoleError(/Invalid \[slide\] value:/, 4);
+        // Test that showSlide_ is called after layout.
+        ampSlideScroll.layoutCallback();
 
-          const impl = ampSlideScroll.implementation_;
-          const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
-          const satisfiesTrust = () => true;
+        expect(showSlideSpy).to.have.been.calledWith(1);
+        expect(showSlideSpy).to.be.calledOnce;
 
-          let args = {'index': '123'};
-          impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
-          expect(showSlideSpy).to.not.have.been.called;
+        // Unlayout
+        showSlideSpy.resetHistory();
+        impl.unlayoutCallback();
 
-          args = {'index': '5'};
-          impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
-          expect(showSlideSpy).to.not.have.been.called;
+        // Test that showSlide_ due to goToSlide(index=4) is not called before
+        // layout.
+        args = {'index': '4'};
+        impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
+        expect(showSlideSpy).to.not.have.been.called;
 
-          args = {'index': 'ssds11'};
-          impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
-          expect(showSlideSpy).to.not.have.been.called;
+        // Test that showSlide_ is called after layout.
+        ampSlideScroll.layoutCallback();
 
-          args = {'index': '-1'};
-          impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
-          expect(showSlideSpy).to.not.have.been.called;
+        expect(showSlideSpy).to.have.been.calledWith(4);
+        expect(showSlideSpy).to.be.calledOnce;
+      });
+    });
 
-          args = {'index': '0'};
-          impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
-          expect(showSlideSpy).to.have.been.calledWith(0);
+    describe('Snap Styling', () => {
+      let platform;
 
-          args = {'index': '4'};
-          impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
-          expect(showSlideSpy).to.have.been.calledWith(4);
-        });
+      beforeEach(() => {
+        platform = Services.platformFor(win);
       });
 
-      it('should NOT call showSlide_ before layout', () => {
-        const promise = getAmpSlideScroll(true, 5, /* opt_attachToDom */ false);
-        return promise.then((ampSlideScroll) => {
-          // Layout happens asynchronously after attaching to DOM, so we can
-          // test pre-layoutCallback logic now.
-          doc.body.appendChild(ampSlideScroll);
-          return ampSlideScroll.build().then(() => {
-            const impl = ampSlideScroll.implementation_;
-            const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
-            const satisfiesTrust = () => true;
-
-            const args = {'index': '3'};
-            impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
-            expect(showSlideSpy).to.not.have.been.called;
-
-            impl.mutatedAttributesCallback({slide: 2});
-            expect(showSlideSpy).to.not.have.been.called;
-
-            impl.onLayoutMeasure();
-            ampSlideScroll.layoutCallback();
-
-            // Should show the last slide index requested before layout.
-            expect(showSlideSpy).to.have.been.calledWith(2);
-            expect(showSlideSpy).to.be.calledOnce;
-          });
-        });
+      it('should add disabled CSS snap class for iOS 10.3', async () => {
+        env.sandbox.stub(platform, 'isIos').returns(true);
+        env.sandbox.stub(platform, 'getIosVersionString').returns('10.3');
+        const el = await getAmpSlideScroll(false, 3);
+        const slidesContainer = el.querySelector('.i-amphtml-slides-container');
+        expect(
+          slidesContainer.classList.contains('i-amphtml-slidescroll-no-snap')
+        ).to.be.true;
       });
 
-      it('should NOT call showSlide_ before re-layout', () => {
-        return getAmpSlideScroll(false, 5, false).then((ampSlideScroll) => {
-          doc.body.appendChild(ampSlideScroll);
-          return ampSlideScroll.build().then(() => {
-            const impl = ampSlideScroll.implementation_;
-            const showSlideSpy = env.sandbox.spy(impl, 'showSlide_');
-            const satisfiesTrust = () => true;
-
-            // Test that showSlide_ due to goToSlide(index=1) is not called before
-            // layout.
-            let args = {'index': '1'};
-            impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
-            expect(showSlideSpy).to.not.have.been.called;
-
-            // Test that showSlide_ is called after layout.
-            impl.onLayoutMeasure();
-            ampSlideScroll.layoutCallback();
-
-            expect(showSlideSpy).to.have.been.calledWith(1);
-            expect(showSlideSpy).to.be.calledOnce;
-
-            // Unlayout
-            showSlideSpy.resetHistory();
-            impl.unlayoutCallback();
-
-            // Test that showSlide_ due to goToSlide(index=4) is not called before
-            // layout.
-            args = {'index': '4'};
-            impl.executeAction({method: 'goToSlide', args, satisfiesTrust});
-            expect(showSlideSpy).to.not.have.been.called;
-
-            // Test that showSlide_ is called after layout.
-            impl.onLayoutMeasure();
-            ampSlideScroll.layoutCallback();
-
-            expect(showSlideSpy).to.have.been.calledWith(4);
-            expect(showSlideSpy).to.be.calledOnce;
-          });
-        });
+      it('shoud not contain disabled snap class for non iOS 10.3', async () => {
+        env.sandbox.stub(platform, 'isIos').returns(true);
+        env.sandbox.stub(platform, 'getIosVersionString').returns('10.4');
+        const el = await getAmpSlideScroll(false, 3);
+        const slidesContainer = el.querySelector('.i-amphtml-slides-container');
+        expect(
+          slidesContainer.classList.contains('i-amphtml-slidescroll-no-snap')
+        ).to.be.false;
+      });
+
+      it('shoud add disabled CSS snap class for for non iOS', async () => {
+        env.sandbox.stub(platform, 'isIos').returns(false);
+        env.sandbox.stub(platform, 'getIosVersionString').returns('10.4');
+        const el = await getAmpSlideScroll(false, 3);
+        const slidesContainer = el.querySelector('.i-amphtml-slides-container');
+        expect(
+          slidesContainer.classList.contains('i-amphtml-slidescroll-no-snap')
+        ).to.be.true;
       });
     });
 
@@ -1447,9 +1446,10 @@ describes.realWin(
           expect(getNextTitle(el)).to.equal('Next item in carousel (2 of 3)');
         });
 
-        it('should have the correct values on the last index', function* () {
-          const el = yield getAmpSlideScroll(false, 3);
-          el.implementation_.showSlide_(2);
+        it('should have the correct values on the last index', async () => {
+          const el = await getAmpSlideScroll(false, 3);
+          const impl = await el.getImpl();
+          impl.showSlide_(2);
           expect(getPrevTitle(el)).to.equal(
             'Previous item in carousel (2 of 3)'
           );
@@ -1466,9 +1466,10 @@ describes.realWin(
           expect(getNextTitle(el)).to.equal('Next item in carousel (2 of 3)');
         });
 
-        it('should have the correct values on the last index', function* () {
-          const el = yield getAmpSlideScroll(true, 3);
-          el.implementation_.showSlide_(2);
+        it('should have the correct values on the last index', async () => {
+          const el = await getAmpSlideScroll(true, 3);
+          const impl = await el.getImpl();
+          impl.showSlide_(2);
           expect(getPrevTitle(el)).to.equal(
             'Previous item in carousel (2 of 3)'
           );
@@ -1476,7 +1477,18 @@ describes.realWin(
         });
       });
     });
+  }
+);
 
+describes.realWin(
+  'SlideScroll with runtimeOn',
+  {
+    amp: {
+      extensions: ['amp-carousel'],
+      runtimeOn: true,
+    },
+  },
+  (env) => {
     it('should allow default actions in email documents', async () => {
       env.win.document.documentElement.setAttribute('amp4email', '');
       const action = new ActionService(env.ampdoc, env.win.document);
diff --git a/extensions/amp-carousel/0.2/amp-carousel.css b/extensions/amp-carousel/0.2/amp-carousel.css
index ba8ad8b1c216a..bd40e1225bb0a 100644
--- a/extensions/amp-carousel/0.2/amp-carousel.css
+++ b/extensions/amp-carousel/0.2/amp-carousel.css
@@ -44,6 +44,10 @@ amp-carousel:not([type="slides"]) .i-amphtml-carousel-content {
   margin-inline-end: 0;
 }
 
+.amp-scrollable-carousel-slide.i-amphtml-layout-responsive {
+  width: 100%
+}
+
 .amp-scrollable-carousel-slide:first-child {
   margin-left: 0px;
   margin-inline-start: 0;
@@ -93,11 +97,20 @@ amp-carousel:not([type="slides"]) .i-amphtml-carousel-content {
   pointer-events: all;
 }
 
+.amp-carousel-button:focus {
+  border: 1px black solid;
+  outline: 1px white solid;
+}
+
 .amp-carousel-button.amp-disabled {
   animation: none;
-  opacity: 0;
-  visibility: hidden;
   pointer-events: none;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 1px;
 }
 
 .amp-carousel-button-prev {
@@ -129,4 +142,3 @@ amp-carousel:not([type="slides"]) .i-amphtml-carousel-content {
    */
   object-fit: contain;
 }
-
diff --git a/extensions/amp-carousel/0.2/amp-carousel.js b/extensions/amp-carousel/0.2/amp-carousel.js
index e829c34e32708..b5c12cc41afe7 100644
--- a/extensions/amp-carousel/0.2/amp-carousel.js
+++ b/extensions/amp-carousel/0.2/amp-carousel.js
@@ -15,17 +15,20 @@
  */
 
 import {ActionSource} from '../../amp-base-carousel/0.1/action-source';
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {CSS} from '../../../build/amp-carousel-0.2.css';
 import {Carousel} from '../../amp-base-carousel/0.1/carousel.js';
 import {CarouselEvents} from '../../amp-base-carousel/0.1/carousel-events';
 import {ChildLayoutManager} from '../../amp-base-carousel/0.1/child-layout-manager';
 import {Services} from '../../../src/services';
-import {closestAncestorElementBySelector} from '../../../src/dom';
+import {
+  closestAncestorElementBySelector,
+  dispatchCustomEvent,
+} from '../../../src/dom';
 import {computedStyle} from '../../../src/style';
-import {createCustomEvent, getDetail} from '../../../src/event-helper';
+import {createCustomEvent, getDetail, listen} from '../../../src/event-helper';
 import {dev, devAssert, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {htmlFor} from '../../../src/static-template';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
@@ -39,6 +42,11 @@ const CarouselType = {
 };
 
 class AmpCarousel extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /**
    * @private
    */
@@ -115,6 +123,15 @@ class AmpCarousel extends AMP.BaseElement {
 
     /** @private {?ChildLayoutManager} */
     this.childLayoutManager_ = null;
+
+    /**
+     * Whether to show control buttons
+     * @private {boolean}
+     */
+    this.showControls_ = false;
+
+    /** If the ampdoc is in the Viewer */
+    this.isViewerEmbeded_ = Services.viewerForDoc(element).isEmbedded();
   }
 
   /** @override */
@@ -122,11 +139,6 @@ class AmpCarousel extends AMP.BaseElement {
     return isLayoutSizeDefined(layout);
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   buildCallback() {
     this.action_ = Services.actionServiceForDoc(this.element);
@@ -145,7 +157,7 @@ class AmpCarousel extends AMP.BaseElement {
       win,
       element,
       scrollContainer: dev().assertElement(this.scrollContainer_),
-      initialIndex: Number(this.element.getAttribute('slide')),
+      initialIndex: Number(this.element.getAttribute('slide') || '0'),
       runMutate: (cb) => this.mutateElement(cb),
     });
     this.configureCarousel_(slides);
@@ -166,6 +178,7 @@ class AmpCarousel extends AMP.BaseElement {
     );
     this.prevButton_.addEventListener('click', () => this.interactionPrev());
     this.nextButton_.addEventListener('click', () => this.interactionNext());
+    this.handlePropagationInViewer_();
 
     const owners = Services.ownersForDoc(element);
     this.childLayoutManager_ = new ChildLayoutManager({
@@ -193,6 +206,18 @@ class AmpCarousel extends AMP.BaseElement {
     // Need to wait for slides to exist first.
     this.carousel_.goToSlide(Number(this.element.getAttribute('slide') || '0'));
     // Signal for runtime to check children for layout.
+
+    if (this.element.hasAttribute('controls')) {
+      this.showControls_ = true;
+    } else {
+      Services.inputFor(this.win).onMouseDetected((mouseDetected) => {
+        if (mouseDetected) {
+          this.showControls_ = true;
+          this.updateUi_();
+        }
+      }, true);
+    }
+
     return this.mutateElement(() => {});
   }
 
@@ -470,17 +495,18 @@ class AmpCarousel extends AMP.BaseElement {
    */
   updateUi_() {
     const index = this.carousel_.getCurrentIndex();
-    const bothDisabled =
-      this.hadTouch_ && !this.element.hasAttribute('controls');
+    const bothDisabled = this.hadTouch_ && !this.showControls_;
     const prevDisabled = bothDisabled || this.carousel_.isAtStart();
     const nextDisabled = bothDisabled || this.carousel_.isAtEnd();
 
     this.prevButton_.classList.toggle('amp-disabled', prevDisabled);
     this.prevButton_.setAttribute('aria-disabled', prevDisabled);
     this.prevButton_.title = this.getPrevButtonTitle_(index);
+    this.prevButton_.tabIndex = prevDisabled ? -1 : 0;
     this.nextButton_.classList.toggle('amp-disabled', nextDisabled);
     this.nextButton_.setAttribute('aria-disabled', nextDisabled);
     this.nextButton_.title = this.getNextButtonTitle_(index);
+    this.nextButton_.tabIndex = nextDisabled ? -1 : 0;
   }
 
   /**
@@ -508,7 +534,10 @@ class AmpCarousel extends AMP.BaseElement {
 
       if (isSlides) {
         const wrapper = document.createElement('div');
-        wrapper.className = 'i-amphtml-carousel-slotted';
+        wrapper.classList.add(
+          'i-amphtml-carousel-slotted',
+          'i-amphtml-carousel-wrapper'
+        );
         wrapper.appendChild(slide);
         return wrapper;
       }
@@ -544,10 +573,11 @@ class AmpCarousel extends AMP.BaseElement {
     const name = 'slideChange';
     const isHighTrust = this.isHighTrustActionSource_(actionSource);
     const trust = isHighTrust ? ActionTrust.HIGH : ActionTrust.LOW;
+    const dataWithActionTrust = dict({'index': index, 'actionTrust': trust});
 
     const action = createCustomEvent(this.win, `slidescroll.${name}`, data);
     this.action_.trigger(this.element, name, action, trust);
-    this.element.dispatchCustomEvent(name, data);
+    dispatchCustomEvent(this.element, name, dataWithActionTrust);
     this.triggerAnalyticsEvent_(prevIndex, index);
   }
 
@@ -606,6 +636,19 @@ class AmpCarousel extends AMP.BaseElement {
     );
   }
 
+  /**
+   * Attach singal onto touchmove event to stop propagation to viewer
+   * to be handled at the viewer integration layer in bubble phase.
+   */
+  handlePropagationInViewer_() {
+    if (!this.isViewerEmbeded_) {
+      return;
+    }
+    listen(this.scrollContainer_, 'touchmove', (event) => {
+      event.shouldViewerCancelPropagation = true;
+    });
+  }
+
   /**
    * Toggles the current autoplay state, or forces it if the enable
    *  argument is given.
diff --git a/extensions/amp-carousel/0.2/test/test-e2e/helpers.js b/extensions/amp-carousel/0.2/test/test-e2e/helpers.js
new file mode 100644
index 0000000000000..a0dfff251bc6b
--- /dev/null
+++ b/extensions/amp-carousel/0.2/test/test-e2e/helpers.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2020 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.
+ */
+
+const TAG_NAME = 'amp-carousel';
+const SCROLLABLE_SLIDE = 'amp-scrollable-carousel-slide';
+const NEXT_ARROW_SELECTOR = `.amp-carousel-button.amp-carousel-button-next`;
+
+export function getSlides(controller) {
+  return controller.findElements(`${TAG_NAME} .${SCROLLABLE_SLIDE}`);
+}
+
+export async function getSlide(controller, n) {
+  const slides = await getSlides(controller);
+  return slides[n];
+}
+
+export function getNextArrow(controller) {
+  return controller.findElement(NEXT_ARROW_SELECTOR);
+}
+
+export function sleep(ms) {
+  return new Promise((res) => setTimeout(res, ms));
+}
diff --git a/extensions/amp-carousel/0.2/test/test-e2e/test-arrows-in-lightbox.js b/extensions/amp-carousel/0.2/test/test-e2e/test-arrows-in-lightbox.js
new file mode 100644
index 0000000000000..bd70e524abd53
--- /dev/null
+++ b/extensions/amp-carousel/0.2/test/test-e2e/test-arrows-in-lightbox.js
@@ -0,0 +1,86 @@
+/**
+ * Copyright 2021 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.
+ */
+
+describes.endtoend(
+  'amp carousel:0.2 in lightbox',
+  {
+    fixture: 'amp-carousel/0.2/amp-lightbox-carousel-selector.amp.html',
+    environments: ['single'],
+  },
+  async (env) => {
+    let controller;
+    let nextArrow;
+    let prevArrow;
+
+    function getPrevArrow() {
+      return controller.findElement(
+        '.amp-carousel-button.amp-carousel-button-prev'
+      );
+    }
+
+    function getNextArrow() {
+      return controller.findElement(
+        '.amp-carousel-button.amp-carousel-button-next'
+      );
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    it('should open with both arrows', async () => {
+      // Click on image 2
+      const secondImage = await controller.findElement('#second');
+      await controller.click(secondImage);
+
+      // Wait for lightbox to load the carousel and image
+      const lightbox = await controller.findElement('#lightbox1');
+      await expect(await controller.getElementProperty(lightbox, 'style')).to
+        .not.be.null;
+
+      // Both arrows should be showing
+      prevArrow = await getPrevArrow(controller);
+      nextArrow = await getNextArrow(controller);
+      await expect(
+        await controller.getElementProperty(nextArrow, 'ariaDisabled')
+      ).to.equal('false');
+      await expect(
+        await controller.getElementProperty(prevArrow, 'ariaDisabled')
+      ).to.equal('false');
+    });
+
+    it('should open with one arrow', async () => {
+      // Click on last image
+      const lastImage = await controller.findElement('#fourth');
+      await controller.click(lastImage);
+
+      // Wait for lightbox to load the carousel and image
+      const lightbox = await controller.findElement('#lightbox1');
+      await expect(await controller.getElementProperty(lightbox, 'style')).to
+        .not.be.null;
+
+      // Only prev arrow should be showing since non-looping carousel is on the last slide.
+      prevArrow = await getPrevArrow(controller);
+      nextArrow = await getNextArrow(controller);
+      await expect(
+        await controller.getElementProperty(nextArrow, 'ariaDisabled')
+      ).to.equal('true');
+      await expect(
+        await controller.getElementProperty(prevArrow, 'ariaDisabled')
+      ).to.equal('false');
+    });
+  }
+);
diff --git a/extensions/amp-carousel/0.2/test/test-e2e/test-repsonsive-slides.js b/extensions/amp-carousel/0.2/test/test-e2e/test-repsonsive-slides.js
new file mode 100644
index 0000000000000..01a04e602115c
--- /dev/null
+++ b/extensions/amp-carousel/0.2/test/test-e2e/test-repsonsive-slides.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {getNextArrow, getSlides, sleep} from './helpers';
+
+describes.endtoend(
+  'AMP carousel 0.2 with responsive slides',
+  {
+    fixture: 'amp-carousel/0.2/responsive-slides.amp.html',
+    experiments: ['amp-carousel'],
+    environments: ['single'],
+  },
+  async function (env) {
+    let controller;
+
+    function rect(el) {
+      return controller.getElementRect(el);
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    it('layout properly and show images', async () => {
+      const slides = await getSlides(controller);
+      let slideRect = await rect(slides[0]);
+      const nextArrow = await getNextArrow(controller);
+
+      // Check the size of the image
+      await expect(slideRect['width']).to.be.greaterThan(0);
+      await expect(slideRect['height']).to.be.greaterThan(0);
+
+      await controller.click(nextArrow);
+      await sleep(1000);
+      slideRect = await rect(slides[1]);
+
+      // Check the size of the new image
+      await expect(slideRect['width']).to.be.greaterThan(0);
+      await expect(slideRect['height']).to.be.greaterThan(0);
+    });
+  }
+);
diff --git a/extensions/amp-carousel/0.2/test/test-type-slides.js b/extensions/amp-carousel/0.2/test/test-type-slides.js
index d57ece711208a..b1acb1634baf2 100644
--- a/extensions/amp-carousel/0.2/test/test-type-slides.js
+++ b/extensions/amp-carousel/0.2/test/test-type-slides.js
@@ -15,8 +15,10 @@
  */
 
 import '../amp-carousel';
-import {ActionTrust} from '../../../../src/action-constants';
+import * as Listen from '../../../../src/event-helper';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
 import {CarouselEvents} from '../../../amp-base-carousel/0.1/carousel-events';
+import {Services} from '../../../../src/services';
 import {getDetail, listenOncePromise} from '../../../../src/event-helper';
 
 /**
@@ -27,13 +29,14 @@ import {getDetail, listenOncePromise} from '../../../../src/event-helper';
 
 /**
  * @param {!Element} el
- * @param {number=} index An intex to wait for.
+ * @param {number=} index An index to wait for.
  * @return {!Promise<undefined>}
  */
 async function afterIndexUpdate(el, index) {
   const event = await listenOncePromise(el, CarouselEvents.INDEX_CHANGE);
-  await el.implementation_.mutateElement(() => {});
-  await el.implementation_.mutateElement(() => {});
+  const impl = await el.getImpl(false);
+  await impl.mutateElement(() => {});
+  await impl.mutateElement(() => {});
 
   if (index != undefined && getDetail(event)['index'] != index) {
     return afterIndexUpdate(el, index);
@@ -62,6 +65,13 @@ function getSlideWrappers(el) {
   );
 }
 
+function isScreenReaderHidden(element) {
+  const computedStyle = getComputedStyle(element);
+  return (
+    computedStyle.visibility === 'hidden' || computedStyle.display === 'none'
+  );
+}
+
 describes.realWin(
   'amp-carousel-0.2 type slides',
   {
@@ -88,9 +98,9 @@ describes.realWin(
     });
 
     async function getCarousel({
+      dir = null,
       loop = false,
       slideCount = 5,
-      dir = null,
     } = {}) {
       const imgUrl =
         'https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-' +
@@ -122,7 +132,7 @@ describes.realWin(
       }
 
       container.appendChild(carousel);
-      await carousel.build();
+      await carousel.buildInternal();
       carousel.updateLayoutBox({
         top: 0,
         left: 0,
@@ -156,6 +166,55 @@ describes.realWin(
       expect(slideWrappers[1].getAttribute('aria-hidden')).to.equal('true');
     });
 
+    it('should style snap for container and content correctly', async () => {
+      const carousel = await getCarousel({loop: true});
+      const slideWrappers = getSlideWrappers(carousel);
+      expect(slideWrappers.length).to.equal(5);
+
+      const slides = carousel.querySelector(
+        '.i-amphtml-carousel-scroll'
+      ).children;
+
+      // Ensure that the spacers have the snap property and not the
+      // slides.
+      for (let i = 0; i < slides.length; i++) {
+        const slide = slides[i];
+        if (slide.classList.contains('i-amphtml-carousel-spacer')) {
+          // type=slides is always center alignment.
+          expect(slide.style.scrollSnapAlign).to.equal('center');
+        } else {
+          expect(slide.style.scrollSnapAlign).to.equal('');
+          expect(slide.children[0].style.scrollSnapAlign).to.equal('');
+        }
+      }
+    });
+
+    it('should show focus outline and border on next and prev buttons', async () => {
+      const carousel = await getCarousel({loop: false});
+      const impl = await carousel.getImpl();
+
+      impl.interactionNext();
+      await afterIndexUpdate(carousel);
+
+      impl.prevButton_.focus();
+      expect(doc.activeElement).to.equal(impl.prevButton_);
+      expect(win.getComputedStyle(impl.prevButton_).outline).to.equal(
+        'rgb(255, 255, 255) solid 1px'
+      );
+      expect(win.getComputedStyle(impl.prevButton_).border).to.equal(
+        '1px solid rgb(0, 0, 0)'
+      );
+
+      impl.nextButton_.focus();
+      expect(doc.activeElement).to.equal(impl.nextButton_);
+      expect(win.getComputedStyle(impl.nextButton_).outline).to.equal(
+        'rgb(255, 255, 255) solid 1px'
+      );
+      expect(win.getComputedStyle(impl.nextButton_).border).to.equal(
+        '1px solid rgb(0, 0, 0)'
+      );
+    });
+
     describe('loop', () => {
       it('should go to the correct slide clicking next', async () => {
         const carousel = await getCarousel({loop: true});
@@ -191,14 +250,38 @@ describes.realWin(
 
       it('should disable the next button when at the end', async () => {
         const carousel = await getCarousel({loop: false});
+        const impl = await carousel.getImpl();
 
-        carousel.implementation_.goToSlide(4);
+        impl.goToSlide(4);
         await afterIndexUpdate(carousel);
 
         expect(getNextButton(carousel).getAttribute('aria-disabled')).to.equal(
           'true'
         );
       });
+
+      it('should correctly style controls; focusable but not visible', async () => {
+        const carousel = await getCarousel({loop: false});
+        const impl = await carousel.getImpl();
+
+        getNextButton(carousel).focus();
+        impl.goToSlide(4);
+        await afterIndexUpdate(carousel);
+        expect(getNextButton(carousel).getAttribute('tabIndex')).to.equal('-1');
+        expect(getPrevButton(carousel).getAttribute('tabIndex')).to.equal('0');
+        expect(isScreenReaderHidden(getPrevButton(carousel))).to.be.false;
+        expect(isScreenReaderHidden(getNextButton(carousel))).to.be.false;
+        expect(doc.activeElement).to.equal(getNextButton(carousel));
+
+        getPrevButton(carousel).focus();
+        impl.goToSlide(0);
+        await afterIndexUpdate(carousel);
+        expect(getNextButton(carousel).getAttribute('tabIndex')).to.equal('0');
+        expect(getPrevButton(carousel).getAttribute('tabIndex')).to.equal('-1');
+        expect(isScreenReaderHidden(getPrevButton(carousel))).to.be.false;
+        expect(isScreenReaderHidden(getNextButton(carousel))).to.be.false;
+        expect(doc.activeElement).to.equal(getPrevButton(carousel));
+      });
     });
 
     describe('slideChange event', () => {
@@ -210,22 +293,27 @@ describes.realWin(
         expect(eventSpy).to.have.not.been.called;
       });
 
-      it('should dispatch when changing slides', async () => {
-        const eventSpy = env.sandbox.spy();
-        container.addEventListener('slideChange', eventSpy);
+      it('should dispatch event with index and actionTrust when changing slides', async () => {
+        let event;
+        container.addEventListener('slideChange', (e) => {
+          expect(event).to.be.undefined;
+          event = e;
+        });
         const carousel = await getCarousel({loop: false});
+        const impl = await carousel.getImpl();
 
-        carousel.implementation_.interactionNext();
+        impl.interactionNext();
         await afterIndexUpdate(carousel);
 
-        expect(eventSpy).to.have.been.calledOnce;
+        expect(event.data.index).to.equal(1);
+        expect(event.data.actionTrust).to.equal(ActionTrust.HIGH);
       });
     });
 
     describe('goToSlide action', () => {
       it('should propagate high trust', async () => {
         const carousel = await getCarousel({loop: false});
-        const impl = carousel.implementation_;
+        const impl = await carousel.getImpl();
         const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
 
         impl.executeAction({
@@ -246,7 +334,7 @@ describes.realWin(
 
       it('should propagate low trust', async () => {
         const carousel = await getCarousel({loop: false});
-        const impl = carousel.implementation_;
+        const impl = await carousel.getImpl();
         const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
 
         impl.executeAction({
@@ -267,7 +355,7 @@ describes.realWin(
 
       it('should allow string-valued index', async () => {
         const carousel = await getCarousel({loop: false});
-        const impl = carousel.implementation_;
+        const impl = await carousel.getImpl();
         const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
 
         impl.executeAction({
@@ -288,7 +376,7 @@ describes.realWin(
 
       it('should cause error with invalid index', async () => {
         const carousel = await getCarousel({loop: false});
-        const impl = carousel.implementation_;
+        const impl = await carousel.getImpl();
         const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
 
         try {
@@ -318,12 +406,10 @@ describes.realWin(
 
         const {left: firstLeft} = slideWrappers[0].getBoundingClientRect();
         const {left: secondLeft} = slideWrappers[1].getBoundingClientRect();
-        const {left: nextLeft} = getNextButton(
-          carousel
-        ).getBoundingClientRect();
-        const {left: prevLeft} = getPrevButton(
-          carousel
-        ).getBoundingClientRect();
+        const {left: nextLeft} =
+          getNextButton(carousel).getBoundingClientRect();
+        const {left: prevLeft} =
+          getPrevButton(carousel).getBoundingClientRect();
 
         expect(firstLeft).to.be.greaterThan(secondLeft);
         expect(prevLeft).to.be.greaterThan(nextLeft);
@@ -337,12 +423,10 @@ describes.realWin(
 
         const {left: firstLeft} = slideWrappers[0].getBoundingClientRect();
         const {left: secondLeft} = slideWrappers[1].getBoundingClientRect();
-        const {left: nextLeft} = getNextButton(
-          carousel
-        ).getBoundingClientRect();
-        const {left: prevLeft} = getPrevButton(
-          carousel
-        ).getBoundingClientRect();
+        const {left: nextLeft} =
+          getNextButton(carousel).getBoundingClientRect();
+        const {left: prevLeft} =
+          getPrevButton(carousel).getBoundingClientRect();
 
         expect(firstLeft).to.be.greaterThan(secondLeft);
         expect(prevLeft).to.be.greaterThan(nextLeft);
@@ -356,12 +440,10 @@ describes.realWin(
 
         const {left: firstLeft} = slideWrappers[0].getBoundingClientRect();
         const {left: secondLeft} = slideWrappers[1].getBoundingClientRect();
-        const {left: nextLeft} = getNextButton(
-          carousel
-        ).getBoundingClientRect();
-        const {left: prevLeft} = getPrevButton(
-          carousel
-        ).getBoundingClientRect();
+        const {left: nextLeft} =
+          getNextButton(carousel).getBoundingClientRect();
+        const {left: prevLeft} =
+          getPrevButton(carousel).getBoundingClientRect();
 
         expect(secondLeft).to.be.greaterThan(firstLeft);
         expect(nextLeft).to.be.greaterThan(prevLeft);
@@ -375,12 +457,10 @@ describes.realWin(
 
         const {left: firstLeft} = slideWrappers[0].getBoundingClientRect();
         const {left: secondLeft} = slideWrappers[1].getBoundingClientRect();
-        const {left: nextLeft} = getNextButton(
-          carousel
-        ).getBoundingClientRect();
-        const {left: prevLeft} = getPrevButton(
-          carousel
-        ).getBoundingClientRect();
+        const {left: nextLeft} =
+          getNextButton(carousel).getBoundingClientRect();
+        const {left: prevLeft} =
+          getPrevButton(carousel).getBoundingClientRect();
 
         expect(secondLeft).to.be.greaterThan(firstLeft);
         expect(nextLeft).to.be.greaterThan(prevLeft);
@@ -402,8 +482,9 @@ describes.realWin(
 
         it('should have the correct values on the last index', async () => {
           const carousel = await getCarousel({loop: false, slideCount: 3});
+          const impl = await carousel.getImpl();
 
-          carousel.implementation_.goToSlide(2);
+          impl.goToSlide(2);
           await afterIndexUpdate(carousel);
 
           expect(getPrevTitle(carousel)).to.equal(
@@ -429,8 +510,9 @@ describes.realWin(
 
         it('should have the correct values on the last index', async () => {
           const carousel = await getCarousel({loop: true, slideCount: 3});
+          const impl = await carousel.getImpl();
 
-          carousel.implementation_.goToSlide(2);
+          impl.goToSlide(2);
           await afterIndexUpdate(carousel);
 
           expect(getPrevTitle(carousel)).to.equal(
@@ -442,5 +524,30 @@ describes.realWin(
         });
       });
     });
+
+    describe('event propogation', () => {
+      it('should add touchmove event if in viewer', async () => {
+        env.sandbox.stub(Services, 'viewerForDoc').returns({
+          isEmbedded: () => true,
+        });
+        const listenSpy = env.sandbox.spy(Listen, 'listen');
+        const carousel = await getCarousel({loop: false});
+        const impl = await carousel.getImpl();
+
+        expect(listenSpy.lastCall.args[0]).to.equal(impl.scrollContainer_);
+        expect(listenSpy.lastCall.args[1]).to.equal('touchmove');
+        expect(listenSpy.args.length).to.equal(5);
+      });
+
+      it('should not add touchmove event if not in the viewer', async () => {
+        env.sandbox.stub(Services, 'viewerForDoc').returns({
+          isEmbedded: () => false,
+        });
+        const listenSpy = env.sandbox.spy(Listen, 'listen');
+        await getCarousel({loop: false});
+
+        expect(listenSpy.args.length).to.equal(4);
+      });
+    });
   }
 );
diff --git a/extensions/amp-carousel/0.2/test/validator-amp-carousel-error-msg.out b/extensions/amp-carousel/0.2/test/validator-amp-carousel-error-msg.out
index 1e7c825192143..161b5cb1da254 100644
--- a/extensions/amp-carousel/0.2/test/validator-amp-carousel-error-msg.out
+++ b/extensions/amp-carousel/0.2/test/validator-amp-carousel-error-msg.out
@@ -32,9 +32,9 @@ FAIL
 |    <!-- Invalid: Missing script, test is to see if the error message is OK. -->
 |    <amp-carousel layout=fill></amp-carousel>
 >>   ^~~~~~~~~
-amp-carousel/0.2/test/validator-amp-carousel-error-msg.html:32:2 The tag 'AMP-CAROUSEL' requires including the 'amp-carousel' extension JavaScript. (see https://amp.dev/documentation/components/amp-carousel)
+amp-carousel/0.2/test/validator-amp-carousel-error-msg.html:32:2 The tag 'amp-carousel' requires including the 'amp-carousel' extension JavaScript. (see https://amp.dev/documentation/components/amp-carousel/)
 |    <amp-carousel width="600" height="522" layout="responsive" type="slides" controls></amp-carousel>
 >>   ^~~~~~~~~
-amp-carousel/0.2/test/validator-amp-carousel-error-msg.html:33:2 The tag 'AMP-CAROUSEL' requires including the 'amp-carousel' extension JavaScript. (see https://amp.dev/documentation/components/amp-carousel)
+amp-carousel/0.2/test/validator-amp-carousel-error-msg.html:33:2 The tag 'amp-carousel' requires including the 'amp-carousel' extension JavaScript. (see https://amp.dev/documentation/components/amp-carousel/)
 |  </body>
 |  </html>
diff --git a/extensions/amp-carousel/0.2/test/validator-amp-carousel.out b/extensions/amp-carousel/0.2/test/validator-amp-carousel.out
index 486d2a75e5549..b8442eca3a13a 100644
--- a/extensions/amp-carousel/0.2/test/validator-amp-carousel.out
+++ b/extensions/amp-carousel/0.2/test/validator-amp-carousel.out
@@ -32,7 +32,7 @@ FAIL
 |    <!-- Invalid: Wrong delay attribute usage -->
 |    <amp-carousel layout="fixed" width=500 height=500 autoplay delay>
 >>   ^~~~~~~~~
-amp-carousel/0.2/test/validator-amp-carousel.html:32:2 The attribute 'delay' in tag 'AMP-CAROUSEL' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-carousel)
+amp-carousel/0.2/test/validator-amp-carousel.html:32:2 The attribute 'delay' in tag 'amp-carousel' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-carousel/)
 |    </amp-carousel>
 |    <!-- Valid: Correct delay attribute usage -->
 |    <amp-carousel layout="fixed" width=500 height=500 autoplay delay=5000>
@@ -48,4 +48,4 @@ amp-carousel/0.2/test/validator-amp-carousel.html:32:2 The attribute 'delay' in
 |        [slide]="foo.bar">
 |    </amp-carousel>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-carousel/OWNERS b/extensions/amp-carousel/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-carousel/OWNERS
+++ b/extensions/amp-carousel/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-carousel/amp-carousel.md b/extensions/amp-carousel/amp-carousel.md
index 5bca5381ed157..9cf1cf584caf1 100644
--- a/extensions/amp-carousel/amp-carousel.md
+++ b/extensions/amp-carousel/amp-carousel.md
@@ -25,20 +25,33 @@ limitations under the License.
 
 # amp-carousel
 
-A generic carousel for displaying multiple similar pieces of content along a horizontal axis; meant to be flexible and performant.
+## Usage
 
-## Behavior
+A generic carousel for displaying multiple similar pieces of content along a
+horizontal axis; meant to be flexible and performant.
 
-Each of the `amp-carousel` component’s immediate children is considered an item in the carousel. Each of these nodes may also have arbitrary HTML children.
+Each of the `amp-carousel` component’s immediate children is considered an item
+in the carousel. Each of these nodes may also have arbitrary HTML children.
 
-The carousel consists of an arbitrary number of items, as well as optional navigational arrows to go forward or backwards. For `type="slides"`, the arrows moves one item at a time. For `type="carousel"`, the arrows move one carousel's width forwards or backwards at a time.
+The carousel consists of an arbitrary number of items, as well as optional
+navigational arrows to go forward or backwards. For `type="slides"`, the arrows
+moves one item at a time. For `type="carousel"`, the arrows move one carousel's
+width forwards or backwards at a time.
 
-The carousel advances between items if the user swipes or clicks an optional navigation arrow.
+The carousel advances between items if the user swipes or clicks an optional
+navigation arrow.
 
 [example preview="inline" playground="true" imports="amp-carousel"]
 
 ```html
-<amp-carousel width="450" height="300" layout="responsive" type="slides">
+<amp-carousel
+  width="450"
+  height="300"
+  layout="responsive"
+  type="slides"
+  role="region"
+  aria-label="Basic carousel"
+>
   <amp-img
     src="{{server_for_email}}/static/inline-examples/images/image1.jpg"
     width="450"
@@ -59,11 +72,33 @@ The carousel advances between items if the user swipes or clicks an optional nav
 
 [/example]
 
+### Differences from `<amp-carousel>` 0.1
+
+-   `autoplay` is allowed on `type="carousel"`
+-   `loop` is allowed on `type="carousel"`
+
+#### Migration Notes
+
+-   Update the required script from `amp-carousel-0.1` to `amp-carousel-0.2`.
+-   Ensure any CSS for positioning next/previous arrows is still valid. See the
+    [styling](#styling) for more information on arrow positioning.
+-   Ensure any CSS used to style the carousel is still valid. The internal DOM
+    structure of `<amp-carousel>` 0.2 differs from 0.1, effecting CSS selectors
+    targeting internal elements such as `amp-carousel > div`. Any selectors using
+    the `.amp-class-name` format should still work.
+-   **NOTE**: Support for `amp-carousel-0.1` is limited, with the intent to
+    deprecate in the future.
+
 ### Advancing to a specific slide
 
-Setting a method for the `on` attribute on an element to `tap:carousel-id.goToSlide(index=N)` will, on user tap or click, advance a carousel with the "carousel-id" ID to the slide at index=N (the first slide is at index=0, the second slide is at index=1, and so on).
+Setting a method for the `on` attribute on an element to
+`tap:carousel-id.goToSlide(index=N)` will, on user tap or click, advance a
+carousel with the "carousel-id" ID to the slide at index=N (the first slide is
+at index=0, the second slide is at index=1, and so on).
 
-In the following example, we have a carousel of three images with preview buttons below the carousel. When a user clicks one of the buttons, the corresponding carousel item displays.
+In the following example, we have a carousel of three images with preview
+buttons below the carousel. When a user clicks one of the buttons, the
+corresponding carousel item displays.
 
 [example preview="inline" playground="true" imports="amp-carousel"]
 
@@ -74,6 +109,8 @@ In the following example, we have a carousel of three images with preview button
   height="300"
   layout="responsive"
   type="slides"
+  role="region"
+  aria-label="Carousel with slide previews"
 >
   <amp-img
     src="{{server_for_email}}/static/inline-examples/images/image1.jpg"
@@ -127,61 +164,80 @@ In the following example, we have a carousel of three images with preview button
 
 [/example]
 
+### Accessibility considerations for `amp-carousel`
+
+Autoplaying, and particularly infinitely looping, carousels can be very distracting and confusing for users - especially for users with cognitive impairments. In general, we recommend avoiding autoplaying carousels. While autoplaying carousels stop once the user has interacted with the carousel, consider also adding an explicit "Play/Pause" control.
+
+By default, the `<amp-carousel>` is programmatically identified as a list when rendered (using `role="list"` on the container element, and `role="listitem"` on each item). However, for `<amp-carousel type="slides">`, no specific `role` is currently provided. As a result, it will not be obvious for assistive technology users reading/navigating through a page when they reach a carousel. We recommend including an explicit `role="region"` and a descriptive `aria-label` (either a generic `aria-label="Carousel"` or a more descriptive label such as `aria-label="Latest news items"`) to `<amp-carousel>`.
+
+Currently, an `<amp-carousel type="slides">` carousel is declared as an ARIA live region (using `aria-live="polite"`), meaning that every time a new slide is shown, the entire content of the slide is announced by assistive technologies (such as screen readers). Due to the way carousels are initially rendered, this can also result in the carousel's content being announced in its entirety when a page is loaded. This also means that pages that contain an `autoplay` carousel will continuously announce whenever a slide auto-advances. There is currently no work-around for this issue.
+
 ## Attributes
 
 ### type
 
 Specifies the display type for the carousel items, which can be:
 
-<ul>
-  <li><strong><code>carousel</code></strong> (default): All slides are shown and are scrollable horizontally. Each slide may specify a different width using CSS.</li>
-  <li><strong><code>slides</code></strong>: Shows a single slide at a time, with each slide snapping into place as the user swipes.</li>
-</ul>
+-   carousel (default): All slides are shown and are scrollable horizontally. Each
+    slide may specify a different width using CSS.
+-   slides: Shows a single slide at a time, with each slide snapping into place as
+    the user swipes.
 
 ### controls (optional)
 
-Permanently displays left and right arrows for the user to navigate carousel items on mobile devices. By default, navigational arrows disappear after the user swipes to another slide on mobile.
+Permanently displays left and right arrows for the user to navigate carousel
+items on mobile devices. By default, navigational arrows disappear after the
+user swipes to another slide on mobile.
 
-The visibility of arrows can also be controlled via styling, and a media query can be used to only display arrows at certain screen widths. On desktop, arrows are always displayed unless only a single child is present.
+The visibility of arrows can also be controlled via styling, and a media query
+can be used to only display arrows at certain screen widths. On desktop, arrows
+are always displayed unless only a single child is present.
 
 ### data-next-button-aria-label (optional)
 
-Sets the aria-label for the `amp-carousel-button-next`. If no value is given, the aria-label defaults to 'Next item in carousel'.
+Sets the aria-label for the `amp-carousel-button-next`. If no value is given,
+the aria-label defaults to 'Next item in carousel'.
 
 ### data-prev-button-aria-label (optional)
 
-Sets the aria-label for the `amp-carousel-button-prev`. If no value is given, the aria-label defaults to 'Previous item in carousel'.
+Sets the aria-label for the `amp-carousel-button-prev`. If no value is given,
+the aria-label defaults to 'Previous item in carousel'.
 
 ### data-button-count-format (optional)
 
-A format string that looks like `(%s of %s)`, used as a suffix to the aria-label for `amp-carousel-button-next`/`amp-carousel-button-prev`. This provides information to users using a screen reader on their progress through the carousel. If no value is given, this defaults to `(%s of %s)`.
+A format string that looks like `(%s of %s)`, used as a suffix to the aria-label
+for `amp-carousel-button-next`/`amp-carousel-button-prev`. This provides
+information to users using a screen reader on their progress through the
+carousel. If no value is given, this defaults to `(%s of %s)`.
 
 ### autoplay (optional)
 
-Regularly advances to the next slide without user interaction. If the user manually changes slides, then autoplay is stopped.
+Regularly advances to the next slide without user interaction. If the user
+manually changes slides, then autoplay is stopped.
 
 If present without a value:
 
-<ul>
-  <li>By default, advances a slide in 5000 millisecond intervals (5 seconds); this can be overridden by the `delay` attribute.</li>
-  <li>Requires at least 2 slides for autoplay to occur.</li>
-</ul>
+-   By default, advances a slide in 5000 millisecond intervals (5 seconds); this
+    can be overridden by the `delay` attribute.
+-   Requires at least 2 slides for autoplay to occur.
 
 If present with a value:
 
-<ul>
-  <li>Stops autoplaying after the requisite number of loops are made.</li>
-</ul>
+-   Stops autoplaying after the requisite number of loops are made.
 
 ### delay (optional)
 
-Specifies the duration (in milliseconds) to delay advancing to the next slide when `autoplay` is enabled.
+Specifies the duration (in milliseconds) to delay advancing to the next slide
+when `autoplay` is enabled. Note that the minimum allowed value for delay is
+1000 milliseconds.
 
 ### loop (optional)
 
-Allows the user to advance past the first item or the final item. There must be at least 3 slides for looping to occur.
+Allows the user to advance past the first item or the final item. There must be
+at least 3 slides for looping to occur.
 
-The example below displays a slide carousel with controls, looping, and delayed autoplay.
+The example below displays a slide carousel with controls, looping, and delayed
+autoplay.
 
 [example preview="inline" playground="true" imports="amp-carousel"]
 
@@ -194,7 +250,9 @@ The example below displays a slide carousel with controls, looping, and delayed
   {% if not format=='email'%}  autoplay
   delay="3000"{% endif %}
   data-next-button-aria-label="Go to next slide"
-  data-previous-button-aria-label="Go to previous slide">
+  data-previous-button-aria-label="Go to previous slide"
+  role="region"
+  aria-label="Looping carousel">
   <amp-img src="{{server_for_email}}/static/inline-examples/images/image1.jpg"
     width="450"
     height="300"></amp-img>
@@ -211,22 +269,44 @@ The example below displays a slide carousel with controls, looping, and delayed
 
 ### slide (optional)
 
-Specifies what index should be shown when the carousel is first rendered. This can be updated with [`amp-bind`](https://amp.dev/documentation/components/amp-bind) to change which index is shown.
+Specifies what index should be shown when the carousel is first rendered. This
+can be updated with
+[`amp-bind`](../amp-bind/amp-bind.md) to change which
+index is shown.
 
 ### common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
 
-</table>
+## Actions
+
+### goToSlide(index=INTEGER)
+
+Advances the carousel to a specified slide index.
+
+### toggleAutoplay(toggleOn=true|false)
+
+Toggle the carousel's autoplay status. `toggleOn` is optional.
+
+## Events
+
+### slideChange
+
+Fired when the carousel's current slide changes.
+
+```
+// Slide number.
+Event.index
+```
 
 ## Styling
 
 [filter formats="websites, ads"]
 
-- You may use the `amp-carousel` element selector to style it freely.
-- You may use the `.amp-carousel-slide` class selector to target carousel items.
-- The visual state of an `amp-carousel` button when it's disabled is hidden.
-- By default, `.amp-carousel-button` uses an inlined SVG as the background-image of the buttons. You may override this with your own SVG or image as in the example below.
+-   You may use the `amp-carousel` element selector to style it freely.
+-   You may use the `.amp-carousel-slide` class selector to target carousel items.
+-   The visual state of an `amp-carousel` button when it's disabled is hidden.
+-   By default, `.amp-carousel-button` uses an inlined SVG as the background-image of the buttons. You may override this with your own SVG or image as in the example below.
 
 _Example: Default `.amp-carousel-button` inlined SVG_
 
@@ -246,7 +326,7 @@ _Example: Overriding the default `.amp-carousel-button` inlined SVG_
 
 Note that the SVG content needs to have certain characters, including `<`, `>` and `#` encoded. This can be done using a tool like [SVGO](https://github.com/svg/svgo) or using [`encodeURIComponent`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent).
 
-- You can position the carousel buttons using align-self and/or relative positioning. Note that the carousel arrows are automatically flipped in RTL, so you should not change their flex order.
+-   You can position the carousel buttons using align-self and/or relative positioning. Note that the carousel arrows are automatically flipped in RTL, so you should not change their flex order.
 
 ```css
 .amp-carousel-button-prev {
@@ -260,10 +340,10 @@ Note that the SVG content needs to have certain characters, including `<`, `>` a
 
 [filter formats="email"]
 
-- You may use the `amp-carousel` element selector to style it freely.
-- You may use the `.amp-carousel-slide` class selector to target carousel items.
-- The visual state of an `amp-carousel` button when it's disabled is hidden.
-- By default, `.amp-carousel-button` uses an inlined SVG as the background-image of the buttons. You may override this with your own image. Some email clients may not support SVG.
+-   You may use the `amp-carousel` element selector to style it freely.
+-   You may use the `.amp-carousel-slide` class selector to target carousel items.
+-   The visual state of an `amp-carousel` button when it's disabled is hidden.
+-   By default, `.amp-carousel-button` uses an inlined SVG as the background-image of the buttons. You may override this with your own image. Some email clients may not support SVG.
 
 _Example: Overriding the default `.amp-carousel-button` inlined SVG_
 
@@ -285,17 +365,6 @@ You can position the carousel buttons using align-self and/or relative positioni
 
 [/filter]<!-- formats="email" -->
 
-## Differences from `<amp-carousel>` 0.1
-
-- `autoplay` is allowed on `type="carousel"`
-- `loop` is allowed on `type="carousel"`
-
-### Migration Notes
-
-- Update the required script from `amp-carousel-0.1` to `amp-carousel-0.2`.
-- Ensure any CSS for positioning next/previous arrows is still valid. See the [styling](#styling) for more information on arrow positioning.
-- Ensure any CSS used to style the carousel is still valid. The internal DOM structure of `<amp-carousel>` 0.2 differs from 0.1, effecting CSS selectors targetting internal elements such as `amp-carousel > div`. Any selectors using the `.amp-class-name` format should still work.
-
 ## Validation
 
-See [amp-carousel rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/validator-amp-carousel.protoascii) in the AMP validator specification.
+See [amp-carousel rules](validator-amp-carousel.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-carousel/validator-amp-carousel.protoascii b/extensions/amp-carousel/validator-amp-carousel.protoascii
index f94eefebe5a86..897aad1767af1 100644
--- a/extensions/amp-carousel/validator-amp-carousel.protoascii
+++ b/extensions/amp-carousel/validator-amp-carousel.protoascii
@@ -17,7 +17,6 @@
 tags: {  # amp-carousel
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-carousel"
@@ -86,13 +85,12 @@ tags: {  # <amp-carousel>
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "AMP-CAROUSEL"
   spec_name: "AMP-CAROUSEL"
   requires_extension: "amp-carousel"
   attr_lists: "amp-carousel-common"
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-carousel"
+  spec_url: "https://amp.dev/documentation/components/amp-carousel/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
@@ -115,7 +113,7 @@ tags: {  # <amp-carousel lightbox>
   }
   attr_lists: "amp-carousel-common"
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-carousel"
+  spec_url: "https://amp.dev/documentation/components/amp-carousel/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-connatix-player/0.1/amp-connatix-player.js b/extensions/amp-connatix-player/0.1/amp-connatix-player.js
index 2f5bc663ce1c6..99eb99c145f1c 100644
--- a/extensions/amp-connatix-player/0.1/amp-connatix-player.js
+++ b/extensions/amp-connatix-player/0.1/amp-connatix-player.js
@@ -14,15 +14,63 @@
  * limitations under the License.
  */
 
+import {
+  CONSENT_POLICY_STATE,
+  CONSENT_STRING_TYPE,
+} from '../../../src/core/constants/consent-state';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {addParamsToUrl} from '../../../src/url';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
+import {
+  getConsentMetadata,
+  getConsentPolicyInfo,
+  getConsentPolicySharedData,
+  getConsentPolicyState,
+} from '../../../src/consent';
 import {getData} from '../../../src/event-helper';
 import {isLayoutSizeDefined} from '../../../src/layout';
+import {
+  observeContentSize,
+  unobserveContentSize,
+} from '../../../src/utils/size-observer';
 import {removeElement} from '../../../src/dom';
 import {setIsMediaComponent} from '../../../src/video-interface';
+import {tryParseJson} from '../../../src/core/types/object/json';
 import {userAssert} from '../../../src/log';
 
+/**
+ * @param {!Array<T>} promises
+ * @return {!Promise<!Array<{
+ *  status: string,
+ *  value: (T|undefined),
+ *  reason: *,
+ * }>>}
+ * @template T
+ */
+export function allSettled(promises) {
+  /**
+   * @param {*} value
+   * @return {{status: string, value: *}}
+   */
+  function onFulfilled(value) {
+    return {status: 'fulfilled', value};
+  }
+  /**
+   * @param {*} reason
+   * @return {{status: string, reason: *}}
+   */
+  function onRejected(reason) {
+    return {status: 'rejected', reason};
+  }
+  return Promise.all(
+    promises.map((promise) => {
+      return promise.then(onFulfilled, onRejected);
+    })
+  );
+}
+
 export class AmpConnatixPlayer extends AMP.BaseElement {
   /** @param {!AmpElement} element */
   constructor(element) {
@@ -39,6 +87,17 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
 
     /** @private {?HTMLIFrameElement} */
     this.iframe_ = null;
+
+    /** @private {?Promise} */
+    this.playerReadyPromise_ = null;
+
+    /** @private {?Function} */
+    this.playerReadyResolver_ = null;
+
+    this.onResized_ = this.onResized_.bind(this);
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -47,15 +106,31 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
    * (play/pause etc)
    * @private
    * @param {string} command
+   * @param {Object=} opt_args
    */
-  sendCommand_(command) {
-    if (this.iframe_ && this.iframe_.contentWindow) {
-      // Send message to the player
-      this.iframe_.contentWindow./*OK*/ postMessage(
-        command,
-        this.iframeDomain_
-      );
+  sendCommand_(command, opt_args) {
+    if (!this.playerReadyPromise_) {
+      return;
     }
+
+    this.playerReadyPromise_.then((iframe) => {
+      if (!iframe) {
+        return;
+      }
+
+      if (iframe.contentWindow) {
+        iframe.contentWindow./*OK*/ postMessage(
+          JSON.stringify(
+            dict({
+              'event': 'command',
+              'func': command,
+              'args': opt_args || '',
+            })
+          ),
+          this.iframeDomain_
+        );
+      }
+    });
   }
 
   /**
@@ -71,10 +146,84 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
         // Ignore messages from other iframes.
         return;
       }
-      // Player wants to close because the user interracted on its close button
-      if (getData(e) === 'cnx_close') {
-        this.destroyPlayerFrame_();
-        this.attemptCollapse();
+      const dataString = getData(e);
+      const dataJSON = tryParseJson(dataString);
+
+      if (!dataJSON || dataJSON['event'] !== 'command') {
+        return;
+      }
+
+      switch (dataJSON['func']) {
+        // Player wants to close because the user interacted on its close button
+        case 'cnxClose': {
+          this.destroyPlayerFrame_();
+          this.attemptCollapse();
+          break;
+        }
+        // Player rendered
+        case 'cnxPlayerRendered': {
+          this.playerReadyResolver_(this.iframe_);
+          break;
+        }
+      }
+    });
+  }
+
+  /**
+   * Binds to amp-consent
+   * @private
+   */
+  bindToAmpConsent_() {
+    const consentPolicyId = super.getConsentPolicy() || 'default';
+    const consentPolicyStatePromise = getConsentPolicyState(
+      this.element,
+      consentPolicyId
+    );
+    const consentPolicyInfoPromise = getConsentPolicyInfo(
+      this.element,
+      consentPolicyId
+    );
+    const consentPolicySharedDataPromise = getConsentPolicySharedData(
+      this.element,
+      consentPolicyId
+    );
+    const consentMetadataPromise = getConsentMetadata(
+      this.element,
+      consentPolicyId
+    );
+
+    allSettled([
+      consentPolicyStatePromise,
+      consentPolicyInfoPromise,
+      consentPolicySharedDataPromise,
+      consentMetadataPromise,
+    ]).then((values) => {
+      if (values && values.length === 4) {
+        const consentPolicyState = values[0];
+        const consentPolicyInfo = values[1];
+        const consentPolicySharedData = values[2];
+        const consentMetadata = values[3];
+        const ampConsentInfo = {
+          'consentPolicyStateEnum': CONSENT_POLICY_STATE,
+          'consentStringTypeEnum': CONSENT_STRING_TYPE,
+          'consentPolicyState': {
+            'error': consentPolicyState.reason,
+            'value': consentPolicyState.value,
+          },
+          'rawConsentString': {
+            'error': consentPolicyInfo.reason,
+            'value': consentPolicyInfo.value,
+          },
+          'consentSharedData': {
+            'error': consentPolicySharedData.reason,
+            'value': consentPolicySharedData.value,
+          },
+          'consentMetadata': {
+            'error': consentMetadata.reason,
+            'value': consentMetadata.value,
+          },
+        };
+        this.sendCommand_('ampConsentInfo', ampConsentInfo);
       }
     });
   }
@@ -106,7 +255,10 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
     // Media id is optional
     this.mediaId_ = element.getAttribute('data-media-id') || '';
 
-    this.bindToPlayerCommands_();
+    // will be used by sendCommand in order to send only after the player is rendered
+    const deferred = new Deferred();
+    this.playerReadyPromise_ = deferred.promise;
+    this.playerReadyResolver_ = deferred.resolve;
   }
 
   /**
@@ -122,11 +274,6 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
     );
   }
 
-  /** @override */
-  isLayoutSupported(layout) {
-    return isLayoutSizeDefined(layout);
-  }
-
   /** @override */
   layoutCallback() {
     const {element} = this;
@@ -134,6 +281,7 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
     const urlParams = dict({
       'playerId': this.playerId_ || undefined,
       'mediaId': this.mediaId_ || undefined,
+      'url': Services.documentInfoForDoc(element).sourceUrl,
     });
     const iframeUrl = this.iframeDomain_ + '/amp-embed/index.html';
     const src = addParamsToUrl(iframeUrl, urlParams);
@@ -146,22 +294,58 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
     // applyFillContent so that frame covers the entire component.
     this.applyFillContent(iframe, /* replacedContent */ true);
 
+    // append child iframe for element
     element.appendChild(iframe);
     this.iframe_ = /** @type {HTMLIFrameElement} */ (iframe);
 
-    // Return a load promise for the frame so the runtime knows when the
-    // component is ready.
-    return this.loadPromise(iframe);
+    // bind to player events (playerRendered after we can send commands to player and other)
+    this.bindToPlayerCommands_();
+    // bind to amp consent and send consent info to the iframe content and propagate to player
+    this.bindToAmpConsent_();
+
+    observeContentSize(this.element, this.onResized_);
+    this.pauseHelper_.updatePlaying(true);
+
+    return this.loadPromise(iframe).then(() => this.playerReadyPromise_);
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+
+  /**
+   * @param {!../layout-rect.LayoutSizeDef} size
+   * @private
+   */
+  onResized_({height, width}) {
+    if (!this.iframe_) {
+      return;
+    }
+    this.sendCommand_('ampResize', {'width': width, 'height': height});
   }
 
   /** @override */
   pauseCallback() {
-    this.sendCommand_('pause');
+    if (!this.iframe_) {
+      return;
+    }
+    this.sendCommand_('ampPause');
+    // The player doesn't appear to respect "ampPause" message.
+    this.iframe_.src = this.iframe_.src;
   }
 
   /** @override */
   unlayoutCallback() {
     this.destroyPlayerFrame_();
+
+    const deferred = new Deferred();
+    this.playerReadyPromise_ = deferred.promise;
+    this.playerReadyResolver_ = deferred.resolve;
+
+    unobserveContentSize(this.element, this.onResized_);
+    this.pauseHelper_.updatePlaying(false);
+
     return true;
   }
 }
diff --git a/extensions/amp-connatix-player/0.1/test/test-amp-connatix-player.js b/extensions/amp-connatix-player/0.1/test/test-amp-connatix-player.js
index 4d9d3f1d43424..7c922f0327769 100644
--- a/extensions/amp-connatix-player/0.1/test/test-amp-connatix-player.js
+++ b/extensions/amp-connatix-player/0.1/test/test-amp-connatix-player.js
@@ -42,7 +42,7 @@ describes.realWin(
       cnx.setAttribute('layout', 'responsive');
 
       doc.body.appendChild(cnx);
-      return cnx.build().then(() => {
+      return cnx.buildInternal().then(() => {
         cnx.layoutCallback();
         return cnx;
       });
@@ -56,7 +56,7 @@ describes.realWin(
       expect(iframe).to.not.be.null;
       expect(iframe.tagName).to.equal('IFRAME');
       expect(iframe.src).to.equal(
-        'https://cdm.connatix.com/amp-embed/index.html?playerId=f721b0d8-7a79-42b6-b637-fa4e86138ed9'
+        'https://cdm.connatix.com/amp-embed/index.html?playerId=f721b0d8-7a79-42b6-b637-fa4e86138ed9&url=about%3Asrcdoc'
       );
       expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
@@ -70,7 +70,7 @@ describes.realWin(
       expect(iframe).to.not.be.null;
       expect(iframe.tagName).to.equal('IFRAME');
       expect(iframe.src).to.equal(
-        'https://cdm.connatix.com/amp-embed/index.html?playerId=f721b0d8-7a79-42b6-b637-fa4e86138ed9&mediaId=527207df-2007-43c4-b87a-f90814bafd2e'
+        'https://cdm.connatix.com/amp-embed/index.html?playerId=f721b0d8-7a79-42b6-b637-fa4e86138ed9&mediaId=527207df-2007-43c4-b87a-f90814bafd2e&url=about%3Asrcdoc'
       );
     });
 
@@ -88,9 +88,9 @@ describes.realWin(
       const cnx = await getConnatixPlayer({
         'data-player-id': 'f721b0d8-7a79-42b6-b637-fa4e86138ed9',
       });
+      const obj = await cnx.getImpl();
       const iframe = cnx.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      const obj = cnx.implementation_;
       obj.unlayoutCallback();
       expect(cnx.querySelector('iframe')).to.be.null;
       expect(obj.iframe_).to.be.null;
diff --git a/extensions/amp-connatix-player/0.1/test/validator-amp-connatix-player.html b/extensions/amp-connatix-player/0.1/test/validator-amp-connatix-player.html
index 6a2a64def7c53..8f30a909a083e 100644
--- a/extensions/amp-connatix-player/0.1/test/validator-amp-connatix-player.html
+++ b/extensions/amp-connatix-player/0.1/test/validator-amp-connatix-player.html
@@ -35,13 +35,13 @@
 </head>
 <body>
   <!-- Invalid: missing required data-player-id attribute -->
-  <amp-connatix-player 
+  <amp-connatix-player
     layout="responsive"
     width="150"
     height="80">
   </amp-connatix-player>
   <!-- Valid -->
-  <amp-connatix-player 
+  <amp-connatix-player
     data-player-id="f721b0d8-7a79-42b6-b637-fa4e86138ed9"
     layout="responsive"
     width="150"
diff --git a/extensions/amp-connatix-player/0.1/test/validator-amp-connatix-player.out b/extensions/amp-connatix-player/0.1/test/validator-amp-connatix-player.out
index 468956c14eb3d..670b8ea42b3da 100644
--- a/extensions/amp-connatix-player/0.1/test/validator-amp-connatix-player.out
+++ b/extensions/amp-connatix-player/0.1/test/validator-amp-connatix-player.out
@@ -36,15 +36,15 @@ FAIL
 |  </head>
 |  <body>
 |    <!-- Invalid: missing required data-player-id attribute -->
-|    <amp-connatix-player 
+|    <amp-connatix-player
 >>   ^~~~~~~~~
-amp-connatix-player/0.1/test/validator-amp-connatix-player.html:38:2 The mandatory attribute 'data-player-id' is missing in tag 'amp-connatix-player'. (see https://www.ampproject.org/docs/reference/components/amp-connatix-player)
+amp-connatix-player/0.1/test/validator-amp-connatix-player.html:38:2 The mandatory attribute 'data-player-id' is missing in tag 'amp-connatix-player'. (see https://amp.dev/documentation/components/amp-connatix-player/)
 |      layout="responsive"
 |      width="150"
 |      height="80">
 |    </amp-connatix-player>
 |    <!-- Valid -->
-|    <amp-connatix-player 
+|    <amp-connatix-player
 |      data-player-id="f721b0d8-7a79-42b6-b637-fa4e86138ed9"
 |      layout="responsive"
 |      width="150"
diff --git a/extensions/amp-connatix-player/OWNERS b/extensions/amp-connatix-player/OWNERS
index ea68e4d5e75df..6976e56e7aac3 100644
--- a/extensions/amp-connatix-player/OWNERS
+++ b/extensions/amp-connatix-player/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'mariusszabo'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'mariusszabo'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-connatix-player/amp-connatix-player.md b/extensions/amp-connatix-player/amp-connatix-player.md
index 98cb767badb48..81cf6dd7d6c7f 100644
--- a/extensions/amp-connatix-player/amp-connatix-player.md
+++ b/extensions/amp-connatix-player/amp-connatix-player.md
@@ -24,7 +24,9 @@ limitations under the License.
 
 # amp-connatix-player
 
-## Example
+## Usage
+
+Displays a cloud-hosted [Connatix Player](https://www.connatix.com/).
 
 The `width` and `height` attributes determine the aspect ratio of the player embedded in responsive layouts.
 
@@ -42,21 +44,21 @@ Example:
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-player-id</strong></td>
-    <td>Connatix player id. This can be found at the Video Players section in the Connatix management dashboard</a>. (<strong>Required</strong>)</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-media-id</strong></td>
-    <td>Connatix media id. This represents the unique ID of any media in your Library. This can be found at the Library section in the <a>Connatix management dashboard</a>. (<strong>Optional</strong>)</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+### `data-player-id`
+
+Connatix player id. This can be found at the Video Players section in the
+Connatix management dashboard.
+
+### `data-media-id` (optional)
+
+Connatix media id. This represents the unique ID of any media in your Library.
+This can be found at the Library section in the Connatix management dashboard.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
 ## Validation
 
-See [amp-connatix-player rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-connatix-player/validator-amp-connatix-player.protoascii) in the AMP validator specification.
+See [amp-connatix-player rules](validator-amp-connatix-player.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-connatix-player/validator-amp-connatix-player.protoascii b/extensions/amp-connatix-player/validator-amp-connatix-player.protoascii
index bbb627dea5190..62e45b97425ec 100644
--- a/extensions/amp-connatix-player/validator-amp-connatix-player.protoascii
+++ b/extensions/amp-connatix-player/validator-amp-connatix-player.protoascii
@@ -33,7 +33,7 @@ tags: {  # <amp-connatix-player>
     name: "data-player-id"
     mandatory: true
   }
-  spec_url: "https://www.ampproject.org/docs/reference/components/amp-connatix-player"
+  spec_url: "https://amp.dev/documentation/components/amp-connatix-player/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-consent/0.1/amp-consent.css b/extensions/amp-consent/0.1/amp-consent.css
index 48de6a9868f76..a419ef80f68b3 100644
--- a/extensions/amp-consent/0.1/amp-consent.css
+++ b/extensions/amp-consent/0.1/amp-consent.css
@@ -90,8 +90,8 @@ amp-consent.amp-hidden {
   position: absolute;
   height: 1px;
   width: 1px;
-  left: -10000px;
   top: auto;
+  left: auto;
 }
 
 .i-amphtml-consent-ui-fill {
@@ -118,12 +118,33 @@ amp-consent.i-amphtml-consent-ui-iframe-active {
   transform: translate3d(0px, 100vh, 0px) !important;
 }
 
-amp-consent.i-amphtml-consent-ui-iframe-active.i-amphtml-consent-ui-enable-border {
+amp-consent.i-amphtml-consent-ui-iframe-active.i-amphtml-consent-ui-modal {
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  animation: 0.5s i-amphtml-modal-appear;
+  animation-fill-mode: forwards;
+  height: var(--i-amphtml-modal-height) !important;
+  width: 90vw !important;
+  margin: auto !important;
+  max-width: 760px;
+}
+
+amp-consent.i-amphtml-consent-ui-border-enabled {
   border-top-left-radius: 8px !important;
   border-top-right-radius: 8px !important;
   box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2) !important;
 }
 
+amp-consent.i-amphtml-consent-ui-modal.i-amphtml-consent-ui-border-enabled {
+  border-radius: 8px !important;
+  box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2) !important;
+}
+
+amp-consent.i-amphtml-consent-ui-iframe-active.i-amphtml-consent-ui-iframe-transform {
+  transform: translate3d(0px, calc(100% - var(--i-amphtml-modal-height)), 0px) !important;
+}
+
 amp-consent.i-amphtml-consent-ui-iframe-active.i-amphtml-consent-ui-in {
   transition: transform 0.5s ease-out !important;
   /* Initial height transform will be set through styles */
@@ -146,6 +167,17 @@ amp-consent.i-amphtml-consent-ui-in.i-amphtml-consent-ui-iframe-fullscreen > .i-
   100% {opacity: 0.2;}
 }
 
+@keyframes i-amphtml-modal-appear {
+  0% {
+    transform: translate(0, 100vh);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+
 .i-amphtml-consent-ui-mask {
   position: fixed !important;
   top: 0 !important;
@@ -159,4 +191,3 @@ amp-consent.i-amphtml-consent-ui-in.i-amphtml-consent-ui-iframe-fullscreen > .i-
   background-color: #000;
   z-index: 2147483644;
 }
-
diff --git a/extensions/amp-consent/0.1/amp-consent.js b/extensions/amp-consent/0.1/amp-consent.js
index 0312174092c62..b067bdec0511c 100644
--- a/extensions/amp-consent/0.1/amp-consent.js
+++ b/extensions/amp-consent/0.1/amp-consent.js
@@ -24,30 +24,40 @@ import {
   hasStoredValue,
 } from './consent-info';
 import {CSS} from '../../../build/amp-consent-0.1.css';
-import {ConsentConfig, expandPolicyConfig} from './consent-config';
+import {
+  ConsentConfig,
+  expandConsentEndpointUrl,
+  expandPolicyConfig,
+} from './consent-config';
 import {ConsentPolicyManager} from './consent-policy-manager';
 import {ConsentStateManager} from './consent-state-manager';
 import {ConsentUI} from './consent-ui';
-import {Deferred} from '../../../src/utils/promise';
+import {CookieWriter} from './cookie-writer';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {
   NOTIFICATION_UI_MANAGER,
   NotificationUiManager,
 } from '../../../src/service/notification-ui-manager';
 import {Services} from '../../../src/services';
+import {TcfApiCommandManager} from './tcf-api-command-manager';
 import {
   assertHttpsUrl,
   getSourceUrl,
   resolveRelativeUrl,
 } from '../../../src/url';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict, hasOwn} from '../../../src/core/types/object';
 import {getData} from '../../../src/event-helper';
 import {getServicePromiseForDoc} from '../../../src/service';
-import {isEnumValue, isObject} from '../../../src/types';
+import {isArray, isEnumValue, isObject} from '../../../src/core/types';
+
+import {isExperimentOn} from '../../../src/experiments';
+
 import {toggle} from '../../../src/style';
 
 const CONSENT_STATE_MANAGER = 'consentStateManager';
 const CONSENT_POLICY_MANAGER = 'consentPolicyManager';
+const TCF_API_LOCATOR = '__tcfapiLocator';
 const TAG = 'amp-consent';
 
 /**
@@ -71,6 +81,9 @@ export class AmpConsent extends AMP.BaseElement {
     /** @private {?ConsentPolicyManager} */
     this.consentPolicyManager_ = null;
 
+    /** @private {?TcfApiCommandManager} */
+    this.tcfApiCommandManager_ = null;
+
     /** @private {?NotificationUiManager} */
     this.notificationUiManager_ = null;
 
@@ -90,7 +103,7 @@ export class AmpConsent extends AMP.BaseElement {
     this.dialogResolver_ = null;
 
     /** @private {boolean} */
-    this.isPromptUIOn_ = false;
+    this.isPromptUiOn_ = false;
 
     /** @private {boolean} */
     this.consentStateChangedViaPromptUI_ = false;
@@ -109,6 +122,28 @@ export class AmpConsent extends AMP.BaseElement {
 
     /** @private {?string} */
     this.matchedGeoGroup_ = null;
+
+    /** @private {?boolean} */
+    this.isTcfPostMessageProxyExperimentOn_ = isExperimentOn(
+      this.win,
+      'tcf-post-message-proxy-api'
+    );
+
+    /** @private {?boolean} */
+    this.isGranularConsentExperimentOn_ = isExperimentOn(
+      this.win,
+      'amp-consent-granular-consent'
+    );
+
+    /** @private {?Promise<?Array>} */
+    this.purposeConsentRequired_ = this.isGranularConsentExperimentOn_
+      ? null
+      : Promise.resolve();
+
+    /** @private @const {?Function} */
+    this.boundHandleIframeMessages_ = this.isTcfPostMessageProxyExperimentOn_
+      ? this.handleIframeMessages_.bind(this)
+      : null;
   }
 
   /** @override */
@@ -132,6 +167,20 @@ export class AmpConsent extends AMP.BaseElement {
     });
   }
 
+  /** @override */
+  pauseCallback() {
+    if (this.consentUI_) {
+      this.consentUI_.pause();
+    }
+  }
+
+  /** @override */
+  resumeCallback() {
+    if (this.consentUI_) {
+      this.consentUI_.resume();
+    }
+  }
+
   /**
    *
    * @param {!JsonObject} validatedConfig
@@ -186,7 +235,9 @@ export class AmpConsent extends AMP.BaseElement {
       this.getAmpDoc(),
       CONSENT_POLICY_MANAGER
     ).then((manager) => {
-      this.consentPolicyManager_ = /** @type {!ConsentPolicyManager} */ (manager);
+      this.consentPolicyManager_ = /** @type {!ConsentPolicyManager} */ (
+        manager
+      );
       this.consentPolicyManager_.setLegacyConsentInstanceId(
         /** @type {string} */ (this.consentId_)
       );
@@ -213,13 +264,20 @@ export class AmpConsent extends AMP.BaseElement {
       this.getAmpDoc(),
       NOTIFICATION_UI_MANAGER
     ).then((manager) => {
-      this.notificationUiManager_ = /** @type {!NotificationUiManager} */ (manager);
+      this.notificationUiManager_ = /** @type {!NotificationUiManager} */ (
+        manager
+      );
     });
 
+    const cookieWriterPromise = this.consentConfig_['cookies']
+      ? new CookieWriter(this.win, this.element, this.consentConfig_).write()
+      : Promise.resolve();
+
     Promise.all([
       consentStateManagerPromise,
       notificationUiManagerPromise,
       consentPolicyManagerPromise,
+      cookieWriterPromise,
     ]).then(() => {
       this.init_();
     });
@@ -229,33 +287,54 @@ export class AmpConsent extends AMP.BaseElement {
    * Register a list of user action functions
    */
   enableInteractions_() {
-    this.registerAction('accept', () => {
-      this.handleAction_(ACTION_TYPE.ACCEPT);
+    this.registerAction('accept', (invocation) => {
+      this.handleClosingUiAction_(ACTION_TYPE.ACCEPT, invocation);
     });
 
-    this.registerAction('reject', () => {
-      this.handleAction_(ACTION_TYPE.REJECT);
+    this.registerAction('reject', (invocation) => {
+      this.handleClosingUiAction_(ACTION_TYPE.REJECT, invocation);
     });
 
     this.registerAction('dismiss', () => {
-      this.handleAction_(ACTION_TYPE.DISMISS);
+      this.handleClosingUiAction_(ACTION_TYPE.DISMISS);
     });
 
-    this.registerAction('prompt', () => {
-      this.scheduleDisplay_(true);
-    });
+    if (this.isGranularConsentExperimentOn_) {
+      this.registerAction('setPurpose', (invocation) => {
+        this.handleSetPurpose_(invocation);
+      });
+    }
+
+    this.registerAction('prompt', (invocation) =>
+      this.handleReprompt_(invocation)
+    );
 
     this.enableExternalInteractions_();
   }
 
   /**
-   * TODO(micajuineho) add gdprApplies here
+   * For actions that close the PromptUI, validate state
+   * and do some preprocessing, then handle action.
+   * @param {string} action
+   * @param {../../../src/service/action-impl.ActionInvocation=} opt_invocation
+   */
+  handleClosingUiAction_(action, opt_invocation) {
+    if (!this.isReadyToHandleAction_()) {
+      return;
+    }
+    // Set default for purpose map
+    this.maybeSetConsentPurposeDefaults_(action, opt_invocation).then(() => {
+      this.handleAction_(action);
+    });
+  }
+
+  /**
    * Listen to external consent flow iframe's response
    * with consent string and metadata.
    */
   enableExternalInteractions_() {
     this.win.addEventListener('message', (event) => {
-      if (!this.isPromptUIOn_) {
+      if (!this.isPromptUiOn_) {
         return;
       }
 
@@ -287,25 +366,38 @@ export class AmpConsent extends AMP.BaseElement {
               TAG,
               'Consent string value %s not applicable on user dismiss, ' +
                 'stored value will be kept and used',
-              consentString
+              data['info']
             );
           }
           data['info'] = undefined;
         }
         consentString = data['info'];
-        metadata = this.configureMetadataByConsentString_(
-          data['consentMetadata'],
-          consentString
-        );
+        metadata = this.validateMetadata_(data['consentMetadata']);
       }
 
       const iframes = this.element.querySelectorAll('iframe');
 
       for (let i = 0; i < iframes.length; i++) {
         if (iframes[i].contentWindow === event.source) {
-          const action = data['action'];
+          const {action, purposeConsents} = data;
+          // Check if we have a valid action and valid state
+          if (
+            !isEnumValue(ACTION_TYPE, action) ||
+            !this.isReadyToHandleAction_()
+          ) {
+            continue;
+          }
+          if (
+            purposeConsents &&
+            Object.keys(purposeConsents).length &&
+            action !== ACTION_TYPE.DISMISS
+          ) {
+            this.validatePurposeConsents_(purposeConsents);
+            this.consentStateManager_.updateConsentInstancePurposes(
+              purposeConsents
+            );
+          }
           this.handleAction_(action, consentString, metadata);
-          return;
         }
       }
     });
@@ -347,13 +439,13 @@ export class AmpConsent extends AMP.BaseElement {
    * @return {!Promise}
    */
   show_(isActionPromptTrigger) {
-    if (this.isPromptUIOn_) {
+    if (this.isPromptUiOn_) {
       dev().error(TAG, 'Attempt to show an already displayed prompt UI');
     }
 
     this.vsync_.mutate(() => {
       this.consentUI_.show(isActionPromptTrigger);
-      this.isPromptUIOn_ = true;
+      this.isPromptUiOn_ = true;
     });
 
     const deferred = new Deferred();
@@ -365,12 +457,12 @@ export class AmpConsent extends AMP.BaseElement {
    * Hide current prompt UI
    */
   hide_() {
-    if (!this.isPromptUIOn_) {
+    if (!this.isPromptUiOn_) {
       dev().error(TAG, '%s no consent ui to hide');
     }
 
     this.consentUI_.hide();
-    this.isPromptUIOn_ = false;
+    this.isPromptUiOn_ = false;
 
     if (this.dialogResolver_) {
       this.dialogResolver_();
@@ -381,28 +473,25 @@ export class AmpConsent extends AMP.BaseElement {
   }
 
   /**
-   * Handler User action
+   * Checks if we are in a valid state to handle user actions.
+   * @return {boolean}
+   */
+  isReadyToHandleAction_() {
+    if (!this.consentStateManager_) {
+      dev().error(TAG, 'No consent state manager');
+      return false;
+    }
+    return this.isPromptUiOn_;
+  }
+
+  /**
+   * Handler User action. Should call isReadyToHandleAction_ before.
    *
    * @param {string} action
    * @param {string=} consentString
    * @param {!ConsentMetadataDef=} opt_consentMetadata
    */
   handleAction_(action, consentString, opt_consentMetadata) {
-    if (!isEnumValue(ACTION_TYPE, action)) {
-      // Unrecognized action
-      return;
-    }
-
-    if (!this.isPromptUIOn_) {
-      // No consent prompt to act to
-      return;
-    }
-
-    if (!this.consentStateManager_) {
-      dev().error(TAG, 'No consent state manager');
-      return;
-    }
-
     this.consentStateChangedViaPromptUI_ = true;
 
     if (action == ACTION_TYPE.ACCEPT) {
@@ -429,13 +518,85 @@ export class AmpConsent extends AMP.BaseElement {
     this.hide_();
   }
 
+  /**
+   * Maybe set the consent purpose map with default values.
+   * If not, resolve instantly.
+   * @param {string} action
+   * @param {../../../src/service/action-impl.ActionInvocation=} opt_invocation
+   * @return {!Promise}
+   */
+  maybeSetConsentPurposeDefaults_(action, opt_invocation) {
+    if (
+      !this.isGranularConsentExperimentOn_ ||
+      typeof opt_invocation?.args?.purposeConsentDefault !== 'boolean'
+    ) {
+      return Promise.resolve();
+    }
+    if (action === ACTION_TYPE.DISMISS) {
+      dev.warn(TAG, 'Dismiss cannot have a `purposeConsentDefault` parameter.');
+      return Promise.resolve();
+    }
+
+    // At this point, this.getPurposeConsentRequired_()
+    // should always be resolved, so no need to worry about
+    // a race here.
+    return this.getPurposeConsentRequired_().then((purposeConsentRequired) => {
+      if (!purposeConsentRequired || !purposeConsentRequired.length) {
+        return;
+      }
+      const defaultPurposes = {};
+      const purposeValue = opt_invocation['args']['purposeConsentDefault'];
+      purposeConsentRequired.forEach((purpose) => {
+        defaultPurposes[purpose] = purposeValue;
+      });
+      this.consentStateManager_.updateConsentInstancePurposes(
+        defaultPurposes,
+        true
+      );
+    });
+  }
+
+  /**
+   * Handle the prompt action to re-prompt.
+   * Accpet arg expireCache=true
+   * @param {!../../../src/service/action-impl.ActionInvocation} invocation
+   */
+  handleReprompt_(invocation) {
+    const {args} = invocation;
+    if (args && args['expireCache'] === true) {
+      this.consentStateManager_.setDirtyBit();
+    }
+    this.scheduleDisplay_(true);
+  }
+
+  /**
+   * Handle the setting a purpose in the state manager.
+   * Accpet all args with booleans as values.
+   * @param {!../../../src/service/action-impl.ActionInvocation} invocation
+   */
+  handleSetPurpose_(invocation) {
+    if (
+      !invocation ||
+      !invocation['args'] ||
+      !Object.keys(invocation['args']).length
+    ) {
+      dev().error(TAG, 'Must have arugments for `setPurpose`.');
+      return;
+    }
+    const {args} = invocation;
+    if (this.isReadyToHandleAction_()) {
+      this.validatePurposeConsents_(args);
+      this.consentStateManager_.updateConsentInstancePurposes(args);
+    }
+  }
+
   /**
    * Init the amp-consent by registering and initiate consent instance.
    */
   init_() {
     this.passSharedData_();
-    this.setGdprApplies();
     this.syncRemoteConsentState_();
+    this.maybeSetUpTcfPostMessageProxy_();
 
     this.getConsentRequiredPromise_()
       .then((isConsentRequired) => {
@@ -497,30 +658,6 @@ export class AmpConsent extends AMP.BaseElement {
     this.consentStateManager_.setConsentInstanceSharedData(sharedDataPromise);
   }
 
-  /**
-   * Create and set gdprApplies promise form consent manager.
-   * Default value to remote `consentRequired`, if no
-   * `gdprApplies` value is provided.
-   *
-   * TODO(micajuinho) remove this method (and subsequent methods
-   * in consent-state-manager) in favor of consolidation with
-   * consentString
-   */
-  setGdprApplies() {
-    const responsePromise = this.getConsentRemote_();
-    const gdprAppliesPromise = responsePromise.then((response) => {
-      if (!response) {
-        return null;
-      }
-      const gdprApplies = response['gdprApplies'];
-      return gdprApplies === undefined || typeof gdprApplies !== 'boolean'
-        ? response['consentRequired']
-        : gdprApplies;
-    });
-
-    this.consentStateManager_.setConsentInstanceGdprApplies(gdprAppliesPromise);
-  }
-
   /**
    * Clear cache for server side decision and then sync.
    */
@@ -536,8 +673,6 @@ export class AmpConsent extends AMP.BaseElement {
         this.consentStateManager_.setDirtyBit();
       }
 
-      // TODO(micajuineho) When we consolidate, add gdprApplies field
-      // to be set with consentString.
       // Decision from promptUI takes precedence over consent decision from response
       if (
         !!response['consentRequired'] &&
@@ -546,7 +681,8 @@ export class AmpConsent extends AMP.BaseElement {
         this.updateCacheIfNotNull_(
           response['consentStateValue'],
           response['consentString'] || undefined,
-          response['consentMetadata'] || undefined
+          response['consentMetadata'],
+          response['purposeConsents']
         );
       }
     });
@@ -555,25 +691,35 @@ export class AmpConsent extends AMP.BaseElement {
   /**
    * Sync with local storage if consentRequired is true.
    *
-   * @param {string=} responseStateValue
-   * @param {string=} responseConsentString
-   * @param {JsonObject=} opt_responseMetadata
+   * @param {?string=} responseStateValue
+   * @param {?string=} responseConsentString
+   * @param {?JsonObject=} responseMetadata
+   * @param {?JsonObject=} responsePurposeConsents
    */
   updateCacheIfNotNull_(
     responseStateValue,
     responseConsentString,
-    opt_responseMetadata
+    responseMetadata,
+    responsePurposeConsents
   ) {
     const consentStateValue = convertEnumValueToState(responseStateValue);
     // consentStateValue and consentString are treated as a pair that will update together
     if (consentStateValue !== null) {
+      if (
+        this.isGranularConsentExperimentOn_ &&
+        responsePurposeConsents &&
+        isObject(responsePurposeConsents) &&
+        Object.keys(responsePurposeConsents).length
+      ) {
+        this.validatePurposeConsents_(responsePurposeConsents);
+        this.consentStateManager_.updateConsentInstancePurposes(
+          responsePurposeConsents
+        );
+      }
       this.consentStateManager_.updateConsentInstanceState(
         consentStateValue,
         responseConsentString,
-        this.configureMetadataByConsentString_(
-          opt_responseMetadata,
-          responseConsentString
-        )
+        this.validateMetadata_(responseMetadata)
       );
     }
   }
@@ -590,7 +736,8 @@ export class AmpConsent extends AMP.BaseElement {
     if (!this.consentConfig_['checkConsentHref']) {
       this.remoteConfigPromise_ = Promise.resolve(null);
     } else {
-      const storeConsentPromise = this.consentStateManager_.getLastConsentInstanceInfo();
+      const storeConsentPromise =
+        this.consentStateManager_.getLastConsentInstanceInfo();
       this.remoteConfigPromise_ = storeConsentPromise.then((storedInfo) => {
         // Note: Expect the request to look different in following versions.
         const request = /** @type {!JsonObject} */ ({
@@ -601,6 +748,9 @@ export class AmpConsent extends AMP.BaseElement {
           'isDirty': !!storedInfo['isDirty'],
           'matchedGeoGroup': this.matchedGeoGroup_,
         });
+        if (this.isGranularConsentExperimentOn_) {
+          request['purposeConsents'] = storedInfo['purposeConsents'];
+        }
         if (this.consentConfig_['clientConfig']) {
           request['clientConfig'] = this.consentConfig_['clientConfig'];
         }
@@ -615,18 +765,104 @@ export class AmpConsent extends AMP.BaseElement {
         const sourceBase = getSourceUrl(ampdoc.getUrl());
         const resolvedHref = resolveRelativeUrl(href, sourceBase);
         const xhrService = Services.xhrFor(this.win);
-        return ampdoc.whenFirstVisible().then(() => {
-          return xhrService
-            .fetchJson(resolvedHref, init)
-            .then((res) =>
-              xhrService.xssiJson(res, this.consentConfig_['xssiPrefix'])
-            );
-        });
+        return ampdoc.whenFirstVisible().then(() =>
+          expandConsentEndpointUrl(this.element, resolvedHref).then(
+            (expandedHref) =>
+              xhrService.fetchJson(expandedHref, init).then((res) =>
+                xhrService
+                  .xssiJson(res, this.consentConfig_['xssiPrefix'])
+                  .catch((e) => {
+                    user().error(
+                      TAG,
+                      'Could not parse the `checkConsentHref` response.',
+                      e
+                    );
+                  })
+              )
+          )
+        );
       });
     }
     return this.remoteConfigPromise_;
   }
 
+  /**
+   * Returns true if we have stored the granular consent values
+   * for the required purposes.
+   * @param {ConsentInfoDef} consentInfo
+   * @return {!Promise<boolean>}
+   */
+  checkGranularConsentRequired_(consentInfo) {
+    if (!this.isGranularConsentExperimentOn_) {
+      return Promise.resolve(true);
+    }
+    return this.getPurposeConsentRequired_().then((purposeConsentRequired) => {
+      // True if there are no required purposes
+      if (!purposeConsentRequired?.length) {
+        this.consentStateManager_.hasAllPurposeConsents();
+        return true;
+      }
+      const storedPurposeConsents = consentInfo['purposeConsents'];
+      // False if there are no stored purposes
+      if (
+        !storedPurposeConsents ||
+        Object.keys(storedPurposeConsents).length <
+          purposeConsentRequired.length
+      ) {
+        return false;
+      }
+      // Check if we have a stored consent for each purpose required
+      for (let i = 0; i < purposeConsentRequired.length; i++) {
+        const purpose = purposeConsentRequired[i];
+        if (!hasOwn(storedPurposeConsents, purpose)) {
+          return false;
+        }
+      }
+      this.consentStateManager_.hasAllPurposeConsents();
+      return true;
+    });
+  }
+
+  /**
+   * Get `purposeConsentRequired` from consent config,
+   * or from `checkConsentHref` response.
+   * @return {!Promise<?Array>}
+   */
+  getPurposeConsentRequired_() {
+    if (this.purposeConsentRequired_) {
+      return this.purposeConsentRequired_;
+    }
+    const inlinePurposes = this.consentConfig_['purposeConsentRequired'];
+    if (isArray(inlinePurposes)) {
+      this.purposeConsentRequired_ = Promise.resolve(inlinePurposes);
+    } else {
+      this.purposeConsentRequired_ = this.getConsentRemote_().then(
+        (response) => {
+          if (!response || !isArray(response['purposeConsentRequired'])) {
+            return null;
+          }
+          return response['purposeConsentRequired'];
+        }
+      );
+    }
+    return this.purposeConsentRequired_;
+  }
+
+  /**
+   * Determines if we should show UI based on our stored consent values.
+   * @return {!Promise<boolean>}
+   */
+  hasRequiredConsents_() {
+    return this.consentStateManager_.getConsentInstanceInfo().then((info) => {
+      // Check that we have global consent
+      if (hasStoredValue(info)) {
+        // Then check granular consent
+        return this.checkGranularConsentRequired_(info);
+      }
+      return Promise.resolve(false);
+    });
+  }
+
   /**
    * Handle Prompt UI.
    * @param {boolean} isConsentRequired
@@ -635,15 +871,14 @@ export class AmpConsent extends AMP.BaseElement {
   initPromptUI_(isConsentRequired) {
     this.consentUI_ = new ConsentUI(
       this,
-      /** @type {!JsonObject} */ (devAssert(
-        this.consentConfig_,
-        'consent config not found'
-      ))
+      /** @type {!JsonObject} */ (
+        devAssert(this.consentConfig_, 'consent config not found')
+      )
     );
 
     // Get current consent state
-    return this.consentStateManager_.getConsentInstanceInfo().then((info) => {
-      if (hasStoredValue(info)) {
+    return this.hasRequiredConsents_().then((hasConsents) => {
+      if (hasConsents) {
         // Has user stored value, no need to prompt
         return true;
       }
@@ -708,30 +943,99 @@ export class AmpConsent extends AMP.BaseElement {
    * @visibleForTesting
    */
   getIsPromptUiOnForTesting() {
-    return this.isPromptUIOn_;
+    return this.isPromptUiOn_;
+  }
+
+  /**
+   * Ensure purpose consents to be set are valid.
+   *
+   * @param {!Object} purposeObj
+   */
+  validatePurposeConsents_(purposeObj) {
+    const purposeKeys = Object.keys(purposeObj);
+    purposeKeys.forEach((purposeKey) => {
+      dev().assertBoolean(
+        purposeObj[purposeKey],
+        '`setPurpose` values must be booleans.'
+      );
+    });
   }
 
   /**
-   * If consentString is undefined or invalid, don't
-   * include any metadata in update. Otherwise, convert to
-   * to ConsentMetadataDef
+   * Convert valid opt_metadta into ConsentMetadataDef
    * @param {JsonObject=} opt_metadata
-   * @param {string=} opt_consentString
    * @return {ConsentMetadataDef|undefined}
    */
-  configureMetadataByConsentString_(opt_metadata, opt_consentString) {
+  validateMetadata_(opt_metadata) {
     if (!opt_metadata) {
       return;
     }
-    if (!isObject(opt_metadata) || !opt_consentString) {
-      user().error(
-        TAG,
-        'CMP metadata is invalid or no consent string is found.'
-      );
+    if (!isObject(opt_metadata)) {
+      user().error(TAG, 'CMP metadata is not an object.');
       return;
     }
     assertMetadataValues(opt_metadata);
-    return constructMetadata(opt_metadata['consentStringType']);
+    return constructMetadata(
+      opt_metadata['consentStringType'],
+      opt_metadata['additionalConsent'],
+      opt_metadata['gdprApplies'],
+      opt_metadata['purposeOne']
+    );
+  }
+
+  /**
+   * Maybe set up the __tfcApiLocator window and listeners.
+   *
+   * The window is a dummy iframe that signals to 3p iframes
+   * that the document supports the tcfPostMessage API.
+   */
+  maybeSetUpTcfPostMessageProxy_() {
+    if (
+      !this.isTcfPostMessageProxyExperimentOn_ ||
+      !this.consentConfig_['exposesTcfApi']
+    ) {
+      return;
+    }
+    // Check if __tcfApiLocator API already exists (dirty AMP)
+    if (!this.win.frames[TCF_API_LOCATOR]) {
+      this.tcfApiCommandManager_ = new TcfApiCommandManager(
+        this.consentPolicyManager_
+      );
+      // Add window listener for 3p iframe PostMessages
+      this.win.addEventListener('message', this.boundHandleIframeMessages_);
+
+      // Set up the __tcfApiLocator window to singal PostMessage support
+      const iframe = this.element.ownerDocument.createElement('iframe');
+      iframe.setAttribute('name', TCF_API_LOCATOR);
+      toggle(iframe, false);
+      iframe.setAttribute('aria-hidden', true);
+      this.element.appendChild(dev().assertElement(iframe));
+    }
+  }
+
+  /**
+   * Listen to iframe messages and handle events.
+   *
+   * The listeners will listen for post messages from 3p
+   * iframes that have the following structure:
+   * {
+   *  "__tcfapiCall": {
+   *    "command": cmd,
+   *    "parameter": arg,
+   *    "version": v,
+   *    "callId": id,
+   *  }
+   * }
+   *
+   * @param {!Event} event
+   */
+  handleIframeMessages_(event) {
+    const data = getData(event);
+
+    if (!data || !data['__tcfapiCall']) {
+      return;
+    }
+    this.tcfApiCommandManager_.handleTcfCommand(data, event.source);
   }
 }
 
diff --git a/extensions/amp-consent/0.1/cmps.js b/extensions/amp-consent/0.1/cmps.js
index dc48119a59032..40e9ca0f411fa 100644
--- a/extensions/amp-consent/0.1/cmps.js
+++ b/extensions/amp-consent/0.1/cmps.js
@@ -30,8 +30,9 @@ export const CMP_CONFIG = {};
 if (getMode().test || getMode().localDev) {
   CMP_CONFIG['_ping_'] = {
     'consentInstanceId': '_ping_',
-    'checkConsentHref': '/get-consent-v1',
-    'promptUISrc': '/examples/amp-consent/diy-consent.html',
+    'checkConsentHref': '/get-consent-v1?cid=CLIENT_ID&pid=PAGE_VIEW_ID',
+    'promptUISrc':
+      '/examples/amp-consent/diy-consent.html?cid=CLIENT_ID&pid=PAGE_VIEW_ID',
   };
 }
 
@@ -41,12 +42,25 @@ CMP_CONFIG['appconsent'] = {
   'promptUISrc': 'https://cdn.appconsent.io/loader.html',
 };
 
+CMP_CONFIG['ConsentManager'] = {
+  'consentInstanceId': 'ConsentManager',
+  'checkConsentHref':
+    'https://consentmanager.mgr.consensu.org/delivery/ampcheck.php',
+  'promptUISrc': 'https://consentmanager.mgr.consensu.org/delivery/ampui.php',
+};
+
 CMP_CONFIG['didomi'] = {
   'consentInstanceId': 'didomi',
   'checkConsentHref': 'https://api.privacy-center.org/amp/check-consent',
   'promptUISrc': 'https://sdk-amp.privacy-center.org/loader.html',
 };
 
+CMP_CONFIG['iubenda'] = {
+  'consentInstanceId': 'iubenda',
+  'checkConsentHref': 'https://amp.iubenda.com/checkConsent',
+  'promptUISrc': 'https://www.iubenda.com/en/help/22135-cookie-solution-amp',
+};
+
 CMP_CONFIG['sirdata'] = {
   'consentInstanceId': 'sirdata',
   'checkConsentHref': 'https://sddan.mgr.consensu.org/api/v1/public/amp/check',
@@ -55,8 +69,8 @@ CMP_CONFIG['sirdata'] = {
 
 CMP_CONFIG['Marfeel'] = {
   'consentInstanceId': 'Marfeel',
-  'checkConsentHref': 'https://live.mrf.io/cmp/consents/amp',
-  'promptUISrc': 'https://marfeel.mgr.consensu.org/amp/index.html',
+  'checkConsentHref': 'https://live.mrf.io/cmp/marfeel/amp/check-consent',
+  'promptUISrc': 'https://live.mrf.io/cmp/marfeel/amp/index.html',
 };
 
 CMP_CONFIG['Ogury'] = {
@@ -65,20 +79,51 @@ CMP_CONFIG['Ogury'] = {
   'promptUISrc': 'https://www.ogury.mgr.consensu.org/amp.html',
 };
 
+CMP_CONFIG['onetrust'] = {
+  'consentInstanceId': 'onetrust',
+  'checkConsentHref': 'https://cdn.cookielaw.org/amp/consent/check',
+  'promptUISrc': ' https://amp.onetrust.mgr.consensu.org/',
+};
+
 CMP_CONFIG['opencmp'] = {
   'consentInstanceId': 'opencmp',
   'checkConsentHref': 'https://amp.opencmp.net/consent/check',
   'promptUISrc': 'https://cdn.opencmp.net/tcf-v2/amp/cmp.html',
 };
 
+CMP_CONFIG['pubtech'] = {
+  'consentInstanceId': 'pubtech',
+  'checkConsentHref': 'https://amp.pubtech.it/cmp-amp-check-consent',
+  'promptUISrc': 'https://cdn.pubtech.ai/amp/index.html',
+};
+
+CMP_CONFIG['quantcast'] = {
+  'consentInstanceId': 'quantcast',
+  'checkConsentHref':
+    'https://apis.quantcast.mgr.consensu.org/amp/check-consent',
+  'promptUISrc': 'https://quantcast.mgr.consensu.org/tcfv2/amp.html',
+};
+
 CMP_CONFIG['SourcePoint'] = {
   'consentInstanceId': 'SourcePoint',
   'checkConsentHref': 'https://sourcepoint.mgr.consensu.org/consent/v2/amp',
   'promptUISrc': 'https://amp.pm.sourcepoint.mgr.consensu.org/',
 };
 
+CMP_CONFIG['UniConsent'] = {
+  'consentInstanceId': 'UniConsent',
+  'checkConsentHref': 'https://edge.uniconsent.com/amp/check-consent',
+  'promptUISrc': 'https://cmp.uniconsent.com/amp/index.html',
+};
+
 CMP_CONFIG['Usercentrics'] = {
   'consentInstanceId': 'Usercentrics',
   'checkConsentHref': 'https://consents.usercentrics.eu/amp/checkConsent',
   'promptUISrc': 'https://amp.usercentrics.eu/amp.html',
 };
+
+CMP_CONFIG['LiveRamp'] = {
+  'consentInstanceId': 'LiveRamp',
+  'checkConsentHref': 'https://api.privacymanager.io/amp/check-consent',
+  'promptUISrc': 'https://amp-consent-tool.privacymanager.io/1/index.html',
+};
diff --git a/extensions/amp-consent/0.1/consent-config.js b/extensions/amp-consent/0.1/consent-config.js
index 6181f6fe4524c..5f40ba1dfe4bc 100644
--- a/extensions/amp-consent/0.1/consent-config.js
+++ b/extensions/amp-consent/0.1/consent-config.js
@@ -15,22 +15,35 @@
  */
 
 import {CMP_CONFIG} from './cmps';
-import {CONSENT_POLICY_STATE} from '../../../src/consent-state';
+import {CONSENT_POLICY_STATE} from '../../../src/core/constants/consent-state';
 import {GEO_IN_GROUP} from '../../amp-geo/0.1/amp-geo-in-group';
 import {Services} from '../../../src/services';
-import {deepMerge, hasOwn, map} from '../../../src/utils/object';
+import {childElementByTag} from '../../../src/dom';
+import {deepMerge, hasOwn, map} from '../../../src/core/types/object';
 import {devAssert, user, userAssert} from '../../../src/log';
 import {getChildJsonConfig} from '../../../src/json';
 
 const TAG = 'amp-consent/consent-config';
+const AMP_STORY_CONSENT_TAG = 'amp-story-consent';
 
 const ALLOWED_DEPR_CONSENTINSTANCE_ATTRS = {
   'promptUI': true,
   'checkConsentHref': true,
+  // `promptIfUnknownForGeoGroup` is legacy field
   'promptIfUnknownForGeoGroup': true,
   'onUpdateHref': true,
 };
 
+/** @const @type {!Object<string, boolean>} */
+const CONSENT_VARS_ALLOWED_LIST = {
+  'CLIENT_ID': true,
+  'PAGE_VIEW_ID': true,
+  'PAGE_VIEW_ID_64': true,
+};
+
+/** @const @type {string} */
+export const CID_SCOPE = 'AMP-CONSENT';
+
 export class ConsentConfig {
   /** @param {!Element} element */
   constructor(element) {
@@ -115,19 +128,16 @@ export class ConsentConfig {
    */
   validateAndParseConfig_() {
     const inlineConfig = this.convertInlineConfigFormat_(
-      /** @type {!JsonObject} */ (userAssert(
-        this.getInlineConfig_(),
-        '%s: Inline config not found'
-      ))
+      /** @type {!JsonObject} */ (
+        userAssert(this.getInlineConfig_(), '%s: Inline config not found')
+      )
     );
 
     const cmpConfig = this.getCMPConfig_();
 
-    const config = /** @type {!JsonObject} */ (deepMerge(
-      cmpConfig || {},
-      inlineConfig || {},
-      1
-    ));
+    const config = /** @type {!JsonObject} */ (
+      deepMerge(cmpConfig || {}, inlineConfig || {}, 1)
+    );
 
     userAssert(
       config['consentInstanceId'],
@@ -151,8 +161,7 @@ export class ConsentConfig {
       }
     }
 
-    // TODO(micajuineho): delete promptIfUnknownForGeoGroup, once we migrate fully
-    // Migrate to geoOverride
+    // `promptIfUnknownForGeoGroup` is legacy field
     const group = config['promptIfUnknownForGeoGroup'];
     if (typeof group === 'string') {
       config['consentRequired'] = false;
@@ -168,9 +177,9 @@ export class ConsentConfig {
       config['consentRequired'] = 'remote';
     }
 
-    return this.mergeGeoOverride_(config).then((mergedConfig) =>
-      this.validateMergedGeoOverride_(mergedConfig)
-    );
+    return this.mergeGeoOverride_(config)
+      .then((mergedConfig) => this.validateMergedGeoOverride_(mergedConfig))
+      .then((validatedConfig) => this.checkStoryConsent_(validatedConfig));
   }
 
   /**
@@ -234,6 +243,23 @@ export class ConsentConfig {
     return mergedConfig;
   }
 
+  /**
+   * Validate if story consent then no promptUiSrc
+   * @param {!JsonObject} config
+   * @return {!JsonObject}
+   */
+  checkStoryConsent_(config) {
+    if (childElementByTag(this.element_, AMP_STORY_CONSENT_TAG)) {
+      userAssert(
+        !config['promptUISrc'],
+        '%s: `promptUiSrc` cannot be specified while using %s.',
+        TAG,
+        AMP_STORY_CONSENT_TAG
+      );
+    }
+    return config;
+  }
+
   /**
    * Read the inline config from publisher
    * @return {?JsonObject}
@@ -289,6 +315,36 @@ export class ConsentConfig {
   }
 }
 
+/**
+ * Expand consent endpoint url
+ * @param {!Element|!ShadowRoot} element
+ * @param {string} url
+ * @return {!Promise<string>}
+ */
+export function expandConsentEndpointUrl(element, url) {
+  return Services.urlReplacementsForDoc(element).expandUrlAsync(
+    url,
+    {
+      'CLIENT_ID': getConsentCID(element),
+    },
+    CONSENT_VARS_ALLOWED_LIST
+  );
+}
+
+/**
+ * Return AMP CONSENT scoped CID
+ * @param {!Element|!ShadowRoot|!../../../src/service/ampdoc-impl.AmpDoc} node
+ * @return {!Promise<string>}
+ */
+export function getConsentCID(node) {
+  return Services.cidForDoc(node).then((cid) => {
+    return cid.get(
+      {scope: CID_SCOPE, createCookieIfNotPresent: true},
+      /** consent */ Promise.resolve()
+    );
+  });
+}
+
 /**
  * Expand the passed in policyConfig and generate predefined policy entires
  * @param {!JsonObject} policyConfig
diff --git a/extensions/amp-consent/0.1/consent-info.js b/extensions/amp-consent/0.1/consent-info.js
index bdb8d8c841050..a2794f799cf40 100644
--- a/extensions/amp-consent/0.1/consent-info.js
+++ b/extensions/amp-consent/0.1/consent-info.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import {CONSENT_STRING_TYPE} from '../../../src/consent-state';
-import {deepEquals} from '../../../src/json';
+import {CONSENT_STRING_TYPE} from '../../../src/core/constants/consent-state';
+import {deepEquals} from '../../../src/core/types/object/json';
 import {dev, user} from '../../../src/log';
-import {hasOwn, map} from '../../../src/utils/object';
-import {isEnumValue, isObject} from '../../../src/types';
+import {hasOwn, map} from '../../../src/core/types/object';
+import {isEnumValue, isObject} from '../../../src/core/types';
 
 const TAG = 'amp-consent';
 
@@ -27,9 +27,11 @@ const TAG = 'amp-consent';
  * STATE: Set when user accept or reject consent.
  * STRING: Set when a consent string is used to store more granular consent info
  * on vendors.
- * METADATA: set when consent metadata is passed in to store more granular consent info
+ * METADATA: Set when consent metadata is passed in to store more granular consent info
  * on vendors.
  * DITRYBIT: Set when the stored consent info need to be revoked next time.
+ * PURPOSE_CONSENTS: Set when consents for purposes are passed in for client side
+ * granular consent. Only values ACCEPT and REJECT signals are stored.
  * @enum {string}
  */
 export const STORAGE_KEY = {
@@ -37,16 +39,29 @@ export const STORAGE_KEY = {
   STRING: 'r',
   IS_DIRTY: 'd',
   METADATA: 'm',
+  PURPOSE_CONSENTS: 'pc',
 };
 
 /**
  * Key values for retriving/storing metadata values within consent info
- * TODO(micajuineho)
- * GDPR_APPLIES: 'ga'
  * @enum {string}
  */
 export const METADATA_STORAGE_KEY = {
   CONSENT_STRING_TYPE: 'cst',
+  ADDITIONAL_CONSENT: 'ac',
+  GDPR_APPLIES: 'ga',
+  PURPOSE_ONE: 'po',
+};
+
+/**
+ * Unlike the global consent state, only accepted and
+ * rejected values are respected and stored.
+ * In the future, we might consider more nuanced states.
+ * @enum {number}
+ */
+export const PURPOSE_CONSENT_STATE = {
+  ACCEPTED: 1,
+  REJECTED: 2,
 };
 
 /**
@@ -63,11 +78,23 @@ export const CONSENT_ITEM_STATE = {
   // {unknown, accepted, rejected}
 };
 
+/**
+ * @enum {string}
+ * @visibleForTesting
+ */
+export const TCF_POST_MESSAGE_API_COMMANDS = {
+  GET_TC_DATA: 'getTCData',
+  PING: 'ping',
+  ADD_EVENT_LISTENER: 'addEventListener',
+  REMOVE_EVENT_LISTENER: 'removeEventListener',
+};
+
 /**
  * @typedef {{
  *  consentState: CONSENT_ITEM_STATE,
  *  consentString: (string|undefined),
  *  consentMetadata: (ConsentMetadataDef|undefined),
+ *  purposeConsents: (Object<string, PURPOSE_CONSENT_STATE>|undefined),
  *  isDirty: (boolean|undefined),
  * }}
  */
@@ -77,6 +104,9 @@ export let ConsentInfoDef;
  * Used in ConsentInfoDef
  * @typedef {{
  *  consentStringType: (CONSENT_STRING_TYPE|undefined),
+ *  additionalConsent: (string|undefined),
+ *  gdprApplies: (boolean|undefined),
+ *  purposeOne: (boolean|undefined),
  * }}
  */
 export let ConsentMetadataDef;
@@ -88,12 +118,7 @@ export let ConsentMetadataDef;
  */
 export function getStoredConsentInfo(value) {
   if (value === undefined) {
-    return constructConsentInfo(
-      CONSENT_ITEM_STATE.UNKNOWN,
-      undefined,
-      undefined,
-      undefined
-    );
+    return constructConsentInfo(CONSENT_ITEM_STATE.UNKNOWN);
   }
   if (typeof value === 'boolean') {
     // legacy format
@@ -108,6 +133,7 @@ export function getStoredConsentInfo(value) {
     consentState,
     value[STORAGE_KEY.STRING],
     convertStorageMetadata(value[STORAGE_KEY.METADATA]),
+    value[STORAGE_KEY.PURPOSE_CONSENTS],
     value[STORAGE_KEY.IS_DIRTY] && value[STORAGE_KEY.IS_DIRTY] === 1
   );
 }
@@ -179,6 +205,10 @@ export function composeStoreValue(consentInfo) {
     );
   }
 
+  if (consentInfo['purposeConsents']) {
+    obj[STORAGE_KEY.PURPOSE_CONSENTS] = consentInfo['purposeConsents'];
+  }
+
   if (Object.keys(obj) == 0) {
     return null;
   }
@@ -229,7 +259,17 @@ export function isConsentInfoStoredValueSame(infoA, infoB, opt_isDirty) {
       infoA['consentMetadata'],
       infoB['consentMetadata']
     );
-    return stateEqual && stringEqual && metadataEqual && isDirtyEqual;
+    const purposeConsentsEqual = deepEquals(
+      infoA['purposeConsents'],
+      infoB['purposeConsents']
+    );
+    return (
+      stateEqual &&
+      stringEqual &&
+      metadataEqual &&
+      purposeConsentsEqual &&
+      isDirtyEqual
+    );
   }
   return false;
 }
@@ -250,6 +290,7 @@ function getLegacyStoredConsentInfo(value) {
  * @param {CONSENT_ITEM_STATE} consentState
  * @param {string=} opt_consentString
  * @param {ConsentMetadataDef=} opt_consentMetadata
+ * @param {Object<string, PURPOSE_CONSENT_STATE>=} opt_purposeConsents
  * @param {boolean=} opt_isDirty
  * @return {!ConsentInfoDef}
  */
@@ -257,12 +298,14 @@ export function constructConsentInfo(
   consentState,
   opt_consentString,
   opt_consentMetadata,
+  opt_purposeConsents,
   opt_isDirty
 ) {
   return {
     'consentState': consentState,
     'consentString': opt_consentString,
     'consentMetadata': opt_consentMetadata,
+    'purposeConsents': opt_purposeConsents,
     'isDirty': opt_isDirty,
   };
 }
@@ -271,11 +314,22 @@ export function constructConsentInfo(
  * Construct the consentMetadataDef object from values
  *
  * @param {CONSENT_STRING_TYPE=} opt_consentStringType
+ * @param {string=} opt_additionalConsent
+ * @param {boolean=} opt_gdprApplies
+ * @param {boolean=} opt_purposeOne
  * @return {!ConsentMetadataDef}
  */
-export function constructMetadata(opt_consentStringType) {
+export function constructMetadata(
+  opt_consentStringType,
+  opt_additionalConsent,
+  opt_gdprApplies,
+  opt_purposeOne
+) {
   return {
     'consentStringType': opt_consentStringType,
+    'additionalConsent': opt_additionalConsent,
+    'gdprApplies': opt_gdprApplies,
+    'purposeOne': opt_purposeOne,
   };
 }
 
@@ -343,7 +397,7 @@ export function getConsentStateValue(enumState) {
 
 /**
  * Converts ConsentMetadataDef to stroage value:
- * {'gdprApplies': true, 'consentStringType': 2} =>
+ * {'gdprApplies': true, 'additionalConsent': undefined, 'consentStringType': 2} =>
  * {'ga': true, 'cst': 2}
  *
  * @param {ConsentMetadataDef=} consentInfoMetadata
@@ -355,35 +409,77 @@ export function composeMetadataStoreValue(consentInfoMetadata) {
     storageMetadata[METADATA_STORAGE_KEY.CONSENT_STRING_TYPE] =
       consentInfoMetadata['consentStringType'];
   }
+  if (consentInfoMetadata['additionalConsent']) {
+    storageMetadata[METADATA_STORAGE_KEY.ADDITIONAL_CONSENT] =
+      consentInfoMetadata['additionalConsent'];
+  }
+  if (consentInfoMetadata['gdprApplies'] != undefined) {
+    storageMetadata[METADATA_STORAGE_KEY.GDPR_APPLIES] =
+      consentInfoMetadata['gdprApplies'];
+  }
+  if (consentInfoMetadata['purposeOne'] != undefined) {
+    storageMetadata[METADATA_STORAGE_KEY.PURPOSE_ONE] =
+      consentInfoMetadata['purposeOne'];
+  }
   return storageMetadata;
 }
 
 /**
- * TODO(micajuineho) Converts stroage metadata to ConsentMetadataDef:
+ * Converts stroage metadata to ConsentMetadataDef:
  * {'ga': true, 'cst': 2} =>
- * {'gdprApplies': true, 'consentStringType': 2}
+ * {'gdprApplies': true, 'additionalConsnet': undefined, 'consentStringType': 2}
  *
  * @param {Object|null|undefined} storageMetadata
  * @return {ConsentMetadataDef}
  */
 export function convertStorageMetadata(storageMetadata) {
-  const consentStringType =
-    storageMetadata &&
-    storageMetadata[METADATA_STORAGE_KEY.CONSENT_STRING_TYPE];
-  return constructMetadata(consentStringType);
+  if (!storageMetadata) {
+    return constructMetadata();
+  }
+  return constructMetadata(
+    storageMetadata[METADATA_STORAGE_KEY.CONSENT_STRING_TYPE],
+    storageMetadata[METADATA_STORAGE_KEY.ADDITIONAL_CONSENT],
+    storageMetadata[METADATA_STORAGE_KEY.GDPR_APPLIES],
+    storageMetadata[METADATA_STORAGE_KEY.PURPOSE_ONE]
+  );
 }
 
 /**
- * Confirm that the metadata values are valid. Remove otherwise.
+ * Confirm that the metadata values are valid.
+ * Remove and provide user error otherwise.
  * @param {JsonObject} metadata
  */
 export function assertMetadataValues(metadata) {
   const consentStringType = metadata['consentStringType'];
+  const additionalConsent = metadata['additionalConsent'];
+  const gdprApplies = metadata['gdprApplies'];
+  const purposeOne = metadata['purposeOne'];
+  const errorFields = [];
+
   if (
     consentStringType &&
     !isEnumValue(CONSENT_STRING_TYPE, consentStringType)
   ) {
     delete metadata['consentStringType'];
-    user().error(TAG, 'CMP metadata consent string type is invalid.');
+    errorFields.push('consentStringType');
+  }
+  if (additionalConsent && typeof additionalConsent != 'string') {
+    delete metadata['additionalConsent'];
+    errorFields.push('additionalConsent');
+  }
+  if (gdprApplies && typeof gdprApplies != 'boolean') {
+    delete metadata['gdprApplies'];
+    errorFields.push('gdprApplies');
+  }
+  if (purposeOne && typeof purposeOne != 'boolean') {
+    delete metadata['purposeOne'];
+    errorFields.push('purposeOne');
+  }
+  for (let i = 0; i < errorFields.length; i++) {
+    user().error(
+      TAG,
+      'Consent metadata value "%s" is invalid.',
+      errorFields[i]
+    );
   }
 }
diff --git a/extensions/amp-consent/0.1/consent-policy-manager.js b/extensions/amp-consent/0.1/consent-policy-manager.js
index 4afea2e9bf500..b0e0e898cc82c 100644
--- a/extensions/amp-consent/0.1/consent-policy-manager.js
+++ b/extensions/amp-consent/0.1/consent-policy-manager.js
@@ -14,13 +14,18 @@
  * limitations under the License.
  */
 
-import {CONSENT_ITEM_STATE, ConsentInfoDef} from './consent-info';
-import {CONSENT_POLICY_STATE} from '../../../src/consent-state';
-import {Deferred} from '../../../src/utils/promise';
-import {Observable} from '../../../src/observable';
+import {
+  CONSENT_ITEM_STATE,
+  ConsentInfoDef,
+  PURPOSE_CONSENT_STATE,
+} from './consent-info';
+import {CONSENT_POLICY_STATE} from '../../../src/core/constants/consent-state';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {Observable} from '../../../src/core/data-structures/observable';
 import {getServicePromiseForDoc} from '../../../src/service';
-import {isFiniteNumber, isObject} from '../../../src/types';
-import {map} from '../../../src/utils/object';
+import {hasOwn, map} from '../../../src/core/types/object';
+import {isFiniteNumber, isObject} from '../../../src/core/types';
+
 import {user, userAssert} from '../../../src/log';
 
 const CONSENT_STATE_MANAGER = 'consentStateManager';
@@ -79,6 +84,12 @@ export class ConsentPolicyManager {
 
     /** @private {?Object|undefined} */
     this.consentMetadata_ = null;
+
+    /** @private {?Object|undefined} */
+    this.purposeConsents_ = null;
+
+    /** @private {?function()} */
+    this.tcfConsentChangeHandler_ = null;
   }
 
   /**
@@ -183,13 +194,16 @@ export class ConsentPolicyManager {
     const state = info['consentState'];
     const consentStr = info['consentString'];
     const consentMetadata = info['consentMetadata'];
+    const purposeConsents = info['purposeConsents'];
     const {
-      consentString_: prevConsentStr,
       consentMetadata_: prevConsentMetadata,
+      consentString_: prevConsentStr,
+      purposeConsents_: prevPurposeConsents,
     } = this;
 
     this.consentString_ = consentStr;
     this.consentMetadata_ = consentMetadata;
+    this.purposeConsents_ = purposeConsents;
     if (state === CONSENT_ITEM_STATE.UNKNOWN) {
       // consent state has not been resolved yet.
       return;
@@ -208,13 +222,28 @@ export class ConsentPolicyManager {
       if (this.consentState_ === null) {
         this.consentState_ = CONSENT_ITEM_STATE.UNKNOWN;
       }
-      // consentString & consentMetadata doesn't change with dismiss action
+      // None of the supplementary consent data changes with dismiss action
       this.consentString_ = prevConsentStr;
       this.consentMetadata_ = prevConsentMetadata;
+      this.purposeConsents_ = prevPurposeConsents;
     } else {
       this.consentState_ = state;
     }
     this.consentStateChangeObservables_.fire(this.consentState_);
+    if (this.tcfConsentChangeHandler_) {
+      this.tcfConsentChangeHandler_();
+    }
+  }
+
+  /**
+   * Sets the handler that will be called when a consent change
+   * has been fired.
+   * @param {function()} callback
+   */
+  setOnPolicyChange(callback) {
+    if (!this.tcfConsentChangeHandler_) {
+      this.tcfConsentChangeHandler_ = callback;
+    }
   }
 
   /**
@@ -278,20 +307,6 @@ export class ConsentPolicyManager {
       });
   }
 
-  /**
-   * Get gdprApplies value of a policy.
-   *
-   * @param {string} policyId
-   * @return {!Promise<?boolean>}
-   */
-  getGdprApplies(policyId) {
-    return this.whenPolicyResolved(policyId)
-      .then(() => this.ConsentStateManagerPromise_)
-      .then((manager) => {
-        return manager.getConsentInstanceGdprApplies();
-      });
-  }
-
   /**
    * Get the consent string value of a policy. Return a promise that resolves
    * when the policy resolves.
@@ -316,6 +331,30 @@ export class ConsentPolicyManager {
     });
   }
 
+  /**
+   * Wait for initial consent information to be transmitted,
+   * then get consent state for this purpose.
+   *
+   * Note: Even if we have some intiial consent info, wait until all
+   * purposes have been potentially collected, then check.
+   * @param {!Array<string>} purposes
+   * @return {!Promise<boolean>}
+   */
+  whenPurposesUnblock(purposes) {
+    return this.ConsentStateManagerPromise_.then((manager) => {
+      // Wait for all purpose consents (collected through UI or update)
+      return manager.whenHasAllPurposeConsents();
+    }).then(() => {
+      if (!this.purposeConsents_) {
+        return false;
+      }
+      const shouldUnblock = (purpose) =>
+        hasOwn(this.purposeConsents_, purpose) &&
+        this.purposeConsents_[purpose] === PURPOSE_CONSENT_STATE.ACCEPTED;
+      return purposes.every(shouldUnblock);
+    });
+  }
+
   /**
    * Wait for policy instance to be registered.
    * @param {string} policyId
@@ -328,8 +367,9 @@ export class ConsentPolicyManager {
     if (!this.policyInstancesDeferred_[policyId]) {
       this.policyInstancesDeferred_[policyId] = new Deferred();
     }
-    return /** @type {!Promise} */ (this.policyInstancesDeferred_[policyId]
-      .promise);
+    return /** @type {!Promise} */ (
+      this.policyInstancesDeferred_[policyId].promise
+    );
   }
 }
 
diff --git a/extensions/amp-consent/0.1/consent-state-manager.js b/extensions/amp-consent/0.1/consent-state-manager.js
index a5f52b41c42ba..edb5e1ea66427 100644
--- a/extensions/amp-consent/0.1/consent-state-manager.js
+++ b/extensions/amp-consent/0.1/consent-state-manager.js
@@ -18,6 +18,7 @@ import {
   CONSENT_ITEM_STATE,
   ConsentInfoDef,
   ConsentMetadataDef,
+  PURPOSE_CONSENT_STATE,
   calculateLegacyStateValue,
   composeStoreValue,
   constructConsentInfo,
@@ -27,16 +28,14 @@ import {
   isConsentInfoStoredValueSame,
   recalculateConsentStateValue,
 } from './consent-info';
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Services} from '../../../src/services';
 import {assertHttpsUrl} from '../../../src/url';
-import {dev, devAssert, user} from '../../../src/log';
+import {dev, devAssert} from '../../../src/log';
+import {expandConsentEndpointUrl, getConsentCID} from './consent-config';
+import {hasOwn} from '../../../src/core/types/object';
 
 const TAG = 'CONSENT-STATE-MANAGER';
-const CID_SCOPE = 'AMP-CONSENT';
-
-/** @visibleForTesting */
-export const CONSENT_STRING_MAX_LENGTH = 1024;
 
 export class ConsentStateManager {
   /**
@@ -61,6 +60,17 @@ export class ConsentStateManager {
 
     /** @private {?function()} */
     this.consentReadyResolver_ = null;
+
+    /** @private {Object<string, PURPOSE_CONSENT_STATE>|undefined} */
+    this.purposeConsents_ = undefined;
+
+    const allPurposeConsentsDeferred = new Deferred();
+
+    /** @private {?function()} */
+    this.hasAllPurposeConsentsResolver_ = allPurposeConsentsDeferred.resolve;
+
+    /** @private {!Promise} */
+    this.hasAllPurposeConsentsPromise_ = allPurposeConsentsDeferred.promise;
   }
 
   /**
@@ -101,15 +111,51 @@ export class ConsentStateManager {
       dev().error(TAG, 'instance not registered');
       return;
     }
-    this.instance_.update(state, consentStr, opt_consentMetadata, false);
+    this.instance_.update(
+      state,
+      consentStr,
+      this.purposeConsents_,
+      opt_consentMetadata,
+      false
+    );
 
     if (this.consentChangeHandler_) {
       this.consentChangeHandler_(
-        constructConsentInfo(state, consentStr, opt_consentMetadata)
+        constructConsentInfo(
+          state,
+          consentStr,
+          opt_consentMetadata,
+          this.purposeConsents_
+        )
       );
+      // Need to be called after handler.
+      this.hasAllPurposeConsents();
     }
   }
 
+  /**
+   * Update our current purposeConsents, that will be
+   * used in subsequent calls to update().
+   * @param {!Object<string, boolean>} purposeMap
+   * @param {boolean} defaultsOnly
+   */
+  updateConsentInstancePurposes(purposeMap, defaultsOnly = false) {
+    if (!this.purposeConsents_) {
+      this.purposeConsents_ = {};
+    }
+    const purposes = Object.keys(purposeMap);
+    purposes.forEach((purpose) => {
+      // If defaults only, then only update if it doesn't exist.
+      if (defaultsOnly && hasOwn(this.purposeConsents_, purpose)) {
+        return;
+      }
+      const value = !!purposeMap[purpose]
+        ? PURPOSE_CONSENT_STATE.ACCEPTED
+        : PURPOSE_CONSENT_STATE.REJECTED;
+      this.purposeConsents_[purpose] = value;
+    });
+  }
+
   /**
    * Get last consent instance stored.
    * @return {Promise<!ConsentInfoDef>}
@@ -166,14 +212,21 @@ export class ConsentStateManager {
   }
 
   /**
-   * Sets a promise which resolves to a boolean that is to be returned
-   * from the remote endpoint.
-   *
-   * @param {!Promise<?boolean>} gdprAppliesPromise
+   * Signifies that we collected all the purpose consents
+   * from our source of truth (i.e locally stored or updated)
    */
-  setConsentInstanceGdprApplies(gdprAppliesPromise) {
-    devAssert(this.instance_, '%s: cannot find the instance', TAG);
-    this.instance_.gdprAppliesPromise = gdprAppliesPromise;
+  hasAllPurposeConsents() {
+    this.hasAllPurposeConsentsResolver_();
+  }
+
+  /**
+   * Wait for our purpose consents to be collected,
+   * either locally or from update. Let amp-consent handle
+   * when to resolve the promis (via update() or directly).
+   * @return {!Promise}
+   */
+  whenHasAllPurposeConsents() {
+    return this.hasAllPurposeConsentsPromise_;
   }
 
   /**
@@ -195,16 +248,6 @@ export class ConsentStateManager {
     return this.instance_.sharedDataPromise;
   }
 
-  /**
-   * Returns a promise that resolves to a gdprApplies value
-   *
-   * @return {?Promise<?boolean>}
-   */
-  getConsentInstanceGdprApplies() {
-    devAssert(this.instance_, '%s: cannot find the instance', TAG);
-    return this.instance_.gdprAppliesPromise;
-  }
-
   /**
    * Returns a promise that's resolved when consent instance is ready.
    * @return {*} TODO(#23582): Specify return type
@@ -251,13 +294,8 @@ export class ConsentInstance {
     /** @public {?Promise<Object>} */
     this.sharedDataPromise = null;
 
-    // TODO(micajuineho) remove this in favor
-    // of consolidation with consentString
-    /** @public {?Promise<?boolean>} */
-    this.gdprAppliesPromise = null;
-
     /** @private {Promise<!../../../src/service/storage-impl.Storage>} */
-    this.storagePromise_ = Services.storageForDoc(ampdoc);
+    this.storagePromise_ = Services.storageForTopLevelDoc(ampdoc);
 
     /** @private {?ConsentInfoDef}*/
     this.localConsentInfo_ = null;
@@ -296,6 +334,7 @@ export class ConsentInstance {
       this.update(
         info['consentState'],
         info['consentString'],
+        info['purposeConsents'],
         info['consentMetadata'],
         true
       );
@@ -306,24 +345,29 @@ export class ConsentInstance {
    * Update the local consent state list
    * @param {!CONSENT_ITEM_STATE} state
    * @param {string=} consentString
+   * @param {Object<string, PURPOSE_CONSENT_STATE>=} purposeConsents
    * @param {ConsentMetadataDef=} opt_consentMetadata
    * @param {boolean=} opt_systemUpdate
    */
-  update(state, consentString, opt_consentMetadata, opt_systemUpdate) {
+  update(
+    state,
+    consentString,
+    purposeConsents,
+    opt_consentMetadata,
+    opt_systemUpdate
+  ) {
     const localState =
       this.localConsentInfo_ && this.localConsentInfo_['consentState'];
     const calculatedState = recalculateConsentStateValue(state, localState);
 
     if (state === CONSENT_ITEM_STATE.DISMISSED) {
-      const localConsentStr =
-        this.localConsentInfo_ && this.localConsentInfo_['consentString'];
-      const localConsentMetadata =
-        this.localConsentInfo_ && this.localConsentInfo_['consentMetadata'];
-      // If state is dismissed, use the old consent string and metadata.
+      // If state is dismissed, use the old consent string, metadata,
+      // and puporse consents.
       this.localConsentInfo_ = constructConsentInfo(
         calculatedState,
-        localConsentStr,
-        localConsentMetadata
+        this.localConsentInfo_?.consentString,
+        this.localConsentInfo_?.consentMetadata,
+        this.localConsentInfo_?.purposeConsents
       );
       return;
     }
@@ -336,6 +380,7 @@ export class ConsentInstance {
         calculatedState,
         consentString,
         opt_consentMetadata,
+        purposeConsents,
         true
       );
     } else {
@@ -344,7 +389,8 @@ export class ConsentInstance {
       this.localConsentInfo_ = constructConsentInfo(
         calculatedState,
         consentString,
-        opt_consentMetadata
+        opt_consentMetadata,
+        purposeConsents
       );
     }
 
@@ -352,6 +398,7 @@ export class ConsentInstance {
       calculatedState,
       consentString,
       opt_consentMetadata,
+      purposeConsents,
       this.hasDirtyBitNext_
     );
 
@@ -390,31 +437,13 @@ export class ConsentInstance {
         return;
       }
 
-      const consentStr = consentInfo['consentString'];
-      if (consentStr && consentStr.length > CONSENT_STRING_MAX_LENGTH) {
-        // Verify the length of consentString.
-        // 1024 * 4/3 (base64) = 1336 bytes.
-        user().error(
-          TAG,
-          'Cannot store consentString which length exceeds %s. ' +
-            'Previous stored consentInfo will be cleared',
-          CONSENT_STRING_MAX_LENGTH
-        );
-        // If new consentInfo value cannot be stored, need to remove previous
-        // value
-        storage.remove(this.storageKey_);
-        // TODO: Good to have a way to inform CMP service in this case
-        return;
-      }
-
-      // TODO: enforce metadata limits here (if any)
-
       const value = composeStoreValue(consentInfo);
       if (value == null) {
         // Value can be false, do not use !value check
         // Nothing to store to localStorage
         return;
       }
+
       this.savedConsentInfo_ = consentInfo;
       storage.setNonBoolean(this.storageKey_, value);
       this.sendUpdateHrefRequest_(consentInfo);
@@ -482,13 +511,7 @@ export class ConsentInstance {
     const legacyConsentState = calculateLegacyStateValue(
       consentInfo['consentState']
     );
-    const cidPromise = Services.cidForDoc(this.ampdoc_).then((cid) => {
-      return cid.get(
-        {scope: CID_SCOPE, createCookieIfNotPresent: true},
-        Promise.resolve()
-      );
-    });
-    cidPromise.then((userId) => {
+    getConsentCID(this.ampdoc_).then((userId) => {
       const request = /** @type {!JsonObject} */ ({
         // Unfortunately we need to keep the name to be backward compatible
         'consentInstanceId': this.id_,
@@ -506,6 +529,9 @@ export class ConsentInstance {
       if (consentInfo['consentMetadata']) {
         request['consentMetadata'] = consentInfo['consentMetadata'];
       }
+      if (consentInfo['purposeConsents']) {
+        request['purposeConsents'] = consentInfo['purposeConsents'];
+      }
       const init = {
         credentials: 'include',
         method: 'POST',
@@ -513,10 +539,12 @@ export class ConsentInstance {
         ampCors: false,
       };
       this.ampdoc_.whenFirstVisible().then(() => {
-        Services.xhrFor(this.ampdoc_.win).fetchJson(
-          /** @type {string} */ (this.onUpdateHref_),
-          init
-        );
+        expandConsentEndpointUrl(
+          this.ampdoc_.getHeadNode(),
+          /** @type {string} */ (this.onUpdateHref_)
+        ).then((expandedUpdateHref) => {
+          Services.xhrFor(this.ampdoc_.win).fetchJson(expandedUpdateHref, init);
+        });
       });
     });
   }
diff --git a/extensions/amp-consent/0.1/consent-ui.js b/extensions/amp-consent/0.1/consent-ui.js
index 66e6f2a41cfb1..6f37c2ec8933b 100644
--- a/extensions/amp-consent/0.1/consent-ui.js
+++ b/extensions/amp-consent/0.1/consent-ui.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Services} from '../../../src/services';
 import {assertHttpsUrl} from '../../../src/url';
 import {dev, user} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {
   elementByTag,
   insertAtStart,
@@ -27,6 +27,7 @@ import {
   tryFocus,
   whenUpgradedToCustomElement,
 } from '../../../src/dom';
+import {expandConsentEndpointUrl} from './consent-config';
 import {getConsentStateValue} from './consent-info';
 import {getData} from '../../../src/event-helper';
 import {getServicePromiseForDoc} from '../../../src/service';
@@ -36,14 +37,22 @@ import {setImportantStyles, setStyles, toggle} from '../../../src/style';
 
 const TAG = 'amp-consent-ui';
 const CONSENT_STATE_MANAGER = 'consentStateManager';
-const DEFAULT_INITIAL_HEIGHT = '30vh';
+const MINIMUM_INITIAL_HEIGHT = 10;
+const DEFAULT_INITIAL_HEIGHT = 30;
+const MODAL_HEIGHT_ENABLED = 60;
+const MAX_INITIAL_HEIGHT = 80;
 const DEFAULT_ENABLE_BORDER = true;
 const FULLSCREEN_SUCCESS = 'Entering fullscreen.';
 const FULLSCREEN_ERROR =
   'Could not enter fullscreen. Fullscreen is only supported ' +
-  'when the iframe is visible and after user interaction.';
+  'when the iframe is visible as a bottom sheet and after ' +
+  'user interaction.';
 const CONSENT_PROMPT_CAPTION = 'User Consent Prompt';
 const BUTTON_ACTION_CAPTION = 'Focus Prompt';
+const CANCEL_OVERLAY = 'cancelFullOverlay';
+const REQUEST_OVERLAY = 'requestFullOverlay';
+
+const IFRAME_RUNNING_TIMEOUT = 1000;
 
 export const actionState = {
   error: 'error',
@@ -58,13 +67,15 @@ export const ampConsentMessageType = {
 export const consentUiClasses = {
   iframeFullscreen: 'i-amphtml-consent-ui-iframe-fullscreen',
   iframeActive: 'i-amphtml-consent-ui-iframe-active',
+  modal: 'i-amphtml-consent-ui-modal',
   in: 'i-amphtml-consent-ui-in',
   loading: 'i-amphtml-consent-ui-loading',
   fill: 'i-amphtml-consent-ui-fill',
   placeholder: 'i-amphtml-consent-ui-placeholder',
   mask: 'i-amphtml-consent-ui-mask',
-  enableBorder: 'i-amphtml-consent-ui-enable-border',
+  borderEnabled: 'i-amphtml-consent-ui-border-enabled',
   screenReaderDialog: 'i-amphtml-consent-alertdialog',
+  iframeTransform: 'i-amphtml-consent-ui-iframe-transform',
 };
 
 export class ConsentUI {
@@ -112,12 +123,6 @@ export class ConsentUI {
     /** @private {boolean} */
     this.srAlertShown_ = false;
 
-    /** @private {boolean} */
-    this.restrictFullscreenOn_ = isExperimentOn(
-      baseInstance.win,
-      'amp-consent-restrict-fullscreen'
-    );
-
     /** @private {boolean} */
     this.scrollEnabled_ = true;
 
@@ -151,6 +156,9 @@ export class ConsentUI {
     /** @private {?Deferred} */
     this.iframeReady_ = null;
 
+    /** @private {boolean} */
+    this.removeIframe_ = false;
+
     /** @private {?JsonObject} */
     this.clientConfig_ = null;
 
@@ -158,10 +166,13 @@ export class ConsentUI {
     this.placeholder_ = null;
 
     /** @private {string} */
-    this.initialHeight_ = DEFAULT_INITIAL_HEIGHT;
+    this.initialHeight_ = `${DEFAULT_INITIAL_HEIGHT}vh`;
+
+    /** @private {boolean} */
+    this.borderEnabled_ = DEFAULT_ENABLE_BORDER;
 
     /** @private {boolean} */
-    this.enableBorder_ = DEFAULT_ENABLE_BORDER;
+    this.modalEnabled_ = false;
 
     /** @private {boolean} */
     this.isActionPromptTrigger_ = false;
@@ -169,6 +180,14 @@ export class ConsentUI {
     /** @private @const {!Function} */
     this.boundHandleIframeMessages_ = this.handleIframeMessages_.bind(this);
 
+    /** @private {?Promise<string>} */
+    this.promptUISrcPromise_ = null;
+
+    this.isGranularConsentExperimentOn_ = isExperimentOn(
+      this.win_,
+      'amp-consent-granular-consent'
+    );
+
     this.init_(config, opt_postPromptUI);
   }
 
@@ -206,7 +225,13 @@ export class ConsentUI {
     } else if (promptUISrc) {
       // Create an iframe element with the provided src
       this.isCreatedIframe_ = true;
-      this.ui_ = this.createPromptIframeFromSrc_(promptUISrc);
+      assertHttpsUrl(promptUISrc, this.parent_);
+      // TODO: Preconnect to the promptUISrc?
+      this.promptUISrcPromise_ = expandConsentEndpointUrl(
+        this.parent_,
+        promptUISrc
+      );
+      this.ui_ = this.createPromptIframe_(promptUISrc);
       this.placeholder_ = this.createPlaceholder_();
       this.clientConfig_ = config['clientConfig'] || null;
     }
@@ -221,13 +246,17 @@ export class ConsentUI {
       // No prompt UI specified, nothing to do
       return;
     }
+    if (this.isPostPrompt_ && !this.parent_.contains(this.ui_)) {
+      toggle(this.ui_, true);
+      return;
+    }
     toggle(dev().assertElement(this.parent_), true);
     const {classList} = this.parent_;
     classList.add('amp-active');
     classList.remove('amp-hidden');
     // Add to fixed layer
     this.baseInstance_.getViewport().addToFixedLayer(this.parent_);
-    if (this.isCreatedIframe_) {
+    if (this.isCreatedIframe_ && this.promptUISrcPromise_) {
       // show() can be called multiple times, but notificationsUiManager
       // ensures that only 1 is shown at a time, so no race condition here
       this.isActionPromptTrigger_ = isActionPromptTrigger;
@@ -248,10 +277,6 @@ export class ConsentUI {
           this.maybeShowSrAlert_();
 
           this.showIframe_();
-
-          if (!this.isPostPrompt_ && !this.restrictFullscreenOn_) {
-            this.ui_./*OK*/ focus();
-          }
         });
       });
     } else {
@@ -266,15 +291,7 @@ export class ConsentUI {
           this.elementWithFocusBeforeShowing_ = this.document_.activeElement;
 
           this.maybeShowOverlay_();
-
-          // scheduleLayout is required everytime because some AMP element may
-          // get un laid out after toggle display (#unlayoutOnPause)
-          // for example <amp-iframe>
-          Services.ownersForDoc(this.baseInstance_.element).scheduleLayout(
-            this.baseInstance_.element,
-            this.ui_
-          );
-
+          this.resume();
           this.ui_./*OK*/ focus();
         }
       };
@@ -284,7 +301,7 @@ export class ConsentUI {
       // at build time. (see #18841).
       if (isAmpElement(this.ui_)) {
         whenUpgradedToCustomElement(this.ui_)
-          .then(() => this.ui_.whenBuilt())
+          .then(() => this.ui_.build())
           .then(() => show());
       } else {
         show();
@@ -303,6 +320,8 @@ export class ConsentUI {
       return;
     }
 
+    this.pause();
+
     this.baseInstance_.mutateElement(() => {
       if (this.isCreatedIframe_) {
         this.resetIframe_();
@@ -344,13 +363,41 @@ export class ConsentUI {
     });
   }
 
+  /** */
+  pause() {
+    if (this.ui_) {
+      Services.ownersForDoc(this.baseInstance_.element).schedulePause(
+        this.baseInstance_.element,
+        this.ui_
+      );
+    }
+  }
+
+  /** */
+  resume() {
+    if (this.ui_) {
+      // scheduleLayout is required everytime because some AMP element may
+      // get un laid out after toggle display (#unlayoutOnPause)
+      // for example <amp-iframe>
+      Services.ownersForDoc(this.baseInstance_.element).scheduleLayout(
+        this.baseInstance_.element,
+        this.ui_
+      );
+      Services.ownersForDoc(this.baseInstance_.element).scheduleResume(
+        this.baseInstance_.element,
+        this.ui_
+      );
+    }
+  }
+
   /**
    * Handle the ready event from the CMP iframe
    * @param {!JsonObject} data
    */
   handleReady_(data) {
-    this.initialHeight_ = DEFAULT_INITIAL_HEIGHT;
-    this.enableBorder_ = DEFAULT_ENABLE_BORDER;
+    this.initialHeight_ = `${DEFAULT_INITIAL_HEIGHT}vh`;
+    this.borderEnabled_ = DEFAULT_ENABLE_BORDER;
+    this.modalEnabled_ = false;
 
     // Set our initial height
     if (data['initialHeight']) {
@@ -359,14 +406,25 @@ export class ConsentUI {
         data['initialHeight'].indexOf('vh') >= 0
       ) {
         const dataHeight = parseInt(data['initialHeight'], 10);
-
-        if (dataHeight >= 10 && dataHeight <= 60) {
+        // Set initialHeight to max height fallback if applicable
+        this.initialHeight_ =
+          dataHeight >= MAX_INITIAL_HEIGHT
+            ? `${MAX_INITIAL_HEIGHT}vh`
+            : this.initialHeight_;
+
+        if (
+          dataHeight >= MINIMUM_INITIAL_HEIGHT &&
+          dataHeight <= MAX_INITIAL_HEIGHT
+        ) {
           this.initialHeight_ = `${dataHeight}vh`;
+          this.modalEnabled_ = dataHeight > MODAL_HEIGHT_ENABLED;
+          // Force overlay if modal is enabled.
+          this.overlayEnabled_ = this.modalEnabled_ || this.overlayEnabled_;
         } else {
           user().error(
             TAG,
             `Inavlid initial height: ${data['initialHeight']}.` +
-              'Minimum: 10vh. Maximum: 60vh.'
+              `Minimum: ${MINIMUM_INITIAL_HEIGHT}vh. Maximum: ${MAX_INITIAL_HEIGHT}vh.`
           );
         }
       } else {
@@ -378,9 +436,9 @@ export class ConsentUI {
       }
     }
 
-    // Enable/disable our border
-    if (data['border'] === false) {
-      this.enableBorder_ = false;
+    // Disable our border, if set to false and not modal view.
+    if (data['border'] === false && !this.modalEnabled_) {
+      this.borderEnabled_ = false;
     }
 
     this.iframeReady_.resolve();
@@ -396,11 +454,7 @@ export class ConsentUI {
 
     this.resetAnimationStyles_();
 
-    this.viewer_.sendMessage(
-      'requestFullOverlay',
-      dict(),
-      /* cancelUnsent */ true
-    );
+    this.sendViewerEvent_(REQUEST_OVERLAY);
 
     const {classList} = this.parent_;
     classList.add(consentUiClasses.iframeFullscreen);
@@ -410,16 +464,23 @@ export class ConsentUI {
     this.isFullscreen_ = true;
   }
 
+  /**
+   * Send viewer an event.
+   * @param {string} event
+   */
+  sendViewerEvent_(event) {
+    this.viewer_.sendMessage(event, dict(), /* cancelUnsent */ true);
+  }
+
   /**
    * Create the iframe if promptUISrc is valid
    * @param {string} promptUISrc
    * @return {!Element}
    */
-  createPromptIframeFromSrc_(promptUISrc) {
+  createPromptIframe_(promptUISrc) {
     const iframe = this.parent_.ownerDocument.createElement('iframe');
     const sandbox = ['allow-scripts', 'allow-popups'];
-    iframe.src = assertHttpsUrl(promptUISrc, this.parent_);
-    const allowSameOrigin = this.allowSameOrigin_(iframe.src);
+    const allowSameOrigin = this.allowSameOrigin_(promptUISrc);
     if (allowSameOrigin) {
       sandbox.push('allow-same-origin');
     }
@@ -439,7 +500,6 @@ export class ConsentUI {
     const urlService = Services.urlForDoc(this.parent_);
     const srcUrl = urlService.parse(src);
     const containerUrl = urlService.parse(this.ampdoc_.getUrl());
-
     return srcUrl.origin != containerUrl.origin;
   }
 
@@ -482,7 +542,7 @@ export class ConsentUI {
       return consentStateManager
         .getLastConsentInstanceInfo()
         .then((consentInfo) => {
-          return dict({
+          const returnValue = dict({
             'clientConfig': this.clientConfig_,
             // consentState to be deprecated
             'consentState': getConsentStateValue(consentInfo['consentState']),
@@ -494,6 +554,10 @@ export class ConsentUI {
             'promptTrigger': this.isActionPromptTrigger_ ? 'action' : 'load',
             'isDirty': !!consentInfo['isDirty'],
           });
+          if (this.isGranularConsentExperimentOn_) {
+            returnValue['purposeConsents'] = consentInfo['purposeConsents'];
+          }
+          return returnValue;
         });
     });
   }
@@ -512,10 +576,14 @@ export class ConsentUI {
     classList.add(consentUiClasses.loading);
     toggle(dev().assertElement(this.ui_), false);
 
-    const iframePromise = this.getClientInfoPromise_().then((clientInfo) => {
-      this.ui_.setAttribute('name', JSON.stringify(clientInfo));
-      this.win_.addEventListener('message', this.boundHandleIframeMessages_);
-      insertAtStart(this.parent_, dev().assertElement(this.ui_));
+    const iframePromise = this.promptUISrcPromise_.then((expandedSrc) => {
+      this.removeIframe_ = false;
+      this.ui_.src = expandedSrc;
+      return this.getClientInfoPromise_().then((clientInfo) => {
+        this.ui_.setAttribute('name', JSON.stringify(clientInfo));
+        this.win_.addEventListener('message', this.boundHandleIframeMessages_);
+        insertAtStart(this.parent_, dev().assertElement(this.ui_));
+      });
     });
 
     return Promise.all([
@@ -536,6 +604,10 @@ export class ConsentUI {
     classList.add(consentUiClasses.iframeActive);
     toggle(dev().assertElement(this.placeholder_), false);
     toggle(dev().assertElement(this.ui_), true);
+    if (this.modalEnabled_) {
+      classList.add(consentUiClasses.modal);
+      tryFocus(dev().assertElement(this.ui_));
+    }
 
     // Remove transition styles added by the fixed layer
     // Transform styles applied by us for the animation.
@@ -567,68 +639,73 @@ export class ConsentUI {
    */
   resetIframe_() {
     const {classList} = this.parent_;
-
-    // Remove the iframe active to go back to our normal height
+    // It is ok to remove classes even when they're not present
     classList.remove(consentUiClasses.iframeActive);
+    classList.remove(consentUiClasses.modal);
+    classList.remove(consentUiClasses.borderEnabled);
 
     this.win_.removeEventListener('message', this.boundHandleIframeMessages_);
     classList.remove(consentUiClasses.iframeFullscreen);
+    // TODO(micajuineho) consolidate code to user viewport
     if (this.isFullscreen_) {
-      this.viewer_.sendMessage(
-        'cancelFullOverlay',
-        dict(),
-        /* cancelUnsent */ true
-      );
+      this.sendViewerEvent_(CANCEL_OVERLAY);
+    } else if (this.modalEnabled_) {
+      this.viewport_.leaveLightboxMode();
     }
     this.isFullscreen_ = false;
     classList.remove(consentUiClasses.in);
     this.isIframeVisible_ = false;
     this.ui_.removeAttribute('name');
     toggle(dev().assertElement(this.placeholder_), false);
-    removeElement(dev().assertElement(this.ui_));
+    this.removeIframe_ = true;
+    this.win_.setTimeout(() => {
+      if (this.removeIframe_) {
+        removeElement(dev().assertElement(this.ui_));
+      }
+    }, IFRAME_RUNNING_TIMEOUT);
   }
 
   /**
    * If this is the first time viewing the iframe, create
    * an 'invisible' alert dialog with a title and a button.
    * Clicking on the button will transfer focus to the iframe.
+   *
+   * This only applies for bottom pane iframes.
    */
   maybeShowSrAlert_() {
-    if (this.restrictFullscreenOn_) {
-      // If the SR alert has been shown, don't show it again
-      if (this.srAlertShown_) {
-        return;
-      }
+    // If the SR alert has been shown, don't show it again
+    if (this.srAlertShown_ || this.modalEnabled_) {
+      return;
+    }
 
-      const alertDialog = this.document_.createElement('div');
-      const button = this.document_.createElement('button');
-      const titleDiv = this.document_.createElement('div');
+    const alertDialog = this.document_.createElement('div');
+    const button = this.document_.createElement('button');
+    const titleDiv = this.document_.createElement('div');
 
-      alertDialog.setAttribute('role', 'alertdialog');
+    alertDialog.setAttribute('role', 'alertdialog');
 
-      titleDiv.textContent = this.consentPromptCaption_;
-      button.textContent = this.buttonActionCaption_;
-      button.onclick = () => {
-        tryFocus(dev().assertElement(this.ui_));
-      };
+    titleDiv.textContent = this.consentPromptCaption_;
+    button.textContent = this.buttonActionCaption_;
+    button.onclick = () => {
+      tryFocus(dev().assertElement(this.ui_));
+    };
 
-      alertDialog.appendChild(titleDiv);
-      alertDialog.appendChild(button);
+    alertDialog.appendChild(titleDiv);
+    alertDialog.appendChild(button);
 
-      // Style to be visiblly hidden, but not hidden from the SR
-      const {classList} = alertDialog;
-      classList.add(consentUiClasses.screenReaderDialog);
+    // Style to be visiblly hidden, but not hidden from the SR
+    const {classList} = alertDialog;
+    classList.add(consentUiClasses.screenReaderDialog);
 
-      this.baseInstance_.element.appendChild(alertDialog);
-      tryFocus(button);
+    this.baseInstance_.element.appendChild(alertDialog);
+    tryFocus(button);
 
-      // SR alert was shown when consent prompt loaded for
-      // the first time. Don't show it again
-      this.srAlertShown_ = true;
+    // SR alert was shown when consent prompt loaded for
+    // the first time. Don't show it again
+    this.srAlertShown_ = true;
 
-      // Keep reference of the SR alert to remove later
-      this.srAlert_ = alertDialog;
-    }
+    // Keep reference of the SR alert to remove later
+    this.srAlert_ = alertDialog;
   }
 
   /**
@@ -656,6 +733,7 @@ export class ConsentUI {
    * Apply styles for ready event
    */
   applyInitialStyles_() {
+    const {classList} = this.parent_;
     // Apply our initial height and border
     if (this.ui_) {
       setStyles(this.ui_, {
@@ -663,11 +741,15 @@ export class ConsentUI {
       });
     }
     setImportantStyles(this.parent_, {
-      transform: `translate3d(0px, calc(100% - ${this.initialHeight_}), 0px)`,
+      '--i-amphtml-modal-height': `${this.initialHeight_}`,
     });
-    if (this.enableBorder_) {
-      const {classList} = this.parent_;
-      classList.add(consentUiClasses.enableBorder);
+    classList.add(consentUiClasses.iframeTransform);
+    // Border is default with modal enabled and option with non-modal
+    if (this.borderEnabled_ || this.modalEnabled_) {
+      classList.add(consentUiClasses.borderEnabled);
+    }
+    if (this.modalEnabled_) {
+      this.viewport_.enterLightboxMode();
     }
   }
 
@@ -771,10 +853,11 @@ export class ConsentUI {
       // Do nothing iff:
       // - iframe not visible or
       // - iframe not active element && not called via actionPromptTrigger
+      // - iframe is not modalEnabled
       if (
         !this.isIframeVisible_ ||
-        (this.restrictFullscreenOn_ &&
-          this.document_.activeElement !== this.ui_ &&
+        this.modalEnabled_ ||
+        (this.document_.activeElement !== this.ui_ &&
           !this.isActionPromptTrigger_)
       ) {
         user().warn(TAG, FULLSCREEN_ERROR);
diff --git a/extensions/amp-consent/0.1/cookie-writer.js b/extensions/amp-consent/0.1/cookie-writer.js
new file mode 100644
index 0000000000000..52297012aa6af
--- /dev/null
+++ b/extensions/amp-consent/0.1/cookie-writer.js
@@ -0,0 +1,245 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {BASE_CID_MAX_AGE_MILLIS} from '../../../src/service/cid-impl';
+import {ConsentLinkerReader} from './linker-reader';
+import {Services} from '../../../src/services';
+import {getMode} from '../../../src/mode';
+import {hasOwn} from '../../../src/core/types/object';
+import {isInFie} from '../../../src/iframe-helper';
+import {isObject} from '../../../src/core/types';
+import {isProxyOrigin} from '../../../src/url';
+import {setCookie} from '../../../src/cookies';
+import {user} from '../../../src/log';
+
+const TAG = 'amp-consent/cookie-writer';
+
+const RESERVED_KEYS = {
+  'referrerDomains': true,
+  'enabled': true,
+  'cookiePath': true,
+  'cookieMaxAge': true,
+  'cookieSecure': true,
+  'cookieDomain': true,
+};
+
+/** @const @type {!Object<string, boolean>} */
+const CONSENT_COOKIE_WRITE_VARS_ALLOWED_LIST = {
+  'LINKER_PARAM': true,
+};
+
+export class CookieWriter {
+  /**
+   * @param {!Window} win
+   * @param {!Element} element
+   * @param {!JsonObject} config
+   */
+  constructor(win, element, config) {
+    /** @private {!Window} */
+    this.win_ = win;
+
+    /** @private {!Element} */
+    this.element_ = element;
+
+    /** @private {?Promise} */
+    this.writePromise_ = null;
+
+    /** @private {!JsonObject} */
+    this.config_ = config;
+
+    this.linkerReader_ = new ConsentLinkerReader(win);
+  }
+
+  /**
+   * @return {!Promise}
+   */
+  write() {
+    if (!this.writePromise_) {
+      this.writePromise_ = this.init_();
+    }
+    return this.writePromise_;
+  }
+
+  /**
+   * Parse the config and write to cookie
+   * Config looks like
+   * cookies: {
+   *   enabled: true/false, //Default to true
+   *   cookieNameA: {
+   *     value: cookieValueA (LINKER_PARAM)
+   *   },
+   *   cookieValueB: {
+   *     value: cookieValueB
+   *   }
+   *   ...
+   * }
+   * @return {!Promise}
+   */
+  init_() {
+    // TODO: Need the consider the case for shadow doc.
+    if (!this.isCookieAllowed_(this.win_, this.element_)) {
+      // Note: It's important to check origin here so that setCookie doesn't
+      // throw error "should not attempt ot set cookie on proxy origin"
+      return Promise.resolve();
+    }
+
+    if (!hasOwn(this.config_, 'cookies')) {
+      return Promise.resolve();
+    }
+
+    if (!isObject(this.config_['cookies'])) {
+      user().error(TAG, 'cookies config must be an object');
+      return Promise.resolve();
+    }
+
+    const inputConfig = this.config_['cookies'];
+
+    if (inputConfig['enabled'] === false) {
+      // Enabled by default
+      // TODO: Allow indiviual cookie object to override the value
+      return Promise.resolve();
+    }
+
+    const cookieExpireDateMs = this.getCookieMaxAgeMs_(inputConfig);
+
+    const ids = Object.keys(inputConfig);
+    const promises = [];
+    for (let i = 0; i < ids.length; i++) {
+      const cookieName = ids[i];
+      const cookieObj = inputConfig[cookieName];
+      if (this.isValidCookieConfig_(cookieName, cookieObj)) {
+        promises.push(
+          this.expandAndWrite_(
+            cookieName,
+            cookieObj['value'],
+            cookieExpireDateMs
+          )
+        );
+      }
+    }
+    return Promise.all(promises);
+  }
+
+  /**
+   * Retrieves cookieMaxAge from given config, provides default value if no
+   * value is found or value is invalid
+   * @param {JsonObject} inputConfig
+   * @return {number}
+   */
+  getCookieMaxAgeMs_(inputConfig) {
+    if (!hasOwn(inputConfig, 'cookieMaxAge')) {
+      return BASE_CID_MAX_AGE_MILLIS;
+    }
+
+    const cookieMaxAge = Number(inputConfig['cookieMaxAge']);
+
+    // 0 is a special case which we allow
+    if (!cookieMaxAge && cookieMaxAge !== 0) {
+      user().error(
+        TAG,
+        'invalid cookieMaxAge %s, falling back to default value (1 year)',
+        inputConfig['cookieMaxAge']
+      );
+      return BASE_CID_MAX_AGE_MILLIS;
+    }
+
+    if (cookieMaxAge <= 0) {
+      user().warn(
+        TAG,
+        'cookieMaxAge %s less than or equal to 0, cookie will immediately expire',
+        inputConfig['cookieMaxAge']
+      );
+    }
+
+    // convert cookieMaxAge (sec) to milliseconds
+    return cookieMaxAge * 1000;
+  }
+
+  /**
+   * Check whether the cookie value is supported. Currently only
+   * support LINKER_PARAM(***, ***)
+   *
+   * CookieObj should looks like
+   * cookieName: {
+   *  value: string (cookieValue),
+   * }
+   * @param {string} cookieName
+   * @param {*} cookieConfig
+   * @return {boolean}
+   */
+  isValidCookieConfig_(cookieName, cookieConfig) {
+    if (RESERVED_KEYS[cookieName]) {
+      return false;
+    }
+
+    if (!isObject(cookieConfig)) {
+      user().error(TAG, 'cookieValue must be configured in an object');
+      return false;
+    }
+
+    if (!hasOwn(cookieConfig, 'value')) {
+      user().error(TAG, 'value is required in the cookieValue object');
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Expand the value and write to cookie if necessary
+   * @param {string} cookieName
+   * @param {string} cookieValue
+   * @param {number} cookieExpireDateMs
+   * @return {!Promise}
+   */
+  expandAndWrite_(cookieName, cookieValue, cookieExpireDateMs) {
+    return Services.urlReplacementsForDoc(this.element_)
+      .expandStringAsync(
+        cookieValue,
+        {
+          'LINKER_PARAM': (name, id) => this.linkerReader_.get(name, id),
+        },
+        CONSENT_COOKIE_WRITE_VARS_ALLOWED_LIST
+      )
+      .then((value) => {
+        // Note: We ignore empty cookieValue, that means currently we don't
+        // provide a way to overwrite or erase existing cookie
+        if (value) {
+          const expireDate = Date.now() + cookieExpireDateMs;
+          setCookie(this.win_, cookieName, value, expireDate, {
+            highestAvailableDomain: true,
+          });
+        }
+      })
+      .catch((e) => {
+        user().error(TAG, 'Error expanding cookie string', e);
+      });
+  }
+
+  /**
+   * Determine if cookie writing/reading feature is supported in current
+   * environment.
+   * Disable cookie writer in friendly iframe and proxy origin and inabox.
+   * @return {boolean}
+   */
+  isCookieAllowed_() {
+    return (
+      !isInFie(this.element_) &&
+      !isProxyOrigin(this.win_.location) &&
+      !(getMode(this.win_).runtime == 'inabox')
+    );
+  }
+}
diff --git a/extensions/amp-consent/0.1/crc32.js b/extensions/amp-consent/0.1/crc32.js
new file mode 100644
index 0000000000000..5d50a04d5d373
--- /dev/null
+++ b/extensions/amp-consent/0.1/crc32.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {utf8Encode} from '../../../src/core/types/string/bytes';
+
+/**
+ * Standard key for CRC32
+ * https://en.wikipedia.org/wiki/Cyclic_redundancy_check#Polynomial_representations_of_cyclic_redundancy_checks
+ * @const {number}
+ */
+const CRC32_KEY = 0xedb88320;
+
+/** @private {?Array<number>} */
+let crcTable = null;
+
+/**
+ * Returns CRC32 checksum for provided string.
+ * @param {string} str
+ * @return {number}
+ */
+export function crc32(str) {
+  if (!crcTable) {
+    crcTable = makeCrcTable();
+  }
+
+  const bytes = utf8Encode(str);
+
+  // Shrink to 32 bits.
+  let crc = -1 >>> 0;
+  for (let i = 0; i < bytes.length; i++) {
+    const lookupIndex = (crc ^ bytes[i]) & 0xff;
+    crc = (crc >>> 8) ^ crcTable[lookupIndex];
+  }
+  return (crc ^ -1) >>> 0;
+}
+
+/**
+ * Generates CRC lookup table.
+ * @return {!Array<number>}
+ */
+function makeCrcTable() {
+  const crcTable = new Array(256);
+  for (let i = 0; i < 256; i++) {
+    let c = i;
+    for (let j = 0; j < 8; j++) {
+      if (c & 1) {
+        c = (c >>> 1) ^ CRC32_KEY;
+      } else {
+        c = c >>> 1;
+      }
+    }
+    crcTable[i] = c;
+  }
+  return crcTable;
+}
diff --git a/extensions/amp-consent/0.1/linker-reader.js b/extensions/amp-consent/0.1/linker-reader.js
new file mode 100644
index 0000000000000..7c5f3870b607a
--- /dev/null
+++ b/extensions/amp-consent/0.1/linker-reader.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {hasOwn} from '../../../src/core/types/object';
+import {parseLinker} from './linker';
+import {parseQueryString} from '../../../src/core/types/string/url';
+import {user} from '../../../src/log';
+
+const TAG = 'amp-consent/linker-reader';
+
+export class ConsentLinkerReader {
+  /**
+   * Creates an instance of ConsentLinkerReader.
+   * @param {!Window} win
+   */
+  constructor(win) {
+    /** @private {!Window} */
+    this.win_ = win;
+
+    /** @private {!Object<string, ?Object<string, string>>} */
+    this.linkerParams_ = {};
+  }
+
+  /**
+   * Get the LINKER_PARAM(name, id) value from url and clean the value
+   * @param {string} name
+   * @param {string} id
+   * @return {?string}
+   */
+  get(name, id) {
+    if (!name || !id) {
+      user().error(TAG, 'LINKER_PARAM requires two params, name and id');
+      return null;
+    }
+
+    if (!hasOwn(this.linkerParams_, name)) {
+      this.linkerParams_[name] = this.maybeParseQueryString_(name);
+    }
+
+    if (this.linkerParams_[name] && this.linkerParams_[name][id]) {
+      return this.linkerParams_[name][id];
+    }
+
+    return null;
+  }
+
+  /**
+   * Maybe parse the url if the key is found. Return the value
+   * if found, null otherwise. Do no remove LINKER_PARAM from
+   * window location.
+   * @param {string} name
+   * @return {?Object<string, string>}
+   */
+  maybeParseQueryString_(name) {
+    const params = parseQueryString(this.win_.location.search);
+    if (!hasOwn(params, name)) {
+      // Linker param not found.
+      return null;
+    }
+    const value = params[name];
+    return parseLinker(value);
+  }
+}
diff --git a/extensions/amp-consent/0.1/linker.js b/extensions/amp-consent/0.1/linker.js
new file mode 100644
index 0000000000000..57ad057a0e92e
--- /dev/null
+++ b/extensions/amp-consent/0.1/linker.js
@@ -0,0 +1,216 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {WindowInterface} from '../../../src/window-interface';
+import {
+  base64UrlDecodeFromString,
+  base64UrlEncodeFromString,
+} from '../../../src/core/types/string/base64';
+import {crc32} from './crc32';
+import {user} from '../../../src/log';
+
+/** @const {string} */
+const DELIMITER = '*';
+const KEY_VALIDATOR = /^[a-zA-Z0-9\-_.]+$/;
+const CHECKSUM_OFFSET_MAX_MIN = 1;
+const VALID_VERSION = 1;
+const TAG = 'amp-analytics/linker';
+
+/**
+ * Creates the linker string, in the format of
+ * <version>*<checksum>*<serializedIds>
+ *
+ * where
+ *   checksum: base36(CRC32(<fingerprint>*<minuteSinceEpoch>*<serializedIds>))
+ *   serializedIds: <id1>*<idValue1>*<id2>*<idValue2>...
+ *                  values are base64 encoded
+ *   fingerprint: <userAgent>*<timezoneOffset>*<userLanguage>
+ *
+ * @param {string} version
+ * @param {!Object} ids
+ * @return {string}
+ */
+export function createLinker(version, ids) {
+  const serializedIds = serialize(ids);
+  if (serializedIds === '') {
+    return '';
+  }
+  const checksum = getCheckSum(serializedIds);
+  return [version, checksum, serializedIds].join(DELIMITER);
+}
+
+/**
+ * Return the key value pairs
+ * @param {string} value
+ * @return {?Object<string, string>}
+ */
+export function parseLinker(value) {
+  const linkerObj = parseLinkerParamValue(value);
+  if (!linkerObj) {
+    return null;
+  }
+  const {checksum, serializedIds} = linkerObj;
+  if (!isCheckSumValid(serializedIds, checksum)) {
+    user().error(TAG, 'LINKER_PARAM value checksum not valid');
+    return null;
+  }
+  return deserialize(serializedIds);
+}
+
+/**
+ * Parse the linker param value to version checksum and serializedParams
+ * @param {string} value
+ * @return {?Object}
+ */
+function parseLinkerParamValue(value) {
+  const parts = value.split(DELIMITER);
+  const isEven = parts.length % 2 == 0;
+
+  if (parts.length < 4 || !isEven) {
+    // Format <version>*<checksum>*<key1>*<value1>
+    // Note: linker makes sure there's at least one pair of non empty key value
+    // Make sure there is at least three delimiters.
+    user().error(TAG, `Invalid linker_param value ${value}`);
+    return null;
+  }
+
+  const version = Number(parts.shift());
+  if (version !== VALID_VERSION) {
+    user().error(TAG, `Invalid version number ${version}`);
+    return null;
+  }
+
+  const checksum = parts.shift();
+  const serializedIds = parts.join(DELIMITER);
+  return {
+    checksum,
+    serializedIds,
+  };
+}
+
+/**
+ * Check if the checksum is valid with time offset tolerance.
+ * @param {string} serializedIds
+ * @param {string} checksum
+ * @return {boolean}
+ */
+function isCheckSumValid(serializedIds, checksum) {
+  for (let i = 0; i <= CHECKSUM_OFFSET_MAX_MIN; i++) {
+    const calculateCheckSum = getCheckSum(serializedIds, i);
+    if (calculateCheckSum == checksum) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Create a unique checksum hashing the fingerprint and a few other values.
+ * @param {string} serializedIds
+ * @param {number=} opt_offsetMin
+ * @return {string}
+ */
+function getCheckSum(serializedIds, opt_offsetMin) {
+  const fingerprint = getFingerprint();
+  const offset = opt_offsetMin || 0;
+  const timestamp = getMinSinceEpoch() - offset;
+  const crc = crc32([fingerprint, timestamp, serializedIds].join(DELIMITER));
+  // Encoded to base36 for less bytes.
+  return crc.toString(36);
+}
+
+/**
+ * Generates a semi-unique value for page visitor.
+ * @return {string}
+ */
+function getFingerprint() {
+  const date = new Date();
+  const timezone = date.getTimezoneOffset();
+
+  const language = WindowInterface.getUserLanguage(window);
+  return [WindowInterface.getUserAgent(window), timezone, language].join(
+    DELIMITER
+  );
+}
+
+/**
+ * Encode all values & join them together
+ * @param {!Object} pairs
+ * @return {string}
+ */
+function serialize(pairs) {
+  if (!pairs) {
+    return '';
+  }
+  return Object.keys(pairs)
+    .filter((key) => {
+      const valid = KEY_VALIDATOR.test(key);
+      if (!valid) {
+        user().error(TAG, 'Invalid linker key: ' + key);
+      }
+      return valid;
+    })
+    .map((key) => key + DELIMITER + encode(pairs[key]))
+    .join(DELIMITER);
+}
+
+/**
+ * Deserialize the serializedIds and return keyValue pairs.
+ * @param {string} serializedIds
+ * @return {!Object<string, string>}
+ */
+function deserialize(serializedIds) {
+  const keyValuePairs = {};
+  const params = serializedIds.split(DELIMITER);
+  for (let i = 0; i < params.length; i += 2) {
+    const key = params[i];
+    const valid = KEY_VALIDATOR.test(key);
+    if (!valid) {
+      user().error(TAG, `Invalid linker key ${key}, value ignored`);
+      continue;
+    }
+    const value = decode(params[i + 1]);
+    keyValuePairs[key] = value;
+  }
+  return keyValuePairs;
+}
+
+/**
+ * Rounded time used to check if t2 - t1 is within our time tolerance.
+ * @return {number}
+ */
+function getMinSinceEpoch() {
+  // Timestamp in minutes, floored.
+  return Math.floor(Date.now() / 60000);
+}
+
+/**
+ * Function that encodesURIComponent but also tilde, since we are using it as
+ * our delimiter.
+ * @param {string} value
+ * @return {*} TODO(#23582): Specify return type
+ */
+function encode(value) {
+  return base64UrlEncodeFromString(String(value));
+}
+
+/**
+ * @param {string} value
+ * @return {string}
+ */
+function decode(value) {
+  return base64UrlDecodeFromString(String(value));
+}
diff --git a/extensions/amp-consent/0.1/tcf-api-command-manager.js b/extensions/amp-consent/0.1/tcf-api-command-manager.js
new file mode 100644
index 0000000000000..04effe9a87492
--- /dev/null
+++ b/extensions/amp-consent/0.1/tcf-api-command-manager.js
@@ -0,0 +1,347 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {ConsentPolicyManager} from './consent-policy-manager'; // eslint-disable-line no-unused-vars
+import {TCF_POST_MESSAGE_API_COMMANDS} from './consent-info';
+import {hasOwn, map} from '../../../src/core/types/object';
+import {isEnumValue, isObject} from '../../../src/core/types';
+
+import {user} from '../../../src/log';
+
+/**
+ * Event status is only defined for addEventListener command.
+ * @typedef {{
+ *  tcfPolicyVersion: number,
+ *  gdprApplies: (boolean|undefined),
+ *  tcString: (string|undefined),
+ *  listenerId: (string|undefined),
+ *  cmpStatus: (string),
+ *  eventStatus: (string),
+ *  additionalData: (Object),
+ * }}
+ */
+export let MinimalTcData;
+
+/**
+ * @typedef {{
+ *  gdprApplies: (boolean|undefined),
+ *  cmpLoaded: (boolean),
+ *  cmpStatus: (string|undefined),
+ *  tcfPolicyVersion: number,
+ * }}
+ */
+export let MinimalPingReturn;
+
+const TAG = 'amp-consent';
+const TCF_POLICY_VERSION = 2;
+const CMP_STATUS = 'loaded';
+const CMP_LOADED = true;
+const EVENT_STATUS = 'tcloaded';
+
+export class TcfApiCommandManager {
+  /**
+   * Creates an instance of TcfApiCommandManager.
+   * @param {!./consent-policy-manager.ConsentPolicyManager} policyManager
+   */
+  constructor(policyManager) {
+    /** @private {!./consent-policy-manager.ConsentPolicyManager} */
+    this.policyManager_ = policyManager;
+
+    /** @private {!Object<number, Object>} */
+    this.changeListeners_ = map();
+
+    /** @private {?string} */
+    this.currentTcString_ = null;
+
+    /** @private {number} */
+    this.listenerId_ = 0;
+
+    // Set the policy manager to signal to us
+    // when a new TC has potentially been stored.
+    policyManager.setOnPolicyChange(() => {
+      this.handleTcDataChange_();
+    });
+  }
+
+  /**
+   * @param {!Object} data
+   * @param {!Window} win
+   */
+  handleTcfCommand(data, win) {
+    if (!this.isValidTcfApiCall_(data['__tcfapiCall'])) {
+      return;
+    }
+
+    const payload = data['__tcfapiCall'];
+    const {command} = payload;
+    switch (command) {
+      case TCF_POST_MESSAGE_API_COMMANDS.PING:
+        this.handlePingEvent_(payload, win);
+        break;
+      case TCF_POST_MESSAGE_API_COMMANDS.GET_TC_DATA:
+        this.handleGetTcData_(payload, win);
+        break;
+      case TCF_POST_MESSAGE_API_COMMANDS.ADD_EVENT_LISTENER:
+        this.handleAddEventListner_(payload, win);
+        break;
+      case TCF_POST_MESSAGE_API_COMMANDS.REMOVE_EVENT_LISTENER:
+        this.handleRemoveEventListner_(payload, win);
+        break;
+      default:
+        return;
+    }
+  }
+
+  /**
+   * Add a entry to our changeListeners to signify that there
+   * is another iframe intrested in listening for TCData changes.
+   *
+   * Each entry has a unique `listenerId` that will be sent
+   * back to the 3p iframe.
+   * @param {!Object} payload
+   * @param {!Window} win
+   */
+  handleAddEventListner_(payload, win) {
+    if (this.changeListeners_[this.listenerId_]) {
+      return;
+    }
+    this.changeListeners_[this.listenerId_] = {
+      payload,
+      win,
+    };
+    this.listenerId_++;
+  }
+
+  /**
+   * @param {!Object} payload
+   * @param {!Window} win
+   */
+  handleRemoveEventListner_(payload, win) {
+    const {callId, parameter} = payload;
+    const success = !!this.changeListeners_[parameter];
+    if (success) {
+      delete this.changeListeners_[parameter];
+    }
+
+    this.sendTcfApiReturn_(win, /** returnValue */ undefined, callId, success);
+  }
+
+  /**
+   * Handler for when policy manager signal potential TCData
+   * change. Only triggers new TCData to be sent if TC String
+   * has been change and is non-null.
+   */
+  handleTcDataChange_() {
+    if (!Object.keys(this.changeListeners_).length) {
+      return;
+    }
+
+    this.getTcDataPromises_().then((consentPromises) => {
+      const newTcString = consentPromises[2];
+      if (!newTcString || newTcString === this.currentTcString_) {
+        return;
+      }
+
+      this.currentTcString_ = newTcString;
+      const listenerIds = Object.keys(this.changeListeners_);
+      for (let i = 0; i < listenerIds.length; i++) {
+        const listenerId = Number(listenerIds[i]);
+        if (!hasOwn(this.changeListeners_, listenerId)) {
+          continue;
+        }
+        const {payload, win} = this.changeListeners_[listenerId];
+        const {callId} = payload;
+        const returnValue = this.getMinimalTcData_(
+          consentPromises[0],
+          consentPromises[1],
+          newTcString,
+          listenerId
+        );
+
+        this.sendTcfApiReturn_(win, returnValue, callId, true);
+      }
+    });
+  }
+
+  /**
+   * @return {!Promise<Array>}
+   */
+  getTcDataPromises_() {
+    const consentStringInfoPromise =
+      this.policyManager_.getConsentStringInfo('default');
+    const metadataPromise =
+      this.policyManager_.getConsentMetadataInfo('default');
+    const sharedDataPromise =
+      this.policyManager_.getMergedSharedData('default');
+
+    return Promise.all([
+      metadataPromise,
+      sharedDataPromise,
+      consentStringInfoPromise,
+    ]);
+  }
+
+  /**
+   * Create minimal PingReturn object. Send to original iframe
+   * once object has been filled.
+   * @param {!Object} payload
+   * @param {!Window} win
+   */
+  handleGetTcData_(payload, win) {
+    this.getTcDataPromises_().then((arr) => {
+      const returnValue = this.getMinimalTcData_(arr[0], arr[1], arr[2]);
+      const {callId} = payload;
+
+      this.sendTcfApiReturn_(win, returnValue, callId, true);
+    });
+  }
+
+  /**
+   * Create MinimalTCData object. Fill in fields dependent on
+   * command.
+   * @param {?Object} metadata
+   * @param {?Object} sharedData
+   * @param {?string} tcString
+   * @param {number=} opt_listenerId
+   * @return {!MinimalTcData} policyManager
+   */
+  getMinimalTcData_(metadata, sharedData, tcString, opt_listenerId) {
+    const purposeOneTreatment = metadata ? metadata['purposeOne'] : undefined;
+    const gdprApplies = metadata ? metadata['gdprApplies'] : undefined;
+    const additionalConsent = metadata
+      ? metadata['additionalConsent']
+      : undefined;
+    const additionalData = {...sharedData, additionalConsent};
+
+    return {
+      tcfPolicyVersion: TCF_POLICY_VERSION,
+      gdprApplies,
+      tcString,
+      listenerId: opt_listenerId,
+      cmpStatus: CMP_STATUS,
+      eventStatus: EVENT_STATUS,
+      purposeOneTreatment,
+      additionalData,
+    };
+  }
+
+  /**
+   * Create minimal PingReturn object. Send to original iframe
+   * once object has been filled.
+   * @param {!Object} payload
+   * @param {!Window} win
+   */
+  handlePingEvent_(payload, win) {
+    this.policyManager_.getConsentMetadataInfo('default').then((metadata) => {
+      const returnValue = this.getMinimalPingReturn_(metadata);
+      const {callId} = payload;
+
+      this.sendTcfApiReturn_(win, returnValue, callId);
+    });
+  }
+
+  /**
+   * Create minimal PingReturn object.
+   * @param {?Object} metadata
+   * @return {!MinimalPingReturn}
+   */
+  getMinimalPingReturn_(metadata) {
+    const gdprApplies = metadata ? metadata['gdprApplies'] : undefined;
+    return {
+      gdprApplies,
+      cmpLoaded: CMP_LOADED,
+      cmpStatus: CMP_STATUS,
+      tcfPolicyVersion: TCF_POLICY_VERSION,
+    };
+  }
+
+  /**
+   *
+   * @param {!Window} win
+   * @param {!JsonObject} returnValue
+   * @param {string} callId
+   * @param {boolean=} opt_success
+   */
+  sendTcfApiReturn_(win, returnValue, callId, opt_success) {
+    if (!win) {
+      return;
+    }
+
+    const __tcfapiReturn = {returnValue, callId, success: opt_success};
+    win./*OK*/ postMessage(
+      /** @type {!JsonObject} */ ({
+        __tcfapiReturn,
+      }),
+      '*'
+    );
+  }
+
+  /**
+   * Checks if the payload from the `tcfapiCall` is valid.
+   * @param {JsonObject} payload
+   * @return {boolean}
+   */
+  isValidTcfApiCall_(payload) {
+    if (!isObject(payload)) {
+      user().error(TAG, `"tcfapiCall" is not an object: ${payload}`);
+      return false;
+    }
+    const {command, parameter, version} = payload;
+    if (!isEnumValue(TCF_POST_MESSAGE_API_COMMANDS, command)) {
+      user().error(
+        TAG,
+        `Unsupported command found in "tcfapiCall": ${command}`
+      );
+      return false;
+    }
+    if (
+      parameter &&
+      command != TCF_POST_MESSAGE_API_COMMANDS.REMOVE_EVENT_LISTENER
+    ) {
+      user().error(
+        TAG,
+        `Unsupported parameter found in "tcfapiCall": ${parameter}`
+      );
+      return false;
+    }
+    if (version !== 2) {
+      user().error(TAG, `Found incorrect version in "tcfapiCall": ${version}`);
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * @param {?Object} metadata
+   * @return {!MinimalPingReturn}
+   * @visibleForTesting
+   */
+  getMinimalPingReturnForTesting(metadata) {
+    return this.getMinimalPingReturn_(metadata);
+  }
+
+  /**
+   * @param {?Object} metadata
+   * @param {?Object} sharedData
+   * @param {?string} tcString
+   * @param {number=} listenerId
+   * @return {!MinimalPingReturn}
+   * @visibleForTesting
+   */
+  getMinimalTcDataForTesting(metadata, sharedData, tcString, listenerId) {
+    return this.getMinimalTcData_(metadata, sharedData, tcString, listenerId);
+  }
+}
diff --git a/extensions/amp-consent/0.1/test-e2e/common.js b/extensions/amp-consent/0.1/test-e2e/common.js
index 1569678e9b47a..6a5ac81cbd189 100644
--- a/extensions/amp-consent/0.1/test-e2e/common.js
+++ b/extensions/amp-consent/0.1/test-e2e/common.js
@@ -115,3 +115,7 @@ export async function verifyPromptsHidden(controller, hiddenMap) {
     }
   }
 }
+
+export function sleep(ms) {
+  return new Promise((res) => setTimeout(res, ms));
+}
diff --git a/extensions/amp-consent/0.1/test-e2e/test-amp-consent-client-side.js b/extensions/amp-consent/0.1/test-e2e/test-amp-consent-client-side.js
index f6040156529e4..8ac41400d4fd7 100644
--- a/extensions/amp-consent/0.1/test-e2e/test-amp-consent-client-side.js
+++ b/extensions/amp-consent/0.1/test-e2e/test-amp-consent-client-side.js
@@ -17,16 +17,15 @@
 import {
   findElements,
   resetAllElements,
+  sleep,
   verifyElementsBuilt,
   verifyPromptsHidden,
 } from './common';
-import sleep from 'sleep-promise';
 
 describes.endtoend(
   'amp-consent',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-consent/amp-consent-basic-uses.amp.html#amp-geo=de',
+    fixture: 'amp-consent/amp-consent-basic-uses.amp.html#amp-geo=de',
     // TODO (micajuineho): Add shadow-demo after #25985 is fixed and viewer-demo when...
     environments: ['single'],
   },
diff --git a/extensions/amp-consent/0.1/test-e2e/test-amp-consent-server-side-expire-cache.js b/extensions/amp-consent/0.1/test-e2e/test-amp-consent-server-side-expire-cache.js
index 7d54dba849ed9..cd973553ded31 100644
--- a/extensions/amp-consent/0.1/test-e2e/test-amp-consent-server-side-expire-cache.js
+++ b/extensions/amp-consent/0.1/test-e2e/test-amp-consent-server-side-expire-cache.js
@@ -17,17 +17,15 @@
 import {
   findElements,
   resetAllElements,
+  sleep,
   verifyElementsBuilt,
   verifyPromptsHidden,
 } from './common';
 
-import sleep from 'sleep-promise';
-
 describes.endtoend(
   'amp-consent',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-consent/amp-consent-basic-uses.amp.html#amp-geo=mx',
+    fixture: 'amp-consent/amp-consent-basic-uses.amp.html#amp-geo=mx',
     // TODO (micajuineho): Add shadow-demo after #25985 is fixed, and viewer-demo when...
     environments: ['single'],
   },
diff --git a/extensions/amp-consent/0.1/test-e2e/test-amp-consent-server-side.js b/extensions/amp-consent/0.1/test-e2e/test-amp-consent-server-side.js
index 798d8f2d40237..aa144a7c26711 100644
--- a/extensions/amp-consent/0.1/test-e2e/test-amp-consent-server-side.js
+++ b/extensions/amp-consent/0.1/test-e2e/test-amp-consent-server-side.js
@@ -17,16 +17,15 @@
 import {
   findElements,
   resetAllElements,
+  sleep,
   verifyElementsBuilt,
   verifyPromptsHidden,
 } from './common';
-import sleep from 'sleep-promise';
 
 describes.endtoend(
   'amp-consent',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-consent/amp-consent-basic-uses.amp.html#amp-geo=us',
+    fixture: 'amp-consent/amp-consent-basic-uses.amp.html#amp-geo=us',
     // TODO (micajuineho): Add shadow-demo after #25985 is fixed and viewer-demo when...
     environments: ['single'],
   },
diff --git a/extensions/amp-consent/0.1/test-e2e/test-cmp-ui-interaction.js b/extensions/amp-consent/0.1/test-e2e/test-cmp-ui-interaction.js
new file mode 100644
index 0000000000000..04e0016c49256
--- /dev/null
+++ b/extensions/amp-consent/0.1/test-e2e/test-cmp-ui-interaction.js
@@ -0,0 +1,67 @@
+/**
+ * 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.
+ */
+
+import {sleep} from './common';
+
+describes.endtoend(
+  'amp-consent',
+  {
+    fixture: 'amp-consent/cmp-interaction.html',
+    environments: ['single'],
+  },
+  (env) => {
+    let controller;
+
+    beforeEach(() => {
+      controller = env.controller;
+    });
+
+    it('should restrict fullscreen until user interaction', async () => {
+      // Await the CMP to load
+      await sleep(3000);
+
+      const consentPrompt = await controller.findElement('#ConsentPrompt');
+
+      // Verify that it's not fullscreen
+      await expect(
+        controller.getElementAttribute(consentPrompt, 'class')
+      ).to.not.match(/i-amphtml-consent-ui-iframe-fullscreen/);
+
+      await controller.findElement('iframe').then(async (iframe) => {
+        await controller.switchToFrame(iframe);
+      });
+
+      // Verify that it's fullscreen
+      await controller.click(await controller.findElement('#consent-wrapper'));
+      await sleep(1000);
+      await controller.switchToParent();
+      await expect(
+        controller.getElementAttribute(consentPrompt, 'class')
+      ).to.match(/i-amphtml-consent-ui-iframe-fullscreen/);
+
+      await controller.findElement('iframe').then(async (iframe) => {
+        await controller.switchToFrame(iframe);
+      });
+
+      // Close prompt
+      await controller.click(await controller.findElement('#d'));
+      await controller.switchToParent();
+      await expect(
+        controller.getElementAttribute(consentPrompt, 'class')
+      ).to.not.match(/i-amphtml-consent-ui-iframe-fullscreen/);
+    });
+  }
+);
diff --git a/extensions/amp-consent/0.1/test/test-amp-consent.js b/extensions/amp-consent/0.1/test/test-amp-consent.js
index c39bd7fd2926b..b592eae440ab2 100644
--- a/extensions/amp-consent/0.1/test/test-amp-consent.js
+++ b/extensions/amp-consent/0.1/test/test-amp-consent.js
@@ -18,19 +18,24 @@ import {ACTION_TYPE, AmpConsent} from '../amp-consent';
 import {
   CONSENT_ITEM_STATE,
   METADATA_STORAGE_KEY,
+  PURPOSE_CONSENT_STATE,
   STORAGE_KEY,
+  constructConsentInfo,
   constructMetadata,
   getConsentStateValue,
 } from '../consent-info';
-import {CONSENT_STRING_TYPE} from '../../../../src/consent-state';
+import {CONSENT_STRING_TYPE} from '../../../../src/core/constants/consent-state';
+import {ConsentStateManager} from '../consent-state-manager';
 import {GEO_IN_GROUP} from '../../../amp-geo/0.1/amp-geo-in-group';
-import {dict} from '../../../../src/utils/object';
+import {dev, user} from '../../../../src/log';
+import {dict} from '../../../../src/core/types/object';
 import {macroTask} from '../../../../testing/yield';
 import {
   registerServiceBuilder,
   resetServiceForTesting,
 } from '../../../../src/service';
-import {user} from '../../../../src/log';
+import {removeSearch} from '../../../../src/url';
+import {toggleExperiment} from '../../../../src/experiments';
 import {xhrServiceForTesting} from '../../../../src/service/xhr-impl';
 
 describes.realWin(
@@ -67,6 +72,7 @@ describes.realWin(
         'http://www.origin.com/r/1': '{}',
         'https://invalid.response.com/': '{"consentRequired": 3}',
         'https://xssi-prefix/': 'while(1){"consentRequired": false}',
+        'https://example.test/': '{}',
       };
 
       xhrServiceMock = {
@@ -74,6 +80,7 @@ describes.realWin(
           requestBody = init.body;
           expect(init.credentials).to.equal('include');
           expect(init.method).to.equal('POST');
+          url = removeSearch(url);
           return Promise.resolve({
             json() {
               return Promise.resolve(JSON.parse(jsonMockResponses[url]));
@@ -87,7 +94,10 @@ describes.realWin(
       };
 
       storageMock = {
-        setNonBoolean: () => {},
+        setNonBoolean: (name, value) => {
+          storageValue[name] = value;
+          return Promise.resolve();
+        },
         get: (name) => {
           return Promise.resolve(storageValue[name]);
         },
@@ -174,6 +184,22 @@ describes.realWin(
           expect(win.testLocation.origin).not.to.be.empty;
           expect(fetchSpy).to.be.calledWith('http://www.origin.com/r/1');
         });
+
+        it('supports checkConsentHref expansion', async () => {
+          const fetchSpy = env.sandbox.spy(xhrServiceMock, 'fetchJson');
+          consentElement = createConsentElement(
+            doc,
+            dict({
+              'checkConsentHref': 'https://example.test?cid=CLIENT_ID&r=RANDOM',
+              'consentInstanceId': 'test',
+            })
+          );
+          const ampConsent = new AmpConsent(consentElement);
+          doc.body.appendChild(consentElement);
+          await ampConsent.buildCallback();
+          await macroTask();
+          expect(fetchSpy).to.be.calledWithMatch(/cid=amp-.{22}&r=RANDOM/);
+        });
       });
     });
 
@@ -207,6 +233,23 @@ describes.realWin(
         });
       });
 
+      // TODO(micajuineho): remove test once granular consent launches
+      it('send post request to server with stores purpose consents', async () => {
+        ampConsent.isGranularConsentExperimentOn_ = true;
+        await ampConsent.buildCallback();
+        await macroTask();
+        expect(requestBody).to.deep.equal({
+          'consentInstanceId': 'ABC',
+          'consentStateValue': 'unknown',
+          'consentString': undefined,
+          'consentMetadata': undefined,
+          'purposeConsents': undefined,
+          'isDirty': false,
+          'matchedGeoGroup': null,
+        });
+        ampConsent.isGranularConsentExperimentOn_ = false;
+      });
+
       it('read promptIfUnknown from server response', async () => {
         await ampConsent.buildCallback();
         await macroTask();
@@ -230,7 +273,7 @@ describes.realWin(
       });
     });
 
-    describe('geo-override server communication', () => {
+    describe('server communication', () => {
       let ampConsent;
 
       it('checks local storage before making sever request', async () => {
@@ -303,60 +346,6 @@ describes.realWin(
           .true;
       });
 
-      it('send post request to server with matched group', async () => {
-        const remoteConfig = {
-          'consentInstanceId': 'abc',
-          'geoOverride': {
-            'nafta': {
-              'checkConsentHref': 'https://geo-override-check2/',
-              'consentRequired': true,
-            },
-          },
-        };
-        ISOCountryGroups = ['nafta'];
-        ampConsent = getAmpConsent(doc, remoteConfig);
-        await ampConsent.buildCallback();
-        await macroTask();
-        expect(requestBody).to.deep.equal({
-          'consentInstanceId': 'abc',
-          'consentStateValue': 'unknown',
-          'consentString': undefined,
-          'consentMetadata': undefined,
-          'isDirty': false,
-          'matchedGeoGroup': 'nafta',
-        });
-      });
-
-      it('only geoOverrides the first matched group', async () => {
-        const remoteConfig = {
-          'consentInstanceId': 'abc',
-          'geoOverride': {
-            'na': {
-              'checkConsentHref': 'https://geo-override-check2/',
-              'consentRequired': true,
-            },
-            'eea': {
-              'consentRequired': false,
-            },
-          },
-        };
-        ISOCountryGroups = ['na', 'eea'];
-        ampConsent = getAmpConsent(doc, remoteConfig);
-        await ampConsent.buildCallback();
-        await macroTask();
-        expect(await ampConsent.getConsentRequiredPromiseForTesting()).to.be
-          .true;
-        expect(ampConsent.matchedGeoGroup_).to.equal('na');
-        expect(requestBody).to.deep.equal({
-          'consentInstanceId': 'abc',
-          'consentStateValue': 'unknown',
-          'consentString': undefined,
-          'consentMetadata': undefined,
-          'isDirty': false,
-          'matchedGeoGroup': 'na',
-        });
-      });
-
       it('fallsback to true with invalid remote reponse', async () => {
         const remoteConfig = {
           'consentInstanceId': 'abc',
@@ -370,13 +359,71 @@ describes.realWin(
           .true;
       });
 
+      describe('geoOverride server communication', () => {
+        it('send post request to server with matched group', async () => {
+          const remoteConfig = {
+            'consentInstanceId': 'abc',
+            'geoOverride': {
+              'nafta': {
+                'checkConsentHref': 'https://geo-override-check2/',
+                'consentRequired': true,
+              },
+            },
+          };
+          ISOCountryGroups = ['nafta'];
+          ampConsent = getAmpConsent(doc, remoteConfig);
+          await ampConsent.buildCallback();
+          await macroTask();
+          expect(requestBody).to.deep.equal({
+            'consentInstanceId': 'abc',
+            'consentStateValue': 'unknown',
+            'consentString': undefined,
+            'consentMetadata': undefined,
+            'isDirty': false,
+            'matchedGeoGroup': 'nafta',
+          });
+        });
+
+        it('only geoOverrides the first matched group', async () => {
+          const remoteConfig = {
+            'consentInstanceId': 'abc',
+            'geoOverride': {
+              'na': {
+                'checkConsentHref': 'https://geo-override-check2/',
+                'consentRequired': true,
+              },
+              'eea': {
+                'consentRequired': false,
+              },
+            },
+          };
+          ISOCountryGroups = ['na', 'eea'];
+          ampConsent = getAmpConsent(doc, remoteConfig);
+          await ampConsent.buildCallback();
+          await macroTask();
+          expect(await ampConsent.getConsentRequiredPromiseForTesting()).to.be
+            .true;
+          expect(ampConsent.matchedGeoGroup_).to.equal('na');
+          expect(requestBody).to.deep.equal({
+            'consentInstanceId': 'abc',
+            'consentStateValue': 'unknown',
+            'consentString': undefined,
+            'consentMetadata': undefined,
+            'isDirty': false,
+            'matchedGeoGroup': 'na',
+          });
+        });
+      });
+
       describe('remote server response', () => {
         beforeEach(() => {
           jsonMockResponses = {
             'https://server-test-1/':
               '{"consentRequired": false, "consentStateValue": "unknown", "consentString": "hello"}',
             'https://server-test-2/':
-              '{"consentRequired": true, "consentStateValue": "rejected", "consentString": "mystring", "consentMetadata":{"consentStringType": 3}}',
+              '{"consentRequired": true, "consentStateValue": "rejected", "consentString": "mystring", ' +
+              '"consentMetadata":{"consentStringType": 3, "additionalConsent": "1~1.35.41.101", "gdprApplies": false, "purposeOne": true},' +
+              '"purposeConsents": {"abc":true, "xyz": false}}',
             'https://server-test-3/':
               '{"consentRequired": true, "consentStateValue": "unknown"}',
             'https://geo-override-check2/': '{"consentRequired": true}',
@@ -385,54 +432,6 @@ describes.realWin(
           };
         });
 
-        describe('gdprApplies value', () => {
-          it('uses given value', async () => {
-            const inlineConfig = {
-              'consentInstanceId': 'abc',
-              'consentRequired': 'remote',
-              'checkConsentHref': 'https://gdpr-applies/',
-            };
-            ampConsent = getAmpConsent(doc, inlineConfig);
-            await ampConsent.buildCallback();
-            await macroTask();
-            const stateManagerGdprApplies = await ampConsent
-              .getConsentStateManagerForTesting()
-              .getConsentInstanceGdprApplies();
-            expect(stateManagerGdprApplies).to.be.false;
-          });
-
-          it('defaults to consentRequired remote value', async () => {
-            const inlineConfig = {
-              'consentInstanceId': 'abc',
-              'consentRequired': 'remote',
-              'checkConsentHref': 'https://geo-override-check2/',
-            };
-            ampConsent = getAmpConsent(doc, inlineConfig);
-            await ampConsent.buildCallback();
-            await macroTask();
-            await expect(
-              ampConsent
-                .getConsentStateManagerForTesting()
-                .getConsentInstanceGdprApplies()
-            ).to.eventually.be.true;
-          });
-
-          it('never defaults to inline config when checkConsentHref is not defined', async () => {
-            const inlineConfig = {
-              'consentInstanceId': 'abc',
-              'consentRequired': true,
-            };
-            ampConsent = getAmpConsent(doc, inlineConfig);
-            await ampConsent.buildCallback();
-            await macroTask();
-            await expect(
-              ampConsent
-                .getConsentStateManagerForTesting()
-                .getConsentInstanceGdprApplies()
-            ).to.eventually.be.null;
-          });
-        });
-
         it('should not update local storage when response is false', async () => {
           const inlineConfig = {
             'consentInstanceId': 'abc',
@@ -452,12 +451,9 @@ describes.realWin(
           expect(stateValue).to.equal('unknown');
           // 3 is dismissed, 4 is not requried, and 5 is unknown.
           // All 3 turn into 'unknown'.
-          expect(stateManagerInfo).to.deep.equal({
-            'consentState': 4,
-            'consentString': undefined,
-            'consentMetadata': undefined,
-            'isDirty': undefined,
-          });
+          expect(stateManagerInfo).to.deep.equal(
+            constructConsentInfo(CONSENT_ITEM_STATE.NOT_REQUIRED)
+          );
         });
 
         it('should not update local storage when consent value response is null', async () => {
@@ -477,12 +473,9 @@ describes.realWin(
           );
 
           expect(stateValue).to.equal('unknown');
-          expect(stateManagerInfo).to.deep.equal({
-            'consentState': CONSENT_ITEM_STATE.UNKNOWN,
-            'consentString': undefined,
-            'consentMetadata': undefined,
-            'isDirty': undefined,
-          });
+          expect(stateManagerInfo).to.deep.equal(
+            constructConsentInfo(CONSENT_ITEM_STATE.UNKNOWN)
+          );
           expect(await ampConsent.getConsentRequiredPromiseForTesting()).to.be
             .true;
         });
@@ -508,17 +501,22 @@ describes.realWin(
             'consentState': CONSENT_ITEM_STATE.REJECTED,
             'consentString': 'mystring',
             'consentMetadata': constructMetadata(
-              CONSENT_STRING_TYPE.US_PRIVACY_STRING
+              CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+              '1~1.35.41.101',
+              false,
+              true
             ),
             'isDirty': undefined,
+            'purposeConsents': undefined,
           });
         });
 
-        it('accepts unknown as a response', async () => {
+        it('updates local storage and uses those values (granular consent on)', async () => {
+          toggleExperiment(win, 'amp-consent-granular-consent', true);
           const inlineConfig = {
             'consentInstanceId': 'abc',
             'consentRequired': 'remote',
-            'checkConsentHref': 'https://server-test-3/',
+            'checkConsentHref': 'https://server-test-2/',
           };
           ampConsent = getAmpConsent(doc, inlineConfig);
           await ampConsent.buildCallback();
@@ -530,13 +528,45 @@ describes.realWin(
             stateManagerInfo.consentState
           );
 
-          expect(stateValue).to.equal('unknown');
+          expect(stateValue).to.equal('rejected');
           expect(stateManagerInfo).to.deep.equal({
-            'consentState': CONSENT_ITEM_STATE.UNKNOWN,
-            'consentString': undefined,
-            'consentMetadata': undefined,
+            'consentState': CONSENT_ITEM_STATE.REJECTED,
+            'consentString': 'mystring',
+            'consentMetadata': constructMetadata(
+              CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+              '1~1.35.41.101',
+              false,
+              true
+            ),
             'isDirty': undefined,
+            'purposeConsents': {
+              'abc': PURPOSE_CONSENT_STATE.ACCEPTED,
+              'xyz': PURPOSE_CONSENT_STATE.REJECTED,
+            },
           });
+          toggleExperiment(win, 'amp-consent-granular-consent', false);
+        });
+
+        it('accepts unknown as a response', async () => {
+          const inlineConfig = {
+            'consentInstanceId': 'abc',
+            'consentRequired': 'remote',
+            'checkConsentHref': 'https://server-test-3/',
+          };
+          ampConsent = getAmpConsent(doc, inlineConfig);
+          await ampConsent.buildCallback();
+          await macroTask();
+          const stateManagerInfo = await ampConsent
+            .getConsentStateManagerForTesting()
+            .getConsentInstanceInfo();
+          const stateValue = getConsentStateValue(
+            stateManagerInfo.consentState
+          );
+
+          expect(stateValue).to.equal('unknown');
+          expect(stateManagerInfo).to.deep.equal(
+            constructConsentInfo(CONSENT_ITEM_STATE.UNKNOWN)
+          );
         });
       });
 
@@ -546,9 +576,11 @@ describes.realWin(
             'https://server-test-4/':
               '{"consentRequired": true, "consentStateValue": "accepted", "consentString": "newstring"}',
             'https://server-test-5/':
-              '{"consentRequired": true, "consentStateValue": "accepted", "consentString": "newstring", "consentMetadata": {"consentStringType": 3}}',
+              '{"consentRequired": true, "consentStateValue": "accepted", "consentString": "newstring", "consentMetadata": {"consentStringType": 3, "additionalConsent": "1~1.35.41.101", "gdprApplies": true, "purposeOne": true}}',
             'https://server-test-6/':
               '{"consentRequired": true, "consentStateValue": "accepted", "consentString": "newstring"}',
+            'https://server-test-7/':
+              '{"consentRequired": true, "consentStateValue": "accepted", "consentString": "newstring", "purposeConsents": {"xyz": false}}',
             'https://geo-override-check2/': '{"consentRequired": true}',
           };
         });
@@ -577,12 +609,84 @@ describes.realWin(
           );
 
           expect(stateValue).to.equal('accepted');
-          expect(stateManagerInfo).to.deep.equal({
-            'consentState': CONSENT_ITEM_STATE.ACCEPTED,
-            'consentString': 'newstring',
-            'isDirty': undefined,
-            'consentMetadata': undefined,
-          });
+          expect(stateManagerInfo).to.deep.equal(
+            constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED, 'newstring')
+          );
+        });
+
+        it('syncs undefined values overriding', async () => {
+          const inlineConfig = {
+            'consentInstanceId': 'abc',
+            'consentRequired': true,
+            'checkConsentHref': 'https://server-test-4/',
+          };
+          storageValue = {
+            'amp-consent:abc': {
+              [STORAGE_KEY.STATE]: 0,
+              [STORAGE_KEY.STRING]: 'oldstring',
+              [STORAGE_KEY.METADATA]: {
+                [METADATA_STORAGE_KEY.CONSENT_STRING_TYPE]:
+                  CONSENT_STRING_TYPE.TCF_V2,
+                [METADATA_STORAGE_KEY.ADDITIONAL_CONSENT]: '3~3.33.303',
+              },
+              [STORAGE_KEY.PURPOSE_CONSENTS]: {
+                'abc': PURPOSE_CONSENT_STATE.ACCEPTED,
+              },
+            },
+          };
+          ampConsent = getAmpConsent(doc, inlineConfig);
+          await ampConsent.buildCallback();
+          await macroTask();
+          const stateManagerInfo = await ampConsent
+            .getConsentStateManagerForTesting()
+            .getConsentInstanceInfo();
+          const stateValue = getConsentStateValue(
+            stateManagerInfo.consentState
+          );
+
+          expect(stateValue).to.equal('accepted');
+          expect(stateManagerInfo).to.deep.equal(
+            constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED, 'newstring')
+          );
+        });
+
+        it('syncs purposeConsents from server', async () => {
+          toggleExperiment(win, 'amp-consent-granular-consent', true);
+          const inlineConfig = {
+            'consentInstanceId': 'abc',
+            'consentRequired': true,
+            'checkConsentHref': 'https://server-test-7/',
+          };
+          // 0 represents 'rejected' in storage
+          storageValue = {
+            'amp-consent:abc': {
+              [STORAGE_KEY.STATE]: 0,
+              [STORAGE_KEY.STRING]: 'oldstring',
+              [STORAGE_KEY.PURPOSE_CONSENTS]: {
+                'abc': PURPOSE_CONSENT_STATE.ACCEPTED,
+              },
+            },
+          };
+          ampConsent = getAmpConsent(doc, inlineConfig);
+          await ampConsent.buildCallback();
+          await macroTask();
+          const stateManagerInfo = await ampConsent
+            .getConsentStateManagerForTesting()
+            .getConsentInstanceInfo();
+          const stateValue = getConsentStateValue(
+            stateManagerInfo.consentState
+          );
+
+          expect(stateValue).to.equal('accepted');
+          expect(stateManagerInfo).to.deep.equal(
+            constructConsentInfo(
+              CONSENT_ITEM_STATE.ACCEPTED,
+              'newstring',
+              undefined,
+              {'xyz': PURPOSE_CONSENT_STATE.REJECTED}
+            )
+          );
+          toggleExperiment(win, 'amp-consent-granular-consent', false);
         });
 
         it('syncs metadata from server', async () => {
@@ -599,6 +703,7 @@ describes.realWin(
               [STORAGE_KEY.METADATA]: {
                 [METADATA_STORAGE_KEY.CONSENT_STRING_TYPE]:
                   CONSENT_STRING_TYPE.TCF_V2,
+                [METADATA_STORAGE_KEY.ADDITIONAL_CONSENT]: '3~3.33.303',
               },
             },
           };
@@ -618,8 +723,12 @@ describes.realWin(
             'consentString': 'newstring',
             'isDirty': undefined,
             'consentMetadata': constructMetadata(
-              CONSENT_STRING_TYPE.US_PRIVACY_STRING
+              CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+              '1~1.35.41.101',
+              true,
+              true
             ),
+            'purposeConsents': undefined,
           });
         });
 
@@ -634,7 +743,6 @@ describes.realWin(
             'amp-consent:abc': {
               [STORAGE_KEY.STATE]: 0,
               [STORAGE_KEY.STRING]: 'oldstring',
-              [STORAGE_KEY.STRING]: {},
             },
           };
           ampConsent = getAmpConsent(doc, inlineConfig);
@@ -648,12 +756,28 @@ describes.realWin(
           );
 
           expect(stateValue).to.equal('accepted');
-          expect(stateManagerInfo).to.deep.equal({
-            'consentState': CONSENT_ITEM_STATE.ACCEPTED,
-            'consentString': 'newstring',
-            'isDirty': undefined,
-            'consentMetadata': undefined,
-          });
+          expect(stateManagerInfo).to.deep.equal(
+            constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED, 'newstring')
+          );
+        });
+
+        it('should validate purpose consents before syncing', async () => {
+          toggleExperiment(win, 'amp-consent-granular-consent', true);
+          const inlineConfig = {
+            'consentInstanceId': 'abc',
+            'consentRequired': true,
+            'checkConsentHref': 'https://server-test-7/',
+          };
+          ampConsent = getAmpConsent(doc, inlineConfig);
+          const validationSpy = env.sandbox.spy(
+            ampConsent,
+            'validatePurposeConsents_'
+          );
+          await ampConsent.buildCallback();
+          await macroTask();
+          expect(validationSpy).to.be.calledOnce;
+          expect(validationSpy).to.be.calledWith({'xyz': false});
+          toggleExperiment(win, 'amp-consent-granular-consent', false);
         });
 
         it('should not sync data if response is null', async () => {
@@ -689,6 +813,7 @@ describes.realWin(
             'consentString': 'mystring',
             'isDirty': undefined,
             'consentMetadata': constructMetadata(CONSENT_STRING_TYPE.TCF_V2),
+            'purposeConsents': undefined,
           });
         });
       });
@@ -718,6 +843,7 @@ describes.realWin(
                 [METADATA_STORAGE_KEY.CONSENT_STRING_TYPE]:
                   CONSENT_STRING_TYPE.TCF_V2,
               },
+              [STORAGE_KEY.PURPOSE_CONSENTS]: {'abc': 1},
             },
           };
           ampConsent = getAmpConsent(doc, inlineConfig);
@@ -736,6 +862,7 @@ describes.realWin(
             'consentString': 'mystring',
             'isDirty': true,
             'consentMetadata': constructMetadata(CONSENT_STRING_TYPE.TCF_V2),
+            'purposeConsents': {'abc': PURPOSE_CONSENT_STATE.ACCEPTED},
           });
         });
 
@@ -772,6 +899,7 @@ describes.realWin(
             'consentString': 'mystring',
             'isDirty': true,
             'consentMetadata': constructMetadata(CONSENT_STRING_TYPE.TCF_V2),
+            'purposeConsents': undefined,
           });
         });
       });
@@ -795,46 +923,172 @@ describes.realWin(
 
       it('should error and return undefined on invalid metadata', () => {
         const spy = env.sandbox.stub(user(), 'error');
-        const metadata = ampConsent.configureMetadataByConsentString_(
-          'bad metadata',
-          'consentString'
-        );
-        expect(spy.args[0][1]).to.match(
-          /CMP metadata is invalid or no consent string is found./
-        );
+        const metadata = ampConsent.validateMetadata_('bad metadata');
+        expect(spy.args[0][1]).to.match(/CMP metadata is not an object./);
         expect(metadata).to.be.undefined;
       });
 
-      it('should return undefined with no consent string', () => {
+      it('should work with no consent string', () => {
         const spy = env.sandbox.stub(user(), 'error');
-        const metadata = ampConsent.configureMetadataByConsentString_({
+        const metadata = ampConsent.validateMetadata_({
           'gdprApplies': true,
         });
-        expect(spy.args[0][1]).to.match(
-          /CMP metadata is invalid or no consent string is found./
+        expect(spy).to.not.be.called;
+        expect(metadata).to.deep.equals(
+          constructMetadata(undefined, undefined, true)
         );
-        expect(metadata).to.be.undefined;
       });
 
       it('should remove invalid consentStringType', () => {
         const spy = env.sandbox.stub(user(), 'error');
         const responseMetadata = {'consentStringType': 4};
-        expect(
-          ampConsent.configureMetadataByConsentString_(
-            responseMetadata,
-            'consentString'
-          )
-        ).to.deep.equals(constructMetadata());
+        expect(ampConsent.validateMetadata_(responseMetadata)).to.deep.equals(
+          constructMetadata()
+        );
         expect(spy.args[0][1]).to.match(
-          /CMP metadata consent string type is invalid./
+          /Consent metadata value "%s" is invalid./
         );
+        expect(spy.args[0][2]).to.match(/consentStringType/);
         responseMetadata['consentStringType'] = CONSENT_STRING_TYPE.TCF_V2;
-        expect(
-          ampConsent.configureMetadataByConsentString_(
-            responseMetadata,
-            'consentString'
-          )
-        ).to.deep.equals(constructMetadata(2));
+        expect(ampConsent.validateMetadata_(responseMetadata)).to.deep.equals(
+          constructMetadata(2)
+        );
+      });
+
+      it('should remove invalid additionalConsent', () => {
+        const spy = env.sandbox.stub(user(), 'error');
+        const responseMetadata = {'additionalConsent': 4};
+        expect(ampConsent.validateMetadata_(responseMetadata)).to.deep.equals(
+          constructMetadata()
+        );
+        expect(spy.args[0][1]).to.match(
+          /Consent metadata value "%s" is invalid./
+        );
+        expect(spy.args[0][2]).to.match(/additionalConsent/);
+      });
+
+      it('should remove invalid gdprApplies', () => {
+        const spy = env.sandbox.stub(user(), 'error');
+        const responseMetadata = {'gdprApplies': 4};
+        expect(ampConsent.validateMetadata_(responseMetadata)).to.deep.equals(
+          constructMetadata()
+        );
+        expect(spy.args[0][1]).to.match(
+          /Consent metadata value "%s" is invalid./
+        );
+        expect(spy.args[0][2]).to.match(/gdprApplies/);
+      });
+
+      it('should remove invalid purposeOne', () => {
+        const spy = env.sandbox.stub(user(), 'error');
+        const responseMetadata = {'purposeOne': 'accepted'};
+        expect(ampConsent.validateMetadata_(responseMetadata)).to.deep.equals(
+          constructMetadata()
+        );
+        expect(spy.args[0][1]).to.match(
+          /Consent metadata value "%s" is invalid./
+        );
+        expect(spy.args[0][2]).to.match(/purposeOne/);
+      });
+    });
+
+    describe('exposes api', () => {
+      let ampConsent;
+      let consentElement;
+
+      beforeEach(() => {
+        toggleExperiment(win, 'tcf-post-message-proxy-api', true);
+      });
+
+      afterEach(() => {
+        toggleExperiment(win, 'tcf-post-message-proxy-api', false);
+      });
+
+      describe('config', () => {
+        it('shoud expose if in config', async () => {
+          consentElement = createConsentElement(
+            doc,
+            dict({
+              'consentInstanceId': 'abc',
+              'checkConsentHref': 'https://response1',
+              'exposesTcfApi': true,
+            })
+          );
+          doc.body.appendChild(consentElement);
+          ampConsent = new AmpConsent(consentElement);
+          await ampConsent.buildCallback();
+          await macroTask();
+          const {frames} = win;
+          expect(frames[0].name).to.be.equal('__tcfapiLocator');
+          expect(ampConsent.tcfApiCommandsManager_).to.not.be.null;
+        });
+      });
+
+      describe('tcfPostMessageApi', () => {
+        let iframe;
+        let ampVideoIframe;
+        let event;
+        let listenerSpy;
+        let msg;
+
+        beforeEach(() => {
+          jsonMockResponses = {
+            'https://server-test-2/':
+              '{"consentRequired": true, "consentStateValue": "accepted", "consentString": "mystring"}',
+          };
+          consentElement = createConsentElement(
+            doc,
+            dict({
+              'consentInstanceId': 'abc',
+              'checkConsentHref': 'https://server-test-2/',
+              'exposesTcfApi': true,
+            })
+          );
+          doc.body.appendChild(consentElement);
+          ampConsent = new AmpConsent(consentElement);
+          ampVideoIframe = document.createElement('amp-video-iframe');
+          iframe = doc.createElement('iframe');
+          ampVideoIframe.appendChild(iframe);
+          doc.body.appendChild(ampVideoIframe);
+          event = new Event('message');
+          msg = {
+            __tcfapiCall: {
+              command: 'ping',
+              version: 2,
+              callId: 1,
+            },
+          };
+        });
+
+        it('installs __tcfapiLocator & 3p iframe can locate after amp-consent unblocks', async () => {
+          await ampConsent.buildCallback();
+          await macroTask();
+          expect(iframe.contentWindow.parent.frames['__tcfapiLocator']).to.not
+            .be.undefined;
+          expect(win.frames['__tcfapiLocator']).to.deep.equals(
+            iframe.contentWindow.parent.frames['__tcfapiLocator']
+          );
+          const frames = doc.querySelectorAll('iframe');
+          for (let i = 0; i < frames.length; i++) {
+            if (frames[i].name === '__tcfapiLocator') {
+              expect(frames[i].hasAttribute('aria-hidden')).to.be.true;
+              expect(frames[i].hasAttribute('hidden')).to.be.true;
+            }
+          }
+        });
+
+        it('installs window level event listener', async () => {
+          event.data = msg;
+          await ampConsent.buildCallback();
+          await macroTask();
+          listenerSpy = env.sandbox.stub(
+            ampConsent.tcfApiCommandManager_,
+            'handleTcfCommand'
+          );
+          win.dispatchEvent(event);
+          expect(listenerSpy).to.be.calledOnce;
+          expect(listenerSpy.args[0][0]).to.deep.equals(msg);
+        });
       });
     });
 
@@ -853,6 +1107,7 @@ describes.realWin(
         consentElement = createConsentElement(doc, defaultConfig);
       });
 
+      // GEO
       it('in geo group', async () => {
         doc.body.appendChild(consentElement);
         ampConsent = new AmpConsent(consentElement);
@@ -912,12 +1167,13 @@ describes.realWin(
         doc.body.appendChild(consentElement);
         ampConsent = new AmpConsent(consentElement);
         actionSpy = env.sandbox.stub(ampConsent, 'handleAction_');
+        env.sandbox.stub(ampConsent, 'isReadyToHandleAction_').returns(true);
         ampConsent.enableInteractions_();
         ampIframe = document.createElement('amp-iframe');
         iframe = doc.createElement('iframe');
         ampIframe.appendChild(iframe);
         ampConsent.element.appendChild(ampIframe);
-        ampConsent.isPromptUIOn_ = true;
+        ampConsent.isPromptUiOn_ = true;
         event = new Event('message');
       });
 
@@ -926,19 +1182,98 @@ describes.realWin(
           'type': 'consent-response',
           'action': 'accept',
           'info': 'accept-string',
-          'consentMetadata': {'consentStringType': CONSENT_STRING_TYPE.TCF_V1},
+          'consentMetadata': {
+            'consentStringType': CONSENT_STRING_TYPE.TCF_V1,
+            'additionalConsent': '1~1.35.41.101',
+            'gdprApplies': true,
+            'purposeOne': true,
+          },
         };
         event.source = iframe.contentWindow;
         win.dispatchEvent(event);
         expect(actionSpy).to.be.calledWith(
           ACTION_TYPE.ACCEPT,
           'accept-string',
-          {'consentStringType': CONSENT_STRING_TYPE.TCF_V1}
+          constructMetadata(
+            CONSENT_STRING_TYPE.TCF_V1,
+            '1~1.35.41.101',
+            true,
+            true
+          )
         );
       });
 
+      describe('granularConsentExp', () => {
+        let managerSpy;
+
+        beforeEach(async () => {
+          ampConsent.buildCallback();
+          await macroTask();
+          managerSpy = env.sandbox.spy(
+            ampConsent.consentStateManager_,
+            'updateConsentInstancePurposes'
+          );
+          event.data = {
+            'type': 'consent-response',
+            'action': 'accept',
+            'info': 'accept-string',
+            'purposeConsents': {
+              'purpose-foo': true,
+              'purpose-bar': false,
+            },
+          };
+          toggleExperiment(win, 'amp-consent-granular-consent', true);
+        });
+
+        afterEach(() => {
+          toggleExperiment(win, 'amp-consent-granular-consent', false);
+        });
+
+        it('handles purposeConsentMap w/ accept', () => {
+          event.source = iframe.contentWindow;
+          win.dispatchEvent(event);
+
+          expect(managerSpy).to.be.calledWith(event.data.purposeConsents);
+          expect(actionSpy).to.be.calledWith(
+            ACTION_TYPE.ACCEPT,
+            'accept-string'
+          );
+        });
+
+        it('handles purposeConsentMap w/ reject', () => {
+          event.data.action = 'reject';
+          delete event.data.info;
+          event.source = iframe.contentWindow;
+          win.dispatchEvent(event);
+
+          expect(managerSpy).to.be.calledWith(event.data.purposeConsents);
+          expect(actionSpy).to.be.calledWith(ACTION_TYPE.REJECT);
+        });
+
+        it('does not set purposeConsentMap with dismiss', () => {
+          event.data.action = 'dismiss';
+          event.source = iframe.contentWindow;
+          win.dispatchEvent(event);
+
+          expect(managerSpy).to.not.be.called;
+          expect(actionSpy).to.be.calledWith(ACTION_TYPE.DISMISS);
+        });
+
+        it('does not set purposeConsentMap with empty consent map', () => {
+          event.data.purposeConsents = {};
+          event.source = iframe.contentWindow;
+          win.dispatchEvent(event);
+
+          expect(managerSpy).to.not.be.called;
+          expect(actionSpy).to.be.calledWith(
+            ACTION_TYPE.ACCEPT,
+            'accept-string'
+          );
+        });
+      });
+
       it('ignore info when prompt UI is not displayed', () => {
-        ampConsent.isPromptUIOn_ = false;
+        ampConsent.isPromptUiOn_ = false;
         event.data = {
           'type': 'consent-response',
           'action': 'accept',
@@ -1032,7 +1367,7 @@ describes.realWin(
           .getConsentInstanceInfo();
 
         expect(instanceInfo.consentState).to.equal(CONSENT_ITEM_STATE.ACCEPTED);
-        expect(ampConsent.isPromptUIOn_).to.be.false;
+        expect(ampConsent.isPromptUiOn_).to.be.false;
       });
 
       it('update current displaying status', async () => {
@@ -1043,14 +1378,15 @@ describes.realWin(
           'updateConsentInstanceState'
         );
         await macroTask();
-        expect(ampConsent.isPromptUIOn_).to.be.true;
+        expect(ampConsent.isPromptUiOn_).to.be.true;
         await macroTask();
         ampConsent.handleAction_(ACTION_TYPE.ACCEPT);
+        await macroTask();
         expect(updateConsentInstanceStateSpy).to.be.calledWith(
           CONSENT_ITEM_STATE.ACCEPTED
         );
         await macroTask();
-        expect(ampConsent.isPromptUIOn_).to.be.false;
+        expect(ampConsent.isPromptUiOn_).to.be.false;
       });
 
       it('ignore action when no consent prompt is displaying', async () => {
@@ -1060,12 +1396,14 @@ describes.realWin(
           ampConsent.consentStateManager_,
           'updateConsentInstanceState'
         );
+        // Hide gets called
         ampConsent.handleAction_(ACTION_TYPE.DISMISS);
         await macroTask();
         expect(updateConsentInstanceStateSpy).to.be.calledOnce;
         updateConsentInstanceStateSpy.resetHistory();
-        expect(ampConsent.isPromptUIOn_).to.be.false;
-        ampConsent.handleAction_(ACTION_TYPE.DISMISS);
+        expect(ampConsent.isPromptUiOn_).to.be.false;
+        // isReadyToHandleAction_() should return false
+        ampConsent.handleClosingUiAction_(ACTION_TYPE.DISMISS);
         await macroTask();
         expect(updateConsentInstanceStateSpy).to.not.be.called;
       });
@@ -1126,6 +1464,16 @@ describes.realWin(
           expect(postPromptUI).to.have.display('none');
         });
 
+        it('postPromptUI to accept expireCache arg', async () => {
+          storageValue = {
+            'amp-consent:ABC': true,
+          };
+          await ampConsent.buildCallback();
+          ampConsent.handleReprompt_({args: {'expireCache': true}});
+          await macroTask();
+          expect(storageValue['amp-consent:ABC']['d']).to.equal(1);
+        });
+
         describe('hide/show postPromptUI with local storage', () => {
           beforeEach(() => {
             defaultConfig = dict({
@@ -1214,6 +1562,335 @@ describes.realWin(
         });
       });
     });
+
+    describe('granular consent experiment', () => {
+      let defaultConfig;
+      let ampConsent;
+      let consentElement;
+
+      beforeEach(() => {
+        toggleExperiment(win, 'amp-consent-granular-consent', true);
+        jsonMockResponses = {
+          'https://server-test-1/':
+            '{"consentRequired": true, "purposeConsentRequired": ["abc", "bcd"]}',
+          'https://server-test-2/': '{"consentRequired": true}',
+          'https://server-test-3/':
+            '{"consentRequired": true, "purposeConsentRequired": "verybad"}',
+        };
+        defaultConfig = dict({
+          'consentInstanceId': 'abc',
+        });
+      });
+
+      afterEach(() => {
+        toggleExperiment(win, 'amp-consent-granular-consent', false);
+      });
+
+      describe('purposeConsentRequired', () => {
+        it('uses inline purposeConsentRequired', async () => {
+          defaultConfig['purposeConsentRequired'] = ['zyx', 'yxw'];
+          defaultConfig['consentRequired'] = true;
+          consentElement = createConsentElement(doc, defaultConfig);
+          doc.body.appendChild(consentElement);
+          ampConsent = new AmpConsent(consentElement);
+          await ampConsent.buildCallback();
+          expect(await ampConsent.getPurposeConsentRequired_()).to.deep.equal(
+            defaultConfig['purposeConsentRequired']
+          );
+        });
+
+        it('uses purposeConsentRequired from remote if not inlined', async () => {
+          defaultConfig['consentRequired'] = 'remote';
+          defaultConfig['checkConsentHref'] = 'https://server-test-1/';
+          consentElement = createConsentElement(doc, defaultConfig);
+          doc.body.appendChild(consentElement);
+          ampConsent = new AmpConsent(consentElement);
+          await ampConsent.buildCallback();
+          expect(await ampConsent.getPurposeConsentRequired_()).to.deep.equal([
+            'abc',
+            'bcd',
+          ]);
+        });
+
+        it('returns null if no purposeConsentsRequired are found', async () => {
+          defaultConfig['consentRequired'] = 'remote';
+          defaultConfig['checkConsentHref'] = 'https://server-test-2/';
+          consentElement = createConsentElement(doc, defaultConfig);
+          doc.body.appendChild(consentElement);
+          ampConsent = new AmpConsent(consentElement);
+          await ampConsent.buildCallback();
+          expect(await ampConsent.getPurposeConsentRequired_()).to.null;
+        });
+
+        it(
+          'will only look at purposeConsentRequired if we have ' +
+            'global consent (state or tcString)',
+          async () => {
+            defaultConfig['purposeConsentRequired'] = ['zyx', 'yxw'];
+            defaultConfig['consentRequired'] = true;
+            consentElement = createConsentElement(doc, defaultConfig);
+            doc.body.appendChild(consentElement);
+            ampConsent = new AmpConsent(consentElement);
+            await ampConsent.buildCallback();
+            env.sandbox
+              .stub(ampConsent.consentStateManager_, 'getConsentInstanceInfo')
+              .returns(Promise.resolve({}));
+            const spy = env.sandbox.spy(
+              ampConsent,
+              'checkGranularConsentRequired_'
+            );
+
+            expect(await ampConsent.hasRequiredConsents_()).to.be.false;
+            expect(spy).to.not.be.called;
+          }
+        );
+
+        it('returns null if no purposeConsentsRequired are found', async () => {
+          defaultConfig['consentRequired'] = 'remote';
+          defaultConfig['checkConsentHref'] = 'https://server-test-2/';
+          consentElement = createConsentElement(doc, defaultConfig);
+          doc.body.appendChild(consentElement);
+          ampConsent = new AmpConsent(consentElement);
+          await ampConsent.buildCallback();
+          expect(await ampConsent.getPurposeConsentRequired_()).to.be.null;
+        });
+
+        it('handles non-array purposeConsentsRequired', async () => {
+          defaultConfig['purposeConsentRequired'] = 'BAD';
+          defaultConfig['consentRequired'] = 'remote';
+          defaultConfig['checkConsentHref'] = 'https://server-test-3/';
+          consentElement = createConsentElement(doc, defaultConfig);
+          doc.body.appendChild(consentElement);
+          ampConsent = new AmpConsent(consentElement);
+          await ampConsent.buildCallback();
+          // Returned null so must've failed both inline and remote
+          expect(await ampConsent.getPurposeConsentRequired_()).to.be.null;
+        });
+      });
+
+      describe('promptUI', () => {
+        let updateConsentInstancePurposeSpy;
+
+        beforeEach(() => {
+          defaultConfig['purposeConsentRequired'] = ['zyx', 'yxw'];
+          defaultConfig['consentRequired'] = true;
+          consentElement = createConsentElement(doc, defaultConfig);
+          doc.body.appendChild(consentElement);
+          ampConsent = new AmpConsent(consentElement);
+          env.sandbox.stub(ampConsent.vsync_, 'mutate').callsFake((fn) => {
+            fn();
+          });
+          env.sandbox.stub(ampConsent, 'mutateElement').callsFake((fn) => {
+            fn();
+          });
+        });
+
+        it('generates default map from purposeConsentDefault', async () => {
+          const mockInvocation = {args: {purposeConsentDefault: true}};
+          await ampConsent.buildCallback();
+          await macroTask();
+          updateConsentInstancePurposeSpy = env.sandbox.spy(
+            ampConsent.consentStateManager_,
+            'updateConsentInstancePurposes'
+          );
+          ampConsent.handleClosingUiAction_(ACTION_TYPE.ACCEPT, mockInvocation);
+          await macroTask();
+          expect(updateConsentInstancePurposeSpy).to.be.calledWith(
+            {
+              'zyx': true,
+              'yxw': true,
+            },
+            true
+          );
+          expect(ampConsent.isPromptUiOn_).to.be.false;
+        });
+
+        it('purposeConsentDefault handles empty and null purposeConsentRequired', async () => {
+          const mockInvocation = {args: {purposeConsentDefault: true}};
+          ampConsent.purposeConsentRequired_ = Promise.resolve();
+          env.sandbox.stub(ampConsent, 'hide_').callsFake(() => {});
+          await ampConsent.buildCallback();
+          await macroTask();
+          updateConsentInstancePurposeSpy = env.sandbox.spy(
+            ampConsent.consentStateManager_,
+            'updateConsentInstancePurposes'
+          );
+
+          ampConsent.handleClosingUiAction_(ACTION_TYPE.ACCEPT, mockInvocation);
+          await macroTask();
+          expect(updateConsentInstancePurposeSpy).to.not.be.called;
+          // reset
+          ampConsent.purposeConsentRequired_ = Promise.resolve([]);
+          ampConsent.handleClosingUiAction_(ACTION_TYPE.REJECT, mockInvocation);
+          await macroTask();
+          expect(updateConsentInstancePurposeSpy).to.not.be.called;
+        });
+
+        it('ACTION_TYPE.SET_PURPOSE is accepted', async () => {
+          const mockInvocation = {
+            args: {'purpose-foo': true, 'purpose-bar': false},
+          };
+          await ampConsent.buildCallback();
+          await macroTask();
+          updateConsentInstancePurposeSpy = env.sandbox.spy(
+            ampConsent.consentStateManager_,
+            'updateConsentInstancePurposes'
+          );
+
+          ampConsent.handleSetPurpose_(mockInvocation);
+          await macroTask();
+          expect(updateConsentInstancePurposeSpy).to.be.calledWith(
+            mockInvocation.args
+          );
+        });
+
+        it('handles setPurpose with no args', async () => {
+          const mockInvocation = {args: null};
+          const devSpy = env.sandbox.spy(dev(), 'error');
+          await ampConsent.buildCallback();
+          await macroTask();
+          updateConsentInstancePurposeSpy = env.sandbox.spy(
+            ampConsent.consentStateManager_,
+            'updateConsentInstancePurposes'
+          );
+
+          ampConsent.handleSetPurpose_(mockInvocation);
+          await macroTask();
+          expect(devSpy.args[0][1]).to.match(
+            /Must have arugments for `setPurpose`./
+          );
+          expect(devSpy).to.be.calledOnce;
+          expect(updateConsentInstancePurposeSpy).not.be.called;
+        });
+      });
+
+      describe('server communication', () => {
+        beforeEach(() => {
+          jsonMockResponses = {
+            'https://server-test-1/':
+              '{"consentRequired": true, "consentStateValue": "accepted", "purposeConsentRequired": ["abc","xyz"]}',
+          };
+          defaultConfig = {
+            'consentInstanceId': 'abc',
+            'consentRequired': 'remote',
+            'checkConsentHref': 'https://server-test-1/',
+          };
+        });
+
+        it('checks global consent and then purpose consents', async () => {
+          const localStorageSpy = env.sandbox.spy(storageMock, 'get');
+          consentElement = createConsentElement(doc, defaultConfig);
+          doc.body.appendChild(consentElement);
+          ampConsent = new AmpConsent(consentElement);
+          const checkGranularConsentSpy = env.sandbox.spy(
+            ampConsent,
+            'checkGranularConsentRequired_'
+          );
+          await ampConsent.buildCallback();
+          await macroTask();
+
+          expect(localStorageSpy).to.be.calledBefore(checkGranularConsentSpy);
+          expect(checkGranularConsentSpy).to.be.calledOnce;
+        });
+
+        it('returns true if all purpose consents are stored', async () => {
+          storageValue = {
+            'amp-consent:abc': {
+              [STORAGE_KEY.STATE]: 1,
+              [STORAGE_KEY.PURPOSE_CONSENTS]: {
+                'abc': 1,
+                'hij': 1,
+                'xyz': 0,
+              },
+            },
+          };
+          consentElement = createConsentElement(doc, defaultConfig);
+          doc.body.appendChild(consentElement);
+          ampConsent = new AmpConsent(consentElement);
+          const hasRequiredConsentsSpy = env.sandbox.spy(
+            ampConsent,
+            'hasRequiredConsents_'
+          );
+          await ampConsent.buildCallback();
+          await macroTask();
+          expect(await hasRequiredConsentsSpy.returnValues[0]).to.equal(true);
+        });
+
+        it('returns false if not all purpose consents are stored', async () => {
+          storageValue = {
+            'amp-consent:abc': {
+              [STORAGE_KEY.STATE]: 1,
+              [STORAGE_KEY.PURPOSE_CONSENTS]: {
+                'abc': 1,
+                'hij': 1,
+                'zzz': 0,
+              },
+            },
+          };
+          consentElement = createConsentElement(doc, defaultConfig);
+          doc.body.appendChild(consentElement);
+          ampConsent = new AmpConsent(consentElement);
+          const hasRequiredConsentsSpy = env.sandbox.spy(
+            ampConsent,
+            'hasRequiredConsents_'
+          );
+          await ampConsent.buildCallback();
+          await macroTask();
+          expect(await hasRequiredConsentsSpy.returnValues[0]).to.equal(false);
+        });
+
+        it('informs consent state manager if all purpose consents are collected', async () => {
+          storageValue = {
+            'amp-consent:abc': {
+              [STORAGE_KEY.STATE]: 1,
+              [STORAGE_KEY.PURPOSE_CONSENTS]: {
+                'abc': 1,
+                'hij': 1,
+                'xyz': 0,
+              },
+            },
+          };
+          consentElement = createConsentElement(doc, defaultConfig);
+          doc.body.appendChild(consentElement);
+          ampConsent = new AmpConsent(consentElement);
+          const consentStateManagerSpy = env.sandbox.spy(
+            ConsentStateManager.prototype,
+            'hasAllPurposeConsents'
+          );
+          await ampConsent.buildCallback();
+          await macroTask();
+          // Once for remote sync, once for showing UI flow
+          expect(consentStateManagerSpy).to.be.calledTwice;
+        });
+
+        it(
+          'does not inform consent state manager if not all' +
+            'purpose consents are collected',
+          async () => {
+            storageValue = {
+              'amp-consent:abc': {
+                [STORAGE_KEY.STATE]: 1,
+                [STORAGE_KEY.PURPOSE_CONSENTS]: {
+                  'abc': 1,
+                  'hij': 1,
+                },
+              },
+            };
+            consentElement = createConsentElement(doc, defaultConfig);
+            doc.body.appendChild(consentElement);
+            ampConsent = new AmpConsent(consentElement);
+            const consentStateManagerSpy = env.sandbox.spy(
+              ConsentStateManager.prototype,
+              'hasAllPurposeConsents'
+            );
+            await ampConsent.buildCallback();
+            await macroTask();
+            // Only once b/c of sync flow
+            expect(consentStateManagerSpy).to.be.calledOnce;
+          }
+        );
+      });
+    });
   }
 );
 
diff --git a/extensions/amp-consent/0.1/test/test-consent-config.js b/extensions/amp-consent/0.1/test/test-consent-config.js
index fe45f6547ad08..3d2711c70f7b9 100644
--- a/extensions/amp-consent/0.1/test/test-consent-config.js
+++ b/extensions/amp-consent/0.1/test/test-consent-config.js
@@ -14,11 +14,15 @@
  * limitations under the License.
  */
 
-import {CONSENT_POLICY_STATE} from '../../../../src/consent-state';
-import {ConsentConfig, expandPolicyConfig} from '../consent-config';
+import {CONSENT_POLICY_STATE} from '../../../../src/core/constants/consent-state';
+import {
+  ConsentConfig,
+  expandConsentEndpointUrl,
+  expandPolicyConfig,
+} from '../consent-config';
 import {GEO_IN_GROUP} from '../../../amp-geo/0.1/amp-geo-in-group';
 import {Services} from '../../../../src/services';
-import {dict} from '../../../../src/utils/object';
+import {dict} from '../../../../src/core/types/object';
 
 describes.realWin('ConsentConfig', {amp: 1}, (env) => {
   let doc;
@@ -55,22 +59,40 @@ describes.realWin('ConsentConfig', {amp: 1}, (env) => {
       );
     });
 
-    it('read cmp config', () => {
+    it('read cmp config', async () => {
       appendConfigScriptElement(doc, element, dict({}));
       element.setAttribute('type', '_ping_');
       const consentConfig = new ConsentConfig(element);
-      return expect(
-        consentConfig.getConsentConfigPromise()
-      ).to.eventually.deep.equal(
+      // Make a deep copy of the config to avoid error when deleting fields
+      const config = JSON.parse(
+        JSON.stringify(await consentConfig.getConsentConfigPromise())
+      );
+      expect(config['checkConsentHref']).to.match(/get-consent-v1/);
+      expect(config['promptUISrc']).to.match(/diy-consent.html/);
+      // Remove non deterministic field.
+      delete config['checkConsentHref'];
+      delete config['promptUISrc'];
+      expect(config).to.deep.equal(
         dict({
           'consentInstanceId': '_ping_',
-          'checkConsentHref': '/get-consent-v1',
-          'promptUISrc': '/examples/amp-consent/diy-consent.html',
           'consentRequired': 'remote',
         })
       );
     });
 
+    it('should ignore promptUISrc w/ amp-story-consent', async () => {
+      appendConfigScriptElement(doc, element, dict({}));
+      element.setAttribute('type', '_ping_');
+      element.appendChild(doc.createElement('amp-story-consent'));
+      const expectedError =
+        'amp-consent/consent-config: ' +
+        '`promptUiSrc` cannot be specified while using' +
+        ' amp-story-consent.';
+      await expect(
+        new ConsentConfig(element).getConsentConfigPromise()
+      ).to.be.rejectedWith(expectedError);
+    });
+
     it('converts deprecated format to new format', async () => {
       appendConfigScriptElement(
         doc,
@@ -198,12 +220,17 @@ describes.realWin('ConsentConfig', {amp: 1}, (env) => {
       );
       element.setAttribute('type', '_ping_');
       const consentConfig = new ConsentConfig(element);
-      expect(await consentConfig.getConsentConfigPromise()).to.deep.equal(
+      // Make a deep copy of the config to avoid error when deleting fields
+      const config = JSON.parse(
+        JSON.stringify(await consentConfig.getConsentConfigPromise())
+      );
+      expect(config['promptUISrc']).to.match(/diy-consent.html/);
+      delete config['promptUISrc'];
+      expect(config).to.deep.equal(
         dict({
           'consentInstanceId': '_ping_',
           'checkConsentHref': '/override',
           'consentRequired': false,
-          'promptUISrc': '/examples/amp-consent/diy-consent.html',
           'promptIfUnknownForGeoGroup': 'eea',
           'postPromptUI': 'test',
           'clientConfig': {
@@ -253,7 +280,7 @@ describes.realWin('ConsentConfig', {amp: 1}, (env) => {
         env.sandbox.stub(Services, 'geoForDocOrNull').returns(
           Promise.resolve({
             isInCountryGroup() {
-              return false;
+              return GEO_IN_GROUP.NOT_IN;
             },
           })
         );
@@ -513,6 +540,36 @@ describes.realWin('ConsentConfig', {amp: 1}, (env) => {
     });
   });
 
+  describe('expandConsentEndpointUrl', () => {
+    it('support expansion in allowed list', async () => {
+      const url = await expandConsentEndpointUrl(
+        doc.body,
+        'https://example.test?cid=CLIENT_ID&pid=PAGE_VIEW_ID&pid64=PAGE_VIEW_ID_64&r=RANDOM'
+      );
+      expect(url).to.match(/cid=amp-.{22}&pid=[0-9]+&pid64=.{22}&r=RANDOM/);
+    });
+
+    it('override CLIENT_ID scope', async () => {
+      const u1 = await expandConsentEndpointUrl(
+        doc.body,
+        'https://example.test?cid=CLIENT_ID'
+      );
+      const u2 = await expandConsentEndpointUrl(
+        doc.body,
+        'https://example.test?cid=CLIENT_ID()'
+      );
+      const u3 = await expandConsentEndpointUrl(
+        doc.body,
+        'https://example.test?cid=CLIENT_ID(123)'
+      );
+      const u4 = await expandConsentEndpointUrl(
+        doc.body,
+        'https://example.test?cid=CLIENT_ID(abc)'
+      );
+      expect(u1).to.equal(u2).to.equal(u3).to.equal(u4);
+    });
+  });
+
   describe('expandPolicyConfig', () => {
     it('create default policy', () => {
       const policy = expandPolicyConfig(dict({}), 'ABC');
diff --git a/extensions/amp-consent/0.1/test/test-consent-info.js b/extensions/amp-consent/0.1/test/test-consent-info.js
index 27978d1fbd074..b3471227c4eb2 100644
--- a/extensions/amp-consent/0.1/test/test-consent-info.js
+++ b/extensions/amp-consent/0.1/test/test-consent-info.js
@@ -17,6 +17,7 @@
 import {
   CONSENT_ITEM_STATE,
   METADATA_STORAGE_KEY,
+  PURPOSE_CONSENT_STATE,
   composeMetadataStoreValue,
   composeStoreValue,
   constructConsentInfo,
@@ -26,8 +27,8 @@ import {
   isConsentInfoStoredValueSame,
   recalculateConsentStateValue,
 } from '../consent-info';
-import {CONSENT_STRING_TYPE} from '../../../../src/consent-state';
-import {dict} from '../../../../src/utils/object';
+import {CONSENT_STRING_TYPE} from '../../../../src/core/constants/consent-state';
+import {dict} from '../../../../src/core/types/object';
 
 describes.fakeWin('ConsentInfo', {}, () => {
   describe('getStoredConsentInfo', () => {
@@ -37,6 +38,7 @@ describes.fakeWin('ConsentInfo', {}, () => {
           'consentState': CONSENT_ITEM_STATE.UNKNOWN,
           'consentString': undefined,
           'consentMetadata': undefined,
+          'purposeConsents': undefined,
           'isDirty': undefined,
         })
       );
@@ -48,6 +50,7 @@ describes.fakeWin('ConsentInfo', {}, () => {
           'consentState': CONSENT_ITEM_STATE.ACCEPTED,
           'consentString': undefined,
           'consentMetadata': undefined,
+          'purposeConsents': undefined,
           'isDirty': undefined,
         })
       );
@@ -56,6 +59,7 @@ describes.fakeWin('ConsentInfo', {}, () => {
           'consentState': CONSENT_ITEM_STATE.REJECTED,
           'consentString': undefined,
           'consentMetadata': undefined,
+          'purposeConsents': undefined,
           'isDirty': undefined,
         })
       );
@@ -71,6 +75,7 @@ describes.fakeWin('ConsentInfo', {}, () => {
           'consentState': CONSENT_ITEM_STATE.ACCEPTED,
           'consentString': undefined,
           'consentMetadata': constructMetadata(),
+          'purposeConsents': undefined,
           'isDirty': undefined,
         })
       );
@@ -84,6 +89,7 @@ describes.fakeWin('ConsentInfo', {}, () => {
           'consentState': CONSENT_ITEM_STATE.REJECTED,
           'consentString': 'test',
           'consentMetadata': constructMetadata(),
+          'purposeConsents': undefined,
           'isDirty': undefined,
         })
       );
@@ -98,6 +104,7 @@ describes.fakeWin('ConsentInfo', {}, () => {
           'consentState': CONSENT_ITEM_STATE.REJECTED,
           'consentString': 'test',
           'isDirty': undefined,
+          'purposeConsents': undefined,
           'consentMetadata': constructMetadata(),
         })
       );
@@ -108,6 +115,8 @@ describes.fakeWin('ConsentInfo', {}, () => {
           'm': {
             [METADATA_STORAGE_KEY.CONSENT_STRING_TYPE]:
               CONSENT_STRING_TYPE.TCF_V2,
+            [METADATA_STORAGE_KEY.ADDITIONAL_CONSENT]: '1~1.35.41.101',
+            [METADATA_STORAGE_KEY.GDPR_APPLIES]: false,
           },
         })
       ).to.deep.equal(
@@ -115,7 +124,12 @@ describes.fakeWin('ConsentInfo', {}, () => {
           'consentState': CONSENT_ITEM_STATE.REJECTED,
           'consentString': 'test',
           'isDirty': undefined,
-          'consentMetadata': constructMetadata(CONSENT_STRING_TYPE.TCF_V2),
+          'purposeConsents': undefined,
+          'consentMetadata': constructMetadata(
+            CONSENT_STRING_TYPE.TCF_V2,
+            '1~1.35.41.101',
+            false
+          ),
         })
       );
       expect(
@@ -125,6 +139,7 @@ describes.fakeWin('ConsentInfo', {}, () => {
           'm': {
             [METADATA_STORAGE_KEY.CONSENT_STRING_TYPE]:
               CONSENT_STRING_TYPE.TCF_V2,
+            [METADATA_STORAGE_KEY.ADDITIONAL_CONSENT]: '1~1.35.41.101',
           },
           'd': 1,
         })
@@ -133,7 +148,33 @@ describes.fakeWin('ConsentInfo', {}, () => {
           'consentState': CONSENT_ITEM_STATE.UNKNOWN,
           'consentString': 'test',
           'isDirty': true,
-          'consentMetadata': constructMetadata(CONSENT_STRING_TYPE.TCF_V2),
+          'purposeConsents': undefined,
+          'consentMetadata': constructMetadata(
+            CONSENT_STRING_TYPE.TCF_V2,
+            '1~1.35.41.101'
+          ),
+        })
+      );
+      expect(
+        getStoredConsentInfo({
+          's': -1,
+          'r': 'test',
+          'pc': {
+            'abc': 1,
+            'xyz': 2,
+          },
+          'd': 1,
+        })
+      ).to.deep.equal(
+        dict({
+          'consentState': CONSENT_ITEM_STATE.UNKNOWN,
+          'consentString': 'test',
+          'isDirty': true,
+          'purposeConsents': {
+            'abc': PURPOSE_CONSENT_STATE.ACCEPTED,
+            'xyz': PURPOSE_CONSENT_STATE.REJECTED,
+          },
+          'consentMetadata': constructMetadata(),
         })
       );
     });
@@ -141,6 +182,9 @@ describes.fakeWin('ConsentInfo', {}, () => {
     it('construct ConsentMetadataDef from stored value', () => {
       expect(convertStorageMetadata()).to.deep.equals({
         'consentStringType': undefined,
+        'additionalConsent': undefined,
+        'gdprApplies': undefined,
+        'purposeOne': undefined,
       });
       expect(
         convertStorageMetadata({
@@ -150,6 +194,37 @@ describes.fakeWin('ConsentInfo', {}, () => {
       ).to.deep.equal(
         dict({
           'consentStringType': CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+          'additionalConsent': undefined,
+          'gdprApplies': undefined,
+          'purposeOne': undefined,
+        })
+      );
+      expect(
+        convertStorageMetadata({
+          undefined,
+          [METADATA_STORAGE_KEY.ADDITIONAL_CONSENT]: '1~1.35.41.101',
+        })
+      ).to.deep.equal(
+        dict({
+          'consentStringType': undefined,
+          'additionalConsent': '1~1.35.41.101',
+          'gdprApplies': undefined,
+          'purposeOne': undefined,
+        })
+      );
+      expect(
+        convertStorageMetadata({
+          [METADATA_STORAGE_KEY.CONSENT_STRING_TYPE]:
+            CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+          [METADATA_STORAGE_KEY.ADDITIONAL_CONSENT]: '1~1.35.41.101',
+          [METADATA_STORAGE_KEY.PURPOSE_ONE]: true,
+        })
+      ).to.deep.equal(
+        dict({
+          'consentStringType': CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+          'additionalConsent': '1~1.35.41.101',
+          'gdprApplies': undefined,
+          'purposeOne': true,
         })
       );
     });
@@ -183,7 +258,8 @@ describes.fakeWin('ConsentInfo', {}, () => {
     consentInfo = constructConsentInfo(
       CONSENT_ITEM_STATE.ACCEPTED,
       'test',
-      constructMetadata()
+      constructMetadata(),
+      {'abc': PURPOSE_CONSENT_STATE.ACCEPTED}
     );
     expect(getStoredConsentInfo(composeStoreValue(consentInfo))).to.deep.equal(
       consentInfo
@@ -192,7 +268,8 @@ describes.fakeWin('ConsentInfo', {}, () => {
     consentInfo = constructConsentInfo(
       CONSENT_ITEM_STATE.ACCEPTED,
       'test',
-      constructMetadata(CONSENT_STRING_TYPE.TCF_V2),
+      constructMetadata(CONSENT_STRING_TYPE.TCF_V2, '1~1.35.41.101', true),
+      {'abc': PURPOSE_CONSENT_STATE.ACCEPTED},
       true
     );
     expect(getStoredConsentInfo(composeStoreValue(consentInfo))).to.deep.equal(
@@ -221,12 +298,19 @@ describes.fakeWin('ConsentInfo', {}, () => {
       expect(composeStoreValue(consentInfo)).to.deep.equal({
         's': 0,
       });
-      consentInfo['idDirty'] = false;
+      consentInfo['isDirty'] = false;
       consentInfo['consentString'] = 'test';
       expect(composeStoreValue(consentInfo)).to.deep.equal({
         's': 0,
         'r': 'test',
       });
+      consentInfo['purposeConsents'] = {'zyx': PURPOSE_CONSENT_STATE.REJECTED};
+      expect(composeStoreValue(consentInfo)).to.deep.equal({
+        's': 0,
+        'r': 'test',
+        'pc': {'zyx': 2},
+      });
+      delete consentInfo['purposeConsents'];
       consentInfo['isDirty'] = true;
       expect(composeStoreValue(consentInfo)).to.deep.equal({
         's': 0,
@@ -234,7 +318,9 @@ describes.fakeWin('ConsentInfo', {}, () => {
         'd': 1,
       });
       consentInfo['consentMetadata'] = constructMetadata(
-        CONSENT_STRING_TYPE.TCF_V1
+        CONSENT_STRING_TYPE.TCF_V1,
+        '1~1.35.41.101',
+        false
       );
       expect(composeStoreValue(consentInfo)).to.deep.equal({
         's': 0,
@@ -243,6 +329,8 @@ describes.fakeWin('ConsentInfo', {}, () => {
         'm': {
           [METADATA_STORAGE_KEY.CONSENT_STRING_TYPE]:
             CONSENT_STRING_TYPE.TCF_V1,
+          [METADATA_STORAGE_KEY.ADDITIONAL_CONSENT]: '1~1.35.41.101',
+          [METADATA_STORAGE_KEY.GDPR_APPLIES]: false,
         },
       });
     });
@@ -256,6 +344,32 @@ describes.fakeWin('ConsentInfo', {}, () => {
         [METADATA_STORAGE_KEY.CONSENT_STRING_TYPE]:
           CONSENT_STRING_TYPE.US_PRIVACY_STRING,
       });
+      expect(
+        composeMetadataStoreValue(constructMetadata(undefined, '1~1.35.41.101'))
+      ).to.deep.equal({
+        [METADATA_STORAGE_KEY.ADDITIONAL_CONSENT]: '1~1.35.41.101',
+      });
+      expect(
+        composeMetadataStoreValue(
+          constructMetadata(undefined, undefined, false)
+        )
+      ).to.deep.equal({
+        [METADATA_STORAGE_KEY.GDPR_APPLIES]: false,
+      });
+      expect(
+        composeMetadataStoreValue(
+          constructMetadata(
+            CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+            '1~1.35.41.101',
+            true
+          )
+        )
+      ).to.deep.equal({
+        [METADATA_STORAGE_KEY.CONSENT_STRING_TYPE]:
+          CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+        [METADATA_STORAGE_KEY.ADDITIONAL_CONSENT]: '1~1.35.41.101',
+        [METADATA_STORAGE_KEY.GDPR_APPLIES]: true,
+      });
     });
   });
 
@@ -338,6 +452,12 @@ describes.fakeWin('ConsentInfo', {}, () => {
     infoB['consentMetadata'] = constructMetadata(
       CONSENT_STRING_TYPE.US_PRIVACY_STRING
     );
+
+    infoB['purposeConsents'] = {'abc': PURPOSE_CONSENT_STATE.ACCEPTED};
+    infoA['purposeConsents'] = {'xyz': PURPOSE_CONSENT_STATE.ACCEPTED};
+    expect(isConsentInfoStoredValueSame(infoA, infoB)).to.be.false;
+
+    infoB['purposeConsents'] = {'xyz': PURPOSE_CONSENT_STATE.ACCEPTED};
     infoB['isDirty'] = true;
     expect(isConsentInfoStoredValueSame(infoA, infoB)).to.be.false;
 
@@ -349,11 +469,44 @@ describes.fakeWin('ConsentInfo', {}, () => {
     it('constructMetadata', () => {
       expect(constructMetadata()).to.deep.equal({
         'consentStringType': undefined,
+        'additionalConsent': undefined,
+        'gdprApplies': undefined,
+        'purposeOne': undefined,
       });
       expect(
         constructMetadata(CONSENT_STRING_TYPE.US_PRIVACY_STRING)
       ).to.deep.equal({
         'consentStringType': CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+        'additionalConsent': undefined,
+        'gdprApplies': undefined,
+        'purposeOne': undefined,
+      });
+      expect(constructMetadata(undefined, '1~1.35.41.101')).to.deep.equal({
+        'consentStringType': undefined,
+        'additionalConsent': '1~1.35.41.101',
+        'gdprApplies': undefined,
+        'purposeOne': undefined,
+      });
+      expect(
+        constructMetadata(undefined, undefined, true, false)
+      ).to.deep.equal({
+        'consentStringType': undefined,
+        'additionalConsent': undefined,
+        'gdprApplies': true,
+        'purposeOne': false,
+      });
+      expect(
+        constructMetadata(
+          CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+          '1~1.35.41.101',
+          true,
+          true
+        )
+      ).to.deep.equal({
+        'consentStringType': CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+        'additionalConsent': '1~1.35.41.101',
+        'gdprApplies': true,
+        'purposeOne': true,
       });
     });
   });
diff --git a/extensions/amp-consent/0.1/test/test-consent-policy-manager.js b/extensions/amp-consent/0.1/test/test-consent-policy-manager.js
index ea3507ad24aee..74262408c931e 100644
--- a/extensions/amp-consent/0.1/test/test-consent-policy-manager.js
+++ b/extensions/amp-consent/0.1/test/test-consent-policy-manager.js
@@ -14,21 +14,22 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {
   CONSENT_ITEM_STATE,
+  PURPOSE_CONSENT_STATE,
   constructConsentInfo,
   constructMetadata,
 } from '../consent-info';
 import {
   CONSENT_POLICY_STATE,
   CONSENT_STRING_TYPE,
-} from '../../../../src/consent-state';
+} from '../../../../src/core/constants/consent-state';
 import {
   ConsentPolicyInstance,
   ConsentPolicyManager,
 } from '../consent-policy-manager';
-import {dict} from '../../../../src/utils/object';
+import {dict} from '../../../../src/core/types/object';
 import {expandPolicyConfig} from '../consent-config';
 import {macroTask} from '../../../../testing/yield';
 
@@ -65,6 +66,9 @@ describes.realWin(
             consentManagerOnChangeSpy(handler);
             handler(consentInfo);
           },
+          whenHasAllPurposeConsents: () => {
+            return Promise.resolve();
+          },
           getConsentInstanceSharedData: () => {
             return Promise.resolve(
               dict({
@@ -72,9 +76,6 @@ describes.realWin(
               })
             );
           },
-          getConsentInstanceGdprApplies: () => {
-            return Promise.resolve(false);
-          },
         });
       });
     });
@@ -90,32 +91,38 @@ describes.realWin(
         consentInfo = constructConsentInfo(
           CONSENT_ITEM_STATE.ACCEPTED,
           'test',
-          constructMetadata(CONSENT_STRING_TYPE.TCF_V1)
+          constructMetadata(CONSENT_STRING_TYPE.TCF_V1),
+          {
+            'purpose-foo': PURPOSE_CONSENT_STATE.ACCEPTED,
+            'purpose-bar': PURPOSE_CONSENT_STATE.REJECTED,
+          }
         );
         manager.setLegacyConsentInstanceId('ABC');
       });
 
-      it('Initiate consent value', function* () {
-        yield macroTask();
+      it('should initiate consent value', async () => {
+        await macroTask();
         expect(consentManagerOnChangeSpy).to.be.called;
         expect(manager.consentState_).to.equal(CONSENT_ITEM_STATE.ACCEPTED);
-        expect(manager.consentString_).to.equal('test');
         expect(manager.consentMetadata_).to.be.deep.equals(
           constructMetadata(CONSENT_STRING_TYPE.TCF_V1)
         );
+        expect(manager.purposeConsents_).to.deep.equals({
+          'purpose-foo': PURPOSE_CONSENT_STATE.ACCEPTED,
+          'purpose-bar': PURPOSE_CONSENT_STATE.REJECTED,
+        });
       });
 
       describe('Register policy instance', () => {
-        it('Valid consent policy', function* () {
+        it('should register valid consent policy', async () => {
           manager.registerConsentPolicyInstance('default', {
             'waitFor': {
               'ABC': undefined,
             },
           });
-          yield macroTask();
-          return manager.whenPolicyResolved('default').then((status) => {
-            expect(status).to.equal(CONSENT_POLICY_STATE.SUFFICIENT);
-          });
+          await macroTask();
+          const status = await manager.whenPolicyResolved('default');
+          expect(status).to.equal(CONSENT_POLICY_STATE.SUFFICIENT);
         });
 
         it('Invalid consent policy', function* () {
@@ -408,6 +415,65 @@ describes.realWin(
           return Promise.all(promises);
         });
       });
+
+      describe('setOnPolicyChange', () => {
+        let policy;
+        beforeEach(() => {
+          manager = new ConsentPolicyManager(ampdoc);
+          consentInfo = constructConsentInfo(CONSENT_ITEM_STATE.UNKNOWN);
+          manager.setLegacyConsentInstanceId('ABC');
+          policy = expandPolicyConfig(dict({}), 'ABC');
+          const keys = Object.keys(policy);
+          for (let i = 0; i < keys.length; i++) {
+            manager.registerConsentPolicyInstance(keys[i], policy[keys[i]]);
+          }
+        });
+
+        it('will not fire, if not set', () => {
+          manager.consentStateChangeHandler_(
+            constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED, 'abc123')
+          );
+          expect(manager.tcfConsentChangeHandler_).is.null;
+        });
+
+        it('will fire only fire for a valid change', () => {
+          const spy = env.sandbox.spy();
+          manager.setOnPolicyChange(spy);
+          expect(manager.tcfConsentChangeHandler_).to.not.be.null;
+
+          manager.consentStateChangeHandler_(
+            constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED, 'abc123')
+          );
+          expect(spy).to.be.calledOnce;
+
+          // Unknown does not trigger change.
+          manager.consentStateChangeHandler_(
+            constructConsentInfo(CONSENT_ITEM_STATE.UNKNOWN, '321cba')
+          );
+          expect(spy).to.be.calledOnce;
+        });
+
+        it('will fire on multiple changes', () => {
+          const spy = env.sandbox.spy();
+          manager.setOnPolicyChange(spy);
+          expect(manager.tcfConsentChangeHandler_).to.not.be.null;
+
+          manager.consentStateChangeHandler_(
+            constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED, 'abc123')
+          );
+          expect(spy).to.be.calledOnce;
+
+          manager.consentStateChangeHandler_(
+            constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED, 'abc123')
+          );
+          expect(spy).to.be.calledTwice;
+
+          manager.consentStateChangeHandler_(
+            constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED, 'xyz123')
+          );
+          expect(spy).to.be.calledThrice;
+        });
+      });
     });
 
     describe('Consent Policy Instance', () => {
@@ -447,7 +513,7 @@ describes.realWin(
             },
           };
 
-          clock = lolex.install({target: ampdoc.win});
+          clock = fakeTimers.withGlobal(ampdoc.win).install();
         });
 
         it('consent policy should resolve after timeout', function* () {
@@ -601,39 +667,72 @@ describes.realWin(
           .callsFake(() => {
             return Promise.resolve();
           });
-        consentInfo = constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED, 'test');
+        consentInfo = constructConsentInfo(
+          CONSENT_ITEM_STATE.ACCEPTED,
+          'test',
+          constructMetadata(CONSENT_STRING_TYPE.TCF_V2, '1~1.10.14.103', false)
+        );
       });
 
-      // TODO(micajuineho) combine into metadata values
-      it('should return gdprApplies value', async () => {
+      it('should return metadata values from state manager', async () => {
         manager.registerConsentPolicyInstance('default', {
           'waitFor': {
             'ABC': undefined,
           },
         });
         await macroTask();
-        await expect(manager.getConsentMetadataInfo('default')).to.eventually.be
-          .undefined;
+        await expect(
+          manager.getConsentMetadataInfo('default')
+        ).to.eventually.deep.equals(
+          constructMetadata(CONSENT_STRING_TYPE.TCF_V2, '1~1.10.14.103', false)
+        );
       });
     });
 
-    describe('getGdprApplies', () => {
+    describe('consent purposes', () => {
       let manager;
 
       beforeEach(() => {
         manager = new ConsentPolicyManager(ampdoc);
         manager.setLegacyConsentInstanceId('ABC');
+        consentInfo = constructConsentInfo(
+          CONSENT_ITEM_STATE.ACCEPTED,
+          undefined,
+          undefined,
+          {
+            'purpose-foo': PURPOSE_CONSENT_STATE.ACCEPTED,
+            'purpose-bar': PURPOSE_CONSENT_STATE.ACCEPTED,
+            'purpose-xyz': PURPOSE_CONSENT_STATE.REJECTED,
+          }
+        );
+      });
+
+      it('should unblock on purpose consents', async () => {
+        manager.registerConsentPolicyInstance('default', {
+          'waitFor': {
+            'ABC': undefined,
+          },
+        });
+        await macroTask();
+        await expect(
+          manager.whenPurposesUnblock(['purpose-foo', 'purpose-bar'])
+        ).to.eventually.be.true;
       });
 
-      it('should return gdprApplies value', async () => {
+      it('should unblock on purpose consents', async () => {
         manager.registerConsentPolicyInstance('default', {
           'waitFor': {
             'ABC': undefined,
           },
         });
         await macroTask();
-        // Set above in getConsentInstanceGdprApplies mock
-        await expect(manager.getGdprApplies()).to.eventually.be.false;
+        await expect(
+          manager.whenPurposesUnblock([
+            'purpose-foo',
+            'purpose-bar',
+            'purpose-xyz',
+          ])
+        ).to.eventually.be.false;
       });
     });
   }
diff --git a/extensions/amp-consent/0.1/test/test-consent-state-manager.js b/extensions/amp-consent/0.1/test/test-consent-state-manager.js
index 30b8577aee39e..a8f173e288856 100644
--- a/extensions/amp-consent/0.1/test/test-consent-state-manager.js
+++ b/extensions/amp-consent/0.1/test/test-consent-state-manager.js
@@ -15,16 +15,14 @@
  */
 import {
   CONSENT_ITEM_STATE,
+  PURPOSE_CONSENT_STATE,
   composeStoreValue,
   constructConsentInfo,
   constructMetadata,
 } from '../consent-info';
-import {
-  CONSENT_STRING_MAX_LENGTH,
-  ConsentInstance,
-  ConsentStateManager,
-} from '../consent-state-manager';
-import {CONSENT_STRING_TYPE} from '../../../../src/consent-state';
+import {CONSENT_STRING_TYPE} from '../../../../src/core/constants/consent-state';
+import {ConsentInstance, ConsentStateManager} from '../consent-state-manager';
+import {Services} from '../../../../src/services';
 import {dev} from '../../../../src/log';
 import {macroTask} from '../../../../testing/yield';
 import {
@@ -39,6 +37,8 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
   let storageGetSpy;
   let storageSetSpy;
   let storageRemoveSpy;
+  let usesViewer;
+
   beforeEach(() => {
     win = env.win;
     ampdoc = env.ampdoc;
@@ -46,6 +46,7 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
     storageGetSpy = env.sandbox.spy();
     storageSetSpy = env.sandbox.spy();
     storageRemoveSpy = env.sandbox.spy();
+    usesViewer = true;
 
     resetServiceForTesting(win, 'storage');
     registerServiceBuilder(win, 'storage', function () {
@@ -64,6 +65,9 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
           storageRemoveSpy(name);
           return Promise.resolve();
         },
+        isViewerStorage: () => {
+          return usesViewer;
+        },
       });
     });
   });
@@ -94,52 +98,43 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
     });
 
     describe('update/get consentInfo', () => {
-      it('get initial default consentInfo value', function* () {
+      it('get initial default consentInfo value', async () => {
         manager.registerConsentInstance('test', {});
-        let value;
-        const p = manager.getConsentInstanceInfo().then((v) => (value = v));
-        yield p;
+        const value = await manager.getConsentInstanceInfo();
         expect(value).to.deep.equal(
           constructConsentInfo(CONSENT_ITEM_STATE.UNKNOWN)
         );
       });
 
-      it('update/get consent state', function* () {
+      it('update/get consent state', async () => {
         manager.registerConsentInstance('test', {});
         manager.updateConsentInstanceState(CONSENT_ITEM_STATE.ACCEPTED);
-        let value;
-        const p = manager.getConsentInstanceInfo().then((v) => (value = v));
-        yield p;
+        const value = await manager.getConsentInstanceInfo();
         expect(value).to.deep.equal(
           constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED)
         );
       });
 
-      it('update/get consent string', function* () {
+      it('update/get consent string', async () => {
         manager.registerConsentInstance('test', {});
         manager.updateConsentInstanceState(
           CONSENT_ITEM_STATE.ACCEPTED,
           'test-string'
         );
-        let value;
-        const p = manager.getConsentInstanceInfo().then((v) => (value = v));
-        yield p;
+        const value = await manager.getConsentInstanceInfo();
         expect(value).to.deep.equal(
           constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED, 'test-string')
         );
       });
 
-      it('update/get consentMetadata', function* () {
+      it('update/get consentMetadata', async () => {
         manager.registerConsentInstance('test', {});
         manager.updateConsentInstanceState(
           CONSENT_ITEM_STATE.ACCEPTED,
           'test-string',
           constructMetadata(CONSENT_STRING_TYPE.US_PRIVACY_STRING)
         );
-        let value;
-        const p = manager.getConsentInstanceInfo().then((v) => (value = v));
-        yield p;
-        expect(value).to.deep.equal(
+        expect(await manager.getConsentInstanceInfo()).to.deep.equal(
           constructConsentInfo(
             CONSENT_ITEM_STATE.ACCEPTED,
             'test-string',
@@ -148,6 +143,26 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
         );
       });
 
+      it('update/get purpose consents', async () => {
+        manager.registerConsentInstance('test', {});
+        manager.updateConsentInstancePurposes({
+          'purpose-abc': PURPOSE_CONSENT_STATE.ACCEPTED,
+        });
+        manager.updateConsentInstanceState(
+          CONSENT_ITEM_STATE.ACCEPTED,
+          'test-string'
+        );
+        const value = await manager.getConsentInstanceInfo();
+        expect(value).to.deep.equal(
+          constructConsentInfo(
+            CONSENT_ITEM_STATE.ACCEPTED,
+            'test-string',
+            undefined,
+            {'purpose-abc': PURPOSE_CONSENT_STATE.ACCEPTED}
+          )
+        );
+      });
+
       it('getConsentInstanceInfo getLastConsentInstanceInfo', function* () {
         let currentValue;
         let lastValue;
@@ -156,6 +171,7 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
           CONSENT_ITEM_STATE.ACCEPTED,
           'test',
           constructMetadata(),
+          {'purpose-abc': PURPOSE_CONSENT_STATE.ACCEPTED},
           true
         );
         storageValue['amp-consent:test'] = composeStoreValue(testConsentInfo);
@@ -169,34 +185,11 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
             CONSENT_ITEM_STATE.ACCEPTED,
             'test',
             constructMetadata(),
+            {'purpose-abc': PURPOSE_CONSENT_STATE.ACCEPTED},
             true
           )
         );
       });
-
-      it('update consent string that exceeds max size', function* () {
-        expectAsyncConsoleError(/Cannot store consentString/);
-        manager.registerConsentInstance('test', {});
-        let testStr = 'a';
-        for (let i = 0; i < CONSENT_STRING_MAX_LENGTH; i++) {
-          testStr += 'a';
-        }
-        manager.updateConsentInstanceState(
-          CONSENT_ITEM_STATE.ACCEPTED,
-          testStr,
-          constructMetadata()
-        );
-        let value;
-        const p = manager.getConsentInstanceInfo().then((v) => (value = v));
-        yield p;
-        expect(value).to.deep.equal(
-          constructConsentInfo(
-            CONSENT_ITEM_STATE.ACCEPTED,
-            testStr,
-            constructMetadata()
-          )
-        );
-      });
     });
 
     describe('onConsentStateChange', () => {
@@ -232,6 +225,19 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
         );
       });
 
+      it('should call purpose consent resolver on update', () => {
+        const resolverSpy = env.sandbox.spy(manager, 'hasAllPurposeConsents');
+        manager.onConsentStateChange(spy);
+        manager.updateConsentInstanceState(CONSENT_ITEM_STATE.REJECTED);
+        expect(resolverSpy).to.be.calledAfter(spy);
+        expect(resolverSpy).to.be.calledOnce;
+        resolverSpy.resetHistory();
+
+        manager.updateConsentInstanceState(CONSENT_ITEM_STATE.NOT_REQUIRED);
+        expect(resolverSpy).to.be.calledAfter(spy);
+        expect(resolverSpy).to.be.calledOnce;
+      });
+
       it('handles race condition', function* () {
         manager.onConsentStateChange(spy);
         manager.updateConsentInstanceState(CONSENT_ITEM_STATE.REJECTED);
@@ -248,11 +254,50 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
       });
     });
 
-    it('receives and sets gdprApplies', async () => {
-      manager.registerConsentInstance('test', {});
-      manager.setConsentInstanceGdprApplies(Promise.resolve(false));
-      await expect(manager.getConsentInstanceGdprApplies()).to.eventually.be
-        .false;
+    describe('updatePurposes', () => {
+      it('updates purpose consents', () => {
+        expect(manager.purposeConsents_).to.be.undefined;
+        manager.updateConsentInstancePurposes({'a': true, 'b': false});
+        expect(manager.purposeConsents_).to.deep.equal({
+          'a': PURPOSE_CONSENT_STATE.ACCEPTED,
+          'b': PURPOSE_CONSENT_STATE.REJECTED,
+        });
+
+        // new values
+        manager.updateConsentInstancePurposes({'c': true});
+        expect(manager.purposeConsents_).to.deep.equal({
+          'a': PURPOSE_CONSENT_STATE.ACCEPTED,
+          'b': PURPOSE_CONSENT_STATE.REJECTED,
+          'c': PURPOSE_CONSENT_STATE.ACCEPTED,
+        });
+
+        // overrides
+        manager.updateConsentInstancePurposes({'c': false, 'd': true});
+        expect(manager.purposeConsents_).to.deep.equal({
+          'a': PURPOSE_CONSENT_STATE.ACCEPTED,
+          'b': PURPOSE_CONSENT_STATE.REJECTED,
+          'c': PURPOSE_CONSENT_STATE.REJECTED,
+          'd': PURPOSE_CONSENT_STATE.ACCEPTED,
+        });
+      });
+
+      it('opt_defaultsOnly', () => {
+        manager.updateConsentInstancePurposes({'a': true, 'b': true});
+        expect(manager.purposeConsents_).to.deep.equal({
+          'a': PURPOSE_CONSENT_STATE.ACCEPTED,
+          'b': PURPOSE_CONSENT_STATE.ACCEPTED,
+        });
+
+        manager.updateConsentInstancePurposes(
+          {'a': false, 'b': false, 'c': false},
+          true
+        );
+        expect(manager.purposeConsents_).to.deep.equal({
+          'a': PURPOSE_CONSENT_STATE.ACCEPTED,
+          'b': PURPOSE_CONSENT_STATE.ACCEPTED,
+          'c': PURPOSE_CONSENT_STATE.REJECTED,
+        });
+      });
     });
   });
 
@@ -263,6 +308,12 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
       instance = new ConsentInstance(ampdoc, 'test', {});
     });
 
+    it('instantiates storage with the top level document', async () => {
+      const spy = env.sandbox.stub(Services, 'storageForTopLevelDoc');
+      new ConsentInstance(ampdoc, 'test', {});
+      expect(spy.calledOnceWith(ampdoc)).to.be.true;
+    });
+
     describe('update', () => {
       describe('update value', () => {
         it('invalid consent state', function* () {
@@ -307,13 +358,20 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
           instance.update(
             CONSENT_ITEM_STATE.ACCEPTED,
             'accept',
-            constructMetadata(CONSENT_STRING_TYPE.US_PRIVACY_STRING)
+            undefined,
+            constructMetadata(
+              CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+              '1~1.35.41.101'
+            )
           );
           yield macroTask();
           let consentInfo = constructConsentInfo(
             CONSENT_ITEM_STATE.ACCEPTED,
             'accept',
-            constructMetadata(CONSENT_STRING_TYPE.US_PRIVACY_STRING)
+            constructMetadata(
+              CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+              '1~1.35.41.101'
+            )
           );
           expect(storageSetSpy).to.be.calledOnce;
           expect(storageSetSpy).to.be.calledWith(
@@ -325,13 +383,14 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
           instance.update(
             CONSENT_ITEM_STATE.REJECTED,
             'reject',
-            constructMetadata(CONSENT_STRING_TYPE.TCF_V1)
+            undefined,
+            constructMetadata(CONSENT_STRING_TYPE.TCF_V1, '3~3.33.33.303')
           );
           yield macroTask();
           consentInfo = constructConsentInfo(
             CONSENT_ITEM_STATE.REJECTED,
             'reject',
-            constructMetadata(CONSENT_STRING_TYPE.TCF_V1)
+            constructMetadata(CONSENT_STRING_TYPE.TCF_V1, '3~3.33.33.303')
           );
           expect(storageSetSpy).to.be.calledOnce;
           expect(storageSetSpy).to.be.calledWith(
@@ -349,6 +408,7 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
           instance.update(
             CONSENT_ITEM_STATE.UNKNOWN,
             'test',
+            undefined,
             constructMetadata(CONSENT_STRING_TYPE.TCF_V2)
           );
           yield macroTask();
@@ -356,14 +416,51 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
           expect(storageRemoveSpy).to.be.calledOnce;
         });
 
-        it('remove consentInfo when consentStr length exceeds', function* () {
-          expectAsyncConsoleError(/Cannot store consentString/);
-          let testStr = 'a';
-          for (let i = 0; i < CONSENT_STRING_MAX_LENGTH; i++) {
-            testStr += 'a';
-          }
-          instance.update(CONSENT_ITEM_STATE.ACCEPTED, testStr);
-          yield macroTask();
+        it('update consent info w/ purpose consents', async () => {
+          instance.update(CONSENT_ITEM_STATE.ACCEPTED, 'accept', {
+            'purpose-abc': PURPOSE_CONSENT_STATE.REJECTED,
+          });
+          await macroTask();
+          let consentInfo = constructConsentInfo(
+            CONSENT_ITEM_STATE.ACCEPTED,
+            'accept',
+            undefined,
+            {'purpose-abc': PURPOSE_CONSENT_STATE.REJECTED}
+          );
+          expect(storageSetSpy).to.be.calledOnce;
+          expect(storageSetSpy).to.be.calledWith(
+            'amp-consent:test',
+            composeStoreValue(consentInfo)
+          );
+          storageSetSpy.resetHistory();
+
+          instance.update(CONSENT_ITEM_STATE.REJECTED, 'reject', {
+            'purpose-abc': PURPOSE_CONSENT_STATE.ACCEPTED,
+          });
+          await macroTask();
+          consentInfo = constructConsentInfo(
+            CONSENT_ITEM_STATE.REJECTED,
+            'reject',
+            undefined,
+            {'purpose-abc': PURPOSE_CONSENT_STATE.ACCEPTED}
+          );
+          expect(storageSetSpy).to.be.calledOnce;
+          expect(storageSetSpy).to.be.calledWith(
+            'amp-consent:test',
+            composeStoreValue(consentInfo)
+          );
+
+          instance.update(CONSENT_ITEM_STATE.DISMISS);
+          await macroTask();
+          storageSetSpy.resetHistory();
+          storageRemoveSpy.resetHistory();
+          expect(storageSetSpy).to.not.be.called;
+          expect(storageRemoveSpy).to.not.be.called;
+
+          instance.update(CONSENT_ITEM_STATE.UNKNOWN, 'test', {
+            'purpose-xyz': PURPOSE_CONSENT_STATE.ACCEPTED,
+          });
+          await macroTask();
           expect(storageSetSpy).to.not.be.called;
           expect(storageRemoveSpy).to.be.calledOnce;
         });
@@ -436,6 +533,7 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
         instance.update(
           CONSENT_ITEM_STATE.ACCEPTED,
           'test',
+          {'purpose-a': PURPOSE_CONSENT_STATE.ACCEPTED},
           constructMetadata(CONSENT_STRING_TYPE.TCF_V2)
         );
         yield macroTask();
@@ -443,6 +541,7 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
         instance.update(
           CONSENT_ITEM_STATE.ACCEPTED,
           'test',
+          {'purpose-a': PURPOSE_CONSENT_STATE.ACCEPTED},
           constructMetadata(CONSENT_STRING_TYPE.TCF_V2)
         );
         yield macroTask();
@@ -500,31 +599,51 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
         expect(requestBody.consentStateValue).to.equal('rejected');
         expect(requestBody.consentString).to.be.undefined;
         expect(requestBody.consentMetadata).to.be.undefined;
+        expect(requestBody.purposeConsents).to.be.undefined;
       });
 
-      it('send update request on consentString change', function* () {
-        yield instance.update(CONSENT_ITEM_STATE.ACCEPTED, 'old');
-        yield macroTask();
+      it('send update request on consentString change', async () => {
+        await instance.update(CONSENT_ITEM_STATE.ACCEPTED, 'old');
+        await macroTask();
         expect(requestSpy).to.be.calledOnce;
         expect(requestBody.consentState).to.be.true;
         expect(requestBody.consentStateValue).to.equal('accepted');
         expect(requestBody.consentString).to.equal('old');
         expect(requestBody.consentMetadata).to.be.undefined;
-        yield instance.update(
+        await instance.update(
           CONSENT_ITEM_STATE.ACCEPTED,
           'new',
-          constructMetadata(CONSENT_STRING_TYPE.US_PRIVACY_STRING)
+          {'purpose-a': PURPOSE_CONSENT_STATE.ACCEPTED},
+          constructMetadata(
+            CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+            '3~3.33.33.303'
+          )
         );
-        yield macroTask();
+        await macroTask();
         expect(requestSpy).to.be.calledTwice;
         expect(requestBody.consentState).to.be.true;
         expect(requestBody.consentStateValue).to.equal('accepted');
         expect(requestBody.consentString).to.equal('new');
+        expect(requestBody.purposeConsents).to.deep.equal({
+          'purpose-a': PURPOSE_CONSENT_STATE.ACCEPTED,
+        });
         expect(requestBody.consentMetadata).to.deep.equal(
-          constructMetadata(CONSENT_STRING_TYPE.US_PRIVACY_STRING)
+          constructMetadata(
+            CONSENT_STRING_TYPE.US_PRIVACY_STRING,
+            '3~3.33.33.303'
+          )
         );
       });
 
+      it('support onUpdateHref expansion', function* () {
+        instance = new ConsentInstance(ampdoc, 'test', {
+          'onUpdateHref': 'https://example.test?cid=CLIENT_ID&r=RANDOM',
+        });
+        yield instance.update(CONSENT_ITEM_STATE.ACCEPTED);
+        yield macroTask();
+        expect(requestSpy).to.be.calledWithMatch(/cid=amp-.{22}&r=RANDOM/);
+      });
+
       it('do not send update request on dismiss/notRequied', function* () {
         instance.update(CONSENT_ITEM_STATE.DISMISSED);
         yield macroTask();
@@ -535,10 +654,10 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
       });
 
       it('do not send update request when no change', function* () {
-        yield instance.update(CONSENT_ITEM_STATE.ACCEPTED, 'abc', {});
+        yield instance.update(CONSENT_ITEM_STATE.ACCEPTED, 'abc');
         yield macroTask();
         expect(requestSpy).to.calledOnce;
-        yield instance.update(CONSENT_ITEM_STATE.ACCEPTED, 'abc', {});
+        yield instance.update(CONSENT_ITEM_STATE.ACCEPTED, 'abc');
         yield macroTask();
         expect(requestSpy).to.calledOnce;
       });
@@ -558,135 +677,141 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
         expect(requestBody.consentString).to.undefined;
       });
 
-      it('send update request on local stroage removal', function* () {
+      it('send update request on local stroage removal', async () => {
         const testConsentInfo = constructConsentInfo(
           CONSENT_ITEM_STATE.ACCEPTED,
           'test',
-          undefined,
+          constructMetadata(undefined, '3~3.33.33.303'),
+          {'purpose-a': PURPOSE_CONSENT_STATE.ACCEPTED},
           true
         );
         storageValue['amp-consent:test'] = composeStoreValue(testConsentInfo);
-        yield instance.get();
+        await instance.get();
         expect(storageRemoveSpy).to.be.calledOnce;
-        yield macroTask();
-        yield macroTask();
+        await macroTask();
+        await macroTask();
         expect(requestSpy).to.be.calledOnce;
         expect(requestBody.consentStateValue).to.equal('unknown');
         expect(requestBody.consentString).to.be.undefined;
+        expect(requestBody.purposeConsents).to.be.undefined;
+        expect(requestBody.consentMetadata).to.be.undefined;
       });
 
-      it('do not send update request with dirtyBit', function* () {
+      it('do not send update request with dirtyBit', async () => {
         instance.setDirtyBit();
         instance.update(CONSENT_ITEM_STATE.ACCEPTED);
-        yield macroTask();
+        await macroTask();
         expect(requestSpy).to.not.be.called;
         instance.update(CONSENT_ITEM_STATE.REJECTED);
-        yield macroTask();
+        await macroTask();
         expect(requestSpy).to.not.be.called;
       });
     });
 
     describe('get', () => {
       describe('should be able to read from stored value', () => {
-        it('legacy boolean value', function* () {
-          yield instance.get().then((value) => {
+        it('legacy boolean value', async () => {
+          await instance.get().then((value) => {
             expect(value).to.deep.equal(
               constructConsentInfo(CONSENT_ITEM_STATE.UNKNOWN)
             );
           });
           instance.localConsentInfo_ = null;
           storageValue['amp-consent:test'] = true;
-          yield instance.get().then((value) => {
-            expect(value).to.deep.equal(
-              constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED)
-            );
-          });
+          let value = await instance.get();
+          expect(value).to.deep.equal(
+            constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED)
+          );
           instance.localConsentInfo_ = null;
           storageValue['amp-consent:test'] = false;
-          yield instance.get().then((value) => {
-            expect(value).to.deep.equal(
-              constructConsentInfo(CONSENT_ITEM_STATE.REJECTED)
-            );
-          });
+          value = await instance.get();
+          expect(value).to.deep.equal(
+            constructConsentInfo(CONSENT_ITEM_STATE.REJECTED)
+          );
         });
 
-        it('consentInfo value', function* () {
+        it('consentInfo value', async () => {
           instance.localConsentInfo_ = null;
           const testConsentInfo = constructConsentInfo(
             CONSENT_ITEM_STATE.ACCEPTED,
             'test',
-            constructMetadata()
+            constructMetadata(),
+            {'purpose-a': PURPOSE_CONSENT_STATE.ACCEPTED}
           );
           storageValue['amp-consent:test'] = composeStoreValue(testConsentInfo);
-          yield instance.get().then((value) => {
-            expect(value).to.deep.equal(testConsentInfo);
-          });
+          expect(await instance.get()).to.deep.equal(testConsentInfo);
         });
 
-        it('unsupported stored value', function* () {
+        it('unsupported stored value', async () => {
           expectAsyncConsoleError(/Invalid stored consent value/);
           storageValue['amp-consent:test'] = 'invalid';
-          yield instance.get().then((value) => {
-            expect(value).to.deep.equal(
-              constructConsentInfo(CONSENT_ITEM_STATE.UNKNOWN)
-            );
-          });
+          expect(await instance.get()).to.deep.equal(
+            constructConsentInfo(CONSENT_ITEM_STATE.UNKNOWN)
+          );
         });
 
-        it('erase stored value with dirtyBit', function* () {
+        it('erase stored value with dirtyBit', async () => {
           instance.localConsentInfo_ = null;
           const testConsentInfo = constructConsentInfo(
             CONSENT_ITEM_STATE.ACCEPTED,
             'test',
             constructMetadata(),
+            undefined,
             true
           );
           storageValue['amp-consent:test'] = composeStoreValue(testConsentInfo);
-          yield instance.get().then((value) => {
-            expect(value).to.deep.equal(testConsentInfo);
-            expect(storageValue['amp-consent:test']).to.be.null;
-            expect(storageRemoveSpy).to.be.calledOnce;
-          });
-          yield instance.get().then((value) => {
-            expect(value).to.deep.equal(testConsentInfo);
-            expect(storageRemoveSpy).to.be.calledOnce;
-          });
+          let value = await instance.get();
+          expect(value).to.deep.equal(testConsentInfo);
+          expect(storageValue['amp-consent:test']).to.be.null;
+          expect(storageRemoveSpy).to.be.calledOnce;
+          value = await instance.get();
+          expect(value).to.deep.equal(testConsentInfo);
+          expect(storageRemoveSpy).to.be.calledOnce;
         });
       });
 
-      it('should be able to get local value', function* () {
-        let value;
-        yield instance.get().then((v) => (value = v));
+      it('should be able to get local value', async () => {
+        let value = await instance.get();
         expect(value).to.deep.equal(
           constructConsentInfo(CONSENT_ITEM_STATE.UNKNOWN)
         );
-        yield instance.update(CONSENT_ITEM_STATE.DISMISSED);
-        yield instance.get().then((v) => (value = v));
+        await instance.update(CONSENT_ITEM_STATE.DISMISSED);
+        value = await instance.get();
         expect(value).to.deep.equal(
           constructConsentInfo(CONSENT_ITEM_STATE.UNKNOWN)
         );
-        yield instance.update(CONSENT_ITEM_STATE.ACCEPTED);
-        yield instance.get().then((v) => (value = v));
+        await instance.update(CONSENT_ITEM_STATE.ACCEPTED);
+        value = await instance.get();
         expect(value).to.deep.equal(
           constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED)
         );
-        yield instance.update(CONSENT_ITEM_STATE.REJECTED, 'test1');
-        yield instance.get().then((v) => (value = v));
+        await instance.update(CONSENT_ITEM_STATE.REJECTED, 'test1');
+        value = await instance.get();
         expect(value).to.deep.equal(
           constructConsentInfo(CONSENT_ITEM_STATE.REJECTED, 'test1')
         );
-        yield instance.update(CONSENT_ITEM_STATE.DISMISSED);
-        yield instance.get().then((v) => (value = v));
+        await instance.update(CONSENT_ITEM_STATE.DISMISSED);
+        value = await instance.get();
         expect(value).to.deep.equal(
           constructConsentInfo(CONSENT_ITEM_STATE.REJECTED, 'test1')
         );
-        yield instance.update(CONSENT_ITEM_STATE.ACCEPTED, 'test2', {});
-        yield instance.get().then((v) => (value = v));
+        await instance.update(
+          CONSENT_ITEM_STATE.ACCEPTED,
+          'test2',
+          {'purpose-b': PURPOSE_CONSENT_STATE.REJECTED},
+          constructMetadata()
+        );
+        value = await instance.get();
         expect(value).to.deep.equal(
-          constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED, 'test2', {})
+          constructConsentInfo(
+            CONSENT_ITEM_STATE.ACCEPTED,
+            'test2',
+            constructMetadata(),
+            {'purpose-b': PURPOSE_CONSENT_STATE.REJECTED}
+          )
         );
-        yield instance.update(CONSENT_ITEM_STATE.ACCEPTED);
-        yield instance.get().then((v) => (value = v));
+        await instance.update(CONSENT_ITEM_STATE.ACCEPTED);
+        value = await instance.get();
         expect(value).to.deep.equal(
           constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED)
         );
@@ -723,31 +848,33 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
     });
 
     describe('dirtyBit storage value', () => {
-      it('remove dirtyBit after user update', function* () {
+      it('remove dirtyBit after user update', async () => {
         const testConsentInfo = constructConsentInfo(
           CONSENT_ITEM_STATE.ACCEPTED,
           'test',
           constructMetadata(),
+          undefined,
           true
         );
         storageValue['amp-consent:test'] = composeStoreValue(testConsentInfo);
-        yield instance.get().then((v) => {
-          expect(v).to.deep.equal(
-            constructConsentInfo(
-              CONSENT_ITEM_STATE.ACCEPTED,
-              'test',
-              constructMetadata(),
-              true
-            )
-          );
-        });
+        let v = await instance.get();
+        expect(v).to.deep.equal(
+          constructConsentInfo(
+            CONSENT_ITEM_STATE.ACCEPTED,
+            'test',
+            constructMetadata(),
+            undefined,
+            true
+          )
+        );
 
         instance.update(
           CONSENT_ITEM_STATE.ACCEPTED,
           'test',
+          undefined,
           constructMetadata()
         );
-        yield macroTask();
+        await macroTask();
         expect(storageSetSpy).to.be.calledOnce;
         expect(storageSetSpy).to.be.calledWith(
           'amp-consent:test',
@@ -759,26 +886,26 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
             )
           )
         );
-        yield instance.get().then((v) => {
-          expect(v).to.deep.equal(
-            constructConsentInfo(
-              CONSENT_ITEM_STATE.ACCEPTED,
-              'test',
-              constructMetadata()
-            )
-          );
-        });
+        v = await instance.get();
+        expect(v).to.deep.equal(
+          constructConsentInfo(
+            CONSENT_ITEM_STATE.ACCEPTED,
+            'test',
+            constructMetadata()
+          )
+        );
       });
 
-      it('refresh stored consent info when setting dirtyBit', function* () {
+      it('refresh stored consent info when setting dirtyBit', async () => {
         const testConsentInfo = constructConsentInfo(
           CONSENT_ITEM_STATE.ACCEPTED,
           'test',
-          constructMetadata()
+          constructMetadata(),
+          undefined
         );
         storageValue['amp-consent:test'] = composeStoreValue(testConsentInfo);
         instance.setDirtyBit();
-        yield macroTask();
+        await macroTask();
         expect(storageSetSpy).to.be.calledOnce;
         expect(storageSetSpy).to.be.calledWith(
           'amp-consent:test',
@@ -787,19 +914,18 @@ describes.realWin('ConsentStateManager', {amp: 1}, (env) => {
               CONSENT_ITEM_STATE.ACCEPTED,
               'test',
               constructMetadata(),
+              undefined,
               true
             )
           )
         );
-        yield instance.get().then((v) => {
-          expect(v).to.deep.equal(
-            constructConsentInfo(
-              CONSENT_ITEM_STATE.ACCEPTED,
-              'test',
-              constructMetadata()
-            )
-          );
-        });
+        expect(await instance.get()).to.deep.equal(
+          constructConsentInfo(
+            CONSENT_ITEM_STATE.ACCEPTED,
+            'test',
+            constructMetadata()
+          )
+        );
       });
     });
   });
diff --git a/extensions/amp-consent/0.1/test/test-consent-ui.js b/extensions/amp-consent/0.1/test/test-consent-ui.js
index 77df8d1c28f69..3a7daef308623 100644
--- a/extensions/amp-consent/0.1/test/test-consent-ui.js
+++ b/extensions/amp-consent/0.1/test/test-consent-ui.js
@@ -14,10 +14,17 @@
  * limitations under the License.
  */
 
-import {CONSENT_ITEM_STATE, constructConsentInfo} from '../consent-info';
+import * as fakeTimers from '@sinonjs/fake-timers';
+import {
+  CONSENT_ITEM_STATE,
+  PURPOSE_CONSENT_STATE,
+  constructConsentInfo,
+  constructMetadata,
+} from '../consent-info';
+import {CONSENT_STRING_TYPE} from '../../../../src/core/constants/consent-state';
 import {ConsentUI, consentUiClasses} from '../consent-ui';
 import {Services} from '../../../../src/services';
-import {dict} from '../../../../src/utils/object';
+import {dict} from '../../../../src/core/types/object';
 import {elementByTag} from '../../../../src/dom';
 import {macroTask} from '../../../../testing/yield';
 import {
@@ -42,6 +49,7 @@ describes.realWin(
     let consentUI;
     let mockInstance;
     let parent;
+    let ownersStubs;
 
     beforeEach(() => {
       doc = env.win.document;
@@ -79,24 +87,36 @@ describes.realWin(
           return Promise.resolve();
         },
       };
-      Services.ownersForDoc(doc).scheduleLayout = env.sandbox.mock();
+      const owners = Services.ownersForDoc(doc);
+      ownersStubs = {
+        scheduleLayout: env.sandbox.stub(owners, 'scheduleLayout'),
+        schedulePause: env.sandbox.stub(owners, 'schedulePause'),
+        scheduleResume: env.sandbox.stub(owners, 'scheduleResume'),
+      };
       resetServiceForTesting(win, 'consentStateManager');
       registerServiceBuilder(win, 'consentStateManager', function () {
         return Promise.resolve({
           getLastConsentInstanceInfo: () => {
             return Promise.resolve(
-              constructConsentInfo(CONSENT_ITEM_STATE.ACCEPTED, 'test')
+              constructConsentInfo(
+                CONSENT_ITEM_STATE.ACCEPTED,
+                'test',
+                constructMetadata(CONSENT_STRING_TYPE.TCF_V2, '1~1.10.12.103'),
+                {'abc': PURPOSE_CONSENT_STATE.ACCEPTED}
+              )
             );
           },
         });
       });
     });
 
-    afterEach(() => env.sandbox.restore());
+    afterEach(() => {
+      env.sandbox.restore();
+    });
 
     const getReadyIframeCmpConsentUi = () => {
       const config = dict({
-        'promptUISrc': 'https//promptUISrc',
+        'promptUISrc': 'https://promptUISrc',
       });
       const consentUI = new ConsentUI(mockInstance, config);
       const showIframeSpy = env.sandbox.spy(consentUI, 'showIframe_');
@@ -118,7 +138,7 @@ describes.realWin(
       it('should ignore promptUISrc w/ promptUI', function* () {
         const config = dict({
           'promptUI': 'test1',
-          'promptUISrc': 'https//promptUISrc',
+          'promptUISrc': 'https://promptUISrc',
         });
         consentUI = new ConsentUI(mockInstance, config);
         expect(consentUI.ui_.id).to.equal('test1');
@@ -126,10 +146,13 @@ describes.realWin(
 
       it('should create iframe from promptUISrc', function* () {
         const config = dict({
-          'promptUISrc': 'https//promptUISrc',
+          'promptUISrc': 'https://promptUISrc',
         });
         consentUI = new ConsentUI(mockInstance, config);
         expect(consentUI.ui_.tagName).to.equal('IFRAME');
+        expect(consentUI.ui_.getAttribute('sandbox')).to.equal(
+          'allow-scripts allow-popups allow-same-origin'
+        );
       });
     });
 
@@ -144,27 +167,69 @@ describes.realWin(
         consentUI.show(false);
         expect(parent.classList.contains('amp-active')).to.be.true;
         expect(parent).to.not.have.display('none');
+        expect(ownersStubs.scheduleLayout).to.be.calledOnce;
+        expect(ownersStubs.scheduleResume).to.be.calledOnce;
         consentUI.hide();
         expect(parent.classList.contains('amp-active')).to.be.false;
         expect(parent.classList.contains('amp-hidden')).to.be.true;
+        expect(ownersStubs.schedulePause).to.be.calledOnce;
       });
 
-      it('append/remove iframe', function* () {
+      it('should support pause/resume lifecycle', () => {
         const config = dict({
-          'promptUISrc': 'https//promptUISrc',
+          'promptUI': 'test1',
         });
         consentUI = new ConsentUI(mockInstance, config);
+        consentUI.show(false);
+        expect(ownersStubs.scheduleLayout).to.be.calledOnce;
+        expect(ownersStubs.scheduleResume).to.be.calledOnce;
+
+        consentUI.pause();
+        expect(ownersStubs.schedulePause).to.be.calledOnce;
+        expect(ownersStubs.scheduleLayout).to.be.calledOnce; // no change.
+        expect(ownersStubs.scheduleResume).to.be.calledOnce; // no change.
+
+        consentUI.resume();
+        expect(ownersStubs.scheduleLayout).to.be.calledTwice;
+        expect(ownersStubs.scheduleResume).to.be.calledTwice;
+        expect(ownersStubs.schedulePause).to.be.calledOnce; // no change.
+      });
+
+      it('append/remove iframe', async () => {
+        const config = dict({
+          'promptUISrc': 'https://promptUISrc',
+        });
+        consentUI = new ConsentUI(mockInstance, config);
+        const clock = fakeTimers.withGlobal(win).install();
+
+        // Append iframe, and remove iframe after 1sec timeout
         expect(elementByTag(parent, 'iframe')).to.be.null;
         consentUI.show(false);
-        yield macroTask();
+        await macroTask();
         expect(elementByTag(parent, 'iframe')).to.not.be.null;
         consentUI.hide();
+        clock.tick(999);
+        expect(elementByTag(parent, 'iframe')).to.not.be.null;
+        clock.tick(1);
         expect(elementByTag(parent, 'iframe')).to.be.null;
+
+        // Not remove iframe if it got appended again
+        consentUI.show(false);
+        await macroTask();
+        consentUI.hide();
+        clock.tick(999);
+        expect(elementByTag(parent, 'iframe')).to.not.be.null;
+        consentUI.show(false);
+        await macroTask();
+        clock.tick(1);
+        expect(elementByTag(parent, 'iframe')).to.not.be.null;
+
+        clock.uninstall();
       });
 
       it('should not lock scrolling', () => {
         const config = dict({
-          'promptUISrc': 'https//promptUISrc',
+          'promptUISrc': 'https://promptUISrc',
         });
         consentUI = new ConsentUI(mockInstance, config);
 
@@ -184,12 +249,36 @@ describes.realWin(
         consentUI.hide();
         expect(consentUI.scrollEnabled_).to.be.true;
       });
+
+      it('should set the iframe transform class on parent', async () => {
+        const config = dict({
+          'promptUISrc': 'https://promptUISrc',
+        });
+        consentUI = new ConsentUI(mockInstance, config);
+
+        consentUI.show(false);
+        consentUI.handleIframeMessages_({
+          source: consentUI.ui_.contentWindow,
+          data: {
+            type: 'consent-ui',
+            action: 'ready',
+            initialHeight: '80vh',
+          },
+        });
+        await macroTask();
+        expect(
+          consentUI.parent_.style.getPropertyValue('--i-amphtml-modal-height')
+        ).to.equal('80vh');
+        expect(
+          consentUI.parent_.classList.contains(consentUiClasses.iframeTransform)
+        ).to.be.true;
+      });
     });
 
     describe('placeholder', () => {
       it('should be created / shown while loading CMP Iframe', async () => {
         const config = dict({
-          'promptUISrc': 'https//promptUISrc',
+          'promptUISrc': 'https://promptUISrc',
         });
         consentUI = new ConsentUI(mockInstance, config);
 
@@ -214,7 +303,7 @@ describes.realWin(
           'then show it with correct state CSS classes',
         () => {
           const config = dict({
-            'promptUISrc': 'https//promptUISrc',
+            'promptUISrc': 'https://promptUISrc',
           });
           consentUI = new ConsentUI(mockInstance, config);
           expect(parent.classList.contains('amp-active')).to.be.false;
@@ -244,9 +333,22 @@ describes.realWin(
         }
       );
 
+      it('should expand the promptUISrc', function* () {
+        const config = dict({
+          'promptUISrc': 'https://example.test?cid=CLIENT_ID&r=RANDOM',
+          'clientConfig': {
+            'test': 'ABC',
+          },
+        });
+        consentUI = new ConsentUI(mockInstance, config);
+        consentUI.show(false);
+        yield macroTask();
+        expect(consentUI.ui_.src).to.match(/cid=amp-.{22}&r=RANDOM/);
+      });
+
       it('should pass the info to the iframe', function* () {
         const config = dict({
-          'promptUISrc': 'https//promptUISrc',
+          'promptUISrc': 'https://promptUISrc',
           'clientConfig': {
             'test': 'ABC',
           },
@@ -262,6 +364,10 @@ describes.realWin(
             },
             'consentState': 'accepted',
             'consentStateValue': 'accepted',
+            'consentMetadata': constructMetadata(
+              CONSENT_STRING_TYPE.TCF_V2,
+              '1~1.10.12.103'
+            ),
             'consentString': 'test',
             'promptTrigger': 'load',
             'isDirty': false,
@@ -269,16 +375,18 @@ describes.realWin(
         );
       });
 
-      it('should pass the promptTrigger reason to the iframe', function* () {
+      // TODO(micajuineho): consolidate w/ test above after exp done
+      it('should pass purpose consents to the iframe', async () => {
+        toggleExperiment(win, 'amp-consent-granular-consent', true);
         const config = dict({
-          'promptUISrc': 'https//promptUISrc',
+          'promptUISrc': 'https://promptUISrc',
           'clientConfig': {
             'test': 'ABC',
           },
         });
         consentUI = new ConsentUI(mockInstance, config);
-        consentUI.show(true);
-        yield macroTask();
+        consentUI.show(false);
+        await macroTask();
 
         expect(consentUI.ui_.getAttribute('name')).to.deep.equal(
           JSON.stringify({
@@ -287,25 +395,38 @@ describes.realWin(
             },
             'consentState': 'accepted',
             'consentStateValue': 'accepted',
+            'consentMetadata': constructMetadata(
+              CONSENT_STRING_TYPE.TCF_V2,
+              '1~1.10.12.103'
+            ),
             'consentString': 'test',
-            'promptTrigger': 'action',
+            'promptTrigger': 'load',
             'isDirty': false,
+            'purposeConsents': {'abc': 1},
           })
         );
+        toggleExperiment(win, 'amp-consent-granular-consent', false);
       });
 
-      describe('fullscreen user interaction experiment', () => {
-        beforeEach(() => {
-          toggleExperiment(win, 'amp-consent-restrict-fullscreen', true);
+      it('should pass the promptTrigger reason to the iframe', function* () {
+        const config = dict({
+          'promptUISrc': 'https://promptUISrc',
+          'clientConfig': {
+            'test': 'ABC',
+          },
         });
+        consentUI = new ConsentUI(mockInstance, config);
+        consentUI.show(true);
+        yield macroTask();
 
-        afterEach(() => {
-          toggleExperiment(win, 'amp-consent-restrict-fullscreen', false);
-        });
+        const clientInfo = JSON.parse(consentUI.ui_.getAttribute('name'));
+        expect(clientInfo.promptTrigger).to.equal('action');
+      });
 
+      describe('fullscreen user interaction experiment', () => {
         it('should focus on the SR alert button', () => {
           consentUI = new ConsentUI(mockInstance, {
-            'promptUISrc': 'https//promptUISrc',
+            'promptUISrc': 'https://promptUISrc',
           });
           const showIframeSpy = env.sandbox.spy(consentUI, 'showIframe_');
 
@@ -320,7 +441,7 @@ describes.realWin(
 
         it('should style SR dialog correctly', () => {
           consentUI = new ConsentUI(mockInstance, {
-            'promptUISrc': 'https//promptUISrc',
+            'promptUISrc': 'https://promptUISrc',
           });
           const showIframeSpy = env.sandbox.spy(consentUI, 'showIframe_');
 
@@ -336,9 +457,9 @@ describes.realWin(
 
         it('should append, remove, & not show the SR alert and have default titles', async () => {
           consentUI = new ConsentUI(mockInstance, {
-            'promptUISrc': 'https//promptUISrc',
+            'promptUISrc': 'https://promptUISrc',
           });
-
+          const clock = fakeTimers.withGlobal(win).install();
           consentUI.show(false);
           consentUI.iframeReady_.resolve();
           await macroTask();
@@ -358,6 +479,8 @@ describes.realWin(
           expect(consentUI.srAlert_).to.be.undefined;
           expect(consentUI.srAlertShown_).to.be.true;
           // placeholder, div, div
+          expect(consentUI.baseInstance_.element.children.length).to.equal(4);
+          clock.tick(1000);
           expect(consentUI.baseInstance_.element.children.length).to.equal(3);
 
           consentUI.show(false);
@@ -366,13 +489,14 @@ describes.realWin(
           expect(consentUI.srAlertShown_).to.be.true;
           // iframe, placeholder, div, div
           expect(consentUI.baseInstance_.element.children.length).to.equal(4);
+          clock.uninstall();
         });
 
         it('should have configurable captions', async () => {
           const newConsentPromptCaption = 'New Consent Policy Title';
           const newButtonActionCaption = 'New Button Action Caption';
           consentUI = new ConsentUI(mockInstance, {
-            'promptUISrc': 'https//promptUISrc',
+            'promptUISrc': 'https://promptUISrc',
             'captions': {
               'consentPromptCaption': newConsentPromptCaption,
               'buttonActionCaption': newButtonActionCaption,
@@ -393,7 +517,7 @@ describes.realWin(
 
         it('should focus on iframe when button is clicked', function* () {
           consentUI = new ConsentUI(mockInstance, {
-            'promptUISrc': 'https//promptUISrc',
+            'promptUISrc': 'https://promptUISrc',
           });
 
           consentUI.show(false);
@@ -410,7 +534,7 @@ describes.realWin(
 
         it('should not expand if iframe is not in focus', async () => {
           consentUI = new ConsentUI(mockInstance, {
-            'promptUISrc': 'https//promptUISrc',
+            'promptUISrc': 'https://promptUISrc',
           });
 
           consentUI.show(false);
@@ -438,7 +562,7 @@ describes.realWin(
 
         it('should expand if iframe is in focus', async () => {
           consentUI = new ConsentUI(mockInstance, {
-            'promptUISrc': 'https//promptUISrc',
+            'promptUISrc': 'https://promptUISrc',
           });
 
           consentUI.show(false);
@@ -479,7 +603,7 @@ describes.realWin(
           const errorSpy = env.sandbox.spy(user(), 'warn');
 
           consentUI = new ConsentUI(mockInstance, {
-            'promptUISrc': 'https//promptUISrc',
+            'promptUISrc': 'https://promptUISrc',
           });
 
           // No user interation through actionPromptTrigger
@@ -505,7 +629,7 @@ describes.realWin(
             'requestAction': 'enter-fullscreen',
             'state': 'error',
             'info':
-              'Could not enter fullscreen. Fullscreen is only supported when the iframe is visible and after user interaction.',
+              'Could not enter fullscreen. Fullscreen is only supported when the iframe is visible as a bottom sheet and after user interaction.',
           });
 
           errorSpy.resetHistory();
@@ -531,7 +655,7 @@ describes.realWin(
         describe('actionPromptTrigger', () => {
           it('should expand when actionPromptTrigger is true', async () => {
             consentUI = new ConsentUI(mockInstance, {
-              'promptUISrc': 'https//promptUISrc',
+              'promptUISrc': 'https://promptUISrc',
             });
 
             consentUI.show(true);
@@ -556,7 +680,7 @@ describes.realWin(
     describe('overlay', () => {
       it('should not enable the overlay if not configured', function* () {
         const config = dict({
-          'promptUISrc': 'https//promptUISrc',
+          'promptUISrc': 'https://promptUISrc',
           'uiConfig': {},
         });
         consentUI = new ConsentUI(mockInstance, config);
@@ -574,7 +698,7 @@ describes.realWin(
 
       it('append/hide/show overlay', function* () {
         const config = dict({
-          'promptUISrc': 'https//promptUISrc',
+          'promptUISrc': 'https://promptUISrc',
           'uiConfig': {
             'overlay': true,
           },
@@ -636,6 +760,80 @@ describes.realWin(
         });
       });
 
+      it('should trigger modal with certain vh', async () => {
+        consentUI = new ConsentUI(mockInstance, {
+          'promptUISrc': 'https//promptUISrc',
+        });
+
+        expect(consentUI.initialHeight_).to.be.equal('30vh');
+        expect(consentUI.modalEnabled_).to.be.false;
+        expect(consentUI.overlayEnabled_).to.be.undefined;
+
+        consentUI.show(true);
+        consentUI.handleIframeMessages_({
+          source: consentUI.ui_.contentWindow,
+          data: {
+            type: 'consent-ui',
+            action: 'ready',
+            initialHeight: '80vh',
+          },
+        });
+        await macroTask();
+
+        expect(consentUI.initialHeight_).to.be.equal('80vh');
+        expect(consentUI.modalEnabled_).to.be.true;
+        expect(consentUI.overlayEnabled_).to.be.true;
+        expect(consentUI.parent_.classList.contains(consentUiClasses.modal)).to
+          .be.true;
+        expect(
+          consentUI.parent_.classList.contains(consentUiClasses.borderEnabled)
+        ).to.be.true;
+        expect(
+          consentUI.parent_.classList.contains(consentUiClasses.iframeActive)
+        ).to.be.true;
+        expect(
+          consentUI.parent_.style.getPropertyValue('--i-amphtml-modal-height')
+        ).to.equal('80vh');
+        expect(consentUI.maskElement_.classList.contains(consentUiClasses.mask))
+          .to.be.true;
+
+        // Hide
+        consentUI.hide();
+        expect(consentUI.parent_.classList.contains(consentUiClasses.modal)).to
+          .be.false;
+        expect(
+          consentUI.parent_.classList.contains(consentUiClasses.borderEnabled)
+        ).to.be.false;
+        expect(
+          consentUI.parent_.classList.contains(consentUiClasses.iframeActive)
+        ).to.be.false;
+        expect(consentUI.maskElement_.hasAttribute('hidden')).to.be.true;
+      });
+
+      it('should trigger modal view and force overlay and borders', async () => {
+        consentUI = new ConsentUI(mockInstance, {
+          'promptUISrc': 'https//promptUISrc',
+          'uiConfig': {},
+        });
+
+        consentUI.show(true);
+        consentUI.handleIframeMessages_({
+          source: consentUI.ui_.contentWindow,
+          data: {
+            type: 'consent-ui',
+            action: 'ready',
+            initialHeight: '80vh',
+            border: false,
+          },
+        });
+        await macroTask();
+
+        expect(consentUI.overlayEnabled_).to.be.true;
+        expect(
+          consentUI.parent_.classList.contains(consentUiClasses.borderEnabled)
+        ).to.be.true;
+      });
+
       it('should throw an error on an invalid initial height', () => {
         return getReadyIframeCmpConsentUi().then((consentUI) => {
           expect(consentUI.initialHeight_).to.be.equal('30vh');
@@ -655,9 +853,34 @@ describes.realWin(
         });
       });
 
+      it('should focus on ui when modal', async () => {
+        consentUI = new ConsentUI(mockInstance, {
+          'promptUISrc': 'https//promptUISrc',
+          'uiConfig': {},
+        });
+
+        consentUI.show(true);
+        consentUI.handleIframeMessages_({
+          source: consentUI.ui_.contentWindow,
+          data: {
+            type: 'consent-ui',
+            action: 'ready',
+            initialHeight: '80vh',
+            border: false,
+          },
+        });
+        await macroTask();
+
+        expect(consentUI.srAlertShown_).to.be.false;
+        expect(consentUI.srAlert_).to.be.null;
+        expect(doc.activeElement).to.equal(consentUI.ui_);
+        expect(consentUI.parent_.classList.contains(consentUiClasses.modal)).to
+          .be.true;
+      });
+
       it('should handle a border value', () => {
         return getReadyIframeCmpConsentUi().then((consentUI) => {
-          expect(consentUI.enableBorder_).to.be.equal(true);
+          expect(consentUI.borderEnabled_).to.be.equal(true);
 
           consentUI.handleIframeMessages_({
             source: consentUI.ui_.contentWindow,
@@ -668,25 +891,12 @@ describes.realWin(
             },
           });
 
-          expect(consentUI.enableBorder_).to.be.equal(false);
+          expect(consentUI.borderEnabled_).to.be.equal(false);
         });
       });
     });
 
     describe('fullscreen', () => {
-      it('should respond to the fullscreen event', () => {
-        return getReadyIframeCmpConsentUi().then((consentUI) => {
-          const enterFullscreenStub = env.sandbox.stub(
-            consentUI,
-            'enterFullscreen_'
-          );
-
-          sendMessageConsentUi(consentUI, 'enter-fullscreen');
-
-          expect(enterFullscreenStub).to.be.calledOnce;
-        });
-      });
-
       it(
         'should not handle the fullscreen event, ' +
           "if the iframe wasn't visible",
@@ -705,81 +915,152 @@ describes.realWin(
         }
       );
 
-      describe('enterFullscreen', () => {
-        it('should add fullscreen classes and set fullscreen state', () => {
-          return getReadyIframeCmpConsentUi().then((consentUI) => {
-            consentUI.enterFullscreen_();
+      it('should not enter fullscreen in modal view', async () => {
+        const errorSpy = env.sandbox.spy(user(), 'warn');
 
-            expect(parent.classList.contains(consentUiClasses.iframeFullscreen))
-              .to.be.true;
-            expect(consentUI.isFullscreen_).to.be.true;
-          });
+        consentUI = new ConsentUI(mockInstance, {
+          'promptUISrc': 'https//promptUISrc',
         });
 
-        it('should not enter fullscreen if already fullscreen', () => {
-          return getReadyIframeCmpConsentUi().then((consentUI) => {
-            consentUI.isFullscreen_ = true;
-            consentUI.enterFullscreen_();
+        // trigger modal view
+        consentUI.show(true);
+        consentUI.handleIframeMessages_({
+          source: consentUI.ui_.contentWindow,
+          data: {
+            type: 'consent-ui',
+            action: 'ready',
+            initialHeight: '80vh',
+          },
+        });
+        await macroTask();
 
-            expect(parent.classList.contains(consentUiClasses.iframeFullscreen))
-              .to.be.false;
-          });
+        const windowSpy = env.sandbox.spy(
+          consentUI.ui_.contentWindow,
+          'postMessage'
+        );
+
+        sendMessageConsentUi(consentUI, 'enter-fullscreen');
+
+        expect(errorSpy).to.be.calledOnce;
+        expect(errorSpy.args[0][1]).to.match(/Could not enter fullscreen/);
+        expect(windowSpy).to.be.calledOnce;
+        expect(windowSpy.args[0][0]).to.deep.equal({
+          'type': 'amp-consent-response',
+          'requestType': 'consent-ui',
+          'requestAction': 'enter-fullscreen',
+          'state': 'error',
+          'info':
+            'Could not enter fullscreen. Fullscreen is only supported when the iframe is visible as a bottom sheet and after user interaction.',
         });
+        expect(consentUI.isFullscreen_).to.be.false;
       });
+    });
 
-      it('should disable scrolling', () => {
+    describe('enterFullscreen', () => {
+      it('should add fullscreen classes and set fullscreen state', () => {
         return getReadyIframeCmpConsentUi().then((consentUI) => {
-          expect(consentUI.scrollEnabled_).to.be.true;
+          consentUI.enterFullscreen_();
 
+          expect(parent.classList.contains(consentUiClasses.iframeFullscreen))
+            .to.be.true;
+          expect(consentUI.isFullscreen_).to.be.true;
+        });
+      });
+
+      it('should not enter fullscreen if already fullscreen', () => {
+        return getReadyIframeCmpConsentUi().then((consentUI) => {
+          consentUI.isFullscreen_ = true;
           consentUI.enterFullscreen_();
 
-          expect(consentUI.scrollEnabled_).to.be.false;
+          expect(parent.classList.contains(consentUiClasses.iframeFullscreen))
+            .to.be.false;
+        });
+      });
+    });
+
+    it('should disable scrolling', () => {
+      return getReadyIframeCmpConsentUi().then((consentUI) => {
+        expect(consentUI.scrollEnabled_).to.be.true;
+
+        consentUI.enterFullscreen_();
+
+        expect(consentUI.scrollEnabled_).to.be.false;
+
+        env.sandbox
+          .stub(consentUI, 'baseInstance_')
+          .callsFake((callback) => callback());
+        consentUI.hide();
+        expect(consentUI.scrollEnabled_).to.be.true;
+      });
+    });
+
+    it(
+      'should hide the viewer on enterFullscreen, ' +
+        'and show the viewer on hide',
+      () => {
+        return getReadyIframeCmpConsentUi().then((consentUI) => {
+          const sendMessageStub = env.sandbox.stub(
+            consentUI.viewer_,
+            'sendMessage'
+          );
+
+          consentUI.enterFullscreen_();
+
+          expect(sendMessageStub).to.be.calledOnce;
 
           env.sandbox
             .stub(consentUI, 'baseInstance_')
             .callsFake((callback) => callback());
           consentUI.hide();
-          expect(consentUI.scrollEnabled_).to.be.true;
+          expect(sendMessageStub).to.be.calledTwice;
         });
-      });
-
-      it(
-        'should hide the viewer on enterFullscreen, ' +
-          'and show the viewer on hide',
-        () => {
-          return getReadyIframeCmpConsentUi().then((consentUI) => {
-            const sendMessageStub = env.sandbox.stub(
-              consentUI.viewer_,
-              'sendMessage'
-            );
+      }
+    );
 
-            consentUI.enterFullscreen_();
-
-            expect(sendMessageStub).to.be.calledOnce;
+    it('should hide the viewer when modal enabled and show the viewer on hide', async () => {
+      consentUI = new ConsentUI(mockInstance, {
+        'promptUISrc': 'https//promptUISrc',
+      });
 
-            env.sandbox
-              .stub(consentUI, 'baseInstance_')
-              .callsFake((callback) => callback());
-            consentUI.hide();
-            expect(sendMessageStub).to.be.calledTwice;
-          });
-        }
+      const enterLightboxStub = env.sandbox.stub(
+        consentUI.viewport_,
+        'enterLightboxMode'
+      );
+      const leaveLightboxStub = env.sandbox.stub(
+        consentUI.viewport_,
+        'leaveLightboxMode'
       );
-    });
 
-    /**\
-     * @param {!ConsentUI} consentUI
-     * @param {string} source
-     * @param {string} action
-     */
-    function sendMessageConsentUi(consentUI, action) {
+      consentUI.show(true);
       consentUI.handleIframeMessages_({
         source: consentUI.ui_.contentWindow,
         data: {
           type: 'consent-ui',
-          action,
+          action: 'ready',
+          initialHeight: '80vh',
         },
       });
-    }
+      await macroTask();
+      expect(enterLightboxStub).to.be.calledOnce;
+
+      // Hide
+      consentUI.hide();
+      expect(leaveLightboxStub).to.be.calledOnce;
+    });
   }
 );
+
+/**\
+ * @param {!ConsentUI} consentUI
+ * @param {string} source
+ * @param {string} action
+ */
+function sendMessageConsentUi(consentUI, action) {
+  consentUI.handleIframeMessages_({
+    source: consentUI.ui_.contentWindow,
+    data: {
+      type: 'consent-ui',
+      action,
+    },
+  });
+}
diff --git a/extensions/amp-consent/0.1/test/test-cookie-writer.js b/extensions/amp-consent/0.1/test/test-cookie-writer.js
new file mode 100644
index 0000000000000..71c6ee8d168f1
--- /dev/null
+++ b/extensions/amp-consent/0.1/test/test-cookie-writer.js
@@ -0,0 +1,424 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as cookie from '../../../../src/cookies';
+import * as fakeTimers from '@sinonjs/fake-timers';
+import {CookieWriter} from '../cookie-writer';
+import {dict} from '../../../../src/core/types/object';
+
+const TAG = '[amp-consent/cookie-writer]';
+
+describes.realWin(
+  'amp-consent.cookie-writer',
+  {
+    amp: true,
+    runtimeOn: true,
+  },
+  (env) => {
+    let win;
+    let doc;
+    let setCookieSpy;
+    let element;
+
+    beforeEach(() => {
+      setCookieSpy = env.sandbox.spy();
+      win = env.win;
+      doc = win.document;
+      env.sandbox.stub(cookie, 'setCookie').callsFake((win, name, value) => {
+        setCookieSpy(name, value);
+      });
+      element = doc.createElement('div');
+      doc.body.appendChild(element);
+    });
+
+    describe('write with condition', () => {
+      let expandAndWriteSpy;
+
+      it('Resolve when no config', () => {
+        const config = dict({});
+        const cookieWriter = new CookieWriter(win, element, config);
+        expandAndWriteSpy = env.sandbox.spy(cookieWriter, 'expandAndWrite_');
+        return cookieWriter.write().then(() => {
+          expect(expandAndWriteSpy).to.not.be.called;
+        });
+      });
+
+      it('Resovle when config is invalid', () => {
+        const config = dict({
+          'cookies': 'invalid',
+        });
+        expectAsyncConsoleError(TAG + ' cookies config must be an object');
+        const cookieWriter = new CookieWriter(win, element, config);
+        expandAndWriteSpy = env.sandbox.spy(cookieWriter, 'expandAndWrite_');
+        return cookieWriter.write().then(() => {
+          expect(expandAndWriteSpy).to.not.be.called;
+        });
+      });
+
+      it('Resolve when element is in FIE', () => {
+        const config = dict({
+          'cookies': {
+            'testId': {
+              'value': 'test',
+            },
+          },
+        });
+        const parent = doc.createElement('div');
+        parent.classList.add('i-amphtml-fie');
+        doc.body.appendChild(parent);
+        parent.appendChild(element);
+        const cookieWriter = new CookieWriter(win, element, config);
+        expandAndWriteSpy = env.sandbox.spy(cookieWriter, 'expandAndWrite_');
+        return cookieWriter.write().then(() => {
+          expect(expandAndWriteSpy).to.not.be.called;
+        });
+      });
+
+      it('Resolve when in viewer', () => {
+        const config = dict({
+          'cookies': {
+            'testId': {
+              'value': 'test',
+            },
+          },
+        });
+        const mockWin = {
+          location: 'https://www-example-com.cdn.ampproject.org',
+        };
+        const cookieWriter = new CookieWriter(mockWin, element, config);
+        expandAndWriteSpy = env.sandbox.spy(cookieWriter, 'expandAndWrite_');
+        return cookieWriter.write().then(() => {
+          expect(expandAndWriteSpy).to.not.be.called;
+        });
+      });
+
+      it('Resolve when disabled', () => {
+        const config = dict({
+          'cookies': {
+            'testId': {
+              'value': 'test',
+            },
+            'enabled': false,
+          },
+        });
+        const cookieWriter = new CookieWriter(win, element, config);
+        expandAndWriteSpy = env.sandbox.spy(cookieWriter, 'expandAndWrite_');
+        return cookieWriter.write().then(() => {
+          expect(expandAndWriteSpy).to.not.be.called;
+        });
+      });
+
+      it('Resolve with nothing to write', () => {
+        const config = dict({
+          'cookies': {},
+        });
+        const cookieWriter = new CookieWriter(win, element, config);
+        expandAndWriteSpy = env.sandbox.spy(cookieWriter, 'expandAndWrite_');
+        return cookieWriter.write().then(() => {
+          expect(expandAndWriteSpy).to.not.be.called;
+        });
+      });
+
+      it('Resolve with invalid cookieValue (not object)', () => {
+        const config = dict({
+          'cookies': {
+            'testId': 'test',
+          },
+        });
+        const cookieWriter = new CookieWriter(win, element, config);
+        expandAndWriteSpy = env.sandbox.spy(cookieWriter, 'expandAndWrite_');
+        return cookieWriter.write().then(() => {
+          expect(expandAndWriteSpy).to.not.be.called;
+        });
+      });
+
+      it('Resolve when no value in cookieValue object', () => {
+        const config = dict({
+          'cookies': {
+            'testId': {
+              'invalidKey': 'test',
+            },
+          },
+        });
+        const cookieWriter = new CookieWriter(win, element, config);
+        expandAndWriteSpy = env.sandbox.spy(cookieWriter, 'expandAndWrite_');
+        return cookieWriter.write().then(() => {
+          expect(expandAndWriteSpy).to.not.be.called;
+        });
+      });
+
+      it('Ignore reserved keys', () => {
+        const config = dict({
+          'cookies': {
+            'cookiePath': {
+              'value': 'test',
+            },
+          },
+        });
+        const cookieWriter = new CookieWriter(win, element, config);
+        expandAndWriteSpy = env.sandbox.spy(cookieWriter, 'expandAndWrite_');
+        return cookieWriter.write().then(() => {
+          expect(expandAndWriteSpy).to.not.be.called;
+        });
+      });
+    });
+  }
+);
+
+describes.fakeWin('amp-consent.cookie-writer value', {amp: true}, (env) => {
+  let win;
+  let clock;
+
+  beforeEach(() => {
+    win = env.win;
+    clock = fakeTimers.withGlobal(window).install({
+      now: new Date('2018-01-01T08:00:00Z'),
+    });
+  });
+
+  afterEach(() => {
+    clock.uninstall();
+  });
+
+  it('should read value from only LINKER_PARAM', () => {
+    win.location = 'https://example.test/?a=123&b=567';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'aCookie': {
+            'value': 'QUERY_PARAM(a)',
+          },
+          'bCookie': {
+            'value': 'LINKER_PARAM(b,c)',
+          },
+          'testId1': {
+            'value': 'static',
+          },
+        },
+      })
+    );
+
+    env.sandbox
+      .stub(cookieWriter.linkerReader_, 'get')
+      .callsFake((name, id) => {
+        return `${name}-${id}`;
+      });
+
+    return cookieWriter.write().then(() => {
+      const cookies = win.document.cookie.split(';');
+      expect(cookies).to.include('aCookie=QUERY_PARAM(a)');
+      expect(cookies).to.include('bCookie=b-c');
+      expect(cookies).to.include('testId1=static');
+    });
+  });
+
+  it('should write cookie under eTLD+1 domain with right exp.', () => {
+    win.location = 'https://www.example.test/?a=123&b=567';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'aCookie': {
+            'value': 'test',
+          },
+        },
+      })
+    );
+    return cookieWriter.write().then(() => {
+      expect(win.document.lastSetCookieRaw).to.equal(
+        'aCookie=test; path=/; domain=example.test; ' +
+          'expires=Tue, 01 Jan 2019 08:00:00 GMT'
+      );
+    });
+  });
+
+  it('should write cookie with custom expiration (number value)', () => {
+    win.location = 'https://www.example.test/';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'cookieMaxAge': 604800, // 1 week in seconds
+          'aCookie': {
+            'value': 'testValue',
+          },
+        },
+      })
+    );
+    return cookieWriter.write().then(() => {
+      expect(win.document.lastSetCookieRaw).to.equal(
+        'aCookie=testValue; path=/; domain=example.test; ' +
+          'expires=Mon, 08 Jan 2018 08:00:00 GMT'
+      );
+    });
+  });
+
+  it('should write cookie with custom expiration (string value)', () => {
+    win.location = 'https://www.example.test/';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'cookieMaxAge': '604800', // 1 week in seconds
+          'aCookie': {
+            'value': 'testValue',
+          },
+        },
+      })
+    );
+    return cookieWriter.write().then(() => {
+      expect(win.document.lastSetCookieRaw).to.equal(
+        'aCookie=testValue; path=/; domain=example.test; ' +
+          'expires=Mon, 08 Jan 2018 08:00:00 GMT'
+      );
+    });
+  });
+
+  it('should write cookie with custom expiration (decimal value)', () => {
+    win.location = 'https://www.example.test/';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'cookieMaxAge': 604800.000123,
+          'aCookie': {
+            'value': 'testValue',
+          },
+        },
+      })
+    );
+
+    return cookieWriter.write().then(() => {
+      expect(win.document.lastSetCookieRaw).to.equal(
+        'aCookie=testValue; path=/; domain=example.test; ' +
+          'expires=Mon, 08 Jan 2018 08:00:00 GMT'
+      );
+    });
+  });
+
+  it('should write cookie with custom expiration (zero value)', () => {
+    win.location = 'https://www.example.test/';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'cookieMaxAge': 0,
+          'aCookie': {
+            'value': 'testValue',
+          },
+        },
+      })
+    );
+    return cookieWriter.write().then(() => {
+      expect(win.document.lastSetCookieRaw).to.equal(
+        'aCookie=testValue; path=/; domain=example.test; ' +
+          'expires=Mon, 01 Jan 2018 08:00:00 GMT'
+      );
+    });
+  });
+
+  it('should write cookie with custom expiration (negative value)', () => {
+    win.location = 'https://www.example.test/';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'cookieMaxAge': -604800,
+          'aCookie': {
+            'value': 'testValue',
+          },
+        },
+      })
+    );
+    return cookieWriter.write().then(() => {
+      expect(win.document.lastSetCookieRaw).to.equal(
+        'aCookie=testValue; path=/; domain=example.test; ' +
+          'expires=Mon, 25 Dec 2017 08:00:00 GMT'
+      );
+    });
+  });
+
+  it('should write cookie with default expiration (invalid string value)', () => {
+    win.location = 'https://www.example.test/';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'cookieMaxAge': 'invalid',
+          'aCookie': {
+            'value': 'testValue',
+          },
+        },
+      })
+    );
+    return allowConsoleError(() => {
+      return cookieWriter.write().then(() => {
+        expect(win.document.lastSetCookieRaw).to.equal(
+          'aCookie=testValue; path=/; domain=example.test; ' +
+            'expires=Tue, 01 Jan 2019 08:00:00 GMT'
+        );
+      });
+    });
+  });
+
+  it('should not write empty cookie', () => {
+    win.location = 'https://www.example.test/?a=123&b=567';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'cCookie': {
+            'value': '',
+          },
+        },
+      })
+    );
+    return cookieWriter.write().then(() => {
+      expect(win.document.cookie).to.equal('');
+      expect(win.document.lastSetCookieRaw).to.be.undefined;
+    });
+  });
+
+  it('should not write cookie if macro is mal-formatted', () => {
+    win.location = 'https://www.example.test/?a=123&b=567';
+    const cookieWriter = new CookieWriter(
+      win,
+      win.document.body,
+      dict({
+        'cookies': {
+          'aCookie': {
+            'value': 'LINKER_PARAM(b)',
+          },
+        },
+      })
+    );
+    expectAsyncConsoleError(/LINKER_PARAM requires two params, name and id/);
+    return cookieWriter.write().then(() => {
+      expect(win.document.cookie).to.equal('');
+      expect(win.document.lastSetCookieRaw).to.be.undefined;
+    });
+  });
+});
diff --git a/extensions/amp-consent/0.1/test/test-crc32.js b/extensions/amp-consent/0.1/test/test-crc32.js
new file mode 100644
index 0000000000000..7233b864d533e
--- /dev/null
+++ b/extensions/amp-consent/0.1/test/test-crc32.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {crc32} from '../crc32';
+
+const testVectors = [
+  {
+    input: '',
+    output: 0,
+  },
+  {
+    input: 'The quick brown fox jumps over the lazy dog',
+    output: 1095738169,
+  },
+  {
+    input: 'The quick brown fox jumps over the lazy dog.',
+    output: 1368401385,
+  },
+  {
+    input: 'hello',
+    output: 907060870,
+  },
+  {
+    input: 'world',
+    output: 980881731,
+  },
+  {
+    input: 'helloworld',
+    output: 4192936109,
+  },
+  {
+    input: '12345',
+    output: 3421846044,
+  },
+  {
+    input: '漢字',
+    output: 2573319087,
+  },
+  {
+    input: '    spaces',
+    output: 1946449684,
+  },
+  {
+    input: '-_~c@@l~_-',
+    output: 4153342273,
+  },
+];
+
+describes.sandboxed('CRC32 Implementation', {}, () => {
+  testVectors.forEach((test, i) => {
+    it(`test #${i}: "${test.input}"`, () => {
+      expect(crc32(test.input)).to.equal(test.output);
+    });
+  });
+});
diff --git a/extensions/amp-consent/0.1/test/test-linker-reader.js b/extensions/amp-consent/0.1/test/test-linker-reader.js
new file mode 100644
index 0000000000000..9f2dfbb5eb32f
--- /dev/null
+++ b/extensions/amp-consent/0.1/test/test-linker-reader.js
@@ -0,0 +1,121 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {ConsentLinkerReader} from '../linker-reader';
+import {mockWindowInterface} from '../../../../testing/test-helper';
+
+describes.realWin('LinkerReader', {amp: true}, (env) => {
+  let linkerReader;
+  let mockWin;
+  let url;
+
+  beforeEach(() => {
+    env.sandbox.useFakeTimers(1533329483292);
+    env.sandbox.stub(Date.prototype, 'getTimezoneOffset').returns(420);
+    mockWin = mockWindowInterface(env.sandbox);
+    mockWin.getUserAgent.returns(
+      'Mozilla/5.0 (X11; Linux x86_64) ' +
+        'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 ' +
+        'Safari/537.36'
+    );
+    mockWin.getUserLanguage.returns('en-US');
+    mockWin.location = {
+      href: 'https://example.com?testlinker=1*1f66u1p*key1*dmFsdWUx',
+      origin: 'https://example.com',
+      pathname: '',
+      search: '?testlinker=1*1f66u1p*key1*dmFsdWUx',
+      hash: '',
+    };
+    mockWin.history = {
+      replaceState: (unusedVar1, unusedVar2, newHref) => {
+        const a = document.createElement('a');
+        a.href = newHref;
+        mockWin.location.href = newHref;
+        mockWin.location.origin = a.origin;
+        mockWin.location.pathname = a.pathname;
+        mockWin.location.search = a.search;
+        mockWin.location.hash = a.hash;
+      },
+    };
+    linkerReader = new ConsentLinkerReader(mockWin);
+  });
+
+  it('return null when no params', () => {
+    expectAsyncConsoleError(/LINKER_PARAM requires two params, name and id/);
+    expect(linkerReader.get('testlinker')).to.be.null;
+    expect(mockWin.location.href).to.equal(
+      'https://example.com?testlinker=1*1f66u1p*key1*dmFsdWUx'
+    );
+  });
+
+  it('return null when no linker name', () => {
+    expect(linkerReader.get('nolinker', 'id')).to.be.null;
+    expect(mockWin.location.href).to.equal(
+      'https://example.com?testlinker=1*1f66u1p*key1*dmFsdWUx'
+    );
+  });
+
+  it('return null when linker name value is invalid', () => {
+    url = 'https://example.com?testlinker=1*123*key*error';
+    expectAsyncConsoleError(/LINKER_PARAM value checksum not valid/);
+    mockWin.history.replaceState(null, null, url);
+    expect(linkerReader.get('testlinker', 'key')).to.be.null;
+    expect(mockWin.location.href).to.equal(url);
+  });
+
+  it('return null when no linker id value', () => {
+    const url = 'https://example.com?testlinker=1*1f66u1p*key1*dmFsdWUx';
+    mockWin.history.replaceState(null, null, url);
+    expect(linkerReader.get('testlinker', 'key2')).to.be.null;
+    expect(mockWin.location.href).to.equal(url);
+  });
+
+  it('should not remove linker_param from url', () => {
+    url =
+      'https://example.com?a=1&b=2&testlinker=1*1f66u1p*key1*dmFsdWUx' +
+      '&c&testlinker2=1*1f66u1p*key1*dmFsdWUx&d=2#hash';
+    mockWin.history.replaceState(null, null, url);
+    expect(linkerReader.get('testlinker', 'key1')).to.equal('value1');
+    expect(mockWin.location.href).to.equal(url);
+    expect(linkerReader.get('testlinker2', 'key1')).to.equal('value1');
+    expect(mockWin.location.href).to.equal(url);
+  });
+
+  it('return correct id value', () => {
+    url =
+      'https://example.com?test=1*1f66u1p*key1*dmFsdWUx&var=foo' +
+      '&test2=1*1m48hbv*cid*MTIzNDU.*ref*aHR0cHM6Ly93d3cuZXhhbXBsZS5jb20.';
+    mockWin.history.replaceState(null, null, url);
+    expect(linkerReader.get('test', 'key1')).to.equal('value1');
+    expect(linkerReader.get('test2', 'cid')).to.equal('12345');
+    expect(linkerReader.get('test2', 'ref')).to.equal(
+      'https://www.example.com'
+    );
+    expect(mockWin.location.href).to.equal(url);
+  });
+
+  it('returns same value when reading the same id', () => {
+    url = 'https://example.com?test=1*1f66u1p*key1*dmFsdWUx&var=foo';
+    mockWin.history.replaceState(
+      null,
+      null,
+      'https://example.com?test=1*1f66u1p*key1*dmFsdWUx&var=foo'
+    );
+    expect(linkerReader.get('test', 'key1')).to.equal('value1');
+    expect(linkerReader.get('test', 'key1')).to.equal('value1');
+    expect(mockWin.location.href).to.equal(url);
+  });
+});
diff --git a/extensions/amp-consent/0.1/test/test-linker.js b/extensions/amp-consent/0.1/test/test-linker.js
new file mode 100644
index 0000000000000..700b78784a6b8
--- /dev/null
+++ b/extensions/amp-consent/0.1/test/test-linker.js
@@ -0,0 +1,287 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {createLinker, parseLinker} from '../linker';
+import {mockWindowInterface} from '../../../../testing/test-helper';
+
+const TAG = '[amp-consent/linker]';
+
+const BASE_TIME = 1533329483292;
+
+const parseLinkerTests = [
+  {
+    description: 'invalid value miss component',
+    value: '1*key*123',
+    output: null,
+    errorMsg: 'Invalid linker_param value 1*key*123',
+  },
+  {
+    description: 'invalid value miss value',
+    value: '1*1*key1*123*key2',
+    output: null,
+    errorMsg: 'Invalid linker_param value 1*1*key1*123*key2',
+  },
+  {
+    description: 'invalid value unsupported version number',
+    value: '2*1*key1*123',
+    output: null,
+    errorMsg: 'Invalid version number 2',
+  },
+  {
+    description: 'invalid keys value',
+    value: '1*15qclke*~key1*123',
+    output: {},
+    errorMsg: 'Invalid linker key ~key1, value ignored',
+  },
+  {
+    description: 'invalid value checksum not correct',
+    currentTime: BASE_TIME + 2 * 60000,
+    value: '1*1f66u1p*key1*dmFsdWUx',
+    output: null,
+    errorMsg: 'LINKER_PARAM value checksum not valid',
+  },
+  {
+    description: 'tolerate checksum with one minute offset',
+    currentTime: BASE_TIME + 60000,
+    value: '1*1f66u1p*key1*dmFsdWUx',
+    output: {
+      'key1': 'value1',
+    },
+  },
+  {
+    description: 'works with multiple key value pairs',
+    value: '1*6orwo8*key1*dmFsdWUx*name*Ym9i*color*Z3JlZW4.*car*dGVzbGE.',
+    output: {
+      'key1': 'value1',
+      'name': 'bob',
+      'color': 'green',
+      'car': 'tesla',
+    },
+  },
+  {
+    description: 'decode URL correctly',
+    value: '1*1m48hbv*cid*MTIzNDU.*ref*aHR0cHM6Ly93d3cuZXhhbXBsZS5jb20.',
+    output: {
+      cid: '12345',
+      ref: 'https://www.example.com',
+    },
+  },
+  {
+    description: 'decodes * in values',
+    value: '1*1fo13qb*key*KmhpKg..*key2*Kioq',
+    output: {
+      'key': '*hi*',
+      'key2': '***',
+    },
+  },
+  {
+    description: 'decodes unicode in values',
+    value: '1*bgtsvu*key*5Lit5paH*key2*z4A.',
+    output: {
+      'key': '中文',
+      'key2': 'π',
+    },
+  },
+  {
+    description: 'decodes base64 chars in keys',
+    value: '1*uidf2s*0x3*MHgz*_gb*X2di*g.b*Zy5i*nn-*bm4t',
+    output: {
+      '0x3': '0x3',
+      '_gb': '_gb',
+      'g.b': 'g.b',
+      'nn-': 'nn-',
+    },
+  },
+];
+
+const createLinkerTests = [
+  {
+    description: 'returns empty string if no pairs given',
+    version: '1',
+    pairs: {},
+    output: '',
+  },
+  {
+    description: 'returns empty string if pairs=null',
+    version: '1',
+    pairs: null,
+    output: '',
+  },
+  {
+    description: 'returns empty string if pairs=undefined',
+    version: '1',
+    pairs: undefined,
+    output: '',
+  },
+  {
+    description: 'generates param with checksum and version',
+    version: '1',
+    pairs: {
+      foo: '123',
+    },
+    output: '1*14cn7x*foo*MTIz',
+  },
+  {
+    description: 'appends one key value pair',
+    version: '1',
+    pairs: {
+      key1: 'value1',
+    },
+    output: '1*1f66u1p*key1*dmFsdWUx',
+  },
+  {
+    description: 'appends many key value pairs',
+    version: '1',
+    pairs: {
+      key1: 'value1',
+      name: 'bob',
+      color: 'green',
+      car: 'tesla',
+    },
+    output: '1*6orwo8*key1*dmFsdWUx*name*Ym9i*color*Z3JlZW4.*car*dGVzbGE.',
+  },
+  {
+    description: 'encodes URL unsafe chars in values',
+    version: '1',
+    pairs: {
+      cid: '12345',
+      ref: 'https://www.example.com',
+    },
+    output: '1*1m48hbv*cid*MTIzNDU.*ref*aHR0cHM6Ly93d3cuZXhhbXBsZS5jb20.',
+  },
+  {
+    description: 'encodes * in values',
+    version: '1',
+    pairs: {
+      'key': '*hi*',
+      'key2': '***',
+    },
+    output: '1*1fo13qb*key*KmhpKg..*key2*Kioq',
+  },
+  {
+    description: 'encodes unicode in values',
+    version: '1',
+    pairs: {
+      'key': '中文',
+      'key2': 'π',
+    },
+    output: '1*bgtsvu*key*5Lit5paH*key2*z4A.',
+  },
+  {
+    description: 'allows base64 chars in keys',
+    version: '1',
+    pairs: {
+      '0x3': '0x3',
+      '_gb': '_gb',
+      'g.b': 'g.b',
+      'nn-': 'nn-',
+    },
+    output: '1*uidf2s*0x3*MHgz*_gb*X2di*g.b*Zy5i*nn-*bm4t',
+  },
+  {
+    description: 'ignores invalid keys',
+    version: '1',
+    pairs: {
+      '*invalid': '123',
+      'valid': 'abc',
+    },
+    output: '1*m20mv5*valid*YWJj',
+    expectErrors: 1,
+  },
+  {
+    description: 'returns empty string if all keys are invalid',
+    version: '1',
+    pairs: {
+      '*invalid': '123',
+      'invalid!': 'abc',
+    },
+    output: '',
+    expectErrors: 2,
+  },
+  {
+    description: 'works for Google Analytics generated Client ID',
+    version: '1',
+    pairs: {
+      '_ga': '1218435055.1536188913',
+    },
+    output: '1*5x9ojm*_ga*MTIxODQzNTA1NS4xNTM2MTg4OTEz',
+  },
+  {
+    description: 'works for AMP CID API generated Client ID',
+    version: '1',
+    pairs: {
+      '_ga':
+        'amp-' +
+        'oRg8vByriPdstwLgkz-UNWbp2P13vNFsnhES5vW8s5WodTOoea0mTiY7X62utLyz',
+    },
+    output:
+      '1*1fkd1zz*_ga*' +
+      'YW1wLW9SZzh2QnlyaVBkc3R3TGdrei1VTldicDJQMT' +
+      'N2TkZzbmhFUzV2VzhzNVdvZFRPb2VhMG1UaVk3WDYydXRMeXo.',
+  },
+  {
+    description: 'works for AMP Viewer generated Client ID',
+    version: '1',
+    pairs: {
+      '_ga': 'WgcaAD4XN2lydhQVNFruk6X8zwoUg6K2RnaRlhjs6CXvTv4aJV-3oVLdI1WxxvJb',
+    },
+    output:
+      '1*19eaxqc*_ga*' +
+      'V2djYUFENFhOMmx5ZGhRVk5GcnVrNlg4endvVWc2Sz' +
+      'JSbmFSbGhqczZDWHZUdjRhSlYtM29WTGRJMVd4eHZKYg..',
+  },
+];
+
+describes.sandboxed('Linker', {}, (env) => {
+  let mockWin;
+  beforeEach(() => {
+    // Linker uses a timestamp value to generate checksum.
+    env.sandbox.useFakeTimers(BASE_TIME);
+    env.sandbox.stub(Date.prototype, 'getTimezoneOffset').returns(420);
+    mockWin = mockWindowInterface(env.sandbox);
+    mockWin.getUserAgent.returns(
+      'Mozilla/5.0 (X11; Linux x86_64) ' +
+        'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 ' +
+        'Safari/537.36'
+    );
+    mockWin.getUserLanguage.returns('en-US');
+  });
+
+  describe('createLinker', () => {
+    createLinkerTests.forEach((test) => {
+      it(test.description, () => {
+        if (test.expectErrors) {
+          expectAsyncConsoleError(/Invalid linker key/, test.expectErrors);
+        }
+        expect(createLinker(test.version, test.pairs)).to.equal(test.output);
+      });
+    });
+  });
+
+  describe('parseLinker', () => {
+    parseLinkerTests.forEach((test) => {
+      it(test.description, () => {
+        if (test.errorMsg) {
+          expectAsyncConsoleError(TAG + ' ' + test.errorMsg);
+        }
+        if (test.currentTime) {
+          env.sandbox.useFakeTimers(test.currentTime);
+        }
+        expect(parseLinker(test.value)).to.deep.equal(test.output);
+      });
+    });
+  });
+});
diff --git a/extensions/amp-consent/0.1/test/test-tcf-api-command-manager.js b/extensions/amp-consent/0.1/test/test-tcf-api-command-manager.js
new file mode 100644
index 0000000000000..082a2a9773c2f
--- /dev/null
+++ b/extensions/amp-consent/0.1/test/test-tcf-api-command-manager.js
@@ -0,0 +1,482 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {TcfApiCommandManager} from '../tcf-api-command-manager';
+import {macroTask} from '../../../../testing/yield';
+import {mockWindowInterface} from '../../../../testing/test-helper';
+import {user} from '../../../../src/log';
+
+describes.realWin(
+  'tcf api commands',
+  {
+    amp: {
+      extensions: ['amp-consent'],
+      ampdoc: 'single',
+    },
+  },
+  (env) => {
+    describe('tcf Commands', () => {
+      let mockWin;
+      let mockPolicyManager;
+      let mockMetadata;
+      let data;
+      let msg;
+      let tcfApiCommandManager;
+      let mockTcString;
+      let mockSharedData;
+      let callId;
+
+      beforeEach(() => {
+        mockWin = mockWindowInterface(env.sandbox);
+        mockWin.postMessage = env.sandbox.spy();
+        mockMetadata = {};
+        mockSharedData = {};
+        mockTcString = '';
+        mockPolicyManager = {
+          getConsentMetadataInfo: (opt_policy) => {
+            return Promise.resolve(mockMetadata);
+          },
+          getConsentStringInfo: (opt_policy) => {
+            return Promise.resolve(mockTcString);
+          },
+          getMergedSharedData: (opt_policy) => {
+            return Promise.resolve(mockSharedData);
+          },
+          setOnPolicyChange: env.sandbox.spy(),
+        };
+      });
+
+      describe('isValidTcfApiCall', () => {
+        it('validates __tcfapiCall post message', async () => {
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+          msg = {};
+          const errorSpy = env.sandbox.stub(user(), 'error');
+          msg.__tcfapiCall = 'bad';
+          expect(tcfApiCommandManager.isValidTcfApiCall_(msg.__tcfapiCall)).to
+            .be.false;
+          expect(errorSpy.args[0][1]).to.match(
+            /"tcfapiCall" is not an object: bad/
+          );
+          errorSpy.resetHistory();
+
+          msg.__tcfapiCall = {
+            'command': 'bad',
+          };
+          expect(tcfApiCommandManager.isValidTcfApiCall_(msg.__tcfapiCall)).to
+            .be.false;
+          expect(errorSpy.args[0][1]).to.match(
+            /Unsupported command found in "tcfapiCall": bad/
+          );
+          errorSpy.resetHistory();
+
+          msg.__tcfapiCall.command = 'ping';
+          msg.__tcfapiCall.parameter = [1, 2, 3];
+          expect(tcfApiCommandManager.isValidTcfApiCall_(msg.__tcfapiCall)).to
+            .be.false;
+          expect(errorSpy.args[0][1]).to.match(
+            /Unsupported parameter found in "tcfapiCall": [1,2,3]/
+          );
+          errorSpy.resetHistory();
+
+          msg.__tcfapiCall.parameter = undefined;
+          msg.__tcfapiCall.version = 1;
+          expect(tcfApiCommandManager.isValidTcfApiCall_(msg.__tcfapiCall)).to
+            .be.false;
+          expect(errorSpy.args[0][1]).to.match(
+            /Found incorrect version in "tcfapiCall": 1/
+          );
+          errorSpy.resetHistory();
+
+          msg.__tcfapiCall.version = 2;
+          expect(tcfApiCommandManager.isValidTcfApiCall_(msg.__tcfapiCall)).to
+            .be.true;
+          expect(errorSpy).to.not.be.called;
+        });
+
+        it('allows parameter value in removeEventListener command', () => {
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+          msg = {
+            __tcfapiCall: {
+              'command': 'removeEventListener',
+              'parameter': '30',
+              'version': 2,
+              'callId': 'callId',
+            },
+          };
+          const errorSpy = env.sandbox.stub(user(), 'error');
+          expect(tcfApiCommandManager.isValidTcfApiCall_(msg.__tcfapiCall)).to
+            .be.true;
+          expect(errorSpy).to.not.be.called;
+        });
+      });
+
+      describe('handlePingEvent', () => {
+        it('creates a minimal ping object', async () => {
+          mockMetadata = getMetadata(false);
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+          expect(
+            tcfApiCommandManager.getMinimalPingReturnForTesting(mockMetadata)
+          ).to.deep.equals({
+            gdprApplies: false,
+            cmpLoaded: true,
+            cmpStatus: 'loaded',
+            tcfPolicyVersion: 2,
+          });
+        });
+
+        it('creates a minimal ping object with no gdprApplies', async () => {
+          mockMetadata = getMetadata();
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+          expect(
+            tcfApiCommandManager.getMinimalPingReturnForTesting(mockMetadata)
+          ).to.deep.equals({
+            gdprApplies: undefined,
+            cmpLoaded: true,
+            cmpStatus: 'loaded',
+            tcfPolicyVersion: 2,
+          });
+        });
+
+        it('creates a minimal ping object with no metadata', async () => {
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+          expect(
+            tcfApiCommandManager.getMinimalPingReturnForTesting()
+          ).to.deep.equals({
+            gdprApplies: undefined,
+            cmpLoaded: true,
+            cmpStatus: 'loaded',
+            tcfPolicyVersion: 2,
+          });
+        });
+
+        it('sends a minimal PingReturn via PostMessage', async () => {
+          callId = 'pingCallId';
+          data = getData('ping', callId);
+          mockMetadata = getMetadata(true);
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+          tcfApiCommandManager.handleTcfCommand(data, mockWin);
+          await macroTask();
+
+          // No 'success' sent for ping
+          const postMessageArgs = mockWin.postMessage.args[0];
+          expect(postMessageArgs[0]).to.deep.equals(
+            getTcfApiReturn(
+              callId,
+              tcfApiCommandManager.getMinimalPingReturnForTesting(mockMetadata)
+            )
+          );
+        });
+      });
+
+      describe('handleGetTcData', () => {
+        it('creates a minimal TcData object', async () => {
+          mockMetadata = getMetadata(false, 'xyz987', false);
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+          expect(
+            tcfApiCommandManager.getMinimalTcDataForTesting(
+              mockMetadata,
+              mockSharedData,
+              mockTcString
+            )
+          ).to.deep.equals({
+            tcfPolicyVersion: 2,
+            gdprApplies: false,
+            tcString: mockTcString,
+            listenerId: undefined,
+            cmpStatus: 'loaded',
+            eventStatus: 'tcloaded',
+            purposeOneTreatment: false,
+            additionalData: {'additionalConsent': 'xyz987'},
+          });
+
+          mockTcString = 'abc123';
+          mockSharedData = {'data': 'data1'};
+
+          expect(
+            tcfApiCommandManager.getMinimalTcDataForTesting(
+              mockMetadata,
+              mockSharedData,
+              mockTcString
+            )
+          ).to.deep.equals({
+            tcfPolicyVersion: 2,
+            gdprApplies: false,
+            tcString: mockTcString,
+            listenerId: undefined,
+            cmpStatus: 'loaded',
+            eventStatus: 'tcloaded',
+            purposeOneTreatment: false,
+            additionalData: {'data': 'data1', 'additionalConsent': 'xyz987'},
+          });
+        });
+
+        it('sends a minimal TcData via PostMessage', async () => {
+          callId = 'getTcDataId';
+          data = getData('getTCData', callId);
+          mockMetadata = getMetadata(false, 'xyz987', false);
+          mockTcString = 'abc123';
+          mockSharedData = {'data': 'data1'};
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+          tcfApiCommandManager.handleTcfCommand(data, mockWin);
+          await macroTask();
+
+          const postMessageArgs = mockWin.postMessage.args[0];
+          expect(postMessageArgs[0]).to.deep.equals(
+            getTcfApiReturn(
+              callId,
+              tcfApiCommandManager.getMinimalTcDataForTesting(
+                mockMetadata,
+                mockSharedData,
+                mockTcString
+              ),
+              true
+            )
+          );
+        });
+      });
+
+      describe('addEventListener', () => {
+        it(
+          'responds to changes in policy manager' +
+            ' only after command has been sent',
+          async () => {
+            data = getData('addEventListener', 'callId');
+            tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+            const getConsentsSpy = env.sandbox.spy(
+              tcfApiCommandManager,
+              'getTcDataPromises_'
+            );
+
+            // Fake a TcData change
+            tcfApiCommandManager.handleTcDataChange_();
+            await macroTask();
+            expect(getConsentsSpy).to.not.be.called;
+
+            // Fake responding to event
+            tcfApiCommandManager.handleTcfCommand(data, mockWin);
+
+            tcfApiCommandManager.handleTcDataChange_();
+            await macroTask();
+            expect(getConsentsSpy).to.be.calledOnce;
+
+            tcfApiCommandManager.handleTcDataChange_();
+            await macroTask();
+            expect(getConsentsSpy).to.be.calledTwice;
+          }
+        );
+
+        it('sends minimal TcData on TcString change', async () => {
+          callId = 'callId';
+          data = getData('addEventListener', callId);
+          mockTcString = 'newTcString';
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+
+          // Start listening for changes
+          tcfApiCommandManager.handleTcfCommand(data, mockWin);
+
+          tcfApiCommandManager.handleTcDataChange_();
+          await macroTask();
+
+          const postMessageArgs = mockWin.postMessage.args[0];
+          expect(postMessageArgs[0]).to.deep.equals(
+            getTcfApiReturn(
+              callId,
+              tcfApiCommandManager.getMinimalTcDataForTesting(
+                mockMetadata,
+                mockSharedData,
+                mockTcString,
+                0
+              ),
+              true
+            )
+          );
+        });
+
+        it('does not send TcData when TcString is the same', async () => {
+          data = getData('addEventListener', 'callId');
+          mockTcString = 'prevTcString';
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+          tcfApiCommandManager.currentTcString_ = 'prevTcString';
+          tcfApiCommandManager.handleTcfCommand(data, mockWin);
+
+          // Fake a TcData change
+          tcfApiCommandManager.handleTcDataChange_();
+          await macroTask();
+          expect(mockWin.postMessage).to.not.be.called;
+        });
+
+        it('does not send TcData when TcString is null', async () => {
+          data = getData('addEventListener', 'callId');
+          mockTcString = null;
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+          tcfApiCommandManager.currentTcString_ = 'prevTcString';
+          tcfApiCommandManager.handleTcfCommand(data, mockWin);
+
+          // Fake a TcData change
+          tcfApiCommandManager.handleTcDataChange_();
+          await macroTask();
+          expect(mockWin.postMessage).to.not.be.called;
+        });
+
+        it('creates listenerIds for each callback and sends TcData to each', async () => {
+          callId = 'callId';
+          mockTcString = 'tcString';
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+          for (let listenerId = 0; listenerId < 4; listenerId++) {
+            data = getData('addEventListener', `${callId}${listenerId}`);
+            tcfApiCommandManager.handleTcfCommand(data, mockWin);
+            expect(tcfApiCommandManager.changeListeners_[listenerId]).to.not.be
+              .null;
+          }
+
+          // Fake a TcData change
+          tcfApiCommandManager.handleTcDataChange_();
+          await macroTask();
+
+          for (let listenerId = 0; listenerId < 4; listenerId++) {
+            const postMessageArgs = mockWin.postMessage.args[listenerId];
+            expect(postMessageArgs[0]).to.deep.equals(
+              getTcfApiReturn(
+                `${callId}${listenerId}`,
+                tcfApiCommandManager.getMinimalTcDataForTesting(
+                  mockMetadata,
+                  mockSharedData,
+                  mockTcString,
+                  listenerId
+                ),
+                true
+              )
+            );
+          }
+        });
+      });
+
+      describe('removeEventListener', () => {
+        it('removes listenerId and listener', async () => {
+          callId = 'callId';
+          mockTcString = 'tcString';
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+
+          // Register listener
+          data = getData('addEventListener', `${callId}`);
+          tcfApiCommandManager.handleTcfCommand(data, mockWin);
+          expect(
+            Object.keys(tcfApiCommandManager.changeListeners_).length
+          ).to.equal(1);
+          tcfApiCommandManager.handleTcDataChange_();
+          await macroTask();
+          expect(mockWin.postMessage).to.be.calledOnce;
+
+          // Remove listener
+          data = getData('removeEventListener', `${callId}`, '0');
+          tcfApiCommandManager.handleTcfCommand(data, mockWin);
+          expect(
+            Object.keys(tcfApiCommandManager.changeListeners_).length
+          ).to.equal(0);
+        });
+
+        it('sends undefined returnValue', async () => {
+          callId = 'callId';
+          mockTcString = 'tcString';
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+
+          // Register listener
+          data = getData('addEventListener', `${callId}`);
+          tcfApiCommandManager.handleTcfCommand(data, mockWin);
+          tcfApiCommandManager.handleTcDataChange_();
+          await macroTask();
+
+          // Remove listener
+          mockWin.postMessage.resetHistory();
+          data = getData('removeEventListener', `${callId}`, '0');
+          tcfApiCommandManager.handleTcfCommand(data, mockWin);
+          const postMessageArgs = mockWin.postMessage.args[0];
+          expect(postMessageArgs[0]).to.deep.equal(
+            getTcfApiReturn(callId, undefined, true)
+          );
+        });
+
+        it('handles incorrect listnerId', async () => {
+          callId = 'callId';
+          mockTcString = 'tcString';
+          tcfApiCommandManager = new TcfApiCommandManager(mockPolicyManager);
+
+          // Register listener
+          data = getData('addEventListener', `${callId}`);
+          tcfApiCommandManager.handleTcfCommand(data, mockWin);
+          tcfApiCommandManager.handleTcDataChange_();
+          await macroTask();
+
+          // Remove listener
+          mockWin.postMessage.resetHistory();
+          data = getData('removeEventListener', `${callId}`, '1');
+          tcfApiCommandManager.handleTcfCommand(data, mockWin);
+          const postMessageArgs = mockWin.postMessage.args[0];
+          expect(
+            Object.keys(tcfApiCommandManager.changeListeners_).length
+          ).to.equal(1);
+          expect(postMessageArgs[0]).to.deep.equal(
+            getTcfApiReturn(callId, undefined, false)
+          );
+        });
+      });
+    });
+  }
+);
+
+/**
+ * @param {string} command
+ * @param {string} callId
+ * @param {string=} opt_parameter
+ */
+function getData(command, callId, opt_parameter) {
+  return {
+    __tcfapiCall: {
+      command,
+      callId,
+      version: 2,
+      parameter: opt_parameter,
+    },
+  };
+}
+
+/**
+ * @param {string=} opt_gdprApplies
+ * @param {string=} opt_addtlConsent
+ * @param {boolean=} opt_purposeOne
+ */
+function getMetadata(opt_gdprApplies, opt_addtlConsent, opt_purposeOne) {
+  return {
+    gdprApplies: opt_gdprApplies,
+    additionalConsent: opt_addtlConsent,
+    purposeOne: opt_purposeOne,
+  };
+}
+
+/**
+ * @param {string} callId
+ * @param {Object=} opt_returnValue
+ * @param {boolean=} opt_success
+ */
+function getTcfApiReturn(callId, opt_returnValue, opt_success) {
+  return {
+    __tcfapiReturn: {
+      callId,
+      returnValue: opt_returnValue,
+      success: opt_success,
+    },
+  };
+}
diff --git a/extensions/amp-consent/0.1/test/validator-amp-consent-invalid-no-meta.out b/extensions/amp-consent/0.1/test/validator-amp-consent-invalid-no-meta.out
index d234709fcb763..ded85d8a6e349 100644
--- a/extensions/amp-consent/0.1/test/validator-amp-consent-invalid-no-meta.out
+++ b/extensions/amp-consent/0.1/test/validator-amp-consent-invalid-no-meta.out
@@ -41,4 +41,4 @@ FAIL
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-amp-consent/0.1/test/validator-amp-consent-invalid-no-meta.html:41:6 The tag 'meta name=amp-consent-blocking' is missing or incorrect, but required by 'amp-consent [type]'. (see https://amp.dev/documentation/components/amp-consent)
+amp-consent/0.1/test/validator-amp-consent-invalid-no-meta.html:41:6 The tag 'meta name=amp-consent-blocking' is missing or incorrect, but required by 'amp-consent'. (see https://amp.dev/documentation/components/amp-consent)
diff --git a/extensions/amp-consent/OWNERS b/extensions/amp-consent/OWNERS
index e4cb629642c92..2dd17530c4ad2 100644
--- a/extensions/amp-consent/OWNERS
+++ b/extensions/amp-consent/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-consent/amp-consent.md b/extensions/amp-consent/amp-consent.md
index 47aecf37065d2..844535b086262 100644
--- a/extensions/amp-consent/amp-consent.md
+++ b/extensions/amp-consent/amp-consent.md
@@ -29,11 +29,11 @@ limitations under the License.
 
 As a publisher, you can use the `<amp-consent>` component to implement user controls. The component allows you to:
 
-- Determine if the user should be asked to interact with the control.
-- Capture the user’s consent decision.
-- Makes the user’s setting available to elements on the AMP page to modify the page’s behavior.
+-   Determine if the user should be asked to interact with the control.
+-   Capture the user’s consent decision.
+-   Makes the user’s setting available to elements on the AMP page to modify the page’s behavior.
 
-If you are a vendor that wants to customize your component's behavior based on amp-consent, or need to collect more advanced consent information you can read more [here](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/customizing-extension-behaviors-on-consent.md).
+If you are a vendor that wants to customize your component's behavior based on amp-consent, or need to collect more advanced consent information you can read more [here](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/customizing-extension-behaviors-on-consent.md).
 
 ## Usage
 
@@ -41,6 +41,14 @@ Only a single `<amp-consent>` element is allowed on the page, and that element m
 
 If you also include an `<amp-user-notification>` element on the page, the UI associated with the `<amp-consent>` and `<amp-user-notification>` will not be deterministic. Avoid using `<amp-consent>` with `<amp-user-notification>` if this would be problematic.
 
+## Granular and global consent
+
+`<amp-consent>` supports **global consent**, in which users can make a single consent choice for a website. It also supports **granular consent**, allowing users to make a set of choices.
+
+To implement granular consent, define a set of **consent purposes**. Choose a name for each purpose. Create a UI that allows the user to make choices for each, and use the `setPurpose()` action to save each choice.
+
+The other actions that `<amp-consent>` supports apply to both granular and global consent. Thus, a webpage can implement both types simultaneously.
+
 ## Consent configuration
 
 The `<amp-consent>` element requires a JSON configuration object that specifies the extension's behavior.
@@ -59,9 +67,9 @@ Example:
     }
   </script>
   <div id="consent-ui">
-    <button on="tap:consent-element.accept" role="button">Accept</button>
-    <button on="tap:consent-element.reject" role="button">Reject</button>
-    <button on="tap:consent-element.dismiss" role="button">Dismiss</button>
+    <button on="tap:consent-element.accept">Accept</button>
+    <button on="tap:consent-element.reject">Reject</button>
+    <button on="tap:consent-element.dismiss">Dismiss</button>
   </div>
 </amp-consent>
 ```
@@ -118,6 +126,8 @@ AMP expects the response to be a JSON object like the following:
 }
 ```
 
+For granular consent, this response can also contain a map of `purposeConsent` choices.
+
 **Note: The legacy `promptIfUnknown` is migrating to `consentRequired` as prompt is no longer strictly required to manage consents.**
 
 The `consentStateValue` can be thought of as a signal for the runtime to block and unblock components. The value `accepted` instructs AMP that the user has given consent (or doesn't revoke consent in the opt-out case). This can be used to serve personalized ads in some scenarios. The value `rejected` means the user doesn't give consent (or has revoked consent in the opt-out case) and vendors may decide to not serve personalized ads.
@@ -152,6 +162,16 @@ useful when publishers want to use their own server to decide if consent is requ
 
 Note that this value will be ignored if there is previous consent state stored in client cache (see [Client caching](#client-caching) section for examples).
 
+#### purposeConsentRequired
+
+For [granular consent](#granular-and-global-consent), `purposeConsentRequired` lets you specify an array of consent purposes. Until the user has made a choice for each, the [consent UI](#prompt-ui) will appear each time they visit your webpage.
+
+For example, if you want to make sure the user makes a choice for consent purposes you've called `purpose-analytics` and `purpose-marketing`, your JSON would include:
+
+```json
+"purposeConsentRequired": ["purpose-analytics", "purpose-marketing"]
+```
+
 #### onUpdateHref
 
 `onUpdateHref`: Instructs AMP to make a CORS HTTPS POST request with credentials to the specified URL whenever the stored consent state changes.
@@ -176,12 +196,12 @@ The consent decisions collected from user via this prompt UI will be stored in `
 
 `geoOverride` provides a way to utilize the `<amp-geo>` component to detect user's geo location to assist client side decisions.
 
-`geoOverride` is a JSON object keyed by geo group codes which are defined in `<amp-geo>` (details [here](https://github.com/ampproject/amphtml/blob/master/extensions/amp-geo/amp-geo.md)). Each geo override should be a valid `<amp-consent>` config object. AMP will take all the values in the corresponding `geoOverride` to override the existing config. The only exception here is that the `consentInstanceId` cannot be overwritten by `geoOverride` config, because AMP only manage and store consent information in a single instance.
+`geoOverride` is a JSON object keyed by geo group codes which are defined in `<amp-geo>` (details [here](https://github.com/ampproject/amphtml/blob/main/extensions/amp-geo/amp-geo.md)). Each geo override should be a valid `<amp-consent>` config object. AMP will take all the values in the corresponding `geoOverride` to override the existing config. The only exception here is that the `consentInstanceId` cannot be overwritten by `geoOverride` config, because AMP only manage and store consent information in a single instance.
 
 Two important tips when configuring `amp-geo`:
 
-- All geo groups should be mutually exclusive. The behavior is undetermined if a user falls into multiple geo override.
-- Provide an `geoGroupUnknown` override for users that are failed be be identified by `<amp-geo>`.
+-   All geo groups should be mutually exclusive. The behavior is undetermined if a user falls into multiple geo override.
+-   Provide an `geoGroupUnknown` override for users that are failed be be identified by `<amp-geo>`.
 
 Take the following config as an example:
 
@@ -304,16 +324,16 @@ _Example_: Displays a prompt user interface
     }
   </script>
   <div id="consent-ui">
-    <button on="tap:consent-element.accept" role="button">Accept</button>
-    <button on="tap:consent-element.reject" role="button">Reject</button>
-    <button on="tap:consent-element.dismiss" role="button">Dismiss</button>
+    <button on="tap:consent-element.accept">Accept</button>
+    <button on="tap:consent-element.reject">Reject</button>
+    <button on="tap:consent-element.dismiss">Dismiss</button>
   </div>
 </amp-consent>
 ```
 
 AMP displays prompt UI on page load or by user interaction. The prompt UI is hidden based on the three user actions described below.
 
-AMP also supports external consent UI flow with the usage of `<amp-iframe>`. More information about the communication of user actions can be found [below](#prompt-actions-from-external-consent-ui).
+AMP also supports external consent UI flow via `promptUiSrc` which will load your custom iframe. More information about the communication of user actions can be found [here](./integrating-consent.md#Informing-Consent-response).
 
 #### Prompt UI for Stories
 
@@ -327,20 +347,16 @@ _Example_: Displays a prompt user interface on an AMP Story
 <amp-consent layout="nodisplay" id="consent-element">
   <script type="application/json">
     {
-      "consents": {
-        "my-consent": {
-          "checkConsentHref": "https://foo.com/api/show-consent",
-          "promptUI": "consent-ui"
-        }
-      }
+      "checkConsentHref": "https://foo.com/api/show-consent",
+      "promptUI": "consent-ui"
     }
   </script>
   <amp-story-consent id="consent-ui" layout="nodisplay">
     <script type="application/json">
       {
-        “title”: "My title",
-        “message”: "My example message.",
-        “vendors”: ["Item 1", "Item 2", "Item 3", "Item 4"]
+        "title": "My title",
+        "message": "My example message.",
+        "vendors": ["Item 1", "Item 2", "Item 3", "Item 4"]
       }
     </script>
   </amp-story-consent>
@@ -349,38 +365,40 @@ _Example_: Displays a prompt user interface on an AMP Story
 
 #### Prompt Actions
 
-There are three types of user actions that are associated with the consent prompt: `accept`, `reject` and `dismiss`.
+Three user actions apply to both granular and global consent: `accept`, `reject` and `dismiss`.
 
 To enable the user to choose a consent state and hide the prompt UI, add an `on` attribute to a button with the
 following value scheme `on="event:idOfAmpConsentElement.accept/reject/dismiss"`
 
-- `accept`: publisher instructs AMP to remember the accept decision to the consent, unblocks components waiting for the consent, and hides the prompt UI.
+-   `accept`: publisher instructs AMP to remember the accept decision to the consent, unblocks components waiting for the consent, and hides the prompt UI.
+
+-   `reject`: publisher instructs AMP to remember the reject decision to the consent, cancels `buildCallback` (AMP lifecycle callback to [build AMP components](https://github.com/ampproject/amphtml/blob/main/docs/building-an-amp-extension.md#buildcallback)) of components waiting for the consent, and hides the prompt UI.
+
+-   `dismiss`: instruct AMP to cancel `buildCallback` of components waiting for the consent, and hides the prompt UI.
 
-- `reject`: publisher instructs AMP to remember the reject decision to the consent, cancels `buildCallback` (AMP lifecycle callback to [build AMP components](https://github.com/ampproject/amphtml/blob/master/contributing/building-an-amp-extension.md#buildcallback)) of components waiting for the consent, and hides the prompt UI.
+The `setPurpose` action is used in [granular consent](#granular-and-global-consent). You can use it to temporarily store the user's choice for an individual consent purpose. This action takes the form `setPurpose({purpose name}={boolean value})`. Setting a purpose to `true` marks it as accepted; setting it to `false` marks it as rejected.
 
-- `dismiss`: instruct AMP to cancel `buildCallback` of components waiting for the consent, and hides the prompt UI.
+For example, to mark a consent purpose called `performanceCookies` as `true`, you would use
 
-##### Prompt Actions from External Consent UI
+```js
+myConsent.setPurpose(performanceCookies=true)
+```
 
-When using iframes as consent prompt UI. Iframes can send a `consent-response` message to the parent AMP page to inform [prompt actions](#prompt-actions) on the current consent. Note the message must come from the `<amp-iframe>` created iframe. Messages from nested iframes will be ignored.
+The `accept` and `reject` actions, which accept or deny global consent, both save granular consent choices as well. If you pass either of these the argument `(purposeConsentDefault={boolean value})`, any consent purposes for which the user has not made a choice will be assigned that boolean value.
 
-_Example: iframe `consent-response` request_
+For example, the action
 
-```javascript
-window.parent.postMessage(
-  {
-    type: 'consent-response',
-    action: 'accept/reject/dismiss',
-  },
-  '*'
-);
+```js
+myConsent.accept(purposeConsentDefault=false)
 ```
 
-<a name="post-prompt"></a>
+will reject any consent purposes for which the user has not made a choice.
+
+If you don't use `purposeConsentDefault`, any purposes for which the user has not made a choice will remain unset. For this reason, especially when the prompt UI is a form with checkboxes, it's generally recommended that you include this argument.
 
 ### Post-prompt UI (optional)
 
-You can provide a UI after collecting the initial consent. For example, you can provide a UI for the user to manage their consent (e.g., change their "reject" to "accept"). The post-prompt UI is defined with the `<amp-consent>` JSON configuration object. The `postPromptUI` refers to a child element of `<amp-consent>` by id.
+You can provide a UI after collecting the initial consent. For example, you can provide a UI for the user to manage their consent (e.g., change their "reject" to "accept"). The post-prompt UI is defined with the `<amp-consent>` JSON configuration object. The `postPromptUI` refers to an element by id. If the element is a child element of the `<amp-consent>`, it will be fixed to the bottom of the page same as prompt UIs. You can also inline the `postPromptUI` in the document, but please be aware of the potential layout shift caused by toggling the display of this element.
 
 When defined, the post-prompt UI is shown when all prompt UIs have been hidden, or initially on page load if no prompt UI was triggered.
 
@@ -388,12 +406,8 @@ When defined, the post-prompt UI is shown when all prompt UIs have been hidden,
 <amp-consent layout="nodisplay" id="consent-element">
   <script type="application/json">
     {
-      "consents": {
-        "consent-foo": {
-          ...
-          "promptUI": "consent-ui"
-        }
-      },
+      "consentInstanceId": "consent-foo",
+      "promptUI": "consent-ui",
       "postPromptUI": "post-consent-ui"
     }
   </script>
@@ -401,7 +415,7 @@ When defined, the post-prompt UI is shown when all prompt UIs have been hidden,
     ...
   </div>
   <div id="post-consent-ui">
-    <button on="tap:consent-element.dismiss" role="button">Settings</button>
+    <button on="tap:consent-element.dismiss">Settings</button>
   </div>
 </amp-consent>
 ```
@@ -420,13 +434,15 @@ The consent information (from the response or from user action on client side) w
 
 A couple of implications with this behavior:
 
-- When stored user consent no longer applies, the change will be synced through `checkConsentHref` response. But the change will be applied one-time off due to the client cache.
-- When a user travels, `<amp-consent>` will use the stored consent. It's up to the `checkConsentHref` response to erase stored value using `expireCache: true` and `consentRequired: false`.
-- If a promptUI is used to collect user consent. Using `expireCache: true` will prompt consent dialog and block users from content on their following visits.
+-   When stored user consent no longer applies, the change will be synced through `checkConsentHref` response. But the change will be applied one-time off due to the client cache.
+-   When a user travels, `<amp-consent>` will use the stored consent. It's up to the `checkConsentHref` response to erase stored value using `expireCache: true` and `consentRequired: false`.
+-   If a promptUI is used to collect user consent. Using `expireCache: true` will prompt consent dialog and block users from content on their following visits.
+
+`<amp-consent>` stores consent choices in a key called `amp-store:{xxx}`, where `{xxx}` is your domain. The value is base64-encoded JSON.
 
 ### Basic blocking behaviors
 
-To block components, add the `data-block-on-consent` attribute to the AMP component. This ensures that `buildCallback` of the component isn't called until consent has been accepted, or if consent is not required for the user based on the `consentRequired` value. In effect, this means that all behaviors of the element (e.g. sending analytics pings for `<amp-analytics>` or the loading of an `<amp-ad>`) are delayed until the relevant consent instance is accepted.
+In global consent, to block components, either add the `data-block-on-consent` attribute to the AMP component or add the `amp-consent-blocking` meta tag with the list of extensions to be blocked. Note, that if you're using the `type` attribute for CMP integration, you must also include the `amp-consent-blocking` meta tag. This ensures that `buildCallback` of the component isn't called until consent has been accepted, or if consent is not required for the user based on the `consentRequired` value. In effect, this means that all behaviors of the element (e.g. sending analytics pings for `<amp-analytics>` or the loading of an `<amp-ad>`) are delayed until the relevant consent instance is accepted.
 
 Individual components may override this behavior to provide more specialized handling. Please refer to each component's documentation for details.
 
@@ -436,6 +452,18 @@ _Example: Blocking the analytics until user accepts consent_
 <amp-analytics data-block-on-consent type="googleanalytics"> </amp-analytics>
 ```
 
+or
+
+```html
+<meta name="amp-consent-blocking" content="amp-analytics,amp-ad" />
+```
+
+For granular consent, use the `data-block-on-consent-purposes` attribute with a comma-separated list of consent purposes. For example, the following will block an `amp-pixel` component until the user accepts purposes named `performance` and `marketing`:
+
+```html
+<amp-pixel data-block-on-consent-purposes="performance, marketing"></amp-pixel>
+```
+
 ### Advanced predefined consent blocking behaviors
 
 AMP provides a list of pre-defined [consent policy instances](#policy-instance-optional) for publishers to easily define consent blocking behaviors to individual components.
@@ -451,9 +479,9 @@ _Example: Blocking the analytics until user respond to consent_
 
 AMP may support more advanced pre-defined blocking behaviors in the future. Because of this, the value of `data-block-on-consent` is reserved only for the following supported pre-defined attributes:
 
-- `_till_responded` : Unblock the component until the user has responded to the consent prompt, or the consent prompt has been skipped.
-- `_till_accepted` : [Default basic blocking behavior](#basic-blocking-behaviors), expect that when `_till_accepted` is explicitly added, individual components cannot override the blocking behavior.
-- `_auto_reject` : Always reject the consent automatically if consent is required but unknown. The reject consent decision will not be stored. It is recommended not to specify a consent prompt UI when auto rejecting consent for every components.
+-   `_till_responded` : Unblock the component until the user has responded to the consent prompt, or the consent prompt has been skipped.
+-   `_till_accepted` : [Default basic blocking behavior](#basic-blocking-behaviors), expect that when `_till_accepted` is explicitly added, individual components cannot override the blocking behavior.
+-   `_auto_reject` : Always reject the consent automatically if consent is required but unknown. The reject consent decision will not be stored. It is recommended not to specify a consent prompt UI when auto rejecting consent for every components.
 
 When one of the pre-defined attributes is used, AMP assumes that the publisher takes final control on the consent blocking behaviors. Individual components cannot override the blocking behaviors brought by pre-defined consent policy, they can however still customize components' behaviors after having been unblocked.
 
@@ -511,8 +539,8 @@ When used as a single value, `timeout` equals the timeout value in second.
 
 When used as an object. `timeout` object supports two attributes
 
-- `seconds`: timeout value in second
-- `fallbackAction` (optional): the fallback action at timeout if no user action is taken and no state has been stored. The fallback actions supported are `reject` and `dismiss`. Default action is `dismiss` if not configured. Note the consent state changed due to fallback action at timeout will not be stored on client side.
+-   `seconds`: timeout value in second
+-   `fallbackAction` (optional): the fallback action at timeout if no user action is taken and no state has been stored. The fallback actions supported are `reject` and `dismiss`. Default action is `dismiss` if not configured. Note the consent state changed due to fallback action at timeout will not be stored on client side.
 
 ```html
 "default": { "waitFor": { "my-consent": [] }, "timeout": { "seconds": 2,
@@ -523,12 +551,12 @@ When used as an object. `timeout` object supports two attributes
 
 The table below lists the vendors and components that are integrated with amp-consent
 
-| Integration                       | Prod Availability | Documentation                                                                                          | Ready For Testing |
-| --------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | ----------------- |
-| DoubleClick & AdSense Integration | 05/10/18          | [Link](https://support.google.com/dfp_premium/answer/7678538)                                          | Yes               |
-| AMP IMA Video Integration         | 05/15/18          | [Link](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ima-video/consent-blocking.md) | Yes               |
-| AMP Geo                           | 05/10/18          | [Link](https://amp.dev/documentation/examples/user-consent/geolocation-based_consent_flow/)            | Yes               |
-| AMP Stories                       | 05/15/18          | [Link](#prompt-ui-for-stories)                                                                         | Yes               |
+| Integration                       | Prod Availability | Documentation                                                                                        | Ready For Testing |
+| --------------------------------- | ----------------- | ---------------------------------------------------------------------------------------------------- | ----------------- |
+| DoubleClick & AdSense Integration | 05/10/18          | [Link](https://support.google.com/dfp_premium/answer/7678538)                                        | Yes               |
+| AMP IMA Video Integration         | 05/15/18          | [Link](https://github.com/ampproject/amphtml/blob/main/extensions/amp-ima-video/consent-blocking.md) | Yes               |
+| AMP Geo                           | 05/10/18          | [Link](https://amp.dev/documentation/examples/user-consent/geolocation-based_consent_flow/)          | Yes               |
+| AMP Stories                       | 05/15/18          | [Link](#prompt-ui-for-stories)                                                                       | Yes               |
 
 ## FAQs
 
@@ -597,7 +625,7 @@ You should try out the [advanced consent flows](https://amp.dev/documentation/ex
 
 ##### How can I show a persistent UX element for users to update their consent preferences?
 
-You can use the optional [post-prompt UI](#post-prompt) to accomplish this. View this [sample on AMP By Example](https://amp.dev/documentation/examples/user-consent/client_side_user_consent_flow/) for a similar implementation.
+You can use the optional [post-prompt UI](<#post-prompt-ui-(optional)>) to accomplish this. View this [sample on AMP By Example](https://amp.dev/documentation/examples/user-consent/client_side_user_consent_flow/) for a similar implementation.
 
 ##### Can I keep the non-EU experience unchanged and just deliver an "opt-out" experience to all EU users?
 
@@ -617,27 +645,39 @@ You can use the response of `checkConsentHref` to show a consent to the user if
 
 Yes. See example [here](https://amp.dev/documentation/examples/user-consent/geolocation-based_consent_flow/).
 
+##### Does AMP support the IAB TCF?
+
+AMP supports popular transparency consent frameworks including the IAB TCF v1, TCF v2 and the IAB US Privacy String.
+Please check with your consent management platform (CMP) and ad networks on their AMP support. AMP will read and pass the strings passed by the frameworks (IAB TCF v1, TCF v2 and the IAB US Privacy String) when received by CMPs/ad networks.
+
 ##### I can't see feature X being supported, what can I do?
 
 Join in on the discussion where we are discussing [upcoming potential features](https://github.com/ampproject/amphtml/issues/13716#issuecomment-382474345). Please chime in on the thread if something isn't supported yet.
 
 ## Related resources
 
-- Blog post: [New functionality to help manage user choice in AMP pages](https://www.ampproject.org/latest/blog/new-functionality-to-help-manage-user-choice-in-amp-pages/)
-- Blog post: [Dynamic geo-personalization](https://www.ampproject.org/latest/blog/dynamic-geo-personalization/)
-- [`<amp-geo>` documentation](https://amp.dev/documentation/components/amp-geo)
-- [DoubleClick/ AdSense documentation ](https://support.google.com/dfp_premium/answer/7678538#amp-pages)
-- [New feature discussion for amp-consent](https://github.com/ampproject/amphtml/issues/13716#issuecomment-382474345)
+-   Blog post: [New functionality to help manage user choice in AMP pages](https://www.ampproject.org/latest/blog/new-functionality-to-help-manage-user-choice-in-amp-pages/)
+-   Blog post: [Dynamic geo-personalization](https://www.ampproject.org/latest/blog/dynamic-geo-personalization/)
+-   [`<amp-geo>` documentation](https://amp.dev/documentation/components/amp-geo)
+-   [DoubleClick/ AdSense documentation ](https://support.google.com/dfp_premium/answer/7678538#amp-pages)
+-   [New feature discussion for amp-consent](https://github.com/ampproject/amphtml/issues/13716#issuecomment-382474345)
 
 ## Supported Consent Management Platforms
 
-- AppConsent : [Website](https://appconsent.io/en) - [Documentation](./cmps/appconsent.md)
-- Didomi : [Website](https://www.didomi.io/) - [Documentation](https://developers.didomi.io/cmp/amp)
-- Sirdata : [Website](http://www.sirdata.com/) - [Documentation](https://cmp.sirdata.com/#/docs)
-- Marfeel : [Website](https://www.marfeel.com/) - [Documentation](./cmps/marfeel.md)
-- Ogury : [Website](https://www.ogury.com/) - [Documentation](./cmps/ogury.md)
-- opencmp : [Documentation](./cmps/opencmp.md)
-- SourcePoint : [Website](https://www.sourcepoint.com/) - [Documentation](./cmps/sourcepoint.md)
-- Usercentrics : [Website](https://www.usercentrics.com/) - [Documentation](./cmps/usercentrics.md)
-
-- Your Integrated platform here!
+-   AppConsent : [Website](https://appconsent.io/en) - [Documentation](./cmps/appconsent.md)
+-   ConsentManager : [Website](https://www.consentmanager.net/) - [Documentation](https://help.consentmanager.net/books/cmp/page/using-the-cmp-with-amp-websites)
+-   Didomi : [Website](https://www.didomi.io/) - [Documentation](https://developers.didomi.io/cmp/amp)
+-   iubenda : [Website](https://www.iubenda.com/) - [Documentation](./cmps/iubenda.md)
+-   LiveRamp : [Website](https://liveramp.com/our-platform/preference-consent-management/) - [Documentation](./cmps/liveramp.md)
+-   Marfeel : [Website](https://www.marfeel.com/) - [Documentation](./cmps/marfeel.md)
+-   Ogury : [Website](https://www.ogury.com/) - [Documentation](./cmps/ogury.md)
+-   OneTrust: [Website](https://www.onetrust.com/) - [Documentation](./cmps/onetrust.md)
+-   opencmp : [Documentation](./cmps/opencmp.md)
+-   Pubtech : [Website](https://www.pubtech.ai/) - [Documentation](./cmps/pubtech.md)
+-   Quantcast : [Website](https://www.quantcast.com) - [Documentation](https://help.quantcast.com/hc/en-us/categories/360002940873-Quantcast-Choice)
+-   Sirdata : [Website](http://www.sirdata.com/) - [Documentation](https://cmp.sirdata.com/#/docs)
+-   SourcePoint : [Website](https://www.sourcepoint.com/) - [Documentation](./cmps/sourcepoint.md)
+-   UniConsent : [Website](http://www.uniconsent.com/) - [Documentation](./cmps/uniconsent.md)
+-   Usercentrics : [Website](https://www.usercentrics.com/) - [Documentation](./cmps/usercentrics.md)
+
+-   Your Integrated platform here!
diff --git a/extensions/amp-consent/cmps/_ping_.md b/extensions/amp-consent/cmps/_ping_.md
index c95bcaea4a172..bef20a7e2f164 100644
--- a/extensions/amp-consent/cmps/_ping_.md
+++ b/extensions/amp-consent/cmps/_ping_.md
@@ -24,7 +24,6 @@ A fake cmp type that is only used for local development.
 <amp-consent id="ABC" layout="nodisplay" type="_ping_">
   <script type="application/json">
     {
-      "consents": {},
       "postPromptUI": "postPromptUI",
       "clientConfig": {
         "CMP_id": "test_id",
@@ -34,7 +33,7 @@ A fake cmp type that is only used for local development.
   </script>
   <div id="postPromptUI">
     Post Prompt UI
-    <button on="tap:ABC.prompt(consent=_ping_)" role="button">Manage</button>
+    <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
   </div>
 </amp-consent>
 ```
diff --git a/extensions/amp-consent/cmps/appconsent.md b/extensions/amp-consent/cmps/appconsent.md
index c0b8f6b943d79..e9f56deaaffc5 100644
--- a/extensions/amp-consent/cmps/appconsent.md
+++ b/extensions/amp-consent/cmps/appconsent.md
@@ -32,7 +32,7 @@ CMP used through AppConsent platform in order to handle and enforce user consent
   </script>
   <div id="postPromptUI">
     Post Prompt UI
-    <button on="tap:ABC.prompt(consent=appconsent)" role="button">
+    <button on="tap:ABC.prompt(consent=appconsent)">
       Manage
     </button>
   </div>
diff --git a/extensions/amp-consent/cmps/consentmanager.md b/extensions/amp-consent/cmps/consentmanager.md
new file mode 100644
index 0000000000000..f256b12d84fa0
--- /dev/null
+++ b/extensions/amp-consent/cmps/consentmanager.md
@@ -0,0 +1,50 @@
+<!---
+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.
+-->
+
+# ConsentManager
+
+Collect and enforce user consent with the ConsentManager CMP. Login to your ConsentManager.net account in order to create a CMP.
+
+## Example
+
+```html
+<amp-consent id="ConsentManager" layout="nodisplay" type="ConsentManager">
+  <script type="application/json">
+    {
+      "postPromptUI": "postPromptUI",
+      "clientConfig": {
+        "id": "your CMP ID",
+        "params": "optional configuration parameters"
+      }
+    }
+  </script>
+  <div id="postPromptUI">
+    Post Prompt UI
+    <button on="tap:consent.prompt(consent=ConsentManager)">
+      Manage
+    </button>
+  </div>
+</amp-consent>
+```
+
+## Configuration
+
+| Attribute |  Type  | Mandatory | Description                                                                    |
+| --------- | :----: | :-------: | ------------------------------------------------------------------------------ |
+| id        | String |    yes    | Your ConsentManager CMP ID. Can be found in your account under Menu > Get Code |
+| params    | String |    no     | Additional parameters that can be used in order to configure the CMP layout    |
+
+Visit the [ConsentManager Website](https://www.consentmanager.net/) and our [Documentation](https://help.consentmanager.net/books/cmp/page/using-the-cmp-with-amp-websites) for more information.
diff --git a/extensions/amp-consent/cmps/didomi.md b/extensions/amp-consent/cmps/didomi.md
index 3ee69531cd15c..8e06948c8f4fa 100644
--- a/extensions/amp-consent/cmps/didomi.md
+++ b/extensions/amp-consent/cmps/didomi.md
@@ -30,7 +30,7 @@ Collect and enforce user consent with the Didomi Consent Management Platform. Us
   </script>
   <div id="postPromptUI">
     Post Prompt UI
-    <button on="tap:didomi.prompt(consent=didomi)" role="button">Manage</button>
+    <button on="tap:didomi.prompt(consent=didomi)">Manage</button>
   </div>
 </amp-consent>
 ```
diff --git a/extensions/amp-consent/cmps/iubenda.md b/extensions/amp-consent/cmps/iubenda.md
new file mode 100644
index 0000000000000..a02c64d2d6207
--- /dev/null
+++ b/extensions/amp-consent/cmps/iubenda.md
@@ -0,0 +1,43 @@
+<!---
+Copyright 2020 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.
+-->
+
+# iubenda
+
+iubenda makes your sites & apps legally compliant across multiple languages and legislations (including the GDPR) with lawyer-crafted, self-updating solutions. [Read our guide](https://www.iubenda.com/en/help/22135-cookie-solution-amp) to integrate our Cookie Solution in your AMP pages.
+
+## Example
+
+```html
+<amp-consent id="iubenda" layout="nodisplay" type="iubenda">
+  <script type="application/json">
+    {
+      "promptUISrc": "https://cdn.iubenda.com/cs/test/cs-for-amp.html",
+      "postPromptUI": "iubendaPostPromptUI"
+    }
+  </script>
+  <div id="iubendaPostPromptUI">
+    Post Prompt UI
+    <button on="tap:iubenda.prompt(consent=iubenda)">
+      Manage
+    </button>
+  </div>
+</amp-consent>
+```
+
+## Contacts for future maintenance
+
+@Facens
+@Vasile-Peste
diff --git a/extensions/amp-consent/cmps/liveramp.md b/extensions/amp-consent/cmps/liveramp.md
new file mode 100644
index 0000000000000..fc0f8cc93caf9
--- /dev/null
+++ b/extensions/amp-consent/cmps/liveramp.md
@@ -0,0 +1,64 @@
+<!---
+Copyright 2020 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.
+-->
+
+# LiveRamp
+
+## Example
+
+```html
+<amp-consent id="consent" layout="nodisplay" type="LiveRamp">
+  <script type="application/json">
+    {
+      "postPromptUI": "post-consent-ui",
+      "clientConfig": {
+          "appId": "c65a09d5-eda1-4eef-bf38-90e73059f4d6"
+      },
+      "uiConfig": {
+        "overlay": true
+      }
+    }
+  </script>
+    <div id="post-consent-ui" tabindex="0" role="button" on="tap:consent.prompt(consent=LiveRamp)"
+      style="display: flex; width: 40px; height: 40px; justify-content: center; align-items: center; cursor: pointer; margin: 0 0 10px 10px;
+      float: left; border-radius: 25px; background-color: #ffffff">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100">
+        <path fill="#ff0a0a"
+          d="M68.884 25.318c-6.503-3.34-12.126-4.757-18.867-4.757-6.706 0-13.074 1.586-18.866 4.757-.813.439-1.83.135-2.303-.674-.44-.81-.136-1.856.677-2.295 6.3-3.407 13.21-5.162 20.492-5.162 7.215 0 13.515 1.586 20.425 5.129.847.438 1.152 1.45.711 2.26-.304.607-.88.945-1.49.945-.27 0-.542-.068-.779-.203zm-47.895 16.87c-.341 0-.683-.098-.99-.293-.786-.521-.956-1.53-.41-2.28 3.38-4.556 7.684-8.137 12.806-10.644 10.724-5.273 24.452-5.306 35.21-.032 5.122 2.506 9.425 6.055 12.806 10.58.546.715.376 1.757-.41 2.278-.785.52-1.844.358-2.39-.39-3.074-4.102-6.967-7.325-11.577-9.571-9.802-4.785-22.335-4.785-32.102.033-4.644 2.278-8.537 5.533-11.611 9.635-.273.456-.785.684-1.332.684zm22.028 38.541c-.449 0-.897-.162-1.208-.487-3.002-2.823-4.624-4.64-6.936-8.566-2.38-3.991-3.623-8.858-3.623-14.082 0-9.637 8.765-17.49 19.531-17.49 10.767 0 19.532 7.853 19.532 17.49 0 .908-.76 1.622-1.726 1.622s-1.725-.714-1.725-1.622c0-7.853-7.212-14.245-16.08-14.245-8.87 0-16.081 6.392-16.081 14.245 0 4.672 1.104 8.988 3.209 12.492 2.208 3.732 3.727 5.322 6.384 7.853.655.649.655 1.654 0 2.303-.38.325-.828.487-1.277.487zm23.652-5.208c-4.185 0-7.878-1-10.903-2.967-5.24-3.368-8.37-8.836-8.37-14.637 0-.934.774-1.667 1.758-1.667.985 0 1.759.733 1.759 1.667 0 4.701 2.532 9.135 6.823 11.87 2.497 1.6 5.416 2.366 8.933 2.366.844 0 2.25-.1 3.658-.333.95-.167 1.864.433 2.04 1.367.175.9-.458 1.767-1.442 1.934-2.005.366-3.764.4-4.256.4zm-6.157 7.291c-.137 0-.308-.032-.445-.065-5.44-1.45-8.999-3.393-12.728-6.917-4.79-4.579-7.425-10.672-7.425-17.194 0-5.336 4.722-9.684 10.538-9.684 5.817 0 10.539 4.348 10.539 9.684 0 3.524 3.182 6.39 7.117 6.39 3.934 0 7.116-2.866 7.116-6.39 0-12.418-11.12-22.497-24.806-22.497-9.717 0-18.613 5.204-22.616 13.274-1.335 2.668-2.019 5.797-2.019 9.223 0 2.57.24 6.62 2.293 11.89.342.857-.103 1.812-.993 2.109-.89.329-1.882-.132-2.19-.956-1.676-4.314-2.497-8.596-2.497-13.043 0-3.953.787-7.543 2.326-10.672 4.551-9.19 14.645-15.151 25.696-15.151 15.568 0 28.228 11.56 28.228 25.79 0 5.336-4.722 9.684-10.538 9.684-5.817 0-10.539-4.348-10.539-9.684 0-3.524-3.182-6.39-7.117-6.39-3.934 0-7.116 2.866-7.116 6.39 0 5.632 2.258 10.903 6.398 14.855 3.25 3.096 6.364 4.809 11.188 6.094.924.23 1.437 1.152 1.198 2.009-.171.757-.89 1.251-1.608 1.251z" />
+      </svg>
+    </div>
+</amp-consent>
+```
+
+## Notes
+
+### `postPromptUI`
+
+The value of `postPromptUI` should be the id of the html tag in which the consent ui will be attached to. In our example above, the value of `postPromptUI` is `post-consent-ui` since we have a div with that id.
+
+### Toggle Privacy Manager
+
+Notice in the example above, we have a `button` with the attribute `on="tap.consent.prompt(consent=LiveRamp)"`. The id of your `<amp-consent>` element is relevant here. Notice how the id of our `<amp-consent>` is `consent`, that's why the `on` attribute has the value "tap.**myUserConsent**.prompt(consent=LiveRamp)". This button is required by IAB TCF 2.x policy, but the button styling and position can be changed.
+
+## Configuration (`clientConfig`)
+
+| Attribute |  Type   | Mandatory | Description                                                                           |
+| --------- | :-----: | :-------: | ------------------------------------------------------------------------------------- |
+| appId     | String  |    yes    | This your app id and can be found in your LiveRamp Console Configuration.             |
+| overlay   | boolean |    no     | Controls whether the site content should be blocked when the Privacy Notice is shown. |
+
+## Getting Help
+
+For more information on how to integrate AMP to your page please visit our [support portal](http://launch.liveramp.com) or contact your technical account manager directly.
diff --git a/extensions/amp-consent/cmps/marfeel.md b/extensions/amp-consent/cmps/marfeel.md
index 8e4da884444b3..3d85fbe66d3ff 100644
--- a/extensions/amp-consent/cmps/marfeel.md
+++ b/extensions/amp-consent/cmps/marfeel.md
@@ -33,7 +33,7 @@ CMP used through Marfeel platform in order to handle and enforce user consent.
   </script>
   <div id="postPromptUI">
     Post Prompt UI
-    <button on="tap:consent.prompt(consent=Marfeel)" role="button">
+    <button on="tap:consent.prompt(consent=Marfeel)">
       Manage
     </button>
   </div>
diff --git a/extensions/amp-consent/cmps/ogury.md b/extensions/amp-consent/cmps/ogury.md
index 4dac910568e77..1ba8025933a16 100644
--- a/extensions/amp-consent/cmps/ogury.md
+++ b/extensions/amp-consent/cmps/ogury.md
@@ -35,7 +35,7 @@ limitations under the License.
   </script>
   <div id="custom-prompt-ui">
     Post Prompt UI
-    <button on="tap:ogury.prompt(consent=Ogury)" role="button">
+    <button on="tap:ogury.prompt(consent=Ogury)">
       Privacy Settings
     </button>
   </div>
diff --git a/extensions/amp-consent/cmps/onetrust.md b/extensions/amp-consent/cmps/onetrust.md
new file mode 100644
index 0000000000000..455612eedd3c2
--- /dev/null
+++ b/extensions/amp-consent/cmps/onetrust.md
@@ -0,0 +1,62 @@
+<!---
+Copyright 2020 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.
+-->
+
+# OneTrust
+
+## Example
+
+```html
+<amp-consent id="consent" layout="nodisplay" type="onetrust">
+  <script type="application/json">
+    {
+      "postPromptUI": "onetrust-consent-prompt-ui",
+      "clientConfig": {
+        "CMP_id": "ac6c1ea9-9ac8-460e-a132-b328dea3f56f-test",
+        "Env": "App",
+        "Opt_Out": "C0004"
+      }
+    }
+  </script>
+  <div id="onetrust-consent-prompt-ui">
+    Post Prompt UI
+    <button on="tap:consent.prompt(consent=onetrust)">
+      Privacy Settings
+    </button>
+  </div>
+</amp-consent>
+```
+
+## Notes
+
+### `postPromptUI`
+
+The value of `postPromptUI` should be the id of the html tag in which the consent ui will be attached to. In our example above, the value of `postPromptUI` is `onetrust-consent-prompt-ui` since we have a div with that id.
+
+### Opening the Preference Center
+
+Notice in the example above, we have a `button` with the attribute `on="tap.consent.prompt(consent=onetrust)"` with the text "Privacy Settings". The id of your `<amp-consent>` element is relevant here. Notice how the id of our `<amp-consent>` is `consent`, that's why the `on` attribute has the value "tap.**consent**.prompt(consent=onetrust)". This button is required if using IAB TCF 2.0, but the button text and position can be changed.
+
+## Configuration (`clientConfig`)
+
+| Attribute |  Type  | Mandatory | Description                                                                                                                                                                                                |
+| --------- | :----: | :-------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| CMP_id    | String |    yes    | This your domain script ID, if can be found in the data-domain-script attribute of your script tag.                                                                                                        |
+| Env       | String |    yes    | This is the environment of where your OneTrust account is hosted. This affects which domain your script is being served from. Options include: "App", "App-eu", "App-de", "App-uk", "CookiePro"            |
+| Opt_Out   | String |    Yes    | This indicates which cookie category id should be used to return a rejection or acceptance to AMP. Recommend using your Targeting Ads category, which has a default id of C0004 (your id may be different) |
+
+## Getting Help
+
+For more information on how to integrate AMP to your page please visit our [support portal](http://my.onetrust.com/) or contact your technical account manager directly.
diff --git a/extensions/amp-consent/cmps/opencmp.md b/extensions/amp-consent/cmps/opencmp.md
index 345a71e29f7e1..cf2c2faafe703 100644
--- a/extensions/amp-consent/cmps/opencmp.md
+++ b/extensions/amp-consent/cmps/opencmp.md
@@ -27,7 +27,7 @@ limitations under the License.
   </script>
   <div id="opencmp-consent-prompt-ui">
     Post Prompt UI
-    <button on="tap:consent.prompt(consent=opencmp)" role="button">
+    <button on="tap:consent.prompt(consent=opencmp)">
       Privacy Settings
     </button>
   </div>
diff --git a/extensions/amp-consent/cmps/pubtech.md b/extensions/amp-consent/cmps/pubtech.md
new file mode 100644
index 0000000000000..917bde667a16c
--- /dev/null
+++ b/extensions/amp-consent/cmps/pubtech.md
@@ -0,0 +1,51 @@
+<!---
+Copyright 2021 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.
+-->
+
+# Pubtech
+
+## Example
+
+```html
+    <amp-consent id="pubtech" layout="nodisplay" type="pubtech">
+        <script type="application/json">
+          {
+            "postPromptUI": "pubtech-post-prompt",
+            "clientConfig": {
+              "privacyUrl": "",
+              "isAmp": true,
+              "websiteName": "Pubtech"
+            }
+          }
+        </script>
+        <div id="pubtech-post-prompt">
+          <button on="tap:consent.prompt(consent=pubtech)">Privacy settings</button>
+        </div>
+    </amp-consent>
+```
+
+## Notes
+
+### `postPromptUI`
+
+The value of `postPromptUI` should be the id of the html tag in which the consent ui will be attached to. In our example above, the value of `postPromptUI` is `pubtech-post-prompt` since we have a div with that id.
+
+## Configuration
+
+Visit the [CMP Section](https://www.pubtech.ai/) to get a full description of our configuration options.
+
+## Getting Help
+
+For more information on how to integrate our CMP AMP to your page please contact your account manager directly.
diff --git a/extensions/amp-consent/cmps/quantcast.md b/extensions/amp-consent/cmps/quantcast.md
new file mode 100644
index 0000000000000..21ba7a206009e
--- /dev/null
+++ b/extensions/amp-consent/cmps/quantcast.md
@@ -0,0 +1,51 @@
+<!---
+Copyright 2020 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.
+-->
+
+# Quantcast
+
+## Example
+
+```html
+    <amp-consent id="quantcast" layout="nodisplay" type="quantcast">
+        <script type="application/json">
+          {
+            "postPromptUI": "quantcast-post-prompt",
+            "clientConfig": {
+              "coreConfig": {
+                "googleEnabled": true
+              }
+            }
+          }
+        </script>
+        <div id="quantcast-post-prompt">
+          <button on="tap:consent.prompt(consent=quantcast)">Privacy settings</button>
+        </div>
+    </amp-consent>
+```
+
+## Notes
+
+### `postPromptUI`
+
+The value of `postPromptUI` should be the id of the html tag in which the consent ui will be attached to. In our example above, the value of `postPromptUI` is `quantcast-post-prompt` since we have a div with that id.
+
+## Configuration
+
+Visit the [Privacy Portal](https://www.quantcast.com/protect/sites) to get a tag with your latest configuration.
+
+## Getting Help
+
+For more information on how to integrate AMP to your page please visit our [help portal](https://help.quantcast.com/hc/en-us/categories/360002940873-Quantcast-Choice) or contact your account manager directly.
diff --git a/extensions/amp-consent/cmps/sirdata.md b/extensions/amp-consent/cmps/sirdata.md
index 72a3f6bef12b6..e3e56e03aeb7c 100644
--- a/extensions/amp-consent/cmps/sirdata.md
+++ b/extensions/amp-consent/cmps/sirdata.md
@@ -36,7 +36,7 @@ Collects user consent with Sirdata CMP.
   </script>
   <div id="promptConsentUI">
     Post Prompt UI
-    <button on="tap:consent.prompt(consent=sirdata)" role="button">
+    <button on="tap:consent.prompt(consent=sirdata)">
       Privacy settings
     </button>
   </div>
diff --git a/extensions/amp-consent/cmps/sourcepoint.md b/extensions/amp-consent/cmps/sourcepoint.md
index 155b9ef1e2b27..952117c1b7bc9 100644
--- a/extensions/amp-consent/cmps/sourcepoint.md
+++ b/extensions/amp-consent/cmps/sourcepoint.md
@@ -38,7 +38,7 @@ limitations under the License.
   </script>
   <div id="my-consent-prompt-ui">
     Post Prompt UI
-    <button on="tap:consent.prompt(consent=SourcePoint)" role="button">
+    <button on="tap:consent.prompt(consent=SourcePoint)">
       Privacy Settings
     </button>
   </div>
diff --git a/extensions/amp-consent/cmps/uniconsent.md b/extensions/amp-consent/cmps/uniconsent.md
new file mode 100644
index 0000000000000..403a04ca0c8b0
--- /dev/null
+++ b/extensions/amp-consent/cmps/uniconsent.md
@@ -0,0 +1,53 @@
+<!---
+Copyright 2020 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.
+-->
+
+# UniConsent
+
+Collect and manage user consent with UniConsent CMP.
+
+## Example
+
+```html
+<amp-consent id="uniconsent" layout="nodisplay" type="UniConsent">
+  <script type="application/json">
+    {
+      "postPromptUI": "post-consent-ui",
+      "clientConfig": {
+        "id": "8d3a00eb37"
+      },
+      "uiConfig": {
+        "overlay": true
+      }
+    }
+  </script>
+
+  <div id="post-consent-ui" tabindex="0" role="button" on="tap:uniconsent.prompt(consent=UniConsent)" style="display: flex; width: 40px; height: 40px; justify-content: center; align-items: center; cursor: pointer; margin: 0 0 10px 10px;float: left; border-radius: 25px; background-image: linear-gradient(37deg,#c7c7c7,#e0e0e0);">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 80 80"><g xmlns="http://www.w3.org/2000/svg"><path d="M34,0 C34,0 23.6964545,11.1724138 0,11.1724138 L0,37.8256034 C0,51.7436379 6.68872727,65.1658966 18.7989091,73.7658621 C23.0844545,76.8103448 28.1396364,79.4288793 34,81 C39.8603636,79.4288793 44.914,76.8103448 49.2010909,73.7658621 C61.3112727,65.1658966 68,51.7436379 68,37.8256034 L68,11.1724138 C44.3035455,11.1724138 34,0 34,0 Z" id="Shape" fill="#556080" fill-rule="nonzero"></path> <path d="M33.5,72 C30.2491562,70.8407063 27.1024375,69.1817891 24.1165,67.0482991 C14.6503125,60.2873765 9,49.3527184 9,37.797358 L9,19.0691292 C20.3174687,17.7567475 28.3534687,14.1786635 33.5,11 C38.6465312,14.1786635 46.6825312,17.7567475 58,19.0691292 L58,37.797358 C58,49.3527184 52.3496875,60.2873765 42.8850312,67.0482991 C39.8975625,69.1817891 36.7508438,70.8407063 33.5,72 Z" id="Shape" fill="#4FBA6F" fill-rule="nonzero"></path> <path d="M52.4745773,28.3573401 C51.8332457,27.8315443 50.8604567,27.8936575 50.2992916,28.4931226 L29.799806,50.4422109 L18.6320032,39.9782954 C18.0292132,39.4134982 17.0548825,39.4134982 16.4520925,39.9782954 C15.8493025,40.5430927 15.8493025,41.4560129 16.4520925,42.0208102 L28.7853921,53.5767632 C29.0752247,53.8483281 29.4668069,54 29.8753475,54 C29.8923058,54 29.909264,54 29.9262223,54 C30.3532628,53.9869996 30.7540951,53.8078823 31.0346776,53.5074275 L52.6179519,30.3955214 C53.1791171,29.7946118 53.1143672,28.8816915 52.4745773,28.3573401 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path></g></svg>
+  </div>
+</amp-consent>
+```
+
+## Configuration (`clientConfig`)
+
+| Attribute |  Type  | Mandatory | Description                                  |
+| --------- | :----: | :-------: | -------------------------------------------- |
+| id        | String |    yes    | Settings id, provided via UniConsent Console |
+
+In order to retrieve your settings id, please use the [UniConsent Console](https://www.uniconsent.com/).
+
+## Support
+
+Please get in contact with [UniConsent](https://www.uniconsent.com/) support team if you need further support.
diff --git a/extensions/amp-consent/cmps/usercentrics.md b/extensions/amp-consent/cmps/usercentrics.md
index 7250b0922ad6a..4b59635174fda 100644
--- a/extensions/amp-consent/cmps/usercentrics.md
+++ b/extensions/amp-consent/cmps/usercentrics.md
@@ -32,7 +32,7 @@ Collect user consent with Usercentrics CMP.
   </script>
   <div id="postPromptUI">
     Post Prompt UI
-    <button on="tap:consent.prompt(consent=Usercentrics)" role="button">
+    <button on="tap:consent.prompt(consent=Usercentrics)">
       Manage
     </button>
   </div>
diff --git a/extensions/amp-consent/customizing-extension-behaviors-on-consent.md b/extensions/amp-consent/customizing-extension-behaviors-on-consent.md
index 91f3527763727..e0f47d3a6484a 100644
--- a/extensions/amp-consent/customizing-extension-behaviors-on-consent.md
+++ b/extensions/amp-consent/customizing-extension-behaviors-on-consent.md
@@ -24,7 +24,7 @@ getConsentPolicy() {
 }
 ```
 
-**Note**: Currently, only the 'default' consent policy is supported.
+Note: Currently, only the `default` consent policy is supported.
 
 ## Advanced blocking behaviors
 
@@ -32,30 +32,39 @@ getConsentPolicy() {
 
 AMP provides the consent state information for vendors to customize their behavior based on user control.
 
-The state has the following valid values.
+This is `null` when no `<amp-consent>` tag is included. Otherwise, its value is one of [`CONSENT_POLICY_STATE`](../../src/core/constants/consent-state.js):
 
-- `null` : no `<amp-consent>` is included
-- `CONSENT_POLICY_STATE.UNKNOWN` : The consent state is unknown
-- `CONSENT_POLICY_STATE.SUFFICIENT` : The consent is accepted
-- `CONSENT_POLICY_STATE.INSUFFICIENT` : The consent is rejected
-- `CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED` : The consent state is unknown, and `<amp-consent>` is informed to not prompt UI.
+-   `SUFFICIENT` (`1`): Consent is granted
+-   `INSUFFICIENT` (`2`): Consent is not granted
+-   `UNKNOWN_NOT_REQUIRED` (`3`): Consent is unknown, and `<amp-consent>` is informed to not prompt UI.
+-   `UNKNOWN` (`4`): Consent is unknown
 
 #### If you integrate with AMP as a first party AMP extension
 
-Use the `getConsentPolicyState` API. It returns a promise with one of the `CONSENT_POLICY_STATE` value.
+Use the `getConsentPolicyState` API. It returns a promise with one of the valid `CONSENT_POLICY_STATE` values.
 
 #### If you integrate with AMP as a third party ad vendor
 
-Access the value within the ad iframe using `window.context.initialConsentState`. Check [this](https://github.com/ampproject/amphtml/blob/master/ads/README.md#amp-consent-integration) for more details.
+Access the value within the ad iframe using `window.context.initialConsentState`. Check [this](https://github.com/ampproject/amphtml/blob/main/ads/README.md#amp-consent-integration) for more details.
 
 #### If you integrate with AMP as an analytics vendor
 
-Get the value using `CONSENT_STATE` macro, or `${consentState}`. A request with the varaible will only be sent out after the state has resolved to one of the above state.
+Get the value using `CONSENT_STATE` macro, or `${consentState}`. A request with the variable will only be sent out after the state has resolved to one of the above state.
+
+#### If you integrate with AMP through an iframe.
+
+To get consent data from the host:
+
+-   Documents loaded by `<amp-iframe>` [may post a `send-consent-data` message](https://amp.dev/documentation/components/amp-iframe/#iframe-&-consent-data).
+
+-   Documents loaded by `<amp-video-iframe>` [may use the `getConsentData` method](<https://amp.dev/documentation/components/amp-video-iframe/#getconsentdata()>).
+
+-   Third party video extensions (like `<amp-youtube>`) can use utilities like `getConsentPolicyInfo`.
 
 ### On Consent String
 
 AMP collects raw consent string value from `checkConsentHref` endpoint or from the CMP. The it passes the raw consent string to vendors without modification.
-It is then up to the vendor to intepret the string and customize behavior accordingly. AMP recommends handling the string on the server side.
+It is then up to the vendor to interpret the string and customize behavior accordingly. AMP recommends handling the string on the server side.
 
 AMP will always pass the local stored consent string if there's one. Update to the string will only be reflected the next page load.
 
@@ -63,10 +72,27 @@ AMP will always pass the local stored consent string if there's one. Update to t
 
 Use the `getConsentPolicyInfo` API. `getConsentPolicyInfo` returns a promise with the raw consent string value.
 
-Ways to get the consent string for ad/analytics vendors coming soon.
+#### If you integrate with AMP as an analytics vendor
+
+Get the value using `CONSENT_STRING` macro, or `${consentString}`. A request with the variable will only be sent out after the consent policy has resolved and the stored consent string (if any) will be returned.
 
 ### On Related Information
 
 In addition to the consent state and consent string, AMP extensions can also use the
 `getConsentPolicySharedData` API to receive additional consent related information about
-the user from the page owner. See [this](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md#response) for details about the `shareData`.
+the user from the page owner. See [this](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md#response) for details about the `shareData`.
+
+### On Consent Metadata
+
+In addition to the consent state and consent string, AMP extensions can also use the `getConsentMetadata` to receive additional consent metadata information AMP receives from `checkConsentHref` or the CMP.
+
+Similar to the consent string, AMP will always pass the local stored consent metadata object if there's one. Update will only be reflected on the next page load. Below is an example `consentMetadata` object and its supported fields.
+
+```
+{
+  "consentStringType": {enum} [CONSENT_STRING_TYPE.TCF_V1, CONSENT_STRING_TYPE.TCF_V2, CONSENT_STRING_TYPE.US_PRIVACY_STRING] (optional),
+  "gdprApplies": {boolean} (optional),
+  "additionalConsent": {string} (optional),
+  "purposeOne": {boolean} (optional)
+}
+```
diff --git a/extensions/amp-consent/integrating-consent.md b/extensions/amp-consent/integrating-consent.md
index 62b71b9f9b049..9b5badd68b521 100644
--- a/extensions/amp-consent/integrating-consent.md
+++ b/extensions/amp-consent/integrating-consent.md
@@ -8,20 +8,19 @@ To enable customers to operate a CMP to manage their user consents in AMPHTML pa
 
 To add your consent management service to AMP runtime, it is expected that you:
 
-- Set the remote endpoint to handle requests from AMP. This determines if user consent is required.
-- Make sure the prompted consent collecting page communicates well with the AMP runtime using the provided APIs.
-- [Add your consent configuration](#adding-your-configuration-to-amp) to the AMP code base.
-- Meet the restrictions that the AMP runtime applies to ensure a good user experience. These includes
-  - Enforce the size of the consent prompt. The only two allowed sizes are the initial size (`width: 100vw`, `height: 30vh`), and the full screen size (`width: 100vw`, `height: 100%`) after user interactions.
-  - A default placeholder will be displayed before the consent prompt iframe is ready.
-  - Enforce the size of the stored consent information. 1024 character length is the limit. Please [file an issue](https://github.com/ampproject/amphtml/issues/new) if you find that not sufficient.
-- Understand that including `<amp-consent type='yourName'></amp-consent>` on the page won't block any components by default. **Please make sure to inform your service users to block AMP components either by the `<meta name="amp-consent-blocking">` metaTag, or the `data-block-on-consent` attribute.**
-- Understand that AMP Consent doesn't attempt to interpret the consent info string from the CMP. Vendors can access the consent info string from CMPs via [provided APIs](https://github.com/ampproject/amphtml/blob/master/ads/README.md#amp-consent-integration). It's up to the CMP and service provider vendors to agree on the format of the consent info string.
-- Create an [Intent-To-Implement issue](../../CONTRIBUTING.md#contributing-features) stating that you'll be adding support to your CMP service to AMP. A great start point is to follow the `_ping_` CMP service implementation that the AMP team creates for testing purpose.
+-   Set the remote endpoint to handle requests from AMP. This determines if user consent is required.
+-   Make sure the prompted consent collecting page communicates well with the AMP runtime using the provided APIs.
+-   [Add your consent configuration](#adding-your-configuration-to-amp) to the AMP code base.
+-   Meet the restrictions that the AMP runtime applies to ensure a good user experience. These includes
+    -   Enforce the size of the consent prompt. The only two allowed sizes are the initial size (`width: 100vw`, `height: 30vh`), and the full screen size (`width: 100vw`, `height: 100%`) after user interactions.
+    -   A default placeholder will be displayed before the consent prompt iframe is ready.
+-   Understand that including `<amp-consent type='yourName'></amp-consent>` on the page won't block any components by default. **Please make sure to inform your service users to block AMP components either by the `<meta name="amp-consent-blocking">` metaTag, or the `data-block-on-consent` attribute.**
+-   Understand that AMP Consent doesn't attempt to interpret the consent info string from the CMP. Vendors can access the consent info string from CMPs via [provided APIs](https://github.com/ampproject/amphtml/blob/main/ads/README.md#amp-consent-integration). It's up to the CMP and service provider vendors to agree on the format of the consent info string.
+-   Create an [Intent-To-Implement issue](../../docs/contributing.md#contributing-features) stating that you'll be adding support to your CMP service to AMP. A great start point is to follow the `_ping_` CMP service implementation that the AMP team creates for testing purpose.
 
 ## Add remote endpoint support
 
-A remote endpoint is expected to tell the AMP runtime whether the user consent is required. It can also pass extra information via AMP to third party vendors. More information on the remote endpoint can be found [here](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md#checkconsenthref).
+A remote endpoint is expected to tell the AMP runtime whether the user consent is required. It can also pass extra information via AMP to third party vendors. More information on the remote endpoint can be found [here](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md#checkconsenthref).
 
 ## Prompt UI Iframe
 
@@ -40,6 +39,8 @@ window.parent.postMessage(
   {
     type: 'consent-ui',
     action: 'ready',
+    initialHeight: (optional string, default `30vh`),
+    enableBorder: (optional boolean, default true),
   },
   '*'
 );
@@ -47,6 +48,10 @@ window.parent.postMessage(
 
 Action `'ready'` informs the AMP runtime to hide the placeholder and show the consent prompt instead.
 
+The `initialHeight` property is used to set the size of consent prompt. Valid values are `30vh` to `80vh`. A valid value below `60vh` (inclusive) will result in amp-consent rendering the consent dialog as a bottom sheet, and a valid value above `60vh` will style the consent prompt as a modal.
+
+The `enableBorder` property determines if the top corners of the consent prompt will be rounded for consent prompts that have an `initialHeight` less than or equal to `60vh`.
+
 ##### enter-fullscreen
 
 ```javascript
@@ -73,11 +78,11 @@ Action `'enter-fullscreen'` requests the AMP runtime to expand the iframe to ful
 
 #### Informing Consent response
 
-Iframes can send a `consent-response` message to the parent AMP page to inform the user [actions](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md#prompt-actions) along with additional consent information.
+Iframes can send a `consent-response` message to the parent AMP page to inform the user [actions](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md#prompt-actions) along with additional consent information.
 
-- The user action is always required by AMP runtime. It allows the user to block/unblock any AMP component by user consent, not only components that read the additional consent information string.
+-   The user action is always required by AMP runtime. It allows the user to block/unblock any AMP component by user consent, not only components that read the additional consent information string.
 
-* If the user action value equals to `accept` or `reject`. AMP will strictly respect the incoming `info` value. If the `info` value is undefined, any previously value will be discarded.
+*   If the user action value equals to `accept` or `reject`. AMP will strictly respect the incoming `info` value. If the `info` value is undefined, any previously value will be discarded.
 
 ##### accept
 
@@ -87,6 +92,7 @@ window.parent.postMessage(
     type: 'consent-response',
     action: 'accept',
     info: /string/ /* optional */,
+    consentMetadata: /object/ /* optional */,
   },
   '*'
 );
@@ -102,6 +108,7 @@ window.parent.postMessage(
     type: 'consent-response',
     action: 'reject',
     info: /string/ /* optional */,
+    consentMetadata: /object/ /* optional */,
   },
   '*'
 );
@@ -127,9 +134,9 @@ The user action `dismiss` informs AMP runtime that no info on user consent has b
 
 When the iframe is created, the following information will be passed to the iframe via the name attribute.
 
-- `clientConfig`: The configuration from the publisher
-- `consentStateValue`: The stored consent state if there's any. The value will be `'accepted'/'rejected'/'unknown'`. A friendly reminder is to be aware of the difference between the consent state string value (`'accepted'/'rejected'/'unknown'`) and the user action string value (`'accept'/'reject'/'dismiss'`).
-- `consentString`: The stored consent info string if there's any.
+-   `clientConfig`: The configuration from the publisher
+-   `consentStateValue`: The stored consent state if there's any. The value will be `'accepted'/'rejected'/'unknown'`. A friendly reminder is to be aware of the difference between the consent state string value (`'accepted'/'rejected'/'unknown'`) and the user action string value (`'accept'/'reject'/'dismiss'`).
+-   `consentString`: The stored consent info string if there's any.
 
 One can get access to the client information via the name attribute inside the iframe.
 
@@ -144,20 +151,33 @@ One can get access to the client information via the name attribute inside the i
 info = JSON.parse(window.name);
 ```
 
+#### consentMetadata
+
+`<amp-consent>` [caches](./amp-consent.md#Client-caching) and passes consent information to vendors via `consentMetadata` objects as well as a non-empty `consentString`. You can find and example of the `consentMetadata` object and its supported fields below.
+
+```
+{
+  "consentStringType": {enum} [1: TCF V1, 2: TCF V2, 3: US Privacy String] (optional),
+  "gdprApplies": {boolean} (optional),
+  "additionalConsent": {string} (optional),
+  "purposeOne": {boolean} (optional)
+}
+```
+
 ## Adding your configuration to AMP
 
 Once you have the remote endpoint and prompt UI iframe ready, you are ready to add your configuration to the AMP runtime.
 
 1. Develop a patch that implements the following:
-   1. Add a new configuration object to amp-consent component. The current CMP configurations are all placed [here](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/0.1/cmps.js).
-   1. Within your configuration, make sure to specify all the required fields that includes:
-      1. `consentInstanceId`: The localStorage key to store/retrieve the user consent response.
-      1. `checkConsentHref`: Your remote endpoint destination.
-      1. `promptUISrc`: Your prompt UI iframe src.
-   1. Add an example to the [`cmp-vendors.amp.html`](../../examples/amp-consent/cmp-vendors.amp.html) using your service. Note, the examples and filters should be in alphabetical order, and `_ping_` should be the first example.
-   1. Add documentation for your configuration in [`extensions/amp-consent/cmp`](./cmps). See the [`_ping_`](./cmps/_ping_.md) documentation as an example.
-   1. Add your platform unde the "Supported Consent Management Platforms" section in [`extensions/amp-consent/amp-consent.md`](./amp-consent.md).
-   1. Add your GH user name as the POC for future maintenance issue.
+    1. Add a new configuration object to amp-consent component. The current CMP configurations are all placed [here](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/0.1/cmps.js).
+    1. Within your configuration, make sure to specify all the required fields that includes:
+        1. `consentInstanceId`: The localStorage key to store/retrieve the user consent response.
+        1. `checkConsentHref`: Your remote endpoint destination.
+        1. `promptUISrc`: Your prompt UI iframe src.
+    1. Add an example to the [`cmp-vendors.amp.html`](../../examples/amp-consent/cmp-vendors.amp.html) using your service. Note, the examples and filters should be in alphabetical order, and `_ping_` should be the first example.
+    1. Add documentation for your configuration in [`extensions/amp-consent/cmp`](./cmps). See the [`_ping_`](./cmps/_ping_.md) documentation as an example.
+    1. Add your platform unde the "Supported Consent Management Platforms" section in [`extensions/amp-consent/amp-consent.md`](./amp-consent.md).
+    1. Add your GH user name as the POC for future maintenance issue.
 1. Run end to end test on the new example you create.
 1. Submit a Pull Request with this patch, referencing the Intent-To-Implement issue. @ampproject/wg-monetization for review.
 1. Update your service's documentation and inform your customers.
diff --git a/extensions/amp-crypto-polyfill/OWNERS b/extensions/amp-crypto-polyfill/OWNERS
index f3fc2a2f602ff..699fa98eaf1c0 100644
--- a/extensions/amp-crypto-polyfill/OWNERS
+++ b/extensions/amp-crypto-polyfill/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-dailymotion/0.1/amp-dailymotion.js b/extensions/amp-dailymotion/0.1/amp-dailymotion.js
index d1a712516f4f7..3efa668122336 100644
--- a/extensions/amp-dailymotion/0.1/amp-dailymotion.js
+++ b/extensions/amp-dailymotion/0.1/amp-dailymotion.js
@@ -14,14 +14,11 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
-import {
-  addParamToUrl,
-  addParamsToUrl,
-  parseQueryString,
-} from '../../../src/url';
+import {addParamToUrl, addParamsToUrl} from '../../../src/url';
 import {
   createFrameFor,
   mutedOrUnmutedEvent,
@@ -29,8 +26,9 @@ import {
   redispatch,
 } from '../../../src/iframe-video';
 import {dev, devAssert, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {
+  dispatchCustomEvent,
   fullscreenEnter,
   fullscreenExit,
   getDataParamsFromAttributes,
@@ -39,6 +37,7 @@ import {
 import {getData, listen} from '../../../src/event-helper';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
 import {isLayoutSizeDefined} from '../../../src/layout';
+import {parseQueryString} from '../../../src/core/types/string/url';
 
 const TAG = 'amp-dailymotion';
 
@@ -105,6 +104,9 @@ class AmpDailymotion extends AMP.BaseElement {
 
     /** @private {boolean} */
     this.isFullscreen_ = false;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -145,11 +147,6 @@ class AmpDailymotion extends AMP.BaseElement {
     return isLayoutSizeDefined(layout);
   }
 
-  /** @override */
-  viewportCallback(visible) {
-    this.element.dispatchCustomEvent(VideoEvents.VISIBILITY, {visible});
-  }
-
   /** @override */
   buildCallback() {
     this.videoid_ = userAssert(
@@ -180,6 +177,17 @@ class AmpDailymotion extends AMP.BaseElement {
     return this.loadPromise(this.iframe_);
   }
 
+  /** @override */
+  unlayoutCallback() {
+    const iframe = this.iframe_;
+    if (iframe) {
+      this.element.removeChild(iframe);
+      this.iframe_ = null;
+    }
+    this.pauseHelper_.updatePlaying(false);
+    return true;
+  }
+
   /**
    * @param {!Event} event
    * @private
@@ -209,13 +217,19 @@ class AmpDailymotion extends AMP.BaseElement {
         this.playerReadyResolver_(true);
         break;
 
-      case DailymotionEvents.END:
-        this.playerState_ = DailymotionEvents.PAUSE;
+      case DailymotionEvents.PLAY:
+        this.playerState_ = data['event'];
+        this.pauseHelper_.updatePlaying(true);
         break;
 
       case DailymotionEvents.PAUSE:
-      case DailymotionEvents.PLAY:
         this.playerState_ = data['event'];
+        this.pauseHelper_.updatePlaying(false);
+        break;
+
+      case DailymotionEvents.END:
+        this.playerState_ = DailymotionEvents.PAUSE;
+        this.pauseHelper_.updatePlaying(false);
         break;
 
       case DailymotionEvents.VOLUMECHANGE:
@@ -225,7 +239,7 @@ class AmpDailymotion extends AMP.BaseElement {
           this.muted_ != isMuted
         ) {
           this.muted_ = isMuted;
-          this.element.dispatchCustomEvent(mutedOrUnmutedEvent(isMuted));
+          dispatchCustomEvent(this.element, mutedOrUnmutedEvent(isMuted));
         }
         break;
 
@@ -326,7 +340,7 @@ class AmpDailymotion extends AMP.BaseElement {
     // Hack to simulate firing mute events when video is not playing
     // since Dailymotion only fires volume changes when the video has started
     this.playerReadyPromise_.then(() => {
-      this.element.dispatchCustomEvent(VideoEvents.MUTED);
+      dispatchCustomEvent(this.element, VideoEvents.MUTED);
       this.muted_ = true;
     });
   }
@@ -339,7 +353,7 @@ class AmpDailymotion extends AMP.BaseElement {
     // Hack to simulate firing mute events when video is not playing
     // since Dailymotion only fires volume changes when the video has started
     this.playerReadyPromise_.then(() => {
-      this.element.dispatchCustomEvent(VideoEvents.UNMUTED);
+      dispatchCustomEvent(this.element, VideoEvents.UNMUTED);
       this.muted_ = false;
     });
   }
diff --git a/extensions/amp-dailymotion/0.1/test/test-amp-dailymotion.js b/extensions/amp-dailymotion/0.1/test/test-amp-dailymotion.js
index e6ad92bed66c1..e96b8bf2604be 100644
--- a/extensions/amp-dailymotion/0.1/test/test-amp-dailymotion.js
+++ b/extensions/amp-dailymotion/0.1/test/test-amp-dailymotion.js
@@ -44,7 +44,7 @@ describes.realWin(
         dailymotion.setAttribute('data-param-origin', 'example&.org');
       }
       doc.body.appendChild(dailymotion);
-      await dailymotion.build();
+      await dailymotion.buildInternal();
       await dailymotion.layoutCallback();
       return dailymotion;
     }
@@ -83,5 +83,17 @@ describes.realWin(
         );
       });
     });
+
+    it('unlayout and relayout', async () => {
+      const dailymotion = await getDailymotion('x2m8jpp');
+      expect(dailymotion.querySelector('iframe')).to.exist;
+
+      const unlayoutResult = dailymotion.unlayoutCallback();
+      expect(unlayoutResult).to.be.true;
+      expect(dailymotion.querySelector('iframe')).to.not.exist;
+
+      await dailymotion.layoutCallback();
+      expect(dailymotion.querySelector('iframe')).to.exist;
+    });
   }
 );
diff --git a/extensions/amp-dailymotion/0.1/test/validator-amp-dailymotion.html b/extensions/amp-dailymotion/0.1/test/validator-amp-dailymotion.html
index ed43284d6062c..ddfbd10d0c1c8 100644
--- a/extensions/amp-dailymotion/0.1/test/validator-amp-dailymotion.html
+++ b/extensions/amp-dailymotion/0.1/test/validator-amp-dailymotion.html
@@ -24,7 +24,6 @@
     <title>Dailymotion examples</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script>
      <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/extensions/amp-dailymotion/0.1/test/validator-amp-dailymotion.out b/extensions/amp-dailymotion/0.1/test/validator-amp-dailymotion.out
index 3bff8b3943281..bcf3f1d268d6e 100644
--- a/extensions/amp-dailymotion/0.1/test/validator-amp-dailymotion.out
+++ b/extensions/amp-dailymotion/0.1/test/validator-amp-dailymotion.out
@@ -25,7 +25,6 @@ FAIL
 |      <title>Dailymotion examples</title>
 |      <link rel="canonical" href="amps.html">
 |      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|      <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |      <script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script>
 |       <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>
 |      <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -48,18 +47,18 @@ FAIL
 |  <!-- invalid: videoid bad -->
 |  <amp-dailymotion data-videoid="i don't think so" width="500" height="281"
 >> ^~~~~~~~~
-amp-dailymotion/0.1/test/validator-amp-dailymotion.html:48:0 The attribute 'data-videoid' in tag 'amp-dailymotion' is set to the invalid value 'i don't think so'. (see https://amp.dev/documentation/components/amp-dailymotion)
+amp-dailymotion/0.1/test/validator-amp-dailymotion.html:47:0 The attribute 'data-videoid' in tag 'amp-dailymotion' is set to the invalid value 'i don't think so'. (see https://amp.dev/documentation/components/amp-dailymotion/)
 |          layout="responsive"></amp-dailymotion>
 |
 |  <!-- invalid: videoid missing -->
 |  <amp-dailymotion width="500" height="281" layout="responsive"></amp-dailymotion>
 >> ^~~~~~~~~
-amp-dailymotion/0.1/test/validator-amp-dailymotion.html:52:0 The mandatory attribute 'data-videoid' is missing in tag 'amp-dailymotion'. (see https://amp.dev/documentation/components/amp-dailymotion)
+amp-dailymotion/0.1/test/validator-amp-dailymotion.html:51:0 The mandatory attribute 'data-videoid' is missing in tag 'amp-dailymotion'. (see https://amp.dev/documentation/components/amp-dailymotion/)
 |
 |  <!-- invalid: bad attr value -->
 |  <amp-dailymotion data-videoid="jx2m8pp" width="500" height="281" layout="responsive"
 >> ^~~~~~~~~
-amp-dailymotion/0.1/test/validator-amp-dailymotion.html:55:0 The attribute 'data-ui-highlight' in tag 'amp-dailymotion' is set to the invalid value 'blue'. (see https://amp.dev/documentation/components/amp-dailymotion)
+amp-dailymotion/0.1/test/validator-amp-dailymotion.html:54:0 The attribute 'data-ui-highlight' in tag 'amp-dailymotion' is set to the invalid value 'blue'. (see https://amp.dev/documentation/components/amp-dailymotion/)
 |                   data-ui-highlight="blue">
 |  </amp-dailymotion>
 |
@@ -71,6 +70,6 @@ amp-dailymotion/0.1/test/validator-amp-dailymotion.html:55:0 The attribute 'data
 |  <!-- invalid: dock without amp-video-docking extension -->
 |  <amp-dailymotion data-videoid="x2m8jpp" width="500" height="281" dock></amp-dailymotion>
 >> ^~~~~~~~~
-amp-dailymotion/0.1/test/validator-amp-dailymotion.html:65:0 The attribute 'dock' requires including the 'amp-video-docking' extension JavaScript.
+amp-dailymotion/0.1/test/validator-amp-dailymotion.html:64:0 The attribute 'dock' requires including the 'amp-video-docking' extension JavaScript.
 |  </body>
-|  </html>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-dailymotion/OWNERS b/extensions/amp-dailymotion/OWNERS
index a25d070830e85..ac69460c7fd1b 100644
--- a/extensions/amp-dailymotion/OWNERS
+++ b/extensions/amp-dailymotion/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'zeno'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'zeno'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-dailymotion/amp-dailymotion.md b/extensions/amp-dailymotion/amp-dailymotion.md
index 12181016419a1..ce745941fb12f 100644
--- a/extensions/amp-dailymotion/amp-dailymotion.md
+++ b/extensions/amp-dailymotion/amp-dailymotion.md
@@ -24,7 +24,9 @@ limitations under the License.
 
 # amp-dailymotion
 
-## Example
+## Usage
+
+Displays a [Dailymotion](https://www.dailymotion.com/) video.
 
 With responsive layout, the width and height from the example should yield correct layouts for 16:9 aspect ratio videos.
 
@@ -37,98 +39,124 @@ With responsive layout, the width and height from the example should yield corre
 ></amp-dailymotion>
 ```
 
-## Attributes
-
-<table>
-  <tr>
-    <td width="40%"><strong>autoplay</strong></td>
-    <td>If this attribute is present, and the browser supports autoplay:</p>
-<ul>
-  <li>the video is automatically muted before autoplay starts</li>
-  <li>when the video is scrolled out of view, the video is paused</li>
-  <li>when the video is scrolled into view, the video resumes playback</li>
-  <li>when the user taps the video, the video is unmuted</li>
-  <li>if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.</li>
-</ul></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-videoid (required)</strong></td>
-    <td>The Dailymotion video id found in every video page URL. For example, <code>"x2m8jpp"</code> is the video id for <code>https://www.dailymotion.com/video/x2m8jpp_dailymotion-spirit-movie_creation</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-mute (optional)</strong></td>
-    <td>Indicates whether to mute the video.</p>
-<ul>
-  <li>Value: `"true"` or `"false"`</li>
-  <li>Default value: `"false"`</li>
-</ul></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-endscreen-enable (optional)</strong></td>
-    <td>Indicates whether to enable the end screen.</p>
-<ul>
-  <li>Value: `"true"` or `"false"`</li>
-  <li>Default value: `"true"`</li>
-</ul></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-sharing-enable (optional)</strong></td>
-    <td>Indicates whether to display the sharing button.</p>
-<ul>
-  <li>Value: `"true"` or `"false"`</li>
-  <li>Default value: `"true"`</li>
-</ul></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-start (optional)</strong></td>
-    <td>Specifies the time (in seconds) from which the video should start playing.</p>
-<ul>
-  <li>Value: integer (number of seconds). For example, `data-start=45`.</li>
-  <li>Default value: `0`</li>
-</ul></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-ui-highlight (optional)</strong></td>
-    <td>Change the default highlight color used in the controls.</p>
-<ul>
-  <li>alue: Hexadecimal color value (without the leading #). For example, `data-ui-highlight="e540ff"`.</li>
-</ul></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-ui-logo (optional)</strong></td>
-    <td>Indicates whether to display the Dailymotion logo.</p>
-<ul>
-  <li>Value: `"true"` or `"false"`</li>
-  <li>Default value: `"true"`</li>
-</ul></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-info (optional)</strong></td>
-    <td>Indicates whether to show video information (title and owner) on the start screen.</p>
-<ul>
-  <li>Value: `"true"` or `"false"`</li>
-  <li>Default value: `"true"`</li>
-</ul></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-param-* (optional)</strong></td>
-    <td><p>All data-param-* attributes are added as query parameters to the src value of the embedded Dailymotion iframe. You can use this attribute to pass custom values not explicitly declared.<br>Keys and values will be URI encoded.</p>
-<ul>
-  <li>`data-param-origin="example.com"`</li>
-</ul>
-<p>Please read <a href="https://developer.dailymotion.com/player#player-parameters">Dailymotion's video player documentation</a> to know more about parameters and options.</p></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>dock</strong></td>
-    <td><strong>Requires <code>amp-video-docking</code> extension.</strong> If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
-    For more details, see <a href="https://amp.dev/documentation/components/amp-video-docking">documentation on the docking extension itself.</a></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+### `autoplay`
+
+If this attribute is present, and the browser supports autoplay:
+
+-   the video is automatically muted before autoplay starts
+-   when the video is scrolled out of view, the video is paused
+-   when the video is scrolled into view, the video resumes playback
+-   when the user taps the video, the video is unmuted
+-   if the user has interacted with the video (e.g., mutes/unmutes,
+    pauses/resumes, etc.), and the video is scrolled in or out of view, the
+    state of the video remains as how the user left it. For example, if the user
+    pauses the video, then scrolls the video out of view and returns to the
+    video, the video is still paused.
+
+### `data-videoid`
+
+The Dailymotion video id found in every video page URL. For example, `"x2m8jpp"`
+is the video id for
+`https://www.dailymotion.com/video/x2m8jpp_dailymotion-spirit-movie_creation`.
+
+### `data-mute` (optional)
+
+Indicates whether to mute the video.
+
+-   Value: `"true"` or `"false"`
+-   Default value: `"false"`
+
+### `data-endscreen-enable` (optional)
+
+Indicates whether to enable the end screen.
+
+-   Value: `"true"` or `"false"`
+-   Default value: `"true"`
+
+### `data-sharing-enable` (optional)
+
+Indicates whether to display the sharing button.
+
+-   Value: `"true"` or `"false"`
+-   Default value: `"true"`
+
+### `data-start` (optional)
+
+Specifies the time (in seconds) from which the video should start playing.
+
+-   Value: integer (number of seconds). For example, `data-start=45`.
+-   Default value: `0`
+
+### `data-ui-highlight` (optional)
+
+Change the default highlight color used in the controls.
+
+-   Value: Hexadecimal color value (without the leading #). For example,
+    `data-ui-highlight="e540ff"`.
+
+### `data-ui-logo` (optional)
+
+Indicates whether to display the Dailymotion logo.
+
+-   Value: `"true"` or `"false"`
+-   Default value: `"true"`
+
+### `data-info` (optional)
+
+Indicates whether to show video information (title and owner) on the start
+screen.
+
+-   Value: `"true"` or `"false"`
+-   Default value: `"true"`
+
+### `data-param-*` (optional)
+
+All `data-param-*` attributes are added as query parameters to the `src` value
+of the embedded Dailymotion iframe. You can use this attribute to pass custom
+values not explicitly declared.
+
+Keys and values will be URI encoded.
+
+-   `data-param-origin="example.com"`
+
+Please read [Dailymotion's video player documentation](https://developer.dailymotion.com/player#player-parameters)
+to know more about parameters and options.
+
+### `dock`
+
+**Requires `amp-video-docking` extension.** If this attribute is present and the
+video is playing manually, the video will be "minimized" and fixed to a corner
+or an element when the user scrolls out of the video component's visual area.
+
+For more details, see [documentation on the docking extension itself](https://amp.dev/documentation/components/amp-video-docking).
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
+
+## Actions
+
+### `play`
+
+Plays the video.
+
+### `pause`
+
+Pauses the video.
+
+### `mute`
+
+Mutes the video.
+
+### `unmute`
+
+Unmutes the video.
+
+### `fullscreenenter`
+
+Takes the video to fullscreen.
 
 ## Validation
 
-See [amp-dailymotion rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-dailymotion/validator-amp-dailymotion.protoascii) in the AMP validator specification.
+See [amp-dailymotion rules](validator-amp-dailymotion.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-dailymotion/validator-amp-dailymotion.protoascii b/extensions/amp-dailymotion/validator-amp-dailymotion.protoascii
index c66072a02f407..ca2a7249c0f45 100644
--- a/extensions/amp-dailymotion/validator-amp-dailymotion.protoascii
+++ b/extensions/amp-dailymotion/validator-amp-dailymotion.protoascii
@@ -73,7 +73,7 @@ tags: {  # <amp-dailymotion>
     requires_extension: "amp-video-docking"
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-dailymotion"
+  spec_url: "https://amp.dev/documentation/components/amp-dailymotion/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-date-countdown/0.1/amp-date-countdown.js b/extensions/amp-date-countdown/0.1/amp-date-countdown.js
index de7c28a95f578..e2fcc723b04df 100644
--- a/extensions/amp-date-countdown/0.1/amp-date-countdown.js
+++ b/extensions/amp-date-countdown/0.1/amp-date-countdown.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {Services} from '../../../src/services';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {removeChildren} from '../../../src/dom';
@@ -73,8 +73,8 @@ export class AmpDateCountdown extends AMP.BaseElement {
   constructor(element) {
     super(element);
 
-    /** @const {!../../../src/service/template-impl.Templates} */
-    this.templates_ = Services.templatesFor(this.win);
+    /** @private {?../../../src/service/template-impl.Templates} */
+    this.templates_ = null;
 
     /** @const {function(!Element)} */
     this.boundRendered_ = this.rendered_.bind(this);
@@ -103,15 +103,20 @@ export class AmpDateCountdown extends AMP.BaseElement {
     /** @private {string} */
     this.biggestUnit_ = '';
 
-    /** @private {!Object|null} */
+    /** @private {?Object} */
     this.localeWordList_ = null;
 
     /** @private {?number} */
     this.countDownTimer_ = null;
+
+    /** @private {boolean} */
+    this.countUp_ = false;
   }
 
   /** @override */
   buildCallback() {
+    this.templates_ = Services.templatesForDoc(this.element);
+
     // Store this in buildCallback() because `this.element` sometimes
     // is missing attributes in the constructor.
 
@@ -151,9 +156,12 @@ export class AmpDateCountdown extends AMP.BaseElement {
       this.element.getAttribute('biggest-unit') || DEFAULT_BIGGEST_UNIT
     ).toUpperCase();
 
-    /** @private {!Object|null} */
+    /** @private {?Object} */
     this.localeWordList_ = this.getLocaleWord_(this.locale_);
 
+    /** @private {boolean} */
+    this.countUp_ = this.element.hasAttribute('data-count-up');
+
     this.getAmpDoc()
       .whenFirstVisible()
       .then(() => {
@@ -195,7 +203,7 @@ export class AmpDateCountdown extends AMP.BaseElement {
    */
   tickCountDown_(differentBetween) {
     const items = /** @type {!JsonObject} */ ({});
-    const DIFF = this.getYDHMSFromMs_(differentBetween) || {};
+    const DIFF = this.getYDHMSFromMs_(differentBetween, this.countUp_) || {};
     if (this.whenEnded_ === 'stop' && differentBetween < 1000) {
       Services.actionServiceForDoc(this.element).trigger(
         this.element,
@@ -260,10 +268,11 @@ export class AmpDateCountdown extends AMP.BaseElement {
 
   /**
    * @param {number} ms
+   * @param {boolean} countUp
    * @return {Object}
    * @private
    */
-  getYDHMSFromMs_(ms) {
+  getYDHMSFromMs_(ms, countUp) {
     /** @enum {number} */
     const TimeUnit = {
       DAYS: 1,
@@ -271,6 +280,14 @@ export class AmpDateCountdown extends AMP.BaseElement {
       MINUTES: 3,
       SECONDS: 4,
     };
+
+    // If user supplies 'count-up' attribute, we return the negative of what
+    // we would originally return since we are counting time-elapsed from a
+    // set time instead of time until that time
+    if (countUp) {
+      ms *= -1;
+    }
+
     //Math.trunc is used instead of Math.floor to support negative past date
     const d =
       TimeUnit[this.biggestUnit_] == TimeUnit.DAYS
diff --git a/extensions/amp-date-countdown/0.1/amp-date-countdown.md b/extensions/amp-date-countdown/0.1/amp-date-countdown.md
new file mode 100644
index 0000000000000..5d4803faac680
--- /dev/null
+++ b/extensions/amp-date-countdown/0.1/amp-date-countdown.md
@@ -0,0 +1,232 @@
+---
+$category@: presentation
+formats:
+  - websites
+teaser:
+  text: Displays a countdown sequence to a specified date.
+---
+
+<!--
+Copyright 2018 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.
+-->
+
+# amp-date-countdown
+
+## Usage
+
+Display a sequence of backward counting to indicate the time remaining before an
+event is scheduled to occur.
+
+<amp-img alt="countdown timer example" layout="responsive" src="https://user-images.githubusercontent.com/2099009/28486908-71f03336-6e3c-11e7-9822-3bac6528b148.png" width="816" height="294">
+  <noscript>
+    <img alt="countdown timer" src="https://user-images.githubusercontent.com/2099009/28486908-71f03336-6e3c-11e7-9822-3bac6528b148.png" width="816" height="294">
+  </noscript>
+</amp-img>
+
+The `amp-date-countdown` provides countdown time data that you can render in your AMP page. By providing specific [attributes](#attributes) in the `amp-date-countdown` tag, the `amp-date-countdown` extension returns a list of time parameters, which you can pass to an `amp-mustache` template for rendering. Refer to the [ list below for each returned time parameter](#returned-time-parameters).
+
+<amp-img alt="countdown timer example 2" layout="intrinsic" src="https://user-images.githubusercontent.com/2099009/42785881-e161f078-8908-11e8-8f31-435e36a1de95.gif" width="489" height="48">
+  <noscript>
+    <img alt="countdown timer" src="https://user-images.githubusercontent.com/2099009/42785881-e161f078-8908-11e8-8f31-435e36a1de95.gif" width="489" height="48">
+  </noscript>
+</amp-img>
+
+```html
+<amp-date-countdown
+  timestamp-seconds="2147483648"
+  layout="fixed-height"
+  height="50"
+>
+  <template type="amp-mustache">
+    <p class="p1">
+      {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until
+      <a href="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38</a>.
+    </p>
+  </template>
+</amp-date-countdown>
+```
+
+### Returned time parameters
+
+This table lists the format you can specify in your Mustache template:
+
+| Format  | Meaning                                           |
+| ------- | ------------------------------------------------- |
+| d       | day - 0, 1, 2,...12, 13..Infinity                 |
+| dd      | day - 00, 01, 02, 03..Infinity                    |
+| h       | hour - 0, 1, 2,...12, 13..Infinity                |
+| hh      | hour - 01, 02, 03..Infinity                       |
+| m       | minute - 0, 1, 2,...12, 13..Infinity              |
+| mm      | minute - 01, 01, 02, 03..Infinity                 |
+| s       | second - 0, 1, 2,...12, 13..Infinity              |
+| ss      | second - 00, 01, 02, 03..Infinity                 |
+| days    | internationalization string for day or days       |
+| hours   | internationalization string for hour or hours     |
+| minutes | internationalization string for minute or minutes |
+| seconds | internationalization string for second or seconds |
+
+#### Samples of formatted values
+
+This table provides examples of formatted values specified in a Mustache template, and a sample of what the output:
+
+| Format                                          | Sample Output                        | Remarks                |
+| ----------------------------------------------- | ------------------------------------ | ---------------------- |
+| {hh}:{mm}:{ss}                                  | 04:24:06                             | -                      |
+| {h} {hours} and {m} {minutes} and {s} {seconds} | 4 hours and 1 minutes and 45 seconds | -                      |
+| {d} {days} {h}:{mm}                             | 1 day 5:03                           | -                      |
+| {d} {days} {h} {hours} {m} {minutes}            | 50 days 5 hours 10 minutes           | -                      |
+| {d} {days} {h} {hours} {m} {minutes}            | 20 days 5 hours 10 minutes           | -                      |
+| {h} {hours} {m} {minutes}                       | 240 hours 10 minutes                 | `biggest-unit='hours'` |
+| {d} {days} {h} {hours} {m} {minutes}            | 50 天 5 小时 10 分钟                 | `locale='zh-cn'`       |
+
+## Attributes
+
+You must specify at least one of these required attributes: `end-date`,
+`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.
+
+### end-date
+
+An ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`
+
+### timestamp-ms
+
+A POSIX epoch value in milliseconds; assumed to be UTC timezone. For example,
+`timestamp-ms="1521880470000"`.
+
+### timestamp-seconds
+
+A POSIX epoch value in seconds; assumed to be UTC timezone. For example,
+`timestamp-seconds="1521880470"`.
+
+### timeleft-ms
+
+A value in milliseconds left to be counting down. For example, 48 hours left
+`timeleft-ms="172800000"`.
+
+### offset-seconds (optional)
+
+A positive or negative number that represents the number of seconds to add or
+subtract from the `end-date`. For example, `offset-seconds="60"` adds 60 seconds
+to the end-date.
+
+### when-ended (optional)
+
+Specifies whether to stop the timer when it reaches 0 seconds. The value can be
+set to `stop` (default) to indicate the timer to stop at 0 seconds and will not
+pass the final date or `continue` to indicate the timer should continue after
+reaching 0 seconds.
+
+### locale (optional)
+
+An internationalization language string for each timer unit. The default value
+is `en` (for English).
+
+Supported values:
+
+| Code  | Language            |
+| ----- | ------------------- |
+| de    | German              |
+| en    | English             |
+| es    | Spanish             |
+| fr    | French              |
+| id    | Indonesian          |
+| it    | Italian             |
+| ja    | Japanese            |
+| ko    | Korean              |
+| nl    | Dutch               |
+| pt    | Portuguese          |
+| ru    | Russian             |
+| th    | Thai                |
+| tr    | Turkish             |
+| vi    | Vietnamese          |
+| zh-cn | Chinese Simplified  |
+| zh-tw | Chinese Traditional |
+
+### biggest-unit (optional)
+
+Allows the `amp-date-countdown` component to calculate the time difference based
+on the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays
+`1210 hours` left.
+
+-   Supported values: `days`, `hours`, `minutes`, `seconds`
+-   Default: `days`
+
+### data-count-up (optional)
+
+Include this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `amp-date-countdown` will display a decrementing (toward 0) negative value.
+
+## Events
+
+The `amp-date-countdown` component exposes the following event that you can use
+[AMP on-syntax to trigger](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events):
+
+### Timeout
+
+When the timer times out. For this action to function, `when-ended` **must be**
+set to `stop`. You can only run low-trust actions such as `amp-animation` and
+`amp-video` actions when the timer times out. This is to enforce AMP's UX
+principle of not allowing page content to reflow without explicit user actions.
+|
+
+_Example: Demonstrating usage of timeout event_
+
+```html
+<h1 id="sample">
+  When Timer hits 0, will hide the timer itself and hide this message.
+</h1>
+
+<amp-animation id="hide-timeout-event" layout="nodisplay">
+  <script type="application/json">
+    {
+      "duration": "1s",
+      "fill": "both",
+      "selector": "#ampdate, #sample",
+      "keyframes": {"visibility": "hidden"}
+    }
+  </script>
+</amp-animation>
+<amp-date-countdown
+  id="ampdate"
+  end-date="2018-07-17T06:19:40+08:00"
+  on="timeout: hide-timeout-event.start"
+  height="400"
+  width="400"
+  when-ended="stop"
+  locale="en"
+>
+  <template type="amp-mustache">
+    <h1>Countdown Clock</h1>
+    <div>
+      {{dd}} : {{hh)) : {{mm}} : {{ss}}
+    </div>
+  </template>
+</amp-date-countdown>
+```
+
+Renders as:
+
+<amp-img alt="Animated example the action" layout="intrinsic"
+         src="https://user-images.githubusercontent.com/2099009/42786835-9e698228-890c-11e8-8776-f82a6cded829.gif"
+         width="359" height="270">
+<noscript>
+<img alt="countdown timer"
+         src="https://user-images.githubusercontent.com/2099009/42786835-9e698228-890c-11e8-8776-f82a6cded829.gif"
+         width="359" height="270">
+</noscript>
+</amp-img>
+
+## Validation
+
+See [amp-date-countdown rules](../validator-amp-date-countdown.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-date-countdown/0.1/test/test-amp-date-countdown.js b/extensions/amp-date-countdown/0.1/test/test-amp-date-countdown.js
index 19cc29db98e17..b539012834614 100644
--- a/extensions/amp-date-countdown/0.1/test/test-amp-date-countdown.js
+++ b/extensions/amp-date-countdown/0.1/test/test-amp-date-countdown.js
@@ -32,20 +32,21 @@ describes.realWin(
     const endDate = new Date(ISOEndDate);
     const twoDaysBeforeEndDate = new Date(endDate - 86400000 * 2); //substract 2 days
 
-    beforeEach(() => {
+    beforeEach(async () => {
       ({win /*, sandbox*/} = env);
 
       element = win.document.createElement('amp-date-countdown');
       element.setAttribute('end-date', ISOEndDate);
+      element.setAttribute('layout', 'responsive');
       win.document.body.appendChild(element);
-      impl = element.implementation_;
+      impl = await element.getImpl(false);
     });
 
     it(
       'should display timeleft in the format ' +
         '{d} {days} {h} {hours} {m} {minutes} {s} {seconds}',
-      () => {
-        element.build();
+      async () => {
+        await element.buildInternal();
         const timeObj = Object.assign(
           impl.getYDHMSFromMs_(endDate - twoDaysBeforeEndDate),
           impl.getLocaleWord_('en')
@@ -77,8 +78,8 @@ describes.realWin(
       'should display timeleft in the format ' +
         '{d} {days} {h} {hours} {m} {minutes} {s} {seconds},' +
         'in i18n Chinese Simplified',
-      () => {
-        element.build();
+      async () => {
+        await element.buildInternal();
         const timeObj = Object.assign(
           impl.getYDHMSFromMs_(endDate - twoDaysBeforeEndDate),
           impl.getLocaleWord_('zh-cn')
@@ -104,8 +105,8 @@ describes.realWin(
       }
     );
 
-    it('should display timeleft in the format {hh}:{mm}:{ss}', () => {
-      element.build();
+    it('should display timeleft in the format {hh}:{mm}:{ss}', async () => {
+      await element.buildInternal();
       const timeObj = Object.assign(
         impl.getYDHMSFromMs_(endDate - twoDaysBeforeEndDate),
         impl.getLocaleWord_('en')
@@ -119,8 +120,8 @@ describes.realWin(
     it(
       'should display timeleft in the format ' +
         '{h} {hours} and {m} {minutes} and {s} {seconds}',
-      () => {
-        element.build();
+      async () => {
+        await element.buildInternal();
         const timeObj = Object.assign(
           impl.getYDHMSFromMs_(endDate - twoDaysBeforeEndDate - 1000),
           impl.getLocaleWord_('en')
@@ -145,8 +146,8 @@ describes.realWin(
       }
     );
 
-    it('should display timeleft in the format {d} {days} {h}:{mm}', () => {
-      element.build();
+    it('should display timeleft in the format {d} {days} {h}:{mm}', async () => {
+      await element.buildInternal();
       const timeObj = Object.assign(
         impl.getYDHMSFromMs_(endDate - twoDaysBeforeEndDate - 1000),
         impl.getLocaleWord_('en')
@@ -157,8 +158,8 @@ describes.realWin(
       expect(itemElement.textContent).to.equal('1 Days 23:59');
     });
 
-    it('should calculate the timeleft after added offset-seconds', () => {
-      element.build();
+    it('should calculate the timeleft after added offset-seconds', async () => {
+      await element.buildInternal();
       const timeObj = Object.assign(
         impl.getYDHMSFromMs_(
           endDate - twoDaysBeforeEndDate + 24 * 60 * 60 * 1000
@@ -187,8 +188,8 @@ describes.realWin(
       );
     });
 
-    it('should calculate the timeleft after substracted offset-seconds', () => {
-      element.build();
+    it('should calculate the timeleft after substracted offset-seconds', async () => {
+      await element.buildInternal();
       const timeObj = Object.assign(
         impl.getYDHMSFromMs_(
           endDate - twoDaysBeforeEndDate + -1 * 24 * 60 * 60 * 1000
@@ -216,5 +217,91 @@ describes.realWin(
         '1 Days 0 Hours 0 Minutes 0 Seconds'
       );
     });
+
+    it(
+      'should calculate a negative time when target is in future ' +
+        'when using the "data-count-up" attribute',
+      async () => {
+        const countUp = true;
+        element.setAttribute('data-count-up', '');
+        element.setAttribute('when-ended', 'continue');
+        await element.buildInternal();
+        const timeObj = Object.assign(
+          impl.getYDHMSFromMs_(
+            endDate -
+              twoDaysBeforeEndDate - //two days in future
+              24 * 60 * 60 * 1000 - //minus 1 day
+              60 * 60 * 1000 - //minus 1 hour
+              60 * 1000 - //minus 1 minute
+              1000, //minus 1 second
+            countUp
+          ), // hours * minutes * seconds * ms
+          impl.getLocaleWord_('en')
+        ); // English
+        const itemElement = win.document.createElement('div');
+        itemElement.textContent =
+          timeObj.d +
+          ' ' +
+          timeObj.days +
+          ' ' +
+          timeObj.h +
+          ' ' +
+          timeObj.hours +
+          ' ' +
+          timeObj.m +
+          ' ' +
+          timeObj.minutes +
+          ' ' +
+          timeObj.s +
+          ' ' +
+          timeObj.seconds;
+        expect(itemElement.textContent).to.equal(
+          '0 Days -22 Hours -58 Minutes -58 Seconds'
+        );
+      }
+    );
+
+    it(
+      'should calculate a positive time when target is in past ' +
+        'when using the "data-count-up" attribute',
+      async () => {
+        const countUp = true;
+        element.setAttribute('data-count-up', '');
+        element.setAttribute('when-ended', 'continue');
+        await element.buildInternal();
+        const timeObj = Object.assign(
+          impl.getYDHMSFromMs_(
+            twoDaysBeforeEndDate -
+              endDate + //two days in past
+              24 * 60 * 60 * 1000 + //plus 1 day
+              60 * 60 * 1000 + //plus 1 hour
+              60 * 1000 + //plus 1 minute
+              1000, //plus 1 second
+            countUp
+          ), // hours * minutes * seconds * ms
+          impl.getLocaleWord_('en')
+        ); // English
+        const itemElement = win.document.createElement('div');
+        itemElement.textContent =
+          timeObj.d +
+          ' ' +
+          timeObj.days +
+          ' ' +
+          timeObj.h +
+          ' ' +
+          timeObj.hours +
+          ' ' +
+          timeObj.m +
+          ' ' +
+          timeObj.minutes +
+          ' ' +
+          timeObj.s +
+          ' ' +
+          timeObj.seconds;
+        expect(itemElement.textContent).to.equal(
+          '0 Days 22 Hours 58 Minutes 59 Seconds'
+        );
+      }
+    );
   }
 );
diff --git a/extensions/amp-date-countdown/0.1/test/validator-amp-date-countdown.html b/extensions/amp-date-countdown/0.1/test/validator-amp-date-countdown.html
index 7678de09d8e9d..f008e53f1fa2a 100644
--- a/extensions/amp-date-countdown/0.1/test/validator-amp-date-countdown.html
+++ b/extensions/amp-date-countdown/0.1/test/validator-amp-date-countdown.html
@@ -160,5 +160,14 @@ <h1>Countdown Clock</h1>
   <!-- Should error if the `template` referent is missing. -->
   <amp-date-countdown timestamp-ms="1521880470000" offset-seconds="1521880470" when-ended="stop" locale='zh-tw' height="50" width="360" template="notMyTemplate">
   </amp-date-countdown>
+
+  <!-- Should allow `data-count-up` attribute. -->
+  <amp-date-countdown data-count-up timestamp-seconds="1521880470" offset-seconds="1521880470" when-ended="continue" locale='de' height="50" width="360" template="myTemplate">
+  </amp-date-countdown>
+
+  <!-- Should error if `data-count-up` attribute is given a non-empty value. -->
+  <amp-date-countdown data-count-up="true" timestamp-seconds="1521880470" offset-seconds="1521880470" when-ended="continue" locale='de' height="50" width="360" template="myTemplate">
+  </amp-date-countdown>
+
 </body>
 </html>
diff --git a/extensions/amp-date-countdown/0.1/test/validator-amp-date-countdown.out b/extensions/amp-date-countdown/0.1/test/validator-amp-date-countdown.out
index 1520c50642241..aa4a295a9b2a1 100644
--- a/extensions/amp-date-countdown/0.1/test/validator-amp-date-countdown.out
+++ b/extensions/amp-date-countdown/0.1/test/validator-amp-date-countdown.out
@@ -163,5 +163,16 @@ FAIL
 >>   ^~~~~~~~~
 amp-date-countdown/0.1/test/validator-amp-date-countdown.html:161:2 Attribute 'template' in tag 'amp-date-countdown' contains a value that does not match any other tags on the page. (see https://amp.dev/documentation/components/amp-date-countdown)
 |    </amp-date-countdown>
+|
+|    <!-- Should allow `data-count-up` attribute. -->
+|    <amp-date-countdown data-count-up timestamp-seconds="1521880470" offset-seconds="1521880470" when-ended="continue" locale='de' height="50" width="360" template="myTemplate">
+|    </amp-date-countdown>
+|
+|    <!-- Should error if `data-count-up` attribute is given a non-empty value. -->
+|    <amp-date-countdown data-count-up="true" timestamp-seconds="1521880470" offset-seconds="1521880470" when-ended="continue" locale='de' height="50" width="360" template="myTemplate">
+>>   ^~~~~~~~~
+amp-date-countdown/0.1/test/validator-amp-date-countdown.html:169:2 The attribute 'data-count-up' in tag 'amp-date-countdown' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-date-countdown)
+|    </amp-date-countdown>
+|
 |  </body>
 |  </html>
diff --git a/extensions/amp-date-countdown/1.0/amp-date-countdown.js b/extensions/amp-date-countdown/1.0/amp-date-countdown.js
new file mode 100644
index 0000000000000..dec839d92ecac
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/amp-date-countdown.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {BaseElement} from './base-element';
+import {Services} from '../../../src/services';
+import {dev, userAssert} from '../../../src/log';
+import {dict} from '../../../src/core/types/object';
+import {isExperimentOn} from '../../../src/experiments';
+import {isLayoutSizeDefined} from '../../../src/layout';
+
+/** @const {string} */
+const TAG = 'amp-date-countdown';
+
+class AmpDateCountdown extends BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {?../../../src/service/template-impl.Templates} */
+    this.templates_ = null;
+
+    /** @private {?Element} */
+    this.template_ = null;
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-date-countdown'),
+      'expected global "bento" or specific "bento-date-countdown" experiment to be enabled'
+    );
+    return isLayoutSizeDefined(layout);
+  }
+
+  /** @override */
+  checkPropsPostMutations() {
+    const templates =
+      this.templates_ ||
+      (this.templates_ = Services.templatesForDoc(this.element));
+    const template = templates.maybeFindTemplate(this.element);
+    if (template === this.template_) {
+      return;
+    }
+    this.template_ = template;
+    if (template) {
+      // Only overwrite `render` when template is ready to minimize FOUC.
+      templates.whenReady(template).then(() => {
+        if (template != this.template_) {
+          // A new template has been set while the old one was initializing.
+          return;
+        }
+        this.mutateProps(
+          dict({
+            'render': (data) => {
+              return templates
+                .renderTemplateAsString(dev().assertElement(template), data)
+                .then((html) => dict({'__html': html}));
+            },
+          })
+        );
+      });
+    } else {
+      this.mutateProps(dict({'render': null}));
+    }
+  }
+
+  /** @override */
+  isReady(props) {
+    if (this.template_ && !('render' in props)) {
+      // The template is specified, but not available yet.
+      return false;
+    }
+    return true;
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpDateCountdown);
+});
diff --git a/extensions/amp-date-countdown/1.0/base-element.js b/extensions/amp-date-countdown/1.0/base-element.js
new file mode 100644
index 0000000000000..ceee855ec76c0
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/base-element.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {DateCountdown} from './component';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {parseDateAttrs as parseDateAttrsBase} from '../../../src/core/dom/parse-date-attributes';
+
+export class BaseElement extends PreactBaseElement {}
+
+/** @override */
+BaseElement['Component'] = DateCountdown;
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['lightDomTag'] = 'div';
+
+/** @override */
+BaseElement['usesTemplate'] = true;
+
+/** @override */
+BaseElement['props'] = {
+  'datetime': {
+    attrs: [
+      'end-date',
+      'timeleft-ms',
+      'timestamp-ms',
+      'timestamp-seconds',
+      'offset-seconds',
+    ],
+    parseAttrs: parseDateAttrs,
+  },
+  'whenEnded': {attr: 'when-ended', type: 'string'},
+  'locale': {attr: 'locale', type: 'string'},
+  'biggestUnit': {attr: 'biggest-unit', type: 'string'},
+  'countUp': {attr: 'count-up', type: 'boolean'},
+};
+
+/**
+ * @param {!Element} element
+ * @return {?number}
+ * @throws {UserError} when attribute values are missing or invalid.
+ * @visibleForTesting
+ */
+export function parseDateAttrs(element) {
+  return parseDateAttrsBase(element, [
+    'end-date',
+    'timeleft-ms',
+    'timestamp-ms',
+    'timestamp-seconds',
+  ]);
+}
diff --git a/extensions/amp-date-countdown/1.0/component.js b/extensions/amp-date-countdown/1.0/component.js
new file mode 100644
index 0000000000000..ce910aaa8e248
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/component.js
@@ -0,0 +1,262 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {Wrapper, useRenderer} from '../../../src/preact/component';
+import {dict} from '../../../src/core/types/object';
+import {getDate} from '../../../src/core/types/date';
+import {getLocaleStrings} from './messages';
+import {useAmpContext} from '../../../src/preact/context';
+import {useEffect, useMemo, useRef, useState} from '../../../src/preact';
+import {useResourcesNotify} from '../../../src/preact/utils';
+
+const NAME = 'DateCountdown';
+
+// Constants
+/** @const {number} */
+const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
+
+/** @const {number} */
+const MILLISECONDS_IN_HOUR = 60 * 60 * 1000;
+
+/** @const {number} */
+const MILLISECONDS_IN_MINUTE = 60 * 1000;
+
+/** @const {number} */
+const MILLISECONDS_IN_SECOND = 1000;
+
+/** @const {number} */
+const DELAY = 1000;
+
+/** @const {Object<string, number>} */
+const TimeUnit = {
+  DAYS: 1,
+  HOURS: 2,
+  MINUTES: 3,
+  SECONDS: 4,
+};
+
+// Default prop values
+const DEFAULT_LOCALE = 'en';
+const DEFAULT_WHEN_ENDED = 'stop';
+const DEFAULT_BIGGEST_UNIT = 'DAYS';
+const DEFAULT_COUNT_UP = false;
+
+/**
+ * @param {!JsonObject} data
+ * @return {string}
+ */
+const DEFAULT_RENDER = (data) =>
+  /** @type {string} */ (
+    `${data['days']} ${data['dd']}, ` +
+      `${data['hours']} ${data['hh']}, ` +
+      `${data['minutes']} ${data['mm']}, ` +
+      `${data['seconds']} ${data['ss']}`
+  );
+
+/**
+ * @param {!DateCountdownPropsDef} props
+ * @return {PreactDef.Renderable}
+ */
+export function DateCountdown({
+  datetime,
+  whenEnded = DEFAULT_WHEN_ENDED,
+  locale = DEFAULT_LOCALE,
+  biggestUnit = DEFAULT_BIGGEST_UNIT,
+  countUp = DEFAULT_COUNT_UP,
+  render = DEFAULT_RENDER,
+  ...rest
+}) {
+  useResourcesNotify();
+  const {playable} = useAmpContext();
+
+  // Compute these values once
+  const epoch = useMemo(() => getDate(datetime), [datetime]);
+  const localeStrings = useMemo(
+    () => getLocaleWord(/** @type {string} */ (locale)),
+    [locale]
+  );
+
+  // timeleft is updated on each interval callback
+  const [timeleft, setTimeleft] = useState(epoch - Date.now() + DELAY);
+
+  // Only update data when timeleft (or other dependencies) are updated
+  // Does not update on 2nd render triggered by useRenderer
+  const data = useMemo(
+    () => getDataForTemplate(timeleft, biggestUnit, localeStrings, countUp),
+    [timeleft, biggestUnit, localeStrings, countUp]
+  );
+
+  // Reference to DOM element to get access to correct window
+  const rootRef = useRef(null);
+
+  useEffect(() => {
+    if (!playable || !rootRef.current) {
+      return;
+    }
+    const win = rootRef.current.ownerDocument.defaultView;
+    const interval = win.setInterval(() => {
+      const newTimeleft = epoch - Date.now() + DELAY;
+      setTimeleft(newTimeleft);
+      if (whenEnded === DEFAULT_WHEN_ENDED && newTimeleft < 1000) {
+        win.clearInterval(interval);
+      }
+    }, DELAY);
+    return () => win.clearInterval(interval);
+  }, [playable, epoch, whenEnded]);
+
+  const rendered = useRenderer(render, data);
+  const isHtml =
+    rendered && typeof rendered == 'object' && '__html' in rendered;
+
+  return (
+    <Wrapper
+      {...rest}
+      ref={rootRef}
+      dangerouslySetInnerHTML={isHtml ? rendered : null}
+    >
+      {isHtml ? null : rendered}
+    </Wrapper>
+  );
+}
+
+/**
+ * @param {number} timeleft
+ * @param {string|undefined} biggestUnit
+ * @param {!JsonObject} localeStrings
+ * @param {boolean} countUp
+ * @return {!JsonObject}
+ */
+function getDataForTemplate(timeleft, biggestUnit, localeStrings, countUp) {
+  return /** @type {!JsonObject} */ ({
+    ...getYDHMSFromMs(timeleft, /** @type {string} */ (biggestUnit), countUp),
+    ...localeStrings,
+  });
+}
+
+/**
+ * Return an object with a label for 'years', 'months', etc. based on the
+ * user provided locale string.
+ * @param {string} locale
+ * @return {!JsonObject}
+ */
+function getLocaleWord(locale) {
+  if (getLocaleStrings(locale) === undefined) {
+    displayWarning(
+      `Invalid locale ${locale}, defaulting to ${DEFAULT_LOCALE}. ${NAME}`
+    );
+    locale = DEFAULT_LOCALE;
+  }
+  const localeWordList = getLocaleStrings(locale);
+  return dict({
+    'years': localeWordList[0],
+    'months': localeWordList[1],
+    'days': localeWordList[2],
+    'hours': localeWordList[3],
+    'minutes': localeWordList[4],
+    'seconds': localeWordList[5],
+  });
+}
+
+/**
+ * Converts a time represented in milliseconds (ms) into a representation with
+ * days, hours, minutes, etc. and returns formatted strings in an object.
+ * @param {number} ms
+ * @param {string} biggestUnit
+ * @param {boolean} countUp
+ * @return {JsonObject}
+ */
+function getYDHMSFromMs(ms, biggestUnit, countUp) {
+  // If 'count-up' prop is true, we return the negative of what
+  // we would originally return since we are counting time-elapsed from a
+  // set time instead of time until that time
+  if (countUp) {
+    ms *= -1;
+  }
+
+  //Math.trunc is used instead of Math.floor to support negative past date
+  const d =
+    TimeUnit[biggestUnit] == TimeUnit.DAYS
+      ? supportBackDate(Math.floor(ms / MILLISECONDS_IN_DAY))
+      : 0;
+  const h =
+    TimeUnit[biggestUnit] == TimeUnit.HOURS
+      ? supportBackDate(Math.floor(ms / MILLISECONDS_IN_HOUR))
+      : TimeUnit[biggestUnit] < TimeUnit.HOURS
+      ? supportBackDate(
+          Math.floor((ms % MILLISECONDS_IN_DAY) / MILLISECONDS_IN_HOUR)
+        )
+      : 0;
+  const m =
+    TimeUnit[biggestUnit] == TimeUnit.MINUTES
+      ? supportBackDate(Math.floor(ms / MILLISECONDS_IN_MINUTE))
+      : TimeUnit[biggestUnit] < TimeUnit.MINUTES
+      ? supportBackDate(
+          Math.floor((ms % MILLISECONDS_IN_HOUR) / MILLISECONDS_IN_MINUTE)
+        )
+      : 0;
+  const s =
+    TimeUnit[biggestUnit] == TimeUnit.SECONDS
+      ? supportBackDate(Math.floor(ms / MILLISECONDS_IN_SECOND))
+      : supportBackDate(
+          Math.floor((ms % MILLISECONDS_IN_MINUTE) / MILLISECONDS_IN_SECOND)
+        );
+
+  return dict({
+    'd': d,
+    'dd': padStart(d),
+    'h': h,
+    'hh': padStart(h),
+    'm': m,
+    'mm': padStart(m),
+    's': s,
+    'ss': padStart(s),
+  });
+}
+
+/**
+ * Format a number for output to the template.  Adds a leading zero if the
+ * input is only one digit and a negative sign for inputs less than 0.
+ * @param {number} input
+ * @return {string}
+ */
+function padStart(input) {
+  if (input < -9 || input > 9) {
+    return String(input);
+  } else if (input >= -9 && input < 0) {
+    return '-0' + -input;
+  }
+  return '0' + input;
+}
+
+/**
+ * @param {number} input
+ * @return {number}
+ */
+function supportBackDate(input) {
+  if (input < 0) {
+    return input + 1;
+  }
+  return input;
+}
+
+/**
+ * @param {?string} message
+ */
+function displayWarning(message) {
+  console /*OK*/
+    .warn(message);
+}
diff --git a/extensions/amp-date-countdown/1.0/component.type.js b/extensions/amp-date-countdown/1.0/component.type.js
new file mode 100644
index 0000000000000..1ebebba6ca717
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/component.type.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/**
+ * @typedef {{
+ *   dateTime: (!Date|number|string),
+ *   whenEnded: (string|undefined),
+ *   locale: (string|undefined),
+ *   biggestUnit: (string|undefined),
+ *   countUp: (boolean|undefined),
+ *   render: (?RendererFunctionType|undefined),
+ * }}
+ */
+var DateCountdownPropsDef;
diff --git a/extensions/amp-date-countdown/1.0/messages.js b/extensions/amp-date-countdown/1.0/messages.js
new file mode 100644
index 0000000000000..371ae521f6629
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/messages.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * Get locale strings or undefined.
+ * @param {string} locale
+ * @return {!Array<string>|undefined}
+ */
+export function getLocaleStrings(locale) {
+  return LOCALE_WORD[locale];
+}
+
+/**
+ * Strings representing years, minutes, etc. in various locales
+ * @type {Object<string, !Array<string>>}
+ */
+const LOCALE_WORD = {
+  'de': ['Jahren', 'Monaten', 'Tagen', 'Stunden', 'Minuten', 'Sekunden'],
+  'en': ['Years', 'Months', 'Days', 'Hours', 'Minutes', 'Seconds'],
+  'es': ['años', 'meses', 'días', 'horas', 'minutos', 'segundos'],
+  'fr': ['ans', 'mois', 'jours', 'heures', 'minutes', 'secondes'],
+  'id': ['tahun', 'bulan', 'hari', 'jam', 'menit', 'detik'],
+  'it': ['anni', 'mesi', 'giorni', 'ore', 'minuti', 'secondi'],
+  'ja': ['年', 'ヶ月', '日', '時間', '分', '秒'],
+  'ko': ['년', '달', '일', '시간', '분', '초'],
+  'nl': ['jaar', 'maanden', 'dagen', 'uur', 'minuten', 'seconden'],
+  'pt': ['anos', 'meses', 'dias', 'horas', 'minutos', 'segundos'],
+  'ru': ['год', 'месяц', 'день', 'час', 'минута', 'секунда'],
+  'th': ['ปี', 'เดือน', 'วัน', 'ชั่วโมง', 'นาที', 'วินาที'],
+  'tr': ['yıl', 'ay', 'gün', 'saat', 'dakika', 'saniye'],
+  'vi': ['năm', 'tháng', 'ngày', 'giờ', 'phút', 'giây'],
+  'zh-cn': ['年', '月', '天', '小时', '分钟', '秒'],
+  'zh-tw': ['年', '月', '天', '小時', '分鐘', '秒'],
+};
diff --git a/extensions/amp-date-countdown/1.0/package.json b/extensions/amp-date-countdown/1.0/package.json
new file mode 100644
index 0000000000000..e92e7b76c4b51
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-date-countdown",
+  "version": "VERSION",
+  "description": "AMP Date Countdown Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "./dist/component.js",
+  "module": "./dist/component-preact.module.js",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "./dist/component-preact.module.js",
+      "require": "./dist/component-preact.js"
+    },
+    "./react": {
+      "import": "./dist/component-react.module.js",
+      "require": "./dist/component-react.js"
+    }
+  },
+  "files": ["dist/*", "react.js"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml.git",
+    "directory": "extensions/amp-date-countdown/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-date-countdown/1.0",
+  "peerDependencies": {
+    "preact": "^10.2.1",
+    "react": "^17.0.0"
+  }
+}
diff --git a/extensions/amp-date-countdown/1.0/react.js b/extensions/amp-date-countdown/1.0/react.js
new file mode 100644
index 0000000000000..0b2957c35c38d
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/react.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-env node */
+// eslint-disable-next-line local/no-module-exports
+module.exports = require('./dist/component-react');
diff --git a/extensions/amp-date-countdown/1.0/storybook/Basic.amp.js b/extensions/amp-date-countdown/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..0d2998eceb73a
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/storybook/Basic.amp.js
@@ -0,0 +1,258 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, date, select, text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-date-countdown-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [
+      {name: 'amp-date-countdown', version: '1.0'},
+      {name: 'amp-mustache', version: '0.2'},
+    ],
+    experiments: ['bento'],
+  },
+};
+
+const DATE_ATTRIBUTE_CONFIGURATIONS = [
+  'end-date',
+  'timeleft-ms',
+  'timestamp-ms',
+  'timestamp-seconds',
+];
+
+const LOCALE_CONFIGURATIONS = [
+  'google',
+  'de',
+  'en',
+  'es',
+  'fr',
+  'id',
+  'it',
+  'ja',
+  'ko',
+  'nl',
+  'pt',
+  'ru',
+  'th',
+  'tr',
+  'vi',
+  'zh-cn',
+  'zh-tw',
+];
+
+const WHEN_ENDED_CONFIGURATIONS = ['stop', 'continue'];
+
+const BIGGEST_UNIT_CONFIGURATIONS = [
+  null,
+  'DAYS',
+  'HOURS',
+  'MINUTES',
+  'SECONDS',
+];
+
+export const Default = () => {
+  const dateAttribute = select(
+    'Select a "Date Attribute"',
+    DATE_ATTRIBUTE_CONFIGURATIONS,
+    DATE_ATTRIBUTE_CONFIGURATIONS[0]
+  );
+  const endDate = date('end-date', new Date(Date.now() + 10000));
+  const timeleftMs = text('timeleft-ms', 20000);
+  const timestampMs = text('timestamp-ms', Date.now() + 30000);
+  const timestampSeconds = text(
+    'timestamp-seconds',
+    Math.floor(Date.now() / 1000) + 40
+  );
+
+  const offsetSeconds = text('offset-seconds', 0);
+  const locale = select(
+    'locale',
+    LOCALE_CONFIGURATIONS,
+    LOCALE_CONFIGURATIONS[0]
+  );
+  const whenEnded = select(
+    'whenEnded',
+    WHEN_ENDED_CONFIGURATIONS,
+    WHEN_ENDED_CONFIGURATIONS[0]
+  );
+  const biggestUnit = select(
+    'biggestUnit',
+    BIGGEST_UNIT_CONFIGURATIONS,
+    BIGGEST_UNIT_CONFIGURATIONS[0]
+  );
+  const countUp = boolean('count-up', false);
+
+  return (
+    <amp-date-countdown
+      end-date={dateAttribute === 'end-date' ? new Date(endDate) : undefined}
+      timeleft-ms={dateAttribute === 'timeleft-ms' ? timeleftMs : undefined}
+      timestamp-ms={dateAttribute === 'timestamp-ms' ? timestampMs : undefined}
+      timestamp-seconds={
+        dateAttribute === 'timestamp-seconds' ? timestampSeconds : undefined
+      }
+      offset-seconds={offsetSeconds}
+      locale={locale}
+      when-ended={whenEnded}
+      biggest-unit={biggestUnit}
+      count-up={countUp}
+      layout="fixed-height"
+      height="100"
+    >
+      <template type="amp-mustache">
+        <div>
+          <span>{'{{days}} {{dd}} {{d}}'}</span>
+          <br />
+          <span>{'{{hours}} {{hh}} {{h}}'}</span>
+          <br />
+          <span>{'{{minutes}} {{mm}} {{m}}'}</span>
+          <br />
+          <span>{'{{seconds}} {{ss}} {{s}}'}</span>
+        </div>
+      </template>
+    </amp-date-countdown>
+  );
+};
+
+Default.storyName = 'default';
+
+export const DefaultRenderer = () => {
+  const dateAttribute = select(
+    'Select a "Date Attribute"',
+    DATE_ATTRIBUTE_CONFIGURATIONS,
+    DATE_ATTRIBUTE_CONFIGURATIONS[0]
+  );
+  const endDate = date('end-date', new Date(Date.now() + 10000));
+  const timeleftMs = text('timeleft-ms', 20000);
+  const timestampMs = text('timestamp-ms', Date.now() + 30000);
+  const timestampSeconds = text(
+    'timestamp-seconds',
+    Math.floor(Date.now() / 1000) + 40
+  );
+
+  const offsetSeconds = text('offset-seconds', 0);
+  const locale = select(
+    'locale',
+    LOCALE_CONFIGURATIONS,
+    LOCALE_CONFIGURATIONS[0]
+  );
+  const whenEnded = select(
+    'whenEnded',
+    WHEN_ENDED_CONFIGURATIONS,
+    WHEN_ENDED_CONFIGURATIONS[0]
+  );
+  const biggestUnit = select(
+    'biggestUnit',
+    BIGGEST_UNIT_CONFIGURATIONS,
+    BIGGEST_UNIT_CONFIGURATIONS[0]
+  );
+  const countUp = boolean('count-up', false);
+
+  return (
+    <amp-date-countdown
+      end-date={dateAttribute === 'end-date' ? new Date(endDate) : undefined}
+      timeleft-ms={dateAttribute === 'timeleft-ms' ? timeleftMs : undefined}
+      timestamp-ms={dateAttribute === 'timestamp-ms' ? timestampMs : undefined}
+      timestamp-seconds={
+        dateAttribute === 'timestamp-seconds' ? timestampSeconds : undefined
+      }
+      offset-seconds={offsetSeconds}
+      locale={locale}
+      when-ended={whenEnded}
+      biggest-unit={biggestUnit}
+      count-up={countUp}
+      layout="fixed-height"
+      height="100"
+    ></amp-date-countdown>
+  );
+};
+
+DefaultRenderer.storyName = 'default renderer';
+
+export const ExternalTemplate = () => {
+  const template = select('template', ['template1', 'template2'], 'template1');
+  const dateAttribute = select(
+    'Select a "Date Attribute"',
+    DATE_ATTRIBUTE_CONFIGURATIONS,
+    DATE_ATTRIBUTE_CONFIGURATIONS[0]
+  );
+  const endDate = date('end-date', new Date(Date.now() + 10000));
+  const timeleftMs = text('timeleft-ms', 20000);
+  const timestampMs = text('timestamp-ms', Date.now() + 30000);
+  const timestampSeconds = text(
+    'timestamp-seconds',
+    Math.floor(Date.now() / 1000) + 40
+  );
+
+  const offsetSeconds = text('offset-seconds', 0);
+  const locale = select(
+    'locale',
+    LOCALE_CONFIGURATIONS,
+    LOCALE_CONFIGURATIONS[0]
+  );
+  const whenEnded = select(
+    'whenEnded',
+    WHEN_ENDED_CONFIGURATIONS,
+    WHEN_ENDED_CONFIGURATIONS[0]
+  );
+  const biggestUnit = select(
+    'biggestUnit',
+    BIGGEST_UNIT_CONFIGURATIONS,
+    BIGGEST_UNIT_CONFIGURATIONS[0]
+  );
+  const countUp = boolean('count-up', false);
+
+  return (
+    <div>
+      <template type="amp-mustache" id="template1">
+        <div>
+          {`Template 1: {{s}} {{seconds}} {{m}} {{minutes}} {{h}} {{hours}}` +
+            ` {{d}} {{days}} `}
+        </div>
+      </template>
+      <template type="amp-mustache" id="template2">
+        <div>
+          {`Template 2: {{dd}} {{days}} {{hh}} {{hours}} {{mm}}` +
+            ` {{minutes}} {{ss}} {{seconds}}`}
+        </div>
+      </template>
+      <amp-date-countdown
+        end-date={dateAttribute === 'end-date' ? new Date(endDate) : undefined}
+        timeleft-ms={dateAttribute === 'timeleft-ms' ? timeleftMs : undefined}
+        timestamp-ms={
+          dateAttribute === 'timestamp-ms' ? timestampMs : undefined
+        }
+        timestamp-seconds={
+          dateAttribute === 'timestamp-seconds' ? timestampSeconds : undefined
+        }
+        offset-seconds={offsetSeconds}
+        locale={locale}
+        when-ended={whenEnded}
+        biggest-unit={biggestUnit}
+        count-up={countUp}
+        template={template}
+        layout="fixed-height"
+        height="100"
+      ></amp-date-countdown>
+    </div>
+  );
+};
+
+ExternalTemplate.storyName = 'external template';
diff --git a/extensions/amp-date-countdown/1.0/storybook/Basic.js b/extensions/amp-date-countdown/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..5ac15ae8f00a6
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/storybook/Basic.js
@@ -0,0 +1,130 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {DateCountdown} from '../component';
+import {boolean, date, select, withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'DateCountdown',
+  component: DateCountdown,
+  decorators: [withKnobs],
+};
+
+const LOCALE_CONFIGURATIONS = [
+  'google',
+  'de',
+  'en',
+  'es',
+  'fr',
+  'id',
+  'it',
+  'ja',
+  'ko',
+  'nl',
+  'pt',
+  'ru',
+  'th',
+  'tr',
+  'vi',
+  'zh-cn',
+  'zh-tw',
+];
+
+const WHEN_ENDED_CONFIGURATIONS = ['stop', 'continue'];
+
+const BIGGEST_UNIT_CONFIGURATIONS = [
+  null,
+  'DAYS',
+  'HOURS',
+  'MINUTES',
+  'SECONDS',
+];
+
+export const _default = () => {
+  const datetime = date('endDate', new Date(Date.now() + 10000));
+  const locale = select(
+    'locale',
+    LOCALE_CONFIGURATIONS,
+    LOCALE_CONFIGURATIONS[0]
+  );
+  const whenEnded = select(
+    'whenEnded',
+    WHEN_ENDED_CONFIGURATIONS,
+    WHEN_ENDED_CONFIGURATIONS[0]
+  );
+  const biggestUnit = select(
+    'biggestUnit',
+    BIGGEST_UNIT_CONFIGURATIONS,
+    BIGGEST_UNIT_CONFIGURATIONS[0]
+  );
+  const countUp = boolean('countUp', false);
+
+  return (
+    <div>
+      <DateCountdown
+        datetime={datetime}
+        locale={locale}
+        whenEnded={whenEnded}
+        biggestUnit={biggestUnit}
+        countUp={countUp}
+        render={(data) => (
+          <div>
+            <span>{`${data.days} ${data.dd} ${data.d}`}</span>
+            <br />
+            <span>{`${data.hours} ${data.hh} ${data.h}`}</span>
+            <br />
+            <span>{`${data.minutes} ${data.mm} ${data.m}`}</span>
+            <br />
+            <span>{`${data.seconds} ${data.ss} ${data.s}`}</span>
+          </div>
+        )}
+      ></DateCountdown>
+    </div>
+  );
+};
+
+export const defaultRenderer = () => {
+  const datetime = date('endDate', new Date(Date.now() + 10000));
+  const locale = select(
+    'locale',
+    LOCALE_CONFIGURATIONS,
+    LOCALE_CONFIGURATIONS[0]
+  );
+  const whenEnded = select(
+    'whenEnded',
+    WHEN_ENDED_CONFIGURATIONS,
+    WHEN_ENDED_CONFIGURATIONS[0]
+  );
+  const biggestUnit = select(
+    'biggestUnit',
+    BIGGEST_UNIT_CONFIGURATIONS,
+    BIGGEST_UNIT_CONFIGURATIONS[0]
+  );
+  const countUp = boolean('countUp', false);
+
+  return (
+    <div>
+      <DateCountdown
+        datetime={datetime}
+        locale={locale}
+        whenEnded={whenEnded}
+        biggestUnit={biggestUnit}
+        countUp={countUp}
+      ></DateCountdown>
+    </div>
+  );
+};
diff --git a/extensions/amp-date-countdown/1.0/test-e2e/test-amp-date-countdown.js b/extensions/amp-date-countdown/1.0/test-e2e/test-amp-date-countdown.js
new file mode 100644
index 0000000000000..48d91bb2e849e
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/test-e2e/test-amp-date-countdown.js
@@ -0,0 +1,85 @@
+/**
+ * Copyright 2021 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.
+ */
+
+describes.endtoend(
+  'amp-date-countdown',
+  {
+    version: '1.0',
+    fixture: 'amp-date-countdown/amp-date-countdown.html',
+    experiments: ['bento-date-countdown'],
+    environments: ['single', 'viewer-demo'],
+  },
+  async (env) => {
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    it('renders a custom mustache template', async () => {
+      const template = await controller.findElement('#one div');
+
+      const text = await controller.getElementProperty(template, 'textContent');
+      const data = JSON.parse(text.trim());
+
+      await expect(data['d']).to.equal('0');
+      await expect(data['dd']).to.equal('00');
+      await expect(data['h']).to.equal('0');
+      await expect(data['hh']).to.equal('00');
+      await expect(data['m']).to.equal('0');
+      await expect(data['mm']).to.equal('00');
+      await expect(data['s']).to.equal('0');
+      await expect(data['ss']).to.equal('00');
+
+      await expect(data['years']).to.equal('Years');
+      await expect(data['months']).to.equal('Months');
+      await expect(data['days']).to.equal('Days');
+      await expect(data['hours']).to.equal('Hours');
+      await expect(data['minutes']).to.equal('Minutes');
+      await expect(data['seconds']).to.equal('Seconds');
+    });
+
+    it('renders default template', async () => {
+      const template = await controller.findElement('#two div');
+
+      const text = await controller.getElementProperty(template, 'textContent');
+      await expect(text).to.equal('Days 00, Hours 00, Minutes 00, Seconds 00');
+    });
+
+    it('renders correct time and locale respecting biggest unit', async () => {
+      const template = await controller.findElement('#three div');
+
+      const text = await controller.getElementProperty(template, 'textContent');
+      const data = JSON.parse(text.trim());
+
+      await expect(data['d']).to.equal('0');
+      await expect(data['dd']).to.equal('00');
+      await expect(data['h']).to.equal('27');
+      await expect(data['hh']).to.equal('27');
+      await expect(data['m']).to.equal('46');
+      await expect(data['mm']).to.equal('46');
+      // omit check for seconds as it causes flakiness
+      // due to rendering timing
+
+      await expect(data['years']).to.equal('Jahren');
+      await expect(data['months']).to.equal('Monaten');
+      await expect(data['days']).to.equal('Tagen');
+      await expect(data['hours']).to.equal('Stunden');
+      await expect(data['minutes']).to.equal('Minuten');
+      await expect(data['seconds']).to.equal('Sekunden');
+    });
+  }
+);
diff --git a/extensions/amp-date-countdown/1.0/test/test-amp-date-countdown.js b/extensions/amp-date-countdown/1.0/test/test-amp-date-countdown.js
new file mode 100644
index 0000000000000..bf9d4804bb4a1
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/test/test-amp-date-countdown.js
@@ -0,0 +1,213 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import '../../../amp-mustache/0.2/amp-mustache';
+import '../amp-date-countdown';
+import {waitFor} from '../../../../testing/test-helper.js';
+import {whenUpgradedToCustomElement} from '../../../../src/dom';
+
+describes.realWin(
+  'amp-date-countdown 1.0',
+  {
+    amp: {
+      extensions: ['amp-mustache:0.2', 'amp-date-countdown:1.0'],
+    },
+  },
+  (env) => {
+    let win;
+    let element, template;
+    let originalDateNow;
+
+    async function waitRendered() {
+      await whenUpgradedToCustomElement(element);
+      await element.buildInternal();
+      await waitFor(() => {
+        // The rendered container inserts a <div> element.
+        const div = element.querySelector('div');
+        return div && div.textContent;
+      }, 'wrapper div rendered');
+      return element.querySelector('div');
+    }
+
+    async function getRenderedData() {
+      const wrapper = await waitRendered();
+      return JSON.parse(wrapper.textContent);
+    }
+
+    beforeEach(() => {
+      win = env.win;
+      element = win.document.createElement('amp-date-countdown');
+      template = win.document.createElement('template');
+      template.setAttribute('type', 'amp-mustache');
+      template.content.textContent = JSON.stringify({
+        years: '{{years}}',
+        months: '{{months}}',
+        days: '{{days}}',
+        hours: '{{hours}}',
+        minutes: '{{minutes}}',
+        seconds: '{{seconds}}',
+        d: '{{d}}',
+        dd: '{{dd}}',
+        h: '{{h}}',
+        hh: '{{hh}}',
+        m: '{{m}}',
+        mm: '{{mm}}',
+        s: '{{s}}',
+        ss: '{{ss}}',
+      });
+      element.appendChild(template);
+      element.setAttribute('layout', 'nodisplay');
+
+      // Mock Date.now()
+      originalDateNow = Date.now;
+      const mockedDateNow = () => Date.parse('2018-01-01T08:00:00Z');
+      Date.now = mockedDateNow;
+    });
+
+    afterEach(() => {
+      // Replace Date.now with its original native function
+      Date.now = originalDateNow;
+    });
+
+    it('renders mustache template into element', async () => {
+      element.setAttribute('end-date', '2018-01-01T08:00:10Z');
+      win.document.body.appendChild(element);
+
+      const data = await getRenderedData();
+
+      expect(data['d']).to.equal('0');
+      expect(data['dd']).to.equal('00');
+      expect(data['h']).to.equal('0');
+      expect(data['hh']).to.equal('00');
+      expect(data['m']).to.equal('0');
+      expect(data['mm']).to.equal('00');
+      expect(data['s']).to.equal('11');
+      expect(data['ss']).to.equal('11');
+
+      expect(data['years']).to.equal('Years');
+      expect(data['months']).to.equal('Months');
+      expect(data['days']).to.equal('Days');
+      expect(data['hours']).to.equal('Hours');
+      expect(data['minutes']).to.equal('Minutes');
+      expect(data['seconds']).to.equal('Seconds');
+    });
+
+    it('renders default template into element', async () => {
+      element.setAttribute('end-date', '2018-01-01T08:00:10Z');
+      element.removeChild(template);
+      win.document.body.appendChild(element);
+
+      const wrapper = await waitRendered();
+      expect(wrapper.textContent).to.equal(
+        'Days 00, Hours 00, Minutes 00, Seconds 11'
+      );
+    });
+
+    it('renders template with end-date attribute', async () => {
+      element.setAttribute('end-date', '2018-01-01T08:00:10Z');
+      win.document.body.appendChild(element);
+
+      const data = await getRenderedData();
+
+      // component adds 1 second delay for real world execution delay
+      expect(data['d']).to.equal('0');
+      expect(data['dd']).to.equal('00');
+      expect(data['h']).to.equal('0');
+      expect(data['hh']).to.equal('00');
+      expect(data['m']).to.equal('0');
+      expect(data['mm']).to.equal('00');
+      expect(data['s']).to.equal('11');
+      expect(data['ss']).to.equal('11');
+    });
+
+    it('renders template with timeleft-ms attribute', async () => {
+      // count to 10 seconds (10000ms) from now
+      element.setAttribute('timeleft-ms', '10000');
+      win.document.body.appendChild(element);
+
+      const data = await getRenderedData();
+
+      // component adds 1 second delay for real world execution delay
+      expect(data['d']).to.equal('0');
+      expect(data['dd']).to.equal('00');
+      expect(data['h']).to.equal('0');
+      expect(data['hh']).to.equal('00');
+      expect(data['m']).to.equal('0');
+      expect(data['mm']).to.equal('00');
+      expect(data['s']).to.equal('11');
+      expect(data['ss']).to.equal('11');
+    });
+
+    it('renders template with timestamp-ms attribute', async () => {
+      // this is epoch time of '2018-01-01T08:00:10Z'
+      // clock starts with 10 seconds on it
+      element.setAttribute('timestamp-ms', Date.parse('2018-01-01T08:00:10Z'));
+      win.document.body.appendChild(element);
+
+      const data = await getRenderedData();
+
+      // component adds 1 second delay for real world execution delay
+      expect(data['d']).to.equal('0');
+      expect(data['dd']).to.equal('00');
+      expect(data['h']).to.equal('0');
+      expect(data['hh']).to.equal('00');
+      expect(data['m']).to.equal('0');
+      expect(data['mm']).to.equal('00');
+      expect(data['s']).to.equal('11');
+      expect(data['ss']).to.equal('11');
+    });
+
+    it('renders template with timestamp-seconds attribute', async () => {
+      // this is epoch time of '2018-01-01T08:00:10Z'
+      // clock starts with 10 seconds on it
+      element.setAttribute(
+        'timestamp-seconds',
+        Date.parse('2018-01-01T08:00:10Z') / 1000
+      );
+      win.document.body.appendChild(element);
+
+      const data = await getRenderedData();
+
+      // component adds 1 second delay for real world execution delay
+      expect(data['d']).to.equal('0');
+      expect(data['dd']).to.equal('00');
+      expect(data['h']).to.equal('0');
+      expect(data['hh']).to.equal('00');
+      expect(data['m']).to.equal('0');
+      expect(data['mm']).to.equal('00');
+      expect(data['s']).to.equal('11');
+      expect(data['ss']).to.equal('11');
+    });
+
+    it('renders template with offset-seconds attribute', async () => {
+      element.setAttribute('end-date', '2018-01-01T08:00:10Z');
+      element.setAttribute('offset-seconds', '10');
+      win.document.body.appendChild(element);
+
+      const data = await getRenderedData();
+
+      // component adds 1 second delay for real world execution delay
+      expect(data['d']).to.equal('0');
+      expect(data['dd']).to.equal('00');
+      expect(data['h']).to.equal('0');
+      expect(data['hh']).to.equal('00');
+      expect(data['m']).to.equal('0');
+      expect(data['mm']).to.equal('00');
+      expect(data['s']).to.equal('21');
+      expect(data['ss']).to.equal('21');
+    });
+  }
+);
diff --git a/extensions/amp-date-countdown/1.0/test/test-component.js b/extensions/amp-date-countdown/1.0/test/test-component.js
new file mode 100644
index 0000000000000..abe26c7d25e38
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/test/test-component.js
@@ -0,0 +1,461 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {DateCountdown} from '../component';
+import {mount} from 'enzyme';
+
+describes.sandboxed('DateCountdown 1.0 preact component', {}, (env) => {
+  let sandbox;
+  let clock;
+
+  function render(data) {
+    return JSON.stringify(
+      data,
+      (key, value) => {
+        if (typeof value === 'number') {
+          return String(value);
+        }
+        return value;
+      },
+      4
+    );
+  }
+
+  beforeEach(() => {
+    sandbox = env.sandbox;
+    clock = sandbox.useFakeTimers(new Date('2018-01-01T08:00:00Z'));
+  });
+
+  afterEach(() => {
+    clock.runAll();
+  });
+
+  function syncPromise(response) {
+    return {
+      then(callback) {
+        callback(response);
+      },
+    };
+  }
+
+  it('should render as a div by default', () => {
+    const props = {
+      render,
+      datetime: Date.parse('2018-01-01T08:00:00Z'),
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+
+    // Generic test for the Wrapper
+    // This is actually fairly arbitrary that it should be a "div". But it's
+    // checked here to ensure that we can change it controllably when needed.
+    expect(wrapper.getDOMNode().tagName).to.equal('DIV');
+  });
+
+  it('should default to english locale if invalid locale provided', () => {
+    const originalWarn = console.warn;
+    const consoleOutput = [];
+    const mockedWarn = (output) => consoleOutput.push(output);
+    console.warn = mockedWarn;
+
+    const props = {
+      render,
+      datetime: Date.parse('2018-01-01T08:00:00Z'),
+      locale: 'invalid-locale',
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    const data = JSON.parse(wrapper.text());
+
+    // Check that warning message is print to the screen
+    expect(consoleOutput.length).to.equal(1);
+    expect(consoleOutput[0]).to.equal(
+      'Invalid locale invalid-locale, defaulting to en. DateCountdown'
+    );
+
+    expect(data['years']).to.equal('Years');
+    expect(data['months']).to.equal('Months');
+    expect(data['days']).to.equal('Days');
+    expect(data['hours']).to.equal('Hours');
+    expect(data['minutes']).to.equal('Minutes');
+    expect(data['seconds']).to.equal('Seconds');
+
+    console.warn = originalWarn;
+  });
+
+  it('should count down if target date is in the future', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have 10 seconds on it
+    const props = {
+      render,
+      datetime: Date.parse('2018-01-01T08:00:10Z'),
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    let data = JSON.parse(wrapper.text());
+
+    // Component adds one second delay for slight execution delay in real world
+    // In our mocked clock situation, we start with 11 seconds on the clock
+    expect(data['d']).to.equal('0');
+    expect(data['dd']).to.equal('00');
+    expect(data['h']).to.equal('0');
+    expect(data['hh']).to.equal('00');
+    expect(data['m']).to.equal('0');
+    expect(data['mm']).to.equal('00');
+    expect(data['s']).to.equal('11');
+    expect(data['ss']).to.equal('11');
+
+    // Count down 3 seconds
+    clock.tick(3000);
+    wrapper.update();
+    data = JSON.parse(wrapper.text());
+
+    expect(data['d']).to.equal('0');
+    expect(data['dd']).to.equal('00');
+    expect(data['h']).to.equal('0');
+    expect(data['hh']).to.equal('00');
+    expect(data['m']).to.equal('0');
+    expect(data['mm']).to.equal('00');
+    expect(data['s']).to.equal('8');
+    expect(data['ss']).to.equal('08');
+  });
+
+  it('should display a negative number if target date is in the past', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have negative 1 year on it
+    const props = {
+      render,
+      datetime: Date.parse('2017-01-01T08:00:00Z'),
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    const data = JSON.parse(wrapper.text());
+
+    // Component adds one second delay for slight execution delay in real world
+    expect(data['d']).to.equal('-364');
+    expect(data['dd']).to.equal('-364');
+    expect(data['h']).to.equal('-23');
+    expect(data['hh']).to.equal('-23');
+    expect(data['m']).to.equal('-59');
+    expect(data['mm']).to.equal('-59');
+    expect(data['s']).to.equal('-58');
+    expect(data['ss']).to.equal('-58');
+  });
+
+  it('should count down to and stop at 0 by default', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have 10 seconds on it
+    const props = {
+      render,
+      datetime: Date.parse('2018-01-01T08:00:10Z'),
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    let data = JSON.parse(wrapper.text());
+
+    // Count down 15 seconds
+    clock.tick(15000);
+    wrapper.update();
+    data = JSON.parse(wrapper.text());
+
+    expect(data['d']).to.equal('0');
+    expect(data['dd']).to.equal('00');
+    expect(data['h']).to.equal('0');
+    expect(data['hh']).to.equal('00');
+    expect(data['m']).to.equal('0');
+    expect(data['mm']).to.equal('00');
+    expect(data['s']).to.equal('0');
+    expect(data['ss']).to.equal('00');
+  });
+
+  it('should count down past 0 if whenEnded is set to "continue"', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have 10 seconds on it
+    const props = {
+      render,
+      datetime: Date.parse('2018-01-01T08:00:10Z'),
+      whenEnded: 'continue',
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    let data = JSON.parse(wrapper.text());
+
+    // Count down 15 seconds
+    clock.tick(15000);
+    wrapper.update();
+    data = JSON.parse(wrapper.text());
+
+    expect(data['d']).to.equal('0');
+    expect(data['dd']).to.equal('00');
+    expect(data['h']).to.equal('0');
+    expect(data['hh']).to.equal('00');
+    expect(data['m']).to.equal('0');
+    expect(data['mm']).to.equal('00');
+    expect(data['s']).to.equal('-3');
+    expect(data['ss']).to.equal('-03');
+
+    wrapper.unmount();
+  });
+
+  it('should count up when countUp prop is set to "true"', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have -10 seconds on it
+    const props = {
+      render,
+      datetime: Date.parse('2018-01-01T08:00:10Z'),
+      countUp: true,
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    let data = JSON.parse(wrapper.text());
+
+    // Count up 7 seconds
+    clock.tick(7000);
+    wrapper.update();
+    data = JSON.parse(wrapper.text());
+
+    // -3 seconds left on the clock
+    expect(data['d']).to.equal('0');
+    expect(data['dd']).to.equal('00');
+    expect(data['h']).to.equal('0');
+    expect(data['hh']).to.equal('00');
+    expect(data['m']).to.equal('0');
+    expect(data['mm']).to.equal('00');
+    expect(data['s']).to.equal('-3');
+    expect(data['ss']).to.equal('-03');
+
+    // Count up 10 more seconds
+    clock.tick(10000);
+    wrapper.update();
+    data = JSON.parse(wrapper.text());
+
+    // 0 seconds left on the clock (does not continue past 0)
+    expect(data['d']).to.equal('0');
+    expect(data['dd']).to.equal('00');
+    expect(data['h']).to.equal('0');
+    expect(data['hh']).to.equal('00');
+    expect(data['m']).to.equal('0');
+    expect(data['mm']).to.equal('00');
+    expect(data['s']).to.equal('0');
+    expect(data['ss']).to.equal('00');
+
+    wrapper.unmount();
+  });
+
+  it('should count up past 0 when whenEnded prop is set to "continue"', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have -10 seconds on it
+    const props = {
+      render,
+      datetime: Date.parse('2018-01-01T08:00:10Z'),
+      countUp: true,
+      whenEnded: 'continue',
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    let data = JSON.parse(wrapper.text());
+
+    // Count up 15 seconds
+    clock.tick(15000);
+    wrapper.update();
+    data = JSON.parse(wrapper.text());
+
+    // 4 seconds on the clock counting upwards (has an extra second at 0)
+    expect(data['d']).to.equal('0');
+    expect(data['dd']).to.equal('00');
+    expect(data['h']).to.equal('0');
+    expect(data['hh']).to.equal('00');
+    expect(data['m']).to.equal('0');
+    expect(data['mm']).to.equal('00');
+    expect(data['s']).to.equal('4');
+    expect(data['ss']).to.equal('04');
+
+    wrapper.unmount();
+  });
+
+  it('should display biggest unit as "days" by default', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have 1 day and 10 seconds on it
+    const props = {
+      render,
+      datetime: Date.parse('2018-01-02T08:00:10Z'),
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    const data = JSON.parse(wrapper.text());
+
+    // Component adds one second delay for slight execution delay in real world
+    // In our mocked clock situation, we start with 11 seconds on the clock
+    expect(data['d']).to.equal('1');
+    expect(data['dd']).to.equal('01');
+    expect(data['h']).to.equal('0');
+    expect(data['hh']).to.equal('00');
+    expect(data['m']).to.equal('0');
+    expect(data['mm']).to.equal('00');
+    expect(data['s']).to.equal('11');
+    expect(data['ss']).to.equal('11');
+
+    wrapper.unmount();
+  });
+
+  it('should display biggest unit as "hours" when set', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have 1 day and 10 seconds on it
+    const props = {
+      render,
+      datetime: Date.parse('2018-01-02T08:00:10Z'),
+      biggestUnit: 'HOURS',
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    const data = JSON.parse(wrapper.text());
+
+    // Component adds one second delay for slight execution delay in real world
+    // In our mocked clock situation, we start with 11 seconds on the clock
+    expect(data['d']).to.equal('0');
+    expect(data['dd']).to.equal('00');
+    expect(data['h']).to.equal('24');
+    expect(data['hh']).to.equal('24');
+    expect(data['m']).to.equal('0');
+    expect(data['mm']).to.equal('00');
+    expect(data['s']).to.equal('11');
+    expect(data['ss']).to.equal('11');
+
+    wrapper.unmount();
+  });
+
+  it('should display biggest unit as "minutes" when set', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have 1 day and 10 seconds on it
+    const props = {
+      render,
+      datetime: Date.parse('2018-01-02T08:00:10Z'),
+      biggestUnit: 'MINUTES',
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    const data = JSON.parse(wrapper.text());
+
+    // Component adds one second delay for slight execution delay in real world
+    // In our mocked clock situation, we start with 11 seconds on the clock
+    expect(data['d']).to.equal('0');
+    expect(data['dd']).to.equal('00');
+    expect(data['h']).to.equal('0');
+    expect(data['hh']).to.equal('00');
+    expect(data['m']).to.equal('1440');
+    expect(data['mm']).to.equal('1440');
+    expect(data['s']).to.equal('11');
+    expect(data['ss']).to.equal('11');
+
+    wrapper.unmount();
+  });
+
+  it('should display biggest unit as "seconds" when set', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have 1 day and 10 seconds on it
+    const props = {
+      render,
+      datetime: Date.parse('2018-01-02T08:00:10Z'),
+      biggestUnit: 'SECONDS',
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    const data = JSON.parse(wrapper.text());
+
+    // Component adds one second delay for slight execution delay in real world
+    // In our mocked clock situation, we start with 11 seconds on the clock
+    expect(data['d']).to.equal('0');
+    expect(data['dd']).to.equal('00');
+    expect(data['h']).to.equal('0');
+    expect(data['hh']).to.equal('00');
+    expect(data['m']).to.equal('0');
+    expect(data['mm']).to.equal('00');
+    expect(data['s']).to.equal('86411');
+    expect(data['ss']).to.equal('86411');
+
+    wrapper.unmount();
+  });
+
+  it('should handle an async renderer', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have 10 seconds on it
+    const props = {
+      render: (data) => syncPromise(render(data)),
+      datetime: Date.parse('2018-01-01T08:00:10Z'),
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    const data = JSON.parse(wrapper.text());
+
+    // Component adds one second delay for slight execution delay in real world
+    // In our mocked clock situation, we start with 11 seconds on the clock
+    expect(data['d']).to.equal('0');
+    expect(data['dd']).to.equal('00');
+    expect(data['h']).to.equal('0');
+    expect(data['hh']).to.equal('00');
+    expect(data['m']).to.equal('0');
+    expect(data['mm']).to.equal('00');
+    expect(data['s']).to.equal('11');
+    expect(data['ss']).to.equal('11');
+  });
+
+  it('should use the default renderer when a renderer is not provided', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have 10 seconds on it
+    const props = {
+      datetime: Date.parse('2018-01-01T08:00:10Z'),
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+
+    // Component adds one second delay for slight execution delay in real world
+    // In our mocked clock situation, we start with 11 seconds on the clock
+    expect(wrapper.text()).to.equal(
+      'Days 00, Hours 00, Minutes 00, Seconds 11'
+    );
+  });
+
+  it('should accept a Date type object for the datetime prop', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have 10 seconds on it
+    const props = {
+      render,
+      datetime: new Date('2018-01-01T08:00:10Z'),
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    const data = JSON.parse(wrapper.text());
+
+    // Component adds one second delay for slight execution delay in real world
+    // In our mocked clock situation, we start with 11 seconds on the clock
+    expect(data['d']).to.equal('0');
+    expect(data['dd']).to.equal('00');
+    expect(data['h']).to.equal('0');
+    expect(data['hh']).to.equal('00');
+    expect(data['m']).to.equal('0');
+    expect(data['mm']).to.equal('00');
+    expect(data['s']).to.equal('11');
+    expect(data['ss']).to.equal('11');
+  });
+
+  it('should accept a String type object for the datetime prop', () => {
+    // Reference date is 2018-01-01T08:00:00Z
+    // Timer should have 10 seconds on it
+    const props = {
+      render,
+      datetime: '2018-01-01T08:00:10Z',
+    };
+    const wrapper = mount(<DateCountdown {...props} />);
+    const data = JSON.parse(wrapper.text());
+
+    // Component adds one second delay for slight execution delay in real world
+    // In our mocked clock situation, we start with 11 seconds on the clock
+    expect(data['d']).to.equal('0');
+    expect(data['dd']).to.equal('00');
+    expect(data['h']).to.equal('0');
+    expect(data['hh']).to.equal('00');
+    expect(data['m']).to.equal('0');
+    expect(data['mm']).to.equal('00');
+    expect(data['s']).to.equal('11');
+    expect(data['ss']).to.equal('11');
+  });
+});
diff --git a/extensions/amp-date-countdown/1.0/test/validator-amp-date-countdown.html b/extensions/amp-date-countdown/1.0/test/validator-amp-date-countdown.html
new file mode 100644
index 0000000000000..f878e7e2de707
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/test/validator-amp-date-countdown.html
@@ -0,0 +1,174 @@
+<!--
+  Copyright 2018 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.
+-->
+<!--
+  Test Description:
+  This is the minimum valid AMP document; it includes all of the required
+  fields from the spec, but nothing else.
+-->
+<!DOCTYPE html>
+<!-- prettier-ignore -->
+<html ⚡>
+  <head>
+  <meta charset="utf-8">
+  <title>amp-date-countdown example</title>
+  <link rel="canonical" href="amps.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+    amp-date-countdown {
+      display: block;
+    }
+    h1{
+      color: #396;
+      font-weight: 100;
+      font-size: 20px;
+    }
+
+    #clockdiv{
+      font-family: sans-serif;
+      color: #fff;
+      display: inline-block;
+      font-weight: 100;
+      text-align: center;
+      font-size: 20px;
+      background: #00ECB9;
+      padding: 20px;
+    }
+
+    #clockdiv > div{
+      padding: 10px;
+      border-radius: 3px;
+      background: #00BF96;
+      display: inline-block;
+    }
+
+    #clockdiv div > span{
+      padding: 15px;
+      border-radius: 3px;
+      background: #00816A;
+      display: inline-block;
+    }
+
+    .smalltext{
+      padding-top: 5px;
+      font-size: 16px;
+    }
+    .date-count-down {
+      color: blue;
+    }
+    .date-count-down span{
+      color: red;
+    }
+    #sample2 {
+      visibility: hidden;
+    }
+  </style>
+  <script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-1.0.js"></script>
+  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
+  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-animation id="hide-timeout-event" layout="nodisplay">
+      <script type="application/json">
+          {
+              "duration": "1s",
+              "fill": "both",
+              "selector": "#ampdate, #sample",
+              "keyframes": { "visibility": "hidden"}
+          }
+      </script>
+  </amp-animation>
+  <amp-animation id="show-timeout-event" layout="nodisplay">
+      <script type="application/json">
+          {
+              "duration": "1s",
+              "fill": "both",
+              "selector": "#sample2",
+              "keyframes": { "visibility": "visible"}
+          }
+      </script>
+  </amp-animation>
+  <h1 id="sample">
+      When Timer hits 0, will hide the timer itself and hide this message.
+  </h1>
+  <h1 id="sample2">
+      When Timer hits 0, will hide the timer itself and display this message.
+  </h1>
+  <amp-date-countdown id="ampdate" end-date="2020-06-20T11:22:00+08:00" on="timeout: hide-timeout-event.start, show-timeout-event.start" height="235" width="400" when-ended="stop" locale='en'>
+    <template type="amp-mustache">
+      <h1>Countdown Clock</h1>
+      <div id="clockdiv">
+        {{#d}}
+          <div>
+            <span class="d">{{d}}</span>
+            <div class="smalltext">{{days}}</div>
+          </div>
+        {{/d}}
+        {{#h}}
+          <div>
+            <span class="h">{{h}}</span>
+            <div class="smalltext">{{hours}}</div>
+          </div>
+        {{/h}}
+        <div>
+          <span class="m">{{m}}</span>
+          <div class="smalltext">{{minutes}}</div>
+        </div>
+        <div>
+          <span class="s">{{s}}</span>
+          <div class="smalltext">{{seconds}}</div>
+        </div>
+      </div>
+      <div class="date-count-down">
+        {{#d}} {{dd}} <span>{{days}}</span> {{/d}}
+        {{#hh}} {{h}} <span>{{hours}}</span> {{/hh}}
+        {{#mm}} {{mm}} <span>{{minutes}}</span> {{/mm}}
+        {{ss}} <span>{{seconds}}</span>
+      </div>
+      <div>
+        {{dd}} : {{hh}} : {{mm}} : {{ss}}
+      </div>
+    </template>
+  </amp-date-countdown>
+
+  <template type="amp-mustache" id="myTemplate">
+    <div class="date-count-down">
+      {{#d}} {{d}} <span>{{days}}</span> {{/d}}
+      {{h}} <span>{{hours}}</span>
+      {{m}} <span>{{minutes}}</span>
+      {{s}} <span>{{seconds}}</span>
+    </div>
+  </template>
+
+  <!-- Should support the `template` attribute to reference <template> by ID. -->
+  <amp-date-countdown timestamp-ms="1521880470000" offset-seconds="1521880470" when-ended="stop" locale='zh-tw' height="50" width="360" template="myTemplate">
+  </amp-date-countdown>
+
+  <amp-date-countdown timestamp-seconds="1521880470" offset-seconds="1521880470" when-ended="continue" locale='de' height="50" width="360" template="myTemplate">
+  </amp-date-countdown>
+
+  <!-- Should error if the `template` referent is missing. -->
+  <amp-date-countdown timestamp-ms="1521880470000" offset-seconds="1521880470" when-ended="stop" locale='zh-tw' height="50" width="360" template="notMyTemplate">
+  </amp-date-countdown>
+
+  <!-- Should allow `data-count-up` attribute. -->
+  <amp-date-countdown data-count-up timestamp-seconds="1521880470" offset-seconds="1521880470" when-ended="continue" locale='de' height="50" width="360" template="myTemplate">
+  </amp-date-countdown>
+
+  <!-- Should error if `data-count-up` attribute is given a non-empty value. -->
+  <amp-date-countdown data-count-up="true" timestamp-seconds="1521880470" offset-seconds="1521880470" when-ended="continue" locale='de' height="50" width="360" template="myTemplate">
+  </amp-date-countdown>
+
+</body>
+</html>
diff --git a/extensions/amp-date-countdown/1.0/test/validator-amp-date-countdown.out b/extensions/amp-date-countdown/1.0/test/validator-amp-date-countdown.out
new file mode 100644
index 0000000000000..0a556753d91ae
--- /dev/null
+++ b/extensions/amp-date-countdown/1.0/test/validator-amp-date-countdown.out
@@ -0,0 +1,179 @@
+FAIL
+|  <!--
+|    Copyright 2018 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This is the minimum valid AMP document; it includes all of the required
+|    fields from the spec, but nothing else.
+|  -->
+|  <!DOCTYPE html>
+|  <!-- prettier-ignore -->
+|  <html ⚡>
+|    <head>
+|    <meta charset="utf-8">
+|    <title>amp-date-countdown example</title>
+|    <link rel="canonical" href="amps.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <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>
+|      amp-date-countdown {
+|        display: block;
+|      }
+|      h1{
+|        color: #396;
+|        font-weight: 100;
+|        font-size: 20px;
+|      }
+|
+|      #clockdiv{
+|        font-family: sans-serif;
+|        color: #fff;
+|        display: inline-block;
+|        font-weight: 100;
+|        text-align: center;
+|        font-size: 20px;
+|        background: #00ECB9;
+|        padding: 20px;
+|      }
+|
+|      #clockdiv > div{
+|        padding: 10px;
+|        border-radius: 3px;
+|        background: #00BF96;
+|        display: inline-block;
+|      }
+|
+|      #clockdiv div > span{
+|        padding: 15px;
+|        border-radius: 3px;
+|        background: #00816A;
+|        display: inline-block;
+|      }
+|
+|      .smalltext{
+|        padding-top: 5px;
+|        font-size: 16px;
+|      }
+|      .date-count-down {
+|        color: blue;
+|      }
+|      .date-count-down span{
+|        color: red;
+|      }
+|      #sample2 {
+|        visibility: hidden;
+|      }
+|    </style>
+|    <script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-1.0.js"></script>
+|    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
+|    <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|    <amp-animation id="hide-timeout-event" layout="nodisplay">
+|        <script type="application/json">
+|            {
+|                "duration": "1s",
+|                "fill": "both",
+|                "selector": "#ampdate, #sample",
+|                "keyframes": { "visibility": "hidden"}
+|            }
+|        </script>
+|    </amp-animation>
+|    <amp-animation id="show-timeout-event" layout="nodisplay">
+|        <script type="application/json">
+|            {
+|                "duration": "1s",
+|                "fill": "both",
+|                "selector": "#sample2",
+|                "keyframes": { "visibility": "visible"}
+|            }
+|        </script>
+|    </amp-animation>
+|    <h1 id="sample">
+|        When Timer hits 0, will hide the timer itself and hide this message.
+|    </h1>
+|    <h1 id="sample2">
+|        When Timer hits 0, will hide the timer itself and display this message.
+|    </h1>
+|    <amp-date-countdown id="ampdate" end-date="2020-06-20T11:22:00+08:00" on="timeout: hide-timeout-event.start, show-timeout-event.start" height="235" width="400" when-ended="stop" locale='en'>
+|      <template type="amp-mustache">
+|        <h1>Countdown Clock</h1>
+|        <div id="clockdiv">
+|          {{#d}}
+|            <div>
+|              <span class="d">{{d}}</span>
+|              <div class="smalltext">{{days}}</div>
+|            </div>
+|          {{/d}}
+|          {{#h}}
+|            <div>
+|              <span class="h">{{h}}</span>
+|              <div class="smalltext">{{hours}}</div>
+|            </div>
+|          {{/h}}
+|          <div>
+|            <span class="m">{{m}}</span>
+|            <div class="smalltext">{{minutes}}</div>
+|          </div>
+|          <div>
+|            <span class="s">{{s}}</span>
+|            <div class="smalltext">{{seconds}}</div>
+|          </div>
+|        </div>
+|        <div class="date-count-down">
+|          {{#d}} {{dd}} <span>{{days}}</span> {{/d}}
+|          {{#hh}} {{h}} <span>{{hours}}</span> {{/hh}}
+|          {{#mm}} {{mm}} <span>{{minutes}}</span> {{/mm}}
+|          {{ss}} <span>{{seconds}}</span>
+|        </div>
+|        <div>
+|          {{dd}} : {{hh}} : {{mm}} : {{ss}}
+|        </div>
+|      </template>
+|    </amp-date-countdown>
+|
+|    <template type="amp-mustache" id="myTemplate">
+|      <div class="date-count-down">
+|        {{#d}} {{d}} <span>{{days}}</span> {{/d}}
+|        {{h}} <span>{{hours}}</span>
+|        {{m}} <span>{{minutes}}</span>
+|        {{s}} <span>{{seconds}}</span>
+|      </div>
+|    </template>
+|
+|    <!-- Should support the `template` attribute to reference <template> by ID. -->
+|    <amp-date-countdown timestamp-ms="1521880470000" offset-seconds="1521880470" when-ended="stop" locale='zh-tw' height="50" width="360" template="myTemplate">
+|    </amp-date-countdown>
+|
+|    <amp-date-countdown timestamp-seconds="1521880470" offset-seconds="1521880470" when-ended="continue" locale='de' height="50" width="360" template="myTemplate">
+|    </amp-date-countdown>
+|
+|    <!-- Should error if the `template` referent is missing. -->
+|    <amp-date-countdown timestamp-ms="1521880470000" offset-seconds="1521880470" when-ended="stop" locale='zh-tw' height="50" width="360" template="notMyTemplate">
+>>   ^~~~~~~~~
+amp-date-countdown/1.0/test/validator-amp-date-countdown.html:162:2 Attribute 'template' in tag 'amp-date-countdown' contains a value that does not match any other tags on the page. (see https://amp.dev/documentation/components/amp-date-countdown)
+|    </amp-date-countdown>
+|
+|    <!-- Should allow `data-count-up` attribute. -->
+|    <amp-date-countdown data-count-up timestamp-seconds="1521880470" offset-seconds="1521880470" when-ended="continue" locale='de' height="50" width="360" template="myTemplate">
+|    </amp-date-countdown>
+|
+|    <!-- Should error if `data-count-up` attribute is given a non-empty value. -->
+|    <amp-date-countdown data-count-up="true" timestamp-seconds="1521880470" offset-seconds="1521880470" when-ended="continue" locale='de' height="50" width="360" template="myTemplate">
+>>   ^~~~~~~~~
+amp-date-countdown/1.0/test/validator-amp-date-countdown.html:170:2 The attribute 'data-count-up' in tag 'amp-date-countdown' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-date-countdown)
+|    </amp-date-countdown>
+|
+|  </body>
+|  </html>
diff --git a/extensions/amp-date-countdown/OWNERS b/extensions/amp-date-countdown/OWNERS
index 4abf91e872c5f..4ca3f6c6a92c3 100644
--- a/extensions/amp-date-countdown/OWNERS
+++ b/extensions/amp-date-countdown/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'choumx'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'choumx'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-date-countdown/amp-date-countdown.md b/extensions/amp-date-countdown/amp-date-countdown.md
index 361736471ee87..712a7022a146c 100644
--- a/extensions/amp-date-countdown/amp-date-countdown.md
+++ b/extensions/amp-date-countdown/amp-date-countdown.md
@@ -3,11 +3,13 @@ $category@: presentation
 formats:
   - websites
 teaser:
-  text: Displays GL Transmission Format (gITF) 3D models.
+  text: Displays a countdown sequence to a specified date.
+experimental: true
+bento: true
 ---
 
 <!--
-Copyright 2018 The AMP HTML Authors. All Rights Reserved.
+Copyright 2021 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.
@@ -24,9 +26,10 @@ limitations under the License.
 
 # amp-date-countdown
 
-Display a sequence of backward counting to indicate the time remaining before an event is scheduled to occur.
+## Usage
 
-## Behavior
+Display a sequence of backward counting to indicate the time remaining before an
+event is scheduled to occur.
 
 <amp-img alt="countdown timer example" layout="responsive" src="https://user-images.githubusercontent.com/2099009/28486908-71f03336-6e3c-11e7-9822-3bac6528b148.png" width="816" height="294">
   <noscript>
@@ -36,8 +39,6 @@ Display a sequence of backward counting to indicate the time remaining before an
 
 The `amp-date-countdown` provides countdown time data that you can render in your AMP page. By providing specific [attributes](#attributes) in the `amp-date-countdown` tag, the `amp-date-countdown` extension returns a list of time parameters, which you can pass to an `amp-mustache` template for rendering. Refer to the [ list below for each returned time parameter](#returned-time-parameters).
 
-### Example
-
 <amp-img alt="countdown timer example 2" layout="intrinsic" src="https://user-images.githubusercontent.com/2099009/42785881-e161f078-8908-11e8-8f31-435e36a1de95.gif" width="489" height="48">
   <noscript>
     <img alt="countdown timer" src="https://user-images.githubusercontent.com/2099009/42785881-e161f078-8908-11e8-8f31-435e36a1de95.gif" width="489" height="48">
@@ -92,37 +93,124 @@ This table provides examples of formatted values specified in a Mustache templat
 | {h} {hours} {m} {minutes}                       | 240 hours 10 minutes                 | `biggest-unit='hours'` |
 | {d} {days} {h} {hours} {m} {minutes}            | 50 天 5 小时 10 分钟                 | `locale='zh-cn'`       |
 
+### Migrating from 0.1
+
+The experimental `1.0` version of `amp-date-countdown` uses the attribute name `count-up` instead of `data-count-up` as in `0.1` to support the "count up" feature. See the `count-up` section under `Attributes` below for more details.
+
+### Standalone use outside valid AMP documents
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+#### Example
+
+The example below demonstrates `amp-date-countdown` component in standalone use.
+
+[example preview="top-frame" playground="false"]
+
+```html
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-date-countdown.css">
+  <script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-1.0.js"></script>
+  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
+  <style>
+    amp-date-countdown {
+      height: 50px;
+    }
+  </style>
+</head>
+<amp-date-countdown
+  id="my-date-countdown"
+  timestamp-seconds="2147483648"
+  layout="fixed-height"
+  height="50">
+  <template type="amp-mustache">
+    <p class="p1">
+      {{d}} {{days}}, {{h}} {{hours}}, {{m}} {{minutes}} and {{s}} {{seconds}} until
+      <a href="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38</a>.
+    </p>
+  </template>
+</amp-date-countdown>
+<div class="buttons" style="margin-top: 8px;">
+  <button id="de-button">Change locale to German</button>
+  <button id="en-button">Change locale to English</button>
+</div>
+<script>
+  (async () => {
+    const dateCountdown = document.querySelector('#my-date-countdown');
+    await customElements.whenDefined('amp-date-countdown');
+    // set up button actions
+    document.querySelector('#de-button').onclick = () => dateCountdown.setAttribute('locale', 'de');
+    document.querySelector('#en-button').onclick = () => dateCountdown.setAttribute('locale', 'en');
+  })();
+</script>
+```
+
+[/example]
+
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-date-countdown-1.0.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
+
+**Container type**
+
+The `amp-date-countdown` component has a defined layout size type. To ensure the component renders correctly, apply the following styles:
+
+```css
+amp-date-countdown {
+  display: block;
+  height: 20px;
+}
+```
+
 ## Attributes
 
-You must specify at least one of these required attributes: `end-date`, `timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.
+You must specify at least one of these required attributes: `end-date`,
+`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.
 
-##### end-date
+### end-date
 
 An ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`
 
-##### timestamp-ms
+### timestamp-ms
+
+A POSIX epoch value in milliseconds; assumed to be UTC timezone. For example,
+`timestamp-ms="1521880470000"`.
 
-A POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms="1521880470000"`.
+### timestamp-seconds
 
-##### timestamp-seconds
+A POSIX epoch value in seconds; assumed to be UTC timezone. For example,
+`timestamp-seconds="1521880470"`.
 
-A POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds="1521880470"`.
+### timeleft-ms
 
-##### timeleft-ms
+A value in milliseconds left to be counting down. For example, 48 hours left
+`timeleft-ms="172800000"`.
 
-A value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms="172800000"`.
+### offset-seconds (optional)
 
-##### offset-seconds (optional)
+A positive or negative number that represents the number of seconds to add or
+subtract from the `end-date`. For example, `offset-seconds="60"` adds 60 seconds
+to the end-date.
 
-A positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds="60"` adds 60 seconds to the end-date.
+### when-ended (optional)
 
-##### when-ended (optional)
+Specifies whether to stop the timer when it reaches 0 seconds. The value can be
+set to `stop` (default) to indicate the timer to stop at 0 seconds and will not
+pass the final date or `continue` to indicate the timer should continue after
+reaching 0 seconds.
 
-Specifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.
+### locale (optional)
 
-##### locale (optional)
+An internationalization language string for each timer unit. The default value
+is `en` (for English).
 
-An internationalization language string for each timer unit. The default value is `en` (for English).
 Supported values:
 
 | Code  | Language            |
@@ -144,20 +232,35 @@ Supported values:
 | zh-cn | Chinese Simplified  |
 | zh-tw | Chinese Traditional |
 
-##### biggest-unit (optional)
+### biggest-unit (optional)
+
+Allows the `amp-date-countdown` component to calculate the time difference based
+on the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays
+`1210 hours` left.
+
+-   Supported values: `days`, `hours`, `minutes`, `seconds`
+-   Default: `days`
+
+### count-up (optional)
 
-Allows the `amp-date-countdown` component to calculate the time difference based on the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays `1210 hours` left.
+Include this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `amp-date-countdown` will display a decrementing (toward 0) negative value.
 
-- Supported values: `days`, `hours`, `minutes`, `seconds`
-- Default: `days`
+[tip type="important"]
+Please note that the attribute name is different than `0.1` which uses the `data-count-up` attribute to toggle this feature. The behavior of the feature is otherwise identical to `0.1`.
+[/tip]
 
 ## Events
 
-The `amp-date-countdown` component exposes the following event that you can use [AMP on-syntax to trigger](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events):
+The `amp-date-countdown` component exposes the following event that you can use
+[AMP on-syntax to trigger](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events):
 
-| Event     | Description                                                                                                                                                                                                                                                                                                             |
-| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `timeout` | When the timer times out. For this action to function, `when-ended` **must be** set to `stop`. You can only run low-trust actions such as `amp-animation` and `amp-video` actions when the timer times out. This is to enforce AMP's UX principle of not allowing page content to reflow without explicit user actions. |
+### Timeout
+
+When the timer times out. For this action to function, `when-ended` **must be**
+set to `stop`. You can only run low-trust actions such as `amp-animation` and
+`amp-video` actions when the timer times out. This is to enforce AMP's UX
+principle of not allowing page content to reflow without explicit user actions.
+|
 
 _Example: Demonstrating usage of timeout event_
 
@@ -188,7 +291,7 @@ _Example: Demonstrating usage of timeout event_
   <template type="amp-mustache">
     <h1>Countdown Clock</h1>
     <div>
-      {{dd}} : {{hh}} : {{mm}} : {{ss}}
+      {{dd}} : {{hh)) : {{mm}} : {{ss}}
     </div>
   </template>
 </amp-date-countdown>
@@ -196,12 +299,12 @@ _Example: Demonstrating usage of timeout event_
 
 Renders as:
 
-<amp-img alt="Animated example the action" layout="intrinsic" src="https://user-images.githubusercontent.com/2099009/42786835-9e698228-890c-11e8-8776-f82a6cded829.gif" width="359" height="270">
-  <noscript>
-    <img alt="countdown timer" src="https://user-images.githubusercontent.com/2099009/42786835-9e698228-890c-11e8-8776-f82a6cded829.gif" width="359" height="270">
-  </noscript>
+<amp-img alt="Animated example the action" layout="intrinsic"
+         src="https://user-images.githubusercontent.com/2099009/42786835-9e698228-890c-11e8-8776-f82a6cded829.gif"
+         width="359" height="270">
+<noscript>
+<img alt="countdown timer"
+         src="https://user-images.githubusercontent.com/2099009/42786835-9e698228-890c-11e8-8776-f82a6cded829.gif"
+         width="359" height="270">
+</noscript>
 </amp-img>
-
-## Validation
-
-See [amp-date-countdown rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-date-countdown/validator-amp-date-countdown.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-date-countdown/validator-amp-date-countdown.protoascii b/extensions/amp-date-countdown/validator-amp-date-countdown.protoascii
index 32e59aff97f63..c0ab10a19534e 100644
--- a/extensions/amp-date-countdown/validator-amp-date-countdown.protoascii
+++ b/extensions/amp-date-countdown/validator-amp-date-countdown.protoascii
@@ -20,11 +20,11 @@ tags: {  # amp-date-countdown
   extension_spec: {
     name: "amp-date-countdown"
     version: "0.1"
+    version: "1.0"
     version: "latest"
   }
   attr_lists: "common-extension-attrs"
 }
-
 tags: {  # <amp-date-countdown>
   html_format: AMP
   tag_name: "AMP-DATE-COUNTDOWN"
@@ -36,6 +36,14 @@ tags: {  # <amp-date-countdown>
     value_casei: "minutes"
     value_casei: "seconds"
   }
+  attrs: {  # attribute is not used in version 0.1 of the component (see #33480)
+    name: "count-up"
+    value: ""
+  }
+  attrs: {  # attribute is not used in version 1.0 of the component (see #33480)
+    name: "data-count-up"
+    value: ""
+  }
   attrs: {
     name: "end-date"
     mandatory_oneof: "['end-date', 'timeleft-ms', 'timestamp-ms', 'timestamp-seconds']"
diff --git a/extensions/amp-date-display/0.1/amp-date-display.js b/extensions/amp-date-display/0.1/amp-date-display.js
index 5d9f38d90e5b4..cb31a2c9f122a 100644
--- a/extensions/amp-date-display/0.1/amp-date-display.js
+++ b/extensions/amp-date-display/0.1/amp-date-display.js
@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../../src/amp-events';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {Services} from '../../../src/services';
 import {createCustomEvent} from '../../../src/event-helper';
-import {dev, devAssert, userAssert} from '../../../src/log';
+import {dashToCamelCase} from '../../../src/core/types/string/index.js';
+import {dev, devAssert, user, userAssert} from '../../../src/log';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {removeChildren} from '../../../src/dom';
 
@@ -30,6 +31,15 @@ const DEFAULT_LOCALE = 'en';
 /** @const {number} */
 const DEFAULT_OFFSET_SECONDS = 0;
 
+/** @const {!Object<string, *>} */
+const DEFAULT_DATETIME_OPTIONS = {
+  'year': 'numeric',
+  'month': 'short',
+  'day': 'numeric',
+  'hour': 'numeric',
+  'minute': 'numeric',
+};
+
 /** @typedef {{
   year: number,
   month: number,
@@ -66,6 +76,7 @@ let VariablesDef;
   minuteTwoDigit: string,
   secondTwoDigit: string,
   dayPeriod: string,
+  localeString: string,
  }} */
 let EnhancedVariablesDef;
 
@@ -95,8 +106,11 @@ export class AmpDateDisplay extends AMP.BaseElement {
     /** @private {string} */
     this.locale_ = '';
 
-    /** @private @const {!../../../src/service/template-impl.Templates} */
-    this.templates_ = Services.templatesFor(this.win);
+    /** @private {Object<string, *>} */
+    this.localeOptions_ = null;
+
+    /** @private {?../../../src/service/template-impl.Templates} */
+    this.templates_ = null;
 
     /** @private {?Element} */
     this.container_ = null;
@@ -104,6 +118,8 @@ export class AmpDateDisplay extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.templates_ = Services.templatesForDoc(this.element);
+
     this.container_ = this.element.ownerDocument.createElement('div');
     this.element.appendChild(devAssert(this.container_));
 
@@ -127,6 +143,11 @@ export class AmpDateDisplay extends AMP.BaseElement {
 
     this.locale_ = this.element.getAttribute('locale') || DEFAULT_LOCALE;
 
+    this.localeOptions_ = this.parseLocaleOptionsAttrs_(
+      this.element,
+      'data-options-'
+    );
+
     const data = /** @type {!JsonObject} */ (this.getDataForTemplate_());
     this.templates_
       .findAndRenderTemplate(this.element, data)
@@ -150,8 +171,8 @@ export class AmpDateDisplay extends AMP.BaseElement {
     const date = new Date(epoch + offset);
     const inUTC = this.displayIn_.toLowerCase() === 'utc';
     const basicData = inUTC
-      ? this.getVariablesInUTC_(date, this.locale_)
-      : this.getVariablesInLocal_(date, this.locale_);
+      ? this.getVariablesInUTC_(date, this.locale_, this.localeOptions_)
+      : this.getVariablesInLocal_(date, this.locale_, this.localeOptions_);
 
     return this.enhanceBasicVariables_(basicData);
   }
@@ -183,13 +204,67 @@ export class AmpDateDisplay extends AMP.BaseElement {
     return epoch;
   }
 
+  /**
+   * @param {null|string} attributeName
+   * @param {string|undefined} attributePrefix
+   * @return {boolean}
+   * @private
+   */
+  matchesAttrPrefix_(attributeName, attributePrefix) {
+    return (
+      attributeName !== null &&
+      attributePrefix !== undefined &&
+      attributeName.startsWith(attributePrefix) &&
+      attributeName !== attributePrefix
+    );
+  }
+
+  /**
+   * @param {!Element} element
+   * @param {string} attrPrefix
+   * @return {Object<string, *>|undefined}
+   * @private
+   */
+  parseLocaleOptionsAttrs_(element, attrPrefix) {
+    const currObj = {};
+    let objContains = false;
+    const attrs = element.attributes;
+    for (let i = 0; i < attrs.length; i++) {
+      const attrib = attrs[i];
+      if (this.matchesAttrPrefix_(attrib.name, attrPrefix)) {
+        currObj[dashToCamelCase(attrib.name.slice(attrPrefix.length))] =
+          attrib.value;
+        objContains = true;
+      }
+    }
+    if (objContains) {
+      return currObj;
+    }
+  }
+
+  /**
+   * @param {!Date} date
+   * @param {string} locale
+   * @param {?Object<string, *>} localeOptions
+   * @return {string}
+   * @private
+   */
+  getLocaleString_(date, locale, localeOptions) {
+    try {
+      return date.toLocaleString(locale, localeOptions);
+    } catch (e) {
+      user().error(TAG, 'localeOptions', e);
+    }
+  }
+
   /**
    * @param {!Date} date
    * @param {string} locale
+   * @param {?Object<string, *>} localeOptions
    * @return {!VariablesDef}
    * @private
    */
-  getVariablesInLocal_(date, locale) {
+  getVariablesInLocal_(date, locale, localeOptions = DEFAULT_DATETIME_OPTIONS) {
     return {
       year: date.getFullYear(),
       month: date.getMonth() + 1,
@@ -206,16 +281,22 @@ export class AmpDateDisplay extends AMP.BaseElement {
       minute: date.getMinutes(),
       second: date.getSeconds(),
       iso: date.toISOString(),
+      localeString: this.getLocaleString_(date, locale, localeOptions),
     };
   }
 
   /**
    * @param {!Date} date
    * @param {string} locale
+   * @param {?Object<string, *>} localeOptions
    * @return {!VariablesDef}
    * @private
    */
-  getVariablesInUTC_(date, locale) {
+  getVariablesInUTC_(date, locale, localeOptions = DEFAULT_DATETIME_OPTIONS) {
+    const localeOptionsInUTC = {
+      ...localeOptions,
+      timeZone: 'UTC',
+    };
     return {
       year: date.getUTCFullYear(),
       month: date.getUTCMonth() + 1,
@@ -240,6 +321,7 @@ export class AmpDateDisplay extends AMP.BaseElement {
       minute: date.getUTCMinutes(),
       second: date.getUTCSeconds(),
       iso: date.toISOString(),
+      localeString: this.getLocaleString_(date, locale, localeOptionsInUTC),
     };
   }
 
diff --git a/extensions/amp-date-display/0.1/amp-date-display.md b/extensions/amp-date-display/0.1/amp-date-display.md
new file mode 100644
index 0000000000000..81fe51ddea98a
--- /dev/null
+++ b/extensions/amp-date-display/0.1/amp-date-display.md
@@ -0,0 +1,130 @@
+---
+$category@: presentation
+formats:
+  - websites
+teaser:
+  text: The amp-date-display component displays time data that you can render in your AMP page.
+---
+
+<!--
+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.
+-->
+
+# amp-date-display
+
+## Usage
+
+The `amp-date-display` component displays time data that you can render in your
+AMP page. By providing specific [attributes](#attributes) in the
+`amp-date-display` tag, the `amp-date-display` extension returns a list of time
+parameters, which you can pass to
+[an amp-mustache template](../../amp-mustache/amp-mustache.md)
+for rendering. Refer to the
+[list below for each returned time parameter](#returned-time-parameters).
+
+```html
+<!-- Displays "Wednesday 2 August 2017, 15:05:05" -->
+<amp-date-display
+  datetime="2017-08-02T15:05:05.000"
+  layout="fixed"
+  width="360"
+  height="20"
+>
+  <template type="amp-mustache">
+    <div>
+      {{dayName}} {{day}} {{monthName}} {{year}}
+      {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
+    </div>
+  </template>
+</amp-date-display>
+```
+
+### Returned time parameters
+
+This table lists the format you can specify in your Mustache template:
+
+| Format         | Meaning                                                       |
+| -------------- | ------------------------------------------------------------- |
+| day            | 1, 2, ...12, 13, etc.                                         |
+| dayName        | string,                                                       |
+| dayNameShort   | string,                                                       |
+| dayPeriod      | string,                                                       |
+| dayTwoDigit    | 01, 02, 03, ..., 12, 13, etc.                                 |
+| hour           | 0, 1, 2, 3, ..., 12, 13, ..., 22, 23                          |
+| hour12         | 1, 2, 3, ..., 12, 1, 2, ..., 11, 12                           |
+| hour12TwoDigit | 01, 02, ..., 12, 01, 02, ..., 11, 12                          |
+| hourTwoDigit   | 00, 01, 02, ..., 12, 13, ..., 22, 23                          |
+| iso            | A standard ISO8601 date string e.g. 2019-01-23T15:31:21.213Z, |
+| minute         | 0, 1, 2, ..., 58, 59                                          |
+| minuteTwoDigit | 00, 01, 02, ..., 58, 59                                       |
+| month          | 1, 2, 3, ..., 12                                              |
+| monthName      | Internationalized month name string.                          |
+| monthNameShort | Internationalized abbreviated month name string.,             |
+| monthTwoDigit  | 01, 02, ..., 11, 12                                           |
+| second         | 0, 1, 2, ..., 58, 59                                          |
+| secondTwoDigit | 00, 01, 02, ..., 58, 59                                       |
+| year           | 0, 1, 2, ..., 1999, 2000, 2001, etc.                          |
+| yearTwoDigit   | 00, 01, 02, ..., 17, 18, 19, ..., 98, 99                      |
+| localeString   | A string with a language sensitive representation.            |
+
+## Attributes
+
+You must specify at least one of these required attributes: `datetime`,
+`timestamp-ms`, or `timestamp-seconds`.
+
+### datetime
+
+The `datetime` attribute specifies the date and time in a standard ISO 8601 date
+string (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,
+`amp-date-display` will use the time the page loaded to render its template.
+
+### timestamp-ms
+
+The `timestamp-ms` attribute specifies the date and time using the number of
+milliseconds since 1970-01-01T0:00:00.000Z
+
+### timestamp-seconds
+
+The `timestamp-seconds` attribute specifies the date and time using the number
+of seconds since 1970-01-01T0:00:00.000Z
+
+### locale (optional)
+
+An internationalization language string for each timer unit. The default value
+is `en` (for English). This attribute supports all values that are supported by
+the user's browser.
+
+### display-in (optional)
+
+If set to the value `utc`, the `display-in` attribute will convert the given
+date to UTC.
+
+### offset-seconds (optional)
+
+The `offset-seconds` attribute specifies an integer number of seconds to shift
+the given date.
+
+### data-options-\* (optional)
+
+The `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)
+parameter that specifies the formatting style to use for `localeString` format.
+Valid attributes include: `data-options-date-style`, `data-options-time-style`, etc.
+
+Note that if `display-in` attrubute is set to `utc`, the value of
+`data-options-time-zone` will automatically be converted to `UTC`.
+
+## Validation
+
+See [amp-date-display rules](../validator-amp-date-display.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-date-display/0.1/test/test-amp-date-display.js b/extensions/amp-date-display/0.1/test/test-amp-date-display.js
index 4f5edc375d177..0a8048b612530 100644
--- a/extensions/amp-date-display/0.1/test/test-amp-date-display.js
+++ b/extensions/amp-date-display/0.1/test/test-amp-date-display.js
@@ -15,8 +15,10 @@
  */
 
 import '../amp-date-display';
-import * as lolex from 'lolex';
-import {toggleExperiment} from '../../../../src/experiments';
+import * as fakeTimers from '@sinonjs/fake-timers';
+import {Services} from '../../../../src/services';
+import {expect} from 'chai';
+import {user} from '../../../../src/log';
 
 describes.realWin(
   'amp-date-display',
@@ -31,18 +33,20 @@ describes.realWin(
     let impl;
     let clock;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       win = env.win;
-      clock = lolex.install({
-        target: win,
+      clock = fakeTimers.withGlobal(win).install({
         now: new Date('2018-01-01T08:00:00Z'),
       });
 
-      toggleExperiment(win, 'amp-date-display', true);
       element = win.document.createElement('amp-date-display');
+      element.setAttribute('layout', 'fixed');
+      element.setAttribute('width', '300');
+      element.setAttribute('height', '100');
       win.document.body.appendChild(element);
-      impl = element.implementation_;
-      env.sandbox.stub(impl.templates_, 'findAndRenderTemplate').resolves();
+      impl = await element.getImpl(false);
+      const templates = Services.templatesForDoc(env.ampdoc);
+      env.sandbox.stub(templates, 'findAndRenderTemplate').resolves();
       env.sandbox.stub(impl, 'boundRendered_');
     });
 
@@ -53,10 +57,10 @@ describes.realWin(
     // Unfortunately, we cannot test the most interesting case of UTC datetime
     // displayed in local, because the test would work in only one time zone.
 
-    it('provides all variables in UTC and English (default)', () => {
+    it('provides all variables in UTC and English (default)', async () => {
       element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
       element.setAttribute('display-in', 'UTC');
-      element.build();
+      await element.buildInternal();
 
       const data = impl.getDataForTemplate_();
 
@@ -79,11 +83,12 @@ describes.realWin(
       expect(data.second).to.equal(6);
       expect(data.secondTwoDigit).to.equal('06');
       expect(data.dayPeriod).to.equal('am');
+      expect(data.localeString).to.equal('Feb 3, 2001, 4:05 AM');
     });
 
-    it('provides all variables in local and English (default)', () => {
+    it('provides all variables in local and English (default)', async () => {
       element.setAttribute('datetime', '2001-02-03T04:05:06.007');
-      element.build();
+      await element.buildInternal();
 
       const data = impl.getDataForTemplate_();
 
@@ -106,12 +111,13 @@ describes.realWin(
       expect(data.second).to.equal(6);
       expect(data.secondTwoDigit).to.equal('06');
       expect(data.dayPeriod).to.equal('am');
+      expect(data.localeString).to.equal('Feb 3, 2001, 4:05 AM');
     });
 
     describe('correctly parses', () => {
-      it('now keyword', () => {
+      it('now keyword', async () => {
         element.setAttribute('datetime', 'now');
-        element.build();
+        await element.buildInternal();
 
         const {iso} = impl.getDataForTemplate_();
         const dateFromParsed = new win.Date(iso);
@@ -120,25 +126,25 @@ describes.realWin(
         expect(dateFromParsed.getTime()).to.equal(win.Date.now());
       });
 
-      it('day only ISO 8601 date', () => {
+      it('day only ISO 8601 date', async () => {
         element.setAttribute('datetime', '2001-02-03');
-        element.build();
+        await element.buildInternal();
         expect(impl.getDataForTemplate_().iso).to.equal(
           '2001-02-03T00:00:00.000Z'
         );
       });
 
-      it('full ISO 8601 date in UTC time zone', () => {
+      it('full ISO 8601 date in UTC time zone', async () => {
         element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
-        element.build();
+        await element.buildInternal();
         expect(impl.getDataForTemplate_().iso).to.equal(
           '2001-02-03T04:05:06.007Z'
         );
       });
 
-      it('full ISO 8601 date without time zone (interpreted as local)', () => {
+      it('full ISO 8601 date without time zone (interpreted as local)', async () => {
         element.setAttribute('datetime', '2001-02-03T04:05:06.007');
-        element.build();
+        await element.buildInternal();
 
         const data = impl.getDataForTemplate_();
         const result =
@@ -148,54 +154,79 @@ describes.realWin(
         expect(result).to.equal('2001-02-03T04:05:06');
       });
 
-      it('full ISO 8601 date in a custom time zone', () => {
+      it('full ISO 8601 date in a custom time zone', async () => {
         element.setAttribute('datetime', '2001-02-03T04:05:06.007+08:00');
-        element.build();
+        await element.buildInternal();
         expect(impl.getDataForTemplate_().iso).to.equal(
           '2001-02-02T20:05:06.007Z'
         );
       });
 
-      it('seconds since the UNIX epoch', () => {
+      it('seconds since the UNIX epoch', async () => {
         element.setAttribute('timestamp-seconds', '981173106');
-        element.build();
+        await element.buildInternal();
         expect(impl.getDataForTemplate_().iso).to.equal(
           '2001-02-03T04:05:06.000Z'
         );
       });
 
-      it('miliseconds since the UNIX epoch', () => {
+      it('miliseconds since the UNIX epoch', async () => {
         element.setAttribute('timestamp-ms', '981173106007');
-        element.build();
+        await element.buildInternal();
         expect(impl.getDataForTemplate_().iso).to.equal(
           '2001-02-03T04:05:06.007Z'
         );
       });
+
+      it('locale and data-options-time-style', async () => {
+        element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
+        element.setAttribute('display-in', 'UTC');
+        element.setAttribute('locale', 'zh-TW');
+        element.setAttribute('data-options-time-style', 'short');
+        await element.buildInternal();
+
+        const data = impl.getDataForTemplate_();
+
+        expect(data.localeString).to.equal('上午4:05');
+      });
+
+      it('locale, data-options-time-style, and data-options-date-style', async () => {
+        element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
+        element.setAttribute('display-in', 'UTC');
+        element.setAttribute('locale', 'zh-TW');
+        element.setAttribute('data-options-date-style', 'full');
+        element.setAttribute('data-options-time-style', 'medium');
+        await element.buildInternal();
+
+        const data = impl.getDataForTemplate_();
+
+        expect(data.localeString).to.equal('2001年2月3日 星期六 上午4:05:06');
+      });
     });
 
-    it('adds offset seconds', () => {
+    it('adds offset seconds', async () => {
       element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
       element.setAttribute('offset-seconds', '1234567');
-      element.build();
+      await element.buildInternal();
       expect(impl.getDataForTemplate_().iso).to.equal(
         '2001-02-17T11:01:13.007Z'
       );
     });
 
-    it('subtracts offset seconds', () => {
+    it('subtracts offset seconds', async () => {
       element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
       element.setAttribute('offset-seconds', '-1234567');
-      element.build();
+      await element.buildInternal();
       expect(impl.getDataForTemplate_().iso).to.equal(
         '2001-01-19T21:08:59.007Z'
       );
     });
 
-    it('provides variables in Czech when "cs" locale is passed', () => {
+    it('provides variables in Czech when "cs" locale is passed', async () => {
       element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
       element.setAttribute('display-in', 'UTC');
       element.setAttribute('locale', 'cs');
-      element.build();
+      await element.buildInternal();
 
       const data = impl.getDataForTemplate_();
 
@@ -204,5 +235,34 @@ describes.realWin(
       expect(data.dayName).to.equal('sobota');
       expect(data.dayNameShort).to.equal('so');
     });
+
+    describe('invalid data-options-* settings', () => {
+      it('throws error when invalid data-options value is provided', async () => {
+        const spy = env.sandbox.stub(user(), 'error');
+        element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
+        element.setAttribute('display-in', 'UTC');
+        element.setAttribute('locale', 'zh-TW');
+        element.setAttribute('data-options-time-style', 'invalid');
+
+        await element.buildInternal();
+        const data = impl.getDataForTemplate_();
+
+        expect(spy.args[0][1]).to.equal('localeOptions');
+        expect(spy.args[0][2]).to.match(/RangeError/);
+        expect(data.localeString).to.be.undefined;
+      });
+
+      it('ignores the attr when invalid data-options-attr is provided', async () => {
+        element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
+        element.setAttribute('display-in', 'UTC');
+        element.setAttribute('locale', 'zh-TW');
+        element.setAttribute('data-options-invalid', 'invalid');
+
+        await element.buildInternal();
+        const data = impl.getDataForTemplate_();
+
+        expect(data.localeString).to.equal('2001/2/3 上午4:05:06');
+      });
+    });
   }
 );
diff --git a/extensions/amp-date-display/0.1/test/validator-amp-date-display.html b/extensions/amp-date-display/0.1/test/validator-amp-date-display.html
index 05edf7b60e7d4..e6164b2ed124e 100644
--- a/extensions/amp-date-display/0.1/test/validator-amp-date-display.html
+++ b/extensions/amp-date-display/0.1/test/validator-amp-date-display.html
@@ -173,6 +173,11 @@
   <amp-date-display datetime="2017-08-02T15:05:05.+04:00" layout="fixed" width="360" height="20">
     <template type="amp-mustache">{{iso}}</template>
   </amp-date-display>
+
+  <!-- valid, with data-options-time-style -->
+  <amp-date-display datetime="now" layout="fixed" width="360" height="20" data-options-time-style="short">
+    <template type="amp-mustache">{{localeString}}</template>
+  </amp-date-display>
 </body>
 
 </html>
diff --git a/extensions/amp-date-display/0.1/test/validator-amp-date-display.out b/extensions/amp-date-display/0.1/test/validator-amp-date-display.out
index b13f719c605ac..607c99866a844 100644
--- a/extensions/amp-date-display/0.1/test/validator-amp-date-display.out
+++ b/extensions/amp-date-display/0.1/test/validator-amp-date-display.out
@@ -192,6 +192,11 @@ amp-date-display/0.1/test/validator-amp-date-display.html:168:2 The attribute 'd
 amp-date-display/0.1/test/validator-amp-date-display.html:173:2 The attribute 'datetime' in tag 'amp-date-display' is set to the invalid value '2017-08-02T15:05:05.+04:00'. (see https://amp.dev/documentation/components/amp-date-display)
 |      <template type="amp-mustache">{{iso}}</template>
 |    </amp-date-display>
+|
+|    <!-- valid, with data-options-time-style -->
+|    <amp-date-display datetime="now" layout="fixed" width="360" height="20" data-options-time-style="short">
+|      <template type="amp-mustache">{{localeString}}</template>
+|    </amp-date-display>
 |  </body>
 |
 |  </html>
diff --git a/extensions/amp-date-display/1.0/amp-date-display.js b/extensions/amp-date-display/1.0/amp-date-display.js
index 45182a5d5403c..63844da089b83 100644
--- a/extensions/amp-date-display/1.0/amp-date-display.js
+++ b/extensions/amp-date-display/1.0/amp-date-display.js
@@ -14,85 +14,77 @@
  * limitations under the License.
  */
 
-import * as Preact from '../../../src/preact';
-import {AsyncRender} from './async-render';
-import {DateDisplay} from './date-display';
-import {PreactBaseElement} from '../../../src/preact/base-element';
-import {RenderDomTree} from './render-dom-tree';
+import {BaseElement} from './base-element';
 import {Services} from '../../../src/services';
-import {dict} from '../../../src/utils/object';
+import {dev, userAssert} from '../../../src/log';
+import {dict} from '../../../src/core/types/object';
 import {isExperimentOn} from '../../../src/experiments';
-import {isLayoutSizeDefined} from '../../../src/layout';
-import {userAssert} from '../../../src/log';
 
 /** @const {string} */
 const TAG = 'amp-date-display';
 
-class AmpDateDisplay extends PreactBaseElement {
-  /** @override */
-  init() {
-    const templates = Services.templatesFor(this.win);
-    let rendered = false;
-
-    return dict({
-      /**
-       * @param {!JsonObject} data
-       * @param {*} children
-       * @return {*}
-       */
-      'render': (data, children) => {
-        // We only render once in AMP mode, but React mode may rerender
-        // serveral times.
-        if (rendered) {
-          return children;
-        }
-        rendered = true;
-
-        const host = this.element;
-        const domPromise = templates
-          .findAndRenderTemplate(host, data)
-          .then((rendered) => {
-            const container = document.createElement('div');
-            container.appendChild(rendered);
+class AmpDateDisplay extends BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
 
-            return <RenderDomTree dom={container} host={host} />;
-          });
+    /** @private {?../../../src/service/template-impl.Templates} */
+    this.templates_ = null;
 
-        return (
-          <>
-            {children}
-            <AsyncRender>{domPromise}</AsyncRender>
-          </>
-        );
-      },
-    });
+    /** @private {?Element} */
+    this.template_ = null;
   }
 
   /** @override */
   isLayoutSupported(layout) {
     userAssert(
-      isExperimentOn(this.win, 'amp-date-display-bento'),
-      'expected amp-date-display-bento experiment to be enabled'
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-date-display'),
+      'expected global "bento" or specific "bento-date-display" experiment to be enabled'
     );
-    return isLayoutSizeDefined(layout);
+    return super.isLayoutSupported(layout);
   }
-}
-
-/** @override */
-AmpDateDisplay['Component'] = DateDisplay;
 
-/** @override */
-AmpDateDisplay['passthrough'] = true;
+  /** @override */
+  checkPropsPostMutations() {
+    const templates =
+      this.templates_ ||
+      (this.templates_ = Services.templatesForDoc(this.element));
+    const template = templates.maybeFindTemplate(this.element);
+    if (template != this.template_) {
+      this.template_ = template;
+      if (template) {
+        // Only overwrite `render` when template is ready to minimize FOUC.
+        templates.whenReady(template).then(() => {
+          if (template != this.template_) {
+            // A new template has been set while the old one was initializing.
+            return;
+          }
+          this.mutateProps(
+            dict({
+              'render': (data) => {
+                return templates
+                  .renderTemplateAsString(dev().assertElement(template), data)
+                  .then((html) => dict({'__html': html}));
+              },
+            })
+          );
+        });
+      } else {
+        this.mutateProps(dict({'render': null}));
+      }
+    }
+  }
 
-/** @override */
-AmpDateDisplay['props'] = {
-  'displayIn': {attr: 'display-in'},
-  'offsetSeconds': {attr: 'offset-seconds', type: 'number'},
-  'locale': {attr: 'locale'},
-  'datetime': {attr: 'datetime'},
-  'timestampMs': {attr: 'timestamp-ms', type: 'number'},
-  'timestampSeconds': {attr: 'timestamp-seconds', type: 'number'},
-};
+  /** @override */
+  isReady(props) {
+    if (this.template_ && !('render' in props)) {
+      // The template is specified, but not available yet.
+      return false;
+    }
+    return true;
+  }
+}
 
 AMP.extension(TAG, '1.0', (AMP) => {
   AMP.registerElement(TAG, AmpDateDisplay);
diff --git a/extensions/amp-date-display/1.0/async-render.js b/extensions/amp-date-display/1.0/async-render.js
deleted file mode 100644
index 9a54ce51d5a83..0000000000000
--- a/extensions/amp-date-display/1.0/async-render.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * 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.
- */
-
-import {useResourcesNotify} from '../../../src/preact/utils';
-import {useState} from '../../../src/preact';
-
-/**
- * Renders the children prop, waiting for it to resolve if it is a promise.
- *
- * @param {!JsonObject} props
- * @return {PreactDef.Renderable}
- */
-export function AsyncRender(props) {
-  const children = props['children'];
-  const [state, set] = useState(children);
-  useResourcesNotify();
-
-  if (state && state.then) {
-    Promise.resolve(children).then(set);
-    return null;
-  }
-
-  return state;
-}
diff --git a/extensions/amp-date-display/1.0/base-element.js b/extensions/amp-date-display/1.0/base-element.js
new file mode 100644
index 0000000000000..c9e4242ad767a
--- /dev/null
+++ b/extensions/amp-date-display/1.0/base-element.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {DateDisplay} from './component';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {parseDateAttrs as parseDateAttrsBase} from '../../../src/core/dom/parse-date-attributes';
+
+export class BaseElement extends PreactBaseElement {}
+
+/** @override */
+BaseElement['Component'] = DateDisplay;
+
+/** @override */
+BaseElement['props'] = {
+  'datetime': {
+    attrs: ['datetime', 'timestamp-ms', 'timestamp-seconds', 'offset-seconds'],
+    parseAttrs: parseDateAttrs,
+  },
+  'displayIn': {attr: 'display-in'},
+  'locale': {attr: 'locale'},
+  'localeOptions': {attrPrefix: 'data-options-'},
+};
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['lightDomTag'] = 'div';
+
+/** @override */
+BaseElement['usesTemplate'] = true;
+
+/**
+ * @param {!Element} element
+ * @return {?number}
+ * @throws {UserError} when attribute values are missing or invalid.
+ * @visibleForTesting
+ */
+export function parseDateAttrs(element) {
+  return parseDateAttrsBase(element, [
+    'datetime',
+    'timestamp-ms',
+    'timestamp-seconds',
+  ]);
+}
diff --git a/extensions/amp-date-display/1.0/component.js b/extensions/amp-date-display/1.0/component.js
new file mode 100644
index 0000000000000..92766080e1c42
--- /dev/null
+++ b/extensions/amp-date-display/1.0/component.js
@@ -0,0 +1,261 @@
+/**
+ * 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {Wrapper, useRenderer} from '../../../src/preact/component';
+import {getDate} from '../../../src/core/types/date';
+import {useMemo} from '../../../src/preact';
+import {useResourcesNotify} from '../../../src/preact/utils';
+import {user} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-date-display';
+
+/** @const {string} */
+const DEFAULT_DISPLAY_IN = 'local';
+
+/** @const {string} */
+const DEFAULT_LOCALE = 'en';
+
+/** @const {!Object<string, *>} */
+const DEFAULT_DATETIME_OPTIONS = {
+  'year': 'numeric',
+  'month': 'short',
+  'day': 'numeric',
+  'hour': 'numeric',
+  'minute': 'numeric',
+};
+
+/**
+ * @param {!JsonObject} data
+ * @return {string}
+ */
+const DEFAULT_RENDER = (data) => /** @type {string} */ (data['localeString']);
+
+/** @typedef {{
+  year: number,
+  month: number,
+  monthName: string,
+  monthNameShort: string,
+  day: number,
+  dayName: string,
+  dayNameShort: string,
+  hour: number,
+  minute: number,
+  second: number,
+  iso: string,
+  localeString: string,
+}} */
+let VariablesV2Def;
+
+/** @typedef {{
+  year: number,
+  month: number,
+  monthName: string,
+  monthNameShort: string,
+  day: number,
+  dayName: string,
+  dayNameShort: string,
+  hour: number,
+  minute: number,
+  second: number,
+  iso: string,
+  yearTwoDigit: string,
+  monthTwoDigit: string,
+  dayTwoDigit: string,
+  hourTwoDigit: string,
+  hour12: string,
+  hour12TwoDigit: string,
+  minuteTwoDigit: string,
+  secondTwoDigit: string,
+  dayPeriod: string,
+ }} */
+let EnhancedVariablesV2Def;
+
+/**
+ * @param {!DateDisplayDef.Props} props
+ * @return {PreactDef.Renderable}
+ */
+export function DateDisplay({
+  datetime,
+  displayIn = DEFAULT_DISPLAY_IN,
+  locale = DEFAULT_LOCALE,
+  localeOptions,
+  render = DEFAULT_RENDER,
+  ...rest
+}) {
+  const date = getDate(datetime);
+  const data = useMemo(
+    () => getDataForTemplate(new Date(date), displayIn, locale, localeOptions),
+    [date, displayIn, locale, localeOptions]
+  );
+
+  const rendered = useRenderer(render, data);
+  const isHtml =
+    rendered && typeof rendered == 'object' && '__html' in rendered;
+
+  useResourcesNotify();
+
+  return (
+    <Wrapper
+      {...rest}
+      as="div"
+      datetime={data['iso']}
+      dangerouslySetInnerHTML={isHtml ? rendered : null}
+    >
+      {isHtml ? null : rendered}
+    </Wrapper>
+  );
+}
+
+/**
+ * @param {!Date} date
+ * @param {string} displayIn
+ * @param {string} locale
+ * @param {Object<string, *>} localeOptions
+ * @return {!EnhancedVariablesV2Def}
+ */
+function getDataForTemplate(date, displayIn, locale, localeOptions) {
+  const basicData =
+    displayIn.toLowerCase() === 'utc'
+      ? getVariablesInUTC(date, locale, localeOptions)
+      : getVariablesInLocal(date, locale, localeOptions);
+
+  return enhanceBasicVariables(basicData);
+}
+
+/**
+ * @param {number} input
+ * @return {string}
+ */
+function padStart(input) {
+  if (input > 9) {
+    return input.toString();
+  }
+
+  return '0' + input;
+}
+
+/**
+ * @param {!VariablesV2Def} data
+ * @return {!EnhancedVariablesV2Def}
+ */
+function enhanceBasicVariables(data) {
+  const hour12 = data.hour % 12 || 12;
+
+  // Override type since Object.assign is not understood
+  return /** @type {!EnhancedVariablesV2Def} */ ({
+    ...data,
+    'yearTwoDigit': padStart(data.year % 100),
+    'monthTwoDigit': padStart(data.month),
+    'dayTwoDigit': padStart(data.day),
+    'hourTwoDigit': padStart(data.hour),
+    'hour12': hour12,
+    'hour12TwoDigit': padStart(hour12),
+    'minuteTwoDigit': padStart(data.minute),
+    'secondTwoDigit': padStart(data.second),
+    'dayPeriod': data.hour < 12 ? 'am' : 'pm',
+  });
+}
+
+/**
+ * @param {!Date} date
+ * @param {string} locale
+ * @param {?Object<string, *>} localeOptions
+ * @return {string}
+ * @private
+ */
+function getLocaleString_(date, locale, localeOptions) {
+  try {
+    return date.toLocaleString(locale, localeOptions);
+  } catch (e) {
+    user().error(TAG, 'localeOptions', e);
+  }
+}
+
+/**
+ * @param {!Date} date
+ * @param {string} locale
+ * @param {?Object<string, *>} localeOptions
+ * @return {!VariablesV2Def}
+ */
+function getVariablesInLocal(
+  date,
+  locale,
+  localeOptions = DEFAULT_DATETIME_OPTIONS
+) {
+  return {
+    'year': date.getFullYear(),
+    'month': date.getMonth() + 1,
+    'monthName': date.toLocaleDateString(locale, {month: 'long'}),
+    'monthNameShort': date.toLocaleDateString(locale, {
+      month: 'short',
+    }),
+    'day': date.getDate(),
+    'dayName': date.toLocaleDateString(locale, {weekday: 'long'}),
+    'dayNameShort': date.toLocaleDateString(locale, {
+      weekday: 'short',
+    }),
+    'hour': date.getHours(),
+    'minute': date.getMinutes(),
+    'second': date.getSeconds(),
+    'iso': date.toISOString(),
+    'localeString': getLocaleString_(date, locale, localeOptions),
+  };
+}
+
+/**
+ * @param {!Date} date
+ * @param {string} locale
+ * @param {?Object<string, *>} localeOptions
+ * @return {!VariablesV2Def}
+ */
+function getVariablesInUTC(
+  date,
+  locale,
+  localeOptions = DEFAULT_DATETIME_OPTIONS
+) {
+  const localeOptionsInUTC = {
+    ...localeOptions,
+    timeZone: 'UTC',
+  };
+  return {
+    'year': date.getUTCFullYear(),
+    'month': date.getUTCMonth() + 1,
+    'monthName': date.toLocaleDateString(locale, {
+      month: 'long',
+      timeZone: 'UTC',
+    }),
+    'monthNameShort': date.toLocaleDateString(locale, {
+      month: 'short',
+      timeZone: 'UTC',
+    }),
+    'day': date.getUTCDate(),
+    'dayName': date.toLocaleDateString(locale, {
+      weekday: 'long',
+      timeZone: 'UTC',
+    }),
+    'dayNameShort': date.toLocaleDateString(locale, {
+      weekday: 'short',
+      timeZone: 'UTC',
+    }),
+    'hour': date.getUTCHours(),
+    'minute': date.getUTCMinutes(),
+    'second': date.getUTCSeconds(),
+    'iso': date.toISOString(),
+    'localeString': getLocaleString_(date, locale, localeOptionsInUTC),
+  };
+}
diff --git a/extensions/amp-date-display/1.0/component.type.js b/extensions/amp-date-display/1.0/component.type.js
new file mode 100644
index 0000000000000..ce90e9635de3a
--- /dev/null
+++ b/extensions/amp-date-display/1.0/component.type.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/** @const */
+var DateDisplayDef = {};
+
+/**
+ * @typedef {{
+ *   datetime: (!Date|number|string),
+ *   displayIn: (string|undefined),
+ *   locale: (string|undefined),
+ *   localeOptions: (Object<string, *>),
+ *   render: (?RendererFunctionType|undefined),
+ * }}
+ */
+DateDisplayDef.Props;
diff --git a/extensions/amp-date-display/1.0/date-display.js b/extensions/amp-date-display/1.0/date-display.js
deleted file mode 100644
index afec23d1d9186..0000000000000
--- a/extensions/amp-date-display/1.0/date-display.js
+++ /dev/null
@@ -1,223 +0,0 @@
-/**
- * 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.
- */
-
-import {useResourcesNotify} from '../../../src/preact/utils';
-
-/** @const {string} */
-const DEFAULT_LOCALE = 'en';
-
-/** @const {number} */
-const DEFAULT_OFFSET_SECONDS = 0;
-
-/** @typedef {{
-  year: number,
-  month: number,
-  monthName: string,
-  monthNameShort: string,
-  day: number,
-  dayName: string,
-  dayNameShort: string,
-  hour: number,
-  minute: number,
-  second: number,
-  iso: string,
-}} */
-let VariablesV2Def;
-
-/** @typedef {{
-  year: number,
-  month: number,
-  monthName: string,
-  monthNameShort: string,
-  day: number,
-  dayName: string,
-  dayNameShort: string,
-  hour: number,
-  minute: number,
-  second: number,
-  iso: string,
-  yearTwoDigit: string,
-  monthTwoDigit: string,
-  dayTwoDigit: string,
-  hourTwoDigit: string,
-  hour12: string,
-  hour12TwoDigit: string,
-  minuteTwoDigit: string,
-  secondTwoDigit: string,
-  dayPeriod: string,
- }} */
-let EnhancedVariablesV2Def;
-
-/**
- * @param {!JsonObject} props
- * @return {PreactDef.Renderable}
- */
-export function DateDisplay(props) {
-  const render = props['render'];
-  const data = /** @type {!JsonObject} */ (getDataForTemplate(props));
-  useResourcesNotify();
-
-  return render(data, props['children']);
-}
-
-/**
- * @param {!JsonObject} props
- * @return {!EnhancedVariablesV2Def}
- */
-function getDataForTemplate(props) {
-  const {
-    'displayIn': displayIn = '',
-    'locale': locale = DEFAULT_LOCALE,
-    'offsetSeconds': offsetSeconds = DEFAULT_OFFSET_SECONDS,
-  } = props;
-
-  const epoch = getEpoch(props);
-  const offset = offsetSeconds * 1000;
-  const date = new Date(epoch + offset);
-
-  const basicData =
-    displayIn.toLowerCase() === 'utc'
-      ? getVariablesInUTC(date, locale)
-      : getVariablesInLocal(date, locale);
-
-  return enhanceBasicVariables(basicData);
-}
-
-/**
- * @param {!JsonObject} props
- * @return {number|undefined}
- */
-function getEpoch(props) {
-  const {
-    'datetime': datetime = '',
-    'timestampMs': timestampMs = 0,
-    'timestampSeconds': timestampSeconds = 0,
-  } = props;
-
-  let epoch;
-  if (datetime.toLowerCase() === 'now') {
-    epoch = Date.now();
-  } else if (datetime) {
-    epoch = Date.parse(datetime);
-    if (isNaN(epoch)) {
-      console /*OK*/
-        .error(`Invalid date: ${datetime}`);
-    }
-  } else if (timestampMs) {
-    epoch = timestampMs;
-  } else if (timestampSeconds) {
-    epoch = timestampSeconds * 1000;
-  }
-
-  if (epoch === undefined) {
-    console /*OK*/
-      .error('One of datetime, timestamp-ms, or timestamp-seconds is required');
-  }
-
-  return epoch;
-}
-
-/**
- * @param {number} input
- * @return {string}
- */
-function padStart(input) {
-  if (input > 9) {
-    return input.toString();
-  }
-
-  return '0' + input;
-}
-
-/**
- * @param {!VariablesV2Def} data
- * @return {!EnhancedVariablesV2Def}
- */
-function enhanceBasicVariables(data) {
-  const hour12 = data.hour % 12 || 12;
-
-  // Override type since Object.assign is not understood
-  return /** @type {!EnhancedVariablesV2Def} */ ({
-    ...data,
-    'yearTwoDigit': padStart(data.year % 100),
-    'monthTwoDigit': padStart(data.month),
-    'dayTwoDigit': padStart(data.day),
-    'hourTwoDigit': padStart(data.hour),
-    'hour12': hour12,
-    'hour12TwoDigit': padStart(hour12),
-    'minuteTwoDigit': padStart(data.minute),
-    'secondTwoDigit': padStart(data.second),
-    'dayPeriod': data.hour < 12 ? 'am' : 'pm',
-  });
-}
-
-/**
- * @param {!Date} date
- * @param {string} locale
- * @return {!VariablesV2Def}
- */
-function getVariablesInLocal(date, locale) {
-  return {
-    'year': date.getFullYear(),
-    'month': date.getMonth() + 1,
-    'monthName': date.toLocaleDateString(locale, {month: 'long'}),
-    'monthNameShort': date.toLocaleDateString(locale, {
-      month: 'short',
-    }),
-    'day': date.getDate(),
-    'dayName': date.toLocaleDateString(locale, {weekday: 'long'}),
-    'dayNameShort': date.toLocaleDateString(locale, {
-      weekday: 'short',
-    }),
-    'hour': date.getHours(),
-    'minute': date.getMinutes(),
-    'second': date.getSeconds(),
-    'iso': date.toISOString(),
-  };
-}
-
-/**
- * @param {!Date} date
- * @param {string} locale
- * @return {!VariablesV2Def}
- */
-function getVariablesInUTC(date, locale) {
-  return {
-    'year': date.getUTCFullYear(),
-    'month': date.getUTCMonth() + 1,
-    'monthName': date.toLocaleDateString(locale, {
-      month: 'long',
-      timeZone: 'UTC',
-    }),
-    'monthNameShort': date.toLocaleDateString(locale, {
-      month: 'short',
-      timeZone: 'UTC',
-    }),
-    'day': date.getUTCDate(),
-    'dayName': date.toLocaleDateString(locale, {
-      weekday: 'long',
-      timeZone: 'UTC',
-    }),
-    'dayNameShort': date.toLocaleDateString(locale, {
-      weekday: 'short',
-      timeZone: 'UTC',
-    }),
-    'hour': date.getUTCHours(),
-    'minute': date.getUTCMinutes(),
-    'second': date.getUTCSeconds(),
-    'iso': date.toISOString(),
-  };
-}
diff --git a/extensions/amp-date-display/1.0/package.json b/extensions/amp-date-display/1.0/package.json
new file mode 100644
index 0000000000000..2201d53e13a2c
--- /dev/null
+++ b/extensions/amp-date-display/1.0/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-date-display",
+  "version": "VERSION",
+  "description": "AMP Date Display Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "./dist/component.js",
+  "module": "./dist/component-preact.module.js",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "./dist/component-preact.module.js",
+      "require": "./dist/component-preact.js"
+    },
+    "./react": {
+      "import": "./dist/component-react.module.js",
+      "require": "./dist/component-react.js"
+    }
+  },
+  "files": ["dist/*", "react.js"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml.git",
+    "directory": "extensions/amp-date-display/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-date-display/1.0",
+  "peerDependencies": {
+    "preact": "^10.2.1",
+    "react": "^17.0.0"
+  }
+}
diff --git a/extensions/amp-date-display/1.0/react.js b/extensions/amp-date-display/1.0/react.js
new file mode 100644
index 0000000000000..0b2957c35c38d
--- /dev/null
+++ b/extensions/amp-date-display/1.0/react.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-env node */
+// eslint-disable-next-line local/no-module-exports
+module.exports = require('./dist/component-react');
diff --git a/extensions/amp-date-display/1.0/render-dom-tree.js b/extensions/amp-date-display/1.0/render-dom-tree.js
deleted file mode 100644
index bdfafd5a4916d..0000000000000
--- a/extensions/amp-date-display/1.0/render-dom-tree.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * 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.
- */
-
-import {AmpEvents} from '../../../src/amp-events';
-import {createCustomEvent} from '../../../src/event-helper';
-import {dev, devAssert} from '../../../src/log';
-import {removeChildren} from '../../../src/dom';
-import {useResourcesNotify} from '../../../src/preact/utils';
-
-/**
- * Clears the host element and appends the DOM tree into it.
- *
- * @param {!JsonObject} props
- * @return {null}
- */
-export function RenderDomTree(props) {
-  const {'dom': dom, 'host': host} = props;
-  useResourcesNotify();
-
-  removeChildren(dev().assertElement(host));
-  if (dom) {
-    host.appendChild(dom);
-  }
-
-  const event = createCustomEvent(
-    devAssert(host.ownerDocument.defaultView),
-    AmpEvents.DOM_UPDATE,
-    /* detail */ null,
-    {bubbles: true}
-  );
-  host.dispatchEvent(event);
-
-  return null;
-}
diff --git a/extensions/amp-date-display/1.0/storybook/Basic.amp.js b/extensions/amp-date-display/1.0/storybook/Basic.amp.js
index 2a666316c2d8f..be67cd811653e 100644
--- a/extensions/amp-date-display/1.0/storybook/Basic.amp.js
+++ b/extensions/amp-date-display/1.0/storybook/Basic.amp.js
@@ -15,32 +15,105 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {date, withKnobs} from '@storybook/addon-knobs';
-import {storiesOf} from '@storybook/preact';
-import {withA11y} from '@storybook/addon-a11y';
-import withAmp from '../../../../build-system/tasks/storybook/amp-env/decorator.js';
-
-// eslint-disable-next-line
-storiesOf('amp-date-display', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withA11y)
-  .addDecorator(withAmp)
-  .addParameters({extensions: [{name: 'amp-date-display', version: '1.0'}]})
-  .add('responsive', () => {
-    const datetime = date('Date/Time', new Date());
-    return (
+import {date, select, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+const DISPLAY_IN_OPTIONS = ['utc', 'local'];
+const LOCALES = ['en-US', 'en-GB', 'fr', 'ru', 'ar', 'he', 'ja'];
+
+export default {
+  title: 'amp-date-display-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [
+      {name: 'amp-date-display', version: '1.0'},
+      {name: 'amp-mustache', version: '0.2'},
+    ],
+
+    experiments: ['bento'],
+  },
+};
+
+export const Default = () => {
+  const datetime = new Date(date('Date/Time', new Date())).toISOString();
+  const displayIn = select(
+    'Display in',
+    DISPLAY_IN_OPTIONS,
+    DISPLAY_IN_OPTIONS[0]
+  );
+  const locale = select('Locale', LOCALES, LOCALES[0]);
+  return (
+    <amp-date-display
+      datetime={datetime}
+      display-in={displayIn}
+      locale={locale}
+      layout="responsive"
+      width="100"
+      height="100"
+    >
+      <template type="amp-mustache">
+        <div>
+          {`UTC in local: {{dayName}} {{day}} {{monthName}} {{year}},
+            {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}`}
+        </div>
+      </template>
+    </amp-date-display>
+  );
+};
+
+Default.storyName = 'default';
+
+export const DefaultRenderer = () => {
+  const datetime = new Date(date('Date/Time', new Date())).toISOString();
+  const displayIn = select(
+    'Display in',
+    DISPLAY_IN_OPTIONS,
+    DISPLAY_IN_OPTIONS[0]
+  );
+  const locale = select('Locale', LOCALES, LOCALES[0]);
+  return (
+    <amp-date-display
+      datetime={datetime}
+      display-in={displayIn}
+      locale={locale}
+      layout="responsive"
+      width="100"
+      height="100"
+    />
+  );
+};
+
+DefaultRenderer.storyName = 'default renderer';
+
+export const ExternalTemplate = () => {
+  const datetime = new Date(date('Date/Time', new Date())).toISOString();
+  const displayIn = select(
+    'Display in',
+    DISPLAY_IN_OPTIONS,
+    DISPLAY_IN_OPTIONS[0]
+  );
+  const locale = select('Locale', LOCALES, LOCALES[0]);
+  const template = select('Template', ['template1', 'template2'], 'template1');
+  return (
+    <div>
+      <template type="amp-mustache" id="template1">
+        <div>{`Template1: {{dayName}} {{day}} {{monthName}} {{year}}`}</div>
+      </template>
+      <template type="amp-mustache" id="template2">
+        <div>{`Template2: {{day}} {{month}} {{year}}`}</div>
+      </template>
       <amp-date-display
         datetime={datetime}
+        display-in={displayIn}
+        locale={locale}
+        template={template}
         layout="responsive"
         width="100"
         height="100"
-      >
-        <template type="amp-mustache">
-          <div>
-            {`UTC in local: {{dayName}} {{day}} {{monthName}} {{year}},
-            {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}`}
-          </div>
-        </template>
-      </amp-date-display>
-    );
-  });
+      ></amp-date-display>
+    </div>
+  );
+};
+
+ExternalTemplate.storyName = 'external template';
diff --git a/extensions/amp-date-display/1.0/storybook/Basic.js b/extensions/amp-date-display/1.0/storybook/Basic.js
index 6819f84c6cebc..32c566ed576b9 100644
--- a/extensions/amp-date-display/1.0/storybook/Basic.js
+++ b/extensions/amp-date-display/1.0/storybook/Basic.js
@@ -15,24 +15,47 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {DateDisplay} from '../date-display';
-import {date, withKnobs} from '@storybook/addon-knobs';
-import {withA11y} from '@storybook/addon-a11y';
+import {DateDisplay} from '../component';
+import {date, select, withKnobs} from '@storybook/addon-knobs';
 
 export default {
   title: 'DateDisplay',
   component: DateDisplay,
-  decorators: [withA11y, withKnobs],
+  decorators: [withKnobs],
 };
 
+const DISPLAY_IN_OPTIONS = ['utc', 'local'];
+const LOCALES = ['en-US', 'en-GB', 'fr', 'ru', 'ar', 'he', 'ja'];
+
 export const _default = () => {
   const dateTime = date('Date/time', new Date());
+  const displayIn = select(
+    'Display in',
+    DISPLAY_IN_OPTIONS,
+    DISPLAY_IN_OPTIONS[0]
+  );
+  const locale = select('Locale', LOCALES, LOCALES[0]);
   return (
     <DateDisplay
-      timestampSeconds={dateTime}
-      layout="fixed-height"
-      height="20"
-      render={(date) => <span>{`The ISO date is ${date.iso}`}</span>}
+      datetime={dateTime}
+      displayIn={displayIn}
+      locale={locale}
+      render={(date) => (
+        <div>{`ISO: ${date.iso}; locale: ${date.localeString}`}</div>
+      )}
     />
   );
 };
+
+export const defaultRenderer = () => {
+  const displayIn = select(
+    'Display in',
+    DISPLAY_IN_OPTIONS,
+    DISPLAY_IN_OPTIONS[0]
+  );
+  const dateTime = date('Date/time', new Date());
+  const locale = select('Locale', LOCALES, LOCALES[0]);
+  return (
+    <DateDisplay datetime={dateTime} displayIn={displayIn} locale={locale} />
+  );
+};
diff --git a/extensions/amp-date-display/1.0/test/test-amp-date-display.js b/extensions/amp-date-display/1.0/test/test-amp-date-display.js
index 3ece669b7d99f..53526d9db759d 100644
--- a/extensions/amp-date-display/1.0/test/test-amp-date-display.js
+++ b/extensions/amp-date-display/1.0/test/test-amp-date-display.js
@@ -16,45 +16,43 @@
 
 import '../../../amp-mustache/0.2/amp-mustache';
 import '../amp-date-display';
-import * as lolex from 'lolex';
-import {
-  waitForChildPromise,
-  whenUpgradedToCustomElement,
-} from '../../../../src/dom';
+import {expect} from 'chai';
+import {user} from '../../../../src/log';
+import {waitFor} from '../../../../testing/test-helper.js';
+import {whenUpgradedToCustomElement} from '../../../../src/dom';
 
 describes.realWin(
-  'amp-date-display',
+  'amp-date-display 1.0',
   {
     amp: {
-      runtimeOn: true,
       extensions: ['amp-mustache:0.2', 'amp-date-display:1.0'],
     },
   },
   (env) => {
     let win;
-    let element;
-    let clock;
+    let element, template;
 
-    async function getRenderedData() {
+    async function waitRendered() {
       await whenUpgradedToCustomElement(element);
-      await element.whenBuilt();
-      await waitForChildPromise(element, () => {
-        // The rendered container inserts a div element.
-        return element.querySelector('div');
-      });
+      await element.buildInternal();
+      await waitFor(() => {
+        // The rendered container inserts a <div> element.
+        const div = element.querySelector('div');
+        return div && div.textContent;
+      }, 'wrapper div rendered');
+      return element.querySelector('div');
+    }
 
-      return JSON.parse(element.textContent);
+    async function getRenderedData() {
+      const wrapper = await waitRendered();
+      return JSON.parse(wrapper.textContent);
     }
 
     beforeEach(() => {
       win = env.win;
-      clock = lolex.install({
-        target: window,
-        now: new Date('2018-01-01T08:00:00Z'),
-      });
 
       element = win.document.createElement('amp-date-display');
-      const template = win.document.createElement('template');
+      template = win.document.createElement('template');
       template.setAttribute('type', 'amp-mustache');
       template.content.textContent = JSON.stringify({
         year: '{{year}}',
@@ -77,15 +75,12 @@ describes.realWin(
         secondTwoDigit: '{{secondTwoDigit}}',
         dayPeriod: '{{dayPeriod}}',
         iso: '{{iso}}',
+        localeString: '{{localeString}}',
       });
       element.appendChild(template);
       element.setAttribute('layout', 'nodisplay');
     });
 
-    afterEach(() => {
-      clock.uninstall();
-    });
-
     it('renders mustache template into element', async () => {
       element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
       element.setAttribute('display-in', 'UTC');
@@ -112,6 +107,103 @@ describes.realWin(
       expect(data.second).to.equal('6');
       expect(data.secondTwoDigit).to.equal('06');
       expect(data.dayPeriod).to.equal('am');
+      expect(data.localeString).to.equal('Feb 3, 2001, 4:05 AM');
+    });
+
+    it('renders mustache template with "timestamp-ms"', async () => {
+      element.setAttribute(
+        'timestamp-ms',
+        Date.parse('2001-02-03T04:05:06.007Z')
+      );
+      element.setAttribute('display-in', 'UTC');
+      win.document.body.appendChild(element);
+
+      const data = await getRenderedData();
+
+      expect(data.year).to.equal('2001');
+      expect(data.yearTwoDigit).to.equal('01');
+      expect(data.month).to.equal('2');
+      expect(data.monthTwoDigit).to.equal('02');
+      expect(data.monthName).to.equal('February');
+      expect(data.monthNameShort).to.equal('Feb');
+      expect(data.day).to.equal('3');
+      expect(data.dayTwoDigit).to.equal('03');
+      expect(data.dayName).to.equal('Saturday');
+      expect(data.dayNameShort).to.equal('Sat');
+      expect(data.hour).to.equal('4');
+      expect(data.hourTwoDigit).to.equal('04');
+      expect(data.hour12).to.equal('4');
+      expect(data.hour12TwoDigit).to.equal('04');
+      expect(data.minute).to.equal('5');
+      expect(data.minuteTwoDigit).to.equal('05');
+      expect(data.second).to.equal('6');
+      expect(data.secondTwoDigit).to.equal('06');
+      expect(data.dayPeriod).to.equal('am');
+      expect(data.localeString).to.equal('Feb 3, 2001, 4:05 AM');
+    });
+
+    it('render localeString with data-options-time-style', async () => {
+      element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
+      element.setAttribute('display-in', 'UTC');
+      element.setAttribute('locale', 'zh-TW');
+      element.setAttribute('data-options-time-style', 'short');
+      win.document.body.appendChild(element);
+
+      const data = await getRenderedData();
+
+      expect(data.localeString).to.equal('上午4:05');
+    });
+
+    it('render localeString with data-options-date-style & data-options-time-style', async () => {
+      element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
+      element.setAttribute('display-in', 'UTC');
+      element.setAttribute('locale', 'zh-TW');
+      element.setAttribute('data-options-date-style', 'full');
+      element.setAttribute('data-options-time-style', 'medium');
+      win.document.body.appendChild(element);
+
+      const data = await getRenderedData();
+
+      expect(data.localeString).to.equal('2001年2月3日 星期六 上午4:05:06');
+    });
+
+    describe('invalid data-options-* settings', () => {
+      it('throws error when provided invalid data-options', async () => {
+        const spy = env.sandbox.stub(user(), 'error');
+        element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
+        element.setAttribute('display-in', 'UTC');
+        element.setAttribute('locale', 'zh-TW');
+        element.setAttribute('data-options-date-style', 'invalid');
+        win.document.body.appendChild(element);
+
+        const wrapper = await getRenderedData();
+
+        expect(spy.args[0][1]).to.equal('localeOptions');
+        expect(spy.args[0][2]).to.match(/RangeError/);
+        expect(wrapper.localeString).to.be.empty;
+      });
+
+      it('ignores the attr when invalid data-options-attr is provided', async () => {
+        element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
+        element.setAttribute('display-in', 'UTC');
+        element.setAttribute('locale', 'zh-TW');
+        element.setAttribute('data-options-invalid', 'invalid');
+        win.document.body.appendChild(element);
+
+        const wrapper = await getRenderedData();
+
+        expect(wrapper.localeString).to.equal('2001/2/3 上午4:05:06');
+      });
+    });
+
+    it('renders default template into element', async () => {
+      element.setAttribute('datetime', '2001-02-03T04:05:06.007Z');
+      element.setAttribute('display-in', 'UTC');
+      element.removeChild(template);
+      win.document.body.appendChild(element);
+
+      const wrapper = await waitRendered();
+      expect(wrapper.textContent).to.contain('2001');
     });
 
     it('does not rerender', async () => {
diff --git a/extensions/amp-date-display/1.0/test/test-component.js b/extensions/amp-date-display/1.0/test/test-component.js
new file mode 100644
index 0000000000000..75686780a4e15
--- /dev/null
+++ b/extensions/amp-date-display/1.0/test/test-component.js
@@ -0,0 +1,264 @@
+/**
+ * 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {DateDisplay} from '../component';
+import {mount} from 'enzyme';
+import {user} from '../../../../src/log';
+
+describes.sandboxed('DateDisplay 1.0 preact component', {}, (env) => {
+  let sandbox;
+  let clock;
+
+  function render(data) {
+    return JSON.stringify(
+      data,
+      (key, value) => {
+        if (typeof value === 'number') {
+          return String(value);
+        }
+        return value;
+      },
+      4
+    );
+  }
+
+  beforeEach(() => {
+    sandbox = env.sandbox;
+    clock = sandbox.useFakeTimers(new Date('2018-01-01T08:00:00Z'));
+  });
+
+  afterEach(() => {
+    clock.runAll();
+  });
+
+  function syncPromise(response) {
+    return {
+      then(callback) {
+        callback(response);
+      },
+    };
+  }
+
+  // Unfortunately, we cannot test the most interesting case of UTC datetime
+  // displayed in local, because the test would work in only one time zone.
+
+  it('should render as a div by default', () => {
+    const props = {
+      render,
+      datetime: Date.parse('2001-02-03T04:05:06.007Z'),
+      displayIn: 'UTC',
+    };
+    const jsx = <DateDisplay {...props} />;
+
+    const wrapper = mount(jsx);
+
+    // This is actually fairly arbitrary that it should be a "div". But it's
+    // checked here to ensure that we can change it controllably when needed.
+    expect(wrapper.getDOMNode().tagName).to.equal('DIV');
+  });
+
+  it('provides all variables in UTC and English (default)', () => {
+    const props = {
+      render,
+      datetime: Date.parse('2001-02-03T04:05:06.007Z'),
+      displayIn: 'UTC',
+    };
+    const jsx = <DateDisplay {...props} />;
+
+    const wrapper = mount(jsx);
+    const data = JSON.parse(wrapper.text());
+
+    expect(data.year).to.equal('2001');
+    expect(data.yearTwoDigit).to.equal('01');
+    expect(data.month).to.equal('2');
+    expect(data.monthTwoDigit).to.equal('02');
+    expect(data.monthName).to.equal('February');
+    expect(data.monthNameShort).to.equal('Feb');
+    expect(data.day).to.equal('3');
+    expect(data.dayTwoDigit).to.equal('03');
+    expect(data.dayName).to.equal('Saturday');
+    expect(data.dayNameShort).to.equal('Sat');
+    expect(data.hour).to.equal('4');
+    expect(data.hourTwoDigit).to.equal('04');
+    expect(data.hour12).to.equal('4');
+    expect(data.hour12TwoDigit).to.equal('04');
+    expect(data.minute).to.equal('5');
+    expect(data.minuteTwoDigit).to.equal('05');
+    expect(data.second).to.equal('6');
+    expect(data.secondTwoDigit).to.equal('06');
+    expect(data.dayPeriod).to.equal('am');
+  });
+
+  it('should handle an async renderer', () => {
+    const props = {
+      render: (data) => syncPromise(render(data)),
+      datetime: Date.parse('2001-02-03T04:05:06.007Z'),
+      displayIn: 'UTC',
+    };
+    const jsx = <DateDisplay {...props} />;
+
+    const wrapper = mount(jsx);
+    const data = JSON.parse(wrapper.text());
+    expect(data.year).to.equal('2001');
+    expect(data.yearTwoDigit).to.equal('01');
+  });
+
+  it('should use a default renderer in UTC', () => {
+    const props = {
+      datetime: Date.parse('2001-02-03T04:05:06.007Z'),
+      displayIn: 'UTC',
+    };
+    const jsx = <DateDisplay {...props} />;
+
+    const wrapper = mount(jsx);
+    expect(wrapper.text()).to.equal('Feb 3, 2001, 4:05 AM');
+  });
+
+  it('accepts Date type', () => {
+    const props = {
+      render,
+      datetime: new Date('2001-02-03T04:05:06.007Z'),
+      displayIn: 'UTC',
+    };
+    const jsx = <DateDisplay {...props} />;
+
+    const wrapper = mount(jsx);
+    const data = JSON.parse(wrapper.text());
+
+    expect(data.year).to.equal('2001');
+    expect(data.yearTwoDigit).to.equal('01');
+    expect(data.month).to.equal('2');
+  });
+
+  it('accepts string type', () => {
+    const props = {
+      render,
+      datetime: '2001-02-03T04:05:06.007Z',
+      displayIn: 'UTC',
+    };
+    const jsx = <DateDisplay {...props} />;
+
+    const wrapper = mount(jsx);
+    const data = JSON.parse(wrapper.text());
+
+    expect(data.year).to.equal('2001');
+    expect(data.yearTwoDigit).to.equal('01');
+    expect(data.month).to.equal('2');
+  });
+
+  it('provides all variables in local and English (default)', () => {
+    const props = {
+      render,
+      datetime: Date.parse('2001-02-03T04:05:06.007'),
+    };
+    const jsx = <DateDisplay {...props} />;
+
+    const wrapper = mount(jsx);
+    const data = JSON.parse(wrapper.text());
+
+    expect(data.year).to.equal('2001');
+    expect(data.yearTwoDigit).to.equal('01');
+    expect(data.month).to.equal('2');
+    expect(data.monthTwoDigit).to.equal('02');
+    expect(data.monthName).to.equal('February');
+    expect(data.monthNameShort).to.equal('Feb');
+    expect(data.day).to.equal('3');
+    expect(data.dayTwoDigit).to.equal('03');
+    expect(data.dayName).to.equal('Saturday');
+    expect(data.dayNameShort).to.equal('Sat');
+    expect(data.hour).to.equal('4');
+    expect(data.hourTwoDigit).to.equal('04');
+    expect(data.hour12).to.equal('4');
+    expect(data.hour12TwoDigit).to.equal('04');
+    expect(data.minute).to.equal('5');
+    expect(data.minuteTwoDigit).to.equal('05');
+    expect(data.second).to.equal('6');
+    expect(data.secondTwoDigit).to.equal('06');
+    expect(data.dayPeriod).to.equal('am');
+  });
+
+  it('provides variables in Czech when "cs" locale is passed', () => {
+    const props = {
+      render,
+      datetime: Date.parse('2001-02-03T04:05:06.007Z'),
+      displayIn: 'UTC',
+      locale: 'cs',
+    };
+    const jsx = <DateDisplay {...props} />;
+
+    const wrapper = mount(jsx);
+    const data = JSON.parse(wrapper.text());
+
+    expect(data.monthName).to.equal('únor');
+    expect(data.monthNameShort).to.equal('úno');
+    expect(data.dayName).to.equal('sobota');
+    expect(data.dayNameShort).to.equal('so');
+  });
+
+  it('shows custom locale string when localeOptions is passed', () => {
+    const props = {
+      render,
+      datetime: Date.parse('2001-02-03T04:05:06.007Z'),
+      displayIn: 'UTC',
+      locale: 'zh-TW',
+      localeOptions: {timeStyle: 'short'},
+    };
+    const jsx = <DateDisplay {...props} />;
+
+    const wrapper = mount(jsx);
+    const data = JSON.parse(wrapper.text());
+
+    expect(data.localeString).to.equal('上午4:05');
+  });
+
+  describe('invalid data-options-* settings', () => {
+    it('throws error when invalid localeOptions is passed', () => {
+      const spy = env.sandbox.stub(user(), 'error');
+      const props = {
+        render,
+        datetime: Date.parse('2001-02-03T04:05:06.007Z'),
+        displayIn: 'UTC',
+        locale: 'zh-TW',
+        localeOptions: {timeStyle: 'invalid'},
+      };
+      const jsx = <DateDisplay {...props} />;
+
+      const wrapper = mount(jsx);
+      const data = JSON.parse(wrapper.text());
+
+      expect(spy.args[0][1]).to.equal('localeOptions');
+      expect(spy.args[0][2]).to.match(/RangeError/);
+      expect(data.localeString).to.be.undefined;
+    });
+
+    it('ignores the attr when invalid data-options-attr is provided', () => {
+      const props = {
+        render,
+        datetime: Date.parse('2001-02-03T04:05:06.007Z'),
+        displayIn: 'UTC',
+        locale: 'zh-TW',
+        localeOptions: {invalid: 'invalid'},
+      };
+      const jsx = <DateDisplay {...props} />;
+
+      const wrapper = mount(jsx);
+      const data = JSON.parse(wrapper.text());
+
+      expect(data.localeString).to.equal('2001/2/3 上午4:05:06');
+    });
+  });
+});
diff --git a/extensions/amp-date-display/1.0/test/test-date-display.js b/extensions/amp-date-display/1.0/test/test-date-display.js
deleted file mode 100644
index 6ed42328196bc..0000000000000
--- a/extensions/amp-date-display/1.0/test/test-date-display.js
+++ /dev/null
@@ -1,251 +0,0 @@
-/**
- * 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.
- */
-
-import * as Preact from '../../../../src/preact';
-import {DateDisplay} from '../date-display';
-import {mount} from 'enzyme';
-
-describes.sandboxed('date-display preact component', {}, (env) => {
-  let sandbox;
-
-  function render(data) {
-    return JSON.stringify(
-      data,
-      (key, value) => {
-        if (typeof value === 'number') {
-          return String(value);
-        }
-        return value;
-      },
-      4
-    );
-  }
-
-  beforeEach(() => {
-    sandbox = env.sandbox;
-    sandbox.useFakeTimers(new Date('2018-01-01T08:00:00Z'));
-  });
-
-  // Unfortunately, we cannot test the most interesting case of UTC datetime
-  // displayed in local, because the test would work in only one time zone.
-
-  it('provides all variables in UTC and English (default)', () => {
-    const props = {
-      render,
-      datetime: '2001-02-03T04:05:06.007Z',
-      displayIn: 'UTC',
-    };
-    const jsx = <DateDisplay {...props} />;
-
-    const wrapper = mount(jsx);
-    const data = JSON.parse(wrapper.text());
-
-    expect(data.year).to.equal('2001');
-    expect(data.yearTwoDigit).to.equal('01');
-    expect(data.month).to.equal('2');
-    expect(data.monthTwoDigit).to.equal('02');
-    expect(data.monthName).to.equal('February');
-    expect(data.monthNameShort).to.equal('Feb');
-    expect(data.day).to.equal('3');
-    expect(data.dayTwoDigit).to.equal('03');
-    expect(data.dayName).to.equal('Saturday');
-    expect(data.dayNameShort).to.equal('Sat');
-    expect(data.hour).to.equal('4');
-    expect(data.hourTwoDigit).to.equal('04');
-    expect(data.hour12).to.equal('4');
-    expect(data.hour12TwoDigit).to.equal('04');
-    expect(data.minute).to.equal('5');
-    expect(data.minuteTwoDigit).to.equal('05');
-    expect(data.second).to.equal('6');
-    expect(data.secondTwoDigit).to.equal('06');
-    expect(data.dayPeriod).to.equal('am');
-  });
-
-  it('provides all variables in local and English (default)', () => {
-    const props = {
-      render,
-      datetime: '2001-02-03T04:05:06.007',
-    };
-    const jsx = <DateDisplay {...props} />;
-
-    const wrapper = mount(jsx);
-    const data = JSON.parse(wrapper.text());
-
-    expect(data.year).to.equal('2001');
-    expect(data.yearTwoDigit).to.equal('01');
-    expect(data.month).to.equal('2');
-    expect(data.monthTwoDigit).to.equal('02');
-    expect(data.monthName).to.equal('February');
-    expect(data.monthNameShort).to.equal('Feb');
-    expect(data.day).to.equal('3');
-    expect(data.dayTwoDigit).to.equal('03');
-    expect(data.dayName).to.equal('Saturday');
-    expect(data.dayNameShort).to.equal('Sat');
-    expect(data.hour).to.equal('4');
-    expect(data.hourTwoDigit).to.equal('04');
-    expect(data.hour12).to.equal('4');
-    expect(data.hour12TwoDigit).to.equal('04');
-    expect(data.minute).to.equal('5');
-    expect(data.minuteTwoDigit).to.equal('05');
-    expect(data.second).to.equal('6');
-    expect(data.secondTwoDigit).to.equal('06');
-    expect(data.dayPeriod).to.equal('am');
-  });
-
-  describe('correctly parses', () => {
-    it('now keyword', () => {
-      const props = {
-        render,
-        datetime: 'now',
-      };
-      const jsx = <DateDisplay {...props} />;
-
-      const wrapper = mount(jsx);
-      const data = JSON.parse(wrapper.text());
-      const dateFromParsed = new Date(data.iso);
-
-      // Because of the runtime there could be a several ms difference.
-      expect(dateFromParsed.getTime()).to.equal(Date.now());
-    });
-
-    it('day only ISO 8601 date', () => {
-      const props = {
-        render,
-        datetime: '2001-02-03',
-      };
-      const jsx = <DateDisplay {...props} />;
-
-      const wrapper = mount(jsx);
-      const data = JSON.parse(wrapper.text());
-
-      expect(data.iso).to.equal('2001-02-03T00:00:00.000Z');
-    });
-
-    it('full ISO 8601 date in UTC time zone', () => {
-      const props = {
-        render,
-        datetime: '2001-02-03T04:05:06.007Z',
-      };
-      const jsx = <DateDisplay {...props} />;
-
-      const wrapper = mount(jsx);
-      const data = JSON.parse(wrapper.text());
-
-      expect(data.iso).to.equal('2001-02-03T04:05:06.007Z');
-    });
-
-    it('full ISO 8601 date without time zone (interpreted as local)', () => {
-      const props = {
-        render,
-        datetime: '2001-02-03T04:05:06.007',
-      };
-      const jsx = <DateDisplay {...props} />;
-
-      const wrapper = mount(jsx);
-      const data = JSON.parse(wrapper.text());
-      const result =
-        `${data.year}-${data.monthTwoDigit}-${data.dayTwoDigit}` +
-        `T${data.hourTwoDigit}:${data.minuteTwoDigit}:${data.secondTwoDigit}`;
-
-      expect(result).to.equal('2001-02-03T04:05:06');
-    });
-
-    it('full ISO 8601 date in a custom time zone', () => {
-      const props = {
-        render,
-        datetime: '2001-02-03T04:05:06.007+08:00',
-      };
-      const jsx = <DateDisplay {...props} />;
-
-      const wrapper = mount(jsx);
-      const data = JSON.parse(wrapper.text());
-
-      expect(data.iso).to.equal('2001-02-02T20:05:06.007Z');
-    });
-
-    it('seconds since the UNIX epoch', () => {
-      const props = {
-        render,
-        timestampSeconds: 981173106,
-      };
-      const jsx = <DateDisplay {...props} />;
-
-      const wrapper = mount(jsx);
-      const data = JSON.parse(wrapper.text());
-
-      expect(data.iso).to.equal('2001-02-03T04:05:06.000Z');
-    });
-
-    it('miliseconds since the UNIX epoch', () => {
-      const props = {
-        render,
-        timestampMs: 981173106007,
-      };
-      const jsx = <DateDisplay {...props} />;
-
-      const wrapper = mount(jsx);
-      const data = JSON.parse(wrapper.text());
-
-      expect(data.iso).to.equal('2001-02-03T04:05:06.007Z');
-    });
-  });
-
-  it('adds offset seconds', () => {
-    const props = {
-      render,
-      datetime: '2001-02-03T04:05:06.007Z',
-      offsetSeconds: 1234567,
-    };
-    const jsx = <DateDisplay {...props} />;
-
-    const wrapper = mount(jsx);
-    const data = JSON.parse(wrapper.text());
-
-    expect(data.iso).to.equal('2001-02-17T11:01:13.007Z');
-  });
-
-  it('subtracts offset seconds', () => {
-    const props = {
-      render,
-      datetime: '2001-02-03T04:05:06.007Z',
-      offsetSeconds: -1234567,
-    };
-    const jsx = <DateDisplay {...props} />;
-
-    const wrapper = mount(jsx);
-    const data = JSON.parse(wrapper.text());
-
-    expect(data.iso).to.equal('2001-01-19T21:08:59.007Z');
-  });
-
-  it('provides variables in Czech when "cs" locale is passed', () => {
-    const props = {
-      render,
-      datetime: '2001-02-03T04:05:06.007Z',
-      displayIn: 'UTC',
-      locale: 'cs',
-    };
-    const jsx = <DateDisplay {...props} />;
-
-    const wrapper = mount(jsx);
-    const data = JSON.parse(wrapper.text());
-
-    expect(data.monthName).to.equal('únor');
-    expect(data.monthNameShort).to.equal('úno');
-    expect(data.dayName).to.equal('sobota');
-    expect(data.dayNameShort).to.equal('so');
-  });
-});
diff --git a/extensions/amp-date-display/1.0/test/validator-amp-date-display.html b/extensions/amp-date-display/1.0/test/validator-amp-date-display.html
new file mode 100644
index 0000000000000..d71e9c307804c
--- /dev/null
+++ b/extensions/amp-date-display/1.0/test/validator-amp-date-display.html
@@ -0,0 +1,183 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-date-display tag.
+-->
+<!DOCTYPE html>
+<html amp lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
+  <script async custom-element="amp-date-display" src="https://cdn.ampproject.org/v0/amp-date-display-1.0.js"></script>
+  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+
+<body>
+
+  <!-- valid -->
+  <amp-date-display datetime="2017-08-02T15:05:05.000Z" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- valid -->
+  <amp-date-display datetime="2017-08-02T15:05:05.000" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- valid -->
+  <amp-date-display datetime="2017-08-02T15:05:05.000+04:00" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- valid -->
+  <amp-date-display datetime="2017-08-02T15:05:05.00+04:00" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- valid -->
+  <amp-date-display datetime="2017-08-02T15:05:05.0+04:00" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- valid -->
+  <amp-date-display datetime="2017-08-02T15:05+04:00" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- valid -->
+  <amp-date-display datetime="2017-08-02T15:05" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- valid -->
+  <amp-date-display datetime="now" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- valid -->
+  <amp-date-display timestamp-seconds="1501686305" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- valid -->
+  <amp-date-display timestamp-ms="1501686305000" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- valid -->
+  <amp-date-display datetime="now" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- valid, with display-in -->
+  <amp-date-display datetime="now" display-in="utc" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- valid, with referenced template -->
+  <amp-date-display datetime="now" display-in="utc" layout="fixed" width="360" height="20" template="myTemplate">
+  </amp-date-display>
+  <template type="amp-mustache" id="myTemplate">{{iso}}</template>
+
+  <!-- invalid, with dangling reference to template -->
+  <amp-date-display datetime="now" display-in="utc" layout="fixed" width="360" height="20" template="notMyTemplate">
+  </amp-date-display>
+
+  <!-- valid, within amp-list with script mustache -->
+  <amp-list src="https://cors-test.appspot.com/test"
+            single-item
+            items="."
+            layout="fixed-height"
+            height="50">
+
+    <script type="text/plain" template="amp-mustache">
+      This should be a proper formatted date:
+      <amp-date-display datetime="2006-02-14T15:27:33+01:00" layout="fixed-height" height="20" template="date-template"> </amp-date-display>
+    </script>
+  </amp-list>
+
+  <template type="amp-mustache" id="date-template">
+    <small>{{ day }}.{{ month }}.{{ year }} {{ hourTwoDigit }}:{{ minuteTwoDigit }}</small>
+  </template>
+
+  <!-- valid, within amp-list with template mustache -->
+  <amp-list src="https://cors-test.appspot.com/test"
+            single-item
+            items="."
+            layout="fixed-height"
+            height="50">
+
+    <template type="amp-mustache">
+      This should be a proper formatted date:
+      <amp-date-display datetime="2006-02-14T15:27:33+01:00" layout="fixed-height" height="20" template="date-template"> </amp-date-display>
+    </template>
+  </amp-list>
+
+  <!-- invalid, no date provided -->
+  <amp-date-display layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- invalid, wrong date format -->
+  <amp-date-display datetime="20170802" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- invalid, date with time zone -->
+  <amp-date-display datetime="2017-08-02+04:00" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- invalid, no minutes in time zone -->
+  <amp-date-display datetime="2017-08-02T15:05:05+04" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- invalid, no date -->
+  <amp-date-display datetime="T15:05:05.000Z" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- invalid, missing hour (hour > 23) -->
+  <amp-date-display datetime="2017-08-02T59:05.000Z" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- invalid, sub milliseconds -->
+  <amp-date-display datetime="2017-08-02T15:05:05.0001+04:00" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- invalid, missing fractions-->
+  <amp-date-display datetime="2017-08-02T15:05:05.+04:00" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">{{iso}}</template>
+  </amp-date-display>
+
+  <!-- valid, with data-options-time-style -->
+  <amp-date-display datetime="now" layout="fixed" width="360" height="20" data-options-time-style="short">
+    <template type="amp-mustache">{{localeString}}</template>
+  </amp-date-display>
+</body>
+
+</html>
diff --git a/extensions/amp-date-display/1.0/test/validator-amp-date-display.out b/extensions/amp-date-display/1.0/test/validator-amp-date-display.out
new file mode 100644
index 0000000000000..62f439e461bbc
--- /dev/null
+++ b/extensions/amp-date-display/1.0/test/validator-amp-date-display.out
@@ -0,0 +1,202 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-date-display tag.
+|  -->
+|  <!DOCTYPE html>
+|  <html amp lang="en">
+|
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
+|    <script async custom-element="amp-date-display" src="https://cdn.ampproject.org/v0/amp-date-display-1.0.js"></script>
+|    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|
+|  <body>
+|
+|    <!-- valid -->
+|    <amp-date-display datetime="2017-08-02T15:05:05.000Z" layout="fixed" width="360" height="20">
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- valid -->
+|    <amp-date-display datetime="2017-08-02T15:05:05.000" layout="fixed" width="360" height="20">
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- valid -->
+|    <amp-date-display datetime="2017-08-02T15:05:05.000+04:00" layout="fixed" width="360" height="20">
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- valid -->
+|    <amp-date-display datetime="2017-08-02T15:05:05.00+04:00" layout="fixed" width="360" height="20">
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- valid -->
+|    <amp-date-display datetime="2017-08-02T15:05:05.0+04:00" layout="fixed" width="360" height="20">
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- valid -->
+|    <amp-date-display datetime="2017-08-02T15:05+04:00" layout="fixed" width="360" height="20">
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- valid -->
+|    <amp-date-display datetime="2017-08-02T15:05" layout="fixed" width="360" height="20">
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- valid -->
+|    <amp-date-display datetime="now" layout="fixed" width="360" height="20">
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- valid -->
+|    <amp-date-display timestamp-seconds="1501686305" layout="fixed" width="360" height="20">
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- valid -->
+|    <amp-date-display timestamp-ms="1501686305000" layout="fixed" width="360" height="20">
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- valid -->
+|    <amp-date-display datetime="now" layout="fixed" width="360" height="20">
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- valid, with display-in -->
+|    <amp-date-display datetime="now" display-in="utc" layout="fixed" width="360" height="20">
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- valid, with referenced template -->
+|    <amp-date-display datetime="now" display-in="utc" layout="fixed" width="360" height="20" template="myTemplate">
+|    </amp-date-display>
+|    <template type="amp-mustache" id="myTemplate">{{iso}}</template>
+|
+|    <!-- invalid, with dangling reference to template -->
+|    <amp-date-display datetime="now" display-in="utc" layout="fixed" width="360" height="20" template="notMyTemplate">
+>>   ^~~~~~~~~
+amp-date-display/1.0/test/validator-amp-date-display.html:104:2 Attribute 'template' in tag 'amp-date-display' contains a value that does not match any other tags on the page. (see https://amp.dev/documentation/components/amp-date-display)
+|    </amp-date-display>
+|
+|    <!-- valid, within amp-list with script mustache -->
+|    <amp-list src="https://cors-test.appspot.com/test"
+|              single-item
+|              items="."
+|              layout="fixed-height"
+|              height="50">
+|
+|      <script type="text/plain" template="amp-mustache">
+|        This should be a proper formatted date:
+|        <amp-date-display datetime="2006-02-14T15:27:33+01:00" layout="fixed-height" height="20" template="date-template"> </amp-date-display>
+|      </script>
+|    </amp-list>
+|
+|    <template type="amp-mustache" id="date-template">
+|      <small>{{ day }}.{{ month }}.{{ year }} {{ hourTwoDigit }}:{{ minuteTwoDigit }}</small>
+|    </template>
+|
+|    <!-- valid, within amp-list with template mustache -->
+|    <amp-list src="https://cors-test.appspot.com/test"
+|              single-item
+|              items="."
+|              layout="fixed-height"
+|              height="50">
+|
+|      <template type="amp-mustache">
+|        This should be a proper formatted date:
+|        <amp-date-display datetime="2006-02-14T15:27:33+01:00" layout="fixed-height" height="20" template="date-template"> </amp-date-display>
+|      </template>
+|    </amp-list>
+|
+|    <!-- invalid, no date provided -->
+|    <amp-date-display layout="fixed" width="360" height="20">
+>>   ^~~~~~~~~
+amp-date-display/1.0/test/validator-amp-date-display.html:138:2 The tag 'amp-date-display' is missing a mandatory attribute - pick one of ['datetime', 'timestamp-ms', 'timestamp-seconds']. (see https://amp.dev/documentation/components/amp-date-display)
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- invalid, wrong date format -->
+|    <amp-date-display datetime="20170802" layout="fixed" width="360" height="20">
+>>   ^~~~~~~~~
+amp-date-display/1.0/test/validator-amp-date-display.html:143:2 The attribute 'datetime' in tag 'amp-date-display' is set to the invalid value '20170802'. (see https://amp.dev/documentation/components/amp-date-display)
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- invalid, date with time zone -->
+|    <amp-date-display datetime="2017-08-02+04:00" layout="fixed" width="360" height="20">
+>>   ^~~~~~~~~
+amp-date-display/1.0/test/validator-amp-date-display.html:148:2 The attribute 'datetime' in tag 'amp-date-display' is set to the invalid value '2017-08-02+04:00'. (see https://amp.dev/documentation/components/amp-date-display)
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- invalid, no minutes in time zone -->
+|    <amp-date-display datetime="2017-08-02T15:05:05+04" layout="fixed" width="360" height="20">
+>>   ^~~~~~~~~
+amp-date-display/1.0/test/validator-amp-date-display.html:153:2 The attribute 'datetime' in tag 'amp-date-display' is set to the invalid value '2017-08-02T15:05:05+04'. (see https://amp.dev/documentation/components/amp-date-display)
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- invalid, no date -->
+|    <amp-date-display datetime="T15:05:05.000Z" layout="fixed" width="360" height="20">
+>>   ^~~~~~~~~
+amp-date-display/1.0/test/validator-amp-date-display.html:158:2 The attribute 'datetime' in tag 'amp-date-display' is set to the invalid value 'T15:05:05.000Z'. (see https://amp.dev/documentation/components/amp-date-display)
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- invalid, missing hour (hour > 23) -->
+|    <amp-date-display datetime="2017-08-02T59:05.000Z" layout="fixed" width="360" height="20">
+>>   ^~~~~~~~~
+amp-date-display/1.0/test/validator-amp-date-display.html:163:2 The attribute 'datetime' in tag 'amp-date-display' is set to the invalid value '2017-08-02T59:05.000Z'. (see https://amp.dev/documentation/components/amp-date-display)
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- invalid, sub milliseconds -->
+|    <amp-date-display datetime="2017-08-02T15:05:05.0001+04:00" layout="fixed" width="360" height="20">
+>>   ^~~~~~~~~
+amp-date-display/1.0/test/validator-amp-date-display.html:168:2 The attribute 'datetime' in tag 'amp-date-display' is set to the invalid value '2017-08-02T15:05:05.0001+04:00'. (see https://amp.dev/documentation/components/amp-date-display)
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- invalid, missing fractions-->
+|    <amp-date-display datetime="2017-08-02T15:05:05.+04:00" layout="fixed" width="360" height="20">
+>>   ^~~~~~~~~
+amp-date-display/1.0/test/validator-amp-date-display.html:173:2 The attribute 'datetime' in tag 'amp-date-display' is set to the invalid value '2017-08-02T15:05:05.+04:00'. (see https://amp.dev/documentation/components/amp-date-display)
+|      <template type="amp-mustache">{{iso}}</template>
+|    </amp-date-display>
+|
+|    <!-- valid, with data-options-time-style -->
+|    <amp-date-display datetime="now" layout="fixed" width="360" height="20" data-options-time-style="short">
+|      <template type="amp-mustache">{{localeString}}</template>
+|    </amp-date-display>
+|  </body>
+|
+|  </html>
diff --git a/extensions/amp-date-display/OWNERS b/extensions/amp-date-display/OWNERS
index 2c8ae99cbb31d..9f3fd26b4109d 100644
--- a/extensions/amp-date-display/OWNERS
+++ b/extensions/amp-date-display/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'robinpokorny'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'robinpokorny'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-date-display/amp-date-display.md b/extensions/amp-date-display/amp-date-display.md
index 5ab09954c8ab4..7ef5da4cf25c0 100644
--- a/extensions/amp-date-display/amp-date-display.md
+++ b/extensions/amp-date-display/amp-date-display.md
@@ -4,10 +4,12 @@ formats:
   - websites
 teaser:
   text: The amp-date-display component displays time data that you can render in your AMP page.
+experiental: true
+bento: true
 ---
 
 <!--
-Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+Copyright 2021 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.
@@ -24,11 +26,15 @@ limitations under the License.
 
 # amp-date-display
 
-## Behavior
+## Usage
 
-The `amp-date-display` component displays time data that you can render in your AMP page. By providing specific [attributes](#attributes) in the `amp-date-display` tag, the `amp-date-display` extension returns a list of time parameters, which you can pass to [an amp-mustache template](https://amp.dev/documentation/components/amp-mustache) for rendering. Refer to the [list below for each returned time parameter](#returned-time-parameters).
-
-### Example
+The `amp-date-display` component displays time data that you can render in your
+AMP page. By providing specific [attributes](#attributes) in the
+`amp-date-display` tag, the `amp-date-display` extension returns a list of time
+parameters, which you can pass to
+[an amp-mustache template](../amp-mustache/amp-mustache.md)
+for rendering. Refer to the
+[list below for each returned time parameter](#returned-time-parameters).
 
 ```html
 <!-- Displays "Wednesday 2 August 2017, 15:05:05" -->
@@ -73,35 +79,127 @@ This table lists the format you can specify in your Mustache template:
 | secondTwoDigit | 00, 01, 02, ..., 58, 59                                       |
 | year           | 0, 1, 2, ..., 1999, 2000, 2001, etc.                          |
 | yearTwoDigit   | 00, 01, 02, ..., 17, 18, 19, ..., 98, 99                      |
+| localeString   | A string with a language sensitive representation.            |
+
+### Standalone use outside valid AMP documents
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+#### Example
+
+The example below demonstrates `amp-date-display` component in standalone use.
+
+[example preview="top-frame" playground="false"]
+
+```
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-date-display-1.0.css">
+  <script async custom-element="amp-date-display" src="https://cdn.ampproject.org/v0/amp-date-display-1.0.js"></script>
+   <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
+  <style>
+    amp-date-display {
+      display: block;
+      height: 20px;
+    }
+  </style>
+</head>
+<amp-date-display
+  id="my-date-display"
+  datetime="2017-08-02T15:05:05.000"
+  locale="en"
+>
+  <template type="amp-mustache">
+    <div>
+      {{dayName}} {{day}} {{monthName}} {{year}}
+      {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
+    </div>
+  </template>
+</amp-date-display>
+<div class="buttons" style="margin-top: 8px;">
+  <button id="ar-button">Change locale to Arabic</button>
+  <button id="en-button">Change locale to English</button>
+  <button id="now-button">Change time to now</button>
+</div>
+
+<script>
+  (async () => {
+    const dateDisplay = document.querySelector('#my-date-display');
+    await customElements.whenDefined('amp-date-display');
+
+    // set up button actions
+    document.querySelector('#ar-button').onclick = () => dateDisplay.setAttribute('locale', 'ar');
+    document.querySelector('#en-button').onclick = () => dateDisplay.setAttribute('locale', 'en');
+    document.querySelector('#now-button').onclick = () => dateDisplay.setAttribute('datetime', 'now');
+  })();
+</script>
+```
+
+[/example]
+
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-date-display-1.0.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
+
+**Container type**
+
+The `amp-date-display` component has a defined layout size type. To ensure the component renders correctly, apply the following styles:
+
+```css
+amp-date-display {
+  display: block;
+  height: 20px;
+}
+```
 
 ## Attributes
 
-You must specify at least one of these required attributes: `datetime`, `timestamp-ms`, or `timestamp-seconds`.
+You must specify at least one of these required attributes: `datetime`,
+`timestamp-ms`, or `timestamp-seconds`.
+
+### datetime
 
-##### datetime
+The `datetime` attribute specifies the date and time in a standard ISO 8601 date
+string (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,
+`amp-date-display` will use the time the page loaded to render its template.
 
-The `datetime` attribute specifies the date and time in a standard ISO 8601 date string (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`, `amp-date-display` will use the time the page loaded to render its template.
+### timestamp-ms
 
-##### timestamp-ms
+The `timestamp-ms` attribute specifies the date and time using the number of
+milliseconds since 1970-01-01T0:00:00.000Z
 
-The `timestamp-ms` attribute specifies the date and time using the number of milliseconds since 1970-01-01T0:00:00.000Z
+### timestamp-seconds
 
-##### timestamp-seconds
+The `timestamp-seconds` attribute specifies the date and time using the number
+of seconds since 1970-01-01T0:00:00.000Z
 
-The `timestamp-seconds` attribute specifies the date and time using the number of seconds since 1970-01-01T0:00:00.000Z
+### locale (optional)
 
-##### locale (optional)
+An internationalization language string for each timer unit. The default value
+is `en` (for English). This attribute supports all values that are supported by
+the user's browser.
 
-An internationalization language string for each timer unit. The default value is `en` (for English). This attribute supports all values that are supported by the user's browser.
+### display-in (optional)
 
-##### display-in (optional)
+If set to the value `utc`, the `display-in` attribute will convert the given
+date to UTC.
 
-If set to the value `utc`, the `display-in` attribute will convert the given date to UTC.
+### offset-seconds (optional)
 
-##### offset-seconds (optional)
+The `offset-seconds` attribute specifies an integer number of seconds to shift
+the given date.
 
-The `offset-seconds` attribute specifies an integer number of seconds to shift the given date.
+### data-options-\* (optional)
 
-## Validation
+The `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)
+parameter that specifies the formatting style to use for `localeString` format.
+Valid attributes include: `data-options-date-style`, `data-options-time-style`, etc.
 
-See [amp-date-display rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-date-display/validator-amp-date-display.protoascii) in the AMP validator specification.
+Note that if `display-in` attrubute is set to `utc`, the value of
+`data-options-time-zone` will automatically be converted to `UTC`.
diff --git a/extensions/amp-date-display/validator-amp-date-display.protoascii b/extensions/amp-date-display/validator-amp-date-display.protoascii
index 94db81ff27d85..c4f62ee96d342 100644
--- a/extensions/amp-date-display/validator-amp-date-display.protoascii
+++ b/extensions/amp-date-display/validator-amp-date-display.protoascii
@@ -20,6 +20,7 @@ tags: {  # amp-date-display
   extension_spec: {
     name: "amp-date-display"
     version: "0.1"
+    version: "1.0"
     version: "latest"
   }
   attr_lists: "common-extension-attrs"
diff --git a/extensions/amp-date-picker/0.1/amp-date-picker.js b/extensions/amp-date-picker/0.1/amp-date-picker.js
index d4582874274bb..12db2997824ad 100644
--- a/extensions/amp-date-picker/0.1/amp-date-picker.js
+++ b/extensions/amp-date-picker/0.1/amp-date-picker.js
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
-import {AmpEvents} from '../../../src/amp-events';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {CSS} from '../../../build/amp-date-picker-0.1.css';
 import {DEFAULT_FORMAT, DEFAULT_LOCALE, FORMAT_STRINGS} from './constants';
 import {DatesList} from './dates-list';
-import {Deferred} from '../../../src/utils/promise';
-import {FiniteStateMachine} from '../../../src/finite-state-machine';
-import {Keys} from '../../../src/utils/key-codes';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {FiniteStateMachine} from '../../../src/core/data-structures/finite-state-machine';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Layout, isLayoutSizeDefined} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {batchFetchJsonFor} from '../../../src/batched-json';
@@ -37,11 +37,11 @@ import {createCustomEvent, listen} from '../../../src/event-helper';
 import {createDateRangePicker} from './date-range-picker';
 import {createDeferred} from './react-utils';
 import {createSingleDatePicker} from './single-date-picker';
-import {dashToCamelCase} from '../../../src/string';
+import {dashToCamelCase} from '../../../src/core/types/string';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict, map} from '../../../src/utils/object';
-import {escapeCssSelectorIdent} from '../../../src/css';
-import {once} from '../../../src/utils/function';
+import {dict, map} from '../../../src/core/types/object';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
+import {once} from '../../../src/core/types/function';
 import {requireExternal} from '../../../src/module';
 
 /**
@@ -216,24 +216,24 @@ export class AmpDatePicker extends AMP.BaseElement {
     this.reactRender_ = requireExternal('react-dom').render;
 
     /** @private @const */
-    this.ReactDates_ = /** @type {!JsonObject} */ (requireExternal(
-      'react-dates'
-    ));
+    this.ReactDates_ = /** @type {!JsonObject} */ (
+      requireExternal('react-dates')
+    );
 
     /**
      * @private
      * @const
      * @dict
      */
-    this.ReactDatesConstants_ = /** @type {!JsonObject} */ (requireExternal(
-      'react-dates/constants'
-    ));
+    this.ReactDatesConstants_ = /** @type {!JsonObject} */ (
+      requireExternal('react-dates/constants')
+    );
 
     /** @private {?../../../src/service/action-impl.ActionService} */
     this.action_ = null;
 
-    /** @private @const */
-    this.templates_ = Services.templatesFor(this.win);
+    /** @private {?../../../src/service/template-impl.Templates} */
+    this.templates_ = null;
 
     /** @private @const */
     this.input_ = Services.inputFor(this.win);
@@ -373,6 +373,8 @@ export class AmpDatePicker extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.templates_ = Services.templatesForDoc(this.element);
+
     const format = this.element.getAttribute('format');
     if (format) {
       this.format_ = format;
@@ -593,12 +595,8 @@ export class AmpDatePicker extends AMP.BaseElement {
    */
   setupStateMachine_(initialState) {
     const sm = new FiniteStateMachine(initialState);
-    const {
-      OVERLAY_OPEN_INPUT,
-      OVERLAY_CLOSED,
-      OVERLAY_OPEN_PICKER,
-      STATIC,
-    } = DatePickerState;
+    const {OVERLAY_CLOSED, OVERLAY_OPEN_INPUT, OVERLAY_OPEN_PICKER, STATIC} =
+      DatePickerState;
     const noop = () => {};
     sm.addTransition(STATIC, STATIC, noop);
 
@@ -877,10 +875,9 @@ export class AmpDatePicker extends AMP.BaseElement {
    */
   setState_(newState) {
     return this.render(
-      /** @type {!JsonObject} */ (Object.assign(
-        /** @type {!Object} */ (this.state_),
-        newState
-      ))
+      /** @type {!JsonObject} */ (
+        Object.assign(/** @type {!Object} */ (this.state_), newState)
+      )
     );
   }
 
@@ -1224,7 +1221,7 @@ export class AmpDatePicker extends AMP.BaseElement {
       .then((json) => this.parseSrcTemplates_(json))
       .then((parsedTemplates) => {
         if (parsedTemplates) {
-          const {srcTemplates, srcDefaultTemplate} = parsedTemplates;
+          const {srcDefaultTemplate, srcTemplates} = parsedTemplates;
           this.srcTemplates_ = srcTemplates;
           this.srcDefaultTemplate_ = srcDefaultTemplate;
         }
diff --git a/extensions/amp-date-picker/0.1/date-picker-common.js b/extensions/amp-date-picker/0.1/date-picker-common.js
index 96eed947b7898..afa891c3bac1f 100644
--- a/extensions/amp-date-picker/0.1/date-picker-common.js
+++ b/extensions/amp-date-picker/0.1/date-picker-common.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {dict, omit} from '../../../src/utils/object';
+import {dict, omit} from '../../../src/core/types/object';
 import {requireExternal} from '../../../src/module';
 
 /**
@@ -201,10 +201,9 @@ export function withDatePickerCommon(WrappedComponent) {
 
   /** @override */
   DateComponent.prototype.render = function () {
-    const props = /** @type {!JsonObject} */ (omit(
-      this.props,
-      Object.keys(defaultProps)
-    ));
+    const props = /** @type {!JsonObject} */ (
+      omit(this.props, Object.keys(defaultProps))
+    );
 
     const date = props['date'];
     const daySize = props['daySize'];
diff --git a/extensions/amp-date-picker/0.1/date-range-picker.js b/extensions/amp-date-picker/0.1/date-range-picker.js
index a4d978fa1c167..8b62de280f823 100644
--- a/extensions/amp-date-picker/0.1/date-range-picker.js
+++ b/extensions/amp-date-picker/0.1/date-range-picker.js
@@ -15,7 +15,7 @@
  */
 
 import {DayPickerPhrases} from './defaultPhrases';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {requireExternal} from '../../../src/module';
 import {withDatePickerCommon} from './date-picker-common';
 import {wrap as withMaximumNights} from './wrappers/maximum-nights';
@@ -25,14 +25,14 @@ import {wrap as withMaximumNights} from './wrappers/maximum-nights';
  * @return {typeof React.Component} A date range picker component class
  */
 function createDateRangePickerBase() {
-  const constants = /** @type {JsonObject} */ (requireExternal(
-    'react-dates/constants'
-  ));
+  const constants = /** @type {JsonObject} */ (
+    requireExternal('react-dates/constants')
+  );
   const DAY_SIZE = constants['DAY_SIZE'];
   const HORIZONTAL_ORIENTATION = constants['HORIZONTAL_ORIENTATION'];
-  const DayPickerRangeController = /** @type {typeof  React.Component} */ (requireExternal(
-    'react-dates'
-  )['DayPickerRangeController']);
+  const DayPickerRangeController = /** @type {typeof  React.Component} */ (
+    requireExternal('react-dates')['DayPickerRangeController']
+  );
 
   const defaultProps = dict({
     'startDate': null, // TODO: use null
diff --git a/extensions/amp-date-picker/0.1/dates-list.js b/extensions/amp-date-picker/0.1/dates-list.js
index 3a508dfce3483..e557ffe498751 100644
--- a/extensions/amp-date-picker/0.1/dates-list.js
+++ b/extensions/amp-date-picker/0.1/dates-list.js
@@ -14,16 +14,20 @@
  * limitations under the License.
  */
 
+import * as rrule from '../../../node_modules/rrule/dist/es5/rrule.js';
 import {requireExternal} from '../../../src/module';
 
+const rrulestr = rrule.default.rrulestr || rrule.rrulestr; // closure imports into .default, esbuild flattens a layer.
+
 /** @enum {string} */
 const DateType = {
   INVALID: 'invalid',
+  RRULE: 'rrule',
   DATE: 'date',
 };
 
 /**
- * A class which wraps a list of moment dates.
+ * A class which wraps a list of moment dates or RRULE dates.
  */
 export class DatesList {
   /**
@@ -31,13 +35,18 @@ export class DatesList {
    */
   constructor(dates) {
     /** @private @const */
-    this.ReactDates_ = /** @type {!JsonObject} */ (requireExternal(
-      'react-dates'
-    ));
+    this.ReactDates_ = /** @type {!JsonObject} */ (
+      requireExternal('react-dates')
+    );
 
     /** @private @const */
     this.moment_ = requireExternal('moment');
 
+    /** @private @const */
+    this.rrulestrs_ = dates
+      .filter((d) => this.getDateType_(d) === DateType.RRULE)
+      .map((d) => tryParseRrulestr(d));
+
     /** @private @const */
     this.dates_ = dates
       .filter((d) => this.getDateType_(d) == DateType.DATE)
@@ -46,14 +55,14 @@ export class DatesList {
   }
 
   /**
-   * Determines if the given date is contained within the moment dates
+   * Determines if the given date is contained within the RRULEs or moment dates
    * contained in the date list.
    * @param {!moment|string} date
    * @return {boolean}
    */
   contains(date) {
     const m = this.moment_(date);
-    return this.matchesDate_(m);
+    return this.matchesDate_(m) || this.matchesRrule_(m);
   }
 
   /**
@@ -73,7 +82,17 @@ export class DatesList {
       }
     }
 
-    return firstDatesAfter.sort((a, b) => a.toDate() - b.toDate())[0];
+    const rruleDates = this.rrulestrs_
+      .map((rrule) => /** @type {RRule} */ (rrule).after(date))
+      .filter(Boolean)
+      .map(normalizeRruleReturn);
+
+    return firstDatesAfter.concat(rruleDates).sort((a, b) => {
+      // toDate method does not exist for RRule dates.
+      a = a.toDate ? a.toDate() : a;
+      b = b.toDate ? b.toDate() : b;
+      return a - b;
+    })[0];
   }
 
   /**
@@ -87,7 +106,26 @@ export class DatesList {
   }
 
   /**
-   * Distinguish between moment dates.
+   * Determines if any internal RRULE object matches the given date.
+   * @param {!moment} date
+   * @return {boolean}
+   * @private
+   */
+  matchesRrule_(date) {
+    const nextDate = date.clone().startOf('day').add(1, 'day').toDate();
+    return this.rrulestrs_.some((rrule) => {
+      const rruleUTCDate = /** @type {RRule} */ (rrule).before(nextDate);
+      if (!rruleUTCDate) {
+        return false;
+      }
+      const rruleLocalDate = normalizeRruleReturn(rruleUTCDate);
+      const rruleMoment = this.moment_(rruleLocalDate);
+      return this.ReactDates_['isSameDay'](rruleMoment, date);
+    });
+  }
+
+  /**
+   * Distinguish between RRULE dates and moment dates.
    * @param {!moment|string} date
    * @return {!DateType}
    * @private
@@ -97,6 +135,42 @@ export class DatesList {
       return DateType.DATE;
     }
 
+    const dateStr = /** @type {string} */ (date);
+    if (tryParseRrulestr(dateStr)) {
+      return DateType.RRULE;
+    }
+
     return DateType.INVALID;
   }
 }
+
+/**
+ * RRULE returns dates as local time formatted at UTC, so the
+ * Date.prototype.getUTC* methods must be used to create a new date object.
+ * {@link https://github.com/jakubroztocil/rrule#important-use-utc-dates}
+ * @param {!Date} rruleDate
+ * @return {!Date}
+ */
+function normalizeRruleReturn(rruleDate) {
+  const year = rruleDate.getUTCFullYear();
+  const month = rruleDate.getUTCMonth();
+  const day = rruleDate.getUTCDate();
+  const hours = rruleDate.getUTCHours();
+  const minutes = rruleDate.getUTCMinutes();
+  const seconds = rruleDate.getUTCSeconds();
+  const ms = rruleDate.getUTCMilliseconds();
+  return new Date(year, month, day, hours, minutes, seconds, ms);
+}
+
+/**
+ * Tries to parse a string into an RRULE object.
+ * @param {string} str A string which represents a repeating date RRULE spec.
+ * @return {?RRule}
+ */
+function tryParseRrulestr(str) {
+  try {
+    return rrulestr(str, {});
+  } catch (e) {
+    return null;
+  }
+}
diff --git a/extensions/amp-date-picker/0.1/defaultPhrases.js b/extensions/amp-date-picker/0.1/defaultPhrases.js
index 049d37a703f7f..a22337788aed1 100644
--- a/extensions/amp-date-picker/0.1/defaultPhrases.js
+++ b/extensions/amp-date-picker/0.1/defaultPhrases.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 
 const calendarLabel = 'Calendar';
 const jumpToPrevMonth = 'Move backward to switch to the previous month.';
diff --git a/extensions/amp-date-picker/0.1/single-date-picker.js b/extensions/amp-date-picker/0.1/single-date-picker.js
index 97588d55642bd..7025871fc2ba4 100644
--- a/extensions/amp-date-picker/0.1/single-date-picker.js
+++ b/extensions/amp-date-picker/0.1/single-date-picker.js
@@ -15,7 +15,7 @@
  */
 
 import {DayPickerPhrases} from './defaultPhrases';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {requireExternal} from '../../../src/module';
 import {withDatePickerCommon} from './date-picker-common';
 
@@ -24,15 +24,15 @@ import {withDatePickerCommon} from './date-picker-common';
  * @return {typeof React.Component} A single date picker component class
  */
 function createSingleDatePickerBase() {
-  const constants = /** @type {!JsonObject} */ (requireExternal(
-    'react-dates/constants'
-  ));
+  const constants = /** @type {!JsonObject} */ (
+    requireExternal('react-dates/constants')
+  );
 
   const DAY_SIZE = constants['DAY_SIZE'];
   const HORIZONTAL_ORIENTATION = constants['HORIZONTAL_ORIENTATION'];
-  const DayPickerSingleDateController = /** @type {typeof  React.Component} */ (requireExternal(
-    'react-dates'
-  )['DayPickerSingleDateController']);
+  const DayPickerSingleDateController = /** @type {typeof  React.Component} */ (
+    requireExternal('react-dates')['DayPickerSingleDateController']
+  );
 
   const defaultProps = dict({
     'date': null,
diff --git a/extensions/amp-date-picker/0.1/test-e2e/test-blocked-dates.js b/extensions/amp-date-picker/0.1/test-e2e/test-blocked-dates.js
index 9d52340b528be..4ee85b56cde62 100644
--- a/extensions/amp-date-picker/0.1/test-e2e/test-blocked-dates.js
+++ b/extensions/amp-date-picker/0.1/test-e2e/test-blocked-dates.js
@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import {Key} from '../../../../build-system/tasks/e2e/functional-test-controller';
+import {Key} from '../../../../build-system/tasks/e2e/e2e-types';
 
 describes.endtoend(
   'amp-date-picker',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-date-picker/blocked-dates.html',
+    fixture: 'amp-date-picker/blocked-dates.html',
     environments: ['single', 'viewer-demo'],
   },
   async (env) => {
diff --git a/extensions/amp-date-picker/0.1/test/integration/test-integration-amp-date-picker-actions.js b/extensions/amp-date-picker/0.1/test/integration/test-integration-amp-date-picker-actions.js
index fbc380332fe87..21b587831367a 100644
--- a/extensions/amp-date-picker/0.1/test/integration/test-integration-amp-date-picker-actions.js
+++ b/extensions/amp-date-picker/0.1/test/integration/test-integration-amp-date-picker-actions.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {poll} from '../../../../../testing/iframe';
 
-const config = describe.configure().ifChrome();
-config.skip('amp-date-picker', function () {
+const config = describes.sandboxed.configure().ifChrome();
+config.skip('amp-date-picker', {}, function () {
   this.timeout(10000);
 
   const extensions = ['amp-date-picker'];
@@ -52,8 +52,7 @@ config.skip('amp-date-picker', function () {
       beforeEach(() => {
         win = env.win;
         document = env.win.document;
-        clock = lolex.install({
-          target: win,
+        clock = fakeTimers.withGlobal(win).install({
           now: new Date('2018-01-01T08:00:00Z'),
         });
       });
@@ -111,8 +110,7 @@ config.skip('amp-date-picker', function () {
       beforeEach(() => {
         win = env.win;
         document = env.win.document;
-        clock = lolex.install({
-          target: win,
+        clock = fakeTimers.withGlobal(win).install({
           now: new Date('2018-01-01T08:00:00Z'),
         });
       });
@@ -179,8 +177,7 @@ config.skip('amp-date-picker', function () {
       beforeEach(() => {
         win = env.win;
         document = env.win.document;
-        clock = lolex.install({
-          target: win,
+        clock = fakeTimers.withGlobal(win).install({
           now: new Date('2018-01-01T08:00:00Z'),
         });
       });
@@ -248,8 +245,7 @@ config.skip('amp-date-picker', function () {
       beforeEach(() => {
         win = env.win;
         document = env.win.document;
-        clock = lolex.install({
-          target: win,
+        clock = fakeTimers.withGlobal(win).install({
           now: new Date('2018-01-01T08:00:00Z'),
         });
       });
diff --git a/extensions/amp-date-picker/0.1/test/integration/test-integration-amp-date-picker-init.js b/extensions/amp-date-picker/0.1/test/integration/test-integration-amp-date-picker-init.js
new file mode 100644
index 0000000000000..06fc9fccc66ee
--- /dev/null
+++ b/extensions/amp-date-picker/0.1/test/integration/test-integration-amp-date-picker-init.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {AmpEvents} from '../../../../../src/core/constants/amp-events.js';
+import {createFixtureIframe} from '../../../../../testing/iframe.js';
+
+function checkElementUpgrade(element) {
+  expect(element).to.have.class('i-amphtml-element');
+  expect(element).to.have.class('i-amphtml-layout-size-defined');
+  expect(element).to.not.have.class('amp-notbuilt');
+  expect(element).to.not.have.class('i-amphtml-notbuilt');
+  expect(element).to.not.have.class('amp-unresolved');
+  expect(element).to.not.have.class('i-amphtml-unresolved');
+}
+
+// NOTE: this only executes on module build tests
+const config = describes.sandboxed.configure().ifModuleBuild();
+
+config.run('amp-date-picker', {}, async () => {
+  it('initializes the date picker', async () => {
+    const testExtension = 'amp-date-picker';
+    const fixture = await createFixtureIframe(
+      'test/fixtures/datepicker.html',
+      500
+    );
+    expect(fixture.doc.querySelectorAll(testExtension)).to.have.length(1);
+    // Wait for a the LOAD_START event which is enough of a signal that the
+    // runtime has executed.
+    await fixture.awaitEvent(AmpEvents.LOAD_START, 1);
+    expect(fixture.doc.documentElement.getAttribute('esm')).to.equal('1');
+    checkElementUpgrade(fixture.doc.querySelector(testExtension));
+  });
+});
diff --git a/extensions/amp-date-picker/0.1/test/integration/test-integration-dates-attributes.js b/extensions/amp-date-picker/0.1/test/integration/test-integration-dates-attributes.js
index 681e7d5316ff8..41a98116b8163 100644
--- a/extensions/amp-date-picker/0.1/test/integration/test-integration-dates-attributes.js
+++ b/extensions/amp-date-picker/0.1/test/integration/test-integration-dates-attributes.js
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {htmlFor} from '../../../../../src/static-template';
 import {poll} from '../../../../../testing/iframe';
 
-const config = describe.configure().ifChrome();
+const config = describes.sandboxed.configure().ifChrome();
 
-config.run('amp-date-picker', function () {
+config.run('amp-date-picker', {}, function () {
   this.timeout(10000);
 
   const extensions = ['amp-date-picker'];
@@ -44,8 +44,7 @@ config.run('amp-date-picker', function () {
       beforeEach(() => {
         win = env.win;
         document = env.win.document;
-        clock = lolex.install({
-          target: win,
+        clock = fakeTimers.withGlobal(win).install({
           now: new Date('2018-01-01T08:00:00Z'),
         });
 
diff --git a/extensions/amp-date-picker/0.1/test/integration/test-integration-maximum-nights.js b/extensions/amp-date-picker/0.1/test/integration/test-integration-maximum-nights.js
index 128f9bce5cfd5..8d03f62b3b34f 100644
--- a/extensions/amp-date-picker/0.1/test/integration/test-integration-maximum-nights.js
+++ b/extensions/amp-date-picker/0.1/test/integration/test-integration-maximum-nights.js
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {htmlFor} from '../../../../../src/static-template';
 import {poll} from '../../../../../testing/iframe';
 
-const config = describe.configure().ifChrome();
+const config = describes.sandboxed.configure().ifChrome();
 
-config.run('amp-date-picker', function () {
+config.run('amp-date-picker', {}, function () {
   this.timeout(10000);
 
   const extensions = ['amp-date-picker'];
@@ -41,11 +41,10 @@ config.run('amp-date-picker', function () {
       let doc;
       let clock;
 
-      beforeEach(() => {
+      beforeEach(async () => {
         win = env.win;
         doc = env.win.document;
-        clock = lolex.install({
-          target: win,
+        clock = fakeTimers.withGlobal(win).install({
           now: new Date('2018-01-01T08:00:00Z'),
         });
 
@@ -62,12 +61,12 @@ config.run('amp-date-picker', function () {
         ></amp-date-picker>
       </div>`);
         const picker = doc.getElementById('picker');
-        return picker.implementation_
-          .buildCallback()
-          .then(() => picker.implementation_.layoutCallback());
+        const impl = await picker.getImpl(false);
+        await impl.buildCallback();
+        await impl.layoutCallback();
       });
 
-      after(() => {
+      afterEach(() => {
         clock.uninstall();
       });
 
@@ -85,7 +84,7 @@ config.run('amp-date-picker', function () {
         return null;
       }
 
-      it('should appear as blocked when a date is beyond the maximum', () => {
+      it.skip('should appear as blocked when a date is beyond the maximum', () => {
         const picker = doc.getElementById('picker');
         const startButton = getCalendarButtonByDay(picker, '6');
         const beyondButton = getCalendarButtonByDay(picker, '10');
diff --git a/extensions/amp-date-picker/0.1/test/test-amp-date-picker-bind.js b/extensions/amp-date-picker/0.1/test/test-amp-date-picker-bind.js
index ed83df0173cc3..343a1193e7883 100644
--- a/extensions/amp-date-picker/0.1/test/test-amp-date-picker-bind.js
+++ b/extensions/amp-date-picker/0.1/test/test-amp-date-picker-bind.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import '../../../../third_party/react-dates/bundle';
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {AmpDatePicker} from '../amp-date-picker';
 import {createElementWithAttributes} from '../../../../src/dom.js';
 
@@ -94,10 +94,9 @@ describes.realWin(
 
     beforeEach(() => {
       document = env.win.document;
-      clock = lolex.install({
-        // Use the global window and not env.win. There is no way to inject the
-        // env.win into moment right now.
-        target: window,
+      // Use the global window and not env.win. There is no way to inject the
+      // env.win into moment right now.
+      clock = fakeTimers.withGlobal(window).install({
         now: new Date('2018-01-01T08:00:00Z'),
       });
     });
@@ -108,7 +107,7 @@ describes.realWin(
 
     describe('bind', () => {
       it('should forward mutations to the date picker state', async () => {
-        const {picker, layoutCallback} = createDatePicker({
+        const {layoutCallback, picker} = createDatePicker({
           src: 'https://localhost:8000/examples/date-picker.json',
         });
         env.sandbox.stub(picker, 'fetchSrc_').resolves();
diff --git a/extensions/amp-date-picker/0.1/test/test-amp-date-picker-state.js b/extensions/amp-date-picker/0.1/test/test-amp-date-picker-state.js
index b30ad52ca6434..c5a480ba65047 100644
--- a/extensions/amp-date-picker/0.1/test/test-amp-date-picker-state.js
+++ b/extensions/amp-date-picker/0.1/test/test-amp-date-picker-state.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import '../../../../third_party/react-dates/bundle';
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {AmpDatePicker, DatePickerState} from '../amp-date-picker';
 import {createElementWithAttributes} from '../../../../src/dom.js';
 import {requireExternal} from '../../../../src/module';
@@ -91,10 +91,9 @@ describes.realWin(
 
     beforeEach(() => {
       document = env.win.document;
-      clock = lolex.install({
-        // Use the global window and not env.win. There is no way to inject the
-        // env.win into moment right now.
-        target: window,
+      // Use the global window and not env.win. There is no way to inject the
+      // env.win into moment right now.
+      clock = fakeTimers.withGlobal(window).install({
         now: new Date('2018-01-01T08:00:00Z'),
       });
     });
@@ -112,7 +111,7 @@ describes.realWin(
       (name, variant) => {
         describe('static states', () => {
           it('should start in the static state', async () => {
-            const {picker, layoutCallback} = createDatePicker({
+            const {layoutCallback, picker} = createDatePicker({
               'layout': 'fixed-height',
               'height': '360',
               'type': variant.type,
@@ -125,7 +124,7 @@ describes.realWin(
           });
 
           it('should remain in the static state after a transition', async () => {
-            const {element, picker, layoutCallback} = createDatePicker({
+            const {element, layoutCallback, picker} = createDatePicker({
               'layout': 'fixed-height',
               'height': '360',
               'type': variant.type,
@@ -155,7 +154,7 @@ describes.realWin(
 
         describe('overlay states', () => {
           it('should start in the unopened state', async () => {
-            const {picker, layoutCallback} = createDatePicker({
+            const {layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
             });
@@ -167,7 +166,7 @@ describes.realWin(
           });
 
           it('should transition to the opened state on focus', async () => {
-            const {input, picker, layoutCallback} = createDatePicker({
+            const {input, layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
             });
@@ -181,7 +180,7 @@ describes.realWin(
           });
 
           it('should transition to the closed state on blur', async () => {
-            const {input, picker, layoutCallback} = createDatePicker({
+            const {input, layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
             });
@@ -201,7 +200,7 @@ describes.realWin(
           });
 
           it('should transition to the closed state on esc', async () => {
-            const {input, picker, layoutCallback} = createDatePicker({
+            const {input, layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
             });
@@ -225,7 +224,7 @@ describes.realWin(
           });
 
           it('should transition to picker state on arrow', async () => {
-            const {input, picker, layoutCallback} = createDatePicker({
+            const {input, layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
             });
@@ -249,7 +248,7 @@ describes.realWin(
           });
 
           it('should transition directly to picker state on arrow from closed', async () => {
-            const {input, picker, layoutCallback} = createDatePicker({
+            const {input, layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
             });
@@ -271,7 +270,7 @@ describes.realWin(
           });
 
           it('should transition to closed state from picker on esc', async () => {
-            const {input, picker, layoutCallback} = createDatePicker({
+            const {input, layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
             });
@@ -304,7 +303,7 @@ describes.realWin(
           });
 
           it('should transition to closed state from picker on document click', async () => {
-            const {input, picker, layoutCallback} = createDatePicker({
+            const {input, layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
             });
@@ -336,7 +335,7 @@ describes.realWin(
           });
 
           it('should remain in picker state on click in picker', async () => {
-            const {input, picker, layoutCallback} = createDatePicker({
+            const {input, layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
             });
@@ -368,7 +367,7 @@ describes.realWin(
           });
 
           it('should transition to input state from picker on focus', async () => {
-            const {input, picker, layoutCallback} = createDatePicker({
+            const {input, layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
             });
@@ -397,7 +396,7 @@ describes.realWin(
           });
 
           it('should remain in open picker on clear', async () => {
-            const {input, picker, layoutCallback} = createDatePicker({
+            const {input, layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
             });
@@ -426,7 +425,7 @@ describes.realWin(
           });
 
           it('should transition from open picker to open input on clear with open-after-clear', async () => {
-            const {input, picker, layoutCallback} = createDatePicker({
+            const {input, layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
             });
@@ -455,7 +454,7 @@ describes.realWin(
           });
 
           it('should transition to closed after date change', async () => {
-            const {input, picker, layoutCallback} = createDatePicker({
+            const {input, layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
             });
@@ -474,7 +473,7 @@ describes.realWin(
           });
 
           it('should not transition to closed with open-after-select', async () => {
-            const {input, picker, layoutCallback} = createDatePicker({
+            const {input, layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'open-after-select': '',
               'type': variant.type,
@@ -494,7 +493,7 @@ describes.realWin(
           });
 
           it('should transition from closed to open input in on clear with open-after-clear', async () => {
-            const {picker, layoutCallback} = createDatePicker({
+            const {layoutCallback, picker} = createDatePicker({
               'mode': 'overlay',
               'type': variant.type,
               'open-after-clear': '',
diff --git a/extensions/amp-date-picker/0.1/test/test-amp-date-picker.js b/extensions/amp-date-picker/0.1/test/test-amp-date-picker.js
index 7cf690a49fd89..9ccda49c9b0b0 100644
--- a/extensions/amp-date-picker/0.1/test/test-amp-date-picker.js
+++ b/extensions/amp-date-picker/0.1/test/test-amp-date-picker.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import '../../../../third_party/react-dates/bundle';
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {AmpDatePicker} from '../amp-date-picker';
 import {createElementWithAttributes} from '../../../../src/dom.js';
 import {requireExternal} from '../../../../src/module';
@@ -37,7 +37,8 @@ describes.realWin(
     "templates": [{
       "id": "srcTemplate",
       "dates": [
-        "2018-01-01"
+        "2018-01-01",
+        "FREQ=WEEKLY;DTSTART=20180101T080000Z;WKST=SU;BYDAY=WE"
       ]
     }, {
       "id": "defaultTemplate"
@@ -106,10 +107,9 @@ describes.realWin(
     beforeEach(() => {
       win = env.win;
       document = env.win.document;
-      clock = lolex.install({
-        // Use the global window and not env.win. There is no way to inject the
-        // env.win into moment right now.
-        target: window,
+      // Use the global window and not env.win. There is no way to inject the
+      // env.win into moment right now.
+      clock = fakeTimers.withGlobal(window).install({
         now: new Date('2018-01-01T08:00:00Z'),
       });
     });
@@ -119,7 +119,7 @@ describes.realWin(
     });
 
     it('should render in the simplest case', () => {
-      const {picker, layoutCallback} = createDatePicker({
+      const {layoutCallback, picker} = createDatePicker({
         layout: 'fixed-height',
         height: 360,
       });
@@ -137,7 +137,7 @@ describes.realWin(
         input.value = '2018-01-01';
         document.body.appendChild(input);
 
-        const {picker, buildCallback} = createDatePicker({
+        const {buildCallback, picker} = createDatePicker({
           'layout': 'fixed-height',
           'height': '360',
           'input-selector': '#date',
@@ -159,7 +159,7 @@ describes.realWin(
         endInput.value = '2018-01-02';
         document.body.appendChild(endInput);
 
-        const {picker, buildCallback} = createDatePicker({
+        const {buildCallback, picker} = createDatePicker({
           'layout': 'fixed-height',
           'height': '360',
           'type': 'range',
@@ -174,7 +174,7 @@ describes.realWin(
       });
 
       it('should use the "date" value from src data', () => {
-        const {picker, layoutCallback} = createDatePicker({
+        const {layoutCallback, picker} = createDatePicker({
           'layout': 'fixed-height',
           'height': '360',
         });
@@ -186,7 +186,7 @@ describes.realWin(
       });
 
       it('should use the "startDate" and "endDate" values from src data', () => {
-        const {picker, layoutCallback} = createDatePicker({
+        const {layoutCallback, picker} = createDatePicker({
           'layout': 'fixed-height',
           'height': '360',
           'type': 'range',
@@ -232,7 +232,7 @@ describes.realWin(
 
     describe('templates', () => {
       describe('element templates', () => {
-        it('should parse date templates', () => {
+        it('should parse RRule and date templates', () => {
           const template = createDateTemplate('{{template}}', {
             dates: '2018-01-01',
           });
@@ -245,7 +245,7 @@ describes.realWin(
       });
 
       describe('src templates', () => {
-        it('should parse date templates', function () {
+        it('should parse RRULE and date templates', function () {
           this.timeout(4000);
           const template = createDateTemplate('{{val}}', {
             dates: '2018-01-01',
@@ -258,11 +258,12 @@ describes.realWin(
           element.appendChild(template);
           element.appendChild(defaultTemplate);
 
-          const {srcTemplates, srcDefaultTemplate} = picker.parseSrcTemplates_(
+          const {srcDefaultTemplate, srcTemplates} = picker.parseSrcTemplates_(
             win.JSON.parse(templateJson)
           );
           expect(srcTemplates[0].dates.contains('2018-01-01')).to.be.true;
           expect(srcTemplates[0].dates.contains('2018-01-02')).to.be.false;
+          expect(srcTemplates[0].dates.contains('2018-01-03')).to.be.true;
           expect(srcTemplates[0].template).to.equal(template);
           expect(srcDefaultTemplate).to.equal(defaultTemplate);
         });
@@ -449,7 +450,7 @@ describes.realWin(
 
       describe('changing dates', () => {
         it('should set the date in a single date picker', async () => {
-          const {element, picker, layoutCallback} = createDatePicker();
+          const {element, layoutCallback, picker} = createDatePicker();
           await layoutCallback();
 
           picker.onDateChange(moment('2018-01-03'));
@@ -458,7 +459,7 @@ describes.realWin(
         });
 
         it('should set date range in a date range picker', async () => {
-          const {element, picker, layoutCallback} = createDatePicker({
+          const {element, layoutCallback, picker} = createDatePicker({
             'blocked': '2018-01-06',
           });
           await layoutCallback();
diff --git a/extensions/amp-date-picker/0.1/test/test-dates-list.js b/extensions/amp-date-picker/0.1/test/test-dates-list.js
index 86026580e637d..5b03fbca1d202 100644
--- a/extensions/amp-date-picker/0.1/test/test-dates-list.js
+++ b/extensions/amp-date-picker/0.1/test/test-dates-list.js
@@ -21,20 +21,26 @@ import {requireExternal} from '../../../../src/module';
 describes.sandboxed('DatesList', {}, () => {
   const moment = requireExternal('moment');
 
-  it('should accept date strings', function () {
-    this.timeout(3000);
+  it('should accept date strings and RRule strings', function () {
+    this.timeout(5000);
     const containedDate = '09/04/1998';
     const notContainedDate = '09/03/1998';
-    const datesList = new DatesList([containedDate]);
+    const containedRrule =
+      'FREQ=WEEKLY;COUNT=10;DTSTART=20180101T000000Z;WKST=SU;BYDAY=TU,SA';
+    const matchesRrule = '01/02/2018';
+    const datesList = new DatesList([containedDate, containedRrule]);
 
     expect(datesList.contains(containedDate)).to.be.true;
     expect(datesList.contains(notContainedDate)).to.be.false;
+    expect(datesList.contains(matchesRrule)).to.be.true;
   });
 
   it('should accept moment objects', () => {
     const containedDate = '09/04/1998';
     const containedMoment = moment(containedDate);
-    const datesList = new DatesList([containedMoment]);
+    const containedRrule =
+      'FREQ=WEEKLY;COUNT=10;DTSTART=20180101T000000Z;WKST=SU;BYDAY=TU,SA';
+    const datesList = new DatesList([containedMoment, containedRrule]);
 
     expect(datesList.contains(containedDate)).to.be.true;
     expect(datesList.contains(containedMoment)).to.be.true;
@@ -62,8 +68,10 @@ describes.sandboxed('DatesList', {}, () => {
     const containedDate = '09/04/1998';
     const dateBefore = '01/01/1998';
     // const notContainedDate = '09/03/1998';
+    const containedRrule =
+      'FREQ=WEEKLY;COUNT=10;DTSTART=20180101T000000Z;WKST=SU;BYDAY=TU,SA';
     // const matchesRrule = '01/02/2018';
-    const datesList = new DatesList([containedDate]);
+    const datesList = new DatesList([containedDate, containedRrule]);
 
     const result = datesList.firstDateAfter(dateBefore);
 
diff --git a/extensions/amp-date-picker/0.1/test/test-wrapper-maximum-nights.js b/extensions/amp-date-picker/0.1/test/test-wrapper-maximum-nights.js
index 7d79e25763b39..8ff77ea749305 100644
--- a/extensions/amp-date-picker/0.1/test/test-wrapper-maximum-nights.js
+++ b/extensions/amp-date-picker/0.1/test/test-wrapper-maximum-nights.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import '../../../../third_party/react-dates/bundle';
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {requireExternal} from '../../../../src/module';
 import {wrap as withMaximumNights} from '../wrappers/maximum-nights';
 
@@ -27,10 +27,9 @@ describes.sandboxed('amp-date-picker', {}, () => {
   }
 
   beforeEach(() => {
-    clock = lolex.install({
-      // Use the global window and not env.win. There is no way to inject the
-      // env.win into moment right now.
-      target: window,
+    // Use the global window and not env.win. There is no way to inject the
+    // env.win into moment right now.
+    clock = fakeTimers.withGlobal(window).install({
       now: new Date('2018-01-01T08:00:00Z'),
     });
   });
diff --git a/extensions/amp-date-picker/0.1/test/validator-amp-date-picker.out b/extensions/amp-date-picker/0.1/test/validator-amp-date-picker.out
index 5c7a3abc2c97f..ba4a926826257 100644
--- a/extensions/amp-date-picker/0.1/test/validator-amp-date-picker.out
+++ b/extensions/amp-date-picker/0.1/test/validator-amp-date-picker.out
@@ -138,98 +138,98 @@ FAIL
 |    <!-- Invalid: single amp-date-picker with start-input-selector -->
 |    <amp-date-picker type="single" mode="static" start-input-selector="#x3" layout="fixed-height" height="360">
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:138:2 The attribute 'type' in tag 'amp-date-picker[type=range][mode=static]' is set to the invalid value 'single'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:138:2 The attribute 'type' in tag 'amp-date-picker' is set to the invalid value 'single'. (see https://amp.dev/documentation/components/amp-date-picker)
 |    </amp-date-picker>
 |    <!-- Invalid: range amp-date-picker with input-selector -->
 |    <amp-date-picker type="range" input-selector="#a4" layout="fixed-height" height="360">
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:141:2 The attribute 'type' in tag 'amp-date-picker[type=single][mode=static]' is set to the invalid value 'range'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:141:2 The attribute 'type' in tag 'amp-date-picker' is set to the invalid value 'range'. (see https://amp.dev/documentation/components/amp-date-picker)
 |      </amp-date-picker>
 |    <!-- Invalid: amp-date-picker with implicit mode="static" without layout -->
 |    <amp-date-picker></amp-date-picker>
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:144:2 Incomplete layout attributes specified for tag 'amp-date-picker[type=single][mode=static]'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:144:2 Incomplete layout attributes specified for tag 'amp-date-picker'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-date-picker)
 |    <!-- Invalid: amp-date-picker with explicit mode="static" without layout -->
 |    <amp-date-picker mode="static">
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:146:2 Incomplete layout attributes specified for tag 'amp-date-picker[type=single][mode=static]'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:146:2 Incomplete layout attributes specified for tag 'amp-date-picker'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-date-picker)
 |    </amp-date-picker>
 |    <!-- Invalid: overlay amp-date-picker with fullscreen attribute -->
 |    <amp-date-picker mode="overlay" fullscreen>
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:149:2 The attribute 'fullscreen' may not appear in tag 'amp-date-picker[type=single][mode=overlay]'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:149:2 The attribute 'fullscreen' may not appear in tag 'amp-date-picker'. (see https://amp.dev/documentation/components/amp-date-picker)
 |      <input type="text" name="date4">
 |    </amp-date-picker>
 |    <!-- Invalid: width is mistyped. -->
 |    <amp-date-picker height="360" wdith="360">
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:153:2 The attribute 'wdith' may not appear in tag 'amp-date-picker[type=single][mode=static]'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:153:2 The attribute 'wdith' may not appear in tag 'amp-date-picker'. (see https://amp.dev/documentation/components/amp-date-picker)
 |    </amp-date-picker>
 |    <!-- Invalid: amp-date-picker with bad day-size-->
 |    <amp-date-picker type="range" layout="fixed-height" height="360"
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:156:2 The attribute 'day-size' in tag 'amp-date-picker[type=range][mode=static]' is set to the invalid value 'five'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:156:2 The attribute 'day-size' in tag 'amp-date-picker' is set to the invalid value 'five'. (see https://amp.dev/documentation/components/amp-date-picker)
 |        day-size="five">
 |    </amp-date-picker>
 |    <!-- Invalid: amp-date-picker with bad number-of-months -->
 |    <amp-date-picker type="range" layout="fixed-height" height="360"
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:160:2 The attribute 'number-of-months' in tag 'amp-date-picker[type=range][mode=static]' is set to the invalid value 'twele'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:160:2 The attribute 'number-of-months' in tag 'amp-date-picker' is set to the invalid value 'twele'. (see https://amp.dev/documentation/components/amp-date-picker)
 |        number-of-months="twele">
 |    </amp-date-picker>
 |    <!-- Invalid: amp-date-picker with bad first-day-of-week -->
 |    <amp-date-picker type="range" layout="fixed-height" height="360"
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:164:2 The attribute 'first-day-of-week' in tag 'amp-date-picker[type=range][mode=static]' is set to the invalid value '7'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:164:2 The attribute 'first-day-of-week' in tag 'amp-date-picker' is set to the invalid value '7'. (see https://amp.dev/documentation/components/amp-date-picker)
 |        first-day-of-week="7">
 |    </amp-date-picker>
 |    <!-- Invalid: amp-date-picker templates outside amp-date-picker -->
 |    <template info-template type="amp-mustache"></template>
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:168:2 The parent tag of tag 'amp-date-picker > template [info-template]' is 'body', but it can only be 'amp-date-picker'. (see https://amp.dev/documentation/components/amp-mustache)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:168:2 The parent tag of tag 'template' is 'body', but it can only be 'amp-date-picker'. (see https://amp.dev/documentation/components/amp-mustache)
 |    <template date-template dates="2018-01-01" type="amp-mustache"></template>
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:169:2 The parent tag of tag 'amp-date-picker > template [date-template]' is 'body', but it can only be 'amp-date-picker'. (see https://amp.dev/documentation/components/amp-mustache)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:169:2 The parent tag of tag 'template' is 'body', but it can only be 'amp-date-picker'. (see https://amp.dev/documentation/components/amp-mustache)
 |    <!-- Invalid: amp-date-picker with bad maximum nights -->
 |    <amp-date-picker type="range" layout="fixed-height" height="360" maximum-nights="zero">
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:171:2 The attribute 'maximum-nights' in tag 'amp-date-picker[type=range][mode=static]' is set to the invalid value 'zero'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:171:2 The attribute 'maximum-nights' in tag 'amp-date-picker' is set to the invalid value 'zero'. (see https://amp.dev/documentation/components/amp-date-picker)
 |    </amp-date-picker>
 |    <!-- Invalid: amp-date-picker with bad minimum nights -->
 |    <amp-date-picker type="range" layout="fixed-height" height="360" minimum-nights="zero">
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:174:2 The attribute 'minimum-nights' in tag 'amp-date-picker[type=range][mode=static]' is set to the invalid value 'zero'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:174:2 The attribute 'minimum-nights' in tag 'amp-date-picker' is set to the invalid value 'zero'. (see https://amp.dev/documentation/components/amp-date-picker)
 |    </amp-date-picker>
 |    <!-- Invalid: single amp-date-picker with maximum nights -->
 |    <amp-date-picker layout="fixed-height" height="360" maximum-nights="0">
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:177:2 The mandatory attribute 'type' is missing in tag 'amp-date-picker[type=range][mode=static]'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:177:2 The mandatory attribute 'type' is missing in tag 'amp-date-picker'. (see https://amp.dev/documentation/components/amp-date-picker)
 |    </amp-date-picker>
 |    <!-- Invalid: single amp-date-picker with minimum nights -->
 |    <amp-date-picker layout="fixed-height" height="360" minimum-nights="0">
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:180:2 The mandatory attribute 'type' is missing in tag 'amp-date-picker[type=range][mode=static]'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:180:2 The mandatory attribute 'type' is missing in tag 'amp-date-picker'. (see https://amp.dev/documentation/components/amp-date-picker)
 |    </amp-date-picker>
 |    <!-- Invalid: single amp-date-picker with start-date attribute -->
 |    <amp-date-picker layout="fixed-height" height="360" start-date="2018-01-01">
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:183:2 The mandatory attribute 'type' is missing in tag 'amp-date-picker[type=range][mode=static]'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:183:2 The mandatory attribute 'type' is missing in tag 'amp-date-picker'. (see https://amp.dev/documentation/components/amp-date-picker)
 |    </amp-date-picker>
 |    <!-- Invalid: range amp-date-picker with date attribute -->
 |    <amp-date-picker type="range" layout="fixed-height" height="360" date="2018-01-01">
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:186:2 The attribute 'type' in tag 'amp-date-picker[type=single][mode=static]' is set to the invalid value 'range'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:186:2 The attribute 'type' in tag 'amp-date-picker' is set to the invalid value 'range'. (see https://amp.dev/documentation/components/amp-date-picker)
 |    </amp-date-picker>
 |    <!-- Invalid: static amp-date-picker with touch-keyboard-editable -->
 |    <amp-date-picker layout="fixed-height" height="360" touch-keyboard-editable>
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:189:2 The attribute 'touch-keyboard-editable' may not appear in tag 'amp-date-picker[type=single][mode=static]'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:189:2 The attribute 'touch-keyboard-editable' may not appear in tag 'amp-date-picker'. (see https://amp.dev/documentation/components/amp-date-picker)
 |    </amp-date-picker>
 |    <!-- Invalid: amp-date-picker with http src -->
 |    <amp-date-picker layout="fixed-height" height="360"
 >>   ^~~~~~~~~
-amp-date-picker/0.1/test/validator-amp-date-picker.html:192:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-date-picker[type=single][mode=static]'. (see https://amp.dev/documentation/components/amp-date-picker)
+amp-date-picker/0.1/test/validator-amp-date-picker.html:192:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-date-picker'. (see https://amp.dev/documentation/components/amp-date-picker)
 |        src="http://data.com/dates.json?ref=CANONICAL_URL">
 |    </amp-date-picker>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-date-picker/OWNERS b/extensions/amp-date-picker/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-date-picker/OWNERS
+++ b/extensions/amp-date-picker/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-date-picker/amp-date-picker.md b/extensions/amp-date-picker/amp-date-picker.md
index 868b1430f5b06..d1dd710882233 100644
--- a/extensions/amp-date-picker/amp-date-picker.md
+++ b/extensions/amp-date-picker/amp-date-picker.md
@@ -24,26 +24,24 @@ limitations under the License.
 
 # amp-date-picker
 
-## Behavior
+## Usage
 
-You can use the `amp-date-picker` to render a calendar on a page that a user can select dates from.
+The `amp-date-picker` renders a calendar on a page that a user can select dates
+from.
 
-_Example: Basic calendar_
-
-In this example, we display a fixed-height static calendar, where a user can select a single date:
+In this example, we display a fixed-height static calendar, where a user can
+select a single date:
 
 ```html
 <amp-date-picker layout="fixed-height" height="360"> </amp-date-picker>
 ```
 
-<amp-img alt="static single date picker" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-date-picker/img/amp-date-picker-basic.png" width="329" height="365">
+<amp-img alt="static single date picker" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-date-picker/img/amp-date-picker-basic.png" width="329" height="365">
   <noscript>
-    <img alt="static single date picker" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-date-picker/img/amp-date-picker-basic.png" width="329" height="365">
+    <img alt="static single date picker" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-date-picker/img/amp-date-picker-basic.png" width="329" height="365">
   </noscript>
 </amp-img>
 
-_Example: Calendar for a specific input field_
-
 In this example, the calendar displays as an overlay for the specific form field:
 
 ```html
@@ -59,11 +57,11 @@ In this example, the calendar displays as an overlay for the specific form field
 </form>
 ```
 
-## Display modes
+### Display modes
 
 The `amp-date-picker` provides two modes to render the date picker: static (default) or overlay.
 
-### Static mode
+#### Static mode
 
 By specifying `mode="static"`, the `amp-date-picker` renders a static calendar view. This is the default display mode; if no mode is specified, a static calendar is rendered.
 
@@ -71,8 +69,6 @@ For a static date picker, you must specify a size-defined layout, which can be o
 
 When the `static` amp-date-picker is rendered in a `<form>`, if there are no [inputs specified with `*input-selector`](#input-selector), the amp-date-picker creates hidden input elements (e.g., `<input type="hidden" …`). The amp-date-picker names the elements as `date` or `start-date` and `end-date`; if those names are already used in the form, the amp-date-picker attempts to name the input fields with the `id` of the `<amp-date-picker>`.
 
-_Example: static date picker in a form field_
-
 This example demonstrates using a static date picker in a form, where the user can select a date range in the calendar. As there are no `*input-selector` attributes defined in the amp-date-picker, hidden input fields are automatically generated.
 
 ```html
@@ -104,14 +100,12 @@ This example demonstrates using a static date picker in a form, where the user c
 </form>
 ```
 
-### Overlay mode
+#### Overlay mode
 
 By specifying `mode="overlay"`, when the user clicks, focuses, or presses the down-arrow in an input field connected with the amp-date-picker, the calendar appears. The calendar overlay positions itself relative to the `<amp-date-picker>` tag.
 
 For an overlay date picker, you must specify `layout="container"` and contain the input fields that it will render.
 
-_Example: overlay date picker in a form_
-
 This example demonstrates using a overlay date picker in a form where the user can choose a date. The date picker is connected to a specific input field via the `input-selector` attribute.
 
 ```html
@@ -142,14 +136,14 @@ To opt-out of this behavior, add the `touch-keyboard-editable` attribute to the
 
 <!-- TODO(cvializ): talk about why type="tel" is on the inputs -->
 
-## Selection types
+### Selection types
 
 The `amp-date-picker` provides two types of dates to select:
 
-- `single`: Select a single date within the date picker.
-- `range`: Select a date range within the date picker.
+-   `single`: Select a single date within the date picker.
+-   `range`: Select a date range within the date picker.
 
-### `type="single"`
+#### `type="single"`
 
 By specifying `type="single"`, the date picker attaches to a single input,
 and the user can select a single date. This is the default selection type.
@@ -159,13 +153,13 @@ and the user can select a single date. This is the default selection type.
 </amp-date-picker>
 ```
 
-<amp-img alt="static single date picker" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-date-picker/img/amp-date-picker-single-static.png" width="336" height="370">
+<amp-img alt="static single date picker" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-date-picker/img/amp-date-picker-single-static.png" width="336" height="370">
   <noscript>
-    <img alt="static single date picker" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-date-picker/img/amp-date-picker-single-static.png" width="336" height="370">
+    <img alt="static single date picker" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-date-picker/img/amp-date-picker-single-static.png" width="336" height="370">
   </noscript>
 </amp-img>
 
-### `type="range"`
+#### `type="range"`
 
 By specifying `type="range"`, the date picker attaches to two inputs,
 and the user can select a date range with a starting date and ending date.
@@ -175,38 +169,46 @@ and the user can select a date range with a starting date and ending date.
 </amp-date-picker>
 ```
 
-<amp-img alt="static single date picker" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-date-picker/img/amp-date-picker-range-static.png" width="332" height="373">
+<amp-img alt="static single date picker" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-date-picker/img/amp-date-picker-range-static.png" width="332" height="373">
   <noscript>
-    <img alt="static single date picker" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-date-picker/img/amp-date-picker-range-static.png"  width="332" height="373">
+    <img alt="static single date picker" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-date-picker/img/amp-date-picker-range-static.png"  width="332" height="373">
   </noscript>
 </amp-img>
 
-## Date formats
+### Date formats
 
-`amp-date-picker` attributes accept dates in ISO 8601.
+`amp-date-picker` attributes accept dates in ISO 8601 and RFC 5545 RRULE formats.
 
 [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) formats dates as `YYYY-MM-DD`
 and is the standard for sharing dates between electronic systems.
 For example, ISO 8601 formats the date February 28 2018 as `2018-02-28`.
 
+[RFC 5545 Recurrence Rules (RRULEs)](https://icalendar.org/iCalendar-RFC-5545/3-3-10-recurrence-rule.html)
+standardize a format for specifying repeating dates.
+For example, RFC 5545 formats Halloween as `RRULE:FREQ=YEARLY;BYMONTH=10;BYMONTHDAY=31`.
+More complex dates are also possible, such as the United States Thanksgiving holiday,
+which is every November on the fourth Thursday: `RRULE:FREQ=YEARLY;BYMONTH=11;BYDAY=+4TH`.
+The API is not friendly to memorize, but there are various
+[RRULE generators](https://jakubroztocil.github.io/rrule) available online.
+
 ## Attributes
 
-##### mode
+### mode
 
 Specifies how the date picker is rendered. Allowed values are:
 
-- **`static`** (default): The date picker renders as an interactive calendar view.
-- **`overlay`**: The date picker calendar view is not rendered until the user interacts
-  with required input field(s) nested in the `<amp-date-picker>`.
+-   **`static`** (default): The date picker renders as an interactive calendar view.
+-   **`overlay`**: The date picker calendar view is not rendered until the user interacts
+    with required input field(s) nested in the `<amp-date-picker>`.
 
-##### type
+### type
 
 Specifies the selection type for the date picker. Allowed values are:
 
-- **`single`** (default): The user can select a single date.
-- **`range`**: The user can select a date range.
+-   **`single`** (default): The user can select a single date.
+-   **`range`**: The user can select a date range.
 
-##### input-selector
+### input-selector
 
 A query selector for a single date picker's input. If this is omitted,
 the date picker automatically generates a hidden input field, and assigns it
@@ -230,7 +232,7 @@ an initial date dynamically.
 </amp-date-picker>
 ```
 
-##### start-input-selector
+### start-input-selector
 
 A query selector for a date range picker's start date input. If this is omitted,
 the date picker automatically generates a hidden input field, and assigns it
@@ -240,7 +242,7 @@ with an existing element in the form, an error is emitted.
 When `amp-date-picker` loads, the input element's value is used to display the
 initially selected start date.
 
-Specify the `startDate` property via the [`src` attribute](#src-optional) to set
+Specify the `startDate` property via the [`src` attribute](#src) to set
 an initial end date dynamically.
 
 ```html
@@ -256,7 +258,7 @@ an initial end date dynamically.
 </amp-date-picker>
 ```
 
-##### end-input-selector
+### end-input-selector
 
 A query selector for a date range picker's end date input. If this is omitted,
 the date picker automatically generates a hidden input field, and assigns it
@@ -282,31 +284,31 @@ an initial end date dynamically.
 </amp-date-picker>
 ```
 
-##### min
+### min
 
 The earliest date that the user may select. This must be formatted as an ISO 8601 date.
 If no `min` attribute is present, the current date will be the minimum date.
 
 The `min` attribute may be updated after a user gesture with [`amp-bind`](https://amp.dev/documentation/components/amp-bind).
 
-##### max
+### max
 
 The latest date that the user may select. This must be formatted as an ISO 8601 date.
 If no `max` attribute is present, the date picker will have no maximum date.
 
 The `max` attribute may be updated after a user gesture with [`amp-bind`](https://amp.dev/documentation/components/amp-bind).
 
-##### month-format
+### month-format
 
 The format to use for displaying the month in the calendar view.
 The default format is: `"MMMM YYYY"`.
 
-##### format
+### format
 
 The format to use for displaying and parsing the date in the input boxes.
 The default format is `"YYYY-MM-DD"`.
 
-##### week-day-format
+### week-day-format
 
 The format to use for displaying the day of the week in the calendar view.
 If no `week-day-format` is present, the weekdays display as the first character of the weekday.
@@ -324,65 +326,60 @@ If no `week-day-format` is present, the weekdays display as the first character
 </amp-date-picker>
 ```
 
-##### locale
+### locale
 
 The locale to use for rendering the calendar view. The default locale is `"en"`.
 
-##### maximum-nights
+### maximum-nights
 
 The number of nights that the user's selection may not exceed in a date range.
 The default is `"0"`.
 A value of `"0"` allows the user to select an unlimited number of nights.
 
-##### minimum-nights
+### minimum-nights
 
 The number of nights that the user must select in a date range. The default is `"1"`.
 A value of `"0"` allows users to select the same date for the start and end dates.
 
-##### number-of-months
+### number-of-months
 
 The number of months to display at one time in the calendar view. The default is `"1"`.
 
-##### first-day-of-week
+### first-day-of-week
 
 The day to specify as the first day of the week (0-6). The default value is `"0"` (Sunday).
 
-##### blocked
+### blocked
 
-A space-separated list of ISO 8601 dates to prevent the user from selecting on the calendar.
+A space-separated list of ISO 8601 dates or RFC 5545 RRULE repeating dates to prevent the user from selecting on the calendar.
 
-##### highlighted
+### highlighted
 
-A space-separated list of ISO 8601 dates to specially style as highlighted to draw the user's attention.
+A space-separated list of ISO 8601 dates or RFC 5545 RRULE repeating dates to specially style as highlighted to draw the user's attention.
 Default styling is a blue dot on the date.
 
-##### day-size
+### day-size
 
 The size in `px` of the date cells in the calendar view table. The default is `39`.
 
-Note: [due to a bug](https://github.com/ampproject/amphtml/issues/13897),
-a non-default `day-size` causes the date picker height to be incorrect on months
-that span more than 4 weeks. To prevent incorrect height, add a CSS rule to the
-document that sets a minimum height for the date picker.
-
 ```css
 .amp-date-picker-resize-bug .DayPicker_transitionContainer {
   min-height: 354px; /* 354px is the default. You must update it. */
 }
 ```
 
-##### allow-blocked-end-date
+### allow-blocked-end-date
 
 If present, this attribute allows the user to choose an end date on the first
 blocked date after their chosen start date.
 By default, this attribute is not present.
 
-##### allow-blocked-ranges
+### allow-blocked-ranges
 
 If present, this attribute allows the user to select a range containing blocked date(s).
 By default, this attribute is not present.
 
-##### src
+### src
 
 If present, `amp-date-picker` requests JSON data to populate certain attributes dynamically, as well as matching lists of dates to template `id`s for rendering days in the calendar.
 
@@ -398,7 +395,7 @@ The following table lists the properties that you can specify in the JSON data:
 </tr>
 <tr>
 <td><code>blocked</code></td>
-<td>An array of ISO 8601 single dates to render as blocked in the calendar view. The user is prevented from selecting these dates.</td>
+<td>An array of ISO 8601 single dates or RFC 5545 RRULE repeating dates to render as blocked in the calendar view. The user is prevented from selecting these dates.</td>
 </tr>
 <tr>
 <td><code>date</code></td>
@@ -410,7 +407,7 @@ The following table lists the properties that you can specify in the JSON data:
 </tr>
 <tr>
 <td><code>highlighted</code></td>
-<td>An array of ISO 8601 single dates to render as highlighted in the calendar view.</td>
+<td>An array of ISO 8601 single dates or RFC 5545 RRULE repeating dates to render as highlighted in the calendar view.</td>
 </tr>
 <tr>
 <td><code>startDate</code></td>
@@ -423,11 +420,11 @@ The following table lists the properties that you can specify in the JSON data:
 </tbody>
 </table>
 
-The `src` attribute may be updated after a user gesture with [`amp-bind`](https://amp.dev/documentation/components/amp-bind).
+The `src` attribute may be updated after a user gesture with [`amp-bind`](../amp-bind/amp-bind.md).
 
-###### template definition objects
+#### template definition objects
 
-The `dates` property is an array of ISO 8601 single dates.
+The `dates` property is an array of ISO 8601 single dates or RFC 5545 RRULE repeating dates.
 The `id` property specifies the `id` of a template that the date picker can use to
 render the specified dates in the calendar view.
 
@@ -495,7 +492,7 @@ _Example: Markup using the `src` attribute_
 </amp-date-picker>
 ```
 
-##### fullscreen
+### fullscreen
 
 Renders the picker to fill the space available to it, like in a fullscreen lightbox.
 This works best with `layout="fill"`.
@@ -520,110 +517,28 @@ This works best with `layout="fill"`.
 </amp-lightbox>
 ```
 
-<amp-img alt="static single date picker" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-date-picker/img/amp-date-picker-lightbox-fullscreen.png" width="320" height="571">
+<amp-img alt="static single date picker" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-date-picker/img/amp-date-picker-lightbox-fullscreen.png" width="320" height="571">
   <noscript>
-    <img alt="static single date picker" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-date-picker/img/amp-date-picker-lightbox-fullscreen.png" width="320" height="571">
+    <img alt="static single date picker" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-date-picker/img/amp-date-picker-lightbox-fullscreen.png" width="320" height="571">
   </noscript>
 </amp-img>
 
-##### open-after-select
+### open-after-select
 
 If present, keeps the date picker overlay open after the user selects a date or dates. By default, this attribute is not present.
 
-##### open-after-clear
+### open-after-clear
 
 If present, keeps the date picker open after the user clears the date or dates. By default, this attribute is not present.
 
-##### hide-keyboard-shortcuts-panel
+### hide-keyboard-shortcuts-panel
 
 If present, hides the keyboard shortcuts panel at the bottom of the picker. By default, this attribute is not present.
 
-##### common attributes
+### common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
 
-## Events
-
-These events may trigger actions on other AMP components using the `on` attribute.
-e.g. `on="activate: my-lightbox.open"`
-
-Read more about [AMP Actions and Events](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events).
-
-##### activate
-
-The date picker triggers the `activate` event when the user begins
-an interaction with the calendar view, i.e. when the overlay would open.
-
-##### deactivate
-
-The date picker triggers the `deactivate` event when the user ends
-their interaction with the calendar view, i.e. when the overlay would close.
-
-##### select
-
-The date picker triggers the `select` event when the user selects a date or
-date range. When selecting a date range, the event is emitted when the end
-date and start date are both selected.
-The `select` event contains the following properties.
-
-For a single date picker:
-
-<table>
-<tr>
-<th width="30%">Property</th>
-<th>Description</th>
-</tr>
-<tr>
-<td><code>date</code></td>
-<td>The date that was selected.</td>
-</tr>
-<tr>
-<td><code>id</code></td>
-<td>The <code>id</code> attribute of the first <a href="#templates">date template</a> that applies to this date.</td>
-</tr>
-</table>
-
-```html
-<amp-date-picker
-  type="single"
-  on="select: AMP.setState({date: event.date, templateSelected: event.id})"
-  …
->
-  <!-- … -->
-</amp-date-picker>
-```
-
-For a date range picker:
-
-<table>
-<tr>
-<th width="30%">Property</th>
-<th>Description</th>
-</tr>
-<tr>
-<td><code>dates</code></td>
-<td>An array of the dates that were selected. Each object in the array contains the <code>date</code> and <code>id</code> properties from the single date picker <code>change</code> event object.</td>
-</tr>
-<tr>
-<td><code>start</code></td>
-<td>A shortcut for the first date in the date range (<code>event.dates[0]</code>).
-</tr>
-<tr>
-<td><code>end</code></td>
-<td>A shortcut for the last date in the date range (<code>event.dates[event.dates.length - 1]</code>).
-</tr>
-</table>
-
-```html
-<amp-date-picker
-  type="range"
-  on="select: AMP.setState({dates: event.dates, firstTemplate: event.start.id})"
-  …
->
-  <!-- … -->
-</amp-date-picker>
-```
-
 ## Actions
 
 These actions may be triggered by other components using the `on` attribute.
@@ -631,7 +546,7 @@ e.g. `on="tap: date-picker.setDate(date=state.value)"`
 
 Read more about [AMP Actions and Events](https://www.ampproject.org/docs/interaction_dynamic/amp-actions-and-events).
 
-##### clear
+### clear
 
 The `clear` action clears the date value or values from the single date picker
 or date range picker with the specified `id`, e.g. `date-picker`.
@@ -640,7 +555,7 @@ or date range picker with the specified `id`, e.g. `date-picker`.
 <button on="tap: date-picker.clear">Clear</button>
 ```
 
-##### setDate
+### setDate
 
 The `setDate` action assigns the value of the `date` argument to
 the single date picker with the specified `id`, e.g. `date-picker`.
@@ -651,7 +566,7 @@ the single date picker with the specified `id`, e.g. `date-picker`.
 </button>
 ```
 
-##### setDates
+### setDates
 
 The `setDate` action assigns the value of the `start` and `end` arguments to
 the date range picker with the specified `id`, e.g. `date-picker`.
@@ -662,7 +577,7 @@ the date range picker with the specified `id`, e.g. `date-picker`.
 </button>
 ```
 
-##### today
+### today
 
 The `today` action assigns the value of the current day,
 plus an `offset` argument, to the single date picker with the specified `id`,
@@ -674,7 +589,7 @@ e.g. `date-picker`. The `offset` argument value can be any integer.
 <button on="tap: date-picker.today(offset=-1)">Yesterday</button>
 ```
 
-##### startToday
+### startToday
 
 The `startToday` action assigns the value of the current day,
 plus an `offset` argument, to the date range picker with the specified `id`,
@@ -697,7 +612,7 @@ to select ranges with an offset.
 </button>
 ```
 
-##### endToday
+### endToday
 
 The `endToday` action assigns the value of the current day,
 plus an `offset` argument, to the date range picker with the specified `id`,
@@ -720,12 +635,96 @@ to select ranges with an offset.
 </button>
 ```
 
-## Templates
+## Events
+
+These events may trigger actions on other AMP components using the `on` attribute.
+e.g. `on="activate: my-lightbox.open"`
+
+Read more about [AMP Actions and Events](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events).
+
+### activate
+
+The date picker triggers the `activate` event when the user begins
+an interaction with the calendar view, i.e. when the overlay would open.
+
+### deactivate
+
+The date picker triggers the `deactivate` event when the user ends
+their interaction with the calendar view, i.e. when the overlay would close.
+
+### select
+
+The date picker triggers the `select` event when the user selects a date or
+date range. When selecting a date range, the event is emitted when the end
+date and start date are both selected.
+The `select` event contains the following properties.
+
+For a single date picker:
+
+<table>
+<tr>
+<th width="30%">Property</th>
+<th>Description</th>
+</tr>
+<tr>
+<td><code>date</code></td>
+<td>The date that was selected.</td>
+</tr>
+<tr>
+<td><code>id</code></td>
+<td>The <code>id</code> attribute of the first <a href="#templates">date template</a> that applies to this date.</td>
+</tr>
+</table>
+
+```html
+<amp-date-picker
+  type="single"
+  on="select: AMP.setState({date: event.date, templateSelected: event.id})"
+  …
+>
+  <!-- … -->
+</amp-date-picker>
+```
+
+For a date range picker:
+
+<table>
+<tr>
+<th width="30%">Property</th>
+<th>Description</th>
+</tr>
+<tr>
+<td><code>dates</code></td>
+<td>An array of the dates that were selected. Each object in the array contains the <code>date</code> and <code>id</code> properties from the single date picker <code>change</code> event object.</td>
+</tr>
+<tr>
+<td><code>start</code></td>
+<td>A shortcut for the first date in the date range (<code>event.dates[0]</code>).
+</tr>
+<tr>
+<td><code>end</code></td>
+<td>A shortcut for the last date in the date range (<code>event.dates[event.dates.length - 1]</code>).
+</tr>
+</table>
+
+```html
+<amp-date-picker
+  type="range"
+  on="select: AMP.setState({dates: event.dates, firstTemplate: event.start.id})"
+  …
+>
+  <!-- … -->
+</amp-date-picker>
+```
+
+## Styling
+
+### Templates
 
 `amp-date-picker` provides a markup API to render templates for certain dates
 and for an extra information area below the calendar view.
 
-##### date-template
+#### date-template
 
 `amp-date-picker` consumes templates specified in HTML markup to render dates.
 These templates must only be used for dates that will not need to be updated
@@ -736,10 +735,10 @@ Using `src` prevents chached AMP documents from showing out-of-date information.
 
 A `date-template` must have a `dates` or `default` attribute.
 
-- **dates**: A space-separated list of ISO 8601 single dates.
-  The template content will render for the dates matching the dates in the attribute.
-- **default**: If the `default` attribute is present, the template content will render for
-  all dates not matching an existing template.
+-   **dates**: A space-separated list of ISO 8601 single dates or RFC 5545 RRULE repeating dates.
+    The template content will render for the dates matching the dates in the attribute.
+-   **default**: If the `default` attribute is present, the template content will render for
+    all dates not matching an existing template.
 
 The date picker provides mustache variables to render in the templates.
 These variables are ISO 8601 format string values e.g. `DD`, `D`, `X`, etc.
@@ -767,7 +766,7 @@ rendered after the calendar view renders for the first time.
 </amp-date-picker>
 ```
 
-##### info-template
+#### info-template
 
 The `info-template` contains markup to render in an information area below
 the calendar view. `info-template`s may contain any valid AMP content and are only
@@ -787,4 +786,4 @@ rendered after the calendar view renders for the first time.
 
 ## Validation
 
-See [amp-date-picker rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-date-picker/validator-amp-date-picker.protoascii) in the AMP validator specification.
+See [amp-date-picker rules](validator-amp-date-picker.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-delight-player/0.1/amp-delight-player.css b/extensions/amp-delight-player/0.1/amp-delight-player.css
index 065811039f427..90140ab595495 100644
--- a/extensions/amp-delight-player/0.1/amp-delight-player.css
+++ b/extensions/amp-delight-player/0.1/amp-delight-player.css
@@ -16,10 +16,6 @@
 
 amp-delight-player [placeholder] {
   transition: opacity 0.5s ease-out;
-  background: no-repeat 50%;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
 }
 
 amp-delight-player [placeholder].i-amphtml-delight-player-faded {
diff --git a/extensions/amp-delight-player/0.1/amp-delight-player.js b/extensions/amp-delight-player/0.1/amp-delight-player.js
index b57a40cc68e73..9e4edc8014c06 100644
--- a/extensions/amp-delight-player/0.1/amp-delight-player.js
+++ b/extensions/amp-delight-player/0.1/amp-delight-player.js
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 import {CSS} from '../../../build/amp-delight-player-0.1.css';
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoAttributes, VideoEvents} from '../../../src/video-interface';
 import {
@@ -23,12 +24,22 @@ import {
   originMatches,
   redispatch,
 } from '../../../src/iframe-video';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
+import {dispatchCustomEvent, removeElement} from '../../../src/dom';
+import {
+  getConsentMetadata,
+  getConsentPolicyInfo,
+  getConsentPolicySharedData,
+  getConsentPolicyState,
+} from '../../../src/consent';
 import {getData, listen, listenOncePromise} from '../../../src/event-helper';
 import {htmlFor} from '../../../src/static-template';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {removeElement} from '../../../src/dom';
+import {
+  observeWithSharedInOb,
+  unobserveWithSharedInOb,
+} from '../../../src/viewport-observer';
 import {setStyle} from '../../../src/style';
 import {userAssert} from '../../../src/log';
 
@@ -65,6 +76,8 @@ const DelightEvent = {
   DISABLE_INTERFACE: 'x-dl8-to-iframe-disable-interface',
   SEEK: 'x-dl8-to-iframe-seek',
   CUSTOM_TICK: 'x-dl8-to-parent-amp-custom-tick',
+  CONSENT_DATA: 'x-dl8-to-iframe-consent-data',
+  PLAYER_READY: 'x-dl8-to-parent-player-ready',
 
   PING: 'x-dl8-ping',
   PONG: 'x-dl8-pong',
@@ -82,6 +95,9 @@ class AmpDelightPlayer extends AMP.BaseElement {
   constructor(element) {
     super(element);
 
+    /** @private {boolean} */
+    this.isInViewport_ = false;
+
     /** @private {string} */
     this.baseURL_ = 'https://players.delight-vr.com';
 
@@ -126,6 +142,9 @@ class AmpDelightPlayer extends AMP.BaseElement {
 
     /** @private {HTMLElement} */
     this.placeholderEl_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -162,6 +181,10 @@ class AmpDelightPlayer extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
+    observeWithSharedInOb(
+      this.element,
+      (isInViewport) => (this.isInViewport_ = isInViewport)
+    );
     const src = `${this.baseURL_}/player/${this.contentID_}?amp=1`;
     const iframe = createFrameFor(this, src);
 
@@ -197,6 +220,8 @@ class AmpDelightPlayer extends AMP.BaseElement {
     this.playerReadyResolver_ = deferred.resolve;
 
     this.unregisterEventHandlers_();
+    unobserveWithSharedInOb(this.element);
+    this.pauseHelper_.updatePlaying(false);
 
     return true;
   }
@@ -210,12 +235,13 @@ class AmpDelightPlayer extends AMP.BaseElement {
   createPlaceholderCallback() {
     const html = htmlFor(this.element);
     const placeholder = html`
-      <div placeholder><amp-img layout="fill"></amp-img></div>
+      <img placeholder referrerpolicy="origin" loading="lazy" />
     `;
 
-    const src = `${this.baseURL_}/poster/${this.contentID_}`;
+    this.applyFillContent(placeholder);
 
-    placeholder.firstElementChild.setAttribute('src', src);
+    const src = `${this.baseURL_}/poster/${this.contentID_}`;
+    placeholder.setAttribute('src', src);
 
     this.placeholderEl_ = /** @type {HTMLElement} */ (placeholder);
 
@@ -226,7 +252,7 @@ class AmpDelightPlayer extends AMP.BaseElement {
   firstLayoutCompleted() {
     const el = this.placeholderEl_;
     let promise = null;
-    if (el && this.isInViewport()) {
+    if (el && this.isInViewport_) {
       el.classList.add('i-amphtml-delight-player-faded');
       promise = listenOncePromise(el, 'transitionend');
     } else {
@@ -265,6 +291,16 @@ class AmpDelightPlayer extends AMP.BaseElement {
 
     const {element} = this;
 
+    switch (data['type']) {
+      case DelightEvent.PLAYING:
+        this.pauseHelper_.updatePlaying(true);
+        break;
+      case DelightEvent.PAUSED:
+      case DelightEvent.ENDED:
+        this.pauseHelper_.updatePlaying(false);
+        break;
+    }
+
     const redispatched = redispatch(element, data['type'], {
       [DelightEvent.PLAYING]: VideoEvents.PLAYING,
       [DelightEvent.PAUSED]: VideoEvents.PAUSE,
@@ -297,10 +333,14 @@ class AmpDelightPlayer extends AMP.BaseElement {
         break;
       }
       case DelightEvent.READY: {
-        element.dispatchCustomEvent(VideoEvents.LOAD);
+        dispatchCustomEvent(element, VideoEvents.LOAD);
         this.playerReadyResolver_(this.iframe_);
         break;
       }
+      case DelightEvent.PLAYER_READY: {
+        this.sendConsentData_();
+        break;
+      }
       case DelightEvent.TIME_UPDATE: {
         const payload = data['payload'];
         this.currentTime_ = payload.currentTime;
@@ -341,7 +381,8 @@ class AmpDelightPlayer extends AMP.BaseElement {
    * @param {!Object<string, string>=} vars
    */
   dispatchCustomAnalyticsEvent_(eventType, vars) {
-    this.element.dispatchCustomEvent(
+    dispatchCustomEvent(
+      this.element,
       VideoEvents.CUSTOM_TICK,
       dict({
         'eventType': ANALYTICS_EVENT_TYPE_PREFIX + eventType,
@@ -505,6 +546,42 @@ class AmpDelightPlayer extends AMP.BaseElement {
     }
   }
 
+  /**
+   * Requests consent data from consent module
+   * and forwards information to iframe
+   * @private
+   */
+  sendConsentData_() {
+    const consentPolicyId = super.getConsentPolicy() || 'default';
+    const consentStringPromise = getConsentPolicyInfo(
+      this.element,
+      consentPolicyId
+    );
+    const metadataPromise = getConsentMetadata(this.element, consentPolicyId);
+    const consentPolicyStatePromise = getConsentPolicyState(
+      this.element,
+      consentPolicyId
+    );
+    const consentPolicySharedDataPromise = getConsentPolicySharedData(
+      this.element,
+      consentPolicyId
+    );
+
+    Promise.all([
+      metadataPromise,
+      consentStringPromise,
+      consentPolicyStatePromise,
+      consentPolicySharedDataPromise,
+    ]).then((consents) => {
+      this.sendCommand_(DelightEvent.CONSENT_DATA, {
+        'consentMetadata': consents[0],
+        'consentString': consents[1],
+        'consentPolicyState': consents[2],
+        'consentPolicySharedData': consents[3],
+      });
+    });
+  }
+
   // VideoInterface Implementation. See ../src/video-interface.VideoInterface
 
   /** @override */
diff --git a/extensions/amp-delight-player/0.1/test/test-amp-delight-player.js b/extensions/amp-delight-player/0.1/test/test-amp-delight-player.js
index a2eafcc12f25c..fc2795b5f2b68 100644
--- a/extensions/amp-delight-player/0.1/test/test-amp-delight-player.js
+++ b/extensions/amp-delight-player/0.1/test/test-amp-delight-player.js
@@ -34,136 +34,222 @@ describes.realWin(
       doc = win.document;
     });
 
-    function fakePostMessage(delightElement, info) {
-      delightElement.implementation_.handleDelightMessage_({
+    async function fakePostMessage(delightElement, info) {
+      const impl = await delightElement.getImpl(false);
+      impl.handleDelightMessage_({
         source: delightElement.querySelector('iframe').contentWindow,
         data: {source: 'DelightPlayer', ...info},
       });
     }
 
-    function getDelightPlayer(attributes) {
-      const delight = doc.createElement('amp-delight-player');
+    async function getDelightPlayer(attributes) {
+      const player = doc.createElement('amp-delight-player');
       for (const key in attributes) {
-        delight.setAttribute(key, attributes[key]);
+        player.setAttribute(key, attributes[key]);
       }
-      delight.setAttribute('width', '640');
-      delight.setAttribute('height', '360');
-      delight.setAttribute('layout', 'responsive');
-      doc.body.appendChild(delight);
-      return delight
-        .build()
-        .then(() => delight.layoutCallback())
-        .then(() => delight);
+      player.setAttribute('width', '640');
+      player.setAttribute('height', '360');
+      player.setAttribute('layout', 'responsive');
+      doc.body.appendChild(player);
+      const impl = await player.getImpl(false);
+      impl.baseURL_ =
+        // Serve a blank page, since these tests don't require an actual page.
+        // hash # at the end so path is not affected by param concat
+        `http://localhost:${location.port}/test/fixtures/served/blank.html#`;
+      return player
+        .buildInternal()
+        .then(() => player.layoutCallback())
+        .then(() => player);
     }
 
-    it('renders', () => {
-      return getDelightPlayer({
-        'data-content-id': '-LLoCCZqWi18O73b6M0w',
-      }).then((delight) => {
-        const iframe = delight.querySelector('iframe');
+    describe('rendering', async () => {
+      it('renders', () => {
+        return getDelightPlayer({
+          'data-content-id': '-LLoCCZqWi18O73b6M0w',
+        }).then(async (player) => {
+          const impl = await player.getImpl(false);
+          const iframe = player.querySelector('iframe');
+          expect(iframe).to.not.be.null;
+          expect(iframe.tagName).to.equal('IFRAME');
+          expect(iframe.src).to.equal(
+            `${impl.baseURL_}/player/-LLoCCZqWi18O73b6M0w?amp=1`
+          );
+          expect(iframe.allow).to.equal('vr');
+          expect(iframe.className).to.match(/i-amphtml-fill-content/);
+        });
+      });
+
+      it('fails if no content is specified', () => {
+        return allowConsoleError(() => {
+          return getDelightPlayer({
+            'data-content-id': '',
+          }).should.eventually.be.rejectedWith(
+            /The data-content-id attribute is required/
+          );
+        });
+      });
+
+      it('removes iframe after unlayoutCallback', async () => {
+        const player = await getDelightPlayer({
+          'data-content-id': '-LLoCCZqWi18O73b6M0w',
+        });
+        const impl = await player.getImpl(false);
+        const iframe = player.querySelector('iframe');
         expect(iframe).to.not.be.null;
-        expect(iframe.tagName).to.equal('IFRAME');
-        expect(iframe.src).to.equal(
-          'https://players.delight-vr.com/player/-LLoCCZqWi18O73b6M0w?amp=1'
-        );
-        expect(iframe.allow).to.equal('vr');
-        expect(iframe.className).to.match(/i-amphtml-fill-content/);
+        impl.unlayoutCallback();
+        expect(player.querySelector('iframe')).to.be.null;
+        expect(impl.iframe_).to.be.null;
       });
-    });
 
-    it('fails if no content is specified', () => {
-      return allowConsoleError(() => {
+      it('should forward events', () => {
         return getDelightPlayer({
-          'data-content-id': '',
-        }).should.eventually.be.rejectedWith(
-          /The data-content-id attribute is required/
-        );
+          'data-content-id': '-LLoCCZqWi18O73b6M0w',
+        }).then((player) => {
+          return Promise.resolve()
+            .then(async () => {
+              const p = listenOncePromise(player, VideoEvents.LOAD);
+              await fakePostMessage(player, {
+                type: 'x-dl8-to-parent-ready',
+                payload: {},
+              });
+              return p;
+            })
+            .then(async () => {
+              const p = listenOncePromise(player, VideoEvents.PLAYING);
+              await fakePostMessage(player, {
+                type: 'x-dl8-to-parent-playing',
+                payload: {},
+              });
+              return p;
+            })
+            .then(async () => {
+              const p = listenOncePromise(player, VideoEvents.PAUSE);
+              await fakePostMessage(player, {
+                type: 'x-dl8-to-parent-paused',
+                payload: {},
+              });
+              return p;
+            })
+            .then(async () => {
+              const p = listenOncePromise(player, VideoEvents.MUTED);
+              await fakePostMessage(player, {
+                type: 'x-dl8-to-parent-muted',
+                payload: {},
+              });
+              return p;
+            })
+            .then(async () => {
+              const p = listenOncePromise(player, VideoEvents.UNMUTED);
+              await fakePostMessage(player, {
+                type: 'x-dl8-to-parent-unmuted',
+                payload: {},
+              });
+              return p;
+            })
+            .then(async () => {
+              const p = listenOncePromise(player, VideoEvents.ENDED);
+              await fakePostMessage(player, {
+                type: 'x-dl8-to-parent-ended',
+                payload: {},
+              });
+              return p;
+            })
+            .then(async () => {
+              const p = listenOncePromise(player, VideoEvents.AD_START);
+              await fakePostMessage(player, {
+                type: 'x-dl8-to-parent-amp-ad-start',
+                payload: {},
+              });
+              return p;
+            })
+            .then(async () => {
+              const p = listenOncePromise(player, VideoEvents.AD_END);
+              await fakePostMessage(player, {
+                type: 'x-dl8-to-parent-amp-ad-end',
+                payload: {},
+              });
+              return p;
+            })
+            .then(async () => {
+              const p = listenOncePromise(player, VideoEvents.CUSTOM_TICK);
+              await fakePostMessage(player, {
+                type: 'x-dl8-to-parent-amp-custom-tick',
+                payload: {
+                  type: 'delight-test-event',
+                  testVar: 42,
+                },
+              });
+              const {data} = await p;
+              expect(data.eventType).to.equal(
+                'video-custom-delight-test-event'
+              );
+              expect(data.vars.testVar).to.equal(42);
+              return p;
+            });
+        });
       });
     });
 
-    it('should forward events', () => {
-      return getDelightPlayer({
-        'data-content-id': '-LLoCCZqWi18O73b6M0w',
-      }).then((delight) => {
-        return Promise.resolve()
-          .then(() => {
-            const p = listenOncePromise(delight, VideoEvents.LOAD);
-            fakePostMessage(delight, {
-              type: 'x-dl8-to-parent-ready',
-              payload: {},
-            });
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(delight, VideoEvents.PLAYING);
-            fakePostMessage(delight, {
-              type: 'x-dl8-to-parent-playing',
-              payload: {},
-            });
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(delight, VideoEvents.PAUSE);
-            fakePostMessage(delight, {
-              type: 'x-dl8-to-parent-paused',
-              payload: {},
-            });
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(delight, VideoEvents.MUTED);
-            fakePostMessage(delight, {
-              type: 'x-dl8-to-parent-muted',
-              payload: {},
-            });
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(delight, VideoEvents.UNMUTED);
-            fakePostMessage(delight, {
-              type: 'x-dl8-to-parent-unmuted',
-              payload: {},
-            });
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(delight, VideoEvents.ENDED);
-            fakePostMessage(delight, {
-              type: 'x-dl8-to-parent-ended',
-              payload: {},
-            });
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(delight, VideoEvents.AD_START);
-            fakePostMessage(delight, {
-              type: 'x-dl8-to-parent-amp-ad-start',
-              payload: {},
-            });
-            return p;
-          })
-          .then(() => {
-            const p = listenOncePromise(delight, VideoEvents.AD_END);
-            fakePostMessage(delight, {
-              type: 'x-dl8-to-parent-amp-ad-end',
-              payload: {},
-            });
-            return p;
-          })
-          .then(async () => {
-            const p = listenOncePromise(delight, VideoEvents.CUSTOM_TICK);
-            fakePostMessage(delight, {
-              type: 'x-dl8-to-parent-amp-custom-tick',
-              payload: {
-                type: 'delight-test-event',
-                testVar: 42,
-              },
-            });
-            const {data} = await p;
-            expect(data.eventType).to.equal('video-custom-delight-test-event');
-            expect(data.vars.testVar).to.equal(42);
-            return p;
-          });
+    describe('methods', async () => {
+      let impl;
+      beforeEach(async () => {
+        const player = await getDelightPlayer({
+          'data-content-id': '-LLoCCZqWi18O73b6M0w',
+        });
+        impl = await player.getImpl(false);
+      });
+
+      it('is interactive', () => {
+        expect(impl.isInteractive()).to.be.true;
+      });
+
+      it('can play', () => {
+        const spy = env.sandbox.spy(impl, 'sendCommand_');
+        impl.play();
+        expect(spy).to.be.calledWith('x-dl8-to-iframe-play');
+      });
+
+      it('can pause', () => {
+        const spy = env.sandbox.spy(impl, 'sendCommand_');
+        impl.pause();
+        expect(spy).to.be.calledWith('x-dl8-to-iframe-pause');
+      });
+
+      it('can mute', () => {
+        env.sandbox.spy(impl, 'sendCommand_');
+        impl.mute();
+        expect(impl.sendCommand_).calledWith('x-dl8-to-iframe-mute');
+      });
+
+      it('can unmute', () => {
+        env.sandbox.spy(impl, 'sendCommand_');
+        impl.unmute();
+        expect(impl.sendCommand_).calledWith('x-dl8-to-iframe-unmute');
+      });
+
+      it('can enter fullscreen', () => {
+        env.sandbox.spy(impl, 'sendCommand_');
+        impl.fullscreenEnter();
+        expect(impl.sendCommand_).calledWith(
+          'x-dl8-to-iframe-enter-fullscreen'
+        );
+      });
+
+      it('can exit fullscreen', () => {
+        env.sandbox.spy(impl, 'sendCommand_');
+        impl.fullscreenExit();
+        expect(impl.sendCommand_).calledWith('x-dl8-to-iframe-exit-fullscreen');
+        expect(impl.isFullscreen()).to.be.false;
+      });
+
+      it('toggles controls', () => {
+        const spy = env.sandbox.stub(impl, 'sendCommand_');
+        impl.showControls();
+        expect(spy).calledWith('x-dl8-to-iframe-enable-interface');
+        impl.hideControls();
+        expect(spy).calledWith('x-dl8-to-iframe-disable-interface');
+        impl.showControls();
+        expect(spy).calledWith('x-dl8-to-iframe-enable-interface');
       });
     });
   }
diff --git a/extensions/amp-delight-player/OWNERS b/extensions/amp-delight-player/OWNERS
index abaae248206c5..920966927c35e 100644
--- a/extensions/amp-delight-player/OWNERS
+++ b/extensions/amp-delight-player/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'xymw'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'xymw'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-delight-player/amp-delight-player.md b/extensions/amp-delight-player/amp-delight-player.md
index 6419cda86b778..28d5e04f5fd10 100644
--- a/extensions/amp-delight-player/amp-delight-player.md
+++ b/extensions/amp-delight-player/amp-delight-player.md
@@ -24,15 +24,13 @@ limitations under the License.
 
 # amp-delight-player
 
-The `amp-delight-player` element displays a cloud-hosted [Delight Player](https://delight-vr.com/).
+## Usage
 
-## Example
+The `amp-delight-player` element displays a cloud-hosted [Delight Player](https://delight-vr.com/).
 
 The `width` and `height` attributes determine the aspect ratio of the player embedded in responsive layouts.
 The `data-content-id` attribute is required to load the correct video.
 
-Example:
-
 ```html
 <amp-delight-player
   data-content-id="-123456789AbCdEfGhIj"
@@ -58,32 +56,48 @@ Example:
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-content-id (Required)</strong></td>
-    <td>The video's content ID.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>autoplay</strong></td>
-    <td>If this attribute is present, and the browser supports autoplay, the video will be automatically
-played as soon as it becomes visible. There are some conditions that the component needs to meet
-to be played, <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-video-interface.md#autoplay">which are outlined in the Video in AMP spec</a>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>dock</strong></td>
-    <td><strong>Requires <code>amp-video-docking</code> extension.</strong> If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
-    For more details, see <a href="https://amp.dev/documentation/components/amp-video-docking">documentation on the docking extension itself.</a></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+### `data-content-id`
+
+The video's content ID.
+
+### `dock`
+
+**Requires `amp-video-docking` extension.** If this attribute is present and the
+video is playing manually, the video will be "minimized" and fixed to a corner
+or an element when the user scrolls out of the video component's visual area.
+
+For more details, see [documentation on the docking extension itself](https://amp.dev/documentation/components/amp-video-docking).
+
+### `autoplay` (optional)
+
+If this attribute is present, and the browser supports autoplay, the video will
+be automatically played as soon as it becomes visible. There are some conditions
+that the component needs to meet to be played,
+[which are outlined in the Video in AMP spec](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-video-interface.md#autoplay).
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
 ## Actions
 
-`amp-delight-player` exposes four self-explanatory actions: `play`, `pause`, `mute` and `unmute`.
+### `play`
+
+Plays the video.
+
+### `pause`
+
+Pauses the video.
+
+### `mute`
+
+Mutes the video.
+
+### `unmute`
+
+Unmutes the video.
 
 ## Validation
 
-See [amp-delight-player rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-delight-player/validator-amp-delight-player.protoascii) in the AMP validator specification.
+See [amp-delight-player rules](validator-amp-delight-player.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-dynamic-css-classes/0.1/test/test-dynamic-classes.js b/extensions/amp-dynamic-css-classes/0.1/test/test-dynamic-classes.js
index 51fae7c8db596..e003fec7b40fe 100644
--- a/extensions/amp-dynamic-css-classes/0.1/test/test-dynamic-classes.js
+++ b/extensions/amp-dynamic-css-classes/0.1/test/test-dynamic-classes.js
@@ -16,7 +16,7 @@
 
 import {referrers_} from '../amp-dynamic-css-classes';
 
-describe('amp-dynamic-css-classes', () => {
+describes.sandboxed('amp-dynamic-css-classes', {}, () => {
   describe('referrers_', () => {
     describe('when referrer is TLD-less', () => {
       const referrer = 'localhost';
diff --git a/extensions/amp-dynamic-css-classes/OWNERS b/extensions/amp-dynamic-css-classes/OWNERS
index ee946fd4aa916..d786599f0c75c 100644
--- a/extensions/amp-dynamic-css-classes/OWNERS
+++ b/extensions/amp-dynamic-css-classes/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-dynamic-css-classes/amp-dynamic-css-classes.md b/extensions/amp-dynamic-css-classes/amp-dynamic-css-classes.md
index 98a70e96cae19..fac1fbe7219d0 100644
--- a/extensions/amp-dynamic-css-classes/amp-dynamic-css-classes.md
+++ b/extensions/amp-dynamic-css-classes/amp-dynamic-css-classes.md
@@ -38,10 +38,10 @@ classes: `amp-referrer-www-google-com`, `amp-referrer-google-com`, and
 
 We currently have a few special cases:
 
-- When the user came through a Twitter `t.co` short link, we instead use
-  `twitter.com` as the referrer.
-- When the string "Pinterest" is present in the User Agent string and
-  there is no referrer, we use `www.pinterest.com` as the referrer.
+-   When the user came through a Twitter `t.co` short link, we instead use
+    `twitter.com` as the referrer.
+-   When the string "Pinterest" is present in the User Agent string and
+    there is no referrer, we use `www.pinterest.com` as the referrer.
 
 **amp-viewer**
 
diff --git a/extensions/amp-embedly-card/0.1/amp-embedly-card-impl.js b/extensions/amp-embedly-card/0.1/amp-embedly-card-impl.js
index b42e29541e592..fb96b924d1d85 100644
--- a/extensions/amp-embedly-card/0.1/amp-embedly-card-impl.js
+++ b/extensions/amp-embedly-card/0.1/amp-embedly-card-impl.js
@@ -75,6 +75,7 @@ export class AmpEmbedlyCard extends AMP.BaseElement {
     }
 
     const iframe = getIframe(this.win, this.element, 'embedly');
+    iframe.title = this.element.title || 'Embedly card';
 
     const opt_is3P = true;
     listenFor(
diff --git a/extensions/amp-embedly-card/0.1/test/test-amp-embedly-card.js b/extensions/amp-embedly-card/0.1/test/test-amp-embedly-card.js
index 20d0b6c065d97..e251c24523bb1 100644
--- a/extensions/amp-embedly-card/0.1/test/test-amp-embedly-card.js
+++ b/extensions/amp-embedly-card/0.1/test/test-amp-embedly-card.js
@@ -25,16 +25,14 @@ describes.realWin(
   },
   (env) => {
     let win;
-    let element;
 
     beforeEach(() => {
       win = env.win;
-      element = win.document.createElement('amp-embedly-card');
-      win.document.body.appendChild(element);
     });
 
     function createEmbedlyCard(dataUrl) {
       const element = win.document.createElement('amp-embedly-card');
+      element.setAttribute('layout', 'nodisplay');
 
       element.setAttribute('data-url', dataUrl);
       element.setAttribute('height', '100');
@@ -42,7 +40,7 @@ describes.realWin(
       win.document.body.appendChild(element);
 
       return element
-        .build()
+        .buildInternal()
         .then(() => element.layoutCallback())
         .then(() => element);
     }
@@ -66,21 +64,17 @@ describes.realWin(
       );
     });
 
-    it('removes iframe after unlayoutCallback', () => {
-      return createEmbedlyCard('https://twitter.com/AMPhtml').then(
-        (element) => {
-          const iframe = element.querySelector('iframe');
-
-          expect(iframe).to.not.be.null;
+    it('removes iframe after unlayoutCallback', async () => {
+      const element = await createEmbedlyCard('https://twitter.com/AMPhtml');
+      const instance = await element.getImpl();
 
-          const instance = element.implementation_;
+      const iframe = element.querySelector('iframe');
+      expect(iframe).to.not.be.null;
 
-          instance.unlayoutCallback();
+      instance.unlayoutCallback();
 
-          expect(element.querySelector('iframe')).to.be.null;
-          expect(instance.iframe_).to.be.null;
-        }
-      );
+      expect(element.querySelector('iframe')).to.be.null;
+      expect(instance.iframe_).to.be.null;
     });
   }
 );
diff --git a/extensions/amp-embedly-card/0.1/test/validator-amp-embedly-card.out b/extensions/amp-embedly-card/0.1/test/validator-amp-embedly-card.out
index 1dc1128937ead..1644293a47b69 100644
--- a/extensions/amp-embedly-card/0.1/test/validator-amp-embedly-card.out
+++ b/extensions/amp-embedly-card/0.1/test/validator-amp-embedly-card.out
@@ -52,7 +52,7 @@ amp-embedly-card/0.1/test/validator-amp-embedly-card.html:37:2 The specified lay
 |    <!-- Invalid: amp-embedly-card missing width -->
 |    <amp-embedly-card
 >>   ^~~~~~~~~
-amp-embedly-card/0.1/test/validator-amp-embedly-card.html:40:2 The mandatory attribute 'width' is missing in tag 'amp-embedly-card'. (see https://amp.dev/documentation/components/amp-embedly-card)
+amp-embedly-card/0.1/test/validator-amp-embedly-card.html:40:2 The mandatory attribute 'width' is missing in tag 'amp-embedly-card'. (see https://amp.dev/documentation/components/amp-embedly-card/)
 |            data-url="https://www.youtube.com/watch?v=lBTCB7yLs8Y"
 |            layout="responsive"
 |            height="80"
@@ -61,7 +61,7 @@ amp-embedly-card/0.1/test/validator-amp-embedly-card.html:40:2 The mandatory att
 |    <!-- Invalid: amp-embedly-card missing height -->
 |    <amp-embedly-card
 >>   ^~~~~~~~~
-amp-embedly-card/0.1/test/validator-amp-embedly-card.html:47:2 The mandatory attribute 'height' is missing in tag 'amp-embedly-card'. (see https://amp.dev/documentation/components/amp-embedly-card)
+amp-embedly-card/0.1/test/validator-amp-embedly-card.html:47:2 The mandatory attribute 'height' is missing in tag 'amp-embedly-card'. (see https://amp.dev/documentation/components/amp-embedly-card/)
 |            data-url="https://www.youtube.com/watch?v=lBTCB7yLs8Y"
 |            layout="responsive"
 |            width="150"
@@ -70,7 +70,7 @@ amp-embedly-card/0.1/test/validator-amp-embedly-card.html:47:2 The mandatory att
 |    <!-- Invalid: amp-embedly-card forbidden protocol http -->
 |    <amp-embedly-card
 >>   ^~~~~~~~~
-amp-embedly-card/0.1/test/validator-amp-embedly-card.html:54:2 Invalid URL protocol 'http:' for attribute 'data-url' in tag 'amp-embedly-card'. (see https://amp.dev/documentation/components/amp-embedly-card)
+amp-embedly-card/0.1/test/validator-amp-embedly-card.html:54:2 Invalid URL protocol 'http:' for attribute 'data-url' in tag 'amp-embedly-card'. (see https://amp.dev/documentation/components/amp-embedly-card/)
 |            data-url="http://www.youtube.com/watch?v=lBTCB7yLs8Y"
 |            layout="responsive"
 |            width="150"
@@ -80,7 +80,7 @@ amp-embedly-card/0.1/test/validator-amp-embedly-card.html:54:2 Invalid URL proto
 |    <!-- Invalid: amp-embedly-card relative url -->
 |    <amp-embedly-card
 >>   ^~~~~~~~~
-amp-embedly-card/0.1/test/validator-amp-embedly-card.html:62:2 The relative URL '/watch?v=lBTCB7yLs8Y' for attribute 'data-url' in tag 'amp-embedly-card' is disallowed. (see https://amp.dev/documentation/components/amp-embedly-card)
+amp-embedly-card/0.1/test/validator-amp-embedly-card.html:62:2 The relative URL '/watch?v=lBTCB7yLs8Y' for attribute 'data-url' in tag 'amp-embedly-card' is disallowed. (see https://amp.dev/documentation/components/amp-embedly-card/)
 |            data-url="/watch?v=lBTCB7yLs8Y"
 |            layout="responsive"
 |            width="150"
@@ -98,7 +98,7 @@ amp-embedly-card/0.1/test/validator-amp-embedly-card.html:62:2 The relative URL
 |    <!-- Invalid: amp-embedly-card invalid layout -->
 |    <amp-embedly-card
 >>   ^~~~~~~~~
-amp-embedly-card/0.1/test/validator-amp-embedly-card.html:78:2 The specified layout 'NODISPLAY' is not supported by tag 'amp-embedly-card'. (see https://amp.dev/documentation/components/amp-embedly-card)
+amp-embedly-card/0.1/test/validator-amp-embedly-card.html:78:2 The specified layout 'NODISPLAY' is not supported by tag 'amp-embedly-card'. (see https://amp.dev/documentation/components/amp-embedly-card/)
 |            data-url="https://www.youtube.com/watch?v=lBTCB7yLs8Y"
 |            layout="nodisplay"
 |            width="100"
diff --git a/extensions/amp-embedly-card/OWNERS b/extensions/amp-embedly-card/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-embedly-card/OWNERS
+++ b/extensions/amp-embedly-card/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-embedly-card/amp-embedly-card.md b/extensions/amp-embedly-card/amp-embedly-card.md
index 5b53a76050d90..60b6750012c81 100644
--- a/extensions/amp-embedly-card/amp-embedly-card.md
+++ b/extensions/amp-embedly-card/amp-embedly-card.md
@@ -24,10 +24,10 @@ limitations under the License.
 
 # amp-embedly-card
 
-## Behavior
+## Usage
 
 The `amp-embedly-card` component provides you with responsive and shareable embeds to drive the reach of your websites,
-blog posts, and articles from any URL using <a href="http://docs.embed.ly/docs/cards">Embedly cards</a>.
+blog posts, and articles from any URL using [Embedly cards](http://docs.embed.ly/docs/cards).
 
 Cards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.
 
@@ -67,57 +67,66 @@ Within your AMP page, you can include one or multiple `amp-embedly-card` compone
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-url (required)</strong></td>
-    <td>The URL to retrieve embedding information.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-card-via</strong></td>
-    <td>Specifies the via content in the card. This is a a great way to do attribution. This is an optional attribute.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-card-theme</strong></td>
-    <td>Allows settings the <code>dark</code> theme which changes the background color of the main card container. Use <code>dark</code> to set this theme. For dark backgrounds it's better to specify this. The default is <code>light</code>, which sets no background color of the main card container.</td>
-  </tr>
-  <tr>
-     <td width="40%"><strong>data-card-embed</strong></td>
-     <td>The URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.
-</td>
-   </tr>
-   <tr>
-     <td width="40%"><strong>data-card-image</strong></td>
-     <td>The URL to an image. Specifies which image to use in article cards when <code>data-url</code> points to an article.
-Not all image URLs are supported, if the image is not loaded, try a different image or domain.</td>
-   </tr>
-   <tr>
-     <td width="40%"><strong>data-card-controls</strong></td>
-     <td><p>Enables share icons.</p>
-<ul>
-  <li>`0`: Disable share icons.</li>
-  <li>`1`: Enable share icons</li>
-</ul>
-<p>The default is <code>1</code>.</p></td>
-   </tr>
-   <tr>
-      <td width="40%"><strong>data-card-align</strong></td>
-      <td>Aligns the card. The possible values are <code>left</code>, <code>center</code> and <code>right</code>. The default value is <code>center</code>.</td>
-    </tr>
-    <tr>
-      <td width="40%"><strong>data-card-recommend</strong></td>
-      <td><p>When recommendations are supported, it disables embedly recommendations on video and rich cards.<br>These are recommendations created by embedly.</p>
-<ul>
-  <li>`0`: Disables embedly recommendations.</li>
-  <li>`1`: Enables embedly recommendations.</li>
-</ul>
-<p>The default value is <code>1</code>.</p></td>
-    </tr>
-    <tr>
-      <td width="40%"><strong>common attributes</strong></td>
-      <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-    </tr>
-</table>
+### `data-url`
+
+The URL to retrieve embedding information.
+
+### `data-card-embed`
+
+The URL to a video or rich media. Use with static embeds like articles, instead
+of using the static page content in the card, the card will embed the video or
+rich media.
+
+### `data-card-image`
+
+The URL to an image. Specifies which image to use in article cards when
+`data-url` points to an article. Not all image URLs are supported, if the image
+is not loaded, try a different image or domain.
+
+### `data-card-controls`
+
+Enables share icons.
+
+-   `0`: Disable share icons.
+-   `1`: Enable share icons
+
+The default is `1`.
+
+### `data-card-align`
+
+Aligns the card. The possible values are `left`, `center` and `right`. The
+default value is `center`.
+
+### `data-card-recommend`
+
+When recommendations are supported, it disables embedly recommendations on video
+and rich cards. These are recommendations created by embedly.
+
+-   `0`: Disables embedly recommendations.
+-   `1`: Enables embedly recommendations.
+
+The default value is `1`.
+
+### `data-card-via` (optional)
+
+Specifies the via content in the card. This is a great way to do attribution.
+
+### `data-card-theme` (optional)
+
+Allows settings the `dark` theme which changes the background color of the main
+card container. Use `dark` to set this theme. For dark backgrounds it's better
+to specify this. The default is `light`, which sets no background color of the
+main card container.
+
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Embedly card"`.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
 ## Validation
 
-See [amp-embedly-card rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-embedly-card/validator-amp-embedly-card.protoascii) in the AMP validator specification.
+See [amp-embedly-card rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-embedly-card/validator-amp-embedly-card.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-embedly-card/validator-amp-embedly-card.protoascii b/extensions/amp-embedly-card/validator-amp-embedly-card.protoascii
index 5cf25c484f331..2d7abb6f4bed2 100644
--- a/extensions/amp-embedly-card/validator-amp-embedly-card.protoascii
+++ b/extensions/amp-embedly-card/validator-amp-embedly-card.protoascii
@@ -38,7 +38,7 @@ tags: {  # <amp-embedly-card>
     }
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-embedly-card"
+  spec_url: "https://amp.dev/documentation/components/amp-embedly-card/"
   amp_layout: {
     supported_layouts: RESPONSIVE
   }
diff --git a/extensions/amp-experiment/0.1/amp-experiment.js b/extensions/amp-experiment/0.1/amp-experiment.js
index 375a625ce043c..7df701e51b2f8 100644
--- a/extensions/amp-experiment/0.1/amp-experiment.js
+++ b/extensions/amp-experiment/0.1/amp-experiment.js
@@ -18,19 +18,14 @@ import {Layout} from '../../../src/layout';
 import {Variants, allocateVariant} from './variant';
 import {dev, devAssert, userAssert} from '../../../src/log';
 import {getServicePromiseForDoc} from '../../../src/service';
-import {parseJson} from '../../../src/json';
+import {parseJson} from '../../../src/core/types/object/json';
 
 const TAG = 'amp-experiment';
 const ATTR_PREFIX = 'amp-x-';
 
 export class AmpExperiment extends AMP.BaseElement {
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout == Layout.NODISPLAY || layout == Layout.CONTAINER;
-  }
-
-  /** @override */
-  prerenderAllowed() {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
     /*
      * Prerender is allowed because the client_id is only used to calculate
      * the variant bucket.
@@ -40,6 +35,11 @@ export class AmpExperiment extends AMP.BaseElement {
     return true;
   }
 
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout == Layout.NODISPLAY || layout == Layout.CONTAINER;
+  }
+
   /** @override */
   isBuildRenderBlocking() {
     // variantService is render blocking
diff --git a/extensions/amp-experiment/0.1/test/test-amp-experiment.js b/extensions/amp-experiment/0.1/test/test-amp-experiment.js
index d73dcaf90419f..c13746719f98e 100644
--- a/extensions/amp-experiment/0.1/test/test-amp-experiment.js
+++ b/extensions/amp-experiment/0.1/test/test-amp-experiment.js
@@ -17,7 +17,7 @@
 import * as variant from '../variant';
 import {AmpExperiment} from '../amp-experiment';
 import {Services} from '../../../../src/services';
-import {hasOwn} from '../../../../src/utils/object';
+import {hasOwn} from '../../../../src/core/types/object';
 
 describes.realWin(
   'amp-experiment',
diff --git a/extensions/amp-experiment/0.1/test/validator-amp-experiment.html b/extensions/amp-experiment/0.1/test/validator-amp-experiment.html
index d65bc23369137..ef87ea7d7c4cb 100644
--- a/extensions/amp-experiment/0.1/test/validator-amp-experiment.html
+++ b/extensions/amp-experiment/0.1/test/validator-amp-experiment.html
@@ -24,7 +24,6 @@
     <title>Experiment examples</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
      <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/extensions/amp-experiment/0.1/test/validator-amp-experiment.out b/extensions/amp-experiment/0.1/test/validator-amp-experiment.out
index 93af2b5c64346..8e0a48c09b4db 100644
--- a/extensions/amp-experiment/0.1/test/validator-amp-experiment.out
+++ b/extensions/amp-experiment/0.1/test/validator-amp-experiment.out
@@ -25,7 +25,6 @@ FAIL
 |      <title>Experiment examples</title>
 |      <link rel="canonical" href="amps.html">
 |      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|      <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |      <script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
 |       <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>
 |      <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -47,10 +46,10 @@ FAIL
 |
 |  <amp-experiment>
 >> ^~~~~~~~~
-amp-experiment/0.1/test/validator-amp-experiment.html:47:0 The tag 'amp-experiment' appears more than once in the document. (see https://amp.dev/documentation/components/amp-experiment)
+amp-experiment/0.1/test/validator-amp-experiment.html:46:0 The tag 'amp-experiment' appears more than once in the document. (see https://amp.dev/documentation/components/amp-experiment/)
 |      <script type="invalidtype"></script>
 >>     ^~~~~~~~~
-amp-experiment/0.1/test/validator-amp-experiment.html:48:4 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp-experiment/0.1/test/validator-amp-experiment.html:47:4 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |  </amp-experiment>
 |  </body>
 |  </html>
\ No newline at end of file
diff --git a/extensions/amp-experiment/0.1/variant.js b/extensions/amp-experiment/0.1/variant.js
index 935b773b892a8..adcd1a128f0dd 100644
--- a/extensions/amp-experiment/0.1/variant.js
+++ b/extensions/amp-experiment/0.1/variant.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Services} from '../../../src/services';
 import {dev, userAssert} from '../../../src/log';
-import {hasOwn} from '../../../src/utils/object';
-import {isObject} from '../../../src/types';
+import {hasOwn} from '../../../src/core/types/object';
+import {isObject} from '../../../src/core/types';
 
 const ATTR_PREFIX = 'amp-x-';
 const nameValidator = /^[\w-]+$/;
diff --git a/extensions/amp-experiment/1.0/amp-experiment.js b/extensions/amp-experiment/1.0/amp-experiment.js
index 48abc16797b7c..7c5c33a06f053 100644
--- a/extensions/amp-experiment/1.0/amp-experiment.js
+++ b/extensions/amp-experiment/1.0/amp-experiment.js
@@ -19,25 +19,20 @@ import {Layout} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {applyExperimentToVariant} from './apply-experiment';
 import {devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getServicePromiseForDoc} from '../../../src/service';
 import {
   installOriginExperimentsForDoc,
   originExperimentsForDoc,
 } from '../../../src/service/origin-experiments-impl';
 import {isExperimentOn} from '../../../src/experiments';
-import {parseJson} from '../../../src/json';
+import {parseJson} from '../../../src/core/types/object/json';
 
 const TAG = 'amp-experiment';
 
 export class AmpExperiment extends AMP.BaseElement {
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout == Layout.NODISPLAY || layout == Layout.CONTAINER;
-  }
-
-  /** @override */
-  prerenderAllowed() {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
     /*
      * Prerender is allowed because the client_id is only used to calculate
      * the variant bucket.
@@ -47,6 +42,11 @@ export class AmpExperiment extends AMP.BaseElement {
     return true;
   }
 
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout == Layout.NODISPLAY || layout == Layout.CONTAINER;
+  }
+
   /** @override */
   isBuildRenderBlocking() {
     // variantService is render blocking
@@ -77,9 +77,7 @@ export class AmpExperiment extends AMP.BaseElement {
             Promise.resolve(this.getEmptyExperimentToVariant_(config))
           );
 
-          return Promise.reject(
-            'Experiment amp-experiment-1.0 is not enabled.'
-          );
+          return;
         }
 
         const ampdoc = this.getAmpDoc();
diff --git a/extensions/amp-experiment/1.0/apply-experiment.js b/extensions/amp-experiment/1.0/apply-experiment.js
index 39b60c29cff65..66726e56d4d67 100644
--- a/extensions/amp-experiment/1.0/apply-experiment.js
+++ b/extensions/amp-experiment/1.0/apply-experiment.js
@@ -147,7 +147,7 @@ export function createMutationsFromMutationRecordsAndElements(
 ) {
   const mutations = [];
   mutationRecordsAndElements.forEach((mutationRecordAndElements) => {
-    const {mutationRecord, elements} = mutationRecordAndElements;
+    const {elements, mutationRecord} = mutationRecordAndElements;
 
     let mutation = undefined;
     if (mutationRecord['type'] === 'characterData') {
diff --git a/extensions/amp-experiment/1.0/mutation-record.js b/extensions/amp-experiment/1.0/mutation-record.js
index cda6950ff033d..28a716ecbdf2e 100644
--- a/extensions/amp-experiment/1.0/mutation-record.js
+++ b/extensions/amp-experiment/1.0/mutation-record.js
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import {isObject, toArray} from '../../../src/types';
+import {isObject} from '../../../src/core/types';
+import {toArray} from '../../../src/core/types/array';
 import {userAssert} from '../../../src/log';
 
 /**
diff --git a/extensions/amp-experiment/1.0/mutation/attribute-mutation-default-style.js b/extensions/amp-experiment/1.0/mutation/attribute-mutation-default-style.js
index 646f9487ffd57..0171491a9cb14 100644
--- a/extensions/amp-experiment/1.0/mutation/attribute-mutation-default-style.js
+++ b/extensions/amp-experiment/1.0/mutation/attribute-mutation-default-style.js
@@ -17,7 +17,7 @@
 import {assertAttributeMutationFormat} from './mutation';
 import {assertDoesNotContainDisplay, setStyles} from '../../../../src/style';
 import {dev, user} from '../../../../src/log';
-import {dict, hasOwn} from '../../../../src/utils/object';
+import {dict, hasOwn} from '../../../../src/core/types/object';
 import {isAmpElement} from '../../../../src/dom';
 
 /** @const {RegExp} */
diff --git a/extensions/amp-experiment/1.0/mutation/attribute-mutation-default-url.js b/extensions/amp-experiment/1.0/mutation/attribute-mutation-default-url.js
index 29e38fd334507..d4d2e537c53c8 100644
--- a/extensions/amp-experiment/1.0/mutation/attribute-mutation-default-url.js
+++ b/extensions/amp-experiment/1.0/mutation/attribute-mutation-default-url.js
@@ -16,7 +16,7 @@
 
 import {assertAttributeMutationFormat} from './mutation';
 import {assertHttpsUrl} from '../../../../src/url';
-import {map} from '../../../../src/utils/object';
+import {map} from '../../../../src/core/types/object';
 import {user} from '../../../../src/log';
 
 const TAG = 'amp-experiment attribute-mutation-default-url';
diff --git a/extensions/amp-experiment/1.0/test/test-amp-experiment.js b/extensions/amp-experiment/1.0/test/test-amp-experiment.js
index b304467f11208..74b43cfdc4275 100644
--- a/extensions/amp-experiment/1.0/test/test-amp-experiment.js
+++ b/extensions/amp-experiment/1.0/test/test-amp-experiment.js
@@ -104,17 +104,6 @@ describes.realWin(
       return stub;
     }
 
-    it('Rejects because experiment is not enabled', () => {
-      toggleExperiment(win, 'amp-experiment-1.0', false);
-
-      expectAsyncConsoleError(/Experiment/);
-      addConfigElement('script');
-      doc.body.appendChild(el);
-      return experiment
-        .buildCallback()
-        .should.eventually.be.rejectedWith(/Experiment/);
-    });
-
     it('should not throw on valid config', () => {
       expect(() => {
         addConfigElement('script');
diff --git a/extensions/amp-experiment/1.0/test/test-attribute-mutation.js b/extensions/amp-experiment/1.0/test/test-attribute-mutation.js
index 47d3875766d76..76581a176fc5d 100644
--- a/extensions/amp-experiment/1.0/test/test-attribute-mutation.js
+++ b/extensions/amp-experiment/1.0/test/test-attribute-mutation.js
@@ -87,16 +87,14 @@ describes.realWin(
     describe('parseAndValidate', () => {
       describe('default class', () => {
         it('should allow valid mutations', () => {
-          const attributeMutation = getAttributeMutationDefaultClass(
-            'my-class'
-          );
+          const attributeMutation =
+            getAttributeMutationDefaultClass('my-class');
           expect(attributeMutation.parseAndValidate()).to.be.equal(true);
         });
 
         it('should not allow i-amphtml-*', () => {
-          const attributeMutation = getAttributeMutationDefaultClass(
-            'i-amphtml-my-class'
-          );
+          const attributeMutation =
+            getAttributeMutationDefaultClass('i-amphtml-my-class');
           expect(attributeMutation.parseAndValidate()).to.be.equal(false);
         });
       });
@@ -110,16 +108,14 @@ describes.realWin(
           expect(attributeMutation.parseAndValidate()).to.equal(false);
 
           // invalid style attribute value "<"
-          attributeMutation = getAttributeMutationDefaultStyle(
-            'color: <#000000;'
-          );
+          attributeMutation =
+            getAttributeMutationDefaultStyle('color: <#000000;');
           expect(attributeMutation.parseAndValidate()).to.equal(false);
         });
 
         it('NOT allowed style mutations', () => {
-          const attributeMutation = getAttributeMutationDefaultStyle(
-            'random: abc'
-          );
+          const attributeMutation =
+            getAttributeMutationDefaultStyle('random: abc');
           expect(attributeMutation.parseAndValidate()).to.equal(false);
         });
 
@@ -137,9 +133,8 @@ describes.realWin(
           );
           expect(attributeMutation.parseAndValidate()).to.equal(false);
 
-          attributeMutation = getAttributeMutationDefaultStyle(
-            'background-color: '
-          );
+          attributeMutation =
+            getAttributeMutationDefaultStyle('background-color: ');
           expect(attributeMutation.parseAndValidate()).to.equal(true);
 
           attributeMutation = getAttributeMutationDefaultStyle(
@@ -171,9 +166,8 @@ describes.realWin(
         });
 
         it('visibility mutations', () => {
-          let attributeMutation = getAttributeMutationDefaultStyle(
-            'visibility: hidden'
-          );
+          let attributeMutation =
+            getAttributeMutationDefaultStyle('visibility: hidden');
           expect(attributeMutation.parseAndValidate()).to.equal(true);
 
           attributeMutation = getAttributeMutationDefaultStyle(
@@ -191,9 +185,8 @@ describes.realWin(
         });
 
         it('display mutations', () => {
-          let attributeMutation = getAttributeMutationDefaultStyle(
-            'display: none'
-          );
+          let attributeMutation =
+            getAttributeMutationDefaultStyle('display: none');
           expect(attributeMutation.parseAndValidate()).to.equal(true);
 
           attributeMutation = getAttributeMutationDefaultStyle(
@@ -203,14 +196,12 @@ describes.realWin(
         });
 
         it('position mutations', () => {
-          let attributeMutation = getAttributeMutationDefaultStyle(
-            'position: absolute'
-          );
+          let attributeMutation =
+            getAttributeMutationDefaultStyle('position: absolute');
           expect(attributeMutation.parseAndValidate()).to.equal(true);
 
-          attributeMutation = getAttributeMutationDefaultStyle(
-            'position: fixed'
-          );
+          attributeMutation =
+            getAttributeMutationDefaultStyle('position: fixed');
           expect(attributeMutation.parseAndValidate()).to.equal(false);
         });
 
@@ -231,30 +222,26 @@ describes.realWin(
       describe('default url', () => {
         it('should allow valid mutations', () => {
           elements = [document.createElement('a')];
-          const attributeMutation = getAttributeMutationDefaultUrl(
-            'https://amp.dev/'
-          );
+          const attributeMutation =
+            getAttributeMutationDefaultUrl('https://amp.dev/');
           expect(attributeMutation.parseAndValidate()).to.equal(true);
         });
 
         it('should not allow http:// mutations', () => {
-          const attributeMutation = getAttributeMutationDefaultUrl(
-            'http://amp.dev/'
-          );
+          const attributeMutation =
+            getAttributeMutationDefaultUrl('http://amp.dev/');
           expect(attributeMutation.parseAndValidate()).to.equal(false);
         });
 
         it('should not allow non HTTPS mutations', () => {
-          const attributeMutation = getAttributeMutationDefaultUrl(
-            'tel:555-555-5555'
-          );
+          const attributeMutation =
+            getAttributeMutationDefaultUrl('tel:555-555-5555');
           expect(attributeMutation.parseAndValidate()).to.equal(false);
         });
 
         it('should not allow unsupported element mutations', () => {
-          const attributeMutation = getAttributeMutationDefaultUrl(
-            'tel:555-555-5555'
-          );
+          const attributeMutation =
+            getAttributeMutationDefaultUrl('tel:555-555-5555');
           attributeMutation.elements = [doc.createElement('div')];
           expect(attributeMutation.parseAndValidate()).to.equal(false);
         });
@@ -317,9 +304,8 @@ describes.realWin(
         element1.mutatedAttributesCallback = () => {
           mutatedAttributesCallbackSpy();
         };
-        const attributeMutation = getAttributeMutationDefaultUrl(
-          'https://amp.dev/'
-        );
+        const attributeMutation =
+          getAttributeMutationDefaultUrl('https://amp.dev/');
         const {attributeName, value} = attributeMutation.mutationRecord_;
         attributeMutation.parseAndValidate();
         attributeMutation.mutate();
diff --git a/extensions/amp-experiment/1.0/test/validator-amp-experiment.html b/extensions/amp-experiment/1.0/test/validator-amp-experiment.html
index b0f1eab5acfb1..2f16d68a8e54d 100644
--- a/extensions/amp-experiment/1.0/test/validator-amp-experiment.html
+++ b/extensions/amp-experiment/1.0/test/validator-amp-experiment.html
@@ -24,7 +24,6 @@
     <title>Experiment examples</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-1.0.js"></script>
      <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/extensions/amp-experiment/1.0/test/validator-amp-experiment.out b/extensions/amp-experiment/1.0/test/validator-amp-experiment.out
index a34d13fa06bd8..ad7f147b86df6 100644
--- a/extensions/amp-experiment/1.0/test/validator-amp-experiment.out
+++ b/extensions/amp-experiment/1.0/test/validator-amp-experiment.out
@@ -25,7 +25,6 @@ FAIL
 |      <title>Experiment examples</title>
 |      <link rel="canonical" href="amps.html">
 |      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|      <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |      <script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-1.0.js"></script>
 |       <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>
 |      <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -67,19 +66,19 @@ FAIL
 |
 |  <amp-experiment>
 >> ^~~~~~~~~
-amp-experiment/1.0/test/validator-amp-experiment.html:67:0 The tag 'amp-experiment' appears more than once in the document. (see https://amp.dev/documentation/components/amp-experiment)
+amp-experiment/1.0/test/validator-amp-experiment.html:66:0 The tag 'amp-experiment' appears more than once in the document. (see https://amp.dev/documentation/components/amp-experiment/)
 |      <script type="invalidtype"></script>
 >>     ^~~~~~~~~
-amp-experiment/1.0/test/validator-amp-experiment.html:68:4 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp-experiment/1.0/test/validator-amp-experiment.html:67:4 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |  </amp-experiment>
 |
 |  <!-- Too large of JSON -->
 |  <amp-experiment>
 >> ^~~~~~~~~
-amp-experiment/1.0/test/validator-amp-experiment.html:72:0 The tag 'amp-experiment' appears more than once in the document. (see https://amp.dev/documentation/components/amp-experiment)
+amp-experiment/1.0/test/validator-amp-experiment.html:71:0 The tag 'amp-experiment' appears more than once in the document. (see https://amp.dev/documentation/components/amp-experiment/)
 |    <script type="application/json">
 >>   ^~~~~~~~~
-amp-experiment/1.0/test/validator-amp-experiment.html:73:2 The author stylesheet specified in tag 'amp-experiment extension .json script' is too long - document contains 15998 bytes whereas the limit is 15000 bytes. (see https://amp.dev/documentation/components/amp-experiment#configuration)
+amp-experiment/1.0/test/validator-amp-experiment.html:72:2 The inline script is 15998 bytes, which exceeds the limit of 15000 bytes. (see https://amp.dev/documentation/components/amp-experiment/#configuration)
 |      {"lorem ipsum": ["Skate ipsum dolor sit amet, Saran Wrap manual birdie berm nose-bump hurricane. Full-cab fastplant ollie deck pool Japan air. Durometer 900 slam bearings Saran Wrap 540. Animal Chin poseur freestyle ho-ho frigid air risers gnar bucket. Lip wheels hip bearings 270 Saran Wrap. Boned out slap maxwell Blind birdie wheels skate or die gnar bucket. Pump Bare Cover nose blunt chicken wing transition ho-ho darkslide. Hard Corps wall ride crailtap cab flip speed wobbles kickflip transfer. Switch downhill pool g-turn nose grab nose slide Video Days. Grind concave kick-nose frontside goofy footed skate key. Mini ramp rail slide Shawn Dutton slam bail bone air front foot impossible. ","Fast plant slam camel back hip. Risers wax full pipe crailtap. Bluntslide frigid air finger flip baseplate. Carve Vision Streetwear soul skate pop shove-it skate key. China Banks late hang ten ollie north transfer. Half-flip helipop powerslide steps. Lip hang ten camel back rail Jai Alai Banks. Crooked grind gnar bucket vert Caballerial nose slide. Pogo pressure flip dude Vision Streetwear kingpin. ","Downhill airwalk Chico Brenes kidney fakie out sponsored. Slob air Julien Stranger fakie deck rad soul skate. Sick Memory Screen bail airwalk pressure flip transition. Bluntslide Randy Ruiz fakie out stoked pool cab flip. Kidney stalefish coffin cess slide skate or die. Casper slide ollie hole gnar bucket Chris Haslam lip bank. Backside Primo slide frontside air dude Kevin Harris. Tailslide coper disaster ho-ho bigspin Jeremy Klein. Risers lip spine sketchy wheels. Shinner slob air bail switch hurricane. 50-50 frigid air judo air transfer Brian Brannon salad grind. Slide regular footed death box Shawn Dutton transfer grind. Judo air wheels late full pipe aerial. ","Axle fakie Jai Alai Banks Christ air speed wobbles pivot. Acid drop air pogo nosebone hip Vision. 540 berm coping pressure flip skater. Bonite hurricane melancholy frontside masonite bone air. Birdie berm ollie hole mongo layback Alternative Sports. Randy Ruiz pivot hard flip axle set ollie slap maxwell. Primo slide wall ride backside concave John Carbis full-cab. Yeah hip Venice chicken wing hand rail transition. Skate or die half-cab ledge frontside salad grind. Christ air lipslide hard flip kick-nose crail slide Vernon Courtland Johnson. ","Darkslide method air wax downhill. Backside Saran Wrap downhill Girl death box. Kevin Harris wax lien air kickturn. Grind bail face plant pressure flip China Banks. Griptape Jeff Phillips rad Primo slide kickturn. Ollie tuna-flip switch rip grip. No comply downhill kingpin slide. Handplant kidney darkslide hanger. Blunt pool Christ air half-flip. Sidewalk Surfer kingpin snake noseblunt slide alley oop. Axle full-cab chicken wing egg plant. Tail kickturn method air Gullwing frontside. ","Rock and roll bail body varial hip. Rails pump melancholy bluntslide Chris Haslam. Rad soul skate durometer powerslide. Powerslide betty vert helipop Jeff Phillips. Boned out coper nollie spine. Wax sick hurricane Jai Alai Banks fakie. Mute-air betty airwalk goofy footed. Kevin Harris stalefish Plan B body varial goofy footed. Fakie finger flip cess slide tail. Indy grab transition camel back impossible. ","Wall ride body varial Vans stoked bluntslide snake. Stoked heel flip switch Tracker Johnny Rad wall ride. Impossible flypaper opposite footed Kevin Harris late. Melancholy Z-Roller hang-up noseblunt slide nosepicker late. Pool carve 720 stalefish impossible. Nose grab rail coffin alley oop nose-bump. Birdie transfer lip Rune Glifberg mongo gnar bucket. Rocket air Tim May no comply pressure flip berm chicken wing. Hardware pop shove-it concave pool frontside air. Jeff Phillips slam Tracker grab sick helipop. Tailslide pop shove-it no comply wall ride 720 Jeremy Wray. ","Melancholy skater bigspin birdie snake. Opposite footed nosegrind Randy Ruiz masonite layback chicken wing. Chris Livingston flail rails handplant hanger spine. Roll-in kidney deck vert axle. Air disaster vert Tony Magnusson alley oop Christ air. Coper 50-50 casper slide hang ten gnar bucket. Sketchy half-flip Neal Hendrix bigspin grind stoked. Coper frontside disaster skate key Dudesblood ho-ho. Full pipe switch bruised heel rocket air no comply. Bail masonite 270 flail vert Skull Skates. Bluntslide speed wobbles half-flip flypaper vert Sidewalk Surfer. ","Sean Cliver downhill carve cess slide skate or die. Feeble nose bigspin casper slide. Half-flip hurricane chicken wing wheels. Slappy Geoff Rowley ollie skater regular footed. 1080 drop in quarter pipe stalefish. Hospital flip lipslide smith grind 1080. Ledge kidney helipop Tracker. Slap maxwell betty New Deal half-cab melancholy. Santa Cruz 50-50 air nose grab Saran Wrap. Jason Dill goofy footed air speed wobbles indy grab. Helipop regular footed stoked rad Alternative Sports. ","Rip grip durometer Chris Livingston crail grab invert tail. John Grigley pivot judo air sponsored heel flip helipop. Shinner 180 Mike Taylor gap lipslide hip. Flail The Wedge hanger Saran Wrap Primo slide rail slide. Melancholy risers fakie out Saran Wrap kickturn. Nosebone Skull and Sword roll-in axle set nosepicker locals. 540 Spike Jonze speed wobbles rail slide slappy switch. Griptape grind crail grab coping pogo. Bruised heel manual berm tail 180 Greg Evans. Tim May rail smith grind bone air hospital flip opposite footed. Kickflip crailtap skate key locals no comply. Varial coping front foot impossible Andy Howell slappy Saran Wrap. ","Nollie gnar bucket pogo powerslide darkslide Slimeballs hard flip. Betty nose slide tuna-flip Vernon Courtland Johnson 540 hurricane frontside air. Full pipe roll-in grind mute-air betty snake Jordan Richter. Salad grind kickturn Primo slide lipslide hang ten Saran Wrap. Darkslide varial kickflip layback g-turn downhill Matt Hensley. Baker late blunt smith grind grab fakie coping. Boneless bank aerial freestyle alley oop 720. Hip yeah airwalk camel back hardware 540. Disaster body varial Shiloh Greathouse frontside invert frontside air crailtap. Julien Stranger mute-air acid drop tuna-flip manual crooked grind crail grab. Bank nollie bluntslide helipop bail deck. ","Berm Wes Humpston noseblunt slide g-turn wax tailslide baseplate. Griptape pressure flip rail nose slide axle set frontside air. Aerial g-turn heel flip fast plant coping crooked grind. Pop shove-it nosepicker Elissa Steamer face plant blunt Tracker kickflip. Flail nosebone nose blunt 50-50 quarter pipe 540 Blind. Steps crail grab concave quarter pipe ollie Pantsman stoked. Tracker concave Daggers soul skate mini ramp boardslide full pipe. Lipslide finger flip Supersonic Skate Camp drop in chicken wing frontside sick. Regular footed vert air mute-air blunt rocket air. 900 frigid air rocket air handplant grind manual. Pivot vert hip bruised heel wheels finger flip. ","Frontside air finger flip indy grab nollie skate or die fakie. Roll-in alley oop skate or die wall ride boned out coper. Steps coping shinner ollie north rail skate key. 180 carve air backside camel back betty. Wall ride sketchy skater powerslide drop in rail slide. Dude ledge skate key casper slide durometer nosegrind. Rocket air grab 720 body varial backside air Hugh Bod Boyle. Hard flip Hugh Bod Boyle egg plant frontside air flypaper 270 flail. Cab flip hanger pool Billy Ruff airwalk hang ten front foot impossible. Sponsored tail Agent Orange shoveit lipslide rock and roll crooked grind. ","Judo air griptape wax stoked Alternative Sports layback. Ledge lipslide kingpin durometer opposite footed. Crailtap Streets on Fire slap maxwell frigid air egg plant griptape. Late hang-up impossible salad grind Jason Jesse stoked. Darkslide coffin feeble freestyle dude. G-turn Tim May slide bail steps nosebone. Rip grip 540 crailtap disaster goofy footed Ray Underhill. Tic-tac axle set 720 transfer Tracker. Darkslide griptape feeble tail Saran Wrap. Hardware Saran Wrap roll-in axle Geoff Rowley noseblunt slide. Bigspin cess slide hard flip pop shove-it pump. ","Poseur sick 270 heel flip bluntslide transition. Wax front foot impossible pogo Justin Regan soul skate 900 rad. Helipop camel back sponsored pop shove-it Paul Rodriguez 540 indy grab. Rip grip axle set griptape half-cab Donger ollie hole grab. Wheels Mike Carroll blunt 720 smith grind nosepicker deck. Crail slide kingpin smith grind ollie north pivot grind. Stoked tailslide 360 masonite bank soul skate Lance Mountain. Hard flip sponsored egg plant Greg Evans rip grip carve 720. Bearings half-flip manual gnarly switch grab. Transfer heel flip hurricane nose-bump tic-tac Saran Wrap. Boneless Wheels of FIre gnar bucket alley oop 360 bigspin indy grab. Rodney Mullen front foot impossible freestyle launch ramp hang-up hardware mongo. Late kidney Steve Olson airwalk nose-bump hanger full-cab. ","Hurricane frontside tailslide shinner kidney risers Video Days. Hang ten Wade Speyer snake boned out smith grind casper slide hanger. Ollie north axle Jason Wilson face plant darkslide durometer rock and roll. Opposite footed cab flip Saran Wrap 50-50 nosebone wheels. Kingpin g-turn risers trucks pogo ledge. Grab varial pivot tuna-flip boneless cab flip. Casper slide durometer steps cess slide ho-ho Matt Hensley body varial. Stoked boneless powerslide casper lipslide bail. Snake berm method air Wheels of FIre handplant crooked grind skater. ","Slap maxwell indy grab tic-tac roll-in front foot impossible powerslide JFA nosegrind. Pump drop in tail cess slide spine deck half-flip. Ledge hand rail skater shoveit bank bearings ollie. Hand rail kickturn pogo Shiloh Greathouse ollie north 50-50 wheels coper. Ron Allen nosebone wheels impossible birdie nosepicker bail nose. Rails pop shove-it Christ air ollie regular footed crail slide lipslide. Nose blunt slappy Saran Wrap fast plant ollie hole acid drop frontside Memory Screen. Hang ten method air casper slide fakie pogo late hand rail. Snake melancholy flail deck axle handplant 360. G-turn gnarly rad boned out 720 rocket air frigid air. Steps lipslide feeble aerial hospital flip tuna-flip half-cab. Griptape Saran Wrap crooked grind Japan air varial acid drop kidney Wallows. Smith grind hardware regular footed Andy Howell front foot impossible finger flip launch ramp hard flip. ","Mute-air front foot impossible street Mike Vallely helipop. Kevin Harris impossible Steve Rocco face plant carve. Saran Wrap Stacy Peralta hip no comply downhill. Powerslide Zorlac slappy crail slide baseplate. Kingpin rail slide rocket air Daewon Song grab. Santa Monica Airlines transition skater freestyle melancholy. Video Days half-flip 1080 baseplate rock and roll. Wheels hip half-flip g-turn. 1080 birdie steps handplant. ","Ollie north goofy footed pogo disaster. Feeble Kevin Jarvis trucks lipslide hurricane. Half-cab gap bail pogo. Bigspin smith grind kickturn Guy Mariano fast plant. 50-50 poseur 720 airwalk. Ollie north helipop wheels hospital flip. Blunt Rudy Johnson nosegrind varial invert. 50-50 backside skate or die casper Steve Steadham. Manual axle street bigspin. Coping g-turn sketchy stalefish Jerry Hsu. Nose bump sponsored rad feeble Girl. Smith grind nose Japan air skate or die. 360 tail transition yeah. ","Plan B tailslide pool nosebone crooked grind disaster fastplant. Masonite ollie north John Cardiel rip grip crailtap tail impossible. Durometer slap maxwell transition varial nose slide mini ramp. Launch ramp vert Thrasher hanger crooked grind transition nose blunt. Ollie pop shove-it carve fakie out varial shinner. Varial boned out casper half-cab 540 mini ramp. Tic-tac Chris Buchinsky speed wobbles shoveit nose blunt invert ollie. Hardware layback Kevin Harris bank crailtap Saran Wrap. Half-flip 50-50 hang-up 540 casper slide slappy. 360 smith grind 720 bank hospital flip crailtap. Bearings durometer Skull Skates bluntslide helipop darkslide coper. Full-cab fastplant ollie deck pool Japan air. Durometer 900 slam bearings Saran Wrap 540. Animal Chin poseur freestyle ho-ho frigid air risers gnar bucket. Lip wheels hip bearings 270 Saran Wrap. Boned out slap maxwell Blind birdie wheels skate or die gnar bucket. Pump Bare Cover nose blunt chicken wing transition ho-ho darkslide. Hard Corps wall ride crailtap cab flip speed wobbles kickflip transfer. Switch downhill pool g-turn nose grab nose slide Video Days. Grind concave kick-nose frontside goofy footed skate key. Mini ramp rail slide Shawn Dutton slam bail bone air front foot impossible. ","Fast plant slam camel back hip. Risers wax full pipe crailtap. Bluntslide frigid air finger flip baseplate. Carve Vision Streetwear soul skate pop shove-it skate key. China Banks late hang ten ollie north transfer. Half-flip helipop powerslide steps. Lip hang ten camel back rail Jai Alai Banks. Crooked grind gnar bucket vert Caballerial nose slide. Pogo pressure flip dude Vision Streetwear kingpin. ","Downhill airwalk Chico Brenes kidney fakie out sponsored. Slob air Julien Stranger fakie deck rad soul skate. Sick Memory Screen bail airwalk pressure flip transition. Bluntslide Randy Ruiz fakie out stoked pool cab flip. Kidney stalefish coffin cess slide skate or die. Casper slide ollie hole gnar bucket Chris Haslam lip bank. Backside Primo slide frontside air dude Kevin Harris. Tailslide coper disaster ho-ho bigspin Jeremy Klein. Risers lip spine sketchy wheels. Shinner slob air bail switch hurricane. 50-50 frigid air judo air transfer Brian Brannon salad grind. Slide regular footed death box Shawn Dutton transfer grind. Judo air wheels late full pipe aerial. ","Axle fakie Jai Alai Banks Christ air speed wobbles pivot. Acid drop air pogo nosebone hip Vision. 540 berm coping pressure flip skater. Bonite hurricane melancholy frontside masonite bone air. Birdie berm ollie hole mongo layback Alternative Sports. Randy Ruiz pivot hard flip axle set ollie slap maxwell. Primo slide wall ride backside concave John Carbis full-cab. Yeah hip Venice chicken wing hand rail transition. Skate or die half-cab ledge frontside salad grind. Christ air lipslide hard flip kick-nose crail slide Vernon Courtland Johnson. ","Darkslide method air wax downhill. Backside Saran Wrap downhill Girl death box. Kevin Harris wax lien air kickturn. Grind bail face plant pressure flip China Banks. Griptape Jeff Phillips rad Primo slide kickturn. Ollie tuna-flip switch rip grip. No comply downhill kingpin slide. Handplant kidney darkslide hanger. Blunt pool Christ air half-flip. Sidewalk Surfer kingpin snake noseblunt slide alley oop. Axle full-cab chicken wing egg plant. Tail kickturn method air Gullwing frontside. ","Rock and roll bail body varial hip. Rails pump melancholy bluntslide Chris Haslam. Rad soul skate durometer powerslide. Powerslide betty vert helipop Jeff Phillips. Boned out coper nollie spine. Wax sick hurricane Jai Alai Banks fakie. Mute-air betty airwalk goofy footed. Kevin Harris stalefish Plan B body varial goofy footed. Fakie finger flip cess slide tail. Indy grab transition camel back impossible. ","Wall ride body varial Vans stoked bluntslide snake. Stoked heel flip switch Tracker Johnny Rad wall ride. Impossible flypaper opposite footed Kevin Harris late. Melancholy Z-Roller hang-up noseblunt slide nosepicker late. Pool carve 720 stalefish impossible. Nose grab rail coffin alley oop nose-bump. Birdie transfer lip Rune Glifberg mongo gnar bucket. Rocket air Tim May no comply pressure flip berm chicken wing. Hardware pop shove-it concave pool frontside air. Jeff Phillips slam Tracker grab sick helipop. Tailslide pop shove-it no comply wall ride 720 Jeremy Wray. ","Melancholy skater bigspin birdie snake. Opposite footed nosegrind Randy Ruiz masonite layback chicken wing. Chris Livingston flail rails handplant hanger spine. Roll-in kidney deck vert axle. Air disaster vert Tony Magnusson alley oop Christ air. Coper 50-50 casper slide hang ten gnar bucket. Sketchy half-flip Neal Hendrix bigspin grind stoked. Coper frontside disaster skate key Dudesblood ho-ho."]}
 |    </script>
 |  </amp-experiment>
diff --git a/extensions/amp-experiment/1.0/variant.js b/extensions/amp-experiment/1.0/variant.js
index ba1ba52691afa..371dad358f521 100644
--- a/extensions/amp-experiment/1.0/variant.js
+++ b/extensions/amp-experiment/1.0/variant.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Services} from '../../../src/services';
 import {dev, userAssert} from '../../../src/log';
-import {hasOwn} from '../../../src/utils/object';
-import {isArray, isObject} from '../../../src/types';
+import {hasOwn} from '../../../src/core/types/object';
+import {isArray, isObject} from '../../../src/core/types';
 
 export const ATTR_PREFIX = 'amp-x-';
 const nameValidator = /^[\w-]+$/;
diff --git a/extensions/amp-experiment/OWNERS b/extensions/amp-experiment/OWNERS
index f3fc2a2f602ff..699fa98eaf1c0 100644
--- a/extensions/amp-experiment/OWNERS
+++ b/extensions/amp-experiment/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-experiment/amp-experiment.md b/extensions/amp-experiment/amp-experiment.md
index 56c96ee855ed3..f8161bbb986ed 100644
--- a/extensions/amp-experiment/amp-experiment.md
+++ b/extensions/amp-experiment/amp-experiment.md
@@ -4,7 +4,7 @@ formats:
   - websites
   - stories
 teaser:
-  text: Can be used to conduct user experience experiments on an AMP document.
+  text: Used to conduct user experience experiments on AMP pages.
 ---
 
 <!---
@@ -25,17 +25,17 @@ limitations under the License.
 
 # amp-experiment
 
-Conduct user experience experiments (such as A/B testing and multivariate testing) on an AMP document and collect corresponding data with `amp-pixel` or `amp-analytics`.
+## Usage
 
-## Behavior
+Use the `amp-experiment` component to conduct user experience experiments, such as [A/B testing and multivariate testing](https://en.wikipedia.org/wiki/A/B_testing), and collect corresponding data.
 
-The `<amp-experiment>` element is used to conduct user experience experiments (such as [A/B testing and multivariate testing](https://en.wikipedia.org/wiki/A/B_testing)) on an AMP document. It provides hooks to define customizable variants and allocates traffic to each of the variants based on the configuration. For each page view, the variant allocation is also exposed to `amp-pixel` and `amp-analytics` so that the necessary data can be collected to perform statistical comparison across variants.
+`<amp-experiment>` provides hooks to define customizable variants and allocates traffic to each of the variants based on the configuration. For each page view, the variant allocation is also exposed to `amp-pixel` and `amp-analytics` so that the necessary data can be collected to perform statistical comparison across variants.
 
-A user-sticky variant assignment is supported to provide a consistent user experience to the same client. This functionality relies upon AMP’s [Client ID](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#client-id) capability to provide random values that are consistent across page views. Please be aware that usage of this feature with this behavior might require updating your privacy policy, or obtaining end user consent in some jurisdictions. (If this is relevant for you, please see `consentNotificationId` below.)
+A user-sticky variant assignment is supported to provide a consistent user experience to the same client. This functionality relies upon AMP’s [Client ID](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md#client-id) capability to provide random values that are consistent across page views. Please be aware that usage of this feature with this behavior might require updating your privacy policy, or obtaining end user consent in some jurisdictions. (If this is relevant for you, please see `consentNotificationId` below.)
 
 Multiple experiments can be run on the same AMP document in parallel with their own sets of variants. In user sticky mode, the allocations are orthogonal among different experiments, meaning there will be no correlation between 2 variants (user groups) that are from different experiments.
 
-## Configuration
+### Configuration
 
 The configuration of the experiments is specified in a JSON object.
 
@@ -87,7 +87,7 @@ At top level, the JSON is a map of experiment configurations keyed by experiment
   <tr>
     <td><code>cidScope</code></td>
     <td>No, default=<code>amp-experiment</code>
-    </td><td>The <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#client-id">CID scope</a> for user sticky experiment. Only useful when you want to reuse an existing CID. This setting is only relevant when <code>sticky=true</code>.</td>
+    </td><td>The <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md#client-id">CID scope</a> for user sticky experiment. Only useful when you want to reuse an existing CID. This setting is only relevant when <code>sticky=true</code>.</td>
   </tr>
   <tr>
     <td><code>group</code></td>
@@ -98,27 +98,9 @@ At top level, the JSON is a map of experiment configurations keyed by experiment
 
 Characters used in the experiment name and variant name are restricted to `[a-z,A-Z,0-9,-,_].` `none` is a reserved keyword and cannot be used.
 
-## Style a variant
+## Analytics
 
-For each experiment, the allocated variant is exposed as attribute of the body element of the document.
-
-```html
-<body amp-x-aExperiment="treatment1" amp-x-bExperiment="treatment3"></body>
-```
-
-Notice that the experiment name is prefixed by `amp-x-` to avoid naming conflict. Experiments with no variant allocated are ignored.
-
-Use CSS attribute selector to style the document. For example, the code below hide a test banner for the `treatment1` group of experiment `aExperiment`:
-
-```css
-body[amp-x-aExperiment='treatment1'] .test-banner {
-  display: none;
-}
-```
-
-## Reporting
-
-Allocated variants are available as a [URL substitution variable](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md): `VARIANT(experiment)`
+Allocated variants are available as a [URL substitution variable](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md): `VARIANT(experiment)`
 
 ```html
 <amp-pixel
@@ -136,7 +118,7 @@ For example, the URL `https://example.com?variants=VARIANTS` expands to:
 
 `https://example.com?variants=aExperiment.treatmentA!bExperiment.treatmentB`
 
-## Override variant allocation
+### Override variant allocation
 
 An experiment can be forced to a variant via URL fragment. This is useful in development.
 
@@ -144,6 +126,26 @@ An experiment can be forced to a variant via URL fragment. This is useful in dev
 
 Notice the same `amp-x-` prefix used as in body attributes.
 
+##Styling
+
+### Style a variant
+
+For each experiment, the allocated variant is exposed as attribute of the body element of the document.
+
+```html
+<body amp-x-aExperiment="treatment1" amp-x-bExperiment="treatment3"></body>
+```
+
+Notice that the experiment name is prefixed by `amp-x-` to avoid naming conflict. Experiments with no variant allocated are ignored.
+
+Use CSS attribute selector to style the document. For example, the code below hide a test banner for the `treatment1` group of experiment `aExperiment`:
+
+```css
+body[amp-x-aExperiment='treatment1'] .test-banner {
+  display: none;
+}
+```
+
 ## Validation
 
-One AMP document can have at most one `amp-experiment` element. See [amp-experiment rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-experiment/validator-amp-experiment.protoascii) in the AMP validator specification.
+One AMP document can have at most one `amp-experiment` element. See [amp-experiment rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-experiment/validator-amp-experiment.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-experiment/validator-amp-experiment.protoascii b/extensions/amp-experiment/validator-amp-experiment.protoascii
index b23847d4df5f2..7db7c9c47ae88 100644
--- a/extensions/amp-experiment/validator-amp-experiment.protoascii
+++ b/extensions/amp-experiment/validator-amp-experiment.protoascii
@@ -17,7 +17,6 @@
 # Specific script tags for custom elements and runtime imports.
 tags: {  # amp-experiment
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-experiment"
@@ -31,7 +30,6 @@ tags: {  # amp-experiment
 }
 tags: {  # amp-experiment (json)
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   spec_name: "amp-experiment extension .json script"
   mandatory_parent: "AMP-EXPERIMENT"
@@ -44,19 +42,18 @@ tags: {  # amp-experiment (json)
   attr_lists: "nonce-attr"
   cdata: {
     max_bytes: 15000
-    max_bytes_spec_url: "https://amp.dev/documentation/components/amp-experiment#configuration"
+    max_bytes_spec_url: "https://amp.dev/documentation/components/amp-experiment/#configuration"
     disallowed_cdata_regex: {
       regex: "<!--"
       error_message: "html comments"
     }
   }
-  spec_url: "https://amp.dev/documentation/components/amp-experiment"
+  spec_url: "https://amp.dev/documentation/components/amp-experiment/"
 }
 tags: {  # <amp-experiment>
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "AMP-EXPERIMENT"
   requires_extension: "amp-experiment"
   unique: true
-  spec_url: "https://amp.dev/documentation/components/amp-experiment"
+  spec_url: "https://amp.dev/documentation/components/amp-experiment/"
 }
diff --git a/extensions/amp-facebook-comments/0.1/amp-facebook-comments.js b/extensions/amp-facebook-comments/0.1/amp-facebook-comments.js
index 820a9fd3b92a6..ce8004c9bae82 100644
--- a/extensions/amp-facebook-comments/0.1/amp-facebook-comments.js
+++ b/extensions/amp-facebook-comments/0.1/amp-facebook-comments.js
@@ -16,16 +16,23 @@
 
 import {Services} from '../../../src/services';
 import {createLoaderLogo} from '../../amp-facebook/0.1/facebook-loader';
-import {dashToUnderline} from '../../../src/string';
+import {dashToUnderline} from '../../../src/core/types/string';
 import {getData, listen} from '../../../src/event-helper';
 import {getIframe, preloadBootstrap} from '../../../src/3p-frame';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {isObject} from '../../../src/types';
+import {isObject} from '../../../src/core/types';
 import {listenFor} from '../../../src/iframe-helper';
 import {removeElement} from '../../../src/dom';
-import {tryParseJson} from '../../../src/json';
+import {tryParseJson} from '../../../src/core/types/object/json';
+
+const TYPE = 'facebook';
 
 class AmpFacebookComments extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static createLoaderLogoCallback(element) {
+    return createLoaderLogo(element);
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -63,7 +70,7 @@ class AmpFacebookComments extends AMP.BaseElement {
       'https://connect.facebook.net/' + this.dataLocale_ + '/sdk.js',
       'script'
     );
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
   }
 
   /** @override */
@@ -73,7 +80,9 @@ class AmpFacebookComments extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    const iframe = getIframe(this.win, this.element, 'facebook');
+    this.element.setAttribute('data-embed-as', 'comments');
+    const iframe = getIframe(this.win, this.element, TYPE);
+    iframe.title = this.element.title || 'Facebook comments';
     this.applyFillContent(iframe);
     // Triggered by context.updateDimensions() inside the iframe.
     listenFor(
@@ -119,11 +128,6 @@ class AmpFacebookComments extends AMP.BaseElement {
     }
   }
 
-  /** @override */
-  createLoaderLogoCallback() {
-    return createLoaderLogo(this.element);
-  }
-
   /** @override */
   unlayoutCallback() {
     if (this.iframe_) {
diff --git a/extensions/amp-facebook-comments/0.1/test/test-amp-facebook-comments.js b/extensions/amp-facebook-comments/0.1/test/test-amp-facebook-comments.js
new file mode 100644
index 0000000000000..2b08baed61bd6
--- /dev/null
+++ b/extensions/amp-facebook-comments/0.1/test/test-amp-facebook-comments.js
@@ -0,0 +1,140 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import '../amp-facebook-comments';
+import {createElementWithAttributes} from '../../../../src/dom';
+import {doNotLoadExternalResourcesInTest} from '../../../../testing/iframe';
+import {resetServiceForTesting} from '../../../../src/service';
+import {serializeMessage} from '../../../../src/3p-frame-messaging';
+import {setDefaultBootstrapBaseUrlForTesting} from '../../../../src/3p-frame';
+
+describes.realWin(
+  'amp-facebook-comments',
+  {
+    amp: {
+      extensions: ['amp-facebook-comments:0.1'],
+    },
+  },
+  (env) => {
+    let win, doc, element;
+    const href = 'https://cdn.ampproject.org/';
+
+    beforeEach(async function () {
+      win = env.win;
+      doc = win.document;
+      // Override global window here because Preact uses global `createElement`.
+      doNotLoadExternalResourcesInTest(window, env.sandbox);
+    });
+
+    it('renders', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-comments', {
+        'data-href': href,
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      expect(iframe.src).to.equal(
+        'http://ads.localhost:9876/dist.3p/current/frame.max.html'
+      );
+    });
+
+    it('ensures iframe is not sandboxed in amp-facebook-comments', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-comments', {
+        'data-href': href,
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      expect(iframe.hasAttribute('sandbox')).to.be.false;
+    });
+
+    it('renders amp-facebook-comments with specified locale', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-comments', {
+        'data-href': href,
+        'data-locale': 'fr_FR',
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      expect(iframe.getAttribute('name')).to.contain('"locale":"fr_FR"');
+    });
+
+    it('renders with correct embed type', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-comments', {
+        'data-href': href,
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      const context = JSON.parse(iframe.getAttribute('name'));
+      expect(context.attributes.embedAs).to.equal('comments');
+    });
+
+    it("container's height is changed", async () => {
+      const iframeSrc =
+        'http://ads.localhost:' +
+        location.port +
+        '/test/fixtures/served/iframe.html';
+      resetServiceForTesting(win, 'bootstrapBaseUrl');
+      setDefaultBootstrapBaseUrlForTesting(iframeSrc);
+
+      const initialHeight = 300;
+      element = createElementWithAttributes(doc, 'amp-facebook-comments', {
+        'data-href': '585110598171631616',
+        'height': initialHeight,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const impl = await element.getImpl(false);
+      const forceChangeHeightStub = env.sandbox.stub(impl, 'forceChangeHeight');
+
+      const mockEvent = new CustomEvent('message');
+      const sentinel = JSON.parse(
+        element.querySelector('iframe').getAttribute('name')
+      )['attributes']['_context']['sentinel'];
+      mockEvent.data = serializeMessage('embed-size', sentinel, {
+        'height': 1000,
+      });
+      mockEvent.source = element.querySelector('iframe').contentWindow;
+      win.dispatchEvent(mockEvent);
+      expect(forceChangeHeightStub).to.be.calledOnce.calledWith(1000);
+    });
+  }
+);
diff --git a/extensions/amp-facebook-comments/1.0/amp-facebook-comments.js b/extensions/amp-facebook-comments/1.0/amp-facebook-comments.js
new file mode 100644
index 0000000000000..bbb934b7e27ea
--- /dev/null
+++ b/extensions/amp-facebook-comments/1.0/amp-facebook-comments.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {BaseElement} from './base-element';
+import {createLoaderLogo} from '../../amp-facebook/0.1/facebook-loader';
+import {dashToUnderline} from '../../../src/core/types/string';
+import {dict} from '../../../src/core/types/object';
+import {getBootstrapBaseUrl, getBootstrapUrl} from '../../../src/3p-frame';
+import {isExperimentOn} from '../../../src/experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-facebook-comments';
+const TYPE = 'facebook';
+
+class AmpFacebookComments extends BaseElement {
+  /** @override @nocollapse */
+  static createLoaderLogoCallback(element) {
+    return createLoaderLogo(element);
+  }
+
+  /** @override @nocollapse */
+  static getPreconnects(element) {
+    const ampdoc = element.getAmpDoc();
+    const {win} = ampdoc;
+    const locale = element.hasAttribute('data-locale')
+      ? element.getAttribute('data-locale')
+      : dashToUnderline(window.navigator.language);
+    return [
+      // Base URL for 3p bootstrap iframes
+      getBootstrapBaseUrl(win, ampdoc),
+      // Script URL for iframe
+      getBootstrapUrl(TYPE, win),
+      'https://facebook.com',
+      // This domain serves the actual tweets as JSONP.
+      'https://connect.facebook.net/' + locale + '/sdk.js',
+    ];
+  }
+
+  /** @override */
+  init() {
+    return dict({
+      'onReady': () => this.togglePlaceholder(false),
+      'requestResize': (height) => this.forceChangeHeight(height),
+    });
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-facebook-comments'),
+      'expected global "bento" or specific "bento-facebook-comments" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpFacebookComments);
+});
diff --git a/extensions/amp-facebook-comments/1.0/base-element.js b/extensions/amp-facebook-comments/1.0/base-element.js
new file mode 100644
index 0000000000000..3f4eb6bfeedd4
--- /dev/null
+++ b/extensions/amp-facebook-comments/1.0/base-element.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {FacebookComments} from './component';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {dashToUnderline} from '../../../src/core/types/string';
+
+export class BaseElement extends PreactBaseElement {}
+
+/** @override */
+BaseElement['Component'] = FacebookComments;
+
+/** @override */
+BaseElement['props'] = {
+  'title': {attr: 'title'}, // Needed for Preact component
+  'href': {attr: 'data-href'},
+  'locale': {
+    attr: 'data-locale',
+    default: dashToUnderline(window.navigator.language),
+  },
+  'numPosts': {attr: 'data-numposts'},
+  'colorScheme': {attr: 'data-colorscheme'},
+  'orderBy': {attr: 'data-order-by'},
+};
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
diff --git a/extensions/amp-facebook-comments/1.0/component.js b/extensions/amp-facebook-comments/1.0/component.js
new file mode 100644
index 0000000000000..afbd410b42b16
--- /dev/null
+++ b/extensions/amp-facebook-comments/1.0/component.js
@@ -0,0 +1,115 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {
+  MessageType,
+  ProxyIframeEmbed,
+} from '../../../src/preact/component/3p-frame';
+import {dashToUnderline} from '../../../src/core/types/string';
+import {deserializeMessage} from '../../../src/3p-frame-messaging';
+import {forwardRef} from '../../../src/preact/compat';
+import {tryParseJson} from '../../../src/core/types/object/json';
+import {useCallback, useLayoutEffect, useState} from '../../../src/preact';
+
+/** @const {string} */
+const TYPE = 'facebook';
+const FULL_HEIGHT = '100%';
+const MATCHES_MESSAGING_ORIGIN = () => true;
+const DEFAULT_TITLE = 'Facebook comments';
+const EMBED_AS = 'comments';
+
+/**
+ * @param {!FacebookCommentsDef.Props} props
+ * @param {{current: ?FacebookCommentsDef.Api}} ref
+ * @return {PreactDef.Renderable}
+ */
+function FacebookCommentsWithRef(
+  {
+    colorScheme,
+    href,
+    locale: localeProp,
+    numPosts,
+    onReady,
+    orderBy,
+    requestResize,
+    title = DEFAULT_TITLE,
+    ...rest
+  },
+  ref
+) {
+  const [height, setHeight] = useState(FULL_HEIGHT);
+  const messageHandler = useCallback(
+    (event) => {
+      const data = tryParseJson(event.data) ?? deserializeMessage(event.data);
+      if (data['action'] == 'ready') {
+        onReady?.();
+      }
+      if (data['type'] == MessageType.EMBED_SIZE) {
+        const height = data['height'];
+        if (requestResize) {
+          requestResize(height);
+          setHeight(FULL_HEIGHT);
+        } else {
+          setHeight(height);
+        }
+      }
+    },
+    [requestResize, onReady]
+  );
+
+  const [locale, setLocale] = useState(localeProp);
+  useLayoutEffect(() => {
+    if (localeProp) {
+      setLocale(localeProp);
+      return;
+    }
+    const win = ref?.current?.ownerDocument?.defaultView;
+    if (!win) {
+      return;
+    }
+    setLocale(dashToUnderline(win.navigator.language));
+  }, [localeProp, ref]);
+
+  return (
+    <ProxyIframeEmbed
+      options={{
+        colorScheme,
+        href,
+        locale,
+        numPosts,
+        orderBy,
+        embedAs: EMBED_AS,
+      }}
+      ref={ref}
+      title={title}
+      {...rest}
+      /* non-overridable props */
+      // We sandbox all 3P iframes however facebook embeds completely break in
+      // sandbox mode since they need access to document.domain, so we
+      // exclude facebook.
+      excludeSandbox
+      matchesMessagingOrigin={MATCHES_MESSAGING_ORIGIN}
+      messageHandler={messageHandler}
+      type={TYPE}
+      wrapperStyle={{height}}
+    />
+  );
+}
+
+const FacebookComments = forwardRef(FacebookCommentsWithRef);
+FacebookComments.displayName = 'FacebookComments'; // Make findable for tests.
+export {FacebookComments};
diff --git a/extensions/amp-facebook-comments/1.0/component.type.js b/extensions/amp-facebook-comments/1.0/component.type.js
new file mode 100644
index 0000000000000..1018c6a36978c
--- /dev/null
+++ b/extensions/amp-facebook-comments/1.0/component.type.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/** @externs */
+
+/** @const */
+var FacebookCommentsDef = {};
+
+/**
+ * @typedef {{
+ *   colorScheme: (string|undefined),
+ *   href: (string|undefined),
+ *   loading: (string|undefined),
+ *   locale: (string|undefined),
+ *   numPosts: (number|undefined),
+ *   orderBy: (string|undefined),
+ *   onReadyState: (function(string, *=)|undefined),
+ *   requestResize: (function(number):*|undefined),
+ *   title: (string|undefined),
+ * }}
+ */
+FacebookCommentsDef.Props;
+
+/** @constructor */
+FacebookCommentsDef.Api = function () {};
+
+/** @type {string} */
+FacebookCommentsDef.Api.prototype.readyState;
diff --git a/extensions/amp-facebook-comments/1.0/storybook/Basic.amp.js b/extensions/amp-facebook-comments/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..28129c9d13da3
--- /dev/null
+++ b/extensions/amp-facebook-comments/1.0/storybook/Basic.amp.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, text, withKnobs} from '@storybook/addon-knobs';
+import {withA11y} from '@storybook/addon-a11y';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-facebook-comments-1_0',
+  decorators: [withKnobs, withA11y, withAmp],
+
+  parameters: {
+    extensions: [
+      {
+        name: 'amp-facebook-comments',
+        version: '1.0',
+      },
+    ],
+    experiments: ['bento'],
+  },
+};
+
+export const _default = () => {
+  const href = text(
+    'data-href',
+    'http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html'
+  );
+  const numPosts = boolean('show 5 comments max') ? 5 : undefined;
+  const orderBy = boolean('order by time') ? 'time' : undefined;
+  const locale = boolean('french locale') ? 'fr_FR' : undefined;
+  return (
+    <amp-facebook-comments
+      width="486"
+      height="657"
+      layout="responsive"
+      data-href={href}
+      data-locale={locale}
+      data-numposts={numPosts}
+      data-order-by={orderBy}
+    >
+      <div placeholder>
+        <h1>Placeholder</h1>
+      </div>
+    </amp-facebook-comments>
+  );
+};
+
+_default.story = {
+  name: 'Default',
+};
diff --git a/extensions/amp-facebook-comments/1.0/storybook/Basic.js b/extensions/amp-facebook-comments/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..269dd75d94110
--- /dev/null
+++ b/extensions/amp-facebook-comments/1.0/storybook/Basic.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {FacebookComments} from '../component';
+import {boolean, text, withKnobs} from '@storybook/addon-knobs';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FacebookComments',
+  component: FacebookComments,
+  decorators: [withKnobs, withA11y],
+};
+
+export const _default = () => {
+  const href = text(
+    'href',
+    'http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html'
+  );
+  const numPosts = boolean('show 5 comments max') ? 5 : undefined;
+  const orderBy = boolean('order by time') ? 'time' : undefined;
+  const locale = boolean('french locale') ? 'fr_FR' : undefined;
+  return (
+    <FacebookComments
+      href={href}
+      locale={locale}
+      numPosts={numPosts}
+      orderBy={orderBy}
+      style={{width: '400px', height: '400px'}}
+    ></FacebookComments>
+  );
+};
diff --git a/extensions/amp-facebook-comments/1.0/test/test-amp-facebook-comments.js b/extensions/amp-facebook-comments/1.0/test/test-amp-facebook-comments.js
new file mode 100644
index 0000000000000..27d5261126ca2
--- /dev/null
+++ b/extensions/amp-facebook-comments/1.0/test/test-amp-facebook-comments.js
@@ -0,0 +1,162 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import '../amp-facebook-comments';
+import {createElementWithAttributes} from '../../../../src/dom';
+import {doNotLoadExternalResourcesInTest} from '../../../../testing/iframe';
+import {resetServiceForTesting} from '../../../../src/service';
+import {serializeMessage} from '../../../../src/3p-frame-messaging';
+import {setDefaultBootstrapBaseUrlForTesting} from '../../../../src/3p-frame';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-facebook-comments',
+  {
+    amp: {
+      extensions: ['amp-facebook-comments:1.0'],
+    },
+  },
+  (env) => {
+    let win, doc, element;
+
+    const waitForRender = async () => {
+      await element.buildInternal();
+      const loadPromise = element.layoutCallback();
+      const shadow = element.shadowRoot;
+      await waitFor(() => shadow.querySelector('iframe'), 'iframe mounted');
+      await loadPromise;
+    };
+
+    const href = 'https://cdn.ampproject.org/';
+
+    beforeEach(async function () {
+      win = env.win;
+      doc = win.document;
+      toggleExperiment(win, 'bento-facebook-comments', true, true);
+      // Override global window here because Preact uses global `createElement`.
+      doNotLoadExternalResourcesInTest(window, env.sandbox);
+    });
+
+    it('renders', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-comments', {
+        'data-href': href,
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      const iframe = element.shadowRoot.querySelector('iframe');
+      expect(iframe.src).to.equal(
+        'http://ads.localhost:9876/dist.3p/current/frame.max.html'
+      );
+    });
+
+    it('ensures iframe is not sandboxed in amp-facebook-comments', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-comments', {
+        'data-href': href,
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      const iframe = element.shadowRoot.querySelector('iframe');
+      expect(iframe.hasAttribute('sandbox')).to.be.false;
+    });
+
+    it('renders amp-facebook-comments with detected locale', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-comments', {
+        'data-href': href,
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      const iframe = element.shadowRoot.querySelector('iframe');
+      expect(iframe.getAttribute('name')).to.contain('"locale":"en_US"');
+    });
+
+    it('renders amp-facebook-comments with specified locale', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-comments', {
+        'data-href': href,
+        'data-locale': 'fr_FR',
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      const iframe = element.shadowRoot.querySelector('iframe');
+      expect(iframe.getAttribute('name')).to.contain('"locale":"fr_FR"');
+    });
+
+    it('renders with correct embed type', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-comments', {
+        'data-href': href,
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      const iframe = element.shadowRoot.querySelector('iframe');
+      const context = JSON.parse(iframe.getAttribute('name'));
+      expect(context.attributes.embedAs).to.equal('comments');
+    });
+
+    it("container's height is changed", async () => {
+      const iframeSrc =
+        'http://ads.localhost:' +
+        location.port +
+        '/test/fixtures/served/iframe.html';
+      resetServiceForTesting(win, 'bootstrapBaseUrl');
+      setDefaultBootstrapBaseUrlForTesting(iframeSrc);
+
+      const initialHeight = 300;
+      element = createElementWithAttributes(doc, 'amp-facebook-comments', {
+        'data-href': '585110598171631616',
+        'height': initialHeight,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      const impl = await element.getImpl(false);
+      const forceChangeHeightStub = env.sandbox.stub(impl, 'forceChangeHeight');
+
+      const mockEvent = new CustomEvent('message');
+      const sentinel = JSON.parse(
+        element.shadowRoot.querySelector('iframe').getAttribute('name')
+      )['attributes']['_context']['sentinel'];
+      mockEvent.data = serializeMessage('embed-size', sentinel, {
+        'height': 1000,
+      });
+      mockEvent.source =
+        element.shadowRoot.querySelector('iframe').contentWindow;
+      win.dispatchEvent(mockEvent);
+      expect(forceChangeHeightStub).to.be.calledOnce.calledWith(1000);
+    });
+  }
+);
diff --git a/extensions/amp-facebook-comments/OWNERS b/extensions/amp-facebook-comments/OWNERS
index 7613590dc031f..d8023331cb7fc 100644
--- a/extensions/amp-facebook-comments/OWNERS
+++ b/extensions/amp-facebook-comments/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ymschaap'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ymschaap'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-facebook-comments/amp-facebook-comments.md b/extensions/amp-facebook-comments/amp-facebook-comments.md
index e48760635e527..eacd95c54a22c 100644
--- a/extensions/amp-facebook-comments/amp-facebook-comments.md
+++ b/extensions/amp-facebook-comments/amp-facebook-comments.md
@@ -24,11 +24,9 @@ limitations under the License.
 
 # amp-facebook-comments
 
-## Overview
+## Usage
 
-You can use the `amp-facebook-comments` component to embed the [Facebook comments plugin](https://developers.facebook.com/docs/plugins/comments).
-
-**Example**
+Use the `amp-facebook-comments` component to embed the [Facebook comments plugin](https://developers.facebook.com/docs/plugins/comments).
 
 ```html
 <amp-facebook-comments
@@ -43,33 +41,45 @@ You can use the `amp-facebook-comments` component to embed the [Facebook comment
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-href (required)</strong></td>
-    <td>The URL of the comments page. For example, <code>http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-locale (optional)</strong></td>
-    <td>By default, the locale is set to user's system language; however, you can specify a locale as well. <br><br> For details on strings accepted here please visit the <a href="https://developers.facebook.com/docs/internationalization">Facebook API Localization page</a></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-numposts (optional)</strong></td>
-    <td>The number of comments to show. Currently Facebook SDK limits this to max 100. For details, see the <a href="https://developers.facebook.com/docs/plugins/comments">Facebook comments documentation</a>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-order-by (optional)</strong></td>
-    <td>The order to use when displaying comments. For details, see the <a href="https://developers.facebook.com/docs/plugins/comments">Facebook comments documentation</a>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-colorscheme (optional)</strong></td>
-    <td>The color scheme. For details, see the <a href="https://developers.facebook.com/docs/plugins/comments">Facebook comments documentation</a>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+### `data-href`
+
+The URL of the comments page. For example,
+`http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html`.
+
+### `data-locale` (optional)
+
+By default, the locale is set to user's system language; however, you can
+specify a locale as well.
+
+For details on strings accepted here please visit the
+[Facebook API Localization page](https://developers.facebook.com/docs/internationalization).
+
+### `data-numposts` (optional)
+
+The number of comments to show. Currently Facebook SDK limits this to max 100.
+For details, see the
+[Facebook comments documentation](https://developers.facebook.com/docs/plugins/comments).
+
+### `data-order-by` (optional)
+
+The order to use when displaying comments. For details, see the
+[Facebook comments documentation](https://developers.facebook.com/docs/plugins/comments).
+
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Facebook comments"`.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
+
+### Deprecated attributes
+
+**`data-colorscheme` (optional)**
+
+The color scheme. For details, see the <a href="https://developers.facebook.com/docs/plugins/comments">Facebook comments documentation</a>.<br><br><em>Note: This is no longer supported by Facebook. For more details, follow our <a href="https://github.com/ampproject/amphtml/issues/29980">our tracking issue</a> and <a href="https://developers.facebook.com/support/bugs/1759174414250782/">Facebook's bug report</a>.</em>
 
 ## Validation
 
-See [amp-facebook-comments rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-facebook-comments/validator-amp-facebook-comments.protoascii) in the AMP validator specification.
+See [amp-facebook-comments rules](validator-amp-facebook-comments.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-facebook-like/0.1/amp-facebook-like.js b/extensions/amp-facebook-like/0.1/amp-facebook-like.js
index 47aabee85fa8b..c8869200486ad 100644
--- a/extensions/amp-facebook-like/0.1/amp-facebook-like.js
+++ b/extensions/amp-facebook-like/0.1/amp-facebook-like.js
@@ -15,14 +15,16 @@
  */
 
 import {Services} from '../../../src/services';
-import {dashToUnderline} from '../../../src/string';
+import {dashToUnderline} from '../../../src/core/types/string';
 import {getData, listen} from '../../../src/event-helper';
 import {getIframe, preloadBootstrap} from '../../../src/3p-frame';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {isObject} from '../../../src/types';
+import {isObject} from '../../../src/core/types';
 import {listenFor} from '../../../src/iframe-helper';
 import {removeElement} from '../../../src/dom';
-import {tryParseJson} from '../../../src/json';
+import {tryParseJson} from '../../../src/core/types/object/json';
+
+const TYPE = 'facebook';
 
 class AmpFacebookLike extends AMP.BaseElement {
   /** @param {!AmpElement} element */
@@ -62,7 +64,7 @@ class AmpFacebookLike extends AMP.BaseElement {
       'https://connect.facebook.net/' + this.dataLocale_ + '/sdk.js',
       'script'
     );
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
   }
 
   /** @override */
@@ -72,7 +74,9 @@ class AmpFacebookLike extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    const iframe = getIframe(this.win, this.element, 'facebook');
+    this.element.setAttribute('data-embed-as', 'like');
+    const iframe = getIframe(this.win, this.element, TYPE);
+    iframe.title = this.element.title || 'Facebook like button';
     this.applyFillContent(iframe);
     // Triggered by context.updateDimensions() inside the iframe.
     listenFor(
diff --git a/extensions/amp-facebook-like/0.1/test/test-amp-facebook-like.js b/extensions/amp-facebook-like/0.1/test/test-amp-facebook-like.js
new file mode 100644
index 0000000000000..1cabbff54a7dd
--- /dev/null
+++ b/extensions/amp-facebook-like/0.1/test/test-amp-facebook-like.js
@@ -0,0 +1,359 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import '../amp-facebook-like';
+import {createElementWithAttributes} from '../../../../src/dom';
+import {facebook} from '../../../../3p/facebook';
+import {resetServiceForTesting} from '../../../../src/service';
+import {serializeMessage} from '../../../../src/3p-frame-messaging';
+import {setDefaultBootstrapBaseUrlForTesting} from '../../../../src/3p-frame';
+
+describes.realWin(
+  'amp-facebook-like',
+  {
+    amp: {
+      extensions: ['amp-facebook-like:0.1'],
+    },
+  },
+  (env) => {
+    let win, doc, element;
+    const href = 'https://www.facebook.com/nasa/';
+
+    beforeEach(async function () {
+      win = env.win;
+      doc = win.document;
+    });
+
+    it('renders', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-like', {
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      expect(iframe.src).to.equal(
+        'http://ads.localhost:9876/dist.3p/current/frame.max.html'
+      );
+    });
+
+    it('propagates title to iframe', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-like', {
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+        'title': 'my custom facebook like element',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      expect(iframe.title).to.equal('my custom facebook like element');
+    });
+
+    it('ensures iframe is not sandboxed in amp-facebook-like', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-like', {
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      expect(iframe.hasAttribute('sandbox')).to.be.false;
+    });
+
+    it('renders amp-facebook-like with specified locale', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-like', {
+        'data-locale': 'fr_FR',
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      expect(iframe.getAttribute('name')).to.contain('"locale":"fr_FR"');
+    });
+
+    it('renders with correct embed type', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-like', {
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      const context = JSON.parse(iframe.getAttribute('name'));
+      expect(context.attributes.embedAs).to.equal('like');
+    });
+
+    it("container's height is changed", async () => {
+      const iframeSrc =
+        'http://ads.localhost:' +
+        location.port +
+        '/test/fixtures/served/iframe.html';
+      resetServiceForTesting(win, 'bootstrapBaseUrl');
+      setDefaultBootstrapBaseUrlForTesting(iframeSrc);
+
+      const initialHeight = 300;
+      element = createElementWithAttributes(doc, 'amp-facebook-like', {
+        'height': initialHeight,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const impl = await element.getImpl(false);
+      const attemptChangeHeightStub = env.sandbox.stub(
+        impl,
+        'attemptChangeHeight'
+      );
+      attemptChangeHeightStub.returns(Promise.resolve());
+
+      const mockEvent = new CustomEvent('message');
+      const sentinel = JSON.parse(
+        element.querySelector('iframe').getAttribute('name')
+      )['attributes']['_context']['sentinel'];
+      mockEvent.data = serializeMessage('embed-size', sentinel, {
+        'height': 1000,
+      });
+      mockEvent.source = element.querySelector('iframe').contentWindow;
+      win.dispatchEvent(mockEvent);
+      expect(attemptChangeHeightStub).to.be.calledOnce.calledWith(1000);
+    });
+
+    it('adds fb-like element correctly', () => {
+      const div = document.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'like',
+        href,
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-like')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+    });
+
+    it('adds fb-like element with data-locale', () => {
+      const div = document.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'like',
+        href,
+        locale: 'fr_FR',
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-like')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+
+      const script = doc.body.querySelector('script');
+      expect(script.src).to.contain('fr_FR');
+    });
+
+    it('adds fb-like element with data-action', () => {
+      const div = document.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'like',
+        href,
+        action: 'recommend',
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-like')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+      expect(container.getAttribute('data-action')).to.equal('recommend');
+    });
+
+    it('adds fb-like element with data-colorscheme', () => {
+      const div = document.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'like',
+        href,
+        colorscheme: 'dark',
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-like')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+      expect(container.getAttribute('data-colorscheme')).to.equal('dark');
+    });
+
+    it('adds fb-like element with data-kd_site', () => {
+      const div = document.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'like',
+        href,
+        'kd_site': true,
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-like')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+      expect(container.getAttribute('data-kd_site')).to.equal('true');
+    });
+
+    it('adds fb-like element with data-layout', () => {
+      const div = document.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'like',
+        href,
+        layout: 'button',
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-like')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+      expect(container.getAttribute('data-layout')).to.equal('button');
+    });
+
+    it('adds fb-like element with data-ref', () => {
+      const div = document.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'like',
+        href,
+        ref: 'asd',
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-like')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+      expect(container.getAttribute('data-ref')).to.equal('asd');
+    });
+
+    it('adds fb-like element with data-share', () => {
+      const div = document.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'like',
+        href,
+        share: true,
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-like')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+      expect(container.getAttribute('data-share')).to.equal('true');
+    });
+
+    it('adds fb-like element with data-show_faces', () => {
+      const div = document.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'like',
+        href,
+        'show_faces': true,
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-like')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+      expect(container.getAttribute('data-show_faces')).to.equal('true');
+    });
+
+    it('adds fb-like element with data-size', () => {
+      const div = document.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'like',
+        href,
+        size: 'large',
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-like')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+      expect(container.getAttribute('data-size')).to.equal('large');
+    });
+
+    it('adds fb-like element with default attrs', () => {
+      const div = document.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'like',
+        href,
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-like')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+      expect(container.getAttribute('data-action')).to.equal('like');
+      expect(container.getAttribute('data-colorscheme')).to.equal('light');
+      expect(container.getAttribute('data-kd_site')).to.equal('false');
+      expect(container.getAttribute('data-layout')).to.equal('standard');
+      expect(container.getAttribute('data-ref')).to.equal('');
+      expect(container.getAttribute('data-share')).to.equal('false');
+      expect(container.getAttribute('data-show_faces')).to.equal('false');
+      expect(container.getAttribute('data-size')).to.equal('small');
+
+      const script = doc.body.querySelector('script');
+      expect(script.src).to.contain('en_US');
+    });
+  }
+);
diff --git a/extensions/amp-facebook-like/OWNERS b/extensions/amp-facebook-like/OWNERS
index 44f5815a6b768..09aade4cc47d9 100644
--- a/extensions/amp-facebook-like/OWNERS
+++ b/extensions/amp-facebook-like/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'eduardogoncalves'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'eduardogoncalves'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-facebook-like/amp-facebook-like.md b/extensions/amp-facebook-like/amp-facebook-like.md
index 6317342a44773..6ab1da96d05eb 100644
--- a/extensions/amp-facebook-like/amp-facebook-like.md
+++ b/extensions/amp-facebook-like/amp-facebook-like.md
@@ -24,11 +24,9 @@ limitations under the License.
 
 # amp-facebook-like
 
-## Overview
+## Usage
 
-You can use the `amp-facebook-like` component to embed the [Facebook like button plugin](https://developers.facebook.com/docs/plugins/like-button).
-
-**Example**
+Use the `amp-facebook-like` component to embed the [Facebook like button plugin](https://developers.facebook.com/docs/plugins/like-button).
 
 ```html
 <amp-facebook-like
@@ -43,54 +41,73 @@ You can use the `amp-facebook-like` component to embed the [Facebook like button
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-href (required)</strong></td>
-    <td>The absolute URL of the page that will be liked. For example, <code>https://www.facebook.com/testesmegadivertidos/</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-locale (optional)</strong></td>
-    <td>By default, the locale is set to user's system language; however, you can specify a locale as well. <br> For details on strings accepted here please visit the <a href="https://developers.facebook.com/docs/internationalization">Facebook API Localization page</a></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-action (optional)</strong></td>
-    <td>The verb to display on the button. Can be either <code>like</code> or <code>recommend</code>. The default is <code>like</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-colorscheme (optional)</strong></td>
-    <td>The color scheme used by the plugin for any text outside of the button itself. Can be <code>light</code> or <code>dark</code>. The default is <code>light</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-kd_site  (optional)</strong></td>
-    <td>This attribute is also known as <code>data-kid_directed_site</code> in the Facebook SDK.
-If your web site or online service, or a portion of your service, is directed to children under 13 you must enable this attribute. The default is <code>false</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-layout (optional)</strong></td>
-    <td>Selects one of the different layouts that are available for the plugin. Can be one of <code>standard</code>, <code>button_count</code>, <code>button</code> or <code>box_count</code>. The default is <code>standard</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-ref (optional)</strong></td>
-    <td>A label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-share (optional)</strong></td>
-    <td>Specifies whether to include a share button beside the Like button. This only works with the XFBML version. The default is <code>false</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-show_faces (optional)</strong></td>
-    <td>Specifies whether to display profile photos below the button (standard layout only). You must not enable this on child-directed sites. The default is <code>false</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-size (optional)</strong></td>
-    <td>The size of the button, which can be one of two sizes, <code>large</code> or <code>small</code>. The default is <code>small</code>. <br>For details, see the <a href="https://developers.facebook.com/docs/plugins/like-button#settings">Facebook comments documentation</a>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+### `data-href`
+
+The absolute URL of the page that will be liked. For example,
+`https://www.facebook.com/testesmegadivertidos/`.
+
+### `data-locale` (optional)
+
+By default, the locale is set to user's system language; however, you can
+specify a locale as well.
+
+For details on strings accepted here please visit the
+[Facebook API Localization page](https://developers.facebook.com/docs/internationalization).
+
+### `data-action` (optional)
+
+The verb to display on the button. Can be either `like` or `recommend`. The
+default is `like`.
+
+### `data-colorscheme` (optional)
+
+The color scheme used by the plugin for any text outside of the button itself.
+Can be `light` or `dark`. The default is `light`.
+
+### `data-kd_site` (optional)
+
+This attribute is also known as `data-kid_directed_site` in the Facebook SDK.
+If your web site or online service, or a portion of your service, is directed to
+children under 13 you must enable this attribute. The default is `false`.
+
+### `data-layout` (optional)
+
+Selects one of the different layouts that are available for the plugin. Can be
+one of `standard`, `button_count`, `button` or `box_count`. The default is
+`standard`.
+
+### `data-ref` (optional)
+
+A label for tracking referrals which must be less than 50 characters and can
+contain alphanumeric characters and some punctuation.
+
+### `data-share` (optional)
+
+Specifies whether to include a share button beside the Like button. This only
+works with the XFBML version. The default is `false`.
+
+### `data-show_faces` (optional)
+
+Specifies whether to display profile photos below the button (standard layout
+only). You must not enable this on child-directed sites. The default is `false`.
+
+### `data-size` (optional)
+
+The size of the button, which can be one of two sizes, `large` or `small`. The
+default is `small`.
+
+For details, see the
+[Facebook comments documentation](https://developers.facebook.com/docs/plugins/like-button#settings).
+
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Facebook like button"`.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
 ## Validation
 
-See [amp-facebook-like rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-facebook-like/validator-amp-facebook-like.protoascii) in the AMP validator specification.
+See [amp-facebook-like rules](validator-amp-facebook-like.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-facebook-page/0.1/amp-facebook-page.js b/extensions/amp-facebook-page/0.1/amp-facebook-page.js
index 9a96bef6e011e..c686880af79f9 100644
--- a/extensions/amp-facebook-page/0.1/amp-facebook-page.js
+++ b/extensions/amp-facebook-page/0.1/amp-facebook-page.js
@@ -16,16 +16,23 @@
 
 import {Services} from '../../../src/services';
 import {createLoaderLogo} from '../../amp-facebook/0.1/facebook-loader';
-import {dashToUnderline} from '../../../src/string';
+import {dashToUnderline} from '../../../src/core/types/string';
 import {getData, listen} from '../../../src/event-helper';
 import {getIframe, preloadBootstrap} from '../../../src/3p-frame';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {isObject} from '../../../src/types';
+import {isObject} from '../../../src/core/types';
 import {listenFor} from '../../../src/iframe-helper';
 import {removeElement} from '../../../src/dom';
-import {tryParseJson} from '../../../src/json';
+import {tryParseJson} from '../../../src/core/types/object/json';
+
+const TYPE = 'facebook';
 
 class AmpFacebookPage extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static createLoaderLogoCallback(element) {
+    return createLoaderLogo(element);
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -63,7 +70,7 @@ class AmpFacebookPage extends AMP.BaseElement {
       'https://connect.facebook.net/' + this.dataLocale_ + '/sdk.js',
       'script'
     );
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
   }
 
   /** @override */
@@ -73,7 +80,9 @@ class AmpFacebookPage extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    const iframe = getIframe(this.win, this.element, 'facebook');
+    this.element.setAttribute('data-embed-as', 'page');
+    const iframe = getIframe(this.win, this.element, TYPE);
+    iframe.title = this.element.title || 'Facebook page';
     this.applyFillContent(iframe);
     // Triggered by context.updateDimensions() inside the iframe.
     listenFor(
@@ -121,11 +130,6 @@ class AmpFacebookPage extends AMP.BaseElement {
     }
   }
 
-  /** @override */
-  createLoaderLogoCallback() {
-    return createLoaderLogo(this.element);
-  }
-
   /** @override */
   unlayoutCallback() {
     if (this.iframe_) {
diff --git a/extensions/amp-facebook-page/0.1/test/test-amp-facebook-page.js b/extensions/amp-facebook-page/0.1/test/test-amp-facebook-page.js
new file mode 100644
index 0000000000000..174e163b657d7
--- /dev/null
+++ b/extensions/amp-facebook-page/0.1/test/test-amp-facebook-page.js
@@ -0,0 +1,293 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import '../amp-facebook-page';
+import {createElementWithAttributes} from '../../../../src/dom';
+import {facebook} from '../../../../3p/facebook';
+import {resetServiceForTesting} from '../../../../src/service';
+import {serializeMessage} from '../../../../src/3p-frame-messaging';
+import {setDefaultBootstrapBaseUrlForTesting} from '../../../../src/3p-frame';
+
+describes.realWin(
+  'amp-facebook-page',
+  {
+    amp: {
+      extensions: ['amp-facebook-page:0.1'],
+    },
+  },
+  (env) => {
+    let win, doc, element;
+    const href = 'https://www.facebook.com/nasa/';
+
+    beforeEach(async function () {
+      win = env.win;
+      doc = win.document;
+    });
+
+    it('renders', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-page', {
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      expect(iframe.src).to.equal(
+        'http://ads.localhost:9876/dist.3p/current/frame.max.html'
+      );
+    });
+
+    it('ensures iframe is not sandboxed in amp-facebook-page', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-page', {
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      expect(iframe.hasAttribute('sandbox')).to.be.false;
+    });
+
+    it('propagates title to iframe', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-page', {
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+        'title': 'my custom facebook page',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      expect(iframe.title).to.equal('my custom facebook page');
+    });
+
+    it('renders amp-facebook-page with specified locale', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-page', {
+        'data-locale': 'fr_FR',
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      expect(iframe.getAttribute('name')).to.contain('"locale":"fr_FR"');
+    });
+
+    it('renders with correct embed type', async () => {
+      element = createElementWithAttributes(doc, 'amp-facebook-page', {
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const iframe = element.querySelector('iframe');
+      const context = JSON.parse(iframe.getAttribute('name'));
+      expect(context.attributes.embedAs).to.equal('page');
+    });
+
+    it("container's height is changed", async () => {
+      const iframeSrc =
+        'http://ads.localhost:' +
+        location.port +
+        '/test/fixtures/served/iframe.html';
+      resetServiceForTesting(win, 'bootstrapBaseUrl');
+      setDefaultBootstrapBaseUrlForTesting(iframeSrc);
+
+      const initialHeight = 300;
+      element = createElementWithAttributes(doc, 'amp-facebook-page', {
+        'height': initialHeight,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+
+      const impl = await element.getImpl(false);
+      const attemptChangeHeightStub = env.sandbox.stub(
+        impl,
+        'attemptChangeHeight'
+      );
+      attemptChangeHeightStub.returns(Promise.resolve());
+
+      const mockEvent = new CustomEvent('message');
+      const sentinel = JSON.parse(
+        element.querySelector('iframe').getAttribute('name')
+      )['attributes']['_context']['sentinel'];
+      mockEvent.data = serializeMessage('embed-size', sentinel, {
+        'height': 1000,
+      });
+      mockEvent.source = element.querySelector('iframe').contentWindow;
+      win.dispatchEvent(mockEvent);
+      expect(attemptChangeHeightStub).to.be.calledOnce.calledWith(1000);
+    });
+
+    it('adds fb-page element correctly', () => {
+      const div = doc.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'page',
+        href,
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-page')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+    });
+
+    it('adds fb-page element with data-locale', () => {
+      const div = doc.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'page',
+        href,
+        locale: 'fr_FR',
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-page')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+
+      const script = doc.body.querySelector('script');
+      expect(script.src).to.contain('fr_FR');
+    });
+
+    it('adds fb-page element with data-tabs', () => {
+      const div = doc.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'page',
+        href,
+        tabs: 'messages',
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-page')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+      expect(container.getAttribute('data-tabs')).to.equal('messages');
+    });
+
+    it('adds fb-page element with data-hide-cover', () => {
+      const div = doc.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'page',
+        href,
+        hideCover: true,
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-page')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+      expect(container.getAttribute('data-hide-cover')).to.equal('true');
+    });
+
+    it('adds fb-page element with data-hide-cta', () => {
+      const div = doc.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'page',
+        href,
+        hideCta: true,
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-page')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+      expect(container.getAttribute('data-hide-cta')).to.equal('true');
+    });
+
+    it(
+      'check that fb-page element correctly sets `data-adapt-container-width` ' +
+        "attribute to 'true'",
+      () => {
+        const div = doc.createElement('div');
+        div.setAttribute('id', 'c');
+        doc.body.appendChild(div);
+
+        facebook(win, {
+          embedAs: 'page',
+          href,
+          width: 200,
+          height: 200,
+        });
+        const container = doc.body.getElementsByClassName('fb-page')[0];
+        expect(container).not.to.be.undefined;
+        expect(container.getAttribute('data-adapt-container-width')).to.equal(
+          'true'
+        );
+      }
+    );
+
+    it('adds fb-page element with default attrs', () => {
+      const div = doc.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      facebook(win, {
+        embedAs: 'page',
+        href,
+        width: 100,
+        height: 100,
+      });
+      const container = doc.body.getElementsByClassName('fb-page')[0];
+      expect(container).not.to.be.undefined;
+      expect(container.getAttribute('data-href')).to.equal(href);
+      expect(container.getAttribute('data-tabs')).to.equal('undefined');
+      expect(container.getAttribute('data-hide-cover')).to.equal('undefined');
+      expect(container.getAttribute('data-show-facepile')).to.equal(
+        'undefined'
+      );
+      expect(container.getAttribute('data-hide-cta')).to.equal('undefined');
+      expect(container.getAttribute('data-small-header')).to.equal('undefined');
+      expect(container.getAttribute('data-adapt-container-width')).to.equal(
+        'true'
+      );
+
+      const script = doc.body.querySelector('script');
+      expect(script.src).to.contain('en_US');
+    });
+  }
+);
diff --git a/extensions/amp-facebook-page/OWNERS b/extensions/amp-facebook-page/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-facebook-page/OWNERS
+++ b/extensions/amp-facebook-page/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-facebook-page/amp-facebook-page.md b/extensions/amp-facebook-page/amp-facebook-page.md
index 053a9b74a872e..81eaaed2f4cdb 100644
--- a/extensions/amp-facebook-page/amp-facebook-page.md
+++ b/extensions/amp-facebook-page/amp-facebook-page.md
@@ -24,11 +24,9 @@ limitations under the License.
 
 # amp-facebook-page
 
-## Overview
+## Usage
 
-You can use the `amp-facebook-page` component to embed the [Facebook page plugin](https://developers.facebook.com/docs/plugins/page-plugin).
-
-**Example**
+Use the `amp-facebook-page` component to embed the [Facebook page plugin](https://developers.facebook.com/docs/plugins/page-plugin).
 
 ```html
 <amp-facebook-page
@@ -43,41 +41,50 @@ You can use the `amp-facebook-page` component to embed the [Facebook page plugin
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-href (required)</strong></td>
-    <td>The absolute URL of the Facebook page. For example, <code>https://www.facebook.com/imdb/</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-locale (optional)</strong></td>
-    <td>By default, the locale is set to the user's system language; however, you can specify a locale as well. For details, visit the <a href="https://developers.facebook.com/docs/internationalization">Facebook API Localization page</a>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-tabs (optional)</strong></td>
-    <td>Specifies the tabs to render (i.e., <code>timeline</code>, <code>events</code>, <code>messages</code>). Use a comma-separated list to add multiple tabs (e.g., <code>timeline, events</code>). By default, the Facebook page plugin shows the timeline activity.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-hide-cover (optional)</strong></td>
-    <td>Hides the cover photo in the header. Default value is <code>false</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-show-facepile (optional)</strong></td>
-    <td>Shows profile photos of friends who like the page. Default value is <code>true</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-hide-cta (optional)</strong></td>
-    <td>Hides the custom call to action button (if available). Default value is <code>false</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-small-header (optional)</strong></td>
-    <td>Uses the small header instead. Default value is <code>false</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+## Attributes
+
+### `data-href`
+
+The absolute URL of the Facebook page. For example,
+`https://www.facebook.com/imdb/`.
+
+### `data-locale` (optional)
+
+By default, the locale is set to the user's system language; however, you can
+specify a locale as well. For details, visit the
+[Facebook API Localization page](https://developers.facebook.com/docs/internationalization).
+
+### `data-tabs` (optional)
+
+Specifies the tabs to render (i.e., `timeline`, `events`, `messages`). Use a
+comma-separated list to add multiple tabs (e.g., `timeline, events`). By
+default, the Facebook page plugin shows the timeline activity.
+
+### `data-hide-cover` (optional)
+
+Hides the cover photo in the header. Default value is `false`.
+
+### `data-show-facepile` (optional)
+
+Shows profile photos of friends who like the page. Default value is `true`.
+
+### `data-hide-cta` (optional)
+
+Hides the custom call to action button (if available). Default value is `false`.
+
+### `data-small-header` (optional)
+
+Uses the small header instead. Default value is `false`.
+
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Facebook page"`.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
 ## Validation
 
-See [amp-facebook-page rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-facebook-page/validator-amp-facebook-page.protoascii) in the AMP validator specification.
+See [amp-facebook-page rules](validator-amp-facebook-page.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-facebook/0.1/amp-facebook.js b/extensions/amp-facebook/0.1/amp-facebook.js
index 6618ad7f5a9bf..f4a266d2804fc 100644
--- a/extensions/amp-facebook/0.1/amp-facebook.js
+++ b/extensions/amp-facebook/0.1/amp-facebook.js
@@ -16,17 +16,25 @@
 
 import {Services} from '../../../src/services';
 import {createLoaderLogo} from './facebook-loader';
-import {dashToUnderline} from '../../../src/string';
+import {dashToUnderline} from '../../../src/core/types/string';
 import {getData, listen} from '../../../src/event-helper';
 import {getIframe, preloadBootstrap} from '../../../src/3p-frame';
 import {getMode} from '../../../src/mode';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {isObject} from '../../../src/types';
+import {isObject} from '../../../src/core/types';
 import {listenFor} from '../../../src/iframe-helper';
 import {removeElement} from '../../../src/dom';
-import {tryParseJson} from '../../../src/json';
+import {tryParseJson} from '../../../src/core/types/object/json';
+import {userAssert} from '../../../src/log';
+
+const TYPE = 'facebook';
 
 class AmpFacebook extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static createLoaderLogoCallback(element) {
+    return createLoaderLogo(element);
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -67,7 +75,7 @@ class AmpFacebook extends AMP.BaseElement {
       'https://connect.facebook.net/' + this.dataLocale_ + '/sdk.js',
       'script'
     );
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
   }
 
   /** @override */
@@ -77,8 +85,19 @@ class AmpFacebook extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    const iframe = getIframe(this.win, this.element, 'facebook');
+    const embedAs = this.element.getAttribute('data-embed-as');
+    userAssert(
+      !embedAs || ['post', 'video', 'comment'].indexOf(embedAs) !== -1,
+      'Attribute data-embed-as for <amp-facebook> value is wrong, should be' +
+        ' "post", "video" or "comment" but was: %s',
+      embedAs
+    );
+    const iframe = getIframe(this.win, this.element, TYPE);
+    iframe.title = this.element.title || 'Facebook';
     this.applyFillContent(iframe);
+    if (this.element.hasAttribute('data-allowfullscreen')) {
+      iframe.setAttribute('allowfullscreen', 'true');
+    }
     // Triggered by context.updateDimensions() inside the iframe.
     listenFor(
       iframe,
@@ -129,11 +148,6 @@ class AmpFacebook extends AMP.BaseElement {
     }
   }
 
-  /** @override */
-  createLoaderLogoCallback() {
-    return createLoaderLogo(this.element);
-  }
-
   /** @override */
   unlayoutOnPause() {
     return true;
diff --git a/extensions/amp-facebook/0.1/test/test-amp-facebook.js b/extensions/amp-facebook/0.1/test/test-amp-facebook.js
index 8b60de31f65b4..26dd42549aabc 100644
--- a/extensions/amp-facebook/0.1/test/test-amp-facebook.js
+++ b/extensions/amp-facebook/0.1/test/test-amp-facebook.js
@@ -15,6 +15,7 @@
  */
 
 import '../amp-facebook';
+import {expect} from 'chai';
 import {facebook} from '../../../../3p/facebook';
 import {resetServiceForTesting} from '../../../../src/service';
 import {setDefaultBootstrapBaseUrlForTesting} from '../../../../src/3p-frame';
@@ -33,7 +34,6 @@ describes.realWin(
     const fbPostHref = 'https://www.facebook.com/zuck/posts/10102593740125791';
     const fbVideoHref =
       'https://www.facebook.com/zuck/videos/10102509264909801/';
-    const fbPageHref = 'https://www.facebook.com/itsdougthepug';
     let win, doc;
 
     beforeEach(() => {
@@ -55,7 +55,7 @@ describes.realWin(
         ampFB.setAttribute('data-locale', 'en_US');
       }
       doc.body.appendChild(ampFB);
-      await ampFB.build();
+      await ampFB.buildInternal();
       await ampFB.layoutCallback();
       return ampFB;
     }
@@ -85,12 +85,51 @@ describes.realWin(
       expect(iframe).to.not.be.null;
       expect(iframe.tagName).to.equal('IFRAME');
       expect(iframe.className).to.match(/i-amphtml-fill-content/);
+
+      const context = JSON.parse(iframe.getAttribute('name'));
+      expect(context.attributes.embedAs).to.equal('video');
+    });
+
+    it('renders iframe in amp-facebook with comment', async () => {
+      const ampFB = await getAmpFacebook(fbVideoHref, 'comment');
+      const iframe = ampFB.firstChild;
+      expect(iframe).to.not.be.null;
+      expect(iframe.tagName).to.equal('IFRAME');
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
+
+      const context = JSON.parse(iframe.getAttribute('name'));
+      expect(context.attributes.embedAs).to.equal('comment');
+    });
+
+    it('rejects other supported and unsupported data-embed-as types', async () => {
+      expectAsyncConsoleError();
+      await expect(getAmpFacebook(fbVideoHref, 'comments')).to.be.rejectedWith(
+        /Attribute data-embed-as for <amp-facebook> value is wrong, should be "post", "video" or "comment" but was: comments/
+      );
+      await expect(getAmpFacebook(fbVideoHref, 'like')).to.be.rejectedWith(
+        /Attribute data-embed-as for <amp-facebook> value is wrong, should be "post", "video" or "comment" but was: like/
+      );
+      await expect(getAmpFacebook(fbVideoHref, 'page')).to.be.rejectedWith(
+        /Attribute data-embed-as for <amp-facebook> value is wrong, should be "post", "video" or "comment" but was: page/
+      );
+      await expect(
+        getAmpFacebook(fbVideoHref, 'unsupported')
+      ).to.be.rejectedWith(
+        /Attribute data-embed-as for <amp-facebook> value is wrong, should be "post", "video" or "comment" but was: unsupported/
+      );
     });
 
     it('renders amp-facebook with detected locale', async () => {
       const ampFB = await getAmpFacebook(fbVideoHref, 'post');
       expect(ampFB).not.to.be.undefined;
       expect(ampFB.getAttribute('data-locale')).to.equal('en_US');
+
+      const iframe = ampFB.firstChild;
+      expect(iframe).to.not.be.null;
+      expect(iframe.tagName).to.equal('IFRAME');
+
+      const context = JSON.parse(iframe.getAttribute('name'));
+      expect(context.attributes.embedAs).to.equal('post');
     });
 
     it('renders amp-facebook with specified locale', async () => {
@@ -101,16 +140,14 @@ describes.realWin(
 
     it('adds loading element correctly', async () => {
       const ampFB = await getAmpFacebook(fbVideoHref, 'post');
-      expect(ampFB.implementation_.toggleLoadingCounter_).to.equal(1);
+      const impl = await ampFB.getImpl(false);
+      expect(impl.toggleLoadingCounter_).to.equal(1);
     });
 
     it('adds fb-post element correctly', () => {
       const div = document.createElement('div');
       div.setAttribute('id', 'c');
       doc.body.appendChild(div);
-      win.context = {
-        tagName: 'AMP-FACEBOOK',
-      };
 
       facebook(win, {
         href: fbPostHref,
@@ -126,9 +163,6 @@ describes.realWin(
       const div = doc.createElement('div');
       div.setAttribute('id', 'c');
       doc.body.appendChild(div);
-      win.context = {
-        tagName: 'AMP-FACEBOOK',
-      };
 
       facebook(win, {
         href: fbVideoHref,
@@ -148,9 +182,6 @@ describes.realWin(
         const div = doc.createElement('div');
         div.setAttribute('id', 'c');
         doc.body.appendChild(div);
-        win.context = {
-          tagName: 'AMP-FACEBOOK',
-        };
 
         facebook(win, {
           href: fbVideoHref,
@@ -169,9 +200,6 @@ describes.realWin(
       const div = doc.createElement('div');
       div.setAttribute('id', 'c');
       doc.body.appendChild(div);
-      win.context = {
-        tagName: 'AMP-FACEBOOK',
-      };
 
       facebook(win, {
         embedAs: 'video',
@@ -188,9 +216,6 @@ describes.realWin(
       const div = doc.createElement('div');
       div.setAttribute('id', 'c');
       doc.body.appendChild(div);
-      win.context = {
-        tagName: 'AMP-FACEBOOK',
-      };
 
       facebook(win, {
         embedAs: 'post',
@@ -203,35 +228,11 @@ describes.realWin(
       expect(fbVideo.classList.contains('fb-post')).to.be.true;
     });
 
-    it(
-      'check that fb-page element correctly sets `data-adapt-container-width` ' +
-        "attribute to 'true'",
-      () => {
-        const div = doc.createElement('div');
-        div.setAttribute('id', 'c');
-        doc.body.appendChild(div);
-        win.context = {
-          tagName: 'AMP-FACEBOOK-PAGE',
-        };
-
-        facebook(win, {
-          href: fbPageHref,
-          width: 200,
-          height: 200,
-        });
-        const fbPage = doc.body.getElementsByClassName('fb-page')[0];
-        expect(fbPage).not.to.be.undefined;
-        expect(fbPage.getAttribute('data-adapt-container-width')).to.equal(
-          'true'
-        );
-      }
-    );
-
     it('removes iframe after unlayoutCallback', async () => {
       const ampFB = await getAmpFacebook(fbPostHref);
+      const obj = await ampFB.getImpl(false);
       const iframe = ampFB.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      const obj = ampFB.implementation_;
       obj.unlayoutCallback();
       expect(ampFB.querySelector('iframe')).to.be.null;
       expect(obj.iframe_).to.be.null;
@@ -261,8 +262,9 @@ describes.realWin(
           resetServiceForTesting(win, 'bootstrapBaseUrl');
           setDefaultBootstrapBaseUrlForTesting(iframeSrc);
           const ampFB = await getAmpFacebook(fbPostHref);
+          const impl = await ampFB.getImpl(false);
           return new Promise((resolve, unusedReject) => {
-            const {firstChild: iframe, implementation_: impl} = ampFB;
+            const {firstChild: iframe} = ampFB;
             impl.forceChangeHeight = (newHeight) => {
               expect(newHeight).to.equal(666);
               resolve(ampFB);
diff --git a/extensions/amp-facebook/0.1/test/validator-amp-facebook.html b/extensions/amp-facebook/0.1/test/validator-amp-facebook.html
index 4437cc62a04e0..60399d1017ce7 100644
--- a/extensions/amp-facebook/0.1/test/validator-amp-facebook.html
+++ b/extensions/amp-facebook/0.1/test/validator-amp-facebook.html
@@ -49,6 +49,7 @@
       height=574
       layout="responsive"
       data-embed-as="video"
+      data-allowfullscreen="true"
       data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
   </amp-facebook>
   <!-- Example of a valid amp-facebook (embedded video) -->
diff --git a/extensions/amp-facebook/0.1/test/validator-amp-facebook.out b/extensions/amp-facebook/0.1/test/validator-amp-facebook.out
index 1cfb19b035045..c221bbbec6cd2 100644
--- a/extensions/amp-facebook/0.1/test/validator-amp-facebook.out
+++ b/extensions/amp-facebook/0.1/test/validator-amp-facebook.out
@@ -50,6 +50,7 @@ PASS
 |        height=574
 |        layout="responsive"
 |        data-embed-as="video"
+|        data-allowfullscreen="true"
 |        data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
 |    </amp-facebook>
 |    <!-- Example of a valid amp-facebook (embedded video) -->
diff --git a/extensions/amp-facebook/OWNERS b/extensions/amp-facebook/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-facebook/OWNERS
+++ b/extensions/amp-facebook/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-facebook/amp-facebook.md b/extensions/amp-facebook/amp-facebook.md
index 2a049b9e5126a..bb4ae46490704 100644
--- a/extensions/amp-facebook/amp-facebook.md
+++ b/extensions/amp-facebook/amp-facebook.md
@@ -24,11 +24,11 @@ limitations under the License.
 
 # amp-facebook
 
-## Overview
+## Usage
 
 You can use the `amp-facebook` component to embed a Facebook post, a Facebook video or a comment on a Facebook post.
 
-#### Example: Embedding a post
+The following example shows how to embed a post:
 
 [example preview="inline" playground="true" imports="amp-facebook"][sourcecode:html]
 <amp-facebook width="552" height="310"
@@ -37,7 +37,7 @@ You can use the `amp-facebook` component to embed a Facebook post, a Facebook vi
 </amp-facebook>
 [/sourcecode][/example]
 
-#### Example: Embedding a video
+The following example shows how to embed a video:
 
 [example preview="inline" playground="true" imports="amp-facebook"][sourcecode:html]
 <amp-facebook width="476" height="316"
@@ -47,7 +47,7 @@ You can use the `amp-facebook` component to embed a Facebook post, a Facebook vi
 </amp-facebook>
 [/sourcecode][/example]
 
-#### Example: Embedding a comment on a post
+The following example shows how to embed a comment on a post:
 
 [example preview="inline" playground="true" imports="amp-facebook"][sourcecode:html]
 <amp-facebook width="552" height="500"
@@ -59,45 +59,70 @@ You can use the `amp-facebook` component to embed a Facebook post, a Facebook vi
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-href (required)</strong></td>
-    <td>The URL of the Facebook post/video/comment. For example, a post or video will look like <code>https://www.facebook.com/zuck/posts/10102593740125791</code>. A comment or comment reply will look like <code>https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185</code>. For comments, see the Facebook documentation on <a href="https://developers.facebook.com/docs/plugins/embedded-comments#how-to-get-a-comments-url">how to get a comment's URL</a>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-embed-as</strong></td>
-    <td>The value is either <code>post</code>, <code>video</code> or <code>comment</code>. The default is <code>post</code>.
-<br><br>
-Both posts and videos can be embedded as a post. Setting <code>data-embed-as="video"</code> for Facebook videos embeds the player of the video, and adds the accompanying post card with it. Setting <code>data-embed-as="post"</code> ignores the caption card. This is done to make sure we are zooming in on videos correctly.
-<br><br>
-The <code>comment</code> value embeds a single comment (or reply to a comment) on a post. This is not to be confused with <a href="https://amp.dev/documentation/examples/components/amp-facebook-comments/">amp-facebook-comments</a>.
-<br><br>
-Check out the documentation for differences between <a href="https://developers.facebook.com/docs/plugins/embedded-posts">post embeds</a>, <a href="https://developers.facebook.com/docs/plugins/embedded-video-player">video embeds</a>, and <a href="https://developers.facebook.com/docs/plugins/embedded-comments">comment embeds</a>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-include-comment-parent</strong></td>
-    <td>The value is either <code>true</code> or <code>false</code>. The default is <code>false</code>.
-<br><br>
-When you are embedding a comment reply, you can optionally also include the parent comment of the reply.</td>
-  </tr>
-  <tr>
-     <td width="40%"><strong>data-align-center</strong></td>
-     <td>The value is either <code>true</code> or <code>false</code>. The default is <code>false</code>.
-<br><br>
-For posts and videos, having this attribute set to true would align the post/video container to center.</td>
-   </tr>
-   <tr>
-      <td width="40%"><strong>data-locale (optional)</strong></td>
-      <td>By default, the locale is set to user's system language; however, you can specify a locale as well.
-<br><br>
-For details on strings accepted here please visit the <a href="https://developers.facebook.com/docs/internationalization">Facebook API Localization page</a></td>
-    </tr>
-    <tr>
-       <td width="40%"><strong>common attributes</strong></td>
-       <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-     </tr>
-</table>
+### `data-href`
+
+The URL of the Facebook post/video/comment. For example, a post or video will
+look like `https://www.facebook.com/zuck/posts/10102593740125791`. A comment or
+comment reply will look like
+`https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185`.
+For comments, see the Facebook documentation on
+[how to get a comment's URL](https://developers.facebook.com/docs/plugins/embedded-comments#how-to-get-a-comments-url).
+
+### `data-embed-as`
+
+The value is either `post`, `video` or `comment`. The default is `post`.
+
+Both posts and videos can be embedded as a post. Setting `data-embed-as="video"`
+for Facebook videos embeds the player of the video, and adds the accompanying
+post card with it. Setting `data-embed-as="post"` ignores the caption card. This
+is done to make sure we are zooming in on videos correctly.
+
+The `comment` value embeds a single comment (or reply to a comment) on a post.
+This is not to be confused with
+[`amp-facebook-comments`](https://amp.dev/documentation/examples/components/amp-facebook-comments/).
+
+Check out the documentation for differences between
+[post embeds](https://developers.facebook.com/docs/plugins/embedded-posts),
+[video embeds](https://developers.facebook.com/docs/plugins/embedded-video-player),
+and [comment embeds](https://developers.facebook.com/docs/plugins/embedded-comments).
+
+### `data-include-comment-parent`
+
+The value is either `true` or `false`. The default is `false`.
+
+When you are embedding a comment reply, you can optionally also include the
+parent comment of the reply.
+
+### `data-allowfullscreen`
+
+The value is either set or omitted. The default is omitted (no fullscreen).
+
+When embedding a video, set this value to allow for a fullscreen experience.
+
+### `data-align-center`
+
+The value is either `true` or `false`. The default is `false`.
+
+For posts and videos, having this attribute set to true would align the
+post/video container to center.
+
+### `data-locale` (optional)
+
+By default, the locale is set to user's system language; however, you can
+specify a locale as well.
+
+For details on strings accepted here please visit the
+[Facebook API Localization page](https://developers.facebook.com/docs/internationalization).
+
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Facebook"`.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
 ## Validation
 
-See [amp-facebook rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-facebook/validator-amp-facebook.protoascii) in the AMP validator specification.
+See [amp-facebook rules](validator-amp-facebook.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-fit-text/0.1/amp-fit-text.js b/extensions/amp-fit-text/0.1/amp-fit-text.js
index a4f57e77c5fe9..7bb8589c0649e 100644
--- a/extensions/amp-fit-text/0.1/amp-fit-text.js
+++ b/extensions/amp-fit-text/0.1/amp-fit-text.js
@@ -17,11 +17,18 @@
 import {CSS} from '../../../build/amp-fit-text-0.1.css';
 import {getLengthNumeral, isLayoutSizeDefined} from '../../../src/layout';
 import {px, setStyle, setStyles} from '../../../src/style';
+import {throttle} from '../../../src/core/types/function';
 
 const TAG = 'amp-fit-text';
 const LINE_HEIGHT_EM_ = 1.15;
+const RESIZE_THROTTLE_MS = 100;
 
 class AmpFitText extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -41,6 +48,9 @@ class AmpFitText extends AMP.BaseElement {
     /** @private {number} */
     this.maxFontSize_ = -1;
 
+    /** @private {?UnlistenDef} */
+    this.resizeObserverUnlistener_ = null;
+
     /**
      * Synchronously stores updated textContent, but only after it has been
      * updated.
@@ -106,11 +116,6 @@ class AmpFitText extends AMP.BaseElement {
     });
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   isRelayoutNeeded() {
     return true;
@@ -118,11 +123,38 @@ class AmpFitText extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
+    if (this.win.ResizeObserver && this.resizeObserverUnlistener_ === null) {
+      const observer = new this.win.ResizeObserver(
+        throttle(
+          this.win,
+          () =>
+            this.mutateElement(() => {
+              this.updateMeasurerContent_();
+              this.updateFontSize_();
+            }),
+          RESIZE_THROTTLE_MS
+        )
+      );
+
+      observer.observe(this.content_);
+      observer.observe(this.measurer_);
+      this.resizeObserverUnlistener_ = function () {
+        observer.disconnect();
+      };
+    }
     return this.mutateElement(() => {
       this.updateFontSize_();
     });
   }
 
+  /** @override */
+  unlayoutCallback() {
+    if (this.resizeObserverUnlistener_ !== null) {
+      this.resizeObserverUnlistener_();
+      this.resizeObserverUnlistener_ = null;
+    }
+  }
+
   /**
    * Copies text from the displayed content to the measurer element.
    */
@@ -175,6 +207,7 @@ export function calculateFontSize_(
       minFontSize = mid;
     }
   }
+
   return minFontSize;
 }
 
diff --git a/extensions/amp-fit-text/0.1/amp-fit-text.md b/extensions/amp-fit-text/0.1/amp-fit-text.md
new file mode 100644
index 0000000000000..bf8d3d842d81d
--- /dev/null
+++ b/extensions/amp-fit-text/0.1/amp-fit-text.md
@@ -0,0 +1,111 @@
+---
+$category@: presentation
+formats:
+  - websites
+  - stories
+  - ads
+  - email
+teaser:
+  text: Expands or shrinks font size to fit the content within the space given.
+---
+
+<!---
+Copyright 2015 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.
+-->
+
+# amp-fit-text
+
+## Usage
+
+Expands or shrinks its font size to fit the content within the space given to it.
+
+The `amp-fit-text` component allows you to manage the size and fit of text within a specified area. For content contained in an `amp-fit-text` element, the `amp-fit-text` component finds the best font size to fit all of the content within the available space. The expected content for `amp-fit-text` is text or other inline content, but it can also contain non-inline content.
+
+In the following example, the `<amp-fit-text>` element is nested within a 300x300 blue `div` block. For the `<amp-fit-text>` element, we specified a `responsive` layout. As a result, the text scales responsively per the aspect ratio provided by the width and height (200x200) of the `<amp-fit-text>` element, but the text does not exceed the size of its parent.
+
+[example preview="inline" playground="true" imports="amp-fit-text"]
+
+```html
+<div style="width: 300px; height: 300px; background:#005AF0; color: #FFF;">
+  <amp-fit-text width="200" height="200" layout="responsive">
+    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
+    inermis reprehendunt.
+  </amp-fit-text>
+</div>
+```
+
+[/example]
+
+The following example is similar to the one above, but in this example we specify a `max-font-size` of `22`, so the text is smaller but still fits the space:
+
+[example preview="inline" playground="true" imports="amp-fit-text"]
+
+```html
+<div style="width: 300px; height: 300px; background:#005AF0; color: #FFF;">
+  <amp-fit-text width="200" height="200" layout="responsive" max-font-size="22">
+    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
+    inermis reprehendunt.
+  </amp-fit-text>
+</div>
+```
+
+[/example]
+
+### Overflowing content
+
+If the content of the `amp-fit-text` overflows the available space, even with a
+`min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.
+
+In the following example, we specified a `min-font-size` of `40`, and added more content inside the `amp-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.
+
+[example preview="inline" playground="true" imports="amp-fit-text"]
+
+```html
+<div style="width: 300px; height: 300px; background:#005AF0; color: #FFF;">
+  <amp-fit-text width="200" height="200" layout="responsive" min-font-size="40">
+    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
+    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire
+    et, vim at aeque inermis reprehendunt
+  </amp-fit-text>
+</div>
+```
+
+[/example]
+
+#### Accessibility considerations of overflowing content
+
+While overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply "stuff" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.
+
+## Attributes
+
+### `min-font-size`
+
+Specifies the minimum font size as an integer that the `amp-fit-text` can use.
+
+### `max-font-size`
+
+Specifies the maximum font size as an integer that the `amp-fit-text` can use.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
+
+## Styling
+
+You can style the `amp-fit-text` with standard CSS. In particular, you can use `text-align`, `font-weight`, `color` and many other CSS properties, with the main exception of `font-size`.
+
+## Validation
+
+See [amp-fit-text rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-fit-text/validator-amp-fit-text.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-fit-text/0.1/test-e2e/test-amp-fit-text.js b/extensions/amp-fit-text/0.1/test-e2e/test-amp-fit-text.js
index 3a960ba07b460..423a6ba7c9efd 100644
--- a/extensions/amp-fit-text/0.1/test-e2e/test-amp-fit-text.js
+++ b/extensions/amp-fit-text/0.1/test-e2e/test-amp-fit-text.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'amp-fit-text',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-fit-text/0.1/amp-fit-text.html',
+    fixture: 'amp-fit-text/0.1/amp-fit-text.html',
     environments: 'ampdoc-amp4ads-preset',
   },
   (env) => {
diff --git a/extensions/amp-fit-text/0.1/test/test-amp-fit-text.js b/extensions/amp-fit-text/0.1/test/test-amp-fit-text.js
index c1d4e75e98189..a3f12e2f37309 100644
--- a/extensions/amp-fit-text/0.1/test/test-amp-fit-text.js
+++ b/extensions/amp-fit-text/0.1/test/test-amp-fit-text.js
@@ -48,7 +48,7 @@ describes.realWin(
       ft.textContent = text;
       doc.body.appendChild(ft);
       return ft
-        .build()
+        .buildInternal()
         .then(() => ft.layoutCallback())
         .then(() => ft);
     }
@@ -65,13 +65,48 @@ describes.realWin(
 
     it('supports update of textContent', async () => {
       const ft = await getFitText('Lorem ipsum');
+      const impl = await ft.getImpl();
       const newText = 'updated';
       ft.textContent = newText;
       expect(ft.textContent).to.equal(newText);
-      await ft.implementation_.mutateElement(() => {});
+      await impl.mutateElement(() => {});
       const content = ft.querySelector('.i-amphtml-fit-text-content');
       expect(content.textContent).to.equal(newText);
     });
+
+    it('re-calculates font size if a resize is detected by the measurer', async () => {
+      const ft = await getFitText(
+        'Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.'
+      );
+      const impl = await ft.getImpl();
+      const updateFontSizeSpy = env.sandbox.spy(impl, 'updateFontSize_');
+
+      // Wait for the resizeObserver recognize the changes
+      // 90ms chosen so that the wait is less than the throttle value for the ResizeObserver.
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, 90);
+      });
+      // Verify that layoutCallback calls updateFontSize.
+      expect(updateFontSizeSpy).to.be.calledOnce;
+      updateFontSizeSpy.resetHistory();
+      // Modify the size of the fit-text box.
+      ft.setAttribute('width', '50');
+      ft.setAttribute('height', '100');
+      ft.style.width = '50px';
+      ft.style.height = '100px';
+
+      // Wait for the resizeObserver recognize the changes
+      // 90ms chosen so that the wait is less than the throttle value for the ResizeObserver.
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, 90);
+      });
+      // Verify that the ResizeObserver calls updateFontSize.
+      expect(updateFontSizeSpy).to.be.calledOnce;
+    });
   }
 );
 
diff --git a/extensions/amp-fit-text/1.0/amp-fit-text.css b/extensions/amp-fit-text/1.0/amp-fit-text.css
new file mode 100644
index 0000000000000..fbd6b3b734e1b
--- /dev/null
+++ b/extensions/amp-fit-text/1.0/amp-fit-text.css
@@ -0,0 +1,37 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/*
+ * Pre-upgrade:
+ * - display:block element
+ * - size-defined element
+ */
+amp-fit-text {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Pre-upgrade: size-defining element - hide text. */
+amp-fit-text:not(.i-amphtml-built) {
+  color: transparent !important;
+}
+
+/* Pre-upgrade: size-defining element - hide children. */
+amp-fit-text:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc) {
+  display: none;
+  content-visibility: hidden;
+}
diff --git a/extensions/amp-fit-text/1.0/amp-fit-text.js b/extensions/amp-fit-text/1.0/amp-fit-text.js
index 7f316f0bd6751..baf7d7338ce8d 100644
--- a/extensions/amp-fit-text/1.0/amp-fit-text.js
+++ b/extensions/amp-fit-text/1.0/amp-fit-text.js
@@ -14,65 +14,26 @@
  * limitations under the License.
  */
 
-import {FitText} from './fit-text';
-import {PreactBaseElement} from '../../../src/preact/base-element';
-import {getLengthNumeral, isLayoutSizeDefined} from '../../../src/layout';
+import {BaseElement} from './base-element';
+import {CSS} from '../../../build/amp-fit-text-1.0.css';
 import {isExperimentOn} from '../../../src/experiments';
-
-import {dict} from '../../../src/utils/object';
 import {userAssert} from '../../../src/log';
 
 /** @const {string} */
 const TAG = 'amp-fit-text';
 
-const getFontSizeAttrs = (element) =>
-  dict({
-    'maxFontSize': getLengthNumeral(element.getAttribute('max-font-size')),
-    'minFontSize': getLengthNumeral(element.getAttribute('min-font-size')),
-  });
-
-class AmpFitText extends PreactBaseElement {
-  /** @override */
-  init() {
-    const attributeOb = new MutationObserver(() => {
-      this.mutateProps(getFontSizeAttrs(this.element));
-    });
-    attributeOb.observe(this.element, {
-      attributeFilter: ['min-font-size', 'max-font-size'],
-      attributes: true,
-    });
-
-    // Force render to resize to new contents.
-    const childOb = new MutationObserver(() => {
-      this.mutateProps(dict({}));
-    });
-    childOb.observe(this.element, {
-      childList: true,
-      subtree: true,
-    });
-
-    const props = getFontSizeAttrs(this.element);
-    props['style'] = {width: '100%', height: '100%', position: 'absolute'};
-
-    return props;
-  }
-
+class AmpFitText extends BaseElement {
   /** @override */
   isLayoutSupported(layout) {
     userAssert(
-      isExperimentOn(this.win, 'amp-fit-text-bento'),
-      'expected amp-fit-text-bento experiment to be enabled'
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-fit-text'),
+      'expected global "bento" or specific "bento-fit-text" experiment to be enabled'
     );
-    return isLayoutSizeDefined(layout);
+    return super.isLayoutSupported(layout);
   }
 }
 
-/** @override */
-AmpFitText['Component'] = FitText;
-
-/** @override */
-AmpFitText['passthrough'] = true;
-
 AMP.extension(TAG, '1.0', (AMP) => {
-  AMP.registerElement(TAG, AmpFitText);
+  AMP.registerElement(TAG, AmpFitText, CSS);
 });
diff --git a/extensions/amp-fit-text/1.0/base-element.js b/extensions/amp-fit-text/1.0/base-element.js
new file mode 100644
index 0000000000000..78927f0730543
--- /dev/null
+++ b/extensions/amp-fit-text/1.0/base-element.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {CSS} from './component.jss';
+import {FitText} from './component';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+
+export class BaseElement extends PreactBaseElement {}
+
+/** @override */
+BaseElement['Component'] = FitText;
+
+/** @override */
+BaseElement['props'] = {
+  'children': {passthrough: true},
+  'minFontSize': {attr: 'min-font-size', type: 'number', media: true},
+  'maxFontSize': {attr: 'max-font-size', type: 'number', media: true},
+};
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
+
+/** @override */
+BaseElement['shadowCss'] = CSS;
diff --git a/extensions/amp-fit-text/1.0/component.js b/extensions/amp-fit-text/1.0/component.js
new file mode 100644
index 0000000000000..bf436459d81bd
--- /dev/null
+++ b/extensions/amp-fit-text/1.0/component.js
@@ -0,0 +1,147 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {ContainWrapper} from '../../../src/preact/component';
+import {LINE_HEIGHT_EM_, useStyles} from './component.jss';
+import {px, resetStyles, setStyle, setStyles} from '../../../src/style';
+import {toWin} from '../../../src/types';
+import {useCallback, useLayoutEffect, useRef} from '../../../src/preact';
+
+/**
+ * @param {!FitTextProps} props
+ * @return {PreactDef.Renderable}
+ */
+export function FitText({
+  children,
+  maxFontSize = 72,
+  minFontSize = 6,
+  ...rest
+}) {
+  const classes = useStyles();
+  const containerRef = useRef(null);
+  const measurerRef = useRef(null);
+  const heightRef = useRef(null);
+
+  const resize = useCallback(() => {
+    if (!measurerRef.current || !containerRef.current) {
+      return;
+    }
+    const {clientHeight, clientWidth} = containerRef.current;
+    const fontSize = calculateFontSize(
+      measurerRef.current,
+      clientHeight,
+      clientWidth,
+      minFontSize,
+      maxFontSize
+    );
+    setOverflowStyle(measurerRef.current, clientHeight, fontSize);
+  }, [maxFontSize, minFontSize]);
+
+  // useLayoutEffect is used so intermediary font sizes during calculation
+  // are resolved before the component visually updates.
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const content = heightRef.current;
+    if (!container || !content) {
+      return;
+    }
+    const win = toWin(container.ownerDocument.defaultView);
+    if (!win) {
+      return undefined;
+    }
+    const observer = new win.ResizeObserver(() => resize());
+    observer.observe(container);
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, [resize]);
+
+  return (
+    <ContainWrapper
+      size={true}
+      layout={true}
+      paint={true}
+      contentRef={containerRef}
+      contentClassName={classes.fitTextContentWrapper}
+      {...rest}
+    >
+      <div ref={measurerRef} className={classes.fitTextContent}>
+        <div ref={heightRef} className={classes.minContentHeight}>
+          {children}
+        </div>
+      </div>
+    </ContainWrapper>
+  );
+}
+
+/**
+ * @param {Element} measurer
+ * @param {number} expectedHeight
+ * @param {number} expectedWidth
+ * @param {number} minFontSize
+ * @param {number} maxFontSize
+ * @return {number}
+ * @visibleForTesting
+ */
+export function calculateFontSize(
+  measurer,
+  expectedHeight,
+  expectedWidth,
+  minFontSize,
+  maxFontSize
+) {
+  maxFontSize++;
+  // Binary search for the best font size.
+  while (maxFontSize - minFontSize > 1) {
+    const mid = Math.floor((minFontSize + maxFontSize) / 2);
+    setStyle(measurer, 'fontSize', px(mid));
+    const width = measurer./*OK*/ scrollWidth;
+    const height = measurer./*OK*/ scrollHeight;
+    if (height > expectedHeight || width > expectedWidth) {
+      maxFontSize = mid;
+    } else {
+      minFontSize = mid;
+    }
+  }
+  setStyle(measurer, 'fontSize', px(minFontSize));
+  return minFontSize;
+}
+
+/**
+ * @param {Element} measurer
+ * @param {number} maxHeight
+ * @param {number} fontSize
+ * @visibleForTesting
+ */
+export function setOverflowStyle(measurer, maxHeight, fontSize) {
+  const overflowed = measurer./*OK*/ scrollHeight > maxHeight;
+  const lineHeight = fontSize * LINE_HEIGHT_EM_;
+  const numberOfLines = Math.floor(maxHeight / lineHeight);
+  if (overflowed) {
+    setStyles(measurer, {
+      'lineClamp': numberOfLines,
+      '-webkit-line-clamp': numberOfLines,
+      'maxHeight': px(lineHeight * numberOfLines),
+    });
+    // Cannot use setInitialDisplay which calls devAssert.
+    // eslint-disable-next-line local/no-style-display
+    resetStyles(measurer, ['display']);
+  } else {
+    // eslint-disable-next-line local/no-style-display
+    setStyle(measurer, 'display', 'flex');
+    resetStyles(measurer, ['lineClamp', '-webkit-line-clamp', 'maxHeight']);
+  }
+}
diff --git a/extensions/amp-fit-text/1.0/component.jss.js b/extensions/amp-fit-text/1.0/component.jss.js
new file mode 100644
index 0000000000000..d35a7fea6454a
--- /dev/null
+++ b/extensions/amp-fit-text/1.0/component.jss.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+export const LINE_HEIGHT_EM_ = 1.15;
+
+const fitTextContentWrapper = {
+  'display': 'flex',
+  'flexDirection': 'column',
+  'flexWrap': 'nowrap',
+  'justifyContent': 'center',
+};
+
+/* Legacy comment: We have to use the old-style flex box with line clamping. It will only
+    work in WebKit, but unfortunately there's no alternative. */
+const fitTextContent = {
+  lineHeight: `${LINE_HEIGHT_EM_}em`,
+  'display': '-webkit-box',
+  '-webkit-box-orient': 'vertical',
+  'overflow': 'hidden',
+  'textOverflow': 'ellipsis',
+
+  'flexDirection': 'column',
+  'flexWrap': 'nowrap',
+  'justifyContent': 'center',
+};
+
+const minContentHeight = {
+  'height': 'min-content',
+};
+
+const JSS = {
+  fitTextContentWrapper,
+  fitTextContent,
+  minContentHeight,
+};
+
+// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
+// eslint-disable-next-line local/no-export-side-effect
+export const useStyles = createUseStyles(JSS);
diff --git a/extensions/amp-fit-text/1.0/component.type.js b/extensions/amp-fit-text/1.0/component.type.js
new file mode 100644
index 0000000000000..a9d4884bac51f
--- /dev/null
+++ b/extensions/amp-fit-text/1.0/component.type.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/**
+ * @typedef {{
+ *   minFontSize: (number|undefined),
+ *   maxFontSize: (number|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+var FitTextProps;
diff --git a/extensions/amp-fit-text/1.0/fit-text.css.js b/extensions/amp-fit-text/1.0/fit-text.css.js
deleted file mode 100644
index 2d598fb218270..0000000000000
--- a/extensions/amp-fit-text/1.0/fit-text.css.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-export const LINE_HEIGHT_EM_ = 1.15;
-
-export const fitTextContent = {
-  'contain': 'content',
-  'display': 'flex',
-  'flexDirection': 'column',
-  'flexWrap': 'nowrap',
-  'justifyContent': 'center',
-};
-
-/* Legacy comment: We have to use the old-style flex box with line clamping. It will only
-    work in WebKit, but unfortunately there's no alternative. */
-export const fitTextContentWrapper = {
-  lineHeight: `${LINE_HEIGHT_EM_}em`,
-  'display': '-webkit-box',
-  '-webkit-box-orient': 'vertical',
-  'overflow': 'hidden',
-  'textOverflow': 'ellipsis',
-};
diff --git a/extensions/amp-fit-text/1.0/fit-text.js b/extensions/amp-fit-text/1.0/fit-text.js
deleted file mode 100644
index 20bc205f49d66..0000000000000
--- a/extensions/amp-fit-text/1.0/fit-text.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import * as Preact from '../../../src/preact';
-import * as styles from './fit-text.css';
-import {px, resetStyles, setStyle, setStyles} from '../../../src/style';
-import {useCallback, useLayoutEffect, useRef} from '../../../src/preact';
-
-const {LINE_HEIGHT_EM_} = styles;
-
-/**
- * @param {!JsonObject} props
- * @return {PreactDef.Renderable}
- */
-export function FitText(props) {
-  const {
-    'children': children,
-    'minFontSize': minFontSize = 6,
-    'maxFontSize': maxFontSize = 72,
-    ...rest
-  } = props;
-  const contentRef = useRef(null);
-  const measurerRef = useRef(null);
-
-  const resize = useCallback(() => {
-    if (!measurerRef.current || !contentRef.current) {
-      return;
-    }
-    const {clientHeight, clientWidth} = contentRef.current;
-    const fontSize = calculateFontSize(
-      measurerRef.current,
-      clientHeight,
-      clientWidth,
-      minFontSize,
-      maxFontSize
-    );
-    setOverflowStyle(measurerRef.current, clientHeight, fontSize);
-  }, [maxFontSize, minFontSize]);
-
-  // Here and below, useLayoutEffect is used so intermediary font sizes
-  // during resizing are resolved before the component visually updates.
-  // Font size should readjust when container resizes.
-  useLayoutEffect(() => {
-    const node = contentRef.current;
-    if (!node) {
-      return;
-    }
-    const observer = new ResizeObserver(() => resize());
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, [resize]);
-
-  // Font size should readjust when content changes.
-  useLayoutEffect(() => {
-    resize();
-  }, [children, resize]);
-
-  return (
-    <div {...rest}>
-      <div
-        ref={contentRef}
-        style={{
-          ...styles.fitTextContent,
-          'width': '100%',
-          'height': '100%',
-        }}
-      >
-        <div ref={measurerRef} style={styles.fitTextContentWrapper}>
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/**
- * @param {Element} measurer
- * @param {number} expectedHeight
- * @param {number} expectedWidth
- * @param {number} minFontSize
- * @param {number} maxFontSize
- * @return {number}
- */
-function calculateFontSize(
-  measurer,
-  expectedHeight,
-  expectedWidth,
-  minFontSize,
-  maxFontSize
-) {
-  maxFontSize++;
-  // Binary search for the best font size.
-  while (maxFontSize - minFontSize > 1) {
-    const mid = Math.floor((minFontSize + maxFontSize) / 2);
-    setStyle(measurer, 'fontSize', px(mid));
-    const width = measurer./*OK*/ scrollWidth;
-    const height = measurer./*OK*/ scrollHeight;
-    if (height > expectedHeight || width > expectedWidth) {
-      maxFontSize = mid;
-    } else {
-      minFontSize = mid;
-    }
-  }
-  setStyle(measurer, 'fontSize', px(minFontSize));
-  return minFontSize;
-}
-
-/**
- * @param {Element} measurer
- * @param {number} maxHeight
- * @param {number} fontSize
- */
-function setOverflowStyle(measurer, maxHeight, fontSize) {
-  const overflowed = measurer./*OK*/ scrollHeight > maxHeight;
-  const lineHeight = fontSize * LINE_HEIGHT_EM_;
-  const numberOfLines = Math.floor(maxHeight / lineHeight);
-  if (overflowed) {
-    setStyles(measurer, {
-      'lineClamp': numberOfLines,
-      '-webkit-line-clamp': numberOfLines,
-      'maxHeight': px(lineHeight * numberOfLines),
-    });
-  } else {
-    resetStyles(measurer, ['lineClamp', '-webkit-line-clamp', 'maxHeight']);
-  }
-}
diff --git a/extensions/amp-fit-text/1.0/package.json b/extensions/amp-fit-text/1.0/package.json
new file mode 100644
index 0000000000000..947fb2376f283
--- /dev/null
+++ b/extensions/amp-fit-text/1.0/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-fit-text",
+  "version": "VERSION",
+  "description": "AMP Fit Text Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "./dist/component.js",
+  "module": "./dist/component-preact.module.js",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "./dist/component-preact.module.js",
+      "require": "./dist/component-preact.js"
+    },
+    "./react": {
+      "import": "./dist/component-react.module.js",
+      "require": "./dist/component-react.js"
+    }
+  },
+  "files": ["dist/*", "react.js"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml.git",
+    "directory": "extensions/amp-fit-text/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0",
+  "peerDependencies": {
+    "preact": "^10.2.1",
+    "react": "^17.0.0"
+  }
+}
diff --git a/extensions/amp-fit-text/1.0/react.js b/extensions/amp-fit-text/1.0/react.js
new file mode 100644
index 0000000000000..0b2957c35c38d
--- /dev/null
+++ b/extensions/amp-fit-text/1.0/react.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-env node */
+// eslint-disable-next-line local/no-module-exports
+module.exports = require('./dist/component-react');
diff --git a/extensions/amp-fit-text/1.0/storybook/Basic.amp.js b/extensions/amp-fit-text/1.0/storybook/Basic.amp.js
index da15ad7ba688e..903f3b1225550 100644
--- a/extensions/amp-fit-text/1.0/storybook/Basic.amp.js
+++ b/extensions/amp-fit-text/1.0/storybook/Basic.amp.js
@@ -15,89 +15,111 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {storiesOf} from '@storybook/preact';
-import {withA11y} from '@storybook/addon-a11y';
-import {withKnobs} from '@storybook/addon-knobs';
-import withAmp from '../../../../build-system/tasks/storybook/amp-env/decorator.js';
+import {number, text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
 
-// eslint-disable-next-line
-storiesOf('amp-fit-text', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withA11y)
-  .addDecorator(withAmp)
-  .addParameters({extensions: [{name: 'amp-fit-text', version: '1.0'}]})
-  .add('Scale up to cover', () => {
-    return (
-      <amp-fit-text
-        width="300"
-        height="200"
-        style="border: 1px solid black;
+export default {
+  title: 'amp-fit-text-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-fit-text', version: '1.0'}],
+    experiments: ['bento'],
+  },
+};
+
+export const ScaleUpToCover = () => {
+  return (
+    <amp-fit-text
+      width="300"
+      height="200"
+      style="border: 1px solid black;
       display: block;"
-      >
+    >
+      Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
+      aeque inermis reprehendunt.
+    </amp-fit-text>
+  );
+};
+
+ScaleUpToCover.storyName = 'Scale up to cover';
+
+export const ScaleUpOverflowEllipsis = () => {
+  const minFontSize = number('minFontSize', 42);
+  const content = text(
+    'content',
+    `
         Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
         aeque inermis reprehendunt.
-      </amp-fit-text>
-    );
-  })
-  .add('Scale up + overflow + ellipsis', () => {
-    return (
-      <amp-fit-text
-        width="300"
-        height="200"
-        min-font-size="42"
-        style="border: 1px solid black;
+      `
+  );
+  return (
+    <amp-fit-text
+      width="300"
+      height="200"
+      min-font-size={minFontSize}
+      style="border: 1px solid black;
       display: block;"
-      >
-        Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
-        aeque inermis reprehendunt.
-      </amp-fit-text>
-    );
-  })
-  .add('Scale down', () => {
-    return (
-      <amp-fit-text
-        width="300"
-        height="200"
-        style="border: 1px solid black;
+      dangerouslySetInnerHTML={{__html: content}}
+    />
+  );
+};
+
+ScaleUpOverflowEllipsis.storyName = 'Scale up + overflow + ellipsis';
+
+export const ScaleDown = () => {
+  return (
+    <amp-fit-text
+      width="300"
+      height="200"
+      style="border: 1px solid black;
       display: block;"
-      >
-        Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
-        aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te
-        mea, ius noster platonem in. Mea an idque minim, sit sale deleniti
-        apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem
-        accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere
-        ut. Simul numquam saperet no sit.
-      </amp-fit-text>
-    );
-  })
-  .add('Scale down more', () => {
-    return (
-      <amp-fit-text
-        width="108"
-        height="78"
-        style="border: 1px solid black;
+    >
+      Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
+      aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te
+      mea, ius noster platonem in. Mea an idque minim, sit sale deleniti
+      apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem
+      accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut.
+      Simul numquam saperet no sit.
+    </amp-fit-text>
+  );
+};
+
+ScaleDown.storyName = 'Scale down';
+
+export const ScaleDownMore = () => {
+  return (
+    <amp-fit-text
+      width="108"
+      height="78"
+      style="border: 1px solid black;
       display: block;"
-      >
-        Superlongword text
-      </amp-fit-text>
-    );
-  })
-  .add('layout=responsive', () => {
-    return (
-      <div
-        style="background-color: #bebebe;
+    >
+      Superlongword text
+    </amp-fit-text>
+  );
+};
+
+ScaleDownMore.storyName = 'Scale down more';
+
+export const LayoutResponsive = () => {
+  return (
+    <div
+      style="background-color: #bebebe;
       width: 40vw;"
+    >
+      <amp-fit-text
+        width="100"
+        height="100"
+        style="border: 1px solid black;"
+        layout="responsive"
+        max-font-size="200"
       >
-        <amp-fit-text
-          width="100"
-          height="100"
-          style="border: 1px solid black;"
-          layout="responsive"
-          max-font-size="200"
-        >
-          Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
-          aeque inermis reprehendunt.
-        </amp-fit-text>
-      </div>
-    );
-  });
+        Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
+        aeque inermis reprehendunt.
+      </amp-fit-text>
+    </div>
+  );
+};
+
+LayoutResponsive.storyName = 'layout=responsive';
diff --git a/extensions/amp-fit-text/1.0/storybook/Basic.js b/extensions/amp-fit-text/1.0/storybook/Basic.js
index f9d148d0511f6..1dec0c626cb6e 100644
--- a/extensions/amp-fit-text/1.0/storybook/Basic.js
+++ b/extensions/amp-fit-text/1.0/storybook/Basic.js
@@ -15,18 +15,17 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {FitText} from '../fit-text';
+import {FitText} from '../component';
 import {number, text, withKnobs} from '@storybook/addon-knobs';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FitText',
   component: FitText,
-  decorators: [withA11y, withKnobs],
+  decorators: [withKnobs],
 };
 
 export const _default = () => {
-  const minFontSize = number('minFontSize', 6);
+  const minFontSize = number('minFontSize', 35);
   const maxFontSize = number('maxFontSize', 72);
   const width = number('width', 300);
   const height = number('height', 200);
@@ -34,7 +33,7 @@ export const _default = () => {
     <FitText
       minFontSize={minFontSize}
       maxFontSize={maxFontSize}
-      style={{display: 'block', border: '1px solid black', width, height}}
+      style={{border: '1px solid black', width, height}}
     >
       Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
       aeque inermis reprehendunt.
@@ -51,7 +50,7 @@ export const scaleUpOverflowEllipsis = () => {
     <FitText
       minFontSize={minFontSize}
       maxFontSize={maxFontSize}
-      style={{display: 'block', border: '1px solid black', width, height}}
+      style={{border: '1px solid black', width, height}}
     >
       Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
       aeque inermis reprehendunt.
@@ -68,7 +67,7 @@ export const scaleDown = () => {
     <FitText
       minFontSize={minFontSize}
       maxFontSize={maxFontSize}
-      style={{display: 'block', border: '1px solid black', width, height}}
+      style={{border: '1px solid black', width, height}}
     >
       Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
       aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te
@@ -89,7 +88,7 @@ export const scaleDownMore = () => {
     <FitText
       minFontSize={minFontSize}
       maxFontSize={maxFontSize}
-      style={{display: 'block', border: '1px solid black', width, height}}
+      style={{border: '1px solid black', width, height}}
     >
       Superlongword text
     </FitText>
@@ -106,7 +105,7 @@ export const configureContent = () => {
     <FitText
       minFontSize={minFontSize}
       maxFontSize={maxFontSize}
-      style={{display: 'block', border: '1px solid black', width, height}}
+      style={{border: '1px solid black', width, height}}
     >
       {content}
     </FitText>
diff --git a/extensions/amp-fit-text/1.0/test-e2e/test-amp-fit-text.js b/extensions/amp-fit-text/1.0/test-e2e/test-amp-fit-text.js
index 7567bf8af7902..d83d70503ef13 100644
--- a/extensions/amp-fit-text/1.0/test-e2e/test-amp-fit-text.js
+++ b/extensions/amp-fit-text/1.0/test-e2e/test-amp-fit-text.js
@@ -23,8 +23,7 @@ const testTimeout = 11500;
 describes.endtoend(
   'amp-fit-text',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-fit-text/1.0/amp-fit-text.html',
+    fixture: 'amp-fit-text/1.0/amp-fit-text.html',
     environments: 'ampdoc-preset',
     experiments: ['amp-fit-text-v2'],
   },
diff --git a/extensions/amp-fit-text/1.0/test/test-amp-fit-text.js b/extensions/amp-fit-text/1.0/test/test-amp-fit-text.js
new file mode 100644
index 0000000000000..4a476c6119c42
--- /dev/null
+++ b/extensions/amp-fit-text/1.0/test/test-amp-fit-text.js
@@ -0,0 +1,225 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import '../amp-fit-text';
+import {computedStyle} from '../../../../src/style';
+import {createElementWithAttributes} from '../../../../src/dom';
+import {expect} from 'chai';
+import {toggleExperiment} from '../../../../src/experiments';
+import {useStyles} from '../component.jss';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-fit-text component',
+  {
+    amp: {
+      extensions: ['amp-fit-text:1.0'],
+    },
+  },
+  (env) => {
+    let win, doc;
+    const styles = useStyles();
+
+    async function waitForRender(element) {
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      const getContent = () => {
+        return (
+          element.shadowRoot &&
+          element.shadowRoot.querySelector('slot:not([name])')
+        );
+      };
+      await waitFor(getContent, 'rendered');
+    }
+
+    async function expectAsyncStyle(element, property, value) {
+      const content = element.shadowRoot.querySelector(
+        `[class*=${styles['fitTextContent']}]`
+      );
+      await waitFor(
+        () => computedStyle(win, content)[property] === value,
+        `${property} applied`
+      );
+      expect(computedStyle(win, content)[property]).to.equal(value);
+    }
+
+    beforeEach(() => {
+      win = env.win;
+      doc = win.document;
+      toggleExperiment(win, 'bento-fit-text', true);
+    });
+
+    afterEach(() => {
+      toggleExperiment(win, 'bento-timeago', false);
+    });
+
+    it('renders', async () => {
+      const text = 'Lorem ipsum';
+      const element = createElementWithAttributes(doc, 'amp-fit-text', {
+        width: '100',
+        height: '200',
+        style: 'font-family: Arial;',
+      });
+      element.textContent = text;
+      await waitForRender(element);
+
+      const assignedNodes = element.shadowRoot
+        .querySelector('slot:not([name])')
+        .assignedNodes();
+      expect(assignedNodes).to.have.lengthOf(1);
+      expect(assignedNodes[0].nodeType).to.equal(3);
+      expect(assignedNodes[0].wholeText).to.equal(text);
+      await expectAsyncStyle(element, 'fontSize', '35px');
+    });
+
+    it('respects min-font-size', async () => {
+      const text = 'Lorem ipsum';
+      const element = createElementWithAttributes(doc, 'amp-fit-text', {
+        width: '100',
+        height: '200',
+        style: 'font-family: Arial;',
+        'min-font-size': 40,
+      });
+      element.textContent = text;
+      await waitForRender(element);
+
+      const assignedNodes = element.shadowRoot
+        .querySelector('slot:not([name])')
+        .assignedNodes();
+      expect(assignedNodes).to.have.lengthOf(1);
+      expect(assignedNodes[0].nodeType).to.equal(3);
+      expect(assignedNodes[0].wholeText).to.equal(text);
+      await expectAsyncStyle(element, '40px');
+    });
+
+    it('respects max-font-size', async () => {
+      const text = 'Lorem ipsum';
+      const element = createElementWithAttributes(doc, 'amp-fit-text', {
+        width: '100',
+        height: '200',
+        style: 'font-family: Arial;',
+        'max-font-size': 32,
+      });
+      element.textContent = text;
+      await waitForRender(element);
+
+      const assignedNodes = element.shadowRoot
+        .querySelector('slot:not([name])')
+        .assignedNodes();
+      expect(assignedNodes).to.have.lengthOf(1);
+      expect(assignedNodes[0].nodeType).to.equal(3);
+      expect(assignedNodes[0].wholeText).to.equal(text);
+      await expectAsyncStyle(element, 'fontSize', '32px');
+    });
+
+    it('respects equal min-font-size and max-font-size', async () => {
+      const text = 'Lorem ipsum';
+      const element = createElementWithAttributes(doc, 'amp-fit-text', {
+        width: '100',
+        height: '200',
+        style: 'font-family: Arial;',
+        'min-font-size': 50,
+        'max-font-size': 50,
+      });
+      element.textContent = text;
+      await waitForRender(element);
+
+      const assignedNodes = element.shadowRoot
+        .querySelector('slot:not([name])')
+        .assignedNodes();
+      expect(assignedNodes).to.have.lengthOf(1);
+      expect(assignedNodes[0].nodeType).to.equal(3);
+      expect(assignedNodes[0].wholeText).to.equal(text);
+      await expectAsyncStyle(element, '50px');
+    });
+
+    it('respects min-font-size over max-font-size', async () => {
+      const text = 'Lorem ipsum';
+      const element = createElementWithAttributes(doc, 'amp-fit-text', {
+        width: '100',
+        height: '200',
+        style: 'font-family: Arial;',
+        'max-font-size': 40,
+        'min-font-size': 50,
+      });
+      element.textContent = text;
+      await waitForRender(element);
+
+      const assignedNodes = element.shadowRoot
+        .querySelector('slot:not([name])')
+        .assignedNodes();
+      expect(assignedNodes).to.have.lengthOf(1);
+      expect(assignedNodes[0].nodeType).to.equal(3);
+      expect(assignedNodes[0].wholeText).to.equal(text);
+      await expectAsyncStyle(element, '50px');
+    });
+
+    it('supports update of textContent', async () => {
+      const text = 'Lorem ipsum';
+      const element = createElementWithAttributes(doc, 'amp-fit-text', {
+        width: '100',
+        height: '200',
+        style: 'font-family: Arial;',
+      });
+      element.textContent = text;
+      await waitForRender(element);
+
+      const assignedNodes = element.shadowRoot
+        .querySelector('slot:not([name])')
+        .assignedNodes();
+      expect(assignedNodes).to.have.lengthOf(1);
+      expect(assignedNodes[0].nodeType).to.equal(3);
+      expect(assignedNodes[0].wholeText).to.equal(text);
+      await expectAsyncStyle(element, 'fontSize', '35px');
+
+      const newText = 'updated';
+      element.textContent = newText;
+      const newAssignedNodes = element.shadowRoot
+        .querySelector('slot:not([name])')
+        .assignedNodes();
+      expect(newAssignedNodes).to.have.lengthOf(1);
+      expect(newAssignedNodes[0].nodeType).to.equal(3);
+      expect(newAssignedNodes[0].wholeText).to.equal(newText);
+
+      await expectAsyncStyle(element, 'fontSize', '27px');
+    });
+
+    it('re-calculates font size if a resize is detected by the measurer', async () => {
+      const text = 'Lorem ipsum';
+      const element = createElementWithAttributes(doc, 'amp-fit-text', {
+        width: '100',
+        height: '200',
+        style: 'font-family: Arial;',
+      });
+      element.textContent = text;
+      await waitForRender(element);
+
+      const assignedNodes = element.shadowRoot
+        .querySelector('slot:not([name])')
+        .assignedNodes();
+      expect(assignedNodes).to.have.lengthOf(1);
+      expect(assignedNodes[0].nodeType).to.equal(3);
+      expect(assignedNodes[0].wholeText).to.equal(text);
+      await expectAsyncStyle(element, 'fontSize', '35px');
+
+      element.setAttribute('width', '50');
+      element.setAttribute('height', '100');
+      element.style.width = '50px';
+      element.style.height = '100px';
+      await expectAsyncStyle(element, 'fontSize', '17px');
+    });
+  }
+);
diff --git a/extensions/amp-fit-text/1.0/test/test-component.js b/extensions/amp-fit-text/1.0/test/test-component.js
new file mode 100644
index 0000000000000..de163640a4aef
--- /dev/null
+++ b/extensions/amp-fit-text/1.0/test/test-component.js
@@ -0,0 +1,195 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {FitText, calculateFontSize, setOverflowStyle} from '../component';
+import {computedStyle} from '../../../../src/style';
+import {mount} from 'enzyme';
+import {useStyles} from '../component.jss';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin('FitText preact component v1.0', {}, (env) => {
+  let win;
+
+  const styles = useStyles();
+
+  beforeEach(() => {
+    win = env.win;
+  });
+
+  async function expectAsyncFontSize(element, value) {
+    await waitFor(
+      () => computedStyle(win, element).fontSize === value,
+      'font size applied'
+    );
+    expect(computedStyle(win, element).fontSize).to.equal(value);
+  }
+
+  it('renders', async () => {
+    const ref = Preact.createRef();
+    const wrapper = mount(
+      <FitText ref={ref} style={{width: '300px', height: '100px'}}>
+        Hello World
+      </FitText>,
+      {attachTo: win.document.body}
+    );
+
+    // Render provided children
+    expect(wrapper.children()).to.have.lengthOf(1);
+    expect(wrapper.text()).to.equal('Hello World');
+    await expectAsyncFontSize(
+      wrapper.find(`.${styles.minContentHeight}`).getDOMNode(),
+      '60px'
+    );
+  });
+
+  it('should respect minFontSize', async () => {
+    const ref = Preact.createRef();
+    const wrapper = mount(
+      <FitText ref={ref} style={{width: '1px', height: '1px'}} minFontSize="24">
+        Hello World
+      </FitText>,
+      {attachTo: win.document.body}
+    );
+
+    // Render provided children
+    expect(wrapper.children()).to.have.lengthOf(1);
+    expect(wrapper.text()).to.equal('Hello World');
+    await expectAsyncFontSize(
+      wrapper.find(`.${styles.minContentHeight}`).getDOMNode(),
+      '24px'
+    );
+  });
+
+  it('should respect maxFontSize', async () => {
+    const ref = Preact.createRef();
+    const wrapper = mount(
+      <FitText
+        ref={ref}
+        style={{width: '300px', height: '100px'}}
+        maxFontSize="48"
+      >
+        Hello World
+      </FitText>,
+      {attachTo: win.document.body}
+    );
+
+    // Render provided children
+    expect(wrapper.children()).to.have.lengthOf(1);
+    expect(wrapper.text()).to.equal('Hello World');
+    await expectAsyncFontSize(
+      wrapper.find(`.${styles.minContentHeight}`).getDOMNode(),
+      '48px'
+    );
+  });
+});
+
+describes.realWin('FitText calculateFontSize', {}, (env) => {
+  let win, doc;
+  let element;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    element = doc.createElement('div');
+    element.style.fontFamily = 'Arial';
+    element.style.lineHeight = '1em';
+    element.style.position = 'absolute';
+    element.style.left = 0;
+    element.style.top = 0;
+    doc.body.appendChild(element);
+  });
+
+  it('should always fit on one line w/ enough width', () => {
+    element./*OK*/ innerHTML = 'A';
+    expect(calculateFontSize(element, 10, 200, 6, 72)).to.equal(10);
+  });
+
+  it('should always fit the width w/ enough height', () => {
+    element./*OK*/ innerHTML = 'A';
+    expect(calculateFontSize(element, 200, 10, 6, 72)).to.equal(15);
+    expect(calculateFontSize(element, 200, 20, 6, 72)).to.equal(30);
+    expect(calculateFontSize(element, 200, 40, 6, 72)).to.equal(60);
+  });
+
+  it('should hit min w/ small height and enough width', () => {
+    element./*OK*/ innerHTML = 'A';
+    expect(calculateFontSize(element, 6, 200, 6, 72)).to.equal(6);
+    expect(calculateFontSize(element, 3, 200, 6, 72)).to.equal(6);
+  });
+
+  it('should hit min w/ small width and enough height', () => {
+    element./*OK*/ innerHTML = 'A';
+    expect(calculateFontSize(element, 200, 2, 6, 72)).to.equal(6);
+    expect(calculateFontSize(element, 200, 4, 6, 72)).to.equal(6);
+  });
+
+  it('should hit max w/ enough width', () => {
+    element./*OK*/ innerHTML = 'A';
+    expect(calculateFontSize(element, 80, 200, 6, 72)).to.equal(72);
+  });
+
+  it('should hit max w/ enough height', () => {
+    element./*OK*/ innerHTML = 'A';
+    expect(calculateFontSize(element, 200, 48, 6, 72)).to.equal(72);
+    expect(calculateFontSize(element, 200, 60, 6, 72)).to.equal(72);
+  });
+
+  it('should always fit on two lines w/ enough width', () => {
+    element./*OK*/ innerHTML = 'A<br>B';
+    expect(calculateFontSize(element, 20, 200, 6, 72)).to.equal(10);
+  });
+});
+
+describes.realWin('FitText setOverflowStyle', {}, (env) => {
+  let win, doc;
+  let measurer;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+
+    measurer = doc.createElement('div');
+    measurer.style.fontFamily = 'Arial';
+    measurer.style.lineHeight = '1.15em';
+    measurer.style.position = 'absolute';
+    measurer.style.width = '300px';
+    doc.body.appendChild(measurer);
+  });
+
+  function getLineClamp() {
+    for (const k in measurer.style) {
+      if (k == 'lineClamp' || k.match(/.*LineClamp/)) {
+        return measurer.style[k];
+      }
+    }
+    return null;
+  }
+
+  it('should always fit on one line', () => {
+    measurer./*OK*/ innerHTML = 'A';
+    setOverflowStyle(measurer, 24, 20);
+    expect(getLineClamp()).to.equal('');
+    expect(measurer.style.maxHeight).to.equal('');
+  });
+
+  it('should always fit on two lines', () => {
+    measurer./*OK*/ innerHTML = 'A<br>B';
+    setOverflowStyle(measurer, 24, 20);
+    expect(getLineClamp()).to.equal('1');
+    expect(measurer.style.maxHeight).to.equal(23 + 'px'); // 23 = 20 * 1.15
+  });
+});
diff --git a/extensions/amp-fit-text/1.0/test/validator-amp-fit-text.html b/extensions/amp-fit-text/1.0/test/validator-amp-fit-text.html
new file mode 100644
index 0000000000000..6f221f72463cc
--- /dev/null
+++ b/extensions/amp-fit-text/1.0/test/validator-amp-fit-text.html
@@ -0,0 +1,73 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-fit-text tag. See the inline comments.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-1.0.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <!-- Valid: Scales text to fit area. -->
+  <div class="fixedblock">
+    <amp-fit-text
+      layout="responsive"
+      height="200"
+      width="200">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt
+    </amp-fit-text>
+  </div>
+
+  <!-- Valid: Scales text to fit area using a maximum font size. -->
+  <div class="fixedblock">
+    <amp-fit-text
+      layout="responsive"
+      height="200"
+      width="200"
+      max-font-size="22">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt
+    </amp-fit-text>
+  </div>
+
+  <!-- Valid: Text is truncated when minimum font size exceeds area. -->
+  <div class="fixedblock">
+    <amp-fit-text
+      layout="responsive"
+      height="200"
+      width="200"
+      min-font-size="40">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt
+    </amp-fit-text>
+  </div>
+
+  <!-- Invalid: illegal layout. -->
+  <div class="fixedblock">
+    <amp-fit-text
+      layout="container"
+      height="200"
+      width="200">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt
+    </amp-fit-text>
+  </div>
+</body>
+</html>
diff --git a/extensions/amp-fit-text/1.0/test/validator-amp-fit-text.out b/extensions/amp-fit-text/1.0/test/validator-amp-fit-text.out
new file mode 100644
index 0000000000000..0b9fb62cfba17
--- /dev/null
+++ b/extensions/amp-fit-text/1.0/test/validator-amp-fit-text.out
@@ -0,0 +1,76 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-fit-text tag. See the inline comments.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-1.0.js"></script>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|    <!-- Valid: Scales text to fit area. -->
+|    <div class="fixedblock">
+|      <amp-fit-text
+|        layout="responsive"
+|        height="200"
+|        width="200">
+|        Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt
+|      </amp-fit-text>
+|    </div>
+|
+|    <!-- Valid: Scales text to fit area using a maximum font size. -->
+|    <div class="fixedblock">
+|      <amp-fit-text
+|        layout="responsive"
+|        height="200"
+|        width="200"
+|        max-font-size="22">
+|        Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt
+|      </amp-fit-text>
+|    </div>
+|
+|    <!-- Valid: Text is truncated when minimum font size exceeds area. -->
+|    <div class="fixedblock">
+|      <amp-fit-text
+|        layout="responsive"
+|        height="200"
+|        width="200"
+|        min-font-size="40">
+|        Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt
+|      </amp-fit-text>
+|    </div>
+|
+|    <!-- Invalid: illegal layout. -->
+|    <div class="fixedblock">
+|      <amp-fit-text
+>>     ^~~~~~~~~
+amp-fit-text/1.0/test/validator-amp-fit-text.html:65:4 The specified layout 'CONTAINER' is not supported by tag 'amp-fit-text'. (see https://amp.dev/documentation/components/amp-fit-text)
+|        layout="container"
+|        height="200"
+|        width="200">
+|        Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt
+|      </amp-fit-text>
+|    </div>
+|  </body>
+|  </html>
diff --git a/extensions/amp-fit-text/OWNERS b/extensions/amp-fit-text/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-fit-text/OWNERS
+++ b/extensions/amp-fit-text/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-fit-text/amp-fit-text.md b/extensions/amp-fit-text/amp-fit-text.md
index dec061d24a82d..ed3240d6182d0 100644
--- a/extensions/amp-fit-text/amp-fit-text.md
+++ b/extensions/amp-fit-text/amp-fit-text.md
@@ -2,15 +2,14 @@
 $category@: presentation
 formats:
   - websites
-  - stories
-  - ads
-  - email
 teaser:
   text: Expands or shrinks font size to fit the content within the space given.
+experimental: true
+bento: true
 ---
 
 <!---
-Copyright 2015 The AMP HTML Authors. All Rights Reserved.
+Copyright 2021 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.
@@ -27,20 +26,18 @@ limitations under the License.
 
 # amp-fit-text
 
-Expands or shrinks its font size to fit the content within the space given to it.
+## Usage
 
-## Behavior
+Expands or shrinks its font size to fit the content within the space given to it.
 
 The `amp-fit-text` component allows you to manage the size and fit of text within a specified area. For content contained in an `amp-fit-text` element, the `amp-fit-text` component finds the best font size to fit all of the content within the available space. The expected content for `amp-fit-text` is text or other inline content, but it can also contain non-inline content.
 
-##### Example: Text scales to fit area
-
-In the following example, the `<amp-fit-text>` element is nested within a 300x300 blue `div` block (class `fixedblock`). For the `<amp-fit-text>` element, we specified a `responsive` layout. As a result, the text scales responsively per the aspect ratio provided by the width and height (200x200) of the `<amp-fit-text>` element, but the text does not exceed the size of its parent.
+In the following example, the `<amp-fit-text>` element is nested within a 300x300 blue `div` block. For the `<amp-fit-text>` element, we specified a `responsive` layout. As a result, the text scales responsively per the aspect ratio provided by the width and height (200x200) of the `<amp-fit-text>` element, but the text does not exceed the size of its parent.
 
-[example preview="inline" playground="true" imports="amp-fit-text"]
+[example preview="inline" playground="true" imports="amp-fit-text:1.0"]
 
 ```html
-<div class="fixedblock">
+<div style="width: 300px; height: 300px; background:#005AF0; color: #FFF;">
   <amp-fit-text width="200" height="200" layout="responsive">
     Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
     inermis reprehendunt.
@@ -50,14 +47,12 @@ In the following example, the `<amp-fit-text>` element is nested within a 300x30
 
 [/example]
 
-##### Example: Text scales to fit area using a maximum font size
-
 The following example is similar to the one above, but in this example we specify a `max-font-size` of `22`, so the text is smaller but still fits the space:
 
-[example preview="inline" playground="true" imports="amp-fit-text"]
+[example preview="inline" playground="true" imports="amp-fit-text:1.0"]
 
 ```html
-<div class="fixedblock">
+<div style="width: 300px; height: 300px; background:#005AF0; color: #FFF;">
   <amp-fit-text width="200" height="200" layout="responsive" max-font-size="22">
     Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
     inermis reprehendunt.
@@ -67,49 +62,118 @@ The following example is similar to the one above, but in this example we specif
 
 [/example]
 
+### Migrating from 0.1
+
+Unlike `0.1`, the experimental `1.0` version of `amp-fit-text` does not account for margin and border size as contributing to the total fit-text coverage area.
+
+### Standalone use outside valid AMP documents
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+#### Example
+
+The example below demonstrates `amp-fit-text` component in standalone use.
+
+[example preview="top-frame" playground="false"]
+
+```html
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-fit-text-1.0.css">
+  <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-1.0.js"></script>
+  <style>
+    amp-fit-text {
+      aspect-ratio: 4/3;
+    }
+  </style>
+</head>
+<amp-fit-text id="my-fit-text">
+  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
+  inermis reprehendunt.
+</amp-fit-text>
+<div class="buttons" style="margin-top: 8px;">
+  <button id="font-button">Change max-font-size</button>
+  <button id="content-button">Change content</button>
+</div>
+
+<script>
+  (async () => {
+    const fitText = document.querySelector('#my-fit-text');
+    await customElements.whenDefined('amp-fit-text');
+
+    // set up button actions
+    document.querySelector('#font-button').onclick = () => fitText.setAttribute('max-font-size', '40');
+    document.querySelector('#content-button').onclick = () => fitText.textContent = 'new content';
+  })();
+</script>
+```
+
+[/example]
+
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-fit-text-1.0.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
+
+**Container type**
+
+The `amp-fit-text` component has a defined layout size type. To ensure the component renders correctly, apply the following styles:
+
+```css
+amp-fit-text {
+  aspect-ratio: 4/3;
+}
+```
+
 ### Overflowing content
 
 If the content of the `amp-fit-text` overflows the available space, even with a
 `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.
 
-##### Example: Text truncates when content overflows area
-
-In the following example, we specified a `min-font-size` of `40`, which causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.
+In the following example, we specified a `min-font-size` of `40`, and added more content inside the `amp-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.
 
-[example preview="inline" playground="true" imports="amp-fit-text"]
+[example preview="inline" playground="true" imports="amp-fit-text:1.0"]
 
 ```html
-<div class="fixedblock">
+<div style="width: 300px; height: 300px; background:#005AF0; color: #FFF;">
   <amp-fit-text width="200" height="200" layout="responsive" min-font-size="40">
     Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
-    inermis reprehendunt.
+    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire
+    et, vim at aeque inermis reprehendunt
   </amp-fit-text>
 </div>
 ```
 
 [/example]
 
+#### Accessibility considerations of overflowing content
+
+While overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply "stuff" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.
+
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>min-font-size</strong></td>
-    <td>Specifies the minimum font size as an integer that the <code>amp-fit-text</code> can use.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>max-font-size</strong></td>
-    <td>Specifies the maximum font size as an integer that the <code>amp-fit-text</code> can use.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+### Media Queries
 
-## Styling
+The attributes for `<amp-fit-text>` can be configured to use different
+options based on a [media query](./../../docs/spec/amp-html-responsive-attributes.md).
 
-You can style the `amp-fit-text` with standard CSS. In particular, you can use `text-align`, `font-weight`, `color` and many other CSS properties, with the main exception of `font-size`.
+### `min-font-size`
+
+Specifies the minimum font size as an integer that the `amp-fit-text` can use.
+
+### `max-font-size`
 
-## Validation
+Specifies the maximum font size as an integer that the `amp-fit-text` can use.
 
-See [amp-fit-text rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-fit-text/validator-amp-fit-text.protoascii) in the AMP validator specification.
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
+
+## Styling
+
+You can style the `amp-fit-text` with standard CSS. In particular, you can use `text-align`, `font-weight`, `color` and many other CSS properties, with the main exception of `font-size`.
diff --git a/extensions/amp-fit-text/validator-amp-fit-text.protoascii b/extensions/amp-fit-text/validator-amp-fit-text.protoascii
index 203e1b5540473..afc0ff49025e8 100644
--- a/extensions/amp-fit-text/validator-amp-fit-text.protoascii
+++ b/extensions/amp-fit-text/validator-amp-fit-text.protoascii
@@ -14,13 +14,27 @@
 # limitations under the license.
 #
 
-tags: {  # amp-fit-text
+tags: {  # amp-fit-text 1.0
+  html_format: AMP
+  tag_name: "SCRIPT"
+  satisfies: "amp-fit-text 1.0"
+  excludes: "amp-fit-text 0.1"
+  extension_spec: {
+    name: "amp-fit-text"
+    version_name: "v1.0"
+    version: "1.0"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # amp-fit-text 0.1 and latest
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
+  satisfies: "amp-fit-text 0.1"
+  excludes: "amp-fit-text 1.0"
   extension_spec: {
     name: "amp-fit-text"
+    version_name: "v0.1"
     version: "0.1"
     version: "latest"
     requires_usage: EXEMPTED
@@ -35,6 +49,7 @@ tags: {  # amp-fit-text (AMP4EMAIL)
   extension_spec: {
     name: "amp-fit-text"
     # AMP4EMAIL doesn't allow version: "latest".
+    version_name: "v0.1"
     version: "0.1"
     requires_usage: EXEMPTED
     deprecated_allow_duplicates: true
@@ -45,7 +60,6 @@ tags: {  # <amp-fit-text>
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "AMP-FIT-TEXT"
   requires_extension: "amp-fit-text"
   attrs: { name: "max-font-size" }
diff --git a/extensions/amp-font/0.1/amp-font.js b/extensions/amp-font/0.1/amp-font.js
index 576afe266f961..edd0e610bd84b 100644
--- a/extensions/amp-font/0.1/amp-font.js
+++ b/extensions/amp-font/0.1/amp-font.js
@@ -35,7 +35,7 @@
 
 import {FontLoader} from './fontloader';
 import {Services} from '../../../src/services';
-import {isFiniteNumber} from '../../../src/types';
+import {isFiniteNumber} from '../../../src/core/types';
 import {user, userAssert} from '../../../src/log';
 
 const TAG = 'amp-font';
@@ -69,6 +69,11 @@ const DEFAULT_SIZE_ = 'medium';
 const CACHED_FONT_LOAD_TIME_ = 100;
 
 export class AmpFont extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -89,11 +94,6 @@ export class AmpFont extends AMP.BaseElement {
     this.fontLoader_ = null;
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   buildCallback() {
     this.fontFamily_ = userAssert(
diff --git a/extensions/amp-font/0.1/fontloader.js b/extensions/amp-font/0.1/fontloader.js
index 885e05d33b62e..17e5620709f5b 100644
--- a/extensions/amp-font/0.1/fontloader.js
+++ b/extensions/amp-font/0.1/fontloader.js
@@ -187,9 +187,8 @@ export class FontLoader {
    * @private
    */
   createFontComparators_() {
-    const containerElement = (this.container_ = this.document_.createElement(
-      'div'
-    ));
+    const containerElement = (this.container_ =
+      this.document_.createElement('div'));
     setStyles(containerElement, {
       // Use larger font-size to better detect font load.
       fontSize: '40px',
diff --git a/extensions/amp-font/0.1/test/test-amp-font.js b/extensions/amp-font/0.1/test/test-amp-font.js
index 679cc6223dac5..51dbbe3bf8fd9 100644
--- a/extensions/amp-font/0.1/test/test-amp-font.js
+++ b/extensions/amp-font/0.1/test/test-amp-font.js
@@ -58,7 +58,7 @@ describes.repeated(
           font.setAttribute('on-load-remove-class', 'comic-amp-font-loading');
           body.appendChild(font);
           return font
-            .build()
+            .buildInternal()
             .then(() => font.layoutCallback())
             .then(() => font);
         }
diff --git a/extensions/amp-font/OWNERS b/extensions/amp-font/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-font/OWNERS
+++ b/extensions/amp-font/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-font/amp-font.md b/extensions/amp-font/amp-font.md
index 481f0ea9d289d..0b0768f87234b 100644
--- a/extensions/amp-font/amp-font.md
+++ b/extensions/amp-font/amp-font.md
@@ -4,6 +4,7 @@ formats:
   - websites
   - stories
   - ads
+deprecated: true
 teaser:
   text: Trigger and monitor the loading of custom fonts on AMP pages.
 ---
@@ -24,11 +25,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-# amp-font
+# amp-font (deprecated)
 
-## Behavior
+[tip type="warning"]
+This component is deprecated and should no longer be used. Instead, use the [`font-display`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) descriptor to specify how to display a font face dependent on whether and when it is ready.
+[/tip]
 
-The `amp-font` extension should be used for controlling timeouts on font loading.
+The `amp-font` component was AMP's solution to controlling timeouts on font loading. With the wide browser adoption of font-display, this component is no longer necessary. It is here for legacy users. Instead, use the [`font-display`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) descriptor to specify how to display a font face dependent on whether and when it is ready.
+
+## Usage
+
+Historically, the `amp-font` extension was used for controlling timeouts on font loading. **We recommend implementing this functionality with [`font-display`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) instead.**
 
 The `amp-font` extension allows adding and removing CSS classes from `document.documentElement`
 or `document.body` based on whether a font was loaded or is in error-state.
@@ -52,55 +59,56 @@ Example:
 ></amp-font>
 ```
 
-The extension observes loading of a font and when it loads executes the optional attributes `on-load-add-class` and `on-load-remove-class` and when there is any error or timeout runs `on-error-remove-class` and `on-error-add-class`.
-These classes are toggled on the `documentElement` for standalone documents, and on `body` for documents
-without a `documentElement` i.e. inside a `ShadowRoot`.
-
-Using these classes authors can guard whether a font is displayed and get the following results:
+The component observes loading of a font. When the font successfully loads it executes the optional `on-load-add-class` and `on-load-remove-class` attributes. If the font loading results in an error or timeout, it runs `on-error-remove-class` and `on-error-add-class`. These classes toggle on the `documentElement` for standalone documents, and on `body` for documents without a `documentElement` i.e. inside a `ShadowRoot`.
 
-- get a short (e.g. 3000ms) timeout in Safari similar to other browsers
-- implement FOIT where the page renders with no text before the font comes in
-- make the timeout very short and only use a font if it was already cached.
+Use these classes to guard against displaying a font and get the following results:
 
-The `amp-font` extension accepts the `layout` value: `nodisplay`
+-   get a short (e.g. 3000ms) timeout in Safari similar to other browsers
+-   implement FOIT where the page renders with no text before the font comes in
+-   make the timeout very short and only use a font if it was already cached.
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>font-family</strong></td>
-    <td>The font-family of the custom font being loaded.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>timeout</strong></td>
-    <td>Time in milliseconds after which the we don't wait for the custom font to be available. This attribute is optional and it's default value is 3000. If the timeout is set to 0 then the amp-font loads the font if it is already in the cache, otherwise the font would not be loaded. If the timeout is has an invalid value then the timeout defaults to 3000.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>on-load-add-class</strong></td>
-    <td>CSS class that would be added to the document root after making sure that the custom font is available for display. This attribute is optional.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>on-load-remove-class</strong></td>
-    <td>CSS class that would be removed from the document root after making sure that the custom font is available for display. This attribute is optional.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>on-error-add-class</strong></td>
-    <td>CSS class that would be added to the document root if the timeout interval runs out before the font becomes available for use. This attribute is optional.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>on-error-remove-class</strong></td>
-    <td>CSS class that would be removed from the document root if the timeout interval runs out before the font becomes available for use. This attribute is optional.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>font-weight, font-style, font-variant</strong></td>
-    <td>The attributes above should all behave like they do on standard elements.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>layout</strong></td>
-    <td>Must be <code>nodisplay</code>.</td>
-  </tr>
-</table>
+### `font-family`
+
+The font family of the custom loaded font.
+
+### `timeout` (optional)
+
+The allowed time in millisecond for the custom font to load. Defaults to 3000 when undefined. When set to 0 the component loads font only if the font is in the cache. If set to an invalid value it defaults back to 3000.
+
+### `on-load-add-class` (optional)
+
+CSS class to add to document root after custom font is available.
+
+### `on-load-remove-class` (optional)
+
+CSS class to remove from document root after custom font is available.
+
+### `on-error-add-class` (optional)
+
+CSS class to add to the document root if the timeout interval runs out before the font is available.
+
+### `on-error-remove-class` (optional)
+
+CSS class to remove from document root if the timeout interval runs out before the font is available.
+
+### `font-weight` (optional)
+
+Behaves same as standard CSS [`font-weight` property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
+
+### `font-style` (optional)
+
+Behaves same as standard CSS [`font-style` property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style).
+
+### `font-variant` (optional)
+
+Behaves same as standard CSS [`font-variant` property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant).
+
+### `layout`
+
+The `layout` attribute must be set to `nodisplay`.
 
 ## Validation
 
-See [amp-font rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-font/validator-amp-font.protoascii) in the AMP validator specification.
+See [amp-font rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-font/validator-amp-font.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-font/validator-amp-font.protoascii b/extensions/amp-font/validator-amp-font.protoascii
index 7b375a3e3b4c4..a77474651586d 100644
--- a/extensions/amp-font/validator-amp-font.protoascii
+++ b/extensions/amp-font/validator-amp-font.protoascii
@@ -17,7 +17,6 @@
 tags: {  # amp-font
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-font"
@@ -31,7 +30,6 @@ tags: {  # amp-font
 tags: {  # <amp-font>
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "AMP-FONT"
   requires_extension: "amp-font"
   attrs: {
diff --git a/extensions/amp-form/0.1/amp-form-textarea.js b/extensions/amp-form/0.1/amp-form-textarea.js
index 881dbfc7ce007..6719b73e6f543 100644
--- a/extensions/amp-form/0.1/amp-form-textarea.js
+++ b/extensions/amp-form/0.1/amp-form-textarea.js
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../../src/amp-events';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {Services} from '../../../src/services';
 import {computedStyle, px, setStyle} from '../../../src/style';
 import {dev, devAssert, user} from '../../../src/log';
 import {iterateCursor, removeElement} from '../../../src/dom';
 import {listen, listenOncePromise} from '../../../src/event-helper';
-import {throttle} from '../../../src/utils/rate-limit';
-import {toArray} from '../../../src/types';
+import {throttle} from '../../../src/core/types/function';
+import {toArray} from '../../../src/core/types/array';
 
 const AMP_FORM_TEXTAREA_EXPAND_ATTR = 'autoexpand';
 
@@ -249,9 +249,9 @@ function maybeRemoveResizeBehavior(element, startHeight, endHeight) {
  */
 export function maybeResizeTextarea(element) {
   const mutator = Services.mutatorForDoc(element);
-  const win = /** @type {!Window} */ (devAssert(
-    element.ownerDocument.defaultView
-  ));
+  const win = /** @type {!Window} */ (
+    devAssert(element.ownerDocument.defaultView)
+  );
 
   let offset = 0;
   let scrollHeight = 0;
@@ -295,7 +295,15 @@ export function maybeResizeTextarea(element) {
         // Prevent the textarea from shrinking if it has not yet expanded.
         const hasExpanded =
           AMP_FORM_TEXTAREA_HAS_EXPANDED_DATA in element.dataset;
-        const shouldResize = hasExpanded || scrollHeight <= minScrollHeight;
+
+        // There is super specific a bug in Chrome affecting scrollHeight calculation
+        // for textareas with padding when the document is zoomed in.
+        // It makes the scrollHeight calculation off by ~1px.
+        // This is why we have a small error margin.
+        // TODO: Remove error margin when chrome bug is resolved (https://bugs.chromium.org/p/chromium/issues/detail?id=1171989).
+        const errorMargin = /google/i.test(win.navigator.vendor) ? 3 : 0;
+        const shouldResize =
+          hasExpanded || scrollHeight <= minScrollHeight + errorMargin;
 
         if (shouldResize) {
           element.dataset[AMP_FORM_TEXTAREA_HAS_EXPANDED_DATA] = '';
diff --git a/extensions/amp-form/0.1/amp-form.js b/extensions/amp-form/0.1/amp-form.js
index 0c2129f411412..ec8ed3918f6c2 100644
--- a/extensions/amp-form/0.1/amp-form.js
+++ b/extensions/amp-form/0.1/amp-form.js
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
-import {AmpEvents} from '../../../src/amp-events';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {AmpFormTextarea} from './amp-form-textarea';
 import {
   AsyncInputAttributes,
   AsyncInputClasses,
 } from '../../../src/async-input';
 import {CSS} from '../../../build/amp-form-0.1.css';
-import {Deferred, tryResolve} from '../../../src/utils/promise';
+import {Deferred, tryResolve} from '../../../src/core/data-structures/promise';
 import {
   FORM_VERIFY_OPTOUT,
   FORM_VERIFY_PARAM,
@@ -31,12 +31,11 @@ import {
 import {FormDirtiness} from './form-dirtiness';
 import {FormEvents} from './form-events';
 import {FormSubmitService} from './form-submit-service';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {
   SOURCE_ORIGIN_PARAM,
   addParamsToUrl,
   isProxyOrigin,
-  parseQueryString,
   serializeQueryString,
 } from '../../../src/url';
 import {Services} from '../../../src/services';
@@ -44,16 +43,18 @@ import {SsrTemplateHelper} from '../../../src/ssr-template-helper';
 import {
   ancestorElementsByTag,
   childElementByAttr,
+  closestAncestorElementBySelector,
   createElementWithAttributes,
   iterateCursor,
+  matches,
   removeElement,
   tryFocus,
 } from '../../../src/dom';
-import {createCustomEvent} from '../../../src/event-helper';
+import {createCustomEvent, listen} from '../../../src/event-helper';
 import {createFormDataWrapper} from '../../../src/form-data-wrapper';
-import {deepMerge, dict} from '../../../src/utils/object';
+import {deepMerge, dict, hasOwn} from '../../../src/core/types/object';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {escapeCssSelectorIdent} from '../../../src/css';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {
   formOrNullForElement,
   getFormAsObject,
@@ -61,18 +62,21 @@ import {
 } from '../../../src/form';
 import {getFormValidator, isCheckValiditySupported} from './form-validators';
 import {getMode} from '../../../src/mode';
+import {getServiceForDocOrNull} from '../../../src/service';
+import {installFormProxy} from './form-proxy';
+import {installStylesForDoc} from '../../../src/style-installer';
+import {isAmp4Email} from '../../../src/format';
+import {isArray, toArray} from '../../../src/core/types/array';
+import {parseQueryString} from '../../../src/core/types/string/url';
 import {
-  getViewerAuthTokenIfAvailable,
   setupAMPCors,
   setupInit,
   setupInput,
 } from '../../../src/utils/xhr-utils';
-import {installFormProxy} from './form-proxy';
-import {installStylesForDoc} from '../../../src/style-installer';
-import {isAmp4Email} from '../../../src/format';
-import {isArray, toArray, toWin} from '../../../src/types';
+
+import {toWin} from '../../../src/types';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
-import {tryParseJson} from '../../../src/json';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 /** @const {string} */
 const TAG = 'amp-form';
@@ -137,32 +141,35 @@ export class AmpForm {
     /** @const @private {!../../../src/service/timer-impl.Timer} */
     this.timer_ = Services.timerFor(this.win_);
 
-    /** @const @private {!../../../src/service/url-replacements-impl.UrlReplacements} */
-    this.urlReplacement_ = Services.urlReplacementsForDoc(element);
-
-    /** @private {?Promise} */
-    this.dependenciesPromise_ = null;
-
     /** @const @private {!HTMLFormElement} */
     this.form_ = element;
 
     /** @const @private {!../../../src/service/ampdoc-impl.AmpDoc}  */
     this.ampdoc_ = Services.ampdoc(this.form_);
 
+    /** @const @private {?AmpFormService} */
+    this.ampFormService_ = getServiceForDocOrNull(this.ampdoc_, TAG);
+
+    /** @private {?Promise} */
+    this.dependenciesPromise_ = null;
+
+    /** @const @private {!../../../src/service/url-replacements-impl.UrlReplacements} */
+    this.urlReplacement_ = Services.urlReplacementsForDoc(this.ampdoc_);
+
     /** @const @private {!../../../src/service/template-impl.Templates} */
-    this.templates_ = Services.templatesFor(this.win_);
+    this.templates_ = Services.templatesForDoc(this.ampdoc_);
 
     /** @const @private {!../../../src/service/xhr-impl.Xhr} */
     this.xhr_ = Services.xhrFor(this.win_);
 
     /** @const @private {!../../../src/service/action-impl.ActionService} */
-    this.actions_ = Services.actionServiceForDoc(this.form_);
+    this.actions_ = Services.actionServiceForDoc(this.ampdoc_);
 
     /** @const @private {!../../../src/service/mutator-interface.MutatorInterface} */
-    this.mutator_ = Services.mutatorForDoc(this.form_);
+    this.mutator_ = Services.mutatorForDoc(this.ampdoc_);
 
     /** @const @private {!../../../src/service/viewer-interface.ViewerInterface}  */
-    this.viewer_ = Services.viewerForDoc(this.form_);
+    this.viewer_ = Services.viewerForDoc(this.ampdoc_);
 
     /**
      * @const {!../../../src/ssr-template-helper.SsrTemplateHelper}
@@ -258,7 +265,7 @@ export class AmpForm {
   getXhrUrl_(attribute) {
     const url = this.form_.getAttribute(attribute);
     if (url) {
-      const urlService = Services.urlForDoc(this.form_);
+      const urlService = Services.urlForDoc(this.ampdoc_);
       urlService.assertHttpsUrl(url, this.form_, attribute);
       userAssert(
         !urlService.isProxyOrigin(url),
@@ -305,7 +312,7 @@ export class AmpForm {
    * @param {string} method
    * @param {!Object<string, string>=} opt_extraFields
    * @param {!Array<string>=} opt_fieldDenylist
-   * @return {!Promise<!FetchRequestDef>}
+   * @return {!FetchRequestDef}
    */
   requestForFormFetch(url, method, opt_extraFields, opt_fieldDenylist) {
     let xhrUrl, body;
@@ -354,17 +361,7 @@ export class AmpForm {
         'headers': headers,
       }),
     };
-
-    return getViewerAuthTokenIfAvailable(this.form_).then((token) => {
-      if (token) {
-        userAssert(
-          request.fetchOpt['method'] == 'POST',
-          'Cannot attach auth token with GET request.'
-        );
-        body.append('ampViewerAuthToken', token);
-      }
-      return request;
-    });
+    return request;
   }
 
   /**
@@ -399,6 +396,9 @@ export class AmpForm {
    * Returns a promise that will be resolved when all dependencies used inside
    * the form tag are loaded and built (e.g. amp-selector) or 2 seconds timeout
    * - whichever is first.
+   *
+   * NOTE: amp-form allows elements that are not descendants of itself, but
+   * not <amp-selector>s. See https://go.amp.dev/issue/33891
    * @return {!Promise}
    * @private
    */
@@ -410,7 +410,7 @@ export class AmpForm {
       EXTERNAL_DEPS.join(',')
     );
     // Wait for an element to be built to make sure it is ready.
-    const promises = toArray(depElements).map((el) => el.whenBuilt());
+    const promises = toArray(depElements).map((el) => el.build());
     return (this.dependenciesPromise_ = this.waitOnPromisesOrTimeout_(
       promises,
       2000
@@ -425,14 +425,16 @@ export class AmpForm {
         tryFocus(autofocus);
       }
     });
-
-    this.form_.addEventListener(
+    devAssert(this.ampFormService_);
+    this.ampFormService_.addFormEventListener(
+      this.form_,
       'submit',
       this.handleSubmitEvent_.bind(this),
       true
     );
 
-    this.form_.addEventListener(
+    this.ampFormService_.addFormEventListener(
+      this.form_,
       'blur',
       (e) => {
         checkUserValidityAfterInteraction_(dev().assertElement(e.target));
@@ -441,7 +443,8 @@ export class AmpForm {
       true
     );
 
-    this.form_.addEventListener(
+    this.ampFormService_.addFormEventListener(
+      this.form_,
       AmpEvents.FORM_VALUE_CHANGE,
       (e) => {
         checkUserValidityAfterInteraction_(dev().assertElement(e.target));
@@ -452,9 +455,9 @@ export class AmpForm {
 
     //  Form verification is not supported when SSRing templates is enabled.
     if (!this.ssrTemplateHelper_.isEnabled()) {
-      this.form_.addEventListener('change', (e) => {
+      this.ampFormService_.addFormEventListener(this.form_, 'change', (e) => {
         this.verifier_.onCommit().then((updatedErrors) => {
-          const {updatedElements, errors} = updatedErrors;
+          const {errors, updatedElements} = updatedErrors;
           updatedElements.forEach(checkUserValidityAfterInteraction_);
           // Tell the validation to reveal any input.validationMessage added
           // by the form verifier.
@@ -479,7 +482,7 @@ export class AmpForm {
       });
     }
 
-    this.form_.addEventListener('input', (e) => {
+    this.ampFormService_.addFormEventListener(this.form_, 'change', (e) => {
       checkUserValidityAfterInteraction_(dev().assertElement(e.target));
       this.validator_.onInput(e);
     });
@@ -487,7 +490,7 @@ export class AmpForm {
 
   /** @private */
   installInputMasking_() {
-    Services.inputmaskServiceForDocOrNull(this.form_).then(
+    Services.inputmaskServiceForDocOrNull(this.ampdoc_).then(
       (inputmaskService) => {
         if (inputmaskService) {
           inputmaskService.install();
@@ -515,7 +518,11 @@ export class AmpForm {
     }
     formDataForAnalytics['formId'] = this.form_.id;
 
-    this.analyticsEvent_(eventType, formDataForAnalytics);
+    try {
+      this.analyticsEvent_(eventType, formDataForAnalytics);
+    } catch (err) {
+      dev().error(TAG, 'Sending analytics failed:', err);
+    }
   }
 
   /**
@@ -543,10 +550,11 @@ export class AmpForm {
     this.form_.classList.remove('user-valid');
     this.form_.classList.remove('user-invalid');
 
-    const validityElements = this.form_.querySelectorAll(
+    const validityElements = formElementsQuerySelectorAll(
+      this.form_,
       '.user-valid, .user-invalid'
     );
-    iterateCursor(validityElements, (element) => {
+    validityElements.forEach((element) => {
       element.classList.remove('user-valid');
       element.classList.remove('user-invalid');
     });
@@ -701,12 +709,15 @@ export class AmpForm {
 
   /**
    * Get form fields that require variable substitutions
-   * @return {!IArrayLike<!HTMLInputElement>}
+   * @return {!Array<!HTMLInputElement>}
    * @private
    */
   getVarSubsFields_() {
     // Fields that support var substitutions.
-    return this.form_.querySelectorAll('[type="hidden"][data-amp-replace]');
+    return formElementsQuerySelectorAll(
+      this.form_,
+      '[type="hidden"][data-amp-replace]'
+    );
   }
 
   /**
@@ -771,26 +782,22 @@ export class AmpForm {
    * @private
    */
   handleSsrTemplate_(trust) {
-    let request;
     // Render template for the form submitting state.
     const values = this.getFormAsObject_();
     return this.renderTemplate_(values)
-      .then(() =>
-        this.actions_.trigger(
+      .then(() => {
+        return this.actions_.trigger(
           this.form_,
           FormEvents.SUBMIT,
           /* event */ null,
           trust
-        )
-      )
-      .then(() =>
-        this.requestForFormFetch(
+        );
+      })
+      .then(() => {
+        const request = this.requestForFormFetch(
           dev().assertString(this.xhrAction_),
           this.method_
-        )
-      )
-      .then((formRequest) => {
-        request = formRequest;
+        );
         request.fetchOpt = setupInit(request.fetchOpt);
         request.fetchOpt = setupAMPCors(
           this.win_,
@@ -887,7 +894,7 @@ export class AmpForm {
 
   /**
    * Perform asynchronous variable substitution on the fields that require it.
-   * @param {!IArrayLike<!HTMLInputElement>} varSubsFields
+   * @param {!Array<!HTMLInputElement>} varSubsFields
    * @return {!Promise}
    * @private
    */
@@ -947,10 +954,9 @@ export class AmpForm {
    * @private
    */
   doVerifyXhr_() {
-    const noVerifyFields = toArray(
-      this.form_.querySelectorAll(
-        `[${escapeCssSelectorIdent(FORM_VERIFY_OPTOUT)}]`
-      )
+    const noVerifyFields = formElementsQuerySelectorAll(
+      this.form_,
+      `[${escapeCssSelectorIdent(FORM_VERIFY_OPTOUT)}]`
     );
     const denylist = noVerifyFields.map((field) => field.name || field.id);
 
@@ -973,12 +979,13 @@ export class AmpForm {
    */
   doXhr_(url, method, opt_extraFields, opt_fieldDenylist) {
     this.assertSsrTemplate_(false, 'XHRs should be proxied.');
-    return this.requestForFormFetch(
+    const request = this.requestForFormFetch(
       url,
       method,
       opt_extraFields,
       opt_fieldDenylist
-    ).then((request) => this.xhr_.fetch(request.xhrUrl, request.fetchOpt));
+    );
+    return this.xhr_.fetch(request.xhrUrl, request.fetchOpt);
   }
 
   /**
@@ -988,18 +995,8 @@ export class AmpForm {
    * @private
    */
   trustForSubmitResponse_(incomingTrust) {
-    // TODO(choumx): Remove this expected error before Q1 2020.
-    if (incomingTrust <= ActionTrust.DEFAULT) {
-      dev().expectedError(
-        TAG,
-        'Recursive form submissions are scheduled to be deprecated by 1/1/2020. ' +
-          'See https://github.com/ampproject/amphtml/issues/24894.'
-      );
-    }
-    // Only degrade trust across form submission in AMP4EMAIL for now.
-    return this.isAmp4Email_
-      ? /** @type {!ActionTrust} */ (incomingTrust - 1)
-      : incomingTrust;
+    // Degrade trust across form submission.
+    return /** @type {!ActionTrust} */ (incomingTrust - 1);
   }
 
   /**
@@ -1066,8 +1063,8 @@ export class AmpForm {
       promise = Promise.resolve(null);
     }
     return promise.then((responseJson) => {
-      this.triggerFormSubmitInAnalytics_('amp-form-submit-error');
       this.handleSubmitFailure_(e, responseJson, incomingTrust);
+      this.triggerFormSubmitInAnalytics_('amp-form-submit-error');
       this.maybeHandleRedirect_(e.response);
     });
   }
@@ -1145,13 +1142,14 @@ export class AmpForm {
    * @private
    */
   assertNoSensitiveFields_() {
-    const fields = this.form_.querySelectorAll(
+    const fields = formElementsQuerySelectorAll(
+      this.form_,
       'input[type=password],input[type=file]'
     );
     userAssert(
       fields.length == 0,
       'input[type=password] or input[type=file] ' +
-        'may only appear in form[method=post]'
+        'may only appear with form[method=post]'
     );
   }
 
@@ -1197,7 +1195,7 @@ export class AmpForm {
         this.form_
       );
       try {
-        const urlService = Services.urlForDoc(this.form_);
+        const urlService = Services.urlForDoc(this.ampdoc_);
         urlService.assertAbsoluteHttpOrHttpsUrl(redirectTo);
         urlService.assertHttpsUrl(redirectTo, 'AMP-Redirect-To', 'Url');
       } catch (e) {
@@ -1208,7 +1206,7 @@ export class AmpForm {
           redirectTo
         );
       }
-      const navigator = Services.navigationForDoc(this.form_);
+      const navigator = Services.navigationForDoc(this.ampdoc_);
       navigator.navigateTo(this.win_, redirectTo, REDIRECT_TO_HEADER);
     }
   }
@@ -1296,12 +1294,24 @@ export class AmpForm {
         p = this.ssrTemplateHelper_
           .applySsrOrCsrTemplate(devAssert(container), data)
           .then((rendered) => {
-            rendered.id = messageId;
-            rendered.setAttribute('i-amphtml-rendered', '');
+            // TODO(#29566): Simplify section appending rendered contents to DOM.
+            let renderContainer;
+            if (isArray(rendered)) {
+              if (rendered.length === 1) {
+                renderContainer = rendered[0];
+              } else {
+                renderContainer = document.createElement('div');
+                rendered.forEach((child) => renderContainer.appendChild(child));
+              }
+            } else {
+              renderContainer = rendered;
+            }
+            renderContainer.id = messageId;
+            renderContainer.setAttribute('i-amphtml-rendered', '');
             return this.mutator_.mutateElement(
               dev().assertElement(container),
               () => {
-                container.appendChild(rendered);
+                container.appendChild(dev().assertElement(renderContainer));
                 const renderedEvent = createCustomEvent(
                   this.win_,
                   AmpEvents.DOM_UPDATE,
@@ -1413,8 +1423,9 @@ export class AmpForm {
     const queryParams = parseQueryString(this.win_.location.search);
     Object.keys(queryParams).forEach((key) => {
       // Typecast since Closure is missing NodeList union type in HTMLFormElement.elements.
-      const formControls = /** @type {(!Element|!NodeList)} */ (this.form_
-        .elements[key]);
+      const formControls = /** @type {(!Element|!NodeList)} */ (
+        this.form_.elements[key]
+      );
       if (!formControls) {
         return;
       }
@@ -1450,14 +1461,45 @@ export class AmpForm {
   }
 }
 
+/**
+ * Returns all elements of form.elements
+ * that match the selectors.
+ * @param {!HTMLFormElement} form
+ * @param {string} query
+ * @return {!Array<HTMLElement>}
+ */
+export function formElementsQuerySelectorAll(form, query) {
+  return Array.from(form.elements).filter((element) => matches(element, query));
+}
+
+/**
+ * Returns the first element for the form.elements
+ * that match the selectors.
+ * @param {!HTMLFormElement} form
+ * @param {string} query
+ * @return {?HTMLElement}
+ */
+export function formElementsQuerySelector(form, query) {
+  for (let i = 0; i < form.elements.length; i++) {
+    const element = form.elements[i];
+    if (matches(element, query)) {
+      return element;
+    }
+  }
+  return null;
+}
+
 /**
  * Checks user validity for all inputs, fieldsets and the form.
  * @param {!HTMLFormElement} form
  * @return {boolean} Whether the form is currently valid or not.
  */
 function checkUserValidityOnSubmission(form) {
-  const elements = form.querySelectorAll('input,select,textarea,fieldset');
-  iterateCursor(elements, (element) => checkUserValidity(element));
+  const elements = formElementsQuerySelectorAll(
+    form,
+    'input,select,textarea,fieldset'
+  );
+  elements.forEach((element) => checkUserValidity(element));
   return checkUserValidity(form);
 }
 
@@ -1497,10 +1539,11 @@ function updateInvalidTypesClasses(element) {
 function removeValidityStateClasses(form) {
   const dummyInput = document.createElement('input');
   for (const validityState in dummyInput.validity) {
-    const elements = form.querySelectorAll(
+    const elements = formElementsQuerySelectorAll(
+      form,
       `.${escapeCssSelectorIdent(validityState)}`
     );
-    iterateCursor(elements, (element) => {
+    elements.forEach((element) => {
       dev().assertElement(element).classList.remove(validityState);
     });
   }
@@ -1580,6 +1623,7 @@ export function checkUserValidityAfterInteraction_(input) {
 
 /**
  * Bootstraps the amp-form elements
+ * @implements {../../src/service.Disposable}
  */
 export class AmpFormService {
   /**
@@ -1591,6 +1635,15 @@ export class AmpFormService {
       this.installHandlers_(ampdoc)
     );
 
+    /** @param  {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc */
+    this.ampdoc_ = ampdoc;
+
+    /** @const @private {!Array<UnlistenDef>} */
+    this.unlisteners_ = [];
+
+    /** @const @private {!Object<string, WeakMap<HTMLFormElement, Array<function(!Event)>>>} */
+    this.eventHandlers_ = {};
+
     // Dispatch a test-only event for integration tests.
     if (getMode().test) {
       this.whenInitialized_.then(() => {
@@ -1671,6 +1724,62 @@ export class AmpFormService {
     });
   }
 
+  /** @override */
+  dispose() {
+    while (this.unlisteners_.length > 0) {
+      const unlisten = this.unlisteners_.pop();
+      unlisten();
+    }
+  }
+
+  /**
+   * Adds handler for the form for a given type, when the
+   * rootNode gets the signal.
+   * @param {!HTMLFormElement} form
+   * @param {string} type
+   * @param {function(!Event)} handler
+   * @param {boolean=} opt_options
+   */
+  addFormEventListener(form, type, handler, opt_options) {
+    if (!hasOwn(this.eventHandlers_, type)) {
+      this.eventHandlers_[type] = new WeakMap();
+      this.unlisteners_.push(
+        listen(
+          this.ampdoc_.getRootNode(),
+          type,
+          (e) => {
+            let {form} = e.target;
+
+            // If it's an AMP element that does not have a native form attribute,
+            // then find the form by either querySelector for based upon 'form'
+            // attribute on the element or traversing up.
+            if (!form) {
+              dev().assertElement(e.target);
+              const formId = e.target.getAttribute('form');
+              form = formId
+                ? this.ampdoc_.getRootNode().querySelector(formId)
+                : closestAncestorElementBySelector(e.target, 'form');
+            }
+
+            // Only call handlers if the element has a registered form.
+            if (form && this.eventHandlers_[type].has(form)) {
+              this.eventHandlers_[type].get(form).forEach((handlerForForm) => {
+                handlerForForm(e);
+              });
+            }
+          },
+          opt_options
+        )
+      );
+    }
+    const handlersArr = this.eventHandlers_[type].get(form) || [];
+    handlersArr.push(handler);
+    this.eventHandlers_[type].set(form, handlersArr);
+    this.unlisteners_.push(() => {
+      this.eventHandlers_[type].delete(form);
+    });
+  }
+
   /**
    * Listen for Ctrl/Cmd + Enter in textarea elements
    * to trigger form submission when relevant.
diff --git a/extensions/amp-form/0.1/form-dirtiness.js b/extensions/amp-form/0.1/form-dirtiness.js
index 0ff09ad76d62a..2c89fef6ff669 100644
--- a/extensions/amp-form/0.1/form-dirtiness.js
+++ b/extensions/amp-form/0.1/form-dirtiness.js
@@ -14,11 +14,13 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../../src/amp-events';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
+import {Services} from '../../../src/services';
 import {createCustomEvent} from '../../../src/event-helper';
 import {createFormDataWrapper} from '../../../src/form-data-wrapper';
-import {dev} from '../../../src/log';
-import {dict, map} from '../../../src/utils/object';
+import {dev, devAssert} from '../../../src/log';
+import {dict, map} from '../../../src/core/types/object';
+import {getServiceForDocOrNull} from '../../../src/service';
 import {isDisabled, isFieldDefault, isFieldEmpty} from '../../../src/form';
 
 export const DIRTINESS_INDICATOR_CLASS = 'amp-form-dirty';
@@ -30,6 +32,9 @@ const SUPPORTED_TAG_NAMES = {
   'TEXTAREA': true,
 };
 
+/** @const {string} */
+const TAG = 'amp-form';
+
 export class FormDirtiness {
   /**
    * @param {!HTMLFormElement} form
@@ -42,6 +47,12 @@ export class FormDirtiness {
     /** @private @const {!Window} */
     this.win_ = win;
 
+    /** @const {!../../../src/service/ampdoc-impl.AmpDoc}  */
+    const ampdoc = Services.ampdoc(this.form_);
+
+    /** @const @private {?AmpFormService} */
+    this.ampFormService_ = getServiceForDocOrNull(ampdoc, TAG);
+
     /** @private {number} */
     this.dirtyFieldCount_ = 0;
 
@@ -130,12 +141,22 @@ export class FormDirtiness {
    * @private
    */
   installEventHandlers_() {
-    this.form_.addEventListener('input', this.onInput_.bind(this));
-    this.form_.addEventListener('reset', this.onReset_.bind(this));
+    devAssert(this.ampFormService_);
+    this.ampFormService_.addFormEventListener(
+      this.form_,
+      'input',
+      this.onInput_.bind(this)
+    );
+    this.ampFormService_.addFormEventListener(
+      this.form_,
+      'reset',
+      this.onReset_.bind(this)
+    );
 
     // `amp-bind` dispatches the custom event `FORM_VALUE_CHANGE` when it
     // mutates the value of a form field (e.g. textarea, input, etc)
-    this.form_.addEventListener(
+    this.ampFormService_.addFormEventListener(
+      this.form_,
       AmpEvents.FORM_VALUE_CHANGE,
       this.onInput_.bind(this)
     );
@@ -251,7 +272,7 @@ export class FormDirtiness {
  * @return {boolean}
  */
 function shouldSkipDirtinessCheck(field) {
-  const {tagName, name, hidden} = field;
+  const {hidden, name, tagName} = field;
 
   if (!SUPPORTED_TAG_NAMES[tagName]) {
     return true;
diff --git a/extensions/amp-form/0.1/form-proxy.js b/extensions/amp-form/0.1/form-proxy.js
index 8e0aa2cfcdff3..7a4e90d3f6f53 100644
--- a/extensions/amp-form/0.1/form-proxy.js
+++ b/extensions/amp-form/0.1/form-proxy.js
@@ -16,7 +16,6 @@
 
 import {Services} from '../../../src/services';
 import {dev, devAssert} from '../../../src/log';
-import {startsWith} from '../../../src/string';
 import {toWin} from '../../../src/types';
 
 /**
@@ -110,7 +109,7 @@ function createFormProxyConstr(win) {
         // Exclude constants.
         name.toUpperCase() == name ||
         // Exclude on-events.
-        startsWith(name, 'on') ||
+        name.startsWith('on') ||
         // Exclude properties that already been created.
         ObjectProto.hasOwnProperty.call(FormProxyProto, name) ||
         // Exclude some properties. Currently only used for testing.
@@ -171,7 +170,7 @@ function setupLegacyProxy(form, proxy) {
       // Exclude constants.
       name.toUpperCase() == name ||
       // Exclude on-events.
-      startsWith(name, 'on')
+      name.startsWith('on')
     ) {
       continue;
     }
diff --git a/extensions/amp-form/0.1/form-submit-service.js b/extensions/amp-form/0.1/form-submit-service.js
index 9884cc929a46e..16bf84452359d 100644
--- a/extensions/amp-form/0.1/form-submit-service.js
+++ b/extensions/amp-form/0.1/form-submit-service.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Observable} from '../../../src/observable';
+import {Observable} from '../../../src/core/data-structures/observable';
 
 /**
  * @typedef {{
diff --git a/extensions/amp-form/0.1/form-validators.js b/extensions/amp-form/0.1/form-validators.js
index cec1b9b037170..1db4653d39d65 100644
--- a/extensions/amp-form/0.1/form-validators.js
+++ b/extensions/amp-form/0.1/form-validators.js
@@ -18,6 +18,7 @@ import {Services} from '../../../src/services';
 import {ValidationBubble} from './validation-bubble';
 import {createCustomEvent} from '../../../src/event-helper';
 import {dev} from '../../../src/log';
+import {formElementsQuerySelectorAll} from './amp-form';
 import {iterateCursor} from '../../../src/dom';
 import {toWin} from '../../../src/types';
 
@@ -93,7 +94,7 @@ export class FormValidator {
 
     /**
      * Tribool indicating last known validity of form.
-     * @private {boolean|null}
+     * @private {?boolean}
      */
     this.formValidity_ = null;
   }
@@ -115,7 +116,7 @@ export class FormValidator {
 
   /** @return {!NodeList} */
   inputs() {
-    return this.form.querySelectorAll('input,select,textarea');
+    return formElementsQuerySelectorAll(this.form, 'input,select,textarea');
   }
 
   /**
diff --git a/extensions/amp-form/0.1/form-verifiers.js b/extensions/amp-form/0.1/form-verifiers.js
index 544e25d2dd09d..87c428fab979a 100644
--- a/extensions/amp-form/0.1/form-verifiers.js
+++ b/extensions/amp-form/0.1/form-verifiers.js
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import {LastAddedResolver} from '../../../src/utils/promise';
+import {LastAddedResolver} from '../../../src/core/data-structures/promise';
+import {formElementsQuerySelector} from './amp-form.js';
 import {isFieldDefault} from '../../../src/form';
 import {iterateCursor} from '../../../src/dom';
 import {user} from '../../../src/log';
@@ -247,7 +248,7 @@ export class AsyncVerifier extends FormVerifier {
       errors.every((error) => previousError.name !== error.name);
     const fixedElements = previousErrors
       .filter(isFixed)
-      .map((e) => this.form_./*OK*/ querySelector(`[name="${e.name}"]`));
+      .map((e) => formElementsQuerySelector(this.form_, `[name="${e.name}"]`));
 
     return /** @type {!UpdatedErrorsDef} */ ({
       updatedElements: errorElements.concat(fixedElements),
diff --git a/extensions/amp-form/0.1/test-e2e/test-ssr.js b/extensions/amp-form/0.1/test-e2e/test-ssr.js
index 8f75cbd45ab69..9ec7987f527a3 100644
--- a/extensions/amp-form/0.1/test-e2e/test-ssr.js
+++ b/extensions/amp-form/0.1/test-e2e/test-ssr.js
@@ -17,7 +17,7 @@
 describes.endtoend(
   'amp-form',
   {
-    testUrl: 'http://localhost:8000/test/fixtures/e2e/amp-form/amp-form.html',
+    fixture: 'amp-form/amp-form.html',
     environments: ['single'],
   },
   async (env) => {
@@ -50,7 +50,7 @@ describes.endtoend(
 describes.endtoend(
   'amp-form SSR templates',
   {
-    testUrl: 'http://localhost:8000/test/fixtures/e2e/amp-form/amp-form.html',
+    fixture: 'amp-form/amp-form.html',
     environments: ['viewer-demo'],
   },
   async (env) => {
diff --git a/extensions/amp-form/0.1/test/integration/test-integration-form-verifiers.js b/extensions/amp-form/0.1/test/integration/test-integration-form-verifiers.js
index d14aba9bf65c5..bc2bfdcdcdf5a 100644
--- a/extensions/amp-form/0.1/test/integration/test-integration-form-verifiers.js
+++ b/extensions/amp-form/0.1/test/integration/test-integration-form-verifiers.js
@@ -17,10 +17,10 @@ import {poll} from '../../../../../testing/iframe';
 
 const RENDER_TIMEOUT = 15000;
 
-const describeChrome = describe.configure().ifChrome();
+const describeChrome = describes.sandboxed.configure().ifChrome();
 
 // TODO(cvializ, #19647): Broken on SL Chrome 71.
-describeChrome.skip('amp-form verifiers', function () {
+describeChrome.skip('amp-form verifiers', {}, function () {
   const {testServerPort} = window.ampTestRuntimeConfig;
   const baseUrl = `http://localhost:${testServerPort}`;
 
diff --git a/extensions/amp-form/0.1/test/integration/test-integration-form.js b/extensions/amp-form/0.1/test/integration/test-integration-form.js
index ece7bc0931364..2c91ce0b5a3a8 100644
--- a/extensions/amp-form/0.1/test/integration/test-integration-form.js
+++ b/extensions/amp-form/0.1/test/integration/test-integration-form.js
@@ -14,14 +14,16 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../../../../src/amp-events';
+import * as Service from '../../../../../src/service';
+import {AmpEvents} from '../../../../../src/core/constants/amp-events';
 import {AmpForm, AmpFormService} from '../../amp-form';
 import {AmpMustache} from '../../../../amp-mustache/0.1/amp-mustache';
 import {Services} from '../../../../../src/services';
 import {installGlobalSubmitListenerForDoc} from '../../../../../src/document-submit';
 import {listenOncePromise} from '../../../../../src/event-helper';
 import {poll} from '../../../../../testing/iframe';
-import {registerExtendedTemplate} from '../../../../../src/service/template-impl';
+import {registerExtendedTemplateForDoc} from '../../../../../src/service/template-impl';
+import {stubElementsForDoc} from '../../../../../src/service/custom-element-registry';
 
 /** @const {number} */
 const RENDER_TIMEOUT = 15000;
@@ -33,12 +35,14 @@ describes.realWin(
       runtimeOn: true,
       ampdoc: 'single',
     },
+    extensions: ['amp-form'], // amp-form is installed as service.
     mockFetch: false,
   },
   (env) => {
     const {testServerPort} = window.ampTestRuntimeConfig;
-    const baseUrl = `http://localhost:${testServerPort}`;
+    const baseUrl = `http://localhost:${testServerPort || '9876'}`;
     let doc;
+    let ampFormService;
 
     const realSetTimeout = window.setTimeout;
     const stubSetTimeout = (callback, delay) => {
@@ -52,22 +56,38 @@ describes.realWin(
     beforeEach(() => {
       doc = env.win.document;
 
-      env.sandbox.stub(Services, 'formSubmitForDoc').returns(
-        Promise.resolve(() => {
-          fire: () => {};
-        })
-      );
+      env.sandbox.stub(Services, 'formSubmitForDoc').resolves({
+        fire: () => {},
+      });
 
       const mustache = document.createElement('script');
       mustache.setAttribute('custom-template', 'amp-mustache');
+      env.sandbox
+        .stub(mustache, 'src')
+        .value('https://cdn.ampproject.org/v0/amp-mustache-0.1.js');
       doc.body.appendChild(mustache);
-      registerExtendedTemplate(env.win, 'amp-mustache', AmpMustache);
+      registerExtendedTemplateForDoc(env.ampdoc, 'amp-mustache', AmpMustache);
 
       const form = document.createElement('script');
       form.setAttribute('custom-element', 'amp-form');
+      env.sandbox
+        .stub(form, 'src')
+        .value('https://cdn.ampproject.org/v0/amp-form-0.1.js');
       doc.head.appendChild(form);
 
-      new AmpFormService(env.ampdoc);
+      stubElementsForDoc(env.ampdoc);
+
+      ampFormService = new AmpFormService(env.ampdoc);
+      const originalGetServiceForDocOrNull = Service.getServiceForDocOrNull;
+
+      env.sandbox
+        .stub(Service, 'getServiceForDocOrNull')
+        .callsFake((ampdoc, id) => {
+          if (id === 'amp-form') {
+            return ampFormService;
+          }
+          return originalGetServiceForDocOrNull(ampdoc, id);
+        });
 
       // Wait for submit listener to be installed before starting tests.
       return installGlobalSubmitListenerForDoc(env.ampdoc);
diff --git a/extensions/amp-form/0.1/test/test-amp-form.js b/extensions/amp-form/0.1/test/test-amp-form.js
index a4c0ea4908024..b34d2555d461b 100644
--- a/extensions/amp-form/0.1/test/test-amp-form.js
+++ b/extensions/amp-form/0.1/test/test-amp-form.js
@@ -15,16 +15,16 @@
  */
 
 import '../../../amp-mustache/0.1/amp-mustache';
-import '../../../amp-selector/0.1/amp-selector';
 import * as xhrUtils from '../../../../src/utils/xhr-utils';
 import {ActionService} from '../../../../src/service/action-impl';
-import {ActionTrust} from '../../../../src/action-constants';
-import {AmpEvents} from '../../../../src/amp-events';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
+import {AmpEvents} from '../../../../src/core/constants/amp-events';
 import {
   AmpForm,
   AmpFormService,
   checkUserValidityAfterInteraction_,
 } from '../amp-form';
+import {AmpSelector} from '../../../amp-selector/0.1/amp-selector';
 import {
   AsyncInputAttributes,
   AsyncInputClasses,
@@ -33,12 +33,14 @@ import {DIRTINESS_INDICATOR_CLASS} from '../form-dirtiness';
 import {Services} from '../../../../src/services';
 import {cidServiceForDocForTesting} from '../../../../src/service/cid-impl';
 import {createCustomEvent} from '../../../../src/event-helper';
+import {createElementWithAttributes} from '../../../../src/dom';
 import {
   createFormDataWrapper,
   isFormDataWrapper,
 } from '../../../../src/form-data-wrapper';
-import {fromIterator} from '../../../../src/utils/array';
-import {parseQueryString} from '../../../../src/url.js';
+import {fromIterator} from '../../../../src/core/types/array';
+import {macroTask} from '../../../../testing/yield.js';
+import {parseQueryString} from '../../../../src/core/types/string/url';
 import {
   setCheckValiditySupportedForTesting,
   setReportValiditySupportedForTesting,
@@ -73,7 +75,8 @@ describes.repeated(
           document = env.ampdoc.getRootNode();
           timer = Services.timerFor(env.win);
           const ownerDoc = document.ownerDocument || document;
-          createElement = ownerDoc.createElement.bind(ownerDoc);
+          createElement = (tagName, attrs) =>
+            createElementWithAttributes(ownerDoc, tagName, attrs);
           createTextNode = ownerDoc.createTextNode.bind(ownerDoc);
 
           // Force sync mutateElement to make testing easier.
@@ -101,6 +104,7 @@ describes.repeated(
           env.sandbox
             .stub(ampForm.ssrTemplateHelper_, 'isEnabled')
             .returns(false);
+          env.sandbox.stub(ampForm, 'analyticsEvent_');
           return Promise.resolve(ampForm);
         }
 
@@ -223,6 +227,54 @@ describes.repeated(
           setReportValiditySupportedForTesting(undefined);
         });
 
+        describe('AmpFormService event handler', () => {
+          let ampFormService;
+
+          beforeEach(() => {
+            ampFormService = new AmpFormService(env.ampdoc);
+          });
+
+          it('should add handler for different types', () => {
+            const form = getForm();
+
+            ampFormService.addFormEventListener(form, 'blur', () => {});
+            ampFormService.addFormEventListener(form, 'submit', () => {});
+            ampFormService.addFormEventListener(form, 'change', () => {});
+            expect(ampFormService.unlisteners_.length).to.equal(6);
+            expect(Object.keys(ampFormService.eventHandlers_).length).to.equal(
+              3
+            );
+          });
+
+          it('should add handlers for different forms', () => {
+            const form = getForm();
+            const form2 = getForm();
+
+            ampFormService.addFormEventListener(form, 'blur', () => {});
+            ampFormService.addFormEventListener(form2, 'blur', () => {});
+            ampFormService.addFormEventListener(form, 'submit', () => {});
+            ampFormService.addFormEventListener(form2, 'submit', () => {});
+            expect(ampFormService.unlisteners_.length).to.equal(6);
+            expect(Object.keys(ampFormService.eventHandlers_).length).to.equal(
+              2
+            );
+          });
+
+          it('should dispose of all listeners', () => {
+            const form = getForm();
+
+            ampFormService.addFormEventListener(form, 'blur', () => {});
+            ampFormService.addFormEventListener(form, 'submit', () => {});
+            ampFormService.addFormEventListener(form, 'change', () => {});
+
+            ampFormService.dispose();
+            expect(ampFormService.unlisteners_.length).to.equal(0);
+            Object.keys(ampFormService.eventHandlers_).forEach((key) => {
+              expect(ampFormService.eventHandlers_[key].has(form)).to.be.false;
+            });
+          });
+        });
+
         describe('Server side template rendering', () => {
           let getSsrAmpFormPromise;
           let event;
@@ -245,7 +297,6 @@ describes.repeated(
               ampForm.method_ = 'GET';
               env.sandbox.stub(form, 'submit');
               env.sandbox.stub(form, 'checkValidity').returns(true);
-              env.sandbox.stub(ampForm, 'analyticsEvent_');
               ampForm.ssrTemplateHelper_.isEnabled.restore();
               env.sandbox
                 .stub(ampForm.ssrTemplateHelper_, 'isEnabled')
@@ -320,9 +371,8 @@ describes.repeated(
                 .onSecondCall()
                 .resolves(response);
 
-              const handleSubmitEventPromise = ampForm.handleSubmitEvent_(
-                event
-              );
+              const handleSubmitEventPromise =
+                ampForm.handleSubmitEvent_(event);
               return whenCalled(ssr)
                 .then(() => {
                   expect(ampForm.ssrTemplateHelper_.ssr).to.have.been.called;
@@ -395,9 +445,8 @@ describes.repeated(
                 .onSecondCall()
                 .resolves(response);
 
-              const handleSubmitEventPromise = ampForm.handleSubmitEvent_(
-                event
-              );
+              const handleSubmitEventPromise =
+                ampForm.handleSubmitEvent_(event);
               return whenCalled(ssr)
                 .then(() => {
                   expect(ampForm.ssrTemplateHelper_.ssr).to.have.been.called;
@@ -475,9 +524,8 @@ describes.repeated(
                 'renderTemplate_'
               );
 
-              const handleSubmitEventPromise = ampForm.handleSubmitEvent_(
-                event
-              );
+              const handleSubmitEventPromise =
+                ampForm.handleSubmitEvent_(event);
               return whenCalled(renderTemplate, 2).then(() => {
                 expect(ampForm.ssrTemplateHelper_.applySsrOrCsrTemplate).to.have
                   .been.called;
@@ -608,19 +656,33 @@ describes.repeated(
               /Illegal input name, __amp_source_origin found/
             );
           });
+          form.removeChild(illegalInput);
+
+          form.setAttribute('id', 'registration');
+          illegalInput.setAttribute('form', 'registration');
+          document.body.appendChild(illegalInput);
+          allowConsoleError(() => {
+            expect(() => new AmpForm(form)).to.throw(
+              /Illegal input name, __amp_source_origin found/
+            );
+          });
           document.body.removeChild(form);
         });
 
-        it('should listen to submit, blur and input events', () => {
+        it('should listen to submit, blur and input events', async () => {
           const form = getForm();
           document.body.appendChild(form);
-          form.addEventListener = env.sandbox.spy();
+          const spy = env.sandbox.spy(
+            AmpFormService.prototype,
+            'addFormEventListener'
+          );
           form.setAttribute('action-xhr', 'https://example.com');
           new AmpForm(form);
-          expect(form.addEventListener).to.be.called;
-          expect(form.addEventListener).to.be.calledWith('submit');
-          expect(form.addEventListener).to.be.calledWith('blur');
-          expect(form.addEventListener).to.be.calledWith('input');
+          await macroTask();
+          expect(spy).to.be.called;
+          expect(spy).to.be.calledWith(form, 'submit');
+          expect(spy).to.be.calledWith(form, 'blur');
+          expect(spy).to.be.calledWith(form, 'input');
           expect(form.className).to.contain('i-amphtml-form');
           document.body.removeChild(form);
         });
@@ -696,7 +758,8 @@ describes.repeated(
           env.sandbox.stub(ampForm.xhr_, 'fetch').resolves();
           env.sandbox.stub(ampForm, 'analyticsEvent_');
           env.sandbox.spy(form, 'checkValidity');
-          const errorRe = /Only XHR based \(via action-xhr attribute\) submissions are supported/;
+          const errorRe =
+            /Only XHR based \(via action-xhr attribute\) submissions are supported/;
           expectAsyncConsoleError(errorRe);
           return ampForm.handleSubmitEvent_(event).catch(() => {
             expect(event.preventDefault).to.be.called;
@@ -715,6 +778,17 @@ describes.repeated(
           emailInput.setAttribute('type', 'email');
           emailInput.setAttribute('required', '');
           form.appendChild(emailInput);
+
+          const emailInput2 = createElement('input');
+          emailInput2.setAttribute('name', 'email');
+          emailInput2.setAttribute('type', 'email');
+          emailInput2.setAttribute('required', '');
+          form.setAttribute('id', 'registration');
+          emailInput2.setAttribute('id', 'registration');
+
+          form.appendChild(emailInput);
+          document.body.appendChild(emailInput2);
+
           const ampForm = new AmpForm(form);
           env.sandbox.stub(ampForm.xhr_, 'fetch').resolves();
           const event = {
@@ -725,6 +799,7 @@ describes.repeated(
 
           env.sandbox.spy(form, 'checkValidity');
           env.sandbox.spy(emailInput, 'reportValidity');
+          env.sandbox.spy(emailInput2, 'reportValidity');
 
           env.sandbox.stub(ampForm, 'handleXhrSubmitSuccess_').resolves();
           return ampForm.handleSubmitEvent_(event).then(() => {
@@ -736,6 +811,7 @@ describes.repeated(
 
             // However reporting validity shouldn't happen when novalidate.
             expect(emailInput.reportValidity).to.not.be.called;
+            expect(emailInput2.reportValidity).to.not.be.called;
           });
         });
 
@@ -752,7 +828,8 @@ describes.repeated(
           };
           env.sandbox.stub(ampForm.xhr_, 'fetch').resolves();
           env.sandbox.spy(form, 'checkValidity');
-          const submitErrorRe = /Only XHR based \(via action-xhr attribute\) submissions are supported/;
+          const submitErrorRe =
+            /Only XHR based \(via action-xhr attribute\) submissions are supported/;
           expectAsyncConsoleError(submitErrorRe);
           return ampForm.handleSubmitEvent_(event).catch(() => {
             expect(event.preventDefault).to.be.called;
@@ -882,6 +959,32 @@ describes.repeated(
           });
         });
 
+        it('should check validity on FORM_VALUE_CHANGE for inputs outside', () => {
+          setCheckValiditySupportedForTesting(true);
+          return getAmpForm(getForm()).then((ampForm) => {
+            const form = ampForm.form_;
+            const emailInput = createElement('input');
+            emailInput.setAttribute('name', 'email');
+            emailInput.setAttribute('required', '');
+            form.setAttribute('id', 'registration');
+            emailInput.setAttribute('form', 'registration');
+            document.body.appendChild(emailInput);
+            document.body.appendChild(form);
+            env.sandbox.spy(form, 'checkValidity');
+            env.sandbox.spy(ampForm.validator_, 'onInput');
+
+            const event = createCustomEvent(
+              env.win,
+              AmpEvents.FORM_VALUE_CHANGE,
+              /* detail */ null,
+              {bubbles: true}
+            );
+            emailInput.dispatchEvent(event);
+            expect(form.checkValidity).to.be.called;
+            expect(ampForm.validator_.onInput).to.be.calledWith(event);
+          });
+        });
+
         it('should allow verifying elements with a presubmit request', () => {
           const formPromise = getAmpForm(getVerificationForm());
           const fetchReject = {
@@ -1118,6 +1221,67 @@ describes.repeated(
           });
         });
 
+        it('should render responses even if analytics throws', () => {
+          expectAsyncConsoleError(/Form submission failed/);
+          expectAsyncConsoleError(/Sending analytics failed/, 2);
+
+          return getAmpForm(getForm()).then((ampForm) => {
+            const form = ampForm.form_;
+
+            const errorTemplate = createElement('template', {
+              id: 'errorTemplate',
+              type: 'amp-mustache',
+            });
+            errorTemplate.content.appendChild(
+              createTextNode('Sorry, {{name}}')
+            );
+            form.appendChild(errorTemplate);
+
+            const messageContainer = createElement('div', {
+              id: 'message',
+              'submit-error': '',
+              template: 'errorTemplate',
+            });
+            form.appendChild(messageContainer);
+            env.sandbox.stub(ampForm.xhr_, 'fetch').rejects({
+              response: {
+                json: () => {
+                  return Promise.resolve({'name': 'John Doe'});
+                },
+              },
+            });
+            ampForm.analyticsEvent_.throws('Test.');
+            const renderedTemplate = createElement('div');
+            renderedTemplate.innerText = 'Sorry, John Doe';
+            env.sandbox
+              .stub(ampForm.templates_, 'findAndRenderTemplate')
+              .resolves(renderedTemplate);
+            const event = {
+              stopImmediatePropagation: env.sandbox.spy(),
+              target: form,
+              preventDefault: env.sandbox.spy(),
+            };
+
+            const submitEventPromise = ampForm.handleSubmitEvent_(event);
+
+            return whenCalled(ampForm.templates_.findAndRenderTemplate)
+              .then(() => {
+                return ampForm.renderTemplatePromiseForTesting();
+              })
+              .then(() => {
+                expect(ampForm.templates_.findAndRenderTemplate).to.be.called;
+                expect(ampForm.templates_.findAndRenderTemplate).calledWith(
+                  messageContainer,
+                  {'name': 'John Doe'}
+                );
+                expect(mutateElementStub).to.have.been.calledOnce;
+                expect(messageContainer.firstChild).to.equal(renderedTemplate);
+
+                return submitEventPromise;
+              });
+          });
+        });
+
         it('should replace previously rendered responses', () => {
           return getAmpForm(getForm(/*button1*/ true)).then((ampForm) => {
             const form = ampForm.form_;
@@ -1378,7 +1542,6 @@ describes.repeated(
             env.sandbox.stub(ampForm.xhr_, 'fetch').resolves({
               json: () => Promise.resolve({}),
             });
-            env.sandbox.stub(ampForm, 'analyticsEvent_');
 
             const event = {
               stopImmediatePropagation: env.sandbox.spy(),
@@ -1418,18 +1581,21 @@ describes.repeated(
         it('should trigger amp-form-submit after variables substitution', () => {
           return getAmpForm(getForm()).then((ampForm) => {
             const form = ampForm.form_;
+            form.setAttribute('id', 'registration');
             const clientIdField = createElement('input');
             clientIdField.setAttribute('name', 'clientId');
             clientIdField.setAttribute('type', 'hidden');
             clientIdField.value = 'CLIENT_ID(form)';
             clientIdField.setAttribute('data-amp-replace', 'CLIENT_ID');
             form.appendChild(clientIdField);
+
             const canonicalUrlField = createElement('input');
+            canonicalUrlField.setAttribute('form', 'registration');
             canonicalUrlField.setAttribute('name', 'canonicalUrl');
             canonicalUrlField.setAttribute('type', 'hidden');
             canonicalUrlField.value = 'CANONICAL_URL';
             canonicalUrlField.setAttribute('data-amp-replace', 'CANONICAL_URL');
-            form.appendChild(canonicalUrlField);
+            document.body.appendChild(canonicalUrlField);
 
             env.sandbox.stub(form, 'checkValidity').returns(true);
             env.sandbox.stub(ampForm.xhr_, 'fetch').resolves({
@@ -1437,7 +1603,6 @@ describes.repeated(
             });
             env.sandbox.spy(ampForm.urlReplacement_, 'expandInputValueAsync');
             env.sandbox.stub(ampForm.urlReplacement_, 'expandInputValueSync');
-            env.sandbox.stub(ampForm, 'analyticsEvent_');
 
             // Setup some Promises
             const submitPromise = ampForm.submit_(ActionTrust.HIGH);
@@ -1453,7 +1618,7 @@ describes.repeated(
             return Promise.all([submitPromise, fetchWhenCalledPromise]).then(
               () => {
                 const expectedFormData = {
-                  'formId': '',
+                  'formId': 'registration',
                   'formFields[name]': 'John Miller',
                   'formFields[clientId]': env.sandbox.match(/amp-.+/),
                   'formFields[canonicalUrl]':
@@ -1529,9 +1694,8 @@ describes.repeated(
           });
         });
 
-        it('should degrade trust across submit-* in AMP4EMAIL', async () => {
+        it('should degrade trust across submit-*', async () => {
           const form = getForm();
-          form.ownerDocument.documentElement.setAttribute('amp4email', '');
 
           const actions = {
             installActionHandler: () => {},
@@ -1579,7 +1743,6 @@ describes.repeated(
                 fetchResolver = resolve;
               })
             );
-            env.sandbox.stub(ampForm, 'analyticsEvent_');
             env.sandbox.stub(ampForm.actions_, 'trigger');
             const form = ampForm.form_;
             const event = {
@@ -1632,7 +1795,6 @@ describes.repeated(
           return getAmpForm(getForm(/*button1*/ true, /*button2*/ true)).then(
             (ampForm) => {
               let fetchRejecter;
-              env.sandbox.stub(ampForm, 'analyticsEvent_');
               env.sandbox.stub(ampForm.xhr_, 'fetch').returns(
                 new Promise((unusedResolve, reject) => {
                   fetchRejecter = reject;
@@ -1722,6 +1884,7 @@ describes.repeated(
               const form = ampForm.form_;
               ampForm.method_ = 'GET';
               form.setAttribute('method', 'GET');
+              form.setAttribute('id', 'registration');
 
               env.sandbox.stub(ampForm.xhr_, 'fetch').resolves();
               const fieldset = createElement('fieldset');
@@ -1733,7 +1896,8 @@ describes.repeated(
               const usernameInput = createElement('input');
               usernameInput.setAttribute('name', 'nickname');
               usernameInput.setAttribute('required', '');
-              fieldset.appendChild(usernameInput);
+              usernameInput.setAttribute('form', 'registration');
+              document.body.appendChild(usernameInput);
               form.appendChild(fieldset);
               const event = {
                 stopImmediatePropagation: env.sandbox.spy(),
@@ -1784,6 +1948,7 @@ describes.repeated(
                   ampForm.xhr_.fetch.reset();
                   ampForm.xhr_.fetch.resolves();
                   fieldset.disabled = true;
+                  usernameInput.disabled = true;
 
                   submitEventPromise = ampForm.handleSubmitEvent_(event);
 
@@ -1802,6 +1967,7 @@ describes.repeated(
                   ampForm.xhr_.fetch.resolves();
 
                   fieldset.removeAttribute('disabled');
+                  usernameInput.removeAttribute('disabled');
                   usernameInput.removeAttribute('name');
                   emailInput.removeAttribute('required');
                   emailInput.value = '';
@@ -1823,6 +1989,7 @@ describes.repeated(
               const form = ampForm.form_;
               ampForm.method_ = 'GET';
               form.setAttribute('method', 'GET');
+              form.setAttribute('id', 'registration');
 
               env.sandbox.stub(ampForm.xhr_, 'fetch').resolves();
 
@@ -1832,7 +1999,8 @@ describes.repeated(
               otherNamesFS.appendChild(otherName1Input);
               const otherName2Input = createElement('input');
               otherName2Input.setAttribute('name', 'name');
-              otherNamesFS.appendChild(otherName2Input);
+              otherName2Input.setAttribute('form', 'registration');
+              document.body.appendChild(otherName2Input);
               form.appendChild(otherNamesFS);
 
               // Group of Radio buttons.
@@ -1924,6 +2092,7 @@ describes.repeated(
                   ampForm.setState_('submit-success');
                   femaleRadio.checked = true;
                   otherName1Input.value = 'John Maller';
+                  otherName2Input.value = 'Mohn Jaller';
                   ampForm.xhr_.fetch.reset();
                   ampForm.xhr_.fetch.resolves();
 
@@ -1934,8 +2103,8 @@ describes.repeated(
                   expect(ampForm.xhr_.fetch).to.be.calledOnce;
                   expect(ampForm.xhr_.fetch).to.be.calledWith(
                     'https://example.com?name=John%20Miller&name=John%20Maller' +
-                      '&name=&gender=Female&interests=Football&interests=Food&' +
-                      'city=San%20Francisco'
+                      '&name=Mohn%20Jaller&gender=Female&interests=Football' +
+                      '&interests=Food&city=San%20Francisco'
                   );
                   return submitEventPromise;
                 });
@@ -1949,16 +2118,23 @@ describes.repeated(
             setReportValiditySupportedForTesting(false);
             return getAmpForm(getForm(/*button1*/ true)).then((ampForm) => {
               const form = ampForm.form_;
+              form.setAttribute('id', 'registration');
               const fieldset = createElement('fieldset');
               const emailInput = createElement('input');
               emailInput.setAttribute('name', 'email');
               emailInput.setAttribute('type', 'email');
               emailInput.setAttribute('required', '');
               fieldset.appendChild(emailInput);
+              const nameInput = createElement('input');
+              nameInput.setAttribute('name', 'name');
+              nameInput.setAttribute('form', 'registration');
+              nameInput.setAttribute('required', '');
+              document.body.appendChild(nameInput);
               form.appendChild(fieldset);
               env.sandbox.spy(form, 'checkValidity');
               env.sandbox.spy(emailInput, 'checkValidity');
               env.sandbox.spy(fieldset, 'checkValidity');
+              env.sandbox.spy(nameInput, 'checkValidity');
 
               const event = {
                 target: ampForm.form_,
@@ -1967,20 +2143,22 @@ describes.repeated(
               };
 
               // Submit an invalid form
-              const invalidFormPromiseResponse = ampForm.handleSubmitEvent_(
-                event
-              );
+              const invalidFormPromiseResponse =
+                ampForm.handleSubmitEvent_(event);
               return invalidFormPromiseResponse
                 .then(() => {
                   expect(form.checkValidity).to.be.called;
                   expect(emailInput.checkValidity).to.be.called;
                   expect(fieldset.checkValidity).to.be.called;
+                  expect(nameInput.checkValidity).to.be.called;
                   expect(form.className).to.contain('user-invalid');
                   expect(emailInput.className).to.contain('user-invalid');
+                  expect(nameInput.className).to.contain('user-invalid');
                   expect(event.preventDefault).to.be.called;
                   expect(event.stopImmediatePropagation).to.be.called;
 
                   emailInput.value = 'cool@bea.ns';
+                  nameInput.value = 'Bohn Jaller';
 
                   const submitPromise = ampForm.handleSubmitEvent_(event);
                   expect(submitPromise).to.be.ok;
@@ -1989,6 +2167,7 @@ describes.repeated(
                 .then(() => {
                   expect(form.className).to.contain('user-valid');
                   expect(emailInput.className).to.contain('user-valid');
+                  expect(nameInput.className).to.contain('user-valid');
                 });
             });
           });
@@ -1997,6 +2176,7 @@ describes.repeated(
             setReportValiditySupportedForTesting(false);
             return getAmpForm(getForm(/*button1*/ true)).then((ampForm) => {
               const form = ampForm.form_;
+              form.setAttribute('id', 'registration');
               const fieldset = createElement('fieldset');
               const emailInput = createElement('input');
               emailInput.setAttribute('name', 'email');
@@ -2006,7 +2186,8 @@ describes.repeated(
               const usernameInput = createElement('input');
               usernameInput.setAttribute('name', 'nickname');
               usernameInput.setAttribute('required', '');
-              fieldset.appendChild(usernameInput);
+              usernameInput.setAttribute('form', 'registration');
+              document.body.appendChild(usernameInput);
               form.appendChild(fieldset);
               env.sandbox.spy(form, 'checkValidity');
               env.sandbox.spy(emailInput, 'checkValidity');
@@ -2064,6 +2245,7 @@ describes.repeated(
             setReportValiditySupportedForTesting(false);
             return getAmpForm(getForm(/*button1*/ true)).then((ampForm) => {
               const form = ampForm.form_;
+              form.setAttribute('id', 'registration');
               const fieldset = createElement('fieldset');
               const emailInput = createElement('input');
               emailInput.setAttribute('name', 'email');
@@ -2084,6 +2266,25 @@ describes.repeated(
               expect(fieldset.checkValidity).to.not.be.called;
               expect(emailInput.className).to.contain('user-valid');
               expect(form.className).to.not.contain('user-valid');
+
+              emailInput.checkValidity.resetHistory();
+
+              const nameInput = createElement('input');
+              nameInput.setAttribute('name', 'name');
+              nameInput.setAttribute('value', 'Bohn Baller');
+              nameInput.setAttribute('form', 'registration');
+              nameInput.setAttribute('required', '');
+              document.body.appendChild(nameInput);
+              env.sandbox.spy(nameInput, 'checkValidity');
+
+              checkUserValidityAfterInteraction_(nameInput);
+
+              expect(nameInput.checkValidity).to.be.called;
+              expect(form.checkValidity).to.not.be.called;
+              expect(fieldset.checkValidity).to.not.be.called;
+              expect(emailInput.checkValidity).to.not.be.called;
+              expect(nameInput.className).to.contain('user-valid');
+              expect(form.className).to.not.contain('user-valid');
             });
           });
         });
@@ -2135,13 +2336,18 @@ describes.repeated(
         it('should handle clear action and restore initial values', () => {
           const form = getForm();
           document.body.appendChild(form);
+          form.setAttribute('id', 'registration');
 
           const emailInput = createElement('input');
           emailInput.setAttribute('name', 'email');
           emailInput.setAttribute('id', 'email');
           emailInput.setAttribute('type', 'email');
           emailInput.setAttribute('value', 'jack@poc.com');
+          const nameInput = createElement('input');
+          nameInput.setAttribute('name', 'name');
+          nameInput.setAttribute('value', 'John Snow');
           form.appendChild(emailInput);
+          document.body.appendChild(nameInput);
 
           return getAmpForm(form).then((ampForm) => {
             const initalFormValues = ampForm.getFormAsObject_();
@@ -2230,87 +2436,152 @@ describes.repeated(
           });
         });
 
-        it('should submit after timeout of waiting for amp-selector', function () {
+        it('should remove all form state classes when form is cleared w/ outside inputs', () => {
+          const form = getForm();
+          form.setAttribute('method', 'GET');
+          document.body.appendChild(form);
+          form.setAttribute('id', 'registration');
+
+          form.setAttribute(
+            'custom-validation-reporting',
+            'show-all-on-submit'
+          );
+
+          const usernameInput = createElement('input');
+          usernameInput.setAttribute('name', 'username');
+          usernameInput.setAttribute('id', 'username');
+          usernameInput.setAttribute('type', 'text');
+          usernameInput.setAttribute('required', '');
+          usernameInput.setAttribute('value', 'Jack Sparrow');
+          usernameInput.setAttribute('form', 'registration');
+          document.body.appendChild(usernameInput);
+
+          const emailInput = createElement('input');
+          emailInput.setAttribute('name', 'email');
+          emailInput.setAttribute('id', 'email1');
+          emailInput.setAttribute('type', 'email');
+          emailInput.setAttribute('required', '');
+          emailInput.setAttribute('value', '');
+          emailInput.setAttribute('form', 'registration');
+          document.body.appendChild(emailInput);
+
+          const validationMessage = createElement('span');
+          validationMessage.setAttribute(
+            'visible-when-invalid',
+            'valueMissing'
+          );
+          validationMessage.setAttribute('validation-for', 'email1');
+          form.appendChild(validationMessage);
+
+          return getAmpForm(form).then((ampForm) => {
+            // trigger form validations
+            ampForm.checkValidity_();
+            const formValidator = ampForm.validator_;
+            // show validity message
+            formValidator.report();
+
+            expect(usernameInput.className).to.contain('user-valid');
+            expect(emailInput.className).to.contain('user-invalid');
+            expect(emailInput.className).to.contain('valueMissing');
+            expect(ampForm.form_.className).to.contain('user-invalid');
+            expect(validationMessage.className).to.contain('visible');
+
+            ampForm.handleClearAction_();
+
+            expect(usernameInput.className).to.not.contain('user-valid');
+            expect(emailInput.className).to.not.contain('user-invalid');
+            expect(emailInput.className).to.not.contain('valueMissing');
+            expect(ampForm.form_.className).to.contain('amp-form-initial');
+            expect(validationMessage.className).to.not.contain('visible');
+          });
+        });
+
+        it('should submit after timeout of waiting for amp-selector', async function () {
           expectAsyncConsoleError(/Form submission failed/);
           this.timeout(3000);
-          return getAmpForm(getForm()).then((ampForm) => {
-            const form = ampForm.form_;
-            const selector = createElement('amp-selector');
-            selector.setAttribute('name', 'color');
-            form.appendChild(selector);
 
-            env.sandbox
-              .stub(selector, 'whenBuilt')
-              .returns(new Promise((unusedResolve) => {}));
-            env.sandbox.spy(ampForm, 'handleSubmitAction_');
+          const ampForm = await getAmpForm(getForm());
+          const form = ampForm.form_;
+          const selector = createElement('amp-selector');
+          selector.setAttribute('name', 'color');
 
-            const submitPromise = ampForm.actionHandler_({
-              method: 'submit',
-              satisfiesTrust: () => true,
-            });
-            expect(ampForm.handleSubmitAction_).to.have.not.been.called;
-            return timer
-              .promise(1)
-              .then(() => {
-                expect(ampForm.handleSubmitAction_).to.have.not.been.called;
-                return timer.promise(2000);
-              })
-              .then(() => {
-                expect(ampForm.handleSubmitAction_).to.have.been.calledOnce;
-                return submitPromise;
-              });
+          env.sandbox
+            .stub(AmpSelector.prototype, 'buildCallback')
+            .returns(new Promise((unusedResolve) => {}));
+          env.sandbox.spy(ampForm, 'handleSubmitAction_');
+
+          form.appendChild(selector);
+
+          const submitPromise = ampForm.actionHandler_({
+            method: 'submit',
+            satisfiesTrust: () => true,
           });
+          expect(ampForm.handleSubmitAction_).to.have.not.been.called;
+
+          await timer.promise(1);
+          expect(ampForm.handleSubmitAction_).to.have.not.been.called;
+
+          await timer.promise(2000);
+          expect(ampForm.handleSubmitAction_).to.have.been.calledOnce;
+
+          await submitPromise;
         });
 
-        it('should wait for amp-selector to build before submitting', () => {
-          return getAmpForm(getForm()).then((ampForm) => {
-            let builtPromiseResolver_;
-            const form = ampForm.form_;
-            const selector = createElement('amp-selector');
-            selector.setAttribute('name', 'color');
-            form.appendChild(selector);
+        it('should wait for amp-selector to build before submitting', async () => {
+          const ampForm = await getAmpForm(getForm());
 
-            env.sandbox.stub(selector, 'whenBuilt').returns(
-              new Promise((resolve) => {
-                builtPromiseResolver_ = resolve;
-              })
-            );
-            env.sandbox.stub(ampForm.xhr_, 'fetch').resolves();
-            env.sandbox.spy(ampForm, 'handleSubmitAction_');
+          let builtPromiseResolver_;
+          const form = ampForm.form_;
+          const selector = createElement('amp-selector');
+          selector.setAttribute('name', 'color');
 
-            ampForm.actionHandler_({
-              method: 'submit',
-              satisfiesTrust: () => true,
-            });
-            expect(ampForm.handleSubmitAction_).to.have.not.been.called;
-            return timer
-              .promise(1)
-              .then(() => {
-                expect(ampForm.handleSubmitAction_).to.have.not.been.called;
-                return timer.promise(100);
-              })
-              .then(() => {
-                expect(ampForm.handleSubmitAction_).to.have.not.been.called;
-                builtPromiseResolver_();
-                return timer.promise(1);
-              })
-              .then(() => {
-                expect(ampForm.handleSubmitAction_).to.have.been.calledOnce;
-              });
+          env.sandbox.stub(AmpSelector.prototype, 'buildCallback').returns(
+            new Promise((resolve) => {
+              builtPromiseResolver_ = resolve;
+            })
+          );
+          env.sandbox.stub(ampForm.xhr_, 'fetch').resolves();
+          env.sandbox.spy(ampForm, 'handleSubmitAction_');
+
+          form.appendChild(selector);
+
+          ampForm.actionHandler_({
+            method: 'submit',
+            satisfiesTrust: () => true,
           });
+          expect(ampForm.handleSubmitAction_).to.have.not.been.called;
+
+          await timer.promise(1);
+          expect(ampForm.handleSubmitAction_).to.have.not.been.called;
+
+          await timer.promise(100);
+          expect(ampForm.handleSubmitAction_).to.have.not.been.called;
+          builtPromiseResolver_();
+
+          await timer.promise(1);
+          expect(ampForm.handleSubmitAction_).to.have.been.calledOnce;
         });
 
         describe('Var Substitution', () => {
-          it('should substitute hidden fields variables in XHR async', () => {
-            return getAmpForm(getForm()).then((ampForm) => {
-              const form = ampForm.form_;
-              const clientIdField = createElement('input');
+          describe('basic XHR request', () => {
+            let form, ampForm, clientIdField, canonicalUrlField;
+
+            beforeEach(async () => {
+              ampForm = await getAmpForm(getForm());
+              form = ampForm.form_;
+              form.setAttribute('id', 'registration');
+              env.sandbox.stub(form, 'checkValidity').returns(true);
+              env.sandbox.stub(ampForm.xhr_, 'xssiJson').resolves();
+              env.sandbox.stub(ampForm.xhr_, 'fetch').resolves();
+              env.sandbox.stub(ampForm, 'handleSubmitSuccess_');
+              env.sandbox.spy(ampForm.urlReplacement_, 'expandInputValueAsync');
+              env.sandbox.stub(ampForm.urlReplacement_, 'expandInputValueSync');
+              clientIdField = createElement('input');
               clientIdField.setAttribute('name', 'clientId');
               clientIdField.setAttribute('type', 'hidden');
               clientIdField.value = 'CLIENT_ID(form)';
               clientIdField.setAttribute('data-amp-replace', 'CLIENT_ID');
-              form.appendChild(clientIdField);
-              const canonicalUrlField = createElement('input');
+              canonicalUrlField = createElement('input');
               canonicalUrlField.setAttribute('name', 'clientId');
               canonicalUrlField.setAttribute('type', 'hidden');
               canonicalUrlField.value = 'CANONICAL_URL';
@@ -2318,36 +2589,78 @@ describes.repeated(
                 'data-amp-replace',
                 'CANONICAL_URL'
               );
+            });
+
+            it('should substitute hidden fields variables in XHR async', async () => {
+              form.appendChild(clientIdField);
               form.appendChild(canonicalUrlField);
 
-              env.sandbox.stub(form, 'checkValidity').returns(true);
-              env.sandbox.stub(ampForm.xhr_, 'fetch').resolves();
-              env.sandbox.stub(ampForm, 'handleSubmitSuccess_');
-              env.sandbox.spy(ampForm.urlReplacement_, 'expandInputValueAsync');
-              env.sandbox.stub(ampForm.urlReplacement_, 'expandInputValueSync');
+              expect(ampForm.xhr_.xssiJson).to.have.not.been.called;
+              expect(ampForm.urlReplacement_.expandInputValueSync).to.not.have
+                .been.called;
 
-              const submitPromise = ampForm.submit_(ActionTrust.HIGH);
-              expect(ampForm.xhr_.fetch).to.have.not.been.called;
+              await ampForm.submit_(ActionTrust.HIGH);
+              expect(ampForm.urlReplacement_.expandInputValueAsync).to.have.been
+                .calledTwice;
+              expect(
+                ampForm.urlReplacement_.expandInputValueAsync
+              ).to.have.been.calledWith(clientIdField);
+              expect(
+                ampForm.urlReplacement_.expandInputValueAsync
+              ).to.have.been.calledWith(canonicalUrlField);
+
+              expect(ampForm.xhr_.xssiJson).to.be.called;
+              expect(clientIdField.value).to.match(/amp-.+/);
+              expect(canonicalUrlField.value).to.equal(
+                'https%3A%2F%2Fexample.com%2Famps.html'
+              );
+            });
+
+            it('should substitute input fields outside of the form', async () => {
+              // Outside input fields must have `form` attribute
+              clientIdField.setAttribute('form', 'registration');
+              canonicalUrlField.setAttribute('form', 'registration');
+              env.ampdoc.getBody().appendChild(clientIdField);
+              env.ampdoc.getBody().appendChild(canonicalUrlField);
+
+              expect(ampForm.xhr_.xssiJson).to.have.not.been.called;
               expect(ampForm.urlReplacement_.expandInputValueSync).to.not.have
                 .been.called;
 
-              submitPromise.then(() => {
-                expect(ampForm.urlReplacement_.expandInputValueAsync).to.have
-                  .been.calledTwice;
-                expect(
-                  ampForm.urlReplacement_.expandInputValueAsync
-                ).to.have.been.calledWith(clientIdField);
-                expect(
-                  ampForm.urlReplacement_.expandInputValueAsync
-                ).to.have.been.calledWith(canonicalUrlField);
-                return whenCalled(ampForm.xhr_.fetch).then(() => {
-                  expect(ampForm.xhr_.fetch).to.be.called;
-                  expect(clientIdField.value).to.match(/amp-.+/);
-                  expect(canonicalUrlField.value).to.equal(
-                    'https%3A%2F%2Fexample.com%2Famps.html'
-                  );
-                });
-              });
+              await ampForm.submit_(ActionTrust.HIGH);
+              expect(ampForm.urlReplacement_.expandInputValueAsync).to.have.been
+                .calledTwice;
+              expect(
+                ampForm.urlReplacement_.expandInputValueAsync
+              ).to.have.been.calledWith(clientIdField);
+              expect(
+                ampForm.urlReplacement_.expandInputValueAsync
+              ).to.have.been.calledWith(canonicalUrlField);
+              await whenCalled(ampForm.xhr_.fetch);
+              expect(ampForm.xhr_.fetch).to.be.called;
+              expect(clientIdField.value).to.match(/amp-.+/);
+              expect(canonicalUrlField.value).to.equal(
+                'https%3A%2F%2Fexample.com%2Famps.html'
+              );
+            });
+
+            it('should not do var substitution on invalid elements', async () => {
+              // remove hidden
+              clientIdField.removeAttribute('type');
+
+              // wrong form
+              clientIdField.removeAttribute('type');
+
+              env.ampdoc.getBody().appendChild(clientIdField);
+              env.ampdoc.getBody().appendChild(canonicalUrlField);
+
+              await ampForm.submit_(ActionTrust.HIGH);
+              expect(ampForm.urlReplacement_.expandInputValueAsync).to.not.be
+                .called;
+              await whenCalled(ampForm.xhr_.fetch);
+              expect(ampForm.xhr_.fetch).to.be.called;
+              expect(clientIdField.value).to.equal('CLIENT_ID(form)');
+              expect(canonicalUrlField.value).to.equal('CANONICAL_URL');
             });
           });
 
@@ -2714,6 +3027,30 @@ describes.repeated(
             });
           });
 
+          it('should not execute form submit with password field present', () => {
+            const form = getForm();
+            const input = createElement('input');
+            input.type = 'password';
+            form.setAttribute('id', 'registration');
+            input.setAttribute('form', 'registration');
+            document.body.appendChild(input);
+
+            return getAmpForm(form).then((ampForm) => {
+              const form = ampForm.form_;
+              ampForm.method_ = 'GET';
+              ampForm.xhrAction_ = null;
+              env.sandbox.stub(form, 'submit');
+              env.sandbox.stub(form, 'checkValidity').returns(true);
+              env.sandbox.stub(ampForm.xhr_, 'fetch').resolves();
+              allowConsoleError(() => {
+                expect(() =>
+                  ampForm.handleSubmitAction_(/* invocation */ {})
+                ).to.throw('input[type=password]');
+              });
+              expect(form.submit).to.have.not.been.called;
+            });
+          });
+
           it('should not execute form submit with file field present', () => {
             const form = getForm();
             const input = createElement('input');
@@ -2748,6 +3085,12 @@ describes.repeated(
             emailInput.setAttribute('value', 'j@hnmiller.com');
             form.appendChild(emailInput);
 
+            const ageInput = createElement('input');
+            ageInput.setAttribute('name', 'age');
+            ageInput.setAttribute('value', '100');
+            ageInput.setAttribute('form', 'registration');
+            document.body.appendChild(ageInput);
+
             const unnamedInput = createElement('input');
             unnamedInput.setAttribute('type', 'text');
             unnamedInput.setAttribute('value', 'unnamed');
@@ -2759,7 +3102,6 @@ describes.repeated(
             env.sandbox.stub(form, 'submit');
             env.sandbox.stub(form, 'checkValidity').returns(true);
             env.sandbox.stub(ampForm.xhr_, 'fetch').resolves();
-            env.sandbox.stub(ampForm, 'analyticsEvent_');
 
             env.sandbox.stub(ampForm, 'handleXhrSubmitSuccess_').resolves();
             const submitActionPromise = ampForm.handleSubmitAction_(
@@ -2770,6 +3112,7 @@ describes.repeated(
               'formId': 'registration',
               'formFields[name]': 'John Miller',
               'formFields[email]': 'j@hnmiller.com',
+              'formFields[age]': '100',
             };
             expect(form.submit).to.have.been.called;
             expect(ampForm.analyticsEvent_).to.be.calledWith(
@@ -2792,6 +3135,12 @@ describes.repeated(
             emailInput.setAttribute('value', 'j@hnmiller.com');
             form.appendChild(emailInput);
 
+            const ageInput = createElement('input');
+            ageInput.setAttribute('name', 'age');
+            ageInput.setAttribute('value', '100');
+            ageInput.setAttribute('form', 'registration');
+            document.body.appendChild(ageInput);
+
             const unnamedInput = createElement('input');
             unnamedInput.setAttribute('type', 'text');
             unnamedInput.setAttribute('value', 'unnamed');
@@ -2803,7 +3152,6 @@ describes.repeated(
                 fetchResolver = resolve;
               })
             );
-            env.sandbox.stub(ampForm, 'analyticsEvent_');
             const event = {
               stopImmediatePropagation: env.sandbox.spy(),
               target: form,
@@ -2817,6 +3165,7 @@ describes.repeated(
                 'formId': 'registration',
                 'formFields[name]': 'John Miller',
                 'formFields[email]': 'j@hnmiller.com',
+                'formFields[age]': '100',
               };
 
               return ampForm.xhrSubmitPromiseForTesting().then(
@@ -2846,6 +3195,12 @@ describes.repeated(
             emailInput.setAttribute('value', 'j@hnmiller.com');
             form.appendChild(emailInput);
 
+            const ageInput = createElement('input');
+            ageInput.setAttribute('name', 'age');
+            ageInput.setAttribute('value', '100');
+            ageInput.setAttribute('form', 'registration');
+            document.body.appendChild(ageInput);
+
             const unnamedInput = createElement('input');
             unnamedInput.setAttribute('type', 'text');
             unnamedInput.setAttribute('value', 'unnamed');
@@ -2857,7 +3212,6 @@ describes.repeated(
                 fetchRejecter = reject;
               })
             );
-            env.sandbox.stub(ampForm, 'analyticsEvent_');
             const event = {
               stopImmediatePropagation: env.sandbox.spy(),
               target: form,
@@ -2872,6 +3226,7 @@ describes.repeated(
               'formId': 'registration',
               'formFields[name]': 'John Miller',
               'formFields[email]': 'j@hnmiller.com',
+              'formFields[age]': '100',
             };
 
             return submitEventPromise.then(
@@ -2906,16 +3261,16 @@ describes.repeated(
             const canonicalUrlField = createElement('input');
             canonicalUrlField.setAttribute('name', 'canonicalUrl');
             canonicalUrlField.setAttribute('type', 'hidden');
+            canonicalUrlField.setAttribute('form', 'registration');
             canonicalUrlField.setAttribute('data-amp-replace', 'CANONICAL_URL');
             canonicalUrlField.value = 'CANONICAL_URL';
-            form.appendChild(canonicalUrlField);
+            document.body.appendChild(canonicalUrlField);
 
             env.sandbox.stub(form, 'submit');
             env.sandbox.stub(form, 'checkValidity').returns(true);
             env.sandbox.stub(ampForm.xhr_, 'fetch').resolves();
             env.sandbox.stub(ampForm.urlReplacement_, 'expandInputValueAsync');
             env.sandbox.spy(ampForm.urlReplacement_, 'expandInputValueSync');
-            env.sandbox.stub(ampForm, 'analyticsEvent_');
             ampForm.handleSubmitAction_(/* invocation */ {});
 
             const expectedFormData = {
@@ -2948,46 +3303,6 @@ describes.repeated(
           });
         });
 
-        it('should attach auth token with crossorigin attribute', () => {
-          env.sandbox.stub(Services, 'viewerAssistanceForDocOrNull').resolves({
-            getIdTokenPromise: () => Promise.resolve('idToken'),
-          });
-          return getAmpForm(getForm()).then((ampForm) => {
-            const form = ampForm.form_;
-            form.id = 'registration';
-
-            const emailInput = createElement('input');
-            emailInput.setAttribute('name', 'email');
-            emailInput.setAttribute('type', 'email');
-            emailInput.setAttribute('value', 'j@hnmiller.com');
-            form.appendChild(emailInput);
-
-            const unnamedInput = createElement('input');
-            unnamedInput.setAttribute('type', 'text');
-            unnamedInput.setAttribute('value', 'unnamed');
-            form.appendChild(unnamedInput);
-
-            ampForm.method_ = 'POST';
-            ampForm.form_.setAttribute(
-              'crossorigin',
-              'amp-viewer-auth-token-via-post'
-            );
-            env.sandbox
-              .stub(ampForm.xhr_, 'fetch')
-              .resolves({json: () => Promise.resolve()});
-
-            return ampForm.handleSubmitAction_(/* invocation */ {}).then(() => {
-              return ampForm.xhrSubmitPromiseForTesting().then(() => {
-                expect(Services.viewerAssistanceForDocOrNull).to.be.called;
-                const fetchCallFormData = ampForm.xhr_.fetch.firstCall.args[1].body.getFormData();
-                expect(fetchCallFormData.get('ampViewerAuthToken')).to.equal(
-                  'idToken'
-                );
-              });
-            });
-          });
-        });
-
         it('should allow default actions in email documents', async () => {
           env.win.document.documentElement.setAttribute('amp4email', '');
           const action = new ActionService(env.ampdoc, env.win.document);
@@ -3131,12 +3446,8 @@ describes.repeated(
               'hidden inputs for Async Inputs',
             () => {
               return getAmpFormWithAsyncInput().then((response) => {
-                const {
-                  ampForm,
-                  asyncInput,
-                  asyncInputValue,
-                  getValueStub,
-                } = response;
+                const {ampForm, asyncInput, asyncInputValue, getValueStub} =
+                  response;
 
                 const newAsyncInputValue = 'new-async-input-value';
                 let hiddenInput;
@@ -3145,9 +3456,8 @@ describes.repeated(
                 return ampForm
                   .submit_(ActionTrust.HIGH)
                   .then(() => {
-                    previousHiddenInputCount = ampForm.form_.querySelectorAll(
-                      'input[hidden]'
-                    ).length;
+                    previousHiddenInputCount =
+                      ampForm.form_.querySelectorAll('input[hidden]').length;
                     const name = asyncInput.getAttribute(
                       AsyncInputAttributes.NAME
                     );
@@ -3161,9 +3471,8 @@ describes.repeated(
                     return ampForm.submit_(ActionTrust.HIGH);
                   })
                   .then(() => {
-                    const totalHiddenInputs = ampForm.form_.querySelectorAll(
-                      'input[hidden]'
-                    );
+                    const totalHiddenInputs =
+                      ampForm.form_.querySelectorAll('input[hidden]');
                     expect(totalHiddenInputs.length).to.be.equal(
                       previousHiddenInputCount
                     );
@@ -3288,12 +3597,18 @@ describes.repeated(
         });
 
         describe('Form Dirtiness State', () => {
-          let form, ampForm, input;
+          let form, ampForm, insideInput, outsideInput, inputs;
 
           beforeEach(async () => {
             form = getForm();
+            form.setAttribute('id', 'registration');
             ampForm = await getAmpForm(form);
-            input = form.querySelector('input[name=name]');
+            insideInput = form.querySelector('input[name=name]');
+            outsideInput = createElement('input');
+            outsideInput.setAttribute('name', 'name');
+            outsideInput.setAttribute('form', 'registration');
+            document.body.appendChild(outsideInput);
+            inputs = [insideInput, outsideInput];
           });
 
           function changeInput(element, value) {
@@ -3302,40 +3617,50 @@ describes.repeated(
             element.dispatchEvent(event);
           }
 
-          it('adds dirtiness class when a field changes', () => {
-            changeInput(input, 'Another Name');
-            expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
-          });
+          for (let i = 0; i < 2; i++) {
+            describe(`${i === 0 ? 'Inside Input' : 'Outside Input'}`, () => {
+              let input;
 
-          it('clears dirtiness class when submitted successfully without XHR', async () => {
-            ampForm.method_ = 'GET';
-            ampForm.xhrAction_ = null;
+              beforeEach(() => {
+                input = inputs[i];
+              });
 
-            changeInput(input, 'Another Name');
-            await ampForm.submit_(ActionTrust.HIGH);
+              it('adds dirtiness class when a field changes', () => {
+                changeInput(input, 'Another Name');
+                expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
+              });
 
-            expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-          });
+              it('clears dirtiness class when submitted successfully without XHR', async () => {
+                ampForm.method_ = 'GET';
+                ampForm.xhrAction_ = null;
 
-          it('clears dirtiness class when submitted successfully with XHR', async () => {
-            env.sandbox
-              .stub(ampForm.xhr_, 'fetch')
-              .resolves({json: async () => {}});
+                changeInput(input, 'Another Name');
+                await ampForm.submit_(ActionTrust.HIGH);
 
-            changeInput(input, 'Another Name');
-            await ampForm.submit_(ActionTrust.HIGH);
+                expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+              });
 
-            expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-          });
+              it('clears dirtiness class when submitted successfully with XHR', async () => {
+                env.sandbox
+                  .stub(ampForm.xhr_, 'fetch')
+                  .resolves({json: async () => {}});
 
-          it('does not clear dirtiness class when submission XHR fails', async () => {
-            env.sandbox.stub(ampForm.xhr_, 'fetch').rejects({});
+                changeInput(input, 'Another Name');
+                await ampForm.submit_(ActionTrust.HIGH);
 
-            changeInput(input, 'Another Name');
-            await ampForm.submit_(ActionTrust.HIGH);
+                expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+              });
 
-            expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
-          });
+              it('does not clear dirtiness class when submission XHR fails', async () => {
+                env.sandbox.stub(ampForm.xhr_, 'fetch').rejects({});
+
+                changeInput(input, 'Another Name');
+                await ampForm.submit_(ActionTrust.HIGH);
+
+                expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
+              });
+            });
+          }
         });
       }
     );
diff --git a/extensions/amp-form/0.1/test/test-form-dirtiness.js b/extensions/amp-form/0.1/test/test-form-dirtiness.js
index 3d83d16e7067c..8bf4cae97f4cd 100644
--- a/extensions/amp-form/0.1/test/test-form-dirtiness.js
+++ b/extensions/amp-form/0.1/test/test-form-dirtiness.js
@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../../../src/amp-events';
+import {AmpEvents} from '../../../../src/core/constants/amp-events';
 import {DIRTINESS_INDICATOR_CLASS, FormDirtiness} from '../form-dirtiness';
 import {Services} from '../../../../src/services';
 import {closestAncestorElementBySelector} from '../../../../src/dom';
 import {createCustomEvent, getDetail} from '../../../../src/event-helper';
+import {macroTask} from '../../../../testing/yield';
 
 function getForm(doc) {
   const form = doc.createElement('form');
@@ -83,397 +84,410 @@ function captureEventDispatched(eventName, element, dispatchEventFunction) {
   return eventCaptured;
 }
 
-describes.realWin('form-dirtiness', {}, (env) => {
-  let doc, form, dirtinessHandler;
-
-  beforeEach(() => {
-    doc = env.win.document;
-    form = getForm(doc);
-    env.sandbox.stub(Services, 'platformFor').returns({
-      isIos() {
-        return false;
-      },
+describes.realWin(
+  'form-dirtiness',
+  {
+    amp: {
+      runtimeOn: true,
+      extensions: ['amp-form'], // amp-form is installed as service.
+    },
+  },
+  (env) => {
+    let doc, form, dirtinessHandler;
+
+    beforeEach(async () => {
+      doc = env.win.document;
+      form = getForm(doc);
+      env.sandbox.stub(Services, 'platformFor').returns({
+        isIos() {
+          return false;
+        },
+      });
+      dirtinessHandler = new FormDirtiness(form, env.win);
+      await macroTask();
     });
-    dirtinessHandler = new FormDirtiness(form, env.win);
-  });
 
-  describe('ignored elements', () => {
-    it('does not add dirtiness class if a nameless element changes', () => {
-      const nameless = doc.createElement('input');
-      form.appendChild(nameless);
+    describe('ignored elements', () => {
+      it('does not add dirtiness class if a nameless element changes', () => {
+        const nameless = doc.createElement('input');
+        form.appendChild(nameless);
 
-      changeInput(nameless, 'changed');
+        changeInput(nameless, 'changed');
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-    it('does not add dirtiness class if a hidden element changes', () => {
-      const hidden = doc.createElement('input');
-      hidden.name = 'name';
-      hidden.hidden = true;
-      form.appendChild(hidden);
+      it('does not add dirtiness class if a hidden element changes', () => {
+        const hidden = doc.createElement('input');
+        hidden.name = 'name';
+        hidden.hidden = true;
+        form.appendChild(hidden);
 
-      changeInput(hidden, 'changed');
+        changeInput(hidden, 'changed');
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-    it('does not add dirtiness class if a disabled element changes', () => {
-      const disabled = doc.createElement('input');
-      disabled.name = 'name';
-      disabled.disabled = true;
-      form.appendChild(disabled);
+      it('does not add dirtiness class if a disabled element changes', () => {
+        const disabled = doc.createElement('input');
+        disabled.name = 'name';
+        disabled.disabled = true;
+        form.appendChild(disabled);
 
-      changeInput(disabled, 'changed');
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+        changeInput(disabled, 'changed');
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
     });
-  });
 
-  describe('amp-bind changes', () => {
-    let input;
+    describe('amp-bind changes', () => {
+      let input;
 
-    beforeEach(() => {
-      input = doc.createElement('input');
-      input.name = 'name';
-      form.appendChild(input);
-    });
+      beforeEach(() => {
+        input = doc.createElement('input');
+        input.name = 'name';
+        form.appendChild(input);
+      });
 
-    it('adds dirtiness class if an element is changed with amp-bind', () => {
-      input.value = 'changed';
-      dispatchFormValueChangeEvent(input, env.win);
+      it('adds dirtiness class if an element is changed with amp-bind', () => {
+        input.value = 'changed';
+        dispatchFormValueChangeEvent(input, env.win);
 
-      expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+        expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-    it('removes dirtiness class if a dirty element is cleared with amp-bind', () => {
-      changeInput(input, 'changed');
-      input.value = '';
-      dispatchFormValueChangeEvent(input, env.win);
+      it('removes dirtiness class if a dirty element is cleared with amp-bind', () => {
+        changeInput(input, 'changed');
+        input.value = '';
+        dispatchFormValueChangeEvent(input, env.win);
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
-  });
-
-  describe('text field changes', () => {
-    let textField;
-
-    beforeEach(() => {
-      // Element is inserted as HTML so that the `defaultValue` property is
-      // generated correctly, since it returns "the default value as
-      // **originally specified in the HTML** that created this object."
-      // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties
-      const html = '<input name="name" type="text" value="default">';
-      form.insertAdjacentHTML('afterbegin', html);
-      textField = form.querySelector('input');
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
     });
 
-    it('removes dirtiness class when text field is in default state', () => {
-      changeInput(textField, textField.defaultValue);
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+    describe('text field changes', () => {
+      let textField;
 
-    it('removes dirtiness class when text field is empty', () => {
-      changeInput(textField, '');
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+      beforeEach(() => {
+        // Element is inserted as HTML so that the `defaultValue` property is
+        // generated correctly, since it returns "the default value as
+        // **originally specified in the HTML** that created this object."
+        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties
+        const html = '<input name="name" type="text" value="default">';
+        form.insertAdjacentHTML('afterbegin', html);
+        textField = form.querySelector('input');
+      });
 
-    it('adds dirtiness class when text field is changed', () => {
-      changeInput(textField, 'changed');
-      expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+      it('removes dirtiness class when text field is in default state', () => {
+        changeInput(textField, textField.defaultValue);
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-    it('removes dirtiness class when its value matches the submitted value', () => {
-      changeInput(textField, 'submitted');
-      dirtinessHandler.onSubmitting();
-      dirtinessHandler.onSubmitSuccess();
-      changeInput(textField, 'submitted');
+      it('removes dirtiness class when text field is empty', () => {
+        changeInput(textField, '');
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
-  });
+      it('adds dirtiness class when text field is changed', () => {
+        changeInput(textField, 'changed');
+        expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-  describe('textarea changes', () => {
-    let textarea;
+      it('removes dirtiness class when its value matches the submitted value', () => {
+        changeInput(textField, 'submitted');
+        dirtinessHandler.onSubmitting();
+        dirtinessHandler.onSubmitSuccess();
+        changeInput(textField, 'submitted');
 
-    beforeEach(() => {
-      const html = '<textarea name="comment">default</textarea>';
-      form.insertAdjacentHTML('afterbegin', html);
-      textarea = form.querySelector('textarea');
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
     });
 
-    it('removes dirtiness class when textarea is in default state', () => {
-      changeInput(textarea, textarea.defaultValue);
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+    describe('textarea changes', () => {
+      let textarea;
 
-    it('removes dirtiness class when textarea is empty', () => {
-      changeInput(textarea, '');
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+      beforeEach(() => {
+        const html = '<textarea name="comment">default</textarea>';
+        form.insertAdjacentHTML('afterbegin', html);
+        textarea = form.querySelector('textarea');
+      });
 
-    it('adds dirtiness class when textarea is changed', () => {
-      changeInput(textarea, 'changed');
-      expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+      it('removes dirtiness class when textarea is in default state', () => {
+        changeInput(textarea, textarea.defaultValue);
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-    it('removes dirtiness class when its value matches the submitted value', () => {
-      changeInput(textarea, 'submitted');
-      dirtinessHandler.onSubmitting();
-      dirtinessHandler.onSubmitSuccess();
-      changeInput(textarea, 'submitted');
+      it('removes dirtiness class when textarea is empty', () => {
+        changeInput(textarea, '');
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
-  });
+      it('adds dirtiness class when textarea is changed', () => {
+        changeInput(textarea, 'changed');
+        expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-  describe('checkbox changes', () => {
-    let checkbox;
+      it('removes dirtiness class when its value matches the submitted value', () => {
+        changeInput(textarea, 'submitted');
+        dirtinessHandler.onSubmitting();
+        dirtinessHandler.onSubmitSuccess();
+        changeInput(textarea, 'submitted');
 
-    beforeEach(() => {
-      checkbox = createElement(doc, 'input', {
-        type: 'checkbox',
-        name: 'checkbox',
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
       });
-      form.appendChild(checkbox);
     });
 
-    it('clears dirtiness class when checkbox is in default state', () => {
-      checkbox.setAttribute('checked', 'checked');
-      checkInput(checkbox, true);
+    describe('checkbox changes', () => {
+      let checkbox;
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+      beforeEach(() => {
+        checkbox = createElement(doc, 'input', {
+          type: 'checkbox',
+          name: 'checkbox',
+        });
+        form.appendChild(checkbox);
+      });
 
-    it('clears dirtiness class when checkbox is not checked', () => {
-      checkInput(checkbox, false);
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+      it('clears dirtiness class when checkbox is in default state', () => {
+        checkbox.setAttribute('checked', 'checked');
+        checkInput(checkbox, true);
 
-    it('adds dirtiness class when checkbox state has changed', () => {
-      checkInput(checkbox, true);
-      expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-    it('clears dirtiness class when checkbox matches its submitted state', () => {
-      checkInput(checkbox, true);
-      dirtinessHandler.onSubmitting();
-      dirtinessHandler.onSubmitSuccess();
-      checkInput(checkbox, true);
+      it('clears dirtiness class when checkbox is not checked', () => {
+        checkInput(checkbox, false);
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
-  });
+      it('adds dirtiness class when checkbox state has changed', () => {
+        checkInput(checkbox, true);
+        expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-  describe('radio button changes', () => {
-    let optionA, optionB;
+      it('clears dirtiness class when checkbox matches its submitted state', () => {
+        checkInput(checkbox, true);
+        dirtinessHandler.onSubmitting();
+        dirtinessHandler.onSubmitSuccess();
+        checkInput(checkbox, true);
 
-    beforeEach(() => {
-      optionA = createElement(doc, 'input', {type: 'radio', name: 'radio'});
-      optionB = createElement(doc, 'input', {type: 'radio', name: 'radio'});
-      form.appendChild(optionA);
-      form.appendChild(optionB);
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
     });
 
-    it('clears dirtiness class when radio button is in default state', () => {
-      optionA.setAttribute('checked', 'checked');
-      checkInput(optionA, true);
+    describe('radio button changes', () => {
+      let optionA, optionB;
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+      beforeEach(() => {
+        optionA = createElement(doc, 'input', {type: 'radio', name: 'radio'});
+        optionB = createElement(doc, 'input', {type: 'radio', name: 'radio'});
+        form.appendChild(optionA);
+        form.appendChild(optionB);
+      });
 
-    it('clears dirtiness class when no radio button is checked', () => {
-      checkInput(optionA, false);
-      checkInput(optionB, false);
+      it('clears dirtiness class when radio button is in default state', () => {
+        optionA.setAttribute('checked', 'checked');
+        checkInput(optionA, true);
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-    it('adds dirtiness class when radio button state has changed', () => {
-      checkInput(optionB, true);
-      expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+      it('clears dirtiness class when no radio button is checked', () => {
+        checkInput(optionA, false);
+        checkInput(optionB, false);
+
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-    it('clears dirtiness class when radio button state matches its submitted state', () => {
-      checkInput(optionB, true);
-      dirtinessHandler.onSubmitting();
-      dirtinessHandler.onSubmitSuccess();
-      checkInput(optionB, true);
+      it('adds dirtiness class when radio button state has changed', () => {
+        checkInput(optionB, true);
+        expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
+
+      it('clears dirtiness class when radio button state matches its submitted state', () => {
+        checkInput(optionB, true);
+        dirtinessHandler.onSubmitting();
+        dirtinessHandler.onSubmitSuccess();
+        checkInput(optionB, true);
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
     });
-  });
 
-  describe('dropdown selection changes', () => {
-    let dropdown, optionA, optionB;
+    describe('dropdown selection changes', () => {
+      let dropdown, optionA, optionB;
 
-    beforeEach(() => {
-      dropdown = createElement(doc, 'select', {name: 'select'});
-      optionA = createElement(doc, 'option', {value: 'A'});
-      optionB = createElement(doc, 'option', {value: 'B'});
+      beforeEach(() => {
+        dropdown = createElement(doc, 'select', {name: 'select'});
+        optionA = createElement(doc, 'option', {value: 'A'});
+        optionB = createElement(doc, 'option', {value: 'B'});
 
-      dropdown.appendChild(optionA);
-      dropdown.appendChild(optionB);
-      form.appendChild(dropdown);
-    });
+        dropdown.appendChild(optionA);
+        dropdown.appendChild(optionB);
+        form.appendChild(dropdown);
+      });
 
-    it('clears dirtiness class when dropdown is in its default state', () => {
-      optionA.setAttribute('selected', 'selected');
-      selectOption(optionA, true);
+      it('clears dirtiness class when dropdown is in its default state', () => {
+        optionA.setAttribute('selected', 'selected');
+        selectOption(optionA, true);
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-    it('adds dirtiness class when dropdown is not in its default state', () => {
-      selectOption(optionB, true);
-      expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+      it('adds dirtiness class when dropdown is not in its default state', () => {
+        selectOption(optionB, true);
+        expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-    it('clears dirtiness class when dropdown selection matches its submitted state', () => {
-      selectOption(optionA, true);
-      dirtinessHandler.onSubmitting();
-      dirtinessHandler.onSubmitSuccess();
-      selectOption(optionA, true);
+      it('clears dirtiness class when dropdown selection matches its submitted state', () => {
+        selectOption(optionA, true);
+        dirtinessHandler.onSubmitting();
+        dirtinessHandler.onSubmitSuccess();
+        selectOption(optionA, true);
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
     });
-  });
 
-  describe('#onSubmitting', () => {
-    it('clears the dirtiness class', () => {
-      const input = doc.createElement('input');
-      input.type = 'text';
-      input.name = 'text';
-      form.appendChild(input);
+    describe('#onSubmitting', () => {
+      it('clears the dirtiness class', () => {
+        const input = doc.createElement('input');
+        input.type = 'text';
+        input.name = 'text';
+        form.appendChild(input);
 
-      changeInput(input, 'changed');
-      dirtinessHandler.onSubmitting();
+        changeInput(input, 'changed');
+        dirtinessHandler.onSubmitting();
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
     });
-  });
 
-  describe('#onSubmitError', () => {
-    let input;
+    describe('#onSubmitError', () => {
+      let input;
 
-    beforeEach(() => {
-      input = doc.createElement('input');
-      input.type = 'text';
-      input.name = 'text';
-      form.appendChild(input);
-    });
+      beforeEach(() => {
+        input = doc.createElement('input');
+        input.type = 'text';
+        input.name = 'text';
+        form.appendChild(input);
+      });
 
-    it('adds the dirtiness class if the form was dirty before submitting', () => {
-      changeInput(input, 'changed');
-      dirtinessHandler.onSubmitting();
-      dirtinessHandler.onSubmitError();
+      it('adds the dirtiness class if the form was dirty before submitting', () => {
+        changeInput(input, 'changed');
+        dirtinessHandler.onSubmitting();
+        dirtinessHandler.onSubmitError();
 
-      expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+        expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-    it('does not add the dirtiness class if the form was clean before submitting', () => {
-      changeInput(input, '');
-      dirtinessHandler.onSubmitting();
-      dirtinessHandler.onSubmitError();
+      it('does not add the dirtiness class if the form was clean before submitting', () => {
+        changeInput(input, '');
+        dirtinessHandler.onSubmitting();
+        dirtinessHandler.onSubmitError();
 
-      expect(form).to.have.not.class(DIRTINESS_INDICATOR_CLASS);
+        expect(form).to.have.not.class(DIRTINESS_INDICATOR_CLASS);
+      });
     });
-  });
 
-  describe('#onSubmitSuccess', () => {
-    let input;
+    describe('#onSubmitSuccess', () => {
+      let input;
 
-    beforeEach(() => {
-      input = doc.createElement('input');
-      input.type = 'text';
-      input.name = 'text';
-      form.appendChild(input);
-    });
+      beforeEach(() => {
+        input = doc.createElement('input');
+        input.type = 'text';
+        input.name = 'text';
+        form.appendChild(input);
+      });
 
-    it('clears the dirtiness class', () => {
-      changeInput(input, 'changed');
-      dirtinessHandler.onSubmitting();
-      dirtinessHandler.onSubmitSuccess();
+      it('clears the dirtiness class', () => {
+        changeInput(input, 'changed');
+        dirtinessHandler.onSubmitting();
+        dirtinessHandler.onSubmitSuccess();
 
-      expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+        expect(form).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
 
-    it('tracks new changes after the form has been submitted', () => {
-      changeInput(input, 'changed');
-      dirtinessHandler.onSubmitting();
-      dirtinessHandler.onSubmitSuccess();
-      changeInput(input, 'changed again');
+      it('tracks new changes after the form has been submitted', () => {
+        changeInput(input, 'changed');
+        dirtinessHandler.onSubmitting();
+        dirtinessHandler.onSubmitSuccess();
+        changeInput(input, 'changed again');
 
-      expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
+        expect(form).to.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
     });
-  });
 
-  describe('AmpEvents.FORM_DIRTINESS_CHANGE', () => {
-    let input;
+    describe('AmpEvents.FORM_DIRTINESS_CHANGE', () => {
+      let input;
 
-    beforeEach(() => {
-      input = createElement(doc, 'input', {type: 'text', name: 'text'});
-      form.appendChild(input);
-    });
+      beforeEach(() => {
+        input = createElement(doc, 'input', {type: 'text', name: 'text'});
+        form.appendChild(input);
+      });
 
-    it('dispatches an event when the form transitions from clean to dirty', () => {
-      const changeToDirty = () => changeInput(input, 'changed');
-      const eventDispatched = captureEventDispatched(
-        AmpEvents.FORM_DIRTINESS_CHANGE,
-        form,
-        changeToDirty
-      );
+      it('dispatches an event when the form transitions from clean to dirty', () => {
+        const changeToDirty = () => changeInput(input, 'changed');
+        const eventDispatched = captureEventDispatched(
+          AmpEvents.FORM_DIRTINESS_CHANGE,
+          form,
+          changeToDirty
+        );
 
-      expect(eventDispatched).to.exist;
-      expect(getDetail(eventDispatched).isDirty).to.be.true;
-    });
+        expect(eventDispatched).to.exist;
+        expect(getDetail(eventDispatched).isDirty).to.be.true;
+      });
 
-    it('dispatches an event when the form transitions from dirty to clean', () => {
-      changeInput(input, 'changed');
+      it('dispatches an event when the form transitions from dirty to clean', () => {
+        changeInput(input, 'changed');
 
-      const changeToClean = () => changeInput(input, '');
-      const eventDispatched = captureEventDispatched(
-        AmpEvents.FORM_DIRTINESS_CHANGE,
-        form,
-        changeToClean
-      );
+        const changeToClean = () => changeInput(input, '');
+        const eventDispatched = captureEventDispatched(
+          AmpEvents.FORM_DIRTINESS_CHANGE,
+          form,
+          changeToClean
+        );
 
-      expect(eventDispatched).to.exist;
-      expect(getDetail(eventDispatched).isDirty).to.be.false;
-    });
+        expect(eventDispatched).to.exist;
+        expect(getDetail(eventDispatched).isDirty).to.be.false;
+      });
 
-    it('does not dispatch an event when the dirtiness state does not change', () => {
-      changeInput(input, 'changed');
+      it('does not dispatch an event when the dirtiness state does not change', () => {
+        changeInput(input, 'changed');
 
-      const remainDirty = () => changeInput(input, 'still dirty');
-      const eventDispatched = captureEventDispatched(
-        AmpEvents.FORM_DIRTINESS_CHANGE,
-        form,
-        remainDirty
-      );
+        const remainDirty = () => changeInput(input, 'still dirty');
+        const eventDispatched = captureEventDispatched(
+          AmpEvents.FORM_DIRTINESS_CHANGE,
+          form,
+          remainDirty
+        );
 
-      expect(eventDispatched).to.not.exist;
+        expect(eventDispatched).to.not.exist;
+      });
     });
-  });
 
-  describe('initial dirtiness', () => {
-    let newForm, input;
+    describe('initial dirtiness', () => {
+      let newForm, input;
 
-    beforeEach(() => {
-      newForm = getForm(doc);
-      input = createElement(doc, 'input', {type: 'text', name: 'text'});
-      newForm.appendChild(input);
-    });
+      beforeEach(() => {
+        newForm = getForm(doc);
+        input = createElement(doc, 'input', {type: 'text', name: 'text'});
+        newForm.appendChild(input);
+      });
 
-    it('adds the dirtiness class if the form already has dirty fields', () => {
-      changeInput(input, 'changed');
-      dirtinessHandler = new FormDirtiness(newForm, env.win);
+      it('adds the dirtiness class if the form already has dirty fields', async () => {
+        changeInput(input, 'changed');
+        dirtinessHandler = new FormDirtiness(newForm, env.win);
+        await macroTask();
 
-      expect(newForm).to.have.class(DIRTINESS_INDICATOR_CLASS);
-    });
+        expect(newForm).to.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
+
+      it('does not add the dirtiness class if the form does not have dirty fields', async () => {
+        dirtinessHandler = new FormDirtiness(newForm, env.win);
+        await macroTask();
 
-    it('does not add the dirtiness class if the form does not have dirty fields', () => {
-      dirtinessHandler = new FormDirtiness(newForm, env.win);
-      expect(newForm).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+        expect(newForm).to.not.have.class(DIRTINESS_INDICATOR_CLASS);
+      });
     });
-  });
-});
+  }
+);
diff --git a/extensions/amp-form/0.1/test/test-form-proxy.js b/extensions/amp-form/0.1/test/test-form-proxy.js
index 4009e8e3b368d..652b54e011292 100644
--- a/extensions/amp-form/0.1/test/test-form-proxy.js
+++ b/extensions/amp-form/0.1/test/test-form-proxy.js
@@ -43,7 +43,7 @@ describes.repeated(
     'legacy w/ inputs': {denylist: true, inputs: true},
     'no EventTarget': {eventTarget: true},
   },
-  (name, variant) => {
+  (name, variant, env) => {
     let form;
     let inputs;
 
@@ -51,7 +51,7 @@ describes.repeated(
       // Stub only to work around the fact that there's no Ampdoc, so the service
       // cannot be retrieved.
       // Otherwise this test would barf because `form` is detached.
-      window.sandbox.stub(Services, 'urlForDoc').returns({
+      env.sandbox.stub(Services, 'urlForDoc').returns({
         parse: parseUrlDeprecated,
       });
 
diff --git a/extensions/amp-form/0.1/test/test-form-submit-service.js b/extensions/amp-form/0.1/test/test-form-submit-service.js
index c713505b82c3a..3de0003067a9b 100644
--- a/extensions/amp-form/0.1/test/test-form-submit-service.js
+++ b/extensions/amp-form/0.1/test/test-form-submit-service.js
@@ -16,7 +16,7 @@
 
 import {FormSubmitService} from '../form-submit-service';
 
-describe('form-submit-service', () => {
+describes.sandboxed('form-submit-service', {}, (env) => {
   let submitService;
 
   beforeEach(() => {
@@ -28,7 +28,7 @@ describe('form-submit-service', () => {
   });
 
   it('should register & fire one callback', () => {
-    const cb = window.sandbox.spy();
+    const cb = env.sandbox.spy();
     submitService.beforeSubmit(cb);
 
     const fakeFormEl = {};
@@ -39,7 +39,7 @@ describe('form-submit-service', () => {
   });
 
   it('should register & fire many callbacks', () => {
-    const cb = window.sandbox.spy();
+    const cb = env.sandbox.spy();
     submitService.beforeSubmit(cb);
     submitService.beforeSubmit(cb);
     submitService.beforeSubmit(cb);
diff --git a/extensions/amp-form/0.1/test/test-form-validators.js b/extensions/amp-form/0.1/test/test-form-validators.js
index 30adfa3c30cd7..090a1df95a019 100644
--- a/extensions/amp-form/0.1/test/test-form-validators.js
+++ b/extensions/amp-form/0.1/test/test-form-validators.js
@@ -49,13 +49,12 @@ describes.realWin('form-validators', {amp: true}, (env) => {
     form.setAttribute('method', 'POST');
     doc.body.appendChild(form);
 
-    const {name, email, text, submit} = getInputs(doc);
+    const {email, name, submit, text} = getInputs(doc);
     [name, email, text, submit].forEach((c) => form.appendChild(c));
 
     if (isCustomValidations) {
-      const {noName, noEmail, invalidEmail, invalidText} = getCustomValidations(
-        doc
-      );
+      const {invalidEmail, invalidText, noEmail, noName} =
+        getCustomValidations(doc);
       [noName, noEmail, invalidEmail, invalidText].forEach((c) =>
         doc.body.appendChild(c)
       );
@@ -724,16 +723,15 @@ describes.realWin('form-validators', {amp: true}, (env) => {
       expect(validations[3].className).to.not.contain('visible');
 
       // Simulate a dynamic content event e.g. amp-list re-render.
-      const {name, email, submit} = getInputs(doc);
+      const {email, name, submit} = getInputs(doc);
       while (form.firstChild) {
         form.removeChild(form.firstChild);
       }
       [name, email, submit].forEach((c) => form.appendChild(c));
 
       validations.forEach((v) => v.parentNode.removeChild(v));
-      const {noName, noEmail, invalidEmail, invalidText} = getCustomValidations(
-        doc
-      );
+      const {invalidEmail, invalidText, noEmail, noName} =
+        getCustomValidations(doc);
       [noName, noEmail, invalidEmail, invalidText].forEach((c) =>
         doc.body.appendChild(c)
       );
diff --git a/extensions/amp-form/OWNERS b/extensions/amp-form/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-form/OWNERS
+++ b/extensions/amp-form/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-form/amp-form.md b/extensions/amp-form/amp-form.md
index 1ec1824b5fe7b..637bfa6d9fb0f 100644
--- a/extensions/amp-form/amp-form.md
+++ b/extensions/amp-form/amp-form.md
@@ -26,17 +26,17 @@ limitations under the License.
 
 # amp-form
 
-## Behavior
+## Usage
 
 The `amp-form` extension allows you to create forms (`<form>`) to submit input fields in an AMP document. The `amp-form` extension also provides [polyfills](#polyfills) for some missing behaviors in browsers.
 
-{% call callout('Important', type='caution') %}
+[tip type="important"]
+
 If you're submitting data in your form, your server endpoint must implement the requirements for [CORS security](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests#cors-security-in-amp).
-{% endcall %}
 
-Before creating a `<form>`, you must include the required script for the `<amp-form>` extension, otherwise your document will be invalid. If you're using `input` tags for purposes other than submitting their values (e.g., inputs not inside a `<form>`), you do not need to load the `amp-form` extension.
+[/tip]
 
-Here's an example of a basic form:
+Before creating a `<form>`, you must include the required script for the `<amp-form>` extension, otherwise your document will be invalid. If you're using `input` tags for purposes other than submitting their values, you do not need to load the `amp-form` extension.
 
 [example preview="inline" playground="true" imports="amp-form" template="amp-mustache"]
 
@@ -77,288 +77,49 @@ Here's an example of a basic form:
 
 [/example]
 
-## Attributes
-
-[filter formats="websites, ads"]
-
-##### target
+### Inputs and fields
 
-Indicates where to display the form response after submitting the form. The value must be `_blank` or `_top`.
-
-##### action
-
-Specifies a server endpoint to handle the form input. The value must be an `https` URL (absolute or relative) and must not be a link to a CDN.
-
-- For `method=GET`: use this attribute or [`action-xhr`](#action-xhr).
-- For `method=POST`: use the [`action-xhr`](#action-xhr) attribute.
-
-[tip type="note"]
-The `target` and `action` attributes are only used for non-xhr GET requests. The AMP runtime will use `action-xhr` to make the request and will ignore `action` and `target`. When `action-xhr` is not provided, AMP makes a GET request to the `action` endpoint and uses `target` to open a new window (if `_blank`). The AMP runtime might also fallback to using `action` and `target` in cases where the `amp-form` extension fails to load.
-[/tip][/filter] <!-- formats="websites, ads" -->
-
-##### action-xhr
-
-Specifies a server endpoint to handle the form input and submit the form via XMLHttpRequest (XHR). An XHR request (sometimes called an AJAX request) is where the browser would make the request without a full load of the page or opening a new page. Browsers will send the request in the background using the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) when available and fallback to [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) for older browsers.
-
-{% call callout('Important', type='caution') %}
-Your XHR endpoint must implement the requirements for [CORS security](https://www.ampproject.org/docs/fundamentals/amp-cors-requests#cors-security-in-amp).
-{% endcall %}
-
-This attribute is required for `method=POST`, and is optional for `method=GET`.
-
-The value for `action-xhr` can be the same or a different endpoint than `action` and has the same `action` requirements above.
+#### Allowed
 
 [filter formats="websites, ads"]
 
-To learn about redirecting the user after successfully submitting the form, see the [Redirecting after a submission](#redirecting-after-a-submission) section below.
-
-##### enctype (optional)
-
-The enctype attribute specifies how form-data should be encoded before sending it to the server via the `method=POST` submission. The default encoding is set to `multipart/form-data`. This and `application/x-www-form-urlencoded` encoding types are currently supported.
-
-Summary of enctype values:
-
-- `application/x-www-form-urlencoded` - Sets the encoding type to `application/x-www-form-urlencoded`.
-- `multipart/form-data` - Sets the encoding type to `multipart/form-data`.
-- `any value` or unspecified - Setting the `enctype` attribute to a value not specified above or not setting the attribute at all will result in the default encoding type of `multipart/form-data`.
-
-##### data-initialize-from-url (optional)
-
-Initializes form fields from the window URL's search string, where the query parameter name matches the field's name. When this attribute is present, `<input>`, `<select>`, and `<textarea>` fields can optionally be initialized.
-
-Individual fields are opted-in if they contain attribute `data-allow-initialization`. On page load, if the URL contains a query parameter with name matching an opted-in field's `name` attribute, the value or checked-state of that field will be updated based on the value of that query parameter. For example, `<input type="search" name="q" data-allow-initialization>` would display "my search" if the AMP page is visited with URL `https://example.com/search?q=my+search`.
-
-Sample:
-
-```html
-<form data-initialize-from-url
-    method="get"
-    action="https://example.com/search"{% if not format=='email'%}
-    target="_top"{% endif %}>
-  <label>Search: <input type="search" name="q" data-allow-initialization></label>
-</form>
-<!-- display search results using amp-list -->
-```
-
-Limitations:
-
-- Supported `<input>` types include `checkbox`, `color`, `date`, `datetime-local`, `email`, `hidden`, `month`, `number`, `radio`, `range`, `search`, `tel`, `text`, `time`, `url`, and `week`.
-- Fields that take advantage of [variable substitutions](#variable-substitutions) (fields with attribute `data-amp-replace`) are not supported.
-- This feature is not supported on AMP pages delivered by an [AMP cache](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/). The `data-initialize-from-url` and `data-allow-initialization` attributes will not cause AMP validation failures, but the form fields will not be initialized from the URL.
-
-##### xssi-prefix (optional)
-
-Specifies that a prefix should be stripped prior to parsing the fetched json from the `action-xhr` endpoint. If the prefix is not present in the response, then this attribute will have no effect.
-This can be useful for APIs that include [security prefixes](http://patorjk.com/blog/2013/02/05/crafty-tricks-for-avoiding-xssi/) like `)]}` to help prevent cross site scripting attacks.
-
-[/filter] <!-- formats="websites, ads" -->
+-   Other form-related elements, including: `<textarea>`, `<select>`, `<option>`, `<fieldset>`, `<label>`, `<input type=text>`, `<input type=submit>`, and so on.
+-   `<input type=password>` and `<input type=file>` inside of `<form method=POST action-xhr>`.
+-   [`amp-selector`](https://amp.dev/documentation/components/amp-selector)
 
-##### Other form attributes
-
-All other [form attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) are optional.
-
-[filter formats="websites, ads"]
-
-##### custom-validation-reporting
-
-This is an optional attribute that enables and selects a custom validation reporting strategy. Valid values are one of: `show-first-on-submit`, `show-all-on-submit` or `as-you-go`.
-
-See the [Custom Validation](#custom-validations) section for more details.
-
-[/filter] <!-- formats="websites, ads" -->
+[/filter]<!-- formats="websites, ads" -->
 
 [filter formats="email"]
 
-##### Invalid AMP email attributes
-
-The AMP for Email spec disallows the use of the following attributes on the AMP email format.
-
-- `action`
-- `name`
-- `target`
-- `verify-xhr`
+-   Other form-related elements, including: `<textarea>`, `<select>`, `<option>`, `<fieldset>`, `<label>`, `<input type=text>`, `<input type=submit>`, and so on.
+-   [`amp-selector`](https://amp.dev/documentation/components/amp-selector)
 
 [/filter]<!-- formats="email" -->
 
-## Inputs and fields
-
-**Allowed**:
-
-- Other form-related elements, including: `<textarea>`, `<select>`, `<option>`, `<fieldset>`, `<label>`, `<input type=text>`, `<input type=submit>`, and so on.
-- `<input type=password>` and `<input type=file>` inside of `<form method=POST action-xhr>`.
-- [`amp-selector`](https://amp.dev/documentation/components/amp-selector)
-
-**Not Allowed**:
-
-- `<input type=button>`, `<input type=image>`
-- Most of the form-related attributes on inputs including: `form`, `formaction`, `formtarget`, `formmethod` and others.
-
-(Relaxing some of these rules might be reconsidered in the future - [please let us know](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#suggestions-and-feature-requests) if you require these and provide use cases).
-
-For details on valid inputs and fields, see [amp-form rules](https://github.com/ampproject/amphtml/blob/master/validator/validator-main.protoascii) in the AMP validator specification.
-
-## Actions
-
-The `amp-form` element exposes the following actions:
-
-| Action   | Description                                                                                                                                         |
-| -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `submit` | Allows you to trigger the form submission on a specific action, for example, tapping a link, or [submitting a form on input change](#input-events). |
-| `clear`  | Empties the values from each input in the form. This can allow users to quickly fill out forms a second time.                                       |
-
-{% call callout('Read on', type='read') %}
-Learn more about [Actions and Events in AMP](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events).
-{% endcall %}
-
-## Events
-
-Use `amp-form` events with the [`on` attribute](https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#on)
-
-The following example listens to both the `submit-success` and `submit-error` events and shows different lightboxes depending on the event:
-
-```html
-<form
-  ...
-  on="submit-success:success-lightbox;submit-error:error-lightbox"
-  ...
-></form>
-```
-
-### `amp-form` event list
-
-#### `submit`
-
-The form is submitted and before the submission is complete.
-
-#### `submit-success`
-
-The form submission is done and the response is a success.
-
-#### `submit-error`
-
-The form submission is done and the response is an error.
+#### Not Allowed
 
 [filter formats="websites, ads"]
 
-#### `verify`
-
-Asynchronous verification is initiated.
-
-#### `verify-error`
-
-Asynchronous verification is done and the response is an error.
-
-#### `valid`
+-   `<input type=button>`, `<input type=image>`
+-   Most of the form-related attributes on inputs including: `formaction`, `formtarget`, `formmethod` and others.
 
-The form's validation state changes to "valid" (in accordance with its [reporting strategy](#reporting-strategies)).
-
-#### `invalid`
-
-The form's validation state to "invalid" (in accordance with its [reporting strategy](#reporting-strategies)).
 [/filter]<!-- formats="websites, ads" -->
 
-#### Input events
-
-AMP exposes `change` and `input-debounced` events on child `<input>` elements. This allows you to use the [`on` attribute](https://www.ampproject.org/docs/fundamentals/spec#on) to execute an action on any element when an input value changes.
-
-For example, a common use case is to submit a form on input change (selecting a radio button to answer a poll, choosing a language from a `select` input to translate a page, etc.).
-
-[example preview="inline" playground="true" imports="amp-form"]
-
-```html
-<form id="myform"
-    method="post"
-    action-xhr="https://example.com/myform"{% if not format=='email'%}
-    target="_blank"{% endif %}>
-    <fieldset>
-      <label>
-        <input name="answer1"
-          value="Value 1"
-          type="radio"
-          on="change:myform.submit">Value 1
-      </label>
-      <label>
-        <input name="answer1"
-          value="Value 2"
-          type="radio"
-          on="change:myform.submit">Value 2
-      </label>
-    </fieldset>
-  </form>
-```
-
-[/example]
-
-See the [full example here](../../examples/forms.amp.html).
-
-[filter formats="websites, ads"]
-
-### Analytics triggers
-
-The `amp-form` extension triggers the following events that you can track in your [amp-analytics](https://amp.dev/documentation/components/amp-analytics) config:
-
-| Event                     | Fired when                                                                                    |
-| ------------------------- | --------------------------------------------------------------------------------------------- |
-| `amp-form-submit`         | A form request is initiated.                                                                  |
-| `amp-form-submit-success` | A successful response is received (i.e, when the response has a status of `2XX`).             |
-| `amp-form-submit-error`   | An unsuccessful response is received (i.e, when the response doesn't have a status of `2XX`). |
-
-You can configure your analytics to send these events as in the following example:
-
-```html
-<amp-analytics>
-  <script type="application/json">
-    {
-      "requests": {
-        "event": "https://www.example.com/analytics/event?eid=${eventId}",
-        "searchEvent": "https://www.example.com/analytics/search?formId=${formId}&query=${formFields[query]}"
-      },
-      "triggers": {
-        "formSubmit": {
-          "on": "amp-form-submit",
-          "request": "searchEvent"
-        },
-        "formSubmitSuccess": {
-          "on": "amp-form-submit-success",
-          "request": "event",
-          "vars": {
-            "eventId": "form-submit-success"
-          }
-        },
-        "formSubmitError": {
-          "on": "amp-form-submit-error",
-          "request": "event",
-          "vars": {
-            "eventId": "form-submit-error"
-          }
-        }
-      }
-    }
-  </script>
-</amp-analytics>
-```
-
-All three events generate a set of variables that correspond to the specific form and the fields in the form. These variables can be used for analytics.
-
-For example, the following form has one field:
+[filter formats="email"]
 
-```html
-<form action-xhr="/comment" method="POST" id="submit_form">
-  <input type="text" name="comment" />
-  <input type="submit" value="Comment" />
-</form>
-```
+-   `<input type=button>`, `<input type=image>`
+-   `<input type=password>` and `<input type=file>`
+-   Most of the form-related attributes on inputs including: `formaction`, `formtarget`, `formmethod` and others.
 
-When the `amp-form-submit`, `amp-form-submit-success`, or `amp-form-submit-error` event fires, it generates the following variables containing the values that were specified in the form:
+[/filter]<!-- formats="email" -->
 
-- `formId`
-- `formFields[comment]`
+(Relaxing some of these rules might be reconsidered in the future - [please let us know](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#suggestions-and-feature-requests) if you require these and provide use cases).
 
-[/filter]<!-- formats="websites, ads" -->
+For details on valid inputs and fields, see [amp-form rules](https://github.com/ampproject/amphtml/blob/main/validator/validator-main.protoascii) in the AMP validator specification.
 
-## Success/error response rendering
+### Success and error response rendering
 
-You can render success or error responses in your form by using [extended templates](https://www.ampproject.org/docs/fundamentals/spec#extended-templates), such as [amp-mustache](https://amp.dev/documentation/components/amp-mustache), or success responses through data binding with [amp-bind](https://amp.dev/documentation/components/amp-bind) and the following response attributes:
+You can render success or error responses in your form by using [amp-mustache](../amp-mustache/amp-mustache.md), or success responses through data binding with [amp-bind](../amp-bind/amp-bind.md) and the following response attributes:
 
 | Response attribute | Description                                                                                                                                                                                                                                                            |
 | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -366,15 +127,17 @@ You can render success or error responses in your form by using [extended templa
 | `submit-error`     | Can be used to display a submission error if the response is unsuccessful (i.e., does not have a status of `2XX`).                                                                                                                                                     |
 | `submitting`       | Can be used to display a message when the form is submitting. The template for this attribute has access to the form's input fields for any display purposes. Please see the [full form example below](#example-submitting) for how to use the `submitting` attribute. |
 
-### To render responses with templating:
+#### To render responses with templating:
 
-- Apply a response attribute to any descendent of the `<form>` element.
-- Render the response in the child element by including a template via `<template></template>` or `<script type="text/plain"></script>` tag inside it or by referencing a template with a `template="id_of_other_template"` attribute.
-- Provide a valid JSON object for responses to `submit-success` and `submit-error`. Both success and error responses should have a `Content-Type: application/json` header.
+-   Apply a response attribute to any descendant of the `<form>` element.
+-   Render the response in the child element by including a template via `<template></template>` or `<script type="text/plain"></script>` tag inside it or by referencing a template with a `template="id_of_other_template"` attribute.
+-   Provide a valid JSON object for responses to `submit-success` and `submit-error`. Both success and error responses should have a `Content-Type: application/json` header.
 
-<a id="example-submitting"></a>
+[tip type="note"]
+When using `<amp-form>` in tandem with another templating AMP component, such as `<amp-list>`, note that templates may not nest in valid AMP documents. In this case a valid workaround is to provide the template by `id` via the `template` attribute. Learn more about [nested templates in `<amp-mustache>`](https://amp.dev/documentation/components/amp-mustache/#nested-templates).
+[/tip]
 
-##### Example: Form displays success, error, and submitting messages
+<a id="example-submitting"></a>
 
 In the following example, the responses are rendered in an inline template inside the form.
 
@@ -454,11 +217,11 @@ See the [full example here](../../examples/forms.amp.html).
 
 ### To render a successful response with data binding
 
-- Use the [on attribute](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events) to bind the form _submit-success_ attribute to [`AMP.setState()`](<https://amp.dev/documentation/components/amp-bind#updating-state-with-amp.setstate()>).
-- Use the `event` property to capture the response data.
-- Add the state attribute to the desired element to bind the form response.
+-   Use the [on attribute](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events) to bind the form _submit-success_ attribute to [`AMP.setState()`](<https://amp.dev/documentation/components/amp-bind#updating-state-with-amp.setstate()>).
+-   Use the `event` property to capture the response data.
+-   Add the state attribute to the desired element to bind the form response.
 
-The following example demonstrates a form `submit-success` response with [`amp-bind`](https://amp.dev/documentation/components/amp-bind):
+The following example demonstrates a form `submit-success` response with [`amp-bind`](../amp-bind/amp-bind.md):
 
 ```html
 <p [text]="'Thanks, ' + subscribe +'! You have successfully subscribed.'">
@@ -499,7 +262,7 @@ Then `amp-bind` updates the `<p>` element's text to match the `subscibe` state:
 
 [filter formats="websites, ads"]
 
-### Redirecting after a submission
+#### Redirecting after a submission
 
 You can redirect users to a new page after a successful form submission by setting the `AMP-Redirect-To` response header and specifying a redirect URL. The redirect URL must be a HTTPS URL, otherwise AMP will throw an error and redirection won't occur. HTTP response headers are configured via your server.
 
@@ -516,7 +279,7 @@ Access-Control-Expose-Headers: AMP-Redirect-To
 Check out AMP By Example's [Form Submission with Update](https://amp.dev/documentation/examples/components/amp-form/#form-submission-with-page-update) and [Product Page](https://amp.dev/documentation/examples/e-commerce/product_page/#product-page) that demonstrate using redirection after a form submission.
 {% endcall %}
 
-## Custom validations
+### Custom validations
 
 The `amp-form` extension allows you to build your own custom validation UI by using the `custom-validation-reporting` attribute along with one the following reporting strategies: `show-first-on-submit`, `show-all-on-submit` or `as-you-go`.
 
@@ -570,35 +333,33 @@ Here's an example:
 
 [/example]
 
-For more examples, see [examples/forms.amp.html](../../examples/forms.amp.html).
-
 For validation messages, if your element contains no text content inside, AMP will fill it out with the browser's default validation message. In the example above, when the `name5` input is empty and validation is kicked off (i.e., user tried to submit the form) AMP will fill `<span visible-when-invalid="valueMissing" validation-for="name5"></span>` with the browser's validation message and show that `span` to the user.
 
 {% call callout('Important', type='caution') %}
 You must provide your own validation UI for each kind of invalid state that the input could have. If these are not present, users will not see any `custom-validation-reporting` for the missing error state. The validity states can be found in the [official W3C HTML validation reporting documentation](https://www.w3.org/TR/html50/forms.html#validitystate).
 {% endcall %}
 
-### Reporting strategies
+#### Reporting strategies
 
 Specify one of the following reporting options for the `custom-validation-reporting` attribute:
 
-#### Show First on Submit
+##### Show First on Submit
 
 The `show-first-on-submit` reporting option mimics the browser's default behavior when default validation kicks in. It shows the first validation error it finds and stops there.
 
-#### Show All on Submit
+##### Show All on Submit
 
 The `show-all-on-submit` reporting option shows all validation errors on all invalid inputs when the form is submitted. This is useful if you'd like to show a summary of validations.
 
-#### As You Go
+##### As You Go
 
 The `as-you-go` reporting option allows your user to see validation messages as they're interacting with the input. For example, if the user types an invalid email address, the user will see the error right away. Once they correct the value, the error goes away.
 
-#### Interact and Submit
+##### Interact and Submit
 
 The `interact-and-submit` reporting option combines the behavior of `show-all-on-submit` and `as-you-go`. Individual fields will show any errors immediately after interactions, and on submit the form will show errors on all invalid fields.
 
-## Verification
+### Verification
 
 HTML5 validation gives feedback based only on information available on the page, such as if a value matches a certain pattern. With `amp-form` verification you can give the user feedback that HTML5 validation alone cannot. For example, a form can use verification to check if an email address has already been registered. Another use-case is verifying that a city field and a zip code field match each other.
 
@@ -671,9 +432,9 @@ to the input element.
 
 For more examples, see [examples/forms.amp.html](../../examples/forms.amp.html).
 
-## Variable substitutions
+### Variable substitutions
 
-The `amp-form` extension allows [platform variable substitutions](../../spec/amp-var-substitutions.md) for inputs that are hidden and that have the `data-amp-replace` attribute. On each form submission, `amp-form` finds all `input[type=hidden][data-amp-replace]` inside the form and applies variable substitutions to its `value` attribute and replaces it with the result of the substitution.
+The `amp-form` extension allows [platform variable substitutions](../../docs/spec/amp-var-substitutions.md) for inputs that are hidden and that have the `data-amp-replace` attribute. On each form submission, `amp-form` finds all `input[type=hidden][data-amp-replace]` inside the form (or referenced via the `form` attribute) and applies variable substitutions to its `value` attribute and replaces it with the result of the substitution.
 
 You must provide the variables you are using for each substitution on each input by specifying a space-separated string of the variables used in `data-amp-replace` (see example below). AMP will not replace variables that are not explicitly specified.
 
@@ -721,11 +482,20 @@ Once the user tries to submit the form, AMP will try to resolve the variables an
 
 Note how `CANONICAL_HOSTNAME` above did not get replaced because it was not in the allowlist through `data-amp-replace` attribute on the first field.
 
-Substitutions will happen on every subsequent submission. Read more about [variable substitutions in AMP](../../spec/amp-var-substitutions.md).
+Substitutions will happen on every subsequent submission. Read more about [variable substitutions in AMP](../../docs/spec/amp-var-substitutions.md).
 
 [/filter]<!-- formats="websites, ads" -->
 
-## Polyfills
+### Autoexpand
+
+AMP Form provides an `autoexpand` attribute to `<textarea>` elements. This allows the textarea
+to expand and shrink to accomodate the user's rows of input, up to the field's maximum size. If the user manually resizes the field, the autoexpand behavior will be removed.
+
+```html
+<textarea autoexpand></textarea>
+```
+
+### Polyfills
 
 The `amp-form` extension provide polyfills for behaviors and functionality missing from some browsers or being implemented in the next version of CSS.
 
@@ -745,13 +515,279 @@ The `amp-form` extension provides [classes](#classes-and-css-hooks) to polyfill
 
 Regular expression matching is a common validation feature supported natively on most input elements, except for `<textarea>`. We polyfill this functionality and support the `pattern` attribute on `<textarea>` elements.
 
-AMP Form provides an `autoexpand` attribute to `<textarea>` elements. This allows the textarea
-to expand and shrink to accomodate the user's rows of input, up to the field's maximum size. If the user manually resizes the field, the autoexpand behavior will be removed.
+### Security considerations
+
+#### Protecting against XSRF
+
+In addition to following the details in the [AMP CORS spec](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests), please pay extra attention to the section on ["Processing state changing requests" ](https://www.ampproject.org/docs/fundamentals/amp-cors-requests.html#processing-state-changing-requests) to protect against [XSRF attacks](https://en.wikipedia.org/wiki/Cross-site_request_forgery) where an attacker can execute unauthorized commands using the current user session without the user knowledge.
+
+In general, keep in mind the following points when accepting input from the user:
+
+-   Only use POST for state changing requests.
+-   Use non-XHR GET for navigational purposes only (e.g. search).
+    -   Non-XHR GET requests are will not receive accurate origin/headers and backends won't be able to protect against XSRF with the above mechanism.
+    -   In general, use XHR/non-XHR GET requests for navigational or information retrieval only.
+-   Non-XHR POST requests are not allowed in AMP documents. This is due to inconsistencies of setting `Origin` header on these requests across browsers, and the complications supporting it would introduce in protecting against XSRF. This might be reconsidered and introduced later &mdash; please file an issue if you think this is needed.
+
+## Attributes
+
+[filter formats="websites, ads"]
+
+### `target`
+
+Indicates where to display the form response after submitting the form. The value must be `_blank` or `_top`.
+
+### `action`
+
+Specifies a server endpoint to handle the form input. The value must be an `https` URL (absolute or relative) and must not be a link to a CDN.
+
+-   For `method=GET`: use this attribute or [`action-xhr`](#action-xhr).
+-   For `method=POST`: use the [`action-xhr`](#action-xhr) attribute.
+
+[tip type="note"]
+The `target` and `action` attributes are only used for non-xhr GET requests. The AMP runtime will use `action-xhr` to make the request and will ignore `action` and `target`. When `action-xhr` is not provided, AMP makes a GET request to the `action` endpoint and uses `target` to open a new window (if `_blank`). The AMP runtime might also fall back to using `action` and `target` in cases where the `amp-form` extension fails to load.
+[/tip][/filter] <!-- formats="websites, ads" -->
+
+### `action-xhr`
+
+Specifies a server endpoint to handle the form input and submit the form via XMLHttpRequest (XHR). An XHR request (sometimes called an AJAX request) is where the browser would make the request without a full load of the page or opening a new page. Browsers will send the request in the background using the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) when available and fall back to [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) for older browsers.
+
+{% call callout('Important', type='caution') %}
+Your XHR endpoint must implement the requirements for [CORS security](https://www.ampproject.org/docs/fundamentals/amp-cors-requests#cors-security-in-amp).
+{% endcall %}
+
+This attribute is required for `method=POST`, and is optional for `method=GET`.
+
+The value for `action-xhr` can be the same or a different endpoint than `action` and has the same `action` requirements above.
+
+[filter formats="websites, ads"]
+
+To learn about redirecting the user after successfully submitting the form, see the [Redirecting after a submission](#redirecting-after-a-submission) section below.
+
+### `enctype`
+
+The enctype attribute specifies how form-data should be encoded before sending it to the server via the `method=POST` submission. The default encoding is set to `multipart/form-data`. This and `application/x-www-form-urlencoded` encoding types are currently supported.
+
+Summary of enctype values:
+
+-   `application/x-www-form-urlencoded` - Sets the encoding type to `application/x-www-form-urlencoded`.
+-   `multipart/form-data` - Sets the encoding type to `multipart/form-data`.
+-   `any value` or unspecified - Setting the `enctype` attribute to a value not specified above or not setting the attribute at all will result in the default encoding type of `multipart/form-data`.
+
+### `data-initialize-from-url`
+
+Initializes form fields from the window URL's search string, where the query parameter name matches the field's name. When this attribute is present, `<input>`, `<select>`, and `<textarea>` fields can optionally be initialized.
+
+Individual fields are opted-in if they contain attribute `data-allow-initialization`. On page load, if the URL contains a query parameter with name matching an opted-in field's `name` attribute, the value or checked-state of that field will be updated based on the value of that query parameter. For example, `<input type="search" name="q" data-allow-initialization>` would display "my search" if the AMP page is visited with URL `https://example.com/search?q=my+search`.
+
+Sample:
 
 ```html
-<textarea autoexpand></textarea>
+<form data-initialize-from-url
+    method="get"
+    action="https://example.com/search"{% if not format=='email'%}
+    target="_top"{% endif %}>
+  <label>Search: <input type="search" name="q" data-allow-initialization></label>
+</form>
+<!-- display search results using amp-list -->
 ```
 
+Limitations:
+
+-   Supported `<input>` types include `checkbox`, `color`, `date`, `datetime-local`, `email`, `hidden`, `month`, `number`, `radio`, `range`, `search`, `tel`, `text`, `time`, `url`, and `week`.
+-   Fields that take advantage of [variable substitutions](#variable-substitutions) (fields with attribute `data-amp-replace`) are not supported.
+-   This feature is not supported on AMP pages delivered by an [AMP cache](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/). The `data-initialize-from-url` and `data-allow-initialization` attributes will not cause AMP validation failures, but the form fields will not be initialized from the URL.
+
+### `xssi-prefix`
+
+Specifies that a prefix should be stripped prior to parsing the fetched json from the `action-xhr` endpoint. If the prefix is not present in the response, then this attribute will have no effect.
+This can be useful for APIs that include [security prefixes](http://patorjk.com/blog/2013/02/05/crafty-tricks-for-avoiding-xssi/) like `)]}` to help prevent cross site scripting attacks.
+
+[/filter] <!-- formats="websites, ads" -->
+
+### Other form attributes
+
+All other [form attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) are optional.
+
+[filter formats="websites, ads"]
+
+### `custom-validation-reporting`
+
+This is an optional attribute that enables and selects a custom validation reporting strategy. Valid values are one of: `show-first-on-submit`, `show-all-on-submit` or `as-you-go`.
+
+See the [Custom Validation](#custom-validations) section for more details.
+
+[/filter] <!-- formats="websites, ads" -->
+
+[filter formats="email"]
+
+### Invalid AMP email attributes
+
+The AMP for Email spec disallows the use of the following attributes on the AMP email format.
+
+-   `action`
+-   `name`
+-   `target`
+-   `verify-xhr`
+
+[/filter]<!-- formats="email" -->
+
+## Actions
+
+The `amp-form` element exposes the following actions.
+
+### `submit`
+
+Allows you to trigger the form submission on a specific action, for example, tapping a link, or [submitting a form on input change](#input-events).
+
+### `clear`
+
+Empties the values from each input in the form. This can allow users to quickly fill out forms a second time.
+
+## Events
+
+Use `amp-form` events with the [`on` attribute](https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#on)
+
+The following example listens to both the `submit-success` and `submit-error` events and shows different lightboxes depending on the event:
+
+```html
+<form
+  ...
+  on="submit-success:success-lightbox;submit-error:error-lightbox"
+  ...
+></form>
+```
+
+### `submit`
+
+The form is submitted and before the submission is complete.
+
+### `submit-success`
+
+The form submission is done and the response is a success.
+
+### `submit-error`
+
+The form submission is done and the response is an error.
+
+[filter formats="websites, ads"]
+
+### `verify`
+
+Asynchronous verification is initiated.
+
+### `verify-error`
+
+Asynchronous verification is done and the response is an error.
+
+### `valid`
+
+The form's validation state changes to "valid" (in accordance with its [reporting strategy](#reporting-strategies)).
+
+### `invalid`
+
+The form's validation state to "invalid" (in accordance with its [reporting strategy](#reporting-strategies)).
+[/filter]<!-- formats="websites, ads" -->
+
+### Input events
+
+AMP exposes `change` and `input-debounced` events on child `<input>` elements. This allows you to use the [`on` attribute](https://www.ampproject.org/docs/fundamentals/spec#on) to execute an action on any element when an input value changes.
+
+For example, a common use case is to submit a form on input change (selecting a radio button to answer a poll, choosing a language from a `select` input to translate a page, etc.).
+
+[example preview="inline" playground="true" imports="amp-form"]
+
+```html
+<form id="myform"
+    method="post"
+    action-xhr="https://example.com/myform"{% if not format=='email'%}
+    target="_blank"{% endif %}>
+    <fieldset>
+      <label>
+        <input name="answer1"
+          value="Value 1"
+          type="radio"
+          on="change:myform.submit">Value 1
+      </label>
+      <label>
+        <input name="answer1"
+          value="Value 2"
+          type="radio"
+          on="change:myform.submit">Value 2
+      </label>
+    </fieldset>
+  </form>
+```
+
+[/example]
+
+See the [full example here](../../examples/forms.amp.html).
+
+[filter formats="websites, ads"]
+
+## Analytics
+
+The `amp-form` extension triggers the following events that you can track in your [amp-analytics](https://amp.dev/documentation/components/amp-analytics) config:
+
+| Event                     | Fired when                                                                                    |
+| ------------------------- | --------------------------------------------------------------------------------------------- |
+| `amp-form-submit`         | A form request is initiated.                                                                  |
+| `amp-form-submit-success` | A successful response is received (i.e, when the response has a status of `2XX`).             |
+| `amp-form-submit-error`   | An unsuccessful response is received (i.e, when the response doesn't have a status of `2XX`). |
+
+You can configure your analytics to send these events as in the following example:
+
+```html
+<amp-analytics>
+  <script type="application/json">
+    {
+      "requests": {
+        "event": "https://www.example.com/analytics/event?eid=${eventId}",
+        "searchEvent": "https://www.example.com/analytics/search?formId=${formId}&query=${formFields[query]}"
+      },
+      "triggers": {
+        "formSubmit": {
+          "on": "amp-form-submit",
+          "request": "searchEvent"
+        },
+        "formSubmitSuccess": {
+          "on": "amp-form-submit-success",
+          "request": "event",
+          "vars": {
+            "eventId": "form-submit-success"
+          }
+        },
+        "formSubmitError": {
+          "on": "amp-form-submit-error",
+          "request": "event",
+          "vars": {
+            "eventId": "form-submit-error"
+          }
+        }
+      }
+    }
+  </script>
+</amp-analytics>
+```
+
+All three events generate a set of variables that correspond to the specific form and the fields in the form. These variables can be used for analytics.
+
+For example, the following form has one field:
+
+```html
+<form action-xhr="/comment" method="POST" id="submit_form">
+  <input type="text" name="comment" />
+  <input type="submit" value="Comment" />
+</form>
+```
+
+When the `amp-form-submit`, `amp-form-submit-success`, or `amp-form-submit-error` event fires, it generates the following variables containing the values that were specified in the form:
+
+-   `formId`
+-   `formFields[comment]`
+
+[/filter]<!-- formats="websites, ads" -->
+
 ## Styling
 
 ### Classes and CSS hooks
@@ -760,36 +796,22 @@ The `amp-form` extension provides classes and CSS hooks for publishers to style
 
 The following classes can be used to indicate the state of the form submission:
 
-- `.amp-form-initial`
-- `.amp-form-verify`
-- `.amp-form-verify-error`
-- `.amp-form-submitting`
-- `.amp-form-submit-success`
-- `.amp-form-submit-error`
+-   `.amp-form-initial`
+-   `.amp-form-verify`
+-   `.amp-form-verify-error`
+-   `.amp-form-submitting`
+-   `.amp-form-submit-success`
+-   `.amp-form-submit-error`
 
 The following classes are a [polyfill for the user interaction pseudo classes](#user-interaction-pseudo-classes):
 
-- `.user-valid`
-- `.user-invalid`
+-   `.user-valid`
+-   `.user-invalid`
 
 Publishers can use these classes to style their inputs and fieldsets to be responsive to user actions (e.g., highlighting an invalid input with a red border after user blurs from it).
 
 See the [full example here](../../examples/forms.amp.html) on using these.
 
-{% call callout('Tip', type='success') %}
-Visit [AMP Start](https://ampstart.com/components#form-elements) for responsive, pre-styled AMP form elements that you can use in your AMP pages.
-{% endcall %}
-
-## Security considerations
-
-### Protecting against XSRF
-
-In addition to following the details in the [AMP CORS spec](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests), please pay extra attention to the section on ["Processing state changing requests" ](https://www.ampproject.org/docs/fundamentals/amp-cors-requests.html#processing-state-changing-requests) to protect against [XSRF attacks](https://en.wikipedia.org/wiki/Cross-site_request_forgery) where an attacker can execute unauthorized commands using the current user session without the user knowledge.
-
-In general, keep in mind the following points when accepting input from the user:
+## Validation
 
-- Only use POST for state changing requests.
-- Use non-XHR GET for navigational purposes only (e.g. search).
-  - Non-XHR GET requests are will not receive accurate origin/headers and backends won't be able to protect against XSRF with the above mechanism.
-  - In general, use XHR/non-XHR GET requests for navigational or information retrieval only.
-- Non-XHR POST requests are not allowed in AMP documents. This is due to inconsistencies of setting `Origin` header on these requests across browsers, and the complications supporting it would introduce in protecting against XSRF. This might be reconsidered and introduced later &mdash; please file an issue if you think this is needed.
+See [amp-form rules](validator-amp-form.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-form/validator-amp-form.protoascii b/extensions/amp-form/validator-amp-form.protoascii
index 3c6558b1a6412..a34d05681815c 100644
--- a/extensions/amp-form/validator-amp-form.protoascii
+++ b/extensions/amp-form/validator-amp-form.protoascii
@@ -18,7 +18,6 @@ tags: {  # amp-form
   # under section "4.10 Forms"
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-form"
diff --git a/extensions/amp-fx-collection/0.1/amp-fx-collection.js b/extensions/amp-fx-collection/0.1/amp-fx-collection.js
index 2ac4e36093a4f..8c5935061a6c2 100644
--- a/extensions/amp-fx-collection/0.1/amp-fx-collection.js
+++ b/extensions/amp-fx-collection/0.1/amp-fx-collection.js
@@ -14,20 +14,21 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../../src/amp-events';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {
   FxBindings,
   FxObservesSignal,
   FxType, // eslint-disable-line no-unused-vars
   getFxTypes,
 } from './fx-type';
-import {devAssert, rethrowAsync} from '../../../src/log';
+import {devAssert} from '../../../src/log';
 import {
   installPositionBoundFx,
   installScrollToggledFx,
 } from './providers/fx-provider';
 import {iterateCursor} from '../../../src/dom';
 import {listen} from '../../../src/event-helper';
+import {tryCallback} from '../../../src/core/error';
 
 const TAG = 'amp-fx-collection';
 
@@ -68,11 +69,7 @@ export class AmpFxCollection {
       }
 
       // Don't break for all components if only a subset are misconfigured.
-      try {
-        this.register_(element);
-      } catch (e) {
-        rethrowAsync(e);
-      }
+      tryCallback(() => this.register_(element));
     });
   }
 
diff --git a/extensions/amp-fx-collection/0.1/fx-type.js b/extensions/amp-fx-collection/0.1/fx-type.js
index af55f199d6ef2..c61be9f9d42f5 100644
--- a/extensions/amp-fx-collection/0.1/fx-type.js
+++ b/extensions/amp-fx-collection/0.1/fx-type.js
@@ -150,14 +150,14 @@ export function isValidTypeCombination(fxTypeA, fxTypeB) {
 
   const {
     observes: observesA,
-    translates: translatesA,
     opacity: opacityA,
+    translates: translatesA,
   } = FxBindings[fxTypeA];
 
   const {
     observes: observesB,
-    translates: translatesB,
     opacity: opacityB,
+    translates: translatesB,
   } = FxBindings[fxTypeB];
 
   // If they observe different signals, they're restricted.
diff --git a/extensions/amp-fx-collection/0.1/providers/amp-fx-presets-utils.js b/extensions/amp-fx-collection/0.1/providers/amp-fx-presets-utils.js
index 89f083b426082..b2024c42ca1d8 100644
--- a/extensions/amp-fx-collection/0.1/providers/amp-fx-presets-utils.js
+++ b/extensions/amp-fx-collection/0.1/providers/amp-fx-presets-utils.js
@@ -21,8 +21,7 @@
 
 import {FxType} from '../fx-type';
 import {Services} from '../../../../src/services';
-import {mapRange} from '../../../../src/utils/math';
-import {startsWith} from '../../../../src/string';
+import {mapRange} from '../../../../src/core/math';
 import {userAssert} from '../../../../src/log';
 
 const MAX_MOBILE_WIDTH = 480;
@@ -45,7 +44,7 @@ export function convertEasingKeyword(keyword) {
     return curves[keyword];
   }
   userAssert(
-    startsWith(keyword, 'cubic-bezier'),
+    keyword.startsWith('cubic-bezier'),
     'All custom bezier curves should be specified by following the ' +
       '`cubic-bezier()` function notation.'
   );
diff --git a/extensions/amp-fx-collection/0.1/providers/amp-fx-presets.js b/extensions/amp-fx-collection/0.1/providers/amp-fx-presets.js
index d8e61fa72d0d6..0d298dec7a7af 100644
--- a/extensions/amp-fx-collection/0.1/providers/amp-fx-presets.js
+++ b/extensions/amp-fx-collection/0.1/providers/amp-fx-presets.js
@@ -258,7 +258,7 @@ export const Presets = {
     },
     update(entry) {
       const fxElement = this;
-      const {viewportHeight, marginStart} = fxElement;
+      const {marginStart, viewportHeight} = fxElement;
       devAssert(fxElement.adjustedViewportHeight);
 
       if (
diff --git a/extensions/amp-fx-collection/0.1/scroll-toggle.js b/extensions/amp-fx-collection/0.1/scroll-toggle.js
index 2d1bf5aa29ae3..6f7fee64b41b1 100644
--- a/extensions/amp-fx-collection/0.1/scroll-toggle.js
+++ b/extensions/amp-fx-collection/0.1/scroll-toggle.js
@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Observable} from '../../../src/observable';
+import {Observable} from '../../../src/core/data-structures/observable';
 import {Services} from '../../../src/services';
 import {devAssert, user} from '../../../src/log';
-import {once} from '../../../src/utils/function';
+import {once} from '../../../src/core/types/function';
 import {px, setImportantStyles} from '../../../src/style';
 
 const TAG = 'amp-fx';
@@ -253,7 +253,7 @@ function assertStyleOrWarn(computed, prop, expected, element, opt_suffix) {
  * @return {string}
  */
 function elementShorthand(element, depth = 0) {
-  const {tagName, id, classList, parentElement} = element;
+  const {classList, id, parentElement, tagName} = element;
   if (id) {
     return `#${id}`;
   }
diff --git a/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-fade-in-scroll.js b/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-fade-in-scroll.js
index 01f478e2ca50a..b3fb80e683cbf 100644
--- a/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-fade-in-scroll.js
+++ b/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-fade-in-scroll.js
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-const config = describe.configure().ifChrome();
-config.run('amp-fx-collection', function () {
+const config = describes.sandboxed.configure().ifChrome();
+config.run('amp-fx-collection', {}, function () {
   const css = `
     .spacer {
       height: 100vh;
diff --git a/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-fade-in.js b/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-fade-in.js
index d80a661aaeefb..eba40533e2402 100644
--- a/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-fade-in.js
+++ b/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-fade-in.js
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-const config = describe.configure().ifChrome();
-config.run('amp-fx-collection', function () {
+const config = describes.sandboxed.configure().ifChrome();
+config.run('amp-fx-collection', {}, function () {
   const css = `
     .spacer {
       height: 100vh;
diff --git a/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-fly-in.js b/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-fly-in.js
index 9283f7cabd22f..9cb8720d1ca95 100644
--- a/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-fly-in.js
+++ b/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-fly-in.js
@@ -16,7 +16,7 @@
 
 import {isExperimentOn, toggleExperiment} from '../../../../../src/experiments';
 
-describe.skip('amp-fx-collection', function () {
+describes.sandboxed.skip('amp-fx-collection', {}, function () {
   const css = `
     .spacer {
       height: 100vh;
diff --git a/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-parallax.js b/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-parallax.js
index 2730f7f1fa342..fce9444ae736c 100644
--- a/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-parallax.js
+++ b/extensions/amp-fx-collection/0.1/test/integration/test-amp-fx-parallax.js
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-const config = describe.configure().ifChrome();
-config.run('amp-fx-collection', function () {
+const config = describes.sandboxed.configure().ifChrome();
+config.run('amp-fx-collection', {}, function () {
   const css = `
     .spacer {
       height: 100vh;
diff --git a/extensions/amp-fx-collection/OWNERS b/extensions/amp-fx-collection/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-fx-collection/OWNERS
+++ b/extensions/amp-fx-collection/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-fx-collection/amp-fx-collection.md b/extensions/amp-fx-collection/amp-fx-collection.md
index bf469ecd9998d..17da3070bbcc8 100644
--- a/extensions/amp-fx-collection/amp-fx-collection.md
+++ b/extensions/amp-fx-collection/amp-fx-collection.md
@@ -24,37 +24,40 @@ limitations under the License.
 
 # amp-fx-collection
 
-## Overview
+## Usage
 
-The `amp-fx-collection` extension provides a collection of preset visual effects,
-such as parallax that can be easily enabled on any element via attributes.
+The `amp-fx-collection` component provides a collection of preset visual
+effects, such as parallax that can be easily enabled on any element via
+attributes.
 
-To specify a visual effect for an element, add the `amp-fx` attribute with the value of the visual effect.
+## Apply visual effects
 
-## Visual effects
+To specify a visual effect for an element, add the `amp-fx` attribute with the
+value of the visual effect.
 
-Below are the supported visual effects for the amp-fx-collection:
+Below are the supported visual effects for the `amp-fx-collection`:
 
-### parallax
+### `parallax`
 
-The `parallax` effect allows an element to move as if it is nearer or farther relative
-to the foreground of the page content. As the user scrolls the page, the element
-scrolls faster or slower depending on the value assigned to the
+The `parallax` effect allows an element to move as if it is nearer or farther
+relative to the foreground of the page content. As the user scrolls the page,
+the element scrolls faster or slower depending on the value assigned to the
 `data-parallax-factor` attribute.
 
-##### data-parallax-factor
+#### `data-parallax-factor`
 
-Specifies a decimal value that controls how much faster or slower the element scrolls
-relative to the scrolling speed:
+Specifies a decimal value that controls how much faster or slower the element
+scrolls relative to the scrolling speed:
 
-- A value greater than 1 scrolls the element upward (element scrolls faster) when the user scrolls down the page.
-- A value less than 1 scrolls the element downward (element scrolls slower) when the user scrolls downward.
-- A value of 1 behaves normally.
-- A value of 0 effectively makes the element scroll fixed with the page.
+-   A value greater than `1` scrolls the element upward (element scrolls faster)
+    when the user scrolls down the page.
+-   A value less than `1` scrolls the element downward (element scrolls slower)
+    when the user scrolls downward.
+-   A value of `1` behaves normally.
+-   A value of `0` effectively makes the element scroll fixed with the page.
 
-#### Example: Title parallax
-
-In this example, as the user scrolls the page, the h1 element scrolls faster relative to the page's content.
+In this example, as the user scrolls the page, the `h1` element scrolls faster
+relative to the page's content.
 
 ```html
 <h1 amp-fx="parallax" data-parallax-factor="1.5">
@@ -62,13 +65,15 @@ In this example, as the user scrolls the page, the h1 element scrolls faster rel
 </h1>
 ```
 
-### fade-in
+### `fade-in`
 
-The `fade-in` effect allows an element to fade in once the element being targetted is visible in the viewport.
+The `fade-in` effect allows an element to fade in once the element being
+targeted is visible in the viewport.
 
-##### data-duration (optional)
+#### `data-duration` (optional)
 
-This is the duration over which the animation takes places. The default value is `1000ms`.
+This is the duration over which the animation takes places. The default value is
+`1000ms`.
 
 In the below example, the animation lasts over `2000ms`.
 
@@ -83,17 +88,19 @@ In the below example, the animation lasts over `2000ms`.
 </div>
 ```
 
-##### data-easing (optional)
+#### `data-easing` (optional)
 
-This parameter lets you vary the animation's speed over the course of its duration. The default is `ease-in` which is `cubic-bezier(0.40, 0.00, 0.40, 1.00)`. You can choose from one of the presets available:
+This parameter lets you vary the animation's speed over the course of its
+duration. The default is `ease-in` which is `cubic-bezier(0.40, 0.00, 0.40, 1.00)`. You can choose from one of the presets available:
 
-- “linear” - cubic-bezier(0.00, 0.00, 1.00, 1.00)
-- “ease-in-out” - cubic-bezier(0.80, 0.00, 0.20, 1.00)
-- “ease-in” - cubic-bezier(0.80, 0.00, 0.60, 1.00) (default)
-- “ease-out” - cubic-bezier(0.40, 0.00, 0.40, 1.00)
-  or specify a `custom-bezier()` input
+-   `"linear"` - `cubic-bezier(0.00, 0.00, 1.00, 1.00)`
+-   `"ease-in-out"` - `cubic-bezier(0.80, 0.00, 0.20, 1.00)`
+-   `"ease-in"` - `cubic-bezier(0.80, 0.00, 0.60, 1.00)` (default)
+-   `"ease-out"` - `cubic-bezier(0.40, 0.00, 0.40, 1.00)`
+-   Specify a `custom-bezier()` input.
 
-In the below example, the animation acceleration curve is a custom specified `cubic-bezier(...)` curve.
+In the below example, the animation acceleration curve is a custom specified
+`cubic-bezier(...)` curve.
 
 ```html
 <div amp-fx="fade-in" data-easing="cubic-bezier(0.40, 0.00, 0.40, 1.00)">
@@ -106,11 +113,15 @@ In the below example, the animation acceleration curve is a custom specified `cu
 </div>
 ```
 
-##### data-margin-start (optional)
+#### `data-margin-start` (optional)
 
-This parameter determines when to trigger the timed animation. The value specified in `<percent>` dictates that the animation should be triggered when the element has crossed that percentage of the viewport. The default value is `5%`.
+This parameter determines when to trigger the timed animation. The value
+specified in `<percent>` dictates that the animation should be triggered when
+the element has crossed that percentage of the viewport. The default value is
+`5%`.
 
-In the below example, the animation doesn't start until the element has crossed 20% of the viewport from the bottom.
+In the below example, the animation doesn't start until the element has crossed
+20% of the viewport from the bottom.
 
 ```html
 <div amp-fx="fade-in" data-margin-start="20%">
@@ -123,19 +134,27 @@ In the below example, the animation doesn't start until the element has crossed
 </div>
 ```
 
-### fade-in-scroll
+### `fade-in-scroll`
 
-The `fade-in-scroll` effect allows you to change the opacity of an element as it scrolls within the viewport. This creates a scroll dependent fade animation. By default once the element is fully visible we don't animate the opacity anymore.
+The `fade-in-scroll` effect allows you to change the opacity of an element as it
+scrolls within the viewport. This creates a scroll dependent fade animation. By
+default once the element is fully visible we don't animate the opacity anymore.
 
-##### data-margin-start (optional)
+#### `data-margin-start` (optional)
 
-This parameter determines when to trigger the timed animation. The value specified in `<percent>` dictates that the animation should be triggered when the element has crossed that percentage of the viewport. The default value is `0%`
+This parameter determines when to trigger the timed animation. The value
+specified in `<percent>` dictates that the animation should be triggered when
+the element has crossed that percentage of the viewport. The default value is
+`0%`.
 
-##### data-margin-end (optional)
+#### `data-margin-end` (optional)
 
-This parameter determines when to stop the animation. The value specified in `<percent>` dictates that the animation should have finished when the specified amount of the element being targetted is visible. The default value is `50%`
+This parameter determines when to stop the animation. The value specified in
+`<percent>` dictates that the animation should have finished when the specified
+amount of the element being targeted is visible. The default value is `50%`.
 
-In the below example, the `<div>` is fully visible by the time it has crossed 80% of the viewport from the bottom.
+In the below example, the `<div>` is fully visible by the time it has crossed
+80% of the viewport from the bottom.
 
 ```html
 <div amp-fx="fade-in-scroll" data-margin-end="80%">
@@ -148,11 +167,14 @@ In the below example, the `<div>` is fully visible by the time it has crossed 80
 </div>
 ```
 
-##### data-repeat (optional)
+#### `data-repeat` (optional)
 
-By default once the element is fully visible we don't animate the opacity anymore. If you want the opacity to change with the scroll, even when the element has fully loaded, specify this variable on the animation.
+By default once the element is fully visible we don't animate the opacity
+anymore. If you want the opacity to change with the scroll, even when the
+element has fully loaded, specify this variable on the animation.
 
-In the below example, the animation is fully dependent on scroll and the `<div>` fades in and out as the user scrolls.
+In the below example, the animation is fully dependent on scroll and the `<div>`
+fades in and out as the user scrolls.
 
 ```html
 <div amp-fx="fade-in-scroll" data-repeat>
@@ -165,87 +187,107 @@ In the below example, the animation is fully dependent on scroll and the `<div>`
 </div>
 ```
 
-### float-in-top, float-in-bottom
+### `float-in-top`, `float-in-bottom`
 
-The `float-in` effects slide a [`position: fixed`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) element in-and-out of view as the document is scrolled up or down.
+The `float-in-top` and `float-in-bottom` effects slide a
+[`position: fixed`](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
+element in-and-out of view as the document is scrolled up or down.
 
-An element with `amp-fx="float-in-top"` or `...bottom` must have the following CSS properties:
+An element with `amp-fx="float-in-top"` or `amp-fx="float-in-bottom"` must have
+the following CSS properties:
 
-- `position: fixed`
-- `overflow: hidden`
-- **if it's `top`**, `top: 0`
-- **if it's `bottom`**, `bottom: 0`
+-   `position: fixed`
+-   `overflow: hidden`
+-   **if it's `top`**, `top: 0`
+-   **if it's `bottom`**, `bottom: 0`
 
 If any of these is not set, the effect will not be applied and a warning will be
-thrown in [development mode.](https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp#browser-developer-console)
+thrown in [development mode](https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp#browser-developer-console).
 
-### fly-in-bottom, fly-in-left, fly-in-right, fly-in-top
+### `fly-in-bottom`, `fly-in-left`, `fly-in-right`, `fly-in-top`
 
-The `fly-in` effects allow an element's position to be translated by a specified amount once it is in the viewport.
+The `fly-in-bottom`, `fly-in-left`, `fly-in-right`, and `fly-in-top` effects
+allow an element's position to be translated by a specified amount once it is in
+the viewport.
 
-##### data-duration (optional)
+#### `data-duration` (optional)
 
-This is the duration over which the animation takes places. The default value differs across devices as follows:
-Between `480 px` (the minimum width of a mobile device) and `1000px` (the minimum width of a laptop screen width), we scale the default duration between `400ms` and `600ms`.
+This is the duration over which the animation takes places. The default value
+differs across devices as follows: Between `480 px` (the minimum width of a
+mobile device) and `1000px` (the minimum width of a laptop screen width), we
+scale the default duration between `400ms` and `600ms`.
 
 Here are some examples to help you better understand this:
 
-1. screen width - `610px` the default duration for a `fly-in-bottom` would be `450ms`.
-2. screen width - `675px` the default duration for a `fly-in-bottom` would be `475ms`.
-3. screen width - `740px` the default duration for a `fly-in-bottom` would be `500ms`.
-4. screen width - `805px` the default duration for a `fly-in-bottom` would be `525ms`.
-5. screen width - `870px` the default duration for a `fly-in-bottom` would be `550ms`.
+1.  screen width - `610px` the default duration for a `fly-in-bottom` would be
+    `450ms`.
+1.  screen width - `675px` the default duration for a `fly-in-bottom` would be
+    `475ms`.
+1.  screen width - `740px` the default duration for a `fly-in-bottom` would be
+    `500ms`.
+1.  screen width - `805px` the default duration for a `fly-in-bottom` would be
+    `525ms`.
+1.  screen width - `870px` the default duration for a `fly-in-bottom` would be
+    `550ms`.
 
-If the user overrides this default value of `data-duration` to `Xms`, the same default will apply across all devices.
+If the user overrides this default value of `data-duration` to `Xms`, the same
+default will apply across all devices.
 
-##### data-easing (optional)
+#### `data-easing` (optional)
 
-This parameter lets you vary the animation's speed over the course of its duration. The default is `ease-out` which is `cubic-bezier(0.40, 0.00, 0.40, 1.00)`. You can choose from one of the presets available:
+This parameter lets you vary the animation's speed over the course of its
+duration. The default is `ease-out` which is `cubic-bezier(0.40, 0.00, 0.40, 1.00)`. You can choose from one of the presets available:
 
-- “linear” - cubic-bezier(0.00, 0.00, 1.00, 1.00)
-- “ease-in-out” - cubic-bezier(0.80, 0.00, 0.20, 1.00)
-- “ease-in” - cubic-bezier(0.80, 0.00, 0.60, 1.00)
-- “ease-out” - cubic-bezier(0.40, 0.00, 0.40, 1.00) (default)
-  or specify a `custom-bezier()` input.
+-   `"linear"` - `cubic-bezier(0.00, 0.00, 1.00, 1.00)`
+-   `"ease-in-out"` - `cubic-bezier(0.80, 0.00, 0.20, 1.00)`
+-   `"ease-in"` - `cubic-bezier(0.80, 0.00, 0.60, 1.00)`
+-   `"ease-out"` - `cubic-bezier(0.40, 0.00, 0.40, 1.00)` (default)
+-   Specify a `custom-bezier()` input.
 
-##### data-fly-in-distance (optional)
+#### `data-fly-in-distance` (optional)
 
-This parameter determines the translation to take place. The value is specified in `<percent>` of viewport. The default value are as follows:
+This parameter determines the translation to take place. The value is specified
+in `<percent>` of viewport. The default value are as follows:
 
 <table>
-  <tr>
-    <th>amp-fx value</th>
-    <th>Mobile</th>
-    <th>Tablet</th>
-    <th>Desktop</th>
-  </tr>
-  <tr>
-    <td>fly-in-bottom</td>
-    <td>`25%`</td>
-    <td>`25%`</td>
-    <td>`33%`</td>
-  </tr>
-  <tr>
-    <td>fly-in-top</td>
-    <td>`25%`</td>
-    <td>`25%`</td>
-    <td>`33%`</td>
-  </tr>
-  <tr>
-    <td>fly-in-left</td>
-    <td>`100%`</td>
-    <td>`100%`</td>
-    <td>`100%`</td>
-  </tr>
-  <tr>
-    <td>fly-in-right</td>
-    <td>`100%`</td>
-    <td>`100%`</td>
-    <td>`100%`</td>
-  </tr>
+  <thead>
+    <tr>
+      <th>`amp-fx` value</th>
+      <th>Mobile</th>
+      <th>Tablet</th>
+      <th>Desktop</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`fly-in-bottom`</td>
+      <td>`25%`</td>
+      <td>`25%`</td>
+      <td>`33%`</td>
+    </tr>
+    <tr>
+      <td>`fly-in-top`</td>
+      <td>`25%`</td>
+      <td>`25%`</td>
+      <td>`33%`</td>
+    </tr>
+    <tr>
+      <td>`fly-in-left`</td>
+      <td>`100%`</td>
+      <td>`100%`</td>
+      <td>`100%`</td>
+    </tr>
+    <tr>
+      <td>`fly-in-right`</td>
+      <td>`100%`</td>
+      <td>`100%`</td>
+      <td>`100%`</td>
+    </tr>
+  </tbody>
 </table>
 
-In the below example, the element is translated along the Y axis across `20%` of the viewport.
+In the below example, the element is translated along the Y axis across 20% of
+the viewport.
 
 ```html
 <div amp-fx="fly-in-bottom" data-fly-in-distance="20%">
@@ -258,15 +300,20 @@ In the below example, the element is translated along the Y axis across `20%` of
 </div>
 ```
 
-##### data-margin-start (optional)
+#### `data-margin-start` (optional)
 
-This parameter determines when to trigger the timed animation. The value specified in `<percent>` dictates that the animation should be triggered when the element has crossed that percentage of the viewport. The default value is `5%`.
+This parameter determines when to trigger the timed animation. The value
+specified in `<percent>` dictates that the animation should be triggered when
+the element has crossed that percentage of the viewport. The default value is
+`5%`.
 
-## Combining presets
+## Combine visual effects
 
-Developers can also combine `amp-fx` presets together to create combined animations.
+Developers can also combine `amp-fx` presets together to create combined
+animations.
 
-In the below example, the element is both translated along the Y axis and has it's opacity changed from `0` to `1` over a duration of `1000ms`.
+In the below example, the element is both translated along the Y axis and has
+it's opacity changed from `0` to `1` over a duration of `1000ms`.
 
 ```html
 <div amp-fx="fade-in fly-in-bottom" data-duration="1000ms">
@@ -279,9 +326,13 @@ In the below example, the element is both translated along the Y axis and has it
 </div>
 ```
 
-However, there are some presets which don't combine together to create great results. In such cases, we accept the first preset listed and ignore the clashing preset and warn in the console.
+However, there are some presets which don't combine together to create great
+results. In such cases, we accept the first preset listed and ignore the
+clashing preset and warn in the console.
 
-In the below example, the element is being translated along the Y axis by two clashing presets `parallax` and `fly-in-bottom`. In this case we only allow the `parallax` animation and ignore the `fly-in-bottom` preset.
+In the below example, the element is being translated along the Y axis by two
+clashing presets `parallax` and `fly-in-bottom`. In this case we only allow the
+`parallax` animation and ignore the `fly-in-bottom` preset.
 
 ```html
 <div amp-fx="parallax fly-in-bottom" data-parallax-factor="1.5">
@@ -296,10 +347,11 @@ In the below example, the element is being translated along the Y axis by two cl
 
 Below is a list of group of presets, AMP advises you don't combine:
 
-1. `parallax`, `fly-in-top`, `fly-in-bottom`,
-2. `fly-in-left`, `fly-in-right`,
-3. `fade-in`, `fade-in-scroll`.
+1.  `parallax`, `fly-in-top`, `fly-in-bottom`,
+1.  `fly-in-left`, `fly-in-right`,
+1.  `fade-in`, `fade-in-scroll`.
 
 ## Validation
 
-See [amp-fx-collection rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-fx-collection/validator-amp-fx-collection.protoascii) in the AMP validator specification.
+See [`amp-fx-collection` rules](validator-amp-fx-collection.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-fx-collection/validator-amp-fx-collection.protoascii b/extensions/amp-fx-collection/validator-amp-fx-collection.protoascii
index 6b93d762e6269..074bc03658426 100644
--- a/extensions/amp-fx-collection/validator-amp-fx-collection.protoascii
+++ b/extensions/amp-fx-collection/validator-amp-fx-collection.protoascii
@@ -17,7 +17,6 @@ tags: {  # amp-fx-collection
   # Accepted amp-fx-collection attributes can be found in
   # validator-main.protoascii
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-fx-collection"
diff --git a/extensions/amp-fx-flying-carpet/0.1/amp-fx-flying-carpet.js b/extensions/amp-fx-flying-carpet/0.1/amp-fx-flying-carpet.js
index 790cacac750c9..8c021fc4327ad 100644
--- a/extensions/amp-fx-flying-carpet/0.1/amp-fx-flying-carpet.js
+++ b/extensions/amp-fx-flying-carpet/0.1/amp-fx-flying-carpet.js
@@ -15,7 +15,7 @@
  */
 
 import {CSS} from '../../../build/amp-fx-flying-carpet-0.1.css';
-import {CommonSignals} from '../../../src/common-signals';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
 import {Layout} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {dev, userAssert} from '../../../src/log';
@@ -101,15 +101,6 @@ export class AmpFlyingCarpet extends AMP.BaseElement {
     );
   }
 
-  /** @override */
-  viewportCallback(inViewport) {
-    Services.ownersForDoc(this.element).updateInViewport(
-      this.element,
-      this.children_,
-      inViewport
-    );
-  }
-
   /**
    * Asserts that the flying carpet does not appear in the first or last
    * viewport.
@@ -157,7 +148,7 @@ export class AmpFlyingCarpet extends AMP.BaseElement {
       this.initialPositionChecked_ = true;
     }
 
-    const width = this.element.getLayoutWidth();
+    const {width} = this.element.getLayoutSize();
     setStyle(this.container_, 'width', width, 'px');
     Services.ownersForDoc(this.element).scheduleLayout(
       this.element,
diff --git a/extensions/amp-fx-flying-carpet/0.1/test/test-amp-fx-flying-carpet.js b/extensions/amp-fx-flying-carpet/0.1/test/test-amp-fx-flying-carpet.js
index 1c1e71c4c4853..ed60ee090f01a 100644
--- a/extensions/amp-fx-flying-carpet/0.1/test/test-amp-fx-flying-carpet.js
+++ b/extensions/amp-fx-flying-carpet/0.1/test/test-amp-fx-flying-carpet.js
@@ -61,7 +61,7 @@ describes.realWin(
 
       parent.appendChild(flyingCarpet);
       return flyingCarpet
-        .build()
+        .buildInternal()
         .then(() => {
           const resource = Resource.forElement(flyingCarpet);
           resource.measure();
@@ -137,24 +137,24 @@ describes.realWin(
       });
     });
 
-    it('should sync width of fixed container', () => {
-      return getAmpFlyingCarpet().then((flyingCarpet) => {
-        const impl = flyingCarpet.implementation_;
-        const container = flyingCarpet.firstChild.firstChild;
-        let width = 10;
+    it('should sync width of fixed container', async () => {
+      const flyingCarpet = await getAmpFlyingCarpet();
+      const impl = await flyingCarpet.getImpl();
 
-        impl.mutateElement = function (callback) {
-          callback();
-        };
-        flyingCarpet.getLayoutWidth = () => width;
+      const container = flyingCarpet.firstChild.firstChild;
+      let width = 10;
 
-        impl.layoutCallback();
-        expect(container.style.width).to.equal(width + 'px');
+      impl.mutateElement = function (callback) {
+        callback();
+      };
+      flyingCarpet.getLayoutSize = () => ({width, height: 100});
 
-        width++;
-        impl.layoutCallback();
-        expect(container.style.width).to.equal(width + 'px');
-      });
+      impl.layoutCallback();
+      expect(container.style.width).to.equal(width + 'px');
+
+      width++;
+      impl.layoutCallback();
+      expect(container.style.width).to.equal(width + 'px');
     });
 
     it('should not render in the 75% of first viewport', () => {
@@ -201,9 +201,9 @@ describes.realWin(
       });
     });
 
-    it('should attempt to collapse when its children collapse', () => {
+    it('should attempt to collapse when its children collapse', async () => {
       let img;
-      return getAmpFlyingCarpet(() => {
+      const flyingCarpet = await getAmpFlyingCarpet(() => {
         // Usually, the children appear on a new line with indentation
         const pretext = doc.createTextNode('\n  ');
         img = doc.createElement('amp-img');
@@ -213,35 +213,36 @@ describes.realWin(
         // Usually, the closing node appears on a new line
         const posttext = doc.createTextNode('\n');
         return [pretext, img, posttext];
-      }).then((flyingCarpet) => {
-        const attemptCollapse = env.sandbox
-          .stub(flyingCarpet.implementation_, 'attemptCollapse')
-          .callsFake(() => {
-            return Promise.resolve();
-          });
-        expect(flyingCarpet.getBoundingClientRect().height).to.be.gt(0);
-        img.collapse();
-        expect(attemptCollapse).to.have.been.called;
       });
+      const impl = await flyingCarpet.getImpl();
+
+      const attemptCollapse = env.sandbox
+        .stub(impl, 'attemptCollapse')
+        .callsFake(() => {
+          return Promise.resolve();
+        });
+      expect(flyingCarpet.getBoundingClientRect().height).to.be.gt(0);
+      img.collapse();
+      expect(attemptCollapse).to.have.been.called;
     });
 
-    it('should relayout the content', () => {
-      return getAmpFlyingCarpet().then((flyingCarpet) => {
-        const impl = flyingCarpet.implementation_;
-        const scheduleLayoutSpy_ = env.sandbox.spy(
-          Services.ownersForDoc(impl.element),
-          'scheduleLayout'
-        );
+    it('should relayout the content', async () => {
+      const flyingCarpet = await getAmpFlyingCarpet();
+      const impl = await flyingCarpet.getImpl();
 
-        impl.mutateElement = function (callback) {
-          callback();
-        };
-        impl.layoutCallback();
-        expect(scheduleLayoutSpy_).to.have.been.calledWith(
-          impl.element,
-          impl.children_
-        );
-      });
+      const scheduleLayoutSpy_ = env.sandbox.spy(
+        Services.ownersForDoc(impl.element),
+        'scheduleLayout'
+      );
+
+      impl.mutateElement = function (callback) {
+        callback();
+      };
+      impl.layoutCallback();
+      expect(scheduleLayoutSpy_).to.have.been.calledWith(
+        impl.element,
+        impl.children_
+      );
     });
   }
 );
diff --git a/extensions/amp-fx-flying-carpet/OWNERS b/extensions/amp-fx-flying-carpet/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-fx-flying-carpet/OWNERS
+++ b/extensions/amp-fx-flying-carpet/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-fx-flying-carpet/amp-fx-flying-carpet.md b/extensions/amp-fx-flying-carpet/amp-fx-flying-carpet.md
index f6286cc69bd82..3492b4fd73435 100644
--- a/extensions/amp-fx-flying-carpet/amp-fx-flying-carpet.md
+++ b/extensions/amp-fx-flying-carpet/amp-fx-flying-carpet.md
@@ -24,15 +24,18 @@ limitations under the License.
 
 # amp-fx-flying-carpet
 
-[tip type="note"]
-Check if your ad network permits use of flying carpets when implementing the `amp-fx-flying-carpet` to display adds.
-[/tip]
+## Usage
 
-## Behavior
+`amp-fx-flying-carpet` displays its children inside a container of fixed height.
+As the user scrolls the page, the flying carpet reveals more of it contents,
+sliding across its children as if peering through a window in the page.
+
+[tip type="note"]
 
-`amp-fx-flying-carpet` displays its children inside a container of fixed height. As the user scrolls the page, the flying carpet reveals more of it contents, sliding across its children as if peering through a window in the page.
+Check if your ad network permits use of flying carpets when implementing the
+`amp-fx-flying-carpet` to display ads.
 
-Example:
+[/tip]
 
 ```html
 <amp-fx-flying-carpet height="300px">
@@ -47,27 +50,29 @@ Example:
 
 The following requirements are imposed on `amp-fx-flying-carpet` positioning:
 
-- It should be positioned so that it doesn't obscure the first viewport (outside of top 75%).
-- It should be positioned so that its top can reach or be above the top of the last viewport when scrolled.
+-   It should be positioned so that it doesn't obscure the first viewport
+    (outside of top 75%).
+-   It should be positioned so that its top can reach or be above the top of the
+    last viewport when scrolled.
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>height</strong></td>
-    <td>The height of the flying carpet's "window".</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+### `height`
+
+The height of the flying carpet's "window".
+
+### Common attributes
+
+`amp-fx-flying-carpet` includes the
+[common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
 ## Styling
 
-- You may use the `amp-fx-flying-carpet` element selector to style it freely.
-- `amp-fx-flying-carpet` elements are always `position: relative`.
+You may use the `amp-fx-flying-carpet` element selector to style it freely.
+`amp-fx-flying-carpet` elements are always `position: relative`.
 
 ## Validation
 
-See [amp-fx-flying-carpet rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-fx-flying-carpet/validator-amp-fx-flying-carpet.protoascii) in the AMP validator specification.
+See [`amp-fx-flying-carpet` rules](validator-amp-fx-flying-carpet.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-geo/0.1/amp-geo.js b/extensions/amp-geo/0.1/amp-geo.js
index bed50a3638b5c..572f3683b5ae1 100644
--- a/extensions/amp-geo/0.1/amp-geo.js
+++ b/extensions/amp-geo/0.1/amp-geo.js
@@ -28,14 +28,14 @@
  *      "iceland": [ "is" ]
  *    }
  *  }
- *  </scirpt>
+ *  </script>
  * </amp-geo>
  * </code>
  *
  * the amp-geo element's layout type is nodisplay.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Services} from '../../../src/services';
 
 /**
@@ -50,10 +50,11 @@ import {US_CA_CODE, ampGeoPresets} from './amp-geo-presets';
 import {GEO_IN_GROUP} from './amp-geo-in-group';
 import {dev, user, userAssert} from '../../../src/log';
 import {getMode} from '../../../src/mode';
-import {isArray, isObject} from '../../../src/types';
+import {isArray, isObject} from '../../../src/core/types';
 import {isCanary} from '../../../src/experiments';
 import {isJsonScriptTag} from '../../../src/dom';
-import {tryParseJson} from '../../../src/json';
+
+import {tryParseJson} from '../../../src/core/types/object/json';
 import {urls} from '../../../src/config';
 
 /** @const */
@@ -98,6 +99,11 @@ const mode = {
 export let GeoDef;
 
 export class AmpGeo extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -116,11 +122,6 @@ export class AmpGeo extends AMP.BaseElement {
     this.definedGroups_ = [];
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   buildCallback() {
     // All geo config within the amp-geo component.
@@ -374,9 +375,9 @@ export class AmpGeo extends AMP.BaseElement {
    */
   matchCountryGroups_(config) {
     // ISOCountryGroups are optional but if specified at least one must exist
-    const ISOCountryGroups = /** @type {!Object<string, !Array<string>>} */ (config[
-      'ISOCountryGroups'
-    ]);
+    const ISOCountryGroups = /** @type {!Object<string, !Array<string>>} */ (
+      config['ISOCountryGroups']
+    );
     const errorPrefix = '<amp-geo> ISOCountryGroups'; // code size
     if (ISOCountryGroups) {
       // TODO(zhouyx@): Change the name with generic ISO subdivision support
diff --git a/extensions/amp-geo/0.1/test/test-amp-geo.js b/extensions/amp-geo/0.1/test/test-amp-geo.js
index b06d12776e6bd..2b4950390693f 100644
--- a/extensions/amp-geo/0.1/test/test-amp-geo.js
+++ b/extensions/amp-geo/0.1/test/test-amp-geo.js
@@ -30,7 +30,7 @@ describes.realWin(
   },
   (env) => {
     const expectedState =
-      '<amp-state id="ampGeo"><script type="application/json">{"ISOCountry":"unknown","nafta":true,"unknown":true,"ISOCountryGroups":["nafta","unknown"]}</script></amp-state>'; // eslint-disable-line
+      '<amp-state id="ampGeo"><script type="application/json">{"ISOCountry":"unknown","nafta":true,"unknown":true,"ISOCountryGroups":["nafta","unknown"]}</script></amp-state>';
 
     const config = {
       ISOCountryGroups: {
diff --git a/extensions/amp-geo/0.1/test/validator-amp-geo.cpponly b/extensions/amp-geo/0.1/test/validator-amp-geo.cpponly
new file mode 100644
index 0000000000000..2b1a615306bfb
--- /dev/null
+++ b/extensions/amp-geo/0.1/test/validator-amp-geo.cpponly
@@ -0,0 +1,53 @@
+PASS
+|  <!--
+|    Copyright 2018 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-geo tag. See the inline comments.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-latest.js"></script>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|    <!-- Valid: Country level geo detection. -->
+|    <amp-geo
+|      layout="nodisplay">
+|      <script type="application/json">
+|      {
+|        "ISOCountryGroups": {
+|          "soccer": [ "au", "ca", "ie", "nz", "us", "za" ],
+|          "football": [ "unknown" ]
+|        }
+|      }
+|      </script>
+|      <!-- Invalid: AMP Runtime can't parse json with comments. -->
+|      <script type="application/json">
+>>     ^~~~~~~~~
+amp-geo/0.1/test/validator-amp-geo.html:43:4 The script tag contains invalid JSON that cannot be parsed.
+|      {
+|        // Comment, should break parsing and result in a warning.
+|      }
+|      </script>
+|    </amp-geo>
+|  </body>
+|  </html>
diff --git a/extensions/amp-geo/0.1/test/validator-amp-geo.out.cpponly b/extensions/amp-geo/0.1/test/validator-amp-geo.out.cpponly
new file mode 100644
index 0000000000000..cc9ddd705ebe6
--- /dev/null
+++ b/extensions/amp-geo/0.1/test/validator-amp-geo.out.cpponly
@@ -0,0 +1,53 @@
+PASS
+|  <!--
+|    Copyright 2018 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-geo tag. See the inline comments.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-latest.js"></script>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|    <!-- Valid: Country level geo detection. -->
+|    <amp-geo
+|      layout="nodisplay">
+|      <script type="application/json">
+|      {
+|        "ISOCountryGroups": {
+|          "soccer": [ "au", "ca", "ie", "nz", "us", "za" ],
+|          "football": [ "unknown" ]
+|        }
+|      }
+|      </script>
+|      <!-- Invalid: AMP Runtime can't parse json with comments. -->
+|      <script type="application/json">
+|      {
+|        // Comment, should break parsing and result in a warning.
+>>       ^~~~~~~~~
+amp-geo/0.1/test/validator-amp-geo.html:45:6 The script tag contains invalid JSON that cannot be parsed.
+|      }
+|      </script>
+|    </amp-geo>
+|  </body>
+|  </html>
diff --git a/extensions/amp-geo/OWNERS b/extensions/amp-geo/OWNERS
index f3fc2a2f602ff..699fa98eaf1c0 100644
--- a/extensions/amp-geo/OWNERS
+++ b/extensions/amp-geo/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-geo/amp-geo.md b/extensions/amp-geo/amp-geo.md
index 0173d33928048..09ea72f436dd0 100644
--- a/extensions/amp-geo/amp-geo.md
+++ b/extensions/amp-geo/amp-geo.md
@@ -27,17 +27,42 @@ limitations under the License.
 
 ## Usage
 
-The `amp-geo` component provides country-level geolocation. The `amp-geo` component also provides a simple mechanism to group countries, making it easier to apply attributes to several countries at once.
+The `amp-geo` component provides country-level geolocation. The `amp-geo`
+component also provides a simple mechanism to group countries, making it easier
+to apply attributes to several countries at once.
+
+The `amp-geo` component uses the country from which the request originated in
+the form of an
+[ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 'ISO 3166-1 alpha-2 ')
+country code. The `amp-geo` component determines this code from the client's IP
+address. The ISO country code may not be the same as the top-level domain. For
+example, the code for the United Kingdom is `gb` not `uk`.
+
+It's possible that an IP address with country information in the WHOIS database
+will not have country information in `amp-geo`. If the country cannot be
+determined, the value is set to `unknown`. If the grouping feature is used at
+least one group must contain `unknown`.
+
+The `amp-geo` component provides CSS,
+[`amp-bind`](../amp-bind/amp-bind.md) and variable
+substitution interfaces.
 
-##### Example: Changing background based on country location
+### Generated CSS classes
+
+If the `amp-iso-country-XX` class is applied to the `body` element, where `XX`
+is replaced by the ISO country code or with the value `unknown`, you can use CSS
+to modify the `body` element.
 
-In the following example, we add `<amp-geo>` to determine the user's location so that we can display the appropriate flag.
+In the following example, we add `<amp-geo>` to determine the user's location so
+that we can display the appropriate flag.
 
 ```html
 <amp-geo layout="nodisplay"></amp-geo>
 ```
 
-If the user is in Canada, the `amp-geo` component applies the `amp-iso-country-ca` CSS class to the `body` tag. We can then use CSS to apply the correct background image for Canada:
+If the user is in Canada, the `amp-geo` component applies the
+`amp-iso-country-ca` CSS class to the `body` tag. We can then use CSS to apply
+the correct background image for Canada:
 
 ```css
 /* defaults */
@@ -50,23 +75,6 @@ If the user is in Canada, the `amp-geo` component applies the `amp-iso-country-c
 }
 ```
 
-## Operation
-
-The `amp-geo` component uses the country from which the request originated in the form of an [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 'ISO 3166-1 alpha-2 ') country code. The `amp-geo` component determines this code from the client's IP address.
-
-If the country cannot be determined, the value is set to 'unknown'. If the grouping feature is used at least one group must contain 'unknown'.
-
-Notes:
-
-1. It's possible that an IP address with country information in the WHOIS database will not have country information in amp-geo.
-1. The ISO country code may not be the same as the top-level domain. For example, the code for the United Kingdom is "gb" not "uk".
-
-The `amp-geo` component provides CSS, `amp-bind` and variable substitution interfaces.
-
-### Generated CSS classes
-
-If the `amp-iso-country-XX` class is applied to the `body` element, where 'XX' is replaced by the ISO country code or with the value 'unknown'.
-
 ### Optional configuration for grouping locations
 
 Optionally, you can include a JSON configuration script in the `amp-geo` tag.
@@ -85,17 +93,22 @@ The `ISOCountryGroups` key allows selections by groups of country codes.
 </amp-geo>
 ```
 
-If country groups are specified, `amp-geo` iterates through the groups. For any group that contains the current country, a class named `amp-geo-group-` followed by the group name is added to `<body>`. Group names may only contain a-z, A-Z and 0-9, and may not start with a digit. If no country group is matched the class `amp-geo-no-group` is added to `body`.
+If country groups are specified, `amp-geo` iterates through the groups. For any
+group that contains the current country, a class named `amp-geo-group-` followed
+by the group name is added to `<body>`. Group names may only contain a-z, A-Z
+and 0-9, and may not start with a digit. If no country group is matched the
+class `amp-geo-no-group` is added to `body`.
 
-##### Example: Generated CSS classes
+#### Example: Generated CSS classes
 
 ```html
 <body class="amp-geo-group-football amp-iso-country-gb …"></body>
 ```
 
-##### Example: Using CSS classes and country groups to change "soccer" to "football"
+#### Example: Using CSS classes and country groups to change "soccer" to "football"
 
-In the following example, we determine if the user is in a "soccer" country and display a "football" message for those users.
+In the following example, we determine if the user is in a "soccer" country and
+display a "football" message for those users.
 
 ```html
 <amp-geo layout="nodisplay">
@@ -110,7 +123,8 @@ In the following example, we determine if the user is in a "soccer" country and
 </amp-geo>
 ```
 
-If the user is in one of the "soccer" countries, the `amp-geo-group-soccer` CSS class is applied to the `body` tag.
+If the user is in one of the "soccer" countries, the `amp-geo-group-soccer` CSS
+class is applied to the `body` tag.
 
 ```css
 /* defaults */
@@ -131,19 +145,29 @@ Then it's trivial to use CSS select the correct word (i.e., football).
 
 ### Preset Country Groups
 
-**GOOGLE AND AMP ARE PROVIDING THIS INFORMATION AS A COURTESY BUT
-DO NOT GUARANTEE THE ACCURACY OR COMPLETENESS OF ANY INFORMATION CONTAINED
-HEREIN. THIS INFORMATION IS PROVIDED "AS IS" AND WITHOUT ANY EXPRESS OR
-IMPLIED WARRANTIES, INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF
-MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.**
+In addition to user specified country groups `amp-geo` supports preset country
+lists. See [`amp-geo-presets.js`](0.1/amp-geo-presets.js)
+for the available preset lists.
+
+[tip type="warning"]
+
+GOOGLE AND AMP ARE PROVIDING THIS INFORMATION AS A COURTESY BUT DO NOT GUARANTEE
+THE ACCURACY OR COMPLETENESS OF ANY INFORMATION CONTAINED HEREIN. THIS
+INFORMATION IS PROVIDED "AS IS" AND WITHOUT ANY EXPRESS OR IMPLIED WARRANTIES,
+INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS FOR A PARTICULAR PURPOSE.
 
-In addition to user specifed country groups `amp-geo` supports preset country lists. See [`amp-geo-presets.js`](./0.1/amp-geo-presets.js) for the available preset lists.
+[/tip]
 
-##### U.S. California Detection
+#### U.S. California Detection
 
-The `amp-geo` component provides the [ISO 3166-2](https://en.wikipedia.org/wiki/ISO_3166-2) information when it determines a request is from California. The `preset-us-ca` value from the preset list supports this feature.
+The `amp-geo` component provides the
+[ISO 3166-2](https://en.wikipedia.org/wiki/ISO_3166-2) information when it
+determines a request is from California. The `preset-us-ca` value from the
+preset list supports this feature.
 
-Additional countries may be included with the preset list as in the `myList` example below.
+Additional countries may be included with the preset list as in the `myList`
+example below.
 
 ```html
 <amp-geo layout="nodisplay">
@@ -161,9 +185,18 @@ Additional countries may be included with the preset list as in the `myList` exa
 
 ### Render Blocking
 
-By default, the `amp-geo` component is not render blocking. That is, the page will load and elements will render even if `amp-geo` has not yet loaded and executed. If it's important that certain elements are never rendered in a specific geography, use the `amp-geo-pending` class to provide selective render blocking. This is implemented by the publisher by adding `amp-geo-pending` to the `<body>` element. When the `amp-geo` script loads, it removes the `amp-geo-pending` class at the same time as it adds the `amp-iso-country...` and `amp-geo-group-...` classes.
+By default, the `amp-geo` component is not render blocking. That is, the page
+will load and elements will render even if `amp-geo` has not yet loaded and
+executed. If it's important that certain elements are never rendered in a
+specific geography, use the `amp-geo-pending` class to provide selective render
+blocking. This is implemented by the publisher by adding `amp-geo-pending` to
+the `<body>` element. When the `amp-geo` script loads, it removes the
+`amp-geo-pending` class at the same time as it adds the `amp-iso-country...` and
+`amp-geo-group-...` classes.
 
-_Example_: To always suppress an element that has the `foo` class in the United States, set `<body class="amp-geo-pending">`, and in the CSS include the following:
+_Example_: To always suppress an element that has the `foo` class in the United
+States, set `<body class="amp-geo-pending">`, and in the CSS include the
+following:
 
 ```css
 .amp-geo-pending .foo,
@@ -172,15 +205,24 @@ _Example_: To always suppress an element that has the `foo` class in the United
 }
 ```
 
-This CSS hides the element that has the `foo` class until `amp-geo` has loaded and continues to hide it if the country is `us`.
+This CSS hides the element that has the `foo` class until `amp-geo` has loaded
+and continues to hide it if the country is `us`.
+
+[tip type="note"]
+
+Elements such as `amp-ad` and `amp-iframe` do not make external network requests
+when set to `display: none`.
 
-**Note**: Elements such as `amp-ad` and `amp-iframe` do not make external network requests when set to `display: none`.
+[/tip]
 
 [filter formats="websites"]
 
 ### Integration with amp-bind
 
-If the `AmpBind` key is present in the configuration, `amp-geo` inserts an `amp-state` tag containing the current country and group information. Using the football example above, set the `AmpBind` flag to true to enable `amp-bind` integration.
+If the `AmpBind` key is present in the configuration, `amp-geo` inserts an
+`amp-state` tag containing the current country and group information. Using the
+football example above, set the `AmpBind` flag to true to enable `amp-bind`
+integration.
 
 ```html
 <amp-geo layout="nodisplay">
@@ -216,34 +258,73 @@ If the user were in Canada, the inserted `amp-state` would be as follows:
 The country code is also available via AMP variable substitution:
 
 `AMP_GEO` or `${ampGeo}` returns the list of matched groups (comma delimited).
-`AMP_GEO(ISOCountry)` or `${ampGeo(ISOCountry)}` returns the country code (or "unknown").
+`AMP_GEO(ISOCountry)` or `${ampGeo(ISOCountry)}` returns the country code (or
+`unknown`).
 
 ### Caching
 
-The `amp-geo` JavaScript file is served with a 30-minute cache lifetime (`Cache-control: private, max-age=1800`) to prevent use of stale geolocation data and to ensure that the geolocation is accurate when a user moves location.
+The `amp-geo` JavaScript file is served with a 30-minute cache lifetime
+(`Cache-control: private, max-age=1800`) to prevent use of stale geolocation
+data and to ensure that the geolocation is accurate when a user moves location.
 
 ### Pre-rendering
 
-The `amp-geo` component supports pre-rendering. If the document is served from the publisher origin and it already contains a class matching `amp-iso-country-*` `amp-geo` respects that value. `amp-geo` will use the supplied country and configuration to supply data to cooperating AMP extensions (e.g., `amp-consent`). If a pre-rendered country code is detected, the document will not be modified by `amp-geo` to add classes for country group or `amp-state`.
-
-However, if the document is served via one of the [AMP caches](https://github.com/ampproject/amphtml/blob/master/build-system/global-configs/caches.json), `amp-geo` removes and replaces any supplied geolocation classes and, if the `AmpBind` configuration key is true, updates `<amp-state id="ampGeo">` accordingly. This allows publishers to use their own geolocation code when the document is served directly from their origin while retaining dynamic configuration when served from a cache.
-
-Caches that wish to pre-render `amp-geo` should [open an issue](https://github.com/ampproject/amphtml/issues/new) requesting to be removed from the pre-render override.
+The `amp-geo` component supports pre-rendering. If the document is served from
+the publisher origin and it already contains a class matching
+`amp-iso-country-*` `amp-geo` respects that value. `amp-geo` will use the
+supplied country and configuration to supply data to cooperating AMP extensions
+(e.g., `amp-consent`). If a pre-rendered country code is detected, the document
+will not be modified by `amp-geo` to add classes for country group or
+`amp-state`.
+
+However, if the document is served via one of the
+[AMP caches](../../build-system/global-configs/caches.json),
+`amp-geo` removes and replaces any supplied geolocation classes and, if the
+`amp-bind` configuration key is true, updates `<amp-state id="ampGeo">`
+accordingly. This allows publishers to use their own geolocation code when the
+document is served directly from their origin while retaining dynamic
+configuration when served from a cache.
+
+Caches that wish to pre-render `amp-geo` should
+[open an issue](https://github.com/ampproject/amphtml/issues/new/choose)
+requesting to be removed from the pre-render override.
 
 ### Self Hosting
 
-Publishers and caches that re-host AMP JavaScript files must implement server-side patching of the `amp-geo-0.1.js` file or pre-rendering (see above).
+Publishers and caches that re-host AMP JavaScript files must implement
+server-side patching of the `amp-geo-0.1.js` file or pre-rendering (see above).
 
-The file served from `cdn.ampproject.org` should not be used as a base for patching because it will have already been patched when downloaded. Instead the base `./dist/v0/amp-geo-0.1.js` file should be used.
+The file served from `cdn.ampproject.org` should not be used as a base for
+patching because it will have already been patched when downloaded. Instead the
+base `./dist/v0/amp-geo-0.1.js` file should be used.
 
-The string `{{AMP_ISO_COUNTRY_HOTPATCH}}` must be replaced at serving time with the lowercase 2 letter [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 'ISO 3166-1 alpha-2 ') country code corresponding to the requesting IP address. This value should be padded to match the original length to avoid breaking the `amp-geo-0.1.max.js.map` file. If the country cannot be determined "unknown" country can be indicated by either leaving the file un-patched or patching with a string of spaces of equal length.
+The string `{{AMP_ISO_COUNTRY_HOTPATCH}}` must be replaced at serving time with
+the lowercase 2 letter
+[ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 'ISO 3166-1 alpha-2 ')
+country code corresponding to the requesting IP address. This value should be
+padded to match the original length to avoid breaking the
+`amp-geo-0.1.max.js.map` file. If the country cannot be determined "unknown"
+country can be indicated by either leaving the file un-patched or patching with
+a string of spaces of equal length.
 
 ### Debugging
 
-Adding `#amp-geo=XX` to the document url forces the country to appear as the country `XX`. This allows you to test without having to VPN to a country. For security reasons, to prevent sharing of geo-spoofing urls, this feature is only available to users who have enabled the [Experimental Channel](https://amp.dev/documentation/guides-and-tutorials/learn/experimental) or who are testing locally (i.e., `amp-geo.js` is served in development mode via [`gulp serve`](https://github.com/ampproject/amphtml/blob/master/contributing/DEVELOPING.md)).
+Adding `#amp-geo=XX` to the document url forces the country to appear as the
+country `XX`. This allows you to test without having to VPN to a country. For
+security reasons, to prevent sharing of geo-spoofing urls, this feature is only
+available to users who have enabled the
+[Experimental Channel](https://amp.dev/documentation/guides-and-tutorials/learn/experimental)
+or who are testing locally (i.e., `amp-geo.js` is served in development mode via
+[`amp serve`](https://github.com/ampproject/amphtml/blob/main/docs/developing.md)).
+
+[tip type="note"]
+
+Debugging in DevChannel may not work in Safari due to
+[ITP](https://webkit.org/blog/8311/intelligent-tracking-prevention-2-0/).
 
-**Note:** Debugging in DevChannel may not work in Safari due to [ITP](https://webkit.org/blog/8311/intelligent-tracking-prevention-2-0/).
+[/tip]
 
 ## Validation
 
-See [amp-geo rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-geo/validator-amp-geo.protoascii) in the AMP validator specification.
+See [`amp-geo` rules](validator-amp-geo.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-geo/validator-amp-geo.protoascii b/extensions/amp-geo/validator-amp-geo.protoascii
index 24968fa0c0596..47dfac9321c47 100644
--- a/extensions/amp-geo/validator-amp-geo.protoascii
+++ b/extensions/amp-geo/validator-amp-geo.protoascii
@@ -57,5 +57,5 @@ tags: {  # amp-geo (json)
       error_message: "html comments"
     }
   }
-  spec_url: "https://amp.dev/documentation/components/amp-geo"
+  spec_url: "https://amp.dev/documentation/components/amp-geo/"
 }
diff --git a/extensions/amp-gfycat/0.1/amp-gfycat.js b/extensions/amp-gfycat/0.1/amp-gfycat.js
index 81a0cdd6b276e..33d55715deed4 100644
--- a/extensions/amp-gfycat/0.1/amp-gfycat.js
+++ b/extensions/amp-gfycat/0.1/amp-gfycat.js
@@ -18,8 +18,12 @@ import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
 import {addParamsToUrl} from '../../../src/url';
 import {dev, userAssert} from '../../../src/log';
+import {
+  dispatchCustomEvent,
+  getDataParamsFromAttributes,
+  removeElement,
+} from '../../../src/dom';
 import {getData, listen} from '../../../src/event-helper';
-import {getDataParamsFromAttributes, removeElement} from '../../../src/dom';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
 import {isLayoutSizeDefined} from '../../../src/layout';
 
@@ -83,14 +87,11 @@ class AmpGfycat extends AMP.BaseElement {
 
   /** @override */
   createPlaceholderCallback() {
-    const placeholder = this.win.document.createElement('amp-img');
+    const placeholder = this.win.document.createElement('img');
     const videoid = dev().assertString(this.videoid_);
+    this.applyFillContent(placeholder);
     this.propagateAttributes(['alt', 'aria-label'], placeholder);
-    placeholder.setAttribute(
-      'src',
-      'https://thumbs.gfycat.com/' + encodeURIComponent(videoid) + '-poster.jpg'
-    );
-    placeholder.setAttribute('layout', 'fill');
+    placeholder.setAttribute('loading', 'lazy');
     placeholder.setAttribute('placeholder', '');
     placeholder.setAttribute('referrerpolicy', 'origin');
     if (this.element.hasAttribute('aria-label')) {
@@ -106,7 +107,10 @@ class AmpGfycat extends AMP.BaseElement {
     } else {
       placeholder.setAttribute('alt', 'Loading gif');
     }
-    this.applyFillContent(placeholder);
+    placeholder.setAttribute(
+      'src',
+      'https://thumbs.gfycat.com/' + encodeURIComponent(videoid) + '-poster.jpg'
+    );
 
     return placeholder;
   }
@@ -160,7 +164,7 @@ class AmpGfycat extends AMP.BaseElement {
 
     this.element.appendChild(iframe);
     return this.loadPromise(this.iframe_).then(() => {
-      this.element.dispatchCustomEvent(VideoEvents.LOAD);
+      dispatchCustomEvent(this.element, VideoEvents.LOAD);
     });
   }
 
@@ -205,14 +209,16 @@ class AmpGfycat extends AMP.BaseElement {
     }
 
     if (eventData == 'paused') {
-      this.element.dispatchCustomEvent(VideoEvents.PAUSE);
+      dispatchCustomEvent(this.element, VideoEvents.PAUSE);
     } else if (eventData == 'playing') {
-      this.element.dispatchCustomEvent(VideoEvents.PLAYING);
+      dispatchCustomEvent(this.element, VideoEvents.PLAYING);
     }
   }
 
   /** @override */
   pauseCallback() {
+    // gfycat automatically paused in the zero-size case and additional
+    // intervention is not needed. Additionally, gfycat are always muted.
     this.pause();
   }
 
diff --git a/extensions/amp-gfycat/0.1/test/test-amp-gfycat.js b/extensions/amp-gfycat/0.1/test/test-amp-gfycat.js
index dc78369e7f7b1..5472617af6072 100644
--- a/extensions/amp-gfycat/0.1/test/test-amp-gfycat.js
+++ b/extensions/amp-gfycat/0.1/test/test-amp-gfycat.js
@@ -52,7 +52,7 @@ describes.realWin(
       }
       doc.body.appendChild(gfycat);
       return gfycat
-        .build()
+        .buildInternal()
         .then(() => {
           return gfycat.layoutCallback();
         })
@@ -95,21 +95,22 @@ describes.realWin(
       return getGfycat('LeanMediocreBeardeddragon').then((gfycat) => {
         const iframe = gfycat.querySelector('iframe');
         return Promise.resolve()
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(gfycat, VideoEvents.PLAYING);
-            sendFakeMessage(gfycat, iframe, 'playing');
+            await sendFakeMessage(gfycat, iframe, 'playing');
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(gfycat, VideoEvents.PAUSE);
-            sendFakeMessage(gfycat, iframe, 'paused');
+            await sendFakeMessage(gfycat, iframe, 'paused');
             return p;
           });
       });
     });
 
-    function sendFakeMessage(gfycat, iframe, command) {
-      gfycat.implementation_.handleGfycatMessages_({
+    async function sendFakeMessage(gfycat, iframe, command) {
+      const impl = await gfycat.getImpl(false);
+      impl.handleGfycatMessages_({
         origin: 'https://gfycat.com',
         source: iframe.contentWindow,
         data: command,
@@ -128,8 +129,11 @@ describes.realWin(
       return getGfycat('LeanMediocreBeardeddragon', {
         withAlt: true,
       }).then((gfycat) => {
-        const placeHolder = gfycat.querySelector('amp-img');
+        const placeHolder = gfycat.querySelector('img');
         expect(placeHolder).to.not.be.null;
+        expect(placeHolder).to.have.attribute('placeholder');
+        expect(placeHolder).to.have.class('i-amphtml-fill-content');
+        expect(placeHolder.getAttribute('loading')).to.equal('lazy');
         expect(placeHolder.getAttribute('alt')).to.equal(
           'Loading gif test alt label'
         );
@@ -139,7 +143,7 @@ describes.realWin(
       return getGfycat('LeanMediocreBeardeddragon', {
         withAria: true,
       }).then((gfycat) => {
-        const placeHolder = gfycat.querySelector('amp-img');
+        const placeHolder = gfycat.querySelector('img');
         expect(placeHolder).to.not.be.null;
         expect(placeHolder.getAttribute('alt')).to.equal(
           'Loading gif test aria label'
diff --git a/extensions/amp-gfycat/0.1/test/validator-amp-gfycat.html b/extensions/amp-gfycat/0.1/test/validator-amp-gfycat.html
index 2597f55e1f3fe..bf9d0a8b4d1b1 100644
--- a/extensions/amp-gfycat/0.1/test/validator-amp-gfycat.html
+++ b/extensions/amp-gfycat/0.1/test/validator-amp-gfycat.html
@@ -20,7 +20,6 @@
     <title>Gfycat examples</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <script async custom-element="amp-gfycat" data-amp-report-test="amp-gfycat" src="https://cdn.ampproject.org/v0/amp-gfycat-0.1.js"></script>
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/extensions/amp-gfycat/0.1/test/validator-amp-gfycat.out b/extensions/amp-gfycat/0.1/test/validator-amp-gfycat.out
index 4a6cd18e2fd0b..2d2eccab0ef9b 100644
--- a/extensions/amp-gfycat/0.1/test/validator-amp-gfycat.out
+++ b/extensions/amp-gfycat/0.1/test/validator-amp-gfycat.out
@@ -21,7 +21,6 @@ PASS
 |      <title>Gfycat examples</title>
 |      <link rel="canonical" href="amps.html">
 |      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|      <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |      <script async custom-element="amp-gfycat" data-amp-report-test="amp-gfycat" src="https://cdn.ampproject.org/v0/amp-gfycat-0.1.js"></script>
 |      <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>
 |      <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -58,4 +57,4 @@ PASS
 |              noautoplay>
 |      </amp-gfycat>
 |  </body>
-|  </html>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-gfycat/OWNERS b/extensions/amp-gfycat/OWNERS
index 338ab8cc9bb41..c509cfb1247fb 100644
--- a/extensions/amp-gfycat/OWNERS
+++ b/extensions/amp-gfycat/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'koshka'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'koshka'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-gfycat/amp-gfycat.md b/extensions/amp-gfycat/amp-gfycat.md
index 48a00c6d31aca..2d7fc9af25c9a 100644
--- a/extensions/amp-gfycat/amp-gfycat.md
+++ b/extensions/amp-gfycat/amp-gfycat.md
@@ -38,25 +38,27 @@ The `width` and `height` attributes determine the aspect ratio of the Gfycat emb
 </amp-gfycat>
 ```
 
-## Attributes
+# Attributes
 
-##### data-gfyid
+### `data-gfyid`
 
-The Gfycat ID found in any Gfycat url. For example, `TautWhoppingCougar` is the id in the following url: https://gfycat.com/TautWhoppingCougar.
+The Gfycat ID found in any Gfycat url. For example, `TautWhoppingCougar` is the
+id in the following url: `https://gfycat.com/TautWhoppingCougar`.
 
-##### width and height
+### `width` and `height`
 
-The width and height attributes are special for the Gfycat embed. These should be the actual width and height of the Gfycat. The system automatically adds space for the "chrome" that Gfycat adds around the GIF.
+The `width` and `height` attributes are special for the Gfycat embed. These
+should be the actual width and height of the Gfycat. The system automatically
+adds space for the "chrome" that Gfycat adds around the GIF.
 
 Gfycat allows many aspect ratios.
 
 To specify the width and height in the code, copy it from the embed URL:
 
-1. Go to [https://gfycat.com/](https://gfycat.com/)`name`, where name is the Gfycat ID.
-2. Click the embed link icon (`</>`).
-3. Copy the width and height specified in the "Fixed iFRAME" field.
-
-Example: Finding the actual width and height
+1.  Go to [https://gfycat.com/](https://gfycat.com/)`name`, where `name` is the
+    Gfycat ID.
+2.  Click the embed link icon (`</>`).
+3.  Copy the width and height specified in the "Fixed iFRAME" field.
 
 ```html
 <iframe
@@ -70,27 +72,29 @@ Example: Finding the actual width and height
 </iframe>
 ```
 
-##### noautoplay
+### `noautoplay`
 
 By default, a video autoplays.
 
-- when the video is scrolled out of view, the video is paused
-- when the video is scrolled into view, the video resumes playback
-- if the user has interacted with the video (e.g., pauses/resumes), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.
+-   when the video is scrolled out of view, the video is paused
+-   when the video is scrolled into view, the video resumes playback
+-   if the user has interacted with the video (e.g., pauses/resumes), and the
+    video is scrolled in or out of view, the state of the video remains as how
+    the user left it. For example, if the user pauses the video, then scrolls
+    the video out of view and returns to the video, the video is still paused.
 
 You can turn off autoplay by setting the `noautoplay` attribute.
 
-Example: Turning off autoplay
-
 ```html
 <amp-gfycat data-gfyid="TautWhoppingCougar" width="640" height="360" noautoplay>
 </amp-gfycat>
 ```
 
-##### common attributes
+### Common attributes
 
-This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
 ## Validation
 
-See [amp-gfycat rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-gfycat/validator-amp-gfycat.protoascii) in the AMP validator specification.
+See [amp-gfycat rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-gfycat/validator-amp-gfycat.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-gfycat/validator-amp-gfycat.protoascii b/extensions/amp-gfycat/validator-amp-gfycat.protoascii
index 4e5fa19b208a6..38c657d4cd5fe 100644
--- a/extensions/amp-gfycat/validator-amp-gfycat.protoascii
+++ b/extensions/amp-gfycat/validator-amp-gfycat.protoascii
@@ -39,7 +39,7 @@ tags: {  # <amp-gfycat>
     value: ""
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-gfycat"
+  spec_url: "https://amp.dev/documentation/components/amp-gfycat/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-gist/0.1/amp-gist.js b/extensions/amp-gist/0.1/amp-gist.js
index 65c7e5d45de10..88f0b6e9dda0f 100644
--- a/extensions/amp-gist/0.1/amp-gist.js
+++ b/extensions/amp-gist/0.1/amp-gist.js
@@ -63,6 +63,7 @@ export class AmpGist extends AMP.BaseElement {
   layoutCallback() {
     /* the third parameter 'github' ties it to the 3p/github.js */
     const iframe = getIframe(this.win, this.element, 'github');
+    iframe.title = this.element.title || 'Github gist';
     this.applyFillContent(iframe);
     // Triggered by window.context.requestResize() inside the iframe.
     listenFor(
diff --git a/extensions/amp-gist/0.1/test/test-amp-gist.js b/extensions/amp-gist/0.1/test/test-amp-gist.js
index a137387fff069..12a97399608dc 100644
--- a/extensions/amp-gist/0.1/test/test-amp-gist.js
+++ b/extensions/amp-gist/0.1/test/test-amp-gist.js
@@ -40,7 +40,7 @@ describes.realWin(
       }
       doc.body.appendChild(ins);
       return ins
-        .build()
+        .buildInternal()
         .then(() => ins.layoutCallback())
         .then(() => ins);
     }
diff --git a/extensions/amp-gist/0.1/test/validator-amp-gist.out b/extensions/amp-gist/0.1/test/validator-amp-gist.out
index 8666290cd3783..47128021ad43d 100644
--- a/extensions/amp-gist/0.1/test/validator-amp-gist.out
+++ b/extensions/amp-gist/0.1/test/validator-amp-gist.out
@@ -47,7 +47,7 @@ FAIL
 |    <!-- Invalid: missing data-gistid attribute. -->
 |    <amp-gist
 >>   ^~~~~~~~~
-amp-gist/0.1/test/validator-amp-gist.html:47:2 The mandatory attribute 'data-gistid' is missing in tag 'amp-gist'. (see https://amp.dev/documentation/components/amp-gist)
+amp-gist/0.1/test/validator-amp-gist.html:47:2 The mandatory attribute 'data-gistid' is missing in tag 'amp-gist'. (see https://amp.dev/documentation/components/amp-gist/)
 |      layout="fixed-height"
 |      height="241">
 |    </amp-gist>
@@ -55,7 +55,7 @@ amp-gist/0.1/test/validator-amp-gist.html:47:2 The mandatory attribute 'data-gis
 |    <!-- Invalid: illegal layout. -->
 |    <amp-gist
 >>   ^~~~~~~~~
-amp-gist/0.1/test/validator-amp-gist.html:53:2 The specified layout 'RESPONSIVE' is not supported by tag 'amp-gist'. (see https://amp.dev/documentation/components/amp-gist)
+amp-gist/0.1/test/validator-amp-gist.html:53:2 The specified layout 'RESPONSIVE' is not supported by tag 'amp-gist'. (see https://amp.dev/documentation/components/amp-gist/)
 |      layout="responsive"
 |      height="241"
 |      data-gistid="b9bb35bc68df68259af94430f012425f">
diff --git a/extensions/amp-gist/OWNERS b/extensions/amp-gist/OWNERS
index c0f8cfb062cd2..5c0db01b210cc 100644
--- a/extensions/amp-gist/OWNERS
+++ b/extensions/amp-gist/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'levidurfee'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'levidurfee'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-gist/amp-gist.md b/extensions/amp-gist/amp-gist.md
index 4c275065c3a43..26a70c4995dc3 100644
--- a/extensions/amp-gist/amp-gist.md
+++ b/extensions/amp-gist/amp-gist.md
@@ -25,7 +25,11 @@ limitations under the License.
 
 # amp-gist
 
-#### Example: Embedding multiple files
+## Usage
+
+Creates an iframe and displays a [GitHub Gist](https://docs.github.com/en/github/writing-on-github/creating-gists).
+
+The following example shows how to embed multiple files:
 
 ```html
 <amp-gist
@@ -36,7 +40,7 @@ limitations under the License.
 </amp-gist>
 ```
 
-#### Example: Embedding a single file
+The following example shows how to embed a single file:
 
 ```html
 <amp-gist
@@ -50,27 +54,34 @@ limitations under the License.
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-gistid (required)</strong></td>
-    <td>The ID of the gist to embed.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>layout (required)</strong></td>
-    <td>Currently only supports <code>fixed-height</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>height (required)</strong></td>
-    <td>The initial height of the gist or gist file in pixels.
-<br><br>
-<strong>Note</strong>: You should obtain the height of the gist by inspecting it with your browser (e.g., Chrome Developer Tools). Once the Gist loads the contained iframe will resize to fit so that its contents will fit.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-file (optional)</strong></td>
-    <td>If specified, display only one file in a gist.</td>
-  </tr>
-</table>
+### `data-gistid`
+
+The ID of the gist to embed.
+
+### `layout`
+
+Currently only supports `fixed-height`.
+
+### `height`
+
+The initial height of the gist or gist file in pixels.
+
+[tip type="note"]
+
+You should obtain the height of the gist by inspecting it with your browser
+(e.g., Chrome Developer Tools). Once the Gist loads the contained iframe will
+resize to fit so that its contents will fit.
+
+[/tip]
+
+### `data-file` (optional)
+
+If specified, display only one file in a gist.
+
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Github gist"`.
 
 ## Validation
 
-See [amp-gist rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-gist/validator-amp-gist.protoascii) in the AMP validator specification.
+See [amp-gist rules](validator-amp-gist.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-gist/validator-amp-gist.protoascii b/extensions/amp-gist/validator-amp-gist.protoascii
index a004a39491f3d..a7987896c8cac 100644
--- a/extensions/amp-gist/validator-amp-gist.protoascii
+++ b/extensions/amp-gist/validator-amp-gist.protoascii
@@ -33,7 +33,7 @@ tags: {  # <amp-gist>
     mandatory: true
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-gist"
+  spec_url: "https://amp.dev/documentation/components/amp-gist/"
   amp_layout: {
     supported_layouts: FIXED_HEIGHT
   }
diff --git a/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-assistjs.css b/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-assistjs.css
new file mode 100644
index 0000000000000..f5ebda576ec9e
--- /dev/null
+++ b/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-assistjs.css
@@ -0,0 +1,20 @@
+/**
+ * Copyright 2021 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.
+ */
+
+ .amp-google-assistant-assistjs {
+  /* Placeholder for an empty CSS ruleset*/
+   display: block;
+ }
\ No newline at end of file
diff --git a/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-assistjs.js b/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-assistjs.js
new file mode 100644
index 0000000000000..2bfcfe2395b32
--- /dev/null
+++ b/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-assistjs.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview The extension that brings Assistant capabilities to AMP pages. It includes several custom elements and one
+ * shared Assistant Frame service.
+ */
+
+import {AmpGoogleAssistantInlineSuggestionBar} from './amp-google-assistant-inline-suggestion-bar';
+import {AmpGoogleAssistantVoiceBar} from './amp-google-assistant-voice-bar';
+import {AmpGoogleAssistantVoiceButton} from './amp-google-assistant-voice-button';
+import {AssistjsConfigService} from './assistjs-config-service';
+import {AssistjsFrameService} from './assistjs-frame-service';
+import {CSS} from '../../../build/amp-google-assistant-assistjs-0.1.css';
+import {Services} from '../../../src/services';
+
+export class AmpGoogleAssistantAssistjsConfig extends AMP.BaseElement {
+  /** @override */
+  buildCallback() {
+    const config = JSON.parse(this.element.textContent);
+    Services.assistjsConfigServiceForDoc(this.element).initializeConfigs(
+      config
+    );
+  }
+}
+
+AMP.extension('amp-google-assistant-assistjs', '0.1', (AMP) => {
+  AMP.registerServiceForDoc('assistjs-config-service', AssistjsConfigService);
+  AMP.registerServiceForDoc('assistjs-frame-service', AssistjsFrameService);
+  AMP.registerElement(
+    'amp-google-assistant-assistjs-config',
+    AmpGoogleAssistantAssistjsConfig,
+    CSS
+  );
+  AMP.registerElement(
+    'amp-google-assistant-voice-button',
+    AmpGoogleAssistantVoiceButton,
+    CSS
+  );
+  AMP.registerElement(
+    'amp-google-assistant-voice-bar',
+    AmpGoogleAssistantVoiceBar,
+    CSS
+  );
+  AMP.registerElement(
+    'amp-google-assistant-inline-suggestion-bar',
+    AmpGoogleAssistantInlineSuggestionBar,
+    CSS
+  );
+});
diff --git a/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-inline-suggestion-bar.js b/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-inline-suggestion-bar.js
new file mode 100644
index 0000000000000..1e29273edd13d
--- /dev/null
+++ b/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-inline-suggestion-bar.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview This custom element displays a horizontal bar that consists of a series of suggestion chips
+ * that enable 3P site users to interact with Google Assistant.
+ */
+
+import {Services} from '../../../src/services';
+import {addAttributesToElement} from '../../../src/dom';
+import {isLayoutSizeDefined} from '../../../src/layout';
+
+export class AmpGoogleAssistantInlineSuggestionBar extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {?AssistjsConfigService} */
+    this.configService_ = null;
+
+    /** @private {?AssistjsFrameService} */
+    this.frameService_ = null;
+  }
+
+  /** @override */
+  buildCallback() {
+    this.configService_ = Services.assistjsConfigServiceForDoc(this.element);
+    this.frameService_ = Services.assistjsFrameServiceForDoc(this.element);
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+
+  /** @override */
+  layoutCallback() {
+    // Set frame URL to an embed endpoint.
+    const iframe = this.win.document.createElement('iframe');
+    this.configService_
+      .getWidgetIframeUrl('inlinesuggestionbar')
+      .then((iframeUrl) => {
+        addAttributesToElement(iframe, {
+          src: iframeUrl,
+          sandbox: 'allow-scripts',
+        });
+
+        // applyFillContent so that frame covers the entire component.
+        this.applyFillContent(iframe, /* replacedContent */ true);
+
+        this.element.appendChild(iframe);
+      });
+
+    iframe.addEventListener('load', () => {
+      // TODO: create a channel to receive requests from underlying assist.js iframe.
+      this.frameService_.sendTextQuery();
+    });
+
+    // Return a load promise for the frame so the runtime knows when the
+    // component is ready.
+    return this.loadPromise(iframe);
+  }
+}
diff --git a/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-voice-bar.js b/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-voice-bar.js
new file mode 100644
index 0000000000000..453629a9b13d7
--- /dev/null
+++ b/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-voice-bar.js
@@ -0,0 +1,86 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview This custom element displays a horizontal bar that consists of a Google Assisant voice button and a series of
+ * suggestion chips that enable 3P site users to interact with Google Assistant.
+ */
+
+import * as closure from '../../../third_party/closure-responding-channel/closure-bundle';
+import {Services} from '../../../src/services';
+import {addAttributesToElement} from '../../../src/dom';
+import {isLayoutSizeDefined} from '../../../src/layout';
+
+export class AmpGoogleAssistantVoiceBar extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {?AssistjsConfigService} */
+    this.configService_ = null;
+
+    /** @private {?AssistjsFrameService} */
+    this.frameService_ = null;
+  }
+
+  /** @override */
+  buildCallback() {
+    this.configService_ = Services.assistjsConfigServiceForDoc(this.element);
+    this.frameService_ = Services.assistjsFrameServiceForDoc(this.element);
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+
+  /** @override */
+  layoutCallback() {
+    // Set frame URL to an embed endpoint.
+    const iframe = this.win.document.createElement('iframe');
+    this.configService_.getWidgetIframeUrl('voicebar').then((iframeUrl) => {
+      addAttributesToElement(iframe, {
+        src: iframeUrl,
+        sandbox: 'allow-scripts',
+      });
+
+      // applyFillContent so that frame covers the entire component.
+      this.applyFillContent(iframe, /* replacedContent */ true);
+
+      this.element.appendChild(iframe);
+    });
+
+    const serviceHandlersMap = new Map();
+    serviceHandlersMap.set('RuntimeService.TriggerSendTextQuery', () => {
+      this.frameService_.sendTextQuery();
+    });
+    serviceHandlersMap.set('RuntimeService.TriggerOpenMic', () => {
+      this.frameService_.openMic();
+    });
+
+    iframe.addEventListener('load', () => {
+      closure.createRespondingChannel(
+        iframe.contentWindow,
+        this.configService_.getAssistjsServer(),
+        serviceHandlersMap
+      );
+    });
+
+    // Return a load promise for the frame so the runtime knows when the
+    // component is ready.
+    return this.loadPromise(iframe);
+  }
+}
diff --git a/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-voice-button.js b/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-voice-button.js
new file mode 100644
index 0000000000000..e919858c94613
--- /dev/null
+++ b/extensions/amp-google-assistant-assistjs/0.1/amp-google-assistant-voice-button.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview This custom element displays a Google Assistant voice button that enable 3P site users to talk
+ * to Google Assistant.
+ */
+
+import {Services} from '../../../src/services';
+import {addAttributesToElement} from '../../../src/dom';
+import {isLayoutSizeDefined} from '../../../src/layout';
+
+export class AmpGoogleAssistantVoiceButton extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {?AssistjsConfigService} */
+    this.configService_ = null;
+
+    /** @private {?AssistjsFrameService} */
+    this.frameService_ = null;
+  }
+
+  /** @override */
+  buildCallback() {
+    this.configService_ = Services.assistjsConfigServiceForDoc(this.element);
+    this.frameService_ = Services.assistjsFrameServiceForDoc(this.element);
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+
+  /** @override */
+  layoutCallback() {
+    // Set frame URL to an embed endpoint.
+    const iframe = this.win.document.createElement('iframe');
+    this.configService_.getWidgetIframeUrl('voicebutton').then((iframeUrl) => {
+      addAttributesToElement(iframe, {
+        src: iframeUrl,
+        sandbox: 'allow-scripts',
+      });
+
+      // applyFillContent so that frame covers the entire component.
+      this.applyFillContent(iframe, /* replacedContent */ true);
+
+      this.element.appendChild(iframe);
+    });
+
+    iframe.addEventListener('load', () => {
+      // TODO: create a channel to receive requests from underlying assist.js iframe.
+      this.frameService_.openMic();
+    });
+
+    // Return a load promise for the frame so the runtime knows when the
+    // component is ready.
+    return this.loadPromise(iframe);
+  }
+}
diff --git a/extensions/amp-google-assistant-assistjs/0.1/assistjs-config-service.js b/extensions/amp-google-assistant-assistjs/0.1/assistjs-config-service.js
new file mode 100644
index 0000000000000..f057d853c5ab8
--- /dev/null
+++ b/extensions/amp-google-assistant-assistjs/0.1/assistjs-config-service.js
@@ -0,0 +1,91 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview The shared service takes assist.js related config from <amp-google-assistant-assistjs-config>
+ * and provides config parameters to other assist.js components.
+ */
+
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {hasOwn} from '../../../src/core/types/object';
+
+export class AssistjsConfigService {
+  /** */
+  constructor() {
+    /** @private {string} */
+    this.projectId_ = '';
+
+    /** @private {string} */
+    this.assistjsServer_ = 'https://actions.google.com';
+
+    /** @private {boolean} */
+    this.devMode_ = false;
+
+    /** @private {string} */
+    this.hostUrl_ = window.location.href;
+
+    /** @private {Deferred} */
+    this.initializedDeferred_ = new Deferred();
+
+    /** @private {boolean} */
+    this.isInitialized_ = false;
+  }
+
+  /**
+   * @param {Object} config
+   * @return {string}
+   * */
+  initializeConfigs(config) {
+    // If somehow there are multiple config elements, the first config element would be used and the rest would be ignored.
+    if (this.isInitialized_) {
+      return;
+    }
+
+    if (!hasOwn(config, 'projectId')) {
+      throw new Error('Project id is required to embed assist.js.');
+    }
+    this.projectId_ = config.projectId;
+
+    if (hasOwn(config, 'assistjsServer')) {
+      this.assistjsServer_ = config.assistjsServer;
+    }
+    if (hasOwn(config, 'devMode')) {
+      this.devMode_ = config.devMode;
+    }
+    if (hasOwn(config, 'hostUrl')) {
+      this.hostUrl_ = config.hostUrl;
+    }
+    this.isInitialized_ = true;
+    this.initializedDeferred_.resolve();
+  }
+
+  /**
+   * @param {string} widgetName
+   * @return {Promise<string>}
+   */
+  getWidgetIframeUrl(widgetName) {
+    return this.initializedDeferred_.promise.then(() => {
+      return `${this.assistjsServer_}/assist/${widgetName}?origin=${origin}&projectId=${this.projectId_}&dev=${this.devMode_}&hostUrl=${this.hostUrl_}`;
+    });
+  }
+
+  /**
+   * @return {string}
+   */
+  getAssistjsServer() {
+    return this.assistjsServer_;
+  }
+}
diff --git a/extensions/amp-google-assistant-assistjs/0.1/assistjs-frame-service.js b/extensions/amp-google-assistant-assistjs/0.1/assistjs-frame-service.js
new file mode 100644
index 0000000000000..b76a04e3378d5
--- /dev/null
+++ b/extensions/amp-google-assistant-assistjs/0.1/assistjs-frame-service.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview The shared service used by all custom elements to talk to Assistant services. It loads an iframe that exports
+ * endpoints to handle requests from custom elements.
+ */
+
+import {Services} from '../../../src/services';
+import {addAttributesToElement} from '../../../src/dom';
+import {toggle} from '../../../src/style';
+
+export class AssistjsFrameService {
+  /**
+   * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
+   */
+  constructor(ampdoc) {
+    /** @private @const {!../../../src/service/ampdoc-impl.AmpDoc} */
+    this.ampDoc_ = ampdoc;
+
+    /** @private {?AssistjsConfigService} */
+    this.configService_ = null;
+
+    /** Create Assistant iframe and append it to the main AMP document. */
+    this.createAssistantIframe_();
+  }
+
+  /** @private */
+  createAssistantIframe_() {
+    this.ampDoc_.whenFirstVisible().then(() => {
+      this.configService_ = Services.assistjsConfigServiceForDoc(this.ampDoc_);
+      const iframe = this.ampDoc_.win.document.createElement('iframe');
+      this.configService_.getWidgetIframeUrl('frame').then((iframeUrl) => {
+        addAttributesToElement(iframe, {
+          src: iframeUrl,
+          allow: 'microphone',
+          sandbox: 'allow-scripts',
+        });
+        toggle(iframe, false);
+        document.body.appendChild(iframe);
+      });
+    });
+  }
+
+  /**
+   * Activates Assistant microphone on 3P page.
+   */
+  openMic() {
+    // TODO: add implementation once the channels for iframes are implemented.
+  }
+
+  /**
+   * Sends text query to Assistant server.
+   */
+  sendTextQuery() {
+    // TODO: add implementation once the channels for iframes are implemented.
+  }
+}
diff --git a/extensions/amp-google-assistant-assistjs/0.1/test/test-amp-google-assistant-assistjs.js b/extensions/amp-google-assistant-assistjs/0.1/test/test-amp-google-assistant-assistjs.js
new file mode 100644
index 0000000000000..0c6f6ad925180
--- /dev/null
+++ b/extensions/amp-google-assistant-assistjs/0.1/test/test-amp-google-assistant-assistjs.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import '../amp-google-assistant-assistjs';
+import {Services} from '../../../../src/services';
+import {addAttributesToElement} from '../../../../src/dom';
+
+describes.realWin(
+  'amp-google-assistant-assistjs',
+  {
+    amp: {
+      extensions: ['amp-google-assistant-assistjs'],
+    },
+  },
+  (env) => {
+    let document;
+    let configElement;
+    let voiceButtonElement;
+
+    beforeEach(() => {
+      document = env.win.document;
+
+      const configServiceMock = env.sandbox.mock(
+        Services.assistjsConfigServiceForDoc(document)
+      );
+      configServiceMock
+        .expects('getWidgetIframeUrl')
+        .withExactArgs('voicebutton')
+        .once();
+
+      const frameServiceMock = env.sandbox.mock(
+        Services.assistjsFrameServiceForDoc(document)
+      );
+      frameServiceMock.expects('openMic').once();
+
+      configElement = document.createElement(
+        'amp-google-assistant-assistjs-config'
+      );
+      configElement.innerHTML =
+        '<script type="application/json">{"devMode": true, "projectId": "aog-assistjs-demos", "hostUrl": "https://toidemo2.web.app"}</script>';
+      addAttributesToElement(configElement, {layout: 'nodisplay'});
+      document.body.appendChild(configElement);
+
+      voiceButtonElement = document.createElement(
+        'amp-google-assistant-assistjs-voice-button'
+      );
+      voiceButtonElement.setAttribute('id', 'voice-button');
+      document.body.appendChild(voiceButtonElement);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(configElement);
+      document.body.removeChild(voiceButtonElement);
+    });
+
+    it('should have id "voice button" when built', () => {
+      expect(configElement.getAttribute('layout')).to.equal('nodisplay');
+      expect(voiceButtonElement.getAttribute('id')).to.equal('voice-button');
+    });
+  }
+);
diff --git a/extensions/amp-google-assistant-assistjs/0.1/test/validator-amp-google-assistant-assistjs.html b/extensions/amp-google-assistant-assistjs/0.1/test/validator-amp-google-assistant-assistjs.html
new file mode 100644
index 0000000000000..7afc07564b7d4
--- /dev/null
+++ b/extensions/amp-google-assistant-assistjs/0.1/test/validator-amp-google-assistant-assistjs.html
@@ -0,0 +1,45 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-google-assistant-assistjs extension and its several custom tags.
+-->
+
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-google-assistant-assistjs example</title>
+  <link rel="canonical" href="amps.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+    amp-google-assistant-assistjs {
+      color: red;
+    }
+  </style>
+  <script async custom-element="amp-google-assistant-assistjs" src="https://cdn.ampproject.org/v0/amp-google-assistant-assistjs-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-google-assistant-assistjs-config layout="nodisplay">
+    <script type="application/json">{"devMode": true, "projectId": "aog-assistjs-demos", "hostUrl": "https://toidemo2.web.app"}</script>
+  </amp-google-assistant-assistjs-config>
+  <amp-google-assistant-voice-button layout="responsive" width="150" height="40">
+  </amp-google-assistant-voice-button>
+  <amp-google-assistant-voice-bar layout="responsive" width="150" height="40">
+  </amp-google-assistant-voice-bar>
+  <amp-google-assistant-inline-suggestion-bar layout="responsive" width="150" height="40">
+  </amp-google-assistant-inline-suggestion-bar>
+</body>
+</html>
diff --git a/extensions/amp-google-assistant-assistjs/0.1/test/validator-amp-google-assistant-assistjs.out b/extensions/amp-google-assistant-assistjs/0.1/test/validator-amp-google-assistant-assistjs.out
new file mode 100644
index 0000000000000..c027a2e3cf4b1
--- /dev/null
+++ b/extensions/amp-google-assistant-assistjs/0.1/test/validator-amp-google-assistant-assistjs.out
@@ -0,0 +1,48 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-google-assistant-assistjs extension and its several custom tags.
+|  -->
+|
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <title>amp-google-assistant-assistjs example</title>
+|    <link rel="canonical" href="amps.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <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>
+|      amp-google-assistant-assistjs {
+|        color: red;
+|      }
+|    </style>
+|    <script async custom-element="amp-google-assistant-assistjs" src="https://cdn.ampproject.org/v0/amp-google-assistant-assistjs-0.1.js"></script>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|    <amp-google-assistant-assistjs-config layout="nodisplay">
+|      <script type="application/json">{"devMode": true, "projectId": "aog-assistjs-demos", "hostUrl": "https://toidemo2.web.app"}</script>
+>>     ^~~~~~~~~
+amp-google-assistant-assistjs/0.1/test/validator-amp-google-assistant-assistjs.html:36:4 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
+|    </amp-google-assistant-assistjs-config>
+|    <amp-google-assistant-voice-button layout="responsive" width="150" height="40">
+|    </amp-google-assistant-voice-button>
+|    <amp-google-assistant-voice-bar layout="responsive" width="150" height="40">
+|    </amp-google-assistant-voice-bar>
+|    <amp-google-assistant-inline-suggestion-bar layout="responsive" width="150" height="40">
+|    </amp-google-assistant-inline-suggestion-bar>
+|  </body>
+|  </html>
diff --git a/extensions/amp-google-assistant-assistjs/OWNERS b/extensions/amp-google-assistant-assistjs/OWNERS
new file mode 100644
index 0000000000000..b55530b2a4cbd
--- /dev/null
+++ b/extensions/amp-google-assistant-assistjs/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'ychsieh'}],
+    },
+  ],
+}
diff --git a/extensions/amp-google-assistant-assistjs/amp-google-assistant-assistjs.md b/extensions/amp-google-assistant-assistjs/amp-google-assistant-assistjs.md
new file mode 100644
index 0000000000000..63f31b829d2de
--- /dev/null
+++ b/extensions/amp-google-assistant-assistjs/amp-google-assistant-assistjs.md
@@ -0,0 +1,16 @@
+---
+$category@: dynamic-content
+formats:
+  - websites
+teaser:
+  text: TODO
+experimental: true
+---
+
+# `amp-google-assistant-assistjs`
+
+Assist.js is a javascript library third party developers can include on their website to bring Assistant capabilities to their users. This extension embeds most of the assist.js library to make it accessible to AMP pages.
+
+In the regular html world, the third-party site imports assist.js script, and embedded several assist.js widgets tags like `<google-assistant-link-group>`. The imported assist.js runtime will initialize and render those tags with Google-owned iframes, and also an invisible bottom sheet which shows as the assistant dialog plate when widgets are triggered. In AMP world, the assist.js library would be contained in this extension with its responsibilities unchanged, which is to coordinate communication between Google-owned iframes and bring up dialog plate for third-party site users to interact with.
+
+Here is the [live example](https://developers.google.com/assistant/engagement/assistant-links#rich_assistant_links) of one of the assist.js functionalities.
diff --git a/extensions/amp-google-assistant-assistjs/validator-amp-google-assistant-assistjs.protoascii b/extensions/amp-google-assistant-assistjs/validator-amp-google-assistant-assistjs.protoascii
new file mode 100644
index 0000000000000..e87a6f52a4419
--- /dev/null
+++ b/extensions/amp-google-assistant-assistjs/validator-amp-google-assistant-assistjs.protoascii
@@ -0,0 +1,61 @@
+#
+# Copyright 2021 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.
+#
+
+tags: {  # amp-google-assistant-assistjs
+  html_format: AMP
+  tag_name: "SCRIPT"
+  extension_spec: {
+    name: "amp-google-assistant-assistjs"
+    version: "0.1"
+    version: "latest"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # <amp-google-assistant-assistjs-config>
+  html_format: AMP
+  tag_name: "AMP-GOOGLE-ASSISTANT-ASSISTJS-CONFIG"
+  requires_extension: "amp-google-assistant-assistjs"
+  amp_layout: {
+    supported_layouts: NODISPLAY
+  }
+}
+tags: {  # <amp-google-assistant-voice-button>
+  html_format: AMP
+  tag_name: "AMP-GOOGLE-ASSISTANT-VOICE-BUTTON"
+  requires_extension: "amp-google-assistant-assistjs"
+  attr_lists: "extended-amp-global"
+  amp_layout: {
+    supported_layouts: RESPONSIVE
+  }
+}
+tags: {  # <amp-google-assistant-voice-bar>
+  html_format: AMP
+  tag_name: "AMP-GOOGLE-ASSISTANT-VOICE-BAR"
+  requires_extension: "amp-google-assistant-assistjs"
+  attr_lists: "extended-amp-global"
+  amp_layout: {
+    supported_layouts: RESPONSIVE
+  }
+}
+tags: {  # <amp-google-assistant-inline-suggestion-bar>
+  html_format: AMP
+  tag_name: "AMP-GOOGLE-ASSISTANT-INLINE-SUGGESTION-BAR"
+  requires_extension: "amp-google-assistant-assistjs"
+  attr_lists: "extended-amp-global"
+  amp_layout: {
+    supported_layouts: RESPONSIVE
+  }
+}
diff --git a/extensions/amp-google-document-embed/0.1/test/test-amp-google-document-embed.js b/extensions/amp-google-document-embed/0.1/test/test-amp-google-document-embed.js
index ae48f274c0b1b..41cb195143e31 100644
--- a/extensions/amp-google-document-embed/0.1/test/test-amp-google-document-embed.js
+++ b/extensions/amp-google-document-embed/0.1/test/test-amp-google-document-embed.js
@@ -44,7 +44,7 @@ describes.realWin(
       doc.body.appendChild(element);
 
       return element
-        .build()
+        .buildInternal()
         .then(() => element.layoutCallback())
         .then(() => element);
     }
@@ -69,13 +69,12 @@ describes.realWin(
       });
     });
 
-    it('removes iframe after unlayoutCallback', () => {
-      return getDriveViewer('https://example.com/doc.pdf').then((element) => {
-        const impl = element.implementation_;
-        impl.unlayoutCallback();
-        expect(element.querySelector('iframe')).to.be.null;
-        expect(impl.iframe_).to.be.null;
-      });
+    it('removes iframe after unlayoutCallback', async () => {
+      const element = await getDriveViewer('https://example.com/doc.pdf');
+      const impl = await element.getImpl();
+      impl.unlayoutCallback();
+      expect(element.querySelector('iframe')).to.be.null;
+      expect(impl.iframe_).to.be.null;
     });
   }
 );
diff --git a/extensions/amp-google-document-embed/0.1/test/validator-amp-google-document-embed.out b/extensions/amp-google-document-embed/0.1/test/validator-amp-google-document-embed.out
index caaa4d745f42f..bb480fc725c6c 100644
--- a/extensions/amp-google-document-embed/0.1/test/validator-amp-google-document-embed.out
+++ b/extensions/amp-google-document-embed/0.1/test/validator-amp-google-document-embed.out
@@ -47,27 +47,27 @@ FAIL
 |    <!-- Invalid: element without src -->
 |    <amp-google-document-embed width="800" height="600">
 >>   ^~~~~~~~~
-amp-google-document-embed/0.1/test/validator-amp-google-document-embed.html:47:2 The mandatory attribute 'src' is missing in tag 'amp-google-document-embed'. (see https://amp.dev/documentation/components/amp-google-document-embed)
+amp-google-document-embed/0.1/test/validator-amp-google-document-embed.html:47:2 The mandatory attribute 'src' is missing in tag 'amp-google-document-embed'. (see https://amp.dev/documentation/components/amp-google-document-embed/)
 |    </amp-google-document-embed>
 |    <!-- Invalid: element with empty src -->
 |    <amp-google-document-embed src="" width="800" height="600">
 >>   ^~~~~~~~~
-amp-google-document-embed/0.1/test/validator-amp-google-document-embed.html:50:2 Missing URL for attribute 'src' in tag 'amp-google-document-embed'. (see https://amp.dev/documentation/components/amp-google-document-embed)
+amp-google-document-embed/0.1/test/validator-amp-google-document-embed.html:50:2 Missing URL for attribute 'src' in tag 'amp-google-document-embed'. (see https://amp.dev/documentation/components/amp-google-document-embed/)
 |    </amp-google-document-embed>
 |    <!-- Invalid: element with empty src but bind [src] -->
 |    <amp-google-document-embed src="" [src]="'https://www.example.com/document.pdf'" width="800" height="600">
 >>   ^~~~~~~~~
-amp-google-document-embed/0.1/test/validator-amp-google-document-embed.html:53:2 Missing URL for attribute 'src' in tag 'amp-google-document-embed'. (see https://amp.dev/documentation/components/amp-google-document-embed)
+amp-google-document-embed/0.1/test/validator-amp-google-document-embed.html:53:2 Missing URL for attribute 'src' in tag 'amp-google-document-embed'. (see https://amp.dev/documentation/components/amp-google-document-embed/)
 |    </amp-google-document-embed>
 |    <!-- Invalid: element with http src -->
 |    <amp-google-document-embed src="http://www.example.com/document.pdf" width="800" height="600">
 >>   ^~~~~~~~~
-amp-google-document-embed/0.1/test/validator-amp-google-document-embed.html:56:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-google-document-embed'. (see https://amp.dev/documentation/components/amp-google-document-embed)
+amp-google-document-embed/0.1/test/validator-amp-google-document-embed.html:56:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-google-document-embed'. (see https://amp.dev/documentation/components/amp-google-document-embed/)
 |    </amp-google-document-embed>
 |    <!-- Invalid: element with relative src -->
 |    <amp-google-document-embed src="document.pdf" width="800" height="600">
 >>   ^~~~~~~~~
-amp-google-document-embed/0.1/test/validator-amp-google-document-embed.html:59:2 The relative URL 'document.pdf' for attribute 'src' in tag 'amp-google-document-embed' is disallowed. (see https://amp.dev/documentation/components/amp-google-document-embed)
+amp-google-document-embed/0.1/test/validator-amp-google-document-embed.html:59:2 The relative URL 'document.pdf' for attribute 'src' in tag 'amp-google-document-embed' is disallowed. (see https://amp.dev/documentation/components/amp-google-document-embed/)
 |    </amp-google-document-embed>
 |  </body>
 |  </html>
diff --git a/extensions/amp-google-document-embed/OWNERS b/extensions/amp-google-document-embed/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-google-document-embed/OWNERS
+++ b/extensions/amp-google-document-embed/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-google-document-embed/amp-google-document-embed.md b/extensions/amp-google-document-embed/amp-google-document-embed.md
index 33ee35a85c8cd..d5bcd0419695b 100644
--- a/extensions/amp-google-document-embed/amp-google-document-embed.md
+++ b/extensions/amp-google-document-embed/amp-google-document-embed.md
@@ -24,7 +24,7 @@ limitations under the License.
 
 # amp-google-document-embed
 
-## Behavior
+## Usage
 
 The `amp-google-document-embed` component displays document files like Word documents,
 Excel spreadsheets, and PDFs.
@@ -43,14 +43,14 @@ Example:
 
 ## Attributes
 
-##### src
+### src
 
 The URL of the document.
 
-##### common attributes
+### common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
 
 ## Validation
 
-See [amp-google-document-embed rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-google-document-embed/validator-amp-google-document-embed.protoascii) in the AMP validator specification.
+See [amp-google-document-embed rules](validator-amp-google-document-embed.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-google-document-embed/validator-amp-google-document-embed.protoascii b/extensions/amp-google-document-embed/validator-amp-google-document-embed.protoascii
index eae073a6a0c75..97e981bd8bb22 100644
--- a/extensions/amp-google-document-embed/validator-amp-google-document-embed.protoascii
+++ b/extensions/amp-google-document-embed/validator-amp-google-document-embed.protoascii
@@ -41,7 +41,7 @@ tags: {  # <amp-google-document-embed>
   attrs: { name: "[src]" }
   attrs: { name: "[title]" }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-google-document-embed"
+  spec_url: "https://amp.dev/documentation/components/amp-google-document-embed/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-google-vrview-image/0.1/amp-google-vrview-image.js b/extensions/amp-google-vrview-image/0.1/amp-google-vrview-image.js
deleted file mode 100644
index d02d36dfcb370..0000000000000
--- a/extensions/amp-google-vrview-image/0.1/amp-google-vrview-image.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {Services} from '../../../src/services';
-import {addParamToUrl, assertHttpsUrl} from '../../../src/url';
-import {isExperimentOn} from '../../../src/experiments';
-import {isLayoutSizeDefined} from '../../../src/layout';
-import {userAssert} from '../../../src/log';
-
-/** @const */
-const TAG = 'amp-google-vrview-image';
-
-class AmpGoogleVrviewImage extends AMP.BaseElement {
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-
-    /** @private {string} */
-    this.imageSrc_ = '';
-
-    /** @private {string} */
-    this.src_ = '';
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    return isLayoutSizeDefined(layout);
-  }
-
-  /** @override */
-  buildCallback() {
-    userAssert(
-      isExperimentOn(this.win, 'amp-google-vrview-image'),
-      'TAG amp-google-vrview-image disabled'
-    );
-
-    this.imageSrc_ = assertHttpsUrl(
-      this.element.getAttribute('src'),
-      this.element
-    );
-    // TODO(dvoytenko): Consider recompiling and hosting viewer on the
-    // cdn.ampproject.org as an iframe viewer or even possibly compiling
-    // it as an AMP element.
-    let src = 'https://storage.googleapis.com/vrview/2.0/index.html';
-    src = addParamToUrl(src, 'image', this.imageSrc_);
-    if (this.element.hasAttribute('stereo')) {
-      src = addParamToUrl(src, 'is_stereo', 'true');
-    }
-    const yaw = this.element.getAttribute('yaw');
-    if (yaw) {
-      src = addParamToUrl(src, 'start_yaw', yaw);
-    }
-    if (this.element.hasAttribute('yaw-only')) {
-      src = addParamToUrl(src, 'is_yaw_only', 'true');
-    }
-    this.src_ = src;
-  }
-
-  /** @override */
-  preconnectCallback() {
-    if (this.src_) {
-      Services.preconnectFor(this.win).preload(this.getAmpDoc(), this.src_);
-      Services.preconnectFor(this.win).preload(
-        this.getAmpDoc(),
-        this.imageSrc_
-      );
-    }
-  }
-
-  /** @override */
-  createPlaceholderCallback() {
-    // TODO(dvoytenko): Add a placeholder by downloading the target image
-    // and aligning it based on the specified yaw and mono/stereo.
-    return null;
-  }
-
-  /** @override */
-  layoutCallback() {
-    const iframe = this.element.ownerDocument.createElement('iframe');
-    iframe.onload = () => {
-      // Chrome does not reflect the iframe readystate.
-      iframe.readyState = 'complete';
-    };
-    this.applyFillContent(iframe);
-    iframe.setAttribute('frameborder', '0');
-    iframe.setAttribute('allowfullscreen', 'true');
-    iframe.setAttribute('src', this.src_);
-    this.element.appendChild(iframe);
-    return this.loadPromise(iframe);
-  }
-}
-
-AMP.extension(TAG, '0.1', (AMP) => {
-  AMP.registerElement(TAG, AmpGoogleVrviewImage);
-});
diff --git a/extensions/amp-google-vrview-image/0.1/test/test-amp-google-vrview-image.js b/extensions/amp-google-vrview-image/0.1/test/test-amp-google-vrview-image.js
deleted file mode 100644
index 9b30061713bd1..0000000000000
--- a/extensions/amp-google-vrview-image/0.1/test/test-amp-google-vrview-image.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import '../amp-google-vrview-image';
-import {toggleExperiment} from '../../../../src/experiments';
-
-describes.realWin(
-  'amp-google-vrview-image',
-  {
-    amp: {
-      extensions: ['amp-google-vrview-image'],
-    },
-  },
-  function (env) {
-    let win, doc;
-
-    beforeEach(() => {
-      win = env.win;
-      doc = win.document;
-      toggleExperiment(win, 'amp-google-vrview-image', true);
-    });
-
-    function getVrImage(attributes, opt_responsive, opt_beforeLayoutCallback) {
-      const vr = doc.createElement('amp-google-vrview-image');
-      for (const key in attributes) {
-        vr.setAttribute(key, attributes[key]);
-      }
-      vr.setAttribute('width', '111');
-      vr.setAttribute('height', '222');
-      if (opt_responsive) {
-        vr.setAttribute('layout', 'responsive');
-      }
-      doc.body.appendChild(vr);
-      return vr
-        .build()
-        .then(() => vr.layoutCallback())
-        .then(() => vr);
-    }
-
-    it('renders', () => {
-      return getVrImage({'src': 'https://example.com/image1'}).then((vr) => {
-        const iframe = vr.querySelector('iframe');
-        expect(iframe).to.not.be.null;
-        expect(iframe.tagName).to.equal('IFRAME');
-        expect(iframe.getAttribute('src')).to.equal(
-          'https://storage.googleapis.com/vrview/2.0/index.html' +
-            '?image=' +
-            encodeURIComponent('https://example.com/image1')
-        );
-      });
-    });
-
-    it('renders as stereo', () => {
-      return getVrImage({
-        'src': 'https://example.com/image1',
-        'stereo': '',
-      }).then((vr) => {
-        const iframe = vr.querySelector('iframe');
-        expect(iframe).to.not.be.null;
-        expect(iframe.tagName).to.equal('IFRAME');
-        expect(iframe.getAttribute('src')).to.equal(
-          'https://storage.googleapis.com/vrview/2.0/index.html' +
-            '?image=' +
-            encodeURIComponent('https://example.com/image1') +
-            '&is_stereo=true'
-        );
-      });
-    });
-
-    it('renders responsively', () => {
-      return getVrImage({'src': 'https://example.com/image1'}).then((vr) => {
-        const iframe = vr.querySelector('iframe');
-        expect(iframe).to.not.be.null;
-        expect(iframe.className).to.match(/i-amphtml-fill-content/);
-      });
-    });
-
-    it('requires src', () => {
-      return allowConsoleError(() => {
-        return getVrImage({}).should.eventually.be.rejectedWith(
-          /must be available/
-        );
-      });
-    });
-
-    it('requires https src', () => {
-      return allowConsoleError(() => {
-        return getVrImage({
-          'src': 'http://example.com/image1',
-        }).should.eventually.be.rejectedWith(/https/);
-      });
-    });
-  }
-);
diff --git a/extensions/amp-google-vrview-image/OWNERS b/extensions/amp-google-vrview-image/OWNERS
deleted file mode 100644
index 6b1d001d15c8c..0000000000000
--- a/extensions/amp-google-vrview-image/OWNERS
+++ /dev/null
@@ -1,10 +0,0 @@
-// For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
-
-{
-  rules: [
-    {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
-    },
-  ],
-}
diff --git a/extensions/amp-google-vrview-image/amp-google-vrview-image.md b/extensions/amp-google-vrview-image/amp-google-vrview-image.md
deleted file mode 100644
index 72bed68181755..0000000000000
--- a/extensions/amp-google-vrview-image/amp-google-vrview-image.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-$category@: media
-formats:
-  - websites
-  - stories
-teaser:
-  text: Displays a VR image.
-experimental: true
----
-
-<!---
-Copyright 2016 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.
--->
-
-# amp-google-vrview-image
-
-## Overview
-
-See [Google VR View](https://developers.google.com/vr/concepts/vrview) for more details.
-
-VR view supports mono and stereo 360 images. Note:
-
-- VR view images can be stored as png, jpeg, or gif. Recommend is jpeg for improved compression.
-- For maximum compatibility and performance, image dimensions should be powers of two (e.g., 2048 or 4096).
-- Mono images should be 2:1 aspect ratio (e.g. 4096 x 2048).
-- Stereo images should be 1:1 aspect ratio (e.g. 4096 x 4096).
-
-## Example
-
-```html
-<amp-google-vrview-image
-  src="https://storage.googleapis.com/vrview/examples/coral.jpg"
-  stereo
-  width="400"
-  height="300"
-  layout="responsive"
->
-</amp-google-vrview-image>
-```
-
-## Attributes
-
-<table>
-  <tr>
-    <td width="40%"><strong>src</strong></td>
-    <td>The source URL of a stereo image. Must resolve to https. See notes above on what
-kind of image can be passed here.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>stereo</strong></td>
-    <td>If specified, the image provided by the <code>src</code> attribute is considered to be a stereo
-image (see above), otherwise it's a mono image.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>yaw</strong></td>
-    <td>Initial yaw of viewer, in degrees. Defaults to 0.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>yaw-only</strong></td>
-    <td>Can be specified to restrict motion to yaw only.</td>
-  </tr>
-</table>
diff --git a/extensions/amp-gwd-animation/0.1/amp-gwd-animation-impl.js b/extensions/amp-gwd-animation/0.1/amp-gwd-animation-impl.js
index 8124897b21393..7bcd109aaa1b7 100644
--- a/extensions/amp-gwd-animation/0.1/amp-gwd-animation-impl.js
+++ b/extensions/amp-gwd-animation/0.1/amp-gwd-animation-impl.js
@@ -15,12 +15,10 @@
  */
 import {createCustomEvent} from '../../../src/event-helper';
 import {dev, user} from '../../../src/log';
-import {dict, hasOwn} from '../../../src/utils/object';
-import {escapeCssSelectorIdent} from '../../../src/css';
-import {installServiceInEmbedScope} from '../../../src/service';
+import {dict, hasOwn} from '../../../src/core/types/object';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {scopedQuerySelector, waitForChild} from '../../../src/dom';
-import {toArray} from '../../../src/types';
-import {whenDocumentReady} from '../../../src/document-ready';
+import {toArray} from '../../../src/core/types/array';
 
 /**
  * CSS class used to deactivate animations.
@@ -133,18 +131,13 @@ function setCounter(receiver, counterName, counterValue) {
 /**
  * AMP GWD animation runtime service.
  * @implements {../../../src/service.Disposable}
- * @implements {../../../src/service.EmbeddableService}
  */
 export class AmpGwdRuntimeService {
   /**
    * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc An AMP document
    *     with GWD content in which to install the animation runtime controller.
-   * @param {!Window=} opt_win If in a FIE, the FIE window in which to install
-   *     the service.
    */
-  constructor(ampdoc, opt_win) {
-    // TODO(#22733): remove opt_win subroooting once ampdoc-fie is launched.
-
+  constructor(ampdoc) {
     /** @const @protected {!../../../src/service/ampdoc-impl.AmpDoc} */
     this.ampdoc_ = ampdoc;
 
@@ -153,7 +146,7 @@ export class AmpGwdRuntimeService {
      * provided AmpDoc's window when in FIE.
      * @const @private {!Window}
      */
-    this.win_ = opt_win || ampdoc.win;
+    this.win_ = ampdoc.win;
 
     /**
      * The GWD ad document root. This will differ from the top-level AmpDoc's
@@ -166,10 +159,7 @@ export class AmpGwdRuntimeService {
     this.boundOnAnimationEndEvent_ = this.onAnimationEndEvent_.bind(this);
 
     // Initialize once the body and DOM is ready.
-    const docReadyPromise = opt_win
-      ? whenDocumentReady(this.doc_)
-      : ampdoc.whenReady();
-    docReadyPromise.then(() => {
+    ampdoc.whenReady().then(() => {
       // If the page deck is not yet in the DOM, wait until it is. The page deck
       // must be present in the body before the runtime can be initialized, as
       // it must activate animations on the first page. It's not clear whether
@@ -189,19 +179,6 @@ export class AmpGwdRuntimeService {
     });
   }
 
-  /**
-   * @param {!Window} embedWin
-   * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
-   * @nocollapse
-   */
-  static installInEmbedWindow(embedWin, ampdoc) {
-    installServiceInEmbedScope(
-      embedWin,
-      GWD_SERVICE_NAME,
-      new AmpGwdRuntimeService(ampdoc, embedWin)
-    );
-  }
-
   /**
    * Initializes the runtime. Attaches `animationend` event listeners for
    * handling timeline events, and activates animations on the first page.
diff --git a/extensions/amp-gwd-animation/0.1/amp-gwd-animation.js b/extensions/amp-gwd-animation/0.1/amp-gwd-animation.js
index 9abc82f1e79e7..4000fa2345455 100644
--- a/extensions/amp-gwd-animation/0.1/amp-gwd-animation.js
+++ b/extensions/amp-gwd-animation/0.1/amp-gwd-animation.js
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {
   AmpGwdRuntimeService,
   GWD_SERVICE_NAME,
@@ -22,11 +22,11 @@ import {
 import {CSS} from '../../../build/amp-gwd-animation-0.1.css';
 import {Services} from '../../../src/services';
 import {getDetail} from '../../../src/event-helper';
+import {getFriendlyIframeEmbedOptional} from '../../../src/iframe-helper';
 import {
-  getExistingServiceForDocInEmbedScope,
   getParentWindowFrameElement,
+  getServiceForDocOrNull,
 } from '../../../src/service';
-import {getFriendlyIframeEmbedOptional} from '../../../src/iframe-helper';
 import {userAssert} from '../../../src/log';
 
 /**
@@ -217,7 +217,7 @@ export class GwdAnimation extends AMP.BaseElement {
    */
   executeInvocation_(invocation) {
     const service = userAssert(
-      getExistingServiceForDocInEmbedScope(this.element, GWD_SERVICE_NAME),
+      getServiceForDocOrNull(this.element, GWD_SERVICE_NAME),
       'Cannot execute action because the GWD service is not registered.'
     );
 
@@ -241,7 +241,7 @@ export class GwdAnimation extends AMP.BaseElement {
     const eventName = getDetail(event)['eventName'];
     const timelineEventName = `${this.timelineEventPrefix_}${eventName}`;
 
-    // TODO(wg-ui-and-a11y): Should animation timeline events be low trust?
+    // TODO(wg-components): Should animation timeline events be low trust?
     actionService.trigger(
       this.element,
       timelineEventName,
diff --git a/extensions/amp-gwd-animation/0.1/test/test-amp-gwd-animation.js b/extensions/amp-gwd-animation/0.1/test/test-amp-gwd-animation.js
index 4b83e371d5443..d2dc632741746 100644
--- a/extensions/amp-gwd-animation/0.1/test/test-amp-gwd-animation.js
+++ b/extensions/amp-gwd-animation/0.1/test/test-amp-gwd-animation.js
@@ -25,9 +25,9 @@ import {
 import {GWD_PAGEDECK_ID, TAG, addAction} from '../amp-gwd-animation';
 import {Services} from '../../../../src/services';
 import {createCustomEvent} from '../../../../src/event-helper';
-import {getExistingServiceForDocInEmbedScope} from '../../../../src/service';
+import {getServiceForDocOrNull} from '../../../../src/service';
 
-describes.sandboxed('AMP GWD Animation', {}, () => {
+describes.sandboxed('AMP GWD Animation', {}, (env) => {
   /**
    * Creates a test amp-gwd-animation element in the given document.
    * @param {!Document} root
@@ -40,7 +40,7 @@ describes.sandboxed('AMP GWD Animation', {}, () => {
       element.setAttribute(attr, attrs[attr]);
     }
     root.body.appendChild(element);
-    return element.build().then(() => element);
+    return element.buildInternal().then(() => element);
   }
 
   /**
@@ -83,19 +83,14 @@ describes.sandboxed('AMP GWD Animation', {}, () => {
           let element;
           let impl;
           let page1Elem;
-          let embed;
           let win;
           let doc;
           let runtime;
 
           beforeEach(() => {
             ampdoc = env.ampdoc;
-            embed = env.embed;
-            win = variant.ampdoc == 'fie' ? embed.win : ampdoc.win;
-            doc =
-              variant.ampdoc == 'fie'
-                ? embed.win.document
-                : ampdoc.getRootNode();
+            win = ampdoc.win;
+            doc = ampdoc.getRootNode();
 
             // Create a test amp-carousel GWD page deck.
             doc.body.innerHTML = `<amp-carousel id="pagedeck"
@@ -117,15 +112,16 @@ describes.sandboxed('AMP GWD Animation', {}, () => {
               'timeline-event-prefix': 'tl_',
               'layout': 'nodisplay',
             };
-            return createGwdAnimationElement(doc, config).then((el) => {
-              element = el;
-              impl = element.implementation_;
-              runtime = getExistingServiceForDocInEmbedScope(
-                element,
-                GWD_SERVICE_NAME
-              );
-              page1Elem = doc.getElementById('page1');
-            });
+            return createGwdAnimationElement(doc, config)
+              .then((el) => {
+                element = el;
+                runtime = getServiceForDocOrNull(element, GWD_SERVICE_NAME);
+                page1Elem = doc.getElementById('page1');
+                return element.getImpl(false);
+              })
+              .then((aImpl) => {
+                impl = aImpl;
+              });
           });
 
           afterEach(() => {
@@ -507,9 +503,9 @@ describes.sandboxed('AMP GWD Animation', {}, () => {
     let actionService;
 
     beforeEach(() => {
-      actionService = {setActions: window.sandbox.stub()};
+      actionService = {setActions: env.sandbox.stub()};
       element = document.createElement('div');
-      window.sandbox
+      env.sandbox
         .stub(Services, 'actionServiceForDoc')
         .withArgs(element)
         .returns(actionService);
@@ -545,7 +541,7 @@ describes.sandboxed('AMP GWD Animation', {}, () => {
       const target = document.createElement('div');
       target.setAttribute('on', 'event2:node2.hide');
       // FIE should have its own ActionService.
-      const fieActionService = {setActions: window.sandbox.stub()};
+      const fieActionService = {setActions: env.sandbox.stub()};
       Services.actionServiceForDoc.withArgs(target).returns(fieActionService);
       // Provide `target` as the service context to simulate FIE case.
       addAction(target, target, 'event1', 'node1.foo()');
diff --git a/extensions/amp-gwd-animation/OWNERS b/extensions/amp-gwd-animation/OWNERS
index de71c6f079f17..0baaea9812f71 100644
--- a/extensions/amp-gwd-animation/OWNERS
+++ b/extensions/amp-gwd-animation/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-hulu/0.1/test/test-amp-hulu.js b/extensions/amp-hulu/0.1/test/test-amp-hulu.js
index fb8751fa5b7bf..ca74f1ffc2b27 100644
--- a/extensions/amp-hulu/0.1/test/test-amp-hulu.js
+++ b/extensions/amp-hulu/0.1/test/test-amp-hulu.js
@@ -40,7 +40,7 @@ describes.realWin(
         hulu.setAttribute('layout', 'responsive');
       }
       doc.body.appendChild(hulu);
-      return hulu.build().then(() => {
+      return hulu.buildInternal().then(() => {
         hulu.layoutCallback();
         return hulu;
       });
diff --git a/extensions/amp-hulu/0.1/test/validator-amp-hulu.out b/extensions/amp-hulu/0.1/test/validator-amp-hulu.out
index fc696f8a02c40..339cf4f137bab 100644
--- a/extensions/amp-hulu/0.1/test/validator-amp-hulu.out
+++ b/extensions/amp-hulu/0.1/test/validator-amp-hulu.out
@@ -40,7 +40,7 @@ FAIL
 |    <!-- Invalid: missing data-eid attribute. -->
 |    <amp-hulu
 >>   ^~~~~~~~~
-amp-hulu/0.1/test/validator-amp-hulu.html:40:2 The mandatory attribute 'data-eid' is missing in tag 'amp-hulu'. (see https://amp.dev/documentation/components/amp-hulu)
+amp-hulu/0.1/test/validator-amp-hulu.html:40:2 The mandatory attribute 'data-eid' is missing in tag 'amp-hulu'. (see https://amp.dev/documentation/components/amp-hulu/)
 |      layout="responsive"
 |      width="312"
 |      height="213">
@@ -49,7 +49,7 @@ amp-hulu/0.1/test/validator-amp-hulu.html:40:2 The mandatory attribute 'data-eid
 |    <!-- Invalid: illegal layout. -->
 |    <amp-hulu
 >>   ^~~~~~~~~
-amp-hulu/0.1/test/validator-amp-hulu.html:47:2 The specified layout 'INTRINSIC' is not supported by tag 'amp-hulu'. (see https://amp.dev/documentation/components/amp-hulu)
+amp-hulu/0.1/test/validator-amp-hulu.html:47:2 The specified layout 'INTRINSIC' is not supported by tag 'amp-hulu'. (see https://amp.dev/documentation/components/amp-hulu/)
 |      layout="intrinsic"
 |      width="412"
 |      height="213"
diff --git a/extensions/amp-hulu/OWNERS b/extensions/amp-hulu/OWNERS
index 2c9ea35300df1..91f89abc8290e 100644
--- a/extensions/amp-hulu/OWNERS
+++ b/extensions/amp-hulu/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}, {name: 'unbug'}],
+      owners: [{name: 'ampproject/wg-components'}, {name: 'unbug'}],
     },
   ],
 }
diff --git a/extensions/amp-hulu/amp-hulu.md b/extensions/amp-hulu/amp-hulu.md
index 7dc62289a1e94..4b33241e52d09 100644
--- a/extensions/amp-hulu/amp-hulu.md
+++ b/extensions/amp-hulu/amp-hulu.md
@@ -3,7 +3,7 @@ $category@: media
 formats:
   - websites
 teaser:
-  text: Displays a simple embedded Hulu video.
+  text: Displays an embedded Hulu video.
 ---
 
 <!---
@@ -24,7 +24,9 @@ limitations under the License.
 
 # amp-hulu
 
-## Example
+## Usage
+
+Displays an embedded Hulu video.
 
 ```html
 <amp-hulu
@@ -38,17 +40,14 @@ limitations under the License.
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-eid</strong></td>
-    <td>The ID of the video. For example, <code>4Dk5F2PYTtrgciuvloH3UA</code> is the eid in the following URL: https://player.hulu.com/site/dash/mobile_embed.html?eid=4Dk5F2PYTtrgciuvloH3UA.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+### data-eid
+
+The id of the video. For example, `4Dk5F2PYTtrgciuvloH3UA` is the eid in the following URL: `https://player.hulu.com/site/dash/mobile_embed.html?eid=4Dk5F2PYTtrgciuvloH3UA`.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
 
 ## Validation
 
-See [amp-hulu rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-hulu/validator-amp-hulu.protoascii) in the AMP validator specification.
+See [amp-hulu rules](validator-amp-hulu.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-hulu/validator-amp-hulu.protoascii b/extensions/amp-hulu/validator-amp-hulu.protoascii
index c304c710d5932..ad59e815e67a9 100644
--- a/extensions/amp-hulu/validator-amp-hulu.protoascii
+++ b/extensions/amp-hulu/validator-amp-hulu.protoascii
@@ -33,7 +33,7 @@ tags: {  # <amp-hulu>
     mandatory: true
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-hulu"
+  spec_url: "https://amp.dev/documentation/components/amp-hulu/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-iframe/0.1/amp-iframe.js b/extensions/amp-iframe/0.1/amp-iframe.js
index 7747034d3342a..cc2ca845677f6 100644
--- a/extensions/amp-iframe/0.1/amp-iframe.js
+++ b/extensions/amp-iframe/0.1/amp-iframe.js
@@ -14,33 +14,33 @@
  * limitations under the License.
  */
 
-import {AMPDOC_SINGLETON_NAME} from '../../../src/enums';
-import {ActionTrust} from '../../../src/action-constants';
-import {IntersectionObserverHostApi} from '../../../src/utils/intersection-observer-polyfill';
+import {AMPDOC_SINGLETON_NAME} from '../../../src/core/constants/enums';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {IntersectionObserver3pHost} from '../../../src/utils/intersection-observer-3p-host';
 import {LayoutPriority, isLayoutSizeDefined} from '../../../src/layout';
+import {MessageType} from '../../../src/3p-frame-messaging';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
-import {base64EncodeFromBytes} from '../../../src/utils/base64.js';
+import {base64EncodeFromBytes} from '../../../src/core/types/string/base64.js';
 import {createCustomEvent, getData, listen} from '../../../src/event-helper';
 import {devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {endsWith, startsWith} from '../../../src/string';
+import {dict} from '../../../src/core/types/object';
+import {endsWith} from '../../../src/core/types/string';
+import {getConsentDataToForward} from '../../../src/consent';
 import {
   isAdLike,
-  isPausable,
   listenFor,
   looksLikeTrackingIframe,
-  makePausable,
-  setPaused,
 } from '../../../src/iframe-helper';
 import {isAdPositionAllowed} from '../../../src/ad-helper';
 import {isExperimentOn} from '../../../src/experiments';
-import {moveLayoutRect} from '../../../src/layout-rect';
-import {parseJson} from '../../../src/json';
+import {moveLayoutRect} from '../../../src/core/math/layout-rect';
+import {parseJson} from '../../../src/core/types/object/json';
 import {removeElement} from '../../../src/dom';
 import {removeFragment} from '../../../src/url';
 import {setStyle} from '../../../src/style';
 import {urls} from '../../../src/config';
-import {utf8Encode} from '../../../src/utils/bytes.js';
+import {utf8Encode} from '../../../src/core/types/string/bytes.js';
 
 /** @const {string} */
 const TAG_ = 'amp-iframe';
@@ -96,7 +96,7 @@ export class AmpIframe extends AMP.BaseElement {
     /** @private {boolean} */
     this.isResizable_ = false;
 
-    /** @private {?IntersectionObserverHostApi} */
+    /** @private {?IntersectionObserver3pHost} */
     this.intersectionObserverHostApi_ = null;
 
     /** @private {string} */
@@ -125,10 +125,11 @@ export class AmpIframe extends AMP.BaseElement {
      */
     this.targetOrigin_ = null;
 
-    /**
-     * @private {boolean}
-     */
+    /** @private {boolean} */
     this.hasErroredEmbedSize_ = false;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /** @override */
@@ -147,7 +148,7 @@ export class AmpIframe extends AMP.BaseElement {
     const {element} = this;
     const urlService = Services.urlForDoc(element);
     const url = urlService.parse(src);
-    const {hostname, protocol, origin} = url;
+    const {hostname, origin, protocol} = url;
     // Some of these can be easily circumvented with redirects.
     // Checks are mostly there to prevent people easily do something
     // they did not mean to.
@@ -161,8 +162,8 @@ export class AmpIframe extends AMP.BaseElement {
       !this.sandboxContainsToken_(sandbox, 'allow-same-origin') ||
         (origin != containerUrl.origin && protocol != 'data:'),
       'Origin of <amp-iframe> must not be equal to container %s' +
-        'if allow-same-origin is set. See https://github.com/ampproject/' +
-        'amphtml/blob/master/spec/amp-iframe-origin-policy.md for details.',
+        ' if allow-same-origin is set. See https://github.com/ampproject/' +
+        'amphtml/blob/main/docs/spec/amp-iframe-origin-policy.md for details.',
       element
     );
     userAssert(
@@ -187,7 +188,7 @@ export class AmpIframe extends AMP.BaseElement {
         'of the viewport or 600px from the top (whichever is smaller): %s ' +
         ' Current position %s. Min: %s' +
         "Positioning rules don't apply for iframes that use `placeholder`." +
-        'See https://github.com/ampproject/amphtml/blob/master/extensions/' +
+        'See https://github.com/ampproject/amphtml/blob/main/extensions/' +
         'amp-iframe/amp-iframe.md#iframe-with-placeholder for details.',
       this.element,
       pos.top,
@@ -217,7 +218,7 @@ export class AmpIframe extends AMP.BaseElement {
     if (!src) {
       return;
     }
-    const {protocol, hash} = Services.urlForDoc(this.element).parse(src);
+    const {hash, protocol} = Services.urlForDoc(this.element).parse(src);
     // data-URLs are not modified.
     if (protocol == 'data:') {
       return src;
@@ -258,24 +259,6 @@ export class AmpIframe extends AMP.BaseElement {
     );
   }
 
-  /** @override */
-  firstAttachedCallback() {
-    this.sandbox_ = this.element.getAttribute('sandbox');
-
-    const iframeSrc = /** @type {string} */ (this.transformSrc_(
-      this.element.getAttribute('src')
-    ) ||
-      this.transformSrcDoc_(
-        this.element.getAttribute('srcdoc'),
-        this.sandbox_
-      ));
-    this.iframeSrc = this.assertSource_(
-      iframeSrc,
-      window.location.href,
-      this.sandbox_
-    );
-  }
-
   /**
    * @param {boolean=} onLayout
    * @override
@@ -292,6 +275,21 @@ export class AmpIframe extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.sandbox_ = this.element.getAttribute('sandbox');
+
+    const iframeSrc = /** @type {string} */ (
+      this.transformSrc_(this.element.getAttribute('src')) ||
+        this.transformSrcDoc_(
+          this.element.getAttribute('srcdoc'),
+          this.sandbox_
+        )
+    );
+    this.iframeSrc = this.assertSource_(
+      iframeSrc,
+      window.location.href,
+      this.sandbox_
+    );
+
     this.placeholder_ = this.getPlaceholder();
     this.isClickToPlay_ = !!this.placeholder_;
 
@@ -321,13 +319,6 @@ export class AmpIframe extends AMP.BaseElement {
     this.isTrackingFrame_ = this.looksLikeTrackingIframe_();
     this.isDisallowedAsAd_ =
       this.isAdLike_ && !isAdPositionAllowed(element, this.win);
-
-    // When the framework has the need to remeasure us, our position might
-    // have changed. Send an intersection record if needed. This can be done by
-    // IntersectionObserverHostApi onlayoutMeasure function.
-    if (this.intersectionObserverHostApi_) {
-      this.intersectionObserverHostApi_.fire();
-    }
   }
 
   /**
@@ -364,9 +355,9 @@ export class AmpIframe extends AMP.BaseElement {
       this.measureIframeLayoutBox_();
     }
 
-    const iframe = /** @type {!../../../src/layout-rect.LayoutRectDef} */ (devAssert(
-      this.iframeLayoutBox_
-    ));
+    const iframe = /** @type {!../../../src/layout-rect.LayoutRectDef} */ (
+      devAssert(this.iframeLayoutBox_)
+    );
     return moveLayoutRect(iframe, box.left, box.top);
   }
 
@@ -406,7 +397,7 @@ export class AmpIframe extends AMP.BaseElement {
             'Only 1 analytics/tracking iframe allowed per ' +
               'page. Please use amp-analytics instead or file a GitHub issue ' +
               'for your use case: ' +
-              'https://github.com/ampproject/amphtml/issues/new'
+              'https://github.com/ampproject/amphtml/issues/new/choose'
           );
         return Promise.resolve();
       }
@@ -437,16 +428,10 @@ export class AmpIframe extends AMP.BaseElement {
 
     setSandbox(this.element, iframe, this.sandbox_);
 
-    // If "pausable-iframe" enabled, try to make the iframe pausable. It doesn't
-    // matter here whether this will succeed or not.
-    if (isExperimentOn(this.win, 'pausable-iframe')) {
-      makePausable(devAssert(this.iframe_));
-    }
-
     iframe.src = this.iframeSrc;
 
     if (!this.isTrackingFrame_) {
-      this.intersectionObserverHostApi_ = new IntersectionObserverHostApi(
+      this.intersectionObserverHostApi_ = new IntersectionObserver3pHost(
         this,
         iframe
       );
@@ -491,6 +476,10 @@ export class AmpIframe extends AMP.BaseElement {
       listenFor(iframe, 'embed-ready', this.activateIframe_.bind(this));
     }
 
+    listenFor(iframe, MessageType.SEND_CONSENT_DATA, (data, source, origin) => {
+      this.sendConsentData_(source, origin);
+    });
+
     this.container_.appendChild(iframe);
 
     return this.loadPromise(iframe).then(() => {
@@ -504,6 +493,8 @@ export class AmpIframe extends AMP.BaseElement {
           });
         }, 1000);
       }
+
+      this.pauseHelper_.updatePlaying(true);
     });
   }
 
@@ -519,7 +510,7 @@ export class AmpIframe extends AMP.BaseElement {
       return;
     }
     const data = getData(event);
-    if (typeof data !== 'string' || !startsWith(data, 'pym')) {
+    if (typeof data !== 'string' || !data.startsWith('pym')) {
       return;
     }
 
@@ -538,35 +529,40 @@ export class AmpIframe extends AMP.BaseElement {
     }
   }
 
-  /** @override */
-  unlayoutOnPause() {
-    return !this.isPausable_();
-  }
-
-  /** @override  */
-  pauseCallback() {
-    if (this.isPausable_()) {
-      setPaused(devAssert(this.iframe_), true);
-    }
-  }
-
-  /** @override  */
-  resumeCallback() {
-    if (this.isPausable_()) {
-      setPaused(devAssert(this.iframe_), false);
-    }
+  /**
+   * Requests consent data from consent module
+   * and forwards information to iframe
+   * @param {Window} source
+   * @param {string} origin
+   * @private
+   */
+  sendConsentData_(source, origin) {
+    getConsentDataToForward(this.element, this.getConsentPolicy()).then(
+      (consents) => {
+        this.sendConsentDataToIframe_(
+          source,
+          origin,
+          Object.assign(
+            dict({
+              'sentinel': 'amp',
+              'type': MessageType.CONSENT_DATA,
+            }),
+            consents
+          )
+        );
+      }
+    );
   }
 
   /**
-   * @return {boolean}
+   * Send consent data to iframe
+   * @param {Window} source
+   * @param {string} origin
+   * @param {JsonObject} data
    * @private
    */
-  isPausable_() {
-    return (
-      isExperimentOn(this.win, 'pausable-iframe') &&
-      !!this.iframe_ &&
-      isPausable(this.iframe_)
-    );
+  sendConsentDataToIframe_(source, origin, data) {
+    source./*OK*/ postMessage(data, origin);
   }
 
   /**
@@ -593,16 +589,10 @@ export class AmpIframe extends AMP.BaseElement {
         this.intersectionObserverHostApi_ = null;
       }
     }
+    this.pauseHelper_.updatePlaying(false);
     return true;
   }
 
-  /** @override  */
-  viewportCallback(inViewport) {
-    if (this.intersectionObserverHostApi_) {
-      this.intersectionObserverHostApi_.onViewportCallback(inViewport);
-    }
-  }
-
   /** @override  */
   getLayoutPriority() {
     if (this.isAdLike_) {
@@ -629,11 +619,15 @@ export class AmpIframe extends AMP.BaseElement {
     }
     if (this.iframe_ && mutations['title']) {
       // only propagating title because propagating all causes e2e error:
-      // See <https://travis-ci.org/ampproject/amphtml/jobs/657440421>
       this.propagateAttributes(['title'], this.iframe_);
     }
   }
 
+  /** @override */
+  unlayoutOnPause() {
+    return true;
+  }
+
   /**
    * Makes the iframe visible.
    * @private
@@ -730,6 +724,11 @@ export class AmpIframe extends AMP.BaseElement {
           if (newWidth !== undefined) {
             this.element.setAttribute('width', newWidth);
           }
+          this.element.overflowCallback(
+            /* overflown */ false,
+            newHeight,
+            newWidth
+          );
         },
         () => {}
       );
diff --git a/extensions/amp-iframe/0.1/storybook/Basic.amp.js b/extensions/amp-iframe/0.1/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..a22db492f912c
--- /dev/null
+++ b/extensions/amp-iframe/0.1/storybook/Basic.amp.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {withAmp} from '@ampproject/storybook-addon';
+import {withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'amp-iframe',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-iframe', version: '0.1'}],
+  },
+};
+
+export const _default = () => {
+  return (
+    <amp-iframe
+      sandbox="allow-same-origin allow-scripts"
+      src="http://ads.localhost:8000/extensions/amp-iframe/0.1/storybook/iframe.html"
+      width="400"
+      height="300"
+      layout="fixed"
+    >
+      <div placeholder>loading...</div>
+      <div fallback>disallowed</div>
+    </amp-iframe>
+  );
+};
diff --git a/extensions/amp-iframe/0.1/storybook/iframe.html b/extensions/amp-iframe/0.1/storybook/iframe.html
new file mode 100644
index 0000000000000..065956892551b
--- /dev/null
+++ b/extensions/amp-iframe/0.1/storybook/iframe.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+</head>
+<body style="margin: 0; border: 0; background: #eee;">
+  This is an iframe.
+  It will try to execute some "bad" code.
+  <script>
+    (function() {
+      let failed = false;
+      try {
+        parent.document.body.style.background = 'red';
+      } catch (e) {
+        failed = true;
+        console.log('Failed as expected:', e.message);
+      }
+      if (!failed) {
+        throw new Error('The page got unallowed access');
+      }
+    })();
+  </script>
+</body>
+</html>
diff --git a/extensions/amp-iframe/0.1/test/test-amp-iframe.js b/extensions/amp-iframe/0.1/test/test-amp-iframe.js
index 3489195136e28..f559bad00faa3 100644
--- a/extensions/amp-iframe/0.1/test/test-amp-iframe.js
+++ b/extensions/amp-iframe/0.1/test/test-amp-iframe.js
@@ -14,16 +14,19 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../../src/action-constants';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
 import {AmpIframe, setTrackingIframeTimeoutForTesting} from '../amp-iframe';
-import {CommonSignals} from '../../../../src/common-signals';
+import {CommonSignals} from '../../../../src/core/constants/common-signals';
 import {LayoutPriority} from '../../../../src/layout';
 import {Services} from '../../../../src/services';
 import {
   createElementWithAttributes,
   whenUpgradedToCustomElement,
 } from '../../../../src/dom';
+
+import {installResizeObserverStub} from '../../../../testing/resize-observer-stub';
 import {isAdLike} from '../../../../src/iframe-helper';
+import {macroTask} from '../../../../testing/yield';
 import {poll} from '../../../../testing/iframe';
 import {toggleExperiment} from '../../../../src/experiments';
 import {user} from '../../../../src/log';
@@ -42,366 +45,367 @@ describes.realWin(
     },
   },
   (env) => {
-    describe('amp-iframe', () => {
-      let iframeSrc;
-      let clickableIframeSrc;
-      let timer;
-      let ranJs;
-      let content;
-      let win;
-      let doc;
+    let iframeSrc;
+    let clickableIframeSrc;
+    let timer;
+    let ranJs;
+    let content;
+    let win;
+    let doc;
+    let resizeObserverStub;
+
+    beforeEach(() => {
+      iframeSrc =
+        'http://iframe.localhost:' +
+        location.port +
+        '/test/fixtures/served/iframe.html';
+      clickableIframeSrc =
+        'http://iframe.localhost:' +
+        location.port +
+        '/test/fixtures/served/iframe-clicktoplay.html';
+      win = env.win;
+      doc = win.document;
+      timer = Services.timerFor(win);
+      ranJs = 0;
+      content = '';
+      timer = Services.timerFor(env.win);
+      win.addEventListener('message', (message) => {
+        if (typeof message.data != 'string') {
+          return;
+        }
+        if (message.data == 'loaded-iframe') {
+          ranJs++;
+        }
+        if (message.data.indexOf('content-iframe:') == 0) {
+          content = message.data.replace('content-iframe:', '');
+        }
+      });
+      setTrackingIframeTimeoutForTesting(20);
+      resizeObserverStub = installResizeObserverStub(env.sandbox, win);
+    });
 
-      beforeEach(() => {
-        iframeSrc =
-          'http://iframe.localhost:' +
-          location.port +
-          '/test/fixtures/served/iframe.html';
-        clickableIframeSrc =
-          'http://iframe.localhost:' +
-          location.port +
-          '/test/fixtures/served/iframe-clicktoplay.html';
-        win = env.win;
-        doc = win.document;
-        timer = Services.timerFor(win);
-        ranJs = 0;
-        content = '';
-        timer = Services.timerFor(env.win);
-        win.addEventListener('message', (message) => {
-          if (typeof message.data != 'string') {
-            return;
-          }
-          if (message.data == 'loaded-iframe') {
-            ranJs++;
-          }
-          if (message.data.indexOf('content-iframe:') == 0) {
-            content = message.data.replace('content-iframe:', '');
+    function stubUserAsserts() {
+      const errors = [];
+      env.sandbox
+        .stub(user(), 'assert')
+        .callsFake((shouldBeTrueish, message) => {
+          if (!shouldBeTrueish) {
+            errors.push(message);
           }
+          return shouldBeTrueish;
         });
-        setTrackingIframeTimeoutForTesting(20);
+      const replay = function () {
+        if (errors.length > 0) {
+          throw errors[0];
+        }
+      };
+      replay.errors = errors;
+      return replay;
+    }
+
+    function waitForJsInIframe(opt_ranJs = 1, opt_timeout = 300) {
+      return poll(
+        'waiting for JS to run',
+        () => {
+          return ranJs >= opt_ranJs;
+        },
+        undefined,
+        opt_timeout
+      );
+    }
+
+    function waitForAmpIframeLayoutPromise(doc, ampIframe) {
+      const viewport = Services.viewportForDoc(doc);
+      viewport.setScrollTop(600);
+      return whenUpgradedToCustomElement(ampIframe).then((element) => {
+        return element.signals().whenSignal(CommonSignals.LOAD_END);
       });
-
-      function stubUserAsserts() {
-        const errors = [];
-        env.sandbox
-          .stub(user(), 'assert')
-          .callsFake((shouldBeTrueish, message) => {
-            if (!shouldBeTrueish) {
-              errors.push(message);
-            }
-            return shouldBeTrueish;
-          });
-        const replay = function () {
-          if (errors.length > 0) {
-            throw errors[0];
-          }
-        };
-        replay.errors = errors;
-        return replay;
+    }
+
+    function createAmpIframe(
+      env,
+      opt_attributes,
+      opt_top,
+      opt_height,
+      opt_translateY,
+      opt_container
+    ) {
+      const doc = env.win.document;
+      env.win.innerHeight = opt_height;
+      const attributes = opt_attributes || {
+        src: iframeSrc,
+        width: 100,
+        height: 100,
+      };
+      const ampIframe = createElementWithAttributes(
+        doc,
+        'amp-iframe',
+        attributes
+      );
+      if (attributes.resizable) {
+        const overflowEl = doc.createElement('div');
+        overflowEl.setAttribute('overflow', '');
+        ampIframe.appendChild(overflowEl);
       }
-
-      function waitForJsInIframe(opt_ranJs = 1, opt_timeout = 300) {
-        return poll(
-          'waiting for JS to run',
-          () => {
-            return ranJs >= opt_ranJs;
-          },
-          undefined,
-          opt_timeout
-        );
-      }
-
-      function waitForAmpIframeLayoutPromise(doc, ampIframe) {
-        const viewport = Services.viewportForDoc(doc);
-        viewport.setScrollTop(600);
-        return whenUpgradedToCustomElement(ampIframe).then((element) => {
-          return element.signals().whenSignal(CommonSignals.LOAD_END);
+      if (attributes.poster) {
+        const img = createElementWithAttributes(doc, 'amp-img', {
+          'layout': 'fill',
+          'src': attributes.poster,
+          'placeholder': '',
         });
+        ampIframe.appendChild(img);
       }
-
-      function createAmpIframe(
-        env,
-        opt_attributes,
-        opt_top,
-        opt_height,
-        opt_translateY,
-        opt_container
-      ) {
-        const doc = env.win.document;
-        env.win.innerHeight = opt_height;
-        const attributes = opt_attributes || {
-          src: iframeSrc,
-          width: 100,
-          height: 100,
-        };
-        const ampIframe = createElementWithAttributes(
-          doc,
-          'amp-iframe',
-          attributes
-        );
-        if (attributes.resizable) {
-          const overflowEl = doc.createElement('div');
-          overflowEl.setAttribute('overflow', '');
-          ampIframe.appendChild(overflowEl);
-        }
-        if (attributes.poster) {
-          const img = createElementWithAttributes(doc, 'amp-img', {
-            'layout': 'fill',
-            'src': attributes.poster,
-            'placeholder': '',
-          });
-          ampIframe.appendChild(img);
-        }
-        if (opt_container) {
-          const container = doc.createElement('div');
-          container.classList.add('i-amphtml-overlay');
-          container.appendChild(ampIframe);
-          doc.body.appendChild(container);
-        } else {
-          doc.body.appendChild(ampIframe);
-        }
-        const viewport = Services.viewportForDoc(doc);
-        viewport.resize_();
-        ampIframe.style.top = '600px';
-        if (opt_top != undefined) {
-          ampIframe.style.top = opt_top.toString() + 'px';
-        }
-        const {top} = ampIframe.style;
-        ampIframe.style.position = 'absolute'; //opt_position
-        if (opt_translateY) {
-          ampIframe.style.transform = `translateY(${opt_translateY}px)`; //'translateY(' + opt_translateY + ')';
-        }
-        if (attributes.resizable !== undefined) {
-          const overflowEl = doc.createElement('div');
-          overflowEl.setAttribute('overflow', '');
-          ampIframe.appendChild(overflowEl);
-        }
-        if (attributes.poster) {
-          const img = doc.createElement('amp-img');
-          img.setAttribute('layout', 'fill');
-          img.setAttribute('src', attributes.poster);
-          img.setAttribute('placeholder', '');
-          ampIframe.appendChild(img);
-        }
-        if (attributes.position) {
-          ampIframe.style.position = attributes.position;
-        }
-        viewport.setScrollTop(parseInt(top, 10));
-
-        return ampIframe;
+      if (opt_container) {
+        const container = doc.createElement('div');
+        container.classList.add('i-amphtml-overlay');
+        container.appendChild(ampIframe);
+        doc.body.appendChild(container);
+      } else {
+        doc.body.appendChild(ampIframe);
       }
+      const viewport = Services.viewportForDoc(doc);
+      viewport.resize_();
+      ampIframe.style.top = '600px';
+      if (opt_top != undefined) {
+        ampIframe.style.top = opt_top.toString() + 'px';
+      }
+      const {top} = ampIframe.style;
+      ampIframe.style.position = 'absolute'; //opt_position
+      if (opt_translateY) {
+        ampIframe.style.transform = `translateY(${opt_translateY}px)`; //'translateY(' + opt_translateY + ')';
+      }
+      if (attributes.resizable !== undefined) {
+        const overflowEl = doc.createElement('div');
+        overflowEl.setAttribute('overflow', '');
+        ampIframe.appendChild(overflowEl);
+      }
+      if (attributes.poster) {
+        const img = doc.createElement('amp-img');
+        img.setAttribute('layout', 'fill');
+        img.setAttribute('src', attributes.poster);
+        img.setAttribute('placeholder', '');
+        ampIframe.appendChild(img);
+      }
+      if (attributes.position) {
+        ampIframe.style.position = attributes.position;
+      }
+      viewport.setScrollTop(parseInt(top, 10));
 
-      it('should render iframe', async () => {
-        const ampIframe = createAmpIframe(env, {
-          src: iframeSrc,
-          width: 100,
-          height: 100,
-        });
-        await waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const impl = ampIframe.implementation_;
-        const iframe = ampIframe.querySelector('iframe');
-        expect(iframe.src).to.equal(iframeSrc + '#amp=1');
-        expect(iframe.getAttribute('sandbox')).to.equal('');
-        const scrollWrapper = ampIframe.querySelector(
-          'i-amphtml-scroll-container'
-        );
-        expect(iframe.parentNode).to.equal(scrollWrapper);
-        expect(impl.looksLikeTrackingIframe_()).to.be.false;
-        expect(impl.getLayoutPriority()).to.equal(LayoutPriority.CONTENT);
-        await timer.promise(IFRAME_MESSAGE_TIMEOUT);
-        expect(ranJs).to.equal(0);
-      });
-
-      it('should only propagate supported attributes', function* () {
-        const ampIframe = createAmpIframe(env, {
-          src: iframeSrc,
-          width: 100,
-          height: 100,
-          title: 'example title',
-          allowfullscreen: '',
-          allowpaymentrequest: '',
-          allowtransparency: '',
-          allow: 'microphone; camera',
-          referrerpolicy: 'no-referrer',
-          frameborder: 3,
-          tabindex: -1,
-          longdesc: 'foo',
-          marginwidth: 5,
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const iframe = ampIframe.querySelector('iframe');
-        expect(iframe.getAttribute('allowfullscreen')).to.equal('');
-        expect(iframe.getAttribute('allowpaymentrequest')).to.equal('');
-        expect(iframe.getAttribute('allowtransparency')).to.equal('');
-        expect(iframe.getAttribute('allow')).to.equal('microphone; camera');
-        expect(iframe.getAttribute('referrerpolicy')).to.equal('no-referrer');
-        expect(iframe.getAttribute('frameborder')).to.equal('3');
-        expect(iframe.getAttribute('tabindex')).to.equal('-1');
-        expect(iframe.getAttribute('title')).to.equal('example title');
-        // unsupported attributes
-        expect(iframe.getAttribute('longdesc')).to.be.null;
-        expect(iframe.getAttribute('marginwidth')).to.be.null;
-      });
+      return ampIframe;
+    }
 
-      // This is temporary.
-      // TODO(aghassemi, #21247)
-      it('should disable allow=autoplay', function* () {
-        const ampIframe = createAmpIframe(env, {
-          src: iframeSrc,
-          width: 100,
-          height: 100,
-          allow: 'microphone; autoplay; camera',
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const iframe = ampIframe.querySelector('iframe');
-        expect(iframe.getAttribute('allow')).to.equal(
-          'microphone; autoplay-disabled; camera'
-        );
+    it('should render iframe', async () => {
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        width: 100,
+        height: 100,
       });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl(false);
+      const iframe = ampIframe.querySelector('iframe');
+      expect(iframe.src).to.equal(iframeSrc + '#amp=1');
+      expect(iframe.getAttribute('sandbox')).to.equal('');
+      const scrollWrapper = ampIframe.querySelector(
+        'i-amphtml-scroll-container'
+      );
+      expect(iframe.parentNode).to.equal(scrollWrapper);
+      expect(impl.looksLikeTrackingIframe_()).to.be.false;
+      expect(impl.getLayoutPriority()).to.equal(LayoutPriority.CONTENT);
+      await timer.promise(IFRAME_MESSAGE_TIMEOUT);
+      expect(ranJs).to.equal(0);
+    });
 
-      it('should default frameborder to 0 if not set', function* () {
-        const ampIframe = createAmpIframe(env, {
-          src: iframeSrc,
-          width: 100,
-          height: 100,
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const iframe = ampIframe.querySelector('iframe');
-        expect(iframe.getAttribute('frameborder')).to.equal('0');
+    it('should only propagate supported attributes', function* () {
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        width: 100,
+        height: 100,
+        title: 'example title',
+        allowfullscreen: '',
+        allowpaymentrequest: '',
+        allowtransparency: '',
+        allow: 'microphone; camera',
+        referrerpolicy: 'no-referrer',
+        frameborder: 3,
+        tabindex: -1,
+        longdesc: 'foo',
+        marginwidth: 5,
       });
+      yield waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const iframe = ampIframe.querySelector('iframe');
+      expect(iframe.getAttribute('allowfullscreen')).to.equal('');
+      expect(iframe.getAttribute('allowpaymentrequest')).to.equal('');
+      expect(iframe.getAttribute('allowtransparency')).to.equal('');
+      expect(iframe.getAttribute('allow')).to.equal('microphone; camera');
+      expect(iframe.getAttribute('referrerpolicy')).to.equal('no-referrer');
+      expect(iframe.getAttribute('frameborder')).to.equal('3');
+      expect(iframe.getAttribute('tabindex')).to.equal('-1');
+      expect(iframe.getAttribute('title')).to.equal('example title');
+      // unsupported attributes
+      expect(iframe.getAttribute('longdesc')).to.be.null;
+      expect(iframe.getAttribute('marginwidth')).to.be.null;
+    });
 
-      it('should allow JS and propagate scrolling and have lower priority', function* () {
-        const ampIframe = createAmpIframe(env, {
-          src: iframeSrc,
-          sandbox: 'allow-scripts',
-          width: 320,
-          height: 250,
-          scrolling: 'no',
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        expect(ampIframe.implementation_.getLayoutPriority()).to.equal(
-          LayoutPriority.ADS
-        );
-        expect(ampIframe.getAttribute('sandbox')).to.equal('allow-scripts');
-        return waitForJsInIframe().then(() => {
-          expect(ranJs).to.equal(1);
-          expect(ampIframe.querySelector('i-amphtml-scroll-container')).to.be
-            .null;
-        });
+    // This is temporary.
+    // TODO(aghassemi, #21247)
+    it('should disable allow=autoplay', function* () {
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        width: 100,
+        height: 100,
+        allow: 'microphone; autoplay; camera',
       });
+      yield waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const iframe = ampIframe.querySelector('iframe');
+      expect(iframe.getAttribute('allow')).to.equal(
+        'microphone; autoplay-disabled; camera'
+      );
+    });
 
-      it('should not render at the top', async () => {
-        expectAsyncConsoleError(/position/);
-        const ampIframe = createAmpIframe(
-          env,
-          {
-            src: iframeSrc,
-            sandbox: 'allow-scripts',
-            width: 100,
-            height: 100,
-          },
-          599,
-          1000
-        );
-        await whenUpgradedToCustomElement(ampIframe);
-        await ampIframe.signals().whenSignal(CommonSignals.LOAD_START);
+    it('should default frameborder to 0 if not set', function* () {
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        width: 100,
+        height: 100,
       });
+      yield waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const iframe = ampIframe.querySelector('iframe');
+      expect(iframe.getAttribute('frameborder')).to.equal('0');
+    });
 
-      it('should respect translations', function* () {
-        expectAsyncConsoleError(/position/);
-        const ampIframe = createAmpIframe(
-          env,
-          {
-            src: iframeSrc,
-            sandbox: 'allow-scripts',
-            width: 100,
-            height: 100,
-          },
-          650,
-          1000,
-          -600
-        );
-        yield whenUpgradedToCustomElement(ampIframe);
-        yield ampIframe.signals().whenSignal(CommonSignals.LOAD_START);
+    it('should allow JS and propagate scrolling and have lower priority', async () => {
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        sandbox: 'allow-scripts',
+        width: 320,
+        height: 250,
+        scrolling: 'no',
       });
-
-      it('should render if further than 75% vh away from top', function* () {
-        const ampIframe = createAmpIframe(
-          env,
-          {
-            src: iframeSrc,
-            sandbox: 'allow-scripts',
-            width: 100,
-            height: 100,
-          },
-          75,
-          100
-        );
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        expect(ampIframe.querySelector('iframe')).to.not.be.null;
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl(false);
+      expect(impl.getLayoutPriority()).to.equal(LayoutPriority.ADS);
+      expect(ampIframe.getAttribute('sandbox')).to.equal('allow-scripts');
+      return waitForJsInIframe().then(() => {
+        expect(ranJs).to.equal(1);
+        expect(ampIframe.querySelector('i-amphtml-scroll-container')).to.be
+          .null;
       });
+    });
 
-      it('should deny http', async () => {
-        const asserts = stubUserAsserts();
-        const ampIframe = createAmpIframe(env, {
-          src: 'http://google.com/fpp',
+    it('should not render at the top', async () => {
+      expectAsyncConsoleError(/position/);
+      const ampIframe = createAmpIframe(
+        env,
+        {
+          src: iframeSrc,
           sandbox: 'allow-scripts',
           width: 100,
           height: 100,
-        });
-        await waitForAmpIframeLayoutPromise(doc, ampIframe);
-        expect(asserts).to.throw(/Must start with https/);
-      });
+        },
+        599,
+        1000
+      );
+      await whenUpgradedToCustomElement(ampIframe);
+      await ampIframe.signals().whenSignal(CommonSignals.LOAD_START);
+    });
 
-      it('should allow data-uri', function* () {
-        const dataUri =
-          'data:text/html;charset=utf-8;base64,' +
-          'PHNjcmlwdD5kb2N1bWVudC53cml0ZSgnUiAnICsgZG9jdW1lbnQucmVmZXJyZXIgK' +
-          'yAnLCAnICsgbG9jYXRpb24uaHJlZik8L3NjcmlwdD4=';
-        const ampIframe = createAmpIframe(env, {
-          src: dataUri,
+    it('should respect translations', function* () {
+      expectAsyncConsoleError(/position/);
+      const ampIframe = createAmpIframe(
+        env,
+        {
+          src: iframeSrc,
+          sandbox: 'allow-scripts',
           width: 100,
           height: 100,
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const iframe = ampIframe.querySelector('iframe');
-        expect(iframe.src).to.equal(dataUri);
-        expect(iframe.getAttribute('sandbox')).to.equal('');
-        const scrollWrapper = ampIframe.querySelector(
-          'i-amphtml-scroll-container'
-        );
-        expect(iframe.parentNode).to.equal(scrollWrapper);
-        yield timer.promise(IFRAME_MESSAGE_TIMEOUT);
-        expect(ranJs).to.equal(0);
-      });
+        },
+        650,
+        1000,
+        -600
+      );
+      yield whenUpgradedToCustomElement(ampIframe);
+      yield ampIframe.signals().whenSignal(CommonSignals.LOAD_START);
+    });
 
-      it('should support srcdoc', function* () {
-        const ampIframe = createAmpIframe(env, {
+    it('should render if further than 75% vh away from top', function* () {
+      const ampIframe = createAmpIframe(
+        env,
+        {
+          src: iframeSrc,
+          sandbox: 'allow-scripts',
           width: 100,
           height: 100,
-          sandbox: 'allow-scripts',
-          srcdoc:
-            '<div id="content"><p>௵Z加䅌ਇ☎Èʘغޝ</p></div>' +
-            '<script>try{parent.location.href}catch(e){' +
-            "parent./*OK*/postMessage('loaded-iframe', '*');" +
-            "var c = document.querySelector('#content').innerHTML;" +
-            "parent./*OK*/postMessage('content-iframe:' + c, '*');" +
-            '}</script>',
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const iframe = ampIframe.querySelector('iframe');
-        expect(iframe.src).to.match(/^data\:text\/html;charset=utf-8;base64,/);
-        expect(iframe.getAttribute('srcdoc')).to.be.null;
-        expect(iframe.getAttribute('sandbox')).to.equal('allow-scripts');
-        const scrollWrapper = ampIframe.querySelector(
-          'i-amphtml-scroll-container'
-        );
-        expect(iframe.parentNode).to.equal(scrollWrapper);
-        return waitForJsInIframe().then(() => {
-          expect(ranJs).to.equal(1);
-          expect(content).to.equal('<p>௵Z加䅌ਇ☎Èʘغޝ</p>');
-        });
+        },
+        75,
+        100
+      );
+      yield waitForAmpIframeLayoutPromise(doc, ampIframe);
+      expect(ampIframe.querySelector('iframe')).to.not.be.null;
+    });
+
+    it('should deny http', async () => {
+      const asserts = stubUserAsserts();
+      const ampIframe = createAmpIframe(env, {
+        src: 'http://google.com/fpp',
+        sandbox: 'allow-scripts',
+        width: 100,
+        height: 100,
+      });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      expect(asserts).to.throw(/Must start with https/);
+    });
+
+    it('should allow data-uri', function* () {
+      const dataUri =
+        'data:text/html;charset=utf-8;base64,' +
+        'PHNjcmlwdD5kb2N1bWVudC53cml0ZSgnUiAnICsgZG9jdW1lbnQucmVmZXJyZXIgK' +
+        'yAnLCAnICsgbG9jYXRpb24uaHJlZik8L3NjcmlwdD4=';
+      const ampIframe = createAmpIframe(env, {
+        src: dataUri,
+        width: 100,
+        height: 100,
       });
+      yield waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const iframe = ampIframe.querySelector('iframe');
+      expect(iframe.src).to.equal(dataUri);
+      expect(iframe.getAttribute('sandbox')).to.equal('');
+      const scrollWrapper = ampIframe.querySelector(
+        'i-amphtml-scroll-container'
+      );
+      expect(iframe.parentNode).to.equal(scrollWrapper);
+      yield timer.promise(IFRAME_MESSAGE_TIMEOUT);
+      expect(ranJs).to.equal(0);
+    });
 
+    it('should support srcdoc', function* () {
+      const ampIframe = createAmpIframe(env, {
+        width: 100,
+        height: 100,
+        sandbox: 'allow-scripts',
+        srcdoc:
+          '<div id="content"><p>௵Z加䅌ਇ☎Èʘغޝ</p></div>' +
+          '<script>try{parent.location.href}catch(e){' +
+          "parent./*OK*/postMessage('loaded-iframe', '*');" +
+          "var c = document.querySelector('#content').innerHTML;" +
+          "parent./*OK*/postMessage('content-iframe:' + c, '*');" +
+          '}</script>',
+      });
+      yield waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const iframe = ampIframe.querySelector('iframe');
+      expect(iframe.src).to.match(/^data\:text\/html;charset=utf-8;base64,/);
+      expect(iframe.getAttribute('srcdoc')).to.be.null;
+      expect(iframe.getAttribute('sandbox')).to.equal('allow-scripts');
+      const scrollWrapper = ampIframe.querySelector(
+        'i-amphtml-scroll-container'
+      );
+      expect(iframe.parentNode).to.equal(scrollWrapper);
+      return waitForJsInIframe().then(() => {
+        expect(ranJs).to.equal(1);
+        expect(content).to.equal('<p>௵Z加䅌ਇ☎Èʘغޝ</p>');
+      });
+    });
+
+    describe('allow-same-origin', () => {
       it('should deny srcdoc with allow-same-origin', async () => {
         const asserts = stubUserAsserts();
         const ampIframe = createAmpIframe(env, {
@@ -444,9 +448,9 @@ describes.realWin(
         expect(asserts).to.throw(/amp-iframe-origin-policy.md/);
       });
 
-      it('should deny same origin', () => {
+      it('should deny same origin', async () => {
         const ampIframe = createAmpIframe(env);
-        const impl = ampIframe.implementation_;
+        const impl = await ampIframe.getImpl(false);
         allowConsoleError(() => {
           expect(() => {
             impl.assertSource_(
@@ -534,729 +538,779 @@ describes.realWin(
           }).to.throw(/not allow embedding of frames from ampproject\.\*/);
         });
       });
+    });
 
-      it('should transform source', () => {
-        const ampIframe = createAmpIframe(env);
-        const impl = ampIframe.implementation_;
+    it('should transform source', async () => {
+      const ampIframe = createAmpIframe(env);
+      const impl = await ampIframe.getImpl(false);
 
-        // null -> undefined
-        expect(impl.transformSrc_(null)).to.be.undefined;
+      // null -> undefined
+      expect(impl.transformSrc_(null)).to.be.undefined;
 
-        // data: is unchanged
-        expect(impl.transformSrc_('data:abc')).to.equal('data:abc');
+      // data: is unchanged
+      expect(impl.transformSrc_('data:abc')).to.equal('data:abc');
 
-        // URL with fragment is unchanged.
-        expect(impl.transformSrc_('https://example.com/#1')).to.equal(
-          'https://example.com/#1'
-        );
+      // URL with fragment is unchanged.
+      expect(impl.transformSrc_('https://example.com/#1')).to.equal(
+        'https://example.com/#1'
+      );
+
+      // URL w/o fragment is modified.
+      expect(impl.transformSrc_('https://example.com/')).to.equal(
+        'https://example.com/#amp=1'
+      );
 
-        // URL w/o fragment is modified.
-        expect(impl.transformSrc_('https://example.com/')).to.equal(
-          'https://example.com/#amp=1'
+      // URL with empty fragment is modified.
+      expect(impl.transformSrc_('https://example.com/#')).to.equal(
+        'https://example.com/#amp=1'
+      );
+    });
+
+    it('should listen for resize events', async () => {
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        sandbox: 'allow-scripts allow-same-origin',
+        width: 100,
+        height: 100,
+        resizable: '',
+      });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl(false);
+      return new Promise((resolve, unusedReject) => {
+        impl.updateSize_ = (height, width) => {
+          resolve({height, width});
+        };
+        const iframe = ampIframe.querySelector('iframe');
+        iframe.contentWindow.postMessage(
+          {
+            sentinel: 'amp-test',
+            type: 'requestHeight',
+            height: 217,
+            width: 113,
+          },
+          '*'
         );
+      }).then((res) => {
+        expect(res.height).to.equal(217);
+        expect(res.width).to.equal(113);
+      });
+    });
 
-        // URL with empty fragment is modified.
-        expect(impl.transformSrc_('https://example.com/#')).to.equal(
-          'https://example.com/#amp=1'
+    it('should allow resize events w/o allow-same-origin', async () => {
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        sandbox: 'allow-scripts',
+        width: 100,
+        height: 100,
+        resizable: '',
+      });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl(false);
+      return new Promise((resolve, unusedReject) => {
+        impl.updateSize_ = (height, width) => {
+          resolve({height, width});
+        };
+        const iframe = ampIframe.querySelector('iframe');
+        iframe.contentWindow.postMessage(
+          {
+            sentinel: 'amp-test',
+            type: 'requestHeight',
+            height: 217,
+            width: 113,
+          },
+          '*'
         );
+      }).then((res) => {
+        expect(res.height).to.equal(217);
+        expect(res.width).to.equal(113);
       });
+    });
 
-      it('should listen for resize events', function* () {
-        const ampIframe = createAmpIframe(env, {
-          src: iframeSrc,
-          sandbox: 'allow-scripts allow-same-origin',
-          width: 100,
-          height: 100,
-          resizable: '',
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const impl = ampIframe.implementation_;
-        return new Promise((resolve, unusedReject) => {
-          impl.updateSize_ = (height, width) => {
-            resolve({height, width});
-          };
-          const iframe = ampIframe.querySelector('iframe');
-          iframe.contentWindow.postMessage(
-            {
-              sentinel: 'amp-test',
-              type: 'requestHeight',
-              height: 217,
-              width: 113,
-            },
-            '*'
-          );
-        }).then((res) => {
-          expect(res.height).to.equal(217);
-          expect(res.width).to.equal(113);
-        });
+    it('should allow resize events w/ srcdoc', async () => {
+      const srcdoc = `
+      <!doctype html>
+      <html>
+       <body>
+        <script>
+          setTimeout(() => {
+            window.parent.postMessage({
+              sentinel: 'amp',
+              type: 'embed-size',
+              height: 200,
+              width: 300,
+            }, '*');
+          }, 100);
+        </script>
+       </body>
+      </html>
+    `;
+      const ampIframe = createAmpIframe(env, {
+        srcdoc,
+        sandbox: 'allow-scripts',
+        width: 100,
+        height: 100,
+        resizable: '',
+      });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl(false);
+      return new Promise((resolve, unusedReject) => {
+        impl.updateSize_ = (height, width) => {
+          resolve({height, width});
+        };
+      }).then((res) => {
+        expect(res.height).to.equal(200);
+        expect(res.width).to.equal(300);
       });
+    });
 
-      it('should allow resize events w/o allow-same-origin', function* () {
-        const ampIframe = createAmpIframe(env, {
-          src: iframeSrc,
-          sandbox: 'allow-scripts',
-          width: 100,
-          height: 100,
-          resizable: '',
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const impl = ampIframe.implementation_;
-        return new Promise((resolve, unusedReject) => {
-          impl.updateSize_ = (height, width) => {
-            resolve({height, width});
-          };
-          const iframe = ampIframe.querySelector('iframe');
-          iframe.contentWindow.postMessage(
-            {
-              sentinel: 'amp-test',
-              type: 'requestHeight',
-              height: 217,
-              width: 113,
-            },
-            '*'
-          );
-        }).then((res) => {
-          expect(res.height).to.equal(217);
-          expect(res.width).to.equal(113);
-        });
+    it('should only error once for embed-size requests when non-resizable', async () => {
+      expectAsyncConsoleError(/Ignoring embed-size request/);
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        sandbox: 'allow-scripts',
+        width: 100,
+        height: 100,
       });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      console.error.restore();
+      const userError = env.sandbox.spy(console, 'error');
+
+      const impl = await ampIframe.getImpl(false);
+      impl.updateSize_(217, 114);
+      expect(impl.hasErroredEmbedSize_).to.be.true;
+      impl.updateSize_(328, 225);
+      impl.updateSize_(439, 336);
+      expect(userError).to.have.callCount(1);
+    });
 
-      it('should allow resize events w/ srcdoc', function* () {
-        const srcdoc = `
-        <!doctype html>
-        <html>
-         <body>
-          <script>
-            setTimeout(() => {
-              window.parent.postMessage({
-                sentinel: 'amp',
-                type: 'embed-size',
-                height: 200,
-                width: 300,
-              }, '*');
-            }, 100);
-          </script>
-         </body>
-        </html>
-      `;
-        const ampIframe = createAmpIframe(env, {
-          srcdoc,
-          sandbox: 'allow-scripts',
-          width: 100,
-          height: 100,
-          resizable: '',
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const impl = ampIframe.implementation_;
-        return new Promise((resolve, unusedReject) => {
-          impl.updateSize_ = (height, width) => {
-            resolve({height, width});
-          };
-        }).then((res) => {
-          expect(res.height).to.equal(200);
-          expect(res.width).to.equal(300);
-        });
+    it('should resize amp-iframe', async () => {
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        sandbox: 'allow-scripts',
+        width: 100,
+        height: 100,
+        resizable: '',
       });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl(false);
+      const attemptChangeSize = env.sandbox.spy(impl, 'attemptChangeSize');
+      impl.updateSize_(217, '114' /* be tolerant to string number */);
+      expect(attemptChangeSize).to.be.calledWith(217, 114);
+    });
 
-      it('should only error once for embed-size requests when non-resizable', function* () {
-        expectAsyncConsoleError(/Ignoring embed-size request/);
-        const ampIframe = createAmpIframe(env, {
-          src: iframeSrc,
-          sandbox: 'allow-scripts',
-          width: 100,
-          height: 100,
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        console.error.restore();
-        const userError = env.sandbox.spy(console, 'error');
-
-        const impl = ampIframe.implementation_;
-        impl.updateSize_(217, 114);
-        expect(impl.hasErroredEmbedSize_).to.be.true;
-        impl.updateSize_(328, 225);
-        impl.updateSize_(439, 336);
-        expect(userError).to.have.callCount(1);
+    it('should hide overflow element after resize', async function () {
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        sandbox: 'allow-scripts',
+        width: 100,
+        height: 100,
+        resizable: '',
       });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl();
+      const overflowElement = impl.getOverflowElement();
+      overflowElement.classList.toggle('amp-visible', true);
+      impl.updateSize_(217, '114' /* be tolerant to string number */);
+      await timer.promise(IFRAME_MESSAGE_TIMEOUT);
+      expect(overflowElement.classList.contains('amp-visible')).to.be.false;
+    });
 
-      it('should resize amp-iframe', function* () {
-        const ampIframe = createAmpIframe(env, {
-          src: iframeSrc,
-          sandbox: 'allow-scripts',
-          width: 100,
-          height: 100,
-          resizable: '',
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const impl = ampIframe.implementation_;
-        const attemptChangeSize = env.sandbox.spy(impl, 'attemptChangeSize');
-        impl.updateSize_(217, '114' /* be tolerant to string number */);
-        expect(attemptChangeSize).to.be.calledWith(217, 114);
+    it('should resize amp-iframe when only height is provided', async () => {
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        sandbox: 'allow-scripts',
+        width: 100,
+        height: 100,
+        resizable: '',
       });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl(false);
+      const attemptChangeSize = env.sandbox.spy(impl, 'attemptChangeSize');
+      impl.updateSize_(217);
+      expect(attemptChangeSize).to.be.calledOnce;
+      expect(attemptChangeSize.firstCall.args[0]).to.equal(217);
+      expect(attemptChangeSize.firstCall.args[1]).to.be.undefined;
+    });
 
-      it('should resize amp-iframe when only height is provided', function* () {
-        const ampIframe = createAmpIframe(env, {
-          src: iframeSrc,
-          sandbox: 'allow-scripts',
-          width: 100,
-          height: 100,
-          resizable: '',
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const impl = ampIframe.implementation_;
-        const attemptChangeSize = env.sandbox.spy(impl, 'attemptChangeSize');
-        impl.updateSize_(217);
-        expect(attemptChangeSize).to.be.calledOnce;
-        expect(attemptChangeSize.firstCall.args[0]).to.equal(217);
-        expect(attemptChangeSize.firstCall.args[1]).to.be.undefined;
+    it('should not resize amp-iframe if request height is small', async () => {
+      expectAsyncConsoleError(/resize height is less than 100px/);
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        sandbox: 'allow-scripts',
+        width: 100,
+        height: 100,
+        resizable: '',
       });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl(false);
+      const attemptChangeSize = env.sandbox.spy(impl, 'attemptChangeSize');
+      impl.updateSize_(50, 114);
+      expect(attemptChangeSize).to.have.not.been.called;
+    });
 
-      it('should not resize amp-iframe if request height is small', function* () {
-        expectAsyncConsoleError(/resize height is less than 100px/);
-        const ampIframe = createAmpIframe(env, {
-          src: iframeSrc,
-          sandbox: 'allow-scripts',
-          width: 100,
-          height: 100,
-          resizable: '',
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const impl = ampIframe.implementation_;
-        const attemptChangeSize = env.sandbox.spy(impl, 'attemptChangeSize');
-        impl.updateSize_(50, 114);
-        expect(attemptChangeSize).to.have.not.been.called;
+    it('should not resize amp-iframe if it is non-resizable', async () => {
+      expectAsyncConsoleError(/iframe is not resizable/);
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        sandbox: 'allow-scripts',
+        width: 100,
+        height: 100,
       });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl(false);
+      const attemptChangeSize = env.sandbox.spy(impl, 'attemptChangeSize');
+      impl.updateSize_(217, 114);
+      expect(attemptChangeSize).to.have.not.been.called;
+    });
 
-      it('should not resize amp-iframe if it is non-resizable', function* () {
-        expectAsyncConsoleError(/iframe is not resizable/);
-        const ampIframe = createAmpIframe(env, {
-          src: iframeSrc,
-          sandbox: 'allow-scripts',
-          width: 100,
-          height: 100,
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const impl = ampIframe.implementation_;
-        const attemptChangeSize = env.sandbox.spy(impl, 'attemptChangeSize');
-        impl.updateSize_(217, 114);
-        expect(attemptChangeSize).to.have.not.been.called;
+    it('should listen for embed-ready event', function* () {
+      const activateIframeSpy_ = env.sandbox./*OK*/ spy(
+        AmpIframe.prototype,
+        'activateIframe_'
+      );
+      const ampIframe = createAmpIframe(env, {
+        src: clickableIframeSrc,
+        sandbox: 'allow-scripts allow-same-origin',
+        width: 480,
+        height: 360,
+        poster: 'https://i.ytimg.com/vi/cMcCTVAFBWM/hqdefault.jpg',
       });
+      yield waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const iframe = ampIframe.querySelector('iframe');
+      yield timer.promise(100);
+      expect(iframe.style.zIndex).to.equal('0');
+      expect(activateIframeSpy_).to.have.callCount(2);
+    });
 
-      it('should listen for embed-ready event', function* () {
-        const activateIframeSpy_ = window.sandbox./*OK*/ spy(
-          AmpIframe.prototype,
-          'activateIframe_'
-        );
-        const ampIframe = createAmpIframe(env, {
-          src: clickableIframeSrc,
-          sandbox: 'allow-scripts allow-same-origin',
-          width: 480,
-          height: 360,
-          poster: 'https://i.ytimg.com/vi/cMcCTVAFBWM/hqdefault.jpg',
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const iframe = ampIframe.querySelector('iframe');
-        yield timer.promise(100);
-        expect(iframe.style.zIndex).to.equal('0');
-        expect(activateIframeSpy_).to.have.callCount(2);
+    it('should detect non-tracking iframe', async () => {
+      const ampIframe = createAmpIframe(env, {
+        src: clickableIframeSrc,
+        sandbox: 'allow-scripts allow-same-origin',
+        width: 11,
+        height: 11,
+        poster: 'https://i.ytimg.com/vi/cMcCTVAFBWM/hqdefault.jpg',
       });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl(false);
+      expect(impl.looksLikeTrackingIframe_()).to.be.false;
+    });
 
-      it('should detect non-tracking iframe', function* () {
-        const ampIframe = createAmpIframe(env, {
-          src: clickableIframeSrc,
-          sandbox: 'allow-scripts allow-same-origin',
-          width: 11,
-          height: 11,
-          poster: 'https://i.ytimg.com/vi/cMcCTVAFBWM/hqdefault.jpg',
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const impl = ampIframe.implementation_;
-        expect(impl.looksLikeTrackingIframe_()).to.be.false;
+    it('should detect tracking iframes', async () => {
+      expectAsyncConsoleError(/Only 1 analytics\/tracking iframe allowed/);
+      const ampIframe1 = createAmpIframe(env, {
+        src: clickableIframeSrc,
+        sandbox: 'allow-scripts allow-same-origin',
+        width: 5,
+        height: 5,
+        poster: 'https://i.ytimg.com/vi/cMcCTVAFBWM/hqdefault.jpg',
       });
+      const ampIframe2 = createAmpIframe(env, {
+        src: clickableIframeSrc,
+        sandbox: 'allow-scripts allow-same-origin',
+        width: 10,
+        height: 10,
+        poster: 'https://i.ytimg.com/vi/cMcCTVAFBWM/hqdefault.jpg',
+      });
+      const ampIframe3 = createAmpIframe(env, {
+        src: clickableIframeSrc,
+        sandbox: 'allow-scripts allow-same-origin',
+        width: 100,
+        height: 100,
+        poster: 'https://i.ytimg.com/vi/cMcCTVAFBWM/hqdefault.jpg',
+      });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe1);
+      await waitForAmpIframeLayoutPromise(doc, ampIframe2);
+      await waitForAmpIframeLayoutPromise(doc, ampIframe3);
+      // 5*5
+      const impl1 = await ampIframe1.getImpl(false);
+      // 10*10
+      const impl2 = await ampIframe2.getImpl(false);
+      // 100*100
+      const impl3 = await ampIframe3.getImpl(false);
+      // appended amp-iframe 5x5
+      expect(impl1.looksLikeTrackingIframe_()).to.be.true;
+      // appended amp-iframe 10x10
+      expect(impl2.looksLikeTrackingIframe_()).to.be.true;
+      expect(impl2.getLayoutPriority()).to.equal(LayoutPriority.METADATA);
+      // appended amp-iframe 100x100
+      expect(impl3.looksLikeTrackingIframe_()).to.be.false;
+      expect(impl3.getLayoutPriority()).to.equal(LayoutPriority.CONTENT);
+      await Services.timerFor(env.win).promise(21);
+      expect(doc.querySelectorAll('[amp-removed]')).to.have.length(1);
+      expect(doc.querySelectorAll('iframe')).to.have.length(1);
+      expect(ampIframe3.querySelector('iframe')).to.not.be.null;
+    });
 
-      it('should detect tracking iframes', function* () {
-        expectAsyncConsoleError(/Only 1 analytics\/tracking iframe allowed/);
-        const ampIframe1 = createAmpIframe(env, {
-          src: clickableIframeSrc,
-          sandbox: 'allow-scripts allow-same-origin',
+    it('should not detect traking iframe in amp container', async () => {
+      expectAsyncConsoleError(/Only 1 analytics\/tracking iframe allowed/);
+      const ampIframeRealTracking = createAmpIframe(env, {
+        src: iframeSrc,
+        width: 5,
+        height: 5,
+      });
+      const ampIframeInLightbox = createAmpIframe(
+        env,
+        {
+          src: iframeSrc,
           width: 5,
           height: 5,
-          poster: 'https://i.ytimg.com/vi/cMcCTVAFBWM/hqdefault.jpg',
-        });
-        const ampIframe2 = createAmpIframe(env, {
-          src: clickableIframeSrc,
+        },
+        undefined,
+        undefined,
+        undefined,
+        true
+      );
+      const ampIframe = createAmpIframe(env);
+      await waitForAmpIframeLayoutPromise(doc, ampIframeRealTracking);
+      await waitForAmpIframeLayoutPromise(doc, ampIframeInLightbox);
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const implIframe = await ampIframe.getImpl(false);
+      const implIframeRealTracking = await ampIframeRealTracking.getImpl(false);
+      const implIframeInLightbox = await ampIframeInLightbox.getImpl(false);
+
+      expect(implIframe.looksLikeTrackingIframe_()).to.be.false;
+      expect(implIframeRealTracking.looksLikeTrackingIframe_()).to.be.true;
+      expect(implIframeInLightbox.looksLikeTrackingIframe_()).to.be.false;
+    });
+
+    it('should correctly classify ads', () => {
+      function e(width, height) {
+        return {
+          getLayoutSize() {
+            return {width, height};
+          },
+        };
+      }
+      expect(isAdLike(e(300, 250))).to.be.true;
+      expect(isAdLike(e(320, 270))).to.be.true;
+      expect(isAdLike(e(299, 249))).to.be.false;
+      expect(isAdLike(e(320, 100))).to.be.true;
+      expect(isAdLike(e(335, 100))).to.be.true;
+      expect(isAdLike(e(341, 100))).to.be.false;
+    });
+
+    it('should not render fixed ad', function* () {
+      expectAsyncConsoleError(/not used for displaying fixed ad/);
+      const ampIframe = createAmpIframe(
+        env,
+        {
+          src: iframeSrc,
           sandbox: 'allow-scripts allow-same-origin',
-          width: 10,
-          height: 10,
-          poster: 'https://i.ytimg.com/vi/cMcCTVAFBWM/hqdefault.jpg',
-        });
-        const ampIframe3 = createAmpIframe(env, {
-          src: clickableIframeSrc,
+          width: 300,
+          height: 250,
+          position: 'fixed',
+        },
+        0
+      );
+      yield whenUpgradedToCustomElement(ampIframe);
+      yield ampIframe.signals().whenSignal(CommonSignals.LOAD_START);
+    });
+
+    it('should not cache intersection box', async () => {
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        sandbox: 'allow-scripts allow-same-origin',
+        width: 300,
+        height: 250,
+      });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl(false);
+      const stub = env.sandbox.stub(impl, 'getLayoutBox');
+      const box = {
+        top: 100,
+        bottom: 200,
+        left: 0,
+        right: 100,
+        width: 100,
+        height: 100,
+      };
+      stub.returns(box);
+
+      impl.onLayoutMeasure();
+      const intersection = impl.getIntersectionElementLayoutBox();
+      // Simulate a fixed position element "moving" 100px by scrolling down
+      // the page.
+      box.top += 100;
+      box.bottom += 100;
+      const newIntersection = impl.getIntersectionElementLayoutBox();
+      expect(newIntersection).not.to.deep.equal(intersection);
+      expect(newIntersection.top).to.equal(intersection.top + 100);
+      expect(newIntersection.width).to.equal(300);
+      expect(newIntersection.height).to.equal(250);
+    });
+
+    it('should propagate `src` when container attribute is mutated', async () => {
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        width: 100,
+        height: 100,
+      });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl(false);
+      const iframe = ampIframe.querySelector('iframe');
+      const newSrc = 'https://foo.bar';
+      ampIframe.setAttribute('src', newSrc);
+      impl.mutatedAttributesCallback({src: newSrc});
+      expect(impl.iframeSrc).to.contain(newSrc);
+      expect(iframe.getAttribute('src')).to.contain(newSrc);
+    });
+
+    describe('consent-data message', () => {
+      let impl;
+      let iframe;
+
+      beforeEach(async () => {
+        const element = createAmpIframe(env, {
+          src: iframeSrc,
           sandbox: 'allow-scripts allow-same-origin',
           width: 100,
           height: 100,
-          poster: 'https://i.ytimg.com/vi/cMcCTVAFBWM/hqdefault.jpg',
         });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe1);
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe2);
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe3);
-        // 5*5
-        const impl1 = ampIframe1.implementation_;
-        // 10*10
-        const impl2 = ampIframe2.implementation_;
-        // 100*100
-        const impl3 = ampIframe3.implementation_;
-        // appended amp-iframe 5x5
-        expect(impl1.looksLikeTrackingIframe_()).to.be.true;
-        // appended amp-iframe 10x10
-        expect(impl2.looksLikeTrackingIframe_()).to.be.true;
-        expect(impl2.getLayoutPriority()).to.equal(LayoutPriority.METADATA);
-        // appended amp-iframe 100x100
-        expect(impl3.looksLikeTrackingIframe_()).to.be.false;
-        expect(impl3.getLayoutPriority()).to.equal(LayoutPriority.CONTENT);
-        yield Services.timerFor(env.win).promise(21);
-        expect(doc.querySelectorAll('[amp-removed]')).to.have.length(1);
-        expect(doc.querySelectorAll('iframe')).to.have.length(1);
-        expect(ampIframe3.querySelector('iframe')).to.not.be.null;
+
+        impl = await element.getImpl();
+        env.sandbox.stub(impl, 'sendConsentDataToIframe_');
+
+        await waitForAmpIframeLayoutPromise(doc, element);
+
+        iframe = impl.element.querySelector('iframe');
       });
 
-      it('should not detect traking iframe in amp container', function* () {
-        expectAsyncConsoleError(/Only 1 analytics\/tracking iframe allowed/);
-        const ampIframeRealTracking = createAmpIframe(env, {
-          src: iframeSrc,
-          width: 5,
-          height: 5,
-        });
-        const ampIframeInLightbox = createAmpIframe(
-          env,
+      it('is sent', async () => {
+        const consentString = 'foo-consentString';
+        const consentMetadata = 'bar-consentMetadata';
+        const consentPolicyState = 'baz-consentPolicyState';
+        const consentPolicySharedData = 'foo-consentPolicySharedData';
+
+        env.sandbox.stub(Services, 'consentPolicyServiceForDocOrNull').returns(
+          Promise.resolve({
+            getConsentMetadataInfo: () => Promise.resolve(consentMetadata),
+            getConsentStringInfo: () => Promise.resolve(consentString),
+            whenPolicyResolved: () => Promise.resolve(consentPolicyState),
+            getMergedSharedData: () => Promise.resolve(consentPolicySharedData),
+          })
+        );
+
+        iframe.contentWindow.postMessage(
           {
-            src: iframeSrc,
-            width: 5,
-            height: 5,
+            sentinel: 'amp',
+            type: 'requestSendConsentState',
           },
-          undefined,
-          undefined,
-          undefined,
-          true
+          '*'
         );
-        const ampIframe = createAmpIframe(env);
-        yield waitForAmpIframeLayoutPromise(doc, ampIframeRealTracking);
-        yield waitForAmpIframeLayoutPromise(doc, ampIframeInLightbox);
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-
-        expect(ampIframeRealTracking.implementation_.looksLikeTrackingIframe_())
-          .to.be.true;
-        expect(ampIframe.implementation_.looksLikeTrackingIframe_()).to.be
-          .false;
-        expect(ampIframeInLightbox.implementation_.looksLikeTrackingIframe_())
-          .to.be.false;
-      });
 
-      it('should correctly classify ads', () => {
-        function e(width, height) {
-          return {
-            getLayoutBox() {
-              return {width, height};
-            },
-          };
-        }
-        expect(isAdLike(e(300, 250))).to.be.true;
-        expect(isAdLike(e(320, 270))).to.be.true;
-        expect(isAdLike(e(299, 249))).to.be.false;
-        expect(isAdLike(e(320, 100))).to.be.true;
-        expect(isAdLike(e(335, 100))).to.be.true;
-        expect(isAdLike(e(341, 100))).to.be.false;
+        await macroTask();
+        await macroTask();
+
+        expect(
+          impl.sendConsentDataToIframe_.withArgs(
+            env.sandbox.match.any, // source
+            env.sandbox.match.any, // origin
+            env.sandbox.match({
+              sentinel: 'amp',
+              type: 'consent-data',
+              consentString,
+              consentMetadata,
+              consentPolicyState,
+              consentPolicySharedData,
+            })
+          )
+        ).to.have.been.calledOnce;
       });
 
-      it('should not render fixed ad', function* () {
-        expectAsyncConsoleError(/not used for displaying fixed ad/);
-        const ampIframe = createAmpIframe(
-          env,
+      it('is sent with empty fields when consent service not available', async () => {
+        env.sandbox
+          .stub(Services, 'consentPolicyServiceForDocOrNull')
+          .returns(Promise.resolve(null));
+
+        iframe.contentWindow.postMessage(
           {
-            src: iframeSrc,
-            sandbox: 'allow-scripts allow-same-origin',
-            width: 300,
-            height: 250,
-            position: 'fixed',
+            sentinel: 'amp',
+            type: 'requestSendConsentState',
           },
-          0
+          '*'
         );
-        yield whenUpgradedToCustomElement(ampIframe);
-        yield ampIframe.signals().whenSignal(CommonSignals.LOAD_START);
+
+        await macroTask();
+
+        expect(
+          impl.sendConsentDataToIframe_.withArgs(
+            env.sandbox.match.any, // source
+            env.sandbox.match.any, // origin
+            env.sandbox.match({
+              sentinel: 'amp',
+              type: 'consent-data',
+              consentString: null,
+              consentMetadata: null,
+              consentPolicyState: null,
+              consentPolicySharedData: null,
+            })
+          )
+        ).to.have.been.calledOnce;
       });
+    });
 
-      it('should not cache intersection box', function* () {
-        const ampIframe = createAmpIframe(env, {
-          src: iframeSrc,
-          sandbox: 'allow-scripts allow-same-origin',
-          width: 300,
-          height: 250,
-        });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const impl = ampIframe.implementation_;
-        const stub = env.sandbox.stub(impl, 'getLayoutBox');
-        const box = {
-          top: 100,
-          bottom: 200,
-          left: 0,
-          right: 100,
-          width: 100,
-          height: 100,
-        };
-        stub.returns(box);
-
-        impl.onLayoutMeasure();
-        const intersection = impl.getIntersectionElementLayoutBox();
-        // Simulate a fixed position element "moving" 100px by scrolling down
-        // the page.
-        box.top += 100;
-        box.bottom += 100;
-        const newIntersection = impl.getIntersectionElementLayoutBox();
-        expect(newIntersection).not.to.deep.equal(intersection);
-        expect(newIntersection.top).to.equal(intersection.top + 100);
-        expect(newIntersection.width).to.equal(300);
-        expect(newIntersection.height).to.equal(250);
+    it('should propagate `title` when container attribute is mutated', async () => {
+      const ampIframe = createAmpIframe(env, {
+        src: iframeSrc,
+        width: 100,
+        height: 100,
+        title: 'foo',
       });
+      await waitForAmpIframeLayoutPromise(doc, ampIframe);
+      const impl = await ampIframe.getImpl(false);
+      const iframe = ampIframe.querySelector('iframe');
+      const newTitle = 'bar';
+      ampIframe.setAttribute('title', newTitle);
+      impl.mutatedAttributesCallback({title: newTitle});
+      expect(impl.iframe_.title).to.equal(newTitle);
+      expect(iframe.getAttribute('title')).to.equal(newTitle);
+    });
 
-      it('should propagate `src` when container attribute is mutated', function* () {
+    describe('pause', () => {
+      it('should have unlayoutOnPause', async () => {
         const ampIframe = createAmpIframe(env, {
           src: iframeSrc,
           width: 100,
           height: 100,
         });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const impl = ampIframe.implementation_;
-        const iframe = ampIframe.querySelector('iframe');
-        const newSrc = 'https://foo.bar';
-        ampIframe.setAttribute('src', newSrc);
-        impl.mutatedAttributesCallback({src: newSrc});
-        expect(impl.iframeSrc).to.contain(newSrc);
-        expect(iframe.getAttribute('src')).to.contain(newSrc);
+        const impl = await ampIframe.getImpl(false);
+        await waitForAmpIframeLayoutPromise(doc, ampIframe);
+        expect(ampIframe.querySelector('iframe')).to.exist;
+        expect(impl.unlayoutOnPause()).to.be.true;
+
+        ampIframe.pause();
+        expect(ampIframe.querySelector('iframe')).to.not.exist;
       });
 
-      it('should propagate `title` when container attribute is mutated', function* () {
+      it('should unlayout on pause when loses size', async () => {
         const ampIframe = createAmpIframe(env, {
           src: iframeSrc,
           width: 100,
           height: 100,
-          title: 'foo',
         });
-        yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-        const impl = ampIframe.implementation_;
-        const iframe = ampIframe.querySelector('iframe');
-        const newTitle = 'bar';
-        ampIframe.setAttribute('title', newTitle);
-        impl.mutatedAttributesCallback({title: newTitle});
-        expect(impl.iframe_.title).to.equal(newTitle);
-        expect(iframe.getAttribute('title')).to.equal(newTitle);
+        await ampIframe.getImpl(false);
+        env.sandbox./*OK*/ stub(ampIframe, 'pause');
+        await waitForAmpIframeLayoutPromise(doc, ampIframe);
+        expect(ampIframe.pause).to.not.be.called;
+
+        // First send "size" event and then "no size".
+        resizeObserverStub.notifySync({
+          target: ampIframe,
+          borderBoxSize: [{inlineSize: 10, blockSize: 100}],
+        });
+        resizeObserverStub.notifySync({
+          target: ampIframe,
+          borderBoxSize: [{inlineSize: 0, blockSize: 0}],
+        });
+        expect(ampIframe.pause).to.be.calledOnce;
       });
+    });
 
-      describe('throwIfCannotNavigate()', () => {
-        it('should do nothing if top navigation is allowed', function* () {
-          const ampIframe = createAmpIframe(env, {
-            src: iframeSrc,
-            sandbox: 'allow-scripts allow-same-origin allow-top-navigation',
-            width: 300,
-            height: 250,
-          });
-          yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-          const impl = ampIframe.implementation_;
-          // Should be allowed if `allow-top-navigation` is set.
-          expect(() => impl.throwIfCannotNavigate()).to.not.throw();
+    describe('throwIfCannotNavigate()', () => {
+      it('should do nothing if top navigation is allowed', async () => {
+        const ampIframe = createAmpIframe(env, {
+          src: iframeSrc,
+          sandbox: 'allow-scripts allow-same-origin allow-top-navigation',
+          width: 300,
+          height: 250,
         });
+        await waitForAmpIframeLayoutPromise(doc, ampIframe);
+        const impl = await ampIframe.getImpl(false);
+        // Should be allowed if `allow-top-navigation` is set.
+        expect(() => impl.throwIfCannotNavigate()).to.not.throw();
+      });
 
-        it('should throw error if top navigation is not allowed', function* () {
-          const ampIframe = createAmpIframe(env, {
-            src: iframeSrc,
-            sandbox: 'allow-scripts allow-same-origin',
-            width: 300,
-            height: 250,
-          });
-          yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-          const impl = ampIframe.implementation_;
-          // Should be allowed if `allow-top-navigation` is set.
-          expect(() => impl.throwIfCannotNavigate()).to.throw(
-            /allow-top-navigation/
-          );
+      it('should throw error if top navigation is not allowed', async () => {
+        const ampIframe = createAmpIframe(env, {
+          src: iframeSrc,
+          sandbox: 'allow-scripts allow-same-origin',
+          width: 300,
+          height: 250,
         });
+        await waitForAmpIframeLayoutPromise(doc, ampIframe);
+        const impl = await ampIframe.getImpl(false);
+        // Should be allowed if `allow-top-navigation` is set.
+        expect(() => impl.throwIfCannotNavigate()).to.throw(
+          /allow-top-navigation/
+        );
       });
+    });
 
-      describe('two-way messaging', function () {
-        let messagingSrc;
+    describe('two-way messaging', function () {
+      let messagingSrc;
 
-        beforeEach(() => {
-          messagingSrc =
-            'http://iframe.localhost:' +
-            location.port +
-            '/test/fixtures/served/iframe-messaging.html';
-          toggleExperiment(win, 'iframe-messaging', true, true);
-        });
+      beforeEach(() => {
+        messagingSrc =
+          'http://iframe.localhost:' +
+          location.port +
+          '/test/fixtures/served/iframe-messaging.html';
+        toggleExperiment(win, 'iframe-messaging', true, true);
+      });
 
-        afterEach(() => {
-          toggleExperiment(win, 'iframe-messaging', false, true);
-        });
+      afterEach(() => {
+        toggleExperiment(win, 'iframe-messaging', false, true);
+      });
 
-        it('should support "postMessage" action', function* () {
-          const ampIframe = createAmpIframe(env, {
-            src: messagingSrc,
-            sandbox: 'allow-scripts allow-same-origin',
-            width: 100,
-            height: 100,
-          });
-          yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-
-          const impl = ampIframe.implementation_;
-          impl.executeAction({
-            method: 'postMessage',
-            args: 'foo-123',
-            satisfiesTrust: () => true,
-          });
-
-          yield waitForJsInIframe(1);
-          expect(content).to.equal('foo-123');
+      it('should support "postMessage" action', async () => {
+        const ampIframe = createAmpIframe(env, {
+          src: messagingSrc,
+          sandbox: 'allow-scripts allow-same-origin',
+          width: 100,
+          height: 100,
         });
+        await waitForAmpIframeLayoutPromise(doc, ampIframe);
 
-        it('should not allow "postMessage" on srcdoc amp-iframe', function* () {
-          const ampIframe = createAmpIframe(env, {
-            srcdoc:
-              '<script>addEventListener("message", e => {' +
-              '  parent./*OK*/postMessage("content-iframe:" + e.data, "*");' +
-              '  parent./*OK*/postMessage("loaded-iframe", "*");' +
-              '});</script>',
-            sandbox: 'allow-scripts',
-            width: 100,
-            height: 100,
-          });
-          yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-
-          const userError = env.sandbox.stub(user(), 'error');
-          const addEventListener = env.sandbox.stub(win, 'addEventListener');
-          ampIframe.implementation_.executeAction({
-            method: 'postMessage',
-            args: 'foo-123',
-            satisfiesTrust: () => true,
-          });
-          expect(userError).to.be.calledOnce;
-          expect(userError).to.be.calledWithMatch(
-            'amp-iframe',
-            /"postMessage" action is only allowed with "src"/
-          );
-
-          yield timer.promise(IFRAME_MESSAGE_TIMEOUT);
-          // The iframe's <script> will only post 'loaded-frame' on receipt of
-          // a message from the parent, which should be disallowed above.
-          expect(ranJs).to.equal(0);
-          // Normally, amp-iframe sets up a listener for "message" events
-          // for iframe -> host messaging, but not if targetOrigin_ is invalid.
-          expect(addEventListener).to.not.be.called;
+        const impl = await ampIframe.getImpl(false);
+        impl.executeAction({
+          method: 'postMessage',
+          args: 'foo-123',
+          satisfiesTrust: () => true,
         });
 
-        it('should receive "message" events from <iframe>', function* () {
-          const ampIframe = createAmpIframe(env, {
-            src: messagingSrc,
-            sandbox: 'allow-scripts allow-same-origin',
-            width: 100,
-            height: 100,
-          });
-          yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-
-          const userError = env.sandbox.stub(user(), 'error');
-          const actions = {trigger: env.sandbox.spy()};
-          env.sandbox.stub(Services, 'actionServiceForDoc').returns(actions);
-
-          const impl = ampIframe.implementation_;
-          impl.executeAction({
-            method: 'postMessage',
-            args: 'foo-123',
-            satisfiesTrust: () => true,
-          });
-
-          yield waitForJsInIframe(1);
-          expect(actions.trigger).to.not.be.called;
-          expect(userError).calledWithMatch(
-            'amp-iframe',
-            /may only be triggered from a user gesture/
-          );
+        await waitForJsInIframe(1);
+        expect(content).to.equal('foo-123');
+      });
 
-          env.sandbox.stub(impl, 'isUserGesture_').returns(true);
-          impl.executeAction({
-            method: 'postMessage',
-            args: 'bar-456',
-            satisfiesTrust: () => true,
-          });
-
-          yield waitForJsInIframe(2);
-          // Once for 'loaded-iframe' and once for 'content-iframe'.
-          expect(actions.trigger).to.be.calledTwice;
-          const eventMatcher = env.sandbox.match({
-            type: 'amp-iframe:message',
-            detail: env.sandbox.match({data: 'content-iframe:bar-456'}),
-          });
-          expect(actions.trigger).to.be.calledWith(
-            ampIframe,
-            'message',
-            eventMatcher,
-            ActionTrust.HIGH
-          );
+      it('should not allow "postMessage" on srcdoc amp-iframe', async () => {
+        const ampIframe = createAmpIframe(env, {
+          srcdoc:
+            '<script>addEventListener("message", e => {' +
+            '  parent./*OK*/postMessage("content-iframe:" + e.data, "*");' +
+            '  parent./*OK*/postMessage("loaded-iframe", "*");' +
+            '});</script>',
+          sandbox: 'allow-scripts',
+          width: 100,
+          height: 100,
         });
-
-        it('should listen for Pym.js height event', function* () {
-          const ampIframe = createAmpIframe(env, {
-            src: iframeSrc,
-            sandbox: 'allow-scripts allow-same-origin',
-            width: 200,
-            height: 200,
-            resizable: '',
-          });
-          yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-          const impl = ampIframe.implementation_;
-          return new Promise((resolve, unusedReject) => {
-            impl.updateSize_ = (height, width) => {
-              resolve({height, width});
-            };
-            const iframe = ampIframe.querySelector('iframe');
-            iframe.contentWindow.postMessage(
-              {
-                sentinel: 'amp-test',
-                type: 'requestPymjsHeight',
-                height: 234,
-              },
-              '*'
-            );
-          }).then((res) => {
-            expect(res.height).to.equal(234);
-            expect(res.width).to.be.an('undefined');
-          });
+        await waitForAmpIframeLayoutPromise(doc, ampIframe);
+        const impl = await ampIframe.getImpl(false);
+
+        const userError = env.sandbox.stub(user(), 'error');
+        const addEventListener = env.sandbox.stub(win, 'addEventListener');
+        impl.executeAction({
+          method: 'postMessage',
+          args: 'foo-123',
+          satisfiesTrust: () => true,
         });
+        expect(userError).to.be.calledOnce;
+        expect(userError).to.be.calledWithMatch(
+          'amp-iframe',
+          /"postMessage" action is only allowed with "src"/
+        );
 
-        it('should listen for Pym.js width event', function* () {
-          const ampIframe = createAmpIframe(env, {
-            src: iframeSrc,
-            sandbox: 'allow-scripts allow-same-origin',
-            width: 200,
-            height: 200,
-            resizable: '',
-          });
-          yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-          const impl = ampIframe.implementation_;
-          return new Promise((resolve, unusedReject) => {
-            impl.updateSize_ = (height, width) => {
-              resolve({height, width});
-            };
-            const iframe = ampIframe.querySelector('iframe');
-            iframe.contentWindow.postMessage(
-              {
-                sentinel: 'amp-test',
-                type: 'requestPymjsWidth',
-                width: 345,
-              },
-              '*'
-            );
-          }).then((res) => {
-            expect(res.width).to.equal(345);
-            expect(res.height).to.be.an('undefined');
-          });
-        });
+        await timer.promise(IFRAME_MESSAGE_TIMEOUT);
+        // The iframe's <script> will only post 'loaded-frame' on receipt of
+        // a message from the parent, which should be disallowed above.
+        expect(ranJs).to.equal(0);
+        // Normally, amp-iframe sets up a listener for "message" events
+        // for iframe -> host messaging, but not if targetOrigin_ is invalid.
+        expect(addEventListener).to.not.be.called;
       });
 
-      describe('pause/resume', () => {
-        beforeEach(() => {
-          toggleExperiment(win, 'pausable-iframe', true, true);
+      it('should receive "message" events from <iframe>', async () => {
+        const ampIframe = createAmpIframe(env, {
+          src: messagingSrc,
+          sandbox: 'allow-scripts allow-same-origin',
+          width: 100,
+          height: 100,
         });
+        await waitForAmpIframeLayoutPromise(doc, ampIframe);
+        const impl = await ampIframe.getImpl(false);
 
-        function setPolicyAllowed(iframe, allowed) {
-          env.sandbox.defineProperty(iframe, 'featurePolicy', {
-            value: {
-              features() {
-                return ['execution-while-not-rendered'];
-              },
-              allowsFeature() {
-                return allowed;
-              },
-            },
-          });
-        }
+        const userError = env.sandbox.stub(user(), 'error');
+        const actions = {trigger: env.sandbox.spy()};
+        env.sandbox.stub(Services, 'actionServiceForDoc').returns(actions);
 
-        it('should not be pausable without an experiment', function* () {
-          toggleExperiment(win, 'pausable-iframe', false, false);
-          const ampIframe = createAmpIframe(env, {
-            src: iframeSrc,
-            width: 100,
-            height: 100,
-          });
-          yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-          const iframe = ampIframe.querySelector('iframe');
-          expect(iframe.getAttribute('allow') || '').to.not.have.string(
-            "execution-while-not-rendered 'none'"
-          );
-          expect(ampIframe.unlayoutOnPause()).to.be.true;
+        impl.executeAction({
+          method: 'postMessage',
+          args: 'foo-123',
+          satisfiesTrust: () => true,
         });
 
-        it('should be configureed pausable with an experiment', function* () {
-          const ampIframe = createAmpIframe(env, {
-            src: iframeSrc,
-            width: 100,
-            height: 100,
-          });
-          yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-          const iframe = ampIframe.querySelector('iframe');
-          expect(iframe.getAttribute('allow') || '').to.have.string(
-            "execution-while-not-rendered 'none'"
-          );
-        });
+        await waitForJsInIframe(1);
+        expect(actions.trigger).to.not.be.called;
+        expect(userError).calledWithMatch(
+          'amp-iframe',
+          /may only be triggered from a user gesture/
+        );
 
-        it('should allow pausing when configured and supported', function* () {
-          const ampIframe = createAmpIframe(env, {
-            src: iframeSrc,
-            width: 100,
-            height: 100,
-          });
-          yield waitForAmpIframeLayoutPromise(doc, ampIframe);
-          const iframe = ampIframe.querySelector('iframe');
-          setPolicyAllowed(iframe, false);
-          expect(ampIframe.unlayoutOnPause()).to.be.false;
-          ampIframe.pauseCallback();
-          expect(iframe).to.have.attribute('hidden');
-          ampIframe.resumeCallback();
-          expect(iframe).to.not.have.attribute('hidden');
+        env.sandbox.stub(impl, 'isUserGesture_').returns(true);
+        impl.executeAction({
+          method: 'postMessage',
+          args: 'bar-456',
+          satisfiesTrust: () => true,
         });
 
-        it('should not allow pausing before loaded', function* () {
-          const ampIframe = createAmpIframe(env, {
-            src: iframeSrc,
-            width: 100,
-            height: 100,
-          });
-          expect(ampIframe.querySelector('iframe')).to.not.exist;
-          expect(ampIframe.unlayoutOnPause()).to.be.true;
+        await waitForJsInIframe(2);
+        // Once for 'loaded-iframe' and once for 'content-iframe'.
+        expect(actions.trigger).to.be.calledTwice;
+        const eventMatcher = env.sandbox.match({
+          type: 'amp-iframe:message',
+          detail: env.sandbox.match({data: 'content-iframe:bar-456'}),
         });
+        expect(actions.trigger).to.be.calledWith(
+          ampIframe,
+          'message',
+          eventMatcher,
+          ActionTrust.HIGH
+        );
+      });
 
-        it('should not pause/resume when not allowed', function* () {
-          const ampIframe = createAmpIframe(env, {
-            src: iframeSrc,
-            width: 100,
-            height: 100,
-          });
-          yield waitForAmpIframeLayoutPromise(doc, ampIframe);
+      it('should listen for Pym.js height event', async () => {
+        const ampIframe = createAmpIframe(env, {
+          src: iframeSrc,
+          sandbox: 'allow-scripts allow-same-origin',
+          width: 200,
+          height: 200,
+          resizable: '',
+        });
+        await waitForAmpIframeLayoutPromise(doc, ampIframe);
+        const impl = await ampIframe.getImpl(false);
+        return new Promise((resolve, unusedReject) => {
+          impl.updateSize_ = (height, width) => {
+            resolve({height, width});
+          };
           const iframe = ampIframe.querySelector('iframe');
-          setPolicyAllowed(iframe, true);
-          expect(ampIframe.unlayoutOnPause()).to.be.true;
-          ampIframe.pauseCallback();
-          expect(iframe).to.not.have.attribute('hidden');
+          iframe.contentWindow.postMessage(
+            {
+              sentinel: 'amp-test',
+              type: 'requestPymjsHeight',
+              height: 234,
+            },
+            '*'
+          );
+        }).then((res) => {
+          expect(res.height).to.equal(234);
+          expect(res.width).to.be.an('undefined');
         });
+      });
 
-        it('should not pause/resume w/o experiment', function* () {
-          const ampIframe = createAmpIframe(env, {
-            src: iframeSrc,
-            width: 100,
-            height: 100,
-          });
-          yield waitForAmpIframeLayoutPromise(doc, ampIframe);
+      it('should listen for Pym.js width event', async () => {
+        const ampIframe = createAmpIframe(env, {
+          src: iframeSrc,
+          sandbox: 'allow-scripts allow-same-origin',
+          width: 200,
+          height: 200,
+          resizable: '',
+        });
+        await waitForAmpIframeLayoutPromise(doc, ampIframe);
+        const impl = await ampIframe.getImpl(false);
+        return new Promise((resolve, unusedReject) => {
+          impl.updateSize_ = (height, width) => {
+            resolve({height, width});
+          };
           const iframe = ampIframe.querySelector('iframe');
-          setPolicyAllowed(iframe, false);
-          toggleExperiment(win, 'pausable-iframe', false, false);
-          expect(ampIframe.unlayoutOnPause()).to.be.true;
-          ampIframe.pauseCallback();
-          expect(iframe).to.not.have.attribute('hidden');
+          iframe.contentWindow.postMessage(
+            {
+              sentinel: 'amp-test',
+              type: 'requestPymjsWidth',
+              width: 345,
+            },
+            '*'
+          );
+        }).then((res) => {
+          expect(res.width).to.equal(345);
+          expect(res.height).to.be.an('undefined');
         });
       });
     });
diff --git a/extensions/amp-iframe/0.1/test/validator-amp-iframe.out b/extensions/amp-iframe/0.1/test/validator-amp-iframe.out
index 774bacfcf8a13..b5a3e7f81745f 100644
--- a/extensions/amp-iframe/0.1/test/validator-amp-iframe.out
+++ b/extensions/amp-iframe/0.1/test/validator-amp-iframe.out
@@ -56,4 +56,4 @@ amp-iframe/0.1/test/validator-amp-iframe.html:44:2 The attribute 'src' in tag 'a
 |
 |
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-iframe/OWNERS b/extensions/amp-iframe/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-iframe/OWNERS
+++ b/extensions/amp-iframe/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-iframe/amp-iframe.md b/extensions/amp-iframe/amp-iframe.md
index f7abb21c08ca9..ebd132bf27521 100644
--- a/extensions/amp-iframe/amp-iframe.md
+++ b/extensions/amp-iframe/amp-iframe.md
@@ -24,16 +24,24 @@ limitations under the License.
 
 # amp-iframe
 
-## Behavior
-
-`amp-iframe` has several important differences from vanilla iframes that are designed to make it more secure and avoid AMP files that are dominated by a single iframe:
-
-- An `amp-iframe` may not appear close to the top of the document (except for iframes that use `placeholder` as described [below](#iframe-with-placeholder)). The iframe must be either 600 px away from the top or not within the first 75% of the viewport when scrolled to the top, whichever is smaller.
-- By default, an amp-iframe is sandboxed (see [details](#sandbox)).
-- An `amp-iframe` must only request resources via HTTPS, from a data-URI, or via the `srcdoc` attribute.
-- An `amp-iframe` must not be in the same origin as the container unless they do not allow `allow-same-origin` in the `sandbox` attribute. See the ["Iframe origin policy"](../../spec/amp-iframe-origin-policy.md) doc for further details on allowed origins for iframes.
-
-_Example: Embedded a Google Map in an amp-iframe_
+## Usage
+
+Displays an AMP valid iframe. `amp-iframe` has several important differences from vanilla iframes that are
+designed to make it more secure and avoid AMP files that are dominated by a
+single iframe:
+
+-   An `amp-iframe` may not appear close to the top of the document (except for
+    iframes that use `placeholder` as described
+    [below](#iframe-with-placeholder)). The iframe must be either 600 px away
+    from the top or not within the first 75% of the viewport when scrolled to
+    the top, whichever is smaller.
+-   By default, an `amp-iframe` is sandboxed (see [details](#sandbox)).
+-   An `amp-iframe` must only request resources via HTTPS, from a data-URI, or
+    via the `srcdoc` attribute.
+-   An `amp-iframe` must not be in the same origin as the container unless they
+    do not allow `allow-same-origin` in the `sandbox` attribute. See the
+    ["Iframe origin policy"](../../docs/spec/amp-iframe-origin-policy.md)
+    doc for further details on allowed origins for iframes.
 
 ```html
 <amp-iframe
@@ -47,8 +55,6 @@ _Example: Embedded a Google Map in an amp-iframe_
 </amp-iframe>
 ```
 
-Renders as:
-
 <amp-iframe width="200" height="100"
     sandbox="allow-scripts allow-same-origin"
     layout="responsive"
@@ -56,62 +62,57 @@ Renders as:
     src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAyAS599A2GGPKTmtNr9CptD61LE4gN6oQ&q=iceland">
 </amp-iframe>
 
-{% call callout('Tip', type='success') %}
-To see more demos of the `amp-iframe`, visit [AMP By Example](https://amp.dev/documentation/examples/components/amp-iframe/).
-{% endcall %}
+### Use existing AMP components instead of `amp-iframe`
+
+The `amp-iframe` component should be considered a fallback if the required user
+experience is not possible by other means in AMP, that is, there's not already
+an existing AMP component
+for the use case. This is because there are many benefits to using an AMP
+component tailored for a specific use-case such as:
+
+-   Better resource management and performance
+-   Custom components can provide built-in placeholder images in some cases.
+    This means getting, say, the right video thumbnail before a video loads, and
+    reduces the coding effort to add a placeholder manually.
+-   Built-in resizing. This means that iframe content with unpredictable size
+    can more often appear to the user as if it were native to the page, rather
+    than in a scrollable frame
+-   Other additional features can be built in (for instance, auto-play for video
+    players)
 
-## Usage of amp-iframe for advertising
+#### Usage of `amp-iframe` for advertising
 
-`amp-iframe` **must not** be used for the primary purpose of displaying advertising. It is OK to use `amp-iframe` for the purpose of displaying videos, where part of the videos are advertising. This AMP policy may be enforced by not rendering the respective iframes.
+`amp-iframe` **must not** be used for the primary purpose of displaying
+advertising. It is OK to use `amp-iframe` for the purpose of displaying videos,
+where part of the videos are advertising. This AMP policy may be enforced by not
+rendering the respective iframes.
 
-Advertising use cases should use [`amp-ad`](https://amp.dev/documentation/components/amp-ad) instead.
+Advertising use cases should use
+[`amp-ad`](../amp-ad/amp-ad.md) instead.
 
 The reasons for this policy are that:
 
-- `amp-iframe` enforces sandboxing and the sandbox is also applied to child iframes. This means landing pages may be broken, even if the ad itself appears to work.
-- `amp-iframe` does not provide any mechanism to pass configuration to the iframe.
-- `amp-iframe` has no fully iframe controlled resize mechanism.
-- Viewability information may not be available to `amp-iframe`.
+-   `amp-iframe` enforces sandboxing and the sandbox is also applied to child
+    iframes. This means landing pages may be broken, even if the ad itself
+    appears to work.
+-   `amp-iframe` does not provide any mechanism to pass configuration to the
+    iframe.
+-   `amp-iframe` has no fully iframe controlled resize mechanism.
+-   Viewability information may not be available to `amp-iframe`.
 
-## Attributes
+### Iframe with placeholder <a name="iframe-with-placeholder"></a>
+
+It is possible to have an `amp-iframe` appear at the top of a document when the
+`amp-iframe` has a `placeholder` element as shown in the example below.
+
+-   The `amp-iframe` must contain an element with the `placeholder` attribute,
+    (for instance an `amp-img` element) which would be rendered as a placeholder
+    until the iframe is ready to be displayed.
+-   Iframe readiness can be known by listening to `onload` of the iframe or an
+    `embed-ready` `postMessage`, which would be sent by the iframe document,
+    whichever comes first.
 
-<table>
-  <tr>
-    <td width="40%"><strong>src</strong></td>
-    <td>The <code>src</code> attribute behaves mainly like on a standard iframe with one exception: the <code>#amp=1</code> fragment is added to the URL to allow
-source documents to know that they are embedded in the AMP context. This fragment is only added if the URL specified by <code>src</code> does
-not already have a fragment.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>srcdoc, frameborder, allowfullscreen, allowpaymentrequest, allowtransparency, referrerpolicy</strong></td>
-    <td>These attributes should all behave like they do on standard iframes.
-<br>
-If <code>frameborder</code> is not specified, by default, it will be set to <code>0</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>sandbox</strong></td>
-    <td>Iframes created by <code>amp-iframe</code> always have the <code>sandbox</code> attribute defined on them. By default, the value is empty, which means that they are "maximum sandboxed". By setting <code>sandbox</code> values, one can opt the iframe into being less sandboxed. All values supported by browsers are allowed. For example, setting <code>sandbox="allow-scripts"</code> allows the iframe to run JavaScript, or <code>sandbox="allow-scripts allow-same-origin"</code> allows the iframe to run JavaScript, make non-CORS XHRs, and read/write cookies.
-<br><br>
-If you are iframing a document that was not specifically created with sandboxing in mind, you will most likely need to add <code>allow-scripts allow-same-origin</code> to the <code>sandbox</code> attribute and you might need to allow additional capabilities.
-<br><br>
-Note also, that the sandbox applies to all windows opened from a sandboxed iframe. This includes new windows created by a link with <code>target=_blank</code> (add <code>allow-popups</code> to allow this to happen). Adding <code>allow-popups-to-escape-sandbox</code> to the <code>sandbox</code> attribute, makes those new windows behave like non-sandboxed new windows. This is likely most of the time what you want and expect. Unfortunately, as of this writing, <code>allow-popups-to-escape-sandbox</code> is supported by Chrome, Firefox, Safari and Opera but not Edge.
-<br><br>
-See the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox">docs on MDN</a> for further details on the sandbox attribute.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
-
-## Iframe with placeholder
-
-It is possible to have an `amp-iframe` appear at the top of a document when the `amp-iframe` has a `placeholder` element as shown in the example below.
-
-- The `amp-iframe` must contain an element with the `placeholder` attribute, (for instance an `amp-img` element) which would be rendered as a placeholder until the iframe is ready to be displayed.
-- Iframe readiness can be known by listening to `onload` of the iframe or an `embed-ready` `postMessage`, which would be sent by the iframe document, whichever comes first.
-
-_Example: Iframe with a placeholder_
+The following example shows an iframe with a placeholder:
 
 ```html
 <amp-iframe
@@ -125,7 +126,7 @@ _Example: Iframe with a placeholder_
 </amp-iframe>
 ```
 
-_Example: Iframe embed-ready request_
+The following example shows an iframe with an embed-ready request:
 
 ```javascript
 window.parent.postMessage(
@@ -137,20 +138,22 @@ window.parent.postMessage(
 );
 ```
 
-## Iframe resizing
+### Iframe resizing
 
-An `amp-iframe` must have static layout defined as is the case with any other AMP element. However,
-it's possible to resize an `amp-iframe` at runtime. To do so:
+An `amp-iframe` must have static layout defined as is the case with any other
+AMP element. However, it's possible to resize an `amp-iframe` at runtime. To do
+so:
 
-1. The `amp-iframe` must be defined with the `resizable` attribute.
-2. The `amp-iframe` must have an `overflow` child element.
-3. The `amp-iframe` must set the `allow-same-origin` sandbox attribute.
-4. The iframe document must send an `embed-size` request as a window message.
-5. The `embed-size` request will be denied if the request height is less than a certain threshold (100px).
+1.  The `amp-iframe` must be defined with the `resizable` attribute.
+2.  The `amp-iframe` must have an `overflow` child element. This element can typically be a `div`. However, if the `amp-iframe` is child of a `p` element, it is recommended to use a `span` or `button` (to eliminate issues caused by `p` element's [phrasing content](https://html.spec.whatwg.org/#phrasing-content)).
+3.  The `amp-iframe` must set the `allow-same-origin` sandbox attribute.
+4.  The iframe document must send an `embed-size` request as a window message.
+5.  The `embed-size` request will be denied if the request height is less than a
+    certain threshold (100px).
 
 Notice that `resizable` overrides the value of `scrolling` to `no`.
 
-_Example: `amp-iframe` with `overflow` element_
+The following example shows `amp-iframe` with an `overflow` element:
 
 ```html
 <amp-iframe
@@ -167,7 +170,7 @@ _Example: `amp-iframe` with `overflow` element_
 </amp-iframe>
 ```
 
-_Example: iframe resize request_
+The following example shows an iframe resize request:
 
 ```javascript
 window.parent.postMessage(
@@ -180,22 +183,36 @@ window.parent.postMessage(
 );
 ```
 
-Once this message is received, the AMP runtime tries to accommodate the request as soon as possible, but it takes into account where the reader is currently reading, whether the scrolling is ongoing and any other UX or performance factors. If the runtime cannot satisfy the resize request,
-the `amp-iframe` will show an `overflow` element. Clicking on the `overflow` element will immediately resize the `amp-iframe` since it's triggered by a user action.
+Once this message is received, the AMP runtime tries to accommodate the request
+as soon as possible, but it takes into account where the reader is currently
+reading, whether the scrolling is ongoing and any other UX or performance
+factors. If the runtime cannot satisfy the resize request, the `amp-iframe` will
+show an `overflow` element. Clicking on the `overflow` element will immediately
+resize the `amp-iframe` since it's triggered by a user action.
 
 Here are some factors that affect how fast the resize will be executed:
 
-- Whether the resize is triggered by the user action.
-- Whether the resize is requested for a currently active iframe.
-- Whether the resize is requested for an iframe below the viewport or above the viewport.
+-   Whether the resize is triggered by the user action.
+-   Whether the resize is requested for a currently active iframe.
+-   Whether the resize is requested for an iframe below the viewport or above
+    the viewport.
 
-## Iframe viewability
+### Iframe viewability
 
-Iframes can send a `send-intersections` message to their parents to start receiving IntersectionObserver style [change records](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) of the iframe's intersection with the parent viewport.
+Iframes can send a `send-intersections` message to their parents to start
+receiving `IntersectionObserver` style
+[change records](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
+of the iframe's intersection with the parent viewport.
 
-_Note: In the following examples, we assume the script is in the created iframe, where `window.parent` is the top window. If the script lives in a nested iframe, change `window.parent` to the top AMP window._
+[tip type="note"]
+
+In the following examples, we assume the script is in the created iframe, where
+`window.parent` is the top window. If the script lives in a nested iframe,
+change `window.parent` to the top AMP window.
+
+[/tip]
 
-_Example: iframe `send-intersections` request_
+The following example shows an iframe `send-intersections` request:
 
 ```javascript
 window.parent.postMessage(
@@ -207,19 +224,23 @@ window.parent.postMessage(
 );
 ```
 
-The iframe can listen to an `intersection` message from the parent window to receive the intersection data.
+The iframe can listen to an `intersection` message from the parent window to
+receive the intersection data.
 
-_Example: iframe `send-intersections` request_
+The following example shows an iframe `send-intersections` request:
 
 ```javascript
+function isAmpMessage(event, type) {
+  return (
+    event.source == window.parent &&
+    event.origin != window.location.origin &&
+    event.data &&
+    event.data.sentinel == 'amp' &&
+    event.data.type == type
+  );
+}
 window.addEventListener('message', function (event) {
-  if (
-    event.source != window.parent ||
-    event.origin == window.location.origin ||
-    !event.data ||
-    event.data.sentinel != 'amp' ||
-    event.data.type != 'intersection'
-  ) {
+  if (!isAmpMessage(event, 'intersection')) {
     return;
   }
   event.data.changes.forEach(function (change) {
@@ -228,25 +249,117 @@ window.addEventListener('message', function (event) {
 });
 ```
 
-The intersection message would be sent by the parent to the iframe when the iframe moves in or out of the viewport (or is partially visible), when the iframe is scrolled or resized.
+The intersection message would be sent by the parent to the iframe in the format of IntersectionObserver entry wheneve there is intersectionRatio change across thresholds [0, 0.05, 0.1, ... 0.9, 0.95, 1].
+
+## Iframe & Consent Data
+
+Iframes can send a `send-consent-data` message to receive consent data if a CMP is present on their parents page.
+
+_Note: In the following examples, we assume the script is in the created iframe, where `window.parent` is the top window. If the script lives in a nested iframe, change `window.parent` to the top AMP window._
+
+_Example: iframe `send-consent-data` request_
+
+```javascript
+window.parent.postMessage(
+  {
+    sentinel: 'amp',
+    type: 'send-consent-data',
+  },
+  '*'
+);
+```
+
+The iframe can receive the consent data response by listening to the `consent-data` message.
+
+**Please note:**
+
+-   The `consent-data` response will only be sent once and won't update the iframe when the consent state changes (for example when the user decides to reject consent by using the post prompt ui)
+-   When omitting `data-block-on-consent` the `default` policy is used and the iframe will be loaded immediately. The `consent-data` response may be delayed based on the selected policy. See [`amp-consent`](../amp-consent/amp-consent.md) for more information.
+
+_Example: iframe `send-consent-data` request_
+
+```javascript
+function isAmpMessage(event, type) {
+  return (
+    event.source == window.parent &&
+    event.origin != window.location.origin &&
+    event.data &&
+    event.data.sentinel == 'amp' &&
+    event.data.type == type
+  );
+}
+window.addEventListener('message', function (event) {
+  if (!isAmpMessage(event, 'consent-data')) {
+    return;
+  }
+  console.log(event.data.consentMetadata);
+  console.log(event.data.consentString);
+});
+```
+
+## Attributes
+
+### `src`
+
+The `src` attribute behaves mainly like on a standard iframe with one exception:
+the `#amp=1` fragment is added to the URL to allow source documents to know that
+they are embedded in the AMP context. This fragment is only added if the URL
+specified by `src` does not already have a fragment.
+
+### `srcdoc`, `frameborder`, `allowfullscreen`, `allowpaymentrequest`, `allowtransparency`, and `referrerpolicy`
+
+These attributes should all behave like they do on standard iframes.
+
+If `frameborder` is not specified, by default, it will be set to `0`.
+
+### `sandbox` <a name="sandbox"></a>
+
+Iframes created by `amp-iframe` always have the `sandbox` attribute defined on
+them. By default, the value is empty, which means that they are "maximum
+sandboxed". By setting `sandbox` values, one can opt the iframe into being less
+sandboxed. All values supported by browsers are allowed. For example, setting
+`sandbox="allow-scripts"` allows the iframe to run JavaScript, or
+`sandbox="allow-scripts allow-same-origin"` allows the iframe to run JavaScript,
+make non-CORS XHRs, and read/write cookies.
+
+If you are iframing a document that was not specifically created with sandboxing
+in mind, you will most likely need to add `allow-scripts allow-same-origin` to
+the `sandbox` attribute and you might need to allow additional capabilities.
+
+Note also, that the sandbox applies to all windows opened from a sandboxed
+iframe. This includes new windows created by a link with `target=_blank` (add
+`allow-popups` to allow this to happen). Adding `allow-popups-to-escape-sandbox`
+to the `sandbox` attribute, makes those new windows behave like non-sandboxed
+new windows. This is likely most of the time what you want and expect.
+Unfortunately, as of this writing, `allow-popups-to-escape-sandbox` is supported
+by Chrome, Firefox, Safari and Opera but not Edge.
 
-## Tracking/analytics iframes
+See the [docs on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox)
+for further details on the `sandbox` attribute.
 
-We strongly recommend using [`amp-analytics`](https://amp.dev/documentation/components/amp-analytics) for analytics purposes, because it is significantly more robust, complete and an efficient solution which can be configured for a wide range of analytics vendors.
+### Common attributes
 
-AMP only allows a single iframe that is used for analytics and tracking purposes, per page. To conserve resources, these iframes will be removed from the DOM 5 seconds after they loaded, which should be sufficient time to complete whatever work is needed to be done.
+`amp-iframe` includes the
+[common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
 
-Iframes are identified as tracking/analytics iframes if they appear to serve no direct user purpose such as being invisible or small.
+## Analytics
 
-## Guideline: Use existing AMP components over amp-iframe
+We strongly recommend using
+[`amp-analytics`](../amp-analytics/amp-analytics.md) for
+analytics purposes, because it is significantly more robust, complete and an
+efficient solution which can be configured for a wide range of analytics
+vendors.
 
-The `amp-iframe` component should be considered a fallback if the required user experience is not possible by other means in AMP, that is, there's not already an existing [AMP component](https://www.ampproject.org/docs/reference/components) for the use case. This is because there are many benefits to using an AMP component tailored for a specific use-case such as:
+AMP only allows a single iframe that is used for analytics and tracking
+purposes, per page. To conserve resources, these iframes will be removed from
+the DOM 5 seconds after they loaded, which should be sufficient time to complete
+whatever work is needed to be done.
 
-- Better resource management and performance
-- Custom components can provide built-in placeholder images in some cases. This means getting, say, the right video thumbnail before a video loads, and reduces the coding effort to add a placeholder manually.
-- Built-in resizing. This means that iframe content with unpredictable size can more often appear to the user as if it were native to the page, rather than in a scrollable frame
-- Other additional features can be built in (for instance, auto-play for video players)
+Iframes are identified as tracking/analytics iframes if they appear to serve no
+direct user purpose such as being invisible or small.
 
 ## Validation
 
-See [amp-iframe rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/validator-amp-iframe.protoascii) in the AMP validator specification.
+See [`amp-iframe` rules](validator-amp-iframe.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-iframely/0.1/amp-iframely.js b/extensions/amp-iframely/0.1/amp-iframely.js
new file mode 100644
index 0000000000000..c06bfdd2c9e6c
--- /dev/null
+++ b/extensions/amp-iframely/0.1/amp-iframely.js
@@ -0,0 +1,316 @@
+/**
+ * Copyright 2021 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.
+ */
+import {addParamsToUrl} from '../../../src/url';
+import {createElementWithAttributes, removeElement} from '../../../src/dom';
+import {getData, listen} from '../../../src/event-helper';
+import {isLayoutSizeDefined} from '../../../src/layout';
+import {measureIntersection} from '../../../src/utils/intersection';
+import {omit} from '../../../src/core/types/object';
+import {setStyle} from '../../../src/style';
+import {tryParseJson} from '../../../src/core/types/object/json';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+export const TAG = 'amp-iframely';
+
+/**
+ * Implementation of the amp-iframely component.
+ *
+ * See {@link ../amp-iframely.md} for the spec.
+ */
+export class AmpIframely extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /**
+     * Address of Iframely media (3rd party rich media or a summary card for the URL).
+     * @private {string}
+     */
+    this.src_ = null;
+
+    /**
+     * The main iFrame element that loads Iframely media.
+     * @private {?Element}
+     */
+    this.iframe_ = null;
+
+    /**
+     * ID of Iframely content, if available
+     * @private {?string}
+     */
+    this.widgetId_ = null;
+
+    /**
+     * Domain of Iframely CDN
+     * @private {?string}
+     */
+    this.base_ = null;
+
+    /**
+     * Alternatively, identify with Iframely CDN via `url` and `key` hash params
+     * @private {?string}
+     */
+    this.url_ = null;
+    /** @private {?string} */
+    this.key_ = null;
+
+    /**
+     * other data- options that will be passed into iFrame src
+     * @private {?Object}
+     * */
+    this.options_ = null;
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+
+  /** @override */
+  buildCallback() {
+    /** Populating parameters once */
+    this.widgetId_ = this.element.getAttribute('data-id');
+    this.url_ = this.element.getAttribute('data-url');
+    this.key_ = this.element.getAttribute('data-key');
+    this.options_ = this.parseOptions_();
+    let domain = 'cdn.iframe.ly';
+    const requestedDomain = this.element.getAttribute('data-domain');
+    if (requestedDomain && this.isValidDomain_(requestedDomain)) {
+      domain = requestedDomain;
+    }
+    this.base_ = `https://${domain}/`;
+    this.parseAttributes_();
+  }
+
+  /**
+   * @param {boolean=} opt_onLayout
+   * @override
+   */
+  preconnectCallback(opt_onLayout) {
+    if (this.preconnect && this.preconnect.url_) {
+      this.preconnect.url(this.base_, opt_onLayout);
+    }
+  }
+
+  /** @override */
+  createPlaceholderCallback() {
+    /**
+     * Building placeholder for responsive layout without resizing
+     * or when requested via `data-img` attribute
+     */
+    const layout = this.getLayout();
+    if (
+      this.element.hasAttribute('data-img') ||
+      (layout === 'responsive' && !this.element.hasAttribute('resizable'))
+    ) {
+      /** using Iframely placeholder image */
+      const src = addParamsToUrl(
+        this.constructSrc_('/thumbnail'),
+        this.options_
+      );
+      const element = createElementWithAttributes(
+        this.element.ownerDocument,
+        'img',
+        {
+          'src': src,
+          'loading': 'lazy',
+          'placeholder': '',
+        }
+      );
+      this.applyFillContent(element);
+      return element;
+    }
+    return null;
+  }
+
+  /** @override */
+  layoutCallback() {
+    /** attach iFrame */
+    this.iframe_ = this.element.ownerDocument.createElement('iframe');
+    setStyle(this.iframe_, 'border', '0px');
+    this.iframe_.setAttribute(
+      'sandbox',
+      'allow-scripts allow-same-origin allow-popups allow-forms allow-presentation'
+    );
+    this.src_ = addParamsToUrl(this.src_, this.options_);
+    this.iframe_.src = this.src_;
+    this.applyFillContent(this.iframe_);
+    this.element.appendChild(this.iframe_);
+
+    this.unlistener_ = listen(this.win, 'message', (event) => {
+      if (event.source === this.iframe_.contentWindow) {
+        this.handleEvent_(event);
+      }
+    });
+    return this.loadPromise(this.iframe_);
+  }
+
+  /**
+   * Handles Iframely events: widget sizing, cancel, decorate cards
+   * @param {window.event} event - Iframely message with a method to apply
+   * */
+  handleEvent_(event) {
+    const data = tryParseJson(getData(event));
+    if (!data) {
+      return;
+    }
+    if (data.method === 'resize' && data.height > 50) {
+      /** Set the size of the card according to the message from Iframely */
+      this.attemptChangeHeight(data['height']).catch(() => {});
+    } else if (data.method === 'setIframelyEmbedData') {
+      /** apply Iframely card styles if present */
+      const media = data['data']['media'] || null;
+      if (media && media['aspect-ratio']) {
+        const intersection = measureIntersection(this.element);
+        intersection.then((box) => {
+          if (media['padding-bottom']) {
+            /** Apply height for media with updated "aspect-ratio" and "padding-bottom". */
+            const height =
+              box.boundingClientRect.width / media['aspect-ratio'] +
+              media['padding-bottom'];
+            this.attemptChangeHeight(Math.round(height)).catch(() => {});
+          } else {
+            const height = box.boundingClientRect.width / media['aspect-ratio'];
+            if (Math.abs(box.boundingClientRect.height - height) > 1) {
+              /** Apply new height for updated "aspect-ratio". */
+              this.attemptChangeHeight(Math.round(height)).catch(() => {});
+            }
+          }
+        });
+      }
+    }
+    if (data.method === 'cancelWidget') {
+      this.attemptCollapse().catch(() => {});
+    }
+  }
+
+  /**
+   * Constructing url SRC for api calls
+   * @param {string} slug src or iframe src in case false
+   * @return {string} url of the placeholder
+   * @private
+   * */
+  constructSrc_(slug) {
+    if (this.widgetId_) {
+      return `${this.base_}${this.widgetId_}${
+        slug !== '/iframe' ? slug : ''
+      }?amp=1`;
+    } else {
+      return addParamsToUrl(`${this.base_}api${slug}`, {
+        'url': this.url_,
+        'key': this.key_,
+        'amp': '1',
+      });
+    }
+  }
+
+  /**
+   * Test component call for required params
+   * @return {null}
+   * @private
+   * */
+  parseAttributes_() {
+    userAssert(
+      this.element.getAttribute('data-id') ||
+        this.element.getAttribute('data-url'),
+      '<%s> requires either "data-id" or a pair of "data-url" and "data-key" attributes for %s',
+      TAG,
+      this.element
+    );
+    if (!this.widgetId_) {
+      if (this.url_) {
+        userAssert(
+          this.key_,
+          'Iframely data-key must also be set when you specify data-url parameter at <%s> %s',
+          TAG,
+          this.element
+        );
+      }
+      if (this.key_) {
+        userAssert(
+          this.url_,
+          'Iframely data-url must also be set when you specify data-key parameter at <%s> %s',
+          TAG,
+          this.element
+        );
+      }
+      if (this.key_ || this.url_) {
+        userAssert(
+          !this.widgetId_,
+          'Iframely data-id should not be set when there is already a pair of data-url and data-key for <%s> %s',
+          TAG,
+          this.element
+        );
+      }
+    }
+    if ((this.widgetId_ && this.url_) || (this.widgetId_ && this.key_)) {
+      userAssert(
+        !this.widgetId_,
+        'Only one way of setting either data-id or data-url and data-key supported for <%s> %s',
+        TAG,
+        this.element
+      );
+    }
+    this.src_ = this.constructSrc_('/iframe');
+  }
+
+  /**
+   * Parse other data-* attributes and append them to API query url
+   * @return {object} of Iframely options
+   * @private
+   * */
+  parseOptions_() {
+    return omit(this.element.dataset, ['id', 'domain', 'key', 'url', 'img']);
+  }
+
+  /** @override */
+  unlayoutCallback() {
+    if (this.iframe_) {
+      removeElement(this.iframe_);
+      this.iframe_ = null;
+    }
+    if (this.unlisten_) {
+      this.unlisten_();
+      this.unlisten_ = null;
+    }
+    return true; // Request layoutCallback again.
+  }
+
+  /**
+   * Validates that requested domain is a valid Iframely domain
+   * @param {string} domainName - optional CDN alias, if different from the default Iframely host and is allowed.
+   * @return {boolean} if domain is valid
+   * @private
+   * */
+  isValidDomain_(domainName) {
+    const allowedDomains = [
+      /^(?:[^\.\/]+\.)?iframe\.ly$/i,
+      /^if\-cdn\.com$/i,
+      /^iframely\.net$/i,
+      /^oembed\.vice\.com$/i,
+      /^iframe\.nbcnews\.com$/i,
+    ];
+    return allowedDomains.reduce(
+      (allowed, re) => allowed || re.test(domainName),
+      false
+    );
+  }
+}
+
+AMP.extension(TAG, '0.1', (AMP) => {
+  AMP.registerElement(TAG, AmpIframely);
+});
diff --git a/extensions/amp-iframely/0.1/test/test-amp-iframely.js b/extensions/amp-iframely/0.1/test/test-amp-iframely.js
new file mode 100644
index 0000000000000..2d17e4e0f65a6
--- /dev/null
+++ b/extensions/amp-iframely/0.1/test/test-amp-iframely.js
@@ -0,0 +1,382 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import '../amp-iframely';
+
+describes.realWin(
+  'amp-iframely',
+  {
+    amp: {
+      extensions: ['amp-iframely'],
+    },
+  },
+  (env) => {
+    let win, doc;
+    const TestID = 'pHBVuFj';
+    const paramsID = {
+      'data-id': TestID,
+      'width': '10',
+      'height': '10',
+      'layout': 'responsive',
+    };
+    const url = 'https//some.url/';
+    const key = 'some-StRiNg-of-more-then-16';
+    const paramsKU = {
+      'data-key': key,
+      'data-url': url,
+      'layout': 'responsive',
+      'width': '100',
+      'height': '100',
+    };
+
+    beforeEach(() => {
+      win = env.win;
+      doc = win.document;
+    });
+
+    function renderIframely(params) {
+      const iframely = doc.createElement('amp-iframely');
+      for (const param in params) {
+        iframely.setAttribute(param, params[param]);
+      }
+      doc.body.appendChild(iframely);
+      return iframely.buildInternal().then(() => {
+        iframely.layoutCallback();
+        return iframely;
+      });
+    }
+
+    function testIframe(iframe, id) {
+      expect(iframe).to.not.be.null;
+      expect(iframe.src).to.equal('https://cdn.iframe.ly/' + id + '?amp=1');
+      expect(iframe.className).to.match(/i-amphtml-fill-content/);
+    }
+
+    it('renders', () => {
+      return renderIframely(paramsID).then((iframely) => {
+        testIframe(iframely.querySelector('iframe'), TestID);
+      });
+    });
+
+    it('does not render without required attributes', () => {
+      return allowConsoleError(() => {
+        return renderIframely({
+          'layout': 'fill',
+        }).should.eventually.be.rejectedWith(/<amp-iframely> requires either/);
+      });
+    });
+
+    it('not renders with only URL parameter', () => {
+      return allowConsoleError(() => {
+        return renderIframely({
+          'data-url': 'https//some.url/',
+          'layout': 'fixed',
+        }).should.eventually.be.rejectedWith(
+          /Iframely data-key must also be set/
+        );
+      });
+    });
+
+    it('not renders with only KEY parameter', () => {
+      return allowConsoleError(() => {
+        return renderIframely({
+          'data-key': 'some-StRiNg/',
+          'layout': 'fixed',
+        }).should.eventually.be.rejectedWith(
+          /<amp-iframely> requires either "data-id" /
+        );
+      });
+    });
+
+    it('rejects with both data-url AND data-id parameters specified', () => {
+      const params = {
+        'data-id': TestID,
+        'data-key': 'some-StRiNg/',
+        'data-url': 'https//some.url/',
+        'layout': 'fill',
+      };
+      return allowConsoleError(() => {
+        return renderIframely(params).should.eventually.be.rejectedWith(
+          /Only one way of setting either data-id or/
+        );
+      });
+    });
+
+    it('builds url for key-url pair properly', () => {
+      return renderIframely(paramsKU).then((iframely) => {
+        const iframe = iframely.querySelector('iframe');
+        expect(iframe).to.not.be.null;
+        expect(iframe.src).to.equal(
+          `https://cdn.iframe.ly/api/iframe?url=${encodeURIComponent(
+            url
+          )}&key=${key}&amp=1`
+        );
+        expect(iframe.className).to.match(/i-amphtml-fill-content/);
+      });
+    });
+
+    it('renders iframe properly', () => {
+      return renderIframely(paramsID).then((iframely) => {
+        const iframe = iframely.querySelector('iframe');
+        testIframe(iframe, TestID);
+        expect(iframe.tagName).to.equal('IFRAME');
+        expect(iframe.className).to.match(/i-amphtml-fill-content/);
+        // Border render cleared
+        expect(iframe.getAttribute('style')).to.equal('border: 0px;');
+      });
+    });
+
+    it('renders image placeholder', () => {
+      return renderIframely(paramsID).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.not.be.null;
+        expect(image).to.have.class('i-amphtml-fill-content');
+        expect(image.getAttribute('loading')).to.equal('lazy');
+      });
+    });
+
+    it('renders image placeholder with proper URL for ID version', () => {
+      return renderIframely(paramsID).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.not.be.null;
+        expect(image.getAttribute('src')).to.equal(
+          `https://cdn.iframe.ly/${TestID}/thumbnail?amp=1`
+        );
+      });
+    });
+
+    it('renders image placeholder with proper URL for Key-URL version', () => {
+      return renderIframely(paramsKU).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.not.be.null;
+        expect(image.getAttribute('src')).to.equal(
+          `https://cdn.iframe.ly/api/thumbnail?url=${encodeURIComponent(
+            url
+          )}&key=${key}&amp=1`
+        );
+      });
+    });
+
+    it('does not render iframe and image placeholder with wrong domain', () => {
+      const domain = 'mydomain.com';
+      const properDomain = 'cdn.iframe.ly';
+      const data = {
+        'data-id': TestID,
+        'data-domain': domain,
+        'width': '100',
+        'height': '100',
+        'layout': 'responsive',
+      };
+      return renderIframely(data).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.not.be.null;
+        expect(image.getAttribute('src')).to.equal(
+          `https://${properDomain}/${TestID}/thumbnail?amp=1`
+        );
+        const iframe = iframely.querySelector('iframe');
+        expect(iframe.src).to.equal(`https://${properDomain}/${TestID}?amp=1`);
+      });
+    });
+
+    it('renders iframe and image placeholder with proper domain', () => {
+      const domain = 'iframe.ly';
+      const data = {
+        'data-id': TestID,
+        'data-domain': domain,
+        'width': '100',
+        'height': '100',
+        'layout': 'responsive',
+      };
+      return renderIframely(data).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.not.be.null;
+        expect(image.getAttribute('src')).to.equal(
+          `https://${domain}/${TestID}/thumbnail?amp=1`
+        );
+        const iframe = iframely.querySelector('iframe');
+        expect(iframe.src).to.equal(`https://${domain}/${TestID}?amp=1`);
+      });
+    });
+
+    it('renders placeholder with data-img key set', () => {
+      const data = {
+        'data-id': TestID,
+        'data-img': '',
+        'layout': 'fill',
+      };
+      return renderIframely(data).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.not.be.null;
+        expect(iframely.querySelector('iframe')).to.not.be.null;
+      });
+    });
+
+    it('does not render placeholder with resizable key set and responsive layout', () => {
+      const data = {
+        'data-id': TestID,
+        'resizable': '',
+        'height': '100',
+        'width': '100',
+        'layout': 'responsive',
+      };
+      return renderIframely(data).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.be.null;
+        expect(iframely.querySelector('iframe')).to.not.be.null;
+      });
+    });
+
+    it('render placeholder with data-img and resizeable', () => {
+      const data = {
+        'data-id': TestID,
+        'resizable': '',
+        'data-img': '',
+        'height': '100',
+        'width': '100',
+        'layout': 'responsive',
+      };
+      return renderIframely(data).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.not.be.null;
+        expect(iframely.querySelector('iframe')).to.not.be.null;
+      });
+    });
+
+    it('does not render placeholder with fixed layout', () => {
+      const data = {
+        'data-id': TestID,
+        'height': '100',
+        'width': '100',
+        'layout': 'fixed',
+      };
+      return renderIframely(data).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.be.null;
+        expect(iframely.querySelector('iframe')).to.not.be.null;
+      });
+    });
+
+    it('does not render placeholder with fixed layout and resizable', () => {
+      const data = {
+        'data-id': TestID,
+        'height': '100',
+        'width': '100',
+        'resizable': '',
+        'layout': 'fixed',
+      };
+      return renderIframely(data).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.be.null;
+        expect(iframely.querySelector('iframe')).to.not.be.null;
+      });
+    });
+
+    it('render placeholder with data-img responsive layout and resizable params', () => {
+      const data = {
+        'data-id': TestID,
+        'height': '100',
+        'width': '100',
+        'data-img': '',
+        'resizable': '',
+        'layout': 'responsive',
+      };
+      return renderIframely(data).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.not.be.null;
+        expect(iframely.querySelector('iframe')).to.not.be.null;
+      });
+    });
+
+    it('render placeholder with data-img fixed layout and resizable params', () => {
+      const data = {
+        'data-id': TestID,
+        'height': '100',
+        'width': '100',
+        'data-img': '',
+        'layout': 'fixed',
+      };
+      return renderIframely(data).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.not.be.null;
+        expect(iframely.querySelector('iframe')).to.not.be.null;
+      });
+    });
+
+    it('does not render placeholder with fixed-height layout and resizable params', () => {
+      const data = {
+        'data-id': TestID,
+        'height': '166',
+        'layout': 'fixed-height',
+        'resizable': '',
+      };
+      return renderIframely(data).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.be.null;
+        expect(iframely.querySelector('iframe')).to.not.be.null;
+      });
+    });
+
+    it('does not render placeholder with resizable param set and layout===responsive', () => {
+      const data = {
+        'data-id': TestID,
+        'height': '100',
+        'width': '100',
+        'resizable': '',
+        'layout': 'responsive',
+      };
+      return renderIframely(data).then((iframely) => {
+        const image = iframely.querySelector('img');
+        expect(image).to.be.null;
+        expect(iframely.querySelector('iframe')).to.not.be.null;
+      });
+    });
+
+    it('does not render with invalid key length', () => {
+      const data = {
+        'data-url': 'https://some-url.com',
+        'height': '100',
+        'width': '100',
+        'data-key': '',
+        'layout': 'fixed',
+      };
+      return allowConsoleError(() => {
+        return renderIframely(data).should.eventually.be.rejectedWith(
+          /Iframely data-key must also be set when you specify data-url parameter/
+        );
+      });
+    });
+
+    it('render iframe options properly', () => {
+      const data = {
+        'data-id': TestID,
+        'height': '100',
+        'width': '100',
+        'data-optionOne': 'value',
+        'data-option-two': 'value',
+        'data-img': 'something',
+        'layout': 'responsive',
+      };
+      return renderIframely(data).then((iframely) => {
+        const image = iframely.querySelector('img');
+        const iframe = iframely.querySelector('iframe');
+        expect(image).to.not.be.null;
+        expect(iframe).to.not.be.null;
+        expect(iframe.src.includes('&optionone=value&optionTwo=value')).to.be
+          .true;
+      });
+    });
+  }
+);
diff --git a/extensions/amp-iframely/0.1/test/validator-amp-iframely.html b/extensions/amp-iframely/0.1/test/validator-amp-iframely.html
new file mode 100644
index 0000000000000..1520b7819c478
--- /dev/null
+++ b/extensions/amp-iframely/0.1/test/validator-amp-iframely.html
@@ -0,0 +1,52 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-iframely tag. See the inline comments.
+-->
+<!DOCTYPE html>
+<html ⚡>
+<head>
+  <meta charset="utf-8" />
+  <title>Amp Iframely Demo</title>
+  <link rel="canonical" href="self.html" />
+  <meta name="viewport" content="width=device-width" />
+  <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>
+  <script async custom-element="amp-iframely" src="https://cdn.ampproject.org/v0/amp-iframely-latest.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <style amp-custom>
+    h1 {
+      margin: 1rem;
+    }
+  </style>
+</head>
+<body>
+  <!-- Valid -->
+  <amp-iframely data-id="UjEwgS" width="400" height="140" layout="responsive" resizable></amp-iframely>
+  <amp-iframely data-id="JQfo4N" data-domain="cdn.iframe.ly" width="400" height="225" layout="responsive"></amp-iframely>
+  <amp-iframely data-id="CsmRlq" width="400" height="213" layout="responsive"></amp-iframely>
+  <amp-iframely data-url="https://iframely.com/" data-key="8a237467d51be2771401abcabbd46d92" height="200" width="400" layout="responsive"></amp-iframely>
+
+  <!-- Invalid: Missing mandatory data-id attribute -->
+  <amp-iframely width="600" height="400"></amp-iframely>
+
+  <!-- Invalid: data-domain="example.com" -->
+  <amp-iframely data-id="JQfo4N" data-domain="example.com" width="400" height="225" layout="responsive"></amp-iframely>
+
+  <!-- Invalid: data-url without corresponding data-key -->
+  <amp-iframely data-url="https://iframely.com/" height="200" width="400" layout="responsive"></amp-iframely>
+</body>
+</html>
diff --git a/extensions/amp-iframely/0.1/test/validator-amp-iframely.out b/extensions/amp-iframely/0.1/test/validator-amp-iframely.out
new file mode 100644
index 0000000000000..8c1fbdf7cdd36
--- /dev/null
+++ b/extensions/amp-iframely/0.1/test/validator-amp-iframely.out
@@ -0,0 +1,59 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-iframely tag. See the inline comments.
+|  -->
+|  <!DOCTYPE html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8" />
+|    <title>Amp Iframely Demo</title>
+|    <link rel="canonical" href="self.html" />
+|    <meta name="viewport" content="width=device-width" />
+|    <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>
+|    <script async custom-element="amp-iframely" src="https://cdn.ampproject.org/v0/amp-iframely-latest.js"></script>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <style amp-custom>
+|      h1 {
+|        margin: 1rem;
+|      }
+|    </style>
+|  </head>
+|  <body>
+|    <!-- Valid -->
+|    <amp-iframely data-id="UjEwgS" width="400" height="140" layout="responsive" resizable></amp-iframely>
+|    <amp-iframely data-id="JQfo4N" data-domain="cdn.iframe.ly" width="400" height="225" layout="responsive"></amp-iframely>
+|    <amp-iframely data-id="CsmRlq" width="400" height="213" layout="responsive"></amp-iframely>
+|    <amp-iframely data-url="https://iframely.com/" data-key="8a237467d51be2771401abcabbd46d92" height="200" width="400" layout="responsive"></amp-iframely>
+|
+|    <!-- Invalid: Missing mandatory data-id attribute -->
+|    <amp-iframely width="600" height="400"></amp-iframely>
+>>   ^~~~~~~~~
+amp-iframely/0.1/test/validator-amp-iframely.html:44:2 The tag 'amp-iframely' is missing a mandatory attribute - pick one of ['data-id', 'data-url']. (see https://amp.dev/documentation/components/amp-iframely)
+|
+|    <!-- Invalid: data-domain="example.com" -->
+|    <amp-iframely data-id="JQfo4N" data-domain="example.com" width="400" height="225" layout="responsive"></amp-iframely>
+>>   ^~~~~~~~~
+amp-iframely/0.1/test/validator-amp-iframely.html:47:2 The attribute 'data-domain' in tag 'amp-iframely' is set to the invalid value 'example.com'. (see https://amp.dev/documentation/components/amp-iframely)
+|
+|    <!-- Invalid: data-url without corresponding data-key -->
+|    <amp-iframely data-url="https://iframely.com/" height="200" width="400" layout="responsive"></amp-iframely>
+>>   ^~~~~~~~~
+amp-iframely/0.1/test/validator-amp-iframely.html:50:2 The attribute 'data-key' in tag 'amp-iframely' is missing or incorrect, but required by attribute 'data-url'. (see https://amp.dev/documentation/components/amp-iframely)
+|  </body>
+|  </html>
diff --git a/extensions/amp-iframely/OWNERS.yaml b/extensions/amp-iframely/OWNERS.yaml
new file mode 100644
index 0000000000000..de4be727125be
--- /dev/null
+++ b/extensions/amp-iframely/OWNERS.yaml
@@ -0,0 +1,4 @@
+# For an explanation of the OWNERS.yaml rules and syntax, see:
+# https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example.yaml
+
+- ampproject/wg-ui-and-a11y
diff --git a/extensions/amp-iframely/amp-iframely.md b/extensions/amp-iframely/amp-iframely.md
new file mode 100644
index 0000000000000..c2b183f1d6a31
--- /dev/null
+++ b/extensions/amp-iframely/amp-iframely.md
@@ -0,0 +1,124 @@
+---
+$category@: social
+formats:
+  - websites
+  - stories
+teaser:
+  text: Displays Iframely.com-powered rich media embeds
+---
+
+<!--
+Copyright 2021 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.
+-->
+
+# amp-iframely
+
+Embeds and displays [**Iframely.com**](https://iframely.com)-powered rich media embeds from over 1900 third-party publishers. Shows URL previews as summary card for any other URL.
+
+[tip type="note"]
+
+**`<amp-iframely>`** embeds content through the third-party vendor **Iframely.com**. It should not be confused with [**`<amp-iframe>`**](https://go.amp.dev/c/amp-iframe), which embeds any URL directly.
+
+[/tip]
+
+<table>
+  <tr>
+    <td width="40%"><strong>Required Script</strong></td>
+    <td><code>&lt;script async custom-element="amp-iframely" src="https://cdn.ampproject.org/v0/amp-iframely-0.1.js">&lt;/script></code></td>
+  </tr>
+  <tr>
+    <td class="col-fourty"><strong><a href="https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout">Supported Layouts</a></strong></td>
+    <td>responsive, fixed-height</td>
+  </tr>
+</table>
+
+## Overview
+
+The `amp-iframely` connects you to Iframely cloud service. It provides responsive embeds codes and rich media support for over 1900 third party publishers. Plus summary cards as URL previews for the rest of the Internet.
+
+You'd likely get `amp-iframely` code generated by from Iframely APIs. But you may also skip making API calls and use Iframely in AMP directly (we recommend responsive layout, with resizable flag in that case).
+
+Please get your API key at <a href="https://iframely.com">iframely.com</a>.
+
+#### Example: Embed third party via content ID
+
+[example preview="inline" playground="true" imports="amp-iframely"][sourcecode:html]
+<amp-iframely width="400" height="225"
+    data-id="I8NNa1s"
+    layout="responsive"
+    data-img>
+</amp-iframely>
+[/sourcecode][/example]
+
+#### Example: Summary card for any URL via API key
+
+[example preview="inline" playground="true" imports="amp-iframely"][sourcecode:html]
+<amp-iframely height="140"
+    data-url="https://iframely.com"
+    data-key="30ef29b325c50219755786a371c281ad"
+    layout="fixed-height"
+    resizable>
+</amp-iframely>
+[/sourcecode][/example]
+
+Feel free to try any URL with the API key from the above example. However, it is restricted for use on amp.dev only.
+
+## Attributes
+
+### Indentifying
+
+There are two ways to identify rich media. Either with the help of Iframely-issued ID, or with a pair of media URL and your API key (MD5-hashed for security reasons):
+
+<table>
+  <tr>
+    <td width="40%"><strong>data-id</strong></td>
+    <td>Iframely <a href="https://iframely.com/docs/ids">content ID</a>, if available</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>data-url</strong></td>
+    <td><p>Alternatively, if no content ID, identify rich media by its canonical URL.</p>
+    </td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>data-key</strong></td>
+    <td><p>If <code>data-url</code> is used, also add the MD5 hash of your Iframely API key as <code>data-key</code> attribute. Hash your key, the unencrypted value won't work here.</p>
+    </td>
+  </tr>
+</table>
+
+### Placing
+
+`amp-iframely` supports responsive and fixed-height layouts:
+
+<table>
+  <tr>
+    <td width="40%"><strong>width</strong> and <strong>height</strong></td>
+    <td>Use both attributes for responsive media to define its aspect-ratio. Use only height for a fixed-height layout. If you don't have media sizes - use what works best as a placeholder, and add <code>resizable</code> as below.</td>
+  </tr> 
+  <tr>
+    <td width="40%"><strong>resizable</strong></strong></td>
+    <td>A flag to add event listener and adjust component's height automatically to fit and match the rich media content. This works with both responsive and fixed-height layouts.</td>
+  </tr> 
+  <tr>
+    <td width="40%"><strong>data-img</strong></td>
+    <td><strong>Empty</strong> attribute, indicating that rich media's thumbnail image should be used as a placeholder while the component and its content loads. No value please - Iframely will find the reqiured image address on its own.</td>
+  </tr>
+</table>
+
+Any other of Iframely's query-string <a href="https://iframely.com/docs/parameters">API parameters</a> can be passed as <code>data-</code> prefixed attribute. For example, <code>align="left"</code> API parameter becomes <code>data-align="left"</code> attribute. Custom <a href="https://iframely.com/docs/options">provider-specific options</a> can also be passed as <code>data-</code> attribute.
+
+## Validation
+
+As a mininum, either `data-id` attribute or a pair of `data-url` and `data-key` are required to identify the third party rich media content and authenticate with Iframely.
diff --git a/extensions/amp-iframely/validator-amp-iframely.protoascii b/extensions/amp-iframely/validator-amp-iframely.protoascii
new file mode 100644
index 0000000000000..1917a18a9ef19
--- /dev/null
+++ b/extensions/amp-iframely/validator-amp-iframely.protoascii
@@ -0,0 +1,68 @@
+#
+# Copyright 2021 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.
+#
+
+tags: {  # amp-iframely
+  html_format: AMP
+  tag_name: "SCRIPT"
+  extension_spec: {
+    name: "amp-iframely"
+    version: "0.1"
+    version: "latest"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # <amp-iframely>
+  html_format: AMP
+  tag_name: "AMP-IFRAMELY"
+  requires_extension: "amp-iframely"
+  # either data-id
+  attrs: {  # iframely generated ID of a widget
+    name: "data-id"
+    mandatory_oneof: "['data-id', 'data-url']"
+  }
+  attrs: { # iframe url to build widget from
+    name: "data-url"
+    mandatory_oneof: "['data-id', 'data-url']"
+    trigger: {
+      also_requires_attr: "data-key"
+    }
+  }
+  attrs: { name: "data-key" } # iframely key hash
+
+  # optional attributes
+  attrs: { name: "data-img" value: "" }
+  attrs: {
+    name: "data-border"
+    value_regex: "(\\d+)"
+  }
+  attrs: {
+    name: "data-domain"
+    value_regex: "^((?:[^\\.\\/]+\\.)?iframe\\.ly|if\\-cdn\\.com|iframely\\.net|oembed\\.vice\\.com|iframe\\.nbcnews\\.com)$"
+  }
+  attrs: { name: "resizable" value: "" }
+  # data-* attributes are converted into options
+  # for building iframely widget from url
+  attr_lists: "extended-amp-global"
+  spec_url: "https://amp.dev/documentation/components/amp-iframely"
+  amp_layout: {
+    supported_layouts: FILL
+    supported_layouts: FIXED
+    supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
+    supported_layouts: RESPONSIVE
+    supported_layouts: INTRINSIC
+  }
+}
diff --git a/extensions/amp-ima-video/0.1/amp-ima-video.js b/extensions/amp-ima-video/0.1/amp-ima-video.js
index a486ec7731fec..45d80fee22403 100644
--- a/extensions/amp-ima-video/0.1/amp-ima-video.js
+++ b/extensions/amp-ima-video/0.1/amp-ima-video.js
@@ -14,28 +14,59 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
-import {ImaPlayerData} from '../../../ads/google/ima-player-data';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {ImaPlayerData} from '../../../ads/google/ima/ima-player-data';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
 import {addUnsafeAllowAutoplay} from '../../../src/iframe-video';
 import {assertHttpsUrl} from '../../../src/url';
 import {
   childElementsByTag,
+  dispatchCustomEvent,
   isJsonScriptTag,
   removeElement,
 } from '../../../src/dom';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getConsentPolicyState} from '../../../src/consent';
 import {getData, listen} from '../../../src/event-helper';
 import {getIframe, preloadBootstrap} from '../../../src/3p-frame';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
-import {isEnumValue, isObject, toArray} from '../../../src/types';
+import {isEnumValue, isObject} from '../../../src/core/types';
 import {isLayoutSizeDefined} from '../../../src/layout';
+import {
+  observeContentSize,
+  unobserveContentSize,
+} from '../../../src/utils/size-observer';
+import {toArray} from '../../../src/core/types/array';
 
 /** @const */
 const TAG = 'amp-ima-video';
 
+const TYPE = 'ima-video';
+
+/**
+ * [tagName, attributes]
+ *   like:
+ *   ['SOURCE', {src: 'source.mp4'}]
+ * @type {!Array<string, !Object>}
+ */
+let SerializableChildDef;
+
+/**
+ * @param {!Element} element
+ * @return {!Object<string, *>}
+ */
+function serializeAttributes(element) {
+  const {attributes} = element;
+  const serialized = {};
+  for (let i = 0; i < attributes.length; i++) {
+    const {name, value} = attributes[i];
+    serialized[name] = value;
+  }
+  return serialized;
+}
+
 /**
  * @implements {../../../src/video-interface.VideoInterface}
  */
@@ -59,6 +90,9 @@ class AmpImaVideo extends AMP.BaseElement {
     /** @private {?Function} */
     this.unlistenMessage_ = null;
 
+    /** @private {?Array<!SerializableChildDef>} */
+    this.sourceChildren_ = null;
+
     /** @private {?string} */
     this.preconnectSource_ = null;
 
@@ -76,6 +110,11 @@ class AmpImaVideo extends AMP.BaseElement {
 
     /** @private {!ImaPlayerData} */
     this.playerData_ = new ImaPlayerData();
+
+    this.onResized_ = this.onResized_.bind(this);
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /** @override */
@@ -104,22 +143,18 @@ class AmpImaVideo extends AMP.BaseElement {
     const childElements = toArray(sourceElements).concat(
       toArray(trackElements)
     );
-    if (childElements.length > 0) {
-      const children = [];
-      childElements.forEach((child) => {
-        // Save the first source and first track to preconnect.
-        if (child.tagName == 'SOURCE' && !this.preconnectSource_) {
-          this.preconnectSource_ = child.src;
-        } else if (child.tagName == 'TRACK' && !this.preconnectTrack_) {
-          this.preconnectTrack_ = child.src;
-        }
-        children.push(child./*OK*/ outerHTML);
-      });
-      this.element.setAttribute(
-        'data-child-elements',
-        JSON.stringify(children)
-      );
-    }
+
+    this.sourceChildren_ = childElements.map((element) => {
+      const {tagName} = element;
+      const src = element.getAttribute('src');
+      // Save the first source and first track to preconnect.
+      if (tagName == 'SOURCE' && !this.preconnectSource_) {
+        this.preconnectSource_ = src;
+      } else if (tagName == 'TRACK' && !this.preconnectTrack_) {
+        this.preconnectTrack_ = src;
+      }
+      return [tagName, serializeAttributes(element)];
+    });
 
     // Handle IMASetting JSON
     const scriptElement = childElementsByTag(this.element, 'SCRIPT')[0];
@@ -151,7 +186,7 @@ class AmpImaVideo extends AMP.BaseElement {
       preconnect.url(this.getAmpDoc(), this.preconnectTrack_);
     }
     preconnect.url(this.getAmpDoc(), element.getAttribute('data-tag'));
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
   }
 
   /** @override */
@@ -171,14 +206,19 @@ class AmpImaVideo extends AMP.BaseElement {
     const consentPromise = consentPolicyId
       ? getConsentPolicyState(element, consentPolicyId)
       : Promise.resolve(null);
+    element.setAttribute(
+      'data-source-children',
+      JSON.stringify(this.sourceChildren_)
+    );
     return consentPromise.then((initialConsentState) => {
       const iframe = getIframe(
         win,
         element,
-        'ima-video',
+        TYPE,
         {initialConsentState},
         {allowFullscreen: true}
       );
+      iframe.title = this.element.title || 'IMA video';
 
       this.applyFillContent(iframe);
 
@@ -200,16 +240,12 @@ class AmpImaVideo extends AMP.BaseElement {
 
       installVideoManagerForDoc(element);
       Services.videoManagerForDoc(element).register(this);
+      observeContentSize(this.element, this.onResized_);
 
       return this.loadPromise(iframe).then(() => this.playerReadyPromise_);
     });
   }
 
-  /** @override */
-  viewportCallback(visible) {
-    this.element.dispatchCustomEvent(VideoEvents.VISIBILITY, {visible});
-  }
-
   /** @override */
   unlayoutCallback() {
     if (this.iframe_) {
@@ -219,19 +255,25 @@ class AmpImaVideo extends AMP.BaseElement {
     if (this.unlistenMessage_) {
       this.unlistenMessage_();
     }
+    unobserveContentSize(this.element, this.onResized_);
 
     const deferred = new Deferred();
     this.playerReadyPromise_ = deferred.promise;
     this.playerReadyResolver_ = deferred.resolve;
+
+    this.pauseHelper_.updatePlaying(false);
+
     return true;
   }
 
-  /** @override */
-  onLayoutMeasure() {
+  /**
+   * @param {!../layout-rect.LayoutSizeDef} size
+   * @private
+   */
+  onResized_({height, width}) {
     if (!this.iframe_) {
       return;
     }
-    const {width, height} = this.getLayoutBox();
     this.sendCommand_('resize', {'width': width, 'height': height});
   }
 
@@ -282,15 +324,26 @@ class AmpImaVideo extends AMP.BaseElement {
 
     const videoEvent = eventData['event'];
     if (isEnumValue(VideoEvents, videoEvent)) {
-      if (videoEvent == VideoEvents.LOAD) {
-        this.playerReadyResolver_(this.iframe_);
+      switch (videoEvent) {
+        case VideoEvents.LOAD:
+          this.playerReadyResolver_(this.iframe_);
+          break;
+        case VideoEvents.AD_START:
+        case VideoEvents.PLAY:
+        case VideoEvents.PLAYING:
+          this.pauseHelper_.updatePlaying(true);
+          break;
+        case VideoEvents.PAUSE:
+        case VideoEvents.ENDED:
+          this.pauseHelper_.updatePlaying(false);
+          break;
       }
-      this.element.dispatchCustomEvent(videoEvent);
+      dispatchCustomEvent(this.element, videoEvent);
       return;
     }
     if (videoEvent == ImaPlayerData.IMA_PLAYER_DATA) {
       this.playerData_ = /** @type {!ImaPlayerData} */ (eventData['data']);
-      this.element.dispatchCustomEvent(VideoEvents.LOADEDMETADATA);
+      dispatchCustomEvent(this.element, VideoEvents.LOADEDMETADATA);
       return;
     }
     if (videoEvent == 'fullscreenchange') {
@@ -318,12 +371,12 @@ class AmpImaVideo extends AMP.BaseElement {
 
   /** @override */
   play(unusedIsAutoplay) {
-    this.sendCommand_('playVideo');
+    this.sendCommand_('play');
   }
 
   /** @override */
   pause() {
-    this.sendCommand_('pauseVideo');
+    this.sendCommand_('pause');
   }
 
   /** @override */
@@ -333,7 +386,7 @@ class AmpImaVideo extends AMP.BaseElement {
 
   /** @override */
   unmute() {
-    this.sendCommand_('unMute');
+    this.sendCommand_('unmute');
   }
 
   /** @override */
@@ -348,7 +401,7 @@ class AmpImaVideo extends AMP.BaseElement {
 
   /** @override */
   fullscreenEnter() {
-    this.sendCommand_('enterFullscreen');
+    this.sendCommand_('requestFullscreen');
   }
 
   /** @override */
diff --git a/extensions/amp-ima-video/0.1/test/test-amp-ima-video.js b/extensions/amp-ima-video/0.1/test/test-amp-ima-video.js
index 2a608ced2230f..b2294c4d67d81 100644
--- a/extensions/amp-ima-video/0.1/test/test-amp-ima-video.js
+++ b/extensions/amp-ima-video/0.1/test/test-amp-ima-video.js
@@ -1,5 +1,5 @@
 /**
- * Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+ * Copyright 2021 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.
@@ -15,1416 +15,54 @@
  */
 
 import '../amp-ima-video';
-import * as imaVideoObj from '../../../../ads/google/imaVideo';
-
-import {CONSENT_POLICY_STATE} from '../../../../src/consent-state';
-import {Services} from '../../../../src/services';
+import {htmlFor} from '../../../../src/static-template';
+import {installResizeObserverStub} from '../../../../testing/resize-observer-stub';
+import {waitForChildPromise} from '../../../../src/dom';
 
 describes.realWin(
   'amp-ima-video',
   {
     amp: {
+      runtimeOn: true,
       extensions: ['amp-ima-video'],
     },
   },
   (env) => {
-    const srcUrl = 'http://rmcdn.2mdn.net/Demo/vast_inspector/android.mp4';
-    const adTagUrl =
-      'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=';
-
-    let win, doc, timer;
+    let html;
 
     beforeEach(() => {
-      win = env.win;
-      win.context = {};
-      doc = win.document;
-      timer = Services.timerFor(env.win);
-    });
-
-    function getVideoPlayerMock() {
-      return {
-        load: function () {},
-        addEventListener: function () {},
-        removeEventListener: function () {},
-        play: function () {},
-        pause: function () {},
-        muted: false,
-        played: {
-          length: 0,
-        },
-      };
-    }
-
-    function getAdsManagerMock(mock = {}) {
-      return {
-        addEventListener: () => {},
-        destroy: () => {},
-        getRemainingTime: () => mock.remainingTime,
-        init: () => {},
-        resize: () => {},
-        resume: () => {},
-        setVolume: () => {},
-        start: () => {},
-      };
-    }
-
-    it('adds ad container', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const video = doc.body.querySelector('#ima-content-player');
-      expect(video).not.to.be.undefined;
-    });
-
-    it('adds video element', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const video = doc.body.querySelector('#ima-ad-container');
-      expect(video).not.to.be.undefined;
-    });
-
-    it('handles click', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const bigPlayDivMock = {
-        style: {
-          display: '',
-        },
-        removeEventListener() {},
-      };
-      const adDisplayContainerMock = {initialize() {}};
-      const initSpy = env.sandbox.spy(adDisplayContainerMock, 'initialize');
-      const videoPlayerMock = getVideoPlayerMock();
-      const loadSpy = env.sandbox.spy(videoPlayerMock, 'load');
-      const mockAdsLoader = {requestAds() {}};
-      imaVideoObj.setAdsLoaderForTesting(mockAdsLoader);
-      //const playAdsSpy = env.sandbox.spy(imaVideoObj, 'playAds');
-      //const playAdsFunc = imaVideoObj.playAds;
-      //const playAdsSpy = env.sandbox.spy(playAdsFunc);
-      imaVideoObj.setBigPlayDivForTesting(bigPlayDivMock);
-      imaVideoObj.setAdDisplayContainerForTesting(adDisplayContainerMock);
-      imaVideoObj.setVideoPlayerForTesting(videoPlayerMock);
-
-      imaVideoObj.onBigPlayClick();
-
-      expect(imaVideoObj.getPropertiesForTesting().playbackStarted).to.be.true;
-      expect(imaVideoObj.getPropertiesForTesting().uiTicker).to.exist;
-      expect(bigPlayDivMock.style.display).to.eql('none');
-      expect(initSpy).to.be.called;
-      expect(loadSpy).to.be.called;
-      // TODO - Fix one I figure out how to spy on internals.
-      //expect(playAdsSpy).to.be.called;
-    });
-
-    it('updates ad countdown timer', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      const videoDefaults = {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      };
-      const tests = [
-        {
-          'mock': {'adPosition': 1, 'totalAds': 1, 'remainingTime': 0},
-          'expected': 'Ad (1 of 1): 0:00',
-        },
-        {
-          'mock': {'adPosition': 1, 'totalAds': 1, 'remainingTime': 2},
-          'expected': 'Ad (1 of 1): 0:02',
-        },
-        {
-          'mock': {
-            'adPosition': 1,
-            'totalAds': 1,
-            'remainingTime': 3.923462062,
-          },
-          'expected': 'Ad (1 of 1): 0:03',
-        },
-        {
-          'mock': {'adPosition': 1, 'totalAds': 3, 'remainingTime': 1},
-          'expected': 'Ad (1 of 3): 0:01',
-        },
-        {
-          'mock': {'adPosition': 2, 'totalAds': 79, 'remainingTime': 7600},
-          'expected': 'Ad (2 of 79): 126:40',
-        },
-        {
-          'mock': {'adPosition': 1, 'totalAds': 3, 'remainingTime': 0},
-          'label': 'Publicidad',
-          'expected': 'Publicidad: 0:00',
-        },
-        {
-          'mock': {'adPosition': 1, 'totalAds': 1, 'remainingTime': 0},
-          'label': 'Publicidad (%s de %s)',
-          'expected': 'Publicidad (1 de 1): 0:00',
-        },
-        {
-          'mock': {'adPosition': 1, 'totalAds': 3, 'remainingTime': 0},
-          'label': 'Publicidad %s',
-          'expected': 'Publicidad 1: 0:00',
-        },
-      ];
-
-      tests.forEach(({mock, label, expected}) => {
-        let defaults = videoDefaults;
-        if (label) {
-          defaults = Object.assign(defaults, {adLabel: label});
-        }
-        imaVideoObj.imaVideo(win, defaults);
-        const {controlsDiv} = imaVideoObj.getPropertiesForTesting();
-        const countdownDiv = controlsDiv.querySelector('#ima-countdown > div');
-        const adsManagerMock = getAdsManagerMock({
-          remainingTime: mock.remainingTime,
-        });
-        imaVideoObj.setAdsManagerForTesting(adsManagerMock);
-        imaVideoObj.onAdProgress({
-          getAdData: () => mock,
-        });
-        expect(countdownDiv.textContent).to.eql(expected);
-      });
-    });
-
-    it('plays ads with ads manager', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const mockGlobal = {};
-      mockGlobal.google = {
-        ima: {
-          ViewMode: {
-            NORMAL: 'normal',
-          },
-        },
-      };
-      const mockAdsManager = getAdsManagerMock();
-      const initSpy = env.sandbox.spy(mockAdsManager, 'init');
-      const startSpy = env.sandbox.spy(mockAdsManager, 'start');
-      imaVideoObj.setAdsManagerForTesting(mockAdsManager);
-      imaVideoObj.setVideoWidthAndHeightForTesting(100, 200);
-
-      imaVideoObj.playAds(mockGlobal);
-
-      expect(initSpy).to.be.calledWith(100, 200, 'normal');
-      expect(startSpy).to.be.called;
-    });
-
-    it('plays ads with ads manager ad request failed', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      //const playVideoSpy = env.sandbox.spy(imaVideoObj, 'playVideo');
-
-      imaVideoObj.playAds();
-
-      // TODO - Fix when I can spy on internals.
-      //expect(playVideoSpy).to.be.called;
-      // Just here so the test passes until I fix above issues
-      expect(true).to.be.true;
-    });
-
-    it('handles content ended', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const mockAdsLoader = {contentComplete() {}};
-      const completeSpy = env.sandbox.spy(mockAdsLoader, 'contentComplete');
-      imaVideoObj.setAdsLoaderForTesting(mockAdsLoader);
-
-      imaVideoObj.onContentEnded();
-
-      expect(imaVideoObj.getPropertiesForTesting().contentComplete).to.be.true;
-      expect(completeSpy).to.have.been.called;
-    });
-
-    it('handles ads manager loaded', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const mockAdsRenderingSettings = {};
-      const mockGlobal = {};
-      mockGlobal.google = {};
-      mockGlobal.google.ima = {};
-      mockGlobal.google.ima.AdsRenderingSettings = function () {
-        return mockAdsRenderingSettings;
-      };
-      mockGlobal.google.ima.AdErrorEvent = {};
-      mockGlobal.google.ima.AdErrorEvent.Type = {
-        AD_ERROR: 'aderror',
-      };
-      mockGlobal.google.ima.AdEvent = {};
-      mockGlobal.google.ima.AdEvent.Type = {
-        AD_PROGRESS: 'adprogress',
-        CONTENT_PAUSE_REQUESTED: 'cpr',
-        CONTENT_RESUME_REQUESTED: 'crr',
-      };
-      const mockAdsManager = getAdsManagerMock();
-      const mockAdsManagerLoadedEvent = {
-        getAdsManager: () => mockAdsManager,
-      };
-      const amleSpy = env.sandbox.spy(
-        mockAdsManagerLoadedEvent,
-        'getAdsManager'
-      );
-      const addEventListenerSpy = env.sandbox.spy(
-        mockAdsManager,
-        'addEventListener'
-      );
-      const mockVideoPlayer = {};
-      imaVideoObj.setVideoPlayerForTesting(mockVideoPlayer);
-      imaVideoObj.setMuteAdsManagerOnLoadedForTesting(false);
-
-      imaVideoObj.onAdsManagerLoaded(mockGlobal, mockAdsManagerLoadedEvent);
-
-      expect(
-        mockAdsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete
-      ).to.be.true;
-      expect(amleSpy).to.be.calledWith(
-        mockVideoPlayer,
-        mockAdsRenderingSettings
-      );
-      expect(addEventListenerSpy).to.be.calledWith('aderror');
-      expect(addEventListenerSpy).to.be.calledWith('adprogress');
-      expect(addEventListenerSpy).to.be.calledWith('cpr');
-      expect(addEventListenerSpy).to.be.calledWith('crr');
-    });
-
-    it('handles ads manager loaded and muted', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const mockAdsRenderingSettings = {};
-      const mockGlobal = {};
-      mockGlobal.google = {};
-      mockGlobal.google.ima = {};
-      mockGlobal.google.ima.AdsRenderingSettings = function () {
-        return mockAdsRenderingSettings;
-      };
-      mockGlobal.google.ima.AdErrorEvent = {};
-      mockGlobal.google.ima.AdErrorEvent.Type = {
-        AD_ERROR: 'aderror',
-      };
-      mockGlobal.google.ima.AdEvent = {};
-      mockGlobal.google.ima.AdEvent.Type = {
-        AD_PROGRESS: 'adprogress',
-        CONTENT_PAUSE_REQUESTED: 'cpr',
-        CONTENT_RESUME_REQUESTED: 'crr',
-      };
-      const mockAdsManager = getAdsManagerMock();
-      const mockAdsManagerLoadedEvent = {
-        getAdsManager: () => mockAdsManager,
-      };
-      const amleSpy = env.sandbox.spy(
-        mockAdsManagerLoadedEvent,
-        'getAdsManager'
-      );
-      const addEventListenerSpy = env.sandbox.spy(
-        mockAdsManager,
-        'addEventListener'
-      );
-      const setVolumeSpy = env.sandbox.spy(mockAdsManager, 'setVolume');
-      const mockVideoPlayer = {};
-      imaVideoObj.setVideoPlayerForTesting(mockVideoPlayer);
-      imaVideoObj.setMuteAdsManagerOnLoadedForTesting(true);
-
-      imaVideoObj.onAdsManagerLoaded(mockGlobal, mockAdsManagerLoadedEvent);
-
-      expect(
-        mockAdsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete
-      ).to.be.true;
-      expect(amleSpy).to.be.calledWith(
-        mockVideoPlayer,
-        mockAdsRenderingSettings
-      );
-      expect(addEventListenerSpy).to.be.calledWith('aderror');
-      expect(addEventListenerSpy).to.be.calledWith('adprogress');
-      expect(addEventListenerSpy).to.be.calledWith('cpr');
-      expect(addEventListenerSpy).to.be.calledWith('crr');
-      expect(setVolumeSpy).to.be.calledWith(0);
-    });
-
-    it('handles ads loader error', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      //const playVideoSpy = env.sandbox.spy(imaVideoObj, 'playVideo');
-
-      imaVideoObj.onAdsLoaderError();
-
-      expect(imaVideoObj.getPropertiesForTesting().adRequestFailed).to.be.true;
-      // TODO - Fix when I can spy on internals.
-      //expect(playVideoSpy).to.have.been.called;
-    });
-
-    it('handles ad error', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const adsManagerMock = getAdsManagerMock();
-      const destroySpy = env.sandbox.spy(adsManagerMock, 'destroy');
-      //const playVideoSpy = sandbox.spy(imaVideoObj, 'playVideo');
-      imaVideoObj.setAdsManagerForTesting(adsManagerMock);
-
-      imaVideoObj.onAdError();
-
-      expect(destroySpy).to.have.been.called;
-      // TODO - Fix when I can spy on internals.
-      //expect(playVideoSpy).to.have.been.called;
-    });
-
-    it('pauses content', () => {
-      // set up test
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const videoMock = getVideoPlayerMock();
-      const removeEventListenerSpy = env.sandbox.spy(
-        videoMock,
-        'removeEventListener'
-      );
-      //const hideControlsSpy = env.sandbox.spy(imaVideoObj, 'hideControls');
-      const pauseSpy = env.sandbox.spy(videoMock, 'pause');
-      imaVideoObj.setVideoPlayerForTesting(videoMock);
-      let properties = imaVideoObj.getPropertiesForTesting();
-      expect(properties.adsActive).to.be.false;
-
-      // run test
-      imaVideoObj.onContentPauseRequested();
-
-      // check results
-      properties = imaVideoObj.getPropertiesForTesting();
-      expect(properties.adsActive).to.be.true;
-      expect(removeEventListenerSpy).to.have.been.calledWith(
-        properties.interactEvent
-      );
-      expect(properties.adContainerDiv.style.display).to.eql('block');
-      expect(removeEventListenerSpy).to.have.been.calledWith('ended');
-      // TODO - Fix when I can spy on internals.
-      //expect(hideControlsSpy).to.have.been.called;
-      expect(pauseSpy).to.have.been.called;
-    });
-
-    it('pauses content and resizes ads manager', () => {
-      // set up test
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const videoMock = getVideoPlayerMock();
-      const removeEventListenerSpy = env.sandbox.spy(
-        videoMock,
-        'removeEventListener'
-      );
-      //const hideControlsSpy = env.sandbox.spy(imaVideoObj, 'hideControls');
-      const pauseSpy = env.sandbox.spy(videoMock, 'pause');
-      imaVideoObj.setVideoPlayerForTesting(videoMock);
-      const adsManagerMock = getAdsManagerMock();
-      const mockGlobal = {
-        google: {
-          ima: {
-            ViewMode: {
-              NORMAL: 'normal',
-            },
-          },
-        },
-      };
-      const resizeSpy = env.sandbox.spy(adsManagerMock, 'resize');
-      imaVideoObj.setAdsManagerDimensionsOnLoadForTesting(100, 200);
-      imaVideoObj.setAdsManagerForTesting(adsManagerMock);
-
-      // run test
-      imaVideoObj.onContentPauseRequested(mockGlobal);
-
-      // check results
-      const properties = imaVideoObj.getPropertiesForTesting();
-      expect(resizeSpy).to.have.been.calledWith(100, 200, 'normal');
-      expect(properties.adsManagerWidthOnLoad).to.be.null;
-      expect(properties.adsManagerHeightOnLoad).to.be.null;
-      expect(properties.adsActive).to.be.true;
-      expect(removeEventListenerSpy).to.have.been.calledWith(
-        properties.interactEvent
-      );
-      expect(properties.adContainerDiv.style.display).to.eql('block');
-      expect(removeEventListenerSpy).to.have.been.calledWith('ended');
-      // TODO - Fix when I can spy on internals.
-      //expect(hideControlsSpy).to.have.been.called;
-      expect(pauseSpy).to.have.been.called;
-    });
-
-    it('shows modified controls when content is paused', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const videoMock = getVideoPlayerMock();
-      const adsManagerMock = getAdsManagerMock();
-      const mockGlobal = {
-        google: {
-          ima: {
-            ViewMode: {
-              NORMAL: 'normal',
-            },
-          },
-        },
-      };
-      imaVideoObj.setVideoPlayerForTesting(videoMock);
-      imaVideoObj.setAdsManagerDimensionsOnLoadForTesting(100, 200);
-      imaVideoObj.setAdsManagerForTesting(adsManagerMock);
-      const {controlsDiv} = imaVideoObj.getPropertiesForTesting();
-      expect(controlsDiv).not.to.be.null;
-      const countdownWrapperDiv = controlsDiv.querySelector('#ima-countdown');
-      expect(countdownWrapperDiv).not.to.be.null;
-      const playPauseDiv = controlsDiv.querySelector('#ima-play-pause');
-      expect(playPauseDiv).not.to.be.null;
-      const timeDiv = controlsDiv.querySelector('#ima-time');
-      expect(timeDiv).not.to.be.null;
-      const progressBarWrapperDiv = controlsDiv.querySelector(
-        '#ima-progress-wrapper'
-      );
-      expect(progressBarWrapperDiv).not.to.be.null;
-      const muteUnmuteDiv = controlsDiv.querySelector('#ima-mute-unmute');
-      expect(muteUnmuteDiv).not.to.be.null;
-      const fullscreenDiv = controlsDiv.querySelector('#ima-fullscreen');
-      expect(fullscreenDiv).not.to.be.null;
-      // expect controls to be hidden initially
-      expect(controlsDiv.style.display).to.eql('none');
-      expect(countdownWrapperDiv.style.display).to.eql('none');
-      // call pause function to display ads
-      imaVideoObj.onContentPauseRequested(mockGlobal);
-      // expect a subset of controls to be hidden / displayed
-      expect(controlsDiv.style.display).not.to.eql('none');
-      expect(countdownWrapperDiv.style.display).not.to.eql('none');
-      expect(playPauseDiv.style.display).not.to.eql('none');
-      expect(timeDiv.style.display).to.eql('none');
-      expect(progressBarWrapperDiv.style.display).to.eql('none');
-      expect(muteUnmuteDiv.style.display).not.to.eql('none');
-      expect(fullscreenDiv.style.display).not.to.eql('none');
-    });
-
-    it('resumes content', () => {
-      // set up test
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const videoMock = getVideoPlayerMock();
-      const addEventListenerSpy = env.sandbox.spy(
-        videoMock,
-        'addEventListener'
-      );
-      //const playVideoSpy = env.sandbox.spy(imaVideoObj, 'playVideo');
-      imaVideoObj.setVideoPlayerForTesting(videoMock);
-      imaVideoObj.setContentCompleteForTesting(false);
-
-      // run test
-      imaVideoObj.onContentResumeRequested();
-
-      // check results
-      const properties = imaVideoObj.getPropertiesForTesting();
-      expect(properties.adsActive).to.be.false;
-      expect(addEventListenerSpy).to.have.been.calledWith(
-        properties.interactEvent
-      );
-      expect(addEventListenerSpy).to.have.been.calledWith('ended');
-      // TODO - Fix when I can spy on internals.
-      //expect(playVideoSpy).to.have.been.called;
-    });
-
-    it('resumes content with content complete', () => {
-      // set up test
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const videoMock = getVideoPlayerMock();
-      const addEventListenerSpy = env.sandbox.spy(
-        videoMock,
-        'addEventListener'
-      );
-      //const playVideoSpy = env.sandbox.spy(imaVideoObj, 'playVideo');
-      imaVideoObj.setVideoPlayerForTesting(videoMock);
-      imaVideoObj.setContentCompleteForTesting(true);
-
-      // run test
-      imaVideoObj.onContentResumeRequested();
-
-      // check results
-      const properties = imaVideoObj.getPropertiesForTesting();
-      expect(properties.adsActive).to.be.false;
-      expect(addEventListenerSpy).to.have.been.calledWith(
-        properties.interactEvent
-      );
-      expect(addEventListenerSpy).to.have.been.calledWith('ended');
-      // TODO - Fix when I can spy on internals.
-      //expect(playVideoSpy).to.have.been.called;
-    });
-
-    it('controls are restored after content resumes', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      imaVideoObj.setVideoPlayerForTesting(getVideoPlayerMock());
-      imaVideoObj.setContentCompleteForTesting(true);
-      // expect a subset of controls to be hidden / displayed during ad
-      const {controlsDiv} = imaVideoObj.getPropertiesForTesting();
-      expect(controlsDiv).not.to.be.null;
-      const countdownWrapperDiv = controlsDiv.querySelector('#ima-countdown');
-      expect(countdownWrapperDiv).not.to.be.null;
-      const playPauseDiv = controlsDiv.querySelector('#ima-play-pause');
-      expect(playPauseDiv).not.to.be.null;
-      const timeDiv = controlsDiv.querySelector('#ima-time');
-      expect(timeDiv).not.to.be.null;
-      const progressBarWrapperDiv = controlsDiv.querySelector(
-        '#ima-progress-wrapper'
-      );
-      expect(progressBarWrapperDiv).not.to.be.null;
-      const muteUnmuteDiv = controlsDiv.querySelector('#ima-mute-unmute');
-      expect(muteUnmuteDiv).not.to.be.null;
-      const fullscreenDiv = controlsDiv.querySelector('#ima-fullscreen');
-      expect(fullscreenDiv).not.to.be.null;
-      imaVideoObj.showAdControls();
-      expect(controlsDiv.style.display).not.to.eql('none');
-      expect(countdownWrapperDiv.style.display).not.to.eql('none');
-      expect(playPauseDiv.style.display).not.to.eql('none');
-      expect(timeDiv.style.display).to.eql('none');
-      expect(progressBarWrapperDiv.style.display).to.eql('none');
-      expect(muteUnmuteDiv.style.display).not.to.eql('none');
-      expect(fullscreenDiv.style.display).not.to.eql('none');
-      // resume content after ad finishes
-      imaVideoObj.onContentResumeRequested();
-      // expect default control buttons to be displayed again
-      expect(countdownWrapperDiv.style.display).to.eql('none');
-      expect(playPauseDiv.style.display).not.to.eql('none');
-      expect(timeDiv.style.display).not.to.eql('none');
-      expect(progressBarWrapperDiv.style.display).not.to.eql('none');
-      expect(muteUnmuteDiv.style.display).not.to.eql('none');
-      expect(fullscreenDiv.style.display).not.to.eql('none');
-      expect(controlsDiv.style.display).not.to.eql('none');
-    });
-
-    it('ad controls are smaller when skippable on mobile', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      const videoDefaults = {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      };
-      imaVideoObj.imaVideo(win, videoDefaults);
-
-      const ad = {
-        skippable: {getSkipTimeOffset: () => 30},
-        unskippable: {getSkipTimeOffset: () => -1},
-      };
-      const video = {
-        hasMobileStyles: 400,
-        noMobileStyles: 401,
-      };
-
-      const tests = [
-        {
-          msg: 'Controls should be small when ad is skippable and mobile',
-          ad: ad.skippable,
-          videoSize: video.hasMobileStyles,
-          expected: {heightControls: '20px', heightButtons: '18px'},
-        },
-        {
-          msg: 'Controls should be tall when ad is not skippable',
-          ad: ad.unskippable,
-          videoSize: video.hasMobileStyles,
-          expected: {heightControls: '30px', heightButtons: '22px'},
-        },
-        {
-          msg: 'Controls should be tall when ad is not mobile',
-          ad: ad.skippable,
-          videoSize: video.noMobileStyles,
-          expected: {heightControls: '30px', heightButtons: '22px'},
-        },
-      ];
-      tests.forEach(({ad, videoSize, expected, msg}) => {
-        imaVideoObj.setVideoWidthAndHeightForTesting(videoSize, 300);
-        imaVideoObj.onAdLoad({getAd: () => ad});
-        imaVideoObj.showAdControls();
-        const {controlsDiv} = imaVideoObj.getPropertiesForTesting();
-        const muteUnmuteDiv = controlsDiv.querySelector('#ima-mute-unmute');
-        const fullscreenDiv = controlsDiv.querySelector('#ima-fullscreen');
-        expect(controlsDiv.style.height).to.eql(expected.heightControls, msg);
-        expect(muteUnmuteDiv.style.height).to.eql(expected.heightButtons, msg);
-        expect(fullscreenDiv.style.height).to.eql(expected.heightButtons, msg);
-      });
-    });
-
-    it(
-      'shows bigPlayDiv with content complete, ' +
-        'when content resume is called',
-      () => {
-        const div = doc.createElement('div');
-        div.setAttribute('id', 'c');
-        doc.body.appendChild(div);
-
-        imaVideoObj.imaVideo(win, {
-          width: 640,
-          height: 360,
-          src: srcUrl,
-          tag: adTagUrl,
-        });
-        const videoMock = getVideoPlayerMock();
-        const addEventListenerSpy = env.sandbox.spy(
-          videoMock,
-          'addEventListener'
-        );
-        imaVideoObj.setVideoPlayerForTesting(videoMock);
-        imaVideoObj.setContentCompleteForTesting(true);
-
-        imaVideoObj.onContentResumeRequested();
-
-        const imaVideoProperties = imaVideoObj.getPropertiesForTesting();
-
-        expect(imaVideoProperties.adsActive).to.be.false;
-        expect(addEventListenerSpy).to.have.been.calledWith(
-          imaVideoProperties.interactEvent
-        );
-        expect(addEventListenerSpy).to.have.been.calledWith('ended');
-        expect(imaVideoProperties.bigPlayDiv.style.display).to.be.equal(
-          'table-cell'
-        );
-      }
-    );
-
-    it('shows bigPlayDiv with allAdsCompleted, and content ended', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      imaVideoObj.setAllAdsCompletedForTesting(true);
-
-      imaVideoObj.onContentEnded();
-
-      const imaVideoProperties = imaVideoObj.getPropertiesForTesting();
-
-      expect(imaVideoProperties.bigPlayDiv.style.display).to.be.equal(
-        'table-cell'
-      );
-    });
-
-    it(
-      'does not show bigPlayDiv when content is resumed, ' +
-        'and not content complete',
-      () => {
-        const div = doc.createElement('div');
-        div.setAttribute('id', 'c');
-        doc.body.appendChild(div);
-
-        imaVideoObj.imaVideo(win, {
-          width: 640,
-          height: 360,
-          src: srcUrl,
-          tag: adTagUrl,
-        });
-        const videoMock = getVideoPlayerMock();
-        const addEventListenerSpy = env.sandbox.spy(
-          videoMock,
-          'addEventListener'
-        );
-        imaVideoObj.setVideoPlayerForTesting(videoMock);
-
-        imaVideoObj.onBigPlayClick();
-        imaVideoObj.onContentResumeRequested();
-
-        const imaVideoProperties = imaVideoObj.getPropertiesForTesting();
-
-        expect(imaVideoProperties.adsActive).to.be.false;
-        expect(addEventListenerSpy).to.have.been.calledWith(
-          imaVideoProperties.interactEvent
-        );
-        expect(addEventListenerSpy).to.have.been.calledWith('ended');
-        expect(imaVideoProperties.bigPlayDiv.style.display).to.be.equal('none');
-      }
-    );
-
-    it('updates UI', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-
-      imaVideoObj.updateUi(0, 60);
-      expect(imaVideoObj.getPropertiesForTesting().timeNode.textContent).to.eql(
-        '0:00 / 1:00'
-      );
-      expect(
-        imaVideoObj.getPropertiesForTesting().progressLine.style.width
-      ).to.eql('0%');
-      expect(
-        imaVideoObj.getPropertiesForTesting().progressMarkerDiv.style.left
-      ).to.eql('-1%');
-      imaVideoObj.updateUi(30, 60);
-      expect(imaVideoObj.getPropertiesForTesting().timeNode.textContent).to.eql(
-        '0:30 / 1:00'
-      );
-      expect(
-        imaVideoObj.getPropertiesForTesting().progressLine.style.width
-      ).to.eql('50%');
-      expect(
-        imaVideoObj.getPropertiesForTesting().progressMarkerDiv.style.left
-      ).to.eql('49%');
-      imaVideoObj.updateUi(60, 60);
-      expect(imaVideoObj.getPropertiesForTesting().timeNode.textContent).to.eql(
-        '1:00 / 1:00'
-      );
-      expect(
-        imaVideoObj.getPropertiesForTesting().progressLine.style.width
-      ).to.eql('100%');
-      expect(
-        imaVideoObj.getPropertiesForTesting().progressMarkerDiv.style.left
-      ).to.eql('99%');
-    });
-
-    it('formats time', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-
-      let formattedTime = imaVideoObj.formatTime(0);
-      expect(formattedTime).to.eql('0:00');
-      formattedTime = imaVideoObj.formatTime(55);
-      expect(formattedTime).to.eql('0:55');
-      formattedTime = imaVideoObj.formatTime(60);
-      expect(formattedTime).to.eql('1:00');
-      formattedTime = imaVideoObj.formatTime(65);
-      expect(formattedTime).to.eql('1:05');
-      formattedTime = imaVideoObj.formatTime(3600);
-      expect(formattedTime).to.eql('1:00:00');
-      formattedTime = imaVideoObj.formatTime(3605);
-      expect(formattedTime).to.eql('1:00:05');
-      formattedTime = imaVideoObj.formatTime(3665);
-      expect(formattedTime).to.eql('1:01:05');
-    });
-
-    it('zero pads', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-
-      let padded = imaVideoObj.zeroPad(11);
-      expect(padded).to.eql('11');
-      padded = imaVideoObj.zeroPad(1);
-      expect(padded).to.eql('01');
-    });
-
-    // TODO - FIX ONCE I FIGURE OUT HOW TO SPY ON INTERNAL METHODS
-    it('plays on click', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      imaVideoObj.setPlayerStateForTesting(
-        imaVideoObj.getPropertiesForTesting().PlayerStates.PAUSED
-      );
-      //const playVideoSpy = env.sandbox.spy(imaVideoObj, 'playVideo');
-
-      imaVideoObj.onPlayPauseClick();
-
-      //expect(playVideoSpy).to.have.been.called;
-      expect(true).to.be.true;
-    });
-
-    // TODO - FIX ONCE I FIGURE OUT HOW TO SPY ON INTERNAL METHODS
-    it('pauses on click', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      imaVideoObj.setPlayerStateForTesting(
-        imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING
-      );
-      //const pauseVideoSpy = env.sandbox.spy(imaVideoObj, 'pauseVideo');
-
-      imaVideoObj.onPlayPauseClick();
-
-      //expect(pauseVideoSpy).to.have.been.called;
-      expect(true).to.be.true;
-    });
-
-    it('plays video', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const videoMock = getVideoPlayerMock();
-      const playSpy = env.sandbox.spy(videoMock, 'play');
-      imaVideoObj.setVideoPlayerForTesting(videoMock);
-
-      imaVideoObj.playVideo();
-
-      expect(
-        imaVideoObj.getPropertiesForTesting().adContainerDiv.style.display
-      ).to.eql('none');
-      expect(imaVideoObj.getPropertiesForTesting().playerState).to.eql(
-        imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING
-      );
-      // TODO - Why doesn't this work?
-      //expect(showControlsSpy).to.have.been.called;
-      expect(playSpy).to.have.been.called;
-    });
-
-    it('pauses video', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const videoMock = getVideoPlayerMock();
-      const pauseSpy = env.sandbox.spy(videoMock, 'pause');
-      imaVideoObj.setVideoPlayerForTesting(videoMock);
-      //const showControlsSpy = env.sandbox.spy(imaVideoObj, 'showControls');
-      imaVideoObj.getPropertiesForTesting().playerState = imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING;
-
-      imaVideoObj.pauseVideo({});
-
-      expect(pauseSpy).to.have.been.called;
-      expect(imaVideoObj.getPropertiesForTesting().playerState).to.eql(
-        imaVideoObj.getPropertiesForTesting().PlayerStates.PAUSED
-      );
-      // TODO - Why doesn't this work?
-      //expect(showControlsSpy).to.have.been.called;
-    });
-
-    it('mutes on click', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const videoMock = getVideoPlayerMock();
-      imaVideoObj.setVideoPlayerForTesting(videoMock);
-      const adsManagerMock = getAdsManagerMock();
-      imaVideoObj.setAdsManagerForTesting(adsManagerMock);
-      imaVideoObj.setVideoPlayerMutedForTesting(false);
-      //const pauseVideoSpy = env.sandbox.spy(imaVideoObj, 'pauseVideo');
-
-      imaVideoObj.onMuteUnmuteClick();
-
-      const isMuted = imaVideoObj.getPropertiesForTesting().videoPlayer.muted;
-
-      //expect(pauseVideoSpy).to.have.been.called;
-      expect(isMuted).to.be.true;
-    });
-
-    it('unmutes on click', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const videoMock = getVideoPlayerMock();
-      imaVideoObj.setVideoPlayerForTesting(videoMock);
-      const adsManagerMock = getAdsManagerMock();
-      imaVideoObj.setAdsManagerForTesting(adsManagerMock);
-      imaVideoObj.setVideoPlayerMutedForTesting(true);
-      //const pauseVideoSpy = env.sandbox.spy(imaVideoObj, 'pauseVideo');
-
-      imaVideoObj.onMuteUnmuteClick();
-
-      const isMuted = imaVideoObj.getPropertiesForTesting().videoPlayer.muted;
-
-      //expect(pauseVideoSpy).to.have.been.called;
-      expect(isMuted).to.be.false;
-    });
-
-    it('pauses video after webkit end fullscreen', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      const videoMock = getVideoPlayerMock();
-      const pauseSpy = env.sandbox.spy(videoMock, 'pause');
-      const removeEventListenerSpy = env.sandbox.spy(
-        videoMock,
-        'removeEventListener'
-      );
-      imaVideoObj.setVideoPlayerForTesting(videoMock);
-      //const showControlsSpy = env.sandbox.spy(imaVideoObj, 'showControls');
-      imaVideoObj.getPropertiesForTesting().playerState = imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING;
-
-      imaVideoObj.pauseVideo({type: 'webkitendfullscreen'});
-
-      expect(pauseSpy).to.have.been.called;
-      expect(imaVideoObj.getPropertiesForTesting().playerState).to.eql(
-        imaVideoObj.getPropertiesForTesting().PlayerStates.PAUSED
-      );
-      // TODO - Why doesn't this work?
-      //expect(showControlsSpy).to.have.been.called;
-      expect(removeEventListenerSpy).to.have.been.called;
-    });
-
-    it('shows controls when paused', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      imaVideoObj.getPropertiesForTesting().playerState = imaVideoObj.getPropertiesForTesting().PlayerStates.PAUSED;
-      imaVideoObj.setHideControlsTimeoutForTesting(null);
-
-      imaVideoObj.showControls();
-
-      expect(
-        imaVideoObj.getPropertiesForTesting().controlsDiv.style.display
-      ).to.eql('flex');
-      expect(imaVideoObj.getPropertiesForTesting().hideControlsTimeout).to.be
-        .null;
-    });
-
-    it('shows controls when playing', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-      imaVideoObj.setPlayerStateForTesting(
-        imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING
-      );
-
-      imaVideoObj.showControls();
-
-      expect(
-        imaVideoObj.getPropertiesForTesting().controlsDiv.style.display
-      ).to.eql('flex');
-      expect(imaVideoObj.getPropertiesForTesting().hideControlsTimeout).not.to
-        .be.undefined;
-    });
-
-    it('hides controls', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-
-      imaVideoObj.hideControls();
-
-      expect(
-        imaVideoObj.getPropertiesForTesting().controlsDiv.style.display
-      ).to.eql('none');
-    });
-
-    const hoverEventsToTest = ['click', 'mousemove'];
-    hoverEventsToTest.forEach((hoverEvent) => {
-      it(
-        `shows controls on ${hoverEvent} (hover)` +
-          ' while playing after hidden',
-        () => {
-          const div = doc.createElement('div');
-          div.setAttribute('id', 'c');
-          doc.body.appendChild(div);
-
-          imaVideoObj.imaVideo(win, {
-            width: 640,
-            height: 360,
-            src: srcUrl,
-            tag: adTagUrl,
-          });
-
-          imaVideoObj.hideControls();
-
-          expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be
-            .false;
-          expect(
-            imaVideoObj.getPropertiesForTesting().controlsDiv.style.display
-          ).to.eql('none');
-
-          const interactEvent = new Event(hoverEvent);
-          const videoPlayerElement = imaVideoObj.getPropertiesForTesting()
-            .videoPlayer;
-
-          imaVideoObj.setPlayerStateForTesting(
-            imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING
-          );
-          imaVideoObj.addHoverEventToElement(
-            videoPlayerElement,
-            imaVideoObj.getShowControlsThrottledForTesting()
-          );
-          videoPlayerElement.dispatchEvent(interactEvent);
-
-          expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be
-            .true;
-          expect(
-            imaVideoObj.getPropertiesForTesting().controlsDiv.style.display
-          ).to.eql('flex');
-          expect(imaVideoObj.getPropertiesForTesting().hideControlsTimeout).not
-            .to.be.undefined;
-        }
-      );
-
-      it(`throttles ${hoverEvent} (hover) for showing controls`, async function () {
-        const div = doc.createElement('div');
-        div.setAttribute('id', 'c');
-        doc.body.appendChild(div);
-
-        imaVideoObj.imaVideo(win, {
-          width: 640,
-          height: 360,
-          src: srcUrl,
-          tag: adTagUrl,
-        });
-
-        imaVideoObj.hideControls();
-        expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be
-          .false;
-        expect(
-          imaVideoObj.getPropertiesForTesting().controlsDiv.style.display
-        ).to.eql('none');
-
-        const interactEvent = new Event(hoverEvent);
-        const videoPlayerElement = imaVideoObj.getPropertiesForTesting()
-          .videoPlayer;
-
-        imaVideoObj.setPlayerStateForTesting(
-          imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING
-        );
-        imaVideoObj.addHoverEventToElement(
-          videoPlayerElement,
-          imaVideoObj.getShowControlsThrottledForTesting()
-        );
-        videoPlayerElement.dispatchEvent(interactEvent);
-
-        expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be
-          .true;
-        expect(
-          imaVideoObj.getPropertiesForTesting().controlsDiv.style.display
-        ).to.eql('flex');
-
-        imaVideoObj.hideControls();
-        expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be
-          .false;
-        expect(
-          imaVideoObj.getPropertiesForTesting().controlsDiv.style.display
-        ).to.eql('none');
-
-        await timer.promise(100);
-        videoPlayerElement.dispatchEvent(interactEvent);
-
-        expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be
-          .false;
-        expect(
-          imaVideoObj.getPropertiesForTesting().controlsDiv.style.display
-        ).to.eql('none');
-
-        await timer.promise(950);
-        videoPlayerElement.dispatchEvent(interactEvent);
-
-        expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be
-          .true;
-        expect(
-          imaVideoObj.getPropertiesForTesting().controlsDiv.style.display
-        ).to.eql('flex');
-      });
-    });
-
-    it('suppresses IMA load with unknown consent', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      win.context.initialConsentState = CONSENT_POLICY_STATE.UNKNOWN;
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-
-      // TODO: When I can spy on internals, verify that onImaLoadSuccess() is not
-      // called, and that onImaLoadFail is called.
-      expect(imaVideoObj.getPropertiesForTesting().imaLoadAllowed).to.eql(
-        false
-      );
-    });
-
-    it('handles unknown consent with request ads call', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-
-      imaVideoObj.imaLoadAllowed = true;
-      imaVideoObj.setConsentStateForTesting(CONSENT_POLICY_STATE.UNKNOWN);
-      imaVideoObj.requestAds();
-
-      expect(imaVideoObj.getPropertiesForTesting().imaLoadAllowed).to.eql(
-        false
-      );
-    });
-
-    it('handles insufficient consent', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-
-      const mockAdsLoader = {requestAds() {}};
-      const mockAdsRequest = {adTagUrl: 'vast.mxl'};
-      imaVideoObj.setAdsLoaderForTesting(mockAdsLoader);
-      imaVideoObj.setAdsRequestForTesting(mockAdsRequest);
-      imaVideoObj.setConsentStateForTesting(CONSENT_POLICY_STATE.INSUFFICIENT);
-      imaVideoObj.requestAds();
-
-      expect(imaVideoObj.getPropertiesForTesting().adsRequest.adTagUrl).to.eql(
-        'vast.mxl&npa=1'
-      );
-    });
-
-    it('handles sufficient consent', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-
-      const mockAdsLoader = {requestAds() {}};
-      const mockAdsRequest = {adTagUrl: 'vast.mxl'};
-      imaVideoObj.setAdsLoaderForTesting(mockAdsLoader);
-      imaVideoObj.setAdsRequestForTesting(mockAdsRequest);
-      imaVideoObj.setConsentStateForTesting(CONSENT_POLICY_STATE.SUFFICIENT);
-      imaVideoObj.requestAds();
-
-      expect(imaVideoObj.getPropertiesForTesting().adsRequest.adTagUrl).to.eql(
-        'vast.mxl'
-      );
-    });
-
-    it('handles unknown_not_required consent', () => {
-      const div = doc.createElement('div');
-      div.setAttribute('id', 'c');
-      doc.body.appendChild(div);
-
-      imaVideoObj.imaVideo(win, {
-        width: 640,
-        height: 360,
-        src: srcUrl,
-        tag: adTagUrl,
-      });
-
-      const mockAdsLoader = {requestAds() {}};
-      const mockAdsRequest = {adTagUrl: 'vast.mxl'};
-      imaVideoObj.setAdsLoaderForTesting(mockAdsLoader);
-      imaVideoObj.setAdsRequestForTesting(mockAdsRequest);
-      imaVideoObj.setConsentStateForTesting(
-        CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED
-      );
-      imaVideoObj.requestAds();
-
-      expect(imaVideoObj.getPropertiesForTesting().adsRequest.adTagUrl).to.eql(
-        'vast.mxl'
-      );
+      html = htmlFor(env.win.document);
+      installResizeObserverStub(env.sandbox, env.win);
+    });
+
+    it('passes sourceChildren into iframe context', async () => {
+      const element = html`
+        <amp-ima-video data-tag="https://example.com" width="1" height="1">
+          <source data-foo="bar" src="src" />
+          <track any-attribute />
+          <span>Other elements should be excluded</span>
+        </amp-ima-video>
+      `;
+
+      env.win.document.body.appendChild(element);
+      await element.whenBuilt();
+
+      let iframe;
+      element.layoutCallback();
+      await waitForChildPromise(
+        element,
+        () => (iframe = element.querySelector('iframe'))
+      );
+
+      const parsedName = JSON.parse(iframe.name);
+      const sourceChildrenSerialized = parsedName?.attributes?.sourceChildren;
+      expect(sourceChildrenSerialized).to.not.be.null;
+      const sourceChildren = JSON.parse(sourceChildrenSerialized);
+      expect(sourceChildren).to.have.length(2);
+      expect(sourceChildren[0][0]).to.eql('SOURCE');
+      expect(sourceChildren[0][1]).to.eql({'data-foo': 'bar', src: 'src'});
+      expect(sourceChildren[1][0]).to.eql('TRACK');
+      expect(sourceChildren[1][1]).to.eql({'any-attribute': ''});
     });
   }
 );
diff --git a/extensions/amp-ima-video/0.1/test/test-ima-video-internal.js b/extensions/amp-ima-video/0.1/test/test-ima-video-internal.js
new file mode 100644
index 0000000000000..e5db9ba8973c5
--- /dev/null
+++ b/extensions/amp-ima-video/0.1/test/test-ima-video-internal.js
@@ -0,0 +1,1429 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import * as imaVideoObj from '../../../../ads/google/ima/ima-video';
+import {CONSENT_POLICY_STATE} from '../../../../src/core/constants/consent-state';
+
+describes.realWin('UI loaded in frame by amp-ima-video', {}, (env) => {
+  const srcUrl = 'http://rmcdn.2mdn.net/Demo/vast_inspector/android.mp4';
+  const adTagUrl =
+    'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=';
+
+  let win, doc, clock;
+
+  beforeEach(() => {
+    win = env.win;
+    win.context = {};
+    doc = win.document;
+    clock = env.sandbox.useFakeTimers();
+  });
+
+  function getVideoPlayerMock() {
+    return {
+      load: function () {},
+      addEventListener: function () {},
+      removeEventListener: function () {},
+      play: function () {},
+      pause: function () {},
+      muted: false,
+      played: {
+        length: 0,
+      },
+    };
+  }
+
+  function getAdsManagerMock(mock = {}) {
+    return {
+      addEventListener: () => {},
+      destroy: () => {},
+      getRemainingTime: () => mock.remainingTime,
+      init: () => {},
+      resize: () => {},
+      resume: () => {},
+      setVolume: () => {},
+      start: () => {},
+    };
+  }
+
+  it('adds ad container', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const video = doc.body.querySelector('#ima-content-player');
+    expect(video).not.to.be.undefined;
+  });
+
+  it('adds video element', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const video = doc.body.querySelector('#ima-ad-container');
+    expect(video).not.to.be.undefined;
+  });
+
+  it('handles click', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const bigPlayDivMock = {
+      setAttribute: env.sandbox.spy(),
+    };
+    const adDisplayContainerMock = {initialize() {}};
+    const initSpy = env.sandbox.spy(adDisplayContainerMock, 'initialize');
+    const videoPlayerMock = getVideoPlayerMock();
+    const loadSpy = env.sandbox.spy(videoPlayerMock, 'load');
+    const mockAdsLoader = {requestAds() {}};
+    imaVideoObj.setAdsLoaderForTesting(mockAdsLoader);
+    //const playAdsSpy = env.sandbox.spy(imaVideoObj, 'playAds');
+    //const playAdsFunc = imaVideoObj.playAds;
+    //const playAdsSpy = env.sandbox.spy(playAdsFunc);
+    imaVideoObj.setBigPlayDivForTesting(bigPlayDivMock);
+    imaVideoObj.setAdDisplayContainerForTesting(adDisplayContainerMock);
+    imaVideoObj.setVideoPlayerForTesting(videoPlayerMock);
+
+    imaVideoObj.onBigPlayClick();
+
+    const properties = imaVideoObj.getPropertiesForTesting();
+    expect(properties.playbackStarted).to.be.true;
+    expect(properties.uiTicker).to.exist;
+    expect(bigPlayDivMock.setAttribute.withArgs('hidden', '')).to.be.calledOnce;
+    expect(initSpy).to.be.called;
+    expect(loadSpy).to.be.called;
+    // TODO - Fix one I figure out how to spy on internals.
+    //expect(playAdsSpy).to.be.called;
+  });
+
+  it('updates ad countdown timer', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    const videoDefaults = {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    };
+    const tests = [
+      {
+        'mock': {'adPosition': 1, 'totalAds': 1, 'remainingTime': 0},
+        'expected': 'Ad (1 of 1): 0:00',
+      },
+      {
+        'mock': {'adPosition': 1, 'totalAds': 1, 'remainingTime': 2},
+        'expected': 'Ad (1 of 1): 0:02',
+      },
+      {
+        'mock': {
+          'adPosition': 1,
+          'totalAds': 1,
+          'remainingTime': 3.923462062,
+        },
+        'expected': 'Ad (1 of 1): 0:03',
+      },
+      {
+        'mock': {'adPosition': 1, 'totalAds': 3, 'remainingTime': 1},
+        'expected': 'Ad (1 of 3): 0:01',
+      },
+      {
+        'mock': {'adPosition': 2, 'totalAds': 79, 'remainingTime': 7600},
+        'expected': 'Ad (2 of 79): 126:40',
+      },
+      {
+        'mock': {'adPosition': 1, 'totalAds': 3, 'remainingTime': 0},
+        'label': 'Publicidad',
+        'expected': 'Publicidad: 0:00',
+      },
+      {
+        'mock': {'adPosition': 1, 'totalAds': 1, 'remainingTime': 0},
+        'label': 'Publicidad (%s de %s)',
+        'expected': 'Publicidad (1 de 1): 0:00',
+      },
+      {
+        'mock': {'adPosition': 1, 'totalAds': 3, 'remainingTime': 0},
+        'label': 'Publicidad %s',
+        'expected': 'Publicidad 1: 0:00',
+      },
+    ];
+
+    const adPodInfo = {};
+
+    imaVideoObj.onAdLoad({
+      getAd: () => ({getAdPodInfo: () => adPodInfo}),
+    });
+
+    tests.forEach(({expected, label, mock}) => {
+      const {adPosition, remainingTime, totalAds} = mock;
+      let defaults = videoDefaults;
+      if (label) {
+        defaults = Object.assign(defaults, {adLabel: label});
+      }
+      imaVideoObj.imaVideo(win, defaults);
+      const {countdownDiv} = imaVideoObj.getPropertiesForTesting();
+      const adsManagerMock = getAdsManagerMock({remainingTime});
+      adPodInfo.getTotalAds = () => totalAds;
+      adPodInfo.getAdPosition = () => adPosition;
+      imaVideoObj.setAdsManagerForTesting(adsManagerMock);
+      imaVideoObj.onAdProgress({});
+      expect(countdownDiv.textContent).to.eql(expected);
+    });
+  });
+
+  it('plays ads with ads manager', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const mockGlobal = {};
+    mockGlobal.google = {
+      ima: {
+        ViewMode: {
+          NORMAL: 'normal',
+        },
+      },
+    };
+    const mockAdsManager = getAdsManagerMock();
+    const initSpy = env.sandbox.spy(mockAdsManager, 'init');
+    const startSpy = env.sandbox.spy(mockAdsManager, 'start');
+    imaVideoObj.setAdsManagerForTesting(mockAdsManager);
+    imaVideoObj.setVideoWidthAndHeightForTesting(100, 200);
+
+    imaVideoObj.playAds(mockGlobal);
+
+    expect(initSpy).to.be.calledWith(100, 200, 'normal');
+    expect(startSpy).to.be.called;
+  });
+
+  it('plays ads with ads manager ad request failed', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    //const playVideoSpy = env.sandbox.spy(imaVideoObj, 'playVideo');
+
+    imaVideoObj.playAds();
+
+    // TODO - Fix when I can spy on internals.
+    //expect(playVideoSpy).to.be.called;
+    // Just here so the test passes until I fix above issues
+    expect(true).to.be.true;
+  });
+
+  it('handles content ended', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const mockAdsLoader = {contentComplete() {}};
+    const completeSpy = env.sandbox.spy(mockAdsLoader, 'contentComplete');
+    imaVideoObj.setAdsLoaderForTesting(mockAdsLoader);
+
+    imaVideoObj.onContentEnded();
+
+    expect(imaVideoObj.getPropertiesForTesting().contentComplete).to.be.true;
+    expect(completeSpy).to.have.been.called;
+  });
+
+  it('handles ads manager loaded', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const mockAdsRenderingSettings = {};
+    const mockGlobal = {};
+    mockGlobal.google = {};
+    mockGlobal.google.ima = {};
+    mockGlobal.google.ima.AdsRenderingSettings = function () {
+      return mockAdsRenderingSettings;
+    };
+    mockGlobal.google.ima.AdErrorEvent = {};
+    mockGlobal.google.ima.AdErrorEvent.Type = {
+      AD_ERROR: 'aderror',
+    };
+    mockGlobal.google.ima.AdEvent = {};
+    mockGlobal.google.ima.AdEvent.Type = {
+      AD_PROGRESS: 'adprogress',
+      CONTENT_PAUSE_REQUESTED: 'cpr',
+      CONTENT_RESUME_REQUESTED: 'crr',
+    };
+    const mockAdsManager = getAdsManagerMock();
+    const mockAdsManagerLoadedEvent = {
+      getAdsManager: () => mockAdsManager,
+    };
+    const amleSpy = env.sandbox.spy(mockAdsManagerLoadedEvent, 'getAdsManager');
+    const addEventListenerSpy = env.sandbox.spy(
+      mockAdsManager,
+      'addEventListener'
+    );
+    const mockVideoPlayer = {
+      play() {},
+    };
+    imaVideoObj.setVideoPlayerForTesting(mockVideoPlayer);
+    imaVideoObj.setMuteAdsManagerOnLoadedForTesting(false);
+
+    imaVideoObj.onAdsManagerLoaded(mockGlobal, mockAdsManagerLoadedEvent);
+
+    expect(mockAdsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete)
+      .to.be.true;
+    expect(amleSpy).to.be.calledWith(mockVideoPlayer, mockAdsRenderingSettings);
+    expect(addEventListenerSpy).to.be.calledWith('aderror');
+    expect(addEventListenerSpy).to.be.calledWith('adprogress');
+    expect(addEventListenerSpy).to.be.calledWith('cpr');
+    expect(addEventListenerSpy).to.be.calledWith('crr');
+  });
+
+  it('handles ads manager loaded and muted', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const mockAdsRenderingSettings = {};
+    const mockGlobal = {};
+    mockGlobal.google = {};
+    mockGlobal.google.ima = {};
+    mockGlobal.google.ima.AdsRenderingSettings = function () {
+      return mockAdsRenderingSettings;
+    };
+    mockGlobal.google.ima.AdErrorEvent = {};
+    mockGlobal.google.ima.AdErrorEvent.Type = {
+      AD_ERROR: 'aderror',
+    };
+    mockGlobal.google.ima.AdEvent = {};
+    mockGlobal.google.ima.AdEvent.Type = {
+      AD_PROGRESS: 'adprogress',
+      PAUSED: 'paused',
+      RESUMED: 'resumed',
+      CONTENT_PAUSE_REQUESTED: 'cpr',
+      CONTENT_RESUME_REQUESTED: 'crr',
+    };
+    const mockAdsManager = getAdsManagerMock();
+    const mockAdsManagerLoadedEvent = {
+      getAdsManager: () => mockAdsManager,
+    };
+    const amleSpy = env.sandbox.spy(mockAdsManagerLoadedEvent, 'getAdsManager');
+    const addEventListenerSpy = env.sandbox.spy(
+      mockAdsManager,
+      'addEventListener'
+    );
+    const setVolumeSpy = env.sandbox.spy(mockAdsManager, 'setVolume');
+    const mockVideoPlayer = {
+      play() {},
+    };
+    imaVideoObj.setVideoPlayerForTesting(mockVideoPlayer);
+    imaVideoObj.setMuteAdsManagerOnLoadedForTesting(true);
+
+    imaVideoObj.onAdsManagerLoaded(mockGlobal, mockAdsManagerLoadedEvent);
+
+    expect(mockAdsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete)
+      .to.be.true;
+    expect(amleSpy).to.be.calledWith(mockVideoPlayer, mockAdsRenderingSettings);
+    expect(addEventListenerSpy).to.be.calledWith('aderror');
+    expect(addEventListenerSpy).to.be.calledWith('adprogress');
+    expect(addEventListenerSpy).to.be.calledWith('paused');
+    expect(addEventListenerSpy).to.be.calledWith('resumed');
+    expect(addEventListenerSpy).to.be.calledWith('cpr');
+    expect(addEventListenerSpy).to.be.calledWith('crr');
+    expect(setVolumeSpy).to.be.calledWith(0);
+  });
+
+  it('handles ads loader error', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    //const playVideoSpy = env.sandbox.spy(imaVideoObj, 'playVideo');
+
+    imaVideoObj.onAdsLoaderError();
+
+    expect(imaVideoObj.getPropertiesForTesting().adRequestFailed).to.be.true;
+    // TODO - Fix when I can spy on internals.
+    //expect(playVideoSpy).to.have.been.called;
+  });
+
+  it('handles ad error', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const adsManagerMock = getAdsManagerMock();
+    const destroySpy = env.sandbox.spy(adsManagerMock, 'destroy');
+    //const playVideoSpy = sandbox.spy(imaVideoObj, 'playVideo');
+    imaVideoObj.setAdsManagerForTesting(adsManagerMock);
+
+    imaVideoObj.onAdError();
+
+    expect(destroySpy).to.have.been.called;
+    // TODO - Fix when I can spy on internals.
+    //expect(playVideoSpy).to.have.been.called;
+  });
+
+  it('pauses content', () => {
+    // set up test
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const videoMock = getVideoPlayerMock();
+    const removeEventListenerSpy = env.sandbox.spy(
+      videoMock,
+      'removeEventListener'
+    );
+    //const hideControlsSpy = env.sandbox.spy(imaVideoObj, 'hideControls');
+    const pauseSpy = env.sandbox.spy(videoMock, 'pause');
+    imaVideoObj.setVideoPlayerForTesting(videoMock);
+    let properties = imaVideoObj.getPropertiesForTesting();
+    expect(properties.adsActive).to.be.false;
+
+    // run test
+    imaVideoObj.onContentPauseRequested();
+
+    // check results
+    properties = imaVideoObj.getPropertiesForTesting();
+    expect(properties.adsActive).to.be.true;
+    expect(removeEventListenerSpy).to.have.been.calledWith(
+      properties.interactEvent
+    );
+    expect(properties.adContainerDiv).not.to.have.attribute('hidden');
+    expect(removeEventListenerSpy).to.have.been.calledWith('ended');
+    // TODO - Fix when I can spy on internals.
+    //expect(hideControlsSpy).to.have.been.called;
+    expect(pauseSpy).to.have.been.called;
+  });
+
+  it('pauses content and resizes ads manager', () => {
+    // set up test
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const videoMock = getVideoPlayerMock();
+    const removeEventListenerSpy = env.sandbox.spy(
+      videoMock,
+      'removeEventListener'
+    );
+    //const hideControlsSpy = env.sandbox.spy(imaVideoObj, 'hideControls');
+    const pauseSpy = env.sandbox.spy(videoMock, 'pause');
+    imaVideoObj.setVideoPlayerForTesting(videoMock);
+    const adsManagerMock = getAdsManagerMock();
+    const mockGlobal = {
+      google: {
+        ima: {
+          ViewMode: {
+            NORMAL: 'normal',
+          },
+        },
+      },
+    };
+    const resizeSpy = env.sandbox.spy(adsManagerMock, 'resize');
+    imaVideoObj.setAdsManagerDimensionsOnLoadForTesting(100, 200);
+    imaVideoObj.setAdsManagerForTesting(adsManagerMock);
+
+    // run test
+    imaVideoObj.onContentPauseRequested(mockGlobal);
+
+    // check results
+    const properties = imaVideoObj.getPropertiesForTesting();
+    expect(resizeSpy).to.have.been.calledWith(100, 200, 'normal');
+    expect(properties.adsManagerWidthOnLoad).to.be.null;
+    expect(properties.adsManagerHeightOnLoad).to.be.null;
+    expect(properties.adsActive).to.be.true;
+    expect(removeEventListenerSpy).to.have.been.calledWith(
+      properties.interactEvent
+    );
+    expect(properties.adContainerDiv).not.to.have.attribute('hidden');
+    expect(removeEventListenerSpy).to.have.been.calledWith('ended');
+    // TODO - Fix when I can spy on internals.
+    //expect(hideControlsSpy).to.have.been.called;
+    expect(pauseSpy).to.have.been.called;
+  });
+
+  it('shows modified controls when content is paused', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const videoMock = getVideoPlayerMock();
+    const adsManagerMock = getAdsManagerMock();
+    const mockGlobal = {
+      google: {
+        ima: {
+          ViewMode: {
+            NORMAL: 'normal',
+          },
+        },
+      },
+    };
+    imaVideoObj.setVideoPlayerForTesting(videoMock);
+    imaVideoObj.setAdsManagerDimensionsOnLoadForTesting(100, 200);
+    imaVideoObj.setAdsManagerForTesting(adsManagerMock);
+    const {controlsDiv} = imaVideoObj.getPropertiesForTesting();
+    expect(controlsDiv).not.to.be.null;
+    const {playPauseDiv} = imaVideoObj.getPropertiesForTesting();
+    expect(playPauseDiv).not.to.be.null;
+    const {timeDiv} = imaVideoObj.getPropertiesForTesting();
+    expect(timeDiv).not.to.be.null;
+    const {muteUnmuteDiv} = imaVideoObj.getPropertiesForTesting();
+    expect(muteUnmuteDiv).not.to.be.null;
+    const {fullscreenDiv} = imaVideoObj.getPropertiesForTesting();
+    expect(fullscreenDiv).not.to.be.null;
+    // expect controls to be hidden initially
+    expect(controlsDiv).to.have.attribute('hidden');
+    // call pause function to display ads
+    imaVideoObj.onContentPauseRequested(mockGlobal);
+    // expect controls to now be shown
+    expect(controlsDiv).not.to.have.attribute('hidden');
+  });
+
+  it('resumes content', () => {
+    // set up test
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const videoMock = getVideoPlayerMock();
+    const addEventListenerSpy = env.sandbox.spy(videoMock, 'addEventListener');
+    //const playVideoSpy = env.sandbox.spy(imaVideoObj, 'playVideo');
+    imaVideoObj.setVideoPlayerForTesting(videoMock);
+    imaVideoObj.setContentCompleteForTesting(false);
+
+    // run test
+    imaVideoObj.onContentResumeRequested();
+
+    // check results
+    const properties = imaVideoObj.getPropertiesForTesting();
+    expect(properties.adsActive).to.be.false;
+    expect(addEventListenerSpy).to.have.been.calledWith(
+      properties.interactEvent
+    );
+    expect(addEventListenerSpy).to.have.been.calledWith('ended');
+    // TODO - Fix when I can spy on internals.
+    //expect(playVideoSpy).to.have.been.called;
+  });
+
+  it('changes controls when ad pauses and resumes', () => {
+    // set up test
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const videoMock = getVideoPlayerMock();
+    //const playVideoSpy = env.sandbox.spy(imaVideoObj, 'playVideo');
+    imaVideoObj.setVideoPlayerForTesting(videoMock);
+    imaVideoObj.setContentCompleteForTesting(false);
+
+    // start ad
+    imaVideoObj.onContentResumeRequested();
+
+    // verify original
+    const {root} = imaVideoObj.getPropertiesForTesting().elements;
+    expect(root).to.have.attribute('data-playing');
+
+    // run test
+    imaVideoObj.onAdPaused();
+    expect(root).not.to.have.attribute('data-playing');
+
+    // run test
+    imaVideoObj.onAdResumed();
+    expect(root).to.have.attribute('data-playing');
+  });
+
+  it('resumes content with content complete', () => {
+    // set up test
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const videoMock = getVideoPlayerMock();
+    const addEventListenerSpy = env.sandbox.spy(videoMock, 'addEventListener');
+    //const playVideoSpy = env.sandbox.spy(imaVideoObj, 'playVideo');
+    imaVideoObj.setVideoPlayerForTesting(videoMock);
+    imaVideoObj.setContentCompleteForTesting(true);
+
+    // run test
+    imaVideoObj.onContentResumeRequested();
+
+    // check results
+    const properties = imaVideoObj.getPropertiesForTesting();
+    expect(properties.adsActive).to.be.false;
+    expect(addEventListenerSpy).to.have.been.calledWith(
+      properties.interactEvent
+    );
+    expect(addEventListenerSpy).to.have.been.calledWith('ended');
+    // TODO - Fix when I can spy on internals.
+    //expect(playVideoSpy).to.have.been.called;
+  });
+
+  it('controls are restored after content resumes', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    imaVideoObj.setVideoPlayerForTesting(getVideoPlayerMock());
+    imaVideoObj.setContentCompleteForTesting(true);
+    // expect a subset of controls to be hidden / displayed during ad
+    const {controlsDiv, fullscreenDiv, muteUnmuteDiv, playPauseDiv, timeDiv} =
+      imaVideoObj.getPropertiesForTesting();
+    expect(controlsDiv).not.to.be.null;
+    expect(playPauseDiv).not.to.be.null;
+    expect(timeDiv).not.to.be.null;
+    expect(muteUnmuteDiv).not.to.be.null;
+    expect(fullscreenDiv).not.to.be.null;
+    imaVideoObj.showAdControls();
+    expect(fullscreenDiv).not.to.have.attribute('hidden');
+    // resume content after ad finishes
+    imaVideoObj.onContentResumeRequested();
+    // expect default control buttons to be displayed again
+    expect(controlsDiv).not.to.have.attribute('hidden');
+  });
+
+  it('ad controls are smaller when skippable on mobile', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    const videoDefaults = {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    };
+    imaVideoObj.imaVideo(win, videoDefaults);
+
+    const ad = {
+      skippable: {getSkipTimeOffset: () => 30},
+      unskippable: {getSkipTimeOffset: () => -1},
+    };
+
+    const tests = [
+      {
+        msg: 'Should set data-skippable if ad is skippable',
+        ad: ad.skippable,
+        expected: true,
+      },
+      {
+        msg: 'Should not set data-skippable if ad is unskippable',
+        ad: ad.unskippable,
+        expected: false,
+      },
+    ];
+    tests.forEach(({ad, expected, msg}) => {
+      imaVideoObj.onAdLoad({getAd: () => ad});
+      imaVideoObj.showAdControls();
+      const {root} = imaVideoObj.getPropertiesForTesting().elements;
+      expect(root.hasAttribute('data-skippable'), msg).to.eql(expected);
+    });
+  });
+
+  it(
+    'shows bigPlayDiv with content complete, ' +
+      'when content resume is called',
+    () => {
+      const div = doc.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      imaVideoObj.imaVideo(win, {
+        width: 640,
+        height: 360,
+        src: srcUrl,
+        tag: adTagUrl,
+      });
+      const videoMock = getVideoPlayerMock();
+      const addEventListenerSpy = env.sandbox.spy(
+        videoMock,
+        'addEventListener'
+      );
+      imaVideoObj.setVideoPlayerForTesting(videoMock);
+      imaVideoObj.setContentCompleteForTesting(true);
+
+      imaVideoObj.onContentResumeRequested();
+
+      const imaVideoProperties = imaVideoObj.getPropertiesForTesting();
+
+      expect(imaVideoProperties.adsActive).to.be.false;
+      expect(addEventListenerSpy).to.have.been.calledWith(
+        imaVideoProperties.interactEvent
+      );
+      expect(addEventListenerSpy).to.have.been.calledWith('ended');
+      expect(imaVideoProperties.bigPlayDiv).not.to.have.attribute('hidden');
+    }
+  );
+
+  it('shows bigPlayDiv with allAdsCompleted, and content ended', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    imaVideoObj.setAllAdsCompletedForTesting(true);
+
+    imaVideoObj.onContentEnded();
+
+    const imaVideoProperties = imaVideoObj.getPropertiesForTesting();
+
+    expect(imaVideoProperties.bigPlayDiv).not.to.have.attribute('hidden');
+  });
+
+  it(
+    'does not show bigPlayDiv when content is resumed, ' +
+      'and not content complete',
+    () => {
+      const div = doc.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      imaVideoObj.imaVideo(win, {
+        width: 640,
+        height: 360,
+        src: srcUrl,
+        tag: adTagUrl,
+      });
+      const videoMock = getVideoPlayerMock();
+      const addEventListenerSpy = env.sandbox.spy(
+        videoMock,
+        'addEventListener'
+      );
+      imaVideoObj.setVideoPlayerForTesting(videoMock);
+
+      imaVideoObj.onBigPlayClick();
+      imaVideoObj.onContentResumeRequested();
+
+      const imaVideoProperties = imaVideoObj.getPropertiesForTesting();
+
+      expect(imaVideoProperties.adsActive).to.be.false;
+      expect(addEventListenerSpy).to.have.been.calledWith(
+        imaVideoProperties.interactEvent
+      );
+      expect(addEventListenerSpy).to.have.been.calledWith('ended');
+      expect(imaVideoProperties.bigPlayDiv).to.have.attribute('hidden');
+    }
+  );
+
+  it('updates playing time', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+
+    imaVideoObj.updateTime(0, 60);
+    expect(imaVideoObj.getPropertiesForTesting().timeDiv.textContent).to.eql(
+      '0:00 / 1:00'
+    );
+    expect(
+      imaVideoObj.getPropertiesForTesting().progressLine.style.width
+    ).to.eql('0%');
+    expect(
+      imaVideoObj.getPropertiesForTesting().progressMarkerDiv.style.left
+    ).to.eql('-1%');
+    imaVideoObj.updateTime(30, 60);
+    expect(imaVideoObj.getPropertiesForTesting().timeDiv.textContent).to.eql(
+      '0:30 / 1:00'
+    );
+    expect(
+      imaVideoObj.getPropertiesForTesting().progressLine.style.width
+    ).to.eql('50%');
+    expect(
+      imaVideoObj.getPropertiesForTesting().progressMarkerDiv.style.left
+    ).to.eql('49%');
+    imaVideoObj.updateTime(60, 60);
+    expect(imaVideoObj.getPropertiesForTesting().timeDiv.textContent).to.eql(
+      '1:00 / 1:00'
+    );
+    expect(
+      imaVideoObj.getPropertiesForTesting().progressLine.style.width
+    ).to.eql('100%');
+    expect(
+      imaVideoObj.getPropertiesForTesting().progressMarkerDiv.style.left
+    ).to.eql('99%');
+  });
+
+  it('formats time', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+
+    let formattedTime = imaVideoObj.formatTime(0);
+    expect(formattedTime).to.eql('0:00');
+    formattedTime = imaVideoObj.formatTime(55);
+    expect(formattedTime).to.eql('0:55');
+    formattedTime = imaVideoObj.formatTime(60);
+    expect(formattedTime).to.eql('1:00');
+    formattedTime = imaVideoObj.formatTime(65);
+    expect(formattedTime).to.eql('1:05');
+    formattedTime = imaVideoObj.formatTime(3600);
+    expect(formattedTime).to.eql('1:00:00');
+    formattedTime = imaVideoObj.formatTime(3605);
+    expect(formattedTime).to.eql('1:00:05');
+    formattedTime = imaVideoObj.formatTime(3665);
+    expect(formattedTime).to.eql('1:01:05');
+  });
+
+  it('zero pads', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+
+    let padded = imaVideoObj.zeroPad(11);
+    expect(padded).to.eql('11');
+    padded = imaVideoObj.zeroPad(1);
+    expect(padded).to.eql('01');
+  });
+
+  // TODO - FIX ONCE I FIGURE OUT HOW TO SPY ON INTERNAL METHODS
+  it('plays on click', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    imaVideoObj.setPlayerStateForTesting(
+      imaVideoObj.getPropertiesForTesting().PlayerStates.PAUSED
+    );
+    //const playVideoSpy = env.sandbox.spy(imaVideoObj, 'playVideo');
+
+    imaVideoObj.onPlayPauseClick();
+
+    //expect(playVideoSpy).to.have.been.called;
+    expect(true).to.be.true;
+  });
+
+  // TODO - FIX ONCE I FIGURE OUT HOW TO SPY ON INTERNAL METHODS
+  it('pauses on click', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    imaVideoObj.setPlayerStateForTesting(
+      imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING
+    );
+    //const pauseVideoSpy = env.sandbox.spy(imaVideoObj, 'pauseVideo');
+
+    imaVideoObj.onPlayPauseClick();
+
+    //expect(pauseVideoSpy).to.have.been.called;
+    expect(true).to.be.true;
+  });
+
+  it('plays video', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const videoMock = getVideoPlayerMock();
+    const playSpy = env.sandbox.spy(videoMock, 'play');
+    imaVideoObj.setVideoPlayerForTesting(videoMock);
+
+    imaVideoObj.playVideo();
+
+    expect(
+      imaVideoObj.getPropertiesForTesting().adContainerDiv
+    ).to.have.attribute('hidden');
+    expect(imaVideoObj.getPropertiesForTesting().playerState).to.eql(
+      imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING
+    );
+    // TODO - Why doesn't this work?
+    //expect(showControlsSpy).to.have.been.called;
+    expect(playSpy).to.have.been.called;
+  });
+
+  it('pauses video', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const videoMock = getVideoPlayerMock();
+    const pauseSpy = env.sandbox.spy(videoMock, 'pause');
+    imaVideoObj.setVideoPlayerForTesting(videoMock);
+    //const showControlsSpy = env.sandbox.spy(imaVideoObj, 'showControls');
+    imaVideoObj.getPropertiesForTesting().playerState =
+      imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING;
+
+    imaVideoObj.pauseVideo({});
+
+    expect(pauseSpy).to.have.been.called;
+    expect(imaVideoObj.getPropertiesForTesting().playerState).to.eql(
+      imaVideoObj.getPropertiesForTesting().PlayerStates.PAUSED
+    );
+    // TODO - Why doesn't this work?
+    //expect(showControlsSpy).to.have.been.called;
+  });
+
+  it('mutes on click', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const videoMock = getVideoPlayerMock();
+    imaVideoObj.setVideoPlayerForTesting(videoMock);
+    const adsManagerMock = getAdsManagerMock();
+    imaVideoObj.setAdsManagerForTesting(adsManagerMock);
+    imaVideoObj.setVideoPlayerMutedForTesting(false);
+    //const pauseVideoSpy = env.sandbox.spy(imaVideoObj, 'pauseVideo');
+
+    imaVideoObj.onMuteUnmuteClick();
+
+    const isMuted = imaVideoObj.getPropertiesForTesting().videoPlayer.muted;
+
+    //expect(pauseVideoSpy).to.have.been.called;
+    expect(isMuted).to.be.true;
+  });
+
+  it('unmutes on click', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const videoMock = getVideoPlayerMock();
+    imaVideoObj.setVideoPlayerForTesting(videoMock);
+    const adsManagerMock = getAdsManagerMock();
+    imaVideoObj.setAdsManagerForTesting(adsManagerMock);
+    imaVideoObj.setVideoPlayerMutedForTesting(true);
+    //const pauseVideoSpy = env.sandbox.spy(imaVideoObj, 'pauseVideo');
+
+    imaVideoObj.onMuteUnmuteClick();
+
+    const isMuted = imaVideoObj.getPropertiesForTesting().videoPlayer.muted;
+
+    //expect(pauseVideoSpy).to.have.been.called;
+    expect(isMuted).to.be.false;
+  });
+
+  it('pauses video after webkit end fullscreen', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    const videoMock = getVideoPlayerMock();
+    const pauseSpy = env.sandbox.spy(videoMock, 'pause');
+    const removeEventListenerSpy = env.sandbox.spy(
+      videoMock,
+      'removeEventListener'
+    );
+    imaVideoObj.setVideoPlayerForTesting(videoMock);
+    //const showControlsSpy = env.sandbox.spy(imaVideoObj, 'showControls');
+    imaVideoObj.getPropertiesForTesting().playerState =
+      imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING;
+
+    imaVideoObj.pauseVideo({type: 'webkitendfullscreen'});
+
+    expect(pauseSpy).to.have.been.called;
+    expect(imaVideoObj.getPropertiesForTesting().playerState).to.eql(
+      imaVideoObj.getPropertiesForTesting().PlayerStates.PAUSED
+    );
+    // TODO - Why doesn't this work?
+    //expect(showControlsSpy).to.have.been.called;
+    expect(removeEventListenerSpy).to.have.been.called;
+  });
+
+  it('shows controls when paused', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    imaVideoObj.getPropertiesForTesting().playerState =
+      imaVideoObj.getPropertiesForTesting().PlayerStates.PAUSED;
+    imaVideoObj.setHideControlsTimeoutForTesting(null);
+
+    imaVideoObj.showControls();
+
+    expect(
+      imaVideoObj.getPropertiesForTesting().controlsDiv
+    ).not.to.have.attribute('hidden');
+    expect(imaVideoObj.getPropertiesForTesting().hideControlsTimeout).to.be
+      .null;
+  });
+
+  it('shows controls when playing', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    imaVideoObj.setPlayerStateForTesting(
+      imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING
+    );
+
+    imaVideoObj.showControls();
+
+    expect(
+      imaVideoObj.getPropertiesForTesting().controlsDiv
+    ).not.to.have.attribute('hidden');
+    expect(imaVideoObj.getPropertiesForTesting().hideControlsTimeout).not.to.be
+      .undefined;
+  });
+
+  it('hides controls', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+
+    imaVideoObj.hideControls();
+
+    expect(imaVideoObj.getPropertiesForTesting().controlsDiv).to.have.attribute(
+      'hidden'
+    );
+  });
+
+  // Case when autoplay signal is sent before play signal is sent.
+  it('hides controls before visible', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    imaVideoObj.adsActive = false;
+
+    imaVideoObj.hideControls();
+    expect(imaVideoObj.getPropertiesForTesting().controlsDiv).to.have.attribute(
+      'hidden'
+    );
+    expect(imaVideoObj.getPropertiesForTesting().hideControlsQueued).to.be.true;
+
+    imaVideoObj.playVideo();
+    expect(imaVideoObj.getPropertiesForTesting().controlsDiv).to.have.attribute(
+      'hidden'
+    );
+    expect(imaVideoObj.getPropertiesForTesting().hideControlsQueued).to.be
+      .false;
+  });
+
+  it('always shows ads controls', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+    imaVideoObj.adsActive = false;
+
+    imaVideoObj.hideControls();
+    expect(imaVideoObj.getPropertiesForTesting().controlsDiv).to.have.attribute(
+      'hidden'
+    );
+    expect(imaVideoObj.getPropertiesForTesting().hideControlsQueued).to.be.true;
+
+    // Fake the ad starting to play
+    imaVideoObj.showAdControls();
+    expect(
+      imaVideoObj.getPropertiesForTesting().controlsDiv
+    ).not.to.have.attribute('hidden');
+    expect(imaVideoObj.getPropertiesForTesting().hideControlsQueued).to.be.true;
+  });
+
+  const hoverEventsToTest = ['click', 'mousemove'];
+  hoverEventsToTest.forEach((hoverEvent) => {
+    it(`shows controls on ${hoverEvent} (hover) while playing after hidden`, () => {
+      const div = doc.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      imaVideoObj.imaVideo(win, {
+        width: 640,
+        height: 360,
+        src: srcUrl,
+        tag: adTagUrl,
+      });
+
+      imaVideoObj.hideControls();
+
+      expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be.false;
+      expect(
+        imaVideoObj.getPropertiesForTesting().controlsDiv
+      ).to.have.attribute('hidden');
+
+      const interactEvent = new Event(hoverEvent);
+      const videoPlayerElement =
+        imaVideoObj.getPropertiesForTesting().videoPlayer;
+
+      imaVideoObj.setPlayerStateForTesting(
+        imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING
+      );
+      imaVideoObj.addHoverEventToElement(
+        videoPlayerElement,
+        imaVideoObj.getShowControlsThrottledForTesting()
+      );
+      videoPlayerElement.dispatchEvent(interactEvent);
+
+      expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be.true;
+      expect(
+        imaVideoObj.getPropertiesForTesting().controlsDiv
+      ).not.to.have.attribute('hidden');
+      expect(imaVideoObj.getPropertiesForTesting().hideControlsTimeout).not.to
+        .be.undefined;
+    });
+
+    it(`throttles ${hoverEvent} (hover) for showing controls`, async function () {
+      const div = doc.createElement('div');
+      div.setAttribute('id', 'c');
+      doc.body.appendChild(div);
+
+      imaVideoObj.imaVideo(win, {
+        width: 640,
+        height: 360,
+        src: srcUrl,
+        tag: adTagUrl,
+      });
+
+      imaVideoObj.hideControls();
+      expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be.false;
+      expect(
+        imaVideoObj.getPropertiesForTesting().controlsDiv
+      ).to.have.attribute('hidden');
+
+      const interactEvent = new Event(hoverEvent);
+      const videoPlayerElement =
+        imaVideoObj.getPropertiesForTesting().videoPlayer;
+
+      imaVideoObj.setPlayerStateForTesting(
+        imaVideoObj.getPropertiesForTesting().PlayerStates.PLAYING
+      );
+      imaVideoObj.addHoverEventToElement(
+        videoPlayerElement,
+        imaVideoObj.getShowControlsThrottledForTesting()
+      );
+      videoPlayerElement.dispatchEvent(interactEvent);
+
+      expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be.true;
+      expect(
+        imaVideoObj.getPropertiesForTesting().controlsDiv
+      ).not.to.have.attribute('hidden');
+
+      imaVideoObj.hideControls();
+      expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be.false;
+      expect(
+        imaVideoObj.getPropertiesForTesting().controlsDiv
+      ).to.have.attribute('hidden');
+
+      clock.tick(100);
+      videoPlayerElement.dispatchEvent(interactEvent);
+
+      expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be.false;
+      expect(
+        imaVideoObj.getPropertiesForTesting().controlsDiv
+      ).to.have.attribute('hidden');
+
+      clock.tick(950);
+      videoPlayerElement.dispatchEvent(interactEvent);
+
+      expect(imaVideoObj.getPropertiesForTesting().controlsVisible).to.be.true;
+      expect(
+        imaVideoObj.getPropertiesForTesting().controlsDiv
+      ).not.to.have.attribute('hidden');
+    });
+  });
+
+  it('suppresses IMA load with unknown consent', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    win.context.initialConsentState = CONSENT_POLICY_STATE.UNKNOWN;
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+
+    // TODO: When I can spy on internals, verify that onImaLoadSuccess() is not
+    // called, and that onImaLoadFail is called.
+    expect(imaVideoObj.getPropertiesForTesting().imaLoadAllowed).to.eql(false);
+  });
+
+  it('handles unknown consent with request ads call', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+
+    imaVideoObj.imaLoadAllowed = true;
+    imaVideoObj.setConsentStateForTesting(CONSENT_POLICY_STATE.UNKNOWN);
+    imaVideoObj.requestAds();
+
+    expect(imaVideoObj.getPropertiesForTesting().imaLoadAllowed).to.eql(false);
+  });
+
+  it('handles insufficient consent', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+
+    const mockAdsLoader = {requestAds() {}};
+    const mockAdsRequest = {adTagUrl: 'vast.mxl'};
+    imaVideoObj.setAdsLoaderForTesting(mockAdsLoader);
+    imaVideoObj.setAdsRequestForTesting(mockAdsRequest);
+    imaVideoObj.setConsentStateForTesting(CONSENT_POLICY_STATE.INSUFFICIENT);
+    imaVideoObj.requestAds();
+
+    expect(imaVideoObj.getPropertiesForTesting().adsRequest.adTagUrl).to.eql(
+      'vast.mxl&npa=1'
+    );
+  });
+
+  it('handles sufficient consent', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+
+    const mockAdsLoader = {requestAds() {}};
+    const mockAdsRequest = {adTagUrl: 'vast.mxl'};
+    imaVideoObj.setAdsLoaderForTesting(mockAdsLoader);
+    imaVideoObj.setAdsRequestForTesting(mockAdsRequest);
+    imaVideoObj.setConsentStateForTesting(CONSENT_POLICY_STATE.SUFFICIENT);
+    imaVideoObj.requestAds();
+
+    expect(imaVideoObj.getPropertiesForTesting().adsRequest.adTagUrl).to.eql(
+      'vast.mxl'
+    );
+  });
+
+  it('handles unknown_not_required consent', () => {
+    const div = doc.createElement('div');
+    div.setAttribute('id', 'c');
+    doc.body.appendChild(div);
+
+    imaVideoObj.imaVideo(win, {
+      width: 640,
+      height: 360,
+      src: srcUrl,
+      tag: adTagUrl,
+    });
+
+    const mockAdsLoader = {requestAds() {}};
+    const mockAdsRequest = {adTagUrl: 'vast.mxl'};
+    imaVideoObj.setAdsLoaderForTesting(mockAdsLoader);
+    imaVideoObj.setAdsRequestForTesting(mockAdsRequest);
+    imaVideoObj.setConsentStateForTesting(
+      CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED
+    );
+    imaVideoObj.requestAds();
+
+    expect(imaVideoObj.getPropertiesForTesting().adsRequest.adTagUrl).to.eql(
+      'vast.mxl'
+    );
+  });
+});
diff --git a/extensions/amp-ima-video/OWNERS b/extensions/amp-ima-video/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-ima-video/OWNERS
+++ b/extensions/amp-ima-video/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-ima-video/amp-ima-video.md b/extensions/amp-ima-video/amp-ima-video.md
index 0620e8e4f81c2..2293bff288185 100644
--- a/extensions/amp-ima-video/amp-ima-video.md
+++ b/extensions/amp-ima-video/amp-ima-video.md
@@ -24,9 +24,9 @@ limitations under the License.
 
 # amp-ima-video
 
-## Overview
+## Usage
 
-You can use the `amp-ima-video` component to embed an [IMA SDK](https://developers.google.com/interactive-media-ads/docs/sdks/html5/) enabled video player.
+Use the `amp-ima-video` component to embed an [IMA SDK](https://developers.google.com/interactive-media-ads/docs/sdks/html5/) enabled video player.
 
 The component requires an ad tag, provided in `data-tag`, which is a URL to a
 VAST-compliant ad response (for examples, see
@@ -34,11 +34,9 @@ VAST-compliant ad response (for examples, see
 
 The component HTML accepts the following types of HTML nodes as children:
 
-- `source` tags for content video, used in the same way as the standard `video` tag.
-- `track` tags for subtitles, in the same way as the standard `video` tag. If the track is hosted on a different origin than the document, you must add the `data-crossorigin` attribute to the `<amp-ima-video>` tag.
-- a `script` tag of type `application/json` used to provide [ImaSdkSettings](https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/apis#ima.ImaSdkSettings). Provide the property-translation of the setters in the linked documentation (e.g. to call `setNumRedirects(4)`, provide `{"numRedirects": 4}`).
-
-## Example
+-   `source` tags for content video, used in the same way as the standard `video` tag.
+-   `track` tags for subtitles, in the same way as the standard `video` tag. If the track is hosted on a different origin than the document, you must add the `data-crossorigin` attribute to the `<amp-ima-video>` tag.
+-   a `script` tag of type `application/json` used to provide [ImaSdkSettings](https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/reference/js/ima.ImaSdkSettings). Provide the property-translation of the setters in the linked documentation (e.g. to call `setNumRedirects(4)`, provide `{"numRedirects": 4}`).
 
 ```html
 <amp-ima-video
@@ -67,45 +65,44 @@ The component HTML accepts the following types of HTML nodes as children:
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-tag (required)</strong></td>
-    <td>The URL for your VAST ad document. A relative URL or a URL that uses https protocol.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-src</strong></td>
-    <td>The URL of your video content. A relative URL or a URL that uses https protocol. This attribute is required if no <code>&lt;source&gt;</code> children are present.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-crossorigin</strong></td>
-    <td>Required if a <code>track</code> resource is hosted on a different origin than the document.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-poster (optional)</strong></td>
-    <td>An image for the frame to be displayed before video playback has started. By
-default, the first frame is displayed.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-delay-ad-request (optional)</strong></td>
-    <td>If true, delay the ad request until either the user scrolls the page, or for 3 seconds, whichever occurs first. Defaults to false.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-ad-label (optional)</strong></td>
-    <td>A format string that looks like "Ad (%s of %s)", used to generate the ad disclosure when an ad is playing. The "%s" in the format string is replaced with the current ad number in the sequence and the total number of ads, respectively (e.g. Ad 2 of 3). This allows users to support ad disclosures in different languages. If no value is given, this defaults to "Ad (%s of %s)".</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>dock</strong></td>
-    <td><strong>Requires <code>amp-video-docking</code> extension.</strong> If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
-    For more details, see <a href="https://amp.dev/documentation/components/amp-video-docking">documentation on the docking extension itself.</a></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes
-<a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a>
-extended to AMP components.</td>
-  </tr>
-</table>
+### data-tag (required)
+
+The URL for your VAST ad document. A relative URL or a URL that uses https protocol.
+
+### data-src
+
+The URL of your video content. A relative URL or a URL that uses https protocol. This attribute is required if no `<source>` children are present.
+
+### data-crossorigin
+
+Required if a `track` resource is hosted on a different origin than the document.
+
+### data-poster (optional)
+
+An image for the frame to be displayed before video playback has started. By
+default, the first frame is displayed.
+
+### data-delay-ad-request (optional)
+
+If true, delay the ad request until either the user scrolls the page, or for 3 seconds, whichever occurs first. Defaults to false.
+
+### data-ad-label (optional)
+
+A format string that looks like "Ad (%s of %s)", used to generate the ad disclosure when an ad is playing. The "%s" in the format string is replaced with the current ad number in the sequence and the total number of ads, respectively (e.g. Ad 2 of 3). This allows users to support ad disclosures in different languages. If no value is given, this defaults to "Ad (%s of %s)".
+
+### dock
+
+Requires `amp-video-docking` extension. If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
+For more details, see [documentation on the docking extension itself](https://amp.dev/documentation/components/amp-video-docking).
+
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"IMA video"`.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
 
 ## Validation
 
-See [amp-ima-video rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ima-video/validator-amp-ima-video.protoascii) in the AMP validator specification.
+See [amp-ima-video rules](validator-amp-ima-video.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-ima-video/consent-blocking.md b/extensions/amp-ima-video/consent-blocking.md
index c098e77620f1d..9f80a7ccfc787 100644
--- a/extensions/amp-ima-video/consent-blocking.md
+++ b/extensions/amp-ima-video/consent-blocking.md
@@ -18,7 +18,7 @@ limitations under the License.
 
 The `amp-ima-video` extension has built in compatibility with the
 `<amp-consent>` component. You can set up a consent dialog by following
-instructions in [the amp-consent readme](https://github.com/ampproject/amphtml/blob/master/extensions/amp-consent/amp-consent.md).
+instructions in [the amp-consent readme](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/amp-consent.md).
 
 ## Blocking based on user consent
 
diff --git a/extensions/amp-ima-video/validator-amp-ima-video.protoascii b/extensions/amp-ima-video/validator-amp-ima-video.protoascii
index ae2614ee65c61..8689c01efccc3 100644
--- a/extensions/amp-ima-video/validator-amp-ima-video.protoascii
+++ b/extensions/amp-ima-video/validator-amp-ima-video.protoascii
@@ -58,7 +58,7 @@ tags: {  # <amp-ima-video>
     value: ""
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-ima-video"
+  spec_url: "https://amp.dev/documentation/components/amp-ima-video/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-image-lightbox/0.1/amp-image-lightbox.js b/extensions/amp-image-lightbox/0.1/amp-image-lightbox.js
index f89d664cbce7d..0f5f0294d8824 100644
--- a/extensions/amp-image-lightbox/0.1/amp-image-lightbox.js
+++ b/extensions/amp-image-lightbox/0.1/amp-image-lightbox.js
@@ -26,11 +26,11 @@ import {
   TapzoomRecognizer,
 } from '../../../src/gesture-recognizers';
 import {Gestures} from '../../../src/gesture';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Services} from '../../../src/services';
 import {WindowInterface} from '../../../src/window-interface';
-import {bezierCurve} from '../../../src/curve';
-import {boundValue, clamp, distance, magnitude} from '../../../src/utils/math';
+import {bezierCurve} from '../../../src/core/data-structures/curve';
+import {boundValue, clamp, distance, magnitude} from '../../../src/core/math';
 import {continueMotion} from '../../../src/motion';
 import {dev, userAssert} from '../../../src/log';
 import {isLoaded} from '../../../src/event-helper';
@@ -38,10 +38,9 @@ import {
   layoutRectFromDomRect,
   layoutRectLtwh,
   moveLayoutRect,
-} from '../../../src/layout-rect';
+} from '../../../src/core/math/layout-rect';
 import {setStyles, toggle} from '../../../src/style';
 import {srcsetFromElement} from '../../../src/srcset';
-import {startsWith} from '../../../src/string';
 
 const TAG = 'amp-image-lightbox';
 
@@ -54,13 +53,13 @@ const SUPPORTED_ELEMENTS_ = {
 /** @private @const */
 const ARIA_ATTRIBUTES = ['aria-label', 'aria-describedby', 'aria-labelledby'];
 
-/** @private @const {!../../../src/curve.CurveDef} */
+/** @private @const {!../../../src/core/data-structures/curve.CurveDef} */
 const ENTER_CURVE_ = bezierCurve(0.4, 0, 0.2, 1);
 
-/** @private @const {!../../../src/curve.CurveDef} */
+/** @private @const {!../../../src/core/data-structures/curve.CurveDef} */
 const EXIT_CURVE_ = bezierCurve(0.4, 0, 0.2, 1);
 
-/** @private @const {!../../../src/curve.CurveDef} */
+/** @private @const {!../../../src/core/data-structures/curve.CurveDef} */
 const PAN_ZOOM_CURVE_ = bezierCurve(0.4, 0, 0.2, 1.4);
 
 /** @private @const {number} */
@@ -609,12 +608,9 @@ export class ImageViewer {
 
     const newPosX = this.boundX_(this.startX_ + deltaX * newScale, false);
     const newPosY = this.boundY_(this.startY_ + deltaY * newScale, false);
-    return /** @type {!Promise|undefined} */ (this.set_(
-      newScale,
-      newPosX,
-      newPosY,
-      animate
-    ));
+    return /** @type {!Promise|undefined} */ (
+      this.set_(newScale, newPosX, newPosY, animate)
+    );
   }
 
   /**
@@ -787,9 +783,11 @@ class AmpImageLightbox extends AMP.BaseElement {
   /** @override */
   buildCallback() {
     /** If the element is in an email document, allow its `open` action. */
-    Services.actionServiceForDoc(
-      this.element
-    ).addToAllowlist('AMP-IMAGE-LIGHTBOX', 'open', ['email']);
+    Services.actionServiceForDoc(this.element).addToAllowlist(
+      'AMP-IMAGE-LIGHTBOX',
+      'open',
+      ['email']
+    );
   }
 
   /**
@@ -825,9 +823,8 @@ class AmpImageLightbox extends AMP.BaseElement {
     this.container_.appendChild(this.captionElement_);
 
     // Invisible close button at the end of lightbox for screen-readers.
-    const screenReaderCloseButton = this.element.ownerDocument.createElement(
-      'button'
-    );
+    const screenReaderCloseButton =
+      this.element.ownerDocument.createElement('button');
     // TODO(aghassemi, #4146) i18n
     const ariaLabel =
       this.element.getAttribute('data-close-button-aria-label') ||
@@ -899,10 +896,9 @@ class AmpImageLightbox extends AMP.BaseElement {
         // happens in window.resize event. Adding a timeout for correct
         // measurement. See https://github.com/ampproject/amphtml/issues/8479
         if (
-          startsWith(
-            Services.platformFor(this.win).getIosVersionString(),
-            '10.3'
-          )
+          Services.platformFor(this.win)
+            .getIosVersionString()
+            .startsWith('10.3')
         ) {
           Services.timerFor(this.win).delay(() => {
             this.imageViewer_.measure();
diff --git a/extensions/amp-image-lightbox/0.1/test/integration/test-amp-image-lightbox.js b/extensions/amp-image-lightbox/0.1/test/integration/test-amp-image-lightbox.js
index 927cff229b4f9..c4213ccdb3020 100644
--- a/extensions/amp-image-lightbox/0.1/test/integration/test-amp-image-lightbox.js
+++ b/extensions/amp-image-lightbox/0.1/test/integration/test-amp-image-lightbox.js
@@ -16,10 +16,10 @@
 
 import {poll} from '../../../../../testing/iframe';
 
-describe
+describes.sandboxed
   .configure()
   .skipFirefox()
-  .run('amp-image-lightbox', function () {
+  .run('amp-image-lightbox', {}, function () {
     this.timeout(5000);
     const extensions = ['amp-image-lightbox'];
     const imageLightboxBody = `
@@ -54,7 +54,7 @@ describe
           win = env.win;
         });
 
-        // TODO(wg-ui-and-a11y, #25675) Flaky on sauce labs.
+        // TODO(wg-components, #25675) Flaky during cross-browser tests.
         it.skip('should activate on tap of source image', () => {
           const lightbox = win.document.getElementById('image-lightbox-1');
           expect(lightbox).to.have.display('none');
diff --git a/extensions/amp-image-lightbox/0.1/test/test-amp-image-lightbox.js b/extensions/amp-image-lightbox/0.1/test/test-amp-image-lightbox.js
index 8704cc4ea893e..b3b42f79ee234 100644
--- a/extensions/amp-image-lightbox/0.1/test/test-amp-image-lightbox.js
+++ b/extensions/amp-image-lightbox/0.1/test/test-amp-image-lightbox.js
@@ -16,11 +16,11 @@
 
 import '../amp-image-lightbox';
 import * as dom from '../../../../src/dom';
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {ActionService} from '../../../../src/service/action-impl';
-import {ActionTrust} from '../../../../src/action-constants';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
 import {ImageViewer} from '../amp-image-lightbox';
-import {Keys} from '../../../../src/utils/key-codes';
+import {Keys} from '../../../../src/core/constants/key-codes';
 import {Services} from '../../../../src/services';
 import {WindowInterface} from '../../../../src/window-interface';
 import {parseSrcset} from '../../../../src/srcset';
@@ -46,7 +46,7 @@ describes.realWin(
       el.setAttribute('layout', 'nodisplay');
       doc.body.appendChild(el);
       return el
-        .build()
+        .buildInternal()
         .then(() => el.layoutCallback())
         .then(() => el);
     }
@@ -60,194 +60,194 @@ describes.realWin(
       });
     });
 
-    it('should render correctly', () => {
-      return getImageLightbox().then((lightbox) => {
-        const impl = lightbox.implementation_;
-        const noop = () => {};
-        impl.getViewport = () => {
-          return {
-            onChanged: noop,
-            enterLightboxMode: noop,
-          };
+    it('should render correctly', async () => {
+      const lightbox = await getImageLightbox();
+      const impl = await lightbox.getImpl(false);
+
+      const noop = () => {};
+      impl.getViewport = () => {
+        return {
+          onChanged: noop,
+          enterLightboxMode: noop,
         };
-        impl.getHistory_ = () => {
-          return {
-            push: () => {
-              return Promise.resolve();
-            },
-          };
+      };
+      impl.getHistory_ = () => {
+        return {
+          push: () => {
+            return Promise.resolve();
+          },
         };
-        impl.enter_ = noop;
+      };
+      impl.enter_ = noop;
 
-        const ampImage = doc.createElement('amp-img');
-        ampImage.setAttribute('src', 'data:');
-        impl.open_({caller: ampImage});
+      const ampImage = doc.createElement('amp-img');
+      ampImage.setAttribute('src', 'data:');
+      impl.open_({caller: ampImage});
 
-        const container = lightbox.querySelector(
-          '.i-amphtml-image-lightbox-container'
-        );
-        expect(container).to.not.equal(null);
+      const container = lightbox.querySelector(
+        '.i-amphtml-image-lightbox-container'
+      );
+      expect(container).to.not.equal(null);
 
-        const caption = container.querySelector(
-          '.i-amphtml-image-lightbox-caption'
-        );
-        expect(caption).to.not.equal(null);
-        expect(caption).to.have.class('amp-image-lightbox-caption');
+      const caption = container.querySelector(
+        '.i-amphtml-image-lightbox-caption'
+      );
+      expect(caption).to.not.equal(null);
+      expect(caption).to.have.class('amp-image-lightbox-caption');
 
-        const viewer = container.querySelector(
-          '.i-amphtml-image-lightbox-viewer'
-        );
-        expect(viewer).to.not.equal(null);
+      const viewer = container.querySelector(
+        '.i-amphtml-image-lightbox-viewer'
+      );
+      expect(viewer).to.not.equal(null);
 
-        const image = viewer.querySelector(
-          '.i-amphtml-image-lightbox-viewer-image'
-        );
-        expect(image).to.not.equal(null);
+      const image = viewer.querySelector(
+        '.i-amphtml-image-lightbox-viewer-image'
+      );
+      expect(image).to.not.equal(null);
 
-        // Very important. Image must have transform-origin=50% 50%.
-        const win = image.ownerDocument.defaultView;
-        expect(win.getComputedStyle(image)['transform-origin']).to.equal(
-          '50% 50%'
-        );
-      });
+      // Very important. Image must have transform-origin=50% 50%.
+      const win = image.ownerDocument.defaultView;
+      expect(win.getComputedStyle(image)['transform-origin']).to.equal(
+        '50% 50%'
+      );
     });
 
-    it('should activate all steps', () => {
-      return getImageLightbox().then((lightbox) => {
-        const impl = lightbox.implementation_;
-        const viewportOnChanged = env.sandbox.spy();
-        const enterLightboxMode = env.sandbox.spy();
-        const leaveLightboxMode = env.sandbox.spy();
-        impl.getViewport = () => {
-          return {
-            onChanged: viewportOnChanged,
-            enterLightboxMode,
-            leaveLightboxMode,
-          };
+    it('should activate all steps', async () => {
+      const lightbox = await getImageLightbox();
+      const impl = await lightbox.getImpl(false);
+
+      const viewportOnChanged = env.sandbox.spy();
+      const enterLightboxMode = env.sandbox.spy();
+      const leaveLightboxMode = env.sandbox.spy();
+      impl.getViewport = () => {
+        return {
+          onChanged: viewportOnChanged,
+          enterLightboxMode,
+          leaveLightboxMode,
         };
-        const historyPush = env.sandbox.spy();
-        impl.getHistory_ = () => {
-          return {
-            push: () => {
-              historyPush();
-              return Promise.resolve(11);
-            },
-          };
+      };
+      const historyPush = env.sandbox.spy();
+      impl.getHistory_ = () => {
+        return {
+          push: () => {
+            historyPush();
+            return Promise.resolve(11);
+          },
         };
-        const enter = env.sandbox.spy();
-        impl.enter_ = enter;
-
-        const ampImage = doc.createElement('amp-img');
-        ampImage.setAttribute('src', 'data:');
-        impl.open_({caller: ampImage});
-
-        expect(viewportOnChanged).to.be.calledOnce;
-        expect(impl.unlistenViewport_).to.not.equal(null);
-        expect(historyPush).to.be.calledOnce;
-        expect(enter).to.be.calledOnce;
-        expect(impl.sourceElement_).to.equal(ampImage);
-        expect(enterLightboxMode).to.be.calledOnce;
-        expect(leaveLightboxMode).to.have.not.been.called;
-      });
+      };
+      const enter = env.sandbox.spy();
+      impl.enter_ = enter;
+
+      const ampImage = doc.createElement('amp-img');
+      ampImage.setAttribute('src', 'data:');
+      impl.open_({caller: ampImage});
+
+      expect(viewportOnChanged).to.be.calledOnce;
+      expect(impl.unlistenViewport_).to.not.equal(null);
+      expect(historyPush).to.be.calledOnce;
+      expect(enter).to.be.calledOnce;
+      expect(impl.sourceElement_).to.equal(ampImage);
+      expect(enterLightboxMode).to.be.calledOnce;
+      expect(leaveLightboxMode).to.have.not.been.called;
     });
 
-    it('should deactivate all steps', () => {
-      return getImageLightbox().then((lightbox) => {
-        const impl = lightbox.implementation_;
-        impl.active_ = true;
-        impl.historyId_ = 11;
-        const viewportOnChangedUnsubscribed = env.sandbox.spy();
-        impl.unlistenViewport_ = viewportOnChangedUnsubscribed;
-        const enterLightboxMode = env.sandbox.spy();
-        const leaveLightboxMode = env.sandbox.spy();
-        impl.getViewport = () => {
-          return {enterLightboxMode, leaveLightboxMode};
-        };
-        const historyPop = env.sandbox.spy();
-        impl.getHistory_ = () => {
-          return {pop: historyPop};
-        };
-        const exit = env.sandbox.spy();
-        impl.exit_ = exit;
-
-        impl.close();
-
-        expect(impl.active_).to.equal(false);
-        expect(exit).to.be.calledOnce;
-        expect(viewportOnChangedUnsubscribed).to.be.calledOnce;
-        expect(impl.unlistenViewport_).to.equal(null);
-        expect(leaveLightboxMode).to.be.calledOnce;
-        expect(enterLightboxMode).to.have.not.been.called;
-        expect(historyPop).to.be.calledOnce;
-      });
+    it('should deactivate all steps', async () => {
+      const lightbox = await getImageLightbox();
+      const impl = await lightbox.getImpl(false);
+
+      impl.active_ = true;
+      impl.historyId_ = 11;
+      const viewportOnChangedUnsubscribed = env.sandbox.spy();
+      impl.unlistenViewport_ = viewportOnChangedUnsubscribed;
+      const enterLightboxMode = env.sandbox.spy();
+      const leaveLightboxMode = env.sandbox.spy();
+      impl.getViewport = () => {
+        return {enterLightboxMode, leaveLightboxMode};
+      };
+      const historyPop = env.sandbox.spy();
+      impl.getHistory_ = () => {
+        return {pop: historyPop};
+      };
+      const exit = env.sandbox.spy();
+      impl.exit_ = exit;
+
+      impl.close();
+
+      expect(impl.active_).to.equal(false);
+      expect(exit).to.be.calledOnce;
+      expect(viewportOnChangedUnsubscribed).to.be.calledOnce;
+      expect(impl.unlistenViewport_).to.equal(null);
+      expect(leaveLightboxMode).to.be.calledOnce;
+      expect(enterLightboxMode).to.have.not.been.called;
+      expect(historyPop).to.be.calledOnce;
     });
 
-    it('should close on ESC', () => {
-      return getImageLightbox().then((lightbox) => {
-        const impl = lightbox.implementation_;
-        const setupCloseSpy = env.sandbox.spy(impl, 'close');
-        const nullAddEventListenerSpy = env.sandbox
-          .spy(impl.win.document.documentElement, 'addEventListener')
-          .withArgs('keydown', null);
-        const viewportOnChanged = env.sandbox.spy();
-        const enterLightboxMode = env.sandbox.spy();
-        const leaveLightboxMode = env.sandbox.spy();
-        impl.getViewport = () => {
-          return {
-            onChanged: viewportOnChanged,
-            enterLightboxMode,
-            leaveLightboxMode,
-          };
+    it('should close on ESC', async () => {
+      const lightbox = await getImageLightbox();
+      const impl = await lightbox.getImpl(false);
+
+      const setupCloseSpy = env.sandbox.spy(impl, 'close');
+      const nullAddEventListenerSpy = env.sandbox
+        .spy(impl.win.document.documentElement, 'addEventListener')
+        .withArgs('keydown', null);
+      const viewportOnChanged = env.sandbox.spy();
+      const enterLightboxMode = env.sandbox.spy();
+      const leaveLightboxMode = env.sandbox.spy();
+      impl.getViewport = () => {
+        return {
+          onChanged: viewportOnChanged,
+          enterLightboxMode,
+          leaveLightboxMode,
         };
-        const historyPush = env.sandbox.spy();
-        impl.getHistory_ = () => {
-          return {
-            push: () => {
-              historyPush();
-              return Promise.resolve(11);
-            },
-          };
+      };
+      const historyPush = env.sandbox.spy();
+      impl.getHistory_ = () => {
+        return {
+          push: () => {
+            historyPush();
+            return Promise.resolve(11);
+          },
         };
-        const enter = env.sandbox.spy();
-        impl.enter_ = enter;
-
-        const ampImage = doc.createElement('amp-img');
-        ampImage.setAttribute('src', 'data:');
-        ampImage.setAttribute('width', '100');
-        ampImage.setAttribute('height', '100');
-        impl.open_({caller: ampImage});
-        impl.closeOnEscape_(new KeyboardEvent('keydown', {key: Keys.ESCAPE}));
-        expect(setupCloseSpy).to.be.calledOnce;
-
-        // Regression test: ensure escape event listener is bound properly
-        expect(nullAddEventListenerSpy).to.have.not.been.called;
-        impl.open_({caller: ampImage});
-        expect(nullAddEventListenerSpy).to.have.not.been.called;
-      });
+      };
+      const enter = env.sandbox.spy();
+      impl.enter_ = enter;
+
+      const ampImage = doc.createElement('amp-img');
+      ampImage.setAttribute('src', 'data:');
+      ampImage.setAttribute('width', '100');
+      ampImage.setAttribute('height', '100');
+      impl.open_({caller: ampImage});
+      impl.closeOnEscape_(new KeyboardEvent('keydown', {key: Keys.ESCAPE}));
+      expect(setupCloseSpy).to.be.calledOnce;
+
+      // Regression test: ensure escape event listener is bound properly
+      expect(nullAddEventListenerSpy).to.have.not.been.called;
+      impl.open_({caller: ampImage});
+      expect(nullAddEventListenerSpy).to.have.not.been.called;
     });
 
     // Accessibility
-    it('should return focus to source element after close', () => {
-      return getImageLightbox().then((lightbox) => {
-        const impl = lightbox.implementation_;
-        impl.enter_ = () => {};
-        impl.getHistory_ = () => {
-          return {
-            pop: () => {},
-            push: () => Promise.resolve(11),
-          };
+    it('should return focus to source element after close', async () => {
+      const lightbox = await getImageLightbox();
+      const impl = await lightbox.getImpl(false);
+
+      impl.enter_ = () => {};
+      impl.getHistory_ = () => {
+        return {
+          pop: () => {},
+          push: () => Promise.resolve(11),
         };
+      };
 
-        const tryFocus = env.sandbox.spy(dom, 'tryFocus');
+      const tryFocus = env.sandbox.spy(dom, 'tryFocus');
 
-        const sourceElement = doc.createElement('amp-img');
-        sourceElement.setAttribute('src', 'data:');
+      const sourceElement = doc.createElement('amp-img');
+      sourceElement.setAttribute('src', 'data:');
 
-        impl.open_({caller: sourceElement});
-        impl.close();
+      impl.open_({caller: sourceElement});
+      impl.close();
 
-        expect(tryFocus).to.be.calledOnce;
-      });
+      expect(tryFocus).to.be.calledOnce;
     });
 
     it('should allow default actions in email documents', async () => {
@@ -318,13 +318,13 @@ describes.realWin(
         return undefined;
       },
       hasAttribute: () => undefined,
-      getImpl: () => Promise.resolve(sourceElement.implementation_),
+      getImpl: () => Promise.resolve({}),
     };
 
     beforeEach(() => {
       win = env.win;
       doc = win.document;
-      clock = lolex.install();
+      clock = fakeTimers.withGlobal(win).install();
 
       env.sandbox.stub(WindowInterface, 'getDevicePixelRatio').returns(1);
       lightbox = {
diff --git a/extensions/amp-image-lightbox/OWNERS b/extensions/amp-image-lightbox/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-image-lightbox/OWNERS
+++ b/extensions/amp-image-lightbox/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-image-lightbox/amp-image-lightbox.md b/extensions/amp-image-lightbox/amp-image-lightbox.md
index 4ea0ae8b02fe7..54d2c568c46db 100644
--- a/extensions/amp-image-lightbox/amp-image-lightbox.md
+++ b/extensions/amp-image-lightbox/amp-image-lightbox.md
@@ -25,13 +25,11 @@ limitations under the License.
 
 # amp-image-lightbox
 
-## Behavior
+## Usage
 
-The `amp-image-lightbox` component provides a lightbox experience for a specified image. When the user clicks the image, the image displays in the center of a full-viewport lightbox.
-
-#### Typical usage
-
-The following is a typical example using an `amp-image-lightbox`:
+The `amp-image-lightbox` component provides a lightbox experience for a
+specified image. When the user clicks the image, the image displays in the
+center of a full-viewport lightbox.
 
 ```html
 <amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
@@ -45,16 +43,34 @@ The following is a typical example using an `amp-image-lightbox`:
 ></amp-img>
 ```
 
-When the user clicks the image, the `<amp-img>` activates the `<amp-image-lightbox>` via the [`on`](https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#on) action, which references the ID of the `<amp-image-lightbox>` element (i.e., `lightbox1`). The `<amp-image-lightbox>` then displays the image in the center of the full-viewport lightbox. Note that the `amp-image-lightbox` element itself must be empty and must be set to `layout=nodisplay`.
+When the user clicks the image, the `<amp-img>` activates the
+`<amp-image-lightbox>` via the
+[`on`](https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#on)
+action, which references the ID of the `<amp-image-lightbox>` element (i.e.,
+`lightbox1`). The `<amp-image-lightbox>` then displays the image in the center
+of the full-viewport lightbox. Note that the `amp-image-lightbox` element itself
+must be empty and must be set to `layout=nodisplay`.
+
+Among other things the `amp-image-lightbox` allows the following user
+manipulations: zooming, panning, showing/hiding of the description. Pressing the
+escape key on a keyboard closes the lightbox.
+
+[tip type="read-on"]
+
+To show a gallery of images in a lightbox, there's also the
+[`<amp-lightbox-gallery>`](../amp-lightbox-gallery/amp-lightbox-gallery.md)
+component. To display other types of elements in a lightbox, use
+[`<amp-lightbox>`](../amp-lightbox/amp-lightbox.md).
 
-Among other things the `amp-image-lightbox` allows the following user manipulations: zooming, panning, showing/hiding of the description.
-Pressing the escape key on a keyboard closes the lightbox.
+[/tip]
 
-_Using a single lightbox for multiple images_
+### Use a single lightbox for multiple images
 
-You can use the same `amp-image-lightbox` for more than one image on the AMP page.
+You can use the same `amp-image-lightbox` for more than one image on the AMP
+page.
 
-In this example, two images display: a cat and a frog. When the user clicks either image, the image displays in the lightbox.
+In this example, two images display: a cat and a frog. When the user clicks
+either image, the image displays in the lightbox.
 
 ```html
 <amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
@@ -80,14 +96,17 @@ In this example, two images display: a cat and a frog. When the user clicks eith
 ></amp-img>
 ```
 
-### Captions
+### Add captions
 
-Optionally, you can display captions at the bottom of the viewport for the image. The `<amp-image-lightbox>` components determines the content for the caption as follows:
+Optionally, you can display captions at the bottom of the viewport for the
+image. The `<amp-image-lightbox>` components determines the content for the
+caption as follows:
 
-1.  If the image is in a `figure` tag, the content of the `<figcaption>` displays for the caption.
-2.  If the image specifies an `aria-describedby` attribute, the content of the element whose ID is specified by the `aria-describedby`attribute displays for the caption.
-
-_Examples: Using captions_
+1.  If the image is in a `figure` tag, the content of the `<figcaption>`
+    displays for the caption.
+1.  If the image specifies an `aria-describedby` attribute, the content of the
+    element whose ID is specified by the `aria-describedby` attribute displays
+    for the caption.
 
 ```html
 <!-- Captions via figcaption -->
@@ -122,50 +141,34 @@ _Examples: Using captions_
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>layout (required)</strong></td>
-    <td>Must be set to <code>nodisplay</code>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>id (required)</strong></td>
-    <td>The ID for the lightbox element that's used as a target for the image's <code>on</code> action.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-close-button-aria-label (optional)</strong></td>
-    <td>An ARIA label that you can use for a close button.</td>
-  </tr>
-</table>
+### `layout`
 
-```html
-<amp-image-lightbox
-  id="image-lightbox1"
-  layout="nodisplay"
-  data-close-button-aria-label="Close"
-></amp-image-lightbox>
-```
+Must be set to `nodisplay`.
 
-## Styling
+### `id`
 
-You can style the `amp-image-lightbox` component with standard CSS. Some of the
-properties that can be styled are `background` and `color`. The `amp-image-lightbox-caption` class is also available to style the caption
-section.
+The ID for the lightbox element that's used as a target for the image's `on`
+action.
+
+### `data-close-button-aria-label` (optional)
+
+An ARIA label that you can use for a close button.
 
 ## Actions
 
-The `amp-image-lightbox` exposes the following actions you can use [AMP on-syntax to trigger](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events):
+### `open` (default)
+
+Opens the image lightbox with the source image being the one that triggered the
+action.
 
-<table>
-  <tr>
-    <th width="20%">Action</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td>open (default)</td>
-    <td>Opens the image lightbox with the source image being the one that triggered the action.</td>
-  </tr>
-</table>
+## Styling
+
+You can style the `amp-image-lightbox` component with standard CSS. Some of the
+properties that can be styled are `background` and `color`. The
+`amp-image-lightbox-caption` class is also available to style the caption
+section.
 
 ## Validation
 
-See [amp-image-lightbox rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-image-lightbox/validator-amp-image-lightbox.protoascii) in the AMP validator specification.
+See [`amp-image-lightbox` rules](validator-amp-image-lightbox.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-image-lightbox/validator-amp-image-lightbox.protoascii b/extensions/amp-image-lightbox/validator-amp-image-lightbox.protoascii
index 43c62d817c44c..62c0e8a898755 100644
--- a/extensions/amp-image-lightbox/validator-amp-image-lightbox.protoascii
+++ b/extensions/amp-image-lightbox/validator-amp-image-lightbox.protoascii
@@ -15,7 +15,6 @@
 #
 tags: {  # amp-image-lightbox
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-image-lightbox"
@@ -51,4 +50,3 @@ tags: {  # <amp-image-lightbox>
     supported_layouts: NODISPLAY
   }
 }
-
diff --git a/extensions/amp-image-slider/0.1/amp-image-slider.js b/extensions/amp-image-slider/0.1/amp-image-slider.js
index d2405e644d982..1a1b20b10484b 100644
--- a/extensions/amp-image-slider/0.1/amp-image-slider.js
+++ b/extensions/amp-image-slider/0.1/amp-image-slider.js
@@ -14,16 +14,20 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {CSS} from '../../../build/amp-image-slider-0.1.css';
-import {CommonSignals} from '../../../src/common-signals';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
 import {Gestures} from '../../../src/gesture';
 import {Services} from '../../../src/services';
 import {SwipeXRecognizer} from '../../../src/gesture-recognizers';
-import {clamp} from '../../../src/utils/math';
+import {clamp} from '../../../src/core/math';
 import {dev, user, userAssert} from '../../../src/log';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {listen} from '../../../src/event-helper';
+import {
+  observeWithSharedInOb,
+  unobserveWithSharedInOb,
+} from '../../../src/viewport-observer';
 import {setStyles} from '../../../src/style';
 
 export class AmpImageSlider extends AMP.BaseElement {
@@ -34,53 +38,53 @@ export class AmpImageSlider extends AMP.BaseElement {
     /** @private {Document} */
     this.doc_ = this.win.document;
 
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.container_ = null;
 
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.leftAmpImage_ = null;
 
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.rightAmpImage_ = null;
 
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.leftLabelWrapper_ = null;
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.leftLabel_ = null;
 
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.rightLabelWrapper_ = null;
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.rightLabel_ = null;
 
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.leftMask_ = null;
 
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.rightMask_ = null;
 
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.bar_ = null;
 
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.barStick_ = null;
 
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.hintLeftArrow_ = null;
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.hintRightArrow_ = null;
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.hintLeftBody_ = null;
-    /** @private {Element|null} */
+    /** @private {?Element} */
     this.hintRightBody_ = null;
 
-    /** @private {UnlistenDef|null} */
+    /** @private {?UnlistenDef} */
     this.unlistenMouseDown_ = null;
-    /** @private {UnlistenDef|null} */
+    /** @private {?UnlistenDef} */
     this.unlistenMouseUp_ = null;
-    /** @private {UnlistenDef|null} */
+    /** @private {?UnlistenDef} */
     this.unlistenMouseMove_ = null;
-    /** @private {UnlistenDef|null} */
+    /** @private {?UnlistenDef} */
     this.unlistenKeyDown_ = null;
 
     // Step size on keyboard action, 0.1 = 10%
@@ -94,7 +98,7 @@ export class AmpImageSlider extends AMP.BaseElement {
       'disable-hint-reappear'
     );
 
-    /** @private {Gestures|null} */
+    /** @private {?Gestures} */
     this.gestures_ = null;
 
     /** @private {boolean} */
@@ -368,7 +372,7 @@ export class AmpImageSlider extends AMP.BaseElement {
 
     this.gestures_.onPointerDown((e) => {
       // Ensure touchstart changes slider position
-      this.pointerMoveX_(e.touches[0].pageX, true);
+      this.pointerMoveX_(e.touches[0].pageX);
       this.animateHideHint_();
     });
   }
@@ -416,7 +420,7 @@ export class AmpImageSlider extends AMP.BaseElement {
    */
   onMouseDown_(e) {
     e.preventDefault();
-    this.pointerMoveX_(e.pageX, true);
+    this.pointerMoveX_(e.pageX);
 
     // In case, clear up remnants
     // This is to prevent right mouse button down when left still down
@@ -505,7 +509,7 @@ export class AmpImageSlider extends AMP.BaseElement {
 
   /**
    * Unlisten a listener and clear. If null, does nothing
-   * @param {UnlistenDef|null} unlistenHandle
+   * @param {?UnlistenDef} unlistenHandle
    * @private
    */
   unlisten_(unlistenHandle) {
@@ -558,7 +562,8 @@ export class AmpImageSlider extends AMP.BaseElement {
    */
   getCurrentSliderPercentage_() {
     const {left: barLeft} = this.bar_./*OK*/ getBoundingClientRect();
-    const {left: boxLeft, width: boxWidth} = this.getLayoutBox();
+    const {left: boxLeft, width: boxWidth} =
+      this.element./*OK*/ getBoundingClientRect();
     return (barLeft - boxLeft) / boxWidth;
   }
 
@@ -628,40 +633,26 @@ export class AmpImageSlider extends AMP.BaseElement {
    * Move slider based on given pointer x position
    * Do NOT wrap this in mutateElement!
    * @param {number} pointerX
-   * @param {boolean} opt_recal recalibrate rect
    * @private
    */
-  pointerMoveX_(pointerX, opt_recal = false) {
+  pointerMoveX_(pointerX) {
     let width, left, right;
-    if (!opt_recal) {
-      const layoutBox = this.getLayoutBox();
-      width = layoutBox.width;
-      left = layoutBox.left;
-      right = layoutBox.right;
-      const newPos = clamp(pointerX, left, right);
-      const newPercentage = (newPos - left) / width;
-      this.mutateElement(() => {
+    // This is to address the "snap to leftmost" bug that occurs on
+    // pointer down after scrolling away and back 3+ slides
+    // layoutBox is not updated correctly when first landed on page
+    this.measureMutateElement(
+      () => {
+        const rect = this.element./*OK*/ getBoundingClientRect();
+        width = rect.width;
+        left = rect.left;
+        right = rect.right;
+      },
+      () => {
+        const newPos = clamp(pointerX, left, right);
+        const newPercentage = (newPos - left) / width;
         this.updatePositions_(newPercentage);
-      });
-    } else {
-      // Fix cases where getLayoutBox() cannot be trusted (when in carousel)!
-      // This is to address the "snap to leftmost" bug that occurs on
-      // pointer down after scrolling away and back 3+ slides
-      // layoutBox is not updated correctly when first landed on page
-      this.measureMutateElement(
-        () => {
-          const rect = this.element./*OK*/ getBoundingClientRect();
-          width = rect.width;
-          left = rect.left;
-          right = rect.right;
-        },
-        () => {
-          const newPos = clamp(pointerX, left, right);
-          const newPercentage = (newPos - left) / width;
-          this.updatePositions_(newPercentage);
-        }
-      );
-    }
+      }
+    );
   }
 
   /**
@@ -714,6 +705,9 @@ export class AmpImageSlider extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
+    observeWithSharedInOb(this.element, (inViewport) =>
+      this.viewportCallback_(inViewport)
+    );
     // Extensions such as amp-carousel still uses .setOwner()
     // This would break the rendering of the images as carousel
     // will call .scheduleLayout on the slider but not the contents
@@ -757,6 +751,7 @@ export class AmpImageSlider extends AMP.BaseElement {
 
   /** @override */
   unlayoutCallback() {
+    unobserveWithSharedInOb(this.element);
     this.unregisterEvents_();
     return true;
   }
@@ -771,8 +766,11 @@ export class AmpImageSlider extends AMP.BaseElement {
     this.registerEvents_();
   }
 
-  /** @override */
-  viewportCallback(inViewport) {
+  /**
+   * @param {boolean} inViewport
+   * @private
+   */
+  viewportCallback_(inViewport) {
     // Show hint if back into viewport and user does not explicitly
     // disable this
     if (inViewport && this.shouldHintReappear_) {
diff --git a/extensions/amp-image-slider/0.1/storybook/Basic.amp.js b/extensions/amp-image-slider/0.1/storybook/Basic.amp.js
index 581919169a01e..db19a4971c82e 100644
--- a/extensions/amp-image-slider/0.1/storybook/Basic.amp.js
+++ b/extensions/amp-image-slider/0.1/storybook/Basic.amp.js
@@ -15,70 +15,76 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {storiesOf} from '@storybook/preact';
 import {text, withKnobs} from '@storybook/addon-knobs';
-import {withA11y} from '@storybook/addon-a11y';
-import withAmp from '../../../../build-system/tasks/storybook/amp-env/decorator.js';
+import {withAmp} from '@ampproject/storybook-addon';
 
-// eslint-disable-next-line
-storiesOf('Image Slider', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withA11y)
-  .addDecorator(withAmp)
-  .addParameters({extensions: [{name: 'amp-image-slider', version: 0.1}]})
-  .add('default', () => {
-    const first = text(
-      'First image',
-      'https://amp.dev/static/samples/img/canoe_900x600.jpg'
-    );
-    const second = text(
-      'Second image',
-      'https://amp.dev/static/samples/img/canoe_900x600_blur.jpg'
-    );
+export default {
+  title: 'Image Slider',
+  decorators: [withKnobs, withAmp],
 
-    return (
-      <amp-image-slider width="600" height="300" layout="fixed">
-        <amp-img src={first} alt={'First image'} layout="fill"></amp-img>
-        <amp-img src={second} alt={'Second iamge'} layout="fill"></amp-img>
-      </amp-image-slider>
-    );
-  })
-  .add('custom-hints', () => {
-    const first = text(
-      'First image',
-      'https://amp.dev/static/samples/img/canoe_900x600.jpg'
-    );
-    const second = text(
-      'Second image',
-      'https://amp.dev/static/samples/img/canoe_900x600_blur.jpg'
-    );
+  parameters: {
+    extensions: [{name: 'amp-image-slider', version: 0.1}],
+  },
+};
 
-    return (
-      <amp-image-slider width="600" height="300" layout="fixed">
-        <amp-img src={first} alt={'First image'} layout="fill"></amp-img>
-        <amp-img src={second} alt={'Second image'} layout="fill"></amp-img>
-        <style jsx global>
-          {`
-            .amp-image-slider-hint-right {
-              width: 10px;
-              height: 20px;
-              background-size: 10px 20px;
-              margin-left: 10px;
-              background-image: url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20' viewBox='0 0 10 20'%3e%3cpolygon points='0,0 10,10 0,20' style='fill:white;stroke:black;stroke-width:1' /%3e%3c/svg%3e");
-            }
-          `}
-        </style>
-        <style jsx global>
-          {`
-            .amp-image-slider-hint-left {
-              width: 10px;
-              height: 20px;
-              background-size: 10px 20px;
-              margin-right: 10px;
-              background-image: url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20' viewBox='0 0 10 20'%3e%3cpolygon points='10,0 0,10 10,20' style='fill:white;stroke:black;stroke-width:1' /%3e%3c/svg%3e");
-            }
-          `}
-        </style>
-      </amp-image-slider>
-    );
-  });
+export const Default = () => {
+  const first = text(
+    'First image',
+    'https://amp.dev/static/samples/img/canoe_900x600.jpg'
+  );
+  const second = text(
+    'Second image',
+    'https://amp.dev/static/samples/img/canoe_900x600_blur.jpg'
+  );
+
+  return (
+    <amp-image-slider width="600" height="300" layout="fixed">
+      <amp-img src={first} alt={'First image'} layout="fill"></amp-img>
+      <amp-img src={second} alt={'Second iamge'} layout="fill"></amp-img>
+    </amp-image-slider>
+  );
+};
+
+Default.storyName = 'default';
+
+export const CustomHints = () => {
+  const first = text(
+    'First image',
+    'https://amp.dev/static/samples/img/canoe_900x600.jpg'
+  );
+  const second = text(
+    'Second image',
+    'https://amp.dev/static/samples/img/canoe_900x600_blur.jpg'
+  );
+
+  return (
+    <amp-image-slider width="600" height="300" layout="fixed">
+      <amp-img src={first} alt={'First image'} layout="fill"></amp-img>
+      <amp-img src={second} alt={'Second image'} layout="fill"></amp-img>
+      <style jsx global>
+        {`
+          .amp-image-slider-hint-right {
+            width: 10px;
+            height: 20px;
+            background-size: 10px 20px;
+            margin-left: 10px;
+            background-image: url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20' viewBox='0 0 10 20'%3e%3cpolygon points='0,0 10,10 0,20' style='fill:white;stroke:black;stroke-width:1' /%3e%3c/svg%3e");
+          }
+        `}
+      </style>
+      <style jsx global>
+        {`
+          .amp-image-slider-hint-left {
+            width: 10px;
+            height: 20px;
+            background-size: 10px 20px;
+            margin-right: 10px;
+            background-image: url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20' viewBox='0 0 10 20'%3e%3cpolygon points='10,0 0,10 10,20' style='fill:white;stroke:black;stroke-width:1' /%3e%3c/svg%3e");
+          }
+        `}
+      </style>
+    </amp-image-slider>
+  );
+};
+
+CustomHints.storyName = 'custom-hints';
diff --git a/extensions/amp-image-slider/0.1/test/integration/test-amp-image-slider.js b/extensions/amp-image-slider/0.1/test/integration/test-amp-image-slider.js
index a57e762a80ec4..7afec4dc61bd4 100644
--- a/extensions/amp-image-slider/0.1/test/integration/test-amp-image-slider.js
+++ b/extensions/amp-image-slider/0.1/test/integration/test-amp-image-slider.js
@@ -16,9 +16,9 @@
 
 import {createPointerEvent} from '../../../../../testing/test-helper';
 
-const t = describe.configure().ifChrome();
+const t = describes.sandboxed.configure().ifChrome();
 
-t.run('amp-image-slider', function () {
+t.run('amp-image-slider', {}, function () {
   this.timeout(20000);
   const DEFAULT_TIMEOUT = 1600;
 
@@ -28,8 +28,8 @@ t.run('amp-image-slider', function () {
   const sliderBody = `
     <amp-image-slider tabindex="0" id="s1"
         layout="responsive" width="1000" height="500">
-      <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-      <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+      <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
+      <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
       <div first class="label">BEFORE</div>
       <div second class="label">AFTER</div>
     </amp-image-slider>
@@ -37,8 +37,8 @@ t.run('amp-image-slider', function () {
     <amp-image-slider tabindex="0" id="s2"
         layout="responsive" width="1000" height="500" disable-hint-reappear
         initial-slider-position="0.6" step-size="0.2">
-      <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
-      <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
+      <amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
+      <amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
       <div first class="label">BEFORE</div>
       <div second class="label">AFTER</div>
     </amp-image-slider>
diff --git a/extensions/amp-image-slider/OWNERS b/extensions/amp-image-slider/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-image-slider/OWNERS
+++ b/extensions/amp-image-slider/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-image-slider/amp-image-slider.md b/extensions/amp-image-slider/amp-image-slider.md
index 827301b2e2de6..aa4e3e23649fa 100644
--- a/extensions/amp-image-slider/amp-image-slider.md
+++ b/extensions/amp-image-slider/amp-image-slider.md
@@ -24,13 +24,17 @@ limitations under the License.
 
 # amp-image-slider
 
-## Behavior
+## Usage
 
-The `amp-image-slider` component requires exactly two `amp-img` elements as its children. The first child image displays on the left, the second child image displays on the right.
+The `amp-image-slider` component requires exactly two `amp-img` elements as its
+children. The first child image displays on the left, the second child image
+displays on the right.
 
-The `amp-image-slider` component can also contain two `<div>` elements to use as labels for the images. The labels are overlaid on top of the images. The label on the left image requires the `first` attribute, while the right labels requires the `second` attribute. By default, the labels display at the top left corner of the image.
-
-_Example: Displays an image slider with labeled images_
+The `amp-image-slider` component can also contain two `<div>` elements to use as
+labels for the images. The labels are overlaid on top of the images. The label
+on the left image requires the `first` attribute, while the right label requires
+the `second` attribute. By default, the labels display at the top left corner of
+the image.
 
 ```html
 <amp-image-slider layout="responsive" width="100" height="200">
@@ -41,19 +45,88 @@ _Example: Displays an image slider with labeled images_
 </amp-image-slider>
 ```
 
-Once the slider is loaded, the compared images are separated by a vertical bar, with helpful arrow hints displayed at the slider's center.
+Once the slider is loaded, the compared images are separated by a vertical bar,
+with helpful arrow hints displayed at the slider's center.
+
+Users can mouse down or touch to move the slider to the position of the pointer,
+and can then move the pointer to drag the slider bar left or right. For the left
+image, only the part that is left to the bar is displayed; similarly for the
+right image, to only display the right portion.
+
+If you specify `tabindex` on the `amp-image-slider` element, users can navigate
+the slider with their keyboards. Pressing the down, left, or right arrow moves
+the slider bar one step towards the corresponding direction. Pressing the Home
+key brings the slider to the center. Pressing the PageUp or PageDown keys moves
+to the left or right end of the slider body.
+
+### Customize labels
+
+You can customize your labels by providing customized CSS classes. You can use
+`top`, `right`, `bottom`, `left` and `transform: translate(...)` rules to
+control their positioning. Other rules, such as `border`, `background-color`,
+etc., could be used for customizing the style of your labels.
+
+The following example displays an image slider with left label on top left,
+right label on top right:
+
+```html
+<!-- head -->
+<style amp-custom>
+  .top-right {
+    top: 0;
+    right: 0;
+  }
+</style>
+
+<!-- body -->
+<amp-image-slider layout="responsive" width="100" height="200">
+  <amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
+  <amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
+  <div first>This apple is green</div>
+  <div second class="top-right">This apple is red</div>
+</amp-image-slider>
+```
+
+### Customize hints
+
+By default, the hints are a pair of white arrows with drop shadow. To customize
+the left and right hints, you can override `.amp-image-slider-hint-left` and
+`.amp-image-slider-hint-right` classes. To replace the arrows with customized
+images, overwrite `background-image`. To remove drop shadow, set
+`filter: none;`.
 
-Users can mouse down or touch to move the slider to the position of the pointer, and can then move the pointer to drag the slider bar left or right. For the left image, only the part that is left to the bar is displayed; similarly for the right image, to only display the right portion.
+The following example replace the arrows with triangles:
 
-If you specify `tabindex` on the `amp-image-slider` element, users can navigate the slider with their keyboards. Pressing the down, left, or right arrow moves the slider bar one step towards the corresponding direction. Pressing the Home key brings the slider to the center. Pressing the PageUp or PageDown keys moves to the left or right end of the slider body.
+```css
+.amp-image-slider-hint-left {
+  width: 10px;
+  height: 20px;
+  background-size: 10px 20px;
+  margin-right: 10px;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20' viewBox='0 0 10 20'%3e%3cpolygon points='10,0 0,10 10,20' style='fill:white;stroke:black;stroke-width:1' /%3e%3c/svg%3e");
+}
+
+.amp-image-slider-hint-right {
+  width: 10px;
+  height: 20px;
+  background-size: 10px 20px;
+  margin-left: 10px;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20' viewBox='0 0 10 20'%3e%3cpolygon points='0,0 10,10 0,20' style='fill:white;stroke:black;stroke-width:1' /%3e%3c/svg%3e");
+}
+```
 
 ## Attributes
 
 ### `disable-hint-reappear`
 
-The hints that shows at the center of the vertical bar will disappear once user starts interacting with the slider (such as clicking the mouse button, touch the slider, and pressing keys to move the slider). The hints would reappear if it then leaves the viewport and goes back in again. To stop such reappearing behavior, add the `disable-hint-reappear` attribute to the image slider.
+The hints that shows at the center of the vertical bar will disappear once the
+user starts interacting with the slider (such as clicking the mouse button,
+touch the slider, and pressing keys to move the slider). The hints would
+reappear if it then leaves the viewport and goes back in again. To stop such
+reappearing behavior, add the `disable-hint-reappear` attribute to the image
+slider.
 
-_Example: Displays an image slider without reappearing hints_
+The following example displays an image slider without reappearing hints:
 
 ```html
 <amp-image-slider
@@ -71,9 +144,13 @@ _Example: Displays an image slider without reappearing hints_
 
 ### `initial-slider-position`
 
-The vertical slider bar sits at the center of the slider body by default. To move the initial slider position to a different place, set `initial-slider-position` to a value between 0 and 1, corresponding to 0% to 100% from the left slider edge.
+The vertical slider bar sits at the center of the slider body by default. To
+move the initial slider position to a different place, set
+`initial-slider-position` to a value between `0` and `1`, corresponding to 0% to
+100% from the left slider edge.
 
-_Example: Displays an image slider with initial slider position on the left_
+The following example displays an image slider with initial slider position on
+the left:
 
 ```html
 <amp-image-slider
@@ -91,9 +168,11 @@ _Example: Displays an image slider with initial slider position on the left_
 
 ### `step-size`
 
-When focusing on the slider, left and right keyboard buttons move the slider bar by 10% each press. To use a different step size, set `step-size` to a value between 0 and 1, corresponding to moving 0% to moving 100% each key press.
+When focusing on the slider, left and right keyboard buttons move the slider bar
+by 10% each press. To use a different step size, set `step-size` to a value
+between `0` and `1`, corresponding to moving 0% to moving 100% each key press.
 
-_Example: Displays an image slider with step size of 25%_
+The following example displays an image slider with step size of 25%:
 
 ```html
 <amp-image-slider layout="responsive" width="100" height="200" step-size="0.25">
@@ -108,54 +187,10 @@ _Example: Displays an image slider with step size of 25%_
 
 ### `seekTo`
 
-`slider-id.seekTo(percent=[0,1])` move the corresponding slider's bar to the given percentage from left.
-
-## Customizations
-
-### Labels
-
-You can customize your labels by providing customized CSS classes. You can use `top/right/bottom/left` and `transform: translate(...)` rules to control their positioning. Other rules, such as `border`, `background-color`, etc., could be used for customizing the style of your labels.
-
-_Example: Displays an image slider with left label on top left, right label on top right_
-
-```html
-<!-- head -->
-<style amp-custom>
-  .top-right {
-    top: 0;
-    right: 0;
-  }
-</style>
-
-<!-- body -->
-<amp-image-slider layout="responsive" width="100" height="200">
-  <amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
-  <amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
-  <div first>This apple is green</div>
-  <div second class="top-right">This apple is red</div>
-</amp-image-slider>
-```
-
-### Hints
+`slider-id.seekTo(percent=[0,1])` move the corresponding slider's bar to the
+given percentage from left.
 
-By default, the hints are a pair of white arrows with drop shadow. To customize the left and right hints, you can override `.amp-image-slider-hint-left` and `.amp-image-slider-hint-right` classes. To replace the arrows with customized images, overwrite `background-image`. To remove drop shadow, set `filter: none;`.
+## Validation
 
-_Example: Replace arrows with triangles_
-
-```css
-.amp-image-slider-hint-left {
-  width: 10px;
-  height: 20px;
-  background-size: 10px 20px;
-  margin-right: 10px;
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20' viewBox='0 0 10 20'%3e%3cpolygon points='10,0 0,10 10,20' style='fill:white;stroke:black;stroke-width:1' /%3e%3c/svg%3e");
-}
-
-.amp-image-slider-hint-right {
-  width: 10px;
-  height: 20px;
-  background-size: 10px 20px;
-  margin-left: 10px;
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20' viewBox='0 0 10 20'%3e%3cpolygon points='0,0 10,10 0,20' style='fill:white;stroke:black;stroke-width:1' /%3e%3c/svg%3e");
-}
-```
+See [`amp-image-slider` rules](validator-amp-image-slider.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-image-slider/validator-amp-image-slider.protoascii b/extensions/amp-image-slider/validator-amp-image-slider.protoascii
index 0d6cefc86b539..a41808f4ad09c 100644
--- a/extensions/amp-image-slider/validator-amp-image-slider.protoascii
+++ b/extensions/amp-image-slider/validator-amp-image-slider.protoascii
@@ -48,7 +48,7 @@ tags: {  # <amp-image-slider>
     child_tag_name_oneof: "DIV"
     mandatory_min_num_child_tags: 2
   }
-  spec_url: "https://amp.dev/documentation/components/amp-image-slider"
+  spec_url: "https://amp.dev/documentation/components/amp-image-slider/"
   amp_layout: {
     supported_layouts: FIXED
     supported_layouts: INTRINSIC
@@ -82,7 +82,7 @@ tags: {  # <amp-image-slider>
     child_tag_name_oneof: "I-AMPHTML-SIZER"
     mandatory_min_num_child_tags: 2
   }
-  spec_url: "https://amp.dev/documentation/components/amp-image-slider"
+  spec_url: "https://amp.dev/documentation/components/amp-image-slider/"
   amp_layout: {
     supported_layouts: FIXED
     supported_layouts: INTRINSIC
@@ -99,7 +99,7 @@ tags: {
     name: "first"
     mandatory: true
   }
-  spec_url: "https://amp.dev/documentation/components/amp-image-slider"
+  spec_url: "https://amp.dev/documentation/components/amp-image-slider/"
 }
 tags: {
   html_format: AMP
@@ -110,5 +110,5 @@ tags: {
     name: "second"
     mandatory: true
   }
-  spec_url: "https://amp.dev/documentation/components/amp-image-slider"
+  spec_url: "https://amp.dev/documentation/components/amp-image-slider/"
 }
diff --git a/extensions/amp-image-viewer/0.1/amp-image-viewer.js b/extensions/amp-image-viewer/0.1/amp-image-viewer.js
index d2e2252c6a539..91b98a267319a 100644
--- a/extensions/amp-image-viewer/0.1/amp-image-viewer.js
+++ b/extensions/amp-image-viewer/0.1/amp-image-viewer.js
@@ -18,7 +18,7 @@ import * as st from '../../../src/style';
 import * as tr from '../../../src/transition';
 import {Animation} from '../../../src/animation';
 import {CSS} from '../../../build/amp-image-viewer-0.1.css';
-import {CommonSignals} from '../../../src/common-signals';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
 import {
   DoubletapRecognizer,
   PinchRecognizer,
@@ -30,8 +30,8 @@ import {Gestures} from '../../../src/gesture';
 import {Layout} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {WindowInterface} from '../../../src/window-interface';
-import {bezierCurve} from '../../../src/curve';
-import {boundValue, distance, magnitude} from '../../../src/utils/math';
+import {bezierCurve} from '../../../src/core/data-structures/curve';
+import {boundValue, distance, magnitude} from '../../../src/core/math';
 import {closestAncestorElementBySelector, elementByTag} from '../../../src/dom';
 import {continueMotion} from '../../../src/motion';
 import {createCustomEvent} from '../../../src/event-helper';
@@ -41,7 +41,11 @@ import {
   layoutRectFromDomRect,
   layoutRectLtwh,
   moveLayoutRect,
-} from '../../../src/layout-rect';
+} from '../../../src/core/math/layout-rect';
+import {
+  observeContentSize,
+  unobserveContentSize,
+} from '../../../src/utils/size-observer';
 import {setStyles} from '../../../src/style';
 import {srcsetFromElement} from '../../../src/srcset';
 
@@ -122,6 +126,8 @@ export class AmpImageViewer extends AMP.BaseElement {
 
     /** @private {?Promise} */
     this.loadPromise_ = null;
+
+    this.onResize_ = this.onResize_.bind(this);
   }
 
   /** @override */
@@ -148,23 +154,6 @@ export class AmpImageViewer extends AMP.BaseElement {
     );
   }
 
-  /** @override */
-  onMeasureChanged() {
-    // TODO(sparhami) #19259 Tracks a more generic way to do this. Remove once
-    // we have something better.
-    const isScaled = closestAncestorElementBySelector(
-      this.element,
-      '[i-amphtml-scale-animation]'
-    );
-    if (isScaled) {
-      return;
-    }
-
-    if (this.loadPromise_) {
-      this.loadPromise_.then(() => this.resetImageDimensions_());
-    }
-  }
-
   /** @override */
   layoutCallback() {
     if (this.loadPromise_) {
@@ -231,6 +220,7 @@ export class AmpImageViewer extends AMP.BaseElement {
   unlayoutCallback() {
     this.cleanupGestures_();
     this.loadPromise_ = null;
+    unobserveContentSize(this.element, this.onResize_);
     return true;
   }
 
@@ -319,6 +309,8 @@ export class AmpImageViewer extends AMP.BaseElement {
     this.setSourceDimensions_(ampImg);
     this.srcset_ = srcsetFromElement(ampImg);
 
+    observeContentSize(this.element, this.onResize_);
+
     return this.mutateElement(() => {
       setStyles(dev().assertElement(this.image_), {
         top: 0,
@@ -334,6 +326,21 @@ export class AmpImageViewer extends AMP.BaseElement {
     });
   }
 
+  /** @private */
+  onResize_() {
+    // TODO(#19259): Tracks a more generic way to do this. Remove once
+    // we have something better.
+    const isScaled = closestAncestorElementBySelector(
+      this.element,
+      '[i-amphtml-scale-animation]'
+    );
+    if (isScaled) {
+      return;
+    }
+
+    this.resetImageDimensions_();
+  }
+
   /**
    * Measures the image viewer and image sizes and positioning.
    * This must be called AFTER the source element has already been
@@ -766,12 +773,9 @@ export class AmpImageViewer extends AMP.BaseElement {
 
     const newPosX = this.boundX_(this.startX_ + deltaX * newScale, false);
     const newPosY = this.boundY_(this.startY_ + deltaY * newScale, false);
-    return /** @type {!Promise|undefined} */ (this.set_(
-      newScale,
-      newPosX,
-      newPosY,
-      animate
-    ));
+    return /** @type {!Promise|undefined} */ (
+      this.set_(newScale, newPosX, newPosY, animate)
+    );
   }
 
   /**
diff --git a/extensions/amp-image-viewer/OWNERS b/extensions/amp-image-viewer/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-image-viewer/OWNERS
+++ b/extensions/amp-image-viewer/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-imgur/0.1/amp-imgur.js b/extensions/amp-imgur/0.1/amp-imgur.js
index fc5c722c80c3b..9c425ffcf65ec 100644
--- a/extensions/amp-imgur/0.1/amp-imgur.js
+++ b/extensions/amp-imgur/0.1/amp-imgur.js
@@ -27,13 +27,16 @@
  * </code>
  */
 
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {Services} from '../../../src/services';
+import {createElementWithAttributes, removeElement} from '../../../src/dom';
 import {getData, listen} from '../../../src/event-helper';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {isObject} from '../../../src/types';
-import {removeElement} from '../../../src/dom';
-import {startsWith} from '../../../src/string';
-import {tryParseJson} from '../../../src/json';
-import {userAssert} from '../../../src/log';
+import {isObject} from '../../../src/core/types';
+import {tryParseJson} from '../../../src/core/types/object/json';
+import {user, userAssert} from '../../../src/log';
+
+const TAG = 'amp-imgur';
 
 export class AmpImgur extends AMP.BaseElement {
   /** @param {!AmpElement} element */
@@ -46,8 +49,8 @@ export class AmpImgur extends AMP.BaseElement {
     /** @private {?Function} */
     this.unlistenMessage_ = null;
 
-    /** @private {string} */
-    this.imgurid_ = '';
+    /** @private {?Function} */
+    this.resolveReceivedMessage_ = null;
   }
 
   /** @override */
@@ -57,8 +60,8 @@ export class AmpImgur extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
-    this.imgurid_ = userAssert(
-      this.element.getAttribute('data-imgur-id'),
+    userAssert(
+      this.element.dataset.imgurId,
       'The data-imgur-id attribute is required for <amp-imgur> %s',
       this.element
     );
@@ -66,29 +69,77 @@ export class AmpImgur extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    const iframe = this.element.ownerDocument.createElement('iframe');
-    this.iframe_ = iframe;
-
     this.unlistenMessage_ = listen(
       this.win,
       'message',
       this.handleImgurMessages_.bind(this)
     );
 
-    iframe.setAttribute('scrolling', 'no');
-    iframe.setAttribute('frameborder', '0');
-    iframe.setAttribute('allowfullscreen', 'true');
-
-    const sanitizedID = this.imgurid_.replace(
+    const sanitizedId = this.element.dataset.imgurId.replace(
       /^(a\/)?(.*)/,
-      (match, aSlash, rest) => {
-        return (aSlash || '') + encodeURIComponent(rest);
+      (unusedMatch, aSlash, rest) => (aSlash || '') + encodeURIComponent(rest)
+    );
+
+    return this.insertLoadIframe_(sanitizedId)
+      .catch((e) => {
+        // Unfortunately, from May 2020 to May 2021 we incorrectly interpreted
+        // any post id as an album id.
+        // To maintain compatibility with this period, we retry with by adding
+        // the a/ prefix when failing to load.
+        // https://go.amp.dev/issue/28049
+        if (sanitizedId.startsWith('a/')) {
+          throw e;
+        }
+        const idWithPrefix = `a/${sanitizedId}`;
+        return this.insertLoadIframe_(idWithPrefix).then(() => {
+          user().warn(
+            TAG,
+            `id should be prefixed with "a/", loaded album using data-imgur-id="${idWithPrefix}". This element should be updated to use "a/".`
+          );
+        });
+      })
+      .catch(() => {
+        user().error(TAG, `Failed to load. Is "${sanitizedId}" a correct id?`);
+      });
+  }
+
+  /**
+   * @param {string} id
+   * @return {!Promise<HTMLIFrameElement>}
+   * @private
+   */
+  insertLoadIframe_(id) {
+    const {element} = this;
+
+    const iframe = createElementWithAttributes(
+      element.ownerDocument,
+      'iframe',
+      {
+        'scrolling': 'no',
+        'frameborder': '0',
+        'allowfullscreen': 'true',
+        'title': element.title || 'imgur post',
       }
     );
-    iframe.src = 'https://imgur.com/' + sanitizedID + '/embed?pub=true';
+
+    iframe.src = `https://imgur.com/${id}/embed?pub=true`;
+
+    if (this.iframe_) {
+      // reloading
+      element.removeChild(this.iframe_);
+    }
+    this.iframe_ = iframe;
+    element.appendChild(iframe);
+
     this.applyFillContent(iframe);
-    this.element.appendChild(iframe);
-    return this.loadPromise(iframe);
+
+    // We're sure we've loaded when we receive the first message.
+    const {promise, resolve} = new Deferred();
+    this.resolveReceivedMessage_ = resolve;
+
+    return this.loadPromise(this.iframe_).then(() =>
+      Services.timerFor(this.win).timeoutPromise(500, promise)
+    );
   }
 
   /**
@@ -106,12 +157,14 @@ export class AmpImgur extends AMP.BaseElement {
     if (
       !eventData ||
       !(
-        isObject(eventData) ||
-        startsWith(/** @type {string} */ (eventData), '{')
+        isObject(eventData) || /** @type {string} */ (eventData).startsWith('{')
       )
     ) {
       return;
     }
+
+    this?.resolveReceivedMessage_();
+
     const data = isObject(eventData) ? eventData : tryParseJson(eventData);
     if (data['message'] == 'resize_imgur') {
       const height = data['height'];
@@ -132,6 +185,6 @@ export class AmpImgur extends AMP.BaseElement {
   }
 }
 
-AMP.extension('amp-imgur', '0.1', (AMP) => {
-  AMP.registerElement('amp-imgur', AmpImgur);
+AMP.extension(TAG, '0.1', (AMP) => {
+  AMP.registerElement(TAG, AmpImgur);
 });
diff --git a/extensions/amp-imgur/0.1/test/test-amp-imgur.js b/extensions/amp-imgur/0.1/test/test-amp-imgur.js
index fc55f41d4f8c1..ddbe4ccb53664 100644
--- a/extensions/amp-imgur/0.1/test/test-amp-imgur.js
+++ b/extensions/amp-imgur/0.1/test/test-amp-imgur.js
@@ -15,6 +15,11 @@
  */
 
 import '../amp-imgur';
+import {
+  createElementWithAttributes,
+  waitForChildPromise,
+} from '../../../../src/dom';
+import {user} from '../../../../src/log';
 
 describes.realWin(
   'amp-imgur',
@@ -25,23 +30,44 @@ describes.realWin(
   },
   (env) => {
     let win, doc;
+    let clock;
 
     beforeEach(() => {
       win = env.win;
       doc = win.document;
+
+      clock = env.sandbox.useFakeTimers();
     });
 
-    function getImgur(imgurId) {
-      const imgur = doc.createElement('amp-imgur');
-      imgur.setAttribute('data-imgur-id', imgurId);
-      imgur.setAttribute('width', '1');
-      imgur.setAttribute('height', '1');
-      imgur.setAttribute('layout', 'responsive');
-      doc.body.appendChild(imgur);
-      return imgur
-        .build()
-        .then(() => imgur.layoutCallback())
-        .then(() => imgur);
+    async function fakePostMessage(element, data = '{}') {
+      const iframe = element.querySelector('iframe');
+      (await element.getImpl(false)).handleImgurMessages_({
+        data,
+        origin: 'https://imgur.com',
+        source: iframe.contentWindow,
+      });
+    }
+
+    function getImgurElement(imgurId) {
+      const element = createElementWithAttributes(doc, 'amp-imgur', {
+        'data-imgur-id': imgurId,
+        'width': '100',
+        'height': '100',
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      return element.buildInternal().then(() => element);
+    }
+
+    async function getImgur(imgurId) {
+      const element = await getImgurElement(imgurId);
+      const laidOut = element.layoutCallback();
+
+      // layoutCallback is not resolved until the first message is received
+      fakePostMessage(element);
+
+      await laidOut;
+      return element;
     }
 
     function testIframe(iframe, id) {
@@ -52,53 +78,97 @@ describes.realWin(
       expect(iframe.className).to.match(/i-amphtml-fill-content/);
     }
 
-    it('renders', () => {
-      return getImgur('2CnX7').then((imgur) => {
-        testIframe(imgur.querySelector('iframe'), '2CnX7');
-      });
+    it('renders', async () => {
+      const element = await getImgur('2CnX7');
+      testIframe(element.querySelector('iframe'), '2CnX7');
     });
 
-    it('renders a/ type urls', () => {
-      return getImgur('a/ZF7NS3V').then((imgur) => {
-        testIframe(imgur.querySelector('iframe'), 'a/ZF7NS3V');
-      });
+    it('renders a/ type urls', async () => {
+      const element = await getImgur('a/ZF7NS3V');
+      testIframe(element.querySelector('iframe'), 'a/ZF7NS3V');
     });
 
-    it('resizes with JSON String message', () => {
-      return getImgur('2CnX7').then((imgur) => {
-        const impl = imgur.implementation_;
-        const changeHeightSpy = env.sandbox.spy(impl, 'attemptChangeHeight');
-        expect(changeHeightSpy).not.to.have.been.called;
-        const event = {
-          origin: 'https://imgur.com',
-          source: impl.iframe_.contentWindow,
-          data:
-            '{"message":"resize_imgur","href":"https://imgur.com/2CnX7/embed?pub=true","height":396,"width":1400,"context":true}',
-        };
-        impl.handleImgurMessages_(event);
-        expect(changeHeightSpy).to.have.been.calledWith(396);
+    // https://go.amp.dev/issue/28049
+    it('falls back to adding a/ prefix when a message is not received', async () => {
+      const warn = env.sandbox.stub(user(), 'warn');
+      const element = await getImgurElement('ZF7NS3V');
+
+      const laidOut = element.layoutCallback();
+
+      // wait for first iframe to fail and the second to be added
+      let firstIframe;
+      let iframe;
+      await waitForChildPromise(element, (element) => {
+        iframe = element.querySelector('iframe');
+        firstIframe = firstIframe || iframe;
+        return iframe && iframe !== firstIframe;
       });
+
+      fakePostMessage(element);
+      await laidOut;
+
+      testIframe(iframe, 'a/ZF7NS3V');
+
+      expect(
+        warn.withArgs(
+          env.sandbox.match.any,
+          env.sandbox.match(/id should be prefixed/)
+        )
+      ).to.have.been.calledOnce;
+    });
+
+    // https://go.amp.dev/issue/28049
+    it("does not fall back to adding a/ prefix when it's already present", async () => {
+      const error = env.sandbox.stub(user(), 'error');
+      const element = await getImgurElement('a/000000');
+
+      const laidOut = element.layoutCallback();
+
+      clock.tick(500); // timeout waiting for message
+
+      await laidOut;
+
+      testIframe(element.querySelector('iframe'), 'a/000000');
+
+      expect(
+        error.withArgs(
+          env.sandbox.match.any,
+          env.sandbox.match(/Failed to load/)
+        )
+      ).to.have.been.calledOnce;
+    });
+
+    it('resizes with JSON String message', async () => {
+      const element = await getImgur('2CnX7');
+      const impl = await element.getImpl(false);
+      const changeHeightSpy = env.sandbox.spy(impl, 'attemptChangeHeight');
+      expect(changeHeightSpy).not.to.have.been.called;
+      await fakePostMessage(
+        element,
+        JSON.stringify({
+          'message': 'resize_imgur',
+          'href': 'https://imgur.com/2CnX7/embed?pub=true',
+          'height': 396,
+          'width': 1400,
+          'context': true,
+        })
+      );
+      expect(changeHeightSpy).to.have.been.calledWith(396);
     });
 
-    it('resizes with JSON Object message', () => {
-      return getImgur('2CnX7').then((imgur) => {
-        const impl = imgur.implementation_;
-        const changeHeightSpy = env.sandbox.spy(impl, 'attemptChangeHeight');
-        expect(changeHeightSpy).not.to.have.been.called;
-        const event = {
-          origin: 'https://imgur.com',
-          source: impl.iframe_.contentWindow,
-          data: {
-            'message': 'resize_imgur',
-            'href': 'https://imgur.com/2CnX7/embed?pub=true',
-            'height': 400,
-            'width': 1400,
-            'context': true,
-          },
-        };
-        impl.handleImgurMessages_(event);
-        expect(changeHeightSpy).to.have.been.calledWith(400);
+    it('resizes with JSON Object message', async () => {
+      const element = await getImgur('2CnX7');
+      const impl = await element.getImpl(false);
+      const changeHeightSpy = env.sandbox.spy(impl, 'attemptChangeHeight');
+      expect(changeHeightSpy).not.to.have.been.called;
+      await fakePostMessage(element, {
+        'message': 'resize_imgur',
+        'href': 'https://imgur.com/2CnX7/embed?pub=true',
+        'height': 400,
+        'width': 1400,
+        'context': true,
       });
+      expect(changeHeightSpy).to.have.been.calledWith(400);
     });
   }
 );
diff --git a/extensions/amp-imgur/OWNERS b/extensions/amp-imgur/OWNERS
index 451c35ef86bed..70bdffe622ab4 100644
--- a/extensions/amp-imgur/OWNERS
+++ b/extensions/amp-imgur/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'techhtml'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'techhtml'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-imgur/amp-imgur.md b/extensions/amp-imgur/amp-imgur.md
index 485ba29d32631..29669c87a8929 100644
--- a/extensions/amp-imgur/amp-imgur.md
+++ b/extensions/amp-imgur/amp-imgur.md
@@ -24,12 +24,10 @@ limitations under the License.
 
 # amp-imgur
 
-## Behavior
+## Usage
 
 This extension creates an iframe and displays an [imgur](http://imgur.com) post.
 
-Example:
-
 ```html
 <amp-imgur
   data-imgur-id="f462IUj"
@@ -41,25 +39,28 @@ Example:
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-imgur-id (required)</strong></td>
-    <td>The ID of the Imgur post.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>width (required)</strong></td>
-    <td>The width of the Imgur post.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>height (required)</strong></td>
-    <td>The height of the Imgur post.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+### data-imgur-id (required)
+
+The id of the Imgur post.
+
+[tip type="important"]
+Album ids should prefixed with `a/` like `a/ZF7NS3V`.
+
+You can confirm this in the post's url. It should include `a/` before the rest of the id, like on: `https://imgur.com/a/ZF7NS3V`
+[/tip]
+
+### width (required)
+
+The width of the Imgur post.
+
+### height (required)
+
+The height of the Imgur post.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
 
 ## Validation
 
-See [amp-imgur rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-imgur/validator-amp-imgur.protoascii) in the AMP validator specification.
+See [amp-imgur rules](validator-amp-imgur.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-inline-gallery/0.1/amp-inline-gallery-captions.css b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-captions.css
new file mode 100644
index 0000000000000..f10886e722e7b
--- /dev/null
+++ b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-captions.css
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2021 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.
+ */
+
+amp-inline-gallery-captions {
+  pointer-events: none;
+  padding-top: var(--caption-margin-top);
+  margin-top: calc(-1 * var(--i-amphtml-caption-height, 0));
+}
diff --git a/extensions/amp-inline-gallery/0.1/amp-inline-gallery-captions.js b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-captions.js
new file mode 100644
index 0000000000000..ab5fe4ddb7617
--- /dev/null
+++ b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-captions.js
@@ -0,0 +1,91 @@
+/**
+ * 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.
+ */
+
+import {closestAncestorElementBySelector} from '../../../src/dom';
+import {exponentialFalloff} from './amp-inline-gallery-pagination';
+import {isExperimentOn} from '../../../src/experiments';
+import {isLayoutSizeDefined} from '../../../src/layout';
+import {setImportantStyles} from '../../../src/style.js';
+import {userAssert} from '../../../src/log';
+
+export class AmpInlineGalleryCaptions extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+  }
+
+  /** @override */
+  isRelayoutNeeded() {
+    return true;
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'amp-inline-gallery-captions') ||
+        'expected "amp-inline-gallery-captions" experiment to be enabled'
+    );
+    return isLayoutSizeDefined(layout);
+  }
+
+  /** @override */
+  layoutCallback() {
+    const {height} = this./*OK*/ getLayoutBox();
+    const parentGallery = closestAncestorElementBySelector(
+      this.element,
+      'amp-inline-gallery'
+    );
+
+    setImportantStyles(parentGallery, {
+      '--i-amphtml-caption-height': `${height}px`,
+    });
+  }
+
+  /**
+   * @param {number} unusedTotal
+   * @param {number} index
+   * @param {number} offset
+   * @param {!Array<!Element>} slides
+   */
+  updateProgress(unusedTotal, index, offset, slides) {
+    this.mutateElement(() => {
+      this.updateCaptionOpacities_(slides, index, offset);
+    });
+  }
+
+  /**
+   * Updates the opacities of the captions, based on their distance from the
+   * current slide.
+   * @param {!Array<!Element>} slides
+   * @param {number} index
+   * @param {number} offset
+   */
+  updateCaptionOpacities_(slides, index, offset) {
+    slides.forEach((slide, i) => {
+      const indexDistance = Math.abs(index + offset - i);
+      // Want to fall off to zero at the mid way point, the next/prev slide
+      // will start fading in at the same time.
+      const falloffDistance = Math.min(2 * indexDistance, 1);
+      const opacity = exponentialFalloff(falloffDistance, 3);
+      setImportantStyles(slide, {
+        '--caption-opacity': opacity,
+        // Need to prevent pointer events on all other slide's captions so
+        // that the user can select the caption text, click on links, etc.
+        'pointer-events': opacity == 0 ? 'none' : 'all',
+      });
+    });
+  }
+}
diff --git a/extensions/amp-inline-gallery/0.1/amp-inline-gallery-pagination.js b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-pagination.js
index 5062ca21df484..01b92a67f4d45 100644
--- a/extensions/amp-inline-gallery/0.1/amp-inline-gallery-pagination.js
+++ b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-pagination.js
@@ -18,11 +18,11 @@ import {InlineGalleryEvents} from './inline-gallery-events';
 import {Layout} from '../../../src/layout';
 import {createCustomEvent} from '../../../src/event-helper';
 import {devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {htmlFor} from '../../../src/static-template';
 import {scopedQuerySelectorAll} from '../../../src/dom';
 import {setImportantStyles} from '../../../src/style.js';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
 
 /**
  * The maximum number of dots to show before converting to a count.
@@ -45,6 +45,11 @@ export function exponentialFalloff(percentage, power) {
 }
 
 export class AmpInlineGalleryPagination extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -73,11 +78,6 @@ export class AmpInlineGalleryPagination extends AMP.BaseElement {
     return layout == Layout.FIXED_HEIGHT;
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   buildCallback() {
     this.element.appendChild(this.createDom_());
@@ -254,8 +254,9 @@ export class AmpInlineGalleryPagination extends AMP.BaseElement {
    * @param {number} total
    * @param {number} index
    * @param {number} offset
+   * @param {!Array<!Element>} unusedSlides
    */
-  updateProgress(total, index, offset) {
+  updateProgress(total, index, offset, unusedSlides) {
     this.mutateElement(() => {
       this.updateTotal_(total);
       this.updateDots_(index, offset);
diff --git a/extensions/amp-inline-gallery/0.1/amp-inline-gallery-slide.css b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-slide.css
new file mode 100644
index 0000000000000..651074201c88e
--- /dev/null
+++ b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-slide.css
@@ -0,0 +1,86 @@
+/**
+ * Copyright 2021 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.
+ */
+
+amp-inline-gallery-slide {
+  /*
+   * We do not want the slide to be positioned, so the captions can position
+   * relative to the gallery itself.
+   */
+  position: static !important;
+  /*
+   * Do not transform the slide, but rather transform just the content.
+   */
+  transform: none !important;
+  will-change: auto !important;
+}
+
+amp-inline-gallery-slide.i-amphtml-layout-size-defined {
+  /*
+  * Since the content is translated, it may be outside the area of the
+  * slide itself.
+  */
+  overflow: visible !important;
+}
+
+.i-amphtml-inline-gallery-slide-container {
+  width: 100%;
+  height: 100%;
+  /* Override default from <figure> */
+  margin: 0;
+}
+
+.i-amphtml-inline-gallery-slide-content-slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Subtract out height for the caption */
+  height: calc(100% - calc(var(--i-amphtml-caption-height, 0px)));
+  transform: var(--content-transform, translateZ(1px));
+  will-change: transform;
+  overflow: hidden;
+}
+
+.i-amphtml-inline-gallery-slide-caption {
+  position: absolute;
+  left: 6px;
+  right: 6px;
+  margin-top: var(--caption-margin-top);
+  height: var(--i-amphtml-caption-height, 0);
+  overflow: hidden;
+  opacity: var(--caption-opacity);
+}
+
+.i-amphtml-inline-gallery-slide-see-more {
+  float: right;
+  padding: 0;
+  padding-left: 6px;
+  border: 0;
+  color: #48f;
+  background-color: transparent;
+  outline: none;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.25em;
+}
+
+.i-amphtml-inline-gallery-slide-persistent-slot {
+  clear: both;
+}
+
+.i-amphtml-inline-gallery-slide-content-slot > * {
+  height: 100%;
+  width: 100%;
+}
diff --git a/extensions/amp-inline-gallery/0.1/amp-inline-gallery-slide.js b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-slide.js
new file mode 100644
index 0000000000000..62ee78636cba2
--- /dev/null
+++ b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-slide.js
@@ -0,0 +1,121 @@
+/**
+ * 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.
+ */
+
+import {Layout} from '../../../src/layout';
+import {Services} from '../../../src/services';
+import {htmlFor} from '../../../src/static-template';
+import {isExperimentOn} from '../../../src/experiments';
+import {toArray} from '../../../src/core/types/array';
+import {userAssert} from '../../../src/log';
+
+export class AmpInlineGallerySlide extends AMP.BaseElement {
+  /**
+   * @return {!Element}
+   * @private
+   */
+  createDom_() {
+    userAssert(
+      isExperimentOn(this.win, 'amp-inline-gallery-captions') ||
+        'expected "amp-inline-gallery-captions" experiment to be enabled'
+    );
+    const html = htmlFor(this.element);
+    const content = html`
+      <figure class="i-amphtml-inline-gallery-slide-container">
+        <div class="i-amphtml-inline-gallery-slide-content-slot"></div>
+        <figcaption class="i-amphtml-inline-gallery-slide-caption">
+          <amp-truncate-text layout="fill">
+            <span class="i-amphtml-inline-gallery-slide-caption-slot"></span>
+            <button
+              class="i-amphtml-inline-gallery-slide-see-more"
+              slot="collapsed"
+            >
+              See more
+            </button>
+            <div
+              class="i-amphtml-inline-gallery-slide-persistent-slot"
+              slot="persistent"
+            ></div>
+          </amp-truncate-text>
+        </figcaption>
+      </figure>
+    `;
+    const expand = content.querySelector('[slot="collapsed"]');
+    expand.addEventListener('click', (e) => {
+      this.openLightbox();
+      e.stopPropagation();
+    });
+
+    return content;
+  }
+
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+  }
+
+  /**
+   *
+   */
+  openLightbox() {
+    Services.extensionsFor(this.win)
+      .installExtensionForDoc(this.getAmpDoc(), 'amp-lightbox-gallery')
+      .then(() => {
+        const el = document.querySelector('amp-lightbox-gallery');
+        return el.getImpl();
+      })
+      .then((impl) => {
+        impl.open(this.element, true);
+      });
+  }
+
+  /** @override */
+  isLayoutSupported() {
+    return Layout.FLEX_ITEM;
+  }
+
+  /** @override */
+  buildCallback() {
+    const dom = this.createDom_();
+    const captionSlot = dom.querySelector(
+      '.i-amphtml-inline-gallery-slide-caption-slot'
+    );
+    const contentSlot = dom.querySelector(
+      '.i-amphtml-inline-gallery-slide-content-slot'
+    );
+    const attributionSlot = dom.querySelector(
+      '.i-amphtml-inline-gallery-slide-persistent-slot'
+    );
+    const childNodesArray = toArray(this.element.childNodes);
+
+    childNodesArray
+      .filter((n) => {
+        return n.hasAttribute && n.getAttribute('slot') === 'caption';
+      })
+      .forEach((node) => captionSlot.appendChild(node));
+    childNodesArray
+      .filter((n) => {
+        return !n.hasAttribute || !n.hasAttribute('slot');
+      })
+      .forEach((node) => contentSlot.appendChild(node));
+    childNodesArray
+      .filter((n) => {
+        return n.hasAttribute && n.getAttribute('slot') === 'attribution';
+      })
+      .forEach((node) => attributionSlot.appendChild(node));
+
+    this.element.appendChild(dom);
+  }
+}
diff --git a/extensions/amp-inline-gallery/0.1/amp-inline-gallery-thumbnails.js b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-thumbnails.js
index 9b47417d687e6..2115ec6e93213 100644
--- a/extensions/amp-inline-gallery/0.1/amp-inline-gallery-thumbnails.js
+++ b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-thumbnails.js
@@ -17,7 +17,7 @@
 import {CarouselEvents} from '../../amp-base-carousel/0.1/carousel-events';
 import {InlineGalleryEvents} from './inline-gallery-events';
 import {createCustomEvent} from '../../../src/event-helper';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {htmlFor} from '../../../src/static-template';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {matches, scopedQuerySelector} from '../../../src/dom';
@@ -38,6 +38,11 @@ import {setStyle} from '../../../src/style';
  * the next arrow works properly for that case.
  */
 export class AmpInlineGalleryThumbnails extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -54,11 +59,6 @@ export class AmpInlineGalleryThumbnails extends AMP.BaseElement {
     return isLayoutSizeDefined(layout);
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   buildCallback() {
     const aspectRatioWidth =
diff --git a/extensions/amp-inline-gallery/0.1/amp-inline-gallery.js b/extensions/amp-inline-gallery/0.1/amp-inline-gallery.js
index c359e1718e586..c3b471dde9c8d 100644
--- a/extensions/amp-inline-gallery/0.1/amp-inline-gallery.js
+++ b/extensions/amp-inline-gallery/0.1/amp-inline-gallery.js
@@ -15,8 +15,12 @@
  */
 
 import {CSS as AmpInlineGalleryCSS} from '../../../build/amp-inline-gallery-0.1.css';
+import {AmpInlineGalleryCaptions} from './amp-inline-gallery-captions';
+import {CSS as AmpInlineGalleryCaptionsCSS} from '../../../build/amp-inline-gallery-captions-0.1.css';
 import {AmpInlineGalleryPagination} from './amp-inline-gallery-pagination';
 import {CSS as AmpInlineGalleryPaginationCSS} from '../../../build/amp-inline-gallery-pagination-0.1.css';
+import {AmpInlineGallerySlide} from './amp-inline-gallery-slide';
+import {CSS as AmpInlineGallerySlideCSS} from '../../../build/amp-inline-gallery-slide-0.1.css';
 import {AmpInlineGalleryThumbnails} from './amp-inline-gallery-thumbnails';
 import {CSS as AmpInlineGalleryThumbnailsCSS} from '../../../build/amp-inline-gallery-thumbnails-0.1.css';
 import {CarouselEvents} from '../../amp-base-carousel/0.1/carousel-events';
@@ -28,13 +32,14 @@ import {
   scopedQuerySelector,
   scopedQuerySelectorAll,
 } from '../../../src/dom';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
 
 /**
  * The selector of children to update the progress on as the gallery's carousel
  * changes position.
  */
-const CHILDREN_FOR_PROGRESS_SELECTOR = 'amp-inline-gallery-pagination';
+const CHILDREN_FOR_PROGRESS_SELECTOR =
+  'amp-inline-gallery-pagination, amp-inline-gallery-captions';
 
 /**
  * The selector for the element to contain the thumbnails.
@@ -48,6 +53,11 @@ const CAROUSEL_SELECTOR =
   '> amp-base-carousel, :not(amp-inline-gallery-thumbnails) > amp-base-carousel';
 
 class AmpInlineGallery extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -72,9 +82,9 @@ class AmpInlineGallery extends AMP.BaseElement {
     Promise.all([
       scopedQuerySelector(this.element, CAROUSEL_SELECTOR).getImpl(),
       Promise.all(
-        toArray(
-          scopedQuerySelectorAll(this.element, THUMBNAILS_SELECTORS)
-        ).map((el) => el.getImpl())
+        toArray(scopedQuerySelectorAll(this.element, THUMBNAILS_SELECTORS)).map(
+          (el) => el.getImpl()
+        )
       ),
     ]).then((data) => {
       const carouselImpl = data[0];
@@ -85,11 +95,6 @@ class AmpInlineGallery extends AMP.BaseElement {
     });
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   isLayoutSupported(layout) {
     return layout === Layout.CONTAINER;
@@ -99,14 +104,15 @@ class AmpInlineGallery extends AMP.BaseElement {
    * @param {number} total
    * @param {number} index
    * @param {number} offset
+   * @param {!Array<!Element>} slides
    * @private
    */
-  updateProgress_(total, index, offset) {
+  updateProgress_(total, index, offset, slides) {
     iterateCursor(
       scopedQuerySelectorAll(this.element, CHILDREN_FOR_PROGRESS_SELECTOR),
       (el) => {
         el.getImpl().then((pagination) => {
-          pagination.updateProgress(total, index, offset);
+          pagination.updateProgress(total, index, offset, slides);
         });
       }
     );
@@ -120,8 +126,9 @@ class AmpInlineGallery extends AMP.BaseElement {
     const detail = getDetail(event);
     const total = detail['total'];
     const index = detail['index'];
+    const slides = detail['slides'];
 
-    this.updateProgress_(total, index, 0);
+    this.updateProgress_(total, index, 0, slides);
   }
 
   /**
@@ -133,8 +140,9 @@ class AmpInlineGallery extends AMP.BaseElement {
     const total = detail['total'];
     const index = detail['index'];
     const offset = detail['offset'];
+    const slides = detail['slides'];
 
-    this.updateProgress_(total, index, offset);
+    this.updateProgress_(total, index, offset, slides);
   }
 
   /**
@@ -157,11 +165,21 @@ class AmpInlineGallery extends AMP.BaseElement {
 }
 
 AMP.extension('amp-inline-gallery', '0.1', (AMP) => {
+  AMP.registerElement(
+    'amp-inline-gallery-captions',
+    AmpInlineGalleryCaptions,
+    AmpInlineGalleryCaptionsCSS
+  );
   AMP.registerElement(
     'amp-inline-gallery-pagination',
     AmpInlineGalleryPagination,
     AmpInlineGalleryPaginationCSS
   );
+  AMP.registerElement(
+    'amp-inline-gallery-slide',
+    AmpInlineGallerySlide,
+    AmpInlineGallerySlideCSS
+  );
   AMP.registerElement(
     'amp-inline-gallery-thumbnails',
     AmpInlineGalleryThumbnails,
diff --git a/extensions/amp-inline-gallery/0.1/amp-inline-gallery.md b/extensions/amp-inline-gallery/0.1/amp-inline-gallery.md
new file mode 100644
index 0000000000000..5c911a728cc8c
--- /dev/null
+++ b/extensions/amp-inline-gallery/0.1/amp-inline-gallery.md
@@ -0,0 +1,269 @@
+---
+$category@: layout
+formats:
+  - websites
+teaser:
+  text: Displays multiple similar pieces of content along a horizontal axis, with optional pagination dots and thumbnails.
+---
+
+<!---
+Copyright 2020 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.
+-->
+
+# amp-inline-gallery
+
+## Usage
+
+The `<amp-inline-gallery>` component uses an `<amp-base-carousel>` to display slides. The page must have the required scripts for both components in the document head. Typical usage might look like:
+
+[example preview="inline" playground="true" imports="amp-inline-gallery,amp-base-carousel,amp-lightbox-gallery"]
+
+```html
+<amp-inline-gallery layout="container">
+  <amp-base-carousel
+    class="gallery"
+    layout="responsive"
+    width="3.6"
+    height="2"
+    snap-align="center"
+    loop="true"
+    visible-count="1.2"
+    lightbox
+  >
+    <amp-img
+      src="{{server_for_email}}/static/inline-examples/images/image1.jpg"
+      layout="responsive"
+      width="450"
+      height="300"
+    ></amp-img>
+    <amp-img
+      src="{{server_for_email}}/static/inline-examples/images/image2.jpg"
+      layout="responsive"
+      width="450"
+      height="300"
+    ></amp-img>
+    <amp-img
+      src="{{server_for_email}}/static/inline-examples/images/image3.jpg"
+      layout="responsive"
+      width="450"
+      height="300"
+    ></amp-img>
+  </amp-base-carousel>
+  <amp-inline-gallery-pagination layout="nodisplay" inset>
+  </amp-inline-gallery-pagination>
+</amp-inline-gallery>
+```
+
+[/example]
+
+The above example shows slides using an aspect ratio of 3:2, with 10% of a slide peeking on either side. An aspect ratio of 3.6:2 is used on the `amp-base-carousel` to show 1.2 slides at a time.
+
+### Include pagination indicators
+
+The `<amp-inline-gallery-pagination>` component determines how a pagination idicator should be displayed. By default, no pagination indicator is displayed.
+
+The pagination indicator renders as dots when there are eight or fewer slides in the `amp-base-carousel`. For nine or more slides, the pagination indicator renders the current slide number and total number of slides, aligned to the right.
+
+The pagination indicator location defaults to underneath the carousel. Adding the inset attribute to the `<amp-inline-gallery-pagination>` tag will overlay the pagination indicator on the carousel. To use different styles for different screen sizes, use the [media attribute](./../../../docs/spec/amp-html-responsive-attributes.md):
+
+```html
+<amp-inline-gallery layout="container">
+  <amp-base-carousel>…</amp-base-carousel>
+  <amp-inline-gallery-pagination
+    media="(max-width: 599px)"
+    layout="nodisplay"
+    inset
+  >
+  </amp-inline-gallery-pagination>
+  <amp-inline-gallery-pagination
+    media="(min-width: 600px)"
+    layout="fixed-height"
+    height="24"
+  >
+  </amp-inline-gallery-pagination>
+</amp-inline-gallery>
+```
+
+#### `amp-inline-gallery-pagination` attributes
+
+##### `inset` (optional)
+
+Displays the pagination indicator as inset, overlaying the carousel itself. When using `inset`, you should give the `<amp-inline-gallery-pagination>` element `layout="nodisplay"`.
+
+##### common attributes
+
+The `<amp-inline-gallery-pagination>` element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.
+
+### Include thumbnails
+
+The `amp-inline-gallery` component can display thumbnail preview in addition to, or instead of, the pagination indicators. By default, no thumbnails are shown in the gallery. Keep in mind the following best practices when using thumbnails:
+
+-   Avoid using both pagination indicators and thumbnails with less than eight slides. The indicator dots are redundant in smaller galleries.
+-   When using both pagination indicators and thumbnails, inset the pagination indicators to overlap the slides. View the code sample below to see an example.
+-   Use the `media` attribute to show pagination indicators on smaller mobile devices and thumbnails on larger screens.
+-   Load lower resolution images at thumbnails by using `srcset`. You can omit the `sizes` on `<amp-img>`, it will be automatically generated based on the rendered width.
+
+The example below demonstrates a gallery with thumbnails visible at larger resolutions.
+
+[example preview="inline" playground="true" imports="amp-inline-gallery,amp-base-carousel"]
+
+```html
+<amp-inline-gallery layout="container">
+  <!--
+    The amp-layout with layout="container" is used to display the pagination on
+    top of the carousel instead of the thumbnails. You can also use a div with
+    `position: relative;`
+  -->
+  <amp-layout layout="container">
+    <amp-base-carousel
+      class="gallery"
+      layout="responsive"
+      width="3"
+      height="2"
+      snap-align="center"
+      loop="true"
+    >
+      <amp-img
+        class="slide"
+        layout="flex-item"
+        src="https://picsum.photos/id/779/600/400"
+        srcset="https://picsum.photos/id/779/150/100 150w,
+                https://picsum.photos/id/779/600/400 600w,
+                https://picsum.photos/id/779/1200/800 1200w"
+      >
+      </amp-img>
+      <amp-img
+        class="slide"
+        layout="flex-item"
+        src="https://picsum.photos/id/1048/600/400"
+        srcset="https://picsum.photos/id/1048/150/100 150w,
+                https://picsum.photos/id/1048/600/400 600w,
+                https://picsum.photos/id/1048/1200/800 1200w"
+      >
+      </amp-img>
+      <amp-img
+        class="slide"
+        layout="flex-item"
+        src="https://picsum.photos/id/108/600/400"
+        srcset="https://picsum.photos/id/108/150/100 150w,
+                https://picsum.photos/id/108/600/400 600w,
+                https://picsum.photos/id/108/1200/800 1200w"
+      >
+      </amp-img>
+      <amp-img
+        class="slide"
+        layout="flex-item"
+        src="https://picsum.photos/id/130/600/400"
+        srcset="https://picsum.photos/id/130/150/100 150w,
+                https://picsum.photos/id/130/600/400 600w,
+                https://picsum.photos/id/130/1200/800 1200w"
+      >
+      </amp-img>
+      <amp-img
+        class="slide"
+        layout="flex-item"
+        src="https://picsum.photos/id/14/600/400"
+        srcset="https://picsum.photos/id/14/150/100 150w,
+                https://picsum.photos/id/14/600/400 600w,
+                https://picsum.photos/id/14/1200/800 1200w"
+      >
+      </amp-img>
+      <amp-img
+        class="slide"
+        layout="flex-item"
+        src="https://picsum.photos/id/165/600/400"
+        srcset="https://picsum.photos/id/165/150/100 150w,
+                https://picsum.photos/id/165/600/400 600w,
+                https://picsum.photos/id/165/1200/800 1200w"
+      >
+      </amp-img>
+      <amp-img
+        class="slide"
+        layout="flex-item"
+        src="https://picsum.photos/id/179/600/400"
+        srcset="https://picsum.photos/id/179/150/100 150w,
+                https://picsum.photos/id/179/600/400 600w,
+                https://picsum.photos/id/179/1200/800 1200w"
+      >
+      </amp-img>
+      <amp-img
+        class="slide"
+        layout="flex-item"
+        src="https://picsum.photos/id/392/600/400"
+        srcset="https://picsum.photos/id/392/150/100 150w,
+                https://picsum.photos/id/392/600/400 600w,
+                https://picsum.photos/id/392/1200/800 1200w"
+      >
+      </amp-img>
+      <amp-img
+        class="slide"
+        layout="flex-item"
+        src="https://picsum.photos/id/468/600/400"
+        srcset="https://picsum.photos/id/468/150/100 150w,
+                https://picsum.photos/id/468/600/400 600w,
+                https://picsum.photos/id/468/1200/800 1200w"
+      >
+      </amp-img>
+    </amp-base-carousel>
+    <!--
+        If using fewer than 8 slides, consider adding something
+        like media="(max-width: 799px)".
+      -->
+    <amp-inline-gallery-pagination layout="nodisplay" inset>
+    </amp-inline-gallery-pagination>
+  </amp-layout>
+  <amp-inline-gallery-thumbnails
+    media="(min-width: 800px)"
+    layout="fixed-height"
+    height="96"
+  >
+  </amp-inline-gallery-thumbnails>
+</amp-inline-gallery>
+```
+
+[/example]
+
+#### `amp-inline-gallery-thumbnails` attributes
+
+##### Media Queries
+
+The attributes for `<amp-inline-gallery-thumbnails>` can be configured to use different
+options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).
+
+##### `aspect-ratio-height` (optional)
+
+Specifies the aspect ratio when used with `aspect-ratio-width`. The aspect radio defaults to match the slides in `<amp-base-carousel>`.
+
+##### `aspect-ratio-width` (optional)
+
+Specifies the aspect ratio when used with `aspect-ratio-height`. The aspect radio defaults to match the slides in `<amp-base-carousel>`.
+
+##### `loop` (optional)
+
+Loops thumbnails. Takes a value of `"true"` or `"false"`. Defaults to `"true"`.
+
+##### common attributes
+
+The `<amp-inline-gallery-thumbnails>` element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.
+
+## Attributes
+
+### common attributes
+
+This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.
+
+## Validation
+
+See [amp-inline-gallery rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-inline-gallery/validator-amp-inline-gallery.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-inline-gallery/0.1/test/validator-amp-inline-gallery-pagination.out b/extensions/amp-inline-gallery/0.1/test/validator-amp-inline-gallery-pagination.out
index b7cfc343d36cc..386ec988e3342 100644
--- a/extensions/amp-inline-gallery/0.1/test/validator-amp-inline-gallery-pagination.out
+++ b/extensions/amp-inline-gallery/0.1/test/validator-amp-inline-gallery-pagination.out
@@ -32,13 +32,13 @@ FAIL
 |    <!-- Invalid: Not in a gallery -->
 |    <amp-inline-gallery-pagination layout="fixed-height" height="24">
 >>   ^~~~~~~~~
-amp-inline-gallery/0.1/test/validator-amp-inline-gallery-pagination.html:32:2 The tag 'amp-inline-gallery-pagination' may only appear as a descendant of tag 'amp-inline-gallery'. (see https://amp.dev/documentation/components/amp-inline-gallery)
+amp-inline-gallery/0.1/test/validator-amp-inline-gallery-pagination.html:32:2 The tag 'amp-inline-gallery-pagination' may only appear as a descendant of tag 'amp-inline-gallery'. (see https://amp.dev/documentation/components/amp-inline-gallery/)
 |    </amp-inline-gallery-pagination>
 |    <!-- Invalid: Inset without nodisplay -->
 |    <amp-inline-gallery layout="container">
 |      <amp-inline-gallery-pagination layout="fixed-height" height="24" inset>
 >>     ^~~~~~~~~
-amp-inline-gallery/0.1/test/validator-amp-inline-gallery-pagination.html:36:4 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-inline-gallery-pagination [inset]'. (see https://amp.dev/documentation/components/amp-inline-gallery)
+amp-inline-gallery/0.1/test/validator-amp-inline-gallery-pagination.html:36:4 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-inline-gallery-pagination'. (see https://amp.dev/documentation/components/amp-inline-gallery/)
 |      </amp-inline-gallery-pagination>
 |    </amp-inline-gallery>
 |    <!-- Valid: Inset with nodisplay -->
diff --git a/extensions/amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.out b/extensions/amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.out
index 0504085bdb1d2..083c96566df1f 100644
--- a/extensions/amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.out
+++ b/extensions/amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.out
@@ -32,41 +32,41 @@ FAIL
 |    <!-- Invalid: Not in a gallery -->
 |    <amp-inline-gallery-thumbnails layout="fixed-height" height="96">
 >>   ^~~~~~~~~
-amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.html:32:2 The tag 'amp-inline-gallery-thumbnails' may only appear as a descendant of tag 'amp-inline-gallery'. (see https://amp.dev/documentation/components/amp-inline-gallery)
+amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.html:32:2 The tag 'amp-inline-gallery-thumbnails' may only appear as a descendant of tag 'amp-inline-gallery'. (see https://amp.dev/documentation/components/amp-inline-gallery/)
 |    </amp-inline-gallery-thumbnails>
 |    <!-- Invalid: Aspect ratio height widthout width -->
 |    <amp-inline-gallery layout="container">
 |      <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio-height="2">
 >>     ^~~~~~~~~
-amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.html:36:4 The attribute 'aspect-ratio-width' in tag 'amp-inline-gallery-thumbnails' is missing or incorrect, but required by attribute 'aspect-ratio-height'. (see https://amp.dev/documentation/components/amp-inline-gallery)
+amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.html:36:4 The attribute 'aspect-ratio-width' in tag 'amp-inline-gallery-thumbnails' is missing or incorrect, but required by attribute 'aspect-ratio-height'. (see https://amp.dev/documentation/components/amp-inline-gallery/)
 |      </amp-inline-gallery-thumbnails>
 |    </amp-inline-gallery>
 |    <!-- Invalid: Non-number aspect ratio height-->
 |    <amp-inline-gallery layout="container">
 |      <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio-height="two" aspect-ratio-width="3">
 >>     ^~~~~~~~~
-amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.html:41:4 The attribute 'aspect-ratio-height' in tag 'amp-inline-gallery-thumbnails' is set to the invalid value 'two'. (see https://amp.dev/documentation/components/amp-inline-gallery)
+amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.html:41:4 The attribute 'aspect-ratio-height' in tag 'amp-inline-gallery-thumbnails' is set to the invalid value 'two'. (see https://amp.dev/documentation/components/amp-inline-gallery/)
 |      </amp-inline-gallery-thumbnails>
 |    </amp-inline-gallery>
 |    <!-- Invalid: Aspect ratio component of zero -->
 |    <amp-inline-gallery layout="container">
 |      <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio-height="0" aspect-ratio-width="3">
 >>     ^~~~~~~~~
-amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.html:46:4 The attribute 'aspect-ratio-height' in tag 'amp-inline-gallery-thumbnails' is set to the invalid value '0'. (see https://amp.dev/documentation/components/amp-inline-gallery)
+amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.html:46:4 The attribute 'aspect-ratio-height' in tag 'amp-inline-gallery-thumbnails' is set to the invalid value '0'. (see https://amp.dev/documentation/components/amp-inline-gallery/)
 |      </amp-inline-gallery-thumbnails>
 |    </amp-inline-gallery>
 |    <!-- Invalid: Aspect ratio component of zero (float) -->
 |    <amp-inline-gallery layout="container">
 |      <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio-height="0.00" aspect-ratio-width="3">
 >>     ^~~~~~~~~
-amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.html:51:4 The attribute 'aspect-ratio-height' in tag 'amp-inline-gallery-thumbnails' is set to the invalid value '0.00'. (see https://amp.dev/documentation/components/amp-inline-gallery)
+amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.html:51:4 The attribute 'aspect-ratio-height' in tag 'amp-inline-gallery-thumbnails' is set to the invalid value '0.00'. (see https://amp.dev/documentation/components/amp-inline-gallery/)
 |      </amp-inline-gallery-thumbnails>
 |    </amp-inline-gallery>
 |    <!-- Invalid: Loop attribute without value -->
 |    <amp-inline-gallery layout="container">
 |      <amp-inline-gallery-thumbnails layout="fixed-height" height="96" loop>
 >>     ^~~~~~~~~
-amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.html:56:4 The attribute 'loop' in tag 'amp-inline-gallery-thumbnails' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-inline-gallery)
+amp-inline-gallery/0.1/test/validator-amp-inline-gallery-thumbnails.html:56:4 The attribute 'loop' in tag 'amp-inline-gallery-thumbnails' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-inline-gallery/)
 |      </amp-inline-gallery-thumbnails>
 |    </amp-inline-gallery>
 |    <!-- Valid: Wrapped with a parent div -->
diff --git a/extensions/amp-inline-gallery/1.0/amp-inline-gallery-pagination.css b/extensions/amp-inline-gallery/1.0/amp-inline-gallery-pagination.css
new file mode 100644
index 0000000000000..27426ed03ad32
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/amp-inline-gallery-pagination.css
@@ -0,0 +1,23 @@
+/**
+ * Copyright 2020 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.
+ */
+
+amp-inline-gallery-pagination[inset] {
+  display: block !important;
+  height: 20px; /* Default height. */
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+}
diff --git a/extensions/amp-inline-gallery/1.0/amp-inline-gallery-pagination.js b/extensions/amp-inline-gallery/1.0/amp-inline-gallery-pagination.js
new file mode 100644
index 0000000000000..7bb1751789072
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/amp-inline-gallery-pagination.js
@@ -0,0 +1,60 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {CSS} from './pagination.jss';
+import {CarouselContextProp} from '../../amp-base-carousel/1.0/carousel-props';
+import {Pagination} from './pagination';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {isExperimentOn} from '../../../src/experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+export const TAG = 'amp-inline-gallery-pagination';
+
+/** @extends {PreactBaseElement<BaseCarouselDef.CarouselApi>} */
+export class AmpInlineGalleryPagination extends PreactBaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-inline-gallery'),
+      'expected global "bento" or specific "bento-inline-gallery" experiment to be enabled'
+    );
+    // Any layout is allowed for Bento, but "fixed-height" is the recommend
+    // layout for AMP.
+    return super.isLayoutSupported(layout);
+  }
+}
+
+/** @override */
+AmpInlineGalleryPagination['Component'] = Pagination;
+
+/** @override */
+AmpInlineGalleryPagination['props'] = {
+  'inset': {attr: 'inset', type: 'boolean', media: true},
+};
+
+/** @override */
+AmpInlineGalleryPagination['layoutSizeDefined'] = true;
+
+/** @override */
+AmpInlineGalleryPagination['shadowCss'] = CSS;
+
+/** @override */
+AmpInlineGalleryPagination['usesShadowDom'] = true;
+
+/** @override */
+AmpInlineGalleryPagination['useContexts'] = [CarouselContextProp];
diff --git a/extensions/amp-inline-gallery/1.0/amp-inline-gallery-thumbnails.js b/extensions/amp-inline-gallery/1.0/amp-inline-gallery-thumbnails.js
new file mode 100644
index 0000000000000..f185a86f7c0dd
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/amp-inline-gallery-thumbnails.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {CSS as CAROUSEL_CSS} from '../../amp-base-carousel/1.0/component.jss';
+import {CarouselContextProp} from '../../amp-base-carousel/1.0/carousel-props';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {CSS as THUMBNAIL_CSS} from './thumbnails.jss';
+import {Thumbnails} from './thumbnails';
+import {isExperimentOn} from '../../../src/experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+export const TAG = 'amp-inline-gallery-thumbnails';
+
+/** @extends {PreactBaseElement<BaseCarouselDef.CarouselApi>} */
+export class AmpInlineGalleryThumbnails extends PreactBaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-inline-gallery'),
+      'expected global "bento" or specific "bento-inline-gallery" experiment to be enabled'
+    );
+    // Any layout is allowed for Bento, but "fixed-height" is the recommend
+    // layout for AMP.
+    return super.isLayoutSupported(layout);
+  }
+}
+
+/** @override */
+AmpInlineGalleryThumbnails['Component'] = Thumbnails;
+
+/** @override */
+AmpInlineGalleryThumbnails['props'] = {
+  'aspectRatio': {attr: 'aspect-ratio', type: 'number', media: true},
+  'children': {passthroughNonEmpty: true},
+  'loop': {attr: 'loop', type: 'boolean', media: true},
+};
+
+/** @override */
+AmpInlineGalleryThumbnails['layoutSizeDefined'] = true;
+
+/** @override */
+AmpInlineGalleryThumbnails['usesShadowDom'] = true;
+
+/** @override */
+AmpInlineGalleryThumbnails['shadowCss'] = CAROUSEL_CSS + THUMBNAIL_CSS;
+
+/** @override */
+AmpInlineGalleryThumbnails['useContexts'] = [CarouselContextProp];
diff --git a/extensions/amp-inline-gallery/1.0/amp-inline-gallery.css b/extensions/amp-inline-gallery/1.0/amp-inline-gallery.css
new file mode 100644
index 0000000000000..0b053059182b2
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/amp-inline-gallery.css
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/* Pre-upgrade: display:block element */
+amp-inline-gallery,
+amp-inline-gallery-pagination,
+amp-inline-gallery-thumbnails {
+  display: block;
+}
+
+/* Pre-upgrade: contain:layout element */
+amp-inline-gallery {
+  contain: layout;
+}
+
+/* Pre-upgrade: size-defined element */
+amp-inline-gallery-pagination,
+amp-inline-gallery-thumbnails {
+  overflow: hidden;
+  position: relative;
+}
+
+/* Pre-upgrade: size-defining element - hide children. */
+amp-inline-gallery-pagination:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc),
+amp-inline-gallery-thumbnails:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc) {
+  display: none;
+  content-visibility: hidden;
+}
diff --git a/extensions/amp-inline-gallery/1.0/amp-inline-gallery.js b/extensions/amp-inline-gallery/1.0/amp-inline-gallery.js
new file mode 100644
index 0000000000000..2fa8f7b25bcd5
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/amp-inline-gallery.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  AmpInlineGalleryPagination,
+  TAG as PAGINATION_TAG,
+} from './amp-inline-gallery-pagination';
+import {
+  AmpInlineGalleryThumbnails,
+  TAG as THUMBNAILS_TAG,
+} from './amp-inline-gallery-thumbnails';
+import {BaseElement} from './base-element';
+import {Layout} from '../../../src/layout';
+import {CSS as PAGINATION_CSS} from '../../../build/amp-inline-gallery-pagination-1.0.css';
+import {isExperimentOn} from '../../../src/experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-inline-gallery';
+
+class AmpInlineGallery extends BaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-inline-gallery'),
+      'expected global "bento" or specific "bento-inline-gallery" experiment to be enabled'
+    );
+    return layout == Layout.CONTAINER;
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpInlineGallery);
+  AMP.registerElement(
+    PAGINATION_TAG,
+    AmpInlineGalleryPagination,
+    PAGINATION_CSS
+  );
+  AMP.registerElement(THUMBNAILS_TAG, AmpInlineGalleryThumbnails);
+});
diff --git a/extensions/amp-inline-gallery/1.0/base-element.js b/extensions/amp-inline-gallery/1.0/base-element.js
new file mode 100644
index 0000000000000..8832fca627dfb
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/base-element.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {CarouselContextProp} from '../../amp-base-carousel/1.0/carousel-props';
+import {InlineGallery} from './component';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {dict} from '../../../src/core/types/object';
+import {setProp} from '../../../src/context';
+import {useContext, useLayoutEffect} from '../../../src/preact';
+
+export class BaseElement extends PreactBaseElement {
+  /** @override */
+  init() {
+    return dict({
+      'children': <ContextExporter shimDomElement={this.element} />,
+    });
+  }
+}
+
+/** @override */
+BaseElement['Component'] = InlineGallery;
+
+/** @override */
+BaseElement['detached'] = true;
+
+/** @override */
+BaseElement['props'] = {
+  'loop': {attr: 'loop', type: 'boolean'},
+};
+
+/**
+ * @param {!SelectorDef.OptionProps} props
+ * @return {PreactDef.Renderable}
+ */
+function ContextExporter({shimDomElement}) {
+  // Consume the `CarouselContext` produced by the `InlineGallery` component
+  // and propagate it as a context prop.
+  const context = useContext(CarouselContextProp.type);
+  useLayoutEffect(() => {
+    setProp(shimDomElement, CarouselContextProp, ContextExporter, context);
+  }, [shimDomElement, context]);
+  return <></>;
+}
diff --git a/extensions/amp-inline-gallery/1.0/component.js b/extensions/amp-inline-gallery/1.0/component.js
new file mode 100644
index 0000000000000..dff1494b69ea9
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/component.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright 2020 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.
+ */
+import * as Preact from '../../../src/preact';
+import {CarouselContext} from '../../amp-base-carousel/1.0/carousel-context';
+import {ContainWrapper} from '../../../src/preact/component';
+import {useMemo, useState} from '../../../src/preact';
+
+/**
+ * @param {!InlineGalleryDef.Props} props
+ * @return {PreactDef.Renderable}
+ */
+export function InlineGallery({children, ...rest}) {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [slides, setSlides] = useState([]);
+  const carouselContext = useMemo(
+    () => ({
+      currentSlide,
+      setCurrentSlide,
+      slides,
+      setSlides,
+    }),
+    [currentSlide, slides]
+  );
+  return (
+    <ContainWrapper size={false} layout={true} {...rest}>
+      <CarouselContext.Provider value={carouselContext}>
+        {children}
+      </CarouselContext.Provider>
+    </ContainWrapper>
+  );
+}
diff --git a/extensions/amp-inline-gallery/1.0/component.type.js b/extensions/amp-inline-gallery/1.0/component.type.js
new file mode 100644
index 0000000000000..913452001770c
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/component.type.js
@@ -0,0 +1,60 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/** @const */
+var InlineGalleryDef = {};
+
+/**
+ * @typedef {{
+ *   arrowNext: (?PreactDef.VNode|undefined),
+ *   arrowPrev: (?PreactDef.VNode|undefined),
+ *   children: (!PreactDef.Renderable),
+ *   loop: (boolean|undefined),
+ *   onSlideChange: (function(number):undefined|undefined),
+ * }}
+ */
+InlineGalleryDef.Props;
+
+/**
+ * @typedef {{
+ *   current: number,
+ *   height: (number|undefined),
+ *   inset: (boolean|undefined),
+ *   goTo: (function(number):undefined),
+ *   children: !Array<PreactDef.Renderable>
+ * }}
+ */
+InlineGalleryDef.PaginationProps;
+
+/**
+ * Note that aspectRatio is expressed in terms of width/height.
+ * @typedef {{
+ *   aspectRatio: number,
+ *   loop: (boolean|undefined),
+ *   children: !Array<PreactDef.Renderable>
+ * }}
+ */
+InlineGalleryDef.ThumbnailProps;
+
+/**
+ * @typedef {{
+ *   children: !Array<PreactDef.Renderable>,
+ *   style: (!Object|undefined),
+ * }}
+ */
+InlineGalleryDef.SlideProps;
diff --git a/extensions/amp-inline-gallery/1.0/package.json b/extensions/amp-inline-gallery/1.0/package.json
new file mode 100644
index 0000000000000..7f104f1dbd312
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-inline-gallery",
+  "version": "VERSION",
+  "description": "AMP Inline Gallery Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "./dist/component.js",
+  "module": "./dist/component-preact.module.js",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "./dist/component-preact.module.js",
+      "require": "./dist/component-preact.js"
+    },
+    "./react": {
+      "import": "./dist/component-react.module.js",
+      "require": "./dist/component-react.js"
+    }
+  },
+  "files": ["dist/*", "react.js"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml.git",
+    "directory": "extensions/amp-inline-gallery/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-inline-gallery/1.0",
+  "peerDependencies": {
+    "preact": "^10.2.1",
+    "react": "^17.0.0"
+  }
+}
diff --git a/extensions/amp-inline-gallery/1.0/pagination.js b/extensions/amp-inline-gallery/1.0/pagination.js
new file mode 100644
index 0000000000000..e756bd906b42d
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/pagination.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {CarouselContext} from '../../amp-base-carousel/1.0/carousel-context';
+import {Wrapper} from '../../../src/preact/component';
+import {useContext} from '../../../src/preact';
+import {useStyles} from './pagination.jss';
+
+/**
+ * @param {!InlineGalleryDef.PaginationProps} props
+ * @return {PreactDef.Renderable}
+ */
+export function Pagination({inset, ...rest}) {
+  const classes = useStyles();
+  const {currentSlide, setCurrentSlide, slides} = useContext(CarouselContext);
+  const slideCount = slides ? slides.length : 0;
+  const Comp = slideCount <= 8 ? Dots : Numbers;
+  return (
+    <Wrapper
+      aria-hidden="true"
+      wrapperClassName={`${classes.container} ${inset ? classes.inset : ''}`}
+      {...rest}
+    >
+      <div
+        class={`${Comp == Dots ? classes.dots : classes.numbers} ${
+          inset ? classes.inset : ''
+        }`}
+      >
+        {inset && (
+          <>
+            <div
+              class={`${classes.insetBaseStyle} ${classes.insetFrosting}`}
+            ></div>
+            <div
+              class={`${classes.insetBaseStyle} ${classes.insetBackdrop}`}
+            ></div>
+            <div
+              class={`${classes.insetBaseStyle} ${classes.insetBackground}`}
+            ></div>
+          </>
+        )}
+        <Comp
+          currentSlide={currentSlide}
+          inset={inset}
+          goTo={(i) => setCurrentSlide(i)}
+          slideCount={slideCount}
+        />
+      </div>
+    </Wrapper>
+  );
+}
+
+/**
+ * @param {!InlineGalleryDef.PaginationProps} props
+ * @return {PreactDef.Renderable}
+ */
+function Dots({currentSlide, goTo, inset, slideCount}) {
+  const classes = useStyles();
+  const dotList = [];
+  for (let i = 0; i < slideCount; i++) {
+    dotList.push(
+      <div
+        key={i}
+        class={`${classes.dotWrapper} ${inset ? classes.inset : ''}`}
+      >
+        <div class={`${classes.dot} ${inset ? classes.inset : ''}`}>
+          <div
+            role="button"
+            aria-selected={String(i === currentSlide)}
+            onClick={() => goTo(i)}
+            class={`${classes.dotProgress} ${inset ? classes.inset : ''}`}
+            style={{opacity: i === currentSlide ? 1 : 0}}
+          ></div>
+        </div>
+      </div>
+    );
+  }
+  return <>{dotList}</>;
+}
+
+/**
+ * @param {!InlineGalleryDef.PaginationProps} props
+ * @return {PreactDef.Renderable}
+ */
+function Numbers({currentSlide, inset, slideCount}) {
+  const classes = useStyles();
+  return (
+    <div class={`${classes.numbersWrapper} ${inset ? classes.inset : ''}`}>
+      <span>{currentSlide + 1}</span>
+      <span> / </span>
+      <span>{slideCount}</span>
+    </div>
+  );
+}
diff --git a/extensions/amp-inline-gallery/1.0/pagination.jss.js b/extensions/amp-inline-gallery/1.0/pagination.jss.js
new file mode 100644
index 0000000000000..e5067f86a083a
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/pagination.jss.js
@@ -0,0 +1,154 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+const inset = {};
+
+const container = {
+  fontSize: '12px',
+  /*
+   * TODO(https://github.com/ampproject/amphtml/issues/25888)
+   * Use a better, common set of fonts for sans-serif.
+   */
+  fontFamily: 'sans-serif',
+  lineHeight: 1,
+  height: '20px', // Default height. Can be overriden by user style.
+  display: 'flex',
+  flexDirection: 'column',
+  '&$inset': {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: 'flex',
+    margin: '18px 0',
+    zIndex: 1,
+  },
+};
+
+const dots = {
+  position: 'relative',
+  alignSelf: 'center',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  maxWidth: '60%',
+  '&$inset': {
+    padding: '0 4px',
+    zIndex: 0,
+  },
+};
+
+/**
+ * Used to allow the spacing of the dots to become more compact as more dots
+ * are added.
+ */
+const dotWrapper = {
+  position: 'relative',
+  display: 'flex',
+  width: '16px',
+  minWidth: '14px',
+  justifyContent: 'center',
+  '&$inset': {
+    zIndex: 1,
+  },
+};
+
+const dot = {
+  width: '8px',
+  height: '8px',
+  borderRadius: '50%',
+  position: 'relative',
+  backgroundColor: 'rgba(0, 0, 0, 0.2)',
+  '&$inset': {
+    backgroundColor: 'rgba(255, 255, 255, 0.35)',
+  },
+};
+
+const dotProgress = {
+  width: '8px',
+  height: '8px',
+  borderRadius: '50%',
+  position: 'absolute',
+  top: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  '&$inset': {
+    backgroundColor: '#fff',
+  },
+};
+
+const numbers = {
+  position: 'relative',
+  alignSelf: 'flex-end',
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
+  padding: '0 8px',
+  color: 'currentColor',
+  '&$inset': {
+    color: '#fff',
+    zIndex: 0,
+  },
+};
+
+const numbersWrapper = {
+  '&$inset': {
+    zIndex: 1,
+  },
+};
+
+const insetBaseStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  borderRadius: '12px',
+};
+
+const insetBackground = {
+  backgroundColor: 'rgba(0, 0, 0, 0.3)',
+};
+
+const insetFrosting = {
+  backdropFilter: 'blur(3px)',
+};
+
+const insetBackdrop = {
+  backdropFilter: 'blur(12px) invert(1) grayscale(0.6) brightness(0.8)',
+  opacity: 0.5,
+};
+
+const JSS = {
+  inset,
+  container,
+  dots,
+  dotWrapper,
+  dot,
+  dotProgress,
+  numbers,
+  numbersWrapper,
+  insetBaseStyle,
+  insetBackground,
+  insetFrosting,
+  insetBackdrop,
+};
+
+// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
+// eslint-disable-next-line local/no-export-side-effect
+export const useStyles = createUseStyles(JSS);
diff --git a/extensions/amp-inline-gallery/1.0/react.js b/extensions/amp-inline-gallery/1.0/react.js
new file mode 100644
index 0000000000000..0b2957c35c38d
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/react.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-env node */
+// eslint-disable-next-line local/no-module-exports
+module.exports = require('./dist/component-react');
diff --git a/extensions/amp-inline-gallery/1.0/storybook/Basic.amp.js b/extensions/amp-inline-gallery/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..2787503f0ddc6
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/storybook/Basic.amp.js
@@ -0,0 +1,117 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, select, text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-inline-gallery-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [
+      {name: 'amp-inline-gallery', version: '1.0'},
+      {name: 'amp-base-carousel', version: '1.0'},
+    ],
+
+    experiments: ['bento'],
+  },
+};
+
+export const Default = () => {
+  const topInset = boolean('top indicator inset?', false);
+  const bottomInset = boolean('bottom indicator inset?', true);
+  const autoAdvance = boolean('auto advance', false);
+  const autoAdvanceCount = text('auto advance count', 1);
+  const autoAdvanceInterval = text('auto advance interval', 1000);
+  const autoAdvanceLoops = text('auto advance loops', 3);
+  const loop = boolean('loop thumbnails', false);
+  const aspectRatio = text('thumbnails aspect ratio', undefined);
+  const orientation = select(
+    'orientation',
+    ['horizontal', 'vertical'],
+    'vertical'
+  );
+  return (
+    <amp-inline-gallery style={{maxWidth: '360px'}} layout="container">
+      <amp-inline-gallery-pagination
+        layout={topInset ? 'nodisplay' : 'fixed-height'}
+        height={topInset ? undefined : '24'}
+        inset={topInset}
+      />
+      <amp-inline-gallery-thumbnails
+        aspectRatio={aspectRatio}
+        loop={loop}
+        layout="fixed-height"
+        height="50"
+      />
+      <amp-base-carousel
+        auto-advance={autoAdvance}
+        auto-advance-count={autoAdvanceCount}
+        auto-advance-interval={autoAdvanceInterval}
+        auto-advance-loops={autoAdvanceLoops}
+        orientation={orientation}
+        width="360"
+        height="240"
+      >
+        <amp-img
+          width="360"
+          height="240"
+          src="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1498&q=80"
+          data-thumbnail-src="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=120&q=80"
+        ></amp-img>
+        <amp-img
+          width="360"
+          height="240"
+          src="https://images.unsplash.com/photo-1583511666407-5f06533f2113?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80"
+          data-thumbnail-src="https://images.unsplash.com/photo-1583511666407-5f06533f2113?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80"
+        ></amp-img>
+        <amp-img
+          width="360"
+          height="240"
+          src="https://images.unsplash.com/photo-1599839575945-a9e5af0c3fa5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjQwMzA0fQ&auto=format&fit=crop&w=1498&q=80"
+          data-thumbnail-src="https://images.unsplash.com/photo-1599839575945-a9e5af0c3fa5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjQwMzA0fQ&auto=format&fit=crop&w=1498&q=80"
+        ></amp-img>
+        <amp-img
+          width="360"
+          height="240"
+          src="https://images.unsplash.com/photo-1583512603806-077998240c7a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80"
+          data-thumbnail-src="https://images.unsplash.com/photo-1583512603806-077998240c7a?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80"
+        ></amp-img>
+        <amp-img
+          width="360"
+          height="240"
+          src="https://images.unsplash.com/photo-1598133893773-de3574464ef0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80"
+          data-thumbnail-src="https://images.unsplash.com/photo-1598133893773-de3574464ef0?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80"
+        ></amp-img>
+        <amp-img
+          width="360"
+          height="240"
+          src="https://images.unsplash.com/photo-1603123853880-a92fafb7809f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80"
+          data-thumbnail-src="https://images.unsplash.com/photo-1603123853880-a92fafb7809f?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80"
+        ></amp-img>
+      </amp-base-carousel>
+      <amp-inline-gallery-pagination
+        layout={bottomInset ? 'nodisplay' : 'fixed-height'}
+        height={bottomInset ? undefined : '24'}
+        inset={bottomInset}
+      />
+    </amp-inline-gallery>
+  );
+};
+
+Default.storyName = 'default';
diff --git a/extensions/amp-inline-gallery/1.0/storybook/Basic.js b/extensions/amp-inline-gallery/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..b8356388ce27b
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/storybook/Basic.js
@@ -0,0 +1,149 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {BaseCarousel} from '../../../amp-base-carousel/1.0/component';
+import {InlineGallery} from '../component';
+import {Pagination} from '../pagination';
+import {Thumbnails} from '../thumbnails';
+import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'InlineGallery',
+  component: InlineGallery,
+  decorators: [withKnobs],
+};
+
+export const _default = () => {
+  const width = 360;
+  const height = 240;
+  const paginationHeight = number('top indicator height', 20);
+  const topInset = boolean('top indicator inset?', false);
+  const bottomInset = boolean('bottom indicator inset?', false);
+  const autoAdvance = boolean('auto advance', false);
+  const autoAdvanceCount = number('auto advance count', 1);
+  const autoAdvanceInterval = number('auto advance interval', 1000);
+  const autoAdvanceLoops = number('auto advance loops', 3);
+  const thumbnailHeight = number('thumbnail height', 50);
+  const loop = boolean('thumbnail loop', false);
+  const aspectRatio = number('thumbnail aspect ratio (w/h)', 3 / 2);
+  const orientation = select(
+    'orientation',
+    ['horizontal', 'vertical'],
+    'vertical'
+  );
+
+  return (
+    <>
+      <InlineGallery style={{width}}>
+        <Pagination style={{height: paginationHeight}} inset={topInset} />
+        <Thumbnails
+          aspectRatio={aspectRatio}
+          loop={loop}
+          style={{height: thumbnailHeight}}
+        />
+        <br />
+        <Thumbnails />
+        <br />
+        <BaseCarousel
+          style={{height}}
+          autoAdvanceCount={autoAdvanceCount}
+          autoAdvanceInterval={autoAdvanceInterval}
+          autoAdvanceLoops={autoAdvanceLoops}
+          autoAdvance={autoAdvance}
+          orientation={orientation}
+        >
+          <img
+            src="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1498&q=80"
+            thumbnailSrc="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=120&q=80"
+          />
+          <img
+            src="https://images.unsplash.com/photo-1583511666407-5f06533f2113?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80"
+            thumbnailSrc="https://images.unsplash.com/photo-1583511666407-5f06533f2113?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80"
+          />
+          <img
+            src="https://images.unsplash.com/photo-1599839575945-a9e5af0c3fa5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjQwMzA0fQ&auto=format&fit=crop&w=1498&q=80"
+            thumbnailSrc="https://images.unsplash.com/photo-1599839575945-a9e5af0c3fa5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjQwMzA0fQ&auto=format&fit=crop&w=1498&q=80"
+          />
+          <img
+            src="https://images.unsplash.com/photo-1583512603806-077998240c7a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80"
+            thumbnailSrc="https://images.unsplash.com/photo-1583512603806-077998240c7a?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80"
+          />
+          <img
+            src="https://images.unsplash.com/photo-1598133893773-de3574464ef0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80"
+            thumbnailSrc="https://images.unsplash.com/photo-1598133893773-de3574464ef0?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80"
+          />
+          <img
+            src="https://images.unsplash.com/photo-1603123853880-a92fafb7809f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80"
+            thumbnailSrc="https://images.unsplash.com/photo-1603123853880-a92fafb7809f?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80"
+          />
+        </BaseCarousel>
+        <Pagination inset={bottomInset} />
+      </InlineGallery>
+      Content below carousel
+    </>
+  );
+};
+
+export const WithLooping = () => {
+  const width = number('width', 440);
+  const height = number('height', 225);
+  const paginationHeight = number('indicator height', 20);
+  const inset = boolean('inset?', false);
+  const thumbnailHeight = number('thumbnail height', 50);
+  const loop = boolean('thumbnail loop', true);
+  const aspectRatio = number('thumbnail aspect ratio', 2);
+  const slides = [
+    'lightpink',
+    'lightcoral',
+    'peachpuff',
+    'powderblue',
+    'lavender',
+    'thistle',
+  ].map((color, index) => (
+    <div
+      style={{
+        backgroundColor: color,
+        width,
+        height,
+        textAlign: 'center',
+        fontSize: '48pt',
+        lineHeight: height + 'px',
+      }}
+    >
+      {index + 1}
+    </div>
+  ));
+
+  return (
+    <InlineGallery style={{width, position: 'relative'}}>
+      <BaseCarousel loop style={{height, position: 'relative'}}>
+        {slides}
+      </BaseCarousel>
+      <Pagination inset={inset} style={{height: paginationHeight}} />
+      <Thumbnails
+        aspectRatio={aspectRatio}
+        loop={loop}
+        style={{height: thumbnailHeight}}
+      >
+        <div>a</div>
+        <div>b</div>
+        <div>c</div>
+        <div>d</div>
+      </Thumbnails>
+    </InlineGallery>
+  );
+};
diff --git a/extensions/amp-inline-gallery/1.0/test/test-amp-inline-gallery.js b/extensions/amp-inline-gallery/1.0/test/test-amp-inline-gallery.js
new file mode 100644
index 0000000000000..3f8be9fc6663a
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/test/test-amp-inline-gallery.js
@@ -0,0 +1,191 @@
+/**
+ * Copyright 2020 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.
+ */
+import '../../../amp-base-carousel/1.0/amp-base-carousel';
+import '../amp-inline-gallery';
+import {ActionInvocation} from '../../../../src/service/action-impl';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
+import {CarouselContextProp} from '../../../amp-base-carousel/1.0/carousel-props';
+import {createElementWithAttributes} from '../../../../src/dom';
+import {setStyles} from '../../../../src/style';
+import {subscribe} from '../../../../src/context';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-inline-gallery',
+  {
+    amp: {
+      extensions: ['amp-inline-gallery:1.0', 'amp-base-carousel:1.0'],
+    },
+  },
+  (env) => {
+    let win;
+    let element, carousel, pagination;
+    let lastContext;
+
+    beforeEach(async () => {
+      win = env.win;
+      toggleExperiment(win, 'bento-inline-gallery', true, true);
+      toggleExperiment(win, 'bento-carousel', true, true);
+      carousel = createElementWithAttributes(
+        win.document,
+        'amp-base-carousel',
+        {
+          'layout': 'fixed',
+          'width': '300px',
+          'height': '200px',
+        }
+      );
+      pagination = createElementWithAttributes(
+        win.document,
+        'amp-inline-gallery-pagination',
+        {
+          'layout': 'fixed-height',
+          'height': 24,
+        }
+      );
+      element = createElementWithAttributes(
+        win.document,
+        'amp-inline-gallery',
+        {
+          'layout': 'container',
+        }
+      );
+      element.appendChild(carousel);
+      element.appendChild(pagination);
+
+      // Add slides.
+      for (let i = 0; i < 3; i++) {
+        carousel.appendChild(newSlide(`${i}`));
+      }
+
+      // Wait until ready.
+      win.document.body.appendChild(element);
+      await element.buildInternal();
+      await carousel.buildInternal();
+      await pagination.buildInternal();
+
+      lastContext = null;
+      subscribe(element, [CarouselContextProp], (context) => {
+        lastContext = context;
+      });
+      await waitFor(
+        () =>
+          lastContext && lastContext.slides && lastContext.slides.length > 0,
+        'context and slide set'
+      );
+      await waitFor(() => getScroller(), 'carousel rendered');
+      await waitFor(() => getDots().length > 0, 'pagination rendered');
+    });
+
+    afterEach(() => {
+      toggleExperiment(win, 'bento-inline-gallery', false, true);
+      toggleExperiment(win, 'bento-carousel', false, true);
+    });
+
+    function newSlide(id) {
+      const slide = document.createElement('div');
+      slide.className = 'test-slide';
+      setStyles(slide, {
+        flexShrink: '0',
+        height: '100px',
+        width: '100%',
+      });
+      slide.textContent = 'slide ' + id;
+      return slide;
+    }
+
+    function getDots() {
+      const dots =
+        pagination.shadowRoot &&
+        pagination.shadowRoot.querySelectorAll('[role=button],button');
+      return dots;
+    }
+
+    function getScroller() {
+      const {shadowRoot} = carousel;
+      return (
+        shadowRoot && shadowRoot.querySelector('[class*=scroll-container]')
+      );
+    }
+
+    function invocation(method, args = {}) {
+      const source = null;
+      const caller = null;
+      const event = null;
+      const trust = ActionTrust.DEFAULT;
+      return new ActionInvocation(
+        element,
+        method,
+        args,
+        source,
+        caller,
+        event,
+        trust
+      );
+    }
+
+    it('should render the right number of slides', () => {
+      expect(lastContext.slides.length).to.equal(3);
+      const dots = getDots();
+      expect(dots).to.have.lengthOf(3);
+    });
+
+    it('should navigate carousel using pagination', async () => {
+      const dots = getDots();
+      dots[1].click();
+
+      // Context updated.
+      await waitFor(() => lastContext.currentSlide == 1, 'currentSlide == 1');
+
+      // Carousel updated.
+      const scroller = getScroller();
+      await waitFor(() => scroller.scrollLeft > 0, 'advanced to next slide');
+    });
+
+    it('should navigate pagination using carousel', async () => {
+      const scroller = getScroller();
+      const dots = getDots();
+      expect(lastContext.currentSlide).to.equal(0);
+      expect(scroller.scrollLeft).to.equal(0);
+      expect(dots[0].getAttribute('aria-selected')).to.equal('true');
+      expect(dots[1].getAttribute('aria-selected')).to.equal('false');
+
+      // Scroll carousel.
+      carousel.enqueAction(invocation('goToSlide', {index: 1}));
+      await waitFor(() => scroller.scrollLeft > 0, 'to to slide 1');
+
+      // Context updated.
+      await waitFor(() => lastContext.currentSlide == 1, 'currentSlide == 1');
+
+      // Pagination updated.
+      await waitFor(
+        () => dots[1].getAttribute('aria-selected') == 'true',
+        'pagination updated'
+      );
+    });
+
+    it('should add a new slide', async () => {
+      carousel.appendChild(newSlide('new'));
+
+      // Context updated.
+      await waitFor(() => lastContext.slides.length == 4, 'slide.length == 4');
+
+      // Pagination updated.
+      await waitFor(() => getDots().length == 4, 'pagination updated');
+    });
+  }
+);
diff --git a/extensions/amp-inline-gallery/1.0/test/test-component.js b/extensions/amp-inline-gallery/1.0/test/test-component.js
new file mode 100644
index 0000000000000..c13cd72ed0ea0
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/test/test-component.js
@@ -0,0 +1,152 @@
+/**
+ * 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {BaseCarousel} from '../../../amp-base-carousel/1.0/component';
+import {InlineGallery} from '../component';
+import {Pagination} from '../pagination';
+import {Thumbnails} from '../thumbnails';
+import {mount} from 'enzyme';
+
+describes.sandboxed('InlineGallery preact component', {}, () => {
+  describe('Pagination component', () => {
+    it('should render BaseCarousel and Pagination', () => {
+      const jsx = (
+        <InlineGallery>
+          <BaseCarousel>
+            <div>slide 1</div>
+            <div>slide 2</div>
+            <div>slide 3</div>
+          </BaseCarousel>
+          <Pagination />
+        </InlineGallery>
+      );
+      const wrapper = mount(jsx);
+      const carousel = wrapper.find('BaseCarousel');
+      expect(carousel).to.have.lengthOf(1);
+      const slides = carousel.find('[data-slide]');
+      expect(slides).to.have.lengthOf(3);
+
+      const pagination = wrapper.find('Pagination');
+      expect(pagination).to.have.lengthOf(1);
+    });
+  });
+
+  describe('Thumbnail component', () => {
+    it('should render BaseCarousel and Thumbnails', () => {
+      const jsx = (
+        <InlineGallery>
+          <BaseCarousel>
+            <div>slide 1</div>
+            <div>slide 2</div>
+            <div>slide 3</div>
+          </BaseCarousel>
+          <Thumbnails />
+        </InlineGallery>
+      );
+      const wrapper = mount(jsx);
+
+      const carousels = wrapper.find('BaseCarousel');
+      expect(carousels).to.have.lengthOf(2);
+      const slides = carousels.first().find('[data-slide]');
+      expect(slides).to.have.lengthOf(3);
+
+      const thumbnails = wrapper.find('Thumbnails');
+      expect(thumbnails).to.have.lengthOf(1);
+      const generatedCarousel = thumbnails.find('BaseCarousel');
+      expect(generatedCarousel).to.have.lengthOf(1);
+      expect(generatedCarousel.prop('loop')).to.be.false;
+      expect(generatedCarousel.prop('snapAlign')).to.equal('start');
+      expect(generatedCarousel.prop('outsetArrows')).to.be.true;
+
+      const generatedSlides = generatedCarousel.find('[data-slide]');
+      expect(generatedSlides).to.have.lengthOf(3);
+
+      // By default there is no `src`
+      expect(generatedSlides.at(0).find('img').prop('src')).to.be.undefined;
+      expect(generatedSlides.at(1).find('img').prop('src')).to.be.undefined;
+      expect(generatedSlides.at(2).find('img').prop('src')).to.be.undefined;
+    });
+
+    it('should respect thumbnailSrc', () => {
+      const jsx = (
+        <InlineGallery>
+          <BaseCarousel>
+            <div thumbnailSrc="slide1.jpg">slide 1</div>
+            <div thumbnailSrc="slide2.jpg">slide 2</div>
+            <div thumbnailSrc="slide3.jpg">slide 3</div>
+          </BaseCarousel>
+          <Thumbnails />
+        </InlineGallery>
+      );
+      const wrapper = mount(jsx);
+
+      const carousels = wrapper.find('BaseCarousel');
+      expect(carousels).to.have.lengthOf(2);
+      const slides = carousels.first().find('[data-slide]');
+      expect(slides).to.have.lengthOf(3);
+
+      const thumbnails = wrapper.find('Thumbnails');
+      expect(thumbnails).to.have.lengthOf(1);
+      const generatedCarousel = thumbnails.find('BaseCarousel');
+      expect(generatedCarousel).to.have.lengthOf(1);
+      expect(generatedCarousel.prop('loop')).to.be.false;
+      expect(generatedCarousel.prop('snapAlign')).to.equal('start');
+      expect(generatedCarousel.prop('outsetArrows')).to.be.true;
+
+      const generatedSlides = generatedCarousel.find('[data-slide]');
+      expect(generatedSlides).to.have.lengthOf(3);
+
+      // Take from `thumbnailSrc` prop.
+      expect(generatedSlides.at(0).find('img').prop('src')).to.equal(
+        'slide1.jpg'
+      );
+      expect(generatedSlides.at(1).find('img').prop('src')).to.equal(
+        'slide2.jpg'
+      );
+      expect(generatedSlides.at(2).find('img').prop('src')).to.equal(
+        'slide3.jpg'
+      );
+    });
+
+    it('should respect looping with slide alignment', () => {
+      const jsx = (
+        <InlineGallery>
+          <BaseCarousel>
+            <div>slide 1</div>
+            <div>slide 2</div>
+            <div>slide 3</div>
+          </BaseCarousel>
+          <Thumbnails loop />
+        </InlineGallery>
+      );
+      const wrapper = mount(jsx);
+
+      const carousels = wrapper.find('BaseCarousel');
+      expect(carousels).to.have.lengthOf(2);
+      const slides = carousels.first().find('[data-slide]');
+      expect(slides).to.have.lengthOf(3);
+
+      const thumbnails = wrapper.find('Thumbnails');
+      expect(thumbnails).to.have.lengthOf(1);
+      const generatedCarousel = thumbnails.find('BaseCarousel');
+      expect(generatedCarousel).to.have.lengthOf(1);
+      expect(generatedCarousel.prop('loop')).to.be.true;
+      expect(generatedCarousel.prop('snapAlign')).to.equal('center');
+      expect(generatedCarousel.prop('outsetArrows')).to.be.true;
+    });
+  });
+});
diff --git a/extensions/amp-inline-gallery/1.0/test/validator-amp-inline-gallery-pagination.html b/extensions/amp-inline-gallery/1.0/test/validator-amp-inline-gallery-pagination.html
new file mode 100644
index 0000000000000..7b0d166cd6b71
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/test/validator-amp-inline-gallery-pagination.html
@@ -0,0 +1,57 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-inline-gallery-pagination tag. See the inline comments.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-inline-gallery" src="https://cdn.ampproject.org/v0/amp-inline-gallery-1.0.js"></script>
+</head>
+<body>
+  <!-- Valid: Inset with nodisplay -->
+  <amp-inline-gallery layout="container">
+    <amp-inline-gallery-pagination layout="nodisplay" inset>
+    </amp-inline-gallery-pagination>
+  </amp-inline-gallery>
+  <!-- Valid: Wrapped with a parent div -->
+  <amp-inline-gallery layout="container">
+    <div>
+      <amp-inline-gallery-pagination layout="nodisplay"inset>
+      </amp-inline-gallery-pagination>
+    </div>
+  </amp-inline-gallery>
+  <!-- Valid: Non-inset with fixed-height -->
+  <amp-inline-gallery layout="container">
+    <amp-inline-gallery-pagination layout="fixed-height" height="24">
+    </amp-inline-gallery-pagination>
+  </amp-inline-gallery>
+  <!-- Invalid: Not in a gallery -->
+  <amp-inline-gallery-pagination layout="fixed-height" height="24">
+  </amp-inline-gallery-pagination>
+  <!-- Invalid: Inset without nodisplay -->
+  <amp-inline-gallery layout="container">
+    <amp-inline-gallery-pagination layout="fixed-height" height="24" inset>
+    </amp-inline-gallery-pagination>
+  </amp-inline-gallery>
+</body>
+</html>
diff --git a/extensions/amp-inline-gallery/1.0/test/validator-amp-inline-gallery-pagination.out b/extensions/amp-inline-gallery/1.0/test/validator-amp-inline-gallery-pagination.out
new file mode 100644
index 0000000000000..bb7551a16b4c0
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/test/validator-amp-inline-gallery-pagination.out
@@ -0,0 +1,62 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-inline-gallery-pagination tag. See the inline comments.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-inline-gallery" src="https://cdn.ampproject.org/v0/amp-inline-gallery-1.0.js"></script>
+|  </head>
+|  <body>
+|    <!-- Valid: Inset with nodisplay -->
+|    <amp-inline-gallery layout="container">
+|      <amp-inline-gallery-pagination layout="nodisplay" inset>
+|      </amp-inline-gallery-pagination>
+|    </amp-inline-gallery>
+|    <!-- Valid: Wrapped with a parent div -->
+|    <amp-inline-gallery layout="container">
+|      <div>
+|        <amp-inline-gallery-pagination layout="nodisplay"inset>
+|        </amp-inline-gallery-pagination>
+|      </div>
+|    </amp-inline-gallery>
+|    <!-- Valid: Non-inset with fixed-height -->
+|    <amp-inline-gallery layout="container">
+|      <amp-inline-gallery-pagination layout="fixed-height" height="24">
+|      </amp-inline-gallery-pagination>
+|    </amp-inline-gallery>
+|    <!-- Invalid: Not in a gallery -->
+|    <amp-inline-gallery-pagination layout="fixed-height" height="24">
+>>   ^~~~~~~~~
+amp-inline-gallery/1.0/test/validator-amp-inline-gallery-pagination.html:49:2 The tag 'amp-inline-gallery-pagination' may only appear as a descendant of tag 'amp-inline-gallery'. (see https://amp.dev/documentation/components/amp-inline-gallery/)
+|    </amp-inline-gallery-pagination>
+|    <!-- Invalid: Inset without nodisplay -->
+|    <amp-inline-gallery layout="container">
+|      <amp-inline-gallery-pagination layout="fixed-height" height="24" inset>
+>>     ^~~~~~~~~
+amp-inline-gallery/1.0/test/validator-amp-inline-gallery-pagination.html:53:4 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-inline-gallery-pagination'. (see https://amp.dev/documentation/components/amp-inline-gallery/)
+|      </amp-inline-gallery-pagination>
+|    </amp-inline-gallery>
+|  </body>
+|  </html>
diff --git a/extensions/amp-inline-gallery/1.0/test/validator-amp-inline-gallery-thumbnails.html b/extensions/amp-inline-gallery/1.0/test/validator-amp-inline-gallery-thumbnails.html
new file mode 100644
index 0000000000000..c78fcfa0a58b6
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/test/validator-amp-inline-gallery-thumbnails.html
@@ -0,0 +1,77 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-inline-gallery-thumbnails tag. See the inline comments.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-inline-gallery" src="https://cdn.ampproject.org/v0/amp-inline-gallery-1.0.js"></script>
+</head>
+<body>
+  <!-- Valid: Wrapped with a parent div -->
+  <amp-inline-gallery layout="container">
+    <div>
+      <amp-inline-gallery-thumbnails layout="fixed-height" height="96">
+      </amp-inline-gallery-thumbnails>
+    </div>
+  </amp-inline-gallery>
+  <!-- Valid: Loop attribute specified -->
+  <amp-inline-gallery layout="container">
+    <amp-inline-gallery-thumbnails layout="fixed-height" height="96" loop="true">
+    </amp-inline-gallery-thumbnails>
+  </amp-inline-gallery>
+  <!-- Valid: Aspect ratio -->
+  <amp-inline-gallery layout="container">
+    <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio="3">
+    </amp-inline-gallery-thumbnails>
+  </amp-inline-gallery>
+  <!-- Valid: Aspect ratio (float) -->
+  <amp-inline-gallery layout="container">
+    <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio="3.5">
+    </amp-inline-gallery-thumbnails>
+  </amp-inline-gallery>
+  <!-- Invalid: Not in a gallery -->
+  <amp-inline-gallery-thumbnails layout="fixed-height" height="96">
+  </amp-inline-gallery-thumbnails>
+  <!-- Invalid: Non-number aspect ratio-->
+  <amp-inline-gallery layout="container">
+    <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio="two">
+    </amp-inline-gallery-thumbnails>
+  </amp-inline-gallery>
+  <!-- Invalid: Aspect ratio of zero -->
+  <amp-inline-gallery layout="container">
+    <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio="0">
+    </amp-inline-gallery-thumbnails>
+  </amp-inline-gallery>
+  <!-- Invalid: Aspect ratio of zero (float) -->
+  <amp-inline-gallery layout="container">
+    <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio-height="0.00">
+    </amp-inline-gallery-thumbnails>
+  </amp-inline-gallery>
+  <!-- Invalid: Loop attribute without value -->
+  <amp-inline-gallery layout="container">
+    <amp-inline-gallery-thumbnails layout="fixed-height" height="96" loop>
+    </amp-inline-gallery-thumbnails>
+  </amp-inline-gallery>
+</body>
+</html>
diff --git a/extensions/amp-inline-gallery/1.0/test/validator-amp-inline-gallery-thumbnails.out b/extensions/amp-inline-gallery/1.0/test/validator-amp-inline-gallery-thumbnails.out
new file mode 100644
index 0000000000000..54f7a38972e60
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/test/validator-amp-inline-gallery-thumbnails.out
@@ -0,0 +1,88 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-inline-gallery-thumbnails tag. See the inline comments.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-inline-gallery" src="https://cdn.ampproject.org/v0/amp-inline-gallery-1.0.js"></script>
+|  </head>
+|  <body>
+|    <!-- Valid: Wrapped with a parent div -->
+|    <amp-inline-gallery layout="container">
+|      <div>
+|        <amp-inline-gallery-thumbnails layout="fixed-height" height="96">
+|        </amp-inline-gallery-thumbnails>
+|      </div>
+|    </amp-inline-gallery>
+|    <!-- Valid: Loop attribute specified -->
+|    <amp-inline-gallery layout="container">
+|      <amp-inline-gallery-thumbnails layout="fixed-height" height="96" loop="true">
+|      </amp-inline-gallery-thumbnails>
+|    </amp-inline-gallery>
+|    <!-- Valid: Aspect ratio -->
+|    <amp-inline-gallery layout="container">
+|      <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio="3">
+|      </amp-inline-gallery-thumbnails>
+|    </amp-inline-gallery>
+|    <!-- Valid: Aspect ratio (float) -->
+|    <amp-inline-gallery layout="container">
+|      <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio="3.5">
+|      </amp-inline-gallery-thumbnails>
+|    </amp-inline-gallery>
+|    <!-- Invalid: Not in a gallery -->
+|    <amp-inline-gallery-thumbnails layout="fixed-height" height="96">
+>>   ^~~~~~~~~
+amp-inline-gallery/1.0/test/validator-amp-inline-gallery-thumbnails.html:54:2 The tag 'amp-inline-gallery-thumbnails' may only appear as a descendant of tag 'amp-inline-gallery'. (see https://amp.dev/documentation/components/amp-inline-gallery/)
+|    </amp-inline-gallery-thumbnails>
+|    <!-- Invalid: Non-number aspect ratio-->
+|    <amp-inline-gallery layout="container">
+|      <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio="two">
+>>     ^~~~~~~~~
+amp-inline-gallery/1.0/test/validator-amp-inline-gallery-thumbnails.html:58:4 The attribute 'aspect-ratio' in tag 'amp-inline-gallery-thumbnails' is set to the invalid value 'two'. (see https://amp.dev/documentation/components/amp-inline-gallery/)
+|      </amp-inline-gallery-thumbnails>
+|    </amp-inline-gallery>
+|    <!-- Invalid: Aspect ratio of zero -->
+|    <amp-inline-gallery layout="container">
+|      <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio="0">
+>>     ^~~~~~~~~
+amp-inline-gallery/1.0/test/validator-amp-inline-gallery-thumbnails.html:63:4 The attribute 'aspect-ratio' in tag 'amp-inline-gallery-thumbnails' is set to the invalid value '0'. (see https://amp.dev/documentation/components/amp-inline-gallery/)
+|      </amp-inline-gallery-thumbnails>
+|    </amp-inline-gallery>
+|    <!-- Invalid: Aspect ratio of zero (float) -->
+|    <amp-inline-gallery layout="container">
+|      <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio-height="0.00">
+>>     ^~~~~~~~~
+amp-inline-gallery/1.0/test/validator-amp-inline-gallery-thumbnails.html:68:4 The attribute 'aspect-ratio-height' in tag 'amp-inline-gallery-thumbnails' is set to the invalid value '0.00'. (see https://amp.dev/documentation/components/amp-inline-gallery/)
+|      </amp-inline-gallery-thumbnails>
+|    </amp-inline-gallery>
+|    <!-- Invalid: Loop attribute without value -->
+|    <amp-inline-gallery layout="container">
+|      <amp-inline-gallery-thumbnails layout="fixed-height" height="96" loop>
+>>     ^~~~~~~~~
+amp-inline-gallery/1.0/test/validator-amp-inline-gallery-thumbnails.html:73:4 The attribute 'loop' in tag 'amp-inline-gallery-thumbnails' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-inline-gallery/)
+|      </amp-inline-gallery-thumbnails>
+|    </amp-inline-gallery>
+|  </body>
+|  </html>
diff --git a/extensions/amp-inline-gallery/1.0/thumbnails.js b/extensions/amp-inline-gallery/1.0/thumbnails.js
new file mode 100644
index 0000000000000..e1c5ad4a0ece8
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/thumbnails.js
@@ -0,0 +1,118 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {BaseCarousel} from '../../amp-base-carousel/1.0/component';
+import {CarouselContext} from '../../amp-base-carousel/1.0/carousel-context';
+import {px} from '../../../src/style';
+import {
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from '../../../src/preact';
+import {useStyles} from './thumbnails.jss';
+
+/**
+ * @param {!InlineGalleryDef.ThumbnailProps} props
+ * @return {PreactDef.Renderable}
+ */
+export function Thumbnails({
+  aspectRatio,
+  children,
+  className = '',
+  loop = false,
+  ...rest
+}) {
+  const classes = useStyles();
+  const [pointerFine, setPointerFine] = useState(false);
+  const ref = useRef(null);
+  const [height, setHeight] = useState(0);
+  const {setCurrentSlide, slides} = useContext(CarouselContext);
+
+  useEffect(() => {
+    const win = getWin(ref);
+    if (!win) {
+      return;
+    }
+    const mediaQuery = win.matchMedia('(pointer: fine)');
+    setPointerFine(mediaQuery.matches);
+  }, []);
+
+  // Adjust slides when container size or aspectRatio changes.
+  useLayoutEffect(() => {
+    const win = getWin(ref);
+    if (!win) {
+      return;
+    }
+    const observer = new win.ResizeObserver((entries) => {
+      const last = entries[entries.length - 1];
+      setHeight(last.contentRect.height);
+    });
+    observer.observe(ref.current.root);
+    return () => observer.disconnect();
+  }, [aspectRatio, height]);
+
+  return (
+    <BaseCarousel
+      className={`${className} ${classes.thumbnails}`}
+      mixedLength={true}
+      snap={false}
+      snapAlign={loop ? 'center' : 'start'}
+      controls={pointerFine ? 'always' : 'never'}
+      loop={loop}
+      ref={ref}
+      outsetArrows={true}
+      _thumbnails={true}
+      {...rest}
+    >
+      {children ||
+        slides.map((slide, i) => {
+          const {thumbnailSrc} = slide.props;
+          return (
+            <img
+              className={classes.slide}
+              onClick={() => setCurrentSlide(i)}
+              loading="lazy"
+              role="button"
+              src={thumbnailSrc || undefined}
+              style={{
+                height: px(height),
+                width: aspectRatio ? px(aspectRatio * height) : '',
+              }}
+              tabindex="0"
+            />
+          );
+        })}
+    </BaseCarousel>
+  );
+}
+
+/**
+ * @param {{current: (null|{root: Element})}} ref
+ * @return {Window|undefined}
+ */
+function getWin(ref) {
+  if (!ref.current) {
+    return;
+  }
+  const node = ref.current.root;
+  if (!node) {
+    return;
+  }
+  return node.ownerDocument.defaultView;
+}
diff --git a/extensions/amp-inline-gallery/1.0/thumbnails.jss.js b/extensions/amp-inline-gallery/1.0/thumbnails.jss.js
new file mode 100644
index 0000000000000..44247bca61c61
--- /dev/null
+++ b/extensions/amp-inline-gallery/1.0/thumbnails.jss.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+// Default height. Can be overridden by user style.
+const thumbnails = {
+  height: '100px',
+};
+
+// Default background color. Can be overridden by user style.
+const slide = {
+  backgroundColor: '#999',
+  objectFit: 'fill',
+};
+
+const JSS = {
+  thumbnails,
+  slide,
+};
+
+// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
+// eslint-disable-next-line local/no-export-side-effect
+export const useStyles = createUseStyles(JSS);
diff --git a/extensions/amp-inline-gallery/amp-inline-gallery.md b/extensions/amp-inline-gallery/amp-inline-gallery.md
index dda489f323740..92cf93d12a85c 100644
--- a/extensions/amp-inline-gallery/amp-inline-gallery.md
+++ b/extensions/amp-inline-gallery/amp-inline-gallery.md
@@ -4,10 +4,12 @@ formats:
   - websites
 teaser:
   text: Displays multiple similar pieces of content along a horizontal axis, with optional pagination dots and thumbnails.
+experimental: true
+bento: true
 ---
 
 <!---
-Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+Copyright 2021 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.
@@ -28,7 +30,7 @@ limitations under the License.
 
 The `<amp-inline-gallery>` component uses an `<amp-base-carousel>` to display slides. The page must have the required scripts for both components in the document head. Typical usage might look like:
 
-[example preview="inline" playground="true" imports="amp-inline-gallery,amp-base-carousel,amp-lightbox-gallery"]
+[example preview="inline" playground="true" imports="amp-inline-gallery:1.0,amp-base-carousel:1.0"]
 
 ```html
 <amp-inline-gallery layout="container">
@@ -40,7 +42,6 @@ The `<amp-inline-gallery>` component uses an `<amp-base-carousel>` to display sl
     snap-align="center"
     loop="true"
     visible-count="1.2"
-    lightbox
   >
     <amp-img
       src="{{server_for_email}}/static/inline-examples/images/image1.jpg"
@@ -70,13 +71,148 @@ The `<amp-inline-gallery>` component uses an `<amp-base-carousel>` to display sl
 
 The above example shows slides using an aspect ratio of 3:2, with 10% of a slide peeking on either side. An aspect ratio of 3.6:2 is used on the `amp-base-carousel` to show 1.2 slides at a time.
 
+### Standalone use outside valid AMP documents
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+#### Example
+
+The example below demonstrates `amp-inline-gallery` component in standalone use.
+
+[example preview="top-frame" playground="false"]
+
+```html
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-inline-gallery-1.0.css">
+  <script async custom-element="amp-inline-gallery" src="https://cdn.ampproject.org/v0/amp-inline-gallery-1.0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css">
+  <script async custom-element="amp-inline-gallery" src="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js"></script>
+  <style>
+    amp-base-carousel {
+      aspect-ratio: 3/1;
+    }
+    amp-base-carousel > div {
+      aspect-ratio: 1/1;
+    }
+    amp-inline-gallery-pagination {
+      height: 20px;
+    }
+    .red-gradient {
+      background: brown;
+      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);
+    }
+    .blue-gradient {
+      background: steelblue;
+      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);
+    }
+    .green-gradient {
+      background: seagreen;
+      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);
+    }
+    .pink-gradient {
+      background: pink;
+      background: linear-gradient(90deg, pink 50%, lightsalmon 90%, wheat 100%);
+    }
+    .yellow-gradient {
+      background: gold;
+      background: linear-gradient(90deg, gold 50%, goldenrod 90%, darkgoldenrod 100%);
+    }
+    .orange-gradient {
+      background: peru;
+      background: linear-gradient(90deg, peru 50%, chocolate 90%, saddlebrown 100%);
+    }
+    .seafoam-gradient {
+      background: darkseagreen;
+      background: linear-gradient(90deg, darkseagreen 50%, lightseagreen 90%, MediumAquaMarine 100%);
+    }
+    .purple-gradient {
+      background: rebeccapurple;
+      background: linear-gradient(90deg, rebeccapurple 50%, mediumpurple 90%, mediumslateblue 100%);
+    }
+    .cyan-gradient {
+      background: darkcyan;
+      background: linear-gradient(90deg, darkcyan 50%, lightcyan 90%, white 100%);
+    }
+  </style>
+</head>
+<amp-inline-gallery>
+  <amp-base-carousel id="my-carousel">
+    <div class="red-gradient"></div>
+    <div class="blue-gradient"></div>
+    <div class="green-gradient"></div>
+    <div class="pink-gradient"></div>
+    <div class="yellow-gradient"></div>
+    <div class="orange-gradient"></div>
+    <div class="seafoam-gradient"></div>
+    <div class="purple-gradient"></div>
+    <div class="cyan-gradient"></div>
+  </amp-base-carousel>
+  <amp-inline-gallery-pagination>
+</amp-inline-gallery>
+<div class="buttons" style="margin-top: 8px;">
+  <button id='prev-button'>Go to previous page of slides</button>
+  <button id='next-button'>Go to next page of slides</button>
+  <button id='go-to-button'>Go to slide with green gradient</button>
+</div>
+<script>
+  (async () => {
+    const carousel = document.querySelector('#my-carousel');
+    await customElements.whenDefined('amp-base-carousel');
+    const api = await carousel.getApi();
+    // programatically advance to next slide
+    api.next();
+    // set up button actions
+    document.querySelector('#prev-button').onclick = () => api.prev();
+    document.querySelector('#next-button').onclick = () => api.next();
+    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);
+  })();
+</script>
+```
+
+[/example]
+
+#### Interactivity and API usage
+
+Bento enabled components in standalone use are highly interactive through their API. In Bento standalone use, the element's API replaces AMP Actions and events and [`amp-bind`](https://amp.dev/documentation/components/amp-bind/?format=websites).
+
+The `amp-inline-gallery` component is used in combination with `amp-base-carousel` and should access the [`amp-base-carousel` API](https://amp.dev/documentation/components/amp-base-carousel-v1.0/?format=websites) accordingly.
+
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-inline-gallery-1.0.css">
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
+
+**Container type**
+
+The `amp-inline-gallery-pagination` and `amp-inline-gallery-thumbnails` components have defined layout size types. To ensure the components render correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):
+
+```css
+amp-inline-gallery-pagination {
+  height: 20px;
+}
+amp-inline-gallery-thumbnails {
+  aspect-ratio: 4/1
+}
+```
+
+[tip type="note"]
+Because this component composes with `amp-base-carousel`, be sure to also follow [`amp-base-carousel` styling recommendations](https://amp.dev/documentation/components/amp-base-carousel-v1.0/?format=websites#usage).
+[/tip]
+
 ### Include pagination indicators
 
 The `<amp-inline-gallery-pagination>` component determines how a pagination idicator should be displayed. By default, no pagination indicator is displayed.
 
 The pagination indicator renders as dots when there are eight or fewer slides in the `amp-base-carousel`. For nine or more slides, the pagination indicator renders the current slide number and total number of slides, aligned to the right.
 
-The pagination indicator location defaults to underneath the carousel. Adding the inset attribute to the `<amp-inline-gallery-pagination>` tag will overlay the pagination indicator on the carousel. To use different styles for different screen sizes, use the media attribute:
+The pagination indicator location defaults to underneath the carousel. Adding the inset attribute to the `<amp-inline-gallery-pagination>` tag will overlay the pagination indicator on the carousel. To use different styles for different screen sizes, use the [media attribute](./../../docs/spec/amp-html-responsive-attributes.md):
 
 ```html
 <amp-inline-gallery layout="container">
@@ -102,22 +238,24 @@ The pagination indicator location defaults to underneath the carousel. Adding th
 
 Displays the pagination indicator as inset, overlaying the carousel itself. When using `inset`, you should give the `<amp-inline-gallery-pagination>` element `layout="nodisplay"`.
 
+The default CSS for an `<amp-inline-gallery-pagination>` element with `inset` specifies it at `bottom: 0` with respect to its parent element. You may overwrite this to position the element over the carousel if there are other elements, such as `<amp-inline-gallery-thumbnails>`, directly below it.
+
 ##### common attributes
 
 The `<amp-inline-gallery-pagination>` element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.
 
 ### Include thumbnails
 
-The `amp-inline-gallery` component can display thumbnail preview in addition to, or instead of, the pagination indicators. By default, not thumbnails are shown in the gallery. Keep in mind the following best practices when using thumbnails:
+The `amp-inline-gallery` component can display thumbnail preview in addition to, or instead of, the pagination indicators. By default, no thumbnails are shown in the gallery. Keep in mind the following best practices when using thumbnails:
 
-- Avoid using both pagination indicators and thumbnails with less than eight slides. The indicator dots are redundant in smaller galleries.
-- When using both pagination indicators and thumbnails, inset the pagination indicators to overlap the slides. View the code sample below to see an example.
-- Use the `media` attribute to show pagination indicators on smaller mobile devices and thumbnails on larger screens.
-- Load lower resolution images at thumbnails by using `srcset`. You can omit the `sizes` on `<amp-img>`, it will be automatically generated based on the rendered width.
+-   Avoid using both pagination indicators and thumbnails with less than eight slides. The indicator dots are redundant in smaller galleries.
+-   When using both pagination indicators and thumbnails, inset the pagination indicators to overlap the slides. View the code sample below to see an example.
+-   Use the `media` attribute to show pagination indicators on smaller mobile devices and thumbnails on larger screens.
+-   Load lower resolution images at thumbnails by using `data-thumbnail-src` on your slide elements.
 
 The example below demonstrates a gallery with thumbnails visible at larger resolutions.
 
-[example preview="inline" playground="true" imports="amp-inline-gallery,amp-base-carousel"]
+[example preview="inline" playground="true" imports="amp-inline-gallery:1.0,amp-base-carousel:1.0"]
 
 ```html
 <amp-inline-gallery layout="container">
@@ -142,6 +280,7 @@ The example below demonstrates a gallery with thumbnails visible at larger resol
         srcset="https://picsum.photos/id/779/150/100 150w,
                 https://picsum.photos/id/779/600/400 600w,
                 https://picsum.photos/id/779/1200/800 1200w"
+        data-thumbnail-src="https://picsum.photos/id/779/150/100"
       >
       </amp-img>
       <amp-img
@@ -151,6 +290,7 @@ The example below demonstrates a gallery with thumbnails visible at larger resol
         srcset="https://picsum.photos/id/1048/150/100 150w,
                 https://picsum.photos/id/1048/600/400 600w,
                 https://picsum.photos/id/1048/1200/800 1200w"
+        data-thumbnail-src="https://picsum.photos/id/1048/150/100"
       >
       </amp-img>
       <amp-img
@@ -160,6 +300,7 @@ The example below demonstrates a gallery with thumbnails visible at larger resol
         srcset="https://picsum.photos/id/108/150/100 150w,
                 https://picsum.photos/id/108/600/400 600w,
                 https://picsum.photos/id/108/1200/800 1200w"
+        data-thumbnail-src="https://picsum.photos/id/108/150/100"
       >
       </amp-img>
       <amp-img
@@ -169,6 +310,7 @@ The example below demonstrates a gallery with thumbnails visible at larger resol
         srcset="https://picsum.photos/id/130/150/100 150w,
                 https://picsum.photos/id/130/600/400 600w,
                 https://picsum.photos/id/130/1200/800 1200w"
+        data-thumbnail-src="https://picsum.photos/id/130/150/100"
       >
       </amp-img>
       <amp-img
@@ -178,6 +320,7 @@ The example below demonstrates a gallery with thumbnails visible at larger resol
         srcset="https://picsum.photos/id/14/150/100 150w,
                 https://picsum.photos/id/14/600/400 600w,
                 https://picsum.photos/id/14/1200/800 1200w"
+        data-thumbnail-src="https://picsum.photos/id/14/150/100"
       >
       </amp-img>
       <amp-img
@@ -187,6 +330,7 @@ The example below demonstrates a gallery with thumbnails visible at larger resol
         srcset="https://picsum.photos/id/165/150/100 150w,
                 https://picsum.photos/id/165/600/400 600w,
                 https://picsum.photos/id/165/1200/800 1200w"
+        data-thumbnail-src="https://picsum.photos/id/165/150/100"
       >
       </amp-img>
       <amp-img
@@ -196,6 +340,7 @@ The example below demonstrates a gallery with thumbnails visible at larger resol
         srcset="https://picsum.photos/id/179/150/100 150w,
                 https://picsum.photos/id/179/600/400 600w,
                 https://picsum.photos/id/179/1200/800 1200w"
+        data-thumbnail-src="https://picsum.photos/id/179/150/100"
       >
       </amp-img>
       <amp-img
@@ -205,6 +350,7 @@ The example below demonstrates a gallery with thumbnails visible at larger resol
         srcset="https://picsum.photos/id/392/150/100 150w,
                 https://picsum.photos/id/392/600/400 600w,
                 https://picsum.photos/id/392/1200/800 1200w"
+        data-thumbnail-src="https://picsum.photos/id/392/150/100"
       >
       </amp-img>
       <amp-img
@@ -214,6 +360,7 @@ The example below demonstrates a gallery with thumbnails visible at larger resol
         srcset="https://picsum.photos/id/468/150/100 150w,
                 https://picsum.photos/id/468/600/400 600w,
                 https://picsum.photos/id/468/1200/800 1200w"
+        data-thumbnail-src="https://picsum.photos/id/468/150/100"
       >
       </amp-img>
     </amp-base-carousel>
@@ -237,17 +384,18 @@ The example below demonstrates a gallery with thumbnails visible at larger resol
 
 #### `amp-inline-gallery-thumbnails` attributes
 
-##### `aspect-ratio-height` (optional)
+##### Media Queries
 
-Specifies the aspect ratio when used with `aspect-ratio-width`. The aspect radio defaults to match the slides in `<amp-base-carousel>`.
+The attributes for `<amp-inline-gallery-thumbnails>` can be configured to use different
+options based on a [media query](./../../docs/spec/amp-html-responsive-attributes.md).
 
-##### `aspect-ratio-width` (optional)
+##### `aspect-ratio` (optional)
 
-Specifies the aspect ratio when used with `aspect-ratio-height`. The aspect radio defaults to match the slides in `<amp-base-carousel>`.
+Specifies the aspect ratio expressed as `width / height`. The aspect radio defaults to match the slides in `<amp-base-carousel>`.
 
 ##### `loop` (optional)
 
-Loops thumbnails. Takes a value of `"true"` or `"false"`. Defaults to `"true"`.
+Loops thumbnails. Takes a value of `"true"` or `"false"`. Defaults to `"false"`.
 
 ##### common attributes
 
@@ -259,6 +407,11 @@ The `<amp-inline-gallery-thumbnails>` element includes <a href="https://amp.dev/
 
 This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.
 
-## Validation
+## Version notes
+
+Unlike `0.1`, the experimental `1.0` version of `amp-inline-gallery` includes the following changes:
 
-See [amp-inline-gallery rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-inline-gallery/validator-amp-inline-gallery.protoascii) in the AMP validator specification.
+-   `amp-inline-gallery-pagination` with `inset` attribute positions the element with an overwritable `bottom: 0`.
+-   `amp-inline-gallery-thumbnails` takes `data-thumbnail-src` from slide elements (children of the `amp-base-carousel`) instead of `srcset`.
+-   `amp-inline-gallery-thumbnails` takes `aspect-ratio` as expressed by `width / height` instead of two separate attributes, `aspect-ratio-width` and `aspect-ratio-height`.
+-   `amp-inline-gallery-thumbnails` configuration for `loop` defaults to `"false"`.
diff --git a/extensions/amp-inline-gallery/validator-amp-inline-gallery.protoascii b/extensions/amp-inline-gallery/validator-amp-inline-gallery.protoascii
index 0b6a55144a9b9..088a3f8fe9bd0 100644
--- a/extensions/amp-inline-gallery/validator-amp-inline-gallery.protoascii
+++ b/extensions/amp-inline-gallery/validator-amp-inline-gallery.protoascii
@@ -20,6 +20,7 @@ tags: {  # amp-inline-gallery
   extension_spec: {
     name: "amp-inline-gallery"
     version: "0.1"
+    version: "1.0"
     version: "latest"
   }
   attr_lists: "common-extension-attrs"
@@ -29,7 +30,7 @@ tags: {  # <amp-inline-gallery>
   tag_name: "AMP-INLINE-GALLERY"
   requires_extension: "amp-inline-gallery"
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-inline-gallery"
+  spec_url: "https://amp.dev/documentation/components/amp-inline-gallery/"
   amp_layout: {
     supported_layouts: CONTAINER
   }
@@ -40,7 +41,7 @@ tags: {  # <amp-inline-gallery-pagination>
   spec_name: "amp-inline-gallery-pagination"
   requires_extension: "amp-inline-gallery"
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-inline-gallery"
+  spec_url: "https://amp.dev/documentation/components/amp-inline-gallery/"
   mandatory_ancestor: "AMP-INLINE-GALLERY"
   amp_layout: {
     supported_layouts: FILL
@@ -62,7 +63,7 @@ tags: {  # <amp-inline-gallery-pagination inset>
     mandatory: true
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-inline-gallery"
+  spec_url: "https://amp.dev/documentation/components/amp-inline-gallery/"
   mandatory_ancestor: "AMP-INLINE-GALLERY"
   amp_layout: {
     supported_layouts: NODISPLAY
@@ -82,7 +83,7 @@ tags: {  # <amp-inline-gallery-thumbnails>
     }
   }
   attrs: {
-    name: "aspect-ratio-width"
+    name: "aspect-ratio-width" # 0.1 only
     # Non-zero number
     value_regex: "\\d+(\\.\\d+)?"
     disallowed_value_regex: "^0+(\\.0+)?$"
@@ -90,13 +91,19 @@ tags: {  # <amp-inline-gallery-thumbnails>
       also_requires_attr: "aspect-ratio-height"
     }
   }
+  attrs: {
+    name: "aspect-ratio" # 1.0 only
+    # Non-zero number
+    value_regex: "\\d+(\\.\\d+)?"
+    disallowed_value_regex: "^0+(\\.0+)?$"
+  }
   attrs: {
     name: "loop"
     value: "true"
     value: "false"
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-inline-gallery"
+  spec_url: "https://amp.dev/documentation/components/amp-inline-gallery/"
   mandatory_ancestor: "AMP-INLINE-GALLERY"
   amp_layout: {
     supported_layouts: FILL
diff --git a/extensions/amp-inputmask/0.1/amp-inputmask.js b/extensions/amp-inputmask/0.1/amp-inputmask.js
index 8902c8d6d053b..253421d5f726a 100644
--- a/extensions/amp-inputmask/0.1/amp-inputmask.js
+++ b/extensions/amp-inputmask/0.1/amp-inputmask.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../../src/amp-events';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {TextMask} from './text-mask';
 import {iterateCursor} from '../../../src/dom';
 import {listen} from '../../../src/event-helper';
@@ -44,7 +44,9 @@ export class AmpInputmaskService {
    * Install the inputmask service and controllers.
    */
   install() {
-    const maskElements = this.ampdoc.getRootNode().querySelectorAll('[mask]');
+    const maskElements = this.ampdoc
+      .getRootNode()
+      .querySelectorAll('input[mask]');
     iterateCursor(maskElements, (element) => {
       if (TextMask.isMasked(element)) {
         return;
diff --git a/extensions/amp-inputmask/0.1/inputmask-custom-alias.js b/extensions/amp-inputmask/0.1/inputmask-custom-alias.js
index dd3c5eb8ec5df..2ac906285a800 100644
--- a/extensions/amp-inputmask/0.1/inputmask-custom-alias.js
+++ b/extensions/amp-inputmask/0.1/inputmask-custom-alias.js
@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-import {dict} from '../../../src/utils/object';
-import {startsWith} from '../../../src/string';
+import {dict} from '../../../src/core/types/object';
 import {user} from '../../../src/log';
 
 /**
@@ -140,7 +139,7 @@ export function getMaskPrefix(mask) {
  */
 export function removePrefix(value, prefixes) {
   const longestPrefix = prefixes
-    .filter((prefix) => startsWith(value, prefix))
+    .filter((prefix) => value.startsWith(prefix))
     .sort((a, b) => b.length - a.length)[0];
 
   if (longestPrefix) {
diff --git a/extensions/amp-inputmask/0.1/inputmask-payment-card-alias.js b/extensions/amp-inputmask/0.1/inputmask-payment-card-alias.js
index c7a69e3fb6405..ab77a77cb57f6 100644
--- a/extensions/amp-inputmask/0.1/inputmask-payment-card-alias.js
+++ b/extensions/amp-inputmask/0.1/inputmask-payment-card-alias.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 
 /**
  * Installs an alias used to mask credit cards and enable digit chunking.
diff --git a/extensions/amp-inputmask/0.1/mask-impl.js b/extensions/amp-inputmask/0.1/mask-impl.js
index d393351a7f764..56bbcde84ba65 100644
--- a/extensions/amp-inputmask/0.1/mask-impl.js
+++ b/extensions/amp-inputmask/0.1/mask-impl.js
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../../src/amp-events';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {MASK_SEPARATOR_CHAR, MaskChars, NamedMasks} from './constants';
 import {MaskInterface} from './mask-interface';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {factory as inputmaskCustomAliasFactory} from './inputmask-custom-alias';
 import {factory as inputmaskPaymentCardAliasFactory} from './inputmask-payment-card-alias';
 import {requireExternal} from '../../../src/module';
@@ -65,7 +65,7 @@ export class Mask {
    * @param {string} mask
    */
   constructor(element, mask) {
-    this.Inputmask_ = Mask.getInputmask_(element);
+    this.Inputmask_ = this.getInputmask_(element);
 
     this.element_ = element;
 
@@ -108,7 +108,7 @@ export class Mask {
    * @return {function(!Object):!Inputmask}
    * @private visible for testing
    */
-  static getInputmask_(element) {
+  getInputmask_(element) {
     if (this.Inputmask_) {
       return this.Inputmask_;
     }
@@ -191,7 +191,8 @@ function convertAmpMaskToInputmask(ampMask) {
  * From XRegExp
  * https://github.com/slevithan/xregexp/blob/7a1688742e20b2745436a5a7793104fc17e3e652/tools/output/categories.js#L40
  */
-const NONALPHANUMERIC_REGEXP = /[^0-9\xB2\xB3\xB9\xBC-\xBE\u0660-\u0669\u06F0-\u06F9\u07C0-\u07C9\u0966-\u096F\u09E6-\u09EF\u09F4-\u09F9\u0A66-\u0A6F\u0AE6-\u0AEF\u0B66-\u0B6F\u0B72-\u0B77\u0BE6-\u0BF2\u0C66-\u0C6F\u0C78-\u0C7E\u0CE6-\u0CEF\u0D58-\u0D5E\u0D66-\u0D78\u0DE6-\u0DEF\u0E50-\u0E59\u0ED0-\u0ED9\u0F20-\u0F33\u1040-\u1049\u1090-\u1099\u1369-\u137C\u16EE-\u16F0\u17E0-\u17E9\u17F0-\u17F9\u1810-\u1819\u1946-\u194F\u19D0-\u19DA\u1A80-\u1A89\u1A90-\u1A99\u1B50-\u1B59\u1BB0-\u1BB9\u1C40-\u1C49\u1C50-\u1C59\u2070\u2074-\u2079\u2080-\u2089\u2150-\u2182\u2185-\u2189\u2460-\u249B\u24EA-\u24FF\u2776-\u2793\u2CFD\u3007\u3021-\u3029\u3038-\u303A\u3192-\u3195\u3220-\u3229\u3248-\u324F\u3251-\u325F\u3280-\u3289\u32B1-\u32BF\uA620-\uA629\uA6E6-\uA6EF\uA830-\uA835\uA8D0-\uA8D9\uA900-\uA909\uA9D0-\uA9D9\uA9F0-\uA9F9\uAA50-\uAA59\uABF0-\uABF9\uFF10-\uFF19A-Za-z\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0560-\u0588\u05D0-\u05EA\u05EF-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16F1-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1878\u1880-\u1884\u1887-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1C80-\u1C88\u1C90-\u1CBA\u1CBD-\u1CBF\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312F\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FEF\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA7B9\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA8FE\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]/g;
+const NONALPHANUMERIC_REGEXP =
+  /[^0-9\xB2\xB3\xB9\xBC-\xBE\u0660-\u0669\u06F0-\u06F9\u07C0-\u07C9\u0966-\u096F\u09E6-\u09EF\u09F4-\u09F9\u0A66-\u0A6F\u0AE6-\u0AEF\u0B66-\u0B6F\u0B72-\u0B77\u0BE6-\u0BF2\u0C66-\u0C6F\u0C78-\u0C7E\u0CE6-\u0CEF\u0D58-\u0D5E\u0D66-\u0D78\u0DE6-\u0DEF\u0E50-\u0E59\u0ED0-\u0ED9\u0F20-\u0F33\u1040-\u1049\u1090-\u1099\u1369-\u137C\u16EE-\u16F0\u17E0-\u17E9\u17F0-\u17F9\u1810-\u1819\u1946-\u194F\u19D0-\u19DA\u1A80-\u1A89\u1A90-\u1A99\u1B50-\u1B59\u1BB0-\u1BB9\u1C40-\u1C49\u1C50-\u1C59\u2070\u2074-\u2079\u2080-\u2089\u2150-\u2182\u2185-\u2189\u2460-\u249B\u24EA-\u24FF\u2776-\u2793\u2CFD\u3007\u3021-\u3029\u3038-\u303A\u3192-\u3195\u3220-\u3229\u3248-\u324F\u3251-\u325F\u3280-\u3289\u32B1-\u32BF\uA620-\uA629\uA6E6-\uA6EF\uA830-\uA835\uA8D0-\uA8D9\uA900-\uA909\uA9D0-\uA9D9\uA9F0-\uA9F9\uAA50-\uAA59\uABF0-\uABF9\uFF10-\uFF19A-Za-z\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0560-\u0588\u05D0-\u05EA\u05EF-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16F1-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1878\u1880-\u1884\u1887-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1C80-\u1C88\u1C90-\u1CBA\u1CBD-\u1CBF\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312F\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FEF\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA7B9\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA8FE\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]/g;
 
 /**
  * Removes special characters from the provided string.
diff --git a/extensions/amp-inputmask/0.1/test/integration/test-integration-amp-inputmask-date.js b/extensions/amp-inputmask/0.1/test/integration/test-integration-amp-inputmask-date.js
index bc47c4dd46c96..591f1fecccae5 100644
--- a/extensions/amp-inputmask/0.1/test/integration/test-integration-amp-inputmask-date.js
+++ b/extensions/amp-inputmask/0.1/test/integration/test-integration-amp-inputmask-date.js
@@ -16,8 +16,8 @@
 
 import {simulateKeyboardInteraction} from './utils';
 
-const config = describe.configure().retryOnSaucelabs().ifChrome();
-config.skip('amp-inputmask', () => {
+const config = describes.sandboxed.configure().ifChrome();
+config.skip('amp-inputmask', {}, () => {
   const {testServerPort} = window.ampTestRuntimeConfig;
 
   describes.integration(
diff --git a/extensions/amp-inputmask/0.1/test/integration/test-integration-amp-inputmask.js b/extensions/amp-inputmask/0.1/test/integration/test-integration-amp-inputmask.js
index 691174d30b6e9..c0ece94295a48 100644
--- a/extensions/amp-inputmask/0.1/test/integration/test-integration-amp-inputmask.js
+++ b/extensions/amp-inputmask/0.1/test/integration/test-integration-amp-inputmask.js
@@ -17,8 +17,8 @@
 import {poll} from '../../../../../testing/iframe';
 import {simulateKeyboardInteraction} from './utils';
 
-const config = describe.configure().retryOnSaucelabs().ifChrome();
-config.skip('amp-inputmask', () => {
+const config = describes.sandboxed.configure().ifChrome();
+config.skip('amp-inputmask', {}, () => {
   const {testServerPort} = window.ampTestRuntimeConfig;
 
   describes.integration(
diff --git a/extensions/amp-inputmask/0.1/test/test-mask-impl.js b/extensions/amp-inputmask/0.1/test/test-mask-impl.js
index e0aaabc75977b..35f6794504ed4 100644
--- a/extensions/amp-inputmask/0.1/test/test-mask-impl.js
+++ b/extensions/amp-inputmask/0.1/test/test-mask-impl.js
@@ -25,8 +25,8 @@ describes.sandboxed('amp-inputmask mask-impl', {}, (env) => {
     beforeEach(() => {
       constructorStub = env.sandbox.stub();
       constructorStub.extendDefaults = function () {};
-
-      env.sandbox.stub(Mask, 'getInputmask_').returns(constructorStub);
+      constructorStub.extendAliases = function () {};
+      globalThis.AMP.dependencies = {'inputmaskFactory': () => constructorStub};
 
       FakeElement.prototype.getAttribute = env.sandbox.stub();
       FakeElement.prototype.addEventListener = env.sandbox.stub();
diff --git a/extensions/amp-inputmask/0.1/test/validator-amp-inputmask.out b/extensions/amp-inputmask/0.1/test/validator-amp-inputmask.out
index 06d4c2c1ab72a..f0b73417cc5bd 100644
--- a/extensions/amp-inputmask/0.1/test/validator-amp-inputmask.out
+++ b/extensions/amp-inputmask/0.1/test/validator-amp-inputmask.out
@@ -68,35 +68,35 @@ FAIL
 |      <!-- Invalid: mask-output attr without mask attr -->
 |      <input mask-output="raw" type="text">
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:68:4 The attribute 'mask-output' may not appear in tag 'input'. (see https://amp.dev/documentation/components/amp-form)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:68:4 The attribute 'mask-output' may not appear in tag 'input'. (see https://amp.dev/documentation/components/amp-form/)
 |      <!-- Invalid: mask attr with type=date -->
 |      <input mask="L0L_0L0" type="date">
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:70:4 The attribute 'type' in tag 'input [mask] (custom mask)' is set to the invalid value 'date'. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:70:4 The attribute 'type' in tag 'input' is set to the invalid value 'date'. (see https://amp.dev/documentation/components/amp-inputmask/)
 |      <!-- Invalid: mask attr with type=email -->
 |      <input mask="L0L_0L0" type="email">
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:72:4 The attribute 'type' in tag 'input [mask] (custom mask)' is set to the invalid value 'email'. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:72:4 The attribute 'type' in tag 'input' is set to the invalid value 'email'. (see https://amp.dev/documentation/components/amp-inputmask/)
 |      <!-- Invalid: mask attr with type=number -->
 |      <input mask="L0L_0L0" type="number">
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:74:4 The attribute 'type' in tag 'input [mask] (custom mask)' is set to the invalid value 'number'. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:74:4 The attribute 'type' in tag 'input' is set to the invalid value 'number'. (see https://amp.dev/documentation/components/amp-inputmask/)
 |      <!-- Invalid: mask attr with type=button -->
 |      <input mask="L0L_0L0" type="button">
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:76:4 The attribute 'type' in tag 'input [mask] (custom mask)' is set to the invalid value 'button'. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:76:4 The attribute 'type' in tag 'input' is set to the invalid value 'button'. (see https://amp.dev/documentation/components/amp-inputmask/)
 |      <!-- Invalid: mask attr with type=range -->
 |      <input mask="L0L_0L0" type="range">
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:78:4 The attribute 'type' in tag 'input [mask] (custom mask)' is set to the invalid value 'range'. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:78:4 The attribute 'type' in tag 'input' is set to the invalid value 'range'. (see https://amp.dev/documentation/components/amp-inputmask/)
 |      <!-- Invalid: mask attr with type=hidden -->
 |      <input mask="L0L_0L0" type="hidden">
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:80:4 The attribute 'type' in tag 'input [mask] (custom mask)' is set to the invalid value 'hidden'. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:80:4 The attribute 'type' in tag 'input' is set to the invalid value 'hidden'. (see https://amp.dev/documentation/components/amp-inputmask/)
 |      <!-- Invalid: mask attr with type=password -->
 |      <input mask="L0L_0L0" type="password">
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:82:4 The attribute 'type' in tag 'input [mask] (custom mask)' is set to the invalid value 'password'. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:82:4 The attribute 'type' in tag 'input' is set to the invalid value 'password'. (see https://amp.dev/documentation/components/amp-inputmask/)
 |      <!-- Invalid: mask attr with div[contenteditable] -->
 |      <div contenteditable mask="L0L_0L0"></div>
 >>     ^~~~~~~~~
@@ -106,28 +106,28 @@ amp-inputmask/0.1/test/validator-amp-inputmask.html:84:4 The attribute 'mask' ma
 |      <!-- Invalid: mask attr with multiple masks that includes named mask -->
 |      <input mask="LOL_0L0 payment-card"></div>
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:86:4 The attribute 'mask' in tag 'input [mask] (custom mask)' is set to the invalid value 'LOL_0L0 payment-card'. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:86:4 The attribute 'mask' in tag 'input' is set to the invalid value 'LOL_0L0 payment-card'. (see https://amp.dev/documentation/components/amp-inputmask/)
 |      <!-- Invalid: mask attr with multiple named masks -->
 |      <input mask="payment-card payment-card"></div>
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:88:4 The attribute 'mask' in tag 'input [mask] (custom mask)' is set to the invalid value 'payment-card payment-card'. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:88:4 The attribute 'mask' in tag 'input' is set to the invalid value 'payment-card payment-card'. (see https://amp.dev/documentation/components/amp-inputmask/)
 |      <input mask="payment-card date-mm-yy"></div>
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:89:4 The attribute 'mask' in tag 'input [mask] (custom mask)' is set to the invalid value 'payment-card date-mm-yy'. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:89:4 The attribute 'mask' in tag 'input' is set to the invalid value 'payment-card date-mm-yy'. (see https://amp.dev/documentation/components/amp-inputmask/)
 |      <input mask="payment-card  date-mm-yy"></div>
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:90:4 The attribute 'mask' in tag 'input [mask] (custom mask)' is set to the invalid value 'payment-card date-mm-yy'. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:90:4 The attribute 'mask' in tag 'input' is set to the invalid value 'payment-card date-mm-yy'. (see https://amp.dev/documentation/components/amp-inputmask/)
 |      <!-- Invalid: mask attr with spaces named masks -->
 |      <input mask="payment-card "></div>
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:92:4 The attribute 'mask' in tag 'input [mask] (custom mask)' is set to the invalid value 'payment-card '. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:92:4 The attribute 'mask' in tag 'input' is set to the invalid value 'payment-card '. (see https://amp.dev/documentation/components/amp-inputmask/)
 |      <input mask=" payment-card "></div>
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:93:4 The attribute 'mask' in tag 'input [mask] (custom mask)' is set to the invalid value ' payment-card '. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:93:4 The attribute 'mask' in tag 'input' is set to the invalid value ' payment-card '. (see https://amp.dev/documentation/components/amp-inputmask/)
 |      <!-- Invalid: mask attr with non-numeric mask-trim-zeros -->
 |      <input mask="00000" mask-trim-zeros="wow" type="tel">
 >>     ^~~~~~~~~
-amp-inputmask/0.1/test/validator-amp-inputmask.html:95:4 The attribute 'mask-trim-zeros' in tag 'input [mask] (custom mask)' is set to the invalid value 'wow'. (see https://amp.dev/documentation/components/amp-inputmask)
+amp-inputmask/0.1/test/validator-amp-inputmask.html:95:4 The attribute 'mask-trim-zeros' in tag 'input' is set to the invalid value 'wow'. (see https://amp.dev/documentation/components/amp-inputmask/)
 |    </form>
 |    </form>
 |
diff --git a/extensions/amp-inputmask/OWNERS b/extensions/amp-inputmask/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-inputmask/OWNERS
+++ b/extensions/amp-inputmask/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-inputmask/amp-inputmask.md b/extensions/amp-inputmask/amp-inputmask.md
index f667dbeb4a87e..8c83bfca601b4 100644
--- a/extensions/amp-inputmask/amp-inputmask.md
+++ b/extensions/amp-inputmask/amp-inputmask.md
@@ -24,25 +24,27 @@ limitations under the License.
 
 # amp-inputmask
 
-## Behavior
+## Usage
 
-`amp-inputmask` enables the `mask` and `mask-output` attributes on `input` elements. These allow document authors to specify input masks for their form elements.
+`amp-inputmask` enables the `mask` and `mask-output` attributes on `input`
+elements. These allow document authors to specify input masks for their form
+elements.
 
 Input masks automatically add formatting characters to user input, and prevent
 users from typing input that doesn't match the mask. For example, an input mask
-on a telephone field automatically adds special characters like
-`(`, `)` and `-`, and users can type only the numbers needed while the mask prevents
-them from typing incorrect characters.
+on a telephone field automatically adds special characters like `(`, `)` and
+`-`, and users can type only the numbers needed while the mask prevents them
+from typing incorrect characters.
 
-#### Supported elements
+### Supported elements
 
-- `input[type=text]`
-- `input[type=tel]`
-- `input[type=search]`
+-   `input[type=text]`
+-   `input[type=tel]`
+-   `input[type=search]`
 
 ## Attributes
 
-#### mask
+### `mask` (required)
 
 Specifies the mask or masks to apply to the input element.
 
@@ -50,51 +52,51 @@ Custom masks are composed of the following characters,
 and may be listed separated by spaces:
 
 <table>
-<tr>
-<th width="30%"><code>mask</code><br>character</th>
-<th>Description</th>
-</tr>
-<tr>
-<td><code>L</code></td>
-<td>The user must add an alphabetical character</td>
-</tr>
-<tr>
-<td><code>0</code></td>
-<td>The user must add a numeric character</td>
-</tr>
-<tr>
-<td><code>A</code></td>
-<td>The user must add an alphanumeric character</td>
-</tr>
-<tr>
-<td><code>C</code></td>
-<td>The user must add an arbitrary character</td>
-</tr>
-<tr>
-<td><code>l</code></td>
-<td>The user may optionally add an alphabetical character</td>
-</tr>
-<tr>
-<td><code>a</code></td>
-<td>The user may optionally add an alphanumeric character</td>
-</tr>
-<tr>
-<td><code>c</code></td>
-<td>The user may optionally add an arbitrary character</td>
-</tr>
-<tr>
-<td><code>9</code></td>
-<td>The user may optionally add a numeric character.</td>
-</tr>
-<tr>
-<td><code>\</code></td>
-<td>The backslash `\` escapes the next character in the mask to be a character literal.</td>
-</tr>
-<tr>
-<td><code>_</code></td>
-<td>The mask will automatically insert a space character</td>
-</tr>
-</tbody>
+  <tr>
+    <th width="30%"><code>mask</code><br>character</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td><code>L</code></td>
+    <td>The user must add an alphabetical character</td>
+  </tr>
+  <tr>
+    <td><code>0</code></td>
+    <td>The user must add a numeric character</td>
+  </tr>
+  <tr>
+    <td><code>A</code></td>
+    <td>The user must add an alphanumeric character</td>
+  </tr>
+  <tr>
+    <td><code>C</code></td>
+    <td>The user must add an arbitrary character</td>
+  </tr>
+  <tr>
+    <td><code>l</code></td>
+    <td>The user may optionally add an alphabetical character</td>
+  </tr>
+  <tr>
+    <td><code>a</code></td>
+    <td>The user may optionally add an alphanumeric character</td>
+  </tr>
+  <tr>
+    <td><code>c</code></td>
+    <td>The user may optionally add an arbitrary character</td>
+  </tr>
+  <tr>
+    <td><code>9</code></td>
+    <td>The user may optionally add a numeric character.</td>
+  </tr>
+  <tr>
+    <td><code>\</code></td>
+  <td>The backslash <code>\</code> escapes the next character in the mask to be a character
+    literal.</td>
+  </tr>
+  <tr>
+    <td><code>_</code></td>
+    <td>The mask will automatically insert a space character</td>
+  </tr>
 </table>
 
 As an example, this masked input will allow the user to enter a
@@ -120,19 +122,10 @@ The characters "+", "1", " ", "(", ")" and "-" will be automatically added as th
 
 The following named masks are supported:
 
-<table>
-<tr>
-<th width="30%"><code>mask</code><br></th>
-<th>Description</th>
-</tr>
-<tr>
-<td><code>payment-card</code></td>
-<td>The user must enter a payment card number.
+<strong>`payment-card`</strong>
+The user must enter a payment card number.
 The mask automatically adds spaces to chunk the numbers, and supports both
-American Express-style and Visa-style chunking.</td>
-</tr>
-</tbody>
-</table>
+American Express-style and Visa-style chunking.
 
 As an example, this masked input will allow the user to enter a payment card number.
 Space characters " " will be automatically added as the user types.
@@ -141,28 +134,28 @@ Space characters " " will be automatically added as the user types.
 <input type="tel" mask="payment-card" placeholder="0000 0000 0000 0000" />
 ```
 
-#### mask-trim-zeros
+### `mask-trim-zeros`
 
-Specifies how many zeros the mask will remove from pasted values into
-custom masks. For backwards compatibility, the default is `2`.
-Specify `0` to disable this behavior.
+Specifies how many zeros the mask will remove from pasted values into custom
+masks. For backwards compatibility, the default is `2`. Specify `0` to disable
+this behavior.
 
-When users paste values from spreadsheets, often there is a zero padding
-on the left side. For example, North American phone numbers are sometimes
-stored as 015551112222 where 1 is the country code, but it has been zero-padded.
-The `mask-trim-zeros` attribute will remove up to the given number of zeros.
-The `mask-trim-zeros` attribute does not affect named masks.
+When users paste values from spreadsheets, often there is a zero padding on the
+left side. For example, North American phone numbers are sometimes stored as
+015551112222 where 1 is the country code, but it has been zero-padded. The
+`mask-trim-zeros` attribute will remove up to the given number of zeros. The
+`mask-trim-zeros` attribute does not affect named masks
 
-#### mask-output
+### `mask-output`
 
 Specifies how the form will submit the input value.
 
-- **raw** (default): Outputs the value as-is with all special characters.
-- **alphanumeric**: Only outputs alphanumeric characters in the mask. The form will add a `type="hidden"` input with the masked input's `name` or `id` attribute with `-unmasked` appended.
-
-Example:
+-   **raw** (default): Outputs the value as-is with all special characters.
+-   **alphanumeric**: Only outputs alphanumeric characters in the mask. The form
+    will add a `type="hidden"` input with the masked input's `name` or `id`
+    attribute with `-unmasked` appended.
 
-Here, the `mask-output` output attribute is set to `raw`.
+In the example below the `mask-output` output attribute is set to `raw`.
 
 ```html
 <input
@@ -204,7 +197,7 @@ Here, the `mask-output` output attribute is set to `alphanumeric`.
 />
 ```
 
-When `mask-output` is set to `raw`, the form will submit the `input` value as-is, and the form will add a hidden input. The hidden input will have the alphanumeric characters from the original input. Its `name` will be the original input's name with `-unmasked` appended. For example, if the input contains `+1 (800) 123-4567`, the form will submit the following values:
+When `mask-output` is set to `alphanumeric`, the form will submit the `input` value as-is, and the form will add a hidden input. The hidden input will have the alphanumeric characters from the original input. Its `name` will be the original input's name with `-unmasked` appended. For example, if the input contains `+1 (800) 123-4567`, the form will submit the following values:
 
 ```json
 {
@@ -215,4 +208,4 @@ When `mask-output` is set to `raw`, the form will submit the `input` value as-is
 
 ## Validation
 
-See [amp-inputmask rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-inputmask/validator-amp-inputmask.protoascii) in the AMP validator specification.
+See [amp-inputmask rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-inputmask/validator-amp-inputmask.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-inputmask/validator-amp-inputmask.protoascii b/extensions/amp-inputmask/validator-amp-inputmask.protoascii
index e01878f6c6acf..6d08dcfb93fae 100644
--- a/extensions/amp-inputmask/validator-amp-inputmask.protoascii
+++ b/extensions/amp-inputmask/validator-amp-inputmask.protoascii
@@ -53,7 +53,7 @@ tags: {
   attr_lists: "input-common-attr"
   attr_lists: "name-attr"
   attrs: { name: "[type]" }
-  spec_url: "https://amp.dev/documentation/components/amp-inputmask"
+  spec_url: "https://amp.dev/documentation/components/amp-inputmask/"
 }
 
 tags: {
@@ -70,7 +70,7 @@ tags: {
   attr_lists: "amp-inputmask-common-attr"
   attr_lists: "input-common-attr"
   attr_lists: "name-attr"
-  spec_url: "https://amp.dev/documentation/components/amp-inputmask"
+  spec_url: "https://amp.dev/documentation/components/amp-inputmask/"
 }
 
 tags: {
@@ -87,7 +87,7 @@ tags: {
   attr_lists: "amp-inputmask-common-attr"
   attr_lists: "input-common-attr"
   attr_lists: "name-attr"
-  spec_url: "https://amp.dev/documentation/components/amp-inputmask"
+  spec_url: "https://amp.dev/documentation/components/amp-inputmask/"
 }
 
 tags: {
@@ -104,7 +104,7 @@ tags: {
   attr_lists: "amp-inputmask-common-attr"
   attr_lists: "input-common-attr"
   attr_lists: "name-attr"
-  spec_url: "https://amp.dev/documentation/components/amp-inputmask"
+  spec_url: "https://amp.dev/documentation/components/amp-inputmask/"
 }
 
 tags: {
@@ -121,7 +121,7 @@ tags: {
   attr_lists: "amp-inputmask-common-attr"
   attr_lists: "input-common-attr"
   attr_lists: "name-attr"
-  spec_url: "https://amp.dev/documentation/components/amp-inputmask"
+  spec_url: "https://amp.dev/documentation/components/amp-inputmask/"
 }
 
 tags: {
@@ -138,7 +138,7 @@ tags: {
   attr_lists: "amp-inputmask-common-attr"
   attr_lists: "input-common-attr"
   attr_lists: "name-attr"
-  spec_url: "https://amp.dev/documentation/components/amp-inputmask"
+  spec_url: "https://amp.dev/documentation/components/amp-inputmask/"
 }
 
 attr_lists: {
diff --git a/extensions/amp-instagram/0.1/amp-instagram.js b/extensions/amp-instagram/0.1/amp-instagram.js
index 26572f433bd1b..422ca9f12cf9a 100644
--- a/extensions/amp-instagram/0.1/amp-instagram.js
+++ b/extensions/amp-instagram/0.1/amp-instagram.js
@@ -39,14 +39,13 @@ import {CSS} from '../../../build/amp-instagram-0.1.css';
 import {Services} from '../../../src/services';
 import {getData, listen} from '../../../src/event-helper';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {isObject} from '../../../src/types';
+import {isObject} from '../../../src/core/types';
 import {removeElement} from '../../../src/dom';
-import {setStyles} from '../../../src/style';
-import {startsWith} from '../../../src/string';
-import {tryParseJson} from '../../../src/json';
+import {setStyle} from '../../../src/style';
+import {tryParseJson} from '../../../src/core/types/object/json';
 import {userAssert} from '../../../src/log';
 
-class AmpInstagram extends AMP.BaseElement {
+export class AmpInstagram extends AMP.BaseElement {
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -108,48 +107,6 @@ class AmpInstagram extends AMP.BaseElement {
       : '';
   }
 
-  /** @override */
-  createPlaceholderCallback() {
-    const placeholder = this.win.document.createElement('div');
-    placeholder.setAttribute('placeholder', '');
-    const image = this.win.document.createElement('img');
-
-    // This will redirect to the image URL. By experimentation this is
-    // always the same URL that is actually used inside of the embed.
-    this.getAmpDoc()
-      .whenFirstVisible()
-      .then(() => {
-        image.setAttribute(
-          'src',
-          'https://www.instagram.com/p/' +
-            encodeURIComponent(this.shortcode_) +
-            '/media/?size=l'
-        );
-      });
-    image.setAttribute('referrerpolicy', 'origin');
-    setStyles(image, {
-      'overflow': 'hidden',
-      'max-width': '100%',
-    });
-
-    this.propagateAttributes(['alt'], image);
-    /*
-     * Add instagram default styling
-     */
-    if (this.element.hasAttribute('data-default-framing')) {
-      this.element.classList.add('amp-instagram-default-framing');
-    }
-
-    placeholder.appendChild(image);
-    // Must be kept in-sync with the amp-instagram style in ampdoc.css.
-    // This value is the height of the header of the plugin. Makes the
-    // placeholder start at the right spot.
-    setStyles(placeholder, {
-      'marginTop': '54px',
-    });
-    return placeholder;
-  }
-
   /** @override */
   isLayoutSupported(layout) {
     return isLayoutSizeDefined(layout);
@@ -182,14 +139,10 @@ class AmpInstagram extends AMP.BaseElement {
       '?cr=1&v=12';
     this.applyFillContent(iframe);
     this.element.appendChild(iframe);
-    setStyles(iframe, {
-      'opacity': 0,
-    });
+    setStyle(iframe, 'opacity', 0);
     return (this.iframePromise_ = this.loadPromise(iframe).then(() => {
       this.getVsync().mutate(() => {
-        setStyles(iframe, {
-          'opacity': 1,
-        });
+        setStyle(iframe, 'opacity', 1);
       });
     }));
   }
@@ -209,8 +162,7 @@ class AmpInstagram extends AMP.BaseElement {
     if (
       !eventData ||
       !(
-        isObject(eventData) ||
-        startsWith(/** @type {string} */ (eventData), '{')
+        isObject(eventData) || /** @type {string} */ (eventData).startsWith('{')
       )
     ) {
       return; // Doesn't look like JSON.
diff --git a/extensions/amp-instagram/0.1/amp-instagram.md b/extensions/amp-instagram/0.1/amp-instagram.md
new file mode 100644
index 0000000000000..f81b4785b0e45
--- /dev/null
+++ b/extensions/amp-instagram/0.1/amp-instagram.md
@@ -0,0 +1,73 @@
+---
+$category@: social
+formats:
+  - websites
+teaser:
+  text: Displays an Instagram embed.
+---
+
+<!---
+Copyright 2015 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.
+-->
+
+# amp-instagram
+
+## Behavior
+
+The `width` and `height` attributes are special for the Instagram embed.
+These should be the actual width and height of the Instagram image.
+The system automatically adds space for the "chrome" that Instagram adds around the image.
+
+Many Instagrams are square. When you set `layout="responsive"` any value where `width` and `height` are the same will work.
+
+Example:
+
+```html
+<amp-instagram
+  data-shortcode="fBwFP"
+  data-captioned
+  width="400"
+  height="400"
+  layout="responsive"
+>
+</amp-instagram>
+```
+
+If the Instagram is not square you will need to enter the actual dimensions of the image.
+
+When using non-responsive layout you will need to account for the extra space added for the "instagram chrome" around the image. This is currently 48px above and below the image and 8px on the sides.
+
+## Attributes
+
+<table>
+  <tr>
+    <td width="40%"><strong>data-shortcode</strong></td>
+    <td>The instagram data-shortcode is found in every instagram photo URL.
+<br>
+For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>data-captioned</strong></td>
+    <td>Include the Instagram caption. <code>amp-instagram</code> will attempt to resize to the correct height including the caption.</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>common attributes</strong></td>
+    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
+  </tr>
+</table>
+
+## Validation
+
+See [amp-instagram rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-instagram/validator-amp-instagram.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-instagram/0.1/storybook/Basic.amp.js b/extensions/amp-instagram/0.1/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..be41f959272fe
--- /dev/null
+++ b/extensions/amp-instagram/0.1/storybook/Basic.amp.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, number, text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-instagram-0_1',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-instagram', version: '0.1'}],
+  },
+};
+
+export const _default = () => {
+  const width = number('width', 500);
+  const height = number('height', 600);
+  const shortcode = text('shortcode', 'B8QaZW4AQY_');
+  const captioned = boolean('captioned');
+  const layout = text('layout', 'fixed');
+
+  return (
+    <amp-instagram
+      data-shortcode={shortcode}
+      data-captioned={captioned}
+      width={width}
+      height={height}
+      layout={layout}
+    ></amp-instagram>
+  );
+};
diff --git a/extensions/amp-instagram/0.1/test/test-amp-instagram.js b/extensions/amp-instagram/0.1/test/test-amp-instagram.js
index 15c17c6acea77..aa8d15138f8ce 100644
--- a/extensions/amp-instagram/0.1/test/test-amp-instagram.js
+++ b/extensions/amp-instagram/0.1/test/test-amp-instagram.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import '../amp-instagram';
+import {AmpInstagram} from '../amp-instagram';
 
 describes.realWin(
   'amp-instagram',
@@ -59,27 +59,25 @@ describes.realWin(
             resolve();
           })
       );
-      ins.implementation_.getVsync = () => {
-        return {
-          mutate(cb) {
-            cb();
-          },
-          measure(cb) {
-            cb();
-          },
-          runPromise(task, state = {}) {
-            if (task.measure) {
-              task.measure(state);
-            }
-            if (task.mutate) {
-              task.mutate(state);
-            }
-            return Promise.resolve();
-          },
-        };
-      };
+      env.sandbox.stub(AmpInstagram.prototype, 'getVsync').returns({
+        mutate(cb) {
+          cb();
+        },
+        measure(cb) {
+          cb();
+        },
+        runPromise(task, state = {}) {
+          if (task.measure) {
+            task.measure(state);
+          }
+          if (task.mutate) {
+            task.mutate(state);
+          }
+          return Promise.resolve();
+        },
+      });
       doc.body.appendChild(ins);
-      await ins.build();
+      await ins.buildInternal();
       if (opt_beforeLayoutCallback) {
         opt_beforeLayoutCallback(ins);
       }
@@ -87,15 +85,6 @@ describes.realWin(
       return ins;
     }
 
-    function testImage(image) {
-      expect(image).to.not.be.null;
-      expect(image.getAttribute('src')).to.equal(
-        'https://www.instagram.com/p/fBwFP/media/?size=l'
-      );
-      expect(image.getAttribute('alt')).to.equal('Testing');
-      expect(image.getAttribute('referrerpolicy')).to.equal('origin');
-    }
-
     function testIframe(iframe) {
       expect(iframe).to.not.be.null;
       expect(iframe.src).to.equal(
@@ -117,66 +106,21 @@ describes.realWin(
     it('renders', async () => {
       const ins = await getIns('fBwFP');
       testIframe(ins.querySelector('iframe'));
-      testImage(ins.querySelector('img'));
     });
 
     it('renders captioned', async () => {
       const ins = await getIns('fBwFP', undefined, undefined, true);
       testIframeCaptioned(ins.querySelector('iframe'));
-      testImage(ins.querySelector('img'));
-    });
-
-    it('only sets src on placeholder after prerender', async () => {
-      let becomeVisible;
-      const visible = new Promise((resolve) => (becomeVisible = resolve));
-      const ins = await getIns(
-        'fBwFP',
-        undefined,
-        undefined,
-        undefined,
-        visible
-      );
-      expect(ins.querySelector('img').getAttribute('src')).to.be.null;
-      becomeVisible();
-      await visible;
-      expect(ins.querySelector('img').getAttribute('src')).to.equal(
-        'https://www.instagram.com/p/fBwFP/media/?size=l'
-      );
-    });
-
-    it('builds a placeholder image without inserting iframe', async () => {
-      return getIns('fBwFP', true, (ins) => {
-        const placeholder = ins.querySelector('[placeholder]');
-        const iframe = ins.querySelector('iframe');
-        expect(iframe).to.be.null;
-        expect(placeholder).to.not.have.display('');
-        testImage(placeholder.querySelector('img'));
-      }).then((ins) => {
-        const placeholder = ins.querySelector('[placeholder]');
-        const iframe = ins.querySelector('iframe');
-        ins.getVsync = () => {
-          return {
-            mutate: (fn) => fn(),
-          };
-        };
-        testIframe(iframe);
-        testImage(placeholder.querySelector('img'));
-        ins.implementation_.iframePromise_.then(() => {
-          expect(placeholder).to.be.have.display('none');
-        });
-      });
     });
 
     it('removes iframe after unlayoutCallback', async () => {
       const ins = await getIns('fBwFP');
-      const placeholder = ins.querySelector('[placeholder]');
+      const obj = await ins.getImpl(false);
       testIframe(ins.querySelector('iframe'));
-      const obj = ins.implementation_;
       obj.unlayoutCallback();
       expect(ins.querySelector('iframe')).to.be.null;
       expect(obj.iframe_).to.be.null;
       expect(obj.iframePromise_).to.be.null;
-      expect(placeholder).to.not.have.display('none');
     });
 
     it('renders responsively', async () => {
@@ -194,12 +138,12 @@ describes.realWin(
 
     it('resizes in response to messages from Instagram iframe', async () => {
       const ins = await getIns('fBwFP', true);
-      const impl = ins.implementation_;
+      const impl = await ins.getImpl(false);
       const iframe = ins.querySelector('iframe');
       const forceChangeHeight = env.sandbox.spy(impl, 'forceChangeHeight');
       const newHeight = 977;
       expect(iframe).to.not.be.null;
-      sendFakeMessage(ins, iframe, 'MEASURE', {
+      await sendFakeMessage(ins, iframe, 'MEASURE', {
         height: newHeight,
       });
       expect(forceChangeHeight).to.be.calledOnce;
@@ -207,8 +151,9 @@ describes.realWin(
       expect(forceChangeHeight.firstCall.args[0]).to.equal(newHeight);
     });
 
-    function sendFakeMessage(ins, iframe, type, details) {
-      ins.implementation_.handleInstagramMessages_({
+    async function sendFakeMessage(ins, iframe, type, details) {
+      const impl = await ins.getImpl(false);
+      impl.handleInstagramMessages_({
         origin: 'https://www.instagram.com',
         source: iframe.contentWindow,
         data: JSON.stringify({
diff --git a/extensions/amp-instagram/0.1/test/validator-amp-instagram.html b/extensions/amp-instagram/0.1/test/validator-amp-instagram.html
index 07c425d53f8cb..8d4abea1d26cb 100644
--- a/extensions/amp-instagram/0.1/test/validator-amp-instagram.html
+++ b/extensions/amp-instagram/0.1/test/validator-amp-instagram.html
@@ -20,7 +20,6 @@
   <title>Instagram examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
   <style amp-custom>
     body {
diff --git a/extensions/amp-instagram/0.1/test/validator-amp-instagram.out b/extensions/amp-instagram/0.1/test/validator-amp-instagram.out
index 6fa79cb9636fe..a521e97670ea3 100644
--- a/extensions/amp-instagram/0.1/test/validator-amp-instagram.out
+++ b/extensions/amp-instagram/0.1/test/validator-amp-instagram.out
@@ -21,7 +21,6 @@ PASS
 |    <title>Instagram examples</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
 |    <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
 |    <style amp-custom>
 |      body {
@@ -89,4 +88,4 @@ PASS
 |    </amp-instagram>
 |
 |  </body>
-|  </html>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-instagram/1.0/amp-instagram.css b/extensions/amp-instagram/1.0/amp-instagram.css
new file mode 100644
index 0000000000000..e9df863808267
--- /dev/null
+++ b/extensions/amp-instagram/1.0/amp-instagram.css
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/*
+ * Pre-upgrade:
+ * - display:block element
+ * - size-defined element
+ */
+amp-instagram {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Pre-upgrade: size-defining element - hide children. */
+amp-instagram:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc) {
+  display: none;
+  content-visibility: hidden;
+}
diff --git a/extensions/amp-instagram/1.0/amp-instagram.js b/extensions/amp-instagram/1.0/amp-instagram.js
new file mode 100644
index 0000000000000..b16ba46e8959d
--- /dev/null
+++ b/extensions/amp-instagram/1.0/amp-instagram.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {BaseElement} from './base-element';
+import {CSS} from '../../../build/amp-instagram-1.0.css';
+import {dict} from '../../../src/core/types/object';
+import {isExperimentOn} from '../../../src/experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-instagram';
+
+class AmpInstagram extends BaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-instagram'),
+      'expected global "bento" or specific "bento-instagram" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+
+  /** @override */
+  init() {
+    return dict({
+      'requestResize': (height) => {
+        this.forceChangeHeight(height);
+      },
+    });
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpInstagram, CSS);
+});
diff --git a/extensions/amp-instagram/1.0/base-element.js b/extensions/amp-instagram/1.0/base-element.js
new file mode 100644
index 0000000000000..c1b9bf3ebf814
--- /dev/null
+++ b/extensions/amp-instagram/1.0/base-element.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {Instagram} from './component';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+
+export class BaseElement extends PreactBaseElement {}
+
+/** @override */
+BaseElement['Component'] = Instagram;
+
+/** @override */
+BaseElement['loadable'] = true;
+
+/** @override */
+BaseElement['unloadOnPause'] = true;
+
+/** @override */
+BaseElement['props'] = {
+  'captioned': {attr: 'data-captioned'},
+  'shortcode': {attr: 'data-shortcode'},
+  'title': {attr: 'title'},
+};
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
diff --git a/extensions/amp-instagram/1.0/component.js b/extensions/amp-instagram/1.0/component.js
new file mode 100644
index 0000000000000..5a0f7e95b52ab
--- /dev/null
+++ b/extensions/amp-instagram/1.0/component.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {IframeEmbed} from '../../../src/preact/component/iframe';
+import {dict} from '../../../src/core/types/object';
+import {forwardRef} from '../../../src/preact/compat';
+import {getData} from '../../../src/event-helper';
+import {parseJson} from '../../../src/core/types/object/json';
+import {useCallback, useState} from '../../../src/preact';
+
+const NO_HEIGHT_STYLE = dict();
+const MATCHES_MESSAGING_ORIGIN = (origin) =>
+  origin === 'https://www.instagram.com';
+
+/**
+ * @param {!InstagramDef.Props} props
+ * @param {{current: ?InstagramDef.Api}} ref
+ * @return {PreactDef.Renderable}
+ */
+function InstagramWithRef(
+  {captioned, requestResize, shortcode, title = 'Instagram', ...rest},
+  ref
+) {
+  const [heightStyle, setHeightStyle] = useState(NO_HEIGHT_STYLE);
+  const [opacity, setOpacity] = useState(0);
+
+  const messageHandler = useCallback(
+    (event) => {
+      const data = parseJson(getData(event));
+      if (data['type'] == 'MEASURE' && data['details']) {
+        const height = data['details']['height'];
+        if (requestResize) {
+          requestResize(height);
+        }
+        setHeightStyle(dict({'height': height}));
+        setOpacity(1);
+      }
+    },
+    [requestResize]
+  );
+
+  return (
+    <IframeEmbed
+      allowTransparency
+      iframeStyle={{opacity}}
+      matchesMessagingOrigin={MATCHES_MESSAGING_ORIGIN}
+      messageHandler={messageHandler}
+      ref={ref}
+      src={
+        'https://www.instagram.com/p/' +
+        encodeURIComponent(shortcode) +
+        '/embed/' +
+        (captioned ? 'captioned/' : '') +
+        '?cr=1&v=12'
+      }
+      title={title}
+      wrapperStyle={heightStyle}
+      {...rest}
+    />
+  );
+}
+
+const Instagram = forwardRef(InstagramWithRef);
+Instagram.displayName = 'Instagram'; // Make findable for tests.
+export {Instagram};
diff --git a/extensions/amp-instagram/1.0/component.type.js b/extensions/amp-instagram/1.0/component.type.js
new file mode 100644
index 0000000000000..e702c8ce39dfa
--- /dev/null
+++ b/extensions/amp-instagram/1.0/component.type.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/** @const */
+var InstagramDef = {};
+
+/**
+ * @typedef {{
+ *   shortcode: string,
+ *   captioned: (boolean|undefined),
+ *   title: (string|undefined),
+ *   requestResize: (function(number):*|undefined),
+ *   loading: (string|undefined),
+ *   onReadyState: (function(string, *=)|undefined),
+ * }}
+ */
+InstagramDef.Props;
+
+/** @constructor */
+InstagramDef.Api = function () {};
+
+/** @type {string} */
+InstagramDef.Api.prototype.readyState;
diff --git a/extensions/amp-instagram/1.0/package.json b/extensions/amp-instagram/1.0/package.json
new file mode 100644
index 0000000000000..7bf0fe5fd3ec7
--- /dev/null
+++ b/extensions/amp-instagram/1.0/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-instagram",
+  "version": "VERSION",
+  "description": "AMP Instagram Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "./dist/component.js",
+  "module": "./dist/component-preact.module.js",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "./dist/component-preact.module.js",
+      "require": "./dist/component-preact.js"
+    },
+    "./react": {
+      "import": "./dist/component-react.module.js",
+      "require": "./dist/component-react.js"
+    }
+  },
+  "files": ["dist/*", "react.js"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml.git",
+    "directory": "extensions/amp-instagram/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0",
+  "peerDependencies": {
+    "preact": "^10.2.1",
+    "react": "^17.0.0"
+  }
+}
diff --git a/extensions/amp-instagram/1.0/react.js b/extensions/amp-instagram/1.0/react.js
new file mode 100644
index 0000000000000..0b2957c35c38d
--- /dev/null
+++ b/extensions/amp-instagram/1.0/react.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-env node */
+// eslint-disable-next-line local/no-module-exports
+module.exports = require('./dist/component-react');
diff --git a/extensions/amp-instagram/1.0/storybook/Basic.amp.js b/extensions/amp-instagram/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..db69809e0da20
--- /dev/null
+++ b/extensions/amp-instagram/1.0/storybook/Basic.amp.js
@@ -0,0 +1,86 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, number, text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-instagram-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [
+      {name: 'amp-instagram', version: '1.0'},
+      {name: 'amp-accordion', version: '1.0'},
+    ],
+    experiments: ['bento'],
+  },
+};
+
+export const _default = () => {
+  const width = number('width', 500);
+  const height = number('height', 600);
+  const shortcode = text('shortcode', 'B8QaZW4AQY_');
+  const captioned = boolean('captioned');
+  const layout = text('layout', 'fixed');
+
+  return (
+    <amp-instagram
+      data-shortcode={shortcode}
+      data-captioned={captioned}
+      width={width}
+      height={height}
+      layout={layout}
+    ></amp-instagram>
+  );
+};
+
+export const InsideAccordion = () => {
+  const shortcode = text('shortcode', 'Bp4I3hRhd_v');
+  const width = number('width', 300);
+  const height = number('height', 200);
+  return (
+    <amp-accordion expand-single-section>
+      <section expanded>
+        <h2>Post</h2>
+        <div>
+          <amp-instagram
+            data-shortcode={shortcode}
+            width={width}
+            height={height}
+          ></amp-instagram>
+        </div>
+      </section>
+    </amp-accordion>
+  );
+};
+
+export const InsideDetails = () => {
+  const shortcode = text('shortcode', 'Bp4I3hRhd_v');
+  const width = number('width', 300);
+  const height = number('height', 200);
+  return (
+    <details open>
+      <summary>Post</summary>
+      <amp-instagram
+        data-shortcode={shortcode}
+        width={width}
+        height={height}
+      ></amp-instagram>
+    </details>
+  );
+};
diff --git a/extensions/amp-instagram/1.0/storybook/Basic.js b/extensions/amp-instagram/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..13d8a61c7fb8c
--- /dev/null
+++ b/extensions/amp-instagram/1.0/storybook/Basic.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionSection,
+} from '../../../amp-accordion/1.0/component';
+import {Instagram} from '../component';
+import {boolean, number, text, withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'Instagram',
+  component: Instagram,
+  decorators: [withKnobs],
+};
+
+export const _default = () => {
+  const width = number('width', 500);
+  const height = number('height', 600);
+  const shortcode = text('shortcode', 'B8QaZW4AQY_');
+  const captioned = boolean('captioned');
+
+  return (
+    <Instagram
+      shortcode={shortcode}
+      style={{width, height}}
+      captioned={captioned}
+      alt="AMP Instagram Storybook Preact Example"
+    ></Instagram>
+  );
+};
+
+export const InsideAccordion = () => {
+  const shortcode = text('shortcode', 'Bp4I3hRhd_v');
+  const width = number('width', 500);
+  const height = number('height', 600);
+  return (
+    <Accordion expandSingleSection>
+      <AccordionSection key={1} expanded={true}>
+        <AccordionHeader>
+          <h2>Post</h2>
+        </AccordionHeader>
+        <AccordionContent>
+          <Instagram
+            shortcode={shortcode}
+            style={{width, height}}
+            alt="AMP Instagram Storybook Preact Example"
+          ></Instagram>
+        </AccordionContent>
+      </AccordionSection>
+    </Accordion>
+  );
+};
diff --git a/extensions/amp-instagram/1.0/test/test-amp-instagram.js b/extensions/amp-instagram/1.0/test/test-amp-instagram.js
new file mode 100644
index 0000000000000..79fe0a55efc17
--- /dev/null
+++ b/extensions/amp-instagram/1.0/test/test-amp-instagram.js
@@ -0,0 +1,113 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import '../amp-instagram';
+import {createElementWithAttributes} from '../../../../src/dom';
+import {doNotLoadExternalResourcesInTest} from '../../../../testing/iframe';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-instagram-v1.0',
+  {
+    amp: {
+      extensions: ['amp-instagram:1.0'],
+    },
+  },
+  (env) => {
+    let win, doc;
+    let element;
+
+    const waitForRender = async () => {
+      await element.buildInternal();
+      const loadPromise = element.layoutCallback();
+      const shadow = element.shadowRoot;
+      await waitFor(() => shadow.querySelector('iframe'), 'iframe mounted');
+      await loadPromise;
+    };
+
+    beforeEach(() => {
+      win = env.win;
+      doc = win.document;
+      toggleExperiment(win, 'bento-instagram', true, true);
+      // Override global window here because Preact uses global `createElement`.
+      doNotLoadExternalResourcesInTest(window, env.sandbox);
+    });
+
+    it('renders', async () => {
+      element = createElementWithAttributes(win.document, 'amp-instagram', {
+        'data-shortcode': 'B8QaZW4AQY_',
+        'amp': true,
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      expect(element.shadowRoot.querySelector('iframe').src).to.equal(
+        'https://www.instagram.com/p/B8QaZW4AQY_/embed/?cr=1&v=12'
+      );
+    });
+
+    it('renders with caption', async () => {
+      element = createElementWithAttributes(win.document, 'amp-instagram', {
+        'data-shortcode': 'B8QaZW4AQY_',
+        'data-captioned': true,
+        'amp': true,
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      expect(element.shadowRoot.querySelector('iframe').src).to.equal(
+        'https://www.instagram.com/p/B8QaZW4AQY_/embed/captioned/?cr=1&v=12'
+      );
+    });
+
+    it("container's height is changed", async () => {
+      const initialHeight = 300;
+      element = createElementWithAttributes(win.document, 'amp-instagram', {
+        'data-shortcode': 'B8QaZW4AQY_',
+        'amp': true,
+        'height': initialHeight,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      const impl = await element.getImpl(false);
+      const forceChangeHeightStub = env.sandbox.stub(impl, 'forceChangeHeight');
+
+      const mockEvent = new CustomEvent('message');
+      mockEvent.origin = 'https://www.instagram.com';
+      mockEvent.data = JSON.stringify({
+        'type': 'MEASURE',
+        'details': {
+          'height': 1000,
+        },
+      });
+      mockEvent.source =
+        element.shadowRoot.querySelector('iframe').contentWindow;
+      win.dispatchEvent(mockEvent);
+
+      expect(forceChangeHeightStub).to.be.calledOnce.calledWith(1000);
+    });
+  }
+);
diff --git a/extensions/amp-instagram/1.0/test/test-component.js b/extensions/amp-instagram/1.0/test/test-component.js
new file mode 100644
index 0000000000000..088cb49f61eca
--- /dev/null
+++ b/extensions/amp-instagram/1.0/test/test-component.js
@@ -0,0 +1,169 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Instagram} from '../component';
+import {WithAmpContext} from '../../../../src/preact/context';
+import {createRef} from '../../../../src/preact';
+import {mount} from 'enzyme';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.sandboxed('Instagram preact component v1.0', {}, (env) => {
+  it('Normal render', () => {
+    const wrapper = mount(
+      <Instagram
+        shortcode="B8QaZW4AQY_"
+        style={{
+          'width': 500,
+          'height': 600,
+        }}
+      />
+    );
+
+    const iframe = wrapper.find('iframe');
+
+    expect(iframe.prop('src')).to.equal(
+      'https://www.instagram.com/p/B8QaZW4AQY_/embed/?cr=1&v=12'
+    );
+    expect(wrapper.find('iframe').prop('style').width).to.equal('100%');
+    expect(wrapper.find('iframe').prop('style').height).to.equal('100%');
+    expect(wrapper.find('div')).to.have.lengthOf(2);
+  });
+
+  it('Render with caption', () => {
+    const wrapper = mount(
+      <Instagram
+        shortcode="B8QaZW4AQY_"
+        captioned
+        style={{'width': 500, 'height': 705}}
+      />
+    );
+    expect(wrapper.find('iframe').prop('src')).to.equal(
+      'https://www.instagram.com/p/B8QaZW4AQY_/embed/captioned/?cr=1&v=12'
+    );
+    expect(wrapper.find('iframe').prop('style').width).to.equal('100%');
+    expect(wrapper.find('iframe').prop('style').height).to.equal('100%');
+    expect(wrapper.find('div')).to.have.lengthOf(2);
+  });
+
+  it('Resize prop is called', () => {
+    const requestResizeSpy = env.sandbox.spy();
+    const wrapper = mount(
+      <Instagram
+        shortcode="B8QaZW4AQY_"
+        captioned
+        style={{'width': 500, 'height': 705}}
+        requestResize={requestResizeSpy}
+      />
+    );
+
+    const mockEvent = createMockEvent();
+    mockEvent.source = wrapper
+      .getDOMNode()
+      .querySelector('iframe').contentWindow;
+    window.dispatchEvent(mockEvent);
+
+    expect(requestResizeSpy).to.have.been.calledOnce;
+  });
+
+  it('Height is changed', async () => {
+    const wrapper = mount(
+      <Instagram
+        shortcode="B8QaZW4AQY_"
+        style={{'width': 500, 'height': 600}}
+      />
+    );
+
+    const mockEvent = createMockEvent();
+    mockEvent.source = wrapper
+      .getDOMNode()
+      .querySelector('iframe').contentWindow;
+    window.dispatchEvent(mockEvent);
+
+    wrapper.update();
+
+    await waitFor(
+      () => wrapper.find('div').at(0).prop('style').height == 1000,
+      'Height is not changed'
+    );
+
+    expect(wrapper.find('div').at(0).prop('style').height).to.equal(1000);
+  });
+
+  it('load event is dispatched', async () => {
+    const ref = createRef();
+    const onReadyState = env.sandbox.spy();
+    const wrapper = mount(
+      <Instagram
+        ref={ref}
+        shortcode="B8QaZW4AQY_"
+        style={{'width': 500, 'height': 600}}
+        onReadyState={onReadyState}
+      />
+    );
+
+    let api = ref.current;
+    expect(api.readyState).to.equal('loading');
+    expect(onReadyState).to.not.be.called;
+
+    await wrapper.find('iframe').invoke('onLoad')();
+    api = ref.current;
+    expect(api.readyState).to.equal('complete');
+    expect(onReadyState).to.be.calledOnce.calledWith('complete');
+  });
+
+  it('should reset iframe on pause', () => {
+    const ref = createRef();
+    const wrapper = mount(
+      <WithAmpContext playable={true}>
+        <Instagram
+          ref={ref}
+          shortcode="B8QaZW4AQY_"
+          style={{'width': 500, 'height': 600}}
+        />
+      </WithAmpContext>
+    );
+    expect(wrapper.find('iframe')).to.have.lengthOf(1);
+
+    const iframe = wrapper.find('iframe').getDOMNode();
+    let iframeSrc = iframe.src;
+    const iframeSrcSetterSpy = env.sandbox.spy();
+    Object.defineProperty(iframe, 'src', {
+      get() {
+        return iframeSrc;
+      },
+      set(value) {
+        iframeSrc = value;
+        iframeSrcSetterSpy(value);
+      },
+    });
+
+    wrapper.setProps({playable: false});
+    expect(iframeSrcSetterSpy).to.be.calledOnce;
+  });
+});
+
+function createMockEvent() {
+  const mockEvent = new CustomEvent('message');
+  mockEvent.origin = 'https://www.instagram.com';
+  mockEvent.data = JSON.stringify({
+    'type': 'MEASURE',
+    'details': {
+      'height': 1000,
+    },
+  });
+  return mockEvent;
+}
diff --git a/extensions/amp-instagram/1.0/test/validator-amp-instagram.html b/extensions/amp-instagram/1.0/test/validator-amp-instagram.html
new file mode 100644
index 0000000000000..84ec88d4c3bf7
--- /dev/null
+++ b/extensions/amp-instagram/1.0/test/validator-amp-instagram.html
@@ -0,0 +1,90 @@
+<!--
+  Copyright 2021 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.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Instagram examples</title>
+  <link rel="canonical" href="amps.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-1.0.js"></script>
+  <style amp-custom>
+    body {
+      background-color: white;
+      padding: 20px;
+    }
+
+    amp-instagram [overflow] {
+      position: absolute;
+      bottom: 0;
+      text-align: center;
+      background: #444;
+      color: white;
+      padding: 5px;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+
+
+
+  <h2>Instagram</h2>
+
+  <amp-instagram
+      data-shortcode="fBwFP"
+      width="381"
+      height="381"
+      layout="responsive">
+  </amp-instagram>
+
+  <h2>Instagram with Frame</h2>
+  <amp-instagram
+      data-shortcode="BR3g5NDBvBu"
+      data-default-framing
+      width="500"
+      height="500"
+      layout="responsive">
+  </amp-instagram>
+
+  <h2>Instagram with Frame, Caption and Overflow Element</h2>
+  <amp-instagram
+      data-shortcode="BR3g5NDBvBu"
+      data-captioned
+      data-default-framing
+      width="500"
+      height="500"
+      layout="responsive">
+      <div overflow>Show Caption</div>
+  </amp-instagram>
+
+  <h2>Instagram Default Layout</h2>
+  <amp-instagram
+      data-shortcode="fBwFP"
+      width="381"
+      height="381">
+  </amp-instagram>
+
+  <h3>Instagram Video</h3>
+  <amp-instagram data-shortcode="ftMW4rmDM_"
+                 width="300"
+                 height="300"
+                 layout="responsive">
+  </amp-instagram>
+
+</body>
+</html>
diff --git a/extensions/amp-instagram/1.0/test/validator-amp-instagram.out b/extensions/amp-instagram/1.0/test/validator-amp-instagram.out
new file mode 100644
index 0000000000000..38ecb80a2f82c
--- /dev/null
+++ b/extensions/amp-instagram/1.0/test/validator-amp-instagram.out
@@ -0,0 +1,91 @@
+PASS
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <title>Instagram examples</title>
+|    <link rel="canonical" href="amps.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-1.0.js"></script>
+|    <style amp-custom>
+|      body {
+|        background-color: white;
+|        padding: 20px;
+|      }
+|
+|      amp-instagram [overflow] {
+|        position: absolute;
+|        bottom: 0;
+|        text-align: center;
+|        background: #444;
+|        color: white;
+|        padding: 5px;
+|      }
+|    </style>
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|
+|
+|
+|    <h2>Instagram</h2>
+|
+|    <amp-instagram
+|        data-shortcode="fBwFP"
+|        width="381"
+|        height="381"
+|        layout="responsive">
+|    </amp-instagram>
+|
+|    <h2>Instagram with Frame</h2>
+|    <amp-instagram
+|        data-shortcode="BR3g5NDBvBu"
+|        data-default-framing
+|        width="500"
+|        height="500"
+|        layout="responsive">
+|    </amp-instagram>
+|
+|    <h2>Instagram with Frame, Caption and Overflow Element</h2>
+|    <amp-instagram
+|        data-shortcode="BR3g5NDBvBu"
+|        data-captioned
+|        data-default-framing
+|        width="500"
+|        height="500"
+|        layout="responsive">
+|        <div overflow>Show Caption</div>
+|    </amp-instagram>
+|
+|    <h2>Instagram Default Layout</h2>
+|    <amp-instagram
+|        data-shortcode="fBwFP"
+|        width="381"
+|        height="381">
+|    </amp-instagram>
+|
+|    <h3>Instagram Video</h3>
+|    <amp-instagram data-shortcode="ftMW4rmDM_"
+|                   width="300"
+|                   height="300"
+|                   layout="responsive">
+|    </amp-instagram>
+|
+|  </body>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-instagram/OWNERS b/extensions/amp-instagram/OWNERS
index f51b7947fc8ae..277cef29f2956 100644
--- a/extensions/amp-instagram/OWNERS
+++ b/extensions/amp-instagram/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}, {name: 'src-code'}],
+      owners: [{name: 'ampproject/wg-components'}, {name: 'src-code'}],
     },
   ],
 }
diff --git a/extensions/amp-instagram/amp-instagram.md b/extensions/amp-instagram/amp-instagram.md
index 953beb694779f..efbb4d8ce7e0d 100644
--- a/extensions/amp-instagram/amp-instagram.md
+++ b/extensions/amp-instagram/amp-instagram.md
@@ -4,10 +4,12 @@ formats:
   - websites
 teaser:
   text: Displays an Instagram embed.
+experimental: true
+bento: true
 ---
 
 <!---
-Copyright 2015 The AMP HTML Authors. All Rights Reserved.
+Copyright 2021 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.
@@ -49,6 +51,53 @@ If the Instagram is not square you will need to enter the actual dimensions of t
 
 When using non-responsive layout you will need to account for the extra space added for the "instagram chrome" around the image. This is currently 48px above and below the image and 8px on the sides.
 
+### Standalone use outside valid AMP documents
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+#### Example
+
+The example below demonstrates `amp-instagram` component in standalone use.
+
+[example preview="top-frame" playground="false"]
+
+```html
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-instagram-1.0.css">
+  <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-1.0.js"></script>
+  <style>
+    amp-instagram {
+      aspect-ratio: 1/2;
+    }
+  </style>
+</head>
+<amp-instagram data-shortcode="CKXYAzuj7TE"></amp-instagram>
+```
+
+[/example]
+
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-instagram-1.0.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
+
+**Container type**
+
+The `amp-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):
+
+```css
+amp-instagram {
+  height: 500px;
+  width: 100px;
+}
+```
+
 ## Attributes
 
 <table>
@@ -67,7 +116,3 @@ For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-sh
     <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
   </tr>
 </table>
-
-## Validation
-
-See [amp-instagram rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-instagram/validator-amp-instagram.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-instagram/validator-amp-instagram.protoascii b/extensions/amp-instagram/validator-amp-instagram.protoascii
index 4a462662c3925..13096a3aad533 100644
--- a/extensions/amp-instagram/validator-amp-instagram.protoascii
+++ b/extensions/amp-instagram/validator-amp-instagram.protoascii
@@ -14,11 +14,26 @@
 # limitations under the license.
 #
 
-tags: {  # amp-instagram
+tags: {  # amp-instagram 1.0
   html_format: AMP
   tag_name: "SCRIPT"
+  satisfies: "amp-instagram 1.0"
+  excludes: "amp-instagram 0.1"
   extension_spec: {
     name: "amp-instagram"
+    version_name: "v1.0"
+    version: "1.0"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # amp-instagram 0.1 and latest
+  html_format: AMP
+  tag_name: "SCRIPT"
+  satisfies: "amp-instagram 0.1"
+  excludes: "amp-instagram 1.0"
+  extension_spec: {
+    name: "amp-instagram"
+    version_name: "v0.1"
     version: "0.1"
     version: "latest"
     requires_usage: EXEMPTED
diff --git a/extensions/amp-install-serviceworker/0.1/amp-install-serviceworker.js b/extensions/amp-install-serviceworker/0.1/amp-install-serviceworker.js
index 5087cbe798042..f5900bc991971 100644
--- a/extensions/amp-install-serviceworker/0.1/amp-install-serviceworker.js
+++ b/extensions/amp-install-serviceworker/0.1/amp-install-serviceworker.js
@@ -20,11 +20,10 @@ import {
   removeElement,
 } from '../../../src/dom';
 import {dev, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getMode} from '../../../src/mode';
 import {listen} from '../../../src/event-helper';
 import {removeFragment} from '../../../src/url';
-import {startsWith} from '../../../src/string';
 import {toggle} from '../../../src/style';
 import {urls} from '../../../src/config';
 
@@ -401,7 +400,7 @@ function sendAmpScriptToSwOnFirstVisit(win, registration) {
       .getEntriesByType('resource')
       .filter(
         (item) =>
-          item.initiatorType === 'script' && startsWith(item.name, urls.cdn)
+          item.initiatorType === 'script' && item.name.startsWith(urls.cdn)
       )
       .map((script) => script.name);
     const activeSW = registration.active;
diff --git a/extensions/amp-install-serviceworker/0.1/test/test-amp-install-serviceworker.js b/extensions/amp-install-serviceworker/0.1/test/test-amp-install-serviceworker.js
index cf4291a1046cf..a9bf6e8166dfb 100644
--- a/extensions/amp-install-serviceworker/0.1/test/test-amp-install-serviceworker.js
+++ b/extensions/amp-install-serviceworker/0.1/test/test-amp-install-serviceworker.js
@@ -285,10 +285,11 @@ describes.realWin(
       }
     );
 
-    it('should be ok without service worker.', () => {
+    it('should be ok without service worker.', async () => {
       const install = doc.createElement('amp-install-serviceworker');
-      const implementation = install.implementation_;
-      expect(implementation).to.exist;
+      install.setAttribute('layout', 'nodisplay');
+      doc.body.appendChild(install);
+      const implementation = await install.getImpl(false);
       install.setAttribute('src', 'https://example.com/sw.js');
       implementation.win = {
         location: {
@@ -300,10 +301,11 @@ describes.realWin(
       expect(maybeInstallUrlRewriteStub).to.be.calledOnce;
     });
 
-    it('should do nothing with non-matching origins', () => {
+    it('should do nothing with non-matching origins', async () => {
       const install = doc.createElement('amp-install-serviceworker');
-      const implementation = install.implementation_;
-      expect(implementation).to.exist;
+      install.setAttribute('layout', 'nodisplay');
+      doc.body.appendChild(install);
+      const implementation = await install.getImpl(false);
       install.setAttribute('src', 'https://other-origin.com/sw.js');
       const p = new Promise(() => {});
       implementation.win = {
@@ -324,10 +326,11 @@ describes.realWin(
       expect(install.children).to.have.length(0);
     });
 
-    it('should do nothing on proxy without iframe URL', () => {
+    it('should do nothing on proxy without iframe URL', async () => {
       const install = doc.createElement('amp-install-serviceworker');
-      const implementation = install.implementation_;
-      expect(implementation).to.exist;
+      install.setAttribute('layout', 'nodisplay');
+      doc.body.appendChild(install);
+      const implementation = await install.getImpl(false);
       install.setAttribute('src', 'https://cdn.ampproject.org/sw.js');
       let calledSrc;
       const p = new Promise(() => {});
@@ -516,7 +519,7 @@ describes.fakeWin(
 
     describe('install conditions', () => {
       beforeEach(() => {
-        window.sandbox.stub(implementation, 'preloadShell_');
+        env.sandbox.stub(implementation, 'preloadShell_');
       });
 
       it('should install rewriter', () => {
@@ -607,7 +610,7 @@ describes.fakeWin(
       let preloadStub;
 
       beforeEach(() => {
-        mutateElementStub = window.sandbox
+        mutateElementStub = env.sandbox
           .stub(implementation, 'mutateElement')
           .callsFake((callback) => callback());
         preloadStub = env.sandbox.stub(implementation, 'preloadShell_');
@@ -680,7 +683,7 @@ describes.fakeWin(
       let origHref;
 
       beforeEach(() => {
-        window.sandbox.stub(implementation, 'preloadShell_');
+        env.sandbox.stub(implementation, 'preloadShell_');
         implementation.maybeInstallUrlRewrite_();
         rewriter = implementation.urlRewriter_;
         anchor = win.document.createElement('a');
diff --git a/extensions/amp-install-serviceworker/OWNERS b/extensions/amp-install-serviceworker/OWNERS
index accecce2681ed..027ae5743f5e2 100644
--- a/extensions/amp-install-serviceworker/OWNERS
+++ b/extensions/amp-install-serviceworker/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-install-serviceworker/amp-install-serviceworker.md b/extensions/amp-install-serviceworker/amp-install-serviceworker.md
index e8c7dc08bc230..2c13427812cb8 100644
--- a/extensions/amp-install-serviceworker/amp-install-serviceworker.md
+++ b/extensions/amp-install-serviceworker/amp-install-serviceworker.md
@@ -25,15 +25,23 @@ limitations under the License.
 
 # amp-install-serviceworker
 
-## Behavior
+## Usage
 
-Registers the service worker given by the `src` attribute if the AMP document is loaded from the same origin as the given service worker URL. If the `data-iframe-src` is set, loads that URL as an iframe when the AMP document is served from an AMP cache. This allows ServiceWorker installation from the AMP cache, so that the service worker is installed by the time users visit the origin site.
+Registers the service worker given by the `src` attribute if the AMP document is
+loaded from the same origin as the given service worker URL. If the
+`data-iframe-src` is set, loads that URL as an iframe when the AMP document is
+served from an AMP cache. This allows ServiceWorker installation from the AMP
+cache, so that the service worker is installed by the time users visit the
+origin site.
 
-This service worker runs whenever the AMP file is served from the origin where you publish the AMP file. On documents served from an AMP cache, the service worker will be installed in the background but will not execute or affect the page's behavior.
+This service worker runs whenever the AMP file is served from the origin where
+you publish the AMP file. On documents served from an AMP cache, the service
+worker will be installed in the background but will not execute or affect the
+page's behavior.
 
-See [this article](https://medium.com/@cramforce/amps-and-websites-in-the-age-of-the-service-worker-8369841dc962) for how ServiceWorkers can help with making the AMP experience awesome with ServiceWorkers.
-
-Example:
+See [this article](https://medium.com/@cramforce/amps-and-websites-in-the-age-of-the-service-worker-8369841dc962)
+for how ServiceWorkers can help with making the AMP experience awesome with
+ServiceWorkers.
 
 ```html
 <amp-install-serviceworker
@@ -44,51 +52,18 @@ Example:
 </amp-install-serviceworker>
 ```
 
-## Attributes
+### Shell URL rewrite<a name="shell-url-rewrite"></a>
+
+When service workers are not available or not yet active, it's possible to
+configure URL rewrite to direct navigations to the shell. This way, for example,
+AMP Runtime can redirect navigation to the "shell" instead of a "leaf" AMP
+document.
 
-<table>
-  <tr>
-    <td width="40%"><strong>src (required)</strong></td>
-    <td>The URL of the ServiceWorker to register, which must use <code>https</code> protocol.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-iframe-src (optional)</strong></td>
-    <td>The URL of an HTML document that installs a ServiceWorker. The URL must use <code>https</code> protocol.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-scope (optional)</strong></td>
-    <td>The scope of the service worker to be installed.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>layout</strong></td>
-    <td>Must have the value <code>nodisplay</code>.</td>
-  </tr>
-  <tr>
-     <td width="40%"><strong>data-no-service-worker-fallback-url-match</strong></td>
-     <td><p>The is a regular expression that matches URLs to be rewritten to navigate via shell for no-service-worker fallback. See <a href="#shell-url-rewrite">Shell URL rewrite</a> section for more details. The value must be a valid JavaScript RegExp string. For example:</p>
-      <ul>
-        <li><code>amp.html</code></li>
-        <li><code>.*amp</code></li>
-        <li><code>.*\.amp\.html</code></li>
-        <li><code>.*\/amp$</code></li>
-      </ul>
-    </td>
-   </tr>
-   <tr>
-     <td width="40%"><strong>data-no-service-worker-fallback-shell-url</strong></td>
-     <td>The URL to the shell to use to rewrite URL navigations for no-service-worker fallback. See <a href="#shell-url-rewrite">Shell URL rewrite</a> section for more details. The value must be an URL on the same origin as the AMP document itself.</td>
-   </tr>
-</table>
-
-## Shell URL rewrite
-
-When service workers are not available or not yet active, it's possible to configure URL rewrite to direct navigations to the shell. This way, for example, AMP Runtime can redirect navigation to the "shell" instead of
-a "leaf" AMP document.
-
-This fallback is only used when the document is opened on the source origin, and NOT on proxy origin.
-
-The URL rewrite is configured using `data-no-service-worker-fallback-url-match` and `data-no-service-worker-fallback-shell-url`
-attributes as following:
+This fallback is only used when the document is opened on the source origin, and
+NOT on proxy origin.
+
+The URL rewrite is configured using `data-no-service-worker-fallback-url-match`
+and `data-no-service-worker-fallback-shell-url` attributes as following:
 
 ```html
 <amp-install-serviceworker
@@ -102,19 +77,27 @@ attributes as following:
 
 Where:
 
-- `data-no-service-worker-fallback-shell-url` specifies the link for AMP+PWA shell. It's required to be on the source origin as the AMP document.
-- `data-no-service-worker-fallback-url-match` is a JavaScript regular expression that describes how to match “in-shell” links vs non-in-shell links.
-- Both of these attributes must be present to trigger URL rewrite.
+-   `data-no-service-worker-fallback-shell-url` specifies the link for AMP+PWA
+    shell. It's required to be on the source origin as the AMP document.
+-   `data-no-service-worker-fallback-url-match` is a JavaScript regular expression
+    that describes how to match "in-shell" links vs non-in-shell links.
+-   Both of these attributes must be present to trigger URL rewrite.
 
 URL rewrite works as following:
 
-1.  The document provides a configuration that explains how to navigate within the shell.
-2.  AMP Runtime tries to install the service worker.
-3.  If service worker is not installed (not installable), as a fallback AMP Runtime will preload the shell page via a hidden iframe.
-4.  AMP Runtime will intercept the “in-shell” navigations (which will often be AMP-to-AMP navigations) and if the service worker is not running, rewrite the navigation URL to proceed to the “shell”-based URL.
-5.  The shell will startup and run the requested navigation via its router. Typically the shell will immediately execute history.replaceState(href).
+1. The document provides a configuration that explains how to navigate within
+   the shell.
+1. AMP Runtime tries to install the service worker.
+1. If service worker is not installed (not installable), as a fallback AMP
+   Runtime will preload the shell page via a hidden iframe.
+1. AMP Runtime will intercept the "in-shell" navigations (which will often be
+   AMP-to-AMP navigations) and if the service worker is not running, rewrite the
+   navigation URL to proceed to the "shell"-based URL.
+1. The shell will startup and run the requested navigation via its router.
+   Typically the shell will immediately execute `history.replaceState(href)`.
 
-A URL is rewritten in the form `shell-url#href={encodeURIComponent(href)}`. For example:
+A URL is rewritten in the form `shell-url#href={encodeURIComponent(href)}`. For
+example:
 
 ```http
 https://pub.com/doc.amp.html
@@ -122,7 +105,8 @@ https://pub.com/doc.amp.html
 https://pub.com/shell#href=%2Fdoc.amp.html
 ```
 
-Besides rewriting URLs, `amp-install-serviceworker` also will try to preload the shell. This is done by creating an iframe with `#preload` fragment:
+Besides rewriting URLs, `amp-install-serviceworker` also will try to preload the
+shell. This is done by creating an iframe with `#preload` fragment:
 
 ```html
 <iframe
@@ -132,8 +116,47 @@ Besides rewriting URLs, `amp-install-serviceworker` also will try to preload the
 ></iframe>
 ```
 
-For the preload to be effective, of course, the shell response must have appropriate HTTP cache headers.
+For the preload to be effective, of course, the shell response must have
+appropriate HTTP cache headers.
+
+## Attributes
+
+### `src` (required)
+
+The URL of the ServiceWorker to register, which must use `https` protocol.
+
+### `data-iframe-src`
+
+The URL of an HTML document that installs a ServiceWorker. The URL must use `https` protocol. This attribute is necessary if the AMP page is going to be served from an AMP Cache.
+
+### `data-scope`
+
+The scope of the service worker to be installed.
+
+### `layout`
+
+Must have the value `nodisplay`.
+
+### `data-no-service-worker-fallback-url-match`
+
+The is a regular expression that matches URLs to be rewritten to navigate via
+shell for no-service-worker fallback. See [Shell URL rewrite](#shell-url-rewrite)
+section for more details. The value must be a valid JavaScript RegExp string.
+For example:
+
+<ul>
+  <li><code>amp.html</code></li>
+  <li><code>.*amp</code></li>
+  <li><code>.*\.amp\.html</code></li>
+  <li><code>.*\/amp$</code></li>
+</ul>
+
+### `data-no-service-worker-fallback-shell-url`
+
+The URL to the shell to use to rewrite URL navigations for no-service-worker
+fallback. See [Shell URL rewrite](#shell-url-rewrite) section for more details.
+The value must be an URL on the same origin as the AMP document itself.
 
 ## Validation
 
-See [amp-install-serviceworker rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-install-serviceworker/validator-amp-install-serviceworker.protoascii) in the AMP validator specification.
+See [amp-install-serviceworker rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-install-serviceworker/validator-amp-install-serviceworker.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-intersection-observer-polyfill/0.1/amp-intersection-observer-polyfill.js b/extensions/amp-intersection-observer-polyfill/0.1/amp-intersection-observer-polyfill.js
index c87b566248ea6..3d4f230b01a57 100644
--- a/extensions/amp-intersection-observer-polyfill/0.1/amp-intersection-observer-polyfill.js
+++ b/extensions/amp-intersection-observer-polyfill/0.1/amp-intersection-observer-polyfill.js
@@ -17,7 +17,7 @@
 import {installIntersectionObserver} from 'intersection-observer/intersection-observer.install';
 import {maybeSetupCrossOriginObserver} from './cross-origin-observer';
 import {registerServiceBuilder} from '../../../src/service';
-import {upgradePolyfill} from '../../../src/polyfillstub/intersection-observer-stub';
+import {upgradePolyfill} from '../../../src/polyfills/stubs/intersection-observer-stub';
 
 const TAG = 'amp-intersection-observer-polyfill';
 
diff --git a/extensions/amp-intersection-observer-polyfill/0.1/cross-origin-observer.js b/extensions/amp-intersection-observer-polyfill/0.1/cross-origin-observer.js
index 8c823d68e2362..cd44d31feaf25 100644
--- a/extensions/amp-intersection-observer-polyfill/0.1/cross-origin-observer.js
+++ b/extensions/amp-intersection-observer-polyfill/0.1/cross-origin-observer.js
@@ -18,7 +18,7 @@ import {MessageType} from '../../../src/3p-frame-messaging';
 import {WindowInterface} from '../../../src/window-interface';
 import {getMode} from '../../../src/mode';
 import {iframeMessagingClientFor} from '../../../src/inabox/inabox-iframe-messaging-client';
-import {layoutRectLtwh} from '../../../src/layout-rect';
+import {layoutRectLtwh} from '../../../src/core/math/layout-rect';
 
 /**
  * Setup cross-origin iframe polyfill for AMP iframes, such as inabox.
@@ -44,12 +44,14 @@ export function maybeSetupCrossOriginObserver(win) {
     MessageType.SEND_POSITIONS,
     MessageType.POSITION,
     (data) => {
-      const boundingClientRect = /** @type {!../../../src/layout-rect.LayoutRectDef} */ (data[
-        'targetRect'
-      ]);
-      const viewportRect = /** @type {!../../../src/layout-rect.LayoutRectDef} */ (data[
-        'viewportRect'
-      ]);
+      const boundingClientRect =
+        /** @type {!../../../src/layout-rect.LayoutRectDef} */ (
+          data['targetRect']
+        );
+      const viewportRect =
+        /** @type {!../../../src/layout-rect.LayoutRectDef} */ (
+          data['viewportRect']
+        );
       const intersectionRect = calculateIntersectionRect(
         viewportRect,
         boundingClientRect
diff --git a/extensions/amp-intersection-observer-polyfill/0.1/test/test-cross-origin-observer.js b/extensions/amp-intersection-observer-polyfill/0.1/test/test-cross-origin-observer.js
index 8be9b1d99aa37..7d60962fd92fa 100644
--- a/extensions/amp-intersection-observer-polyfill/0.1/test/test-cross-origin-observer.js
+++ b/extensions/amp-intersection-observer-polyfill/0.1/test/test-cross-origin-observer.js
@@ -20,7 +20,7 @@ import {
   calculateIntersectionRect,
   maybeSetupCrossOriginObserver,
 } from '../cross-origin-observer';
-import {layoutRectLtwh} from '../../../../src/layout-rect';
+import {layoutRectLtwh} from '../../../../src/core/math/layout-rect';
 import {registerServiceBuilder} from '../../../../src/service';
 
 describes.sandboxed('calculateIntersectionRect', {}, () => {
diff --git a/extensions/amp-izlesene/0.1/amp-izlesene.js b/extensions/amp-izlesene/0.1/amp-izlesene.js
index a030ae93fc9a0..6917a47c5b52b 100644
--- a/extensions/amp-izlesene/0.1/amp-izlesene.js
+++ b/extensions/amp-izlesene/0.1/amp-izlesene.js
@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {addParamsToUrl} from '../../../src/url';
 import {devAssert, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getDataParamsFromAttributes} from '../../../src/dom';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {setIsMediaComponent} from '../../../src/video-interface';
@@ -35,6 +36,9 @@ class AmpIzlesene extends AMP.BaseElement {
     this.iframe_ = null;
     /** @private {?string} */
     this.videoIframeSrc_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -104,9 +108,21 @@ class AmpIzlesene extends AMP.BaseElement {
     this.element.appendChild(iframe);
     this.iframe_ = iframe;
 
+    this.pauseHelper_.updatePlaying(true);
+
     return this.loadPromise(iframe);
   }
 
+  /** @override */
+  unlayoutCallback() {
+    if (this.iframe_) {
+      this.element.removeChild(this.iframe_);
+      this.iframe_ = null;
+    }
+    this.pauseHelper_.updatePlaying(false);
+    return true;
+  }
+
   /** @override */
   pauseCallback() {
     if (this.iframe_ && this.iframe_.contentWindow) {
diff --git a/extensions/amp-izlesene/0.1/test/test-amp-izlesene.js b/extensions/amp-izlesene/0.1/test/test-amp-izlesene.js
index 1211d9f856780..ecd78ef899130 100644
--- a/extensions/amp-izlesene/0.1/test/test-amp-izlesene.js
+++ b/extensions/amp-izlesene/0.1/test/test-amp-izlesene.js
@@ -41,7 +41,7 @@ describes.realWin(
       }
       doc.body.appendChild(izlesene);
       return izlesene
-        .build()
+        .buildInternal()
         .then(() => {
           return izlesene.layoutCallback();
         })
@@ -74,5 +74,17 @@ describes.realWin(
         );
       });
     });
+
+    it('unlayout and relayout', async () => {
+      const izlesene = await getIzlesene('7221390');
+      expect(izlesene.querySelector('iframe')).to.exist;
+
+      const unlayoutResult = izlesene.unlayoutCallback();
+      expect(unlayoutResult).to.be.true;
+      expect(izlesene.querySelector('iframe')).to.not.exist;
+
+      await izlesene.layoutCallback();
+      expect(izlesene.querySelector('iframe')).to.exist;
+    });
   }
 );
diff --git a/extensions/amp-izlesene/0.1/test/validator-amp-izlesene.html b/extensions/amp-izlesene/0.1/test/validator-amp-izlesene.html
index 1d0a4a227f1c6..0a9701cad7591 100644
--- a/extensions/amp-izlesene/0.1/test/validator-amp-izlesene.html
+++ b/extensions/amp-izlesene/0.1/test/validator-amp-izlesene.html
@@ -24,7 +24,6 @@
     <title>İzlesene examples</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <script async custom-element="amp-izlesene" src="https://cdn.ampproject.org/v0/amp-izlesene-0.1.js"></script>
      <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/extensions/amp-izlesene/0.1/test/validator-amp-izlesene.out b/extensions/amp-izlesene/0.1/test/validator-amp-izlesene.out
index 8671c76db5caa..1213f8e0f70b2 100644
--- a/extensions/amp-izlesene/0.1/test/validator-amp-izlesene.out
+++ b/extensions/amp-izlesene/0.1/test/validator-amp-izlesene.out
@@ -25,7 +25,6 @@ FAIL
 |      <title>İzlesene examples</title>
 |      <link rel="canonical" href="amps.html">
 |      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|      <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |      <script async custom-element="amp-izlesene" src="https://cdn.ampproject.org/v0/amp-izlesene-0.1.js"></script>
 |       <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>
 |      <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -42,11 +41,11 @@ FAIL
 |    <!-- Invalid: bad data-videoid. -->
 |    <amp-izlesene data-videoid="something else" width="480" height="270" layout="responsive"></amp-izlesene>
 >>   ^~~~~~~~~
-amp-izlesene/0.1/test/validator-amp-izlesene.html:42:2 The attribute 'data-videoid' in tag 'amp-izlesene' is set to the invalid value 'something else'. (see https://amp.dev/documentation/components/amp-izlesene)
+amp-izlesene/0.1/test/validator-amp-izlesene.html:41:2 The attribute 'data-videoid' in tag 'amp-izlesene' is set to the invalid value 'something else'. (see https://amp.dev/documentation/components/amp-izlesene)
 |
 |    <!-- Invalid: data-videoid missing. -->
 |    <amp-izlesene width="480" height="270" layout="responsive"></amp-izlesene>
 >>   ^~~~~~~~~
-amp-izlesene/0.1/test/validator-amp-izlesene.html:45:2 The mandatory attribute 'data-videoid' is missing in tag 'amp-izlesene'. (see https://amp.dev/documentation/components/amp-izlesene)
+amp-izlesene/0.1/test/validator-amp-izlesene.html:44:2 The mandatory attribute 'data-videoid' is missing in tag 'amp-izlesene'. (see https://amp.dev/documentation/components/amp-izlesene)
 |  </body>
-|  </html>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-izlesene/OWNERS b/extensions/amp-izlesene/OWNERS
index ed1f615f10c77..2f6864c78739a 100644
--- a/extensions/amp-izlesene/OWNERS
+++ b/extensions/amp-izlesene/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}, {name: 'merty'}],
+      owners: [{name: 'ampproject/wg-components'}, {name: 'merty'}],
     },
   ],
 }
diff --git a/extensions/amp-izlesene/amp-izlesene.md b/extensions/amp-izlesene/amp-izlesene.md
index 7f09165e5c68a..caad50c7be893 100644
--- a/extensions/amp-izlesene/amp-izlesene.md
+++ b/extensions/amp-izlesene/amp-izlesene.md
@@ -68,4 +68,4 @@ With responsive layout the width and height from the example should yield correc
 
 ## Validation
 
-See [amp-izlesene rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-izlesene/validator-amp-izlesene.protoascii) in the AMP validator specification.
+See [amp-izlesene rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-izlesene/validator-amp-izlesene.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-jwplayer/0.1/amp-jwplayer.js b/extensions/amp-jwplayer/0.1/amp-jwplayer.js
index abd9b9a3cede4..87425f8ab8195 100644
--- a/extensions/amp-jwplayer/0.1/amp-jwplayer.js
+++ b/extensions/amp-jwplayer/0.1/amp-jwplayer.js
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
 import {addParamsToUrl} from '../../../src/url';
@@ -27,9 +28,10 @@ import {
   redispatch,
 } from '../../../src/iframe-video';
 import {dev, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {disableScrollingOnIframe} from '../../../src/iframe-helper';
 import {
+  dispatchCustomEvent,
   fullscreenEnter,
   fullscreenExit,
   isFullscreenElement,
@@ -39,7 +41,7 @@ import {getData, listen} from '../../../src/event-helper';
 import {getMode} from '../../../src/mode';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {once} from '../../../src/utils/function';
+import {once} from '../../../src/core/types/function';
 
 const JWPLAYER_EVENTS = {
   'ready': VideoEvents.LOAD,
@@ -100,7 +102,7 @@ class AmpJWPlayer extends AMP.BaseElement {
     /** @private {number} */
     this.currentTime_ = 0;
 
-    /** @private {Array<(Array<number>|null)>} */
+    /** @private {Array<?Array<number>>} */
     this.playedRanges_ = [];
 
     /** @private {?function()} */
@@ -108,6 +110,9 @@ class AmpJWPlayer extends AMP.BaseElement {
 
     /** @private {?function()} */
     this.unlistenFullscreen_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /** @override */
@@ -180,7 +185,7 @@ class AmpJWPlayer extends AMP.BaseElement {
 
   /** @override */
   getMetadata() {
-    const {win, playlistItem_} = this;
+    const {playlistItem_, win} = this;
     if (win.MediaMetadata && playlistItem_['meta']) {
       try {
         return new win.MediaMetadata(playlistItem_['meta']);
@@ -333,6 +338,8 @@ class AmpJWPlayer extends AMP.BaseElement {
       this.iframe_ = null;
     }
 
+    this.pauseHelper_.updatePlaying(false);
+
     return true; // Call layoutCallback again.
   }
 
@@ -341,15 +348,9 @@ class AmpJWPlayer extends AMP.BaseElement {
     if (!this.element.hasAttribute('data-media-id')) {
       return;
     }
-    const placeholder = this.win.document.createElement('amp-img');
+    const placeholder = this.win.document.createElement('img');
     this.propagateAttributes(['aria-label'], placeholder);
-    placeholder.setAttribute(
-      'src',
-      'https://content.jwplatform.com/thumbs/' +
-        encodeURIComponent(this.contentid_) +
-        '-720.jpg'
-    );
-    placeholder.setAttribute('layout', 'fill');
+    this.applyFillContent(placeholder);
     placeholder.setAttribute('placeholder', '');
     placeholder.setAttribute('referrerpolicy', 'origin');
     if (placeholder.hasAttribute('aria-label')) {
@@ -360,6 +361,13 @@ class AmpJWPlayer extends AMP.BaseElement {
     } else {
       placeholder.setAttribute('alt', 'Loading video');
     }
+    placeholder.setAttribute('loading', 'lazy');
+    placeholder.setAttribute(
+      'src',
+      'https://content.jwplatform.com/thumbs/' +
+        encodeURIComponent(this.contentid_) +
+        '-720.jpg'
+    );
     return placeholder;
   }
 
@@ -375,10 +383,10 @@ class AmpJWPlayer extends AMP.BaseElement {
 
     // Inform Video Manager that the video is pre-muted from persisted options.
     if (detail.muted) {
-      element.dispatchCustomEvent(VideoEvents.MUTED);
+      dispatchCustomEvent(element, VideoEvents.MUTED);
     }
 
-    element.dispatchCustomEvent(VideoEvents.LOAD);
+    dispatchCustomEvent(element, VideoEvents.LOAD);
   }
 
   /**
@@ -412,6 +420,17 @@ class AmpJWPlayer extends AMP.BaseElement {
       return;
     }
 
+    switch (event) {
+      case 'play':
+      case 'adPlay':
+        this.pauseHelper_.updatePlaying(true);
+        break;
+      case 'pause':
+      case 'complete':
+        this.pauseHelper_.updatePlaying(false);
+        break;
+    }
+
     const {element} = this;
 
     if (redispatch(element, event, JWPLAYER_EVENTS)) {
@@ -427,7 +446,7 @@ class AmpJWPlayer extends AMP.BaseElement {
           }
           break;
         case 'meta':
-          const {metadataType, duration} = detail;
+          const {duration, metadataType} = detail;
           if (metadataType === 'media') {
             this.duration_ = duration;
           }
@@ -435,7 +454,7 @@ class AmpJWPlayer extends AMP.BaseElement {
         case 'mute':
           const {mute} = detail;
           const {element} = this;
-          element.dispatchCustomEvent(mutedOrUnmutedEvent(mute));
+          dispatchCustomEvent(element, mutedOrUnmutedEvent(mute));
           break;
         case 'playedRanges':
           const {ranges} = detail;
diff --git a/extensions/amp-jwplayer/0.1/test/test-amp-jwplayer.js b/extensions/amp-jwplayer/0.1/test/test-amp-jwplayer.js
index 095436a19be13..bd9b1ad31a131 100644
--- a/extensions/amp-jwplayer/0.1/test/test-amp-jwplayer.js
+++ b/extensions/amp-jwplayer/0.1/test/test-amp-jwplayer.js
@@ -51,7 +51,7 @@ describes.realWin(
       jwp.setAttribute('layout', 'responsive');
 
       doc.body.appendChild(jwp);
-      await jwp.build();
+      await jwp.buildInternal();
       await jwp.layoutCallback();
 
       return jwp;
@@ -130,7 +130,7 @@ describes.realWin(
           'data-media-id': 'BZ6tc0gy',
           'data-player-id': 'uoIbMPm3',
         });
-        impl = jwp.implementation_;
+        impl = await jwp.getImpl(false);
       });
 
       it('supports platform', () => {
@@ -287,11 +287,14 @@ describes.realWin(
         });
 
         it('updates mute from state', () => {
-          const spy = env.sandbox.spy(impl.element, 'dispatchCustomEvent');
+          const mutedEventSpy = env.sandbox.spy();
+          const unmutedEventSpy = env.sandbox.spy();
+          impl.element.addEventListener(VideoEvents.MUTED, mutedEventSpy);
+          impl.element.addEventListener(VideoEvents.UNMUTED, unmutedEventSpy);
           mockMessage('mute', {mute: true});
-          expect(spy).calledWith(VideoEvents.MUTED);
+          expect(mutedEventSpy).to.be.calledOnce;
           mockMessage('mute', {mute: false});
-          expect(spy).calledWith(VideoEvents.UNMUTED);
+          expect(unmutedEventSpy).to.be.calledOnce;
         });
 
         it('updates played ranges from state', () => {
@@ -349,13 +352,14 @@ describes.realWin(
           'data-media-id': 'Wferorsv',
           'data-player-id': 'sDZEo0ea',
         });
-        const img = jw.querySelector('amp-img');
+        const img = jw.querySelector('img');
         expect(img).to.not.be.null;
         expect(img.getAttribute('src')).to.equal(
           'https://content.jwplatform.com/thumbs/Wferorsv-720.jpg'
         );
-        expect(img.getAttribute('layout')).to.equal('fill');
-        expect(img.hasAttribute('placeholder')).to.be.true;
+        expect(img).to.have.class('i-amphtml-fill-content');
+        expect(img).to.have.attribute('placeholder');
+        expect(img.getAttribute('loading')).to.equal('lazy');
         expect(img.getAttribute('referrerpolicy')).to.equal('origin');
         expect(img.getAttribute('alt')).to.equal('Loading video');
       });
@@ -365,7 +369,7 @@ describes.realWin(
           'data-player-id': 'sDZEo0ea',
           'aria-label': 'interesting video',
         });
-        const img = jw.querySelector('amp-img');
+        const img = jw.querySelector('img');
         expect(img).to.not.be.null;
         expect(img.getAttribute('aria-label')).to.equal('interesting video');
         expect(img.getAttribute('alt')).to.equal(
@@ -377,7 +381,7 @@ describes.realWin(
           'data-playlist-id': 'Wferorsv',
           'data-player-id': 'sDZEo0ea',
         });
-        const img = jw.querySelector('amp-img');
+        const img = jw.querySelector('img');
         expect(img).to.be.null;
       });
     });
@@ -404,9 +408,9 @@ describes.realWin(
       jwp.setAttribute('layout', 'responsive');
 
       doc.body.appendChild(jwp);
-      const imp = jwp.implementation_;
+      const imp = await jwp.getImpl(false);
 
-      await jwp.build();
+      await jwp.buildInternal();
       expect(imp['contentid_']).to.equal(attributes['data-media-id']);
       expect(imp['playerid_']).to.equal(attributes['data-player-id']);
       expect(imp['contentSearch_']).to.equal('');
diff --git a/extensions/amp-jwplayer/0.1/test/validator-amp-jwplayer.html b/extensions/amp-jwplayer/0.1/test/validator-amp-jwplayer.html
index 917eca7094b77..9c092f6fb5492 100644
--- a/extensions/amp-jwplayer/0.1/test/validator-amp-jwplayer.html
+++ b/extensions/amp-jwplayer/0.1/test/validator-amp-jwplayer.html
@@ -42,6 +42,12 @@
       data-playlist-id="482jsTAr"
       width="160" height="90">
   </amp-jwplayer>
+  <!-- Alternate valid example verifying outstream as a valid data-media-id. -->
+  <amp-jwplayer
+      data-player-id="BjcwyK37"
+      data-media-id="outstream"
+      width="160" height="90">
+  </amp-jwplayer>
   <!-- Invalid example missing a player id. -->
   <amp-jwplayer
       data-playerlist-id="482jsTAr"
diff --git a/extensions/amp-jwplayer/0.1/test/validator-amp-jwplayer.out b/extensions/amp-jwplayer/0.1/test/validator-amp-jwplayer.out
index cb22a39723a1b..e873ea1c9b792 100644
--- a/extensions/amp-jwplayer/0.1/test/validator-amp-jwplayer.out
+++ b/extensions/amp-jwplayer/0.1/test/validator-amp-jwplayer.out
@@ -43,19 +43,25 @@ FAIL
 |        data-playlist-id="482jsTAr"
 |        width="160" height="90">
 |    </amp-jwplayer>
+|    <!-- Alternate valid example verifying outstream as a valid data-media-id. -->
+|    <amp-jwplayer
+|        data-player-id="BjcwyK37"
+|        data-media-id="outstream"
+|        width="160" height="90">
+|    </amp-jwplayer>
 |    <!-- Invalid example missing a player id. -->
 |    <amp-jwplayer
 >>   ^~~~~~~~~
-amp-jwplayer/0.1/test/validator-amp-jwplayer.html:46:2 The tag 'amp-jwplayer' is missing a mandatory attribute - pick one of ['data-media-id', 'data-playlist-id']. (see https://amp.dev/documentation/components/amp-jwplayer)
+amp-jwplayer/0.1/test/validator-amp-jwplayer.html:52:2 The tag 'amp-jwplayer' is missing a mandatory attribute - pick one of ['data-media-id', 'data-playlist-id']. (see https://amp.dev/documentation/components/amp-jwplayer/)
 >>   ^~~~~~~~~
-amp-jwplayer/0.1/test/validator-amp-jwplayer.html:46:2 The mandatory attribute 'data-player-id' is missing in tag 'amp-jwplayer'. (see https://amp.dev/documentation/components/amp-jwplayer)
+amp-jwplayer/0.1/test/validator-amp-jwplayer.html:52:2 The mandatory attribute 'data-player-id' is missing in tag 'amp-jwplayer'. (see https://amp.dev/documentation/components/amp-jwplayer/)
 |        data-playerlist-id="482jsTAr"
 |        width="160" height="90">
 |    </amp-jwplayer>
 |    <!-- Invalid example missing playlist id or media-id. -->
 |    <amp-jwplayer
 >>   ^~~~~~~~~
-amp-jwplayer/0.1/test/validator-amp-jwplayer.html:51:2 The tag 'amp-jwplayer' is missing a mandatory attribute - pick one of ['data-media-id', 'data-playlist-id']. (see https://amp.dev/documentation/components/amp-jwplayer)
+amp-jwplayer/0.1/test/validator-amp-jwplayer.html:57:2 The tag 'amp-jwplayer' is missing a mandatory attribute - pick one of ['data-media-id', 'data-playlist-id']. (see https://amp.dev/documentation/components/amp-jwplayer/)
 |        data-player-id="BjcwyK37"
 |        width="160" height="90">
 |    </amp-jwplayer>
diff --git a/extensions/amp-jwplayer/OWNERS b/extensions/amp-jwplayer/OWNERS
index d6cc18527c9ee..3b1a322c220a6 100644
--- a/extensions/amp-jwplayer/OWNERS
+++ b/extensions/amp-jwplayer/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}, {name: 'pablos1'}],
+      owners: [{name: 'ampproject/wg-components'}, {name: 'pablos1'}],
     },
   ],
 }
diff --git a/extensions/amp-jwplayer/amp-jwplayer.md b/extensions/amp-jwplayer/amp-jwplayer.md
index 1b998309fa7d7..0ff57e9632ac5 100644
--- a/extensions/amp-jwplayer/amp-jwplayer.md
+++ b/extensions/amp-jwplayer/amp-jwplayer.md
@@ -64,7 +64,7 @@ Example:
   </tr>
   <tr>
     <td width="40%"><strong>data-media-id</strong></td>
-    <td>The JW Platform media id. This is an 8-digit alphanumeric sequence that can be found in the <a href="https://dashboard.jwplayer.com/#/content">Content</a> section in your JW Player Dashboard. (<strong>Required if <code>data-playlist-id</code> is not defined.</strong>)</td>
+    <td>The JW Platform media id. This is an 8-digit alphanumeric sequence that can be found in the <a href="https://dashboard.jwplayer.com/#/content">Content</a> section in your JW Player Dashboard. (<strong>Required if <code>data-playlist-id</code> is not defined.</strong>). Note: <code>outstream</code> is also a valid value.</td>
   </tr>
   <tr>
     <td width="40%"><strong>data-playlist-id</strong></td>
@@ -80,7 +80,7 @@ Example:
   </tr>
   <tr>
     <td width="40%"><strong>autoplay</strong></td>
-    <td>If this attribute is present, and the browser supports autoplay, the video will be automatically played as soon as it becomes visible. There are some conditions that the component needs to meet to be played, <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-video-interface.md#autoplay">which are outlined in the Video in AMP spec</a>.</td>
+    <td>If this attribute is present, and the browser supports autoplay, the video will be automatically played as soon as it becomes visible. There are some conditions that the component needs to meet to be played, <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-video-interface.md#autoplay">which are outlined in the Video in AMP spec</a>.</td>
   </tr>
   <tr>
     <td width="40%"><strong>dock</strong></td>
@@ -95,4 +95,4 @@ Example:
 
 ## Validation
 
-See [amp-jwplayer rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-jwplayer/validator-amp-jwplayer.protoascii) in the AMP validator specification.
+See [amp-jwplayer rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-jwplayer/validator-amp-jwplayer.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-jwplayer/validator-amp-jwplayer.protoascii b/extensions/amp-jwplayer/validator-amp-jwplayer.protoascii
index a87bb37394490..1638b2da5aa4f 100644
--- a/extensions/amp-jwplayer/validator-amp-jwplayer.protoascii
+++ b/extensions/amp-jwplayer/validator-amp-jwplayer.protoascii
@@ -37,7 +37,7 @@ tags: {  # <amp-jwplayer>
   attrs: {
     name: "data-media-id"
     mandatory_oneof: "['data-media-id', 'data-playlist-id']"
-    value_regex_casei: "[0-9a-z]{8}"
+    value_regex_casei: "[0-9a-z]{8}|outstream"
   }
   attrs: {
     name: "data-player-id"
@@ -61,5 +61,5 @@ tags: {  # <amp-jwplayer>
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
-  spec_url: "https://amp.dev/documentation/components/amp-jwplayer"
+  spec_url: "https://amp.dev/documentation/components/amp-jwplayer/"
 }
diff --git a/extensions/amp-kaltura-player/0.1/amp-kaltura-player.js b/extensions/amp-kaltura-player/0.1/amp-kaltura-player.js
index 9228fd2c5438d..ce704b25b6f4b 100644
--- a/extensions/amp-kaltura-player/0.1/amp-kaltura-player.js
+++ b/extensions/amp-kaltura-player/0.1/amp-kaltura-player.js
@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {addParamsToUrl} from '../../../src/url';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getDataParamsFromAttributes} from '../../../src/dom';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {setIsMediaComponent} from '../../../src/video-interface';
@@ -30,11 +31,17 @@ class AmpKaltura extends AMP.BaseElement {
     /** @private {?HTMLIFrameElement} */
     this.iframe_ = null;
 
+    /** @private {string} */
+    this.serviceUrl_ = '';
+
     /** @private {string} */
     this.partnerId_ = '';
 
     /** @private {string} */
     this.entryId_ = '';
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -44,8 +51,7 @@ class AmpKaltura extends AMP.BaseElement {
   preconnectCallback(opt_onLayout) {
     Services.preconnectFor(this.win).url(
       this.getAmpDoc(),
-      'https://cdnapisec.kaltura.com',
-      opt_onLayout
+      `https://${encodeURIComponent(this.serviceUrl_)}${opt_onLayout}`
     );
   }
 
@@ -65,6 +71,9 @@ class AmpKaltura extends AMP.BaseElement {
     setIsMediaComponent(this.element);
 
     this.entryId_ = this.element.getAttribute('data-entryid') || 'default';
+
+    this.serviceUrl_ =
+      this.element.getAttribute('data-service-url') || 'cdnapisec.kaltura.com';
   }
 
   /** @override */
@@ -74,9 +83,9 @@ class AmpKaltura extends AMP.BaseElement {
       this.element.getAttribute('data-uiconf-id') ||
       'default';
     const iframe = this.element.ownerDocument.createElement('iframe');
-    let src = `https://cdnapisec.kaltura.com/p/${encodeURIComponent(
-      this.partnerId_
-    )}/sp/${encodeURIComponent(
+    let src = `https://${encodeURIComponent(
+      this.serviceUrl_
+    )}/p/${encodeURIComponent(this.partnerId_)}/sp/${encodeURIComponent(
       this.partnerId_
     )}00/embedIframeJs/uiconf_id/${encodeURIComponent(
       uiconfId
@@ -96,16 +105,44 @@ class AmpKaltura extends AMP.BaseElement {
     this.applyFillContent(iframe);
     this.element.appendChild(iframe);
     this.iframe_ = /** @type {HTMLIFrameElement} */ (iframe);
+
+    this.pauseHelper_.updatePlaying(true);
+
     return this.loadPromise(iframe);
   }
 
+  /** @override */
+  unlayoutCallback() {
+    const iframe = this.iframe_;
+    if (iframe) {
+      this.element.removeChild(iframe);
+      this.iframe_ = null;
+    }
+    this.pauseHelper_.updatePlaying(false);
+    return true;
+  }
+
   /** @override */
   createPlaceholderCallback() {
-    const placeholder = this.win.document.createElement('amp-img');
+    const placeholder = this.win.document.createElement('img');
     this.propagateAttributes(['aria-label'], placeholder);
+    this.applyFillContent(placeholder);
+    placeholder.setAttribute('loading', 'lazy');
+    placeholder.setAttribute('placeholder', '');
+    placeholder.setAttribute('referrerpolicy', 'origin');
+    if (placeholder.hasAttribute('aria-label')) {
+      placeholder.setAttribute(
+        'alt',
+        'Loading video - ' + placeholder.getAttribute('aria-label')
+      );
+    } else {
+      placeholder.setAttribute('alt', 'Loading video');
+    }
     const width = this.element.getAttribute('width');
     const height = this.element.getAttribute('height');
-    let src = `https://cdnapisec.kaltura.com/p/${encodeURIComponent(
+    let src = `https://${encodeURIComponent(
+      this.serviceUrl_
+    )}/p/${encodeURIComponent(
       this.partnerId_
     )}/thumbnail/entry_id/${encodeURIComponent(this.entryId_)}`;
     if (width) {
@@ -115,17 +152,6 @@ class AmpKaltura extends AMP.BaseElement {
       src += `/height/${height}`;
     }
     placeholder.setAttribute('src', src);
-    placeholder.setAttribute('layout', 'fill');
-    placeholder.setAttribute('placeholder', '');
-    placeholder.setAttribute('referrerpolicy', 'origin');
-    if (placeholder.hasAttribute('aria-label')) {
-      placeholder.setAttribute(
-        'alt',
-        'Loading video - ' + placeholder.getAttribute('aria-label')
-      );
-    } else {
-      placeholder.setAttribute('alt', 'Loading video');
-    }
     return placeholder;
   }
 
diff --git a/extensions/amp-kaltura-player/0.1/test/test-amp-kaltura-player.js b/extensions/amp-kaltura-player/0.1/test/test-amp-kaltura-player.js
index b94931cdbfdd9..4a4ced323bd7c 100644
--- a/extensions/amp-kaltura-player/0.1/test/test-amp-kaltura-player.js
+++ b/extensions/amp-kaltura-player/0.1/test/test-amp-kaltura-player.js
@@ -43,7 +43,7 @@ describes.realWin(
       }
       doc.body.appendChild(kalturaPlayer);
       return kalturaPlayer
-        .build()
+        .buildInternal()
         .then(() => {
           return kalturaPlayer.layoutCallback();
         })
@@ -65,6 +65,22 @@ describes.realWin(
       });
     });
 
+    it('renders with service-url', () => {
+      return getKaltura({
+        'data-service-url': 'front.video.funke.press',
+        'data-partner': '106',
+        'data-entryid': '0_b87xdluw',
+        'data-uiconf': '23464665',
+      }).then((bc) => {
+        const iframe = bc.querySelector('iframe');
+        expect(iframe).to.not.be.null;
+        expect(iframe.tagName).to.equal('IFRAME');
+        expect(iframe.src).to.equal(
+          'https://front.video.funke.press/p/106/sp/10600/embedIframeJs/uiconf_id/23464665/partner_id/106?iframeembed=true&playerId=kaltura_player_amp&entry_id=0_b87xdluw'
+        );
+      });
+    });
+
     it('renders responsively', () => {
       return getKaltura(
         {
@@ -84,7 +100,7 @@ describes.realWin(
       return allowConsoleError(() => {
         return getKaltura({})
           .then((kp) => {
-            kp.build();
+            kp.buildInternal();
           })
           .should.eventually.be.rejectedWith(
             /The data-partner attribute is required for/
@@ -104,6 +120,23 @@ describes.realWin(
       });
     });
 
+    it('unlayout and relayout', async () => {
+      const kp = await getKaltura({
+        'data-partner': '1281471',
+        'data-entryid': '1_3ts1ms9c',
+        'data-uiconf': '33502051',
+        'data-param-my-param': 'hello world',
+      });
+      expect(kp.querySelector('iframe')).to.exist;
+
+      const unlayoutResult = kp.unlayoutCallback();
+      expect(unlayoutResult).to.be.true;
+      expect(kp.querySelector('iframe')).to.not.exist;
+
+      await kp.layoutCallback();
+      expect(kp.querySelector('iframe')).to.exist;
+    });
+
     describe('createPlaceholderCallback', () => {
       it('should create a placeholder image', () => {
         return getKaltura({
@@ -111,13 +144,15 @@ describes.realWin(
           'data-entryid': '1_3ts1ms9c',
           'data-uiconf': '33502051',
         }).then((kp) => {
-          const img = kp.querySelector('amp-img');
+          const img = kp.querySelector('img');
           expect(img).to.not.be.null;
+          expect(img).to.have.attribute('placeholder');
+          expect(img).to.have.class('i-amphtml-fill-content');
+          expect(img.getAttribute('loading')).to.equal('lazy');
           expect(img.getAttribute('src')).to.equal(
             'https://cdnapisec.kaltura.com/p/1281471/thumbnail/entry_id/' +
               '1_3ts1ms9c/width/111/height/222'
           );
-          expect(img.getAttribute('layout')).to.equal('fill');
           expect(img.hasAttribute('placeholder')).to.be.true;
           expect(img.getAttribute('referrerpolicy')).to.equal('origin');
           expect(img.getAttribute('alt')).to.equal('Loading video');
@@ -130,9 +165,8 @@ describes.realWin(
           'data-uiconf': '33502051',
           'aria-label': 'great video',
         }).then((kp) => {
-          const img = kp.querySelector('amp-img');
+          const img = kp.querySelector('img');
           expect(img).to.not.be.null;
-          expect(img.hasAttribute('placeholder')).to.be.true;
           expect(img.getAttribute('aria-label')).to.equal('great video');
           expect(img.getAttribute('alt')).to.equal(
             'Loading video - great video'
diff --git a/extensions/amp-kaltura-player/0.1/test/validator-amp-kaltura-player.html b/extensions/amp-kaltura-player/0.1/test/validator-amp-kaltura-player.html
index 61e3af876c7f3..a35841adc0574 100644
--- a/extensions/amp-kaltura-player/0.1/test/validator-amp-kaltura-player.html
+++ b/extensions/amp-kaltura-player/0.1/test/validator-amp-kaltura-player.html
@@ -37,6 +37,16 @@
      layout="responsive" width="480" height="270">
   </amp-kaltura-player>
 
+  <!-- valid kaltura ce example -->
+  <amp-kaltura-player
+    data-service-url="front.video.funke.press"
+    data-uiconf="23464665"
+    data-partner="106"
+    data-entryid="0_b87xdluw"
+    data-param-streamerType="auto"
+    layout="responsive" width="480" height="270">
+  </amp-kaltura-player>
+
   <!-- invalid example: data-partner is missing -->
   <amp-kaltura-player width="480" height="270"></amp-kaltura-player>
 </body>
diff --git a/extensions/amp-kaltura-player/0.1/test/validator-amp-kaltura-player.out b/extensions/amp-kaltura-player/0.1/test/validator-amp-kaltura-player.out
index 7ab3cd9e95625..2680a081a0952 100644
--- a/extensions/amp-kaltura-player/0.1/test/validator-amp-kaltura-player.out
+++ b/extensions/amp-kaltura-player/0.1/test/validator-amp-kaltura-player.out
@@ -38,9 +38,19 @@ FAIL
 |       layout="responsive" width="480" height="270">
 |    </amp-kaltura-player>
 |
+|    <!-- valid kaltura ce example -->
+|    <amp-kaltura-player
+|      data-service-url="front.video.funke.press"
+|      data-uiconf="23464665"
+|      data-partner="106"
+|      data-entryid="0_b87xdluw"
+|      data-param-streamerType="auto"
+|      layout="responsive" width="480" height="270">
+|    </amp-kaltura-player>
+|
 |    <!-- invalid example: data-partner is missing -->
 |    <amp-kaltura-player width="480" height="270"></amp-kaltura-player>
 >>   ^~~~~~~~~
-amp-kaltura-player/0.1/test/validator-amp-kaltura-player.html:41:2 The mandatory attribute 'data-partner' is missing in tag 'amp-kaltura-player'. (see https://amp.dev/documentation/components/amp-kaltura-player)
+amp-kaltura-player/0.1/test/validator-amp-kaltura-player.html:51:2 The mandatory attribute 'data-partner' is missing in tag 'amp-kaltura-player'. (see https://amp.dev/documentation/components/amp-kaltura-player)
 |  </body>
 |  </html>
diff --git a/extensions/amp-kaltura-player/OWNERS b/extensions/amp-kaltura-player/OWNERS
index a5c93c1b87088..3e03fe098a117 100644
--- a/extensions/amp-kaltura-player/OWNERS
+++ b/extensions/amp-kaltura-player/OWNERS
@@ -1,10 +1,14 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'itaykinnrot'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [
+        {name: 'itaykinnrot'},
+        {name: 'ampproject/wg-components'},
+        {name: 'mrhein'},
+      ],
     },
   ],
 }
diff --git a/extensions/amp-kaltura-player/amp-kaltura-player.md b/extensions/amp-kaltura-player/amp-kaltura-player.md
index 654fd881f648f..45afe58e5cd01 100644
--- a/extensions/amp-kaltura-player/amp-kaltura-player.md
+++ b/extensions/amp-kaltura-player/amp-kaltura-player.md
@@ -32,6 +32,7 @@ Example:
 
 ```html
 <amp-kaltura-player
+  data-service-url="cdnapisec.kaltura.com"
   data-uiconf="33502051"
   data-partner="1281471"
   data-entryid="1_3ts1ms9c"
@@ -46,6 +47,10 @@ Example:
 ## Attributes
 
 <table>
+  <tr>
+    <td width="40%"><strong>data-serviceUrl</strong></td>
+    <td>The Kaltura service url. This attribute is optional.</td>
+  </tr>
   <tr>
     <td width="40%"><strong>data-partner</strong></td>
     <td>The Kaltura partner id. This attribute is mandatory.</td>
@@ -74,4 +79,4 @@ Example:
 
 ## Validation
 
-See [amp-kaltura-player rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-kaltura-player/validator-amp-kaltura-player.protoascii) in the AMP validator specification.
+See [amp-kaltura-player rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-kaltura-player/validator-amp-kaltura-player.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.js b/extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.js
index 269c49ce5e18a..8ceda6cca7adf 100644
--- a/extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.js
+++ b/extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.js
@@ -15,7 +15,7 @@
  */
 
 import {CSS} from '../../../build/amp-lightbox-gallery-0.1.css';
-import {CommonSignals} from '../../../src/common-signals';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
 import {
   ELIGIBLE_TAP_TAGS,
   LightboxManager,
@@ -23,7 +23,7 @@ import {
   VIDEO_TAGS,
 } from './service/lightbox-manager-impl';
 import {Gestures} from '../../../src/gesture';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {LightboxCaption, OverflowState} from './lightbox-caption';
 import {LightboxControls, LightboxControlsAction} from './lightbox-controls';
 import {Services} from '../../../src/services';
@@ -38,26 +38,27 @@ import {
   scopedQuerySelectorAll,
   toggleAttribute,
 } from '../../../src/dom';
-import {clamp} from '../../../src/utils/math';
+import {clamp} from '../../../src/core/math';
 import {
   delayAfterDeferringToEventLoop,
   secondsToTimestampString,
 } from './utils';
 import {dev, devAssert, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {escapeCssSelectorIdent} from '../../../src/css';
+import {dict} from '../../../src/core/types/object';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {getData, getDetail, isLoaded, listen} from '../../../src/event-helper';
 import {getElementServiceForDoc} from '../../../src/element-service';
 import {htmlFor} from '../../../src/static-template';
 import {isExperimentOn} from '../../../src/experiments';
 import {prepareImageAnimation} from '@ampproject/animations';
-import {reportError} from '../../../src/error';
+import {reportError} from '../../../src/error-reporting';
 import {setStyle, setStyles, toggle} from '../../../src/style';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
 
 /** @const */
 const TAG = 'amp-lightbox-gallery';
+const AMP_CAROUSEL_TAG = 'amp-carousel';
 const DEFAULT_GALLERY_ID = 'amp-lightbox-gallery';
 const SLIDE_ITEM_SELECTOR =
   '.i-amphtml-slide-item, .i-amphtml-carousel-slotted';
@@ -177,9 +178,6 @@ export class AmpLightboxGallery extends AMP.BaseElement {
     /** @private {string} */
     this.currentLightboxGroupId_ = 'default';
 
-    /** @private {?Element} */
-    this.sourceElement_ = null;
-
     /**
      * @private {boolean}
      */
@@ -373,17 +371,20 @@ export class AmpLightboxGallery extends AMP.BaseElement {
    * @private
    */
   buildCarousel_(lightboxGroupId) {
-    const carouselVersion = isExperimentOn(
+    const extensionVersion =
+      this.getAmpDoc().getExtensionVersion(AMP_CAROUSEL_TAG);
+    const experimentVersion = isExperimentOn(
       this.win,
       'amp-lightbox-gallery-carousel-0-2'
     )
       ? '0.2'
       : '0.1';
+    const carouselVersion = extensionVersion ?? experimentVersion;
 
     return Promise.all([
       Services.extensionsFor(this.win).installExtensionForDoc(
         this.getAmpDoc(),
-        'amp-carousel',
+        AMP_CAROUSEL_TAG,
         carouselVersion
       ),
       Services.extensionsFor(this.win).installExtensionForDoc(
@@ -643,9 +644,8 @@ export class AmpLightboxGallery extends AMP.BaseElement {
   swipeGesture_(data) {
     if (data.first) {
       const {sourceElement} = this.getCurrentElement_();
-      const parentCarousel = this.getSourceElementParentCarousel_(
-        sourceElement
-      );
+      const parentCarousel =
+        this.getSourceElementParentCarousel_(sourceElement);
 
       this.swipeToDismiss_.startSwipe({
         swipeElement: dev().assertElement(this.carousel_),
@@ -736,7 +736,6 @@ export class AmpLightboxGallery extends AMP.BaseElement {
    * @private
    */
   openLightboxGallery_(element, expandDescription) {
-    this.sourceElement_ = element;
     const lightboxGroupId = element.getAttribute('lightbox') || 'default';
     this.currentLightboxGroupId_ = lightboxGroupId;
     this.hasVerticalScrollbarWidth_ = getVerticalScrollbarWidth(this.win) > 0;
@@ -755,11 +754,6 @@ export class AmpLightboxGallery extends AMP.BaseElement {
         this.isActive_ = true;
 
         const owners = Services.ownersForDoc(this.element);
-        owners.updateInViewport(
-          this.element,
-          dev().assertElement(this.container_),
-          true
-        );
         owners.scheduleLayout(
           this.element,
           dev().assertElement(this.container_)
@@ -838,33 +832,7 @@ export class AmpLightboxGallery extends AMP.BaseElement {
    */
   shouldAnimateOut_() {
     const target = this.getCurrentElement_().sourceElement;
-    if (!this.transitionTargetIsInViewport_(target)) {
-      return false;
-    }
-    if (!this.elementTypeCanBeAnimated_(target)) {
-      return false;
-    }
-    return true;
-  }
-
-  /**
-   *
-   * @param {!Element} target
-   * @return {boolean}
-   * @private
-   */
-  transitionTargetIsInViewport_(target) {
-    if (target == this.sourceElement_) {
-      return true;
-    }
-    if (target.isInViewport()) {
-      return true;
-    }
-    const parentCarousel = this.getSourceElementParentCarousel_(target);
-    if (parentCarousel && parentCarousel.isInViewport()) {
-      return true;
-    }
-    return false;
+    return this.elementTypeCanBeAnimated_(target);
   }
 
   /**
@@ -880,7 +848,7 @@ export class AmpLightboxGallery extends AMP.BaseElement {
     return this.getCurrentElement_()
       .imageViewer.getImpl()
       .then((imageViewer) => {
-        const {width, height} = imageViewer.getImageBoxWithOffset() || {};
+        const {height, width} = imageViewer.getImageBoxWithOffset() || {};
 
         // Check if our imageBox has a width or height. We may be in the
         // gallery view if not, and we do not want to animate.
@@ -1464,11 +1432,13 @@ export function installLightboxGallery(ampdoc) {
  * @return {!Promise<?LightboxManager>}
  */
 function lightboxManagerForDoc(element) {
-  return /** @type {!Promise<?LightboxManager>} */ (getElementServiceForDoc(
-    element,
-    'amp-lightbox-manager',
-    'amp-lightbox-gallery'
-  ));
+  return /** @type {!Promise<?LightboxManager>} */ (
+    getElementServiceForDoc(
+      element,
+      'amp-lightbox-manager',
+      'amp-lightbox-gallery'
+    )
+  );
 }
 
 AMP.extension(TAG, '0.1', (AMP) => {
diff --git a/extensions/amp-lightbox-gallery/0.1/lightbox-caption.css b/extensions/amp-lightbox-gallery/0.1/lightbox-caption.css
index 641fd96c4d447..e05eec3b4e00e 100644
--- a/extensions/amp-lightbox-gallery/0.1/lightbox-caption.css
+++ b/extensions/amp-lightbox-gallery/0.1/lightbox-caption.css
@@ -20,7 +20,7 @@
   right: 0 !important;
   bottom: 0 !important;
   z-index: 1;
-  /* 
+  /*
    * Make sure we do not overlap with the buttons. This is not applied to
    * `.i-amphtml-lbg-caption-text` to avoid expanding the hit area when
    * collapsed.
diff --git a/extensions/amp-lightbox-gallery/0.1/lightbox-caption.js b/extensions/amp-lightbox-gallery/0.1/lightbox-caption.js
index adcf5c6b6af60..fd01d19f408d9 100644
--- a/extensions/amp-lightbox-gallery/0.1/lightbox-caption.js
+++ b/extensions/amp-lightbox-gallery/0.1/lightbox-caption.js
@@ -39,14 +39,14 @@ export class LightboxCaption {
     const el = htmlFor(doc)`
       <div class="i-amphtml-lbg-caption">
         <div class="i-amphtml-lbg-caption-scroll">
-          <div class="i-amphtml-lbg-caption-text"></div>
+          <div class="i-amphtml-lbg-caption-text amp-lightbox-gallery-caption"></div>
         </div>
         <div class="i-amphtml-lbg-caption-mask"></div>
       </div>`;
     return new LightboxCaption(
       el,
       dev().assertElement(el.querySelector('.i-amphtml-lbg-caption-scroll')),
-      dev().assertElement(el.querySelector('.i-amphtml-lbg-caption-text')),
+      dev().assertElement(el.querySelector('.amp-lightbox-gallery-caption')),
       dev().assertElement(el.querySelector('.i-amphtml-lbg-caption-mask')),
       measureMutateElement
     );
@@ -107,9 +107,9 @@ export class LightboxCaption {
    * @return {!OverflowState} state
    */
   getOverflowState() {
-    return /** @type {OverflowState} */ (this.scrollContainer_.getAttribute(
-      'i-amphtml-lbg-caption-state'
-    ));
+    return /** @type {OverflowState} */ (
+      this.scrollContainer_.getAttribute('i-amphtml-lbg-caption-state')
+    );
   }
 
   /**
@@ -143,7 +143,7 @@ export class LightboxCaption {
    *    current state is toggled.
    */
   toggleOverflow(requestExpansion) {
-    const {scrollContainer_, overflowMask_} = this;
+    const {overflowMask_, scrollContainer_} = this;
     let descriptionOverflows;
 
     const measureOverflowState = () => {
diff --git a/extensions/amp-lightbox-gallery/0.1/lightbox-controls.css b/extensions/amp-lightbox-gallery/0.1/lightbox-controls.css
index dda148f926376..fe3a45ca30294 100644
--- a/extensions/amp-lightbox-gallery/0.1/lightbox-controls.css
+++ b/extensions/amp-lightbox-gallery/0.1/lightbox-controls.css
@@ -108,7 +108,7 @@
 
 .i-amphtml-lbg-button[data-action="prev"] {
   /* Needed for screen reader mode to size correctly. */
-  right: auto !important; 
+  right: auto !important;
   left: 0 !important;
 }
 
diff --git a/extensions/amp-lightbox-gallery/0.1/lightbox-controls.js b/extensions/amp-lightbox-gallery/0.1/lightbox-controls.js
index 18251b1f8550f..3a432647dffc0 100644
--- a/extensions/amp-lightbox-gallery/0.1/lightbox-controls.js
+++ b/extensions/amp-lightbox-gallery/0.1/lightbox-controls.js
@@ -17,9 +17,9 @@
 import {Services} from '../../../src/services';
 import {createCustomEvent} from '../../../src/event-helper';
 import {devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {htmlFor} from '../../../src/static-template';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
 
 /**
  * @enum {string}
diff --git a/extensions/amp-lightbox-gallery/0.1/service/lightbox-manager-impl.js b/extensions/amp-lightbox-gallery/0.1/service/lightbox-manager-impl.js
index 38ffcaf67e0ac..de867e549d252 100644
--- a/extensions/amp-lightbox-gallery/0.1/service/lightbox-manager-impl.js
+++ b/extensions/amp-lightbox-gallery/0.1/service/lightbox-manager-impl.js
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../../../src/amp-events';
+import {AmpEvents} from '../../../../src/core/constants/amp-events';
 import {
   AutoLightboxEvents,
   isActionableByTap,
 } from '../../../../src/auto-lightbox';
-import {CommonSignals} from '../../../../src/common-signals';
+import {CommonSignals} from '../../../../src/core/constants/common-signals';
 import {
   LIGHTBOX_THUMBNAIL_AD,
   LIGHTBOX_THUMBNAIL_UNKNOWN,
@@ -34,9 +34,9 @@ import {
   iterateCursor,
 } from '../../../../src/dom';
 import {dev, devAssert, userAssert} from '../../../../src/log';
-import {map} from '../../../../src/utils/object';
+import {map} from '../../../../src/core/types/object';
 import {srcsetFromElement, srcsetFromSrc} from '../../../../src/srcset';
-import {toArray} from '../../../../src/types';
+import {toArray} from '../../../../src/core/types/array';
 
 const LIGHTBOX_ELIGIBLE_TAGS = {
   'AMP-IMG': true,
@@ -244,10 +244,19 @@ export class LightboxManager {
       figure,
       (child) => child.tagName !== 'FIGCAPTION'
     );
-    if (element) {
-      element.setAttribute('lightbox', lightboxGroupId);
+    const isGallerySlide = element.classList.contains(
+      'i-amphtml-inline-gallery-slide-content-slot'
+    );
+    // Special handling for gallery slides, needed since they require a
+    // wrapping div inside of the figure for the content.
+    const unwrappedElement = isGallerySlide
+      ? isGallerySlide.firstChild
+      : element;
+
+    if (unwrappedElement) {
+      unwrappedElement.setAttribute('lightbox', lightboxGroupId);
     }
-    return element;
+    return unwrappedElement;
   }
 
   /**
diff --git a/extensions/amp-lightbox-gallery/0.1/swipe-to-dismiss.js b/extensions/amp-lightbox-gallery/0.1/swipe-to-dismiss.js
index fddf0508ee6db..b19385a85e754 100644
--- a/extensions/amp-lightbox-gallery/0.1/swipe-to-dismiss.js
+++ b/extensions/amp-lightbox-gallery/0.1/swipe-to-dismiss.js
@@ -163,7 +163,7 @@ export class SwipeToDismiss {
    * }} config
    */
   startSwipe(config) {
-    const {swipeElement, hiddenElement, mask, overlay} = config;
+    const {hiddenElement, mask, overlay, swipeElement} = config;
     this.swipeElement_ = swipeElement;
     this.hiddenElement_ = hiddenElement;
     this.mask_ = mask;
@@ -343,7 +343,7 @@ export class SwipeToDismiss {
    * @param {!SwipeDef} data The data for the swipe.
    */
   swipeMove(data) {
-    const {deltaX, deltaY, velocityX, velocityY, last} = data;
+    const {deltaX, deltaY, last, velocityX, velocityY} = data;
     const wasSwiping = this.isSwiping_;
     if (last) {
       this.isSwiping_ = false;
diff --git a/extensions/amp-lightbox-gallery/0.1/test-e2e/test-carousel-0.2-declared.js b/extensions/amp-lightbox-gallery/0.1/test-e2e/test-carousel-0.2-declared.js
new file mode 100644
index 0000000000000..66000a031eaa1
--- /dev/null
+++ b/extensions/amp-lightbox-gallery/0.1/test-e2e/test-carousel-0.2-declared.js
@@ -0,0 +1,64 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const pageWidth = 800;
+const pageHeight = 600;
+
+describes.endtoend(
+  'AMP Lightbox Gallery with AMP Carousel 2.0',
+  {
+    fixture: 'amp-lightbox/amp-lightbox-with-carousel-0.2.amp.html',
+    initialRect: {width: pageWidth, height: pageHeight},
+    environments: ['single'],
+  },
+  async (env) => {
+    let controller;
+
+    function css(handle, name) {
+      return controller.getElementCssValue(handle, name);
+    }
+
+    function prop(el, name) {
+      return controller.getElementProperty(el, name);
+    }
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    it('should open/close lightbox', async () => {
+      // First open the gallery.
+      const firstAmpImg = await controller.findElement('amp-img');
+      await controller.click(firstAmpImg);
+
+      // Verify it opened.
+      const overlay = await controller.findElement('.i-amphtml-lbg-overlay');
+      const galleryButton = await controller.findElement(
+        '[data-action="gallery"]'
+      );
+      const closeButton = await controller.findElement('[data-action="close"]');
+      await expect(css(overlay, 'opacity')).to.equal('1');
+      await expect(css(galleryButton, 'opacity')).to.equal('1');
+      await expect(css(closeButton, 'opacity')).to.equal('1');
+
+      // Wait for the first slide's image to load
+      const firstSlideImg = await controller.findElement(
+        'amp-lightbox-gallery img'
+      );
+      await expect(prop(firstSlideImg, 'naturalWidth')).to.be.gt(0);
+    });
+  }
+);
diff --git a/extensions/amp-lightbox-gallery/0.1/test-e2e/test-open-close.js b/extensions/amp-lightbox-gallery/0.1/test-e2e/test-open-close.js
index 5d80b37f1482d..0ffb59182121f 100644
--- a/extensions/amp-lightbox-gallery/0.1/test-e2e/test-open-close.js
+++ b/extensions/amp-lightbox-gallery/0.1/test-e2e/test-open-close.js
@@ -20,8 +20,7 @@ const pageHeight = 600;
 describes.endtoend(
   'AMP Lightbox Gallery Open/Close',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-lightbox-gallery-launch.amp.html',
+    fixture: 'amp-lightbox/amp-lightbox-gallery-launch.amp.html',
     initialRect: {width: pageWidth, height: pageHeight},
     // TODO(sparhami) Get this working in other environments.
     environments: ['single'],
@@ -43,7 +42,8 @@ describes.endtoend(
 
     // TODO(sparhami) Cover swipe to dismiss if possible.
     // TODO(sparhami) Test basic transition to gallery and back.
-    it('should open/close lightbox', async () => {
+    // TODO(#28948) fix this flaky test.
+    it.skip('should open/close lightbox', async () => {
       // First open the gallery.
       const firstAmpImg = await controller.findElement('amp-img');
       await controller.click(firstAmpImg);
diff --git a/extensions/amp-lightbox-gallery/0.1/test/integration/test-amp-lightbox-gallery.js b/extensions/amp-lightbox-gallery/0.1/test/integration/test-amp-lightbox-gallery.js
index 840694ab5cb4f..683dce9cb1874 100644
--- a/extensions/amp-lightbox-gallery/0.1/test/integration/test-amp-lightbox-gallery.js
+++ b/extensions/amp-lightbox-gallery/0.1/test/integration/test-amp-lightbox-gallery.js
@@ -18,10 +18,15 @@ import * as analytics from '../../../../../src/analytics';
 import {poll} from '../../../../../testing/iframe';
 
 // TODO(cathyxz, #16822): This suite is flaky.
-describe.configure().skip('amp-lightbox-gallery', function () {
+describes.sandboxed.configure().skip('amp-lightbox-gallery', function () {
   this.timeout(10000);
   const extensions = ['amp-lightbox-gallery'];
   const body = `
+  <style amp-custom>
+    .amp-lightbox-gallery-caption{
+      color: red;
+    }
+  </style>
   <figure>
   <amp-img id="img0"
       src="/examples/img/sample.jpg"
@@ -61,9 +66,8 @@ describe.configure().skip('amp-lightbox-gallery', function () {
             const carouselQuery = lightbox.getElementsByTagName('AMP-CAROUSEL');
             expect(carouselQuery.length).to.equal(1);
             const carousel = carouselQuery[0];
-            const imageViewerQuery = carousel.getElementsByTagName(
-              'AMP-IMAGE-VIEWER'
-            );
+            const imageViewerQuery =
+              carousel.getElementsByTagName('AMP-IMAGE-VIEWER');
             expect(imageViewerQuery.length).to.equal(1);
             const imageViewer = imageViewerQuery[0];
             const img = imageViewer.querySelector(
@@ -124,7 +128,7 @@ describe.configure().skip('amp-lightbox-gallery', function () {
         });
       });
 
-      it('should display text description', () => {
+      it('should display text description with applied style', () => {
         openLightbox(win.document).then(() => {
           const descBoxQuery = win.document.getElementsByClassName(
             'i-amphtml-lbg-desc-box'
@@ -142,6 +146,7 @@ describe.configure().skip('amp-lightbox-gallery', function () {
           expect(descriptionText.classList.contains('i-amphtml-lbg-desc-text'))
             .to.be.true;
           expect(descriptionText.textContent).to.equal('This is a figcaption.');
+          expect(descriptionText.style).to.have.property('color', 'red');
         });
       });
 
diff --git a/extensions/amp-lightbox-gallery/0.1/test/test-amp-lightbox-gallery.js b/extensions/amp-lightbox-gallery/0.1/test/test-amp-lightbox-gallery.js
index 163e53c3fdd70..8a52434867488 100644
--- a/extensions/amp-lightbox-gallery/0.1/test/test-amp-lightbox-gallery.js
+++ b/extensions/amp-lightbox-gallery/0.1/test/test-amp-lightbox-gallery.js
@@ -41,7 +41,7 @@ describes.realWin(
     describe('basic functionality', function () {
       this.timeout(5000);
       it('should contain a container on build', (done) => {
-        gallery.build().then(() => {
+        gallery.buildInternal().then(() => {
           const container = doc.getElementsByClassName('i-amphtml-lbg');
           expect(container.length).to.equal(1);
           expect(container[0].tagName).to.equal('DIV');
diff --git a/extensions/amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.html b/extensions/amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.html
index 1494bfb817c26..f3e5c86167d57 100644
--- a/extensions/amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.html
+++ b/extensions/amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.html
@@ -92,7 +92,7 @@
       data-aax_src="302">
     </amp-ad>
   </amp-carousel>
- 
+
   <!-- Invalid: missing value for lightbox-thumbnail-id -->
   <amp-img src="/awesome.png" width="300" height="300" lightbox lightbox-thumbnail-id></amp-img>
   <!-- Invalid: missing lightbox attribute for element with lightbox-thumbnail-id -->
diff --git a/extensions/amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.out b/extensions/amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.out
index 046181291129e..d4d6cf1755464 100644
--- a/extensions/amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.out
+++ b/extensions/amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.out
@@ -42,7 +42,7 @@ FAIL
 |    <!-- Invalid: missing value for lightbox-thumbnail-id -->
 |    <amp-img src="/awesome.png" width="300" height="300" lightbox lightbox-thumbnail-id></amp-img>
 >>   ^~~~~~~~~
-amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.html:42:2 The attribute 'lightbox-thumbnail-id' in tag 'amp-img' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-img)
+amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.html:42:2 The attribute 'lightbox-thumbnail-id' in tag 'amp-img' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- Invalid: missing lightbox attribute for element with lightbox-thumbnail-id -->
 |    <amp-img src="/awesome.png" width="300" height="300" lightbox-thumbnail-id="a"></amp-img>
 |
@@ -95,16 +95,16 @@ amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.html:42:2 The attri
 |        data-aax_src="302">
 |      </amp-ad>
 |    </amp-carousel>
-|   
+|
 |    <!-- Invalid: missing value for lightbox-thumbnail-id -->
 |    <amp-img src="/awesome.png" width="300" height="300" lightbox lightbox-thumbnail-id></amp-img>
 >>   ^~~~~~~~~
-amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.html:97:2 The attribute 'lightbox-thumbnail-id' in tag 'amp-img' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-img)
+amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.html:97:2 The attribute 'lightbox-thumbnail-id' in tag 'amp-img' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- Invalid: missing lightbox attribute for element with lightbox-thumbnail-id -->
 |    <amp-img src="/awesome.png" width="300" height="300" lightbox-thumbnail-id="a"></amp-img>
 |    <!-- Invalid: invalid use of lightbox-exclude -->
 |    <amp-img src="/awesome.png" width="300" height="300" lightbox-exclude></amp-img>
 >>   ^~~~~~~~~
-amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.html:101:2 The attribute 'lightbox-exclude' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+amp-lightbox-gallery/0.1/test/validator-amp-lightbox-gallery.html:101:2 The attribute 'lightbox-exclude' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |  </body>
 |  </html>
diff --git a/extensions/amp-lightbox-gallery/0.1/utils.js b/extensions/amp-lightbox-gallery/0.1/utils.js
index 867b07c905f5b..4b84c5404d6dd 100644
--- a/extensions/amp-lightbox-gallery/0.1/utils.js
+++ b/extensions/amp-lightbox-gallery/0.1/utils.js
@@ -17,7 +17,7 @@
  * @fileoverview Description of this file.
  */
 import {Services} from '../../../src/services';
-import {padStart} from '../../../src/string';
+import {padStart} from '../../../src/core/types/string';
 /**
  * Runs a delay after deferring to the event loop. This is useful to call from
  * within an animation frame, as you can be sure that at least duration
diff --git a/extensions/amp-lightbox-gallery/1.0/component.js b/extensions/amp-lightbox-gallery/1.0/component.js
new file mode 100644
index 0000000000000..9c249a0d6acc7
--- /dev/null
+++ b/extensions/amp-lightbox-gallery/1.0/component.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright 2021 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.
+ */
+
+export {LightboxGalleryProvider} from './provider';
+export {WithLightbox} from './consumer';
diff --git a/extensions/amp-lightbox-gallery/1.0/component.type.js b/extensions/amp-lightbox-gallery/1.0/component.type.js
new file mode 100644
index 0000000000000..23c0e0ac38219
--- /dev/null
+++ b/extensions/amp-lightbox-gallery/1.0/component.type.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/** @externs */
+
+/** @const */
+var LightboxGalleryDef = {};
+
+/**
+ * @typedef {{
+ *   children: (PreactDef.Renderable),
+ *   render: (function():PreactDef.Renderable|undefined),
+ * }}
+ */
+LightboxGalleryDef.Props;
+
+/**
+ * @typedef {{
+ *   as: (string|undefined),
+ *   children: (!PreactDef.Renderable),
+ *   enableActivation: (boolean|undefined),
+ *   onClick: (function(Event)|undefined),
+ *   render: (function():PreactDef.Renderable),
+ * }}
+ */
+LightboxGalleryDef.WithLightboxProps;
+
+/**
+ * @typedef {{
+ *   deregister: (function(string):undefined),
+ *   register: (function(string, Element):undefined),
+ *   open: (function():undefined),
+ * }}
+ */
+LightboxGalleryDef.ContextProps;
diff --git a/extensions/amp-lightbox-gallery/1.0/consumer.js b/extensions/amp-lightbox-gallery/1.0/consumer.js
new file mode 100644
index 0000000000000..b69d82182cf8f
--- /dev/null
+++ b/extensions/amp-lightbox-gallery/1.0/consumer.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {LightboxGalleryContext} from './context';
+import {sequentialIdGenerator} from '../../../src/core/math/id-generator';
+import {
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from '../../../src/preact';
+
+const generateLightboxItemKey = sequentialIdGenerator();
+
+const DEFAULT_ARIA_LABEL = 'Open content in a lightbox view.';
+const DEFAULT_ACTIVATION_PROPS = {
+  'aria-label': DEFAULT_ARIA_LABEL,
+  role: 'button',
+  tabIndex: '0',
+};
+
+/**
+ * @param {!LightboxGalleryDef.WithLightboxProps} props
+ * @return {PreactDef.Renderable}
+ */
+export function WithLightbox({
+  as: Comp = 'div',
+  children,
+  enableActivation = true,
+  onClick: customOnClick,
+  render = () => children,
+  ...rest
+}) {
+  const [genKey] = useState(generateLightboxItemKey);
+  const {deregister, open, register} = useContext(LightboxGalleryContext);
+  useLayoutEffect(() => {
+    register(genKey, render);
+    return () => deregister(genKey);
+  }, [genKey, deregister, register, render]);
+
+  const activationProps = useMemo(
+    () =>
+      enableActivation && {
+        ...DEFAULT_ACTIVATION_PROPS,
+        onClick: () => {
+          if (customOnClick) {
+            customOnClick();
+          }
+          open();
+        },
+      },
+    [customOnClick, enableActivation, open]
+  );
+  return (
+    <Comp {...activationProps} {...rest}>
+      {children}
+    </Comp>
+  );
+}
diff --git a/extensions/amp-lightbox-gallery/1.0/context.js b/extensions/amp-lightbox-gallery/1.0/context.js
new file mode 100644
index 0000000000000..deafc69a6488c
--- /dev/null
+++ b/extensions/amp-lightbox-gallery/1.0/context.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright 2021 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.
+ */
+import {createContext} from '../../../src/preact';
+
+const LightboxGalleryContext = createContext(
+  /** @type {LightboxGalleryDef.ContextProps} */ ({
+    deregister: () => {},
+    register: () => {},
+    open: () => {},
+  })
+);
+export {LightboxGalleryContext};
diff --git a/extensions/amp-lightbox-gallery/1.0/provider.js b/extensions/amp-lightbox-gallery/1.0/provider.js
new file mode 100644
index 0000000000000..d23506fd86da3
--- /dev/null
+++ b/extensions/amp-lightbox-gallery/1.0/provider.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright 2021 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.
+ */
+import * as Preact from '../../../src/preact';
+import {Lightbox} from './../../amp-lightbox/1.0/component';
+import {LightboxGalleryContext} from './context';
+import {useCallback, useRef} from '../../../src/preact';
+
+/**
+ * @param {!LightboxGalleryDef.Props} props
+ * @return {PreactDef.Renderable}
+ */
+export function LightboxGalleryProvider({children, render}) {
+  const lightboxRef = useRef(null);
+  const renderers = useRef([]);
+  const lightboxElements = useRef([]);
+  const register = (key, render) => {
+    renderers.current[key] = render;
+  };
+  const deregister = (key) => {
+    delete lightboxElements.current[key];
+    delete renderers.current[key];
+  };
+  const context = {
+    deregister,
+    register,
+    open: () => lightboxRef.current.open(),
+  };
+
+  const renderElements = useCallback(() => {
+    renderers.current.forEach((render, index) => {
+      if (!lightboxElements.current[index]) {
+        lightboxElements.current[index] = render();
+      }
+    });
+  }, []);
+  return (
+    <>
+      <Lightbox
+        onBeforeOpen={() => renderElements()}
+        ref={lightboxRef}
+        scrollable
+      >
+        {/* TODO: This needs an actual close button UI */}
+        <div
+          aria-label="Close the lightbox"
+          role="button"
+          tabIndex="0"
+          onClick={() => lightboxRef.current.close()}
+        >
+          Close lightbox
+        </div>
+        <div>{lightboxElements.current}</div>
+      </Lightbox>
+      <LightboxGalleryContext.Provider value={context}>
+        {render ? render() : children}
+      </LightboxGalleryContext.Provider>
+    </>
+  );
+}
diff --git a/extensions/amp-lightbox-gallery/1.0/storybook/Basic.js b/extensions/amp-lightbox-gallery/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..98d7db72fd06b
--- /dev/null
+++ b/extensions/amp-lightbox-gallery/1.0/storybook/Basic.js
@@ -0,0 +1,111 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {BaseCarousel} from '../../../amp-base-carousel/1.0/component';
+import {LightboxGalleryProvider, WithLightbox} from '../component';
+import {withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'LightboxGallery',
+  component: LightboxGalleryProvider,
+  decorators: [withKnobs],
+};
+
+export const _default = () => {
+  return (
+    <>
+      <LightboxGalleryProvider>
+        <style>{`
+        img {
+          width: 240px;
+          height: 160px;
+        }
+      `}</style>
+        <WithLightbox>
+          <img src="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1498&q=80" />
+        </WithLightbox>
+        <p>abc</p>
+        <WithLightbox
+          as="img"
+          alt="larger img"
+          id="foo"
+          src="https://images.unsplash.com/photo-1583511666407-5f06533f2113?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80"
+          render={() => (
+            <img
+              alt="smaller img"
+              src="https://images.unsplash.com/photo-1583511666407-5f06533f2113?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+            />
+          )}
+        />
+        <p>abc</p>
+        <WithLightbox>
+          <img src="https://images.unsplash.com/photo-1599839575945-a9e5af0c3fa5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjQwMzA0fQ&auto=format&fit=crop&w=1498&q=80" />
+        </WithLightbox>
+        <div>
+          <div>
+            <div>
+              <WithLightbox>
+                <img src="https://images.unsplash.com/photo-1603123853880-a92fafb7809f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80" />
+              </WithLightbox>
+            </div>
+          </div>
+        </div>
+      </LightboxGalleryProvider>
+    </>
+  );
+};
+
+export const carousel = () => {
+  return (
+    <>
+      <style>{`
+    img {
+      width: 240px;
+      height: 160px;
+    }
+  `}</style>
+      <LightboxGalleryProvider>
+        <BaseCarousel lightbox style={{width: '240px', height: '160px'}}>
+          <img
+            src="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1498&q=80"
+            thumbnailSrc="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=120&q=80"
+          />
+          <img
+            src="https://images.unsplash.com/photo-1583511666407-5f06533f2113?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80"
+            thumbnailSrc="https://images.unsplash.com/photo-1583511666407-5f06533f2113?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80"
+          />
+          <img
+            src="https://images.unsplash.com/photo-1599839575945-a9e5af0c3fa5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjQwMzA0fQ&auto=format&fit=crop&w=1498&q=80"
+            thumbnailSrc="https://images.unsplash.com/photo-1599839575945-a9e5af0c3fa5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjQwMzA0fQ&auto=format&fit=crop&w=1498&q=80"
+          />
+          <img
+            src="https://images.unsplash.com/photo-1583512603806-077998240c7a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80"
+            thumbnailSrc="https://images.unsplash.com/photo-1583512603806-077998240c7a?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80"
+          />
+          <img
+            src="https://images.unsplash.com/photo-1598133893773-de3574464ef0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80"
+            thumbnailSrc="https://images.unsplash.com/photo-1598133893773-de3574464ef0?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80"
+          />
+          <img
+            src="https://images.unsplash.com/photo-1603123853880-a92fafb7809f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1498&q=80"
+            thumbnailSrc="https://images.unsplash.com/photo-1603123853880-a92fafb7809f?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80"
+          />
+        </BaseCarousel>
+      </LightboxGalleryProvider>
+    </>
+  );
+};
diff --git a/extensions/amp-lightbox-gallery/OWNERS b/extensions/amp-lightbox-gallery/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-lightbox-gallery/OWNERS
+++ b/extensions/amp-lightbox-gallery/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-lightbox-gallery/amp-lightbox-gallery.md b/extensions/amp-lightbox-gallery/amp-lightbox-gallery.md
index 9e11f63447b09..e51520fd5d157 100644
--- a/extensions/amp-lightbox-gallery/amp-lightbox-gallery.md
+++ b/extensions/amp-lightbox-gallery/amp-lightbox-gallery.md
@@ -25,15 +25,32 @@ limitations under the License.
 
 # amp-lightbox-gallery
 
-## Overview
+## Usage
 
-The `amp-lightbox-gallery` component provides a "lightbox” experience for AMP components (e.g., `amp-img`, `amp-carousel`). When the user interacts with the AMP element, a UI component expands to fill the viewport until it is closed by the user. Currently, only images are supported.
+The `amp-lightbox-gallery` component provides a "lightbox" experience for AMP
+components (e.g., `amp-img`, `amp-carousel`). When the user interacts with the
+AMP element, a UI component expands to fill the viewport until it is closed by
+the user. Currently, only images are supported.
 
-## Usage
+To use `amp-lightbox-gallery`, ensure the required script is included in your
+`<head>` section, then add the `lightbox` attribute on an `<amp-img>` or
+`<amp-carousel>` element.
+
+[tip type="read-on"]
+
+For showing individual images in a lightbox, there's also the
+[`<amp-image-lightbox>`](../amp-image-lightbox/amp-image-lightbox.md)
+component. To display other types of elements in a lightbox, use
+[`<amp-lightbox>`](../amp-lightbox/amp-lightbox.md).
 
-To use `amp-lightbox-gallery`, ensure the required script is included in your `<head>` section, then add the `lightbox` attribute on an `<amp-img>` or `<amp-carousel>` element. A typical usage looks like this:
+[/tip]
 
-### Lightbox with `<amp-img>`
+### Display a lightbox with `<amp-img>`
+
+Tapping on any `<amp-img>` opens the image in a lightbox gallery. The lightbox
+gallery does image-handling (e.g., zoom and pan), enables swiping to navigate
+between images, and offers a thumbnail gallery view for browsing all picture
+thumbnails in a grid.
 
 ```html
 <amp-img src="cat.jpg" width="100" height="100" lightbox></amp-img>
@@ -41,9 +58,14 @@ To use `amp-lightbox-gallery`, ensure the required script is included in your `<
 <amp-img src="bird.jpg" width="100" height="100" lightbox></amp-img>
 ```
 
-Tapping on any `<amp-img>` opens the image in a lightbox gallery. The lightbox gallery does image-handling (e.g., zoom and pan), enables swiping to navigate between images, and offers a thumbnail gallery view for browsing all picture thumbnails in a grid.
+### Display a lightbox with `<amp-carousel>`
 
-### Lightbox with `<amp-carousel>`
+You can add the `lightbox` attribute on an `<amp-carousel>` to lightbox all of
+its children. Currently, the `<amp-lightbox-gallery>` component only supports
+carousels containing `<amp-img>` as children. As you navigate through the
+carousel items in the lightbox, the original carousel slides are synchronized so
+that when the lightbox is closed, the user ends up on the same slide as they
+were originally on. Currently, only the `type='slides'` carousel is supported.
 
 ```html
 <amp-carousel
@@ -59,21 +81,20 @@ Tapping on any `<amp-img>` opens the image in a lightbox gallery. The lightbox g
 </amp-carousel>
 ```
 
-You can add the `lightbox` attribute on an `<amp-carousel>` to lightbox all of its children. Currently, the `<amp-lightbox-gallery>` component only supports carousels containing `<amp-img>` as children. As you navigate through the carousel items in the lightbox, the original carousel slides are synchronized so that when the lightbox is closed, the user ends up on the same slide as the were originally on. Currently, only the `type='slides'` carousel is supported.
-
-### Captions
+### Add captions
 
-Optionally, you can specify a caption for each element in the lightbox. These fields are automatically read and displayed by the `<amp-lightbox-gallery>` in the following order of priority:
+Optionally, you can specify a caption for each element in the lightbox. These
+fields are automatically read and displayed by the `<amp-lightbox-gallery>` in
+the following order of priority:
 
-- `figcaption` (if the lightboxed element is the child of a figure)
-- `aria-describedby`
-- `alt`
-- `aria-label`
-- `aria-labelledby`
+-   `figcaption` (if the lightboxed element is the child of a figure)
+-   `aria-describedby`
+-   `alt`
+-   `aria-label`
+-   `aria-labelledby`
 
-#### Example 1: Using figcaption for description
-
-In this example, `<amp-lightbox-gallery>` displays the `figcaption` value as its description, showing "Toront's CN tower was ....".
+In the following example, `<amp-lightbox-gallery>` displays the `figcaption`
+value as its description, showing "Toront's CN tower was ....".
 
 ```html
 <figure>
@@ -94,9 +115,8 @@ In this example, `<amp-lightbox-gallery>` displays the `figcaption` value as its
 </figure>
 ```
 
-#### Example 2: Using alt for description
-
-In this example, `<amp-lightbox-gallery>` displays the `alt` value as its description, showing "Picture of CN tower".
+In the following example, `<amp-lightbox-gallery>` displays the `alt` value as
+its description, showing "Picture of CN tower".
 
 ```html
 <amp-img
@@ -111,11 +131,12 @@ In this example, `<amp-lightbox-gallery>` displays the `alt` value as its descri
 </amp-img>
 ```
 
-## Thumbnail API
+### Implement thumbnail previews
 
-Lightboxed items have a thumbnail gallery view. You can optionally specify a thumbnail item for your lightboxed element via the attribute `lightbox-thumbnail-id` that references the `id` of an `<amp-img>` element with `layout="nodisplay"`.
-
-#### Example: using `lightbox-thumbnail-id` to specify a thumbnail
+Lightboxed items have a thumbnail gallery view. You can optionally specify a
+thumbnail item for your lightboxed element via the attribute
+`lightbox-thumbnail-id` that references the `id` of an `<amp-img>` element with
+`layout="nodisplay"`.
 
 ```html
 <amp-youtube
@@ -137,15 +158,33 @@ Lightboxed items have a thumbnail gallery view. You can optionally specify a thu
 </amp-img>
 ```
 
-If no thumbnail is specified, `<amp-img>` elements will be cropped per `object-fit: cover`, `<amp-video>` will use the image src specified in its `poster` attribute, and placeholder images will be used for lightboxed elements that have one.
+If no thumbnail is specified, `<amp-img>` elements will be cropped per
+`object-fit: cover`, `<amp-video>` will use the image `src` specified in its
+`poster` attribute, and placeholder images will be used for lightboxed elements
+that have one.
+
+## Styling
+
+You can style the caption of a `amp-lightbox-gallery` component
+by targeting the `amp-lightbox-gallery-caption` class with standard CSS.
+Some of the properties that can be styled are `font-size` and `color`.
+
+## Actions
 
-## Analytics events
+### `open`
 
-To track usage of `amp-lightbox-gallery`, please use one of the following analytics events:
+Opens the lightbox gallery. Can be triggered by tapping another element, if you
+specify the image `id`: `on="tap:amp-lightbox-gallery.open(id='image-id')"`.
+
+## Analytics
+
+To track usage of `amp-lightbox-gallery`, please use one of the following
+analytics events:
 
 ### `lightboxOpened`
 
-This event tracks when the lightbox is opened when the user clicks on a lightboxed `<amp-img>`.
+This event tracks when the lightbox is opened when the user clicks on a
+lightboxed `<amp-img>`.
 
 You can track this event using the following code snippet:
 
@@ -169,7 +208,8 @@ You can track this event using the following code snippet:
 
 ### `thumbnailsViewToggled`
 
-This event tracks when the thumbnails view is triggered by clicking on the trigger when the user is in the lightbox view.
+This event tracks when the thumbnails view is triggered by clicking on the
+trigger when the user is in the lightbox view.
 
 You can track this event using the following code snippet:
 
@@ -193,7 +233,9 @@ You can track this event using the following code snippet:
 
 ### `descriptionOverflowToggled`
 
-This event tracks when the user toggles the description by clicking on the description to expand/collapse it, tracking engagement with the description for the lightboxed image.
+This event tracks when the user toggles the description by clicking on the
+description to expand/collapse it, tracking engagement with the description for
+the lightboxed image.
 
 You can track this event using the following code snippet:
 
@@ -214,3 +256,8 @@ You can track this event using the following code snippet:
   </script>
 </amp-analytics>
 ```
+
+## Validation
+
+See [`amp-image-lightbox-gallery` rules](validator-amp-lightbox-gallery.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-lightbox/0.1/amp-lightbox.js b/extensions/amp-lightbox/0.1/amp-lightbox.js
index 68065219b2866..9a5aa31fefdff 100644
--- a/extensions/amp-lightbox/0.1/amp-lightbox.js
+++ b/extensions/amp-lightbox/0.1/amp-lightbox.js
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
-import {AmpEvents} from '../../../src/amp-events';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {CSS} from '../../../build/amp-lightbox-0.1.css';
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Gestures} from '../../../src/gesture';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Services} from '../../../src/services';
 import {SwipeXYRecognizer} from '../../../src/gesture-recognizers';
 import {
@@ -32,15 +32,16 @@ import {
   setStyles,
   toggle,
 } from '../../../src/style';
-import {createCustomEvent, listenOnce} from '../../../src/event-helper';
-import {debounce} from '../../../src/utils/rate-limit';
+import {createCustomEvent} from '../../../src/event-helper';
+import {debounce} from '../../../src/core/types/function';
 import {dev, devAssert, user} from '../../../src/log';
-import {dict, hasOwn} from '../../../src/utils/object';
+import {dict, hasOwn} from '../../../src/core/types/object';
 import {getMode} from '../../../src/mode';
 import {htmlFor} from '../../../src/static-template';
 import {isInFie} from '../../../src/iframe-helper';
-import {removeElement, tryFocus} from '../../../src/dom';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
+import {tryFocus} from '../../../src/dom';
+import {unmountAll} from '../../../src/utils/resource-container-helper';
 
 /** @const {string} */
 const TAG = 'amp-lightbox';
@@ -95,13 +96,6 @@ function renderCloseButtonHeader(ctx) {
     </i-amphtml-ad-close-header>`;
 }
 
-/**
- * @param {!Element} header
- */
-function showCloseButtonHeader(header) {
-  header.classList.add('amp-ad-close-header');
-}
-
 class AmpLightbox extends AMP.BaseElement {
   /** @param {!AmpElement} element */
   constructor(element) {
@@ -113,6 +107,9 @@ class AmpLightbox extends AMP.BaseElement {
     /** @private {?Element} */
     this.container_ = null;
 
+    /** @private @const {!Document} */
+    this.document_ = this.win.document;
+
     /** @private {?../../../src/service/action-impl.ActionService} */
     this.action_ = null;
 
@@ -125,15 +122,24 @@ class AmpLightbox extends AMP.BaseElement {
     /**  @private {?function(this:AmpLightbox, Event)}*/
     this.boundCloseOnEscape_ = null;
 
+    /**  @private {?function(this:AmpLightbox, Event)}*/
+    this.boundCloseOnEnter_ = null;
+
+    /**  @private {?function(this:AmpLightbox)}*/
+    this.boundFocusin_ = null;
+
+    /**  @private {?function(this:AmpLightbox)}*/
+    this.boundClose_ = null;
+
+    /** @private {?Element} */
+    this.openerElement_ = null;
+
     /** @private {boolean} */
     this.isScrollable_ = false;
 
     /** @private {number} */
     this.pos_ = 0;
 
-    /** @private {number} */
-    this.oldPos_ = 0;
-
     /** @private {number} */
     this.eventCounter_ = 0;
 
@@ -148,6 +154,12 @@ class AmpLightbox extends AMP.BaseElement {
     /** @private {?Element} */
     this.closeButtonHeader_ = null;
 
+    /** @private {?Element} */
+    this.closeButton_ = null;
+
+    /** @private {?Element} */
+    this.closeButtonSR_ = null;
+
     const platform = Services.platformFor(this.win);
 
     /** @private @const {boolean} */
@@ -181,7 +193,7 @@ class AmpLightbox extends AMP.BaseElement {
     this.action_ = Services.actionServiceForDoc(this.element);
     this.maybeSetTransparentBody_();
 
-    this.registerDefaultAction((i) => this.open_(i.trust), 'open');
+    this.registerDefaultAction((i) => this.open_(i.trust, i.caller), 'open');
     this.registerAction('close', (i) => this.close(i.trust));
     /** If the element is in an email document, allow its `open` and `close` actions. */
     this.action_.addToAllowlist('AMP-LIGHTBOX', ['open', 'close'], ['email']);
@@ -241,7 +253,7 @@ class AmpLightbox extends AMP.BaseElement {
 
       element.addEventListener(AmpEvents.DOM_UPDATE, () => {
         this.takeOwnershipOfDescendants_();
-        this.updateChildrenInViewport_(this.pos_, this.pos_);
+        this.updateChildrenInViewport_(this.pos_);
       });
 
       element.addEventListener('scroll', this.scrollHandler_.bind(this));
@@ -253,6 +265,8 @@ class AmpLightbox extends AMP.BaseElement {
         // Consume to block scroll events and side-swipe.
       });
     }
+
+    this.maybeCreateCloseButtonHeader_();
   }
 
   /** @override */
@@ -262,20 +276,33 @@ class AmpLightbox extends AMP.BaseElement {
 
   /**
    * @param {!ActionTrust} trust
+   * @param {?Element} openerElement
    * @private
    */
-  open_(trust) {
+  open_(trust, openerElement) {
     if (this.active_) {
       return;
     }
     this.initialize_();
-    this.boundCloseOnEscape_ = /** @type {?function(this:AmpLightbox, Event)} */ (this.closeOnEscape_.bind(
-      this
-    ));
-    this.win.document.documentElement.addEventListener(
+    this.boundCloseOnEscape_ =
+      /** @type {?function(this:AmpLightbox, Event)} */ (
+        this.closeOnEscape_.bind(this)
+      );
+    this.document_.documentElement.addEventListener(
       'keydown',
       this.boundCloseOnEscape_
     );
+    this.boundFocusin_ = /** @type {?function(this:AmpLightbox)} */ (
+      this.onFocusin_.bind(this)
+    );
+    this.document_.documentElement.addEventListener(
+      'focusin',
+      this.boundFocusin_
+    );
+
+    if (openerElement) {
+      this.openerElement_ = openerElement;
+    }
 
     const {promise, resolve} = new Deferred();
     this.getViewport()
@@ -289,7 +316,8 @@ class AmpLightbox extends AMP.BaseElement {
     if (open !== undefined) {
       // Mutations via AMP.setState() require default trust.
       if (open) {
-        this.open_(ActionTrust.DEFAULT);
+        // This suppose that the element that trigered the open is where the focus currently is
+        this.open_(ActionTrust.DEFAULT, document.activeElement);
       } else {
         this.close(ActionTrust.DEFAULT);
       }
@@ -316,11 +344,8 @@ class AmpLightbox extends AMP.BaseElement {
   finalizeOpen_(callback, trust) {
     const {element} = this;
 
-    const {
-      durationSeconds,
-      openStyle,
-      closedStyle,
-    } = this.getAnimationPresetDef_();
+    const {closedStyle, durationSeconds, openStyle} =
+      this.getAnimationPresetDef_();
 
     const props = Object.keys(openStyle);
 
@@ -346,7 +371,6 @@ class AmpLightbox extends AMP.BaseElement {
     });
 
     this.handleAutofocus_();
-    this.maybeRenderCloseButtonHeader_();
 
     // TODO (jridgewell): expose an API accomodating this per PR #14676
     this.mutateElement(() => {
@@ -354,15 +378,9 @@ class AmpLightbox extends AMP.BaseElement {
     });
 
     const container = dev().assertElement(this.container_);
-    if (!this.isScrollable_) {
-      Services.ownersForDoc(this.element).updateInViewport(
-        this.element,
-        container,
-        true
-      );
-    } else {
+    if (this.isScrollable_) {
       this.scrollHandler_();
-      this.updateChildrenInViewport_(this.pos_, this.pos_);
+      this.updateChildrenInViewport_(this.pos_);
     }
 
     const onAnimationEnd = () => {
@@ -372,6 +390,8 @@ class AmpLightbox extends AMP.BaseElement {
     element.addEventListener('transitionend', onAnimationEnd);
     element.addEventListener('animationend', onAnimationEnd);
 
+    this.setAsContainer();
+
     // TODO: instead of laying out children all at once, layout children based
     // on visibility.
     const owners = Services.ownersForDoc(this.element);
@@ -380,40 +400,60 @@ class AmpLightbox extends AMP.BaseElement {
     this.triggerEvent_(LightboxEvents.OPEN, trust);
 
     this.getHistory_()
-      .push(this.close.bind(this))
+      .push((unused) => this.close(trust))
       .then((historyId) => {
         this.historyId_ = historyId;
       });
 
+    this.maybeRenderCloseButtonHeader_();
+    this.focusInModal_();
+    this.tieCloseButton_();
+
     this.active_ = true;
   }
 
-  /** @private */
-  maybeRenderCloseButtonHeader_() {
+  /**
+   * Creates a top bar with close button if the attribute close-button is set. For ads
+   * @private
+   */
+  maybeCreateCloseButtonHeader_() {
     const {element} = this;
-
     if (element.getAttribute('close-button') == null) {
       return;
     }
 
-    const header = renderCloseButtonHeader(element);
-
-    this.closeButtonHeader_ = header;
+    this.closeButtonHeader_ = renderCloseButtonHeader(element);
+    element.insertBefore(this.closeButtonHeader_, this.container_);
+  }
 
-    // Click gesture is high trust.
-    listenOnce(header, 'click', () => this.close(ActionTrust.HIGH));
+  /**
+   * Renders close button header. For ads
+   * @private
+   */
+  maybeRenderCloseButtonHeader_() {
+    if (!this.closeButtonHeader_) {
+      return;
+    }
 
-    element.insertBefore(header, this.container_);
+    // click event doesn't work with enter on i-amphtml-ad-close-header
+    this.boundCloseOnEnter_ =
+      /** @type {?function(this:AmpLightbox, Event)} */ (
+        this.closeOnEnter_.bind(this)
+      );
+    this.closeButtonHeader_.addEventListener(
+      'keydown',
+      this.boundCloseOnEnter_
+    );
 
     let headerHeight;
-
     this.measureMutateElement(
       () => {
-        headerHeight = header./*OK*/ getBoundingClientRect().height;
+        headerHeight =
+          this.closeButtonHeader_./*OK*/ getBoundingClientRect().height;
       },
       () => {
         // Done in vsync in order to apply transition.
-        showCloseButtonHeader(header);
+        this.showCloseButtonHeader_();
 
         setImportantStyles(dev().assertElement(this.container_), {
           'margin-top': px(headerHeight),
@@ -423,6 +463,50 @@ class AmpLightbox extends AMP.BaseElement {
     );
   }
 
+  /**
+   * Show close button header
+   * @private
+   */
+  showCloseButtonHeader_() {
+    this.closeButtonHeader_.classList.add('amp-ad-close-header');
+  }
+
+  /**
+   * Add close button event listener to button we created
+   * @private
+   */
+  tieCloseButton_() {
+    if (!this.closeButtonSR_ && !this.closeButtonHeader_) {
+      return;
+    }
+    this.boundClose_ = /** @type {?function(this:AmpLightbox)} */ (
+      this.closeOnClick_.bind(this)
+    );
+    this.closeButton_.addEventListener('click', this.boundClose_);
+  }
+
+  /**
+   * Remove listeners from close button we created
+   * @private
+   */
+  untieCloseButton_() {
+    if (!this.closeButtonSR_ && !this.closeButtonHeader_) {
+      return;
+    }
+
+    this.closeButton_.removeEventListener('click', this.boundClose_);
+    this.boundClose_ = null;
+
+    if (!this.closeButtonHeader_) {
+      return;
+    }
+    this.closeButtonHeader_.removeEventListener(
+      'keydown',
+      this.boundCloseOnEnter_
+    );
+    this.boundCloseOnEnter_ = null;
+  }
+
   /**
    * @private
    * @return {!AnimationPresetDef}
@@ -431,6 +515,14 @@ class AmpLightbox extends AMP.BaseElement {
     return AnimationPresets[this.animationPreset_];
   }
 
+  /**
+   * Handles closing the lightbox when close is clicked.
+   * @private
+   */
+  closeOnClick_() {
+    this.close(ActionTrust.HIGH);
+  }
+
   /**
    * Handles closing the lightbox when the ESC key is pressed.
    * @param {!Event} event
@@ -444,6 +536,20 @@ class AmpLightbox extends AMP.BaseElement {
     }
   }
 
+  /**
+   * Handles closing the lightbox when the enter key is pressed.
+   * Need it for i-amphtml-ad-close-header
+   * @param {!Event} event
+   * @private
+   */
+  closeOnEnter_(event) {
+    if (event.key == Keys.ENTER) {
+      event.preventDefault();
+      // Keypress gesture is high trust.
+      this.close(ActionTrust.HIGH);
+    }
+  }
+
   /**
    * Closes the lightbox.
    *
@@ -456,10 +562,7 @@ class AmpLightbox extends AMP.BaseElement {
     if (this.isScrollable_) {
       setStyle(this.element, 'webkitOverflowScrolling', '');
     }
-    if (this.closeButtonHeader_) {
-      removeElement(this.closeButtonHeader_);
-      this.closeButtonHeader_ = null;
-    }
+
     this.getViewport()
       .leaveLightboxMode(this.element)
       .then(() => this.finalizeClose_(trust));
@@ -501,17 +604,36 @@ class AmpLightbox extends AMP.BaseElement {
     if (this.historyId_ != -1) {
       this.getHistory_().pop(this.historyId_);
     }
-    this.win.document.documentElement.removeEventListener(
+    this.document_.documentElement.removeEventListener(
       'keydown',
       this.boundCloseOnEscape_
     );
     this.boundCloseOnEscape_ = null;
+
+    this.document_.documentElement.removeEventListener(
+      'focusin',
+      this.boundFocusin_
+    );
+    this.boundFocusin_ = null;
+
+    this.untieCloseButton_();
+
+    this.removeAsContainer();
+
+    // Unmount all children when the lightbox is closed. They will automatically
+    // remount when the lightbox is opened again.
+    unmountAll(this.element, /* includeSelf */ false);
+
     Services.ownersForDoc(this.element).schedulePause(
       this.element,
       dev().assertElement(this.container_)
     );
     this.active_ = false;
     this.triggerEvent_(LightboxEvents.CLOSE, trust);
+
+    if (this.openerElement_) {
+      tryFocus(this.openerElement_);
+    }
   }
 
   /**
@@ -522,6 +644,107 @@ class AmpLightbox extends AMP.BaseElement {
     return getMode(this.win).runtime == 'inabox' || isInFie(this.element);
   }
 
+  /**
+   * Verify if focus is still inside the lightbox.
+   * @return {boolean}
+   * @private
+   */
+  hasCurrentFocus_() {
+    const {element} = this;
+    if (element.contains(document.activeElement)) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Handles closing the lightbox if focus is outside.
+   * @private
+   */
+  onFocusin_() {
+    if (!this.hasCurrentFocus_()) {
+      this.close(ActionTrust.HIGH);
+    }
+  }
+
+  /**
+   * Focus in the lightbox if it's not yet.
+   * @private
+   */
+  focusInModal_() {
+    if (!this.hasCurrentFocus_()) {
+      this.closeButton_ = this.getExistingCloseButton_();
+
+      // If we do not have a close button provided by the page author, create one
+      // at the start of the lightbox visible only for screen readers.
+      if (!this.closeButton_) {
+        this.closeButtonSR_ = this.createScreenReaderCloseButton_();
+        this.element.insertBefore(this.closeButtonSR_, this.element.firstChild);
+        this.closeButton_ = this.closeButtonSR_;
+      }
+
+      tryFocus(this.closeButton_);
+    }
+  }
+
+  /**
+   * Gets a close button, provided by the page author, if one exists.
+   * @return {?Element} The close button.
+   * @private
+   */
+  getExistingCloseButton_() {
+    if (this.closeButton_) {
+      return this.closeButton_;
+    }
+    if (this.closeButtonHeader_) {
+      return this.closeButtonHeader_;
+    }
+    const {element} = this;
+    const candidates = element.querySelectorAll('[on]');
+
+    for (let i = 0; i < candidates.length; i++) {
+      const candidate = candidates[i];
+      const hasAction = this.action_.hasResolvableActionForTarget(
+        candidate,
+        'tap',
+        element,
+        devAssert(candidate.parentElement)
+      );
+
+      if (hasAction) {
+        return candidate;
+      }
+    }
+  }
+
+  /**
+   * Creates an "invisible" close button for screen readers
+   * @return {!Element} The close button.
+   * @private
+   */
+  createScreenReaderCloseButton_() {
+    const {element} = this;
+
+    // Replacement label for invisible close button set value
+    const ariaLabel =
+      element.getAttribute('data-close-button-aria-label') || 'Close the modal';
+
+    // Invisible close button
+    const screenReaderCloseButton = this.document_.createElement('button');
+
+    screenReaderCloseButton.textContent = ariaLabel;
+    screenReaderCloseButton.classList.add('i-amphtml-screen-reader');
+    // This is for screen-readers only, should not get a tab stop. Note that
+    // screen readers can still swipe / navigate to this element, it just will
+    // not be reachable via the tab button. Note that for desktop, hitting esc
+    // to close is also an option.
+    // We do not want this in the tab order since it is not really "visible"
+    // and would be confusing to tab to if not using a screen reader.
+    screenReaderCloseButton.tabIndex = -1;
+
+    return screenReaderCloseButton;
+  }
+
   /**
    * Handles scroll on the amp-lightbox.
    * The scroll throttling and visibility calculation is similar to
@@ -557,28 +780,28 @@ class AmpLightbox extends AMP.BaseElement {
    * @private
    */
   waitForScroll_(startingScrollTop) {
-    this.scrollTimerId_ = /** @type {number} */ (Services.timerFor(
-      this.win
-    ).delay(() => {
-      if (Math.abs(startingScrollTop - this.pos_) < 30) {
-        dev().fine(
-          TAG,
-          'slow scrolling: %s - %s',
-          startingScrollTop,
-          this.pos_
-        );
-        this.scrollTimerId_ = null;
-        this.update_(this.pos_);
-      } else {
-        dev().fine(
-          TAG,
-          'fast scrolling: %s - %s',
-          startingScrollTop,
-          this.pos_
-        );
-        this.waitForScroll_(this.pos_);
-      }
-    }, 100));
+    this.scrollTimerId_ = /** @type {number} */ (
+      Services.timerFor(this.win).delay(() => {
+        if (Math.abs(startingScrollTop - this.pos_) < 30) {
+          dev().fine(
+            TAG,
+            'slow scrolling: %s - %s',
+            startingScrollTop,
+            this.pos_
+          );
+          this.scrollTimerId_ = null;
+          this.update_(this.pos_);
+        } else {
+          dev().fine(
+            TAG,
+            'fast scrolling: %s - %s',
+            startingScrollTop,
+            this.pos_
+          );
+          this.waitForScroll_(this.pos_);
+        }
+      }, 100)
+    );
   }
 
   /**
@@ -588,36 +811,22 @@ class AmpLightbox extends AMP.BaseElement {
    */
   update_(pos) {
     dev().fine(TAG, 'update_');
-    this.updateChildrenInViewport_(pos, this.oldPos_);
-    this.oldPos_ = pos;
+    this.updateChildrenInViewport_(pos);
     this.pos_ = pos;
   }
 
   /**
    * Update the inViewport status of children when scroll position changed.
    * @param {number} newPos
-   * @param {number} oldPos
    * @private
    */
-  updateChildrenInViewport_(newPos, oldPos) {
+  updateChildrenInViewport_(newPos) {
     const seen = [];
     this.forEachVisibleChild_(newPos, (cell) => {
       seen.push(cell);
       const owners = Services.ownersForDoc(this.element);
-      owners.updateInViewport(this.element, cell, true);
       owners.scheduleLayout(this.element, cell);
     });
-    if (oldPos != newPos) {
-      this.forEachVisibleChild_(oldPos, (cell) => {
-        if (!seen.includes(cell)) {
-          Services.ownersForDoc(this.element).updateInViewport(
-            this.element,
-            cell,
-            false
-          );
-        }
-      });
-    }
   }
 
   /**
@@ -684,7 +893,7 @@ class AmpLightbox extends AMP.BaseElement {
    * @private
    */
   maybeSetTransparentBody_() {
-    const {win, element} = this;
+    const {element, win} = this;
     if (!isInFie(element)) {
       return;
     }
diff --git a/extensions/amp-lightbox/0.1/amp-lightbox.md b/extensions/amp-lightbox/0.1/amp-lightbox.md
new file mode 100644
index 0000000000000..95b6ffdf71fff
--- /dev/null
+++ b/extensions/amp-lightbox/0.1/amp-lightbox.md
@@ -0,0 +1,215 @@
+---
+$category@: layout
+formats:
+  - websites
+  - ads
+  - email
+teaser:
+  text: Displays elements in a full-viewport “lightbox” modal.
+---
+
+<!---
+Copyright 2015 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.
+-->
+
+# amp-lightbox
+
+## Usage
+
+The `amp-lightbox` component defines child elements that display in a
+full-viewport overlay/modal. When the user taps or clicks an element (e.g., a
+button), the `amp-lightbox` ID referenced in the clicked element's `on`
+attribute triggers the lightbox to take up the full viewport and displays the
+child elements of the `amp-lightbox`.
+
+[tip type="read-on"]
+
+For showing images in a lightbox, there's also the
+[`<amp-image-lightbox>`](../../amp-image-lightbox/amp-image-lightbox.md)
+component. To show a gallery of images in a lightbox, you can use
+[`<amp-lightbox-gallery>`](../../amp-lightbox-gallery/amp-lightbox-gallery.md).
+
+[/tip]
+
+[filter formats="ads"]
+
+### Using `amp-lightbox` in AMPHTML ads <a name="a4a"></a>
+
+There are some differences between using `amp-lightbox` in normal AMP documents
+vs. [ads written in AMPHTML](../../amp-a4a/amp-a4a-format.md).
+
+[tip type="note"]
+
+The `amp-lightbox` component for use in AMPHTML ads is
+[experimental](https://amp.dev/documentation/guides-and-tutorials/learn/experimental)
+and under active development. To use `amp-lightbox` in AMPHTML ads,
+[enable the `amp-lightbox-a4a-proto` experiment](http://cdn.ampproject.org/experiments.html).
+
+[/tip]
+
+#### Required `close-button`
+
+For AMPHTML ads, the `close-button` attribute is required. This attribute causes
+a header to render at the top of your lightbox. The header contains a close
+button and a label that displays "Ad". Requirement of this header is needed to:
+
+-   Set a consistent and predictable user experience for AMPHTML ads.
+-   Ensure that an exit point for the lightbox always exists, otherwise the
+    creative could effectively hijack the host document content via a lightbox.
+
+The `close-button` attribute is required and only allowed in AMPHTML ads. In
+regular AMP documents, you can render a close button wherever you need it as
+part of the `<amp-lightbox>` content.
+
+#### Scrollable lightboxes are disallowed
+
+For AMPHTML ads, scrollable lightboxes are not allowed.
+
+#### Transparent background
+
+When you use `<amp-lightbox>` in AMPHTML ads, the background of your `<body>`
+element becomes transparent because the AMP runtime resizes and realigns your
+creative's content before the lightbox is expanded. This is done to prevent a
+visual "jump" of the creative while the lightbox opens. If your creative needs a
+background, set it on an intermediate container (like a full-size `<div>`)
+instead of the `<body>`.
+
+When the AMPHTML ad is running in a third-party environment (for example, in a
+non-AMP document), the creative is centered relative to the viewport and is then
+expanded. This is because third-party iframes need to rely on a postMessage API
+to enable features like frame resizing, which is asynchronous, so centering the
+creative first allows a smooth transition without visual jumps.
+
+#### Examples of transitions in lightboxes for AMPHTML ads
+
+In the examples below, we demonstrate how the transition looks for an AMPHTML ad
+that has the `animate-in="fly-in-bottom"` attribute set on the lightbox element
+for an AMPHTML ad in a friendly iframe, and an AMPHTML ad in a third-party
+iframe.
+
+##### On friendly iframes (e.g., coming from an AMP cache)
+
+<amp-img alt="lightbox ad in friendly iframe"
+    layout="fixed"
+    width="360" height="480"
+    src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/lightbox-ad-fie.gif" >
+<noscript>
+<img alt="lightbox ad in friendly iframe" src="../../docs/spec/img/lightbox-ad-fie.gif" />
+</noscript>
+</amp-img>
+
+##### On third-party iframes (e.g., outside the AMP cache)
+
+<amp-img alt="lightbox ad in 3p iframe"
+    layout="fixed"
+    width="360" height="480"
+    src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/lightbox-ad-3p.gif" >
+<noscript>
+<img alt="lightbox ad in 3p iframe" src="../../docs/spec/img/lightbox-ad-3p.gif" />
+</noscript>
+</amp-img>
+
+[/filter]<!-- formats="ads" -->
+
+## Attributes
+
+### `id`
+
+A unique identifier for the lightbox.
+
+### `layout`
+
+Must be set to `nodisplay`.
+
+[filter formats="ads"]
+
+### `close-button`
+
+Renders a close button header at the top of the lightbox. This attribute is
+required for use with [AMPHTML Ads](#a4a). It is invalid on other AMP formats.
+
+[/filter]<!-- formats="ads" -->
+
+### `animate-in` (optional)
+
+Defines the style of animation for opening the lightbox. By default, this will
+be set to `fade-in`. Valid values are `fade-in`, `fly-in-bottom`, and
+`fly-in-top`.
+
+[tip type="important"]
+
+The `fly-in-top` and `fly-in-bottom` animation presets modify the `transform`
+property of the `amp-lightbox` element. Do not rely on transforming the
+`amp-lightbox` element directly. If you need to apply a transform, set it on a
+nested element instead.
+
+[/tip]
+
+[filter formats="websites, stories"]
+
+### `data-close-button-aria-label` (optional)
+
+Optional attribute used to set ARIA label for the autogenerated close button
+added for accessibility. By default the applied label is "Close the modal".
+
+### `scrollable` (optional)
+
+When the `scrollable` attribute is present, the content of the lightbox can
+scroll when overflowing the height of the lightbox.
+
+[/filter]<!-- formats="websites, stories" -->
+
+## Actions
+
+### `open` (default)
+
+Opens the lightbox.
+
+### `close`
+
+Closes the lightbox.
+
+## Styling
+
+You can style the `amp-lightbox` with standard CSS.
+
+## Accessibility
+
+Pressing the escape key on the keyboard or setting focus on an element outside
+the lightbox closes the lightbox. Alternatively, setting the `on` attribute on
+one or more elements within the lightbox and setting its method to `close`
+closes the lightbox when the element is tapped or clicked. Once closed, the
+focus will be sent back to the trigger element.
+
+For accessibility reasons, if the user does not provide a focus in the lightbox
+on open (using `autofocus` attribute or forcing focus on open), the focus will
+be set on the first element using `on:tap`. Otherwise, a close button only
+visible to screen readers, optionally using `data-close-button-aria-label`
+attribute value, will be created and focused on.
+
+```html
+<button on="tap:quote-lb">See Quote</button>
+<amp-lightbox id="quote-lb" layout="nodisplay">
+  <blockquote>
+    "Don't talk to me about JavaScript fatigue" - Horse JS
+  </blockquote>
+  <button on="tap:quote-lb.close">Nice!</button>
+</amp-lightbox>
+```
+
+## Validation
+
+See [`amp-lightbox` rules](../validator-amp-lightbox.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-lightbox/0.1/test-e2e/test-amp-lightbox.js b/extensions/amp-lightbox/0.1/test-e2e/test-amp-lightbox.js
deleted file mode 100644
index a8dc02d5801ec..0000000000000
--- a/extensions/amp-lightbox/0.1/test-e2e/test-amp-lightbox.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * 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.
- */
-
-describes.endtoend(
-  'amp-lightbox',
-  {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-lightbox/amp-lightbox.html',
-    environments: 'ampdoc-amp4ads-preset',
-    experiments: ['amp-lightbox-a4a-proto'],
-  },
-  async (env) => {
-    let controller;
-
-    beforeEach(() => {
-      controller = env.controller;
-    });
-
-    it('should render correctly', async () => {
-      const lightbox = await controller.findElement('#lightbox');
-
-      await expect(controller.getElementProperty(lightbox, 'hidden')).to.be
-        .true;
-      const image = await controller.findElement('#image');
-      await expect(
-        controller.getElementProperty(image, 'clientWidth')
-      ).to.equal(0);
-    });
-
-    it('should open the lightbox', async () => {
-      const open = await controller.findElement('#open');
-      await controller.click(open);
-
-      const lightbox = await controller.findElement('#lightbox');
-      await expect(controller.getElementProperty(lightbox, 'hidden')).to.be
-        .false;
-
-      const documentElement = await controller.getDocumentElement();
-      const width = await controller.getElementProperty(
-        documentElement,
-        'clientWidth'
-      );
-      await expect(
-        controller.getElementProperty(lightbox, 'clientWidth')
-      ).to.equal(width);
-
-      const backingImage = await controller.findElement('#image img');
-      await expect(
-        controller.getElementProperty(backingImage, 'clientWidth')
-      ).to.equal(641);
-    });
-
-    it('should close the lightbox', async () => {
-      const open = await controller.findElement('#open');
-      await controller.click(open);
-
-      const lightbox = await controller.findElement('#lightbox');
-      await expect(controller.getElementProperty(lightbox, 'hidden')).to.be
-        .false;
-
-      const close = await controller.findElement('#close');
-      await controller.click(close);
-
-      await expect(controller.getElementProperty(lightbox, 'hidden')).to.be
-        .true;
-    });
-  }
-);
diff --git a/extensions/amp-lightbox/0.1/test/test-amp-lightbox.js b/extensions/amp-lightbox/0.1/test/test-amp-lightbox.js
index 5d146e3a0de56..5d9afb955c402 100644
--- a/extensions/amp-lightbox/0.1/test/test-amp-lightbox.js
+++ b/extensions/amp-lightbox/0.1/test/test-amp-lightbox.js
@@ -15,13 +15,12 @@
  */
 
 import '../amp-lightbox';
+import * as dom from '../../../../src/dom';
 import {ActionService} from '../../../../src/service/action-impl';
-import {ActionTrust} from '../../../../src/action-constants';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
+import {Keys} from '../../../../src/core/constants/key-codes';
 import {Services} from '../../../../src/services';
-import {
-  createElementWithAttributes,
-  whenUpgradedToCustomElement,
-} from '../../../../src/dom';
+import {whenCalled} from '../../../../testing/test-helper.js';
 
 describes.realWin(
   'amp-lightbox component',
@@ -39,24 +38,60 @@ describes.realWin(
       doc = win.document;
     });
 
+    function createLightbox() {
+      const element = dom.createElementWithAttributes(doc, 'amp-lightbox', {
+        'id': 'myLightbox',
+        'layout': 'nodisplay',
+      });
+      doc.body.appendChild(element);
+
+      return element;
+    }
+
+    function createOpeningButton(id) {
+      const button = dom.createElementWithAttributes(doc, 'button', {
+        'id': id,
+        'on': 'tap:myLightbox.open',
+      });
+      button.textContent = 'Open lightbox';
+      doc.body.appendChild(button);
+      return button;
+    }
+
+    function createCloseButton() {
+      const button = dom.createElementWithAttributes(doc, 'button', {
+        'id': 'closeButton',
+        'on': 'tap:myLightbox.close',
+      });
+      button.textContent = 'X';
+      return button;
+    }
+
+    function createLink(id) {
+      const oneLink = dom.createElementWithAttributes(doc, 'a', {
+        'href': 'https://amp.dev/',
+        'id': id,
+      });
+      oneLink.textContent = 'Something to focus on';
+      return oneLink;
+    }
+
     it('should allow default actions in email documents', async () => {
       doc.documentElement.setAttribute('amp4email', '');
       const action = new ActionService(env.ampdoc, doc);
       env.sandbox.stub(Services, 'actionServiceForDoc').returns(action);
 
-      const element = createElementWithAttributes(doc, 'amp-lightbox', {
-        'layout': 'nodisplay',
-      });
-      const img = createElementWithAttributes(doc, 'amp-img', {
-        'src': '/examples/img/sample.jpg',
-        'width': '640',
-        'height': '480',
-      });
-      element.appendChild(img);
-      doc.body.appendChild(element);
+      const element = createLightbox();
       env.sandbox.spy(element, 'enqueAction');
       env.sandbox.stub(element, 'getDefaultActionAlias');
-      await whenUpgradedToCustomElement(element);
+      await dom.whenUpgradedToCustomElement(element);
+      const impl = await element.getImpl(true);
+      impl.getHistory_ = () => {
+        return {
+          pop: () => {},
+          push: () => Promise.resolve(11),
+        };
+      };
 
       ['open', 'close'].forEach((method) => {
         action.execute(
@@ -68,6 +103,7 @@ describes.realWin(
           'event',
           ActionTrust.HIGH
         );
+        expect(element.enqueAction.callCount).to.be.above(0);
         expect(element.enqueAction).to.be.calledWith(
           env.sandbox.match({
             actionEventType: '?',
@@ -82,5 +118,285 @@ describes.realWin(
         );
       });
     });
+
+    it('should close on ESC', async () => {
+      const lightbox = createLightbox();
+      const impl = await lightbox.getImpl(true);
+      impl.getHistory_ = () => {
+        return {
+          pop: () => {},
+          push: () => Promise.resolve(11),
+        };
+      };
+
+      const sourceElement = createOpeningButton('openBtn');
+      const setupCloseSpy = env.sandbox.spy(impl, 'close');
+
+      impl.open_({caller: sourceElement});
+      impl.closeOnEscape_(new KeyboardEvent('keydown', {key: Keys.ENTER}));
+      impl.closeOnEscape_(new KeyboardEvent('keydown', {key: Keys.ESCAPE}));
+      expect(setupCloseSpy).to.be.calledOnce;
+    });
+
+    it('should not change focus or create a button if a focus has been made in the modal', async () => {
+      const openButton = createOpeningButton('openingButton');
+      const lightbox = createLightbox();
+      const myLink = createLink('randomLink');
+      myLink.setAttribute('autofocus', '');
+      lightbox.appendChild(myLink);
+
+      const impl = await lightbox.getImpl(true);
+      impl.getHistory_ = () => {
+        return {
+          pop: () => {},
+          push: () => Promise.resolve(11),
+        };
+      };
+      env.sandbox.stub(impl, 'hasCurrentFocus_').returns(true);
+      const focusInModalSpy = env.sandbox.spy(impl, 'focusInModal_');
+      const tryFocusSpy = env.sandbox.spy(dom, 'tryFocus');
+      const createSRBtnSpy = env.sandbox.spy(
+        impl,
+        'createScreenReaderCloseButton_'
+      );
+
+      openButton.click();
+
+      return whenCalled(focusInModalSpy).then(() => {
+        expect(tryFocusSpy).to.be.calledWith(myLink);
+        expect(createSRBtnSpy).not.to.be.called;
+      });
+    });
+
+    it('should focus on close button if no handmade focus but has close button', async () => {
+      const lightbox = createLightbox();
+      const closeButton = createCloseButton();
+      lightbox.appendChild(closeButton);
+      const impl = await lightbox.getImpl(true);
+
+      const tryFocusSpy = env.sandbox.spy(dom, 'tryFocus');
+      const finalizeSpy = env.sandbox.spy(impl, 'finalizeOpen_');
+      const createCloseButtonSpy = env.sandbox.spy(
+        impl,
+        'createScreenReaderCloseButton_'
+      );
+      impl.getHistory_ = () => {
+        return {
+          pop: () => {},
+          push: () => Promise.resolve(11),
+        };
+      };
+
+      const args = {};
+      const openInvocation = {
+        method: 'open',
+        args,
+        satisfiesTrust: () => true,
+      };
+      impl.executeAction(openInvocation);
+
+      return whenCalled(finalizeSpy).then(() => {
+        expect(createCloseButtonSpy).not.to.be.calledWith(closeButton);
+        expect(tryFocusSpy).to.be.calledWith(closeButton);
+      });
+    });
+
+    it('should create close button and focus on it if no handmade focus and no close button', async () => {
+      const lightbox = createLightbox();
+      const impl = await lightbox.getImpl(true);
+
+      const tryFocusSpy = env.sandbox.spy(dom, 'tryFocus');
+      const finalizeSpy = env.sandbox.spy(impl, 'finalizeOpen_');
+      const createCloseButtonSpy = env.sandbox.spy(
+        impl,
+        'createScreenReaderCloseButton_'
+      );
+      impl.getHistory_ = () => {
+        return {
+          pop: () => {},
+          push: () => Promise.resolve(11),
+        };
+      };
+
+      const args = {};
+      const openInvocation = {
+        method: 'open',
+        args,
+        satisfiesTrust: () => true,
+      };
+      impl.executeAction(openInvocation);
+
+      return whenCalled(finalizeSpy).then(() => {
+        expect(createCloseButtonSpy).to.be.calledOnce;
+        expect(tryFocusSpy).to.be.calledOnce;
+      });
+    });
+
+    it('should stay in modal if focus stays in modal and close if outside', async () => {
+      const lightbox = createLightbox();
+      const insideLink = createLink('insideLink');
+      lightbox.appendChild(insideLink);
+      const impl = await lightbox.getImpl(true);
+
+      const outsideLink = createLink('outsideLink');
+      doc.body.appendChild(outsideLink);
+
+      const finalizeSpy = env.sandbox.spy(impl, 'finalizeOpen_');
+      const hasFocusStub = env.sandbox.stub(impl, 'hasCurrentFocus_');
+
+      impl.getHistory_ = () => {
+        return {
+          pop: () => {},
+          push: () => Promise.resolve(11),
+        };
+      };
+
+      const args = {};
+      const openInvocation = {
+        method: 'open',
+        args,
+        satisfiesTrust: () => true,
+      };
+      impl.executeAction(openInvocation);
+
+      return whenCalled(finalizeSpy).then(() => {
+        const closeSpy = env.sandbox.spy(impl, 'close');
+
+        hasFocusStub.returns(true);
+        dom.tryFocus(insideLink);
+        expect(closeSpy).not.to.be.called;
+
+        hasFocusStub.returns(false);
+        dom.tryFocus(outsideLink);
+        expect(closeSpy).to.be.calledOnce;
+      });
+    });
+
+    it('should return focus to source element after close', async () => {
+      const openButton = createOpeningButton('openingButton');
+      const lightbox = createLightbox();
+      const closeButton = createCloseButton();
+      lightbox.appendChild(closeButton);
+      const impl = await lightbox.getImpl(true);
+
+      const openSpy = env.sandbox.spy(impl, 'finalizeOpen_');
+      const closeSpy = env.sandbox.spy(impl, 'finalizeClose_');
+      const tryFocusSpy = env.sandbox.spy(dom, 'tryFocus');
+      impl.getHistory_ = () => {
+        return {
+          pop: () => {},
+          push: () => Promise.resolve(11),
+        };
+      };
+
+      openButton.click();
+      whenCalled(openSpy).then(() => closeButton.click());
+
+      return whenCalled(closeSpy).then(() => {
+        expect(tryFocusSpy).to.be.calledWith(openButton);
+      });
+    });
+
+    it('should create `i-amphtml-ad-close-header` but no close button if param then focus on it', async () => {
+      const lightbox = createLightbox();
+      lightbox.setAttribute('close-button', '');
+      const impl = await lightbox.getImpl(true);
+
+      const tryFocusSpy = env.sandbox.spy(dom, 'tryFocus');
+      const finalizeSpy = env.sandbox.spy(impl, 'finalizeOpen_');
+      const tieSpy = env.sandbox.spy(impl, 'tieCloseButton_');
+      const createCloseButtonSpy = env.sandbox.spy(
+        impl,
+        'createScreenReaderCloseButton_'
+      );
+      impl.getHistory_ = () => {
+        return {
+          pop: () => {},
+          push: () => Promise.resolve(11),
+        };
+      };
+
+      const args = {};
+      const openInvocation = {
+        method: 'open',
+        args,
+        satisfiesTrust: () => true,
+      };
+      impl.executeAction(openInvocation);
+
+      return whenCalled(finalizeSpy).then(() => {
+        expect(createCloseButtonSpy).not.to.be.called;
+        expect(tieSpy).to.be.calledOnce;
+        expect(tryFocusSpy).to.be.calledWith(impl.closeButtonHeader_);
+      });
+    });
+
+    it('should set itself as a container when fully opened', async () => {
+      const lightbox = createLightbox();
+      const impl = await lightbox.getImpl(true);
+      env.sandbox.stub(lightbox, 'setAsContainerInternal');
+
+      const finalizeSpy = env.sandbox.spy(impl, 'finalizeOpen_');
+      impl.getHistory_ = () => {
+        return {
+          pop: () => {},
+          push: () => Promise.resolve(11),
+        };
+      };
+
+      const args = {};
+      const openInvocation = {
+        method: 'open',
+        args,
+        satisfiesTrust: () => true,
+      };
+      impl.executeAction(openInvocation);
+
+      expect(lightbox.setAsContainerInternal).to.not.be.called;
+
+      await whenCalled(finalizeSpy);
+
+      expect(lightbox.setAsContainerInternal).to.be.calledOnce;
+    });
+
+    it('should set and remove itself as a container and unmount children', async () => {
+      const lightbox = createLightbox();
+
+      // Lightbox has a child.
+      const child = dom.createElementWithAttributes(doc, 'amp-img', {
+        layout: 'nodisplay',
+      });
+      lightbox.appendChild(child);
+      env.sandbox.stub(child, 'unmount');
+
+      const openButton = createOpeningButton('openingButton');
+      const closeButton = createCloseButton();
+      lightbox.appendChild(closeButton);
+
+      const impl = await lightbox.getImpl(true);
+      env.sandbox.stub(lightbox, 'setAsContainerInternal');
+      env.sandbox.stub(lightbox, 'removeAsContainerInternal');
+
+      const openSpy = env.sandbox.spy(impl, 'finalizeOpen_');
+      const closeSpy = env.sandbox.spy(impl, 'finalizeClose_');
+      impl.getHistory_ = () => {
+        return {
+          pop: () => {},
+          push: () => Promise.resolve(11),
+        };
+      };
+
+      openButton.click();
+      expect(lightbox.setAsContainerInternal).to.not.be.called;
+      await whenCalled(openSpy);
+      expect(lightbox.setAsContainerInternal).to.be.calledOnce;
+
+      closeButton.click();
+      expect(lightbox.removeAsContainerInternal).to.not.be.called;
+      expect(child.unmount).to.not.be.called;
+      await whenCalled(closeSpy);
+      expect(lightbox.removeAsContainerInternal).to.be.calledOnce;
+      expect(child.unmount).to.be.calledOnce;
+    });
   }
 );
diff --git a/extensions/amp-lightbox/0.1/test/validator-amp4ads-lightbox.out b/extensions/amp-lightbox/0.1/test/validator-amp4ads-lightbox.out
index 375d8d19fa9f9..1a1640f5252b9 100644
--- a/extensions/amp-lightbox/0.1/test/validator-amp4ads-lightbox.out
+++ b/extensions/amp-lightbox/0.1/test/validator-amp4ads-lightbox.out
@@ -35,13 +35,13 @@ FAIL
 |    <!-- Invalid: close-button not present. -->
 |    <amp-lightbox layout="nodisplay">
 >>   ^~~~~~~~~
-amp-lightbox/0.1/test/validator-amp4ads-lightbox.html:35:2 The mandatory attribute 'close-button' is missing in tag 'amp-lightbox [AMP4ADS]'. (see https://amp.dev/documentation/components/amp-lightbox)
+amp-lightbox/0.1/test/validator-amp4ads-lightbox.html:35:2 The mandatory attribute 'close-button' is missing in tag 'amp-lightbox'. (see https://amp.dev/documentation/components/amp-lightbox)
 |    </amp-lightbox>
 |
 |    <!-- Invalid: scrollable present. -->
 |    <amp-lightbox layout="nodisplay" close-button scrollable>
 >>   ^~~~~~~~~
-amp-lightbox/0.1/test/validator-amp4ads-lightbox.html:39:2 The attribute 'scrollable' may not appear in tag 'amp-lightbox [AMP4ADS]'. (see https://amp.dev/documentation/components/amp-lightbox)
+amp-lightbox/0.1/test/validator-amp4ads-lightbox.html:39:2 The attribute 'scrollable' may not appear in tag 'amp-lightbox'. (see https://amp.dev/documentation/components/amp-lightbox)
 |    </amp-lightbox>
 |  </body>
 |  </html>
diff --git a/extensions/amp-lightbox/1.0/amp-lightbox.css b/extensions/amp-lightbox/1.0/amp-lightbox.css
new file mode 100644
index 0000000000000..9b3faf378ae01
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/amp-lightbox.css
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2016 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.
+ */
+
+/* Pre-upgrade: not displayed */
+amp-lightbox[hidden] {
+  display: none !important;
+}
+
+amp-lightbox {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.9);
+  color: white;
+  /* Note: visibility: hidden is applied to this layer to allow the
+     Preact layer to fully control animation transitions. */
+  visibility: hidden;
+}
+
+amp-lightbox::part(lightbox) {
+  /* Note: background should be applied/inherited by all elements
+    in amp-lightbox > c > [part=lightbox] because:
+     - amp-lightbox does not show a background due to visibility: hidden
+     - c does not paint a background due to display: contents
+     - therefore only [part] visibly applies the background value */
+  background: inherit;
+  color: inherit;
+}
diff --git a/extensions/amp-lightbox/1.0/amp-lightbox.js b/extensions/amp-lightbox/1.0/amp-lightbox.js
new file mode 100644
index 0000000000000..d95e3e6c79325
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/amp-lightbox.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  ActionTrust,
+  DEFAULT_ACTION,
+} from '../../../src/core/constants/action-constants';
+import {BaseElement} from './base-element';
+import {CSS} from '../../../build/amp-lightbox-1.0.css';
+import {Services} from '../../../src/services';
+import {createCustomEvent} from '../../../src/event-helper';
+import {isExperimentOn} from '../../../src/experiments';
+import {toWin} from '../../../src/types';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-lightbox';
+
+/** @extends {PreactBaseElement<LightboxDef.Api>} */
+class AmpLightbox extends BaseElement {
+  /** @override */
+  init() {
+    this.registerApiAction(
+      DEFAULT_ACTION,
+      (api) => api.open(),
+      ActionTrust.LOW
+    );
+    this.registerApiAction('open', (api) => api.open(), ActionTrust.LOW);
+    this.registerApiAction('close', (api) => api.close(), ActionTrust.LOW);
+
+    return super.init();
+  }
+
+  /** @override */
+  triggerEvent(element, eventName, detail) {
+    const event = createCustomEvent(
+      toWin(element.ownerDocument.defaultView),
+      `amp-lightbox.${eventName}`,
+      detail
+    );
+    Services.actionServiceForDoc(element).trigger(
+      element,
+      eventName,
+      event,
+      ActionTrust.HIGH
+    );
+
+    super.triggerEvent(element, eventName, detail);
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-lightbox'),
+      'expected global "bento" or specific "bento-lightbox" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpLightbox, CSS);
+});
diff --git a/extensions/amp-lightbox/1.0/base-element.js b/extensions/amp-lightbox/1.0/base-element.js
new file mode 100644
index 0000000000000..690e43da6af1d
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/base-element.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {CSS as COMPONENT_CSS} from './component.jss';
+import {Lightbox} from './component';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {dict} from '../../../src/core/types/object';
+import {toggle} from '../../../src/style';
+import {toggleAttribute} from '../../../src/dom';
+import {unmountAll} from '../../../src/utils/resource-container-helper';
+
+export class BaseElement extends PreactBaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {boolean} */
+    this.open_ = false;
+  }
+
+  /** @override */
+  init() {
+    return dict({
+      'onBeforeOpen': () => this.beforeOpen_(),
+      'onAfterOpen': () => this.afterOpen_(),
+      'onAfterClose': () => this.afterClose_(),
+    });
+  }
+
+  /** @override */
+  unmountCallback() {
+    this.removeAsContainer();
+  }
+
+  /** @private */
+  beforeOpen_() {
+    this.open_ = true;
+    toggleAttribute(this.element, 'open', true);
+    toggle(this.element, true);
+    this.triggerEvent(this.element, 'open');
+  }
+
+  /** @private */
+  afterOpen_() {
+    const scroller = this.element.shadowRoot.querySelector('[part=scroller]');
+    this.setAsContainer(scroller);
+  }
+
+  /** @private */
+  afterClose_() {
+    this.open_ = false;
+    toggleAttribute(this.element, 'open', false);
+    toggle(this.element, false);
+    this.triggerEvent(this.element, 'close');
+
+    this.removeAsContainer();
+
+    // Unmount all children when the lightbox is closed. They will automatically
+    // remount when the lightbox is opened again.
+    unmountAll(this.element, /* includeSelf */ false);
+  }
+
+  /** @override */
+  mutationObserverCallback() {
+    const open = this.element.hasAttribute('open');
+    if (open === this.open_) {
+      return;
+    }
+    this.open_ = open;
+    open ? this.api().open() : this.api().close();
+  }
+}
+
+/** @override */
+BaseElement['Component'] = Lightbox;
+
+/** @override */
+BaseElement['props'] = {
+  'animation': {attr: 'animation', media: true, default: 'fade-in'},
+  'closeButtonAs': {selector: '[slot="close-button"]', single: true, as: true},
+  'children': {passthrough: true},
+};
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
+
+/** @override */
+BaseElement['shadowCss'] = COMPONENT_CSS;
diff --git a/extensions/amp-lightbox/1.0/component.js b/extensions/amp-lightbox/1.0/component.js
new file mode 100644
index 0000000000000..b2221c9ddacb9
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/component.js
@@ -0,0 +1,210 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {ContainWrapper, useValueRef} from '../../../src/preact/component';
+import {Keys} from '../../../src/core/constants/key-codes';
+import {forwardRef} from '../../../src/preact/compat';
+import {setStyle} from '../../../src/style';
+import {tryFocus} from '../../../src/dom';
+import {
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from '../../../src/preact';
+import {useStyles} from './component.jss';
+
+const ANIMATION_DURATION = 200;
+const ANIMATION_PRESETS = {
+  'fade-in': [
+    {opacity: 0, visibility: 'visible'},
+    {opacity: 1, visibility: 'visible'},
+  ],
+  'fly-in-top': [
+    {opacity: 0, transform: 'translate(0,-100%)', visibility: 'visible'},
+    {opacity: 1, transform: 'translate(0, 0)', visibility: 'visible'},
+  ],
+  'fly-in-bottom': [
+    {opacity: 0, transform: 'translate(0, 100%)', visibility: 'visible'},
+    {opacity: 1, transform: 'translate(0, 0)', visibility: 'visible'},
+  ],
+};
+
+const DEFAULT_CLOSE_LABEL = 'Close the modal';
+
+const CONTENT_PROPS = {'part': 'scroller'};
+
+/**
+ * @param {!LightboxDef.Props} props
+ * @param {{current: ?LightboxDef.LightboxApi}} ref
+ * @return {PreactDef.Renderable}
+ */
+function LightboxWithRef(
+  {
+    animation = 'fade-in',
+    children,
+    closeButtonAs,
+    onAfterClose,
+    onAfterOpen,
+    onBeforeOpen,
+    ...rest
+  },
+  ref
+) {
+  // There are two phases to open and close.
+  // To open, we mount and render the contents (invisible), then animate the display (visible).
+  // To close, it's the reverse.
+  // `mounted` mounts the component. `visible` plays the animation.
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const classes = useStyles();
+  const lightboxRef = useRef();
+
+  // We are using refs here to refer to common strings, objects, and functions used.
+  // This is because they are needed within `useEffect` calls below (but are not depended for triggering)
+  // We use `useValueRef` for props that might change (user-controlled)
+  const animationRef = useValueRef(animation);
+  const onBeforeOpenRef = useValueRef(onBeforeOpen);
+  const onAfterCloseRef = useValueRef(onAfterClose);
+  const onAfterOpenRef = useValueRef(onAfterOpen);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: () => {
+        onBeforeOpenRef.current?.();
+        setMounted(true);
+        setVisible(true);
+      },
+      close: () => setVisible(false),
+    }),
+    [onBeforeOpenRef]
+  );
+
+  useLayoutEffect(() => {
+    const element = lightboxRef.current;
+    if (!element) {
+      return;
+    }
+    let animation;
+    // Set pre-animation visibility state, to be flipped post-animation.
+    setStyle(element, 'visibility', visible ? 'hidden' : 'visible');
+
+    // "Make Visible" Animation
+    if (visible) {
+      const postVisibleAnim = () => {
+        setStyle(element, 'opacity', 1);
+        setStyle(element, 'visibility', 'visible');
+        tryFocus(element);
+        onAfterOpenRef.current?.();
+      };
+      if (!element.animate) {
+        postVisibleAnim();
+        return;
+      }
+      animation = element.animate(ANIMATION_PRESETS[animationRef.current], {
+        duration: ANIMATION_DURATION,
+        fill: 'both',
+        easing: 'ease-in',
+      });
+      animation.onfinish = postVisibleAnim;
+    } else {
+      // "Make Invisible" Animation
+      const postInvisibleAnim = () => {
+        setStyle(element, 'opacity', 0);
+        setStyle(element, 'visibility', 'hidden');
+        if (onAfterCloseRef.current) {
+          onAfterCloseRef.current();
+        }
+        animation = null;
+        setMounted(false);
+      };
+      if (!element.animate) {
+        postInvisibleAnim();
+        return;
+      }
+      animation = element.animate(ANIMATION_PRESETS[animationRef.current], {
+        duration: ANIMATION_DURATION,
+        direction: 'reverse',
+        fill: 'both',
+        easing: 'ease-in',
+      });
+      animation.onfinish = postInvisibleAnim;
+    }
+    return () => {
+      if (animation) {
+        animation.cancel();
+      }
+    };
+  }, [visible, animationRef, onAfterCloseRef, onAfterOpenRef]);
+
+  return (
+    mounted && (
+      <ContainWrapper
+        ref={lightboxRef}
+        size={true}
+        layout={true}
+        paint={true}
+        part="lightbox"
+        contentClassName={classes.content}
+        wrapperClassName={classes.wrapper}
+        contentProps={CONTENT_PROPS}
+        role="dialog"
+        tabIndex="0"
+        onKeyDown={(event) => {
+          if (event.key === Keys.ESCAPE) {
+            setVisible(false);
+          }
+        }}
+        {...rest}
+      >
+        <CloseButton as={closeButtonAs} onClick={() => setVisible(false)} />
+        {children}
+      </ContainWrapper>
+    )
+  );
+}
+
+const Lightbox = forwardRef(LightboxWithRef);
+Lightbox.displayName = 'Lightbox';
+export {Lightbox};
+
+/**
+ *
+ * @param {!LightboxDef.CloseButtonProps} props
+ * @return {PreactDef.Renderable}
+ */
+function CloseButton({onClick, as: Comp = ScreenReaderCloseButton}) {
+  return <Comp aria-label={DEFAULT_CLOSE_LABEL} onClick={onClick} />;
+}
+
+/**
+ * This is for screen-readers only, should not get a tab stop. Note that
+ * screen readers can still swipe / navigate to this element, it just will
+ * not be reachable via the tab button. Note that for desktop, hitting esc
+ * to close is also an option.
+ *
+ * We do not want this in the tab order since it is not really "visible"
+ * and would be confusing to tab to if not using a screen reader.
+ *
+ * @param {!LightboxDef.CloseButtonProps} props
+ * @return {PreactDef.Renderable}
+ */
+function ScreenReaderCloseButton(props) {
+  const classes = useStyles();
+  return <button {...props} tabIndex={-1} className={classes.closeButton} />;
+}
diff --git a/extensions/amp-lightbox/1.0/component.jss.js b/extensions/amp-lightbox/1.0/component.jss.js
new file mode 100644
index 0000000000000..466103b0ec254
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/component.jss.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+const closeButton = {
+  position: 'fixed',
+  /* keep it on viewport */
+  top: 0,
+  left: 0,
+  /* give it non-zero size, VoiceOver on Safari requires at least 2 pixels
+before allowing buttons to be activated. */
+  width: '2px',
+  height: '2px',
+  /* visually hide it with overflow and opacity */
+  opacity: 0,
+  overflow: 'hidden',
+  /* remove any margin or padding */
+  border: 'none',
+  margin: 0,
+  padding: 0,
+  /* ensure no other style sets display to none */
+  display: 'block',
+  visibility: 'visible',
+};
+
+const wrapper = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  width: '100%',
+  height: '100%',
+  position: 'fixed',
+  boxSizing: 'border-box',
+  zIndex: 1000,
+  backgroundColor: 'rgba(0, 0, 0, 0.9)',
+  color: '#fff',
+};
+
+const content = {
+  overflow: 'auto !important',
+  overscrollBehavior: 'none !important',
+};
+
+const JSS = {
+  closeButton,
+  wrapper,
+  content,
+};
+
+// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
+// eslint-disable-next-line local/no-export-side-effect
+export const useStyles = createUseStyles(JSS);
diff --git a/extensions/amp-lightbox/1.0/component.type.js b/extensions/amp-lightbox/1.0/component.type.js
new file mode 100644
index 0000000000000..36704894887c5
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/component.type.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+var LightboxDef = {};
+
+/**
+ * @typedef {{
+ *   id: (string),
+ *   animation: (string|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ *   closeButtonAs: (function():PreactDef.Renderable|undefined),
+ *   scrollable: (boolean),
+ *   initialOpen: (boolean),
+ *   onBeforeOpen: (function():void|undefined),
+ *   onAfterOpen: (function():void|undefined),
+ *   onAfterClose: (function():void|undefined),
+ * }}
+ */
+LightboxDef.Props;
+
+/**
+ * @typedef {{
+ *   aria-label: (string),
+ *   as: (function():PreactDef.Renderable|undefined),
+ *   onClick: function():void,
+ * }}
+ */
+LightboxDef.CloseButtonProps;
+
+/** @interface */
+LightboxDef.LightboxApi = class {
+  /** Open the lightbox */
+  open() {}
+
+  /** Close the lightbox */
+  close() {}
+};
diff --git a/extensions/amp-lightbox/1.0/package.json b/extensions/amp-lightbox/1.0/package.json
new file mode 100644
index 0000000000000..89af2978cf8cf
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-lightbox",
+  "version": "VERSION",
+  "description": "AMP Lightbox Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "./dist/component.js",
+  "module": "./dist/component-preact.module.js",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "./dist/component-preact.module.js",
+      "require": "./dist/component-preact.js"
+    },
+    "./react": {
+      "import": "./dist/component-react.module.js",
+      "require": "./dist/component-react.js"
+    }
+  },
+  "files": ["dist/*", "react.js"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml.git",
+    "directory": "extensions/amp-lightbox/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox/1.0",
+  "peerDependencies": {
+    "preact": "^10.2.1",
+    "react": "^17.0.0"
+  }
+}
diff --git a/extensions/amp-lightbox/1.0/react.js b/extensions/amp-lightbox/1.0/react.js
new file mode 100644
index 0000000000000..0b2957c35c38d
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/react.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-env node */
+// eslint-disable-next-line local/no-module-exports
+module.exports = require('./dist/component-react');
diff --git a/extensions/amp-lightbox/1.0/storybook/Basic.amp.js b/extensions/amp-lightbox/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..4236cb938f3ac
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/storybook/Basic.amp.js
@@ -0,0 +1,340 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, select, text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-lightbox-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-lightbox', version: '1.0'}],
+  },
+};
+
+export const Default = () => {
+  const animation = select('animation', [
+    'fade-in',
+    'fly-in-top',
+    'fly-in-bottom',
+  ]);
+  const backgroundColor = text('background color', '');
+  const color = text('font color', '');
+  return (
+    <>
+      <style>{`
+        #lightbox {
+          background-color: ${backgroundColor};
+          color: ${color};
+        }
+      `}</style>
+      <div style="height: 300px;">
+        <amp-lightbox id="lightbox" layout="nodisplay" animation={animation}>
+          <p>Test</p>
+          <button slot="close-button">Close</button>
+        </amp-lightbox>
+        <div class="buttons">
+          <button on="tap:lightbox">Open</button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export const overflowAuto = () => {
+  const animation = select('animation', [
+    'fade-in',
+    'fly-in-top',
+    'fly-in-bottom',
+  ]);
+  const backgroundColor = text('background color', 'rgba(0,0,0,0.5)');
+  const color = text('font color', '');
+  const lotsOfText = boolean('lots of text?', true);
+  return (
+    <>
+      <style>{`
+        #lightbox {
+          background-color: ${backgroundColor};
+          color: ${color};
+        }
+      `}</style>
+      <div style="height: 300px;">
+        <amp-lightbox id="lightbox" layout="nodisplay" animation={animation}>
+          <p>
+            Dessert tootsie roll marzipan pastry. Powder powder jelly beans
+            chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing
+            cotton candy. Toffee carrot cake ice cream sesame snaps sugar plum
+            gummies. Gummies marshmallow candy chocolate bar ice cream ice cream
+            gummies chocolate cake. Candy ice cream pie danish ice cream cake
+            gingerbread. Muffin cookie marzipan marzipan jelly beans gummies
+            candy muffin dessert. Soufflé chocolate tart tootsie roll tootsie
+            roll gingerbread icing powder. Dessert croissant macaroon candy
+            liquorice. Gingerbread gummi bears croissant wafer cookie cookie
+            bonbon. Marshmallow fruitcake lollipop sweet roll danish dragée
+            cupcake. Tootsie roll cotton candy dragée chocolate bar tootsie roll
+            cheesecake cookie muffin. Toffee sesame snaps gingerbread wafer
+            cotton candy bonbon gingerbread toffee.
+          </p>
+
+          {lotsOfText && (
+            <>
+              <p>
+                Danish cupcake chocolate candy chocolate bar. Topping brownie
+                toffee oat cake liquorice marzipan cheesecake chupa chups.
+                Pastry carrot cake jelly beans chocolate cake liquorice sesame
+                snaps caramels. Apple pie marshmallow chupa chups lemon drops
+                pudding cotton candy pie apple pie oat cake. Sugar plum halvah
+                cotton candy tiramisu sweet dragée cookie pastry. Macaroon
+                bonbon jujubes. Halvah tiramisu brownie topping donut cookie
+                tart. Jelly lemon drops soufflé pie chocolate bar donut tootsie
+                roll bear claw cake. Chocolate cake powder dessert. Pudding
+                wafer danish chupa chups donut chocolate sweet carrot cake.
+                Sugar plum cheesecake brownie chocolate sweet tart marzipan oat
+                cake dessert. Gummi bears sugar plum bonbon chocolate cake.
+                Croissant marzipan brownie dessert donut cotton candy croissant
+                powder. Chocolate cake tootsie roll sweet roll gummi bears donut
+                fruitcake jelly beans carrot cake.
+              </p>
+
+              <p>
+                Brownie gummies danish lollipop caramels wafer gingerbread
+                macaroon carrot cake. Brownie powder donut gummi bears pudding
+                cupcake. Lemon drops croissant apple pie sesame snaps marzipan.
+                Biscuit chocolate cake jelly-o pie caramels gingerbread caramels
+                chupa chups donut. Sweet roll oat cake cake. Cheesecake candy
+                canes candy canes candy canes topping pastry sweet cheesecake.
+                Jelly-o gummies topping marshmallow dessert tiramisu cake bonbon
+                chupa chups. Chocolate biscuit danish tart bear claw. Tiramisu
+                carrot cake jelly-o pie sweet cake. Sesame snaps lollipop cookie
+                chocolate cake wafer dragée. Powder brownie danish. Pastry
+                chocolate cake sweet roll halvah cupcake dragée.
+              </p>
+
+              <p>
+                Cake carrot cake icing danish biscuit carrot cake marzipan
+                croissant. Cake cake gummi bears fruitcake sweet dessert toffee
+                chocolate cake. Ice cream carrot cake donut jelly beans. Jelly
+                wafer sugar plum sweet icing candy canes. Bonbon marshmallow
+                donut pudding jelly-o tiramisu pastry cake bonbon. Jelly candy
+                canes liquorice cupcake liquorice dessert halvah toffee. Jelly
+                chocolate macaroon topping cupcake tootsie roll liquorice
+                brownie lollipop. Chupa chups wafer cupcake candy cookie oat
+                cake cookie bear claw. Carrot cake pudding biscuit tiramisu ice
+                cream sugar plum. Topping lemon drops dragée cake liquorice
+                apple pie ice cream. Cotton candy lollipop lemon drops apple pie
+                tootsie roll pie marshmallow chocolate jelly-o. Pastry bonbon
+                cupcake dragée candy.
+              </p>
+
+              <p>
+                Ice cream dragée pudding pastry biscuit tart cookie. Oat cake
+                ice cream apple pie oat cake dessert soufflé caramels apple pie.
+                Gummies bear claw powder cake icing jelly beans jelly beans
+                marzipan lollipop. Lollipop brownie jelly beans pudding. Ice
+                cream jelly biscuit pie tiramisu tootsie roll gummies biscuit.
+                Cupcake biscuit biscuit chocolate bar liquorice caramels powder
+                cotton candy muffin. Sesame snaps tiramisu croissant. Soufflé
+                chocolate jelly-o topping. Lemon drops candy canes sweet carrot
+                cake chocolate cake tootsie roll wafer marshmallow. Jelly beans
+                bear claw jelly-o sesame snaps carrot cake. Pudding jelly candy
+                carrot cake fruitcake carrot cake candy canes sesame snaps.
+                Marzipan icing caramels chocolate tart powder cookie halvah.
+                Fruitcake dragée muffin tart. Jelly-o cupcake marshmallow
+                pudding gummies muffin topping caramels.
+              </p>
+
+              <p>
+                Liquorice bear claw marshmallow dessert. Bear claw toffee pastry
+                tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake
+                cake sweet roll cupcake ice cream jelly. Fruitcake jelly beans
+                macaroon soufflé jelly beans marzipan caramels candy. Cheesecake
+                candy canes pudding icing icing. Dragée chocolate bar bear claw
+                dragée donut brownie cake sweet roll. Wafer bear claw dragée
+                icing sesame snaps topping. Cake marzipan bear claw dessert bear
+                claw lollipop halvah wafer halvah. Icing sweet roll toffee sweet
+                powder sesame snaps gummies tart danish. Ice cream toffee
+                caramels danish. Jelly-o lollipop lollipop dessert sesame snaps
+                bear claw gummi bears. Donut sweet roll marzipan fruitcake oat
+                cake cake icing cotton candy oat cake. Gingerbread carrot cake
+                sesame snaps gummies candy dragée lollipop soufflé biscuit.
+                Pudding jujubes chocolate halvah sesame snaps tiramisu sweet
+                marshmallow chocolate bar.
+              </p>
+
+              <p>
+                Donut carrot cake apple pie powder marshmallow sesame snaps
+                tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat
+                cake. Marshmallow wafer danish wafer gingerbread cake muffin
+                candy dragée. Candy cotton candy topping cake cotton candy
+                carrot cake fruitcake brownie. Toffee candy candy canes jelly-o
+                cotton candy gummies. Bonbon bonbon pie sugar plum. Oat cake
+                sesame snaps pudding candy canes gummi bears macaroon jelly
+                beans brownie. Sesame snaps halvah halvah jelly-o dessert.
+                Jelly-o chocolate sweet roll donut candy. Cotton candy halvah
+                macaroon tiramisu tart. Jelly toffee candy pie toffee.
+              </p>
+
+              <p>
+                Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll
+                sweet roll brownie pastry tootsie roll. Topping cheesecake pie
+                jelly. Donut wafer wafer cake candy canes. Topping chocolate bar
+                cheesecake topping ice cream tiramisu toffee ice cream. Bonbon
+                halvah marshmallow. Marzipan topping chupa chups dessert
+                chocolate chocolate cake gummi bears. Gummi bears caramels sugar
+                plum. Pie donut jelly beans tiramisu soufflé pie powder. Cupcake
+                cookie topping. Tootsie roll candy canes jujubes croissant
+                liquorice ice cream brownie. Topping cookie apple pie gummi
+                bears bear claw jelly-o brownie tart. Marzipan cotton candy
+                gummi bears. Dragée ice cream gummi bears jelly-o carrot cake
+                chocolate bar tiramisu jelly cotton candy.
+              </p>
+            </>
+          )}
+          <button slot="close-button" on="tap:lightbox.close">
+            Close
+          </button>
+        </amp-lightbox>
+        <div class="buttons">
+          <button on="tap:lightbox">Open</button>
+        </div>
+        <p>
+          Dessert tootsie roll marzipan pastry. Powder powder jelly beans
+          chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing cotton
+          candy. Toffee carrot cake ice cream sesame snaps sugar plum gummies.
+          Gummies marshmallow candy chocolate bar ice cream ice cream gummies
+          chocolate cake. Candy ice cream pie danish ice cream cake gingerbread.
+          Muffin cookie marzipan marzipan jelly beans gummies candy muffin
+          dessert. Soufflé chocolate tart tootsie roll tootsie roll gingerbread
+          icing powder. Dessert croissant macaroon candy liquorice. Gingerbread
+          gummi bears croissant wafer cookie cookie bonbon. Marshmallow
+          fruitcake lollipop sweet roll danish dragée cupcake. Tootsie roll
+          cotton candy dragée chocolate bar tootsie roll cheesecake cookie
+          muffin. Toffee sesame snaps gingerbread wafer cotton candy bonbon
+          gingerbread toffee.
+        </p>
+
+        <p>
+          Danish cupcake chocolate candy chocolate bar. Topping brownie toffee
+          oat cake liquorice marzipan cheesecake chupa chups. Pastry carrot cake
+          jelly beans chocolate cake liquorice sesame snaps caramels. Apple pie
+          marshmallow chupa chups lemon drops pudding cotton candy pie apple pie
+          oat cake. Sugar plum halvah cotton candy tiramisu sweet dragée cookie
+          pastry. Macaroon bonbon jujubes. Halvah tiramisu brownie topping donut
+          cookie tart. Jelly lemon drops soufflé pie chocolate bar donut tootsie
+          roll bear claw cake. Chocolate cake powder dessert. Pudding wafer
+          danish chupa chups donut chocolate sweet carrot cake. Sugar plum
+          cheesecake brownie chocolate sweet tart marzipan oat cake dessert.
+          Gummi bears sugar plum bonbon chocolate cake. Croissant marzipan
+          brownie dessert donut cotton candy croissant powder. Chocolate cake
+          tootsie roll sweet roll gummi bears donut fruitcake jelly beans carrot
+          cake.
+        </p>
+
+        <p>
+          Brownie gummies danish lollipop caramels wafer gingerbread macaroon
+          carrot cake. Brownie powder donut gummi bears pudding cupcake. Lemon
+          drops croissant apple pie sesame snaps marzipan. Biscuit chocolate
+          cake jelly-o pie caramels gingerbread caramels chupa chups donut.
+          Sweet roll oat cake cake. Cheesecake candy canes candy canes candy
+          canes topping pastry sweet cheesecake. Jelly-o gummies topping
+          marshmallow dessert tiramisu cake bonbon chupa chups. Chocolate
+          biscuit danish tart bear claw. Tiramisu carrot cake jelly-o pie sweet
+          cake. Sesame snaps lollipop cookie chocolate cake wafer dragée. Powder
+          brownie danish. Pastry chocolate cake sweet roll halvah cupcake
+          dragée.
+        </p>
+
+        <p>
+          Cake carrot cake icing danish biscuit carrot cake marzipan croissant.
+          Cake cake gummi bears fruitcake sweet dessert toffee chocolate cake.
+          Ice cream carrot cake donut jelly beans. Jelly wafer sugar plum sweet
+          icing candy canes. Bonbon marshmallow donut pudding jelly-o tiramisu
+          pastry cake bonbon. Jelly candy canes liquorice cupcake liquorice
+          dessert halvah toffee. Jelly chocolate macaroon topping cupcake
+          tootsie roll liquorice brownie lollipop. Chupa chups wafer cupcake
+          candy cookie oat cake cookie bear claw. Carrot cake pudding biscuit
+          tiramisu ice cream sugar plum. Topping lemon drops dragée cake
+          liquorice apple pie ice cream. Cotton candy lollipop lemon drops apple
+          pie tootsie roll pie marshmallow chocolate jelly-o. Pastry bonbon
+          cupcake dragée candy.
+        </p>
+
+        <p>
+          Ice cream dragée pudding pastry biscuit tart cookie. Oat cake ice
+          cream apple pie oat cake dessert soufflé caramels apple pie. Gummies
+          bear claw powder cake icing jelly beans jelly beans marzipan lollipop.
+          Lollipop brownie jelly beans pudding. Ice cream jelly biscuit pie
+          tiramisu tootsie roll gummies biscuit. Cupcake biscuit biscuit
+          chocolate bar liquorice caramels powder cotton candy muffin. Sesame
+          snaps tiramisu croissant. Soufflé chocolate jelly-o topping. Lemon
+          drops candy canes sweet carrot cake chocolate cake tootsie roll wafer
+          marshmallow. Jelly beans bear claw jelly-o sesame snaps carrot cake.
+          Pudding jelly candy carrot cake fruitcake carrot cake candy canes
+          sesame snaps. Marzipan icing caramels chocolate tart powder cookie
+          halvah. Fruitcake dragée muffin tart. Jelly-o cupcake marshmallow
+          pudding gummies muffin topping caramels.
+        </p>
+
+        <p>
+          Liquorice bear claw marshmallow dessert. Bear claw toffee pastry
+          tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake cake
+          sweet roll cupcake ice cream jelly. Fruitcake jelly beans macaroon
+          soufflé jelly beans marzipan caramels candy. Cheesecake candy canes
+          pudding icing icing. Dragée chocolate bar bear claw dragée donut
+          brownie cake sweet roll. Wafer bear claw dragée icing sesame snaps
+          topping. Cake marzipan bear claw dessert bear claw lollipop halvah
+          wafer halvah. Icing sweet roll toffee sweet powder sesame snaps
+          gummies tart danish. Ice cream toffee caramels danish. Jelly-o
+          lollipop lollipop dessert sesame snaps bear claw gummi bears. Donut
+          sweet roll marzipan fruitcake oat cake cake icing cotton candy oat
+          cake. Gingerbread carrot cake sesame snaps gummies candy dragée
+          lollipop soufflé biscuit. Pudding jujubes chocolate halvah sesame
+          snaps tiramisu sweet marshmallow chocolate bar.
+        </p>
+
+        <p>
+          Donut carrot cake apple pie powder marshmallow sesame snaps tiramisu.
+          Sweet roll powder cookie. Lollipop sugar plum oat cake. Marshmallow
+          wafer danish wafer gingerbread cake muffin candy dragée. Candy cotton
+          candy topping cake cotton candy carrot cake fruitcake brownie. Toffee
+          candy candy canes jelly-o cotton candy gummies. Bonbon bonbon pie
+          sugar plum. Oat cake sesame snaps pudding candy canes gummi bears
+          macaroon jelly beans brownie. Sesame snaps halvah halvah jelly-o
+          dessert. Jelly-o chocolate sweet roll donut candy. Cotton candy halvah
+          macaroon tiramisu tart. Jelly toffee candy pie toffee.
+        </p>
+
+        <p>
+          Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll sweet
+          roll brownie pastry tootsie roll. Topping cheesecake pie jelly. Donut
+          wafer wafer cake candy canes. Topping chocolate bar cheesecake topping
+          ice cream tiramisu toffee ice cream. Bonbon halvah marshmallow.
+          Marzipan topping chupa chups dessert chocolate chocolate cake gummi
+          bears. Gummi bears caramels sugar plum. Pie donut jelly beans tiramisu
+          soufflé pie powder. Cupcake cookie topping. Tootsie roll candy canes
+          jujubes croissant liquorice ice cream brownie. Topping cookie apple
+          pie gummi bears bear claw jelly-o brownie tart. Marzipan cotton candy
+          gummi bears. Dragée ice cream gummi bears jelly-o carrot cake
+          chocolate bar tiramisu jelly cotton candy.
+        </p>
+      </div>
+    </>
+  );
+};
+
+Default.storyName = 'Default';
diff --git a/extensions/amp-lightbox/1.0/storybook/Basic.js b/extensions/amp-lightbox/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..1d5e7c1a10db6
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/storybook/Basic.js
@@ -0,0 +1,343 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Lightbox} from '../component';
+import {boolean, select, text, withKnobs} from '@storybook/addon-knobs';
+import {useRef} from '../../../../src/preact';
+
+export default {
+  title: 'Lightbox',
+  component: Lightbox,
+  decorators: [withKnobs],
+};
+
+/**
+ * @param {!Object} props
+ * @return {*}
+ */
+function LightboxWithActions({children, ...rest}) {
+  const ref = useRef();
+  return (
+    <section>
+      <Lightbox
+        closeButtonAs={(props) => (
+          <button {...props} aria-label="My custom close button">
+            close
+          </button>
+        )}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Lightbox>
+      <div style={{marginTop: 8}}>
+        <button onClick={() => ref.current.open()}>open</button>
+      </div>
+      <p>
+        Dessert tootsie roll marzipan pastry. Powder powder jelly beans
+        chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing cotton
+        candy. Toffee carrot cake ice cream sesame snaps sugar plum gummies.
+        Gummies marshmallow candy chocolate bar ice cream ice cream gummies
+        chocolate cake. Candy ice cream pie danish ice cream cake gingerbread.
+        Muffin cookie marzipan marzipan jelly beans gummies candy muffin
+        dessert. Soufflé chocolate tart tootsie roll tootsie roll gingerbread
+        icing powder. Dessert croissant macaroon candy liquorice. Gingerbread
+        gummi bears croissant wafer cookie cookie bonbon. Marshmallow fruitcake
+        lollipop sweet roll danish dragée cupcake. Tootsie roll cotton candy
+        dragée chocolate bar tootsie roll cheesecake cookie muffin. Toffee
+        sesame snaps gingerbread wafer cotton candy bonbon gingerbread toffee.
+      </p>
+
+      <p>
+        Danish cupcake chocolate candy chocolate bar. Topping brownie toffee oat
+        cake liquorice marzipan cheesecake chupa chups. Pastry carrot cake jelly
+        beans chocolate cake liquorice sesame snaps caramels. Apple pie
+        marshmallow chupa chups lemon drops pudding cotton candy pie apple pie
+        oat cake. Sugar plum halvah cotton candy tiramisu sweet dragée cookie
+        pastry. Macaroon bonbon jujubes. Halvah tiramisu brownie topping donut
+        cookie tart. Jelly lemon drops soufflé pie chocolate bar donut tootsie
+        roll bear claw cake. Chocolate cake powder dessert. Pudding wafer danish
+        chupa chups donut chocolate sweet carrot cake. Sugar plum cheesecake
+        brownie chocolate sweet tart marzipan oat cake dessert. Gummi bears
+        sugar plum bonbon chocolate cake. Croissant marzipan brownie dessert
+        donut cotton candy croissant powder. Chocolate cake tootsie roll sweet
+        roll gummi bears donut fruitcake jelly beans carrot cake.
+      </p>
+
+      <p>
+        Brownie gummies danish lollipop caramels wafer gingerbread macaroon
+        carrot cake. Brownie powder donut gummi bears pudding cupcake. Lemon
+        drops croissant apple pie sesame snaps marzipan. Biscuit chocolate cake
+        jelly-o pie caramels gingerbread caramels chupa chups donut. Sweet roll
+        oat cake cake. Cheesecake candy canes candy canes candy canes topping
+        pastry sweet cheesecake. Jelly-o gummies topping marshmallow dessert
+        tiramisu cake bonbon chupa chups. Chocolate biscuit danish tart bear
+        claw. Tiramisu carrot cake jelly-o pie sweet cake. Sesame snaps lollipop
+        cookie chocolate cake wafer dragée. Powder brownie danish. Pastry
+        chocolate cake sweet roll halvah cupcake dragée.
+      </p>
+
+      <p>
+        Cake carrot cake icing danish biscuit carrot cake marzipan croissant.
+        Cake cake gummi bears fruitcake sweet dessert toffee chocolate cake. Ice
+        cream carrot cake donut jelly beans. Jelly wafer sugar plum sweet icing
+        candy canes. Bonbon marshmallow donut pudding jelly-o tiramisu pastry
+        cake bonbon. Jelly candy canes liquorice cupcake liquorice dessert
+        halvah toffee. Jelly chocolate macaroon topping cupcake tootsie roll
+        liquorice brownie lollipop. Chupa chups wafer cupcake candy cookie oat
+        cake cookie bear claw. Carrot cake pudding biscuit tiramisu ice cream
+        sugar plum. Topping lemon drops dragée cake liquorice apple pie ice
+        cream. Cotton candy lollipop lemon drops apple pie tootsie roll pie
+        marshmallow chocolate jelly-o. Pastry bonbon cupcake dragée candy.
+      </p>
+
+      <p>
+        Ice cream dragée pudding pastry biscuit tart cookie. Oat cake ice cream
+        apple pie oat cake dessert soufflé caramels apple pie. Gummies bear claw
+        powder cake icing jelly beans jelly beans marzipan lollipop. Lollipop
+        brownie jelly beans pudding. Ice cream jelly biscuit pie tiramisu
+        tootsie roll gummies biscuit. Cupcake biscuit biscuit chocolate bar
+        liquorice caramels powder cotton candy muffin. Sesame snaps tiramisu
+        croissant. Soufflé chocolate jelly-o topping. Lemon drops candy canes
+        sweet carrot cake chocolate cake tootsie roll wafer marshmallow. Jelly
+        beans bear claw jelly-o sesame snaps carrot cake. Pudding jelly candy
+        carrot cake fruitcake carrot cake candy canes sesame snaps. Marzipan
+        icing caramels chocolate tart powder cookie halvah. Fruitcake dragée
+        muffin tart. Jelly-o cupcake marshmallow pudding gummies muffin topping
+        caramels.
+      </p>
+
+      <p>
+        Liquorice bear claw marshmallow dessert. Bear claw toffee pastry
+        tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake cake sweet
+        roll cupcake ice cream jelly. Fruitcake jelly beans macaroon soufflé
+        jelly beans marzipan caramels candy. Cheesecake candy canes pudding
+        icing icing. Dragée chocolate bar bear claw dragée donut brownie cake
+        sweet roll. Wafer bear claw dragée icing sesame snaps topping. Cake
+        marzipan bear claw dessert bear claw lollipop halvah wafer halvah. Icing
+        sweet roll toffee sweet powder sesame snaps gummies tart danish. Ice
+        cream toffee caramels danish. Jelly-o lollipop lollipop dessert sesame
+        snaps bear claw gummi bears. Donut sweet roll marzipan fruitcake oat
+        cake cake icing cotton candy oat cake. Gingerbread carrot cake sesame
+        snaps gummies candy dragée lollipop soufflé biscuit. Pudding jujubes
+        chocolate halvah sesame snaps tiramisu sweet marshmallow chocolate bar.
+      </p>
+
+      <p>
+        Donut carrot cake apple pie powder marshmallow sesame snaps tiramisu.
+        Sweet roll powder cookie. Lollipop sugar plum oat cake. Marshmallow
+        wafer danish wafer gingerbread cake muffin candy dragée. Candy cotton
+        candy topping cake cotton candy carrot cake fruitcake brownie. Toffee
+        candy candy canes jelly-o cotton candy gummies. Bonbon bonbon pie sugar
+        plum. Oat cake sesame snaps pudding candy canes gummi bears macaroon
+        jelly beans brownie. Sesame snaps halvah halvah jelly-o dessert. Jelly-o
+        chocolate sweet roll donut candy. Cotton candy halvah macaroon tiramisu
+        tart. Jelly toffee candy pie toffee.
+      </p>
+
+      <p>
+        Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll sweet
+        roll brownie pastry tootsie roll. Topping cheesecake pie jelly. Donut
+        wafer wafer cake candy canes. Topping chocolate bar cheesecake topping
+        ice cream tiramisu toffee ice cream. Bonbon halvah marshmallow. Marzipan
+        topping chupa chups dessert chocolate chocolate cake gummi bears. Gummi
+        bears caramels sugar plum. Pie donut jelly beans tiramisu soufflé pie
+        powder. Cupcake cookie topping. Tootsie roll candy canes jujubes
+        croissant liquorice ice cream brownie. Topping cookie apple pie gummi
+        bears bear claw jelly-o brownie tart. Marzipan cotton candy gummi bears.
+        Dragée ice cream gummi bears jelly-o carrot cake chocolate bar tiramisu
+        jelly cotton candy.
+      </p>
+    </section>
+  );
+}
+
+export const _default = () => {
+  const animation = select('animation', [
+    'fade-in',
+    'fly-in-top',
+    'fly-in-bottom',
+  ]);
+  const backgroundColor = text('background color', '');
+  const color = text('font color', '');
+  return (
+    <div>
+      <LightboxWithActions
+        id="lightbox"
+        animation={animation}
+        style={{backgroundColor, color}}
+      >
+        <p>
+          Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
+          aeque inermis reprehendunt.
+        </p>
+      </LightboxWithActions>
+    </div>
+  );
+};
+
+export const scrollable = () => {
+  const animation = select('animation', [
+    'fade-in',
+    'fly-in-top',
+    'fly-in-bottom',
+  ]);
+  const backgroundColor = text('background color', 'rgba(0, 0, 0, 0.5)');
+  const color = text('font color', '');
+  const scrollable = boolean('scrollable', true);
+  const lotsOfText = boolean('lots of text?', true);
+  return (
+    <div>
+      <LightboxWithActions
+        id="lightbox"
+        animation={animation}
+        style={{backgroundColor, color}}
+        scrollable={scrollable}
+      >
+        <p>
+          Dessert tootsie roll marzipan pastry. Powder powder jelly beans
+          chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing cotton
+          candy. Toffee carrot cake ice cream sesame snaps sugar plum gummies.
+          Gummies marshmallow candy chocolate bar ice cream ice cream gummies
+          chocolate cake. Candy ice cream pie danish ice cream cake gingerbread.
+          Muffin cookie marzipan marzipan jelly beans gummies candy muffin
+          dessert. Soufflé chocolate tart tootsie roll tootsie roll gingerbread
+          icing powder. Dessert croissant macaroon candy liquorice. Gingerbread
+          gummi bears croissant wafer cookie cookie bonbon. Marshmallow
+          fruitcake lollipop sweet roll danish dragée cupcake. Tootsie roll
+          cotton candy dragée chocolate bar tootsie roll cheesecake cookie
+          muffin. Toffee sesame snaps gingerbread wafer cotton candy bonbon
+          gingerbread toffee.
+        </p>
+
+        {lotsOfText && (
+          <>
+            <p>
+              Danish cupcake chocolate candy chocolate bar. Topping brownie
+              toffee oat cake liquorice marzipan cheesecake chupa chups. Pastry
+              carrot cake jelly beans chocolate cake liquorice sesame snaps
+              caramels. Apple pie marshmallow chupa chups lemon drops pudding
+              cotton candy pie apple pie oat cake. Sugar plum halvah cotton
+              candy tiramisu sweet dragée cookie pastry. Macaroon bonbon
+              jujubes. Halvah tiramisu brownie topping donut cookie tart. Jelly
+              lemon drops soufflé pie chocolate bar donut tootsie roll bear claw
+              cake. Chocolate cake powder dessert. Pudding wafer danish chupa
+              chups donut chocolate sweet carrot cake. Sugar plum cheesecake
+              brownie chocolate sweet tart marzipan oat cake dessert. Gummi
+              bears sugar plum bonbon chocolate cake. Croissant marzipan brownie
+              dessert donut cotton candy croissant powder. Chocolate cake
+              tootsie roll sweet roll gummi bears donut fruitcake jelly beans
+              carrot cake.
+            </p>
+
+            <p>
+              Brownie gummies danish lollipop caramels wafer gingerbread
+              macaroon carrot cake. Brownie powder donut gummi bears pudding
+              cupcake. Lemon drops croissant apple pie sesame snaps marzipan.
+              Biscuit chocolate cake jelly-o pie caramels gingerbread caramels
+              chupa chups donut. Sweet roll oat cake cake. Cheesecake candy
+              canes candy canes candy canes topping pastry sweet cheesecake.
+              Jelly-o gummies topping marshmallow dessert tiramisu cake bonbon
+              chupa chups. Chocolate biscuit danish tart bear claw. Tiramisu
+              carrot cake jelly-o pie sweet cake. Sesame snaps lollipop cookie
+              chocolate cake wafer dragée. Powder brownie danish. Pastry
+              chocolate cake sweet roll halvah cupcake dragée.
+            </p>
+
+            <p>
+              Cake carrot cake icing danish biscuit carrot cake marzipan
+              croissant. Cake cake gummi bears fruitcake sweet dessert toffee
+              chocolate cake. Ice cream carrot cake donut jelly beans. Jelly
+              wafer sugar plum sweet icing candy canes. Bonbon marshmallow donut
+              pudding jelly-o tiramisu pastry cake bonbon. Jelly candy canes
+              liquorice cupcake liquorice dessert halvah toffee. Jelly chocolate
+              macaroon topping cupcake tootsie roll liquorice brownie lollipop.
+              Chupa chups wafer cupcake candy cookie oat cake cookie bear claw.
+              Carrot cake pudding biscuit tiramisu ice cream sugar plum. Topping
+              lemon drops dragée cake liquorice apple pie ice cream. Cotton
+              candy lollipop lemon drops apple pie tootsie roll pie marshmallow
+              chocolate jelly-o. Pastry bonbon cupcake dragée candy.
+            </p>
+
+            <p>
+              Ice cream dragée pudding pastry biscuit tart cookie. Oat cake ice
+              cream apple pie oat cake dessert soufflé caramels apple pie.
+              Gummies bear claw powder cake icing jelly beans jelly beans
+              marzipan lollipop. Lollipop brownie jelly beans pudding. Ice cream
+              jelly biscuit pie tiramisu tootsie roll gummies biscuit. Cupcake
+              biscuit biscuit chocolate bar liquorice caramels powder cotton
+              candy muffin. Sesame snaps tiramisu croissant. Soufflé chocolate
+              jelly-o topping. Lemon drops candy canes sweet carrot cake
+              chocolate cake tootsie roll wafer marshmallow. Jelly beans bear
+              claw jelly-o sesame snaps carrot cake. Pudding jelly candy carrot
+              cake fruitcake carrot cake candy canes sesame snaps. Marzipan
+              icing caramels chocolate tart powder cookie halvah. Fruitcake
+              dragée muffin tart. Jelly-o cupcake marshmallow pudding gummies
+              muffin topping caramels.
+            </p>
+
+            <p>
+              Liquorice bear claw marshmallow dessert. Bear claw toffee pastry
+              tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake cake
+              sweet roll cupcake ice cream jelly. Fruitcake jelly beans macaroon
+              soufflé jelly beans marzipan caramels candy. Cheesecake candy
+              canes pudding icing icing. Dragée chocolate bar bear claw dragée
+              donut brownie cake sweet roll. Wafer bear claw dragée icing sesame
+              snaps topping. Cake marzipan bear claw dessert bear claw lollipop
+              halvah wafer halvah. Icing sweet roll toffee sweet powder sesame
+              snaps gummies tart danish. Ice cream toffee caramels danish.
+              Jelly-o lollipop lollipop dessert sesame snaps bear claw gummi
+              bears. Donut sweet roll marzipan fruitcake oat cake cake icing
+              cotton candy oat cake. Gingerbread carrot cake sesame snaps
+              gummies candy dragée lollipop soufflé biscuit. Pudding jujubes
+              chocolate halvah sesame snaps tiramisu sweet marshmallow chocolate
+              bar.
+            </p>
+
+            <p>
+              Donut carrot cake apple pie powder marshmallow sesame snaps
+              tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat cake.
+              Marshmallow wafer danish wafer gingerbread cake muffin candy
+              dragée. Candy cotton candy topping cake cotton candy carrot cake
+              fruitcake brownie. Toffee candy candy canes jelly-o cotton candy
+              gummies. Bonbon bonbon pie sugar plum. Oat cake sesame snaps
+              pudding candy canes gummi bears macaroon jelly beans brownie.
+              Sesame snaps halvah halvah jelly-o dessert. Jelly-o chocolate
+              sweet roll donut candy. Cotton candy halvah macaroon tiramisu
+              tart. Jelly toffee candy pie toffee.
+            </p>
+
+            <p>
+              Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll
+              sweet roll brownie pastry tootsie roll. Topping cheesecake pie
+              jelly. Donut wafer wafer cake candy canes. Topping chocolate bar
+              cheesecake topping ice cream tiramisu toffee ice cream. Bonbon
+              halvah marshmallow. Marzipan topping chupa chups dessert chocolate
+              chocolate cake gummi bears. Gummi bears caramels sugar plum. Pie
+              donut jelly beans tiramisu soufflé pie powder. Cupcake cookie
+              topping. Tootsie roll candy canes jujubes croissant liquorice ice
+              cream brownie. Topping cookie apple pie gummi bears bear claw
+              jelly-o brownie tart. Marzipan cotton candy gummi bears. Dragée
+              ice cream gummi bears jelly-o carrot cake chocolate bar tiramisu
+              jelly cotton candy.
+            </p>
+          </>
+        )}
+      </LightboxWithActions>
+    </div>
+  );
+};
diff --git a/extensions/amp-lightbox/1.0/test-e2e/test-custom-close-button.js b/extensions/amp-lightbox/1.0/test-e2e/test-custom-close-button.js
new file mode 100644
index 0000000000000..f5086bc2c3bae
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/test-e2e/test-custom-close-button.js
@@ -0,0 +1,89 @@
+/**
+ * Copyright 2020 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.
+ */
+
+describes.endtoend(
+  'amp-lightbox custom close button',
+  {
+    fixture: 'amp-lightbox/custom-close-button.amp.html',
+
+    versions: {
+      '1.0': {
+        environments: ['single', 'viewer-demo'],
+        experiments: ['bento'],
+        initialRect: {width: 800, height: 800},
+      },
+    },
+  },
+  async (env) => {
+    let controller;
+
+    beforeEach(() => {
+      controller = env.controller;
+    });
+
+    it('should render correctly', async () => {
+      const lightbox = await controller.findElement('#lightbox');
+      await expect(controller.getElementProperty(lightbox, 'hidden')).to.be
+        .true;
+
+      const image = await controller.findElement('#image');
+      await expect(
+        controller.getElementProperty(image, 'clientWidth')
+      ).to.equal(0);
+    });
+
+    // TODO(wg-components, #28948): Flaky during CI.
+    it.skip('should open the lightbox', async () => {
+      const open = await controller.findElement('#open');
+      await controller.click(open);
+
+      const lightbox = await controller.findElement('#lightbox');
+      await expect(controller.getElementProperty(lightbox, 'hidden')).to.be
+        .false;
+
+      const documentElement = await controller.getDocumentElement();
+      const width = await controller.getElementProperty(
+        documentElement,
+        'clientWidth'
+      );
+      await expect(
+        controller.getElementProperty(lightbox, 'clientWidth')
+      ).to.equal(width);
+
+      const backingImageOrLoader = await controller.findElement(
+        '#image img, #image .i-amphtml-loader-background'
+      );
+      await expect(
+        controller.getElementProperty(backingImageOrLoader, 'clientWidth')
+      ).to.equal(641);
+    });
+
+    it('should close the lightbox', async () => {
+      const open = await controller.findElement('#open');
+      await controller.click(open);
+
+      const lightbox = await controller.findElement('#lightbox');
+      await expect(controller.getElementProperty(lightbox, 'hidden')).to.be
+        .false;
+
+      const close = await controller.findElement('#close');
+      await controller.click(close);
+
+      await expect(controller.getElementProperty(lightbox, 'hidden')).to.be
+        .true;
+    });
+  }
+);
diff --git a/extensions/amp-lightbox/1.0/test/test-amp-lightbox.js b/extensions/amp-lightbox/1.0/test/test-amp-lightbox.js
new file mode 100644
index 0000000000000..39186732a67bf
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/test/test-amp-lightbox.js
@@ -0,0 +1,163 @@
+/**
+ * Copyright 2020 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.
+ */
+import '../amp-lightbox';
+import {ActionInvocation} from '../../../../src/service/action-impl';
+import {
+  ActionTrust,
+  DEFAULT_ACTION,
+} from '../../../../src/core/constants/action-constants';
+import {htmlFor} from '../../../../src/static-template';
+import {poll} from '../../../../testing/iframe';
+import {toggleExperiment} from '../../../../src/experiments';
+import {whenCalled} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-lightbox:1.0',
+  {
+    amp: {
+      extensions: ['amp-lightbox:1.0'],
+    },
+  },
+  (env) => {
+    let win;
+    let html;
+    let element;
+
+    async function waitForOpen(el, open) {
+      const isOpenOrNot = () => el.hasAttribute('open') === open;
+      // Extend timeout due to animation delay.
+      await poll('element open updated', isOpenOrNot, undefined, 500);
+    }
+
+    function getContent() {
+      expect(element.shadowRoot).not.to.be.undefined;
+      // Get slot if it exists, or <c> element otherwise.
+      return element.shadowRoot.querySelector('c slot, c:empty');
+    }
+
+    beforeEach(async () => {
+      win = env.win;
+      html = htmlFor(win.document);
+      toggleExperiment(win, 'bento-selector', true, true);
+      element = html`
+        <amp-lightbox layout="nodisplay">
+          <p>Hello World</p>
+        </amp-lightbox>
+      `;
+      win.document.body.appendChild(element);
+      await element.buildInternal();
+    });
+
+    afterEach(() => {
+      win.document.body.removeChild(element);
+    });
+
+    it('should render closed', async () => {
+      expect(element.hasAttribute('open')).to.be.false;
+      expect(element.hasAttribute('hidden')).to.be.true;
+      const content = getContent();
+      expect(content.tagName).to.equal('C');
+      expect(content.children).to.have.lengthOf(0);
+    });
+
+    describe('imperative api', () => {
+      function invocation(method, args = {}) {
+        const source = null;
+        const caller = null;
+        const event = null;
+        const trust = ActionTrust.DEFAULT;
+        return new ActionInvocation(
+          element,
+          method,
+          args,
+          source,
+          caller,
+          event,
+          trust
+        );
+      }
+
+      it('should open with default action', async () => {
+        env.sandbox.stub(element, 'setAsContainerInternal');
+        env.sandbox.stub(element, 'removeAsContainerInternal');
+
+        expect(element.hasAttribute('open')).to.be.false;
+        expect(element.hasAttribute('hidden')).to.be.true;
+
+        const eventSpy = env.sandbox.spy();
+        element.addEventListener('open', eventSpy);
+
+        element.enqueAction(invocation(DEFAULT_ACTION));
+        await waitForOpen(element, true);
+        expect(element.hasAttribute('hidden')).to.be.false;
+
+        const content = getContent();
+        expect(content.tagName).to.equal('SLOT');
+        const contentEls = content.assignedElements();
+        expect(contentEls).to.have.lengthOf(1);
+        expect(contentEls[0].tagName).to.equal('P');
+        expect(contentEls[0].textContent).to.equal('Hello World');
+
+        expect(eventSpy).to.be.calledOnce;
+
+        await whenCalled(element.setAsContainerInternal);
+        const scroller = element.shadowRoot.querySelector('[part=scroller]');
+        expect(scroller).to.exist;
+        expect(element.setAsContainerInternal).to.be.calledWith(scroller);
+        expect(element.removeAsContainerInternal).to.not.be.called;
+      });
+
+      it('should open and close', async () => {
+        env.sandbox.stub(element, 'setAsContainerInternal');
+        env.sandbox.stub(element, 'removeAsContainerInternal');
+
+        expect(element.hasAttribute('open')).to.be.false;
+        expect(element.hasAttribute('hidden')).to.be.true;
+
+        const openSpy = env.sandbox.spy();
+        const closeSpy = env.sandbox.spy();
+        element.addEventListener('open', openSpy);
+        element.addEventListener('close', closeSpy);
+
+        element.enqueAction(invocation('open'));
+        await waitForOpen(element, true);
+        expect(element.hasAttribute('hidden')).to.be.false;
+
+        let content = getContent();
+        expect(content.tagName).to.equal('SLOT');
+        const contentEls = content.assignedElements();
+        expect(contentEls).to.have.lengthOf(1);
+        expect(contentEls[0].tagName).to.equal('P');
+        expect(contentEls[0].textContent).to.equal('Hello World');
+
+        expect(openSpy).to.be.calledOnce;
+        expect(closeSpy).not.to.have.been.called;
+
+        element.enqueAction(invocation('close'));
+        await waitForOpen(element, false);
+        expect(element.hasAttribute('hidden')).to.be.true;
+        content = getContent();
+        expect(content.tagName).to.equal('C');
+        expect(content.children).to.have.lengthOf(0);
+
+        expect(openSpy).to.be.calledOnce;
+        expect(closeSpy).to.be.calledOnce;
+        expect(element.setAsContainerInternal).to.not.be.called;
+        expect(element.removeAsContainerInternal).to.be.calledOnce;
+      });
+    });
+  }
+);
diff --git a/extensions/amp-lightbox/1.0/test/test-component.js b/extensions/amp-lightbox/1.0/test/test-component.js
new file mode 100644
index 0000000000000..45f8ef4bba8ee
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/test/test-component.js
@@ -0,0 +1,87 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Lightbox} from '../component';
+import {mount} from 'enzyme';
+
+describes.sandboxed('Lightbox preact component v1.0', {}, () => {
+  it('renders', () => {
+    const ref = Preact.createRef();
+    const wrapper = mount(
+      <Lightbox id="lightbox" ref={ref}>
+        <p>Hello World</p>
+      </Lightbox>
+    );
+
+    // Nothing is rendered at first.
+    expect(wrapper.children()).to.have.lengthOf(0);
+
+    ref.current.open();
+    wrapper.update();
+
+    // Render provided children
+    expect(wrapper.children()).to.have.lengthOf(1);
+    expect(wrapper.find('p').text()).to.equal('Hello World');
+
+    // Default SR button is present
+    const buttons = wrapper.find('button');
+    expect(buttons).to.have.lengthOf(1);
+    const closeButton = buttons.first().getDOMNode();
+    expect(closeButton.getAttribute('aria-label')).to.equal('Close the modal');
+    expect(closeButton.textContent).to.equal('');
+
+    // Scroller.
+    const scroller = wrapper.getDOMNode().querySelector('[part=scroller]');
+    expect(scroller).to.exist;
+  });
+
+  it('renders custom close button', () => {
+    const ref = Preact.createRef();
+    const wrapper = mount(
+      <Lightbox
+        id="lightbox"
+        ref={ref}
+        closeButtonAs={(props) => (
+          <button {...props} aria-label="close my fancy lightbox">
+            Close!
+          </button>
+        )}
+      >
+        <p>Hello World</p>
+      </Lightbox>
+    );
+
+    // Nothing is rendered at first.
+    expect(wrapper.children()).to.have.lengthOf(0);
+
+    ref.current.open();
+    wrapper.update();
+
+    // Render provided children
+    expect(wrapper.children()).to.have.lengthOf(1);
+    expect(wrapper.find('p').text()).to.equal('Hello World');
+
+    // Default SR button is present
+    const buttons = wrapper.find('button');
+    expect(buttons).to.have.lengthOf(1);
+    const closeButton = buttons.first().getDOMNode();
+    expect(closeButton.getAttribute('aria-label')).to.equal(
+      'close my fancy lightbox'
+    );
+    expect(closeButton.textContent).to.equal('Close!');
+  });
+});
diff --git a/extensions/amp-lightbox/1.0/test/validator-amp-lightbox.html b/extensions/amp-lightbox/1.0/test/validator-amp-lightbox.html
new file mode 100644
index 0000000000000..e68ea8f0da517
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/test/validator-amp-lightbox.html
@@ -0,0 +1,53 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-lightbox tag. See the inline comments.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-1.0.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <!-- Valid -->
+  <amp-lightbox id="lb-0" layout="nodisplay">
+
+  <!-- Invalid: layout must be nodisplay. -->
+  <amp-lightbox width="512" height="360"></amp-lightbox>
+
+  <!-- Valid -->
+  <amp-lightbox id="lb-2" layout="nodisplay" animation="fade-in">
+  </amp-lightbox>
+
+  <!-- Valid -->
+  <amp-lightbox id="lb-3" layout="nodisplay" animation="fly-in-bottom">
+  </amp-lightbox>
+
+  <!-- Valid -->
+  <amp-lightbox id="lb-4" layout="nodisplay" animation="fly-in-top">
+  </amp-lightbox>
+
+  <!-- Invalid: invalid `animation` value -->
+  <amp-lightbox id="lb-5" layout="nodisplay" animation="xmas-lights">
+  </amp-lightbox>
+</body>
+</html>
diff --git a/extensions/amp-lightbox/1.0/test/validator-amp-lightbox.out b/extensions/amp-lightbox/1.0/test/validator-amp-lightbox.out
new file mode 100644
index 0000000000000..ceff94be38859
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/test/validator-amp-lightbox.out
@@ -0,0 +1,58 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-lightbox tag. See the inline comments.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-1.0.js"></script>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|    <!-- Valid -->
+|    <amp-lightbox id="lb-0" layout="nodisplay">
+|
+|    <!-- Invalid: layout must be nodisplay. -->
+|    <amp-lightbox width="512" height="360"></amp-lightbox>
+>>   ^~~~~~~~~
+amp-lightbox/1.0/test/validator-amp-lightbox.html:35:2 The implied layout 'FIXED' is not supported by tag 'amp-lightbox'. (see https://amp.dev/documentation/components/amp-lightbox)
+|
+|    <!-- Valid -->
+|    <amp-lightbox id="lb-2" layout="nodisplay" animation="fade-in">
+|    </amp-lightbox>
+|
+|    <!-- Valid -->
+|    <amp-lightbox id="lb-3" layout="nodisplay" animation="fly-in-bottom">
+|    </amp-lightbox>
+|
+|    <!-- Valid -->
+|    <amp-lightbox id="lb-4" layout="nodisplay" animation="fly-in-top">
+|    </amp-lightbox>
+|
+|    <!-- Invalid: invalid `animation` value -->
+|    <amp-lightbox id="lb-5" layout="nodisplay" animation="xmas-lights">
+>>   ^~~~~~~~~
+amp-lightbox/1.0/test/validator-amp-lightbox.html:50:2 The attribute 'animation' in tag 'amp-lightbox' is set to the invalid value 'xmas-lights'. (see https://amp.dev/documentation/components/amp-lightbox)
+|    </amp-lightbox>
+|  </body>
+|  </html>
diff --git a/extensions/amp-lightbox/1.0/test/validator-amp4ads-lightbox.html b/extensions/amp-lightbox/1.0/test/validator-amp4ads-lightbox.html
new file mode 100644
index 0000000000000..aed0704d89750
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/test/validator-amp4ads-lightbox.html
@@ -0,0 +1,43 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Format is set to A4A.
+-->
+<!doctype html>
+<html ⚡4ads>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <style amp4ads-boilerplate>body{visibility:hidden}</style>
+  <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
+  <!-- Invalid: importing disallowed version in the ads format. -->
+  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-1.0.js"></script>
+</head>
+<body>
+  <!-- Valid use with close-button despite importing the wrong version. -->
+  <amp-lightbox layout="nodisplay" close-button>
+  </amp-lightbox>
+
+  <!-- Invalid: close-button not present. -->
+  <amp-lightbox layout="nodisplay">
+  </amp-lightbox>
+
+  <!-- Invalid: scrollable present. -->
+  <amp-lightbox layout="nodisplay" close-button scrollable>
+  </amp-lightbox>
+</body>
+</html>
diff --git a/extensions/amp-lightbox/1.0/test/validator-amp4ads-lightbox.out b/extensions/amp-lightbox/1.0/test/validator-amp4ads-lightbox.out
new file mode 100644
index 0000000000000..2954b6a0d316e
--- /dev/null
+++ b/extensions/amp-lightbox/1.0/test/validator-amp4ads-lightbox.out
@@ -0,0 +1,50 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Format is set to A4A.
+|  -->
+|  <!doctype html>
+|  <html ⚡4ads>
+|  <head>
+|    <meta charset="utf-8">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <style amp4ads-boilerplate>body{visibility:hidden}</style>
+|    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
+|    <!-- Invalid: importing disallowed version in the ads format. -->
+|    <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-1.0.js"></script>
+>>   ^~~~~~~~~
+amp-lightbox/1.0/test/validator-amp4ads-lightbox.html:28:2 The attribute 'src' in tag 'SCRIPT[custom-element=amp-lightbox] (AMP4ADS)' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-lightbox-1.0.js'. (see https://amp.dev/documentation/components/amp-lightbox)
+|  </head>
+|  <body>
+|    <!-- Valid use with close-button despite importing the wrong version. -->
+|    <amp-lightbox layout="nodisplay" close-button>
+|    </amp-lightbox>
+|
+|    <!-- Invalid: close-button not present. -->
+|    <amp-lightbox layout="nodisplay">
+>>   ^~~~~~~~~
+amp-lightbox/1.0/test/validator-amp4ads-lightbox.html:36:2 The mandatory attribute 'close-button' is missing in tag 'amp-lightbox'. (see https://amp.dev/documentation/components/amp-lightbox)
+|    </amp-lightbox>
+|
+|    <!-- Invalid: scrollable present. -->
+|    <amp-lightbox layout="nodisplay" close-button scrollable>
+>>   ^~~~~~~~~
+amp-lightbox/1.0/test/validator-amp4ads-lightbox.html:40:2 The attribute 'scrollable' may not appear in tag 'amp-lightbox'. (see https://amp.dev/documentation/components/amp-lightbox)
+|    </amp-lightbox>
+|  </body>
+|  </html>
diff --git a/extensions/amp-lightbox/OWNERS b/extensions/amp-lightbox/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-lightbox/OWNERS
+++ b/extensions/amp-lightbox/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-lightbox/amp-lightbox.md b/extensions/amp-lightbox/amp-lightbox.md
index 39f9ba38e609a..bef555d79f723 100644
--- a/extensions/amp-lightbox/amp-lightbox.md
+++ b/extensions/amp-lightbox/amp-lightbox.md
@@ -2,14 +2,14 @@
 $category@: layout
 formats:
   - websites
-  - ads
-  - email
 teaser:
   text: Displays elements in a full-viewport “lightbox” modal.
+experimental: true
+bento: true
 ---
 
 <!---
-Copyright 2015 The AMP HTML Authors. All Rights Reserved.
+Copyright 2021 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.
@@ -26,144 +26,184 @@ limitations under the License.
 
 # amp-lightbox
 
-## Behavior
+## Usage
 
-The `amp-lightbox` component defines child elements that display in a full-viewport overlay/modal. When the user taps or clicks an element (e.g., a button), the `amp-lightbox` ID referenced in the clicked element's `on` attribute triggers the lightbox to take up the full viewport and displays the child elements of the `amp-lightbox`.
+The `amp-lightbox` component defines child elements that display in a
+full-viewport overlay/modal. When the user taps or clicks an element (e.g., a
+button), the `amp-lightbox` ID referenced in the clicked element's `on`
+attribute triggers the lightbox to take up the full viewport and displays the
+child elements of the `amp-lightbox`.
 
-Pressing the escape key on the keyboard closes the lightbox. Alternatively, setting the `on` attribute on one or more elements within the lightbox and setting its method to `close` closes the lightbox when the element is tapped or clicked.
+[tip type="read-on"]
+
+For showing images in a lightbox, there's also the
+[`<amp-image-lightbox>`](../amp-image-lightbox/amp-image-lightbox.md)
+component. To show a gallery of images in a lightbox, you can use
+[`<amp-lightbox-gallery>`](../amp-lightbox-gallery/amp-lightbox-gallery.md).
+
+[/tip]
+
+### Standalone use outside valid AMP documents
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+#### Example
+
+The example below demonstrates `amp-lightbox` component in standalone use.
+
+[example preview="top-frame" playground="false"]
 
 ```html
-<button on="tap:quote-lb">See Quote</button>
-<amp-lightbox id="quote-lb" layout="nodisplay">
-  <blockquote>
-    "Don't talk to me about JavaScript fatigue" - Horse JS
-  </blockquote>
-  <button on="tap:quote-lb.close">Nice!</button>
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-lightbox-1.0.css">
+  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-1.0.js"></script>
+</head>
+<amp-lightbox id="my-lightbox">
+  Lightboxed content
+  <button id='close-button'>Close lightbox</button>
 </amp-lightbox>
+<button id='open-button'>Open lightbox</button>
+<script>
+  (async () => {
+    const lightbox = document.querySelector('#my-lightbox');
+    await customElements.whenDefined('amp-lightbox');
+    const api = await lightbox.getApi();
+
+    // set up button actions
+    document.querySelector('#open-button').onclick = () => api.open();
+    document.querySelector('#close-button').onclick = () => api.close();
+  })();
+</script>
 ```
 
-{% call callout('Read on', type='read') %}
-For showing images in a lightbox, there's also the [`<amp-image-lightbox>`](https://amp.dev/documentation/components/amp-image-lightbox) component.
-{% endcall %}
+[/example]
 
-## Attributes
+#### Interactivity and API usage
 
-### animate-in (optional)
+Bento enabled components in standalone use are highly interactive through their API. In Bento standalone use, the element's API replaces AMP Actions and events and [`amp-bind`](https://amp.dev/documentation/components/amp-bind/?format=websites).
 
-Defines the style of animation for opening the lightbox. By default, this will
-be set to `fade-in`. Valid values are `fade-in`, `fly-in-bottom` and `fly-in-top`.
+The `amp-lightbox` component API is accessible by including the following script tag in your document:
 
-[tip type="important"]
-The `fly-in-top` and `fly-in-bottom` animation presets modify the `transform` property of the
-`amp-lightbox` element. Do not rely on transforming the `amp-lightbox` element
-directly. If you need to apply a transform, set it on a nested element instead.
-[/tip]
+```js
+await customElements.whenDefined('amp-lightbox');
+const api = await lightbox.getApi();
+```
 
-[filter formats="ads"]
+##### Actions
 
-### `close-button` (required)
+The `amp-lightbox` API allows you to perform the following actions:
 
-Renders a close button header at the top of the lightbox. This attribute is
-required for use with [AMPHTML Ads](#a4a). It is invalid on other AMP formats.
+**open()**
+Opens the lightbox.
 
-[/filter]<!-- formats="ads" -->
+```js
+api.open();
+```
 
-### `id` (required)
+**close()**
+Closes the lightbox.
 
-A unique identifer for the lightbox.
+```js
+api.close();
+```
 
-#### `layout` (required)
+##### Events
 
-Must be set to `nodisplay`.
+The `amp-lightbox` API allows you to register and respond to the following events:
 
-[filter formats="websites, stories"]
+**open**
 
-### `scrollable` (optional)
+This event is triggered when the lightbox is opened.
 
-When the `scrollable` attribute is present, the content of the lightbox can scroll when overflowing the height of the lightbox.
+```js
+lightbox.addEventListener('open', (e) => console.log(e))
+```
 
-[/filter]<!-- formats="websites, stories" -->
+**close**
 
-## Styling
+This event is triggered when the lightbox is closed.
 
-You can style the `amp-lightbox` with standard CSS.
+```js
+lightbox.addEventListener('close', (e) => console.log(e))
+```
 
-## Actions
+#### Layout and style
 
-The `amp-lightbox` exposes the following actions you can use [AMP on-syntax to trigger](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events):
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-lightbox-1.0.css">
+```
 
-<table>
-  <tr>
-    <th width="20%">Action</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td><code>open</code> (default)</td>
-    <td>Opens the lightbox.</td>
-  </tr>
-  <tr>
-    <td><code>close</code></td>
-    <td>Closes the lightbox.</td>
-  </tr>
-</table>
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
 
-[filter formats="ads"]
+## Attributes
 
-## <a id="a4a"></a> Using `amp-lightbox` in AMPHTML ads
+### `id`
 
-{% call callout('Note', type='note') %}
-The `amp-lightbox` component for use in AMPHTML ads is [experimental](https://amp.dev/documentation/guides-and-tutorials/learn/experimental) and under active development. To use `amp-lightbox` in AMPHTML ads, [enable the `amp-lightbox-a4a-proto` experiment](http://cdn.ampproject.org/experiments.html).
-{% endcall %}
+A unique identifier for the lightbox.
 
-There are some differences between using `amp-lightbox` in normal AMP documents vs. [ads written in AMPHTML](../amp-a4a/amp-a4a-format.md):
+### `layout` (required)
 
-### Requires close-button
+Must be set to `nodisplay`.
 
-For AMPHTML ads, the `close-button` attribute is required. This attribute causes a header to render at the top of your lightbox. The header contains a close button and a label that displays "Ad". Requirement of this header is needed to:
+### `animation`
 
-- Set a consistent and predictable user experience for AMPHTML ads.
-- Ensure that an exit point for the lightbox always exists, otherwise the creative could effectlively hijack the host document content via a lightbox.
+Defines the style of animation for opening the lightbox. By default, this will
+be set to `fade-in`. Valid values are `fade-in`, `fly-in-bottom`, and
+`fly-in-top`.
 
-The `close-button` attribute is required and only allowed in AMPHTML ads. In regular AMP documents, you can render a close button wherever you need it as part of the `<amp-lightbox>` content.
+This attribute can be configured to use different
+options based on a [media query](./../../docs/spec/amp-html-responsive-attributes.md).
 
-[/filter]<!-- formats="ads" -->
+### `scrollable`
 
-### Scrollable lightboxes are disallowed
+When the `scrollable` attribute is present, the content of the lightbox can
+scroll when overflowing the height of the lightbox.
 
-For AMPHTML ads, scrollable lightboxes are not allowed.
+## Actions
 
-### Transparent background
+### `open` (default)
 
-When you use `<amp-lightbox>` in AMPHTML ads, the background of your `<body>` element becomes transparent because the AMP runtime resizes and realigns your creative's content before the lightbox is expanded. This is done to prevent a visual "jump" of the creative while the lightbox opens. If your creative needs a background, set it on an intermediate container (like a full-size `<div>`) instead of the `<body>`.
+Opens the lightbox.
 
-When the AMPHTML ad is running in a third-party environment (for example, in a non-AMP document), the creative is centered relative to the viewport and is then expanded. This is because third-party iframes need to rely on a postMessage API to enable features like frame resizing, which is asynchronous, so centering the creative first allows a smooth transition without visual jumps.
+### `close`
 
-### Examples of transitions in lightbox for AMPHTML ads
+Closes the lightbox.
 
-In the examples below, we demonstrate how the transition looks for an AMPHTML ad that has the `animate-in="fly-in-bottom"` attribute set on the lightbox element for an AMPHTML ad in a friendly iframe, and an AMPHTML ad in a third-party iframe.
+## Styling
 
-##### On friendly iframes (e.g., coming from an AMP cache)
+You can style the `amp-lightbox` with standard CSS.
 
-<amp-img alt="lightbox ad in friendly iframe"
-    layout="fixed"
-    width="360" height="480"
-    src="https://github.com/ampproject/amphtml/raw/master/spec/img/lightbox-ad-fie.gif" >
-<noscript>
-<img alt="lightbox ad in friendly iframe" src="../../spec/img/lightbox-ad-fie.gif" />
-</noscript>
-</amp-img>
+## Accessibility
 
-##### On third-party iframes (e.g., outside the AMP cache)
+Pressing the escape key on the keyboard or setting focus on an element outside
+the lightbox closes the lightbox. Alternatively, setting the `on` attribute on
+one or more elements within the lightbox and setting its method to `close`
+closes the lightbox when the element is tapped or clicked. Once closed, the
+focus will be sent back to the trigger element.
+
+For accessibility reasons, if the user does not provide a focus in the lightbox
+on open (using `autofocus` attribute or forcing focus on open), the focus will
+be set on the first element using `on:tap`. Otherwise, a close button only
+visible to screen readers, optionally using `data-close-button-aria-label`
+attribute value, will be created and focused on.
+
+```html
+<button on="tap:quote-lb">See Quote</button>
+<amp-lightbox id="quote-lb" layout="nodisplay">
+  <blockquote>
+    "Don't talk to me about JavaScript fatigue" - Horse JS
+  </blockquote>
+  <button on="tap:quote-lb.close">Nice!</button>
+</amp-lightbox>
+```
 
-<amp-img alt="lightbox ad in 3p iframe"
-    layout="fixed"
-    width="360" height="480"
-    src="https://github.com/ampproject/amphtml/raw/master/spec/img/lightbox-ad-3p.gif" >
-<noscript>
-<img alt="lightbox ad in 3p iframe" src="../../spec/img/lightbox-ad-3p.gif" />
-</noscript>
-</amp-img>
+## Version notes
 
-## Validation
+The experimental `1.0` version of `amp-lightbox` employs the following differences from version `0.1`:
 
-See [amp-lightbox rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-lightbox/validator-amp-lightbox.protoascii) in the AMP validator specification.
+-   This component does not currently support modifying browser history state.
+-   `data-close-button-aria-label` is not supported and will soon be replaced with support for `slot="close-button"`.
+-   `animate-in` has been renamed to `animation`.
diff --git a/extensions/amp-lightbox/test-e2e/test-amp-lightbox-autocomplete.js b/extensions/amp-lightbox/test-e2e/test-amp-lightbox-autocomplete.js
new file mode 100644
index 0000000000000..48af8fc5b312d
--- /dev/null
+++ b/extensions/amp-lightbox/test-e2e/test-amp-lightbox-autocomplete.js
@@ -0,0 +1,48 @@
+/**
+ * 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.
+ */
+
+describes.endtoend(
+  'amp-lightbox with amp-autocomplete',
+  {
+    version: '0.1',
+    fixture: 'amp-lightbox/amp-lightbox-autocomplete.html',
+    environments: 'ampdoc-preset',
+  },
+  async (env) => {
+    let controller;
+
+    beforeEach(() => {
+      controller = env.controller;
+    });
+
+    it('should show autocomplete options when lightbox opens', async () => {
+      const open = await controller.findElement('#open');
+      await controller.click(open);
+
+      const results = await controller.findElement(
+        '.i-amphtml-autocomplete-results'
+      );
+      await expect(controller.getElementProperty(results, 'hidden')).to.be
+        .false;
+
+      const options = await controller.findElements(
+        '.i-amphtml-autocomplete-item'
+      );
+      // auto-complete options are apple, orange, banana.
+      await expect(options).to.have.lengthOf(3);
+    });
+  }
+);
diff --git a/extensions/amp-lightbox/test-e2e/test-amp-lightbox.js b/extensions/amp-lightbox/test-e2e/test-amp-lightbox.js
new file mode 100644
index 0000000000000..e1b4877382043
--- /dev/null
+++ b/extensions/amp-lightbox/test-e2e/test-amp-lightbox.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright 2020 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.
+ */
+
+describes.endtoend(
+  'amp-lightbox',
+  {
+    fixture: 'amp-lightbox/amp-lightbox.html',
+
+    versions: {
+      '0.1': {
+        environments: 'ampdoc-amp4ads-preset',
+        experiments: ['amp-lightbox-a4a-proto'],
+      },
+      '1.0': {
+        environments: ['single', 'viewer-demo'],
+        experiments: ['bento'],
+        initialRect: {width: 800, height: 800},
+      },
+    },
+  },
+  async (env) => {
+    let controller;
+
+    beforeEach(() => {
+      controller = env.controller;
+    });
+
+    it('should render correctly', async () => {
+      const lightbox = await controller.findElement('#lightbox');
+      await expect(controller.getElementProperty(lightbox, 'hidden')).to.be
+        .true;
+
+      const image = await controller.findElement('#image');
+      await expect(
+        controller.getElementProperty(image, 'clientWidth')
+      ).to.equal(0);
+    });
+
+    // TODO(#33413): Fix flaky tests
+    it.skip('should open the lightbox', async () => {
+      const open = await controller.findElement('#open');
+      await controller.click(open);
+
+      const lightbox = await controller.findElement('#lightbox');
+      await expect(controller.getElementProperty(lightbox, 'hidden')).to.be
+        .false;
+
+      const documentElement = await controller.getDocumentElement();
+      const width = await controller.getElementProperty(
+        documentElement,
+        'clientWidth'
+      );
+      await expect(
+        controller.getElementProperty(lightbox, 'clientWidth')
+      ).to.equal(width);
+
+      const backingImageOrLoader = await controller.findElement(
+        '#image img, #image .i-amphtml-loader-background'
+      );
+      await expect(
+        controller.getElementProperty(backingImageOrLoader, 'clientWidth')
+      ).to.equal(641);
+    });
+
+    it('should close the lightbox', async () => {
+      const open = await controller.findElement('#open');
+      await controller.click(open);
+
+      const lightbox = await controller.findElement('#lightbox');
+      await expect(controller.getElementProperty(lightbox, 'hidden')).to.be
+        .false;
+
+      const close = await controller.findElement('#close');
+      await controller.click(close);
+
+      await expect(controller.getElementProperty(lightbox, 'hidden')).to.be
+        .true;
+    });
+  }
+);
diff --git a/extensions/amp-lightbox/validator-amp-lightbox.protoascii b/extensions/amp-lightbox/validator-amp-lightbox.protoascii
index 308668f217637..d5bea86b4b2bb 100644
--- a/extensions/amp-lightbox/validator-amp-lightbox.protoascii
+++ b/extensions/amp-lightbox/validator-amp-lightbox.protoascii
@@ -14,12 +14,26 @@
 # limitations under the license.
 #
 
-tags: {  # amp-lightbox
+tags: {  # amp-lightbox 1.0
+  html_format: AMP
+  tag_name: "SCRIPT"
+  satisfies: "amp-lightbox 1.0"
+  excludes: "amp-lightbox 0.1"
+  extension_spec: {
+    name: "amp-lightbox"
+    version_name: "v1.0"
+    version: "1.0"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # amp-lightbox 0.1 and latest
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
+  satisfies: "amp-lightbox 0.1"
+  excludes: "amp-lightbox 1.0"
   extension_spec: {
     name: "amp-lightbox"
+    version_name: "v0.1"
     version: "0.1"
     version: "latest"
     requires_usage: EXEMPTED
@@ -33,6 +47,7 @@ tags: {  # amp-lightbox
   spec_name: "SCRIPT[custom-element=amp-lightbox] (AMP4ADS)"
   extension_spec: {
     name: "amp-lightbox"
+    version_name: "v0.1"
     version: "0.1"
     version: "latest"
   }
@@ -44,6 +59,7 @@ tags: {  # amp-lightbox
   spec_name: "SCRIPT[custom-element=amp-lightbox] (AMP4EMAIL)"
   extension_spec: {
     name: "amp-lightbox"
+    version_name: "v0.1"
     version: "0.1"
     version: "latest"
   }
@@ -54,11 +70,17 @@ tags: {  # amp-lightbox
 tags: {  # <amp-lightbox>
   html_format: AMP
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "AMP-LIGHTBOX"
   requires_extension: "amp-lightbox"
   attrs: {
-    name: "animate-in"
+    name: "animate-in" # 0.1 only
+    value_casei: "fade-in"
+    value_casei: "fly-in-bottom"
+    value_casei: "fly-in-top"
+  }
+  attrs: {
+    disabled_by: "amp4email"
+    name: "animation" # 1.0 only
     value_casei: "fade-in"
     value_casei: "fly-in-bottom"
     value_casei: "fly-in-top"
@@ -66,7 +88,7 @@ tags: {  # <amp-lightbox>
   attrs: { name: "controls" }
   attrs: { name: "from" }
   attrs: {
-    name: "scrollable"
+    name: "scrollable" # 0.1 only
     disabled_by: "amp4email"
   }
   # <amp-bind>
diff --git a/extensions/amp-link-rewriter/0.1/config-options.js b/extensions/amp-link-rewriter/0.1/config-options.js
index e84bafb9a0fc3..ed3a71d88093f 100644
--- a/extensions/amp-link-rewriter/0.1/config-options.js
+++ b/extensions/amp-link-rewriter/0.1/config-options.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import {getChildJsonConfig} from '../../../src/json';
-import {hasOwn} from '../../../src/utils/object';
+import {hasOwn} from '../../../src/core/types/object';
 import {user, userAssert} from '../../../src/log';
 
 /**
@@ -42,6 +42,7 @@ export function getConfigOpts(element) {
       : {},
 
     vars: hasOwn(config, 'vars') ? config['vars'] : {},
+    scopeDocument: config['scopeDocument'] ?? true,
   };
 }
 
diff --git a/extensions/amp-link-rewriter/0.1/link-rewriter.js b/extensions/amp-link-rewriter/0.1/link-rewriter.js
index c46126ee647f6..a309b8dbc970e 100644
--- a/extensions/amp-link-rewriter/0.1/link-rewriter.js
+++ b/extensions/amp-link-rewriter/0.1/link-rewriter.js
@@ -17,7 +17,7 @@
 import {Services} from '../../../src/services';
 import {getConfigOpts} from './config-options';
 import {getDataParamsFromAttributes} from '../../../src/dom';
-import {getScopeElements} from './scope';
+import {getScopeElements, isElementInScope} from './scope';
 
 const WL_ANCHOR_ATTR = ['href', 'id', 'rel', 'rev'];
 const PREFIX_DATA_ATTR = /^vars(.+)/;
@@ -66,8 +66,7 @@ export class LinkRewriter {
     if (this.isRewritten_(anchor)) {
       return;
     }
-
-    if (!this.isListed_(anchor)) {
+    if (!this.isNotFiltered_(anchor)) {
       return;
     }
     const sourceTrimmedDomain = Services.documentInfoForDoc(
@@ -103,6 +102,21 @@ export class LinkRewriter {
     );
   }
 
+  /**
+   * Check if anchor is not filtered by attribute or section scope
+   *
+   * @param {!Element} anchor
+   * @return {boolean}
+   * @private
+   */
+  isNotFiltered_(anchor) {
+    if (!this.configOpts_.scopeDocument) {
+      return isElementInScope(anchor, this.configOpts_);
+    }
+
+    return this.isListed_(anchor);
+  }
+
   /**
    * @param {!Element} anchor
    * @return {boolean}
diff --git a/extensions/amp-link-rewriter/0.1/scope.js b/extensions/amp-link-rewriter/0.1/scope.js
index 8faa6a5c146d4..0fe29fa333ef3 100644
--- a/extensions/amp-link-rewriter/0.1/scope.js
+++ b/extensions/amp-link-rewriter/0.1/scope.js
@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-import {iterateCursor} from '../../../src/dom';
+import {
+  closestAncestorElementBySelector,
+  iterateCursor,
+} from '../../../src/dom';
 
 /**
  *
@@ -42,6 +45,36 @@ export function getScopeElements(ampDoc, configOpts) {
   return filteredSelection;
 }
 
+/**
+ * @param {!Node} htmlElement
+ * @param {?Object} configOpts
+ * @return {boolean}
+ */
+export function isElementInScope(htmlElement, configOpts) {
+  return (
+    !!hasAttributeValues(htmlElement, configOpts) &&
+    isBelongsToContainer(htmlElement, configOpts)
+  );
+}
+
+/**
+ * Check if the element has a parent container specified in config.
+ *
+ * @param {!Node} htmlElement
+ * @param {!Object} configOpts
+ * @return {boolean}
+ */
+function isBelongsToContainer(htmlElement, configOpts) {
+  if (configOpts.section.length === 0) {
+    return true;
+  }
+
+  return !!closestAncestorElementBySelector(
+    htmlElement,
+    configOpts.section.join(',')
+  );
+}
+
 /**
  * Match attributes of the anchor if have been defined in config
  * compare every attribute defined in config as regex with its
diff --git a/extensions/amp-link-rewriter/0.1/test/test-amp-link-rewriter.js b/extensions/amp-link-rewriter/0.1/test/test-amp-link-rewriter.js
index c556ec9f6ddd2..17d0f793067af 100644
--- a/extensions/amp-link-rewriter/0.1/test/test-amp-link-rewriter.js
+++ b/extensions/amp-link-rewriter/0.1/test/test-amp-link-rewriter.js
@@ -35,7 +35,7 @@ describes.fakeWin(
     beforeEach(() => {
       win = env.win;
 
-      helpers = helpersMaker(env);
+      helpers = helpersMaker();
 
       config = {
         'output':
diff --git a/extensions/amp-link-rewriter/0.1/test/test-helpers.js b/extensions/amp-link-rewriter/0.1/test/test-helpers.js
index 1fd71f66176b8..d045fa5e102b0 100644
--- a/extensions/amp-link-rewriter/0.1/test/test-helpers.js
+++ b/extensions/amp-link-rewriter/0.1/test/test-helpers.js
@@ -1,3 +1,5 @@
+import {LinkRewriter} from '../link-rewriter';
+
 /**
  * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
  *
@@ -27,6 +29,39 @@ const helpersMaker = () => {
       element.append(script);
       return element;
     },
+    createConfig(config = {}) {
+      const defaults = {
+        'output':
+          'https://visit.foo.net/visit?pid=110&url=${href}&cid=${customerId}&ref=DOCUMENT_REFERRER&location=SOURCE_URL&rel=${rel}&productId=${eventId}',
+        'section': ['#in-scope'],
+        'attribute': {
+          'class': 'sidebar',
+          'href': '(https:\\/\\/(www\\.)?retailer-example\\.local).*',
+        },
+        'vars': {
+          'customerId': '12345',
+        },
+      };
+
+      return Object.assign(defaults, config);
+    },
+    assertLinksRewritten(urlsList, template, config, env) {
+      const rootNode = env.ampdoc.getRootNode();
+      const linkRewriterElement = this.createLinkRewriterElement(config);
+      rootNode.body.appendChild(linkRewriterElement);
+      rootNode.body.insertAdjacentHTML('afterbegin', template);
+
+      const rewriter = new LinkRewriter('', linkRewriterElement, env.ampdoc);
+
+      const links = rootNode.body.querySelectorAll('a');
+
+      expect(links.length).to.equal(urlsList.length);
+
+      for (let i = 0; i < links.length; i++) {
+        rewriter.handleClick(links[i]);
+        expect(links[i].href).to.equal(urlsList[i]);
+      }
+    },
   };
 };
 
diff --git a/extensions/amp-link-rewriter/0.1/test/test-noscope-document.js b/extensions/amp-link-rewriter/0.1/test/test-noscope-document.js
new file mode 100644
index 0000000000000..9b0895db904af
--- /dev/null
+++ b/extensions/amp-link-rewriter/0.1/test/test-noscope-document.js
@@ -0,0 +1,171 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import helpersMaker from './test-helpers';
+
+describes.fakeWin(
+  'amp-link-rewriter',
+  {
+    win: {
+      location: 'http://partnersite.com/123',
+    },
+    amp: {
+      extensions: ['amp-link-rewriter'],
+    },
+  },
+  (env) => {
+    let helpers;
+
+    beforeEach(() => {
+      helpers = helpersMaker();
+    });
+
+    afterEach(() => {
+      env.sandbox.restore();
+    });
+
+    /**
+     * @see https://github.com/ampproject/amphtml/issues/33731
+     */
+    it('Should not rewrite urls if no urls in scope', () => {
+      const template = `
+        <div id='in-scope'>
+            <a rel='mustfail'
+                class='sidebar'
+                href='https://retailer-example.local/some-path/'
+                data-vars-event-id='234'>Should fail by rel attribute</a>
+            <a rel='nofollow'
+                class='mustfail'
+                href='https://retailer-example.local/some-path/'
+                data-vars-event-id='234'>Should fail by class attribute</a>
+            <a rel='nofollow'
+                class='sidebar'
+                href='https://other-domain.local/some-path/'>Should fail by href attribute</a>
+        </div>
+        <div id='out-of-scope'>
+            <a rel='nofollow'
+                class='sidebar'
+                href='https://retailer-example.local/some-path/'
+                data-vars-event-id='234'>Should fail by container scope</a>
+        </div>
+      `;
+      const config = helpers.createConfig({
+        'attribute': {
+          'rel': 'nofollow',
+          'class': 'sidebar',
+          'href': '(https:\\/\\/(www\\.)?retailer-example\\.local).*',
+        },
+        'scopeDocument': false,
+      });
+
+      helpers.assertLinksRewritten(
+        [
+          'https://retailer-example.local/some-path/',
+          'https://retailer-example.local/some-path/',
+          'https://other-domain.local/some-path/',
+          'https://retailer-example.local/some-path/',
+        ],
+        template,
+        config,
+        env
+      );
+    });
+
+    it('Should rewrite urls in container scope', () => {
+      const template = `
+        <div id='in-scope'>
+            <a rel='nofollow'
+                class='sidebar'
+                href='https://www.retailer-example.local/some-path/'
+                data-vars-event-id='234'>Should pass</a>
+            <a rel='nofollow'
+                class='sidebar'
+                href='https://retailer-example.local/some-path/'
+                data-vars-event-id='234'>Should pass</a>
+        </div>
+        <div class='out-of-scope'>
+            <a rel='nofollow' class='sidebar' href='https://www.retailer-example.local/some-path/'>Should fail by scope</a>
+            <a rel='nofollow'
+                class='sidebar'
+                href='https://retailer-example.local/some-path/'
+                data-vars-event-id='234'>Should fail by scope</a>
+        </div>
+      `;
+      const config = helpers.createConfig({
+        'scopeDocument': false,
+      });
+
+      helpers.assertLinksRewritten(
+        [
+          'https://visit.foo.net/visit?pid=110&url=https%3A%2F%2Fwww.retailer-example.local%2Fsome-path%2F&cid=12345&ref=&location=http%3A%2F%2Fpartnersite.com%2F123&rel=nofollow&productId=234',
+          'https://visit.foo.net/visit?pid=110&url=https%3A%2F%2Fretailer-example.local%2Fsome-path%2F&cid=12345&ref=&location=http%3A%2F%2Fpartnersite.com%2F123&rel=nofollow&productId=234',
+          'https://www.retailer-example.local/some-path/',
+          'https://retailer-example.local/some-path/',
+        ],
+        template,
+        config,
+        env
+      );
+    });
+
+    it('Should rewrite urls in attribute scope', () => {
+      const config = helpers.createConfig({
+        'attribute': {
+          'rel': 'nofollow',
+          'class': 'sidebar',
+          'href': '(https:\\/\\/(www\\.)?retailer-example\\.local).*',
+        },
+        'scopeDocument': false,
+      });
+      const template = `
+        <div id='in-scope'>
+            <a rel='nofollow'
+                class='sidebar'
+                href='https://www.retailer-example.local/some-path/'>Should pass</a>
+            <a rel='nofollow'
+                class='sidebar'
+                href='https://retailer-example.local/some-path/'
+                data-vars-event-id='234'>Should pass</a>
+            <a rel='mustfail'
+                class='sidebar'
+                href='https://retailer-example.local/some-path/'
+                data-vars-event-id='234'>Should fail by rel attribute</a>
+            <a rel='nofollow'
+                class='mustfail'
+                href='https://retailer-example.local/some-path/'
+                data-vars-event-id='234'>Should fail by class attribute</a>
+            <a rel='nofollow'
+                class='sidebar'
+                href='https://other-domain.local/some-path/'
+                data-vars-event-id='234'>Should fail by href attribute</a>
+        </div>
+      `;
+
+      helpers.assertLinksRewritten(
+        [
+          'https://visit.foo.net/visit?pid=110&url=https%3A%2F%2Fwww.retailer-example.local%2Fsome-path%2F&cid=12345&ref=&location=http%3A%2F%2Fpartnersite.com%2F123&rel=nofollow&productId=',
+          'https://visit.foo.net/visit?pid=110&url=https%3A%2F%2Fretailer-example.local%2Fsome-path%2F&cid=12345&ref=&location=http%3A%2F%2Fpartnersite.com%2F123&rel=nofollow&productId=234',
+          'https://retailer-example.local/some-path/',
+          'https://retailer-example.local/some-path/',
+          'https://other-domain.local/some-path/',
+        ],
+        template,
+        config,
+        env
+      );
+    });
+  }
+);
diff --git a/extensions/amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.out b/extensions/amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.out
index 82d352dfa1cf4..9d58a5a48abfc 100644
--- a/extensions/amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.out
+++ b/extensions/amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.out
@@ -60,14 +60,14 @@ FAIL
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.html:60:6 The tag 'amp-link-rewriter extension .js script' is present, but is excluded by the presence of 'amp-skimlinks'. (see https://amp.dev/documentation/components/amp-link-rewriter)
+amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.html:60:6 The tag 'amp-link-rewriter extension script' is present, but is excluded by the presence of 'amp-skimlinks'. (see https://amp.dev/documentation/components/amp-link-rewriter)
 >>       ^~~~~~~~~
-amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.html:60:6 The tag 'amp-link-rewriter extension .js script' is present, but is excluded by the presence of 'amp-smartlinks'. (see https://amp.dev/documentation/components/amp-link-rewriter)
+amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.html:60:6 The tag 'amp-link-rewriter extension script' is present, but is excluded by the presence of 'amp-smartlinks'. (see https://amp.dev/documentation/components/amp-link-rewriter)
 >>       ^~~~~~~~~
-amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.html:60:6 The tag 'amp-skimlinks extension .js script' is present, but is excluded by the presence of 'amp-link-rewriter'. (see https://amp.dev/documentation/components/amp-skimlinks)
+amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.html:60:6 The tag 'amp-skimlinks extension script' is present, but is excluded by the presence of 'amp-link-rewriter'. (see https://amp.dev/documentation/components/amp-skimlinks)
 >>       ^~~~~~~~~
-amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.html:60:6 The tag 'amp-skimlinks extension .js script' is present, but is excluded by the presence of 'amp-smartlinks'. (see https://amp.dev/documentation/components/amp-skimlinks)
+amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.html:60:6 The tag 'amp-skimlinks extension script' is present, but is excluded by the presence of 'amp-smartlinks'. (see https://amp.dev/documentation/components/amp-skimlinks)
 >>       ^~~~~~~~~
-amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.html:60:6 The tag 'amp-smartlinks extension .js script' is present, but is excluded by the presence of 'amp-link-rewriter'. (see https://amp.dev/documentation/components/amp-smartlinks)
+amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.html:60:6 The tag 'amp-smartlinks extension script' is present, but is excluded by the presence of 'amp-link-rewriter'. (see https://amp.dev/documentation/components/amp-smartlinks)
 >>       ^~~~~~~~~
-amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.html:60:6 The tag 'amp-smartlinks extension .js script' is present, but is excluded by the presence of 'amp-skimlinks'. (see https://amp.dev/documentation/components/amp-smartlinks)
+amp-link-rewriter/0.1/test/validator-amp-link-rewriter-exclude.html:60:6 The tag 'amp-smartlinks extension script' is present, but is excluded by the presence of 'amp-skimlinks'. (see https://amp.dev/documentation/components/amp-smartlinks)
diff --git a/extensions/amp-link-rewriter/amp-link-rewriter.md b/extensions/amp-link-rewriter/amp-link-rewriter.md
index b758f63b35585..3efe77dd83f25 100644
--- a/extensions/amp-link-rewriter/amp-link-rewriter.md
+++ b/extensions/amp-link-rewriter/amp-link-rewriter.md
@@ -24,16 +24,18 @@ limitations under the License.
 
 # amp-link-rewriter
 
-## Overview
+## Usage
 
-`amp-link-rewriter` allows publishers to rewrite URL based on configurable pattern.
+`amp-link-rewriter` allows publishers to rewrite URLs based on configurable
+patterns.
 
-## Getting started
+### Required element structure
 
-**Add the required script**
-Inside the `<head>...</head>` section of your AMP page, insert this code before the line `<script async src="https://cdn.ampproject.org/v0.js"></script>`
+#### Add the required `script`
 
-Code:
+Inside the `<head>...</head>` section of your AMP page, insert the following
+code before the line
+`<script async src="https://cdn.ampproject.org/v0.js"></script>`.
 
 ```html
 <script
@@ -43,10 +45,10 @@ Code:
 ></script>
 ```
 
-**Add the amp-link-rewriter extension**
-Inside the `<body>...</body>` section of your AMP page, insert code as shown below the example (it has to be customized for every vendor use case):
+#### Add the `amp-link-rewriter` component
 
-Code:
+Inside the `<body>...</body>` section of your AMP page, insert code as shown
+below the example (it has to be customized for every vendor use case):
 
 ```html
 <amp-link-rewriter layout="nodisplay">
@@ -68,6 +70,8 @@ Code:
 </amp-link-rewriter>
 ```
 
+#### Full example
+
 The final code should look like:
 
 ```html
@@ -107,13 +111,13 @@ The final code should look like:
 </html>
 ```
 
-## JSON configuration
-
-##### output (required)
+### JSON configuration
 
-The "output" property has to be a string value with the redirection url plus a query string of placeholders that will be shifted with values defined in the config JSON 'vars' property, or in the anchor itself as a data attribute.
+#### `output` (required)
 
-Example:
+The `output` property has to be a string value with the redirection url plus a
+query string of placeholders that will be shifted with values defined in the
+config JSON `vars` property, or in the anchor itself as a data attribute.
 
 ```html
 <amp-link-rewriter layout="nodisplay">
@@ -128,7 +132,8 @@ Example:
 </amp-link-rewriter>
 ```
 
-We can also define data values in the anchor data attribute as the following example:
+We can also define data values in the anchor data attribute as the following
+example:
 
 ```html
 <a
@@ -151,7 +156,12 @@ The resulting, rewritten URL would be:
 `https://visit.foo.net?eid=231&cid=12345`
 ```
 
-Apart from vars defined in the _vars_ property of the JSON configuration, or as a data attribute, there are other pre-defined _vars_ which are AMP URL MACROs plus anchor attributes id and href that could be used for replacing values in the output pattern. The AMP URL MACROs available are DOCUMENT_REFERRER and SOURCE_URL. The following table shows the relationship between defined data and placeholders.
+Apart from vars defined in the `vars` property of the JSON configuration, or as
+a data attribute, there are other predefined `vars` which are AMP URL MACROs
+plus anchor attributes `id` and `href` that could be used for replacing values
+in the output pattern. The AMP URL MACROs available are `DOCUMENT_REFERRER` and
+`SOURCE_URL`. The following table shows the relationship between defined data
+and placeholders.
 
 | value        | source | example                                        | placeholder         |
 | ------------ | ------ | ---------------------------------------------- | ------------------- |
@@ -165,11 +175,10 @@ Apart from vars defined in the _vars_ property of the JSON configuration, or as
 | rev          | anchor | `<a href="..." rev="author" />`                | `${rev}`            |
 | vars.\*      | config | `{ "vars": { "publisherId": "123" } }`         | `${publisherId}`    |
 
-##### section (optional)
+#### section (optional)
 
-The "section" property defines an array of css selector expressions that filter areas where the url rewriting should operate.
-
-Example:
+The `section` property defines an array of css selector expressions that filter
+areas where the url rewriting should operate.
 
 ```json
 {
@@ -178,13 +187,16 @@ Example:
 }
 ```
 
-In the previous example, the html sections defined with attribute ID equal to "product-listing-1" and "product-listing-2" will be considered for url rewriting.
-
-##### attribute (optional)
+In the previous example, the html sections defined with attribute ID equal to
+`product-listing-1` and `product-listing-2` will be considered for url
+rewriting.
 
-The "attribute" property defines a list of rules to match the anchor elements retrieved from the filtered sections. These rules are built from regular expressions associated with html element attributes as "id", "href", "class" or "rel".
+#### attribute (optional)
 
-Example:
+The `attribute` property defines a list of rules to match the anchor elements
+retrieved from the filtered sections. These rules are built from regular
+expressions associated with html element attributes as `id`, `href`, `class` or
+`rel`.
 
 ```json
 {
@@ -196,9 +208,22 @@ Example:
 }
 ```
 
-The anchors within the html area with id 'product-listing-1' will have to match the regex expression defined for the attribute href and class. The regex expression will be wrapped with ^ and \$ for a full match.
-In this example, it means that all the anchors with `youtube.com` and 'mobile.vodafone.de' will be excluded. Also, the included anchors need to have a class attribute with the value 'comments'
+The anchors within the html area with id `product-listing-1` will have to match
+the regex expression defined for the attribute href and class. The regex
+expression will be wrapped with `^` and `\$` for a full match.
+
+In this example, it means that all the anchors with `youtube.com` and
+`mobile.vodafone.de` will be excluded. Also, the included anchors need to have a
+class attribute with the value `comments`.
+
+#### scopeDocument (optional)
+
+By default, all anchors will be rewritten if the page doesn't have any
+links which respect the `attribute` and `section` scope specified in the config.
+
+To change this behavior, you need to set `scopeDocument` to `false`.
 
 ## Validation
 
-See [amp-link-rewriter rules](validator-amp-link-rewriter.protoascii) in the AMP validator specification.
+See [`amp-link-rewriter` rules](validator-amp-link-rewriter.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-list/0.1/amp-list.js b/extensions/amp-list/0.1/amp-list.js
index d7b6621cf3962..68ebbe8538d83 100644
--- a/extensions/amp-list/0.1/amp-list.js
+++ b/extensions/amp-list/0.1/amp-list.js
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
-import {AmpEvents} from '../../../src/amp-events';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {CSS} from '../../../build/amp-list-0.1.css';
 import {
   DIFFABLE_AMP_ELEMENTS,
@@ -23,7 +23,7 @@ import {
   DIFF_KEY,
   markElementForDiffing,
 } from '../../../src/purifier/sanitation';
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {
   Layout,
   getLayoutClass,
@@ -41,7 +41,6 @@ import {
 } from '../../../src/batched-json';
 import {
   childElementByAttr,
-  matches,
   removeChildren,
   scopedQuerySelector,
   scopedQuerySelectorAll,
@@ -49,22 +48,20 @@ import {
 } from '../../../src/dom';
 import {createCustomEvent, listen} from '../../../src/event-helper';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict, getValueForExpr} from '../../../src/core/types/object';
 import {getMode} from '../../../src/mode';
-import {getSourceOrigin} from '../../../src/url';
-import {getValueForExpr} from '../../../src/json';
+import {getSourceOrigin, isAmpScriptUri} from '../../../src/url';
+
+import {isAmp4Email} from '../../../src/format';
+import {isArray, toArray} from '../../../src/core/types/array';
+import {isExperimentOn} from '../../../src/experiments';
+import {px, setImportantStyles, setStyles, toggle} from '../../../src/style';
+import {setDOM} from '../../../third_party/set-dom/set-dom';
 import {
-  getViewerAuthTokenIfAvailable,
   setupAMPCors,
   setupInput,
   setupJsonFetchInit,
 } from '../../../src/utils/xhr-utils';
-import {isAmp4Email} from '../../../src/format';
-import {isArray, toArray} from '../../../src/types';
-import {isExperimentOn} from '../../../src/experiments';
-import {px, setImportantStyles, setStyles, toggle} from '../../../src/style';
-import {setDOM} from '../../../third_party/set-dom/set-dom';
-import {startsWith} from '../../../src/string';
 
 /** @const {string} */
 const TAG = 'amp-list';
@@ -122,8 +119,8 @@ export class AmpList extends AMP.BaseElement {
     /** @private {?Array} */
     this.renderedItems_ = null;
 
-    /** @const {!../../../src/service/template-impl.Templates} */
-    this.templates_ = Services.templatesFor(this.win);
+    /** @private {?../../../src/service/template-impl.Templates} */
+    this.templates_ = null;
 
     /**
      * Has layoutCallback() been called yet?
@@ -150,11 +147,8 @@ export class AmpList extends AMP.BaseElement {
      */
     this.initialSrc_ = null;
 
-    /**
-     * Does the amp-list have initial content that's not a placeholder?
-     * @private {boolean}
-     */
-    this.hasInitialContent_ = false;
+    /** @private {?Element} */
+    this.diffablePlaceholder_ = null;
 
     /** @private {?../../../extensions/amp-bind/0.1/bind-impl.Bind} */
     this.bind_ = null;
@@ -177,7 +171,7 @@ export class AmpList extends AMP.BaseElement {
     this.registerAction('refresh', () => {
       if (this.layoutCompleted_) {
         this.resetIfNecessary_();
-        return this.fetchList_(/* opt_refresh */ true);
+        return this.fetchList_({refresh: true});
       }
     });
 
@@ -190,23 +184,37 @@ export class AmpList extends AMP.BaseElement {
 
     /** @private {?../../../src/service/action-impl.ActionService} */
     this.action_ = null;
+
+    /** @private {?../../../src/service/owners-interface.OwnersInterface} */
+    this.owners_ = null;
   }
 
   /** @override */
   isLayoutSupported(layout) {
     if (layout === Layout.CONTAINER) {
       const doc = this.element.ownerDocument;
+      const isEmail = doc && isAmp4Email(doc);
+      const hasPlaceholder =
+        this.getPlaceholder() || this.element.hasAttribute('diffable');
+      if (isEmail) {
+        if (!hasPlaceholder) {
+          user().warn(
+            TAG,
+            'amp-list[layout=container] should have a placeholder to establish an initial size. ' +
+              'See https://go.amp.dev/c/amp-list/#placeholder-and-fallback. %s',
+            this.element
+          );
+        }
+        return (this.enableManagedResizing_ = true);
+      }
       userAssert(
-        (doc && isAmp4Email(doc)) ||
-          isExperimentOn(this.win, 'amp-list-layout-container'),
+        isExperimentOn(this.win, 'amp-list-layout-container'),
         'Experiment "amp-list-layout-container" is not turned on.'
       );
       userAssert(
-        this.getPlaceholder(),
-        '%s with layout=container relies on a placeholder to determine an initial height. ' +
-          'For more info on adding a placeholder see: ' +
-          'https://go.amp.dev/c/amp-list/#placeholder-and-fallback. %s',
-        TAG,
+        hasPlaceholder,
+        'amp-list[layout=container] should have a placeholder to establish an initial size. ' +
+          'See https://go.amp.dev/c/amp-list/#placeholder-and-fallback. %s',
         this.element
       );
       return (this.enableManagedResizing_ = true);
@@ -216,7 +224,9 @@ export class AmpList extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.templates_ = Services.templatesForDoc(this.element);
     this.action_ = Services.actionServiceForDoc(this.element);
+    this.owners_ = Services.ownersForDoc(this.element);
     /** If the element is in an email document,
      * allow its `changeToLayoutContainer` and `refresh` actions. */
     this.action_.addToAllowlist(
@@ -245,17 +255,14 @@ export class AmpList extends AMP.BaseElement {
     // is missing attributes in the constructor.
     this.initialSrc_ = this.element.getAttribute('src');
 
-    // TODO(amphtml): Decouple "initial content" from diffing in new version.
     if (this.element.hasAttribute('diffable')) {
-      // Set container to the initial content, if it exists. This allows
-      // us to DOM diff with the rendered result.
-      const initialContent = scopedQuerySelector(
-        this.element,
-        '> div[role=list]:not([placeholder]):not([fallback]):not([fetch-error])'
-      );
-      if (initialContent) {
-        this.container_ = initialContent;
-        this.hasInitialContent_ = true;
+      // Initialize container to the diffable placeholder, if it exists.
+      // This enables DOM diffing with the rendered result.
+      this.diffablePlaceholder_ = this.queryDiffablePlaceholder_();
+      if (this.diffablePlaceholder_) {
+        this.container_ = this.diffablePlaceholder_;
+      } else {
+        user().warn(TAG, 'Could not find child div for diffing.', this.element);
       }
     }
     if (!this.container_) {
@@ -263,10 +270,6 @@ export class AmpList extends AMP.BaseElement {
       this.element.appendChild(this.container_);
     }
 
-    if (!this.element.hasAttribute('aria-live')) {
-      this.element.setAttribute('aria-live', 'polite');
-    }
-
     // auto-resize is deprecated and will be removed per deprecation schedule
     // It will relaunched under a new attribute (resizable-children) soon.
     // please see https://github.com/ampproject/amphtml/issues/18849
@@ -301,7 +304,7 @@ export class AmpList extends AMP.BaseElement {
     const placeholder = this.getPlaceholder();
     if (placeholder) {
       this.attemptToFit_(placeholder);
-    } else if (this.hasInitialContent_) {
+    } else if (this.diffablePlaceholder_) {
       this.attemptToFit_(dev().assertElement(this.container_));
     }
 
@@ -316,6 +319,31 @@ export class AmpList extends AMP.BaseElement {
     return this.fetchList_();
   }
 
+  /**
+   * A "diffable placeholder" is the child container <div> (which is usually created by the amp-list
+   * to hold the rendered children). It serves the same purpose as a placeholder, except it can be diffed.
+   *
+   * For example:
+   * <amp-list>
+   *   <div placeholder>I'm displayed before render.</div>
+   * </amp-list>
+   *
+   * <amp-list diffable>
+   *   <div role=list>I'm displayed before render.</div>
+   * </amp-list>
+   *
+   * @return {?Element}
+   * @private
+   */
+  queryDiffablePlaceholder_() {
+    let selector = this.element.hasAttribute('single-item')
+      ? '> div'
+      : '> div[role=list]';
+    // Don't select other special <div> children used for placeholders/fallback/etc.
+    selector += ':not([placeholder]):not([fallback]):not([fetch-error])';
+    return scopedQuerySelector(this.element, selector);
+  }
+
   /**
    * @return {!Promise}
    * @private
@@ -381,15 +409,15 @@ export class AmpList extends AMP.BaseElement {
     let listHeight;
     return this.measureMutateElement(
       /* measurer */ () => {
-        buttonHeight = this.getLoadMoreService_().getLoadMoreButton()
-          ./*OK*/ offsetHeight;
+        buttonHeight =
+          this.getLoadMoreService_().getLoadMoreButton()./*OK*/ offsetHeight;
         listHeight = this.element./*OK*/ offsetHeight;
       },
       /* mutator */ () => {
         setStyles(dev().assertElement(this.container_), {
           'max-height': `calc(100% - ${px(buttonHeight)})`,
         });
-        // TODO(wg-ui-and-a11y): Use Mutator.requestChangeSize.
+        // TODO(wg-performance): Use Mutator.requestChangeSize.
         this.element./*OK*/ applySize(listHeight + buttonHeight);
       }
     );
@@ -403,10 +431,7 @@ export class AmpList extends AMP.BaseElement {
    * @private
    */
   isAmpStateSrc_(src) {
-    return (
-      isExperimentOn(this.win, 'amp-list-init-from-state') &&
-      startsWith(src, AMP_STATE_URI_SCHEME)
-    );
+    return src.startsWith(AMP_STATE_URI_SCHEME);
   }
 
   /**
@@ -445,6 +470,33 @@ export class AmpList extends AMP.BaseElement {
       });
   }
 
+  /**
+   * Gets the json from an amp-script uri.
+   *
+   * @param {string} src
+   * @return {Promise<!JsonObject>}
+   * @private
+   */
+  getAmpScriptJson_(src) {
+    return Promise.resolve()
+      .then(() => {
+        userAssert(
+          !this.ssrTemplateHelper_.isEnabled(),
+          '[amp-list]: "amp-script" URIs cannot be used in SSR mode.'
+        );
+        return Services.scriptForDocOrNull(this.element).then(
+          (ampScriptService) => ampScriptService.fetch(src)
+        );
+      })
+      .then((json) => {
+        userAssert(
+          typeof json === 'object',
+          `[amp-list] ${src} must return json, but instead returned: ${typeof json}`
+        );
+        return json;
+      });
+  }
+
   /** @override */
   mutatedAttributesCallback(mutations) {
     dev().info(TAG, 'mutate:', this.element, mutations);
@@ -493,15 +545,6 @@ export class AmpList extends AMP.BaseElement {
     }
   }
 
-  /**
-   * amp-list reuses the loading indicator when the list is fetched again via
-   * bind mutation or refresh action
-   * @override
-   */
-  isLoadingReused() {
-    return this.element.hasAttribute('reset-on-refresh');
-  }
-
   /**
    * Creates and returns <div> that contains the template-rendered children.
    * @return {!Element}
@@ -533,12 +576,6 @@ export class AmpList extends AMP.BaseElement {
       if (!element.hasAttribute('role')) {
         this.setRoleAttribute_(element, 'listitem');
       }
-      if (
-        !element.hasAttribute('tabindex') &&
-        !this.isTabbable_(dev().assertElement(element))
-      ) {
-        element.setAttribute('tabindex', '0');
-      }
       container.appendChild(element);
     });
   }
@@ -592,7 +629,9 @@ export class AmpList extends AMP.BaseElement {
     ) {
       const reset = () => {
         this.togglePlaceholder(true);
-        this.toggleLoading(true);
+        const forceLoadingIndicator =
+          this.element.hasAttribute('reset-on-refresh');
+        this.toggleLoading(true, forceLoadingIndicator);
         this.toggleFallback_(false);
         // Clean up bindings in children before removing them from DOM.
         if (this.bind_) {
@@ -602,6 +641,10 @@ export class AmpList extends AMP.BaseElement {
             'update': false,
           });
         }
+        this.owners_./*OK*/ scheduleUnlayout(
+          this.element,
+          dev().assertElement(this.container_)
+        );
         removeChildren(dev().assertElement(this.container_));
       };
 
@@ -642,8 +685,16 @@ export class AmpList extends AMP.BaseElement {
       itemsExpr,
       this.element
     );
-    if (this.element.hasAttribute('single-item') && !isArray(items)) {
-      items = [items];
+    if (this.element.hasAttribute('single-item')) {
+      if (!isArray(items)) {
+        items = [items];
+      } else {
+        user().warn(
+          TAG,
+          'Expected response to contain a non-array Object due to "single-item" attribute.',
+          this.element
+        );
+      }
     }
     items = user().assertArray(items);
     if (this.element.hasAttribute('max-items')) {
@@ -672,11 +723,12 @@ export class AmpList extends AMP.BaseElement {
    * the list has been populated with rendered list items. If the viewer is
    * capable of rendering the templates, then the fetching of the list and
    * transformation of the template is handled by the viewer.
-   * @param {boolean=} opt_refresh
+   * @param {{refresh: (boolean|undefined), append: (boolean|undefined)}=} options
    * @return {!Promise}
    * @private
    */
-  fetchList_(opt_refresh = false) {
+  fetchList_(options = {}) {
+    const {append = false, refresh = false} = options;
     const elementSrc = this.element.getAttribute('src');
     if (!elementSrc) {
       return Promise.resolve();
@@ -684,11 +736,15 @@ export class AmpList extends AMP.BaseElement {
 
     let fetch;
     if (this.ssrTemplateHelper_.isEnabled()) {
-      fetch = this.ssrTemplate_(opt_refresh);
+      fetch = this.ssrTemplate_(refresh);
     } else {
-      fetch = this.isAmpStateSrc_(elementSrc)
-        ? this.getAmpStateJson_(elementSrc)
-        : this.prepareAndSendFetch_(opt_refresh);
+      if (this.isAmpStateSrc_(elementSrc)) {
+        fetch = this.getAmpStateJson_(elementSrc);
+      } else if (isAmpScriptUri(elementSrc)) {
+        fetch = this.getAmpScriptJson_(elementSrc);
+      } else {
+        fetch = this.prepareAndSendFetch_(refresh);
+      }
       fetch = fetch.then((data) => {
         // Bail if the src has changed while resolving the xhr request.
         if (elementSrc !== this.element.getAttribute('src')) {
@@ -700,40 +756,24 @@ export class AmpList extends AMP.BaseElement {
           this.updateLoadMoreSrc_(/** @type {!JsonObject} */ (data));
         }
 
-        return this.scheduleRender_(
-          items,
-          /*opt_append*/ false,
-          data
-        ).then(() => this.maybeSetLoadMore_());
+        return this.scheduleRender_(items, append, data).then(() =>
+          this.maybeSetLoadMore_()
+        );
       });
     }
 
     return fetch.catch((error) => {
+      // Append flow has its own error handling
+      if (append) {
+        throw error;
+      }
+
       this.triggerFetchErrorEvent_(error);
       this.showFallback_();
       throw error;
     });
   }
 
-  /**
-   * Fetch and render items intended to be appended to the current list
-   * @return {!Promise}
-   */
-  fetchListAndAppend_() {
-    if (!this.element.getAttribute('src')) {
-      return Promise.resolve();
-    }
-    return this.prepareAndSendFetch_().then((data) => {
-      const items = this.computeListItems_(data);
-      this.updateLoadMoreSrc_(/** @type {!JsonObject} */ (data));
-      return this.scheduleRender_(
-        items,
-        /*opt_append*/ true,
-        /*opt_payload*/ data
-      );
-    });
-  }
-
   /**
    * @param {!Array<?JsonObject>} items
    * @return {!Array<?JsonObject>}
@@ -797,7 +837,8 @@ export class AmpList extends AMP.BaseElement {
         (response) => {
           userAssert(
             response,
-            'Error proxying amp-list templates, received no response.'
+            'Failed fetching JSON data: XHR Failed fetching ' +
+              `(${this.buildElidedUrl_(request)}): received no response.`
           );
           const init = response['init'];
           if (init) {
@@ -805,21 +846,28 @@ export class AmpList extends AMP.BaseElement {
             if (status >= 300) {
               /** HTTP status codes of 300+ mean redirects and errors. */
               throw user().createError(
-                'Error proxying amp-list templates with status: ',
+                `Failed fetching JSON data (${this.buildElidedUrl_(request)})` +
+                  ': HTTP error',
                 status
               );
             }
           }
           userAssert(
             typeof response['html'] === 'string',
-            'Expected response with format {html: <string>}. Received: ',
+            'Failed fetching JSON data: XHR Failed fetching ' +
+              `(${this.buildElidedUrl_(request)}): Expected response with ` +
+              'format {html: <string>}. Received: ',
             response
           );
           request.fetchOpt.responseType = 'application/json';
           return response;
         },
         (error) => {
-          throw user().createError('Error proxying amp-list templates', error);
+          throw user().createError(
+            'Failed fetching JSON data: XHR Failed fetching ' +
+              `(${this.buildElidedUrl_(request)})`,
+            error
+          );
         }
       )
       .then((data) => {
@@ -827,10 +875,21 @@ export class AmpList extends AMP.BaseElement {
         if (elementSrc !== this.element.getAttribute('src')) {
           return;
         }
-        this.scheduleRender_(data, /* append */ false);
+        return this.scheduleRender_(data, /* append */ false);
       });
   }
 
+  /**
+   * Builds an elided, shortened URL suitable for display in error messages from
+   * the given request.
+   * @param {!FetchRequestDef} request
+   * @return {string}
+   */
+  buildElidedUrl_(request) {
+    const url = Services.urlForDoc(this.element).parse(request.xhrUrl);
+    return `${url.origin}/...`;
+  }
+
   /**
    * Schedules a fetch result to be rendered in the near future.
    * @param {!Array|!JsonObject|undefined} data
@@ -841,7 +900,7 @@ export class AmpList extends AMP.BaseElement {
    */
   scheduleRender_(data, opt_append, opt_payload) {
     const deferred = new Deferred();
-    const {promise, resolve: resolver, reject: rejecter} = deferred;
+    const {promise, reject: rejecter, resolve: resolver} = deferred;
 
     // If there's nothing currently being rendered, schedule a render pass.
     if (!this.renderItems_) {
@@ -857,8 +916,8 @@ export class AmpList extends AMP.BaseElement {
     });
 
     if (this.renderedItems_ && opt_append) {
-      this.renderItems_.payload = /** @type {(?JsonObject|Array<JsonObject>)} */ (opt_payload ||
-        {});
+      this.renderItems_.payload =
+        /** @type {(?JsonObject|Array<JsonObject>)} */ (opt_payload || {});
     }
 
     return promise;
@@ -962,9 +1021,9 @@ export class AmpList extends AMP.BaseElement {
    * @private
    */
   updateBindings_(elementOrElements, append) {
-    const elements = /** @type {!Array<!Element>} */ (isArray(elementOrElements)
-      ? elementOrElements
-      : [elementOrElements]);
+    const elements = /** @type {!Array<!Element>} */ (
+      isArray(elementOrElements) ? elementOrElements : [elementOrElements]
+    );
 
     // binding=no: Always skip render-blocking update.
     const binding = this.element.getAttribute('binding');
@@ -1008,22 +1067,20 @@ export class AmpList extends AMP.BaseElement {
     };
 
     // binding=refresh: Only do render-blocking update after initial render.
-    if (binding && startsWith(binding, 'refresh')) {
-      // Bind service must be available after first mutation, so don't
-      // wait on the async service getter.
-      if (this.bind_ && this.bind_.signals().get('FIRST_MUTATE')) {
+    if (binding && binding.startsWith('refresh')) {
+      // Don't bother using bindForDocOrNull() since the Bind service must be available after first mutate.
+      const afterFirstMutate =
+        this.bind_ && this.bind_.signals().get('FIRST_MUTATE');
+      if (afterFirstMutate) {
         return updateWith(this.bind_);
       } else {
-        // On initial render, do a non-blocking scan and don't update.
-        Services.bindForDocOrNull(this.element).then((bind) => {
-          if (bind) {
-            const evaluate = binding == 'refresh-evaluate';
-            bind.rescan(elements, [], {
-              'fast': true,
-              'update': evaluate ? 'evaluate' : false,
-            });
-          }
-        });
+        // This must be initial render, so do a non-blocking scan for bindings only.
+        // [diffable] is a special case that is handled later in render_(), see comment there.
+        if (!this.element.hasAttribute('diffable')) {
+          this.scanForBindings_(elements, []);
+        }
+
+        // Don't block render and return synchronously.
         return Promise.resolve(elements);
       }
     }
@@ -1038,6 +1095,32 @@ export class AmpList extends AMP.BaseElement {
     });
   }
 
+  /**
+   * Scans for bindings in `addedElements` and removes bindings in `removedElements`.
+   * Unlike updateBindings(), does NOT apply bindings or update DOM.
+   * Should only be used for binding="refresh" or binding="refresh-evaluate".
+   * @param {!Array<!Element>} addedElements
+   * @param {!Array<!Element>} removedElements
+   * @private
+   */
+  scanForBindings_(addedElements, removedElements) {
+    const binding = this.element.getAttribute('binding');
+    if (!binding || !binding.startsWith('refresh')) {
+      return;
+    }
+    Services.bindForDocOrNull(this.element).then((bind) => {
+      if (bind) {
+        // For binding="refresh-evaluate", we scan for bindings, evaluate+cache expressions, but skip DOM update.
+        // For binding="refresh", we only scan for bindings.
+        const update = binding == 'refresh-evaluate' ? 'evaluate' : false;
+        bind.rescan(addedElements, removedElements, {
+          'fast': true,
+          'update': update,
+        });
+      }
+    });
+  }
+
   /**
    * @param {!Array<!Element>} elements
    * @param {boolean=} opt_append
@@ -1045,16 +1128,26 @@ export class AmpList extends AMP.BaseElement {
    * @private
    */
   render_(elements, opt_append = false) {
-    dev().info(TAG, 'render:', this.element, elements);
     const container = dev().assertElement(this.container_);
 
     const renderAndResize = () => {
       this.hideFallbackAndPlaceholder_();
 
-      if (this.element.hasAttribute('diffable') && container.hasChildNodes()) {
+      if (this.element.hasAttribute('diffable')) {
+        // TODO:(wg-performance)(#28781) Ensure owners_.scheduleUnlayout() is
+        // called for diff elements that are removed
         this.diff_(container, elements);
+
+        // For diffable amp-list, we have to wait until DOM diffing is done here to scan for new bindings
+        // (vs. asynchronously in updateBindings()), and scan the entire container (vs. just `elements`).
+        //
+        // This is because instead of replacing the entire DOM subtree, the diffing process removes
+        // select children from `elements` and inserts them into the container. This results in a race
+        // between diff_() and Bind.rescan(), which we avoid by delaying the latter until now.
+        this.scanForBindings_([container], [container]);
       } else {
         if (!opt_append) {
+          this.owners_./*OK*/ scheduleUnlayout(this.element, container);
           removeChildren(container);
         }
         this.addElementsToContainer_(elements, container);
@@ -1107,10 +1200,10 @@ export class AmpList extends AMP.BaseElement {
     const newContainer = this.createContainer_();
     this.addElementsToContainer_(elements, newContainer);
 
-    // Typically, diff-marking elements happens during template sanitization.
-    // This obviously doesn't apply to initial content, so we mark them manually
-    // here to enable diffing in the first render.
-    if (this.hasInitialContent_) {
+    // On renders N>1, diff-marking happens during template sanitization.
+    // For render N=1, the placeholder already exists in DOM and is not
+    // sanitized, so mark it manually to enable diffing.
+    if (this.diffablePlaceholder_) {
       this.markContainerForDiffing_(container);
     }
 
@@ -1134,8 +1227,8 @@ export class AmpList extends AMP.BaseElement {
     // to guarantee uniqueness.
     let key = -1;
     // (1) AMP elements and (2) elements with bindings need diff marking.
-    // But, we only need to do (1) here because bindings in initial content
-    // are inert by design (as are bindings in placeholder content).
+    // But, we only need to do (1) here because bindings in the diffable
+    // placeholder are inert by design (as are bindings in normal placeholder).
     const elements = toArray(container.querySelectorAll('.i-amphtml-element'));
     elements.forEach((element) => {
       markElementForDiffing(element, () => String(key--));
@@ -1169,7 +1262,7 @@ export class AmpList extends AMP.BaseElement {
       // Remove missing, non-internal classes.
       for (let i = 0; i < before.classList.length; i++) {
         const c = before.classList[i];
-        if (!startsWith(c, 'i-amphtml-') && !after.classList.contains(c)) {
+        if (!c.startsWith('i-amphtml-') && !after.classList.contains(c)) {
           before.classList.remove(c);
         }
       }
@@ -1334,7 +1427,7 @@ export class AmpList extends AMP.BaseElement {
       setStyles(this.element, {height: ''});
     }
 
-    // TODO(wg-ui-and-a11y): Use a new, unprivileged API.
+    // TODO(wg-performance): Use a new, unprivileged API.
     // The applySize() call removes the sizer element.
     this.element./*OK*/ applySize();
   }
@@ -1443,7 +1536,7 @@ export class AmpList extends AMP.BaseElement {
     this.mutateElement(() => {
       this.getLoadMoreService_().toggleLoadMoreLoading(true);
     });
-    return this.fetchListAndAppend_()
+    return this.fetchList_({append: true})
       .then(() => {
         return this.mutateElement(() => {
           if (this.loadMoreSrc_) {
@@ -1482,16 +1575,14 @@ export class AmpList extends AMP.BaseElement {
 
   /**
    * @param {boolean=} refresh
-   * @param {string=} token
    * @return {!Promise<!JsonObject|!Array<JsonObject>>}
    * @private
    */
-  fetch_(refresh = false, token = undefined) {
+  fetch_(refresh = false) {
     return batchFetchJsonFor(this.getAmpDoc(), this.element, {
       expr: '.',
       urlReplacement: this.getPolicy_(),
       refresh,
-      token,
       xssiPrefix: this.element.getAttribute('xssi-prefix') || undefined,
     });
   }
@@ -1509,8 +1600,9 @@ export class AmpList extends AMP.BaseElement {
   }
 
   /**
-   * If the bottom of the list is within three viewports of the current
-   * viewport, then load more items.
+   * If the bottom of the list is visible and
+   * within three viewports of the current viewport,
+   * then load more items.
    * @private
    */
   maybeLoadMoreItems_() {
@@ -1523,7 +1615,10 @@ export class AmpList extends AMP.BaseElement {
       .getClientRectAsync(dev().assertElement(endoOfListMarker))
       .then((positionRect) => {
         const viewportHeight = this.viewport_.getHeight();
-        if (3 * viewportHeight > positionRect.bottom) {
+        if (
+          positionRect.bottom > 0 &&
+          3 * viewportHeight > positionRect.bottom
+        ) {
           return this.loadMoreCallback_();
         }
       });
@@ -1535,9 +1630,7 @@ export class AmpList extends AMP.BaseElement {
    * @private
    */
   prepareAndSendFetch_(opt_refresh = false) {
-    return getViewerAuthTokenIfAvailable(this.element).then((token) =>
-      this.fetch_(opt_refresh, token)
-    );
+    return this.fetch_(opt_refresh);
   }
 
   /**
@@ -1575,7 +1668,7 @@ export class AmpList extends AMP.BaseElement {
    */
   showFallback_() {
     this.element.classList.add('i-amphtml-list-fetch-error');
-    // Displaying [fetch-error] may offset initial content, so resize to fit.
+    // Displaying [fetch-error] may offset diffable placeholder, so resize to fit.
     if (childElementByAttr(this.element, 'fetch-error')) {
       // Note that we're measuring against the element instead of the container.
       this.attemptToFit_(this.element);
@@ -1601,27 +1694,6 @@ export class AmpList extends AMP.BaseElement {
       ? allTabbableChildren[allTabbableChildren.length - 1]
       : null;
   }
-
-  /**
-   * @param {!Element} element
-   * @return {?Element}
-   * @private
-   */
-  firstTabbableChild_(element) {
-    return scopedQuerySelector(element, TABBABLE_ELEMENTS_QUERY);
-  }
-
-  /**
-   * @param {!Element} element
-   * @return {boolean}
-   * @private
-   */
-  isTabbable_(element) {
-    return (
-      matches(element, TABBABLE_ELEMENTS_QUERY) ||
-      !!this.firstTabbableChild_(element)
-    );
-  }
 }
 
 AMP.extension(TAG, '0.1', (AMP) => {
diff --git a/extensions/amp-list/0.1/test-e2e/test-function-src.js b/extensions/amp-list/0.1/test-e2e/test-function-src.js
new file mode 100644
index 0000000000000..38b225a03165a
--- /dev/null
+++ b/extensions/amp-list/0.1/test-e2e/test-function-src.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright 2020 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.
+ */
+
+describes.endtoend(
+  'amp-list "amp-script:" uri',
+  {
+    fixture: 'amp-list/amp-list-function-src.html',
+    environments: ['single'],
+  },
+  async (env) => {
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    it('should render list backed by amp-script data', async function () {
+      const container = await getListContainer(controller);
+      await verifyContainer(controller, container);
+
+      // Verify that all items rendered.
+      const listItems = await getListItems(controller);
+      await expect(listItems).to.have.length(2);
+    });
+  }
+);
+
+describes.endtoend(
+  'amp-list "amp-script:" with load-more',
+  {
+    fixture: 'amp-list/amp-list-function-load-more.html',
+    environments: ['single'],
+  },
+  async (env) => {
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    it('should load more when button is clicked until no more load-more-src', async function () {
+      // These two assertions are just to create a wait period ensuring the loadMore button
+      // is "clickable".
+      // TODO(samouri): expose a method on controller to wait for an element to be interactable.
+      await controller.findElement('[role=listitem]:nth-child(3)');
+      const loadMore = await controller.findElement('[load-more-clickable]');
+
+      await controller.click(loadMore);
+
+      const fifteenthItem = await controller.findElement(
+        '[role=listitem]:nth-child(15)'
+      );
+      await expect(fifteenthItem).to.be.ok;
+    });
+  }
+);
+
+function getListContainer(controller) {
+  return controller.findElement('div[role=list]');
+}
+
+function getListItems(controller) {
+  return controller.findElements('div[role=listitem]');
+}
+
+async function verifyContainer(controller, container) {
+  await expect(controller.getElementAttribute(container, 'class')).to.equal(
+    'i-amphtml-fill-content i-amphtml-replaced-content'
+  );
+}
diff --git a/extensions/amp-list/0.1/test-e2e/test-load-more-auto.js b/extensions/amp-list/0.1/test-e2e/test-load-more-auto.js
index 8e3b2bfefc2f9..bbc108a2d0dc7 100644
--- a/extensions/amp-list/0.1/test-e2e/test-load-more-auto.js
+++ b/extensions/amp-list/0.1/test-e2e/test-load-more-auto.js
@@ -20,8 +20,7 @@ const pageHeight = 420; // unusually small to force a scrollbar
 describes.endtoend(
   'AMP list load-more=auto',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-list/load-more-auto.amp.html',
+    fixture: 'amp-list/load-more-auto.amp.html',
     initialRect: {width: pageWidth, height: pageHeight},
     // TODO(cathyxz, cvializ): figure out why 'viewer' only shows 'FALLBACK'
     // TODO(cathyxz): figure out why shadow-demo doesn't work
diff --git a/extensions/amp-list/0.1/test-e2e/test-load-more-manual.js b/extensions/amp-list/0.1/test-e2e/test-load-more-manual.js
index fd3cea3a039f0..ed9d51790b2f1 100644
--- a/extensions/amp-list/0.1/test-e2e/test-load-more-manual.js
+++ b/extensions/amp-list/0.1/test-e2e/test-load-more-manual.js
@@ -20,9 +20,7 @@ const pageHeight = 600;
 describes.endtoend(
   'AMP list load-more=manual',
   {
-    testUrl:
-      'http://localhost:8000/test/manual/amp-list/' +
-      'load-more-manual.amp.html',
+    fixture: 'amp-list/load-more-manual.amp.html',
     initialRect: {width: pageWidth, height: pageHeight},
     // TODO(cathyxz, cvializ): figure out why 'viewer-demo' only shows 'FALLBACK'
     environments: ['single'],
diff --git a/extensions/amp-list/0.1/test-e2e/test-ssr.js b/extensions/amp-list/0.1/test-e2e/test-ssr.js
index 7f31896c8a651..311c499ece57b 100644
--- a/extensions/amp-list/0.1/test-e2e/test-ssr.js
+++ b/extensions/amp-list/0.1/test-e2e/test-ssr.js
@@ -17,7 +17,7 @@
 describes.endtoend(
   'amp-list SSR templates',
   {
-    testUrl: 'http://localhost:8000/test/fixtures/e2e/amp-list/amp-list.html',
+    fixture: 'amp-list/amp-list.html',
     environments: ['viewer-demo'],
   },
   async (env) => {
@@ -49,7 +49,7 @@ describes.endtoend(
 describes.endtoend(
   'amp-list',
   {
-    testUrl: 'http://localhost:8000/test/fixtures/e2e/amp-list/amp-list.html',
+    fixture: 'amp-list/amp-list.html',
     environments: ['single'],
   },
   async (env) => {
diff --git a/extensions/amp-list/0.1/test/integration/test-amp-list.js b/extensions/amp-list/0.1/test/integration/test-amp-list.js
index 561f443a1d3f5..440403466d535 100644
--- a/extensions/amp-list/0.1/test/integration/test-amp-list.js
+++ b/extensions/amp-list/0.1/test/integration/test-amp-list.js
@@ -18,7 +18,7 @@ import {BrowserController} from '../../../../../testing/test-helper';
 
 const TIMEOUT = 15000;
 
-describe('amp-list (integration)', function () {
+describes.sandboxed('amp-list (integration)', {}, function () {
   this.timeout(TIMEOUT);
 
   const basicBody = `<amp-list width=300 height=100 src="http://localhost:9876/list/fruit-data/get?cors=0">
diff --git a/extensions/amp-list/0.1/test/test-amp-list-container.js b/extensions/amp-list/0.1/test/test-amp-list-container.js
index 3673ce9d20433..b23a87cdefc0c 100644
--- a/extensions/amp-list/0.1/test/test-amp-list-container.js
+++ b/extensions/amp-list/0.1/test/test-amp-list-container.js
@@ -49,7 +49,7 @@ describes.realWin(
         findAndRenderTemplate: env.sandbox.stub(),
         findAndRenderTemplateArray: env.sandbox.stub(),
       };
-      env.sandbox.stub(Services, 'templatesFor').returns(templates);
+      env.sandbox.stub(Services, 'templatesForDoc').returns(templates);
       env.sandbox.stub(AmpDocService.prototype, 'getAmpDoc').returns(ampdoc);
 
       element = doc.createElement('amp-list');
diff --git a/extensions/amp-list/0.1/test/test-amp-list-load-more.js b/extensions/amp-list/0.1/test/test-amp-list-load-more.js
index 4114407a90ddf..f7b300fd39859 100644
--- a/extensions/amp-list/0.1/test/test-amp-list-load-more.js
+++ b/extensions/amp-list/0.1/test/test-amp-list-load-more.js
@@ -55,7 +55,7 @@ describes.realWin(
         findAndRenderTemplate: env.sandbox.stub(),
         findAndRenderTemplateArray: env.sandbox.stub(),
       };
-      env.sandbox.stub(Services, 'templatesFor').returns(templates);
+      env.sandbox.stub(Services, 'templatesForDoc').returns(templates);
       env.sandbox.stub(AmpDocService.prototype, 'getAmpDoc').returns(ampdoc);
       element = doc.createElement('amp-list');
       list = new AmpList(element);
@@ -255,7 +255,7 @@ describes.realWin(
       });
 
       // TODO(cathyxz) Create a mirror test for automatic amp-list loading once the automatic tests are unskipped
-      it('should call focus on the last element after load more is clicked', async () => {
+      it('should call focus on the last focusable element after load more is clicked', async () => {
         env.sandbox
           .stub(list.ssrTemplateHelper_, 'applySsrOrCsrTemplate')
           .returns(Promise.resolve([]));
@@ -264,20 +264,21 @@ describes.realWin(
           .stub(list, 'maybeRenderLoadMoreTemplates_')
           .returns(Promise.resolve([]));
 
-        const div1 = doc.createElement('div');
-        div1.textContent = '1';
-        const div2 = doc.createElement('div');
-        div2.textContent = '2';
-        updateBindingsStub.onCall(0).returns(Promise.resolve([div1, div2]));
-        const focusSpy = env.sandbox.spy(div2, 'focus');
+        const el1 = doc.createElement('div');
+        el1.textContent = '1';
+        const el2 = doc.createElement('a');
+        el2.setAttribute('href', 'https://google.com/');
+        el2.textContent = '2';
+        updateBindingsStub.onCall(0).returns(Promise.resolve([el1, el2]));
+        const focusSpy = env.sandbox.spy(el2, 'focus');
 
         await list.layoutCallback();
 
-        const div3 = doc.createElement('div');
-        div3.textContent = '3';
-        const div4 = doc.createElement('div');
-        div4.textContent = '4';
-        updateBindingsStub.onCall(1).returns(Promise.resolve([div3, div4]));
+        const el3 = doc.createElement('div');
+        el3.textContent = '3';
+        const el4 = doc.createElement('div');
+        el4.textContent = '4';
+        updateBindingsStub.onCall(1).returns(Promise.resolve([el3, el4]));
 
         await list.loadMoreCallback_(
           /* opt_reload */ false,
diff --git a/extensions/amp-list/0.1/test/test-amp-list.js b/extensions/amp-list/0.1/test/test-amp-list.js
index 8d4ad75c5791b..e4acfaccc16ed 100644
--- a/extensions/amp-list/0.1/test/test-amp-list.js
+++ b/extensions/amp-list/0.1/test/test-amp-list.js
@@ -15,11 +15,12 @@
  */
 
 import {ActionService} from '../../../../src/service/action-impl';
-import {ActionTrust} from '../../../../src/action-constants';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
 import {AmpDocService} from '../../../../src/service/ampdoc-impl';
-import {AmpEvents} from '../../../../src/amp-events';
+import {AmpEvents} from '../../../../src/core/constants/amp-events';
 import {AmpList} from '../amp-list';
-import {Deferred} from '../../../../src/utils/promise';
+import {AmpScriptService} from '../../../amp-script/0.1/amp-script';
+import {Deferred} from '../../../../src/core/data-structures/promise';
 import {Services} from '../../../../src/services';
 import {
   createElementWithAttributes,
@@ -66,7 +67,7 @@ describes.repeated(
             findAndRenderTemplate: env.sandbox.stub(),
             findAndRenderTemplateArray: env.sandbox.stub(),
           };
-          env.sandbox.stub(Services, 'templatesFor').returns(templates);
+          env.sandbox.stub(Services, 'templatesForDoc').returns(templates);
           env.sandbox
             .stub(AmpDocService.prototype, 'getAmpDoc')
             .returns(ampdoc);
@@ -97,6 +98,10 @@ describes.repeated(
           env.sandbox.stub(Services, 'bindForDocOrNull').returns(promise);
           setBindService = resolve;
 
+          env.sandbox
+            .stub(Services, 'ownersForDoc')
+            .returns({scheduleUnlayout: env.sandbox.stub()});
+
           ssrTemplateHelper = {
             isEnabled: () => false,
             ssr: () => Promise.resolve(),
@@ -163,14 +168,17 @@ describes.repeated(
           // Mock the actual network request.
           listMock
             .expects('fetch_')
-            .withExactArgs(!!opts.refresh, /* token */ undefined)
+            .withExactArgs(!!opts.refresh)
             .returns(Promise.resolve(fetched))
             .atLeast(1);
 
           // If "reset-on-refresh" is set, show loading/placeholder before fetch.
           if (opts.resetOnRefresh) {
             listMock.expects('togglePlaceholder').withExactArgs(true).once();
-            listMock.expects('toggleLoading').withExactArgs(true).once();
+            listMock
+              .expects('toggleLoading')
+              .withExactArgs(true, opts.resetOnRefresh)
+              .once();
           }
 
           // Stub the rendering of the template.
@@ -308,11 +316,21 @@ describes.repeated(
 
                 it('should require placeholder', () => {
                   list.getPlaceholder = () => null;
-                  allowConsoleError(() => {
-                    expect(() => list.isLayoutSupported('container')).to.throw(
-                      /amp-list with layout=container relies on a placeholder/
+                  if (variant.type === 'experiment') {
+                    allowConsoleError(() => {
+                      expect(() =>
+                        list.isLayoutSupported('container')
+                      ).to.throw(
+                        /amp-list\[layout=container\] should have a placeholder/
+                      );
+                    });
+                  } else {
+                    expect(() =>
+                      list.isLayoutSupported('container')
+                    ).to.not.throw(
+                      /amp-list\[layout=container\] should have a placeholder/
                     );
-                  });
+                  }
                 });
 
                 it('should unlock height for layout=container with successful attemptChangeHeight', () => {
@@ -459,12 +477,13 @@ describes.repeated(
             });
           });
 
-          it('should resize with viewport', () => {
+          it('should resize with viewport', async () => {
             const resize = env.sandbox.spy(list, 'attemptToFit_');
-            list.layoutCallback().then(() => {
-              list.viewport_.resize_();
-              expect(resize).to.have.been.called;
-            });
+            const itemElement = doc.createElement('div');
+            expectFetchAndRender(DEFAULT_FETCHED_DATA, [itemElement]);
+            await list.layoutCallback();
+            list.viewport_.resize_();
+            expect(resize).to.be.calledOnce;
           });
 
           // TODO(choumx, #14772): Flaky.
@@ -603,7 +622,7 @@ describes.repeated(
             });
           });
 
-          it('should set tabbindex only if the list item is not tabbable', () => {
+          it('should not override or set missing tabindex', () => {
             // A list item with a no tabindex value or tabbable child
             const nonTabbableItemElement = doc.createElement('div');
 
@@ -624,9 +643,8 @@ describes.repeated(
             ]);
 
             return list.layoutCallback().then(() => {
-              expect(nonTabbableItemElement.getAttribute('tabindex')).to.equal(
-                '0'
-              );
+              expect(nonTabbableItemElement.getAttribute('tabindex')).to.be
+                .null;
               expect(tabbableItemElement.getAttribute('tabindex')).to.equal(
                 '4'
               );
@@ -752,7 +770,7 @@ describes.repeated(
             it('should attemptChangeHeight initial content', async () => {
               const initialContent = doc.createElement('div');
               initialContent.setAttribute('role', 'list');
-              initialContent.style.height = '1337px';
+              initialContent.setAttribute('style', 'height: 123px');
 
               // Initial content must be set before buildCallback(), so use
               // a new test AmpList instance.
@@ -767,11 +785,12 @@ describes.repeated(
               // content, once to resize to rendered contents.
               listMock
                 .expects('attemptChangeHeight')
-                .withExactArgs(1337)
+                .withExactArgs(123)
                 .returns(Promise.resolve())
                 .twice();
 
               const itemElement = doc.createElement('div');
+              itemElement.setAttribute('style', 'height: 123px');
               expectFetchAndRender(DEFAULT_FETCHED_DATA, [itemElement]);
               await list.layoutCallback();
             });
@@ -815,14 +834,14 @@ describes.repeated(
             it('should error if proxied fetch fails', () => {
               env.sandbox
                 .stub(ssrTemplateHelper, 'ssr')
-                .returns(Promise.reject());
+                .returns(Promise.reject(new Error('error')));
 
               listMock.expects('toggleLoading').withExactArgs(false).once();
 
               return expect(
                 list.layoutCallback()
               ).to.eventually.be.rejectedWith(
-                /Error proxying amp-list templates/
+                /XHR Failed fetching \(https:\/\/data.com\/\.\.\.\): error/
               );
             });
 
@@ -846,7 +865,7 @@ describes.repeated(
               return expect(
                 list.layoutCallback()
               ).to.eventually.be.rejectedWith(
-                /Error proxying amp-list templates with status/
+                /fetching JSON data \(https:\/\/data.com\/\.\.\.\): HTTP error 400/
               );
             });
 
@@ -866,26 +885,34 @@ describes.repeated(
               const listItem = document.createElement('div');
               listItem.setAttribute('role', 'item');
               listContainer.appendChild(listItem);
+
               env.sandbox
                 .stub(ssrTemplateHelper, 'ssr')
                 .returns(Promise.resolve({html}));
               ssrTemplateHelper.applySsrOrCsrTemplate.returns(
-                Promise.resolve(listContainer)
+                Promise.resolve(rendered)
               );
+
               listMock
                 .expects('updateBindings_')
                 .returns(Promise.resolve(listContainer))
                 .once();
+              const renderSpy = env.sandbox.spy();
               listMock
                 .expects('render_')
                 .withExactArgs(listContainer, false)
-                .returns(Promise.resolve());
-
-              ssrTemplateHelper.applySsrOrCsrTemplate
-                .withArgs(element, html)
-                .returns(Promise.resolve(rendered));
+                .callsFake(() => {
+                  renderSpy();
+                  return Promise.resolve();
+                })
+                .once();
 
-              yield list.layoutCallback();
+              const layoutSpy = env.sandbox.spy();
+              yield list.layoutCallback().then(() => {
+                layoutSpy();
+              });
+              // layoutCallback() should be chained to render_().
+              expect(renderSpy).to.be.calledBefore(layoutSpy);
 
               const request = env.sandbox.match({
                 xhrUrl:
@@ -913,8 +940,6 @@ describes.repeated(
             });
 
             it('"amp-state:" uri should skip rendering and emit an error', () => {
-              toggleExperiment(win, 'amp-list-init-from-state', true);
-
               const ampStateEl = doc.createElement('amp-state');
               ampStateEl.setAttribute('id', 'okapis');
               const ampStateJson = doc.createElement('script');
@@ -930,6 +955,16 @@ describes.repeated(
               expect(list.layoutCallback()).eventually.rejectedWith(errorMsg);
             });
 
+            it('"amp-script:" uri should skip rendering and emit an error', () => {
+              list.element.setAttribute('src', 'amp-script:fetchData');
+
+              listMock.expects('scheduleRender_').never();
+
+              const errorMsg = /cannot be used in SSR mode/;
+              expectAsyncConsoleError(errorMsg);
+              expect(list.layoutCallback()).eventually.rejectedWith(errorMsg);
+            });
+
             it('Bound [src] should skip rendering and emit an error', async () => {
               listMock.expects('scheduleRender_').never();
               allowConsoleError(async () => {
@@ -974,6 +1009,108 @@ describes.repeated(
               return list.layoutCallback().catch(() => {});
             });
           });
+
+          describe('Using amp-script: protocol', () => {
+            let ampScriptEl;
+            beforeEach(() => {
+              resetExperimentTogglesForTesting(win);
+
+              env.sandbox
+                .stub(Services, 'scriptForDocOrNull')
+                .returns(Promise.resolve(new AmpScriptService(env.ampdoc)));
+              ampScriptEl = document.createElement('amp-script');
+              ampScriptEl.setAttribute('id', 'example');
+              doc.body.appendChild(ampScriptEl);
+
+              element = createAmpListElement();
+              element.setAttribute('src', 'amp-script:example.fetchData');
+              element.toggleLoading = () => {};
+              list = createAmpList(element);
+            });
+
+            it('should throw an error if given an invalid format', async () => {
+              const errorMsg = /URIs must be of the format/;
+
+              element.setAttribute('src', 'amp-script:fetchData');
+              expectAsyncConsoleError(errorMsg);
+              expect(list.layoutCallback()).to.eventually.throw(errorMsg);
+
+              element.setAttribute('src', 'amp-script:too.many.dots');
+              expectAsyncConsoleError(errorMsg);
+              expect(list.layoutCallback()).to.eventually.throw(errorMsg);
+
+              element.setAttribute('src', 'amp-script:zeroLengthSecondArg.');
+              expectAsyncConsoleError(errorMsg);
+              expect(list.layoutCallback()).to.eventually.throw(errorMsg);
+            });
+
+            it('should throw if specified amp-script does not exist', () => {
+              element.setAttribute('src', 'amp-script:doesnotexist.fn');
+
+              const errorMsg = /could not find <amp-script> with/;
+              expectAsyncConsoleError(errorMsg);
+              expect(list.layoutCallback()).to.eventually.throw(errorMsg);
+            });
+
+            it('should fail if function call rejects', async () => {
+              ampScriptEl.getImpl = () =>
+                Promise.resolve({
+                  callFunction: () =>
+                    Promise.reject('Invalid function identifier.'),
+                });
+
+              listMock.expects('toggleLoading').withExactArgs(false).once();
+              return expect(
+                list.layoutCallback()
+              ).to.eventually.be.rejectedWith(/Invalid function identifier/);
+            });
+
+            it('should render non-array if single-item is set', async () => {
+              const callFunctionResult = {'items': {title: 'Title'}};
+              element.setAttribute('single-item', 'true');
+              ampScriptEl.getImpl = () =>
+                Promise.resolve({
+                  callFunction(fnId) {
+                    if (fnId === 'fetchData') {
+                      return Promise.resolve(callFunctionResult);
+                    }
+                    return Promise.reject(new Error(`Invalid fnId: ${fnId}`));
+                  },
+                });
+
+              listMock
+                .expects('scheduleRender_')
+                .withExactArgs(
+                  [{title: 'Title'}],
+                  /*append*/ false,
+                  callFunctionResult
+                )
+                .returns(Promise.resolve())
+                .once();
+
+              await list.layoutCallback();
+            });
+
+            it('should render a list from AmpScriptService provided data', async () => {
+              ampScriptEl.getImpl = () =>
+                Promise.resolve({
+                  callFunction(fnId) {
+                    if (fnId === 'fetchData') {
+                      return Promise.resolve({items: [3, 2, 1]});
+                    }
+                    return Promise.reject(new Error(`Invalid fnId: ${fnId}`));
+                  },
+                });
+
+              listMock
+                .expects('scheduleRender_')
+                .withExactArgs([3, 2, 1], /*append*/ false, {items: [3, 2, 1]})
+                .returns(Promise.resolve())
+                .once();
+
+              await list.layoutCallback();
+            });
+          });
         }); // without amp-bind
 
         describe('with amp-bind', () => {
@@ -1069,44 +1206,6 @@ describes.repeated(
             });
           });
 
-          it(
-            "should fetch with viewer auth token if 'crossorigin=" +
-              "amp-viewer-auth-token-via-post' attribute is present",
-            () => {
-              env.sandbox
-                .stub(Services, 'viewerAssistanceForDocOrNull')
-                .returns(
-                  Promise.resolve({
-                    getIdTokenPromise: () => Promise.resolve('idToken'),
-                  })
-                );
-              element.setAttribute(
-                'crossorigin',
-                'amp-viewer-auth-token-via-post'
-              );
-              const fetched = {items: DEFAULT_ITEMS};
-              const foo = doc.createElement('div');
-              const rendered = [foo];
-              const opts = DEFAULT_LIST_OPTS;
-
-              listMock
-                .expects('fetch_')
-                .withExactArgs(!!opts.refresh, 'idToken')
-                .returns(Promise.resolve(fetched))
-                .atLeast(1);
-
-              // Stub the rendering of the template.
-              const itemsToRender = fetched[opts.expr];
-              ssrTemplateHelper.applySsrOrCsrTemplate
-                .withArgs(element, itemsToRender)
-                .returns(Promise.resolve(rendered));
-
-              expectRender();
-
-              return list.layoutCallback().then(() => Promise.resolve());
-            }
-          );
-
           it('should reset if `reset-on-refresh` is set (new URL)', () => {
             element.setAttribute('reset-on-refresh', '');
             const foo = doc.createElement('div');
@@ -1175,7 +1274,10 @@ describes.repeated(
               listMock.expects('fetchList_').never();
               // Expect display of placeholder/loading before render.
               listMock.expects('togglePlaceholder').withExactArgs(true).once();
-              listMock.expects('toggleLoading').withExactArgs(true).once();
+              listMock
+                .expects('toggleLoading')
+                .withExactArgs(true, true)
+                .once();
               // Expect hiding of placeholder/loading after render.
               listMock.expects('togglePlaceholder').withExactArgs(false).once();
               listMock.expects('toggleLoading').withExactArgs(false).once();
@@ -1315,6 +1417,50 @@ describes.repeated(
                 }
               );
             });
+
+            describe('rescan vs. diff race', () => {
+              async function rescanVsDiffTest() {
+                env.sandbox.spy(list, 'diff_');
+                env.sandbox.spy(list, 'render_');
+
+                // Diffing is skipped if there's no existing children to diff against.
+                const oldChild = doc.createElement('p');
+                oldChild.textContent = 'foo';
+                list.container_.appendChild(oldChild);
+
+                const newChild = doc.createElement('p');
+                newChild.textContent = 'bar';
+                // New children must have at least one binding to trigger rescan.
+                newChild.setAttribute('i-amphtml-binding', '');
+                const rendered = expectFetchAndRender(DEFAULT_FETCHED_DATA, [
+                  newChild,
+                ]);
+                await list.layoutCallback().then(() => rendered);
+              }
+
+              it('without diffing, should rescan _before_ render', async () => {
+                await rescanVsDiffTest();
+
+                expect(list.diff_).to.not.have.been.called;
+                expect(bind.rescan).to.have.been.calledOnce;
+
+                // Without diffable, rescan should happen before rendering the new children.
+                expect(bind.rescan).calledBefore(list.render_);
+              });
+
+              it('with diffing, should rescan _after_ render/diff', async () => {
+                element.setAttribute('diffable', '');
+
+                await rescanVsDiffTest();
+
+                expect(list.diff_).to.have.been.calledOnce;
+                expect(bind.rescan).to.have.been.calledOnce;
+
+                // With diffable, rescanning must happen after rendering (diffing) the new children.
+                expect(bind.rescan).calledAfter(list.render_);
+                expect(bind.rescan).calledAfter(list.diff_);
+              });
+            });
           });
 
           describe('binding="no"', () => {
@@ -1331,24 +1477,14 @@ describes.repeated(
           });
 
           describe('Using amp-state: protocol', () => {
-            const experimentName = 'amp-list-init-from-state';
-
             beforeEach(() => {
-              resetExperimentTogglesForTesting(win);
               element = createAmpListElement();
               element.setAttribute('src', 'amp-state:okapis');
               element.toggleLoading = () => {};
               list = createAmpList(element);
             });
 
-            it('should throw an error if used without the experiment enabled', async () => {
-              const errorMsg = /Invalid value: amp-state:okapis/;
-              expectAsyncConsoleError(errorMsg);
-              expect(list.layoutCallback()).to.eventually.throw(errorMsg);
-            });
-
             it('should throw error if there is no associated amp-state el', async () => {
-              toggleExperiment(win, experimentName, true);
               bind.getStateAsync = () => Promise.reject();
 
               const errorMsg = /element with id 'okapis' was not found/;
@@ -1357,7 +1493,6 @@ describes.repeated(
             });
 
             it('should log an error if amp-bind was not included', async () => {
-              toggleExperiment(win, experimentName, true);
               Services.bindForDocOrNull.returns(Promise.resolve(null));
 
               const ampStateEl = doc.createElement('amp-state');
@@ -1373,7 +1508,6 @@ describes.repeated(
             });
 
             it('should render a list using local data', async () => {
-              toggleExperiment(win, experimentName, true);
               bind.getStateAsync = () => Promise.resolve({items: [1, 2, 3]});
 
               const ampStateEl = doc.createElement('amp-state');
@@ -1393,8 +1527,7 @@ describes.repeated(
             });
 
             it('should render a list using async data', async () => {
-              toggleExperiment(win, experimentName, true);
-              const {resolve, promise} = new Deferred();
+              const {promise, resolve} = new Deferred();
               bind.getStateAsync = () => promise;
 
               const ampStateEl = doc.createElement('amp-state');
@@ -1448,7 +1581,8 @@ describes.realWin(
       env.sandbox.spy(element, 'enqueAction');
       env.sandbox.stub(element, 'getDefaultActionAlias').returns({'items': []});
       await whenUpgradedToCustomElement(element);
-      env.sandbox.stub(element.implementation_, 'fetchList_');
+      const impl = await element.getImpl(false);
+      env.sandbox.stub(impl, 'fetchList_');
 
       ['changeToLayoutContainer', 'refresh'].forEach((method) => {
         action.execute(
diff --git a/extensions/amp-list/0.1/test/validator-amp-list.html b/extensions/amp-list/0.1/test/validator-amp-list.html
index 260f59aabde69..af020d4a82fb0 100644
--- a/extensions/amp-list/0.1/test/validator-amp-list.html
+++ b/extensions/amp-list/0.1/test/validator-amp-list.html
@@ -51,7 +51,7 @@
     <div></div>
   </amp-list>
   <!-- Valid: amp-list with "amp-state" src -->
-  <amp-list width=10 height=10 src="amp-state:example"> 
+  <amp-list width=10 height=10 src="amp-state:example">
     <div></div>
   </amp-list>
   <!-- Valid: amp-list with src and reset-on-refresh attributes -->
diff --git a/extensions/amp-list/0.1/test/validator-amp-list.out b/extensions/amp-list/0.1/test/validator-amp-list.out
index d9afb0c76a4fd..69932ade3a44b 100644
--- a/extensions/amp-list/0.1/test/validator-amp-list.out
+++ b/extensions/amp-list/0.1/test/validator-amp-list.out
@@ -54,7 +54,7 @@ amp-list/0.1/test/validator-amp-list.html:48:2 The attribute '[state]' may not a
 |      <div></div>
 |    </amp-list>
 |    <!-- Valid: amp-list with "amp-state" src -->
-|    <amp-list width=10 height=10 src="amp-state:example"> 
+|    <amp-list width=10 height=10 src="amp-state:example">
 |      <div></div>
 |    </amp-list>
 |    <!-- Valid: amp-list with src and reset-on-refresh attributes -->
@@ -216,7 +216,7 @@ amp-list/0.1/test/validator-amp-list.html:183:2 The parent tag of tag 'amp-list-
 |      load-more-bookmark="next">
 |      <button load-more-clickable></button>
 >>     ^~~~~~~~~
-amp-list/0.1/test/validator-amp-list.html:188:4 The parent tag of tag 'amp-list-load-more button[load-more-clickable]' is 'amp-list', but it can only be 'amp-list-load-more'. (see https://amp.dev/documentation/components/amp-list)
+amp-list/0.1/test/validator-amp-list.html:188:4 The parent tag of tag 'button' is 'amp-list', but it can only be 'amp-list-load-more'. (see https://amp.dev/documentation/components/amp-list)
 |    </amp-list>
 |    <amp-list width=10 height=10
 |      src="https://data.com/articles.json?ref=CANONICAL_URL"
diff --git a/extensions/amp-list/OWNERS b/extensions/amp-list/OWNERS
index bb0a0581a99d6..a924e64866db9 100644
--- a/extensions/amp-list/OWNERS
+++ b/extensions/amp-list/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}, {name: 'choumx'}],
+      owners: [{name: 'ampproject/wg-performance'}, {name: 'choumx'}],
     },
   ],
 }
diff --git a/extensions/amp-list/amp-list.md b/extensions/amp-list/amp-list.md
index 635f4aa07a222..43e6133f08b95 100644
--- a/extensions/amp-list/amp-list.md
+++ b/extensions/amp-list/amp-list.md
@@ -26,26 +26,30 @@ limitations under the License.
 
 # amp-list
 
-Fetches content dynamically from a CORS JSON endpoint and renders it using a supplied template.
-
 ## Usage
 
-The `<amp-list>` component fetches dynamic content from a CORS JSON endpoint. The response from the endpoint contains data, which is rendered in the specified template.
+The `amp-list` component fetches dynamic content from a CORS JSON endpoint.
+The response from the endpoint contains data, which is rendered in the specified
+template.
 
-{% call callout('Important', type='caution') %}
+[tip type="important"]
 Your endpoint must implement the requirements specified in the [CORS Requests in AMP](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests) spec.
-{% endcall %}
+[/tip]
 
 You can specify a template in one of two ways:
 
-- a `template` attribute that references an ID of an existing templating element.
-- a templating element nested directly inside the `amp-list` element.
+-   a `template` attribute that references an ID of an existing templating element.
+-   a templating element nested directly inside the `amp-list` element.
+
+[tip type="note"]
+When using `<amp-list>` in tandem with another templating AMP component, such as `<amp-form>`, note that templates may not nest in valid AMP documents. In this case a valid workaround is to provide the template by `id` via the `template` attribute. Learn more about [nested templates in `<amp-mustache>`](../amp-mustache/amp-mustache.md).
+[/tip]
 
-For more details on templates, see [AMP HTML Templates](../../spec/amp-html-templates.md).
+For more details on templates, see [AMP HTML Templates](../../docs/spec/amp-html-templates.md).
 
-_Example: Displaying a dynamic list_
+### Displaying a dynamic list
 
-In the following example, we retrieve JSON data that contains URLs and titles, and render the content in a nested [amp-mustache template](https://amp.dev/documentation/components/amp-mustache).
+In the following example, we retrieve JSON data that contains URLs and titles, and render the content in a nested [amp-mustache template](../amp-mustache/amp-mustache.md).
 
 [example preview="inline" playground="true" imports="amp-list" template="amp-mustache"]
 
@@ -102,27 +106,58 @@ amp-list div[role='list'] {
 }
 ```
 
-## Behavior
-
 The request is always made from the client, even if the document was served from the AMP Cache. Loading is triggered using normal AMP rules depending on how far the element is from the current viewport.
 
 If `<amp-list>` needs more space after loading, it requests the AMP runtime to update its height using the normal AMP flow. If the AMP runtime cannot satisfy the request for the new height, it will display the `overflow` element when available. Notice however, that the typical placement of `<amp-list>` elements at the bottom of the document almost always guarantees that the AMP runtime can resize them.
 
-By default, `<amp-list>` adds a `list` ARIA role to the list element and a `listitem` role to item elements rendered via the template. If the list element or any of its children are not "tabbable" (accessible by keyboard keys such as the `a` and `button` elements or any elements with a positive `tabindex`), a `tabindex` of `0` will be added by default to the list item.
+### Accessibility considerations for `amp-list`
+
+By default, `<amp-list>` adds a `list` ARIA role to the list element and a `listitem` role to item elements rendered via the template. If the list element or any of its children are not "tabbable" (accessible by keyboard keys such as the `a` and `button` elements or any elements with a positive `tabindex`), a `tabindex` of `0` will be added by default to the list item. This behaviour is arguably not always appropriate - generally, only interactive controls/content should be focusable. If you want to suppress this behaviour, make sure to include `tabindex="-1"` as part of the outermost element of your template.
+
+[tip type="important"]
+Currently, the rendered list element is declared as an ARIA live region (using `aria-live="polite"`), meaning that any change to the content of the list results in the entire list being read out/announced by assistive technologies (such as screen readers). Due to the way lists are initially rendered, this can also result in lists being announced in their entirety when a page is loaded. To work around this issue for now, you can add `aria-live="off"` to `<amp-list>`, which will override the addition of `aria-live="polite"`.
+[/tip]
+
+[tip type="note"]
+Note also that a good practice is to provide templates a single top-level element to prevent unintended side effects. This means the following input:
+
+```html
+<template type="amp-mustache">
+  {% raw %}
+  <div class="item">{{item}}</div>
+  <div class="price">{{price}}</div>
+  {% endraw %}
+</template>
+```
+
+Would most predictably be applied and rendered if instead provided as follows:
+
+```html
+<template type="amp-mustache">
+  {% raw %}
+  <div>
+    <div class="item">{{item}}</div>
+    <div class="price">{{price}}</div>
+  </div>
+  {% endraw %}
+</template>
+```
+
+[/tip]
 
 ### XHR batching
 
 AMP batches XMLHttpRequests (XHRs) to JSON endpoints, that is, you can use a single JSON data request as a data source for multiple consumers (e.g., multiple `<amp-list>` elements) on an AMP page. For example, if your `<amp-list>` makes an XHR to an endpoint, while the XHR is in flight, all subsequent XHRs to the same endpoint won't trigger and will instead return the results from the first XHR.
 
-In `<amp-list>`, you can use the [`items`](#items-optional) attribute to render a subset of the JSON response, allowing you to have multiple `<amp-list>` elements rendering different content but sharing a single XHR.
+In `<amp-list>`, you can use the [`items`](#items) attribute to render a subset of the JSON response, allowing you to have multiple `<amp-list>` elements rendering different content but sharing a single XHR.
 
 ### Specifying an overflow
 
-Optionally, the `<amp-list>` component can contain an element with the `overflow` attribute. Add an element with the AMP `overflow` attribute to `amp-list` if the AMP framework is unable to size it as requested. If you include a child element of `amp-list` with the `overflow` attribute, it will appear if one of the following conditions are met:
-
-- The bottom of `amp-list` is below the viewport.
+Optionally, the `<amp-list>` component can contain an element with the `overflow` attribute. AMP will display this element if all of the following conditions are met:
 
-- The bottom of `amp-list` is within 15% of the height of the entire page and within 1000px of the end of the page.
+-   The contents rendered into the `amp-list` exceed its specified size.
+-   The bottom of `amp-list` is within the viewport.
+-   The bottom of `amp-list` is not near the bottom of the page (defined as the minimum of either the bottom 15% of the document or the bottom 1000px)
 
 If `amp-list` is outside the viewport, it will be automatically expanded.
 
@@ -170,8 +205,8 @@ AMP applies the following CSS to elements with the `overflow` attribute:
 
 Optionally, `<amp-list>` supports a placeholder and/or fallback.
 
-- A _placeholder_ is a child element with the `placeholder` attribute. This element is shown until the `<amp-list>` loads successfully. If a fallback is also provided, the placeholder is hidden when the `<amp-list>` fails to load.
-- A _fallback_ is a child element with the `fallback` attribute. This element is shown if the `<amp-list>` fails to load.
+-   A _placeholder_ is a child element with the `placeholder` attribute. This element is shown until the `<amp-list>` loads successfully. If a fallback is also provided, the placeholder is hidden when the `<amp-list>` fails to load.
+-   A _fallback_ is a child element with the `fallback` attribute. This element is shown if the `<amp-list>` fails to load.
 
 Learn more in [Placeholders & Fallbacks](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders). Note that a child element cannot be both a placeholder and a fallback.
 
@@ -251,164 +286,47 @@ See below for a full example,
 </amp-list>
 ```
 
-[/filter]<!-- formats="websites, stories" -->
-
-## Attributes
-
-### src (required)
-
-The URL of the remote endpoint that returns the JSON that will be rendered
-within this `<amp-list>`. This must be a CORS HTTP service. The URL's protocol must be HTTPS.
-
-[tip type="important"]
-Your endpoint must implement the requirements specified in the [CORS Requests in AMP](https://www.ampproject.org/docs/fundamentals/amp-cors-requests) spec.
-[/tip]
+### Using amp-script as a data source
 
-If fetching the data at the `src` URL fails, the `<amp-list>` triggers a low-trust `fetch-error` event.
+You may use an exported `<amp-script>` function as the data source for `<amp-list>`. This enables you to flexibly combine and transform server responses before handoff to `<amp-list>`. The required format is the `<amp-script>` ID and the function name separated by a period, e.g. `amp-script:id.functionName`.
 
-[filter formats="websites, stories"]
-The `src` attribute may be omitted if the `[src]` attribute exists. `[src]` supports URL and non-URL expression values; see `amp-list` in [`amp-bind` element specific attributes documentation](https://amp.dev/documentation/components/amp-bind/#element-specific-attributes) for details.
-[/filter]<!-- formats="websites, stories" -->
-
-[filter formats="websites, stories"]
-
-### credentials (optional)
-
-Defines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/).
-
-- Supported values: `omit`, `include`
-- Default: `omit`
-
-To send credentials, pass the value of `include`. If this value is set, the response must follow the [AMP CORS security guidelines](https://www.ampproject.org/docs/fundamentals/amp-cors-requests#cors-security-in-amp).
-
-Here's an example that specifies including credentials to display personalized content in a list:
+See below for an example:
 
 ```html
+<!--
+  See the [amp-script](https://amp.dev/documentation/components/amp-script/) documentation to setup the component and export your function>
+-->
+<amp-script id="dataFunctions" script="local-script" nodom></amp-script>
+<script id="local-script" type="text/plain" target="amp-script">
+  function getRemoteData() {
+    return fetch('https://example.com')
+      .then(resp => resp.json())
+      .then(transformData)
+  }
+  exportFunction('getRemoteData', getRemoteData);
+</script>
+
+<!-- "exported-functions" is the <amp-script> id, and "getRemoteData" corresponds to the exported function. -->
 <amp-list
-  credentials="include"
-  src="<%host%>/json/product.json?clientId=CLIENT_ID(myCookieId)"
+  id="amp-list"
+  width="auto"
+  height="100"
+  layout="fixed-height"
+  src="amp-script:dataFunctions.getRemoteData"
 >
   <template type="amp-mustache">
-    Your personal offer: ${{price}}
+    <div>{{.}}</div>
   </template>
 </amp-list>
 ```
 
-[/filter]<!-- formats="websites, stories" -->
-
-### items (optional)
-
-Defines the expression to locate the array to be rendered within the response. This is a dot-notated expression that navigates via fields of the JSON response.
-By defaut `<amp-list>` expects an array, the `single-item` attribute may be used to load data from an object.
-
-- The default value is `"items"`. The expected response: `{items: [...]}`.
-- If the response itself is the desired array, use the value of `"."`. The expected response is: `[...]`.
-- Nested navigation is permitted (e.g., `"field1.field2"`). The expected response is: `{field1: {field2: [...]}}`.
-
-When `items="items"` is specified (which, is the default) the response must be a JSON object that contains an array property called `"items"`:
-
-```text
-{
-  "items": [...]
-}
-```
-
-### max-items (optional)
-
-An integer value specifying the maximum length of the items array to be rendered.
-The `items` array will be truncated to `max-items` entries if the returned value exceeds `max-items`.
-
-### single-item (optional)
-
-Causes `<amp-list>` to treat the returned result as if it were a single element array. An object response will be wrapped in an array so
-`{items: {...}}` will behave as if it were `{items: [{...}]}`.
-
-[filter formats="websites, stories"]
-
-### xssi-prefix (optional)
-
-Causes `<amp-list>` to strip a prefix from the fetched JSON before parsing. This can be useful for APIs that include [security prefixes](http://patorjk.com/blog/2013/02/05/crafty-tricks-for-avoiding-xssi/) like `)]}` to help prevent cross site scripting attacks.
-
-For example, lets say we had an API that returned this response:
-
-```
-)]}{ "items": ["value"] }
-```
-
-We could instruct `amp-list` to remove the security prefix like so:
-
-```html
-<amp-list xssi-prefix=")]}" src="https://foo.com/list.json"></amp-list>
-```
-
-[/filter]<!-- formats="websites, stories" -->
-
-[filter formats="websites, stories"]
-
-### reset-on-refresh (optional)
-
-Displays a loading indicator and placeholder again when the list's source is refreshed via `amp-bind` or the `refresh()` action.
-
-By default, this will only trigger on refreshes that cause a network fetch. To reset on all refreshes, use `reset-on-refresh="always"`.
-[/filter]<!-- formats="websites, stories" -->
-
-### binding (optional)
-
-For pages using `<amp-list>` that also use `amp-bind`, controls whether or not to block render on the evaluation of bindings (e.g. `[text]`) in rendered children.
-
-We recommend using `binding="no"` or `binding="refresh"` for faster performance.
-
-- `binding="no"`: Never block render **(fastest)**.
-- `binding="refresh"`: Don't block render on initial load **(faster)**.
-- `binding="always"`: Always block render **(slow)**.
-
-If `binding` attribute is not provided, default is `always`.
-
-[filter formats="websites, stories"]
-
-<!-- prettier-ignore-start -->
-<!-- See: https://github.com/remarkjs/remark/issues/456 -->
-### [is-layout-container] (optional)
-<!-- prettier-ignore-end-->
-
-This is a bindable attribute that should always be `false` by default. When set to `true` via `amp-bind`, it changes the layout of the `<amp-list>` to `container`. This attribute is useful for handling dynamic resizing for amp-list.
-
-This attribute cannot be true by default for the same reason why `<amp-list>` does not support layout `CONTAINER` &mdash; it can cause content jumping on first load.
-
-Alternatively, one may also use the `changeToLayoutContainer` action.
-
-[/filter]<!-- formats="websites, stories" -->
-
-### Common attributes
-
-This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
-
-[filter formats="email"]
-
-##### Invalid AMP email attributes
-
-The AMP for Email spec disallows the use of the following attributes on the AMP email format.
-
-- `[src]`
-- `[state]`
-- `[is-layout-container]`
-- `auto-resize`
-- `credentials`
-- `data-amp-bind-src`
-- `load-more`
-- `load-more-bookmark`
-- `reset-on-refresh`
-- `xssi-prefix`
-
-[/filter] <!-- formats="email" -->
-
-[filter formats="websites, stories"]
-
-## Load more and infinite scroll
+[tip type="important"]
+When using `<amp-script>` as merely a data-layer with no DOM manipulation, you may benefit from the [nodom](https://amp.dev/documentation/components/amp-script/#attributes) attribute. It improves the performance of the `<amp-script>`.
+[/tip]
 
-We've introduced the `load-more` attributes with options `manual` and `auto` to allow pagination and infinite scroll.
+### Load more and infinite scroll
 
-#### Sample Usage
+The `load-more` attribute has options `manual` and `auto` to allow pagination and infinite scroll.
 
 ```html
 <amp-list
@@ -426,22 +344,13 @@ We've introduced the `load-more` attributes with options `manual` and `auto` to
 For working examples, please see [test/manual/amp-list/infinite-scroll-1.amp.html](../../test/manual/amp-list/infinite-scroll-1.amp.html) and [test/manual/amp-list/infinite-scroll-2.amp.html](../../test/manual/amp-list/infinite-scroll-1.amp.html).
 
 [tip type="important"]
-**Important** When using `<amp-list>` infinite scroll in conjunction with `<amp-analytics>` scroll triggers, it is recommended to make use of the `useInitialPageSize` property of `<amp-analytics>` to get a more accurate measurement of the scroll position that ignores the hight changes caused by `<amp-list>`. Without `useInitialPageSize`, the `100%` scroll trigger point might never fire as more documents get loaded. Note that this will also ignore the size changes caused by other extensions (such as expanding embedded content) so some scroll events might fire prematurely instead
-[/tip]
 
-### Attributes
+When using `<amp-list>` infinite scroll, content placed below the component may not be accessible, and it is recommended to place the infinite scroll content at the bottom of the document.
 
-#### load-more (mandatory)
+When using `<amp-list>` infinite scroll in conjunction with `<amp-analytics>` scroll triggers, it is recommended to make use of the `useInitialPageSize` property of `<amp-analytics>` to get a more accurate measurement of the scroll position that ignores the height changes caused by `<amp-list>`.
 
-This attribute accepts two values: "auto" or "manual". Setting the value of this attribute to "manual" will show a "load-more" button at the end of `<amp-list>`. Setting the value of this attribute to "auto" will cause `<amp-list>` to automatically load more elements three viewports down for an infinite scroll effect.
-
-#### load-more-bookmark (optional)
-
-This attribute specifies a field name in the returned data that will give the url of the next items to load. If this attribute is not specified, `<amp-list>` expects the json payload to have the `load-more-src` field, which corresponds to the next url to load. In the case where this field is called something else, you can specify the name of that field via the `load-more-bookmark` field.E.g. In the following sample payload, we would specify `load-more-bookmark="next"`.
-
-```js
-{ "items": [...], "next": "https://url.to.load" }
-```
+Without `useInitialPageSize`, the `100%` scroll trigger point might never fire as more documents get loaded. Note that this will also ignore the size changes caused by other extensions (such as expanding embedded content) so some scroll events might fire prematurely instead.
+[/tip]
 
 ### Customizing load-more elements
 
@@ -451,6 +360,10 @@ This attribute specifies a field name in the returned data that will give the ur
 
 An `<amp-list-load-more>` element with the `load-more-button` attribute, which shows up at the end of the list (for the manual load-more) if there are more elements to be loaded. Clicking on this element will trigger a fetch to load more elements from the url contained in the `load-more-src` field or the field of the data returned corresponding to the `load-more-bookmark` attribute. This element can be customized by providing `<amp-list>` with a child element that has the attribute `load-more-button`.
 
+### Accessibility considerations for infinite scroll lists
+
+Be careful when using infinite scroll lists - if there is any content after the list (including a standard footer or similar), users won't be able to reach it until all list items have been loaded/displayed. This can make the experience frustrating or even impossible to overcome for users. See [Adrian Roselli: So you think you've built a good infinite scroll](https://adrianroselli.com/2014/05/so-you-think-you-built-good-infinite.html).
+
 ##### Example:
 
 ```html
@@ -462,7 +375,8 @@ An `<amp-list-load-more>` element with the `load-more-button` attribute, which s
 >
   ...
   <amp-list-load-more load-more-button>
-    <button>See More</button> /* My custom see more button */
+    <!-- My custom see more button -->
+    <button>See More</button>
   </amp-list-load-more>
 </amp-list>
 ```
@@ -481,14 +395,15 @@ It can be templated via `amp-mustache`.
   ...
   <amp-list-load-more load-more-button>
     <template type="amp-mustache">
-      Showing {{#count}} out of {{#total}} items
+      Showing {% raw %}{{#count}}{% endraw %} out of {% raw %}{{#total}}{%
+      endraw %} items
       <button>Click here to see more!</button>
     </template>
   </amp-list-load-more>
 </amp-list>
 ```
 
-#### load-more-loading
+#### `load-more-loading`
 
 This element is a loader that will be displayed if the user reaches the end of the list and the contents are still loading, or as a result of clicking on the `load-more-button` element (while the new children of the `<amp-list>` are still loading). This element can be customized by providing `<amp-list>` with a child element that has the attribute `load-more-loading`. Example below:
 
@@ -501,12 +416,13 @@ This element is a loader that will be displayed if the user reaches the end of t
 >
   ...
   <amp-list-load-more load-more-loading>
-    <svg>...</svg> /* My custom loader */
+    <!-- My custom loader -->
+    <svg>...</svg>
   </amp-list-load-more>
 </amp-list>
 ```
 
-#### load-more-failed
+#### `load-more-failed`
 
 A `<amp-list-load-more>` element containing the `load-more-failed` attribute that contains a button with the `load-more-clickable` attribute that will be displayed at the bottom of the `<amp-list>` if loading failed. Clicking on this element will trigger a reload of the url that failed. This element can be customized by providing `<amp-list>` with a child element that has the attribute `load-more-failed`. Example below:
 
@@ -543,7 +459,7 @@ In the above example, the entire `load-more-failed` element is clickable. Howeve
 </amp-list>
 ```
 
-#### load-more-end
+#### `load-more-end`
 
 This element is not provided by default, but if a `<amp-list-load-more>` element containing the `load-more-end` attribute is attached to `<amp-list>` as a child element, this element will be displayed at the bottom of the `<amp-list>` if there are no more items. This element can be templated via `amp-mustache`. Example below:
 
@@ -556,15 +472,16 @@ This element is not provided by default, but if a `<amp-list-load-more>` element
 >
   ...
   <amp-list-load-more load-more-end>
-    Congratulations! You've reached the end. /* Custom load-end element */
+    <!-- Custom load-end element -->
+    Congratulations! You've reached the end.
   </amp-list-load-more>
 </amp-list>
 ```
 
-## Substitutions
+### Substitutions
 
 The `<amp-list>` allows all standard URL variable substitutions.
-See the [Substitutions Guide](../../spec/amp-var-substitutions.md) for more info.
+See the [Substitutions Guide](../../docs/spec/amp-var-substitutions.md) for more info.
 
 For example:
 
@@ -574,8 +491,182 @@ For example:
 
 may make a request to something like `https://foo.com/list.json?0.8390278471201` where the RANDOM value is randomly generated upon each impression.
 
+[/filter]<!-- formats="websites, stories" -->
+
+## Attributes
+
+### `src` (required)
+
+[filter formats="websites, stories"]
+
+The URL of the remote endpoint that returns the JSON that will be rendered
+within this `<amp-list>`. There are three valid protocols for the `src` attribute.
+
+1. **https**: This must refer to a CORS HTTP service. Insecure HTTP is not supported.
+2. **amp-state**: For initializing from `<amp-state>` data. See [Initialization from `<amp-state>`](#initialization-from-amp-state) for more details.
+3. **amp-script**: For using `<amp-script>` functions as the data source. See [Using `<amp-script>` as a data source](#using-amp-script-as-a-data-source) for more details.
+   [/filter]<!-- formats="websites, stories" -->
+
+[filter formats="email"]
+
+The URL of the remote endpoint that returns the JSON for amp-list to render. This must refer to a CORS HTTP service and Insecure HTTP is not supported.
+
+[/filter]<!-- formats="email" -->
+
+[tip type="important"]
+Your endpoint must implement the requirements specified in the [CORS Requests in AMP](https://www.ampproject.org/docs/fundamentals/amp-cors-requests) spec.
+[/tip]
+
+If fetching the data at the `src` URL fails, the `<amp-list>` triggers a low-trust `fetch-error` event.
+
+[filter formats="websites, stories"]
+The `src` attribute may be omitted if the `[src]` attribute exists. `[src]` supports URL and non-URL expression values; see `amp-list` in [`amp-bind` element specific attributes documentation](https://amp.dev/documentation/components/amp-bind/#element-specific-attributes) for details.
+[/filter]<!-- formats="websites, stories" -->
+
+[filter formats="websites, stories"]
+
+### `credentials`
+
+Defines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/).
+
+-   Supported values: `omit`, `include`
+-   Default: `omit`
+
+To send credentials, pass the value of `include`. If this value is set, the response must follow the [AMP CORS security guidelines](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/#cors-security-in-amp).
+
+Here's an example that specifies including credentials to display personalized content in a list:
+
+```html
+<amp-list
+  credentials="include"
+  src="<%host%>/json/product.json?clientId=CLIENT_ID(myCookieId)"
+>
+  <template type="amp-mustache">
+    Your personal offer: ${{price}}
+  </template>
+</amp-list>
+```
+
+[/filter]<!-- formats="websites, stories" -->
+
+### `items`
+
+Defines the expression to locate the array to be rendered within the response. This is a dot-notated expression that navigates via fields of the JSON response.
+By defaut `<amp-list>` expects an array, the `single-item` attribute may be used to load data from an object.
+
+-   The default value is `"items"`. The expected response: `{items: [...]}`.
+-   If the response itself is the desired array, use the value of `"."`. The expected response is: `[...]`.
+-   Nested navigation is permitted (e.g., `"field1.field2"`). The expected response is: `{field1: {field2: [...]}}`.
+
+When `items="items"` is specified (which, is the default) the response must be a JSON object that contains an array property called `"items"`:
+
+```text
+{
+  "items": [...]
+}
+```
+
+### `max-items`
+
+An integer value specifying the maximum length of the items array to be rendered.
+The `items` array will be truncated to `max-items` entries if the returned value exceeds `max-items`.
+
+### `single-item`
+
+Causes `<amp-list>` to treat the returned result as if it were a single element array. An object response will be wrapped in an array so
+`{items: {...}}` will behave as if it were `{items: [{...}]}`.
+
+[filter formats="websites, stories"]
+
+### `xssi-prefix`
+
+Causes `<amp-list>` to strip a prefix from the fetched JSON before parsing. This can be useful for APIs that include [security prefixes](http://patorjk.com/blog/2013/02/05/crafty-tricks-for-avoiding-xssi/) like `)]}` to help prevent cross site scripting attacks.
+
+For example, lets say we had an API that returned this response:
+
+```
+)]}{ "items": ["value"] }
+```
+
+We could instruct `amp-list` to remove the security prefix like so:
+
+```html
+<amp-list xssi-prefix=")]}" src="https://foo.com/list.json"></amp-list>
+```
+
+[/filter]<!-- formats="websites, stories" -->
+
+[filter formats="websites, stories"]
+
+### `reset-on-refresh`
+
+Displays a loading indicator and placeholder again when the list's source is refreshed via `amp-bind` or the `refresh()` action.
+
+By default, this will only trigger on refreshes that cause a network fetch. To reset on all refreshes, use `reset-on-refresh="always"`.
+[/filter]<!-- formats="websites, stories" -->
+
+### `binding`
+
+For pages using `<amp-list>` that also use `amp-bind`, controls whether or not to block render on the evaluation of bindings (e.g. `[text]`) in rendered children.
+
+We recommend using `binding="no"` or `binding="refresh"` for faster performance.
+
+-   `binding="no"`: Never block render **(fastest)**.
+-   `binding="refresh"`: Don't block render on initial load **(faster)**.
+-   `binding="always"`: Always block render **(slow)**.
+
+If `binding` attribute is not provided, default is `always`.
+
+[filter formats="websites, stories"]
+
+<!-- prettier-ignore-start -->
+<!-- See: https://github.com/remarkjs/remark/issues/456 -->
+### `[is-layout-container]`
+<!-- prettier-ignore-end-->
+
+This is a bindable attribute that should always be `false` by default. When set to `true` via `amp-bind`, it changes the layout of the `<amp-list>` to `container`. This attribute is useful for handling dynamic resizing for amp-list.
+
+This attribute cannot be true by default for the same reason why `<amp-list>` does not support layout `CONTAINER` &mdash; it can cause content jumping on first load.
+
+Alternatively, one may also use the `changeToLayoutContainer` action.
+
+#### `load-more`
+
+This attribute accepts two values: "auto" or "manual". Setting the value of this attribute to "manual" will show a "load-more" button at the end of `<amp-list>`. Setting the value of this attribute to "auto" will cause `<amp-list>` to automatically load more elements three viewports down for an infinite scroll effect.
+
+#### `load-more-bookmark`
+
+This attribute specifies a field name in the returned data that will give the url of the next items to load. If this attribute is not specified, `<amp-list>` expects the json payload to have the `load-more-src` field, which corresponds to the next url to load. In the case where this field is called something else, you can specify the name of that field via the `load-more-bookmark` field.E.g. In the following sample payload, we would specify `load-more-bookmark="next"`.
+
+```js
+{ "items": [...], "next": "https://url.to.load" }
+```
+
 [/filter] <!-- formats="websites, stories" -->
 
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
+
+[filter formats="email"]
+
+##### Invalid AMP email attributes
+
+The AMP for Email spec disallows the use of the following attributes on the AMP email format.
+
+-   `[src]`
+-   `[state]`
+-   `[is-layout-container]`
+-   `auto-resize`
+-   `credentials`
+-   `data-amp-bind-src`
+-   `load-more`
+-   `load-more-bookmark`
+-   `reset-on-refresh`
+-   `xssi-prefix`
+
+[/filter] <!-- formats="email" -->
+
 ## Validation
 
-See [amp-list rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-list/validator-amp-list.protoascii) in the AMP validator specification.
+See [amp-list rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-list/validator-amp-list.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-list/validator-amp-list.protoascii b/extensions/amp-list/validator-amp-list.protoascii
index 098ee86295eca..de73fe62a0cea 100644
--- a/extensions/amp-list/validator-amp-list.protoascii
+++ b/extensions/amp-list/validator-amp-list.protoascii
@@ -36,17 +36,6 @@ tags: {  # amp-list
   }
   attr_lists: "common-extension-attrs"
 }
-tags: {  # amp-list
-  html_format: ACTIONS
-  tag_name: "SCRIPT"
-  spec_name: "SCRIPT[custom-element=amp-list] (ACTIONS)"
-  extension_spec: {
-    name: "amp-list"
-    version: "0.1"
-    version: "latest"
-  }
-  attr_lists: "common-extension-attrs"
-}
 tags: {  # <amp-list> with mandatory src and/or [src] attr
   html_format: AMP
   tag_name: "AMP-LIST"
@@ -92,13 +81,13 @@ tags: {  # <amp-list> with mandatory src and/or [src] attr
     value: "fetch"
   }
   attrs: { name: "single-item" }
-  attrs: { name: "xssi-prefix" }
   attrs: {
     name: "src"
     mandatory_anyof: "['src','[src]','data-amp-bind-src']"
     value_url: {
       protocol: "https"
       protocol: "amp-state"
+      protocol: "amp-script"
       allow_relative: true  # Will be set to false at a future date.
     }
     disallowed_value_regex: "__amp_source_origin"
@@ -107,6 +96,7 @@ tags: {  # <amp-list> with mandatory src and/or [src] attr
     name: "template"
     value_oneof_set: TEMPLATE_IDS
   }
+  attrs: { name: "xssi-prefix" }
   # <amp-bind>
   attrs: {
     name: "[is-layout-container]"
@@ -129,7 +119,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DIV"
   spec_name: "AMP-LIST DIV [fetch-error]"
   mandatory_ancestor: "AMP-LIST"
@@ -142,7 +131,6 @@ tags: {
 
 tags: { # amp-list-load-more
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "AMP-LIST-LOAD-MORE"
   requires_extension: "amp-list"
   mandatory_parent: "AMP-LIST"
@@ -171,7 +159,6 @@ tags: { # amp-list-load-more
 # The button element variant allowed in amp-list-load-more.
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   requires_extension: "amp-list"
   tag_name: "BUTTON"
   spec_name: "amp-list-load-more button[load-more-clickable]"
@@ -236,6 +223,7 @@ tags: {  # <amp-list>
     name: "template"
     value_oneof_set: TEMPLATE_IDS
   }
+  attrs: { name: "xssi-prefix" }
   # <amp-bind>
   attrs: {
     name: "[is-layout-container]"
@@ -251,68 +239,3 @@ tags: {  # <amp-list>
     supported_layouts: RESPONSIVE
   }
 }
-# ACTIONS <amp-list> with POST identity token
-tags: {  # <amp-list>
-  html_format: ACTIONS
-  tag_name: "AMP-LIST"
-  spec_name: "AMP-LIST (ACTIONS)"
-  requires_extension: "amp-list"
-  attrs: {
-    name: "auto-resize"
-    value: ""
-    deprecation: "replacement-to-be-determined-at-a-later-date"
-    deprecation_url: "https://github.com/ampproject/amphtml/issues/18849"
-  }
-  attrs: {
-    name: "binding"
-    value: "always"
-    value: "no"
-    value: "refresh"
-  }
-  attrs: { name: "credentials" }
-  attrs: {
-    name: "crossorigin"
-    value: "amp-viewer-auth-token-via-post"
-  }
-  attrs: {
-    name: "diffable"
-    value: ""
-  }
-  attrs: { name: "items" }
-  attrs: { name: "max-items" }
-  attrs: {
-    name: "reset-on-refresh"
-    value: ""
-    value: "always"
-    value: "fetch"
-  }
-  attrs: { name: "single-item" }
-  attrs: {
-    name: "src"
-    mandatory_anyof: "['src','[src]','data-amp-bind-src']"
-    value_url: {
-      protocol: "https"
-      allow_relative: true
-    }
-    disallowed_value_regex: "__amp_source_origin"
-  }
-  attrs: { name: "template" }
-  # <amp-bind>
-  attrs: {
-    name: "[src]"
-    mandatory_anyof: "['src','[src]','data-amp-bind-src']"
-  }
-  attrs: {
-    name: "[state]"
-    deprecation: "[src]"
-  }
-  attr_lists: "extended-amp-global"
-  amp_layout: {
-    supported_layouts: FILL
-    supported_layouts: FIXED
-    supported_layouts: FIXED_HEIGHT
-    supported_layouts: FLEX_ITEM
-    supported_layouts: NODISPLAY
-    supported_layouts: RESPONSIVE
-  }
-}
diff --git a/extensions/amp-live-list/0.1/amp-live-list.js b/extensions/amp-live-list/0.1/amp-live-list.js
index 794cdabc92ccc..c443fa0ac18ab 100644
--- a/extensions/amp-live-list/0.1/amp-live-list.js
+++ b/extensions/amp-live-list/0.1/amp-live-list.js
@@ -19,7 +19,7 @@ import {
   LiveListManager,
   SERVICE_ID,
 } from './live-list-manager';
-import {AmpEvents} from '../../../src/amp-events';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {CSS} from '../../../build/amp-live-list-0.1.css';
 import {Layout} from '../../../src/layout';
 import {childElementByAttr} from '../../../src/dom';
diff --git a/extensions/amp-live-list/0.1/live-list-manager.js b/extensions/amp-live-list/0.1/live-list-manager.js
index 307f2802c125f..b78001c7eb2b5 100644
--- a/extensions/amp-live-list/0.1/live-list-manager.js
+++ b/extensions/amp-live-list/0.1/live-list-manager.js
@@ -17,11 +17,10 @@
 import {Poller} from './poller';
 import {Services} from '../../../src/services';
 import {addParamToUrl} from '../../../src/url';
+import {extensionScriptsInNode} from '../../../src/service/extension-script';
 import {fetchDocument} from '../../../src/document-fetcher';
 import {getMode} from '../../../src/mode';
 import {getServicePromiseForDoc} from '../../../src/service';
-import {startsWith} from '../../../src/string';
-import {toArray} from '../../../src/types';
 import {userAssert} from '../../../src/log';
 
 /** @const {string} */
@@ -121,10 +120,9 @@ export class LiveListManager {
    * @return {!Promise<!LiveListManager>}
    */
   static forDoc(element) {
-    return /** @type {!Promise<!LiveListManager>} */ (getServicePromiseForDoc(
-      element,
-      SERVICE_ID
-    ));
+    return /** @type {!Promise<!LiveListManager>} */ (
+      getServicePromiseForDoc(element, SERVICE_ID)
+    );
   }
 
   /**
@@ -218,9 +216,8 @@ export class LiveListManager {
     );
 
     return liveListsWithCustomSlots.map((id) => {
-      const customSlotId = this.liveLists_[id].element[
-        AMP_LIVE_LIST_CUSTOM_SLOT_ID
-      ];
+      const customSlotId =
+        this.liveLists_[id].element[AMP_LIVE_LIST_CUSTOM_SLOT_ID];
       return doc.getElementById(customSlotId);
     });
   }
@@ -299,7 +296,7 @@ export class LiveListManager {
   setupVisibilityHandler_() {
     // Polling should always be stopped when document is no longer visible.
     this.ampdoc.onVisibilityChanged(() => {
-      if (this.ampdoc.isVisible()) {
+      if (this.ampdoc.isVisible() && this.hasActiveLiveLists_()) {
         // We use immediate so that the user starts getting updates
         // right away when they've switched back to the page.
         this.poller_.start(/** immediate */ true);
@@ -313,16 +310,15 @@ export class LiveListManager {
    * @param {!Document} doc
    */
   installExtensionsForDoc_(doc) {
-    const extensions = toArray(
-      doc.querySelectorAll('script[custom-element], script[custom-template]')
-    );
-    extensions.forEach((script) => {
-      const extensionName =
-        script.getAttribute('custom-element') ||
-        script.getAttribute('custom-template');
+    const extensions = extensionScriptsInNode(doc);
+    extensions.forEach(({extensionId, extensionVersion}) => {
       // This is a cheap operation if extension is already installed so no need
       // to over optimize checks.
-      this.extensions_.installExtensionForDoc(this.ampdoc, extensionName);
+      this.extensions_.installExtensionForDoc(
+        this.ampdoc,
+        extensionId,
+        extensionVersion
+      );
     });
   }
 
@@ -358,5 +354,5 @@ function isDocTransformed(root) {
   }
   const {documentElement} = root.ownerDocument;
   const transformed = documentElement.getAttribute('transformed');
-  return Boolean(transformed) && startsWith(transformed, TRANSFORMED_PREFIX);
+  return Boolean(transformed) && transformed.startsWith(TRANSFORMED_PREFIX);
 }
diff --git a/extensions/amp-live-list/0.1/poller.js b/extensions/amp-live-list/0.1/poller.js
index a131b0e5cbc1b..70b7d2a362a73 100644
--- a/extensions/amp-live-list/0.1/poller.js
+++ b/extensions/amp-live-list/0.1/poller.js
@@ -18,7 +18,7 @@ import {Services} from '../../../src/services';
 import {
   exponentialBackoffClock,
   getJitter,
-} from '../../../src/exponential-backoff';
+} from '../../../src/core/types/function/exponential-backoff';
 
 /**
  * Poller with backoff functionality.
diff --git a/extensions/amp-live-list/0.1/test/test-amp-live-list.js b/extensions/amp-live-list/0.1/test/test-amp-live-list.js
index 1fe5ac786deab..a4de144f23c95 100644
--- a/extensions/amp-live-list/0.1/test/test-amp-live-list.js
+++ b/extensions/amp-live-list/0.1/test/test-amp-live-list.js
@@ -15,7 +15,7 @@
  */
 
 import {AmpDocSingle} from '../../../../src/service/ampdoc-impl';
-import {AmpEvents} from '../../../../src/amp-events';
+import {AmpEvents} from '../../../../src/core/constants/amp-events';
 import {AmpLiveList, getNumberMaxOrDefault} from '../amp-live-list';
 import {LiveListManager} from '../live-list-manager';
 
diff --git a/extensions/amp-live-list/0.1/test/test-live-list-manager.js b/extensions/amp-live-list/0.1/test/test-live-list-manager.js
index 62cacdad2c0ea..5d51bbab4ecb8 100644
--- a/extensions/amp-live-list/0.1/test/test-live-list-manager.js
+++ b/extensions/amp-live-list/0.1/test/test-live-list-manager.js
@@ -627,6 +627,39 @@ describes.fakeWin('LiveListManager', {amp: true}, (env) => {
     }
   );
 
+  it("should not poll if all amp-live-list's are disabled on visible", () => {
+    const fetchSpy = env.sandbox.spy(manager, 'work_');
+    const liveList2 = getLiveList({'data-poll-interval': '8000'}, 'id-2');
+
+    liveList.toggle(false);
+    liveList2.toggle(false);
+    ready();
+    // Important that we set this before build since then is when they register
+    liveList.buildCallback();
+    liveList2.buildCallback();
+    expect(liveList.isEnabled()).to.be.false;
+    expect(liveList2.isEnabled()).to.be.false;
+    return manager.whenDocReady_().then(() => {
+      expect(ampdoc.isVisible()).to.be.true;
+      expect(manager.poller_.isRunning()).to.be.false;
+      ampdoc.overrideVisibilityState('hidden');
+      expect(fetchSpy).to.have.not.been.called;
+      expect(manager.poller_.isRunning()).to.be.false;
+      ampdoc.overrideVisibilityState('visible');
+      expect(manager.poller_.isRunning()).to.be.false;
+      ampdoc.overrideVisibilityState('inactive');
+      expect(manager.poller_.isRunning()).to.be.false;
+      ampdoc.overrideVisibilityState('visible');
+      expect(fetchSpy).to.have.not.been.called;
+      expect(manager.poller_.isRunning()).to.be.false;
+      ampdoc.overrideVisibilityState('prerender');
+      expect(fetchSpy).to.have.not.been.called;
+      expect(manager.poller_.isRunning()).to.be.false;
+      clock.tick(20000);
+      expect(fetchSpy).to.have.not.been.called;
+    });
+  });
+
   it('should fetch with url', () => {
     env.sandbox.stub(Math, 'random').callsFake(() => 1);
     env.sandbox.stub(ampdoc, 'isVisible').returns(true);
@@ -709,7 +742,7 @@ describes.fakeWin('LiveListManager', {amp: true}, (env) => {
   );
 
   it('should find highest "update time" from amp-live-list elements', () => {
-    const doc = [];
+    const doc = {};
     const list1 = getLiveList(undefined, 'id1');
     const list2 = getLiveList(undefined, 'id2');
     env.sandbox.stub(list1, 'update').returns(1000);
@@ -717,7 +750,7 @@ describes.fakeWin('LiveListManager', {amp: true}, (env) => {
     doc.getElementsByTagName = () => {
       return [list1.element, list2.element];
     };
-    doc.querySelectorAll = function () {};
+    doc.querySelectorAll = () => [];
     list1.buildCallback();
     list2.buildCallback();
     expect(manager.latestUpdateTime_).to.equal(0);
@@ -791,31 +824,40 @@ describes.realWin(
       const script1 = document.createElement('script');
       const script2 = document.createElement('script');
       script1.setAttribute('custom-element', 'amp-test');
+      env.sandbox
+        .stub(script1, 'src')
+        .value('https://cdn.ampproject.org/v0/amp-test-0.2.js');
       script2.setAttribute('custom-template', 'amp-template');
+      env.sandbox
+        .stub(script2, 'src')
+        .value('https://cdn.ampproject.org/v0/amp-template-0.2.js');
       div.appendChild(script1);
       div.appendChild(script2);
 
       expect(
         doc.head.querySelectorAll('[custom-element="amp-test"]')
       ).to.have.length(0);
-      expect(extensions.extensions_['amp-test']).to.be.undefined;
+      expect(extensions.extensions_['amp-test:0.2']).to.be.undefined;
 
       expect(
         doc.head.querySelectorAll('[custom-template="amp-template"]')
       ).to.have.length(0);
-      expect(extensions.extensions_['amp-template']).to.be.undefined;
+      expect(extensions.extensions_['amp-template:0.2']).to.be.undefined;
 
       manager.installExtensionsForDoc_(div);
 
       expect(
-        doc.head.querySelectorAll('[custom-element="amp-test"]')
+        doc.head.querySelectorAll('[custom-element="amp-test"][src*="-0.2"]')
       ).to.have.length(1);
-      expect(extensions.extensions_['amp-test'].scriptPresent).to.be.true;
+      expect(extensions.extensions_['amp-test:0.2'].scriptPresent).to.be.true;
 
       expect(
-        doc.head.querySelectorAll('[custom-element="amp-template"]')
+        doc.head.querySelectorAll(
+          '[custom-element="amp-template"][src*="-0.2"]'
+        )
       ).to.have.length(1);
-      expect(extensions.extensions_['amp-template'].scriptPresent).to.be.true;
+      expect(extensions.extensions_['amp-template:0.2'].scriptPresent).to.be
+        .true;
     });
   }
 );
diff --git a/extensions/amp-live-list/0.1/test/test-poller.js b/extensions/amp-live-list/0.1/test/test-poller.js
index ae5a45c0d8972..fa02149aa3072 100644
--- a/extensions/amp-live-list/0.1/test/test-poller.js
+++ b/extensions/amp-live-list/0.1/test/test-poller.js
@@ -17,19 +17,19 @@
 import {Poller} from '../poller';
 import {Services} from '../../../../src/services';
 
-describe('Poller', () => {
+describes.sandboxed('Poller', {}, (env) => {
   let clock;
   let poller;
   let workStub;
   const timer = Services.timerFor(window);
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
     const obj = {
       work() {},
     };
-    workStub = window.sandbox.stub(obj, 'work');
-    window.sandbox.stub(Math, 'random').callsFake(() => 1);
+    workStub = env.sandbox.stub(obj, 'work');
+    env.sandbox.stub(Math, 'random').callsFake(() => 1);
     const wait = 5000;
     poller = new Poller(window, wait, workStub);
   });
@@ -243,13 +243,13 @@ describe('Poller', () => {
   });
 
   it('should clear timeout ids if stopped', () => {
-    const delaySpy = window.sandbox.spy(timer, 'delay');
+    const delaySpy = env.sandbox.spy(timer, 'delay');
     const retriableErr = new Error('HTTP Error');
     retriableErr.retriable = true;
     workStub.onCall(0).returns(Promise.reject(retriableErr));
     workStub.onCall(1).returns(Promise.reject(retriableErr));
     workStub.returns(Promise.resolve());
-    const clearSpy = window.sandbox.spy(timer, 'cancel');
+    const clearSpy = env.sandbox.spy(timer, 'cancel');
 
     expect(poller.lastTimeoutId_).to.be.null;
 
diff --git a/extensions/amp-live-list/0.1/test/validator-amp-live-list.out b/extensions/amp-live-list/0.1/test/validator-amp-live-list.out
index db166ddccf052..098a9c751b1e5 100644
--- a/extensions/amp-live-list/0.1/test/validator-amp-live-list.out
+++ b/extensions/amp-live-list/0.1/test/validator-amp-live-list.out
@@ -92,10 +92,10 @@ amp-live-list/0.1/test/validator-amp-live-list.html:70:2 The reference point 'AM
 |    <amp-live-list id="my-live-list-4" data-poll-interval="15000" data-max-items-per-page="20">
 |      <img update src="button.gif" onclick="javascript:alert('u have updates!')">
 >>     ^~~~~~~~~
-amp-live-list/0.1/test/validator-amp-live-list.html:82:4 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img)
+amp-live-list/0.1/test/validator-amp-live-list.html:82:4 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
 |      <script items>
 >>     ^~~~~~~~~
-amp-live-list/0.1/test/validator-amp-live-list.html:83:4 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp-live-list/0.1/test/validator-amp-live-list.html:83:4 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |        document.writeln('1, 2, 3');
 |      </script>
 |    </amp-live-list>
@@ -107,24 +107,24 @@ amp-live-list/0.1/test/validator-amp-live-list.html:83:4 Custom JavaScript is no
 |      <ul items>
 |        <li id="1" data-update-time="42">1</li>  <!-- data-sort-time missing -->
 >>       ^~~~~~~~~
-amp-live-list/0.1/test/validator-amp-live-list.html:93:6 The mandatory attribute 'data-sort-time' is missing in tag 'AMP-LIVE-LIST [items] item'. (see https://amp.dev/documentation/components/amp-live-list#items)
+amp-live-list/0.1/test/validator-amp-live-list.html:93:6 The mandatory attribute 'data-sort-time' is missing in tag 'amp-live-list [items] item'. (see https://amp.dev/documentation/components/amp-live-list/#items)
 >>       ^~~~~~~~~
-amp-live-list/0.1/test/validator-amp-live-list.html:93:6 The tag 'li', a child tag of 'AMP-LIVE-LIST [items]', does not satisfy the reference point 'AMP-LIVE-LIST [items] item'. (see https://amp.dev/documentation/components/amp-live-list#items)
+amp-live-list/0.1/test/validator-amp-live-list.html:93:6 The tag 'li', a child tag of 'AMP-LIVE-LIST [items]', does not satisfy the reference point 'AMP-LIVE-LIST [items] item'. (see https://amp.dev/documentation/components/amp-live-list/#items)
 |        <li id="2" data-sort-time="43" data-update-time="44">2</li>
 |        <li data-update-time="44">3</li> <!-- id and data-sort-time missing -->
 >>       ^~~~~~~~~
-amp-live-list/0.1/test/validator-amp-live-list.html:95:6 The mandatory attribute 'data-sort-time' is missing in tag 'AMP-LIVE-LIST [items] item'. (see https://amp.dev/documentation/components/amp-live-list#items)
+amp-live-list/0.1/test/validator-amp-live-list.html:95:6 The mandatory attribute 'data-sort-time' is missing in tag 'amp-live-list [items] item'. (see https://amp.dev/documentation/components/amp-live-list/#items)
 >>       ^~~~~~~~~
-amp-live-list/0.1/test/validator-amp-live-list.html:95:6 The mandatory attribute 'id' is missing in tag 'AMP-LIVE-LIST [items] item'. (see https://amp.dev/documentation/components/amp-live-list#items)
+amp-live-list/0.1/test/validator-amp-live-list.html:95:6 The mandatory attribute 'id' is missing in tag 'amp-live-list [items] item'. (see https://amp.dev/documentation/components/amp-live-list/#items)
 >>       ^~~~~~~~~
-amp-live-list/0.1/test/validator-amp-live-list.html:95:6 The tag 'li', a child tag of 'AMP-LIVE-LIST [items]', does not satisfy the reference point 'AMP-LIVE-LIST [items] item'. (see https://amp.dev/documentation/components/amp-live-list#items)
+amp-live-list/0.1/test/validator-amp-live-list.html:95:6 The tag 'li', a child tag of 'AMP-LIVE-LIST [items]', does not satisfy the reference point 'AMP-LIVE-LIST [items] item'. (see https://amp.dev/documentation/components/amp-live-list/#items)
 |        <p>junk</p> <!-- id, data-sort-time missing -->
 >>       ^~~~~~~~~
-amp-live-list/0.1/test/validator-amp-live-list.html:96:6 The mandatory attribute 'data-sort-time' is missing in tag 'AMP-LIVE-LIST [items] item'. (see https://amp.dev/documentation/components/amp-live-list#items)
+amp-live-list/0.1/test/validator-amp-live-list.html:96:6 The mandatory attribute 'data-sort-time' is missing in tag 'amp-live-list [items] item'. (see https://amp.dev/documentation/components/amp-live-list/#items)
 >>       ^~~~~~~~~
-amp-live-list/0.1/test/validator-amp-live-list.html:96:6 The mandatory attribute 'id' is missing in tag 'AMP-LIVE-LIST [items] item'. (see https://amp.dev/documentation/components/amp-live-list#items)
+amp-live-list/0.1/test/validator-amp-live-list.html:96:6 The mandatory attribute 'id' is missing in tag 'amp-live-list [items] item'. (see https://amp.dev/documentation/components/amp-live-list/#items)
 >>       ^~~~~~~~~
-amp-live-list/0.1/test/validator-amp-live-list.html:96:6 The tag 'p', a child tag of 'AMP-LIVE-LIST [items]', does not satisfy the reference point 'AMP-LIVE-LIST [items] item'. (see https://amp.dev/documentation/components/amp-live-list#items)
+amp-live-list/0.1/test/validator-amp-live-list.html:96:6 The tag 'p', a child tag of 'AMP-LIVE-LIST [items]', does not satisfy the reference point 'AMP-LIVE-LIST [items] item'. (see https://amp.dev/documentation/components/amp-live-list/#items)
 |      </ul>
 |      <div pagination></div>
 |    </amp-live-list>
@@ -135,7 +135,7 @@ amp-live-list/0.1/test/validator-amp-live-list.html:96:6 The tag 'p', a child ta
 |      <button update on="tap:my-live-list-6.update">You have updates!</button>
 |      <amp-live-list items id="my-live-list-7" data-poll-interval="15000" data-max-items-per-page="20">
 >>     ^~~~~~~~~
-amp-live-list/0.1/test/validator-amp-live-list.html:105:4 The tag 'amp-live-list' conflicts with reference point 'AMP-LIVE-LIST [items]' because both define reference points. (see https://amp.dev/documentation/components/amp-live-list#items)
+amp-live-list/0.1/test/validator-amp-live-list.html:105:4 The tag 'amp-live-list' conflicts with reference point 'AMP-LIVE-LIST [items]' because both define reference points. (see https://amp.dev/documentation/components/amp-live-list/#items)
 |        <button update on="tap:my-live-list-7.update">You have updates!</button>
 |        <div items></div>
 |      </amp-live-list>
@@ -154,4 +154,4 @@ amp-live-list/0.1/test/validator-amp-live-list.html:105:4 The tag 'amp-live-list
 |    </amp-live-list>
 |
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-live-list/OWNERS b/extensions/amp-live-list/OWNERS
index 6b1d001d15c8c..04c3c75bfccd6 100644
--- a/extensions/amp-live-list/OWNERS
+++ b/extensions/amp-live-list/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-performance'}],
     },
   ],
 }
diff --git a/extensions/amp-live-list/amp-live-list-server-side-filtering.md b/extensions/amp-live-list/amp-live-list-server-side-filtering.md
index 365eac4c93f4d..a70aced69b437 100644
--- a/extensions/amp-live-list/amp-live-list-server-side-filtering.md
+++ b/extensions/amp-live-list/amp-live-list-server-side-filtering.md
@@ -2,7 +2,7 @@
 
 ## Overview
 
-The `amp-live-list` component is allowed to make requests to its server (depending on where the file is hosted from, the server could be the Google AMP Cache, another AMP cache, or the publisher’s server) for the the latest AMP document and update the current DOM with information from the received AMP document. It can work with a full AMP document as the response, but to reduce the payload and save on bandwidth and CPU cycles `amp-live-list` has defined the minimum HTML structure, the tags and its attributes needed by the component to correctly make an update to the live DOM. This spec depends on the [`amp-live-list` spec](https://github.com/ampproject/amphtml/blob/master/extensions/amp-live-list/amp-live-list.md) and defines its [Server side filtering](https://github.com/ampproject/amphtml/blob/master/extensions/amp-live-list/amp-live-list.md#server-side-filtering) section.
+The `amp-live-list` component is allowed to make requests to its server (depending on where the file is hosted from, the server could be the Google AMP Cache, another AMP cache, or the publisher’s server) for the the latest AMP document and update the current DOM with information from the received AMP document. It can work with a full AMP document as the response, but to reduce the payload and save on bandwidth and CPU cycles `amp-live-list` has defined the minimum HTML structure, the tags and its attributes needed by the component to correctly make an update to the live DOM. This spec depends on the [`amp-live-list` spec](https://github.com/ampproject/amphtml/blob/main/extensions/amp-live-list/amp-live-list.md) and defines its [Server side filtering](https://github.com/ampproject/amphtml/blob/main/extensions/amp-live-list/amp-live-list.md#server-side-filtering) section.
 
 ## Design
 
diff --git a/extensions/amp-live-list/amp-live-list.md b/extensions/amp-live-list/amp-live-list.md
index d54b46c05f173..65c72aa58b13f 100644
--- a/extensions/amp-live-list/amp-live-list.md
+++ b/extensions/amp-live-list/amp-live-list.md
@@ -25,33 +25,134 @@ limitations under the License.
 
 # amp-live-list
 
-Warning: Currently, content served via an AMP cache may be slow to receive live updates. Read more [here](https://github.com/ampproject/amphtml/issues/13659)
+## Usage
 
-A wrapper and minimal UI for content that updates live in the client instance as new content is available in the source document.
+A wrapper and minimal UI for content that updates live in the client instance as
+new content is available in the source document.
 
-## Behavior
+`amp-live-list` provides instant content updates from the client. Depending on
+implementation, it can update the DOM without user interaction, such as
+refreshing or navigating to a different page. The core use case for this
+component is live blogs: coverage for breaking news or live events where the
+user can stay on or keep returning to the same page to see new updates as they
+come in. Common examples are award shows, sporting events, and elections.
 
-`amp-live-list` provides instant content updates from the client.
-Depending on implementation,
-it can update the DOM without user interaction,
-such as refreshing or navigating to a different page.
-The core use case for this component
-is live blogs: coverage for breaking news or live events where the user can stay
-on or keep returning to the same page to see new updates as they come in. Common
-examples are award shows, sporting events, and elections.
+Below we have an example of multiple `amp-live-list` on a single page. Notice
+that only the first`amp-live-list` has a fixed position button, while the second
+one is inside the component with a sliding animation.
 
-To learn how to use `amp-live-list` in a blog, see the [Create a Live Blog](https://amp.dev/documentation/guides-and-tutorials/develop/live_blog) tutorial.
+The polling interval will also be 16000 and not 20000 milliseconds, as we choose
+the lowest one.
+
+```html
+<style amp-custom>
+  amp-live-list > [update] {
+    display: none;
+  }
+
+  #fixed-button {
+    position: fixed;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .slide.amp-active {
+    overflow-y: hidden;
+    height: 100px;
+    max-height: 150px;
+    transition-property: height;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in;
+    background: #3f51b5;
+  }
+
+  .slide.amp-hidden {
+    max-height: 0;
+  }
+
+  // We need to override "display: none" to be able to see
+  // the transition effect on the 2nd live list.
+  #live-list-2 > .amp-hidden[update] {
+    display: block;
+  }
+</style>
+
+<amp-live-list
+  id="live-list-1"
+  data-poll-interval="16000"
+  data-max-items-per-page="5"
+>
+  <button update id="fixed-button" class="button" on="tap:live-list-1.update">
+    new updates on live list 1
+  </button>
+  <div items>
+    <div id="live-list-1-item-2" data-sort-time="1462814963592">
+      <div class="card">
+        <div class="logo">
+          <amp-img
+            src="/examples/img/ampicon.png"
+            layout="fixed"
+            height="50"
+            width="50"
+          >
+          </amp-img>
+        </div>
+      </div>
+    </div>
+    <div id="live-list-1-item-1" data-sort-time="1462814955597">
+      <div class="card">
+        <div class="logo">
+          <amp-img
+            src="/examples/img/ampicon.png"
+            layout="fixed"
+            height="50"
+            width="50"
+          >
+          </amp-img>
+        </div>
+      </div>
+    </div>
+  </div>
+</amp-live-list>
 
-## How it works
+<amp-live-list
+  id="live-list-2"
+  data-poll-interval="20000"
+  data-max-items-per-page="10"
+>
+  <div update class="slide" on="tap:live-list-2.update">
+    new updates on live list 2
+  </div>
+  <div items>
+    <div id="live-list-2-item-2" data-sort-time="1464281932879">world</div>
+    <div id="live-list-2-item-1" data-sort-time="1464281932878">hello</div>
+  </div>
+</amp-live-list>
+```
+
+To learn how to use `amp-live-list` in a blog, see the
+[Create a Live Blog](https://amp.dev/documentation/guides-and-tutorials/develop/live_blog)
+tutorial.
+
+### How it works
 
-In the background, while an AMP page using `<amp-live-list>` is displayed on the client, the AMP runtime polls the origin document on the host for updates. When the client receives a response, it then [filters](#server-side-filtering) and dynamically inserts those updates back into the page on the client. Publishers can customize the polling rate in order to control the number of incoming requests, and AMP caches like the Google AMP Cache can perform optimizations to reduce the server response payload, saving client bandwidth and CPU cycles.
+In the background, while an AMP page using `<amp-live-list>` is displayed on the
+client, the AMP runtime polls the origin document on the host for updates. When
+the client receives a response, it then [filters](#server-side-filtering) and
+dynamically inserts those updates back into the page on the client. Publishers
+can customize the polling rate in order to control the number of incoming
+requests, and AMP caches like the Google AMP Cache can perform optimizations
+to reduce the server response payload, saving client bandwidth and CPU cycles.
 
 The `amp-live-list` component has 3 sections. We'll refer to these sections as
-"reference points" and they are denoted by an attribute. These reference points must be a direct child of the `amp-live-list` component. The 3 reference points are:
+"reference points" and they are denoted by an attribute. These reference points
+must be a direct child of the `amp-live-list` component. The 3 reference points
+are:
 
-- `update` (mandatory)
-- `items` (mandatory)
-- `pagination` (optional)
+-   `update` (mandatory)
+-   `items` (mandatory)
+-   `pagination` (optional)
 
 For more details, see the ["Reference Points"](#reference-points) section below.
 
@@ -70,13 +171,17 @@ Example:
 </amp-live-list>
 ```
 
-## Polling
+### Polling
 
 In most implementations for live blogs, content is either pushed by the server
 to the client instance of a page, or the client polls a JSON endpoint to receive
 updates. The implementation for this component is different, in that the client
 instance of the page polls the server copy of the document for updates to the
-`items` reference point. For instance: if the user is viewing a document served from an AMP cache, the client will poll that document hosted on that AMP cache for updates; if the user is viewing a document served from a web publisher's origin domain (e.g. "example.com"), then the client will poll the document hosted on that origin domain for updates.
+`items` reference point. For instance: if the user is viewing a document served
+from an AMP cache, the client will poll that document hosted on that AMP cache
+for updates; if the user is viewing a document served from a web publisher's
+origin domain (e.g. "example.com"), then the client will poll the document
+hosted on that origin domain for updates.
 
 This means that publishers of content do not need to set up a JSON endpoint or
 push mechanism for this component to work. New content just needs to be
@@ -89,23 +194,28 @@ When multiple `amp-live-list` components are on a page, we choose the smallest
 polling interval across the `amp-live-list` components and use that as the
 polling interval.
 
-## Reference Points
+### Reference Points<a name="reference-points"></a>
 
-### update
+#### `update`
 
 The `update` reference point is shown when new items are received from
-the server, to provide an affordance for users to refresh the page with new items when they are available. It is hidden by default (through an `.amp-hidden`
-class whose style can be overriden). You may style this reference point as a `fixed` position
-item if you want a floating button on the page like on social media websites, to
-draw the reader's attention to take action. Currently the `update` reference
-point is not shown for either updates (using `data-update-time`) or tombstone
-(using `data-tombstone`) operations without an insert (newly discovered id's)
-operation.
-
-{% call callout('Note', type='note') %}
-When using `position: fixed` we highly recommend that you use an id selector or a css selector with no other css combinators, because complex combinators cannot be moved into the fixed layer (fixed layer is an iOS workaround
-for webkit's fixed position [bug](https://bugs.webkit.org/show_bug.cgi?id=154399).
-{% endcall %}
+the server, to provide an affordance for users to refresh the page with new
+items when they are available. It is hidden by default (through an `.amp-hidden`
+class whose style can be overridden). You may style this reference point as a
+`fixed` position item if you want a floating button on the page like on social
+media websites, to draw the reader's attention to take action. Currently the
+`update` reference point is not shown for either updates (using
+`data-update-time`) or tombstone (using `data-tombstone`) operations without an
+insert (newly discovered id's) operation.
+
+[tip type="note"]
+
+When using `position: fixed` we highly recommend that you use an id selector or
+a css selector with no other css combinators, because complex combinators cannot
+be moved into the fixed layer (fixed layer is an iOS workaround for webkit's
+fixed position [bug](https://bugs.webkit.org/show_bug.cgi?id=154399).
+
+[/tip]
 
 The actual action handler may be at a descendant and does not have to be at the
 `update` reference point. the `amp-live-list` component then has an internal
@@ -129,21 +239,21 @@ Example:
 </amp-live-list>
 ```
 
-### items
+#### `items`
 
-The `items` reference point is where new items are inserted, replaced or removed.
-children of the `items` reference point are required to have an `id` and a
-`data-sort-time` attribute.
+The `items` reference point is where new items are inserted, replaced or
+removed. Children of the `items` reference point are required to have an `id`
+and a `data-sort-time` attribute.
 
-### pagination
+#### `pagination`
 
-The `pagination` reference point is where any sort of pagination markup is located.
-We recommend having a small subtree underneath this reference point as the
-`amp-live-list` component will be doing an inline replace of the DOM received from
-the server in case the page count had increased. We don't do any special
-diffing and just outright replace the contents.
+The `pagination` reference point is where any sort of pagination markup is
+located. We recommend having a small subtree underneath this reference point as
+the `amp-live-list` component will be doing an inline replace of the DOM
+received from the server in case the page count had increased. We don't do any
+special diffing and just outright replace the contents.
 
-## Update Behavior and User Experience
+### Update Behavior and User Experience
 
 When updates are discovered by the client from polling the server document, any
 newly discovered `id`'s from children of the `items` reference point will turn
@@ -155,119 +265,121 @@ If a `data-update-time` attribute is present and its value is a number higher
 than the original `data-sort-time` on the attribute, the item will be updated in
 place through a `replaceChild` operation. If a `data-tombstone` attribute is
 present the element's subtree will be emptied out and the item is hidden through
-css (see [amp-live-list.css](https://github.com/ampproject/amphtml/blob/master/extensions/amp-live-list/0.1/amp-live-list.css)).
+css (see [amp-live-list.css](https://github.com/ampproject/amphtml/blob/main/extensions/amp-live-list/0.1/amp-live-list.css)).
 
 If a replace or tombstone operation is found but no insert (no new items) is
 found on a poll request, the replace and the tombstone operation will occur
 without the need for a reader's action. The component and the AMP runtime
 will try and maintain the viewport's scroll position but since a replace could
-have components in its subtree that cause a resize (amp-twitter, amp-iframe,
+have components in its subtree that cause a resize (`amp-twitter`, `amp-iframe`,
 etc.) after the fact, we discourage having a lot of replace operations through
 the `data-update-time` attribute.
 
-## How Pagination works
+### How Pagination works
 
 As AMP's focus is on performance we recommend the publisher keep a low number of
 items on a single page by limiting the number of children the `items` reference
-point has, as well as setting a good `data-max-items-per-page` value. Neither the client
-nor any cache that may be used knows anything about the full number of items. so
-it is up to the publisher to update the `pagination` reference point correctly
-based on the number of valid items. Items which have the `data-tombstone`
-attribute for example should not be counted, as they are hidden.
+point has, as well as setting a good `data-max-items-per-page` value. Neither
+the client nor any cache that may be used knows anything about the full number
+of items. so it is up to the publisher to update the `pagination` reference
+point correctly based on the number of valid items. Items which have the
+`data-tombstone` attribute for example should not be counted, as they are
+hidden.
 
-Once the number of valid live items is over the `data-max-items-per-page`
-value, the component will try and remove items that are below the viewport
-until the number the live items is equal or below the `data-max-items-per-page`
-value. The number of items may possibly be over the `data-max-items-per-page`
-value if the item for deletion is not below the viewport.
+Once the number of valid live items is over the `data-max-items-per-page` value,
+the component will try and remove items that are below the viewport until the
+number the live items is equal or below the `data-max-items-per-page` value. The
+number of items may possibly be over the `data-max-items-per-page` value if the
+item for deletion is not below the viewport.
 
-When a reader is not on page 1 of the document, the `disabled` attribute
-should be applied to all `amp-live-list` components since the component
-will still try to insert new items if it identifies any and has no notion
-that is not on the first page.
+When a reader is not on page 1 of the document, the `disabled` attribute should
+be applied to all `amp-live-list` components since the component will still try
+to insert new items if it identifies any and has no notion that is not on the
+first page.
 
-## Server Side filtering
+### Server Side filtering<a name="server-side-filtering"></a>
 
-See the documentation for [Server side filtering](../amp-live-list/amp-live-list-server-side-filtering.md).
+See the documentation for
+[Server side filtering](../amp-live-list/amp-live-list-server-side-filtering.md).
 
 ## Attributes
 
+### `id` (required)
+
+To uniquely identify an `amp-live-list` (since multiple are allowed on a single
+page).
+
+### `data-poll-interval`
+
+Time (in milliseconds) interval between checks for new content (15000 ms minimum
+is enforced). If no `data-poll-interval` is provided it will default to the
+15000 ms minimum.
+
+### `data-max-items-per-page` (required)
+
+Maximum number of child entries. Additional elements are assumed to be on the
+next "page". If the number of children items is greater than the number provided
+on the attribute, the number of children items will be the new
+`data-max-items-per-page`. Once the number of live items on an `amp-live-list`
+is over the `data-max-items-per-page` limit items below the viewport will be
+fully removed from the live DOM.
+
+### `disabled`
+
+No polling will occur. Recommended when not on page 1 (looking at archival data)
+and when the article is no longer fresh and should no longer be updated.
+
+### Attributes on `items` reference point children
+
 Usually attribute requirements are only enforced on the actual component but
 because we need to anchor and make decisions on the client, we will also need
 to require an `items` and `update` attribute on a direct child of
 `amp-live-list`. Children of the `items` reference point will also have
 attribute requirements.
 
-### Attributes on `amp-live-list`
-
-<table>
-  <tr>
-    <td width="40%"><strong>id (Required)</strong></td>
-    <td>To uniquely identify an amp-live-list (since multiple are allowed on a single
-    page).</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-poll-interval (Optional)</strong></td>
-    <td>Time (in milliseconds) interval between checks for new content (15000 ms minimum is
-    enforced). If no `data-poll-interval` is provided it will default to the 15000 ms
-    minimum.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-max-items-per-page (Required)</strong></td>
-    <td>Maximum number of child entries. Additional elements are assumed to be on the
-    next "page". If the number of children items is greater than the number
-    provided on the attribute, the number of children items will be the new
-    `data-max-items-per-page`.
-    Once the number of live items on an `amp-live-list` is over the
-    `data-max-items-per-page` limit items below the viewport will be fully
-    removed from the live DOM.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>disabled (Optional)</strong></td>
-    <td>No polling will occur. Recommended when not on page 1 (looking at archival data)
-    and when the article is no longer fresh and should no longer be updated.</td>
-  </tr>
-</table>
+#### `id` (required)
 
-### Attributes on `items` reference point children
+The ID of the `items` child must never change.
+
+#### `data-sort-time` (Required)
+
+Timestamp used for sorting entries. Higher timestamps will be inserted before
+older entries. We recommend using Unix time (the number of seconds that have
+elapsed since Thursday, 1 January 1970).
 
-<table>
-  <tr>
-    <td width="40%"><strong>id (Required)</strong></td>
-    <td>The ID of the `items` child must never change.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-sort-time (Required)</strong></td>
-    <td>Timestamp used for sorting entries. Higher timestamps will be
-    inserted before older entries. We recommend using Unix time (the number of
-    seconds that have elapsed since Thursday, 1 January 1970).</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-update-time (Optional)</strong></td>
-    <td>Timestamp when the entry was last updated.  Use this attribute to trigger an
-    update on an existing item: the client will replace all existing content in
-    this item with the new, updated content, without triggering the appearance of
-    the update reference point. We recommend using Unix time (the number of seconds
-    that have elapsed since Thursday, 1 January 1970).</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-tombstone (Optional)</strong></td>
-    <td>If present, the entry is assumed to be deleted.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>sort (Optional)</strong></td>
-    <td>If present and has a value of "ascending" (any other value is currently
-    invalid), newer items will be inserted at the bottom of the live-list instead
-    of the top.</td>
-  </tr>
-</table>
+#### `data-update-time` (Optional)
+
+Timestamp when the entry was last updated. Use this attribute to trigger an
+update on an existing item: the client will replace all existing content in this
+item with the new, updated content, without triggering the appearance of the
+update reference point. We recommend using Unix time (the number of seconds that
+have elapsed since Thursday, 1 January 1970).
+
+#### `data-tombstone` (Optional)
+
+If present, the entry is assumed to be deleted.
+
+#### `sort` (Optional)
+
+If present and has a value of "ascending" (any other value is currently
+invalid), newer items will be inserted at the bottom of the live-list instead
+of the top.
+
+## Actions
+
+The `amp-live-list` exposes the following actions you can use
+[AMP on-syntax to trigger](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/).
+
+### `update`
+
+Updates DOM elements with new discovered updates.
 
 ## Styling
 
-On very slow connections the javascript and styles of the component
-might arrive later than when the body is unhidden (the amp-boilerplate
-style timesout) so we highly recommend adding the following styles below
-in your own `amp-custom` styles.
+On very slow connections the javascript and styles of the component might arrive
+later than when the body is unhidden (the `amp-boilerplate` style `timesout`) so
+we highly recommend adding the following styles below in your own `amp-custom`
+styles.
 
 ```css
 amp-live-list > [update] {
@@ -282,8 +394,8 @@ An `amp-live-list-item` class is added to all the children of the `items`
 reference point.
 
 All newly inserted items will also have the `amp-live-list-item-new` class
-added, and will be removed once the next set of new items are inserted on a subsequent update. You can add a
-highlighting effect like the css below.
+added, and will be removed once the next set of new items are inserted on a
+subsequent update. You can add a highlighting effect like the css below.
 
 ```css
 .amp-live-list-item-new {
@@ -301,7 +413,7 @@ highlighting effect like the css below.
 ```
 
 There is css that hides children of the `items` reference point that have the
-`data-tombstone` attribute which can be overriden by doing:
+`data-tombstone` attribute which can be overridden by doing:
 
 ```css
 amp-live-list > [items] > [data-tombstone] {
@@ -309,121 +421,10 @@ amp-live-list > [items] > [data-tombstone] {
 }
 ```
 
-An `.amp-hidden` and `.amp-active` class is added to the `update`
-reference point, and you can hook into this class to add transitions.
-(see Examples below)
-
-## Actions
-
-The `amp-live-list` exposes the following actions you can use [AMP on-syntax to trigger](https://github.com/ampproject/amphtml/blob/master/spec/amp-actions-and-events.md):
-
-<table>
-  <tr>
-    <th>Action</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td>update (default)</td>
-    <td>Updates DOM elements with new discovered updates</td>
-  </tr>
-</table>
-
-## Examples
-
-Below we have an example of multiple `amp-live-list` on a single page.
-Notice that only the first`amp-live-list` has a fixed position button,
-while the second one is inside the component with a sliding animation.
-
-The polling interval will also be 16000 and not 20000 milliseconds, as we choose
-the lowest one.
-
-```html
-<style amp-custom>
-  amp-live-list > [update] {
-    display: none;
-  }
-
-  #fixed-button {
-    position: fixed;
-    top: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .slide.amp-active {
-    overflow-y: hidden;
-    height: 100px;
-    max-height: 150px;
-    transition-property: height;
-    transition-duration: 0.2s;
-    transition-timing-function: ease-in;
-    background: #3f51b5;
-  }
-
-  .slide.amp-hidden {
-    max-height: 0;
-  }
-
-  // We need to override "display: none" to be able to see
-  // the transition effect on the 2nd live list.
-  #live-list-2 > .amp-hidden[update] {
-    display: block;
-  }
-</style>
-
-<amp-live-list
-  id="live-list-1"
-  data-poll-interval="16000"
-  data-max-items-per-page="5"
->
-  <button update id="fixed-button" class="button" on="tap:live-list-1.update">
-    new updates on live list 1
-  </button>
-  <div items>
-    <div id="live-list-1-item-2" data-sort-time="1462814963592">
-      <div class="card">
-        <div class="logo">
-          <amp-img
-            src="/examples/img/ampicon.png"
-            layout="fixed"
-            height="50"
-            width="50"
-          >
-          </amp-img>
-        </div>
-      </div>
-    </div>
-    <div id="live-list-1-item-1" data-sort-time="1462814955597">
-      <div class="card">
-        <div class="logo">
-          <amp-img
-            src="/examples/img/ampicon.png"
-            layout="fixed"
-            height="50"
-            width="50"
-          >
-          </amp-img>
-        </div>
-      </div>
-    </div>
-  </div>
-</amp-live-list>
-
-<amp-live-list
-  id="live-list-2"
-  data-poll-interval="20000"
-  data-max-items-per-page="10"
->
-  <div update class="slide" on="tap:live-list-2.update">
-    new updates on live list 2
-  </div>
-  <div items>
-    <div id="live-list-2-item-2" data-sort-time="1464281932879">world</div>
-    <div id="live-list-2-item-1" data-sort-time="1464281932878">hello</div>
-  </div>
-</amp-live-list>
-```
+An `.amp-hidden` and `.amp-active` class is added to the `update` reference
+point, and you can hook into this class to add transitions.
 
 ## Validation
 
-See [amp-live-list rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-live-list/validator-amp-live-list.protoascii) in the AMP validator specification.
+See [amp-live-list rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-live-list/validator-amp-live-list.protoascii)
+in the AMP validator specification.
diff --git a/extensions/amp-live-list/validator-amp-live-list.protoascii b/extensions/amp-live-list/validator-amp-live-list.protoascii
index abda4a5c38e99..531fc218399d2 100644
--- a/extensions/amp-live-list/validator-amp-live-list.protoascii
+++ b/extensions/amp-live-list/validator-amp-live-list.protoascii
@@ -15,7 +15,6 @@
 #
 tags: {  # amp-live-list
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   mandatory_parent: "HEAD"
   unique_warning: true
@@ -29,7 +28,6 @@ tags: {  # amp-live-list
 }
 tags: {  # <amp-live-list>
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "AMP-LIVE-LIST"
   requires_extension: "amp-live-list"
   attrs: {
@@ -71,20 +69,20 @@ tags: {  # <amp-live-list>
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "$REFERENCE_POINT"
   spec_name : "AMP-LIVE-LIST [update]"
+  descriptive_name : "amp-live-list [update]"
   attrs: {
     name: "update"
     mandatory: true
   }
-  spec_url: "https://amp.dev/documentation/components/amp-live-list#update"
+  spec_url: "https://amp.dev/documentation/components/amp-live-list/#update"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "$REFERENCE_POINT"
   spec_name: "AMP-LIVE-LIST [items]"
+  descriptive_name : "amp-live-list [items]"
   attrs: {
     name: "items"
     mandatory: true
@@ -92,24 +90,24 @@ tags: {
   reference_points: {
     tag_spec_name: "AMP-LIVE-LIST [items] item"
   }
-  spec_url: "https://amp.dev/documentation/components/amp-live-list#items"
+  spec_url: "https://amp.dev/documentation/components/amp-live-list/#items"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "$REFERENCE_POINT"
   spec_name : "AMP-LIVE-LIST [pagination]"
+  descriptive_name : "amp-live-list [pagination]"
   attrs: {
     name: "pagination"
     mandatory: true
   }
-  spec_url: "https://amp.dev/documentation/components/amp-live-list#pagination"
+  spec_url: "https://amp.dev/documentation/components/amp-live-list/#pagination"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "$REFERENCE_POINT"
   spec_name : "AMP-LIVE-LIST [items] item"
+  descriptive_name : "amp-live-list [items] item"
   attrs: {
     name: "data-sort-time"
     mandatory: true
@@ -117,5 +115,5 @@ tags: {
   attrs: { name: "data-tombstone" }
   attrs: { name: "data-update-time" }
   attr_lists: "mandatory-id-attr"
-  spec_url: "https://amp.dev/documentation/components/amp-live-list#items"
+  spec_url: "https://amp.dev/documentation/components/amp-live-list/#items"
 }
diff --git a/extensions/amp-loader/0.1/amp-loader.css b/extensions/amp-loader/0.1/amp-loader.css
index 4eb6f4192514e..b251ef3cf8026 100644
--- a/extensions/amp-loader/0.1/amp-loader.css
+++ b/extensions/amp-loader/0.1/amp-loader.css
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-
-
 /* Placeholder */
 .i-amphtml-loader-background {
   position: absolute;
@@ -26,7 +24,7 @@
   background-color: #f8f8f8;
 }
 
- /* Container and sizes */
+/* Container and sizes */
 .i-amphtml-new-loader {
   display: inline-block;
   position: absolute;
@@ -45,7 +43,7 @@
   height: 72px;
 }
 
- /* Logo */
+/* Logo */
 .i-amphtml-new-loader-logo {
   transform-origin: center;
   opacity: 0;
@@ -78,7 +76,7 @@
   display: none;
   transform-origin: center;
   opacity: 0;
-  background-color: rgba(0, 0, 0, .6);
+  background-color: rgba(0, 0, 0, 0.6);
   animation: i-amphtml-new-loader-scale-and-fade-in 0.8s ease-in forwards;
   animation-delay: 0.6s;
   animation-delay: calc(0.6s - var(--loader-delay-offset));
@@ -94,10 +92,6 @@
   margin: 12px;
 }
 
-.i-amphtml-new-loader-has-shim {
-  color: #fff !important;
-}
-
 .i-amphtml-new-loader-has-shim .i-amphtml-new-loader-shim {
   display: initial;
 }
@@ -107,7 +101,7 @@
 }
 
 .i-amphtml-new-loader-has-shim .i-amphtml-new-loader-transparent-on-shim {
- /*
+  /*
   * The shim sets the color to white above, for anything using currentColor.
   * Other parts can specify that they want to be transparent while the shim is
   * present using the `i-amphtml-new-loader-transparent-on-shim` class.
@@ -141,27 +135,24 @@
 }
 
 .i-amphtml-new-loader-spinner-path {
-  animation:
-    frame-position-first-spin 0.6s steps(30),
+  animation: frame-position-first-spin 0.6s steps(30),
     frame-position-infinite-spin 1.2s steps(59) infinite;
   animation-delay: 2.8s, 3.4s;
-  animation-delay:
-      calc(2.8s - var(--loader-delay-offset)),
-      calc(3.4s - var(--loader-delay-offset));
+  animation-delay: calc(2.8s - var(--loader-delay-offset)),
+    calc(3.4s - var(--loader-delay-offset));
 }
 
 .i-amphtml-new-loader-size-small .i-amphtml-new-loader-spinner {
   /** Scale down the spinner to a 12px radius, default is 22. */
-  transform: scale(calc(12/ 22));
+  transform: scale(calc(12 / 22));
   /** Increase the stroke-width to counteract the scaling. */
   stroke-width: calc(1.5px * 22 / 12);
 }
 
 .i-amphtml-new-loader-size-small .i-amphtml-new-loader-spinner-path {
   animation-delay: 1.4s, 2s;
-  animation-delay:
-      calc(1.4s - var(--loader-delay-offset)),
-      calc(2s - var(--loader-delay-offset));
+  animation-delay: calc(1.4s - var(--loader-delay-offset)),
+    calc(2s - var(--loader-delay-offset));
 }
 
 /* Animations only run when active */
@@ -187,7 +178,7 @@
    * Make sure inherited font properties or those set via other selectors do
    * not impact rendering of the label.
    */
-  all: initial !important; 
+  all: initial !important;
   display: inline-block !important;
   padding: 0 0.4ch !important;
   border: 1px solid currentColor !important;
@@ -196,6 +187,7 @@
   font-size: 11px !important;
   font-family: sans-serif !important;
   line-height: 1.1 !important;
+  visibility: inherit !important;
 }
 
 @keyframes i-amphtml-new-loader-fade-in {
diff --git a/extensions/amp-loader/0.1/amp-loader.js b/extensions/amp-loader/0.1/amp-loader.js
index 900ec19525baa..65b8cec99c875 100644
--- a/extensions/amp-loader/0.1/amp-loader.js
+++ b/extensions/amp-loader/0.1/amp-loader.js
@@ -321,9 +321,7 @@ class LoaderBuilder {
     const html = htmlFor(this.element_);
     return html`
       <div class="i-amphtml-new-loader-ad-logo">
-        <span class="i-amphtml-new-loader-ad-label">
-          Ad
-        </span>
+        <span class="i-amphtml-new-loader-ad-label"> Ad </span>
       </div>
     `;
   }
diff --git a/extensions/amp-loader/OWNERS b/extensions/amp-loader/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-loader/OWNERS
+++ b/extensions/amp-loader/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-mathml/0.1/amp-mathml.js b/extensions/amp-mathml/0.1/amp-mathml.js
index b26cad76239b1..795f51273e2e9 100644
--- a/extensions/amp-mathml/0.1/amp-mathml.js
+++ b/extensions/amp-mathml/0.1/amp-mathml.js
@@ -67,6 +67,7 @@ export class AmpMathml extends AMP.BaseElement {
    */
   layoutCallback() {
     const iframe = getIframe(this.win, this.element, 'mathml');
+    iframe.title = this.element.title || 'MathML formula';
     this.applyFillContent(iframe);
     // Triggered by context.updateDimensions() inside the iframe.
     listenFor(
diff --git a/extensions/amp-mathml/0.1/test/test-amp-mathml.js b/extensions/amp-mathml/0.1/test/test-amp-mathml.js
new file mode 100644
index 0000000000000..96700ab1b8937
--- /dev/null
+++ b/extensions/amp-mathml/0.1/test/test-amp-mathml.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import '../amp-mathml';
+
+describes.realWin(
+  'amp-mathml',
+  {
+    amp: {
+      extensions: ['amp-mathml'],
+      canonicalUrl: 'https://foo.bar/baz',
+    },
+  },
+  (env) => {
+    let win, doc;
+    const title = 'My MathML formula';
+
+    beforeEach(() => {
+      win = env.win;
+      doc = win.document;
+    });
+
+    async function getAmpMathml() {
+      const ampMathml = doc.createElement('amp-mathml');
+      ampMathml.setAttribute('layout', 'container');
+      ampMathml.setAttribute(
+        'data-formula',
+        '[x = {-b pm sqrt{b^2-4ac} over 2a}.]'
+      );
+      ampMathml.setAttribute('title', title);
+      doc.body.appendChild(ampMathml);
+      await ampMathml.buildInternal();
+      await ampMathml.layoutCallback();
+      return ampMathml;
+    }
+
+    it('renders iframe with title', async () => {
+      const ampMathml = await getAmpMathml();
+      const iframe = ampMathml.firstChild;
+      expect(iframe).to.not.be.null;
+      expect(iframe.title).to.equal(title);
+    });
+
+    it('removes iframe on unlayout', async () => {
+      const ampMathml = await getAmpMathml();
+      const iframe = ampMathml.firstChild;
+      expect(iframe).to.not.be.null;
+      ampMathml.unlayoutCallback();
+      expect(ampMathml.querySelector('iframe')).to.be.null;
+    });
+  }
+);
diff --git a/extensions/amp-mathml/OWNERS b/extensions/amp-mathml/OWNERS
index 6274c040820bf..92b33c8370b85 100644
--- a/extensions/amp-mathml/OWNERS
+++ b/extensions/amp-mathml/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-mathml/amp-mathml.md b/extensions/amp-mathml/amp-mathml.md
index affe3d55f5b65..13dd7ce74eb51 100644
--- a/extensions/amp-mathml/amp-mathml.md
+++ b/extensions/amp-mathml/amp-mathml.md
@@ -24,11 +24,11 @@ limitations under the License.
 
 # amp-mathml
 
-## Behavior
+## Usage
 
-This extension creates an iframe and renders a MathML formula.
+Renders a MathML formula in an iframe.
 
-#### Example: The Quadratic Formula
+The example below displays the quadratic formula:
 
 ```html
 <amp-mathml
@@ -38,7 +38,7 @@ This extension creates an iframe and renders a MathML formula.
 </amp-mathml>
 ```
 
-#### Example: Cauchy's Integral Formula
+The example below displays Cauchy's integral formula:
 
 ```html
 <amp-mathml
@@ -48,7 +48,7 @@ This extension creates an iframe and renders a MathML formula.
 </amp-mathml>
 ```
 
-#### Example: Double angle formula for Cosines
+The example below displays a double angle formula for cosines:
 
 ```html
 <amp-mathml
@@ -58,20 +58,24 @@ This extension creates an iframe and renders a MathML formula.
 </amp-mathml>
 ```
 
-#### Example: Inline formula
+### Inline formula
 
 This is an example of a formula of `` <amp-mathml layout="container" inline data-formula="`x`"></amp-mathml> ``, `<amp-mathml layout="container" inline data-formula="\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)"></amp-mathml>` placed inline in the middle of a block of text. `<amp-mathml layout="container" inline data-formula="\( \cos(θ+φ) \)"></amp-mathml>` This shows how the formula will fit inside a block of text and can be styled with CSS.
 
 ## Attributes
 
-##### data-formula (required)
+### data-formula (required)
 
 Specifies the formula to render.
 
-##### inline (optional)
+### inline (optional)
 
 If specified, the component renders inline (`inline-block` in CSS).
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"MathML formula"`.
+
 ## Validation
 
-See [amp-mathml rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-mathml/validator-amp-mathml.protoascii) in the AMP validator specification.
+See [amp-mathml rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-mathml/validator-amp-mathml.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-mega-menu/0.1/amp-mega-menu.js b/extensions/amp-mega-menu/0.1/amp-mega-menu.js
index a51ceb4ca4f22..9b7541d20a46f 100644
--- a/extensions/amp-mega-menu/0.1/amp-mega-menu.js
+++ b/extensions/amp-mega-menu/0.1/amp-mega-menu.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../../src/amp-events';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {CSS} from '../../../build/amp-mega-menu-0.1.css';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Layout} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {
@@ -29,9 +29,9 @@ import {
   tryFocus,
 } from '../../../src/dom';
 import {dev, userAssert} from '../../../src/log';
-import {mod} from '../../../src/utils/math';
+import {mod} from '../../../src/core/math';
 import {setModalAsClosed, setModalAsOpen} from '../../../src/modal';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
 
 /** @const {string} */
 const TAG = 'amp-mega-menu';
@@ -45,6 +45,11 @@ const ARIA_LABEL_CLOSE = 'Close the menu';
  * template rendering via dynamically fetched data.
  */
 export class AmpMegaMenu extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -88,11 +93,6 @@ export class AmpMegaMenu extends AMP.BaseElement {
     return layout === Layout.FIXED_HEIGHT;
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   buildCallback() {
     this.action_ = Services.actionServiceForDoc(this.element);
diff --git a/extensions/amp-mega-menu/0.1/test/test-amp-mega-menu.js b/extensions/amp-mega-menu/0.1/test/test-amp-mega-menu.js
index 86e6dc773bc4d..17a055f9f4011 100644
--- a/extensions/amp-mega-menu/0.1/test/test-amp-mega-menu.js
+++ b/extensions/amp-mega-menu/0.1/test/test-amp-mega-menu.js
@@ -15,7 +15,7 @@
  */
 
 import '../amp-mega-menu';
-import {Keys} from '../../../../src/utils/key-codes';
+import {Keys} from '../../../../src/core/constants/key-codes';
 import {htmlFor} from '../../../../src/static-template';
 import {tryFocus} from '../../../../src/dom';
 
@@ -63,14 +63,14 @@ describes.realWin(
     }
 
     it('should create a single mask element in DOM', async () => {
-      await element.build();
+      await element.buildInternal();
       await element.layoutCallback();
       const maskClass = '.i-amphtml-mega-menu-mask';
       expect(doc.querySelectorAll(maskClass).length).to.equal(1);
     });
 
     it('should add correct classes for each menu item, heading and content', async () => {
-      await element.build();
+      await element.buildInternal();
       await element.layoutCallback();
       const itemClass = '.i-amphtml-mega-menu-item';
       expect(element.querySelectorAll(itemClass).length).to.equal(3);
@@ -81,7 +81,7 @@ describes.realWin(
     });
 
     it('should expand when heading of a collapsed menu item is clicked', async () => {
-      await element.build();
+      await element.buildInternal();
       await element.layoutCallback();
       const heading = doc.getElementById('heading1');
       expect(heading.parentNode.hasAttribute('open')).to.be.false;
@@ -93,10 +93,11 @@ describes.realWin(
     });
 
     it('should collapse when heading of a expanded menu item is clicked', async () => {
-      await element.build();
+      await element.buildInternal();
       await element.layoutCallback();
+      const impl = await element.getImpl(false);
       const heading = doc.getElementById('heading1');
-      element.implementation_.expand_(heading.parentNode);
+      impl.expand_(heading.parentNode);
       expect(heading.parentNode.hasAttribute('open')).to.be.true;
       expect(heading.getAttribute('aria-expanded')).to.equal('true');
       const clickEvent = new Event('click');
@@ -106,11 +107,12 @@ describes.realWin(
     });
 
     it('should collapse an expanded menu item when another heading is clicked', async () => {
-      await element.build();
+      await element.buildInternal();
       await element.layoutCallback();
+      const impl = await element.getImpl(false);
       const heading1 = doc.getElementById('heading1');
       const heading2 = doc.getElementById('heading2');
-      element.implementation_.expand_(heading1.parentNode);
+      impl.expand_(heading1.parentNode);
       expect(heading1.parentNode.hasAttribute('open')).to.be.true;
       expect(heading1.getAttribute('aria-expanded')).to.equal('true');
       const clickEvent = new Event('click');
@@ -122,10 +124,11 @@ describes.realWin(
     });
 
     it('should collapse any expanded item after clicking outside the component', async () => {
-      await element.build();
+      await element.buildInternal();
       await element.layoutCallback();
+      const impl = await element.getImpl(false);
       const heading = doc.getElementById('heading1');
-      element.implementation_.expand_(heading.parentNode);
+      impl.expand_(heading.parentNode);
       expect(heading.parentNode.hasAttribute('open')).to.be.true;
       expect(heading.getAttribute('aria-expanded')).to.equal('true');
       const clickEvent = new Event('click');
@@ -135,11 +138,12 @@ describes.realWin(
     });
 
     it('should not collapse when click is inside the expanded content', async () => {
-      await element.build();
+      await element.buildInternal();
       await element.layoutCallback();
+      const impl = await element.getImpl(false);
       const heading = doc.getElementById('heading1');
       const content = doc.getElementById('content1');
-      element.implementation_.expand_(heading.parentNode);
+      impl.expand_(heading.parentNode);
       expect(heading.parentNode.hasAttribute('open')).to.be.true;
       expect(heading.getAttribute('aria-expanded')).to.equal('true');
       const clickEvent = new Event('click');
@@ -149,10 +153,11 @@ describes.realWin(
     });
 
     it('should collapse any expanded item on component unlayout', async () => {
-      await element.build();
+      await element.buildInternal();
       await element.layoutCallback();
+      const impl = await element.getImpl(false);
       const heading = doc.getElementById('heading1');
-      element.implementation_.expand_(heading.parentNode);
+      impl.expand_(heading.parentNode);
       expect(heading.parentNode.hasAttribute('open')).to.be.true;
       expect(heading.getAttribute('aria-expanded')).to.equal('true');
       await element.unlayoutCallback();
@@ -161,10 +166,11 @@ describes.realWin(
     });
 
     it('should collapse when ESC key is pressed', async () => {
-      await element.build();
+      await element.buildInternal();
       await element.layoutCallback();
+      const impl = await element.getImpl(false);
       const heading = doc.getElementById('heading1');
-      element.implementation_.expand_(heading.parentNode);
+      impl.expand_(heading.parentNode);
       expect(heading.parentNode.hasAttribute('open')).to.be.true;
       expect(heading.getAttribute('aria-expanded')).to.equal('true');
       const escKey = new KeyboardEvent('keydown', {key: Keys.ESCAPE});
@@ -174,7 +180,7 @@ describes.realWin(
     });
 
     it('should be navigable by left/right arrow keys when a heading has focus', async () => {
-      await element.build();
+      await element.buildInternal();
       await element.layoutCallback();
       const heading1 = doc.getElementById('heading1');
       const heading2 = doc.getElementById('heading2');
@@ -194,10 +200,10 @@ describes.realWin(
     });
 
     it('should remove event listeners on root element when menu is closed', async () => {
-      await element.build();
+      await element.buildInternal();
       await element.layoutCallback();
       await element.unlayoutCallback();
-      const impl = element.implementation_;
+      const impl = await element.getImpl(false);
       const clickEvent = new Event('click');
       const rootClickSpy = env.sandbox.spy(impl, 'handleRootClick_');
       doc.documentElement.dispatchEvent(clickEvent);
diff --git a/extensions/amp-mega-menu/0.1/test/validator-amp-mega-menu-error.out b/extensions/amp-mega-menu/0.1/test/validator-amp-mega-menu-error.out
index 9e7f8321068da..006769c568343 100644
--- a/extensions/amp-mega-menu/0.1/test/validator-amp-mega-menu-error.out
+++ b/extensions/amp-mega-menu/0.1/test/validator-amp-mega-menu-error.out
@@ -33,20 +33,20 @@ FAIL
 |    <amp-mega-menu layout="fixed-height" height="80">
 |      <nav>
 >>     ^~~~~~~~~
-amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:33:4 Tag 'AMP-MEGA-MENU > NAV' must have 1 child tags - saw 2 child tags.
+amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:33:4 Tag 'amp-mega-menu > nav' must have 1 child tags - saw 2 child tags.
 |        <!-- nav cannot contain more than one child, which must be ul/ol -->
 |        <div></div>
 >>       ^~~~~~~~~
-amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:35:6 Tag 'div' is disallowed as child of tag 'AMP-MEGA-MENU > NAV'. Child tag must be one of ['ol', 'ul'].
+amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:35:6 Tag 'div' is disallowed as child of tag 'amp-mega-menu > nav'. Child tag must be one of ['ol', 'ul'].
 |        <ul>
 |          <!-- ul/ol cannot have elements other than li as children -->
 |          <div></div>
 >>         ^~~~~~~~~
-amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:38:8 Tag 'div' is disallowed as child of tag 'AMP-MEGA-MENU NAV > UL/OL'. Child tag must be one of ['li'].
+amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:38:8 Tag 'div' is disallowed as child of tag 'amp-mega-menu nav > ul/ol'. Child tag must be one of ['li'].
 |          <!-- menu items must have at least one child -->
 |          <li></li>
 >>         ^~~~~~~~~
-amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:40:8 Tag 'AMP-MEGA-MENU NAV > UL/OL > LI' must have a minimum of 1 child tags - saw 0 child tags.
+amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:40:8 Tag 'amp-mega-menu nav > ul/ol > li' must have a minimum of 1 child tags - saw 0 child tags.
 >>         ^~~~~~~~~
 amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:40:8 The mandatory reference point 'AMP-MEGA-MENU item-heading' for 'AMP-MEGA-MENU NAV > UL/OL > LI' is missing.
 |          <!-- menu item cannot have multiple children unless one has role="dialog" -->
@@ -84,14 +84,14 @@ amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:59:10 The tag 'div', a
 |    <amp-mega-menu layout="fixed-height" height="80">
 |      <div></div>
 >>     ^~~~~~~~~
-amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:66:4 Tag 'div' is disallowed as child of tag 'amp-mega-menu'. Child tag must be one of ['nav', 'amp-list']. (see https://amp.dev/documentation/components/amp-mega-menu)
+amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:66:4 Tag 'div' is disallowed as child of tag 'amp-mega-menu'. Child tag must be one of ['nav', 'amp-list']. (see https://amp.dev/documentation/components/amp-mega-menu/)
 |    </amp-mega-menu>
 |    <!-- amp-list under amp-mega-menu must contain a template -->
 |    <amp-mega-menu layout="fixed-height" height="80">
 |      <amp-list layout="fill" src=".">
 |        <div></div>
 >>       ^~~~~~~~~
-amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:71:6 Tag 'div' is disallowed as child of tag 'AMP-MEGA-MENU > AMP-LIST'. Child tag must be one of ['template'].
+amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:71:6 Tag 'div' is disallowed as child of tag 'amp-mega-menu > amp-list'. Child tag must be one of ['template'].
 |      </amp-list>
 |    </amp-mega-menu>
 |    <!-- template must contain a nav element -->
@@ -100,9 +100,9 @@ amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:71:6 Tag 'div' is disa
 |        <template type="amp-mustache">
 |          <div></div>
 >>         ^~~~~~~~~
-amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:78:8 Tag 'div' is disallowed as child of tag 'AMP-MEGA-MENU > AMP-LIST > TEMPLATE'. Child tag must be one of ['nav'].
+amp-mega-menu/0.1/test/validator-amp-mega-menu-error.html:78:8 Tag 'div' is disallowed as child of tag 'amp-mega-menu > amp-list > template'. Child tag must be one of ['nav'].
 |        </template>
 |      </amp-list>
 |    </amp-mega-menu>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-mega-menu/0.1/test/validator-amp-mega-menu.out b/extensions/amp-mega-menu/0.1/test/validator-amp-mega-menu.out
index cc28792a140e9..5c3ee801e4d60 100644
--- a/extensions/amp-mega-menu/0.1/test/validator-amp-mega-menu.out
+++ b/extensions/amp-mega-menu/0.1/test/validator-amp-mega-menu.out
@@ -67,4 +67,4 @@ PASS
 |      </amp-list>
 |    </amp-mega-menu>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-mega-menu/OWNERS b/extensions/amp-mega-menu/OWNERS
index 64f755dcecad3..89cbf7fb85aea 100644
--- a/extensions/amp-mega-menu/OWNERS
+++ b/extensions/amp-mega-menu/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'leafsy'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'leafsy'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-mega-menu/amp-mega-menu.md b/extensions/amp-mega-menu/amp-mega-menu.md
index b30b32b65081b..308a262501fbe 100644
--- a/extensions/amp-mega-menu/amp-mega-menu.md
+++ b/extensions/amp-mega-menu/amp-mega-menu.md
@@ -25,14 +25,12 @@ limitations under the License.
 
 # amp-mega-menu
 
-Horizontal navigation bar with menu items that open/close content containers on click.
+## Usage
 
-## Overview
+Displays a horizontal navigation bar with menu items that open/close content containers on click.
 
 `<amp-mega-menu>` provides a way to organize and display large collections of navigational content at the top of an AMP page. The component is intended primarily for desktop and tablet use cases, and it can be used jointly with [`<amp-sidebar>`](../amp-sidebar/0.1/amp-sidebar.md) to create a responsive menu.
 
-## Usage
-
 The `<amp-mega-menu>` component includes a single `<nav>` element containing either a `<ul>` or `<ol>`, where each `<li>` element is a menu item.
 
 [tip type="note"]
@@ -41,11 +39,11 @@ The `<nav>` element must be parented by either the `<amp-mega-menu>` component o
 
 Each menu item can contain any of the following tags as direct children:
 
-- `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`
-- `<a>`
-- `<button>`
-- `<span>`
-- `<div>`
+-   `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`
+-   `<a>`
+-   `<button>`
+-   `<span>`
+-   `<div>`
 
 ### Toggleable dropdowns
 
@@ -58,13 +56,13 @@ A mask will cover the rest of the page when a dropdown is open. Content, such as
 
 Each dropdown may contain any of the following AMP elements:
 
-- `<amp-ad>`
-- `<amp-carousel>`
-- `<amp-form>`
-- `<amp-img>`
-- `<amp-lightbox>`
-- `<amp-list>`
-- `<amp-video>`
+-   `<amp-ad>`
+-   `<amp-carousel>`
+-   `<amp-form>`
+-   `<amp-img>`
+-   `<amp-lightbox>`
+-   `<amp-list>`
+-   `<amp-video>`
 
 The example below demonstrates an `<amp-mega-menu>` with three menu items. The first two are toggleable and the third is an external link.
 
@@ -247,30 +245,27 @@ The example below hides `<amp-mega-menu>` when the viewport width is less than 5
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>data-close-button-aria-label (optional)</strong></td>
-    <td>Optional attribute used to set ARIA label for the close buttons added for accessibility.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+### data-close-button-aria-label (optional)
+
+Optional attribute used to set ARIA label for the close buttons added for accessibility.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
 
 ## Styling
 
 The `<amp-mega-menu>` component can be styled with standard CSS.
 
-- The `<nav>` element and dropdown elements have a default white background.
-- When open, the dropdown containers will fill the entire viewport width. This can be overridden with the left and width properties.
-- Expanding a menu item applies the `open` attribute to the `<amp-mega-menu>` component as well as the expanded `<li>` element.
+-   The `<nav>` element and dropdown elements have a default white background.
+-   When open, the dropdown containers will fill the entire viewport width. This can be overridden with the left and width properties.
+-   Expanding a menu item applies the `open` attribute to the `<amp-mega-menu>` component as well as the expanded `<li>` element.
 
 The example below customizes:
 
-- The background color of the navigation bar.
-- The appearance of opened menu buttons.
-- The position of the dropdown containers.
+-   The background color of the navigation bar.
+-   The appearance of opened menu buttons.
+-   The position of the dropdown containers.
 
 [example playground="true" preview="top-frame" orientation="landscape"]
 
@@ -354,17 +349,17 @@ In addition, to assist screen reader users, an invisible but tabbable close butt
 
 Keyboard support for the component includes:
 
-- Left/right arrow keys to navigate between menu items when focused.
-- Enter/Space keys to trigger an active menu item button.
-- Esc key to collapse the mega menu.
+-   Left/right arrow keys to navigate between menu items when focused.
+-   Enter/Space keys to trigger an active menu item button.
+-   Esc key to collapse the mega menu.
 
 Open on hover is not currently supported by `<amp-mega-menu>` due to UX and accessibility concerns. In particular, we want to avoid scenarios where:
 
-- A user moves cursor over a button that toggles the dropdown menu and clicks, which immediately closes the dropdown after opening it on hover.
-- A user wants to click on an element below a closed dropdown but accidentally opens it on hover and clicks inside the dropdown instead.
+-   A user moves cursor over a button that toggles the dropdown menu and clicks, which immediately closes the dropdown after opening it on hover.
+-   A user wants to click on an element below a closed dropdown but accidentally opens it on hover and clicks inside the dropdown instead.
 
 More information on this topic can be found in the [Accessibility Developer Guide](https://www.accessibility-developer-guide.com/examples/widgets/dropdown/).
 
 ## Validation
 
-See [amp-mega-menu rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-mega-menu/validator-amp-mega-menu.protoascii) in the AMP validator specification.
+See [amp-mega-menu rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-mega-menu/validator-amp-mega-menu.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-mega-menu/validator-amp-mega-menu.protoascii b/extensions/amp-mega-menu/validator-amp-mega-menu.protoascii
index cb3900c3ac43f..0aba0d19b8254 100644
--- a/extensions/amp-mega-menu/validator-amp-mega-menu.protoascii
+++ b/extensions/amp-mega-menu/validator-amp-mega-menu.protoascii
@@ -28,7 +28,7 @@ tags: {  # <amp-mega-menu>
   tag_name: "AMP-MEGA-MENU"
   requires_extension: "amp-mega-menu"
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-mega-menu"
+  spec_url: "https://amp.dev/documentation/components/amp-mega-menu/"
   descendant_tag_list: "amp-mega-menu-allowed-descendants"
   # We want to support both of the cases below:
   # <amp-mega-menu> > <nav> > ... and
@@ -53,6 +53,7 @@ tags: {  # <amp-mega-menu> <nav>
   html_format: AMP
   tag_name: "$REFERENCE_POINT"
   spec_name: "AMP-MEGA-MENU > NAV"
+  descriptive_name: "amp-mega-menu > nav"
   siblings_disallowed: true
   child_tags: {
     mandatory_num_child_tags: 1
@@ -67,6 +68,7 @@ tags: {
   html_format: AMP
   tag_name: "$REFERENCE_POINT"
   spec_name: "AMP-MEGA-MENU > AMP-LIST"
+  descriptive_name: "amp-mega-menu > amp-list"
   # Include mandatory amp-list attrs so that <amp-mega-menu> > <nav>
   # does not match to this tag.
   attrs: {
@@ -89,6 +91,7 @@ tags: {
   html_format: AMP
   tag_name: "$REFERENCE_POINT"
   spec_name: "AMP-MEGA-MENU > AMP-LIST > TEMPLATE"
+  descriptive_name: "amp-mega-menu > amp-list > template"
   mandatory_parent: "AMP-LIST"
   child_tags: {
     mandatory_num_child_tags: 1
@@ -102,6 +105,7 @@ tags: {
   html_format: AMP
   tag_name: "$REFERENCE_POINT"
   spec_name: "AMP-MEGA-MENU NAV > UL/OL"
+  descriptive_name: "amp-mega-menu nav > ul/ol"
   mandatory_parent: "NAV"
   child_tags: {
     mandatory_min_num_child_tags: 1
@@ -115,6 +119,7 @@ tags: {
   html_format: AMP
   tag_name: "$REFERENCE_POINT"
   spec_name: "AMP-MEGA-MENU NAV > UL/OL > LI"
+  descriptive_name: "amp-mega-menu nav > ul/ol > li"
   child_tags: {
     mandatory_min_num_child_tags: 1
     child_tag_name_oneof: "A"
@@ -142,6 +147,7 @@ tags: {
   html_format: AMP
   tag_name: "$REFERENCE_POINT"
   spec_name: "AMP-MEGA-MENU item-heading"
+  descriptive_name: "amp-mega-menu item-heading"
   attrs: {
     name: "role"
     value: "button"
@@ -151,6 +157,7 @@ tags: {
   html_format: AMP
   tag_name: "$REFERENCE_POINT"
   spec_name: "AMP-MEGA-MENU item-content"
+  descriptive_name: "amp-mega-menu item-content"
   # Disallow role=menu until supported by implementation.
   attrs: {
     name: "role"
@@ -196,6 +203,7 @@ descendant_tag_list {
   tag: "P"
   tag: "PATH"
   tag: "SECTION"
+  tag: "SELECT"
   tag: "SPAN"
   tag: "STRIKE"
   tag: "STRONG"
@@ -212,4 +220,5 @@ descendant_tag_list {
   tag: "TR"
   tag: "U"
   tag: "UL"
+  tag: "USE"
 }
diff --git a/extensions/amp-megaphone/0.1/amp-megaphone.js b/extensions/amp-megaphone/0.1/amp-megaphone.js
index f6475eaee83f4..a2e4736af10ff 100644
--- a/extensions/amp-megaphone/0.1/amp-megaphone.js
+++ b/extensions/amp-megaphone/0.1/amp-megaphone.js
@@ -27,16 +27,16 @@
  * </amp-megaphone>
  */
 
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {addParamsToUrl} from '../../../src/url';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getData, listen} from '../../../src/event-helper';
 import {isLayoutSizeFixed} from '../../../src/layout';
-import {isObject} from '../../../src/types';
+import {isObject} from '../../../src/core/types';
 import {removeElement} from '../../../src/dom';
 import {setIsMediaComponent} from '../../../src/video-interface';
-import {startsWith} from '../../../src/string';
-import {tryParseJson} from '../../../src/json';
+import {tryParseJson} from '../../../src/core/types/object/json';
 import {userAssert} from '../../../src/log';
 
 class AmpMegaphone extends AMP.BaseElement {
@@ -55,6 +55,9 @@ class AmpMegaphone extends AMP.BaseElement {
 
     /** @private {string} */
     this.baseUrl_ = '';
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -111,6 +114,8 @@ class AmpMegaphone extends AMP.BaseElement {
 
     this.iframe_ = iframe;
 
+    this.pauseHelper_.updatePlaying(true);
+
     return this.loadPromise(iframe);
   }
 
@@ -123,6 +128,7 @@ class AmpMegaphone extends AMP.BaseElement {
     if (this.unlistenMessage_) {
       this.unlistenMessage_();
     }
+    this.pauseHelper_.updatePlaying(false);
     return true; // Call layoutCallback again.
   }
 
@@ -186,8 +192,7 @@ class AmpMegaphone extends AMP.BaseElement {
     if (
       !eventData ||
       !(
-        isObject(eventData) ||
-        startsWith(/** @type {string} */ (eventData), '{')
+        isObject(eventData) || /** @type {string} */ (eventData).startsWith('{')
       )
     ) {
       return;
@@ -206,6 +211,9 @@ class AmpMegaphone extends AMP.BaseElement {
         JSON.stringify(dict({'method': 'pause'})),
         this.baseUrl_
       );
+
+      // The player doesn't appear to respect `{method: pause}` message.
+      this.iframe_.src = this.iframe_.src;
     }
   }
 }
diff --git a/extensions/amp-megaphone/0.1/test/test-amp-megaphone.js b/extensions/amp-megaphone/0.1/test/test-amp-megaphone.js
index 7af757da2428d..a63d6c60c6cc2 100644
--- a/extensions/amp-megaphone/0.1/test/test-amp-megaphone.js
+++ b/extensions/amp-megaphone/0.1/test/test-amp-megaphone.js
@@ -56,7 +56,7 @@ describes.realWin(
       }
 
       container.appendChild(mpplayer);
-      await mpplayer.build();
+      await mpplayer.buildInternal();
       await mpplayer.layoutCallback();
       return mpplayer;
     }
diff --git a/extensions/amp-megaphone/0.1/test/validator-amp-megaphone.html b/extensions/amp-megaphone/0.1/test/validator-amp-megaphone.html
index 3348a982ba280..0646440bf4c6e 100644
--- a/extensions/amp-megaphone/0.1/test/validator-amp-megaphone.html
+++ b/extensions/amp-megaphone/0.1/test/validator-amp-megaphone.html
@@ -23,7 +23,6 @@
     <meta charset="utf-8">
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <script async custom-element="amp-megaphone" src="https://cdn.ampproject.org/v0/amp-megaphone-0.1.js"></script>
      <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -65,7 +64,7 @@
   <!-- valid: playlist with sharing buttons -->
   <amp-megaphone height=166 data-playlist="DEM6640968282" data-sharing
                   layout="fixed-height"></amp-megaphone>
-  
+
   <!-- Broken tests (until validator supports dynamic exclusion of attributes) -->
 
   <!-- invalid: both episode and playlist specified-->
diff --git a/extensions/amp-megaphone/0.1/test/validator-amp-megaphone.out b/extensions/amp-megaphone/0.1/test/validator-amp-megaphone.out
index b2c618cc7df32..1597a9fd5ed02 100644
--- a/extensions/amp-megaphone/0.1/test/validator-amp-megaphone.out
+++ b/extensions/amp-megaphone/0.1/test/validator-amp-megaphone.out
@@ -24,7 +24,6 @@ FAIL
 |      <meta charset="utf-8">
 |      <link rel="canonical" href="amps.html">
 |      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|      <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |      <script async custom-element="amp-megaphone" src="https://cdn.ampproject.org/v0/amp-megaphone-0.1.js"></script>
 |       <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>
 |      <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -48,22 +47,22 @@ FAIL
 |    <!-- invalid: bad start time -->
 |    <amp-megaphone height=166 data-episode="OSC7749686951" data-start="300s"
 >>   ^~~~~~~~~
-amp-megaphone/0.1/test/validator-amp-megaphone.html:48:2 The attribute 'data-start' in tag 'amp-megaphone [data-episode]' is set to the invalid value '300s'. (see https://amp.dev/documentation/components/amp-megaphone)
+amp-megaphone/0.1/test/validator-amp-megaphone.html:47:2 The attribute 'data-start' in tag 'amp-megaphone' is set to the invalid value '300s'. (see https://amp.dev/documentation/components/amp-megaphone)
 |                    layout="fixed-height"></amp-megaphone>
 |    <!-- invalid: bad episode id-->
 |    <amp-megaphone height=166 data-episode="mahler_number_6.ogg"
 >>   ^~~~~~~~~
-amp-megaphone/0.1/test/validator-amp-megaphone.html:51:2 The attribute 'data-episode' in tag 'amp-megaphone [data-episode]' is set to the invalid value 'mahler_number_6.ogg'. (see https://amp.dev/documentation/components/amp-megaphone)
+amp-megaphone/0.1/test/validator-amp-megaphone.html:50:2 The attribute 'data-episode' in tag 'amp-megaphone' is set to the invalid value 'mahler_number_6.ogg'. (see https://amp.dev/documentation/components/amp-megaphone)
 |                    layout="fixed-height"></amp-megaphone>
 |    <!-- invalid: responsive layout -->
 |    <amp-megaphone height=166 width=42 data-episode="OSC7749686951"
 >>   ^~~~~~~~~
-amp-megaphone/0.1/test/validator-amp-megaphone.html:54:2 The specified layout 'RESPONSIVE' is not supported by tag 'amp-megaphone [data-episode]'. (see https://amp.dev/documentation/components/amp-megaphone)
+amp-megaphone/0.1/test/validator-amp-megaphone.html:53:2 The specified layout 'RESPONSIVE' is not supported by tag 'amp-megaphone'. (see https://amp.dev/documentation/components/amp-megaphone)
 |                    layout="responsive"></amp-megaphone>
 |    <!-- invalid: intrinsic layout -->
 |    <amp-megaphone height=166 width=42 data-episode="OSC7749686951"
 >>   ^~~~~~~~~
-amp-megaphone/0.1/test/validator-amp-megaphone.html:57:2 The specified layout 'INTRINSIC' is not supported by tag 'amp-megaphone [data-episode]'. (see https://amp.dev/documentation/components/amp-megaphone)
+amp-megaphone/0.1/test/validator-amp-megaphone.html:56:2 The specified layout 'INTRINSIC' is not supported by tag 'amp-megaphone'. (see https://amp.dev/documentation/components/amp-megaphone)
 |                    layout="intrinsic"></amp-megaphone>
 |    <!-- valid: fixed layout -->
 |    <amp-megaphone height=166 width=42 data-episode="OSC7749686951"
@@ -74,7 +73,7 @@ amp-megaphone/0.1/test/validator-amp-megaphone.html:57:2 The specified layout 'I
 |    <!-- valid: playlist with sharing buttons -->
 |    <amp-megaphone height=166 data-playlist="DEM6640968282" data-sharing
 |                    layout="fixed-height"></amp-megaphone>
-|    
+|
 |    <!-- Broken tests (until validator supports dynamic exclusion of attributes) -->
 |
 |    <!-- invalid: both episode and playlist specified-->
diff --git a/extensions/amp-megaphone/OWNERS b/extensions/amp-megaphone/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-megaphone/OWNERS
+++ b/extensions/amp-megaphone/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-megaphone/amp-megaphone.md b/extensions/amp-megaphone/amp-megaphone.md
index 0da7491bec0e1..994d950808920 100644
--- a/extensions/amp-megaphone/amp-megaphone.md
+++ b/extensions/amp-megaphone/amp-megaphone.md
@@ -91,4 +91,4 @@ The value for this attribute is the Megaphone.fm ID of a playlist.</td>
 
 ## Validation
 
-See [amp-megaphone rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-megaphone/validator-amp-megaphone.protoascii) in the AMP validator specification.
+See [amp-megaphone rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-megaphone/validator-amp-megaphone.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-minute-media-player/0.1/amp-minute-media-player.js b/extensions/amp-minute-media-player/0.1/amp-minute-media-player.js
index bdfa304f0a8bc..8a048be884b52 100644
--- a/extensions/amp-minute-media-player/0.1/amp-minute-media-player.js
+++ b/extensions/amp-minute-media-player/0.1/amp-minute-media-player.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Layout, isLayoutSizeDefined} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
@@ -28,8 +28,9 @@ import {
   redispatch,
 } from '../../../src/iframe-video';
 import {dev, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {
+  dispatchCustomEvent,
   fullscreenEnter,
   fullscreenExit,
   isFullscreenElement,
@@ -191,7 +192,7 @@ class AmpMinuteMediaPlayer extends AMP.BaseElement {
         return;
       }
       this.muted_ = muted;
-      this.element.dispatchCustomEvent(mutedOrUnmutedEvent(this.muted_));
+      dispatchCustomEvent(this.element, mutedOrUnmutedEvent(this.muted_));
       return;
     }
   }
@@ -233,7 +234,7 @@ class AmpMinuteMediaPlayer extends AMP.BaseElement {
     Services.videoManagerForDoc(this.element).register(this);
 
     const loaded = this.loadPromise(this.iframe_).then(() => {
-      element.dispatchCustomEvent(VideoEvents.LOAD);
+      dispatchCustomEvent(element, VideoEvents.LOAD);
     });
     this.playerReadyResolver_(loaded);
     return loaded;
diff --git a/extensions/amp-minute-media-player/0.1/test/test-amp-minute-media-player.js b/extensions/amp-minute-media-player/0.1/test/test-amp-minute-media-player.js
index 86268ccf22d26..44a4efdc45bb4 100644
--- a/extensions/amp-minute-media-player/0.1/test/test-amp-minute-media-player.js
+++ b/extensions/amp-minute-media-player/0.1/test/test-amp-minute-media-player.js
@@ -15,6 +15,7 @@
  */
 
 import '../amp-minute-media-player';
+import * as dom from '../../../../src/dom';
 
 const WIDTH = '16';
 const HEIGHT = '9';
@@ -42,65 +43,137 @@ describes.realWin(
     });
 
     function getMinuteMediaPlayer(attributes) {
-      const minuteMediaPlayerElement = doc.createElement(
-        'amp-minute-media-player'
-      );
+      const player = doc.createElement('amp-minute-media-player');
       for (const key in attributes) {
-        minuteMediaPlayerElement.setAttribute(key, attributes[key]);
+        player.setAttribute(key, attributes[key]);
       }
 
-      minuteMediaPlayerElement.setAttribute('width', WIDTH);
-      minuteMediaPlayerElement.setAttribute('height', HEIGHT);
-      minuteMediaPlayerElement.setAttribute('layout', RESPONSIVE);
+      player.setAttribute('width', WIDTH);
+      player.setAttribute('height', HEIGHT);
+      player.setAttribute('layout', RESPONSIVE);
 
-      doc.body.appendChild(minuteMediaPlayerElement);
-      return minuteMediaPlayerElement
-        .build()
+      doc.body.appendChild(player);
+      return player
+        .buildInternal()
         .then(() => {
-          minuteMediaPlayerElement.layoutCallback();
+          player.layoutCallback();
         })
-        .then(() => minuteMediaPlayerElement);
+        .then(() => player);
     }
 
-    it('renders with curated content', async () => {
-      const minuteMediaPlayerElement = await getMinuteMediaPlayer({
-        'data-content-type': CURATED,
-        'data-content-id': DATA_CONTENT_ID,
+    describe('rendering', async () => {
+      it('renders with curated content', async () => {
+        const player = await getMinuteMediaPlayer({
+          'data-content-type': CURATED,
+          'data-content-id': DATA_CONTENT_ID,
+        });
+        const iframe = player.querySelector('iframe');
+        expect(iframe).to.not.be.null;
+        expect(iframe.src).to.contain(CURATED);
+        expect(iframe.src).to.contain(DATA_CONTENT_ID);
+        expect(iframe.className).to.match(/i-amphtml-fill-content/);
       });
-      const iframe = minuteMediaPlayerElement.querySelector('iframe');
-      expect(iframe).to.not.be.null;
-      expect(iframe.src).to.equal(
-        `https://www.oo-syringe.com/prod/AMP/minute-media-player.html?content_type=${CURATED}&content_id=${DATA_CONTENT_ID}`
-      );
-      expect(iframe.className).to.match(/i-amphtml-fill-content/);
-    });
 
-    it('renders with semantic (empty params)', async () => {
-      const minuteMediaPlayerElement = await getMinuteMediaPlayer({
-        'data-content-type': SEMANTIC,
-        /* no params to semantic */
+      it('renders with semantic (empty params)', async () => {
+        const player = await getMinuteMediaPlayer({
+          'data-content-type': SEMANTIC,
+          /* no params to semantic */
+        });
+        const iframe = player.querySelector('iframe');
+        expect(iframe).to.not.be.null;
+        expect(iframe.src).to.contain(SEMANTIC);
+        expect(iframe.className).to.match(/i-amphtml-fill-content/);
+      });
+
+      it('renders with semantic (with params)', async () => {
+        const player = await getMinuteMediaPlayer({
+          'data-content-type': SEMANTIC,
+          'data-minimum-date-factor': DATA_MINIMUM_DATE_FACTOR,
+          'data-scanned-element-type': DATA_SCANNED_ELEMENT_TYPE,
+          'data-scoped-keywords': DATA_SCOPED_KEYWORDS,
+        });
+        const iframe = player.querySelector('iframe');
+        expect(iframe).to.not.be.null;
+        expect(iframe.src).to.contain(SEMANTIC);
+        expect(iframe.src).to.contain(DATA_MINIMUM_DATE_FACTOR);
+        expect(iframe.src).to.contain(DATA_SCANNED_ELEMENT_TYPE);
+        expect(iframe.src).to.contain(DATA_SCOPED_KEYWORDS);
+        expect(iframe.className).to.match(/i-amphtml-fill-content/);
+      });
+
+      it('removes iframe after unlayoutCallback', async () => {
+        const player = await getMinuteMediaPlayer({
+          'data-content-type': SEMANTIC,
+          'data-minimum-date-factor': DATA_MINIMUM_DATE_FACTOR,
+          'data-scanned-element-type': DATA_SCANNED_ELEMENT_TYPE,
+          'data-scoped-keywords': DATA_SCOPED_KEYWORDS,
+        });
+        const iframe = player.querySelector('iframe');
+        expect(iframe).to.not.be.null;
+
+        const impl = await player.getImpl(false);
+        impl.unlayoutCallback();
+        expect(player.querySelector('iframe')).to.be.null;
+        expect(impl.iframe_).to.be.null;
       });
-      const iframe = minuteMediaPlayerElement.querySelector('iframe');
-      expect(iframe).to.not.be.null;
-      expect(iframe.src).to.equal(
-        `https://www.oo-syringe.com/prod/AMP/minute-media-player.html?content_type=${SEMANTIC}`
-      );
-      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
 
-    it('renders with semantic (with params)', async () => {
-      const minuteMediaPlayerElement = await getMinuteMediaPlayer({
-        'data-content-type': SEMANTIC,
-        'data-minimum-date-factor': DATA_MINIMUM_DATE_FACTOR,
-        'data-scanned-element-type': DATA_SCANNED_ELEMENT_TYPE,
-        'data-scoped-keywords': DATA_SCOPED_KEYWORDS,
+    describe('methods', async () => {
+      let impl;
+      beforeEach(async () => {
+        const player = await getMinuteMediaPlayer({
+          'data-content-type': SEMANTIC,
+          'data-minimum-date-factor': DATA_MINIMUM_DATE_FACTOR,
+          'data-scanned-element-type': DATA_SCANNED_ELEMENT_TYPE,
+          'data-scoped-keywords': DATA_SCOPED_KEYWORDS,
+        });
+        impl = await player.getImpl(false);
+      });
+
+      it('is interactive', () => {
+        expect(impl.isInteractive()).to.be.true;
+      });
+
+      it('plays', () => {
+        const spy = env.sandbox.spy(impl, 'sendCommand_');
+        impl.play();
+        expect(spy).to.be.calledWith('play');
+      });
+
+      it('can pause', () => {
+        const spy = env.sandbox.spy(impl, 'sendCommand_');
+        impl.pause();
+        expect(spy).to.be.calledWith('pause');
+      });
+
+      it('can mute', () => {
+        env.sandbox.spy(impl, 'sendCommand_');
+        impl.mute();
+        expect(impl.sendCommand_).calledWith('mute');
+      });
+
+      it('can unmute', () => {
+        env.sandbox.spy(impl, 'sendCommand_');
+        impl.unmute();
+        expect(impl.sendCommand_).calledWith('unmute');
+      });
+
+      it('can enter fullscreen', () => {
+        const spy = env.sandbox.spy(dom, 'fullscreenEnter');
+        impl.fullscreenEnter();
+        expect(spy).calledWith(impl.iframe_);
+      });
+
+      it('can exit fullscreen', () => {
+        const spy = env.sandbox.spy(dom, 'fullscreenExit');
+        impl.fullscreenExit();
+        expect(spy).calledWith(impl.iframe_);
+        expect(impl.isFullscreen()).to.be.false;
+      });
+
+      it('does not pre-implement MediaSession API', () => {
+        expect(impl.preimplementsMediaSessionAPI()).to.be.false;
       });
-      const iframe = minuteMediaPlayerElement.querySelector('iframe');
-      expect(iframe).to.not.be.null;
-      expect(iframe.src).to.equal(
-        `https://www.oo-syringe.com/prod/AMP/minute-media-player.html?content_type=${SEMANTIC}&scanned_element_type=${DATA_SCANNED_ELEMENT_TYPE}&minimum_date_factor=${DATA_MINIMUM_DATE_FACTOR}&scoped_keywords=${DATA_SCOPED_KEYWORDS}`
-      );
-      expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
   }
 );
diff --git a/extensions/amp-minute-media-player/0.1/test/validator-amp-minute-media-player.out b/extensions/amp-minute-media-player/0.1/test/validator-amp-minute-media-player.out
index 96823c8696bbf..4b408b86f1437 100644
--- a/extensions/amp-minute-media-player/0.1/test/validator-amp-minute-media-player.out
+++ b/extensions/amp-minute-media-player/0.1/test/validator-amp-minute-media-player.out
@@ -58,7 +58,7 @@ FAIL
 |    <!-- Invalid: data-content-type is mandatory! -->
 |    <amp-minute-media-player
 >>   ^~~~~~~~~
-amp-minute-media-player/0.1/test/validator-amp-minute-media-player.html:58:2 The mandatory attribute 'data-content-type' is missing in tag 'amp-minute-media-player'. (see https://amp.dev/documentation/components/amp-minute-media-player)
+amp-minute-media-player/0.1/test/validator-amp-minute-media-player.html:58:2 The mandatory attribute 'data-content-type' is missing in tag 'amp-minute-media-player'. (see https://amp.dev/documentation/components/amp-minute-media-player/)
 |      data-content-id="fSkmeWKF"
 |      layout="responsive" width="160" height="96">
 |    </amp-minute-media-player>
@@ -66,7 +66,7 @@ amp-minute-media-player/0.1/test/validator-amp-minute-media-player.html:58:2 The
 |    <!-- Invalid: data-content-type value must be one of the following: 'semantic', 'curated' or 'specific'  -->
 |    <amp-minute-media-player
 >>   ^~~~~~~~~
-amp-minute-media-player/0.1/test/validator-amp-minute-media-player.html:64:2 The attribute 'data-content-type' in tag 'amp-minute-media-player' is set to the invalid value 'none'. (see https://amp.dev/documentation/components/amp-minute-media-player)
+amp-minute-media-player/0.1/test/validator-amp-minute-media-player.html:64:2 The attribute 'data-content-type' in tag 'amp-minute-media-player' is set to the invalid value 'none'. (see https://amp.dev/documentation/components/amp-minute-media-player/)
 |      data-content-type="none"
 |      data-content-id="fSkmeWKF"
 |      layout="responsive"
@@ -84,4 +84,4 @@ amp-minute-media-player/0.1/test/validator-amp-minute-media-player.html:72:2 The
 |      layout="responsive" width="160" height="96">
 |    </amp-minute-media-player>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-minute-media-player/amp-minute-media-player.md b/extensions/amp-minute-media-player/amp-minute-media-player.md
index a4cc86ef82e42..b8b6802cb6b1d 100644
--- a/extensions/amp-minute-media-player/amp-minute-media-player.md
+++ b/extensions/amp-minute-media-player/amp-minute-media-player.md
@@ -120,4 +120,4 @@ Example with FIXED layout - fixed width and height.
 
 ## Validation
 
-See [amp-minute-media-player rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-minute-media-player/validator-amp-minute-media-player.protoascii) in the AMP validator specification.
+See [amp-minute-media-player rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-minute-media-player/validator-amp-minute-media-player.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-minute-media-player/validator-amp-minute-media-player.protoascii b/extensions/amp-minute-media-player/validator-amp-minute-media-player.protoascii
index 156a0ce30941a..bfda9692229cb 100644
--- a/extensions/amp-minute-media-player/validator-amp-minute-media-player.protoascii
+++ b/extensions/amp-minute-media-player/validator-amp-minute-media-player.protoascii
@@ -52,7 +52,7 @@ tags: {  # <amp-minute-media-player>
     requires_extension: "amp-video-docking"
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-minute-media-player"
+  spec_url: "https://amp.dev/documentation/components/amp-minute-media-player/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-mowplayer/0.1/amp-mowplayer.js b/extensions/amp-mowplayer/0.1/amp-mowplayer.js
index a3f9c9394d5f8..f1de93e9d5215 100644
--- a/extensions/amp-mowplayer/0.1/amp-mowplayer.js
+++ b/extensions/amp-mowplayer/0.1/amp-mowplayer.js
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
 import {
@@ -26,8 +27,9 @@ import {
   redispatch,
 } from '../../../src/iframe-video';
 import {dev, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {
+  dispatchCustomEvent,
   fullscreenEnter,
   fullscreenExit,
   isFullscreenElement,
@@ -76,6 +78,15 @@ class AmpMowplayer extends AMP.BaseElement {
 
     /** @private {?Function} */
     this.unlistenMessage_ = null;
+
+    /**
+     * Prefix to embed URLs. Overridden on tests.
+     * @private @const {string}
+     */
+    this.baseUrl_ = 'https://mowplayer.com/watch/';
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -94,11 +105,6 @@ class AmpMowplayer extends AMP.BaseElement {
     return isLayoutSizeDefined(layout);
   }
 
-  /** @override */
-  viewportCallback(visible) {
-    this.element.dispatchCustomEvent(VideoEvents.VISIBILITY, {visible});
-  }
-
   /** @override */
   buildCallback() {
     this.mediaid_ = userAssert(
@@ -125,7 +131,7 @@ class AmpMowplayer extends AMP.BaseElement {
     }
 
     return (this.videoIframeSrc_ =
-      'https://mowplayer.com/watch/' + this.mediaid_);
+      this.baseUrl_ + encodeURIComponent(this.mediaid_));
   }
 
   /** @override */
@@ -140,9 +146,12 @@ class AmpMowplayer extends AMP.BaseElement {
     const loaded = this.loadPromise(this.iframe_).then(() => {
       // Tell mowplayer that we want to receive messages
       this.listenToFrame_();
-      this.element.dispatchCustomEvent(VideoEvents.LOAD);
+      dispatchCustomEvent(this.element, VideoEvents.LOAD);
     });
     this.playerReadyResolver_(loaded);
+
+    this.pauseHelper_.updatePlaying(true);
+
     return loaded;
   }
 
@@ -158,6 +167,9 @@ class AmpMowplayer extends AMP.BaseElement {
     const deferred = new Deferred();
     this.playerReadyPromise_ = deferred.promise;
     this.playerReadyResolver_ = deferred.resolve;
+
+    this.pauseHelper_.updatePlaying(false);
+
     return true; // Call layoutCallback again.
   }
 
@@ -249,7 +261,7 @@ class AmpMowplayer extends AMP.BaseElement {
         return;
       }
       this.muted_ = muted;
-      element.dispatchCustomEvent(mutedOrUnmutedEvent(this.muted_));
+      dispatchCustomEvent(element, mutedOrUnmutedEvent(this.muted_));
       return;
     }
   }
@@ -289,6 +301,11 @@ class AmpMowplayer extends AMP.BaseElement {
   /** @override */
   pause() {
     this.sendCommand_('pauseVideo');
+    // The player doesn't appear to respect "pauseVideo" message.
+    const iframe = this.iframe_;
+    if (iframe) {
+      iframe.src = iframe.src;
+    }
   }
 
   /** @override */
diff --git a/extensions/amp-mowplayer/0.1/test/test-amp-mowplayer.js b/extensions/amp-mowplayer/0.1/test/test-amp-mowplayer.js
index 06e385915b64c..8d83d6d4fa8a1 100644
--- a/extensions/amp-mowplayer/0.1/test/test-amp-mowplayer.js
+++ b/extensions/amp-mowplayer/0.1/test/test-amp-mowplayer.js
@@ -17,6 +17,7 @@
 import '../amp-mowplayer';
 import {Services} from '../../../../src/services';
 import {VideoEvents} from '../../../../src/video-interface';
+import {createElementWithAttributes} from '../../../../src/dom';
 import {listenOncePromise} from '../../../../src/event-helper';
 
 const EXAMPLE_VIDEOID = 'v-myfwarfx4tb';
@@ -40,38 +41,30 @@ describes.realWin(
       timer = Services.timerFor(win);
     });
 
-    function getMowPlayer(
-      attributes,
-      opt_responsive,
-      opt_beforeLayoutCallback
-    ) {
-      const mp = doc.createElement('amp-mowplayer');
-      for (const key in attributes) {
-        mp.setAttribute(key, attributes[key]);
-      }
-      mp.setAttribute('width', '250');
-      mp.setAttribute('height', '180');
-      if (opt_responsive) {
-        mp.setAttribute('layout', 'responsive');
-      }
-      doc.body.appendChild(mp);
-      return mp
-        .build()
-        .then(() => {
-          if (opt_beforeLayoutCallback) {
-            opt_beforeLayoutCallback(mp);
-          }
-          return mp.layoutCallback();
-        })
+    async function getMowPlayer(attributes) {
+      const element = createElementWithAttributes(doc, 'amp-mowplayer', {
+        width: 250,
+        height: 180,
+        ...attributes,
+      });
+      doc.body.appendChild(element);
+      const impl = await element.getImpl(false);
+      impl.baseURL_ =
+        // Use a blank page, since these tests don't require an actual page.
+        // hash # at the end so path is not affected by param concat
+        `http://localhost:${location.port}/test/fixtures/served/blank.html#`;
+      return element
+        .buildInternal()
+        .then(() => element.layoutCallback())
         .then(() => {
-          const mpIframe = mp.querySelector('iframe');
-          mp.implementation_.handleMowMessage_({
+          const iframe = element.querySelector('iframe');
+          impl.handleMowMessage_({
             origin: 'https://mowplayer.com',
-            source: mpIframe.contentWindow,
+            source: iframe.contentWindow,
             data: JSON.stringify({event: 'onReady'}),
           });
-        })
-        .then(() => mp);
+          return element;
+        });
     }
 
     describe('with data-mediaid', function () {
@@ -84,15 +77,12 @@ describes.realWin(
      * @param {string} datasource
      */
     function runTestsForDatasource(datasource) {
-      it('renders', () => {
-        return getMowPlayer({'data-mediaid': EXAMPLE_VIDEOID}, true).then(
-          (mp) => {
-            const iframe = mp.querySelector('iframe');
-            expect(iframe).to.not.be.null;
-            expect(iframe.tagName).to.equal('IFRAME');
-            expect(iframe.src).to.equal(EXAMPLE_VIDEOID_URL);
-          }
-        );
+      it('renders', async () => {
+        const element = await getMowPlayer({'data-mediaid': EXAMPLE_VIDEOID});
+        const iframe = element.querySelector('iframe');
+        expect(iframe).to.not.be.null;
+        expect(iframe.tagName).to.equal('IFRAME');
+        expect(iframe.src).to.equal(EXAMPLE_VIDEOID_URL);
       });
 
       it('requires data-mediaid', () =>
@@ -107,48 +97,49 @@ describes.realWin(
           const iframe = mp.querySelector('iframe');
 
           return Promise.resolve()
-            .then(() => {
+            .then(async () => {
               const p = listenOncePromise(mp, VideoEvents.MUTED);
-              sendFakeInfoDeliveryMessage(mp, iframe, {muted: true});
+              await sendFakeInfoDeliveryMessage(mp, iframe, {muted: true});
               return p;
             })
-            .then(() => {
+            .then(async () => {
               const p = listenOncePromise(mp, VideoEvents.PLAYING);
-              sendFakeInfoDeliveryMessage(mp, iframe, {playerState: 1});
+              await sendFakeInfoDeliveryMessage(mp, iframe, {playerState: 1});
               return p;
             })
-            .then(() => {
+            .then(async () => {
               const p = listenOncePromise(mp, VideoEvents.PAUSE);
-              sendFakeInfoDeliveryMessage(mp, iframe, {playerState: 2});
+              await sendFakeInfoDeliveryMessage(mp, iframe, {playerState: 2});
               return p;
             })
-            .then(() => {
+            .then(async () => {
               const p = listenOncePromise(mp, VideoEvents.UNMUTED);
-              sendFakeInfoDeliveryMessage(mp, iframe, {muted: false});
+              await sendFakeInfoDeliveryMessage(mp, iframe, {muted: false});
               return p;
             })
-            .then(() => {
+            .then(async () => {
               // Should not send the unmute event twice if already sent once.
               const p = listenOncePromise(mp, VideoEvents.UNMUTED).then(() => {
                 assert.fail('Should not have dispatch unmute message twice');
               });
-              sendFakeInfoDeliveryMessage(mp, iframe, {muted: false});
+              await sendFakeInfoDeliveryMessage(mp, iframe, {muted: false});
               const successTimeout = timer.promise(10);
               return Promise.race([p, successTimeout]);
             })
-            .then(() => {
+            .then(async () => {
               // Make sure pause and end are triggered when video ends.
               const pEnded = listenOncePromise(mp, VideoEvents.ENDED);
               const pPause = listenOncePromise(mp, VideoEvents.PAUSE);
-              sendFakeInfoDeliveryMessage(mp, iframe, {playerState: 0});
+              await sendFakeInfoDeliveryMessage(mp, iframe, {playerState: 0});
               return Promise.all([pEnded, pPause]);
             });
         });
       });
     }
 
-    function sendFakeInfoDeliveryMessage(mp, iframe, info) {
-      mp.implementation_.handleMowMessage_({
+    async function sendFakeInfoDeliveryMessage(mp, iframe, info) {
+      const impl = await mp.getImpl(false);
+      impl.handleMowMessage_({
         origin: 'https://mowplayer.com',
         source: iframe.contentWindow,
         data: JSON.stringify({
diff --git a/extensions/amp-mowplayer/0.1/test/validator-amp-mowplayer.html b/extensions/amp-mowplayer/0.1/test/validator-amp-mowplayer.html
index a7880b637e71e..5a5c361788f54 100644
--- a/extensions/amp-mowplayer/0.1/test/validator-amp-mowplayer.html
+++ b/extensions/amp-mowplayer/0.1/test/validator-amp-mowplayer.html
@@ -32,21 +32,21 @@
 	<amp-mowplayer
 		data-mediaid="v-myfwarfx4tb"
 		layout="responsive"
-		width="16" 
+		width="16"
 		height="9">
 	</amp-mowplayer>
 	<!-- Alternate valid example with playlist. -->
 	<amp-mowplayer
 		data-mediaid="p-mmzhwcu9mbu"
 		layout="responsive"
-		width="16" 
+		width="16"
 		height="9">
 	</amp-mowplayer>
 	<!-- Invalid example missing a media id. -->
 	<amp-mowplayer
 		data-mediasid="v-myfwarfx4tb"
 		layout="responsive"
-		width="16" 
+		width="16"
 		height="9">
 	</amp-mowplayer>
 </body>
diff --git a/extensions/amp-mowplayer/0.1/test/validator-amp-mowplayer.out b/extensions/amp-mowplayer/0.1/test/validator-amp-mowplayer.out
index 14f41b3112365..5c0ccb7931edd 100644
--- a/extensions/amp-mowplayer/0.1/test/validator-amp-mowplayer.out
+++ b/extensions/amp-mowplayer/0.1/test/validator-amp-mowplayer.out
@@ -33,14 +33,14 @@ FAIL
 |  	<amp-mowplayer
 |  		data-mediaid="v-myfwarfx4tb"
 |  		layout="responsive"
-|  		width="16" 
+|  		width="16"
 |  		height="9">
 |  	</amp-mowplayer>
 |  	<!-- Alternate valid example with playlist. -->
 |  	<amp-mowplayer
 |  		data-mediaid="p-mmzhwcu9mbu"
 |  		layout="responsive"
-|  		width="16" 
+|  		width="16"
 |  		height="9">
 |  	</amp-mowplayer>
 |  	<!-- Invalid example missing a media id. -->
@@ -49,8 +49,8 @@ FAIL
 amp-mowplayer/0.1/test/validator-amp-mowplayer.html:46:1 The mandatory attribute 'data-mediaid' is missing in tag 'amp-mowplayer'. (see https://amp.dev/documentation/components/amp-mowplayer)
 |  		data-mediasid="v-myfwarfx4tb"
 |  		layout="responsive"
-|  		width="16" 
+|  		width="16"
 |  		height="9">
 |  	</amp-mowplayer>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-mowplayer/OWNERS b/extensions/amp-mowplayer/OWNERS
index 179aa809417b4..6b1106c0dc657 100644
--- a/extensions/amp-mowplayer/OWNERS
+++ b/extensions/amp-mowplayer/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'gopanisandip'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'gopanisandip'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-mowplayer/amp-mowplayer.md b/extensions/amp-mowplayer/amp-mowplayer.md
index 8265296161a85..48c54011467cd 100644
--- a/extensions/amp-mowplayer/amp-mowplayer.md
+++ b/extensions/amp-mowplayer/amp-mowplayer.md
@@ -24,16 +24,16 @@ limitations under the License.
 
 # amp-mowplayer
 
-## Behavior
+## Usage
 
-FILL THIS IN. What does this extension do?
+Displays a [Mow Player](https://mowplayer.com/) video widget.
 
 ## Attributes
 
-##### data-mediaid
+### data-mediaid
 
 The Mowplayer media id. This is an alphanumeric sequence that can be found in the Content section in your Mowplayer platform.
 
 ## Validation
 
-See [amp-mowplayer rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-mowplayer/validator-amp-mowplayer.protoascii) in the AMP validator specification.
+See [amp-mowplayer rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-mowplayer/validator-amp-mowplayer.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-mraid/0.1/mraid-service.js b/extensions/amp-mraid/0.1/mraid-service.js
index e2f924d4a331f..6143eaf8d61ee 100644
--- a/extensions/amp-mraid/0.1/mraid-service.js
+++ b/extensions/amp-mraid/0.1/mraid-service.js
@@ -20,7 +20,7 @@ import {
   VisibilityDataDef,
   VisibilityInterface,
 } from '../../../src/inabox/host-services';
-import {layoutRectLtwh} from '../../../src/layout-rect';
+import {layoutRectLtwh} from '../../../src/core/math/layout-rect';
 
 /**
  * Translates between the AMP HostServices APIs and MRAID.
diff --git a/extensions/amp-mraid/0.1/test/validator-amp-mraid.out b/extensions/amp-mraid/0.1/test/validator-amp-mraid.out
index 59165320a00b8..e0014bd359f41 100644
--- a/extensions/amp-mraid/0.1/test/validator-amp-mraid.out
+++ b/extensions/amp-mraid/0.1/test/validator-amp-mraid.out
@@ -26,9 +26,9 @@ FAIL
 |    <!-- Invalid: amp-mraid not allowed in AMP; only allowed in AMP ADS -->
 |    <script async host-service="amp-mraid" src="https://cdn.ampproject.org/v0/amp-mraid-0.1.js"></script>
 >>   ^~~~~~~~~
-amp-mraid/0.1/test/validator-amp-mraid.html:26:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp-mraid/0.1/test/validator-amp-mraid.html:26:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |  </head>
 |  <body>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-mraid/0.1/test/validator-amp4ads-amp-mraid-no-fallback-typo.out b/extensions/amp-mraid/0.1/test/validator-amp4ads-amp-mraid-no-fallback-typo.out
index 283422d7fd60d..8a3b8dac91d32 100644
--- a/extensions/amp-mraid/0.1/test/validator-amp4ads-amp-mraid-no-fallback-typo.out
+++ b/extensions/amp-mraid/0.1/test/validator-amp4ads-amp-mraid-no-fallback-typo.out
@@ -25,7 +25,7 @@ FAIL
 |    <!-- Invalid: no-falback is a typo for no-fallback. -->
 |    <script async host-service="amp-mraid" src="https://cdn.ampproject.org/v0/amp-mraid-0.1.js" no-falback></script>
 >>   ^~~~~~~~~
-amp-mraid/0.1/test/validator-amp4ads-amp-mraid-no-fallback-typo.html:25:2 The attribute 'no-falback' may not appear in tag 'amp-mraid extension .js script'. (see https://amp.dev/documentation/components/amp-mraid)
+amp-mraid/0.1/test/validator-amp4ads-amp-mraid-no-fallback-typo.html:25:2 The attribute 'no-falback' may not appear in tag 'amp-mraid extension script'. (see https://amp.dev/documentation/components/amp-mraid)
 |    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
 |  </head>
 |  <body>
diff --git a/extensions/amp-mraid/OWNERS b/extensions/amp-mraid/OWNERS
index 94b65ebe76929..1b8c3b93f6d99 100644
--- a/extensions/amp-mraid/OWNERS
+++ b/extensions/amp-mraid/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-mustache/0.1/amp-mustache.js b/extensions/amp-mustache/0.1/amp-mustache.js
index 7fc343b21e285..9f25760314256 100644
--- a/extensions/amp-mustache/0.1/amp-mustache.js
+++ b/extensions/amp-mustache/0.1/amp-mustache.js
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import {dict} from '../../../src/utils/object';
+import {BaseTemplate} from '../../../src/base-template';
+import {dict} from '../../../src/core/types/object';
 import {iterateCursor, templateContentClone} from '../../../src/dom';
 import {
   sanitizeHtml,
@@ -25,8 +26,6 @@ import mustache from '../../../third_party/mustache/mustache';
 
 const TAG = 'amp-mustache';
 
-const BaseTemplate = /** @type {typeof ../../../src/service/template-impl.BaseTemplate} */ (AMP.BaseTemplate);
-
 /**
  * Implements an AMP template for Mustache.js.
  * See {@link https://github.com/janl/mustache.js/}.
@@ -101,9 +100,8 @@ export class AmpMustache extends BaseTemplate {
       const nestedTemplateKey = `__AMP_NESTED_TEMPLATE_${index}`;
       this.nestedTemplates_[nestedTemplateKey] =
         nestedTemplate./*OK*/ outerHTML;
-      const nestedTemplateAsVariable = this.element.ownerDocument.createTextNode(
-        `{{{${nestedTemplateKey}}}}`
-      );
+      const nestedTemplateAsVariable =
+        this.element.ownerDocument.createTextNode(`{{{${nestedTemplateKey}}}}`);
       nestedTemplate.parentNode.replaceChild(
         nestedTemplateAsVariable,
         nestedTemplate
@@ -113,21 +111,38 @@ export class AmpMustache extends BaseTemplate {
 
   /** @override */
   setHtml(html) {
-    return this.serializeHtml_(html);
+    const wrapped = `<div>${html}</div>`;
+    const serialized = this.serializeHtml_(wrapped);
+    return this.unwrapChildren(serialized);
   }
 
   /** @override */
   render(data) {
+    const html = this.render_(data);
+    return this.serializeHtml_(html);
+  }
+
+  /** @override */
+  renderAsString(data) {
+    const html = this.render_(data);
+    return sanitizeHtml(html, this.win.document);
+  }
+
+  /**
+   * @param {!JsonObject|string} data
+   * @return {string}
+   * @private
+   */
+  render_(data) {
     let mustacheData = data;
     if (typeof data === 'object') {
       mustacheData = {...data, ...this.nestedTemplates_};
     }
-    const html = mustache.render(
+    return mustache.render(
       this.template_,
       mustacheData,
       /* partials */ undefined
     );
-    return this.serializeHtml_(html);
   }
 
   /**
@@ -141,7 +156,7 @@ export class AmpMustache extends BaseTemplate {
     const root = doc.createElement('div');
     const sanitized = sanitizeHtml(html, doc);
     root./*OK*/ innerHTML = sanitized;
-    return this.unwrap(root);
+    return this.tryUnwrap(root);
   }
 }
 
diff --git a/extensions/amp-mustache/0.1/test/test-amp-mustache.js b/extensions/amp-mustache/0.1/test/test-amp-mustache.js
index 5fa56c616f486..6f2cf7e328b95 100644
--- a/extensions/amp-mustache/0.1/test/test-amp-mustache.js
+++ b/extensions/amp-mustache/0.1/test/test-amp-mustache.js
@@ -27,11 +27,11 @@ describes.repeated(
     },
     'with template[type=amp-mustache]': {templateType: 'template'},
   },
-  (name, variant) => {
+  (name, variant, env) => {
     let viewerCanRenderTemplates = false;
 
     beforeEach(() => {
-      const getServiceForDocStub = window.sandbox.stub(
+      const getServiceForDocStub = env.sandbox.stub(
         service,
         'getServiceForDoc'
       );
@@ -65,7 +65,7 @@ describes.repeated(
       };
       innerHtmlSetup = (html) => {
         if (isTemplateType) {
-          templateElement./*OK*/ innerHTML = html;
+          templateElement.innerHTML = html;
         } else if (isTemplateTypeScript) {
           templateElement.textContent = html;
         }
@@ -77,25 +77,30 @@ describes.repeated(
     it('should render', () => {
       textContentSetup('value = {{value}}');
       template.compileCallback();
-      const result = template.render({value: 'abc'});
-      expect(result./*OK*/ innerHTML).to.equal('value = abc');
+      const data = {value: 'abc'};
+      expect(template.render(data).innerHTML).to.equal('value = abc');
+      expect(template.renderAsString(data)).to.equal('value = abc');
     });
 
     it('should render {{.}} from string', () => {
       textContentSetup('value = {{.}}');
       template.compileCallback();
-      const result = template.render('abc');
-      expect(result./*OK*/ innerHTML).to.equal('value = abc');
+      const data = 'abc';
+      expect(template.render(data).innerHTML).to.equal('value = abc');
+      expect(template.renderAsString(data)).to.equal('value = abc');
     });
 
     it('should sanitize output', () => {
       innerHtmlSetup('value = <a href="{{value}}">abc</a>');
       template.compileCallback();
+      const data = {
+        value: /*eslint no-script-url: 0*/ 'javascript:alert();',
+      };
       allowConsoleError(() => {
-        const result = template.render({
-          value: /*eslint no-script-url: 0*/ 'javascript:alert();',
-        });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(template.render(data).innerHTML).to.equal(
+          'value = <a target="_top">abc</a>'
+        );
+        expect(template.renderAsString(data)).to.equal(
           'value = <a target="_top">abc</a>'
         );
       });
@@ -106,12 +111,31 @@ describes.repeated(
         'value = <{{value}} href="javascript:alert(0)">abc</{{value}}>'
       );
       template.compileCallback();
-      const result = template.render({
-        value: 'a',
-      });
-      expect(result./*OK*/ innerHTML).to.not.equal(
+      const data = {value: 'a'};
+      expect(template.render(data).innerHTML).to.not.equal(
         '<a href="javascript:alert(0)">abc</a>'
       );
+      expect(template.renderAsString(data)).to.not.equal(
+        '<a href="javascript:alert(0)">abc</a>'
+      );
+    });
+
+    it('should unwrap output on compile', () => {
+      innerHtmlSetup('<a>abc</a>');
+      template.compileCallback();
+      const result = template.render({});
+      expect(result.tagName).to.equal('A');
+      expect(result.innerHTML).to.equal('abc');
+      expect(template.renderAsString({})).to.equal('<a>abc</a>');
+    });
+
+    it('should render fragments', () => {
+      innerHtmlSetup('<a>abc</a><a>def</a>');
+      template.compileCallback();
+      const result = template.render({});
+      expect(result.tagName).to.equal('DIV');
+      expect(result.innerHTML).to.equal('<a>abc</a><a>def</a>');
+      expect(template.renderAsString({})).to.equal('<a>abc</a><a>def</a>');
     });
 
     describe('Sanitizing data- attributes', () => {
@@ -151,7 +175,7 @@ describes.repeated(
           const result = template.render({
             value: /*eslint no-script-url: 0*/ 'javascript:alert();',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'value = <a data-="" style="color:red;" target="_top">abc</a>'
           );
         });
@@ -163,7 +187,7 @@ describes.repeated(
         const result = template.render({
           value: 'https://google.com/',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <a data-=""' +
             ' href="https://google.com/" target="_top">abc</a>'
         );
@@ -181,7 +205,7 @@ describes.repeated(
             value: 'myid',
             invalidValue: /*eslint no-script-url: 0*/ 'javascript:alert();',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'value = <a data-my-id="myid">abc</a>'
           );
         });
@@ -201,7 +225,7 @@ describes.repeated(
             value: 'myid',
             invalidValue: /*eslint no-script-url: 0*/ 'javascript:alert();',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'value = <input value="myid" type="text">'
           );
         });
@@ -210,10 +234,11 @@ describes.repeated(
       it('should allow rendering textarea', () => {
         innerHtmlSetup('value = <textarea>{{value}}</textarea>');
         template.compileCallback();
-        const result = template.render({
-          value: 'Cool story bro.',
-        });
-        expect(result./*OK*/ innerHTML).to.equal(
+        const data = {value: 'Cool story bro.'};
+        expect(template.render(data).innerHTML).to.equal(
+          'value = <textarea>Cool story bro.</textarea>'
+        );
+        expect(template.renderAsString(data)).to.equal(
           'value = <textarea>Cool story bro.</textarea>'
         );
       });
@@ -226,9 +251,7 @@ describes.repeated(
             value: 'myid',
             type: 'image',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
-            'value = <input value="myid">'
-          );
+          expect(result.innerHTML).to.equal('value = <input value="myid">');
         });
 
         allowConsoleError(() => {
@@ -236,16 +259,14 @@ describes.repeated(
             value: 'myid',
             type: 'button',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
-            'value = <input value="myid">'
-          );
+          expect(result.innerHTML).to.equal('value = <input value="myid">');
         });
 
         const fileResult = template.render({
           value: 'myid',
           type: 'file',
         });
-        expect(fileResult./*OK*/ innerHTML).to.equal(
+        expect(fileResult.innerHTML).to.equal(
           'value = <input value="myid" type="file">'
         );
 
@@ -253,7 +274,7 @@ describes.repeated(
           value: 'myid',
           type: 'password',
         });
-        expect(passwordResult./*OK*/ innerHTML).to.equal(
+        expect(passwordResult.innerHTML).to.equal(
           'value = <input value="myid" type="password">'
         );
       });
@@ -265,7 +286,7 @@ describes.repeated(
           value: 'myid',
           type: 'text',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <input value="myid" type="text">'
         );
       });
@@ -283,9 +304,7 @@ describes.repeated(
           const result = template.render({
             value: 'myid',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
-            'value = <input value="myid">'
-          );
+          expect(result.innerHTML).to.equal('value = <input value="myid">');
         });
       });
 
@@ -298,7 +317,7 @@ describes.repeated(
         const result = template.render({
           value: 'myid',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <form><input value="myid"></form><input value="hello">'
         );
       });
@@ -313,7 +332,7 @@ describes.repeated(
         );
         template.compileCallback();
         const result = template.render({});
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'text before a template ' +
             '<template type="amp-mustache">text inside template</template> ' +
             'text after a template'
@@ -329,7 +348,7 @@ describes.repeated(
           );
           template.compileCallback();
           const result = template.render({});
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'text before a template  text after a template'
           );
         });
@@ -346,7 +365,7 @@ describes.repeated(
             mutualValue: 'Mutual',
             nestedOnlyValue: 'Nested',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'outer: Outer Mutual ' +
               '<template type="amp-mustache">nested: {{nestedOnlyValue}}' +
               ' {{mutualValue}}</template>'
@@ -355,7 +374,7 @@ describes.repeated(
 
         it('should compile and render nested templates when invoked', () => {
           const outerTemplateElement = document.createElement('template');
-          outerTemplateElement./*OK*/ innerHTML =
+          outerTemplateElement.innerHTML =
             'outer: {{value}} ' +
             '<template type="amp-mustache">nested: {{value}}</template>';
           const outerTemplate = new AmpMustache(outerTemplateElement);
@@ -369,12 +388,12 @@ describes.repeated(
           const nestedResult = nestedTemplate.render({
             value: 'Nested',
           });
-          expect(nestedResult./*OK*/ innerHTML).to.equal('nested: Nested');
+          expect(nestedResult.innerHTML).to.equal('nested: Nested');
         });
 
         it('should sanitize the inner template when it gets rendered', () => {
           const outerTemplateElement = document.createElement('template');
-          outerTemplateElement./*OK*/ innerHTML =
+          outerTemplateElement.innerHTML =
             'outer: {{value}} ' +
             '<template type="amp-mustache">' +
             '<div onclick="javascript:alert(\'I am evil\')">nested</div>: ' +
@@ -391,7 +410,7 @@ describes.repeated(
             const nestedResult = nestedTemplate.render({
               value: 'Nested',
             });
-            expect(nestedResult./*OK*/ innerHTML).to.equal(
+            expect(nestedResult.innerHTML).to.equal(
               '<div>nested</div>: Nested'
             );
           });
@@ -401,7 +420,7 @@ describes.repeated(
           'should not allow users to pass data having key that starts with ' +
             '__AMP_NESTED_TEMPLATE_0 when there is a nested template',
           () => {
-            templateElement./*OK*/ innerHTML =
+            templateElement.innerHTML =
               'outer: {{value}} ' +
               '<template type="amp-mustache">nested: {{value}}</template>';
             template.compileCallback();
@@ -409,7 +428,7 @@ describes.repeated(
               __AMP_NESTED_TEMPLATE_0: 'MUST NOT RENDER THIS',
               value: 'Outer',
             });
-            expect(result./*OK*/ innerHTML).to.equal(
+            expect(result.innerHTML).to.equal(
               'outer: Outer ' +
                 '<template type="amp-mustache">nested: {{value}}</template>'
             );
@@ -421,12 +440,12 @@ describes.repeated(
             ' there are no nested templates, even though it is not a weird name' +
             ' for a template variable',
           () => {
-            templateElement./*OK*/ innerHTML = '{{__AMP_NESTED_TEMPLATE_0}}';
+            templateElement.innerHTML = '{{__AMP_NESTED_TEMPLATE_0}}';
             template.compileCallback();
             const result = template.render({
               __AMP_NESTED_TEMPLATE_0: '123',
             });
-            expect(result./*OK*/ innerHTML).to.equal('123');
+            expect(result.innerHTML).to.equal('123');
           }
         );
       }
@@ -444,7 +463,7 @@ describes.repeated(
             '<small></small><strong></strong><sub></sub>' +
             '<sup></sup><time></time><u></u><hr>',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <b>abc</b><div>def</div>' +
             '<br><code></code><del></del><em></em>' +
             '<i></i><ins></ins><mark></mark><s></s>' +
@@ -470,7 +489,7 @@ describes.repeated(
             '</tr></tfoot>' +
             '</table>',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <table class="valid-class">' +
             '<colgroup><col><col></colgroup>' +
             '<caption>caption</caption>' +
@@ -494,7 +513,7 @@ describes.repeated(
               '<a href="javascript:alert(\'XSS\')">test</a>' +
               '<img src="x" onerror="alert(\'XSS\')" />',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'value = <a target="_top">test</a>'
           );
         });
@@ -522,20 +541,21 @@ describes.repeated(
       if (isTemplateTypeScript) {
         it('should not foster text nodes in script template', () => {
           return allowConsoleError(() => {
-            const result = template.render({
+            const data = {
               'content': 'Howdy',
               'replies': [{'content': 'hi'}],
-            });
-            expect(result.innerHTML).to.equal(
+            };
+            const result =
               '<tbody>' +
-                '<tr>' +
-                '<td>Howdy</td>' +
-                '</tr>' +
-                '<tr>' +
-                '<td>hi</td>' +
-                '</tr>' +
-                '</tbody>'
-            );
+              '<tr>' +
+              '<td>Howdy</td>' +
+              '</tr>' +
+              '<tr>' +
+              '<td>hi</td>' +
+              '</tr>' +
+              '</tbody>';
+            expect(template.render(data).innerHTML).to.equal(result);
+            expect(template.renderAsString(data)).to.equal(result);
           });
         });
       }
@@ -575,26 +595,84 @@ describes.repeated(
       });
 
       it('should not call mustache parsing', () => {
-        window.sandbox.spy(mustache, 'parse');
+        env.sandbox.spy(mustache, 'parse');
         template.compileCallback();
         expect(mustache.parse).to.have.not.been.called;
       });
 
       it('should not mustache render but still sanitize html', () => {
-        window.sandbox.spy(sanitizer, 'sanitizeHtml');
-        window.sandbox.spy(mustache, 'render');
+        env.sandbox.spy(sanitizer, 'sanitizeHtml');
+        env.sandbox.spy(mustache, 'render');
         template.setHtml('<div>test</div>');
         expect(mustache.render).to.have.not.been.called;
         expect(sanitizer.sanitizeHtml).to.have.been.called;
       });
     });
 
-    it('should unwrap output', () => {
-      innerHtmlSetup('<a>abc</a>');
-      template.compileCallback();
-      const result = template.render({});
-      expect(result.tagName).to.equal('A');
-      expect(result./*OK*/ innerHTML).to.equal('abc');
+    describe('setHtml()', () => {
+      it('should unwrap singular element output', () => {
+        template.compileCallback();
+        const result = template.setHtml('<a>abc</a>');
+        expect(result).to.have.length(1);
+        expect(result[0].tagName).to.equal('A');
+        expect(result[0].innerHTML).to.equal('abc');
+      });
+
+      it('should wrap singular text node output', () => {
+        template.compileCallback();
+        const result = template.setHtml('abc');
+        expect(result).to.have.length(1);
+        expect(result[0].tagName).to.equal('DIV');
+        expect(result[0].innerHTML).to.equal('abc');
+      });
+
+      it('should unwrap output with many elements', () => {
+        template.compileCallback();
+        const result = template.setHtml('<a>abc</a><a>def</a>');
+        expect(result).to.have.length(2);
+        const {0: first, 1: second} = result;
+        expect(first.tagName).to.equal('A');
+        expect(first.innerHTML).to.equal('abc');
+        expect(second.tagName).to.equal('A');
+        expect(second.innerHTML).to.equal('def');
+      });
+
+      it('should unwrap output with many elements and wrap text nodes', () => {
+        const html = `<a>abc</a>
+        def
+        <a>ghi  </a>`;
+        template.compileCallback();
+        const result = template.setHtml(html);
+        expect(result).to.have.length(3);
+        const {0: first, 1: second, 2: third} = result;
+        expect(first.tagName).to.equal('A');
+        expect(first.innerHTML).to.equal('abc');
+        expect(second.tagName).to.equal('DIV');
+        expect(second.innerHTML).to.equal('def');
+        expect(third.tagName).to.equal('A');
+        expect(third.innerHTML).to.equal('ghi  ');
+      });
+
+      it('should unwrap output with many elements and preserve subtrees', () => {
+        const html = `
+        <div>
+          <a>abc</a>
+        </div>
+        def
+        <a>ghi  </a>`;
+        template.compileCallback();
+        const result = template.setHtml(html);
+        expect(result).to.have.length(3);
+        const {0: first, 1: second, 2: third} = result;
+        expect(first.tagName).to.equal('DIV');
+        expect(first.children).to.have.length(1);
+        expect(first.firstElementChild.tagName).to.equal('A');
+        expect(first.firstElementChild.innerHTML).to.equal('abc');
+        expect(second.tagName).to.equal('DIV');
+        expect(second.innerHTML).to.equal('def');
+        expect(third.tagName).to.equal('A');
+        expect(third.innerHTML).to.equal('ghi  ');
+      });
     });
   }
 );
diff --git a/extensions/amp-mustache/0.1/test/validator-amp-mustache-version.out b/extensions/amp-mustache/0.1/test/validator-amp-mustache-version.out
index d06c8b0ad2b52..bd72b7a5778b3 100644
--- a/extensions/amp-mustache/0.1/test/validator-amp-mustache-version.out
+++ b/extensions/amp-mustache/0.1/test/validator-amp-mustache-version.out
@@ -31,7 +31,7 @@ PASS
 amp-mustache/0.1/test/validator-amp-mustache-version.html:28:2 The extension 'amp-mustache' is referenced at version '0.1' which is a deprecated version. Please use a more recent version of this extension. This may become an error in the future. (see https://amp.dev/documentation/components/amp-mustache)
 |    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
 >>   ^~~~~~~~~
-amp-mustache/0.1/test/validator-amp-mustache-version.html:29:2 The tag 'amp-mustache extension .js script' appears more than once in the document. This will soon be an error. (see https://amp.dev/documentation/components/amp-mustache)
+amp-mustache/0.1/test/validator-amp-mustache-version.html:29:2 The tag 'amp-mustache extension script' appears more than once in the document. This will soon be an error. (see https://amp.dev/documentation/components/amp-mustache)
 |  </head>
 |  <body>
 |  </body>
diff --git a/extensions/amp-mustache/0.1/test/validator-amp-mustache.out b/extensions/amp-mustache/0.1/test/validator-amp-mustache.out
index c714551dbfee6..56a8cea42c464 100644
--- a/extensions/amp-mustache/0.1/test/validator-amp-mustache.out
+++ b/extensions/amp-mustache/0.1/test/validator-amp-mustache.out
@@ -256,9 +256,9 @@ amp-mustache/0.1/test/validator-amp-mustache.html:114:0 The tag 'template' requi
 |    <div>
 |      <script type="text/plain" template="amp-mustache">
 >>     ^~~~~~~~~
-amp-mustache/0.1/test/validator-amp-mustache.html:116:4 The tag 'SCRIPT type=text/plain' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-mustache)
+amp-mustache/0.1/test/validator-amp-mustache.html:116:4 The tag 'script' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-mustache)
 >>     ^~~~~~~~~
-amp-mustache/0.1/test/validator-amp-mustache.html:116:4 The tag 'SCRIPT type=text/plain' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+amp-mustache/0.1/test/validator-amp-mustache.html:116:4 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
 |        Nested Template script tags are not allowed.
 |      </script>
 |    </div>
@@ -267,15 +267,15 @@ amp-mustache/0.1/test/validator-amp-mustache.html:116:4 The tag 'SCRIPT type=tex
 |  <!-- Inside a template, attribute value restrictions are relaxed. -->
 |  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{invalid}}">
 >> ^~~~~~~~~
-amp-mustache/0.1/test/validator-amp-mustache.html:123:0 The attribute 'autoplay' in tag 'amp-audio' is set to the invalid value '{{invalid}}'. (see https://amp.dev/documentation/components/amp-audio)
+amp-mustache/0.1/test/validator-amp-mustache.html:123:0 The attribute 'autoplay' in tag 'amp-audio' is set to the invalid value '{{invalid}}'. (see https://amp.dev/documentation/components/amp-audio/)
 >> ^~~~~~~~~
-amp-mustache/0.1/test/validator-amp-mustache.html:123:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio)
+amp-mustache/0.1/test/validator-amp-mustache.html:123:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
 |  <template type="amp-mustache">
 >> ^~~~~~~~~
 amp-mustache/0.1/test/validator-amp-mustache.html:124:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
 |  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{valid}}">
 >> ^~~~~~~~~
-amp-mustache/0.1/test/validator-amp-mustache.html:125:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio)
+amp-mustache/0.1/test/validator-amp-mustache.html:125:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
 |  </template>
 |
 |  <!-- Since layout calculations follow a different code path, test that layouts
@@ -294,7 +294,7 @@ amp-mustache/0.1/test/validator-amp-mustache.html:131:0 The tag 'template' requi
 |  -->
 |  <script type="text/plain" template="amp-mustache">
 >> ^~~~~~~~~
-amp-mustache/0.1/test/validator-amp-mustache.html:140:0 The tag 'SCRIPT type=text/plain' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+amp-mustache/0.1/test/validator-amp-mustache.html:140:0 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
 |    <{{not-actually-parsed-as-an-html-tag-so-allowed}}>
 |    <p title="{{allowed}}">{{allowed}}</p>
 |    <p {{notallowed}}></p>
@@ -364,12 +364,12 @@ amp-mustache/0.1/test/validator-amp-mustache.html:140:0 The tag 'SCRIPT type=tex
 |  <!-- Inside a script template, attribute value restrictions are relaxed. -->
 |  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{invalid}}">
 >> ^~~~~~~~~
-amp-mustache/0.1/test/validator-amp-mustache.html:208:0 The attribute 'autoplay' in tag 'amp-audio' is set to the invalid value '{{invalid}}'. (see https://amp.dev/documentation/components/amp-audio)
+amp-mustache/0.1/test/validator-amp-mustache.html:208:0 The attribute 'autoplay' in tag 'amp-audio' is set to the invalid value '{{invalid}}'. (see https://amp.dev/documentation/components/amp-audio/)
 >> ^~~~~~~~~
-amp-mustache/0.1/test/validator-amp-mustache.html:208:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio)
+amp-mustache/0.1/test/validator-amp-mustache.html:208:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
 |  <script type="text/plain" template="amp-mustache">
 >> ^~~~~~~~~
-amp-mustache/0.1/test/validator-amp-mustache.html:209:0 The tag 'SCRIPT type=text/plain' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+amp-mustache/0.1/test/validator-amp-mustache.html:209:0 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
 |  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{valid}}">
 |  </script>
 |
@@ -378,7 +378,7 @@ amp-mustache/0.1/test/validator-amp-mustache.html:209:0 The tag 'SCRIPT type=tex
 |  <!-- See https://github.com/ampproject/amphtml/issues/2670 -->
 |  <script type="text/plain" template="amp-mustache">
 >> ^~~~~~~~~
-amp-mustache/0.1/test/validator-amp-mustache.html:216:0 The tag 'SCRIPT type=text/plain' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+amp-mustache/0.1/test/validator-amp-mustache.html:216:0 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
 |  <amp-img src="{{image.url}}" width={{image.width}} height={{image.height}}></amp-img>
 |  </script>
 |
diff --git a/extensions/amp-mustache/0.1/test/validator-amp-mustache.out.cpponly b/extensions/amp-mustache/0.1/test/validator-amp-mustache.out.cpponly
new file mode 100644
index 0000000000000..fb25378698d32
--- /dev/null
+++ b/extensions/amp-mustache/0.1/test/validator-amp-mustache.out.cpponly
@@ -0,0 +1,393 @@
+FAIL
+|  <!--
+|    Copyright 2015 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This tests the logic for <template> and <script> tags and mustache variable replacements.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|  <!-- Template -->
+|  <template type="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:31:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|    <{{not-actually-parsed-as-an-html-tag-so-allowed}}>
+|    <p title="{{allowed}}">{{allowed}}</p>
+|    <p {{notallowed}}></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:34:2 Mustache template syntax in attribute name '{{notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p {{notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:35:2 Mustache template syntax in attribute name '{{notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p [{{notallowed}}]=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:36:2 Mustache template syntax in attribute name '[{{notallowed}}]' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-{notallowed}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:37:2 The attribute 'data-{notallowed}' may not appear in tag 'p'.
+|    <p data-{{notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:38:2 Mustache template syntax in attribute name 'data-{{notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-[{{notallowed}}]=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:39:2 Mustache template syntax in attribute name 'data-[{{notallowed}}]' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-{{{notallowed}}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:40:2 Mustache template syntax in attribute name 'data-{{{notallowed}}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-{{&notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:41:2 Mustache template syntax in attribute name 'data-{{&notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-{{#notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:42:2 Mustache template syntax in attribute name 'data-{{#notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-{{/notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:43:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:43:2 The attribute 'notallowed}}' may not appear in tag 'p'.
+|    <p data-{{^notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:44:2 Mustache template syntax in attribute name 'data-{{^notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-{{>notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:45:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p {{#notallowed}}class=foo{{/notallowed}}>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:46:2 Mustache template syntax in attribute name '{{#notallowed}}class' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p {{#notallowed}}class{{/notallowed}}>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:47:2 Mustache template syntax in attribute name '{{#notallowed}}class{{/notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{{notallowed}}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:48:2 The attribute 'title' in tag 'p' is set to '{{{notallowed}}}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{&notallowed}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:49:2 The attribute 'title' in tag 'p' is set to '{{&notallowed}}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{>notallowed}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:50:2 The attribute 'title' in tag 'p' is set to '{{>notallowed}}', which contains a Mustache template partial. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-title="{{{notallowed}}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:51:2 The attribute 'data-title' in tag 'p' is set to '{{{notallowed}}}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-title="{{&notallowed}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:52:2 The attribute 'data-title' in tag 'p' is set to '{{&notallowed}}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-title="{{>notallowed}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:53:2 The attribute 'data-title' in tag 'p' is set to '{{>notallowed}}', which contains a Mustache template partial. (see https://amp.dev/documentation/components/amp-mustache)
+|
+|    <!-- now with some whitespace inside the mustache tags -->
+|    <{{ not-actually-parsed-as-an-html-tag-so-allowed }}>
+|    <p title="{{ allowed }}">{{ allowed }}</p>
+|    <p {{ notallowed }}></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:58:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:58:2 Mustache template syntax in attribute name '{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:58:2 The attribute '}}' may not appear in tag 'p'.
+|    <p {{ notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:59:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:59:2 Mustache template syntax in attribute name '{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:59:2 The attribute '}}' may not appear in tag 'p'.
+|    <p data-{{ notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:60:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:60:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:60:2 The attribute '}}' may not appear in tag 'p'.
+|    <p data-{{{ notallowed }}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:61:2 Mustache template syntax in attribute name 'data-{{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:61:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:61:2 The attribute '}}}' may not appear in tag 'p'.
+|    <p data-{{ &notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:62:2 The attribute '&notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:62:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:62:2 The attribute '}}' may not appear in tag 'p'.
+|    <p data-{{ #notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:63:2 The attribute '#notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:63:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:63:2 The attribute '}}' may not appear in tag 'p'.
+|    <p data-{{ /notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:64:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:64:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:64:2 The attribute '}}' may not appear in tag 'p'.
+|    <p data-{{ ^notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:65:2 The attribute '^notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:65:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:65:2 The attribute '}}' may not appear in tag 'p'.
+|    <p data-{{ >notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:66:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p {{ #notallowed }}class=foo{{ /notallowed }}>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:67:2 The attribute '#notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:67:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:67:2 Mustache template syntax in attribute name '{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:67:2 The attribute '}}' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:67:2 The attribute '}}class' may not appear in tag 'p'.
+|    <p {{ #notallowed }}class{{ /notallowed }}>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:68:2 The attribute '#notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:68:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:68:2 Mustache template syntax in attribute name '{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:68:2 The attribute '}}' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:68:2 Mustache template syntax in attribute name '}}class{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{{ notallowed }}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:69:2 The attribute 'title' in tag 'p' is set to '{{{ notallowed }}}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{ &notallowed }}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:70:2 The attribute 'title' in tag 'p' is set to '{{ &notallowed }}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{ >notallowed }}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:71:2 The attribute 'title' in tag 'p' is set to '{{ >notallowed }}', which contains a Mustache template partial. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{& notallowed }}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:72:2 The attribute 'title' in tag 'p' is set to '{{& notallowed }}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{> notallowed }}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:73:2 The attribute 'title' in tag 'p' is set to '{{> notallowed }}', which contains a Mustache template partial. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{ & notallowed }}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:74:2 The attribute 'title' in tag 'p' is set to '{{ & notallowed }}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{ > notallowed }}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:75:2 The attribute 'title' in tag 'p' is set to '{{ > notallowed }}', which contains a Mustache template partial. (see https://amp.dev/documentation/components/amp-mustache)
+|
+|    <!-- Note, this is allowed by the validator, but it is critical that it
+|         be sanitized by the runtime. If the runtime allowed this, then after
+|         rendering (assuming #off was null) we would have:
+|        <a href="javascript:alert('foo')"></a>
+|     -->
+|    <a href="{{#off}}"></a>
+|      {{/off}}javascript:alert('foo'){{#off}}
+|    <a href="{{/off}"></a>
+|
+|    <!-- Allowed by the validator, but could lead to script execution
+|         depending on the value. -->
+|    <a href="{{foo}}"></a>
+|    <a href="java{{foo}}script:alert('foo')"></a>
+|
+|    <!-- Really tricky example that the validator allows, but the runtime
+|         must handle. Essentially if {{foo}} is an empty string, this becomes
+|         a <script> tag, otherwise, it's just a harmless comment -->
+|    <!-- comment --{{foo}}><script><!-- -->
+|
+|  </template>
+|
+|  <!-- Templates may have ids. -->
+|  <template type="amp-mustache" id="foobar">
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:99:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|  </template>
+|
+|  <!-- The template ids may not have certain values. -->
+|  <template type="amp-mustache" id="__defineGetter__">
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:103:0 The attribute 'id' in tag 'template' is set to the invalid value '__defineGetter__'. (see https://amp.dev/documentation/components/amp-mustache)
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:103:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|  </template>
+|
+|  <template type="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:106:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|    <div>
+|      <template type="amp-mustache">
+>>     ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:108:4 The tag 'template' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-mustache)
+>>     ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:108:4 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|        Nested Template tags are not allowed.
+|      </template>
+|    </div>
+|  </template>
+|
+|  <template type="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:114:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|    <div>
+|      <script type="text/plain" template="amp-mustache">
+>>     ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:116:4 The tag 'script' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-mustache)
+>>     ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:116:4 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|        Nested Template script tags are not allowed.
+|      </script>
+|    </div>
+|  </template>
+|
+|  <!-- Inside a template, attribute value restrictions are relaxed. -->
+|  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{invalid}}">
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:123:0 The attribute 'autoplay' in tag 'amp-audio' is set to the invalid value '{{invalid}}'. (see https://amp.dev/documentation/components/amp-audio/)
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:123:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
+|  <template type="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:124:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{valid}}">
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:125:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
+|  </template>
+|
+|  <!-- Since layout calculations follow a different code path, test that layouts
+|       validate. -->
+|  <!-- See https://github.com/ampproject/amphtml/issues/2670 -->
+|  <template type="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:131:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|  <amp-img src="{{image.url}}" width={{image.width}} height={{image.height}}></amp-img>
+|  </template>
+|
+|  <!--
+|    Script template.
+|    Note that no errors are emmited for malformed mustache in script templates as the contents of
+|    script elements is interpreted as text as opposed to nodes which is not handled by the validaor.
+|  -->
+|  <script type="text/plain" template="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:140:0 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|    <{{not-actually-parsed-as-an-html-tag-so-allowed}}>
+|    <p title="{{allowed}}">{{allowed}}</p>
+|    <p {{notallowed}}></p>
+|    <p {{notallowed}}=0></p>
+|    <p [{{notallowed}}]=0></p>
+|    <p data-{notallowed}=0></p>
+|    <p data-{{notallowed}}=0></p>
+|    <p data-[{{notallowed}}]=0></p>
+|    <p data-{{{notallowed}}}=0></p>
+|    <p data-{{&notallowed}}=0></p>
+|    <p data-{{#notallowed}}=0></p>
+|    <p data-{{/notallowed}}=0></p>
+|    <p data-{{^notallowed}}=0></p>
+|    <p data-{{>notallowed}}=0></p>
+|    <p {{#notallowed}}class=foo{{/notallowed}}>
+|    <p {{#notallowed}}class{{/notallowed}}>
+|    <p title="{{{notallowed}}}"></p>
+|    <p title="{{&notallowed}}"></p>
+|    <p title="{{>notallowed}}"></p>
+|    <p data-title="{{{notallowed}}}"></p>
+|    <p data-title="{{&notallowed}}"></p>
+|    <p data-title="{{>notallowed}}"></p>
+|
+|    <!-- now with some whitespace inside the mustache tags -->
+|    <{{ not-actually-parsed-as-an-html-tag-so-allowed }}>
+|    <p title="{{ allowed }}">{{ allowed }}</p>
+|    <p {{ notallowed }}></p>
+|    <p {{ notallowed }}=0></p>
+|    <p data-{{ notallowed }}=0></p>
+|    <p data-{{{ notallowed }}}=0></p>
+|    <p data-{{ &notallowed }}=0></p>
+|    <p data-{{ #notallowed }}=0></p>
+|    <p data-{{ /notallowed }}=0></p>
+|    <p data-{{ ^notallowed }}=0></p>
+|    <p data-{{ >notallowed }}=0></p>
+|    <p {{ #notallowed }}class=foo{{ /notallowed }}>
+|    <p {{ #notallowed }}class{{ /notallowed }}>
+|    <p title="{{{ notallowed }}}"></p>
+|    <p title="{{ &notallowed }}"></p>
+|    <p title="{{ >notallowed }}"></p>
+|    <p title="{{& notallowed }}"></p>
+|    <p title="{{> notallowed }}"></p>
+|    <p title="{{ & notallowed }}"></p>
+|    <p title="{{ > notallowed }}"></p>
+|
+|    <!-- Note, this is allowed by the validator, but it is critical that it
+|         be sanitized by the runtime. If the runtime allowed this, then after
+|         rendering (assuming #off was null) we would have:
+|        <a href="javascript:alert('foo')"></a>
+|     -->
+|    <a href="{{#off}}"></a>
+|      {{/off}}javascript:alert('foo'){{#off}}
+|    <a href="{{/off}"></a>
+|
+|    <!-- Allowed by the validator, but could lead to script execution
+|         depending on the value. -->
+|    <a href="{{foo}}"></a>
+|    <a href="java{{foo}}script:alert('foo')"></a>
+|
+|    <!-- Really tricky example that the validator allows, but the runtime
+|         must handle. Essentially if {{foo}} is an empty string, this becomes
+|         a <script> tag, otherwise, it's just a harmless comment -->
+|    <!-- comment --{{foo}}><script><!-- -->
+|
+|  </script>
+|
+|  <!-- Inside a script template, attribute value restrictions are relaxed. -->
+|  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{invalid}}">
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:208:0 The attribute 'autoplay' in tag 'amp-audio' is set to the invalid value '{{invalid}}'. (see https://amp.dev/documentation/components/amp-audio/)
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:208:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
+|  <script type="text/plain" template="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:209:0 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{valid}}">
+|  </script>
+|
+|  <!-- Since layout calculations follow a different code path, test that layouts
+|       validate. -->
+|  <!-- See https://github.com/ampproject/amphtml/issues/2670 -->
+|  <script type="text/plain" template="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.1/test/validator-amp-mustache.html:216:0 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|  <amp-img src="{{image.url}}" width={{image.width}} height={{image.height}}></amp-img>
+|  </script>
+|
+|  <!-- Not descendant from a template, so mustache attribute values are OK -->
+|  <p title="{{{allowed }}}"></p>
+|  <p title="{{&allowed }}"></p>
+|  <p title="{{>allowed }}"></p>
+|
+|  </body>
+|  </html>
diff --git a/extensions/amp-mustache/0.2/amp-mustache.js b/extensions/amp-mustache/0.2/amp-mustache.js
index 52b1c85265b98..1841b160347bb 100644
--- a/extensions/amp-mustache/0.2/amp-mustache.js
+++ b/extensions/amp-mustache/0.2/amp-mustache.js
@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
+import {BaseTemplate} from '../../../src/base-template';
 import {Purifier} from '../../../src/purifier/purifier';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getService, registerServiceBuilder} from '../../../src/service';
 import {iterateCursor, templateContentClone} from '../../../src/dom';
 import {rewriteAttributeValue} from '../../../src/url-rewrite';
@@ -24,8 +25,6 @@ import mustache from '../../../third_party/mustache/mustache';
 
 const TAG = 'amp-mustache';
 
-const BaseTemplate = /** @type {typeof ../../../src/service/template-impl.BaseTemplate} */ (AMP.BaseTemplate);
-
 /**
  * Implements an AMP template for Mustache.js.
  * See {@link https://github.com/janl/mustache.js/}.
@@ -116,11 +115,27 @@ export class AmpMustache extends BaseTemplate {
 
   /** @override */
   setHtml(html) {
-    return this.purifyAndSetHtml_(html);
+    const wrapped = `<div>${html}</div>`;
+    const purified = this.tryUnwrap(this.purifyAndSetHtml_(wrapped));
+    return this.unwrapChildren(purified);
   }
 
   /** @override */
   render(data) {
+    return this.tryUnwrap(this.render_(data));
+  }
+
+  /** @override */
+  renderAsString(data) {
+    return this.render_(data)./*OK*/ innerHTML;
+  }
+
+  /**
+   * @param {!JsonObject|string} data
+   * @return {!Element}
+   * @private
+   */
+  render_(data) {
     let mustacheData = data;
     // Also render any nested templates.
     if (typeof data === 'object') {
@@ -135,15 +150,13 @@ export class AmpMustache extends BaseTemplate {
   }
 
   /**
-   *
    * @param {string} html
    * @return {!Element}
    * @private
    */
   purifyAndSetHtml_(html) {
     const body = this.purifier_.purifyHtml(`<div>${html}</div>`);
-    const div = body.firstElementChild;
-    return this.unwrap(div);
+    return body.firstElementChild;
   }
 }
 
diff --git a/extensions/amp-mustache/0.2/test/test-amp-mustache.js b/extensions/amp-mustache/0.2/test/test-amp-mustache.js
index 13cf5dee79ce1..b44523fff8f34 100644
--- a/extensions/amp-mustache/0.2/test/test-amp-mustache.js
+++ b/extensions/amp-mustache/0.2/test/test-amp-mustache.js
@@ -27,11 +27,11 @@ describes.repeated(
     },
     'with template[type=amp-mustache]': {templateType: 'template'},
   },
-  (name, variant) => {
+  (name, variant, env) => {
     let viewerCanRenderTemplates = false;
 
     beforeEach(() => {
-      const getServiceForDocStub = window.sandbox.stub(
+      const getServiceForDocStub = env.sandbox.stub(
         service,
         'getServiceForDoc'
       );
@@ -67,7 +67,7 @@ describes.repeated(
       };
       innerHtmlSetup = (html) => {
         if (isTemplateType) {
-          templateElement./*OK*/ innerHTML = html;
+          templateElement.innerHTML = html;
         } else if (isTemplateTypeScript) {
           templateElement.textContent = html;
         }
@@ -79,8 +79,9 @@ describes.repeated(
     it('should render', () => {
       textContentSetup('value = {{value}}');
       template.compileCallback();
-      const result = template.render({value: 'abc'});
-      expect(result./*OK*/ innerHTML).to.equal('value = abc');
+      const data = {value: 'abc'};
+      expect(template.render(data).innerHTML).to.equal('value = abc');
+      expect(template.renderAsString(data)).to.equal('value = abc');
     });
 
     // https://github.com/ampproject/amphtml/pull/17401
@@ -103,17 +104,21 @@ describes.repeated(
     it('should render {{.}} from string', () => {
       textContentSetup('value = {{.}}');
       template.compileCallback();
-      const result = template.render('abc');
-      expect(result./*OK*/ innerHTML).to.equal('value = abc');
+      const data = 'abc';
+      expect(template.render(data).innerHTML).to.equal('value = abc');
+      expect(template.renderAsString(data)).to.equal('value = abc');
     });
 
     it('should sanitize output', () => {
       innerHtmlSetup('value = <a href="{{value}}">abc</a>');
       template.compileCallback();
-      const result = template.render({
+      const data = {
         value: /*eslint no-script-url: 0*/ 'javascript:alert();',
-      });
-      expect(result./*OK*/ innerHTML).to.equal(
+      };
+      expect(template.render(data).innerHTML).to.equal(
+        'value = <a target="_top">abc</a>'
+      );
+      expect(template.renderAsString(data)).to.equal(
         'value = <a target="_top">abc</a>'
       );
     });
@@ -123,14 +128,35 @@ describes.repeated(
         'value = <{{value}} href="javascript:alert(0)">abc</{{value}}>'
       );
       template.compileCallback();
-      const result = template.render({
+      const data = {
         value: 'a',
-      });
-      expect(result./*OK*/ innerHTML).to.not.equal(
+      };
+      expect(template.render(data).innerHTML).to.not.equal(
+        '<a href="javascript:alert(0)">abc</a>'
+      );
+      expect(template.renderAsString(data)).to.not.equal(
         '<a href="javascript:alert(0)">abc</a>'
       );
     });
 
+    it('should unwrap output on compile', () => {
+      innerHtmlSetup('<a>abc</a>');
+      template.compileCallback();
+      const result = template.render({});
+      expect(result.tagName).to.equal('A');
+      expect(result.innerHTML).to.equal('abc');
+      expect(template.renderAsString({})).to.equal('<a>abc</a>');
+    });
+
+    it('should render fragments', () => {
+      innerHtmlSetup('<a>abc</a><a>def</a>');
+      template.compileCallback();
+      const result = template.render({});
+      expect(result.tagName).to.equal('DIV');
+      expect(result.innerHTML).to.equal('<a>abc</a><a>def</a>');
+      expect(template.renderAsString({})).to.equal('<a>abc</a><a>def</a>');
+    });
+
     describe('Sanitizing data- attributes', () => {
       it('should sanitize templated attribute names', () => {
         innerHtmlSetup('value = <a {{value}}="javascript:alert(0)">abc</a>');
@@ -163,9 +189,7 @@ describes.repeated(
         const result = template.render({
           value: /*eslint no-script-url: 0*/ 'javascript:alert();',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
-          'value = <a target="_top">abc</a>'
-        );
+        expect(result.innerHTML).to.equal('value = <a target="_top">abc</a>');
       });
 
       it('should parse data-&attr=value output correctly', () => {
@@ -174,7 +198,7 @@ describes.repeated(
         const result = template.render({
           value: 'https://google.com/',
         });
-        expect(result./*OK*/ innerHTML).to.equal('value = <a>abc</a>');
+        expect(result.innerHTML).to.equal('value = <a>abc</a>');
       });
 
       it('should allow for data-attr=value to output correctly', () => {
@@ -188,7 +212,7 @@ describes.repeated(
           value: 'myid',
           invalidValue: /*eslint no-script-url: 0*/ 'javascript:alert();',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = ' +
             '<a data-my-id="myid" data-my-attr="javascript:alert();">abc</a>'
         );
@@ -205,18 +229,17 @@ describes.repeated(
           value: 'myid',
           invalidValue: /*eslint no-script-url: 0*/ 'javascript:alert();',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
-          'value = <input value="myid">'
-        );
+        expect(result.innerHTML).to.equal('value = <input value="myid">');
       });
 
       it('should allow rendering textarea', () => {
         innerHtmlSetup('value = <textarea>{{value}}</textarea>');
         template.compileCallback();
-        const result = template.render({
-          value: 'Cool story bro.',
-        });
-        expect(result./*OK*/ innerHTML).to.equal(
+        const data = {value: 'Cool story bro.'};
+        expect(template.render(data).innerHTML).to.equal(
+          'value = <textarea>Cool story bro.</textarea>'
+        );
+        expect(template.renderAsString(data)).to.equal(
           'value = <textarea>Cool story bro.</textarea>'
         );
       });
@@ -229,9 +252,7 @@ describes.repeated(
             value: 'myid',
             type: 'image',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
-            'value = <input value="myid">'
-          );
+          expect(result.innerHTML).to.equal('value = <input value="myid">');
         });
 
         allowConsoleError(() => {
@@ -239,16 +260,14 @@ describes.repeated(
             value: 'myid',
             type: 'button',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
-            'value = <input value="myid">'
-          );
+          expect(result.innerHTML).to.equal('value = <input value="myid">');
         });
 
         const fileResult = template.render({
           value: 'myid',
           type: 'file',
         });
-        expect(fileResult./*OK*/ innerHTML).to.equal(
+        expect(fileResult.innerHTML).to.equal(
           'value = <input type="file" value="myid">'
         );
 
@@ -256,7 +275,7 @@ describes.repeated(
           value: 'myid',
           type: 'password',
         });
-        expect(passwordResult./*OK*/ innerHTML).to.equal(
+        expect(passwordResult.innerHTML).to.equal(
           'value = <input type="password" value="myid">'
         );
       });
@@ -268,7 +287,7 @@ describes.repeated(
           value: 'myid',
           type: 'text',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <input type="text" value="myid">'
         );
       });
@@ -286,9 +305,7 @@ describes.repeated(
           const result = template.render({
             value: 'myid',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
-            'value = <input value="myid">'
-          );
+          expect(result.innerHTML).to.equal('value = <input value="myid">');
         });
       });
 
@@ -301,7 +318,7 @@ describes.repeated(
         const result = template.render({
           value: 'myid',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <form><input value="myid"></form><input value="hello">'
         );
       });
@@ -316,7 +333,7 @@ describes.repeated(
         );
         template.compileCallback();
         const result = template.render({});
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'text before a template ' +
             '<template type="amp-mustache">text inside template</template> ' +
             'text after a template'
@@ -332,7 +349,7 @@ describes.repeated(
           );
           template.compileCallback();
           const result = template.render({});
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'text before a template  text after a template'
           );
         });
@@ -349,7 +366,7 @@ describes.repeated(
             mutualValue: 'Mutual',
             nestedOnlyValue: 'Nested',
           });
-          expect(result./*OK*/ innerHTML).to.equal(
+          expect(result.innerHTML).to.equal(
             'outer: Outer Mutual ' +
               '<template type="amp-mustache">nested: {{nestedOnlyValue}}' +
               ' {{mutualValue}}</template>'
@@ -358,7 +375,7 @@ describes.repeated(
 
         it('should compile and render nested templates when invoked', () => {
           const outerTemplateElement = document.createElement('template');
-          outerTemplateElement./*OK*/ innerHTML =
+          outerTemplateElement.innerHTML =
             'outer: {{value}} ' +
             '<template type="amp-mustache">nested: {{value}}</template>';
           const outerTemplate = new AmpMustache(outerTemplateElement, window);
@@ -372,12 +389,12 @@ describes.repeated(
           const nestedResult = nestedTemplate.render({
             value: 'Nested',
           });
-          expect(nestedResult./*OK*/ innerHTML).to.equal('nested: Nested');
+          expect(nestedResult.innerHTML).to.equal('nested: Nested');
         });
 
         it('should sanitize the inner template when it gets rendered', () => {
           const outerTemplateElement = document.createElement('template');
-          outerTemplateElement./*OK*/ innerHTML =
+          outerTemplateElement.innerHTML =
             'outer: {{value}} ' +
             '<template type="amp-mustache">' +
             '<div onclick="javascript:alert(\'I am evil\')">nested</div>: ' +
@@ -393,16 +410,14 @@ describes.repeated(
           const nestedResult = nestedTemplate.render({
             value: 'Nested',
           });
-          expect(nestedResult./*OK*/ innerHTML).to.equal(
-            '<div>nested</div>: Nested'
-          );
+          expect(nestedResult.innerHTML).to.equal('<div>nested</div>: Nested');
         });
 
         it(
           'should not allow users to pass data having key that starts with ' +
             '__AMP_NESTED_TEMPLATE_0 when there is a nested template',
           () => {
-            templateElement./*OK*/ innerHTML =
+            templateElement.innerHTML =
               'outer: {{value}} ' +
               '<template type="amp-mustache">nested: {{value}}</template>';
             template.compileCallback();
@@ -410,7 +425,7 @@ describes.repeated(
               __AMP_NESTED_TEMPLATE_0: 'MUST NOT RENDER THIS',
               value: 'Outer',
             });
-            expect(result./*OK*/ innerHTML).to.equal(
+            expect(result.innerHTML).to.equal(
               'outer: Outer ' +
                 '<template type="amp-mustache">nested: {{value}}</template>'
             );
@@ -422,12 +437,12 @@ describes.repeated(
             ' there are no nested templates, even though it is not a weird name' +
             ' for a template variable',
           () => {
-            templateElement./*OK*/ innerHTML = '{{__AMP_NESTED_TEMPLATE_0}}';
+            templateElement.innerHTML = '{{__AMP_NESTED_TEMPLATE_0}}';
             template.compileCallback();
             const result = template.render({
               __AMP_NESTED_TEMPLATE_0: '123',
             });
-            expect(result./*OK*/ innerHTML).to.equal('123');
+            expect(result.innerHTML).to.equal('123');
           }
         );
       }
@@ -441,7 +456,7 @@ describes.repeated(
         innerHtmlSetup('{{{html}}}');
         template.compileCallback();
         const result = template.render({html});
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           '1<template type="amp-mustache">2</template>35'
         );
       });
@@ -459,7 +474,7 @@ describes.repeated(
             '<small></small><strong></strong><sub></sub>' +
             '<sup></sup><time></time><u></u><hr>',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <b>abc</b><div>def</div>' +
             '<br><code></code><del></del><em></em>' +
             '<i></i><ins></ins><mark></mark><s></s>' +
@@ -485,7 +500,7 @@ describes.repeated(
             '</tr></tfoot>' +
             '</table>',
         });
-        expect(result./*OK*/ innerHTML).to.equal(
+        expect(result.innerHTML).to.equal(
           'value = <table class="valid-class">' +
             '<colgroup><col><col></colgroup>' +
             '<caption>caption</caption>' +
@@ -508,7 +523,25 @@ describes.repeated(
             '<a href="javascript:alert(\'XSS\')">test</a>' +
             '<img src="x" onerror="alert(\'XSS\')" />',
         });
-        expect(result./*OK*/ innerHTML).to.equal('value = <a>test</a>');
+        expect(result.innerHTML).to.equal('value = <a>test</a>');
+      });
+
+      it('should not sanitize allowlisted elements', () => {
+        textContentSetup('value = {{{value}}}');
+        template.compileCallback();
+        const result = template.render({
+          value:
+            '<h1>Heading 1</h1>' +
+            '<h2>Heading 2</h2>' +
+            '<h3>Heading 3</h3>' +
+            '<amp-img></amp-img>',
+        });
+        expect(result.innerHTML).to.equal(
+          'value = <h1>Heading 1</h1>' +
+            '<h2>Heading 2</h2>' +
+            '<h3>Heading 3</h3>' +
+            '<amp-img i-amphtml-ignore=""></amp-img>'
+        );
       });
     });
 
@@ -533,20 +566,21 @@ describes.repeated(
       if (isTemplateTypeScript) {
         it('should not foster text nodes in script template', () => {
           return allowConsoleError(() => {
-            const result = template.render({
+            const data = {
               'content': 'Howdy',
               'replies': [{'content': 'hi'}],
-            });
-            expect(result.innerHTML).to.equal(
+            };
+            const result =
               '<tbody>' +
-                '<tr>' +
-                '<td>Howdy</td>' +
-                '</tr>' +
-                '<tr>' +
-                '<td>hi</td>' +
-                '</tr>' +
-                '</tbody>'
-            );
+              '<tr>' +
+              '<td>Howdy</td>' +
+              '</tr>' +
+              '<tr>' +
+              '<td>hi</td>' +
+              '</tr>' +
+              '</tbody>';
+            expect(template.render(data).innerHTML).to.equal(result);
+            expect(template.renderAsString(data)).to.equal(result);
           });
         });
       }
@@ -584,26 +618,84 @@ describes.repeated(
       });
 
       it('should not call mustache parsing', () => {
-        window.sandbox.spy(mustache, 'parse');
+        env.sandbox.spy(mustache, 'parse');
         template.compileCallback();
         expect(mustache.parse).to.have.not.been.called;
       });
 
       it('should not mustache render but still purify html', () => {
-        window.sandbox.spy(Purifier.prototype, 'purifyHtml');
-        window.sandbox.spy(mustache, 'render');
+        env.sandbox.spy(Purifier.prototype, 'purifyHtml');
+        env.sandbox.spy(mustache, 'render');
         template.setHtml('<div>test</div>');
         expect(mustache.render).to.have.not.been.called;
         expect(Purifier.prototype.purifyHtml).to.have.been.called;
       });
     });
 
-    it('should unwrap output', () => {
-      templateElement./*OK*/ innerHTML = '<a>abc</a>';
-      template.compileCallback();
-      const result = template.setHtml('<a>abc</a>');
-      expect(result.tagName).to.equal('A');
-      expect(result./*OK*/ innerHTML).to.equal('abc');
+    describe('setHtml()', () => {
+      it('should unwrap singular element output', () => {
+        template.compileCallback();
+        const result = template.setHtml('<a>abc</a>');
+        expect(result).to.have.length(1);
+        expect(result[0].tagName).to.equal('A');
+        expect(result[0].innerHTML).to.equal('abc');
+      });
+
+      it('should be undefined for singular text node output', () => {
+        template.compileCallback();
+        const result = template.setHtml('abc');
+        expect(result).to.have.length(1);
+        expect(result[0].tagName).to.equal('DIV');
+        expect(result[0].innerHTML).to.equal('abc');
+      });
+
+      it('should unwrap output with many elements', () => {
+        template.compileCallback();
+        const result = template.setHtml('<a>abc</a><a>def</a>');
+        expect(result).to.have.length(2);
+        const {0: first, 1: second} = result;
+        expect(first.tagName).to.equal('A');
+        expect(first.innerHTML).to.equal('abc');
+        expect(second.tagName).to.equal('A');
+        expect(second.innerHTML).to.equal('def');
+      });
+
+      it('should unwrap output with many elements and wrap text nodes', () => {
+        const html = `<a>abc</a>
+        def
+        <a>ghi  </a>`;
+        template.compileCallback();
+        const result = template.setHtml(html);
+        expect(result).to.have.length(3);
+        const {0: first, 1: second, 2: third} = result;
+        expect(first.tagName).to.equal('A');
+        expect(first.innerHTML).to.equal('abc');
+        expect(second.tagName).to.equal('DIV');
+        expect(second.innerHTML).to.equal('def');
+        expect(third.tagName).to.equal('A');
+        expect(third.innerHTML).to.equal('ghi  ');
+      });
+
+      it('should unwrap output with many elements and preserve subtrees', () => {
+        const html = `
+        <div>
+          <a>abc</a>
+        </div>
+        def
+        <a>ghi  </a>`;
+        template.compileCallback();
+        const result = template.setHtml(html);
+        expect(result).to.have.length(3);
+        const {0: first, 1: second, 2: third} = result;
+        expect(first.tagName).to.equal('DIV');
+        expect(first.children).to.have.length(1);
+        expect(first.firstElementChild.tagName).to.equal('A');
+        expect(first.firstElementChild.innerHTML).to.equal('abc');
+        expect(second.tagName).to.equal('DIV');
+        expect(second.innerHTML).to.equal('def');
+        expect(third.tagName).to.equal('A');
+        expect(third.innerHTML).to.equal('ghi  ');
+      });
     });
   }
 );
diff --git a/extensions/amp-mustache/0.2/test/validator-amp-mustache-version.out b/extensions/amp-mustache/0.2/test/validator-amp-mustache-version.out
index 78609a6b330d3..705421b512d51 100644
--- a/extensions/amp-mustache/0.2/test/validator-amp-mustache-version.out
+++ b/extensions/amp-mustache/0.2/test/validator-amp-mustache-version.out
@@ -29,7 +29,7 @@ PASS
 |    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
 |    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
 >>   ^~~~~~~~~
-amp-mustache/0.2/test/validator-amp-mustache-version.html:29:2 The tag 'amp-mustache extension .js script' appears more than once in the document. This will soon be an error. (see https://amp.dev/documentation/components/amp-mustache)
+amp-mustache/0.2/test/validator-amp-mustache-version.html:29:2 The tag 'amp-mustache extension script' appears more than once in the document. This will soon be an error. (see https://amp.dev/documentation/components/amp-mustache)
 |  </head>
 |  <body>
 |  </body>
diff --git a/extensions/amp-mustache/0.2/test/validator-amp-mustache.out b/extensions/amp-mustache/0.2/test/validator-amp-mustache.out
index 4a6eb2c482cd7..69a164d9e3d75 100644
--- a/extensions/amp-mustache/0.2/test/validator-amp-mustache.out
+++ b/extensions/amp-mustache/0.2/test/validator-amp-mustache.out
@@ -256,9 +256,9 @@ amp-mustache/0.2/test/validator-amp-mustache.html:114:0 The tag 'template' requi
 |    <div>
 |      <script type="text/plain" template="amp-mustache">
 >>     ^~~~~~~~~
-amp-mustache/0.2/test/validator-amp-mustache.html:116:4 The tag 'SCRIPT type=text/plain' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-mustache)
+amp-mustache/0.2/test/validator-amp-mustache.html:116:4 The tag 'script' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-mustache)
 >>     ^~~~~~~~~
-amp-mustache/0.2/test/validator-amp-mustache.html:116:4 The tag 'SCRIPT type=text/plain' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+amp-mustache/0.2/test/validator-amp-mustache.html:116:4 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
 |        Nested Template script tags are not allowed.
 |      </script>
 |    </div>
@@ -267,15 +267,15 @@ amp-mustache/0.2/test/validator-amp-mustache.html:116:4 The tag 'SCRIPT type=tex
 |  <!-- Inside a template, attribute value restrictions are relaxed. -->
 |  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{invalid}}">
 >> ^~~~~~~~~
-amp-mustache/0.2/test/validator-amp-mustache.html:123:0 The attribute 'autoplay' in tag 'amp-audio' is set to the invalid value '{{invalid}}'. (see https://amp.dev/documentation/components/amp-audio)
+amp-mustache/0.2/test/validator-amp-mustache.html:123:0 The attribute 'autoplay' in tag 'amp-audio' is set to the invalid value '{{invalid}}'. (see https://amp.dev/documentation/components/amp-audio/)
 >> ^~~~~~~~~
-amp-mustache/0.2/test/validator-amp-mustache.html:123:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio)
+amp-mustache/0.2/test/validator-amp-mustache.html:123:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
 |  <template type="amp-mustache">
 >> ^~~~~~~~~
 amp-mustache/0.2/test/validator-amp-mustache.html:124:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
 |  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{valid}}">
 >> ^~~~~~~~~
-amp-mustache/0.2/test/validator-amp-mustache.html:125:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio)
+amp-mustache/0.2/test/validator-amp-mustache.html:125:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
 |  </template>
 |
 |  <!-- Since layout calculations follow a different code path, test that layouts
@@ -294,7 +294,7 @@ amp-mustache/0.2/test/validator-amp-mustache.html:131:0 The tag 'template' requi
 |  -->
 |  <script type="text/plain" template="amp-mustache">
 >> ^~~~~~~~~
-amp-mustache/0.2/test/validator-amp-mustache.html:140:0 The tag 'SCRIPT type=text/plain' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+amp-mustache/0.2/test/validator-amp-mustache.html:140:0 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
 |    <{{not-actually-parsed-as-an-html-tag-so-allowed}}>
 |    <p title="{{allowed}}">{{allowed}}</p>
 |    <p {{notallowed}}></p>
@@ -364,12 +364,12 @@ amp-mustache/0.2/test/validator-amp-mustache.html:140:0 The tag 'SCRIPT type=tex
 |  <!-- Inside a script template, attribute value restrictions are relaxed. -->
 |  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{invalid}}">
 >> ^~~~~~~~~
-amp-mustache/0.2/test/validator-amp-mustache.html:208:0 The attribute 'autoplay' in tag 'amp-audio' is set to the invalid value '{{invalid}}'. (see https://amp.dev/documentation/components/amp-audio)
+amp-mustache/0.2/test/validator-amp-mustache.html:208:0 The attribute 'autoplay' in tag 'amp-audio' is set to the invalid value '{{invalid}}'. (see https://amp.dev/documentation/components/amp-audio/)
 >> ^~~~~~~~~
-amp-mustache/0.2/test/validator-amp-mustache.html:208:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio)
+amp-mustache/0.2/test/validator-amp-mustache.html:208:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
 |  <script type="text/plain" template="amp-mustache">
 >> ^~~~~~~~~
-amp-mustache/0.2/test/validator-amp-mustache.html:209:0 The tag 'SCRIPT type=text/plain' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+amp-mustache/0.2/test/validator-amp-mustache.html:209:0 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
 |  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{valid}}">
 |  </script>
 |
@@ -378,7 +378,7 @@ amp-mustache/0.2/test/validator-amp-mustache.html:209:0 The tag 'SCRIPT type=tex
 |  <!-- See https://github.com/ampproject/amphtml/issues/2670 -->
 |  <script type="text/plain" template="amp-mustache">
 >> ^~~~~~~~~
-amp-mustache/0.2/test/validator-amp-mustache.html:216:0 The tag 'SCRIPT type=text/plain' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+amp-mustache/0.2/test/validator-amp-mustache.html:216:0 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
 |  <amp-img src="{{image.url}}" width={{image.width}} height={{image.height}}></amp-img>
 |  </script>
 |
diff --git a/extensions/amp-mustache/0.2/test/validator-amp-mustache.out.cpponly b/extensions/amp-mustache/0.2/test/validator-amp-mustache.out.cpponly
new file mode 100644
index 0000000000000..8fbdcf3de5394
--- /dev/null
+++ b/extensions/amp-mustache/0.2/test/validator-amp-mustache.out.cpponly
@@ -0,0 +1,393 @@
+FAIL
+|  <!--
+|    Copyright 2015 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This tests the logic for <template> tags and mustache variable replacements.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|
+|  <template type="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:31:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|    <{{not-actually-parsed-as-an-html-tag-so-allowed}}>
+|    <p title="{{allowed}}">{{allowed}}</p>
+|    <p {{notallowed}}></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:34:2 Mustache template syntax in attribute name '{{notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p {{notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:35:2 Mustache template syntax in attribute name '{{notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p [{{notallowed}}]=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:36:2 Mustache template syntax in attribute name '[{{notallowed}}]' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-{notallowed}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:37:2 The attribute 'data-{notallowed}' may not appear in tag 'p'.
+|    <p data-{{notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:38:2 Mustache template syntax in attribute name 'data-{{notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-[{{notallowed}}]=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:39:2 Mustache template syntax in attribute name 'data-[{{notallowed}}]' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-{{{notallowed}}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:40:2 Mustache template syntax in attribute name 'data-{{{notallowed}}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-{{&notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:41:2 Mustache template syntax in attribute name 'data-{{&notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-{{#notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:42:2 Mustache template syntax in attribute name 'data-{{#notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-{{/notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:43:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:43:2 The attribute 'notallowed}}' may not appear in tag 'p'.
+|    <p data-{{^notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:44:2 Mustache template syntax in attribute name 'data-{{^notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-{{>notallowed}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:45:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p {{#notallowed}}class=foo{{/notallowed}}>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:46:2 Mustache template syntax in attribute name '{{#notallowed}}class' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p {{#notallowed}}class{{/notallowed}}>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:47:2 Mustache template syntax in attribute name '{{#notallowed}}class{{/notallowed}}' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{{notallowed}}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:48:2 The attribute 'title' in tag 'p' is set to '{{{notallowed}}}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{&notallowed}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:49:2 The attribute 'title' in tag 'p' is set to '{{&notallowed}}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{>notallowed}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:50:2 The attribute 'title' in tag 'p' is set to '{{>notallowed}}', which contains a Mustache template partial. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-title="{{{notallowed}}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:51:2 The attribute 'data-title' in tag 'p' is set to '{{{notallowed}}}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-title="{{&notallowed}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:52:2 The attribute 'data-title' in tag 'p' is set to '{{&notallowed}}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p data-title="{{>notallowed}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:53:2 The attribute 'data-title' in tag 'p' is set to '{{>notallowed}}', which contains a Mustache template partial. (see https://amp.dev/documentation/components/amp-mustache)
+|
+|    <!-- now with some whitespace inside the mustache tags -->
+|    <{{ not-actually-parsed-as-an-html-tag-so-allowed }}>
+|    <p title="{{ allowed }}">{{ allowed }}</p>
+|    <p {{ notallowed }}></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:58:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:58:2 Mustache template syntax in attribute name '{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:58:2 The attribute '}}' may not appear in tag 'p'.
+|    <p {{ notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:59:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:59:2 Mustache template syntax in attribute name '{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:59:2 The attribute '}}' may not appear in tag 'p'.
+|    <p data-{{ notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:60:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:60:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:60:2 The attribute '}}' may not appear in tag 'p'.
+|    <p data-{{{ notallowed }}}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:61:2 Mustache template syntax in attribute name 'data-{{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:61:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:61:2 The attribute '}}}' may not appear in tag 'p'.
+|    <p data-{{ &notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:62:2 The attribute '&notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:62:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:62:2 The attribute '}}' may not appear in tag 'p'.
+|    <p data-{{ #notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:63:2 The attribute '#notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:63:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:63:2 The attribute '}}' may not appear in tag 'p'.
+|    <p data-{{ /notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:64:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:64:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:64:2 The attribute '}}' may not appear in tag 'p'.
+|    <p data-{{ ^notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:65:2 The attribute '^notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:65:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:65:2 The attribute '}}' may not appear in tag 'p'.
+|    <p data-{{ >notallowed }}=0></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:66:2 Mustache template syntax in attribute name 'data-{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p {{ #notallowed }}class=foo{{ /notallowed }}>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:67:2 The attribute '#notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:67:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:67:2 Mustache template syntax in attribute name '{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:67:2 The attribute '}}' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:67:2 The attribute '}}class' may not appear in tag 'p'.
+|    <p {{ #notallowed }}class{{ /notallowed }}>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:68:2 The attribute '#notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:68:2 The attribute 'notallowed' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:68:2 Mustache template syntax in attribute name '{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:68:2 The attribute '}}' may not appear in tag 'p'.
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:68:2 Mustache template syntax in attribute name '}}class{{' in tag 'p'. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{{ notallowed }}}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:69:2 The attribute 'title' in tag 'p' is set to '{{{ notallowed }}}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{ &notallowed }}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:70:2 The attribute 'title' in tag 'p' is set to '{{ &notallowed }}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{ >notallowed }}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:71:2 The attribute 'title' in tag 'p' is set to '{{ >notallowed }}', which contains a Mustache template partial. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{& notallowed }}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:72:2 The attribute 'title' in tag 'p' is set to '{{& notallowed }}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{> notallowed }}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:73:2 The attribute 'title' in tag 'p' is set to '{{> notallowed }}', which contains a Mustache template partial. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{ & notallowed }}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:74:2 The attribute 'title' in tag 'p' is set to '{{ & notallowed }}', which contains unescaped Mustache template syntax. (see https://amp.dev/documentation/components/amp-mustache)
+|    <p title="{{ > notallowed }}"></p>
+>>   ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:75:2 The attribute 'title' in tag 'p' is set to '{{ > notallowed }}', which contains a Mustache template partial. (see https://amp.dev/documentation/components/amp-mustache)
+|
+|    <!-- Note, this is allowed by the validator, but it is critical that it
+|         be sanitized by the runtime. If the runtime allowed this, then after
+|         rendering (assuming #off was null) we would have:
+|        <a href="javascript:alert('foo')"></a>
+|     -->
+|    <a href="{{#off}}"></a>
+|      {{/off}}javascript:alert('foo'){{#off}}
+|    <a href="{{/off}"></a>
+|
+|    <!-- Allowed by the validator, but could lead to script execution
+|         depending on the value. -->
+|    <a href="{{foo}}"></a>
+|    <a href="java{{foo}}script:alert('foo')"></a>
+|
+|    <!-- Really tricky example that the validator allows, but the runtime
+|         must handle. Essentially if {{foo}} is an empty string, this becomes
+|         a <script> tag, otherwise, it's just a harmless comment -->
+|    <!-- comment --{{foo}}><script><!-- -->
+|
+|  </template>
+|
+|  <!-- Templates may have ids. -->
+|  <template type="amp-mustache" id="foobar">
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:99:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|  </template>
+|
+|  <!-- The template ids may not have certain values. -->
+|  <template type="amp-mustache" id="__defineGetter__">
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:103:0 The attribute 'id' in tag 'template' is set to the invalid value '__defineGetter__'. (see https://amp.dev/documentation/components/amp-mustache)
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:103:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|  </template>
+|
+|  <template type="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:106:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|    <div>
+|      <template type="amp-mustache">
+>>     ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:108:4 The tag 'template' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-mustache)
+>>     ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:108:4 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|        Nested Template tags are not allowed.
+|      </template>
+|    </div>
+|  </template>
+|
+|  <template type="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:114:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|    <div>
+|      <script type="text/plain" template="amp-mustache">
+>>     ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:116:4 The tag 'script' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-mustache)
+>>     ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:116:4 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|        Nested Template script tags are not allowed.
+|      </script>
+|    </div>
+|  </template>
+|
+|  <!-- Inside a template, attribute value restrictions are relaxed. -->
+|  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{invalid}}">
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:123:0 The attribute 'autoplay' in tag 'amp-audio' is set to the invalid value '{{invalid}}'. (see https://amp.dev/documentation/components/amp-audio/)
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:123:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
+|  <template type="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:124:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{valid}}">
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:125:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
+|  </template>
+|
+|  <!-- Since layout calculations follow a different code path, test that layouts
+|       validate. -->
+|  <!-- See https://github.com/ampproject/amphtml/issues/2670 -->
+|  <template type="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:131:0 The tag 'template' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|  <amp-img src="{{image.url}}" width={{image.width}} height={{image.height}}></amp-img>
+|  </template>
+|
+|  <!--
+|    Script template.
+|    Note that no errors are emmited for malformed mustache in script templates as the contents of
+|    script elements is interpreted as text as opposed to nodes which is not handled by the validaor.
+|  -->
+|  <script type="text/plain" template="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:140:0 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|    <{{not-actually-parsed-as-an-html-tag-so-allowed}}>
+|    <p title="{{allowed}}">{{allowed}}</p>
+|    <p {{notallowed}}></p>
+|    <p {{notallowed}}=0></p>
+|    <p [{{notallowed}}]=0></p>
+|    <p data-{notallowed}=0></p>
+|    <p data-{{notallowed}}=0></p>
+|    <p data-[{{notallowed}}]=0></p>
+|    <p data-{{{notallowed}}}=0></p>
+|    <p data-{{&notallowed}}=0></p>
+|    <p data-{{#notallowed}}=0></p>
+|    <p data-{{/notallowed}}=0></p>
+|    <p data-{{^notallowed}}=0></p>
+|    <p data-{{>notallowed}}=0></p>
+|    <p {{#notallowed}}class=foo{{/notallowed}}>
+|    <p {{#notallowed}}class{{/notallowed}}>
+|    <p title="{{{notallowed}}}"></p>
+|    <p title="{{&notallowed}}"></p>
+|    <p title="{{>notallowed}}"></p>
+|    <p data-title="{{{notallowed}}}"></p>
+|    <p data-title="{{&notallowed}}"></p>
+|    <p data-title="{{>notallowed}}"></p>
+|
+|    <!-- now with some whitespace inside the mustache tags -->
+|    <{{ not-actually-parsed-as-an-html-tag-so-allowed }}>
+|    <p title="{{ allowed }}">{{ allowed }}</p>
+|    <p {{ notallowed }}></p>
+|    <p {{ notallowed }}=0></p>
+|    <p data-{{ notallowed }}=0></p>
+|    <p data-{{{ notallowed }}}=0></p>
+|    <p data-{{ &notallowed }}=0></p>
+|    <p data-{{ #notallowed }}=0></p>
+|    <p data-{{ /notallowed }}=0></p>
+|    <p data-{{ ^notallowed }}=0></p>
+|    <p data-{{ >notallowed }}=0></p>
+|    <p {{ #notallowed }}class=foo{{ /notallowed }}>
+|    <p {{ #notallowed }}class{{ /notallowed }}>
+|    <p title="{{{ notallowed }}}"></p>
+|    <p title="{{ &notallowed }}"></p>
+|    <p title="{{ >notallowed }}"></p>
+|    <p title="{{& notallowed }}"></p>
+|    <p title="{{> notallowed }}"></p>
+|    <p title="{{ & notallowed }}"></p>
+|    <p title="{{ > notallowed }}"></p>
+|
+|    <!-- Note, this is allowed by the validator, but it is critical that it
+|         be sanitized by the runtime. If the runtime allowed this, then after
+|         rendering (assuming #off was null) we would have:
+|        <a href="javascript:alert('foo')"></a>
+|     -->
+|    <a href="{{#off}}"></a>
+|      {{/off}}javascript:alert('foo'){{#off}}
+|    <a href="{{/off}"></a>
+|
+|    <!-- Allowed by the validator, but could lead to script execution
+|         depending on the value. -->
+|    <a href="{{foo}}"></a>
+|    <a href="java{{foo}}script:alert('foo')"></a>
+|
+|    <!-- Really tricky example that the validator allows, but the runtime
+|         must handle. Essentially if {{foo}} is an empty string, this becomes
+|         a <script> tag, otherwise, it's just a harmless comment -->
+|    <!-- comment --{{foo}}><script><!-- -->
+|
+|  </script>
+|
+|  <!-- Inside a script template, attribute value restrictions are relaxed. -->
+|  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{invalid}}">
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:208:0 The attribute 'autoplay' in tag 'amp-audio' is set to the invalid value '{{invalid}}'. (see https://amp.dev/documentation/components/amp-audio/)
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:208:0 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
+|  <script type="text/plain" template="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:209:0 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|  <amp-audio src="https://example.com/audio" layout="fixed" autoplay="{{valid}}">
+|  </script>
+|
+|  <!-- Since layout calculations follow a different code path, test that layouts
+|       validate. -->
+|  <!-- See https://github.com/ampproject/amphtml/issues/2670 -->
+|  <script type="text/plain" template="amp-mustache">
+>> ^~~~~~~~~
+amp-mustache/0.2/test/validator-amp-mustache.html:216:0 The tag 'script' requires including the 'amp-mustache' extension JavaScript. (see https://amp.dev/documentation/components/amp-mustache)
+|  <amp-img src="{{image.url}}" width={{image.width}} height={{image.height}}></amp-img>
+|  </script>
+|
+|  <!-- Not descendant from a template, so mustache attribute values are OK -->
+|  <p title="{{{allowed }}}"></p>
+|  <p title="{{&allowed }}"></p>
+|  <p title="{{>allowed }}"></p>
+|
+|  </body>
+|  </html>
diff --git a/extensions/amp-mustache/0.2/test/validator-json-not-in-template.out.cpponly b/extensions/amp-mustache/0.2/test/validator-json-not-in-template.out.cpponly
new file mode 100644
index 0000000000000..21fc0b1378186
--- /dev/null
+++ b/extensions/amp-mustache/0.2/test/validator-json-not-in-template.out.cpponly
@@ -0,0 +1,44 @@
+PASS
+|  <!--
+|    Copyright 2018 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests json content is parsed by validator and warnings issued if invalid json.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="self.html" />
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+|    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
+|  </head>
+|  <body>
+|  <amp-list
+|    width="auto"
+|    height="100"
+|    layout="fixed-height"
+|    src="/example.json">
+|    <amp-analytics>
+|      <script type="application/json">
+|       {{{ json_data }}}
+>>       ^~~~~~~~~
+amp-mustache/0.2/test/validator-json-not-in-template.html:36:6 The script tag contains invalid JSON that cannot be parsed.
+|      </script>
+|    <amp-analytics/>
+|  </amp-list>
+|  </body>
+|  </html>
diff --git a/extensions/amp-mustache/OWNERS b/extensions/amp-mustache/OWNERS
index 967653f110765..04c3c75bfccd6 100644
--- a/extensions/amp-mustache/OWNERS
+++ b/extensions/amp-mustache/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'choumx'}, {name: 'dvoytenko'}],
+      owners: [{name: 'ampproject/wg-performance'}],
     },
   ],
 }
diff --git a/extensions/amp-mustache/amp-mustache.md b/extensions/amp-mustache/amp-mustache.md
index 10ce17e4300f2..a805620e9e240 100644
--- a/extensions/amp-mustache/amp-mustache.md
+++ b/extensions/amp-mustache/amp-mustache.md
@@ -37,15 +37,15 @@ limitations under the License.
 
 Mustache is a logic-less template syntax. See [Mustache specification](http://mustache.github.io/mustache.5.html) for more details. Some of the core Mustache tags are:
 
-- `{{variable}}`: A variable tag. It outputs the the HTML-escaped value of a variable.
-- `{{#section}} {{/section}}`: A section tag. It can test the existence of a variable and iterate over it if it's an array.
-- `{{^section}} {{/section}}`: An inverted tag. It can test the non-existence of a variable.
-- `{{{unescaped}}}`: Unescaped HTML. It's restricted in the markup it may output (see "Restrictions" below).
+-   `{{variable}}`: A variable tag. It outputs the the HTML-escaped value of a variable.
+-   `{{#section}} {{/section}}`: A section tag. It can test the existence of a variable and iterate over it if it's an array.
+-   `{{^section}} {{/section}}`: An inverted tag. It can test the non-existence of a variable.
+-   `{{{unescaped}}}`: Unescaped HTML. It's restricted in the markup it may output (see "Restrictions" below).
 
 ## Usage
 
 The `amp-mustache` template has to be defined and used according to the
-[AMP Template Spec](../../spec/amp-html-templates.md).
+[AMP Template Spec](../../docs/spec/amp-html-templates.md).
 
 First, the `amp-mustache` has to be declared/loaded like this:
 
@@ -87,10 +87,10 @@ How templates are discovered, when they are rendered, how data is provided is al
 Like all AMP templates, `amp-mustache` templates are required to be well-formed DOM fragments. This means
 that among other things, you can't use `amp-mustache` to:
 
-- Calculate tag name. E.g. `<{{tagName}}>` is not allowed.
-- Calculate attribute name. E.g. `<div {{attrName}}=something>` is not allowed.
+-   Calculate tag name. E.g. `<{{tagName}}>` is not allowed.
+-   Calculate attribute name. E.g. `<div {{attrName}}=something>` is not allowed.
 
-The output of "triple-mustache" is sanitized to only allow the following tags: `a`, `b`, `br`, `caption`, `col`, `colgroup`, `code`, `del`, `div`, `em`, `hr`, `i`, `ins`, `li`, `mark`, `ol`, `p`, `q`, `s`, `small`, `span`, `strong`, `sub`, `sup`, `table`, `tbody`, `time`, `td`, `th`, `thead`, `tfoot`, `tr`, `u`, `ul`.
+The output of "triple-mustache" is sanitized to only allow the following tags: `a`, `amp-list`, `b`, `br`, `caption`, `col`, `colgroup`, `code`, `del`, `div`, `em`, `h1`, `h2`, `h3`, `hr`, `i`, `ins`, `li`, `mark`, `ol`, `p`, `q`, `s`, `small`, `span`, `strong`, `sub`, `sup`, `table`, `tbody`, `time`, `td`, `th`, `thead`, `tfoot`, `tr`, `u`, `ul`.
 
 ### Sanitization
 
@@ -179,8 +179,6 @@ When using `amp-mustache` to calculate attribute values, quote escaping can be a
 
 Using HTML character codes in the `{{foo}}` or `{{bar}}` variables won't work since Mustache will HTML escape `&` characters (e.g. `&quot;` -> `&amp;quot;`). One workaround is to use facsimile characters e.g. &prime; (`&prime;`) and &Prime; (`&Prime;`).
 
-There's an [open proposal](https://github.com/ampproject/amphtml/issues/8395) to perform this substitution in `amp-mustache` instead. Please comment on the issue if you'd like to support it.
-
 ### HTML entities
 
 HTML entities are not preserved in `<template>` elements.
@@ -191,4 +189,4 @@ Workarounds include replacing strings like {% raw %}`{{`{% endraw %} with differ
 
 ## Validation
 
-See [amp-mustache rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-mustache/validator-amp-mustache.protoascii) in the AMP validator specification.
+See [amp-mustache rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-mustache/validator-amp-mustache.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-mustache/validator-amp-mustache.protoascii b/extensions/amp-mustache/validator-amp-mustache.protoascii
index 470835b36d72b..c64acbe80527c 100644
--- a/extensions/amp-mustache/validator-amp-mustache.protoascii
+++ b/extensions/amp-mustache/validator-amp-mustache.protoascii
@@ -36,9 +36,8 @@ tags: {  # amp-mustache
 }
 tags: {  # amp-mustache
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
-  spec_name: "SCRIPT[custom-template=amp-mustache] (AMP4ADS/ACTIONS)"
+  spec_name: "SCRIPT[custom-template=amp-mustache] (AMP4ADS)"
   extension_spec: {
     name: "amp-mustache"
     extension_type: CUSTOM_TEMPLATE
@@ -67,7 +66,6 @@ tags: {  # amp-mustache
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   spec_name: "SCRIPT type=text/plain"
   disallowed_ancestor: "TEMPLATE"
@@ -389,7 +387,6 @@ tags: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "TEMPLATE"
   mandatory_ancestor: "BODY"
   # <template> tags may not be nested inside other <template> tags.
diff --git a/extensions/amp-nested-menu/0.1/amp-nested-menu.js b/extensions/amp-nested-menu/0.1/amp-nested-menu.js
index 967b2697ddb40..7fe3b1b1cbff5 100644
--- a/extensions/amp-nested-menu/0.1/amp-nested-menu.js
+++ b/extensions/amp-nested-menu/0.1/amp-nested-menu.js
@@ -15,7 +15,7 @@
  */
 
 import {CSS} from '../../../build/amp-nested-menu-0.1.css';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Layout} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {
@@ -26,7 +26,7 @@ import {
   tryFocus,
 } from '../../../src/dom';
 import {dev, userAssert} from '../../../src/log';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
 
 const TAG = 'amp-nested-menu';
 
@@ -40,6 +40,11 @@ const Side = {
 const ANIMATION_TIMEOUT = 350;
 
 export class AmpNestedMenu extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -120,11 +125,6 @@ export class AmpNestedMenu extends AMP.BaseElement {
     return layout == Layout.FILL;
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /**
    * Handler for click event on any element inside the component.
    * @param {!Event} e
diff --git a/extensions/amp-nested-menu/0.1/test/test-amp-nested-menu.js b/extensions/amp-nested-menu/0.1/test/test-amp-nested-menu.js
index 4ef66538fd84b..6818437a2d410 100644
--- a/extensions/amp-nested-menu/0.1/test/test-amp-nested-menu.js
+++ b/extensions/amp-nested-menu/0.1/test/test-amp-nested-menu.js
@@ -15,8 +15,8 @@
  */
 
 import '../amp-nested-menu';
-import * as lolex from 'lolex';
-import {Keys} from '../../../../src/utils/key-codes';
+import * as fakeTimers from '@sinonjs/fake-timers';
+import {Keys} from '../../../../src/core/constants/key-codes';
 import {htmlFor} from '../../../../src/static-template';
 import {tryFocus} from '../../../../src/dom';
 
@@ -36,7 +36,7 @@ describes.realWin(
     beforeEach(() => {
       win = env.win;
       doc = win.document;
-      clock = lolex.install({target: win});
+      clock = fakeTimers.withGlobal(win).install();
     });
 
     async function getNestedMenu(options) {
@@ -79,7 +79,7 @@ describes.realWin(
         }
       });
 
-      await element.build();
+      await element.buildInternal();
       await element.layoutCallback();
       return element;
     }
@@ -119,15 +119,16 @@ describes.realWin(
 
     it('should close corresponding submenu when close element is clicked', async () => {
       const menuEl = await getNestedMenu();
+      const impl = await menuEl.getImpl(false);
       const closeEl1 = doc.getElementById('close-1');
       const submenuEl1 = doc.getElementById('submenu-1');
       const closeEl3 = doc.getElementById('close-3');
       const submenuEl3 = doc.getElementById('submenu-3');
       const openEl3 = doc.getElementById('open-3');
       const openEl1 = doc.getElementById('open-1');
-      menuEl.implementation_.open_(submenuEl1);
+      impl.open_(submenuEl1);
       clock.tick(ANIMATION_TIMEOUT);
-      menuEl.implementation_.open_(submenuEl3);
+      impl.open_(submenuEl3);
       clock.tick(ANIMATION_TIMEOUT);
       expect(openEl1.getAttribute('aria-expanded')).to.be.equal('true');
       expect(openEl3.getAttribute('aria-expanded')).to.be.equal('true');
@@ -148,15 +149,16 @@ describes.realWin(
 
     it('should return to root menu on reset', async () => {
       const menuEl = await getNestedMenu();
+      const impl = await menuEl.getImpl(false);
       const submenuEl1 = doc.getElementById('submenu-1');
       const submenuEl3 = doc.getElementById('submenu-3');
-      menuEl.implementation_.open_(submenuEl1);
-      menuEl.implementation_.open_(submenuEl3);
+      impl.open_(submenuEl1);
+      impl.open_(submenuEl3);
       expect(menuEl.hasAttribute('child-open')).to.be.true;
       expect(submenuEl1.hasAttribute('child-open')).to.be.true;
       expect(submenuEl1.hasAttribute('open')).to.be.true;
       expect(submenuEl3.hasAttribute('open')).to.be.true;
-      menuEl.implementation_.reset();
+      impl.reset();
       expect(menuEl.hasAttribute('child-open')).to.be.false;
       expect(submenuEl1.hasAttribute('child-open')).to.be.false;
       expect(submenuEl1.hasAttribute('open')).to.be.false;
@@ -165,8 +167,9 @@ describes.realWin(
 
     it('should return to parent menu when left arrow key is pressed and side=right', async () => {
       const menuEl = await getNestedMenu({'side': 'right'});
+      const impl = await menuEl.getImpl(false);
       const submenuEl = doc.getElementById('submenu-1');
-      menuEl.implementation_.open_(submenuEl);
+      impl.open_(submenuEl);
       expect(menuEl.hasAttribute('child-open')).to.be.true;
       expect(submenuEl.hasAttribute('open')).to.be.true;
       const keyEvent = new KeyboardEvent('keydown', {key: Keys.LEFT_ARROW});
@@ -177,8 +180,9 @@ describes.realWin(
 
     it('should return to parent menu when right arrow key is pressed and side=left', async () => {
       const menuEl = await getNestedMenu({'side': 'left'});
+      const impl = await menuEl.getImpl(false);
       const submenuEl = doc.getElementById('submenu-1');
-      menuEl.implementation_.open_(submenuEl);
+      impl.open_(submenuEl);
       expect(menuEl.hasAttribute('child-open')).to.be.true;
       expect(submenuEl.hasAttribute('open')).to.be.true;
       const keyEvent = new KeyboardEvent('keydown', {key: Keys.RIGHT_ARROW});
@@ -263,13 +267,14 @@ describes.realWin(
 
     it('should shift focus to close/open button when submenu is opened/closed, respectively', async () => {
       const menuEl = await getNestedMenu();
+      const impl = await menuEl.getImpl(false);
       const openEl = doc.getElementById('open-1');
       const closeEl = doc.getElementById('close-1');
       const submenuEl = doc.getElementById('submenu-1');
-      menuEl.implementation_.open_(submenuEl);
+      impl.open_(submenuEl);
       clock.tick(ANIMATION_TIMEOUT);
       expect(doc.activeElement).to.equal(closeEl);
-      menuEl.implementation_.close_(submenuEl);
+      impl.close_(submenuEl);
       clock.tick(ANIMATION_TIMEOUT);
       expect(doc.activeElement).to.equal(openEl);
     });
diff --git a/extensions/amp-nested-menu/0.1/test/validator-amp-nested-menu-error.out b/extensions/amp-nested-menu/0.1/test/validator-amp-nested-menu-error.out
index 8b41336a28af9..9eae00a98f52f 100644
--- a/extensions/amp-nested-menu/0.1/test/validator-amp-nested-menu-error.out
+++ b/extensions/amp-nested-menu/0.1/test/validator-amp-nested-menu-error.out
@@ -33,17 +33,17 @@ FAIL
 |    <!-- Invalid: nested menu must be inside sidebar -->
 |    <amp-nested-menu layout="fill"></amp-nested-menu>
 >>   ^~~~~~~~~
-amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:33:2 The tag 'amp-nested-menu' may only appear as a descendant of tag 'amp-sidebar'. (see https://amp.dev/documentation/components/amp-nested-menu)
+amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:33:2 The tag 'amp-nested-menu' may only appear as a descendant of tag 'amp-sidebar'. (see https://amp.dev/documentation/components/amp-nested-menu/)
 |    <amp-sidebar layout="nodisplay">
 |      <!-- Invalid: incorrect side value -->
 |      <amp-nested-menu layout="fill" side="center">
 >>     ^~~~~~~~~
-amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:36:4 The attribute 'side' in tag 'amp-nested-menu' is set to the invalid value 'center'. (see https://amp.dev/documentation/components/amp-nested-menu)
+amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:36:4 The attribute 'side' in tag 'amp-nested-menu' is set to the invalid value 'center'. (see https://amp.dev/documentation/components/amp-nested-menu/)
 |        <!-- Invalid: no element can include more than one submenu attributes -->
 |        <div>
 |          <h4 amp-nested-submenu-open amp-nested-submenu-close></h4>
 >>         ^~~~~~~~~
-amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:39:8 Mutually exclusive attributes encountered in tag 'h4 amp-nested-menu' - pick one of ['amp-nested-submenu-close', 'amp-nested-submenu-open'].
+amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:39:8 Mutually exclusive attributes encountered in tag 'h4' - pick one of ['amp-nested-submenu-close', 'amp-nested-submenu-open'].
 |          <div amp-nested-submenu amp-nested-submenu-close></div>
 >>         ^~~~~~~~~
 amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:40:8 Mutually exclusive attributes encountered in tag 'div amp-nested-menu' - pick one of ['amp-nested-submenu', 'amp-nested-submenu-close', 'amp-nested-submenu-open'].
@@ -64,7 +64,7 @@ amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:46:8 The attribute
 |        <div>
 |          <a amp-nested-submenu-open></a>
 >>         ^~~~~~~~~
-amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:50:8 The attribute 'amp-nested-submenu-open' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:50:8 The attribute 'amp-nested-submenu-open' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |          <h1 amp-nested-submenu-close></h1>
 >>         ^~~~~~~~~
 amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:51:8 The attribute 'amp-nested-submenu-close' may not appear in tag 'h1'.
@@ -77,11 +77,11 @@ amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:51:8 The attribute
 |              <h4 amp-nested-submenu-open></h4>
 |              <div amp-nested-submenu></div>
 >>             ^~~~~~~~~
-amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:59:12 The attribute 'amp-nested-submenu' may not appear in tag 'div'.
+amp-nested-menu/0.1/test/validator-amp-nested-menu-error.html:59:12 The tag 'div amp-nested-menu' may not appear as a descendant of tag 'amp-accordion'.
 |            </div>
 |          </section>
 |        </amp-accordion>
 |      </amp-nested-menu>
 |    </amp-sidebar>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-nested-menu/0.1/test/validator-amp-nested-menu.out b/extensions/amp-nested-menu/0.1/test/validator-amp-nested-menu.out
index f761779285622..2bca094947056 100644
--- a/extensions/amp-nested-menu/0.1/test/validator-amp-nested-menu.out
+++ b/extensions/amp-nested-menu/0.1/test/validator-amp-nested-menu.out
@@ -114,4 +114,4 @@ PASS
 |      </amp-list>
 |    </amp-sidebar>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-nested-menu/OWNERS b/extensions/amp-nested-menu/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-nested-menu/OWNERS
+++ b/extensions/amp-nested-menu/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-nested-menu/amp-nested-menu.md b/extensions/amp-nested-menu/amp-nested-menu.md
index 01877fcbcd9a7..cec7a84214697 100644
--- a/extensions/amp-nested-menu/amp-nested-menu.md
+++ b/extensions/amp-nested-menu/amp-nested-menu.md
@@ -24,32 +24,30 @@ limitations under the License.
 
 # amp-nested-menu
 
-## Overview
+## Usage
 
 `<amp-nested-menu>` enables layered content organization within [`<amp-sidebar>`](../amp-sidebar/0.1/amp-sidebar.md). A sidebar with `<amp-nested-menu>` can be used jointly with [`<amp-mega-menu>`](../amp-mega-menu/amp-mega-menu.md) to create a responsive menu.
 
-## Usage
-
 The `<amp-nested-menu>` component must be placed inside `<amp-sidebar>`. The component may contain the following AMP elements:
 
-- [`<amp-img>`](../../builtins/amp-img.md)
-- [`<amp-list>`](../amp-list/amp-list.md)
-- [`<amp-accordion>`](../amp-accordion/amp-accordion.md)
+-   [`<amp-img>`](../../builtins/amp-img/amp-img.md)
+-   [`<amp-list>`](../amp-list/amp-list.md)
+-   [`<amp-accordion>`](../amp-accordion/amp-accordion.md)
 
 ### Nested submenus
 
 `<amp-nested-menu>` supports nesting one or more layers of submenus. It uses the following attributes on its descendants as identifiers for the submenu functionality:
 
-- `amp-nested-submenu`: this identifies a hidden submenu container. When opened, the element slides in and takes the place of its parent menu (either `<amp-nested-menu>` or another submenu).
-- `amp-nested-submenu-open`: this identifies an element that opens a submenu on tap. It must be a sibling of the said submenu.
-- `amp-nested-submenu-close`: this identifies an element that closes the closest containing submenu. The element must be the descendant of a submenu.
+-   `amp-nested-submenu`: this identifies a hidden submenu container. When opened, the element slides in and takes the place of its parent menu (either `<amp-nested-menu>` or another submenu).
+-   `amp-nested-submenu-open`: this identifies an element that opens a submenu on tap. It must be a sibling of the said submenu.
+-   `amp-nested-submenu-close`: this identifies an element that closes the closest containing submenu. The element must be the descendant of a submenu.
 
 Only `<div>` tags may receive the `amp-nested-submenu` attribute. The submenu open/close attributes can be applied to any of the tags below:
 
-- `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`
-- `<button>`
-- `<span>`
-- `<div>`
+-   `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`
+-   `<button>`
+-   `<span>`
+-   `<div>`
 
 The following example demonstrates an `<amp-nested-menu>` with two levels of nested submenus.
 
@@ -154,25 +152,19 @@ Here is the JSON file used:
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>side (optional)</strong></td>
-    <td>Optional attribute that indicates from which side the submenus open from, either `left` or `right`. Set to `right` by default, or `left` if the document is RTL.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
+### side (optional)
+
+Optional attribute that indicates from which side the submenus open from, either `left` or `right`. Set to `right` by default, or `left` if the document is RTL.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
 
 ## Actions
 
-<table>
-  <tr>
-    <td width="40%"><strong><code>reset</code></strong></td>
-    <td>Closes any open submenus and returns to the root menu. Use this in conjunction with sidebar's <code>sidebarClose</code> event to reset the menu after sidebar is closed.</td>
-  </tr>
-</table>
+### reset
+
+Closes any open submenus and returns to the root menu. Use this in conjunction with sidebar's `sidebarClose` event to reset the menu after sidebar is closed.
 
 ## Styling
 
@@ -188,13 +180,13 @@ Wrap every menu item in a `li` element to improve accessibility and keyboard sup
 
 The component supports arrow key navigation as follows:
 
-- `LEFT`: if a submenu is open, close it and return to the parent menu.
-- `RIGHT`: if a submenu open element has focus, open the corresponding submenu.
-- `UP/DOWN`: shift focus between items within a menu (this works only if all menu items are wrapped inside `li` elements under the same list).
-- `END/HOME`: shift focus to the first/last item within a menu (similar to `UP/DOWN`)
+-   `LEFT`: if a submenu is open, close it and return to the parent menu.
+-   `RIGHT`: if a submenu open element has focus, open the corresponding submenu.
+-   `UP/DOWN`: shift focus between items within a menu (this works only if all menu items are wrapped inside `li` elements under the same list).
+-   `END/HOME`: shift focus to the first/last item within a menu (similar to `UP/DOWN`)
 
 If `side=left`, then the functionalities of `LEFT` and `RIGHT` arrow keys are reversed.
 
 ## Validation
 
-See [amp-nested-menu rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-nested-menu/validator-amp-nested-menu.protoascii) in the AMP validator specification.
+See [amp-nested-menu rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-nested-menu/validator-amp-nested-menu.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-nested-menu/validator-amp-nested-menu.protoascii b/extensions/amp-nested-menu/validator-amp-nested-menu.protoascii
index d32aef6687548..ae8b0a1edb560 100644
--- a/extensions/amp-nested-menu/validator-amp-nested-menu.protoascii
+++ b/extensions/amp-nested-menu/validator-amp-nested-menu.protoascii
@@ -39,25 +39,29 @@ tags: {  # amp-nested-menu
     supported_layouts: FILL
   }
   descendant_tag_list: "amp-nested-menu-allowed-descendants"
-  spec_url: "https://amp.dev/documentation/components/amp-nested-menu"
+  spec_url: "https://amp.dev/documentation/components/amp-nested-menu/"
 }
 tags: {  # <amp-nested-menu> <div amp-nested-submenu(-open/-close)>
   html_format: AMP
   tag_name: "DIV"
   spec_name: "div amp-nested-menu"
+  descriptive_name: "div amp-nested-menu"
   mandatory_ancestor: "AMP-NESTED-MENU"
   # submenus inside accordion do not display correctly due to styling of <amp-accordion>.
   disallowed_ancestor: "AMP-ACCORDION"
   attrs: {
     name: "amp-nested-submenu"
+    dispatch_key: NAME_VALUE_DISPATCH
     mandatory_oneof: "['amp-nested-submenu', 'amp-nested-submenu-close', 'amp-nested-submenu-open']"
   }
   attrs: {
     name: "amp-nested-submenu-close"
+    dispatch_key: NAME_VALUE_DISPATCH
     mandatory_oneof: "['amp-nested-submenu', 'amp-nested-submenu-close', 'amp-nested-submenu-open']"
   }
   attrs: {
     name: "amp-nested-submenu-open"
+    dispatch_key: NAME_VALUE_DISPATCH
     mandatory_oneof: "['amp-nested-submenu', 'amp-nested-submenu-close', 'amp-nested-submenu-open']"
   }
 }
@@ -133,9 +137,11 @@ descendant_tag_list {
   tag: "B"
   tag: "BR"
   tag: "BUTTON"
+  tag: "CIRCLE"
   tag: "COL"
   tag: "COLGROUP"
   tag: "DIV"
+  tag: "ELLIPSE"
   tag: "EM"
   tag: "FIELDSET"
   tag: "FORM"
@@ -149,13 +155,18 @@ descendant_tag_list {
   tag: "INPUT"
   tag: "LABEL"
   tag: "LI"
+  tag: "LINE"
   tag: "MARK"
   tag: "NAV"
   tag: "OL"
   tag: "OPTION"
   tag: "P"
   tag: "PATH"
+  tag: "POLYGON"
+  tag: "POLYLINE"
+  tag: "RECT"
   tag: "SECTION"
+  tag: "SELECT"
   tag: "SPAN"
   tag: "STRIKE"
   tag: "STRONG"
@@ -172,4 +183,5 @@ descendant_tag_list {
   tag: "TR"
   tag: "U"
   tag: "UL"
+  tag: "USE"
 }
diff --git a/extensions/amp-next-page/0.1/amp-next-page.js b/extensions/amp-next-page/0.1/amp-next-page.js
index 8a0c1cd1dd935..aaa2b94e2b66f 100644
--- a/extensions/amp-next-page/0.1/amp-next-page.js
+++ b/extensions/amp-next-page/0.1/amp-next-page.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {CONSENT_POLICY_STATE} from '../../../src/consent-state';
+import {CONSENT_POLICY_STATE} from '../../../src/core/constants/consent-state';
 import {CSS} from '../../../build/amp-next-page-0.1.css';
 import {Layout} from '../../../src/layout';
 import {NextPageService} from './next-page-service';
@@ -36,7 +36,7 @@ import {fetchDocument} from '../../../src/document-fetcher';
 import {getConsentPolicyState} from '../../../src/consent';
 import {getServicePromiseForDoc} from '../../../src/service';
 import {isExperimentOn} from '../../../src/experiments';
-import {parseJson, tryParseJson} from '../../../src/json';
+import {parseJson, tryParseJson} from '../../../src/core/types/object/json';
 
 const TAG = 'amp-next-page';
 
@@ -292,10 +292,9 @@ export class AmpNextPage extends AMP.BaseElement {
  * @return {!Promise<!NextPageService>}
  */
 function nextPageServiceForDoc(elementOrAmpDoc) {
-  return /** @type {!Promise<!NextPageService>} */ (getServicePromiseForDoc(
-    elementOrAmpDoc,
-    SERVICE_ID
-  ));
+  return /** @type {!Promise<!NextPageService>} */ (
+    getServicePromiseForDoc(elementOrAmpDoc, SERVICE_ID)
+  );
 }
 
 /**
diff --git a/extensions/amp-next-page/0.1/amp-next-page.md b/extensions/amp-next-page/0.1/amp-next-page.md
index ee3c9d027acdb..b3a02a9fc67c2 100644
--- a/extensions/amp-next-page/0.1/amp-next-page.md
+++ b/extensions/amp-next-page/0.1/amp-next-page.md
@@ -25,39 +25,9 @@ limitations under the License.
 
 # amp-next-page
 
-Dynamically loads more documents recommended for the user.
+## Usage
 
-<table>
-  <tr>
-    <td><strong>Availability</strong></td>
-    <td><a href="https://amp.dev/documentation/guides-and-tutorials/learn/experimental">Experimental</a> <a href="https://github.com/ampproject/amphtml/blob/3a06c99f259b66998b61935a5ee5f0075481bfd2/tools/experiments/README.md#enable-an-experiment-for-a-particular-document"> (Document opt-in allowed)</a></td>
-  </tr>
-  <tr>
-    <td><strong>Required Script</strong></td>
-    <td>
-      <code>
-        &lt;script async custom-element="amp-next-page"
-        src="https://cdn.ampproject.org/v0/amp-next-page-0.1.js">&lt;/script>
-      </code>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <strong>
-        <a href="https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout">Supported Layouts</a>
-      </strong>
-    </td>
-    <td>N/A</td>
-  </tr>
-  <tr>
-    <td><strong>Examples</strong></td>
-    <td>See AMP By Example's <a href="https://amp.dev/documentation/examples/components/amp-next-page/">amp-next-page example</a>.</td>
-  </tr>
-</table>
-
-[TOC]
-
-## Behavior
+Dynamically loads more documents recommended for the user.
 
 Given a list of pages, `amp-next-page` tries to load them after the current
 document, providing an infinite-scroll type experience.
@@ -89,41 +59,26 @@ component will render a maximum of three documents (total) on screen at one sing
 
 [tip type="important"]
 **Important** [`<amp-analytics>`](../../amp-analytics/amp-analytics.md) is [currently unsupported](https://github.com/ampproject/amphtml/issues/15807) on pages users land on through `<amp-next-page>`.
-Tracking page views is supported through [`<amp-pixel>`](../../../builtins/amp-pixel.md) or `<amp-analytics>` on the host page.
+Tracking page views is supported through [`<amp-pixel>`](../../../builtins/amp-pixel/amp-pixel.md) or `<amp-analytics>` on the host page.
 [/tip]
 
-### Analytics triggers
+### Configuration spec
 
-Partial support for analytics is included through the initial host page via two separate events. These are triggered by `<amp-next-page>` and you can track them in your [amp-analytics](https://amp.dev/documentation/components/amp-analytics) config:
+The configuration defines the documents recommended by `amp-next-page` to
+the user as a JSON object.
 
-| Event                  | Fired when                                               |
-| ---------------------- | -------------------------------------------------------- |
-| `amp-next-page-scroll` | The user scrolls to a new page                           |
-| `amp-next-page-click`  | The user click on an article from the recommendation box |
+| Key                | Value                                                             |
+| ------------------ | ----------------------------------------------------------------- |
+| `pages` (required) | Ordered array of one or more page objects                         |
+| `hideSelectors`    | Optional array of string CSS selectors to hide in child documents |
 
-Both of the `triggers` provide the variables `fromUrl` and `toUrl` referring to the previous and current pages. They can be used as follows:
+Each page object should have the following format:
 
-```html
-<amp-analytics>
-  <script type="application/json">
-    {
-      "requests": {
-        "nextpage": "https://foo.com/pixel?RANDOM&toURL=${toURL}"
-      },
-      "triggers": {
-        "trackScrollThrough": {
-          "on": "amp-next-page-scroll",
-          "request": "nextpage"
-        },
-        "trackClickThrough": {
-          "on": "amp-next-page-click",
-          "request": "nextpage"
-        }
-      }
-    }
-  </script>
-</amp-analytics>
-```
+| Key                   | Value                                                                                                                                                            |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ampUrl` (required)   | String URL of the page. Must be on the same origin as the current document. URLs will automatically be rewritten to point to the Google AMP cache when required. |
+| `title` (required)    | String title of the page, will be used when rendering the recommendation box                                                                                     |
+| `imageUrl` (required) | String URL of the image to display in the recommendation box                                                                                                     |
 
 ### Recommendation box
 
@@ -135,10 +90,10 @@ have been rendered.
 The appearance of these links can be customized by styling the following
 classes:
 
-- `.amp-next-page-links` for the containing element
-- `.amp-next-page-link` for an individual link
-- `.amp-next-page-image` for the link image
-- `.amp-next-page-text` for the link text
+-   `.amp-next-page-links` for the containing element
+-   `.amp-next-page-link` for an individual link
+-   `.amp-next-page-image` for the link image
+-   `.amp-next-page-text` for the link text
 
 ### Separator
 
@@ -182,39 +137,32 @@ selectors will be set to `display: none` in all child documents.
 </amp-next-page>
 ```
 
-## Attributes
+### Substitutions
 
-<table>
-  <tr>
-    <td width="40%"><strong>src</strong></td>
-    <td>The URL of the remote endpoint that returns the JSON that will be used to
-configure this <code>amp-next-page</code> component. This must be a CORS HTTP service.
-The URL's protocol must be HTTPS.
-<br><br>
-{% call callout('Important', type='caution') %} Your endpoint must implement
-the requirements specified in the CORS Requests in AMP spec. {% endcall %}
-<br><br>
-The <code>src</code> attribute is required unless a config has been specified inline.</td>
-  </tr>
-</table>
-
-## Configuration spec
+The `amp-next-page` src allows all standard URL variable substitutions. See
+the [Substitutions Guide](../../../docs/spec/amp-var-substitutions.md) for more info.
 
-The configuration defines the documents recommended by `amp-next-page` to
-the user as a JSON object.
+For example:
 
-| Key                | Value                                                             |
-| ------------------ | ----------------------------------------------------------------- |
-| `pages` (required) | Ordered array of one or more page objects                         |
-| `hideSelectors`    | Optional array of string CSS selectors to hide in child documents |
+```html
+<amp-next-page src="https://foo.com/config.json?RANDOM"></amp-next-page>
+```
 
-Each page object should have the following format:
+may make a request to something like
+`https://foo.com/config.json?0.8390278471201` where the RANDOM value is
+randomly generated upon each impression.
 
-| Key                   | Value                                                                                                                                                            |
-| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ampUrl` (required)   | String URL of the page. Must be on the same origin as the current document. URLs will automatically be rewritten to point to the Google AMP cache when required. |
-| `title` (required)    | String title of the page, will be used when rendering the recommendation box                                                                                     |
-| `imageUrl` (required) | String URL of the image to display in the recommendation box                                                                                                     |
+## Attributes
+
+### `src`
+
+The URL of the remote endpoint that returns the JSON that will be used to
+configure this `amp-next-page` component. This must be a CORS HTTP service.
+The URL's protocol must be HTTPS. Your endpoint must implement
+the requirements specified in the CORS Requests in AMP spec.
+
+The `src` attribute is required unless a config has been specified inline.
+|
 
 ### Example configuration
 
@@ -239,23 +187,41 @@ read, and hides the header and footer elements from each child document.
 }
 ```
 
-## Substitutions
+## Analytics
 
-The `amp-next-page` src allows all standard URL variable substitutions. See
-the [Substitutions Guide](../../../spec/amp-var-substitutions.md) for more info.
+Partial support for analytics is included through the initial host page via two separate events. These are triggered by `<amp-next-page>` and you can track them in your [amp-analytics](https://amp.dev/documentation/components/amp-analytics) config:
 
-For example:
+| Event                  | Fired when                                               |
+| ---------------------- | -------------------------------------------------------- |
+| `amp-next-page-scroll` | The user scrolls to a new page                           |
+| `amp-next-page-click`  | The user click on an article from the recommendation box |
+
+Both of the `triggers` provide the variables `fromUrl` and `toUrl` referring to the previous and current pages. They can be used as follows:
 
 ```html
-<amp-next-page src="https://foo.com/config.json?RANDOM"></amp-next-page>
+<amp-analytics>
+  <script type="application/json">
+    {
+      "requests": {
+        "nextpage": "https://foo.com/pixel?RANDOM&toURL=${toURL}"
+      },
+      "triggers": {
+        "trackScrollThrough": {
+          "on": "amp-next-page-scroll",
+          "request": "nextpage"
+        },
+        "trackClickThrough": {
+          "on": "amp-next-page-click",
+          "request": "nextpage"
+        }
+      }
+    }
+  </script>
+</amp-analytics>
 ```
 
-may make a request to something like
-`https://foo.com/config.json?0.8390278471201` where the RANDOM value is
-randomly generated upon each impression.
-
 ## Validation
 
 See
-[amp-next-page rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-next-page/validator-amp-next-page.protoascii)
+[amp-next-page rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-next-page/validator-amp-next-page.protoascii)
 in the AMP validator specification.
diff --git a/extensions/amp-next-page/0.1/config.js b/extensions/amp-next-page/0.1/config.js
index 8e0c05c58ecdf..2245037584895 100644
--- a/extensions/amp-next-page/0.1/config.js
+++ b/extensions/amp-next-page/0.1/config.js
@@ -20,7 +20,7 @@ import {
   getSourceUrl,
   resolveRelativeUrl,
 } from '../../../src/url';
-import {isArray} from '../../../src/types';
+import {isArray} from '../../../src/core/types';
 import {user, userAssert} from '../../../src/log';
 
 const ADSENSE_REC_ORIGIN = 'https://googleads.g.doubleclick.net';
diff --git a/extensions/amp-next-page/0.1/next-page-service.js b/extensions/amp-next-page/0.1/next-page-service.js
index 60866292e3022..a6e153d6d3984 100644
--- a/extensions/amp-next-page/0.1/next-page-service.js
+++ b/extensions/amp-next-page/0.1/next-page-service.js
@@ -18,13 +18,13 @@ import {CSS} from '../../../build/amp-next-page-0.1.css';
 import {MultidocManager} from '../../../src/multidoc-manager';
 import {PositionObserverFidelity} from '../../../src/service/position-observer/position-observer-worker';
 import {Services} from '../../../src/services';
-import {VisibilityState} from '../../../src/visibility-state';
+import {VisibilityState} from '../../../src/core/constants/visibility-state';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getAmpdoc} from '../../../src/service';
 import {installPositionObserverServiceForDoc} from '../../../src/service/position-observer/position-observer-impl';
 import {installStylesForDoc} from '../../../src/style-installer';
-import {layoutRectLtwh} from '../../../src/layout-rect';
+import {layoutRectLtwh} from '../../../src/core/math/layout-rect';
 import {removeElement} from '../../../src/dom';
 import {setStyle, toggle} from '../../../src/style';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
@@ -556,7 +556,7 @@ export class NextPageService {
    * Manually overrides the document's visible state to the given state
    *
    * @param {!DocumentRef} ref Reference to the document to change
-   * @param {!../../../src/visibility-state.VisibilityState} visibilityState
+   * @param {!../../../src/core/constants/visibility-state.VisibilityState} visibilityState
    * @private
    */
   setDocumentVisibility_(ref, visibilityState) {
@@ -585,7 +585,7 @@ export class NextPageService {
    * @private
    */
   setActiveDocumentInHistory_(documentRef) {
-    const {title, canonicalUrl} = documentRef.amp;
+    const {canonicalUrl, title} = documentRef.amp;
     const {pathname, search} = this.urlService_.parse(documentRef.ampUrl);
     this.history_.replace({title, url: pathname + search, canonicalUrl});
   }
diff --git a/extensions/amp-next-page/0.1/test/test-amp-next-page.js b/extensions/amp-next-page/0.1/test/test-amp-next-page.js
index 5f4de60cdf8da..87b036459b9c3 100644
--- a/extensions/amp-next-page/0.1/test/test-amp-next-page.js
+++ b/extensions/amp-next-page/0.1/test/test-amp-next-page.js
@@ -16,9 +16,9 @@
 import * as DocFetcher from '../../../../src/document-fetcher';
 import {AmpNextPage} from '../amp-next-page';
 import {Services} from '../../../../src/services';
-import {VisibilityState} from '../../../../src/visibility-state';
+import {VisibilityState} from '../../../../src/core/constants/visibility-state';
 import {getServicePromiseForDoc} from '../../../../src/service';
-import {layoutRectLtwh} from '../../../../src/layout-rect';
+import {layoutRectLtwh} from '../../../../src/core/math/layout-rect';
 import {macroTask} from '../../../../testing/yield';
 import {setStyle} from '../../../../src/style';
 import {toggleExperiment} from '../../../../src/experiments';
diff --git a/extensions/amp-next-page/0.1/test/test-config.js b/extensions/amp-next-page/0.1/test/test-config.js
index ae4e63ceddcb2..581ad51ba3f88 100644
--- a/extensions/amp-next-page/0.1/test/test-config.js
+++ b/extensions/amp-next-page/0.1/test/test-config.js
@@ -17,381 +17,376 @@ import {Services} from '../../../../src/services';
 import {assertConfig} from '../config';
 import {parseUrlDeprecated} from '../../../../src/url';
 
-describe('amp-next-page config', () => {
-  describes.sandboxed('assertConfig', {}, (env) => {
-    const documentUrl = 'https://example.com/parent';
-    const documentUrlCdn =
-      'https://example-com.cdn.ampproject.org/c/s/example.com/parent';
+describes.sandboxed('amp-next-page assertConfig', {}, (env) => {
+  const documentUrl = 'https://example.com/parent';
+  const documentUrlCdn =
+    'https://example-com.cdn.ampproject.org/c/s/example.com/parent';
 
-    beforeEach(() => {
-      env.sandbox.stub(Services, 'urlForDoc').returns({
-        parse: parseUrlDeprecated,
-      });
+  beforeEach(() => {
+    env.sandbox.stub(Services, 'urlForDoc').returns({
+      parse: parseUrlDeprecated,
     });
+  });
 
-    it('allows a valid config', () => {
-      const config = {
-        pages: [
-          {
-            ampUrl: 'https://example.com/article1',
-            image: 'https://example.com/image.png',
-            title: 'Article 1',
-          },
-        ],
-        hideSelectors: ['.header', 'footer'],
-      };
-      expect(() =>
-        assertConfig(/*ctx*/ null, config, documentUrl)
-      ).to.not.throw();
-    });
+  it('allows a valid config', () => {
+    const config = {
+      pages: [
+        {
+          ampUrl: 'https://example.com/article1',
+          image: 'https://example.com/image.png',
+          title: 'Article 1',
+        },
+      ],
+      hideSelectors: ['.header', 'footer'],
+    };
+    expect(() =>
+      assertConfig(/*ctx*/ null, config, documentUrl)
+    ).to.not.throw();
+  });
 
-    it('allows a config with no pages', () => {
-      const config = {pages: []};
-      expect(() =>
-        assertConfig(/*ctx*/ null, config, documentUrl)
-      ).to.not.throw();
-    });
+  it('allows a config with no pages', () => {
+    const config = {pages: []};
+    expect(() =>
+      assertConfig(/*ctx*/ null, config, documentUrl)
+    ).to.not.throw();
+  });
 
-    it('rewrites relative URLs to absolute', () => {
-      const config = {
-        pages: [
-          {
-            ampUrl: '/article1',
-            image: '/image.png',
-            title: 'Article 1',
-          },
-        ],
-      };
-      expect(() =>
-        assertConfig(/*ctx*/ null, config, documentUrl)
-      ).to.not.throw();
-      expect(config.pages[0].ampUrl).to.equal('https://example.com/article1');
-    });
+  it('rewrites relative URLs to absolute', () => {
+    const config = {
+      pages: [
+        {
+          ampUrl: '/article1',
+          image: '/image.png',
+          title: 'Article 1',
+        },
+      ],
+    };
+    expect(() =>
+      assertConfig(/*ctx*/ null, config, documentUrl)
+    ).to.not.throw();
+    expect(config.pages[0].ampUrl).to.equal('https://example.com/article1');
+  });
 
-    it('rewrites relative URLs when served from the cache', () => {
-      const config = {
-        pages: [
-          {
-            ampUrl: '/article1',
-            image: '/image.png',
-            title: 'Article 1',
-          },
-        ],
-      };
-      expect(() =>
-        assertConfig(/*ctx*/ null, config, documentUrlCdn)
-      ).to.not.throw();
-      expect(config.pages[0].ampUrl).to.equal(
-        'https://example-com.cdn.ampproject.org/c/s/example.com/article1'
-      );
-    });
+  it('rewrites relative URLs when served from the cache', () => {
+    const config = {
+      pages: [
+        {
+          ampUrl: '/article1',
+          image: '/image.png',
+          title: 'Article 1',
+        },
+      ],
+    };
+    expect(() =>
+      assertConfig(/*ctx*/ null, config, documentUrlCdn)
+    ).to.not.throw();
+    expect(config.pages[0].ampUrl).to.equal(
+      'https://example-com.cdn.ampproject.org/c/s/example.com/article1'
+    );
+  });
 
-    it('rewrites canonical URLs when served from the cache', () => {
-      const config = {
-        pages: [
-          {
-            ampUrl:
-              'https://example-com.cdn.ampproject.org/c/s/example.com/art1',
-            image: 'https://example.com/image.png',
-            title: 'Article 1',
-          },
-          {
-            ampUrl: 'https://example.com/art2?x=1',
-            image: 'https://example.com/image.png',
-            title: 'Article 1',
-          },
-        ],
-      };
-      expect(() =>
-        assertConfig(/*ctx*/ null, config, documentUrlCdn)
-      ).to.not.throw();
-      expect(config.pages[0].ampUrl).to.equal(
-        'https://example-com.cdn.ampproject.org/c/s/example.com/art1'
-      );
-      expect(config.pages[1].ampUrl).to.equal(
-        'https://example-com.cdn.ampproject.org/c/s/example.com/art2?x=1'
-      );
-    });
+  it('rewrites canonical URLs when served from the cache', () => {
+    const config = {
+      pages: [
+        {
+          ampUrl: 'https://example-com.cdn.ampproject.org/c/s/example.com/art1',
+          image: 'https://example.com/image.png',
+          title: 'Article 1',
+        },
+        {
+          ampUrl: 'https://example.com/art2?x=1',
+          image: 'https://example.com/image.png',
+          title: 'Article 1',
+        },
+      ],
+    };
+    expect(() =>
+      assertConfig(/*ctx*/ null, config, documentUrlCdn)
+    ).to.not.throw();
+    expect(config.pages[0].ampUrl).to.equal(
+      'https://example-com.cdn.ampproject.org/c/s/example.com/art1'
+    );
+    expect(config.pages[1].ampUrl).to.equal(
+      'https://example-com.cdn.ampproject.org/c/s/example.com/art2?x=1'
+    );
+  });
 
-    it('rewrites non-HTTPS canonical URLs when served from the cache', () => {
-      const url = documentUrlCdn.replace('/s/', '/');
-      const config = {
-        pages: [
-          {
-            ampUrl: 'http://example.com/art2?x=1',
-            image: 'http://example.com/image.png',
-            title: 'Article 1',
-          },
-        ],
-      };
+  it('rewrites non-HTTPS canonical URLs when served from the cache', () => {
+    const url = documentUrlCdn.replace('/s/', '/');
+    const config = {
+      pages: [
+        {
+          ampUrl: 'http://example.com/art2?x=1',
+          image: 'http://example.com/image.png',
+          title: 'Article 1',
+        },
+      ],
+    };
+
+    expect(() => assertConfig(/*ctx*/ null, config, url)).to.not.throw();
+
+    expect(config.pages[0].ampUrl).to.equal(
+      'https://example-com.cdn.ampproject.org/c/example.com/art2?x=1'
+    );
+  });
 
-      expect(() => assertConfig(/*ctx*/ null, config, url)).to.not.throw();
+  it("doesn't rewrite URLs if sourceOrigin and origin match", () => {
+    const config = {
+      pages: [
+        {
+          ampUrl: 'https://example.com/article',
+          image: 'https://example.com/image.png',
+          title: 'Article 1',
+        },
+      ],
+    };
+    expect(() =>
+      assertConfig(/*ctx*/ null, config, documentUrl)
+    ).to.not.throw();
+    expect(config.pages[0].ampUrl).to.equal('https://example.com/article');
+  });
 
-      expect(config.pages[0].ampUrl).to.equal(
-        'https://example-com.cdn.ampproject.org/c/example.com/art2?x=1'
+  it('throws on null config', () => {
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, null, documentUrl)).to.throw(
+        'amp-next-page config must be specified'
       );
     });
+  });
 
-    it("doesn't rewrite URLs if sourceOrigin and origin match", () => {
-      const config = {
-        pages: [
-          {
-            ampUrl: 'https://example.com/article',
-            image: 'https://example.com/image.png',
-            title: 'Article 1',
-          },
-        ],
-      };
-      expect(() =>
-        assertConfig(/*ctx*/ null, config, documentUrl)
-      ).to.not.throw();
-      expect(config.pages[0].ampUrl).to.equal('https://example.com/article');
+  it('throws on config with no "pages" key', () => {
+    const config = {};
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
+        'pages must be an array'
+      );
     });
+  });
 
-    it('throws on null config', () => {
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, null, documentUrl)).to.throw(
-          'amp-next-page config must be specified'
-        );
-      });
+  it('throws on config with non-array "pages" key', () => {
+    const config = {pages: {}};
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
+        'pages must be an array'
+      );
     });
+  });
 
-    it('throws on config with no "pages" key', () => {
-      const config = {};
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
-          'pages must be an array'
-        );
-      });
+  it('throws on config with missing recommendation title', () => {
+    const config = {
+      pages: [
+        {
+          ampUrl: 'https://example.com/article1',
+          image: 'https://example.com/image.png',
+        },
+      ],
+    };
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
+        'title must be a string'
+      );
     });
+  });
 
-    it('throws on config with non-array "pages" key', () => {
-      const config = {pages: {}};
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
-          'pages must be an array'
-        );
-      });
+  it('throws on config with non-string recommendation title', () => {
+    const config = {
+      pages: [
+        {
+          ampUrl: 'https://example.com/article1',
+          image: 'https://example.com/image.png',
+          title: {},
+        },
+      ],
+    };
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
+        'title must be a string'
+      );
     });
+  });
 
-    it('throws on config with missing recommendation title', () => {
-      const config = {
-        pages: [
-          {
-            ampUrl: 'https://example.com/article1',
-            image: 'https://example.com/image.png',
-          },
-        ],
-      };
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
-          'title must be a string'
-        );
-      });
+  it('throws on config with missing recommendation image', () => {
+    const config = {
+      pages: [
+        {
+          ampUrl: 'https://example.com/article1',
+          title: 'Article 1',
+        },
+      ],
+    };
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
+        'image must be a string'
+      );
     });
+  });
 
-    it('throws on config with non-string recommendation title', () => {
-      const config = {
-        pages: [
-          {
-            ampUrl: 'https://example.com/article1',
-            image: 'https://example.com/image.png',
-            title: {},
-          },
-        ],
-      };
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
-          'title must be a string'
-        );
-      });
+  it('throws on config with non-string recommendation image', () => {
+    const config = {
+      pages: [
+        {
+          ampUrl: 'https://example.com/article1',
+          image: {},
+          title: 'Article 1',
+        },
+      ],
+    };
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
+        'image must be a string'
+      );
     });
+  });
 
-    it('throws on config with missing recommendation image', () => {
-      const config = {
-        pages: [
-          {
-            ampUrl: 'https://example.com/article1',
-            title: 'Article 1',
-          },
-        ],
-      };
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
-          'image must be a string'
-        );
-      });
+  it('throws on config with pages from different domains', () => {
+    const config = {
+      pages: [
+        {
+          ampUrl: 'https://othersite.com/article1',
+          image: 'https://othersite.com/image.png',
+          title: 'Article 1',
+        },
+      ],
+    };
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
+        'pages must be from the same origin as the current document'
+      );
     });
+  });
 
-    it('throws on config with non-string recommendation image', () => {
-      const config = {
-        pages: [
-          {
-            ampUrl: 'https://example.com/article1',
-            image: {},
-            title: 'Article 1',
-          },
-        ],
-      };
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
-          'image must be a string'
-        );
-      });
+  it('throws on config with pages from different subdomains', () => {
+    const config = {
+      pages: [
+        {
+          ampUrl: 'https://www.example.com/article1',
+          image: 'https://example.com/image.png',
+          title: 'Article 1',
+        },
+      ],
+    };
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
+        'pages must be from the same origin as the current document'
+      );
     });
+  });
 
-    it('throws on config with pages from different domains', () => {
-      const config = {
-        pages: [
-          {
-            ampUrl: 'https://othersite.com/article1',
-            image: 'https://othersite.com/image.png',
-            title: 'Article 1',
-          },
-        ],
-      };
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
-          'pages must be from the same origin as the current document'
-        );
-      });
+  it('throws on config with pages on different ports', () => {
+    const config = {
+      pages: [
+        {
+          ampUrl: 'https://example.com:8080/article1',
+          image: 'https://example.com/image.png',
+          title: 'Article 1',
+        },
+      ],
+    };
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
+        'pages must be from the same origin as the current document'
+      );
     });
+  });
 
-    it('throws on config with pages from different subdomains', () => {
-      const config = {
-        pages: [
-          {
-            ampUrl: 'https://www.example.com/article1',
-            image: 'https://example.com/image.png',
-            title: 'Article 1',
-          },
-        ],
-      };
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
-          'pages must be from the same origin as the current document'
-        );
-      });
+  it('throws on config with non-array "hideSelectors" key', () => {
+    const config = {
+      pages: [],
+      hideSelectors: {},
+    };
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
+        'amp-next-page hideSelectors should be an array'
+      );
     });
+  });
 
-    it('throws on config with pages on different ports', () => {
-      const config = {
-        pages: [
-          {
-            ampUrl: 'https://example.com:8080/article1',
-            image: 'https://example.com/image.png',
-            title: 'Article 1',
-          },
-        ],
-      };
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
-          'pages must be from the same origin as the current document'
-        );
-      });
+  it('throws for non-string hideSelector values', () => {
+    const config = {
+      pages: [],
+      hideSelectors: ['a', 2],
+    };
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
+        'amp-next-page hideSelector value should be a string: 2'
+      );
     });
+  });
 
-    it('throws on config with non-array "hideSelectors" key', () => {
-      const config = {
-        pages: [],
-        hideSelectors: {},
-      };
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
-          'amp-next-page hideSelectors should be an array'
-        );
-      });
+  it('throws for hideSelector values for i-amphtml selectors', () => {
+    const config = {
+      pages: [],
+      hideSelectors: ['   .i-amphtml-something'],
+    };
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
+        /amp-next-page hideSelector .+ not allowed/
+      );
     });
+  });
 
-    it('throws for non-string hideSelector values', () => {
-      const config = {
-        pages: [],
-        hideSelectors: ['a', 2],
-      };
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
-          'amp-next-page hideSelector value should be a string: 2'
-        );
-      });
-    });
+  it('allows AdSense URLs which target the same origin', () => {
+    const config = {
+      pages: [
+        {
+          ampUrl:
+            'https://googleads.g.doubleclick.net/aclk?adurl=https://example.com/article',
+          image: 'https://example.com/image.png',
+          title: 'Article 1',
+        },
+      ],
+    };
+    expect(() =>
+      assertConfig(/*ctx*/ null, config, documentUrl)
+    ).to.not.throw();
+  });
 
-    it('throws for hideSelector values for i-amphtml selectors', () => {
-      const config = {
-        pages: [],
-        hideSelectors: ['   .i-amphtml-something'],
-      };
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, config, documentUrl)).to.throw(
-          /amp-next-page hideSelector .+ not allowed/
-        );
-      });
-    });
+  it('allows AdSense URLs which target the same CDN origin', () => {
+    const config = {
+      pages: [
+        {
+          ampUrl:
+            'https://googleads.g.doubleclick.net/aclk?adurl=https://example-com.cdn.ampproject.org/c/s/example.com/article',
+          image: 'https://example.com/image.png',
+          title: 'Article 1',
+        },
+      ],
+    };
+    expect(() =>
+      assertConfig(/*ctx*/ null, config, documentUrlCdn)
+    ).to.not.throw();
+  });
 
-    it('allows AdSense URLs which target the same origin', () => {
-      const config = {
-        pages: [
-          {
-            ampUrl:
-              'https://googleads.g.doubleclick.net/aclk?adurl=https://example.com/article',
-            image: 'https://example.com/image.png',
-            title: 'Article 1',
-          },
-        ],
-      };
-      expect(() =>
-        assertConfig(/*ctx*/ null, config, documentUrl)
-      ).to.not.throw();
+  it('throws for AdSense URLs which target different origins', () => {
+    const config1 = {
+      pages: [
+        {
+          ampUrl:
+            'https://googleads.g.doubleclick.net/aclk?adurl=https://other.com/article',
+          image: 'https://example.com/image.png',
+          title: 'Article 1',
+        },
+      ],
+    };
+    const config2 = {
+      pages: [
+        {
+          ampUrl:
+            'https://googleads.g.doubleclick.net/aclk?adurl=https://other-com.cdn.ampproject.org/c/s/example.com/article',
+          image: 'https://example.com/image.png',
+          title: 'Article 1',
+        },
+      ],
+    };
+    allowConsoleError(() => {
+      expect(() => assertConfig(/*ctx*/ null, config1, documentUrl)).to.throw(
+        'pages must be from the same origin as the current document'
+      );
     });
-
-    it('allows AdSense URLs which target the same CDN origin', () => {
-      const config = {
-        pages: [
-          {
-            ampUrl:
-              'https://googleads.g.doubleclick.net/aclk?adurl=https://example-com.cdn.ampproject.org/c/s/example.com/article',
-            image: 'https://example.com/image.png',
-            title: 'Article 1',
-          },
-        ],
-      };
+    allowConsoleError(() => {
       expect(() =>
-        assertConfig(/*ctx*/ null, config, documentUrlCdn)
-      ).to.not.throw();
-    });
-
-    it('throws for AdSense URLs which target different origins', () => {
-      const config1 = {
-        pages: [
-          {
-            ampUrl:
-              'https://googleads.g.doubleclick.net/aclk?adurl=https://other.com/article',
-            image: 'https://example.com/image.png',
-            title: 'Article 1',
-          },
-        ],
-      };
-      const config2 = {
-        pages: [
-          {
-            ampUrl:
-              'https://googleads.g.doubleclick.net/aclk?adurl=https://other-com.cdn.ampproject.org/c/s/example.com/article',
-            image: 'https://example.com/image.png',
-            title: 'Article 1',
-          },
-        ],
-      };
-      allowConsoleError(() => {
-        expect(() => assertConfig(/*ctx*/ null, config1, documentUrl)).to.throw(
-          'pages must be from the same origin as the current document'
-        );
-      });
-      allowConsoleError(() => {
-        expect(() =>
-          assertConfig(/*ctx*/ null, config2, documentUrlCdn)
-        ).to.throw(
-          'pages must be from the same origin as the current document'
-        );
-      });
+        assertConfig(/*ctx*/ null, config2, documentUrlCdn)
+      ).to.throw('pages must be from the same origin as the current document');
     });
   });
 });
diff --git a/extensions/amp-next-page/0.1/test/validator-amp-next-page-adsense.html b/extensions/amp-next-page/0.1/test/validator-amp-next-page-adsense.html
index 33b2ff09fd6db..4ba930dbe1d83 100644
--- a/extensions/amp-next-page/0.1/test/validator-amp-next-page-adsense.html
+++ b/extensions/amp-next-page/0.1/test/validator-amp-next-page-adsense.html
@@ -5,7 +5,6 @@
   <title>AMP next page examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-0.1.js"></script>
diff --git a/extensions/amp-next-page/0.1/test/validator-amp-next-page-adsense.out b/extensions/amp-next-page/0.1/test/validator-amp-next-page-adsense.out
index de49cf973ada3..cd8dd604af04f 100644
--- a/extensions/amp-next-page/0.1/test/validator-amp-next-page-adsense.out
+++ b/extensions/amp-next-page/0.1/test/validator-amp-next-page-adsense.out
@@ -6,7 +6,6 @@ PASS
 |    <title>AMP next page examples</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-0.1.js"></script>
diff --git a/extensions/amp-next-page/0.1/test/validator-amp-next-page-inline.html b/extensions/amp-next-page/0.1/test/validator-amp-next-page-inline.html
index bf6b9b840f809..2e3757ceac244 100644
--- a/extensions/amp-next-page/0.1/test/validator-amp-next-page-inline.html
+++ b/extensions/amp-next-page/0.1/test/validator-amp-next-page-inline.html
@@ -5,7 +5,6 @@
   <title>AMP next page examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-0.1.js"></script>
diff --git a/extensions/amp-next-page/0.1/test/validator-amp-next-page-inline.out b/extensions/amp-next-page/0.1/test/validator-amp-next-page-inline.out
index 04ce11f9bc47a..193bdf2aeb50d 100644
--- a/extensions/amp-next-page/0.1/test/validator-amp-next-page-inline.out
+++ b/extensions/amp-next-page/0.1/test/validator-amp-next-page-inline.out
@@ -6,7 +6,6 @@ PASS
 |    <title>AMP next page examples</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-0.1.js"></script>
@@ -66,4 +65,4 @@ PASS
 |      Footer
 |    </footer>
 |  </body>
-|  </html>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-next-page/0.1/test/validator-amp-next-page.html b/extensions/amp-next-page/0.1/test/validator-amp-next-page.html
index 5c09e79dfb4f4..07fa2e4fdcac8 100644
--- a/extensions/amp-next-page/0.1/test/validator-amp-next-page.html
+++ b/extensions/amp-next-page/0.1/test/validator-amp-next-page.html
@@ -5,7 +5,6 @@
   <title>AMP next page examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-0.1.js"></script>
diff --git a/extensions/amp-next-page/0.1/test/validator-amp-next-page.out b/extensions/amp-next-page/0.1/test/validator-amp-next-page.out
index 9eb17c5c202f4..70cfce3942b72 100644
--- a/extensions/amp-next-page/0.1/test/validator-amp-next-page.out
+++ b/extensions/amp-next-page/0.1/test/validator-amp-next-page.out
@@ -6,7 +6,6 @@ PASS
 |    <title>AMP next page examples</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-0.1.js"></script>
diff --git a/extensions/amp-next-page/1.0/page.js b/extensions/amp-next-page/1.0/page.js
index e552d811aa68d..5e9e535c5565b 100644
--- a/extensions/amp-next-page/1.0/page.js
+++ b/extensions/amp-next-page/1.0/page.js
@@ -15,7 +15,7 @@
  */
 
 import {ViewportRelativePos} from './visibility-observer';
-import {VisibilityState} from '../../../src/visibility-state';
+import {VisibilityState} from '../../../src/core/constants/visibility-state';
 import {devAssert} from '../../../src/log';
 
 /** @enum {number} */
diff --git a/extensions/amp-next-page/1.0/service.js b/extensions/amp-next-page/1.0/service.js
index 2287d21927462..025f55f96b2d5 100644
--- a/extensions/amp-next-page/1.0/service.js
+++ b/extensions/amp-next-page/1.0/service.js
@@ -22,7 +22,7 @@ import {
   UrlReplacementPolicy,
   batchFetchJsonFor,
 } from '../../../src/batched-json';
-import {VisibilityState} from '../../../src/visibility-state';
+import {VisibilityState} from '../../../src/core/constants/visibility-state';
 import {
   childElementByAttr,
   childElementsByTag,
@@ -33,8 +33,8 @@ import {
   scopedQuerySelector,
 } from '../../../src/dom';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {escapeCssSelectorIdent} from '../../../src/css';
-import {findIndex} from '../../../src/utils/array';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
+import {findIndex, toArray} from '../../../src/core/types/array';
 import {htmlFor, htmlRefs} from '../../../src/static-template';
 import {installStylesForDoc} from '../../../src/style-installer';
 import {
@@ -43,9 +43,9 @@ import {
   parseSchemaImage,
 } from '../../../src/mediasession-helper';
 import {setStyles, toggle} from '../../../src/style';
-import {toArray} from '../../../src/types';
+
 import {triggerAnalyticsEvent} from '../../../src/analytics';
-import {tryParseJson} from '../../../src/json';
+import {tryParseJson} from '../../../src/core/types/object/json';
 import {validatePage, validateUrl} from './utils';
 import VisibilityObserver, {ViewportRelativePos} from './visibility-observer';
 
@@ -82,6 +82,9 @@ export class NextPageService {
      */
     this.viewport_ = Services.viewportForDoc(ampdoc);
 
+    /** @private {!../../../src/service/viewer-interface.ViewerInterface} */
+    this.viewer_ = Services.viewerForDoc(ampdoc);
+
     /**
      * @private
      * @const {!../../../src/service/mutator-interface.MutatorInterface}
@@ -89,7 +92,7 @@ export class NextPageService {
     this.mutator_ = Services.mutatorForDoc(ampdoc);
 
     /** @private @const {!../../../src/service/template-impl.Templates} */
-    this.templates_ = Services.templatesFor(this.win_);
+    this.templates_ = Services.templatesForDoc(ampdoc);
 
     /** @private {?Element} */
     this.separator_ = null;
@@ -198,12 +201,17 @@ export class NextPageService {
 
     // Create a reference to the host page
     this.hostPage_ = this.createHostPage();
+
+    // Set the current title page as the host page so we don't do replaceState and
+    // trigger `amp-next-page-scroll` event (in `setPageTitle` method) when
+    // next page is not even displayed (issue #33404).
+    this.currentTitlePage_ = this.hostPage_;
+
     this.toggleHiddenAndReplaceableElements(this.doc_);
     // Have the recommendation box be always visible
     insertAtStart(this.host_, this.recBox_);
 
     this.history_ = Services.historyForDoc(this.ampdoc_);
-    this.initializeHistory();
 
     this.navigation_ = Services.navigationForDoc(this.ampdoc_);
 
@@ -477,25 +485,17 @@ export class NextPageService {
       /** @type {!JsonObject} */ ({
         'title': title,
         'url': url,
-      })
+      }),
+      /** enableDataVars */ false
     );
   }
 
-  /**
-   * Adds an initial entry in history that sub-pages can
-   * replace when they become visible
-   */
-  initializeHistory() {
-    const {title, url} = this.hostPage_;
-    this.history_.push(undefined /** opt_onPop */, {title, url});
-  }
-
   /**
    * Creates the initial (host) page based on the window's metadata
    * @return {!HostPage}
    */
   createHostPage() {
-    const {title, location} = this.doc_;
+    const {location, title} = this.doc_;
     const {href: url} = location;
     const image =
       parseSchemaImage(this.doc_) ||
@@ -503,17 +503,19 @@ export class NextPageService {
       parseFavicon(this.doc_) ||
       '';
 
-    return /** @type {!HostPage} */ (new HostPage(
-      this,
-      {
-        url,
-        title: title || '',
-        image,
-      },
-      PageState.INSERTED /** initState */,
-      VisibilityState.VISIBLE /** initVisibility */,
-      this.doc_
-    ));
+    return /** @type {!HostPage} */ (
+      new HostPage(
+        this,
+        {
+          url,
+          title: title || '',
+          image,
+        },
+        PageState.INSERTED /** initState */,
+        VisibilityState.VISIBLE /** initVisibility */,
+        this.doc_
+      )
+    );
   }
 
   /**
@@ -545,6 +547,20 @@ export class NextPageService {
     return container;
   }
 
+  /**
+   * Forward the allowlisted capabilities from the viewer
+   * to the multidoc's ampdocs (i.e. CID), so they know
+   * the viewer supports it for the multidoc.
+   * @return {?string}
+   */
+  getCapabilities_() {
+    const hasCidCapabilities = this.viewer_.hasCapability('cid');
+    if (hasCidCapabilities) {
+      return 'cid';
+    }
+    return null;
+  }
+
   /**
    * Appends the given document to the host page and installs
    * a visibility observer to monitor it
@@ -593,9 +609,10 @@ export class NextPageService {
       const amp = this.multidocManager_.attachShadowDoc(
         shadowRoot,
         content,
-        '',
+        page.url,
         {
           visibilityState: VisibilityState.PRERENDER,
+          cap: this.getCapabilities_(),
         }
       );
 
@@ -670,7 +687,7 @@ export class NextPageService {
     toArray(doc.querySelectorAll('amp-next-page')).forEach((el) => {
       if (this.hasDeepParsing_) {
         const pages = this.getInlinePages_(el);
-        this.queuePages_(pages);
+        this.fetchAndQueuePages_(pages);
       }
       removeElement(el);
     });
@@ -781,7 +798,7 @@ export class NextPageService {
   initializePageQueue_() {
     const inlinePages = this.getInlinePages_(this.getHost_());
     if (inlinePages.length) {
-      return this.queuePages_(inlinePages);
+      return this.fetchAndQueuePages_(inlinePages);
     }
 
     userAssert(
@@ -795,7 +812,7 @@ export class NextPageService {
         user().warn(TAG, 'Could not find recommendations');
         return Promise.resolve();
       }
-      return this.queuePages_(remotePages);
+      return this.fetchAndQueuePages_(remotePages);
     });
   }
 
@@ -826,9 +843,19 @@ export class NextPageService {
       }
     });
 
+    return Promise.resolve();
+  }
+
+  /**
+   * Add the provided page metadata into the queue of
+   * pages to fetch then fetches again
+   * @param {!Array<!./page.PageMeta>} pages
+   * @return {!Promise}
+   */
+  fetchAndQueuePages_(pages) {
     // To be safe, if the pages were parsed after the user
-    // finished scrolling
-    return this.maybeFetchNext();
+    // finished scrolling, we fetch again
+    return this.queuePages_(pages).then(() => this.maybeFetchNext());
   }
 
   /**
@@ -857,10 +884,12 @@ export class NextPageService {
       user().error(TAG, 'failed to parse inline page list', error);
     });
 
-    const pages = /** @type {!Array<!./page.PageMeta>} */ (user().assertArray(
-      parsed,
-      `${TAG} Page list expected an array, found: ${typeof parsed}`
-    ));
+    const pages = /** @type {!Array<!./page.PageMeta>} */ (
+      user().assertArray(
+        parsed,
+        `${TAG} Page list expected an array, found: ${typeof parsed}`
+      )
+    );
 
     removeElement(scriptElement);
     return pages;
@@ -878,8 +907,9 @@ export class NextPageService {
     }
 
     if (this.remoteFetchingPromise_) {
-      return /** @type {!Promise<!Array<!./page.PageMeta>>} */ (this
-        .remoteFetchingPromise_);
+      return /** @type {!Promise<!Array<!./page.PageMeta>>} */ (
+        this.remoteFetchingPromise_
+      );
     }
 
     this.remoteFetchingPromise_ = batchFetchJsonFor(
@@ -903,8 +933,9 @@ export class NextPageService {
         return [];
       });
 
-    return /** @type {!Promise<!Array<!./page.PageMeta>>} */ (this
-      .remoteFetchingPromise_);
+    return /** @type {!Promise<!Array<!./page.PageMeta>>} */ (
+      this.remoteFetchingPromise_
+    );
   }
 
   /**
@@ -1072,7 +1103,8 @@ export class NextPageService {
           /** @type {!JsonObject} */ ({
             'title': page.title,
             'url': page.url,
-          })
+          }),
+          /** enableDataVars */ false
         );
         const a2a = this.navigation_.navigateToAmpUrl(
           page.url,
diff --git a/extensions/amp-next-page/1.0/test/test-amp-next-page.js b/extensions/amp-next-page/1.0/test/test-amp-next-page.js
index 5df3fff1b1207..621167efe275a 100644
--- a/extensions/amp-next-page/1.0/test/test-amp-next-page.js
+++ b/extensions/amp-next-page/1.0/test/test-amp-next-page.js
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 import '../amp-next-page';
-import {PageState} from '../page';
+import {HostPage, PageState} from '../page';
 import {ScrollDirection, ViewportRelativePos} from '../visibility-observer';
 import {Services} from '../../../../src/services';
-import {VisibilityState} from '../../../../src/visibility-state';
+import {VisibilityState} from '../../../../src/core/constants/visibility-state';
 import {htmlFor} from '../../../../src/static-template';
 import {setStyle} from '../../../../src/style';
 
@@ -120,7 +120,7 @@ describes.realWin(
         options.scrollTop != undefined ? options.scrollTop : 1;
 
       if (waitForLayout) {
-        await element.build();
+        await element.buildInternal();
         await element.layoutCallback();
       }
 
@@ -175,7 +175,7 @@ describes.realWin(
           false /** waitForLayout */
         );
         await allowConsoleError(() =>
-          element.build().catch((err) => {
+          element.buildInternal().catch((err) => {
             expect(err.message).to.include(
               'amp-next-page Page list expected an array, found: object: [object Object]'
             );
@@ -248,7 +248,7 @@ describes.realWin(
           });
         const service = Services.nextPageServiceForDoc(doc);
 
-        await element.build();
+        await element.buildInternal();
         await element.layoutCallback();
 
         expect(
@@ -438,6 +438,7 @@ describes.realWin(
     describe('initial behavior', () => {
       let element;
       let service;
+      let hostPage;
 
       beforeEach(async () => {
         element = await getAmpNextPage(
@@ -448,8 +449,21 @@ describes.realWin(
           /* no awaiting */ false
         );
 
+        hostPage = new HostPage(
+          {} /* nextPageService */,
+          {
+            url: 'test.html',
+            title: 'test title',
+            img: '/img.jpg',
+          },
+          PageState.INSERTED /** initState */,
+          VisibilityState.VISIBLE /** initVisibility */,
+          {} /* Document */
+        );
+
         service = Services.nextPageServiceForDoc(doc);
         env.sandbox.stub(service, 'getViewportsAway_').returns(2);
+        env.sandbox.stub(service, 'createHostPage').returns(hostPage);
       });
 
       afterEach(async () => {
@@ -457,11 +471,13 @@ describes.realWin(
       });
 
       it('awaits first scroll', async () => {
-        element.build();
-        await Promise.resolve();
+        element.buildInternal();
+        await new Promise(setTimeout);
         expect(service.pages_.length).to.equal(1);
+        expect(service.hostPage_).to.equal(hostPage);
+        expect(service.currentTitlePage_).to.equal(service.hostPage_);
         win.dispatchEvent(new Event('scroll'));
-        await Promise.resolve();
+        await new Promise(setTimeout);
         expect(service.pages_.length).to.equal(3);
       });
     });
@@ -585,6 +601,37 @@ describes.realWin(
       });
     });
 
+    describe('amp-next-page within Viewer', () => {
+      let element;
+      let service;
+
+      beforeEach(async () => {
+        element = await getAmpNextPage({
+          inlineConfig: VALID_CONFIG,
+        });
+
+        service = Services.nextPageServiceForDoc(doc);
+        env.sandbox.stub(service, 'getViewportsAway_').returns(2);
+      });
+
+      afterEach(async () => {
+        element.parentNode.removeChild(element);
+      });
+
+      it('propagates viewer cid capabilties', async () => {
+        // Fake capabilities
+        ampdoc.params_['cap'] = 'swipe,cid';
+        await fetchDocuments(service, MOCK_NEXT_PAGE, 2);
+        // Don't need to check the host page.
+        // Will only be forwarded `cid`
+        [1, 2].forEach((index) => {
+          expect(
+            service.pages_[index].shadowDoc.ampdoc.getParam('cap')
+          ).to.equal('cid');
+        });
+      });
+    });
+
     describe('default separators & footers', () => {
       let element;
       let service;
@@ -639,11 +686,7 @@ describes.realWin(
       });
 
       it('renders a custom separator correctly', async () => {
-        const separator = html`
-          <div separator>
-            Custom separator
-          </div>
-        `;
+        const separator = html` <div separator>Custom separator</div> `;
 
         element = await getAmpNextPage({
           inlineConfig: VALID_CONFIG,
@@ -708,12 +751,10 @@ describes.realWin(
           }
         );
 
-        const template1 = service.pages_[1].container.querySelector(
-          '[separator]'
-        );
-        const template2 = service.pages_[2].container.querySelector(
-          '[separator]'
-        );
+        const template1 =
+          service.pages_[1].container.querySelector('[separator]');
+        const template2 =
+          service.pages_[2].container.querySelector('[separator]');
 
         expect(template1.innerText).to.equal('Rendered 1');
         expect(template2.innerText).to.equal('Rendered 2');
diff --git a/extensions/amp-next-page/1.0/test/validator-amp-next-page-hide.html b/extensions/amp-next-page/1.0/test/validator-amp-next-page-hide.html
index 85baebf4a4ab5..fa2a88f783d9f 100644
--- a/extensions/amp-next-page/1.0/test/validator-amp-next-page-hide.html
+++ b/extensions/amp-next-page/1.0/test/validator-amp-next-page-hide.html
@@ -5,7 +5,6 @@
   <title>AMP next page examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
diff --git a/extensions/amp-next-page/1.0/test/validator-amp-next-page-hide.out b/extensions/amp-next-page/1.0/test/validator-amp-next-page-hide.out
index 022d774d452ba..0ae155c56016c 100644
--- a/extensions/amp-next-page/1.0/test/validator-amp-next-page-hide.out
+++ b/extensions/amp-next-page/1.0/test/validator-amp-next-page-hide.out
@@ -6,7 +6,6 @@ PASS
 |    <title>AMP next page examples</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
diff --git a/extensions/amp-next-page/1.0/test/validator-amp-next-page-inline.html b/extensions/amp-next-page/1.0/test/validator-amp-next-page-inline.html
index 270ee4d5701e0..2519a470c8605 100644
--- a/extensions/amp-next-page/1.0/test/validator-amp-next-page-inline.html
+++ b/extensions/amp-next-page/1.0/test/validator-amp-next-page-inline.html
@@ -5,7 +5,6 @@
   <title>AMP next page examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
@@ -53,7 +52,7 @@ <h2>Content discovery</h2>
     </div>
     <div footer>
       Footer
-    </div>   
+    </div>
   </amp-next-page>
 </body>
 </html>
diff --git a/extensions/amp-next-page/1.0/test/validator-amp-next-page-inline.out b/extensions/amp-next-page/1.0/test/validator-amp-next-page-inline.out
index ff20ecef8c0a9..b1bdc2696a16d 100644
--- a/extensions/amp-next-page/1.0/test/validator-amp-next-page-inline.out
+++ b/extensions/amp-next-page/1.0/test/validator-amp-next-page-inline.out
@@ -6,7 +6,6 @@ PASS
 |    <title>AMP next page examples</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
@@ -54,7 +53,7 @@ PASS
 |      </div>
 |      <div footer>
 |        Footer
-|      </div>   
+|      </div>
 |    </amp-next-page>
 |  </body>
 |  </html>
\ No newline at end of file
diff --git a/extensions/amp-next-page/1.0/test/validator-amp-next-page-placement.html b/extensions/amp-next-page/1.0/test/validator-amp-next-page-placement.html
index b4728bf2102b0..3a71d758d05f5 100644
--- a/extensions/amp-next-page/1.0/test/validator-amp-next-page-placement.html
+++ b/extensions/amp-next-page/1.0/test/validator-amp-next-page-placement.html
@@ -5,7 +5,6 @@
   <title>AMP next page examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
@@ -26,6 +25,6 @@ <h2>Content discovery</h2>
   <!-- Invalid: amp-next-page should be the last element of body (currently not enforced due to 0.1) -->
   <footer>
       Footer
-  </footer>   
+  </footer>
 </body>
 </html>
diff --git a/extensions/amp-next-page/1.0/test/validator-amp-next-page-placement.out b/extensions/amp-next-page/1.0/test/validator-amp-next-page-placement.out
index 9ed4b11703372..2913bb208c00b 100644
--- a/extensions/amp-next-page/1.0/test/validator-amp-next-page-placement.out
+++ b/extensions/amp-next-page/1.0/test/validator-amp-next-page-placement.out
@@ -6,7 +6,6 @@ PASS
 |    <title>AMP next page examples</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
@@ -27,6 +26,6 @@ PASS
 |    <!-- Invalid: amp-next-page should be the last element of body (currently not enforced due to 0.1) -->
 |    <footer>
 |        Footer
-|    </footer>   
+|    </footer>
 |  </body>
 |  </html>
\ No newline at end of file
diff --git a/extensions/amp-next-page/1.0/test/validator-amp-next-page-remote.html b/extensions/amp-next-page/1.0/test/validator-amp-next-page-remote.html
index e24931fd9bfce..cdd5f3e2945bb 100644
--- a/extensions/amp-next-page/1.0/test/validator-amp-next-page-remote.html
+++ b/extensions/amp-next-page/1.0/test/validator-amp-next-page-remote.html
@@ -5,7 +5,6 @@
   <title>AMP next page examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
@@ -51,7 +50,7 @@ <h2>Content discovery</h2>
     </div>
     <div footer>
       Footer
-    </div>   
+    </div>
   </amp-next-page>
 </body>
 </html>
diff --git a/extensions/amp-next-page/1.0/test/validator-amp-next-page-remote.out b/extensions/amp-next-page/1.0/test/validator-amp-next-page-remote.out
index 4b49e5042f909..f2b26e8c632fa 100644
--- a/extensions/amp-next-page/1.0/test/validator-amp-next-page-remote.out
+++ b/extensions/amp-next-page/1.0/test/validator-amp-next-page-remote.out
@@ -6,7 +6,6 @@ PASS
 |    <title>AMP next page examples</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
@@ -52,7 +51,7 @@ PASS
 |      </div>
 |      <div footer>
 |        Footer
-|      </div>   
+|      </div>
 |    </amp-next-page>
 |  </body>
 |  </html>
\ No newline at end of file
diff --git a/extensions/amp-next-page/1.0/test/validator-amp-next-page-templates.html b/extensions/amp-next-page/1.0/test/validator-amp-next-page-templates.html
index ab0887c3bb197..bf6e11d9a2b32 100644
--- a/extensions/amp-next-page/1.0/test/validator-amp-next-page-templates.html
+++ b/extensions/amp-next-page/1.0/test/validator-amp-next-page-templates.html
@@ -5,7 +5,6 @@
   <title>AMP next page examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
@@ -48,7 +47,7 @@ <h2>Content discovery</h2>
     </div>
     <div ooter>
         Footer
-    </div>   
+    </div>
   </amp-next-page>
 </body>
 </html>
diff --git a/extensions/amp-next-page/1.0/test/validator-amp-next-page-templates.out b/extensions/amp-next-page/1.0/test/validator-amp-next-page-templates.out
index eeb8d1428d7b4..d892cf9a05e1f 100644
--- a/extensions/amp-next-page/1.0/test/validator-amp-next-page-templates.out
+++ b/extensions/amp-next-page/1.0/test/validator-amp-next-page-templates.out
@@ -6,7 +6,6 @@ FAIL
 |    <title>AMP next page examples</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
@@ -49,9 +48,9 @@ FAIL
 |      </div>
 |      <div ooter>
 >>     ^~~~~~~~~
-amp-next-page/1.0/test/validator-amp-next-page-templates.html:49:4 The attribute 'ooter' may not appear in tag 'div'.
+amp-next-page/1.0/test/validator-amp-next-page-templates.html:48:4 The attribute 'ooter' may not appear in tag 'div'.
 |          Footer
-|      </div>   
+|      </div>
 |    </amp-next-page>
 |  </body>
 |  </html>
\ No newline at end of file
diff --git a/extensions/amp-next-page/1.0/test/validator-amp-next-page.html b/extensions/amp-next-page/1.0/test/validator-amp-next-page.html
index 3260b186cc378..e76b51db92911 100644
--- a/extensions/amp-next-page/1.0/test/validator-amp-next-page.html
+++ b/extensions/amp-next-page/1.0/test/validator-amp-next-page.html
@@ -5,7 +5,6 @@
   <title>AMP next page examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
@@ -22,7 +21,7 @@ <h2>Content discovery</h2>
     <!-- Valid: Footers should be inside amp-next-page -->
     <div footer>
         Footer
-    </div>   
+    </div>
   </amp-next-page>
 </body>
 </html>
diff --git a/extensions/amp-next-page/1.0/test/validator-amp-next-page.out b/extensions/amp-next-page/1.0/test/validator-amp-next-page.out
index bef221ee3e0c1..74c2a95aa42bd 100644
--- a/extensions/amp-next-page/1.0/test/validator-amp-next-page.out
+++ b/extensions/amp-next-page/1.0/test/validator-amp-next-page.out
@@ -6,7 +6,6 @@ PASS
 |    <title>AMP next page examples</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
@@ -23,7 +22,7 @@ PASS
 |      <!-- Valid: Footers should be inside amp-next-page -->
 |      <div footer>
 |          Footer
-|      </div>   
+|      </div>
 |    </amp-next-page>
 |  </body>
 |  </html>
\ No newline at end of file
diff --git a/extensions/amp-next-page/1.0/visibility-observer.js b/extensions/amp-next-page/1.0/visibility-observer.js
index 3b2176957b8d3..a4e2cc860f92a 100644
--- a/extensions/amp-next-page/1.0/visibility-observer.js
+++ b/extensions/amp-next-page/1.0/visibility-observer.js
@@ -22,10 +22,10 @@ import {
   PositionObserver, // eslint-disable-line no-unused-vars
   installPositionObserverServiceForDoc,
 } from '../../../src/service/position-observer/position-observer-impl';
-import {RelativePositions} from '../../../src/layout-rect';
+import {RelativePositions} from '../../../src/core/math/layout-rect';
 import {Services} from '../../../src/services';
 import {devAssert} from '../../../src/log';
-import {throttle} from '../../../src/utils/rate-limit';
+import {throttle} from '../../../src/core/types/function';
 
 /** @enum {number} */
 export const ViewportRelativePos = {
@@ -316,7 +316,7 @@ export default class VisibilityObserver {
    */
   getRelativePosFromScroll(entry) {
     // Measure the position of the host page (edge case)
-    const {viewportHeight_: vh, lastScrollTop_: scroll} = this;
+    const {lastScrollTop_: scroll, viewportHeight_: vh} = this;
     // Document height is the same as the distance from the top
     // to the <amp-next-page> element
     // TODO(wassgha): Synchronous access to position updates will
@@ -341,8 +341,8 @@ export default class VisibilityObserver {
    * @return {?ViewportRelativePos}
    */
   getRelativePosFromSentinel(entry) {
-    const {top, bottom} = entry;
-    const {INSIDE, TOP, BOTTOM} = RelativePositions;
+    const {bottom, top} = entry;
+    const {BOTTOM, INSIDE, TOP} = RelativePositions;
     if (!top && !bottom) {
       // Early exit if this an intersection change happening before a
       // sentinel position change
diff --git a/extensions/amp-next-page/OWNERS b/extensions/amp-next-page/OWNERS
index fc83ea5f5ecb3..bcca6c84614b1 100644
--- a/extensions/amp-next-page/OWNERS
+++ b/extensions/amp-next-page/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
@@ -7,7 +7,7 @@
       owners: [
         {name: 'emarchiori'},
         {name: 'peterjosling'},
-        {name: 'ampproject/wg-ui-and-a11y'},
+        {name: 'ampproject/wg-components'},
       ],
     },
   ],
diff --git a/extensions/amp-next-page/amp-next-page.md b/extensions/amp-next-page/amp-next-page.md
index 80e264836d87b..cbdb0a827afff 100644
--- a/extensions/amp-next-page/amp-next-page.md
+++ b/extensions/amp-next-page/amp-next-page.md
@@ -133,7 +133,7 @@ Remote configurations require the server to return a JSON object with the `pages
 
 ##### URL substitutions
 
-The `amp-next-page` `src` allows all standard URL variable substitutions. See the [Substitutions Guide](../../spec/amp-var-substitutions.md) for more info. For example:
+The `amp-next-page` `src` allows all standard URL variable substitutions. See the [Substitutions Guide](../../docs/spec/amp-var-substitutions.md) for more info. For example:
 
 ```html
 <amp-next-page src="https://foo.com/config.json?RANDOM"></amp-next-page>
@@ -145,9 +145,9 @@ This URL may make a request to something like `https://foo.com/config.json?0.839
 
 The `<amp-next-page>` component renders the recommendation box if one of the following situations arise:
 
-- The user reaches the end of the page before the next page had loaded.
-- The next page fails to load.
-- If the [`max-pages`](<https://amp.dev/documentation/components/amp-next-page/#max-pages+(optional)>) attribute is specified and the number of displayed pages is met.
+-   The user reaches the end of the page before the next page had loaded.
+-   The next page fails to load.
+-   If the [`max-pages`](<https://amp.dev/documentation/components/amp-next-page/#max-pages+(optional)>) attribute is specified and the number of displayed pages is met.
 
 The recommendation box contains links to the remaining pages. The default recommendation box renders the specified `image` and `title` used in the JSON configuration. It can be styled as specified in the [Styling](https://amp.dev/documentation/components/amp-next-page/#styling) section.
 
@@ -202,9 +202,9 @@ Alternatively, it is possible to create a custom separator by defining an elemen
 
 Hide elements which are common across multiple loaded pages by using the `next-page-hide` attribute. Hiding certain elements helps create an uncluttered infinite scroll experience. Such considerations include:
 
-- Avoiding stacking common page elements, such as footers.
-- Avoiding duplicate page headers in subsequent pages
-- Preventing multiple sidebars, etc.
+-   Avoiding stacking common page elements, such as footers.
+-   Avoiding duplicate page headers in subsequent pages
+-   Preventing multiple sidebars, etc.
 
 Elements with the `next-page-hide` attribute are set to `display: none` when loaded as a suggestion inside `<amp-next-page>`. These elements are visible when the document is loaded as a top-level host.
 
@@ -256,35 +256,35 @@ The experimental `0.1` version of `amp-next-page` had a similar but more restric
 1. Update your `<script custom-element>` tag to link to the `1.0` bundle of `amp-next-page`
 2. Make sure that `amp-next-page` is the last child of the body element, move any footers or other components that used to follow `<amp-next-page>` inside a container that has the `footer` attribute within the `<amp-next-page>` tag.
 3. If you were using an inline configuration, the JSON config is now an `array` of pages instead of an `object` with a `pages` entry. Additionally, you must rename the `ampUrl` key of each page to `url`.
-   ```html
-   <amp-next-page>
-     <!-- BEFORE: amp-next-page 0.1 -->
-     <script type="application/json">
-       {
-         "pages": [
-           {
-             "image": "https://example.com/image1.jpg",
-             "title": "This article shows first",
-             "ampUrl": "https://example.com/article1.amp.html"
-           }
-         ],
-         "hideSelectors": [".header", ".main footer", "#navigation"]
-       }
-     </script>
-     <!-- AFTER: amp-next-page 1.0 -->
-     <script type="application/json">
-       [
-         {
-           "image": "https://example.com/image1.jpg",
-           "title": "This article shows first",
-           // `ampUrl` was renamed to `url`
-           "url": "https://example.com/article1.amp.html"
-         }
-       ]
-       // Instead of `hideSelectors`, use the `next-page-hide` attribute
-     </script>
-   </amp-next-page>
-   ```
+    ```html
+    <amp-next-page>
+      <!-- BEFORE: amp-next-page 0.1 -->
+      <script type="application/json">
+        {
+          "pages": [
+            {
+              "image": "https://example.com/image1.jpg",
+              "title": "This article shows first",
+              "ampUrl": "https://example.com/article1.amp.html"
+            }
+          ],
+          "hideSelectors": [".header", ".main footer", "#navigation"]
+        }
+      </script>
+      <!-- AFTER: amp-next-page 1.0 -->
+      <script type="application/json">
+        [
+          {
+            "image": "https://example.com/image1.jpg",
+            "title": "This article shows first",
+            // `ampUrl` was renamed to `url`
+            "url": "https://example.com/article1.amp.html"
+          }
+        ]
+        // Instead of `hideSelectors`, use the `next-page-hide` attribute
+      </script>
+    </amp-next-page>
+    ```
 
 ## Attributes
 
@@ -320,10 +320,10 @@ The `<amp-next-page>` component renders a default recommendation box and separat
 
 You may add custom CSS styles to the default recommendation box. It exposes the following classes:
 
-- `.amp-next-page-links` for the parent container element
-- `.amp-next-page-link` for an individual article which contains:
-- `.amp-next-page-image` for the link image
-- `.amp-next-page-text` for the link text
+-   `.amp-next-page-links` for the parent container element
+-   `.amp-next-page-link` for an individual article which contains:
+-   `.amp-next-page-image` for the link image
+-   `.amp-next-page-text` for the link text
 
 ### Style the default page separator
 
@@ -341,7 +341,7 @@ Each document loads with a full-width gray horizontal line to separate it from t
 The `<amp-next-page>` component supports analytics on the hosted page as well as on subsequently loaded articles. We recommend using the same analytics triggers used on standalone articles, including scroll-bound triggers.
 
 [tip type="important"]
-Tracking page views is supported through [`<amp-pixel>`](../../builtins/amp-pixel.md) or `<amp-analytics>` on the host page. It is recommended to use the `useInitialPageSize` property of `<amp-analytics>` to get a more accurate measurement of the scroll triggers otherwise the host page's `100%` trigger point would only be fired after the user scrolled past all sub-documents. Note that this will also ignore the size changes caused by other extensions (such as expanding embedded content) so some scroll events might fire prematurely instead.
+Tracking page views is supported through [`<amp-pixel>`](../../builtins/amp-pixel/amp-pixel.md) or `<amp-analytics>` on the host page. It is recommended to use the `useInitialPageSize` property of `<amp-analytics>` to get a more accurate measurement of the scroll triggers otherwise the host page's `100%` trigger point would only be fired after the user scrolled past all sub-documents. Note that this will also ignore the size changes caused by other extensions (such as expanding embedded content) so some scroll events might fire prematurely instead.
 [/tip]
 
 Two custom analytics events are also provided on the host page to indicate transitioning between pages. These events can be tracked in the [amp-analytics](https://amp.dev/documentation/components/amp-analytics) config as follows:
@@ -390,5 +390,5 @@ Both the default recommendation box and default separator are keyboard-focusable
 
 ## Validation
 
-See [amp-next-page rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-next-page/validator-amp-next-page.protoascii)
+See [amp-next-page rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-next-page/validator-amp-next-page.protoascii)
 in the AMP validator specification.
diff --git a/extensions/amp-next-page/validator-amp-next-page.protoascii b/extensions/amp-next-page/validator-amp-next-page.protoascii
index 52f200bb16435..1bf35d8058e50 100644
--- a/extensions/amp-next-page/validator-amp-next-page.protoascii
+++ b/extensions/amp-next-page/validator-amp-next-page.protoascii
@@ -36,7 +36,7 @@ tags: {  # amp-next-page: JSON Config
     value_casei: "application/json"
     dispatch_key: NAME_VALUE_PARENT_DISPATCH
   }
-  spec_url: "https://amp.dev/documentation/components/amp-next-page"
+  spec_url: "https://amp.dev/documentation/components/amp-next-page/"
 }
 tags: {
   html_format: AMP
@@ -96,7 +96,7 @@ tags: {  # <amp-next-page>
     mandatory: true
     unique: true
   }
-  spec_url: "https://amp.dev/documentation/components/amp-next-page"
+  spec_url: "https://amp.dev/documentation/components/amp-next-page/"
 }
 tags: {  # <amp-next-page src>
   html_format: AMP
@@ -135,7 +135,7 @@ tags: {  # <amp-next-page src>
     tag_spec_name: "AMP-NEXT-PAGE > SCRIPT[type=application/json]"
     unique: true
   }
-  spec_url: "https://amp.dev/documentation/components/amp-next-page"
+  spec_url: "https://amp.dev/documentation/components/amp-next-page/"
 }
 tags: {  # <amp-next-page type="adsense">
   html_format: AMP
@@ -177,5 +177,5 @@ tags: {  # <amp-next-page type="adsense">
     tag_spec_name: "AMP-NEXT-PAGE > SCRIPT[type=application/json]"
     unique: true
   }
-  spec_url: "https://amp.dev/documentation/components/amp-next-page"
+  spec_url: "https://amp.dev/documentation/components/amp-next-page/"
 }
diff --git a/extensions/amp-nexxtv-player/0.1/amp-nexxtv-player.js b/extensions/amp-nexxtv-player/0.1/amp-nexxtv-player.js
index dc32c97310aa9..2be94b0c85be1 100644
--- a/extensions/amp-nexxtv-player/0.1/amp-nexxtv-player.js
+++ b/extensions/amp-nexxtv-player/0.1/amp-nexxtv-player.js
@@ -14,27 +14,28 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
-import {assertAbsoluteHttpOrHttpsUrl} from '../../../src/url';
+import {addParamsToUrl, assertAbsoluteHttpOrHttpsUrl} from '../../../src/url';
 import {
   createFrameFor,
   objOrParseJson,
   redispatch,
 } from '../../../src/iframe-video';
 import {dev, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {
   fullscreenEnter,
   fullscreenExit,
   isFullscreenElement,
   removeElement,
 } from '../../../src/dom';
+import {getConsentPolicyInfo} from '../../../src/consent';
 import {getData, listen} from '../../../src/event-helper';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {once} from '../../../src/utils/function';
 
 const TAG = 'amp-nexxtv-player';
 
@@ -47,8 +48,8 @@ class AmpNexxtvPlayer extends AMP.BaseElement {
     /** @private {?Element} */
     this.iframe_ = null;
 
-    /** @private {function():string} */
-    this.getVideoIframeSrc_ = once(() => this.resolveVideoIframeSrc_());
+    /**@private {?string} */
+    this.origin_ = 'https://embed.nexx.cloud/';
 
     /** @private {?Function} */
     this.unlistenMessage_ = null;
@@ -58,6 +59,9 @@ class AmpNexxtvPlayer extends AMP.BaseElement {
 
     /** @private {?Function} */
     this.playerReadyResolver_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -67,7 +71,7 @@ class AmpNexxtvPlayer extends AMP.BaseElement {
   preconnectCallback(opt_onLayout) {
     Services.preconnectFor(this.win).url(
       this.getAmpDoc(),
-      this.getVideoIframeSrc_(),
+      this.origin_,
       opt_onLayout
     );
   }
@@ -87,89 +91,93 @@ class AmpNexxtvPlayer extends AMP.BaseElement {
     Services.videoManagerForDoc(this.element).register(this);
   }
 
+  /**
+   * @param {!JsonObject} data
+   * @private
+   */
+  playerReady_(data) {
+    this.playerReadyResolver_(this.iframe_);
+
+    dev().info(TAG, 'nexx player ready', data);
+  }
+
   /**
    * @return {string}
    * @private
    */
-  resolveVideoIframeSrc_() {
+  getVideoIframeSrc_(consentString) {
     const {element: el} = this;
 
-    const mediaId = userAssert(
-      el.getAttribute('data-mediaid'),
-      'The data-mediaid attribute is required for <amp-nexxtv-player> %s',
+    const {
+      client,
+      disableAds,
+      domainId,
+      exitMode,
+      mediaid,
+      mode,
+      streamingFilter,
+      streamtype,
+    } = el.dataset;
+
+    const clientId = userAssert(
+      client || domainId,
+      'One of data-client or data-domain-id attributes is required for <amp-nexxtv-player> %s',
       el
     );
 
-    const client = userAssert(
-      el.getAttribute('data-client'),
-      'The data-client attribute is required for <amp-nexxtv-player> %s',
+    userAssert(
+      mediaid,
+      'The data-mediaid attribute is required for <amp-nexxtv-player> %s',
       el
     );
 
-    const delay = el.getAttribute('data-seek-to') || '0';
-    const mode = el.getAttribute('data-mode') || 'static';
-    const streamtype = el.getAttribute('data-streamtype') || 'video';
-    const origin =
-      el.getAttribute('data-origin') || 'https://embed.nexx.cloud/';
-    const disableAds = el.getAttribute('data-disable-ads');
-    const streamingFilter = el.getAttribute('data-streaming-filter');
-
-    let src = origin;
-
-    src += `${encodeURIComponent(client)}/`;
-    src += `${encodeURIComponent(streamtype)}/`;
-    src += encodeURIComponent(mediaId);
-    src += `?dataMode=${encodeURIComponent(mode)}&platform=amp`;
-
-    if (delay > 0) {
-      src += `&delay=${encodeURIComponent(delay)}`;
-    }
-
-    if (disableAds === '1') {
-      src += '&disableAds=1';
-    }
-
-    if (streamingFilter !== null && streamingFilter.length > 0) {
-      src += `&streamingFilter=${encodeURIComponent(streamingFilter)}`;
-    }
-
-    return assertAbsoluteHttpOrHttpsUrl(src);
+    const url =
+      this.origin_ +
+      [clientId, streamtype, mediaid].map(encodeURIComponent).join('/');
+
+    return assertAbsoluteHttpOrHttpsUrl(
+      addParamsToUrl(
+        url,
+        dict({
+          'dataMode': mode,
+          'platform': 'amp',
+          'disableAds': disableAds,
+          'streamingFilter': streamingFilter,
+          'exitMode': exitMode,
+          'consentString': consentString,
+        })
+      )
+    );
   }
 
-  /** @override */
-  viewportCallback(visible) {
-    this.element.dispatchCustomEvent(VideoEvents.VISIBILITY, {visible});
+  /**
+   * Get consent data from consent module
+   * @return {!Promise<string>}
+   */
+  getConsentPolicyInfo_() {
+    const consentPolicy = this.getConsentPolicy() || 'default';
+    return getConsentPolicyInfo(this.element, consentPolicy);
   }
 
   /** @override */
   layoutCallback() {
-    const iframe = createFrameFor(this, this.getVideoIframeSrc_());
-
-    this.iframe_ = iframe;
-
-    this.unlistenMessage_ = listen(this.win, 'message', (event) => {
-      this.handleNexxMessage_(event);
-    });
-
-    this.element.appendChild(this.iframe_);
-    const loaded = this.loadPromise(this.iframe_).then(() => {
-      this.element.dispatchCustomEvent(VideoEvents.LOAD);
+    return this.getConsentPolicyInfo_().then((consentString) => {
+      this.iframe_ = createFrameFor(
+        this,
+        this.getVideoIframeSrc_(consentString)
+      );
+      this.unlistenMessage_ = listen(this.win, 'message', (event) => {
+        this.handleNexxMessage_(event);
+      });
+      this.pauseHelper_.updatePlaying(true);
+
+      return this.loadPromise(this.iframe_);
     });
-    this.playerReadyResolver_(loaded);
-    return loaded;
   }
 
   /** @override */
   pauseCallback() {
-    if (this.iframe_) {
-      this.pause();
-    }
-  }
-
-  /** @override */
-  unlayoutOnPause() {
-    // TODO(aghassemi, #8264): Temp until #8264 is fixed.
-    return true;
+    this.pause();
   }
 
   /** @override */
@@ -186,6 +194,9 @@ class AmpNexxtvPlayer extends AMP.BaseElement {
     const deferred = new Deferred();
     this.playerReadyPromise_ = deferred.promise;
     this.playerReadyResolver_ = deferred.resolve;
+
+    this.pauseHelper_.updatePlaying(false);
+
     return true;
   }
 
@@ -221,7 +232,17 @@ class AmpNexxtvPlayer extends AMP.BaseElement {
       return;
     }
 
-    redispatch(this.element, data['event'], {
+    const eventType = data['event'];
+    if (!eventType) {
+      return;
+    }
+
+    if (eventType === 'playerready') {
+      this.playerReady_(data);
+    }
+
+    redispatch(this.element, eventType, {
+      'ready': VideoEvents.LOAD,
       'play': VideoEvents.PLAYING,
       'pause': VideoEvents.PAUSE,
       'mute': VideoEvents.MUTED,
@@ -238,7 +259,9 @@ class AmpNexxtvPlayer extends AMP.BaseElement {
 
   /** @override */
   pause() {
-    this.sendCommand_('pause');
+    if (this.iframe_) {
+      this.sendCommand_('pause');
+    }
   }
 
   /** @override */
diff --git a/extensions/amp-nexxtv-player/0.1/test/test-amp-nexxtv-player.js b/extensions/amp-nexxtv-player/0.1/test/test-amp-nexxtv-player.js
index ae3dad4277bb6..07a31e04387cc 100644
--- a/extensions/amp-nexxtv-player/0.1/test/test-amp-nexxtv-player.js
+++ b/extensions/amp-nexxtv-player/0.1/test/test-amp-nexxtv-player.js
@@ -15,7 +15,9 @@
  */
 
 import '../amp-nexxtv-player';
+import * as consent from '../../../../src/consent';
 import {VideoEvents} from '../../../../src/video-interface';
+import {createElementWithAttributes} from '../../../../src/dom';
 import {listenOncePromise} from '../../../../src/event-helper';
 
 describes.realWin(
@@ -33,89 +35,101 @@ describes.realWin(
       doc = win.document;
     });
 
-    async function getNexxtv(attributes, opt_responsive) {
-      const nexxtv = doc.createElement('amp-nexxtv-player');
-
-      for (const key in attributes) {
-        nexxtv.setAttribute(key, attributes[key]);
-      }
-      nexxtv.setAttribute('width', '111');
-      nexxtv.setAttribute('height', '222');
-      if (opt_responsive) {
-        nexxtv.setAttribute('layout', 'responsive');
-      }
-      doc.body.appendChild(nexxtv);
-      await nexxtv.build();
-      await nexxtv.layoutCallback();
-      const nexxTimerIframe = nexxtv.querySelector('iframe');
-      nexxtv.implementation_.handleNexxMessage_({
+    async function getNexxtvPlayer(attributes) {
+      const element = createElementWithAttributes(doc, 'amp-nexxtv-player', {
+        width: 111,
+        height: 222,
+        ...attributes,
+        // Use a blank page, since these tests don't require an actual page.
+        // hash # at the end so path is not affected by param concat
+        'data-origin': `http://localhost:${location.port}/test/fixtures/served/blank.html#`,
+      });
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await element.layoutCallback();
+      const impl = await element.getImpl(false);
+      const iframe = element.querySelector('iframe');
+      impl.handleNexxMessage_({
         origin: 'https://embed.nexx.cloud',
-        source: nexxTimerIframe.contentWindow,
+        source: iframe.contentWindow,
         data: JSON.stringify({cmd: 'onload'}),
       });
-      return nexxtv;
+      return element;
     }
 
     it('renders nexxtv video player', async () => {
-      const nexxtv = await getNexxtv({
-        'data-mediaid': '71QQG852413DU7J',
-        'data-client': '761',
-      });
-      const playerIframe = nexxtv.querySelector('iframe');
-      expect(playerIframe).to.not.be.null;
-      expect(playerIframe.src).to.equal(
-        'https://embed.nexx.cloud/761/video/' +
-          '71QQG852413DU7J?dataMode=static&platform=amp'
-      );
-    });
-
-    it('renders player responsive', async () => {
-      const nexxtv = await getNexxtv({
+      const element = await getNexxtvPlayer({
         'data-mediaid': '71QQG852413DU7J',
         'data-client': '761',
+        'data-streamtype': 'video',
       });
-      const playerIframe = nexxtv.querySelector('iframe');
+      const playerIframe = element.querySelector('iframe');
       expect(playerIframe).to.not.be.null;
-      expect(playerIframe.className).to.match(/i-amphtml-fill-content/);
+      expect(playerIframe.src)
+        .to.be.a('string')
+        .and.match(
+          new RegExp(
+            element.getAttribute('data-client') +
+              '/video/' +
+              element.getAttribute('data-mediaid') +
+              '\\?platform=amp' +
+              '$' // suffix
+          )
+        );
     });
 
     it('removes iframe after unlayoutCallback', async () => {
-      const nexxtv = await getNexxtv({
+      const nexxtv = await getNexxtvPlayer({
         'data-mediaid': '71QQG852413DU7J',
         'data-client': '761',
       });
       const playerIframe = nexxtv.querySelector('iframe');
       expect(playerIframe).to.not.be.null;
 
-      const obj = nexxtv.implementation_;
+      const obj = await nexxtv.getImpl(false);
       obj.unlayoutCallback();
       expect(nexxtv.querySelector('iframe')).to.be.null;
       expect(obj.iframe_).to.be.null;
     });
 
     it('should forward events from nexxtv-player to the amp element', async () => {
-      const nexxtv = await getNexxtv({
+      const nexxtv = await getNexxtvPlayer({
         'data-mediaid': '71QQG852413DU7J',
         'data-client': '761',
       });
       const iframe = nexxtv.querySelector('iframe');
       await Promise.resolve();
       const p1 = listenOncePromise(nexxtv, VideoEvents.PLAYING);
-      sendFakeMessage(nexxtv, iframe, {event: 'play'});
+      await sendFakeMessage(nexxtv, iframe, {event: 'play'});
       await p1;
       const p2 = listenOncePromise(nexxtv, VideoEvents.MUTED);
-      sendFakeMessage(nexxtv, iframe, {event: 'mute'});
+      await sendFakeMessage(nexxtv, iframe, {event: 'mute'});
       await p2;
       const p3 = listenOncePromise(nexxtv, VideoEvents.PAUSE);
-      sendFakeMessage(nexxtv, iframe, {event: 'pause'});
+      await sendFakeMessage(nexxtv, iframe, {event: 'pause'});
       await p3;
       const p4 = listenOncePromise(nexxtv, VideoEvents.UNMUTED);
-      sendFakeMessage(nexxtv, iframe, {event: 'unmute'});
+      await sendFakeMessage(nexxtv, iframe, {event: 'unmute'});
       return p4;
     });
 
-    function sendFakeMessage(nexxtv, iframe, command) {
-      nexxtv.implementation_.handleNexxMessage_({
+    it('should pass consent value to iframe', () => {
+      env.sandbox.stub(consent, 'getConsentPolicyInfo').resolves('testinfo');
+
+      return getNexxtvPlayer({
+        'data-mediaid': '71QQG852413DU7J',
+        'data-client': '761',
+        'data-block-on-consent': '_till_accepted',
+      }).then((nexxplayer) => {
+        const iframe = nexxplayer.querySelector('iframe');
+
+        expect(iframe.src).to.contain('consentString=testinfo');
+      });
+    });
+
+    async function sendFakeMessage(nexxtv, iframe, command) {
+      const impl = await nexxtv.getImpl(false);
+      impl.handleNexxMessage_({
         origin: 'https://embed.nexx.cloud',
         source: iframe.contentWindow,
         data: command,
diff --git a/extensions/amp-nexxtv-player/0.1/test/validator-amp-nexxtv-player.html b/extensions/amp-nexxtv-player/0.1/test/validator-amp-nexxtv-player.html
index 37ef7a0566cf3..9e73e2b645523 100644
--- a/extensions/amp-nexxtv-player/0.1/test/validator-amp-nexxtv-player.html
+++ b/extensions/amp-nexxtv-player/0.1/test/validator-amp-nexxtv-player.html
@@ -46,9 +46,8 @@
             data-mediaid="71QQG852413DU7J"
             data-client="761"
             data-streamtype="video"
-            data-seek-to="0"
             data-mode="api"
-            data-origin="https://embed.nexx.cloud/"
+            data-exit-mode="replay"
             data-disable-ads="1"
             data-streaming-filter="nxp-bitrate-2500"
             layout="responsive"
diff --git a/extensions/amp-nexxtv-player/0.1/test/validator-amp-nexxtv-player.out b/extensions/amp-nexxtv-player/0.1/test/validator-amp-nexxtv-player.out
index 8010988a2b9ff..629afd4648205 100644
--- a/extensions/amp-nexxtv-player/0.1/test/validator-amp-nexxtv-player.out
+++ b/extensions/amp-nexxtv-player/0.1/test/validator-amp-nexxtv-player.out
@@ -47,9 +47,8 @@ FAIL
 |              data-mediaid="71QQG852413DU7J"
 |              data-client="761"
 |              data-streamtype="video"
-|              data-seek-to="0"
 |              data-mode="api"
-|              data-origin="https://embed.nexx.cloud/"
+|              data-exit-mode="replay"
 |              data-disable-ads="1"
 |              data-streaming-filter="nxp-bitrate-2500"
 |              layout="responsive"
@@ -59,7 +58,7 @@ FAIL
 |      <!-- invalid, needs data-mediaid -->
 |      <amp-nexxtv-player
 >>     ^~~~~~~~~
-amp-nexxtv-player/0.1/test/validator-amp-nexxtv-player.html:59:4 The mandatory attribute 'data-mediaid' is missing in tag 'amp-nexxtv-player'. (see https://amp.dev/documentation/components/amp-nexxtv-player)
+amp-nexxtv-player/0.1/test/validator-amp-nexxtv-player.html:58:4 The mandatory attribute 'data-mediaid' is missing in tag 'amp-nexxtv-player'. (see https://amp.dev/documentation/components/amp-nexxtv-player)
 |              data-client="761"
 |              width="480" height="270"
 |      ></amp-nexxtv-player>
@@ -67,7 +66,7 @@ amp-nexxtv-player/0.1/test/validator-amp-nexxtv-player.html:59:4 The mandatory a
 |      <!-- invalid, needs data-client -->
 |      <amp-nexxtv-player
 >>     ^~~~~~~~~
-amp-nexxtv-player/0.1/test/validator-amp-nexxtv-player.html:65:4 The mandatory attribute 'data-client' is missing in tag 'amp-nexxtv-player'. (see https://amp.dev/documentation/components/amp-nexxtv-player)
+amp-nexxtv-player/0.1/test/validator-amp-nexxtv-player.html:64:4 The mandatory attribute 'data-client' is missing in tag 'amp-nexxtv-player'. (see https://amp.dev/documentation/components/amp-nexxtv-player)
 |              data-mediaid="71QQG852413DU7J"
 |              width="480" height="270"
 |      ></amp-nexxtv-player>
diff --git a/extensions/amp-nexxtv-player/OWNERS b/extensions/amp-nexxtv-player/OWNERS
index 01b835d25d8df..c759601b84c9e 100644
--- a/extensions/amp-nexxtv-player/OWNERS
+++ b/extensions/amp-nexxtv-player/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'neko-fire'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'neko-fire'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-nexxtv-player/amp-nexxtv-player.md b/extensions/amp-nexxtv-player/amp-nexxtv-player.md
index 8a8a25c6f5a25..888972f2aab93 100644
--- a/extensions/amp-nexxtv-player/amp-nexxtv-player.md
+++ b/extensions/amp-nexxtv-player/amp-nexxtv-player.md
@@ -33,9 +33,7 @@ With the responsive layout, the width and height from the example should yield c
   data-mediaid="71QQG852413DU7J"
   data-client="761"
   data-streamtype="video"
-  data-seek-to="2"
   data-mode="static"
-  data-origin="https://embed.nexx.cloud/"
   data-disable-ads="1"
   data-streaming-filter="nxp-bitrate-2500"
   layout="responsive"
@@ -52,33 +50,27 @@ With the responsive layout, the width and height from the example should yield c
     <td>Represents the ID of the media you want to play.</td>
   </tr>
   <tr>
-    <td width="40%"><strong>data-client (required)</strong></td>
+    <td width="40%"><strong>data-client OR data-domain-id(required)</strong></td>
     <td>Your domain ID.</td>
   </tr>
   <tr>
     <td width="40%"><strong>data-streamtype (optional)</strong></td>
     <td><p>Indicates the media streaming type, which can be one of the following:</p>
-<ul>
-  <li>`video` (default)</li>
-  <li>`audio`</li>
-  <li>`playlist`</li>
-  <li>`playlist-masked`: A playlist without the option to skip or choose video.</li>
-  <li>`live`</li>
-  <li>`album`: An audio playlist.</li>
-</ul></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-seek-to (optional)</strong></td>
-    <td>Indicates the starting point of your media (in seconds). For example, video starting 1:30min.</td>
+  <ul>
+    <li>`video` (default)</li>
+    <li>`audio`</li>
+    <li>`playlist`</li>
+    <li>`audioalbum`: An audio playlist</li>
+    <li>`live`</li>
+    <li>`radio`</li>
+    <li>`set`</li>
+    <li>`collection`: collection of media items</li>
+  </ul></td>
   </tr>
   <tr>
     <td width="40%"><strong>data-mode (optional)</strong></td>
     <td>Indicates the data mode, which can be <code>static</code> (default) or <code>api</code>.</td>
   </tr>
-  <tr>
-    <td width="40%"><strong>data-origin (optional)</strong></td>
-    <td>Indicates the source from which the embedded domain media is played. By default this is set to <code>https://embed.nexx.cloud/</code>.</td>
-  </tr>
   <tr>
     <td width="40%"><strong>data-disable-ads (optional)</strong></td>
     <td>Ads are enabled by default. Set value to 1 to disable.</td>
@@ -87,6 +79,14 @@ With the responsive layout, the width and height from the example should yield c
     <td width="40%"><strong>data-streaming-filter (optional)</strong></td>
     <td>Set streaming filter e.g. "nxp-bitrate-0750" for max 750kbit max bitrate.</td>
   </tr>
+  <tr>
+    <td width="40%"><strong>data-exit-mode (optional)</strong></td>
+    <td><p>Defines player exit screen</p>
+  <ul>
+    <li>`replay`</li>
+    <li>`loop`</li>
+    <li>`load`</li>
+  </ul></td>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>
     <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
@@ -95,4 +95,4 @@ With the responsive layout, the width and height from the example should yield c
 
 ## Validation
 
-See [amp-nexxtv-player rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-nexxtv-player/validator-amp-nexxtv-player.protoascii) in the AMP validator specification.
+See [amp-nexxtv-player rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-nexxtv-player/validator-amp-nexxtv-player.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-nexxtv-player/validator-amp-nexxtv-player.protoascii b/extensions/amp-nexxtv-player/validator-amp-nexxtv-player.protoascii
index df2eab8233ded..1635809625ca1 100644
--- a/extensions/amp-nexxtv-player/validator-amp-nexxtv-player.protoascii
+++ b/extensions/amp-nexxtv-player/validator-amp-nexxtv-player.protoascii
@@ -42,23 +42,25 @@ tags: {  # <amp-nexxtv-player>
     value: "api"
     value: "static"
   }
-  attrs: {
-    name: "data-origin"
-    value_url: {
-      protocol: "https"
-      protocol: "http"
-      allow_empty: true
-    }
-  }
   attrs: {
     name: "data-streamtype"
     value: "album"
     value: "audio"
+    value: "audioalbum"
+    value: "collection"
     value: "live"
     value: "playlist"
     value: "playlist-marked"
+    value: "radio"
+    value: "set"
     value: "video"
   }
+  attrs: {
+    name: "data-exit-mode"
+    value: "load"
+    value: "loop"
+    value: "replay"
+  }
   attr_lists: "extended-amp-global"
   amp_layout: {
     supported_layouts: FILL
diff --git a/extensions/amp-o2-player/0.1/amp-o2-player.js b/extensions/amp-o2-player/0.1/amp-o2-player.js
index 17aa4328327ea..8b457c516f8c9 100644
--- a/extensions/amp-o2-player/0.1/amp-o2-player.js
+++ b/extensions/amp-o2-player/0.1/amp-o2-player.js
@@ -14,9 +14,17 @@
  * limitations under the License.
  */
 
+import {CONSENT_POLICY_STATE} from '../../../src/core/constants/consent-state';
+import {MessageType} from '../../../src/3p-frame-messaging';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
+import {
+  getConsentPolicyInfo,
+  getConsentPolicyState,
+} from '../../../src/consent';
 import {isLayoutSizeDefined} from '../../../src/layout';
+import {listenFor} from '../../../src/iframe-helper';
 import {setIsMediaComponent} from '../../../src/video-interface';
 import {userAssert} from '../../../src/log';
 
@@ -39,6 +47,9 @@ class AmpO2Player extends AMP.BaseElement {
 
     /** @private {string} */
     this.src_ = '';
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -123,10 +134,111 @@ class AmpO2Player extends AMP.BaseElement {
     iframe.src = this.src_;
     this.iframe_ = /** @type {HTMLIFrameElement} */ (iframe);
     this.applyFillContent(iframe);
+
+    listenFor(iframe, MessageType.SEND_CONSENT_DATA, (data, source, origin) => {
+      this.sendConsentData_(source, origin);
+    });
+
+    this.pauseHelper_.updatePlaying(true);
+
     this.element.appendChild(iframe);
     return this.loadPromise(iframe);
   }
 
+  /** @override */
+  unlayoutCallback() {
+    const iframe = this.iframe_;
+    if (iframe) {
+      this.element.removeChild(iframe);
+      this.iframe_ = null;
+    }
+    this.pauseHelper_.updatePlaying(false);
+    return true;
+  }
+
+  /**
+   * Requests consent data from consent module
+   * and forwards information to iframe
+   * @param {Window} source
+   * @param {string} origin
+   * @private
+   */
+  sendConsentData_(source, origin) {
+    const consentPolicyId = super.getConsentPolicy() || 'default';
+    const consentStringPromise = this.getConsentString_(consentPolicyId);
+    const consentPolicyStatePromise =
+      this.getConsentPolicyState_(consentPolicyId);
+
+    Promise.all([consentPolicyStatePromise, consentStringPromise]).then(
+      (consents) => {
+        let consentData;
+        switch (consents[0]) {
+          case CONSENT_POLICY_STATE.SUFFICIENT:
+            consentData = {
+              'gdprApplies': true,
+              'user_consent': 1,
+              'gdprString': consents[1],
+            };
+            break;
+          case CONSENT_POLICY_STATE.INSUFFICIENT:
+          case CONSENT_POLICY_STATE.UNKNOWN:
+            consentData = {
+              'gdprApplies': true,
+              'user_consent': 0,
+              'gdprString': consents[1],
+            };
+            break;
+          case CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED:
+          default:
+            consentData = {
+              'gdprApplies': false,
+            };
+        }
+
+        this.sendConsentDataToIframe_(
+          source,
+          origin,
+          dict({
+            'sentinel': 'amp',
+            'type': MessageType.CONSENT_DATA,
+            'consentData': consentData,
+          })
+        );
+      }
+    );
+  }
+
+  /**
+   * Send consent data to iframe
+   * @param {Window} source
+   * @param {string} origin
+   * @param {JsonObject} data
+   * @private
+   */
+  sendConsentDataToIframe_(source, origin, data) {
+    source./*OK*/ postMessage(data, origin);
+  }
+
+  /**
+   * Get the consent string
+   * @param {string} consentPolicyId
+   * @private
+   * @return {Promise}
+   */
+  getConsentString_(consentPolicyId = 'default') {
+    return getConsentPolicyInfo(this.element, consentPolicyId);
+  }
+
+  /**
+   * Get the consent policy state
+   * @param {string} consentPolicyId
+   * @private
+   * @return {Promise}
+   */
+  getConsentPolicyState_(consentPolicyId = 'default') {
+    return getConsentPolicyState(this.element, consentPolicyId);
+  }
+
   /** @override */
   pauseCallback() {
     if (this.iframe_ && this.iframe_.contentWindow) {
diff --git a/extensions/amp-o2-player/0.1/test/test-amp-o2-player.js b/extensions/amp-o2-player/0.1/test/test-amp-o2-player.js
index 2466a91c73561..02da307270cb0 100644
--- a/extensions/amp-o2-player/0.1/test/test-amp-o2-player.js
+++ b/extensions/amp-o2-player/0.1/test/test-amp-o2-player.js
@@ -15,6 +15,9 @@
  */
 
 import '../amp-o2-player';
+import * as iframeHelper from '../../../../src/iframe-helper';
+import {CONSENT_POLICY_STATE} from '../../../../src/core/constants/consent-state';
+import {MessageType} from '../../../../src/3p-frame-messaging';
 
 describes.realWin(
   'amp-o2-player',
@@ -31,7 +34,7 @@ describes.realWin(
       doc = win.document;
     });
 
-    async function getO2player(attributes, opt_responsive) {
+    async function getO2player(attributes, opt_responsive, implExtends) {
       const o2 = doc.createElement('amp-o2-player');
       for (const key in attributes) {
         o2.setAttribute(key, attributes[key]);
@@ -42,7 +45,13 @@ describes.realWin(
         o2.setAttribute('layout', 'responsive');
       }
       doc.body.appendChild(o2);
-      await o2.build();
+
+      const impl = await o2.getImpl(false);
+
+      if (implExtends) {
+        implExtends(o2, impl);
+      }
+      await o2.buildInternal();
       await o2.layoutCallback();
       return o2;
     }
@@ -143,5 +152,165 @@ describes.realWin(
         'https://delivery.dev.vidible.tv/htmlembed/pid=123/456.html'
       );
     });
+
+    it('unlayout and relayout', async () => {
+      const o2 = await getO2player({
+        'data-pid': '123',
+        'data-bcid': '456',
+        'data-env': 'stage',
+      });
+      expect(o2.querySelector('iframe')).to.exist;
+
+      const unlayoutResult = o2.unlayoutCallback();
+      expect(unlayoutResult).to.be.true;
+      expect(o2.querySelector('iframe')).to.not.exist;
+
+      await o2.layoutCallback();
+      expect(o2.querySelector('iframe')).to.exist;
+    });
+
+    describe('sends a consent-data', () => {
+      let sendConsentDataToIframe;
+      const resSource = 'my source';
+      const resOrigin = 'my origin';
+      const resConsentString = 'consent string';
+      let consentData = {
+        'gdprApplies': true,
+        'user_consent': 1,
+        'gdprString': resConsentString,
+      };
+      const resData = {
+        sentinel: 'amp',
+        type: MessageType.CONSENT_DATA,
+      };
+
+      it('sends a consent-data CONSENT_POLICY_STATE.SUFFICIENT message', async function () {
+        resData.consentData = consentData;
+
+        const implExtends = function (o2, impl) {
+          env.sandbox
+            .stub(impl, 'getConsentString_')
+            .resolves(resConsentString);
+
+          env.sandbox
+            .stub(impl, 'getConsentPolicyState_')
+            .resolves(CONSENT_POLICY_STATE.SUFFICIENT);
+
+          sendConsentDataToIframe = env.sandbox.spy(
+            impl,
+            'sendConsentDataToIframe_'
+          );
+        };
+
+        env.sandbox
+          .stub(iframeHelper, 'listenFor')
+          .callsFake((iframe, message, callback) => {
+            expect(message).to.equal(MessageType.SEND_CONSENT_DATA);
+            callback('', resSource, resOrigin);
+          });
+
+        await getO2player(
+          {
+            'data-pid': '123',
+            'data-bcid': '456',
+          },
+          null,
+          implExtends
+        );
+
+        expect(sendConsentDataToIframe).to.have.been.calledWith(
+          resSource,
+          resOrigin,
+          resData
+        );
+      });
+
+      it('sends a consent-data INSUFFICIENT or UNKNOWN message', async function () {
+        consentData['user_consent'] = 0;
+        resData.consentData = consentData;
+
+        const implExtends = function (o2, impl) {
+          env.sandbox
+            .stub(impl, 'getConsentString_')
+            .resolves(resConsentString);
+
+          env.sandbox
+            .stub(impl, 'getConsentPolicyState_')
+            .resolves(CONSENT_POLICY_STATE.INSUFFICIENT);
+
+          sendConsentDataToIframe = env.sandbox.spy(
+            impl,
+            'sendConsentDataToIframe_'
+          );
+        };
+
+        env.sandbox
+          .stub(iframeHelper, 'listenFor')
+          .callsFake((iframe, message, callback) => {
+            expect(message).to.equal(MessageType.SEND_CONSENT_DATA);
+            callback('', resSource, resOrigin);
+          });
+
+        await getO2player(
+          {
+            'data-pid': '123',
+            'data-bcid': '456',
+          },
+          null,
+          implExtends
+        );
+
+        expect(sendConsentDataToIframe).to.have.been.calledWith(
+          resSource,
+          resOrigin,
+          resData
+        );
+      });
+
+      it('sends a consent-data UNKNOWN_NOT_REQUIRED or default message', async function () {
+        consentData = {
+          'gdprApplies': false,
+        };
+
+        resData.consentData = consentData;
+
+        const implExtends = function (o2, impl) {
+          env.sandbox
+            .stub(impl, 'getConsentString_')
+            .resolves(resConsentString);
+
+          env.sandbox
+            .stub(impl, 'getConsentPolicyState_')
+            .resolves(CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED);
+
+          sendConsentDataToIframe = env.sandbox.spy(
+            impl,
+            'sendConsentDataToIframe_'
+          );
+        };
+
+        env.sandbox
+          .stub(iframeHelper, 'listenFor')
+          .callsFake((iframe, message, callback) => {
+            expect(message).to.equal(MessageType.SEND_CONSENT_DATA);
+            callback('', resSource, resOrigin);
+          });
+
+        await getO2player(
+          {
+            'data-pid': '123',
+            'data-bcid': '456',
+          },
+          null,
+          implExtends
+        );
+
+        expect(sendConsentDataToIframe).to.have.been.calledWith(
+          resSource,
+          resOrigin,
+          resData
+        );
+      });
+    });
   }
 );
diff --git a/extensions/amp-o2-player/OWNERS b/extensions/amp-o2-player/OWNERS
index 982d3cec402c3..dda5456602525 100644
--- a/extensions/amp-o2-player/OWNERS
+++ b/extensions/amp-o2-player/OWNERS
@@ -1,10 +1,20 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'yevheniiminin'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [
+        {name: 'adeolaawoyemi'},
+        {name: 'arielginsburg'},
+        {name: 'aharoyairncohen'},
+        {name: 'lironka'},
+        {name: 'adir-kandel-vzm'},
+        {name: 'batsheva-evers'},
+        {name: 'sganti16'},
+        {name: 'akathuria'},
+        {name: 'ampproject/wg-components'},
+      ],
     },
   ],
 }
diff --git a/extensions/amp-o2-player/amp-o2-player.md b/extensions/amp-o2-player/amp-o2-player.md
index 5dbaff71bc403..da5323ba65fc9 100644
--- a/extensions/amp-o2-player/amp-o2-player.md
+++ b/extensions/amp-o2-player/amp-o2-player.md
@@ -74,7 +74,7 @@ Example:
 
 ## Validation
 
-See [amp-o2-player rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-o2-player/validator-amp-o2-player.protoascii) in the AMP validator specification.
+See [amp-o2-player rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-o2-player/validator-amp-o2-player.protoascii) in the AMP validator specification.
 
 The following lists validation errors specific to the `amp-o2-player` tag:
 
@@ -100,3 +100,40 @@ The following lists validation errors specific to the `amp-o2-player` tag:
     <td>Error thrown when invalid value is given for attributes <code>height</code> or <code>width</code>. For example, <code>height=auto</code> triggers this error for all supported layout types, with the exception of <code>NODISPLAY</code>.</td>
   </tr>
 </table>
+
+## Consent Data
+
+Iframe inside `amp-o2-player` can send a message to receive consent data if a CMP is present on `amp-o2-player` parents page.
+
+Example request for consent data from iframe:
+
+```javascript
+window.parent.postMessage(
+  {
+    sentinel: 'amp',
+    type: 'send-consent-data',
+  },
+  '*'
+);
+```
+
+Example receive response for consent data:
+
+```javascript
+function isAmpMessage(event, type) {
+  return (
+    event.source == window.parent &&
+    event.origin != window.location.origin &&
+    event.data &&
+    event.data.sentinel == 'amp' &&
+    event.data.type == type
+  );
+}
+
+window.addEventListener('message', function (event) {
+  if (!isAmpMessage(event, 'consent-data')) {
+    return;
+  }
+  console.log(event.data.consentData);
+});
+```
diff --git a/extensions/amp-onetap-google/0.1/amp-onetap-google.css b/extensions/amp-onetap-google/0.1/amp-onetap-google.css
new file mode 100644
index 0000000000000..c0a00baa915e4
--- /dev/null
+++ b/extensions/amp-onetap-google/0.1/amp-onetap-google.css
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2020 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.
+ */
+
+ .i-amphtml-onetap-google-iframe {
+  z-index: 2147483647;
+  border: none;
+  position: fixed;
+}
+
+/* 'card' as received in 'set_ui_mode' messages from iframe */
+.i-amphtml-onetap-google-ui-card
+{
+  width: 391px;
+  right: 20px;
+  top: 20px;
+}
+
+/* 'bottom_sheet' as received in 'set_ui_mode' messages from iframe */
+.i-amphtml-onetap-google-ui-bottom_sheet {
+  right: auto;
+  left: 0;
+  top: auto;
+  bottom: 0;
+  width: 100%;
+}
diff --git a/extensions/amp-onetap-google/0.1/amp-onetap-google.js b/extensions/amp-onetap-google/0.1/amp-onetap-google.js
new file mode 100644
index 0000000000000..173ed6a707621
--- /dev/null
+++ b/extensions/amp-onetap-google/0.1/amp-onetap-google.js
@@ -0,0 +1,297 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * @fileoverview Embeds Google One Tap
+ *
+ * Example:
+ * <code>
+ * <amp-onetap-google
+ *   layout="nodisplay"
+ *   data-src="https://www.example.com/onetap-login"
+ * </amp-onetap-google>
+ * </code>
+ */
+
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {CSS} from '../../../build/amp-onetap-google-0.1.css';
+import {Layout} from '../../../src/layout';
+import {Services} from '../../../src/services';
+import {assertHttpsUrl} from '../../../src/url';
+import {dev, devAssert, user} from '../../../src/log';
+import {dict} from '../../../src/core/types/object';
+import {getData, listen} from '../../../src/event-helper';
+import {isObject} from '../../../src/core/types';
+import {px, setStyle, toggle} from '../../../src/style';
+import {removeElement} from '../../../src/dom';
+
+/** @const {string} */
+const TAG = 'amp-onetap-google';
+
+/** @const {string} */
+export const SENTINEL = 'onetap_google';
+
+/** @const {Object} */
+export const ACTIONS = {
+  READY: 'intermediate_iframe_ready',
+  RESIZE: 'intermediate_iframe_resize',
+  CLOSE: 'intermediate_iframe_close',
+  DONE: 'intermediate_iframe_done',
+  SET_UI_MODE: 'set_ui_mode',
+  SET_TAP_OUTSIDE_MODE: 'set_tap_outside_mode',
+};
+
+export class AmpOnetapGoogle extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {?Element} */
+    this.iframe_ = null;
+
+    /** @private {boolean} */
+    this.shouldCancelOnTapOutside_ = true;
+
+    /** @private {?Array<!UnlistenDef>} */
+    this.unlisteners_ = null;
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout == Layout.NODISPLAY;
+  }
+
+  /** @override */
+  buildCallback() {
+    this.getAmpDoc()
+      .whenFirstVisible()
+      .then(() => {
+        this.createIframe_(
+          assertHttpsUrl(this.element.dataset.src, this.element)
+        );
+      });
+  }
+
+  /**
+   * @param {!MessageEventSource} source
+   * @param {*} message
+   * @param {string} origin
+   * @private
+   */
+  postMessage_(source, message, origin) {
+    source./*OK*/ postMessage(message, origin);
+  }
+
+  /**
+   * @param {string} origin
+   * @param {Event} event
+   * @private
+   */
+  handleIntermediateIframeMessage_(origin, event) {
+    if (!this.iframe_) {
+      return;
+    }
+    if (event.source != this.iframe_.contentWindow || event.origin !== origin) {
+      return;
+    }
+    const data = getData(event);
+    if (!isObject(data) || data['sentinel'] != SENTINEL) {
+      return;
+    }
+    switch (data['command']) {
+      case ACTIONS.READY:
+        const nonce = data['nonce'];
+        if (!nonce) {
+          return;
+        }
+        this.postMessage_(
+          event.source,
+          dict({
+            'sentinel': SENTINEL,
+            'command': 'parent_frame_ready',
+            'nonce': nonce,
+          }),
+          event.origin
+        );
+        break;
+      case ACTIONS.RESIZE:
+        const height = data['height'];
+        if (typeof height === 'number' && !isNaN(height) && height > 0) {
+          this.mutateElement(() => {
+            toggle(this.element, height > 0);
+            // We resize indiscriminately since the iframe is always
+            // position: fixed
+            setStyle(this.iframe_, 'height', px(data['height']));
+          });
+        }
+        break;
+      case ACTIONS.CLOSE:
+        this.mutateElement(() => {
+          this.removeIframe_();
+        });
+        break;
+      case ACTIONS.DONE:
+        this.mutateElement(() => {
+          this.removeIframe_();
+          this.refreshAccess_();
+        });
+        break;
+      case ACTIONS.SET_UI_MODE:
+        const uiMode = data['mode'];
+        if (!uiMode) {
+          return;
+        }
+        this.setUiMode_(uiMode);
+        break;
+      case ACTIONS.SET_TAP_OUTSIDE_MODE:
+        this.shouldCancelOnTapOutside_ = !!data['cancel'];
+        break;
+      default:
+        dev().warn(TAG, `Unknown action type: ${data['command']}`);
+    }
+  }
+
+  /**
+   * @param {string} mode
+   * @private
+   */
+  setUiMode_(mode) {
+    this.mutateElement(() => {
+      this.iframe_.classList.add(`i-amphtml-onetap-google-ui-${mode}`);
+    });
+  }
+
+  /** @private */
+  refreshAccess_() {
+    Promise.all([
+      this.refreshAmpAccess_(),
+      this.refreshAmpSubscriptions_(),
+    ]).then((refreshed) => {
+      if (!refreshed.reduce((a, b) => a || b)) {
+        user().warn(
+          TAG,
+          'Sign-in was completed, but there were no entitlements to refresh. Please include amp-access or amp-subscriptions.'
+        );
+      }
+    });
+  }
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  refreshAmpAccess_() {
+    const accessElement = this.getAmpDoc().getElementById('amp-access');
+    if (!accessElement) {
+      return false;
+    }
+    Services.actionServiceForDoc(this.element).execute(
+      accessElement,
+      'refresh',
+      /* args */ null,
+      /* source */ null,
+      /* caller */ null,
+      /* event */ null,
+      ActionTrust.DEFAULT
+    );
+    return true;
+  }
+
+  /**
+   * @return {!Promise<boolean>}
+   * @private
+   */
+  refreshAmpSubscriptions_() {
+    return Services.subscriptionsServiceForDocOrNull(this.element).then(
+      (subscriptions) => {
+        if (!subscriptions) {
+          return false;
+        }
+        subscriptions.resetPlatforms();
+        return true;
+      }
+    );
+  }
+
+  /**
+   * @param {string} srcUnexpanded
+   * @private
+   */
+  createIframe_(srcUnexpanded) {
+    if (this.iframe_) {
+      return;
+    }
+    this.iframe_ = this.getAmpDoc().win.document.createElement('iframe');
+
+    // Don't insert <iframe> until URL has been expanded.
+    // Likewise, don't display the UI until then.
+    Services.urlReplacementsForDoc(this.element)
+      .expandUrlAsync(srcUnexpanded)
+      .then((srcExpanded) => {
+        if (!this.win) {
+          return; // now detached
+        }
+        this.insertIframe_(srcExpanded);
+      });
+  }
+
+  /**
+   * @param {string} src
+   * @private
+   */
+  insertIframe_(src) {
+    devAssert(this.iframe_);
+    toggle(this.element, false);
+
+    const {origin} = Services.urlForDoc(this.element).parse(src);
+    this.unlisteners_ = [
+      listen(this.win, 'message', (event) => {
+        this.handleIntermediateIframeMessage_(origin, event);
+      }),
+      listen(this.getAmpDoc().getRootNode(), 'click', () => {
+        if (
+          this.shouldCancelOnTapOutside_ &&
+          !this.element.hasAttribute('hidden')
+        ) {
+          this.removeIframe_();
+        }
+      }),
+    ];
+    this.iframe_.classList.add('i-amphtml-onetap-google-iframe');
+    this.iframe_.src = src;
+    this.element.appendChild(this.iframe_);
+    this.getViewport().addToFixedLayer(this.iframe_);
+  }
+
+  /** @private */
+  removeIframe_() {
+    if (!this.iframe_) {
+      return;
+    }
+    toggle(this.element, false);
+    removeElement(this.iframe_);
+    this.iframe_ = null;
+    if (this.unlisteners_) {
+      while (this.unlisteners_.length > 0) {
+        this.unlisteners_.pop()();
+      }
+    }
+  }
+}
+
+AMP.extension(TAG, '0.1', (AMP) => {
+  AMP.registerElement(TAG, AmpOnetapGoogle, CSS);
+});
diff --git a/extensions/amp-onetap-google/0.1/test/test-amp-onetap-google.js b/extensions/amp-onetap-google/0.1/test/test-amp-onetap-google.js
new file mode 100644
index 0000000000000..c85a6828d69eb
--- /dev/null
+++ b/extensions/amp-onetap-google/0.1/test/test-amp-onetap-google.js
@@ -0,0 +1,345 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import '../amp-onetap-google';
+import {ACTIONS, SENTINEL} from '../amp-onetap-google';
+import {AmpDoc} from '../../../../src/service/ampdoc-impl';
+import {BaseElement} from '../../../../src/base-element';
+import {Services} from '../../../../src/services';
+import {createElementWithAttributes, waitForChild} from '../../../../src/dom';
+import {loadPromise} from '../../../../src/event-helper';
+import {macroTask} from '../../../../testing/yield';
+import {user} from '../../../../src/log';
+
+const TAG = 'amp-onetap-google';
+
+describes.realWin(
+  TAG,
+  {
+    amp: {
+      runtimeOn: true,
+      extensions: [TAG],
+    },
+    // only "iframe.localhost", which is considered external
+    allowExternalResources: true,
+  },
+  (env) => {
+    let document;
+    let defaultAttrs;
+
+    const whenSelectedAvailable = (parent, selector) =>
+      new Promise((resolve) => {
+        let child;
+        return waitForChild(
+          parent,
+          (parent) => (child = parent.querySelector(selector)),
+          () => resolve(child)
+        );
+      });
+
+    function stubServiceMethods(serviceGetterName, methods) {
+      for (const method in methods) {
+        env.sandbox
+          .stub(Services[serviceGetterName](env.win.document.body), method)
+          .callsFake(methods[method]);
+      }
+      return methods;
+    }
+
+    async function fakePostMessage(element, iframe, data) {
+      const origin = 'https://fake.localhost';
+
+      await loadPromise(iframe); // so we have access to a contentWindow
+
+      const impl = await element.getImpl();
+      impl.handleIntermediateIframeMessage_(origin, {
+        origin,
+        data,
+        source: iframe.contentWindow,
+      });
+
+      // some tasks are async, so it's nice to ensure they're completed before
+      // resolving the message as sent.
+      await macroTask();
+
+      return iframe;
+    }
+
+    beforeEach(() => {
+      document = env.win.document;
+
+      defaultAttrs = {
+        layout: 'nodisplay',
+        'data-src': `http://iframe.localhost:${location.port}/test/fixtures/served/blank.html`,
+      };
+
+      // build waits for visibility, force it.
+      env.sandbox
+        .stub(AmpDoc.prototype, 'whenFirstVisible')
+        .returns(Promise.resolve());
+
+      // make sync
+      env.sandbox
+        .stub(BaseElement.prototype, 'mutateElement')
+        .callsFake((mutator) => Promise.resolve(mutator()));
+    });
+
+    it('creates iframe', async () => {
+      const element = createElementWithAttributes(document, TAG, defaultAttrs);
+      document.body.appendChild(element);
+      const iframe = await whenSelectedAvailable(element, 'iframe');
+      expect(iframe).to.be.ok;
+      expect(iframe).to.have.class('i-amphtml-onetap-google-iframe');
+    });
+
+    it('adds iframe to FixedLayer', async () => {
+      const {addToFixedLayer} = stubServiceMethods('viewportForDoc', {
+        addToFixedLayer: env.sandbox.spy(),
+      });
+
+      const element = createElementWithAttributes(document, TAG, defaultAttrs);
+      document.body.appendChild(element);
+      const iframe = await whenSelectedAvailable(element, 'iframe');
+
+      expect(addToFixedLayer.withArgs(iframe)).to.have.been.calledOnce;
+    });
+
+    it('substitutes variables in src', async () => {
+      const {expandUrlAsync} = stubServiceMethods('urlReplacementsForDoc', {
+        expandUrlAsync: env.sandbox.spy((src) =>
+          Promise.resolve(`${src}#__expandUrlAsync_expanded__`)
+        ),
+      });
+
+      const element = createElementWithAttributes(document, TAG, defaultAttrs);
+      document.body.appendChild(element);
+      const iframe = await whenSelectedAvailable(element, 'iframe');
+
+      expect(expandUrlAsync).to.have.been.calledOnce;
+
+      expect(iframe.src).to.not.equal(element.dataset.src);
+      expect(iframe.src).to.equal(await expandUrlAsync.firstCall.returnValue);
+    });
+
+    it('returns parent_frame_ready message with nonce on ACTIONS.READY', async () => {
+      const element = createElementWithAttributes(document, TAG, defaultAttrs);
+      document.body.appendChild(element);
+
+      const iframe = await whenSelectedAvailable(element, 'iframe');
+
+      const postMessage = env.sandbox.stub(
+        await element.getImpl(),
+        'postMessage_'
+      );
+
+      const nonce = 'chilaquiles';
+
+      await fakePostMessage(element, iframe, {
+        sentinel: SENTINEL,
+        command: ACTIONS.READY,
+        nonce,
+      });
+
+      expect(
+        postMessage.withArgs(
+          iframe.contentWindow,
+          env.sandbox.match({command: 'parent_frame_ready', nonce})
+        )
+      ).to.have.been.calledOnce;
+    });
+
+    it('resizes iframe on ACTIONS.RESIZE', async () => {
+      const element = createElementWithAttributes(document, TAG, defaultAttrs);
+      document.body.appendChild(element);
+
+      const iframe = await whenSelectedAvailable(element, 'iframe');
+
+      const height = 420;
+
+      await fakePostMessage(element, iframe, {
+        sentinel: SENTINEL,
+        command: ACTIONS.RESIZE,
+        height,
+      });
+
+      expect(iframe.style.height).to.equal(`${height}px`);
+    });
+
+    it('displays element on ACTIONS.RESIZE', async () => {
+      const element = createElementWithAttributes(document, TAG, defaultAttrs);
+      document.body.appendChild(element);
+
+      const iframe = await whenSelectedAvailable(element, 'iframe');
+
+      expect(element).to.have.attribute('hidden');
+
+      const height = 420;
+
+      await fakePostMessage(element, iframe, {
+        sentinel: SENTINEL,
+        command: ACTIONS.RESIZE,
+        height,
+      });
+
+      expect(element).to.not.have.attribute('hidden');
+    });
+
+    ['CLOSE', 'DONE'].forEach((actionKey) => {
+      it(`removes iframe and hides element on ACTIONS.${actionKey}`, async () => {
+        const element = createElementWithAttributes(
+          document,
+          TAG,
+          defaultAttrs
+        );
+        document.body.appendChild(element);
+
+        const iframe = await whenSelectedAvailable(element, 'iframe');
+
+        await fakePostMessage(element, iframe, {
+          sentinel: SENTINEL,
+          command: ACTIONS[actionKey],
+        });
+
+        expect(element).to.have.attribute('hidden');
+        expect(element.querySelector('iframe')).to.be.null;
+      });
+    });
+
+    it('warns when there are no entitlements to refresh on ACTIONS.DONE', async () => {
+      const warn = env.sandbox.spy(user(), 'warn');
+
+      const element = createElementWithAttributes(document, TAG, defaultAttrs);
+      document.body.appendChild(element);
+
+      const iframe = await whenSelectedAvailable(element, 'iframe');
+
+      await fakePostMessage(element, iframe, {
+        sentinel: SENTINEL,
+        command: ACTIONS.DONE,
+      });
+
+      expect(warn.withArgs(TAG, env.sandbox.match(/no entitlements/))).to.have
+        .been.calledOnce;
+    });
+
+    it('refreshes amp-access on ACTIONS.DONE', async () => {
+      const warn = env.sandbox.spy(user(), 'warn');
+
+      const {execute} = stubServiceMethods('actionServiceForDoc', {
+        execute: env.sandbox.spy(),
+      });
+
+      const accessElement = createElementWithAttributes(document, 'script', {
+        id: 'amp-access',
+      });
+
+      document.head.appendChild(accessElement);
+
+      const element = createElementWithAttributes(document, TAG, defaultAttrs);
+      document.body.appendChild(element);
+
+      const iframe = await whenSelectedAvailable(element, 'iframe');
+
+      await fakePostMessage(element, iframe, {
+        sentinel: SENTINEL,
+        command: ACTIONS.DONE,
+      });
+
+      expect(warn).to.not.have.been.called;
+      expect(execute.withArgs(accessElement, 'refresh')).to.have.been
+        .calledOnce;
+    });
+
+    it('does not refresh amp-access on ACTIONS.DONE if unavailable', async () => {
+      const {execute} = stubServiceMethods('actionServiceForDoc', {
+        execute: env.sandbox.spy(),
+      });
+
+      const element = createElementWithAttributes(document, TAG, defaultAttrs);
+      document.body.appendChild(element);
+
+      const iframe = await whenSelectedAvailable(element, 'iframe');
+
+      await fakePostMessage(element, iframe, {
+        sentinel: SENTINEL,
+        command: ACTIONS.DONE,
+      });
+
+      expect(execute).to.not.have.been.called;
+    });
+
+    it('refreshes amp-subscriptions on ACTIONS.DONE', async () => {
+      const warn = env.sandbox.spy(user(), 'warn');
+      const resetPlatforms = env.sandbox.spy();
+
+      env.sandbox
+        .stub(Services, 'subscriptionsServiceForDocOrNull')
+        .resolves({resetPlatforms});
+
+      const element = createElementWithAttributes(document, TAG, defaultAttrs);
+      document.body.appendChild(element);
+
+      const iframe = await whenSelectedAvailable(element, 'iframe');
+
+      await fakePostMessage(element, iframe, {
+        sentinel: SENTINEL,
+        command: ACTIONS.DONE,
+      });
+
+      expect(warn).to.not.have.been.called;
+      expect(resetPlatforms).to.have.been.calledOnce;
+    });
+
+    it('does not refresh amp-subscriptions on ACTIONS.DONE if unavailable', async () => {
+      env.sandbox
+        .stub(Services, 'subscriptionsServiceForDocOrNull')
+        .resolves(null);
+
+      const element = createElementWithAttributes(document, TAG, defaultAttrs);
+      document.body.appendChild(element);
+
+      const iframe = await whenSelectedAvailable(element, 'iframe');
+
+      await fakePostMessage(element, iframe, {
+        sentinel: SENTINEL,
+        command: ACTIONS.DONE,
+      });
+
+      // should have been removed by now
+      expect(iframe.parentNode).to.be.null;
+    });
+
+    it('sets classname on SET_UI_MODE', async () => {
+      const element = createElementWithAttributes(document, TAG, defaultAttrs);
+      document.body.appendChild(element);
+
+      const iframe = await whenSelectedAvailable(element, 'iframe');
+
+      // In reality this value is either "card" or "bottom_sheet", but from the
+      // implementation's point of view, this is only a suffix for a classname
+      // selected by CSS.
+      const mode = 'veggie-burrito';
+
+      await fakePostMessage(element, iframe, {
+        sentinel: SENTINEL,
+        command: ACTIONS.SET_UI_MODE,
+        mode,
+      });
+
+      expect(iframe).to.have.class(`i-amphtml-onetap-google-ui-${mode}`);
+    });
+  }
+);
diff --git a/extensions/amp-onetap-google/0.1/test/validator-amp-onetap-google.html b/extensions/amp-onetap-google/0.1/test/validator-amp-onetap-google.html
new file mode 100644
index 0000000000000..745477af21e3c
--- /dev/null
+++ b/extensions/amp-onetap-google/0.1/test/validator-amp-onetap-google.html
@@ -0,0 +1,43 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-onetap-google tag. See the inline comments.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-latest.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <!-- Valid: Includes data-src -->
+  <amp-onetap-google layout="nodisplay" data-src="https://example.com/one-tap-impl">
+  </amp-onetap-google>
+
+  <!-- Invalid: Not unique -->
+  <amp-onetap-google layout="nodisplay" data-src="https://example.com/one-tap-impl">
+  </amp-onetap-google>
+
+  <!-- Invalid: No data-src -->
+  <amp-onetap-google layout="nodisplay">
+  </amp-onetap-google>
+</body>
+</html>
diff --git a/extensions/amp-onetap-google/0.1/test/validator-amp-onetap-google.out b/extensions/amp-onetap-google/0.1/test/validator-amp-onetap-google.out
new file mode 100644
index 0000000000000..62a6aa75c8bef
--- /dev/null
+++ b/extensions/amp-onetap-google/0.1/test/validator-amp-onetap-google.out
@@ -0,0 +1,48 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-onetap-google tag. See the inline comments.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-latest.js"></script>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|    <!-- Valid: Includes data-src -->
+|    <amp-onetap-google layout="nodisplay" data-src="https://example.com/one-tap-impl">
+|    </amp-onetap-google>
+|
+|    <!-- Invalid: Not unique -->
+|    <amp-onetap-google layout="nodisplay" data-src="https://example.com/one-tap-impl">
+>>   ^~~~~~~~~
+amp-onetap-google/0.1/test/validator-amp-onetap-google.html:36:2 The tag 'amp-onetap-google' appears more than once in the document. (see https://amp.dev/documentation/components/amp-onetap-google)
+|    </amp-onetap-google>
+|
+|    <!-- Invalid: No data-src -->
+|    <amp-onetap-google layout="nodisplay">
+>>   ^~~~~~~~~
+amp-onetap-google/0.1/test/validator-amp-onetap-google.html:40:2 The mandatory attribute 'data-src' is missing in tag 'amp-onetap-google'. (see https://amp.dev/documentation/components/amp-onetap-google)
+|    </amp-onetap-google>
+|  </body>
+|  </html>
diff --git a/extensions/amp-onetap-google/OWNERS b/extensions/amp-onetap-google/OWNERS
new file mode 100644
index 0000000000000..77a55ee52b285
--- /dev/null
+++ b/extensions/amp-onetap-google/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'ampproject/wg-components'}],
+    },
+  ],
+}
diff --git a/extensions/amp-onetap-google/amp-onetap-google.md b/extensions/amp-onetap-google/amp-onetap-google.md
new file mode 100644
index 0000000000000..8faa2e7b92fcf
--- /dev/null
+++ b/extensions/amp-onetap-google/amp-onetap-google.md
@@ -0,0 +1,53 @@
+---
+$category@: social login
+formats:
+  - websites
+teaser:
+  text: Displays Google One Tap.
+---
+
+<!---
+Copyright 2020 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.
+-->
+
+# amp-onetap-google
+
+## Overview
+
+`amp-onetap-google` displays [Google One Tap sign-in](https://developers.google.com/identity/one-tap/web).
+
+#### Example
+
+```html
+<amp-onetap-google
+  layout="nodisplay"
+  data-src="https://example.com/onetap"
+></amp-onetap-google>
+```
+
+After a successful sign-in, [`amp-access`](https://go.amp.dev/c/amp-access) and/or [`amp-subscriptions`](https://go.amp.dev/c/amp-subscriptions) are refreshed on the page.
+
+## Attributes
+
+<table>
+  <tr>
+    <td width="40%"><strong>data-src (required)</strong></td>
+    <td>The URL of the intermediate iframe. You can use <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md">URL substitution variables</a> to pass values like <code>ACCESS_READER_ID</code>.</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>common attributes</strong></td>
+    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
+  </tr>
+</table>
diff --git a/extensions/amp-onetap-google/validator-amp-onetap-google.protoascii b/extensions/amp-onetap-google/validator-amp-onetap-google.protoascii
new file mode 100644
index 0000000000000..fb12e896044f2
--- /dev/null
+++ b/extensions/amp-onetap-google/validator-amp-onetap-google.protoascii
@@ -0,0 +1,45 @@
+#
+# Copyright 2020 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.
+#
+
+tags: {  # amp-onetap-google
+  html_format: AMP
+  tag_name: "SCRIPT"
+  extension_spec: {
+    name: "amp-onetap-google"
+    version: "0.1"
+    version: "latest"
+  }
+  attr_lists: "common-extension-attrs"
+}
+
+tags: {  # <amp-onetap-google>
+  html_format: AMP
+  tag_name: "AMP-ONETAP-GOOGLE"
+  requires_extension: "amp-onetap-google"
+  unique: true
+  # data-* is generally allowed, but it's not generally mandatory.
+  attrs: {
+    name: "data-src"
+    mandatory: true,
+    value_url: {
+      protocol: "https"
+    }
+  }
+  attr_lists: "extended-amp-global"
+  amp_layout: {
+    supported_layouts: NODISPLAY
+  }
+}
diff --git a/extensions/amp-ooyala-player/0.1/amp-ooyala-player.js b/extensions/amp-ooyala-player/0.1/amp-ooyala-player.js
index 2736c6c6a5694..aa8bcf5d19f72 100644
--- a/extensions/amp-ooyala-player/0.1/amp-ooyala-player.js
+++ b/extensions/amp-ooyala-player/0.1/amp-ooyala-player.js
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
 import {
@@ -24,6 +25,7 @@ import {
 } from '../../../src/iframe-video';
 import {dev, userAssert} from '../../../src/log';
 import {
+  dispatchCustomEvent,
   fullscreenEnter,
   fullscreenExit,
   isFullscreenElement,
@@ -61,6 +63,9 @@ class AmpOoyalaPlayer extends AMP.BaseElement {
 
     /** @private {?Function} */
     this.unlistenMessage_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -137,9 +142,12 @@ class AmpOoyalaPlayer extends AMP.BaseElement {
     });
 
     const loaded = this.loadPromise(this.iframe_).then(() => {
-      el.dispatchCustomEvent(VideoEvents.LOAD);
+      dispatchCustomEvent(el, VideoEvents.LOAD);
     });
     this.playerReadyResolver_(loaded);
+
+    this.pauseHelper_.updatePlaying(true);
+
     return loaded;
   }
 
@@ -157,6 +165,9 @@ class AmpOoyalaPlayer extends AMP.BaseElement {
     const deferred = new Deferred();
     this.playerReadyPromise_ = deferred.promise;
     this.playerReadyResolver_ = deferred.resolve;
+
+    this.pauseHelper_.updatePlaying(false);
+
     return true;
   }
 
@@ -165,11 +176,6 @@ class AmpOoyalaPlayer extends AMP.BaseElement {
     return isLayoutSizeDefined(layout);
   }
 
-  /** @override */
-  viewportCallback(visible) {
-    this.element.dispatchCustomEvent(VideoEvents.VISIBILITY, {visible});
-  }
-
   /** @override */
   pauseCallback() {
     // Only send pauseVideo command if the player is playing. Otherwise
diff --git a/extensions/amp-ooyala-player/0.1/test/test-amp-ooyala.js b/extensions/amp-ooyala-player/0.1/test/test-amp-ooyala.js
index 587b3b99814cb..f2c9459d07251 100644
--- a/extensions/amp-ooyala-player/0.1/test/test-amp-ooyala.js
+++ b/extensions/amp-ooyala-player/0.1/test/test-amp-ooyala.js
@@ -15,6 +15,7 @@
  */
 
 import '../amp-ooyala-player';
+import * as dom from '../../../../src/dom';
 
 describes.realWin(
   'amp-ooyala-player',
@@ -25,6 +26,9 @@ describes.realWin(
   },
   function (env) {
     let win, doc;
+    const embedCode = 'Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ';
+    const playerId = '6440813504804d76ba35c8c787a4b33c';
+    const pCode = '5zb2wxOlZcNCe_HVT3a6cawW298X';
 
     beforeEach(() => {
       win = env.win;
@@ -40,6 +44,7 @@ describes.realWin(
       opt_placeholder
     ) {
       const player = doc.createElement('amp-ooyala-player');
+      player.setAttribute('layout', 'fixed');
       if (embedCode) {
         player.setAttribute('data-embedcode', embedCode);
       }
@@ -63,75 +68,127 @@ describes.realWin(
       }
 
       doc.body.appendChild(player);
-      return player.build().then(() => {
+      return player.buildInternal().then(() => {
         player.layoutCallback();
         return player;
       });
     }
 
-    it('renders a V3 player', () => {
-      return getOoyalaElement(
-        'Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ',
-        '6440813504804d76ba35c8c787a4b33c',
-        '5zb2wxOlZcNCe_HVT3a6cawW298X'
-      ).then((player) => {
-        const playerIframe = player.querySelector('iframe');
-        expect(playerIframe).to.not.be.null;
-        expect(playerIframe.src).to.equal(
-          'https://player.ooyala.com/iframe.html' +
-            '?platform=html5-priority&ec=Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ' +
-            '&pbid=6440813504804d76ba35c8c787a4b33c'
+    describe('rendering', async () => {
+      it('renders a V3 player', () => {
+        return getOoyalaElement(embedCode, playerId, pCode).then((player) => {
+          const playerIframe = player.querySelector('iframe');
+          expect(playerIframe).to.not.be.null;
+          expect(playerIframe.src).to.contain(embedCode);
+          expect(playerIframe.src).to.contain(playerId);
+        });
+      });
+
+      it('renders a V4 player', () => {
+        return getOoyalaElement(embedCode, playerId, pCode, 'V4').then(
+          (player) => {
+            const playerIframe = player.querySelector('iframe');
+            expect(playerIframe).to.not.be.null;
+            expect(playerIframe.src).to.contain(embedCode);
+            expect(playerIframe.src).to.contain(playerId);
+            expect(playerIframe.src).to.contain(pCode);
+          }
         );
       });
-    });
 
-    it('renders a V4 player', () => {
-      return getOoyalaElement(
-        'Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ',
-        '6440813504804d76ba35c8c787a4b33c',
-        '5zb2wxOlZcNCe_HVT3a6cawW298X',
-        'V4'
-      ).then((player) => {
+      it('fails without an embed code', () => {
+        return getOoyalaElement(
+          null,
+          playerId,
+          pCode
+        ).should.eventually.be.rejectedWith(
+          /The data-embedcode attribute is required/
+        );
+      });
+
+      it('fails without a player ID', () => {
+        return getOoyalaElement(
+          embedCode,
+          null,
+          pCode
+        ).should.eventually.be.rejectedWith(
+          /The data-playerid attribute is required/
+        );
+      });
+
+      it('fails without a p-code', () => {
+        return getOoyalaElement(
+          embedCode,
+          playerId,
+          null
+        ).should.eventually.be.rejectedWith(
+          /The data-pcode attribute is required/
+        );
+      });
+
+      it('removes iframe after unlayoutCallback', async () => {
+        const player = await getOoyalaElement(embedCode, playerId, pCode);
         const playerIframe = player.querySelector('iframe');
         expect(playerIframe).to.not.be.null;
-        expect(playerIframe.src).to.equal(
-          'https://player.ooyala.com/static/v4/production/latest/' +
-            'skin-plugin/amp_iframe.html' +
-            '?pcode=5zb2wxOlZcNCe_HVT3a6cawW298X' +
-            '&ec=Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ' +
-            '&pbid=6440813504804d76ba35c8c787a4b33c'
-        );
+
+        const impl = await player.getImpl(false);
+        impl.unlayoutCallback();
+        expect(player.querySelector('iframe')).to.be.null;
+        expect(impl.iframe_).to.be.null;
       });
     });
 
-    it('fails without an embed code', () => {
-      return getOoyalaElement(
-        null,
-        '6440813504804d76ba35c8c787a4b33c',
-        '5zb2wxOlZcNCe_HVT3a6cawW298X'
-      ).should.eventually.be.rejectedWith(
-        /The data-embedcode attribute is required/
-      );
-    });
+    describe('methods', async () => {
+      let impl;
+      beforeEach(async () => {
+        const player = await getOoyalaElement(embedCode, playerId, pCode);
+        impl = await player.getImpl(false);
+      });
 
-    it('fails without a player ID', () => {
-      return getOoyalaElement(
-        'Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ',
-        null,
-        '5zb2wxOlZcNCe_HVT3a6cawW298X'
-      ).should.eventually.be.rejectedWith(
-        /The data-playerid attribute is required/
-      );
-    });
+      it('is interactive', () => {
+        expect(impl.isInteractive()).to.be.true;
+      });
+
+      it('can play', () => {
+        const spy = env.sandbox.spy(impl, 'sendCommand_');
+        impl.play();
+        expect(spy).to.be.calledWith('play');
+      });
+
+      it('can pause', () => {
+        const spy = env.sandbox.spy(impl, 'sendCommand_');
+        impl.pause(true);
+        expect(spy).to.be.calledWith('pause');
+      });
+
+      it('can mute', () => {
+        env.sandbox.spy(impl, 'sendCommand_');
+        impl.mute();
+        expect(impl.sendCommand_).calledWith('mute');
+      });
+
+      it('can unmute', () => {
+        env.sandbox.spy(impl, 'sendCommand_');
+        impl.unmute();
+        expect(impl.sendCommand_).calledWith('unmute');
+      });
+
+      it('can enter fullscreen', () => {
+        const spy = env.sandbox.spy(dom, 'fullscreenEnter');
+        impl.fullscreenEnter();
+        expect(spy).calledWith(impl.iframe_);
+      });
+
+      it('can exit fullscreen', () => {
+        const spy = env.sandbox.spy(dom, 'fullscreenExit');
+        impl.fullscreenExit();
+        expect(spy).calledWith(impl.iframe_);
+        expect(impl.isFullscreen()).to.be.false;
+      });
 
-    it('fails without a p-code', () => {
-      return getOoyalaElement(
-        'Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ',
-        '6440813504804d76ba35c8c787a4b33c',
-        null
-      ).should.eventually.be.rejectedWith(
-        /The data-pcode attribute is required/
-      );
+      it('does not pre-implement MediaSession API', () => {
+        expect(impl.preimplementsMediaSessionAPI()).to.be.false;
+      });
     });
   }
 );
diff --git a/extensions/amp-ooyala-player/0.1/test/validator-amp-ooyala.out b/extensions/amp-ooyala-player/0.1/test/validator-amp-ooyala.out
index d4cfb8e1e0e0e..3ff84de7969bc 100644
--- a/extensions/amp-ooyala-player/0.1/test/validator-amp-ooyala.out
+++ b/extensions/amp-ooyala-player/0.1/test/validator-amp-ooyala.out
@@ -78,4 +78,4 @@ amp-ooyala-player/0.1/test/validator-amp-ooyala.html:67:4 The mandatory attribut
 |        data-pcode="p0cW46sbRY1PxXueRVL2a_4BfdFz">
 |      </amp-ooyala-player>
 |    </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-ooyala-player/OWNERS b/extensions/amp-ooyala-player/OWNERS
index c3e6d62b6f1be..bbad58346509c 100644
--- a/extensions/amp-ooyala-player/OWNERS
+++ b/extensions/amp-ooyala-player/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'mityaha'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'mityaha'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-ooyala-player/amp-ooyala-player.md b/extensions/amp-ooyala-player/amp-ooyala-player.md
index 421e5810b8c9a..486468029ea9f 100644
--- a/extensions/amp-ooyala-player/amp-ooyala-player.md
+++ b/extensions/amp-ooyala-player/amp-ooyala-player.md
@@ -67,4 +67,4 @@ limitations under the License.
 
 ## Validation
 
-See [amp-ooyala-player rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ooyala-player/validator-amp-ooyala-player.protoascii) in the AMP validator specification.
+See [amp-ooyala-player rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-ooyala-player/validator-amp-ooyala-player.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-orientation-observer/0.1/amp-orientation-observer.js b/extensions/amp-orientation-observer/0.1/amp-orientation-observer.js
index 95ad712a59346..bf084abf0397a 100644
--- a/extensions/amp-orientation-observer/0.1/amp-orientation-observer.js
+++ b/extensions/amp-orientation-observer/0.1/amp-orientation-observer.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {Services} from '../../../src/services';
-import {clamp, sum} from '../../../src/utils/math';
+import {clamp, sum} from '../../../src/core/math';
 import {createCustomEvent} from '../../../src/event-helper';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {userAssert} from '../../../src/log';
 
 const TAG = 'amp-orientation-observer';
@@ -142,7 +142,7 @@ export class AmpOrientationObserver extends AMP.BaseElement {
       const {screen} = this.win;
 
       const {alpha} = event;
-      let {gamma, beta} = event;
+      let {beta, gamma} = event;
 
       // Detect the implementation of orientation angle
       const angle =
@@ -178,9 +178,9 @@ export class AmpOrientationObserver extends AMP.BaseElement {
               /** @type {number} */ (currentValue[axis])
             );
           } else {
-            this.computedValue_[axis] = /** @type {number} */ (currentValue[
-              axis
-            ]);
+            this.computedValue_[axis] = /** @type {number} */ (
+              currentValue[axis]
+            );
           }
           this.triggerEvent_(
             axis,
diff --git a/extensions/amp-orientation-observer/0.1/test/validator-amp-orientation-observer.out b/extensions/amp-orientation-observer/0.1/test/validator-amp-orientation-observer.out
index c4aceb7d8c222..4e0a9064de1a9 100644
--- a/extensions/amp-orientation-observer/0.1/test/validator-amp-orientation-observer.out
+++ b/extensions/amp-orientation-observer/0.1/test/validator-amp-orientation-observer.out
@@ -132,4 +132,4 @@ amp-orientation-observer/0.1/test/validator-amp-orientation-observer.html:79:2 T
 >>   ^~~~~~~~~
 amp-orientation-observer/0.1/test/validator-amp-orientation-observer.html:80:2 The attribute 'smoothing' in tag 'amp-orientation-observer' is set to the invalid value '-5'. (see https://amp.dev/documentation/components/amp-orientation-observer)
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-orientation-observer/OWNERS b/extensions/amp-orientation-observer/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-orientation-observer/OWNERS
+++ b/extensions/amp-orientation-observer/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-orientation-observer/amp-orientation-observer.md b/extensions/amp-orientation-observer/amp-orientation-observer.md
index a46d13dcc009c..0b5bdd8983687 100644
--- a/extensions/amp-orientation-observer/amp-orientation-observer.md
+++ b/extensions/amp-orientation-observer/amp-orientation-observer.md
@@ -24,25 +24,11 @@ limitations under the License.
 
 # amp-orientation-observer
 
-## Overview
+## Usage
 
 The `amp-orientation-observer` component monitors the orientation of a device, and dispatches low-trust level events (`alpha`, `beta`, `gamma`) that report changes in the device's orientation along the `alpha`, `beta` and `gamma` axises in terms of `angle` and `percent`. These can be used to trigger actions (_Only Low Trust Actions_) on other components (e.g., [amp-animation](https://amp.dev/documentation/components/amp-animation)).
 
-{% call callout('Note', type='note') %}
 The `amp-orientation-observer` component is only useful when used with other components and does not do anything on its own.
-{% endcall %}
-
-#### Events
-
-These are the low-trust level events that the `amp-orientation-observer` component dispatches:
-
-| Event   | Description                                                                                                  |
-| ------- | ------------------------------------------------------------------------------------------------------------ |
-| `alpha` | Represents the motion of the device around the z axis.                                                       |
-| `beta`  | Represents the motion of the device around the x axis.                                                       |
-| `gamma` | Represents the motion of the device around the y axis. This represents a left to right motion of the device. |
-
-## What can I do with amp-orientation-observer?
 
 Currently, [amp-animation](https://amp.dev/documentation/components/amp-animation) and several video players in AMP are the only components that allow low-trust events to trigger their actions (e.g., starting an animation, seeking to a position within the animation, pausing a video, etc.).
 
@@ -94,11 +80,11 @@ Imagine an animation where the hour hand of a clock rotates as the user scrolls
 
 ## Attributes
 
-##### alpha-range (optional)
+### alpha-range (optional)
 
 Specifies that the associated action should only take place for changes between the specified range along the z axis. Specified as a space separated list of 2 values (e.g., `alpha-range="0 180"`). By default, the related action is triggered for all changes between `0` and `360 degrees`.
 
-##### beta-range (optional)
+### beta-range (optional)
 
 Specifies that the associated action should only take place for changes between the specified range along the x axis. Specified as a space separated list of 2 values (e.g., `beta-range="0 180"`). By default, the related action is triggered for all changes between `0` and `360 degrees`.
 
@@ -115,14 +101,30 @@ Imagine an animation where the hour hand of a clock rotates as the user scrolls
 </amp-orientation-observer>
 ```
 
-##### gamma-range (optional)
+### gamma-range (optional)
 
 Specifies that the associated action should only take place for changes between the specified range along the y axis. Specified as a space separated list of 2 values (e.g., `gamma-range="0 90"`. By default the related action is triggered for all changes between `0` and `360 degrees`.
 
-##### smoothing (optional)
+### smoothing (optional)
 
 When enabled, outputs a moving average of the last `n` values instead of the raw value read from the sensor. By default, when activated, smoothing will be set to 4 points.
 
+## Events
+
+These are the low-trust level events that the `amp-orientation-observer` component dispatches:
+
+### `alpha`
+
+Represents the motion of the device around the z axis.
+
+### `beta`
+
+Represents the motion of the device around the x axis.
+
+### `gamma`
+
+Represents the motion of the device around the y axis. This represents a left to right motion of the device.
+
 ## Validation
 
-See [amp-orientation-observer rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-orientation-observer/validator-amp-orientation-observer.protoascii) in the AMP validator specification.
+See [amp-orientation-observer rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-orientation-observer/validator-amp-orientation-observer.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-orientation-observer/validator-amp-orientation-observer.protoascii b/extensions/amp-orientation-observer/validator-amp-orientation-observer.protoascii
index ff0ffcd0a94e8..f4966c17ed038 100644
--- a/extensions/amp-orientation-observer/validator-amp-orientation-observer.protoascii
+++ b/extensions/amp-orientation-observer/validator-amp-orientation-observer.protoascii
@@ -16,7 +16,6 @@
 
 tags: {  # amp-orientation-observer
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-orientation-observer"
@@ -27,7 +26,6 @@ tags: {  # amp-orientation-observer
 }
 tags: {  # <amp-orientation-observer>
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "AMP-ORIENTATION-OBSERVER"
   requires_extension: "amp-orientation-observer"
   attr_lists: "extended-amp-global"
diff --git a/extensions/amp-pan-zoom/0.1/amp-pan-zoom.js b/extensions/amp-pan-zoom/0.1/amp-pan-zoom.js
index 71a922503df4f..9def3ccfe6611 100644
--- a/extensions/amp-pan-zoom/0.1/amp-pan-zoom.js
+++ b/extensions/amp-pan-zoom/0.1/amp-pan-zoom.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {Animation} from '../../../src/animation';
 import {CSS} from '../../../build/amp-pan-zoom-0.1.css';
 import {
@@ -26,14 +26,22 @@ import {
 import {Gestures} from '../../../src/gesture';
 import {Layout} from '../../../src/layout';
 import {Services} from '../../../src/services';
-import {bezierCurve} from '../../../src/curve';
-import {boundValue, distance, magnitude} from '../../../src/utils/math';
+import {bezierCurve} from '../../../src/core/data-structures/curve';
+import {boundValue, distance, magnitude} from '../../../src/core/math';
 import {continueMotion} from '../../../src/motion';
 import {createCustomEvent, listen} from '../../../src/event-helper';
 import {dev, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {layoutRectFromDomRect, layoutRectLtwh} from '../../../src/layout-rect';
+import {dict} from '../../../src/core/types/object';
+import {dispatchCustomEvent} from '../../../src/dom';
+import {
+  layoutRectFromDomRect,
+  layoutRectLtwh,
+} from '../../../src/core/math/layout-rect';
 import {numeric} from '../../../src/transition';
+import {
+  observeContentSize,
+  unobserveContentSize,
+} from '../../../src/utils/size-observer';
 import {px, scale, setStyles, translate} from '../../../src/style';
 
 const PAN_ZOOM_CURVE_ = bezierCurve(0.4, 0, 0.2, 1.4);
@@ -140,13 +148,13 @@ export class AmpPanZoom extends AMP.BaseElement {
     /** @private */
     this.disableDoubleTap_ = false;
 
-    /** @private {UnlistenDef|null} */
+    /** @private {?UnlistenDef} */
     this.unlistenMouseDown_ = null;
 
-    /** @private {UnlistenDef|null} */
+    /** @private {?UnlistenDef} */
     this.unlistenMouseUp_ = null;
 
-    /** @private {UnlistenDef|null} */
+    /** @private {?UnlistenDef} */
     this.unlistenMouseMove_ = null;
 
     /** @private */
@@ -154,6 +162,8 @@ export class AmpPanZoom extends AMP.BaseElement {
 
     /** @private */
     this.mouseStartX_ = 0;
+
+    this.onResize_ = this.onResize_.bind(this);
   }
 
   /** @override */
@@ -209,13 +219,6 @@ export class AmpPanZoom extends AMP.BaseElement {
     );
   }
 
-  /** @override */
-  onMeasureChanged() {
-    if (this.resetOnResize_) {
-      this.resetContentDimensions_();
-    }
-  }
-
   /** @override */
   layoutCallback() {
     this.createZoomButton_();
@@ -258,6 +261,13 @@ export class AmpPanZoom extends AMP.BaseElement {
     );
   }
 
+  /** @private */
+  onResize_() {
+    if (this.resetOnResize_) {
+      this.resetContentDimensions_();
+    }
+  }
+
   /**
    * Checks to see if an element is supported.
    * @param {Element} element
@@ -344,7 +354,7 @@ export class AmpPanZoom extends AMP.BaseElement {
    * @private
    */
   updateMaxScale_(sourceAspectRatio) {
-    const {width, height} = this.elementBox_;
+    const {height, width} = this.elementBox_;
     const elementBoxRatio = width / height;
     const maxScale = Math.max(
       elementBoxRatio / sourceAspectRatio,
@@ -466,11 +476,12 @@ export class AmpPanZoom extends AMP.BaseElement {
     this.unlistenMouseDown_ = listen(this.element, 'mousedown', (e) =>
       this.onMouseDown_(e)
     );
+    observeContentSize(this.element, this.onResize_);
   }
 
   /**
    * Unlisten a listener and clear. If null, does nothing
-   * @param {UnlistenDef|null} handle
+   * @param {?UnlistenDef} handle
    * @private
    */
   unlisten_(handle) {
@@ -488,6 +499,7 @@ export class AmpPanZoom extends AMP.BaseElement {
     this.unlisten_(this.unlistenMouseDown_);
     this.unlisten_(this.unlistenMouseMove_);
     this.unlisten_(this.unlistenMouseUp_);
+    unobserveContentSize(this.element, this.onResize_);
   }
 
   /**
@@ -729,12 +741,12 @@ export class AmpPanZoom extends AMP.BaseElement {
    */
   updatePanZoomBounds_(scale) {
     const {
-      width: cWidth,
-      left: xOffset,
       height: cHeight,
+      left: xOffset,
       top: yOffset,
+      width: cWidth,
     } = this.contentBox_;
-    const {width: eWidth, height: eHeight} = this.elementBox_;
+    const {height: eHeight, width: eWidth} = this.elementBox_;
 
     this.minX_ = Math.min(0, eWidth - (xOffset + (cWidth * (scale + 1)) / 2));
     this.maxX_ = Math.max(0, (cWidth * scale - cWidth) / 2 - xOffset);
@@ -748,7 +760,7 @@ export class AmpPanZoom extends AMP.BaseElement {
    * @private
    */
   updatePanZoom_() {
-    const {scale_: s, posX_: x, posY_: y, content_: content} = this;
+    const {content_: content, posX_: x, posY_: y, scale_: s} = this;
     return this.mutateElement(() => {
       setStyles(dev().assertElement(content), {
         transform: translate(x, y) + ' ' + scale(s),
@@ -773,7 +785,7 @@ export class AmpPanZoom extends AMP.BaseElement {
       })
     );
     this.action_.trigger(this.element, 'transformEnd', event, ActionTrust.HIGH);
-    this.element.dispatchCustomEvent('transformEnd');
+    dispatchCustomEvent(this.element, 'transformEnd');
   }
 
   /**
@@ -855,7 +867,7 @@ export class AmpPanZoom extends AMP.BaseElement {
     if (dir == 0) {
       return Promise.resolve();
     }
-    const {width, height} = this.elementBox_;
+    const {height, width} = this.elementBox_;
     const dist = magnitude(deltaX, deltaY);
     const newScale = this.startScale_ * (1 + (dir * dist) / 100);
     const deltaCenterX = width / 2 - this.getOffsetX_(centerClientX);
diff --git a/extensions/amp-pan-zoom/0.1/test/integration/test-amp-pan-zoom.js b/extensions/amp-pan-zoom/0.1/test/integration/test-amp-pan-zoom.js
index e190cddc1e154..223ed7c875d95 100644
--- a/extensions/amp-pan-zoom/0.1/test/integration/test-amp-pan-zoom.js
+++ b/extensions/amp-pan-zoom/0.1/test/integration/test-amp-pan-zoom.js
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../../../../src/amp-events';
+import {AmpEvents} from '../../../../../src/core/constants/amp-events';
 import {createFixtureIframe} from '../../../../../testing/iframe';
 import {toggleExperiment} from '../../../../../src/experiments';
 
-describe
+describes.sandboxed
   .configure()
   .ifChrome()
-  .run('amp-pan-zoom', function () {
+  .run('amp-pan-zoom', {}, function () {
     this.timeout(100000);
     let fixture;
     beforeEach(() => {
diff --git a/extensions/amp-pan-zoom/0.1/test/test-amp-pan-zoom.js b/extensions/amp-pan-zoom/0.1/test/test-amp-pan-zoom.js
index 0cc9b9837852a..f2459c930518a 100644
--- a/extensions/amp-pan-zoom/0.1/test/test-amp-pan-zoom.js
+++ b/extensions/amp-pan-zoom/0.1/test/test-amp-pan-zoom.js
@@ -63,15 +63,18 @@ describes.realWin(
 
       el.appendChild(svg);
       doc.body.appendChild(el);
-      return el.build().then(() => {
-        impl = el.implementation_;
-        env.sandbox
-          .stub(impl, 'measureMutateElement')
-          .callsFake(measureMutateElementStub);
-        env.sandbox
-          .stub(impl, 'mutateElement')
-          .callsFake((mutate) => measureMutateElementStub(undefined, mutate));
-      });
+      return el
+        .buildInternal()
+        .then(() => el.getImpl(false))
+        .then((aImpl) => {
+          impl = aImpl;
+          env.sandbox
+            .stub(impl, 'measureMutateElement')
+            .callsFake(measureMutateElementStub);
+          env.sandbox
+            .stub(impl, 'mutateElement')
+            .callsFake((mutate) => measureMutateElementStub(undefined, mutate));
+        });
     }
 
     beforeEach(() => {
diff --git a/extensions/amp-pan-zoom/OWNERS b/extensions/amp-pan-zoom/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-pan-zoom/OWNERS
+++ b/extensions/amp-pan-zoom/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-pan-zoom/amp-pan-zoom.md b/extensions/amp-pan-zoom/amp-pan-zoom.md
index a4a60d3c57cad..f7ac26716495c 100644
--- a/extensions/amp-pan-zoom/amp-pan-zoom.md
+++ b/extensions/amp-pan-zoom/amp-pan-zoom.md
@@ -24,12 +24,10 @@ limitations under the License.
 
 # amp-pan-zoom
 
-## Behavior
+## Usage
 
 The `<amp-pan-zoom>` component takes one child of arbitrary content and enables the ability for the user to zoom and pan the content via double tap or pinch-to-zoom actions. Tap events registered on the zoomable content or its children will trigger after a 300ms delay.
 
-## Usage
-
 ```html
 <amp-layout layout="responsive" width="4" height="3">
   <amp-pan-zoom layout="fill">
@@ -40,42 +38,49 @@ The `<amp-pan-zoom>` component takes one child of arbitrary content and enables
 </amp-layout>
 ```
 
+### Valid children tags
+
+See the [list](https://github.com/ampproject/amphtml/blob/e517ee7e58215ea8baaa04fa5c6b09bba9581549/extensions/amp-pan-zoom/0.1/amp-pan-zoom.js#L47) of eligibles children tags of `amp-pan-zoom`.
+
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>max-scale (optional)</strong></td>
-    <td>Specifies a max zoom scale, which should be a positive number from 1 - 9. The default value is 3.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>initial-scale (optional)</strong></td>
-    <td>Specifies a default zoom scale, which should be a positive number from 1 - 9. The default value is 1.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>initial-x, initial-y (optional)</strong></td>
-    <td>Specifies default translation coordinates, otherwise both are set to 0. The value is expected to be a whole number.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>reset-on-resize (optional)</strong></td>
-    <td>Refers to the ability to center the image and set the image's scale back to 1. Setting this attribute causes the component to reset the zoomable content on resize of the image itself.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>controls (optional)</strong></td>
-    <td>Shows default controls (zoom in / zoom out button) which can be customized via public CSS classes.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
-
-## Events and actions
-
-#### transformEnd (event)
+### max-scale (optional)
 
-The `<amp-pan-zoom>` component triggers the `transformEnd` event whenever the pan or zoom animation is complete. This event emits the `scale`, `x`, and `y` parameters. The `scale` parameter contains the current scale of the child content being zoomed. The `x` and `y` parameters contain the `x` and `y` translation of the child content from center in pixels, respectively.
+Specifies a max zoom scale, which should be a positive number from 1 - 9. The default value is 3.
+
+### initial-scale (optional)
+
+Specifies a default zoom scale, which should be a positive number from 1 - 9. The default value is 1.
+
+### initial-x, initial-y (optional)
+
+Specifies default translation coordinates, otherwise both are set to 0. The value is expected to be a whole number.
+
+### reset-on-resize (optional)
+
+Refers to the ability to center the image and set the image's scale back to 1. Setting this attribute causes the component to reset the zoomable content on resize of the image itself.
+
+### controls (optional)
+
+Shows default controls (zoom in / zoom out button) which can be customized via public CSS classes.
+
+### common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
+
+## Actions
 
-##### Example
+### transform
+
+The `transform` action takes `scale`, `x`, `y` as parameters and sets the CSS transform property of the child content. If no `x` or `y` value is specified, the content zooms to center.
+
+Assuming that there is an `<amp-pan-zoom>` component with the id `pan-zoom` on the page, a button with `on="tap:pan-zoom.transform(scale=3)"` will zoom to scale 3x at the center of the content, a button with `on="tap:pan-zoom.transform(scale=3, x=50, y=10)"` will first scale the content to 3x scale, and then shift the content 50 pixels towards the left, and 10 pixels upwards. Consider the `scale`, `x`, and `y` attributes directly applied to the content's CSS transform attribute after animation.
+
+## Events
+
+### transformEnd
+
+The `<amp-pan-zoom>` component triggers the `transformEnd` event whenever the pan or zoom animation is complete. This event emits the `scale`, `x`, and `y` parameters. The `scale` parameter contains the current scale of the child content being zoomed. The `x` and `y` parameters contain the `x` and `y` translation of the child content from center in pixels, respectively.
 
 This example contains an `amp-pan-zoom` component that will update `amp-state` on `transformEnd`.
 
@@ -105,15 +110,7 @@ This example contains an `amp-pan-zoom` component that will update `amp-state` o
 </amp-pan-zoom>
 ```
 
-#### transform (action)
-
-The `transform` action takes `scale`, `x`, `y` as parameters and sets the CSS transform property of the child content. If no `x` or `y` value is specified, the content zooms to center.
-
-##### Example
-
-Assuming that there is an `<amp-pan-zoom>` component with the id `pan-zoom` on the page, a button with `on="tap:pan-zoom.transform(scale=3)"` will zoom to scale 3x at the center of the content, a button with `on="tap:pan-zoom.transform(scale=3, x=50, y=10)"` will first scale the content to 3x scale, and then shift the content 50 pixels towards the left, and 10 pixels upwards. Consider the `scale`, `x`, and `y` attributes directly applied to the content's CSS transform attribute after animation.
-
-## Customizing Buttons
+## Styling
 
 The following public CSS classes are exposed to allow customization for the zoom buttons:
 
@@ -134,8 +131,4 @@ You can also hide these buttons entirely and create your own using the `transfor
 
 ## Validation
 
-See [amp-pan-zoom rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-pan-zoom/validator-amp-pan-zoom.protoascii) in the AMP validator specification.
-
-## Eligibile children tags
-
-See the [list](https://github.com/ampproject/amphtml/blob/e517ee7e58215ea8baaa04fa5c6b09bba9581549/extensions/amp-pan-zoom/0.1/amp-pan-zoom.js#L47) of eligibles children tags of `amp-pan-zoom`.
+See [amp-pan-zoom rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-pan-zoom/validator-amp-pan-zoom.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-pan-zoom/validator-amp-pan-zoom.protoascii b/extensions/amp-pan-zoom/validator-amp-pan-zoom.protoascii
index 6b4cfaa417145..cc1a5f4d7527e 100644
--- a/extensions/amp-pan-zoom/validator-amp-pan-zoom.protoascii
+++ b/extensions/amp-pan-zoom/validator-amp-pan-zoom.protoascii
@@ -15,7 +15,6 @@
 #
 tags: {  # amp-pan-zoom
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-pan-zoom"
@@ -26,7 +25,6 @@ tags: {  # amp-pan-zoom
 }
 tags: {  # <amp-pan-zoom>
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "AMP-PAN-ZOOM"
   requires_extension: "amp-pan-zoom"
   attrs: {
@@ -61,4 +59,3 @@ tags: {  # <amp-pan-zoom>
     supported_layouts: RESPONSIVE
   }
 }
-
diff --git a/extensions/amp-payment-google-button/0.1/test/validator-actions-amp-payment-google-button.html b/extensions/amp-payment-google-button/0.1/test/validator-actions-amp-payment-google-button.html
deleted file mode 100644
index 483722bf831fe..0000000000000
--- a/extensions/amp-payment-google-button/0.1/test/validator-actions-amp-payment-google-button.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!--
-  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.
--->
-<!--
-  Test Description:
-  Tests for the amp-payments-google-button tag. See inline comments.
--->
-<!doctype html>
-<html ⚡ actions>
-<head>
-  <meta charset="utf-8">
-  <link rel="canonical" href="./regular-html-version.html">
-  <meta name="viewport" content="width=device-width">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
-  <script async custom-element="amp-payment-google-button" src="https://cdn.ampproject.org/v0/amp-payment-google-button-0.1.js"></script>
-</head>
-<body>
-  <amp-state id="form" overridable>
-    <script type="application/json">
-    {
-      "product": ["product1", "product2"],
-      "productNames": [
-        "Shown: White",
-        "Shown: Black"
-      ],
-      "productStyles": [
-        "Style: 1234-56",
-        "Style: 5678-90"
-      ],
-      "productIndex": 0,
-      "productSize": "10",
-      "staticDir": "/static",
-      "page": "product",
-      "checkout": {
-        "section": "shipment"
-      }
-    }
-    </script>
-  </amp-state>
-  <!-- Valid -->
-  <amp-payment-google-button>
-    <script type="application/json">
-    {
-      "apiVersion": 1,
-      "merchantId": "0123456789",
-      "allowedPaymentMethods": ["CARD", "TOKENIZED_CARD"],
-      "paymentMethodTokenizationParameters": {
-        "tokenizationType": "PAYMENT_GATEWAY",
-        "parameters": {
-          "gateway": "stripe",
-          "stripe:publishableKey": "0123456789",
-          "stripe:version": "5"
-        }
-      },
-      "cardRequirements": {
-        "allowedCardNetworks": ["AMEX", "DISCOVER", "VISA", "MASTERCARD"],
-        "billingAddressRequired": true
-      },
-      "emailRequired": true,
-      "transactionInfo": {
-        "currencyCode": "USD",
-        "totalPriceStatus": "ESTIMATED",
-        "totalPrice": "10.00"
-      }
-    }
-    </script>
-  </amp-payment-google-button>
-  <!-- Valid: with render_only_if_payment_method_present -->
-  <amp-payment-google-button
-    render_only_if_payment_method_present="true">
-    <script type="application/json">
-      {
-        "config": "example"
-      }
-    </script>
-  </amp-payment-google-button>
-  <!-- Invalid: missing mandatory child script tag -->
-  <amp-payment-google-button></amp-payment-google-button>
-</body>
-</html>
diff --git a/extensions/amp-payment-google-button/0.1/test/validator-actions-amp-payment-google-button.out b/extensions/amp-payment-google-button/0.1/test/validator-actions-amp-payment-google-button.out
deleted file mode 100644
index 587feb4934180..0000000000000
--- a/extensions/amp-payment-google-button/0.1/test/validator-actions-amp-payment-google-button.out
+++ /dev/null
@@ -1,97 +0,0 @@
-FAIL
-|  <!--
-|    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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests for the amp-payments-google-button tag. See inline comments.
-|  -->
-|  <!doctype html>
-|  <html ⚡ actions>
-|  <head>
-|    <meta charset="utf-8">
-|    <link rel="canonical" href="./regular-html-version.html">
-|    <meta name="viewport" content="width=device-width">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
-|    <script async custom-element="amp-payment-google-button" src="https://cdn.ampproject.org/v0/amp-payment-google-button-0.1.js"></script>
-|  </head>
-|  <body>
-|    <amp-state id="form" overridable>
-|      <script type="application/json">
-|      {
-|        "product": ["product1", "product2"],
-|        "productNames": [
-|          "Shown: White",
-|          "Shown: Black"
-|        ],
-|        "productStyles": [
-|          "Style: 1234-56",
-|          "Style: 5678-90"
-|        ],
-|        "productIndex": 0,
-|        "productSize": "10",
-|        "staticDir": "/static",
-|        "page": "product",
-|        "checkout": {
-|          "section": "shipment"
-|        }
-|      }
-|      </script>
-|    </amp-state>
-|    <!-- Valid -->
-|    <amp-payment-google-button>
-|      <script type="application/json">
-|      {
-|        "apiVersion": 1,
-|        "merchantId": "0123456789",
-|        "allowedPaymentMethods": ["CARD", "TOKENIZED_CARD"],
-|        "paymentMethodTokenizationParameters": {
-|          "tokenizationType": "PAYMENT_GATEWAY",
-|          "parameters": {
-|            "gateway": "stripe",
-|            "stripe:publishableKey": "0123456789",
-|            "stripe:version": "5"
-|          }
-|        },
-|        "cardRequirements": {
-|          "allowedCardNetworks": ["AMEX", "DISCOVER", "VISA", "MASTERCARD"],
-|          "billingAddressRequired": true
-|        },
-|        "emailRequired": true,
-|        "transactionInfo": {
-|          "currencyCode": "USD",
-|          "totalPriceStatus": "ESTIMATED",
-|          "totalPrice": "10.00"
-|        }
-|      }
-|      </script>
-|    </amp-payment-google-button>
-|    <!-- Valid: with render_only_if_payment_method_present -->
-|    <amp-payment-google-button
-|      render_only_if_payment_method_present="true">
-|      <script type="application/json">
-|        {
-|          "config": "example"
-|        }
-|      </script>
-|    </amp-payment-google-button>
-|    <!-- Invalid: missing mandatory child script tag -->
-|    <amp-payment-google-button></amp-payment-google-button>
->>   ^~~~~~~~~
-amp-payment-google-button/0.1/test/validator-actions-amp-payment-google-button.html:92:2 Tag 'amp-payment-google-button' must have a minimum of 1 child tags - saw 0 child tags. (see https://amp.dev/documentation/components/amp-payment-google-button)
-|  </body>
-|  </html>
diff --git a/extensions/amp-payment-google-button/validator-amp-payment-google-button.protoascii b/extensions/amp-payment-google-button/validator-amp-payment-google-button.protoascii
deleted file mode 100644
index 67ae67a2a7f06..0000000000000
--- a/extensions/amp-payment-google-button/validator-amp-payment-google-button.protoascii
+++ /dev/null
@@ -1,65 +0,0 @@
-#
-# 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.
-
-tags: {  # amp-payment-google-button
-  html_format: ACTIONS
-  tag_name: "SCRIPT"
-  extension_spec: {
-    name: "amp-payment-google-button"
-    version: "0.1"
-    version: "latest"
-  }
-  attr_lists: "common-extension-attrs"
-}
-tags: {  # <amp-payment-google-button> (json)
-  html_format: ACTIONS
-  tag_name: "SCRIPT"
-  spec_name: "amp-payment-google-button extension .json script"
-  requires_extension: "amp-payment-google-button"
-  mandatory_parent: "AMP-PAYMENT-GOOGLE-BUTTON"
-  attrs: {
-    name: "type"
-    mandatory: true
-    value_casei: "application/json"
-    dispatch_key: NAME_VALUE_PARENT_DISPATCH
-  }
-  attr_lists: "name-attr"
-  attr_lists: "nonce-attr"
-  cdata: {
-    disallowed_cdata_regex: {
-      regex: "<!--"
-      error_message: "html comments"
-    }
-  }
-}
-tags: {  # <amp-payment-google-button>
-  html_format: ACTIONS
-  tag_name: "AMP-PAYMENT-GOOGLE-BUTTON"
-  requires_extension: "amp-payment-google-button"
-  attrs: {
-    name: "is-test-mode"
-    value_casei: "false"
-    value_casei: "true"
-  }
-  attrs: {
-    name: "render_only_if_payment_method_present"
-    value_casei: "false"
-    value_casei: "true"
-  }
-  child_tags: {
-    mandatory_min_num_child_tags: 1
-    child_tag_name_oneof: "SCRIPT"
-  }
-}
diff --git a/extensions/amp-payment-google-inline-async/0.1/test/validator-actions-amp-payment-google-inline-async.html b/extensions/amp-payment-google-inline-async/0.1/test/validator-actions-amp-payment-google-inline-async.html
deleted file mode 100644
index 8365064754ec5..0000000000000
--- a/extensions/amp-payment-google-inline-async/0.1/test/validator-actions-amp-payment-google-inline-async.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!--
-  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.
--->
-<!--
-  Test Description: Basic test for amp-payment-google-inline
--->
-<!doctype html>
-<html ⚡ actions>
-<head>
-  <meta charset="utf-8">
-  <title>amp-payment-google-inline-async: Basic</title>
-  <link rel="canonical" href="amps.html">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-payment-google-inline-async"
-      src="https://cdn.ampproject.org/v0/amp-payment-google-inline-async-0.1.js"></script>
-  <script async custom-element="amp-form"
-      src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
-</head>
-<body>
-  <!-- Valid -->
-  <form method="post"
-    action-xhr="https://www.example.com"
-    target="_top">
-    <amp-payment-google-inline-async
-      name="payment-data"
-      layout="flex-item">
-      <script type="application/json">
-        {
-          "config": "example"
-        }
-      </script>
-    </amp-payment-google-inline-async>
-  </form>
-  <!-- Valid: with test-override -->
-  <form method="post"
-    action-xhr="https://www.example.com"
-    target="_top">
-    <amp-payment-google-inline-async
-      name="payment-data"
-      layout="flex-item">
-      <script type="application/json">
-        {
-          "config": "origin"
-        }
-      </script>
-      <script type="application/json" name="test-override">
-        {
-          "config": "override"
-        }
-      </script>
-    </amp-payment-google-inline-async>
-  </form>
-  <!-- Valid: with is-test-mode -->
-  <form method="post"
-    action-xhr="https://www.example.com"
-    target="_top">
-    <amp-payment-google-inline-async
-      name="payment-data"
-      is-test-mode="true"
-      layout="flex-item">
-      <script type="application/json">
-        {
-          "config": "example"
-        }
-      </script>
-    </amp-payment-google-inline-async>
-  </form>
-  <!-- Invalid: missing name attribute -->
-  <form method="post"
-    action-xhr="https://www.example.com"
-    target="_top">
-    <amp-payment-google-inline-async
-      layout="flex-item">
-      <script type="application/json">
-        {
-          "config": "example"
-        }
-      </script>
-    </amp-payment-google-inline-async>
-  </form>
-  <!-- Invalid: missing JSON config -->
-  <form method="post"
-    action-xhr="https://www.example.com"
-    target="_top">
-    <amp-payment-google-inline-async
-      name="payment-data"
-      layout="flex-item">
-    </amp-payment-google-inline-async>
-  </form>
-  <!-- Invalid: missing enclosing amp form -->
-  <amp-payment-google-inline-async
-    name="payment-data"
-    layout="flex-item">
-  </amp-payment-google-inline-async>
-</body>
-</html>
diff --git a/extensions/amp-payment-google-inline-async/0.1/test/validator-actions-amp-payment-google-inline-async.out b/extensions/amp-payment-google-inline-async/0.1/test/validator-actions-amp-payment-google-inline-async.out
deleted file mode 100644
index 5adcc8583f816..0000000000000
--- a/extensions/amp-payment-google-inline-async/0.1/test/validator-actions-amp-payment-google-inline-async.out
+++ /dev/null
@@ -1,115 +0,0 @@
-FAIL
-|  <!--
-|    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.
-|  -->
-|  <!--
-|    Test Description: Basic test for amp-payment-google-inline
-|  -->
-|  <!doctype html>
-|  <html ⚡ actions>
-|  <head>
-|    <meta charset="utf-8">
-|    <title>amp-payment-google-inline-async: Basic</title>
-|    <link rel="canonical" href="amps.html">
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <script async custom-element="amp-payment-google-inline-async"
-|        src="https://cdn.ampproject.org/v0/amp-payment-google-inline-async-0.1.js"></script>
-|    <script async custom-element="amp-form"
-|        src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
-|  </head>
-|  <body>
-|    <!-- Valid -->
-|    <form method="post"
-|      action-xhr="https://www.example.com"
-|      target="_top">
-|      <amp-payment-google-inline-async
-|        name="payment-data"
-|        layout="flex-item">
-|        <script type="application/json">
-|          {
-|            "config": "example"
-|          }
-|        </script>
-|      </amp-payment-google-inline-async>
-|    </form>
-|    <!-- Valid: with test-override -->
-|    <form method="post"
-|      action-xhr="https://www.example.com"
-|      target="_top">
-|      <amp-payment-google-inline-async
-|        name="payment-data"
-|        layout="flex-item">
-|        <script type="application/json">
-|          {
-|            "config": "origin"
-|          }
-|        </script>
-|        <script type="application/json" name="test-override">
-|          {
-|            "config": "override"
-|          }
-|        </script>
-|      </amp-payment-google-inline-async>
-|    </form>
-|    <!-- Valid: with is-test-mode -->
-|    <form method="post"
-|      action-xhr="https://www.example.com"
-|      target="_top">
-|      <amp-payment-google-inline-async
-|        name="payment-data"
-|        is-test-mode="true"
-|        layout="flex-item">
-|        <script type="application/json">
-|          {
-|            "config": "example"
-|          }
-|        </script>
-|      </amp-payment-google-inline-async>
-|    </form>
-|    <!-- Invalid: missing name attribute -->
-|    <form method="post"
-|      action-xhr="https://www.example.com"
-|      target="_top">
-|      <amp-payment-google-inline-async
->>     ^~~~~~~~~
-amp-payment-google-inline-async/0.1/test/validator-actions-amp-payment-google-inline-async.html:84:4 The mandatory attribute 'name' is missing in tag 'amp-payment-google-inline-async'. (see https://amp.dev/documentation/components/amp-payment-google-inline-async)
-|        layout="flex-item">
-|        <script type="application/json">
-|          {
-|            "config": "example"
-|          }
-|        </script>
-|      </amp-payment-google-inline-async>
-|    </form>
-|    <!-- Invalid: missing JSON config -->
-|    <form method="post"
-|      action-xhr="https://www.example.com"
-|      target="_top">
-|      <amp-payment-google-inline-async
->>     ^~~~~~~~~
-amp-payment-google-inline-async/0.1/test/validator-actions-amp-payment-google-inline-async.html:97:4 Tag 'amp-payment-google-inline-async' must have a minimum of 1 child tags - saw 0 child tags. (see https://amp.dev/documentation/components/amp-payment-google-inline-async)
-|        name="payment-data"
-|        layout="flex-item">
-|      </amp-payment-google-inline-async>
-|    </form>
-|    <!-- Invalid: missing enclosing amp form -->
-|    <amp-payment-google-inline-async
->>   ^~~~~~~~~
-amp-payment-google-inline-async/0.1/test/validator-actions-amp-payment-google-inline-async.html:103:2 The tag 'amp-payment-google-inline-async' may only appear as a descendant of tag 'form [method=post] (actions)'. (see https://amp.dev/documentation/components/amp-payment-google-inline-async)
-|      name="payment-data"
-|      layout="flex-item">
-|    </amp-payment-google-inline-async>
-|  </body>
-|  </html>
diff --git a/extensions/amp-payment-google-inline-async/validator-amp-payment-google-inline-async.protoascii b/extensions/amp-payment-google-inline-async/validator-amp-payment-google-inline-async.protoascii
deleted file mode 100644
index 37d11dc058064..0000000000000
--- a/extensions/amp-payment-google-inline-async/validator-amp-payment-google-inline-async.protoascii
+++ /dev/null
@@ -1,73 +0,0 @@
-#
-# 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.
-#
-tags: {  # amp-payment-google-inline-async
-  html_format: ACTIONS
-  tag_name: "SCRIPT"
-  extension_spec: {
-    name: "amp-payment-google-inline-async"
-    version: "0.1"
-    version: "latest"
-  }
-  attr_lists: "common-extension-attrs"
-}
-tags: {  # amp-payment-google-inline-async (json)
-  html_format: ACTIONS
-  tag_name: "SCRIPT"
-  spec_name: "amp-payment-google-inline-async extension .json script"
-  requires_extension: "amp-payment-google-inline-async"
-  mandatory_parent: "AMP-PAYMENT-GOOGLE-INLINE-ASYNC"
-  attrs: {
-    name: "type"
-    mandatory: true
-    value_casei: "application/json"
-    dispatch_key: NAME_VALUE_PARENT_DISPATCH
-  }
-  attr_lists: "name-attr"
-  attr_lists: "nonce-attr"
-  cdata: {
-    disallowed_cdata_regex: {
-      regex: "<!--"
-      error_message: "html comments"
-    }
-  }
-}
-tags: {  # <amp-payment-google-inline-async>
-  html_format: ACTIONS
-  tag_name: "AMP-PAYMENT-GOOGLE-INLINE-ASYNC"
-  requires_extension: "amp-payment-google-inline-async"
-  mandatory_ancestor: "FORM [method=POST] (ACTIONS)"
-  attrs: {
-    name: "is-test-mode"
-    value_casei: "false"
-    value_casei: "true"
-  }
-  attr_lists: "mandatory-name-attr"
-  child_tags: {
-    mandatory_min_num_child_tags: 1
-    child_tag_name_oneof: "SCRIPT"
-  }
-  amp_layout: {
-    # Default layout to not break any existing page, should be deleted later.
-    supported_layouts: CONTAINER
-    supported_layouts: FILL
-    supported_layouts: FIXED
-    supported_layouts: FIXED_HEIGHT
-    supported_layouts: FLEX_ITEM
-    supported_layouts: INTRINSIC
-    supported_layouts: NODISPLAY
-    supported_layouts: RESPONSIVE
-  }
-}
diff --git a/extensions/amp-payment-google-inline/0.1/test/validator-actions-amp-payment-google-inline.html b/extensions/amp-payment-google-inline/0.1/test/validator-actions-amp-payment-google-inline.html
deleted file mode 100644
index 243b14c2ee427..0000000000000
--- a/extensions/amp-payment-google-inline/0.1/test/validator-actions-amp-payment-google-inline.html
+++ /dev/null
@@ -1,129 +0,0 @@
-<!--
-  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.
--->
-<!--
-  Test Description:
-  Tests for the amp-payments-google-inline tag. See inline comments.
--->
-<!doctype html>
-<html ⚡ actions>
-<head>
-  <meta charset="utf-8">
-  <link rel="canonical" href="./regular-html-version.html">
-  <meta name="viewport" content="width=device-width">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
-  <script async custom-element="amp-payment-google-inline" src="https://cdn.ampproject.org/v0/amp-payment-google-inline-0.1.js"></script>
-</head>
-<body>
-  <!-- Valid -->
-  <form method="post" action-xhr="https://example.com/checkout">
-    <amp-payment-google-inline data-payment-data-input-id="payment-data">
-      <script type="application/json">
-      {
-        "apiVersion": 1,
-        "merchantId": "0123456789",
-        "allowedPaymentMethods": ["CARD", "TOKENIZED_CARD"],
-        "paymentMethodTokenizationParameters": {
-          "tokenizationType": "PAYMENT_GATEWAY",
-          "parameters": {
-            "gateway": "stripe",
-            "stripe:publishableKey": "0123456789",
-            "stripe:version": "5"
-          }
-        },
-        "cardRequirements": {
-          "allowedCardNetworks": ["AMEX", "DISCOVER", "VISA", "MASTERCARD"],
-          "billingAddressRequired": true
-        },
-        "emailRequired": true,
-        "transactionInfo": {
-          "currencyCode": "USD",
-          "totalPriceStatus": "ESTIMATED",
-          "totalPrice": "10.00"
-        }
-      }
-      </script>
-    </amp-payment-google-inline>
-  </form>
-
-  <!-- Invalid: FORM [method=POST] (ACTIONS) not an ancestor -->
-  <amp-payment-google-inline data-payment-data-input-id="payment-data">
-    <script type="application/json">
-    {
-      "apiVersion": 1,
-      "merchantId": "0123456789",
-      "allowedPaymentMethods": ["CARD", "TOKENIZED_CARD"],
-      "paymentMethodTokenizationParameters": {
-        "tokenizationType": "PAYMENT_GATEWAY",
-        "parameters": {
-          "gateway": "stripe",
-          "stripe:publishableKey": "0123456789",
-          "stripe:version": "5"
-        }
-      },
-      "cardRequirements": {
-        "allowedCardNetworks": ["AMEX", "DISCOVER", "VISA", "MASTERCARD"],
-        "billingAddressRequired": true
-      },
-      "emailRequired": true,
-      "transactionInfo": {
-        "currencyCode": "USD",
-        "totalPriceStatus": "ESTIMATED",
-        "totalPrice": "10.00"
-      }
-    }
-    </script>
-  </amp-payment-google-inline>
-
-  <!-- Invalid: missing mandatory data-payment-data-input-id attribute -->
-  <form method="post" action-xhr="https://example.com/checkout">
-    <amp-payment-google-inline>
-      <script type="application/json">
-      {
-        "apiVersion": 1,
-        "merchantId": "0123456789",
-        "allowedPaymentMethods": ["CARD", "TOKENIZED_CARD"],
-        "paymentMethodTokenizationParameters": {
-          "tokenizationType": "PAYMENT_GATEWAY",
-          "parameters": {
-            "gateway": "stripe",
-            "stripe:publishableKey": "0123456789",
-            "stripe:version": "5"
-          }
-        },
-        "cardRequirements": {
-          "allowedCardNetworks": ["AMEX", "DISCOVER", "VISA", "MASTERCARD"],
-          "billingAddressRequired": true
-        },
-        "emailRequired": true,
-        "transactionInfo": {
-          "currencyCode": "USD",
-          "totalPriceStatus": "ESTIMATED",
-          "totalPrice": "10.00"
-        }
-      }
-      </script>
-    </amp-payment-google-inline>
-  </form>
-
-  <!-- Invalid: missing mandatory child script tag -->
-  <form method="post" action-xhr="https://example.com/checkout">
-    <amp-payment-google-inline data-payment-data-input-id="payment-data">
-    </amp-payment-google-inline>
-  </form>
-</body>
-</html>
diff --git a/extensions/amp-payment-google-inline/0.1/test/validator-actions-amp-payment-google-inline.out b/extensions/amp-payment-google-inline/0.1/test/validator-actions-amp-payment-google-inline.out
deleted file mode 100644
index d9ebf103670a8..0000000000000
--- a/extensions/amp-payment-google-inline/0.1/test/validator-actions-amp-payment-google-inline.out
+++ /dev/null
@@ -1,136 +0,0 @@
-FAIL
-|  <!--
-|    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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests for the amp-payments-google-inline tag. See inline comments.
-|  -->
-|  <!doctype html>
-|  <html ⚡ actions>
-|  <head>
-|    <meta charset="utf-8">
-|    <link rel="canonical" href="./regular-html-version.html">
-|    <meta name="viewport" content="width=device-width">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
-|    <script async custom-element="amp-payment-google-inline" src="https://cdn.ampproject.org/v0/amp-payment-google-inline-0.1.js"></script>
-|  </head>
-|  <body>
-|    <!-- Valid -->
-|    <form method="post" action-xhr="https://example.com/checkout">
-|      <amp-payment-google-inline data-payment-data-input-id="payment-data">
-|        <script type="application/json">
-|        {
-|          "apiVersion": 1,
-|          "merchantId": "0123456789",
-|          "allowedPaymentMethods": ["CARD", "TOKENIZED_CARD"],
-|          "paymentMethodTokenizationParameters": {
-|            "tokenizationType": "PAYMENT_GATEWAY",
-|            "parameters": {
-|              "gateway": "stripe",
-|              "stripe:publishableKey": "0123456789",
-|              "stripe:version": "5"
-|            }
-|          },
-|          "cardRequirements": {
-|            "allowedCardNetworks": ["AMEX", "DISCOVER", "VISA", "MASTERCARD"],
-|            "billingAddressRequired": true
-|          },
-|          "emailRequired": true,
-|          "transactionInfo": {
-|            "currencyCode": "USD",
-|            "totalPriceStatus": "ESTIMATED",
-|            "totalPrice": "10.00"
-|          }
-|        }
-|        </script>
-|      </amp-payment-google-inline>
-|    </form>
-|
-|    <!-- Invalid: FORM [method=POST] (ACTIONS) not an ancestor -->
-|    <amp-payment-google-inline data-payment-data-input-id="payment-data">
->>   ^~~~~~~~~
-amp-payment-google-inline/0.1/test/validator-actions-amp-payment-google-inline.html:64:2 The tag 'amp-payment-google-inline' may only appear as a descendant of tag 'form [method=post] (actions)'. (see https://amp.dev/documentation/components/amp-payment-google-inline)
-|      <script type="application/json">
-|      {
-|        "apiVersion": 1,
-|        "merchantId": "0123456789",
-|        "allowedPaymentMethods": ["CARD", "TOKENIZED_CARD"],
-|        "paymentMethodTokenizationParameters": {
-|          "tokenizationType": "PAYMENT_GATEWAY",
-|          "parameters": {
-|            "gateway": "stripe",
-|            "stripe:publishableKey": "0123456789",
-|            "stripe:version": "5"
-|          }
-|        },
-|        "cardRequirements": {
-|          "allowedCardNetworks": ["AMEX", "DISCOVER", "VISA", "MASTERCARD"],
-|          "billingAddressRequired": true
-|        },
-|        "emailRequired": true,
-|        "transactionInfo": {
-|          "currencyCode": "USD",
-|          "totalPriceStatus": "ESTIMATED",
-|          "totalPrice": "10.00"
-|        }
-|      }
-|      </script>
-|    </amp-payment-google-inline>
-|
-|    <!-- Invalid: missing mandatory data-payment-data-input-id attribute -->
-|    <form method="post" action-xhr="https://example.com/checkout">
-|      <amp-payment-google-inline>
->>     ^~~~~~~~~
-amp-payment-google-inline/0.1/test/validator-actions-amp-payment-google-inline.html:94:4 The mandatory attribute 'data-payment-data-input-id' is missing in tag 'amp-payment-google-inline'. (see https://amp.dev/documentation/components/amp-payment-google-inline)
-|        <script type="application/json">
-|        {
-|          "apiVersion": 1,
-|          "merchantId": "0123456789",
-|          "allowedPaymentMethods": ["CARD", "TOKENIZED_CARD"],
-|          "paymentMethodTokenizationParameters": {
-|            "tokenizationType": "PAYMENT_GATEWAY",
-|            "parameters": {
-|              "gateway": "stripe",
-|              "stripe:publishableKey": "0123456789",
-|              "stripe:version": "5"
-|            }
-|          },
-|          "cardRequirements": {
-|            "allowedCardNetworks": ["AMEX", "DISCOVER", "VISA", "MASTERCARD"],
-|            "billingAddressRequired": true
-|          },
-|          "emailRequired": true,
-|          "transactionInfo": {
-|            "currencyCode": "USD",
-|            "totalPriceStatus": "ESTIMATED",
-|            "totalPrice": "10.00"
-|          }
-|        }
-|        </script>
-|      </amp-payment-google-inline>
-|    </form>
-|
-|    <!-- Invalid: missing mandatory child script tag -->
-|    <form method="post" action-xhr="https://example.com/checkout">
-|      <amp-payment-google-inline data-payment-data-input-id="payment-data">
->>     ^~~~~~~~~
-amp-payment-google-inline/0.1/test/validator-actions-amp-payment-google-inline.html:125:4 Tag 'amp-payment-google-inline' must have a minimum of 1 child tags - saw 0 child tags. (see https://amp.dev/documentation/components/amp-payment-google-inline)
-|      </amp-payment-google-inline>
-|    </form>
-|  </body>
-|  </html>
diff --git a/extensions/amp-payment-google-inline/validator-amp-payment-google-inline.protoascii b/extensions/amp-payment-google-inline/validator-amp-payment-google-inline.protoascii
deleted file mode 100644
index c11f8d6d0416d..0000000000000
--- a/extensions/amp-payment-google-inline/validator-amp-payment-google-inline.protoascii
+++ /dev/null
@@ -1,76 +0,0 @@
-#
-# 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.
-
-tags: {  # amp-payment-google-inline
-  html_format: ACTIONS
-  tag_name: "SCRIPT"
-  extension_spec: {
-    name: "amp-payment-google-inline"
-    version: "0.1"
-    version: "latest"
-  }
-  attr_lists: "common-extension-attrs"
-}
-tags: {  # <amp-payment-google-inline> (json)
-  html_format: ACTIONS
-  tag_name: "SCRIPT"
-  spec_name: "amp-payment-google-inline extension .json script"
-  requires_extension: "amp-payment-google-inline"
-  mandatory_parent: "AMP-PAYMENT-GOOGLE-INLINE"
-  attrs: {
-    name: "type"
-    mandatory: true
-    value_casei: "application/json"
-    dispatch_key: NAME_VALUE_PARENT_DISPATCH
-  }
-  attr_lists: "name-attr"
-  attr_lists: "nonce-attr"
-  cdata: {
-    disallowed_cdata_regex: {
-      regex: "<!--"
-      error_message: "html comments"
-    }
-  }
-}
-tags: {  # <amp-payment-google-inline>
-  html_format: ACTIONS
-  tag_name: "AMP-PAYMENT-GOOGLE-INLINE"
-  requires_extension: "amp-payment-google-inline"
-  mandatory_ancestor: "FORM [method=POST] (ACTIONS)"
-  attrs: {
-    name: "data-payment-data-input-id"
-    mandatory: true
-  }
-  attrs: {
-    name: "is-test-mode"
-    value_casei: "false"
-    value_casei: "true"
-  }
-  child_tags: {
-    mandatory_min_num_child_tags: 1
-    child_tag_name_oneof: "SCRIPT"
-  }
-  amp_layout: {
-    # Default layout to not break any existing page, should be deleted later.
-    supported_layouts: CONTAINER
-    supported_layouts: FILL
-    supported_layouts: FIXED
-    supported_layouts: FIXED_HEIGHT
-    supported_layouts: FLEX_ITEM
-    supported_layouts: INTRINSIC
-    supported_layouts: NODISPLAY
-    supported_layouts: RESPONSIVE
-  }
-}
diff --git a/extensions/amp-pinterest/0.1/amp-pinterest.js b/extensions/amp-pinterest/0.1/amp-pinterest.js
index fbe1d116c2227..056dd60e1cacc 100644
--- a/extensions/amp-pinterest/0.1/amp-pinterest.js
+++ b/extensions/amp-pinterest/0.1/amp-pinterest.js
@@ -50,12 +50,42 @@ import {user, userAssert} from '../../../src/log';
  *    - buttonFollow: User follow button
  */
 class AmpPinterest extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static createLoaderLogoCallback(element) {
+    const type = element.getAttribute('data-do');
+    if (type != 'embedPin') {
+      return {};
+    }
+
+    const html = htmlFor(element);
+    return {
+      color: '#E60019',
+      content: html`
+        <svg viewBox="0 0 72 72">
+          <path
+            fill="currentColor"
+            d="M36,26c-5.52,0-9.99,4.47-9.99,9.99c0,4.24,2.63,7.85,6.35,9.31c-0.09-0.79-0.16-2.01,0.03-2.87
+            c0.18-0.78,1.17-4.97,1.17-4.97s-0.3-0.6-0.3-1.48c0-1.39,0.81-2.43,1.81-2.43c0.86,0,1.27,0.64,1.27,1.41
+            c0,0.86-0.54,2.14-0.83,3.33c-0.24,1,0.5,1.81,1.48,1.81c1.78,0,3.14-1.88,3.14-4.57c0-2.39-1.72-4.06-4.18-4.06
+            c-2.85,0-4.51,2.13-4.51,4.33c0,0.86,0.33,1.78,0.74,2.28c0.08,0.1,0.09,0.19,0.07,0.29c-0.07,0.31-0.25,1-0.28,1.13
+            c-0.04,0.18-0.15,0.22-0.34,0.13c-1.25-0.58-2.03-2.4-2.03-3.87c0-3.15,2.29-6.04,6.6-6.04c3.46,0,6.16,2.47,6.16,5.77
+            c0,3.45-2.17,6.22-5.18,6.22c-1.01,0-1.97-0.53-2.29-1.15c0,0-0.5,1.91-0.62,2.38c-0.22,0.87-0.83,1.96-1.24,2.62
+            c0.94,0.29,1.92,0.44,2.96,0.44c5.52,0,9.99-4.47,9.99-9.99C45.99,30.47,41.52,26,36,26z"
+          />
+        </svg>
+      `,
+    };
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
 
     /** @private {string} */
     this.type_ = '';
+
+    /** @private {*} */
+    this.renderClass_ = null;
   }
   /**
    * @param {boolean=} onLayout
@@ -82,55 +112,38 @@ class AmpPinterest extends AMP.BaseElement {
       'The data-do attribute is required for <amp-pinterest> %s',
       this.element
     );
-  }
-
-  /** @override */
-  layoutCallback() {
-    return this.render().then((node) => {
-      return this.element.appendChild(node);
-    });
-  }
 
-  /**
-   * Renders the component
-   * @return {*} TODO(#23582): Specify return type
-   */
-  render() {
     switch (this.type_) {
       case 'embedPin':
-        return new PinWidget(this.element).render();
+        this.renderClass_ = new PinWidget(this.element);
+        break;
       case 'buttonPin':
-        return new SaveButton(this.element).render();
+        this.renderClass_ = new SaveButton(this.element);
+        break;
       case 'buttonFollow':
-        return new FollowButton(this.element).render();
+        this.renderClass_ = new FollowButton(this.element);
+        break;
+      default:
+        return Promise.reject(
+          user().createError('Invalid type: %s', this.type_)
+        );
     }
-    return Promise.reject(user().createError('Invalid type: %s', this.type_));
   }
 
   /** @override */
-  createLoaderLogoCallback() {
-    if (this.type_ != 'embedPin') {
-      return {};
-    }
+  layoutCallback() {
+    return this.renderClass_
+      .render()
+      .then((node) => this.element.appendChild(node));
+  }
 
-    const html = htmlFor(this.element);
-    return {
-      color: '#E60019',
-      content: html`
-        <svg viewBox="0 0 72 72">
-          <path
-            fill="currentColor"
-            d="M36,26c-5.52,0-9.99,4.47-9.99,9.99c0,4.24,2.63,7.85,6.35,9.31c-0.09-0.79-0.16-2.01,0.03-2.87
-            c0.18-0.78,1.17-4.97,1.17-4.97s-0.3-0.6-0.3-1.48c0-1.39,0.81-2.43,1.81-2.43c0.86,0,1.27,0.64,1.27,1.41
-            c0,0.86-0.54,2.14-0.83,3.33c-0.24,1,0.5,1.81,1.48,1.81c1.78,0,3.14-1.88,3.14-4.57c0-2.39-1.72-4.06-4.18-4.06
-            c-2.85,0-4.51,2.13-4.51,4.33c0,0.86,0.33,1.78,0.74,2.28c0.08,0.1,0.09,0.19,0.07,0.29c-0.07,0.31-0.25,1-0.28,1.13
-            c-0.04,0.18-0.15,0.22-0.34,0.13c-1.25-0.58-2.03-2.4-2.03-3.87c0-3.15,2.29-6.04,6.6-6.04c3.46,0,6.16,2.47,6.16,5.77
-            c0,3.45-2.17,6.22-5.18,6.22c-1.01,0-1.97-0.53-2.29-1.15c0,0-0.5,1.91-0.62,2.38c-0.22,0.87-0.83,1.96-1.24,2.62
-            c0.94,0.29,1.92,0.44,2.96,0.44c5.52,0,9.99-4.47,9.99-9.99C45.99,30.47,41.52,26,36,26z"
-          />
-        </svg>
-      `,
-    };
+  /** @override */
+  firstLayoutCompleted() {
+    this.renderClass_.height().then((renderedHeight) => {
+      if (renderedHeight !== null) {
+        this.attemptChangeHeight(renderedHeight);
+      }
+    });
   }
 }
 
diff --git a/extensions/amp-pinterest/0.1/follow-button.js b/extensions/amp-pinterest/0.1/follow-button.js
index 32dfd97832e31..41ba38db62401 100644
--- a/extensions/amp-pinterest/0.1/follow-button.js
+++ b/extensions/amp-pinterest/0.1/follow-button.js
@@ -17,7 +17,7 @@
 import {Util} from './util';
 import {assertHttpsUrl} from '../../../src/url';
 import {openWindowDialog} from '../../../src/dom';
-import {tryResolve} from '../../../src/utils/promise';
+import {tryResolve} from '../../../src/core/data-structures/promise';
 
 import {userAssert} from '../../../src/log';
 
@@ -90,4 +90,13 @@ export class FollowButton {
 
     return tryResolve(() => this.renderTemplate());
   }
+
+  /**
+   * Determine the height of the contents to allow resizing after first layout.
+   *
+   * @return {!Promise<?number>}
+   */
+  height() {
+    return Promise.resolve(null);
+  }
 }
diff --git a/extensions/amp-pinterest/0.1/pin-widget.js b/extensions/amp-pinterest/0.1/pin-widget.js
index 0466204bc3b31..c48c18e5ab6b8 100644
--- a/extensions/amp-pinterest/0.1/pin-widget.js
+++ b/extensions/amp-pinterest/0.1/pin-widget.js
@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Services} from '../../../src/services';
 import {Util} from './util';
 import {assertAbsoluteHttpOrHttpsUrl, assertHttpsUrl} from '../../../src/url';
+import {measureIntersection} from '../../../src/utils/intersection';
 import {openWindowDialog} from '../../../src/dom';
 import {toWin} from '../../../src/types';
 import {user, userAssert} from '../../../src/log';
@@ -28,6 +29,9 @@ const POP =
   'personalbar=no,directories=no,location=no,toolbar=no,' +
   'menubar=no,width=900,height=500,left=0,top=0';
 
+// Matches the height padding caused by .-amp-pinterest-embed-pin
+const EMBED_PIN_PADDING = 10;
+
 /**
  * Pinterest Pin Widget
  * data-url: the source url for the Pin
@@ -46,6 +50,9 @@ export class PinWidget {
     this.pinUrl = '';
     this.width = '';
     this.layout = '';
+
+    /** @private {!Element} */
+    this.heightOwnerElement_ = null;
   }
 
   /**
@@ -122,7 +129,7 @@ export class PinWidget {
     const structure = Util.make(this.element.ownerDocument, {'span': {}});
     structure.className = className + ' i-amphtml-fill-content';
 
-    const container = Util.make(this.element.ownerDocument, {
+    this.heightOwnerElement_ = Util.make(this.element.ownerDocument, {
       'span': {
         'className': '-amp-pinterest-embed-pin-inner',
         'data-pin-log': 'embed_pin',
@@ -144,7 +151,7 @@ export class PinWidget {
         'alt': this.alt,
       },
     });
-    container.appendChild(img);
+    this.heightOwnerElement_.appendChild(img);
 
     // repin button
     const repin = Util.make(this.element.ownerDocument, {
@@ -165,7 +172,7 @@ export class PinWidget {
         'tabindex': '0',
       },
     });
-    container.appendChild(repin);
+    this.heightOwnerElement_.appendChild(repin);
 
     // text container
     const text = Util.make(this.element.ownerDocument, {
@@ -302,8 +309,8 @@ export class PinWidget {
       text.appendChild(pinner);
     }
 
-    container.appendChild(text);
-    structure.appendChild(container);
+    this.heightOwnerElement_.appendChild(text);
+    structure.appendChild(this.heightOwnerElement_);
 
     // listen for clicks
     structure.addEventListener('click', this.handleClick.bind(this));
@@ -336,4 +343,15 @@ export class PinWidget {
 
     return this.fetchPin().then(this.renderPin.bind(this));
   }
+
+  /**
+   * Determine the height of the contents to allow resizing after first layout.
+   *
+   * @return {!Promise<?number>}
+   */
+  height() {
+    return measureIntersection(this.heightOwnerElement_).then(
+      (entry) => entry.boundingClientRect.height + EMBED_PIN_PADDING
+    );
+  }
 }
diff --git a/extensions/amp-pinterest/0.1/save-button.js b/extensions/amp-pinterest/0.1/save-button.js
index 37f68eaefba81..7f69b0b870202 100644
--- a/extensions/amp-pinterest/0.1/save-button.js
+++ b/extensions/amp-pinterest/0.1/save-button.js
@@ -158,11 +158,18 @@ export class SaveButton {
       }
     }
 
+    const text = this.lang === 'ja' ? '保存' : 'Save';
+
+    const textContent = this.round ? '' : text;
+
     const saveButton = Util.make(this.element.ownerDocument, {
       'a': {
         class: clazz.join(' '),
         href: this.href,
-        textContent: this.round ? '' : this.lang === 'ja' ? '保存' : 'Save',
+        textContent,
+        ...(!textContent && {
+          'aria-label': text,
+        }),
       },
     });
 
@@ -199,4 +206,13 @@ export class SaveButton {
     }
     return promise.then(this.renderTemplate.bind(this));
   }
+
+  /**
+   * Determine the height of the contents to allow resizing after first layout.
+   *
+   * @return {!Promise<?number>}
+   */
+  height() {
+    return Promise.resolve(null);
+  }
 }
diff --git a/extensions/amp-pinterest/0.1/test/test-amp-pinterest.js b/extensions/amp-pinterest/0.1/test/test-amp-pinterest.js
index 0c678cde96f6a..23db9119d377a 100644
--- a/extensions/amp-pinterest/0.1/test/test-amp-pinterest.js
+++ b/extensions/amp-pinterest/0.1/test/test-amp-pinterest.js
@@ -34,7 +34,14 @@ describes.realWin(
       );
     }
 
-    function getPin(pinDo, pinUrl, pinMedia, pinDescription) {
+    async function getPin(
+      pinDo,
+      pinUrl,
+      pinMedia,
+      pinDescription,
+      width = 20,
+      height = 40
+    ) {
       const div = document.createElement('div');
       env.win.document.body.appendChild(div);
 
@@ -44,16 +51,16 @@ describes.realWin(
       pin.setAttribute('data-media', pinMedia);
       pin.setAttribute('data-description', pinDescription);
       pin.setAttribute('layout', 'responsive');
-      pin.setAttribute('width', '100');
-      pin.setAttribute('height', '100');
+      pin.setAttribute('width', width);
+      pin.setAttribute('height', height);
       div.appendChild(pin);
-      pin.implementation_.buildCallback();
-      return pin.implementation_.layoutCallback().then(() => {
-        return pin;
-      });
+      const impl = await pin.getImpl(false);
+      impl.buildCallback();
+      await impl.layoutCallback();
+      return pin;
     }
 
-    function getEmbedPin(pinID, pinAlt, mockResponse) {
+    async function getEmbedPin(pinID, pinAlt, mockResponse) {
       const div = document.createElement('div');
       env.win.document.body.appendChild(div);
 
@@ -70,10 +77,10 @@ describes.realWin(
         pin.setAttribute('alt', pinAlt);
       }
       div.appendChild(pin);
-      pin.implementation_.buildCallback();
-      return pin.implementation_.layoutCallback().then(() => {
-        return pin;
-      });
+      const impl = await pin.getImpl(false);
+      impl.buildCallback();
+      await impl.layoutCallback();
+      return pin;
     }
 
     it('renders', () => {
@@ -97,6 +104,33 @@ describes.realWin(
       });
     });
 
+    it('renders text content', () => {
+      return getPin(
+        'buttonPin',
+        'http://www.flickr.com/photos/kentbrew/6851755809/',
+        'http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg',
+        'Next stop: Pinterest'
+      ).then((pin) => {
+        const a = pin.querySelector('a');
+        expect(a.textContent).to.equal('Save');
+      });
+    });
+
+    it('renders an aria-label if there is no text content', () => {
+      return getPin(
+        'buttonPin',
+        'http://www.flickr.com/photos/kentbrew/6851755809/',
+        'http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg',
+        'Next stop: Pinterest',
+        100,
+        100
+      ).then((pin) => {
+        const a = pin.querySelector('a');
+        expect(a.textContent).to.equal('');
+        expect(a.getAttribute('aria-label')).to.equal('Save');
+      });
+    });
+
     it('sets provided alternate text', () => {
       return getEmbedPin(
         '99360735500167749',
diff --git a/extensions/amp-pinterest/OWNERS b/extensions/amp-pinterest/OWNERS
index 65693a4608637..2051f1e8260e6 100644
--- a/extensions/amp-pinterest/OWNERS
+++ b/extensions/amp-pinterest/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'kentbrew'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'kentbrew'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-pinterest/amp-pinterest.md b/extensions/amp-pinterest/amp-pinterest.md
index 202502910a21e..c6557d26266bc 100644
--- a/extensions/amp-pinterest/amp-pinterest.md
+++ b/extensions/amp-pinterest/amp-pinterest.md
@@ -169,4 +169,4 @@ This property like the the `alt` attribute on an `<img>` tag specifies the alter
 
 ## Validation
 
-See [amp-pinterest rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-pinterest/validator-amp-pinterest.protoascii) in the AMP validator specification.
+See [amp-pinterest rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-pinterest/validator-amp-pinterest.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-pinterest/validator-amp-pinterest.protoascii b/extensions/amp-pinterest/validator-amp-pinterest.protoascii
index 3dafb56e6a52f..52b6359d7369e 100644
--- a/extensions/amp-pinterest/validator-amp-pinterest.protoascii
+++ b/extensions/amp-pinterest/validator-amp-pinterest.protoascii
@@ -40,7 +40,7 @@ tags: {  # <amp-pinterest>
     mandatory: true
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-pinterest"
+  spec_url: "https://amp.dev/documentation/components/amp-pinterest/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-playbuzz/0.1/amp-playbuzz.js b/extensions/amp-playbuzz/0.1/amp-playbuzz.js
index 8e27f1f21a889..d711b8be4ae14 100644
--- a/extensions/amp-playbuzz/0.1/amp-playbuzz.js
+++ b/extensions/amp-playbuzz/0.1/amp-playbuzz.js
@@ -48,9 +48,12 @@ import {
   removeFragment,
 } from '../../../src/url';
 import {dev, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {isExperimentOn} from '../../../src/experiments';
+import {dict} from '../../../src/core/types/object';
 import {logo, showMoreArrow} from './images';
+import {
+  observeWithSharedInOb,
+  unobserveWithSharedInOb,
+} from '../../../src/viewport-observer';
 import {removeElement} from '../../../src/dom';
 
 class AmpPlaybuzz extends AMP.BaseElement {
@@ -79,6 +82,9 @@ class AmpPlaybuzz extends AMP.BaseElement {
     /** @private {?boolean} */
     this.iframeLoaded_ = false;
 
+    /** @private {?boolean} */
+    this.inViewport_ = false;
+
     /** @private {Array<Function>} */
     this.unlisteners_ = [];
 
@@ -99,13 +105,6 @@ class AmpPlaybuzz extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
-    // EXPERIMENT
-    // AMP.toggleExperiment(EXPERIMENT, true); //for dev
-    userAssert(
-      isExperimentOn(this.win, 'amp-playbuzz'),
-      'Enable amp-playbuzz experiment'
-    );
-
     const e = this.element;
     const src = e.getAttribute('src');
     const itemId = e.getAttribute('data-item');
@@ -181,6 +180,10 @@ class AmpPlaybuzz extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
+    observeWithSharedInOb(
+      this.element,
+      (inViewport) => (this.inViewport_ = inViewport)
+    );
     const iframe = this.element.ownerDocument.createElement('iframe');
     this.iframe_ = iframe;
     iframe.setAttribute('scrolling', 'no');
@@ -199,21 +202,19 @@ class AmpPlaybuzz extends AMP.BaseElement {
     this.applyFillContent(iframe);
     this.element.appendChild(iframe);
 
-    return (this.iframePromise_ = this.loadPromise(iframe).then(
-      function () {
-        this.iframeLoaded_ = true;
-        this.attemptChangeHeight(dev().assertNumber(this.itemHeight_)).catch(
-          () => {
-            /* die */
-          }
-        );
-
-        const unlisten = this.getViewport().onChanged(
-          this.sendScrollDataToItem_.bind(this)
-        );
-        this.unlisteners_.push(unlisten);
-      }.bind(this)
-    ));
+    return (this.iframePromise_ = this.loadPromise(iframe).then(() => {
+      this.iframeLoaded_ = true;
+      this.attemptChangeHeight(dev().assertNumber(this.itemHeight_)).catch(
+        () => {
+          /* die */
+        }
+      );
+
+      const unlisten = this.getViewport().onChanged(
+        this.sendScrollDataToItem_.bind(this)
+      );
+      this.unlisteners_.push(unlisten);
+    }));
   }
 
   /** @return {!Element} @private */
@@ -298,7 +299,7 @@ class AmpPlaybuzz extends AMP.BaseElement {
    * @param {{height: number, left: number, relayoutAll: boolean, top: number, velocity: number, width: number }} changeEvent
    */
   sendScrollDataToItem_(changeEvent) {
-    if (!this.isInViewport()) {
+    if (!this.inViewport_) {
       return;
     }
 
@@ -321,6 +322,7 @@ class AmpPlaybuzz extends AMP.BaseElement {
 
   /** @override */
   unlayoutCallback() {
+    unobserveWithSharedInOb(this.element);
     this.unlisteners_.forEach((unlisten) => unlisten());
     this.unlisteners_.length = 0;
 
diff --git a/extensions/amp-playbuzz/0.1/test/test-amp-playbuzz.js b/extensions/amp-playbuzz/0.1/test/test-amp-playbuzz.js
index 57d21eba39815..86b069ce6790b 100644
--- a/extensions/amp-playbuzz/0.1/test/test-amp-playbuzz.js
+++ b/extensions/amp-playbuzz/0.1/test/test-amp-playbuzz.js
@@ -15,11 +15,6 @@
  */
 
 import '../amp-playbuzz';
-import {toggleExperiment} from '../../../../src/experiments';
-
-function startsWith(string, searchString) {
-  return string.substr(0, searchString.length) === searchString;
-}
 
 describes.realWin(
   'amp-playbuzz',
@@ -34,7 +29,6 @@ describes.realWin(
     beforeEach(() => {
       win = env.win;
       doc = win.document;
-      toggleExperiment(win, 'amp-playbuzz', true);
     });
 
     function createOptionalParams(
@@ -70,11 +64,13 @@ describes.realWin(
       if (itemSrc.itemId) {
         ins.setAttribute('data-item', itemSrc.itemId);
       }
-      ins.setAttribute('width', '111');
       ins.setAttribute('height', '222');
       ins.setAttribute('alt', 'Testing');
       if (opt_responsive) {
+        ins.setAttribute('width', '111');
         ins.setAttribute('layout', 'responsive');
+      } else {
+        ins.setAttribute('layout', 'fixed-height');
       }
       if (params && typeof params.displayItemInfo === 'boolean') {
         ins.setAttribute('data-item-info', params.displayItemInfo);
@@ -90,7 +86,7 @@ describes.realWin(
       }
       doc.body.appendChild(ins);
       return ins
-        .build()
+        .buildInternal()
         .then(() => {
           if (opt_beforeLayoutCallback) {
             opt_beforeLayoutCallback(ins);
@@ -102,7 +98,7 @@ describes.realWin(
 
     function testIframe(iframe, itemSrcUrl) {
       expect(iframe).to.not.be.null;
-      expect(startsWith(iframe.src, itemSrcUrl)).to.be.true;
+      expect(iframe.src.startsWith(itemSrcUrl)).to.be.true;
       expect(iframe.className).to.match(/i-amphtml-fill-content/);
       // This is important to avoid sizing issues.
       expect(iframe.getAttribute('scrolling')).to.equal('no');
@@ -110,22 +106,32 @@ describes.realWin(
 
     it('renders', () => {
       const src = createItemSrc().withUrl(
-        'https://www.playbuzz.com/bob/bobs-life'
+        'https://app.ex.co/stories/bob/bobs-life'
       );
       return getIns(src).then((ins) => {
         const iframe = ins.querySelector('iframe');
-        testIframe(iframe, '//www.playbuzz.com/bob/bobs-life');
+        testIframe(iframe, '//app.ex.co/stories/bob/bobs-life');
         // TODO: test playbuzz placeholder loader
       });
     });
 
-    it('renders with false for each optional param', () => {
+    it('renders with old url', () => {
       const src = createItemSrc().withUrl(
         'https://www.playbuzz.com/bob/bobs-life'
       );
       return getIns(src).then((ins) => {
         const iframe = ins.querySelector('iframe');
-        testIframe(iframe, '//www.playbuzz.com/bob/bobs-life');
+        testIframe(iframe, '//app.ex.co/stories/bob/bobs-life');
+      });
+    });
+
+    it('renders with false for each optional param', () => {
+      const src = createItemSrc().withUrl(
+        'https://app.ex.co/stories/bob/bobs-life'
+      );
+      return getIns(src).then((ins) => {
+        const iframe = ins.querySelector('iframe');
+        testIframe(iframe, '//app.ex.co/stories/bob/bobs-life');
         expect(iframe.src)
           .to.contain('&useComments=false')
           .and.to.contain('&gameInfo=false')
@@ -137,28 +143,28 @@ describes.realWin(
       const src = createItemSrc().withItemId('some-item-id');
       return getIns(src).then((ins) => {
         const iframe = ins.querySelector('iframe');
-        testIframe(iframe, '//www.playbuzz.com/item/some-item-id');
+        testIframe(iframe, '//app.ex.co/stories/item/some-item-id');
       });
     });
 
     it('renders with item id when submitted both with item url & item id', () => {
       const src = createItemSrc()
-        .withUrl('https://www.playbuzz.com/bob/bobs-life')
+        .withUrl('https://app.ex.co/stories/bob/bobs-life')
         .withItemId('some-item-id');
 
       return getIns(src).then((ins) => {
         const iframe = ins.querySelector('iframe');
-        testIframe(iframe, '//www.playbuzz.com/item/some-item-id');
+        testIframe(iframe, '//app.ex.co/stories/item/some-item-id');
       });
     });
 
     it('renders with true for each true optional param', () => {
       const src = createItemSrc().withUrl(
-        'https://www.playbuzz.com/bob/bobs-life'
+        'https:///app.ex.co/stories/bob/bobs-life'
       );
       return getIns(src, createOptionalParams(true, true, true)).then((ins) => {
         const iframe = ins.querySelector('iframe');
-        testIframe(iframe, '//www.playbuzz.com/bob/bobs-life');
+        testIframe(iframe, '//app.ex.co/stories/bob/bobs-life');
         expect(iframe.src)
           .to.contain('&useComments=true')
           .and.to.contain('&gameInfo=true')
@@ -166,38 +172,9 @@ describes.realWin(
       });
     });
 
-    it('builds a placeholder image without inserting iframe', () => {
-      const src = createItemSrc().withUrl(
-        'https://www.playbuzz.com/bob/bobs-life'
-      );
-      return getIns(src, createOptionalParams(), true, (ins) => {
-        // console.log(ins);
-        const placeholder = ins.querySelector('[placeholder]');
-        const iframe = ins.querySelector('iframe');
-        expect(iframe).to.be.null;
-        expect(placeholder).to.not.have.display('');
-        expect(placeholder.getAttribute('aria-label')).to.equal(
-          'Loading interactive element'
-        );
-      }).then((ins) => {
-        const placeholder = ins.querySelector('[placeholder]');
-
-        const iframe = ins.querySelector('iframe');
-        ins.getVsync = () => {
-          return {
-            mutate: (fn) => fn(),
-          };
-        };
-        testIframe(iframe, '//www.playbuzz.com/bob/bobs-life');
-        //Should test placeholder too
-        ins.implementation_.iframePromise_.then(() => {
-          expect(placeholder).to.have.display('none');
-        });
-      });
-    });
     it('propagates aria label to placeholder', () => {
       const src = createItemSrc().withUrl(
-        'https://www.playbuzz.com/bob/bobs-life'
+        'https://app.ex.co/stories/bob/bobs-life'
       );
       return getIns(src, {'arialabel': 'captivating quiz'}, true, (ins) => {
         // console.log(ins);
diff --git a/extensions/amp-playbuzz/0.1/test/validator-amp-playbuzz.html b/extensions/amp-playbuzz/0.1/test/validator-amp-playbuzz.html
index 6c12d54602972..9e8e33cb1d754 100644
--- a/extensions/amp-playbuzz/0.1/test/validator-amp-playbuzz.html
+++ b/extensions/amp-playbuzz/0.1/test/validator-amp-playbuzz.html
@@ -24,7 +24,6 @@
   <title>playbuzz examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-playbuzz" src="https://cdn.ampproject.org/v0/amp-playbuzz-latest.js"></script>
 
   <style amp-custom>
diff --git a/extensions/amp-playbuzz/0.1/test/validator-amp-playbuzz.out b/extensions/amp-playbuzz/0.1/test/validator-amp-playbuzz.out
index ec8ceae72191b..a6de1d2ce0ece 100644
--- a/extensions/amp-playbuzz/0.1/test/validator-amp-playbuzz.out
+++ b/extensions/amp-playbuzz/0.1/test/validator-amp-playbuzz.out
@@ -25,7 +25,6 @@ PASS
 |    <title>playbuzz examples</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
 |    <script async custom-element="amp-playbuzz" src="https://cdn.ampproject.org/v0/amp-playbuzz-latest.js"></script>
 |
 |    <style amp-custom>
@@ -89,4 +88,4 @@ PASS
 |  <footer>Footer</footer>
 |
 |  </body>
-|  </html>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-playbuzz/0.1/utils.js b/extensions/amp-playbuzz/0.1/utils.js
index 800888c51edc1..1a100ba6890e2 100644
--- a/extensions/amp-playbuzz/0.1/utils.js
+++ b/extensions/amp-playbuzz/0.1/utils.js
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import {dict} from './../../../src/utils/object';
+import {dict} from './../../../src/core/types/object';
 import {getData} from './../../../src/event-helper';
-import {parseJson} from './../../../src/json';
+import {parseJson} from './../../../src/core/types/object/json';
 import {
   parseUrlDeprecated,
   removeFragment,
   serializeQueryString,
 } from '../../../src/url';
-import {rethrowAsync} from './../../../src/log';
+import {rethrowAsync} from './../../../src/core/error';
 
 /**
  * Returns a function, that, as long as it continues to be invoked, will not
@@ -37,17 +37,16 @@ import {rethrowAsync} from './../../../src/log';
 export function debounce(func, wait, immediate) {
   let timeout;
   return function () {
-    const context = this,
-      args = arguments;
+    const args = arguments;
     clearTimeout(timeout);
-    timeout = setTimeout(function () {
+    timeout = setTimeout(() => {
       timeout = null;
       if (!immediate) {
-        func.apply(context, args);
+        func.apply(this, args);
       }
     }, wait);
     if (immediate && !timeout) {
-      func.apply(context, args);
+      func.apply(this, args);
     }
   };
 }
@@ -55,7 +54,6 @@ export function debounce(func, wait, immediate) {
 /**
  *
  * Gets an element creator using a given document to create elements.
- * @export getElementCreator
  * @param {Document} document
  * @return {!Function}
  */
@@ -166,7 +164,8 @@ export function composeEmbedUrl(options) {
  * @return {string}
  */
 function sanitizeUrl(localtion) {
-  return removeFragment(localtion.href).replace(localtion.protocol, ''); //remove scheme (cors) & fragment
+  const url = removeFragment(localtion.href).replace(localtion.protocol, ''); //remove scheme (cors) & fragment
+  return url.replace(/(www\.)?playbuzz\.com/, 'app.ex.co/stories');
 }
 
 /**
@@ -177,7 +176,7 @@ function sanitizeUrl(localtion) {
  * @return {string}
  */
 export function composeItemSrcUrl(src, itemId) {
-  const DEFAULT_BASE_URL = '//www.playbuzz.com/';
+  const DEFAULT_BASE_URL = '//app.ex.co/stories/';
 
   const iframeSrcUrl = itemId
     ? DEFAULT_BASE_URL + 'item/' + itemId
diff --git a/extensions/amp-playbuzz/OWNERS b/extensions/amp-playbuzz/OWNERS
index c12bc17d95e49..ed80035511f67 100644
--- a/extensions/amp-playbuzz/OWNERS
+++ b/extensions/amp-playbuzz/OWNERS
@@ -1,10 +1,14 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'buzzdan'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [
+        {name: 'buzzdan'},
+        {name: 'iddanh'},
+        {name: 'ampproject/wg-components'},
+      ],
     },
   ],
 }
diff --git a/extensions/amp-playbuzz/amp-playbuzz.md b/extensions/amp-playbuzz/amp-playbuzz.md
index 5ad904c2cc72f..adad90c26170c 100644
--- a/extensions/amp-playbuzz/amp-playbuzz.md
+++ b/extensions/amp-playbuzz/amp-playbuzz.md
@@ -100,4 +100,4 @@ With optional parameters (info, share-buttons, comments):
 
 ## Validation
 
-See [amp-playbuzz rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-playbuzz/validator-amp-playbuzz.protoascii) in the AMP validator specification.
+See [amp-playbuzz rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-playbuzz/validator-amp-playbuzz.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-position-observer/0.1/amp-position-observer.js b/extensions/amp-position-observer/0.1/amp-position-observer.js
index e6f8ece1c2760..2bd3f2edbd651 100644
--- a/extensions/amp-position-observer/0.1/amp-position-observer.js
+++ b/extensions/amp-position-observer/0.1/amp-position-observer.js
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {PositionObserverFidelity} from '../../../src/service/position-observer/position-observer-worker';
 import {
   RelativePositions,
   layoutRectLtwh,
   layoutRectsRelativePos,
-} from '../../../src/layout-rect';
+} from '../../../src/core/math/layout-rect';
 import {Services} from '../../../src/services';
 import {
   assertLength,
@@ -30,7 +30,7 @@ import {
 } from '../../../src/layout';
 import {createCustomEvent} from '../../../src/event-helper';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {installPositionObserverServiceForDoc} from '../../../src/service/position-observer/position-observer-impl';
 
 const TAG = 'amp-position-observer';
@@ -132,9 +132,9 @@ export class AmpVisibilityObserver extends AMP.BaseElement {
         this.positionObserver_.observe(
           scene,
           PositionObserverFidelity.HIGH,
-          /** @type {function(?PositionInViewportEntryDef)} */ (this.positionChanged_.bind(
-            this
-          ))
+          /** @type {function(?PositionInViewportEntryDef)} */ (
+            this.positionChanged_.bind(this)
+          )
         );
       });
   }
diff --git a/extensions/amp-position-observer/0.1/test-e2e/test-scrollbound-animation.js b/extensions/amp-position-observer/0.1/test-e2e/test-scrollbound-animation.js
index e271540a3b452..98574b0602f20 100644
--- a/extensions/amp-position-observer/0.1/test-e2e/test-scrollbound-animation.js
+++ b/extensions/amp-position-observer/0.1/test-e2e/test-scrollbound-animation.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'amp-position-observer in AMPHTML ad',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-position-observer/scrollbound-animation.html',
+    fixture: 'amp-position-observer/scrollbound-animation.html',
     environments: 'amp4ads-preset',
     initialRect: {width: 800, height: 600},
   },
diff --git a/extensions/amp-position-observer/0.1/test-e2e/test-target-id.js b/extensions/amp-position-observer/0.1/test-e2e/test-target-id.js
index 872245db8fd53..c7cf758928200 100644
--- a/extensions/amp-position-observer/0.1/test-e2e/test-target-id.js
+++ b/extensions/amp-position-observer/0.1/test-e2e/test-target-id.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'amp-position-observer target in AMPHTML ad',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-position-observer/target-id.html',
+    fixture: 'amp-position-observer/target-id.html',
     environments: 'amp4ads-preset',
     initialRect: {width: 800, height: 600},
   },
diff --git a/extensions/amp-position-observer/0.1/test/test-amp-position-observer.js b/extensions/amp-position-observer/0.1/test/test-amp-position-observer.js
index a32da3ce274d5..fdd906a7e2736 100644
--- a/extensions/amp-position-observer/0.1/test/test-amp-position-observer.js
+++ b/extensions/amp-position-observer/0.1/test/test-amp-position-observer.js
@@ -15,7 +15,10 @@
  */
 
 import {AmpVisibilityObserver} from '../amp-position-observer';
-import {RelativePositions, layoutRectLtwh} from '../../../../src/layout-rect';
+import {
+  RelativePositions,
+  layoutRectLtwh,
+} from '../../../../src/core/math/layout-rect';
 
 /**
  * Functional tests that create:
diff --git a/extensions/amp-position-observer/OWNERS b/extensions/amp-position-observer/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-position-observer/OWNERS
+++ b/extensions/amp-position-observer/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-position-observer/amp-position-observer.md b/extensions/amp-position-observer/amp-position-observer.md
index fb85980ff2b0e..c7ae6f6e4aa82 100644
--- a/extensions/amp-position-observer/amp-position-observer.md
+++ b/extensions/amp-position-observer/amp-position-observer.md
@@ -25,17 +25,13 @@ limitations under the License.
 
 # amp-position-observer
 
-## Overview
+## Usage
 
 The `amp-position-observer` component monitors the position of an
 element within the viewport as a user scrolls, and dispatches
-`enter`, `exit` and `scroll:<Position In Viewport As a Percentage>` events (**Low Trust Level**), which can be used to trigger actions (**Only Low Trust Actions**) on other components (e.g., [amp-animation](https://amp.dev/documentation/components/amp-animation).
+`enter`, `exit` and `scroll:<Position In Viewport As a Percentage>` events (**Low Trust Level**), which can be used to trigger actions (**Only Low Trust Actions**) on other components (e.g., [amp-animation](https://amp.dev/documentation/components/amp-animation)).
 
-{% call callout('Note', type='note') %}
 The `amp-position-observer` component is only useful when used with other components and does not do anything on its own.
-{% endcall %}
-
-## What can I do with amp-position-observer?
 
 Currently, [amp-animation](https://amp.dev/documentation/components/amp-animation)
 and several video players in AMP are the only components that allow low-trust events
@@ -172,17 +168,22 @@ as clock becomes less than 50% visible.
 </div>
 ```
 
+### Accessibility considerations for scroll-bound and visibility-based animations
+
+Animations in general can present an issue for certain user groups. Scroll-bound and parallax animations in particular can be [problematic for users with vestibular disorders](https://web.dev/prefers-reduced-motion/#motion-triggered-vestibular-spectrum-disorder). Make sure to review the advice provided in the [accessibility considerations for `amp-animation`](https://amp.dev/documentation/components/amp-animation/?format=websites#accessibility-considerations-for-animations).
+
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>target (optional)</strong></td>
-    <td>Specifies the ID of the element to observe. If <strong>not specified</strong>, the <strong>parent</strong> of <code>&lt;amp-position-observer&gt;</code> is used as the target.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>intersection-ratios (optional)</strong></td>
-    <td><p>Defines how much of the target should be visible in the viewport before <code>&lt;amp-position-observer&gt;</code> triggers any of its events. The value is a number between 0 and 1 (default is 0).</p>
-<p>You can specify different ratios for top vs. bottom by providing two values (<code>&lt;top&gt; &lt;bottom&gt;</code>).<br></p>
+### target (optional)
+
+Specifies the ID of the element to observe. If not specified, the parent< of `<amp-position-observer>` is used as the target.
+
+### intersection-ratios (optional)
+
+Defines how much of the target should be visible in the viewport before `<amp-position-observer>` triggers any of its events. The value is a number between 0 and 1 (default is 0).
+
+You can specify different ratios for top vs. bottom by providing two values (`<top>` `<bottom>`).
+
 <ul>
   <li>`intersection-ratios="0"` means `enter` is triggered as soon as a single pixel of the target comes into viewport and `exit` is triggered as soon as the very last pixel of the target goes out of the viewport.
   </li>
@@ -192,12 +193,14 @@ as clock becomes less than 50% visible.
   </li>
   <li>`intersection-ratios="0 1"` makes the conditions different depending on whether the target is entering/exiting from top (0 will be used) or bottom (1 will be used).
   </li>
-</ul></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>viewport-margins (optional)</strong></td>
-    <td><p>A <code>px</code> or <code>vh</code> value which can be used to shrink the area of the viewport used for visibility calculations. A number without a unit will be assumed <code>px</code>. Defaults to 0.</p>
-<p>You can specify different values for top vs. bottom by providing two values (<code>&lt;top&gt; &lt;bottom&gt;</code>).<br></p>
+</ul>
+
+### viewport-margins (optional)
+
+A `px` or `vh` value which can be used to shrink the area of the viewport used for visibility calculations. A number without a unit will be assumed `px`. Defaults to 0.
+
+You can specify different values for top vs. bottom by providing two values (`<top>` `<bottom>`).
+
 <ul>
   <li>`viewport-margins="100px"` means shrink the viewport by 100px from the top and 100px from the bottom.
   </li>
@@ -205,15 +208,14 @@ as clock becomes less than 50% visible.
   </li>
   <li>`viewport-margins="100px 10vh"` means shrink the viewport by 100px from the top and 10% from the bottom.
   </li>
-</ul></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>once (optional)</strong></td>
-    <td>Only triggers the <code>enter</code> and <code>exit</code> events once. The <code>scroll</code> event will also only perform one iteration.
-<p>The presence of the attribute represents the <code>true</code> value and the absence of the attribute represents the <code>false</code> value. If the attribute is present, its value must be an empty string, <code>once</code> or not assigned.</p></td>
-  </tr>
-</table>
+</ul>
+
+### once (optional)
+
+Only triggers the `enter` and `exit` events once. The `scroll` event will also only perform one iteration.
+
+The presence of the attribute represents the `true` value and the absence of the attribute represents the `false` value. If the attribute is present, its value must be an empty string, `once` or not assigned.
 
 ## Validation
 
-See [amp-position-observer rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-position-observer/validator-amp-position-observer.protoascii) in the AMP validator specification.
+See [amp-position-observer rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-position-observer/validator-amp-position-observer.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-position-observer/validator-amp-position-observer.protoascii b/extensions/amp-position-observer/validator-amp-position-observer.protoascii
index bbc25147cb437..773e3e185c3ca 100644
--- a/extensions/amp-position-observer/validator-amp-position-observer.protoascii
+++ b/extensions/amp-position-observer/validator-amp-position-observer.protoascii
@@ -17,7 +17,6 @@
 tags: {  # amp-position-observer
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-position-observer"
@@ -29,7 +28,6 @@ tags: {  # amp-position-observer
 tags: {  # <amp-position-observer>
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "AMP-POSITION-OBSERVER"
   requires_extension: "amp-position-observer"
   attrs: {
diff --git a/extensions/amp-powr-player/0.1/amp-powr-player.js b/extensions/amp-powr-player/0.1/amp-powr-player.js
index d09f219e9524d..9e4469d92bb3f 100644
--- a/extensions/amp-powr-player/0.1/amp-powr-player.js
+++ b/extensions/amp-powr-player/0.1/amp-powr-player.js
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
 import {addParamsToUrl} from '../../../src/url';
@@ -26,8 +27,9 @@ import {
   redispatch,
 } from '../../../src/iframe-video';
 import {dev, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {
+  dispatchCustomEvent,
   fullscreenEnter,
   fullscreenExit,
   getDataParamsFromAttributes,
@@ -83,6 +85,9 @@ class AmpPowrPlayer extends AMP.BaseElement {
 
     /** @private {?../../../src/service/url-replacements-impl.UrlReplacements} */
     this.urlReplacements_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /** @override */
@@ -98,13 +103,6 @@ class AmpPowrPlayer extends AMP.BaseElement {
     return isLayoutSizeDefined(layout);
   }
 
-  /** @override */
-  viewportCallback(visible) {
-    this.element.dispatchCustomEvent(VideoEvents.VISIBILITY, {
-      visible,
-    });
-  }
-
   /** @override */
   buildCallback() {
     this.urlReplacements_ = Services.urlReplacementsForDoc(this.element);
@@ -124,6 +122,8 @@ class AmpPowrPlayer extends AMP.BaseElement {
       this.handlePlayerMessage_(e)
     );
 
+    this.pauseHelper_.updatePlaying(true);
+
     return this.loadPromise(iframe).then(() => this.playerReadyPromise_);
   }
 
@@ -198,7 +198,7 @@ class AmpPowrPlayer extends AMP.BaseElement {
         return;
       }
       this.muted_ = muted;
-      element.dispatchCustomEvent(mutedOrUnmutedEvent(this.muted_));
+      dispatchCustomEvent(element, mutedOrUnmutedEvent(this.muted_));
       return;
     }
   }
@@ -337,6 +337,8 @@ class AmpPowrPlayer extends AMP.BaseElement {
     this.playerReadyPromise_ = deferred.promise;
     this.playerReadyResolver_ = deferred.resolve;
 
+    this.pauseHelper_.updatePlaying(false);
+
     return true; // Call layoutCallback again.
   }
 
diff --git a/extensions/amp-powr-player/0.1/test/test-amp-powr-player.js b/extensions/amp-powr-player/0.1/test/test-amp-powr-player.js
index 3afdaecd52c12..f0e23f7bc1cc4 100644
--- a/extensions/amp-powr-player/0.1/test/test-amp-powr-player.js
+++ b/extensions/amp-powr-player/0.1/test/test-amp-powr-player.js
@@ -46,16 +46,18 @@ describes.realWin(
       }
       doc.body.appendChild(bc);
       return bc
-        .build()
-        .then(() => {
-          bc.implementation_.playerReadyResolver_(bc.implementation_.iframe_);
+        .buildInternal()
+        .then(() => bc.getImpl(false))
+        .then((impl) => {
+          impl.playerReadyResolver_(impl.iframe_);
           return bc.layoutCallback();
         })
         .then(() => bc);
     }
 
-    function fakePostMessage(bc, info) {
-      bc.implementation_.handlePlayerMessage_({
+    async function fakePostMessage(bc, info) {
+      const impl = await bc.getImpl(false);
+      impl.handlePlayerMessage_({
         origin: 'https://player.powr.com',
         source: bc.querySelector('iframe').contentWindow,
         data: JSON.stringify(info),
@@ -109,22 +111,21 @@ describes.realWin(
       );
     });
 
-    it('removes iframe after unlayoutCallback', () => {
-      return getPowrPlayer(
+    it('removes iframe after unlayoutCallback', async () => {
+      const bc = await getPowrPlayer(
         {
           'data-account': '945',
           'data-player': '1',
           'data-video': 'amp-test-video',
         },
         true
-      ).then((bc) => {
-        const iframe = bc.querySelector('iframe');
-        expect(iframe).to.not.be.null;
-        const obj = bc.implementation_;
-        obj.unlayoutCallback();
-        expect(bc.querySelector('iframe')).to.be.null;
-        expect(obj.iframe_).to.be.null;
-      });
+      );
+      const obj = await bc.getImpl(false);
+      const iframe = bc.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+      obj.unlayoutCallback();
+      expect(bc.querySelector('iframe')).to.be.null;
+      expect(obj.iframe_).to.be.null;
     });
 
     it('should pass data-param-* attributes to the iframe src', () => {
@@ -202,64 +203,76 @@ describes.realWin(
         'data-video': 'ZNImchutXk',
       }).then((bc) => {
         return Promise.resolve()
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(bc, VideoEvents.LOAD);
-            fakePostMessage(bc, {event: 'ready', muted: false, playing: false});
+            await fakePostMessage(bc, {
+              event: 'ready',
+              muted: false,
+              playing: false,
+            });
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(bc, VideoEvents.AD_START);
-            fakePostMessage(bc, {
+            await fakePostMessage(bc, {
               event: 'ads-ad-started',
               muted: false,
               playing: false,
             });
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(bc, VideoEvents.AD_END);
-            fakePostMessage(bc, {
+            await fakePostMessage(bc, {
               event: 'ads-ad-ended',
               muted: false,
               playing: false,
             });
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(bc, VideoEvents.PLAYING);
-            fakePostMessage(bc, {
+            await fakePostMessage(bc, {
               event: 'playing',
               muted: false,
               playing: true,
             });
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(bc, VideoEvents.MUTED);
-            fakePostMessage(bc, {
+            await fakePostMessage(bc, {
               event: 'volumechange',
               muted: true,
               playing: true,
             });
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(bc, VideoEvents.UNMUTED);
-            fakePostMessage(bc, {
+            await fakePostMessage(bc, {
               event: 'volumechange',
               muted: false,
               playing: true,
             });
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(bc, VideoEvents.PAUSE);
-            fakePostMessage(bc, {event: 'pause', muted: false, playing: false});
+            await fakePostMessage(bc, {
+              event: 'pause',
+              muted: false,
+              playing: false,
+            });
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(bc, VideoEvents.ENDED);
-            fakePostMessage(bc, {event: 'ended', muted: false, playing: false});
+            await fakePostMessage(bc, {
+              event: 'ended',
+              muted: false,
+              playing: false,
+            });
             return p;
           });
       });
diff --git a/extensions/amp-powr-player/0.1/test/validator-amp-powr-player.out b/extensions/amp-powr-player/0.1/test/validator-amp-powr-player.out
index ca1deef31f779..16a92b23f01d0 100644
--- a/extensions/amp-powr-player/0.1/test/validator-amp-powr-player.out
+++ b/extensions/amp-powr-player/0.1/test/validator-amp-powr-player.out
@@ -58,7 +58,7 @@ FAIL
 |         leaving it out results in an error. -->
 |    <amp-powr-player
 >>   ^~~~~~~~~
-amp-powr-player/0.1/test/validator-amp-powr-player.html:58:2 The mandatory attribute 'data-account' is missing in tag 'amp-powr-player'. (see https://amp.dev/documentation/components/amp-powr-player)
+amp-powr-player/0.1/test/validator-amp-powr-player.html:58:2 The mandatory attribute 'data-account' is missing in tag 'amp-powr-player'. (see https://amp.dev/documentation/components/amp-powr-player/)
 |        data-player="1"
 |        data-video="ZNImchutXk"
 |        layout="responsive" width="480" height="270">
@@ -68,7 +68,7 @@ amp-powr-player/0.1/test/validator-amp-powr-player.html:58:2 The mandatory attri
 |         leaving it out results in an error. -->
 |    <amp-powr-player
 >>   ^~~~~~~~~
-amp-powr-player/0.1/test/validator-amp-powr-player.html:66:2 The mandatory attribute 'data-player' is missing in tag 'amp-powr-player'. (see https://amp.dev/documentation/components/amp-powr-player)
+amp-powr-player/0.1/test/validator-amp-powr-player.html:66:2 The mandatory attribute 'data-player' is missing in tag 'amp-powr-player'. (see https://amp.dev/documentation/components/amp-powr-player/)
 |        data-account="945"
 |        data-video="ZNImchutXk"
 |        layout="responsive" width="480" height="270">
@@ -78,7 +78,7 @@ amp-powr-player/0.1/test/validator-amp-powr-player.html:66:2 The mandatory attri
 |         leaving it out results in an error. -->
 |    <amp-powr-player
 >>   ^~~~~~~~~
-amp-powr-player/0.1/test/validator-amp-powr-player.html:74:2 The tag 'amp-powr-player' is missing a mandatory attribute - pick one of ['data-video', 'data-terms']. (see https://amp.dev/documentation/components/amp-powr-player)
+amp-powr-player/0.1/test/validator-amp-powr-player.html:74:2 The tag 'amp-powr-player' is missing a mandatory attribute - pick one of ['data-video', 'data-terms']. (see https://amp.dev/documentation/components/amp-powr-player/)
 |        data-account="945"
 |        data-player="1"
 |        layout="responsive" width="480" height="270">
diff --git a/extensions/amp-powr-player/OWNERS b/extensions/amp-powr-player/OWNERS
index 68201a0b99069..5a1b256bb4677 100644
--- a/extensions/amp-powr-player/OWNERS
+++ b/extensions/amp-powr-player/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'chadladensack'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'chadladensack'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-powr-player/amp-powr-player.md b/extensions/amp-powr-player/amp-powr-player.md
index 6c031b6b56151..f1a35de3ebc27 100644
--- a/extensions/amp-powr-player/amp-powr-player.md
+++ b/extensions/amp-powr-player/amp-powr-player.md
@@ -79,7 +79,7 @@ Example:
     <td width="40%"><strong>autoplay</strong></td>
     <td>If this attribute is present, and the browser supports autoplay, the video will be automatically
 played as soon as it becomes visible. There are some conditions that the component needs to meet
-to be played, <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-video-interface.md#autoplay">which are outlined in the Video in AMP spec</a>.</td>
+to be played, <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-video-interface.md#autoplay">which are outlined in the Video in AMP spec</a>.</td>
   </tr>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>
@@ -89,4 +89,4 @@ to be played, <a href="https://github.com/ampproject/amphtml/blob/master/spec/am
 
 ## Validation
 
-See [amp-powr-player rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-powr-player/validator-amp-powr-player.protoascii) in the AMP validator specification.
+See [amp-powr-player rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-powr-player/validator-amp-powr-player.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-powr-player/validator-amp-powr-player.protoascii b/extensions/amp-powr-player/validator-amp-powr-player.protoascii
index a3f5c5d7ae1c1..6c6b3bab84e1f 100644
--- a/extensions/amp-powr-player/validator-amp-powr-player.protoascii
+++ b/extensions/amp-powr-player/validator-amp-powr-player.protoascii
@@ -50,7 +50,7 @@ tags: {  # <amp-powr-player>
     value_regex: "[0-9a-zA-Z-]+"
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-powr-player"
+  spec_url: "https://amp.dev/documentation/components/amp-powr-player/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-reach-player/0.1/amp-reach-player.js b/extensions/amp-reach-player/0.1/amp-reach-player.js
index 7587620e544a5..eeb4886fd181c 100644
--- a/extensions/amp-reach-player/0.1/amp-reach-player.js
+++ b/extensions/amp-reach-player/0.1/amp-reach-player.js
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {setIsMediaComponent} from '../../../src/video-interface';
@@ -25,6 +26,9 @@ class AmpReachPlayer extends AMP.BaseElement {
 
     /** @private {?Element} */
     this.iframe_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -63,9 +67,23 @@ class AmpReachPlayer extends AMP.BaseElement {
     this.applyFillContent(iframe);
     this.element.appendChild(iframe);
     this.iframe_ = iframe;
+
+    this.pauseHelper_.updatePlaying(true);
+
     return this.loadPromise(iframe);
   }
 
+  /** @override */
+  unlayoutCallback() {
+    const iframe = this.iframe_;
+    if (iframe) {
+      this.element.removeChild(iframe);
+      this.iframe_ = null;
+    }
+    this.pauseHelper_.updatePlaying(false);
+    return true;
+  }
+
   /** @override */
   pauseCallback() {
     if (this.iframe_ && this.iframe_.contentWindow) {
diff --git a/extensions/amp-reach-player/0.1/test/test-amp-reach-player.js b/extensions/amp-reach-player/0.1/test/test-amp-reach-player.js
index 9449f2a81c019..f233dde88600a 100644
--- a/extensions/amp-reach-player/0.1/test/test-amp-reach-player.js
+++ b/extensions/amp-reach-player/0.1/test/test-amp-reach-player.js
@@ -43,7 +43,7 @@ describes.realWin(
       }
       doc.body.appendChild(reach);
       return reach
-        .build()
+        .buildInternal()
         .then(() => {
           reach.layoutCallback();
         })
@@ -75,5 +75,19 @@ describes.realWin(
         expect(iframe.className).to.match(/i-amphtml-fill-content/);
       });
     });
+
+    it('unlayout and relayout', async () => {
+      const reach = await getReach({
+        'data-embed-id': 'default',
+      });
+      expect(reach.querySelector('iframe')).to.exist;
+
+      const unlayoutResult = reach.unlayoutCallback();
+      expect(unlayoutResult).to.be.true;
+      expect(reach.querySelector('iframe')).to.not.exist;
+
+      await reach.layoutCallback();
+      expect(reach.querySelector('iframe')).to.exist;
+    });
   }
 );
diff --git a/extensions/amp-reach-player/0.1/test/validator-amp-reach-player.html b/extensions/amp-reach-player/0.1/test/validator-amp-reach-player.html
index dab77a0a9b680..2fa780d5f7c8f 100644
--- a/extensions/amp-reach-player/0.1/test/validator-amp-reach-player.html
+++ b/extensions/amp-reach-player/0.1/test/validator-amp-reach-player.html
@@ -40,4 +40,3 @@
   </amp-reach-player>
 </body>
 </html>
-
diff --git a/extensions/amp-reach-player/OWNERS b/extensions/amp-reach-player/OWNERS
index 542d7fc5e4d99..49d818444a13f 100644
--- a/extensions/amp-reach-player/OWNERS
+++ b/extensions/amp-reach-player/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'mikepmtl'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'mikepmtl'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-reach-player/amp-reach-player.md b/extensions/amp-reach-player/amp-reach-player.md
index 3601d14d85d70..482e1ca5a5c97 100644
--- a/extensions/amp-reach-player/amp-reach-player.md
+++ b/extensions/amp-reach-player/amp-reach-player.md
@@ -58,4 +58,4 @@ Example:
 
 ## Validation
 
-See [amp-reach-player rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-reach-player/validator-amp-reach-player.protoascii) in the AMP validator specification.
+See [amp-reach-player rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-reach-player/validator-amp-reach-player.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-recaptcha-input/0.1/amp-recaptcha-service.js b/extensions/amp-recaptcha-input/0.1/amp-recaptcha-service.js
index e3fba980ed88c..37fc88f7ab723 100644
--- a/extensions/amp-recaptcha-input/0.1/amp-recaptcha-service.js
+++ b/extensions/amp-recaptcha-input/0.1/amp-recaptcha-service.js
@@ -21,10 +21,10 @@
 
 import ampToolboxCacheUrl from '../../../third_party/amp-toolbox-cache-url/dist/amp-toolbox-cache-url.esm';
 
-import {Deferred, tryResolve} from '../../../src/utils/promise';
+import {Deferred, tryResolve} from '../../../src/core/data-structures/promise';
 import {Services} from '../../../src/services';
 import {dev, devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getMode} from '../../../src/mode';
 import {getServicePromiseForDoc} from '../../../src/service';
 import {getSourceOrigin} from '../../../src/url';
@@ -410,8 +410,7 @@ export class AmpRecaptchaService {
  * @return {!Promise<!AmpRecaptchaService>}
  */
 export function recaptchaServiceForDoc(element) {
-  return /** @type {!Promise<!AmpRecaptchaService>} */ (getServicePromiseForDoc(
-    element,
-    'amp-recaptcha'
-  ));
+  return /** @type {!Promise<!AmpRecaptchaService>} */ (
+    getServicePromiseForDoc(element, 'amp-recaptcha')
+  );
 }
diff --git a/extensions/amp-recaptcha-input/0.1/test/test-amp-recaptcha-input.js b/extensions/amp-recaptcha-input/0.1/test/test-amp-recaptcha-input.js
index 4c41e73d92b54..0acc2e2867948 100644
--- a/extensions/amp-recaptcha-input/0.1/test/test-amp-recaptcha-input.js
+++ b/extensions/amp-recaptcha-input/0.1/test/test-amp-recaptcha-input.js
@@ -51,7 +51,7 @@ describes.realWin(
       doc.body.appendChild(ampRecaptchaInput);
 
       return ampRecaptchaInput
-        .build()
+        .buildInternal()
         .then(() => {
           return ampRecaptchaInput.layoutCallback();
         })
@@ -117,74 +117,49 @@ describes.realWin(
         });
       });
 
-      it('Should register with the recaptcha service after layout', () => {
-        return getRecaptchaInput().then((ampRecaptchaInput) => {
-          expect(ampRecaptchaInput.implementation_.registerPromise_).to.be.ok;
-          expect(
-            ampRecaptchaInput.implementation_.recaptchaService_
-              .registeredElementCount_
-          ).to.equal(1);
-        });
+      it('Should register with the recaptcha service after layout', async () => {
+        const ampRecaptchaInput = await getRecaptchaInput();
+        const impl = await ampRecaptchaInput.getImpl(false);
+        expect(impl.registerPromise_).to.be.ok;
+        expect(impl.recaptchaService_.registeredElementCount_).to.equal(1);
       });
 
-      it('Should unregister with the recaptcha service after unlayout', () => {
-        return getRecaptchaInput().then((ampRecaptchaInput) => {
-          expect(ampRecaptchaInput.implementation_.registerPromise_).to.be.ok;
-          expect(
-            ampRecaptchaInput.implementation_.recaptchaService_
-              .registeredElementCount_
-          ).to.equal(1);
+      it('Should unregister with the recaptcha service after unlayout', async () => {
+        const ampRecaptchaInput = await getRecaptchaInput();
+        const impl = await ampRecaptchaInput.getImpl(false);
+        expect(impl.registerPromise_).to.be.ok;
+        expect(impl.recaptchaService_.registeredElementCount_).to.equal(1);
 
-          ampRecaptchaInput.unlayoutCallback();
-          expect(
-            ampRecaptchaInput.implementation_.recaptchaService_
-              .registeredElementCount_
-          ).to.equal(0);
-        });
+        ampRecaptchaInput.unlayoutCallback();
+        expect(impl.recaptchaService_.registeredElementCount_).to.equal(0);
       });
 
       it(
         'Should not register with the recaptcha service' +
           ' if already registered',
-        () => {
-          return getRecaptchaInput().then((ampRecaptchaInput) => {
-            expect(ampRecaptchaInput.implementation_.registerPromise_).to.be.ok;
-            expect(
-              ampRecaptchaInput.implementation_.recaptchaService_
-                .registeredElementCount_
-            ).to.equal(1);
-            ampRecaptchaInput.implementation_.layoutCallback();
-            expect(
-              ampRecaptchaInput.implementation_.recaptchaService_
-                .registeredElementCount_
-            ).to.equal(1);
-          });
+        async () => {
+          const ampRecaptchaInput = await getRecaptchaInput();
+          const impl = await ampRecaptchaInput.getImpl(false);
+          expect(impl.registerPromise_).to.be.ok;
+          expect(impl.recaptchaService_.registeredElementCount_).to.equal(1);
+          impl.layoutCallback();
+          expect(impl.recaptchaService_.registeredElementCount_).to.equal(1);
         }
       );
 
       it(
         'Should not unregister with the recaptcha service' +
           ' if not already registered',
-        () => {
-          return getRecaptchaInput().then((ampRecaptchaInput) => {
-            expect(ampRecaptchaInput.implementation_.registerPromise_).to.be.ok;
-            expect(
-              ampRecaptchaInput.implementation_.recaptchaService_
-                .registeredElementCount_
-            ).to.equal(1);
-            ampRecaptchaInput.unlayoutCallback();
-            expect(ampRecaptchaInput.implementation_.registerPromise_).to.not.be
-              .ok;
-            expect(
-              ampRecaptchaInput.implementation_.recaptchaService_
-                .registeredElementCount_
-            ).to.equal(0);
-            ampRecaptchaInput.unlayoutCallback();
-            expect(
-              ampRecaptchaInput.implementation_.recaptchaService_
-                .registeredElementCount_
-            ).to.equal(0);
-          });
+        async () => {
+          const ampRecaptchaInput = await getRecaptchaInput();
+          const impl = await ampRecaptchaInput.getImpl(false);
+          expect(impl.registerPromise_).to.be.ok;
+          expect(impl.recaptchaService_.registeredElementCount_).to.equal(1);
+          ampRecaptchaInput.unlayoutCallback();
+          expect(impl.registerPromise_).to.not.be.ok;
+          expect(impl.recaptchaService_.registeredElementCount_).to.equal(0);
+          ampRecaptchaInput.unlayoutCallback();
+          expect(impl.recaptchaService_.registeredElementCount_).to.equal(0);
         }
       );
     });
diff --git a/extensions/amp-recaptcha-input/OWNERS b/extensions/amp-recaptcha-input/OWNERS
index 3095212ac6c8b..ad60c6c5b92c4 100644
--- a/extensions/amp-recaptcha-input/OWNERS
+++ b/extensions/amp-recaptcha-input/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'torch2424'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'torch2424'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-recaptcha-input/amp-recaptcha-input.md b/extensions/amp-recaptcha-input/amp-recaptcha-input.md
index c050a37de109e..f4e7a9d63161d 100644
--- a/extensions/amp-recaptcha-input/amp-recaptcha-input.md
+++ b/extensions/amp-recaptcha-input/amp-recaptcha-input.md
@@ -24,7 +24,7 @@ limitations under the License.
 
 # amp-recaptcha-input
 
-## Behavior
+## Usage
 
 This extension adds a parameter containing a reCAPTCHA response token when a parent `<form>` element submits. `amp-recaptcha-input` does this by creating an iframe to load the reCAPTCHA v3 api script using the provided site key, and calling `grecaptcha.execute` with the provided site key and action.
 
@@ -64,36 +64,32 @@ grecaptcha.execute('reCAPTCHA_site_key', {action: 'reCAPTCHA_example_action'});
 ```js
 {
   ...other form params
-  “reCAPTCHA_body_key”: “returned_reCAPTCHA_response_token”
+  "reCAPTCHA_body_key": "returned_reCAPTCHA_response_token"
 }
 ```
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>layout (required)</strong></td>
-    <td>Required value is <code>nodisplay</code>.
-</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>name (required)</strong></td>
-    <td>Name of the <code>&lt;amp-recaptcha-input&gt;</code>. Will be used as a parameter key in the AMP form body submission.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-sitekey (required)</strong></td>
-    <td><a href="https://developers.google.com/recaptcha/docs/v3">reCAPTCHA v3</a> site key for the registered website.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-action (required)</strong></td>
-    <td><a href="https://developers.google.com/recaptcha/docs/v3">reCAPTCHA v3</a> action to be executed on form submission.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-global [optional]</strong></td>
-    <td>By default, the iframe loads the recaptcha api script using the <code>www.google.com</code> endpoint.  There are some situations when this is not accessible.  When the <code>data-global</code> attribute is included, the component will load the script from the <code>www.recaptcha.net</code> endpoint instead.  More information can be found in the <a href="https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally">reCAPTCHA FAQ</a>.</td>
-  </tr>
-</table>
+### layout (required)
+
+Required value is `nodisplay`.
+
+### name (required)
+
+Name of the `<amp-recaptcha-input>`. Will be used as a parameter key in the AMP form body submission.
+
+### data-sitekey (required)
+
+[reCAPTCHA v3](https://developers.google.com/recaptcha/docs/v3) site key for the registered website.
+
+### data-action (required)
+
+[reCAPTCHA v3](https://developers.google.com/recaptcha/docs/v3) action to be executed on form submission.
+
+### data-global (optional)
+
+By default, the iframe loads the recaptcha api script using the `www.google.com` endpoint. There are some situations when this is not accessible. When the `data-global` attribute is included, the component will load the script from the `www.recaptcha.net` endpoint instead. More information can be found in the [reCAPTCHA FAQ](https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally).
 
 ## Validation
 
-See [`<amp-recaptcha-input>`](https://github.com/ampproject/amphtml/blob/master/extensions/amp-recaptcha-input/validator-amp-recaptcha-input.protoascii) rules in the AMP validator specification.
+See [`<amp-recaptcha-input>`](https://github.com/ampproject/amphtml/blob/main/extensions/amp-recaptcha-input/validator-amp-recaptcha-input.protoascii) rules in the AMP validator specification.
diff --git a/extensions/amp-recaptcha-input/validator-amp-recaptcha-input.protoascii b/extensions/amp-recaptcha-input/validator-amp-recaptcha-input.protoascii
index 20de8b4c3bbc1..6c85e083adf29 100644
--- a/extensions/amp-recaptcha-input/validator-amp-recaptcha-input.protoascii
+++ b/extensions/amp-recaptcha-input/validator-amp-recaptcha-input.protoascii
@@ -42,4 +42,3 @@ tags: {  # <amp-form> <amp-recaptcha-input>
     supported_layouts: NODISPLAY
   }
 }
-
diff --git a/extensions/amp-redbull-player/0.1/amp-redbull-player.js b/extensions/amp-redbull-player/0.1/amp-redbull-player.js
index e108f67b9bb1f..61b83aa339393 100644
--- a/extensions/amp-redbull-player/0.1/amp-redbull-player.js
+++ b/extensions/amp-redbull-player/0.1/amp-redbull-player.js
@@ -23,10 +23,14 @@ import {
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
 import {addParamsToUrl} from '../../../src/url';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {disableScrollingOnIframe} from '../../../src/iframe-helper';
+import {
+  dispatchCustomEvent,
+  getDataParamsFromAttributes,
+  removeElement,
+} from '../../../src/dom';
 import {getData, listen} from '../../../src/event-helper';
-import {getDataParamsFromAttributes, removeElement} from '../../../src/dom';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {userAssert} from '../../../src/log';
@@ -55,7 +59,7 @@ class AmpRedBullPlayer extends AMP.BaseElement {
     /** @private {?Element} */
     this.iframe_ = null;
 
-    /** @private {!UnlistenDef|null} */
+    /** @private {?UnlistenDef} */
     this.unlistenFrame_ = null;
 
     /** @private {string} */
@@ -199,7 +203,8 @@ class AmpRedBullPlayer extends AMP.BaseElement {
    * @param {!Object<string, string>=} vars
    */
   dispatchCustomAnalyticsEvent_(eventType, vars) {
-    this.element.dispatchCustomEvent(
+    dispatchCustomEvent(
+      this.element,
       VideoEvents.CUSTOM_TICK,
       dict({
         'eventType': `video-custom-tracking-${this.tagId_}`,
diff --git a/extensions/amp-redbull-player/0.1/test/test-amp-redbull.js b/extensions/amp-redbull-player/0.1/test/test-amp-redbull.js
index 13f923ab5d42c..83962f581b15a 100644
--- a/extensions/amp-redbull-player/0.1/test/test-amp-redbull.js
+++ b/extensions/amp-redbull-player/0.1/test/test-amp-redbull.js
@@ -42,31 +42,75 @@ describes.realWin(
       player.setAttribute('layout', 'responsive');
 
       doc.body.appendChild(player);
-      return player.build().then(() => {
+      return player.buildInternal().then(() => {
         player.layoutCallback();
         return player;
       });
     }
 
-    it('renders the Red Bull player', async () => {
-      const player = await getRedBullElement(
-        'rrn:content:videos:3965a26c-052e-575f-a28b-ded6bee23ee1:en-INT'
-      );
-      const playerIframe = player.querySelector('iframe');
-      expect(playerIframe).to.not.be.null;
-      expect(playerIframe.src).to.equal(
-        'https://player.redbull.com/amp/amp-iframe.html?videoId=' +
-          encodeURIComponent(
-            'rrn:content:videos:3965a26c-052e-575f-a28b-ded6bee23ee1:en-INT'
-          ) +
-          '&skinId=com&ampTagId=rbvideo&locale=global'
-      );
+    describe('rendering', async () => {
+      it('renders the Red Bull player', async () => {
+        const player = await getRedBullElement(
+          'rrn:content:videos:3965a26c-052e-575f-a28b-ded6bee23ee1:en-INT'
+        );
+        const playerIframe = player.querySelector('iframe');
+        expect(playerIframe).to.not.be.null;
+        expect(playerIframe.src).to.equal(
+          'https://player.redbull.com/amp/amp-iframe.html?videoId=' +
+            encodeURIComponent(
+              'rrn:content:videos:3965a26c-052e-575f-a28b-ded6bee23ee1:en-INT'
+            ) +
+            '&skinId=com&ampTagId=rbvideo&locale=global'
+        );
+      });
+
+      it('fails without videoId', () => {
+        return getRedBullElement(null).should.eventually.be.rejectedWith(
+          /The data-param-videoid attribute is required/
+        );
+      });
+
+      it('removes iframe after unlayoutCallback', async () => {
+        const player = await getRedBullElement(
+          'rrn:content:videos:3965a26c-052e-575f-a28b-ded6bee23ee1:en-INT'
+        );
+        const playerIframe = player.querySelector('iframe');
+        expect(playerIframe).to.not.be.null;
+
+        const impl = await player.getImpl(false);
+        impl.unlayoutCallback();
+        expect(player.querySelector('iframe')).to.be.null;
+        expect(impl.iframe_).to.be.null;
+      });
     });
+    describe('methods', async () => {
+      let impl;
+      beforeEach(async () => {
+        const player = await getRedBullElement(
+          'rrn:content:videos:3965a26c-052e-575f-a28b-ded6bee23ee1:en-INT'
+        );
+        impl = await player.getImpl(false);
+      });
+
+      it('is interactive', () => {
+        expect(impl.isInteractive()).to.be.true;
+      });
+
+      it('supports platform', () => {
+        expect(impl.supportsPlatform()).to.be.true;
+      });
+
+      it('does not pre-implement MediaSession API', () => {
+        expect(impl.preimplementsMediaSessionAPI()).to.be.false;
+      });
+
+      it('does not pre-implement auto-fullscreen', () => {
+        expect(impl.preimplementsAutoFullscreen()).to.be.false;
+      });
 
-    it('fails without videoId', () => {
-      return getRedBullElement(null).should.eventually.be.rejectedWith(
-        /The data-param-videoid attribute is required/
-      );
+      it('is not fullscreen', () => {
+        expect(impl.isFullscreen()).to.be.false;
+      });
     });
   }
 );
diff --git a/extensions/amp-redbull-player/OWNERS b/extensions/amp-redbull-player/OWNERS
index fd418f4fb2e74..cf94d5d2b30d6 100644
--- a/extensions/amp-redbull-player/OWNERS
+++ b/extensions/amp-redbull-player/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'wklopf'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'wklopf'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-redbull-player/amp-redbull-player.md b/extensions/amp-redbull-player/amp-redbull-player.md
index a443729a1c78c..d38728c9c5fd4 100644
--- a/extensions/amp-redbull-player/amp-redbull-player.md
+++ b/extensions/amp-redbull-player/amp-redbull-player.md
@@ -60,4 +60,4 @@ limitations under the License.
 
 ## Validation
 
-See [amp-redbull-player rules]`(https://github.com/ampproject/amphtml/blob/master/extensions/amp-redbull-player/validator-amp-player-player.protoascii)` in the AMP validator specification.
+See [amp-redbull-player rules]`(https://github.com/ampproject/amphtml/blob/main/extensions/amp-redbull-player/validator-amp-player-player.protoascii)` in the AMP validator specification.
diff --git a/extensions/amp-reddit/0.1/amp-reddit.js b/extensions/amp-reddit/0.1/amp-reddit.js
index 90a0f7cbf7108..495afc588e01d 100644
--- a/extensions/amp-reddit/0.1/amp-reddit.js
+++ b/extensions/amp-reddit/0.1/amp-reddit.js
@@ -20,6 +20,8 @@ import {isLayoutSizeDefined} from '../../../src/layout';
 import {listenFor} from '../../../src/iframe-helper';
 import {userAssert} from '../../../src/log';
 
+const TYPE = 'reddit';
+
 class AmpReddit extends AMP.BaseElement {
   /**
    * @param {boolean=} onLayout
@@ -51,7 +53,7 @@ class AmpReddit extends AMP.BaseElement {
       );
     }
 
-    preloadBootstrap(this.win, ampdoc, preconnect);
+    preloadBootstrap(this.win, TYPE, ampdoc, preconnect);
   }
 
   /** @override */
@@ -72,9 +74,10 @@ class AmpReddit extends AMP.BaseElement {
       this.element
     );
 
-    const iframe = getIframe(this.win, this.element, 'reddit', null, {
+    const iframe = getIframe(this.win, this.element, TYPE, null, {
       allowFullscreen: true,
     });
+    iframe.title = this.element.title || 'Reddit';
     this.applyFillContent(iframe);
     listenFor(
       iframe,
diff --git a/extensions/amp-reddit/0.1/test/test-amp-reddit.js b/extensions/amp-reddit/0.1/test/test-amp-reddit.js
index 1497af393346b..a47cc2c268953 100644
--- a/extensions/amp-reddit/0.1/test/test-amp-reddit.js
+++ b/extensions/amp-reddit/0.1/test/test-amp-reddit.js
@@ -42,7 +42,7 @@ describes.realWin(
       ampReddit.setAttribute('layout', 'responsive');
 
       doc.body.appendChild(ampReddit);
-      await ampReddit.build();
+      await ampReddit.buildInternal();
       await ampReddit.layoutCallback();
       return ampReddit;
     }
@@ -65,8 +65,7 @@ describes.realWin(
       doc.body.appendChild(div);
 
       reddit(win, {
-        src:
-          'https://www.reddit.com/r/me_irl/comments/52rmir/me_irl/?ref=share&amp;ref_source=embed',
+        src: 'https://www.reddit.com/r/me_irl/comments/52rmir/me_irl/?ref=share&amp;ref_source=embed',
         embedtype: 'post',
         width: 400,
         height: 400,
@@ -94,8 +93,7 @@ describes.realWin(
       doc.body.appendChild(div);
 
       reddit(win, {
-        src:
-          'https://www.reddit.com/r/sports/comments/54loj1/50_cents_awful_1st_pitch_given_a_historical/d8306kw',
+        src: 'https://www.reddit.com/r/sports/comments/54loj1/50_cents_awful_1st_pitch_given_a_historical/d8306kw',
         embedtype: 'comment',
         width: 400,
         height: 400,
diff --git a/extensions/amp-reddit/OWNERS b/extensions/amp-reddit/OWNERS
index bb4b52aca7ecf..ae9b498b30e60 100644
--- a/extensions/amp-reddit/OWNERS
+++ b/extensions/amp-reddit/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'samiamorwas'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'samiamorwas'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-reddit/amp-reddit.md b/extensions/amp-reddit/amp-reddit.md
index 92f26b707b5d4..b3ad20bedd834 100644
--- a/extensions/amp-reddit/amp-reddit.md
+++ b/extensions/amp-reddit/amp-reddit.md
@@ -85,6 +85,10 @@ Use the `amp-reddit` component to embed a Reddit post or comment.
     <td width="40%"><strong>data-embedlive</strong></td>
     <td>Indicates whether the embedded comment should update if the original comment is updated. Supported when <code>data-embedtype</code> is <code>comment</code>.</td>
   </tr>
+  <tr>
+    <td width="40%"><strong>title</strong></td>
+    <td>Define a <code>title</code> attribute for the component. The default is <code>Reddit</code>.</td>
+  </tr>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>
     <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
@@ -93,4 +97,4 @@ Use the `amp-reddit` component to embed a Reddit post or comment.
 
 ## Validation
 
-See [amp-reddit rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-reddit/validator-amp-reddit.protoascii) in the AMP validator specification.
+See [amp-reddit rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-reddit/validator-amp-reddit.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-render/1.0/amp-render.js b/extensions/amp-render/1.0/amp-render.js
new file mode 100644
index 0000000000000..e45ec3aeed12d
--- /dev/null
+++ b/extensions/amp-render/1.0/amp-render.js
@@ -0,0 +1,279 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {BaseElement} from './base-element';
+import {
+  BatchFetchOptionsDef,
+  UrlReplacementPolicy,
+  batchFetchJsonFor,
+} from '../../../src/batched-json';
+import {Services} from '../../../src/services';
+import {dev, user, userAssert} from '../../../src/log';
+import {dict} from '../../../src/core/types/object';
+import {getSourceOrigin, isAmpScriptUri} from '../../../src/url';
+import {isExperimentOn} from '../../../src/experiments';
+
+/** @const {string} */
+const TAG = 'amp-render';
+
+const AMP_STATE_URI_SCHEME = 'amp-state:';
+
+/**
+ * Returns true if element's src points to amp-state.
+ * @param {?string} src
+ * @return {boolean}
+ */
+const isAmpStateSrc = (src) => src && src.startsWith(AMP_STATE_URI_SCHEME);
+
+/**
+ * Gets the json from an "amp-state:" uri. For example, src="amp-state:json.path".
+ *
+ * TODO: this is similar to the implementation in amp-list. Move it
+ * to a common file and import it.
+ *
+ * @param {!AmpElement} element
+ * @param {string} src
+ * @return {Promise<!JsonObject>}
+ */
+const getAmpStateJson = (element, src) => {
+  return Services.bindForDocOrNull(element)
+    .then((bind) => {
+      userAssert(bind, '"amp-state:" URLs require amp-bind to be installed.');
+      const ampStatePath = src.slice(AMP_STATE_URI_SCHEME.length);
+      return bind.getStateAsync(ampStatePath).catch((err) => {
+        const stateKey = ampStatePath.split('.')[0];
+        user().error(
+          TAG,
+          `'amp-state' element with id '${stateKey}' was not found.`
+        );
+        throw err;
+      });
+    })
+    .then((json) => {
+      userAssert(
+        json !== undefined,
+        `[amp-render] No data was found at provided uri: ${src}`
+      );
+      return json;
+    });
+};
+
+export class AmpRender extends BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {?../../../src/service/template-impl.Templates} */
+    this.templates_ = null;
+
+    /** @private {?Element} */
+    this.template_ = null;
+
+    /** @private {?string} */
+    this.initialSrc_ = null;
+
+    /** @private {?string} */
+    this.src_ = null;
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'amp-render'),
+      'Experiment "amp-render" is not turned on.'
+    );
+    return super.isLayoutSupported(layout);
+  }
+
+  /**
+   * @return {!UrlReplacementPolicy}
+   * @private
+   */
+  getPolicy_() {
+    const src = this.element.getAttribute('src');
+    // Require opt-in for URL variable replacements on CORS fetches triggered
+    // by [src] mutation. @see spec/amp-var-substitutions.md
+    // TODO(dmanek): Update spec/amp-var-substitutions.md with this information
+    // and add a `Substitution` sections in this component's markdown file.
+    let policy = UrlReplacementPolicy.OPT_IN;
+    if (
+      src == this.initialSrc_ ||
+      getSourceOrigin(src) == getSourceOrigin(this.getAmpDoc().win.location)
+    ) {
+      policy = UrlReplacementPolicy.ALL;
+    }
+    return policy;
+  }
+
+  /**
+   * @param {boolean} shouldRefresh true to force refresh of browser cache.
+   * @return {!BatchFetchOptionsDef} options object to pass to `batchFetchJsonFor` method.
+   * @private
+   */
+  buildOptionsObject_(shouldRefresh = false) {
+    return {
+      xssiPrefix: this.element.getAttribute('xssi-prefix'),
+      expr: this.element.getAttribute('key') ?? '.',
+      refresh: shouldRefresh,
+      urlReplacement: this.getPolicy_(),
+    };
+  }
+
+  /**
+   * Returns a function to fetch json from remote url, amp-state or
+   * amp-script.
+   *
+   * @return {Function}
+   */
+  getFetchJsonFn() {
+    const {element} = this;
+    const src = element.getAttribute('src');
+    if (!src) {
+      // TODO(dmanek): assert that src is provided instead of silently failing below.
+      return () => {};
+    }
+    if (isAmpStateSrc(src)) {
+      return (src) => getAmpStateJson(element, src);
+    }
+    if (isAmpScriptUri(src)) {
+      return (src) =>
+        Services.scriptForDocOrNull(element).then((ampScriptService) => {
+          userAssert(ampScriptService, 'AMP-SCRIPT is not installed');
+          return ampScriptService.fetch(src);
+        });
+    }
+    return (unusedSrc, shouldRefresh = false) =>
+      batchFetchJsonFor(
+        element.getAmpDoc(),
+        element,
+        this.buildOptionsObject_(shouldRefresh)
+      );
+  }
+
+  /** @override */
+  init() {
+    this.initialSrc_ = this.element.getAttribute('src');
+    this.src_ = this.initialSrc_;
+
+    const hasAriaLive = this.element.hasAttribute('aria-live');
+    if (!hasAriaLive) {
+      this.element.setAttribute('aria-live', 'polite');
+    }
+
+    this.registerApiAction('refresh', (api) => {
+      const src = this.element.getAttribute('src');
+      // There is an alternative way to do this using `mutationObserverCallback` while using a boolean
+      // variable `canRefresh`. See https://github.com/ampproject/amphtml/pull/33776#discussion_r614087734
+      // for more context. This approach may be better if src does not mutate often. But the alternative might
+      // be better if src mutatates often and component user does not use `refresh` action.
+      if (!src || isAmpStateSrc(src) || isAmpScriptUri(src)) {
+        return;
+      }
+      api.refresh();
+    });
+
+    return dict({
+      'ariaLiveValue': hasAriaLive
+        ? this.element.getAttribute('aria-live')
+        : 'polite',
+      'getJson': this.getFetchJsonFn(),
+      'onLoading': () => {
+        this.toggleLoading(true);
+      },
+      'onReady': () => {
+        this.toggleLoading(false);
+        this.togglePlaceholder(false);
+      },
+      'onRefresh': () => {
+        this.togglePlaceholder(true);
+        this.toggleFallback(false);
+      },
+      'onError': () => {
+        this.toggleLoading(false);
+        // If the content fails to load and there's a fallback element, display the fallback.
+        // Otherwise, continue displaying the placeholder.
+        if (this.getFallback()) {
+          this.togglePlaceholder(false);
+          this.toggleFallback(true);
+        } else {
+          this.togglePlaceholder(true);
+        }
+      },
+    });
+  }
+
+  /** @override */
+  mutationObserverCallback() {
+    const src = this.element.getAttribute('src');
+    if (src === this.src_) {
+      return;
+    }
+    this.src_ = src;
+    this.mutateProps(dict({'getJson': this.getFetchJsonFn()}));
+  }
+
+  /**
+   * TODO: this implementation is identical to one in amp-date-display &
+   * amp-date-countdown. Move it to a common file and import it.
+   *
+   * @override
+   */
+  checkPropsPostMutations() {
+    const templates =
+      this.templates_ ||
+      (this.templates_ = Services.templatesForDoc(this.element));
+    const template = templates.maybeFindTemplate(this.element);
+    if (template === this.template_) {
+      return;
+    }
+    this.template_ = template;
+    if (!template) {
+      this.mutateProps(dict({'render': null}));
+      return;
+    }
+    // Only overwrite `render` when template is ready to minimize FOUC.
+    templates.whenReady(template).then(() => {
+      if (template != this.template_) {
+        // A new template has been set while the old one was initializing.
+        return;
+      }
+      this.mutateProps(
+        dict({
+          'render': (data) => {
+            return templates
+              .renderTemplateAsString(dev().assertElement(template), data)
+              .then((html) => dict({'__html': html}));
+          },
+        })
+      );
+    });
+  }
+
+  /**
+   * TODO: this implementation is identical to one in amp-date-display &
+   * amp-date-countdown. Move it to a common file and import it.
+   *
+   * @override
+   */
+  isReady(props) {
+    // If a template is specified, then it must be available.
+    return !this.template_ || 'render' in props;
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpRender);
+});
diff --git a/extensions/amp-render/1.0/base-element.js b/extensions/amp-render/1.0/base-element.js
new file mode 100644
index 0000000000000..ae6688be0e258
--- /dev/null
+++ b/extensions/amp-render/1.0/base-element.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {Render} from './component';
+
+export class BaseElement extends PreactBaseElement {}
+
+/** @override */
+BaseElement['Component'] = Render;
+
+/** @override */
+BaseElement['props'] = {
+  'src': {attr: 'src'},
+};
+
+/** @override */
+BaseElement['usesTemplate'] = true;
+
+/** @override */
+BaseElement['lightDomTag'] = 'div';
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
diff --git a/extensions/amp-render/1.0/component.js b/extensions/amp-render/1.0/component.js
new file mode 100644
index 0000000000000..9a19be4a78f6c
--- /dev/null
+++ b/extensions/amp-render/1.0/component.js
@@ -0,0 +1,126 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {Wrapper, useRenderer} from '../../../src/preact/component';
+import {forwardRef} from '../../../src/preact/compat';
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from '../../../src/preact';
+import {useResourcesNotify} from '../../../src/preact/utils';
+
+/**
+ * @param {!JsonObject} data
+ * @return {string}
+ */
+const DEFAULT_RENDER = (data) => JSON.stringify(data);
+
+/**
+ * @param {string} url
+ * @return {!Promise<!JsonObject>}
+ */
+const DEFAULT_GET_JSON = (url) => {
+  return fetch(url).then((res) => res.json());
+};
+
+/**
+ * @param {!RenderDef.Props} props
+ * @param {{current: ?RenderDef.RenderApi}} ref
+ * @return {PreactDef.Renderable}
+ */
+export function RenderWithRef(
+  {
+    src = '',
+    getJson = DEFAULT_GET_JSON,
+    render = DEFAULT_RENDER,
+    ariaLiveValue = 'polite',
+    onLoading,
+    onReady,
+    onRefresh,
+    onError,
+    ...rest
+  },
+  ref
+) {
+  useResourcesNotify();
+
+  const [data, setData] = useState({});
+
+  useEffect(() => {
+    // TODO(dmanek): Add additional validation for src
+    // when adding url replacement logic.
+    if (!src) {
+      return;
+    }
+    let cancelled = false;
+    onLoading?.();
+    getJson(src)
+      .then((data) => {
+        if (!cancelled) {
+          setData(data);
+          onReady?.();
+        }
+      })
+      .catch((e) => {
+        onError?.(e);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [getJson, src, onLoading, onReady, onError]);
+
+  const refresh = useCallback(() => {
+    onRefresh?.();
+    getJson(src, /* shouldRefresh */ true)
+      .then((data) => {
+        setData(data);
+        onReady?.();
+      })
+      .catch((e) => {
+        onError?.(e);
+      });
+  }, [getJson, src, onReady, onRefresh, onError]);
+
+  useImperativeHandle(
+    ref,
+    () =>
+      /** @type {!RenderDef.RenderApi} */ ({
+        refresh,
+      }),
+    [refresh]
+  );
+
+  const rendered = useRenderer(render, data);
+  const isHtml =
+    rendered && typeof rendered == 'object' && '__html' in rendered;
+
+  return (
+    <Wrapper
+      {...rest}
+      dangerouslySetInnerHTML={isHtml ? rendered : null}
+      aria-live={ariaLiveValue}
+    >
+      {isHtml ? null : rendered}
+    </Wrapper>
+  );
+}
+
+const Render = forwardRef(RenderWithRef);
+Render.displayName = 'Render';
+export {Render};
diff --git a/extensions/amp-render/1.0/component.type.js b/extensions/amp-render/1.0/component.type.js
new file mode 100644
index 0000000000000..61691ae86eb69
--- /dev/null
+++ b/extensions/amp-render/1.0/component.type.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/** @externs */
+
+/** @const */
+var RenderDef = {};
+
+/**
+ * @typedef {{
+ *   src: (!string),
+ *   getJson: (!Function),
+ *   render: (?RendererFunctionType|undefined),
+ *   onLoading: (Function),
+ *   onReady: (Function),
+ *   onRefresh: (Function),
+ *   onError: (Function),
+ *   ariaLiveValue: (!string)
+ * }}
+ */
+RenderDef.Props;
+
+/** @interface */
+RenderDef.RenderApi = class {
+  refresh() {}
+};
diff --git a/extensions/amp-render/1.0/storybook/Basic.amp.js b/extensions/amp-render/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..08881592f8ad9
--- /dev/null
+++ b/extensions/amp-render/1.0/storybook/Basic.amp.js
@@ -0,0 +1,163 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-render-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [
+      {name: 'amp-mustache', version: '0.2'},
+      {name: 'amp-bind', version: '0.1'},
+      {name: 'amp-render', version: '1.0'},
+      {name: 'amp-script', version: '0.1'},
+    ],
+    experiments: ['amp-render'],
+  },
+};
+
+export const WithAmpState = () => {
+  const content = JSON.stringify({'name': 'Bill'});
+
+  return (
+    <>
+      <amp-state id="someData">
+        <script
+          type="application/json"
+          dangerouslySetInnerHTML={{__html: content}}
+        ></script>
+      </amp-state>
+
+      <amp-render
+        src="amp-state:someData"
+        width="300"
+        height="400"
+        layout="fixed"
+      >
+        <template type="amp-mustache">{`Hi {{name}}!`}</template>
+      </amp-render>
+    </>
+  );
+};
+
+WithAmpState.storyName = 'With AMP State';
+
+export const WithRemoteSrc = () => {
+  const srcUrl = text(
+    'src',
+    'http://localhost:9001/examples/amp-render-data.json'
+  );
+
+  return (
+    <amp-render src={srcUrl} width="300" height="400" layout="fixed">
+      <template type="amp-mustache">{`Hi {{name}}!`}</template>
+    </amp-render>
+  );
+};
+
+WithRemoteSrc.storyName = 'With remote src';
+
+export const WithBindableSrc = () => {
+  return (
+    <>
+      <amp-render
+        data-amp-bind-src="bindSrc"
+        src="https://amp.dev/static/samples/json/examples.json"
+        width="300"
+        height="200"
+        layout="fixed"
+      >
+        <template type="amp-mustache">
+          <ul>
+            {`{{#items}}`}
+            <li>{`{{title}}`}</li>
+            {`{{/items}}`}
+          </ul>
+        </template>
+      </amp-render>
+
+      <button on="tap:AMP.setState({ bindSrc: 'https://amp.dev/static/samples/json/examples2.json' })">
+        Change source
+      </button>
+    </>
+  );
+};
+
+WithBindableSrc.storyName = 'With bindable src';
+
+export const WithAmpScriptSrc = () => {
+  return (
+    <>
+      <amp-script id="dataFunctions" script="local-script" nodom></amp-script>
+      <script id="local-script" type="text/plain" target="amp-script">
+        {`
+        function getRemoteData() {
+          return fetch('https://amp.dev/static/samples/json/examples2.json')
+            .then(function(resp) { return resp.json(); });
+        }
+        exportFunction('getRemoteData', getRemoteData);
+        `}
+      </script>
+
+      <amp-render
+        src="amp-script:dataFunctions.getRemoteData"
+        width="auto"
+        height="100"
+        layout="fixed-height"
+      >
+        <template type="amp-mustache">
+          <ul>
+            {`{{#items}}`}
+            <li>{`{{title}}`}</li>
+            {`{{/items}}`}
+          </ul>
+        </template>
+      </amp-render>
+    </>
+  );
+};
+
+WithAmpScriptSrc.storyName = 'With AMP script src';
+
+export const WithRefreshButton = () => {
+  return (
+    <>
+      <amp-render
+        id="my-amp-render"
+        src="https://amp.dev/static/samples/json/examples.json"
+        width="300"
+        height="200"
+        layout="fixed"
+      >
+        <template type="amp-mustache">
+          <ul>
+            {`{{#items}}`}
+            <li>{`{{title}}`}</li>
+            {`{{/items}}`}
+          </ul>
+        </template>
+      </amp-render>
+
+      <button on="tap:my-amp-render.refresh">Refresh data</button>
+    </>
+  );
+};
+
+WithBindableSrc.storyName = 'With bindable src';
diff --git a/extensions/amp-render/1.0/storybook/Basic.js b/extensions/amp-render/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..5418a818f538f
--- /dev/null
+++ b/extensions/amp-render/1.0/storybook/Basic.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Render} from '../component';
+import {withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'Render',
+  component: Render,
+  decorators: [withKnobs],
+};
+
+export const _default = () => {
+  return (
+    <Render
+      src={'http://example.com'}
+      getJson={() => Promise.resolve({name: 'George'})}
+      render={(data) => `Hi ${data.name}!`}
+    ></Render>
+  );
+};
+
+export const defaultRenderAndGetJson = () => {
+  return <Render src={'/examples/amp-render-data.json'}></Render>;
+};
diff --git a/extensions/amp-render/1.0/test/test-amp-render.js b/extensions/amp-render/1.0/test/test-amp-render.js
new file mode 100644
index 0000000000000..b6a2ff93dfbac
--- /dev/null
+++ b/extensions/amp-render/1.0/test/test-amp-render.js
@@ -0,0 +1,589 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import '../../../amp-bind/0.1/amp-bind';
+import '../../../amp-mustache/0.2/amp-mustache';
+import '../../../amp-script/0.1/amp-script';
+import '../amp-render';
+import * as BatchedJsonModule from '../../../../src/batched-json';
+import {ActionInvocation} from '../../../../src/service/action-impl';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
+import {Services} from '../../../../src/services';
+import {htmlFor} from '../../../../src/static-template';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor} from '../../../../testing/test-helper';
+import {whenUpgradedToCustomElement} from '../../../../src/dom';
+
+describes.realWin(
+  'amp-render-v1.0',
+  {
+    amp: {
+      extensions: [
+        'amp-mustache:0.2',
+        'amp-bind:0.1',
+        'amp-render:1.0',
+        'amp-script:0.1',
+      ],
+    },
+  },
+  (env) => {
+    let win, doc, html, element;
+
+    async function waitRendered() {
+      await whenUpgradedToCustomElement(element);
+      await element.buildInternal();
+      await waitFor(() => {
+        // The rendered container inserts a <div> element.
+        const div = element.querySelector('div');
+        return div && div.textContent;
+      }, 'wrapper div rendered');
+      return element.querySelector('div');
+    }
+
+    async function waitForText(el, txt) {
+      const hasText = () => el.querySelector('div').textContent === txt;
+      await waitFor(hasText, 'element text updated');
+    }
+
+    async function getRenderedData() {
+      const wrapper = await waitRendered();
+      return wrapper.textContent;
+    }
+
+    function invocation(method, args = {}) {
+      const source = null;
+      const caller = null;
+      const event = null;
+      const trust = ActionTrust.DEFAULT;
+      return new ActionInvocation(
+        element,
+        method,
+        args,
+        source,
+        caller,
+        event,
+        trust
+      );
+    }
+
+    beforeEach(async function () {
+      win = env.win;
+      doc = win.document;
+      html = htmlFor(doc);
+      toggleExperiment(win, 'amp-render', true, true);
+    });
+
+    it('renders from amp-state', async () => {
+      const ampState = html`
+        <amp-state id="theFood">
+          <script type="application/json">
+            {
+              "name": "Bill"
+            }
+          </script>
+        </amp-state>
+      `;
+      doc.body.appendChild(ampState);
+
+      element = html`
+        <amp-render
+          src="amp-state:theFood"
+          width="auto"
+          height="140"
+          layout="fixed-height"
+        >
+          <template type="amp-mustache"><p>Hello {{name}}</p></template>
+        </amp-render>
+      `;
+      doc.body.appendChild(element);
+
+      await whenUpgradedToCustomElement(ampState);
+      await ampState.buildInternal();
+
+      const text = await getRenderedData();
+      expect(text).to.equal('Hello Bill');
+    });
+
+    it('renders json from src', async () => {
+      const fetchStub = env.sandbox.stub(
+        BatchedJsonModule,
+        'batchFetchJsonFor'
+      );
+
+      fetchStub.resolves({name: 'Joe'});
+
+      element = html`
+        <amp-render
+          src="https://example.com/data.json"
+          width="auto"
+          height="140"
+          layout="fixed-height"
+        >
+          <template type="amp-mustache"><p>Hello {{name}}</p></template>
+        </amp-render>
+      `;
+      doc.body.appendChild(element);
+
+      const text = await getRenderedData();
+      expect(text).to.equal('Hello Joe');
+      expect(fetchStub).to.have.been.calledOnce;
+    });
+
+    it('renders from amp-script', async () => {
+      const ampScript = html`
+        <amp-script id="dataFunctions" script="local-script" nodom></amp-script>
+      `;
+      const fetchScript = html`
+        <script id="local-script" type="text/plain" target="amp-script">
+          function getRemoteData() {
+            return fetch('https://example.com/data.json')
+                .then((resp) => resp.json());
+          }
+          exportFunction('getRemoteData', getRemoteData);
+        </script>
+      `;
+
+      element = html`
+        <amp-render
+          src="amp-script:dataFunctions.getRemoteData"
+          width="auto"
+          height="200"
+          layout="fixed-height"
+        >
+          <template type="amp-mustache"><p>Hello {{name}}</p></template>
+        </amp-render>
+      `;
+      doc.body.appendChild(fetchScript);
+      doc.body.appendChild(ampScript);
+      doc.body.appendChild(element);
+
+      const impl = {
+        callFunction: env.sandbox.stub(),
+      };
+      impl.callFunction.resolves({name: 'Joe'});
+      env.sandbox.stub(ampScript, 'getImpl').resolves(impl);
+
+      const text = await getRenderedData();
+      expect(text).to.equal('Hello Joe');
+    });
+
+    it('fails gracefully when src is omitted', async () => {
+      element = html`
+        <amp-render width="auto" height="140" layout="fixed-height">
+          <template type="amp-mustache"><p>Hello {{name}}</p></template>
+        </amp-render>
+      `;
+      doc.body.appendChild(element);
+
+      const text = await getRenderedData();
+      expect(text).to.equal('Hello ');
+    });
+
+    it('re-fetches json on refresh action', async () => {
+      const fetchJsonStub = env.sandbox.stub(
+        BatchedJsonModule,
+        'batchFetchJsonFor'
+      );
+      fetchJsonStub.resolves({name: 'Joe'});
+
+      element = html`
+        <amp-render
+          id="my-amp-render"
+          src="https://example.com/data.json"
+          width="auto"
+          height="140"
+          layout="fixed-height"
+        >
+          <template type="amp-mustache"><p>Hello {{name}}</p></template>
+        </amp-render>
+      `;
+      doc.body.appendChild(element);
+
+      await getRenderedData();
+      let options = fetchJsonStub.getCall(0).args[2];
+      // verify initial call to `batchFetchJsonFor`
+      expect(options.refresh).to.be.false;
+      expect(options.xssiPrefix).to.be.null;
+      expect(options.expr).to.equal('.');
+
+      element.enqueAction(invocation('refresh'));
+      await getRenderedData();
+      expect(fetchJsonStub).to.have.been.calledTwice;
+      options = fetchJsonStub.getCall(1).args[2];
+      // verify subsequent call to `batchFetchJsonFor`
+      expect(options.refresh).to.be.true;
+      expect(options.xssiPrefix).to.be.null;
+      expect(options.expr).to.equal('.');
+    });
+
+    it('should not re-fetch when src=amp-state', async () => {
+      const fetchJsonStub = env.sandbox.stub(
+        BatchedJsonModule,
+        'batchFetchJsonFor'
+      );
+
+      const bindStub = env.sandbox
+        .stub(Services, 'bindForDocOrNull')
+        .callThrough();
+
+      const ampState = html`
+        <amp-state id="theFood">
+          <script type="application/json">
+            {
+              "name": "Bill"
+            }
+          </script>
+        </amp-state>
+      `;
+      doc.body.appendChild(ampState);
+
+      element = html`
+        <amp-render
+          src="amp-state:theFood"
+          width="auto"
+          height="140"
+          layout="fixed-height"
+        >
+          <template type="amp-mustache"><p>Hello {{name}}</p></template>
+        </amp-render>
+      `;
+      doc.body.appendChild(element);
+
+      await getRenderedData();
+      expect(bindStub).to.have.been.calledOnce;
+      expect(fetchJsonStub).not.to.have.been.called;
+
+      element.enqueAction(invocation('refresh'));
+      await getRenderedData();
+      expect(bindStub).to.have.been.calledOnce;
+      expect(fetchJsonStub).not.to.have.been.called;
+    });
+
+    it('should not re-fetch when src=amp-script', async () => {
+      const fetchJsonStub = env.sandbox.stub(
+        BatchedJsonModule,
+        'batchFetchJsonFor'
+      );
+
+      const ampScript = html`
+        <amp-script id="dataFunctions" script="local-script" nodom></amp-script>
+      `;
+      const fetchScript = html`
+        <script id="local-script" type="text/plain" target="amp-script">
+          function getRemoteData() {
+            return fetch('https://example.com/data.json')
+                .then((resp) => resp.json());
+          }
+          exportFunction('getRemoteData', getRemoteData);
+        </script>
+      `;
+
+      element = html`
+        <amp-render
+          src="amp-script:dataFunctions.getRemoteData"
+          width="auto"
+          height="200"
+          layout="fixed-height"
+        >
+          <template type="amp-mustache"><p>Hello {{name}}</p></template>
+        </amp-render>
+      `;
+      doc.body.appendChild(fetchScript);
+      doc.body.appendChild(ampScript);
+      doc.body.appendChild(element);
+
+      const impl = {
+        callFunction: env.sandbox.stub(),
+      };
+      impl.callFunction.resolves({name: 'Joe'});
+      env.sandbox.stub(ampScript, 'getImpl').resolves(impl);
+
+      await getRenderedData();
+      expect(ampScript.getImpl).to.have.been.calledOnce;
+      expect(fetchJsonStub).not.to.have.been.called;
+
+      element.enqueAction(invocation('refresh'));
+      await getRenderedData();
+      expect(ampScript.getImpl).to.have.been.calledOnce;
+      expect(fetchJsonStub).not.to.have.been.called;
+    });
+
+    it('should use the specified xssi-prefix and key attributes', async () => {
+      const json = {
+        fullName: {
+          firstName: 'Joe',
+          lastName: 'Biden',
+        },
+      };
+
+      const fetchJsonStub = env.sandbox
+        .stub(BatchedJsonModule, 'batchFetchJsonFor')
+        .callThrough();
+
+      env.sandbox.stub(Services, 'batchedXhrFor').returns({
+        fetchJson: () => Promise.resolve(json),
+      });
+
+      env.sandbox.stub(Services, 'xhrFor').returns({
+        fetch: () => Promise.resolve(json),
+        xssiJson: () => Promise.resolve(json),
+      });
+
+      element = html`
+        <amp-render
+          xssi-prefix=")]}"
+          key="fullName"
+          src="https://example.com/data.json"
+          width="auto"
+          height="140"
+          layout="fixed-height"
+        >
+          <template type="amp-mustache">{{lastName}}, {{firstName}}</template>
+        </amp-render>
+      `;
+      doc.body.appendChild(element);
+
+      const text = await getRenderedData();
+      expect(text).to.equal('Biden, Joe');
+      const options = fetchJsonStub.getCall(0).args[2];
+      expect(options.xssiPrefix).to.equal(')]}');
+      expect(options.expr).to.equal('fullName');
+      expect(options.refresh).to.be.false;
+    });
+
+    it('should perform url replacement in src', async () => {
+      const json = {
+        fullName: {
+          firstName: 'Joe',
+          lastName: 'Biden',
+        },
+      };
+
+      const fetchJsonStub = env.sandbox
+        .stub(BatchedJsonModule, 'batchFetchJsonFor')
+        .callThrough();
+
+      env.sandbox.stub(Services, 'batchedXhrFor').returns({
+        fetchJson: () => Promise.resolve(json),
+      });
+
+      env.sandbox.stub(Services, 'xhrFor').returns({
+        fetch: () => Promise.resolve(json),
+        xssiJson: () => Promise.resolve(json),
+      });
+
+      element = html`
+        <amp-render
+          xssi-prefix=")]}"
+          key="fullName"
+          src="https://example.com/data.json?RANDOM"
+          width="auto"
+          height="140"
+          layout="fixed-height"
+        >
+          <template type="amp-mustache">{{lastName}}, {{firstName}}</template>
+        </amp-render>
+      `;
+      doc.body.appendChild(element);
+
+      const text = await getRenderedData();
+      expect(text).to.equal('Biden, Joe');
+      const options = fetchJsonStub.getCall(0).args[2];
+      expect(options.urlReplacement).to.equal(
+        BatchedJsonModule.UrlReplacementPolicy.ALL
+      );
+    });
+
+    it('should render updates when src mutates', async () => {
+      const fetchJsonStub = env.sandbox.stub(
+        BatchedJsonModule,
+        'batchFetchJsonFor'
+      );
+      fetchJsonStub.resolves({
+        firstName: 'Joe',
+        lastName: 'Biden',
+      });
+
+      const ampState = html`
+        <amp-state id="president">
+          <script type="application/json">
+            {
+              "firstName": "Bill",
+              "lastName": "Clinton"
+            }
+          </script>
+        </amp-state>
+      `;
+      doc.body.appendChild(ampState);
+
+      element = html`
+        <amp-render
+          src="amp-state:president"
+          [src]="srcUrl"
+          width="auto"
+          height="100"
+          layout="fixed-height"
+        >
+          <template type="amp-mustache">{{lastName}}, {{firstName}}</template>
+        </amp-render>
+      `;
+      doc.body.appendChild(element);
+
+      await whenUpgradedToCustomElement(ampState);
+      await ampState.buildInternal();
+
+      const text = await getRenderedData();
+      expect(text).to.equal('Clinton, Bill');
+      expect(fetchJsonStub).not.to.have.been.called;
+
+      element.setAttribute('src', 'https://example.com/data.json');
+
+      await waitForText(element, 'Biden, Joe');
+      expect(fetchJsonStub).to.have.been.called;
+    });
+
+    it('should add aria-live="polite" attribute', async () => {
+      const ampState = html`
+        <amp-state id="theFood">
+          <script type="application/json">
+            {
+              "name": "Bill"
+            }
+          </script>
+        </amp-state>
+      `;
+      doc.body.appendChild(ampState);
+
+      element = html`
+        <amp-render
+          src="amp-state:theFood"
+          width="auto"
+          height="140"
+          layout="fixed-height"
+        >
+          <template type="amp-mustache"><p>Hello {{name}}</p></template>
+        </amp-render>
+      `;
+      doc.body.appendChild(element);
+
+      await whenUpgradedToCustomElement(ampState);
+      await ampState.buildInternal();
+
+      await getRenderedData();
+      expect(element.getAttribute('aria-live')).to.equal('polite');
+    });
+
+    it('should not add aria-live="polite" attribute if one already exists', async () => {
+      const ampState = html`
+        <amp-state id="theFood">
+          <script type="application/json">
+            {
+              "name": "Bill"
+            }
+          </script>
+        </amp-state>
+      `;
+      doc.body.appendChild(ampState);
+
+      element = html`
+        <amp-render
+          src="amp-state:theFood"
+          width="auto"
+          height="140"
+          layout="fixed-height"
+          aria-live="assertive"
+        >
+          <template type="amp-mustache"><p>Hello {{name}}</p></template>
+        </amp-render>
+      `;
+      doc.body.appendChild(element);
+
+      await whenUpgradedToCustomElement(ampState);
+      await ampState.buildInternal();
+
+      await getRenderedData();
+      expect(element.getAttribute('aria-live')).to.equal('assertive');
+    });
+
+    it('should render a placeholder', async () => {
+      const fetchStub = env.sandbox.stub(
+        BatchedJsonModule,
+        'batchFetchJsonFor'
+      );
+
+      element = html`
+        <amp-render
+          src="https://example.com/data.json"
+          width="auto"
+          height="140"
+          layout="fixed-height"
+        >
+          <template type="amp-mustache"><p>Hello {{name}}</p></template>
+          <p placeholder>Loading data</p>
+          <p fallback>Failed</p>
+        </amp-render>
+      `;
+      doc.body.appendChild(element);
+
+      await waitFor(() => {
+        const div = element.querySelector(`[placeholder]`);
+        return div && div.textContent;
+      }, 'placeholder rendered');
+      const placeholder = element.querySelector(`[placeholder]`);
+
+      expect(placeholder.textContent).to.equal('Loading data');
+
+      await element.buildInternal();
+      fetchStub.resolves({name: 'Joe'});
+      await waitForText(element, 'Hello Joe');
+      expect(fetchStub).to.be.calledOnce;
+    });
+
+    it('should render a fallback', async () => {
+      const fetchStub = env.sandbox.stub(
+        BatchedJsonModule,
+        'batchFetchJsonFor'
+      );
+
+      element = html`
+        <amp-render
+          src="https://example.com/data.json"
+          width="auto"
+          height="140"
+          layout="fixed-height"
+        >
+          <template type="amp-mustache"><p>Hello {{name}}</p></template>
+          <p placeholder>Loading data</p>
+          <p fallback>Failed</p>
+        </amp-render>
+      `;
+      doc.body.appendChild(element);
+
+      await whenUpgradedToCustomElement(element);
+
+      fetchStub.rejects();
+      await element.buildInternal();
+
+      await waitFor(() => {
+        const div = element.querySelector(`[fallback]`);
+        return div && div.textContent;
+      }, 'fallback rendered');
+      const fallback = element.querySelector(`[fallback]`);
+
+      expect(fallback.textContent).to.equal('Failed');
+    });
+  }
+);
diff --git a/extensions/amp-render/1.0/test/test-component.js b/extensions/amp-render/1.0/test/test-component.js
new file mode 100644
index 0000000000000..593a6996d9e34
--- /dev/null
+++ b/extensions/amp-render/1.0/test/test-component.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Render} from '../component';
+import {macroTask} from '../../../../testing/yield';
+import {mount} from 'enzyme';
+
+describes.sandboxed('Render 1.0 preact component', {}, () => {
+  it('should render', async () => {
+    const wrapper = mount(
+      <Render
+        src={'http://example.com'}
+        getJson={() => Promise.resolve({name: 'George'})}
+        render={(data) => `Hi ${data.name}`}
+      ></Render>
+    );
+
+    // Since getJson method retuns a promise, we need to wait for
+    // the promise to resolve.
+    await macroTask();
+
+    expect(wrapper.getDOMNode().tagName).to.equal('DIV');
+    expect(wrapper.getDOMNode().innerHTML).to.equal('Hi George');
+  });
+
+  it('should add default aria-live="polite" attribute', async () => {
+    const wrapper = mount(
+      <Render
+        src={'http://example.com'}
+        getJson={() => Promise.resolve({name: 'George'})}
+        render={(data) => `Hi ${data.name}`}
+      ></Render>
+    );
+
+    // Since getJson method retuns a promise, we need to wait for
+    // the promise to resolve.
+    await macroTask();
+
+    expect(wrapper.getDOMNode().getAttribute('aria-live')).to.equal('polite');
+  });
+
+  it('should add specified aria-live attribute', async () => {
+    const wrapper = mount(
+      <Render
+        src={'http://example.com'}
+        getJson={() => Promise.resolve({name: 'George'})}
+        render={(data) => `Hi ${data.name}`}
+        ariaLiveValue={'assertive'}
+      ></Render>
+    );
+
+    // Since getJson method retuns a promise, we need to wait for
+    // the promise to resolve.
+    await macroTask();
+
+    expect(wrapper.getDOMNode().getAttribute('aria-live')).to.equal(
+      'assertive'
+    );
+  });
+});
diff --git a/extensions/amp-render/1.0/test/validator-amp-render.html b/extensions/amp-render/1.0/test/validator-amp-render.html
new file mode 100644
index 0000000000000..6415c6dfd16df
--- /dev/null
+++ b/extensions/amp-render/1.0/test/validator-amp-render.html
@@ -0,0 +1,139 @@
+<!--
+  Copyright 2021 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.
+-->
+<!DOCTYPE html>
+<html ⚡>
+  <!-- prettier-ignore -->
+  <head>
+    <meta charset="utf-8">
+    <title>amp-render example</title>
+    <link rel="canonical" href="/examples/amp-render.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+      amp-render {
+        color: red;
+      }
+    </style>
+    <script async custom-element="amp-render" src="https://cdn.ampproject.org/v0/amp-render-1.0.js"></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+  <body>
+    <!-- Valid: amp-render with only src attribute -->
+    <amp-render
+      width="10"
+      height="10"
+      src="amp-state:source"
+    >
+    </amp-render>
+
+    <!-- Valid: amp-render with only [src] attribute -->
+    <amp-render width="10" height="10" [src]="srcUrl"> </amp-render>
+
+    <!-- Valid: amp-render with relative URL as src attribute -->
+    <amp-render width="10" height="10" src="/path/to/data.json"> </amp-render>
+
+    <!-- Valid: amp-render with both src and [src] attributes -->
+    <amp-render
+      width="10"
+      height="10"
+      src="https://data.com/articles.json?ref=CANONICAL_URL"
+      [src]="foo.bar"
+    >
+    </amp-render>
+
+    <!-- Valid: amp-render with binding="refresh" attribute -->
+    <amp-render
+      width="10"
+      height="10"
+      src="https://data.com/articles.json?ref=CANONICAL_URL"
+      binding="refresh"
+    >
+    </amp-render>
+
+    <!-- Valid: amp-render with binding="no" attribute -->
+    <amp-render
+      width="10"
+      height="10"
+      src="https://data.com/articles.json?ref=CANONICAL_URL"
+      binding="no"
+    >
+    </amp-render>
+
+    <!-- Valid: amp-render with binding="always" attribute -->
+    <amp-render
+      width="10"
+      height="10"
+      src="https://data.com/articles.json?ref=CANONICAL_URL"
+      binding="always"
+    >
+    </amp-render>
+
+    <!-- Valid: amp-render with credentials="include" -->
+    <amp-render
+      width="10"
+      height="10"
+      src="amp-script:scriptFn.dataFn"
+      credentials="include"
+    >
+    </amp-render>
+
+    <!-- Valid: amp-render with credentials="omit" -->
+    <amp-render
+      width="10"
+      height="10"
+      src="https://data.com/articles.json?ref=CANONICAL_URL"
+      credentials="omit"
+    >
+    </amp-render>
+
+    <!-- Valid: amp-render with xssi-prefix attribute -->
+    <amp-render
+      width="10"
+      height="10"
+      src="https://data.com/articles.json?ref=CANONICAL_URL"
+      xssi-prefix="({["
+    >
+    </amp-render>
+
+    <!-- Valid: amp-render with key attribute -->
+    <amp-render
+      width="10"
+      height="10"
+      src="https://data.com/articles.json?ref=CANONICAL_URL"
+      key="name"
+    >
+    </amp-render>
+
+    <!-- Invalid: missing at least src, [src] or data-amp-bind-src. -->
+    <amp-render width="10" height="10"> </amp-render>
+
+    <!-- Invalid: container layout -->
+    <amp-render
+      layout="container"
+      src="https://data.com/articles.json?ref=CANONICAL_URL"
+    >
+    </amp-render>
+
+    <!-- Invalid: invalid binding attribute -->
+    <amp-render
+      width="10"
+      height="10"
+      src="https://data.com/articles.json?ref=CANONICAL_URL"
+      binding="foobar"
+    >
+    </amp-render>
+  </body>
+</html>
diff --git a/extensions/amp-render/1.0/test/validator-amp-render.out b/extensions/amp-render/1.0/test/validator-amp-render.out
new file mode 100644
index 0000000000000..ee4e3e81b6308
--- /dev/null
+++ b/extensions/amp-render/1.0/test/validator-amp-render.out
@@ -0,0 +1,146 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!DOCTYPE html>
+|  <html ⚡>
+|    <!-- prettier-ignore -->
+|    <head>
+|      <meta charset="utf-8">
+|      <title>amp-render example</title>
+|      <link rel="canonical" href="/examples/amp-render.html">
+|      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|      <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>
+|        amp-render {
+|          color: red;
+|        }
+|      </style>
+|      <script async custom-element="amp-render" src="https://cdn.ampproject.org/v0/amp-render-1.0.js"></script>
+|      <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    </head>
+|    <body>
+|      <!-- Valid: amp-render with only src attribute -->
+|      <amp-render
+|        width="10"
+|        height="10"
+|        src="amp-state:source"
+|      >
+|      </amp-render>
+|
+|      <!-- Valid: amp-render with only [src] attribute -->
+|      <amp-render width="10" height="10" [src]="srcUrl"> </amp-render>
+|
+|      <!-- Valid: amp-render with relative URL as src attribute -->
+|      <amp-render width="10" height="10" src="/path/to/data.json"> </amp-render>
+|
+|      <!-- Valid: amp-render with both src and [src] attributes -->
+|      <amp-render
+|        width="10"
+|        height="10"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        [src]="foo.bar"
+|      >
+|      </amp-render>
+|
+|      <!-- Valid: amp-render with binding="refresh" attribute -->
+|      <amp-render
+|        width="10"
+|        height="10"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        binding="refresh"
+|      >
+|      </amp-render>
+|
+|      <!-- Valid: amp-render with binding="no" attribute -->
+|      <amp-render
+|        width="10"
+|        height="10"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        binding="no"
+|      >
+|      </amp-render>
+|
+|      <!-- Valid: amp-render with binding="always" attribute -->
+|      <amp-render
+|        width="10"
+|        height="10"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        binding="always"
+|      >
+|      </amp-render>
+|
+|      <!-- Valid: amp-render with credentials="include" -->
+|      <amp-render
+|        width="10"
+|        height="10"
+|        src="amp-script:scriptFn.dataFn"
+|        credentials="include"
+|      >
+|      </amp-render>
+|
+|      <!-- Valid: amp-render with credentials="omit" -->
+|      <amp-render
+|        width="10"
+|        height="10"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        credentials="omit"
+|      >
+|      </amp-render>
+|
+|      <!-- Valid: amp-render with xssi-prefix attribute -->
+|      <amp-render
+|        width="10"
+|        height="10"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        xssi-prefix="({["
+|      >
+|      </amp-render>
+|
+|      <!-- Valid: amp-render with key attribute -->
+|      <amp-render
+|        width="10"
+|        height="10"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        key="name"
+|      >
+|      </amp-render>
+|
+|      <!-- Invalid: missing at least src, [src] or data-amp-bind-src. -->
+|      <amp-render width="10" height="10"> </amp-render>
+>>     ^~~~~~~~~
+amp-render/1.0/test/validator-amp-render.html:121:4 The tag 'amp-render' is missing a mandatory attribute - pick at least one of ['src','[src]','data-amp-bind-src']. (see https://amp.dev/documentation/components/amp-render/)
+|
+|      <!-- Invalid: container layout -->
+|      <amp-render
+>>     ^~~~~~~~~
+amp-render/1.0/test/validator-amp-render.html:124:4 The specified layout 'CONTAINER' is not supported by tag 'amp-render'. (see https://amp.dev/documentation/components/amp-render/)
+|        layout="container"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|      >
+|      </amp-render>
+|
+|      <!-- Invalid: invalid binding attribute -->
+|      <amp-render
+>>     ^~~~~~~~~
+amp-render/1.0/test/validator-amp-render.html:131:4 The attribute 'binding' in tag 'amp-render' is set to the invalid value 'foobar'. (see https://amp.dev/documentation/components/amp-render/)
+|        width="10"
+|        height="10"
+|        src="https://data.com/articles.json?ref=CANONICAL_URL"
+|        binding="foobar"
+|      >
+|      </amp-render>
+|    </body>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-render/OWNERS b/extensions/amp-render/OWNERS
new file mode 100644
index 0000000000000..77a55ee52b285
--- /dev/null
+++ b/extensions/amp-render/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'ampproject/wg-components'}],
+    },
+  ],
+}
diff --git a/extensions/amp-render/amp-render.md b/extensions/amp-render/amp-render.md
new file mode 100644
index 0000000000000..ed8fd7e08dd7a
--- /dev/null
+++ b/extensions/amp-render/amp-render.md
@@ -0,0 +1,233 @@
+---
+$category@: dynamic-content
+formats:
+  - websites
+teaser:
+  text: Renders remote or inline data using a template.
+---
+
+<!--
+Copyright 2021 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.
+-->
+
+# amp-render
+
+<!--
+  If the component is relevant for more than one format and operates differently between these
+  formats, include and filter multiple content blocks and code samples.
+-->
+
+## Usage
+
+The `amp-render` component renders content in a specified template. It can fetch content from a CORS JSON endpoint or inline from `amp-state` or `amp-script`.
+
+[tip type="important"]
+Your endpoint must implement the requirements specified in the [CORS Requests in AMP](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests) spec.
+[/tip]
+
+You can specify a template in one of two ways:
+
+-   a `template` attribute that references an ID of an existing templating element.
+
+```html
+<template id="my-template" type="amp-mustache">
+  Your personal offer: ${{price}}
+</template>
+<amp-render template="my-template" src="https://example.com/data.json">
+</amp-render>
+```
+
+-   a templating element nested directly inside the `amp-render` element.
+
+```html
+<amp-render src="https://example.com/data.json">
+  <template type="amp-mustache">
+    Your personal offer: ${{price}}
+  </template>
+</amp-render>
+```
+
+For more details on templates, see [AMP HTML Templates](../../docs/spec/amp-html-templates.md).
+
+<!--
+  * [Read more about filtering sections](https://amp.dev/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/?format=websites#filtering-sections)
+  * [Read more about executable code samples](https://amp.dev/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/?format=websites#preview-code-samples)
+ -->
+
+### XHR batching
+
+AMP batches XMLHttpRequests (XHRs) to JSON endpoints. This lets you use a single JSON request as a data source for multiple elements on an AMP page. For example, if your `<amp-render>` makes an XHR to an endpoint, while the XHR is in flight, all subsequent XHRs to the same endpoint won't trigger and will instead return the results from the first XHR.
+
+### Placeholder and fallback
+
+`<amp-render>` supports an optional placeholder and/or fallback.
+
+-   A _placeholder_ is a child element with the `placeholder` attribute. This element is shown until the `<amp-render>` loads successfully. If a fallback is also provided, the placeholder is hidden when the `<amp-render>` fails to load.
+-   A _fallback_ is a child element with the `fallback` attribute. This element is shown if the `<amp-render>` fails to load.
+
+Learn more in [Placeholders & Fallbacks](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders). Note that a child element cannot be both a placeholder and a fallback.
+
+```html
+<amp-render src="https://example.com/data.json">
+  <div placeholder>Loading ...</div>
+  <div fallback>Failed to load data.</div>
+</amp-render>
+```
+
+### Refreshing data
+
+The `<amp-render>` element exposes a `refresh` action that other elements can reference in `on="tap:..."` attributes.
+
+```html
+<button on="tap:myList.refresh">Refresh List</button>
+<amp-render id="myList" src="https://example.com/data.json">
+  <template type="amp-mustache">
+    <div>{{title}}</div>
+  </template>
+</amp-render>
+```
+
+### Substitutions
+
+`<amp-render>` allows all standard URL variable substitutions.
+See the [Substitutions Guide](../../docs/spec/amp-var-substitutions.md) for more info.
+
+For example:
+
+```html
+<amp-render src="https://foo.com/list.json?RANDOM"></amp-render>
+```
+
+may make a request to something like `https://foo.com/list.json?0.8390278471201` where the RANDOM value is randomly generated upon each impression.
+
+## Attributes
+
+### `src` (required)
+
+The URL of the remote endpoint that returns the JSON that will be rendered
+within this `<amp-render>`. There are three valid protocols for the `src` attribute.
+
+1. **https**: This must refer to a CORS HTTP service. Insecure HTTP is not supported.
+2. **amp-state**: For initializing from `<amp-state>` data. See [Initialization from `<amp-state>`](#initialization-from-amp-state) for more details.
+3. **amp-script**: For using `<amp-script>` functions as the data source. See [Using `<amp-script>` as a data source](#using-amp-script-as-a-data-source) for more details.
+
+[tip type="important"]
+Your endpoint must implement the requirements specified in the [CORS Requests in AMP](https://www.ampproject.org/docs/fundamentals/amp-cors-requests) spec.
+[/tip]
+
+The `src` attribute may be omitted if the `[src]` attribute exists. `[src]` supports URL and non-URL expression values.
+
+### `credentials`
+
+Defines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/).
+
+-   Supported values: `omit`, `include`
+-   Default: `omit`
+
+To send credentials, pass the value of `include`. If this value is set, the response must follow the [AMP CORS security guidelines](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/#cors-security-in-amp).
+
+The example below uses the "include" value in `credentials` to display personalized content:
+
+```html
+<amp-render
+  credentials="include"
+  src="<%host%>/json/product.json?clientId=CLIENT_ID(myCookieId)"
+>
+  <template type="amp-mustache">
+    Your personal offer: ${{price}}
+  </template>
+</amp-render>
+```
+
+### `xssi-prefix`
+
+Causes `<amp-render>` to strip a prefix from the fetched JSON before parsing. This can be useful for APIs that include [security prefixes](http://patorjk.com/blog/2013/02/05/crafty-tricks-for-avoiding-xssi/) like `)]}` to help prevent cross site scripting attacks.
+
+For example, let's say we had an API that returned this response:
+
+```json
+)]}{ "items": ["value"] }
+```
+
+We could instruct `amp-render` to remove the security prefix like so:
+
+```html
+<amp-render xssi-prefix=")]}" src="https://example.com/data.json"></amp-render>
+```
+
+### `key`
+
+Defines the expression to locate the sub-object to be rendered within the response. For example, let's say we had an API that returned this response:
+
+```json
+{
+  "automobiles": {
+    "cars": {
+      "german": {
+        "make": "BMW",
+        "model": "M3"
+      },
+      "american": {
+        "make": "Tesla",
+        "model": "Model X"
+      }
+    }
+  }
+}
+```
+
+If we just want to display the German cars from the response, we can use the `key` attribute.
+
+```html
+<amp-render src="https://example.com/data.json" key="automobiles.cars.german">
+  <template type="amp-mustache">
+    {{make}} {{model}}
+  </template>
+</amp-render>
+```
+
+### `binding`
+
+Controls wheather to render on binding evaluations (e.g. `[text]`) in children on pages using `amp-render` and `amp-bind`.
+
+-   `binding="no"`: Never block render **(faster)**.
+-   `binding="refresh"`: Don't block render on initial load **(slower)**.
+
+If `binding` attribute is not provided, default is `refresh`.
+
+### Common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
+
+## Actions
+
+The `<amp-render>` element exposes a `refresh` action that other elements can reference in `on="tap:..."` attributes.
+
+```html
+<button on="tap:myList.refresh">Refresh List</button>
+<amp-render id="myList" src="https://foo.com/data.json">
+  <template type="amp-mustache">
+    <div>{{title}}</div>
+  </template>
+</amp-render>
+```
+
+## Accessibility
+
+For `amp-render` instances that do not have an aria-live attribute, `aria-live="polite"` will be added so any changes to the content are announced by screen readers. To override the addition of `aria-live="polite"`, add `aria-live="off"`.
+
+## Validation
+
+See [amp-render rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-render/validator-amp-render.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-render/validator-amp-render.protoascii b/extensions/amp-render/validator-amp-render.protoascii
new file mode 100644
index 0000000000000..7fe8e85366050
--- /dev/null
+++ b/extensions/amp-render/validator-amp-render.protoascii
@@ -0,0 +1,68 @@
+#
+# Copyright 2021 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.
+#
+
+tags: {  # amp-render
+  html_format: AMP
+  tag_name: "SCRIPT"
+  extension_spec: {
+    name: "amp-render"
+    version: "1.0"
+    version: "latest"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # <amp-render>
+  html_format: AMP
+  tag_name: "AMP-RENDER"
+  requires_extension: "amp-render"
+  attrs: {
+    name: "binding"
+    value: "always"
+    value: "no"
+    value: "refresh"
+  }
+  attrs: { name: "credentials" }
+  attrs: {
+    name: "data-amp-bind-src"
+    mandatory_anyof: "['src','[src]','data-amp-bind-src']"
+  }
+  attrs: { name: "key" }
+  attrs: {
+    name: "src"
+    mandatory_anyof: "['src','[src]','data-amp-bind-src']"
+    value_url: {
+      protocol: "amp-script"
+      protocol: "amp-state"
+      protocol: "https"
+    }
+    disallowed_value_regex: "__amp_source_origin"
+  }
+  attrs: { name: "xssi-prefix" }
+  attrs: {
+    name: "[src]"
+    mandatory_anyof: "['src','[src]','data-amp-bind-src']"
+  }
+  attr_lists: "extended-amp-global"
+  spec_url: "https://amp.dev/documentation/components/amp-render/"
+  amp_layout: {
+    supported_layouts: FILL
+    supported_layouts: FIXED
+    supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
+    supported_layouts: NODISPLAY
+    supported_layouts: RESPONSIVE
+  }
+}
diff --git a/extensions/amp-resize-observer-polyfill/0.1/amp-resize-observer-polyfill.js b/extensions/amp-resize-observer-polyfill/0.1/amp-resize-observer-polyfill.js
new file mode 100644
index 0000000000000..228eed40b30b1
--- /dev/null
+++ b/extensions/amp-resize-observer-polyfill/0.1/amp-resize-observer-polyfill.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {installResizeObserver} from '../../../third_party/resize-observer-polyfill/ResizeObserver.install';
+import {registerServiceBuilder} from '../../../src/service';
+import {upgradePolyfill} from '../../../src/polyfills/stubs/resize-observer-stub';
+
+const TAG = 'amp-resize-observer-polyfill';
+
+/**
+ * @param {!Window} win
+ * @return {!Object}
+ */
+function upgrade(win) {
+  upgradePolyfill(win, () => {
+    installResizeObserver(win);
+  });
+  return {};
+}
+
+/**
+ * Registers the polyfill.
+ * @param {!Window} win
+ */
+export function upgradeResizeObserverPolyfill(win) {
+  registerServiceBuilder(win, TAG, upgrade, /* instantiate */ true);
+}
+
+// eslint-disable-next-line no-unused-vars
+AMP.extension(TAG, '0.1', function (AMP) {
+  upgradeResizeObserverPolyfill(window);
+});
diff --git a/extensions/amp-resize-observer-polyfill/0.1/test/test-amp-resize-observer-polyfill.js b/extensions/amp-resize-observer-polyfill/0.1/test/test-amp-resize-observer-polyfill.js
new file mode 100644
index 0000000000000..630e6b2b8adef
--- /dev/null
+++ b/extensions/amp-resize-observer-polyfill/0.1/test/test-amp-resize-observer-polyfill.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {
+  ResizeObserverStub,
+  installStub,
+} from '../../../../src/polyfills/stubs/resize-observer-stub';
+import {upgradeResizeObserverPolyfill} from '../amp-resize-observer-polyfill';
+
+describes.realWin('amp-resize-observer-polyfill', {amp: false}, (env) => {
+  let win;
+
+  beforeEach(() => {
+    win = env.win;
+    delete win.ResizeObserver;
+    installStub(win);
+  });
+
+  it('should install ResizeObserver polyfill', () => {
+    expect(win.ResizeObserver).to.equal(ResizeObserverStub);
+    upgradeResizeObserverPolyfill(win);
+    expect(win.ResizeObserver).to.exist;
+    expect(win.ResizeObserver).to.not.equal(ResizeObserverStub);
+  });
+});
diff --git a/extensions/amp-riddle-quiz/0.1/amp-riddle-quiz.js b/extensions/amp-riddle-quiz/0.1/amp-riddle-quiz.js
index 0aec1871fbbae..c2cc5e7669790 100644
--- a/extensions/amp-riddle-quiz/0.1/amp-riddle-quiz.js
+++ b/extensions/amp-riddle-quiz/0.1/amp-riddle-quiz.js
@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 import {getData, listen} from './../../../src/event-helper';
-import {isFiniteNumber, isObject} from '../../../src/types';
+import {isFiniteNumber, isObject} from '../../../src/core/types';
 import {isLayoutSizeDefined} from '../../../src/layout';
+
 import {removeElement} from '../../../src/dom';
 import {userAssert} from '../../../src/log';
 
diff --git a/extensions/amp-riddle-quiz/0.1/test/test-amp-riddle-quiz.js b/extensions/amp-riddle-quiz/0.1/test/test-amp-riddle-quiz.js
index bb4d017ea0a64..0c986b5c15d6d 100644
--- a/extensions/amp-riddle-quiz/0.1/test/test-amp-riddle-quiz.js
+++ b/extensions/amp-riddle-quiz/0.1/test/test-amp-riddle-quiz.js
@@ -33,7 +33,7 @@ describes.realWin(
     });
 
     it('should have iframe when built', () => {
-      element.build().then(() => {
+      element.buildInternal().then(() => {
         const iframe = element.querySelector('iframe');
         expect(iframe).to.not.be.null;
       });
diff --git a/extensions/amp-riddle-quiz/OWNERS b/extensions/amp-riddle-quiz/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-riddle-quiz/OWNERS
+++ b/extensions/amp-riddle-quiz/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-riddle-quiz/amp-riddle-quiz.md b/extensions/amp-riddle-quiz/amp-riddle-quiz.md
index 45e1fe7bc7788..3f617d8b250f1 100644
--- a/extensions/amp-riddle-quiz/amp-riddle-quiz.md
+++ b/extensions/amp-riddle-quiz/amp-riddle-quiz.md
@@ -55,4 +55,4 @@ This component embeds [Riddle](https://www.riddle.com/) content (e.g., quiz, lis
 
 ## Validation
 
-See [amp-riddle-quiz rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-riddle-quiz/validator-amp-riddle-quiz.protoascii) in the AMP validator specification.
+See [amp-riddle-quiz rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-riddle-quiz/validator-amp-riddle-quiz.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-riddle-quiz/validator-amp-riddle-quiz.protoascii b/extensions/amp-riddle-quiz/validator-amp-riddle-quiz.protoascii
index 1e495c0a2b616..0da6fde737c81 100644
--- a/extensions/amp-riddle-quiz/validator-amp-riddle-quiz.protoascii
+++ b/extensions/amp-riddle-quiz/validator-amp-riddle-quiz.protoascii
@@ -37,5 +37,5 @@ tags: {  # <amp-riddle-quiz>
   amp_layout: {
       supported_layouts: RESPONSIVE
   }
-  spec_url: "https://amp.dev/documentation/components/amp-riddle-quiz"
+  spec_url: "https://amp.dev/documentation/components/amp-riddle-quiz/"
 }
diff --git a/extensions/amp-script/0.1/amp-script.js b/extensions/amp-script/0.1/amp-script.js
index ed7cf30c2875e..fa7e0c196a37a 100644
--- a/extensions/amp-script/0.1/amp-script.js
+++ b/extensions/amp-script/0.1/amp-script.js
@@ -14,27 +14,37 @@
  * limitations under the License.
  */
 
-import * as WorkerDOM from '@ampproject/worker-dom/dist/amp/main.mjs';
+import * as WorkerDOM from '@ampproject/worker-dom/dist/amp-production/main.mjs';
 import {CSS} from '../../../build/amp-script-0.1.css';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Layout, isLayoutSizeDefined} from '../../../src/layout';
 import {Purifier} from '../../../src/purifier/purifier';
 import {Services} from '../../../src/services';
 import {UserActivationTracker} from './user-activation-tracker';
-import {calculateExtensionScriptUrl} from '../../../src/service/extension-location';
-import {cancellation} from '../../../src/error';
+import {calculateExtensionScriptUrl} from '../../../src/service/extension-script';
+import {cancellation} from '../../../src/error-reporting';
 import {dev, user, userAssert} from '../../../src/log';
-import {dict, map} from '../../../src/utils/object';
+import {dict, map} from '../../../src/core/types/object';
 import {getElementServiceForDoc} from '../../../src/element-service';
 import {getMode} from '../../../src/mode';
 import {getService, registerServiceBuilder} from '../../../src/service';
 import {rewriteAttributeValue} from '../../../src/url-rewrite';
-import {startsWith} from '../../../src/string';
-import {tryParseJson} from '../../../src/json';
-import {utf8Encode} from '../../../src/utils/bytes';
+import {tryParseJson} from '../../../src/core/types/object/json';
+import {urls} from '../../../src/config';
+import {utf8Encode} from '../../../src/core/types/string/bytes';
 
 /** @const {string} */
 const TAG = 'amp-script';
 
+/**
+ * @typedef {{
+ *   terminate: function():void,
+ *   callFunction: function(string, ...*):Promise<*>,
+ *   onerror: ?function(!ErrorEvent):void
+ * }}
+ */
+let WorkerDOMWorkerDef;
+
 /**
  * Max cumulative size of author scripts from all amp-script elements on page.
  * @const {number}
@@ -72,7 +82,7 @@ export class AmpScript extends AMP.BaseElement {
     /** @private @const {!../../../src/service/vsync-impl.Vsync} */
     this.vsync_ = Services.vsyncFor(this.win);
 
-    /** @private {?Worker} */
+    /** @private {?WorkerDOMWorkerDef} */
     this.workerDom_ = null;
 
     /** @private {?UserActivationTracker} */
@@ -87,6 +97,12 @@ export class AmpScript extends AMP.BaseElement {
     /** @private {boolean} */
     this.layoutCompleted_ = false;
 
+    /** @private {boolean} */
+    this.reportedZeroSize_ = false;
+
+    /** @private {Deferred} */
+    this.initialize_ = new Deferred();
+
     /**
      * If true, most production constraints are disabled including script size,
      * script hash sum for local scripts, etc. Default is false.
@@ -96,6 +112,24 @@ export class AmpScript extends AMP.BaseElement {
      * @private {boolean}
      */
     this.development_ = false;
+
+    /**
+     * If true, signals that the `nodom` variant of worker-dom should be used.
+     * The worker js will have a much smaller bundle size, but no access to dom
+     * functions.
+     *
+     * @private {boolean}
+     */
+    this.nodom_ = false;
+
+    /**
+     * If true, signals that worker-dom should activate sandboxed mode.
+     * In this mode the Worker lives in its own crossorigin iframe, creating
+     * a strong security boundary. It also forces nodom mode.
+     *
+     * @private {boolean}
+     */
+    this.sandboxed_ = false;
   }
 
   /** @override */
@@ -105,6 +139,8 @@ export class AmpScript extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.sandboxed_ = this.element.hasAttribute('sandboxed');
+    this.nodom_ = this.sandboxed_ || this.element.hasAttribute('nodom');
     this.development_ =
       this.element.hasAttribute('data-ampdevmode') ||
       this.element.ownerDocument.documentElement.hasAttribute(
@@ -119,6 +155,19 @@ export class AmpScript extends AMP.BaseElement {
       );
     }
 
+    if (
+      this.nodom_ &&
+      (this.element.hasAttribute('width') ||
+        this.element.hasAttribute('height') ||
+        this.element.hasAttribute('layout'))
+    ) {
+      user().warn(
+        TAG,
+        'Cannot set width, height, or layout of a nodom <amp-script>',
+        this.element
+      );
+    }
+
     return getElementServiceForDoc(this.element, TAG, TAG).then((service) => {
       this.setService(/** @type {!AmpScriptService} */ (service));
     });
@@ -127,13 +176,14 @@ export class AmpScript extends AMP.BaseElement {
   /**
    * @override
    */
-  onMeasureChanged() {
-    if (this.layoutCompleted_) {
+  onLayoutMeasure() {
+    if (this.layoutCompleted_ || this.reportedZeroSize_) {
       return;
     }
 
-    const {width, height} = this.getLayoutBox();
+    const {height, width} = this.getLayoutSize();
     if (width === 0 && height === 0) {
+      this.reportedZeroSize_ = true;
       user().warn(
         TAG,
         'Skipped initializing amp-script due to zero width and height.',
@@ -158,6 +208,20 @@ export class AmpScript extends AMP.BaseElement {
     return this.userActivation_;
   }
 
+  /**
+   * Calls the specified function on this amp-script's worker-dom instance.
+   * Accepts variable number of args to pass along to the underlying worker.
+   *
+   * @param {string} unusedFnId - function identifier
+   * @param {...*} unusedFnArgs
+   * @return {!Promise<*>}
+   */
+  callFunction(unusedFnId, unusedFnArgs) {
+    return this.initialize_.promise.then(() => {
+      return this.workerDom_.callFunction.apply(this.workerDom_, arguments);
+    });
+  }
+
   /** @override */
   layoutCallback() {
     this.layoutCompleted_ = true;
@@ -218,6 +282,15 @@ export class AmpScript extends AMP.BaseElement {
 
     const sandbox = this.element.getAttribute('sandbox') || '';
     const sandboxTokens = sandbox.split(' ').map((s) => s.trim());
+    let iframeUrl;
+    if (getMode().localDev) {
+      const folder = getMode().minified ? 'current-min' : 'current';
+      iframeUrl = `/dist.3p/${folder}/amp-script-proxy-iframe.html`;
+    } else {
+      iframeUrl = `${urls.thirdParty}/${
+        getMode().version
+      }/amp-script-proxy-iframe.html`;
+    }
 
     // @see src/main-thread/configuration.WorkerDOMConfiguration in worker-dom.
     const config = {
@@ -238,24 +311,28 @@ export class AmpScript extends AMP.BaseElement {
       onReceiveMessage: (data) => {
         dev().info(TAG, 'From worker:', data);
       },
+      sandbox: this.sandboxed_ && {iframeUrl},
     };
 
     // Create worker and hydrate.
-    WorkerDOM.upgrade(
+    return WorkerDOM.upgrade(
       container || this.element,
       workerAndAuthorScripts,
       config
     ).then((workerDom) => {
       this.workerDom_ = workerDom;
-      this.workerDom_.onerror = (errorEvent) => {
-        errorEvent.preventDefault();
-        user().error(
-          TAG,
-          `${errorEvent.message}\n    at (${errorEvent.filename}:${errorEvent.lineno})`
-        );
-      };
+      this.initialize_.resolve();
+      // workerDom will be null if it failed to init.
+      if (this.workerDom_) {
+        this.workerDom_.onerror = (errorEvent) => {
+          errorEvent.preventDefault();
+          user().error(
+            TAG,
+            `${errorEvent.message}\n    at (${errorEvent.filename}:${errorEvent.lineno})`
+          );
+        };
+      }
     });
-    return workerAndAuthorScripts;
   }
 
   /**
@@ -271,7 +348,7 @@ export class AmpScript extends AMP.BaseElement {
     const useLocal = getMode().localDev || getMode().test;
     const workerUrl = calculateExtensionScriptUrl(
       location,
-      'amp-script-worker',
+      this.nodom_ ? 'amp-script-worker-nodom' : 'amp-script-worker',
       '0.1',
       useLocal
     );
@@ -314,7 +391,7 @@ export class AmpScript extends AMP.BaseElement {
           id
         );
         const text = local.textContent;
-        if (this.development_) {
+        if (this.development_ || this.sandboxed_) {
           return Promise.resolve(text);
         } else {
           return this.service_.checkSha384(text, debugId).then(() => text);
@@ -340,8 +417,8 @@ export class AmpScript extends AMP.BaseElement {
           if (
             !contentType ||
             !(
-              startsWith(contentType, 'application/javascript') ||
-              startsWith(contentType, 'text/javascript')
+              contentType.startsWith('application/javascript') ||
+              contentType.startsWith('text/javascript')
             )
           ) {
             // TODO(#24266): Refactor to %s interpolation when error string
@@ -487,6 +564,9 @@ export class AmpScriptService {
    * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
    */
   constructor(ampdoc) {
+    /** @private {!../../../src/service/ampdoc-impl.AmpDoc}  */
+    this.ampdoc_ = ampdoc;
+
     /** @private {number} */
     this.cumulativeSize_ = 0;
 
@@ -496,10 +576,8 @@ export class AmpScriptService {
     // Query the meta tag once per document.
     const allowedHashes = ampdoc.getMetaByName('amp-script-src');
     if (allowedHashes) {
-      this.sources_ = allowedHashes
-        .split(' ')
-        .map((s) => s.trim())
-        .filter((s) => s.length);
+      // Allow newlines between hashes for readability/diffs
+      this.sources_ = allowedHashes.split(/\s+/).filter(Boolean);
     }
 
     /** @private @const {!../../../src/service/crypto-impl.Crypto} */
@@ -522,8 +600,9 @@ export class AmpScriptService {
         // extraction is ready.
         throw user().createError(
           TAG,
-          `Script hash not found. ${debugId} must have "sha384-${hash}" in meta[name="amp-script-src"].` +
-            ' See https://amp.dev/documentation/components/amp-script/#security-features.'
+          `Script hash not found or incorrect for ${debugId}. You must include <meta name="amp-script-src" content="sha384-${hash}">. ` +
+            `During development, you can disable this check by adding the "data-ampdevmode" attribute to ${debugId}, or the root html node` +
+            'See https://amp.dev/documentation/components/amp-script/#script-hash.'
         );
       }
     });
@@ -539,6 +618,40 @@ export class AmpScriptService {
     this.cumulativeSize_ += size;
     return this.cumulativeSize_ > MAX_TOTAL_SCRIPT_SIZE;
   }
+
+  /**
+   * Fetches an amp-script URI by finding the associated amp-script and
+   * calling the specified function.
+   *
+   * Note: the amp-script URI does not yet support function args,
+   *       even though worker-dom's callFunction does. Therefore we allow it
+   *       via extra args.
+   *
+   * @param {string} uri
+   * @param {...*} unusedArgs
+   * @return {Promise<*>}
+   */
+  fetch(uri, unusedArgs) {
+    const uriParts = uri.slice('amp-script:'.length).split('.');
+    userAssert(
+      uriParts.length === 2 && uriParts[0].length > 0 && uriParts[1].length > 0,
+      `[${TAG}]: "amp-script" URIs must be of the format "scriptId.functionIdentifier".`
+    );
+
+    const ampScriptId = uriParts[0];
+    const fnIdentifier = uriParts[1];
+    const ampScriptEl = this.ampdoc_.getElementById(ampScriptId);
+    userAssert(
+      ampScriptEl && ampScriptEl.tagName === 'AMP-SCRIPT',
+      `[${TAG}]: could not find <amp-script> with script set to ${ampScriptId}`
+    );
+    const args = Array.prototype.slice.call(arguments, 1);
+    return ampScriptEl
+      .getImpl()
+      .then((impl) =>
+        impl.callFunction.apply(impl, [fnIdentifier].concat(args))
+      );
+  }
 }
 
 /**
@@ -635,7 +748,7 @@ export class SanitizerImpl {
   /**
    * @param {!Node} node
    * @param {string} attribute
-   * @param {string|null} value
+   * @param {?string} value
    * @return {boolean}
    */
   setAttribute(node, attribute, value) {
@@ -725,7 +838,7 @@ export class SanitizerImpl {
     const output = {};
     for (let i = 0; i < storage.length; i++) {
       const key = storage.key(i);
-      if (key && !startsWith(key, 'amp-')) {
+      if (key && !key.startsWith('amp-')) {
         output[key] = storage.getItem(key);
       }
     }
@@ -773,7 +886,7 @@ export class SanitizerImpl {
         user().error(TAG, 'Storage.clear() is not supported in amp-script.');
       }
     } else {
-      if (startsWith(key, 'amp-')) {
+      if (key.startsWith('amp-')) {
         user().error(TAG, 'Invalid "amp-" prefix for storage key: %s', key);
       } else {
         if (value === null) {
diff --git a/extensions/amp-script/0.1/test-e2e/test-amp-script.js b/extensions/amp-script/0.1/test-e2e/test-amp-script.js
index e6fe4364aa82a..0c976e49fd532 100644
--- a/extensions/amp-script/0.1/test-e2e/test-amp-script.js
+++ b/extensions/amp-script/0.1/test-e2e/test-amp-script.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'amp-script e2e',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-script/basic.amp.html',
+    fixture: 'amp-script/basic.amp.html',
     initialRect: {width: 600, height: 600},
     environments: ['single'],
     browsers: ['chrome', 'safari'],
diff --git a/extensions/amp-script/0.1/test/integration/test-amp-script.js b/extensions/amp-script/0.1/test/integration/test-amp-script.js
index 9425dd69e766d..4620ed8ea4b1e 100644
--- a/extensions/amp-script/0.1/test/integration/test-amp-script.js
+++ b/extensions/amp-script/0.1/test/integration/test-amp-script.js
@@ -23,10 +23,10 @@ function poll(description, condition, opt_onError) {
   return classicPoll(description, condition, opt_onError, TIMEOUT);
 }
 
-describe
+describes.sandboxed
   .configure()
   .skipFirefox()
-  .run('amp-script', function () {
+  .run('amp-script', {}, function () {
     this.timeout(TIMEOUT);
 
     let browser, doc, element;
@@ -34,14 +34,12 @@ describe
     describes.integration(
       'container ',
       {
-        /* eslint-disable max-len */
         body: `
       <amp-script layout=container src="/examples/amp-script/amp-script-demo.js">
         <button id="hello">Insert Hello World!</button>
         <button id="long">Long task</button>
       </amp-script>
     `,
-        /* eslint-enable max-len */
         extensions: ['amp-script'],
       },
       (env) => {
@@ -121,7 +119,6 @@ describe
     describes.integration(
       'sanitizer',
       {
-        /* eslint-disable max-len */
         body: `
       <amp-script layout=container src="/examples/amp-script/amp-script-demo.js">
         <p>Number of mutations: <span id="mutationCount">0</span></p>
@@ -129,7 +126,6 @@ describe
         <button id="img">Insert img</button>
       </amp-script>
     `,
-        /* eslint-enable max-len */
         extensions: ['amp-script'],
       },
       (env) => {
@@ -187,17 +183,36 @@ describe
       }
     );
 
+    describes.integration(
+      'sandboxed',
+      {
+        body: `<amp-script sandboxed src="/examples/amp-script/export-functions.js"></amp-script>`,
+        extensions: ['amp-script'],
+      },
+      (env) => {
+        beforeEach(() => {
+          browser = new BrowserController(env.win);
+          doc = env.win.document;
+          element = doc.querySelector('amp-script');
+        });
+
+        it('should let you call functions on it', async () => {
+          const impl = await element.getImpl(true);
+          const result = await impl.callFunction('getData');
+          expect(result).deep.equal({data: true});
+        });
+      }
+    );
+
     describes.integration(
       'defined-layout',
       {
-        /* eslint-disable max-len */
         body: `
       <amp-script layout=fixed width=300 height=200
           src="/examples/amp-script/amp-script-demo.js">
         <button id="hello">Insert</button>
       </amp-script>
     `,
-        /* eslint-enable max-len */
         extensions: ['amp-script'],
       },
       (env) => {
diff --git a/extensions/amp-script/0.1/test/unit/test-amp-script.js b/extensions/amp-script/0.1/test/unit/test-amp-script.js
index b6441ece74810..81b0d7ace8ccc 100644
--- a/extensions/amp-script/0.1/test/unit/test-amp-script.js
+++ b/extensions/amp-script/0.1/test/unit/test-amp-script.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as WorkerDOM from '@ampproject/worker-dom/dist/amp/main.mjs';
+import * as WorkerDOM from '@ampproject/worker-dom/dist/amp-production/main.mjs';
 import {
   AmpScript,
   AmpScriptService,
@@ -56,8 +56,10 @@ describes.fakeWin('AmpScript', {amp: {runtimeOn: false}}, (env) => {
       .resolves({text: () => Promise.resolve('/* noop */')});
     env.sandbox.stub(Services, 'xhrFor').returns(xhr);
 
-    // Make @ampproject/worker-dom dependency a no-op for these unit tests.
-    env.sandbox.stub(WorkerDOM, 'upgrade').resolves();
+    // Make @ampproject/worker-dom dependency essentially a noop for these tests.
+    env.sandbox
+      .stub(WorkerDOM, 'upgrade')
+      .callsFake((unused, scriptsPromise) => scriptsPromise);
   });
 
   function stubFetch(url, headers, text, responseUrl) {
@@ -84,6 +86,33 @@ describes.fakeWin('AmpScript', {amp: {runtimeOn: false}}, (env) => {
     return script.layoutCallback().should.be.rejected;
   });
 
+  it('should support nodom variant', async () => {
+    element.setAttribute('nodom', '');
+    element.setAttribute('src', 'https://foo.example/foo.txt');
+    env.sandbox.stub(env.ampdoc, 'getUrl').returns('https://foo.example/');
+    stubFetch(
+      'https://foo.example/foo.txt',
+      {'Content-Type': 'text/javascript; charset=UTF-8'}, // Valid content-type.
+      'alert(1)'
+    );
+
+    xhr.fetchText
+      .withArgs(env.sandbox.match(/amp-script-worker-0.1.js/))
+      .rejects();
+    xhr.fetchText
+      .withArgs(env.sandbox.match(/amp-script-worker-nodom-0.1.js/))
+      .resolves({text: () => Promise.resolve('/* noop */')});
+    registerServiceBuilderForDoc(
+      env.win.document,
+      'amp-script',
+      AmpScriptService
+    );
+
+    await script.buildCallback();
+    await script.layoutCallback();
+    resetServiceForTesting(env.win, 'amp-script');
+  });
+
   it('should work with "text/javascript" content-type for same-origin src', () => {
     env.sandbox.stub(env.ampdoc, 'getUrl').returns('https://foo.example/');
     element.setAttribute('src', 'https://foo.example/foo.txt');
@@ -113,18 +142,29 @@ describes.fakeWin('AmpScript', {amp: {runtimeOn: false}}, (env) => {
     expect(service.checkSha384).to.be.called;
   });
 
+  it('callFunction waits for initialization to complete before returning', async () => {
+    element.setAttribute('script', 'local-script');
+    script.workerDom_ = {callFunction: env.sandbox.spy()};
+
+    script.callFunction('fetchData', true);
+    expect(script.workerDom_.callFunction).not.called;
+
+    await script.initialize_.resolve();
+    expect(script.workerDom_.callFunction).calledWithExactly('fetchData', true);
+  });
+
   describe('Initialization skipped warning due to zero height/width', () => {
     it('should not warn when there is positive width/height', () => {
       const warnStub = env.sandbox.stub(user(), 'warn');
-      env.sandbox.stub(script, 'getLayoutBox').returns({height: 1, width: 1});
-      script.onMeasureChanged();
+      env.sandbox.stub(script, 'getLayoutSize').returns({height: 1, width: 1});
+      script.onLayoutMeasure();
       expect(warnStub).to.have.callCount(0);
     });
 
     it('should warn if there is zero width/height', () => {
       const warnStub = env.sandbox.stub(user(), 'warn');
-      env.sandbox.stub(script, 'getLayoutBox').returns({height: 0, width: 0});
-      script.onMeasureChanged();
+      env.sandbox.stub(script, 'getLayoutSize').returns({height: 0, width: 0});
+      script.onLayoutMeasure();
 
       expect(warnStub).calledWith(
         'amp-script',
@@ -139,7 +179,7 @@ describes.fakeWin('AmpScript', {amp: {runtimeOn: false}}, (env) => {
       allowConsoleError(() => {
         script.layoutCallback();
       });
-      script.onMeasureChanged();
+      script.onLayoutMeasure();
       expect(warnStub).to.have.callCount(0);
     });
   });
@@ -299,7 +339,7 @@ describes.repeated(
   }
 );
 
-describe('SanitizerImpl', () => {
+describes.sandboxed('SanitizerImpl', {}, (env) => {
   let el;
   let win;
   let s;
@@ -309,7 +349,7 @@ describe('SanitizerImpl', () => {
     win = new FakeWindow();
     el = win.document.createElement('div');
 
-    getSanitizer = ({byUserGesture, byFixedSize}) =>
+    getSanitizer = ({byFixedSize, byUserGesture}) =>
       new SanitizerImpl(
         {
           win,
@@ -503,11 +543,11 @@ describe('SanitizerImpl', () => {
 
     beforeEach(() => {
       bind = {
-        getStateValue: window.sandbox.stub(),
-        setState: window.sandbox.stub(),
-        constrain: window.sandbox.stub(),
+        getStateValue: env.sandbox.stub(),
+        setState: env.sandbox.stub(),
+        constrain: env.sandbox.stub(),
       };
-      window.sandbox.stub(Services, 'bindForDocOrNull').resolves(bind);
+      env.sandbox.stub(Services, 'bindForDocOrNull').resolves(bind);
     });
 
     it('AMP.setState(json), without user interaction', async () => {
diff --git a/extensions/amp-script/0.1/test/validator-amp-script.html b/extensions/amp-script/0.1/test/validator-amp-script.html
index 1cbde1521d3cc..f708d1fec736c 100644
--- a/extensions/amp-script/0.1/test/validator-amp-script.html
+++ b/extensions/amp-script/0.1/test/validator-amp-script.html
@@ -35,6 +35,10 @@
     </div>
   </amp-script>
 
+  <!-- Valid: 'nodom' attribute. -->
+  <amp-script nodom layout=container src="https://example.com/foo.js">
+  </amp-script>
+
   <!-- Invalid: 'src' attribute with non-HTTPS protocol. -->
   <amp-script layout=container src="http://example.com/foo.js">
   </amp-script>
diff --git a/extensions/amp-script/0.1/test/validator-amp-script.out b/extensions/amp-script/0.1/test/validator-amp-script.out
index 65d98c2147d9e..1b76e3af85dc3 100644
--- a/extensions/amp-script/0.1/test/validator-amp-script.out
+++ b/extensions/amp-script/0.1/test/validator-amp-script.out
@@ -36,10 +36,14 @@ FAIL
 |      </div>
 |    </amp-script>
 |
+|    <!-- Valid: 'nodom' attribute. -->
+|    <amp-script nodom layout=container src="https://example.com/foo.js">
+|    </amp-script>
+|
 |    <!-- Invalid: 'src' attribute with non-HTTPS protocol. -->
 |    <amp-script layout=container src="http://example.com/foo.js">
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:39:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-script'. (see https://amp.dev/documentation/components/amp-script)
+amp-script/0.1/test/validator-amp-script.html:43:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-script'. (see https://amp.dev/documentation/components/amp-script)
 |    </amp-script>
 |
 |    <!-- Valid: 'script' attribute. -->
@@ -51,7 +55,7 @@ amp-script/0.1/test/validator-amp-script.html:39:2 Invalid URL protocol 'http:'
 |    <!-- Invalid: 'script' attribute with invalid #id reference. -->
 |    <amp-script layout=container script=missing></amp-script>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:49:2 Attribute 'script' in tag 'amp-script' contains a value that does not match any other tags on the page. (see https://amp.dev/documentation/components/amp-script)
+amp-script/0.1/test/validator-amp-script.html:53:2 Attribute 'script' in tag 'amp-script' contains a value that does not match any other tags on the page. (see https://amp.dev/documentation/components/amp-script)
 |
 |    <!-- Valid: Optional 'sandbox' attribute. -->
 |    <amp-script layout=container src="https://example.com/foo.js" sandbox="allow-forms">
@@ -64,13 +68,13 @@ amp-script/0.1/test/validator-amp-script.html:49:2 Attribute 'script' in tag 'am
 |    <!-- Invalid: Optional 'max-age' attribute with non-numeric chars. -->
 |    <amp-script layout=container script="hello" max-age="1d">
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:60:2 The attribute 'max-age' in tag 'amp-script' is set to the invalid value '1d'. (see https://amp.dev/documentation/components/amp-script)
+amp-script/0.1/test/validator-amp-script.html:64:2 The attribute 'max-age' in tag 'amp-script' is set to the invalid value '1d'. (see https://amp.dev/documentation/components/amp-script)
 |    </amp-script>
 |
 |    <!-- Invalid: Optional 'max-age' attribute without 'script' attribute. -->
 |    <amp-script layout=container src="https://example.com/foo.js" max-age="604800">
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:64:2 The attribute 'script' in tag 'amp-script' is missing or incorrect, but required by attribute 'max-age'. (see https://amp.dev/documentation/components/amp-script)
+amp-script/0.1/test/validator-amp-script.html:68:2 The attribute 'script' in tag 'amp-script' is missing or incorrect, but required by attribute 'max-age'. (see https://amp.dev/documentation/components/amp-script)
 |    </amp-script>
 |
 |    <!-- Valid: <canvas> child element. -->
@@ -81,75 +85,75 @@ amp-script/0.1/test/validator-amp-script.html:64:2 The attribute 'script' in tag
 |    <!-- Invalid: <canvas> element outside of amp-script tag. -->
 |    <canvas id="myCanvas" width="100px" height="100px"></canvas>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:73:2 The tag 'canvas' may only appear as a descendant of tag 'amp-script'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags)
+amp-script/0.1/test/validator-amp-script.html:77:2 The tag 'canvas' may only appear as a descendant of tag 'amp-script'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags)
 |
 |    <!-- Invalid: With neither 'script' or 'src' attributes. -->
 |    <amp-script layout=container></amp-script>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:76:2 The tag 'amp-script' is missing a mandatory attribute - pick one of ['script', 'src']. (see https://amp.dev/documentation/components/amp-script)
+amp-script/0.1/test/validator-amp-script.html:80:2 The tag 'amp-script' is missing a mandatory attribute - pick one of ['script', 'src']. (see https://amp.dev/documentation/components/amp-script)
 |
 |    <!-- Invalid: Both 'script' and 'src' attributes. -->
 |    <amp-script layout=container src="https://example.com/foo.js" script=hello></amp-script>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:79:2 Mutually exclusive attributes encountered in tag 'amp-script' - pick one of ['script', 'src']. (see https://amp.dev/documentation/components/amp-script)
+amp-script/0.1/test/validator-amp-script.html:83:2 Mutually exclusive attributes encountered in tag 'amp-script' - pick one of ['script', 'src']. (see https://amp.dev/documentation/components/amp-script)
 |
 |    <!-- Invalid: Relative URL. -->
 |    <amp-script layout=container src="/foo.js"></amp-script>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:82:2 The relative URL '/foo.js' for attribute 'src' in tag 'amp-script' is disallowed. (see https://amp.dev/documentation/components/amp-script)
+amp-script/0.1/test/validator-amp-script.html:86:2 The relative URL '/foo.js' for attribute 'src' in tag 'amp-script' is disallowed. (see https://amp.dev/documentation/components/amp-script)
 |
 |    <!-- Invalid: Non-https 'src' attribute. -->
 |    <amp-script layout=container src="http://not.https.url"></amp-script>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:85:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-script'. (see https://amp.dev/documentation/components/amp-script)
+amp-script/0.1/test/validator-amp-script.html:89:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-script'. (see https://amp.dev/documentation/components/amp-script)
 |
 |    <!-- Invalid: 'development' attribute. -->
 |    <amp-script layout=container src="https://example.com/foo.js" development></amp-script>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:88:2 The attribute 'development' may not appear in tag 'amp-script'. (see https://amp.dev/documentation/components/amp-script)
+amp-script/0.1/test/validator-amp-script.html:92:2 The attribute 'development' may not appear in tag 'amp-script'. (see https://amp.dev/documentation/components/amp-script)
 |
 |    <!-- Invalid: 'data-ampdevmode' attribute. -->
 |    <amp-script layout=container src="https://example.com/foo.js" data-ampdevmode></amp-script>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:91:2 The attribute 'data-ampdevmode' in tag 'amp-script' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-script)
+amp-script/0.1/test/validator-amp-script.html:95:2 The attribute 'data-ampdevmode' in tag 'amp-script' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-script)
 |
 |    <!-- Invalid: 'data-ampdevmode' attribute. -->
 |    <amp-script layout=container src="https://example.com/foo.js" data-ampdevmode="false"></amp-script>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:94:2 The attribute 'data-ampdevmode' in tag 'amp-script' is set to the invalid value 'false'. (see https://amp.dev/documentation/components/amp-script)
+amp-script/0.1/test/validator-amp-script.html:98:2 The attribute 'data-ampdevmode' in tag 'amp-script' is set to the invalid value 'false'. (see https://amp.dev/documentation/components/amp-script)
 |
 |    <!-- Invalid: Local script without 'target' or 'id' attributes. -->
 |    <script type=text/plain>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:97:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp-script/0.1/test/validator-amp-script.html:101:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |      document.body.textContent = "Hello World!";
 |    </script>
 |
 |    <!-- Invalid: Local script with invalid 'type'. -->
 |    <script type=text/amp-script target=amp-script id=hello>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:102:2 The attribute 'type' in tag 'amp-script extension local script' is set to the invalid value 'text/amp-script'. (see https://amp.dev/documentation/components/amp-script)
+amp-script/0.1/test/validator-amp-script.html:106:2 The attribute 'type' in tag 'script' is set to the invalid value 'text/amp-script'. (see https://amp.dev/documentation/components/amp-script/)
 |      document.body.textContent = "Hello World!";
 |    </script>
 |
 |    <!-- Invalid: Local script with invalid 'target'. -->
 |    <script type=text/plain target=amp-js id=hello>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:107:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp-script/0.1/test/validator-amp-script.html:111:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |      document.body.textContent = "Hello World!";
 |    </script>
 |
 |    <!-- Invalid: Local script without 'target' attribute. -->
 |    <script type=text/plain id=hello>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:112:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp-script/0.1/test/validator-amp-script.html:116:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |      document.body.textContent = "Hello World!";
 |    </script>
 |
 |    <!-- Invalid: Local script without 'id' attribute. -->
 |    <script type=text/plain target=amp-script>
 >>   ^~~~~~~~~
-amp-script/0.1/test/validator-amp-script.html:117:2 The mandatory attribute 'id' is missing in tag 'amp-script extension local script'. (see https://amp.dev/documentation/components/amp-script)
+amp-script/0.1/test/validator-amp-script.html:121:2 The mandatory attribute 'id' is missing in tag 'script'. (see https://amp.dev/documentation/components/amp-script/)
 |      document.body.textContent = "Hello World!";
 |    </script>
-|  </body>
\ No newline at end of file
+|  </body>
diff --git a/extensions/amp-script/0.1/user-activation-tracker.js b/extensions/amp-script/0.1/user-activation-tracker.js
index a98bef1b2fa28..1f0b693fea82f 100644
--- a/extensions/amp-script/0.1/user-activation-tracker.js
+++ b/extensions/amp-script/0.1/user-activation-tracker.js
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import {devAssert} from '../../../src/log';
+
 export const ACTIVATION_TIMEOUT = 5000; // 5 seconds.
 
 const ACTIVATION_EVENTS = [
@@ -23,6 +25,7 @@ const ACTIVATION_EVENTS = [
   'input',
   'keypress',
   'submit',
+  'keydown',
 ];
 
 /**
@@ -98,14 +101,18 @@ export class UserActivationTracker {
     if (!this.isActive()) {
       return;
     }
+    devAssert(
+      !this.inLongTask_,
+      'Should not expand while a longTask is already ongoing.'
+    );
     this.inLongTask_ = true;
-    promise
-      .catch(() => {})
-      .then(() => {
-        this.inLongTask_ = false;
-        // Add additional "activity window" after a long task is done.
-        this.lastActivationTime_ = Date.now();
-      });
+
+    const longTaskComplete = () => {
+      this.inLongTask_ = false;
+      // Add additional "activity window" after a long task is done.
+      this.lastActivationTime_ = Date.now();
+    };
+    promise.then(longTaskComplete, longTaskComplete);
   }
 
   /**
diff --git a/extensions/amp-script/OWNERS b/extensions/amp-script/OWNERS
index 7c877bacc8a0e..04c3c75bfccd6 100644
--- a/extensions/amp-script/OWNERS
+++ b/extensions/amp-script/OWNERS
@@ -1,13 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [
-        {name: 'ampproject/wg-runtime'},
-        {name: 'ampproject/wg-performance'},
-      ],
+      owners: [{name: 'ampproject/wg-performance'}],
     },
   ],
 }
diff --git a/extensions/amp-script/amp-script.md b/extensions/amp-script/amp-script.md
index d507c589b4219..ef2fb8bf4d21e 100644
--- a/extensions/amp-script/amp-script.md
+++ b/extensions/amp-script/amp-script.md
@@ -3,8 +3,7 @@ $category@: dynamic-content
 formats:
   - websites
 teaser:
-  text: Allows running custom JavaScript to render UI.
-experimental: true
+  text: Runs custom JavaScript in a Web Worker.
 ---
 
 <!---
@@ -23,22 +22,50 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-# amp-script
+## Usage
 
-## Overview
+The `amp-script` component allows you to run custom JavaScript. To maintain AMP's performance guarantees, your code runs in a Web Worker, and certain restrictions apply.
 
-The `amp-script` component allows you run custom JavaScript to render UI elements, such as a React component.
+### Virtual DOM
 
-### A simple example
+Your JavaScript can access the area of the page wrapped within the `<amp-script>` component. `amp-script` copies the component's children to a virtual DOM. Your code can access that virtual DOM as `document.body`.
+
+For example, this `<amp-script>` component defines a DOM consisting of a single `<p>`.
+
+```html
+<amp-script src="http://example.com/my-script.js" width="300" height="100">
+  <p>A single line of text</p>
+</amp-script>
+```
+
+If your code appends an element to `document.body`:
+
+```js
+// my-script.js
+const p = document.createElement('p');
+p.textContent = 'A second line of text';
+document.body.appendChild(p);
+```
+
+the new element will be placed after that `<p>`.
+
+```html
+<amp-script src="http://example.com/my-script.js" width="300" height="100">
+  <p>A single line of text</p>
+  <p>A second line of text</p>
+</amp-script>
+```
+
+### Loading JavaScript
 
 An `amp-script` element can load JavaScript in two ways:
 
-- Remotely, from a URL to a JavaScript file.
-- Locally, from a `script[type=text/plain][target=amp-script]` element on the page.
+-   remotely, from a URL
+-   locally, from a `<script>` element on the page
 
-#### Load JavaScript from a remote URL
+#### From a remote URL
 
-Use the `src` attribute to load remote JavaScript.
+Use the `src` attribute to load JavaScript from a URL:
 
 ```html
 <amp-script layout="container" src="https://example.com/hello-world.js">
@@ -46,14 +73,16 @@ Use the `src` attribute to load remote JavaScript.
 </amp-script>
 ```
 
-If `src` points to a cross-origin URL, then a ["script hash"](#security-features) must also be added to the document head.
+#### From a local element
 
-#### Load JavaScript from a local element
+You can also include your JavaScript inline, in a `script` tag. You must:
 
-Use the `script` attribute to reference a local `script` element by `id`.
+-   Set the `script` attribute of your `amp-script` to the local `script` element's `id`.
+-   Include `target="amp-script"` in your `amp-script`.
+-   Include `type="text/plain"` in your `script`. This way, the browser won't execute your script, allowing amp-script to control it.
 
 ```html
-<!-- Using the "script" attribute also requires adding a "script hash" to the document head. -->
+<!-- To use inline JavaScript, you must add a script hash to the document head. -->
 <head>
   <meta
     name="amp-script-src"
@@ -63,11 +92,11 @@ Use the `script` attribute to reference a local `script` element by `id`.
 
 ...
 
-<amp-script width="200" height="50" script="hello-world">
+<amp-script width="200" height="100" script="hello-world">
   <button>Hello amp-script!</button>
 </amp-script>
 
-<!-- Also add [target="amp-script"] to the <script> element. -->
+<!-- Add [target="amp-script"] to the <script> element. -->
 <script id="hello-world" type="text/plain" target="amp-script">
   const btn = document.querySelector('button');
   btn.addEventListener('click', () => {
@@ -77,68 +106,110 @@ Use the `script` attribute to reference a local `script` element by `id`.
 ```
 
 [tip type="default"]
-`amp-script` elements that have a `script` or cross-origin `src` attribute require a ["script hash"](#security-features). Script hashes are specified in a `<meta name="amp-script-src" content="...">` element in the document head.
+For security reasons, `amp-script` elements with a `script` or cross-origin `src` attribute require a [script hash](#calculating-the-script-hash) in a `<meta name="amp-script-src" content="...">` tag. Also, same-origin `src` files must have [`Content-Type`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type): `application/javascript` or `text/javascript`.
 
-A console error will be thrown with the expected `content` value -- you can copy/paste from the error to create the appropriate `<meta>` tag.
+If your page contains multiple `amp-script` elements, each requiring a [script hash](#calculating-the-script-hash), include each as a whitespace-delimited list in a single `<meta name="amp-script-src" content="...">` tag (see [examples/amp-script/example.amp.html](https://github.com/ampproject/amphtml/blob/main/examples/amp-script/example.amp.html) for an example with multiple script hashes).
 [/tip]
 
 ### How does it work?
 
-`amp-script` runs your custom JavaScript in a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) that contains a virtual DOM. When your JavaScript code modifies this virtual DOM, `amp-script` forwards these changes to the main thread and applies them to the `amp-script` element subtree.
+`amp-script` runs your custom JavaScript in a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers). Normally Web Workers don't have access to the DOM. But `amp-script` gives your code access to a virtual DOM. When your JavaScript modifies this virtual DOM, `amp-script` updates the real DOM.
+
+Under the hood, `amp-script` uses [@ampproject/worker-dom](https://github.com/ampproject/worker-dom/). For design details, see the ["Intent to Implement" issue](https://github.com/ampproject/amphtml/issues/13471).
+
+## Capabilities
+
+### Supported APIs
+
+DOM elements and their properties are generally supported, with a few limits. For example, your code can't add a new `<script>` or `<style>` tag to the DOM.
 
-For example, adding an element to `document.body`:
+`amp-script` recreates many commonly used DOM APIs and makes them available to your code. This "hello world" example uses `getElementById()`, `addEventListener()`, `createElement()`, `textContent`, and `appendChild()`:
 
 ```js
-// my-script.js
-const p = document.createElement('p');
-p.textContent = 'I am added to the body!';
-document.body.appendChild(p);
+const button = document.getElementById('textarea');
+
+button.addEventListener('click', () => {
+  const h1 = document.createElement('h1');
+  h1.textContent = 'Hello World!';
+  document.body.appendChild(h1);
+});
 ```
 
-Will be reflected on the page as a new child of the `amp-script` element:
+Supported DOM APIs include:
 
-```html
-<amp-script src="http://example.com/my-script.js" width="300" height="100">
-  <p>I am added to the body!</p>
-</amp-script>
-```
+-   Element getters like `getElementByName()`, `getElementsByClassName()`, `getElementsByTagName()`, `childNodes()`, `parentNode()`, and `lastChild()`
+-   Mutators like `createTextNode()`, `appendChild()`, `insertBefore()`, `removeChild()`, and `replaceChild()`
+-   Methods involving events like `addEventListener()`, `removeEventListener()`, and `createEvent()`
+-   Property and attribute getters like `getAttribute()`, `hasAttribute()`
+-   Event properties like `Event.target`, `Event.type`, and `Event.bubbles`
+-   Element properties like `attributes`, `id`, `outerHTML`, `textContent`, `value`, `classList`, and `className`
+-   And many more.
 
-Under the hood, `amp-script` uses [@ampproject/worker-dom](https://github.com/ampproject/worker-dom/). For design details, see the ["Intent to Implement" issue](https://github.com/ampproject/amphtml/issues/13471).
+For a complete list of supported DOM APIs, see the [API compatibility table](https://github.com/ampproject/worker-dom/blob/main/web_compat_table.md).
 
-### State manipulation
+`querySelector()` is supported for simple selectors - element, id, class, and attribute. So, `document.querySelector('.class')` will work, but `document.querySelector('.class1 .class2')` will not. [See the code](https://github.com/ampproject/worker-dom/blob/main/src/worker-thread/dom/Element.ts#L159) for details.
 
-`amp-script` supports getting and setting [`amp-state`](https://amp.dev/documentation/components/amp-bind/#initializing-state-with-amp-state) JSON via JavaScript.
+`amp-script` supports common Web APIs like `Fetch`, `WebSockets`, `localStorage`, `sessionStorage`, and `Canvas`. Presently, the `History` API is not implemented, and neither are cookies.
 
-This enables advanced interactions between `amp-script` and other AMP elements on the page via `amp-bind` [bindings](https://amp.dev/documentation/components/amp-bind/#bindings). Invoking `AMP.setState()` from `amp-script` may cause mutations to the DOM as long as it was triggered by user gesture, otherwise it will only implicitly set state (similar to [`amp-state` initialization](https://amp.dev/documentation/examples/components/amp-bind/?referrer=ampbyexample.com#initializing-state)).
+`amp-script` does not support the entire DOM API or Web API, as this would make `amp-script`'s own JavaScript too large and slow. If there's an API you'd like to see supported, please [file an issue](https://github.com/ampproject/amphtml/issues/new/choose) or [suggest and contribute the change yourself](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md).
 
 [tip type="default"]
-`AMP.setState()` requires the [`amp-bind`](https://amp.dev/documentation/components/amp-bind) extension script to be included in the document head.
+For a set of samples showing `amp-script` in use, [see here](https://amp.dev/documentation/examples/components/amp-script/).
 [/tip]
 
+### Frameworks and libraries
+
+Presently, libraries like [jQuery](https://jquery.com) will not work with `amp-script` without modification, as they use unsupported DOM APIs. However, [@ampproject/worker-dom](https://github.com/ampproject/worker-dom/) was designed to support the APIs that popular JavaScript frameworks use. `amp-script` has been tested with [React](http://reactjs.org/) and [Preact](https://preactjs.com/). To keep bundle sizes small, we recommend using Preact. Other frameworks may work but have not been thoroughly tested; if you're looking for support, please file an issue or contribute [here](https://github.com/ampproject/worker-dom/).
+
+### Creating AMP elements
+
+You can use `amp-script` to add an `amp-img` or `amp-layout` component to the DOM. Other AMP components are presently unsupported. If you need to create a different AMP element, please upvote on [&#35;25344](https://github.com/ampproject/amphtml/issues/25344) and add a comment describing your use case.
+
+### Referencing amp-state
+
+`amp-script` supports getting and setting [`amp-state`](https://amp.dev/documentation/components/amp-bind/#defining-and-initializing-state-with-<amp-state>) JSON. This lets `amp-script` interact with other AMP elements on the page via [`amp-bind` bindings](https://amp.dev/documentation/components/amp-bind/#bindings).
+
+If you invoke `AMP.setState()` from `amp-script` after a user gesture, bindings can cause mutations to the DOM. Otherwise, state will be set, but binding will not occur (similar to [`amp-state` initialization](https://amp.dev/documentation/examples/components/amp-bind/?referrer=ampbyexample.com#initializing-state)). For more information, see [the section on user gestures](#user-gestures).
+
+`AMP.setState()` works as described in the [`<amp-bind>` documentation](<https://amp.dev/documentation/components/amp-bind/#updating-state-variables-with-amp.setstate()>), merging an object literal into the specified state. This example shows how it can affect the DOM:
+
+```html
+<script id="myscript" type="text/plain" target="amp-script">
+  const button = document.getElementsByTagName('button')[0];
+
+  function changer() {
+    AMP.setState({myText: "I have changed!"});
+  }
+
+  button.addEventListener('click', changer);
+</script>
+
+<amp-script layout="container" script="myscript">
+  <p [text]="myText">Will I change?</p>
+  <button>Change it!</button>
+</amp-script>
+```
+
+`AMP.getState()` is asynchronous and returns a Promise. The promise resolves with the stringified value of the state variable it's passed. These examples demonstrate its use with different types:
+
 ```js
-/**
- * Deep-merges `json` into the current amp-state.
- * @param {!Object} json A JSON object e.g. must not contain circular references.
- */
-AMP.setState(json) {}
+async function myFunction() {
+  AMP.setState({'text': 'I am a string'});
+  let text = await AMP.getState('text');
 
-/**
- * Asynchronously returns amp-state.
- * @param {string=} expr An optional JSON expression string e.g. "foo.bar".
- * @return {!Promise<!Object>}
- */
-AMP.getState(expr) {}
+  AMP.setState({'number': 42});
+  let number = Number(await AMP.getState('number'));
+
+  AMP.setState({'obj': {'text': 'I am a string', 'number': 42}});
+  let obj = JSON.parse(await AMP.getState('obj'));
+}
 ```
 
-##### Example with WebSocket and AMP.setState()
+Here's another example. `amp-state` doesn't support WebSocket URLs in its `src` attribute, but we can use `amp-script` to pass in data from a WebSocket.
 
 ```html
 <amp-script width="1" height="1" script="webSocketDemo"> </amp-script>
 
-<!--
-  <amp-state> doesn't support WebSocket URLs in its "src" attribute,
-  but we can use <amp-script> to work around it. :)
--->
 <script type="text/plain" target="amp-script" id="webSocketDemo">
   const socket = new WebSocket('wss://websocket.example');
   socket.onmessage = event => {
@@ -147,42 +218,135 @@ AMP.getState(expr) {}
 </script>
 ```
 
-### Restrictions
+[tip type="default"]
+To use `AMP.setState()`, you must include the [`amp-bind`](https://amp.dev/documentation/components/amp-bind) extension script in the document head.
+[/tip]
+
+Note that if something else changes the DOM inside your `<amp-script>`, that change will not propagate to the virtual DOM. The syncing process is unidirectional. Thus it's best to avoid code like the following:
+
+```html
+<amp-script layout="container" script="myscript">
+  <p [text]="myText">Will I change?</p>
+</amp-script>
+<button on="tap:AMP.setState({myText: 'I changed'})">
+  Change this and amp-script won't know
+</button>
+```
+
+### Retrieving data for `<amp-list>`
+
+You may export a function to act as the data source for an [`<amp-list>`](https://amp.dev/documentation/components/amp-list/).
+The exported function must return either JSON, or a Promise that resolves with JSON.
 
-#### Allowed APIs
+The export API is available on the global scope and has the following signature:
+
+```js
+/**
+ * @param {string} name the name to identify the function by.
+ * @param {Function} function the function to export.
+ */
+function exportFunction(name, function) {}
+```
+
+## Restrictions
+
+In order to maintain AMP's guarantees of performance and layout stability, `amp-script` imposes some restrictions.
+
+### Size of JavaScript code
+
+`amp-script` has standards for the size of code:
+
+-   Each inline script can contain up to 10,000 bytes
+-   The scripts on a page can contain a total of up to 150,000 bytes
+
+### User gestures
+
+In some cases, `amp-script` will not apply DOM changes triggered by your JavaScript code unless the code was triggered by a user gesture - say, a button tap. This helps keep [content layout shift](https://web.dev/cls/) from causing a poor user experience.
+
+The rules are less restrictive for `amp-script` containers whose size cannot change. This is the case when the `layout` is not `container` and when the dimensions are specified in HTML. Let's call such containers "fixed-size". Containers whose size can change, we'll call "variable-sized".
+
+Here are some examples of fixed-size containers:
+
+<!-- prettier-ignore-start -->
+```html
+<amp-script layout="fill" height="300" width="500" script="myscript"></amp-script>
 
-Currently, most DOM elements and their properties are supported. DOM query APIs like `querySelector` have partial support. Browser APIs like `History` are not implemented yet. See the [API compatibility table](https://github.com/ampproject/worker-dom/blob/master/web_compat_table.md) for details.
+<amp-script layout="fixed-height" height="300" script="myscript" ></amp-script>
+```
 
-If there's an API you'd like to see supported, please [file an issue](https://github.com/ampproject/amphtml/issues/new) and mention `@choumx` and `@kristoferbaxter`.
+Here are some examples of variable-sized containers:
 
-#### Size of JavaScript code
+```html
+<amp-script layout="responsive" script="myscript"></amp-script>
 
-`amp-script` has the following restrictions on JavaScript file size:
+<amp-script layout="fixed" height="300" script="myscript"></amp-script>
 
-- Maximum of 10,000 bytes per `amp-script` element that uses a local script via `script[type=text/plain][target=amp-script]`.
-- Maximum total of 150,000 bytes for all `amp-script` elements on the page.
+<amp-script layout="container" height="300" width="500" script="myscript"></amp-script>
+```
+<!-- prettier-ignore-end -->
+
+DOM changes are permitted as follows:
+
+-   in **fixed-size containers**, your code can make any change at any time.
+-   in **variable-size containers**, your code can only make a change after a user gesture. It then has 5 seconds to make changes. If your code makes one or more `fetch()`'s, it can continue to make changes until 5 seconds after the last `fetch()` completes.
+
+<table>
+  <tr>
+   <td></td><td>fixed-size container</td><td>variable-size container</td>
+  </tr>
+  <tr>
+   <td>change on page load</td><td>allowed anytime</td><td>not allowed</td>
+  </tr>
+  <tr>
+   <td>change after user event</td><td>allowed anytime</td><td>allowed for 5 seconds + fetch()</td>
+  </tr>
+</table>
+
+<!-- prettier-ignore-start -->
+[tip type="default"]
+[See here](https://amp.dev/documentation/guides-and-tutorials/learn/amp-html-layout/#layout) for more information about AMP's layout system.
+[/tip]
+<!-- prettier-ignore-end -->
 
-#### User gestures
+## Calculating the script hash
 
-In some cases, `amp-script` requires a user gesture to apply changes triggered by your JavaScript code (we call these "mutations") to the `amp-script`'s DOM children. This helps avoid poor user experience from unexpected content jumping.
+Since custom JS run in `amp-script` is not subject to normal [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), you need to add a script hash:
 
-The rules for mutations are as follows:
+-   for inline JavaScript
+-   for JavaScript loaded from a cross-origin source
 
-1. For `amp-script` elements with [non-container layout](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout#supported-values-for-the-layout-attribute), mutations are always allowed.
-2. For `amp-script` elements with container layout, mutations are allowed for five seconds following a user gesture. This five second window is extended once if a `fetch()` is triggered.
+Include the script hash in a `meta[name=amp-script-src]` element in the document head. You need a hash for each script that's used by an `<amp-script>` component. Here are a few ways to build the hash:
 
-#### Creating AMP elements
+-   If you omit the `<meta>` tag, AMP will output a console error containing the expected hash string. You can copy this to create the appropriate `<meta>` tag.
+-   The [AMP Optimizer node module](https://www.npmjs.com/package/@ampproject/toolbox-optimizer) generates this hash and inserts the `<meta>` tag automatically.
+-   Build it yourself, using the following steps:
 
-With regard to dynamic creation of AMP elements (e.g. via `document.createElement()`), only `amp-img` and `amp-layout` are currently allowed. Please upvote or comment on [#25344](https://github.com/ampproject/amphtml/issues/25344) with your use case.
+1. Compute the SHA384 hash sum of the script's contents. This sum should be expressed in hexadecimal.
+2. base64url-encode the result.
+3. Prefix that with `sha384-`.
 
-#### Security features
+Here's how you calculate the hash in Node.js:
 
-Since custom JS run in `amp-script` is not subject to normal [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), we've included some additional measures that are checked at runtime:
+```js
+const crypto = require('crypto');
+const hash = crypto.createHash('sha384');
+
+function generateCSPHash(script) {
+  const data = hash.update(script, 'utf8');
+  return (
+    'sha384-' +
+    data
+      .digest('base64')
+      .replace(/=/g, '')
+      .replace(/\+/g, '-')
+      .replace(/\//g, '_')
+  );
+}
+```
 
-1. Same-origin `src` must have [`Content-Type`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type): `application/javascript` or `text/javascript`.
-2. Cross-origin `src` and `script` must have matching script hashes in a `meta[name=amp-script-src]` element in the document head. A console error will be emitted with the expected hash string.
+The [@ampproject/toolbox-script-csp](https://www.npmjs.com/package/@ampproject/toolbox-script-csp) node module computes the hash as well.
 
-Example of script hashes:
+This example shows how to use the script hash in HTML:
 
 ```html
 <head>
@@ -195,7 +359,8 @@ Example of script hashes:
     content="
       sha384-fake_hash_of_remote_js
       sha384-fake_hash_of_local_script
-    ">
+    "
+  />
 </head>
 <body>
   <!--
@@ -203,9 +368,9 @@ Example of script hashes:
 
     If the hash of remote.js's contents is "fake_hash_of_remote_js",
     we'll add "sha384-fake_hash_of_remote_js" to the <meta> tag above.
-  -->
-  <amp-script src="cross.origin/remote.js" layout=container>
-  </amp-script>
+
+-->
+  <amp-script src="cross.origin/remote.js" layout="container"> </amp-script>
 
   <!--
     A "script" attribute also requires adding a script hash.
@@ -213,68 +378,99 @@ Example of script hashes:
     If the hash of #myScript's text contents is "fake_hash_of_local_script",
     we'll add "sha384-fake_hash_of_local_script" to the <meta> tag above.
   -->
-  <amp-script script=myScript layout=container>
-  </amp-script>
-  <script type=text/plain target=amp-script id=myScript>
+  <amp-script script="myScript" layout="container"> </amp-script>
+  <script type="text/plain" target="amp-script" id="myScript">
     document.body.textContent += 'Hello world!';
   </script>
 </body>
 ```
 
 [tip type="default"]
-The JavaScript size and script hash requirements can be disabled during development by adding a `data-ampdevmode` attribute to either the `amp-script` element or the root html node.
+During development, you can disable the JavaScript size and script hash requirements by adding a `data-ampdevmode` attribute to either the `amp-script` element or the root html node. Adding this attribute to the root html node will suppress all validation errors on the page. Adding it to the `amp-script` element will simply suppress errors about the size and the script hash.
 [/tip]
 
 ## Attributes
 
-**src**
+### src
 
 For executing remote scripts.
 
-The URL of a JS file that will be executed in the context of this `<amp-script>`. The URL's protocol must be HTTPS and the HTTP response's `Content-Type` must be `application/javascript` or `text/javascript`.
+The URL of a JS file that will be executed in the context of this `<amp-script>`. The URL's protocol must be HTTPS. The HTTP response's `Content-Type` must be `application/javascript` or `text/javascript`.
 
-**script**
+### script
 
 For executing local scripts.
 
 The `id` of a `script[type=text/plain][target=amp-script]` element whose text content contains JS that will be executed in the context of this `<amp-script>`.
 
-**sandbox (optional)**
+### sandbox
 
 Applies extra restrictions to DOM that may be mutated by this `<amp-script>`. Similar to the `iframe[sandbox]` attribute, the value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:
 
-- `allow-forms`: Allows [form elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements) to be created and modified. AMP requires special handling to prevent unauthorized state changing requests from user input. See amp-form's [security considerations](https://amp.dev/documentation/components/amp-form#security-considerations) for more detail.
+-   `allow-forms`: Allows [form elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements) to be created and modified. AMP requires special handling to prevent unauthorized state changing requests from user input. See amp-form's [security considerations](https://amp.dev/documentation/components/amp-form#security-considerations) for more detail.
 
-**max-age (optional, but required for signed exchanges if `script` is specified)**
+### max-age
 
-Requires the `script` attribute.
+Requires the `script` attribute. This attribute is optional, but required for signed exchanges if `script` is specified.
 
 The `max-age` attribute specifies the maximum lifetime in seconds the local script is allowed to be served from the time of [signed exchange (SXG)](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/signed-exchange/) publishing. [AMP Packager](https://github.com/ampproject/amppackager) uses this value to compute the SXG `expires` time.
 
 The value of `max-age` should be chosen carefully:
 
-- A longer `max-age` increases the potential security impact of a [SXG downgrade](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#seccons-downgrades).
+-   A longer `max-age` increases the potential security impact of a [SXG downgrade](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#seccons-downgrades).
 
-- A shorter `max-age` may prevent inclusion in AMP Caches that have a minimum SXG lifetime. For instance, the Google AMP Cache requires at least [4 days](https://github.com/ampproject/amppackager/blob/releases/docs/cache_requirements.md#google-amp-cache) (345600 seconds). Note that there's currently no reason to select `max-age` longer than 7 days (604800 seconds), due to the [maximum](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#name-signature-validity) set by the SXG spec.
+-   A shorter `max-age` may prevent inclusion in AMP Caches that have a minimum SXG lifetime. For instance, the Google AMP Cache requires at least [4 days](https://github.com/ampproject/amppackager/blob/releases/docs/cache_requirements.md#google-amp-cache) (345600 seconds). Note that there's currently no reason to select `max-age` longer than 7 days (604800 seconds), due to the [maximum](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#name-signature-validity) set by the SXG spec.
 
 If you don't publish signed exchanges, `max-age` does nothing.
 
-**common attributes**
+### nodom
+
+The optional `nodom` attribute optimizes `<amp-script>` for use as a data-layer rather than as a UI layer. It removes the ability for the `<amp-script>` to make DOM modifications, in favor of a signficantly smaller bundle size and therefore better performance. It also automatically hides the `<amp-script>`, so you may omit the height and width attributes.
+
+### common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
 
-## Errors
+## Errors and warnings
+
+A few runtime errors may be encountered when using `amp-script`.
+
+**The inline script is (...) bytes, which exceeds the limit of 10,000.**
+
+No inline script can exceed 10,000 bytes. See [Size of JavaScript code](#size-of-javascript-code) above.
+
+**Maximum total script size exceeded (...)**
+
+The total of all scripts used by a page cannot exceed 150,000 bytes. See [Size of JavaScript code](#size-of-javascript-code) above.
+
+**Script hash not found.**
+
+For local scripts and cross-origin scripts, you need to add a [script hash](#calculating-the-script-hash) for security.
+
+**(...) must have "sha384-(...)" in meta[name="amp-script-src"]**
+
+Again, you need the [script hash](#calculating-the-script-hash). Simply copy the value in this error into your `<meta>` tag.
+
+**JavaScript size and script hash requirements are disabled in development mode.**
+
+If your `<amp-script>` includes the `data-ampdevmode` attribute, AMP won't check your [script hash](#calculating-the-script-hash) or the size of your code.
+
+**Blocked (...) attempts to modify (...)**
+
+To avoid undesirable content layout shift, `amp-script` disallows DOM mutations under certain conditions. See [User gestures](#user-gestures) above.
+
+**amp-script... was terminated due to illegal mutation**
 
-There are several types of runtime errors that may be encountered when using `amp-script`.
+If a script attempts too many disallowed DOM changes, `amp-script` may halt the script so that it doesn't get too far out of sync with the DOM.
 
-#### "Maximum total script size exceeded (...)"
+**AMP.setState only updated page state and did not reevaluate bindings due to lack of recent user interaction.**
 
-`amp-script` limits the size of the JS source that may be used. See [Size of JavaScript code](#size-of-javascript-code) above.
+If you modify a state variable in a variable-sized container before a user interaction, `amp-script` will not upate the DOM to avoid undesirable content layout shift. See [Referencing amp-state](#referencing-amp-state) above.
 
-#### "Script hash not found."
+**Form elements (...) cannot be mutated unless your `<amp-script>` includes the attribute sandbox="allow-forms".**
 
-Local scripts and cross-origin `src` require adding a special `<meta>` tag to be used. See [Security features](#security-features) above.
+This attribute is required for security. See [common attributes](#common-attributes) above.
 
-#### "amp-script... was terminated due to illegal mutation"
+**Sanitized node: (...)**
 
-To avoid unexpected content jumping, `amp-script` generally requires user gestures for DOM changes. See [User gestures](#user-gestures) above.
+If your code adds a disallowed element (like `<script>`, `<style>`, or an unsupported AMP component), `amp-script` will remove it.
diff --git a/extensions/amp-script/validator-amp-script.protoascii b/extensions/amp-script/validator-amp-script.protoascii
index f6d2a8cfc1cc5..86e85726279a4 100644
--- a/extensions/amp-script/validator-amp-script.protoascii
+++ b/extensions/amp-script/validator-amp-script.protoascii
@@ -171,19 +171,25 @@ tags: {  # <amp-script> (local script)
   attr_lists: "nonce-attr"
   cdata: {
     max_bytes: 10000
-    max_bytes_spec_url: "https://amp.dev/documentation/components/amp-script#faq"
+    max_bytes_spec_url: "https://amp.dev/documentation/components/amp-script/#faq"
     disallowed_cdata_regex: {
       regex: "<!--"
       error_message: "html comments"
     }
   }
-  spec_url: "https://amp.dev/documentation/components/amp-script"
+  spec_url: "https://amp.dev/documentation/components/amp-script/"
 }
 tags: {  # <amp-script>
   html_format: AMP
   tag_name: "AMP-SCRIPT"
   disallowed_ancestor: "AMP-SCRIPT"
   requires_extension: "amp-script"
+  attrs: {
+    # This attribute should always be invalid. See https://github.com/ampproject/amphtml/pull/27076
+    name: "data-ampdevmode"
+    value: "false"
+    disallowed_value_regex: "false"
+  }
   attrs: {
     name: "max-age"
     value_regex: "[0-9]+"
@@ -193,10 +199,12 @@ tags: {  # <amp-script>
     }
   }
   attrs: {
-    # This attribute should always be invalid. See https://github.com/ampproject/amphtml/pull/27076
-    name: "data-ampdevmode"
-    value: "false"
-    disallowed_value_regex: "false"
+    name: "nodom"
+    value: ""
+  }
+  attrs: {
+    name: "sandboxed"
+    value: ""
   }
   attrs: { name: "sandbox" }
   attrs: {
diff --git a/extensions/amp-selector/0.1/amp-selector.js b/extensions/amp-selector/0.1/amp-selector.js
index 675ad9589cc06..cbcb6863549da 100644
--- a/extensions/amp-selector/0.1/amp-selector.js
+++ b/extensions/amp-selector/0.1/amp-selector.js
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
-import {AmpEvents} from '../../../src/amp-events';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {CSS} from '../../../build/amp-selector-0.1.css';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Services} from '../../../src/services';
-import {areEqualOrdered} from '../../../src/utils/array';
+import {areEqualOrdered, toArray} from '../../../src/core/types/array';
 import {
   closestAncestorElementBySelector,
   isRTL,
@@ -27,9 +27,8 @@ import {
 } from '../../../src/dom';
 import {createCustomEvent} from '../../../src/event-helper';
 import {dev, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {mod} from '../../../src/utils/math';
-import {toArray} from '../../../src/types';
+import {dict} from '../../../src/core/types/object';
+import {mod} from '../../../src/core/math';
 
 const TAG = 'amp-selector';
 
@@ -45,6 +44,11 @@ const KEYBOARD_SELECT_MODES = {
 };
 
 export class AmpSelector extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -81,11 +85,6 @@ export class AmpSelector extends AMP.BaseElement {
     return true;
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   buildCallback() {
     this.action_ = Services.actionServiceForDoc(this.element);
@@ -465,14 +464,6 @@ export class AmpSelector extends AMP.BaseElement {
         'selectedOptions': this.selectedOptions_(),
       })
     );
-    // TODO(wg-ui-and-a11y): Remove this in Q1 2020.
-    if (trust < ActionTrust.DEFAULT) {
-      user().warn(
-        TAG,
-        '"select" event now has the same trust as the originating action. ' +
-          'See https://github.com/ampproject/amphtml/issues/24443 for details.'
-      );
-    }
     this.action_.trigger(this.element, name, selectEvent, trust);
   }
 
@@ -719,7 +710,7 @@ export class AmpSelector extends AMP.BaseElement {
  * @return {boolean}
  */
 function isElementHidden(element, rect) {
-  const {width, height} = rect;
+  const {height, width} = rect;
   return element.hidden || width == 0 || height == 0;
 }
 
diff --git a/extensions/amp-selector/0.1/amp-selector.md b/extensions/amp-selector/0.1/amp-selector.md
new file mode 100644
index 0000000000000..120e90d5784c9
--- /dev/null
+++ b/extensions/amp-selector/0.1/amp-selector.md
@@ -0,0 +1,179 @@
+---
+$category@: dynamic-content
+formats:
+  - websites
+  - email
+teaser:
+  text: Represents a control that presents a menu of options and lets the user choose from it.
+---
+
+<!---
+Copyright 2016 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.
+-->
+
+# amp-selector
+
+## Usage
+
+The AMP selector is a control that presents a list of options and lets the user choose one or many options; the contents of the options aren't just limited to text.
+
+-   An `amp-selector` can contain any arbitrary HTML elements or AMP components (e.g., `amp-carousel`, `amp-img`, etc.).
+-   An `amp-selector` cannot contain any nested `amp-selector` controls.
+-   Selectable options can be set by adding the `option` attribute to the element and assigning a value to the attribute (e.g., `<li option='value'></li>`).
+-   Disabled options can be set by adding the `disabled` attribute to the element (e.g., `<li option='d' disabled></li>`).
+-   Preselected options can be set by adding the `selected` attribute to the element (e.g., `<li option='b' selected></li>`).
+-   To allow for multiple selections, add the `multiple` attribute to the `amp-selector` element. By default, the `amp-selector` allows for one selection at a time.
+-   To disable the entire `amp-selector`, add the `disabled` attribute to the `amp-selector` element.
+-   When an `amp-selector` contains a `name` attribute and the `amp-selector` is inside a `form` tag, if a submit event occurs on the form, the `amp-selector`behaves like a radio-button/checkbox group and submits the selected values (the ones assigned to the option) against the name of the `amp-selector`.
+
+Example:
+
+```html
+<form action="/" method="get" target="_blank" id="form1">
+  <amp-selector layout="container" name="single_image_select">
+    <ul>
+      <li>
+        <amp-img src="/img1.png" width="50" height="50" option="1"></amp-img>
+      </li>
+      <li>
+        <amp-img src="/img2.png" width="50" height="50" option="2"></amp-img>
+      </li>
+      <li option="na" selected>None of the Above</li>
+    </ul>
+  </amp-selector>
+  <amp-selector layout="container" name="multi_image_select" multiple>
+    <amp-img src="/img1.png" width="50" height="50" option="1"></amp-img>
+    <amp-img src="/img2.png" width="50" height="50" option="2"></amp-img>
+    <amp-img src="/img3.png" width="50" height="50" option="3"></amp-img>
+  </amp-selector>
+  <amp-selector layout="container" name="multi_image_select_1" multiple>
+    <amp-carousel id="carousel-1" width="200" height="60" controls>
+      <amp-img src="/img1.png" width="80" height="60" option="a"></amp-img>
+      <amp-img
+        src="/img2.png"
+        width="80"
+        height="60"
+        option="b"
+        selected
+      ></amp-img>
+      <amp-img src="/img3.png" width="80" height="60" option="c"></amp-img>
+      <amp-img
+        src="/img4.png"
+        width="80"
+        height="60"
+        option="d"
+        disabled
+      ></amp-img>
+    </amp-carousel>
+  </amp-selector>
+</form>
+<amp-selector
+  layout="container"
+  name="multi_image_select_2"
+  multiple
+  form="form1"
+>
+  <amp-carousel id="carousel-1" width="400" height="300" type="slides" controls>
+    <amp-img src="/img1.png" width="80" height="60" option="a"></amp-img>
+    <amp-img
+      src="/img2.png"
+      width="80"
+      height="60"
+      option="b"
+      selected
+    ></amp-img>
+    <amp-img src="/img3.png" width="80" height="60" option="c"></amp-img>
+    <amp-img src="/img4.png" width="80" height="60" option="d"></amp-img>
+  </amp-carousel>
+</amp-selector>
+```
+
+### Clearing selections
+
+To clear all selections when an element is tapped or clicked, set the [`on`](../../../docs/spec/amp-actions-and-events.md) action attribute on the element, and specify the AMP Selector `id` with the `clear` action method.
+
+Example:
+
+```html
+<button on="tap:mySelector.clear">Clear Selection</button>
+<amp-selector id="mySelector" layout="container" multiple>
+  <div option>Option One</div>
+  <div option>Option Two</div>
+  <div option>Option Three</div>
+</amp-selector>
+```
+
+{% call callout('Tip', type='success') %}
+See live demos at [AMP By Example](https://amp.dev/documentation/examples/components/amp-selector/).
+{% endcall %}
+
+## Attributes
+
+### Attributes on `<amp-selector>`
+
+#### disabled, form, multiple, name
+
+The attributes above behave the same way as they do on a standard HTML [`<select>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/select) element.
+
+#### keyboard-select-mode
+
+The `keyboard-select-mode` attribute dictates the keyboard navigation behavior for options inside `<amp-selector>`.
+
+<ul>
+  <li>
+    `none` (default): The tab key changes focus between items in the `<amp-selector>`. The user must press enter or space to change the selection. Arrow keys are disabled.
+  </li>
+  <li>
+    `focus`: Tab key gives focus to `<amp-selector>`. The user navigates between items with the arrow keys. Must press space or enter to change the selection.
+  </li>
+  <li>
+    `select`: Tab key gives focus to `<amp-selector>`. The selection changes as the user navigates options with arrow keys.
+  </li>
+</ul>
+
+### Attributes on `<amp-selector>` options
+
+#### option
+
+Indicates that the option is selectable. If a value is specified, the contents of the value is submitted with the form.
+
+#### disabled, selected
+
+The attributes above behave the same way as they do on a standard HTML [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) element.
+
+## Events
+
+Events may trigger actions on other AMP components using the `on` attribute.
+e.g. `on="select: my-tab.show"`
+
+Read more about [AMP Actions and Events](../../../docs/spec/amp-actions-and-events.md).
+
+### select
+
+`amp-selector` triggers the `select` event when the user selects an option.
+Multi-selectors and single-selectors fire this when selecting or unselecting options.
+Tapping disabled options does not trigger the `select` event.
+
+<ul>
+  <li>
+  `event.targetOption` contains the `option` attribute value of the selected element.</li>
+  <li>
+  `event.selectedOptions` contains an array of the `option` attribute values of all selected elements.
+  </li>
+</ul>
+
+## Validation
+
+See [amp-selector rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-selector/validator-amp-selector.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-selector/0.1/test-e2e/test-amp-selector-tabs.js b/extensions/amp-selector/0.1/test-e2e/test-amp-selector-tabs.js
deleted file mode 100644
index 85ab75c57811e..0000000000000
--- a/extensions/amp-selector/0.1/test-e2e/test-amp-selector-tabs.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * 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.
- */
-
-describes.endtoend(
-  'amp-selector',
-  {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-selector/amp-selector-tabs.html',
-    environments: ['single', 'viewer-demo'],
-  },
-  async (env) => {
-    let controller;
-
-    beforeEach(() => {
-      controller = env.controller;
-    });
-
-    it('should render correctly', async () => {
-      const selector = await controller.findElement('#tabs');
-
-      await expect(controller.getElementAttribute(selector, 'role')).to.equal(
-        'tablist'
-      );
-
-      const firstTab = await controller.findElement('#tab1Selector');
-      await expect(controller.getElementAttribute(firstTab, 'selected')).to
-        .exist;
-
-      const image = await controller.findElement('#firstImage');
-      await expect(
-        controller.getElementProperty(image, 'clientWidth')
-      ).to.be.greaterThan(0);
-
-      const internalImg = await controller.findElement('#firstImage img');
-      await expect(internalImg).to.exist;
-    });
-
-    it('should switch tabs on button click', async () => {
-      const secondTab = await controller.findElement('#tab2Selector');
-      await expect(controller.getElementAttribute(secondTab, 'selected')).to.not
-        .exist;
-
-      await controller.click(secondTab);
-      await expect(controller.getElementAttribute(secondTab, 'selected')).to
-        .exist;
-
-      const image = await controller.findElement('#secondImage');
-      await expect(
-        controller.getElementProperty(image, 'clientWidth')
-      ).to.be.greaterThan(0);
-
-      const internalImg = await controller.findElement('#secondImage img');
-      await expect(internalImg).to.exist;
-    });
-
-    it('should switch tabs on toggle ', async () => {
-      const thirdTabToggle = await controller.findElement('#tab3Toggle');
-      const thirdTab = await controller.findElement('#tab3Selector');
-      await expect(controller.getElementAttribute(thirdTab, 'selected')).to.not
-        .exist;
-
-      await controller.click(thirdTabToggle);
-      await expect(controller.getElementAttribute(thirdTab, 'selected')).to
-        .exist;
-
-      const image = await controller.findElement('#thirdImage');
-      await expect(
-        controller.getElementProperty(image, 'clientWidth')
-      ).to.be.greaterThan(0);
-
-      const internalImg = await controller.findElement('#thirdImage img');
-      await expect(internalImg).to.exist;
-    });
-  }
-);
diff --git a/extensions/amp-selector/0.1/test/test-amp-selector.js b/extensions/amp-selector/0.1/test/test-amp-selector.js
index c346a7c2c8923..f6312754ef46e 100644
--- a/extensions/amp-selector/0.1/test/test-amp-selector.js
+++ b/extensions/amp-selector/0.1/test/test-amp-selector.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import '../amp-selector';
 import {ActionService} from '../../../../src/service/action-impl';
-import {ActionTrust} from '../../../../src/action-constants';
-import {AmpEvents} from '../../../../src/amp-events';
-import {Keys} from '../../../../src/utils/key-codes';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
+import {AmpEvents} from '../../../../src/core/constants/amp-events';
+import {AmpSelector} from '../amp-selector';
+import {Keys} from '../../../../src/core/constants/key-codes';
 import {Services} from '../../../../src/services';
 import {
   createElementWithAttributes,
@@ -42,6 +42,15 @@ describes.realWin(
   (env) => {
     let win;
     describe('test extension', () => {
+      let getElementsSizesStub;
+
+      beforeEach(() => {
+        getElementsSizesStub = env.sandbox.stub(
+          AmpSelector.prototype,
+          'getElementsSizes_'
+        );
+      });
+
       function getSelector(options) {
         win = env.win;
 
@@ -90,15 +99,13 @@ describes.realWin(
 
           ampSelector.appendChild(child);
         }
-        env.sandbox
-          .stub(ampSelector.implementation_, 'getElementsSizes_')
-          .resolves(rectArray);
+        getElementsSizesStub.resolves(rectArray);
         win.document.body.appendChild(ampSelector);
         return ampSelector;
       }
 
-      function keyPress(ampSelector, key, opt_target) {
-        const impl = ampSelector.implementation_;
+      async function keyPress(ampSelector, key, opt_target) {
+        const impl = await ampSelector.getImpl(false);
         const event = {
           key,
           preventDefault: () => {},
@@ -107,11 +114,11 @@ describes.realWin(
         return impl.keyDownHandler_(event);
       }
 
-      it('should build properly', function* () {
+      it('should build properly', async () => {
         let ampSelector = getSelector({});
-        let impl = ampSelector.implementation_;
+        let impl = await ampSelector.getImpl(false);
         let initSpy = env.sandbox.spy(impl, 'init_');
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
         expect(impl.isMultiple_).to.be.false;
         expect(initSpy).to.be.calledOnce;
 
@@ -124,9 +131,9 @@ describes.realWin(
             selectedCount: 2,
           },
         });
-        impl = ampSelector.implementation_;
+        impl = await ampSelector.getImpl(false);
         initSpy = env.sandbox.spy(impl, 'init_');
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
         expect(impl.isMultiple_).to.be.true;
         expect(initSpy).to.be.calledOnce;
 
@@ -140,14 +147,14 @@ describes.realWin(
             selectedCount: 2,
           },
         });
-        impl = ampSelector.implementation_;
+        impl = await ampSelector.getImpl(false);
         initSpy = env.sandbox.spy(impl, 'init_');
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
         expect(impl.isMultiple_).to.be.true;
         expect(initSpy).to.be.calledOnce;
       });
 
-      it('should retain existing roles', function* () {
+      it('should retain existing roles', async () => {
         const ampSelector = getSelector({
           attributes: {
             role: 'tablist',
@@ -160,20 +167,20 @@ describes.realWin(
             selectedCount: 2,
           },
         });
-        const impl = ampSelector.implementation_;
-        yield ampSelector.build();
+        const impl = await ampSelector.getImpl(false);
+        await ampSelector.buildInternal();
         expect(impl.element.getAttribute('role')).to.equal('tablist');
         const options = impl.getElementsForTesting();
         expect(options[0].getAttribute('role')).to.equal('tab');
       });
 
-      it('should init properly for single select', function* () {
+      it('should init properly for single select', async () => {
         let ampSelector = getSelector({});
-        let impl = ampSelector.implementation_;
+        let impl = await ampSelector.getImpl(false);
         impl.mutateElement = (fn) => fn();
         let setInputsSpy = env.sandbox.spy(impl, 'setInputs_');
         let initSpy = env.sandbox.spy(impl, 'init_');
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
         expect(impl.isMultiple_).to.be.false;
         expect(initSpy).to.have.been.calledOnce;
         expect(impl.getSelectedElementsForTesting().length).to.equal(0);
@@ -185,10 +192,10 @@ describes.realWin(
             selectedCount: 2,
           },
         });
-        impl = ampSelector.implementation_;
+        impl = await ampSelector.getImpl(false);
         setInputsSpy = env.sandbox.spy(impl, 'setInputs_');
         initSpy = env.sandbox.spy(impl, 'init_');
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
         expect(impl.isMultiple_).to.be.false;
         expect(initSpy).to.have.been.calledOnce;
         expect(impl.getSelectedElementsForTesting().length).to.equal(1);
@@ -198,7 +205,7 @@ describes.realWin(
         expect(setInputsSpy).to.have.been.calledThrice; // once to set, twice to clear
       });
 
-      it('should init properly for multiselect', function* () {
+      it('should init properly for multiselect', async () => {
         const ampSelector = getSelector({
           attributes: {
             multiple: true,
@@ -208,17 +215,17 @@ describes.realWin(
             selectedCount: 2,
           },
         });
-        const impl = ampSelector.implementation_;
+        const impl = await ampSelector.getImpl(false);
         const initSpy = env.sandbox.spy(impl, 'init_');
         const setInputsSpy = env.sandbox.spy(impl, 'setInputs_');
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
         expect(impl.isMultiple_).to.be.true;
         expect(initSpy).to.have.been.calledOnce;
         expect(impl.getSelectedElementsForTesting().length).to.equal(2);
         expect(setInputsSpy).to.have.been.calledOnce;
       });
 
-      it('should init properly for selector with disabled options', function* () {
+      it('should init properly for selector with disabled options', async () => {
         const ampSelector = getSelector({
           attributes: {
             multiple: true,
@@ -229,10 +236,10 @@ describes.realWin(
             disabledCount: 5,
           },
         });
-        const impl = ampSelector.implementation_;
+        const impl = await ampSelector.getImpl(false);
         const initSpy = env.sandbox.spy(impl, 'init_');
         const setInputsSpy = env.sandbox.spy(impl, 'setInputs_');
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
 
         expect(impl.isMultiple_).to.be.true;
         expect(initSpy).to.have.been.calledOnce;
@@ -241,7 +248,7 @@ describes.realWin(
         expect(setInputsSpy).to.have.been.calledOnce;
       });
 
-      it('should setSelection for single select', function* () {
+      it('should setSelection for single select', async () => {
         const ampSelector = getSelector({
           config: {
             count: 5,
@@ -249,11 +256,11 @@ describes.realWin(
           },
         });
 
-        const impl = ampSelector.implementation_;
+        const impl = await ampSelector.getImpl(false);
         const initSpy = env.sandbox.spy(impl, 'init_');
         const setInputsSpy = env.sandbox.spy(impl, 'setInputs_');
         const clearSelectionSpy = env.sandbox.spy(impl, 'clearSelection_');
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
 
         const options = impl.getElementsForTesting();
         expect(impl.isMultiple_).to.be.false;
@@ -270,7 +277,7 @@ describes.realWin(
         expect(options[3].getAttribute('aria-selected')).to.be.equal('true');
       });
 
-      it('should setSelection for multi select', function* () {
+      it('should setSelection for multi select', async () => {
         const ampSelector = getSelector({
           attributes: {
             multiple: true,
@@ -281,10 +288,10 @@ describes.realWin(
           },
         });
 
-        const impl = ampSelector.implementation_;
+        const impl = await ampSelector.getImpl(false);
         const initSpy = env.sandbox.spy(impl, 'init_');
         const setInputsSpy = env.sandbox.spy(impl, 'setInputs_');
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
 
         const options = impl.getElementsForTesting();
         expect(impl.isMultiple_).to.be.true;
@@ -302,7 +309,7 @@ describes.realWin(
         expect(options[3].getAttribute('aria-selected')).to.be.equal('true');
       });
 
-      it('should clearSelection', function* () {
+      it('should clearSelection', async () => {
         const ampSelector = getSelector({
           attributes: {
             multiple: true,
@@ -313,10 +320,10 @@ describes.realWin(
           },
         });
 
-        const impl = ampSelector.implementation_;
+        const impl = await ampSelector.getImpl(false);
         const initSpy = env.sandbox.spy(impl, 'init_');
         const setInputsSpy = env.sandbox.spy(impl, 'setInputs_');
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
 
         const options = impl.getElementsForTesting();
         expect(impl.isMultiple_).to.be.true;
@@ -334,10 +341,10 @@ describes.realWin(
         expect(options[1].getAttribute('aria-selected')).to.be.equal('false');
       });
 
-      it('should setInputs properly', function* () {
+      it('should setInputs properly', async () => {
         let ampSelector = getSelector({});
-        let impl = ampSelector.implementation_;
-        yield ampSelector.build();
+        let impl = await ampSelector.getImpl(false);
+        await ampSelector.buildInternal();
         expect(impl.inputs_.length).to.equal(0);
 
         ampSelector = getSelector({
@@ -346,8 +353,8 @@ describes.realWin(
           },
         });
 
-        impl = ampSelector.implementation_;
-        yield ampSelector.build();
+        impl = await ampSelector.getImpl(false);
+        await ampSelector.buildInternal();
         expect(impl.inputs_.length).to.equal(0);
 
         ampSelector = getSelector({
@@ -359,8 +366,8 @@ describes.realWin(
             selectedCount: 0,
           },
         });
-        impl = ampSelector.implementation_;
-        yield ampSelector.build();
+        impl = await ampSelector.getImpl(false);
+        await ampSelector.buildInternal();
         expect(impl.inputs_.length).to.equal(0);
 
         ampSelector = getSelector({
@@ -372,8 +379,8 @@ describes.realWin(
             selectedCount: 2,
           },
         });
-        impl = ampSelector.implementation_;
-        yield ampSelector.build();
+        impl = await ampSelector.getImpl(false);
+        await ampSelector.buildInternal();
 
         let options = impl.getElementsForTesting();
         expect(impl.inputs_.length).to.equal(1);
@@ -416,9 +423,9 @@ describes.realWin(
             selectedCount: 2,
           },
         });
-        impl = ampSelector.implementation_;
+        impl = await ampSelector.getImpl(false);
 
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
         options = impl.getElementsForTesting();
         expect(impl.inputs_.length).to.equal(2);
         expect(impl.getSelectedElementsForTesting()).to.include.members([
@@ -436,7 +443,7 @@ describes.realWin(
         ]);
       });
 
-      it('should not create hidden inputs for disabled options', function* () {
+      it('should not create hidden inputs for disabled options', async () => {
         const ampSelector = getSelector({
           attributes: {
             name: 'muti_select',
@@ -448,8 +455,8 @@ describes.realWin(
             disabledCount: 4,
           },
         });
-        const impl = ampSelector.implementation_;
-        yield ampSelector.build();
+        const impl = await ampSelector.getImpl(false);
+        await ampSelector.buildInternal();
 
         const options = impl.getElementsForTesting();
         expect(impl.inputs_.length).to.equal(0);
@@ -458,7 +465,7 @@ describes.realWin(
         expect(impl.inputs_.length).to.equal(0);
       });
 
-      it('should handle clicks', function* () {
+      it('should handle clicks', async () => {
         let ampSelector = getSelector({
           attributes: {
             name: 'single_select',
@@ -468,9 +475,9 @@ describes.realWin(
             selectedCount: 2,
           },
         });
-        let impl = ampSelector.implementation_;
+        let impl = await ampSelector.getImpl(false);
         impl.mutateElement = (fn) => fn();
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
 
         let options = impl.getElementsForTesting();
         let clearSelectionSpy = env.sandbox.spy(impl, 'clearSelection_');
@@ -512,9 +519,9 @@ describes.realWin(
           },
         });
 
-        impl = ampSelector.implementation_;
+        impl = await ampSelector.getImpl(false);
         impl.mutateElement = (fn) => fn();
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
 
         options = impl.getElementsForTesting();
         clearSelectionSpy = env.sandbox.spy(impl, 'clearSelection_');
@@ -556,9 +563,9 @@ describes.realWin(
           },
         });
 
-        impl = ampSelector.implementation_;
+        impl = await ampSelector.getImpl(false);
         impl.mutateElement = (fn) => fn();
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
         clearSelectionSpy = env.sandbox.spy(impl, 'clearSelection_');
         setSelectionSpy = env.sandbox.spy(impl, 'setSelection_');
 
@@ -571,7 +578,7 @@ describes.realWin(
         expect(clearSelectionSpy).to.not.have.been.called;
       });
 
-      it('should handle keyboard selection', function* () {
+      it('should handle keyboard selection', async () => {
         let ampSelector = getSelector({
           attributes: {
             name: 'single_select',
@@ -581,22 +588,22 @@ describes.realWin(
             selectedCount: 2,
           },
         });
-        let impl = ampSelector.implementation_;
+        let impl = await ampSelector.getImpl(false);
         impl.mutateElement = (fn) => fn();
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
 
         let options = impl.getElementsForTesting();
         let clearSelectionSpy = env.sandbox.spy(impl, 'clearSelection_');
         let setSelectionSpy = env.sandbox.spy(impl, 'setSelection_');
 
-        keyPress(ampSelector, Keys.ENTER, options[3]);
+        await keyPress(ampSelector, Keys.ENTER, options[3]);
         expect(options[3].hasAttribute('selected')).to.be.true;
         expect(setSelectionSpy).to.have.been.calledWith(options[3]);
         expect(clearSelectionSpy).to.have.been.calledWith(options[1]);
         expect(setSelectionSpy).to.have.been.calledOnce;
         expect(clearSelectionSpy).to.have.been.calledOnce;
 
-        keyPress(ampSelector, Keys.ENTER, options[3]);
+        await keyPress(ampSelector, Keys.ENTER, options[3]);
         expect(setSelectionSpy).to.have.been.calledOnce;
         expect(clearSelectionSpy).to.have.been.calledOnce;
 
@@ -611,27 +618,27 @@ describes.realWin(
           },
         });
 
-        impl = ampSelector.implementation_;
+        impl = await ampSelector.getImpl(false);
         impl.mutateElement = (fn) => fn();
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
 
         options = impl.getElementsForTesting();
         clearSelectionSpy = env.sandbox.spy(impl, 'clearSelection_');
         setSelectionSpy = env.sandbox.spy(impl, 'setSelection_');
 
-        keyPress(ampSelector, Keys.SPACE, options[4]);
+        await keyPress(ampSelector, Keys.SPACE, options[4]);
         expect(options[4].hasAttribute('selected')).to.be.true;
         expect(setSelectionSpy).to.have.been.calledWith(options[4]);
         expect(setSelectionSpy).to.have.been.calledOnce;
         expect(clearSelectionSpy).to.not.have.been.called;
 
-        keyPress(ampSelector, Keys.SPACE, options[4]);
+        await keyPress(ampSelector, Keys.SPACE, options[4]);
         expect(options[4].hasAttribute('selected')).to.be.false;
         expect(clearSelectionSpy).to.have.been.calledWith(options[4]);
         expect(setSelectionSpy).to.have.been.calledOnce;
         expect(clearSelectionSpy).to.have.been.calledOnce;
 
-        keyPress(ampSelector, Keys.ENTER, options[2]);
+        await keyPress(ampSelector, Keys.ENTER, options[2]);
         expect(options[2].hasAttribute('selected')).to.be.true;
         expect(setSelectionSpy).to.have.been.calledWith(options[2]);
         expect(setSelectionSpy).to.have.been.calledTwice;
@@ -648,18 +655,18 @@ describes.realWin(
           },
         });
 
-        impl = ampSelector.implementation_;
+        impl = await ampSelector.getImpl(false);
         impl.mutateElement = (fn) => fn();
-        yield ampSelector.build();
+        await ampSelector.buildInternal();
         clearSelectionSpy = env.sandbox.spy(impl, 'clearSelection_');
         setSelectionSpy = env.sandbox.spy(impl, 'setSelection_');
 
-        keyPress(ampSelector, Keys.SPACE, impl.element.children[0]);
+        await keyPress(ampSelector, Keys.SPACE, impl.element.children[0]);
         expect(setSelectionSpy).to.not.have.been.called;
         expect(clearSelectionSpy).to.not.have.been.called;
       });
 
-      it('should update selection when `selected` attribute is mutated', () => {
+      it('should update selection when `selected` attribute is mutated', async () => {
         const ampSelector = getSelector({
           config: {
             count: 5,
@@ -667,8 +674,8 @@ describes.realWin(
           },
         });
 
-        const impl = ampSelector.implementation_;
-        ampSelector.build();
+        const impl = await ampSelector.getImpl(false);
+        await ampSelector.buildInternal();
 
         const options = impl.getElementsForTesting();
         const setInputsSpy = env.sandbox.spy(impl, 'setInputs_');
@@ -690,7 +697,7 @@ describes.realWin(
         expect(setInputsSpy).to.have.callCount(4);
       });
 
-      it('should support `disabled` attribute mutation', () => {
+      it('should support `disabled` attribute mutation', async () => {
         const ampSelector = getSelector({
           config: {
             count: 5,
@@ -698,9 +705,9 @@ describes.realWin(
           },
         });
 
-        const impl = ampSelector.implementation_;
+        const impl = await ampSelector.getImpl(false);
         impl.mutateElement = (fn) => fn();
-        ampSelector.build();
+        await ampSelector.buildInternal();
 
         const options = impl.getElementsForTesting();
         expect(options[0].hasAttribute('selected')).to.be.true;
@@ -736,8 +743,8 @@ describes.realWin(
               selectedCount: 1,
             },
           });
-          ampSelector.build();
-          const impl = ampSelector.implementation_;
+          await ampSelector.buildInternal();
+          const impl = await ampSelector.getImpl(false);
 
           expect(ampSelector.hasAttribute('multiple')).to.be.false;
           expect(ampSelector.children[0].hasAttribute('selected')).to.be.true;
@@ -777,8 +784,8 @@ describes.realWin(
               selectedCount: 1,
             },
           });
-          ampSelector.build();
-          const impl = ampSelector.implementation_;
+          await ampSelector.buildInternal();
+          const impl = await ampSelector.getImpl(false);
 
           expect(ampSelector.hasAttribute('multiple')).to.be.false;
           expect(ampSelector.children[0].hasAttribute('selected')).to.be.true;
@@ -830,15 +837,15 @@ describes.realWin(
         }
       );
 
-      it('should trigger "select" event when user selects an option', () => {
+      it('should trigger "select" event when user selects an option', async () => {
         const ampSelector = getSelector({
           config: {
             count: 5,
             selectedCount: 2,
           },
         });
-        ampSelector.build();
-        const impl = ampSelector.implementation_;
+        await ampSelector.buildInternal();
+        const impl = await ampSelector.getImpl(false);
         impl.mutateElement = (fn) => fn();
 
         const options = impl.getElementsForTesting();
@@ -864,8 +871,8 @@ describes.realWin(
             selectedCount: 1,
           },
         });
-        ampSelector.build();
-        const impl = ampSelector.implementation_;
+        await ampSelector.buildInternal();
+        const impl = await ampSelector.getImpl(false);
         impl.mutateElement = (fn) => fn();
 
         const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
@@ -889,7 +896,7 @@ describes.realWin(
         expect(trust).to.equal(789);
       });
 
-      it('should trigger "select" event for multiple selections', function* () {
+      it('should trigger "select" event for multiple selections', async () => {
         const ampSelector = getSelector({
           attributes: {
             multiple: true,
@@ -901,8 +908,8 @@ describes.realWin(
         ampSelector.children[0].setAttribute('selected', '');
         ampSelector.children[1].setAttribute('selected', '');
 
-        ampSelector.build();
-        const impl = ampSelector.implementation_;
+        await ampSelector.buildInternal();
+        const impl = await ampSelector.getImpl(false);
         impl.mutateElement = (fn) => fn();
 
         const options = impl.getElementsForTesting();
@@ -928,7 +935,7 @@ describes.realWin(
       it(
         'should trigger `select` action when user uses ' +
           '`selectDown` action with default delta value of 1',
-        () => {
+        async () => {
           const ampSelector = getSelector({
             attributes: {
               id: 'ampSelector',
@@ -938,8 +945,8 @@ describes.realWin(
             },
           });
           ampSelector.children[0].setAttribute('selected', '');
-          ampSelector.build();
-          const impl = ampSelector.implementation_;
+          await ampSelector.buildInternal();
+          const impl = await ampSelector.getImpl(false);
           const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
 
           expect(ampSelector.hasAttribute('multiple')).to.be.false;
@@ -969,7 +976,7 @@ describes.realWin(
       it(
         'should trigger `select` action when user uses ' +
           '`selectUp` action with default delta value of 1',
-        () => {
+        async () => {
           const ampSelector = getSelector({
             attributes: {
               id: 'ampSelector',
@@ -979,8 +986,8 @@ describes.realWin(
             },
           });
           ampSelector.children[0].setAttribute('selected', '');
-          ampSelector.build();
-          const impl = ampSelector.implementation_;
+          await ampSelector.buildInternal();
+          const impl = await ampSelector.getImpl(false);
           const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
 
           expect(ampSelector.hasAttribute('multiple')).to.be.false;
@@ -1011,7 +1018,7 @@ describes.realWin(
       it(
         'should trigger `select` action when user uses ' +
           '`selectUp`/`selectDown` action with user specified delta value',
-        () => {
+        async () => {
           const ampSelector = getSelector({
             attributes: {
               id: 'ampSelector',
@@ -1021,8 +1028,8 @@ describes.realWin(
             },
           });
           ampSelector.children[0].setAttribute('selected', '');
-          ampSelector.build();
-          const impl = ampSelector.implementation_;
+          await ampSelector.buildInternal();
+          const impl = await ampSelector.getImpl(false);
 
           expect(ampSelector.hasAttribute('multiple')).to.be.false;
           expect(ampSelector.children[0].hasAttribute('selected')).to.be.true;
@@ -1051,7 +1058,7 @@ describes.realWin(
         'should trigger `select` action when user uses ' +
           '`selectUp`/`selectDown` action with user specified delta value ' +
           '(test large values)',
-        () => {
+        async () => {
           const ampSelector = getSelector({
             attributes: {
               id: 'ampSelector',
@@ -1061,8 +1068,8 @@ describes.realWin(
             },
           });
           ampSelector.children[1].setAttribute('selected', '');
-          ampSelector.build();
-          const impl = ampSelector.implementation_;
+          await ampSelector.buildInternal();
+          const impl = await ampSelector.getImpl(false);
 
           expect(ampSelector.hasAttribute('multiple')).to.be.false;
           expect(ampSelector.children[1].hasAttribute('selected')).to.be.true;
@@ -1088,22 +1095,23 @@ describes.realWin(
       );
 
       describe('keyboard-select-mode', () => {
-        it('should have `none` mode by default', () => {
+        it('should have `none` mode by default', async () => {
           const ampSelector = getSelector({});
-          ampSelector.build();
-          expect(ampSelector.implementation_.kbSelectMode_).to.equal('none');
+          await ampSelector.buildInternal();
+          const impl = await ampSelector.getImpl(false);
+          expect(impl.kbSelectMode_).to.equal('none');
         });
 
         it(
           'should initially focus selected option ONLY if ' +
             'it exists for single-select, otherwise first option',
-          () => {
+          async () => {
             const selectorWithNoSelection = getSelector({
               attributes: {
                 'keyboard-select-mode': 'focus',
               },
             });
-            selectorWithNoSelection.build();
+            await selectorWithNoSelection.buildInternal();
             expect(selectorWithNoSelection.children[0].tabIndex).to.equal(0);
             for (let i = 1; i < selectorWithNoSelection.children.length; i++) {
               // No other options should be reachable by
@@ -1119,14 +1127,14 @@ describes.realWin(
               },
             });
             selectorWithSelection.children[1].setAttribute('selected', '');
-            selectorWithSelection.build();
+            await selectorWithSelection.buildInternal();
             expect(selectorWithSelection.children[0].tabIndex).to.equal(-1);
             expect(selectorWithSelection.children[1].tabIndex).to.equal(0);
             expect(selectorWithSelection.children[2].tabIndex).to.equal(-1);
           }
         );
 
-        it('should initially focus first option for multi-select', () => {
+        it('should initially focus first option for multi-select', async () => {
           const ampSelector = getSelector({
             attributes: {
               multiple: true,
@@ -1137,13 +1145,13 @@ describes.realWin(
             },
           });
           ampSelector.children[1].setAttribute('selected', '');
-          ampSelector.build();
+          await ampSelector.buildInternal();
           expect(ampSelector.children[0].tabIndex).to.equal(0);
           expect(ampSelector.children[1].tabIndex).to.equal(-1);
           expect(ampSelector.children[2].tabIndex).to.equal(-1);
         });
 
-        it('should NOT update focus if keyboard-select-mode is disabled', () => {
+        it('should NOT update focus if keyboard-select-mode is disabled', async () => {
           const ampSelector = getSelector({
             attributes: {
               'keyboard-select-mode': 'none',
@@ -1152,19 +1160,17 @@ describes.realWin(
               count: 3,
             },
           });
-          const spy = env.sandbox.spy(
-            ampSelector.implementation_,
-            'navigationKeyDownHandler_'
-          );
-          ampSelector.build();
-          keyPress(ampSelector, Keys.RIGHT_ARROW);
+          const impl = await ampSelector.getImpl(false);
+          const spy = env.sandbox.spy(impl, 'navigationKeyDownHandler_');
+          await ampSelector.buildInternal();
+          await keyPress(ampSelector, Keys.RIGHT_ARROW);
           expect(spy).to.not.have.been.called;
         });
 
         it(
           'should update focus when the user presses the arrow keys when ' +
             'keyboard-select-mode is enabled',
-          () => {
+          async () => {
             const ampSelector = getSelector({
               attributes: {
                 'keyboard-select-mode': 'focus',
@@ -1173,7 +1179,7 @@ describes.realWin(
                 count: 3,
               },
             });
-            ampSelector.build();
+            await ampSelector.buildInternal();
             expect(ampSelector.children[0].tabIndex).to.equal(0);
             expect(ampSelector.children[1].tabIndex).to.equal(-1);
             expect(ampSelector.children[2].tabIndex).to.equal(-1);
@@ -1195,7 +1201,7 @@ describes.realWin(
         it(
           'should update focus when the user presses the home key when ' +
             'keyboard-select-mode is enabled',
-          () => {
+          async () => {
             const ampSelector = getSelector({
               attributes: {
                 'keyboard-select-mode': 'focus',
@@ -1206,7 +1212,7 @@ describes.realWin(
             });
             ampSelector.children[2].setAttribute('selected', '');
             ampSelector.children[0].setAttribute('hidden', '');
-            ampSelector.build();
+            await ampSelector.buildInternal();
             expect(ampSelector.children[0].tabIndex).to.equal(-1);
             expect(ampSelector.children[1].tabIndex).to.equal(-1);
             expect(ampSelector.children[2].tabIndex).to.equal(0);
@@ -1221,7 +1227,7 @@ describes.realWin(
         it(
           'should update focus when the user presses the end key when ' +
             'keyboard-select-mode is enabled',
-          () => {
+          async () => {
             const ampSelector = getSelector({
               attributes: {
                 'keyboard-select-mode': 'focus',
@@ -1231,7 +1237,7 @@ describes.realWin(
               },
             });
             ampSelector.children[2].setAttribute('hidden', '');
-            ampSelector.build();
+            await ampSelector.buildInternal();
             expect(ampSelector.children[0].tabIndex).to.equal(0);
             expect(ampSelector.children[1].tabIndex).to.equal(-1);
             expect(ampSelector.children[2].tabIndex).to.equal(-1);
@@ -1246,7 +1252,7 @@ describes.realWin(
         it(
           'should update focus for single-select when ' +
             'selection is changed without user interaction',
-          () => {
+          async () => {
             const ampSelector = getSelector({
               attributes: {
                 'keyboard-select-mode': 'focus',
@@ -1256,12 +1262,14 @@ describes.realWin(
               },
             });
             ampSelector.children[1].setAttribute('selected', '');
-            ampSelector.build();
+            await ampSelector.buildInternal();
+            const impl = await ampSelector.getImpl(false);
+
             expect(ampSelector.children[0].tabIndex).to.equal(-1);
             expect(ampSelector.children[1].tabIndex).to.equal(0);
             expect(ampSelector.children[2].tabIndex).to.equal(-1);
 
-            ampSelector.implementation_.mutatedAttributesCallback({
+            impl.mutatedAttributesCallback({
               selected: 2,
             });
             expect(ampSelector.children[0].tabIndex).to.equal(-1);
@@ -1278,13 +1286,15 @@ describes.realWin(
             },
           });
           return allowConsoleError(() => {
-            return expect(ampSelector.build()).to.eventually.be.rejectedWith(
+            return expect(
+              ampSelector.buildInternal()
+            ).to.eventually.be.rejectedWith(
               /not supported for multiple selection amp-selector​​​/
             );
           });
         });
 
-        it('should ONLY change selection in `select` mode', () => {
+        it('should ONLY change selection in `select` mode', async () => {
           const ampSelector = getSelector({
             attributes: {
               'keyboard-select-mode': 'select',
@@ -1293,8 +1303,8 @@ describes.realWin(
               count: 3,
             },
           });
-          ampSelector.build();
-          const impl = ampSelector.implementation_;
+          await ampSelector.buildInternal();
+          const impl = await ampSelector.getImpl(false);
           impl.mutateElement = (fn) => fn();
           expect(ampSelector.children[0].hasAttribute('selected')).to.be.false;
           expect(ampSelector.children[1].hasAttribute('selected')).to.be.false;
@@ -1321,7 +1331,7 @@ describes.realWin(
       });
 
       describe('clear action', () => {
-        it('should clear selection of a single select', function* () {
+        it('should clear selection of a single select', async () => {
           const ampSelector = getSelector({
             attributes: {
               id: 'ampSelector',
@@ -1332,8 +1342,8 @@ describes.realWin(
             },
           });
           ampSelector.children[1].setAttribute('selected', '');
-          yield ampSelector.build();
-          yield ampSelector.layoutCallback();
+          await ampSelector.buildInternal();
+          await ampSelector.layoutCallback();
 
           const button = win.document.createElement('button');
           button.setAttribute('on', 'tap:ampSelector.clear');
@@ -1347,7 +1357,7 @@ describes.realWin(
           ).to.equal(0);
         });
 
-        it('should clear selection of a multiselect', function* () {
+        it('should clear selection of a multiselect', async () => {
           const ampSelector = getSelector({
             attributes: {
               id: 'ampSelector',
@@ -1359,8 +1369,8 @@ describes.realWin(
           });
           ampSelector.children[0].setAttribute('selected', '');
           ampSelector.children[3].setAttribute('selected', '');
-          yield ampSelector.build();
-          yield ampSelector.layoutCallback();
+          await ampSelector.buildInternal();
+          await ampSelector.layoutCallback();
 
           const button = win.document.createElement('button');
           button.setAttribute('on', 'tap:ampSelector.clear');
@@ -1377,7 +1387,7 @@ describes.realWin(
       });
 
       describe('on DOM_UPDATE', () => {
-        it('should refresh stored state if child DOM changes', () => {
+        it('should refresh stored state if child DOM changes', async () => {
           const ampSelector = getSelector({
             attributes: {
               'keyboard-select-mode': 'focus',
@@ -1386,8 +1396,8 @@ describes.realWin(
               count: 2,
             },
           });
-          ampSelector.build();
-          const impl = ampSelector.implementation_;
+          await ampSelector.buildInternal();
+          const impl = await ampSelector.getImpl(false);
           impl.mutateElement = (fn) => fn();
 
           expect(ampSelector.children[0].hasAttribute('selected')).to.be.false;
diff --git a/extensions/amp-selector/1.0/amp-selector.css b/extensions/amp-selector/1.0/amp-selector.css
index c5d0be0e90df7..b237dbe4e598f 100644
--- a/extensions/amp-selector/1.0/amp-selector.css
+++ b/extensions/amp-selector/1.0/amp-selector.css
@@ -14,6 +14,14 @@
  * limitations under the License.
  */
 
+/*
+ * Pre-upgrade:
+ * - display:block element
+ */
+amp-selector {
+  display: block;
+}
+
 amp-selector [option] {
   cursor: pointer;
 }
@@ -23,15 +31,15 @@ amp-selector[multiple] [option][selected] {
   outline: solid 1px rgba(0, 0, 0, 0.7);
 }
 
-amp-selector [option][selected] {
-  cursor: auto;
-  outline: solid 1px rgba(0, 0, 0, 0.7);
-}
-
 amp-selector [disabled][option],
 amp-selector[disabled] [option],
 amp-selector [selected][disabled],
 amp-selector[disabled] [selected] {
   cursor: auto;
-  outline: none;
+  opacity: 0.4;
+}
+
+amp-selector [option][selected] {
+  cursor: auto;
+  outline: solid 1px rgba(0, 0, 0, 0.7);
 }
diff --git a/extensions/amp-selector/1.0/amp-selector.js b/extensions/amp-selector/1.0/amp-selector.js
index 50f1a85859ccb..107b82f348222 100644
--- a/extensions/amp-selector/1.0/amp-selector.js
+++ b/extensions/amp-selector/1.0/amp-selector.js
@@ -14,345 +14,80 @@
  * limitations under the License.
  */
 
-import * as Preact from '../../../src/preact';
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {BaseElement} from './base-element';
 import {CSS} from '../../../build/amp-selector-1.0.css';
-import {Option, Selector} from './selector';
-import {PreactBaseElement} from '../../../src/preact/base-element';
 import {Services} from '../../../src/services';
-import {
-  closestAncestorElementBySelector,
-  toggleAttribute,
-} from '../../../src/dom';
 import {createCustomEvent} from '../../../src/event-helper';
-import {dev, userAssert} from '../../../src/log';
-import {dict, omit} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {isExperimentOn} from '../../../src/experiments';
-import {mod} from '../../../src/utils/math';
-import {toArray} from '../../../src/types';
-import {useLayoutEffect} from '../../../src/preact';
+import {toWin} from '../../../src/types';
+import {userAssert} from '../../../src/log';
 
 /** @const {string} */
 const TAG = 'amp-selector';
 
-class AmpSelector extends PreactBaseElement {
+class AmpSelector extends BaseElement {
   /** @override */
   init() {
-    const {element} = this;
-    const action = Services.actionServiceForDoc(this.element);
-
-    // TODO(wg-bento): This hack is in place to prevent doubly rendering.
-    // See https://github.com/ampproject/amp-react-prototype/issues/40.
-    let isExpectedMutation = false;
-    const handleSelect = (value, option, trust) => {
-      fireSelectEvent(this.win, action, element, option, value, trust);
-      isExpectedMutation = true;
-      this.mutateProps(dict({'value': value}));
-    };
-
-    this.registerAction('clear', () => {
-      isExpectedMutation = true;
+    // Set up API
+    this.registerApiAction('clear', (api) => {
+      api./*OK*/ clear();
       this.mutateProps(dict({'value': []}));
     });
 
-    this.registerAction('selectUp', (invocation) => {
-      const {args, trust} = invocation;
+    this.registerApiAction('selectUp', (api, invocation) => {
+      const {args} = invocation;
       const delta = args && args['delta'] !== undefined ? -args['delta'] : -1;
-      const initialValue = /** @type {!Array<string>} */ (this.getProp(
-        'value',
-        []
-      ));
-      const {value, option} = selectByDelta(delta, initialValue, options);
-      handleSelect(value, option, trust);
+      api./*OK*/ selectBy(delta);
     });
-
-    this.registerAction('selectDown', (invocation) => {
-      const {args, trust} = invocation;
+    this.registerApiAction('selectDown', (api, invocation) => {
+      const {args} = invocation;
       const delta = args && args['delta'] !== undefined ? args['delta'] : 1;
-      const initialValue = /** @type {!Array<string>} */ (this.getProp(
-        'value',
-        []
-      ));
-      const {value, option} = selectByDelta(delta, initialValue, options);
-      handleSelect(value, option, trust);
+      api./*OK*/ selectBy(delta);
     });
 
-    this.registerAction(
-      'toggle',
-      (invocation) => {
-        const {args, trust} = invocation;
-        const {'index': index, 'value': opt_select} = args;
-        const initialValue = /** @type {!Array<string>} */ (this.getProp(
-          'value',
-          []
-        ));
-        const toggleValue = toggle(index, initialValue, options, opt_select);
-        if (!toggleValue) {
-          return;
-        }
-        const {'value': value, 'option': option} = toggleValue;
-        handleSelect(value, option, trust);
-      },
-      ActionTrust.LOW
-    );
-
-    const mu = new MutationObserver(() => {
-      if (isExpectedMutation) {
-        isExpectedMutation = false;
-        return;
+    this.registerApiAction('toggle', (api, invocation) => {
+      const {args} = invocation;
+      const {'index': index, 'value': opt_select} = args;
+      userAssert(typeof index === 'number', "'index' must be specified");
+      const option = this.optionState[index];
+      if (option) {
+        api./*OK */ toggle(option, opt_select);
       }
-      this.mutateProps(getOptionState(element, mu));
-    });
-    mu.observe(element, {
-      attributeFilter: ['option', 'selected', 'disabled'],
-      subtree: true,
     });
 
-    const {
-      'value': value,
-      'children': children,
-      'options': options,
-    } = getOptionState(element, mu);
-    return dict({
-      'domElement': element,
-      'children': children,
-      'value': value,
-      'onChange': (e) => {
-        handleSelect(e['value'], e['option'], ActionTrust.HIGH);
-      },
-    });
+    return super.init();
   }
 
   /** @override */
-  isLayoutSupported(unusedLayout) {
-    userAssert(
-      isExperimentOn(this.win, 'amp-selector-bento'),
-      'expected amp-selector-bento experiment to be enabled'
+  triggerEvent(element, eventName, detail) {
+    const event = createCustomEvent(
+      toWin(element.ownerDocument.defaultView),
+      `amp-selector.${eventName}`,
+      detail
+    );
+    Services.actionServiceForDoc(element).trigger(
+      element,
+      eventName,
+      event,
+      ActionTrust.HIGH
     );
-    return true;
-  }
-}
-
-/**
- * @param {!Element} element
- * @param {MutationObserver} mu
- * @return {!JsonObject}
- */
-function getOptionState(element, mu) {
-  const children = [];
-  const options = [];
-  const optionChildren = toArray(element.querySelectorAll('[option]'));
-
-  const value = [];
-  optionChildren
-    // Skip options that are themselves within an option
-    .filter(
-      (el) =>
-        !closestAncestorElementBySelector(
-          dev().assertElement(el.parentElement),
-          '[option]'
-        )
-    )
-    .forEach((child) => {
-      const option = child.getAttribute('option');
-      const selected = child.hasAttribute('selected');
-      const disabled = child.hasAttribute('disabled');
-      const props = {
-        as: OptionShim,
-        option,
-        // TODO: `disabled` is always undefined for OptionShim
-        isDisabled: disabled,
-        disabled,
-        role: child.getAttribute('role') || 'option',
-        domElement: child,
-        // TODO(wg-bento): This implementation causes infinite loops on DOM mutation.
-        // See https://github.com/ampproject/amp-react-prototype/issues/40.
-        postRender: () => {
-          // Skip mutations to avoid cycles.
-          mu.takeRecords();
-        },
-        selected,
-      };
-      if (selected && option) {
-        value.push(option);
-      }
-      const optionChild = <Option {...props} />;
-      options.push(option);
-      children.push(optionChild);
-    });
-  return dict({'value': value, 'children': children, 'options': options});
-}
-
-/**
- * Triggers a 'select' event with two data params:
- * 'targetOption' - option value of the selected or deselected element.
- * 'selectedOptions' - array of option values of selected elements.
- *
- * @param {!Window} win
- * @param {!../../../src/service/action-impl.ActionService} action
- * @param {!Element} el The element that was selected or deslected.
- * @param {string} option
- * @param {Array<string>} value
- * @param {!ActionTrust} trust
- * @private
- */
-function fireSelectEvent(win, action, el, option, value, trust) {
-  const name = 'select';
-  const selectEvent = createCustomEvent(
-    win,
-    `amp-selector.${name}`,
-    dict({'targetOption': option, 'selectedOptions': value})
-  );
-  action.trigger(el, name, selectEvent, trust);
-}
 
-/**
- * @param {number} index
- * @param {!Array<string>} value
- * @param {Array<string>} options
- * @param {boolean=} opt_select
- * @return {JsonObject|undefined}
- */
-function toggle(index, value, options, opt_select) {
-  userAssert(index, "'index' must be specified");
-  userAssert(index >= 0, "'index' must be greater than 0");
-  userAssert(
-    index < options.length,
-    "'index' must be less than the length of options in the <amp-selector>"
-  );
-  const option = options[index];
-  const target = value.indexOf(option);
-  if (target === -1) {
-    if (opt_select == false) {
-      return;
-    }
-    value.push(option);
-  } else {
-    if (opt_select == true) {
-      return;
-    }
-    value.splice(target, 1);
+    super.triggerEvent(element, eventName, detail);
   }
-  return dict({'value': value, 'option': option});
-}
 
-/**
- * This method returns the new selected state by modifying
- * at most one value of the current selected state by the given delta.
- * The modification is done in FIFO order. When no values are selected,
- * the new selected state becomes the option at the given delta.
- *
- * ex: (1, [0, 2], [0, 1, 2, 3]) => [2, 1]
- * ex: (-1, [2, 1], [0, 1, 2, 3]) => [1]
- * ex: (2, [2, 1], [0, 1, 2, 3]) => [1, 0]
- * ex: (-1, [], [0, 1, 2, 3]) => [3]
- *
- * @param {number} delta
- * @param {!Array<string>} value
- * @param {Array<string>} options
- * @return {{value: Array<string>, option: string}|undefined}
- */
-function selectByDelta(delta, value, options) {
-  const previous = options.indexOf(value.shift());
-
-  // If previousIndex === -1 is true, then a negative delta will be offset
-  // one more than is wanted when looping back around in the options.
-  // This occurs when no options are selected and "selectUp" is called.
-  const selectUpWhenNoneSelected = previous === -1 && delta < 0;
-  const index = selectUpWhenNoneSelected ? delta : previous + delta;
-  const option = options[mod(index, options.length)];
-
-  // Only add option if it is not already selected.
-  if (value.indexOf(option) === -1) {
-    value.push(option);
+  /** @override */
+  isLayoutSupported(unusedLayout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-selector'),
+      'expected global "bento" or specific "bento-selector" experiment to be enabled'
+    );
+    return true;
   }
-
-  return {value, option};
 }
 
-/**
- * @param {!JsonObject} props
- * @return {PreactDef.Renderable}
- */
-function OptionShim(props) {
-  const {
-    'domElement': domElement,
-    'onClick': onClick,
-    'selected': selected,
-    'isDisabled': isDisabled,
-    'role': role = 'option',
-  } = props;
-  useLayoutEffect(() => {
-    if (!onClick) {
-      return;
-    }
-    domElement.addEventListener('click', onClick);
-    return () => {
-      domElement.removeEventListener('click', onClick);
-    };
-  }, [domElement, onClick]);
-
-  useLayoutEffect(() => {
-    toggleAttribute(domElement, 'selected', selected);
-  }, [domElement, selected]);
-
-  useLayoutEffect(() => {
-    toggleAttribute(domElement, 'disabled', isDisabled);
-    domElement.setAttribute('aria-disabled', !!isDisabled);
-  }, [domElement, isDisabled]);
-
-  useLayoutEffect(() => {
-    domElement.setAttribute('role', role);
-  }, [domElement, role]);
-
-  return <div></div>;
-}
-
-/**
- * @param {!JsonObject} props
- * @return {PreactDef.Renderable}
- */
-function SelectorShim(props) {
-  const {
-    'domElement': domElement,
-    'role': role = 'listbox',
-    'multiple': multiple,
-    'disabled': disabled,
-  } = props;
-
-  useLayoutEffect(() => {
-    toggleAttribute(domElement, 'multiple', multiple);
-    domElement.setAttribute('aria-multiselectable', !!multiple);
-  }, [domElement, multiple]);
-
-  useLayoutEffect(() => {
-    toggleAttribute(domElement, 'disabled', disabled);
-    domElement.setAttribute('aria-disabled', !!disabled);
-  }, [domElement, disabled]);
-
-  useLayoutEffect(() => {
-    domElement.setAttribute('role', role);
-  }, [domElement, role]);
-
-  const rest = omit(props, ['domElement']);
-  return <Selector {...rest}></Selector>;
-}
-
-/** @override */
-AmpSelector.Component = SelectorShim;
-
-/** @override */
-AmpSelector.detached = true;
-
-/** @override */
-AmpSelector.props = {
-  'disabled': {attr: 'disabled', type: 'boolean'},
-  'multiple': {attr: 'multiple', type: 'boolean'},
-  'name': {attr: 'name'},
-  'role': {attr: 'role'},
-  'keyboardSelectMode': {attr: 'keyboard-select-mode'},
-};
-
 AMP.extension(TAG, '1.0', (AMP) => {
   AMP.registerElement(TAG, AmpSelector, CSS);
 });
diff --git a/extensions/amp-selector/1.0/base-element.js b/extensions/amp-selector/1.0/base-element.js
new file mode 100644
index 0000000000000..0fc52d77303d0
--- /dev/null
+++ b/extensions/amp-selector/1.0/base-element.js
@@ -0,0 +1,281 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {Option, Selector} from './component';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {
+  closestAncestorElementBySelector,
+  createElementWithAttributes,
+  toggleAttribute,
+  tryFocus,
+} from '../../../src/dom';
+import {devAssert} from '../../../src/log';
+import {dict} from '../../../src/core/types/object';
+import {toArray} from '../../../src/core/types/array';
+import {useCallback, useLayoutEffect, useRef} from '../../../src/preact';
+
+export class BaseElement extends PreactBaseElement {
+  /** @override */
+  init() {
+    const {element} = this;
+    this.optionState = [];
+
+    // Listen for mutations
+    const mu = new MutationObserver(() => {
+      if (this.isExpectedMutation) {
+        this.isExpectedMutation = false;
+        return;
+      }
+      const {children, options} = getOptions(element, mu);
+      this.optionState = options;
+      this.mutateProps({children, options});
+    });
+    mu.observe(element, {
+      attributeFilter: ['option', 'selected', 'disabled'],
+      childList: true,
+      subtree: true,
+    });
+
+    // TODO(wg-bento): This hack is in place to prevent doubly rendering.
+    // See https://github.com/ampproject/amp-react-prototype/issues/40.
+    const onChangeHandler = (event) => {
+      const {option, value} = event;
+      this.triggerEvent(
+        this.element,
+        'select',
+        dict({
+          'targetOption': option,
+          'selectedOptions': value,
+        })
+      );
+
+      this.isExpectedMutation = true;
+      this.mutateProps(dict({'value': value}));
+    };
+
+    // Return props
+    const {children, options, value} = getOptions(element, mu);
+    this.optionState = options;
+    return dict({
+      'as': SelectorShim,
+      'shimDomElement': element,
+      'children': children,
+      'value': value,
+      'options': options,
+      'onChange': onChangeHandler,
+    });
+  }
+}
+
+/**
+ * @param {!Element} element
+ * @param {MutationObserver} mu
+ * @return {!JsonObject}
+ */
+function getOptions(element, mu) {
+  const children = [];
+  const options = [];
+  const value = [];
+  const optionChildren = toArray(element.querySelectorAll('[option]'));
+  optionChildren
+    // Skip options that are themselves within an option
+    .filter(
+      (el) =>
+        !closestAncestorElementBySelector(
+          devAssert(el.parentElement?.nodeType == 1, 'Expected an element'),
+          '[option]'
+        )
+    )
+    .forEach((child, index) => {
+      const option = child.getAttribute('option') || index.toString();
+      const selected = child.hasAttribute('selected');
+      const disabled = child.hasAttribute('disabled');
+      const tabIndex = child.getAttribute('tabindex');
+      const props = {
+        as: OptionShim,
+        option,
+        disabled,
+        index,
+        onFocus: () => tryFocus(child),
+        role: child.getAttribute('role') || 'option',
+        shimDomElement: child,
+        // TODO(wg-bento): This implementation causes infinite loops on DOM mutation.
+        // See https://github.com/ampproject/amp-react-prototype/issues/40.
+        postRender: () => {
+          // Skip mutations to avoid cycles.
+          mu.takeRecords();
+        },
+        selected,
+        tabIndex,
+      };
+      if (selected) {
+        value.push(option);
+      }
+      const optionChild = <Option {...props} />;
+      options.push(option);
+      children.push(optionChild);
+    });
+  return {value, children, options};
+}
+
+/**
+ * @param {!SelectorDef.OptionProps} props
+ * @return {PreactDef.Renderable}
+ */
+export function OptionShim({
+  disabled,
+  onClick,
+  onFocus,
+  onKeyDown,
+  role = 'option',
+  selected,
+  shimDomElement,
+  tabIndex,
+}) {
+  const syncEvent = useCallback(
+    (type, handler) => {
+      if (!handler) {
+        return;
+      }
+      shimDomElement.addEventListener(type, handler);
+      return () => shimDomElement.removeEventListener(type, devAssert(handler));
+    },
+    [shimDomElement]
+  );
+
+  useLayoutEffect(() => syncEvent('click', onClick), [onClick, syncEvent]);
+  useLayoutEffect(() => syncEvent('focus', onFocus), [onFocus, syncEvent]);
+  useLayoutEffect(
+    () => syncEvent('keydown', onKeyDown),
+    [onKeyDown, syncEvent]
+  );
+
+  useLayoutEffect(() => {
+    toggleAttribute(shimDomElement, 'selected', !!selected);
+  }, [shimDomElement, selected]);
+
+  useLayoutEffect(() => {
+    toggleAttribute(shimDomElement, 'disabled', !!disabled);
+    shimDomElement.setAttribute('aria-disabled', !!disabled);
+  }, [shimDomElement, disabled]);
+
+  useLayoutEffect(() => {
+    shimDomElement.setAttribute('role', role);
+  }, [shimDomElement, role]);
+
+  useLayoutEffect(() => {
+    if (tabIndex != undefined) {
+      shimDomElement.tabIndex = tabIndex;
+    }
+  }, [shimDomElement, tabIndex]);
+
+  return <div></div>;
+}
+
+/**
+ * @param {!SelectorDef.Props} props
+ * @return {PreactDef.Renderable}
+ */
+function SelectorShim({
+  children,
+  disabled,
+  form,
+  multiple,
+  name,
+  onKeyDown,
+  role = 'listbox',
+  shimDomElement,
+  tabIndex,
+  value,
+}) {
+  const input = useRef(null);
+  if (!input.current) {
+    input.current = createElementWithAttributes(
+      shimDomElement.ownerDocument,
+      'input',
+      {
+        'hidden': '',
+      }
+    );
+  }
+
+  useLayoutEffect(() => {
+    const el = input.current;
+    shimDomElement.insertBefore(el, shimDomElement.firstChild);
+    return () => shimDomElement.removeChild(el);
+  }, [shimDomElement]);
+
+  const syncAttr = useCallback((attr, value) => {
+    if (value) {
+      input.current.setAttribute(attr, value);
+    } else {
+      input.current.removeAttribute(attr);
+    }
+  }, []);
+
+  useLayoutEffect(() => syncAttr('form', form), [form, syncAttr]);
+  useLayoutEffect(() => syncAttr('name', name), [name, syncAttr]);
+  useLayoutEffect(() => syncAttr('value', value), [value, syncAttr]);
+
+  useLayoutEffect(() => {
+    if (!onKeyDown) {
+      return;
+    }
+    shimDomElement.addEventListener('keydown', onKeyDown);
+    return () =>
+      shimDomElement.removeEventListener('keydown', devAssert(onKeyDown));
+  }, [shimDomElement, onKeyDown]);
+
+  useLayoutEffect(() => {
+    toggleAttribute(shimDomElement, 'multiple', !!multiple);
+    shimDomElement.setAttribute('aria-multiselectable', !!multiple);
+  }, [shimDomElement, multiple]);
+
+  useLayoutEffect(() => {
+    toggleAttribute(shimDomElement, 'disabled', !!disabled);
+    shimDomElement.setAttribute('aria-disabled', !!disabled);
+  }, [shimDomElement, disabled]);
+
+  useLayoutEffect(() => {
+    shimDomElement.setAttribute('role', role);
+  }, [shimDomElement, role]);
+
+  useLayoutEffect(() => {
+    if (tabIndex != undefined) {
+      shimDomElement.tabIndex = tabIndex;
+    }
+  }, [shimDomElement, tabIndex]);
+
+  return <div children={children} />;
+}
+
+/** @override */
+BaseElement['Component'] = Selector;
+
+/** @override */
+BaseElement['detached'] = true;
+
+/** @override */
+BaseElement['props'] = {
+  'disabled': {attr: 'disabled', type: 'boolean'},
+  'form': {attr: 'form'},
+  'multiple': {attr: 'multiple', type: 'boolean'},
+  'name': {attr: 'name'},
+  'role': {attr: 'role'},
+  'tabIndex': {attr: 'tabindex'},
+  'keyboardSelectMode': {attr: 'keyboard-select-mode', media: true},
+};
diff --git a/extensions/amp-selector/1.0/component.js b/extensions/amp-selector/1.0/component.js
new file mode 100644
index 0000000000000..8f657c7218395
--- /dev/null
+++ b/extensions/amp-selector/1.0/component.js
@@ -0,0 +1,399 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {Keys} from '../../../src/core/constants/key-codes';
+import {forwardRef} from '../../../src/preact/compat';
+import {mod} from '../../../src/core/math';
+import {tryFocus} from '../../../src/dom';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from '../../../src/preact';
+import {useStyles} from './component.jss';
+import objstr from 'obj-str';
+
+const SelectorContext = Preact.createContext(
+  /** @type {SelectorDef.ContextProps} */ ({selected: []})
+);
+
+/**
+ * Set of namespaces that can be set for lifecycle reporters.
+ *
+ * @enum {string}
+ */
+export const KEYBOARD_SELECT_MODE = {
+  NONE: 'none',
+  FOCUS: 'focus',
+  SELECT: 'select',
+};
+
+/**
+ * @param {!SelectorDef.Props} props
+ * @param {{current: ?SelectorDef.SelectorApi}} ref
+ * @return {PreactDef.Renderable}
+ */
+function SelectorWithRef(
+  {
+    as: Comp = 'div',
+    disabled,
+    defaultValue = [],
+    form,
+    keyboardSelectMode = KEYBOARD_SELECT_MODE.NONE,
+    value,
+    multiple,
+    name,
+    onChange,
+    onKeyDown: customOnKeyDown,
+    role = 'listbox',
+    tabIndex,
+    children,
+    ...rest
+  },
+  ref
+) {
+  const [selectedState, setSelectedState] = useState(value ?? defaultValue);
+  const optionsRef = useRef([]);
+  const focusRef = useRef({active: null, focusMap: {}});
+
+  const selected = value ?? selectedState;
+  const selectOption = useCallback(
+    (option) => {
+      if (!option) {
+        return;
+      }
+      let newValue = null;
+      if (multiple) {
+        newValue = selected.includes(option)
+          ? selected.filter((v) => v != option)
+          : selected.concat(option);
+      } else {
+        newValue = [option];
+      }
+      if (newValue) {
+        setSelectedState(newValue);
+        if (onChange) {
+          onChange({value: newValue, option});
+        }
+      }
+    },
+    [multiple, onChange, selected]
+  );
+
+  const context = useMemo(
+    () => ({
+      disabled,
+      focusRef,
+      keyboardSelectMode,
+      multiple,
+      optionsRef,
+      selected,
+      selectOption,
+    }),
+    [disabled, focusRef, keyboardSelectMode, multiple, selected, selectOption]
+  );
+
+  useEffect(() => {
+    if (!multiple && selected.length > 1) {
+      const newOption = selected.pop();
+      setSelectedState([newOption]);
+      if (onChange) {
+        onChange({value: [newOption], option: newOption});
+      }
+    }
+  }, [onChange, multiple, selected]);
+
+  const clear = useCallback(() => setSelectedState([]), []);
+
+  const toggle = useCallback(
+    (option, select) => {
+      const isSelected = selected.includes(option);
+      if (select && isSelected) {
+        return;
+      }
+      const shouldSelect = select ?? !isSelected;
+      if (shouldSelect) {
+        selectOption(option);
+      } else {
+        setSelectedState((selected) => {
+          const newSelected = selected.filter((v) => v != option);
+          if (onChange) {
+            onChange({value: newSelected, option});
+          }
+          return newSelected;
+        });
+      }
+    },
+    [onChange, setSelectedState, selectOption, selected]
+  );
+
+  /**
+   * This method uses the given callback on the target index found by
+   * modifying the given value state by the given delta.
+   *
+   * Only meaningful if `index` is provided to `Option` children.
+   *
+   * ex: (1, "a", ["a", "b", "c", "d"]) => cb(1)
+   * ex: (-1, "c", ["a", "b", "c", "d"]) => cb(1)
+   * ex: (2, "c", ["a", "b", "c", "d"]) => cb(1)
+   * ex: (-1, undefined, ["a", "b", "c", "d"]) => cb(2)
+   * @param {number} delta
+   * @param {!Array<string>} value
+   * @param {Array<string>} options
+   * @param {Function} cb
+   * @return {{value: Array<string>, option: string}|undefined}
+   */
+  const callbackByDelta = useCallback((delta, value, cb) => {
+    if (!optionsRef.current.length) {
+      return;
+    }
+    const options = optionsRef.current.filter((v) => v != undefined);
+    if (!options.length) {
+      return;
+    }
+    const previous = options.indexOf(value);
+    // If previousIndex === -1 is true, then a negative delta will be offset
+    // one more than is wanted when looping back around in the options.
+    // This occurs when the given value is undefined.
+    const selectUpWhenNoneSelected = previous === -1 && delta < 0;
+    const index = selectUpWhenNoneSelected ? delta : previous + delta;
+    const option = options[mod(index, options.length)];
+    cb(option);
+  }, []);
+
+  /**
+   * This method modifies the selected state by at most one value of the
+   * current selected state by the given delta.
+   * The modification is done in FIFO order. When no values are selected,
+   * the new selected state becomes the option at the given delta.
+   *
+   * Only meaningful if `index` is provided to `Option` children.
+   *
+   * ex: (1, [0, 2], [0, 1, 2, 3]) => [2, 1]
+   * ex: (-1, [2, 1], [0, 1, 2, 3]) => [1]
+   * ex: (2, [2, 1], [0, 1, 2, 3]) => [1, 0]
+   * ex: (-1, [], [0, 1, 2, 3]) => [3]
+   */
+  const selectBy = useCallback(
+    (delta) => callbackByDelta(delta, selected.shift(), selectOption),
+    [callbackByDelta, selected, selectOption]
+  );
+
+  const focusBy = useCallback(
+    (delta) =>
+      callbackByDelta(delta, focusRef.current.active, (option) => {
+        const focus = focusRef.current.focusMap[option];
+        if (focus) {
+          focus();
+        }
+      }),
+    [callbackByDelta]
+  );
+
+  useImperativeHandle(
+    ref,
+    () =>
+      /** @type {!SelectorDef.SelectorApi} */ ({
+        clear,
+        selectBy,
+        toggle,
+      }),
+    [clear, selectBy, toggle]
+  );
+
+  const onKeyDown = useCallback(
+    (e) => {
+      if (customOnKeyDown) {
+        customOnKeyDown(e);
+      }
+      const {key} = e;
+      let dir;
+      switch (key) {
+        case Keys.LEFT_ARROW: // Fallthrough.
+        case Keys.UP_ARROW:
+          dir = -1;
+          break;
+        case Keys.RIGHT_ARROW: // Fallthrough.
+        case Keys.DOWN_ARROW:
+          dir = 1;
+          break;
+        default:
+          break;
+      }
+      if (dir) {
+        if (keyboardSelectMode === KEYBOARD_SELECT_MODE.SELECT) {
+          selectBy(dir);
+        } else if (keyboardSelectMode === KEYBOARD_SELECT_MODE.FOCUS) {
+          focusBy(dir);
+        }
+      }
+    },
+    [customOnKeyDown, keyboardSelectMode, focusBy, selectBy]
+  );
+
+  return (
+    <Comp
+      {...rest}
+      role={role}
+      aria-disabled={disabled}
+      aria-multiselectable={multiple}
+      disabled={disabled}
+      form={form}
+      keyboardSelectMode={keyboardSelectMode}
+      multiple={multiple}
+      name={name}
+      onKeyDown={onKeyDown}
+      tabIndex={
+        tabIndex ?? keyboardSelectMode === KEYBOARD_SELECT_MODE.SELECT ? 0 : -1
+      }
+      value={selected}
+    >
+      <input hidden defaultValue={selected} name={name} form={form} />
+      <SelectorContext.Provider value={context}>
+        {children}
+      </SelectorContext.Provider>
+    </Comp>
+  );
+}
+
+const Selector = forwardRef(SelectorWithRef);
+Selector.displayName = 'Selector'; // Make findable for tests.
+export {Selector};
+
+/**
+ * @param {!SelectorDef.OptionProps} props
+ * @return {PreactDef.Renderable}
+ */
+export function Option({
+  as: Comp = 'div',
+  disabled = false,
+  index,
+  onClick: customOnClick,
+  onFocus: customOnFocus,
+  onKeyDown: customOnKeyDown,
+  option,
+  role = 'option',
+  tabIndex,
+  ...rest
+}) {
+  const classes = useStyles();
+  const ref = useRef(null);
+  const {
+    disabled: selectorDisabled,
+    focusRef,
+    keyboardSelectMode,
+    multiple: selectorMultiple,
+    optionsRef,
+    selectOption,
+    selected,
+  } = useContext(SelectorContext);
+
+  const focus = useCallback(
+    (e) => {
+      if (customOnFocus) {
+        customOnFocus(e);
+      }
+      if (ref.current) {
+        tryFocus(ref.current);
+      }
+    },
+    [customOnFocus]
+  );
+
+  // Element should be "registered" before it is visible.
+  useLayoutEffect(() => {
+    const refFromContext = optionsRef;
+    if (!refFromContext || !refFromContext.current) {
+      return;
+    }
+    if (index != undefined && !disabled) {
+      refFromContext.current[index] = option;
+    }
+    return () => delete refFromContext.current[index];
+  }, [disabled, index, option, optionsRef]);
+
+  // Element should be focusable before it is visible.
+  useLayoutEffect(() => {
+    if (!focusRef) {
+      return;
+    }
+    const refFromContext = focusRef.current;
+    if (!refFromContext || !refFromContext.focusMap) {
+      return;
+    }
+    refFromContext.focusMap[option] = focus;
+    return () => delete refFromContext.focusMap[option];
+  }, [focus, focusRef, option]);
+
+  const trySelect = useCallback(() => {
+    if (selectorDisabled || disabled) {
+      return;
+    }
+    selectOption(option);
+  }, [disabled, option, selectOption, selectorDisabled]);
+
+  const onClick = useCallback(
+    (e) => {
+      trySelect();
+      if (customOnClick) {
+        customOnClick(e);
+      }
+    },
+    [customOnClick, trySelect]
+  );
+
+  const onKeyDown = useCallback(
+    (e) => {
+      if (e.key === Keys.ENTER || e.key === Keys.SPACE) {
+        trySelect();
+      }
+      if (customOnKeyDown) {
+        customOnKeyDown(e);
+      }
+    },
+    [customOnKeyDown, trySelect]
+  );
+
+  const isSelected = /** @type {!Array} */ (selected).includes(option);
+  const optionProps = {
+    ...rest,
+    className: objstr({
+      [classes.option]: true,
+      [classes.selected]: isSelected && !selectorMultiple,
+      [classes.multiselected]: isSelected && selectorMultiple,
+      [classes.disabled]: disabled || selectorDisabled,
+    }),
+    disabled,
+    'aria-disabled': String(disabled),
+    onClick,
+    onFocus: () => (focusRef.current.active = option),
+    onKeyDown,
+    option,
+    ref,
+    role,
+    selected: isSelected,
+    'aria-selected': String(isSelected),
+    tabIndex:
+      tabIndex ?? keyboardSelectMode === KEYBOARD_SELECT_MODE.SELECT ? -1 : 0,
+  };
+  return <Comp {...optionProps} />;
+}
diff --git a/extensions/amp-selector/1.0/component.jss.js b/extensions/amp-selector/1.0/component.jss.js
new file mode 100644
index 0000000000000..9b438b37ab243
--- /dev/null
+++ b/extensions/amp-selector/1.0/component.jss.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+const option = {
+  'cursor': 'pointer',
+};
+
+const selected = {
+  'cursor': 'auto',
+  'outline': 'solid 1px rgba(0, 0, 0, 0.7)',
+};
+
+const disabled = {
+  'cursor': 'auto',
+  'opacity': '0.4',
+};
+
+const multiselected = {
+  'cursor': 'pointer',
+  'outline': 'solid 1px rgba(0, 0, 0, 0.7)',
+};
+
+const JSS = {
+  option,
+  selected,
+  disabled,
+  multiselected,
+};
+
+// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
+// eslint-disable-next-line local/no-export-side-effect
+export const useStyles = createUseStyles(JSS);
diff --git a/extensions/amp-selector/1.0/component.type.js b/extensions/amp-selector/1.0/component.type.js
new file mode 100644
index 0000000000000..496ba4f78b8e1
--- /dev/null
+++ b/extensions/amp-selector/1.0/component.type.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/** @const */
+var SelectorDef = {};
+
+/**
+ * @typedef {{
+ *   as: (string|PreactDef.FunctionalComponent|undefined),
+ *   disabled: (boolean|undefined),
+ *   form: (string|undefined),
+ *   shimDomElement: !Element,
+ *   value: (!Array|undefined),
+ *   multiple: (boolean|undefined),
+ *   name: (string|undefined),
+ *   onChange: (?function({value: !Array, option: *})|undefined),
+ *   role: (string|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+SelectorDef.Props;
+
+/**
+ * Note: `index` must be a positive integer to use
+ * `selectBy`, otherwise it will be noop.
+ *
+ * @typedef {{
+ *   as: (string|PreactDef.FunctionalComponent),
+ *   option: *,
+ *   disabled: (boolean|undefined),
+ *   shimDomElement: !Element,
+ *   index: (number|undefined),
+ *   onClick: (?function(!Event)|undefined),
+ *   role: (string|undefined),
+ *   shimSelected: (boolean|undefined),
+ *   style: (!Object|undefined),
+ * }}
+ */
+SelectorDef.OptionProps;
+
+/**
+ * @typedef {{
+ *   disabled: (boolean|undefined),
+ *   focusRef: ({current: {active: *, focusMap: !Object}}),
+ *   keyboardSelectMode: (string|undefined),
+ *   multiple: (boolean|undefined),
+ *   optionsRef: ({current: !Array<*>}),
+ *   selected: (!Array|undefined),
+ *   selectOption: (function(*):undefined|undefined),
+ * }}
+ */
+SelectorDef.ContextProps;
+
+/** @interface */
+SelectorDef.SelectorApi = class {
+  clear() {}
+
+  /**
+   * @param {*} option
+   * @param {boolean|undefined} value
+   */
+  toggle(option, value) {}
+
+  /**
+   * @param {number} delta
+   */
+  selectBy(delta) {}
+};
diff --git a/extensions/amp-selector/1.0/package.json b/extensions/amp-selector/1.0/package.json
new file mode 100644
index 0000000000000..de13cb2108d50
--- /dev/null
+++ b/extensions/amp-selector/1.0/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-selector",
+  "version": "VERSION",
+  "description": "AMP Selector Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "./dist/component.js",
+  "module": "./dist/component-preact.module.js",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "./dist/component-preact.module.js",
+      "require": "./dist/component-preact.js"
+    },
+    "./react": {
+      "import": "./dist/component-react.module.js",
+      "require": "./dist/component-react.js"
+    }
+  },
+  "files": ["dist/*", "react.js"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml.git",
+    "directory": "extensions/amp-selector/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-selector/1.0",
+  "peerDependencies": {
+    "preact": "^10.2.1",
+    "react": "^17.0.0"
+  }
+}
diff --git a/extensions/amp-selector/1.0/react.js b/extensions/amp-selector/1.0/react.js
new file mode 100644
index 0000000000000..0b2957c35c38d
--- /dev/null
+++ b/extensions/amp-selector/1.0/react.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-env node */
+// eslint-disable-next-line local/no-module-exports
+module.exports = require('./dist/component-react');
diff --git a/extensions/amp-selector/1.0/selector.css.js b/extensions/amp-selector/1.0/selector.css.js
deleted file mode 100644
index 76bbdfc671876..0000000000000
--- a/extensions/amp-selector/1.0/selector.css.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-// TODO(wg-bento): These are non-overridable non-essential styles.
-// See https://github.com/ampproject/wg-bento/issues/12.
-
-export const OPTION = {
-  'cursor': 'pointer',
-};
-
-export const SELECTED = {
-  'cursor': 'auto',
-  'outline': 'solid 1px rgba(0, 0, 0, 0.7)',
-};
-
-export const DISABLED = {
-  'cursor': 'auto',
-  'outline': 'none',
-};
-
-export const MULTI_SELECTED = {
-  'cursor': 'pointer',
-  'outline': 'solid 1px rgba(0, 0, 0, 0.7)',
-};
diff --git a/extensions/amp-selector/1.0/selector.js b/extensions/amp-selector/1.0/selector.js
deleted file mode 100644
index 6192c0547f249..0000000000000
--- a/extensions/amp-selector/1.0/selector.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import * as CSS from './selector.css';
-import * as Preact from '../../../src/preact';
-import {useContext, useMemo, useState} from '../../../src/preact';
-
-const SelectorContext = Preact.createContext({});
-
-/**
- * @param {!JsonObject} props
- * @return {PreactDef.Renderable}
- */
-export function Selector(props) {
-  const {
-    'as': Comp = 'div',
-    'children': children,
-    'disabled': disabled,
-    'value': value,
-    'multiple': multiple,
-    'onChange': onChange,
-    'role': role = 'listbox',
-    ...rest
-  } = props;
-  const [selectedState, setSelectedState] = useState(value ? value : []);
-  // TBD: controlled values require override of properties.
-  const selected = /** @type {!Array} */ (value ? value : selectedState);
-  const context = useMemo(
-    () => ({
-      selected,
-      selectOption: (option) => {
-        if (!option) {
-          return;
-        }
-        let newValue = null;
-        if (multiple) {
-          newValue = selected.includes(option)
-            ? selected.filter((v) => v != option)
-            : selected.concat(option);
-        } else if (!selected.includes(option)) {
-          newValue = [option];
-        }
-        if (newValue) {
-          setSelectedState(newValue);
-          if (onChange) {
-            onChange({value: newValue, option});
-          }
-        }
-      },
-      disabled,
-      multiple,
-    }),
-    [selected, disabled, multiple, onChange]
-  );
-
-  return (
-    <Comp
-      {...rest}
-      role={role}
-      aria-disabled={disabled}
-      aria-multiselectable={multiple}
-      disabled={disabled}
-      multiple={multiple}
-    >
-      <SelectorContext.Provider value={context}>
-        {children}
-      </SelectorContext.Provider>
-    </Comp>
-  );
-}
-
-/**
- * @param {!JsonObject} props
- * @return {PreactDef.Renderable}
- */
-export function Option(props) {
-  const {
-    'as': Comp = 'div',
-    'disabled': disabled,
-    'onClick': onClick,
-    'option': option,
-    'role': role = 'option',
-    'style': style,
-  } = props;
-  const selectorContext = useContext(SelectorContext);
-  const {
-    'selected': selected,
-    'selectOption': selectOption,
-    'disabled': selectorDisabled,
-    'multiple': selectorMultiple,
-  } = selectorContext;
-  const clickHandler = () => {
-    if (selectorDisabled || disabled) {
-      return;
-    }
-    if (onClick) {
-      onClick();
-    }
-    selectOption(option);
-  };
-  const isSelected = /** @type {!Array} */ (selected).includes(option);
-  const statusStyle =
-    disabled || selectorDisabled
-      ? CSS.DISABLED
-      : isSelected
-      ? selectorMultiple
-        ? CSS.MULTI_SELECTED
-        : CSS.SELECTED
-      : CSS.OPTION;
-  const optionProps = {
-    ...props,
-    'aria-disabled': disabled,
-    onClick: clickHandler,
-    option,
-    role,
-    selected: isSelected,
-    style: {...statusStyle, ...style},
-  };
-  return <Comp {...optionProps}></Comp>;
-}
diff --git a/extensions/amp-selector/1.0/storybook/Basic.amp.js b/extensions/amp-selector/1.0/storybook/Basic.amp.js
index a80d2c3b1d9df..56ebb5aac0c52 100644
--- a/extensions/amp-selector/1.0/storybook/Basic.amp.js
+++ b/extensions/amp-selector/1.0/storybook/Basic.amp.js
@@ -15,104 +15,134 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {storiesOf} from '@storybook/preact';
-import {withA11y} from '@storybook/addon-a11y';
-import {withKnobs} from '@storybook/addon-knobs';
-import withAmp from '../../../../build-system/tasks/storybook/amp-env/decorator.js';
+import {select, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
 
-// eslint-disable-next-line
-storiesOf('amp-selector', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withA11y)
-  .addDecorator(withAmp)
-  .addParameters({extensions: [{name: 'amp-selector', version: '1.0'}]})
-  .add('with <amp-img>', () => {
-    return (
-      <amp-selector class="sample-selector" layout="container">
-        <amp-img
-          src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
-          width="90"
-          height="60"
-          option="1"
-        ></amp-img>
-        <amp-img
-          src="https://amp.dev/static/samples/img/landscape_desert_300x200.jpg"
-          width="90"
-          height="60"
-          disabled
-          option="2"
-        ></amp-img>
-        <div class="divider inline-block mx1"></div>
-        <amp-img
-          src="https://amp.dev/static/samples/img/landscape_ship_300x200.jpg"
-          width="90"
-          height="60"
-          option="3"
-        ></amp-img>
-        <amp-img
-          src="https://amp.dev/static/samples/img/landscape_village_300x200.jpg"
-          width="90"
-          height="60"
-          option="4"
-        ></amp-img>
-      </amp-selector>
-    );
-  })
-  .add('with <ul>', () => {
-    return (
-      <amp-selector class="sample-selector" layout="container">
-        <ul>
-          <li option="1">Option 1</li>
-          <li option="2">Option 2</li>
-          <li option="3">Option 3</li>
-          <li option="4">Option 4</li>
-        </ul>
-      </amp-selector>
-    );
-  })
-  .add('actions', () => {
-    return (
-      <>
-        <amp-selector
-          id="actionsSample"
-          layout="container"
-          class="sample-selector"
-          multiple
-        >
-          <ul>
-            <li option="1">Option 1</li>
-            <li option="2">Option 2</li>
-            <li option="3">Option 3</li>
-            <li option="4">Option 4</li>
-            <li option="5">Option 5</li>
-            <li option="6">Option 6</li>
-          </ul>
-        </amp-selector>
-        <button on="tap:actionsSample.clear">clear</button>
-        <button on="tap:actionsSample.selectUp">selectUp</button>
-        <button on="tap:actionsSample.selectUp(delta=2)">
-          selectUp(delta=2)
-        </button>
-        <button on="tap:actionsSample.selectDown">selectDown</button>
-        <button on="tap:actionsSample.selectDown(delta=2)">
-          selectDown(delta=2)
-        </button>
-        <button on="tap:actionsSample.toggle(index=1)">toggle(index=1)</button>
-        <button on="tap:actionsSample.toggle(index=1, value=true)">
-          toggle(index=1, value=true)
-        </button>
-      </>
-    );
-  })
-  .add('responsive', () => {
-    return (
-      <amp-selector layout="responsive" width="100" height="100">
+export default {
+  title: 'amp-selector-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-selector', version: '1.0'}],
+    experiments: ['bento'],
+  },
+};
+
+const imgStyle = {
+  display: 'inline-block',
+  margin: '2px',
+};
+
+export const WithAmpImg = () => {
+  return (
+    <amp-selector class="sample-selector" layout="container">
+      <amp-img
+        src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
+        width="90"
+        height="60"
+        option="1"
+        style={imgStyle}
+      ></amp-img>
+      <amp-img
+        src="https://amp.dev/static/samples/img/landscape_desert_300x200.jpg"
+        width="90"
+        height="60"
+        disabled
+        option="2"
+        style={imgStyle}
+      ></amp-img>
+      <div class="divider inline-block mx1"></div>
+      <amp-img
+        src="https://amp.dev/static/samples/img/landscape_ship_300x200.jpg"
+        width="90"
+        height="60"
+        option="3"
+        style={imgStyle}
+      ></amp-img>
+      <amp-img
+        src="https://amp.dev/static/samples/img/landscape_village_300x200.jpg"
+        width="90"
+        height="60"
+        option="4"
+        style={imgStyle}
+      ></amp-img>
+    </amp-selector>
+  );
+};
+
+WithAmpImg.storyName = 'with <amp-img>';
+
+export const WithUl = () => {
+  return (
+    <amp-selector class="sample-selector" layout="container">
+      <ul>
+        <li option="1">Option 1</li>
+        <li option="2">Option 2</li>
+        <li option="3">Option 3</li>
+        <li option="4">Option 4</li>
+      </ul>
+    </amp-selector>
+  );
+};
+
+WithUl.storyName = 'with <ul>';
+
+export const Actions = () => {
+  const keyboardSelectMode = select(
+    'keyboard select mode',
+    ['none', 'focus', 'select'],
+    'focus'
+  );
+  return (
+    <>
+      <amp-selector
+        id="actionsSample"
+        layout="container"
+        class="sample-selector"
+        keyboard-select-mode={keyboardSelectMode}
+        multiple
+      >
         <ul>
-          <li option="1">Option 1</li>
+          <li option="1" selected>
+            Option 1
+          </li>
           <li option="2">Option 2</li>
           <li option="3">Option 3</li>
           <li option="4">Option 4</li>
+          <li option="5">Option 5</li>
+          <li option="6">Option 6</li>
         </ul>
       </amp-selector>
-    );
-  });
+      <button on="tap:actionsSample.clear">clear</button>
+      <button on="tap:actionsSample.selectUp">selectUp</button>
+      <button on="tap:actionsSample.selectUp(delta=2)">
+        selectUp(delta=2)
+      </button>
+      <button on="tap:actionsSample.selectDown">selectDown</button>
+      <button on="tap:actionsSample.selectDown(delta=2)">
+        selectDown(delta=2)
+      </button>
+      <button on="tap:actionsSample.toggle(index=1)">toggle(index=1)</button>
+      <button on="tap:actionsSample.toggle(index=1, value=true)">
+        toggle(index=1, value=true)
+      </button>
+    </>
+  );
+};
+
+Actions.storyName = 'actions';
+
+export const Responsive = () => {
+  return (
+    <amp-selector layout="responsive" width="100" height="100">
+      <ul>
+        <li option="1">Option 1</li>
+        <li option="2">Option 2</li>
+        <li option="3">Option 3</li>
+        <li option="4">Option 4</li>
+      </ul>
+    </amp-selector>
+  );
+};
+
+Responsive.storyName = 'responsive';
diff --git a/extensions/amp-selector/1.0/storybook/Basic.js b/extensions/amp-selector/1.0/storybook/Basic.js
index d0350c5c87b2e..d753ff2cf04eb 100644
--- a/extensions/amp-selector/1.0/storybook/Basic.js
+++ b/extensions/amp-selector/1.0/storybook/Basic.js
@@ -15,14 +15,13 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {Option, Selector} from '../selector';
-import {withA11y} from '@storybook/addon-a11y';
-import {withKnobs} from '@storybook/addon-knobs';
-
+import {Option, Selector} from '../component';
+import {select, withKnobs} from '@storybook/addon-knobs';
+import {useState} from '../../../../src/preact';
 export default {
   title: 'Selector',
   component: Selector,
-  decorators: [withA11y, withKnobs],
+  decorators: [withKnobs],
 };
 
 const imgStyle = {
@@ -32,40 +31,106 @@ const imgStyle = {
   margin: '2px',
 };
 
-export const listItems = () => {
+/**
+ * @param {!Object} props
+ * @return {*}
+ */
+function SelectorWithActions(props) {
+  const [show, setShow] = useState(false);
+
+  // TODO(#30447): replace imperative calls with "button" knobs when the
+  // Storybook 6.1 is released.
+  const ref = Preact.useRef();
   return (
-    <Selector aria-label="Image menu">
-      <Option
-        as="img"
-        alt="Sea landscape"
-        style={{...imgStyle, width: '90px', height: '60px'}}
-        src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
-        option="1"
-        disabled
-      ></Option>
-      <Option
-        as="img"
-        alt="Desert landscape"
-        style={{...imgStyle, width: '90px', height: '60px'}}
-        src="https://amp.dev/static/samples/img/landscape_desert_300x200.jpg"
-        option="2"
-      ></Option>
-      <br></br>
-      <Option
-        as="img"
-        alt="Ship landscape"
-        style={{...imgStyle, width: '90px', height: '60px'}}
-        src="https://amp.dev/static/samples/img/landscape_ship_300x200.jpg"
-        option="3"
-      ></Option>
-      <Option
-        as="img"
-        alt="Village landscape"
-        style={{...imgStyle, width: '90px', height: '60px'}}
-        src="https://amp.dev/static/samples/img/landscape_village_300x200.jpg"
-        option="4"
-      ></Option>
-    </Selector>
+    <section>
+      <button onClick={() => setShow(!show)}>
+        toggle option 2.5 visibility
+      </button>
+      <Selector ref={ref} {...props}>
+        {props.children.slice(0, 2)}
+        {show && (
+          <Option as="div" option="2.5" index={2}>
+            Option 2.5
+          </Option>
+        )}
+        <br />
+        {props.children.slice(2)}
+      </Selector>
+      <div style={{marginTop: 8}}>
+        <button onClick={() => ref.current./*OK*/ toggle('2')}>
+          toggle(option "2")
+        </button>
+        <button onClick={() => ref.current./*OK*/ toggle('2.5')}>
+          toggle(option "2.5")
+        </button>
+        <button onClick={() => ref.current./*OK*/ toggle('2', true)}>
+          select (option "2")
+        </button>
+        <button onClick={() => ref.current./*OK*/ toggle('2', false)}>
+          deselect (option "2")
+        </button>
+        <button onClick={() => ref.current./*OK*/ selectBy(-2)}>
+          select up by 2
+        </button>
+        <button onClick={() => ref.current./*OK*/ selectBy(1)}>
+          select down by 1
+        </button>
+        <button onClick={() => ref.current./*OK*/ clear()}>clear all</button>
+      </div>
+    </section>
+  );
+}
+
+export const actionsAndOrder = () => {
+  const keyboardSelectMode = select(
+    'keyboard select mode',
+    ['none', 'focus', 'select'],
+    'select'
+  );
+  return (
+    <form>
+      <SelectorWithActions
+        keyboardSelectMode={keyboardSelectMode}
+        multiple
+        name="poll"
+        aria-label="Image menu"
+      >
+        <Option
+          as="img"
+          alt="Sea landscape"
+          style={imgStyle}
+          src="https://amp.dev/static/samples/img/landscape_sea_300x199.jpg"
+          option="1"
+          index={0}
+          disabled
+        ></Option>
+        <Option
+          as="img"
+          alt="Desert landscape"
+          style={imgStyle}
+          src="https://amp.dev/static/samples/img/landscape_desert_300x200.jpg"
+          option="2"
+          index={1}
+        ></Option>
+        <br />
+        <Option
+          as="img"
+          alt="Ship landscape"
+          style={imgStyle}
+          src="https://amp.dev/static/samples/img/landscape_ship_300x200.jpg"
+          option="3"
+          index={3}
+        ></Option>
+        <Option
+          as="img"
+          alt="Village landscape"
+          style={imgStyle}
+          src="https://amp.dev/static/samples/img/landscape_village_300x200.jpg"
+          option="4"
+          index={4}
+        ></Option>
+      </SelectorWithActions>
+    </form>
   );
 };
 
@@ -82,7 +147,12 @@ export const optionItems = () => {
 
 export const multiselect = () => {
   return (
-    <Selector as="ul" multiple aria-label="Multiselect menu">
+    <Selector
+      as="ul"
+      multiple
+      aria-label="Multiselect menu"
+      defaultValue={['2']}
+    >
       <Option as="li" option="1">
         Option 1
       </Option>
diff --git a/extensions/amp-selector/1.0/test-e2e/test-amp-selector-tabs.js b/extensions/amp-selector/1.0/test-e2e/test-amp-selector-tabs.js
deleted file mode 100644
index 85ab75c57811e..0000000000000
--- a/extensions/amp-selector/1.0/test-e2e/test-amp-selector-tabs.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * 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.
- */
-
-describes.endtoend(
-  'amp-selector',
-  {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-selector/amp-selector-tabs.html',
-    environments: ['single', 'viewer-demo'],
-  },
-  async (env) => {
-    let controller;
-
-    beforeEach(() => {
-      controller = env.controller;
-    });
-
-    it('should render correctly', async () => {
-      const selector = await controller.findElement('#tabs');
-
-      await expect(controller.getElementAttribute(selector, 'role')).to.equal(
-        'tablist'
-      );
-
-      const firstTab = await controller.findElement('#tab1Selector');
-      await expect(controller.getElementAttribute(firstTab, 'selected')).to
-        .exist;
-
-      const image = await controller.findElement('#firstImage');
-      await expect(
-        controller.getElementProperty(image, 'clientWidth')
-      ).to.be.greaterThan(0);
-
-      const internalImg = await controller.findElement('#firstImage img');
-      await expect(internalImg).to.exist;
-    });
-
-    it('should switch tabs on button click', async () => {
-      const secondTab = await controller.findElement('#tab2Selector');
-      await expect(controller.getElementAttribute(secondTab, 'selected')).to.not
-        .exist;
-
-      await controller.click(secondTab);
-      await expect(controller.getElementAttribute(secondTab, 'selected')).to
-        .exist;
-
-      const image = await controller.findElement('#secondImage');
-      await expect(
-        controller.getElementProperty(image, 'clientWidth')
-      ).to.be.greaterThan(0);
-
-      const internalImg = await controller.findElement('#secondImage img');
-      await expect(internalImg).to.exist;
-    });
-
-    it('should switch tabs on toggle ', async () => {
-      const thirdTabToggle = await controller.findElement('#tab3Toggle');
-      const thirdTab = await controller.findElement('#tab3Selector');
-      await expect(controller.getElementAttribute(thirdTab, 'selected')).to.not
-        .exist;
-
-      await controller.click(thirdTabToggle);
-      await expect(controller.getElementAttribute(thirdTab, 'selected')).to
-        .exist;
-
-      const image = await controller.findElement('#thirdImage');
-      await expect(
-        controller.getElementProperty(image, 'clientWidth')
-      ).to.be.greaterThan(0);
-
-      const internalImg = await controller.findElement('#thirdImage img');
-      await expect(internalImg).to.exist;
-    });
-  }
-);
diff --git a/extensions/amp-selector/1.0/test/test-amp-selector.js b/extensions/amp-selector/1.0/test/test-amp-selector.js
new file mode 100644
index 0000000000000..57b38eeb51d29
--- /dev/null
+++ b/extensions/amp-selector/1.0/test/test-amp-selector.js
@@ -0,0 +1,487 @@
+/**
+ * Copyright 2020 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.
+ */
+import '../amp-selector';
+import {ActionInvocation} from '../../../../src/service/action-impl';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
+import {htmlFor} from '../../../../src/static-template';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-selector:1.0',
+  {
+    amp: {
+      extensions: ['amp-selector:1.0'],
+    },
+  },
+  (env) => {
+    let win;
+    let html;
+    let element;
+
+    async function waitForSelected(el, selected) {
+      const isSelectedOrNot = () => el.hasAttribute('selected') === selected;
+      await waitFor(isSelectedOrNot, 'element selected updated');
+    }
+
+    beforeEach(async () => {
+      win = env.win;
+      html = htmlFor(win.document);
+      toggleExperiment(win, 'bento-selector', true, true);
+      element = html`
+        <amp-selector multiple layout="container">
+          <ul>
+            <li option="1">Option 1</li>
+            <li option="2" selected>Option 2</li>
+            <li option="3" disabled>Option 3</li>
+          </ul>
+        </amp-selector>
+      `;
+      win.document.body.appendChild(element);
+      await element.buildInternal();
+    });
+
+    it('should render with options', () => {
+      expect(element.getAttribute('aria-multiselectable')).to.equal('true');
+      expect(element.getAttribute('aria-disabled')).to.equal('false');
+      expect(element.getAttribute('role')).to.equal('listbox');
+
+      const options = element.querySelectorAll('[option]');
+      expect(options).to.have.length(3);
+      expect(options[0]).not.to.have.attribute('selected');
+      expect(options[0].getAttribute('aria-disabled')).to.equal('false');
+      expect(options[0].getAttribute('role')).to.equal('option');
+      expect(options[1]).to.have.attribute('selected');
+      expect(options[1].getAttribute('aria-disabled')).to.equal('false');
+      expect(options[1].getAttribute('role')).to.equal('option');
+      expect(options[2]).not.to.have.attribute('selected');
+      expect(options[2]).to.have.attribute('disabled');
+      expect(options[2].getAttribute('aria-disabled')).to.equal('true');
+      expect(options[2].getAttribute('role')).to.equal('option');
+    });
+
+    it('should select option on click', async () => {
+      const options = element.querySelectorAll('[option]');
+      const firstOption = options[0];
+      const secondOption = options[1];
+      expect(secondOption).to.have.attribute('selected');
+
+      firstOption.click();
+      await waitForSelected(firstOption, true);
+
+      expect(firstOption).to.have.attribute('selected');
+      expect(secondOption).to.have.attribute('selected');
+    });
+
+    it('should mutate multiple value', async () => {
+      const options = element.querySelectorAll('[option]');
+      const firstOption = options[0];
+      firstOption.click();
+      await waitForSelected(firstOption, true);
+
+      const getSelectedCount = () =>
+        element.querySelectorAll('[selected]').length;
+      expect(getSelectedCount()).to.equal(2);
+
+      element.removeAttribute('multiple');
+      await waitFor(
+        () => getSelectedCount() == 1,
+        'only one element stays selected'
+      );
+    });
+
+    it('should select and deselect on attribute change', async () => {
+      const options = element.querySelectorAll('[option]');
+
+      options[0].setAttribute('selected', '');
+      await waitForSelected(options[0], true);
+
+      expect(options[0]).to.have.attribute('selected');
+      expect(options[1]).to.have.attribute('selected');
+      expect(options[2]).to.not.have.attribute('selected');
+
+      options[0].removeAttribute('selected');
+      await waitForSelected(options[0], false);
+
+      expect(options[0]).to.not.have.attribute('selected');
+      expect(options[1]).to.have.attribute('selected');
+      expect(options[2]).to.not.have.attribute('selected');
+
+      options[1].removeAttribute('selected');
+      await waitForSelected(options[0], false);
+
+      expect(options[0]).to.not.have.attribute('selected');
+      expect(options[1]).to.not.have.attribute('selected');
+      expect(options[2]).to.not.have.attribute('selected');
+    });
+
+    it('should fire DOM event on select', async () => {
+      const options = element.querySelectorAll('[option]');
+      const eventSpy = env.sandbox.spy();
+      element.addEventListener('select', eventSpy);
+
+      options[0].click();
+
+      expect(eventSpy).to.be.calledOnce;
+      expect(eventSpy.firstCall).calledWithMatch({
+        'data': {
+          'targetOption': '1',
+          'selectedOptions': ['2', '1'],
+        },
+      });
+    });
+
+    describe('imperative api', () => {
+      let option1;
+      let option2;
+      let option3;
+
+      beforeEach(() => {
+        const options = element.querySelectorAll('[option]');
+
+        option1 = options[0];
+        option2 = options[1];
+        option3 = options[2];
+      });
+
+      function invocation(method, args = {}) {
+        const source = null;
+        const caller = null;
+        const event = null;
+        const trust = ActionTrust.DEFAULT;
+        return new ActionInvocation(
+          element,
+          method,
+          args,
+          source,
+          caller,
+          event,
+          trust
+        );
+      }
+
+      describe('multi-select selector', () => {
+        it('toggle one option', async () => {
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          element.enqueAction(invocation('toggle', {index: 0, value: true}));
+          await waitForSelected(option1, true);
+
+          expect(option1).to.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          // Toggle with force select does nothing
+          element.enqueAction(invocation('toggle', {index: 0, value: true}));
+          await waitForSelected(option1, true);
+
+          expect(option1).to.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          // Toggle also deselects
+          element.enqueAction(invocation('toggle', {index: 1}));
+          await waitForSelected(option2, false);
+
+          expect(option1).to.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+        });
+
+        it('select up', async () => {
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          element.enqueAction(invocation('selectUp'));
+          await waitForSelected(option2, false);
+          await waitForSelected(option1, true);
+
+          expect(option1).to.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          // option 3 cannot be selected because it is disabled,
+          // so loop back around to option 2.
+          element.enqueAction(invocation('selectUp'));
+          await waitForSelected(option2, true);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          element.enqueAction(invocation('selectUp'));
+          await waitForSelected(option1, true);
+
+          expect(option1).to.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          // Make option 3 selectable
+          option3.removeAttribute('disabled');
+          await waitFor(
+            () => option3.getAttribute('aria-disabled') === 'false'
+          );
+          element.enqueAction(invocation('selectUp'));
+          await waitForSelected(option3, true);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.have.attribute('selected');
+        });
+
+        it('select down', async () => {
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          // Option 3 cannot be selected because it is disabled.
+          element.enqueAction(invocation('selectDown'));
+          await waitForSelected(option1, true);
+
+          expect(option1).to.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          element.enqueAction(invocation('selectDown'));
+          await waitForSelected(option2, true);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          // Make option 3 selectable
+          option3.removeAttribute('disabled');
+          await waitFor(
+            () => option3.getAttribute('aria-disabled') === 'false'
+          );
+          element.enqueAction(invocation('selectDown'));
+          await waitForSelected(option3, true);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.have.attribute('selected');
+        });
+
+        it('select down by delta', async () => {
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          // The target option is "1" (delta: 1) -> "2" (delta: 2) -> "1" (delta: 3)
+          // because option 3 is skipped.
+          element.enqueAction(invocation('selectDown', {delta: 3}));
+          await waitForSelected(option1, true);
+
+          expect(option1).to.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          // Make option 3 selectable
+          option3.removeAttribute('disabled');
+          await waitFor(
+            () => option3.getAttribute('aria-disabled') === 'false'
+          );
+          // The target option is "2" (delta: 1) -> "3" (delta: 2)
+          // because option 3 is no longer skipped.
+          element.enqueAction(invocation('selectDown', {delta: 2}));
+          await waitForSelected(option3, true);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.have.attribute('selected');
+
+          element.enqueAction(invocation('selectDown', {delta: 2}));
+          await waitForSelected(option2, true);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+        });
+
+        it('clear all', async () => {
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          element.enqueAction(invocation('toggle', {index: 0, value: true}));
+          await waitForSelected(option1, true);
+          await waitForSelected(option2, true);
+
+          // Multiple options are selected.
+          expect(option1).to.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          element.enqueAction(invocation('clear'));
+          await waitForSelected(option1, false);
+          await waitForSelected(option2, false);
+
+          // All options cleared.
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+        });
+      });
+
+      describe('single select amp-selector', () => {
+        beforeEach(async () => {
+          win.document.body.removeChild(element);
+          element = html`
+            <amp-selector layout="container">
+              <ul>
+                <li option="1">Option 1</li>
+                <li option="2">Option 2</li>
+                <li option="3">Option 3</li>
+              </ul>
+            </amp-selector>
+          `;
+          win.document.body.appendChild(element);
+          await element.buildInternal();
+
+          const options = element.querySelectorAll('[option]');
+
+          option1 = options[0];
+          option2 = options[1];
+          option3 = options[2];
+        });
+
+        it('toggle one option', async () => {
+          element.enqueAction(invocation('toggle', {index: 0, value: true}));
+          await waitForSelected(option1, true);
+
+          // Toggle one option
+          expect(option1).to.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          // Toggle with force select does nothing
+          element.enqueAction(invocation('toggle', {index: 0, value: true}));
+          await waitForSelected(option1, true);
+
+          expect(option1).to.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          // Toggle another option deselects the prior option
+          element.enqueAction(invocation('toggle', {index: 1, value: true}));
+          await waitForSelected(option2, true);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          // Toggle also deselects itself
+          element.enqueAction(invocation('toggle', {index: 1}));
+          await waitForSelected(option2, false);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+        });
+
+        it('select up', async () => {
+          element.enqueAction(invocation('selectUp'));
+          await waitForSelected(option3, true);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.have.attribute('selected');
+
+          element.enqueAction(invocation('selectUp'));
+          await waitForSelected(option2, true);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          element.enqueAction(invocation('selectUp'));
+          await waitForSelected(option1, true);
+
+          expect(option1).to.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+        });
+
+        it('select down', async () => {
+          element.enqueAction(invocation('selectDown'));
+          await waitForSelected(option1, true);
+
+          expect(option1).to.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          element.enqueAction(invocation('selectDown'));
+          await waitForSelected(option2, true);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          element.enqueAction(invocation('selectDown'));
+          await waitForSelected(option3, true);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.have.attribute('selected');
+        });
+
+        it('select down by 2', async () => {
+          element.enqueAction(invocation('selectDown', {delta: 2}));
+          await waitForSelected(option2, true);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          // Select down loops back around through options
+          element.enqueAction(invocation('selectDown', {delta: 2}));
+          await waitForSelected(option1, true);
+
+          expect(option1).to.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          element.enqueAction(invocation('selectDown', {delta: 2}));
+          await waitForSelected(option3, true);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.have.attribute('selected');
+        });
+
+        it('clear all', async () => {
+          element.enqueAction(invocation('toggle', {index: 1, value: true}));
+          await waitForSelected(option2, true);
+
+          // All options are selected.
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+
+          element.enqueAction(invocation('clear'));
+          await waitForSelected(option2, false);
+
+          expect(option1).to.not.have.attribute('selected');
+          expect(option2).to.not.have.attribute('selected');
+          expect(option3).to.not.have.attribute('selected');
+        });
+      });
+    });
+  }
+);
diff --git a/extensions/amp-selector/1.0/test/test-component.js b/extensions/amp-selector/1.0/test/test-component.js
new file mode 100644
index 0000000000000..182309cbe2b07
--- /dev/null
+++ b/extensions/amp-selector/1.0/test/test-component.js
@@ -0,0 +1,717 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Keys} from '../../../../src/core/constants/key-codes';
+import {Option, Selector} from '../component';
+import {mount} from 'enzyme';
+
+describes.sandboxed('Selector preact component', {}, () => {
+  describe('standalone option', () => {
+    it('should render a default option', () => {
+      const wrapper = mount(
+        <Option as="li" option="a">
+          option a
+        </Option>
+      );
+
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('li');
+      expect(dom).to.not.have.attribute('selected');
+      expect(dom.textContent).to.equal('option a');
+    });
+  });
+
+  describe('multi-select selector', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = mount(
+        <Selector multiple defaultValue={[1]}>
+          <Option key={1} option={1}>
+            option 1
+          </Option>
+          <Option key={2} option={2}>
+            option 2
+          </Option>
+          <Option key={3} option={3} disabled>
+            option 3
+          </Option>
+        </Selector>
+      );
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it('should render all options', () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('div');
+      expect(dom).to.have.attribute('multiple');
+
+      const options = wrapper.find(Option);
+      expect(options).to.have.lengthOf(3);
+
+      const option0 = options.at(0).getDOMNode();
+      const option1 = options.at(1).getDOMNode();
+      const option2 = options.at(2).getDOMNode();
+
+      // Expanded state.
+      expect(option0).to.have.attribute('selected');
+      expect(option1).to.not.have.attribute('selected');
+      expect(option2).to.not.have.attribute('selected');
+
+      // Option content.
+      expect(option0.textContent).to.equal('option 1');
+      expect(option1.textContent).to.equal('option 2');
+      expect(option2.textContent).to.equal('option 3');
+    });
+
+    it('should include a11y related attributes', () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('div');
+      expect(dom).to.have.attribute('multiple');
+      expect(dom).to.have.attribute('aria-multiselectable');
+
+      const options = wrapper.find(Option);
+      expect(options).to.have.lengthOf(3);
+
+      const option0 = options.at(0).getDOMNode();
+      const option1 = options.at(1).getDOMNode();
+      const option2 = options.at(2).getDOMNode();
+
+      expect(option0).to.have.attribute('tabindex');
+      expect(option0).to.have.attribute('aria-selected');
+      expect(option0.getAttribute('aria-selected')).to.equal('true');
+      expect(option0).to.have.attribute('aria-disabled');
+      expect(option0.getAttribute('aria-disabled')).to.equal('false');
+
+      expect(option1).to.have.attribute('tabindex');
+      expect(option1).to.have.attribute('aria-selected');
+      expect(option1.getAttribute('aria-selected')).to.equal('false');
+      expect(option1).to.have.attribute('aria-disabled');
+      expect(option1.getAttribute('aria-disabled')).to.equal('false');
+
+      expect(option2).to.have.attribute('tabindex');
+      expect(option2).to.have.attribute('aria-selected');
+      expect(option2.getAttribute('aria-selected')).to.equal('false');
+      expect(option2).to.have.attribute('aria-disabled');
+      expect(option2.getAttribute('aria-disabled')).to.equal('true');
+    });
+
+    it('should select an option on click', () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('div');
+
+      const options = wrapper.find(Option);
+      expect(options).to.have.lengthOf(3);
+
+      // Click to expand.
+      options.at(1).find('div').simulate('click');
+
+      // Expanded state.
+      expect(options.at(0).getDOMNode()).to.have.attribute('selected');
+      expect(options.at(1).getDOMNode()).to.have.attribute('selected');
+    });
+
+    it('should deselect an option on click', () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('div');
+
+      const options = wrapper.find(Option);
+      expect(options).to.have.lengthOf(3);
+
+      // Click to deselect.
+      options.at(0).find('div').simulate('click');
+
+      // Expanded state.
+      expect(options.at(0).getDOMNode()).to.not.have.attribute('selected');
+    });
+
+    it('should adjust state when multiple changes', async () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('div');
+
+      const options = wrapper.find(Option);
+
+      function countSelected() {
+        const nodes = [
+          options.at(0).getDOMNode(),
+          options.at(1).getDOMNode(),
+          options.at(2).getDOMNode(),
+        ];
+        return nodes
+          .map((option) => option.hasAttribute('selected'))
+          .reduce((sum, v) => sum + (v ? 1 : 0), 0);
+      }
+
+      expect(countSelected()).to.equal(1);
+
+      options.at(1).find('div').simulate('click');
+      expect(countSelected()).to.equal(2);
+
+      await new Promise((resolve) => {
+        wrapper.setProps({multiple: false}, resolve);
+      });
+
+      // One of the selected options should be deselected.
+      expect(countSelected()).to.equal(1);
+    });
+  });
+
+  describe('single-select selector', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = mount(
+        <Selector defaultValue={[1]}>
+          <Option key={1} option={1}>
+            option 1
+          </Option>
+          <Option key={2} option={2}>
+            option 2
+          </Option>
+          <Option key={3} option={3} disabled>
+            option 3
+          </Option>
+        </Selector>
+      );
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it('should select an option on click', () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('div');
+
+      const options = wrapper.find(Option);
+      expect(options).to.have.lengthOf(3);
+      expect(options.at(0).getDOMNode()).to.have.attribute('selected');
+
+      // Click to expand.
+      options.at(1).find('div').simulate('click');
+
+      // Expanded state.
+      expect(options.at(0).getDOMNode()).to.not.have.attribute('selected');
+      expect(options.at(1).getDOMNode()).to.have.attribute('selected');
+    });
+
+    it('should not deselect an option on click', () => {
+      const dom = wrapper.getDOMNode();
+      expect(dom.localName).to.equal('div');
+
+      const options = wrapper.find(Option);
+      expect(options).to.have.lengthOf(3);
+
+      // Click to expand.
+      options.at(0).find('div').simulate('click');
+
+      // Expanded state.
+      expect(options.at(0).getDOMNode()).to.have.attribute('selected');
+    });
+  });
+
+  describe('imperative api', () => {
+    let wrapper;
+    let ref;
+
+    let option0;
+    let option1;
+    let disabledOption;
+
+    describe('multi-select selector', () => {
+      beforeEach(() => {
+        ref = Preact.createRef();
+        wrapper = mount(
+          <Selector ref={ref} multiple defaultValue={['a']}>
+            <Option key={1} option="a" index={1}>
+              option a
+            </Option>
+            <Option key={2} option="b" index={2}>
+              option b
+            </Option>
+            <Option key={3} option="c" disabled index={3}>
+              option c
+            </Option>
+          </Selector>
+        );
+
+        const options = wrapper.find(Option);
+        option0 = options.at(0).getDOMNode();
+        option1 = options.at(1).getDOMNode();
+        disabledOption = options.at(2).getDOMNode();
+      });
+
+      afterEach(() => {
+        wrapper.unmount();
+      });
+
+      it('toggle one option', () => {
+        ref.current.toggle('b');
+        wrapper.update();
+
+        // Second option is toggled.
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.toggle('a');
+        wrapper.update();
+
+        // First option is toggled.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+      });
+
+      it('force toggle one option', () => {
+        ref.current.toggle('b', /* force */ true);
+        wrapper.update();
+
+        // Second option is selected.
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.toggle('b', /* force */ true);
+        wrapper.update();
+
+        // Nothing has changed.
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+      });
+
+      it('force toggle disabled option will select', () => {
+        ref.current.toggle('c', /* force */ true);
+        wrapper.update();
+
+        // Disabled option can be selected with force toggle.
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(disabledOption).to.have.attribute('selected');
+
+        ref.current.toggle('c', /* force */ true);
+        wrapper.update();
+
+        // Nothing has changed.
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(disabledOption).to.have.attribute('selected');
+      });
+
+      it('clear all options', async () => {
+        // First option is selected by default.
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.clear();
+        wrapper.update();
+
+        // No options are selected.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+      });
+
+      it('select by delta', async () => {
+        // First option is selected by default.
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.selectBy(1);
+        wrapper.update();
+
+        // Next option is selected.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.selectBy(1);
+        wrapper.update();
+
+        // Skip next option (disabled) and select the option after that.
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.selectBy(-1);
+        wrapper.update();
+
+        // Skip previous option (disabled) and select the option before that.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.selectBy(0);
+        wrapper.update();
+
+        // Nothing has changed.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+      });
+    });
+
+    describe('single-expand accordion', () => {
+      beforeEach(() => {
+        ref = Preact.createRef();
+        wrapper = mount(
+          <Selector ref={ref} defaultValue={['a']}>
+            <Option key={1} option="a" index={1}>
+              option a
+            </Option>
+            <Option key={2} option="b" index={2}>
+              option b
+            </Option>
+            <Option key={3} option="c" disabled index={3}>
+              option c
+            </Option>
+          </Selector>
+        );
+
+        const options = wrapper.find(Option);
+        option0 = options.at(0).getDOMNode();
+        option1 = options.at(1).getDOMNode();
+        disabledOption = options.at(2).getDOMNode();
+      });
+
+      afterEach(() => {
+        wrapper.unmount();
+      });
+
+      it('toggle one option', () => {
+        ref.current.toggle('b');
+        wrapper.update();
+
+        // Second option is toggled.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.toggle('a');
+        wrapper.update();
+
+        // First option is toggled.
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+      });
+
+      it('force toggle one option', () => {
+        ref.current.toggle('b', /* force */ true);
+        wrapper.update();
+
+        // Second option is selected.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.toggle('b', /* force */ true);
+        wrapper.update();
+
+        // Nothing has changed.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+      });
+
+      it('force toggle disabled option will select', () => {
+        ref.current.toggle('c', /* force */ true);
+        wrapper.update();
+
+        // Disabled option can be selected with force toggle.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(disabledOption).to.have.attribute('selected');
+
+        ref.current.toggle('c', /* force */ true);
+        wrapper.update();
+
+        // Nothing has changed.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(disabledOption).to.have.attribute('selected');
+      });
+
+      it('clear all options', async () => {
+        // First option is selected by default.
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.clear();
+        wrapper.update();
+
+        // No options are selected.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+      });
+
+      it('select by delta', async () => {
+        // First option is selected by default.
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.selectBy(1);
+        wrapper.update();
+
+        // Next option is selected.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.selectBy(1);
+        wrapper.update();
+
+        // Skip next option (disabled) and select the option after that.
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.selectBy(-1);
+        wrapper.update();
+
+        // Skip previous option (disabled) and select the option before that.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+
+        ref.current.selectBy(0);
+        wrapper.update();
+
+        // Nothing has changed.
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(disabledOption).to.not.have.attribute('selected');
+      });
+    });
+  });
+
+  describe('keyboard interactions', () => {
+    let wrapper;
+    let ref;
+
+    let selector;
+    let options;
+    let option0;
+    let option1;
+    let option2;
+
+    describe('multi-select selector', () => {
+      beforeEach(() => {
+        ref = Preact.createRef();
+        wrapper = mount(
+          <Selector ref={ref} multiple>
+            <Option key={1} option="a">
+              option a
+            </Option>
+            <Option key={2} option="b">
+              option b
+            </Option>
+            <Option key={3} option="c">
+              option c
+            </Option>
+          </Selector>
+        );
+
+        selector = wrapper.find('div').first();
+        options = wrapper.find(Option);
+        option0 = options.at(0).getDOMNode();
+        option1 = options.at(1).getDOMNode();
+        option2 = options.at(2).getDOMNode();
+      });
+
+      afterEach(() => {
+        wrapper.unmount();
+      });
+
+      it('navigate by arrows do not change selection state', () => {
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        selector.simulate('keydown', {key: Keys.LEFT_ARROW});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        selector.simulate('keydown', {key: Keys.RIGHT_ARROW});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        selector.simulate('keydown', {key: Keys.DOWN_ARROW});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        selector.simulate('keydown', {key: Keys.UP_ARROW});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+      });
+
+      it('Enter to select', () => {
+        options.at(0).find('div').simulate('keydown', {key: Keys.ENTER});
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        // Subsequent Enter will deselect.
+        options.at(0).find('div').simulate('keydown', {key: Keys.ENTER});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        // Select multiple options.
+        options.at(0).find('div').simulate('keydown', {key: Keys.ENTER});
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        options.at(1).find('div').simulate('keydown', {key: Keys.ENTER});
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+      });
+
+      it('Space to select', () => {
+        options.at(1).find('div').simulate('keydown', {key: Keys.SPACE});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        // Subsequent Space will deselect.
+        options.at(1).find('div').simulate('keydown', {key: Keys.SPACE});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        // Select multiple options.
+        options.at(0).find('div').simulate('keydown', {key: Keys.SPACE});
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        options.at(1).find('div').simulate('keydown', {key: Keys.SPACE});
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+      });
+    });
+
+    describe('single-select selector ', () => {
+      beforeEach(() => {
+        ref = Preact.createRef();
+        wrapper = mount(
+          <Selector ref={ref}>
+            <Option key={1} option="a">
+              option a
+            </Option>
+            <Option key={2} option="b">
+              option b
+            </Option>
+            <Option key={3} option="c">
+              option c
+            </Option>
+          </Selector>
+        );
+
+        selector = wrapper.find('div').first();
+        options = wrapper.find(Option);
+        option0 = options.at(0).getDOMNode();
+        option1 = options.at(1).getDOMNode();
+        option2 = options.at(2).getDOMNode();
+      });
+
+      afterEach(() => {
+        wrapper.unmount();
+      });
+
+      it('navigate by arrows do not change selection state', () => {
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        selector.simulate('keydown', {key: Keys.LEFT_ARROW});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        selector.simulate('keydown', {key: Keys.RIGHT_ARROW});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        selector.simulate('keydown', {key: Keys.DOWN_ARROW});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        selector.simulate('keydown', {key: Keys.UP_ARROW});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+      });
+
+      it('Enter to select', () => {
+        options.at(0).find('div').simulate('keydown', {key: Keys.ENTER});
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        // Subsequent Enter does nothing.
+        options.at(0).find('div').simulate('keydown', {key: Keys.ENTER});
+        expect(option0).to.have.attribute('selected');
+        expect(option1).to.not.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        // Select new option deselects the first.
+        options.at(1).find('div').simulate('keydown', {key: Keys.ENTER});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+      });
+
+      it('Space to select', () => {
+        options.at(1).find('div').simulate('keydown', {key: Keys.SPACE});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        // Subsequent Space does nothing.
+        options.at(1).find('div').simulate('keydown', {key: Keys.SPACE});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+
+        // Select new option deselects the first.
+        options.at(1).find('div').simulate('keydown', {key: Keys.SPACE});
+        expect(option0).to.not.have.attribute('selected');
+        expect(option1).to.have.attribute('selected');
+        expect(option2).to.not.have.attribute('selected');
+      });
+    });
+  });
+});
diff --git a/extensions/amp-selector/1.0/test/validator-amp-selector.html b/extensions/amp-selector/1.0/test/validator-amp-selector.html
new file mode 100644
index 0000000000000..4bf5d3518c8e2
--- /dev/null
+++ b/extensions/amp-selector/1.0/test/validator-amp-selector.html
@@ -0,0 +1,72 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests amp-selector.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-1.0.js"></script>
+  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
+  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
+</head>
+<body>
+  <!-- Valid -->
+  <form action="/" method="get" target="_blank" id="form1">
+    <!-- <amp-selector> with the options as list elements -->
+    <amp-selector layout="container" name="single_image_select">
+      <ul>
+        <li><amp-img src="/img1.png" width=50 height=50 option="1"></amp-img></li>
+        <li><amp-img src="/img2.png" width=50 height=50 option="2"></amp-img></li>
+        <li option="na" selected>None of the Above</li>
+      </ul>
+    </amp-selector>
+    <!-- <amp-selector> with the options as images -->
+    <amp-selector layout="container" name="multi_image_select" multiple>
+      <amp-img src="/img1.png" width=50 height=50 option="1"></amp-img>
+      <amp-img src="/img2.png" width=50 height=50 option="2"></amp-img>
+      <amp-img src="/img3.png" width=50 height=50 option="3"></amp-img>
+    </amp-selector>
+    <!-- <amp-selector> with the options as carousel images -->
+    <amp-selector layout="container" name="multi_image_select_1" multiple>
+      <amp-carousel id="carousel-1" width=200 height=60 controls>
+        <amp-img src="/img1.png" width=80 height=60 option="a"></amp-img>
+        <amp-img src="/img2.png" width=80 height=60 option="b" selected></amp-img>
+        <amp-img src="/img3.png" width=80 height=60 option="c"></amp-img>
+        <amp-img src="/img4.png" width=80 height=60 option="d" disabled></amp-img>
+      </amp-carousel>
+    </amp-selector>
+    <!-- <amp-selector> with bindable attributes -->
+    <amp-selector layout="container" name="with_binding" [selected]="foo" [disabled]="bar">
+    </amp-selector>
+  </form>
+
+  <!-- <amp-selector> with the options as carousel images, outside a form -->
+  <amp-selector layout="container" name="multi_image_select_2" multiple form="form1">
+    <amp-carousel id="carousel-1" width=400 height=300 type=slides controls>
+      <amp-img src="/img1.png" width=80 height=60 option="a"></amp-img>
+      <amp-img src="/img2.png" width=80 height=60 option="b" selected></amp-img>
+      <amp-img src="/img3.png" width=80 height=60 option="c"></amp-img>
+      <amp-img src="/img4.png" width=80 height=60 option="d"></amp-img>
+    </amp-carousel>
+  </amp-selector>
+</body>
diff --git a/extensions/amp-selector/1.0/test/validator-amp-selector.out b/extensions/amp-selector/1.0/test/validator-amp-selector.out
new file mode 100644
index 0000000000000..c29351653b5c6
--- /dev/null
+++ b/extensions/amp-selector/1.0/test/validator-amp-selector.out
@@ -0,0 +1,73 @@
+PASS
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests amp-selector.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-1.0.js"></script>
+|    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
+|    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
+|  </head>
+|  <body>
+|    <!-- Valid -->
+|    <form action="/" method="get" target="_blank" id="form1">
+|      <!-- <amp-selector> with the options as list elements -->
+|      <amp-selector layout="container" name="single_image_select">
+|        <ul>
+|          <li><amp-img src="/img1.png" width=50 height=50 option="1"></amp-img></li>
+|          <li><amp-img src="/img2.png" width=50 height=50 option="2"></amp-img></li>
+|          <li option="na" selected>None of the Above</li>
+|        </ul>
+|      </amp-selector>
+|      <!-- <amp-selector> with the options as images -->
+|      <amp-selector layout="container" name="multi_image_select" multiple>
+|        <amp-img src="/img1.png" width=50 height=50 option="1"></amp-img>
+|        <amp-img src="/img2.png" width=50 height=50 option="2"></amp-img>
+|        <amp-img src="/img3.png" width=50 height=50 option="3"></amp-img>
+|      </amp-selector>
+|      <!-- <amp-selector> with the options as carousel images -->
+|      <amp-selector layout="container" name="multi_image_select_1" multiple>
+|        <amp-carousel id="carousel-1" width=200 height=60 controls>
+|          <amp-img src="/img1.png" width=80 height=60 option="a"></amp-img>
+|          <amp-img src="/img2.png" width=80 height=60 option="b" selected></amp-img>
+|          <amp-img src="/img3.png" width=80 height=60 option="c"></amp-img>
+|          <amp-img src="/img4.png" width=80 height=60 option="d" disabled></amp-img>
+|        </amp-carousel>
+|      </amp-selector>
+|      <!-- <amp-selector> with bindable attributes -->
+|      <amp-selector layout="container" name="with_binding" [selected]="foo" [disabled]="bar">
+|      </amp-selector>
+|    </form>
+|
+|    <!-- <amp-selector> with the options as carousel images, outside a form -->
+|    <amp-selector layout="container" name="multi_image_select_2" multiple form="form1">
+|      <amp-carousel id="carousel-1" width=400 height=300 type=slides controls>
+|        <amp-img src="/img1.png" width=80 height=60 option="a"></amp-img>
+|        <amp-img src="/img2.png" width=80 height=60 option="b" selected></amp-img>
+|        <amp-img src="/img3.png" width=80 height=60 option="c"></amp-img>
+|        <amp-img src="/img4.png" width=80 height=60 option="d"></amp-img>
+|      </amp-carousel>
+|    </amp-selector>
+|  </body>
diff --git a/extensions/amp-selector/OWNERS b/extensions/amp-selector/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-selector/OWNERS
+++ b/extensions/amp-selector/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-selector/amp-selector.md b/extensions/amp-selector/amp-selector.md
index 5c4cc3f90066f..f69dc02e0397d 100644
--- a/extensions/amp-selector/amp-selector.md
+++ b/extensions/amp-selector/amp-selector.md
@@ -2,13 +2,14 @@
 $category@: dynamic-content
 formats:
   - websites
-  - email
 teaser:
   text: Represents a control that presents a menu of options and lets the user choose from it.
+experimental: true
+bento: true
 ---
 
 <!---
-Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+Copyright 2021 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.
@@ -25,18 +26,18 @@ limitations under the License.
 
 # amp-selector
 
-## Behavior
+## Usage
 
 The AMP selector is a control that presents a list of options and lets the user choose one or many options; the contents of the options aren't just limited to text.
 
-- An `amp-selector` can contain any arbitrary HTML elements or AMP components (e.g., `amp-carousel`, `amp-img`, etc.).
-- An `amp-selector` cannot contain any nested `amp-selector` controls.
-- Selectable options can be set by adding the `option` attribute to the element and assigning a value to the attribute (e.g., `<li option='value'></li>`).
-- Disabled options can be set by adding the `disabled` attribute to the element (e.g., `<li option='d' disabled></li>`).
-- Preselected options can be set by adding the `selected` attribute to the element (e.g., `<li option='b' selected></li>`).
-- To allow for multiple selections, add the `multiple` attribute to the `amp-selector` element. By default, the `amp-selector` allows for one selection at a time.
-- To disable the entire `amp-selector`, add the `disabled` attribute to the `amp-selector` element.
-- When an `amp-selector` contains a `name` attribute and the `amp-selector` is inside a `form` tag, if a submit event occurs on the form, the `amp-selector`behaves like a radio-button/checkbox group and submits the selected values (the ones assigned to the option) against the name of the `amp-selector`.
+-   An `amp-selector` can contain any arbitrary HTML elements or AMP components (e.g., `amp-carousel`, `amp-img`, etc.).
+-   An `amp-selector` cannot contain any nested `amp-selector` controls.
+-   Selectable options can be set by adding the `option` attribute to the element and assigning a value to the attribute (e.g., `<li option="value"></li>`).
+-   Disabled options can be set by adding the `disabled` attribute to the element (e.g., `<li option="d" disabled></li>`).
+-   Preselected options can be set by adding the `selected` attribute to the element (e.g., `<li option="b" selected></li>`).
+-   To allow for multiple selections, add the `multiple` attribute to the `amp-selector` element. By default, the `amp-selector` allows for one selection at a time.
+-   To disable the entire `amp-selector`, add the `disabled` attribute to the `amp-selector` element.
+-   When an `amp-selector` contains a `name` attribute and the `amp-selector` is inside a `form` tag, if a submit event occurs on the form, the `amp-selector`behaves like a radio-button/checkbox group and submits the selected values (the ones assigned to the option) against the name of the `amp-selector`.
 
 Example:
 
@@ -100,9 +101,117 @@ Example:
 </amp-selector>
 ```
 
-## Clearing selections
+### Standalone use outside valid AMP documents
 
-To clear all selections when an element is tapped or clicked, set the [`on`](../../spec/amp-actions-and-events.md) action attribute on the element, and specify the AMP Selector `id` with the `clear` action method.
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+#### Example
+
+The example below demonstrates `amp-selector` component in standalone use.
+
+[example preview="top-frame" playground="false"]
+
+```html
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-selector-1.0.css">
+  <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-1.0.js"></script>
+</head>
+<amp-selector id="my-selector">
+  <ul>
+    <li option="1">Option 1</li>
+    <li option="2">Option 2</li>
+    <li option="3">Option 3</li>
+    <li option="4">Option 4</li>
+    <li option="5">Option 5</li>
+    <li option="6">Option 6</li>
+  </ul>
+</amp-selector>
+<button id="select-down-button">Select next item</button>
+<button id="select-up-button">Select previous item</button>
+<button id="toggle-button">Toggle Option 3</button>
+<script>
+  (async () => {
+    const selector = document.querySelector("#my-selector");
+    await customElements.whenDefined("amp-selector");
+    const api = await selector.getApi();
+
+    // set up button actions
+    document.querySelector("#select-down-button").onclick = () => api.selectBy(1);
+    document.querySelector("#select-up-button").onclick = () => api.selectBy(-1);
+    document.querySelector("#toggle-button").onclick = () => api.toggle("3");
+  })();
+</script>
+```
+
+[/example]
+
+#### Interactivity and API usage
+
+Bento enabled components in standalone use are highly interactive through their API. In Bento standalone use, the element's API replaces AMP Actions and events and [`amp-bind`](https://amp.dev/documentation/components/amp-bind/?format=websites).
+
+The `amp-selector` component API is accessible by including the following script tag in your document:
+
+```js
+await customElements.whenDefined("amp-selector");
+const api = await selector.getApi();
+```
+
+##### Actions
+
+The `amp-selector` API allows you to perform the following actions:
+
+**selectBy(delta: number)**
+Closes the selector.
+
+```js
+api.selectBy(1); // Select next option in DOM sequence.
+api.selectBy(-2); // Select the option that is two previous in DOM sequence.
+```
+
+**toggle(optionValue: string, opt_select: boolean|undefined)**
+Toggles the option with the given `optionValue` to be selected or deselected based on `opt_select`. If `opt_select` is not present, then the option will be selected if currently not selected, and deselected if currently selected.
+
+```js
+api.toggle("a"); // Toggle the item with the attribute `option="a"`.
+api.toggle("1", true); // Select the item with the attribute `option="1"`.
+```
+
+##### Events
+
+The `amp-selector` API allows you to register and respond to the following events:
+
+**select**
+
+This event is triggered when the user selects an option.
+Multi-selectors and single-selectors fire this when selecting or unselecting options.
+Tapping disabled options does not trigger the `select` event.
+
+<ul>
+  <li>
+  `event.data.targetOption` contains the `option` attribute value of the selected element.</li>
+  <li>
+  `event.data.selectedOptions` contains an array of the `option` attribute values of all selected elements.
+  </li>
+</ul>
+
+```js
+selector.addEventListener("select", (e) => console.log(e.data.targetOption))
+```
+
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-selector-1.0.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
+
+### Clearing selections
+
+To clear all selections when an element is tapped or clicked, set the [`on`](../../docs/spec/amp-actions-and-events.md) action attribute on the element, and specify the AMP Selector `id` with the `clear` action method.
 
 Example:
 
@@ -115,67 +224,60 @@ Example:
 </amp-selector>
 ```
 
-{% call callout('Tip', type='success') %}
-See live demos at [AMP By Example](https://amp.dev/documentation/examples/components/amp-selector/).
-{% endcall %}
-
 ## Attributes
 
 ### Attributes on `<amp-selector>`
 
-<table>
-  <tr>
-    <td width="40%"><strong>disabled, form, multiple, name</strong></td>
-    <td>The attributes above behave the same way as they do on a standard HTML [`<select>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/select) element.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>keyboard-select-mode</strong></td>
-    <td>The `keyboard-select-mode` attribute dictates the keyboard navigation behavior for options inside `<amp-selector>`.
+#### disabled, form, multiple, name
+
+The attributes above behave the same way as they do on a standard HTML [`<select>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/select) element.
+
+#### keyboard-select-mode
 
-    <ul><li>`none` (default): The tab key changes focus between items in the `<amp-selector>`. The user must press enter or space to change the selection. Arrow keys are disabled. </li><li>
-    `focus`: Tab key gives focus to `<amp-selector>`. The user navigates between items with the arrow keys. Must press space or enter to change the selection.</li><li>
-    `select`: Tab key gives focus to `<amp-selector>`. The selection changes as the user navigates options with arrow keys. </li></ul></td>
+The `keyboard-select-mode` attribute dictates the keyboard navigation behavior for options inside `<amp-selector>`.
 
-  </tr>
-</table>
+<ul>
+  <li>
+    `none` (default): The tab key changes focus between items in the `<amp-selector>`. The user must press enter or space to change the selection. Arrow keys are disabled.
+  </li>
+  <li>
+    `focus`: Tab key gives focus to `<amp-selector>`. The user navigates between items with the arrow keys. Must press space or enter to change the selection.
+  </li>
+  <li>
+    `select`: Tab key gives focus to `<amp-selector>`. The selection changes as the user navigates options with arrow keys.
+  </li>
+</ul>
+
+This attribute can be configured to use different
+options based on a [media query](./../../docs/spec/amp-html-responsive-attributes.md).
 
 ### Attributes on `<amp-selector>` options
 
-<table>
-  <tr>
-    <td width="40%"><strong>option</strong></td>
-    <td>Indicates that the option is selectable.  If a value is specified, the contents of the value is submitted with the form.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>disabled, selected</strong></td>
-    <td>The attributes above behave the same way as they do on a standard HTML [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) element.</td>
-  </tr>
-</table>
+#### option
+
+Indicates that the option is selectable. If a value is specified, the contents of the value is submitted with the form.
+
+#### disabled, selected
+
+The attributes above behave the same way as they do on a standard HTML [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) element.
 
 ## Events
 
 Events may trigger actions on other AMP components using the `on` attribute.
 e.g. `on="select: my-tab.show"`
 
-Read more about [AMP Actions and Events](../../spec/amp-actions-and-events.md).
-
-<table>
-  <tr>
-    <td width="40%"><strong>select</strong></td>
-    <td>`amp-selector` triggers the `select` event when the user selects an option.
-    Multi-selectors and single-selectors fire this when selecting or unselecting options.
-    Tapping disabled options does not trigger the `select` event.
-    <ul>
-      <li>
-      `event.targetOption` contains the `option` attribute value of the selected element.</li>
-      <li>
-      `event.selectedOptions` contains an array of the `option` attribute values of all selected elements.
-      </li>
-    </ul></td>
-  </tr>
+Read more about [AMP Actions and Events](../../docs/spec/amp-actions-and-events.md).
 
-</table>
+### select
 
-## Validation
+`amp-selector` triggers the `select` event when the user selects an option.
+Multi-selectors and single-selectors fire this when selecting or unselecting options.
+Tapping disabled options does not trigger the `select` event.
 
-See [amp-selector rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-selector/validator-amp-selector.protoascii) in the AMP validator specification.
+<ul>
+  <li>
+  `event.targetOption` contains the `option` attribute value of the selected element.</li>
+  <li>
+  `event.selectedOptions` contains an array of the `option` attribute values of all selected elements.
+  </li>
+</ul>
diff --git a/extensions/amp-selector/test-e2e/test-amp-selector-tabs.js b/extensions/amp-selector/test-e2e/test-amp-selector-tabs.js
new file mode 100644
index 0000000000000..67c90cb0ab461
--- /dev/null
+++ b/extensions/amp-selector/test-e2e/test-amp-selector-tabs.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright 2020 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.
+ */
+
+describes.endtoend(
+  'amp-selector',
+  {
+    fixture: 'amp-selector/amp-selector-tabs.html',
+
+    versions: {
+      '0.1': {
+        environments: ['single', 'viewer-demo'],
+      },
+      '1.0': {
+        environments: ['single', 'viewer-demo'],
+        experiments: ['bento-selector'],
+      },
+    },
+  },
+  async (env) => {
+    let controller;
+
+    beforeEach(() => {
+      controller = env.controller;
+    });
+
+    it('should render correctly', async () => {
+      const selector = await controller.findElement('#tabs');
+
+      await expect(controller.getElementAttribute(selector, 'role')).to.equal(
+        'tablist'
+      );
+
+      const firstTab = await controller.findElement('#tab1Selector');
+      await expect(controller.getElementAttribute(firstTab, 'selected')).to
+        .exist;
+
+      const image = await controller.findElement('#firstImage');
+      await expect(
+        controller.getElementProperty(image, 'clientWidth')
+      ).to.be.greaterThan(0);
+
+      const internalImg = await controller.findElement('#firstImage img');
+      await expect(internalImg).to.exist;
+    });
+
+    it('should switch tabs on button click', async () => {
+      const secondTab = await controller.findElement('#tab2Selector');
+      await expect(controller.getElementAttribute(secondTab, 'selected')).to.not
+        .exist;
+
+      await controller.click(secondTab);
+      await expect(controller.getElementAttribute(secondTab, 'selected')).to
+        .exist;
+
+      const image = await controller.findElement('#secondImage');
+      await expect(
+        controller.getElementProperty(image, 'clientWidth')
+      ).to.be.greaterThan(0);
+
+      const internalImg = await controller.findElement('#secondImage img');
+      await expect(internalImg).to.exist;
+    });
+
+    it('should switch tabs on toggle ', async () => {
+      const thirdTabToggle = await controller.findElement('#tab3Toggle');
+      const thirdTab = await controller.findElement('#tab3Selector');
+      await expect(controller.getElementAttribute(thirdTab, 'selected')).to.not
+        .exist;
+
+      await controller.click(thirdTabToggle);
+      await expect(controller.getElementAttribute(thirdTab, 'selected')).to
+        .exist;
+
+      const image = await controller.findElement('#thirdImage');
+      await expect(
+        controller.getElementProperty(image, 'clientWidth')
+      ).to.be.greaterThan(0);
+
+      const internalImg = await controller.findElement('#thirdImage img');
+      await expect(internalImg).to.exist;
+    });
+  }
+);
diff --git a/extensions/amp-selector/validator-amp-selector.protoascii b/extensions/amp-selector/validator-amp-selector.protoascii
index 1c6580e19e79f..0b4700719ef4d 100644
--- a/extensions/amp-selector/validator-amp-selector.protoascii
+++ b/extensions/amp-selector/validator-amp-selector.protoascii
@@ -13,13 +13,27 @@
 # See the License for the specific language governing permissions and
 # limitations under the license.
 #
-tags: {
+tags: {  # amp-selector 1.0
+  html_format: AMP
+  tag_name: "SCRIPT"
+  satisfies: "amp-selector 1.0"
+  excludes: "amp-selector 0.1"
+  extension_spec: {
+    name: "amp-selector"
+    version_name: "v1.0"
+    version: "1.0"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # amp-selector 0.1 and latest
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
+  satisfies: "amp-selector 0.1"
+  excludes: "amp-selector 1.0"
   extension_spec: {
     name: "amp-selector"
+    version_name: "v0.1"
     version: "0.1"
     version: "latest"
     requires_usage: EXEMPTED
@@ -34,6 +48,7 @@ tags: {
   extension_spec: {
     name: "amp-selector"
     # AMP4EMAIL doesn't allow version: "latest".
+    version_name: "v0.1"
     version: "0.1"
     requires_usage: EXEMPTED
   }
@@ -43,7 +58,6 @@ tags: {  # <amp-selector> for AMP (autoplay attribute allowed)
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "AMP-SELECTOR"
   disallowed_ancestor: "AMP-SELECTOR"
   requires_extension: "amp-selector"
@@ -97,7 +111,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "$REFERENCE_POINT"
   spec_name: "AMP-SELECTOR option"
   attrs: {
@@ -112,13 +125,12 @@ tags: {
     name: "selected"
     value: ""
   }
-  spec_url: "https://amp.dev/documentation/components/amp-selector"
+  spec_url: "https://amp.dev/documentation/components/amp-selector/"
 }
 tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "$REFERENCE_POINT"
   spec_name: "AMP-SELECTOR child"
   reference_points: {
diff --git a/extensions/amp-shadow-dom-polyfill/0.1/amp-shadow-dom-polyfill.js b/extensions/amp-shadow-dom-polyfill/0.1/amp-shadow-dom-polyfill.js
new file mode 100644
index 0000000000000..6e48bb1bf4749
--- /dev/null
+++ b/extensions/amp-shadow-dom-polyfill/0.1/amp-shadow-dom-polyfill.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview This is just a placeholder for the polyfill that will be
+ * injected here from the `node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd.install.js`
+ * script.
+ */
diff --git a/extensions/amp-share-tracking/0.1/amp-share-tracking.js b/extensions/amp-share-tracking/0.1/amp-share-tracking.js
deleted file mode 100644
index 44f43e8fd1db5..0000000000000
--- a/extensions/amp-share-tracking/0.1/amp-share-tracking.js
+++ /dev/null
@@ -1,240 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {Layout} from '../../../src/layout';
-import {Services} from '../../../src/services';
-import {base64UrlEncodeFromBytes} from '../../../src/utils/base64';
-import {dev, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {getCryptoRandomBytesArray} from '../../../src/utils/bytes';
-import {isExperimentOn} from '../../../src/experiments';
-import {registerServiceBuilder} from '../../../src/service';
-import {tryResolve} from '../../../src/utils/promise';
-
-/** @private @const {string} */
-const TAG = 'amp-share-tracking';
-
-/** @private @const {number} */
-const SHARE_TRACKING_NUMBER_OF_BYTES = 6;
-
-/**
- * @visibleForTesting
- */
-export class AmpShareTracking extends AMP.BaseElement {
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-
-    /** @private {string} */
-    this.vendorHref_ = '';
-
-    /** @private {string} */
-    this.originalViewerFragment_ = '';
-  }
-
-  /**
-   * @return {boolean}
-   * @private
-   */
-  isExperimentOn_() {
-    return isExperimentOn(this.win, 'amp-share-tracking');
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout == Layout.NODISPLAY || layout == Layout.CONTAINER;
-  }
-
-  /** @override */
-  buildCallback() {
-    if (!this.isExperimentOn_()) {
-      registerServiceBuilder(this.win, 'share-tracking', function () {
-        return Promise.reject(user().createError('%s disabled', TAG));
-      });
-      userAssert(false, '%s experiment is disabled', TAG);
-    }
-
-    this.vendorHref_ = this.element.getAttribute('data-href');
-    dev().fine(TAG, 'vendorHref_: ', this.vendorHref_);
-
-    const shareTrackingFragments = Promise.all([
-      this.getIncomingFragment_(),
-      this.getOutgoingFragment_(),
-    ]).then((results) => {
-      const incomingFragment = results[0];
-      const outgoingFragment = results[1];
-      dev().fine(TAG, 'incomingFragment: ', incomingFragment);
-      dev().fine(TAG, 'outgoingFragment: ', outgoingFragment);
-      if (outgoingFragment && outgoingFragment != '') {
-        const newFragment = this.getNewViewerFragment_(
-          incomingFragment,
-          outgoingFragment
-        );
-        this.getHistory_().updateFragment(newFragment);
-      }
-      return {incomingFragment, outgoingFragment};
-    });
-    registerServiceBuilder(this.win, 'share-tracking', function () {
-      return shareTrackingFragments;
-    });
-  }
-
-  /**
-   * Get the incoming share-tracking fragment from the viewer
-   * @return {!Promise<string>}
-   * @private
-   */
-  getIncomingFragment_() {
-    return this.getOriginalViewerFragment_().then((fragment) => {
-      // The share tracking fragment should be the first parameter and start
-      // with dot in the url fragment
-      const match = fragment.match(/^\.([^&]*)/);
-      return match ? match[1] : '';
-    });
-  }
-
-  /**
-   * Get the original url fragment from the viewer
-   * @return {!Promise<string>}
-   * @private
-   */
-  getOriginalViewerFragment_() {
-    return this.getHistory_()
-      .getFragment()
-      .then((fragment) => {
-        this.originalViewerFragment_ = fragment;
-        return fragment;
-      });
-  }
-
-  /**
-   * Get an outgoing share-tracking fragment
-   * @return {!Promise<string>}
-   * @private
-   */
-  getOutgoingFragment_() {
-    if (this.vendorHref_) {
-      return this.getOutgoingFragmentFromVendor_(this.vendorHref_);
-    }
-    return tryResolve(() =>
-      base64UrlEncodeFromBytes(this.getShareTrackingRandomBytes_())
-    );
-  }
-
-  /**
-   * Get an outgoing share-tracking fragment from vendor
-   * by issueing a post request to the url the vendor provided
-   * @param {string} vendorUrl
-   * @return {!Promise<string>}
-   * @private
-   */
-  getOutgoingFragmentFromVendor_(vendorUrl) {
-    const postReq = {
-      method: 'POST',
-      credentials: 'include',
-      body: dict(),
-    };
-    return Services.xhrFor(this.win)
-      .fetchJson(vendorUrl, postReq)
-      .then((res) => res.json())
-      .then(
-        (json) => {
-          if (json.fragment) {
-            return json.fragment;
-          }
-          this.user().error(
-            TAG,
-            'The response from [' +
-              vendorUrl +
-              '] does not ' +
-              'have a fragment value.'
-          );
-          return '';
-        },
-        (err) => {
-          this.user().error(
-            TAG,
-            'The request to share-tracking endpoint failed:',
-            err
-          );
-          return '';
-        }
-      );
-  }
-
-  /**
-   * Get a random bytes array that has 48 bits (6 bytes).
-   * Use win.crypto.getRandomValues if it is available.
-   * Otherwise, use Math.random as fallback.
-   * @return {!Uint8Array}
-   * @private
-   */
-  getShareTrackingRandomBytes_() {
-    // Use win.crypto.getRandomValues to get 48 bits of random value
-    let bytes = getCryptoRandomBytesArray(
-      this.win,
-      SHARE_TRACKING_NUMBER_OF_BYTES
-    ); // 48 bit
-
-    // Support for legacy browsers
-    if (!bytes) {
-      bytes = new Uint8Array(SHARE_TRACKING_NUMBER_OF_BYTES);
-      let random = Math.random();
-      for (let i = 0; i < SHARE_TRACKING_NUMBER_OF_BYTES; i++) {
-        random *= 256;
-        bytes[i] = Math.floor(random);
-        random -= bytes[i];
-      }
-    }
-    return bytes;
-  }
-
-  /**
-   * Generate the new url fragment by replacing incoming share tracking fragment
-   * with outgoing share tracking fragment.
-   * The original fragment is not modified.
-   * @param {string} incomingFragment
-   * @param {string} outgoingFragment
-   * @return {string}
-   * @private
-   */
-  getNewViewerFragment_(incomingFragment, outgoingFragment) {
-    const fragmentResidual = incomingFragment
-      ? this.originalViewerFragment_.substr(incomingFragment.length + 1)
-      : this.originalViewerFragment_;
-    let result = '.' + outgoingFragment;
-    if (fragmentResidual) {
-      if (fragmentResidual[0] != '&') {
-        result += '&';
-      }
-      result += fragmentResidual;
-    }
-    return result;
-  }
-
-  /**
-   * @private
-   * @return {!../../../src/service/history-impl.History}
-   */
-  getHistory_() {
-    return Services.historyForDoc(this.getAmpDoc());
-  }
-}
-
-// Install the extension.
-AMP.extension(TAG, '0.1', function (AMP) {
-  AMP.registerElement(TAG, AmpShareTracking);
-});
diff --git a/extensions/amp-share-tracking/0.1/test/test-amp-share-tracking.js b/extensions/amp-share-tracking/0.1/test/test-amp-share-tracking.js
deleted file mode 100644
index 984c283fb7d5d..0000000000000
--- a/extensions/amp-share-tracking/0.1/test/test-amp-share-tracking.js
+++ /dev/null
@@ -1,323 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import * as bytes from '../../../../src/utils/bytes';
-import {AmpShareTracking} from '../amp-share-tracking';
-import {History} from '../../../../src/service/history-impl';
-import {Services} from '../../../../src/services';
-import {Xhr} from '../../../../src/service/xhr-impl';
-import {toggleExperiment} from '../../../../src/experiments';
-
-describes.fakeWin(
-  'amp-share-tracking',
-  {
-    amp: {
-      ampdoc: 'single',
-      extensions: ['amp-share-tracking'],
-    },
-  },
-  (env) => {
-    let win;
-    let ampdoc;
-    let historyGetFragmentStub;
-    let historyUpdateFragmentStub;
-    let xhrStub;
-    let randomBytesStub;
-
-    beforeEach(() => {
-      win = env.win;
-      ampdoc = env.ampdoc;
-      historyGetFragmentStub = env.sandbox.stub(
-        History.prototype,
-        'getFragment'
-      );
-      historyUpdateFragmentStub = env.sandbox.stub(
-        History.prototype,
-        'updateFragment'
-      );
-      xhrStub = env.sandbox.stub(Xhr.prototype, 'fetchJson');
-      randomBytesStub = env.sandbox.stub(bytes, 'getCryptoRandomBytesArray');
-      toggleExperiment(win, 'amp-share-tracking', true);
-    });
-
-    afterEach(() => {
-      toggleExperiment(win, 'amp-share-tracking', false);
-    });
-
-    /**
-     * @param {string=} optVendorUrl
-     */
-    function getAmpShareTracking(optVendorUrl) {
-      const element = win.document.createElement('amp-share-tracking');
-      if (optVendorUrl) {
-        element.setAttribute('data-href', optVendorUrl);
-      }
-      element.getAmpDoc = () => ampdoc;
-      const ampShareTracking = new AmpShareTracking(element);
-      ampShareTracking.buildCallback();
-      return ampShareTracking;
-    }
-
-    it('should get incoming fragment starting with dot', () => {
-      historyGetFragmentStub.onFirstCall().returns(Promise.resolve('.12345'));
-      const ampShareTracking = getAmpShareTracking();
-      return Services.shareTrackingForOrNull(ampShareTracking.win).then(
-        (fragments) => {
-          expect(historyGetFragmentStub).to.be.calledOnce;
-          expect(fragments.incomingFragment).to.equal('12345');
-        }
-      );
-    });
-
-    it(
-      'should get incoming fragment starting with dot and ignore ' +
-        'other parameters',
-      () => {
-        historyGetFragmentStub
-          .onFirstCall()
-          .returns(Promise.resolve('.12345&key=value'));
-        const ampShareTracking = getAmpShareTracking();
-        return Services.shareTrackingForOrNull(ampShareTracking.win).then(
-          (fragments) => {
-            expect(historyGetFragmentStub).to.be.calledOnce;
-            expect(fragments.incomingFragment).to.equal('12345');
-          }
-        );
-      }
-    );
-
-    it('should ignore incoming fragment if it is empty', () => {
-      historyGetFragmentStub.onFirstCall().returns(Promise.resolve(''));
-      const ampShareTracking = getAmpShareTracking();
-      return Services.shareTrackingForOrNull(ampShareTracking.win).then(
-        (fragments) => {
-          expect(historyGetFragmentStub).to.be.calledOnce;
-          expect(fragments.incomingFragment).to.equal('');
-        }
-      );
-    });
-
-    it('should ignore incoming fragment if it does not start with dot', () => {
-      historyGetFragmentStub.onFirstCall().returns(Promise.resolve('12345'));
-      const ampShareTracking = getAmpShareTracking();
-      return Services.shareTrackingForOrNull(ampShareTracking.win).then(
-        (fragments) => {
-          expect(historyGetFragmentStub).to.be.calledOnce;
-          expect(fragments.incomingFragment).to.equal('');
-        }
-      );
-    });
-
-    it(
-      'should get outgoing fragment randomly if no vendor url is provided ' +
-        'and win.crypto is availble, update the url fragment correctly ' +
-        'when original fragment is empty',
-      () => {
-        historyGetFragmentStub.onFirstCall().returns(Promise.resolve(''));
-        randomBytesStub
-          .onFirstCall()
-          .returns(new Uint8Array([1, 2, 3, 4, 5, 6]));
-        const ampShareTracking = getAmpShareTracking();
-        return Services.shareTrackingForOrNull(ampShareTracking.win).then(
-          (fragments) => {
-            expect(historyGetFragmentStub).to.be.calledOnce;
-            // the base64url of byte array [1, 2, 3, 4, 5, 6]
-            expect(fragments.outgoingFragment).to.equal('AQIDBAUG');
-            expect(historyUpdateFragmentStub.withArgs('.AQIDBAUG')).to.be
-              .calledOnce;
-          }
-        );
-      }
-    );
-
-    it(
-      'should get outgoing fragment randomly if no vendor url is provided ' +
-        'and win.crypto is availble, update the url fragment correctly ' +
-        'when original fragment only contains share tracking fragment',
-      () => {
-        historyGetFragmentStub.onFirstCall().returns(Promise.resolve('.12345'));
-        randomBytesStub
-          .onFirstCall()
-          .returns(new Uint8Array([1, 2, 3, 4, 5, 6]));
-        const ampShareTracking = getAmpShareTracking();
-        return Services.shareTrackingForOrNull(ampShareTracking.win).then(
-          (fragments) => {
-            expect(historyGetFragmentStub).to.be.calledOnce;
-            // the base64url of byte array [1, 2, 3, 4, 5, 6]
-            expect(fragments.outgoingFragment).to.equal('AQIDBAUG');
-            expect(historyUpdateFragmentStub.withArgs('.AQIDBAUG')).to.be
-              .calledOnce;
-          }
-        );
-      }
-    );
-
-    it(
-      'should get outgoing fragment randomly if no vendor url is provided ' +
-        'and win.crypto is availble, update the url fragment correctly ' +
-        'when original fragment contains share tracking fragment and ' +
-        'other fragments',
-      () => {
-        historyGetFragmentStub
-          .onFirstCall()
-          .returns(Promise.resolve('.12345&key=value'));
-        randomBytesStub
-          .onFirstCall()
-          .returns(new Uint8Array([1, 2, 3, 4, 5, 6]));
-        const ampShareTracking = getAmpShareTracking();
-        return Services.shareTrackingForOrNull(ampShareTracking.win).then(
-          (fragments) => {
-            expect(historyGetFragmentStub).to.be.calledOnce;
-            // the base64url of byte array [1, 2, 3, 4, 5, 6]
-            expect(fragments.outgoingFragment).to.equal('AQIDBAUG');
-            expect(historyUpdateFragmentStub.withArgs('.AQIDBAUG&key=value')).to
-              .be.calledOnce;
-          }
-        );
-      }
-    );
-
-    it(
-      'should get outgoing fragment randomly if no vendor url ' +
-        'is provided and fallback to Math.random generation',
-      () => {
-        historyGetFragmentStub.onFirstCall().returns(Promise.resolve(''));
-        env.sandbox.stub(Math, 'random').returns(0.123456789123456789);
-        randomBytesStub.onFirstCall().returns(null);
-        const ampShareTracking = getAmpShareTracking();
-        return Services.shareTrackingForOrNull(ampShareTracking.win).then(
-          (fragments) => {
-            expect(historyGetFragmentStub).to.be.calledOnce;
-            expect(fragments.outgoingFragment).to.equal('H5rdN8Eh');
-            expect(historyUpdateFragmentStub.withArgs('.H5rdN8Eh')).to.be
-              .calledOnce;
-          }
-        );
-      }
-    );
-
-    it(
-      'should get outgoing fragment from vendor if vendor url is provided ' +
-        'and the response format is correct',
-      () => {
-        historyGetFragmentStub.onFirstCall().returns(Promise.resolve(''));
-        const mockJsonResponse = {fragment: '54321'};
-        xhrStub.onFirstCall().returns(
-          Promise.resolve({
-            json() {
-              return Promise.resolve(mockJsonResponse);
-            },
-          })
-        );
-        const ampShareTracking = getAmpShareTracking('http://foo.bar');
-        return Services.shareTrackingForOrNull(ampShareTracking.win).then(
-          (fragments) => {
-            expect(historyGetFragmentStub).to.be.calledOnce;
-            expect(fragments.outgoingFragment).to.equal('54321');
-            expect(historyUpdateFragmentStub.withArgs('.54321')).to.be
-              .calledOnce;
-          }
-        );
-      }
-    );
-
-    it(
-      'should get empty outgoing fragment if vendor url is provided ' +
-        'but the response format is NOT correct',
-      () => {
-        expectAsyncConsoleError(
-          '[amp-share-tracking] The response from ' +
-            '[http://foo.bar] does not have a fragment value.'
-        );
-        historyGetFragmentStub.onFirstCall().returns(Promise.resolve(''));
-        xhrStub.onFirstCall().returns(
-          Promise.resolve({
-            json() {
-              return Promise.resolve({foo: 'bar'});
-            },
-          })
-        );
-        const ampShareTracking = getAmpShareTracking('http://foo.bar');
-        return Services.shareTrackingForOrNull(ampShareTracking.win).then(
-          (fragments) => {
-            expect(historyGetFragmentStub).to.be.calledOnce;
-            expect(historyUpdateFragmentStub).to.not.be.called;
-            expect(fragments.outgoingFragment).to.equal('');
-          }
-        );
-      }
-    );
-
-    it(
-      'should call fetchJson with correct request when getting outgoing ' +
-        'fragment',
-      () => {
-        historyGetFragmentStub.onFirstCall().returns(Promise.resolve(''));
-        xhrStub.onFirstCall().returns(
-          Promise.resolve({
-            json() {
-              return Promise.resolve({fragment: '54321'});
-            },
-          })
-        );
-        const ampShareTracking = getAmpShareTracking('http://foo.bar');
-        const xhrCall = xhrStub.getCall(0);
-        expect(xhrCall.args[0]).to.equal('http://foo.bar');
-        expect(xhrCall.args[1]).to.jsonEqual({
-          method: 'POST',
-          credentials: 'include',
-          body: {},
-        });
-        return Services.shareTrackingForOrNull(ampShareTracking.win).then(
-          (fragments) => {
-            expect(historyGetFragmentStub).to.be.calledOnce;
-            expect(historyUpdateFragmentStub.withArgs('.54321')).to.be
-              .calledOnce;
-            expect(fragments.outgoingFragment).to.equal('54321');
-          }
-        );
-      }
-    );
-
-    it(
-      'should get empty outgoing fragment if vendor url is provided ' +
-        'but the xhr fails',
-      () => {
-        expectAsyncConsoleError(
-          '[amp-share-tracking] The request to ' +
-            'share-tracking endpoint failed: [object Object]'
-        );
-        historyGetFragmentStub.onFirstCall().returns(Promise.resolve(''));
-        xhrStub.onFirstCall().returns(
-          Promise.reject({
-            status: 404,
-            json() {
-              return Promise.reject('404 bad json');
-            },
-          })
-        );
-        const ampShareTracking = getAmpShareTracking('http://foo.bar');
-        return Services.shareTrackingForOrNull(ampShareTracking.win).then(
-          (fragments) => {
-            expect(historyGetFragmentStub).to.be.calledOnce;
-            expect(historyUpdateFragmentStub).to.not.be.called;
-            expect(fragments.outgoingFragment).to.equal('');
-          }
-        );
-      }
-    );
-  }
-);
diff --git a/extensions/amp-share-tracking/OWNERS b/extensions/amp-share-tracking/OWNERS
deleted file mode 100644
index ee2deb4bff25f..0000000000000
--- a/extensions/amp-share-tracking/OWNERS
+++ /dev/null
@@ -1,10 +0,0 @@
-// For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
-
-{
-  rules: [
-    {
-      owners: [{name: 'muxin'}],
-    },
-  ],
-}
diff --git a/extensions/amp-share-tracking/amp-share-tracking.md b/extensions/amp-share-tracking/amp-share-tracking.md
deleted file mode 100644
index 26dad6a7d7245..0000000000000
--- a/extensions/amp-share-tracking/amp-share-tracking.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-$category@: ads-analytics
-formats:
-  - websites
-teaser:
-  text: The share tracking feature is under development.
----
-
-<!---
-Copyright 2016 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.
--->
-
-# amp-share-tracking
diff --git a/extensions/amp-sidebar/0.1/amp-sidebar.css b/extensions/amp-sidebar/0.1/amp-sidebar.css
index aa6b0d4692bde..97d1742f14ac1 100644
--- a/extensions/amp-sidebar/0.1/amp-sidebar.css
+++ b/extensions/amp-sidebar/0.1/amp-sidebar.css
@@ -80,6 +80,10 @@ amp-sidebar[side], .i-amphtml-sidebar-mask {
   margin: 0;
 }
 
+.amp-sidebar-mask {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
 .i-amphtml-sidebar-mask {
   position: fixed !important;
   top: 0 !important;
@@ -88,7 +92,6 @@ amp-sidebar[side], .i-amphtml-sidebar-mask {
   height: 100vh !important;
   /* Prevent someone from making this a full-sceen image */
   background-image: none !important;
-  background-color: rgba(0, 0, 0, 0.5);
   animation-name: i-amphtml-sidebar-mask-fade-out;
   z-index: 2147483646;
 }
diff --git a/extensions/amp-sidebar/0.1/amp-sidebar.js b/extensions/amp-sidebar/0.1/amp-sidebar.js
index 99a15998bc584..297fd86115717 100644
--- a/extensions/amp-sidebar/0.1/amp-sidebar.js
+++ b/extensions/amp-sidebar/0.1/amp-sidebar.js
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
-import {AmpEvents} from '../../../src/amp-events';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {CSS} from '../../../build/amp-sidebar-0.1.css';
 import {Direction, Orientation, SwipeToDismiss} from './swipe-to-dismiss';
 import {Gestures} from '../../../src/gesture';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Services} from '../../../src/services';
 import {SwipeDef, SwipeXRecognizer} from '../../../src/gesture-recognizers';
 import {Toolbar} from './toolbar';
@@ -29,15 +29,20 @@ import {
   tryFocus,
 } from '../../../src/dom';
 import {createCustomEvent} from '../../../src/event-helper';
+import {debounce} from '../../../src/core/types/function';
 import {descendsFromStory} from '../../../src/utils/story';
 import {dev, devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {handleAutoscroll} from './autoscroll';
-import {isExperimentOn} from '../../../src/experiments';
+import {
+  observeContentSize,
+  unobserveContentSize,
+} from '../../../src/utils/size-observer';
 import {removeFragment} from '../../../src/url';
 import {setModalAsClosed, setModalAsOpen} from '../../../src/modal';
 import {setStyles, toggle} from '../../../src/style';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
+import {unmountAll} from '../../../src/utils/resource-container-helper';
 
 /** @private @const {string} */
 const TAG = 'amp-sidebar toolbar';
@@ -135,6 +140,17 @@ export class AmpSidebar extends AMP.BaseElement {
       // The sidebar is already animated by swipe to dismiss, so skip animation.
       () => this.dismiss_(/*skipAnimation*/ true, ActionTrust.HIGH)
     );
+
+    /** @private {boolean} */
+    this.currentSwipeForThisElement_ = false;
+
+    /** @private {boolean} */
+    this.disableSwipeClose_ = false;
+
+    this.onResized_ = this.onResized_.bind(this);
+
+    /** @private {?UnlistenDef} */
+    this.onViewportResizeUnlisten_ = null;
   }
 
   /** @override */
@@ -146,10 +162,22 @@ export class AmpSidebar extends AMP.BaseElement {
 
     this.side_ = element.getAttribute('side');
 
+    this.disableSwipeClose_ = element.hasAttribute('data-disable-swipe-close');
+
     this.viewport_ = this.getViewport();
 
     this.action_ = Services.actionServiceForDoc(element);
 
+    if (
+      this.element.parentNode != this.element.ownerDocument.body &&
+      this.element.parentNode != this.getAmpDoc().getBody()
+    ) {
+      this.user().warn(
+        TAG,
+        `${TAG} is recommended to be a direct child of the <body> element to preserve a logical DOM order.`
+      );
+    }
+
     if (this.side_ != Side.LEFT && this.side_ != Side.RIGHT) {
       this.side_ = this.setSideAttribute_(
         isRTL(this.document_) ? Side.RIGHT : Side.LEFT
@@ -178,6 +206,7 @@ export class AmpSidebar extends AMP.BaseElement {
             this.user().error(TAG, 'Failed to instantiate toolbar', e);
           }
         });
+        this.onResized_();
       });
 
     if (this.isIos_) {
@@ -213,14 +242,14 @@ export class AmpSidebar extends AMP.BaseElement {
     element.appendChild(this.createScreenReaderCloseButton());
 
     this.registerDefaultAction((invocation) => {
-      const {trust, caller} = invocation;
+      const {caller, trust} = invocation;
       this.open_(trust, caller);
     }, 'open');
     this.registerAction('close', (invocation) => {
       this.close_(invocation.trust);
     });
     this.registerAction('toggle', (invocation) => {
-      const {trust, caller} = invocation;
+      const {caller, trust} = invocation;
       if (this.opened_) {
         this.close_(trust);
       } else {
@@ -265,6 +294,22 @@ export class AmpSidebar extends AMP.BaseElement {
     this.setupGestures_(this.element);
   }
 
+  /** @override */
+  attachedCallback() {
+    this.onViewportResizeUnlisten_ = this.viewport_.onResize(
+      debounce(this.win, this.onResized_, 100)
+    );
+    this.onResized_();
+  }
+
+  /** @override */
+  detachedCallback() {
+    if (this.onViewportResizeUnlisten_) {
+      this.onViewportResizeUnlisten_();
+      this.onViewportResizeUnlisten_ = null;
+    }
+  }
+
   /**
    * Loads the extension for nested menu if sidebar contains one and it
    * has not been installed already.
@@ -342,8 +387,8 @@ export class AmpSidebar extends AMP.BaseElement {
     return screenReaderCloseButton;
   }
 
-  /** @override */
-  onLayoutMeasure() {
+  /** @private */
+  onResized_() {
     this.getAmpDoc()
       .whenReady()
       .then(() => {
@@ -425,6 +470,9 @@ export class AmpSidebar extends AMP.BaseElement {
     this.triggerEvent_(SidebarEvents.OPEN, trust);
     this.element.setAttribute('i-amphtml-sidebar-opened', '');
     this.getMaskElement_().setAttribute('i-amphtml-sidebar-opened', '');
+
+    // Set as a container for scheduler to load children elements.
+    this.setAsContainer();
   }
 
   /**
@@ -460,6 +508,13 @@ export class AmpSidebar extends AMP.BaseElement {
       this.getRealChildren()
     );
     this.triggerEvent_(SidebarEvents.CLOSE, trust);
+
+    // Undo `setAsContainer`.
+    this.removeAsContainer();
+
+    // Unmount all children when the sidebar is closed. They will automatically
+    // remount when the sidebar is opened again.
+    unmountAll(this.element, /* includeSelf */ false);
   }
 
   /**
@@ -492,6 +547,8 @@ export class AmpSidebar extends AMP.BaseElement {
       this.openerElement_ = openerElement;
       this.initialScrollTop_ = this.viewport_.getScrollTop();
     }
+
+    observeContentSize(this.element, this.onResized_);
   }
 
   /**
@@ -539,6 +596,7 @@ export class AmpSidebar extends AMP.BaseElement {
         tryFocus(this.openerElement_);
       }
     }
+    unobserveContentSize(this.element, this.onResized_);
     return true;
   }
 
@@ -548,26 +606,30 @@ export class AmpSidebar extends AMP.BaseElement {
    * @private
    */
   setupGestures_(element) {
-    if (!isExperimentOn(this.win, 'amp-sidebar-swipe-to-dismiss')) {
+    if (this.disableSwipeClose_) {
       return;
     }
     // stop propagation of swipe event inside amp-viewer
     const gestures = Gestures.get(
       dev().assertElement(element),
-      /* shouldNotPreventDefault */ false,
+      /* shouldNotPreventDefault */ true,
       /* shouldStopPropagation */ true
     );
-    gestures.onGesture(SwipeXRecognizer, (e) => {
-      const {data} = e;
-      this.handleSwipe_(data);
+    // The onGesture method has a recognizer and a handler argument
+    // The handler takes a gesture object as an argument which
+    // includes data and event properties
+    gestures.onGesture(SwipeXRecognizer, (gesture) => {
+      const {data, event} = gesture;
+      this.handleSwipe_(data, event);
     });
   }
 
   /**
    * Handles a swipe gesture, updating the current swipe to dismiss state.
    * @param {!SwipeDef} data
+   * @param {Event|undefined} event
    */
-  handleSwipe_(data) {
+  handleSwipe_(data, event) {
     if (data.first) {
       this.swipeToDismiss_.startSwipe({
         swipeElement: dev().assertElement(this.element),
@@ -580,11 +642,15 @@ export class AmpSidebar extends AMP.BaseElement {
     }
 
     if (data.last) {
-      this.swipeToDismiss_.endSwipe(data);
+      this.currentSwipeForThisElement_ && this.swipeToDismiss_.endSwipe(data);
+      this.currentSwipeForThisElement_ = false;
       return;
     }
 
-    this.swipeToDismiss_.swipeMove(data);
+    if (event && event.target && !excludeFromSwipeClose(event.target)) {
+      this.currentSwipeForThisElement_ = true;
+      this.swipeToDismiss_.swipeMove(data);
+    }
   }
 
   /**
@@ -609,7 +675,7 @@ export class AmpSidebar extends AMP.BaseElement {
   getMaskElement_() {
     if (!this.maskElement_) {
       const mask = this.document_.createElement('div');
-      mask.classList.add('i-amphtml-sidebar-mask');
+      mask.classList.add('amp-sidebar-mask', 'i-amphtml-sidebar-mask');
       mask.addEventListener('click', () => {
         // Click gesture is high trust.
         this.close_(ActionTrust.HIGH);
@@ -693,3 +759,14 @@ export class AmpSidebar extends AMP.BaseElement {
 AMP.extension('amp-sidebar', '0.1', (AMP) => {
   AMP.registerElement('amp-sidebar', AmpSidebar, CSS);
 });
+
+/**
+ * @param {!Element} element
+ * @return {boolean}
+ */
+function excludeFromSwipeClose(element) {
+  return (
+    element.nodeName.toLowerCase() === 'input' &&
+    element.getAttribute('type') === 'range'
+  );
+}
diff --git a/extensions/amp-sidebar/0.1/amp-sidebar.md b/extensions/amp-sidebar/0.1/amp-sidebar.md
index 936055a4bdbfa..d815707218a84 100644
--- a/extensions/amp-sidebar/0.1/amp-sidebar.md
+++ b/extensions/amp-sidebar/0.1/amp-sidebar.md
@@ -27,33 +27,31 @@ limitations under the License.
 
 # amp-sidebar
 
-The sidebar can be revealed by a button tap while the main content remains visually underneath.
+## Usage
 
-## Overview
+Provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus. The sidebar can be revealed by a button tap while the main content remains visually underneath.
 
 `<amp-sidebar>` hides meta content intended for temporary access (navigation links, buttons, menus, etc.). `<amp-sidebar>` can be opened and closed by button taps, and tapping outside of amp-sidebar.
 However, optional attributes that accept media queries can be used to display meta content in other parts of the site. Child `<nav toolbar="(media query)" toolbar-target="elementID">` elements allow
 for content within the sidebar to be displayed on other parts of the main content.
 
-## Behavior
-
-- The sidebar can only appear on the left or right side of a page.
-- The `<amp-sidebar>` may contain any valid HTML elements (supported by AMP).
-- The `<amp-sidebar>` may contain any of the following AMP elements:
-  - `<amp-accordion>`
-  - `<amp-img>`
-  - `<amp-fit-text>`
-  - `<amp-list>`
-  - `<amp-live-list>`
-  - `<amp-social-share>`
-- The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.
-- The width of the sidebar can be set and adjusted using CSS (minimum width is 45px).
-- Touch zoom is disabled on the `amp-sidebar` and its mask when the sidebar is open.
-- `<amp-sidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order (for accessibility) as well as to avoid altering its behavior by a container element. Note that having an ancestor of `amp-sidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.
+-   The sidebar can only appear on the left or right side of a page.
+-   The `<amp-sidebar>` may contain any valid HTML elements (supported by AMP).
+-   The `<amp-sidebar>` may contain any of the following AMP elements:
+    -   `<amp-accordion>`
+    -   `<amp-img>`
+    -   `<amp-fit-text>`
+    -   `<amp-list>`
+    -   `<amp-live-list>`
+    -   `<amp-social-share>`
+-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.
+-   The width of the sidebar can be set and adjusted using CSS (minimum width is 45px).
+-   Touch zoom is disabled on the `amp-sidebar` and its mask when the sidebar is open.
+-   `<amp-sidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order (for accessibility) as well as to avoid altering its behavior by a container element. Note that having an ancestor of `amp-sidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.
 
 _Example:_
 
-In the following example, we use `amp-sidebar` to contain navigation items. However, The second and fourth item, Nav Item 2 and Nav Item 4, are assigned to element id that is on the page. By using the [`on`](../../../spec/amp-actions-and-events.md) attribute, we can scroll smoothly to the element, using the element id and `scrollTo`.
+In the following example, we use `amp-sidebar` to contain navigation items. However, The second and fourth item, Nav Item 2 and Nav Item 4, are assigned to element id that is on the page. By using the [`on`](../../../docs/spec/amp-actions-and-events.md) attribute, we can scroll smoothly to the element, using the element id and `scrollTo`.
 
 ```html
 <amp-sidebar id="sidebar1" layout="nodisplay" side="right">
@@ -70,7 +68,7 @@ In the following example, we use `amp-sidebar` to contain navigation items. Howe
 
 ### Opening and closing the sidebar
 
-To toggle, open, or close the sidebar when an element is tapped or clicked, set the [`on`](../../../spec/amp-actions-and-events.md) action attribute on the element, and specify one of the following action methods:
+To toggle, open, or close the sidebar when an element is tapped or clicked, set the [`on`](../../../docs/spec/amp-actions-and-events.md) action attribute on the element, and specify one of the following action methods:
 
 <table>
   <tr>
@@ -110,12 +108,12 @@ You can create a `toolbar` element that displays in the `<body>` by specifying t
 
 #### Behavior
 
-- The sidebar may implement toolbars by adding nav elements with the `toolbar` attribute and `toolbar-target` attribute.
-- The nav element must be a child of `<amp-sidebar>` and follow this format: `<nav toolbar="(media-query)" toolbar-target="elementID">`.
-  - For instance, this would be a valid use of toolbar: `<nav toolbar="(max-width: 1024px)" toolbar-target="target-element">`.
-- The nav containing the toolbar attribute must only contain a single `<ul>` or `<ol>` element, that contains `<li>` elements.
-  - The `<li>` elements may contain any valid HTML elements (supported by AMP), or any of the AMP elements that `<amp-sidebar>` supports.
-- Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.
+-   The sidebar may implement toolbars by adding nav elements with the `toolbar` attribute and `toolbar-target` attribute.
+-   The nav element must be a child of `<amp-sidebar>` and follow this format: `<nav toolbar="(media-query)" toolbar-target="elementID">`.
+    -   For instance, this would be a valid use of toolbar: `<nav toolbar="(max-width: 1024px)" toolbar-target="target-element">`.
+-   The nav containing the toolbar attribute must only contain a single `<ul>` or `<ol>` element, that contains `<li>` elements.
+    -   The `<li>` elements may contain any valid HTML elements (supported by AMP), or any of the AMP elements that `<amp-sidebar>` supports.
+-   Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.
 
 _Example: Basic Toolbar_
 
@@ -146,7 +144,7 @@ In the following example, we display a `toolbar` if the window width is less tha
 
 ## Styling Toolbar
 
-The `toolbar` element within the `<amp-sidebar>` element, will have classes applied to the element depending if the `toolbar-target` element is shown or hidden. This is useful for applying different styles on the `toolbar` element and then `toolbar-target` element. The classes are `amp-sidebar-toolbar-target-shown`, and `amp-sidebar-toolbar-target-hidden`. The class `amp-sidebar-toolbar-target-shown` is applied to the `toolbar` element when the `toolbar-target` element is shown. The class `amp-sidebar-toolbar-target-hidden` is applied to the `toolbar` element when the `toolbar-target` element is hidden.
+The `toolbar` element within the `<amp-sidebar>` element, will have classes applied to the element depending if the `toolbar-target` element is shown or hidden. This is useful for applying different styles on the `toolbar` element and then `toolbar-target` element. The classes are `amp-sidebar-toolbar-target-shown`, and `amp-sidebar-toolbar-target-hidden`. The class `amp-sidebar-toolbar-target-shown` is applied to the `toolbar` element when the `toolbar-target` element is shown. The class `amp-sidebar-toolbar-target-hidden` is applied to the `toolbar` element when the `toolbar-target` element is hidden. Additionally, one can customize the opacity of the mask via `amp-sidebar-mask`.
 
 _Example: Toolbar State Classes_
 
@@ -181,102 +179,7 @@ In the following example, we display a `toolbar` if the window width is less tha
 <div id="target-element"></div>
 ```
 
-{% call callout('Tip', type='success') %}
-See live demos at [AMP By Example](https://amp.dev/documentation/examples/components/amp-sidebar/).
-{% endcall %}
-
-[filter formats="stories"]
-
-## Sidebar for Stories
-
-Use of `amp-sidebar` is supported within the `amp-story` [component](https://www.ampproject.org/stories/).
-
-### Behavior
-
-- The `<amp-sidebar>` must be a direct child of `<amp-story>`.
-- The sidebar defaults to the "end" side, meaning right for left-right languages and left for right-to-left languages.
-- The `<amp-sidebar>` has default background color of white and is overridable in CSS.
-- Default width of `<amp-sidebar>` is `75%` of the viewport up to `360px`, on and `25%` up to `600px` for desktop experiences. Width can be overriden using the CSS `width` property, but has to be contained within these intervals.
-- A 'hamburger' style button that opens/closes the sidebar will appear on the story UI.
-
-There are certain restrictions on what attributes and features are allowed in order to provide a consistent UI experience across the story platform. The following are allowed attributes and features of an `amp-sidebar` within an `amp-story`.
-
-### Allowed Attributes
-
-- [layout](#layout)
-- [data-close-button-aria-label](#data)
-- [common attributes](#common)
-
-_Example: Basic Sidebar in a Story_
-
-The following example shows a simple `amp-sidebar` within an `amp-story`.
-
-```html
-...
-<body>
-    <amp-story standalone>
-      <amp-sidebar id="sidebar1" layout="nodisplay">
-        <ul>
-          <li><a href="https://www.ampproject.org"> External Link </a></li>
-          <li>Nav item 2</li>
-          <li>Nav item 3</li>
-        </ul>
-      </amp-sidebar>
-      <amp-story-page id="cover">
-        <amp-story-grid-layer template="fill">
-          <h1>Hello World</h1>
-          <p>This is the cover page of this story.</p>
-        </amp-story-grid-layer>
-      </amp-story-page>
-      ...
-  </body>
-```
-
-[/filter]<!-- formats="stories" -->
-
-## Attributes
-
-##### side
-
-Indicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.
-
-##### layout<a name="layout"></a>
-
-Specifies the display layout of the sidebar, which must be `nodisplay`.
-
-##### open
-
-This attribute is present when the sidebar is open.
-
-##### data-close-button-aria-label<a name="data"></a>
-
-Optional attribute used to set ARIA label for the close button added for accessibility.
-
-##### toolbar
-
-This attribute is present on child `<nav toolbar="(media-query)" toolbar-target="elementID">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#toolbar) section for more information on using toolbars.
-
-##### toolbar-target
-
-This attribute is present on child `<nav toolbar="(media-query)" toolbar-target="elementID">`, and accepts an id of an element on the page. The `toolbar-target` attribute will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#toolbar) section for more information on using toolbars.
-
-##### common attributes<a name="common"></a>
-
-This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
-
-## Styling
-
-The `amp-sidebar` component can be styled with standard CSS.
-
-- The `width` of the `amp-sidebar` may be set to adjust the width between the pre-set min(45px) and max(80vw) values.
-- The height of the `amp-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.
-- The current state of the sidebar is exposed via the `open` attribute that is set on the `amp-sidebar` tag when the side bar is open on the page.
-
-{% call callout('Tip', type='success') %}
-Visit [AMP Start](https://ampstart.com/components#navigation) for responsive, pre-styled navigation menus that you can use in your AMP pages.
-{% endcall %}
-
-## Auto scrolling within overflowing areas
+### Auto scrolling within overflowing areas
 
 `amp-sidebar` can automatically scroll the overflowing container to first element that is decorated with `autoscroll` as an attribute in both sidebar and toolbar cases.
 
@@ -307,9 +210,9 @@ When using `toolbar` feature, `autoscroll` only works if the `<nav toolbar>` ele
 <div id="target-element"></div>
 ```
 
-Please see [this example file](https://github.com/ampproject/amphtml/blob/master/examples/amp-sidebar-autoscroll.amp.html) for a working example code.
+Please see [this example file](https://github.com/ampproject/amphtml/blob/main/examples/amp-sidebar-autoscroll.amp.html) for a working example code.
 
-## Building Nested Menus
+### Building Nested Menus
 
 `<amp-sidebar>` supports drilldown (nested) menus through a child component named [`<amp-nested-menu>`](../../amp-nested-menu/amp-nested-menu.md). With `<amp-nested-menu>`, `<amp-sidebar>` can support nesting one or more layers of submenus (and transition between them) as demonstrated by the following example:
 
@@ -352,12 +255,107 @@ When using `amp-nested-menu`, wrap every menu item in a `li` element to improve
 
 See [`<amp-nested-menu>`](../../amp-nested-menu/amp-nested-menu.md) for the full documentation on nested menus along with advanced feature such as dynamic content loading.
 
-## UX considerations
+### UX considerations
 
 When using `<amp-sidebar>`, keep in mind that your users will often view your page on mobile in an AMP viewer, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.
 
 For this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.
 
+[filter formats="stories"]
+
+### Sidebar for Stories
+
+Use of `amp-sidebar` is supported within the `amp-story` [component](https://www.ampproject.org/stories/).
+
+#### Behavior
+
+-   The `<amp-sidebar>` must be a direct child of `<amp-story>`.
+-   The sidebar defaults to the "end" side, meaning right for left-right languages and left for right-to-left languages.
+-   The `<amp-sidebar>` has default background color of white and is overridable in CSS.
+-   Default width of `<amp-sidebar>` is `75%` of the viewport up to `360px`, on and `25%` up to `600px` for desktop experiences. Width can be overriden using the CSS `width` property, but has to be contained within these intervals.
+-   A 'hamburger' style button that opens/closes the sidebar will appear on the story UI.
+
+There are certain restrictions on what attributes and features are allowed in order to provide a consistent UI experience across the story platform. The following are allowed attributes and features of an `amp-sidebar` within an `amp-story`.
+
+#### Allowed Attributes
+
+-   [layout](#layout)
+-   [data-close-button-aria-label](#data)
+-   [common attributes](#common)
+
+_Example: Basic Sidebar in a Story_
+
+The following example shows a simple `amp-sidebar` within an `amp-story`.
+
+```html
+...
+<body>
+    <amp-story standalone>
+      <amp-sidebar id="sidebar1" layout="nodisplay">
+        <ul>
+          <li><a href="https://www.ampproject.org"> External Link </a></li>
+          <li>Nav item 2</li>
+          <li>Nav item 3</li>
+        </ul>
+      </amp-sidebar>
+      <amp-story-page id="cover">
+        <amp-story-grid-layer template="fill">
+          <h1>Hello World</h1>
+          <p>This is the cover page of this story.</p>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      ...
+  </body>
+```
+
+[/filter]<!-- formats="stories" -->
+
+## Attributes
+
+##### side
+
+Indicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.
+
+##### layout<a name="layout"></a>
+
+Specifies the display layout of the sidebar, which must be `nodisplay`.
+
+##### open
+
+This attribute is present when the sidebar is open.
+
+##### data-close-button-aria-label<a name="data"></a>
+
+Optional attribute used to set ARIA label for the close button added for accessibility.
+
+##### toolbar
+
+This attribute is present on child `<nav toolbar="(media-query)" toolbar-target="elementID">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#toolbar) section for more information on using toolbars.
+
+##### toolbar-target
+
+This attribute is present on child `<nav toolbar="(media-query)" toolbar-target="elementID">`, and accepts an id of an element on the page. The `toolbar-target` attribute will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#toolbar) section for more information on using toolbars.
+
+##### data-disable-swipe-close
+
+Including this attribute on `amp-sidebar` disables swipe to close. When using a mobile device or other touch enabled device, swiping to close the sidebar will be disabled.
+
+##### common attributes<a name="common"></a>
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
+
+## Styling
+
+The `amp-sidebar` component can be styled with standard CSS.
+
+-   The `width` of the `amp-sidebar` may be set to adjust the width between the pre-set min(45px) and max(80vw) values.
+-   The height of the `amp-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.
+-   The current state of the sidebar is exposed via the `open` attribute that is set on the `amp-sidebar` tag when the side bar is open on the page.
+
+[tip type="read-on"]
+Visit [AMP Start](https://ampstart.com/components#navigation) for responsive, pre-styled navigation menus that you can use in your AMP pages.
+[/tip]
+
 ## Validation
 
-See [amp-sidebar rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-sidebar/validator-amp-sidebar.protoascii) in the AMP validator specification.
+See [amp-sidebar rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-sidebar/validator-amp-sidebar.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-sidebar/0.1/storybook/Basic.amp.js b/extensions/amp-sidebar/0.1/storybook/Basic.amp.js
index e3c2278eda6dc..602266a87e13c 100644
--- a/extensions/amp-sidebar/0.1/storybook/Basic.amp.js
+++ b/extensions/amp-sidebar/0.1/storybook/Basic.amp.js
@@ -17,74 +17,76 @@
 // To do: how to add CSS
 //import '!style-loader!css-loader!./Basic-styles.css';
 import * as Preact from '../../../../src/preact';
-import {storiesOf} from '@storybook/preact';
-import {withA11y} from '@storybook/addon-a11y';
+import {withAmp} from '@ampproject/storybook-addon';
 import {withKnobs} from '@storybook/addon-knobs';
-import withAmp from '../../../../build-system/tasks/storybook/amp-env/decorator.js';
 
-// eslint-disable-next-line
-storiesOf('amp-sidebar', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withA11y)
-  .addDecorator(withAmp)
-  .addParameters({extensions: [{name: 'amp-sidebar', version: 0.1}]})
-  .add('Basic Sidebar', () => {
-    /*
-     * Use the buttons below to open / toggle the amp-sidebar. The sidebar
-     * will be displayed with various navigational elements.
-     */
-    return (
-      <div>
-        <div id="main">
-          <h1>Basic Sidebar</h1>
-          <button on="tap:sidebar.open">Open Sidebar</button>
-          <button on="tap:sidebar.toggle">Toggle Sidebar</button>
-        </div>
-        <amp-sidebar id="sidebar" layout="nodisplay" side="right">
-          <h3>Sidebar</h3>
+export default {
+  title: 'amp-sidebar-0_1',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-sidebar', version: 0.1}],
+  },
+};
+
+export const BasicSidebar = () => {
+  /*
+   * Use the buttons below to open / toggle the amp-sidebar. The sidebar
+   * will be displayed with various navigational elements.
+   */
+  return (
+    <div>
+      <div id="main">
+        <h1>Basic Sidebar</h1>
+        <button on="tap:sidebar.open">Open Sidebar</button>
+        <button on="tap:sidebar.toggle">Toggle Sidebar</button>
+      </div>
+      <amp-sidebar id="sidebar" layout="nodisplay" side="right">
+        <h3>Sidebar</h3>
+        <ul>
+          <li>Nav Element 1</li>
+          <li>Nav Element 2</li>
+          <li>Nav Element 3</li>
+        </ul>
+        <button on="tap:sidebar.close">Close Sidebar</button>
+        <button on="tap:sidebar.toggle">Toggle Sidebar</button>
+      </amp-sidebar>
+    </div>
+  );
+};
+
+export const Toolbar = () => {
+  /*
+   * The toolbar feature allows elements within the amp-sidebar to be
+   * displayed within the main body of the article. In this example two
+   * Navigational Elements from the sidebar will be displayed under the
+   * Toolbar Target when the width of the page is 500px or more.
+   */
+  const minWidth = 500;
+  const mediaQuery = `(min-width: ${minWidth}px)`;
+  return (
+    <div>
+      <div id="main">
+        <button on="tap:toolbar.open">Open Sidebar</button>
+        <button on="tap:toolbar.toggle">Toggle Sidebar</button>
+        <h1>Toolbar Target</h1>
+        <div id="toolbar-target"></div>
+      </div>
+      <amp-sidebar id="toolbar" layout="nodisplay" side="right">
+        <h3>Sidebar</h3>
+        <nav toolbar={mediaQuery} toolbar-target="toolbar-target">
           <ul>
             <li>Nav Element 1</li>
             <li>Nav Element 2</li>
-            <li>Nav Element 3</li>
           </ul>
-          <button on="tap:sidebar.close">Close Sidebar</button>
-          <button on="tap:sidebar.toggle">Toggle Sidebar</button>
-        </amp-sidebar>
-      </div>
-    );
-  })
-  .add('Toolbar', () => {
-    /*
-     * The toolbar feature allows elements within the amp-sidebar to be
-     * displayed within the main body of the article. In this example two
-     * Navigational Elements from the sidebar will be displayed under the
-     * Toolbar Target when the width of the page is 500px or more.
-     */
-    const minWidth = 500;
-    const mediaQuery = `(min-width: ${minWidth}px)`;
-    return (
-      <div>
-        <div id="main">
-          <button on="tap:toolbar.open">Open Sidebar</button>
-          <button on="tap:toolbar.toggle">Toggle Sidebar</button>
-          <h1>Toolbar Target</h1>
-          <div id="toolbar-target"></div>
-        </div>
-        <amp-sidebar id="toolbar" layout="nodisplay" side="right">
-          <h3>Sidebar</h3>
-          <nav toolbar={mediaQuery} toolbar-target="toolbar-target">
-            <ul>
-              <li>Nav Element 1</li>
-              <li>Nav Element 2</li>
-            </ul>
-          </nav>
-          <ul>
-            <li>Nav Element 3</li>
-            <li>Nav Element 4</li>
-          </ul>
-          <button on="tap:toolbar.close">Close Sidebar</button>
-          <button on="tap:toolbar.toggle">Toggle Sidebar</button>
-        </amp-sidebar>
-      </div>
-    );
-  });
+        </nav>
+        <ul>
+          <li>Nav Element 3</li>
+          <li>Nav Element 4</li>
+        </ul>
+        <button on="tap:toolbar.close">Close Sidebar</button>
+        <button on="tap:toolbar.toggle">Toggle Sidebar</button>
+      </amp-sidebar>
+    </div>
+  );
+};
diff --git a/extensions/amp-sidebar/0.1/swipe-to-dismiss.js b/extensions/amp-sidebar/0.1/swipe-to-dismiss.js
index 3f54edc488655..a52f8a4431877 100644
--- a/extensions/amp-sidebar/0.1/swipe-to-dismiss.js
+++ b/extensions/amp-sidebar/0.1/swipe-to-dismiss.js
@@ -150,7 +150,7 @@ export class SwipeToDismiss {
    * }} config
    */
   startSwipe(config) {
-    const {swipeElement, mask, direction, orientation} = config;
+    const {direction, mask, orientation, swipeElement} = config;
     this.swipeElement_ = swipeElement;
     this.mask_ = mask;
     this.direction_ = direction;
diff --git a/extensions/amp-sidebar/0.1/test-e2e/test-amp-sidebar-toolbar.js b/extensions/amp-sidebar/0.1/test-e2e/test-amp-sidebar-toolbar.js
new file mode 100644
index 0000000000000..c00503b362bc0
--- /dev/null
+++ b/extensions/amp-sidebar/0.1/test-e2e/test-amp-sidebar-toolbar.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright 2020 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.
+ */
+
+describes.endtoend(
+  'amp-sidebar with toolbar',
+  {
+    fixture: 'amp-sidebar/amp-sidebar-toolbar.html',
+    environments: ['single', 'viewer-demo'],
+  },
+  async (env) => {
+    let controller;
+
+    beforeEach(() => {
+      controller = env.controller;
+    });
+
+    it('should trigger the toolbar layout when viewport is resized', async () => {
+      await controller.setWindowRect({width: 800, height: 600});
+
+      const navElement = await controller.findElement('#nav-target-element');
+      await expect(controller.getElementProperty(navElement, 'hidden')).to.be
+        .false;
+
+      // change orientation to potrait mode.
+      await controller.setWindowRect({width: 600, height: 800});
+      await expect(controller.getElementProperty(navElement, 'hidden')).to.be
+        .true;
+
+      // revert to landscape mode.
+      await controller.setWindowRect({width: 800, height: 600});
+      await expect(controller.getElementProperty(navElement, 'hidden')).to.be
+        .false;
+    });
+  }
+);
diff --git a/extensions/amp-sidebar/0.1/test-e2e/test-amp-sidebar.js b/extensions/amp-sidebar/0.1/test-e2e/test-amp-sidebar.js
index f8b08a49d2379..bc8e7ea52cbf0 100644
--- a/extensions/amp-sidebar/0.1/test-e2e/test-amp-sidebar.js
+++ b/extensions/amp-sidebar/0.1/test-e2e/test-amp-sidebar.js
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import {Key} from '../../../../build-system/tasks/e2e/functional-test-controller';
+import {Key} from '../../../../build-system/tasks/e2e/e2e-types';
 
 describes.endtoend(
   'amp-sidebar',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-sidebar/amp-sidebar.html',
+    version: '0.1',
+    fixture: 'amp-sidebar/amp-sidebar.html',
     environments: ['single', 'viewer-demo'],
   },
   async (env) => {
diff --git a/extensions/amp-sidebar/0.1/test/integration/test-amp-sidebar.js b/extensions/amp-sidebar/0.1/test/integration/test-amp-sidebar.js
index 30523982e8a9c..b3eab341cce72 100644
--- a/extensions/amp-sidebar/0.1/test/integration/test-amp-sidebar.js
+++ b/extensions/amp-sidebar/0.1/test/integration/test-amp-sidebar.js
@@ -16,11 +16,11 @@
 
 import {poll} from '../../../../../testing/iframe';
 
-describe
+describes.sandboxed
   .configure()
   .skipSafari()
   .skipEdge()
-  .run('amp-sidebar', function () {
+  .run('amp-sidebar', {}, function () {
     // Extend timeout slightly for flakes on Windows environments
     this.timeout(4000);
     const extensions = ['amp-sidebar'];
@@ -72,9 +72,8 @@ describe
             openerButton.click();
             return openedPromise
               .then(() => {
-                const closerButton = win.document.getElementById(
-                  'sidebarCloser'
-                );
+                const closerButton =
+                  win.document.getElementById('sidebarCloser');
                 const closedPromise = waitForSidebarClose(win.document);
                 closerButton.click();
                 return closedPromise;
@@ -87,10 +86,11 @@ describe
         it.configure()
           .skipIfPropertiesObfuscated()
           .skipFirefox()
-          .run('should not change scroll position after close', () => {
+          .run('should not change scroll position after close', async () => {
             const openerButton = win.document.getElementById('sidebarOpener');
             const sidebar = win.document.getElementById('sidebar1');
-            const viewport = sidebar.implementation_.getViewport();
+            const impl = await sidebar.getImpl(false);
+            const viewport = impl.getViewport();
             const openedPromise = waitForSidebarOpen(win.document);
             openerButton.click();
             expect(viewport.getScrollTop()).to.equal(0);
@@ -98,9 +98,8 @@ describe
               .then(() => {
                 viewport.setScrollTop(1000);
                 expect(viewport.getScrollTop()).to.equal(1000);
-                const closerButton = win.document.getElementById(
-                  'sidebarCloser'
-                );
+                const closerButton =
+                  win.document.getElementById('sidebarCloser');
                 const closedPromise = waitForSidebarClose(win.document);
                 closerButton.click();
                 return closedPromise;
diff --git a/extensions/amp-sidebar/0.1/test/test-amp-sidebar.js b/extensions/amp-sidebar/0.1/test/test-amp-sidebar.js
index 2098e348e2a4e..f02c8355b1f2e 100644
--- a/extensions/amp-sidebar/0.1/test/test-amp-sidebar.js
+++ b/extensions/amp-sidebar/0.1/test/test-amp-sidebar.js
@@ -15,10 +15,10 @@
  */
 
 import '../amp-sidebar';
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {ActionService} from '../../../../src/service/action-impl';
-import {ActionTrust} from '../../../../src/action-constants';
-import {Keys} from '../../../../src/utils/key-codes';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
+import {Keys} from '../../../../src/core/constants/key-codes';
 import {Services} from '../../../../src/services';
 import {assertScreenReaderElement} from '../../../../testing/test-helper';
 import {clearModalStack, getModalStackLength} from '../../../../src/modal';
@@ -82,6 +82,9 @@ describes.realWin(
       if (options.side) {
         ampSidebar.setAttribute('side', options.side);
       }
+      if (options.disableSwipe) {
+        ampSidebar.setAttribute('data-disable-swipe-close', '');
+      }
       if (options.closeText) {
         ampSidebar.setAttribute(
           'data-close-button-aria-label',
@@ -92,12 +95,12 @@ describes.realWin(
       ampSidebar.setAttribute('layout', 'nodisplay');
       doc.body.appendChild(ampSidebar);
       return ampSidebar
-        .build()
+        .buildInternal()
         .then(() => {
           return ampSidebar.layoutCallback();
         })
-        .then(() => {
-          const impl = ampSidebar.implementation_;
+        .then(() => ampSidebar.getImpl(false))
+        .then((impl) => {
           if (options.toolbars) {
             env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
               callback();
@@ -161,72 +164,74 @@ describes.realWin(
     }
 
     describe('amp-sidebar', () => {
-      it('should apply overlay class', () => {
-        return getAmpSidebar().then((sidebarElement) => {
-          assert(sidebarElement.classList.contains('i-amphtml-overlay'));
-        });
+      it('should apply overlay class', async () => {
+        const sidebarElement = await getAmpSidebar();
+        assert(sidebarElement.classList.contains('i-amphtml-overlay'));
       });
 
       it(
         'should replace text to screen reader ' +
           'button in data-close-button-aria-label',
-        () => {
-          return getAmpSidebar({
+        async () => {
+          const sidebarElement = await getAmpSidebar({
             'closeText': 'data-close-button-aria-label',
-          }).then((sidebarElement) => {
-            const closeButton = sidebarElement.lastElementChild;
-            expect(closeButton.textContent).to.equal(
-              'data-close-button-aria-label'
-            );
           });
+          const closeButton = sidebarElement.lastElementChild;
+          expect(closeButton.textContent).to.equal(
+            'data-close-button-aria-label'
+          );
         }
       );
 
-      it('should open from left is side is not specified', () => {
-        return getAmpSidebar().then((sidebarElement) => {
-          expect(sidebarElement.getAttribute('side')).to.equal('left');
-        });
+      it('should open from left is side is not specified', async () => {
+        const sidebarElement = await getAmpSidebar();
+        expect(sidebarElement.getAttribute('side')).to.equal('left');
       });
 
-      it('should open from right is side right is specified', () => {
-        return getAmpSidebar({'side': 'right'}).then((sidebarElement) => {
-          expect(sidebarElement.getAttribute('side')).to.equal('right');
-        });
+      it('should open from right is side right is specified', async () => {
+        const sidebarElement = await getAmpSidebar({'side': 'right'});
+        expect(sidebarElement.getAttribute('side')).to.equal('right');
       });
 
-      it('should create mask element in DOM', () => {
-        return getAmpSidebar({'stubHistory': true}).then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          execute(impl, 'open');
-          expect(
-            doc.querySelectorAll('.i-amphtml-sidebar-mask').length
-          ).to.equal(1);
-        });
+      it('should create mask element in DOM', async () => {
+        const sidebarElement = await getAmpSidebar({'stubHistory': true});
+        const impl = await sidebarElement.getImpl(false);
+        execute(impl, 'open');
+        expect(doc.querySelectorAll('.i-amphtml-sidebar-mask').length).to.equal(
+          1
+        );
       });
 
-      it('should create an invisible close button for screen readers only', () => {
-        return getAmpSidebar().then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          impl.close_ = env.sandbox.spy();
-          const closeButton = sidebarElement.lastElementChild;
-          expect(closeButton).to.exist;
-          expect(closeButton.tagName).to.equal('BUTTON');
-          assertScreenReaderElement(closeButton, {index: 1});
-          expect(closeButton.textContent).to.equal('Close the sidebar');
-          expect(impl.close_).to.have.not.been.called;
-          closeButton.click();
-          expect(impl.close_).to.be.calledOnce;
-        });
+      it('should create styleable mask element in DOM', async () => {
+        const sidebarElement = await getAmpSidebar({'stubHistory': true});
+        const impl = await sidebarElement.getImpl(false);
+        execute(impl, 'open');
+        expect(doc.querySelectorAll('.amp-sidebar-mask').length).to.equal(1);
+      });
+
+      it('should create an invisible close button for screen readers only', async () => {
+        const sidebarElement = await getAmpSidebar();
+        const impl = await sidebarElement.getImpl(false);
+        impl.close_ = env.sandbox.spy();
+        const closeButton = sidebarElement.lastElementChild;
+        expect(closeButton).to.exist;
+        expect(closeButton.tagName).to.equal('BUTTON');
+        assertScreenReaderElement(closeButton, {index: 1});
+        expect(closeButton.textContent).to.equal('Close the sidebar');
+        expect(impl.close_).to.have.not.been.called;
+        closeButton.click();
+        expect(impl.close_).to.be.calledOnce;
       });
 
       it('should open sidebar on button click', async () => {
         const sidebarElement = await getAmpSidebar();
-        const impl = sidebarElement.implementation_;
+        const impl = await sidebarElement.getImpl(false);
+        env.sandbox.stub(sidebarElement, 'setAsContainerInternal');
+        env.sandbox.stub(sidebarElement, 'removeAsContainerInternal');
         const screenReaderCloseButton = sidebarElement.querySelector(
           'button.i-amphtml-screen-reader'
         );
-        clock = lolex.install({
-          target: impl.win,
+        clock = fakeTimers.withGlobal(impl.win).install({
           toFake: ['Date', 'setTimeout'],
         });
         const historyPushSpy = env.sandbox.spy();
@@ -270,11 +275,14 @@ describes.realWin(
         expect(owners.scheduleLayout).to.be.calledOnce;
         expect(historyPushSpy).to.be.calledOnce;
         expect(historyPopSpy).to.have.not.been.called;
+
+        expect(sidebarElement.setAsContainerInternal).to.be.calledOnce;
+        expect(sidebarElement.removeAsContainerInternal).to.not.be.called;
       });
 
       it('ignore repeated calls to open', async () => {
         const sidebarElement = await getAmpSidebar({'stubHistory': true});
-        const impl = sidebarElement.implementation_;
+        const impl = await sidebarElement.getImpl(false);
 
         execute(impl, 'open');
         expect(getModalStackLength()).to.equal(1);
@@ -284,7 +292,7 @@ describes.realWin(
 
       it('ignore repeated calls to close', async () => {
         const sidebarElement = await getAmpSidebar({'stubHistory': true});
-        const impl = sidebarElement.implementation_;
+        const impl = await sidebarElement.getImpl(false);
 
         execute(impl, 'open');
         execute(impl, 'close');
@@ -294,7 +302,7 @@ describes.realWin(
 
       it('close on history back', async () => {
         const sidebarElement = await getAmpSidebar({'stubHistory': true});
-        const impl = sidebarElement.implementation_;
+        const impl = await sidebarElement.getImpl(false);
 
         execute(impl, 'open');
 
@@ -319,7 +327,7 @@ describes.realWin(
         env.sandbox.stub(platform, 'isSafari').returns(true);
 
         const sidebarElement = await getAmpSidebar({'stubHistory': true});
-        const impl = sidebarElement.implementation_;
+        const impl = await sidebarElement.getImpl(false);
 
         execute(impl, 'open');
         // history "back"
@@ -331,11 +339,20 @@ describes.realWin(
 
       it('should close sidebar on button click', async () => {
         const sidebarElement = await getAmpSidebar({'stubHistory': true});
-        const impl = sidebarElement.implementation_;
-        clock = lolex.install({
-          target: impl.win,
+        const impl = await sidebarElement.getImpl(false);
+        env.sandbox.stub(sidebarElement, 'setAsContainerInternal');
+        env.sandbox.stub(sidebarElement, 'removeAsContainerInternal');
+        clock = fakeTimers.withGlobal(impl.win).install({
           toFake: ['Date', 'setTimeout'],
         });
+
+        // Sidebar has a child.
+        const child = createElementWithAttributes(doc, 'amp-img', {
+          layout: 'nodisplay',
+        });
+        sidebarElement.appendChild(child);
+        env.sandbox.stub(child, 'unmount');
+
         owners.schedulePause = env.sandbox.spy();
         const historyPushSpy = env.sandbox.spy();
         const historyPopSpy = env.sandbox.spy();
@@ -372,6 +389,9 @@ describes.realWin(
         execute(impl, 'close');
         expect(owners.schedulePause).to.be.calledOnce;
         expect(historyPopSpy).to.be.calledOnce;
+
+        expect(sidebarElement.removeAsContainerInternal).to.be.calledOnce;
+        expect(child.unmount).to.be.calledOnce;
       });
 
       it('should toggle sidebar on button click', async () => {
@@ -379,9 +399,8 @@ describes.realWin(
         const screenReaderCloseButton = sidebarElement.querySelector(
           'button.i-amphtml-screen-reader'
         );
-        const impl = sidebarElement.implementation_;
-        clock = lolex.install({
-          target: impl.win,
+        const impl = await sidebarElement.getImpl(false);
+        clock = fakeTimers.withGlobal(impl.win).install({
           toFake: ['Date', 'setTimeout'],
         });
         owners.scheduleLayout = env.sandbox.spy();
@@ -412,320 +431,328 @@ describes.realWin(
         expect(owners.schedulePause).to.be.calledOnce;
       });
 
-      it('should close sidebar on escape', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          clock = lolex.install({
-            target: impl.win,
-            toFake: ['Date', 'setTimeout'],
-          });
-          owners.schedulePause = env.sandbox.spy();
-
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          execute(impl, 'open');
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          const eventObj = doc.createEventObject
-            ? doc.createEventObject()
-            : doc.createEvent('Events');
-          if (eventObj.initEvent) {
-            eventObj.initEvent('keydown', true, true);
-          }
-          eventObj.key = Keys.ESCAPE;
-          eventObj.which = KEYBOARD_EVENT_WHICH_ESCAPE;
-          const el = doc.documentElement;
-          el.dispatchEvent
-            ? el.dispatchEvent(eventObj)
-            : el.fireEvent('onkeydown', eventObj);
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          clock.tick(600);
-          expect(sidebarElement).to.have.display('none');
-          expect(owners.schedulePause).to.be.calledOnce;
+      it('should close sidebar on escape', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const impl = await sidebarElement.getImpl(false);
+        clock = fakeTimers.withGlobal(impl.win).install({
+          toFake: ['Date', 'setTimeout'],
         });
+        owners.schedulePause = env.sandbox.spy();
+
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        execute(impl, 'open');
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        const eventObj = doc.createEventObject
+          ? doc.createEventObject()
+          : doc.createEvent('Events');
+        if (eventObj.initEvent) {
+          eventObj.initEvent('keydown', true, true);
+        }
+        eventObj.key = Keys.ESCAPE;
+        eventObj.which = KEYBOARD_EVENT_WHICH_ESCAPE;
+        const el = doc.documentElement;
+        el.dispatchEvent
+          ? el.dispatchEvent(eventObj)
+          : el.fireEvent('onkeydown', eventObj);
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        clock.tick(600);
+        expect(sidebarElement).to.have.display('none');
+        expect(owners.schedulePause).to.be.calledOnce;
       });
 
-      it('should reflect state of the sidebar', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          clock = lolex.install({
-            target: impl.win,
-            toFake: ['Date', 'setTimeout'],
-          });
-          owners.schedulePause = env.sandbox.spy();
-          owners.scheduleResume = env.sandbox.spy();
+      it('should reflect state of the sidebar', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const impl = await sidebarElement.getImpl(false);
+        clock = fakeTimers.withGlobal(impl.win).install({
+          toFake: ['Date', 'setTimeout'],
+        });
+        owners.schedulePause = env.sandbox.spy();
+        owners.scheduleResume = env.sandbox.spy();
 
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          clock.tick(600);
-          expect(owners.schedulePause).to.have.not.been.called;
-          expect(owners.scheduleResume).to.have.not.been.called;
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        clock.tick(600);
+        expect(owners.schedulePause).to.have.not.been.called;
+        expect(owners.scheduleResume).to.have.not.been.called;
 
-          execute(impl, 'toggle');
+        execute(impl, 'toggle');
 
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          clock.tick(600);
-          expect(owners.schedulePause).to.have.not.been.called;
-          expect(owners.scheduleResume).to.be.calledOnce;
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        clock.tick(600);
+        expect(owners.schedulePause).to.have.not.been.called;
+        expect(owners.scheduleResume).to.be.calledOnce;
 
-          execute(impl, 'toggle');
+        execute(impl, 'toggle');
 
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          clock.tick(600);
-          expect(owners.schedulePause).to.be.calledOnce;
-          expect(owners.scheduleResume).to.be.calledOnce;
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        clock.tick(600);
+        expect(owners.schedulePause).to.be.calledOnce;
+        expect(owners.scheduleResume).to.be.calledOnce;
 
-          execute(impl, 'toggle');
+        execute(impl, 'toggle');
 
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          clock.tick(600);
-          expect(owners.schedulePause).to.be.calledOnce;
-          expect(owners.scheduleResume).to.have.callCount(2);
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        clock.tick(600);
+        expect(owners.schedulePause).to.be.calledOnce;
+        expect(owners.scheduleResume).to.have.callCount(2);
 
-          execute(impl, 'toggle');
+        execute(impl, 'toggle');
 
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          clock.tick(600);
-          expect(owners.schedulePause).to.have.callCount(2);
-          expect(owners.scheduleResume).to.have.callCount(2);
-        });
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        clock.tick(600);
+        expect(owners.schedulePause).to.have.callCount(2);
+        expect(owners.scheduleResume).to.have.callCount(2);
       });
 
-      it.skip('should fix scroll leaks on ios safari', () => {
+      it.skip('should fix scroll leaks on ios safari', async () => {
         env.sandbox.stub(platform, 'isIos').returns(true);
         env.sandbox.stub(platform, 'isSafari').returns(true);
-        return getAmpSidebar().then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
-            callback();
-          });
-          const scrollLeakSpy = env.sandbox.spy(
-            impl,
-            'fixIosElasticScrollLeak_'
-          );
-          impl.buildCallback();
-          expect(scrollLeakSpy).to.be.calledOnce;
+        const sidebarElement = await getAmpSidebar();
+        const impl = await sidebarElement.getImpl(false);
+        env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
+          callback();
         });
+        const scrollLeakSpy = env.sandbox.spy(impl, 'fixIosElasticScrollLeak_');
+        impl.buildCallback();
+        expect(scrollLeakSpy).to.be.calledOnce;
       });
 
-      it.skip('should adjust for IOS safari bottom bar', () => {
+      it.skip('should adjust for IOS safari bottom bar', async () => {
         env.sandbox.stub(platform, 'isIos').returns(true);
         env.sandbox.stub(platform, 'isSafari').returns(true);
-        return getAmpSidebar().then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
-            callback();
-          });
-          const compensateIosBottombarSpy = env.sandbox.spy(
-            impl,
-            'compensateIosBottombar_'
-          );
-          const initalChildrenCount = sidebarElement.children.length;
-          execute(impl, 'open');
-          expect(compensateIosBottombarSpy).to.be.calledOnce;
-          // 10 lis + one top padding element inserted
-          expect(sidebarElement.children.length).to.equal(
-            initalChildrenCount + 1
-          );
+        const sidebarElement = await getAmpSidebar();
+        const impl = await sidebarElement.getImpl(false);
+        env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
+          callback();
         });
+        const compensateIosBottombarSpy = env.sandbox.spy(
+          impl,
+          'compensateIosBottombar_'
+        );
+        const initalChildrenCount = sidebarElement.children.length;
+        execute(impl, 'open');
+        expect(compensateIosBottombarSpy).to.be.calledOnce;
+        // 10 lis + one top padding element inserted
+        expect(sidebarElement.children.length).to.equal(
+          initalChildrenCount + 1
+        );
       });
 
-      it('should close sidebar if clicked on a non-local anchor', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const anchor = sidebarElement.getElementsByTagName('a')[0];
-          anchor.href = '#newloc';
-          const impl = sidebarElement.implementation_;
-          clock = lolex.install({
-            target: impl.win,
-            toFake: ['Date', 'setTimeout'],
-          });
-          owners.schedulePause = env.sandbox.spy();
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          execute(impl, 'open');
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          const eventObj = doc.createEventObject
-            ? doc.createEventObject()
-            : doc.createEvent('Events');
-          if (eventObj.initEvent) {
-            eventObj.initEvent('click', true, true);
-          }
-          const ampDoc = sidebarElement.getAmpDoc();
-          env.sandbox.stub(ampDoc, 'getUrl').returns(window.location.href);
-          anchor.dispatchEvent
-            ? anchor.dispatchEvent(eventObj)
-            : anchor.fireEvent('onkeydown', eventObj);
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          clock.tick(600);
-          expect(sidebarElement).to.have.display('none');
-          expect(owners.schedulePause).to.be.calledOnce;
+      it('should close sidebar if clicked on a non-local anchor', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const anchor = sidebarElement.getElementsByTagName('a')[0];
+        anchor.href = '#newloc';
+        const impl = await sidebarElement.getImpl(false);
+        clock = fakeTimers.withGlobal(impl.win).install({
+          toFake: ['Date', 'setTimeout'],
         });
+        owners.schedulePause = env.sandbox.spy();
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        execute(impl, 'open');
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        const eventObj = doc.createEventObject
+          ? doc.createEventObject()
+          : doc.createEvent('Events');
+        if (eventObj.initEvent) {
+          eventObj.initEvent('click', true, true);
+        }
+        const ampDoc = sidebarElement.getAmpDoc();
+        env.sandbox.stub(ampDoc, 'getUrl').returns(window.location.href);
+        anchor.dispatchEvent
+          ? anchor.dispatchEvent(eventObj)
+          : anchor.fireEvent('onkeydown', eventObj);
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        clock.tick(600);
+        expect(sidebarElement).to.have.display('none');
+        expect(owners.schedulePause).to.be.calledOnce;
       });
 
-      it('should not close sidebar if clicked on a new origin navigation', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const anchor = sidebarElement.getElementsByTagName('a')[0];
-          anchor.href = '#newloc';
-          const impl = sidebarElement.implementation_;
-          owners.schedulePause = env.sandbox.spy();
-          env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
-            callback();
-          });
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          execute(impl, 'open');
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          const eventObj = doc.createEventObject
-            ? doc.createEventObject()
-            : doc.createEvent('Events');
-          if (eventObj.initEvent) {
-            eventObj.initEvent('click', true, true);
-          }
-          const ampDoc = sidebarElement.getAmpDoc();
-          env.sandbox.stub(ampDoc, 'getUrl').returns('http://example.com');
-          anchor.dispatchEvent
-            ? anchor.dispatchEvent(eventObj)
-            : anchor.fireEvent('onkeydown', eventObj);
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          expect(sidebarElement).to.not.have.display('');
-          expect(owners.schedulePause).to.have.not.been.called;
+      it('should not close sidebar if clicked on a new origin navigation', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const anchor = sidebarElement.getElementsByTagName('a')[0];
+        anchor.href = '#newloc';
+        const impl = await sidebarElement.getImpl(false);
+        owners.schedulePause = env.sandbox.spy();
+        env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
+          callback();
         });
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        execute(impl, 'open');
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        const eventObj = doc.createEventObject
+          ? doc.createEventObject()
+          : doc.createEvent('Events');
+        if (eventObj.initEvent) {
+          eventObj.initEvent('click', true, true);
+        }
+        const ampDoc = sidebarElement.getAmpDoc();
+        env.sandbox.stub(ampDoc, 'getUrl').returns('http://example.com');
+        anchor.dispatchEvent
+          ? anchor.dispatchEvent(eventObj)
+          : anchor.fireEvent('onkeydown', eventObj);
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        expect(sidebarElement).to.not.have.display('');
+        expect(owners.schedulePause).to.have.not.been.called;
       });
 
-      it('should not close sidebar if clicked on new page navigation', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const anchor = sidebarElement.getElementsByTagName('a')[0];
-          anchor.href = '#newloc';
-          const impl = sidebarElement.implementation_;
-          owners.schedulePause = env.sandbox.spy();
+      it('should not close sidebar if clicked on new page navigation', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const anchor = sidebarElement.getElementsByTagName('a')[0];
+        anchor.href = '#newloc';
+        const impl = await sidebarElement.getImpl(false);
+        owners.schedulePause = env.sandbox.spy();
 
-          env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
-            callback();
-          });
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          execute(impl, 'open');
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          const eventObj = doc.createEventObject
-            ? doc.createEventObject()
-            : doc.createEvent('Events');
-          if (eventObj.initEvent) {
-            eventObj.initEvent('click', true, true);
-          }
-          const ampDoc = sidebarElement.getAmpDoc();
-          env.sandbox
-            .stub(ampDoc, 'getUrl')
-            .returns('http://localhost:9876/context.html?old=context');
-          anchor.dispatchEvent
-            ? anchor.dispatchEvent(eventObj)
-            : anchor.fireEvent('onkeydown', eventObj);
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          expect(sidebarElement).to.not.have.display('');
-          expect(owners.schedulePause).to.have.not.been.called;
+        env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
+          callback();
         });
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        execute(impl, 'open');
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        const eventObj = doc.createEventObject
+          ? doc.createEventObject()
+          : doc.createEvent('Events');
+        if (eventObj.initEvent) {
+          eventObj.initEvent('click', true, true);
+        }
+        const ampDoc = sidebarElement.getAmpDoc();
+        env.sandbox
+          .stub(ampDoc, 'getUrl')
+          .returns('http://localhost:9876/context.html?old=context');
+        anchor.dispatchEvent
+          ? anchor.dispatchEvent(eventObj)
+          : anchor.fireEvent('onkeydown', eventObj);
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        expect(sidebarElement).to.not.have.display('');
+        expect(owners.schedulePause).to.have.not.been.called;
       });
 
-      it('should not close sidebar if clicked on non-anchor', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const li = sidebarElement.getElementsByTagName('li')[0];
-          const impl = sidebarElement.implementation_;
-          owners.schedulePause = env.sandbox.spy();
+      it('should not close sidebar if clicked on non-anchor', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const li = sidebarElement.getElementsByTagName('li')[0];
+        const impl = await sidebarElement.getImpl(false);
+        owners.schedulePause = env.sandbox.spy();
 
-          env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
-            callback();
-          });
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          execute(impl, 'open');
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          const eventObj = doc.createEventObject
-            ? doc.createEventObject()
-            : doc.createEvent('Events');
-          if (eventObj.initEvent) {
-            eventObj.initEvent('click', true, true);
-          }
-          li.dispatchEvent
-            ? li.dispatchEvent(eventObj)
-            : li.fireEvent('onkeydown', eventObj);
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          expect(sidebarElement).to.not.have.display('');
-          expect(owners.schedulePause).to.have.not.been.called;
+        env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
+          callback();
         });
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        execute(impl, 'open');
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        const eventObj = doc.createEventObject
+          ? doc.createEventObject()
+          : doc.createEvent('Events');
+        if (eventObj.initEvent) {
+          eventObj.initEvent('click', true, true);
+        }
+        li.dispatchEvent
+          ? li.dispatchEvent(eventObj)
+          : li.fireEvent('onkeydown', eventObj);
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        expect(sidebarElement).to.not.have.display('');
+        expect(owners.schedulePause).to.have.not.been.called;
       });
 
-      it('should trigger actions on open and close', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
-          env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
-            callback();
-          });
-          owners.scheduleLayout = env.sandbox.stub();
-
-          execute(impl, 'open', /* trust */ 123);
-          expect(triggerSpy).to.be.calledOnce;
-          expect(triggerSpy).to.be.calledWith(
-            impl.element,
-            'sidebarOpen',
-            env.sandbox.match.any,
-            /* trust */ 123
-          );
-
-          execute(impl, 'close', /* trust */ 456);
-          expect(triggerSpy).to.be.calledTwice;
-          expect(triggerSpy).to.be.calledWith(
-            impl.element,
-            'sidebarClose',
-            env.sandbox.match.any,
-            /* trust */ 456
-          );
+      it('should trigger actions on open and close', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const impl = await sidebarElement.getImpl(false);
+        const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
+        env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
+          callback();
         });
+        owners.scheduleLayout = env.sandbox.stub();
+
+        execute(impl, 'open', /* trust */ 123);
+        expect(triggerSpy).to.be.calledOnce;
+        expect(triggerSpy).to.be.calledWith(
+          impl.element,
+          'sidebarOpen',
+          env.sandbox.match.any,
+          /* trust */ 123
+        );
+
+        execute(impl, 'close', /* trust */ 456);
+        expect(triggerSpy).to.be.calledTwice;
+        expect(triggerSpy).to.be.calledWith(
+          impl.element,
+          'sidebarClose',
+          env.sandbox.match.any,
+          /* trust */ 456
+        );
+      });
+
+      it('should disable swipe to close when attribute specified', async () => {
+        const sidebarElement = await getAmpSidebar({disableSwipe: true});
+        const impl = await sidebarElement.getImpl(false);
+        expect(impl.disableSwipeClose_).to.be.true;
+      });
+
+      it('should not allow swipe on input range (slider) element', async () => {
+        const sidebarElement = await getAmpSidebar();
+        const impl = await sidebarElement.getImpl(false);
+
+        const swipeMoveStub = env.sandbox.stub(
+          impl.swipeToDismiss_,
+          'swipeMove'
+        );
+
+        // Do not trigger swipeMove when swiping on an input range element
+        const slider = document.createElement('input');
+        slider.setAttribute('type', 'range');
+        const fakeEvent = {target: slider};
+        impl.handleSwipe_({}, fakeEvent);
+        expect(swipeMoveStub).to.not.be.called;
+
+        // Call swipeMove when swiping on any other type of element
+        const input = document.createElement('input');
+        const fakeEvent2 = {target: input};
+        impl.handleSwipe_({}, fakeEvent2);
+        expect(swipeMoveStub).to.be.called.calledOnce;
       });
     });
 
     describe('amp-sidebar - toolbars in amp-sidebar', () => {
       // Tests for amp-sidebar 1.0
-      it('should not create toolbars without <nav toolbar />', () => {
-        return getAmpSidebar().then((sidebarElement) => {
-          const headerElements = doc.getElementsByTagName('header');
-          const toolbarElements = doc.querySelectorAll('[toolbar]');
-          expect(headerElements.length).to.be.equal(0);
-          expect(toolbarElements.length).to.be.equal(0);
-          expect(sidebarElement.implementation_.toolbars_.length).to.be.equal(
-            0
-          );
-        });
+      it('should not create toolbars without <nav toolbar />', async () => {
+        const sidebarElement = await getAmpSidebar();
+        const impl = await sidebarElement.getImpl(false);
+        const headerElements = doc.getElementsByTagName('header');
+        const toolbarElements = doc.querySelectorAll('[toolbar]');
+        expect(headerElements.length).to.be.equal(0);
+        expect(toolbarElements.length).to.be.equal(0);
+        expect(impl.toolbars_.length).to.be.equal(0);
       });
 
-      it('should create a toolbar element within the toolbar-target', () => {
-        return getAmpSidebar({
+      it('should create a toolbar element within the toolbar-target', async () => {
+        const sidebarElement = await getAmpSidebar({
           toolbars: [{}],
-        }).then((sidebarElement) => {
-          expect(sidebarElement.implementation_.toolbars_.length).to.be.equal(
-            1
-          );
         });
+        const impl = await sidebarElement.getImpl(false);
+        expect(impl.toolbars_.length).to.be.equal(1);
       });
 
       it(
         'should create multiple toolbar elements, ' +
           'within their respective containers',
-        () => {
-          return getAmpSidebar({
+        async () => {
+          const sidebarElement = await getAmpSidebar({
             toolbars: [
               {},
               {
                 media: '(min-width: 1024px)',
               },
             ],
-          }).then((sidebarElement) => {
-            expect(sidebarElement.implementation_.toolbars_.length).to.be.equal(
-              2
-            );
           });
+          const impl = await sidebarElement.getImpl(false);
+          expect(impl.toolbars_.length).to.be.equal(2);
         }
       );
     });
diff --git a/extensions/amp-sidebar/0.1/test/test-toolbar.js b/extensions/amp-sidebar/0.1/test/test-toolbar.js
index c436b1e126797..86c6d7ae9e875 100644
--- a/extensions/amp-sidebar/0.1/test/test-toolbar.js
+++ b/extensions/amp-sidebar/0.1/test/test-toolbar.js
@@ -19,11 +19,11 @@ import {Services} from '../../../../src/services';
 import {Toolbar} from '../toolbar';
 import {adopt} from '../../../../src/runtime';
 import {createIframePromise} from '../../../../testing/iframe';
-import {toArray} from '../../../../src/types';
+import {toArray} from '../../../../src/core/types/array';
 
 adopt(window);
 
-describe('amp-sidebar - toolbar', () => {
+describes.sandboxed('amp-sidebar - toolbar', {}, (env) => {
   let timer;
 
   function getToolbars(options) {
@@ -43,7 +43,7 @@ describe('amp-sidebar - toolbar', () => {
         },
       };
 
-      window.sandbox.stub(timer, 'delay').callsFake(function (callback) {
+      env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
         callback();
       });
 
diff --git a/extensions/amp-sidebar/0.1/test/validator-amp-sidebar.out b/extensions/amp-sidebar/0.1/test/validator-amp-sidebar.out
index 3e2fe25647b96..e9b817ee40dd5 100644
--- a/extensions/amp-sidebar/0.1/test/validator-amp-sidebar.out
+++ b/extensions/amp-sidebar/0.1/test/validator-amp-sidebar.out
@@ -70,7 +70,7 @@ FAIL
 |    <amp-sidebar layout="nodisplay">
 |      <nav toolbar="(min-width: 0px) and (max-width: 768px)" toolbar-target="id">
 >>     ^~~~~~~~~
-amp-sidebar/0.1/test/validator-amp-sidebar.html:70:4 Tag 'amp-sidebar > nav' must have 1 child tags - saw 2 child tags.
+amp-sidebar/0.1/test/validator-amp-sidebar.html:70:4 Tag 'nav' must have 1 child tags - saw 2 child tags.
 |        <ul>
 |          <li>Nav item 1</li>
 |        </ul>
@@ -85,7 +85,7 @@ amp-sidebar/0.1/test/validator-amp-sidebar.html:70:4 Tag 'amp-sidebar > nav' mus
 |    <amp-sidebar layout="nodisplay">
 |      <nav toolbar="(min-width: 0px) and (max-width: 768px)" toolbar-target="id">
 >>     ^~~~~~~~~
-amp-sidebar/0.1/test/validator-amp-sidebar.html:83:4 Tag 'amp-sidebar > nav' must have 1 child tags - saw 2 child tags.
+amp-sidebar/0.1/test/validator-amp-sidebar.html:83:4 Tag 'nav' must have 1 child tags - saw 2 child tags.
 |        <ol>
 |          <li>Nav item 1</li>
 |        </ol>
@@ -100,7 +100,7 @@ amp-sidebar/0.1/test/validator-amp-sidebar.html:83:4 Tag 'amp-sidebar > nav' mus
 |      <amp-sidebar layout="nodisplay">
 |        <nav toolbar="(min-width: 0px) and (max-width: 768px)" toolbar-target="id">
 >>       ^~~~~~~~~
-amp-sidebar/0.1/test/validator-amp-sidebar.html:96:6 Tag 'amp-sidebar > nav' must have 1 child tags - saw 2 child tags.
+amp-sidebar/0.1/test/validator-amp-sidebar.html:96:6 Tag 'nav' must have 1 child tags - saw 2 child tags.
 |          <ul>
 |            <li>Nav item 1</li>
 |          </ul>
@@ -114,6 +114,6 @@ amp-sidebar/0.1/test/validator-amp-sidebar.html:96:6 Tag 'amp-sidebar > nav' mus
 |    <!-- Invalid: incorrect side value -->
 |    <amp-sidebar side="center" layout="nodisplay"></amp-sidebar>
 >>   ^~~~~~~~~
-amp-sidebar/0.1/test/validator-amp-sidebar.html:108:2 The attribute 'side' in tag 'amp-sidebar' is set to the invalid value 'center'. (see https://amp.dev/documentation/components/amp-sidebar)
+amp-sidebar/0.1/test/validator-amp-sidebar.html:108:2 The attribute 'side' in tag 'amp-sidebar' is set to the invalid value 'center'. (see https://amp.dev/documentation/components/amp-sidebar/)
 |  </body>
 |  </html>
diff --git a/extensions/amp-sidebar/0.1/toolbar.js b/extensions/amp-sidebar/0.1/toolbar.js
index f4a655e417e73..edbfa7cbdaeea 100644
--- a/extensions/amp-sidebar/0.1/toolbar.js
+++ b/extensions/amp-sidebar/0.1/toolbar.js
@@ -60,8 +60,9 @@ export class Toolbar {
    */
   onLayoutChange() {
     // Get if we match the current toolbar media
-    const matchesMedia = this.ampdoc_.win.matchMedia(this.toolbarMedia_)
-      .matches;
+    const matchesMedia = this.ampdoc_.win.matchMedia(
+      this.toolbarMedia_
+    ).matches;
 
     // Remove and add the toolbar dynamically
     if (matchesMedia) {
diff --git a/extensions/amp-sidebar/0.2/amp-sidebar.css b/extensions/amp-sidebar/0.2/amp-sidebar.css
index aa6b0d4692bde..135c50df13b4c 100644
--- a/extensions/amp-sidebar/0.2/amp-sidebar.css
+++ b/extensions/amp-sidebar/0.2/amp-sidebar.css
@@ -80,6 +80,10 @@ amp-sidebar[side], .i-amphtml-sidebar-mask {
   margin: 0;
 }
 
+.amp-sidebar-mask {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
 .i-amphtml-sidebar-mask {
   position: fixed !important;
   top: 0 !important;
diff --git a/extensions/amp-sidebar/0.2/amp-sidebar.js b/extensions/amp-sidebar/0.2/amp-sidebar.js
index 16a4c0c96fa3e..cb9e005faed51 100644
--- a/extensions/amp-sidebar/0.2/amp-sidebar.js
+++ b/extensions/amp-sidebar/0.2/amp-sidebar.js
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../../../src/action-constants';
-import {AmpEvents} from '../../../src/amp-events';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {CSS} from '../../../build/amp-sidebar-0.2.css';
 import {Direction, Orientation, SwipeToDismiss} from './swipe-to-dismiss';
 import {Gestures} from '../../../src/gesture';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Services} from '../../../src/services';
 import {SwipeDef, SwipeXRecognizer} from '../../../src/gesture-recognizers';
 import {Toolbar} from './toolbar';
@@ -29,15 +29,21 @@ import {
   tryFocus,
 } from '../../../src/dom';
 import {createCustomEvent} from '../../../src/event-helper';
+import {debounce} from '../../../src/core/types/function';
 import {descendsFromStory} from '../../../src/utils/story';
 import {dev, devAssert, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {handleAutoscroll} from './autoscroll';
 import {isExperimentOn} from '../../../src/experiments';
+import {
+  observeContentSize,
+  unobserveContentSize,
+} from '../../../src/utils/size-observer';
 import {removeFragment} from '../../../src/url';
 import {setModalAsClosed, setModalAsOpen} from '../../../src/modal';
 import {setStyles, toggle} from '../../../src/style';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
+import {unmountAll} from '../../../src/utils/resource-container-helper';
 
 /** @private @const {string} */
 const TAG = 'amp-sidebar toolbar';
@@ -71,6 +77,11 @@ const SidebarEvents = {
  * @extends {AMP.BaseElement}
  */
 export class AmpSidebar extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -135,11 +146,11 @@ export class AmpSidebar extends AMP.BaseElement {
       // The sidebar is already animated by swipe to dismiss, so skip animation.
       () => this.dismiss_(true, ActionTrust.HIGH)
     );
-  }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
+    this.onResized_ = this.onResized_.bind(this);
+
+    /** @private {?UnlistenDef} */
+    this.onViewportResizeUnlisten_ = null;
   }
 
   /** @override */
@@ -160,6 +171,16 @@ export class AmpSidebar extends AMP.BaseElement {
 
     this.action_ = Services.actionServiceForDoc(element);
 
+    if (
+      this.element.parentNode != this.element.ownerDocument.body &&
+      this.element.parentNode != this.getAmpDoc().getBody()
+    ) {
+      this.user().warn(
+        TAG,
+        `${TAG} is recommended to be a direct child of the <body> element to preserve a logical DOM order.`
+      );
+    }
+
     if (this.side_ != Side.LEFT && this.side_ != Side.RIGHT) {
       this.side_ = this.setSideAttribute_(
         isRTL(this.document_) ? Side.RIGHT : Side.LEFT
@@ -181,6 +202,7 @@ export class AmpSidebar extends AMP.BaseElement {
             this.user().error(TAG, 'Failed to instantiate toolbar', e);
           }
         });
+        this.onResized_();
       });
 
     this.maybeBuildNestedMenu_();
@@ -224,14 +246,14 @@ export class AmpSidebar extends AMP.BaseElement {
     element.appendChild(this.createScreenReaderCloseButton());
 
     this.registerDefaultAction((invocation) => {
-      const {trust, caller} = invocation;
+      const {caller, trust} = invocation;
       this.open_(trust, caller);
     }, 'open');
     this.registerAction('close', (invocation) => {
       this.close_(invocation.trust);
     });
     this.registerAction('toggle', (invocation) => {
-      const {trust, caller} = invocation;
+      const {caller, trust} = invocation;
       if (this.opened_) {
         this.close_(trust);
       } else {
@@ -269,6 +291,22 @@ export class AmpSidebar extends AMP.BaseElement {
     this.setupGestures_(this.element);
   }
 
+  /** @override */
+  attachedCallback() {
+    this.onViewportResizeUnlisten_ = this.viewport_.onResize(
+      debounce(this.win, this.onResized_, 100)
+    );
+    this.onResized_();
+  }
+
+  /** @override */
+  detachedCallback() {
+    if (this.onViewportResizeUnlisten_) {
+      this.onViewportResizeUnlisten_();
+      this.onViewportResizeUnlisten_ = null;
+    }
+  }
+
   /**
    * Loads the extension for nested menu if sidebar contains one and it
    * has not been installed already.
@@ -346,8 +384,8 @@ export class AmpSidebar extends AMP.BaseElement {
     return screenReaderCloseButton;
   }
 
-  /** @override */
-  onLayoutMeasure() {
+  /** @private */
+  onResized_() {
     this.getAmpDoc()
       .whenReady()
       .then(() => {
@@ -430,6 +468,9 @@ export class AmpSidebar extends AMP.BaseElement {
     this.triggerEvent_(SidebarEvents.OPEN, trust);
     this.element.setAttribute('i-amphtml-sidebar-opened', '');
     this.getMaskElement_().setAttribute('i-amphtml-sidebar-opened', '');
+
+    // Set as a container for scheduler to load children elements.
+    this.setAsContainer();
   }
 
   /**
@@ -471,6 +512,13 @@ export class AmpSidebar extends AMP.BaseElement {
       this.historyId_ = -1;
     }
     this.triggerEvent_(SidebarEvents.CLOSE, trust);
+
+    // Undo `setAsContainer`.
+    this.removeAsContainer();
+
+    // Unmount all children when the sidebar is closed. They will automatically
+    // remount when the sidebar is opened again.
+    unmountAll(this.element, /* includeSelf */ false);
   }
 
   /**
@@ -497,6 +545,8 @@ export class AmpSidebar extends AMP.BaseElement {
       this.openerElement_ = openerElement;
       this.initialScrollTop_ = this.viewport_.getScrollTop();
     }
+
+    observeContentSize(this.element, this.onResized_);
   }
 
   /**
@@ -540,6 +590,7 @@ export class AmpSidebar extends AMP.BaseElement {
         tryFocus(this.openerElement_);
       }
     }
+    unobserveContentSize(this.element, this.onResized_);
     return true;
   }
 
@@ -549,9 +600,6 @@ export class AmpSidebar extends AMP.BaseElement {
    * @private
    */
   setupGestures_(element) {
-    if (!isExperimentOn(this.win, 'amp-sidebar-swipe-to-dismiss')) {
-      return;
-    }
     // stop propagation of swipe event inside amp-viewer
     const gestures = Gestures.get(
       dev().assertElement(element),
@@ -610,7 +658,7 @@ export class AmpSidebar extends AMP.BaseElement {
   getMaskElement_() {
     if (!this.maskElement_) {
       const mask = this.document_.createElement('div');
-      mask.classList.add('i-amphtml-sidebar-mask');
+      mask.classList.add('amp-sidebar-mask', 'i-amphtml-sidebar-mask');
       mask.addEventListener('click', () => {
         // Click gesture is high trust.
         this.close_(ActionTrust.HIGH);
diff --git a/extensions/amp-sidebar/0.2/amp-sidebar.md.draft b/extensions/amp-sidebar/0.2/amp-sidebar.md.draft
index ccd057bf6359c..f80594c825cb2 100644
--- a/extensions/amp-sidebar/0.2/amp-sidebar.md.draft
+++ b/extensions/amp-sidebar/0.2/amp-sidebar.md.draft
@@ -68,12 +68,12 @@ for content within the sidebar to be displayed on other parts of the main conten
 - The sidebar can only appear on the left or right side of a page.
 - The `<amp-sidebar>` may contain any valid HTML elements (supported by AMP).
 - The `<amp-sidebar>` may contain any of the following AMP elements:
-  - `<amp-accordion>`
-  - `<amp-img>`
-  - `<amp-fit-text>`
-  - `<amp-list>`
-  - `<amp-live-list>`
-  - `<amp-social-share>`
+    - `<amp-accordion>`
+    - `<amp-img>`
+    - `<amp-fit-text>`
+    - `<amp-list>`
+    - `<amp-live-list>`
+    - `<amp-social-share>`
 - The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.
 - The width of the sidebar can be set and adjusted using CSS (minimum width is 45px).
 - Touch zoom is disabled on the `amp-sidebar` and its mask when the sidebar is open.
@@ -81,7 +81,7 @@ for content within the sidebar to be displayed on other parts of the main conten
 
 _Example:_
 
-In the following example, we use `amp-sidebar` to contain navigation items. However, The second and fourth item, Nav Item 2 and Nav Item 4, are assigned to element id that is on the page. By using the [`on`](../../../spec/amp-actions-and-events.md) attribute, we can scroll smoothly to the element, using the element id and `scrollTo`.
+In the following example, we use `amp-sidebar` to contain navigation items. However, The second and fourth item, Nav Item 2 and Nav Item 4, are assigned to element id that is on the page. By using the [`on`](../../../docs/spec/amp-actions-and-events.md) attribute, we can scroll smoothly to the element, using the element id and `scrollTo`.
 
 ```html
 <amp-sidebar id="sidebar1" layout="nodisplay" side="right">
@@ -98,7 +98,7 @@ In the following example, we use `amp-sidebar` to contain navigation items. Howe
 
 ### Opening and closing the sidebar
 
-To `toggle`, `open`, or `close` the sidebar when an element is tapped or clicked, set the [`on`](../../../spec/amp-actions-and-events.md) action attribute on the element, and specify one of the following action methods:
+To `toggle`, `open`, or `close` the sidebar when an element is tapped or clicked, set the [`on`](../../../docs/spec/amp-actions-and-events.md) action attribute on the element, and specify one of the following action methods:
 
 <table>
   <tr>
@@ -140,9 +140,9 @@ You can create a `toolbar` element that displays in the `<body>` by specifying t
 
 - The sidebar may implement toolbars by adding nav elements with the `toolbar` attribute and `toolbar-target` attribute.
 - The nav element must be a child of `<amp-sidebar>` and follow this format: `<nav toolbar="(media-query)" toolbar-target="elementID">`.
-  - For instance, this would be a valid use of toolbar: `<nav toolbar="(max-width: 1024px)" toolbar-target="target-element">`.
+    - For instance, this would be a valid use of toolbar: `<nav toolbar="(max-width: 1024px)" toolbar-target="target-element">`.
 - The nav containing the toolbar attribute must only contain a single `<ul>` or `<ol>` element, that contains `<li>` elements.
-  - The `<li>` elements may contain any valid HTML elements (supported by AMP), or any of the AMP elements that `<amp-sidebar>` supports.
+    - The `<li>` elements may contain any valid HTML elements (supported by AMP), or any of the AMP elements that `<amp-sidebar>` supports.
 - Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.
 
 _Example: Basic Toolbar_
@@ -174,7 +174,7 @@ In the following example, we display a `toolbar` if the window width is less tha
 
 ## Styling Toolbar
 
-The `toolbar` element within the `<amp-sidebar>` element, will have classes applied to the element depending if the `toolbar-target` element is shown or hidden. This is useful for applying different styles on the `toolbar` element and then `toolbar-target` element. The classes are `amp-sidebar-toolbar-target-shown`, and `amp-sidebar-toolbar-target-hidden`. The class `amp-sidebar-toolbar-target-shown` is applied to the `toolbar` element when the `toolbar-target` element is shown. The class `amp-sidebar-toolbar-target-hidden` is applied to the `toolbar` element when the `toolbar-target` element is hidden.
+The `toolbar` element within the `<amp-sidebar>` element, will have classes applied to the element depending if the `toolbar-target` element is shown or hidden. This is useful for applying different styles on the `toolbar` element and then `toolbar-target` element. The classes are `amp-sidebar-toolbar-target-shown`, and `amp-sidebar-toolbar-target-hidden`. The class `amp-sidebar-toolbar-target-shown` is applied to the `toolbar` element when the `toolbar-target` element is shown. The class `amp-sidebar-toolbar-target-hidden` is applied to the `toolbar` element when the `toolbar-target` element is hidden. Additionally, one can customize the opacity of the mask via `amp-sidebar-mask`.
 
 _Example: Toolbar State Classes_
 
@@ -331,7 +331,7 @@ When using `toolbar` feature, `autoscroll` only works if the `<nav toolbar>` ele
 <div id="target-element"></div>
 ```
 
-Please see [this example file](https://github.com/ampproject/amphtml/blob/master/examples/amp-sidebar-autoscroll.amp.html) for a working example code.
+Please see [this example file](https://github.com/ampproject/amphtml/blob/main/examples/amp-sidebar-autoscroll.amp.html) for a working example code.
 
 ## UX considerations
 
@@ -341,4 +341,4 @@ For this reason, we recommend that affordances to open the sidebar are not place
 
 ## Validation
 
-See [amp-sidebar rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-sidebar/validator-amp-sidebar.protoascii) in the AMP validator specification.
+See [amp-sidebar rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-sidebar/validator-amp-sidebar.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-sidebar/0.2/swipe-to-dismiss.js b/extensions/amp-sidebar/0.2/swipe-to-dismiss.js
index 3f54edc488655..a52f8a4431877 100644
--- a/extensions/amp-sidebar/0.2/swipe-to-dismiss.js
+++ b/extensions/amp-sidebar/0.2/swipe-to-dismiss.js
@@ -150,7 +150,7 @@ export class SwipeToDismiss {
    * }} config
    */
   startSwipe(config) {
-    const {swipeElement, mask, direction, orientation} = config;
+    const {direction, mask, orientation, swipeElement} = config;
     this.swipeElement_ = swipeElement;
     this.mask_ = mask;
     this.direction_ = direction;
diff --git a/extensions/amp-sidebar/0.2/test-e2e/test-amp-sidebar.js b/extensions/amp-sidebar/0.2/test-e2e/test-amp-sidebar.js
index f8b08a49d2379..e30cc811703ad 100644
--- a/extensions/amp-sidebar/0.2/test-e2e/test-amp-sidebar.js
+++ b/extensions/amp-sidebar/0.2/test-e2e/test-amp-sidebar.js
@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import {Key} from '../../../../build-system/tasks/e2e/functional-test-controller';
+import {Key} from '../../../../build-system/tasks/e2e/e2e-types';
 
 describes.endtoend(
   'amp-sidebar',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-sidebar/amp-sidebar.html',
+    fixture: 'amp-sidebar/amp-sidebar.html',
     environments: ['single', 'viewer-demo'],
   },
   async (env) => {
diff --git a/extensions/amp-sidebar/0.2/test/integration/test-amp-sidebar.js b/extensions/amp-sidebar/0.2/test/integration/test-amp-sidebar.js
index 30523982e8a9c..b3eab341cce72 100644
--- a/extensions/amp-sidebar/0.2/test/integration/test-amp-sidebar.js
+++ b/extensions/amp-sidebar/0.2/test/integration/test-amp-sidebar.js
@@ -16,11 +16,11 @@
 
 import {poll} from '../../../../../testing/iframe';
 
-describe
+describes.sandboxed
   .configure()
   .skipSafari()
   .skipEdge()
-  .run('amp-sidebar', function () {
+  .run('amp-sidebar', {}, function () {
     // Extend timeout slightly for flakes on Windows environments
     this.timeout(4000);
     const extensions = ['amp-sidebar'];
@@ -72,9 +72,8 @@ describe
             openerButton.click();
             return openedPromise
               .then(() => {
-                const closerButton = win.document.getElementById(
-                  'sidebarCloser'
-                );
+                const closerButton =
+                  win.document.getElementById('sidebarCloser');
                 const closedPromise = waitForSidebarClose(win.document);
                 closerButton.click();
                 return closedPromise;
@@ -87,10 +86,11 @@ describe
         it.configure()
           .skipIfPropertiesObfuscated()
           .skipFirefox()
-          .run('should not change scroll position after close', () => {
+          .run('should not change scroll position after close', async () => {
             const openerButton = win.document.getElementById('sidebarOpener');
             const sidebar = win.document.getElementById('sidebar1');
-            const viewport = sidebar.implementation_.getViewport();
+            const impl = await sidebar.getImpl(false);
+            const viewport = impl.getViewport();
             const openedPromise = waitForSidebarOpen(win.document);
             openerButton.click();
             expect(viewport.getScrollTop()).to.equal(0);
@@ -98,9 +98,8 @@ describe
               .then(() => {
                 viewport.setScrollTop(1000);
                 expect(viewport.getScrollTop()).to.equal(1000);
-                const closerButton = win.document.getElementById(
-                  'sidebarCloser'
-                );
+                const closerButton =
+                  win.document.getElementById('sidebarCloser');
                 const closedPromise = waitForSidebarClose(win.document);
                 closerButton.click();
                 return closedPromise;
diff --git a/extensions/amp-sidebar/0.2/test/test-amp-sidebar.js b/extensions/amp-sidebar/0.2/test/test-amp-sidebar.js
index 1237d167a73a6..c2a21b3a761ad 100644
--- a/extensions/amp-sidebar/0.2/test/test-amp-sidebar.js
+++ b/extensions/amp-sidebar/0.2/test/test-amp-sidebar.js
@@ -15,12 +15,13 @@
  */
 
 import '../amp-sidebar';
-import * as lolex from 'lolex';
-import {ActionTrust} from '../../../../src/action-constants';
-import {Keys} from '../../../../src/utils/key-codes';
+import * as fakeTimers from '@sinonjs/fake-timers';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
+import {Keys} from '../../../../src/core/constants/key-codes';
 import {Services} from '../../../../src/services';
 import {assertScreenReaderElement} from '../../../../testing/test-helper';
 import {clearModalStack, getModalStackLength} from '../../../../src/modal';
+import {createElementWithAttributes} from '../../../../src/dom';
 import {toggleExperiment} from '../../../../src/experiments';
 
 // Represents the correct value of KeyboardEvent.which for the Escape key
@@ -90,12 +91,12 @@ describes.realWin(
       ampSidebar.setAttribute('layout', 'nodisplay');
       doc.body.appendChild(ampSidebar);
       return ampSidebar
-        .build()
+        .buildInternal()
         .then(() => {
           return ampSidebar.layoutCallback();
         })
-        .then(() => {
-          const impl = ampSidebar.implementation_;
+        .then(() => ampSidebar.getImpl(false))
+        .then((impl) => {
           if (options.toolbars) {
             env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
               callback();
@@ -159,72 +160,74 @@ describes.realWin(
     }
 
     describe('amp-sidebar', () => {
-      it('should apply overlay class', () => {
-        return getAmpSidebar().then((sidebarElement) => {
-          assert(sidebarElement.classList.contains('i-amphtml-overlay'));
-        });
+      it('should apply overlay class', async () => {
+        const sidebarElement = await getAmpSidebar();
+        assert(sidebarElement.classList.contains('i-amphtml-overlay'));
       });
 
       it(
         'should replace text to screen reader ' +
           'button in data-close-button-aria-label',
-        () => {
-          return getAmpSidebar({
+        async () => {
+          const sidebarElement = await getAmpSidebar({
             'closeText': 'data-close-button-aria-label',
-          }).then((sidebarElement) => {
-            const closeButton = sidebarElement.lastElementChild;
-            expect(closeButton.textContent).to.equal(
-              'data-close-button-aria-label'
-            );
           });
+          const closeButton = sidebarElement.lastElementChild;
+          expect(closeButton.textContent).to.equal(
+            'data-close-button-aria-label'
+          );
         }
       );
 
-      it('should open from left is side is not specified', () => {
-        return getAmpSidebar().then((sidebarElement) => {
-          expect(sidebarElement.getAttribute('side')).to.equal('left');
-        });
+      it('should open from left is side is not specified', async () => {
+        const sidebarElement = await getAmpSidebar();
+        expect(sidebarElement.getAttribute('side')).to.equal('left');
       });
 
-      it('should open from right is side right is specified', () => {
-        return getAmpSidebar({'side': 'right'}).then((sidebarElement) => {
-          expect(sidebarElement.getAttribute('side')).to.equal('right');
-        });
+      it('should open from right is side right is specified', async () => {
+        const sidebarElement = await getAmpSidebar({'side': 'right'});
+        expect(sidebarElement.getAttribute('side')).to.equal('right');
       });
 
-      it('should create mask element in DOM', () => {
-        return getAmpSidebar({'stubHistory': true}).then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          execute(impl, 'open');
-          expect(
-            doc.querySelectorAll('.i-amphtml-sidebar-mask').length
-          ).to.equal(1);
-        });
+      it('should create mask element in DOM', async () => {
+        const sidebarElement = await getAmpSidebar({'stubHistory': true});
+        const impl = await sidebarElement.getImpl(false);
+        execute(impl, 'open');
+        expect(doc.querySelectorAll('.i-amphtml-sidebar-mask').length).to.equal(
+          1
+        );
       });
 
-      it('should create an invisible close button for screen readers only', () => {
-        return getAmpSidebar().then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          impl.close_ = env.sandbox.spy();
-          const closeButton = sidebarElement.lastElementChild;
-          expect(closeButton).to.exist;
-          expect(closeButton.tagName).to.equal('BUTTON');
-          assertScreenReaderElement(closeButton, {index: 1});
-          expect(closeButton.textContent).to.equal('Close the sidebar');
-          expect(impl.close_).to.have.not.been.called;
-          closeButton.click();
-          expect(impl.close_).to.be.calledOnce;
-        });
+      it('should create styleable mask element in DOM', async () => {
+        const sidebarElement = await getAmpSidebar({'stubHistory': true});
+        const impl = await sidebarElement.getImpl(false);
+        execute(impl, 'open');
+        expect(doc.querySelectorAll('.amp-sidebar-mask').length).to.equal(1);
+      });
+
+      it('should create an invisible close button for screen readers only', async () => {
+        const sidebarElement = await getAmpSidebar();
+        const impl = await sidebarElement.getImpl(false);
+        impl.close_ = env.sandbox.spy();
+        const closeButton = sidebarElement.lastElementChild;
+        expect(closeButton).to.exist;
+        expect(closeButton.tagName).to.equal('BUTTON');
+        assertScreenReaderElement(closeButton, {index: 1});
+        expect(closeButton.textContent).to.equal('Close the sidebar');
+        expect(impl.close_).to.have.not.been.called;
+        closeButton.click();
+        expect(impl.close_).to.be.calledOnce;
       });
 
       it('should open sidebar on button click', async () => {
         const sidebarElement = await getAmpSidebar();
-        const impl = sidebarElement.implementation_;
+        const impl = await sidebarElement.getImpl(false);
+        env.sandbox.stub(sidebarElement, 'setAsContainerInternal');
+        env.sandbox.stub(sidebarElement, 'removeAsContainerInternal');
         const screenReaderCloseButton = sidebarElement.querySelector(
           'button.i-amphtml-screen-reader'
         );
-        clock = lolex.install({
-          target: impl.win,
+        clock = fakeTimers.withGlobal(impl.win).install({
           toFake: ['Date', 'setTimeout'],
         });
         const historyPushSpy = env.sandbox.spy();
@@ -268,11 +271,14 @@ describes.realWin(
         expect(owners.scheduleLayout).to.be.calledOnce;
         expect(historyPushSpy).to.be.calledOnce;
         expect(historyPopSpy).to.have.not.been.called;
+
+        expect(sidebarElement.setAsContainerInternal).to.be.calledOnce;
+        expect(sidebarElement.removeAsContainerInternal).to.not.be.called;
       });
 
       it('ignore repeated calls to open', async () => {
         const sidebarElement = await getAmpSidebar({'stubHistory': true});
-        const impl = sidebarElement.implementation_;
+        const impl = await sidebarElement.getImpl(false);
 
         execute(impl, 'open');
         expect(getModalStackLength()).to.equal(1);
@@ -282,7 +288,7 @@ describes.realWin(
 
       it('ignore repeated calls to close', async () => {
         const sidebarElement = await getAmpSidebar({'stubHistory': true});
-        const impl = sidebarElement.implementation_;
+        const impl = await sidebarElement.getImpl(false);
 
         execute(impl, 'open');
         execute(impl, 'close');
@@ -292,11 +298,20 @@ describes.realWin(
 
       it('should close sidebar on button click', async () => {
         const sidebarElement = await getAmpSidebar({'stubHistory': true});
-        const impl = sidebarElement.implementation_;
-        clock = lolex.install({
-          target: impl.win,
+        const impl = await sidebarElement.getImpl(false);
+        env.sandbox.stub(sidebarElement, 'setAsContainerInternal');
+        env.sandbox.stub(sidebarElement, 'removeAsContainerInternal');
+        clock = fakeTimers.withGlobal(impl.win).install({
           toFake: ['Date', 'setTimeout'],
         });
+
+        // Sidebar has a child.
+        const child = createElementWithAttributes(doc, 'amp-img', {
+          layout: 'nodisplay',
+        });
+        sidebarElement.appendChild(child);
+        env.sandbox.stub(child, 'unmount');
+
         owners.schedulePause = env.sandbox.spy();
         const historyPushSpy = env.sandbox.spy();
         const historyPopSpy = env.sandbox.spy();
@@ -333,6 +348,9 @@ describes.realWin(
         execute(impl, 'close');
         expect(owners.schedulePause).to.be.calledOnce;
         expect(historyPopSpy).to.be.calledOnce;
+
+        expect(sidebarElement.removeAsContainerInternal).to.be.calledOnce;
+        expect(child.unmount).to.be.calledOnce;
       });
 
       it('should toggle sidebar on button click', async () => {
@@ -340,9 +358,8 @@ describes.realWin(
         const screenReaderCloseButton = sidebarElement.querySelector(
           'button.i-amphtml-screen-reader'
         );
-        const impl = sidebarElement.implementation_;
-        clock = lolex.install({
-          target: impl.win,
+        const impl = await sidebarElement.getImpl(false);
+        clock = fakeTimers.withGlobal(impl.win).install({
           toFake: ['Date', 'setTimeout'],
         });
         owners.scheduleLayout = env.sandbox.spy();
@@ -373,323 +390,302 @@ describes.realWin(
         expect(owners.schedulePause).to.be.calledOnce;
       });
 
-      it('should close sidebar on escape', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          clock = lolex.install({
-            target: impl.win,
-            toFake: ['Date', 'setTimeout'],
-          });
-          owners.schedulePause = env.sandbox.spy();
-
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          execute(impl, 'open');
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          const eventObj = doc.createEventObject
-            ? doc.createEventObject()
-            : doc.createEvent('Events');
-          if (eventObj.initEvent) {
-            eventObj.initEvent('keydown', true, true);
-          }
-          eventObj.key = Keys.ESCAPE;
-          eventObj.which = KEYBOARD_EVENT_WHICH_ESCAPE;
-          const el = doc.documentElement;
-          el.dispatchEvent
-            ? el.dispatchEvent(eventObj)
-            : el.fireEvent('onkeydown', eventObj);
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          clock.tick(600);
-          expect(sidebarElement).to.have.display('none');
-          expect(owners.schedulePause).to.be.calledOnce;
+      it('should close sidebar on escape', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const impl = await sidebarElement.getImpl(false);
+        clock = fakeTimers.withGlobal(impl.win).install({
+          toFake: ['Date', 'setTimeout'],
         });
+        owners.schedulePause = env.sandbox.spy();
+
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        execute(impl, 'open');
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        const eventObj = doc.createEventObject
+          ? doc.createEventObject()
+          : doc.createEvent('Events');
+        if (eventObj.initEvent) {
+          eventObj.initEvent('keydown', true, true);
+        }
+        eventObj.key = Keys.ESCAPE;
+        eventObj.which = KEYBOARD_EVENT_WHICH_ESCAPE;
+        const el = doc.documentElement;
+        el.dispatchEvent
+          ? el.dispatchEvent(eventObj)
+          : el.fireEvent('onkeydown', eventObj);
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        clock.tick(600);
+        expect(sidebarElement).to.have.display('none');
+        expect(owners.schedulePause).to.be.calledOnce;
       });
 
-      it('should reflect state of the sidebar', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          clock = lolex.install({
-            target: impl.win,
-            toFake: ['Date', 'setTimeout'],
-          });
-          owners.schedulePause = env.sandbox.spy();
-          owners.scheduleResume = env.sandbox.spy();
+      it('should reflect state of the sidebar', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const impl = await sidebarElement.getImpl(false);
+        clock = fakeTimers.withGlobal(impl.win).install({
+          toFake: ['Date', 'setTimeout'],
+        });
+        owners.schedulePause = env.sandbox.spy();
+        owners.scheduleResume = env.sandbox.spy();
 
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          clock.tick(600);
-          expect(owners.schedulePause).to.have.not.been.called;
-          expect(owners.scheduleResume).to.have.not.been.called;
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        clock.tick(600);
+        expect(owners.schedulePause).to.have.not.been.called;
+        expect(owners.scheduleResume).to.have.not.been.called;
 
-          execute(impl, 'toggle');
+        execute(impl, 'toggle');
 
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          clock.tick(600);
-          expect(owners.schedulePause).to.have.not.been.called;
-          expect(owners.scheduleResume).to.be.calledOnce;
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        clock.tick(600);
+        expect(owners.schedulePause).to.have.not.been.called;
+        expect(owners.scheduleResume).to.be.calledOnce;
 
-          execute(impl, 'toggle');
+        execute(impl, 'toggle');
 
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          clock.tick(600);
-          expect(owners.schedulePause).to.be.calledOnce;
-          expect(owners.scheduleResume).to.be.calledOnce;
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        clock.tick(600);
+        expect(owners.schedulePause).to.be.calledOnce;
+        expect(owners.scheduleResume).to.be.calledOnce;
 
-          execute(impl, 'toggle');
+        execute(impl, 'toggle');
 
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          clock.tick(600);
-          expect(owners.schedulePause).to.be.calledOnce;
-          expect(owners.scheduleResume).to.have.callCount(2);
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        clock.tick(600);
+        expect(owners.schedulePause).to.be.calledOnce;
+        expect(owners.scheduleResume).to.have.callCount(2);
 
-          execute(impl, 'toggle');
+        execute(impl, 'toggle');
 
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          clock.tick(600);
-          expect(owners.schedulePause).to.have.callCount(2);
-          expect(owners.scheduleResume).to.have.callCount(2);
-        });
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        clock.tick(600);
+        expect(owners.schedulePause).to.have.callCount(2);
+        expect(owners.scheduleResume).to.have.callCount(2);
       });
 
-      it.skip('should fix scroll leaks on ios safari', () => {
+      it.skip('should fix scroll leaks on ios safari', async () => {
         env.sandbox.stub(platform, 'isIos').returns(true);
         env.sandbox.stub(platform, 'isSafari').returns(true);
-        return getAmpSidebar().then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
-            callback();
-          });
-          const scrollLeakSpy = env.sandbox.spy(
-            impl,
-            'fixIosElasticScrollLeak_'
-          );
-          impl.buildCallback();
-          expect(scrollLeakSpy).to.be.calledOnce;
+        const sidebarElement = await getAmpSidebar();
+        const impl = await sidebarElement.getImpl(false);
+        env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
+          callback();
         });
+        const scrollLeakSpy = env.sandbox.spy(impl, 'fixIosElasticScrollLeak_');
+        impl.buildCallback();
+        expect(scrollLeakSpy).to.be.calledOnce;
       });
 
-      it.skip('should adjust for IOS safari bottom bar', () => {
+      it.skip('should adjust for IOS safari bottom bar', async () => {
         env.sandbox.stub(platform, 'isIos').returns(true);
         env.sandbox.stub(platform, 'isSafari').returns(true);
-        return getAmpSidebar().then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
-            callback();
-          });
-          const compensateIosBottombarSpy = env.sandbox.spy(
-            impl,
-            'compensateIosBottombar_'
-          );
-          const initalChildrenCount = sidebarElement.children.length;
-          execute(impl, 'open');
-          expect(compensateIosBottombarSpy).to.be.calledOnce;
-          // 10 lis + one top padding element inserted
-          expect(sidebarElement.children.length).to.equal(
-            initalChildrenCount + 1
-          );
+        const sidebarElement = await getAmpSidebar();
+        const impl = await sidebarElement.getImpl(false);
+        env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
+          callback();
         });
+        const compensateIosBottombarSpy = env.sandbox.spy(
+          impl,
+          'compensateIosBottombar_'
+        );
+        const initalChildrenCount = sidebarElement.children.length;
+        execute(impl, 'open');
+        expect(compensateIosBottombarSpy).to.be.calledOnce;
+        // 10 lis + one top padding element inserted
+        expect(sidebarElement.children.length).to.equal(
+          initalChildrenCount + 1
+        );
       });
 
-      it('should close sidebar if clicked on a non-local anchor', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const anchor = sidebarElement.getElementsByTagName('a')[0];
-          anchor.href = '#newloc';
-          const impl = sidebarElement.implementation_;
-          clock = lolex.install({
-            target: impl.win,
-            toFake: ['Date', 'setTimeout'],
-          });
-          owners.schedulePause = env.sandbox.spy();
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          execute(impl, 'open');
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          const eventObj = doc.createEventObject
-            ? doc.createEventObject()
-            : doc.createEvent('Events');
-          if (eventObj.initEvent) {
-            eventObj.initEvent('click', true, true);
-          }
-          const ampDoc = sidebarElement.getAmpDoc();
-          env.sandbox.stub(ampDoc, 'getUrl').returns(window.location.href);
-          anchor.dispatchEvent
-            ? anchor.dispatchEvent(eventObj)
-            : anchor.fireEvent('onkeydown', eventObj);
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          clock.tick(600);
-          expect(sidebarElement).to.have.display('none');
-          expect(owners.schedulePause).to.be.calledOnce;
+      it('should close sidebar if clicked on a non-local anchor', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const anchor = sidebarElement.getElementsByTagName('a')[0];
+        anchor.href = '#newloc';
+        const impl = await sidebarElement.getImpl(false);
+        clock = fakeTimers.withGlobal(impl.win).install({
+          toFake: ['Date', 'setTimeout'],
         });
+        owners.schedulePause = env.sandbox.spy();
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        execute(impl, 'open');
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        const eventObj = doc.createEventObject
+          ? doc.createEventObject()
+          : doc.createEvent('Events');
+        if (eventObj.initEvent) {
+          eventObj.initEvent('click', true, true);
+        }
+        const ampDoc = sidebarElement.getAmpDoc();
+        env.sandbox.stub(ampDoc, 'getUrl').returns(window.location.href);
+        anchor.dispatchEvent
+          ? anchor.dispatchEvent(eventObj)
+          : anchor.fireEvent('onkeydown', eventObj);
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        clock.tick(600);
+        expect(sidebarElement).to.have.display('none');
+        expect(owners.schedulePause).to.be.calledOnce;
       });
 
-      it('should not close sidebar if clicked on a new origin navigation', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const anchor = sidebarElement.getElementsByTagName('a')[0];
-          anchor.href = '#newloc';
-          const impl = sidebarElement.implementation_;
-          owners.schedulePause = env.sandbox.spy();
-          env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
-            callback();
-          });
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          execute(impl, 'open');
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          const eventObj = doc.createEventObject
-            ? doc.createEventObject()
-            : doc.createEvent('Events');
-          if (eventObj.initEvent) {
-            eventObj.initEvent('click', true, true);
-          }
-          const ampDoc = sidebarElement.getAmpDoc();
-          // Mocking navigating from example.com -> localhost:9876
-          env.sandbox.stub(ampDoc, 'getUrl').returns('http://example.com');
-          anchor.dispatchEvent
-            ? anchor.dispatchEvent(eventObj)
-            : anchor.fireEvent('onkeydown', eventObj);
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          expect(sidebarElement).to.not.have.display('');
-          expect(owners.schedulePause).to.have.not.been.called;
+      it('should not close sidebar if clicked on a new origin navigation', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const anchor = sidebarElement.getElementsByTagName('a')[0];
+        anchor.href = '#newloc';
+        const impl = await sidebarElement.getImpl(false);
+        owners.schedulePause = env.sandbox.spy();
+        env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
+          callback();
         });
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        execute(impl, 'open');
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        const eventObj = doc.createEventObject
+          ? doc.createEventObject()
+          : doc.createEvent('Events');
+        if (eventObj.initEvent) {
+          eventObj.initEvent('click', true, true);
+        }
+        const ampDoc = sidebarElement.getAmpDoc();
+        // Mocking navigating from example.com -> localhost:9876
+        env.sandbox.stub(ampDoc, 'getUrl').returns('http://example.com');
+        anchor.dispatchEvent
+          ? anchor.dispatchEvent(eventObj)
+          : anchor.fireEvent('onkeydown', eventObj);
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        expect(sidebarElement).to.not.have.display('');
+        expect(owners.schedulePause).to.have.not.been.called;
       });
 
-      it('should not close sidebar if clicked on new page navigation', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const anchor = sidebarElement.getElementsByTagName('a')[0];
-          anchor.href = '#newloc';
-          const impl = sidebarElement.implementation_;
-          owners.schedulePause = env.sandbox.spy();
+      it('should not close sidebar if clicked on new page navigation', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const anchor = sidebarElement.getElementsByTagName('a')[0];
+        anchor.href = '#newloc';
+        const impl = await sidebarElement.getImpl(false);
+        owners.schedulePause = env.sandbox.spy();
 
-          env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
-            callback();
-          });
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          execute(impl, 'open');
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          const eventObj = doc.createEventObject
-            ? doc.createEventObject()
-            : doc.createEvent('Events');
-          if (eventObj.initEvent) {
-            eventObj.initEvent('click', true, true);
-          }
-          const ampDoc = sidebarElement.getAmpDoc();
-          // Mocking navigating from /context.html?old=context -> /context.html
-          env.sandbox
-            .stub(ampDoc, 'getUrl')
-            .returns('http://localhost:9876/context.html?old=context');
-
-          anchor.dispatchEvent
-            ? anchor.dispatchEvent(eventObj)
-            : anchor.fireEvent('onkeydown', eventObj);
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          expect(sidebarElement).to.not.have.display('');
-          expect(owners.schedulePause).to.have.not.been.called;
+        env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
+          callback();
         });
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        execute(impl, 'open');
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        const eventObj = doc.createEventObject
+          ? doc.createEventObject()
+          : doc.createEvent('Events');
+        if (eventObj.initEvent) {
+          eventObj.initEvent('click', true, true);
+        }
+        const ampDoc = sidebarElement.getAmpDoc();
+        // Mocking navigating from /context.html?old=context -> /context.html
+        env.sandbox
+          .stub(ampDoc, 'getUrl')
+          .returns('http://localhost:9876/context.html?old=context');
+
+        anchor.dispatchEvent
+          ? anchor.dispatchEvent(eventObj)
+          : anchor.fireEvent('onkeydown', eventObj);
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        expect(sidebarElement).to.not.have.display('');
+        expect(owners.schedulePause).to.have.not.been.called;
       });
 
-      it('should not close sidebar if clicked on non-anchor', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const li = sidebarElement.getElementsByTagName('li')[0];
-          const impl = sidebarElement.implementation_;
-          owners.schedulePause = env.sandbox.spy();
+      it('should not close sidebar if clicked on non-anchor', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const li = sidebarElement.getElementsByTagName('li')[0];
+        const impl = await sidebarElement.getImpl(false);
+        owners.schedulePause = env.sandbox.spy();
 
-          env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
-            callback();
-          });
-          expect(sidebarElement.hasAttribute('open')).to.be.false;
-          execute(impl, 'open');
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          const eventObj = doc.createEventObject
-            ? doc.createEventObject()
-            : doc.createEvent('Events');
-          if (eventObj.initEvent) {
-            eventObj.initEvent('click', true, true);
-          }
-          li.dispatchEvent
-            ? li.dispatchEvent(eventObj)
-            : li.fireEvent('onkeydown', eventObj);
-          expect(sidebarElement.hasAttribute('open')).to.be.true;
-          expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
-          expect(sidebarElement).to.not.have.display('');
-          expect(owners.schedulePause).to.have.not.been.called;
+        env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
+          callback();
         });
+        expect(sidebarElement.hasAttribute('open')).to.be.false;
+        execute(impl, 'open');
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        const eventObj = doc.createEventObject
+          ? doc.createEventObject()
+          : doc.createEvent('Events');
+        if (eventObj.initEvent) {
+          eventObj.initEvent('click', true, true);
+        }
+        li.dispatchEvent
+          ? li.dispatchEvent(eventObj)
+          : li.fireEvent('onkeydown', eventObj);
+        expect(sidebarElement.hasAttribute('open')).to.be.true;
+        expect(sidebarElement.hasAttribute('aria-hidden')).to.be.false;
+        expect(sidebarElement).to.not.have.display('');
+        expect(owners.schedulePause).to.have.not.been.called;
       });
 
-      it('should trigger actions on open and close', () => {
-        return getAmpSidebar({stubHistory: true}).then((sidebarElement) => {
-          const impl = sidebarElement.implementation_;
-          const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
-          env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
-            callback();
-          });
-          owners.scheduleLayout = env.sandbox.stub();
-
-          execute(impl, 'open', /* trust */ 123);
-          expect(triggerSpy).to.be.calledOnce;
-          expect(triggerSpy).to.be.calledWith(
-            impl.element,
-            'sidebarOpen',
-            env.sandbox.match.any,
-            /* trust */ 123
-          );
-
-          execute(impl, 'close', /* trust */ 456);
-          expect(triggerSpy).to.be.calledTwice;
-          expect(triggerSpy).to.be.calledWith(
-            impl.element,
-            'sidebarClose',
-            env.sandbox.match.any,
-            /* trust */ 456
-          );
+      it('should trigger actions on open and close', async () => {
+        const sidebarElement = await getAmpSidebar({stubHistory: true});
+        const impl = await sidebarElement.getImpl(false);
+        const triggerSpy = env.sandbox.spy(impl.action_, 'trigger');
+        env.sandbox.stub(timer, 'delay').callsFake(function (callback) {
+          callback();
         });
+        owners.scheduleLayout = env.sandbox.stub();
+
+        execute(impl, 'open', /* trust */ 123);
+        expect(triggerSpy).to.be.calledOnce;
+        expect(triggerSpy).to.be.calledWith(
+          impl.element,
+          'sidebarOpen',
+          env.sandbox.match.any,
+          /* trust */ 123
+        );
+
+        execute(impl, 'close', /* trust */ 456);
+        expect(triggerSpy).to.be.calledTwice;
+        expect(triggerSpy).to.be.calledWith(
+          impl.element,
+          'sidebarClose',
+          env.sandbox.match.any,
+          /* trust */ 456
+        );
       });
     });
 
     describe('amp-sidebar - toolbars in amp-sidebar', () => {
       // Tests for amp-sidebar 0.2
-      it('should not create toolbars without <nav toolbar />', () => {
-        return getAmpSidebar().then((sidebarElement) => {
-          const headerElements = doc.getElementsByTagName('header');
-          const toolbarElements = doc.querySelectorAll('[toolbar]');
-          expect(headerElements.length).to.be.equal(0);
-          expect(toolbarElements.length).to.be.equal(0);
-          expect(sidebarElement.implementation_.toolbars_.length).to.be.equal(
-            0
-          );
-        });
+      it('should not create toolbars without <nav toolbar />', async () => {
+        const sidebarElement = await getAmpSidebar();
+        const impl = await sidebarElement.getImpl(false);
+        const headerElements = doc.getElementsByTagName('header');
+        const toolbarElements = doc.querySelectorAll('[toolbar]');
+        expect(headerElements.length).to.be.equal(0);
+        expect(toolbarElements.length).to.be.equal(0);
+        expect(impl.toolbars_.length).to.be.equal(0);
       });
 
-      it('should create a toolbar element within the toolbar-target', () => {
-        return getAmpSidebar({
+      it('should create a toolbar element within the toolbar-target', async () => {
+        const sidebarElement = await getAmpSidebar({
           toolbars: [{}],
-        }).then((sidebarElement) => {
-          expect(sidebarElement.implementation_.toolbars_.length).to.be.equal(
-            1
-          );
         });
+        const impl = await sidebarElement.getImpl(false);
+        expect(impl.toolbars_.length).to.be.equal(1);
       });
 
       it(
         'should create multiple toolbar elements, ' +
           'within their respective containers',
-        () => {
-          return getAmpSidebar({
+        async () => {
+          const sidebarElement = await getAmpSidebar({
             toolbars: [
               {},
               {
                 media: '(min-width: 1024px)',
               },
             ],
-          }).then((sidebarElement) => {
-            expect(sidebarElement.implementation_.toolbars_.length).to.be.equal(
-              2
-            );
           });
+          const impl = await sidebarElement.getImpl(false);
+          expect(impl.toolbars_.length).to.be.equal(2);
         }
       );
     });
diff --git a/extensions/amp-sidebar/0.2/test/test-toolbar.js b/extensions/amp-sidebar/0.2/test/test-toolbar.js
index 62f4005dc0fe0..892609b64a59a 100644
--- a/extensions/amp-sidebar/0.2/test/test-toolbar.js
+++ b/extensions/amp-sidebar/0.2/test/test-toolbar.js
@@ -18,7 +18,7 @@ import {AmpDocSingle} from '../../../../src/service/ampdoc-impl';
 import {Services} from '../../../../src/services';
 import {Toolbar} from '../toolbar';
 import {createIframePromise} from '../../../../testing/iframe';
-import {toArray} from '../../../../src/types';
+import {toArray} from '../../../../src/core/types/array';
 
 describes.realWin('amp-sidebar - toolbar', {}, (env) => {
   let timer;
diff --git a/extensions/amp-sidebar/0.2/toolbar.js b/extensions/amp-sidebar/0.2/toolbar.js
index 332c3fcb1299b..ed16c02521e56 100644
--- a/extensions/amp-sidebar/0.2/toolbar.js
+++ b/extensions/amp-sidebar/0.2/toolbar.js
@@ -60,8 +60,9 @@ export class Toolbar {
    */
   onLayoutChange() {
     // Get if we match the current toolbar media
-    const matchesMedia = this.ampdoc_.win.matchMedia(this.toolbarMedia_)
-      .matches;
+    const matchesMedia = this.ampdoc_.win.matchMedia(
+      this.toolbarMedia_
+    ).matches;
 
     // Remove and add the toolbar dynamically
     if (matchesMedia) {
diff --git a/extensions/amp-sidebar/1.0/amp-sidebar.css b/extensions/amp-sidebar/1.0/amp-sidebar.css
new file mode 100644
index 0000000000000..16000ab64c0df
--- /dev/null
+++ b/extensions/amp-sidebar/1.0/amp-sidebar.css
@@ -0,0 +1,75 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/* Pre-upgrade: not displayed */
+amp-sidebar[hidden] {
+  display: none !important;
+}
+
+amp-sidebar {
+  color: black;
+  background-color: #efefef;
+  height: 100vh;
+  top: 0;
+  max-height: 100vh !important;
+  /**
+   * Max width allowed to be configurable by user.  If user wants width to be
+   * controlled by content size and max-width, then this property needs to be
+   * configurable.
+   */
+  max-width: 80vw;
+  min-width: 45px !important;
+  outline: none;
+  z-index: 2147483647;
+}
+
+amp-sidebar::part(c),
+amp-sidebar::part(wrapper),
+amp-sidebar::part(sidebar) {
+  /* Inherit values specified on amp-sidebar */
+  color: inherit;
+  background-color: inherit;
+  height: inherit;
+  top: inherit;
+  max-height: inherit;
+  max-width: inherit;
+  min-width: inherit;
+  outline: inherit;
+  z-index: inherit;
+
+  /* Use unspecified default values from amp-sidebar element */
+  width: inherit;
+  padding: inherit;
+  border: inherit;
+}
+
+/**
+ * Hide the amp-sidebar and remove from the flow of the page so user applied
+ * styling is not shown directly on amp-sidebar element.
+ */
+amp-sidebar {
+  visibility: hidden !important;
+  position: fixed !important;
+}
+
+/**
+ * The host element, amp-sidebar, is not visible to allow direct styling to be
+ * inherited by its children.  Its children should be visible so the styling
+ * is displayed.
+ */
+amp-sidebar::part(c) {
+  visibility: visible !important;
+}
diff --git a/extensions/amp-sidebar/1.0/amp-sidebar.js b/extensions/amp-sidebar/1.0/amp-sidebar.js
new file mode 100644
index 0000000000000..de93dadad0251
--- /dev/null
+++ b/extensions/amp-sidebar/1.0/amp-sidebar.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {BaseElement} from './base-element';
+import {CSS} from '../../../build/amp-sidebar-1.0.css';
+import {isExperimentOn} from '../../../src/experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-sidebar';
+
+class AmpSidebar extends BaseElement {
+  /** @override */
+  init() {
+    this.registerApiAction('toggle', (api) => api./*OK*/ toggle());
+    this.registerApiAction('open', (api) => api./*OK*/ open());
+    this.registerApiAction('close', (api) => api./*OK*/ close());
+
+    return super.init();
+  }
+
+  /** @override */
+  attachedCallback() {
+    super.attachedCallback();
+    if (
+      this.element.parentNode != this.element.ownerDocument.body &&
+      this.element.parentNode != this.getAmpDoc().getBody()
+    ) {
+      this.user().warn(
+        TAG,
+        `${TAG} is recommended to be a direct child of the <body>` +
+          ` element to preserve a logical DOM order.`
+      );
+    }
+  }
+
+  /** @override */
+  isLayoutSupported(unusedLayout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-sidebar'),
+      'expected global "bento" or specific "bento-sidbar" experiment to be enabled'
+    );
+    return true;
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpSidebar, CSS);
+});
diff --git a/extensions/amp-sidebar/1.0/base-element.js b/extensions/amp-sidebar/1.0/base-element.js
new file mode 100644
index 0000000000000..e560130cb5c9b
--- /dev/null
+++ b/extensions/amp-sidebar/1.0/base-element.js
@@ -0,0 +1,95 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {CSS as COMPONENT_CSS} from './component.jss';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {Sidebar} from './component';
+import {dict} from '../../../src/core/types/object';
+import {pauseAll} from '../../../src/utils/resource-container-helper';
+import {toggle} from '../../../src/style';
+import {toggleAttribute} from '../../../src/dom';
+
+export class BaseElement extends PreactBaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {boolean} */
+    this.open_ = false;
+  }
+
+  /** @override */
+  init() {
+    return dict({
+      'onBeforeOpen': () => this.beforeOpen_(),
+      'onAfterOpen': () => this.afterOpen_(),
+      'onAfterClose': () => this.afterClose_(),
+    });
+  }
+
+  /** @override */
+  unmountCallback() {
+    this.removeAsContainer();
+  }
+
+  /** @private */
+  beforeOpen_() {
+    this.open_ = true;
+    toggleAttribute(this.element, 'open', true);
+    toggle(this.element, true);
+  }
+
+  /** @private */
+  afterOpen_() {
+    const sidebar = this.element.shadowRoot.querySelector('[part=sidebar]');
+    this.setAsContainer(sidebar);
+  }
+
+  /** @private */
+  afterClose_() {
+    this.open_ = false;
+    toggleAttribute(this.element, 'open', false);
+    toggle(this.element, false);
+
+    this.removeAsContainer();
+    pauseAll(this.element, /* includeSelf */ false);
+  }
+
+  /** @override */
+  mutationObserverCallback() {
+    const open = this.element.hasAttribute('open');
+    if (open === this.open_) {
+      return;
+    }
+    this.open_ = open;
+    open ? this.api().open() : this.api().close();
+  }
+}
+
+/** @override */
+BaseElement['Component'] = Sidebar;
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
+
+/** @override */
+BaseElement['shadowCss'] = COMPONENT_CSS;
+
+/** @override */
+BaseElement['props'] = {
+  'children': {passthrough: true},
+  'side': {attr: 'side', type: 'string'},
+};
diff --git a/extensions/amp-sidebar/1.0/component.js b/extensions/amp-sidebar/1.0/component.js
new file mode 100644
index 0000000000000..5790de6c36f3b
--- /dev/null
+++ b/extensions/amp-sidebar/1.0/component.js
@@ -0,0 +1,258 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {ContainWrapper, useValueRef} from '../../../src/preact/component';
+import {Keys} from '../../../src/core/constants/key-codes';
+import {Side} from './sidebar-config';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
+import {forwardRef} from '../../../src/preact/compat';
+import {isRTL} from '../../../src/dom';
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from '../../../src/preact';
+import {useSidebarAnimation} from './sidebar-animations-hook';
+import {useStyles} from './component.jss';
+import objstr from 'obj-str';
+
+/**
+ * @param {!SidebarDef.SidebarProps} props
+ * @param {{current: (!SidebarDef.SidebarApi|null)}} ref
+ * @return {PreactDef.Renderable}
+ */
+function SidebarWithRef(
+  {
+    as: Comp = 'div',
+    backdropClassName,
+    backdropStyle,
+    children,
+    onAfterClose,
+    onAfterOpen,
+    onBeforeOpen,
+    side: sideProp,
+    ...rest
+  },
+  ref
+) {
+  // There are two phases to open and close.
+  // To open, we mount and render the contents (invisible), then animate the display (visible).
+  // To close, it's the reverse.
+  // `mounted` mounts the component. `opened` plays the animation.
+  const [mounted, setMounted] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const [side, setSide] = useState(sideProp);
+
+  const classes = useStyles();
+  const sidebarRef = useRef();
+  const backdropRef = useRef();
+
+  // We are using refs here to refer to common strings, objects, and functions used.
+  // This is because they are needed within `useEffect` calls below (but are not depended for triggering)
+  // We use `useValueRef` for props that might change (user-controlled)
+  const onBeforeOpenRef = useValueRef(onBeforeOpen);
+
+  const open = useCallback(() => {
+    onBeforeOpenRef.current?.();
+    setMounted(true);
+    setOpened(true);
+  }, [onBeforeOpenRef]);
+  const close = useCallback(() => setOpened(false), []);
+  const toggle = useCallback(
+    () => (opened ? close() : open()),
+    [opened, open, close]
+  );
+
+  useImperativeHandle(
+    ref,
+    () =>
+      /** @type {!SidebarDef.SidebarApi} */ ({
+        open,
+        close,
+        toggle,
+      }),
+    [open, close, toggle]
+  );
+
+  useLayoutEffect(() => {
+    if (side) {
+      return;
+    }
+    const sidebarElement = sidebarRef.current;
+    if (!sidebarElement) {
+      return;
+    }
+    setSide(isRTL(sidebarElement.ownerDocument) ? Side.RIGHT : Side.LEFT);
+  }, [side, mounted]);
+
+  useSidebarAnimation(
+    mounted,
+    opened,
+    onAfterOpen,
+    onAfterClose,
+    side,
+    sidebarRef,
+    backdropRef,
+    setMounted
+  );
+
+  useEffect(() => {
+    const sidebarElement = sidebarRef.current;
+    const backdropElement = backdropRef.current;
+    if (!sidebarElement || !backdropElement) {
+      return;
+    }
+    const document = sidebarElement.ownerDocument;
+    if (!document) {
+      return;
+    }
+    const keydownCallback = (event) => {
+      if (event.key === Keys.ESCAPE) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+        close();
+      }
+    };
+    document.addEventListener('keydown', keydownCallback);
+    return () => {
+      document.removeEventListener('keydown', keydownCallback);
+    };
+  }, [opened, close]);
+
+  return (
+    <div className={objstr({[classes.unmounted]: !mounted})} part="wrapper">
+      <ContainWrapper
+        as={Comp}
+        ref={sidebarRef}
+        size={false}
+        layout={true}
+        paint={true}
+        part="sidebar"
+        wrapperClassName={objstr({
+          [classes.sidebar]: true,
+          [classes.defaultSidebarStyles]: true,
+          [classes.left]: side === Side.LEFT,
+          [classes.right]: side !== Side.LEFT,
+        })}
+        role="menu"
+        tabindex="-1"
+        hidden={!side}
+        {...rest}
+      >
+        {children}
+      </ContainWrapper>
+      <div
+        ref={backdropRef}
+        onClick={() => close()}
+        part="backdrop"
+        style={backdropStyle}
+        className={objstr({
+          [classes.backdrop]: true,
+          [classes.defaultBackdropStyles]: true,
+          [backdropClassName]: backdropClassName,
+        })}
+        hidden={!side}
+      >
+        <div className={classes.backdropOverscrollBlocker}></div>
+      </div>
+    </div>
+  );
+}
+
+const Sidebar = forwardRef(SidebarWithRef);
+Sidebar.displayName = 'Sidebar'; // Make findable for tests.
+export {Sidebar};
+
+/**
+ * @param {!SidebarDef.SidebarToolbarProps} props
+ * @return {PreactDef.Renderable}
+ */
+export function SidebarToolbar({
+  children,
+  toolbar: mediaQueryProp,
+  toolbarTarget: toolbarTargetProp,
+  ...rest
+}) {
+  const ref = useRef(null);
+  const [mediaQuery, setMediaQuery] = useState(null);
+  const [toolbarTarget, setToolbarTarget] = useState(null);
+  const [targetEl, setTargetEl] = useState(null);
+
+  useEffect(() => {
+    const doc = ref.current?.ownerDocument;
+    if (!doc) {
+      return;
+    }
+
+    const sanitizedToolbarTarget = escapeCssSelectorIdent(toolbarTargetProp);
+    setToolbarTarget(sanitizedToolbarTarget);
+    setTargetEl(doc.getElementById(sanitizedToolbarTarget));
+  }, [toolbarTargetProp]);
+
+  useEffect(() => {
+    const win = ref.current?.ownerDocument?.defaultView;
+    if (!win) {
+      return;
+    }
+
+    setMediaQuery(sanitizeMediaQuery(win, mediaQueryProp));
+  }, [mediaQueryProp]);
+
+  useEffect(() => {
+    const element = ref.current;
+    const doc = ref.current?.ownerDocument;
+    if (!doc || !targetEl || mediaQuery == null) {
+      return;
+    }
+
+    const clone = element.cloneNode(true);
+    const style = doc.createElement('style');
+    style./*OK*/ textContent =
+      `#${toolbarTarget}{display: none;}` +
+      `@media ${mediaQuery}{#${toolbarTarget}{display: initial;}}`;
+
+    targetEl.appendChild(clone);
+    targetEl.appendChild(style);
+    return () => {
+      targetEl.removeChild(clone);
+      targetEl.removeChild(style);
+    };
+  }, [mediaQuery, toolbarTarget, targetEl]);
+
+  return (
+    <nav
+      ref={ref}
+      toolbar={mediaQueryProp}
+      toolbar-target={toolbarTargetProp}
+      {...rest}
+    >
+      {children}
+    </nav>
+  );
+}
+
+/**
+ * @param {!Window} win
+ * @param {string|undefined} query
+ * @return {string}
+ */
+function sanitizeMediaQuery(win, query) {
+  return win.matchMedia(query).media;
+}
diff --git a/extensions/amp-sidebar/1.0/component.jss.js b/extensions/amp-sidebar/1.0/component.jss.js
new file mode 100644
index 0000000000000..a863ea69d7661
--- /dev/null
+++ b/extensions/amp-sidebar/1.0/component.jss.js
@@ -0,0 +1,90 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+const sidebar = {
+  position: 'fixed !important',
+  overflowX: 'hidden !important',
+  overflowY: 'auto !important',
+  boxSizing: 'border-box !important',
+  overscrollBehavior: 'none !important',
+};
+
+// User overridable styles
+const defaultSidebarStyles = {
+  color: '#000000',
+  backgroundColor: '#efefef',
+  height: '100vh',
+  top: 0,
+  maxHeight: '100vh',
+  maxWidth: '80vw',
+  minWidth: '45px',
+  outline: 'none',
+  zIndex: 2147483647,
+};
+
+const left = {
+  left: 0,
+};
+
+const right = {
+  right: 0,
+};
+
+const backdrop = {
+  position: 'fixed !important',
+  top: '0 !important',
+  left: '0 !important',
+  width: '120vw !important',
+  height: '100vh !important',
+  overflow: 'hidden scroll !important',
+  /* Prevent someone from making this a full-sceen image */
+  backgroundImage: 'none !important',
+  overscrollBehavior: 'none !important',
+};
+
+// User overridable styles
+const defaultBackdropStyles = {
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  zIndex: 2147483646,
+};
+
+//TODO(#32400): See PR description.  This is a workaround dependent on a
+// a browser bug fix and should be removed when the browser bug is fixed.
+const backdropOverscrollBlocker = {
+  height: '101vh !important',
+  width: '0 !important',
+};
+
+const unmounted = {
+  display: 'none',
+};
+
+const JSS = {
+  sidebar,
+  defaultSidebarStyles,
+  left,
+  right,
+  backdrop,
+  defaultBackdropStyles,
+  backdropOverscrollBlocker,
+  unmounted,
+};
+
+// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
+// eslint-disable-next-line local/no-export-side-effect
+export const useStyles = createUseStyles(JSS);
diff --git a/extensions/amp-sidebar/1.0/component.type.js b/extensions/amp-sidebar/1.0/component.type.js
new file mode 100644
index 0000000000000..e6ac472b45e64
--- /dev/null
+++ b/extensions/amp-sidebar/1.0/component.type.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/** @const */
+var SidebarDef = {};
+
+/**
+ * @typedef {{
+ *   as: (string|PreactDef.FunctionalComponent|undefined),
+ *   side: (string|undefined),
+ *   onBeforeOpen: (function():void|undefined),
+ *   onAfterOpen: (function():void|undefined),
+ *   onAfterClose: (function():void|undefined),
+ *   backdropStyle: (?Object|undefined),
+ *   backdropClassName: (string|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+SidebarDef.SidebarProps;
+
+/**
+ * @typedef {{
+ *   toolbar: (string|undefined),
+ *   toolbarTarget: (string|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+SidebarDef.SidebarToolbarProps;
+
+/** @interface */
+SidebarDef.SidebarApi = class {
+  /** Open the sidebar */
+  open() {}
+
+  /** Close the sidebar */
+  close() {}
+
+  /** Toggle the sidebar open or closed */
+  toggle() {}
+};
diff --git a/extensions/amp-sidebar/1.0/sidebar-animations-hook.js b/extensions/amp-sidebar/1.0/sidebar-animations-hook.js
new file mode 100644
index 0000000000000..780e16f23400f
--- /dev/null
+++ b/extensions/amp-sidebar/1.0/sidebar-animations-hook.js
@@ -0,0 +1,195 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {Side} from './sidebar-config';
+import {assertDoesNotContainDisplay, setStyles} from '../../../src/style';
+import {useLayoutEffect, useRef} from '../../../src/preact';
+import {useValueRef} from '../../../src/preact/component';
+
+const ANIMATION_DURATION = 350;
+const ANIMATION_EASE_IN = 'cubic-bezier(0,0,.21,1)';
+
+const ANIMATION_KEYFRAMES_FADE_IN = [{'opacity': '0'}, {'opacity': '1'}];
+const ANIMATION_KEYFRAMES_SLIDE_IN_LEFT = [
+  {'transform': 'translateX(-100%)'},
+  {'transform': 'translateX(0)'},
+];
+const ANIMATION_KEYFRAMES_SLIDE_IN_RIGHT = [
+  {'transform': 'translateX(100%)'},
+  {'transform': 'translateX(0)'},
+];
+
+const ANIMATION_STYLES_SIDEBAR_LEFT_INIT = {'transform': 'translateX(-100%)'};
+const ANIMATION_STYLES_SIDEBAR_RIGHT_INIT = {'transform': 'translateX(100%)'};
+const ANIMATION_STYLES_BACKDROP_INIT = {'opacity': '0'};
+const ANIMATION_STYLES_SIDEBAR_FINAL = {'transform': ''};
+const ANIMATION_STYLES_BACKDROP_FINAL = {'opacity': ''};
+
+/**
+ * @param {!Element} element
+ * @param {!Object<string, *>} styles
+ */
+function safelySetStyles(element, styles) {
+  setStyles(element, assertDoesNotContainDisplay(styles));
+}
+
+/**
+ * @param {boolean} mounted
+ * @param {boolean} opened
+ * @param {{current: function():void} | {current: void}} onAfterOpen
+ * @param {{current: function():void} | {current: void}} onAfterClose
+ * @param {string} side
+ * @param {{current: (Element|null)}} sidebarRef
+ * @param {{current: (Element|null)}} backdropRef
+ * @param {function():undefined} setMounted
+ */
+export function useSidebarAnimation(
+  mounted,
+  opened,
+  onAfterOpen,
+  onAfterClose,
+  side,
+  sidebarRef,
+  backdropRef,
+  setMounted
+) {
+  const onAfterOpenRef = useValueRef(onAfterOpen);
+  const onAfterCloseRef = useValueRef(onAfterClose);
+  const sidebarAnimationRef = useRef(null);
+  const backdropAnimationRef = useRef(null);
+  const currentlyAnimatingRef = useRef(false);
+  useLayoutEffect(() => {
+    const sidebarElement = sidebarRef.current;
+    const backdropElement = backdropRef.current;
+    // The component might start in a state where `side` is not known
+    // This effect must be restarted when the `side` becomes known
+    // Must also check mounted as of #33244.  This is because previously
+    // sidebarElement and backdropElement would not be rendered when
+    // mounted is false.  This is no longer the case.
+    if (!mounted || !sidebarElement || !backdropElement || !side) {
+      return;
+    }
+
+    const postVisibleAnim = () => {
+      safelySetStyles(sidebarElement, ANIMATION_STYLES_SIDEBAR_FINAL);
+      safelySetStyles(backdropElement, ANIMATION_STYLES_BACKDROP_FINAL);
+      sidebarAnimationRef.current = null;
+      backdropAnimationRef.current = null;
+      currentlyAnimatingRef.current = false;
+      onAfterOpenRef.current?.();
+    };
+    const postInvisibleAnim = () => {
+      onAfterCloseRef.current?.();
+      sidebarAnimationRef.current = null;
+      backdropAnimationRef.current = null;
+      currentlyAnimatingRef.current = false;
+      setMounted(false);
+    };
+
+    // reverse animation if currently animating
+    if (currentlyAnimatingRef.current) {
+      const sidebarAnimation = sidebarAnimationRef.current;
+      if (sidebarAnimation) {
+        sidebarAnimation.reverse();
+        sidebarAnimation.onfinish = opened
+          ? postVisibleAnim
+          : postInvisibleAnim;
+      }
+      const backdropAnimation = backdropAnimationRef.current;
+      if (backdropAnimation) {
+        backdropAnimation.reverse();
+      }
+      return;
+    }
+
+    // begin animation if fully opened or closed
+    if (opened) {
+      // make visible animation
+      if (!sidebarElement.animate || !backdropElement.animate) {
+        postVisibleAnim();
+        return;
+      }
+      safelySetStyles(
+        sidebarElement,
+        side === Side.LEFT
+          ? ANIMATION_STYLES_SIDEBAR_LEFT_INIT
+          : ANIMATION_STYLES_SIDEBAR_RIGHT_INIT
+      );
+      safelySetStyles(backdropElement, ANIMATION_STYLES_BACKDROP_INIT);
+      const sidebarAnimation = sidebarElement.animate(
+        side === Side.LEFT
+          ? ANIMATION_KEYFRAMES_SLIDE_IN_LEFT
+          : ANIMATION_KEYFRAMES_SLIDE_IN_RIGHT,
+        {
+          duration: ANIMATION_DURATION,
+          fill: 'both',
+          easing: ANIMATION_EASE_IN,
+        }
+      );
+      sidebarAnimation.onfinish = postVisibleAnim;
+      const backdropAnimation = backdropElement.animate(
+        ANIMATION_KEYFRAMES_FADE_IN,
+        {
+          duration: ANIMATION_DURATION,
+          fill: 'both',
+          easing: ANIMATION_EASE_IN,
+        }
+      );
+      sidebarAnimationRef.current = sidebarAnimation;
+      backdropAnimationRef.current = backdropAnimation;
+      currentlyAnimatingRef.current = true;
+    } else {
+      // make invisible animation
+      if (!sidebarElement.animate || !backdropElement.animate) {
+        postInvisibleAnim();
+        return;
+      }
+      const sidebarAnimation = sidebarElement.animate(
+        side === Side.LEFT
+          ? ANIMATION_KEYFRAMES_SLIDE_IN_LEFT
+          : ANIMATION_KEYFRAMES_SLIDE_IN_RIGHT,
+        {
+          duration: ANIMATION_DURATION,
+          direction: 'reverse',
+          fill: 'both',
+          easing: ANIMATION_EASE_IN,
+        }
+      );
+      sidebarAnimation.onfinish = postInvisibleAnim;
+      const backdropAnimation = backdropElement.animate(
+        ANIMATION_KEYFRAMES_FADE_IN,
+        {
+          duration: ANIMATION_DURATION,
+          direction: 'reverse',
+          fill: 'both',
+          easing: ANIMATION_EASE_IN,
+        }
+      );
+      sidebarAnimationRef.current = sidebarAnimation;
+      backdropAnimationRef.current = backdropAnimation;
+      currentlyAnimatingRef.current = true;
+    }
+  }, [
+    mounted,
+    opened,
+    onAfterOpenRef,
+    onAfterCloseRef,
+    side,
+    sidebarRef,
+    backdropRef,
+    setMounted,
+  ]);
+}
diff --git a/extensions/amp-sidebar/1.0/sidebar-config.js b/extensions/amp-sidebar/1.0/sidebar-config.js
new file mode 100644
index 0000000000000..cf68ac15d0806
--- /dev/null
+++ b/extensions/amp-sidebar/1.0/sidebar-config.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/** @protected @enum {string} */
+export const Side = {
+  LEFT: 'left',
+  RIGHT: 'right',
+};
diff --git a/extensions/amp-sidebar/1.0/storybook/Basic.amp.js b/extensions/amp-sidebar/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..64a6c6a8b1e6e
--- /dev/null
+++ b/extensions/amp-sidebar/1.0/storybook/Basic.amp.js
@@ -0,0 +1,450 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {
+  boolean,
+  color,
+  number,
+  select,
+  text,
+  withKnobs,
+} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-sidebar-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-sidebar', version: '1.0'}],
+    experiments: ['bento'],
+  },
+};
+
+export const _default = () => {
+  const sideConfigurations = ['left', 'right', undefined];
+  const side = select('side', sideConfigurations, sideConfigurations[0]);
+  const foregroundColor = color('color');
+  const backgroundColor = color('background');
+  const backdropColor = color('backdrop color');
+
+  return (
+    <main>
+      <style>
+        {`
+          amp-sidebar {
+              color: ${foregroundColor};
+              background-color: ${backgroundColor};
+          }
+          amp-sidebar::part(backdrop) {
+              background-color: ${backdropColor};
+          }
+          `}
+      </style>
+      <amp-sidebar layout="nodisplay" id="sidebar" side={side}>
+        <div style={{margin: 8}}>
+          <span>
+            Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at
+            aeque inermis reprehendunt.
+          </span>
+          <ul>
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+          </ul>
+          <button on="tap:sidebar.toggle()">toggle</button>
+          <button on="tap:sidebar.open()">open</button>
+          <button on="tap:sidebar.close()">close</button>
+        </div>
+      </amp-sidebar>
+      <div class="buttons" style={{margin: 8}}>
+        <button on="tap:sidebar.toggle()">toggle</button>
+        <button on="tap:sidebar.open()">open</button>
+        <button on="tap:sidebar.close()">close</button>
+      </div>
+    </main>
+  );
+};
+
+export const styles = () => {
+  const sideConfigurations = ['left', 'right', undefined];
+  const side = select('side', sideConfigurations, sideConfigurations[0]);
+  const foregroundColor = color('color');
+  const backgroundColor = color('background');
+  const height = text('height', null);
+  const width = text('width', null);
+  const padding = text('padding', null);
+  const border = text('border', null);
+  const top = text('top', null);
+  const maxHeight = text('max-height', null);
+  const maxWidth = text('max-width', null);
+  const minWidth = text('min-width', null);
+  const outline = text('outline', null);
+  const zIndex = number('z-index', 2147483647);
+  const backdropColor = color('backdrop color');
+
+  return (
+    <main>
+      <style>
+        {`
+          amp-sidebar {
+              color: ${foregroundColor};
+              background-color: ${backgroundColor};
+              height: ${height};
+              width: ${width};
+              padding: ${padding};
+              border: ${border};
+              top: ${top};
+              max-height: ${maxHeight} !important;
+              max-width: ${maxWidth};
+              min-width: ${minWidth} !important;
+              outline: ${outline};
+              z-index: ${zIndex};
+          }
+          amp-sidebar::part(backdrop) {
+              background-color: ${backdropColor};
+          }
+          `}
+      </style>
+      <amp-sidebar layout="nodisplay" id="sidebar" side={side}>
+        <div style={{margin: 8}}>
+          <span>
+            Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at
+            aeque inermis reprehendunt.
+          </span>
+          <ul>
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+          </ul>
+          <button on="tap:sidebar.toggle()">toggle</button>
+          <button on="tap:sidebar.open()">open</button>
+          <button on="tap:sidebar.close()">close</button>
+        </div>
+      </amp-sidebar>
+      <div class="buttons" style={{margin: 8}}>
+        <button on="tap:sidebar.toggle()">toggle</button>
+        <button on="tap:sidebar.open()">open</button>
+        <button on="tap:sidebar.close()">close</button>
+      </div>
+    </main>
+  );
+};
+
+export const scroll = () => {
+  const sideConfigurations = ['left', 'right', undefined];
+  const side = select('side', sideConfigurations, sideConfigurations[0]);
+  const foregroundColor = color('color');
+  const backgroundColor = color('background');
+  const backdropColor = color('backdrop color');
+  const moreBackgroundContent = boolean('more background content', false);
+  const moreSidebarContent = boolean('more sidebar content', false);
+
+  return (
+    <main>
+      <style>
+        {`
+          amp-sidebar {
+              color: ${foregroundColor};
+              background-color: ${backgroundColor};
+          }
+          amp-sidebar::part(backdrop) {
+              background-color: ${backdropColor};
+          }
+          `}
+      </style>
+      <amp-sidebar layout="nodisplay" id="sidebar" side={side}>
+        <div style={{margin: 8}}>
+          <span>
+            Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at
+            aeque inermis reprehendunt.
+          </span>
+          <ul>
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+          </ul>
+          <button on="tap:sidebar.toggle()">toggle</button>
+          <button on="tap:sidebar.open()">open</button>
+          <button on="tap:sidebar.close()">close</button>
+          {moreSidebarContent && (
+            <>
+              <p>
+                Dessert tootsie roll marzipan pastry. Powder powder jelly beans
+                chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing
+                cotton candy. Toffee carrot cake ice cream sesame snaps sugar
+                plum gummies. Gummies marshmallow candy chocolate bar ice cream
+                ice cream gummies chocolate cake. Candy ice cream pie danish ice
+                cream cake gingerbread. Muffin cookie marzipan marzipan jelly
+                beans gummies candy muffin dessert. Soufflé chocolate tart
+                tootsie roll tootsie roll gingerbread icing powder. Dessert
+                croissant macaroon candy liquorice. Gingerbread gummi bears
+                croissant wafer cookie cookie bonbon. Marshmallow fruitcake
+                lollipop sweet roll danish dragée cupcake. Tootsie roll cotton
+                candy dragée chocolate bar tootsie roll cheesecake cookie
+                muffin. Toffee sesame snaps gingerbread wafer cotton candy
+                bonbon gingerbread toffee.
+              </p>
+
+              <p>
+                Danish cupcake chocolate candy chocolate bar. Topping brownie
+                toffee oat cake liquorice marzipan cheesecake chupa chups.
+                Pastry carrot cake jelly beans chocolate cake liquorice sesame
+                snaps caramels. Apple pie marshmallow chupa chups lemon drops
+                pudding cotton candy pie apple pie oat cake. Sugar plum halvah
+                cotton candy tiramisu sweet dragée cookie pastry. Macaroon
+                bonbon jujubes. Halvah tiramisu brownie topping donut cookie
+                tart. Jelly lemon drops soufflé pie chocolate bar donut tootsie
+                roll bear claw cake. Chocolate cake powder dessert. Pudding
+                wafer danish chupa chups donut chocolate sweet carrot cake.
+                Sugar plum cheesecake brownie chocolate sweet tart marzipan oat
+                cake dessert. Gummi bears sugar plum bonbon chocolate cake.
+                Croissant marzipan brownie dessert donut cotton candy croissant
+                powder. Chocolate cake tootsie roll sweet roll gummi bears donut
+                fruitcake jelly beans carrot cake.
+              </p>
+
+              <p>
+                Brownie gummies danish lollipop caramels wafer gingerbread
+                macaroon carrot cake. Brownie powder donut gummi bears pudding
+                cupcake. Lemon drops croissant apple pie sesame snaps marzipan.
+                Biscuit chocolate cake jelly-o pie caramels gingerbread caramels
+                chupa chups donut. Sweet roll oat cake cake. Cheesecake candy
+                canes candy canes candy canes topping pastry sweet cheesecake.
+                Jelly-o gummies topping marshmallow dessert tiramisu cake bonbon
+                chupa chups. Chocolate biscuit danish tart bear claw. Tiramisu
+                carrot cake jelly-o pie sweet cake. Sesame snaps lollipop cookie
+                chocolate cake wafer dragée. Powder brownie danish. Pastry
+                chocolate cake sweet roll halvah cupcake dragée.
+              </p>
+
+              <p>
+                Cake carrot cake icing danish biscuit carrot cake marzipan
+                croissant. Cake cake gummi bears fruitcake sweet dessert toffee
+                chocolate cake. Ice cream carrot cake donut jelly beans. Jelly
+                wafer sugar plum sweet icing candy canes. Bonbon marshmallow
+                donut pudding jelly-o tiramisu pastry cake bonbon. Jelly candy
+                canes liquorice cupcake liquorice dessert halvah toffee. Jelly
+                chocolate macaroon topping cupcake tootsie roll liquorice
+                brownie lollipop. Chupa chups wafer cupcake candy cookie oat
+                cake cookie bear claw. Carrot cake pudding biscuit tiramisu ice
+                cream sugar plum. Topping lemon drops dragée cake liquorice
+                apple pie ice cream. Cotton candy lollipop lemon drops apple pie
+                tootsie roll pie marshmallow chocolate jelly-o. Pastry bonbon
+                cupcake dragée candy.
+              </p>
+
+              <p>
+                Ice cream dragée pudding pastry biscuit tart cookie. Oat cake
+                ice cream apple pie oat cake dessert soufflé caramels apple pie.
+                Gummies bear claw powder cake icing jelly beans jelly beans
+                marzipan lollipop. Lollipop brownie jelly beans pudding. Ice
+                cream jelly biscuit pie tiramisu tootsie roll gummies biscuit.
+                Cupcake biscuit biscuit chocolate bar liquorice caramels powder
+                cotton candy muffin. Sesame snaps tiramisu croissant. Soufflé
+                chocolate jelly-o topping. Lemon drops candy canes sweet carrot
+                cake chocolate cake tootsie roll wafer marshmallow. Jelly beans
+                bear claw jelly-o sesame snaps carrot cake. Pudding jelly candy
+                carrot cake fruitcake carrot cake candy canes sesame snaps.
+                Marzipan icing caramels chocolate tart powder cookie halvah.
+                Fruitcake dragée muffin tart. Jelly-o cupcake marshmallow
+                pudding gummies muffin topping caramels.
+              </p>
+
+              <p>
+                Liquorice bear claw marshmallow dessert. Bear claw toffee pastry
+                tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake
+                cake sweet roll cupcake ice cream jelly. Fruitcake jelly beans
+                macaroon soufflé jelly beans marzipan caramels candy. Cheesecake
+                candy canes pudding icing icing. Dragée chocolate bar bear claw
+                dragée donut brownie cake sweet roll. Wafer bear claw dragée
+                icing sesame snaps topping. Cake marzipan bear claw dessert bear
+                claw lollipop halvah wafer halvah. Icing sweet roll toffee sweet
+                powder sesame snaps gummies tart danish. Ice cream toffee
+                caramels danish. Jelly-o lollipop lollipop dessert sesame snaps
+                bear claw gummi bears. Donut sweet roll marzipan fruitcake oat
+                cake cake icing cotton candy oat cake. Gingerbread carrot cake
+                sesame snaps gummies candy dragée lollipop soufflé biscuit.
+                Pudding jujubes chocolate halvah sesame snaps tiramisu sweet
+                marshmallow chocolate bar.
+              </p>
+
+              <p>
+                Donut carrot cake apple pie powder marshmallow sesame snaps
+                tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat
+                cake. Marshmallow wafer danish wafer gingerbread cake muffin
+                candy dragée. Candy cotton candy topping cake cotton candy
+                carrot cake fruitcake brownie. Toffee candy candy canes jelly-o
+                cotton candy gummies. Bonbon bonbon pie sugar plum. Oat cake
+                sesame snaps pudding candy canes gummi bears macaroon jelly
+                beans brownie. Sesame snaps halvah halvah jelly-o dessert.
+                Jelly-o chocolate sweet roll donut candy. Cotton candy halvah
+                macaroon tiramisu tart. Jelly toffee candy pie toffee.
+              </p>
+
+              <p>
+                Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll
+                sweet roll brownie pastry tootsie roll. Topping cheesecake pie
+                jelly. Donut wafer wafer cake candy canes. Topping chocolate bar
+                cheesecake topping ice cream tiramisu toffee ice cream. Bonbon
+                halvah marshmallow. Marzipan topping chupa chups dessert
+                chocolate chocolate cake gummi bears. Gummi bears caramels sugar
+                plum. Pie donut jelly beans tiramisu soufflé pie powder. Cupcake
+                cookie topping. Tootsie roll candy canes jujubes croissant
+                liquorice ice cream brownie. Topping cookie apple pie gummi
+                bears bear claw jelly-o brownie tart. Marzipan cotton candy
+                gummi bears. Dragée ice cream gummi bears jelly-o carrot cake
+                chocolate bar tiramisu jelly cotton candy.
+              </p>
+            </>
+          )}
+        </div>
+      </amp-sidebar>
+      <div class="buttons" style={{margin: 8}}>
+        <button on="tap:sidebar.toggle()">toggle</button>
+        <button on="tap:sidebar.open()">open</button>
+        <button on="tap:sidebar.close()">close</button>
+      </div>
+      {moreBackgroundContent && (
+        <div style={{margin: 8}}>
+          <p>
+            Dessert tootsie roll marzipan pastry. Powder powder jelly beans
+            chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing
+            cotton candy. Toffee carrot cake ice cream sesame snaps sugar plum
+            gummies. Gummies marshmallow candy chocolate bar ice cream ice cream
+            gummies chocolate cake. Candy ice cream pie danish ice cream cake
+            gingerbread. Muffin cookie marzipan marzipan jelly beans gummies
+            candy muffin dessert. Soufflé chocolate tart tootsie roll tootsie
+            roll gingerbread icing powder. Dessert croissant macaroon candy
+            liquorice. Gingerbread gummi bears croissant wafer cookie cookie
+            bonbon. Marshmallow fruitcake lollipop sweet roll danish dragée
+            cupcake. Tootsie roll cotton candy dragée chocolate bar tootsie roll
+            cheesecake cookie muffin. Toffee sesame snaps gingerbread wafer
+            cotton candy bonbon gingerbread toffee.
+          </p>
+
+          <p>
+            Danish cupcake chocolate candy chocolate bar. Topping brownie toffee
+            oat cake liquorice marzipan cheesecake chupa chups. Pastry carrot
+            cake jelly beans chocolate cake liquorice sesame snaps caramels.
+            Apple pie marshmallow chupa chups lemon drops pudding cotton candy
+            pie apple pie oat cake. Sugar plum halvah cotton candy tiramisu
+            sweet dragée cookie pastry. Macaroon bonbon jujubes. Halvah tiramisu
+            brownie topping donut cookie tart. Jelly lemon drops soufflé pie
+            chocolate bar donut tootsie roll bear claw cake. Chocolate cake
+            powder dessert. Pudding wafer danish chupa chups donut chocolate
+            sweet carrot cake. Sugar plum cheesecake brownie chocolate sweet
+            tart marzipan oat cake dessert. Gummi bears sugar plum bonbon
+            chocolate cake. Croissant marzipan brownie dessert donut cotton
+            candy croissant powder. Chocolate cake tootsie roll sweet roll gummi
+            bears donut fruitcake jelly beans carrot cake.
+          </p>
+
+          <p>
+            Brownie gummies danish lollipop caramels wafer gingerbread macaroon
+            carrot cake. Brownie powder donut gummi bears pudding cupcake. Lemon
+            drops croissant apple pie sesame snaps marzipan. Biscuit chocolate
+            cake jelly-o pie caramels gingerbread caramels chupa chups donut.
+            Sweet roll oat cake cake. Cheesecake candy canes candy canes candy
+            canes topping pastry sweet cheesecake. Jelly-o gummies topping
+            marshmallow dessert tiramisu cake bonbon chupa chups. Chocolate
+            biscuit danish tart bear claw. Tiramisu carrot cake jelly-o pie
+            sweet cake. Sesame snaps lollipop cookie chocolate cake wafer
+            dragée. Powder brownie danish. Pastry chocolate cake sweet roll
+            halvah cupcake dragée.
+          </p>
+
+          <p>
+            Cake carrot cake icing danish biscuit carrot cake marzipan
+            croissant. Cake cake gummi bears fruitcake sweet dessert toffee
+            chocolate cake. Ice cream carrot cake donut jelly beans. Jelly wafer
+            sugar plum sweet icing candy canes. Bonbon marshmallow donut pudding
+            jelly-o tiramisu pastry cake bonbon. Jelly candy canes liquorice
+            cupcake liquorice dessert halvah toffee. Jelly chocolate macaroon
+            topping cupcake tootsie roll liquorice brownie lollipop. Chupa chups
+            wafer cupcake candy cookie oat cake cookie bear claw. Carrot cake
+            pudding biscuit tiramisu ice cream sugar plum. Topping lemon drops
+            dragée cake liquorice apple pie ice cream. Cotton candy lollipop
+            lemon drops apple pie tootsie roll pie marshmallow chocolate
+            jelly-o. Pastry bonbon cupcake dragée candy.
+          </p>
+
+          <p>
+            Ice cream dragée pudding pastry biscuit tart cookie. Oat cake ice
+            cream apple pie oat cake dessert soufflé caramels apple pie. Gummies
+            bear claw powder cake icing jelly beans jelly beans marzipan
+            lollipop. Lollipop brownie jelly beans pudding. Ice cream jelly
+            biscuit pie tiramisu tootsie roll gummies biscuit. Cupcake biscuit
+            biscuit chocolate bar liquorice caramels powder cotton candy muffin.
+            Sesame snaps tiramisu croissant. Soufflé chocolate jelly-o topping.
+            Lemon drops candy canes sweet carrot cake chocolate cake tootsie
+            roll wafer marshmallow. Jelly beans bear claw jelly-o sesame snaps
+            carrot cake. Pudding jelly candy carrot cake fruitcake carrot cake
+            candy canes sesame snaps. Marzipan icing caramels chocolate tart
+            powder cookie halvah. Fruitcake dragée muffin tart. Jelly-o cupcake
+            marshmallow pudding gummies muffin topping caramels.
+          </p>
+
+          <p>
+            Liquorice bear claw marshmallow dessert. Bear claw toffee pastry
+            tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake cake
+            sweet roll cupcake ice cream jelly. Fruitcake jelly beans macaroon
+            soufflé jelly beans marzipan caramels candy. Cheesecake candy canes
+            pudding icing icing. Dragée chocolate bar bear claw dragée donut
+            brownie cake sweet roll. Wafer bear claw dragée icing sesame snaps
+            topping. Cake marzipan bear claw dessert bear claw lollipop halvah
+            wafer halvah. Icing sweet roll toffee sweet powder sesame snaps
+            gummies tart danish. Ice cream toffee caramels danish. Jelly-o
+            lollipop lollipop dessert sesame snaps bear claw gummi bears. Donut
+            sweet roll marzipan fruitcake oat cake cake icing cotton candy oat
+            cake. Gingerbread carrot cake sesame snaps gummies candy dragée
+            lollipop soufflé biscuit. Pudding jujubes chocolate halvah sesame
+            snaps tiramisu sweet marshmallow chocolate bar.
+          </p>
+
+          <p>
+            Donut carrot cake apple pie powder marshmallow sesame snaps
+            tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat cake.
+            Marshmallow wafer danish wafer gingerbread cake muffin candy dragée.
+            Candy cotton candy topping cake cotton candy carrot cake fruitcake
+            brownie. Toffee candy candy canes jelly-o cotton candy gummies.
+            Bonbon bonbon pie sugar plum. Oat cake sesame snaps pudding candy
+            canes gummi bears macaroon jelly beans brownie. Sesame snaps halvah
+            halvah jelly-o dessert. Jelly-o chocolate sweet roll donut candy.
+            Cotton candy halvah macaroon tiramisu tart. Jelly toffee candy pie
+            toffee.
+          </p>
+
+          <p>
+            Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll sweet
+            roll brownie pastry tootsie roll. Topping cheesecake pie jelly.
+            Donut wafer wafer cake candy canes. Topping chocolate bar cheesecake
+            topping ice cream tiramisu toffee ice cream. Bonbon halvah
+            marshmallow. Marzipan topping chupa chups dessert chocolate
+            chocolate cake gummi bears. Gummi bears caramels sugar plum. Pie
+            donut jelly beans tiramisu soufflé pie powder. Cupcake cookie
+            topping. Tootsie roll candy canes jujubes croissant liquorice ice
+            cream brownie. Topping cookie apple pie gummi bears bear claw
+            jelly-o brownie tart. Marzipan cotton candy gummi bears. Dragée ice
+            cream gummi bears jelly-o carrot cake chocolate bar tiramisu jelly
+            cotton candy.
+          </p>
+        </div>
+      )}
+    </main>
+  );
+};
diff --git a/extensions/amp-sidebar/1.0/storybook/Basic.js b/extensions/amp-sidebar/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..0e30ed4c8d3c5
--- /dev/null
+++ b/extensions/amp-sidebar/1.0/storybook/Basic.js
@@ -0,0 +1,390 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Sidebar, SidebarToolbar} from '../component';
+import {boolean, color, select, text, withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'Sidebar',
+  component: Sidebar,
+  decorators: [withKnobs],
+};
+
+/**
+ * @param {!Object} props
+ * @return {*}
+ */
+function SidebarWithActions(props) {
+  // TODO(#30447): replace imperative calls with "button" knobs when the
+  // Storybook 6.1 is released.
+  const ref = Preact.useRef();
+  return (
+    <>
+      <Sidebar ref={ref} {...props}>
+        <div style={{margin: 8}}>
+          <span>
+            Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at
+            aeque inermis reprehendunt.
+          </span>
+          <ul>
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+          </ul>
+          <button onClick={() => ref.current.toggle()}>toggle</button>
+          <button onClick={() => ref.current.open()}>open</button>
+          <button onClick={() => ref.current.close()}>close</button>
+          {props.children}
+        </div>
+      </Sidebar>
+      <div style={{marginTop: 8}}>
+        <button onClick={() => ref.current.toggle()}>toggle</button>
+        <button onClick={() => ref.current.open()}>open</button>
+        <button onClick={() => ref.current.close()}>close</button>
+        {props.moreBackgroundContent}
+      </div>
+    </>
+  );
+}
+
+export const _default = () => {
+  const sideConfigurations = ['left', 'right', undefined];
+  const side = select('side', sideConfigurations, sideConfigurations[0]);
+  const foregroundColor = color('color');
+  const backgroundColor = color('background');
+  const backdropColor = color('backdrop color');
+
+  return (
+    <main>
+      <SidebarWithActions
+        side={side}
+        style={{color: foregroundColor, backgroundColor}}
+        backdropStyle={{backgroundColor: backdropColor}}
+      />
+    </main>
+  );
+};
+
+export const toolbar = () => {
+  const sideConfigurations = ['left', 'right', undefined];
+  const side = select('side', sideConfigurations, sideConfigurations[0]);
+  const toolbarMedia = text('toolbar media', '(max-width: 500px)');
+  const foregroundColor = color('color');
+  const backgroundColor = color('background');
+  const backdropColor = color('backdrop color');
+
+  return (
+    <main>
+      <SidebarWithActions
+        side={side}
+        style={{color: foregroundColor, backgroundColor}}
+        backdropStyle={{backgroundColor: backdropColor}}
+      >
+        <SidebarToolbar toolbar={toolbarMedia} toolbarTarget="toolbar-target">
+          <ul>
+            <li>Toolbar Item 1</li>
+            <li>Toolbar Item 2</li>
+          </ul>
+        </SidebarToolbar>
+      </SidebarWithActions>
+      <div id="toolbar-target"></div>
+    </main>
+  );
+};
+
+export const scroll = () => {
+  const sideConfigurations = ['left', 'right', undefined];
+  const side = select('side', sideConfigurations, sideConfigurations[0]);
+  const foregroundColor = color('color');
+  const backgroundColor = color('background');
+  const backdropColor = color('backdrop color');
+  const moreBackgroundContent = boolean('more background content', false);
+  const moreSidebarContent = boolean('more sidebar content', false);
+
+  return (
+    <main>
+      <SidebarWithActions
+        side={side}
+        style={{color: foregroundColor, backgroundColor}}
+        backdropStyle={{backgroundColor: backdropColor}}
+        moreBackgroundContent={
+          moreBackgroundContent && (
+            <>
+              <p>
+                Dessert tootsie roll marzipan pastry. Powder powder jelly beans
+                chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing
+                cotton candy. Toffee carrot cake ice cream sesame snaps sugar
+                plum gummies. Gummies marshmallow candy chocolate bar ice cream
+                ice cream gummies chocolate cake. Candy ice cream pie danish ice
+                cream cake gingerbread. Muffin cookie marzipan marzipan jelly
+                beans gummies candy muffin dessert. Soufflé chocolate tart
+                tootsie roll tootsie roll gingerbread icing powder. Dessert
+                croissant macaroon candy liquorice. Gingerbread gummi bears
+                croissant wafer cookie cookie bonbon. Marshmallow fruitcake
+                lollipop sweet roll danish dragée cupcake. Tootsie roll cotton
+                candy dragée chocolate bar tootsie roll cheesecake cookie
+                muffin. Toffee sesame snaps gingerbread wafer cotton candy
+                bonbon gingerbread toffee.
+              </p>
+
+              <p>
+                Danish cupcake chocolate candy chocolate bar. Topping brownie
+                toffee oat cake liquorice marzipan cheesecake chupa chups.
+                Pastry carrot cake jelly beans chocolate cake liquorice sesame
+                snaps caramels. Apple pie marshmallow chupa chups lemon drops
+                pudding cotton candy pie apple pie oat cake. Sugar plum halvah
+                cotton candy tiramisu sweet dragée cookie pastry. Macaroon
+                bonbon jujubes. Halvah tiramisu brownie topping donut cookie
+                tart. Jelly lemon drops soufflé pie chocolate bar donut tootsie
+                roll bear claw cake. Chocolate cake powder dessert. Pudding
+                wafer danish chupa chups donut chocolate sweet carrot cake.
+                Sugar plum cheesecake brownie chocolate sweet tart marzipan oat
+                cake dessert. Gummi bears sugar plum bonbon chocolate cake.
+                Croissant marzipan brownie dessert donut cotton candy croissant
+                powder. Chocolate cake tootsie roll sweet roll gummi bears donut
+                fruitcake jelly beans carrot cake.
+              </p>
+
+              <p>
+                Brownie gummies danish lollipop caramels wafer gingerbread
+                macaroon carrot cake. Brownie powder donut gummi bears pudding
+                cupcake. Lemon drops croissant apple pie sesame snaps marzipan.
+                Biscuit chocolate cake jelly-o pie caramels gingerbread caramels
+                chupa chups donut. Sweet roll oat cake cake. Cheesecake candy
+                canes candy canes candy canes topping pastry sweet cheesecake.
+                Jelly-o gummies topping marshmallow dessert tiramisu cake bonbon
+                chupa chups. Chocolate biscuit danish tart bear claw. Tiramisu
+                carrot cake jelly-o pie sweet cake. Sesame snaps lollipop cookie
+                chocolate cake wafer dragée. Powder brownie danish. Pastry
+                chocolate cake sweet roll halvah cupcake dragée.
+              </p>
+
+              <p>
+                Cake carrot cake icing danish biscuit carrot cake marzipan
+                croissant. Cake cake gummi bears fruitcake sweet dessert toffee
+                chocolate cake. Ice cream carrot cake donut jelly beans. Jelly
+                wafer sugar plum sweet icing candy canes. Bonbon marshmallow
+                donut pudding jelly-o tiramisu pastry cake bonbon. Jelly candy
+                canes liquorice cupcake liquorice dessert halvah toffee. Jelly
+                chocolate macaroon topping cupcake tootsie roll liquorice
+                brownie lollipop. Chupa chups wafer cupcake candy cookie oat
+                cake cookie bear claw. Carrot cake pudding biscuit tiramisu ice
+                cream sugar plum. Topping lemon drops dragée cake liquorice
+                apple pie ice cream. Cotton candy lollipop lemon drops apple pie
+                tootsie roll pie marshmallow chocolate jelly-o. Pastry bonbon
+                cupcake dragée candy.
+              </p>
+
+              <p>
+                Ice cream dragée pudding pastry biscuit tart cookie. Oat cake
+                ice cream apple pie oat cake dessert soufflé caramels apple pie.
+                Gummies bear claw powder cake icing jelly beans jelly beans
+                marzipan lollipop. Lollipop brownie jelly beans pudding. Ice
+                cream jelly biscuit pie tiramisu tootsie roll gummies biscuit.
+                Cupcake biscuit biscuit chocolate bar liquorice caramels powder
+                cotton candy muffin. Sesame snaps tiramisu croissant. Soufflé
+                chocolate jelly-o topping. Lemon drops candy canes sweet carrot
+                cake chocolate cake tootsie roll wafer marshmallow. Jelly beans
+                bear claw jelly-o sesame snaps carrot cake. Pudding jelly candy
+                carrot cake fruitcake carrot cake candy canes sesame snaps.
+                Marzipan icing caramels chocolate tart powder cookie halvah.
+                Fruitcake dragée muffin tart. Jelly-o cupcake marshmallow
+                pudding gummies muffin topping caramels.
+              </p>
+
+              <p>
+                Liquorice bear claw marshmallow dessert. Bear claw toffee pastry
+                tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake
+                cake sweet roll cupcake ice cream jelly. Fruitcake jelly beans
+                macaroon soufflé jelly beans marzipan caramels candy. Cheesecake
+                candy canes pudding icing icing. Dragée chocolate bar bear claw
+                dragée donut brownie cake sweet roll. Wafer bear claw dragée
+                icing sesame snaps topping. Cake marzipan bear claw dessert bear
+                claw lollipop halvah wafer halvah. Icing sweet roll toffee sweet
+                powder sesame snaps gummies tart danish. Ice cream toffee
+                caramels danish. Jelly-o lollipop lollipop dessert sesame snaps
+                bear claw gummi bears. Donut sweet roll marzipan fruitcake oat
+                cake cake icing cotton candy oat cake. Gingerbread carrot cake
+                sesame snaps gummies candy dragée lollipop soufflé biscuit.
+                Pudding jujubes chocolate halvah sesame snaps tiramisu sweet
+                marshmallow chocolate bar.
+              </p>
+
+              <p>
+                Donut carrot cake apple pie powder marshmallow sesame snaps
+                tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat
+                cake. Marshmallow wafer danish wafer gingerbread cake muffin
+                candy dragée. Candy cotton candy topping cake cotton candy
+                carrot cake fruitcake brownie. Toffee candy candy canes jelly-o
+                cotton candy gummies. Bonbon bonbon pie sugar plum. Oat cake
+                sesame snaps pudding candy canes gummi bears macaroon jelly
+                beans brownie. Sesame snaps halvah halvah jelly-o dessert.
+                Jelly-o chocolate sweet roll donut candy. Cotton candy halvah
+                macaroon tiramisu tart. Jelly toffee candy pie toffee.
+              </p>
+
+              <p>
+                Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll
+                sweet roll brownie pastry tootsie roll. Topping cheesecake pie
+                jelly. Donut wafer wafer cake candy canes. Topping chocolate bar
+                cheesecake topping ice cream tiramisu toffee ice cream. Bonbon
+                halvah marshmallow. Marzipan topping chupa chups dessert
+                chocolate chocolate cake gummi bears. Gummi bears caramels sugar
+                plum. Pie donut jelly beans tiramisu soufflé pie powder. Cupcake
+                cookie topping. Tootsie roll candy canes jujubes croissant
+                liquorice ice cream brownie. Topping cookie apple pie gummi
+                bears bear claw jelly-o brownie tart. Marzipan cotton candy
+                gummi bears. Dragée ice cream gummi bears jelly-o carrot cake
+                chocolate bar tiramisu jelly cotton candy.
+              </p>
+            </>
+          )
+        }
+      >
+        {moreSidebarContent && (
+          <>
+            <p>
+              Dessert tootsie roll marzipan pastry. Powder powder jelly beans
+              chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing
+              cotton candy. Toffee carrot cake ice cream sesame snaps sugar plum
+              gummies. Gummies marshmallow candy chocolate bar ice cream ice
+              cream gummies chocolate cake. Candy ice cream pie danish ice cream
+              cake gingerbread. Muffin cookie marzipan marzipan jelly beans
+              gummies candy muffin dessert. Soufflé chocolate tart tootsie roll
+              tootsie roll gingerbread icing powder. Dessert croissant macaroon
+              candy liquorice. Gingerbread gummi bears croissant wafer cookie
+              cookie bonbon. Marshmallow fruitcake lollipop sweet roll danish
+              dragée cupcake. Tootsie roll cotton candy dragée chocolate bar
+              tootsie roll cheesecake cookie muffin. Toffee sesame snaps
+              gingerbread wafer cotton candy bonbon gingerbread toffee.
+            </p>
+
+            <p>
+              Danish cupcake chocolate candy chocolate bar. Topping brownie
+              toffee oat cake liquorice marzipan cheesecake chupa chups. Pastry
+              carrot cake jelly beans chocolate cake liquorice sesame snaps
+              caramels. Apple pie marshmallow chupa chups lemon drops pudding
+              cotton candy pie apple pie oat cake. Sugar plum halvah cotton
+              candy tiramisu sweet dragée cookie pastry. Macaroon bonbon
+              jujubes. Halvah tiramisu brownie topping donut cookie tart. Jelly
+              lemon drops soufflé pie chocolate bar donut tootsie roll bear claw
+              cake. Chocolate cake powder dessert. Pudding wafer danish chupa
+              chups donut chocolate sweet carrot cake. Sugar plum cheesecake
+              brownie chocolate sweet tart marzipan oat cake dessert. Gummi
+              bears sugar plum bonbon chocolate cake. Croissant marzipan brownie
+              dessert donut cotton candy croissant powder. Chocolate cake
+              tootsie roll sweet roll gummi bears donut fruitcake jelly beans
+              carrot cake.
+            </p>
+
+            <p>
+              Brownie gummies danish lollipop caramels wafer gingerbread
+              macaroon carrot cake. Brownie powder donut gummi bears pudding
+              cupcake. Lemon drops croissant apple pie sesame snaps marzipan.
+              Biscuit chocolate cake jelly-o pie caramels gingerbread caramels
+              chupa chups donut. Sweet roll oat cake cake. Cheesecake candy
+              canes candy canes candy canes topping pastry sweet cheesecake.
+              Jelly-o gummies topping marshmallow dessert tiramisu cake bonbon
+              chupa chups. Chocolate biscuit danish tart bear claw. Tiramisu
+              carrot cake jelly-o pie sweet cake. Sesame snaps lollipop cookie
+              chocolate cake wafer dragée. Powder brownie danish. Pastry
+              chocolate cake sweet roll halvah cupcake dragée.
+            </p>
+
+            <p>
+              Cake carrot cake icing danish biscuit carrot cake marzipan
+              croissant. Cake cake gummi bears fruitcake sweet dessert toffee
+              chocolate cake. Ice cream carrot cake donut jelly beans. Jelly
+              wafer sugar plum sweet icing candy canes. Bonbon marshmallow donut
+              pudding jelly-o tiramisu pastry cake bonbon. Jelly candy canes
+              liquorice cupcake liquorice dessert halvah toffee. Jelly chocolate
+              macaroon topping cupcake tootsie roll liquorice brownie lollipop.
+              Chupa chups wafer cupcake candy cookie oat cake cookie bear claw.
+              Carrot cake pudding biscuit tiramisu ice cream sugar plum. Topping
+              lemon drops dragée cake liquorice apple pie ice cream. Cotton
+              candy lollipop lemon drops apple pie tootsie roll pie marshmallow
+              chocolate jelly-o. Pastry bonbon cupcake dragée candy.
+            </p>
+
+            <p>
+              Ice cream dragée pudding pastry biscuit tart cookie. Oat cake ice
+              cream apple pie oat cake dessert soufflé caramels apple pie.
+              Gummies bear claw powder cake icing jelly beans jelly beans
+              marzipan lollipop. Lollipop brownie jelly beans pudding. Ice cream
+              jelly biscuit pie tiramisu tootsie roll gummies biscuit. Cupcake
+              biscuit biscuit chocolate bar liquorice caramels powder cotton
+              candy muffin. Sesame snaps tiramisu croissant. Soufflé chocolate
+              jelly-o topping. Lemon drops candy canes sweet carrot cake
+              chocolate cake tootsie roll wafer marshmallow. Jelly beans bear
+              claw jelly-o sesame snaps carrot cake. Pudding jelly candy carrot
+              cake fruitcake carrot cake candy canes sesame snaps. Marzipan
+              icing caramels chocolate tart powder cookie halvah. Fruitcake
+              dragée muffin tart. Jelly-o cupcake marshmallow pudding gummies
+              muffin topping caramels.
+            </p>
+
+            <p>
+              Liquorice bear claw marshmallow dessert. Bear claw toffee pastry
+              tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake cake
+              sweet roll cupcake ice cream jelly. Fruitcake jelly beans macaroon
+              soufflé jelly beans marzipan caramels candy. Cheesecake candy
+              canes pudding icing icing. Dragée chocolate bar bear claw dragée
+              donut brownie cake sweet roll. Wafer bear claw dragée icing sesame
+              snaps topping. Cake marzipan bear claw dessert bear claw lollipop
+              halvah wafer halvah. Icing sweet roll toffee sweet powder sesame
+              snaps gummies tart danish. Ice cream toffee caramels danish.
+              Jelly-o lollipop lollipop dessert sesame snaps bear claw gummi
+              bears. Donut sweet roll marzipan fruitcake oat cake cake icing
+              cotton candy oat cake. Gingerbread carrot cake sesame snaps
+              gummies candy dragée lollipop soufflé biscuit. Pudding jujubes
+              chocolate halvah sesame snaps tiramisu sweet marshmallow chocolate
+              bar.
+            </p>
+
+            <p>
+              Donut carrot cake apple pie powder marshmallow sesame snaps
+              tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat cake.
+              Marshmallow wafer danish wafer gingerbread cake muffin candy
+              dragée. Candy cotton candy topping cake cotton candy carrot cake
+              fruitcake brownie. Toffee candy candy canes jelly-o cotton candy
+              gummies. Bonbon bonbon pie sugar plum. Oat cake sesame snaps
+              pudding candy canes gummi bears macaroon jelly beans brownie.
+              Sesame snaps halvah halvah jelly-o dessert. Jelly-o chocolate
+              sweet roll donut candy. Cotton candy halvah macaroon tiramisu
+              tart. Jelly toffee candy pie toffee.
+            </p>
+
+            <p>
+              Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll
+              sweet roll brownie pastry tootsie roll. Topping cheesecake pie
+              jelly. Donut wafer wafer cake candy canes. Topping chocolate bar
+              cheesecake topping ice cream tiramisu toffee ice cream. Bonbon
+              halvah marshmallow. Marzipan topping chupa chups dessert chocolate
+              chocolate cake gummi bears. Gummi bears caramels sugar plum. Pie
+              donut jelly beans tiramisu soufflé pie powder. Cupcake cookie
+              topping. Tootsie roll candy canes jujubes croissant liquorice ice
+              cream brownie. Topping cookie apple pie gummi bears bear claw
+              jelly-o brownie tart. Marzipan cotton candy gummi bears. Dragée
+              ice cream gummi bears jelly-o carrot cake chocolate bar tiramisu
+              jelly cotton candy.
+            </p>
+          </>
+        )}
+      </SidebarWithActions>
+    </main>
+  );
+};
diff --git a/extensions/amp-sidebar/1.0/test-e2e/test-amp-sidebar.js b/extensions/amp-sidebar/1.0/test-e2e/test-amp-sidebar.js
new file mode 100644
index 0000000000000..66b551b93d62c
--- /dev/null
+++ b/extensions/amp-sidebar/1.0/test-e2e/test-amp-sidebar.js
@@ -0,0 +1,131 @@
+/**
+ * Copyright 2021 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.
+ */
+//
+import {Key} from '../../../../build-system/tasks/e2e/e2e-types';
+
+describes.endtoend(
+  'amp-sidebar',
+  {
+    version: '1.0',
+    fixture: 'amp-sidebar/amp-sidebar.html',
+    experiments: ['bento-sidebar'],
+    environments: ['single', 'viewer-demo'],
+  },
+  async (env) => {
+    let controller;
+
+    beforeEach(() => {
+      controller = env.controller;
+    });
+
+    it('should render correctly', async () => {
+      const sidebar = await controller.findElement('#sidebar');
+
+      await expect(controller.getElementProperty(sidebar, 'hidden')).to.be.true;
+      const image = await controller.findElement('#image');
+      await expect(
+        controller.getElementProperty(image, 'clientWidth')
+      ).to.equal(0);
+    });
+
+    it('should open the sidebar', async () => {
+      const open = await controller.findElement('#open');
+      await controller.click(open);
+
+      const sidebar = await controller.findElement('#sidebar');
+      await expect(controller.getElementProperty(sidebar, 'hidden')).to.be
+        .false;
+
+      // Wait for the button to become visible
+      await controller.switchToShadowRoot(sidebar);
+      const backdrop = await controller.findElement('[part=backdrop]');
+
+      // After open animation completed backdrop's
+      // inline opacity style is cleared
+      await expect(
+        controller.getElementProperty(backdrop, 'style')
+      ).to.have.length(0);
+
+      await expect(controller.getElementRect(sidebar)).to.include({
+        width: 300,
+        left: 0,
+      });
+
+      await controller.switchToLight();
+      const checkWidth = await controller.findElement('#checkWidth');
+      await expect(
+        controller.getElementProperty(checkWidth, 'clientWidth')
+      ).to.equal(300);
+    });
+
+    it('should close the sidebar on button click', async () => {
+      const open = await controller.findElement('#open');
+      await controller.click(open);
+
+      const sidebar = await controller.findElement('#sidebar');
+      await expect(controller.getElementProperty(sidebar, 'hidden')).to.be
+        .false;
+
+      // Wait for the button to become visible
+      await controller.switchToShadowRoot(sidebar);
+      const backdrop = await controller.findElement('[part=backdrop]');
+
+      // After open animation completed backdrop's
+      // inline opacity style is cleared
+      await expect(
+        controller.getElementProperty(backdrop, 'style')
+      ).to.have.length(0);
+
+      await expect(controller.getElementRect(sidebar)).to.include({
+        width: 300,
+        right: 300,
+      });
+
+      await controller.switchToLight();
+      const close = await controller.findElement('#close');
+      await controller.click(close);
+      await expect(controller.getElementProperty(sidebar, 'hidden')).to.be.true;
+    });
+
+    it('should close the sidebar on esc', async () => {
+      const open = await controller.findElement('#open');
+      await controller.click(open);
+
+      const sidebar = await controller.findElement('#sidebar');
+      await expect(controller.getElementProperty(sidebar, 'hidden')).to.be
+        .false;
+
+      await controller.type(null, Key.Escape);
+
+      await expect(controller.getElementProperty(sidebar, 'hidden')).to.be.true;
+    });
+
+    it('should close the sidebar on click outside', async () => {
+      const open = await controller.findElement('#open');
+      await controller.click(open);
+
+      const sidebar = await controller.findElement('#sidebar');
+      await expect(controller.getElementProperty(sidebar, 'hidden')).to.be
+        .false;
+
+      await controller.switchToShadowRoot(sidebar);
+      const backdrop = await controller.findElement('[part=backdrop]');
+      await controller.click(backdrop);
+
+      await expect(controller.getElementProperty(sidebar, 'hidden')).to.be.true;
+    });
+  }
+);
diff --git a/extensions/amp-sidebar/1.0/test/test-amp-sidebar.js b/extensions/amp-sidebar/1.0/test/test-amp-sidebar.js
new file mode 100644
index 0000000000000..06a90fdbec51f
--- /dev/null
+++ b/extensions/amp-sidebar/1.0/test/test-amp-sidebar.js
@@ -0,0 +1,764 @@
+/**
+ * Copyright 2020 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.
+ */
+import '../amp-sidebar';
+import {ActionInvocation} from '../../../../src/service/action-impl';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
+import {createElementWithAttributes} from '../../../../src/dom';
+import {htmlFor} from '../../../../src/static-template';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor, whenCalled} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-sidebar:1.0',
+  {
+    amp: {
+      extensions: ['amp-sidebar:1.0'],
+    },
+  },
+  (env) => {
+    async function waitForOpen(el, open) {
+      const isOpenOrNot = () => el.hasAttribute('open') === open;
+      await waitFor(isOpenOrNot, 'element open updated');
+    }
+
+    function isMounted(win, container) {
+      return win.getComputedStyle(container)['display'] !== 'none';
+    }
+
+    describe('basic actions', () => {
+      let win;
+      let html;
+      let fullHtml;
+      let element;
+      let container;
+      let openButton;
+      let closeButton;
+      let toggleButton;
+      let animateFunction;
+      let consoleWarnSpy;
+      let consoleWarn;
+
+      function invocation(method, args = {}) {
+        const source = null;
+        const caller = null;
+        const event = null;
+        const trust = ActionTrust.DEFAULT;
+        return new ActionInvocation(
+          element,
+          method,
+          args,
+          source,
+          caller,
+          event,
+          trust
+        );
+      }
+
+      beforeEach(async () => {
+        win = env.win;
+        html = htmlFor(win.document);
+        toggleExperiment(win, 'bento-sidebar', true, true);
+        // disable animations for synchronous testing
+        animateFunction = Element.prototype.animate;
+        Element.prototype.animate = null;
+        // disable warnings and check against spy when needed
+        consoleWarn = console.warn;
+        console.warn = () => true;
+        consoleWarnSpy = env.sandbox.spy(console, 'warn');
+
+        fullHtml = html`
+          <div>
+            <amp-sidebar id="sidebar" side="left">
+              <div>
+                <span>
+                  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim
+                  at aeque inermis reprehendunt.
+                </span>
+                <ul>
+                  <li>1</li>
+                  <li>2</li>
+                  <li>3</li>
+                </ul>
+              </div>
+            </amp-sidebar>
+            <div id="buttons">
+              <button id="toggle" on="tap:sidebar.toggle()">toggle</button>
+              <button id="open" on="tap:sidebar.open()">open</button>
+              <button id="close" on="tap:sidebar.close()">close</button>
+            </div>
+          </div>
+        `;
+        element = fullHtml.firstElementChild;
+        win.document.body.appendChild(fullHtml);
+        await element.buildInternal();
+
+        container = element.shadowRoot.firstElementChild.firstElementChild;
+        openButton = fullHtml.querySelector('#open');
+        closeButton = fullHtml.querySelector('#close');
+        toggleButton = fullHtml.querySelector('#toggle');
+      });
+
+      afterEach(() => {
+        Element.prototype.animate = animateFunction;
+        console.warn = consoleWarn;
+      });
+
+      it('open attribute is synced with component mounted', async () => {
+        // sidebar is initially closed
+        expect(element).to.not.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(false);
+
+        openButton.click();
+        await waitForOpen(element, true);
+
+        expect(element).to.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(true);
+
+        closeButton.click();
+        await waitForOpen(element, false);
+
+        expect(element).to.not.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(false);
+      });
+
+      it('should open and close when "open" attribute is set', async () => {
+        // sidebar is initially closed
+        expect(element).to.not.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(false);
+        env.sandbox.stub(element, 'setAsContainerInternal');
+        env.sandbox.stub(element, 'removeAsContainerInternal');
+
+        // Sidebar has a child.
+        const child = createElementWithAttributes(win.document, 'amp-img', {
+          layout: 'nodisplay',
+        });
+        element.appendChild(child);
+        env.sandbox.stub(child, 'pause');
+        env.sandbox.stub(child, 'unmount');
+
+        element.setAttribute('open', '');
+        await waitForOpen(element, true);
+
+        expect(element).to.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(true);
+
+        await whenCalled(element.setAsContainerInternal);
+        const sidebar = element.shadowRoot.querySelector('[part=sidebar]');
+        expect(sidebar).to.exist;
+        expect(element.setAsContainerInternal).to.be.calledOnce.calledWith(
+          sidebar
+        );
+        expect(element.removeAsContainerInternal).to.not.be.called;
+
+        element.removeAttribute('open');
+        await waitForOpen(element, false);
+
+        expect(element).to.not.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(false);
+
+        expect(element.removeAsContainerInternal).to.be.calledOnce;
+        expect(element.setAsContainerInternal).to.be.calledOnce; // no change.
+        expect(child.pause).to.be.calledOnce;
+        expect(child.unmount).to.not.be.called;
+      });
+
+      it('should close when the backdrop is clicked', async () => {
+        element.enqueAction(invocation('open'));
+        await waitForOpen(element, true);
+
+        expect(isMounted(win, container)).to.equal(true);
+        const backdrop = container.children[1];
+        backdrop.click();
+
+        await waitForOpen(element, false);
+
+        expect(element).to.not.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(false);
+      });
+
+      it('should close the sidebar when the esc key is pressed', async () => {
+        element.enqueAction(invocation('open'));
+        await waitForOpen(element, true);
+
+        // sidebar is opened, wait for eventListener to be attached
+        expect(isMounted(win, container)).to.equal(true);
+        const sidebar = container.children[0];
+        const doc = sidebar.ownerDocument;
+        const addListenerSpy = env.sandbox.spy(doc, 'addEventListener');
+
+        await waitFor(
+          () => addListenerSpy.callCount > 0,
+          'event listener attached'
+        );
+
+        // dispatch esc key event
+        const documentEl = sidebar.ownerDocument.documentElement;
+        documentEl.dispatchEvent(
+          new KeyboardEvent('keydown', {key: 'Escape', bubbles: true})
+        );
+
+        // verify sidebar is closed
+        await waitForOpen(element, false);
+        expect(element).to.not.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(false);
+      });
+
+      it('should render all children of the sidebar', async () => {
+        // closed sidebar should not render any content
+        expect(isMounted(win, container)).to.equal(false);
+
+        // open the sidebar
+        openButton.click();
+        await waitForOpen(element, true);
+        expect(element).to.have.attribute('open');
+
+        // confirm slot within the shadow root
+        expect(isMounted(win, container)).to.equal(true);
+        expect(container.children[0].firstElementChild).to.be.ok;
+        expect(container.children[0].firstElementChild.firstElementChild).to.be
+          .ok;
+        expect(
+          container.children[0].firstElementChild.firstElementChild.nodeName
+        ).to.equal('SLOT');
+
+        // confirm slotted contents (children of sidebar)
+        expect(element.children.length).to.equal(1);
+        const sidebarChildren = element.children[0];
+        expect(sidebarChildren.children.length).to.equal(2);
+        expect(sidebarChildren.firstElementChild.nodeName).to.equal('SPAN');
+        expect(sidebarChildren.lastElementChild.nodeName).to.equal('UL');
+        expect(sidebarChildren.firstElementChild.textContent.trim()).to.include(
+          'Lorem ipsum dolor sit amet'
+        );
+        expect(sidebarChildren.lastElementChild.children.length).to.equal(3);
+      });
+
+      it('should render with default colors', async () => {
+        // open the sidebar
+        openButton.click();
+        await waitForOpen(element, true);
+        expect(element).to.have.attribute('open');
+
+        const {
+          firstElementChild: sidebarElement,
+          lastElementChild: backdropElement,
+        } = container;
+
+        expect(win.getComputedStyle(sidebarElement).color).to.equal(
+          'rgb(0, 0, 0)'
+        );
+        expect(win.getComputedStyle(sidebarElement).backgroundColor).to.equal(
+          'rgb(239, 239, 239)'
+        );
+        expect(win.getComputedStyle(backdropElement).backgroundColor).to.equal(
+          'rgba(0, 0, 0, 0.5)'
+        );
+      });
+
+      it('should reflect user supplied CSS for various properties', async () => {
+        const style = html`
+          <style>
+            amp-sidebar {
+              color: rgb(1, 1, 1);
+              background-color: rgb(2, 2, 2);
+              height: 300px;
+              width: 301px;
+              padding: 15px;
+              border: solid 1px black;
+              top: 10px;
+              max-height: 500px !important;
+              max-width: 600px !important;
+              min-width: 200px !important;
+              outline: solid 1px red;
+              z-index: 15;
+            }
+            amp-sidebar::part(backdrop) {
+              background-color: rgb(3, 3, 3);
+            }
+          </style>
+        `;
+        fullHtml.appendChild(style);
+
+        // open the sidebar
+        openButton.click();
+        await waitForOpen(element, true);
+        expect(element).to.have.attribute('open');
+
+        const {
+          firstElementChild: sidebarElement,
+          lastElementChild: backdropElement,
+        } = container;
+
+        expect(win.getComputedStyle(sidebarElement).color).to.equal(
+          'rgb(1, 1, 1)'
+        );
+        expect(win.getComputedStyle(sidebarElement).backgroundColor).to.equal(
+          'rgb(2, 2, 2)'
+        );
+        expect(win.getComputedStyle(sidebarElement).height).to.equal('300px');
+        expect(win.getComputedStyle(sidebarElement).width).to.equal('301px');
+        expect(win.getComputedStyle(sidebarElement).padding).to.equal('15px');
+        expect(win.getComputedStyle(sidebarElement).border).to.equal(
+          '1px solid rgb(0, 0, 0)'
+        );
+        expect(win.getComputedStyle(sidebarElement).top).to.equal('10px');
+        expect(win.getComputedStyle(sidebarElement).maxHeight).to.equal(
+          '500px'
+        );
+        expect(win.getComputedStyle(sidebarElement).maxWidth).to.equal('600px');
+        expect(win.getComputedStyle(sidebarElement).minWidth).to.equal('200px');
+        expect(win.getComputedStyle(sidebarElement).outline).to.equal(
+          'rgb(255, 0, 0) solid 1px'
+        );
+        expect(win.getComputedStyle(sidebarElement).zIndex).to.equal('15');
+
+        expect(win.getComputedStyle(backdropElement).backgroundColor).to.equal(
+          'rgb(3, 3, 3)'
+        );
+      });
+
+      it('should not update some CSS properties w/o !important', async () => {
+        const style = html`
+          <style>
+            amp-sidebar {
+              max-height: 500px;
+              max-width: 600px;
+              min-width: 200px;
+            }
+          </style>
+        `;
+        fullHtml.appendChild(style);
+
+        // open the sidebar
+        openButton.click();
+        await waitForOpen(element, true);
+        expect(element).to.have.attribute('open');
+
+        const {firstElementChild: sidebarElement} = container;
+
+        // maxHeight defaults to 100vh, so should be the same height as viewport
+        expect(win.getComputedStyle(sidebarElement).maxHeight).to.equal(
+          `${win.innerHeight}px`
+        );
+
+        // maxWidth is not set as !important so is overridable
+        expect(win.getComputedStyle(sidebarElement).maxWidth).to.equal(`600px`);
+
+        // 45px is default, user supplied 200px does not overwrite w/o !important
+        expect(win.getComputedStyle(sidebarElement).minWidth).to.equal('45px');
+      });
+
+      it('should display a warning when sidebar is not child of body', async () => {
+        // sidebar is wrapped in a div so not direct child of body
+        // warning should be calledOnce
+        expect(consoleWarnSpy).to.be.calledOnce;
+
+        const noWarnSidebar = html`
+          <amp-sidebar id="sidebar" side="left">
+            <div>
+              <span>
+                Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at
+                aeque inermis reprehendunt.
+              </span>
+              <ul>
+                <li>1</li>
+                <li>2</li>
+                <li>3</li>
+              </ul>
+            </div>
+          </amp-sidebar>
+        `;
+        win.document.body.appendChild(noWarnSidebar);
+        await noWarnSidebar.buildInternal();
+
+        // the 'noWarnSidebar' above is appended directly to the body and
+        // should not throw a warning
+        // the stub should still only have been called once
+        expect(consoleWarnSpy).to.be.calledOnce;
+      });
+
+      it('should default "left" or "right" based on document.dir when side not provided', async () => {
+        const documentDir = win.document.dir;
+
+        /**
+         * document.dir is not 'rtl' and side is not provided to the element
+         * so we should default to 'left'
+         */
+        win.document.dir = 'blah';
+        fullHtml = html`
+          <div>
+            <amp-sidebar id="sidebar2">
+              <div>Hello World!</div>
+            </amp-sidebar>
+            <div id="buttons">
+              <button id="open" on="tap:sidebar2.open()">open</button>
+            </div>
+          </div>
+        `;
+        element = fullHtml.firstElementChild;
+        win.document.body.appendChild(fullHtml);
+        await element.buildInternal();
+        container = element.shadowRoot.firstElementChild.firstElementChild;
+        openButton = fullHtml.querySelector('#open');
+
+        // open the sidebar
+        openButton.click();
+        await waitForOpen(element, true);
+        expect(element).to.have.attribute('open');
+        let sidebarElement = container.firstElementChild;
+
+        // defaults to left if document is not 'ltr'
+        expect(sidebarElement.className.includes('left')).to.be.true;
+
+        /**
+         * document.dir is 'rtl' and side is not provided to the element
+         * so we should default to 'right'
+         */
+        win.document.dir = 'rtl';
+        fullHtml = html`
+          <div>
+            <amp-sidebar id="sidebar3">
+              <div>Hello World!</div>
+            </amp-sidebar>
+            <div id="buttons">
+              <button id="open" on="tap:sidebar3.open()">open</button>
+            </div>
+          </div>
+        `;
+        element = fullHtml.firstElementChild;
+        win.document.body.appendChild(fullHtml);
+        await element.buildInternal();
+        container = element.shadowRoot.firstElementChild.firstElementChild;
+        openButton = fullHtml.querySelector('#open');
+
+        // open the sidebar
+        openButton.click();
+        await waitForOpen(element, true);
+        expect(element).to.have.attribute('open');
+        sidebarElement = container.firstElementChild;
+
+        // defaults to right if document is 'rtl'
+        expect(sidebarElement.className.includes('right')).to.be.true;
+
+        win.document.dir = documentDir;
+      });
+
+      it('should have `overscroll-behavior: none` to prevent background scrolling', async () => {
+        // open the sidebar
+        openButton.click();
+        await waitForOpen(element, true);
+        expect(element).to.have.attribute('open');
+
+        const {
+          firstElementChild: sidebarElement,
+          lastElementChild: backdropElement,
+        } = container;
+
+        expect(
+          win.getComputedStyle(sidebarElement).overscrollBehavior
+        ).to.equal('none');
+        expect(
+          win.getComputedStyle(backdropElement).overscrollBehavior
+        ).to.equal('none');
+      });
+
+      describe('programatic access to imperative API', () => {
+        it('open', async () => {
+          // sidebar is initially closed
+          expect(element).to.not.have.attribute('open');
+          element.enqueAction(invocation('open'));
+          await waitForOpen(element, true);
+
+          // sidebar is opened
+          expect(element).to.have.attribute('open');
+        });
+
+        it('close', async () => {
+          // sidebar is initially closed
+          expect(element).to.not.have.attribute('open');
+
+          // open the sidebar
+          element.enqueAction(invocation('open'));
+          await waitForOpen(element, true);
+
+          // sidebar is opened
+          expect(element).to.have.attribute('open');
+
+          // test the close action
+          element.enqueAction(invocation('close'));
+
+          // sidebar is closed
+          await waitForOpen(element, false);
+          expect(element).to.not.have.attribute('open');
+        });
+
+        it('toggle', async () => {
+          // sidebar is initially closed
+          expect(element).to.not.have.attribute('open');
+
+          // toggle action
+          element.enqueAction(invocation('toggle'));
+          await waitForOpen(element, true);
+
+          // sidebar is opened
+          expect(element).to.have.attribute('open');
+
+          // toggle action
+          element.enqueAction(invocation('toggle'));
+          await waitForOpen(element, false);
+
+          // sidebar is closed
+          expect(element).to.not.have.attribute('open');
+        });
+      });
+
+      describe('click button to access imperative API', () => {
+        it('open', async () => {
+          // sidebar is initially closed
+          expect(element).to.not.have.attribute('open');
+          openButton.click();
+          await waitForOpen(element, true);
+
+          // sidebar is opened
+          expect(element).to.have.attribute('open');
+        });
+
+        it('close', async () => {
+          // sidebar is initially closed
+          expect(element).to.not.have.attribute('open');
+
+          // open the sidebar
+          openButton.click();
+          await waitForOpen(element, true);
+
+          // sidebar is opened
+          expect(element).to.have.attribute('open');
+
+          // test the close button
+          closeButton.click();
+
+          // sidebar is closed
+          await waitForOpen(element, false);
+          expect(element).to.not.have.attribute('open');
+        });
+
+        it('toggle', async () => {
+          // sidebar is initially closed
+          expect(element).to.not.have.attribute('open');
+
+          // toggle action
+          toggleButton.click();
+          await waitForOpen(element, true);
+
+          // sidebar is opened
+          expect(element).to.have.attribute('open');
+
+          // toggle action
+          toggleButton.click();
+          await waitForOpen(element, false);
+
+          // sidebar is closed
+          expect(element).to.not.have.attribute('open');
+        });
+      });
+    });
+
+    describe('animations', () => {
+      let win;
+      let html;
+      let fullHtml;
+      let element;
+      let container;
+      let openButton;
+      let closeButton;
+      let animateStub;
+      let consoleWarn;
+
+      beforeEach(async () => {
+        win = env.win;
+        html = htmlFor(win.document);
+        toggleExperiment(win, 'bento-sidebar', true, true);
+
+        // disable warnings since sidebar is child of a div container
+        // (and not body)
+        consoleWarn = console.warn;
+        console.warn = () => true;
+
+        fullHtml = html`
+          <div>
+            <amp-sidebar id="sidebar" side="left">
+              <div>
+                <span>
+                  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim
+                  at aeque inermis reprehendunt.
+                </span>
+                <ul>
+                  <li>1</li>
+                  <li>2</li>
+                  <li>3</li>
+                </ul>
+              </div>
+            </amp-sidebar>
+            <div id="buttons">
+              <button id="toggle" on="tap:sidebar.toggle()">toggle</button>
+              <button id="open" on="tap:sidebar.open()">open</button>
+              <button id="close" on="tap:sidebar.close()">close</button>
+            </div>
+          </div>
+        `;
+        element = fullHtml.firstElementChild;
+        win.document.body.appendChild(fullHtml);
+        await element.buildInternal();
+
+        container = element.shadowRoot.firstElementChild.firstElementChild;
+        openButton = fullHtml.querySelector('#open');
+        closeButton = fullHtml.querySelector('#close');
+      });
+
+      afterEach(() => {
+        console.warn = consoleWarn;
+      });
+
+      it('should not animate on build', () => {
+        animateStub = env.sandbox.stub(Element.prototype, 'animate');
+        expect(animateStub).to.not.be.called;
+      });
+
+      it('should animate expand', async () => {
+        const animation = {};
+        animateStub = env.sandbox.stub(Element.prototype, 'animate');
+        animateStub.returns(animation);
+
+        // sidebar is initially closed
+        expect(element).to.not.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(false);
+
+        openButton.click();
+        await waitForOpen(element, true);
+
+        // once for backdrop, once for sidebar
+        expect(animateStub).to.be.calledTwice;
+        animation.onfinish();
+
+        expect(element).to.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(true);
+      });
+
+      it('should animate collapse', async () => {
+        const animateFunction = Element.prototype.animate;
+        Element.prototype.animate = null;
+
+        // sidebar is initially closed
+        expect(element).to.not.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(false);
+
+        // synchronous open
+        openButton.click();
+        await waitForOpen(element, true);
+
+        // turn on animations
+        Element.prototype.animate = animateFunction;
+        const animation = {};
+        animateStub = env.sandbox.stub(Element.prototype, 'animate');
+        animateStub.returns(animation);
+
+        closeButton.click();
+        await waitFor(() => animateStub.callCount > 0, 'animation started');
+
+        // once for backdrop, once for sidebar
+        expect(animateStub).to.be.calledTwice;
+
+        // still displayed while animating
+        expect(element).to.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(true);
+
+        animation.onfinish();
+        await waitForOpen(element, false);
+        expect(element).to.not.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(false);
+      });
+
+      it('should reverse animations if closed while opening', async () => {
+        const animation = {
+          reverse: env.sandbox.spy(),
+        };
+        animateStub = env.sandbox.stub(Element.prototype, 'animate');
+        animateStub.returns(animation);
+
+        // sidebar is initially closed
+        expect(element).to.not.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(false);
+
+        // begin open animation
+        openButton.click();
+        await waitForOpen(element, true);
+
+        // animate stub called once for backdrop, once for sidebar
+        expect(animateStub).to.be.calledTwice;
+
+        // close the sidebar and reverse the animation (mid animation)
+        closeButton.click();
+
+        // animation begins to reverse
+        await waitFor(
+          () => animation.reverse.callCount > 0,
+          'reverse animation has begun'
+        );
+        expect(animation.reverse).to.be.calledTwice;
+      });
+
+      it('should reverse animations if opened while closing', async () => {
+        const animateFunction = Element.prototype.animate;
+        Element.prototype.animate = null;
+
+        // sidebar is initially closed
+        expect(element).to.not.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(false);
+
+        // synchronous open
+        openButton.click();
+        await waitForOpen(element, true);
+
+        // turn on animations
+        Element.prototype.animate = animateFunction;
+        const animation = {reverse: env.sandbox.spy()};
+        animateStub = env.sandbox.stub(Element.prototype, 'animate');
+        animateStub.returns(animation);
+
+        // sidebar is initially opened
+        expect(element).to.have.attribute('open');
+        expect(isMounted(win, container)).to.equal(true);
+
+        // begin close animation
+        closeButton.click();
+        await waitFor(() => animateStub.callCount > 0, 'animation has begun');
+
+        // animate stub called once for backdrop, once for sidebar
+        expect(animateStub).to.be.calledTwice;
+
+        // open the sidebar and reverse the animation (mid animation)
+        openButton.click();
+
+        // animation begins to reverse
+        await waitFor(
+          () => animation.reverse.callCount > 0,
+          'reverse animation has begun'
+        );
+        expect(animation.reverse).to.be.calledTwice;
+      });
+    });
+  }
+);
diff --git a/extensions/amp-sidebar/1.0/test/test-component.js b/extensions/amp-sidebar/1.0/test/test-component.js
new file mode 100644
index 0000000000000..959f9163775ee
--- /dev/null
+++ b/extensions/amp-sidebar/1.0/test/test-component.js
@@ -0,0 +1,808 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Sidebar, SidebarToolbar} from '../component';
+import {htmlFor} from '../../../../src/static-template';
+import {mount} from 'enzyme';
+
+describes.sandboxed('Sidebar preact component', {}, (env) => {
+  const isOpened = (sidebarElement) => {
+    return !sidebarElement.className.includes('unmounted');
+  };
+
+  describe('basic actions', () => {
+    let wrapper;
+    let ref;
+    let sidebar;
+    let animateFunction;
+    let openButton;
+    let closeButton;
+    let toggleButton;
+
+    beforeEach(() => {
+      animateFunction = Element.prototype.animate;
+      Element.prototype.animate = null;
+      ref = Preact.createRef();
+      wrapper = mount(
+        <>
+          <Sidebar ref={ref} side="left">
+            <div>Content</div>
+          </Sidebar>
+          <button id="toggle" onClick={() => ref.current.toggle()}></button>
+          <button id="open" onClick={() => ref.current.open()}></button>
+          <button id="close" onClick={() => ref.current.close()}></button>
+        </>
+      );
+
+      sidebar = wrapper.find(Sidebar);
+      openButton = wrapper.find('#open');
+      closeButton = wrapper.find('#close');
+      toggleButton = wrapper.find('#toggle');
+    });
+
+    afterEach(() => {
+      Element.prototype.animate = animateFunction;
+      wrapper.unmount();
+    });
+
+    it('close the sidebar when the backdrop is clicked', () => {
+      openButton.getDOMNode().click();
+      wrapper.update();
+
+      // verify sidebar is opened
+      let sidebarElement = wrapper.find(Sidebar).getDOMNode();
+      expect(isOpened(sidebarElement)).to.be.true;
+
+      // click on the backdrop
+      const backdropElement = wrapper.find(Sidebar).getDOMNode().nextSibling;
+      backdropElement.click();
+      wrapper.update();
+
+      // verify sidebar closes
+      sidebarElement = wrapper.find(Sidebar).getDOMNode();
+      expect(isOpened(sidebarElement)).to.be.false;
+    });
+
+    it('should close the sidebar when the esc key is pressed', () => {
+      openButton.getDOMNode().click();
+      wrapper.update();
+
+      // verify sidebar is opened
+      let sidebarElement = wrapper.find(Sidebar).getDOMNode();
+      expect(isOpened(sidebarElement)).to.be.true;
+
+      // forces flush of effect queue (attaches esc key event listener)
+      wrapper.mount();
+
+      // simulate an 'esc' key press from the documentElement
+      sidebarElement.ownerDocument.documentElement.dispatchEvent(
+        new KeyboardEvent('keydown', {key: 'Escape', bubbles: true})
+      );
+
+      // force rerender
+      wrapper.update();
+
+      // Sidebar closes
+      sidebarElement = wrapper.find(Sidebar).getDOMNode();
+      expect(isOpened(sidebarElement)).to.be.false;
+    });
+
+    it('should include the content in the sidebar', () => {
+      openButton.getDOMNode().click();
+      wrapper.update();
+
+      const contentElement = wrapper.find(Sidebar).getDOMNode()
+        .firstElementChild.firstElementChild;
+      expect(contentElement.textContent).to.equal('Content');
+    });
+
+    it('should render with default colors', () => {
+      openButton.getDOMNode().click();
+      wrapper.update();
+
+      const sidebarElement = wrapper
+        .find(Sidebar)
+        .getDOMNode().firstElementChild;
+      const backdropElement = sidebarElement.nextSibling;
+
+      expect(sidebarElement.className.includes('default')).to.be.true;
+      expect(backdropElement.className.includes('default')).to.be.true;
+      expect(sidebarElement.style.color).to.equal('');
+      expect(sidebarElement.style.backgroundColor).to.equal('');
+      expect(backdropElement.style.backgroundColor).to.equal('');
+    });
+
+    it('should allow custom CSS', () => {
+      wrapper = mount(
+        <>
+          <Sidebar
+            ref={ref}
+            side="left"
+            style={{
+              color: 'rgb(1, 1, 1)',
+              backgroundColor: 'rgb(2, 2, 2)',
+              height: '300px',
+              top: '15px',
+              maxHeight: '400px',
+              maxWidth: '500px',
+              minWidth: '200px',
+              outline: '1px solid red',
+              zIndex: 30,
+            }}
+            backdropStyle={{backgroundColor: 'rgb(3, 3, 3)'}}
+          >
+            <div>Content</div>
+          </Sidebar>
+          <button id="toggle" onClick={() => ref.current.toggle()}></button>
+          <button id="open" onClick={() => ref.current.open()}></button>
+          <button id="close" onClick={() => ref.current.close()}></button>
+        </>
+      );
+      openButton = wrapper.find('#open');
+      openButton.getDOMNode().click();
+      wrapper.update();
+
+      const sidebarElement = wrapper
+        .find(Sidebar)
+        .getDOMNode().firstElementChild;
+      const backdropElement = sidebarElement.nextSibling;
+
+      expect(sidebarElement.style.color).to.equal('rgb(1, 1, 1)');
+      expect(sidebarElement.style.backgroundColor).to.equal('rgb(2, 2, 2)');
+      expect(sidebarElement.style.height).to.equal('300px');
+      expect(sidebarElement.style.top).to.equal('15px');
+      expect(sidebarElement.style.maxHeight).to.equal('400px');
+      expect(sidebarElement.style.maxWidth).to.equal('500px');
+      expect(sidebarElement.style.minWidth).to.equal('200px');
+      expect(sidebarElement.style.outline).to.equal('red solid 1px');
+      expect(sidebarElement.style.zIndex).to.equal('30');
+      expect(backdropElement.style.backgroundColor).to.equal('rgb(3, 3, 3)');
+    });
+
+    it('should allow for the sidebar on the right side', () => {
+      ref = Preact.createRef();
+      wrapper = mount(
+        <>
+          <Sidebar ref={ref} side="right">
+            <div>Content</div>
+          </Sidebar>
+          <button id="toggle" onClick={() => ref.current.toggle()}></button>
+          <button id="open" onClick={() => ref.current.open()}></button>
+          <button id="close" onClick={() => ref.current.close()}></button>
+        </>
+      );
+
+      sidebar = wrapper.find(Sidebar);
+      openButton = wrapper.find('#open');
+      closeButton = wrapper.find('#close');
+      toggleButton = wrapper.find('#toggle');
+
+      openButton.getDOMNode().click();
+      wrapper.update();
+      sidebar = wrapper.find(Sidebar);
+
+      const sidebarNode = sidebar.getDOMNode().firstElementChild;
+      expect(sidebarNode.className.includes('right')).to.be.true;
+    });
+
+    it('should default "left" or "right" based on document.dir when side not provided', () => {
+      const documentDir = document.dir;
+
+      //default to right
+      document.dir = 'rtl';
+      ref = Preact.createRef();
+      wrapper = mount(
+        <>
+          <Sidebar ref={ref}>
+            <div>Content</div>
+          </Sidebar>
+          <button id="toggle" onClick={() => ref.current.toggle()}></button>
+          <button id="open" onClick={() => ref.current.open()}></button>
+          <button id="close" onClick={() => ref.current.close()}></button>
+        </>
+      );
+
+      sidebar = wrapper.find(Sidebar);
+      openButton = wrapper.find('#open');
+      openButton.getDOMNode().click();
+      wrapper.update();
+      sidebar = wrapper.find(Sidebar);
+
+      let sidebarNode = sidebar.getDOMNode().firstElementChild;
+      expect(sidebarNode.className.includes('right')).to.be.true;
+
+      // default to left
+      document.dir = 'ltr';
+      ref = Preact.createRef();
+      wrapper = mount(
+        <>
+          <Sidebar ref={ref}>
+            <div>Content</div>
+          </Sidebar>
+          <button id="toggle" onClick={() => ref.current.toggle()}></button>
+          <button id="open" onClick={() => ref.current.open()}></button>
+          <button id="close" onClick={() => ref.current.close()}></button>
+        </>
+      );
+
+      sidebar = wrapper.find(Sidebar);
+      openButton = wrapper.find('#open');
+      openButton.getDOMNode().click();
+      wrapper.update();
+      sidebar = wrapper.find(Sidebar);
+
+      sidebarNode = sidebar.getDOMNode().firstElementChild;
+      expect(sidebarNode.className.includes('left')).to.be.true;
+
+      document.dir = documentDir;
+    });
+
+    describe('programatic access to imperative API', () => {
+      it('open', () => {
+        // Sidebar is initially closed (no rendered nodes)
+        expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+        ref.current.open();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar opens
+        expect(isOpened(sidebar.getDOMNode())).to.be.true;
+
+        ref.current.open();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar remains opens
+        expect(isOpened(sidebar.getDOMNode())).to.be.true;
+      });
+
+      it('close', () => {
+        // Sidebar is initially closed (no rendered nodes)
+        expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+        ref.current.open();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar opens
+        expect(isOpened(sidebar.getDOMNode())).to.be.true;
+
+        ref.current.close();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar closes
+        expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+        ref.current.close();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar remains closed
+        expect(isOpened(sidebar.getDOMNode())).to.be.false;
+      });
+
+      it('toggle', () => {
+        // Sidebar is initially closed (no rendered nodes)
+        expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+        ref.current.toggle();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar opens
+        expect(isOpened(sidebar.getDOMNode())).to.be.true;
+
+        ref.current.toggle();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar closes
+        expect(isOpened(sidebar.getDOMNode())).to.be.false;
+      });
+    });
+
+    describe('click button to access imperative API', () => {
+      it('open', () => {
+        // Sidebar is initially closed (no rendered nodes)
+        expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+        openButton.getDOMNode().click();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar opens
+        expect(isOpened(sidebar.getDOMNode())).to.be.true;
+
+        openButton.getDOMNode().click();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar remains opens
+        expect(isOpened(sidebar.getDOMNode())).to.be.true;
+      });
+
+      it('close', () => {
+        // Sidebar is initially closed (no rendered nodes)
+        expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+        openButton.getDOMNode().click();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar opens
+        expect(isOpened(sidebar.getDOMNode())).to.be.true;
+
+        closeButton.getDOMNode().click();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar closes
+        expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+        closeButton.getDOMNode().click();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar remains closed
+        expect(isOpened(sidebar.getDOMNode())).to.be.false;
+      });
+
+      it('toggle', () => {
+        // Sidebar is initially closed (no rendered nodes)
+        expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+        toggleButton.getDOMNode().click();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar opens
+        expect(isOpened(sidebar.getDOMNode())).to.be.true;
+
+        toggleButton.getDOMNode().click();
+        wrapper.update();
+        sidebar = wrapper.find(Sidebar);
+
+        // Sidebar closes
+        expect(isOpened(sidebar.getDOMNode())).to.be.false;
+      });
+    });
+  });
+
+  describe('animations', () => {
+    let wrapper;
+    let ref;
+    let sidebar;
+    let animateStub;
+    let animateFunction;
+    let openButton;
+    let closeButton;
+
+    beforeEach(() => {
+      ref = Preact.createRef();
+      wrapper = mount(
+        <>
+          <Sidebar ref={ref} side="left">
+            <div>Content</div>
+          </Sidebar>
+          <button id="toggle" onClick={() => ref.current.toggle()}></button>
+          <button id="open" onClick={() => ref.current.open()}></button>
+          <button id="close" onClick={() => ref.current.close()}></button>
+        </>
+      );
+
+      sidebar = wrapper.find(Sidebar);
+      openButton = wrapper.find('#open');
+      closeButton = wrapper.find('#close');
+    });
+
+    it('should not animate on mount', () => {
+      animateStub = env.sandbox.stub(Element.prototype, 'animate');
+      expect(animateStub).to.not.be.called;
+    });
+
+    it('should animate when sidebar opens', () => {
+      animateStub = env.sandbox.stub(Element.prototype, 'animate');
+      const animation = {};
+      animateStub.returns(animation);
+
+      // Sidebar is closed
+      expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+      // Click to open the sidebar
+      openButton.simulate('click');
+
+      // Sidebar immediately begins to open
+      sidebar = wrapper.find(Sidebar);
+      expect(isOpened(sidebar.getDOMNode())).to.be.true;
+
+      // Animation has been started
+      // One call each for the backdrop and the sidebar
+      expect(animateStub).to.be.calledTwice;
+
+      const sidebarKeyframes = animateStub.firstCall.firstArg;
+      const backdropKeyframes = animateStub.secondCall.firstArg;
+
+      const sidebarOptions = animateStub.firstCall.args[1];
+      const backdropOptions = animateStub.secondCall.args[1];
+
+      expect(sidebarKeyframes[0].transform).to.equal('translateX(-100%)');
+      expect(sidebarKeyframes[1].transform).to.equal('translateX(0)');
+      expect(sidebarOptions.duration).to.equal(350);
+      expect(sidebarOptions.easing).to.equal('cubic-bezier(0,0,.21,1)');
+      expect(sidebarOptions.fill).to.equal('both');
+
+      expect(backdropKeyframes[0].opacity).to.equal('0');
+      expect(backdropKeyframes[1].opacity).to.equal('1');
+      expect(backdropOptions.duration).to.equal(350);
+      expect(backdropOptions.easing).to.equal('cubic-bezier(0,0,.21,1)');
+      expect(backdropOptions.fill).to.equal('both');
+    });
+
+    it('should animate when sidebar closes', () => {
+      animateFunction = Element.prototype.animate;
+      Element.prototype.animate = null;
+
+      // Sidebar is closed
+      expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+      // Click to open the sidebar
+      openButton.simulate('click');
+
+      // Synchronously open the sidebar
+      sidebar = wrapper.find(Sidebar);
+      expect(isOpened(sidebar.getDOMNode())).to.be.true;
+
+      // Turn on animations after Sidebar is opened
+      Element.prototype.animate = animateFunction;
+      animateStub = env.sandbox.stub(Element.prototype, 'animate');
+      const animation = {};
+      animateStub.returns(animation);
+
+      // Close the sidebar
+      closeButton.simulate('click');
+
+      // Sidebar begins to close but is not immediately closed
+      sidebar = wrapper.find(Sidebar);
+      expect(isOpened(sidebar.getDOMNode())).to.be.true;
+
+      // Animation has been started
+      // One call each for the backdrop and the sidebar
+      expect(animateStub).to.be.calledTwice;
+
+      const sidebarKeyframes = animateStub.firstCall.firstArg;
+      const backdropKeyframes = animateStub.secondCall.firstArg;
+
+      const sidebarOptions = animateStub.firstCall.args[1];
+      const backdropOptions = animateStub.secondCall.args[1];
+
+      expect(sidebarKeyframes[0].transform).to.equal('translateX(-100%)');
+      expect(sidebarKeyframes[1].transform).to.equal('translateX(0)');
+      expect(sidebarOptions.direction).to.equal('reverse');
+      expect(sidebarOptions.duration).to.equal(350);
+      expect(sidebarOptions.easing).to.equal('cubic-bezier(0,0,.21,1)');
+      expect(sidebarOptions.fill).to.equal('both');
+
+      expect(backdropKeyframes[0].opacity).to.equal('0');
+      expect(backdropKeyframes[1].opacity).to.equal('1');
+      expect(backdropOptions.direction).to.equal('reverse');
+      expect(backdropOptions.duration).to.equal(350);
+      expect(backdropOptions.easing).to.equal('cubic-bezier(0,0,.21,1)');
+      expect(backdropOptions.fill).to.equal('both');
+
+      // Cleanup the animation.
+      animation.onfinish();
+      wrapper.update();
+      sidebar = wrapper.find(Sidebar);
+      expect(isOpened(sidebar.getDOMNode())).to.be.false;
+    });
+
+    it('should reverse animations if closed while opening', () => {
+      animateStub = env.sandbox.stub(Element.prototype, 'animate');
+      const animation = {
+        reverse: env.sandbox.spy(),
+      };
+      animateStub.returns(animation);
+
+      // Sidebar is closed
+      expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+      // Click to open the sidebar
+      openButton.simulate('click');
+
+      // Animation has been started
+      // One call each for the backdrop and the sidebar
+      expect(animateStub).to.be.calledTwice;
+
+      // Click to close the sidebar and reverse the animation
+      closeButton.simulate('click');
+
+      // Expect reverse to be called twice (once for backdrop and once for sidebar)
+      expect(animation.reverse).to.be.calledTwice;
+    });
+
+    it('should not reverse animations if opened while opening', () => {
+      animateStub = env.sandbox.stub(Element.prototype, 'animate');
+      const animation = {
+        reverse: env.sandbox.spy(),
+      };
+      animateStub.returns(animation);
+
+      // Sidebar is closed
+      expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+      // Click to open the sidebar
+      openButton.simulate('click');
+
+      // Animation has been started
+      // One call each for the backdrop and the sidebar
+      expect(animateStub).to.be.calledTwice;
+
+      // Click to "open" the sidebar while its already opening
+      openButton.simulate('click');
+
+      // Reverse should not be called, sidebar is already opening
+      expect(animation.reverse).to.not.be.called;
+    });
+
+    it('should reverse animations if opened while closing', () => {
+      animateFunction = Element.prototype.animate;
+      Element.prototype.animate = null;
+
+      // Sidebar is closed
+      expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+      // Click to open the sidebar
+      openButton.simulate('click');
+
+      // Synchronously open the sidebar
+      sidebar = wrapper.find(Sidebar);
+      expect(sidebar.getDOMNode()).to.not.be.null;
+
+      // Turn on animations after Sidebar is opened
+      Element.prototype.animate = animateFunction;
+      animateStub = env.sandbox.stub(Element.prototype, 'animate');
+      const animation = {
+        reverse: env.sandbox.spy(),
+      };
+      animateStub.returns(animation);
+
+      // Close the sidebar from fully opened state
+      closeButton.simulate('click');
+
+      // Animation has been started
+      // One call each for the backdrop and the sidebar
+      expect(animateStub).to.be.calledTwice;
+
+      // Click to "open" the sidebar while its already opening
+      openButton.simulate('click');
+
+      // Expect reverse to be called twice (once for backdrop and once for sidebar)
+      expect(animation.reverse).to.be.calledTwice;
+    });
+
+    it('should not reverse animations if closed while closing', () => {
+      animateFunction = Element.prototype.animate;
+      Element.prototype.animate = null;
+
+      // Sidebar is closed
+      expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+      // Click to open the sidebar
+      openButton.simulate('click');
+
+      // Synchronously open the sidebar
+      sidebar = wrapper.find(Sidebar);
+      expect(sidebar.getDOMNode()).to.not.be.null;
+
+      // Turn on animations after Sidebar is opened
+      Element.prototype.animate = animateFunction;
+      animateStub = env.sandbox.stub(Element.prototype, 'animate');
+      const animation = {
+        reverse: env.sandbox.spy(),
+      };
+      animateStub.returns(animation);
+
+      // Close the sidebar from fully opened state
+      closeButton.simulate('click');
+
+      // Animation has been started
+      // One call each for the backdrop and the sidebar
+      expect(animateStub).to.be.calledTwice;
+
+      // Click to "close" the sidebar while its already closing
+      closeButton.simulate('click');
+
+      // Reverse should not be called, sidebar is already closing
+      expect(animation.reverse).to.not.be.called;
+    });
+
+    it('should ignore animations if not available on the platform', () => {
+      animateFunction = Element.prototype.animate;
+      Element.prototype.animate = null;
+
+      // Sidebar is closed
+      expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+      // Click to open the sidebar
+      openButton.simulate('click');
+
+      // Immediately opens the sidebar
+      sidebar = wrapper.find(Sidebar);
+      expect(isOpened(sidebar.getDOMNode())).to.be.true;
+
+      // Click to close the sidebar
+      closeButton.simulate('click');
+
+      // Immediately closes the sidebar
+      sidebar = wrapper.find(Sidebar);
+      expect(isOpened(sidebar.getDOMNode())).to.be.false;
+
+      // Restore animations to the system
+      Element.prototype.animate = animateFunction;
+    });
+  });
+
+  describe('toolbar', () => {
+    let wrapper;
+    let ref;
+    let matchMediaFunction;
+    let html;
+    let mediaQuery;
+    let target;
+
+    beforeEach(() => {
+      ref = Preact.createRef();
+      matchMediaFunction = window.matchMedia;
+
+      // append the toolbar target to document body separately
+      // test cannot find it otherwise
+      html = htmlFor(document);
+      target = html`<div id="toolbar-target"></div>`;
+      document.body.appendChild(target);
+    });
+
+    afterEach(() => {
+      window.matchMedia = matchMediaFunction;
+      wrapper.unmount();
+      document.body.removeChild(target);
+    });
+
+    it('toolbar target should receive expected content from toolbar', () => {
+      // this media query is always true
+      mediaQuery = '';
+      wrapper = mount(
+        <>
+          <Sidebar ref={ref} side="left">
+            <div>Content</div>
+            <SidebarToolbar toolbar={mediaQuery} toolbarTarget="toolbar-target">
+              <ul>
+                <li>Toolbar Item 1</li>
+                <li>Toolbar Item 2</li>
+              </ul>
+            </SidebarToolbar>
+          </Sidebar>
+        </>
+      );
+
+      // Toolbar nodes were appended to the target
+      expect(target.hasChildNodes()).to.be.true;
+      expect(target.childElementCount).to.equal(2);
+      expect(target.firstElementChild.nodeName).to.equal('NAV');
+      expect(target.lastElementChild.nodeName).to.equal('STYLE');
+    });
+
+    it('existing children in toolbar target should not be overwritten', () => {
+      // this media query is always true
+      mediaQuery = '';
+      target.innerHTML = '<span>hello world<span>';
+      wrapper = mount(
+        <>
+          <Sidebar ref={ref} side="left">
+            <div>Content</div>
+            <SidebarToolbar toolbar={mediaQuery} toolbarTarget="toolbar-target">
+              <ul>
+                <li>Toolbar Item 1</li>
+                <li>Toolbar Item 2</li>
+              </ul>
+            </SidebarToolbar>
+          </Sidebar>
+        </>
+      );
+
+      // Toolbar target now has 3 nodes, 1 existing, 2 appended from toolbar
+      expect(target.hasChildNodes()).to.be.true;
+      expect(target.childElementCount).to.equal(3);
+      expect(target.firstElementChild.nodeName).to.equal('SPAN');
+      expect(target.children[1].nodeName).to.equal('NAV');
+      expect(target.lastElementChild.nodeName).to.equal('STYLE');
+    });
+
+    it('toolbar target content should be removed on unmount', () => {
+      // this media query is always false
+      mediaQuery = '(max-height: 0px)';
+      wrapper = mount(
+        <>
+          <Sidebar ref={ref} side="left">
+            <div>Content</div>
+            <SidebarToolbar toolbar={mediaQuery} toolbarTarget="toolbar-target">
+              <ul>
+                <li>Toolbar Item 1</li>
+                <li>Toolbar Item 2</li>
+              </ul>
+            </SidebarToolbar>
+          </Sidebar>
+        </>
+      );
+
+      expect(target.hasChildNodes()).to.be.true;
+      expect(target.childElementCount).to.equal(2);
+
+      wrapper.unmount();
+      expect(target.hasChildNodes()).to.be.false;
+    });
+
+    it('toolbar should sanitize an invalid media query', () => {
+      // this is an invalid media query
+      mediaQuery = 'foo {}';
+      wrapper = mount(
+        <>
+          <Sidebar ref={ref} side="left">
+            <div>Content</div>
+            <SidebarToolbar toolbar={mediaQuery} toolbarTarget="toolbar-target">
+              <ul>
+                <li>Toolbar Item 1</li>
+                <li>Toolbar Item 2</li>
+              </ul>
+            </SidebarToolbar>
+          </Sidebar>
+        </>
+      );
+
+      expect(target.hasChildNodes()).to.be.true;
+      expect(target.childElementCount).to.equal(2);
+      const styleElementText = target.lastElementChild.textContent;
+      expect(styleElementText).to.include('not all'); //sanitized media query
+      expect(styleElementText).not.to.include('foo'); //unsanitized media query
+    });
+
+    it('toolbar should sanitize the toolbar target attribute', () => {
+      // this media query is always true
+      mediaQuery = '';
+      const toolbarTarget = 'toolbar-target:.';
+      const getElementByIdSpy = env.sandbox.spy(document, 'getElementById');
+      wrapper = mount(
+        <>
+          <Sidebar ref={ref} side="left">
+            <div>Content</div>
+            <SidebarToolbar toolbar={mediaQuery} toolbarTarget={toolbarTarget}>
+              <ul>
+                <li>Toolbar Item 1</li>
+                <li>Toolbar Item 2</li>
+              </ul>
+            </SidebarToolbar>
+          </Sidebar>
+        </>
+      );
+
+      expect(getElementByIdSpy).to.be.calledOnce;
+      expect(getElementByIdSpy).to.be.calledWith('toolbar-target\\:\\.');
+      expect(target.hasChildNodes()).to.be.false;
+    });
+  });
+});
diff --git a/extensions/amp-sidebar/OWNERS b/extensions/amp-sidebar/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-sidebar/OWNERS
+++ b/extensions/amp-sidebar/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-sidebar/validator-amp-sidebar.protoascii b/extensions/amp-sidebar/validator-amp-sidebar.protoascii
index 5c3df0a1806e9..e8ee12f042dad 100644
--- a/extensions/amp-sidebar/validator-amp-sidebar.protoascii
+++ b/extensions/amp-sidebar/validator-amp-sidebar.protoascii
@@ -15,7 +15,6 @@
 #
 tags: {  # amp-sidebar
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-sidebar"
@@ -39,7 +38,6 @@ tags: {  # amp-sidebar
 }
 tags: {  # <amp-sidebar> not in amp-story or email
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "AMP-SIDEBAR"
   spec_name: "amp-sidebar"
   # There is an alternate spec for amp-sidebar in amp-story.
@@ -57,7 +55,7 @@ tags: {  # <amp-sidebar> not in amp-story or email
   mark_descendants {
     marker: AUTOSCROLL
   }
-  spec_url: "https://amp.dev/documentation/components/amp-sidebar"
+  spec_url: "https://amp.dev/documentation/components/amp-sidebar/"
 }
 tags: {  # <amp-sidebar> in email
   html_format: AMP4EMAIL
@@ -73,7 +71,7 @@ tags: {  # <amp-sidebar> in email
   amp_layout: {
     supported_layouts: NODISPLAY
   }
-  spec_url: "https://amp.dev/documentation/components/amp-sidebar"
+  spec_url: "https://amp.dev/documentation/components/amp-sidebar/"
 }
 tags: { # <amp-sidebar> in amp-story
   html_format: AMP
@@ -85,12 +83,13 @@ tags: { # <amp-sidebar> in amp-story
   mark_descendants {
     marker: AUTOSCROLL
   }
-  spec_url: "https://amp.dev/documentation/components/amp-sidebar"
+  spec_url: "https://amp.dev/documentation/components/amp-sidebar/"
+  deprecation: "anchor tags or amp-story-player controls"
+  deprecation_url: "https://github.com/ampproject/amphtml/issues/33293"
 }
 tags: {  # amp-sidebar > nav
   html_format: AMP
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "NAV"
   spec_name: "amp-sidebar > nav"
   mandatory_parent: "AMP-SIDEBAR"
diff --git a/extensions/amp-skimlinks/0.1/affiliate-link-resolver.js b/extensions/amp-skimlinks/0.1/affiliate-link-resolver.js
index 92e415a399785..fe9f8f038d71b 100644
--- a/extensions/amp-skimlinks/0.1/affiliate-link-resolver.js
+++ b/extensions/amp-skimlinks/0.1/affiliate-link-resolver.js
@@ -15,7 +15,7 @@
  */
 
 import {TwoStepsResponse} from './link-rewriter/two-steps-response';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getNormalizedHostnameFromAnchor, isExcludedDomain} from './utils';
 
 /**
@@ -128,9 +128,8 @@ export class AffiliateLinkResolver {
    * @public
    */
   resolveUnknownAnchors(anchorList) {
-    const alreadyResolvedResponse = this.associateWithReplacementUrl_(
-      anchorList
-    );
+    const alreadyResolvedResponse =
+      this.associateWithReplacementUrl_(anchorList);
     let willBeResolvedPromise = null;
 
     const domainsToAsk = this.getNewDomains_(anchorList);
diff --git a/extensions/amp-skimlinks/0.1/amp-skimlinks.js b/extensions/amp-skimlinks/0.1/amp-skimlinks.js
index 600fd035ac85c..a89fe7e78ea85 100644
--- a/extensions/amp-skimlinks/0.1/amp-skimlinks.js
+++ b/extensions/amp-skimlinks/0.1/amp-skimlinks.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import {CommonSignals} from '../../../src/common-signals';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
 import {Services} from '../../../src/services';
-import {once} from '../../../src/utils/function';
+import {once} from '../../../src/core/types/function';
 
 import {Tracking} from './tracking';
 
diff --git a/extensions/amp-skimlinks/0.1/link-rewriter/link-rewriter-manager.js b/extensions/amp-skimlinks/0.1/link-rewriter/link-rewriter-manager.js
index 375fdc458bc43..33e57d3bd43a7 100644
--- a/extensions/amp-skimlinks/0.1/link-rewriter/link-rewriter-manager.js
+++ b/extensions/amp-skimlinks/0.1/link-rewriter/link-rewriter-manager.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../../../src/amp-events';
+import {AmpEvents} from '../../../../src/core/constants/amp-events';
 import {EVENTS, PRIORITY_META_TAG_NAME} from './constants';
 import {LinkRewriter} from './link-rewriter';
 import {Priority} from '../../../../src/service/navigation';
@@ -87,7 +87,7 @@ export class LinkRewriterManager {
   /**
    * Create and configure a new LinkRewriter on the page.
    * @param {string} linkRewriterId - A unique id used to identify the link rewriter.
-   * @param {!function(!Array<!HTMLElement>): !./two-steps-response.TwoStepsResponse} resolveUnknownLinks
+   * @param {function(!Array<!HTMLElement>): !./two-steps-response.TwoStepsResponse} resolveUnknownLinks
    *   - Function to determine which anchor should be replaced and by what URL.
    *     Should return an instance of './two-steps-response.TwoStepsResponse'.
    * @param {?{linkSelector: string}=} options
diff --git a/extensions/amp-skimlinks/0.1/link-rewriter/link-rewriter.js b/extensions/amp-skimlinks/0.1/link-rewriter/link-rewriter.js
index f1ca64369fc8e..e526bef28068a 100644
--- a/extensions/amp-skimlinks/0.1/link-rewriter/link-rewriter.js
+++ b/extensions/amp-skimlinks/0.1/link-rewriter/link-rewriter.js
@@ -17,7 +17,7 @@
 import {ChunkPriority, chunk} from '../../../../src/chunk';
 import {EVENTS, ORIGINAL_URL_ATTRIBUTE} from './constants';
 import {LinkReplacementCache} from './link-replacement-cache';
-import {Observable} from '../../../../src/observable';
+import {Observable} from '../../../../src/core/data-structures/observable';
 import {TwoStepsResponse} from './two-steps-response';
 import {userAssert} from '../../../../src/log';
 
@@ -155,10 +155,11 @@ export class LinkRewriter {
           resolve();
         });
       };
-      const elementOrShadowRoot = /** @type {!Element|!ShadowRoot} */ (this
-        .rootNode_.nodeType == Node.DOCUMENT_NODE
-        ? this.rootNode_.documentElement
-        : this.rootNode_);
+      const elementOrShadowRoot = /** @type {!Element|!ShadowRoot} */ (
+        this.rootNode_.nodeType == Node.DOCUMENT_NODE
+          ? this.rootNode_.documentElement
+          : this.rootNode_
+      );
       chunk(elementOrShadowRoot, task, ChunkPriority.LOW);
     });
   }
diff --git a/extensions/amp-skimlinks/0.1/test/test-amp-skimlinks.js b/extensions/amp-skimlinks/0.1/test/test-amp-skimlinks.js
index 48b1a18cf1359..9a78fb41efe27 100644
--- a/extensions/amp-skimlinks/0.1/test/test-amp-skimlinks.js
+++ b/extensions/amp-skimlinks/0.1/test/test-amp-skimlinks.js
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import * as DocumentReady from '../../../../src/document-ready';
+import * as DocumentReady from '../../../../src/core/document-ready';
 import * as SkimOptionsModule from '../skim-options';
 import * as chunkModule from '../../../../src/chunk';
-import {Deferred} from '../../../../src/utils/promise';
+import {Deferred} from '../../../../src/core/data-structures/promise';
 import {LinkRewriterManager} from '../link-rewriter/link-rewriter-manager';
 import {SKIMLINKS_REWRITER_ID} from '../constants';
 import {EVENTS as linkRewriterEvents} from '../link-rewriter/constants';
@@ -309,7 +309,7 @@ describes.fakeWin(
 
         it('Should wait until visible to send the impression tracking', () => {
           const isVisibleDefer = new Deferred();
-          window.sandbox
+          env.sandbox
             .stub(ampdoc, 'whenFirstVisible')
             .returns(isVisibleDefer.promise);
 
@@ -329,8 +329,8 @@ describes.fakeWin(
         it('Should update tracking info with the guid', () => {
           return ampSkimlinks.onPageScanned_().then(() => {
             const {
-              setTrackingInfo: setTrackingInfoStub,
               sendImpressionTracking: sendImpressionTrackingStub,
+              setTrackingInfo: setTrackingInfoStub,
             } = ampSkimlinks.trackingService_;
             expect(setTrackingInfoStub.withArgs({guid}).calledOnce).to.be.true;
             expect(setTrackingInfoStub.calledBefore(sendImpressionTrackingStub))
@@ -341,9 +341,8 @@ describes.fakeWin(
 
       describe('When beacon call has already been made', () => {
         beforeEach(() => {
-          ampSkimlinks.affiliateLinkResolver_.firstRequest = Promise.resolve(
-            beaconResponse
-          );
+          ampSkimlinks.affiliateLinkResolver_.firstRequest =
+            Promise.resolve(beaconResponse);
         });
 
         it('Should not make the fallback call', () => {
@@ -369,7 +368,7 @@ describes.fakeWin(
 
         it('Should wait until visible to send the impression tracking', () => {
           const isVisibleDefer = new Deferred();
-          window.sandbox
+          env.sandbox
             .stub(ampdoc, 'whenFirstVisible')
             .returns(isVisibleDefer.promise);
 
@@ -386,8 +385,8 @@ describes.fakeWin(
         it('Should update tracking info with the guid', () => {
           return ampSkimlinks.onPageScanned_().then(() => {
             const {
-              setTrackingInfo: setTrackingInfoStub,
               sendImpressionTracking: sendImpressionTrackingStub,
+              setTrackingInfo: setTrackingInfoStub,
             } = ampSkimlinks.trackingService_;
             expect(setTrackingInfoStub.withArgs({guid}).calledOnce).to.be.true;
             expect(setTrackingInfoStub.calledBefore(sendImpressionTrackingStub))
diff --git a/extensions/amp-skimlinks/0.1/test/test-link-rewriter.js b/extensions/amp-skimlinks/0.1/test/test-link-rewriter.js
index f34f5c22cd6a8..fb8679f7647cf 100644
--- a/extensions/amp-skimlinks/0.1/test/test-link-rewriter.js
+++ b/extensions/amp-skimlinks/0.1/test/test-link-rewriter.js
@@ -15,7 +15,7 @@
  */
 
 import * as chunkModule from '../../../../src/chunk';
-import {AmpEvents} from '../../../../src/amp-events';
+import {AmpEvents} from '../../../../src/core/constants/amp-events';
 import {LinkReplacementCache} from '../link-rewriter/link-replacement-cache';
 import {LinkRewriter} from '../link-rewriter/link-rewriter';
 import {LinkRewriterManager} from '../link-rewriter/link-rewriter-manager';
diff --git a/extensions/amp-skimlinks/0.1/test/test-tracking.js b/extensions/amp-skimlinks/0.1/test/test-tracking.js
index 57db56980a73a..2fce08d995b78 100644
--- a/extensions/amp-skimlinks/0.1/test/test-tracking.js
+++ b/extensions/amp-skimlinks/0.1/test/test-tracking.js
@@ -25,9 +25,9 @@ import {
 } from '../constants';
 
 const {
-  pageTrackingUrl: PAGE_IMPRESSION_TRACKING_URL,
   linksTrackingUrl: LINKS_IMPRESSIONS_TRACKING_URL,
   nonAffiliateTrackingUrl: NA_CLICK_TRACKING_URL,
+  pageTrackingUrl: PAGE_IMPRESSION_TRACKING_URL,
 } = DEFAULT_CONFIG;
 
 describes.fakeWin(
@@ -60,9 +60,8 @@ describes.fakeWin(
         guid: 'guid',
         ...trackingInfo,
       };
-      const trackingService = helpers.createTrackingWithStubAnalytics(
-        skimOptions
-      );
+      const trackingService =
+        helpers.createTrackingWithStubAnalytics(skimOptions);
       trackingService.setTrackingInfo(trackingInfo);
 
       return trackingService;
diff --git a/extensions/amp-skimlinks/0.1/test/test-waypoint.js b/extensions/amp-skimlinks/0.1/test/test-waypoint.js
index 888d150c231e2..95938f64d38e5 100644
--- a/extensions/amp-skimlinks/0.1/test/test-waypoint.js
+++ b/extensions/amp-skimlinks/0.1/test/test-waypoint.js
@@ -17,7 +17,8 @@
 import {DEFAULT_SKIM_OPTIONS, pubcode} from './constants';
 import {Waypoint} from '../waypoint';
 import {XCUST_ATTRIBUTE_NAME} from '../constants';
-import {parseQueryString, parseUrlDeprecated} from '../../../../src/url';
+import {parseQueryString} from '../../../../src/core/types/string/url';
+import {parseUrlDeprecated} from '../../../../src/url';
 import helpersFactory from './helpers';
 
 describes.fakeWin(
diff --git a/extensions/amp-skimlinks/0.1/tracking.js b/extensions/amp-skimlinks/0.1/tracking.js
index d91cc403daf0d..a851da786ae40 100644
--- a/extensions/amp-skimlinks/0.1/tracking.js
+++ b/extensions/amp-skimlinks/0.1/tracking.js
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import {CustomEventReporterBuilder} from '../../../src/extension-analytics.js';
-import {dict} from '../../../src/utils/object';
+import {CustomEventReporterBuilder} from '../../../src/extension-analytics';
+import {dict} from '../../../src/core/types/object';
 import {generatePageImpressionId, isExcludedAnchorUrl} from './utils';
 
 import {PLATFORM_NAME, XCUST_ATTRIBUTE_NAME} from './constants';
@@ -31,7 +31,7 @@ const NON_AFFILIATE_CLICK = 'non-affiliate-click';
  *  - Link impression tracking
  *  - Non-affiliate click tracking.
  *
- * It uses the amp-analytics internal API (https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-components-analytics.md)
+ * It uses the amp-analytics internal API (https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-components-analytics.md)
  * in order to send the tracking requests.
  */
 export class Tracking {
@@ -51,7 +51,7 @@ export class Tracking {
       customTrackingId: skimOptions.customTrackingId,
       guid: null,
       pageImpressionId: generatePageImpressionId(),
-      // https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md
+      // https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md
       pageUrl: 'CANONICAL_URL',
       pubcode: skimOptions.pubcode,
       referrer,
@@ -93,13 +93,8 @@ export class Tracking {
     if (!this.tracking_) {
       return;
     }
-    const {
-      pageImpressionId,
-      timezone,
-      pubcode,
-      pageUrl,
-      guid,
-    } = this.trackingInfo_;
+    const {guid, pageImpressionId, pageUrl, pubcode, timezone} =
+      this.trackingInfo_;
 
     // This data is common to both page & link impression requests.
     const commonData = dict({
@@ -130,12 +125,12 @@ export class Tracking {
       return;
     }
     const {
+      customTrackingId,
       pageImpressionId,
-      timezone,
-      pubcode,
       pageUrl,
+      pubcode,
       referrer,
-      customTrackingId,
+      timezone,
     } = this.trackingInfo_;
 
     const data = dict({
@@ -173,16 +168,18 @@ export class Tracking {
   sendPageImpressionTracking_(commonData, numberAffiliateLinks) {
     const {customTrackingId, referrer} = this.trackingInfo_;
 
-    const data = /** @type {!JsonObject} */ (Object.assign(
-      dict({
-        'slc': numberAffiliateLinks,
-        'jsl': 0, // Javascript load time, not relevant in AMP context.
-        'pref': referrer,
-        'uc': customTrackingId,
-        't': 1,
-      }),
-      commonData
-    ));
+    const data = /** @type {!JsonObject} */ (
+      Object.assign(
+        dict({
+          'slc': numberAffiliateLinks,
+          'jsl': 0, // Javascript load time, not relevant in AMP context.
+          'pref': referrer,
+          'uc': customTrackingId,
+          't': 1,
+        }),
+        commonData
+      )
+    );
 
     // Sends POST request. Second param is the object used to interpolate
     // placeholder variables defined in PAGE_IMPRESSION_TRACKING_URL
@@ -209,14 +206,16 @@ export class Tracking {
       return;
     }
 
-    const data = /** @type {!JsonObject} */ (Object.assign(
-      dict({
-        'dl': urls,
-        'hae': numberAffiliateLinks ? 1 : 0, // 1 if has at least one AE link
-        'typ': 'l',
-      }),
-      commonData
-    ));
+    const data = /** @type {!JsonObject} */ (
+      Object.assign(
+        dict({
+          'dl': urls,
+          'hae': numberAffiliateLinks ? 1 : 0, // 1 if has at least one AE link
+          'typ': 'l',
+        }),
+        commonData
+      )
+    );
 
     // Send POST request. Second param is the object used to interpolate
     // placeholder variables defined in LINKS_IMPRESSIONS_TRACKING_URL.
@@ -240,11 +239,8 @@ export class Tracking {
    */
   setupAnalytics_(element) {
     const analyticsBuilder = new CustomEventReporterBuilder(element);
-    const {
-      pageTrackingUrl,
-      linksTrackingUrl,
-      nonAffiliateTrackingUrl,
-    } = this.skimOptions_.config;
+    const {linksTrackingUrl, nonAffiliateTrackingUrl, pageTrackingUrl} =
+      this.skimOptions_.config;
 
     // Configure analytics to send POST request when receiving
     // 'page-impressions' event.
@@ -285,7 +281,7 @@ export class Tracking {
     const urls = dict({});
 
     anchorReplacementList.forEach((anchorReplacement) => {
-      const {replacementUrl, anchor} = anchorReplacement;
+      const {anchor, replacementUrl} = anchorReplacement;
       const isExcluded = isExcludedAnchorUrl(anchor, this.skimOptions_);
       const isAffiliate = Boolean(replacementUrl);
       // Do not track na-links since the backend doesn't use them.
diff --git a/extensions/amp-skimlinks/0.1/waypoint.js b/extensions/amp-skimlinks/0.1/waypoint.js
index 3aa3c5fbabbd2..00c3a1d30a4ba 100644
--- a/extensions/amp-skimlinks/0.1/waypoint.js
+++ b/extensions/amp-skimlinks/0.1/waypoint.js
@@ -17,7 +17,7 @@
 import {PLATFORM_NAME, XCUST_ATTRIBUTE_NAME} from './constants';
 import {Services} from '../../../src/services';
 import {addParamsToUrl} from '../../../src/url';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 
 /**
  * The waypoint class is responsible for building the URL to
@@ -58,12 +58,8 @@ export class Waypoint {
       return null;
     }
 
-    const {
-      pubcode,
-      pageImpressionId,
-      customTrackingId,
-      guid,
-    } = this.tracking_.getTrackingInfo();
+    const {customTrackingId, guid, pageImpressionId, pubcode} =
+      this.tracking_.getTrackingInfo();
 
     const xcust = anchor.getAttribute(XCUST_ATTRIBUTE_NAME) || customTrackingId;
 
diff --git a/extensions/amp-skimlinks/OWNERS b/extensions/amp-skimlinks/OWNERS
index b155a7c46f248..7d7eb45249877 100644
--- a/extensions/amp-skimlinks/OWNERS
+++ b/extensions/amp-skimlinks/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-skimlinks/validator-amp-skimlinks.protoascii b/extensions/amp-skimlinks/validator-amp-skimlinks.protoascii
index 16e7fab7fa2d8..0cebbc15811ea 100644
--- a/extensions/amp-skimlinks/validator-amp-skimlinks.protoascii
+++ b/extensions/amp-skimlinks/validator-amp-skimlinks.protoascii
@@ -60,4 +60,3 @@ tags: {  # <amp-skimlinks>
     supported_layouts: NODISPLAY
   }
 }
-
diff --git a/extensions/amp-slides/OWNERS b/extensions/amp-slides/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-slides/OWNERS
+++ b/extensions/amp-slides/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-smartlinks/0.1/amp-smartlinks.js b/extensions/amp-smartlinks/0.1/amp-smartlinks.js
index 9b88c7768b0e1..3f4be914c17b8 100644
--- a/extensions/amp-smartlinks/0.1/amp-smartlinks.js
+++ b/extensions/amp-smartlinks/0.1/amp-smartlinks.js
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import {CommonSignals} from '../../../src/common-signals';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
 import {CustomEventReporterBuilder} from '../../../src/extension-analytics.js';
 import {Services} from '../../../src/services';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getData} from './../../../src/event-helper';
 
 import {ENDPOINTS} from './constants';
@@ -88,6 +88,10 @@ export class AmpSmartlinks extends AMP.BaseElement {
    */
   runSmartlinks_() {
     this.getLinkmateOptions_().then((config) => {
+      if (!config) {
+        return;
+      }
+
       this.linkmateOptions_.linkmateExpected = config['linkmate_enabled'];
       this.linkmateOptions_.publisherID = config['publisher_id'];
 
@@ -98,7 +102,9 @@ export class AmpSmartlinks extends AMP.BaseElement {
         /** @type {!../../../src/service/xhr-impl.Xhr} */
         (this.xhr_),
         /** @type {!Object} */
-        (this.linkmateOptions_)
+        (this.linkmateOptions_),
+        /** @type {!Object} */
+        (this.win)
       );
       this.smartLinkRewriter_ = this.initLinkRewriter_();
 
@@ -193,17 +199,28 @@ export class AmpSmartlinks extends AMP.BaseElement {
    * @private
    */
   buildPageImpressionPayload_() {
-    return /** @type {!JsonObject} */ (dict({
-      'events': [{'is_amp': true}],
-      'organization_id': this.linkmateOptions_.publisherID,
-      'organization_type': 'publisher',
-      'user': {
-        'page_session_uuid': this.generateUUID_(),
-        'source_url': this.ampDoc_.getUrl(),
-        'previous_url': this.referrer_,
-        'user_agent': this.ampDoc_.win.navigator.userAgent,
-      },
-    }));
+    return /** @type {!JsonObject} */ (
+      dict({
+        'events': [{'is_amp': true}],
+        'organization_id': this.linkmateOptions_.publisherID,
+        'organization_type': 'publisher',
+        'user': {
+          'page_session_uuid': this.generateUUID_(),
+          'source_url': this.getLocationHref_(),
+          'previous_url': this.referrer_,
+          'user_agent': this.ampDoc_.win.navigator.userAgent,
+        },
+      })
+    );
+  }
+
+  /**
+   * Retrieve url of the current doc.
+   * @return {string}
+   * @private
+   */
+  getLocationHref_() {
+    return this.win.location.href;
   }
 
   /**
diff --git a/extensions/amp-smartlinks/0.1/linkmate.js b/extensions/amp-smartlinks/0.1/linkmate.js
index 694b7a151c821..ae4ac0610f14f 100644
--- a/extensions/amp-smartlinks/0.1/linkmate.js
+++ b/extensions/amp-smartlinks/0.1/linkmate.js
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import {deepEquals} from '../../../src/json';
-import {dict} from '../../../src/utils/object';
+import {deepEquals} from '../../../src/core/types/object/json';
+import {dict} from '../../../src/core/types/object';
 
 import {ENDPOINTS} from './constants';
 import {TwoStepsResponse} from '../../amp-skimlinks/0.1/link-rewriter/two-steps-response';
@@ -26,11 +26,9 @@ export class Linkmate {
    * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampDoc
    * @param {!../../../src/service/xhr-impl.Xhr} xhr
    * @param {!Object} linkmateOptions
+   * @param {!Object} win
    */
-  constructor(ampDoc, xhr, linkmateOptions) {
-    /** @private {!../../../src/service/ampdoc-impl.AmpDoc} */
-    this.ampDoc_ = ampDoc;
-
+  constructor(ampDoc, xhr, linkmateOptions, win) {
     /** @private {!../../../src/service/xhr-impl.Xhr} */
     this.xhr_ = xhr;
 
@@ -43,14 +41,14 @@ export class Linkmate {
     /** @private {string} */
     this.linkAttribute_ = linkmateOptions.linkAttribute;
 
-    /** @private {!Document|!ShadowRoot} */
-    this.rootNode_ = this.ampDoc_.getRootNode();
-
     /** @private {?Array<!HTMLElement>} */
     this.anchorList_ = null;
 
     /** @private {?Array<JsonObject>}*/
     this.linkmateResponse_ = null;
+
+    /** @private {?Array<JsonObject>}*/
+    this.win_ = win;
   }
 
   /**
@@ -165,11 +163,33 @@ export class Linkmate {
    */
   getEditInfo_() {
     return dict({
-      'name': this.rootNode_.title || null,
-      'url': this.ampDoc_.getUrl(),
+      'name': this.getEditName_(),
+      'url': this.getLocationHref_(),
     });
   }
 
+  /**
+   * Retrieve edit name.
+   * @return {string}
+   * @private
+   */
+  getEditName_() {
+    let editName = null;
+    if (this.win_.document.getElementsByTagName('title').length > 0) {
+      editName = this.win_.document.getElementsByTagName('title')[0].text;
+    }
+    return editName;
+  }
+
+  /**
+   * Retrieve url of the current doc.
+   * @return {string}
+   * @private
+   */
+  getLocationHref_() {
+    return this.win_.location.href;
+  }
+
   /**
    * The API response returns unique links. Map those unique links to as many
    * urls in the anchorList as possible. Set the replacement url as a shop-link.
diff --git a/extensions/amp-smartlinks/0.1/test/test-amp-smartlinks.js b/extensions/amp-smartlinks/0.1/test/test-amp-smartlinks.js
index 91af171f07e4c..1da145998fb80 100644
--- a/extensions/amp-smartlinks/0.1/test/test-amp-smartlinks.js
+++ b/extensions/amp-smartlinks/0.1/test/test-amp-smartlinks.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as DocumentReady from '../../../../src/document-ready';
+import * as DocumentReady from '../../../../src/core/document-ready';
 import * as LinkmateOptions from '../linkmate-options';
 import {AmpSmartlinks} from '../amp-smartlinks';
 import {LinkRewriterManager} from '../../../amp-skimlinks/0.1/link-rewriter/link-rewriter-manager';
@@ -135,14 +135,28 @@ describes.fakeWin(
         };
 
         ampSmartlinks = helpers.createAmpSmartlinks(options);
+        env.sandbox.stub(xhr, 'fetchJson');
+      });
 
+      it('should not call downstream methods with invalid configuration', () => {
         env.sandbox
           .stub(ampSmartlinks, 'getLinkmateOptions_')
-          .returns(Promise.resolve({'publisher_id': 999}));
-        env.sandbox.stub(xhr, 'fetchJson');
+          .returns(Promise.resolve(undefined));
+        env.sandbox.spy(ampSmartlinks, 'postPageImpression_');
+        env.sandbox.spy(ampSmartlinks, 'initLinkRewriter_');
+
+        return ampSmartlinks.buildCallback().then(() => {
+          env.ampdoc.whenFirstVisible().then(() => {
+            expect(ampSmartlinks.postPageImpression_.calledOnce).to.be.false;
+            expect(ampSmartlinks.initLinkRewriter_.calledOnce).to.be.false;
+          });
+        });
       });
 
       it('Should call postPageImpression_', () => {
+        env.sandbox
+          .stub(ampSmartlinks, 'getLinkmateOptions_')
+          .returns(Promise.resolve({'publisher_id': 999}));
         env.sandbox.spy(ampSmartlinks, 'postPageImpression_');
 
         return ampSmartlinks.buildCallback().then(() => {
@@ -153,6 +167,9 @@ describes.fakeWin(
       });
 
       it('Should call initLinkRewriter_', () => {
+        env.sandbox
+          .stub(ampSmartlinks, 'getLinkmateOptions_')
+          .returns(Promise.resolve({'publisher_id': 999}));
         env.sandbox.spy(ampSmartlinks, 'initLinkRewriter_');
 
         return ampSmartlinks.buildCallback().then(() => {
@@ -170,7 +187,6 @@ describes.fakeWin(
           'linkmate': '',
           'exclusive-links': '',
         };
-
         ampSmartlinks = helpers.createAmpSmartlinks(options);
       });
 
@@ -181,7 +197,7 @@ describes.fakeWin(
           .stub(ampSmartlinks, 'generateUUID_')
           .returns('acbacc4b-e171-4869-b32a-921f48659624');
         env.sandbox
-          .stub(env.ampdoc, 'getUrl')
+          .stub(ampSmartlinks, 'getLocationHref_')
           .returns('http://fakewebsite.example/');
 
         const mockPub = 999;
diff --git a/extensions/amp-smartlinks/0.1/test/test-linkmate.js b/extensions/amp-smartlinks/0.1/test/test-linkmate.js
index 00a88a987fcd3..a42559d25894c 100644
--- a/extensions/amp-smartlinks/0.1/test/test-linkmate.js
+++ b/extensions/amp-smartlinks/0.1/test/test-linkmate.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as DocumentReady from '../../../../src/document-ready';
+import * as DocumentReady from '../../../../src/core/document-ready';
 import {AmpSmartlinks} from '../amp-smartlinks';
 import {Linkmate} from '../linkmate';
 import {Services} from '../../../../src/services';
@@ -73,7 +73,7 @@ describes.fakeWin(
           publisherID: 999,
           linkAttribute: 'href',
         };
-        linkmate = new Linkmate(env.ampdoc, xhr, linkmateOptions);
+        linkmate = new Linkmate(env.ampdoc, xhr, linkmateOptions, env.win);
         anchorList = [
           {attributeName: 'href', link: 'http://fakelink.example'},
           {attributeName: 'href', link: 'http://fakelink2.example'},
@@ -408,12 +408,12 @@ describes.fakeWin(
           publisherID: 999,
           linkAttribute: 'href',
         };
-        linkmate = new Linkmate(env.ampdoc, xhr, linkmateOptions);
-        const envRoot = env.ampdoc.getRootNode();
-        envRoot.title = 'Fake Website Title';
-
+        linkmate = new Linkmate(env.ampdoc, xhr, linkmateOptions, env.win);
+        env.sandbox
+          .stub(linkmate, 'getEditName_')
+          .returns('Fake Website Title');
         env.sandbox
-          .stub(env.ampdoc, 'getUrl')
+          .stub(linkmate, 'getLocationHref_')
           .returns('http://fakewebsite.example/');
         env.sandbox.spy(linkmate, 'getEditInfo_');
 
diff --git a/extensions/amp-smartlinks/OWNERS b/extensions/amp-smartlinks/OWNERS
index ba13c92be44ca..48c6087f10db7 100644
--- a/extensions/amp-smartlinks/OWNERS
+++ b/extensions/amp-smartlinks/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-social-share/0.1/amp-social-share-config.js b/extensions/amp-social-share/0.1/amp-social-share-config.js
index 427d67caf3f8b..c402de5549086 100644
--- a/extensions/amp-social-share/0.1/amp-social-share-config.js
+++ b/extensions/amp-social-share/0.1/amp-social-share-config.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 
 /**
  * Get social share configurations by supported type.
diff --git a/extensions/amp-social-share/0.1/amp-social-share.css b/extensions/amp-social-share/0.1/amp-social-share.css
index 9aefab68c5b2c..bf27e1c8d51bf 100644
--- a/extensions/amp-social-share/0.1/amp-social-share.css
+++ b/extensions/amp-social-share/0.1/amp-social-share.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@import "../../../third_party/optimized-svg-icons/amp-social-share-svgs.css";
+@import '../../../third_party/optimized-svg-icons/amp-social-share-svgs.css';
 
 amp-social-share {
   background-repeat: no-repeat;
@@ -25,6 +25,11 @@ amp-social-share {
   position: relative;
 }
 
+amp-social-share:focus {
+  outline: #0389ff solid 2px;
+  outline-offset: 2px;
+}
+
 /**
  * Note: Attribute selectors were used initially here but we switched to using
  * class-based selector to style each type because of a bug on iOS Safari 8.
@@ -78,7 +83,7 @@ amp-social-share {
 
 /* SMS Styling */
 .amp-social-share-sms {
-  background-color: #CA2B63;
+  background-color: #ca2b63;
 }
 
 /* "system" styling */
diff --git a/extensions/amp-social-share/0.1/amp-social-share.js b/extensions/amp-social-share/0.1/amp-social-share.js
index 4e698371725ac..e70a60cac382e 100644
--- a/extensions/amp-social-share/0.1/amp-social-share.js
+++ b/extensions/amp-social-share/0.1/amp-social-share.js
@@ -15,18 +15,24 @@
  */
 
 import {CSS} from '../../../build/amp-social-share-0.1.css';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Services} from '../../../src/services';
-import {addParamsToUrl, parseQueryString} from '../../../src/url';
+import {addParamsToUrl} from '../../../src/url';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getDataParamsFromAttributes, openWindowDialog} from '../../../src/dom';
 import {getSocialConfig} from './amp-social-share-config';
+import {parseQueryString} from '../../../src/core/types/string/url';
 import {toggle} from '../../../src/style';
 
 const TAG = 'amp-social-share';
 
 class AmpSocialShare extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -54,11 +60,6 @@ class AmpSocialShare extends AMP.BaseElement {
     return true;
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   buildCallback() {
     const {element} = this;
@@ -118,6 +119,9 @@ class AmpSocialShare extends AMP.BaseElement {
     if (!element.hasAttribute('tabindex')) {
       element.setAttribute('tabindex', '0');
     }
+    if (!element.getAttribute('aria-label')) {
+      element.setAttribute('aria-label', `Share by ${typeAttr}`);
+    }
     element.addEventListener('click', () => this.handleClick_());
     element.addEventListener('keydown', this.handleKeyPress_.bind(this));
     element.classList.add(`amp-social-share-${typeAttr}`);
@@ -197,7 +201,9 @@ class AmpSocialShare extends AMP.BaseElement {
       devAssert(navigator.share);
       const dataStr = href.substr(href.indexOf('?'));
       const data = parseQueryString(dataStr);
-      navigator.share(data).catch((e) => {
+      // Spreading data into an Object since Chrome uses the Object prototype.
+      // TODO:(crbug.com/1123689): Remove this workaround once WebKit fix is released.
+      navigator.share({...data}).catch((e) => {
         user().warn(TAG, e.message, dataStr);
       });
     } else {
diff --git a/extensions/amp-social-share/0.1/amp-social-share.md b/extensions/amp-social-share/0.1/amp-social-share.md
new file mode 100644
index 0000000000000..2ddc58ca3964b
--- /dev/null
+++ b/extensions/amp-social-share/0.1/amp-social-share.md
@@ -0,0 +1,294 @@
+---
+$category@: ads-analytics
+formats:
+  - websites
+---
+
+<!---
+Copyright 2016 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.
+-->
+
+# amp-social-share
+
+## Usage
+
+The `amp-social-share` component displays a social share button for social platforms.
+
+{% call callout('Important', type='caution') %}
+Currently, none of the buttons generated by `amp-social-share` (including those for the pre-configured providers) have a label/accessible name that is exposed to assistive technologies (such as screen readers). Make sure to include an `aria-label` with a descriptive label, as otherwise these controls will just be announced as unlabelled "button" elements.
+{% endcall %}
+
+**Example: Basic social share button**
+
+The share button guesses some defaults for you for some pre-configured providers. It assumes that the current document canonical url is the URL you want to share and the page title is the text you want to share.
+
+```html
+<amp-social-share
+  type="twitter"
+  aria-label="Share on Twitter"
+></amp-social-share>
+```
+
+**Example: Passing parameters**
+
+When you want to pass parameters to the share endpoint, you can specify `data-param-<attribute>` that will be appended to the share endpoint.
+
+```html
+<amp-social-share
+  type="linkedin"
+  width="60"
+  height="44"
+  data-param-text="Hello world"
+  data-param-url="https://example.com/"
+  aria-label="Share on LinkedIn"
+>
+</amp-social-share>
+```
+
+Linkedin is one of the pre-configured providers, so you do not need to provide the `data-share-endpoint` attribute.
+
+### Pre-configured providers
+
+The `amp-social-share` component provides [some pre-configured providers](amp-social-share-config.js) that know their sharing endpoints as well as some default parameters.
+
+<table>
+  <tr>
+    <th class="col-twenty">Provider</th>
+    <th class="col-twenty">Type</th>
+    <th>Parameters</th>
+  </tr>
+  <tr>
+    <td><a href="https://developers.google.com/web/updates/2016/10/navigator-share">Web Share API</a> (triggers OS share dialog)</td>
+    <td><code>system</code></td>
+    <td>
+      <ul>
+        <li><code>data-param-text</code>: optional, defaults to: "Current page title"</li>
+        <li><code>data-mode</code>: optional, if set to <code>replace</code>, all other share options are removed.</li>
+      </ul>
+    </td>
+  </tr>
+  <tr>
+    <td>Email</td>
+    <td><code>email</code></td>
+    <td>
+      <ul>
+        <li><code>data-param-subject</code>: optional, defaults to: Current page title</li>
+        <li><code>data-param-body</code>: optional, defaults to: <code>rel=canonical</code> URL</li>
+        <li><code>data-param-recipient</code>: optional, defaults to: '' (empty string)</li>
+      </ul>
+    </td>
+  </tr>
+  <tr>
+    <td>Facebook</td>
+    <td><code>facebook</code></td>
+    <td>
+      <ul>
+       <li><code>data-param-app_id</code>: <strong>required</strong>, defaults to: none. This parameter is the Facebook <code>app_id</code> that's required for the <a href="https://developers.facebook.com/docs/sharing/reference/share-dialog">Facebook Share dialog</a>.</li>
+        <li><code>data-param-href</code>: optional, defaults to: <code>rel=canonical</code> URL</li>
+        <li><code>data-param-quote</code>: optional. Can be used to share a quote or text.</li>
+        </ul>
+    </td>
+  </tr>
+  <tr>
+    <td>LinkedIn</td>
+    <td><code>linkedin</code></td>
+    <td>
+      <ul>
+        <li><code>data-param-url</code>: optional, defaults to: <code>rel=canonical</code> URL</li>
+      </ul>
+    </td>
+  </tr>
+  </tr>
+  <tr>
+    <td>Pinterest</td>
+    <td><code>pinterest</code></td>
+    <td>
+      <ul>
+        <li><code>data-param-media</code>: optional (but highly recommended to be set), defaults to: none. Url for the media to be shared on Pinterest. If not set, the end user will be requested to upload a media by Pinterest.</li>
+        <li><code>data-param-url</code>: optional, defaults to: <code>rel=canonical</code> URL</li>
+        <li><code>data-param-description</code>: optional, defaults to: Current page title</li>
+      </ul>
+    </td>
+  </tr>
+  </tr>
+  <tr>
+    <td>Tumblr</td>
+    <td><code>tumblr</code></td>
+    <td>
+      <ul>
+        <li><code>data-param-url</code>: optional, defaults to: <code>rel=canonical</code> URL</li>
+        <li><code>data-param-text</code>: optional, defaults to: Current page title</li>
+      </ul>
+    </td>
+  </tr>
+  <tr>
+    <td>Twitter</td>
+    <td><code>twitter</code></td>
+    <td>
+      <ul>
+        <li><code>data-param-url</code>: optional, defaults to: <code>rel=canonical</code> URL</li>
+        <li><code>data-param-text</code>: optional, defaults to: Current page title</li>
+      </ul>
+    </td>
+  </tr>
+  <tr>
+    <td>Whatsapp</td>
+    <td><code>whatsapp</code></td>
+    <td>
+      <ul>
+        <li><code>data-param-text</code>: optional, defaults to: "Current page title - current page URL"</li>
+      </ul>
+    </td>
+  </tr>
+  <tr>
+    <td>LINE</td>
+    <td><code>line</code></td>
+    <td>
+      <ul>
+        <li><code>data-param-url</code>: optional, defaults to: <code>rel=canonical</code> URL</li>
+        <li><code>data-param-text</code>: optional, defaults to: Current page title</li>
+      </ul>
+    </td>
+  </tr>
+  <tr>
+    <td>SMS</td>
+    <td><code>sms</code></td>
+    <td>
+      <ul>
+        <li><code>data-param-body</code>: optional, defaults to: <code>rel=title - rel=canonical</code> URL</li></ul>
+    </td>
+  </tr>
+</table>
+
+### Non-configured providers
+
+In addition to pre-configured providers, you can use non-configured providers by specifying additional attributes in the `amp-social-share` component.
+
+**Example: Creating a share button for a non-configured provider**
+
+The following example creates a share button through Facebook Messenger by setting the `data-share-endpoint` attribute to the correct endpoint for the Facebook Messenger custom protocol.
+
+```html
+<amp-social-share
+  type="facebookmessenger"
+  data-share-endpoint="fb-messenger://share"
+  data-param-text="Check out this article: TITLE - CANONICAL_URL"
+  aria-label="Share on Facebook Messenger"
+>
+</amp-social-share>
+```
+
+As these providers are not pre-configured, you'll need to create the appropriate button image and styles for the provider.
+
+### Variable Substitution
+
+You can use [global AMP variables substitution](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md) in the `<amp-social-share>` element. In the example below, `TITLE` is substituted with the page title and `CANONICAL_URL` with the document's canonical URL.
+
+```html
+<amp-social-share
+  type="whatsapp"
+  data-param-text="Check out this article: TITLE - CANONICAL_URL"
+>
+</amp-social-share>
+```
+
+## Attributes
+
+### type (required)
+
+Selects a provider type. This is required for both pre-configured and non-configured providers.
+
+### data-target
+
+Specifies the target in which to open the target. The default is `_blank` for all cases other than email/SMS on iOS, in which case the target is set to `_top`.
+
+Please note that we only suggest using this override for email.
+
+### data-share-endpoint
+
+This attribute is required for non-configured providers.
+
+Some popular providers have pre-configured share endpoints. For details, see the Pre-configured Providers section. For non-configured providers, you'll need to specify the share endpoint.
+
+### data-param-\*
+
+All `data-param-*` prefixed attributes are turned into URL parameters and passed to the share endpoint.
+
+### aria-label
+
+By default, the `aria-label` attribute will be populated with `Share by type` where 'type' is the `type` attribute provided to the component. If a non-empty value is passed in to `aria-label` it will overwrite the default value.
+
+## Styling
+
+### Default Styles
+
+By default, `amp-social-share` includes some popular pre-configured providers. Buttons for these providers are styled with the provider's official color and logo. The default width is 60px, and the default height is 44px.
+
+{% call callout('Tip', type='success') %}
+Visit [AMP Start](https://ampstart.com/components#links-and-sharing) for responsive, pre-styled share links that you can use in your AMP pages.
+{% endcall %}
+
+### Custom Styles
+
+Sometimes you want to provide your own style. You can simply override the provided styles like the following:
+
+```css
+amp-social-share[type='twitter'] {
+  background: red;
+  background-image: url(datauri:svg/myownsvgicon);
+}
+```
+
+When customizing the style of an `amp-social-share` icon please ensure that the customized icon meets the branding guidelines set out by the provider (e.g Twitter, Facebook, etc.)
+
+## Accessibility
+
+### Indication of focus
+
+The `amp-social-share` element defaults to a blue outline as a visible focus indicator. It also defaults `tabindex=0` making it easy for a user to follow along as he or she tabs through multiple `amp-social-share` elements used together on a page.
+
+The default focus indicator is achieved with the following CSS rule-set.
+
+```css
+amp-social-share:focus {
+  outline: #0389ff solid 2px;
+  outline-offset: 2px;
+}
+```
+
+The default focus indicator can be overwritten by defining CSS styles for focus and including them within a `style` tag on an AMP HTML page. In the example below, the first CSS rule-set removes the focus indicator on all `amp-social-share` elements by setting the `outline` property to `none`. The second rule-set specifies a red outline (instead of the default blue) and also sets the `outline-offset` to be `3px` for all `amp-social-share` elements with the class `custom-focus`.
+
+```css
+amp-social-share:focus{
+  outline: none;
+}
+
+amp-social-share.custom-focus:focus {
+  outline: red solid 2px;
+  outline-offset: 3px;
+}
+```
+
+With these CSS rules, `amp-social-share` elements would not show the visible focus indicator unless they included the class `custom-focus` in which case they would have the red outlined indicator.
+
+### Color contrast
+
+Note that `amp-social-share` with a `type` value of `twitter`, `whatsapp`, or `line` will display a button with a foreground/background color combination that falls below the 3:1 threshold recommended for non-text content defined in [WCAG 2.1 SC 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html).
+
+Without sufficient contrast, content can be difficult to perceive and therefore difficult to identify. In extreme cases, content with low contrast may not be visible at all to people with colour perception impairments. In the case of the above share buttons, users may not be able to appropriately perceive/understand what the share controls are, what service they relate to.
+
+## Validation
+
+See [amp-social-share rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-social-share/validator-amp-social-share.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-social-share/0.1/storybook/Basic.amp.js b/extensions/amp-social-share/0.1/storybook/Basic.amp.js
index f22d80e0238ff..8d20ffa5c0577 100644
--- a/extensions/amp-social-share/0.1/storybook/Basic.amp.js
+++ b/extensions/amp-social-share/0.1/storybook/Basic.amp.js
@@ -16,75 +16,85 @@
 
 import * as Preact from '../../../../src/preact';
 import {select, text, withKnobs} from '@storybook/addon-knobs';
-import {storiesOf} from '@storybook/preact';
-import {withA11y} from '@storybook/addon-a11y';
-import withAmp from '../../../../build-system/tasks/storybook/amp-env/decorator.js';
+import {withAmp} from '@ampproject/storybook-addon';
 
-// eslint-disable-next-line
-storiesOf('amp-social-share v1', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withA11y)
-  .addDecorator(withAmp)
-  .addParameters({extensions: [{name: 'amp-social-share', version: 0.1}]})
-  .add('default', () => {
-    /*
-     * Knob and Component Details -
-     * amp-social-share allows the user to set various parameters to configure
-     * its behavior.  These parameters are controlled by storybook knobs and
-     * are summarized below:
-     *
-     * Key Configuration Parameters -
-     * type - This is a required attribute.  It configures a pre-configured set
-     *   of parameters needed to share with a particular social-media.  Most
-     *   notably, the share-endpoint is set by the type.  Configuration details
-     *   can be found in amp-social-share-config.js.  The user may also select
-     *   'custom' with this knob to manually specify the required parameters.
-     *   Setting any of the other attributes below overwrites the
-     *   pre-configured parameters defined by the type.
-     * data-share-endpoint - This is the api endpoint of the social-media with
-     *   which to share content.
-     * data-param-url - This is the url to be shared via social-media.  It
-     *   is defaulted to the canonical url of the current amp page in most
-     *   cases where it is used in the pre-configured types.
-     *
-     * Other Configuration Parameters -
-     * data-param-text - This is a text value included in the shared media.
-     * data-param-attribution - This allows the user to specify where the
-     *   share is attributed to.
-     * data-param-media - This is used to specify a path to media (image) to
-     *   be shared when sharing via Pinterest.
-     * data-param-app_id - This is used when sharing with Facebook and is
-     *   defaulted to an amp test app.
-     */
-    const typeConfigurations = [
-      'email',
-      'facebook',
-      'linkedin',
-      'pinterest',
-      'tumblr',
-      'twitter',
-      'whatsapp',
-      'line',
-      'sms',
-      'system',
-      'custom',
-    ];
-    const type = select('type', typeConfigurations, typeConfigurations[0]);
-    const customEndpoint = text('data-share-endpoint', undefined);
-    const paramUrl = text('data-param-url', undefined);
-    const paramText = text('data-param-text', undefined);
-    const paramAttribution = text('data-param-attribution', undefined);
-    const paramMedia = text('data-param-media', undefined);
-    const appId = text('data-param-app_id', '254325784911610');
-    return (
-      <amp-social-share
-        type={type}
-        data-share-endpoint={customEndpoint}
-        data-param-text={paramText}
-        data-param-url={paramUrl}
-        data-param-attribution={paramAttribution}
-        data-param-media={paramMedia}
-        data-param-app_id={appId}
-      ></amp-social-share>
-    );
-  });
+export default {
+  title: 'amp-social-share-0_1',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-social-share', version: 0.1}],
+  },
+};
+
+export const Default = () => {
+  /*
+   * Knob and Component Details -
+   * amp-social-share allows the user to set various parameters to configure
+   * its behavior.  These parameters are controlled by storybook knobs and
+   * are summarized below:
+   *
+   * Key Configuration Parameters -
+   * type - This is a required attribute.  It configures a pre-configured set
+   *   of parameters needed to share with a particular social-media.  Most
+   *   notably, the share-endpoint is set by the type.  Configuration details
+   *   can be found in amp-social-share-config.js.  The user may also select
+   *   'custom' with this knob to manually specify the required parameters.
+   *   Setting any of the other attributes below overwrites the
+   *   pre-configured parameters defined by the type.
+   * data-share-endpoint - This is the api endpoint of the social-media with
+   *   which to share content.
+   * data-param-url - This is the url to be shared via social-media.  It
+   *   is defaulted to the canonical url of the current amp page in most
+   *   cases where it is used in the pre-configured types.
+   *
+   * Other Configuration Parameters -
+   * data-param-text - This is a text value included in the shared media.
+   * data-param-attribution - This allows the user to specify where the
+   *   share is attributed to.
+   * data-param-media - This is used to specify a path to media (image) to
+   *   be shared when sharing via Pinterest.
+   * data-param-app_id - This is used when sharing with Facebook and is
+   *   defaulted to an amp test app.
+   */
+  const typeConfigurations = [
+    'email',
+    'facebook',
+    'linkedin',
+    'pinterest',
+    'tumblr',
+    'twitter',
+    'whatsapp',
+    'line',
+    'sms',
+    'system',
+    'custom',
+    undefined,
+  ];
+  const type = select('type', typeConfigurations, typeConfigurations[0]);
+  const customEndpoint = text('data-share-endpoint', null);
+  const paramUrl = text('data-param-url', null);
+  const paramText = text('data-param-text', null);
+  const paramAttribution = text('data-param-attribution', null);
+  const paramMedia = text('data-param-media', null);
+  const appId = text('data-param-app_id', '254325784911610');
+  const width = text('width', null);
+  const height = text('height', null);
+  const ariaLabel = text('aria-label', null);
+  return (
+    <amp-social-share
+      type={type}
+      data-share-endpoint={customEndpoint}
+      data-param-text={paramText}
+      data-param-url={paramUrl}
+      data-param-attribution={paramAttribution}
+      data-param-media={paramMedia}
+      data-param-app_id={appId}
+      width={width}
+      height={height}
+      aria-label={ariaLabel}
+    ></amp-social-share>
+  );
+};
+
+Default.storyName = 'default';
diff --git a/extensions/amp-social-share/0.1/test/test-amp-social-share.js b/extensions/amp-social-share/0.1/test/test-amp-social-share.js
index c02771b28fe73..56db48abc8d6b 100644
--- a/extensions/amp-social-share/0.1/test/test-amp-social-share.js
+++ b/extensions/amp-social-share/0.1/test/test-amp-social-share.js
@@ -15,8 +15,9 @@
  */
 
 import '../amp-social-share';
-import {Keys} from '../../../../src/utils/key-codes';
+import {Keys} from '../../../../src/core/constants/key-codes';
 import {Services} from '../../../../src/services';
+import {tryFocus} from '../../../../src/dom';
 
 const STRINGS = {
   'text': 'Hello world',
@@ -78,7 +79,7 @@ describes.realWin(
 
     function loaded(element) {
       return element
-        .build()
+        .buildInternal()
         .then(() => element.layoutCallback())
         .then(() => element);
     }
@@ -115,7 +116,7 @@ describes.realWin(
       });
     });
 
-    it('renders unconfigured providers if share endpoint provided', () => {
+    it('renders unconfigured providers if share endpoint provided', async () => {
       const share = doc.createElement('amp-social-share');
 
       share.setAttribute('type', 'unknown-provider');
@@ -125,20 +126,16 @@ describes.realWin(
       );
       share.setAttribute('data-param-text', 'check out: CANONICAL_URL');
       doc.body.appendChild(share);
-      return loaded(share).then((el) => {
-        expect(el.implementation_.params_.text).to.be.equal(
-          'check out: CANONICAL_URL'
-        );
-        expect(el.implementation_.href_).to.not.contain(
-          encodeURIComponent('CANONICAL_URL')
-        );
-        expect(el.implementation_.href_).to.contain(
-          encodeURIComponent('https://canonicalexample.com/')
-        );
-        expect(el.implementation_.shareEndpoint_).to.be.equal(
-          'https://exampleprovider.com/share/'
-        );
-      });
+      const el = await loaded(share);
+      const impl = await el.getImpl(false);
+      expect(impl.params_.text).to.be.equal('check out: CANONICAL_URL');
+      expect(impl.href_).to.not.contain(encodeURIComponent('CANONICAL_URL'));
+      expect(impl.href_).to.contain(
+        encodeURIComponent('https://canonicalexample.com/')
+      );
+      expect(impl.shareEndpoint_).to.be.equal(
+        'https://exampleprovider.com/share/'
+      );
     });
 
     it('does not render obsolete provider', () => {
@@ -147,31 +144,28 @@ describes.realWin(
       });
     });
 
-    it('renders twitter', () => {
+    it('renders twitter', async () => {
       const params = {
         'url': STRINGS['url'],
         'via': STRINGS['attribution'],
       };
-      return getShare('twitter', /* endpoint */ undefined, params).then(
-        (el) => {
-          expect(el.implementation_.params_.text).to.be.equal('TITLE');
-          expect(el.implementation_.params_.url).to.be.equal(
-            'https://example.com/'
-          );
-          expect(el.implementation_.params_.via).to.be.equal('AMPhtml');
-          expect(el.implementation_.shareEndpoint_).to.be.equal(
-            'https://twitter.com/intent/tweet'
-          );
-
-          expect(el.implementation_.href_).to.not.contain('TITLE');
-          expect(el.addEventListener).to.be.calledTwice;
-          expect(el.addEventListener).to.be.calledWith('click');
-          expect(el.addEventListener).to.be.calledWith('keydown');
-        }
+      const el = await getShare('twitter', /* endpoint */ undefined, params);
+      const impl = await el.getImpl(false);
+
+      expect(impl.params_.text).to.be.equal('TITLE');
+      expect(impl.params_.url).to.be.equal('https://example.com/');
+      expect(impl.params_.via).to.be.equal('AMPhtml');
+      expect(impl.shareEndpoint_).to.be.equal(
+        'https://twitter.com/intent/tweet'
       );
+
+      expect(impl.href_).to.not.contain('TITLE');
+      expect(el.addEventListener).to.be.calledTwice;
+      expect(el.addEventListener).to.be.calledWith('click');
+      expect(el.addEventListener).to.be.calledWith('keydown');
     });
 
-    it('adds a default value for url', () => {
+    it('adds a default value for url', async () => {
       const share = doc.createElement('amp-social-share');
 
       share.setAttribute('type', 'twitter');
@@ -179,175 +173,207 @@ describes.realWin(
       share.setAttribute('height', 44);
 
       doc.body.appendChild(share);
-      return loaded(share).then((el) => {
-        expect(el.implementation_.params_.url).to.be.equal('CANONICAL_URL');
-        expect(el.implementation_.href_).to.not.contain(
-          encodeURIComponent('CANONICAL_URL')
-        );
-        expect(el.implementation_.href_).to.contain(
-          encodeURIComponent('https://canonicalexample.com/')
-        );
-        expect(el.implementation_.shareEndpoint_).to.be.equal(
-          'https://twitter.com/intent/tweet'
-        );
-      });
+      const el = await loaded(share);
+      const impl = await el.getImpl(false);
+      expect(impl.params_.url).to.be.equal('CANONICAL_URL');
+      expect(impl.href_).to.not.contain(encodeURIComponent('CANONICAL_URL'));
+      expect(impl.href_).to.contain(
+        encodeURIComponent('https://canonicalexample.com/')
+      );
+      expect(impl.shareEndpoint_).to.be.equal(
+        'https://twitter.com/intent/tweet'
+      );
     });
 
-    it('opens share window in _blank', () => {
-      return getShare('twitter').then((el) => {
-        el.implementation_.handleClick_();
-        expect(el.implementation_.win.open).to.be.calledOnce;
-        expect(el.implementation_.win.open).to.be.calledWith(
-          'https://twitter.com/intent/tweet?text=doc%20title&' +
-            'url=https%3A%2F%2Fcanonicalexample.com%2F',
-          '_blank',
-          'resizable,scrollbars,width=640,height=480'
-        );
-      });
+    it('adds a default value for aria-label', async () => {
+      const share = doc.createElement('amp-social-share');
+
+      share.setAttribute('type', 'twitter');
+      share.setAttribute('width', 60);
+      share.setAttribute('height', 44);
+
+      doc.body.appendChild(share);
+      const el = await loaded(share);
+      expect(el.getAttribute('aria-label')).to.be.equal('Share by twitter');
+    });
+
+    it('overwrites default aria-label value when a non-empty value is provided', async () => {
+      const share = doc.createElement('amp-social-share');
+
+      share.setAttribute('type', 'twitter');
+      share.setAttribute('width', 60);
+      share.setAttribute('height', 44);
+      share.setAttribute('aria-label', 'test value');
+
+      doc.body.appendChild(share);
+      const el = await loaded(share);
+      expect(el.getAttribute('aria-label')).to.be.equal('test value');
     });
 
-    it('opens mailto: window in _self', () => {
+    it('opens share window in _blank', async () => {
+      const el = await getShare('twitter');
+      const impl = await el.getImpl(false);
+
+      impl.handleClick_();
+      expect(impl.win.open).to.be.calledOnce;
+      expect(impl.win.open).to.be.calledWith(
+        'https://twitter.com/intent/tweet?text=doc%20title&' +
+          'url=https%3A%2F%2Fcanonicalexample.com%2F',
+        '_blank',
+        'resizable,scrollbars,width=640,height=480'
+      );
+    });
+
+    it('opens mailto: window in _self', async () => {
       const params = {
         'recipient': 'sample@xyz.com',
       };
-      return getShare('email', undefined, params, '_self').then((el) => {
-        el.implementation_.handleClick_();
-        expect(el.implementation_.win.open).to.be.calledOnce;
-        expect(el.implementation_.win.open).to.be.calledWith(
-          'mailto:sample%40xyz.com?subject=doc%20title&' +
-            'body=https%3A%2F%2Fcanonicalexample.com%2F' +
-            '&recipient=sample%40xyz.com',
-          '_self',
-          'resizable,scrollbars,width=640,height=480'
-        );
-      });
+      const el = await getShare('email', undefined, params, '_self');
+      const impl = await el.getImpl(false);
+
+      impl.handleClick_();
+      expect(impl.win.open).to.be.calledOnce;
+      expect(impl.win.open).to.be.calledWith(
+        'mailto:sample%40xyz.com?subject=doc%20title&' +
+          'body=https%3A%2F%2Fcanonicalexample.com%2F' +
+          '&recipient=sample%40xyz.com',
+        '_self',
+        'resizable,scrollbars,width=640,height=480'
+      );
     });
 
-    it('opens mailto: window in _top on iOS Safari with recipient', () => {
+    it('opens mailto: window in _top on iOS Safari with recipient', async () => {
       const params = {
         'recipient': 'sample@xyz.com',
       };
       isIos = true;
       isSafari = true;
-      return getShare('email', undefined, params, '_top').then((el) => {
-        el.implementation_.handleClick_();
-        expect(el.implementation_.win.open).to.be.calledOnce;
-        expect(el.implementation_.win.open).to.be.calledWith(
-          'mailto:sample%40xyz.com?subject=doc%20title&' +
-            'body=https%3A%2F%2Fcanonicalexample.com%2F' +
-            '&recipient=sample%40xyz.com',
-          '_top',
-          'resizable,scrollbars,width=640,height=480'
-        );
-      });
+      const el = await getShare('email', undefined, params, '_top');
+      const impl = await el.getImpl(false);
+
+      impl.handleClick_();
+      expect(impl.win.open).to.be.calledOnce;
+      expect(impl.win.open).to.be.calledWith(
+        'mailto:sample%40xyz.com?subject=doc%20title&' +
+          'body=https%3A%2F%2Fcanonicalexample.com%2F' +
+          '&recipient=sample%40xyz.com',
+        '_top',
+        'resizable,scrollbars,width=640,height=480'
+      );
     });
 
     it(
       'opens mailto: window in _top on iOS Safari with recipient even if user ' +
         'attempts to override with `data-target`',
-      () => {
+      async () => {
         const params = {
           'recipient': 'sample@xyz.com',
         };
         isIos = true;
         isSafari = true;
-        return getShare('email', undefined, params, '_self').then((el) => {
-          el.implementation_.handleClick_();
-          expect(el.implementation_.win.open).to.be.calledOnce;
-          expect(el.implementation_.win.open).to.be.calledWith(
-            'mailto:sample%40xyz.com?subject=doc%20title&' +
-              'body=https%3A%2F%2Fcanonicalexample.com%2F' +
-              '&recipient=sample%40xyz.com',
-            '_top',
-            'resizable,scrollbars,width=640,height=480'
-          );
-        });
+        const el = await getShare('email', undefined, params, '_self');
+        const impl = await el.getImpl(false);
+
+        impl.handleClick_();
+        expect(impl.win.open).to.be.calledOnce;
+        expect(impl.win.open).to.be.calledWith(
+          'mailto:sample%40xyz.com?subject=doc%20title&' +
+            'body=https%3A%2F%2Fcanonicalexample.com%2F' +
+            '&recipient=sample%40xyz.com',
+          '_top',
+          'resizable,scrollbars,width=640,height=480'
+        );
       }
     );
 
-    it('opens mailto: window in _top on iOS Safari without recipient', () => {
+    it('opens mailto: window in _top on iOS Safari without recipient', async () => {
       isIos = true;
       isSafari = true;
-      return getShare('email').then((el) => {
-        el.implementation_.handleClick_();
-        expect(el.implementation_.win.open).to.be.calledOnce;
-        expect(el.implementation_.win.open).to.be.calledWith(
-          'mailto:?subject=doc%20title&' +
-            'body=https%3A%2F%2Fcanonicalexample.com%2F&recipient=',
-          '_top',
-          'resizable,scrollbars,width=640,height=480'
-        );
-      });
+      const el = await getShare('email');
+      const impl = await el.getImpl(false);
+
+      impl.handleClick_();
+      expect(impl.win.open).to.be.calledOnce;
+      expect(impl.win.open).to.be.calledWith(
+        'mailto:?subject=doc%20title&' +
+          'body=https%3A%2F%2Fcanonicalexample.com%2F&recipient=',
+        '_top',
+        'resizable,scrollbars,width=640,height=480'
+      );
     });
 
-    it('opens mailto: window in _top on iOS Webview with recipient', () => {
+    it('opens mailto: window in _top on iOS Webview with recipient', async () => {
       const params = {
         'recipient': 'sample@xyz.com',
       };
       isIos = true;
       isSafari = false;
-      return getShare('email', undefined, params, '_top').then((el) => {
-        el.implementation_.handleClick_();
-        expect(el.implementation_.win.open).to.be.calledOnce;
-        expect(el.implementation_.win.open).to.be.calledWith(
-          'mailto:sample%40xyz.com?subject=doc%20title&' +
-            'body=https%3A%2F%2Fcanonicalexample.com%2F' +
-            '&recipient=sample%40xyz.com',
-          '_top',
-          'resizable,scrollbars,width=640,height=480'
-        );
-      });
+      const el = await getShare('email', undefined, params, '_top');
+      const impl = await el.getImpl(false);
+
+      impl.handleClick_();
+      expect(impl.win.open).to.be.calledOnce;
+      expect(impl.win.open).to.be.calledWith(
+        'mailto:sample%40xyz.com?subject=doc%20title&' +
+          'body=https%3A%2F%2Fcanonicalexample.com%2F' +
+          '&recipient=sample%40xyz.com',
+        '_top',
+        'resizable,scrollbars,width=640,height=480'
+      );
     });
 
-    it('opens sms: window in _top on iOS Safari', () => {
+    it('opens sms: window in _top on iOS Safari', async () => {
       isIos = true;
       isSafari = true;
-      return getShare('sms').then((el) => {
-        el.implementation_.handleClick_();
-        expect(el.implementation_.win.open).to.be.calledOnce;
-        expect(el.implementation_.win.open).to.be.calledWith(
-          'sms:?&body=doc%20title%20-%20https%3A%2F%2Fcanonicalexample.com%2F',
-          '_top',
-          'resizable,scrollbars,width=640,height=480'
-        );
-      });
+      const el = await getShare('sms');
+      const impl = await el.getImpl(false);
+
+      impl.handleClick_();
+      expect(impl.win.open).to.be.calledOnce;
+      expect(impl.win.open).to.be.calledWith(
+        'sms:?&body=doc%20title%20-%20https%3A%2F%2Fcanonicalexample.com%2F',
+        '_top',
+        'resizable,scrollbars,width=640,height=480'
+      );
     });
 
-    it('opens sms: window in _top on iOS Webview', () => {
+    it('opens sms: window in _top on iOS Webview', async () => {
       isIos = true;
       isSafari = false;
-      return getShare('sms').then((el) => {
-        el.implementation_.handleClick_();
-        expect(el.implementation_.win.open).to.be.calledOnce;
-        expect(el.implementation_.win.open).to.be.calledWith(
-          'sms:?&body=doc%20title%20-%20https%3A%2F%2Fcanonicalexample.com%2F',
-          '_top',
-          'resizable,scrollbars,width=640,height=480'
-        );
-      });
+      const el = await getShare('sms');
+      const impl = await el.getImpl(false);
+
+      impl.handleClick_();
+      expect(impl.win.open).to.be.calledOnce;
+      expect(impl.win.open).to.be.calledWith(
+        'sms:?&body=doc%20title%20-%20https%3A%2F%2Fcanonicalexample.com%2F',
+        '_top',
+        'resizable,scrollbars,width=640,height=480'
+      );
     });
 
-    it('should handle key presses', () => {
-      return getShare('twitter').then((el) => {
-        const nonActivationEvent = {
-          preventDefault: () => {},
-          key: Keys.RIGHT_ARROW,
-        };
-        const activationEvent = {
-          preventDefault: () => {},
-          key: Keys.SPACE,
-        };
-        el.implementation_.handleKeyPress_(nonActivationEvent);
-        expect(el.implementation_.win.open).to.not.have.been.called;
-        el.implementation_.handleKeyPress_(activationEvent);
-        expect(el.implementation_.win.open).to.be.calledOnce;
-        expect(el.implementation_.win.open).to.be.calledWith(
-          'https://twitter.com/intent/tweet?text=doc%20title&' +
-            'url=https%3A%2F%2Fcanonicalexample.com%2F',
-          '_blank',
-          'resizable,scrollbars,width=640,height=480'
-        );
-      });
+    it('should handle key presses', async () => {
+      const el = await getShare('twitter');
+      const impl = await el.getImpl(false);
+
+      const nonActivationEvent = {
+        preventDefault: () => {},
+        key: Keys.RIGHT_ARROW,
+      };
+      const activationEvent = {
+        preventDefault: () => {},
+        key: Keys.SPACE,
+      };
+      impl.handleKeyPress_(nonActivationEvent);
+      expect(impl.win.open).to.not.have.been.called;
+      impl.handleKeyPress_(activationEvent);
+      expect(impl.win.open).to.be.calledOnce;
+      expect(impl.win.open).to.be.calledWith(
+        'https://twitter.com/intent/tweet?text=doc%20title&' +
+          'url=https%3A%2F%2Fcanonicalexample.com%2F',
+        '_blank',
+        'resizable,scrollbars,width=640,height=480'
+      );
     });
 
     it('has tabindex set to 0 by default', () => {
@@ -356,6 +382,31 @@ describes.realWin(
       });
     });
 
+    it('uses custom CSS when element is focused', async () => {
+      const share = doc.createElement('amp-social-share');
+
+      share.setAttribute('type', 'twitter');
+      share.setAttribute('width', 60);
+      share.setAttribute('height', 44);
+
+      doc.body.appendChild(share);
+
+      const el = await loaded(share);
+      expect(win.getComputedStyle(el)['outline']).to.equal(
+        'rgb(0, 0, 0) none 0px'
+      );
+      expect(win.getComputedStyle(el)['outline-offset']).to.equal('0px');
+
+      tryFocus(el);
+      expect(doc.activeElement).to.equal(el);
+
+      // updated styles after focusing on element
+      expect(win.getComputedStyle(el)['outline']).to.equal(
+        'rgb(3, 137, 255) solid 2px'
+      );
+      expect(win.getComputedStyle(el)['outline-offset']).to.equal('2px');
+    });
+
     describe('[type=system]', () => {
       it('should not throw if navigator.share fails', async () => {
         Object.defineProperty(env.win, 'navigator', {
diff --git a/extensions/amp-social-share/1.0/amp-social-share-config.js b/extensions/amp-social-share/1.0/amp-social-share-config.js
deleted file mode 100644
index 3af97cc49860c..0000000000000
--- a/extensions/amp-social-share/1.0/amp-social-share-config.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {dict} from '../../../src/utils/object';
-
-/**
- * Get social share configurations by supported type.
- * @param  {string} type
- * @return {!JsonObject}
- */
-export function getSocialConfig(type) {
-  return BUILTINS[type];
-}
-
-/**
- * @type {!JsonObject}
- */
-const BUILTINS = dict({
-  'twitter': {
-    'shareEndpoint': 'https://twitter.com/intent/tweet',
-    'defaultParams': {
-      'text': 'TITLE',
-      'url': 'CANONICAL_URL',
-    },
-  },
-  'facebook': {
-    'shareEndpoint': 'https://www.facebook.com/dialog/share',
-    'defaultParams': {
-      'href': 'CANONICAL_URL',
-    },
-  },
-  'pinterest': {
-    'shareEndpoint': 'https://www.pinterest.com/pin/create/button/',
-    'defaultParams': {
-      'url': 'CANONICAL_URL',
-      'description': 'TITLE',
-    },
-  },
-  'linkedin': {
-    'shareEndpoint': 'https://www.linkedin.com/shareArticle',
-    'defaultParams': {
-      'url': 'CANONICAL_URL',
-      'mini': 'true',
-    },
-  },
-  'email': {
-    'bindings': ['recipient'],
-    'shareEndpoint': 'mailto:RECIPIENT',
-    'defaultParams': {
-      'subject': 'TITLE',
-      'body': 'CANONICAL_URL',
-      'recipient': '',
-    },
-  },
-  'tumblr': {
-    'shareEndpoint': 'https://www.tumblr.com/share/link',
-    'defaultParams': {
-      'name': 'TITLE',
-      'url': 'CANONICAL_URL',
-    },
-  },
-  'whatsapp': {
-    'shareEndpoint': 'https://api.whatsapp.com/send',
-    'defaultParams': {
-      'text': 'TITLE - CANONICAL_URL',
-    },
-  },
-  'line': {
-    'shareEndpoint': 'https://social-plugins.line.me/lineit/share',
-    'defaultParams': {
-      'text': 'TITLE',
-      'url': 'CANONICAL_URL',
-    },
-  },
-  'sms': {
-    'shareEndpoint': 'sms:',
-    'defaultParams': {
-      'body': 'TITLE - CANONICAL_URL',
-    },
-  },
-  'system': {
-    'shareEndpoint': 'navigator-share:',
-    'defaultParams': {
-      'text': 'TITLE',
-      'url': 'CANONICAL_URL',
-    },
-  },
-});
diff --git a/extensions/amp-social-share/1.0/amp-social-share.css b/extensions/amp-social-share/1.0/amp-social-share.css
new file mode 100644
index 0000000000000..8f217c68cd8a7
--- /dev/null
+++ b/extensions/amp-social-share/1.0/amp-social-share.css
@@ -0,0 +1,112 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/*
+ * Pre-upgrade:
+ * - display:inline-block element
+ * - size-defined element
+ * - predefined default size
+ */
+amp-social-share {
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  width: 60px;
+  height: 44px;
+}
+
+/* Pre-upgrade: size-defining element - hide children until build. */
+amp-social-share:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc) {
+  display: none;
+  content-visibility: hidden;
+}
+
+/**
+  * Note: Attribute selectors were used initially here but we switched to using
+  * class-based selector to style each type because of a bug on iOS Safari 8.
+  * See https://github.com/ampproject/amphtml/issues/4277 for more details.
+  */
+
+amp-social-share:focus {
+  outline: #0389ff solid 2px;
+  outline-offset: 2px;
+}
+
+amp-social-share::part(button):focus {
+  outline: none !important;
+  outline-offset: 0 !important;
+}
+
+/* Twitter Styling */
+.amp-social-share-twitter {
+  color: #fff;
+  background-color: #1da1f2;
+}
+
+/* Facebook Styling */
+.amp-social-share-facebook {
+  color: #1877f2;
+  background-color: #fff;
+}
+
+/* Pinterest Styling */
+.amp-social-share-pinterest {
+  color: #e60023;
+  background-color: #fff;
+}
+
+/* LinkedIn Styling */
+.amp-social-share-linkedin {
+  color: #fff;
+  background-color: #0a66c2;
+}
+
+/* Tumblr Styling */
+.amp-social-share-tumblr {
+  color: #fff;
+  background-color: #001935;
+}
+
+/* Email Styling */
+.amp-social-share-email {
+  color: #fff;
+  background-color: #000000;
+}
+
+/* Whatsapp Styling */
+.amp-social-share-whatsapp {
+  color: #fff;
+  background-color: #25d366;
+}
+
+/* line Styling */
+.amp-social-share-line {
+  color: #fff;
+  background-color: #00b900;
+}
+
+/* SMS Styling */
+.amp-social-share-sms {
+  color: #fff;
+  background-color: #000000;
+}
+
+/* "system" styling */
+.amp-social-share-system {
+  color: #fff;
+  background-color: #000000;
+}
diff --git a/extensions/amp-social-share/1.0/amp-social-share.js b/extensions/amp-social-share/1.0/amp-social-share.js
index 07b6368d771e5..32d42cd613945 100644
--- a/extensions/amp-social-share/1.0/amp-social-share.js
+++ b/extensions/amp-social-share/1.0/amp-social-share.js
@@ -13,29 +13,40 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import {CSS} from '../../../build/amp-social-share-1.0.css';
 import {Layout} from '../../../src/layout';
 import {PreactBaseElement} from '../../../src/preact/base-element';
 import {Services} from '../../../src/services';
 import {SocialShare} from './social-share';
 import {addParamsToUrl} from '../../../src/url';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getDataParamsFromAttributes} from '../../../src/dom';
-import {getSocialConfig} from './amp-social-share-config';
+import {getSocialConfig} from './social-share-config';
 import {isExperimentOn} from '../../../src/experiments';
+import {parseQueryString} from '../../../src/core/types/string/url';
+import {toWin} from '../../../src/types';
 import {toggle} from '../../../src/style';
-import {user, userAssert} from '../../../src/log';
+import {userAssert} from '../../../src/log';
 
 /** @const {string} */
 const TAG = 'amp-social-share';
 
 /**
  * @private
- * @param {string} type
- * @param {!../../../src/service/viewer-interface.ViewerInterface} viewer
- * @param {!../../../src/service/platform-impl.Platform} platform
+ * @param {!Element} element
  * @return {!JsonObject|undefined}
  */
-const getTypeConfigOrUndefined = (type, viewer, platform) => {
+const getTypeConfigOrUndefined = (element) => {
+  const viewer = Services.viewerForDoc(element);
+  const platform = Services.platformFor(
+    toWin(element.ownerDocument.defaultView)
+  );
+  const type = userAssert(
+    element.getAttribute('type'),
+    'The type attribute is required. %s',
+    element
+  );
   if (type === 'system') {
     // navigator.share unavailable
     if (!systemShareSupported(viewer, platform)) {
@@ -52,12 +63,7 @@ const getTypeConfigOrUndefined = (type, viewer, platform) => {
       return;
     }
   }
-  const typeConfig = getSocialConfig(type) || dict();
-  if (typeConfig['obsolete']) {
-    user().warn(TAG, `Skipping obsolete share button ${type}`);
-    return;
-  }
-  return typeConfig;
+  return /** @type {!JsonObject} */ (getSocialConfig(type)) || dict();
 };
 
 /**
@@ -74,44 +80,99 @@ const systemShareSupported = (viewer, platform) => {
   return 'share' in navigator && !isChromeWebview;
 };
 
+/**
+ * @private
+ * @param {!Element} element
+ * @param {!Array<MutationRecord>} mutations
+ * @param {string} prevTypeValue
+ * @return {!JsonObject|undefined}
+ */
+const updateTypeConfig = (element, mutations, prevTypeValue) => {
+  let typeUpdated;
+  let mutatedEligibleAttribute;
+
+  // Check all mutations since we want to catch any 'data-param-*' attributes
+  mutations.forEach((mutation) => {
+    if (
+      mutation.attributeName === 'type' ||
+      mutation.attributeName === 'data-target' ||
+      mutation.attributeName === 'data-share-endpoint' ||
+      (mutation.attributeName && mutation.attributeName.includes('data-param-'))
+    ) {
+      mutatedEligibleAttribute = true;
+      typeUpdated = typeUpdated || mutation.attributeName === 'type';
+    }
+  });
+
+  // If no matching attribute changes exit and do nothing
+  if (!mutatedEligibleAttribute) {
+    return;
+  }
+
+  // If 'type' attribute was changed, remove the class of the old 'type'
+  if (typeUpdated) {
+    element.classList.remove(`amp-social-share-${prevTypeValue}`);
+  }
+
+  const typeConfig = getTypeConfigOrUndefined(element);
+  if (!typeConfig) {
+    toggle(element, false);
+    return;
+  }
+  element.classList.add(`amp-social-share-${element.getAttribute('type')}`);
+  return typeConfig;
+};
+
 class AmpSocialShare extends PreactBaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {?string} */
+    this.ampSocialShareType_ = null;
+  }
+
   /** @override */
   init() {
-    const viewer = Services.viewerForDoc(this.element);
-    const platform = Services.platformFor(window);
-    const type = userAssert(
-      this.element.getAttribute('type'),
-      'The type attribute is required. %s',
-      this.element
-    );
-    userAssert(
-      !/\s/.test(type),
-      'Space characters are not allowed in type attribute value. %s',
-      this.element
-    );
-    const typeConfig = getTypeConfigOrUndefined(type, viewer, platform);
+    const typeConfig = getTypeConfigOrUndefined(this.element);
     // Hide/ignore component if typeConfig is undefined
     if (!typeConfig) {
       toggle(this.element, false);
-      user().warn(TAG, `Skipping obsolete share button ${type}`);
       return;
     }
-    this.renderWithHrefAndTarget_(typeConfig, platform);
+    this.ampSocialShareType_ = this.element.getAttribute('type');
+    this.element.classList.add(`amp-social-share-${this.ampSocialShareType_}`);
+
+    this.renderWithHrefAndTarget_(typeConfig);
     const responsive =
       this.element.getAttribute('layout') === Layout.RESPONSIVE && '100%';
     return dict({
       'width': responsive || this.element.getAttribute('width'),
       'height': responsive || this.element.getAttribute('height'),
-      'href': null,
-      'target': null,
+      'color': 'currentColor',
+      'background': 'inherit',
     });
   }
 
+  /** @override */
+  mutationObserverCallback(mutations) {
+    const typeConfig = updateTypeConfig(
+      this.element,
+      mutations,
+      this.ampSocialShareType_
+    );
+    if (typeConfig) {
+      this.ampSocialShareType_ = this.element.getAttribute('type');
+      this.renderWithHrefAndTarget_(typeConfig);
+    }
+  }
+
   /** @override */
   isLayoutSupported() {
     userAssert(
-      isExperimentOn(this.win, 'amp-social-share-v2'),
-      'expected amp-social-share-v2 experiment to be enabled'
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-social-share'),
+      'expected global "bento" or specific "bento-social-share" experiment to be enabled'
     );
     return true;
   }
@@ -121,55 +182,68 @@ class AmpSocialShare extends PreactBaseElement {
    * Then triggers render on the Component with updated props.
    * @private
    * @param {!JsonObject} typeConfig
-   * @param {!../../../src/service/platform-impl.Platform} platform
    */
-  renderWithHrefAndTarget_(typeConfig, platform) {
-    const shareEndpoint = user().assertString(
-      this.element.getAttribute('data-share-endpoint') ||
-        typeConfig['shareEndpoint'],
-      'The data-share-endpoint attribute is required. %s'
-    );
-    const urlParams = getDataParamsFromAttributes(this.element);
-    Object.assign(urlParams, typeConfig['defaultParams']);
+  renderWithHrefAndTarget_(typeConfig) {
+    const customEndpoint = this.element.getAttribute('data-share-endpoint');
+    const shareEndpoint = customEndpoint || typeConfig['shareEndpoint'] || '';
+    const urlParams = typeConfig['defaultParams'] || dict();
+    Object.assign(urlParams, getDataParamsFromAttributes(this.element));
     const hrefWithVars = addParamsToUrl(shareEndpoint, urlParams);
     const urlReplacements = Services.urlReplacementsForDoc(this.element);
-    const bindingVars = typeConfig['bindings'];
+    const bindingVars = /** @type {?Array<string>} */ (typeConfig['bindings']);
     const bindings = {};
     if (bindingVars) {
-      /** @type {!Array} */ (bindingVars).forEach((name) => {
+      bindingVars.forEach((name) => {
         const bindingName = name.toUpperCase();
         bindings[bindingName] = urlParams[name];
       });
     }
-    urlReplacements.expandUrlAsync(hrefWithVars, bindings).then((result) => {
-      let href = result;
-      // mailto:, sms: protocols breaks when opened in _blank on iOS Safari
-      const {protocol} = Services.urlForDoc(this.element).parse(href);
-      const isMailTo = protocol === 'mailto:';
-      const isSms = protocol === 'sms:';
-      const target =
-        platform.isIos() && (isMailTo || isSms)
-          ? '_top'
-          : this.element.getAttribute('data-target') || '_blank';
-      if (isSms) {
-        // http://stackoverflow.com/a/19126326
-        // This code path seems to be stable for both iOS and Android.
-        href = href.replace('?', '?&');
-      }
-      this.mutateProps(dict({'href': href, 'target': target}));
-    });
+    urlReplacements
+      .expandUrlAsync(hrefWithVars, bindings)
+      .then((expandedUrl) => {
+        const {search} = Services.urlForDoc(this.element).parse(expandedUrl);
+        const target = this.element.getAttribute('data-target') || '_blank';
+
+        if (customEndpoint) {
+          this.mutateProps(
+            dict({
+              'endpoint': expandedUrl,
+              'params': null,
+              'target': target,
+            })
+          );
+        } else {
+          this.mutateProps(
+            dict({
+              'endpoint': null,
+              'params': parseQueryString(search),
+              'target': target,
+            })
+          );
+        }
+      });
   }
 }
 
 /** @override */
 AmpSocialShare['Component'] = SocialShare;
 
+/** @override */
+AmpSocialShare['layoutSizeDefined'] = true;
+
+/** @override */
+AmpSocialShare['delegatesFocus'] = true;
+
 /** @override */
 AmpSocialShare['props'] = {
+  'children': {passthroughNonEmpty: true},
   'tabIndex': {attr: 'tabindex'},
   'type': {attr: 'type'},
 };
 
+/** @override */
+AmpSocialShare['usesShadowDom'] = true;
+
 AMP.extension(TAG, '1.0', (AMP) => {
-  AMP.registerElement(TAG, AmpSocialShare);
+  AMP.registerElement(TAG, AmpSocialShare, CSS);
 });
diff --git a/extensions/amp-social-share/1.0/social-share-config.js b/extensions/amp-social-share/1.0/social-share-config.js
new file mode 100644
index 0000000000000..3fca0229b6dc0
--- /dev/null
+++ b/extensions/amp-social-share/1.0/social-share-config.js
@@ -0,0 +1,146 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {dict} from '../../../src/core/types/object';
+
+/**
+ * Get social share configurations by supported type.
+ * @param  {string} type
+ * @return {SocialShareConfigDef|undefined}
+ */
+export function getSocialConfig(type) {
+  return BUILTINS[type];
+}
+
+/**
+ * The SocialShareDef.Config contains the configuration data for pre-configured
+ * types (i.e. 'twitter', 'facebook') for the Amp Social Share component.  The
+ * config data contains the following properties:
+ *   shareEndpoint {string} - The base API endpoint for sharing to the
+ *     specified social media type.
+ *   defaultParams {Object} - Parameters to be appended to the end of the
+ *     shareEndpoint as query parameters.  The values in this object are used
+ *     as binding keys which are resolved by the AMP framework.
+ *   defaultColor {string} - Default color code for this social media type.
+ *   defaultBackgroundColor {string} - Default background color code for this
+ *     social media type.
+ *   bindings {?Array<string>} - Used for email, allows passing in an
+ *     attribute that can be used in the endpoint, but not as a search param
+ *
+ * @typedef {{
+ *   shareEndpont: string,
+ *   defaultParams: Object<string, string>,
+ *   defaultColor: string,
+ *   defaultBackgroundColor: string,
+ *   bindings: (!Array<string>|undefined),
+ * }}
+ */
+let SocialShareConfigDef;
+
+/**
+ * @type {Object<string, SocialShareConfigDef>}
+ */
+const BUILTINS = {
+  'twitter': {
+    shareEndpoint: 'https://twitter.com/intent/tweet',
+    defaultParams: dict({
+      'text': 'TITLE',
+      'url': 'CANONICAL_URL',
+    }),
+    defaultColor: 'ffffff',
+    defaultBackgroundColor: '1da1f2',
+  },
+  'facebook': {
+    shareEndpoint: 'https://www.facebook.com/dialog/share',
+    defaultParams: dict({
+      'href': 'CANONICAL_URL',
+    }),
+    defaultColor: '1877f2',
+    defaultBackgroundColor: 'ffffff',
+  },
+  'pinterest': {
+    shareEndpoint: 'https://www.pinterest.com/pin/create/button/',
+    defaultParams: dict({
+      'url': 'CANONICAL_URL',
+      'description': 'TITLE',
+    }),
+    defaultColor: 'e60023',
+    defaultBackgroundColor: 'ffffff',
+  },
+  'linkedin': {
+    shareEndpoint: 'https://www.linkedin.com/shareArticle',
+    defaultParams: dict({
+      'url': 'CANONICAL_URL',
+      'mini': 'true',
+    }),
+    'defaultColor': 'ffffff',
+    'defaultBackgroundColor': '0a66c2',
+  },
+  'email': {
+    shareEndpoint: 'mailto:RECIPIENT',
+    defaultParams: dict({
+      'subject': 'TITLE',
+      'body': 'CANONICAL_URL',
+      'recipient': '',
+    }),
+    defaultColor: 'ffffff',
+    defaultBackgroundColor: '000000',
+    bindings: ['recipient'],
+  },
+  'tumblr': {
+    shareEndpoint: 'https://www.tumblr.com/share/link',
+    defaultParams: dict({
+      'name': 'TITLE',
+      'url': 'CANONICAL_URL',
+    }),
+    defaultColor: 'ffffff',
+    defaultBackgroundColor: '001935',
+  },
+  'whatsapp': {
+    shareEndpoint: 'https://api.whatsapp.com/send',
+    defaultParams: dict({
+      'text': 'TITLE - CANONICAL_URL',
+    }),
+    defaultColor: 'ffffff',
+    defaultBackgroundColor: '25d366',
+  },
+  'line': {
+    shareEndpoint: 'https://social-plugins.line.me/lineit/share',
+    defaultParams: dict({
+      'text': 'TITLE',
+      'url': 'CANONICAL_URL',
+    }),
+    defaultColor: 'ffffff',
+    defaultBackgroundColor: '00b900',
+  },
+  'sms': {
+    shareEndpoint: 'sms:',
+    defaultParams: dict({
+      'body': 'TITLE - CANONICAL_URL',
+    }),
+    defaultColor: 'ffffff',
+    defaultBackgroundColor: '000000',
+  },
+  'system': {
+    shareEndpoint: 'navigator-share:',
+    defaultParams: dict({
+      'text': 'TITLE',
+      'url': 'CANONICAL_URL',
+    }),
+    defaultColor: 'ffffff',
+    defaultBackgroundColor: '000000',
+  },
+};
diff --git a/extensions/amp-social-share/1.0/social-share-svgs.js b/extensions/amp-social-share/1.0/social-share-svgs.js
new file mode 100644
index 0000000000000..b4afab37bd9b5
--- /dev/null
+++ b/extensions/amp-social-share/1.0/social-share-svgs.js
@@ -0,0 +1,121 @@
+/**
+ * Copyright 2020 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.
+ */
+import * as Preact from '../../../src/preact';
+
+/**
+ * @param {!JsonObject} props
+ * @return {PreactDef.Renderable}
+ */
+export function SocialShareIcon(props) {
+  switch (props['type']) {
+    case 'FACEBOOK':
+      return (
+        <svg {...props} viewBox="0 0 44 44">
+          <path
+            fill="currentColor"
+            d="M44 22.134C44 9.90843 34.1516 0 22 0C9.84844 0 0 9.90843 0 22.134C0 33.1837 8.04375 42.34 18.5625 44V28.5321H12.9766V22.134H18.5625V17.2576C18.5625 11.7111 21.8453 8.6461 26.8727 8.6461C29.2789 8.6461 31.7969 9.0784 31.7969 9.0784V14.5254H29.0211C26.2883 14.5254 25.4375 16.2331 25.4375 17.9839V22.134H31.5391L30.5637 28.5321H25.4375V44C35.9562 42.34 44 33.1837 44 22.134Z"
+          />
+        </svg>
+      );
+    case 'PINTEREST':
+      return (
+        <svg {...props} viewBox="0 0 44 44">
+          <path
+            fill="currentColor"
+            d="M22.0181 0C9.8583 0 0 9.8421 0 21.9819C0 31.2993 5.799 39.2599 13.9901 42.4622C13.7907 40.7253 13.6276 38.0477 14.0626 36.148C14.4613 34.4293 16.6359 25.2204 16.6359 25.2204C16.6359 25.2204 15.9835 23.8997 15.9835 21.9638C15.9835 18.9062 17.7594 16.6266 19.9703 16.6266C21.855 16.6266 22.7611 18.0378 22.7611 19.7204C22.7611 21.602 21.565 24.4243 20.9308 27.0477C20.4052 29.2368 22.0362 31.028 24.1927 31.028C28.107 31.028 31.1153 26.903 31.1153 20.9688C31.1153 15.7039 27.3278 12.0312 21.9093 12.0312C15.6392 12.0313 11.9604 16.7171 11.9604 21.5658C11.9604 23.4474 12.6853 25.4737 13.5914 26.5773C13.7726 26.7944 13.7907 26.9934 13.7364 27.2105C13.5733 27.898 13.1927 29.3997 13.1202 29.7072C13.0296 30.1053 12.794 30.1957 12.3772 29.9967C9.62271 28.7122 7.90114 24.7138 7.90114 21.4753C7.90114 14.5461 12.939 8.17763 22.453 8.17763C30.0823 8.17763 36.0263 13.6053 36.0263 20.8783C36.0263 28.4589 31.2421 34.5559 24.6095 34.5559C22.3805 34.5559 20.2784 33.398 19.5716 32.023C19.5716 32.023 18.4662 36.2204 18.1944 37.2516C17.7051 39.1694 16.364 41.5576 15.458 43.023C17.5238 43.6562 19.6985 44 21.9818 44C34.1416 44 43.9999 34.1579 43.9999 22.0181C44.0361 9.8421 34.1778 0 22.0181 0Z"
+          />
+        </svg>
+      );
+    case 'LINKEDIN':
+      return (
+        <svg {...props} viewBox="0 0 44 44">
+          <path
+            fill="currentColor"
+            d="M15.1765 33H10.4706V15.7044H15.1765V33ZM12.8235 13.6604C11.2549 13.6604 10 12.4025 10 10.8302C10 9.25786 11.2549 8 12.8235 8C14.3922 8 15.4902 9.41509 15.4902 10.9874C15.4902 12.5597 14.3922 13.6604 12.8235 13.6604ZM34 33H29.2941V24.195C29.2941 18.8491 23.0196 19.3208 23.0196 24.195V33H18.3137V15.7044H23.0196V18.5346C25.2157 14.4465 34 14.1321 34 22.4654V33Z"
+          />
+        </svg>
+      );
+    case 'EMAIL':
+      return (
+        <svg {...props} viewBox="0 0 44 44">
+          <path
+            fill="currentColor"
+            d="M31.6 12H12.4C11.08 12 10 13.08 10 14.4V28.8C10 30.12 11.08 31.2 12.4 31.2H31.6C32.92 31.2 34 30.12 34 28.8V14.4C34 13.08 32.92 12 31.6 12ZM30.64 14.4L22 20.16L13.36 14.4H30.64ZM12.4 28.8V16.644L22 23.04L31.6 16.644V28.8H12.4Z"
+          />
+        </svg>
+      );
+    case 'TWITTER':
+      return (
+        <svg {...props} viewBox="0 0 44 44">
+          <path
+            fill="currentColor"
+            d="M16.974 32.605C26.731 32.605 32.066 24.52 32.066 17.513C32.066 17.282 32.066 17.051 32.055 16.831C33.089 16.083 33.991 15.148 34.706 14.081C33.76 14.499 32.737 14.785 31.659 14.917C32.759 14.257 33.595 13.223 33.991 11.98C32.968 12.585 31.835 13.025 30.625 13.267C29.657 12.233 28.282 11.595 26.753 11.595C23.827 11.595 21.451 13.971 21.451 16.897C21.451 17.315 21.495 17.722 21.594 18.107C17.183 17.887 13.278 15.775 10.66 12.563C10.209 13.344 9.945 14.257 9.945 15.225C9.945 17.062 10.88 18.69 12.31 19.636C11.441 19.614 10.627 19.372 9.912 18.976C9.912 18.998 9.912 19.02 9.912 19.042C9.912 21.616 11.738 23.75 14.169 24.245C13.729 24.366 13.256 24.432 12.772 24.432C12.431 24.432 12.101 24.399 11.771 24.333C12.442 26.445 14.4 27.974 16.721 28.018C14.906 29.437 12.618 30.284 10.132 30.284C9.703 30.284 9.285 30.262 8.867 30.207C11.188 31.725 13.982 32.605 16.974 32.605Z"
+          />
+        </svg>
+      );
+    case 'TUMBLR':
+      return (
+        <svg {...props} viewBox="0 0 44 44">
+          <path
+            fill="currentColor"
+            d="M23.7527 26.9388C23.7527 28.9311 24.7623 29.6046 26.3327 29.6046H28.6042V34.6556H24.3136C20.4716 34.6556 17.5832 32.6632 17.5832 27.9209V20.3163H14.0778V16.2194C17.9477 15.2092 19.5462 11.8979 19.7425 9.00763H23.7527V15.5459H28.4079V20.3163H23.7527V26.9388Z"
+          />
+        </svg>
+      );
+    case 'WHATSAPP':
+      return (
+        <svg {...props} viewBox="0 0 44 44">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M31.9103 12.0713C29.284 9.44357 25.7823 8 22.0535 8C14.3752 8 8.12029 14.2267 8.1136 21.8703C8.1136 24.3184 8.75513 26.6999 9.97136 28.8087L8 36L15.3909 34.0708C17.4291 35.1751 19.7212 35.7605 22.0535 35.7605H22.0601C29.7384 35.7605 35.9933 29.5339 36 21.8836C35.9933 18.1782 34.5432 14.6923 31.9103 12.0713ZM22.0535 33.4122C19.9685 33.4122 17.9303 32.8534 16.1527 31.8023L15.7317 31.5495L11.348 32.6938L12.5174 28.4362L12.2434 27.9972C11.0807 26.1611 10.4726 24.039 10.4726 21.8636C10.4726 15.5172 15.6716 10.3416 22.0601 10.3416C25.1542 10.3416 28.0611 11.5457 30.253 13.7211C32.4382 15.9031 33.6411 18.7969 33.6411 21.8769C33.6344 28.2433 28.4353 33.4122 22.0535 33.4122ZM28.4086 24.7774C28.0611 24.6044 26.3504 23.7662 26.0296 23.6465C25.7088 23.5334 25.4749 23.4735 25.2477 23.8194C25.0138 24.1654 24.3456 24.9503 24.1451 25.1765C23.9446 25.4094 23.7375 25.436 23.39 25.263C23.0425 25.09 21.9198 24.7242 20.59 23.54C19.5542 22.622 18.8592 21.4844 18.652 21.1385C18.4516 20.7926 18.632 20.6063 18.8057 20.4334C18.9594 20.2804 19.1532 20.0276 19.327 19.828C19.5007 19.6284 19.5609 19.4821 19.6745 19.2492C19.7881 19.0164 19.7346 18.8168 19.6477 18.6439C19.5609 18.4709 18.8659 16.7612 18.5718 16.0694C18.2912 15.3908 18.0038 15.484 17.79 15.4773C17.5895 15.464 17.3556 15.464 17.1217 15.464C16.8878 15.464 16.5136 15.5505 16.1928 15.8964C15.8721 16.2423 14.9766 17.0805 14.9766 18.7902C14.9766 20.4999 16.2263 22.143 16.4 22.3759C16.5737 22.6087 18.8525 26.1079 22.3475 27.6113C23.1761 27.9705 23.8243 28.1834 24.3322 28.3431C25.1675 28.6092 25.9227 28.5693 26.5241 28.4828C27.1924 28.383 28.5823 27.6446 28.8764 26.833C29.1637 26.0214 29.1637 25.3295 29.0768 25.1832C28.99 25.0368 28.7561 24.9503 28.4086 24.7774Z"
+            fill="currentColor"
+          />
+        </svg>
+      );
+    case 'LINE':
+      return (
+        <svg {...props} viewBox="0 0 44 44">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M22.0233 7C30.86 7 38.0467 12.83 38.0467 20.0167C38.0467 22.8767 36.9467 25.48 34.5633 28.0467C31.2267 31.9333 23.71 36.6267 21.9867 37.36C20.3059 38.0395 20.5085 36.9401 20.5876 36.5112C20.5896 36.5004 20.5915 36.49 20.5933 36.48C20.63 36.26 20.8133 35.1233 20.8133 35.1233C20.8867 34.6833 20.9233 34.06 20.7767 33.6567C20.63 33.18 19.8967 32.96 19.3833 32.85C11.6833 31.8233 6 26.4333 6 20.0167C6 12.83 13.1867 7 22.0233 7ZM32.5967 18.3333C32.78 18.3333 32.89 18.1867 32.89 18.0033V16.8667C32.89 16.6833 32.7433 16.5367 32.5967 16.5367H28.1233C28.05 16.5367 27.9767 16.5733 27.9033 16.61C27.8667 16.6833 27.83 16.7567 27.83 16.83V23.7967C27.83 23.87 27.8667 23.9433 27.9033 24.0167C27.9767 24.0533 28.05 24.09 28.1233 24.09H32.5967C32.78 24.09 32.89 23.9433 32.89 23.76V22.6233C32.89 22.44 32.7433 22.2933 32.5967 22.2933H29.5533V21.2667H32.5967C32.78 21.2667 32.89 21.12 32.89 20.9367V19.8C32.89 19.6167 32.7433 19.47 32.5967 19.47H29.5533V18.3333H32.5967ZM12.9067 22.44H15.95C16.1333 22.44 16.28 22.5867 16.17 22.6967V23.8333C16.17 24.0167 16.06 24.1633 15.8767 24.1633H11.4033C11.33 24.1633 11.2567 24.1267 11.1834 24.09L11.1833 24.09C11.1467 24.0167 11.11 23.9433 11.11 23.87V16.9033C11.11 16.72 11.2567 16.5733 11.44 16.5733H12.5767C12.76 16.5733 12.9067 16.72 12.9067 16.9033V22.44ZM18.6633 16.61H17.5267C17.3433 16.61 17.1967 16.7567 17.1967 16.9033V23.87C17.1967 24.0533 17.3433 24.1633 17.5267 24.1633H18.6633C18.8467 24.1633 18.9933 24.0166 18.9933 23.87V16.9033C18.9933 16.7567 18.8467 16.61 18.6633 16.61ZM26.4 16.61H25.3C25.1167 16.61 24.97 16.7567 24.97 16.9033V21.0467L21.78 16.72C21.78 16.72 21.78 16.6833 21.7433 16.6833L21.7067 16.6467H21.67H20.5333C20.35 16.6467 20.2033 16.7933 20.2033 16.94V23.9067C20.2033 24.09 20.35 24.2 20.5333 24.2H21.67C21.8533 24.2 22 24.0533 22 23.9067V19.7633L25.19 24.09C25.204 24.104 25.2127 24.118 25.2201 24.13C25.232 24.1493 25.2407 24.1633 25.2633 24.1633H25.3H25.3367H25.41H26.4C26.5833 24.1633 26.73 24.0167 26.73 23.87V16.9033C26.73 16.7567 26.5833 16.61 26.4 16.61Z"
+            fill="currentColor"
+          />
+        </svg>
+      );
+    case 'SMS':
+      return (
+        <svg {...props} viewBox="0 0 44 44">
+          <path
+            fill="currentColor"
+            d="M30.8 12H13.2C11.99 12 11 12.99 11 14.2V34L15.4 29.6H30.8C32.01 29.6 33 28.61 33 27.4V14.2C33 12.99 32.01 12 30.8 12ZM30.8 27.4H13.2V14.2H30.8V27.4Z"
+          />
+        </svg>
+      );
+    case 'SYSTEM':
+      return (
+        <svg {...props} viewBox="0 0 44 44">
+          <path
+            fill="currentColor"
+            d="M27.6667 26.5556C26.7889 26.5556 26 26.9 25.4111 27.4556L17.5667 22.8889C17.6222 22.6333 17.6667 22.3778 17.6667 22.1111C17.6667 21.8444 17.6222 21.5889 17.5667 21.3333L25.4 16.7667C25.9889 17.3222 26.7889 17.6667 27.6667 17.6667C29.5111 17.6667 31 16.1778 31 14.3333C31 12.4889 29.5111 11 27.6667 11C25.8222 11 24.3333 12.4889 24.3333 14.3333C24.3333 14.6 24.3778 14.8667 24.4333 15.1111L16.6 19.6778C16 19.1222 15.2111 18.7778 14.3333 18.7778C12.4889 18.7778 11 20.2667 11 22.1111C11 23.9556 12.4889 25.4444 14.3333 25.4444C15.2111 25.4444 16 25.1 16.6 24.5444L24.4333 29.1222C24.3778 29.3667 24.3333 29.6222 24.3333 29.8889C24.3333 31.7333 25.8222 33.2222 27.6667 33.2222C29.5111 33.2222 31 31.7333 31 29.8889C31 28.0444 29.5111 26.5556 27.6667 26.5556ZM27.6667 13.2222C28.2778 13.2222 28.7778 13.7222 28.7778 14.3333C28.7778 14.9444 28.2778 15.4444 27.6667 15.4444C27.0556 15.4444 26.5556 14.9444 26.5556 14.3333C26.5556 13.7222 27.0556 13.2222 27.6667 13.2222ZM14.3333 23.2222C13.7222 23.2222 13.2222 22.7222 13.2222 22.1111C13.2222 21.5 13.7222 21 14.3333 21C14.9444 21 15.4444 21.5 15.4444 22.1111C15.4444 22.7222 14.9444 23.2222 14.3333 23.2222ZM27.6667 31C27.0556 31 26.5556 30.5 26.5556 29.8889C26.5556 29.2778 27.0556 28.7778 27.6667 28.7778C28.2778 28.7778 28.7778 29.2778 28.7778 29.8889C28.7778 30.5 28.2778 31 27.6667 31Z"
+          />
+        </svg>
+      );
+    default:
+      return <svg {...props}></svg>;
+  }
+}
diff --git a/extensions/amp-social-share/1.0/social-share.css.js b/extensions/amp-social-share/1.0/social-share.css.js
index 7f509bbee2217..62dd9cc8bd421 100644
--- a/extensions/amp-social-share/1.0/social-share.css.js
+++ b/extensions/amp-social-share/1.0/social-share.css.js
@@ -15,45 +15,7 @@
  */
 
 export const BASE_STYLE = {
-  'backgroundRepeat': 'no-repeat',
-  'backgroundPosition': 'center',
   'textDecoration': 'none',
   'cursor': 'pointer',
   'position': 'relative',
 };
-
-/* Twitter Styling */
-export const TWITTER = {'backgroundColor': '1da1f2'};
-
-/* Facebook Styling */
-export const FACEBOOK = {'backgroundColor': '#32529f'};
-
-/* Pinterest Styling */
-export const PINTEREST = {'backgroundColor': 'e60023'};
-
-/* LinkedIn Styling */
-export const LINKEDIN = {'backgroundColor': '0077b5'};
-
-/* Google+ Styling */
-export const GPLUS = {'backgroundColor': 'dc4e41'};
-
-/* Tumblr Styling */
-export const TUMBLR = {'backgroundColor': '3c5a77'};
-
-/* Email Styling */
-export const EMAIL = {'backgroundColor': '000000'};
-
-/* Whatsapp Styling */
-export const WHATSAPP = {'backgroundColor': '25d366'};
-
-/* line Styling */
-export const LINE = {'backgroundColor': '52b448'};
-
-/* SMS Styling */
-export const SMS = {'backgroundColor': 'ca2b63'};
-
-/* "system" styling */
-export const SYSTEM = {'backgroundColor': '000000'};
-
-/* "default" styling */
-export const DEFAULT = {'backgroundColor': 'd3d3d3'};
diff --git a/extensions/amp-social-share/1.0/social-share.js b/extensions/amp-social-share/1.0/social-share.js
index 787e64fab4bef..34ec6da4d4e53 100644
--- a/extensions/amp-social-share/1.0/social-share.js
+++ b/extensions/amp-social-share/1.0/social-share.js
@@ -16,176 +16,209 @@
 
 import * as CSS from './social-share.css';
 import * as Preact from '../../../src/preact';
-import {Keys} from '../../../src/utils/key-codes';
-import {SocialShareIcon} from '../../../third_party/optimized-svg-icons/social-share-svgs';
-import {addParamsToUrl, parseQueryString} from '../../../src/url';
-import {dict} from '../../../src/utils/object';
-import {getSocialConfig} from './amp-social-share-config';
-import {isObject} from '../../../src/types';
+import {Keys} from '../../../src/core/constants/key-codes';
+import {SocialShareIcon} from './social-share-svgs';
+import {Wrapper} from '../../../src/preact/component';
+import {addParamsToUrl} from '../../../src/url';
+import {dict} from '../../../src/core/types/object';
+import {getSocialConfig} from './social-share-config';
 import {openWindowDialog} from '../../../src/dom';
+import {parseQueryString} from '../../../src/core/types/string/url';
 import {useResourcesNotify} from '../../../src/preact/utils';
+import {useStyles} from './social-share.jss';
 
+const NAME = 'SocialShare';
 const DEFAULT_WIDTH = 60;
 const DEFAULT_HEIGHT = 44;
-const NAME = 'SocialShare';
+const DEFAULT_TARGET = '_blank';
+const WINDOW_FEATURES = 'resizable,scrollbars,width=640,height=480';
+
 /**
- * @param {!JsonObject} props
+ * @param {!SocialSharePropsDef} props
  * @return {PreactDef.Renderable}
  */
-export function SocialShare(props) {
+export function SocialShare({
+  background,
+  children,
+  color,
+  endpoint,
+  height,
+  params,
+  style,
+  tabIndex = 0,
+  target,
+  type,
+  width,
+  ...rest
+}) {
   useResourcesNotify();
-  const {typeConfig, baseEndpoint, checkedWidth, checkedHeight} = checkProps(
-    props
+  const classes = useStyles();
+  const checkPropsReturnValue = checkProps(
+    type,
+    endpoint,
+    target,
+    width,
+    height,
+    params
   );
-  const finalEndpoint = createEndpoint(typeConfig, baseEndpoint, props);
-
-  const type = props['type'].toUpperCase();
-  const baseStyle = CSS.BASE_STYLE;
-  const backgroundStyle = CSS[type] || CSS.DEFAULT;
-  const size = {
-    width: checkedWidth,
-    height: checkedHeight,
-  };
+
+  // Early exit if checkProps did not pass
+  if (!checkPropsReturnValue) {
+    return null;
+  }
+
+  const {checkedHeight, checkedTarget, checkedWidth, finalEndpoint} =
+    checkPropsReturnValue;
+
   return (
-    <div
+    <Wrapper
+      {...rest}
       role="button"
-      tabindex={props['tabIndex'] || '0'}
-      onKeyDown={(e) => handleKeyPress(e, finalEndpoint)}
-      onClick={() => handleActivation(finalEndpoint)}
-      style={{...size, ...props['style']}}
-      {...props}
+      tabindex={tabIndex}
+      onKeyDown={(e) => handleKeyPress(e, finalEndpoint, checkedTarget)}
+      onClick={() => handleActivation(finalEndpoint, checkedTarget)}
+      wrapperStyle={{
+        width: checkedWidth,
+        height: checkedHeight,
+        ...style,
+      }}
+      part="button"
+      wrapperClassName={classes.button}
     >
+      {processChildren(
+        /** @type {string} */ (type),
+        children,
+        color,
+        background
+      )}
+    </Wrapper>
+  );
+}
+
+/**
+ * If children exist, render the children instead of the icon.  Otherwise,
+ * render the icon associated with the specified type with specified color
+ * and background (or defaults if not specified).
+ * @param {string} type
+ * @param {?PreactDef.Renderable|undefined} children
+ * @param {string|undefined} color
+ * @param {string|undefined} background
+ * @return {PreactDef.Renderable}
+ */
+function processChildren(type, children, color, background) {
+  if (children) {
+    return children;
+  } else {
+    const typeConfig = getSocialConfig(type) || {};
+    const baseStyle = CSS.BASE_STYLE;
+    const iconStyle = dict({
+      'color': color || typeConfig.defaultColor,
+      'backgroundColor': background || typeConfig.defaultBackgroundColor,
+    });
+    return (
       <SocialShareIcon
-        style={{...backgroundStyle, ...baseStyle, ...size}}
-        type={type}
+        style={{
+          ...iconStyle,
+          ...baseStyle,
+          width: '100%',
+          height: '100%',
+        }}
+        type={type.toUpperCase()}
       />
-    </div>
-  );
+    );
+  }
 }
 
 /**
- * @param {!JsonObject} props
- * @return {{
- *   typeConfig: !JsonObject,
- *   baseEndpoint: ?string,
- *   checkedWidth: ?number,
- *   checkedHeight: ?number,
+ * Verify required props and throw error if necessary.  Set default values
+ * for optional props if no value specified.
+ * @param {string|undefined} type
+ * @param {string|undefined} endpoint
+ * @param {string|undefined} target
+ * @param {number|string|undefined} width
+ * @param {number|string|undefined} height
+ * @param {JsonObject|Object|undefined} params
+ * @return {?{
+ *   finalEndpoint: string,
+ *   checkedWidth: (number|string),
+ *   checkedHeight: (number|string),
+ *   checkedTarget: string,
  * }}
  */
-function checkProps(props) {
-  const {
-    'type': type,
-    'shareEndpoint': shareEndpoint,
-    'params': params,
-    'bindings': bindings,
-    'width': width,
-    'height': height,
-  } = props;
-
-  // Verify type is provided
-  if (type === undefined) {
-    throw new Error(`The type attribute is required. ${NAME}`);
+function checkProps(type, endpoint, target, width, height, params) {
+  // User must provide endpoint if they choose a type that is not
+  // pre-configured, early exit if not provided
+  const typeConfig = getSocialConfig(/** @type {string} */ (type)) || {};
+  let baseEndpoint = endpoint || typeConfig.shareEndpoint;
+  if (baseEndpoint === undefined) {
+    displayWarning(
+      `An endpoint is required if not using a pre-configured type. ${NAME}`
+    );
+    return null;
   }
 
-  // bindings and params props must be objects
-  if (params && !isObject(params)) {
-    throw new Error(`The params property should be an object. ${NAME}`);
-  }
-  if (bindings && !isObject(bindings)) {
-    throw new Error(`The bindings property should be an object. ${NAME}`);
+  // Special case when type is 'email'
+  if (type === 'email' && !endpoint) {
+    baseEndpoint = `mailto:${(params && params['recipient']) || ''}`;
   }
 
-  // User must provide shareEndpoint if they choose a type that is not
-  // pre-configured
-  const typeConfig = getSocialConfig(type) || dict();
-  const baseEndpoint = typeConfig['shareEndpoint'] || shareEndpoint;
-  if (baseEndpoint === undefined) {
-    throw new Error(
-      `A shareEndpoint is required if not using a pre-configured type. ${NAME}`
-    );
-  }
+  // Add params to baseEndpoint
+  const finalEndpoint = addParamsToUrl(
+    /** @type {string} */ (baseEndpoint),
+    /** @type {!JsonObject} */ (params)
+  );
 
+  // Defaults
   const checkedWidth = width || DEFAULT_WIDTH;
   const checkedHeight = height || DEFAULT_HEIGHT;
+  const checkedTarget = target || DEFAULT_TARGET;
+
   return {
-    typeConfig,
-    baseEndpoint,
+    finalEndpoint,
     checkedWidth,
     checkedHeight,
+    checkedTarget,
   };
 }
 
 /**
  * @param {?string} message
  */
-function throwWarning(message) {
+function displayWarning(message) {
   console /*OK*/
     .warn(message);
 }
 
-/**
- * @param {!JsonObject} typeConfig
- * @param {?string} baseEndpoint
- * @param {!JsonObject} props
- * @return {?string}
- */
-function createEndpoint(typeConfig, baseEndpoint, props) {
-  const {'params': params, 'bindings': bindings} = props;
-  const combinedParams = {...typeConfig['defaultParams'], ...params};
-  const endpointWithParams = addParamsToUrl(
-    /** @type {string} */ (baseEndpoint),
-    /** @type {!JsonObject} */ (combinedParams)
-  );
-
-  const combinedBindings = dict();
-  const bindingVars = typeConfig['bindings'];
-  if (bindingVars) {
-    /** @type {Array<string>} */ (bindingVars).forEach((name) => {
-      combinedBindings[name.toUpperCase()] = combinedParams[name] || '';
-    });
-  }
-  if (bindings) {
-    Object.keys(bindings).forEach((name) => {
-      combinedBindings[name.toUpperCase()] = bindings[name] || '';
-    });
-  }
-  const finalEndpoint = Object.keys(combinedBindings).reduce(
-    (endpoint, binding) =>
-      endpoint.replace(new RegExp(binding, 'g'), combinedBindings[binding]),
-    endpointWithParams
-  );
-  return finalEndpoint;
-}
-
 /**
  * Opens a new window with the fully processed endpoint
  * @param {?string} finalEndpoint
+ * @param {string} target
  */
-function handleActivation(finalEndpoint) {
+function handleActivation(finalEndpoint, target) {
   const protocol = finalEndpoint.split(':', 1)[0];
-  const windowFeatures = 'resizable,scrollbars,width=640,height=480';
+
   if (protocol === 'navigator-share') {
     if (window && window.navigator && window.navigator.share) {
       const data = parseQueryString(
         /** @type {string} */ (getQueryString(finalEndpoint))
       );
       window.navigator.share(data).catch((e) => {
-        throwWarning(`${e.message}. ${NAME}`);
+        displayWarning(`${e.message}. ${NAME}`);
       });
     } else {
-      throwWarning(
+      displayWarning(
         `Could not complete system share.  Navigator unavailable. ${NAME}`
       );
     }
-  } else if (protocol === 'sms') {
+  } else if (protocol === 'sms' || protocol === 'mailto') {
     openWindowDialog(
       window,
-      finalEndpoint.replace('?', '?&'),
-      '_blank',
-      windowFeatures
+      protocol === 'sms' ? finalEndpoint.replace('?', '?&') : finalEndpoint,
+      isIos() ? '_top' : target,
+      WINDOW_FEATURES
     );
   } else {
-    openWindowDialog(window, finalEndpoint, '_blank', windowFeatures);
+    openWindowDialog(window, finalEndpoint, target, WINDOW_FEATURES);
   }
 }
 
@@ -202,14 +235,30 @@ function getQueryString(endpoint) {
   return endpoint.slice(q, h);
 }
 
+/**
+ * Checks whether or not the userAgent of the current device indicates that
+ * this is an Ios device.  Checked for 'mailto:' and 'sms:' protocols which
+ * break when opened in _blank on iOS Safari.
+ * @return {boolean}
+ */
+function isIos() {
+  return /** @type {boolean} */ (
+    window &&
+      window.navigator &&
+      window.navigator.userAgent &&
+      window.navigator.userAgent.search(/iPhone|iPad|iPod/i) >= 0
+  );
+}
+
 /**
  * @param {!Event} event
  * @param {?string} finalEndpoint
+ * @param {string} target
  */
-function handleKeyPress(event, finalEndpoint) {
+function handleKeyPress(event, finalEndpoint, target) {
   const {key} = event;
   if (key == Keys.SPACE || key == Keys.ENTER) {
     event.preventDefault();
-    handleActivation(finalEndpoint);
+    handleActivation(finalEndpoint, target);
   }
 }
diff --git a/extensions/amp-social-share/1.0/social-share.jss.js b/extensions/amp-social-share/1.0/social-share.jss.js
new file mode 100644
index 0000000000000..07d95be35077d
--- /dev/null
+++ b/extensions/amp-social-share/1.0/social-share.jss.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+const button = {
+  '&:focus': {
+    outline: '#0389ff solid 2px',
+    outlineOffset: '2px',
+  },
+};
+
+const JSS = {
+  button,
+};
+
+// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
+// eslint-disable-next-line local/no-export-side-effect
+export const useStyles = createUseStyles(JSS);
diff --git a/extensions/amp-social-share/1.0/social-share.type.js b/extensions/amp-social-share/1.0/social-share.type.js
new file mode 100644
index 0000000000000..0f06d6514cec8
--- /dev/null
+++ b/extensions/amp-social-share/1.0/social-share.type.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/**
+ * @typedef {{
+ *   type: (string),
+ *   endpoint: (string|undefined),
+ *   params: (JsonObject|Object|undefined),
+ *   target: (string|undefined),
+ *   width: (number|string|undefined),
+ *   height: (number|string|undefined),
+ *   color: (string|undefined),
+ *   background: (string|undefined),
+ *   tabIndex: (number|string|undefined),
+ *   style: (string|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+var SocialSharePropsDef;
diff --git a/extensions/amp-social-share/1.0/storybook/Basic.amp.js b/extensions/amp-social-share/1.0/storybook/Basic.amp.js
index e994e65289925..ff92488cee129 100644
--- a/extensions/amp-social-share/1.0/storybook/Basic.amp.js
+++ b/extensions/amp-social-share/1.0/storybook/Basic.amp.js
@@ -16,115 +16,87 @@
 
 import * as Preact from '../../../../src/preact';
 import {select, text, withKnobs} from '@storybook/addon-knobs';
-import {storiesOf} from '@storybook/preact';
-import {toggleExperiment} from '../../../../src/experiments';
-import {withA11y} from '@storybook/addon-a11y';
-import withAmp from '../../../../build-system/tasks/storybook/amp-env/decorator.js';
+import {withAmp} from '@ampproject/storybook-addon';
 
-// eslint-disable-next-line
-storiesOf('amp-social-share v2', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withA11y)
-  .addDecorator(withAmp)
-  .addParameters({extensions: [{name: 'amp-social-share', version: 0.2}]})
-  .add('default', () => {
-    toggleExperiment(window, 'amp-social-share-v2', true);
-    /*
-     * Knob and Component Details -
-     * amp-social-share allows the user to set various parameters to configure
-     * its behavior.  These parameters are controlled by storybook knobs and
-     * are summarized below:
-     *
-     * Key Configuration Parameters -
-     * type - This is a required attribute.  It configures a pre-configured set
-     *   of parameters needed to share with a particular social-media.  Most
-     *   notably, the share-endpoint is set by the type.  Configuration details
-     *   can be found in amp-social-share-config.js.  The user may also select
-     *   'custom' with this knob to manually specify the required parameters.
-     *   Setting any of the other attributes below overwrites the
-     *   pre-configured parameters defined by the type.
-     * data-share-endpoint - This is the api endpoint of the social-media with
-     *   which to share content.
-     * data-param-url - This is the url to be shared via social-media.  It
-     *   is defaulted to the canonical url of the current amp page in most
-     *   cases where it is used in the pre-configured types.
-     *
-     * Other Configuration Parameters -
-     * data-param-text - This is a text value included in the shared media.
-     * data-param-attribution - This allows the user to specify where the
-     *   share is attributed to.
-     * data-param-media - This is used to specify a path to media (image) to
-     *   be shared when sharing via Pinterest.
-     * data-param-app_id - This is used when sharing with Facebook and is
-     *   defaulted to an amp test app.
-     */
+export default {
+  title: 'amp-social-share-1_0',
+  decorators: [withKnobs, withAmp],
 
-    const typeConfigurations = [
-      'email',
-      'facebook',
-      'linkedin',
-      'pinterest',
-      'tumblr',
-      'twitter',
-      'whatsapp',
-      'line',
-      'sms',
-      'system',
-      'custom',
-    ];
-    const type = select('type', typeConfigurations, typeConfigurations[0]);
-    const customEndpoint = text('data-share-endpoint', undefined);
-    const paramUrl = text('data-param-url', undefined);
-    const paramText = text('data-param-text', undefined);
-    const paramAttribution = text('data-param-attribution', undefined);
-    const paramMedia = text('data-param-media', undefined);
-    const appId = text('data-param-app_id', '254325784911610');
-    return (
-      <amp-social-share
-        type={type}
-        data-share-endpoint={customEndpoint}
-        data-param-text={paramText}
-        data-param-url={paramUrl}
-        data-param-attribution={paramAttribution}
-        data-param-media={paramMedia}
-        data-param-app_id={appId}
-      ></amp-social-share>
-    );
-  })
-  .add('responsive', () => {
-    toggleExperiment(window, 'amp-social-share-v2', true);
-    const typeConfigurations = [
-      'email',
-      'facebook',
-      'linkedin',
-      'pinterest',
-      'tumblr',
-      'twitter',
-      'whatsapp',
-      'line',
-      'sms',
-      'system',
-      'custom',
-    ];
-    const type = select('type', typeConfigurations, typeConfigurations[0]);
-    const customEndpoint = text('data-share-endpoint', undefined);
-    const paramUrl = text('data-param-url', undefined);
-    const paramText = text('data-param-text', undefined);
-    const paramAttribution = text('data-param-attribution', undefined);
-    const paramMedia = text('data-param-media', undefined);
-    const appId = text('data-param-app_id', '254325784911610');
-    return (
-      <amp-social-share
-        type={type}
-        data-share-endpoint={customEndpoint}
-        data-param-text={paramText}
-        data-param-url={paramUrl}
-        data-param-attribution={paramAttribution}
-        data-param-media={paramMedia}
-        data-param-app_id={appId}
-        layout="responsive"
-        width="100"
-        height="100"
-      ></amp-social-share>
-    );
-  });
+  parameters: {
+    extensions: [{name: 'amp-social-share', version: '1.0'}],
+    experiments: ['bento'],
+  },
+};
+
+export const Default = () => {
+  /*
+   * Knob and Component Details -
+   * amp-social-share allows the user to set various parameters to configure
+   * its behavior.  These parameters are controlled by storybook knobs and
+   * are summarized below:
+   *
+   * Key Configuration Parameters -
+   * type - This is a required attribute.  It configures a pre-configured set
+   *   of parameters needed to share with a particular social-media.  Most
+   *   notably, the share-endpoint is set by the type.  Configuration details
+   *   can be found in amp-social-share-config.js.  The user may also select
+   *   'custom' with this knob to manually specify the required parameters.
+   *   Setting any of the other attributes below overwrites the
+   *   pre-configured parameters defined by the type.
+   * data-share-endpoint - This is the api endpoint of the social-media with
+   *   which to share content.
+   * data-param-url - This is the url to be shared via social-media.  It
+   *   is defaulted to the canonical url of the current amp page in most
+   *   cases where it is used in the pre-configured types.
+   *
+   * Other Configuration Parameters -
+   * data-param-text - This is a text value included in the shared media.
+   * data-param-attribution - This allows the user to specify where the
+   *   share is attributed to.
+   * data-param-media - This is used to specify a path to media (image) to
+   *   be shared when sharing via Pinterest.
+   * data-param-app_id - This is used when sharing with Facebook and is
+   *   defaulted to an amp test app.
+   */
+
+  const typeConfigurations = [
+    'email',
+    'facebook',
+    'linkedin',
+    'pinterest',
+    'tumblr',
+    'twitter',
+    'whatsapp',
+    'line',
+    'sms',
+    'system',
+    'custom',
+    undefined,
+  ];
+  const type = select('type', typeConfigurations, typeConfigurations[0]);
+  const customEndpoint = text('data-share-endpoint', null);
+  const paramUrl = text('data-param-url', null);
+  const paramText = text('data-param-text', null);
+  const paramAttribution = text('data-param-attribution', null);
+  const paramMedia = text('data-param-media', null);
+  const appId = text('data-param-app_id', '254325784911610');
+  const layout = text('layout', null);
+  const width = text('width', null);
+  const height = text('height', null);
+  return (
+    <amp-social-share
+      type={type}
+      data-share-endpoint={customEndpoint}
+      data-param-text={paramText}
+      data-param-url={paramUrl}
+      data-param-attribution={paramAttribution}
+      data-param-media={paramMedia}
+      data-param-app_id={appId}
+      layout={layout}
+      width={width}
+      height={height}
+    ></amp-social-share>
+  );
+};
+
+Default.storyName = 'default';
diff --git a/extensions/amp-social-share/1.0/storybook/Basic.js b/extensions/amp-social-share/1.0/storybook/Basic.js
index 766dcbd18fc54..890a0f87484f7 100644
--- a/extensions/amp-social-share/1.0/storybook/Basic.js
+++ b/extensions/amp-social-share/1.0/storybook/Basic.js
@@ -16,13 +16,12 @@
 
 import * as Preact from '../../../../src/preact';
 import {SocialShare} from '../social-share';
-import {object, select, text, withKnobs} from '@storybook/addon-knobs';
-import {withA11y} from '@storybook/addon-a11y';
+import {color, object, select, text, withKnobs} from '@storybook/addon-knobs';
 
 export default {
-  title: 'Social Share',
+  title: 'SocialShare',
   component: SocialShare,
-  decorators: [withA11y, withKnobs],
+  decorators: [withKnobs],
 };
 
 export const _default = () => {
@@ -37,37 +36,30 @@ export const _default = () => {
     'line',
     'sms',
     'system',
-    'custom endpoint',
+    'custom',
     undefined,
-    '',
-    'random',
   ];
   const type = select('type', knobConfigurations, knobConfigurations[0]);
-  const href = text('shareEndpoint', 'Not Specified');
-  const params = object('params', {'subject': 'test'});
-  const bindings = object('bindings', {
-    'canonical_url': 'test2',
-    'recipient': 'email recipient',
-  });
-  const width = text('width', undefined);
-  const height = text('height', undefined);
+  const endpoint = text('customEndpoint', null);
+  const additionalParams = object('additionalParams', {'subject': 'test'});
+  const target = text('target', null);
+  const width = text('width', null);
+  const height = text('height', null);
+  const foregroundColor = color('color');
+  const background = color('background');
+  const children = text('children', null);
 
   return (
-    <div>
-      <p>
-        Click the button below to share this page using the configured provider.
-        Update the provider using storybook knobs. Choose Provider Type: 'custom
-        endpoint' to specify your own share endpoint.
-      </p>
-      <SocialShare
-        type={type}
-        href={href}
-        shareEndpoint={href}
-        params={params}
-        bindings={bindings}
-        width={width}
-        height={height}
-      />
-    </div>
+    <SocialShare
+      type={type}
+      endpoint={endpoint}
+      params={additionalParams}
+      target={target}
+      width={width}
+      height={height}
+      color={foregroundColor}
+      background={background}
+      children={children}
+    />
   );
 };
diff --git a/extensions/amp-social-share/1.0/test-e2e/test-amp-social-share.js b/extensions/amp-social-share/1.0/test-e2e/test-amp-social-share.js
new file mode 100644
index 0000000000000..a9af77a540fd0
--- /dev/null
+++ b/extensions/amp-social-share/1.0/test-e2e/test-amp-social-share.js
@@ -0,0 +1,139 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {Key} from '../../../../build-system/tasks/e2e/e2e-types';
+
+describes.endtoend(
+  'amp-social-share',
+  {
+    version: '1.0',
+    fixture: 'amp-social-share/amp-social-share.html',
+    experiments: ['bento-social-share'],
+    environments: ['single', 'viewer-demo'],
+  },
+  async (env) => {
+    let controller;
+
+    beforeEach(() => {
+      controller = env.controller;
+    });
+
+    describe('rendering', () => {
+      it('renders the default social share button', async () => {
+        const host = await controller.findElement('#one');
+
+        await controller.switchToShadowRoot(host);
+        const button = await controller.findElement('[part=button]');
+        await expect(
+          controller.getElementProperty(button, 'clientWidth')
+        ).to.not.equal(0);
+      });
+
+      it('supports rendering of a child element', async () => {
+        const host = await controller.findElement('#two');
+        const child = await controller.findElement('#twoChild');
+
+        await controller.switchToShadowRoot(host);
+        const button = await controller.findElement('[part=button]');
+        await expect(
+          controller.getElementProperty(button, 'clientWidth')
+        ).to.not.equal(0);
+
+        await expect(
+          controller.getElementProperty(child, 'clientWidth')
+        ).to.not.equal(0);
+      });
+
+      it('renders the social share button with custom sizing', async () => {
+        const host = await controller.findElement('#three');
+
+        await controller.switchToShadowRoot(host);
+        const button = await controller.findElement('[part=button]');
+        await expect(
+          controller.getElementProperty(button, 'clientWidth')
+        ).to.equal(400);
+
+        await expect(
+          controller.getElementProperty(button, 'clientHeight')
+        ).to.equal(400);
+      });
+
+      it('renders the social share button with custom type and endpoint', async () => {
+        const host = await controller.findElement('#four');
+
+        await controller.switchToShadowRoot(host);
+        const button = await controller.findElement('[part=button]');
+        await expect(
+          controller.getElementProperty(button, 'clientWidth')
+        ).to.not.equal(0);
+      });
+
+      it('does not render the social share button with custom type and w/o endpoint', async () => {
+        const child = await controller.findElement('#fiveChild');
+
+        await expect(
+          controller.getElementProperty(child, 'clientWidth')
+        ).to.equal(0);
+      });
+
+      it('does not render the social share button w/o type', async () => {
+        const child = await controller.findElement('#sixChild');
+
+        await expect(
+          controller.getElementProperty(child, 'clientWidth')
+        ).to.equal(0);
+      });
+    });
+
+    describe('clicking', () => {
+      it('opens a new window on click', async () => {
+        const host = await controller.findElement('#two');
+
+        let windows = await controller.getAllWindows();
+        await expect(windows.length).to.equal(1);
+
+        await controller.click(host);
+
+        windows = await controller.getAllWindows();
+        await expect(windows.length).to.equal(2);
+        await controller.switchToWindow(windows[1]);
+
+        await expect(controller.getCurrentUrl()).to.equal(
+          'https://twitter.com/intent/tweet?text=amp-social-share&url=http%3A%2F%2Fexample.com%2F'
+        );
+      });
+
+      it('tabs between multiple social-shares and opens on "enter" keypress', async () => {
+        await controller.type(null, Key.Tab);
+        await controller.type(null, Key.Tab);
+        await controller.type(null, Key.Tab);
+
+        let windows = await controller.getAllWindows();
+        await expect(windows.length).to.equal(1);
+
+        await controller.type(null, Key.Enter);
+
+        windows = await controller.getAllWindows();
+        await expect(windows.length).to.equal(2);
+        await controller.switchToWindow(windows[1]);
+
+        await expect(controller.getCurrentUrl()).to.equal(
+          'https://www.tumblr.com/login?redirect_to=https%3A%2F%2Fwww.tumblr.com%2Fwidgets%2Fshare%2Ftool%3FshareSource%3Dlegacy%26canonicalUrl%3D%26url%3Dhttp%253A%252F%252Fexample.com%252F%26posttype%3Dlink%26title%3Damp-social-share%26caption%3D%26content%3Dhttp%253A%252F%252Fexample.com%252F'
+        );
+      });
+    });
+  }
+);
diff --git a/extensions/amp-social-share/1.0/test/test-amp-social-share.js b/extensions/amp-social-share/1.0/test/test-amp-social-share.js
new file mode 100644
index 0000000000000..64d3fc6a977a6
--- /dev/null
+++ b/extensions/amp-social-share/1.0/test/test-amp-social-share.js
@@ -0,0 +1,359 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import '../amp-social-share';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor, whenCalled} from '../../../../testing/test-helper.js';
+import {waitForChildPromise} from '../../../../src/dom';
+
+const BUTTON_SELECTOR = 'div[role="button"]';
+const WINDOW_FEATURES = 'resizable,scrollbars,width=640,height=480';
+
+describes.realWin(
+  'amp-social-share-v1.0',
+  {
+    amp: {
+      runtimeOn: true,
+      extensions: ['amp-social-share:1.0'],
+      canonicalUrl: 'https://canonicalexample.com/',
+    },
+  },
+  (env) => {
+    let win, doc;
+    let element;
+
+    const waitForRender = async () => {
+      await whenCalled(env.sandbox.spy(element, 'attachShadow'));
+      const shadow = element.shadowRoot;
+      await waitForChildPromise(shadow, (shadow) => {
+        return shadow.querySelector(BUTTON_SELECTOR);
+      });
+    };
+
+    // Should be called after waitForRender (assumes shadow already attached)
+    // Waits for the type change to propagate to within the shadowDOM
+    const waitForTypeChange = async (el, type) => {
+      await waitFor(
+        () => el.shadowRoot.querySelector('svg').getAttribute('type') === type,
+        'type attribute is updated'
+      );
+    };
+
+    beforeEach(() => {
+      win = env.win;
+      doc = win.document;
+      doc.title = 'Test Title';
+      toggleExperiment(win, 'bento-social-share', true);
+    });
+
+    it('renders custom endpoint when not using a pre-configured type', async () => {
+      element = win.document.createElement('amp-social-share');
+      element.setAttribute('type', 'unknown-provider');
+      element.setAttribute('data-share-endpoint', 'cats.com');
+      win.document.body.appendChild(element);
+      await waitForRender();
+
+      // when using a type that is not pre-configured, verify that the custom
+      // endpoint is used (in this case cats.com)
+      const openWindowDialogStub = env.sandbox.stub(window, 'open');
+      element.shadowRoot.querySelector(BUTTON_SELECTOR).click();
+      expect(openWindowDialogStub).to.be.calledWithExactly(
+        'cats.com',
+        '_blank',
+        WINDOW_FEATURES
+      );
+    });
+
+    it('allows configuration of the target attribute', async () => {
+      element = win.document.createElement('amp-social-share');
+      element.setAttribute('type', 'unknown-provider');
+      element.setAttribute('data-share-endpoint', 'cats.com');
+      element.setAttribute('data-target', 'target value');
+      win.document.body.appendChild(element);
+      await waitForRender();
+
+      const openWindowDialogStub = env.sandbox.stub(window, 'open');
+      element.shadowRoot.querySelector(BUTTON_SELECTOR).click();
+
+      // verify that the target value can be set via data-target
+      expect(openWindowDialogStub).to.be.calledWithExactly(
+        'cats.com',
+        'target value',
+        WINDOW_FEATURES
+      );
+    });
+
+    it('updates target when using an iOS device for email or sms', async () => {
+      env.sandbox.stub(window.navigator, 'userAgent').value('ipad');
+
+      element = win.document.createElement('amp-social-share');
+      element.setAttribute('type', 'unknown-provider');
+      element.setAttribute('data-share-endpoint', 'mailto:cats.com');
+      win.document.body.appendChild(element);
+      await waitForRender();
+
+      const openWindowDialogStub = env.sandbox.stub(window, 'open');
+      element.shadowRoot.querySelector(BUTTON_SELECTOR).click();
+
+      // when window.navigator.userAgent indicates an iOS device
+      // the target is updated to _top for email and sms
+      expect(openWindowDialogStub).to.be.calledWithExactly(
+        'mailto:cats.com',
+        '_top',
+        WINDOW_FEATURES
+      );
+    });
+
+    it('accepts additional user-specified search parameters', async () => {
+      element = win.document.createElement('amp-social-share');
+      element.setAttribute('type', 'unknown-provider');
+      element.setAttribute('data-share-endpoint', 'cats.com');
+      element.setAttribute('data-param-test', 'test-value');
+      element.setAttribute('data-param-test2', 'test-value2');
+      win.document.body.appendChild(element);
+      await waitForRender();
+
+      const openWindowDialogStub = env.sandbox.stub(window, 'open');
+      element.shadowRoot.querySelector(BUTTON_SELECTOR).click();
+
+      // additional params, test-value and test-value2 are included in the url
+      expect(openWindowDialogStub).to.be.calledWithExactly(
+        'cats.com?test=test-value&test2=test-value2',
+        '_blank',
+        WINDOW_FEATURES
+      );
+    });
+
+    it('receives the recipient from the data attribute when using "email" type', async () => {
+      element = win.document.createElement('amp-social-share');
+      element.setAttribute('type', 'email');
+      element.setAttribute('data-param-recipient', 'recipient-name');
+      win.document.body.appendChild(element);
+      await waitForRender();
+
+      const openWindowDialogStub = env.sandbox.stub(window, 'open');
+      element.shadowRoot.querySelector(BUTTON_SELECTOR).click();
+
+      // the data-param-recipient attribute is included in the url after
+      // "mailto:"
+      expect(openWindowDialogStub).to.be.calledWithExactly(
+        'mailto:recipient-name?subject=Test%20Title&body=https%3A%2F%2F' +
+          'canonicalexample.com%2F&recipient=recipient-name',
+        '_blank',
+        WINDOW_FEATURES
+      );
+    });
+
+    it('uses special query symbol for "sms" type', async () => {
+      element = win.document.createElement('amp-social-share');
+      element.setAttribute('type', 'sms');
+      win.document.body.appendChild(element);
+      await waitForRender();
+
+      const openWindowDialogStub = env.sandbox.stub(window, 'open');
+      element.shadowRoot.querySelector(BUTTON_SELECTOR).click();
+
+      // the query symbol for sms should be '?&' instead of '?'
+      expect(openWindowDialogStub).to.be.calledWithExactly(
+        'sms:?&body=Test%20Title%20-%20https%3A%2F%2Fcanonicalexample.com%2F',
+        '_blank',
+        WINDOW_FEATURES
+      );
+    });
+
+    it('properly resolves bindings from amp environment', async () => {
+      element = win.document.createElement('amp-social-share');
+      element.setAttribute('type', 'twitter');
+      win.document.body.appendChild(element);
+      await waitForRender();
+
+      const openWindowDialogStub = env.sandbox.stub(window, 'open');
+      element.shadowRoot.querySelector(BUTTON_SELECTOR).click();
+
+      // verify that TITLE and CANONICAL_URL (default parameters from Twitter
+      // config are properly resolved).  These are set in doc.title and
+      // canonicalUrl of the ampdoc info respectively
+      expect(openWindowDialogStub).to.be.calledWithExactly(
+        'https://twitter.com/intent/tweet?text=Test%20Title&' +
+          'url=https%3A%2F%2Fcanonicalexample.com%2F',
+        '_blank',
+        WINDOW_FEATURES
+      );
+    });
+
+    it('renders children and hides default icon when children are provided', async () => {
+      element = win.document.createElement('amp-social-share');
+      element.setAttribute('type', 'sms');
+      const child = win.document.createElement('div');
+      child.textContent = 'child';
+      element.appendChild(child);
+      win.document.body.appendChild(element);
+      await waitForRender();
+
+      // verify that the unnamed slot is in the shadowroot and the svg is not
+      // when a child is included in the amp-social-share element
+      expect(
+        element.shadowRoot.querySelector(BUTTON_SELECTOR).querySelector('slot')
+      ).to.not.be.null;
+      expect(element.shadowRoot.querySelector('svg')).to.be.null;
+    });
+
+    it('allows color and background to be inherited from parent', async () => {
+      element = win.document.createElement('amp-social-share');
+      element.setAttribute('type', 'email');
+      win.document.body.appendChild(element);
+      await waitForRender();
+
+      // verify that color and background color are inherited
+      expect(element.shadowRoot.querySelector('svg').style.color).to.be.equal(
+        'currentcolor'
+      );
+      expect(
+        element.shadowRoot.querySelector('svg').style.backgroundColor
+      ).to.be.equal('inherit');
+    });
+
+    it('should focus on the host when an element in the shadow DOM receives focus', async () => {
+      element = win.document.createElement('amp-social-share');
+      element.setAttribute('type', 'email');
+      win.document.body.appendChild(element);
+      await waitForRender();
+
+      // element is not focused and does not have focus indication styles
+      expect(win.document.activeElement).to.not.equal(element);
+
+      // focus the button within the shadow DOM
+      const button = element.shadowRoot.querySelector("[part='button']");
+      button.focus();
+
+      // host receives focus
+      expect(win.document.activeElement).to.equal(element);
+    });
+
+    it('should allow focus directly on the host', async () => {
+      element = win.document.createElement('amp-social-share');
+      element.setAttribute('type', 'email');
+      win.document.body.appendChild(element);
+      await waitForRender();
+
+      // element is not focused and does not have focus indication styles
+      expect(win.document.activeElement).to.not.equal(element);
+
+      // focus the host
+      element.focus();
+
+      // host receives focus
+      expect(win.document.activeElement).to.equal(element);
+    });
+
+    describe('dynamically update attributes', () => {
+      it('updates default url and css class when "type" attribute is updated', async () => {
+        element = win.document.createElement('amp-social-share');
+        element.setAttribute('type', 'email');
+        win.document.body.appendChild(element);
+        await waitForRender();
+
+        // Has email class (for css) and does not have facebook class
+        expect(element.className).to.include('amp-social-share-email');
+        expect(element.className).to.not.include('amp-social-share-facebook');
+
+        element.setAttribute('type', 'facebook');
+        await waitForTypeChange(element, 'FACEBOOK');
+
+        const openWindowDialogStub = env.sandbox.stub(window, 'open');
+        element.shadowRoot.querySelector(BUTTON_SELECTOR).click();
+
+        // Verify that the facebook default URL is used instead of email
+        expect(openWindowDialogStub).to.be.calledWithExactly(
+          'https://www.facebook.com/dialog/share?' +
+            'href=https%3A%2F%2Fcanonicalexample.com%2F',
+          '_blank',
+          WINDOW_FEATURES
+        );
+
+        // Has facebook class (for css) and does not have email class
+        expect(element.className).to.include('amp-social-share-facebook');
+        expect(element.className).to.not.include('amp-social-share-email');
+      });
+
+      it('updates target when "data-target" attribute is updated', async () => {
+        element = win.document.createElement('amp-social-share');
+        element.setAttribute('type', 'email');
+        win.document.body.appendChild(element);
+        await waitForRender();
+
+        element.setAttribute('type', 'facebook');
+        element.setAttribute('data-target', 'test-value');
+        await waitForTypeChange(element, 'FACEBOOK');
+
+        const openWindowDialogStub = env.sandbox.stub(window, 'open');
+        element.shadowRoot.querySelector(BUTTON_SELECTOR).click();
+
+        // Verify that target is updated to the "test-value"
+        expect(openWindowDialogStub).to.be.calledWithExactly(
+          'https://www.facebook.com/dialog/share?' +
+            'href=https%3A%2F%2Fcanonicalexample.com%2F',
+          'test-value',
+          WINDOW_FEATURES
+        );
+      });
+
+      it('updates endpoint when "data-share-endpoint" attribute is updated', async () => {
+        element = win.document.createElement('amp-social-share');
+        element.setAttribute('type', 'email');
+        win.document.body.appendChild(element);
+        await waitForRender();
+
+        element.setAttribute('type', 'custom');
+        element.setAttribute('data-share-endpoint', 'test-value');
+        await waitForTypeChange(element, 'CUSTOM');
+
+        const openWindowDialogStub = env.sandbox.stub(window, 'open');
+        element.shadowRoot.querySelector(BUTTON_SELECTOR).click();
+
+        // Verify that the endpoint is updated to the "test-value"
+        expect(openWindowDialogStub).to.be.calledWithExactly(
+          'test-value',
+          '_blank',
+          WINDOW_FEATURES
+        );
+      });
+
+      it('updates params when "data-param-*" attributes are added', async () => {
+        element = win.document.createElement('amp-social-share');
+        element.setAttribute('type', 'email');
+        win.document.body.appendChild(element);
+        await waitForRender();
+
+        element.setAttribute('type', 'custom');
+        element.setAttribute('data-share-endpoint', 'test-value');
+        element.setAttribute('data-param-cat', 'meow');
+        element.setAttribute('data-param-dog', 'woof');
+        await waitForTypeChange(element, 'CUSTOM');
+
+        const openWindowDialogStub = env.sandbox.stub(window, 'open');
+        element.shadowRoot.querySelector(BUTTON_SELECTOR).click();
+
+        // Verify that the "cat" and "dog" params are appended to the endpoint
+        expect(openWindowDialogStub).to.be.calledWithExactly(
+          'test-value?cat=meow&dog=woof',
+          '_blank',
+          WINDOW_FEATURES
+        );
+      });
+    });
+  }
+);
diff --git a/extensions/amp-social-share/1.0/test/test-social-share.js b/extensions/amp-social-share/1.0/test/test-social-share.js
new file mode 100644
index 0000000000000..d08780b50f092
--- /dev/null
+++ b/extensions/amp-social-share/1.0/test/test-social-share.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {SocialShare} from '../social-share';
+import {dict} from '../../../../src/core/types/object';
+import {mount} from 'enzyme';
+
+describes.sandboxed('SocialShare 1.0 preact component', {}, () => {
+  const originalWarn = console.warn;
+
+  afterEach(() => (console.warn = originalWarn));
+
+  it(
+    'warns when the required endpoint is not provided when not using' +
+      ' a pre-configured type',
+    () => {
+      const consoleOutput = [];
+      const mockedWarn = (output) => consoleOutput.push(output);
+      console.warn = mockedWarn;
+
+      const jsx = <SocialShare {...dict({'type': 'not-configured-type'})} />;
+      const wrapper = mount(jsx);
+
+      expect(wrapper.exists('div')).to.equal(false);
+      expect(consoleOutput.length).to.equal(1);
+      expect(consoleOutput[0]).to.equal(
+        'An endpoint is required if not using a pre-configured type. SocialShare'
+      );
+    }
+  );
+
+  it('should include the button class for focus styling', () => {
+    const jsx = <SocialShare {...dict({'type': 'email'})} />;
+    const wrapper = mount(jsx);
+
+    const button = wrapper.getDOMNode();
+    expect(button.className.includes('button')).to.be.true;
+  });
+});
diff --git a/extensions/amp-social-share/1.0/test/validator-amp-social-share.html b/extensions/amp-social-share/1.0/test/validator-amp-social-share.html
new file mode 100644
index 0000000000000..b6b6b471868fc
--- /dev/null
+++ b/extensions/amp-social-share/1.0/test/validator-amp-social-share.html
@@ -0,0 +1,121 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-social-share tag. See the inline comments.
+-->
+<!DOCTYPE html>
+<html ⚡>
+  <!-- prettier-ignore -->
+  <head>
+    <meta charset="utf-8" />
+    <link rel="canonical" href="./regular-html-version.html" />
+    <meta name="viewport" content="width=device-width,minimum-scale=1" />
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script
+      async
+      custom-element="amp-sidebar"
+      src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"
+    ></script>
+    <script
+      async
+      custom-element="amp-social-share"
+      src="https://cdn.ampproject.org/v0/amp-social-share-1.0.js"
+    ></script>
+  </head>
+  <body>
+    <!-- Valid: simplest possible example -->
+    <amp-social-share type="twitter"></amp-social-share>
+
+    <!-- Valid: a simple example with params -->
+    <amp-social-share
+      type="linkedin"
+      width="60"
+      height="44"
+      data-param-text="Hello world"
+      data-param-url="https://example.com/"
+    >
+    </amp-social-share>
+
+    <!-- Valid: A share endpoint that's a URL with allowlisted app protocol -->
+    <amp-social-share
+      type="whatsapp"
+      layout="container"
+      data-share-endpoint="whatsapp://send"
+      data-param-text="Check this out: TITLE - CANONICAL_URL"
+    >
+      Share on Whatsapp
+    </amp-social-share>
+
+    <!-- Valid: A share endpoint that's a URL with the allowlisted https protocol
+    -->
+    <amp-social-share
+      type="vote-this-up"
+      layout="container"
+      data-share-endpoint="https://example.com/vote-this-up"
+      data-param-text="Check this out: TITLE - CANONICAL_URL"
+    >
+      Share on Whatsapp
+    </amp-social-share>
+
+    <!-- Valid: A share endpoint that's within an amp-sidebar -->
+    <amp-sidebar layout="nodisplay">
+      <amp-social-share
+        type="vote-this-up"
+        layout="container"
+        data-share-endpoint="https://example.com/vote-this-up"
+        data-param-text="Check this out: TITLE - CANONICAL_URL"
+      >
+        Share on Whatsapp
+      </amp-social-share>
+    </amp-sidebar>
+
+    <!-- Valid: unknown type, no endpoint given
+       Note: It would be good to consider this invalid, but given the choices
+       around required / optional parameters for this tag, we don't have a
+       convenient way to do that. This will probablly yield a runtime error.
+    -->
+    <amp-social-share
+      type="unknown"
+      width="60"
+      height="44"
+      data-param-text="Hello world"
+      data-param-url="https://example.com/"
+    >
+    </amp-social-share>
+
+    <!-- Invalid: Endpoint given with a protocol that doesn't fit the allowlist -->
+    <amp-social-share
+      type="vote-this-up"
+      layout="container"
+      data-share-endpoint="votethisup://vote"
+      data-param-text="Check this out: TITLE - CANONICAL_URL"
+    >
+      Share on Whatsapp
+    </amp-social-share>
+
+    <!-- Invalid: Endpoint given with a protocol that doesn't fit the allowlist -->
+    <amp-social-share
+      type="uhm-no-hahaha"
+      layout="container"
+      data-share-endpoint="j a v a s c r i p t : alert('oh hi')"
+      data-param-text="Check this out: TITLE - CANONICAL_URL"
+    >
+      Share on Whatsapp
+    </amp-social-share>
+  </body>
+</html>
diff --git a/extensions/amp-social-share/1.0/test/validator-amp-social-share.out b/extensions/amp-social-share/1.0/test/validator-amp-social-share.out
new file mode 100644
index 0000000000000..ce8b2b9f7187c
--- /dev/null
+++ b/extensions/amp-social-share/1.0/test/validator-amp-social-share.out
@@ -0,0 +1,126 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-social-share tag. See the inline comments.
+|  -->
+|  <!DOCTYPE html>
+|  <html ⚡>
+|    <!-- prettier-ignore -->
+|    <head>
+|      <meta charset="utf-8" />
+|      <link rel="canonical" href="./regular-html-version.html" />
+|      <meta name="viewport" content="width=device-width,minimum-scale=1" />
+|      <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>
+|      <script async src="https://cdn.ampproject.org/v0.js"></script>
+|      <script
+|        async
+|        custom-element="amp-sidebar"
+|        src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"
+|      ></script>
+|      <script
+|        async
+|        custom-element="amp-social-share"
+|        src="https://cdn.ampproject.org/v0/amp-social-share-1.0.js"
+|      ></script>
+|    </head>
+|    <body>
+|      <!-- Valid: simplest possible example -->
+|      <amp-social-share type="twitter"></amp-social-share>
+|
+|      <!-- Valid: a simple example with params -->
+|      <amp-social-share
+|        type="linkedin"
+|        width="60"
+|        height="44"
+|        data-param-text="Hello world"
+|        data-param-url="https://example.com/"
+|      >
+|      </amp-social-share>
+|
+|      <!-- Valid: A share endpoint that's a URL with allowlisted app protocol -->
+|      <amp-social-share
+|        type="whatsapp"
+|        layout="container"
+|        data-share-endpoint="whatsapp://send"
+|        data-param-text="Check this out: TITLE - CANONICAL_URL"
+|      >
+|        Share on Whatsapp
+|      </amp-social-share>
+|
+|      <!-- Valid: A share endpoint that's a URL with the allowlisted https protocol
+|      -->
+|      <amp-social-share
+|        type="vote-this-up"
+|        layout="container"
+|        data-share-endpoint="https://example.com/vote-this-up"
+|        data-param-text="Check this out: TITLE - CANONICAL_URL"
+|      >
+|        Share on Whatsapp
+|      </amp-social-share>
+|
+|      <!-- Valid: A share endpoint that's within an amp-sidebar -->
+|      <amp-sidebar layout="nodisplay">
+|        <amp-social-share
+|          type="vote-this-up"
+|          layout="container"
+|          data-share-endpoint="https://example.com/vote-this-up"
+|          data-param-text="Check this out: TITLE - CANONICAL_URL"
+|        >
+|          Share on Whatsapp
+|        </amp-social-share>
+|      </amp-sidebar>
+|
+|      <!-- Valid: unknown type, no endpoint given
+|         Note: It would be good to consider this invalid, but given the choices
+|         around required / optional parameters for this tag, we don't have a
+|         convenient way to do that. This will probablly yield a runtime error.
+|      -->
+|      <amp-social-share
+|        type="unknown"
+|        width="60"
+|        height="44"
+|        data-param-text="Hello world"
+|        data-param-url="https://example.com/"
+|      >
+|      </amp-social-share>
+|
+|      <!-- Invalid: Endpoint given with a protocol that doesn't fit the allowlist -->
+|      <amp-social-share
+>>     ^~~~~~~~~
+amp-social-share/1.0/test/validator-amp-social-share.html:102:4 Invalid URL protocol 'votethisup:' for attribute 'data-share-endpoint' in tag 'amp-social-share'. (see https://amp.dev/documentation/components/amp-social-share)
+|        type="vote-this-up"
+|        layout="container"
+|        data-share-endpoint="votethisup://vote"
+|        data-param-text="Check this out: TITLE - CANONICAL_URL"
+|      >
+|        Share on Whatsapp
+|      </amp-social-share>
+|
+|      <!-- Invalid: Endpoint given with a protocol that doesn't fit the allowlist -->
+|      <amp-social-share
+>>     ^~~~~~~~~
+amp-social-share/1.0/test/validator-amp-social-share.html:112:4 Invalid URL protocol 'j a v a s c r i p t :' for attribute 'data-share-endpoint' in tag 'amp-social-share'. (see https://amp.dev/documentation/components/amp-social-share)
+|        type="uhm-no-hahaha"
+|        layout="container"
+|        data-share-endpoint="j a v a s c r i p t : alert('oh hi')"
+|        data-param-text="Check this out: TITLE - CANONICAL_URL"
+|      >
+|        Share on Whatsapp
+|      </amp-social-share>
+|    </body>
+|  </html>
diff --git a/extensions/amp-social-share/OWNERS b/extensions/amp-social-share/OWNERS
index cd058c532a59b..5262d5cd2069d 100644
--- a/extensions/amp-social-share/OWNERS
+++ b/extensions/amp-social-share/OWNERS
@@ -1,11 +1,11 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [
-        {name: 'ampproject/wg-ui-and-a11y'},
+        {name: 'ampproject/wg-components'},
         {name: 'ithinkihaveacat'},
         {name: 'ryancopley'},
       ],
diff --git a/extensions/amp-social-share/amp-social-share.md b/extensions/amp-social-share/amp-social-share.md
index 238068c667f59..ac43a1061a717 100644
--- a/extensions/amp-social-share/amp-social-share.md
+++ b/extensions/amp-social-share/amp-social-share.md
@@ -2,12 +2,12 @@
 $category@: ads-analytics
 formats:
   - websites
-teaser:
-  text: The share tracking feature is under development.
+experimental: true
+bento: true
 ---
 
 <!---
-Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+Copyright 2021 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.
@@ -24,20 +24,23 @@ limitations under the License.
 
 # amp-social-share
 
-Displays a social share button.
+## Usage
 
-## Overview
+The `amp-social-share` component displays a social share button for social platforms.
 
-The `amp-social-share` component displays a social share button for various social platform providers.
-
-## Examples
+{% call callout('Important', type='caution') %}
+Currently, none of the buttons generated by `amp-social-share` (including those for the pre-configured providers) have a label/accessible name that is exposed to assistive technologies (such as screen readers). Make sure to include an `aria-label` with a descriptive label, as otherwise these controls will just be announced as unlabelled "button" elements.
+{% endcall %}
 
 **Example: Basic social share button**
 
 The share button guesses some defaults for you for some pre-configured providers. It assumes that the current document canonical url is the URL you want to share and the page title is the text you want to share.
 
 ```html
-<amp-social-share type="twitter"></amp-social-share>
+<amp-social-share
+  type="twitter"
+  aria-label="Share on Twitter"
+></amp-social-share>
 ```
 
 **Example: Passing parameters**
@@ -51,37 +54,48 @@ When you want to pass parameters to the share endpoint, you can specify `data-pa
   height="44"
   data-param-text="Hello world"
   data-param-url="https://example.com/"
+  aria-label="Share on LinkedIn"
 >
 </amp-social-share>
 ```
 
 Linkedin is one of the pre-configured providers, so you do not need to provide the `data-share-endpoint` attribute.
 
-## Attributes
+### Standalone use outside valid AMP documents
 
-<table>
-  <tr>
-    <td width="40%"><strong>type (required)</strong></td>
-    <td>Selects a provider type. This is required for both pre-configured and non-configured providers.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-target</strong></td>
-    <td><p>Specifies the target in which to open the target. The default is <code>_blank</code> for all cases other than email/SMS on iOS, in which case the target is set to <code>_top</code>.</p>
-<p>Please note that we only suggest using this override for email.</p></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-share-endpoint</strong></td>
-    <td>This attribute is <strong>required for non-configured providers</strong>.
-<br>
-Some popular providers have pre-configured share endpoints. For details, see the <a href="#pre-configured-providers">Pre-configured Providers</a> section. For non-configured providers, you'll need to specify the share endpoint.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-param-*</strong></td>
-    <td>All <code>data-param-*</code> prefixed attributes are turned into URL parameters and passed to the share endpoint.</td>
-  </tr>
-</table>
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+#### Example
+
+The example below demonstrates `amp-social-share` component in standalone use.
+
+[example preview="top-frame" playground="false"]
+
+```html
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-social-share-1.0.css">
+  <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-1.0.js"></script>
+</head>
+<amp-social-share type="email"></amp-social-share>
+<amp-social-share type="twitter"></amp-social-share>
+<amp-social-share type="tumblr"></amp-social-share>
+<amp-bento-component>
+```
+
+[/example]
+
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-social-share-1.0.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
 
-## Pre-configured providers
+### Pre-configured providers
 
 The `amp-social-share` component provides [some pre-configured providers](0.1/amp-social-share-config.js) that know their sharing endpoints as well as some default parameters.
 
@@ -194,7 +208,7 @@ The `amp-social-share` component provides [some pre-configured providers](0.1/am
   </tr>
 </table>
 
-## Non-configured providers
+### Non-configured providers
 
 In addition to pre-configured providers, you can use non-configured providers by specifying additional attributes in the `amp-social-share` component.
 
@@ -207,13 +221,52 @@ The following example creates a share button through Facebook Messenger by setti
   type="facebookmessenger"
   data-share-endpoint="fb-messenger://share"
   data-param-text="Check out this article: TITLE - CANONICAL_URL"
+  aria-label="Share on Facebook Messenger"
 >
 </amp-social-share>
 ```
 
 As these providers are not pre-configured, you'll need to create the appropriate button image and styles for the provider.
 
-## Styles
+### Variable Substitution
+
+You can use [global AMP variables substitution](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md) in the `<amp-social-share>` element. In the example below, `TITLE` is substituted with the page title and `CANONICAL_URL` with the document's canonical URL.
+
+```html
+<amp-social-share
+  type="whatsapp"
+  data-param-text="Check out this article: TITLE - CANONICAL_URL"
+>
+</amp-social-share>
+```
+
+## Attributes
+
+### type (required)
+
+Selects a provider type. This is required for both pre-configured and non-configured providers.
+
+### data-target
+
+Specifies the target in which to open the target. The default is `_blank` for all cases other than email/SMS on iOS, in which case the target is set to `_top`.
+
+Please note that we only suggest using this override for email.
+
+### data-share-endpoint
+
+This attribute is required for non-configured providers.
+
+Some popular providers have pre-configured share endpoints. For details, see the Pre-configured Providers section. For non-configured providers, you'll need to specify the share endpoint.
+
+### data-param-\*
+
+All `data-param-*` prefixed attributes are turned into URL parameters and passed to the share endpoint.
+
+### aria-label
+
+By default, the `aria-label` attribute will be populated with `Share by type` where 'type' is the `type` attribute provided to the component. If a non-empty value is passed in to `aria-label` it will overwrite the default value.
+
+## Styling
 
 ### Default Styles
 
@@ -229,23 +282,59 @@ Sometimes you want to provide your own style. You can simply override the provid
 
 ```css
 amp-social-share[type='twitter'] {
+  color: blue;
   background: red;
-  background-image: url(datauri:svg/myownsvgicon);
 }
 ```
 
-## Variable Substitution
+When customizing the style of an `amp-social-share` icon please ensure that the customized icon meets the branding guidelines set out by the provider (e.g Twitter, Facebook, etc.)
 
-You can use [global AMP variables substitution](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md) in the `<amp-social-share>` element. In the example below, `TITLE` is substituted with the page title and `CANONICAL_URL` with the document's canonical URL.
+## Accessibility
 
-```html
-<amp-social-share
-  type="whatsapp"
-  data-param-text="Check out this article: TITLE - CANONICAL_URL"
->
-</amp-social-share>
+### Indication of focus
+
+The `amp-social-share` element defaults to a blue outline as a visible focus indicator. It also defaults `tabindex=0` making it easy for a user to follow along as he or she tabs through multiple `amp-social-share` elements used together on a page.
+
+The default focus indicator is achieved with the following CSS rule-set.
+
+```css
+amp-social-share:focus {
+  outline: #0389ff solid 2px;
+  outline-offset: 2px;
+}
 ```
 
-## Validation
+The default focus indicator can be overwritten by defining CSS styles for focus and including them within a `style` tag on an AMP HTML page. In the example below, the first CSS rule-set removes the focus indicator on all `amp-social-share` elements by setting the `outline` property to `none`. The second rule-set specifies a red outline (instead of the default blue) and also sets the `outline-offset` to be `3px` for all `amp-social-share` elements with the class `custom-focus`.
+
+```css
+amp-social-share:focus{
+  outline: none;
+}
+
+amp-social-share.custom-focus:focus {
+  outline: red solid 2px;
+  outline-offset: 3px;
+}
+```
+
+With these CSS rules, `amp-social-share` elements would not show the visible focus indicator unless they included the class `custom-focus` in which case they would have the red outlined indicator.
+
+### Color contrast
+
+Note that `amp-social-share` with a `type` value of `twitter`, `whatsapp`, or `line` will display a button with a foreground/background color combination that falls below the 3:1 threshold recommended for non-text content defined in [WCAG 2.1 SC 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html).
+
+Without sufficient contrast, content can be difficult to perceive and therefore difficult to identify. In extreme cases, content with low contrast may not be visible at all to people with colour perception impairments. In the case of the above share buttons, users may not be able to appropriately perceive/understand what the share controls are, what service they relate to.
+
+## Version notes
+
+The `1.0` version of `amp-social-share` has a few additional features that differentiate it from the `0.1` version.
 
-See [amp-social-share rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-social-share/validator-amp-social-share.protoascii) in the AMP validator specification.
+1. The default icons for pre-configured providers have been updated to reflect the
+   most up-to-date logos and colors from their associated companies so expect a new
+   set of logos when migrating to `1.0`.
+2. Both the foreground and background colors of the default icons can now be styled
+   with CSS. See the `Styling` section above for more information.
+3. Support for custom logos or text on the default icons is now included. If the
+   `amp-social-share` component has any children elements, they will now be displayed
+   instead of the default icon. (In `0.1` they would be overlaid on the existing
+   icon.)
diff --git a/extensions/amp-social-share/validator-amp-social-share.protoascii b/extensions/amp-social-share/validator-amp-social-share.protoascii
index 5b644b39dba4b..38e5d39e244ca 100644
--- a/extensions/amp-social-share/validator-amp-social-share.protoascii
+++ b/extensions/amp-social-share/validator-amp-social-share.protoascii
@@ -14,12 +14,27 @@
 # limitations under the license.
 #
 
-tags: {  # amp-social-share
+tags: {  # amp-social-share 1.0
+  html_format: AMP
+  tag_name: "SCRIPT"
+  satisfies: "amp-social-share 1.0"
+  excludes: "amp-social-share 0.1"
+  extension_spec: {
+    name: "amp-social-share"
+    version_name: "v1.0"
+    version: "1.0"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # amp-social-share 0.1 and latest
   html_format: AMP
   html_format: AMP4ADS
   tag_name: "SCRIPT"
+  satisfies: "amp-social-share 0.1"
+  excludes: "amp-social-share 1.0"
   extension_spec: {
     name: "amp-social-share"
+    version_name: "v0.1"
     version: "0.1"
     version: "latest"
     requires_usage: EXEMPTED
diff --git a/extensions/amp-soundcloud/0.1/amp-soundcloud.js b/extensions/amp-soundcloud/0.1/amp-soundcloud.js
index 69baf214bee59..7247391b4ddbc 100644
--- a/extensions/amp-soundcloud/0.1/amp-soundcloud.js
+++ b/extensions/amp-soundcloud/0.1/amp-soundcloud.js
@@ -27,8 +27,9 @@
  * </amp-soundcloud>
  */
 
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {setIsMediaComponent} from '../../../src/video-interface';
 import {userAssert} from '../../../src/log';
@@ -40,6 +41,9 @@ class AmpSoundcloud extends AMP.BaseElement {
 
     /** @private {?Element} */
     this.iframe_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -109,9 +113,32 @@ class AmpSoundcloud extends AMP.BaseElement {
 
     this.iframe_ = iframe;
 
+    this.pauseHelper_.updatePlaying(true);
+
     return this.loadPromise(iframe);
   }
 
+  /**@override*/
+  unlayoutCallback() {
+    const iframe = this.iframe_;
+    if (iframe) {
+      this.element.removeChild(iframe);
+      this.iframe_ = null;
+    }
+    this.pauseHelper_.updatePlaying(false);
+    return true;
+  }
+
+  /** @override */
+  unlayoutCallback() {
+    const iframe = this.iframe_;
+    if (iframe) {
+      this.element.removeChild(iframe);
+      this.iframe_ = null;
+    }
+    return true;
+  }
+
   /** @override */
   pauseCallback() {
     if (this.iframe_ && this.iframe_.contentWindow) {
diff --git a/extensions/amp-soundcloud/0.1/test/test-amp-soundcloud.js b/extensions/amp-soundcloud/0.1/test/test-amp-soundcloud.js
index 9ad8d13d82873..298990cf546ef 100644
--- a/extensions/amp-soundcloud/0.1/test/test-amp-soundcloud.js
+++ b/extensions/amp-soundcloud/0.1/test/test-amp-soundcloud.js
@@ -53,7 +53,7 @@ describes.realWin(
 
       doc.body.appendChild(scplayer);
       return scplayer
-        .build()
+        .buildInternal()
         .then(() => scplayer.layoutCallback())
         .then(() => scplayer);
     }
@@ -128,5 +128,17 @@ describes.realWin(
         /The data-trackid attribute is required for/
       );
     });
+
+    it('unlayout and relayout', async () => {
+      const scplayer = await getSCPlayer('1595551', true);
+      expect(scplayer.querySelector('iframe')).to.exist;
+
+      const unlayoutResult = scplayer.unlayoutCallback();
+      expect(unlayoutResult).to.be.true;
+      expect(scplayer.querySelector('iframe')).to.not.exist;
+
+      await scplayer.layoutCallback();
+      expect(scplayer.querySelector('iframe')).to.exist;
+    });
   }
 );
diff --git a/extensions/amp-soundcloud/0.1/test/validator-amp-soundcloud.html b/extensions/amp-soundcloud/0.1/test/validator-amp-soundcloud.html
index 0bbe6dc985c11..238dcf31252e0 100644
--- a/extensions/amp-soundcloud/0.1/test/validator-amp-soundcloud.html
+++ b/extensions/amp-soundcloud/0.1/test/validator-amp-soundcloud.html
@@ -23,7 +23,6 @@
     <meta charset="utf-8">
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>
      <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/extensions/amp-soundcloud/0.1/test/validator-amp-soundcloud.out b/extensions/amp-soundcloud/0.1/test/validator-amp-soundcloud.out
index 9ff3b3fb18aa9..a946c433e7014 100644
--- a/extensions/amp-soundcloud/0.1/test/validator-amp-soundcloud.out
+++ b/extensions/amp-soundcloud/0.1/test/validator-amp-soundcloud.out
@@ -24,7 +24,6 @@ FAIL
 |      <meta charset="utf-8">
 |      <link rel="canonical" href="amps.html">
 |      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|      <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |      <script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>
 |       <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>
 |      <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -39,12 +38,12 @@ FAIL
 |    <!-- invalid: visual mode must be 'true' or 'false'-->
 |    <amp-soundcloud height=166 data-trackid="243169232" data-visual
 >>   ^~~~~~~~~
-amp-soundcloud/0.1/test/validator-amp-soundcloud.html:39:2 The attribute 'data-visual' in tag 'amp-soundcloud' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-soundcloud)
+amp-soundcloud/0.1/test/validator-amp-soundcloud.html:38:2 The attribute 'data-visual' in tag 'amp-soundcloud' is set to the invalid value ''. (see https://amp.dev/documentation/components/amp-soundcloud)
 |                    layout="fixed-height"></amp-soundcloud>
 |    <!-- invalid: bad trackid-->
 |    <amp-soundcloud height=166 data-trackid="mahler_number_6.ogg" data-visual="false"
 >>   ^~~~~~~~~
-amp-soundcloud/0.1/test/validator-amp-soundcloud.html:42:2 The attribute 'data-trackid' in tag 'amp-soundcloud' is set to the invalid value 'mahler_number_6.ogg'. (see https://amp.dev/documentation/components/amp-soundcloud)
+amp-soundcloud/0.1/test/validator-amp-soundcloud.html:41:2 The attribute 'data-trackid' in tag 'amp-soundcloud' is set to the invalid value 'mahler_number_6.ogg'. (see https://amp.dev/documentation/components/amp-soundcloud)
 |                    layout="fixed-height"></amp-soundcloud>
 |    <!-- valid: responsive layout -->
 |    <amp-soundcloud height=166 width=42 data-trackid="243169232" data-visual="true"
diff --git a/extensions/amp-soundcloud/OWNERS b/extensions/amp-soundcloud/OWNERS
index e2c03a2a1e4fc..9031855618d46 100644
--- a/extensions/amp-soundcloud/OWNERS
+++ b/extensions/amp-soundcloud/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'asap'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'asap'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-soundcloud/amp-soundcloud.md b/extensions/amp-soundcloud/amp-soundcloud.md
index 2cd8db9476ac2..5043c89400a77 100644
--- a/extensions/amp-soundcloud/amp-soundcloud.md
+++ b/extensions/amp-soundcloud/amp-soundcloud.md
@@ -85,4 +85,4 @@ The value for this attribute is the ID of a playlist, an integer.</td>
 
 ## Validation
 
-See [amp-soundcloud rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-soundcloud/validator-amp-soundcloud.protoascii) in the AMP validator specification.
+See [amp-soundcloud rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-soundcloud/validator-amp-soundcloud.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-springboard-player/0.1/amp-springboard-player.js b/extensions/amp-springboard-player/0.1/amp-springboard-player.js
index 10164511fce18..f0225efa85eed 100644
--- a/extensions/amp-springboard-player/0.1/amp-springboard-player.js
+++ b/extensions/amp-springboard-player/0.1/amp-springboard-player.js
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {setIsMediaComponent} from '../../../src/video-interface';
@@ -41,6 +42,9 @@ class AmpSpringboardPlayer extends AMP.BaseElement {
 
     /** @private {?HTMLIFrameElement} */
     this.iframe_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -123,9 +127,23 @@ class AmpSpringboardPlayer extends AMP.BaseElement {
     this.applyFillContent(iframe);
     this.iframe_ = /** @type {HTMLIFrameElement} */ (iframe);
     this.element.appendChild(iframe);
+
+    this.pauseHelper_.updatePlaying(true);
+
     return this.loadPromise(iframe);
   }
 
+  /** @override */
+  unlayoutCallback() {
+    const iframe = this.iframe_;
+    if (iframe) {
+      this.element.removeChild(iframe);
+      this.iframe_ = null;
+    }
+    this.pauseHelper_.updatePlaying(false);
+    return true;
+  }
+
   /** @override */
   pauseCallback() {
     if (this.iframe_ && this.iframe_.contentWindow) {
@@ -135,27 +153,11 @@ class AmpSpringboardPlayer extends AMP.BaseElement {
 
   /** @override */
   createPlaceholderCallback() {
-    const placeholder = this.win.document.createElement('amp-img');
+    const placeholder = this.win.document.createElement('img');
     this.propagateAttributes(['aria-label'], placeholder);
-    placeholder.setAttribute(
-      'src',
-      'https://www.springboardplatform.com/storage/' +
-        encodeURIComponent(this.domain_) +
-        '/snapshots/' +
-        encodeURIComponent(this.contentId_) +
-        '.jpg'
-    );
-    /** Show default image for playlist */
-    if (this.mode_ == 'playlist') {
-      placeholder.setAttribute(
-        'src',
-        'https://www.springboardplatform.com/storage/default/' +
-          'snapshots/default_snapshot.png'
-      );
-    }
+    this.applyFillContent(placeholder);
     placeholder.setAttribute('placeholder', '');
     placeholder.setAttribute('referrerpolicy', 'origin');
-    placeholder.setAttribute('layout', 'fill');
     if (placeholder.hasAttribute('aria-label')) {
       placeholder.setAttribute(
         'alt',
@@ -164,6 +166,15 @@ class AmpSpringboardPlayer extends AMP.BaseElement {
     } else {
       placeholder.setAttribute('alt', 'Loading video');
     }
+    placeholder.setAttribute(
+      'src',
+      'https://www.springboardplatform.com/storage/' +
+        (this.mode_ == 'playlist'
+          ? 'default/snapshots/default_snapshot.png'
+          : `${encodeURIComponent(this.domain_)}/snapshots/${encodeURIComponent(
+              this.contentId_
+            )}.jpg`)
+    );
     return placeholder;
   }
 }
diff --git a/extensions/amp-springboard-player/0.1/test/test-amp-springboard-player.js b/extensions/amp-springboard-player/0.1/test/test-amp-springboard-player.js
index 6902b1dae7a9f..17c171dbfd9b1 100644
--- a/extensions/amp-springboard-player/0.1/test/test-amp-springboard-player.js
+++ b/extensions/amp-springboard-player/0.1/test/test-amp-springboard-player.js
@@ -41,7 +41,7 @@ describes.realWin(
       sp.setAttribute('layout', 'responsive');
       doc.body.appendChild(sp);
       return sp
-        .build()
+        .buildInternal()
         .then(() => {
           sp.layoutCallback();
         })
@@ -142,6 +142,25 @@ describes.realWin(
       );
     });
 
+    it('unlayout and relayout', async () => {
+      const bc = await getSpringboardPlayer({
+        'data-site-id': '261',
+        'data-mode': 'video',
+        'data-content-id': '1578473',
+        'data-player-id': 'test401',
+        'data-domain': 'test.com',
+        'data-items': '10',
+      });
+      expect(bc.querySelector('iframe')).to.exist;
+
+      const unlayoutResult = bc.unlayoutCallback();
+      expect(unlayoutResult).to.be.true;
+      expect(bc.querySelector('iframe')).to.not.exist;
+
+      await bc.layoutCallback();
+      expect(bc.querySelector('iframe')).to.exist;
+    });
+
     describe('createPlaceholderCallback', () => {
       it('should create a placeholder image', () => {
         return getSpringboardPlayer({
@@ -152,14 +171,14 @@ describes.realWin(
           'data-domain': 'test.com',
           'data-items': '10',
         }).then((kp) => {
-          const img = kp.querySelector('amp-img');
+          const img = kp.querySelector('img');
           expect(img).to.not.be.null;
           expect(img.getAttribute('src')).to.equal(
             'https://www.springboardplatform.com/storage/test.com' +
               '/snapshots/1578473.jpg'
           );
-          expect(img.getAttribute('layout')).to.equal('fill');
-          expect(img.hasAttribute('placeholder')).to.be.true;
+          expect(img).to.have.class('i-amphtml-fill-content');
+          expect(img).to.have.attribute('placeholder');
           expect(img.getAttribute('referrerpolicy')).to.equal('origin');
           expect(img.getAttribute('alt')).to.equal('Loading video');
         });
@@ -174,14 +193,14 @@ describes.realWin(
           'data-items': '10',
           'aria-label': 'sporty video',
         }).then((kp) => {
-          const img = kp.querySelector('amp-img');
+          const img = kp.querySelector('img');
           expect(img).to.not.be.null;
           expect(img.getAttribute('src')).to.equal(
             'https://www.springboardplatform.com/storage/test.com' +
               '/snapshots/1578473.jpg'
           );
-          expect(img.getAttribute('layout')).to.equal('fill');
-          expect(img.hasAttribute('placeholder')).to.be.true;
+          expect(img).to.have.class('i-amphtml-fill-content');
+          expect(img).to.have.attribute('placeholder');
           expect(img.getAttribute('referrerpolicy')).to.equal('origin');
           expect(img.getAttribute('aria-label')).to.equal('sporty video');
           expect(img.getAttribute('alt')).to.equal(
@@ -199,14 +218,14 @@ describes.realWin(
           'data-domain': 'test.com',
           'data-items': '10',
         }).then((kp) => {
-          const img = kp.querySelector('amp-img');
+          const img = kp.querySelector('img');
           expect(img).to.not.be.null;
           expect(img.getAttribute('src')).to.equal(
             'https://www.springboardplatform.com/storage/default/' +
               'snapshots/default_snapshot.png'
           );
-          expect(img.getAttribute('layout')).to.equal('fill');
-          expect(img.hasAttribute('placeholder')).to.be.true;
+          expect(img).to.have.class('i-amphtml-fill-content');
+          expect(img).to.have.attribute('placeholder');
           expect(img.getAttribute('referrerpolicy')).to.equal('origin');
         });
       });
diff --git a/extensions/amp-springboard-player/0.1/test/validator-amp-springboard-player.html b/extensions/amp-springboard-player/0.1/test/validator-amp-springboard-player.html
index accf7eb187d20..eda6f388ea3ef 100644
--- a/extensions/amp-springboard-player/0.1/test/validator-amp-springboard-player.html
+++ b/extensions/amp-springboard-player/0.1/test/validator-amp-springboard-player.html
@@ -23,7 +23,6 @@
     <meta charset="utf-8">
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <script async custom-element="amp-springboard-player" src="https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js"></script>
      <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/extensions/amp-springboard-player/0.1/test/validator-amp-springboard-player.out b/extensions/amp-springboard-player/0.1/test/validator-amp-springboard-player.out
index 732a12077a2a3..56e21bf286f2e 100644
--- a/extensions/amp-springboard-player/0.1/test/validator-amp-springboard-player.out
+++ b/extensions/amp-springboard-player/0.1/test/validator-amp-springboard-player.out
@@ -24,7 +24,6 @@ FAIL
 |      <meta charset="utf-8">
 |      <link rel="canonical" href="amps.html">
 |      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|      <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |      <script async custom-element="amp-springboard-player" src="https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js"></script>
 |       <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>
 |      <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -38,64 +37,64 @@ FAIL
 |    <!-- invalid: data-site-id must be numeric -->
 |    <amp-springboard-player data-site-id="a261" data-mode="video"
 >>   ^~~~~~~~~
-amp-springboard-player/0.1/test/validator-amp-springboard-player.html:38:2 The attribute 'data-site-id' in tag 'amp-springboard-player' is set to the invalid value 'a261'. (see https://amp.dev/documentation/components/amp-springboard-player)
+amp-springboard-player/0.1/test/validator-amp-springboard-player.html:37:2 The attribute 'data-site-id' in tag 'amp-springboard-player' is set to the invalid value 'a261'. (see https://amp.dev/documentation/components/amp-springboard-player)
 |        data-content-id="1578473" data-player-id="test401"
 |        data-domain="test.com" data-items="10"
 |        layout="fixed"width="480" height="270"></amp-springboard-player>
 |    <!-- invalid: data-player-id must be alphanumeric -->
 |    <amp-springboard-player data-site-id="261" data-mode="playlist"
 >>   ^~~~~~~~~
-amp-springboard-player/0.1/test/validator-amp-springboard-player.html:43:2 The attribute 'data-player-id' in tag 'amp-springboard-player' is set to the invalid value 'test 401'. (see https://amp.dev/documentation/components/amp-springboard-player)
+amp-springboard-player/0.1/test/validator-amp-springboard-player.html:42:2 The attribute 'data-player-id' in tag 'amp-springboard-player' is set to the invalid value 'test 401'. (see https://amp.dev/documentation/components/amp-springboard-player)
 |        data-content-id="1578473" data-player-id="test 401"
 |        data-domain="test.com" data-items="10"
 |        layout="fixed" width="480" height="270"></amp-springboard-player>
 |    <!-- invalid: data-content-id required -->
 |    <amp-springboard-player data-site-id="261" data-mode="video"
 >>   ^~~~~~~~~
-amp-springboard-player/0.1/test/validator-amp-springboard-player.html:48:2 The mandatory attribute 'data-content-id' is missing in tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
+amp-springboard-player/0.1/test/validator-amp-springboard-player.html:47:2 The mandatory attribute 'data-content-id' is missing in tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
 |        data-player-id="test401"
 |        data-domain="test.com" data-items="10"
 |        layout="fixed" width="480" height="270"></amp-springboard-player>
 |    <!-- invalid: data-domain required -->
 |    <amp-springboard-player data-site-id="261" data-mode="video"
 >>   ^~~~~~~~~
-amp-springboard-player/0.1/test/validator-amp-springboard-player.html:53:2 The mandatory attribute 'data-domain' is missing in tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
+amp-springboard-player/0.1/test/validator-amp-springboard-player.html:52:2 The mandatory attribute 'data-domain' is missing in tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
 |        data-content-id="1578473" data-player-id="test401"
 |        data-items="10"
 |        layout="fixed" width="480" height="270"></amp-springboard-player>
 |    <!-- invalid: data-items required -->
 |    <amp-springboard-player data-site-id="261" data-mode="video"
 >>   ^~~~~~~~~
-amp-springboard-player/0.1/test/validator-amp-springboard-player.html:58:2 The mandatory attribute 'data-items' is missing in tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
+amp-springboard-player/0.1/test/validator-amp-springboard-player.html:57:2 The mandatory attribute 'data-items' is missing in tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
 |        data-content-id="1578473" data-player-id="test401"
 |        data-domain="test.com"
 |        layout="fixed" width="480" height="270"></amp-springboard-player>
 |    <!-- invalid: data-mode required -->
 |    <amp-springboard-player data-site-id="261"
 >>   ^~~~~~~~~
-amp-springboard-player/0.1/test/validator-amp-springboard-player.html:63:2 The mandatory attribute 'data-mode' is missing in tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
+amp-springboard-player/0.1/test/validator-amp-springboard-player.html:62:2 The mandatory attribute 'data-mode' is missing in tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
 |        data-content-id="1578473" data-player-id="test401"
 |        data-domain="test.com" data-items="10"
 |        layout="fixed" width="480" height="270"></amp-springboard-player>
 |    <!-- invalid: data-player-id required -->
 |    <amp-springboard-player data-site-id="261" data-mode="video"
 >>   ^~~~~~~~~
-amp-springboard-player/0.1/test/validator-amp-springboard-player.html:68:2 The mandatory attribute 'data-player-id' is missing in tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
+amp-springboard-player/0.1/test/validator-amp-springboard-player.html:67:2 The mandatory attribute 'data-player-id' is missing in tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
 |        data-content-id="1578473"
 |        data-domain="test.com" data-items="10"
 |        layout="fixed" width="480" height="270"></amp-springboard-player>
 |    <!-- invalid: data-site-id required -->
 |    <amp-springboard-player data-mode="video"
 >>   ^~~~~~~~~
-amp-springboard-player/0.1/test/validator-amp-springboard-player.html:73:2 The mandatory attribute 'data-site-id' is missing in tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
+amp-springboard-player/0.1/test/validator-amp-springboard-player.html:72:2 The mandatory attribute 'data-site-id' is missing in tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
 |        data-content-id="1578473" data-player-id="test401"
 |        data-domain="test.com" data-items="10"
 |        layout="fixed" width="480" height="270"></amp-springboard-player>
 |    <!-- invalid: bad layout -->
 |    <amp-springboard-player data-site-id="261" data-mode="playlist"
 >>   ^~~~~~~~~
-amp-springboard-player/0.1/test/validator-amp-springboard-player.html:78:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
+amp-springboard-player/0.1/test/validator-amp-springboard-player.html:77:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-springboard-player'. (see https://amp.dev/documentation/components/amp-springboard-player)
 |        data-player-id="test401"
 |        layout="fixed-height" width="480" height="270"></amp-springboard-player>
 |  </body>
-|  </html>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-springboard-player/OWNERS b/extensions/amp-springboard-player/OWNERS
index db800acb81be4..f240d00748de7 100644
--- a/extensions/amp-springboard-player/OWNERS
+++ b/extensions/amp-springboard-player/OWNERS
@@ -1,12 +1,12 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [
         {name: 'em-predragmilosevic'},
-        {name: 'ampproject/wg-ui-and-a11y'},
+        {name: 'ampproject/wg-components'},
       ],
     },
   ],
diff --git a/extensions/amp-springboard-player/amp-springboard-player.md b/extensions/amp-springboard-player/amp-springboard-player.md
index 2ce938982237f..73b4959773456 100644
--- a/extensions/amp-springboard-player/amp-springboard-player.md
+++ b/extensions/amp-springboard-player/amp-springboard-player.md
@@ -78,4 +78,4 @@ The `width` and `height` attributes determine the aspect ratio of the player emb
 
 ## Validation
 
-See [amp-springboard-player rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-springboard-player/validator-amp-springboard-player.protoascii) in the AMP validator specification.
+See [amp-springboard-player rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-springboard-player/validator-amp-springboard-player.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-standalone/0.1/amp-standalone.js b/extensions/amp-standalone/0.1/amp-standalone.js
index 2a1aec1277020..488d2db2f7b71 100644
--- a/extensions/amp-standalone/0.1/amp-standalone.js
+++ b/extensions/amp-standalone/0.1/amp-standalone.js
@@ -80,7 +80,7 @@ export class StandaloneService {
    * @param {!Element} a
    */
   handleChromeStandalone_(a) {
-    const {target, origin} = a;
+    const {origin, target} = a;
     if (target === '_blank') {
       return;
     }
@@ -100,7 +100,7 @@ export class StandaloneService {
    * @return {boolean}
    */
   handleSafariStandalone_(a) {
-    const {target, href, origin} = a;
+    const {href, origin, target} = a;
     if (target === '_blank') {
       return true; // Allow the link navigate to proceed normally
     }
diff --git a/extensions/amp-sticky-ad/0.1/test/validator-amp-sticky-ad.out b/extensions/amp-sticky-ad/0.1/test/validator-amp-sticky-ad.out
index 0f6959939bc85..848158fff6070 100644
--- a/extensions/amp-sticky-ad/0.1/test/validator-amp-sticky-ad.out
+++ b/extensions/amp-sticky-ad/0.1/test/validator-amp-sticky-ad.out
@@ -42,4 +42,4 @@ amp-sticky-ad/0.1/test/validator-amp-sticky-ad.html:28:2 The extension 'amp-stic
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-amp-sticky-ad/0.1/test/validator-amp-sticky-ad.html:40:6 The tag 'amp-ad extension .js script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error. (see https://amp.dev/documentation/components/amp-ad)
+amp-sticky-ad/0.1/test/validator-amp-sticky-ad.html:40:6 The tag 'amp-ad extension script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error. (see https://amp.dev/documentation/components/amp-ad/)
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 ef34c930a107d..e6465a1c8b032 100644
--- a/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css
+++ b/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css
@@ -16,7 +16,7 @@
 
 amp-sticky-ad {
   position: fixed !important;
-  text-align:center;
+  text-align: center;
   bottom: 0 !important;
   left: 0;
   width: 100% !important;
@@ -26,8 +26,9 @@ amp-sticky-ad {
   opacity: 1 !important;
   background-image: none !important;
   background-color: #fff;
-  box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2) !important;
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2) !important;
   margin-bottom: 0 !important;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 
 amp-sticky-ad-top-padding {
@@ -58,7 +59,6 @@ amp-sticky-ad[visible] {
   display: block;
 }
 
-
 .amp-sticky-ad-close-button {
   position: absolute;
   visibility: hidden;
@@ -71,7 +71,7 @@ amp-sticky-ad[visible] {
   background-position: 9px center;
   background-color: #fff;
   background-repeat: no-repeat;
-  box-shadow: 0 -1px 1px 0 rgba(0,0,0, 0.2);
+  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
   border: none;
   border-radius: 12px 0 0 0;
 }
@@ -90,7 +90,7 @@ amp-sticky-ad[visible] > .amp-sticky-ad-close-button {
   bottom: 0;
 }
 
-[dir=rtl] .amp-sticky-ad-close-button {
+[dir='rtl'] .amp-sticky-ad-close-button {
   right: auto;
   left: 0;
   border-top-left-radius: 0;
@@ -98,7 +98,7 @@ amp-sticky-ad[visible] > .amp-sticky-ad-close-button {
   background-position: 6px center;
 }
 
-[dir=rtl] .amp-sticky-ad-close-button:before {
+[dir='rtl'] .amp-sticky-ad-close-button:before {
   right: -20px;
   left: 0;
 }
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 f98ea2c2b4a1e..0bb625ae79f45 100644
--- a/extensions/amp-sticky-ad/1.0/amp-sticky-ad.js
+++ b/extensions/amp-sticky-ad/1.0/amp-sticky-ad.js
@@ -15,7 +15,7 @@
  */
 
 import {CSS} from '../../../build/amp-sticky-ad-1.0.css';
-import {CommonSignals} from '../../../src/common-signals';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
 import {Services} from '../../../src/services';
 import {
   computedStyle,
@@ -57,6 +57,7 @@ class AmpStickyAd extends AMP.BaseElement {
   buildCallback() {
     this.viewport_ = this.getViewport();
     this.element.classList.add('i-amphtml-sticky-ad-layout');
+
     const children = this.getRealChildren();
     userAssert(
       children.length == 1 && children[0].tagName == 'AMP-AD',
@@ -70,7 +71,7 @@ class AmpStickyAd extends AMP.BaseElement {
       dev().assertElement(this.ad_)
     )
       .then((ad) => {
-        return ad.whenBuilt();
+        return ad.build();
       })
       .then(() => {
         return this.mutateElement(() => {
@@ -98,11 +99,6 @@ class AmpStickyAd extends AMP.BaseElement {
       const borderBottom = this.element./*OK*/ offsetHeight;
       this.viewport_.updatePaddingBottom(borderBottom);
       const owners = Services.ownersForDoc(this.element);
-      owners.updateInViewport(
-        this.element,
-        dev().assertElement(this.ad_),
-        true
-      );
       owners.scheduleLayout(this.element, dev().assertElement(this.ad_));
     }
     return Promise.resolve();
@@ -125,7 +121,12 @@ class AmpStickyAd extends AMP.BaseElement {
   }
 
   /** @override */
-  collapsedCallback() {
+  collapsedCallback(element) {
+    // We will only collapse the stick-ad when the ad collapses. The analytics
+    // element will collapse after it's done initializing, which is normal.
+    if (element !== this.ad_) {
+      return;
+    }
     this.collapsed_ = true;
     this.visible_ = false;
     toggle(this.element, false);
@@ -187,7 +188,7 @@ class AmpStickyAd extends AMP.BaseElement {
    */
   scheduleLayoutForAd_() {
     whenUpgradedToCustomElement(dev().assertElement(this.ad_)).then((ad) => {
-      ad.whenBuilt().then(this.layoutAd_.bind(this));
+      ad.build().then(() => this.layoutAd_());
     });
   }
 
@@ -199,7 +200,6 @@ class AmpStickyAd extends AMP.BaseElement {
   layoutAd_() {
     const ad = dev().assertElement(this.ad_);
     const owners = Services.ownersForDoc(this.element);
-    owners.updateInViewport(this.element, ad, true);
     owners.scheduleLayout(this.element, ad);
     // Wait for the earliest: `render-start` or `load-end` signals.
     // `render-start` is expected to arrive first, but it's not emitted by
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 0eb0c1c0c59fc..62fb1bfe3672c 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
@@ -43,7 +43,7 @@ describes.realWin(
     let addToFixedLayerStub, addToFixedLayerPromise;
     const adUpgradedToCustomElementPromise = Promise.resolve();
     describe('with valid child 1.0', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         win = env.win;
         ampStickyAd = win.document.createElement('amp-sticky-ad');
         ampStickyAd.setAttribute('layout', 'nodisplay');
@@ -54,8 +54,8 @@ describes.realWin(
         });
         ampStickyAd.appendChild(ampAd);
         win.document.body.appendChild(ampStickyAd);
-        ampStickyAd.build();
-        impl = ampStickyAd.implementation_;
+        ampStickyAd.buildInternal();
+        impl = await ampStickyAd.getImpl(false);
         addToFixedLayerPromise = Promise.resolve();
         addToFixedLayerStub = env.sandbox
           .stub(impl.viewport_, 'addToFixedLayer')
@@ -210,27 +210,26 @@ describes.realWin(
         });
       });
 
-      it('should wait for built and render-start signals', () => {
+      it('should wait for built and render-start signals', async () => {
         impl.vsync_.mutate = function (callback) {
           callback();
         };
         const layoutAdSpy = env.sandbox.spy(impl, 'layoutAd_');
         impl.scheduleLayoutForAd_();
         expect(layoutAdSpy).to.not.been.called;
-        impl.ad_.signals().signal('built');
-        return adUpgradedToCustomElementPromise.then(() => {
-          return impl.ad_
-            .signals()
-            .whenSignal('built')
-            .then(() => {
-              expect(layoutAdSpy).to.be.called;
-              expect(ampStickyAd).to.not.have.attribute('visible');
-              impl.ad_.signals().signal('render-start');
-              return poll('visible attribute must be set', () => {
-                return ampStickyAd.hasAttribute('visible');
-              });
-            });
-        });
+
+        await adUpgradedToCustomElementPromise;
+        const ad = impl.ad_;
+        ad.signals().signal('built');
+        await ad.signals().whenSignal('built');
+        await new Promise(setTimeout);
+        expect(layoutAdSpy).to.be.called;
+        expect(ampStickyAd).to.not.have.attribute('visible');
+
+        ad.signals().signal('render-start');
+        await poll('visible attribute must be set', () =>
+          ampStickyAd.hasAttribute('visible')
+        );
       });
 
       it('should not allow container to be set semi-transparent', () => {
@@ -293,9 +292,9 @@ describes.realWin(
         win.document.body.appendChild(ampStickyAd);
       });
 
-      it('should not build when child is not ad', () => {
+      it('should not build when child is not ad', async () => {
         ampStickyAd.appendChild(ampImg);
-        const impl = ampStickyAd.implementation_;
+        const impl = await ampStickyAd.getImpl(false);
         allowConsoleError(() => {
           expect(() => impl.buildCallback()).to.throw(
             /amp-sticky-ad must have a single amp-ad child/
@@ -303,10 +302,10 @@ describes.realWin(
         });
       });
 
-      it('should not build when has more than 1 children', () => {
+      it('should not build when has more than 1 children', async () => {
         ampStickyAd.appendChild(ampAd1);
         ampStickyAd.appendChild(ampAd2);
-        const impl = ampStickyAd.implementation_;
+        const impl = await ampStickyAd.getImpl(false);
 
         allowConsoleError(() => {
           expect(() => impl.buildCallback()).to.throw(
@@ -337,7 +336,7 @@ describes.realWin(
     let ampStickyAd;
     let impl;
     let addToFixedLayerPromise;
-    beforeEach(() => {
+    beforeEach(async () => {
       win = env.win;
       ampStickyAd = win.document.createElement('amp-sticky-ad');
       ampStickyAd.setAttribute('layout', 'nodisplay');
@@ -348,13 +347,13 @@ describes.realWin(
       });
       ampStickyAd.appendChild(ampAd);
       win.document.body.appendChild(ampStickyAd);
-      ampStickyAd.build();
-      impl = ampStickyAd.implementation_;
+      ampStickyAd.buildInternal();
+      impl = await ampStickyAd.getImpl(false);
       addToFixedLayerPromise = Promise.resolve();
       env.sandbox
         .stub(impl.viewport_, 'addToFixedLayer')
         .callsFake(() => addToFixedLayerPromise);
-      return ampAd.implementation_.upgradeCallback();
+      return impl.upgradeCallback();
     });
 
     // TODO(zhouyx, #18574): Fix failing borderWidth check and re-enable.
diff --git a/extensions/amp-sticky-ad/1.0/test/validator-amp-sticky-ad.out b/extensions/amp-sticky-ad/1.0/test/validator-amp-sticky-ad.out
index dbe87049d9129..bbcaf1efcc86b 100644
--- a/extensions/amp-sticky-ad/1.0/test/validator-amp-sticky-ad.out
+++ b/extensions/amp-sticky-ad/1.0/test/validator-amp-sticky-ad.out
@@ -40,4 +40,4 @@ PASS
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-amp-sticky-ad/1.0/test/validator-amp-sticky-ad.html:40:6 The tag 'amp-ad extension .js script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error. (see https://amp.dev/documentation/components/amp-ad)
+amp-sticky-ad/1.0/test/validator-amp-sticky-ad.html:40:6 The tag 'amp-ad extension script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error. (see https://amp.dev/documentation/components/amp-ad/)
diff --git a/extensions/amp-sticky-ad/OWNERS b/extensions/amp-sticky-ad/OWNERS
index d46b049c57dd3..25a5019d833c2 100644
--- a/extensions/amp-sticky-ad/OWNERS
+++ b/extensions/amp-sticky-ad/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-sticky-ad/amp-sticky-ad.md b/extensions/amp-sticky-ad/amp-sticky-ad.md
index 5861a446b8232..35f27ec67f422 100644
--- a/extensions/amp-sticky-ad/amp-sticky-ad.md
+++ b/extensions/amp-sticky-ad/amp-sticky-ad.md
@@ -24,20 +24,22 @@ limitations under the License.
 
 # amp-sticky-ad
 
-## Behavior
-
-- There can be only one `<amp-sticky-ad>` in an AMP document. The `<amp-sticky-ad>` should only have one direct child: `<amp-ad>`. **Note**: Make sure you include any required scripts for the `<amp-ad>` component.
-- The sticky ad appears at the bottom of a page.
-- The sticky ad introduces a full-width blank container and then fills the sticky ad based on the width and height of the `<amp-ad>`.
-- The height of the sticky-ad is whatever its child needs up to its max-height.
-- The max-height of the sticky-ad is 100px, if the height exceeds 100px then the height would be 100px and overflow content will be hidden.
-- The width of the sticky-ad is set to 100% using CSS and cannot be overridden.
-- The opacity of the sticky-ad is set to 1 using CSS and cannot be overridden.
-- The background color of the sticky-ad can be customized to match the page style. However, any semi-transparent or transparent background will not be allowed and will be changed to a non-transparent color.
-- When scrolled to the bottom of the page, the viewport is automatically padded with the additional height of the sticky ad, so that no content is ever hidden.
-- When in landscape mode, the sticky ad is center-aligned.
-- The sticky ad can be dismissed and removed by a close button.
-- If no ad is filled, the sticky ad container will collapse and will no longer be visible.
+## Usage
+
+Provides a way to display and stick ad content at the bottom of the page.
+
+-   There can be only one `<amp-sticky-ad>` in an AMP document. The `<amp-sticky-ad>` should only have one direct child: `<amp-ad>`. **Note**: Make sure you include any required scripts for the `<amp-ad>` component.
+-   The sticky ad appears at the bottom of a page.
+-   The sticky ad introduces a full-width blank container and then fills the sticky ad based on the width and height of the `<amp-ad>`.
+-   The height of the sticky-ad is whatever its child needs up to its max-height.
+-   The max-height of the sticky-ad is 100px, if the height exceeds 100px then the height would be 100px and overflow content will be hidden.
+-   The width of the sticky-ad is set to 100% using CSS and cannot be overridden.
+-   The opacity of the sticky-ad is set to 1 using CSS and cannot be overridden.
+-   The background color of the sticky-ad can be customized to match the page style. However, any semi-transparent or transparent background will not be allowed and will be changed to a non-transparent color.
+-   When scrolled to the bottom of the page, the viewport is automatically padded with the additional height of the sticky ad, so that no content is ever hidden.
+-   When in landscape mode, the sticky ad is center-aligned.
+-   The sticky ad can be dismissed and removed by a close button.
+-   If no ad is filled, the sticky ad container will collapse and will no longer be visible.
 
 Example:
 
@@ -55,21 +57,18 @@ Example:
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>layout (required)</strong></td>
-    <td>Must be set to <code>nodisplay</code>.</td>
-  </tr>
-</table>
+### layout (required)
+
+Must be set to `nodisplay`.
 
 ## Styling
 
 The `amp-sticky-ad` component can be styled with standard CSS.
 
-- The sticky ad container style can be set through the `amp-sticky-ad` CSS class.
-- The close button style can be set through the `amp-sticky-ad-close-button` CSS class.
-- The padding bar between the ad and the close button style can be set through the `amp-sticky-ad-top-padding` CSS class.
+-   The sticky ad container style can be set through the `amp-sticky-ad` CSS class.
+-   The close button style can be set through the `amp-sticky-ad-close-button` CSS class.
+-   The padding bar between the ad and the close button style can be set through the `amp-sticky-ad-top-padding` CSS class.
 
 ## Validation
 
-See [amp-sticky-ad rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-sticky-ad/validator-amp-sticky-ad.protoascii) in the AMP validator specification.
+See [amp-sticky-ad rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-sticky-ad/validator-amp-sticky-ad.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-story-360/0.1/amp-story-360.css b/extensions/amp-story-360/0.1/amp-story-360.css
new file mode 100644
index 0000000000000..086eccee919a3
--- /dev/null
+++ b/extensions/amp-story-360/0.1/amp-story-360.css
@@ -0,0 +1,153 @@
+
+/**
+ * Copyright 2020 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.
+ */
+
+amp-story-360 canvas {
+  position: absolute; /* fixes Safari bug */
+  width: 100% !important;
+  height: 100% !important;
+}
+
+amp-story-360 amp-img {
+  opacity: 0 !important;
+}
+
+.i-amphtml-story-360-activate-button {
+  position: absolute !important;
+  bottom: 12px !important;
+  right: 12px !important;
+  background: rgba(0, 0, 0, .8) !important;
+  color: white !important;
+  outline: none !important;
+  border: none !important;
+  padding: 6px !important;
+  padding-left: 10px !important;
+  border-radius: 18px !important;
+  font-size: 12px !important;
+  font-family: 'Roboto', sans-serif !important;
+  display: flex !important;
+  align-items: center !important;
+  z-index: 100000 !important;
+}
+
+.i-amphtml-story-360-activate-button-icon {
+  box-sizing: border-box !important;
+  margin-left: 5px !important;
+  font-size: 6px !important;
+  width: 24px !important;
+  height: 24px !important;
+  border: 1px solid white !important;
+  border-radius: 100% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font-weight: 700 !important;
+  position: relative !important;
+}
+
+.i-amphtml-story-360-activate-button-icon-svg {
+  position: absolute !important;
+  width: calc(100% + 2px) !important;
+  height: calc(100% + 2px) !important;
+  left: -1px !important;
+  top: -1px !important;
+}
+
+[active] .i-amphtml-story-360-activate-button-icon-svg {
+  animation: rotate 1s 1s !important;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.i-amphtml-story-360-discovery {
+  pointer-events: none !important;
+  position: absolute !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 66% !important;
+  perspective: 550px !important;
+  perspective-origin: center calc(100% - 145px) !important;
+  background: linear-gradient(transparent, rgba(0, 0, 0, .9)) !important;
+  animation: fadeOut 1s 4s forwards ease-in-out !important;
+  z-index: 100000 !important;
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.i-amphtml-story-360-discovery-animation {
+  position: absolute !important;
+  bottom: 95px !important;
+  left: calc(50% - 30px) !important;
+  width:  55px !important;
+  height: 100px !important;
+  border: 1px solid white !important;
+  border-radius: 10px !important;
+  animation: lookAround 4s !important;
+}
+
+.i-amphtml-story-360-discovery-animation:before {
+  content: "" !important;
+  position: absolute !important;
+  border-top: 1px solid white !important;
+  width: 10px !important;
+  top: 5px !important;
+  left: calc(50% - 5px) !important;
+}
+
+@keyframes lookAround {
+  0% {
+    animation-timing-function: ease-in-out;
+    transform: rotate3d(0, 0, 0, 0) translate3d(0, 0, 0);
+  }
+  25% {
+    animation-timing-function: ease-in-out;
+    transform: rotateY(45deg) rotateX(20deg) translate3d(-100px, 10px, 0);
+  }
+  50% {
+    animation-timing-function: ease-in-out;
+    transform:  rotateX(-40deg) translate3d(0, -50px, 0);
+  }
+  75% {
+    animation-timing-function: ease-in-out;
+    transform: rotateY(-45deg) rotateX(20deg) translate3d(100px, 10px, 0);
+  }
+  100% {
+    animation-timing-function: ease-in-out;
+    transform: rotate3d(0, 0, 0, 0) translate3d(0, 0, 0);
+  }
+}
+
+.i-amphtml-story-360-discovery-text {
+  font-family: 'Roboto', sans-serif !important;
+  position: absolute !important;
+  bottom: 40px !important;
+  width: 100% !important;
+  font-size: 16px !important;
+  text-align: center !important;
+  color: white !important;
+}
diff --git a/extensions/amp-story-360/0.1/amp-story-360.js b/extensions/amp-story-360/0.1/amp-story-360.js
new file mode 100644
index 0000000000000..e9770f038c2b9
--- /dev/null
+++ b/extensions/amp-story-360/0.1/amp-story-360.js
@@ -0,0 +1,932 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * Must be served over https for permissions API to work.
+ * For local development, run amp --host="192.168.44.47" --https --extensions=amp-story-360
+ */
+
+import {
+  Action,
+  StateProperty,
+} from '../../../extensions/amp-story/1.0/amp-story-store-service';
+import {CSS} from '../../../build/amp-story-360-0.1.css';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
+import {LocalizedStringId} from '../../../src/localized-strings';
+import {Matrix, Renderer} from '../../../third_party/zuho/zuho';
+import {Services} from '../../../src/services';
+import {closest, whenUpgradedToCustomElement} from '../../../src/dom';
+import {dev, user, userAssert} from '../../../src/log';
+import {htmlFor} from '../../../src/static-template';
+import {isLayoutSizeDefined} from '../../../src/layout';
+import {listenOncePromise} from '../../../src/event-helper';
+import {timeStrToMillis} from '../../../extensions/amp-story/1.0/utils';
+
+/** @const {string} */
+const TAG = 'AMP_STORY_360';
+
+/**
+ * readyState for first rendrable frame of video element.
+ * @const {number}
+ */
+const HAVE_CURRENT_DATA = 2;
+
+/**
+ * Centers heading and pitch value between [-90; 90]
+ * @const {number}
+ */
+const CENTER_OFFSET = 90;
+
+/**
+ * Minimum distance from active page to activate WebGL context.
+ * @const {number}
+ */
+const MIN_WEBGL_DISTANCE = 2;
+
+/**
+ * Generates the template for the permission button.
+ *
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildActivateButtonTemplate = (element) => htmlFor(element)`
+    <button class="i-amphtml-story-360-activate-button" role="button">
+      <span class="i-amphtml-story-360-activate-text"></span>
+      <span class="i-amphtml-story-360-activate-button-icon"
+        >360°
+        <svg
+          class="i-amphtml-story-360-activate-button-icon-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <defs>
+            <linearGradient id="i-amphtml-story-360-activate-gradient">
+              <stop stop-color="white" stop-opacity=".3"></stop>
+              <stop offset="1" stop-color="white"></stop>
+            </linearGradient>
+            <ellipse
+              id="i-amphtml-story-360-activate-ellipse"
+              ry="11.5"
+              rx="7.5"
+              cy="12"
+              cx="12"
+              stroke="url(#i-amphtml-story-360-activate-gradient)"
+            ></ellipse>
+          </defs>
+          <use xlink:href="#i-amphtml-story-360-activate-ellipse"></use>
+          <use
+            xlink:href="#i-amphtml-story-360-activate-ellipse"
+            transform="rotate(90, 12, 12)"
+          ></use>
+        </svg>
+      </span>
+    </button>
+  `;
+
+/**
+ * Generates the template for the gyroscope feature discovery animation.
+ *
+ * NOTE: i-amphtml-story-360-discovery is used in maybeShowDiscoveryAnimation_
+ * and must be changed in both places if updated.
+ *
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildDiscoveryTemplate = (element) => htmlFor(element)`
+    <div class="i-amphtml-story-360-discovery" aria-live="polite">
+      <div class="i-amphtml-story-360-discovery-animation"></div>
+      <span class="i-amphtml-story-360-discovery-text"></span>
+    </div>
+  `;
+
+/**
+ * @param {number} deg
+ * @return {number}
+ * */
+function deg2rad(deg) {
+  return (deg * Math.PI) / 180;
+}
+
+/**
+ * Internal helper class representing a camera orientation (POV) in polar
+ * coordinates.
+ */
+class CameraOrientation {
+  /**
+   * @param {number} theta
+   * @param {number} phi
+   * @param {number} scale
+   */
+  constructor(theta, phi, scale) {
+    this.theta = theta;
+    this.phi = phi;
+    this.scale = scale;
+  }
+
+  /**
+   * @param {number} heading
+   * @param {number} pitch
+   * @param {number} zoom
+   * @return {!CameraOrientation}
+   */
+  static fromDegrees(heading, pitch, zoom) {
+    return new CameraOrientation(
+      deg2rad(-pitch - CENTER_OFFSET),
+      deg2rad(CENTER_OFFSET + heading),
+      1 / zoom
+    );
+  }
+
+  /**
+   * @return {!Float32Array}
+   */
+  get rotation() {
+    return Matrix.mul(
+      3,
+      Matrix.rotation(3, 1, 2, this.theta),
+      Matrix.rotation(3, 0, 1, this.phi)
+    );
+  }
+}
+
+/**
+ * Internal helper class generating a sequence of frame by frame orientations
+ * from a set of 2 or more CameraOrientation target points and an animation
+ * duration (approximate duration in ms based on 60FPS refresh rate).
+ */
+class CameraAnimation {
+  /**
+   * @param {number} durationMs
+   * @param {!Array<!CameraOrientation>} orientations
+   */
+  constructor(durationMs, orientations) {
+    this.maxFrame = (60 / 1000) * durationMs;
+    this.orientations = orientations;
+    this.currentHeadingIndex = 0;
+    this.currentFrame = 0;
+    this.framesPerSection = this.maxFrame / (orientations.length - 1);
+  }
+
+  /**
+   * @param {number} x
+   * @return {number}
+   * @private
+   */
+  easeInOutQuad_(x) {
+    return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
+  }
+
+  /**
+   * Returns the CameraOrientation for the next frame, or null if the animation
+   * is over.
+   * @return {?CameraOrientation}
+   */
+  getNextOrientation() {
+    if (
+      this.currentHeadingIndex < 0 ||
+      this.currentFrame == this.maxFrame - 1
+    ) {
+      // Animation ended.
+      return null;
+    }
+    this.currentFrame++;
+    const lastFrameOfCurrentSection =
+      (this.currentHeadingIndex + 1) * this.framesPerSection;
+    if (this.currentFrame >= lastFrameOfCurrentSection) {
+      this.currentHeadingIndex++;
+      if (this.currentHeadingIndex == this.orientations.length) {
+        // End of animation.
+        this.currentHeadingIndex = -1;
+        return null;
+      } else {
+        return this.orientations[this.currentHeadingIndex];
+      }
+    }
+    const toNext = this.orientations[this.currentHeadingIndex + 1];
+    const from = this.orientations[this.currentHeadingIndex];
+    if (!toNext) {
+      // End of animation.
+      this.currentHeadingIndex = -1;
+      return null;
+    }
+    const easing = this.easeInOutQuad_(
+      (this.currentFrame % this.framesPerSection) / this.framesPerSection
+    );
+    return new CameraOrientation(
+      from.theta + (toNext.theta - from.theta) * easing,
+      from.phi + (toNext.phi - from.phi) * easing,
+      from.scale + (toNext.scale - from.scale) * easing
+    );
+  }
+}
+
+export class AmpStory360 extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {?../../../src/service/localization.LocalizationService} */
+    this.localizationService_ = null;
+
+    /** @private {!Array<!CameraOrientation>} */
+    this.orientations_ = [];
+
+    /** @private {number} */
+    this.duration_ = 0;
+
+    /** @private {?Element} */
+    this.canvas_ = null;
+
+    /** @private {?Renderer} */
+    this.renderer_ = null;
+
+    /** @private {?CameraAnimation} */
+    this.animation_ = null;
+
+    /** @private {boolean} */
+    this.isPlaying_ = false;
+
+    /** @private {boolean} */
+    this.isReady_ = false;
+
+    /** @private {boolean} */
+    this.gyroscopeControls_ = false;
+
+    /** @private {?Element} */
+    this.activateButton_ = null;
+
+    /** @private {?../../../extensions/amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */
+    this.storeService_ = null;
+
+    /** @private {?string} */
+    this.pageId_ = null;
+
+    /** @private {boolean} */
+    this.isOnActivePage_ = false;
+
+    /** @private {?number} */
+    this.distance_ = null;
+
+    /** @private {number} */
+    this.sceneHeading_ = 0;
+
+    /** @private {number} */
+    this.scenePitch_ = 0;
+
+    /** @private {number} */
+    this.sceneRoll_ = 0;
+
+    /** @private {?Element|?EventTarget} */
+    this.ampVideoEl_ = null;
+
+    /** @private {?Element} */
+    this.image_ = null;
+
+    /** @private {number} */
+    this.headingOffset_ = 0;
+
+    /** @private WebGL extension for lost context. */
+    this.lostGlContext_ = null;
+
+    /** @private {!Array<number>} */
+    this.rot_ = null;
+  }
+
+  /** @override */
+  buildCallback() {
+    const attr = (name) => this.element.getAttribute(name);
+    const attrAsFloat = (name, fallbackValue = 0) => {
+      return parseFloat(attr(name) || fallbackValue);
+    };
+
+    if (attr('duration')) {
+      this.duration_ = timeStrToMillis(attr('duration')) || 0;
+    }
+
+    const startHeading = attrAsFloat('heading-start');
+    const startPitch = attrAsFloat('pitch-start');
+    const startZoom = attrAsFloat('zoom-start', 1);
+    this.orientations_.push(
+      CameraOrientation.fromDegrees(startHeading, startPitch, startZoom)
+    );
+
+    if (
+      attr('heading-end') !== undefined ||
+      attr('pitch-end') !== undefined ||
+      attr('zoom-end') !== undefined
+    ) {
+      const endHeading = attrAsFloat('heading-end', startHeading);
+      const endPitch = attrAsFloat('pitch-end', startPitch);
+      const endZoom = attrAsFloat('zoom-end', startZoom);
+      this.orientations_.push(
+        CameraOrientation.fromDegrees(endHeading, endPitch, endZoom)
+      );
+    }
+
+    if (
+      attr('scene-heading') !== undefined ||
+      attr('scene-pitch') !== undefined ||
+      attr('scene-roll') !== undefined
+    ) {
+      this.sceneHeading_ = attrAsFloat('scene-heading');
+      this.scenePitch_ = attrAsFloat('scene-pitch');
+      this.sceneRoll_ = attrAsFloat('scene-roll');
+    }
+
+    const container = this.element.ownerDocument.createElement('div');
+    this.canvas_ = this.element.ownerDocument.createElement('canvas');
+    this.element.appendChild(container);
+    container.appendChild(this.canvas_);
+    this.applyFillContent(container, /* replacedContent */ true);
+
+    // Mutation observer for distance attribute
+    const config = {attributes: true, attributeFilter: ['distance']};
+    const callback = (mutationsList) => {
+      this.distance_ = parseInt(
+        mutationsList[0].target.getAttribute('distance'),
+        10
+      );
+      this.restoreOrLoseGlContext_();
+    };
+    const observer = new MutationObserver(callback);
+    this.getPage_() && observer.observe(this.getPage_(), config);
+
+    // Initialize all services before proceeding
+    return Promise.all([
+      Services.storyStoreServiceForOrNull(this.win).then((storeService) => {
+        this.storeService_ = storeService;
+
+        storeService.subscribe(StateProperty.PAGE_SIZE, () =>
+          this.resizeRenderer_()
+        );
+
+        if (attr('controls') === 'gyroscope') {
+          storeService.subscribe(
+            StateProperty.GYROSCOPE_PERMISSION_STATE,
+            (permissionState) => this.onPermissionState_(permissionState)
+          );
+          this.checkGyroscopePermissions_();
+        }
+
+        storeService.subscribe(StateProperty.CURRENT_PAGE_ID, (currPageId) => {
+          this.isOnActivePage_ = currPageId === this.getPageId_();
+          this.onPageNavigation_();
+          this.maybeShowDiscoveryAnimation_();
+        });
+
+        this.storeService_.subscribe(StateProperty.PAUSED_STATE, (isPaused) => {
+          if (this.isOnActivePage_) {
+            isPaused ? this.pause_() : this.play_();
+          }
+        });
+      }),
+
+      Services.localizationServiceForOrNull(this.element).then(
+        (localizationService) => {
+          this.localizationService_ = localizationService;
+        }
+      ),
+    ]).then(() => Promise.resolve());
+  }
+
+  /**
+   * @private
+   * @return {string} the page id
+   */
+  getPageId_() {
+    if (this.pageId_ == null) {
+      this.pageId_ = this.getPage_().getAttribute('id');
+    }
+    return this.pageId_;
+  }
+
+  /**
+   * @private
+   * @return {?Element} the parent amp-story-page
+   */
+  getPage_() {
+    return closest(
+      dev().assertElement(this.element),
+      (el) => el.tagName.toLowerCase() === 'amp-story-page'
+    );
+  }
+
+  /** @private */
+  onPageNavigation_() {
+    if (this.isOnActivePage_) {
+      this.play_();
+    } else {
+      this.pause_();
+      this.rewind_();
+    }
+  }
+
+  /** @private */
+  restoreOrLoseGlContext_() {
+    if (!this.renderer_) {
+      return;
+    }
+    if (this.distance_ < MIN_WEBGL_DISTANCE) {
+      if (this.renderer_.gl.isContextLost()) {
+        this.lostGlContext_.restoreContext();
+      }
+    } else if (!this.renderer_.gl.isContextLost()) {
+      this.lostGlContext_.loseContext();
+    }
+  }
+
+  /**
+   * @param {string} permissionState
+   * @private
+   */
+  onPermissionState_(permissionState) {
+    if (this.activateButton_) {
+      this.mutateElement(() => {
+        this.getPage_().removeChild(this.activateButton_);
+        this.activateButton_ = null;
+      });
+    }
+    if (permissionState === 'granted') {
+      this.enableGyroscope_();
+    } else if (permissionState === 'denied') {
+      this.gyroscopeControls_ = false;
+    }
+  }
+
+  /** @private */
+  checkGyroscopePermissions_() {
+    //  If browser doesn't support DeviceOrientationEvent.
+    if (typeof this.win.DeviceOrientationEvent === 'undefined') {
+      return;
+    }
+
+    // If browser doesn't require permission for DeviceOrientationEvent.
+    if (
+      typeof this.win.DeviceOrientationEvent.requestPermission === 'undefined'
+    ) {
+      this.enableGyroscope_();
+    }
+
+    // If permissions needed for DeviceOrientationEvent.
+    if (
+      typeof this.win.DeviceOrientationEvent.requestPermission === 'function'
+    ) {
+      this.win.DeviceOrientationEvent.requestPermission()
+        .catch(() => {
+          // If permissions weren't set, render activate button.
+          this.renderActivateButton_();
+        })
+        .then((permissionState) => {
+          // If permissions already set, set permission state.
+          permissionState && this.setPermissionState_(permissionState);
+        });
+    }
+  }
+
+  /**
+   * Listens for deviceorientation events.
+   *
+   * Some browsers support the 'deviceorientation' event but never call it.
+   * This waits for one call before initiating a constant listener.
+   * @private
+   */
+  enableGyroscope_() {
+    // Listen for one call before initiating.
+    listenOncePromise(this.win, 'deviceorientation').then((e) => {
+      this.gyroscopeControls_ = true;
+      // Renders active page orientation correctly on load.
+      // isOnActivePage_ is slightly async so unfortunately we do this for all pages.
+      this.setGyroscopeDefaultHeading_(e.alpha);
+      // Debounce onDeviceOrientation_ to rAF.
+      let rafTimeout;
+      this.win.addEventListener('deviceorientation', (e) => {
+        if (this.isReady_ && this.distance_ < MIN_WEBGL_DISTANCE) {
+          rafTimeout && this.win.cancelAnimationFrame(rafTimeout);
+          rafTimeout = this.win.requestAnimationFrame(() => {
+            if (!this.isOnActivePage_) {
+              this.setGyroscopeDefaultHeading_(e.alpha);
+            }
+            this.onDeviceOrientation_(e);
+          });
+        }
+      });
+      this.maybeShowDiscoveryAnimation_();
+    });
+  }
+
+  /**
+   * Ensures user is facing a specified point of interest.
+   * @param {number} orientationAlpha
+   * @private
+   */
+  setGyroscopeDefaultHeading_(orientationAlpha) {
+    this.headingOffset_ =
+      parseFloat(
+        this.element.getAttribute('heading-end') ||
+          this.element.getAttribute('heading-start') ||
+          0
+      ) +
+      CENTER_OFFSET +
+      orientationAlpha;
+  }
+
+  /**
+   * Only show once per story on first instance of 360 component.
+   * @private
+   */
+  maybeShowDiscoveryAnimation_() {
+    if (
+      this.isOnActivePage_ &&
+      this.gyroscopeControls_ &&
+      !this.element.ownerDocument.querySelector(
+        `.i-amphtml-story-360-discovery`
+      )
+    ) {
+      const page = this.getPage_();
+      const discoveryTemplate = page && buildDiscoveryTemplate(page);
+      // Support translation of discovery dialogue text.
+      this.mutateElement(() => {
+        discoveryTemplate.querySelector(
+          '.i-amphtml-story-360-discovery-text'
+        ).textContent = this.localizationService_.getLocalizedString(
+          LocalizedStringId.AMP_STORY_DISCOVERY_DIALOG_TEXT
+        );
+      });
+      this.mutateElement(() => page.appendChild(discoveryTemplate));
+    }
+  }
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onDeviceOrientation_(e) {
+    let rot = Matrix.identity(3);
+    rot = Matrix.mul(
+      3,
+      Matrix.rotation(3, 1, 0, deg2rad(e.alpha - this.headingOffset_)),
+      rot
+    );
+    rot = Matrix.mul(3, Matrix.rotation(3, 2, 1, deg2rad(e.beta)), rot);
+    rot = Matrix.mul(3, Matrix.rotation(3, 0, 2, deg2rad(e.gamma)), rot);
+
+    // Smoothen sensor data by averaging previous and next rotation matrix values.
+    this.rot_ = this.rot_ ? rot.map((val, i) => (val + this.rot_[i]) / 2) : rot;
+
+    this.renderer_.setCamera(this.rot_, 1);
+    this.renderer_.render(true);
+  }
+
+  /**
+   * A button to ask for permissons.
+   * @private
+   */
+  renderActivateButton_() {
+    const ampStoryPage = this.getPage_();
+    this.activateButton_ =
+      ampStoryPage && buildActivateButtonTemplate(ampStoryPage);
+
+    this.activateButton_.querySelector(
+      '.i-amphtml-story-360-activate-text'
+    ).textContent = this.localizationService_.getLocalizedString(
+      LocalizedStringId.AMP_STORY_ACTIVATE_BUTTON_TEXT
+    );
+
+    this.activateButton_.addEventListener('click', () =>
+      this.requestGyroscopePermissions_()
+    );
+
+    this.mutateElement(() => ampStoryPage.appendChild(this.activateButton_));
+  }
+
+  /** @private */
+  requestGyroscopePermissions_() {
+    if (this.win.DeviceOrientationEvent.requestPermission) {
+      this.win.DeviceOrientationEvent.requestPermission()
+        .then((permissionState) => {
+          this.setPermissionState_(permissionState);
+        })
+        .catch((error) => {
+          dev().error(TAG, `Gyroscope permission error: ${error.message}`);
+        });
+    }
+  }
+
+  /**
+   * @param {string} permissionState
+   * @private
+   */
+  setPermissionState_(permissionState) {
+    if (permissionState === 'granted') {
+      this.storeService_.dispatch(Action.SET_GYROSCOPE_PERMISSION, 'granted');
+    } else if (permissionState === 'denied') {
+      this.storeService_.dispatch(Action.SET_GYROSCOPE_PERMISSION, 'denied');
+    }
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+
+  /**
+   * Checks if the image is larger than the GPUs max texture size.
+   * Scales the image down if neededed.
+   * Returns the image element if image is within bounds.
+   * If image is out of bounds, returns a scaled canvas element.
+   * @param {!Element} imgEl
+   * @return {!Element}
+   * @private
+   */
+  checkImageReSize_(imgEl) {
+    const MAX_TEXTURE_SIZE = this.renderer_.gl.getParameter(
+      this.renderer_.gl.MAX_TEXTURE_SIZE
+    );
+
+    if (
+      imgEl.naturalWidth > MAX_TEXTURE_SIZE ||
+      imgEl.naturalHeight > MAX_TEXTURE_SIZE
+    ) {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      canvas.width = Math.min(imgEl.naturalWidth, MAX_TEXTURE_SIZE);
+      canvas.height = Math.min(imgEl.naturalHeight, MAX_TEXTURE_SIZE);
+      ctx.drawImage(imgEl, 0, 0, canvas.width, canvas.height);
+      return canvas;
+    } else {
+      return imgEl;
+    }
+  }
+
+  /** @override */
+  layoutCallback() {
+    const ampImgEl = this.element.querySelector('amp-img');
+    // Used to update the video in animate_.
+    this.ampVideoEl_ = this.element.querySelector('amp-video');
+
+    const mediaEl = ampImgEl || this.ampVideoEl_;
+    userAssert(
+      mediaEl,
+      'amp-story-360 must contain an amp-img or amp-video element.'
+    );
+    if (mediaEl) {
+      this.setAccessibleText_(mediaEl);
+    }
+
+    if (ampImgEl) {
+      return this.setupAmpImgRenderer_(ampImgEl);
+    }
+    if (this.ampVideoEl_) {
+      return this.setupAmpVideoRenderer_();
+    }
+  }
+
+  /**
+   * Puts a11y text on canvas element so it can be read by screen readers.
+   * The media element is hidden by CSS it no longer can read it.
+   * @param {!Element} mediaEl Either an amp-img or amp-video
+   * @private
+   */
+  setAccessibleText_(mediaEl) {
+    const altTags = ['alt', 'title', 'aria-label']; /** In order of priority. */
+    const altTag = altTags.find((attr) => mediaEl.getAttribute(attr));
+    if (altTag) {
+      const altText = mediaEl.getAttribute(altTag);
+      this.canvas_.setAttribute('role', 'img');
+      this.canvas_.setAttribute('aria-label', altText);
+    }
+  }
+
+  /**
+   * @param {!Element} ampImgEl
+   * @return {!Promise}
+   * @private
+   */
+  setupAmpImgRenderer_(ampImgEl) {
+    const owners = Services.ownersForDoc(this.element);
+    owners.setOwner(ampImgEl, this.element);
+    owners.scheduleLayout(this.element, ampImgEl);
+    return whenUpgradedToCustomElement(ampImgEl)
+      .then(() => ampImgEl.signals().whenSignal(CommonSignals.LOAD_END))
+      .then(
+        () => {
+          this.renderer_ = new Renderer(this.canvas_);
+          this.setupGlContextListeners_();
+          this.image_ = this.checkImageReSize_(
+            dev().assertElement(this.element.querySelector('img'))
+          );
+          this.initRenderer_();
+        },
+        () => {
+          user().error(TAG, 'Failed to load the amp-img.');
+        }
+      );
+  }
+
+  /**
+   * @return {!Promise}
+   * @private
+   */
+  setupAmpVideoRenderer_() {
+    return whenUpgradedToCustomElement(dev().assertElement(this.ampVideoEl_))
+      .then(() => this.ampVideoEl_.signals().whenSignal(CommonSignals.LOAD_END))
+      .then(() => {
+        const alreadyHasData =
+          dev().assertElement(this.ampVideoEl_.querySelector('video'))
+            .readyState >= HAVE_CURRENT_DATA;
+
+        return alreadyHasData
+          ? Promise.resolve()
+          : listenOncePromise(this.ampVideoEl_, 'loadeddata');
+      })
+      .then(
+        () => {
+          this.renderer_ = new Renderer(this.canvas_);
+          this.setupGlContextListeners_();
+          this.initRenderer_();
+        },
+        () => {
+          user().error(TAG, 'Failed to load the amp-video.');
+        }
+      );
+  }
+
+  /** @private */
+  setupGlContextListeners_() {
+    this.lostGlContext_ = this.renderer_.gl.getExtension('WEBGL_lose_context');
+    this.renderer_.canvas.addEventListener('webglcontextlost', (e) => {
+      // Calling preventDefault is necessary for restoring context.
+      e.preventDefault();
+      this.isReady_ = false;
+    });
+    this.renderer_.canvas.addEventListener('webglcontextrestored', () =>
+      this.initRenderer_()
+    );
+  }
+
+  /** @private */
+  initRenderer_() {
+    this.renderer_.init();
+    this.renderer_.setImageOrientation(
+      this.sceneHeading_,
+      this.scenePitch_,
+      this.sceneRoll_
+    );
+    this.renderer_.setImage(
+      this.image_
+        ? this.image_
+        : dev().assertElement(this.ampVideoEl_.querySelector('video'))
+    );
+    this.renderer_.resize();
+    if (this.orientations_.length < 1) {
+      return;
+    }
+    this.renderInitialPosition_();
+    this.isReady_ = true;
+    if (this.isPlaying_) {
+      this.animate_();
+    }
+    this.markAsLoaded_();
+  }
+
+  /** @private */
+  markAsLoaded_() {
+    this.mutateElement(() => {
+      this.element.classList.add('i-amphtml-story-360-loaded');
+    });
+  }
+
+  /** @private */
+  resizeRenderer_() {
+    this.mutateElement(() => {
+      if (this.renderer_) {
+        this.renderer_.resize();
+        if (!this.isPlaying_) {
+          this.renderer_.render(false);
+        }
+      }
+    });
+  }
+
+  /** @private */
+  renderInitialPosition_() {
+    if (this.gyroscopeControls_) {
+      return;
+    }
+    this.mutateElement(() => {
+      this.renderer_.setCamera(
+        this.orientations_[0].rotation,
+        this.orientations_[0].scale
+      );
+      this.renderer_.render(false);
+    });
+  }
+
+  /**
+   * @return {boolean}
+   */
+  get canAnimate() {
+    return this.duration_ > 0 && this.orientations_.length > 1;
+  }
+
+  /** @private */
+  animate_() {
+    if (!this.animation_) {
+      this.animation_ = new CameraAnimation(this.duration_, this.orientations_);
+    }
+    const loop = () => {
+      if (!this.isPlaying_ || !this.animation_) {
+        this.renderer_.render(false);
+        return;
+      }
+      const nextOrientation = this.animation_.getNextOrientation();
+      // mutateElement causes inaccurate animation speed here, so we use rAF.
+      this.win.requestAnimationFrame(() => {
+        // Stop loop if no next orientation and not a video.
+        if (!nextOrientation && !this.ampVideoEl_) {
+          this.isPlaying_ = false;
+          this.renderer_.render(false);
+          return;
+        }
+        // Only apply next orientation if not in gyroscope mode.
+        if (nextOrientation && !this.gyroscopeControls_) {
+          this.renderer_.setCamera(
+            nextOrientation.rotation,
+            nextOrientation.scale
+          );
+        }
+        // If video, check if ready and copy the texture on each frame.
+        if (this.ampVideoEl_) {
+          const videoEl = dev().assertElement(
+            this.ampVideoEl_.querySelector('video')
+          );
+          if (videoEl.readyState >= HAVE_CURRENT_DATA) {
+            this.renderer_.setImage(videoEl);
+          }
+        }
+        this.renderer_.render(true);
+        loop();
+      });
+    };
+    this.mutateElement(() => loop());
+  }
+
+  /** @private */
+  pause_() {
+    this.isPlaying_ = false;
+  }
+
+  /** @private */
+  play_() {
+    if (!this.canAnimate) {
+      return;
+    }
+    userAssert(
+      this.canAnimate,
+      'amp-story-360 is either not configured to play an animation or ' +
+        'still loading content.'
+    );
+    this.isPlaying_ = true;
+    if (this.isReady_) {
+      this.animate_();
+    }
+  }
+
+  /** @private */
+  rewind_() {
+    if (!this.canAnimate) {
+      return;
+    }
+    this.animation_ = null;
+    // Let the animation loop exit, then render the initial position and resume
+    // the animation (if applicable).
+    if (this.isReady_) {
+      this.win.requestAnimationFrame(() => {
+        this.renderInitialPosition_();
+        if (this.isPlaying_) {
+          this.animate_();
+        }
+      });
+    }
+  }
+}
+
+AMP.extension('amp-story-360', '0.1', (AMP) => {
+  AMP.registerElement('amp-story-360', AmpStory360, CSS);
+});
diff --git a/extensions/amp-story-360/0.1/amp-story-360.md b/extensions/amp-story-360/0.1/amp-story-360.md
new file mode 100644
index 0000000000000..49568b045acd9
--- /dev/null
+++ b/extensions/amp-story-360/0.1/amp-story-360.md
@@ -0,0 +1,228 @@
+---
+$category@: media
+formats:
+  - stories
+teaser:
+  text: >-
+    Embeds 360 images and videos, explorable by gyroscope or animatable between points.
+tags:
+  - 360
+  - immersive
+  - gyroscope
+  - media
+  - equirectangular
+author: philipbell
+toc: true
+$title: amp-story-360
+version: '0.1'
+versions:
+  - '0.1'
+latest_version: '0.1'
+is_current: true
+$path: /documentation/components/amp-story-360.html
+$localization:
+  path: '/{locale}/documentation/components/amp-story-360.html'
+scripts:
+  - >-
+    <script async custom-element="amp-story-360"
+    src="https://cdn.ampproject.org/v0/amp-story-360-0.1.js"></script>
+layouts:
+  - Fill
+  - fixed
+  - fixed height
+  - flex item
+  - nodisplay
+---
+
+<!---
+Copyright 2020 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.
+-->
+
+<figure class="centered-fig">
+  <amp-anim alt="amp-story-360 example" width="300" height="533" layout="fixed" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story-360/img/amp-story-360.gif">
+    <noscript>
+    <img alt="amp-story-360 example" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story-360/img/amp-story-360.gif" />
+  </noscript>
+  </amp-anim>
+</figure>
+
+The `amp-story-360` component provides a way to embed 360 images and videos in [Web Stories](https://amp.dev/documentation/guides-and-tutorials/start/create_successful_stories/?format=stories).
+
+## Usage
+
+Use the `amp-story-360` component to render 360 images and video. The component can animate between two points or be explorable via the device's gyroscope sensor. For best results, only use one element per [`amp-story-page`](https://amp.dev/documentation/components/amp-story-page/?format=stories).
+
+### Accessibility considerations
+
+Currently, the `amp-story-360` component does not provide any controls for mouse or keyboard users.
+
+### Media Requirements
+
+The `amp-story-360` component renders videos and images in [equirectangular projection](https://en.wikipedia.org/wiki/Equirectangular_projection).
+This is the default format generated by many 360 cameras and 3D rendering software.
+
+<amp-img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story-360/img/SeanDoran-Quela-sol1462-edited_ver2-sm_600-300.jpg" layout="intrinsic" width="400" height="230">
+
+Credit: [NASA / JPL / MSSS / Seán Doran](https://informal.jpl.nasa.gov/museum/360-video).
+
+### Dimensions
+
+Use a 2:1 aspect ratio for the best distribution of resolution.
+
+### Size
+
+2048 x 1024 (2k) is recommended for images and video.
+
+### Configuration
+
+The `amp-story-360` component accepts 1 descendant. This descendant must be an [amp-img](https://amp.dev/documentation/components/amp-img/?format=stories) or [amp-video](https://amp.dev/documentation/components/amp-video/?format=stories).
+
+#### amp-image
+
+[sourcecode:html]
+<amp-story-360 layout="fill">
+<amp-img layout="fill" src="assets/image360.jpg"></amp-img>
+</amp-story-360>
+[/sourcecode]
+
+#### amp-video
+
+[sourcecode:html]
+<amp-story-360 layout="fill">
+<amp-video layout="fill" poster="assets/poster.jpg" autoplay loop>
+
+<source src="assets/video360.mp4" type="video/mp4" />
+</amp-video>
+</amp-story-360>
+[/sourcecode]
+
+Be sure to import the `amp-video` component.
+
+#### Defining a initial point of view (PoV)
+
+[sourcecode:html]
+<amp-story-360 
+   layout="fill"
+   heading-start="95" pitch-start="-10">
+...
+</amp-story-360>
+[/sourcecode]
+
+#### PoV to PoV animation
+
+[sourcecode:html]
+<amp-story-360 
+   layout="fill"
+   heading-start="95" pitch-start="-10"
+   heading-end="-45" pitch-end="-20"
+   duration="3s">
+...
+</amp-story-360>
+[/sourcecode]
+
+The `duration` attribute is required for animation.
+
+#### Gyroscope
+
+Use the device gyroscope sensor to set the image's orientation.  
+The component defaults to the `heading-end` value upon navigating to the page.  
+If `heading-end` is not provided, `heading-start` is used. If neither are provided the heading will default to 0.
+
+Serve the story over `https` to use this feature.
+
+[sourcecode:html]
+<amp-story-360 
+   layout="fill"
+   controls="gyroscope"
+   heading-start="95" pitch-start="-10"
+   heading-end="-45" pitch-end="-20"
+   duration="3s">
+...
+</amp-story-360>
+[/sourcecode]
+
+##### Activate 360 button
+
+If the device requires user permission to access the device’s gyroscope sensor an “activate 360” button will display.
+
+<amp-img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story-360/img/activate-360.png" layout="intrinsic" width="88.5" height="36">
+
+##### Animation fallback
+
+If the device does not support gyroscope or the user declines permission, the component will fallback to animating if the animation is defined.
+
+## Attributes
+
+### Animation
+
+#### heading-start {float} optional
+
+Specifies the heading (horizontal angle in degrees) at the beginning of an animation.  
+Centered on 0 (default) with a negative angle looking towards the left, positive angle to the right.
+
+#### pitch-start {float} optional
+
+Specifies the pitch (vertical angle in degrees) at the beginning of an animation.  
+Centered on 0 (default) at the horizon, with a negative angle looking downwards, positive angle upwards.
+
+#### zoom-start {float} optional
+
+Specifies the zoom at the beginning of an animation.
+The default is 1. This corresponds to a horizontal field of view of 90 degrees.
+A higher value indicates a narrower field of view.
+
+#### heading-end {float} optional
+
+Specifies the heading of a complete animation.
+
+#### pitch-end {float} optional
+
+Specifies the pitch of a complete animation.
+
+#### zoom-end {float} optional
+
+Specifies the zoom of a complete animation.
+
+#### duration {string} (required for animation)
+
+Specifies how many seconds (s) or milliseconds (ms) an animation takes to complete.
+
+### Controls
+
+#### controls {“gyroscope”} optional
+
+Specifies using the device’s gyroscope sensor to set orientation.
+If the device requires permission for the sensor an `activate-360` button will display.
+If the gyroscope sensor is not available, it will default to animating.
+
+### Default orientations
+
+These attributes correct rendering of images captured on a tilted axis.
+
+#### scene-heading {float} optional
+
+Specifies an absolute heading applied as a rotation matrix to the rendered image.
+
+#### scene-pitch {float} optional
+
+Specifies an absolute pitch applied as a rotation matrix to the rendered image.
+
+#### scene-roll {float} optional
+
+Specifies an absolute roll applied as a rotation matrix to the rendered image.
+
+## Validation
+
+See validation rules in [amp-story-360 validator](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story-360/validator-amp-story-360.protoascii).
diff --git a/extensions/amp-story-360/0.1/test/test-amp-story-360.js b/extensions/amp-story-360/0.1/test/test-amp-story-360.js
new file mode 100644
index 0000000000000..c73cee200a3e6
--- /dev/null
+++ b/extensions/amp-story-360/0.1/test/test-amp-story-360.js
@@ -0,0 +1,174 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import '../amp-story-360';
+import {
+  Action,
+  AmpStoryStoreService,
+} from '../../../amp-story/1.0/amp-story-store-service';
+import {LocalizationService} from '../../../../src/service/localization';
+import {createElementWithAttributes} from '../../../../src/dom';
+import {
+  registerServiceBuilder,
+  registerServiceBuilderForDoc,
+} from '../../../../src/service';
+
+describes.realWin(
+  'amp-story-360',
+  {
+    amp: {
+      runtimeOn: true,
+      extensions: ['amp-story-360', 'amp-img'],
+    },
+  },
+  (env) => {
+    let win;
+    let element;
+    let threesixty;
+    let storeService;
+    let pageEl;
+
+    const nextTick = () => new Promise((resolve) => win.setTimeout(resolve, 0));
+
+    function appendAmpImg(parent, path) {
+      const ampImg = createElementWithAttributes(win.document, 'amp-img', {
+        'src': path,
+        'width': '7168',
+        'height': '3584',
+      });
+      parent.appendChild(ampImg);
+    }
+
+    async function createAmpStory360(imagePath, opt_gyroscope) {
+      pageEl = win.document.createElement('amp-story-page');
+      pageEl.id = 'page1';
+      const attrs = {
+        'layout': 'fill',
+        'duration': '1s',
+        'heading-end': '95',
+        'style': 'height: 100px',
+      };
+
+      if (opt_gyroscope) {
+        attrs['controls'] = 'gyroscope';
+      }
+
+      element = createElementWithAttributes(
+        win.document,
+        'amp-story-360',
+        attrs
+      );
+      if (imagePath) {
+        appendAmpImg(element, imagePath);
+      }
+      pageEl.appendChild(element);
+      win.document.body.appendChild(pageEl);
+
+      const localizationService = new LocalizationService(win.document.body);
+      registerServiceBuilderForDoc(element, 'localization', function () {
+        return localizationService;
+      });
+
+      threesixty = await element.getImpl();
+    }
+
+    beforeEach(() => {
+      win = env.win;
+
+      storeService = new AmpStoryStoreService(win);
+      registerServiceBuilder(win, 'story-store', function () {
+        return storeService;
+      });
+    });
+
+    it('should build', async () => {
+      await createAmpStory360(
+        '/examples/amp-story/img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg'
+      );
+      expect(() => {
+        threesixty.layoutCallback();
+      }).to.not.throw();
+    });
+
+    it('activation button should contain role="button" to prevent story page navigation', async () => {
+      win.DeviceOrientationEvent.requestPermission = () => Promise.reject();
+
+      await createAmpStory360(
+        '/examples/amp-story/img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg',
+        /* opt_gyroscope */ true
+      );
+      await threesixty.layoutCallback();
+      const activationEl = pageEl.querySelector(
+        '.i-amphtml-story-360-activate-button'
+      );
+
+      await nextTick();
+
+      expect(activationEl.getAttribute('role')).to.eql('button');
+    });
+
+    it('should throw if nested amp-img is missing', async () => {
+      await createAmpStory360();
+      expect(() => {
+        allowConsoleError(() => {
+          threesixty.layoutCallback();
+        });
+      }).to.throw();
+    });
+
+    it('parses orientation attributes', async () => {
+      await createAmpStory360(
+        '/examples/amp-story/img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg'
+      );
+      await threesixty.layoutCallback();
+      expect(threesixty.canAnimate).to.be.true;
+    });
+
+    it('should play when in view', async () => {
+      await createAmpStory360(
+        '/examples/img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg'
+      );
+      await threesixty.layoutCallback();
+      await storeService.dispatch(Action.CHANGE_PAGE, {id: 'page1', index: 0});
+      expect(threesixty.isPlaying_).to.be.true;
+    });
+
+    it('should respond to pause when in view', async () => {
+      await createAmpStory360(
+        '/examples/img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg'
+      );
+      await threesixty.layoutCallback();
+      await storeService.dispatch(Action.CHANGE_PAGE, {id: 'page1', index: 0});
+      await storeService.dispatch(Action.TOGGLE_PAUSED, false);
+      expect(threesixty.isPlaying_).to.be.true;
+    });
+
+    it('should not play when out of view', async () => {
+      await createAmpStory360(
+        '/examples/img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg'
+      );
+      await threesixty.layoutCallback();
+      await storeService.dispatch(Action.CHANGE_PAGE, {id: 'page1', index: 0});
+      await storeService.dispatch(Action.TOGGLE_PAUSED, true);
+      await storeService.dispatch(Action.CHANGE_PAGE, {
+        id: 'notPage1',
+        index: 1,
+      });
+      await storeService.dispatch(Action.TOGGLE_PAUSED, false);
+      expect(threesixty.isPlaying_).to.be.false;
+    });
+  }
+);
diff --git a/extensions/amp-story-360/0.1/test/validator-amp-story-360.html b/extensions/amp-story-360/0.1/test/validator-amp-story-360.html
new file mode 100644
index 0000000000000..e76de2f462176
--- /dev/null
+++ b/extensions/amp-story-360/0.1/test/validator-amp-story-360.html
@@ -0,0 +1,66 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-story-360 tags.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="http://nonblocking.io/" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <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-360" src="https://cdn.ampproject.org/v0/amp-story-360-0.1.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+</head>
+<body>
+
+  <!-- Valid -->
+    <amp-story
+        standalone
+        title="Demo Story"
+        publisher="AMP Story"
+        publisher-logo-src="example.com/logo.png"
+        poster-portrait-src="example.com/poster.jpg">
+    <amp-story-page id="cover">
+      <amp-story-grid-layer template="fill">
+        <amp-story-360 layout="fill" heading-start="95" pitch-start="-10" zoom-start="4" heading-end="-45" pitch-end="-20" zoom-end="1" duration="30s" scene-heading="8.5" scene-pitch="5" scene-roll="-1" controls="gyroscope">
+          <amp-img src="img/panorama1.jpg" width="7168" height="3584"></amp-img>
+        </amp-story-360>
+     </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page1">
+      <amp-story-grid-layer template="fill">
+        <amp-story-360 layout="fill" heading-start="95" pitch-start="-10" zoom-start="4" heading-end="-45" pitch-end="-20" zoom-end="1" duration="30s" scene-heading="8.5" scene-pitch="5" scene-roll="-1">
+          <amp-video poster="img/nasa_training_poster.jpg" autoplay layout="fill" loop>
+            <source src="img/NASA_VR_360_Astronaut_Training_Space_Walk_Clip.mp4" type="video/mp4" />
+          </amp-video>
+        </amp-story-360>
+     </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="page2">
+      <amp-story-grid-layer template="fill">
+        <amp-story-360 layout="fill" heading-end="-45" duration="3s" controls="gyroscope">
+          <amp-img src="img/panorama1.jpg" width="7168" height="3584"></amp-img>
+        </amp-story-360>
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/extensions/amp-story-360/0.1/test/validator-amp-story-360.out b/extensions/amp-story-360/0.1/test/validator-amp-story-360.out
new file mode 100644
index 0000000000000..8a9a526e8df1c
--- /dev/null
+++ b/extensions/amp-story-360/0.1/test/validator-amp-story-360.out
@@ -0,0 +1,67 @@
+PASS
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-story-360 tags.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="http://nonblocking.io/" >
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <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>
+|    <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-360" src="https://cdn.ampproject.org/v0/amp-story-360-0.1.js"></script>
+|    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+|  </head>
+|  <body>
+|
+|    <!-- Valid -->
+|      <amp-story
+|          standalone
+|          title="Demo Story"
+|          publisher="AMP Story"
+|          publisher-logo-src="example.com/logo.png"
+|          poster-portrait-src="example.com/poster.jpg">
+|      <amp-story-page id="cover">
+|        <amp-story-grid-layer template="fill">
+|          <amp-story-360 layout="fill" heading-start="95" pitch-start="-10" zoom-start="4" heading-end="-45" pitch-end="-20" zoom-end="1" duration="30s" scene-heading="8.5" scene-pitch="5" scene-roll="-1" controls="gyroscope">
+|            <amp-img src="img/panorama1.jpg" width="7168" height="3584"></amp-img>
+|          </amp-story-360>
+|       </amp-story-grid-layer>
+|      </amp-story-page>
+|      <amp-story-page id="page1">
+|        <amp-story-grid-layer template="fill">
+|          <amp-story-360 layout="fill" heading-start="95" pitch-start="-10" zoom-start="4" heading-end="-45" pitch-end="-20" zoom-end="1" duration="30s" scene-heading="8.5" scene-pitch="5" scene-roll="-1">
+|            <amp-video poster="img/nasa_training_poster.jpg" autoplay layout="fill" loop>
+|              <source src="img/NASA_VR_360_Astronaut_Training_Space_Walk_Clip.mp4" type="video/mp4" />
+|            </amp-video>
+|          </amp-story-360>
+|       </amp-story-grid-layer>
+|      </amp-story-page>
+|      <amp-story-page id="page2">
+|        <amp-story-grid-layer template="fill">
+|          <amp-story-360 layout="fill" heading-end="-45" duration="3s" controls="gyroscope">
+|            <amp-img src="img/panorama1.jpg" width="7168" height="3584"></amp-img>
+|          </amp-story-360>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|    </amp-story>
+|  </body>
+|  </html>
diff --git a/extensions/amp-story-360/OWNERS b/extensions/amp-story-360/OWNERS
new file mode 100644
index 0000000000000..657c4877438f6
--- /dev/null
+++ b/extensions/amp-story-360/OWNERS
@@ -0,0 +1,23 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {
+          name: 'gmajoulet',
+          notify: true,
+        },
+        {
+          name: 'processprocess',
+          notify: true,
+        },
+        {
+          name: 't0mg',
+          notify: true,
+        },
+      ],
+    },
+  ],
+}
diff --git a/extensions/amp-story-360/img/SeanDoran-Quela-sol1462-edited_ver2-sm_600-300.jpg b/extensions/amp-story-360/img/SeanDoran-Quela-sol1462-edited_ver2-sm_600-300.jpg
new file mode 100644
index 0000000000000..f2eac7c0d6a8d
Binary files /dev/null and b/extensions/amp-story-360/img/SeanDoran-Quela-sol1462-edited_ver2-sm_600-300.jpg differ
diff --git a/extensions/amp-story-360/img/activate-360.png b/extensions/amp-story-360/img/activate-360.png
new file mode 100644
index 0000000000000..8b2698143f414
Binary files /dev/null and b/extensions/amp-story-360/img/activate-360.png differ
diff --git a/extensions/amp-story-360/img/amp-story-360.gif b/extensions/amp-story-360/img/amp-story-360.gif
new file mode 100644
index 0000000000000..d35e8654c8526
Binary files /dev/null and b/extensions/amp-story-360/img/amp-story-360.gif differ
diff --git a/extensions/amp-story-360/validator-amp-story-360.protoascii b/extensions/amp-story-360/validator-amp-story-360.protoascii
new file mode 100644
index 0000000000000..933941a709548
--- /dev/null
+++ b/extensions/amp-story-360/validator-amp-story-360.protoascii
@@ -0,0 +1,98 @@
+#
+# Copyright 2020 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.
+#
+
+tags: {  # amp-story-360
+  html_format: AMP
+  tag_name: "SCRIPT"
+  extension_spec: {
+    name: "amp-story-360"
+    version: "0.1"
+    version: "latest"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # <amp-story-360>
+  html_format: AMP
+  tag_name: "AMP-STORY-360"
+  requires_extension: "amp-story-360"
+  mandatory_ancestor: "AMP-STORY"
+  spec_url: "https://amp.dev/documentation/components/amp-story-360"
+  attrs: {
+    name: "controls"
+    value: "gyroscope"
+  }
+  attrs: {
+    name: "duration"
+    value_regex: "([0-9\\.]+)\\s*(s|ms)"
+  }
+  attrs: {
+    name: "heading-end"
+    value_regex: "-?\\d+\\.?\\d*"
+    trigger: {
+      also_requires_attr: "duration"
+    }
+  }
+  attrs: {
+    name: "heading-start"
+    value_regex: "-?\\d+\\.?\\d*"
+  }
+  attrs: {
+    name: "pitch-end"
+    value_regex: "-?\\d+\\.?\\d*"
+    trigger: {
+      also_requires_attr: "duration"
+    }
+  }
+  attrs: {
+    name: "pitch-start"
+    value_regex: "-?\\d+\\.?\\d*"
+  }
+  attrs: {
+    name: "scene-heading"
+    value_regex: "-?\\d+\\.?\\d*"
+  }
+  attrs: {
+    name: "scene-pitch"
+    value_regex: "-?\\d+\\.?\\d*"
+  }
+  attrs: {
+    name: "scene-roll"
+    value_regex: "-?\\d+\\.?\\d*"
+  }
+  attrs: {
+    name: "zoom-end"
+    value_regex: "\\d+\\.?\\d*"
+    trigger: {
+      also_requires_attr: "duration"
+    }
+  }
+  attrs: {
+    name: "zoom-start"
+    value_regex: "\\d+\\.?\\d*"
+  }
+  child_tags: {
+    mandatory_num_child_tags: 1
+    child_tag_name_oneof: "AMP-IMG"
+    child_tag_name_oneof: "AMP-VIDEO"
+  }
+  amp_layout: {
+    supported_layouts: FILL
+    supported_layouts: FIXED
+    supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
+    supported_layouts: NODISPLAY
+  }
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/af.js b/extensions/amp-story-auto-ads/0.1/_locales/af.js
deleted file mode 100644
index 5da58af13cc01..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/af.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for af strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Doen nou aansoek',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Boek',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Koop kaartjies',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Laai af',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Verken',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Kry nou',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Installeer nou',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Kom meer te wete',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Luister',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Meer',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Maak program oop',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Bestel nou',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Speel',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Lees',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Soek-en-koop',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Wys',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Vertoontye',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Sluit aan',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Teken nou in',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Gebruik program',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Bekyk',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Kyk',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Kyk episode',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/af.json b/extensions/amp-story-auto-ads/0.1/_locales/af.json
new file mode 100644
index 0000000000000..69605b984f6a2
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/af.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Doen nou aansoek"},
+  "40": {"string": "Boek"},
+  "41": {"string": "Koop kaartjies"},
+  "42": {"string": "Laai af"},
+  "43": {"string": "Verken"},
+  "44": {"string": "Kry nou"},
+  "45": {"string": "Installeer nou"},
+  "46": {"string": "Kom meer te wete"},
+  "47": {"string": "Luister"},
+  "48": {"string": "Meer"},
+  "49": {"string": "Maak program oop"},
+  "50": {"string": "Bestel nou"},
+  "51": {"string": "Speel"},
+  "52": {"string": "Lees"},
+  "53": {"string": "Soek-en-koop"},
+  "54": {"string": "Wys"},
+  "55": {"string": "Vertoontye"},
+  "56": {"string": "Sluit aan"},
+  "57": {"string": "Teken nou in"},
+  "58": {"string": "Gebruik program"},
+  "59": {"string": "Bekyk"},
+  "60": {"string": "Kyk"},
+  "61": {"string": "Kyk episode"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/am.js b/extensions/amp-story-auto-ads/0.1/_locales/am.js
deleted file mode 100644
index 9f51ad357073b..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/am.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for am strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'አሁኑኑ ያመልክቱ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'መጽሐፍ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'ትኬቶች ይግዙ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'አውርድ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'አስስ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'አሁን ያግኙ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'አሁኑኑ ይጫኑ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'የበለጠ ለመረዳት',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'ያዳምጡ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'ተጨማሪ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'መተግበሪያ ክፈት',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'አሁን እዘዝ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'አጫውት',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'ንባብ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'ይግዙ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'አሳይ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'የማሳያ ሰዓቶች',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'ይመዝገቡ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'አሁን ለደንበኝነት ይመዝገቡ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'መተግበሪያ ይጠቀሙ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'አሳይ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'ይመልከቱ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'የትዕይንት ክፍልን ይመልከቱ',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/am.json b/extensions/amp-story-auto-ads/0.1/_locales/am.json
new file mode 100644
index 0000000000000..ac932a302f2e8
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/am.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "አሁኑኑ ያመልክቱ"},
+  "40": {"string": "መጽሐፍ"},
+  "41": {"string": "ትኬቶች ይግዙ"},
+  "42": {"string": "አውርድ"},
+  "43": {"string": "አስስ"},
+  "44": {"string": "አሁን ያግኙ"},
+  "45": {"string": "አሁኑኑ ይጫኑ"},
+  "46": {"string": "የበለጠ ለመረዳት"},
+  "47": {"string": "ያዳምጡ"},
+  "48": {"string": "ተጨማሪ"},
+  "49": {"string": "መተግበሪያ ክፈት"},
+  "50": {"string": "አሁን እዘዝ"},
+  "51": {"string": "አጫውት"},
+  "52": {"string": "ንባብ"},
+  "53": {"string": "ይግዙ"},
+  "54": {"string": "አሳይ"},
+  "55": {"string": "የማሳያ ሰዓቶች"},
+  "56": {"string": "ይመዝገቡ"},
+  "57": {"string": "አሁን ለደንበኝነት ይመዝገቡ"},
+  "58": {"string": "መተግበሪያ ይጠቀሙ"},
+  "59": {"string": "አሳይ"},
+  "60": {"string": "ይመልከቱ"},
+  "61": {"string": "የትዕይንት ክፍልን ይመልከቱ"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ar.js b/extensions/amp-story-auto-ads/0.1/_locales/ar.js
deleted file mode 100644
index 56ab9f37c9cc8..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/ar.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for ar strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'الاشتراك الآن',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'حجز',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'شراء التذاكر',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'تنزيل',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'استكشاف',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'تنزيل المحتوى الآن',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'تثبيت الآن',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'مزيد من المعلومات',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'استماع',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'المزيد',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'فتح التطبيق',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'إرسال طلب الآن',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'تشغيل',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'قراءة',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'تسوق',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'عرض',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'مواعيد العرض',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'اشتراك',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'الاشتراك الآن',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'استخدام التطبيق',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'عرض',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'المشاهدة',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'مشاهدة الحلقة',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ar.json b/extensions/amp-story-auto-ads/0.1/_locales/ar.json
new file mode 100644
index 0000000000000..5d5871e4a4d73
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/ar.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "الاشتراك الآن"},
+  "40": {"string": "حجز"},
+  "41": {"string": "شراء التذاكر"},
+  "42": {"string": "تنزيل"},
+  "43": {"string": "استكشاف"},
+  "44": {"string": "تنزيل المحتوى الآن"},
+  "45": {"string": "تثبيت الآن"},
+  "46": {"string": "مزيد من المعلومات"},
+  "47": {"string": "استماع"},
+  "48": {"string": "المزيد"},
+  "49": {"string": "فتح التطبيق"},
+  "50": {"string": "إرسال طلب الآن"},
+  "51": {"string": "تشغيل"},
+  "52": {"string": "قراءة"},
+  "53": {"string": "تسوق"},
+  "54": {"string": "عرض"},
+  "55": {"string": "مواعيد العرض"},
+  "56": {"string": "اشتراك"},
+  "57": {"string": "الاشتراك الآن"},
+  "58": {"string": "استخدام التطبيق"},
+  "59": {"string": "عرض"},
+  "60": {"string": "المشاهدة"},
+  "61": {"string": "مشاهدة الحلقة"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/bg.js b/extensions/amp-story-auto-ads/0.1/_locales/bg.js
deleted file mode 100644
index 5adde624a4a33..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/bg.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for bg strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Кандидатстване сега',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Резервиране',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Купете билети',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Изтегляне',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Разглеждане',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Изтегляне сега',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Инсталиране сега',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Научете повече',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Слушане',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Още',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Отваряне на приложението',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Поръчайте сега',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Пускане',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Четене',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Пазаруване',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Показване',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Часове на кинопрожекции',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Регистрация',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Абониране сега',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Използване на приложението',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Преглед',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Гледане',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Гледайте епизода',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/bg.json b/extensions/amp-story-auto-ads/0.1/_locales/bg.json
new file mode 100644
index 0000000000000..bcb63b0229493
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/bg.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Кандидатстване сега"},
+  "40": {"string": "Резервиране"},
+  "41": {"string": "Купете билети"},
+  "42": {"string": "Изтегляне"},
+  "43": {"string": "Разглеждане"},
+  "44": {"string": "Изтегляне сега"},
+  "45": {"string": "Инсталиране сега"},
+  "46": {"string": "Научете повече"},
+  "47": {"string": "Слушане"},
+  "48": {"string": "Още"},
+  "49": {"string": "Отваряне на приложението"},
+  "50": {"string": "Поръчайте сега"},
+  "51": {"string": "Пускане"},
+  "52": {"string": "Четене"},
+  "53": {"string": "Пазаруване"},
+  "54": {"string": "Показване"},
+  "55": {"string": "Часове на кинопрожекции"},
+  "56": {"string": "Регистрация"},
+  "57": {"string": "Абониране сега"},
+  "58": {"string": "Използване на приложението"},
+  "59": {"string": "Преглед"},
+  "60": {"string": "Гледане"},
+  "61": {"string": "Гледайте епизода"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/bn.js b/extensions/amp-story-auto-ads/0.1/_locales/bn.js
deleted file mode 100644
index 4b5f2252e8ef8..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/bn.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for bn strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'এখনই আবেদন করুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'বই',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'টিকিট কিনুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'ডাউনলোড করুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'ঘুরে দেখুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'এখনই ডাউনলোড করুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'এখনই ইনস্টল করুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'আরও জানুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'শুনুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'আরও',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'অ্যাপ খুলুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'এখনই অর্ডার করুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'চালান',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'পড়ুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'কিনুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'দেখান',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'শোটাইম',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'সাইন-আপ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'এখনই সাবস্ক্রাইব করুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'অ্যাপ ব্যবহার করুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'দেখুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'দেখুন',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'এপিসোড দেখুন',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/bn.json b/extensions/amp-story-auto-ads/0.1/_locales/bn.json
new file mode 100644
index 0000000000000..50fa1757db27b
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/bn.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "এখনই আবেদন করুন"},
+  "40": {"string": "বই"},
+  "41": {"string": "টিকিট কিনুন"},
+  "42": {"string": "ডাউনলোড করুন"},
+  "43": {"string": "ঘুরে দেখুন"},
+  "44": {"string": "এখনই ডাউনলোড করুন"},
+  "45": {"string": "এখনই ইনস্টল করুন"},
+  "46": {"string": "আরও জানুন"},
+  "47": {"string": "শুনুন"},
+  "48": {"string": "আরও"},
+  "49": {"string": "অ্যাপ খুলুন"},
+  "50": {"string": "এখনই অর্ডার করুন"},
+  "51": {"string": "চালান"},
+  "52": {"string": "পড়ুন"},
+  "53": {"string": "কিনুন"},
+  "54": {"string": "দেখান"},
+  "55": {"string": "শোটাইম"},
+  "56": {"string": "সাইন-আপ"},
+  "57": {"string": "এখনই সাবস্ক্রাইব করুন"},
+  "58": {"string": "অ্যাপ ব্যবহার করুন"},
+  "59": {"string": "দেখুন"},
+  "60": {"string": "দেখুন"},
+  "61": {"string": "এপিসোড দেখুন"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/bs.js b/extensions/amp-story-auto-ads/0.1/_locales/bs.js
deleted file mode 100644
index 1e18cab627188..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/bs.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for bs strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Primijeni sada',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Knjiga',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Kupi karte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Preuzmi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Istraži',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Preuzmi sada',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instaliraj sada',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Saznajte više',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Poslušajte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Više',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Otvori aplikaciju',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Naruči sada',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Reproduciraj',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Pročitajte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Kupujte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Prikaži',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Raspored prikazivanja',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Registriraj se',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Pretplatite se sada',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Koristi aplikaciju',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Prikaži',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Gledajte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Gledajte epizodu',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/bs.json b/extensions/amp-story-auto-ads/0.1/_locales/bs.json
new file mode 100644
index 0000000000000..0e4d946028885
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/bs.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Primijeni sada"},
+  "40": {"string": "Knjiga"},
+  "41": {"string": "Kupi karte"},
+  "42": {"string": "Preuzmi"},
+  "43": {"string": "Istraži"},
+  "44": {"string": "Preuzmi sada"},
+  "45": {"string": "Instaliraj sada"},
+  "46": {"string": "Saznajte više"},
+  "47": {"string": "Poslušajte"},
+  "48": {"string": "Više"},
+  "49": {"string": "Otvori aplikaciju"},
+  "50": {"string": "Naruči sada"},
+  "51": {"string": "Reproduciraj"},
+  "52": {"string": "Pročitajte"},
+  "53": {"string": "Kupujte"},
+  "54": {"string": "Prikaži"},
+  "55": {"string": "Raspored prikazivanja"},
+  "56": {"string": "Registriraj se"},
+  "57": {"string": "Pretplatite se sada"},
+  "58": {"string": "Koristi aplikaciju"},
+  "59": {"string": "Prikaži"},
+  "60": {"string": "Gledajte"},
+  "61": {"string": "Gledajte epizodu"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ca.js b/extensions/amp-story-auto-ads/0.1/_locales/ca.js
deleted file mode 100644
index 4ed3084c3e83f..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/ca.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ca strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Sol·licita ara',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Reserva',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Compra entrades',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Baixa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Explora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Obtén ara',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instal·la ara',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Més informació',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Escolta',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Més',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: "Obre l'aplicació",
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Fes una comanda',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Reprodueix',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Llegeix',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Compra',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Mostra',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Horaris',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: "Registra't",
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: "Subscriu-t'hi ara",
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: "Utilitza l'aplicació",
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Mostra',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Mira',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: "Mira l'episodi",
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ca.json b/extensions/amp-story-auto-ads/0.1/_locales/ca.json
new file mode 100644
index 0000000000000..95340067b1608
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/ca.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Sol·licita ara"},
+  "40": {"string": "Reserva"},
+  "41": {"string": "Compra entrades"},
+  "42": {"string": "Baixa"},
+  "43": {"string": "Explora"},
+  "44": {"string": "Obtén ara"},
+  "45": {"string": "Instal·la ara"},
+  "46": {"string": "Més informació"},
+  "47": {"string": "Escolta"},
+  "48": {"string": "Més"},
+  "49": {"string": "Obre l'aplicació"},
+  "50": {"string": "Fes una comanda"},
+  "51": {"string": "Reprodueix"},
+  "52": {"string": "Llegeix"},
+  "53": {"string": "Compra"},
+  "54": {"string": "Mostra"},
+  "55": {"string": "Horaris"},
+  "56": {"string": "Registra't"},
+  "57": {"string": "Subscriu-t'hi ara"},
+  "58": {"string": "Utilitza l'aplicació"},
+  "59": {"string": "Mostra"},
+  "60": {"string": "Mira"},
+  "61": {"string": "Mira l'episodi"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/cs.js b/extensions/amp-story-auto-ads/0.1/_locales/cs.js
deleted file mode 100644
index f67115ada3a86..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/cs.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for cs strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Požádat teď',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Zarezervovat',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Koupit lístky',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Stáhnout',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Prozkoumat',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Stáhnout',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instalovat',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Další informace',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Poslouchat',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Více',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Otevřít aplikaci',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Objednat',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Přehrát',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Přečíst',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Koupit',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Zobrazit',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Časy promítání',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Zaregistrovat se',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Přihlásit se k odběru',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Použít aplikaci',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Zobrazit',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Sledovat',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Přehrát epizodu',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/cs.json b/extensions/amp-story-auto-ads/0.1/_locales/cs.json
new file mode 100644
index 0000000000000..99a4cd34ab8e6
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/cs.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Požádat teď"},
+  "40": {"string": "Zarezervovat"},
+  "41": {"string": "Koupit lístky"},
+  "42": {"string": "Stáhnout"},
+  "43": {"string": "Prozkoumat"},
+  "44": {"string": "Stáhnout"},
+  "45": {"string": "Instalovat"},
+  "46": {"string": "Další informace"},
+  "47": {"string": "Poslouchat"},
+  "48": {"string": "Více"},
+  "49": {"string": "Otevřít aplikaci"},
+  "50": {"string": "Objednat"},
+  "51": {"string": "Přehrát"},
+  "52": {"string": "Přečíst"},
+  "53": {"string": "Koupit"},
+  "54": {"string": "Zobrazit"},
+  "55": {"string": "Časy promítání"},
+  "56": {"string": "Zaregistrovat se"},
+  "57": {"string": "Přihlásit se k odběru"},
+  "58": {"string": "Použít aplikaci"},
+  "59": {"string": "Zobrazit"},
+  "60": {"string": "Sledovat"},
+  "61": {"string": "Přehrát epizodu"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/da.js b/extensions/amp-story-auto-ads/0.1/_locales/da.js
deleted file mode 100644
index bbc4729dff120..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/da.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for da strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Ansøg nu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Book',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Køb billetter',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Download',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Udforsk',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Hent nu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Installer nu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Få flere oplysninger',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Lyt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Mere',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Åbn app',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Bestil nu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Afspil',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Læs',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Køb',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Vis',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Spilletider',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Tilmeld dig',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Abonner nu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Brug app',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Se',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Se',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Se afsnit',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/da.json b/extensions/amp-story-auto-ads/0.1/_locales/da.json
new file mode 100644
index 0000000000000..cf45e983189b8
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/da.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Ansøg nu"},
+  "40": {"string": "Book"},
+  "41": {"string": "Køb billetter"},
+  "42": {"string": "Download"},
+  "43": {"string": "Udforsk"},
+  "44": {"string": "Hent nu"},
+  "45": {"string": "Installer nu"},
+  "46": {"string": "Få flere oplysninger"},
+  "47": {"string": "Lyt"},
+  "48": {"string": "Mere"},
+  "49": {"string": "Åbn app"},
+  "50": {"string": "Bestil nu"},
+  "51": {"string": "Afspil"},
+  "52": {"string": "Læs"},
+  "53": {"string": "Køb"},
+  "54": {"string": "Vis"},
+  "55": {"string": "Spilletider"},
+  "56": {"string": "Tilmeld dig"},
+  "57": {"string": "Abonner nu"},
+  "58": {"string": "Brug app"},
+  "59": {"string": "Se"},
+  "60": {"string": "Se"},
+  "61": {"string": "Se afsnit"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/de.js b/extensions/amp-story-auto-ads/0.1/_locales/de.js
deleted file mode 100644
index 9a9d96082d473..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/de.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for de strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Jetzt bewerben',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Reservieren',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Tickets kaufen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Herunterladen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Erkunden',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Jetzt herunterladen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Jetzt installieren',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Weitere Informationen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Anhören',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Mehr',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'App öffnen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Jetzt bestellen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Abspielen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Lesen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Einkaufen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Anzeigen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Vorführungszeiten',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Anmelden',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Jetzt abonnieren',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Zur App',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Ansehen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Ansehen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Folge ansehen',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/de.json b/extensions/amp-story-auto-ads/0.1/_locales/de.json
new file mode 100644
index 0000000000000..386013d319268
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/de.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Jetzt bewerben"},
+  "40": {"string": "Reservieren"},
+  "41": {"string": "Tickets kaufen"},
+  "42": {"string": "Herunterladen"},
+  "43": {"string": "Erkunden"},
+  "44": {"string": "Jetzt herunterladen"},
+  "45": {"string": "Jetzt installieren"},
+  "46": {"string": "Weitere Informationen"},
+  "47": {"string": "Anhören"},
+  "48": {"string": "Mehr"},
+  "49": {"string": "App öffnen"},
+  "50": {"string": "Jetzt bestellen"},
+  "51": {"string": "Abspielen"},
+  "52": {"string": "Lesen"},
+  "53": {"string": "Einkaufen"},
+  "54": {"string": "Anzeigen"},
+  "55": {"string": "Vorführungszeiten"},
+  "56": {"string": "Anmelden"},
+  "57": {"string": "Jetzt abonnieren"},
+  "58": {"string": "Zur App"},
+  "59": {"string": "Ansehen"},
+  "60": {"string": "Ansehen"},
+  "61": {"string": "Folge ansehen"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/el.js b/extensions/amp-story-auto-ads/0.1/_locales/el.js
deleted file mode 100644
index 2c719a8fdc1dd..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/el.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for el strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Υποβάλετε αίτηση τώρα',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Κράτηση',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Αγορά εισιτηρίων',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Λήψη',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Εξερεύνηση',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Λήψη τώρα',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Εγκατάσταση τώρα',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Μάθετε περισσότερα',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Ακρόαση',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Περισσότερα',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Άνοιγμα εφαρμογής',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Παραγγελία τώρα',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Αναπαραγωγή',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Ανάγνωση',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Αγορά',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Εμφάνιση',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Ώρες προβολής',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Εγγραφή',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Εγγραφείτε τώρα',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Χρήση εφαρμογής',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Προβολή',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Παρακολούθηση',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Παρακολούθηση επεισοδίου',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/el.json b/extensions/amp-story-auto-ads/0.1/_locales/el.json
new file mode 100644
index 0000000000000..5579f608cc435
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/el.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Υποβάλετε αίτηση τώρα"},
+  "40": {"string": "Κράτηση"},
+  "41": {"string": "Αγορά εισιτηρίων"},
+  "42": {"string": "Λήψη"},
+  "43": {"string": "Εξερεύνηση"},
+  "44": {"string": "Λήψη τώρα"},
+  "45": {"string": "Εγκατάσταση τώρα"},
+  "46": {"string": "Μάθετε περισσότερα"},
+  "47": {"string": "Ακρόαση"},
+  "48": {"string": "Περισσότερα"},
+  "49": {"string": "Άνοιγμα εφαρμογής"},
+  "50": {"string": "Παραγγελία τώρα"},
+  "51": {"string": "Αναπαραγωγή"},
+  "52": {"string": "Ανάγνωση"},
+  "53": {"string": "Αγορά"},
+  "54": {"string": "Εμφάνιση"},
+  "55": {"string": "Ώρες προβολής"},
+  "56": {"string": "Εγγραφή"},
+  "57": {"string": "Εγγραφείτε τώρα"},
+  "58": {"string": "Χρήση εφαρμογής"},
+  "59": {"string": "Προβολή"},
+  "60": {"string": "Παρακολούθηση"},
+  "61": {"string": "Παρακολούθηση επεισοδίου"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/en-GB.js b/extensions/amp-story-auto-ads/0.1/_locales/en-GB.js
deleted file mode 100644
index e9e64f22a3e6b..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/en-GB.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for en-GB strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Apply Now',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Book',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Buy Tickets',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Download',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Explore',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Get Now',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Install Now',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Learn More',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Listen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'More',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Open App',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Order Now',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Play',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Read',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Shop Now',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Show',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Performance times',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Sign Up',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Subscribe Now',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Use App',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'View',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Watch',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Watch Episode',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/en-GB.json b/extensions/amp-story-auto-ads/0.1/_locales/en-GB.json
new file mode 100644
index 0000000000000..076454e1bee87
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/en-GB.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Apply Now"},
+  "40": {"string": "Book"},
+  "41": {"string": "Buy Tickets"},
+  "42": {"string": "Download"},
+  "43": {"string": "Explore"},
+  "44": {"string": "Get Now"},
+  "45": {"string": "Install Now"},
+  "46": {"string": "Learn More"},
+  "47": {"string": "Listen"},
+  "48": {"string": "More"},
+  "49": {"string": "Open App"},
+  "50": {"string": "Order Now"},
+  "51": {"string": "Play"},
+  "52": {"string": "Read"},
+  "53": {"string": "Shop Now"},
+  "54": {"string": "Show"},
+  "55": {"string": "Performance times"},
+  "56": {"string": "Sign Up"},
+  "57": {"string": "Subscribe Now"},
+  "58": {"string": "Use App"},
+  "59": {"string": "View"},
+  "60": {"string": "Watch"},
+  "61": {"string": "Watch Episode"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/en.js b/extensions/amp-story-auto-ads/0.1/_locales/en.js
deleted file mode 100644
index e4c099d9dbf4c..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/en.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for English strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Apply Now',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to apply for something.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Book',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to book transaction.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Buy Tickets',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to purchase tickets.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Download',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to download content.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Explore',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to explore content.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Get Now',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to obtain content.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Install Now',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to install content.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Learn More',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to learn more about some content.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Listen',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to listen to content.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'More',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to see more content.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Open App',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to open an application.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Order Now',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to place an order.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Play',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to play content.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Read',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to read content.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Shop Now',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to shop for something.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Show',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to show content.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Showtimes',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to see showtimes.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Sign Up',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to sign up for something.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Subscribe Now',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to subscribe to something.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Use App',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to use an application.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'View',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to view content.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Watch',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to watch content.',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Watch Episode',
-    description:
-      'Button label for an ad call to action button that asks ' +
-      'users to watch an episode of something.',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/en.json b/extensions/amp-story-auto-ads/0.1/_locales/en.json
new file mode 100644
index 0000000000000..cd78bac8b4d6c
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/en.json
@@ -0,0 +1,94 @@
+{
+  "39": {
+    "string": "Apply Now",
+    "description": "Button label for an ad call to action button that asks users to apply for something."
+  },
+  "40": {
+    "string": "Book",
+    "description": "Button label for an ad call to action button that asks users to book transaction."
+  },
+  "41": {
+    "string": "Buy Tickets",
+    "description": "Button label for an ad call to action button that asks users to purchase tickets."
+  },
+  "42": {
+    "string": "Download",
+    "description": "Button label for an ad call to action button that asks users to download content."
+  },
+  "43": {
+    "string": "Explore",
+    "description": "Button label for an ad call to action button that asks users to explore content."
+  },
+  "44": {
+    "string": "Get Now",
+    "description": "Button label for an ad call to action button that asks users to obtain content."
+  },
+  "45": {
+    "string": "Install Now",
+    "description": "Button label for an ad call to action button that asks users to install content."
+  },
+  "46": {
+    "string": "Learn More",
+    "description": "Button label for an ad call to action button that asks users to learn more about some content."
+  },
+  "47": {
+    "string": "Listen",
+    "description": "Button label for an ad call to action button that asks users to listen to content."
+  },
+  "48": {
+    "string": "More",
+    "description": "Button label for an ad call to action button that asks users to see more content."
+  },
+  "49": {
+    "string": "Open App",
+    "description": "Button label for an ad call to action button that asks users to open an application."
+  },
+  "50": {
+    "string": "Order Now",
+    "description": "Button label for an ad call to action button that asks users to place an order."
+  },
+  "51": {
+    "string": "Play",
+    "description": "Button label for an ad call to action button that asks users to play content."
+  },
+  "52": {
+    "string": "Read",
+    "description": "Button label for an ad call to action button that asks users to read content."
+  },
+  "53": {
+    "string": "Shop Now",
+    "description": "Button label for an ad call to action button that asks users to shop for something."
+  },
+  "54": {
+    "string": "Show",
+    "description": "Button label for an ad call to action button that asks users to show content."
+  },
+  "55": {
+    "string": "Showtimes",
+    "description": "Button label for an ad call to action button that asks users to see showtimes."
+  },
+  "56": {
+    "string": "Sign Up",
+    "description": "Button label for an ad call to action button that asks users to sign up for something."
+  },
+  "57": {
+    "string": "Subscribe Now",
+    "description": "Button label for an ad call to action button that asks users to subscribe to something."
+  },
+  "58": {
+    "string": "Use App",
+    "description": "Button label for an ad call to action button that asks users to use an application."
+  },
+  "59": {
+    "string": "View",
+    "description": "Button label for an ad call to action button that asks users to view content."
+  },
+  "60": {
+    "string": "Watch",
+    "description": "Button label for an ad call to action button that asks users to watch content."
+  },
+  "61": {
+    "string": "Watch Episode",
+    "description": "Button label for an ad call to action button that asks users to watch an episode of something."
+  }
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/es-419.js b/extensions/amp-story-auto-ads/0.1/_locales/es-419.js
deleted file mode 100644
index afa8a92feb8ec..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/es-419.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for es-419 strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Enviar solicitud ahora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Reservar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Comprar entradas',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Descargar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Explorar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Obtener ahora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instalar ahora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Más información',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Escuchar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Más',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Abrir app',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Pedir ahora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Reproducir',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Leer',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Comprar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Mostrar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Horarios',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Registrarse',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Suscribirse ahora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Usar app',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Ver',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Mirar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Mirar episodio',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/es-419.json b/extensions/amp-story-auto-ads/0.1/_locales/es-419.json
new file mode 100644
index 0000000000000..61e809485f3cc
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/es-419.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Enviar solicitud ahora"},
+  "40": {"string": "Reservar"},
+  "41": {"string": "Comprar entradas"},
+  "42": {"string": "Descargar"},
+  "43": {"string": "Explorar"},
+  "44": {"string": "Obtener ahora"},
+  "45": {"string": "Instalar ahora"},
+  "46": {"string": "Más información"},
+  "47": {"string": "Escuchar"},
+  "48": {"string": "Más"},
+  "49": {"string": "Abrir app"},
+  "50": {"string": "Pedir ahora"},
+  "51": {"string": "Reproducir"},
+  "52": {"string": "Leer"},
+  "53": {"string": "Comprar"},
+  "54": {"string": "Mostrar"},
+  "55": {"string": "Horarios"},
+  "56": {"string": "Registrarse"},
+  "57": {"string": "Suscribirse ahora"},
+  "58": {"string": "Usar app"},
+  "59": {"string": "Ver"},
+  "60": {"string": "Mirar"},
+  "61": {"string": "Mirar episodio"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/es.js b/extensions/amp-story-auto-ads/0.1/_locales/es.js
deleted file mode 100644
index a693177b54462..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/es.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for es strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Solicítalo ahora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Reserva',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Compra entradas',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Descargar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Consultar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Descargar ahora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instalar ahora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Consulta más información',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Escuchar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Más',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Abrir la aplicación',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Haz el pedido ahora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Reproducir',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Leer',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Comprar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Mostrar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Consulta los horarios',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Regístrate',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Suscríbete ahora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Usa la aplicación',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Ver',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Visualízalo',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Ver episodio',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/es.json b/extensions/amp-story-auto-ads/0.1/_locales/es.json
new file mode 100644
index 0000000000000..582b5cef1fb7f
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/es.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Solicítalo ahora"},
+  "40": {"string": "Reserva"},
+  "41": {"string": "Compra entradas"},
+  "42": {"string": "Descargar"},
+  "43": {"string": "Consultar"},
+  "44": {"string": "Descargar ahora"},
+  "45": {"string": "Instalar ahora"},
+  "46": {"string": "Consulta más información"},
+  "47": {"string": "Escuchar"},
+  "48": {"string": "Más"},
+  "49": {"string": "Abrir la aplicación"},
+  "50": {"string": "Haz el pedido ahora"},
+  "51": {"string": "Reproducir"},
+  "52": {"string": "Leer"},
+  "53": {"string": "Comprar"},
+  "54": {"string": "Mostrar"},
+  "55": {"string": "Consulta los horarios"},
+  "56": {"string": "Regístrate"},
+  "57": {"string": "Suscríbete ahora"},
+  "58": {"string": "Usa la aplicación"},
+  "59": {"string": "Ver"},
+  "60": {"string": "Visualízalo"},
+  "61": {"string": "Ver episodio"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/et.js b/extensions/amp-story-auto-ads/0.1/_locales/et.js
deleted file mode 100644
index eb0117bd0206f..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/et.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for et strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Taotlege kohe',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Broneerige',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Ostke pileteid',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Laadige alla',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Avastage',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Hankige kohe',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Installige kohe',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Lisateave',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Kuulake',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Rohkem',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Avage rakendus',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Tellige kohe',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Esitage',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Lugege',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Ostke',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Vaadake',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Esitusajad',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Registreeruge',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Tellige',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Kasutage rakendust',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Kuva',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Vaadake',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Vaadake jagu',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/et.json b/extensions/amp-story-auto-ads/0.1/_locales/et.json
new file mode 100644
index 0000000000000..590ba86d3d7a5
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/et.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Taotlege kohe"},
+  "40": {"string": "Broneerige"},
+  "41": {"string": "Ostke pileteid"},
+  "42": {"string": "Laadige alla"},
+  "43": {"string": "Avastage"},
+  "44": {"string": "Hankige kohe"},
+  "45": {"string": "Installige kohe"},
+  "46": {"string": "Lisateave"},
+  "47": {"string": "Kuulake"},
+  "48": {"string": "Rohkem"},
+  "49": {"string": "Avage rakendus"},
+  "50": {"string": "Tellige kohe"},
+  "51": {"string": "Esitage"},
+  "52": {"string": "Lugege"},
+  "53": {"string": "Ostke"},
+  "54": {"string": "Vaadake"},
+  "55": {"string": "Esitusajad"},
+  "56": {"string": "Registreeruge"},
+  "57": {"string": "Tellige"},
+  "58": {"string": "Kasutage rakendust"},
+  "59": {"string": "Kuva"},
+  "60": {"string": "Vaadake"},
+  "61": {"string": "Vaadake jagu"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/eu.js b/extensions/amp-story-auto-ads/0.1/_locales/eu.js
deleted file mode 100644
index 52d5f79c889cb..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/eu.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for eu strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Deskargatu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Arakatu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Eskuratu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instalatu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Lortu informazio gehiago',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Entzun',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Gehiago',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Ireki aplikazioa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Eskatu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Erreproduzitu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Irakurri',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Erosi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Erakutsi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Emanaldiak',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Erregistratu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Harpidetu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Erabili aplikazioa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Ikusi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Ikusi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Ikusi atala',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/eu.json b/extensions/amp-story-auto-ads/0.1/_locales/eu.json
new file mode 100644
index 0000000000000..058f63433f353
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/eu.json
@@ -0,0 +1,22 @@
+{
+  "42": {"string": "Deskargatu"},
+  "43": {"string": "Arakatu"},
+  "44": {"string": "Eskuratu"},
+  "45": {"string": "Instalatu"},
+  "46": {"string": "Lortu informazio gehiago"},
+  "47": {"string": "Entzun"},
+  "48": {"string": "Gehiago"},
+  "49": {"string": "Ireki aplikazioa"},
+  "50": {"string": "Eskatu"},
+  "51": {"string": "Erreproduzitu"},
+  "52": {"string": "Irakurri"},
+  "53": {"string": "Erosi"},
+  "54": {"string": "Erakutsi"},
+  "55": {"string": "Emanaldiak"},
+  "56": {"string": "Erregistratu"},
+  "57": {"string": "Harpidetu"},
+  "58": {"string": "Erabili aplikazioa"},
+  "59": {"string": "Ikusi"},
+  "60": {"string": "Ikusi"},
+  "61": {"string": "Ikusi atala"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/fa.js b/extensions/amp-story-auto-ads/0.1/_locales/fa.js
deleted file mode 100644
index c463c8194fba1..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/fa.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for fa strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'اکنون اعمال شود',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'رزرو',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'خرید بلیت',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'بارگیری',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'کاوش',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'اکنون دریافت کنید',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'اکنون نصب شود',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'بیشتر بدانید',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'گوش دادن',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'بیشتر',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'باز کردن برنامه',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'اکنون سفارش داده شود',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'پخش',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'خواندن',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'خرید',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'نمایش',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'زمان‌های نمایش',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'ثبت‌نام',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'همین‌حالا مشترک شوید',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'استفاده از برنامه',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'مشاهده',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'تماشا',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'تماشای قسمت',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/fa.json b/extensions/amp-story-auto-ads/0.1/_locales/fa.json
new file mode 100644
index 0000000000000..2566f0e63aadf
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/fa.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "اکنون اعمال شود"},
+  "40": {"string": "رزرو"},
+  "41": {"string": "خرید بلیت"},
+  "42": {"string": "بارگیری"},
+  "43": {"string": "کاوش"},
+  "44": {"string": "اکنون دریافت کنید"},
+  "45": {"string": "اکنون نصب شود"},
+  "46": {"string": "بیشتر بدانید"},
+  "47": {"string": "گوش دادن"},
+  "48": {"string": "بیشتر"},
+  "49": {"string": "باز کردن برنامه"},
+  "50": {"string": "اکنون سفارش داده شود"},
+  "51": {"string": "پخش"},
+  "52": {"string": "خواندن"},
+  "53": {"string": "خرید"},
+  "54": {"string": "نمایش"},
+  "55": {"string": "زمان‌های نمایش"},
+  "56": {"string": "ثبت‌نام"},
+  "57": {"string": "همین‌حالا مشترک شوید"},
+  "58": {"string": "استفاده از برنامه"},
+  "59": {"string": "مشاهده"},
+  "60": {"string": "تماشا"},
+  "61": {"string": "تماشای قسمت"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/fi.js b/extensions/amp-story-auto-ads/0.1/_locales/fi.js
deleted file mode 100644
index 0b5bc0916737c..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/fi.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for fi strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Hae nyt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Varaa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Osta lippuja',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Lataa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Tutki',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Lataa nyt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Asenna nyt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Lue lisää',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Kuuntele',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Lisää',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Avaa sovellus',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Tilaa nyt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Toista',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Lue',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Osta',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Ohjelma',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Esitysajat',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Liity',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Tilaa nyt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Käytä sovellusta',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Näytä',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Katso',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Katso jakso',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/fi.json b/extensions/amp-story-auto-ads/0.1/_locales/fi.json
new file mode 100644
index 0000000000000..e2558d7f3ae00
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/fi.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Hae nyt"},
+  "40": {"string": "Varaa"},
+  "41": {"string": "Osta lippuja"},
+  "42": {"string": "Lataa"},
+  "43": {"string": "Tutki"},
+  "44": {"string": "Lataa nyt"},
+  "45": {"string": "Asenna nyt"},
+  "46": {"string": "Lue lisää"},
+  "47": {"string": "Kuuntele"},
+  "48": {"string": "Lisää"},
+  "49": {"string": "Avaa sovellus"},
+  "50": {"string": "Tilaa nyt"},
+  "51": {"string": "Toista"},
+  "52": {"string": "Lue"},
+  "53": {"string": "Osta"},
+  "54": {"string": "Ohjelma"},
+  "55": {"string": "Esitysajat"},
+  "56": {"string": "Liity"},
+  "57": {"string": "Tilaa nyt"},
+  "58": {"string": "Käytä sovellusta"},
+  "59": {"string": "Näytä"},
+  "60": {"string": "Katso"},
+  "61": {"string": "Katso jakso"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/fil.js b/extensions/amp-story-auto-ads/0.1/_locales/fil.js
deleted file mode 100644
index a52676abafe79..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/fil.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for fil strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Mag-apply Na',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Mag-book',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Bumili ng Mga Tiket',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'I-download',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Explore',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Kunin Ngayon',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'I-install Na',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Matuto Pa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Pakinggan',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Higit pa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Buksan ang App',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Mag-order Ngayon',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Play',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Read',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Mamili',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Palabas',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Mga Oras ng Palabas',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Mag-sign Up',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Mag-subscribe Na',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Gamitin ang App',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Tingnan',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Panoorin',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Panoorin ang Episode',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/fil.json b/extensions/amp-story-auto-ads/0.1/_locales/fil.json
new file mode 100644
index 0000000000000..663ca659000bd
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/fil.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Mag-apply Na"},
+  "40": {"string": "Mag-book"},
+  "41": {"string": "Bumili ng Mga Tiket"},
+  "42": {"string": "I-download"},
+  "43": {"string": "Explore"},
+  "44": {"string": "Kunin Ngayon"},
+  "45": {"string": "I-install Na"},
+  "46": {"string": "Matuto Pa"},
+  "47": {"string": "Pakinggan"},
+  "48": {"string": "Higit pa"},
+  "49": {"string": "Buksan ang App"},
+  "50": {"string": "Mag-order Ngayon"},
+  "51": {"string": "Play"},
+  "52": {"string": "Read"},
+  "53": {"string": "Mamili"},
+  "54": {"string": "Palabas"},
+  "55": {"string": "Mga Oras ng Palabas"},
+  "56": {"string": "Mag-sign Up"},
+  "57": {"string": "Mag-subscribe Na"},
+  "58": {"string": "Gamitin ang App"},
+  "59": {"string": "Tingnan"},
+  "60": {"string": "Panoorin"},
+  "61": {"string": "Panoorin ang Episode"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/fr.js b/extensions/amp-story-auto-ads/0.1/_locales/fr.js
deleted file mode 100644
index 61b6b633f77ef..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/fr.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for fr strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Inscrivez-vous dès maintenant',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Réserver',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Acheter des billets',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Télécharger',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Découvrir',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Obtenir',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Installer',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'En savoir plus',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Écouter',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Plus',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: "Ouvrir l'application",
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Commander',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Lire',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Lire',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Acheter',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Afficher',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Horaires des séances',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: "S'inscrire",
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: "S'abonner",
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: "Utiliser l'application",
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Afficher',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Regarder',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: "Regarder l'épisode",
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/fr.json b/extensions/amp-story-auto-ads/0.1/_locales/fr.json
new file mode 100644
index 0000000000000..486af8156c644
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/fr.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Inscrivez-vous dès maintenant"},
+  "40": {"string": "Réserver"},
+  "41": {"string": "Acheter des billets"},
+  "42": {"string": "Télécharger"},
+  "43": {"string": "Découvrir"},
+  "44": {"string": "Obtenir"},
+  "45": {"string": "Installer"},
+  "46": {"string": "En savoir plus"},
+  "47": {"string": "Écouter"},
+  "48": {"string": "Plus"},
+  "49": {"string": "Ouvrir l'application"},
+  "50": {"string": "Commander"},
+  "51": {"string": "Lire"},
+  "52": {"string": "Lire"},
+  "53": {"string": "Acheter"},
+  "54": {"string": "Afficher"},
+  "55": {"string": "Horaires des séances"},
+  "56": {"string": "S'inscrire"},
+  "57": {"string": "S'abonner"},
+  "58": {"string": "Utiliser l'application"},
+  "59": {"string": "Afficher"},
+  "60": {"string": "Regarder"},
+  "61": {"string": "Regarder l'épisode"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/gl.js b/extensions/amp-story-auto-ads/0.1/_locales/gl.js
deleted file mode 100644
index 8917943ea9283..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/gl.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for gl strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Solicitar agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Reservar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Comprar entradas',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Descargar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Explorar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Obter agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instalar agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Máis información',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Escoitar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Máis',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Abrir aplicación',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Realizar pedido agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Reproducir',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Ler',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Comprar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Mostrar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Sesións da película',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Rexistrarse',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Subscribirse agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Usar aplicación',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Ver',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Ver',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Ver episodio',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/gl.json b/extensions/amp-story-auto-ads/0.1/_locales/gl.json
new file mode 100644
index 0000000000000..d009332cc91ae
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/gl.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Solicitar agora"},
+  "40": {"string": "Reservar"},
+  "41": {"string": "Comprar entradas"},
+  "42": {"string": "Descargar"},
+  "43": {"string": "Explorar"},
+  "44": {"string": "Obter agora"},
+  "45": {"string": "Instalar agora"},
+  "46": {"string": "Máis información"},
+  "47": {"string": "Escoitar"},
+  "48": {"string": "Máis"},
+  "49": {"string": "Abrir aplicación"},
+  "50": {"string": "Realizar pedido agora"},
+  "51": {"string": "Reproducir"},
+  "52": {"string": "Ler"},
+  "53": {"string": "Comprar"},
+  "54": {"string": "Mostrar"},
+  "55": {"string": "Sesións da película"},
+  "56": {"string": "Rexistrarse"},
+  "57": {"string": "Subscribirse agora"},
+  "58": {"string": "Usar aplicación"},
+  "59": {"string": "Ver"},
+  "60": {"string": "Ver"},
+  "61": {"string": "Ver episodio"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/gu.js b/extensions/amp-story-auto-ads/0.1/_locales/gu.js
deleted file mode 100644
index d2f147826d580..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/gu.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for gu strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'હમણાં અરજી કરો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'પુસ્તક',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'ટિકિટ ખરીદો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'ડાઉનલોડ કરો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'શોધખોળ કરો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'હમણાં મેળવો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'હમણાં ઇન્સ્ટૉલ કરો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'વધુ જાણો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'સાંભળો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'વધુ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'ઍપ ખોલો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'હમણાં ઑર્ડર કરો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'ચલાવો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'વાંચો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'ખરીદો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'બતાવો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'શોટાઇમ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'સાઇન અપ કરો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'હમણાં સબ્સ્ક્રાઇબ કરો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'ઍપનો ઉપયોગ કરો',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'જુઓ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'જુઓ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'એપિસોડ જુઓ',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/gu.json b/extensions/amp-story-auto-ads/0.1/_locales/gu.json
new file mode 100644
index 0000000000000..0865b65523bd0
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/gu.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "હમણાં અરજી કરો"},
+  "40": {"string": "પુસ્તક"},
+  "41": {"string": "ટિકિટ ખરીદો"},
+  "42": {"string": "ડાઉનલોડ કરો"},
+  "43": {"string": "શોધખોળ કરો"},
+  "44": {"string": "હમણાં મેળવો"},
+  "45": {"string": "હમણાં ઇન્સ્ટૉલ કરો"},
+  "46": {"string": "વધુ જાણો"},
+  "47": {"string": "સાંભળો"},
+  "48": {"string": "વધુ"},
+  "49": {"string": "ઍપ ખોલો"},
+  "50": {"string": "હમણાં ઑર્ડર કરો"},
+  "51": {"string": "ચલાવો"},
+  "52": {"string": "વાંચો"},
+  "53": {"string": "ખરીદો"},
+  "54": {"string": "બતાવો"},
+  "55": {"string": "શોટાઇમ"},
+  "56": {"string": "સાઇન અપ કરો"},
+  "57": {"string": "હમણાં સબ્સ્ક્રાઇબ કરો"},
+  "58": {"string": "ઍપનો ઉપયોગ કરો"},
+  "59": {"string": "જુઓ"},
+  "60": {"string": "જુઓ"},
+  "61": {"string": "એપિસોડ જુઓ"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/hi.js b/extensions/amp-story-auto-ads/0.1/_locales/hi.js
deleted file mode 100644
index a7d4c13dc22b4..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/hi.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for hi strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'अभी आवेदन करें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'बुक करें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'टिकट खरीदें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'डाउनलोड करें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'और जानें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'अभी पाएं',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'अभी इंस्टॉल करें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'ज़्यादा जानें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'सुनें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'दूसरी सामग्री',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'ऐप्लिकेशन खोलें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'अभी ऑर्डर करें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'चलाएं',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'पढ़ें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'खरीदारी करें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'दिखाएं',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'शो का समय',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'साइन अप करें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'अभी सदस्य बनें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'ऐप्लिकेशन इस्तेमाल करें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'देखें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'देखें',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'एपिसोड देखें',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/hi.json b/extensions/amp-story-auto-ads/0.1/_locales/hi.json
new file mode 100644
index 0000000000000..a4abfbd2aa29f
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/hi.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "अभी आवेदन करें"},
+  "40": {"string": "बुक करें"},
+  "41": {"string": "टिकट खरीदें"},
+  "42": {"string": "डाउनलोड करें"},
+  "43": {"string": "और जानें"},
+  "44": {"string": "अभी पाएं"},
+  "45": {"string": "अभी इंस्टॉल करें"},
+  "46": {"string": "ज़्यादा जानें"},
+  "47": {"string": "सुनें"},
+  "48": {"string": "दूसरी सामग्री"},
+  "49": {"string": "ऐप्लिकेशन खोलें"},
+  "50": {"string": "अभी ऑर्डर करें"},
+  "51": {"string": "चलाएं"},
+  "52": {"string": "पढ़ें"},
+  "53": {"string": "खरीदारी करें"},
+  "54": {"string": "दिखाएं"},
+  "55": {"string": "शो का समय"},
+  "56": {"string": "साइन अप करें"},
+  "57": {"string": "अभी सदस्य बनें"},
+  "58": {"string": "ऐप्लिकेशन इस्तेमाल करें"},
+  "59": {"string": "देखें"},
+  "60": {"string": "देखें"},
+  "61": {"string": "एपिसोड देखें"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/hr.js b/extensions/amp-story-auto-ads/0.1/_locales/hr.js
deleted file mode 100644
index c87635f147ef1..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/hr.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for hr strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Prijavite se odmah',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Rezervirajte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Kupite karte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Preuzmi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Istražite',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Nabavite odmah',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instalirajte odmah',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Saznajte više',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Slušajte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Više',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Otvorite aplikaciju',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Naručite odmah',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Reproducirajte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Čitajte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Kupite',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Prikaži',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Vrijeme prikazivanja',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Registrirajte se',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Pretplatite se odmah',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Koristite aplikaciju',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Pregledajte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Pogledajte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Pogledajte epizodu',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/hr.json b/extensions/amp-story-auto-ads/0.1/_locales/hr.json
new file mode 100644
index 0000000000000..8d83ea6a57558
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/hr.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Prijavite se odmah"},
+  "40": {"string": "Rezervirajte"},
+  "41": {"string": "Kupite karte"},
+  "42": {"string": "Preuzmi"},
+  "43": {"string": "Istražite"},
+  "44": {"string": "Nabavite odmah"},
+  "45": {"string": "Instalirajte odmah"},
+  "46": {"string": "Saznajte više"},
+  "47": {"string": "Slušajte"},
+  "48": {"string": "Više"},
+  "49": {"string": "Otvorite aplikaciju"},
+  "50": {"string": "Naručite odmah"},
+  "51": {"string": "Reproducirajte"},
+  "52": {"string": "Čitajte"},
+  "53": {"string": "Kupite"},
+  "54": {"string": "Prikaži"},
+  "55": {"string": "Vrijeme prikazivanja"},
+  "56": {"string": "Registrirajte se"},
+  "57": {"string": "Pretplatite se odmah"},
+  "58": {"string": "Koristite aplikaciju"},
+  "59": {"string": "Pregledajte"},
+  "60": {"string": "Pogledajte"},
+  "61": {"string": "Pogledajte epizodu"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/hu.js b/extensions/amp-story-auto-ads/0.1/_locales/hu.js
deleted file mode 100644
index 05f5d723890fe..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/hu.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for hu strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Jelentkezés',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Foglalás',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Jegyvásárlás',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Letöltés',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Felfedezés',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Letöltés',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Telepítés most',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'További információ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Meghallgatás',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Továbbiak',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Alkalmazás megnyitása',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Rendelés most',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Lejátszás',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Olvasás',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Vásárlás',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Megjelenítés',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Vetítési időpontok',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Regisztráció',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Feliratkozás most',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Az alkalmazás használata',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Megtekintés',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Megtekintés',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Epizód megtekintése',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/hu.json b/extensions/amp-story-auto-ads/0.1/_locales/hu.json
new file mode 100644
index 0000000000000..63d56158aa569
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/hu.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Jelentkezés"},
+  "40": {"string": "Foglalás"},
+  "41": {"string": "Jegyvásárlás"},
+  "42": {"string": "Letöltés"},
+  "43": {"string": "Felfedezés"},
+  "44": {"string": "Letöltés"},
+  "45": {"string": "Telepítés most"},
+  "46": {"string": "További információ"},
+  "47": {"string": "Meghallgatás"},
+  "48": {"string": "Továbbiak"},
+  "49": {"string": "Alkalmazás megnyitása"},
+  "50": {"string": "Rendelés most"},
+  "51": {"string": "Lejátszás"},
+  "52": {"string": "Olvasás"},
+  "53": {"string": "Vásárlás"},
+  "54": {"string": "Megjelenítés"},
+  "55": {"string": "Vetítési időpontok"},
+  "56": {"string": "Regisztráció"},
+  "57": {"string": "Feliratkozás most"},
+  "58": {"string": "Az alkalmazás használata"},
+  "59": {"string": "Megtekintés"},
+  "60": {"string": "Megtekintés"},
+  "61": {"string": "Epizód megtekintése"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/id.js b/extensions/amp-story-auto-ads/0.1/_locales/id.js
deleted file mode 100644
index 54b8340a6361c..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/id.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for id strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Daftarkan Sekarang',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Reservasi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Beli Tiket',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Download',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Jelajahi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Dapatkan Sekarang',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instal Sekarang',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Pelajari Lebih Lanjut',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Dengarkan',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Lainnya',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Buka Aplikasi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Pesan Sekarang',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Putar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Baca',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Beli',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Tampilkan',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Jam Tayang',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Daftar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Berlangganan Sekarang',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Gunakan Aplikasi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Lihat',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Tonton',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Tonton Episode',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/id.json b/extensions/amp-story-auto-ads/0.1/_locales/id.json
new file mode 100644
index 0000000000000..5583ed78ab4ff
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/id.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Daftarkan Sekarang"},
+  "40": {"string": "Reservasi"},
+  "41": {"string": "Beli Tiket"},
+  "42": {"string": "Download"},
+  "43": {"string": "Jelajahi"},
+  "44": {"string": "Dapatkan Sekarang"},
+  "45": {"string": "Instal Sekarang"},
+  "46": {"string": "Pelajari Lebih Lanjut"},
+  "47": {"string": "Dengarkan"},
+  "48": {"string": "Lainnya"},
+  "49": {"string": "Buka Aplikasi"},
+  "50": {"string": "Pesan Sekarang"},
+  "51": {"string": "Putar"},
+  "52": {"string": "Baca"},
+  "53": {"string": "Beli"},
+  "54": {"string": "Tampilkan"},
+  "55": {"string": "Jam Tayang"},
+  "56": {"string": "Daftar"},
+  "57": {"string": "Berlangganan Sekarang"},
+  "58": {"string": "Gunakan Aplikasi"},
+  "59": {"string": "Lihat"},
+  "60": {"string": "Tonton"},
+  "61": {"string": "Tonton Episode"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/index.js b/extensions/amp-story-auto-ads/0.1/_locales/index.js
new file mode 100644
index 0000000000000..96464757116c5
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/index.js
@@ -0,0 +1,159 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import LocalizedStringaf from './af.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringam from './am.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringar from './ar.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringbg from './bg.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringbn from './bn.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringbs from './bs.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringca from './ca.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringcs from './cs.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringda from './da.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringde from './de.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringel from './el.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringen from './en.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringenGB from './en-GB.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringes from './es.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringes419 from './es-419.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringet from './et.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringeu from './eu.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringfa from './fa.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringfi from './fi.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringfil from './fil.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringfr from './fr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringgl from './gl.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringgu from './gu.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringhi from './hi.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringhr from './hr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringhu from './hu.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringid from './id.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringis from './is.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringit from './it.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringiw from './iw.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringja from './ja.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringka from './ka.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringkm from './km.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringkn from './kn.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringko from './ko.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringlo from './lo.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringlt from './lt.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringlv from './lv.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringmk from './mk.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringml from './ml.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringmn from './mn.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringmr from './mr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringms from './ms.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringmy from './my.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringne from './ne.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringnl from './nl.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringno from './no.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringpa from './pa.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringpl from './pl.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringptBR from './pt-BR.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringptPT from './pt-PT.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringro from './ro.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringru from './ru.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsi from './si.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsk from './sk.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsl from './sl.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsq from './sq.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsr from './sr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsv from './sv.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsw from './sw.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringta from './ta.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringte from './te.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringth from './th.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringtr from './tr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringuk from './uk.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringur from './ur.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringvi from './vi.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringzhCN from './zh-CN.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringzhTW from './zh-TW.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringzu from './zu.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+
+export default [
+  {LocalizedStringaf},
+  {LocalizedStringam},
+  {LocalizedStringar},
+  {LocalizedStringbg},
+  {LocalizedStringbn},
+  {LocalizedStringbs},
+  {LocalizedStringca},
+  {LocalizedStringcs},
+  {LocalizedStringda},
+  {LocalizedStringde},
+  {LocalizedStringel},
+  {LocalizedStringenGB},
+  {LocalizedStringen},
+  {LocalizedStringes419},
+  {LocalizedStringes},
+  {LocalizedStringet},
+  {LocalizedStringeu},
+  {LocalizedStringfa},
+  {LocalizedStringfi},
+  {LocalizedStringfil},
+  {LocalizedStringfr},
+  {LocalizedStringgl},
+  {LocalizedStringgu},
+  {LocalizedStringhi},
+  {LocalizedStringhr},
+  {LocalizedStringhu},
+  {LocalizedStringid},
+  {LocalizedStringis},
+  {LocalizedStringit},
+  {LocalizedStringiw},
+  {LocalizedStringja},
+  {LocalizedStringka},
+  {LocalizedStringkm},
+  {LocalizedStringkn},
+  {LocalizedStringko},
+  {LocalizedStringlo},
+  {LocalizedStringlt},
+  {LocalizedStringlv},
+  {LocalizedStringmk},
+  {LocalizedStringml},
+  {LocalizedStringmn},
+  {LocalizedStringmr},
+  {LocalizedStringms},
+  {LocalizedStringmy},
+  {LocalizedStringne},
+  {LocalizedStringnl},
+  {LocalizedStringno},
+  {LocalizedStringpa},
+  {LocalizedStringpl},
+  {LocalizedStringptBR},
+  {LocalizedStringptPT},
+  {LocalizedStringro},
+  {LocalizedStringru},
+  {LocalizedStringsi},
+  {LocalizedStringsk},
+  {LocalizedStringsl},
+  {LocalizedStringsq},
+  {LocalizedStringsr},
+  {LocalizedStringsv},
+  {LocalizedStringsw},
+  {LocalizedStringta},
+  {LocalizedStringte},
+  {LocalizedStringth},
+  {LocalizedStringtr},
+  {LocalizedStringuk},
+  {LocalizedStringur},
+  {LocalizedStringvi},
+  {LocalizedStringzhCN},
+  {LocalizedStringzhTW},
+  {LocalizedStringzu},
+];
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/is.js b/extensions/amp-story-auto-ads/0.1/_locales/is.js
deleted file mode 100644
index 25e8576c4e349..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/is.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for is strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Sækja um',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Bók',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Kaupa miða',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Sækja',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Kanna',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Sækja núna',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Setja upp núna',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Frekari upplýsingar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Hlusta',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Meira',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Opna forrit',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Panta núna',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Spila',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Lesa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Versla',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Sýna',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Sýningartímar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Nýskráning',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Fáðu áskrift núna',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Nota forrit',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Skoða',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Horfa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Horfa á þátt',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/is.json b/extensions/amp-story-auto-ads/0.1/_locales/is.json
new file mode 100644
index 0000000000000..55348fa269083
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/is.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Sækja um"},
+  "40": {"string": "Bók"},
+  "41": {"string": "Kaupa miða"},
+  "42": {"string": "Sækja"},
+  "43": {"string": "Kanna"},
+  "44": {"string": "Sækja núna"},
+  "45": {"string": "Setja upp núna"},
+  "46": {"string": "Frekari upplýsingar"},
+  "47": {"string": "Hlusta"},
+  "48": {"string": "Meira"},
+  "49": {"string": "Opna forrit"},
+  "50": {"string": "Panta núna"},
+  "51": {"string": "Spila"},
+  "52": {"string": "Lesa"},
+  "53": {"string": "Versla"},
+  "54": {"string": "Sýna"},
+  "55": {"string": "Sýningartímar"},
+  "56": {"string": "Nýskráning"},
+  "57": {"string": "Fáðu áskrift núna"},
+  "58": {"string": "Nota forrit"},
+  "59": {"string": "Skoða"},
+  "60": {"string": "Horfa"},
+  "61": {"string": "Horfa á þátt"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/it.js b/extensions/amp-story-auto-ads/0.1/_locales/it.js
deleted file mode 100644
index 2299aa2ec9476..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/it.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for it strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Richiedi ora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Prenota',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Acquista biglietti',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Scarica',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Esplora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Scarica ora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Installa ora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Ulteriori informazioni',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Ascolta',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Altro',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Apri app',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Ordina ora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Riproduci',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Leggi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Acquista',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Mostra',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Orari di programmazione',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Registrati',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Abbonati ora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Usa app',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Visualizza',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Guarda',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Guarda la puntata',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/it.json b/extensions/amp-story-auto-ads/0.1/_locales/it.json
new file mode 100644
index 0000000000000..c5e6cc9e9ee8c
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/it.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Richiedi ora"},
+  "40": {"string": "Prenota"},
+  "41": {"string": "Acquista biglietti"},
+  "42": {"string": "Scarica"},
+  "43": {"string": "Esplora"},
+  "44": {"string": "Scarica ora"},
+  "45": {"string": "Installa ora"},
+  "46": {"string": "Ulteriori informazioni"},
+  "47": {"string": "Ascolta"},
+  "48": {"string": "Altro"},
+  "49": {"string": "Apri app"},
+  "50": {"string": "Ordina ora"},
+  "51": {"string": "Riproduci"},
+  "52": {"string": "Leggi"},
+  "53": {"string": "Acquista"},
+  "54": {"string": "Mostra"},
+  "55": {"string": "Orari di programmazione"},
+  "56": {"string": "Registrati"},
+  "57": {"string": "Abbonati ora"},
+  "58": {"string": "Usa app"},
+  "59": {"string": "Visualizza"},
+  "60": {"string": "Guarda"},
+  "61": {"string": "Guarda la puntata"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/iw.js b/extensions/amp-story-auto-ads/0.1/_locales/iw.js
deleted file mode 100644
index 6e8a488049c08..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/iw.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for iw strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'לשליחת הבקשה',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'לביצוע הזמנה',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'לקניית כרטיסים',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'הורדה',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'מה יש כאן',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'אני רוצה להוריד עכשיו',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'אני רוצה להתקין עכשיו',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'מידע נוסף',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'האזנה',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'עוד',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'פתיחת אפליקציה',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'אני רוצה להזמין עכשיו',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'הפעלה',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'לקריאה',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'אני רוצה לקנות',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'להצגת התוכן',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'מועדי הקרנה',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'הרשמה',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'אני רוצה להירשם עכשיו',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'שימוש באפליקציה',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'תצוגה',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'לצפייה',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'לצפייה בפרק',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/iw.json b/extensions/amp-story-auto-ads/0.1/_locales/iw.json
new file mode 100644
index 0000000000000..c51ed3f75df80
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/iw.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "לשליחת הבקשה"},
+  "40": {"string": "לביצוע הזמנה"},
+  "41": {"string": "לקניית כרטיסים"},
+  "42": {"string": "הורדה"},
+  "43": {"string": "מה יש כאן"},
+  "44": {"string": "אני רוצה להוריד עכשיו"},
+  "45": {"string": "אני רוצה להתקין עכשיו"},
+  "46": {"string": "מידע נוסף"},
+  "47": {"string": "האזנה"},
+  "48": {"string": "עוד"},
+  "49": {"string": "פתיחת אפליקציה"},
+  "50": {"string": "אני רוצה להזמין עכשיו"},
+  "51": {"string": "הפעלה"},
+  "52": {"string": "לקריאה"},
+  "53": {"string": "אני רוצה לקנות"},
+  "54": {"string": "להצגת התוכן"},
+  "55": {"string": "מועדי הקרנה"},
+  "56": {"string": "הרשמה"},
+  "57": {"string": "אני רוצה להירשם עכשיו"},
+  "58": {"string": "שימוש באפליקציה"},
+  "59": {"string": "תצוגה"},
+  "60": {"string": "לצפייה"},
+  "61": {"string": "לצפייה בפרק"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ja.js b/extensions/amp-story-auto-ads/0.1/_locales/ja.js
deleted file mode 100644
index bc924da3da34f..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/ja.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for ja strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: '今すぐお申し込み',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: '予約',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'チケットを購入',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'ダウンロード',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: '探す',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: '今すぐ入手',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: '今すぐインストール',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: '詳細',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: '聴く',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'もっと見る',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'アプリを開く',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: '今すぐ注文',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: '再生',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: '読む',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: '購入',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: '表示',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: '上映時間',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: '登録',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: '今すぐ登録',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'アプリを使用',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: '表示',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: '見る',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'エピソードを見る',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ja.json b/extensions/amp-story-auto-ads/0.1/_locales/ja.json
new file mode 100644
index 0000000000000..4e38987f6d56e
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/ja.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "今すぐお申し込み"},
+  "40": {"string": "予約"},
+  "41": {"string": "チケットを購入"},
+  "42": {"string": "ダウンロード"},
+  "43": {"string": "探す"},
+  "44": {"string": "今すぐ入手"},
+  "45": {"string": "今すぐインストール"},
+  "46": {"string": "詳細"},
+  "47": {"string": "聴く"},
+  "48": {"string": "もっと見る"},
+  "49": {"string": "アプリを開く"},
+  "50": {"string": "今すぐ注文"},
+  "51": {"string": "再生"},
+  "52": {"string": "読む"},
+  "53": {"string": "購入"},
+  "54": {"string": "表示"},
+  "55": {"string": "上映時間"},
+  "56": {"string": "登録"},
+  "57": {"string": "今すぐ登録"},
+  "58": {"string": "アプリを使用"},
+  "59": {"string": "表示"},
+  "60": {"string": "見る"},
+  "61": {"string": "エピソードを見る"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ka.js b/extensions/amp-story-auto-ads/0.1/_locales/ka.js
deleted file mode 100644
index a2b8e9c3576dc..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/ka.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ka strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'განაცხადის შეტანა',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'წიგნი',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'ბილეთების ყიდვა',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'ჩამოტვირთვა',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'შესწავლა',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'ახლავე მიღება',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'ახლავე ინსტალირება',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'შეიტყვეთ მეტი',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'მოსმენა',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'მეტი',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'აპის გახსნა',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'ახლავე შეკვეთა',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'დაკვრა',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'წაკითხვა',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'შოპინგი',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'ჩვენება',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'სეანსები',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'დარეგისტრირება',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'ახლავე გამოწერა',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'აპის გამოყენება',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'ნახვა',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'ყურება',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'ეპიზოდის ნახვა',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ka.json b/extensions/amp-story-auto-ads/0.1/_locales/ka.json
new file mode 100644
index 0000000000000..e7342a31e243b
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/ka.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "განაცხადის შეტანა"},
+  "40": {"string": "წიგნი"},
+  "41": {"string": "ბილეთების ყიდვა"},
+  "42": {"string": "ჩამოტვირთვა"},
+  "43": {"string": "შესწავლა"},
+  "44": {"string": "ახლავე მიღება"},
+  "45": {"string": "ახლავე ინსტალირება"},
+  "46": {"string": "შეიტყვეთ მეტი"},
+  "47": {"string": "მოსმენა"},
+  "48": {"string": "მეტი"},
+  "49": {"string": "აპის გახსნა"},
+  "50": {"string": "ახლავე შეკვეთა"},
+  "51": {"string": "დაკვრა"},
+  "52": {"string": "წაკითხვა"},
+  "53": {"string": "შოპინგი"},
+  "54": {"string": "ჩვენება"},
+  "55": {"string": "სეანსები"},
+  "56": {"string": "დარეგისტრირება"},
+  "57": {"string": "ახლავე გამოწერა"},
+  "58": {"string": "აპის გამოყენება"},
+  "59": {"string": "ნახვა"},
+  "60": {"string": "ყურება"},
+  "61": {"string": "ეპიზოდის ნახვა"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/km.js b/extensions/amp-story-auto-ads/0.1/_locales/km.js
deleted file mode 100644
index fb0fa06579d1e..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/km.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for km strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'ដាក់ពាក្យ​ឥឡូវនេះ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'កក់',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'ទិញ​សំបុត្រ​',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'ទាញយក',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'រុករក',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'យក​ឥឡូវនេះ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'ដំឡើង​ឥឡូវនេះ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'ស្វែងយល់បន្ថែម',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'ស្ដាប់',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'ច្រើន​ទៀត',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'បើក​កម្មវិធី',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'បញ្ជាទិញ​ឥឡូវនេះ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'ចាក់',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'អាន',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'ទិញ​ទំនិញ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'បង្ហាញ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'ម៉ោង​បញ្ចាំង',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'ចុះឈ្មោះ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'ជាវ​ឥឡូវនេះ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'ប្រើប្រាស់កម្មវិធី',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'មើល',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'មើល',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'មើល​ភាគ',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/km.json b/extensions/amp-story-auto-ads/0.1/_locales/km.json
new file mode 100644
index 0000000000000..4916655ff4d81
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/km.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "ដាក់ពាក្យ​ឥឡូវនេះ"},
+  "40": {"string": "កក់"},
+  "41": {"string": "ទិញ​សំបុត្រ​"},
+  "42": {"string": "ទាញយក"},
+  "43": {"string": "រុករក"},
+  "44": {"string": "យក​ឥឡូវនេះ"},
+  "45": {"string": "ដំឡើង​ឥឡូវនេះ"},
+  "46": {"string": "ស្វែងយល់បន្ថែម"},
+  "47": {"string": "ស្ដាប់"},
+  "48": {"string": "ច្រើន​ទៀត"},
+  "49": {"string": "បើក​កម្មវិធី"},
+  "50": {"string": "បញ្ជាទិញ​ឥឡូវនេះ"},
+  "51": {"string": "ចាក់"},
+  "52": {"string": "អាន"},
+  "53": {"string": "ទិញ​ទំនិញ"},
+  "54": {"string": "បង្ហាញ"},
+  "55": {"string": "ម៉ោង​បញ្ចាំង"},
+  "56": {"string": "ចុះឈ្មោះ"},
+  "57": {"string": "ជាវ​ឥឡូវនេះ"},
+  "58": {"string": "ប្រើប្រាស់កម្មវិធី"},
+  "59": {"string": "មើល"},
+  "60": {"string": "មើល"},
+  "61": {"string": "មើល​ភាគ"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/kn.js b/extensions/amp-story-auto-ads/0.1/_locales/kn.js
deleted file mode 100644
index b6cbcac9bb7f3..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/kn.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for kn strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'ಈಗ ಅರ್ಜಿ ಸಲ್ಲಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'ಪುಸ್ತಕ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'ಟಿಕೇಟ್‌ಗಳನ್ನು ಖರೀದಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'ಡೌನ್‌ಲೋಡ್‌‌ ಮಾಡಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'ಎಕ್ಸ್‌ಪ್ಲೋರ್‌‌ ಮಾಡಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'ಈಗ ಪಡೆಯಿರಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'ಈಗ ಇನ್‍ಸ್ಟಾಲ್ ಮಾಡಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'ಆಲಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'ಇನ್ನಷ್ಟು',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'ಆ್ಯಪ್‌ ತೆರೆಯಿರಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'ಈಗ ಆರ್ಡರ್ ಮಾಡಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'ಪ್ಲೇ ಮಾಡಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'ಓದಿರಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'ಶಾಪ್ ಮಾಡಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'ತೋರಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'ಪ್ರದರ್ಶನದ ಸಮಯಗಳು',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'ಸೈನ್ ಅಪ್ ಮಾಡಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'ಈಗ ಸಬ್‌ಸ್ಕ್ರೈಬ್‌ ಮಾಡಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'ಆ್ಯಪ್‌ ಬಳಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'ವೀಕ್ಷಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'ವೀಕ್ಷಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'ಎಪಿಸೋಡ್ ವೀಕ್ಷಿಸಿ',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/kn.json b/extensions/amp-story-auto-ads/0.1/_locales/kn.json
new file mode 100644
index 0000000000000..47ac9ff4578dd
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/kn.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "ಈಗ ಅರ್ಜಿ ಸಲ್ಲಿಸಿ"},
+  "40": {"string": "ಪುಸ್ತಕ"},
+  "41": {"string": "ಟಿಕೇಟ್‌ಗಳನ್ನು ಖರೀದಿಸಿ"},
+  "42": {"string": "ಡೌನ್‌ಲೋಡ್‌‌ ಮಾಡಿ"},
+  "43": {"string": "ಎಕ್ಸ್‌ಪ್ಲೋರ್‌‌ ಮಾಡಿ"},
+  "44": {"string": "ಈಗ ಪಡೆಯಿರಿ"},
+  "45": {"string": "ಈಗ ಇನ್‍ಸ್ಟಾಲ್ ಮಾಡಿ"},
+  "46": {"string": "ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ"},
+  "47": {"string": "ಆಲಿಸಿ"},
+  "48": {"string": "ಇನ್ನಷ್ಟು"},
+  "49": {"string": "ಆ್ಯಪ್‌ ತೆರೆಯಿರಿ"},
+  "50": {"string": "ಈಗ ಆರ್ಡರ್ ಮಾಡಿ"},
+  "51": {"string": "ಪ್ಲೇ ಮಾಡಿ"},
+  "52": {"string": "ಓದಿರಿ"},
+  "53": {"string": "ಶಾಪ್ ಮಾಡಿ"},
+  "54": {"string": "ತೋರಿಸಿ"},
+  "55": {"string": "ಪ್ರದರ್ಶನದ ಸಮಯಗಳು"},
+  "56": {"string": "ಸೈನ್ ಅಪ್ ಮಾಡಿ"},
+  "57": {"string": "ಈಗ ಸಬ್‌ಸ್ಕ್ರೈಬ್‌ ಮಾಡಿ"},
+  "58": {"string": "ಆ್ಯಪ್‌ ಬಳಸಿ"},
+  "59": {"string": "ವೀಕ್ಷಿಸಿ"},
+  "60": {"string": "ವೀಕ್ಷಿಸಿ"},
+  "61": {"string": "ಎಪಿಸೋಡ್ ವೀಕ್ಷಿಸಿ"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ko.js b/extensions/amp-story-auto-ads/0.1/_locales/ko.js
deleted file mode 100644
index cd7ff60fecd83..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/ko.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for ko strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: '신청하기',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: '예약',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: '티켓 구매',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: '다운로드',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: '탐색',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: '받기',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: '지금 설치',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: '자세히 알아보기',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: '듣기',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: '더보기',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: '앱 열기',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: '지금 주문',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: '재생',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: '읽기',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: '쇼핑하기',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: '표시',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: '상영일정',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: '가입',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: '지금 구독',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: '앱 사용',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: '보기',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: '보기',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: '에피소드 보기',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ko.json b/extensions/amp-story-auto-ads/0.1/_locales/ko.json
new file mode 100644
index 0000000000000..be98a27db2c9f
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/ko.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "신청하기"},
+  "40": {"string": "예약"},
+  "41": {"string": "티켓 구매"},
+  "42": {"string": "다운로드"},
+  "43": {"string": "탐색"},
+  "44": {"string": "받기"},
+  "45": {"string": "지금 설치"},
+  "46": {"string": "자세히 알아보기"},
+  "47": {"string": "듣기"},
+  "48": {"string": "더보기"},
+  "49": {"string": "앱 열기"},
+  "50": {"string": "지금 주문"},
+  "51": {"string": "재생"},
+  "52": {"string": "읽기"},
+  "53": {"string": "쇼핑하기"},
+  "54": {"string": "표시"},
+  "55": {"string": "상영일정"},
+  "56": {"string": "가입"},
+  "57": {"string": "지금 구독"},
+  "58": {"string": "앱 사용"},
+  "59": {"string": "보기"},
+  "60": {"string": "보기"},
+  "61": {"string": "에피소드 보기"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/lo.js b/extensions/amp-story-auto-ads/0.1/_locales/lo.js
deleted file mode 100644
index 10dcbcad85be4..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/lo.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for lo strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'ລົງທະບຽນດຽວນີ້',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'ຈອງ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'ຊື້ປີ້',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'ດາວໂຫລດ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'ສຳຫຼວດ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'ເບິ່ງດຽວນີ້',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'ຕິດຕັ້ງດຽວນີ້',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'ສຶກສາເພີ່ມເຕີມ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'ຟັງ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'ເພີ່ມເຕີມ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'ເປີດແອັບ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'ສັ່ງດຽວນີ້',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'ຫຼິ້ນ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'ອ່ານ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'ຊື້ເຄື່ອງ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'ສະແດງ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'ເວລາສາຍ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'ລົງທະບຽນ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'ສະໝັກດຽວນີ້ເລີຍ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'ໃຊ້ແອັບ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'ເບິ່ງ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'ເບິ່ງ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'ເບິ່ງເອັບພິໂສດ',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/lo.json b/extensions/amp-story-auto-ads/0.1/_locales/lo.json
new file mode 100644
index 0000000000000..e21e2491b3318
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/lo.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "ລົງທະບຽນດຽວນີ້"},
+  "40": {"string": "ຈອງ"},
+  "41": {"string": "ຊື້ປີ້"},
+  "42": {"string": "ດາວໂຫລດ"},
+  "43": {"string": "ສຳຫຼວດ"},
+  "44": {"string": "ເບິ່ງດຽວນີ້"},
+  "45": {"string": "ຕິດຕັ້ງດຽວນີ້"},
+  "46": {"string": "ສຶກສາເພີ່ມເຕີມ"},
+  "47": {"string": "ຟັງ"},
+  "48": {"string": "ເພີ່ມເຕີມ"},
+  "49": {"string": "ເປີດແອັບ"},
+  "50": {"string": "ສັ່ງດຽວນີ້"},
+  "51": {"string": "ຫຼິ້ນ"},
+  "52": {"string": "ອ່ານ"},
+  "53": {"string": "ຊື້ເຄື່ອງ"},
+  "54": {"string": "ສະແດງ"},
+  "55": {"string": "ເວລາສາຍ"},
+  "56": {"string": "ລົງທະບຽນ"},
+  "57": {"string": "ສະໝັກດຽວນີ້ເລີຍ"},
+  "58": {"string": "ໃຊ້ແອັບ"},
+  "59": {"string": "ເບິ່ງ"},
+  "60": {"string": "ເບິ່ງ"},
+  "61": {"string": "ເບິ່ງເອັບພິໂສດ"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/lt.js b/extensions/amp-story-auto-ads/0.1/_locales/lt.js
deleted file mode 100644
index 4601a858024c0..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/lt.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for lt strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Taikyti dabar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Užsakyti',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Pirkti bilietus',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Atsisiųsti',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Naršyti',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Gauti dabar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Įdiegti dabar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Sužinoti daugiau',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Klausyti',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Daugiau',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Atidaryti programą',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Užsakyti dabar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Leisti',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Skaityti',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Apsipirkti',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Rodyti',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Rodymo laikai',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Prisiregistruoti',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Prenumeruoti dabar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Naudoti programą',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Peržiūrėti',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Žiūrėti',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Žiūrėti seriją',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/lt.json b/extensions/amp-story-auto-ads/0.1/_locales/lt.json
new file mode 100644
index 0000000000000..45329d25f63d9
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/lt.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Taikyti dabar"},
+  "40": {"string": "Užsakyti"},
+  "41": {"string": "Pirkti bilietus"},
+  "42": {"string": "Atsisiųsti"},
+  "43": {"string": "Naršyti"},
+  "44": {"string": "Gauti dabar"},
+  "45": {"string": "Įdiegti dabar"},
+  "46": {"string": "Sužinoti daugiau"},
+  "47": {"string": "Klausyti"},
+  "48": {"string": "Daugiau"},
+  "49": {"string": "Atidaryti programą"},
+  "50": {"string": "Užsakyti dabar"},
+  "51": {"string": "Leisti"},
+  "52": {"string": "Skaityti"},
+  "53": {"string": "Apsipirkti"},
+  "54": {"string": "Rodyti"},
+  "55": {"string": "Rodymo laikai"},
+  "56": {"string": "Prisiregistruoti"},
+  "57": {"string": "Prenumeruoti dabar"},
+  "58": {"string": "Naudoti programą"},
+  "59": {"string": "Peržiūrėti"},
+  "60": {"string": "Žiūrėti"},
+  "61": {"string": "Žiūrėti seriją"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/lv.js b/extensions/amp-story-auto-ads/0.1/_locales/lv.js
deleted file mode 100644
index 895409b08897d..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/lv.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for lv strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Pieteikties tūlīt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Rezervēt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Pirkt biļetes',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Lejupielādēt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Izpētīt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Iegūt tūlīt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instalēt tūlīt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Uzzināt vairāk',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Klausīties',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Vēl',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Atvērt lietotni',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Pasūtīt tūlīt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Atskaņot',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Lasīt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Iepirkties',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Rādīt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Seansu laiki',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Reģistrēties',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Abonēt tūlīt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Izmantot lietotni',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Skatīt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Skatīties',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Skatīties sēriju',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/lv.json b/extensions/amp-story-auto-ads/0.1/_locales/lv.json
new file mode 100644
index 0000000000000..897d6b33b085e
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/lv.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Pieteikties tūlīt"},
+  "40": {"string": "Rezervēt"},
+  "41": {"string": "Pirkt biļetes"},
+  "42": {"string": "Lejupielādēt"},
+  "43": {"string": "Izpētīt"},
+  "44": {"string": "Iegūt tūlīt"},
+  "45": {"string": "Instalēt tūlīt"},
+  "46": {"string": "Uzzināt vairāk"},
+  "47": {"string": "Klausīties"},
+  "48": {"string": "Vēl"},
+  "49": {"string": "Atvērt lietotni"},
+  "50": {"string": "Pasūtīt tūlīt"},
+  "51": {"string": "Atskaņot"},
+  "52": {"string": "Lasīt"},
+  "53": {"string": "Iepirkties"},
+  "54": {"string": "Rādīt"},
+  "55": {"string": "Seansu laiki"},
+  "56": {"string": "Reģistrēties"},
+  "57": {"string": "Abonēt tūlīt"},
+  "58": {"string": "Izmantot lietotni"},
+  "59": {"string": "Skatīt"},
+  "60": {"string": "Skatīties"},
+  "61": {"string": "Skatīties sēriju"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/mk.js b/extensions/amp-story-auto-ads/0.1/_locales/mk.js
deleted file mode 100644
index 95d0921ee6b36..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/mk.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for mk strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Пријави се сега',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Книга',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Купи билети',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Преземи',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Истражете',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Земи сега',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Инсталирај сега',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Дознајте повеќе',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Слушај',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Повеќе',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Отвори ја апликацијата',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Нарачај сега',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Пушти',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Прочитај',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Купи',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Прикажи',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Проекции',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Регистрирај се',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Претплати се сега',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Користи ја апликацијата',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Прикажи',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Гледај',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Гледај ја епизодата',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/mk.json b/extensions/amp-story-auto-ads/0.1/_locales/mk.json
new file mode 100644
index 0000000000000..c1d5cc0013808
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/mk.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Пријави се сега"},
+  "40": {"string": "Книга"},
+  "41": {"string": "Купи билети"},
+  "42": {"string": "Преземи"},
+  "43": {"string": "Истражете"},
+  "44": {"string": "Земи сега"},
+  "45": {"string": "Инсталирај сега"},
+  "46": {"string": "Дознајте повеќе"},
+  "47": {"string": "Слушај"},
+  "48": {"string": "Повеќе"},
+  "49": {"string": "Отвори ја апликацијата"},
+  "50": {"string": "Нарачај сега"},
+  "51": {"string": "Пушти"},
+  "52": {"string": "Прочитај"},
+  "53": {"string": "Купи"},
+  "54": {"string": "Прикажи"},
+  "55": {"string": "Проекции"},
+  "56": {"string": "Регистрирај се"},
+  "57": {"string": "Претплати се сега"},
+  "58": {"string": "Користи ја апликацијата"},
+  "59": {"string": "Прикажи"},
+  "60": {"string": "Гледај"},
+  "61": {"string": "Гледај ја епизодата"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ml.js b/extensions/amp-story-auto-ads/0.1/_locales/ml.js
deleted file mode 100644
index 0b7322ca95f39..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/ml.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ml strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'ഇപ്പോൾ പ്രയോഗിക്കുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'ബുക്ക് ചെയ്യുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'ടിക്കറ്റുകൾ വാങ്ങുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'ഡൗൺലോഡ് ചെയ്യുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'അടുത്തറിയുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'ഇപ്പോൾ നേടുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'ഇപ്പോൾ ഇൻസ്‌റ്റാൾ ചെയ്യുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'കൂടുതലറിയുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'കേൾക്കുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'കൂടുതൽ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'ആപ്പ് തുറക്കുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'ഇപ്പോൾ ഓർഡർ ചെയ്യുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'പ്ലേ ചെയ്യുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'വായിക്കുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'ഷോപ്പ് ചെയ്യുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'കാണിക്കുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'പ്രദർശനസമയങ്ങൾ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'സൈൻ അപ്പ്',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'ഇപ്പോൾ വരിക്കാരാവുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'ആപ്പ് ഉപയോഗിക്കുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'കാണുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'കാണുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'എപ്പിസോഡ് കാണുക',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ml.json b/extensions/amp-story-auto-ads/0.1/_locales/ml.json
new file mode 100644
index 0000000000000..3dc91a37f9c92
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/ml.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "ഇപ്പോൾ പ്രയോഗിക്കുക"},
+  "40": {"string": "ബുക്ക് ചെയ്യുക"},
+  "41": {"string": "ടിക്കറ്റുകൾ വാങ്ങുക"},
+  "42": {"string": "ഡൗൺലോഡ് ചെയ്യുക"},
+  "43": {"string": "അടുത്തറിയുക"},
+  "44": {"string": "ഇപ്പോൾ നേടുക"},
+  "45": {"string": "ഇപ്പോൾ ഇൻസ്‌റ്റാൾ ചെയ്യുക"},
+  "46": {"string": "കൂടുതലറിയുക"},
+  "47": {"string": "കേൾക്കുക"},
+  "48": {"string": "കൂടുതൽ"},
+  "49": {"string": "ആപ്പ് തുറക്കുക"},
+  "50": {"string": "ഇപ്പോൾ ഓർഡർ ചെയ്യുക"},
+  "51": {"string": "പ്ലേ ചെയ്യുക"},
+  "52": {"string": "വായിക്കുക"},
+  "53": {"string": "ഷോപ്പ് ചെയ്യുക"},
+  "54": {"string": "കാണിക്കുക"},
+  "55": {"string": "പ്രദർശനസമയങ്ങൾ"},
+  "56": {"string": "സൈൻ അപ്പ്"},
+  "57": {"string": "ഇപ്പോൾ വരിക്കാരാവുക"},
+  "58": {"string": "ആപ്പ് ഉപയോഗിക്കുക"},
+  "59": {"string": "കാണുക"},
+  "60": {"string": "കാണുക"},
+  "61": {"string": "എപ്പിസോഡ് കാണുക"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/mn.js b/extensions/amp-story-auto-ads/0.1/_locales/mn.js
deleted file mode 100644
index 02a3fb7d7aa51..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/mn.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for mn strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Одоо хэрэгжүүлэх',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Ном',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Тасалбар авах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Татаж авах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Судлах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Одоо авах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Одоо суулгах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Нэмэлт мэдээлэл авах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Сонсох',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Бусад',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Аппыг нээх',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Одоо захиалах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Тоглуулах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Унших',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Дэлгүүр',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Харуулах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Үзвэрийн цаг',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Бүртгүүлэх',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Одоо захиалах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Апп ашиглах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Харах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Үзэх',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Анги үзэх',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/mn.json b/extensions/amp-story-auto-ads/0.1/_locales/mn.json
new file mode 100644
index 0000000000000..0cf5d298f4576
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/mn.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Одоо хэрэгжүүлэх"},
+  "40": {"string": "Ном"},
+  "41": {"string": "Тасалбар авах"},
+  "42": {"string": "Татаж авах"},
+  "43": {"string": "Судлах"},
+  "44": {"string": "Одоо авах"},
+  "45": {"string": "Одоо суулгах"},
+  "46": {"string": "Нэмэлт мэдээлэл авах"},
+  "47": {"string": "Сонсох"},
+  "48": {"string": "Бусад"},
+  "49": {"string": "Аппыг нээх"},
+  "50": {"string": "Одоо захиалах"},
+  "51": {"string": "Тоглуулах"},
+  "52": {"string": "Унших"},
+  "53": {"string": "Дэлгүүр"},
+  "54": {"string": "Харуулах"},
+  "55": {"string": "Үзвэрийн цаг"},
+  "56": {"string": "Бүртгүүлэх"},
+  "57": {"string": "Одоо захиалах"},
+  "58": {"string": "Апп ашиглах"},
+  "59": {"string": "Харах"},
+  "60": {"string": "Үзэх"},
+  "61": {"string": "Анги үзэх"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/mr.js b/extensions/amp-story-auto-ads/0.1/_locales/mr.js
deleted file mode 100644
index dd79c866623b4..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/mr.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for mr strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'आता लागू करा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'बुक करा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'तिकिटे विकत घ्या',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'डाउनलोड करा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'एक्सप्लोर करा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'आता मिळवा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'आता इंस्टॉल करा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'अधिक जाणून घ्या',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'ऐका',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'आणखी',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'अ‍ॅप उघडा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'आता ऑर्डर करा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'प्ले करा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'वाचा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'खरेदी करा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'दाखवा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'शोच्‍या वेळा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'साइन अप करा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'आता सदस्यत्व घ्या',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'ॲप वापरा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'व्ह्यू',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'पाहा',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'भाग पाहा',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/mr.json b/extensions/amp-story-auto-ads/0.1/_locales/mr.json
new file mode 100644
index 0000000000000..b93c8cd045c59
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/mr.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "आता लागू करा"},
+  "40": {"string": "बुक करा"},
+  "41": {"string": "तिकिटे विकत घ्या"},
+  "42": {"string": "डाउनलोड करा"},
+  "43": {"string": "एक्सप्लोर करा"},
+  "44": {"string": "आता मिळवा"},
+  "45": {"string": "आता इंस्टॉल करा"},
+  "46": {"string": "अधिक जाणून घ्या"},
+  "47": {"string": "ऐका"},
+  "48": {"string": "आणखी"},
+  "49": {"string": "अ‍ॅप उघडा"},
+  "50": {"string": "आता ऑर्डर करा"},
+  "51": {"string": "प्ले करा"},
+  "52": {"string": "वाचा"},
+  "53": {"string": "खरेदी करा"},
+  "54": {"string": "दाखवा"},
+  "55": {"string": "शोच्‍या वेळा"},
+  "56": {"string": "साइन अप करा"},
+  "57": {"string": "आता सदस्यत्व घ्या"},
+  "58": {"string": "ॲप वापरा"},
+  "59": {"string": "व्ह्यू"},
+  "60": {"string": "पाहा"},
+  "61": {"string": "भाग पाहा"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ms.js b/extensions/amp-story-auto-ads/0.1/_locales/ms.js
deleted file mode 100644
index cf5011b56e546..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/ms.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ms strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Mohon Sekarang',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Buku',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Beli Tiket',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Muat turun',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Teroka',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Dapatkan Sekarang',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Pasang Sekarang',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Ketahui Lebih Lanjut',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Dengar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Lagi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Buka Apl',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Pesan Sekarang',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Main',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Baca',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Beli-belah',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Tunjukkan',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Masa tayangan',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Daftar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Langgan Sekarang',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Gunakan Apl',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Lihat',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Tonton',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Tonton Episod',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ms.json b/extensions/amp-story-auto-ads/0.1/_locales/ms.json
new file mode 100644
index 0000000000000..2c7010c82c91d
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/ms.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Mohon Sekarang"},
+  "40": {"string": "Buku"},
+  "41": {"string": "Beli Tiket"},
+  "42": {"string": "Muat turun"},
+  "43": {"string": "Teroka"},
+  "44": {"string": "Dapatkan Sekarang"},
+  "45": {"string": "Pasang Sekarang"},
+  "46": {"string": "Ketahui Lebih Lanjut"},
+  "47": {"string": "Dengar"},
+  "48": {"string": "Lagi"},
+  "49": {"string": "Buka Apl"},
+  "50": {"string": "Pesan Sekarang"},
+  "51": {"string": "Main"},
+  "52": {"string": "Baca"},
+  "53": {"string": "Beli-belah"},
+  "54": {"string": "Tunjukkan"},
+  "55": {"string": "Masa tayangan"},
+  "56": {"string": "Daftar"},
+  "57": {"string": "Langgan Sekarang"},
+  "58": {"string": "Gunakan Apl"},
+  "59": {"string": "Lihat"},
+  "60": {"string": "Tonton"},
+  "61": {"string": "Tonton Episod"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/my.js b/extensions/amp-story-auto-ads/0.1/_locales/my.js
deleted file mode 100644
index 3f7b5c8992592..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/my.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for my strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'ယခု လျှောက်ထားရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'စာအုပ်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'လက်မှတ်ဝယ်ရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'ဒေါင်းလုဒ်လုပ်ရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'လေ့လာရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'ယခု ရယူရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'ယခု ထည့်သွင်းရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'ပိုမိုလေ့လာရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'နားဆင်ရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'နောက်ထပ်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'အက်ပ်ဖွင့်ရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'ယခုမှာယူရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'ဖွင့်ရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'ဖတ်ရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'ဝယ်ရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'ပြရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'ရုပ်ရှင်ပြချိန်များ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'အကောင့်ဖွင့်ရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'ယခု စာရင်းသွင်းရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'အက်ပ်ကို အသုံးပြုရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'ကြည့်ရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'ကြည့်ရန်',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'ဇာတ်လမ်းပိုင်းကို ကြည့်ရန်',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/my.json b/extensions/amp-story-auto-ads/0.1/_locales/my.json
new file mode 100644
index 0000000000000..94093719c7a94
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/my.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "ယခု လျှောက်ထားရန်"},
+  "40": {"string": "စာအုပ်"},
+  "41": {"string": "လက်မှတ်ဝယ်ရန်"},
+  "42": {"string": "ဒေါင်းလုဒ်လုပ်ရန်"},
+  "43": {"string": "လေ့လာရန်"},
+  "44": {"string": "ယခု ရယူရန်"},
+  "45": {"string": "ယခု ထည့်သွင်းရန်"},
+  "46": {"string": "ပိုမိုလေ့လာရန်"},
+  "47": {"string": "နားဆင်ရန်"},
+  "48": {"string": "နောက်ထပ်"},
+  "49": {"string": "အက်ပ်ဖွင့်ရန်"},
+  "50": {"string": "ယခုမှာယူရန်"},
+  "51": {"string": "ဖွင့်ရန်"},
+  "52": {"string": "ဖတ်ရန်"},
+  "53": {"string": "ဝယ်ရန်"},
+  "54": {"string": "ပြရန်"},
+  "55": {"string": "ရုပ်ရှင်ပြချိန်များ"},
+  "56": {"string": "အကောင့်ဖွင့်ရန်"},
+  "57": {"string": "ယခု စာရင်းသွင်းရန်"},
+  "58": {"string": "အက်ပ်ကို အသုံးပြုရန်"},
+  "59": {"string": "ကြည့်ရန်"},
+  "60": {"string": "ကြည့်ရန်"},
+  "61": {"string": "ဇာတ်လမ်းပိုင်းကို ကြည့်ရန်"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ne.js b/extensions/amp-story-auto-ads/0.1/_locales/ne.js
deleted file mode 100644
index 30e78192d8c3d..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/ne.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ne strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'अहिले नै आवेदन दिनुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'बुक गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'टिकट किन्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'डाउनलोड गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'अन्वेषण गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'अहिले नै प्राप्त गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'अहिले नै स्थापना गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'थप जान्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'सुन्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'थप',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'अनुप्रयोग खोल्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'अहिले नै अर्डर गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'खेल्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'पढ्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'किनमेल गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'देखाउनुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'सो समय',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'साइन अप गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'अहिले नै सदस्यता लिनुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'अनुप्रयोग चलाउनुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'हेर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'हेर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'एपिसोड हेर्नुहोस्',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ne.json b/extensions/amp-story-auto-ads/0.1/_locales/ne.json
new file mode 100644
index 0000000000000..003577600a82e
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/ne.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "अहिले नै आवेदन दिनुहोस्"},
+  "40": {"string": "बुक गर्नुहोस्"},
+  "41": {"string": "टिकट किन्नुहोस्"},
+  "42": {"string": "डाउनलोड गर्नुहोस्"},
+  "43": {"string": "अन्वेषण गर्नुहोस्"},
+  "44": {"string": "अहिले नै प्राप्त गर्नुहोस्"},
+  "45": {"string": "अहिले नै स्थापना गर्नुहोस्"},
+  "46": {"string": "थप जान्नुहोस्"},
+  "47": {"string": "सुन्नुहोस्"},
+  "48": {"string": "थप"},
+  "49": {"string": "अनुप्रयोग खोल्नुहोस्"},
+  "50": {"string": "अहिले नै अर्डर गर्नुहोस्"},
+  "51": {"string": "खेल्नुहोस्"},
+  "52": {"string": "पढ्नुहोस्"},
+  "53": {"string": "किनमेल गर्नुहोस्"},
+  "54": {"string": "देखाउनुहोस्"},
+  "55": {"string": "सो समय"},
+  "56": {"string": "साइन अप गर्नुहोस्"},
+  "57": {"string": "अहिले नै सदस्यता लिनुहोस्"},
+  "58": {"string": "अनुप्रयोग चलाउनुहोस्"},
+  "59": {"string": "हेर्नुहोस्"},
+  "60": {"string": "हेर्नुहोस्"},
+  "61": {"string": "एपिसोड हेर्नुहोस्"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/nl.js b/extensions/amp-story-auto-ads/0.1/_locales/nl.js
deleted file mode 100644
index 33a27bdc35acc..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/nl.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for nl strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Nu toepassen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Boeken',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Kaartjes kopen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Downloaden',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Verkennen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Nu ophalen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Nu installeren',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Meer informatie',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Luisteren',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Meer',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'App openen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Nu bestellen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Afspelen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Lezen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Winkelen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Weergeven',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Aanvangstijden',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Aanmelden',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Nu abonneren',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'App gebruiken',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Bekijken',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Bekijken',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Aflevering bekijken',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/nl.json b/extensions/amp-story-auto-ads/0.1/_locales/nl.json
new file mode 100644
index 0000000000000..a48dc64e7c1cd
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/nl.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Nu toepassen"},
+  "40": {"string": "Boeken"},
+  "41": {"string": "Kaartjes kopen"},
+  "42": {"string": "Downloaden"},
+  "43": {"string": "Verkennen"},
+  "44": {"string": "Nu ophalen"},
+  "45": {"string": "Nu installeren"},
+  "46": {"string": "Meer informatie"},
+  "47": {"string": "Luisteren"},
+  "48": {"string": "Meer"},
+  "49": {"string": "App openen"},
+  "50": {"string": "Nu bestellen"},
+  "51": {"string": "Afspelen"},
+  "52": {"string": "Lezen"},
+  "53": {"string": "Winkelen"},
+  "54": {"string": "Weergeven"},
+  "55": {"string": "Aanvangstijden"},
+  "56": {"string": "Aanmelden"},
+  "57": {"string": "Nu abonneren"},
+  "58": {"string": "App gebruiken"},
+  "59": {"string": "Bekijken"},
+  "60": {"string": "Bekijken"},
+  "61": {"string": "Aflevering bekijken"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/no.js b/extensions/amp-story-auto-ads/0.1/_locales/no.js
deleted file mode 100644
index cd4ca1909dfa3..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/no.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for no strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Søk nå',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Bestill',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Kjøp billetter',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Last ned',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Utforsk',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Skaff deg nå',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Installer nå',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Finn ut mer',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Lytt',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Mer',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Åpne appen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Bestill nå',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Spill av',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Les',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Kjøp',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Vis',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Kinotider',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Registrer deg',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Abonner nå',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Bruk app',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Se',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Se',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Se episoden',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/no.json b/extensions/amp-story-auto-ads/0.1/_locales/no.json
new file mode 100644
index 0000000000000..644ec7ae83b9c
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/no.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Søk nå"},
+  "40": {"string": "Bestill"},
+  "41": {"string": "Kjøp billetter"},
+  "42": {"string": "Last ned"},
+  "43": {"string": "Utforsk"},
+  "44": {"string": "Skaff deg nå"},
+  "45": {"string": "Installer nå"},
+  "46": {"string": "Finn ut mer"},
+  "47": {"string": "Lytt"},
+  "48": {"string": "Mer"},
+  "49": {"string": "Åpne appen"},
+  "50": {"string": "Bestill nå"},
+  "51": {"string": "Spill av"},
+  "52": {"string": "Les"},
+  "53": {"string": "Kjøp"},
+  "54": {"string": "Vis"},
+  "55": {"string": "Kinotider"},
+  "56": {"string": "Registrer deg"},
+  "57": {"string": "Abonner nå"},
+  "58": {"string": "Bruk app"},
+  "59": {"string": "Se"},
+  "60": {"string": "Se"},
+  "61": {"string": "Se episoden"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/pa.js b/extensions/amp-story-auto-ads/0.1/_locales/pa.js
deleted file mode 100644
index fed2c4a2e167b..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/pa.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for pa strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'ਹੁਣੇ ਅਰਜ਼ੀ ਦਿਓ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'ਬੁੱਕ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'ਟਿਕਟਾਂ ਖਰੀਦੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'ਡਾਊਨਲੋਡ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'ਪੜਚੋਲ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'ਹੁਣੇ ਪ੍ਰਾਪਤ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'ਹੁਣੇ ਸਥਾਪਤ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'ਹੋਰ ਜਾਣੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'ਸੁਣੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'ਹੋਰ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'ਐਪ ਖੋਲ੍ਹੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'ਹੁਣੇ ਆਰਡਰ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'ਚਲਾਓ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'ਪੜ੍ਹੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'ਖਰੀਦੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'ਦਿਖਾਓ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'ਸ਼ੋਅਟਾਈਮ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'ਸਾਈਨ-ਅੱਪ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'ਹੁਣੇ ਗਾਹਕ ਬਣੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'ਐਪ ਵਰਤੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'ਦੇਖੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'ਦੇਖੋ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'ਐਪੀਸੋਡ ਦੇਖੋ',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/pa.json b/extensions/amp-story-auto-ads/0.1/_locales/pa.json
new file mode 100644
index 0000000000000..d965bbc8653ff
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/pa.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "ਹੁਣੇ ਅਰਜ਼ੀ ਦਿਓ"},
+  "40": {"string": "ਬੁੱਕ ਕਰੋ"},
+  "41": {"string": "ਟਿਕਟਾਂ ਖਰੀਦੋ"},
+  "42": {"string": "ਡਾਊਨਲੋਡ ਕਰੋ"},
+  "43": {"string": "ਪੜਚੋਲ ਕਰੋ"},
+  "44": {"string": "ਹੁਣੇ ਪ੍ਰਾਪਤ ਕਰੋ"},
+  "45": {"string": "ਹੁਣੇ ਸਥਾਪਤ ਕਰੋ"},
+  "46": {"string": "ਹੋਰ ਜਾਣੋ"},
+  "47": {"string": "ਸੁਣੋ"},
+  "48": {"string": "ਹੋਰ"},
+  "49": {"string": "ਐਪ ਖੋਲ੍ਹੋ"},
+  "50": {"string": "ਹੁਣੇ ਆਰਡਰ ਕਰੋ"},
+  "51": {"string": "ਚਲਾਓ"},
+  "52": {"string": "ਪੜ੍ਹੋ"},
+  "53": {"string": "ਖਰੀਦੋ"},
+  "54": {"string": "ਦਿਖਾਓ"},
+  "55": {"string": "ਸ਼ੋਅਟਾਈਮ"},
+  "56": {"string": "ਸਾਈਨ-ਅੱਪ ਕਰੋ"},
+  "57": {"string": "ਹੁਣੇ ਗਾਹਕ ਬਣੋ"},
+  "58": {"string": "ਐਪ ਵਰਤੋ"},
+  "59": {"string": "ਦੇਖੋ"},
+  "60": {"string": "ਦੇਖੋ"},
+  "61": {"string": "ਐਪੀਸੋਡ ਦੇਖੋ"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/pl.js b/extensions/amp-story-auto-ads/0.1/_locales/pl.js
deleted file mode 100644
index f9537249f0a43..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/pl.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for pl strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Wyślij zgłoszenie',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Zarezerwuj',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Kup bilety',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Pobierz',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Przeglądaj',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Pobierz',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Zainstaluj',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Więcej informacji',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Posłuchaj',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Więcej',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Otwórz aplikację',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Zamów',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Odtwórz',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Przeczytaj',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Kup',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Pokaż',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Godziny seansów',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Zarejestruj się',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Subskrybuj',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Użyj aplikacji',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Wyświetl',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Obejrzyj',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Obejrzyj odcinek',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/pl.json b/extensions/amp-story-auto-ads/0.1/_locales/pl.json
new file mode 100644
index 0000000000000..9255a147723d8
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/pl.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Wyślij zgłoszenie"},
+  "40": {"string": "Zarezerwuj"},
+  "41": {"string": "Kup bilety"},
+  "42": {"string": "Pobierz"},
+  "43": {"string": "Przeglądaj"},
+  "44": {"string": "Pobierz"},
+  "45": {"string": "Zainstaluj"},
+  "46": {"string": "Więcej informacji"},
+  "47": {"string": "Posłuchaj"},
+  "48": {"string": "Więcej"},
+  "49": {"string": "Otwórz aplikację"},
+  "50": {"string": "Zamów"},
+  "51": {"string": "Odtwórz"},
+  "52": {"string": "Przeczytaj"},
+  "53": {"string": "Kup"},
+  "54": {"string": "Pokaż"},
+  "55": {"string": "Godziny seansów"},
+  "56": {"string": "Zarejestruj się"},
+  "57": {"string": "Subskrybuj"},
+  "58": {"string": "Użyj aplikacji"},
+  "59": {"string": "Wyświetl"},
+  "60": {"string": "Obejrzyj"},
+  "61": {"string": "Obejrzyj odcinek"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/pt-BR.js b/extensions/amp-story-auto-ads/0.1/_locales/pt-BR.js
deleted file mode 100644
index 14e9d4bee2c22..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/pt-BR.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for pt-BR strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Inscreva-se agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Agendar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Comprar ingressos',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Download',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Descobrir',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Adquirir agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instalar agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Saiba mais',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Ouvir',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Mais',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Abrir app',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Comprar agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Reproduzir',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Ler',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Comprar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Mostrar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Horários de exibição',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Inscreva-se',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Assinar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Usar app',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Ver',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Assistir',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Assistir episódio',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/pt-BR.json b/extensions/amp-story-auto-ads/0.1/_locales/pt-BR.json
new file mode 100644
index 0000000000000..db1e3fc53a836
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/pt-BR.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Inscreva-se agora"},
+  "40": {"string": "Agendar"},
+  "41": {"string": "Comprar ingressos"},
+  "42": {"string": "Download"},
+  "43": {"string": "Descobrir"},
+  "44": {"string": "Adquirir agora"},
+  "45": {"string": "Instalar agora"},
+  "46": {"string": "Saiba mais"},
+  "47": {"string": "Ouvir"},
+  "48": {"string": "Mais"},
+  "49": {"string": "Abrir app"},
+  "50": {"string": "Comprar agora"},
+  "51": {"string": "Reproduzir"},
+  "52": {"string": "Ler"},
+  "53": {"string": "Comprar"},
+  "54": {"string": "Mostrar"},
+  "55": {"string": "Horários de exibição"},
+  "56": {"string": "Inscreva-se"},
+  "57": {"string": "Assinar"},
+  "58": {"string": "Usar app"},
+  "59": {"string": "Ver"},
+  "60": {"string": "Assistir"},
+  "61": {"string": "Assistir episódio"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/pt-PT.js b/extensions/amp-story-auto-ads/0.1/_locales/pt-PT.js
deleted file mode 100644
index 587d6b0329826..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/pt-PT.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for pt-PT strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Candidate-se agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Reservar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Comprar bilhetes',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Transferir',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Explorar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Obter agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instalar agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Saiba mais',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Ouvir',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Mais',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Abrir aplicação',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Encomendar agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Reproduzir',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Ler',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Comprar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Mostrar',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Sessões',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Inscrever-se',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Subscrever agora',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Utilizar aplicação',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Ver',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Ver',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Ver episódio',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/pt-PT.json b/extensions/amp-story-auto-ads/0.1/_locales/pt-PT.json
new file mode 100644
index 0000000000000..509552aa89390
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/pt-PT.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Candidate-se agora"},
+  "40": {"string": "Reservar"},
+  "41": {"string": "Comprar bilhetes"},
+  "42": {"string": "Transferir"},
+  "43": {"string": "Explorar"},
+  "44": {"string": "Obter agora"},
+  "45": {"string": "Instalar agora"},
+  "46": {"string": "Saiba mais"},
+  "47": {"string": "Ouvir"},
+  "48": {"string": "Mais"},
+  "49": {"string": "Abrir aplicação"},
+  "50": {"string": "Encomendar agora"},
+  "51": {"string": "Reproduzir"},
+  "52": {"string": "Ler"},
+  "53": {"string": "Comprar"},
+  "54": {"string": "Mostrar"},
+  "55": {"string": "Sessões"},
+  "56": {"string": "Inscrever-se"},
+  "57": {"string": "Subscrever agora"},
+  "58": {"string": "Utilizar aplicação"},
+  "59": {"string": "Ver"},
+  "60": {"string": "Ver"},
+  "61": {"string": "Ver episódio"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ro.js b/extensions/amp-story-auto-ads/0.1/_locales/ro.js
deleted file mode 100644
index c43ae929904fa..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/ro.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ro strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Înregistrați-vă',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Rezervați',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Cumpărați bilete',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Descărcați',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Explorați',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Descărcați acum',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instalați acum',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Aflați mai multe',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Ascultați',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Mai mult',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Deschideți aplicația',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Comandați acum',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Redați',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Citiți',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Cumpărați',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Afișați',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Ore de difuzare',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Înscrieți-vă',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Abonați-vă acum',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Folosiți aplicația',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Afișați',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Vizionați',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Vizionați episodul',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ro.json b/extensions/amp-story-auto-ads/0.1/_locales/ro.json
new file mode 100644
index 0000000000000..e1138fb8aa13c
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/ro.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Înregistrați-vă"},
+  "40": {"string": "Rezervați"},
+  "41": {"string": "Cumpărați bilete"},
+  "42": {"string": "Descărcați"},
+  "43": {"string": "Explorați"},
+  "44": {"string": "Descărcați acum"},
+  "45": {"string": "Instalați acum"},
+  "46": {"string": "Aflați mai multe"},
+  "47": {"string": "Ascultați"},
+  "48": {"string": "Mai mult"},
+  "49": {"string": "Deschideți aplicația"},
+  "50": {"string": "Comandați acum"},
+  "51": {"string": "Redați"},
+  "52": {"string": "Citiți"},
+  "53": {"string": "Cumpărați"},
+  "54": {"string": "Afișați"},
+  "55": {"string": "Ore de difuzare"},
+  "56": {"string": "Înscrieți-vă"},
+  "57": {"string": "Abonați-vă acum"},
+  "58": {"string": "Folosiți aplicația"},
+  "59": {"string": "Afișați"},
+  "60": {"string": "Vizionați"},
+  "61": {"string": "Vizionați episodul"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ru.js b/extensions/amp-story-auto-ads/0.1/_locales/ru.js
deleted file mode 100644
index 0cdbbac824140..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/ru.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for ru strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Подать заявку',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Забронировать',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Купить билеты',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Скачать',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Изучить',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Скачать',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Установить',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Подробнее',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Слушать',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Ещё',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Открыть приложение',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Заказать',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Воспроизвести',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Читать',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Купить',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Показать',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Время сеансов',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Зарегистрироваться',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Подписаться',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Использовать приложение',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Смотреть',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Смотреть',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Смотреть серию',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ru.json b/extensions/amp-story-auto-ads/0.1/_locales/ru.json
new file mode 100644
index 0000000000000..226d4352a8c51
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/ru.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Подать заявку"},
+  "40": {"string": "Забронировать"},
+  "41": {"string": "Купить билеты"},
+  "42": {"string": "Скачать"},
+  "43": {"string": "Изучить"},
+  "44": {"string": "Скачать"},
+  "45": {"string": "Установить"},
+  "46": {"string": "Подробнее"},
+  "47": {"string": "Слушать"},
+  "48": {"string": "Ещё"},
+  "49": {"string": "Открыть приложение"},
+  "50": {"string": "Заказать"},
+  "51": {"string": "Воспроизвести"},
+  "52": {"string": "Читать"},
+  "53": {"string": "Купить"},
+  "54": {"string": "Показать"},
+  "55": {"string": "Время сеансов"},
+  "56": {"string": "Зарегистрироваться"},
+  "57": {"string": "Подписаться"},
+  "58": {"string": "Использовать приложение"},
+  "59": {"string": "Смотреть"},
+  "60": {"string": "Смотреть"},
+  "61": {"string": "Смотреть серию"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/si.js b/extensions/amp-story-auto-ads/0.1/_locales/si.js
deleted file mode 100644
index 747f93fe04a6d..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/si.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for si strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'දැන් අයැදුම් කරන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'වෙන් කිරීම',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'ප්‍රවේශ පත්‍ර මිල දී ගන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'බාගන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'ගවේෂණය',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'දැන් ගන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'දැන් ස්ථාපනය කරන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'තවත් දැන ගන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'සවන් දෙන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'තවත්',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'යෙදුම විවෘත කරන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'දැන් ඇණවුම් කරන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'ධාවන කරන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'කියවන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'සාප්පු යන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'පෙන්වන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'දර්ශන වේලා',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'ලියාපදිංචි වන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'දැන් දායක වන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'යෙදුම භාවිත කරන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'බලන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'නරඹන්න',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'කතාංගය බලන්න',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/si.json b/extensions/amp-story-auto-ads/0.1/_locales/si.json
new file mode 100644
index 0000000000000..31b42b81bc014
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/si.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "දැන් අයැදුම් කරන්න"},
+  "40": {"string": "වෙන් කිරීම"},
+  "41": {"string": "ප්‍රවේශ පත්‍ර මිල දී ගන්න"},
+  "42": {"string": "බාගන්න"},
+  "43": {"string": "ගවේෂණය"},
+  "44": {"string": "දැන් ගන්න"},
+  "45": {"string": "දැන් ස්ථාපනය කරන්න"},
+  "46": {"string": "තවත් දැන ගන්න"},
+  "47": {"string": "සවන් දෙන්න"},
+  "48": {"string": "තවත්"},
+  "49": {"string": "යෙදුම විවෘත කරන්න"},
+  "50": {"string": "දැන් ඇණවුම් කරන්න"},
+  "51": {"string": "ධාවන කරන්න"},
+  "52": {"string": "කියවන්න"},
+  "53": {"string": "සාප්පු යන්න"},
+  "54": {"string": "පෙන්වන්න"},
+  "55": {"string": "දර්ශන වේලා"},
+  "56": {"string": "ලියාපදිංචි වන්න"},
+  "57": {"string": "දැන් දායක වන්න"},
+  "58": {"string": "යෙදුම භාවිත කරන්න"},
+  "59": {"string": "බලන්න"},
+  "60": {"string": "නරඹන්න"},
+  "61": {"string": "කතාංගය බලන්න"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/sk.js b/extensions/amp-story-auto-ads/0.1/_locales/sk.js
deleted file mode 100644
index a2e2420f696bd..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/sk.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for sk strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Požiadať',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Rezervovať',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Kúpiť lístky',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Stiahnuť',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Preskúmať',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Získať',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Inštalovať',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Ďalšie informácie',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Počúvať',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Viac',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Otvoriť aplikáciu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Objednať',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Prehrať',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Čítať',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Kúpiť',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Zobraziť',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Premietacie časy',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Registrovať sa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Prihlásiť sa na odber',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Použiť aplikáciu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Zobraziť',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Pozrieť',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Pozrieť epizódu',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/sk.json b/extensions/amp-story-auto-ads/0.1/_locales/sk.json
new file mode 100644
index 0000000000000..d850370632429
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/sk.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Požiadať"},
+  "40": {"string": "Rezervovať"},
+  "41": {"string": "Kúpiť lístky"},
+  "42": {"string": "Stiahnuť"},
+  "43": {"string": "Preskúmať"},
+  "44": {"string": "Získať"},
+  "45": {"string": "Inštalovať"},
+  "46": {"string": "Ďalšie informácie"},
+  "47": {"string": "Počúvať"},
+  "48": {"string": "Viac"},
+  "49": {"string": "Otvoriť aplikáciu"},
+  "50": {"string": "Objednať"},
+  "51": {"string": "Prehrať"},
+  "52": {"string": "Čítať"},
+  "53": {"string": "Kúpiť"},
+  "54": {"string": "Zobraziť"},
+  "55": {"string": "Premietacie časy"},
+  "56": {"string": "Registrovať sa"},
+  "57": {"string": "Prihlásiť sa na odber"},
+  "58": {"string": "Použiť aplikáciu"},
+  "59": {"string": "Zobraziť"},
+  "60": {"string": "Pozrieť"},
+  "61": {"string": "Pozrieť epizódu"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/sl.js b/extensions/amp-story-auto-ads/0.1/_locales/sl.js
deleted file mode 100644
index d72320f36f965..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/sl.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for sl strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Prijavite se',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Rezervacija',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Nakup vstopnic',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Prenesite',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Raziščite',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Namestite',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Namestite',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Več o tem',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Poslušajte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Več',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Odprite aplikacijo',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Naročite',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Predvajajte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Preberite',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Nakup',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Pokažite',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Filmske predstave',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Registracija',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Naročite se',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Uporabite aplikacijo',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Oglejte si',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Glejte',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Oglejte si epizodo',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/sl.json b/extensions/amp-story-auto-ads/0.1/_locales/sl.json
new file mode 100644
index 0000000000000..62e72be7b25ef
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/sl.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Prijavite se"},
+  "40": {"string": "Rezervacija"},
+  "41": {"string": "Nakup vstopnic"},
+  "42": {"string": "Prenesite"},
+  "43": {"string": "Raziščite"},
+  "44": {"string": "Namestite"},
+  "45": {"string": "Namestite"},
+  "46": {"string": "Več o tem"},
+  "47": {"string": "Poslušajte"},
+  "48": {"string": "Več"},
+  "49": {"string": "Odprite aplikacijo"},
+  "50": {"string": "Naročite"},
+  "51": {"string": "Predvajajte"},
+  "52": {"string": "Preberite"},
+  "53": {"string": "Nakup"},
+  "54": {"string": "Pokažite"},
+  "55": {"string": "Filmske predstave"},
+  "56": {"string": "Registracija"},
+  "57": {"string": "Naročite se"},
+  "58": {"string": "Uporabite aplikacijo"},
+  "59": {"string": "Oglejte si"},
+  "60": {"string": "Glejte"},
+  "61": {"string": "Oglejte si epizodo"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/sq.js b/extensions/amp-story-auto-ads/0.1/_locales/sq.js
deleted file mode 100644
index 2204093d05f67..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/sq.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for sq strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Zbato tani',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Rezervo',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Bli bileta',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Shkarko',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Eksploro',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Merre tani',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Instalo tani',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Mëso më shumë',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Dëgjo',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Më shumë',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Hap aplikacionin',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Porosit tani',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Luaj',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Lexo',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Bli',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Shfaq',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Orari i shfaqjes',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Regjistrohu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Abonohu tani',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Përdor aplikacionin',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Shiko',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Shiko',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Shiko episodin',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/sq.json b/extensions/amp-story-auto-ads/0.1/_locales/sq.json
new file mode 100644
index 0000000000000..bb16b01cb7745
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/sq.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Zbato tani"},
+  "40": {"string": "Rezervo"},
+  "41": {"string": "Bli bileta"},
+  "42": {"string": "Shkarko"},
+  "43": {"string": "Eksploro"},
+  "44": {"string": "Merre tani"},
+  "45": {"string": "Instalo tani"},
+  "46": {"string": "Mëso më shumë"},
+  "47": {"string": "Dëgjo"},
+  "48": {"string": "Më shumë"},
+  "49": {"string": "Hap aplikacionin"},
+  "50": {"string": "Porosit tani"},
+  "51": {"string": "Luaj"},
+  "52": {"string": "Lexo"},
+  "53": {"string": "Bli"},
+  "54": {"string": "Shfaq"},
+  "55": {"string": "Orari i shfaqjes"},
+  "56": {"string": "Regjistrohu"},
+  "57": {"string": "Abonohu tani"},
+  "58": {"string": "Përdor aplikacionin"},
+  "59": {"string": "Shiko"},
+  "60": {"string": "Shiko"},
+  "61": {"string": "Shiko episodin"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/sr.js b/extensions/amp-story-auto-ads/0.1/_locales/sr.js
deleted file mode 100644
index f9b59339c771c..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/sr.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for sr strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Пријавите се одмах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Резервишите',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Купите карте',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Преузмите',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Истражите',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Набавите одмах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Инсталирајте одмах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Сазнајте више',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Слушајте',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Још',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Отворите апликацију',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Поручите одмах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Пустите',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Читајте',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Купите',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Прикажите',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Пројекције',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Региструјте се',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Претплатите се одмах',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Користите апликацију',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Прегледајте',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Гледајте',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Гледајте епизоду',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/sr.json b/extensions/amp-story-auto-ads/0.1/_locales/sr.json
new file mode 100644
index 0000000000000..079f2cc3c45e2
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/sr.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Пријавите се одмах"},
+  "40": {"string": "Резервишите"},
+  "41": {"string": "Купите карте"},
+  "42": {"string": "Преузмите"},
+  "43": {"string": "Истражите"},
+  "44": {"string": "Набавите одмах"},
+  "45": {"string": "Инсталирајте одмах"},
+  "46": {"string": "Сазнајте више"},
+  "47": {"string": "Слушајте"},
+  "48": {"string": "Још"},
+  "49": {"string": "Отворите апликацију"},
+  "50": {"string": "Поручите одмах"},
+  "51": {"string": "Пустите"},
+  "52": {"string": "Читајте"},
+  "53": {"string": "Купите"},
+  "54": {"string": "Прикажите"},
+  "55": {"string": "Пројекције"},
+  "56": {"string": "Региструјте се"},
+  "57": {"string": "Претплатите се одмах"},
+  "58": {"string": "Користите апликацију"},
+  "59": {"string": "Прегледајте"},
+  "60": {"string": "Гледајте"},
+  "61": {"string": "Гледајте епизоду"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/sv.js b/extensions/amp-story-auto-ads/0.1/_locales/sv.js
deleted file mode 100644
index 0ceb8a117b519..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/sv.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for sv strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Ansök nu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Boka',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Köp biljetter',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Ladda ned',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Utforska',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Hämta nu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Installera nu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Läs mer',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Lyssna',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Mer',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Öppna appen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Beställ nu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Spela upp',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Läs',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Handla',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Visa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Visningstider',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Registrera dig',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Prenumerera nu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Använd appen',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Visa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Titta',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Titta på avsnittet',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/sv.json b/extensions/amp-story-auto-ads/0.1/_locales/sv.json
new file mode 100644
index 0000000000000..acb7ff6cbcfc5
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/sv.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Ansök nu"},
+  "40": {"string": "Boka"},
+  "41": {"string": "Köp biljetter"},
+  "42": {"string": "Ladda ned"},
+  "43": {"string": "Utforska"},
+  "44": {"string": "Hämta nu"},
+  "45": {"string": "Installera nu"},
+  "46": {"string": "Läs mer"},
+  "47": {"string": "Lyssna"},
+  "48": {"string": "Mer"},
+  "49": {"string": "Öppna appen"},
+  "50": {"string": "Beställ nu"},
+  "51": {"string": "Spela upp"},
+  "52": {"string": "Läs"},
+  "53": {"string": "Handla"},
+  "54": {"string": "Visa"},
+  "55": {"string": "Visningstider"},
+  "56": {"string": "Registrera dig"},
+  "57": {"string": "Prenumerera nu"},
+  "58": {"string": "Använd appen"},
+  "59": {"string": "Visa"},
+  "60": {"string": "Titta"},
+  "61": {"string": "Titta på avsnittet"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/sw.js b/extensions/amp-story-auto-ads/0.1/_locales/sw.js
deleted file mode 100644
index 6a7a6714114a0..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/sw.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for sw strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Tuma Ombi Sasa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Hifadhi nafasi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Nunua Tiketi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Pakua',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Gundua',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Pata Sasa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Sakinisha Sasa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Pata Maelezo Zaidi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Sikiliza',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Zaidi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Fungua Programu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Agiza Sasa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Cheza',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Soma',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Nunua',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Onyesha',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Saa za kuonyesha',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Jisajili',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Jisajili Sasa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Tumia Programu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Angalia',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Tazama',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Tazama Kipindi',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/sw.json b/extensions/amp-story-auto-ads/0.1/_locales/sw.json
new file mode 100644
index 0000000000000..79027a882eb0f
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/sw.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Tuma Ombi Sasa"},
+  "40": {"string": "Hifadhi nafasi"},
+  "41": {"string": "Nunua Tiketi"},
+  "42": {"string": "Pakua"},
+  "43": {"string": "Gundua"},
+  "44": {"string": "Pata Sasa"},
+  "45": {"string": "Sakinisha Sasa"},
+  "46": {"string": "Pata Maelezo Zaidi"},
+  "47": {"string": "Sikiliza"},
+  "48": {"string": "Zaidi"},
+  "49": {"string": "Fungua Programu"},
+  "50": {"string": "Agiza Sasa"},
+  "51": {"string": "Cheza"},
+  "52": {"string": "Soma"},
+  "53": {"string": "Nunua"},
+  "54": {"string": "Onyesha"},
+  "55": {"string": "Saa za kuonyesha"},
+  "56": {"string": "Jisajili"},
+  "57": {"string": "Jisajili Sasa"},
+  "58": {"string": "Tumia Programu"},
+  "59": {"string": "Angalia"},
+  "60": {"string": "Tazama"},
+  "61": {"string": "Tazama Kipindi"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ta.js b/extensions/amp-story-auto-ads/0.1/_locales/ta.js
deleted file mode 100644
index 0d978825bbbcb..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/ta.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ta strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'இப்போதே விண்ணப்பியுங்கள்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'புத்தகம்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'டிக்கெட்களை வாங்குங்கள்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'பதிவிறக்குங்கள்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'கண்டறி',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'இப்போதே பெறுங்கள்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'இப்போதே நிறுவு',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'மேலும் அறிக',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'இசையைக் கேளுங்கள்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'மேலும்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'ஆப்ஸைத் திறந்திடுங்கள்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'இப்போதே ஆர்டர் செய்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'இயக்குங்கள்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'வாசியுங்கள்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'ஷாப்பிங் செய்க',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'காட்டு',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'காட்சிநேரங்கள்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'பதிவு செய்யுங்கள்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'இப்போதே குழு சேர்க',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'ஆப்ஸைப் பயன்படுத்து',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'காட்டு',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'பாருங்கள்',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'எபிசோடைக் காட்டு',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ta.json b/extensions/amp-story-auto-ads/0.1/_locales/ta.json
new file mode 100644
index 0000000000000..9919f9b5d55b9
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/ta.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "இப்போதே விண்ணப்பியுங்கள்"},
+  "40": {"string": "புத்தகம்"},
+  "41": {"string": "டிக்கெட்களை வாங்குங்கள்"},
+  "42": {"string": "பதிவிறக்குங்கள்"},
+  "43": {"string": "கண்டறி"},
+  "44": {"string": "இப்போதே பெறுங்கள்"},
+  "45": {"string": "இப்போதே நிறுவு"},
+  "46": {"string": "மேலும் அறிக"},
+  "47": {"string": "இசையைக் கேளுங்கள்"},
+  "48": {"string": "மேலும்"},
+  "49": {"string": "ஆப்ஸைத் திறந்திடுங்கள்"},
+  "50": {"string": "இப்போதே ஆர்டர் செய்"},
+  "51": {"string": "இயக்குங்கள்"},
+  "52": {"string": "வாசியுங்கள்"},
+  "53": {"string": "ஷாப்பிங் செய்க"},
+  "54": {"string": "காட்டு"},
+  "55": {"string": "காட்சிநேரங்கள்"},
+  "56": {"string": "பதிவு செய்யுங்கள்"},
+  "57": {"string": "இப்போதே குழு சேர்க"},
+  "58": {"string": "ஆப்ஸைப் பயன்படுத்து"},
+  "59": {"string": "காட்டு"},
+  "60": {"string": "பாருங்கள்"},
+  "61": {"string": "எபிசோடைக் காட்டு"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/te.js b/extensions/amp-story-auto-ads/0.1/_locales/te.js
deleted file mode 100644
index ef3461dc7e69a..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/te.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for te strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'ఇప్పుడే వర్తింప చేయి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'బుక్ చేయి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'టిక్కెట్లను కొనుగోలు చేయి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'డౌన్‌లోడ్ చేయి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'అన్వేషించు',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'ఇప్పుడే పొందండి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'ఇప్పుడు ఇన్‌స్టాల్ చేయి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'మరింత తెలుసుకోండి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'వినండి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'మరిన్ని',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'యాప్‌ను తెరువు',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'ఇప్పుడే ఆర్డర్ చేయి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'ప్లే చేయి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'చదువు',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'షాపింగ్ చేయి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'చూపు',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'ప్రదర్శన సమయాలు',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'సైన్ అప్ చేయి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'ఇప్పుడే సభ్యత్వాన్ని పొందండి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'యాప్‌ను ఉపయోగించు',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'చూడండి',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'చూడు',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'ఎపిసోడ్‌ను చూడండి',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/te.json b/extensions/amp-story-auto-ads/0.1/_locales/te.json
new file mode 100644
index 0000000000000..f522a45cb5f98
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/te.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "ఇప్పుడే వర్తింప చేయి"},
+  "40": {"string": "బుక్ చేయి"},
+  "41": {"string": "టిక్కెట్లను కొనుగోలు చేయి"},
+  "42": {"string": "డౌన్‌లోడ్ చేయి"},
+  "43": {"string": "అన్వేషించు"},
+  "44": {"string": "ఇప్పుడే పొందండి"},
+  "45": {"string": "ఇప్పుడు ఇన్‌స్టాల్ చేయి"},
+  "46": {"string": "మరింత తెలుసుకోండి"},
+  "47": {"string": "వినండి"},
+  "48": {"string": "మరిన్ని"},
+  "49": {"string": "యాప్‌ను తెరువు"},
+  "50": {"string": "ఇప్పుడే ఆర్డర్ చేయి"},
+  "51": {"string": "ప్లే చేయి"},
+  "52": {"string": "చదువు"},
+  "53": {"string": "షాపింగ్ చేయి"},
+  "54": {"string": "చూపు"},
+  "55": {"string": "ప్రదర్శన సమయాలు"},
+  "56": {"string": "సైన్ అప్ చేయి"},
+  "57": {"string": "ఇప్పుడే సభ్యత్వాన్ని పొందండి"},
+  "58": {"string": "యాప్‌ను ఉపయోగించు"},
+  "59": {"string": "చూడండి"},
+  "60": {"string": "చూడు"},
+  "61": {"string": "ఎపిసోడ్‌ను చూడండి"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/th.js b/extensions/amp-story-auto-ads/0.1/_locales/th.js
deleted file mode 100644
index acb0d62d7c62b..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/th.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for th strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'สมัครเลย',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'จอง',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'ซื้อบัตร',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'ดาวน์โหลด',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'สำรวจ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'ดาวน์โหลดเลย',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'ติดตั้งเลย',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'ดูข้อมูลเพิ่มเติม',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'ฟัง',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'เพิ่มเติม',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'เปิดแอป',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'สั่งซื้อเลย',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'เล่น',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'อ่าน',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'เลือกซื้อ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'แสดง',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'เวลาฉาย',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'ลงชื่อสมัครใช้',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'สมัครใช้บริการเลย',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'ใช้แอป',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'ดู',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'ดู',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'ดูตอน',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/th.json b/extensions/amp-story-auto-ads/0.1/_locales/th.json
new file mode 100644
index 0000000000000..16aa7db21fc37
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/th.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "สมัครเลย"},
+  "40": {"string": "จอง"},
+  "41": {"string": "ซื้อบัตร"},
+  "42": {"string": "ดาวน์โหลด"},
+  "43": {"string": "สำรวจ"},
+  "44": {"string": "ดาวน์โหลดเลย"},
+  "45": {"string": "ติดตั้งเลย"},
+  "46": {"string": "ดูข้อมูลเพิ่มเติม"},
+  "47": {"string": "ฟัง"},
+  "48": {"string": "เพิ่มเติม"},
+  "49": {"string": "เปิดแอป"},
+  "50": {"string": "สั่งซื้อเลย"},
+  "51": {"string": "เล่น"},
+  "52": {"string": "อ่าน"},
+  "53": {"string": "เลือกซื้อ"},
+  "54": {"string": "แสดง"},
+  "55": {"string": "เวลาฉาย"},
+  "56": {"string": "ลงชื่อสมัครใช้"},
+  "57": {"string": "สมัครใช้บริการเลย"},
+  "58": {"string": "ใช้แอป"},
+  "59": {"string": "ดู"},
+  "60": {"string": "ดู"},
+  "61": {"string": "ดูตอน"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/tr.js b/extensions/amp-story-auto-ads/0.1/_locales/tr.js
deleted file mode 100644
index b1820c6b4b379..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/tr.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for tr strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Hemen Başvur',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Kitap',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Bilet Satın Al',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'İndir',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Keşfet',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Hemen Al',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Şimdi Yükle',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Daha Fazla Bilgi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Dinle',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Diğer',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Uygulamayı Aç',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Şimdi Sipariş Et',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Oynat',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Oku',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Satın al',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Göster',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Gösterim zamanları',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Kaydol',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Şimdi Abone Ol',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Uygulama Kullan',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Göster',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'İzle',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Bölümü İzle',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/tr.json b/extensions/amp-story-auto-ads/0.1/_locales/tr.json
new file mode 100644
index 0000000000000..bf61e630d218b
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/tr.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Hemen Başvur"},
+  "40": {"string": "Kitap"},
+  "41": {"string": "Bilet Satın Al"},
+  "42": {"string": "İndir"},
+  "43": {"string": "Keşfet"},
+  "44": {"string": "Hemen Al"},
+  "45": {"string": "Şimdi Yükle"},
+  "46": {"string": "Daha Fazla Bilgi"},
+  "47": {"string": "Dinle"},
+  "48": {"string": "Diğer"},
+  "49": {"string": "Uygulamayı Aç"},
+  "50": {"string": "Şimdi Sipariş Et"},
+  "51": {"string": "Oynat"},
+  "52": {"string": "Oku"},
+  "53": {"string": "Satın al"},
+  "54": {"string": "Göster"},
+  "55": {"string": "Gösterim zamanları"},
+  "56": {"string": "Kaydol"},
+  "57": {"string": "Şimdi Abone Ol"},
+  "58": {"string": "Uygulama Kullan"},
+  "59": {"string": "Göster"},
+  "60": {"string": "İzle"},
+  "61": {"string": "Bölümü İzle"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/uk.js b/extensions/amp-story-auto-ads/0.1/_locales/uk.js
deleted file mode 100644
index ca0dfa6e17133..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/uk.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for uk strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Подати заявку',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Забронювати',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Купити квитки',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Завантажити',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Огляд',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Отримати',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Установити',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Докладніше',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Слухати',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Більше',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Відкрити додаток',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Замовити',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Відтворити',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Читати',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Купити',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Показати',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Розклад показів',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Зареєструватися',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Підписатися',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Скористатися додатком',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Переглянути',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Дивитися',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Переглянути серію',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/uk.json b/extensions/amp-story-auto-ads/0.1/_locales/uk.json
new file mode 100644
index 0000000000000..096f0dc838912
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/uk.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Подати заявку"},
+  "40": {"string": "Забронювати"},
+  "41": {"string": "Купити квитки"},
+  "42": {"string": "Завантажити"},
+  "43": {"string": "Огляд"},
+  "44": {"string": "Отримати"},
+  "45": {"string": "Установити"},
+  "46": {"string": "Докладніше"},
+  "47": {"string": "Слухати"},
+  "48": {"string": "Більше"},
+  "49": {"string": "Відкрити додаток"},
+  "50": {"string": "Замовити"},
+  "51": {"string": "Відтворити"},
+  "52": {"string": "Читати"},
+  "53": {"string": "Купити"},
+  "54": {"string": "Показати"},
+  "55": {"string": "Розклад показів"},
+  "56": {"string": "Зареєструватися"},
+  "57": {"string": "Підписатися"},
+  "58": {"string": "Скористатися додатком"},
+  "59": {"string": "Переглянути"},
+  "60": {"string": "Дивитися"},
+  "61": {"string": "Переглянути серію"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ur.js b/extensions/amp-story-auto-ads/0.1/_locales/ur.js
deleted file mode 100644
index e86ebfac655ce..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/ur.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ur strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'ابھی لاگو کریں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'کتاب',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'ٹکٹیں خریدیں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'ڈاؤن لوڈ کریں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'دریافت کریں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'اب حاصل کریں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'ابھی انسٹال کریں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'مزید جانیں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'سنیں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'مزید',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'ایپ کھولیں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'ابھی آرڈر کریں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'چلائیں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'پڑھیں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'خریدیں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'دکھائیں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'شو کے اوقات',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'سائن اپ کریں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'ابھی سبسکرائب کریں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'ایپ استعمال کریں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'دیکھیں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'دیکھیں',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'ایپی سوڈ دیکھیں',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/ur.json b/extensions/amp-story-auto-ads/0.1/_locales/ur.json
new file mode 100644
index 0000000000000..afc5ced808448
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/ur.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "ابھی لاگو کریں"},
+  "40": {"string": "کتاب"},
+  "41": {"string": "ٹکٹیں خریدیں"},
+  "42": {"string": "ڈاؤن لوڈ کریں"},
+  "43": {"string": "دریافت کریں"},
+  "44": {"string": "اب حاصل کریں"},
+  "45": {"string": "ابھی انسٹال کریں"},
+  "46": {"string": "مزید جانیں"},
+  "47": {"string": "سنیں"},
+  "48": {"string": "مزید"},
+  "49": {"string": "ایپ کھولیں"},
+  "50": {"string": "ابھی آرڈر کریں"},
+  "51": {"string": "چلائیں"},
+  "52": {"string": "پڑھیں"},
+  "53": {"string": "خریدیں"},
+  "54": {"string": "دکھائیں"},
+  "55": {"string": "شو کے اوقات"},
+  "56": {"string": "سائن اپ کریں"},
+  "57": {"string": "ابھی سبسکرائب کریں"},
+  "58": {"string": "ایپ استعمال کریں"},
+  "59": {"string": "دیکھیں"},
+  "60": {"string": "دیکھیں"},
+  "61": {"string": "ایپی سوڈ دیکھیں"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/vi.js b/extensions/amp-story-auto-ads/0.1/_locales/vi.js
deleted file mode 100644
index b2a7ab871b821..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/vi.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for vi strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Đăng ký ngay bây giờ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Sách',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Mua Vé',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Tải xuống',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Khám phá',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Nhận ngay',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Cài đặt ngay',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Tìm hiểu thêm',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Nghe',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Thêm',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Mở ứng dụng',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Đặt hàng ngay bây giờ',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Phát',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Đọc',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Mua sắm',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Hiển thị',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Thời gian chiếu',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Đăng ký',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Đăng ký ngay',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Sử dụng ứng dụng',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Xem',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Xem',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Xem tập',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/vi.json b/extensions/amp-story-auto-ads/0.1/_locales/vi.json
new file mode 100644
index 0000000000000..b24a60be729ff
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/vi.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Đăng ký ngay bây giờ"},
+  "40": {"string": "Sách"},
+  "41": {"string": "Mua Vé"},
+  "42": {"string": "Tải xuống"},
+  "43": {"string": "Khám phá"},
+  "44": {"string": "Nhận ngay"},
+  "45": {"string": "Cài đặt ngay"},
+  "46": {"string": "Tìm hiểu thêm"},
+  "47": {"string": "Nghe"},
+  "48": {"string": "Thêm"},
+  "49": {"string": "Mở ứng dụng"},
+  "50": {"string": "Đặt hàng ngay bây giờ"},
+  "51": {"string": "Phát"},
+  "52": {"string": "Đọc"},
+  "53": {"string": "Mua sắm"},
+  "54": {"string": "Hiển thị"},
+  "55": {"string": "Thời gian chiếu"},
+  "56": {"string": "Đăng ký"},
+  "57": {"string": "Đăng ký ngay"},
+  "58": {"string": "Sử dụng ứng dụng"},
+  "59": {"string": "Xem"},
+  "60": {"string": "Xem"},
+  "61": {"string": "Xem tập"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/zh-CN.js b/extensions/amp-story-auto-ads/0.1/_locales/zh-CN.js
deleted file mode 100644
index 665a185769cee..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/zh-CN.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for zh-CN strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: '立即申请',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: '预订',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: '买票',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: '下载',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: '探索',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: '立即获取',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: '立即安装',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: '了解详情',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: '收听',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: '更多',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: '打开应用',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: '立即订购',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: '播放',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: '阅读',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: '选购',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: '显示',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: '放映时间',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: '注册',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: '立即订阅',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: '使用应用',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: '查看',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: '观看',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: '观看剧集',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/zh-CN.json b/extensions/amp-story-auto-ads/0.1/_locales/zh-CN.json
new file mode 100644
index 0000000000000..376a6aeb453ad
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/zh-CN.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "立即申请"},
+  "40": {"string": "预订"},
+  "41": {"string": "买票"},
+  "42": {"string": "下载"},
+  "43": {"string": "探索"},
+  "44": {"string": "立即获取"},
+  "45": {"string": "立即安装"},
+  "46": {"string": "了解详情"},
+  "47": {"string": "收听"},
+  "48": {"string": "更多"},
+  "49": {"string": "打开应用"},
+  "50": {"string": "立即订购"},
+  "51": {"string": "播放"},
+  "52": {"string": "阅读"},
+  "53": {"string": "选购"},
+  "54": {"string": "显示"},
+  "55": {"string": "放映时间"},
+  "56": {"string": "注册"},
+  "57": {"string": "立即订阅"},
+  "58": {"string": "使用应用"},
+  "59": {"string": "查看"},
+  "60": {"string": "观看"},
+  "61": {"string": "观看剧集"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/zh-TW.js b/extensions/amp-story-auto-ads/0.1/_locales/zh-TW.js
deleted file mode 100644
index a84267f4b6ea8..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/zh-TW.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for zh-TW strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: '立即申請',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: '預訂',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: '買票',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: '下載',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: '探索',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: '立即取得',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: '立即安裝',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: '瞭解詳情',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: '聆聽',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: '顯示更多',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: '開啟應用程式',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: '立刻訂購',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: '播放',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: '閱讀',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: '購物',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: '顯示',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: '放映時間',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: '註冊',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: '立即訂閱',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: '使用應用程式',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: '查看',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: '觀看',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: '觀看劇集',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/zh-TW.json b/extensions/amp-story-auto-ads/0.1/_locales/zh-TW.json
new file mode 100644
index 0000000000000..ab07cc855a05e
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/zh-TW.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "立即申請"},
+  "40": {"string": "預訂"},
+  "41": {"string": "買票"},
+  "42": {"string": "下載"},
+  "43": {"string": "探索"},
+  "44": {"string": "立即取得"},
+  "45": {"string": "立即安裝"},
+  "46": {"string": "瞭解詳情"},
+  "47": {"string": "聆聽"},
+  "48": {"string": "顯示更多"},
+  "49": {"string": "開啟應用程式"},
+  "50": {"string": "立刻訂購"},
+  "51": {"string": "播放"},
+  "52": {"string": "閱讀"},
+  "53": {"string": "購物"},
+  "54": {"string": "顯示"},
+  "55": {"string": "放映時間"},
+  "56": {"string": "註冊"},
+  "57": {"string": "立即訂閱"},
+  "58": {"string": "使用應用程式"},
+  "59": {"string": "查看"},
+  "60": {"string": "觀看"},
+  "61": {"string": "觀看劇集"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/zu.js b/extensions/amp-story-auto-ads/0.1/_locales/zu.js
deleted file mode 100644
index bbfe6b3ae8326..0000000000000
--- a/extensions/amp-story-auto-ads/0.1/_locales/zu.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for zu strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_APPLY_NOW]: {
-    string: 'Faka isicelo manje',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BOOK_NOW]: {
-    string: 'Ibhuku',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_BUY_TICKETS]: {
-    string: 'Thenga amathikithi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_DOWNLOAD]: {
-    string: 'Landa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_EXPLORE]: {
-    string: 'Hlola',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_GET_NOW]: {
-    string: 'Thola manje',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_INSTALL]: {
-    string: 'Faka manje',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LEARN_MORE]: {
-    string: 'Funda kabanzi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_LISTEN]: {
-    string: 'Lalela',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_MORE]: {
-    string: 'Okuningi',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_OPEN_APP]: {
-    string: 'Vula uhlelo lokusebenza',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_ORDER_NOW]: {
-    string: 'Faka isicelo manje',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_PLAY]: {
-    string: 'Dlala',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_READ]: {
-    string: 'Funda',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOP]: {
-    string: 'Thenga',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOW]: {
-    string: 'Bonisa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SHOWTIMES]: {
-    string: 'Izikhathi zombukiso',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SIGN_UP]: {
-    string: 'Bhalisa',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_SUBSCRIBE]: {
-    string: 'Bhalisa manje',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_USE_APP]: {
-    string: 'Sebenzisa uhlelo lokusebenza',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_VIEW]: {
-    string: 'Buka',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH]: {
-    string: 'Buka',
-  },
-  [LocalizedStringId.AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE]: {
-    string: 'Buka isiqephu',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story-auto-ads/0.1/_locales/zu.json b/extensions/amp-story-auto-ads/0.1/_locales/zu.json
new file mode 100644
index 0000000000000..26cd3f1e0269a
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/_locales/zu.json
@@ -0,0 +1,25 @@
+{
+  "39": {"string": "Faka isicelo manje"},
+  "40": {"string": "Ibhuku"},
+  "41": {"string": "Thenga amathikithi"},
+  "42": {"string": "Landa"},
+  "43": {"string": "Hlola"},
+  "44": {"string": "Thola manje"},
+  "45": {"string": "Faka manje"},
+  "46": {"string": "Funda kabanzi"},
+  "47": {"string": "Lalela"},
+  "48": {"string": "Okuningi"},
+  "49": {"string": "Vula uhlelo lokusebenza"},
+  "50": {"string": "Faka isicelo manje"},
+  "51": {"string": "Dlala"},
+  "52": {"string": "Funda"},
+  "53": {"string": "Thenga"},
+  "54": {"string": "Bonisa"},
+  "55": {"string": "Izikhathi zombukiso"},
+  "56": {"string": "Bhalisa"},
+  "57": {"string": "Bhalisa manje"},
+  "58": {"string": "Sebenzisa uhlelo lokusebenza"},
+  "59": {"string": "Buka"},
+  "60": {"string": "Buka"},
+  "61": {"string": "Buka isiqephu"}
+}
diff --git a/extensions/amp-story-auto-ads/0.1/algorithm-count-pages.js b/extensions/amp-story-auto-ads/0.1/algorithm-count-pages.js
new file mode 100644
index 0000000000000..537788e4915be
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/algorithm-count-pages.js
@@ -0,0 +1,142 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {InsertionState} from './story-ad-page-manager';
+import {StateProperty} from '../../amp-story/1.0/amp-story-store-service';
+import {hasOwn, map} from '../../../src/core/types/object';
+
+/** @const {number} */
+const INTERVAL = 7;
+
+/**
+ * Original Story Ads placement algorithm. Tries to place ad every seven pages.
+ * Will not place if ad is still loading.
+ * @implements {./algorithm-interface.StoryAdPlacementAlgorithm}
+ */
+export class CountPagesAlgorithm {
+  /** @override */
+  constructor(storeService, pageManager) {
+    /** @private {!../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */
+    this.storeService_ = storeService;
+
+    /** @private {!StoryAdPageManager} */
+    this.pageManager_ = pageManager;
+
+    /** @private {!Object<string, boolean>} */
+    this.uniquePageIds_ = map();
+
+    /** @private {number} */
+    this.newPagesSinceLastAd_ = 1;
+
+    /** @private {boolean} */
+    this.pendingAdView_ = false;
+
+    /** @private {boolean} */
+    this.tryingToInsert_ = false;
+  }
+
+  /** @override */
+  isStoryEligible() {
+    const numPages = this.storeService_.get(StateProperty.PAGE_IDS).length;
+    return numPages > INTERVAL;
+  }
+
+  /** @override */
+  initializePages() {
+    return [this.pageManager_.createAdPage()];
+  }
+
+  /** @override */
+  onPageChange(pageId) {
+    if (!hasOwn(this.uniquePageIds_, pageId)) {
+      this.uniquePageIds_[pageId] = true;
+      this.newPagesSinceLastAd_++;
+    }
+
+    if (
+      this.pendingAdView_ ||
+      this.tryingToInsert_ ||
+      !this.readyToPlaceAd_() ||
+      !this.pageManager_.hasUnusedAdPage()
+    ) {
+      return;
+    }
+
+    this.tryingToInsert_ = true;
+    this.tryToPlaceAdAfterPage_(pageId);
+  }
+
+  /** @override */
+  onNewAdView(pageIndex) {
+    this.pendingAdView_ = false;
+    this.newPagesSinceLastAd_ = 0;
+    if (this.shouldCreateNextAd_(pageIndex)) {
+      this.pageManager_.createAdPage();
+    }
+  }
+
+  /**
+   * Determine if enough pages in the story are left for ad placement to be
+   * possible.
+   *
+   * @param {number} pageIndex
+   * @return {boolean}
+   */
+  shouldCreateNextAd_(pageIndex) {
+    const numPages = this.storeService_.get(StateProperty.PAGE_IDS).length;
+    return numPages - pageIndex > INTERVAL;
+  }
+
+  /**
+   * Determine if user has seen enough pages to show an ad. We want a certain
+   * number of pages before the first ad, and then a separate interval
+   * thereafter.
+   * @return {boolean}
+   */
+  readyToPlaceAd_() {
+    return this.newPagesSinceLastAd_ >= INTERVAL;
+  }
+
+  /**
+   * Place ad based on user config.
+   * @param {string} pageBeforeAdId
+   * @private
+   */
+  tryToPlaceAdAfterPage_(pageBeforeAdId) {
+    const nextAdPage = this.pageManager_.getUnusedAdPage();
+
+    // Timeout fail, move to next ad on next navigation.
+    if (!nextAdPage.isLoaded() && nextAdPage.hasTimedOut()) {
+      this.pageManager_.discardCurrentAd();
+      return;
+    }
+
+    // Keep trying the same ad, so we just exit without changing state.
+    if (!nextAdPage.isLoaded()) {
+      return;
+    }
+
+    this.pageManager_
+      .maybeInsertPageAfter(pageBeforeAdId, nextAdPage)
+      .then((insertionState) => {
+        this.tryingToInsert_ = false;
+        if (insertionState === InsertionState.SUCCESS) {
+          // We have an ad inserted that has yet to be viewed.
+          this.pendingAdView_ = true;
+        }
+      });
+  }
+}
diff --git a/extensions/amp-story-auto-ads/0.1/algorithm-interface.js b/extensions/amp-story-auto-ads/0.1/algorithm-interface.js
new file mode 100644
index 0000000000000..09301130be6e3
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/algorithm-interface.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * Interface for all story ad placement algorithms.
+ * @interface
+ */
+export class StoryAdPlacementAlgorithm {
+  /**
+   * @param {?../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} unusedStoreService
+   * @param {!StoryAdPageManager} unusedPageManager
+   */
+  constructor(unusedStoreService, unusedPageManager) {
+    throw new Error('Not implemented.');
+  }
+
+  /**
+   * Called when amp-story-auto-ads initializes. Used as early exit for stories where
+   * the algo knows ahead of time no ads will be placed, e.g. short stories.
+   * @return {boolean}
+   */
+  isStoryEligible() {
+    throw new Error('Not implemented.');
+  }
+
+  /**
+   * Will be called when amp-story-auto-ads initializes. Do work around building
+   * and preloading pages that should happen before any navigation events. Returned
+   * array may be used to force ad to show in development mode.
+   * @return {!Array<!StoryAdPage>}
+   */
+  initializePages() {
+    throw new Error('Not implemented.');
+  }
+
+  /**
+   * Called whenever we receive a page navigation event from the parent story.
+   * @param {string} unusedPageId
+   */
+  onPageChange(unusedPageId) {
+    throw new Error('Not implemented.');
+  }
+
+  /**
+   * @param {number} unusedPageIndex
+   */
+  onNewAdView(unusedPageIndex) {
+    throw new Error('Not implemented.');
+  }
+}
diff --git a/extensions/amp-story-auto-ads/0.1/algorithm-predetermined.js b/extensions/amp-story-auto-ads/0.1/algorithm-predetermined.js
new file mode 100644
index 0000000000000..739f431169ced
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/algorithm-predetermined.js
@@ -0,0 +1,155 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {StateProperty} from '../../amp-story/1.0/amp-story-store-service';
+import {StoryAdPlacements} from '../../../src/experiments/story-ad-placements';
+
+/** @const {number} */
+const BEGINNING_OF_STORY_BUFFER = 3;
+
+/** @const {number} */
+const END_OF_STORY_BUFFER = 1;
+
+/** @const {number} */
+const MAX_ADS_PER_STORY = 4;
+
+/**
+ * Calculate the indices of where ads should be placed based
+ * on story length and the number of ads we want to show.
+ * @param {number} storyLength
+ * @param {number} numberOfAds
+ * @return {!Array<number>}
+ * @visibleForTesting
+ */
+export function getAdPositions(storyLength, numberOfAds) {
+  if (!numberOfAds) {
+    return [];
+  }
+  const firstPosition = Math.ceil(storyLength / (numberOfAds + 1));
+  const pagesLeft = storyLength - firstPosition;
+  const positions = [firstPosition];
+  const interval = Math.ceil(pagesLeft / numberOfAds);
+  for (let i = 1; i < numberOfAds; i++) {
+    const position = firstPosition + interval * i;
+    positions.push(position);
+  }
+  return positions;
+}
+
+/**
+ * Get number of ads for this story. 1 ad for every full target interval +
+ * a 1/interval chance for an extra ad. Respects maximum ads per story.
+ * @param {number} pageCount
+ * @param {number} targetInterval
+ * @return {number}
+ * @visibleForTesting
+ */
+export function getNumberOfAds(pageCount, targetInterval) {
+  const fullSegments = Math.floor(pageCount / targetInterval);
+  const addExtraAd =
+    Math.random() < (pageCount % targetInterval) / targetInterval;
+  const remainderAds = addExtraAd ? 1 : 0;
+  return Math.min(fullSegments + remainderAds, MAX_ADS_PER_STORY);
+}
+
+/**
+ * This algorithm will calculate the number of ads to serve and place them
+ * in predermined slots upon initialization.
+ * @implements {./algorithm-interface.StoryAdPlacementAlgorithm}
+ */
+export class PredeterminedPositionAlgorithm {
+  /** @override */
+  constructor(storeService, pageManager, placementsExpBranch) {
+    /** @private {!StoryAdPageManager} */
+    this.pageManager_ = pageManager;
+
+    /** @private {number} */
+    this.targetInterval_ = this.getIntervalFromExpId_(placementsExpBranch);
+
+    /** @private {!Array<string>} */
+    this.storyPageIds_ = storeService.get(StateProperty.PAGE_IDS);
+
+    /** @private {!Array<number>} */
+    this.adPositions_ = [];
+
+    /** @private {number} */
+    this.pagesCreated_ = 0;
+  }
+
+  /** @override */
+  isStoryEligible() {
+    const storyLength = this.storyPageIds_.length;
+    return storyLength > BEGINNING_OF_STORY_BUFFER + END_OF_STORY_BUFFER;
+  }
+
+  /** @override */
+  initializePages() {
+    const storyLength = this.storyPageIds_.length;
+    const numberOfAds = getNumberOfAds(storyLength, this.targetInterval_);
+    this.adPositions_ = getAdPositions(storyLength, numberOfAds);
+    if (numberOfAds) {
+      // TODO(ccordry): once 1px impression is launched create all ads at once.
+      return [this.createNextPage_()];
+    }
+    return [];
+  }
+
+  /**
+   * Create the next ad page to be shown based on predetermined placements.
+   */
+  createNextPage_() {
+    const position = this.adPositions_[this.pagesCreated_];
+    const adPage = this.pageManager_.createAdPage();
+    adPage.registerLoadCallback(() => {
+      // TODO(ccordry): we could maybe try again if insertion fails.
+      this.pageManager_.maybeInsertPageAfter(
+        this.storyPageIds_[position - 1],
+        adPage
+      );
+    });
+    this.pagesCreated_++;
+    return adPage;
+  }
+
+  /**
+   * This algo does not care about page navigations as positions are calculated
+   * upon initialization.
+   * @override
+   */
+  onPageChange(unusedPageId) {}
+
+  /** @override */
+  onNewAdView(unusedPageIndex) {
+    if (this.pagesCreated_ < this.adPositions_.length) {
+      this.createNextPage_();
+    }
+  }
+
+  /**
+   * Map branches to the interval from experiment branch.
+   * @param {string} branchId
+   * @return {number}
+   */
+  getIntervalFromExpId_(branchId) {
+    if (branchId === StoryAdPlacements.PREDETERMINED_EIGHT) {
+      return 8;
+    } else if (branchId === StoryAdPlacements.PREDETERMINED_TEN) {
+      return 10;
+    } else if (branchId === StoryAdPlacements.PREDETERMINED_TWELVE) {
+      return 12;
+    }
+  }
+}
diff --git a/extensions/amp-story-auto-ads/0.1/algorithm-utils.js b/extensions/amp-story-auto-ads/0.1/algorithm-utils.js
new file mode 100644
index 0000000000000..c1a0eed6677f1
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/algorithm-utils.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {CountPagesAlgorithm} from './algorithm-count-pages';
+import {PredeterminedPositionAlgorithm} from './algorithm-predetermined';
+import {StoryAdPlacements} from '../../../src/experiments/story-ad-placements';
+import {getExperimentBranch} from '../../../src/experiments';
+
+/**
+ * Choose placement algorithm implementation.
+ * @param {!Window} win
+ * @param {!StoryStoreService} storeService
+ * @param {!StoryAdPageManager} pageManager
+ * @return {!StoryAdPlacementAlgorithm}
+ */
+export function getPlacementAlgo(win, storeService, pageManager) {
+  const placementsExpBranch = getExperimentBranch(win, StoryAdPlacements.ID);
+  if (
+    placementsExpBranch &&
+    placementsExpBranch !== StoryAdPlacements.CONTROL
+  ) {
+    return new PredeterminedPositionAlgorithm(
+      storeService,
+      pageManager,
+      placementsExpBranch
+    );
+  }
+  return new CountPagesAlgorithm(storeService, pageManager);
+}
diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-ad-badge.css b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-ad-badge.css
index 2b675d44fb98b..d34137633c12d 100644
--- a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-ad-badge.css
+++ b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-ad-badge.css
@@ -15,16 +15,19 @@
  */
 
 .i-amphtml-ad-overlay-container {
-  height: 24px !important;
+  align-items: center !important;
+  display: flex !important;
+  height: 48px !important;
   left: 0 !important;
-  padding: 14px 0 0 !important;
+  justify-content: center !important;
   pointer-events: none !important;
   position: absolute !important;
   top: 0 !important;
+  width: 48px !important;
   z-index: 100001 !important;
 }
 
-.i-amphtml-ad-overlay-container[dir=rtl] {
+.i-amphtml-ad-overlay-container[dir='rtl'] {
   left: auto !important;
   right: 0 !important;
 }
@@ -37,18 +40,17 @@
 }
 
 .i-amphtml-story-ad-badge {
-  color: #FFFFFF !important;
-  font-size: 18px !important;
-  font-family: 'Roboto', sans-serif !important;
-  font-weight: bold !important;
-  letter-spacing: 0.5px !important;
-  margin: 0 0 0 16px !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="39" height="31" viewBox="0 0 39 31" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_d)"><path d="M17.3672 19.3633H12.7441L11.8652 22H9.06152L13.8252 9.20312H16.2686L21.0586 22H18.2549L17.3672 19.3633ZM13.4561 17.2275H16.6553L15.0469 12.4375L13.4561 17.2275ZM22.1914 17.1748C22.1914 15.6924 22.5225 14.5117 23.1846 13.6328C23.8525 12.7539 24.7637 12.3145 25.918 12.3145C26.8438 12.3145 27.6084 12.6602 28.2119 13.3516V8.5H30.7607V22H28.4668L28.3438 20.9893C27.7109 21.7803 26.8965 22.1758 25.9004 22.1758C24.7812 22.1758 23.8818 21.7363 23.2021 20.8574C22.5283 19.9727 22.1914 18.7451 22.1914 17.1748ZM24.7314 17.3594C24.7314 18.25 24.8867 18.9326 25.1973 19.4072C25.5078 19.8818 25.959 20.1191 26.5508 20.1191C27.3359 20.1191 27.8896 19.7881 28.2119 19.126V15.373C27.8955 14.7109 27.3477 14.3799 26.5684 14.3799C25.3438 14.3799 24.7314 15.373 24.7314 17.3594Z" fill="white"/><path d="M17.3672 19.3633L17.4857 19.3234L17.457 19.2383H17.3672V19.3633ZM12.7441 19.3633V19.2383H12.654L12.6256 19.3238L12.7441 19.3633ZM11.8652 22V22.125H11.9553L11.9838 22.0395L11.8652 22ZM9.06152 22L8.94438 21.9564L8.88161 22.125H9.06152V22ZM13.8252 9.20312V9.07812H13.7383L13.708 9.15952L13.8252 9.20312ZM16.2686 9.20312L16.3856 9.15931L16.3552 9.07812H16.2686V9.20312ZM21.0586 22V22.125H21.2389L21.1757 21.9562L21.0586 22ZM18.2549 22L18.1364 22.0399L18.1651 22.125H18.2549V22ZM13.4561 17.2275L13.3374 17.1881L13.2828 17.3525H13.4561V17.2275ZM16.6553 17.2275V17.3525H16.8291L16.7738 17.1877L16.6553 17.2275ZM15.0469 12.4375L15.1654 12.3977L15.0462 12.0429L14.9282 12.3981L15.0469 12.4375ZM17.3672 19.2383H12.7441V19.4883H17.3672V19.2383ZM12.6256 19.3238L11.7466 21.9605L11.9838 22.0395L12.8627 19.4028L12.6256 19.3238ZM11.8652 21.875H9.06152V22.125H11.8652V21.875ZM9.17867 22.0436L13.9423 9.24673L13.708 9.15952L8.94438 21.9564L9.17867 22.0436ZM13.8252 9.32812H16.2686V9.07812H13.8252V9.32812ZM16.1515 9.24694L20.9415 22.0438L21.1757 21.9562L16.3856 9.15931L16.1515 9.24694ZM21.0586 21.875H18.2549V22.125H21.0586V21.875ZM18.3733 21.9601L17.4857 19.3234L17.2487 19.4032L18.1364 22.0399L18.3733 21.9601ZM13.4561 17.3525H16.6553V17.1025H13.4561V17.3525ZM16.7738 17.1877L15.1654 12.3977L14.9284 12.4773L16.5368 17.2673L16.7738 17.1877ZM14.9282 12.3981L13.3374 17.1881L13.5747 17.2669L15.1655 12.4769L14.9282 12.3981ZM23.1846 13.6328L23.085 13.5572L23.0847 13.5576L23.1846 13.6328ZM28.2119 13.3516L28.1177 13.4338L28.3369 13.6849V13.3516H28.2119ZM28.2119 8.5V8.375H28.0869V8.5H28.2119ZM30.7607 8.5H30.8857V8.375H30.7607V8.5ZM30.7607 22V22.125H30.8857V22H30.7607ZM28.4668 22L28.3427 22.0151L28.3561 22.125H28.4668V22ZM28.3438 20.9893L28.4678 20.9742L28.4319 20.679L28.2461 20.9112L28.3438 20.9893ZM23.2021 20.8574L23.1027 20.9332L23.1033 20.9339L23.2021 20.8574ZM28.2119 19.126L28.3243 19.1807L28.3369 19.1548V19.126H28.2119ZM28.2119 15.373H28.3369V15.3447L28.3247 15.3192L28.2119 15.373ZM22.3164 17.1748C22.3164 15.7102 22.6435 14.5588 23.2844 13.708L23.0847 13.5576C22.4015 14.4646 22.0664 15.6746 22.0664 17.1748H22.3164ZM23.2841 13.7084C23.9272 12.8623 24.8007 12.4395 25.918 12.4395V12.1895C24.7267 12.1895 23.7779 12.6455 23.0851 13.5572L23.2841 13.7084ZM25.918 12.4395C26.808 12.4395 27.5382 12.7698 28.1177 13.4338L28.3061 13.2694C27.6786 12.5505 26.8795 12.1895 25.918 12.1895V12.4395ZM28.3369 13.3516V8.5H28.0869V13.3516H28.3369ZM28.2119 8.625H30.7607V8.375H28.2119V8.625ZM30.6357 8.5V22H30.8857V8.5H30.6357ZM30.7607 21.875H28.4668V22.125H30.7607V21.875ZM28.5909 21.9849L28.4678 20.9742L28.2197 21.0044L28.3427 22.0151L28.5909 21.9849ZM28.2461 20.9112C27.6366 21.6731 26.8578 22.0508 25.9004 22.0508V22.3008C26.9352 22.3008 27.7853 21.8874 28.4414 21.0673L28.2461 20.9112ZM25.9004 22.0508C24.8196 22.0508 23.9568 21.629 23.301 20.781L23.1033 20.9339C23.8068 21.8437 24.7429 22.3008 25.9004 22.3008V22.0508ZM23.3016 20.7817C22.65 19.9261 22.3164 18.7287 22.3164 17.1748H22.0664C22.0664 18.7615 22.4067 20.0193 23.1027 20.9332L23.3016 20.7817ZM24.6064 17.3594C24.6064 18.2616 24.7632 18.9722 25.0927 19.4757L25.3019 19.3388C25.0102 18.8931 24.8564 18.2384 24.8564 17.3594H24.6064ZM25.0927 19.4757C25.4275 19.9874 25.919 20.2441 26.5508 20.2441V19.9941C25.999 19.9941 25.5881 19.7763 25.3019 19.3388L25.0927 19.4757ZM26.5508 20.2441C26.961 20.2441 27.319 20.1575 27.6191 19.9781C27.9196 19.7984 28.1541 19.5304 28.3243 19.1807L28.0995 19.0713C27.9475 19.3837 27.744 19.6122 27.4908 19.7636C27.2371 19.9152 26.9257 19.9941 26.5508 19.9941V20.2441ZM28.3369 19.126V15.373H28.0869V19.126H28.3369ZM28.3247 15.3192C28.1576 14.9694 27.9261 14.7011 27.6284 14.5212C27.3311 14.3416 26.9758 14.2549 26.5684 14.2549V14.5049C26.9402 14.5049 27.2485 14.5837 27.4991 14.7352C27.7492 14.8863 27.9499 15.1146 28.0991 15.4269L28.3247 15.3192ZM26.5684 14.2549C25.9153 14.2549 25.4145 14.5235 25.0843 15.0592C24.7601 15.5849 24.6064 16.3574 24.6064 17.3594H24.8564C24.8564 16.375 25.0089 15.6578 25.2971 15.1904C25.5791 14.7329 25.9968 14.5049 26.5684 14.5049V14.2549Z" fill="white"/></g><defs><filter id="filter0_d" x="0.881836" y="0.375" width="38.0041" height="29.9258" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="4"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs></svg>') !important;
+  background-position: center !important;
+  height: 24px !important;
+  margin: 0 !important;
   opacity: 0 !important;
   padding: 0 !important;
+  width: 24px !important;
   visibility: hidden !important;
 }
 
-[dir=rtl] .i-amphtml-story-ad-badge {
+[dir='rtl'] .i-amphtml-story-ad-badge {
   margin-left: 0px !important;
   margin-right: 16px !important;
 }
diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-cta-button.css b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-cta-button.css
new file mode 100644
index 0000000000000..be72a3cccac7e
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-cta-button.css
@@ -0,0 +1,60 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* If you are changing anything here that affects font, please update measurer
+ in story-ad-button-text-fitter.js */
+.i-amphtml-story-ad-link {
+  background-color: #ffffff !important;
+  border-radius: 20px !important;
+  box-sizing: border-box !important;
+  bottom: 32px !important;
+  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.16) !important;
+  color: #4285f4 !important;
+  font-family: 'Roboto', sans-serif !important;
+  font-weight: bold !important;
+  height: 36px !important;
+  letter-spacing: 0.2px !important;
+  line-height: 36px !important;
+  overflow: hidden !important;
+  /* no important on opacity b/c ff does not allow keyframes to override. */
+  opacity: 0;
+  padding: 0 10px !important;
+  position: absolute !important;
+  text-align: center !important;
+  text-decoration: none !important;
+  min-width: 120px !important;
+  max-width: calc(100vw - 64px);
+}
+
+[cta-active].i-amphtml-story-ad-link {
+  animation-delay: 100ms !important;
+  animation-duration: 300ms !important;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  animation-fill-mode: forwards !important;
+  animation-name: ad-cta !important;
+}
+
+@keyframes ad-cta {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-inabox.css b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-inabox.css
new file mode 100644
index 0000000000000..78988df2539a7
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-inabox.css
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2020 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.
+ */
+
+amp-story-cta-layer {
+  display: block !important;
+  position: absolute !important;
+  top: 80% !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  z-index: 3 !important;
+}
diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-progress-bar.css b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-progress-bar.css
new file mode 100644
index 0000000000000..ad8c7310ca18c
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-progress-bar.css
@@ -0,0 +1,65 @@
+/**
+ * Copyright 2021 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.
+ */
+
+.i-amphtml-story-ad-progress-background {
+  background: hsla(0, 0%, 100%, 0.4) !important;
+  border-radius: 1px !important;
+  height: 2px !important;
+  left: 4px !important;
+  margin: 4px auto !important;
+  opacity: 0 !important;
+  position: absolute !important;
+  width: calc(100% - 8px) !important;
+  visibility: hidden !important;
+  z-index: 100001 !important;
+}
+
+.i-amphtml-story-ad-progress-background[ad-showing] {
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
+.i-amphtml-story-ad-progress-background[desktop-panels] {
+  /* On desktop a story page has a width of 45vh. */
+  /* And a height of 75 vh. */
+  left: calc(50vw - 22.5vh + 4px) !important;
+  top: 12.5vh !important;
+  width: calc(45vh - 8px) !important;
+  /* Have to wait for page to slide in. */
+  transition: opacity 0.1s linear 0.3s;
+}
+
+.i-amphtml-story-ad-progress-bar {
+  background: #fff !important;
+  height: 2px !important;
+}
+
+[ad-showing] .i-amphtml-story-ad-progress-bar {
+  animation: grow linear;
+}
+
+[paused] .i-amphtml-story-ad-progress-bar {
+  animation-play-state: paused;
+}
+
+@keyframes grow {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}
diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-shared.css b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-shared.css
new file mode 100644
index 0000000000000..10959a621e038
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-shared.css
@@ -0,0 +1,25 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/* CSS shared between amp-story-auto-ads and inabox story ad rendering. */
+
+.i-amphtml-story-ad-link-root {
+  all: initial !important;
+  color: initial !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+}
diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css
index abe5aabf00706..d57f651f52080 100644
--- a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css
+++ b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css
@@ -14,15 +14,9 @@
  * limitations under the License.
  */
 
- .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-loading][ad] {
+.i-amphtml-story-desktop-panels amp-story-page[i-amphtml-loading][ad] {
   /* Move below viewport so that ad preloads */
-  transform: scale(1.0) translateX(-100%) translateY(200%) !important;
-}
-
-.i-amphtml-cta-container {
-  display: flex !important;
-  flex-direction: column !important;
-  align-items: center !important;
+  transform: scale(1) translateX(-100%) translateY(200%) !important;
 }
 
 .i-amphtml-story-desktop-fullbleed .i-amphtml-cta-container {
@@ -32,73 +26,39 @@
   top: 67.5% !important;
 }
 
-/* If you are changing anything here that affects font, please update measurer
- in story-ad-button-text-fitter.js */
-.i-amphtml-story-ad-link {
-  background-color: #FFFFFF !important;
-  border-radius: 20px !important;
-  box-sizing: border-box !important;
-  bottom: 32px !important;
-  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.16) !important;
-  color: #4285F4 !important;
-  font-family: 'Roboto', sans-serif !important;
-  font-weight: bold !important;
-  height: 36px !important;
-  letter-spacing: 0.2px !important;
-  line-height: 36px !important;
-  overflow: hidden !important;
-  /* no important on opacity b/c ff does not allow keyframes to override. */
-  opacity: 0;
-  padding: 0 10px !important;
-  position: absolute !important;
-  text-align: center !important;
-  text-decoration: none !important;
-  min-width: 120px !important;
-  max-width: calc(100vw - 64px);
-}
-
-amp-story-page[active] .i-amphtml-story-ad-link {
-  animation-delay: 100ms !important;
-  animation-duration: 300ms !important;
-  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !important;
-  animation-fill-mode: forwards !important;
-  animation-name: ad-cta !important;
-}
-
-@keyframes ad-cta {
-  from {
-    opacity: 0;
-    transform: scale(0);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 .i-amphtml-glass-pane {
   height: 100% !important;
   width: 100% !important;
   z-index: 1 !important;
 }
 
+amp-story-page[xdomain-ad] .i-amphtml-glass-pane {
+  height: 80% !important;
+}
+
+amp-story-page amp-ad iframe {
+  width: 100%;
+  height: 100%;
+}
+
 /* TODO(ccordry): refactor centering logic in amp-ad.css and remove this hack.  */
-amp-story-page amp-ad[data-a4a-upgrade-type="amp-ad-network-doubleclick-impl"] > iframe,
-amp-story-page amp-ad[type="adsense"] > iframe {
+amp-story-page amp-ad[data-a4a-upgrade-type='amp-ad-network-doubleclick-impl'],
+amp-story-page amp-ad[type='adsense'] {
   top: 0 !important;
   left: 0 !important;
   transform: translate(0) !important;
 }
 
 /* TODO(ccordry) allow advertisers to opt-in to fullscreen ads. */
-.i-amphtml-story-desktop-fullbleed .i-amphtml-story-grid-template-fill > amp-ad > iframe {
+.i-amphtml-story-desktop-fullbleed
+  .i-amphtml-story-grid-template-fill
+  > amp-ad {
   left: 50% !important;
   right: auto !important;
   margin: auto !important;
   min-height: 75vh !important;
   max-height: 75vh !important;
-  min-width: calc(3/5 * 75vh) !important;
-  max-width: calc(3/5 * 75vh) !important;
+  min-width: calc(3 / 5 * 75vh) !important;
+  max-width: calc(3 / 5 * 75vh) !important;
   transform: translateX(-50%) !important;
 }
diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js
index 9733ed18686f0..ccfca71c82d38 100644
--- a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js
+++ b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js
@@ -14,15 +14,19 @@
  * limitations under the License.
  */
 
+import {
+  AdvanceExpToTime,
+  StoryAdAutoAdvance,
+  divertStoryAdAutoAdvance,
+} from '../../../src/experiments/story-ad-auto-advance';
 import {
   AnalyticsEvents,
   AnalyticsVars,
   STORY_AD_ANALYTICS,
   StoryAdAnalytics,
 } from './story-ad-analytics';
-import {ButtonTextFitter} from './story-ad-button-text-fitter';
 import {CSS} from '../../../build/amp-story-auto-ads-0.1.css';
-import {CommonSignals} from '../../../src/common-signals';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
 import {EventType, dispatch} from '../../amp-story/1.0/events';
 import {Services} from '../../../src/services';
 import {
@@ -30,20 +34,19 @@ import {
   UIType,
 } from '../../amp-story/1.0/amp-story-store-service';
 import {StoryAdConfig} from './story-ad-config';
-import {StoryAdLocalization} from './story-ad-localization';
-import {StoryAdPage} from './story-ad-page';
+import {StoryAdPageManager} from './story-ad-page-manager';
 import {CSS as adBadgeCSS} from '../../../build/amp-story-auto-ads-ad-badge-0.1.css';
 import {createShadowRootWithStyle} from '../../amp-story/1.0/utils';
 import {dev, devAssert, userAssert} from '../../../src/log';
-import {dict, hasOwn} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
+import {divertStoryAdPlacements} from '../../../src/experiments/story-ad-placements';
+import {getExperimentBranch} from '../../../src/experiments';
+import {getPlacementAlgo} from './algorithm-utils';
 import {getServicePromiseForDoc} from '../../../src/service';
-import {lastItem} from '../../../src/utils/array';
-
-/** @const {number} */
-const FIRST_AD_MIN = 7;
-
-/** @const {number} */
-const MIN_INTERVAL = 7;
+import {CSS as progessBarCSS} from '../../../build/amp-story-auto-ads-progress-bar-0.1.css';
+import {setStyle} from '../../../src/style';
+import {CSS as sharedCSS} from '../../../build/amp-story-auto-ads-shared-0.1.css';
+import {toggleAttribute} from '../../../src/dom';
 
 /** @const {string} */
 const TAG = 'amp-story-auto-ads';
@@ -59,14 +62,7 @@ export const Attributes = {
   AD_SHOWING: 'ad-showing',
   DESKTOP_PANELS: 'desktop-panels',
   DIR: 'dir',
-  NEXT_PAGE_NO_AD: 'next-page-no-ad',
-};
-
-/** @enum {number} */
-const AD_STATE = {
-  PENDING: 0,
-  INSERTED: 1,
-  FAILED: 2,
+  PAUSED: 'paused',
 };
 
 export class AmpStoryAutoAds extends AMP.BaseElement {
@@ -80,22 +76,7 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
     /** @private {?../../amp-story/1.0/amp-story.AmpStory} */
     this.ampStory_ = null;
 
-    /** @private {number} */
-    this.uniquePagesCount_ = 0;
-
-    /** @private {!Object<string, boolean>} */
-    this.uniquePageIds_ = dict({});
-
-    /** @private {!Array<StoryAdPage>} */
-    this.adPages_ = [];
-
-    /** @private {number} */
-    this.adsPlaced_ = 0;
-
-    /** @private {number} */
-    this.adPagesCreated_ = 0;
-
-    /** @private {?StoryAdPage}} */
+    /** @private {?StoryAdPage} */
     this.visibleAdPage_ = null;
 
     /** @private {!JsonObject} */
@@ -104,39 +85,20 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
     /** @private {?Promise} */
     this.analytics_ = null;
 
-    /** @private {Object<string, number>} */
-    this.adPageIds_ = {};
-
-    /** @private {number|null} */
-    this.idOfAdShowing_ = null;
-
-    /** @private {boolean} */
-    this.firstAdViewed_ = false;
-
-    /** @private {boolean} */
-    this.pendingAdView_ = false;
-
     /** @private {?Element} */
     this.adBadgeContainer_ = null;
 
-    /**
-     * Version of the story store service depends on which version of amp-story
-     * the publisher is loading. They all have the same implementation.
-     * @private {?../../amp-story/0.1/amp-story-store-service.AmpStoryStoreService|?../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService}
-     */
-    this.storeService_ = null;
-
-    /** @private {!./story-ad-localization.StoryAdLocalization} */
-    this.localizationService_ = new StoryAdLocalization(this.element);
+    /** @private {?Element} */
+    this.progressBarBackground_ = null;
 
-    /** @private {boolean} */
-    this.hasForcedRender_ = false;
+    /** @private {?../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */
+    this.storeService_ = null;
 
-    /** @private {boolean} */
-    this.tryingToPlace_ = false;
+    /** @private {?StoryAdPlacementAlgorithm} */
+    this.placementAlgorithm_ = null;
 
-    /** @private {?./story-ad-button-text-fitter.ButtonTextFitter} */
-    this.buttonFitter_ = null;
+    /** @private {?StoryAdPageManager} */
+    this.adPageManager_ = null;
   }
 
   /** @override */
@@ -159,9 +121,6 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
         const ampdoc = this.getAmpDoc();
         const extensionService = Services.extensionsFor(this.win);
         extensionService./*OK*/ installExtensionForDoc(ampdoc, AD_TAG);
-
-        this.buttonFitter_ = new ButtonTextFitter(ampdoc);
-
         return ampStoryElement.getImpl().then((impl) => {
           this.ampStory_ = impl;
         });
@@ -179,46 +138,61 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
     if (!this.isAutomaticAdInsertionAllowed_()) {
       return Promise.resolve();
     }
-
     return this.ampStory_
       .signals()
       .whenSignal(CommonSignals.INI_LOAD)
       .then(() => {
         this.handleConfig_();
+        this.adPageManager_ = new StoryAdPageManager(
+          this.ampStory_,
+          this.config_
+        );
+        divertStoryAdPlacements(this.win);
+        divertStoryAdAutoAdvance(this.win);
+        this.placementAlgorithm_ = getPlacementAlgo(
+          this.win,
+          this.storeService_,
+          this.adPageManager_
+        );
+        // Bail out early on short stories.
+        if (!this.placementAlgorithm_.isStoryEligible()) {
+          return;
+        }
         this.analytics_ = getServicePromiseForDoc(
           this.element,
           STORY_AD_ANALYTICS
         );
         this.createAdOverlay_();
+        this.maybeCreateProgressBar_();
         this.initializeListeners_();
-        this.schedulePage_();
+        this.initializePages_();
       });
   }
 
   /**
    * Force an immediate ad placement without waiting for ad being loaded,
    * and then navigate to the ad page.
-   * @param {string=} pageBeforeAdId
-   * @visibleForTesting
+   * @param {!StoryAdPage} adPage
    */
-  forcePlaceAdAfterPage(pageBeforeAdId) {
-    const pageBeforeId =
-      pageBeforeAdId ||
-      /** @type {string} */ (this.storeService_.get(
-        StateProperty.CURRENT_PAGE_ID
-      ));
-    this.tryToPlaceAdAfterPage_(pageBeforeId);
-    this.navigateToFirstAdPage_();
-    this.hasForcedRender_ = true;
+  forcePlaceAdAfterPage_(adPage) {
+    const pageBeforeAdId = /** @type {string} */ (
+      this.storeService_.get(StateProperty.CURRENT_PAGE_ID)
+    );
+    adPage.registerLoadCallback(() =>
+      this.adPageManager_
+        .maybeInsertPageAfter(pageBeforeAdId, adPage)
+        .then(() => this.navigateToFirstAdPage_(adPage))
+    );
   }
 
   /**
    * Fires event to navigate to ad page once inserted into the story.
+   * @param {!StoryAdPage} adPage
    */
-  navigateToFirstAdPage_() {
-    const lastPageElement = lastItem(this.adPages_).getPageElement();
+  navigateToFirstAdPage_(adPage) {
+    const firstAdPageElement = adPage.getPageElement();
     // Setting distance manually to avoid flash of next page.
-    lastPageElement.setAttribute('distance', '1');
+    firstAdPageElement.setAttribute('distance', '1');
     const payload = dict({
       'targetPageId': 'i-amphtml-ad-page-1',
       'direction': 'next',
@@ -226,7 +200,7 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
     const eventInit = {bubbles: true};
     dispatch(
       this.win,
-      lastPageElement,
+      firstAdPageElement,
       EventType.SWITCH_PAGE,
       payload,
       eventInit
@@ -242,7 +216,8 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
     if (this.config_['type'] === 'custom') {
       Services.extensionsFor(this.win)./*OK*/ installExtensionForDoc(
         this.element.getAmpDoc(),
-        MUSTACHE_TAG
+        MUSTACHE_TAG,
+        'latest'
       );
     }
   }
@@ -254,25 +229,7 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
    * @private
    */
   isAutomaticAdInsertionAllowed_() {
-    return (
-      !!this.storeService_.get(StateProperty.CAN_INSERT_AUTOMATIC_AD) &&
-      this.enoughPagesLeftInStory_(0) // Beginning of story.
-    );
-  }
-
-  /**
-   * Determine if enough pages in the story are left for ad placement to be
-   * possible.
-   * TODO(ccordry): also use this on subsequent ad requests.
-   * @param {number} pageIndex
-   * @return {boolean}
-   * @private
-   */
-  enoughPagesLeftInStory_(pageIndex) {
-    return (
-      this.storeService_.get(StateProperty.PAGE_IDS).length - pageIndex >
-      MIN_INTERVAL
-    );
+    return !!this.storeService_.get(StateProperty.CAN_INSERT_AUTOMATIC_AD);
   }
 
   /**
@@ -319,9 +276,17 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
    */
   onAdStateUpdate_(isAd) {
     this.mutateElement(() => {
-      isAd
-        ? this.adBadgeContainer_.setAttribute(Attributes.AD_SHOWING, '')
-        : this.adBadgeContainer_.removeAttribute(Attributes.AD_SHOWING);
+      if (isAd) {
+        this.adBadgeContainer_.setAttribute(Attributes.AD_SHOWING, '');
+        // TODO(#33969) can no longer be null when launched.
+        this.progressBarBackground_ &&
+          this.progressBarBackground_.setAttribute(Attributes.AD_SHOWING, '');
+      } else {
+        this.adBadgeContainer_.removeAttribute(Attributes.AD_SHOWING);
+        // TODO(#33969) can no longer be null when launched.
+        this.progressBarBackground_ &&
+          this.progressBarBackground_.removeAttribute(Attributes.AD_SHOWING);
+      }
     });
   }
 
@@ -347,24 +312,17 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
   onUIStateUpdate_(uiState) {
     this.mutateElement(() => {
       const {DESKTOP_PANELS} = Attributes;
-      const root = this.adBadgeContainer_;
-
-      root.removeAttribute(DESKTOP_PANELS);
+      this.adBadgeContainer_.removeAttribute(DESKTOP_PANELS);
+      // TODO(#33969) can no longer be null when launched.
+      this.progressBarBackground_?.removeAttribute(DESKTOP_PANELS);
 
       if (uiState === UIType.DESKTOP_PANELS) {
-        root.setAttribute(DESKTOP_PANELS, '');
+        this.adBadgeContainer_.setAttribute(DESKTOP_PANELS, '');
+        this.progressBarBackground_?.setAttribute(DESKTOP_PANELS, '');
       }
     });
   }
 
-  /**
-   * @visibleForTesting
-   * @return {Element}
-   */
-  getAdBadgeRoot() {
-    return this.adBadgeContainer_;
-  }
-
   /**
    * Create a hidden UI that will be shown when ad is displayed
    * @private
@@ -376,9 +334,8 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
     this.adBadgeContainer_ = this.doc_.createElement('aside');
     this.adBadgeContainer_.className = 'i-amphtml-ad-overlay-container';
 
-    const badge = this.doc_.createElement('p');
+    const badge = this.doc_.createElement('div');
     badge.className = 'i-amphtml-story-ad-badge';
-    badge.textContent = 'Ad';
 
     this.adBadgeContainer_.appendChild(badge);
     createShadowRootWithStyle(root, this.adBadgeContainer_, adBadgeCSS);
@@ -386,134 +343,150 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
   }
 
   /**
-   * Create new page containing ad and start preloading.
-   * @private
+   * Create progress bar if auto advance exp is on.
    */
-  schedulePage_() {
-    const index = ++this.adPagesCreated_;
-    const page = new StoryAdPage(
-      this.getAmpDoc(),
-      this.config_,
-      index,
-      this.localizationService_,
-      devAssert(this.buttonFitter_),
-      devAssert(this.storeService_)
+  maybeCreateProgressBar_() {
+    const autoAdvanceExpBranch = getExperimentBranch(
+      this.win,
+      StoryAdAutoAdvance.ID
+    );
+    // TODO(ccordry): move to experiment id when viewer is able to share.
+    const storyNextUpParam = Services.viewerForDoc(this.element).getParam(
+      'storyNextUp'
     );
+    if (
+      autoAdvanceExpBranch &&
+      autoAdvanceExpBranch !== StoryAdAutoAdvance.CONTROL
+    ) {
+      this.createProgressBar_(AdvanceExpToTime[autoAdvanceExpBranch]);
+    } else if (storyNextUpParam) {
+      this.createProgressBar_(storyNextUpParam);
+    }
+  }
 
-    this.maybeForceAdPlacement_(page);
+  /**
+   * Create progress bar that will be shown when ad is advancing.
+   * @param {string} time
+   */
+  createProgressBar_(time) {
+    const progressBar = this.doc_.createElement('div');
+    progressBar.className = 'i-amphtml-story-ad-progress-bar';
+    setStyle(progressBar, 'animationDuration', time);
 
-    const pageElement = page.build();
-    this.adPages_.push(page);
+    this.progressBarBackground_ = this.doc_.createElement('div');
+    this.progressBarBackground_.className =
+      'i-amphtml-story-ad-progress-background';
 
-    // Keep track of ids created so far and a mapping to their index. This
-    // is used to check if a page id is an ad later.
-    this.adPageIds_[page.getId()] = index;
+    const host = this.doc_.createElement('div');
+    host.className = 'i-amphtml-story-ad-progress-bar-host';
 
-    this.ampStory_.element.appendChild(pageElement);
+    this.progressBarBackground_.appendChild(progressBar);
+    createShadowRootWithStyle(host, this.progressBarBackground_, progessBarCSS);
+    this.ampStory_.element.appendChild(host);
 
-    pageElement.getImpl().then((impl) => {
-      this.ampStory_.addPage(impl);
+    // TODO(#33969) move this to init listeners when no longer conditional.
+    this.storeService_.subscribe(StateProperty.PAUSED_STATE, (isPaused) => {
+      this.onPauseStateUpdate_(isPaused);
     });
   }
 
+  /**
+   * If video is paused and ad is showing pause the progress bar.
+   * @param {boolean} isPaused
+   */
+  onPauseStateUpdate_(isPaused) {
+    const adShowing = this.storeService_.get(StateProperty.AD_STATE);
+    if (!adShowing) {
+      return;
+    }
+
+    toggleAttribute(this.progressBarBackground_, Attributes.PAUSED, isPaused);
+  }
+
+  /**
+   * Create new page containing ad and start preloading.
+   * @private
+   */
+  initializePages_() {
+    const pages = this.placementAlgorithm_.initializePages();
+    this.maybeForceAdPlacement_(devAssert(pages[0]));
+  }
+
   /**
    * Development mode forces navigation to ad page for better dev-x.
-   * Only do this once to prevent an infinite view->request->navigate loop.
-   * @param {StoryAdPage} page
+   * @param {StoryAdPage} adPage
    */
-  maybeForceAdPlacement_(page) {
+  maybeForceAdPlacement_(adPage) {
     if (
       this.element.hasAttribute('development') &&
-      this.config_['type'] === 'fake' &&
-      !this.hasForcedRender_
+      this.config_['type'] === 'fake'
     ) {
-      page.registerLoadCallback(() => this.forcePlaceAdAfterPage());
+      this.forcePlaceAdAfterPage_(adPage);
     }
   }
 
   /**
-   * @param {number} pageIndex
+   * Respond to page navigation event. This method is not called for the first
+   * page that is shown on load.
+   * @param {number} pageIndex Does not update when ad is showing.
    * @param {string} pageId
    * @private
    */
   handleActivePageChange_(pageIndex, pageId) {
-    if (!hasOwn(this.uniquePageIds_, pageId)) {
-      this.uniquePagesCount_++;
-      this.uniquePageIds_[pageId] = true;
-    }
-
-    if (this.adPagesCreated_ === 0) {
+    if (this.adPageManager_.numberOfAdsCreated() === 0) {
       // This is protection against us running our placement algorithm in a
       // story where no ads have been created. Most likely because INI_LOAD on
-      // the story has not fired yet.
+      // the story has not fired yet but we still are receiving page changes.
       return;
     }
 
-    if (this.idOfAdShowing_) {
-      // We are transitioning away from an ad
-      this.removeVisibleAttribute_();
-      // Fire the exit event.
-      this.analyticsEvent_(AnalyticsEvents.AD_EXITED, {
-        [AnalyticsVars.AD_EXITED]: Date.now(),
-        [AnalyticsVars.AD_INDEX]: this.idOfAdShowing_,
-      });
-      this.idOfAdShowing_ = null;
-    }
+    this.placementAlgorithm_.onPageChange(pageId);
 
-    if (this.adPageIds_[pageId]) {
-      // We are switching to an ad.
-      const adIndex = this.adPageIds_[pageId];
-      const adPage = this.adPages_[adIndex - 1];
+    if (this.visibleAdPage_) {
+      this.transitionFromAdShowing_();
+    }
 
-      if (!adPage.hasBeenViewed()) {
-        this.pendingAdView_ = false;
-        this.resetPageCount_();
-        if (this.enoughPagesLeftInStory_(pageIndex)) {
-          this.startNextAdPage_();
-        }
-      }
+    if (this.adPageManager_.hasId(pageId)) {
+      this.transitionToAdShowing_(pageIndex, pageId);
+    }
+  }
 
-      // Tell the iframe that it is visible.
-      this.setVisibleAttribute_(adPage);
+  /**
+   * Called when switching away from an ad.
+   */
+  transitionFromAdShowing_() {
+    // We are transitioning away from an ad
+    const adPageId = this.visibleAdPage_.getId();
+    const adIndex = this.adPageManager_.getIndexById(adPageId);
+    this.removeVisibleAttribute_();
+    // Fire the exit event.
+    this.analyticsEvent_(AnalyticsEvents.AD_EXITED, {
+      [AnalyticsVars.AD_EXITED]: Date.now(),
+      [AnalyticsVars.AD_INDEX]: adIndex,
+    });
+  }
 
-      // Fire the view event on the corresponding Ad.
-      this.analyticsEvent_(AnalyticsEvents.AD_VIEWED, {
-        [AnalyticsVars.AD_VIEWED]: Date.now(),
-        [AnalyticsVars.AD_INDEX]: adIndex,
-      });
+  /**
+   * We are switching to an ad.
+   * @param {number} pageIndex
+   * @param {string} adPageId
+   */
+  transitionToAdShowing_(pageIndex, adPageId) {
+    const adPage = this.adPageManager_.getAdPageById(adPageId);
+    const adIndex = this.adPageManager_.getIndexById(adPageId);
 
-      // Keeping track of this here so that we can contain the logic for when
-      // we exit the ad within this extension.
-      this.idOfAdShowing_ = adIndex;
+    if (!adPage.hasBeenViewed()) {
+      this.placementAlgorithm_.onNewAdView(pageIndex);
     }
 
-    // If there is already an ad inserted, but not viewed it doesn't matter how
-    // many pages we have seen, we should not keep trying to insert more ads.
-    if (
-      !this.pendingAdView_ &&
-      this.enoughContentPagesViewed_() &&
-      !this.tryingToPlace_
-    ) {
-      this.tryToPlaceAdAfterPage_(pageId).then((adState) => {
-        this.tryingToPlace_ = false;
-
-        if (adState === AD_STATE.INSERTED) {
-          this.analyticsEventWithCurrentAd_(AnalyticsEvents.AD_INSERTED, {
-            [AnalyticsVars.AD_INSERTED]: Date.now(),
-          });
-          this.adsPlaced_++;
-          // We have an ad inserted that has yet to be viewed.
-          this.pendingAdView_ = true;
-        }
+    // Tell the iframe that it is visible.
+    this.setVisibleAttribute_(adPage);
 
-        if (adState === AD_STATE.FAILED) {
-          this.analyticsEventWithCurrentAd_(AnalyticsEvents.AD_DISCARDED, {
-            [AnalyticsVars.AD_DISCARDED]: Date.now(),
-          });
-          this.startNextAdPage_();
-        }
-      });
-    }
+    // Fire the view event on the corresponding Ad.
+    this.analyticsEvent_(AnalyticsEvents.AD_VIEWED, {
+      [AnalyticsVars.AD_VIEWED]: Date.now(),
+      [AnalyticsVars.AD_INDEX]: adIndex,
+    });
   }
 
   /**
@@ -540,152 +513,6 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
     });
   }
 
-  /**
-   * Determine if user has seen enough pages to show an ad. We want a certain
-   * number of pages before the first ad, and then a separate interval
-   * thereafter.
-   * @return {boolean}
-   * @private
-   */
-  enoughContentPagesViewed_() {
-    // In desktop we have to insert ads two pages away, because the next page is
-    // already visible. This adjustment ensures the ads show in the same place
-    // on mobile and desktop.
-    const adjustedInterval = this.isDesktopView_
-      ? MIN_INTERVAL - 1
-      : MIN_INTERVAL;
-    const adjustedFirst = this.isDesktopView_ ? FIRST_AD_MIN - 1 : FIRST_AD_MIN;
-
-    if (this.firstAdViewed_ && this.uniquePagesCount_ >= adjustedInterval) {
-      return true;
-    }
-
-    if (!this.firstAdViewed_ && this.uniquePagesCount_ >= adjustedFirst) {
-      return true;
-    }
-
-    return false;
-  }
-
-  /**
-   * Start the process over.
-   * @private
-   */
-  startNextAdPage_() {
-    if (!this.firstAdViewed_) {
-      this.firstAdViewed_ = true;
-    }
-    this.schedulePage_();
-  }
-
-  /**
-   * Reset the counter that tracks when to place ads.
-   * @private
-   */
-  resetPageCount_() {
-    this.uniquePagesCount_ = 0;
-  }
-
-  /**
-   * Place ad based on user config
-   * @param {string} pageBeforeAdId
-   * @return {Promise<AD_STATE>}
-   * @private
-   */
-  tryToPlaceAdAfterPage_(pageBeforeAdId) {
-    this.tryingToPlace_ = true;
-
-    return Promise.resolve().then(() => {
-      const nextAdPage = lastItem(this.adPages_);
-      if (!nextAdPage.isLoaded() && nextAdPage.hasTimedOut()) {
-        // Timeout fail.
-        return AD_STATE.FAILED;
-      }
-
-      let pageBeforeAd = this.ampStory_.getPageById(pageBeforeAdId);
-      let pageAfterAd = this.ampStory_.getNextPage(pageBeforeAd);
-
-      if (!pageAfterAd) {
-        return AD_STATE.PENDING;
-      }
-
-      if (this.isDesktopView_()) {
-        // If we are in desktop view the ad must be inserted 2 pages away because
-        // the next page will already be in view
-        pageBeforeAd = pageAfterAd;
-        pageBeforeAdId = pageAfterAd.element.id;
-        pageAfterAd = this.ampStory_.getNextPage(pageAfterAd);
-      }
-
-      if (!pageAfterAd) {
-        return AD_STATE.PENDING;
-      }
-
-      // There are three checks here that we check before inserting an ad. If
-      // any of these fail we will try again on next page navigation.
-      if (
-        !nextAdPage.isLoaded() || // 1. Ad must be loaded.
-        // 2. Pubs can opt out of ad placement using 'next-page-no-ad' attribute
-        this.nextPageNoAd_(pageBeforeAd) ||
-        // 3. We will not show two ads in a row.
-        pageBeforeAd.isAd() ||
-        pageAfterAd.isAd()
-      ) {
-        return AD_STATE.PENDING;
-      }
-
-      return nextAdPage.maybeCreateCta().then((ctaCreated) => {
-        if (!ctaCreated) {
-          // Failed on outlink creation.
-          return AD_STATE.FAILED;
-        }
-
-        const nextAdPageId = nextAdPage.getId();
-        this.ampStory_.insertPage(pageBeforeAdId, nextAdPageId);
-
-        // If we are inserted we now have a `position` macro available for any
-        // analytics events moving forward.
-        const adIndex = this.adPageIds_[nextAdPageId];
-        const pageNumber = this.ampStory_.getPageIndexById(pageBeforeAdId);
-        this.analytics_.then((analytics) =>
-          analytics.setVar(adIndex, AnalyticsVars.POSITION, pageNumber + 1)
-        );
-
-        return AD_STATE.INSERTED;
-      });
-    });
-  }
-
-  /**
-   * @private
-   * @return {boolean}
-   */
-  isDesktopView_() {
-    return !!this.storeService_.get(StateProperty.DESKTOP_STATE);
-  }
-
-  /**
-   * Users may put an 'next-page-no-ad' attribute on their pages to prevent ads
-   * from showing as the next page.
-   * @param {?../../amp-story/1.0/amp-story-page.AmpStoryPage} page
-   * @return {boolean}
-   * @private
-   */
-  nextPageNoAd_(page) {
-    return page.element.hasAttribute(Attributes.NEXT_PAGE_NO_AD);
-  }
-
-  /**
-   * Call an analytics event with the last created Ad.
-   * @param {string} eventType
-   * @param {!Object<string, number>} vars A map of vars and their values.
-   * @private
-   */
-  analyticsEventWithCurrentAd_(eventType, vars) {
-    Object.assign(vars, {[AnalyticsVars.AD_INDEX]: this.adPagesCreated_});
-    this.analyticsEvent_(eventType, vars);
-  }
-
   /**
    * Construct an analytics event and trigger it.
    * @param {string} eventType
@@ -700,6 +527,6 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
 }
 
 AMP.extension('amp-story-auto-ads', '0.1', (AMP) => {
-  AMP.registerElement('amp-story-auto-ads', AmpStoryAutoAds, CSS);
+  AMP.registerElement('amp-story-auto-ads', AmpStoryAutoAds, CSS + sharedCSS);
   AMP.registerServiceForDoc(STORY_AD_ANALYTICS, StoryAdAnalytics);
 });
diff --git a/extensions/amp-story-auto-ads/0.1/story-ad-analytics.js b/extensions/amp-story-auto-ads/0.1/story-ad-analytics.js
index 38cdbfd20cd8b..73b6f1459b628 100644
--- a/extensions/amp-story-auto-ads/0.1/story-ad-analytics.js
+++ b/extensions/amp-story-auto-ads/0.1/story-ad-analytics.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getUniqueId} from './utils';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
 
@@ -27,6 +27,7 @@ export const AnalyticsEvents = {
   AD_LOADED: 'story-ad-load',
   AD_INSERTED: 'story-ad-insert',
   AD_VIEWED: 'story-ad-view',
+  AD_SWIPED: 'story-ad-swipe',
   AD_CLICKED: 'story-ad-click',
   AD_EXITED: 'story-ad-exit',
   AD_DISCARDED: 'story-ad-discard',
@@ -42,6 +43,8 @@ export const AnalyticsVars = {
   AD_INSERTED: 'insertTime',
   // Timestamp when page becomes active page.
   AD_VIEWED: 'viewTime',
+  // Timestamp when ad page detects swipe event.
+  AD_SWIPED: 'swipeTime',
   // Timestamp when ad is clicked.
   AD_CLICKED: 'clickTime',
   // Timestamp when ad page moves from active => inactive.
diff --git a/extensions/amp-story-auto-ads/0.1/story-ad-config.js b/extensions/amp-story-auto-ads/0.1/story-ad-config.js
index a2ea288d69370..328859e18d097 100644
--- a/extensions/amp-story-auto-ads/0.1/story-ad-config.js
+++ b/extensions/amp-story-auto-ads/0.1/story-ad-config.js
@@ -15,9 +15,8 @@
  */
 
 import {isJsonScriptTag} from '../../../src/dom';
-import {isObject} from '../../../src/types';
-import {parseJson} from '../../../src/json';
-import {startsWith} from '../../../src/string';
+import {isObject} from '../../../src/core/types';
+import {parseJson} from '../../../src/core/types/object/json';
 import {user, userAssert} from '../../../src/log';
 
 /** @const {string} */
@@ -36,6 +35,7 @@ const AllowedAdTypes = {
   'custom': true,
   'doubleclick': true,
   'fake': true,
+  'nws': true,
 };
 
 export class StoryAdConfig {
@@ -103,7 +103,7 @@ export class StoryAdConfig {
     if (type === 'fake') {
       const {id} = this.element_;
       userAssert(
-        id && startsWith(id, 'i-amphtml-demo-'),
+        id && id.startsWith('i-amphtml-demo-'),
         `${TAG} id must start with i-amphtml-demo- to use fake ads`
       );
     }
diff --git a/extensions/amp-story-auto-ads/0.1/story-ad-localization.js b/extensions/amp-story-auto-ads/0.1/story-ad-localization.js
index 803d34e701425..050c82fe645c3 100644
--- a/extensions/amp-story-auto-ads/0.1/story-ad-localization.js
+++ b/extensions/amp-story-auto-ads/0.1/story-ad-localization.js
@@ -21,27 +21,27 @@ import {
 } from '../../../src/localized-strings';
 import {Services} from '../../../src/services';
 import {registerServiceBuilderForDoc} from '../../../src/service';
-import LocalizedStringsAr from './_locales/ar';
-import LocalizedStringsDe from './_locales/de';
-import LocalizedStringsEn from './_locales/en';
-import LocalizedStringsEnGb from './_locales/en-GB';
-import LocalizedStringsEs from './_locales/es';
-import LocalizedStringsEs419 from './_locales/es-419';
-import LocalizedStringsFr from './_locales/fr';
-import LocalizedStringsHi from './_locales/hi';
-import LocalizedStringsId from './_locales/id';
-import LocalizedStringsIt from './_locales/it';
-import LocalizedStringsJa from './_locales/ja';
-import LocalizedStringsKo from './_locales/ko';
-import LocalizedStringsNl from './_locales/nl';
-import LocalizedStringsNo from './_locales/no';
-import LocalizedStringsPtBr from './_locales/pt-BR';
-import LocalizedStringsPtPt from './_locales/pt-PT';
-import LocalizedStringsRu from './_locales/ru';
-import LocalizedStringsTr from './_locales/tr';
-import LocalizedStringsVi from './_locales/vi';
-import LocalizedStringsZhCn from './_locales/zh-CN';
-import LocalizedStringsZhTw from './_locales/zh-TW';
+import LocalizedStringsAr from './_locales/ar.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsDe from './_locales/de.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsEn from './_locales/en.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsEnGb from './_locales/en-GB.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsEs from './_locales/es.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsEs419 from './_locales/es-419.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsFr from './_locales/fr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsHi from './_locales/hi.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsId from './_locales/id.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsIt from './_locales/it.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsJa from './_locales/ja.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsKo from './_locales/ko.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsNl from './_locales/nl.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsNo from './_locales/no.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsPtBr from './_locales/pt-BR.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsPtPt from './_locales/pt-PT.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsRu from './_locales/ru.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsTr from './_locales/tr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsVi from './_locales/vi.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsZhCn from './_locales/zh-CN.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsZhTw from './_locales/zh-TW.json' assert {type: 'json'}; // lgtm[js/syntax-error]
 
 /** @const */
 export const CtaTypes = {
@@ -103,7 +103,7 @@ export class StoryAdLocalization {
 
   /**
    * @param {!../../../src/localized-strings.LocalizedStringId} id
-   * @return {string|null}
+   * @return {?string}
    */
   getLocalizedString(id) {
     if (!this.localizationService_) {
diff --git a/extensions/amp-story-auto-ads/0.1/story-ad-page-manager.js b/extensions/amp-story-auto-ads/0.1/story-ad-page-manager.js
new file mode 100644
index 0000000000000..2aa66c848b870
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/story-ad-page-manager.js
@@ -0,0 +1,289 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {
+  AnalyticsEvents,
+  AnalyticsVars,
+  STORY_AD_ANALYTICS,
+} from './story-ad-analytics';
+import {ButtonTextFitter} from './story-ad-button-text-fitter';
+import {
+  StateProperty,
+  getStoreService,
+} from '../../amp-story/1.0/amp-story-store-service';
+import {StoryAdLocalization} from './story-ad-localization';
+import {StoryAdPage} from './story-ad-page';
+import {devAssert} from '../../../src/log';
+import {findIndex} from '../../../src/core/types/array';
+import {getServicePromiseForDoc} from '../../../src/service';
+
+/** @const {string} */
+const TAG = 'amp-story-auto-ads:page-manager';
+
+/** @enum {number} */
+export const InsertionState = {
+  DELAYED: 0,
+  FAILURE: 1,
+  SUCCESS: 2,
+};
+
+export const NEXT_PAGE_NO_AD_ATTR = 'next-page-no-ad';
+
+/**
+ * Manages creation and retrieval of story ad pages.
+ */
+export class StoryAdPageManager {
+  /**
+   * @param {!../../amp-story/1.0/amp-story.AmpStory} ampStory
+   * @param {!JsonObject} config
+   */
+  constructor(ampStory, config) {
+    /** @private {!../../amp-story/1.0/amp-story.AmpStory} */
+    this.ampStory_ = ampStory;
+
+    /** @private {!JsonObject} */
+    this.config_ = config;
+
+    /*** @private {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc */
+    this.ampdoc_ = ampStory.getAmpDoc();
+
+    /** @private {!Promise<!StoryAdAnalytics>} */
+    this.analytics_ = getServicePromiseForDoc(this.ampdoc_, STORY_AD_ANALYTICS);
+
+    /** @private {!./story-ad-localization.StoryAdLocalization} */
+    this.localizationService_ = new StoryAdLocalization(this.ampStory_.element);
+
+    /** @private {!./story-ad-button-text-fitter.ButtonTextFitter} */
+    this.buttonFitter_ = new ButtonTextFitter(this.ampdoc_);
+
+    /** @private {Object<string, StoryAdPage>} */
+    this.pages_ = {};
+
+    /** @private {!../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} **/
+    this.storeService_ = getStoreService(this.ampdoc_.win);
+
+    /** @private {number} */
+    this.adsConsumed_ = 0;
+
+    /** @private {Array<string>} */
+    this.createdPageIds_ = [];
+  }
+
+  /**
+   * Check if we have any pages left that have not been inserted or discarded.
+   * @return {boolean}
+   */
+  hasUnusedAdPage() {
+    return this.adsConsumed_ < this.createdPageIds_.length;
+  }
+
+  /**
+   * Gets the next ad page that has not yet been inserted or discarded.
+   * @return {!StoryAdPage}
+   */
+  getUnusedAdPage() {
+    const pageId = this.createdPageIds_[this.adsConsumed_];
+    devAssert(pageId, `${TAG} all created ads consumed.`);
+    return this.pages_[pageId];
+  }
+
+  /**
+   * Called when ad has failed or been placed and we should move to next ad.
+   */
+  discardCurrentAd() {
+    this.analyticsEvent_(AnalyticsEvents.AD_DISCARDED, {
+      [AnalyticsVars.AD_INDEX]: this.adsConsumed_,
+      [AnalyticsVars.AD_DISCARDED]: Date.now(),
+    });
+    this.adsConsumed_++;
+  }
+
+  /**
+   * Number of ads created by this manager.
+   * @return {number}
+   */
+  numberOfAdsCreated() {
+    return this.createdPageIds_.length;
+  }
+
+  /**
+   * Creates a StoryAdPage, appends the element to DOM, and adds it to
+   * parent story pages Array.
+   * @return {!StoryAdPage}
+   */
+  createAdPage() {
+    const index = this.createdPageIds_.length + 1;
+    const page = new StoryAdPage(
+      this.ampdoc_,
+      this.config_,
+      index,
+      this.localizationService_,
+      devAssert(this.buttonFitter_),
+      devAssert(this.storeService_)
+    );
+
+    const pageElement = page.build();
+    const pageId = page.getId();
+    this.pages_[pageId] = page;
+    this.createdPageIds_.push(pageId);
+
+    this.ampStory_.element.appendChild(pageElement);
+    pageElement.getImpl().then((impl) => {
+      this.ampStory_.addPage(impl);
+    });
+
+    return page;
+  }
+
+  /**
+   * @param {string} pageId
+   * @return {boolean}
+   */
+  hasId(pageId) {
+    return !!this.pages_[pageId];
+  }
+
+  /**
+   * @param {string} pageId
+   * @return {StoryAdPage}
+   */
+  getAdPageById(pageId) {
+    return this.pages_[pageId];
+  }
+
+  /**
+   * @param {string} pageId
+   * @return {number}
+   */
+  getIndexById(pageId) {
+    return findIndex(this.createdPageIds_, (id) => id === pageId) + 1;
+  }
+
+  /**
+   * Can fail if slot is protected by next-page-no-ad, if there are not enough
+   * pages left in the story for insertion, or the page before or after is an ad.
+   * @param {string} pageBeforeAdId
+   * @param {!StoryAdPage} nextAdPage
+   * @return {!Promise<!InsertionState>}
+   */
+  maybeInsertPageAfter(pageBeforeAdId, nextAdPage) {
+    let pageBeforeAd = this.ampStory_.getPageById(pageBeforeAdId);
+    let pageAfterAd = this.ampStory_.getNextPage(pageBeforeAd);
+    if (!pageAfterAd) {
+      return Promise.resolve(InsertionState.DELAYED);
+    }
+
+    if (this.isDesktopView_()) {
+      // If we are in desktop view the ad must be inserted 2 pages away because
+      // the next page will already be in view
+      pageBeforeAdId = pageAfterAd.element.id;
+      pageBeforeAd = pageAfterAd;
+      pageAfterAd = this.ampStory_.getNextPage(pageAfterAd);
+    }
+
+    if (!pageAfterAd) {
+      return Promise.resolve(InsertionState.DELAYED);
+    }
+
+    // We will not insert an ad in any slot containing `next-page-no-ad` nor
+    // two ads in a row.
+    if (
+      this.nextPageNoAd_(pageBeforeAd) ||
+      pageBeforeAd.isAd() ||
+      pageAfterAd.isAd()
+    ) {
+      return Promise.resolve(InsertionState.DELAYED);
+    }
+
+    return nextAdPage.maybeCreateCta().then((ctaCreated) => {
+      if (!ctaCreated) {
+        this.discardCurrentAd();
+        return InsertionState.FAILURE;
+      }
+      return this.insertIntoParentStory_(nextAdPage, pageBeforeAdId);
+    });
+  }
+
+  /**
+   *
+   * @param {!StoryAdPage} nextAdPage
+   * @param {string} pageBeforeAdId
+   * @return {InsertionState}
+   */
+  insertIntoParentStory_(nextAdPage, pageBeforeAdId) {
+    const nextAdPageId = nextAdPage.getId();
+    this.ampStory_.insertPage(pageBeforeAdId, nextAdPageId);
+
+    // If we are inserted we now have a `position` macro available for any
+    // analytics events moving forward.
+    const adIndex = this.getIndexById(nextAdPageId);
+    const pageNumber = this.ampStory_.getPageIndexById(pageBeforeAdId);
+
+    this.analytics_.then((analytics) =>
+      analytics.setVar(adIndex, AnalyticsVars.POSITION, pageNumber + 1)
+    );
+
+    this.currentAdInserted_();
+    return InsertionState.SUCCESS;
+  }
+
+  /**
+   *
+   */
+  currentAdInserted_() {
+    this.analyticsEvent_(AnalyticsEvents.AD_INSERTED, {
+      [AnalyticsVars.AD_INDEX]: this.adsConsumed_,
+      [AnalyticsVars.AD_INSERTED]: Date.now(),
+    });
+    this.adsConsumed_++;
+  }
+
+  /**
+   * @private
+   * @return {boolean}
+   */
+  isDesktopView_() {
+    return !!this.storeService_.get(StateProperty.DESKTOP_STATE);
+  }
+
+  /**
+   * Users may put an 'next-page-no-ad' attribute on their pages to prevent ads
+   * from showing as the next page.
+   * @param {?../../amp-story/1.0/amp-story-page.AmpStoryPage} page
+   * @return {boolean}
+   * @private
+   */
+  nextPageNoAd_(page) {
+    return page.element.hasAttribute(NEXT_PAGE_NO_AD_ATTR);
+  }
+
+  /**
+   * Construct an analytics event and trigger it.
+   * @param {string} eventType
+   * @param {!Object<string, number>} vars A map of vars and their values.
+   * @private
+   */
+  analyticsEvent_(eventType, vars) {
+    this.analytics_.then((analytics) =>
+      analytics.fireEvent(
+        this.ampStory_.element,
+        vars['adIndex'],
+        eventType,
+        vars
+      )
+    );
+  }
+}
diff --git a/extensions/amp-story-auto-ads/0.1/story-ad-page.js b/extensions/amp-story-auto-ads/0.1/story-ad-page.js
index 1078b5974e88a..5f4d67467be11 100644
--- a/extensions/amp-story-auto-ads/0.1/story-ad-page.js
+++ b/extensions/amp-story-auto-ads/0.1/story-ad-page.js
@@ -13,35 +13,45 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import {
+  A4AVarNames,
+  START_CTA_ANIMATION_ATTR,
+  createCta,
+  getStoryAdMetadataFromDoc,
+  getStoryAdMetadataFromElement,
+  maybeCreateAttribution,
+  validateCtaMetadata,
+} from './story-ad-ui';
+import {
+  AdvanceExpToTime,
+  StoryAdAutoAdvance,
+} from '../../../src/experiments/story-ad-auto-advance';
 import {
   AnalyticsEvents,
   AnalyticsVars,
   STORY_AD_ANALYTICS,
 } from './story-ad-analytics';
-import {CommonSignals} from '../../../src/common-signals';
-import {CtaTypes} from './story-ad-localization';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
+import {Gestures} from '../../../src/gesture';
 import {
   StateProperty,
   UIType,
 } from '../../amp-story/1.0/amp-story-store-service';
+import {SwipeXRecognizer} from '../../../src/gesture-recognizers';
 import {assertConfig} from '../../amp-ad-exit/0.1/config';
-import {assertHttpsUrl} from '../../../src/url';
-import {CSS as attributionCSS} from '../../../build/amp-story-auto-ads-attribution-0.1.css';
 import {
   createElementWithAttributes,
   elementByTag,
   isJsonScriptTag,
-  iterateCursor,
-  openWindowDialog,
   toggleAttribute,
 } from '../../../src/dom';
-import {createShadowRootWithStyle} from '../../amp-story/1.0/utils';
-import {dev, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {getA4AMetaTags, getFrameDoc} from './utils';
+import {dev, devAssert, userAssert} from '../../../src/log';
+import {dict, map} from '../../../src/core/types/object';
+import {getData, listen} from '../../../src/event-helper';
+import {getExperimentBranch} from '../../../src/experiments';
+import {getFrameDoc, localizeCtaText} from './utils';
 import {getServicePromiseForDoc} from '../../../src/service';
-import {parseJson} from '../../../src/json';
+import {parseJson} from '../../../src/core/types/object/json';
 import {setStyle} from '../../../src/style';
 
 /** @const {string} */
@@ -62,20 +72,6 @@ const PageAttributes = {
   IFRAME_BODY_VISIBLE: 'amp-story-visible',
 };
 
-/** @enum {string} */
-const DataAttrs = {
-  CTA_TYPE: 'data-vars-ctatype',
-  CTA_URL: 'data-vars-ctaurl',
-};
-
-/** @enum {string} */
-const A4AVarNames = {
-  ATTRIBUTION_ICON: 'attribution-icon',
-  ATTRIBUTION_URL: 'attribution-url',
-  CTA_TYPE: 'cta-type',
-  CTA_URL: 'cta-url',
-};
-
 export class StoryAdPage {
   /**
    * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
@@ -83,7 +79,7 @@ export class StoryAdPage {
    * @param {number} index
    * @param {!./story-ad-localization.StoryAdLocalization} localization
    * @param {!./story-ad-button-text-fitter.ButtonTextFitter} buttonFitter
-   * @param {!../../amp-story/0.1/amp-story-store-service.AmpStoryStoreService|!../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} storeService
+   * @param {!../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} storeService
    */
   constructor(ampdoc, config, index, localization, buttonFitter, storeService) {
     /** @private @const {!JsonObject} */
@@ -116,21 +112,21 @@ export class StoryAdPage {
     /** @private {?Element} */
     this.adElement_ = null;
 
+    /** @private {?HTMLIFrameElement} */
+    this.adFrame_ = null;
+
     /** @private {?Element} */
     this.adChoicesIcon_ = null;
 
+    /** @private {?Element} */
+    this.ctaAnchor_ = null;
+
     /** @private {?Document} */
     this.adDoc_ = null;
 
-    /** @private {?string} */
-    this.ampAdExitOutlink_ = null;
-
     /** @private {boolean} */
     this.loaded_ = false;
 
-    /** @private @const {!JsonObject} */
-    this.a4aVars_ = dict();
-
     /** @private @const {!Array<Function>} */
     this.loadCallbacks_ = [];
 
@@ -140,8 +136,11 @@ export class StoryAdPage {
     /** @private {boolean} */
     this.viewed_ = false;
 
-    /** @private @const {!../../amp-story/0.1/amp-story-store-service.AmpStoryStoreService|!../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */
+    /** @private @const {!../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */
     this.storeService_ = storeService;
+
+    /** @private {boolean} */
+    this.is3pAdFrame_ = false;
   }
 
   /** @return {?Document} ad document within FIE */
@@ -190,6 +189,9 @@ export class StoryAdPage {
    */
   toggleVisibility() {
     this.viewed_ = true;
+    this.ctaAnchor_ &&
+      toggleAttribute(this.ctaAnchor_, START_CTA_ANIMATION_ATTR);
+
     // TODO(calebcordry): Properly handle visible attribute for custom ads.
     if (this.adDoc_) {
       toggleAttribute(
@@ -225,12 +227,8 @@ export class StoryAdPage {
     this.pageElement_.appendChild(gridLayer);
     this.pageElement_.appendChild(paneGridLayer);
 
-    // Set up listener for ad-loaded event.
-    this.adElement_
-      .signals()
-      // TODO(ccordry): Investigate using a better signal waiting for video loads.
-      .whenSignal(CommonSignals.INI_LOAD)
-      .then(() => this.onAdLoaded_());
+    this.listenForAdLoadSignals_();
+    this.listenForSwipes_();
 
     this.analyticsEvent_(AnalyticsEvents.AD_REQUESTED, {
       [AnalyticsVars.AD_REQUESTED]: Date.now(),
@@ -246,59 +244,64 @@ export class StoryAdPage {
    */
   maybeCreateCta() {
     return Promise.resolve().then(() => {
-      // FIE only. Template ads have no iframe, and we can't access x-domain iframe.
-      if (this.adDoc_) {
-        this.extractA4AVars_();
-        this.readAmpAdExit_();
+      // Inabox story ads control their own CTA creation.
+      if (this.is3pAdFrame_) {
+        return true;
       }
 
-      // If making a CTA layer we need a button name & outlink url.
-      const ctaUrl =
-        this.ampAdExitOutlink_ ||
-        this.a4aVars_[A4AVarNames.CTA_URL] ||
-        this.adElement_.getAttribute(DataAttrs.CTA_URL);
+      const uiMetadata = map();
 
-      const ctaType =
-        this.a4aVars_[A4AVarNames.CTA_TYPE] ||
-        this.adElement_.getAttribute(DataAttrs.CTA_TYPE);
-
-      if (!ctaUrl || !ctaType) {
-        user().error(
-          TAG,
-          'Both CTA Type & CTA Url are required in ad response.'
+      // Template Ads.
+      if (!this.adDoc_) {
+        Object.assign(
+          uiMetadata,
+          getStoryAdMetadataFromElement(devAssert(this.adElement_))
+        );
+      } else {
+        Object.assign(
+          uiMetadata,
+          getStoryAdMetadataFromDoc(this.adDoc_),
+          // TODO(ccordry): Depricate when possible.
+          this.readAmpAdExit_()
         );
-        return false;
       }
 
-      let ctaText;
-      // CTA picked from predefined choices.
-      if (CtaTypes[ctaType]) {
-        const ctaLocalizedStringId = CtaTypes[ctaType];
-        ctaText = this.localizationService_.getLocalizedString(
-          ctaLocalizedStringId
-        );
-      } else {
-        // Custom CTA text - Should already be localized.
-        ctaText = ctaType;
+      if (!validateCtaMetadata(uiMetadata)) {
+        return false;
       }
 
+      uiMetadata[A4AVarNames.CTA_TYPE] =
+        localizeCtaText(
+          uiMetadata[A4AVarNames.CTA_TYPE],
+          this.localizationService_
+        ) || uiMetadata[A4AVarNames.CTA_TYPE];
+
       // Store the cta-type as an accesible var for any further pings.
       this.analytics_.then((analytics) =>
         analytics.setVar(
           this.index_, // adIndex
           AnalyticsVars.CTA_TYPE,
-          ctaText
+          uiMetadata[A4AVarNames.CTA_TYPE]
         )
       );
 
-      try {
-        this.maybeCreateAttribution_();
-      } catch (e) {
-        // Failure due to missing adchoices icon or url.
-        return false;
+      if (
+        (this.adChoicesIcon_ = maybeCreateAttribution(
+          this.win_,
+          uiMetadata,
+          devAssert(this.pageElement_)
+        ))
+      ) {
+        this.storeService_.subscribe(
+          StateProperty.UI_STATE,
+          (uiState) => {
+            this.onUIStateUpdate_(uiState);
+          },
+          true /** callToInitialize */
+        );
       }
 
-      return this.createCtaLayer_(ctaUrl, ctaText);
+      return this.createCtaLayer_(uiMetadata);
     });
   }
 
@@ -314,6 +317,17 @@ export class StoryAdPage {
       'id': this.id_,
     });
 
+    const autoAdvanceExpBranch = getExperimentBranch(
+      this.win_,
+      StoryAdAutoAdvance.ID
+    );
+    if (
+      autoAdvanceExpBranch &&
+      autoAdvanceExpBranch !== StoryAdAutoAdvance.CONTROL
+    ) {
+      attributes['auto-advance-after'] = AdvanceExpToTime[autoAdvanceExpBranch];
+    }
+
     const page = createElementWithAttributes(
       this.doc_,
       'amp-story-page',
@@ -335,6 +349,63 @@ export class StoryAdPage {
     return createElementWithAttributes(this.doc_, 'amp-ad', this.config_);
   }
 
+  /**
+   * Creates listeners to receive signal that ad is ready to be shown
+   * for both FIE & inabox case.
+   * @private
+   */
+  listenForAdLoadSignals_() {
+    // Friendly frame INI_LOAD.
+    this.adElement_
+      .signals()
+      // TODO(ccordry): Investigate using a better signal waiting for video loads.
+      .whenSignal(CommonSignals.INI_LOAD)
+      .then(() => this.onAdLoaded_());
+
+    // Inabox custom event.
+    const removeListener = listen(this.win_, 'message', (e) => {
+      if (getData(e) !== 'amp-story-ad-load') {
+        return;
+      }
+      if (this.getAdFrame_() && e.source === this.adFrame_.contentWindow) {
+        this.is3pAdFrame_ = true;
+        this.pageElement_.setAttribute('xdomain-ad', '');
+        this.onAdLoaded_();
+        removeListener();
+      }
+    });
+  }
+
+  /**
+   * Listen for any horizontal swipes, and fire an analytics event if it happens.
+   */
+  listenForSwipes_() {
+    const gestures = Gestures.get(
+      this.pageElement_,
+      true /* shouldNotPreventDefault */,
+      false /* shouldStopPropogation */
+    );
+    gestures.onGesture(SwipeXRecognizer, () => {
+      this.analyticsEvent_(AnalyticsEvents.AD_SWIPED, {
+        [AnalyticsVars.AD_SWIPED]: Date.now(),
+      });
+      gestures.cleanup();
+    });
+  }
+
+  /**
+   * Returns the iframe containing the creative if it exists.
+   * @return {?HTMLIFrameElement}
+   */
+  getAdFrame_() {
+    if (this.adFrame_) {
+      return this.adFrame_;
+    }
+    return (this.adFrame_ = /** @type {?HTMLIFrameElement} */ (
+      elementByTag(devAssert(this.pageElement_), 'iframe')
+    ));
+  }
+
   /**
    * Things that need to happen after the created ad is "loaded".
    * @private
@@ -343,6 +414,7 @@ export class StoryAdPage {
     // Ensures the video-manager does not follow the autoplay attribute on
     // amp-video tags, which would play the ad in the background before it is
     // displayed.
+    // TODO(ccordry): do we still need this? Its a pain to always stub in tests.
     this.pageElement_.getImpl().then((impl) => impl.delegateVideoAutoplay());
 
     // Remove loading attribute once loaded so that desktop CSS will position
@@ -353,9 +425,10 @@ export class StoryAdPage {
       [AnalyticsVars.AD_LOADED]: Date.now(),
     });
 
-    const adFrame = elementByTag(this.pageElement_, 'iframe');
-    if (adFrame) {
-      this.adDoc_ = getFrameDoc(/** @type {!HTMLIFrameElement} */ (adFrame));
+    if (this.getAdFrame_() && !this.is3pAdFrame_) {
+      this.adDoc_ = getFrameDoc(
+        /** @type {!HTMLIFrameElement} */ (this.adFrame_)
+      );
     }
 
     this.loaded_ = true;
@@ -365,69 +438,29 @@ export class StoryAdPage {
 
   /**
    * Create layer to contain outlink button.
-   * @param {string} ctaUrl
-   * @param {string} ctaText
+   * @param {!./story-ad-ui.StoryAdUIMetadata} uiMetadata
    * @return {Promise<boolean>}
    */
-  createCtaLayer_(ctaUrl, ctaText) {
-    // TODO(ccordry): Move button to shadow root.
-    const a = createElementWithAttributes(
+  createCtaLayer_(uiMetadata) {
+    return createCta(
       this.doc_,
-      'a',
-      dict({
-        'class': 'i-amphtml-story-ad-link',
-        'target': '_blank',
-        'href': ctaUrl,
-      })
-    );
-
-    const fitPromise = this.buttonFitter_.fit(
-      dev().assertElement(this.pageElement_),
-      a, // Container
-      ctaText // Content
-    );
-
-    return fitPromise.then((success) => {
-      if (!success) {
-        user().warn(TAG, 'CTA button text is too long. Ad was discarded.');
-        return false;
+      devAssert(this.buttonFitter_),
+      dev().assertElement(this.pageElement_), // Container.
+      uiMetadata
+    ).then((anchor) => {
+      if (anchor) {
+        this.ctaAnchor_ = anchor;
+        // Click listener so that we can fire `story-ad-click` analytics trigger at
+        // the appropriate time.
+        anchor.addEventListener('click', () => {
+          const vars = {
+            [AnalyticsVars.AD_CLICKED]: Date.now(),
+          };
+          this.analyticsEvent_(AnalyticsEvents.AD_CLICKED, vars);
+        });
+        return true;
       }
-
-      a.href = ctaUrl;
-      a.textContent = ctaText;
-
-      if (a.protocol !== 'https:' && a.protocol !== 'http:') {
-        user().warn(TAG, 'CTA url is not valid. Ad was discarded');
-        return false;
-      }
-
-      // Click listener so that we can fire `story-ad-click` analytics trigger at
-      // the appropriate time.
-      a.addEventListener('click', () => {
-        const vars = {
-          [AnalyticsVars.AD_CLICKED]: Date.now(),
-        };
-        this.analyticsEvent_(AnalyticsEvents.AD_CLICKED, vars);
-      });
-
-      const ctaLayer = this.doc_.createElement('amp-story-cta-layer');
-      ctaLayer.className = 'i-amphtml-cta-container';
-      ctaLayer.appendChild(a);
-      this.pageElement_.appendChild(ctaLayer);
-      return true;
-    });
-  }
-
-  /**
-   * Find all `amp4ads-vars-` prefixed meta tags and store them in single obj.
-   * @private
-   */
-  extractA4AVars_() {
-    const tags = getA4AMetaTags(this.adDoc_);
-    iterateCursor(tags, (tag) => {
-      const name = tag.name.split('amp4ads-vars-')[1];
-      const {content} = tag;
-      this.a4aVars_[name] = content;
+      return false;
     });
   }
 
@@ -440,6 +473,7 @@ export class StoryAdPage {
    * If there are multiple exits present, behavior is unpredictable due to
    * JSON parse.
    * @private
+   * @return {!Object}
    */
   readAmpAdExit_() {
     const ampAdExit = elementByTag(
@@ -460,73 +494,19 @@ export class StoryAdPage {
             'be inside a <script> tag with type="application/json"'
         );
         const config = assertConfig(parseJson(child.textContent));
-        const target = config['targets'][Object.keys(config['targets'])[0]];
-        this.ampAdExitOutlink_ = target['finalUrl'];
+        const target =
+          config['targets'] &&
+          Object.keys(config['targets']) &&
+          config['targets'][Object.keys(config['targets'])[0]];
+        const finalUrl = target && target['finalUrl'];
+        return target ? {[A4AVarNames.CTA_URL]: finalUrl} : {};
       } catch (e) {
         dev().error(TAG, e);
+        return {};
       }
     }
   }
 
-  /**
-   * Create attribution if creative contains the appropriate meta tags.
-   * @private
-   */
-  maybeCreateAttribution_() {
-    const href = this.a4aVars_[A4AVarNames.ATTRIBUTION_URL];
-    const src = this.a4aVars_[A4AVarNames.ATTRIBUTION_ICON];
-
-    // Ad attribution is optional, but need both to render.
-    if (!href && !src) {
-      return;
-    }
-
-    assertHttpsUrl(
-      href,
-      dev().assertElement(this.pageElement_),
-      'amp-story-auto-ads attribution url'
-    );
-
-    assertHttpsUrl(
-      src,
-      dev().assertElement(this.pageElement_),
-      'amp-story-auto-ads attribution icon'
-    );
-
-    const root = createElementWithAttributes(
-      this.doc_,
-      'div',
-      dict({
-        'role': 'button',
-        'class': 'i-amphtml-attribution-host',
-      })
-    );
-
-    this.adChoicesIcon_ = createElementWithAttributes(
-      this.doc_,
-      'img',
-      dict({
-        'class': 'i-amphtml-story-ad-attribution',
-        'src': src,
-      })
-    );
-    this.storeService_.subscribe(
-      StateProperty.UI_STATE,
-      (uiState) => {
-        this.onUIStateUpdate_(uiState);
-      },
-      true /** callToInitialize */
-    );
-
-    this.adChoicesIcon_.addEventListener(
-      'click',
-      this.handleAttributionClick_.bind(this, href)
-    );
-
-    createShadowRootWithStyle(root, this.adChoicesIcon_, attributionCSS);
-    this.pageElement_.appendChild(root);
-  }
-
   /**
    * Reacts to UI state updates and passes the information along as
    * attributes to the shadowed attribution icon.
@@ -544,15 +524,6 @@ export class StoryAdPage {
     );
   }
 
-  /**
-   * @private
-   * @param {string} href
-   * @param {!Event} unusedEvent
-   */
-  handleAttributionClick_(href, unusedEvent) {
-    openWindowDialog(this.win_, href, '_blank');
-  }
-
   /**
    * Construct an analytics event and trigger it.
    * @param {string} eventType
diff --git a/extensions/amp-story-auto-ads/0.1/story-ad-ui.js b/extensions/amp-story-auto-ads/0.1/story-ad-ui.js
new file mode 100644
index 0000000000000..7bf803bdb38c0
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/story-ad-ui.js
@@ -0,0 +1,262 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {assertHttpsUrl} from '../../../src/url';
+import {CSS as attributionCSS} from '../../../build/amp-story-auto-ads-attribution-0.1.css';
+import {
+  createElementWithAttributes,
+  iterateCursor,
+  openWindowDialog,
+} from '../../../src/dom';
+import {createShadowRootWithStyle} from '../../amp-story/1.0/utils';
+import {CSS as ctaButtonCSS} from '../../../build/amp-story-auto-ads-cta-button-0.1.css';
+import {dev, user} from '../../../src/log';
+import {dict, map} from '../../../src/core/types/object';
+
+/**
+ * @typedef {{
+ *  cta-type: ?string,
+ *  cta-url: ?string,
+ *  cta-landing-page-type: ?string,
+ *  attribution-icon: ?string,
+ *  attribution-url: ?string,
+ * }}
+ */
+export let StoryAdUIMetadata;
+
+/** @const {string} */
+const TAG = 'amp-story-auto-ads:ui';
+
+/** @const {string} */
+const CTA_META_PREFIX = 'amp-cta-';
+
+/** @const {string} */
+const A4A_VARS_META_PREFIX = 'amp4ads-vars-';
+
+export const START_CTA_ANIMATION_ATTR = 'cta-active';
+
+/** @enum {string} */
+export const A4AVarNames = {
+  ATTRIBUTION_ICON: 'attribution-icon',
+  ATTRIBUTION_URL: 'attribution-url',
+  CTA_TYPE: 'cta-type',
+  CTA_URL: 'cta-url',
+};
+
+/** @enum {string} */
+const DataAttrs = {
+  CTA_TYPE: 'data-vars-ctatype',
+  CTA_URL: 'data-vars-ctaurl',
+};
+
+/**
+ * Finds all meta tags starting with `amp4ads-vars-` or `amp-cta`.
+ * @param {Document} doc
+ * @return {!IArrayLike}
+ */
+export function getStoryAdMetaTags(doc) {
+  const selector = 'meta[name^=amp4ads-vars-],meta[name^=amp-cta-]';
+  return doc.querySelectorAll(selector);
+}
+
+/**
+ * Creates object containing information extracted from the creative
+ * that is needed to render story ad ui e.g. cta, attribution, etc.
+ * @param {!Document} doc
+ * @return {StoryAdUIMetadata}
+ */
+export function getStoryAdMetadataFromDoc(doc) {
+  const storyMetaTags = getStoryAdMetaTags(doc);
+  const vars = map();
+  iterateCursor(storyMetaTags, (tag) => {
+    const {content, name} = tag;
+    if (name.startsWith(CTA_META_PREFIX)) {
+      const key = name.split('amp-')[1];
+      vars[key] = content;
+    } else if (name.startsWith(A4A_VARS_META_PREFIX)) {
+      const key = name.split(A4A_VARS_META_PREFIX)[1];
+      vars[key] = content;
+    }
+  });
+  return vars;
+}
+
+/**
+ * Gets story ad UI metadata from the <amp-ad> element.
+ * @param {!Element} adElement
+ * @return {!Object}
+ */
+export function getStoryAdMetadataFromElement(adElement) {
+  const ctaUrl = adElement.getAttribute(DataAttrs.CTA_URL);
+  const ctaType = adElement.getAttribute(DataAttrs.CTA_TYPE);
+  return {
+    [A4AVarNames.CTA_TYPE]: ctaType,
+    [A4AVarNames.CTA_URL]: ctaUrl,
+  };
+}
+
+/**
+ * Returns a boolean indicating if there is sufficent metadata to render CTA.
+ * @param {!StoryAdUIMetadata} metadata
+ * @param {boolean=} opt_inabox
+ * @return {boolean}
+ */
+export function validateCtaMetadata(metadata, opt_inabox) {
+  // If making a CTA layer we need a button name & outlink url.
+  if (!metadata[A4AVarNames.CTA_TYPE] || !metadata[A4AVarNames.CTA_URL]) {
+    // Don't polute inabox logs, as we don't know when this is intended to
+    // be a story ad.
+    !opt_inabox &&
+      user().error(TAG, 'Both CTA Type & CTA Url are required in ad response.');
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Creates ad attribution UI if sufficent metadata. Returns element if
+ * successfully created.
+ * @param {!Window} win
+ * @param {!StoryAdUIMetadata} metadata
+ * @param {!Element} container
+ * @return {?Element}
+ */
+export function maybeCreateAttribution(win, metadata, container) {
+  const doc = win.document;
+
+  try {
+    const href = metadata[A4AVarNames.ATTRIBUTION_URL];
+    const src = metadata[A4AVarNames.ATTRIBUTION_ICON];
+
+    // Ad attribution is optional, but need both to render.
+    if (!href || !src) {
+      return null;
+    }
+
+    assertHttpsUrl(
+      href,
+      dev().assertElement(container),
+      'amp-story-auto-ads attribution url'
+    );
+
+    assertHttpsUrl(
+      src,
+      dev().assertElement(container),
+      'amp-story-auto-ads attribution icon'
+    );
+
+    const root = createElementWithAttributes(
+      doc,
+      'div',
+      dict({
+        'role': 'button',
+        'class': 'i-amphtml-attribution-host',
+      })
+    );
+
+    const adChoicesIcon = createElementWithAttributes(
+      doc,
+      'img',
+      dict({
+        'class': 'i-amphtml-story-ad-attribution',
+        'src': src,
+      })
+    );
+
+    adChoicesIcon.addEventListener('click', (unusedEvent) =>
+      handleAttributionClick(win, href)
+    );
+
+    createShadowRootWithStyle(root, adChoicesIcon, attributionCSS);
+    container.appendChild(root);
+
+    return adChoicesIcon;
+  } catch (e) {
+    // If something goes wrong creating the attribution, we still want to
+    // show the ad.
+    return null;
+  }
+}
+
+/**
+ * Opens attribution click in new window.
+ * @param {!Window} win
+ * @param {string} href
+ */
+export function handleAttributionClick(win, href) {
+  openWindowDialog(win, href, '_blank');
+}
+
+/**
+ * @param {!Document} doc
+ * @param {!./story-ad-button-text-fitter.ButtonTextFitter} buttonFitter
+ * @param {!Element} container
+ * @param {!StoryAdUIMetadata} uiMetadata
+ * @return {!Promise<?Element>} If anchor was successfully created.
+ */
+export function createCta(doc, buttonFitter, container, uiMetadata) {
+  const ctaUrl = uiMetadata[A4AVarNames.CTA_URL];
+  const ctaText = uiMetadata[A4AVarNames.CTA_TYPE];
+
+  const a = createElementWithAttributes(
+    doc,
+    'a',
+    dict({
+      'class': 'i-amphtml-story-ad-link',
+      'target': '_blank',
+      'href': ctaUrl,
+    })
+  );
+
+  const fitPromise = buttonFitter.fit(
+    dev().assertElement(container),
+    a, // Container
+    ctaText // Content
+  );
+
+  return fitPromise.then((success) => {
+    if (!success) {
+      user().warn(TAG, 'CTA button text is too long. Ad was discarded.');
+      return null;
+    }
+
+    a.href = ctaUrl;
+    a.textContent = ctaText;
+
+    if (a.protocol !== 'https:' && a.protocol !== 'http:') {
+      user().warn(TAG, 'CTA url is not valid. Ad was discarded');
+      return null;
+    }
+
+    const ctaLayer = doc.createElement('amp-story-cta-layer');
+    ctaLayer.className = 'i-amphtml-cta-container';
+
+    const linkRoot = createElementWithAttributes(
+      doc,
+      'div',
+      dict({
+        'class': 'i-amphtml-story-ad-link-root',
+        'role': 'button',
+      })
+    );
+
+    createShadowRootWithStyle(linkRoot, a, ctaButtonCSS);
+
+    ctaLayer.appendChild(linkRoot);
+    container.appendChild(ctaLayer);
+    return a;
+  });
+}
diff --git a/extensions/amp-story-auto-ads/0.1/test-e2e/test-amp-story-auto-ads-fullbleed.js b/extensions/amp-story-auto-ads/0.1/test-e2e/test-amp-story-auto-ads-fullbleed.js
index 95bc573fa606c..0478ec73e63e3 100644
--- a/extensions/amp-story-auto-ads/0.1/test-e2e/test-amp-story-auto-ads-fullbleed.js
+++ b/extensions/amp-story-auto-ads/0.1/test-e2e/test-amp-story-auto-ads-fullbleed.js
@@ -27,8 +27,7 @@ const viewport = {
 describes.endtoend(
   'amp-story-auto-ads:fullbleed',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-story-auto-ads/fullbleed.html',
+    fixture: 'amp-story-auto-ads/fullbleed.html',
     initialRect: {width: viewport.WIDTH, height: viewport.HEIGHT},
     // TODO(ccordry): re-enable viewer-demo that should handle the 64px
     // offset set by the viewer header.
@@ -89,14 +88,13 @@ async function validateAdOverlay(controller) {
     .to.exist;
 
   const adBadge = await controller.findElement('.i-amphtml-story-ad-badge');
-  await expect(controller.getElementText(adBadge)).to.equal('Ad');
   await expect(controller.getElementCssValue(adBadge, 'visibility')).to.equal(
     'visible'
   );
-  // Design spec is 14px from top, 16px from left.
+  // Design spec is 12px from top, 12px from left.
   await expect(controller.getElementRect(adBadge)).to.include({
-    left: 16,
-    top: 14,
+    left: 12,
+    top: 12,
   });
 
   await controller.switchToLight();
diff --git a/extensions/amp-story-auto-ads/0.1/test-e2e/test-amp-story-auto-ads.js b/extensions/amp-story-auto-ads/0.1/test-e2e/test-amp-story-auto-ads.js
index 93f779715bf7b..d714527531b15 100644
--- a/extensions/amp-story-auto-ads/0.1/test-e2e/test-amp-story-auto-ads.js
+++ b/extensions/amp-story-auto-ads/0.1/test-e2e/test-amp-story-auto-ads.js
@@ -27,8 +27,7 @@ const viewport = {
 describes.endtoend(
   'amp-story-auto-ads:basic',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-story-auto-ads/basic.html',
+    fixture: 'amp-story-auto-ads/basic.html',
     initialRect: {width: viewport.WIDTH, height: viewport.HEIGHT},
     // TODO(ccordry): reenable shadow demo? fails while waiting for
     // .amp-doc-host[style="visibility: visible;"]
@@ -72,8 +71,7 @@ describes.endtoend(
 describes.endtoend(
   'amp-story-auto-ads:dv3',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-story-auto-ads/dv3-request.html',
+    fixture: 'amp-story-auto-ads/dv3-request.html',
     initialRect: {width: viewport.WIDTH, height: viewport.HEIGHT},
     // TODO(ccordry): re-enable viewer-demo that should handle the 64px
     // offset set by the viewer header.
@@ -122,14 +120,13 @@ async function validateAdOverlay(controller) {
     .to.exist;
 
   const adBadge = await controller.findElement('.i-amphtml-story-ad-badge');
-  await expect(controller.getElementText(adBadge)).to.equal('Ad');
   await expect(controller.getElementCssValue(adBadge, 'visibility')).to.equal(
     'visible'
   );
   // Design spec is 14px from top, 16px from left.
   await expect(controller.getElementRect(adBadge)).to.include({
-    left: 16,
-    top: 14,
+    left: 12,
+    top: 12,
   });
 
   await controller.switchToLight();
diff --git a/extensions/amp-story-auto-ads/0.1/test/story-mock.js b/extensions/amp-story-auto-ads/0.1/test/story-mock.js
index 956d2bfc638a1..09b7eb8f0ecf5 100644
--- a/extensions/amp-story-auto-ads/0.1/test/story-mock.js
+++ b/extensions/amp-story-auto-ads/0.1/test/story-mock.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {CommonSignals} from '../../../../src/common-signals';
+import {CommonSignals} from '../../../../src/core/constants/common-signals';
 
 /**
  * Fake story implementation mocking public methods.
diff --git a/extensions/amp-story-auto-ads/0.1/test/test-algorithm-count-pages.js b/extensions/amp-story-auto-ads/0.1/test/test-algorithm-count-pages.js
new file mode 100644
index 0000000000000..e029147e850b2
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/test/test-algorithm-count-pages.js
@@ -0,0 +1,274 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {
+  Action,
+  getStoreService,
+} from '../../../amp-story/1.0/amp-story-store-service';
+import {AmpStory} from '../../../amp-story/1.0/amp-story';
+import {CountPagesAlgorithm} from '../algorithm-count-pages';
+import {InsertionState, StoryAdPageManager} from '../story-ad-page-manager';
+import {macroTask} from '../../../../testing/yield';
+
+describes.realWin('CountPagesAlgorithm', {amp: true}, (env) => {
+  let storeService;
+  let pageManager;
+
+  beforeEach(() => {
+    storeService = getStoreService(env.win);
+    const storyElement = env.win.document.createElement('amp-story');
+    const ampStory = new AmpStory(storyElement);
+    env.sandbox.stub(ampStory, 'getAmpDoc').returns(env.ampdoc);
+    pageManager = new StoryAdPageManager(ampStory, {} /* config */);
+  });
+
+  describe('#isStoryEligible', () => {
+    it('returns false for stories < eight pages', () => {
+      const pageIds = ['1', '2', '3', '4', '5', '6', '7'];
+      storeService.dispatch(Action.SET_PAGE_IDS, pageIds);
+      const algo = new CountPagesAlgorithm(storeService, pageManager);
+      expect(algo.isStoryEligible()).to.be.false;
+    });
+
+    it('returns false for stories >= eight pages', () => {
+      const pageIds = ['1', '2', '3', '4', '5', '6', '7', '8'];
+      storeService.dispatch(Action.SET_PAGE_IDS, pageIds);
+      const algo = new CountPagesAlgorithm(storeService, pageManager);
+      expect(algo.isStoryEligible()).to.be.true;
+    });
+  });
+
+  describe('#initializePages', () => {
+    it('should create a single page upon initialization', () => {
+      const mockPage = {};
+      const createPageStub = env.sandbox
+        .stub(pageManager, 'createAdPage')
+        .returns(mockPage);
+      const algo = new CountPagesAlgorithm(storeService, pageManager);
+      const pages = algo.initializePages();
+      expect(pages[0]).to.equal(mockPage);
+      expect(createPageStub).to.be.calledOnce;
+    });
+  });
+
+  describe('#onPageChange', () => {
+    it('places ad if enough pages seen & ad loaded', () => {
+      env.sandbox.stub(pageManager, 'hasUnusedAdPage').returns(true);
+      env.sandbox
+        .stub(pageManager, 'getUnusedAdPage')
+        .returns({isLoaded: () => true, hasTimedOut: () => false});
+      const insertionStub = env.sandbox
+        .stub(pageManager, 'maybeInsertPageAfter')
+        .resolves(InsertionState.SUCCESS);
+      const algo = new CountPagesAlgorithm(storeService, pageManager);
+      // We do not get page change signal for page one.
+      algo.onPageChange('2');
+      algo.onPageChange('3');
+      algo.onPageChange('4');
+      algo.onPageChange('5');
+      algo.onPageChange('6');
+      expect(insertionStub).not.to.be.called;
+      algo.onPageChange('7');
+      expect(insertionStub).calledOnce;
+    });
+
+    it('does not place if ad is not loaded', () => {
+      env.sandbox.stub(pageManager, 'hasUnusedAdPage').returns(true);
+      env.sandbox
+        .stub(pageManager, 'getUnusedAdPage')
+        .returns({isLoaded: () => false, hasTimedOut: () => false});
+      const insertionStub = env.sandbox
+        .stub(pageManager, 'maybeInsertPageAfter')
+        .resolves();
+      const algo = new CountPagesAlgorithm(storeService, pageManager);
+      // We do not get page change signal for page one.
+      algo.onPageChange('2');
+      algo.onPageChange('3');
+      algo.onPageChange('4');
+      algo.onPageChange('5');
+      algo.onPageChange('6');
+      algo.onPageChange('7');
+      expect(insertionStub).not.to.be.called;
+    });
+
+    it('does not place ad if all ads used', () => {
+      env.sandbox.stub(pageManager, 'hasUnusedAdPage').returns(false);
+      env.sandbox
+        .stub(pageManager, 'getUnusedAdPage')
+        .returns({isLoaded: () => true, hasTimedOut: () => false});
+      const insertionStub = env.sandbox
+        .stub(pageManager, 'maybeInsertPageAfter')
+        .resolves();
+      const algo = new CountPagesAlgorithm(storeService, pageManager);
+      // We do not get page change signal for page one.
+      algo.onPageChange('2');
+      algo.onPageChange('3');
+      algo.onPageChange('4');
+      algo.onPageChange('5');
+      algo.onPageChange('6');
+      algo.onPageChange('7');
+      expect(insertionStub).not.to.be.called;
+    });
+
+    it('does not place ad if ad is loading', () => {
+      env.sandbox.stub(pageManager, 'hasUnusedAdPage').returns(false);
+      env.sandbox
+        .stub(pageManager, 'getUnusedAdPage')
+        .returns({isLoaded: () => false, hasTimedOut: () => false});
+      const insertionStub = env.sandbox
+        .stub(pageManager, 'maybeInsertPageAfter')
+        .resolves();
+      const algo = new CountPagesAlgorithm(storeService, pageManager);
+      // We do not get page change signal for page one.
+      algo.onPageChange('2');
+      algo.onPageChange('3');
+      algo.onPageChange('4');
+      algo.onPageChange('5');
+      algo.onPageChange('6');
+      algo.onPageChange('7');
+      expect(insertionStub).not.to.be.called;
+    });
+
+    it('discards ad on timeout', () => {
+      env.sandbox.stub(pageManager, 'hasUnusedAdPage').returns(true);
+      env.sandbox
+        .stub(pageManager, 'getUnusedAdPage')
+        .returns({isLoaded: () => false, hasTimedOut: () => true});
+      env.sandbox.stub(pageManager, 'maybeInsertPageAfter').resolves();
+      const discardStub = env.sandbox.stub(pageManager, 'discardCurrentAd');
+      const algo = new CountPagesAlgorithm(storeService, pageManager);
+      // We do not get page change signal for page one.
+      algo.onPageChange('2');
+      algo.onPageChange('3');
+      algo.onPageChange('4');
+      algo.onPageChange('5');
+      algo.onPageChange('6');
+      algo.onPageChange('7');
+      expect(discardStub).to.be.called;
+    });
+
+    it('will place another ad after first view and 7 pages seen', async () => {
+      const pageIds = new Array(15).fill(0).map((_, i) => (i + 1).toString());
+      storeService.dispatch(Action.SET_PAGE_IDS, pageIds);
+      env.sandbox.stub(pageManager, 'hasUnusedAdPage').returns(true);
+      env.sandbox
+        .stub(pageManager, 'getUnusedAdPage')
+        .returns({isLoaded: () => true, hasTimedOut: () => false});
+      const insertionStub = env.sandbox
+        .stub(pageManager, 'maybeInsertPageAfter')
+        .resolves(InsertionState.SUCCESS);
+      const createPageStub = env.sandbox.stub(pageManager, 'createAdPage');
+      const algo = new CountPagesAlgorithm(storeService, pageManager);
+      // We do not get page change signal for page one.
+      algo.onPageChange('2');
+      algo.onPageChange('3');
+      algo.onPageChange('4');
+      algo.onPageChange('5');
+      algo.onPageChange('6');
+      expect(insertionStub).not.to.be.called;
+      algo.onPageChange('7');
+      expect(insertionStub).calledOnce;
+      expect(createPageStub).not.to.be.called;
+      await macroTask();
+      algo.onNewAdView(7 /* index */);
+      expect(createPageStub).to.be.called;
+      algo.onPageChange('8');
+      algo.onPageChange('9');
+      algo.onPageChange('10');
+      algo.onPageChange('11');
+      algo.onPageChange('12');
+      algo.onPageChange('13');
+      algo.onPageChange('14');
+      expect(insertionStub).calledTwice;
+    });
+
+    it('does not place another ad if there is a pending ad view', () => {
+      env.sandbox.stub(pageManager, 'hasUnusedAdPage').returns(true);
+      env.sandbox
+        .stub(pageManager, 'getUnusedAdPage')
+        .returns({isLoaded: () => true, hasTimedOut: () => false});
+      const insertionStub = env.sandbox
+        .stub(pageManager, 'maybeInsertPageAfter')
+        .resolves(InsertionState.SUCCESS);
+      const algo = new CountPagesAlgorithm(storeService, pageManager);
+      // We do not get page change signal for page one.
+      algo.onPageChange('2');
+      algo.onPageChange('3');
+      algo.onPageChange('4');
+      algo.onPageChange('5');
+      algo.onPageChange('6');
+      expect(insertionStub).not.to.be.called;
+      algo.onPageChange('7');
+      expect(insertionStub).calledOnce;
+      algo.onPageChange('8');
+      algo.onPageChange('9');
+      algo.onPageChange('10');
+      algo.onPageChange('11');
+      algo.onPageChange('12');
+      algo.onPageChange('13');
+      algo.onPageChange('14');
+      expect(insertionStub).calledOnce;
+    });
+
+    it('does not place another ad if there is a pending insertion', () => {
+      env.sandbox.stub(pageManager, 'hasUnusedAdPage').returns(true);
+      env.sandbox
+        .stub(pageManager, 'getUnusedAdPage')
+        .returns({isLoaded: () => true, hasTimedOut: () => false});
+      const insertionStub = env.sandbox
+        .stub(pageManager, 'maybeInsertPageAfter')
+        .returns(new Promise(() => {}));
+      const algo = new CountPagesAlgorithm(storeService, pageManager);
+      // We do not get page change signal for page one.
+      algo.onPageChange('2');
+      algo.onPageChange('3');
+      algo.onPageChange('4');
+      algo.onPageChange('5');
+      algo.onPageChange('6');
+      expect(insertionStub).not.to.be.called;
+      algo.onPageChange('7');
+      expect(insertionStub).calledOnce;
+      algo.onPageChange('8');
+      algo.onPageChange('9');
+      algo.onPageChange('10');
+      algo.onPageChange('11');
+      algo.onPageChange('12');
+      algo.onPageChange('13');
+      algo.onPageChange('14');
+      expect(insertionStub).calledOnce;
+    });
+  });
+
+  describe('#onNewAdView', () => {
+    it('should call to create next ad if > 7 pages left', () => {
+      const pageIds = ['1', '2', '3', '4', '5', '6', '7', '8'];
+      storeService.dispatch(Action.SET_PAGE_IDS, pageIds);
+      const createPageStub = env.sandbox.stub(pageManager, 'createAdPage');
+      const algo = new CountPagesAlgorithm(storeService, pageManager);
+      algo.onNewAdView(0);
+      expect(createPageStub).to.be.called;
+    });
+
+    it('should not call to create next ad if < 7 pages left', () => {
+      const pageIds = ['1', '2', '3', '4', '5', '6', '7', '8'];
+      storeService.dispatch(Action.SET_PAGE_IDS, pageIds);
+      const createPageStub = env.sandbox.stub(pageManager, 'createAdPage');
+      const algo = new CountPagesAlgorithm(storeService, pageManager);
+      algo.onNewAdView(1);
+      expect(createPageStub).not.to.be.called;
+    });
+  });
+});
diff --git a/extensions/amp-story-auto-ads/0.1/test/test-algorithm-predetermined.js b/extensions/amp-story-auto-ads/0.1/test/test-algorithm-predetermined.js
new file mode 100644
index 0000000000000..1902d6bddc6fa
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/test/test-algorithm-predetermined.js
@@ -0,0 +1,185 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {
+  Action,
+  getStoreService,
+} from '../../../amp-story/1.0/amp-story-store-service';
+import {AmpStory} from '../../../amp-story/1.0/amp-story';
+import {
+  PredeterminedPositionAlgorithm,
+  getAdPositions,
+  getNumberOfAds,
+} from '../algorithm-predetermined';
+import {StoryAdPageManager} from '../story-ad-page-manager';
+import {StoryAdPlacements} from '../../../../src/experiments/story-ad-placements';
+
+describes.realWin('PredeterminedPositionAlgorithm', {amp: true}, (env) => {
+  let storeService;
+  let pageManager;
+
+  beforeEach(() => {
+    storeService = getStoreService(env.win);
+    const storyElement = env.win.document.createElement('amp-story');
+    const ampStory = new AmpStory(storyElement);
+    env.sandbox.stub(ampStory, 'getAmpDoc').returns(env.ampdoc);
+    pageManager = new StoryAdPageManager(ampStory, {} /* config */);
+  });
+
+  describe('PredeterminedPositionAlgorithm implementation', () => {
+    describe('#isStoryEligible', () => {
+      it('returns false for stories < 5 pages', () => {
+        const pageIds = ['1', '2', '3', '4'];
+        storeService.dispatch(Action.SET_PAGE_IDS, pageIds);
+        const algo = new PredeterminedPositionAlgorithm(
+          storeService,
+          pageManager,
+          StoryAdPlacements.PREDETERMINED_EIGHT
+        );
+        expect(algo.isStoryEligible()).to.be.false;
+      });
+
+      it('returns true for stories >= 5 pages', () => {
+        const pageIds = ['1', '2', '3', '4', '5'];
+        storeService.dispatch(Action.SET_PAGE_IDS, pageIds);
+        const algo = new PredeterminedPositionAlgorithm(
+          storeService,
+          pageManager,
+          StoryAdPlacements.PREDETERMINED_EIGHT
+        );
+        expect(algo.isStoryEligible()).to.be.true;
+      });
+    });
+
+    describe('#initializePages', () => {
+      it('should create and insert a single page', () => {
+        const pageIds = ['1', '2', '3', '4', '5', '6', '7', '8'];
+        storeService.dispatch(Action.SET_PAGE_IDS, pageIds);
+        const mockPage = {registerLoadCallback: env.sandbox.stub().callsArg(0)};
+        const createPageStub = env.sandbox
+          .stub(pageManager, 'createAdPage')
+          .returns(mockPage);
+        const insertPageStub = env.sandbox.stub(
+          pageManager,
+          'maybeInsertPageAfter'
+        );
+        const algo = new PredeterminedPositionAlgorithm(
+          storeService,
+          pageManager,
+          StoryAdPlacements.PREDETERMINED_EIGHT
+        );
+        const pages = algo.initializePages();
+        expect(pages[0]).to.equal(mockPage);
+        expect(createPageStub).to.be.calledOnce;
+        expect(insertPageStub).to.be.calledWithExactly('4', mockPage);
+      });
+
+      it('does not create a page when num ads == 0 ', () => {
+        env.sandbox.stub(Math, 'random').returns(6 / 8);
+        const pageIds = ['1', '2', '3', '4', '5'];
+        storeService.dispatch(Action.SET_PAGE_IDS, pageIds);
+        const mockPage = {registerLoadCallback: env.sandbox.stub().callsArg(0)};
+        const createPageStub = env.sandbox
+          .stub(pageManager, 'createAdPage')
+          .returns(mockPage);
+        const insertPageStub = env.sandbox.stub(
+          pageManager,
+          'maybeInsertPageAfter'
+        );
+        const algo = new PredeterminedPositionAlgorithm(
+          storeService,
+          pageManager,
+          StoryAdPlacements.PREDETERMINED_EIGHT
+        );
+        const pages = algo.initializePages();
+        expect(pages[0]).not.to.exist;
+        expect(createPageStub).not.to.be.called;
+        expect(insertPageStub).not.to.be.called;
+      });
+    });
+
+    describe('#onNewAdView', () => {
+      it('should create and insert the next ad page', () => {
+        // ['1' ... '16']
+        const pageIds = new Array(16).fill(0).map((_, i) => (i + 1).toString());
+        storeService.dispatch(Action.SET_PAGE_IDS, pageIds);
+        const mockPage = {registerLoadCallback: env.sandbox.stub().callsArg(0)};
+        const createPageStub = env.sandbox
+          .stub(pageManager, 'createAdPage')
+          .returns(mockPage);
+        const insertPageStub = env.sandbox.stub(
+          pageManager,
+          'maybeInsertPageAfter'
+        );
+        const algo = new PredeterminedPositionAlgorithm(
+          storeService,
+          pageManager,
+          StoryAdPlacements.PREDETERMINED_EIGHT
+        );
+        algo.initializePages();
+        algo.onNewAdView();
+        expect(createPageStub).to.be.calledTwice;
+        expect(insertPageStub).to.be.calledWithExactly('6', mockPage);
+        expect(insertPageStub).to.be.calledWithExactly('11', mockPage);
+      });
+    });
+  });
+
+  describe('helpers', () => {
+    describe('getAdPositions', () => {
+      it('should pick the right position for short stories', () => {
+        expect(getAdPositions(0, 0)).to.eql([]);
+        expect(getAdPositions(5, 0)).to.eql([]);
+        expect(getAdPositions(10, 0)).to.eql([]);
+        expect(getAdPositions(5, 1)).to.eql([3]);
+        expect(getAdPositions(6, 1)).to.eql([3]);
+        expect(getAdPositions(7, 1)).to.eql([4]);
+        expect(getAdPositions(8, 1)).to.eql([4]);
+        expect(getAdPositions(9, 1)).to.eql([5]);
+        expect(getAdPositions(10, 1)).to.eql([5]);
+        expect(getAdPositions(12, 1)).to.eql([6]);
+        expect(getAdPositions(13, 1)).to.eql([7]);
+        expect(getAdPositions(8, 2)).to.eql([3, 6]);
+        expect(getAdPositions(9, 2)).to.eql([3, 6]);
+        expect(getAdPositions(10, 2)).to.eql([4, 7]);
+        expect(getAdPositions(11, 2)).to.eql([4, 8]);
+        expect(getAdPositions(12, 2)).to.eql([4, 8]);
+        expect(getAdPositions(13, 2)).to.eql([5, 9]);
+        expect(getAdPositions(14, 2)).to.eql([5, 10]);
+        expect(getAdPositions(20, 3)).to.eql([5, 10, 15]);
+      });
+    });
+
+    describe('getNumberOfAds', () => {
+      it('should choose exact number if multipe of interval', () => {
+        expect(getNumberOfAds(8, 8)).to.equal(1);
+        expect(getNumberOfAds(16, 8)).to.equal(2);
+      });
+
+      it('should add extra ad if dice roll is < remainder / interval', () => {
+        env.sandbox.stub(Math, 'random').returns(4 / 8);
+        expect(getNumberOfAds(5, 8)).to.equal(1);
+        expect(getNumberOfAds(13, 8)).to.equal(2);
+      });
+
+      it('should not add extra ad if if dice roll is > remainder / interval', () => {
+        env.sandbox.stub(Math, 'random').returns(4 / 8);
+        expect(getNumberOfAds(3, 8)).to.equal(0);
+        expect(getNumberOfAds(11, 8)).to.equal(1);
+      });
+    });
+  });
+});
diff --git a/extensions/amp-story-auto-ads/0.1/test/test-amp-story-auto-ads.js b/extensions/amp-story-auto-ads/0.1/test/test-amp-story-auto-ads.js
index e814dca08c658..3382cb69c8052 100644
--- a/extensions/amp-story-auto-ads/0.1/test/test-amp-story-auto-ads.js
+++ b/extensions/amp-story-auto-ads/0.1/test/test-amp-story-auto-ads.js
@@ -23,8 +23,7 @@ import {
 } from '../../../amp-story/1.0/amp-story-store-service';
 import {AmpStory} from '../../../amp-story/1.0/amp-story';
 import {AmpStoryAutoAds, Attributes} from '../amp-story-auto-ads';
-import {CommonSignals} from '../../../../src/common-signals';
-import {LocalizationService} from '../../../../src/service/localization';
+import {CommonSignals} from '../../../../src/core/constants/common-signals';
 import {
   MockStoryImpl,
   addStoryAutoAdsConfig,
@@ -35,10 +34,11 @@ import {Services} from '../../../../src/services';
 import {StoryAdPage} from '../story-ad-page';
 import {macroTask} from '../../../../testing/yield';
 import {registerServiceBuilder} from '../../../../src/service';
+import {toggleExperiment} from '../../../../src/experiments';
 
 const NOOP = () => {};
 
-// TODO(ccordry): Continue to refactor the rest of this file to use new test helpers.
+// TODO(ccordry): Refactor these tests using new associated classes & try to remove stubbing private methods.
 describes.realWin(
   'amp-story-auto-ads',
   {
@@ -55,15 +55,12 @@ describes.realWin(
     let story;
     let storeService;
     let storeGetterStub;
+    let viewer;
 
     beforeEach(() => {
       win = env.win;
       doc = win.document;
-      const localizationService = new LocalizationService(win.document.body);
-      env.sandbox
-        .stub(Services, 'localizationForDoc')
-        .returns(localizationService);
-      const viewer = Services.viewerForDoc(env.ampdoc);
+      viewer = Services.viewerForDoc(env.ampdoc);
       env.sandbox.stub(Services, 'viewerForDoc').returns(viewer);
       registerServiceBuilder(win, 'performance', function () {
         return {
@@ -192,7 +189,8 @@ describes.realWin(
         await autoAds.layoutCallback();
         expect(installExtensionForDocStub).to.be.calledWithExactly(
           env.ampdoc,
-          'amp-mustache'
+          'amp-mustache',
+          'latest'
         );
       });
 
@@ -261,7 +259,7 @@ describes.realWin(
         );
         await autoAds.buildCallback();
         await autoAds.layoutCallback();
-        autoAds.idOfAdShowing_ = 'ad-page-1';
+        autoAds.visibleAdPage_ = {getId: () => 'i-amphtml-ad-page-1'};
         autoAds.handleActivePageChange_(
           /* pageIndex */ 2,
           /* pageId */ 'non-ad-page'
@@ -270,8 +268,26 @@ describes.realWin(
       });
     });
 
-    describe('ad badge', () => {
+    // TODO(#33969) remove when launched.
+    it('should create progress bar from #storyNextUp', async () => {
+      env.sandbox.stub(viewer, 'getParam').returns('6s');
+      env.sandbox.stub(autoAds, 'mutateElement').callsArg(0);
+      addStoryAutoAdsConfig(adElement);
+      await story.buildCallback();
+      // Fire these events so that story ads thinks the parent story is ready.
+      story.signals().signal(CommonSignals.BUILT);
+      story.signals().signal(CommonSignals.INI_LOAD);
+      await autoAds.buildCallback();
+      await autoAds.layoutCallback();
+
+      const progressBar = doc.querySelector('.i-amphtml-story-ad-progress-bar');
+      expect(progressBar).to.exist;
+    });
+
+    describe('system layer', () => {
       beforeEach(async () => {
+        // TODO(#33969) remove when launched.
+        toggleExperiment(win, 'story-ad-auto-advance', true);
         // Force sync mutateElement.
         env.sandbox.stub(autoAds, 'mutateElement').callsArg(0);
         addStoryAutoAdsConfig(adElement);
@@ -283,82 +299,102 @@ describes.realWin(
         await autoAds.layoutCallback();
       });
 
-      it('should propigate the ad-showing attribute', () => {
-        expect(autoAds.getAdBadgeRoot()).not.to.have.attribute(
-          Attributes.AD_SHOWING
+      it('should create ad badge', () => {
+        const adBadge = doc.querySelector('.i-amphtml-story-ad-badge');
+        expect(adBadge).to.exist;
+      });
+
+      it('should create progress bar', () => {
+        const progressBar = doc.querySelector(
+          '.i-amphtml-story-ad-progress-bar'
         );
-        storeService.dispatch(Action.TOGGLE_AD, true);
-        expect(autoAds.getAdBadgeRoot()).to.have.attribute(
-          Attributes.AD_SHOWING
+        expect(progressBar).to.exist;
+      });
+
+      it('should propagate the ad-showing attribute to badge & progress bar', () => {
+        const adBadgeContainer = doc.querySelector(
+          '.i-amphtml-ad-overlay-container'
+        );
+        const progressBackground = doc.querySelector(
+          '.i-amphtml-story-ad-progress-background'
         );
+        expect(adBadgeContainer).not.to.have.attribute(Attributes.AD_SHOWING);
+        expect(progressBackground).not.to.have.attribute(Attributes.AD_SHOWING);
+        storeService.dispatch(Action.TOGGLE_AD, true);
+        expect(adBadgeContainer).to.have.attribute(Attributes.AD_SHOWING);
+        expect(progressBackground).to.have.attribute(Attributes.AD_SHOWING);
       });
 
-      it('should propigate the desktop-panels attribute', () => {
-        expect(autoAds.getAdBadgeRoot()).not.to.have.attribute(
+      it('should propagate the desktop-panels attribute to badge & progress bar', () => {
+        const adBadgeContainer = doc.querySelector(
+          '.i-amphtml-ad-overlay-container'
+        );
+        const progressBackground = doc.querySelector(
+          '.i-amphtml-story-ad-progress-background'
+        );
+        expect(adBadgeContainer).not.to.have.attribute(
           Attributes.DESKTOP_PANELS
         );
-        storeService.dispatch(Action.TOGGLE_UI, UIType.DESKTOP_PANELS);
-        expect(autoAds.getAdBadgeRoot()).to.have.attribute(
+        expect(progressBackground).not.to.have.attribute(
           Attributes.DESKTOP_PANELS
         );
+        storeService.dispatch(Action.TOGGLE_UI, UIType.DESKTOP_PANELS);
+        expect(adBadgeContainer).to.have.attribute(Attributes.DESKTOP_PANELS);
+        expect(progressBackground).to.have.attribute(Attributes.DESKTOP_PANELS);
       });
 
-      it('should propigate the dir=rtl attribute', () => {
-        expect(autoAds.getAdBadgeRoot()).not.to.have.attribute(Attributes.DIR);
-        storeService.dispatch(Action.TOGGLE_RTL, true);
-        expect(autoAds.getAdBadgeRoot()).to.have.attribute(
-          Attributes.DIR,
-          'rtl'
+      it('should propagate the dir=rtl attribute', () => {
+        const adBadgeContainer = doc.querySelector(
+          '.i-amphtml-ad-overlay-container'
         );
+        expect(adBadgeContainer).not.to.have.attribute(Attributes.DIR);
+        storeService.dispatch(Action.TOGGLE_RTL, true);
+        expect(adBadgeContainer).to.have.attribute(Attributes.DIR, 'rtl');
       });
-    });
 
-    describe('analytics triggers', () => {
-      it('should fire "story-ad-insert" upon insertion', async () => {
-        autoAds.uniquePagesCount_ = 10;
-        autoAds.adPagesCreated_ = 1;
-        env.sandbox.stub(autoAds, 'startNextAdPage_');
-        env.sandbox
-          .stub(autoAds, 'tryToPlaceAdAfterPage_')
-          .resolves(/* placed */ 1);
-        const analyticsStub = env.sandbox.stub(autoAds, 'analyticsEvent_');
-        autoAds.handleActivePageChange_(3, 'fakePage');
-        await macroTask();
-        expect(analyticsStub).to.be.called;
-        expect(analyticsStub).to.have.been.calledWithMatch('story-ad-insert', {
-          'insertTime': env.sandbox.match.number,
-        });
+      it('should propagate the pause state if ad showing', () => {
+        const progressBackground = doc.querySelector(
+          '.i-amphtml-story-ad-progress-background'
+        );
+        storeService.dispatch(Action.TOGGLE_AD, true);
+        expect(progressBackground).not.to.have.attribute(Attributes.PAUSED);
+        storeService.dispatch(Action.TOGGLE_PAUSED, true);
+        expect(progressBackground).to.have.attribute(Attributes.PAUSED);
+        storeService.dispatch(Action.TOGGLE_PAUSED, false);
+        expect(progressBackground).not.to.have.attribute(Attributes.PAUSED);
       });
 
-      it('should fire "story-ad-discard" upon discarded ad', async () => {
-        autoAds.uniquePagesCount_ = 10;
-        autoAds.adPagesCreated_ = 1;
-        env.sandbox.stub(autoAds, 'startNextAdPage_');
-        env.sandbox
-          .stub(autoAds, 'tryToPlaceAdAfterPage_')
-          .resolves(/* discard */ 2);
-        const analyticsStub = env.sandbox.stub(autoAds, 'analyticsEvent_');
-        autoAds.handleActivePageChange_(3, 'fakePage');
-        await macroTask();
-        expect(analyticsStub).to.be.called;
-        expect(analyticsStub).to.have.been.calledWithMatch('story-ad-discard', {
-          'discardTime': env.sandbox.match.number,
-        });
+      it('should not propagate the pause state if no ad showing', () => {
+        const progressBackground = doc.querySelector(
+          '.i-amphtml-story-ad-progress-background'
+        );
+        storeService.dispatch(Action.TOGGLE_AD, false);
+        expect(progressBackground).not.to.have.attribute(Attributes.PAUSED);
+        storeService.dispatch(Action.TOGGLE_PAUSED, true);
+        expect(progressBackground).not.to.have.attribute(Attributes.PAUSED);
+        storeService.dispatch(Action.TOGGLE_PAUSED, false);
+        expect(progressBackground).not.to.have.attribute(Attributes.PAUSED);
       });
+    });
 
+    describe('analytics triggers', () => {
       it('should fire "story-ad-view" upon ad visible', () => {
         autoAds.ampStory_ = {
           element: storyElement,
           addPage: NOOP,
         };
-        autoAds.adPages_ = [{hasBeenViewed: () => false}];
         autoAds.setVisibleAttribute_ = NOOP;
-        autoAds.enoughPagesLeftInStory_ = NOOP;
-        autoAds.adPagesCreated_ = 1;
-        env.sandbox.stub(autoAds, 'startNextAdPage_');
+        autoAds.placementAlgorithm_ = {onPageChange: NOOP};
+        autoAds.adPageManager_ = {
+          getAdPageById: () => ({
+            hasBeenViewed: () => true,
+          }),
+          getIndexById: () => 1,
+          hasId: () => true,
+          numberOfAdsCreated: () => 1,
+        };
         const analyticsStub = env.sandbox.stub(autoAds, 'analyticsEvent_');
-        autoAds.adPageIds_ = {'ad-page-1': 1};
-        autoAds.handleActivePageChange_(1, 'ad-page-1');
+        autoAds.handleActivePageChange_(1, 'i-amphtml-ad-page-1');
         expect(analyticsStub).to.be.called;
         expect(analyticsStub).to.have.been.calledWithMatch('story-ad-view', {
           'viewTime': env.sandbox.match.number,
@@ -370,12 +406,14 @@ describes.realWin(
           element: storyElement,
           addPage: NOOP,
         };
-        autoAds.adPagesCreated_ = 1;
-        const page = win.document.createElement('amp-story-page');
-        page.getImpl = () => Promise.resolve();
-
+        autoAds.placementAlgorithm_ = {onPageChange: NOOP};
+        autoAds.visibleAdPage_ = {getId: () => 'page-1'};
+        autoAds.adPageManager_ = {
+          hasId: () => false,
+          numberOfAdsCreated: () => 1,
+          getIndexById: () => 1,
+        };
         const analyticsStub = env.sandbox.stub(autoAds, 'analyticsEvent_');
-        autoAds.idOfAdShowing_ = 'ad-page-1';
         autoAds.handleActivePageChange_(1, 'page-3');
 
         expect(analyticsStub).to.be.called;
diff --git a/extensions/amp-story-auto-ads/0.1/test/test-story-ad-localization-strings.js b/extensions/amp-story-auto-ads/0.1/test/test-story-ad-localization-strings.js
new file mode 100644
index 0000000000000..6f4514e3e7e1d
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/test/test-story-ad-localization-strings.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {LocalizedStringId} from '../../../../src/localized-strings';
+import localesObjs from '../_locales/index';
+
+describes.fakeWin('amp-story-ad-localization-strings', {amp: true}, () => {
+  describe('localized strings', () => {
+    localesObjs.forEach((obj) => {
+      const languageName = Object.keys(obj)[0];
+      const languageStringsObj = obj[languageName];
+      const languageKeys = Object.keys(languageStringsObj);
+
+      it(languageName + ' should have unique keys', () => {
+        const uniqueKeys = new Set(languageKeys);
+
+        expect(uniqueKeys.size).to.eql(languageKeys.length);
+      });
+
+      it(languageName + ' keys should exist in LocalizedStringId', () => {
+        const localizedStringIdKeys = Object.values(LocalizedStringId);
+
+        languageKeys.forEach((key) => {
+          expect(localizedStringIdKeys.indexOf(key)).to.not.eql(-1);
+        });
+      });
+    });
+  });
+});
diff --git a/extensions/amp-story-auto-ads/0.1/test/test-story-ad-page-manager.js b/extensions/amp-story-auto-ads/0.1/test/test-story-ad-page-manager.js
new file mode 100644
index 0000000000000..35f1e8d7762d4
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/test/test-story-ad-page-manager.js
@@ -0,0 +1,245 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {Action, UIType} from '../../../amp-story/1.0/amp-story-store-service';
+import {AmpStory} from '../../../amp-story/1.0/amp-story';
+import {InsertionState, StoryAdPageManager} from '../story-ad-page-manager';
+import {StoryAdPage} from '../story-ad-page';
+import {getServiceForDoc} from '../../../../src/service';
+import {macroTask} from '../../../../testing/yield';
+
+// TODO(ccordry): add tests for analytics events.
+describes.realWin('StoryAdPageManager', {amp: true}, (env) => {
+  let doc;
+  let ampStory;
+  let mockConfig;
+  let buildPageStub;
+  let mockStoryPage;
+
+  beforeEach(() => {
+    doc = env.win.document;
+    const storyElement = doc.createElement('amp-story');
+    doc.body.appendChild(storyElement);
+    ampStory = new AmpStory(storyElement);
+    env.sandbox.stub(ampStory, 'getAmpDoc').returns(env.ampdoc);
+    const storyAdPageEl = doc.createElement('amp-story-page');
+    mockStoryPage = {isAd: () => true};
+    storyAdPageEl.getImpl = () => Promise.resolve(mockStoryPage);
+    buildPageStub = env.sandbox
+      .stub(StoryAdPage.prototype, 'build')
+      .returns(storyAdPageEl);
+    mockConfig = {};
+  });
+
+  describe('#hasUnusedAdPage', () => {
+    it('returns false when no ads have been created', () => {
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      expect(pageManager.hasUnusedAdPage()).to.be.false;
+    });
+
+    it('returns true after ad creation', () => {
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      pageManager.createAdPage();
+      expect(pageManager.hasUnusedAdPage()).to.be.true;
+    });
+  });
+
+  describe('#getUnusedAdPage', () => {
+    it('throws when no ads available', () => {
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      allowConsoleError(() => {
+        expect(() => pageManager.getUnusedAdPage()).to.throw(
+          'amp-story-auto-ads:page-manager all created ads consumed.'
+        );
+      });
+    });
+
+    it('returns an ad page', () => {
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      pageManager.createAdPage();
+      const page = pageManager.getUnusedAdPage();
+      expect(page).to.exist;
+      expect(page).is.instanceOf(StoryAdPage);
+    });
+  });
+
+  describe('#discardCurrentAd', () => {
+    it('marks pages as unavailable', () => {
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      pageManager.createAdPage();
+      expect(pageManager.hasUnusedAdPage()).to.be.true;
+      pageManager.discardCurrentAd();
+      expect(pageManager.hasUnusedAdPage()).to.be.false;
+    });
+  });
+
+  describe('#numberOfAdsCreated', () => {
+    it('keeps track of creations', () => {
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      expect(pageManager.numberOfAdsCreated()).to.equal(0);
+      pageManager.createAdPage();
+      expect(pageManager.numberOfAdsCreated()).to.equal(1);
+      pageManager.createAdPage();
+      expect(pageManager.numberOfAdsCreated()).to.equal(2);
+      pageManager.createAdPage();
+      expect(pageManager.numberOfAdsCreated()).to.equal(3);
+    });
+  });
+
+  describe('#createAdPage', () => {
+    it('creates page, adds to dom, and adds to parent story impl', async () => {
+      const addPageSpy = env.sandbox.spy(ampStory, 'addPage');
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      pageManager.createAdPage();
+      expect(buildPageStub).to.be.calledOnce;
+      const storyPage = doc.querySelector('amp-story-page');
+      expect(storyPage).to.exist;
+      await macroTask();
+      expect(addPageSpy).to.be.calledWithExactly(mockStoryPage);
+    });
+  });
+
+  describe('#hasId', () => {
+    it('keeps track of ids', () => {
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      expect(pageManager.hasId('i-amphtml-ad-page-1')).to.be.false;
+      expect(pageManager.hasId('i-amphtml-ad-page-2')).to.be.false;
+      pageManager.createAdPage();
+      expect(pageManager.hasId('i-amphtml-ad-page-1')).to.be.true;
+      expect(pageManager.hasId('i-amphtml-ad-page-2')).to.be.false;
+      pageManager.createAdPage();
+      expect(pageManager.hasId('i-amphtml-ad-page-2')).to.be.true;
+    });
+  });
+
+  describe('#getAdPageById', () => {
+    it('returns an ad page', () => {
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      const page0 = pageManager.getAdPageById('i-amphtml-ad-page-1');
+      pageManager.createAdPage();
+      expect(page0).not.to.exist;
+      const page1 = pageManager.getAdPageById('i-amphtml-ad-page-1');
+      expect(page1).to.exist;
+      expect(page1).is.instanceOf(StoryAdPage);
+    });
+  });
+
+  describe('#getIndexById', () => {
+    it('keeps track of indicies', () => {
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      pageManager.createAdPage();
+      pageManager.createAdPage();
+      expect(pageManager.getIndexById('i-amphtml-ad-page-1')).to.equal(1);
+      expect(pageManager.getIndexById('i-amphtml-ad-page-2')).to.equal(2);
+    });
+  });
+
+  describe('#maybeInsertPageAfter', () => {
+    it('returns delayed status if no page after ad', async () => {
+      const pageBeforeElement = {hasAttribute: () => false};
+      const mockPageBefore = {element: pageBeforeElement, isAd: () => true};
+      const mockPageAfter = {isAd: () => false};
+      env.sandbox.stub(ampStory, 'getPageById').returns(mockPageBefore);
+      env.sandbox.stub(ampStory, 'getNextPage').returns(mockPageAfter);
+      env.sandbox.stub(ampStory, 'getPageIndexById').returns(0);
+
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      pageManager.createAdPage();
+      const nextAdPage = pageManager.getUnusedAdPage();
+      const result = await pageManager.maybeInsertPageAfter('one', nextAdPage);
+      expect(result).to.equal(InsertionState.DELAYED);
+    });
+
+    it('returns delayed status if next-page-no-ad attr', async () => {
+      const pageBeforeElement = {
+        hasAttribute: (name) => name === 'next-page-no-ad',
+      };
+      const mockPageBefore = {element: pageBeforeElement, isAd: () => false};
+      const mockPageAfter = {isAd: () => false};
+      env.sandbox.stub(ampStory, 'getPageById').returns(mockPageBefore);
+      env.sandbox.stub(ampStory, 'getNextPage').returns(mockPageAfter);
+      env.sandbox.stub(ampStory, 'getPageIndexById').returns(0);
+
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      pageManager.createAdPage();
+      const nextAdPage = pageManager.getUnusedAdPage();
+      const result = await pageManager.maybeInsertPageAfter('one', nextAdPage);
+      expect(result).to.equal(InsertionState.DELAYED);
+    });
+
+    it('fails if cta is not created', async () => {
+      const pageBeforeElement = {hasAttribute: () => false};
+      const mockPageBefore = {element: pageBeforeElement, isAd: () => false};
+      const mockPageAfter = {isAd: () => false};
+      env.sandbox.stub(ampStory, 'getPageById').returns(mockPageBefore);
+      env.sandbox.stub(ampStory, 'getNextPage').returns(mockPageAfter);
+      env.sandbox.stub(ampStory, 'getPageIndexById').returns(0);
+
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      pageManager.createAdPage();
+      const nextAdPage = pageManager.getUnusedAdPage();
+      env.sandbox.stub(nextAdPage, 'maybeCreateCta').resolves(false);
+      const result = await pageManager.maybeInsertPageAfter('one', nextAdPage);
+      expect(result).to.equal(InsertionState.FAILURE);
+    });
+
+    it('successfully inserts and marks as used', async () => {
+      const pageBeforeElement = {hasAttribute: () => false};
+      const mockPageBefore = {element: pageBeforeElement, isAd: () => false};
+      const mockPageAfter = {isAd: () => false};
+      env.sandbox.stub(ampStory, 'getPageById').returns(mockPageBefore);
+      env.sandbox.stub(ampStory, 'getNextPage').returns(mockPageAfter);
+      const insertStub = env.sandbox.stub(ampStory, 'insertPage').returns(true);
+      env.sandbox.stub(ampStory, 'getPageIndexById').returns(0);
+
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      pageManager.createAdPage();
+      const nextAdPage = pageManager.getUnusedAdPage();
+      env.sandbox.stub(nextAdPage, 'maybeCreateCta').resolves(true);
+      expect(pageManager.hasUnusedAdPage()).to.be.true;
+      const result = await pageManager.maybeInsertPageAfter('one', nextAdPage);
+      expect(insertStub).to.be.calledWith('one', 'i-amphtml-ad-page-1');
+      expect(pageManager.hasUnusedAdPage()).to.be.false;
+      expect(result).to.equal(InsertionState.SUCCESS);
+    });
+
+    it('successfully inserts 2 pages away on desktop', async () => {
+      const storeService = getServiceForDoc(env.ampdoc, 'story-store');
+      storeService.dispatch(Action.TOGGLE_UI, UIType.DESKTOP_PANELS);
+      const pageAfterElement = {id: 'two', hasAttribute: () => false};
+      const mockPageAfter = {isAd: () => false, element: pageAfterElement};
+      const mockTwoPagesAfter = {isAd: () => false};
+      env.sandbox.stub(ampStory, 'getPageById').returns({});
+      env.sandbox
+        .stub(ampStory, 'getNextPage')
+        .onFirstCall()
+        .returns(mockPageAfter)
+        .onSecondCall()
+        .returns(mockTwoPagesAfter)
+        .returns(mockPageAfter);
+      const insertStub = env.sandbox.stub(ampStory, 'insertPage').returns(true);
+      env.sandbox.stub(ampStory, 'getPageIndexById').returns(0);
+
+      const pageManager = new StoryAdPageManager(ampStory, mockConfig);
+      pageManager.createAdPage();
+      const nextAdPage = pageManager.getUnusedAdPage();
+      env.sandbox.stub(nextAdPage, 'maybeCreateCta').resolves(true);
+      const result = await pageManager.maybeInsertPageAfter('one', nextAdPage);
+      expect(insertStub).to.be.calledWith('two', 'i-amphtml-ad-page-1');
+      expect(result).to.equal(InsertionState.SUCCESS);
+    });
+  });
+});
diff --git a/extensions/amp-story-auto-ads/0.1/test/test-story-ad-page.js b/extensions/amp-story-auto-ads/0.1/test/test-story-ad-page.js
index 16577cfb3fdce..a4159256d5700 100644
--- a/extensions/amp-story-auto-ads/0.1/test/test-story-ad-page.js
+++ b/extensions/amp-story-auto-ads/0.1/test/test-story-ad-page.js
@@ -22,10 +22,13 @@ import {
   getStoreService,
 } from '../../../amp-story/1.0/amp-story-store-service';
 import {ButtonTextFitter} from '../story-ad-button-text-fitter';
-import {CommonSignals} from '../../../../src/common-signals';
+import {CommonSignals} from '../../../../src/core/constants/common-signals';
+import {Gestures} from '../../../../src/gesture';
 import {StoryAdAnalytics} from '../story-ad-analytics';
+import {StoryAdAutoAdvance} from '../../../../src/experiments/story-ad-auto-advance';
 import {StoryAdLocalization} from '../story-ad-localization';
 import {StoryAdPage} from '../story-ad-page';
+import {forceExperimentBranch} from '../../../../src/experiments';
 import {macroTask} from '../../../../testing/yield';
 
 const NOOP = () => {};
@@ -74,6 +77,8 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
       expect(pageElement).to.have.attribute('ad');
       expect(pageElement).to.have.attribute('distance', 2);
       expect(pageElement).to.have.attribute('id', 'i-amphtml-ad-page-1');
+      // TODO(#33969) remove when launched.
+      expect(pageElement).not.to.have.attribute('auto-advance-after');
 
       const contentGridLayer = pageElement.firstChild;
       expect(contentGridLayer.tagName).to.equal('AMP-STORY-GRID-LAYER');
@@ -92,6 +97,17 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
       const glassPane = glassPaneGridLayer.firstChild;
       expect(glassPane).to.have.class('i-amphtml-glass-pane');
     });
+
+    it('sets auto-advance if in the experiment', () => {
+      // TODO(#33969) remove when launched.
+      forceExperimentBranch(
+        win,
+        StoryAdAutoAdvance.ID,
+        StoryAdAutoAdvance.SIX_SECONDS
+      );
+      const pageElement = storyAdPage.build();
+      expect(pageElement).to.have.attribute('auto-advance-after');
+    });
   });
 
   describe('#getAdDoc', () => {
@@ -116,7 +132,7 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
 
   describe('#hasTimedOut', () => {
     it('should timeout after > 10 seconds', () => {
-      const clock = window.sandbox.useFakeTimers(1555555555555);
+      const clock = env.sandbox.useFakeTimers(1555555555555);
       storyAdPage.build();
       expect(storyAdPage.hasTimedOut()).to.be.false;
       clock.tick(10009); // 10 second timeout.
@@ -148,7 +164,7 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
 
   describe('#registerLoadCallback', () => {
     it('registers given functions and executes when loaded', async () => {
-      const someFunc = window.sandbox.spy();
+      const someFunc = env.sandbox.spy();
       const pageElement = storyAdPage.build();
       // Stub delegateVideoAutoplay.
       pageElement.getImpl = () => Promise.resolve(pageImplMock);
@@ -206,15 +222,32 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
         </body>`);
       await ampAdElement.signals().signal(CommonSignals.INI_LOAD);
 
-      const altBody = iframe.contentDocument.querySelector(
-        '#x-a4a-former-body'
-      );
+      const altBody =
+        iframe.contentDocument.querySelector('#x-a4a-former-body');
       expect(altBody).not.to.have.attribute('amp-story-visible');
       storyAdPage.toggleVisibility();
       expect(altBody).to.have.attribute('amp-story-visible');
       storyAdPage.toggleVisibility();
       expect(altBody).not.to.have.attribute('amp-story-visible');
     });
+
+    it('should add/remove the cta-active signal', async () => {
+      const pageElement = storyAdPage.build();
+      // Stub delegateVideoAutoplay.
+      pageElement.getImpl = () => Promise.resolve(pageImplMock);
+      doc.body.appendChild(pageElement);
+
+      const ampAdElement = doc.querySelector('amp-ad');
+      ampAdElement.setAttribute('data-vars-ctaurl', 'https://cats.example');
+      ampAdElement.setAttribute('data-vars-ctatype', 'INSTALL');
+      await storyAdPage.maybeCreateCta();
+
+      const anchor = doc.querySelector('.i-amphtml-story-ad-link');
+      expect(anchor).to.exist;
+      expect(anchor).not.to.have.attribute('cta-active');
+      storyAdPage.toggleVisibility();
+      expect(anchor).to.have.attribute('cta-active');
+    });
   });
 
   describe('#maybeCreateCta', () => {
@@ -239,8 +272,7 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
 
       const ctaLayer = doc.querySelector('amp-story-cta-layer');
       expect(ctaLayer).to.exist;
-      const anchor = ctaLayer.firstChild;
-      expect(anchor.tagName).to.equal('A');
+      const anchor = ctaLayer.querySelector('a');
       expect(anchor.target).to.equal('_blank');
       expect(anchor.href).to.equal('https://amp.dev/');
       expect(anchor).to.have.attribute(
@@ -260,8 +292,7 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
 
       const ctaLayer = doc.querySelector('amp-story-cta-layer');
       expect(ctaLayer).to.exist;
-      const anchor = ctaLayer.firstChild;
-      expect(anchor.tagName).to.equal('A');
+      const anchor = ctaLayer.querySelector('a');
       expect(anchor.target).to.equal('_blank');
       expect(anchor.href).to.equal('https://amp.dev/');
       expect(anchor).to.have.attribute(
@@ -310,6 +341,7 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
       ampAdElement.appendChild(iframe);
       iframe.contentDocument.write(`
         <body>
+          <meta name="amp-cta-type" content="SHOP">
           <amp-ad-exit id="exit-api">
             <script type="application/json">
             {
@@ -322,17 +354,16 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
         </body>`);
 
       await ampAdElement.signals().signal(CommonSignals.INI_LOAD);
-
       const created = await storyAdPage.maybeCreateCta();
       expect(created).to.be.true;
       const anchor = doc.querySelector('a');
       expect(anchor.href).to.equal('https://amp.dev/');
-      expect(anchor.textContent).to.equal('Learn More');
+      expect(anchor.textContent).to.equal('Shop Now');
     });
 
     it('throws on missing cta url', async () => {
       expectAsyncConsoleError(
-        '[amp-story-auto-ads:page] Both CTA Type & CTA Url are required in ad response.'
+        '[amp-story-auto-ads:ui] Both CTA Type & CTA Url are required in ad response.'
       );
       ampAdElement.setAttribute('data-vars-ctatype', 'INSTALL');
       const created = await storyAdPage.maybeCreateCta();
@@ -341,7 +372,7 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
 
     it('throws on missing cta type', async () => {
       expectAsyncConsoleError(
-        '[amp-story-auto-ads:page] Both CTA Type & CTA Url are required in ad response.'
+        '[amp-story-auto-ads:ui] Both CTA Type & CTA Url are required in ad response.'
       );
       ampAdElement.setAttribute('data-vars-ctaurl', 'INSTALL');
       const created = await storyAdPage.maybeCreateCta();
@@ -371,7 +402,7 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
         'https://googleads.g.doubleclick.net/pagead/images/mtad/ad_choices_blue.png'
       );
 
-      const openWindowDialogStub = window.sandbox.stub(dom, 'openWindowDialog');
+      const openWindowDialogStub = env.sandbox.stub(dom, 'openWindowDialog');
       attribution.click();
       expect(openWindowDialogStub).to.be.calledOnce;
       expect(openWindowDialogStub).to.be.calledWithExactly(
@@ -423,7 +454,7 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
 
       await ampAdElement.signals().signal(CommonSignals.INI_LOAD);
       const created = await storyAdPage.maybeCreateCta();
-      expect(created).to.be.false;
+      expect(created).to.be.true;
       const attribution = doc.querySelector('.i-amphtml-story-ad-attribution');
       expect(attribution).not.to.exist;
     });
@@ -444,7 +475,7 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
 
       await ampAdElement.signals().signal(CommonSignals.INI_LOAD);
       const created = await storyAdPage.maybeCreateCta();
-      expect(created).to.be.false;
+      expect(created).to.be.true;
       const attribution = doc.querySelector('.i-amphtml-story-ad-attribution');
       expect(attribution).not.to.exist;
     });
@@ -455,8 +486,8 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
 
     beforeEach(() => {
       const storyAnalytics = new StoryAdAnalytics(env.ampdoc);
-      fireEventStub = window.sandbox.stub(storyAnalytics, 'fireEvent');
-      window.sandbox
+      fireEventStub = env.sandbox.stub(storyAnalytics, 'fireEvent');
+      env.sandbox
         .stub(service, 'getServicePromiseForDoc')
         .resolves(storyAnalytics);
       storyAdPage = new StoryAdPage(
@@ -475,7 +506,7 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
         pageElement,
         1, // adIndex
         'story-ad-request',
-        {requestTime: window.sandbox.match.number}
+        {requestTime: env.sandbox.match.number}
       );
     });
 
@@ -492,7 +523,27 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
         pageElement,
         1, // adIndex
         'story-ad-load',
-        {loadTime: window.sandbox.match.number}
+        {loadTime: env.sandbox.match.number}
+      );
+    });
+
+    it('should fire "story-ad-swipe" upon ad swipe', async () => {
+      const onGestureStub = env.sandbox.stub(Gestures.prototype, 'onGesture');
+      const pageElement = storyAdPage.build();
+      doc.body.appendChild(pageElement);
+      // Stub delegateVideoAutoplay.
+      pageElement.getImpl = () => Promise.resolve(pageImplMock);
+
+      expect(fireEventStub).not.to.be.called;
+      const gestureHandler = onGestureStub.lastCall.args[1];
+      // Fake X swipe.
+      gestureHandler();
+      await macroTask();
+      expect(fireEventStub).to.be.calledWithExactly(
+        pageElement,
+        1, // adIndex
+        'story-ad-swipe',
+        {swipeTime: env.sandbox.match.number}
       );
     });
 
@@ -513,12 +564,14 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
       cta.target = '_self';
       cta.click();
 
+      // In real world the shadow host element will be the click target.
+      expect(cta.parentElement.getAttribute('role')).to.equal('button');
       await macroTask();
       expect(fireEventStub).to.be.calledWithExactly(
         pageElement,
         1, // adIndex
         'story-ad-click',
-        {clickTime: window.sandbox.match.number}
+        {clickTime: env.sandbox.match.number}
       );
     });
   });
diff --git a/extensions/amp-story-auto-ads/0.1/test/test-story-ad-ui.js b/extensions/amp-story-auto-ads/0.1/test/test-story-ad-ui.js
new file mode 100644
index 0000000000000..7a7a2d304238c
--- /dev/null
+++ b/extensions/amp-story-auto-ads/0.1/test/test-story-ad-ui.js
@@ -0,0 +1,235 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  A4AVarNames,
+  createCta,
+  getStoryAdMetadataFromDoc,
+  getStoryAdMetadataFromElement,
+  maybeCreateAttribution,
+  validateCtaMetadata,
+} from '../story-ad-ui';
+import {ButtonTextFitter} from '../story-ad-button-text-fitter';
+
+describes.realWin('story-ad-ui', {amp: true}, (env) => {
+  let win;
+  let doc;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+  });
+
+  describe('getStoryAdMetadataFromDoc', () => {
+    it('returns metadata for amp-* values', () => {
+      const adDoc = doc.implementation.createHTMLDocument();
+      adDoc.head.innerHTML = `
+        <meta name="amp-cta-type" content="SHOP">
+        <meta name="amp-cta-url" content="https://www.kittens.com">
+      `;
+      const result = getStoryAdMetadataFromDoc(adDoc);
+      expect(result).to.eql({
+        'cta-type': 'SHOP',
+        'cta-url': 'https://www.kittens.com',
+      });
+    });
+
+    it('returns metadata for amp4ads-vars-* values', () => {
+      const adDoc = doc.implementation.createHTMLDocument();
+      adDoc.head.innerHTML = `
+        <meta name="amp4ads-vars-cta-type" content="SHOP">
+        <meta name="amp4ads-vars-cta-url" content="https://www.kittens.com">
+        <meta name="amp4ads-vars-attribution-icon" content="https://www.kittens.com/img1">
+        <meta name="amp4ads-vars-attribution-url" content="https://www.kittens.com/moreinfo">
+      `;
+      const result = getStoryAdMetadataFromDoc(adDoc);
+      expect(result).to.eql({
+        'cta-type': 'SHOP',
+        'cta-url': 'https://www.kittens.com',
+        'attribution-icon': 'https://www.kittens.com/img1',
+        'attribution-url': 'https://www.kittens.com/moreinfo',
+      });
+    });
+  });
+
+  describe('getStoryAdMetadataFromElement', () => {
+    it('gets cta type & cta url', () => {
+      const adEl = doc.createElement('amp-ad');
+      adEl.setAttribute('data-vars-ctatype', 'SHOP');
+      adEl.setAttribute('data-vars-ctaurl', 'https://www.kittens.com');
+      expect(getStoryAdMetadataFromElement(adEl)).to.eql({
+        'cta-type': 'SHOP',
+        'cta-url': 'https://www.kittens.com',
+      });
+    });
+  });
+
+  describe('validateCtaMetadata', () => {
+    it('returns true if cta type & cta url', () => {
+      const metadata = {
+        'cta-type': 'SHOP',
+        'cta-url': 'https://www.kittens.com',
+      };
+      expect(validateCtaMetadata(metadata)).to.be.true;
+    });
+
+    it('returns false if no cta type', () => {
+      const metadata = {
+        'cta-url': 'https://www.kittens.com',
+      };
+      allowConsoleError(() => {
+        expect(validateCtaMetadata(metadata)).to.be.false;
+      });
+    });
+
+    it('returns false without error in inabox', () => {
+      const metadata = {
+        'cta-url': 'https://www.kittens.com',
+      };
+      expect(validateCtaMetadata(metadata, true /* opt_inabox */)).to.be.false;
+    });
+
+    it('returns false if no cta url', () => {
+      const metadata = {
+        'cta-type': 'SHOP',
+      };
+      allowConsoleError(() => {
+        expect(validateCtaMetadata(metadata)).to.be.false;
+      });
+    });
+  });
+
+  describe('maybeCreateAttribution', () => {
+    it('creates, appends, & returns the element if sufficent metadata', () => {
+      const metadata = {
+        'attribution-icon': 'https://www.kittens.com/img1',
+        'attribution-url': 'https://www.kittens.com/moreinfo',
+      };
+      const element = maybeCreateAttribution(
+        win,
+        metadata,
+        doc.body /* container */
+      );
+      expect(element).to.exist;
+      expect(element.getAttribute('src')).to.equal(
+        'https://www.kittens.com/img1'
+      );
+      expect(doc.querySelector('.i-amphtml-attribution-host')).to.exist;
+      expect(doc.querySelector('img')).to.equal(element);
+    });
+
+    it('returns null and does not create if no icon url', () => {
+      const metadata = {
+        'attribution-url': 'https://www.kittens.com/moreinfo',
+      };
+      const element = maybeCreateAttribution(
+        win,
+        metadata,
+        doc.body /* container */
+      );
+      expect(element).to.be.null;
+      expect(doc.querySelector('.i-amphtml-attribution-host')).not.to.exist;
+    });
+
+    it('returns null and does not create if no landing url', () => {
+      const metadata = {
+        'attribution-icon': 'https://www.kittens.com/img1',
+      };
+      const element = maybeCreateAttribution(
+        win,
+        metadata,
+        doc.body /* container */
+      );
+      expect(element).to.be.null;
+      expect(doc.querySelector('.i-amphtml-attribution-host')).not.to.exist;
+    });
+
+    it('returns null and does not create if not https', () => {
+      const metadata = {
+        'attribution-icon': 'https://www.kittens.com/img1',
+        'attribution-url': 'http://www.kittens.com/moreinfo',
+      };
+      allowConsoleError(() => {
+        const element = maybeCreateAttribution(
+          win,
+          metadata,
+          doc.body /* container */
+        );
+        expect(element).to.be.null;
+        expect(doc.querySelector('.i-amphtml-attribution-host')).not.to.exist;
+      });
+    });
+  });
+
+  describe('createCta', () => {
+    let buttonFitter;
+
+    beforeEach(() => {
+      buttonFitter = new ButtonTextFitter(env.ampdoc);
+    });
+
+    it('returns the created anchor', () => {
+      const metadata = {
+        [A4AVarNames.CTA_TYPE]: 'SHOP',
+        [A4AVarNames.CTA_URL]: 'https://www.cats.com',
+      };
+      return createCta(
+        doc,
+        buttonFitter,
+        doc.body /* container */,
+        metadata
+      ).then((anchor) => {
+        expect(anchor).to.exist;
+        expect(anchor.href).to.equal('https://www.cats.com/');
+        expect(anchor.textContent).to.equal('SHOP');
+        expect(doc.querySelector('amp-story-cta-layer')).to.exist;
+        expect(doc.querySelector('a')).to.exist;
+      });
+    });
+
+    it('returns null if button text is too long', () => {
+      const metadata = {
+        [A4AVarNames.CTA_TYPE]: 'cta that is way too long to fit in a button',
+        [A4AVarNames.CTA_URL]: 'https://www.cats.com',
+      };
+      const container = doc.createElement('div');
+      container.width = '400px';
+
+      return createCta(doc, buttonFitter, container, metadata).then(
+        (anchor) => {
+          expect(anchor).to.be.null;
+          expect(container.querySelector('amp-story-cta-layer')).not.to.exist;
+        }
+      );
+    });
+
+    it('returns null if url protocol is not http || https', () => {
+      const metadata = {
+        [A4AVarNames.CTA_TYPE]: 'SHOP',
+        [A4AVarNames.CTA_URL]: 'mailto:meow@cats.com',
+      };
+      return createCta(
+        doc,
+        buttonFitter,
+        doc.body /* container */,
+        metadata
+      ).then((anchor) => {
+        expect(anchor).to.be.null;
+        expect(doc.querySelector('amp-story-cta-layer')).not.to.exist;
+      });
+    });
+  });
+});
diff --git a/extensions/amp-story-auto-ads/0.1/utils.js b/extensions/amp-story-auto-ads/0.1/utils.js
index 3e731ca477bfc..1036176ef4438 100644
--- a/extensions/amp-story-auto-ads/0.1/utils.js
+++ b/extensions/amp-story-auto-ads/0.1/utils.js
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import {getCryptoRandomBytesArray} from '../../../src/utils/bytes';
+import {CtaTypes} from './story-ad-localization';
+import {getCryptoRandomBytesArray} from '../../../src/core/types/string/bytes';
 
 /**
  * Returns an string with a total of 128 of random values based on the
@@ -42,13 +43,19 @@ export function getUniqueId(win) {
 }
 
 /**
- * Finds all meta tags starting with `amp4ads-vars-`.
- * @param {Document} doc
- * @return {!IArrayLike}
+ * Localizes CTA text if it is chosen from our predefined types.a
+ * @param {string} ctaType
+ * @param {!./story-ad-localization.StoryAdLocalization} localizationService
+ * @return {?string}
  */
-export function getA4AMetaTags(doc) {
-  const selector = 'meta[name^=amp4ads-vars-]';
-  return doc.querySelectorAll(selector);
+export function localizeCtaText(ctaType, localizationService) {
+  // CTA picked from predefined choices.
+  if (CtaTypes[ctaType]) {
+    const ctaLocalizedStringId = CtaTypes[ctaType];
+    return localizationService.getLocalizedString(ctaLocalizedStringId);
+  }
+  // Custom CTA text - Should already be localized.
+  return ctaType;
 }
 
 /**
diff --git a/extensions/amp-story-auto-ads/OWNERS b/extensions/amp-story-auto-ads/OWNERS
index 99f7ff3ff0fe7..9e76b711ef4d4 100644
--- a/extensions/amp-story-auto-ads/OWNERS
+++ b/extensions/amp-story-auto-ads/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-story-auto-ads/publisher-served-ads.md b/extensions/amp-story-auto-ads/publisher-served-ads.md
index f6739e5cb8a90..c4522af5a569a 100644
--- a/extensions/amp-story-auto-ads/publisher-served-ads.md
+++ b/extensions/amp-story-auto-ads/publisher-served-ads.md
@@ -38,13 +38,13 @@ For example:
 
 A few important things to note:
 
-- Templates need to be inlined in the AMP story, as direct children of a `<amp-story-auto-ads>` element.
-- An element ID is required, so that the template can be referenced by the ad response.
-- The selected template ID will be set as an attribute of `amp-ad`: `<amp-ad template="template-1">`
-- The content inside a template should strictly follow the
-  [rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/validator-amp-story.protoascii) of `amp-story-grid-layer`
-- Be aware of the [restrictions](../amp-mustache/amp-mustache.md#restrictions) of `amp-mustache`.
-- Ads that use different templates can be styled separately using CSS attribute selector:
+-   Templates need to be inlined in the AMP story, as direct children of a `<amp-story-auto-ads>` element.
+-   An element ID is required, so that the template can be referenced by the ad response.
+-   The selected template ID will be set as an attribute of `amp-ad`: `<amp-ad template="template-1">`
+-   The content inside a template should strictly follow the
+    [rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/validator-amp-story.protoascii) of `amp-story-grid-layer`
+-   Be aware of the [restrictions](../amp-mustache/amp-mustache.md#restrictions) of `amp-mustache`.
+-   Ads that use different templates can be styled separately using CSS attribute selector:
 
 ```css
 amp-ad[template='template-1'] {
@@ -55,9 +55,9 @@ amp-ad[template='template-2'] {
 }
 ```
 
-- The CTA (call-to-action) button should NOT
-  be included in the template. Story defines a list of CTA buttons to select from.
-  For details, read the ["CTA ad" section](#cta-ad) below.
+-   The CTA (call-to-action) button should NOT
+    be included in the template. Story defines a list of CTA buttons to select from.
+    For details, read the ["CTA ad" section](#cta-ad) below.
 
 ### Ad response
 
@@ -80,16 +80,16 @@ A server endpoint needs to provide ad responses in the following JSON format:
 }
 ```
 
-- `templateId`: the ID of the inlined template that is going to be used.
-- `data`: the data model to populate the selected template. The fields should match the variable names in the selected template.
-- `vars`: extra variables needed by the story. They will be added to the `amp-ad` element as data attributes, and picked by runtime for different use cases:
-  - CTA button rendering (see details in the ["CTA ad" section](#cta-ad))
-  - Provide dynamic content of the ad for tracking purpose (see details in the "tracking" section)
+-   `templateId`: the ID of the inlined template that is going to be used.
+-   `data`: the data model to populate the selected template. The fields should match the variable names in the selected template.
+-   `vars`: extra variables needed by the story. They will be added to the `amp-ad` element as data attributes, and picked by runtime for different use cases:
+    -   CTA button rendering (see details in the ["CTA ad" section](#cta-ad))
+    -   Provide dynamic content of the ad for tracking purpose (see details in the "tracking" section)
 
 #### Response headers
 
 The ad request is an AMP CORS request, hence a couple of custom response headers are needed.
-See [AMP CORS spec](../../spec/amp-cors-requests.md) for details.
+See [AMP CORS spec](../../docs/spec/amp-cors-requests.md) for details.
 
 ### Tagging
 
diff --git a/extensions/amp-story-auto-ads/validator-amp-story-auto-ads.protoascii b/extensions/amp-story-auto-ads/validator-amp-story-auto-ads.protoascii
index 3aed4e0fecb8c..053bd1b74a84b 100644
--- a/extensions/amp-story-auto-ads/validator-amp-story-auto-ads.protoascii
+++ b/extensions/amp-story-auto-ads/validator-amp-story-auto-ads.protoascii
@@ -34,7 +34,7 @@ tags: {  # <amp-story-auto-ads>
   requires_extension: "amp-story-auto-ads"
   mandatory_parent: "AMP-STORY"
   unique: true
-  spec_url: "https://amp.dev/documentation/components/amp-story-auto-ads"
+  spec_url: "https://amp.dev/documentation/components/amp-story-auto-ads/"
 }
 tags: {  # amp-story-auto-ads (json config)
   html_format: AMP
@@ -55,7 +55,7 @@ tags: {  # amp-story-auto-ads (json config)
       error_message: "html comments"
     }
   }
-  spec_url: "https://amp.dev/documentation/components/amp-story-auto-ads"
+  spec_url: "https://amp.dev/documentation/components/amp-story-auto-ads/"
 }
 # HTML5, 4.11.3 The template element
 tags: {
diff --git a/extensions/amp-story-auto-analytics/0.1/amp-story-auto-analytics.js b/extensions/amp-story-auto-analytics/0.1/amp-story-auto-analytics.js
new file mode 100644
index 0000000000000..1321059f2af60
--- /dev/null
+++ b/extensions/amp-story-auto-analytics/0.1/amp-story-auto-analytics.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {Services} from '../../../src/services';
+import {buildGtagConfig} from './auto-analytics-configs.js';
+import {devAssert} from '../../../src/log';
+import {htmlFor} from '../../../src/static-template';
+
+const buildAutoAnalyticsTemplate = (element) => {
+  const html = htmlFor(element);
+  return html` <amp-analytics data-credentials="include" type="gtag">
+    <script type="application/json"></script>
+  </amp-analytics>`;
+};
+
+export class AmpStoryAutoAnalytics extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+  }
+
+  /** @override */
+  buildCallback() {
+    Services.extensionsFor(this.win).installExtensionForDoc(
+      this.getAmpDoc(),
+      'amp-analytics'
+    );
+    const analyticsEl = buildAutoAnalyticsTemplate(this.element);
+    const configEl = analyticsEl.querySelector('script');
+    const gtagId = devAssert(this.element.getAttribute('gtag-id'));
+    const analyticsJson = buildGtagConfig(gtagId);
+    configEl.textContent = JSON.stringify(analyticsJson);
+    this.element.appendChild(analyticsEl);
+  }
+
+  /** @override */
+  isLayoutSupported(unusedLayout) {
+    return true;
+  }
+}
+
+AMP.extension('amp-story-auto-analytics', '0.1', (AMP) => {
+  AMP.registerElement('amp-story-auto-analytics', AmpStoryAutoAnalytics);
+});
diff --git a/extensions/amp-story-auto-analytics/0.1/auto-analytics-configs.js b/extensions/amp-story-auto-analytics/0.1/auto-analytics-configs.js
new file mode 100644
index 0000000000000..bf30f7504fe43
--- /dev/null
+++ b/extensions/amp-story-auto-analytics/0.1/auto-analytics-configs.js
@@ -0,0 +1,89 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @param {string} gtagId
+ * @return {!Object}
+ */
+export const buildGtagConfig = (gtagId) => ({
+  'vars': {
+    'gtag_id': gtagId,
+  },
+  'triggers': {
+    'storyPageCount': {
+      'on': 'story-content-loaded',
+      'vars': {
+        'event_name': 'custom',
+        'event_action': 'story_page_count',
+        'event_category': '${title}',
+        'event_label': '${storyPageCount}',
+        'send_to': [gtagId],
+      },
+      'storySpec': {
+        // Makes sure the event is only fired once.
+        'repeat': false,
+      },
+    },
+    'storyEnd': {
+      'on': 'story-last-page-visible',
+      'vars': {
+        'event_name': 'custom',
+        'event_action': 'story_complete',
+        'event_category': '${title}',
+        'event_label': '${title}',
+        'send_to': [gtagId],
+      },
+      'storySpec': {
+        // Makes sure the event is only fired once.
+        'repeat': false,
+      },
+    },
+    'storyPageIndex': {
+      'on': 'story-page-visible',
+      'vars': {
+        'event_name': 'custom',
+        'event_action': 'story_pages_viewed',
+        'event_category': '${title}',
+        'event_label': '${storyPageIndex}',
+        'send_to': [gtagId],
+      },
+      'storySpec': {
+        // Makes sure the event is only fired once.
+        'repeat': false,
+      },
+    },
+  },
+  // Linkers stitch sessions between cache and origin together using cid.
+  'linkers': {
+    'ampStoryAutoAnalyticsLinker': {
+      'ids': {
+        'cid': '${clientId}',
+      },
+      'enabled': true,
+      // Makes sure URL is decorated from origin to cache. (Default is cache to
+      // origin only).
+      'proxyOnly': false,
+    },
+  },
+  // CookieWriter config is used to extract the url params and store them into
+  // cookies.
+  'cookies': {
+    'ampStoryAutoAnalyticsCookies': {
+      // Reads URL linker params and stores them as cookies.
+      'value': 'LINKER_PARAM(ampStoryAutoAnalyticsLinker, cid)',
+    },
+  },
+});
diff --git a/extensions/amp-story-auto-analytics/0.1/test/test-amp-story-auto-analytics.js b/extensions/amp-story-auto-analytics/0.1/test/test-amp-story-auto-analytics.js
new file mode 100644
index 0000000000000..bfe2b215bc295
--- /dev/null
+++ b/extensions/amp-story-auto-analytics/0.1/test/test-amp-story-auto-analytics.js
@@ -0,0 +1,97 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import '../amp-story-auto-analytics';
+import {createElementWithAttributes} from '../../../../src/dom';
+
+describes.realWin(
+  'amp-story-auto-analytics',
+  {
+    amp: {
+      runtimeOn: true,
+      extensions: ['amp-story-auto-analytics'],
+    },
+  },
+  (env) => {
+    let win;
+    let autoAnalyticsEl;
+
+    beforeEach(() => {
+      win = env.win;
+      autoAnalyticsEl = createElementWithAttributes(
+        win.document,
+        'amp-story-auto-analytics',
+        {
+          'gtag-id': 'ANALYTICS-ID',
+        }
+      );
+      win.document.body.appendChild(autoAnalyticsEl);
+    });
+
+    it('should contain the analytics ID in the script when built', async () => {
+      await autoAnalyticsEl.whenBuilt();
+      expect(autoAnalyticsEl.querySelector('script').textContent).to.contain(
+        'ANALYTICS-ID'
+      );
+    });
+
+    it('should set the type to gtag', async () => {
+      await autoAnalyticsEl.whenBuilt();
+      expect(autoAnalyticsEl.querySelector('amp-analytics[type="gtag"]')).to
+        .exist;
+    });
+
+    it('should add linker config', async () => {
+      await autoAnalyticsEl.whenBuilt();
+      const config = {
+        'linkers': {
+          'ampStoryAutoAnalyticsLinker': {
+            'ids': {
+              'cid': '${clientId}',
+            },
+            'enabled': true,
+            'proxyOnly': false,
+          },
+        },
+      };
+
+      const strConfig = JSON.stringify(config);
+      const configContents = strConfig.substr(1, strConfig.length - 2);
+
+      expect(autoAnalyticsEl.querySelector('script').textContent).to.contain(
+        configContents
+      );
+    });
+
+    it('should add cookieWriter config', async () => {
+      await autoAnalyticsEl.whenBuilt();
+      const config = {
+        'cookies': {
+          'ampStoryAutoAnalyticsCookies': {
+            'value': 'LINKER_PARAM(ampStoryAutoAnalyticsLinker, cid)',
+          },
+        },
+      };
+
+      const strConfig = JSON.stringify(config);
+      const configContents = strConfig.substr(1, strConfig.length - 2);
+
+      expect(autoAnalyticsEl.querySelector('script').textContent).to.contain(
+        configContents
+      );
+    });
+  }
+);
diff --git a/extensions/amp-story-auto-analytics/0.1/test/validator-amp-story-auto-analytics.html b/extensions/amp-story-auto-analytics/0.1/test/validator-amp-story-auto-analytics.html
new file mode 100644
index 0000000000000..8031e50419590
--- /dev/null
+++ b/extensions/amp-story-auto-analytics/0.1/test/validator-amp-story-auto-analytics.html
@@ -0,0 +1,43 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for a proper auto-analytics component with a gtag
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>STAMP auto analytics</title>
+  <link rel="canonical" href="http://nonblocking.io/" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <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-auto-analytics" src="https://cdn.ampproject.org/v0/amp-story-auto-analytics-0.1.js"></script>
+</head>
+<body>
+  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/poster.jpg">
+    <!-- Valid: has correct gtag attribute and value -->
+    <amp-story-auto-analytics gtag-id="UA-ANALYTICS"></amp-story-auto-analytics>
+    <amp-story-page id="cover" auto-advance-after="1s">
+      <amp-story-grid-layer template="fill">
+        <h1>Title</h1>
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/extensions/amp-story-auto-analytics/0.1/test/validator-amp-story-auto-analytics.out b/extensions/amp-story-auto-analytics/0.1/test/validator-amp-story-auto-analytics.out
new file mode 100644
index 0000000000000..f10dc86be50fd
--- /dev/null
+++ b/extensions/amp-story-auto-analytics/0.1/test/validator-amp-story-auto-analytics.out
@@ -0,0 +1,44 @@
+PASS
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for a proper auto-analytics component with a gtag
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <title>STAMP auto analytics</title>
+|    <link rel="canonical" href="http://nonblocking.io/" >
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <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>
+|    <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-auto-analytics" src="https://cdn.ampproject.org/v0/amp-story-auto-analytics-0.1.js"></script>
+|  </head>
+|  <body>
+|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/poster.jpg">
+|      <!-- Valid: has correct gtag attribute and value -->
+|      <amp-story-auto-analytics gtag-id="UA-ANALYTICS"></amp-story-auto-analytics>
+|      <amp-story-page id="cover" auto-advance-after="1s">
+|        <amp-story-grid-layer template="fill">
+|          <h1>Title</h1>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|    </amp-story>
+|  </body>
+|  </html>
diff --git a/extensions/amp-story-auto-analytics/OWNERS b/extensions/amp-story-auto-analytics/OWNERS
new file mode 100644
index 0000000000000..055b1d21b1d15
--- /dev/null
+++ b/extensions/amp-story-auto-analytics/OWNERS
@@ -0,0 +1,21 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {
+          name: 'gmajoulet',
+          notify: true,
+        },
+        {
+          name: 'mszylkowski',
+          notify: true,
+        },
+        {name: 'enriqe'},
+        {name: 'newmuis'},
+      ],
+    },
+  ],
+}
diff --git a/extensions/amp-story-auto-analytics/amp-story-auto-analytics.md b/extensions/amp-story-auto-analytics/amp-story-auto-analytics.md
new file mode 100644
index 0000000000000..919199c84f07a
--- /dev/null
+++ b/extensions/amp-story-auto-analytics/amp-story-auto-analytics.md
@@ -0,0 +1,73 @@
+---
+$category@: ads-analytics
+formats:
+  - stories
+teaser:
+  text: Automatically generates analytics configs for stories.
+---
+
+<!--
+Copyright 2021 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.
+-->
+
+# Usage
+
+The `amp-story-auto-analytics` component configures [`amp-analytics`](https://amp.dev/documentation/components/amp-analytics/) on a story with useful analytics events for a Google Analytics gtag.
+
+```html
+<amp-story>
+  <amp-story-auto-analytics gtag-id="UA-123456789-0"></amp-story-auto-analytics>
+</amp-story>
+```
+
+# Attributes
+
+## gtag-id (required)
+
+Google Analytics ID used to link the story to the analytics account.
+
+# Triggers
+
+The following analytics triggers are dispatched when using the `amp-story-auto-analytics` component:
+
+## `storyPageCount`
+
+Fired once per story view. It includes the following parameters:
+
+| Parameter             | Value                                                           |
+| --------------------- | --------------------------------------------------------------- |
+| `ea` (event_action)   | `story_page_count`                                              |
+| `ec` (event_category) | Title of the story (`<title>` tag in the HTML of the Web Story) |
+| `el` (event_label)    | Length of the story in number of pages                          |
+
+## `storyEnd`
+
+Fired once the last page of the story has been viewed. It includes the following parameters:
+
+| Parameter             | Value                                                           |
+| --------------------- | --------------------------------------------------------------- |
+| `ea` (event_action)   | `story_complete`                                                |
+| `ec` (event_category) | Title of the story (`<title>` tag in the HTML of the Web Story) |
+| `el` (event_label)    | Title of the story (`<title>` tag in the HTML of the Web Story) |
+
+## `storyPageIndex`
+
+Fired once a page has been viewed. It includes the following parameters:
+
+| Parameter             | Value                                                           |
+| --------------------- | --------------------------------------------------------------- |
+| `ea` (event_action)   | `story_pages_viewed`                                            |
+| `ec` (event_category) | Title of the story (`<title>` tag in the HTML of the Web Story) |
+| `el` (event_label)    | Index of the page viewed (starting with index 0)                |
diff --git a/extensions/amp-story-auto-analytics/validator-amp-story-auto-analytics.protoascii b/extensions/amp-story-auto-analytics/validator-amp-story-auto-analytics.protoascii
new file mode 100644
index 0000000000000..63ceb2ae1ca37
--- /dev/null
+++ b/extensions/amp-story-auto-analytics/validator-amp-story-auto-analytics.protoascii
@@ -0,0 +1,36 @@
+#
+# Copyright 2021 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.
+#
+
+tags: {  # amp-story-auto-analytics
+  html_format: AMP
+  tag_name: "SCRIPT"
+  extension_spec: {
+    name: "amp-story-auto-analytics"
+    version: "0.1"
+    version: "latest"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # <amp-story-auto-analytics>
+  html_format: AMP
+  tag_name: "AMP-STORY-AUTO-ANALYTICS"
+  requires_extension: "amp-story-auto-analytics"
+  attrs: {
+    name: "gtag-id"
+    mandatory: true
+    value_regex: "[A-Z]{1,2}-[A-Z0-9-]+"
+  }
+}
diff --git a/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-debug.css b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-debug.css
new file mode 100644
index 0000000000000..07b67265f7764
--- /dev/null
+++ b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-debug.css
@@ -0,0 +1,156 @@
+/**
+ * Copyright 2020 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.
+ */
+
+amp-story-dev-tools-tab-debug {
+  overflow-y: auto !important;
+  padding: var(--i-amphtml-story-dev-tools-vertical-spacing) 10% !important;
+}
+
+amp-story-dev-tools-tab-debug::-webkit-scrollbar {
+  width: 8px !important;
+}
+amp-story-dev-tools-tab-debug::-webkit-scrollbar-thumb {
+  background-color: var(--i-amphtml-story-dev-tools-white-transparent-1) !important;
+  border-radius: 3px !important;
+}
+amp-story-dev-tools-tab-debug::-webkit-scrollbar-thumb:hover {
+  background-color: var(--i-amphtml-story-dev-tools-white-transparent-2) !important;
+}
+
+.i-amphtml-story-dev-tools-log-status-title {
+  font-size: 16px !important;
+  display: flex !important;
+  align-items: center !important;
+  line-height: 16px !important;
+  margin-bottom: 10px !important;
+}
+
+.i-amphtml-story-dev-tools-log-status-title .i-amphtml-story-dev-tools-log-status-icon {
+  margin-inline-end: 10px !important;
+}
+
+.i-amphtml-story-dev-tools-log-message {
+  margin-bottom: 16px !important;
+  background: var(--i-amphtml-story-dev-tools-white-transparent-1) !important;
+  color: white !important;
+  position: relative !important;
+  padding: 16px !important;
+  border-radius: 16px !important;
+}
+
+.i-amphtml-story-dev-tools-log-type {
+  margin: 0 !important;
+  font-weight: 700 !important;
+  font-size: 16px !important;
+}
+
+.i-amphtml-story-dev-tools-log-position {
+  font-family: monospace !important;
+}
+
+.i-amphtml-story-dev-tools-log-spec {
+  color: white !important;
+  text-decoration: none !important;
+  position: absolute !important;
+  right: 10px !important;
+  top: 10px !important;
+  border-radius: 20px !important;
+  border: 2px solid var(--i-amphtml-story-dev-tools-white-transparent-1) !important;
+  padding: 5px 10px !important;
+  font-size: 12px !important;
+}
+
+.i-amphtml-story-dev-tools-log-spec:hover {
+  background: var(--i-amphtml-story-dev-tools-white-transparent-1) !important;
+}
+
+.i-amphtml-story-dev-tools-log-code {
+  margin-bottom: 0px !important;
+  line-height: 24px !important;
+}
+
+.i-amphtml-story-dev-tools-log-code-line {
+  text-overflow: ellipsis !important;
+  overflow-x: hidden !important;
+  display: block !important;
+}
+
+.i-amphtml-story-dev-tools-log-code-line:nth-child(2) {
+  color: var(--i-amphtml-story-dev-tools-error-color) !important;
+}
+
+.i-amphtml-story-dev-tools-log-status-icon {
+  width: 20px !important;
+  height: 20px !important;
+  background-size: contain !important;
+  display: inherit !important;
+}
+
+.i-amphtml-story-dev-tools-log-status-icon-passed {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM8 15L4 11L5.4 9.6L8 12.2L14.6 5.6L16 7L8 15Z" fill="#2DE561"/></svg>') !important;
+}
+
+.i-amphtml-story-dev-tools-log-status-icon-failed {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path xmlns="http://www.w3.org/2000/svg" d="M9.99 0C4.47 0 0 4.48 0 10C0 15.52 4.47 20 9.99 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 9.99 0ZM11 10C11 10.55 10.55 11 10 11C9.45 11 9 10.55 9 10V6C9 5.45 9.45 5 10 5C10.55 5 11 5.45 11 6V10ZM11 14C11 14.55 10.55 15 10 15C9.45 15 9 14.55 9 14C9 13.45 9.45 13 10 13C10.55 13 11 13.45 11 14Z" fill="#FF5252"/></svg>') !important;
+}
+
+.i-amphtml-story-dev-tools-tab-selector .i-amphtml-story-dev-tools-log-status-icon {
+  width: 16px !important;
+  height: 16px !important;
+  margin-inline-start: 5px !important;
+}
+
+.i-amphtml-story-dev-tools-tab-selector .i-amphtml-story-dev-tools-log-status-number-failed {
+  font-size: 10px !important;
+  background: var(--i-amphtml-story-dev-tools-error-color) !important;
+  color: black !important;
+  border-radius: 10px !important;
+  height: 16px !important;
+  width: 16px !important;
+  display: inherit !important;
+  margin-inline-start: 5px !important;
+  font-weight: bold !important;
+  display: initial !important;
+  padding: 1px !important;
+}
+
+.i-amphtml-story-dev-tools-debug-success-image {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="295" height="308" fill="none"><rect width="233.8" height="165.73" x="34" y="92.5" fill="#161725" rx="6"/><path fill="#fff" d="M262.07 261.03H39.67a9 9 0 01-8.98-8.99V96.84a9 9 0 018.99-8.98h222.4a9 9 0 018.98 8.99v155.18c.02 4.96-4.02 9-8.99 9zM39.67 91.16A5.68 5.68 0 0034 96.85v155.18a5.69 5.69 0 005.68 5.68h222.4a5.69 5.69 0 005.68-5.68V96.85a5.69 5.69 0 00-5.69-5.69H39.67z"/><path fill="#fff" d="M269.42 107H32.33V96.85a7.34 7.34 0 017.35-7.35h222.4a7.34 7.34 0 017.34 7.35V107z"/><path fill="#161725" d="M46.83 97.51a3.3 3.3 0 11-6.6.01 3.3 3.3 0 016.6 0zM56.74 97.51a3.3 3.3 0 11-6.6.01 3.3 3.3 0 016.6 0zM66.64 97.51a3.3 3.3 0 11-6.6.01 3.3 3.3 0 016.6 0z"/><path fill="#fff" d="M0 228.89c3.97-1.15 7.5-3.4 10.44-6.68a21.51 21.51 0 003.18-4.43l7.56 3.66c-.22.47-5.79 11.73-18.85 15.5L0 228.9z"/><g filter="url(#filter0_d)"><path fill="#FCF75A" d="M149.13 250.34c1.15 3.97 3.4 7.49 6.68 10.44a21.52 21.52 0 004.43 3.18l-3.66 7.56c-.48-.22-11.73-5.8-15.5-18.86l8.05-2.32z"/></g><g filter="url(#filter1_d)"><path fill="#FCF75A" d="M177.87 72.46a22.36 22.36 0 008.17 9.32 21.4 21.4 0 004.85 2.47l-2.48 8.01c-.5-.15-12.46-3.95-18.16-16.29l7.62-3.51z"/></g><path fill="#FCF75A" d="M216.8 119.93c1.65 1.72 2.81 3.4 3.53 5.13a9.9 9.9 0 01.59 6.35c-1.64 6.52-9.68 8.91-10.59 9.16l-2.23-8.1h-.02c1.77-.52 4.43-1.94 4.7-3.13.15-.62-.46-2.14-2.72-4.3l5.79-6.07.96.96z"/><path fill="#9F9AEE" d="M47.88 268.2c5.34.43 10-1.54 13.49-5.71 2.43-2.92 3.41-5.92 3.52-6.26l-7.7-2.4v-.03c0 .02-.65 1.94-2.17 3.69a7.25 7.25 0 01-6.45 2.66l-.69 8.04zM83.98 147.28c.08-.22.63-1.58 4.1-5.85 1.9-2.36 3.73-4.4 3.75-4.41l-3.5-3.14c-.07.09-1.9 2.13-3.88 4.58-3.77 4.64-4.62 6.43-4.93 7.38l4.46 1.44z"/><path fill="#79B3FF" d="M281.1 169.84c-.42 0-2.93-.14-11.81-3.44-4.89-1.8-9.22-3.66-9.26-3.69l-3.18 7.43c.18.08 4.53 1.93 9.6 3.82 9.65 3.57 13.03 3.96 14.74 3.95l-.1-8.07z"/><path fill="#4E5EAF" d="M123.9 289.63c-.27.3-2.07 2.06-10.51 6.35-4.63 2.36-8.94 4.3-8.98 4.31l3.32 7.38c.19-.09 4.5-2.01 9.31-4.48 9.17-4.67 11.75-6.9 12.9-8.17l-6.03-5.4zM181.52 241.7c-.2-.04-1.41-.33-5.42-2.65a97.79 97.79 0 01-4.16-2.52l-2.26 3.12c.08.05 2.02 1.3 4.31 2.61 4.36 2.52 5.97 3 6.8 3.15l.73-3.72z"/><g filter="url(#filter2_d)"><path fill="#79B3FF" d="M40.56 142.84c-.25.33-1.95 2.16-10.14 6.95-4.5 2.62-8.68 4.8-8.71 4.82l3.72 7.18c.19-.1 4.37-2.27 9.04-5 8.9-5.17 11.35-7.56 12.42-8.89l-6.33-5.06z"/></g><path fill="#FCF75A" d="M294.97 287.33c0-5.16-2.44-9.36-5.45-9.36-.8 0-13.27 4.82-13.27 4.82l1.38 18.54 12.9-4.82c2.48-.77 4.44-4.59 4.44-9.18z"/><path fill="#4E5EAF" d="M258 279.02a8.02 8.02 0 015.35-3.2c-11.7-7.93-28.4-19.3-35.62-24.65a4.25 4.25 0 00-5.92.86 4.25 4.25 0 00.86 5.92c6.4 4.73 21.54 17.25 33.9 27.52-.47-2.2 0-4.54 1.44-6.45z"/><path fill="#FCF75A" d="M275.1 291.63c1.38-1.86 3.82-5.4.76-7.35 0 0-5.3-3.54-12.5-8.46a8.13 8.13 0 00-6.78 9.65l18.38 15.38c3.05 2.01-1.24-7.35.14-9.22z"/><path fill="#AE9D00" d="M276.82 301.48c3 0 5.44-4.2 5.44-9.37 0-5.17-2.44-9.36-5.44-9.36-3 0-5.44 4.19-5.44 9.36 0 5.17 2.43 9.37 5.44 9.37z"/><path fill="#FCF75A" d="M279.88 291.35c0-3.25-1.3-5.69-3.01-5.69-1.72 0-3.01 2.44-3.01 5.69 0 2.1.57 3.96 1.48 4.96l.96-.9c-.67-.72-1.15-2.34-1.15-4.06 0-1.25.24-2.44.62-3.3.33-.67.72-1.1 1.1-1.1.38 0 .76.43 1.1 1.1.38.86.62 2.06.62 3.3 0 3.96-1.39 8.02-3.78 9.4.43.3.91.53 1.34.63 2.25-1.82 3.73-5.54 3.73-10.03z"/><g filter="url(#filter3_d)"><path fill="#4E5EAF" d="M139.32 73.67c2.15 5.05-7.08 13.8-20.57 19.46-13.5 5.72-26.16 6.22-28.27 1.16C88.38 89.24 82.87 8 82.87 8s54.34 60.62 56.45 65.67z"/><path fill="#9F9AEE" d="M117.55 58.14a52.33 52.33 0 01-30.71 3.28c.46 5.42.91 10.6 1.37 15.2 11.17 3.68 24.17 3.39 36.42-1.79 4.01-1.7 7.7-3.8 11.05-6.25a572.66 572.66 0 00-11.55-13.75 48.89 48.89 0 01-6.58 3.31zM100.04 27.34a51.1 51.1 0 01-15.73 1.49c.38 4.93.79 10.43 1.2 16.06a52.16 52.16 0 0027.57-2.73c-4.39-5.05-8.9-10.18-13.04-14.82z"/></g><path fill="#fff" d="M151.5 159.58a22.93 22.93 0 10.02 45.85 22.93 22.93 0 00-.02-45.85zm-4.58 34.38l-9.17-9.17 3.2-3.2 5.97 5.95 15.12-15.12 3.21 3.2-18.33 18.34z"/><defs><filter id="filter0_d" width="51.16" height="53.19" x="125.07" y="240.34" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="6"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0.0375 0 0 0 0 0.045 0 0 0 0 0.1125 0 0 0 0.56 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><filter id="filter1_d" width="54.84" height="57.72" x="153.89" y="59.99" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="6"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0.0375 0 0 0 0 0.045 0 0 0 0 0.1125 0 0 0 0.56 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><filter id="filter2_d" width="60.08" height="61.82" x="3.62" y="125.72" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0.0375 0 0 0 0 0.045 0 0 0 0 0.1125 0 0 0 1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><filter id="filter3_d" width="80.77" height="113.78" x="66.87" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-4" dy="4"/><feGaussianBlur stdDeviation="6"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs></svg>') !important;
+  width: 295px !important;
+  height: 308px !important;
+}
+
+.i-amphtml-story-dev-tools-debug-success {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  flex-direction: column !important;
+  height: 100% !important;
+  position: relative !important;
+}
+
+.i-amphtml-story-dev-tools-debug-success .i-amphtml-story-dev-tools-log-status-title {
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+}
+
+.i-amphtml-story-dev-tools-debug-success-message {
+  font-size: 28px !important;
+  font-weight: 600 !important;
+  text-align: center !important;
+  -webkit-font-smoothing: antialiased !important;
+}
diff --git a/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-debug.js b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-debug.js
new file mode 100644
index 0000000000000..eb5d078d0a1b2
--- /dev/null
+++ b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-debug.js
@@ -0,0 +1,253 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Services} from '../../../src/services';
+import {createElementWithAttributes} from '../../../src/dom';
+import {htmlFor} from '../../../src/static-template';
+import {loadScript} from '../../../src/validator-integration';
+import {urls} from '../../../src/config';
+import {user, userAssert} from '../../../src/log';
+
+/**
+ * Creates a tab content, will be deleted when the tabs get implemented.
+ * @param {!Window} win
+ * @param {string} storyUrl
+ * @return {!Element} the layout
+ */
+export function createTabDebugElement(win, storyUrl) {
+  const element = win.document.createElement('amp-story-dev-tools-tab-debug');
+  element.setAttribute('data-story-url', storyUrl);
+  return element;
+}
+
+/**
+ * Creates the success message when there are no errors.
+ * @param {!ELement} element
+ * @return {!Element} the layout
+ */
+const buildSuccessMessageTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`<div class="i-amphtml-story-dev-tools-debug-success">
+    <div class="i-amphtml-story-dev-tools-debug-success-image"></div>
+    <h1 class="i-amphtml-story-dev-tools-debug-success-message">
+      Great Job!<br />No issues found
+    </h1>
+  </div>`;
+};
+
+/**
+ * Returns a "failed" or "passed" icon from the status
+ * @param {!Element} element
+ * @param {boolean} statusPassed
+ * @return {!Element}
+ */
+function buildStatusIcon(element, statusPassed) {
+  const html = htmlFor(element);
+  const iconEl = html`<div
+    class="i-amphtml-story-dev-tools-log-status-icon"
+  ></div>`;
+  iconEl.classList.add(
+    'i-amphtml-story-dev-tools-log-status-icon-' +
+      (statusPassed ? 'passed' : 'failed')
+  );
+  return iconEl;
+}
+
+const buildLogMessageTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`<div class="i-amphtml-story-dev-tools-log-message">
+    <div>
+      <span class="i-amphtml-story-dev-tools-log-type"></span>
+      <span> at </span>
+      <span class="i-amphtml-story-dev-tools-log-position"></span>
+    </div>
+    <span class="i-amphtml-story-dev-tools-log-description"></span>
+    <a class="i-amphtml-story-dev-tools-log-spec" target="_blank">Learn more</a>
+    <pre class="i-amphtml-story-dev-tools-log-code"></pre>
+  </div>`;
+};
+
+/** @const {string} */
+const TAG = 'AMP_STORY_DEV_TOOLS_DEBUG';
+
+export class AmpStoryDevToolsTabDebug extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return false;
+  }
+
+  /** @param {!Element} element */
+  constructor(element) {
+    super(element);
+
+    /** @private  {string} */
+    this.storyUrl_ = '';
+
+    /** @private {!Array} */
+    this.errorList_ = [];
+  }
+
+  /** @override */
+  isLayoutSupported() {
+    return true;
+  }
+
+  /** @override */
+  buildCallback() {
+    this.storyUrl_ = this.element.getAttribute('data-story-url');
+    this.element.classList.add('i-amphtml-story-dev-tools-tab');
+    return loadScript(this.element.ownerDocument, `${urls.cdn}/v0/validator.js`)
+      .then(() =>
+        this.validateUrl_(/* global amp: false */ amp.validator, this.storyUrl_)
+      )
+      .then((errorList) => {
+        this.errorList_ = errorList;
+        this.updateDebugTabIcon(errorList);
+      });
+  }
+
+  /** @override */
+  layoutCallback() {
+    return this.buildDebugContent_();
+  }
+
+  /**
+   * Validates a URL input, showing the errors on the screen.
+   *
+   * @private
+   * @param {!Validator} validator
+   * @param {string} url
+   * @return {!Promise<Array>} promise of list of errors
+   */
+  validateUrl_(validator, url) {
+    return Services.xhrFor(this.win)
+      .fetchText(url)
+      .then((response) => {
+        userAssert(response.ok, 'Invalid story url');
+        return response.text();
+      })
+      .then((html) => {
+        const htmlLines = html.split('\n');
+        const validationResult = validator.validateString(html);
+        return validationResult.errors.map((error) => {
+          error.htmlLines = htmlLines.slice(error.line - 2, error.line + 3);
+          error.message = validator.renderErrorMessage(error);
+          return error;
+        });
+      })
+      .catch((error) => {
+        user().error(TAG, error);
+      });
+  }
+
+  /**
+   * @private
+   * @return {!Promise}
+   */
+  buildDebugContent_() {
+    const debugContainer = this.errorList_.length
+      ? this.createErrorsList_()
+      : buildSuccessMessageTemplate(this.element);
+    debugContainer.prepend(this.buildDebugTitle_(this.errorList_.length));
+    this.mutateElement(() => {
+      this.element.textContent = '';
+      this.element.appendChild(debugContainer);
+    });
+  }
+
+  /**
+   *
+   * @private
+   * @param {number} errorCount
+   * @return {!Element}
+   */
+  buildDebugTitle_(errorCount) {
+    const statusIcon = buildStatusIcon(this.element, errorCount == 0);
+    statusIcon.classList.add('i-amphtml-story-dev-tools-log-status-icon');
+    const title = htmlFor(
+      this.element
+    )`<div class="i-amphtml-story-dev-tools-log-status-title"></div>`;
+    const statusText = htmlFor(this.element)`<span></span>`;
+    statusText.textContent = errorCount
+      ? `Failed - ${errorCount} errors`
+      : 'Passed';
+    title.appendChild(statusIcon);
+    title.appendChild(statusText);
+    return title;
+  }
+
+  /**
+   * Updates the icon (passed / failed) next to the debug tab selector.
+   * @param {!Array} errorList
+   */
+  updateDebugTabIcon(errorList) {
+    const debugTabSelector =
+      this.win.document.querySelector('[data-tab="Debug"]');
+    if (!debugTabSelector) {
+      return;
+    }
+    let statusIcon;
+    if (errorList.length) {
+      statusIcon = createElementWithAttributes(
+        this.element.ownerDocument,
+        'span',
+        {
+          'class': 'i-amphtml-story-dev-tools-log-status-number-failed',
+        }
+      );
+      statusIcon.textContent = errorList.length;
+    } else {
+      statusIcon = buildStatusIcon(this.element, true);
+    }
+    this.mutateElement(() => debugTabSelector.appendChild(statusIcon));
+  }
+
+  /**
+   * @private
+   * @return {!Element}
+   */
+  createErrorsList_() {
+    const debugContainer = this.element.ownerDocument.createElement('div');
+    this.errorList_.forEach((content) => {
+      const logEl = buildLogMessageTemplate(this.element);
+      logEl.querySelector('.i-amphtml-story-dev-tools-log-type').textContent =
+        content.code;
+      const codeEl = logEl.querySelector('.i-amphtml-story-dev-tools-log-code');
+      content.htmlLines.forEach((l, i) => {
+        const lineEl = this.element.ownerDocument.createElement('span');
+        lineEl.classList.add('i-amphtml-story-dev-tools-log-code-line');
+        lineEl.textContent = (i + content.line - 1).toString() + '|' + l;
+        codeEl.appendChild(lineEl);
+      });
+      logEl.querySelector(
+        '.i-amphtml-story-dev-tools-log-position'
+      ).textContent = `${content.line}:${content.col}`;
+      logEl.querySelector(
+        '.i-amphtml-story-dev-tools-log-description'
+      ).textContent = content.message;
+      const specUrlElement = logEl.querySelector(
+        '.i-amphtml-story-dev-tools-log-spec'
+      );
+      if (content.specUrl) {
+        specUrlElement.href = content.specUrl;
+      } else {
+        specUrlElement.remove();
+      }
+      debugContainer.appendChild(logEl);
+    });
+    return debugContainer;
+  }
+}
diff --git a/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.css b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.css
new file mode 100644
index 0000000000000..7b156087d418d
--- /dev/null
+++ b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.css
@@ -0,0 +1,589 @@
+/**
+ * Copyright 2020 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.
+ */
+
+ amp-story-dev-tools-tab-preview {
+  --i-amphtml-story-dev-tools-device-shadow: 0px 11.0046px 27.5114px rgba(0, 0, 0, 0.34), inset 0px 2.20091px 3.30137px rgba(44, 46, 52, 0.6) !important;
+  padding: var(--i-amphtml-story-dev-tools-vertical-spacing) 10% !important;
+  padding-bottom: calc(var(--i-amphtml-story-dev-tools-vertical-spacing) + 64px) !important;
+}
+
+.i-amphtml-story-dev-tools-devices-container {
+  width: 100% !important;
+  height: 100% !important;
+  position: relative;
+}
+
+.i-amphtml-story-dev-tools-device {
+  background: var(--i-amphtml-story-dev-tools-gray-1) !important;
+  border-radius: 40px !important;
+  box-shadow: var(--i-amphtml-story-dev-tools-device-shadow) !important;
+  overflow: hidden !important;
+  position: absolute !important;
+  margin: auto !important;
+  height: fit-content !important;
+  top: 0 !important;
+  bottom: var(--i-amphtml-story-dev-tools-vertical-spacing) !important;
+  padding: 10px 8px !important;
+  transition: transform var(--i-amphtml-story-dev-tools-material-easing-standard) 0.15s !important;
+  /* Fades in after transition:transform ends (above) so devices are in place before the fade-in */
+  animation: i-amphtml-story-dev-tools-fade-in 0.3s var(--i-amphtml-story-dev-tools-material-easing-decelerated) !important;
+}
+
+@keyframes i-amphtml-story-dev-tools-fade-in {
+  0% {opacity: 0; }
+  50% {opacity: 0; }
+  100% {opacity: 1; }
+}
+
+.i-amphtml-story-dev-tools-device-screen {
+  border-radius: 30px !important;
+  background: var(--i-amphtml-story-dev-tools-gray-2) !important;
+  overflow: hidden !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+amp-story-player a {
+  display: none !important;
+}
+
+.i-amphtml-story-dev-tools-device-chips-container {
+  position: absolute !important;
+  bottom: var(--i-amphtml-story-dev-tools-vertical-spacing) !important;
+  width: 80% !important;
+  text-align: center !important;
+}
+
+.i-amphtml-story-dev-tools-device-chip {
+  --i-amphtml-story-dev-tools-device-chip-background: var(--i-amphtml-story-dev-tools-gray-3) !important;
+  --i-amphtml-story-dev-tools-device-chip-background-hover: var(--i-amphtml-story-dev-tools-gray-4) !important;
+  --i-amphtml-story-dev-tools-device-chip-icon-background: black !important;
+  color: white !important;
+  border-radius: 16px !important;
+  background: var(--i-amphtml-story-dev-tools-device-chip-background) !important;
+  border: 1px solid var(--i-amphtml-story-dev-tools-device-chip-background) !important;
+  height: 32px !important;
+  font-size: 13px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  padding-inline-start: 10px !important;
+  padding-inline-end: 6px !important;
+  margin: 0 5px !important;
+  white-space: nowrap !important;
+  cursor: pointer !important;
+  outline: none !important;
+}
+
+.i-amphtml-story-dev-tools-device-chip:hover, .i-amphtml-story-dev-tools-device-chip:focus {
+  background: var(--i-amphtml-story-dev-tools-device-chip-background-hover) !important;
+}
+
+.i-amphtml-story-dev-tools-device-chip svg {
+  background: var(--i-amphtml-story-dev-tools-device-chip-icon-background) !important;
+  border-radius: 50% !important;
+  padding: 2px !important;
+  margin-inline-start: 10px !important;
+  transition: transform 0.2s var(--i-amphtml-story-dev-tools-material-easing-standard) !important;
+}
+
+.i-amphtml-story-dev-tools-device-chip[inactive] {
+  --i-amphtml-story-dev-tools-device-chip-background: transparent !important;
+  --i-amphtml-story-dev-tools-device-chip-background-hover: var(--i-amphtml-story-dev-tools-gray-1) !important;
+  --i-amphtml-story-dev-tools-device-chip-icon-background: var(--i-amphtml-story-dev-tools-white-transparent-1) !important;
+  border: 1px solid var(--i-amphtml-story-dev-tools-device-chip-icon-background) !important;
+}
+
+.i-amphtml-story-dev-tools-device-chip[disabled] {
+  cursor: initial !important;
+  --i-amphtml-story-dev-tools-device-chip-background-hover: var(--i-amphtml-story-dev-tools-device-chip-background) !important;
+  opacity: 0.2 !important;
+}
+
+.i-amphtml-story-dev-tools-device-chip[inactive] svg {
+  transform: rotate(90deg) !important;
+}
+
+/* Removes the second line in the + (to convert to -) when the device is selected (not inactive) */
+.i-amphtml-story-dev-tools-device-chip:not([inactive]):not(.i-amphtml-story-dev-tools-add-device) .i-amphtml-story-dev-tools-device-chip-add-stick {
+  fill: transparent !important;
+}
+
+.i-amphtml-story-dev-tools-device-chip.i-amphtml-story-dev-tools-add-device {
+  background: var(--i-amphtml-story-dev-tools-accent) !important;
+  color: black !important;
+}
+
+.i-amphtml-story-dev-tools-device-chip.i-amphtml-story-dev-tools-add-device svg {
+  fill: var(--i-amphtml-story-dev-tools-accent) !important;
+  background: black !important;
+}
+
+.i-amphtml-story-dev-tools-device-chip.i-amphtml-story-dev-tools-add-device:hover, .i-amphtml-story-dev-tools-device-chip.i-amphtml-story-dev-tools-add-device:focus {
+  background: var(--i-amphtml-story-dev-tools-accent-light) !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-bg {
+  position: fixed !important;
+  left: 0 !important;
+  top: 0 !important;
+  height: 100% !important;
+  width: 100% !important;
+  background: transparent !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  z-index: 1 !important;
+  transition: background 0.2s var(--i-amphtml-story-dev-tools-material-easing-standard) !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-container {
+  background: black !important;
+  width: min(650px, 90%) !important;
+  border-radius: 30px !important;
+  padding: 40px !important;
+  position: relative !important;
+  transition: transform 0.2s var(--i-amphtml-story-dev-tools-material-easing-accelerated), opacity 0.2s var(--i-amphtml-story-dev-tools-material-easing-accelerated) !important;
+  transform: translateY(5vh) !important;
+  opacity: 0 !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-bg[active] {
+  background: var(--i-amphtml-story-dev-tools-gray-transparent-1) !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-bg[active] .i-amphtml-story-dev-tools-device-dialog-container  {
+  transform: translateY(0) !important;
+  opacity: 1 !important;
+  transition: transform 0.2s var(--i-amphtml-story-dev-tools-material-easing-decelerated), opacity 0.2s var(--i-amphtml-story-dev-tools-material-easing-decelerated) !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-container h1 {
+  font-size: 12px !important;
+  text-transform: uppercase !important;
+  opacity: .4 !important;
+  letter-spacing: 1px !important;
+  font-weight: normal !important;
+  margin: 0px !important;
+  margin-bottom: 5px !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-container h1:not(:first-child) {
+  margin-top: 25px !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-container.i-amphtml-story-dev-tools-device-dialog-add-devices h1 {
+  margin-inline-start: 15px !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-link {
+  color: var(--i-amphtml-story-dev-tools-white-transparent-4) !important;
+  text-decoration: none !important;
+  display: block !important;
+  padding: 10px 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-link:hover {
+  color: white !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-link:not(:last-child) {
+  border-bottom: 1px solid var(--i-amphtml-story-dev-tools-white-transparent-1) !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-arrow {
+  background: url('data:image/svg+xml;charset=utf-8, <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M15.9998 10.6667L15.0598 11.6067L18.7798 15.3333H10.6665V16.6667H18.7798L15.0598 20.3933L15.9998 21.3333L21.3332 16L15.9998 10.6667Z" fill="white"/></svg>') !important;
+  width: 32px !important;
+  height: 32px !important;
+  opacity: 0.6 !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-link:hover .i-amphtml-story-dev-tools-device-dialog-arrow {
+  opacity: 1 !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-container .i-amphtml-story-dev-tools-device-chip {
+  margin: 4px !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-close {
+  cursor: pointer !important;
+  width: 40px !important;
+  height: 40px !important;
+  position: absolute !important;
+  top: 6px !important;
+  right: 6px !important;
+  opacity: .6 !important;
+  background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>') !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  border: none !important;
+  outline: none !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-close:hover, .i-amphtml-story-dev-tools-device-dialog-close:focus {
+  opacity: 1 !important;
+}
+
+.i-amphtml-story-dev-tools-button-help {
+  position: absolute !important;
+  right: 0 !important;
+}
+
+.i-amphtml-story-dev-tools-button-icon {
+  background: var(--i-amphtml-story-dev-tools-accent)!important;
+  width: 20px !important;
+  height: 20px !important;
+  margin-inline-start: 10px !important;
+  position: relative !important;
+  border-radius: 50% !important;
+}
+
+.i-amphtml-story-dev-tools-button-icon:after {
+  content: '' !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  width: 100% !important;
+  height: 100% !important;
+  position: absolute !important;
+  left: 0 !important;
+}
+
+.i-amphtml-story-dev-tools-button-help-icon:after {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 8 14" fill="black"><path d="M2.97362 9.56098V8.7832C2.97362 8.15086 3.10152 7.61969 3.35731 7.1897C3.61311 6.74706 4.05436 6.25384 4.68106 5.71003C5.06475 5.36856 5.3717 5.05239 5.60192 4.76152C5.83213 4.458 5.94724 4.08491 5.94724 3.64228C5.94724 3.1617 5.77458 2.757 5.42926 2.42818C5.09672 2.09937 4.6235 1.93496 4.00959 1.93496C3.39568 1.93496 2.91607 2.11834 2.57074 2.4851C2.22542 2.83921 1.98241 3.22493 1.84173 3.64228L0 2.88347C0.140687 2.45348 0.377298 2.01716 0.709832 1.57453C1.04237 1.11924 1.47722 0.746161 2.01439 0.455285C2.56435 0.151762 3.22302 0 3.99041 0C4.78337 0 5.48042 0.158085 6.08154 0.474255C6.69544 0.790425 7.16867 1.22042 7.5012 1.76423C7.83373 2.29539 8 2.90244 8 3.58537C8 4.09124 7.90408 4.5402 7.71223 4.93225C7.53317 5.3243 7.30296 5.67209 7.02158 5.97561C6.753 6.27913 6.49081 6.55104 6.23501 6.79133C5.81295 7.17073 5.51239 7.51852 5.33333 7.83469C5.15428 8.15086 5.06475 8.54291 5.06475 9.01084V9.56098H2.97362ZM4.00959 14C3.60032 14 3.255 13.8609 2.97362 13.5827C2.70504 13.3044 2.57074 12.9693 2.57074 12.5772C2.57074 12.1852 2.70504 11.85 2.97362 11.5718C3.255 11.2936 3.60032 11.1545 4.00959 11.1545C4.40608 11.1545 4.73861 11.2936 5.00719 11.5718C5.28857 11.85 5.42926 12.1852 5.42926 12.5772C5.42926 12.9693 5.28857 13.3044 5.00719 13.5827C4.73861 13.8609 4.40608 14 4.00959 14Z"/></svg>') !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-help-tips {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-help-tips p {
+  font-size: 14px !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-help-tips .i-amphtml-story-dev-tools-device-dialog-help-hint {
+  color: var(--i-amphtml-story-dev-tools-white-transparent-3) !important;
+  border: 1px solid var(--i-amphtml-story-dev-tools-white-transparent-1) !important;
+  font-size: 12px !important;
+  padding: 10px 20px !important;
+  border-radius: 20px !important;
+  margin-inline-start: 20px !important;
+}
+
+.i-amphtml-story-dev-tools-device-dialog-help-tips .i-amphtml-story-dev-tools-device-dialog-help-hint b {
+  color: var(--i-amphtml-story-dev-tools-accent-light) !important;
+}
+
+/* Device details - hardware */
+
+.i-amphtml-story-dev-tools-device[native] .i-amphtml-story-dev-tools-device-screen {
+  background: black !important;
+}
+
+.i-amphtml-story-dev-tools-device[oneplus7pro] {
+  padding: 12px 5px !important;
+}
+
+.i-amphtml-story-dev-tools-device[oneplus5t] {
+  padding-top: 45px !important;
+  padding-bottom: 45px !important;
+}
+
+.i-amphtml-story-dev-tools-device[pixel2] {
+  padding-top: 82px !important;
+  padding-bottom: 82px !important;
+}
+
+.i-amphtml-story-dev-tools-device[pixel3] {
+  padding-top: 50px !important;
+  padding-bottom: 50px !important;
+}
+
+.i-amphtml-story-dev-tools-device[desktop] {
+  border-radius: 10px !important;
+}
+
+.i-amphtml-story-dev-tools-device[pixel2] .i-amphtml-story-dev-tools-device-screen,
+.i-amphtml-story-dev-tools-device[pixel3] .i-amphtml-story-dev-tools-device-screen,
+.i-amphtml-story-dev-tools-device[iphone8] .i-amphtml-story-dev-tools-device-screen,
+.i-amphtml-story-dev-tools-device[oneplus5t] .i-amphtml-story-dev-tools-device-screen,
+.i-amphtml-story-dev-tools-device[desktop] .i-amphtml-story-dev-tools-device-screen {
+  border-radius: 5px !important;
+}
+
+.i-amphtml-story-dev-tools-device[pixel2]::after,
+.i-amphtml-story-dev-tools-device[pixel2]::before {
+  content: "";
+  width: 157px;
+  height: 8px;
+  border-radius: 4px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  top: 40px;
+  background: var(--i-amphtml-story-dev-tools-gray-2) !important;
+}
+
+.i-amphtml-story-dev-tools-device[pixel2]::before {
+  top: auto;
+  bottom: 40px;
+}
+
+.i-amphtml-story-dev-tools-device[iphone11],
+.i-amphtml-story-dev-tools-device[iphone11pro] {
+  border-radius: 59px !important;
+  padding: 12px !important;
+}
+
+.i-amphtml-story-dev-tools-device[iphone11],
+.i-amphtml-story-dev-tools-device[iphone11pro] {
+  border-radius: 59px !important;
+  padding: 12px !important;
+}
+
+.i-amphtml-story-dev-tools-device[iphone8] {
+  padding: 90px 12px !important;
+}
+
+.i-amphtml-story-dev-tools-device[iphone11] .i-amphtml-story-dev-tools-device-screen,
+.i-amphtml-story-dev-tools-device[iphone11pro] .i-amphtml-story-dev-tools-device-screen {
+  border-radius: 47px !important;
+}
+
+.i-amphtml-story-dev-tools-device[iphone11]::after,
+.i-amphtml-story-dev-tools-device[iphone11pro]::after {
+  content: "";
+  width: 50%;
+  height: 30px;
+  border-radius: 0 0 22px 22px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  top: 10px;
+  background: var(--i-amphtml-story-dev-tools-gray-1) !important;
+}
+
+.i-amphtml-story-dev-tools-device[iphone8]::after {
+  content: "";
+  width: 54px;
+  height: 54px;
+  border-radius: 30px;
+  position: absolute;
+  bottom: 18px;
+  border: 2px solid var(--i-amphtml-story-dev-tools-gray-3) !important;
+  left: 168px;
+}
+
+/* Device details - UI */
+
+.i-amphtml-story-dev-tools-device-statusbar {
+  flex: 1 !important;
+  width: 100% !important;
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  padding: 0px 20px !important;
+  position: relative !important;
+}
+
+.i-amphtml-story-dev-tools-device[desktop] .i-amphtml-story-dev-tools-device-statusbar {
+  background: black !important;
+}
+
+.i-amphtml-story-dev-tools-device[desktop] .i-amphtml-story-dev-tools-device-statusbar::after {
+  content: "" !important;
+  width: 300px !important;
+  height: 24px !important;
+  position: absolute !important;
+  left: 20px !important;
+  bottom: 0px !important;
+  background: var(--i-amphtml-story-dev-tools-gray-2) !important;
+  border-radius: 5px 5px 0 0 !important;
+}
+
+.i-amphtml-story-dev-tools-device-statusbar-icons,
+.i-amphtml-story-dev-tools-device-statusbar-clock {
+  opacity: 0.21 !important;
+}
+
+.i-amphtml-story-dev-tools-device[android] .i-amphtml-story-dev-tools-device-statusbar-icons {
+  width: 83px !important;
+  height: 15px !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="84" height="16" fill="none"><path fill="#fff" d="M56.44 12.2h-1.47V5.07l-2.18.74V4.56l3.46-1.28h.2v8.92zm9.07 0h-5.98v-1.02l2.96-3.23c.43-.47.73-.87.91-1.19.18-.32.28-.64.28-.96 0-.43-.12-.77-.36-1.03s-.56-.39-.96-.39c-.48 0-.85.15-1.12.44-.26.3-.4.7-.4 1.2h-1.48c0-.54.12-1.02.37-1.46.25-.43.6-.77 1.05-1 .46-.25 1-.37 1.59-.37.86 0 1.54.22 2.04.65.5.44.75 1.03.75 1.8 0 .44-.13.9-.38 1.4a7.87 7.87 0 01-1.23 1.65l-2.17 2.33h4.13v1.18zm2.11-1.56c.28 0 .5.08.65.24a.8.8 0 01.22.58.8.8 0 01-.22.58c-.15.15-.37.23-.65.23a.86.86 0 01-.62-.23.77.77 0 01-.24-.58.8.8 0 01.23-.58.83.83 0 01.63-.24zm0-5.18c.28 0 .5.08.65.23a.8.8 0 01.22.59.8.8 0 01-.22.58c-.15.15-.37.23-.65.23a.86.86 0 01-.62-.23.77.77 0 01-.24-.58.8.8 0 01.23-.59.83.83 0 01.63-.23zm4.05 1.62h.9c.46 0 .82-.12 1.09-.35.26-.24.4-.57.4-1.01 0-.42-.11-.75-.34-.98-.22-.24-.56-.36-1.01-.36-.4 0-.73.12-.98.35-.26.23-.39.53-.39.9h-1.48c0-.46.12-.87.36-1.25.24-.37.58-.66 1.01-.87a3.3 3.3 0 011.46-.32c.89 0 1.58.23 2.09.67.5.45.76 1.06.76 1.86 0 .4-.13.77-.38 1.13-.26.35-.58.61-.99.8.5.16.86.42 1.11.78.26.36.39.78.39 1.28 0 .8-.28 1.43-.82 1.9-.55.48-1.27.71-2.16.71-.85 0-1.55-.23-2.1-.68a2.25 2.25 0 01-.82-1.82h1.49c0 .39.13.7.39.95s.62.37 1.06.37c.46 0 .82-.12 1.09-.37.26-.24.4-.6.4-1.06 0-.47-.15-.83-.42-1.08-.28-.25-.7-.38-1.24-.38h-.87V7.08zm11.18 1.38c0 1.28-.24 2.24-.72 2.9-.47.64-1.2.96-2.18.96-.96 0-1.68-.31-2.17-.94a4.67 4.67 0 01-.74-2.82V7.02c0-1.27.23-2.23.71-2.87.48-.64 1.21-.96 2.2-.96.96 0 1.69.31 2.16.94.48.62.73 1.55.74 2.8v1.53zM81.37 6.8c0-.84-.11-1.45-.34-1.83-.23-.4-.6-.59-1.09-.59-.48 0-.84.19-1.07.56-.22.36-.34.94-.36 1.72v2.01c0 .83.12 1.45.35 1.86.23.4.6.6 1.1.6.47 0 .82-.18 1.05-.55.23-.38.35-.97.36-1.77V6.8z"/><path fill="#fff" fill-rule="evenodd" d="M43.05 2.14v-.77H39.6v.77h-2.2v11.48h7.88V2.14h-2.23zM18 13.34h11.99V1.36L18 13.34zM.8 3.71l8 9.62 8-9.62c-2.23-1.65-5-2.63-8-2.63s-5.77.98-8 2.63z" clip-rule="evenodd"/></svg>') !important;
+}
+
+.i-amphtml-story-dev-tools-device[desktop] .i-amphtml-story-dev-tools-device-statusbar-icons {
+  width: 69px !important;
+  height: 26px !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="69" height="26" fill="none"><mask id="a" width="26.87" height="26.87" x="42.17" y=".04" fill="#000" maskUnits="userSpaceOnUse"><path fill="#fff" d="M42.17.04h26.87v26.87H42.17z"/><path d="M49.82 7.24l6.23 6.22 6.24-6.22-6.23 6.23 6.23 6.24-6.24-6.23-6.23 6.23 6.23-6.24-6.23-6.23z"/></mask><path fill="#C4C4C4" d="M49.82 7.24l6.23 6.22 6.24-6.22-6.23 6.23 6.23 6.24-6.24-6.23-6.23 6.23 6.23-6.24-6.23-6.23z"/><path fill="#fff" d="M49.82 7.24l1.06-1.07-2.12 2.13 1.06-1.06zm6.23 6.22L55 14.52l1.06 1.06 1.06-1.06-1.06-1.06zm6.24-6.22l1.06 1.06-2.12-2.13 1.06 1.07zm-6.23 6.23L55 12.41l-1.06 1.06L55 14.53l1.06-1.06zm6.23 6.24l-1.06 1.06 2.12-2.12-1.06 1.06zm-6.24-6.23l1.06-1.06-1.06-1.06L55 12.42l1.06 1.06zm-6.23 6.23l-1.06-1.06 2.12 2.12-1.06-1.06zm6.23-6.24l1.06 1.06 1.06-1.06-1.06-1.06-1.06 1.06zm-7.3-5.17L55 14.52l2.12-2.12-6.23-6.23-2.12 2.13zm8.36 6.22l6.24-6.22-2.12-2.13-6.24 6.23 2.12 2.12zm4.12-8.34L55 12.4l2.12 2.12 6.23-6.23-2.12-2.12zM55 14.53l6.23 6.24 2.12-2.12-6.23-6.24L55 14.53zm8.35 4.12l-6.24-6.23L55 14.54l6.24 6.23 2.12-2.12zm-8.36-6.23l-6.23 6.23 2.12 2.12 6.23-6.23L55 12.42zm-4.11 8.35l6.23-6.24-2.13-2.12-6.22 6.24 2.12 2.12zm6.23-8.36l-6.23-6.23-2.12 2.12 6.22 6.23 2.13-2.12z" mask="url(#a)"/><path stroke="#fff" stroke-width="3" d="M25.97 8.62h10.68v9.73H25.97zM14.09 18.52H.89"/></svg>') !important;
+}
+
+.i-amphtml-story-dev-tools-device[ios] .i-amphtml-story-dev-tools-device-statusbar-icons {
+  width: 66.7px !important;
+  height: 12px !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="67" height="12" fill="none"><rect width="21" height="10.33" x="42.83" y=".5" stroke="#fff" opacity=".35" rx="2.17"/><path fill="#fff" d="M65.33 3.67v4a2.17 2.17 0 000-4" opacity=".4"/><rect width="18" height="7.33" x="44.33" y="2" fill="#fff" rx="1.33"/><path fill="#fff" fill-rule="evenodd" d="M29.66 3.28c2.22 0 4.35.85 5.96 2.38a.3.3 0 00.43 0l1.16-1.17a.32.32 0 000-.46 10.9 10.9 0 00-15.09 0 .32.32 0 000 .46l1.16 1.16a.3.3 0 00.43 0 8.64 8.64 0 015.95-2.37zm0 3.8c1.22 0 2.4.45 3.3 1.26.12.12.31.12.43 0l1.16-1.17a.32.32 0 000-.46 7.16 7.16 0 00-9.76 0 .32.32 0 000 .46l1.15 1.17c.12.12.31.12.43 0a4.9 4.9 0 013.3-1.27zm2.32 2.55c0 .08-.04.17-.1.23l-2 2.01a.31.31 0 01-.44 0l-2-2.01a.31.31 0 01.01-.46 3.42 3.42 0 014.42 0c.07.06.1.14.1.23zM16 1h-1a1 1 0 00-1 1v8.67a1 1 0 001 1h1a1 1 0 001-1V2a1 1 0 00-1-1zm-5.67 2.33h1a1 1 0 011 1v6.34a1 1 0 01-1 1h-1a1 1 0 01-1-1V4.33a1 1 0 011-1zM6.67 5.67h-1a1 1 0 00-1 1v4a1 1 0 001 1h1a1 1 0 001-1v-4a1 1 0 00-1-1zM2 7.67H1a1 1 0 00-1 1v2a1 1 0 001 1h1a1 1 0 001-1v-2a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>') !important;
+}
+
+.i-amphtml-story-dev-tools-device[ios][iphone11] .i-amphtml-story-dev-tools-device-statusbar-clock,
+.i-amphtml-story-dev-tools-device[ios][iphone11pro] .i-amphtml-story-dev-tools-device-statusbar-clock {
+  margin-left: 15px !important;
+}
+
+.i-amphtml-story-dev-tools-device[ios] .i-amphtml-story-dev-tools-device-statusbar-clock {
+  width: 40px !important;
+  height: 12px !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="12" fill="none"><path fill="#fff" d="M3.5 11h1.89V.43H3.5L.74 2.37v1.78L3.37 2.3h.13V11zm4.49-7.44h1.77c0-1.11.73-1.88 1.88-1.88 1.1 0 1.77.74 1.77 1.7 0 .8-.32 1.31-1.66 2.66L8.1 9.73V11h7.34V9.43h-4.78v-.12l2.27-2.24c1.82-1.78 2.36-2.63 2.36-3.86 0-1.76-1.43-3.04-3.53-3.04-2.2 0-3.76 1.39-3.76 3.39zm10.61.6c.7 0 1.17-.48 1.17-1.14 0-.65-.47-1.13-1.17-1.13-.69 0-1.17.48-1.17 1.13 0 .66.48 1.14 1.17 1.14zm0 5.38c.7 0 1.17-.5 1.17-1.14 0-.65-.47-1.14-1.17-1.14-.69 0-1.17.49-1.17 1.14 0 .64.48 1.14 1.17 1.14zm5.65-3.26h1.32c1.3 0 2.1.66 2.1 1.72 0 1.02-.86 1.71-2.07 1.71-1.23 0-2.05-.63-2.14-1.61h-1.8c.08 1.91 1.66 3.16 3.96 3.16 2.28 0 3.98-1.31 3.98-3.13 0-1.44-.9-2.37-2.33-2.6v-.12c1.12-.3 1.91-1.14 1.92-2.42 0-1.51-1.26-2.82-3.5-2.82-2.3 0-3.73 1.3-3.83 3.15h1.77c.08-1.06.8-1.64 1.95-1.64 1.12 0 1.79.68 1.79 1.56 0 .96-.75 1.63-1.83 1.63h-1.3v1.41zm10.92 4.98c2.53 0 4.03-2.04 4.03-5.54S37.67.17 35.17.17c-2.51 0-4.04 2.04-4.04 5.53 0 3.51 1.5 5.56 4.04 5.56zm0-1.53c-1.34 0-2.13-1.39-2.13-4.03 0-2.61.8-4 2.13-4 1.32 0 2.12 1.38 2.12 4 0 2.65-.78 4.03-2.12 4.03z"/></svg>') !important;
+}
+
+.i-amphtml-story-dev-tools-device-appbar {
+  height: 48px !important;
+  position: relative !important;
+  align-items: center !important;
+  display: flex !important;
+  padding: 0px 15px !important;
+  justify-content: space-between !important;
+}
+
+.i-amphtml-story-dev-tools-device[ios] .i-amphtml-story-dev-tools-device-appbar {
+  height: 40px !important;
+}
+
+.i-amphtml-story-dev-tools-device[ios][browser] .i-amphtml-story-dev-tools-device-appbar-urlbar {
+  height: 28px !important;
+  background: var(--i-amphtml-story-dev-tools-white-transparent-1) !important;
+}
+
+.i-amphtml-story-dev-tools-device .i-amphtml-story-dev-tools-device-appbar-icon {
+  background: var(--i-amphtml-story-dev-tools-white-transparent-2) !important;
+  width: 24px !important;
+  height: 24px !important;
+  border-radius: 12px !important;
+  margin: 5px !important;
+}
+
+.i-amphtml-story-dev-tools-device[ios][browser] .i-amphtml-story-dev-tools-device-appbar > .i-amphtml-story-dev-tools-device-appbar-icon,
+.i-amphtml-story-dev-tools-device[ios][native] .i-amphtml-story-dev-tools-device-appbar > .i-amphtml-story-dev-tools-device-appbar-icon:last-child {
+  display: none !important;
+}
+
+.i-amphtml-story-dev-tools-device[browser] .i-amphtml-story-dev-tools-device-appbar-urlbar {
+  background: var(--i-amphtml-story-dev-tools-black-transparent-1) !important;
+  flex: 1 !important;
+  height: 40px !important;
+  border-radius: 20px !important;
+  margin: 5px !important;
+}
+
+.i-amphtml-story-dev-tools-device[desktop][browser] .i-amphtml-story-dev-tools-device-appbar-urlbar {
+  height: 34px !important;
+  border-radius: 17px !important;
+}
+
+.i-amphtml-story-dev-tools-device[ios][browser] .i-amphtml-story-dev-tools-device-bottombar {
+  height: 42px !important;
+  display: flex !important;
+  justify-content: space-around !important;
+  align-items: center !important;
+}
+
+.i-amphtml-story-dev-tools-device[ios][browser] .i-amphtml-story-dev-tools-device-bottombar > div {
+  background: var(--i-amphtml-story-dev-tools-gray-5) !important;
+  width: 30px !important;
+  height: 30px !important;
+  border-radius: 15px !important;
+}
+
+.i-amphtml-story-dev-tools-device-navigation {
+  height: 15px !important;
+  position: relative !important;
+}
+
+.i-amphtml-story-dev-tools-device[ios][native] .i-amphtml-story-dev-tools-device-navigation {
+  height: 0px !important;
+}
+
+.i-amphtml-story-dev-tools-device[ios][browser] .i-amphtml-story-dev-tools-device-navigation {
+  height: 36px !important;
+}
+
+.i-amphtml-story-dev-tools-device-navigation::after {
+  content: "" !important;
+  width: 36% !important;
+  height: 5px !important;
+  background: white !important;
+  border-radius: 5px !important;
+  position: absolute !important;
+  bottom: 5px !important;
+  left: 32% !important;
+}
+
+.i-amphtml-story-dev-tools-device[oneplus5t] .i-amphtml-story-dev-tools-device-navigation::after,
+.i-amphtml-story-dev-tools-device[oneplus7pro] .i-amphtml-story-dev-tools-device-navigation::after {
+  width: 26% !important;
+  left: 37% !important;
+  height: 4px !important;
+}
+
+.i-amphtml-story-dev-tools-device[oneplus5t] .i-amphtml-story-dev-tools-device-navigation,
+.i-amphtml-story-dev-tools-device[oneplus7pro] .i-amphtml-story-dev-tools-device-navigation {
+  background: black !important;
+}
+
+.i-amphtml-story-dev-tools-device[pixel2] .i-amphtml-story-dev-tools-device-navigation,
+.i-amphtml-story-dev-tools-device[pixel3] .i-amphtml-story-dev-tools-device-navigation {
+  background: black !important;
+  height: 48px !important;
+  flex: none !important;
+}
+
+.i-amphtml-story-dev-tools-device[pixel2] .i-amphtml-story-dev-tools-device-navigation::after,
+.i-amphtml-story-dev-tools-device[pixel3] .i-amphtml-story-dev-tools-device-navigation::after {
+  width: 8% !important;
+  left: 46% !important;
+  bottom: 0 !important;
+  top: 0 !important;
+  margin: auto !important;
+  height: 10px !important;
+}
+
+.i-amphtml-story-dev-tools-device[pixel2] .i-amphtml-story-dev-tools-device-navigation::before,
+.i-amphtml-story-dev-tools-device[pixel3] .i-amphtml-story-dev-tools-device-navigation::before {
+  content: "" !important;
+  position: absolute !important;
+  left: 20% !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  margin: auto !important;
+  width: 7px !important;
+  height: 11px !important;
+  background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="12" viewBox="0 0 7 12" fill="none"><path d="M6.93996 1.60675L5.99996 0.666748L0.666626 6.00008L5.99996 11.3334L6.93996 10.3934L2.55329 6.00008" fill="white"/></svg>') !important;
+}
+
+.i-amphtml-story-dev-tools-device[iphone8] .i-amphtml-story-dev-tools-device-navigation,
+.i-amphtml-story-dev-tools-device[ipad] .i-amphtml-story-dev-tools-device-navigation,
+.i-amphtml-story-dev-tools-device[desktop] .i-amphtml-story-dev-tools-device-navigation,
+.i-amphtml-story-dev-tools-device[ios][browser][ipad] .i-amphtml-story-dev-tools-device-bottombar,
+.i-amphtml-story-dev-tools-device[ios][native] .i-amphtml-story-dev-tools-device-bottombar,
+.i-amphtml-story-dev-tools-device[android][browser] .i-amphtml-story-dev-tools-device-bottombar,
+.i-amphtml-story-dev-tools-device[desktop][browser] .i-amphtml-story-dev-tools-device-bottombar {
+  display: none !important;
+}
diff --git a/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.js b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.js
new file mode 100644
index 0000000000000..cc178f5f397d8
--- /dev/null
+++ b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.js
@@ -0,0 +1,848 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {AmpStoryPlayer} from '../../../src/amp-story-player/amp-story-player-impl';
+import {
+  addAttributeAfterTimeout,
+  removeAfterTimeout,
+  updateHash,
+} from './utils';
+import {closest} from '../../../src/dom';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
+import {htmlFor} from '../../../src/static-template';
+import {observeContentSize} from '../../../src/utils/size-observer';
+import {setStyles} from '../../../src/style';
+
+/**
+ * Creates a tab content, will be deleted when the tabs get implemented.
+ * @param {!Window} win
+ * @param {string} storyUrl
+ * @param {?string} devices
+ * @return {!Element} the layout
+ */
+export function createTabPreviewElement(win, storyUrl, devices) {
+  const element = win.document.createElement('amp-story-dev-tools-tab-preview');
+  element.setAttribute('data-story-url', storyUrl);
+  devices ? element.setAttribute('data-devices', devices) : null;
+  return element;
+}
+
+/**
+ * Generates the template for a device.
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildDeviceTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`
+    <div class="i-amphtml-story-dev-tools-device">
+      <div class="i-amphtml-story-dev-tools-device-screen">
+        <div class="i-amphtml-story-dev-tools-device-statusbar">
+          <div class="i-amphtml-story-dev-tools-device-statusbar-clock"></div>
+          <div class="i-amphtml-story-dev-tools-device-statusbar-icons"></div>
+        </div>
+        <div class="i-amphtml-story-dev-tools-device-appbar">
+          <div class="i-amphtml-story-dev-tools-device-appbar-icon"></div>
+          <div class="i-amphtml-story-dev-tools-device-appbar-urlbar"></div>
+          <div class="i-amphtml-story-dev-tools-device-appbar-icon"></div>
+          <div class="i-amphtml-story-dev-tools-device-appbar-icon"></div>
+        </div>
+        <amp-story-player width="1" height="1" layout="container">
+          <a></a>
+        </amp-story-player>
+        <div class="i-amphtml-story-dev-tools-device-bottombar">
+          <div class="i-amphtml-story-dev-tools-device-appbar-icon"></div>
+          <div class="i-amphtml-story-dev-tools-device-appbar-icon"></div>
+          <div class="i-amphtml-story-dev-tools-device-appbar-icon"></div>
+          <div class="i-amphtml-story-dev-tools-device-appbar-icon"></div>
+          <div class="i-amphtml-story-dev-tools-device-appbar-icon"></div>
+        </div>
+        <div class="i-amphtml-story-dev-tools-device-navigation"></div>
+      </div>
+    </div>
+  `;
+};
+
+/**
+ * Generates the template for a device chip.
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildDeviceChipTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`
+    <button
+      class="i-amphtml-story-dev-tools-device-chip"
+      data-action="toggleDeviceChip"
+    >
+      <span class="i-amphtml-story-dev-tools-device-chip-name">Name</span>
+      <svg
+        title="cross"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="white"
+        width="18px"
+        height="18px"
+      >
+        <rect width="20" height="3" x="2" y="10.5"></rect>
+        <rect
+          width="3"
+          height="20"
+          x="10.5"
+          y="2"
+          class="i-amphtml-story-dev-tools-device-chip-add-stick"
+        ></rect>
+      </svg>
+    </button>
+  `;
+};
+
+/**
+ * Generates the template for a help button.
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildHelpButtonTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`
+    <button
+      class="i-amphtml-story-dev-tools-button i-amphtml-story-dev-tools-button-help"
+    >
+      <span>HELP</span>
+      <div
+        class="i-amphtml-story-dev-tools-button-icon i-amphtml-story-dev-tools-button-help-icon"
+      ></div>
+    </button>
+  `;
+};
+
+/**
+ * Generates the template for the help dialog.
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildHelpDialogTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`
+    <div
+      class="i-amphtml-story-dev-tools-device-dialog-bg"
+      data-action="closeDialog"
+    >
+      <div
+        class="i-amphtml-story-dev-tools-device-dialog-container"
+        data-action="ignore"
+      >
+        <h1>Quick tip</h1>
+        <div class="i-amphtml-story-dev-tools-device-dialog-help-tips">
+          <p>
+            You can simply add #development=1 to the end of your Web Story URL
+            to access the Web Stories Dev-Tools.
+          </p>
+          <span class="i-amphtml-story-dev-tools-device-dialog-help-hint"
+            >https://yourstory.com<b>#development=1</b></span
+          >
+        </div>
+        <h1>Helpful links</h1>
+        <a
+          class="i-amphtml-story-dev-tools-device-dialog-link i-amphtml-story-dev-tools-help-page-experience-link"
+          target="_blank"
+          href="https://amp.dev/page-experience/"
+          ><span>Analyze the Page Experience</span>
+          <div class="i-amphtml-story-dev-tools-device-dialog-arrow"></div
+        ></a>
+        <a
+          class="i-amphtml-story-dev-tools-device-dialog-link"
+          target="_blank"
+          href="https://amp.dev/documentation/guides-and-tutorials/start/create_successful_stories/"
+          ><span>Best practices for creating a successful Web Story</span>
+          <div class="i-amphtml-story-dev-tools-device-dialog-arrow"></div
+        ></a>
+        <a
+          class="i-amphtml-story-dev-tools-device-dialog-link"
+          target="_blank"
+          href="https://amp.dev/about/stories/"
+          ><span>Learn more about Web Stories</span>
+          <div class="i-amphtml-story-dev-tools-device-dialog-arrow"></div
+        ></a>
+        <a
+          class="i-amphtml-story-dev-tools-device-dialog-link i-amphtml-story-dev-tools-help-search-preview-link"
+          target="_blank"
+          href="https://search.google.com/test/amp?url="
+          ><span>Web Stories Google Search Preview Tool</span>
+          <div class="i-amphtml-story-dev-tools-device-dialog-arrow"></div
+        ></a>
+        <button
+          data-action="closeDialog"
+          class="i-amphtml-story-dev-tools-device-dialog-close"
+        ></button>
+      </div>
+    </div>
+  `;
+};
+
+/**
+ * Generates the template for the add device dialog.
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildAddDeviceDialogTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`
+    <div
+      class="i-amphtml-story-dev-tools-device-dialog-bg"
+      data-action="closeDialog"
+    >
+      <div
+        class="i-amphtml-story-dev-tools-device-dialog-container i-amphtml-story-dev-tools-device-dialog-add-devices"
+        data-action="ignore"
+      >
+        <h1>Mobile</h1>
+        <div class="i-amphtml-story-dev-tools-device-dialog-mobile"></div>
+        <h1>Tablet</h1>
+        <div class="i-amphtml-story-dev-tools-device-dialog-tablet"></div>
+        <h1>Desktop</h1>
+        <div class="i-amphtml-story-dev-tools-device-dialog-desktop"></div>
+        <button
+          data-action="closeDialog"
+          class="i-amphtml-story-dev-tools-device-dialog-close"
+        ></button>
+      </div>
+    </div>
+  `;
+};
+
+const MAX_DEVICE_SPACES = 4;
+
+/**
+ * @typedef {{
+ *  element: !Element,
+ *  player: !Element,
+ *  chip: !Element,
+ *  width: number,
+ *  height: number,
+ *  deviceHeight: ?number,
+ *  deviceSpaces: number,
+ * }} DeviceInfo
+ *
+ * Contains the data related to the device.
+ * Width and height refer to the story viewport, while deviceHeight is the device screen height.
+ * The deviceSpaces refers to the MAX_DEVICE_SPACES, ensuring the devices on screen don't go over the max space set.
+ */
+
+const DEFAULT_DEVICES = 'iphone11native;oneplus5t;pixel2';
+
+const ALL_DEVICES = [
+  {
+    'name': 'Pixel 2',
+    'width': 411,
+    'height': 605,
+    'deviceHeight': 731,
+    'deviceSpaces': 1,
+    'details': ['pixel2', 'browser', 'android'],
+  },
+  {
+    'name': 'Pixel 3',
+    'width': 411,
+    'height': 686,
+    'deviceHeight': 823,
+    'deviceSpaces': 1,
+    'details': ['pixel3', 'browser', 'android'],
+  },
+  {
+    'name': 'iPhone 8 (Browser)',
+    'width': 375,
+    'height': 554,
+    'deviceHeight': 667,
+    'deviceSpaces': 1,
+    'details': ['iphone8', 'browser', 'ios'],
+  },
+  {
+    'name': 'iPhone 8 (Native)',
+    'width': 375,
+    'height': 596,
+    'deviceHeight': 667,
+    'deviceSpaces': 1,
+    'details': ['iphone8', 'native', 'ios'],
+  },
+  {
+    'name': 'iPhone 11 (Browser)',
+    'width': 414,
+    'height': 724,
+    'deviceHeight': 896,
+    'deviceSpaces': 1,
+    'details': ['iphone11', 'browser', 'ios'],
+  },
+  {
+    'name': 'iPhone 11 (Native)',
+    'width': 414,
+    'height': 795,
+    'deviceHeight': 896,
+    'deviceSpaces': 1,
+    'details': ['iphone11', 'native', 'ios'],
+  },
+  {
+    'name': 'iPhone 11 Pro (Browser)',
+    'width': 375,
+    'height': 635,
+    'deviceHeight': 812,
+    'deviceSpaces': 1,
+    'details': ['iphone11pro', 'browser', 'ios'],
+  },
+  {
+    'name': 'iPhone 11 Pro (Native)',
+    'width': 375,
+    'height': 713,
+    'deviceHeight': 812,
+    'deviceSpaces': 1,
+    'details': ['iphone11pro', 'native', 'ios'],
+  },
+  {
+    'name': 'iPad (Browser)',
+    'width': 810,
+    'height': 1010,
+    'deviceHeight': 1080,
+    'deviceSpaces': 2,
+    'details': ['ipad', 'browser', 'ios'],
+  },
+  {
+    'name': 'OnePlus 5T',
+    'width': 455,
+    'height': 820,
+    'deviceHeight': 910,
+    'deviceSpaces': 1,
+    'details': ['oneplus5t', 'browser', 'android'],
+  },
+  {
+    'name': 'OnePlus 7 Pro',
+    'width': 412,
+    'height': 782,
+    'deviceHeight': 892,
+    'deviceSpaces': 1,
+    'details': ['oneplus7pro', 'browser', 'android'],
+  },
+  {
+    'name': 'Desktop 1080p',
+    'width': 1920,
+    'height': 1000,
+    'deviceHeight': 1080,
+    'deviceSpaces': 2,
+    'details': ['desktop1080', 'browser', 'desktop'],
+  },
+];
+
+/**
+ * Method that returns lowercase and remove non-alphanumeric, used on matching hashString.
+ *
+ * Simplifies the string so that it's easier to match devices regardless of symbols or casing.
+ * Eg: `iPhone 11 Pro (Native) -> iphone11pronative`
+ * @param {string} name
+ * @return {string}
+ */
+function simplifyDeviceName(name) {
+  return name.toLowerCase().replace(/[^a-z0-9]/gi, '');
+}
+
+/**
+ * Get devices from the element attribute into list of devices.
+ *
+ * Uses simplifyDeviceName function to match the names passed on the attribute,
+ * finding the first device in the list of ALL_DEVICES that starts with the string passed.
+ * Eg: `devices="ipad;iphone"` will find the ipad and also the first device in ALL_DEVICES
+ * that starts with "iphone" (ignoring case and symbols).
+ * @param {string} queryHash
+ * @return {Array<*>}
+ */
+function parseDevices(queryHash) {
+  const screenSizes = [];
+
+  queryHash.split(';').forEach((deviceName) => {
+    let currSpecs = null;
+    currSpecs = ALL_DEVICES.find((el) => {
+      // Find first device that has prefix of the device name passed in.
+      const currDeviceName = simplifyDeviceName(el.name);
+      const specDeviceName = simplifyDeviceName(deviceName);
+      return (
+        currDeviceName.substring(0, specDeviceName.length) === specDeviceName
+      );
+    });
+    if (currSpecs) {
+      screenSizes.push(currSpecs);
+    }
+  });
+  return screenSizes;
+}
+
+/** @enum {string} */
+const PREVIEW_ACTIONS = {
+  SHOW_HELP_DIALOG: 'showHelpDialog',
+  SHOW_ADD_DEVICE_DIALIG: 'showAddDeviceDialog',
+  CLOSE_DIALOG: 'closeDialog',
+  REMOVE_DEVICE: 'removeDevice',
+  TOGGLE_DEVICE_CHIP: 'toggleDeviceChip',
+};
+
+export class AmpStoryDevToolsTabPreview extends AMP.BaseElement {
+  /** @param {!Element} element */
+  constructor(element) {
+    super(element);
+
+    /** @private  {?string} */
+    this.storyUrl_ = null;
+
+    /** @private {!Array<DeviceInfo>} */
+    this.devices_ = [];
+
+    /** @private {?Element} the current dialog being shown or null if none are active. */
+    this.currentDialog_ = null;
+
+    /** @private {!Element} container for the device previews */
+    this.devicesContainer_ = null;
+
+    this.onResize_ = this.onResize_.bind(this);
+
+    /** @private {Map<!Element, !Array<string>>} navigation events expected to be received on each player */
+    this.expectedNavigationEvents_ = {};
+  }
+
+  /** @override */
+  isLayoutSupported() {
+    return true;
+  }
+
+  /** @override */
+  buildCallback() {
+    this.storyUrl_ = this.element.getAttribute('data-story-url');
+    this.element.classList.add('i-amphtml-story-dev-tools-tab');
+
+    this.devicesContainer_ = htmlFor(
+      this.element
+    )`<div class="i-amphtml-story-dev-tools-devices-container"></div>`;
+    this.element.appendChild(this.devicesContainer_);
+
+    const chipListContainer = this.element.ownerDocument.createElement('div');
+    chipListContainer.classList.add(
+      'i-amphtml-story-dev-tools-device-chips-container'
+    );
+    this.element.appendChild(chipListContainer);
+    const chipList = this.element.ownerDocument.createElement('span');
+    chipList.classList.add('i-amphtml-story-dev-tools-device-chips');
+    chipListContainer.appendChild(chipList);
+    chipListContainer.appendChild(this.buildAddDeviceButton_());
+    chipListContainer.appendChild(this.buildHelpButton_());
+  }
+
+  /** @override */
+  layoutCallback() {
+    parseDevices(
+      this.element.getAttribute('data-devices') || DEFAULT_DEVICES
+    ).forEach((device) => {
+      this.addDevice_(device.name);
+    });
+    this.repositionDevices_();
+    this.element.addEventListener('click', (e) => this.handleTap_(e.target));
+    observeContentSize(this.element, this.onResize_);
+  }
+
+  /**
+   * Builds the add device button
+   * @private
+   * @return {!Element}
+   */
+  buildAddDeviceButton_() {
+    const addDeviceButton = buildDeviceChipTemplate(this.element);
+    addDeviceButton.classList.add('i-amphtml-story-dev-tools-add-device');
+    addDeviceButton.classList.add('i-amphtml-story-dev-tools-button');
+    addDeviceButton.setAttribute(
+      'data-action',
+      PREVIEW_ACTIONS.SHOW_ADD_DEVICE_DIALIG
+    );
+    addDeviceButton.querySelector(
+      '.i-amphtml-story-dev-tools-device-chip-name'
+    ).textContent = 'ADD DEVICE';
+    return addDeviceButton;
+  }
+
+  /**
+   * Builds the add device button
+   * @private
+   * @return {!Element}
+   */
+  buildHelpButton_() {
+    const addHelpButton = buildHelpButtonTemplate(this.element);
+    addHelpButton.setAttribute('data-action', PREVIEW_ACTIONS.SHOW_HELP_DIALOG);
+    return addHelpButton;
+  }
+
+  /**
+   * Creates a device layout for preview
+   * @private
+   * @param {!DeviceInfo} device
+   * @return {!Element}
+   */
+  buildDeviceLayout_(device) {
+    const deviceLayout = buildDeviceTemplate(this.element);
+    device.details.forEach((detail) => deviceLayout.setAttribute(detail, ''));
+    const devicePlayer = deviceLayout.querySelector('amp-story-player');
+    devicePlayer.setAttribute('width', device.width);
+    devicePlayer.setAttribute('height', device.height);
+    const storyA = devicePlayer.querySelector('a');
+    storyA.textContent = 'Story 1';
+    storyA.href = this.storyUrl_;
+    setStyles(devicePlayer, {
+      width: device.width + 'px',
+      height: device.height + 'px',
+    });
+    setStyles(
+      deviceLayout.querySelector('.i-amphtml-story-dev-tools-device-screen'),
+      {
+        height: device.deviceHeight
+          ? device.deviceHeight + 'px'
+          : 'fit-content',
+      }
+    );
+    device.player = new AmpStoryPlayer(this.win, devicePlayer);
+    return deviceLayout;
+  }
+
+  /**
+   * @private
+   * @param {!Element} targetElement
+   */
+  handleTap_(targetElement) {
+    const actionElement = closest(
+      targetElement,
+      (el) => el.hasAttribute('data-action'),
+      this.element
+    );
+    if (!actionElement || actionElement.hasAttribute('disabled')) {
+      return;
+    }
+    switch (actionElement.getAttribute('data-action')) {
+      case PREVIEW_ACTIONS.SHOW_HELP_DIALOG:
+        this.showHelpDialog_();
+        break;
+      case PREVIEW_ACTIONS.SHOW_ADD_DEVICE_DIALIG:
+        this.showAddDeviceDialog_();
+        break;
+      case PREVIEW_ACTIONS.CLOSE_DIALOG:
+        this.hideCurrentDialog_();
+        break;
+      case PREVIEW_ACTIONS.REMOVE_DEVICE:
+      case PREVIEW_ACTIONS.TOGGLE_DEVICE_CHIP:
+        this.onDeviceChipToggled_(actionElement);
+        break;
+    }
+  }
+
+  /**
+   * @private
+   * @param {string} deviceName
+   */
+  addDevice_(deviceName) {
+    const deviceSpecs = ALL_DEVICES.find((d) => d.name === deviceName);
+    if (!deviceSpecs) {
+      return;
+    }
+    const deviceLayout = this.buildDeviceLayout_(deviceSpecs, this.storyUrl_);
+    deviceSpecs.element = deviceLayout;
+    deviceSpecs.chip = this.buildDeviceChip_(deviceSpecs.name);
+    this.mutateElement(() => {
+      this.devicesContainer_.appendChild(deviceLayout);
+      this.element
+        .querySelector('.i-amphtml-story-dev-tools-device-chips')
+        .appendChild(deviceSpecs.chip);
+    }).then(() => {
+      deviceSpecs.player
+        .getElement()
+        .addEventListener('storyNavigation', (event) =>
+          this.onPlayerNavigation_(event, deviceSpecs)
+        );
+      deviceSpecs.player.load();
+    });
+    this.expectedNavigationEvents_[deviceSpecs.name] = [];
+    this.devices_.push(deviceSpecs);
+    this.updateDevicesInHash_();
+  }
+
+  /**
+   * Triggered when a player emits a storyNavigationEvent.
+   *
+   * A navigation event from a player can come from a user interaction or a previous programmatic call.
+   * Expected navigation events from programmatic calls are stored in `this.expectedNavigationEvents_`,
+   * so they should not be propagated (but deleted from the list of expected events).
+   *
+   * Behavior of expectedNavigationEvents:
+   * - If an event was not expected, it means it was user navigation and should be propagated to other players.
+   * - If an event was expected, sync the expected list up to that page by removing all the pages expected
+   * up to the one received in the navigation event. This clears any events that could be dispatched when the story
+   * was loading and never were executed.
+   *
+   * @param {!Event} event
+   * @param {!DeviceInfo} deviceSpecs
+   * @private
+   */
+  onPlayerNavigation_(event, deviceSpecs) {
+    const {pageId} = event.detail;
+    const pageIndexInExpectedList =
+      this.expectedNavigationEvents_[deviceSpecs.name].lastIndexOf(pageId);
+    if (pageIndexInExpectedList > -1) {
+      // Remove the expected events up to the most recently received event if it was in the list.
+      this.expectedNavigationEvents_[deviceSpecs.name].splice(
+        0,
+        pageIndexInExpectedList + 1
+      );
+      return;
+    }
+    this.devices_.forEach((d) => {
+      if (d != deviceSpecs) {
+        d.player.show(/* storyUrl */ null, event.detail.pageId);
+        this.expectedNavigationEvents_[d.name].push(pageId);
+      }
+    });
+  }
+
+  /**
+   * Try to remove a device with the name passed.
+   * @private
+   * @param {string} deviceName
+   * @return {bool} whether a device was found and removed with that name.
+   */
+  removeDevice_(deviceName) {
+    const device = this.devices_.find((d) => d.name === deviceName);
+    if (device) {
+      this.mutateElement(() => {
+        device.chip.remove();
+        device.element.remove();
+      });
+      this.devices_ = this.devices_.filter((d) => d != device);
+      delete this.expectedNavigationEvents_[device.name];
+      this.updateDevicesInHash_();
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * @param {string} deviceName
+   * @return {!Element} the device chip
+   */
+  buildDeviceChip_(deviceName) {
+    const deviceChip = buildDeviceChipTemplate(this.element);
+    deviceChip.querySelector(
+      '.i-amphtml-story-dev-tools-device-chip-name'
+    ).textContent = deviceName;
+    deviceChip.setAttribute('data-action', PREVIEW_ACTIONS.REMOVE_DEVICE);
+    deviceChip.setAttribute('data-device', deviceName);
+    return deviceChip;
+  }
+
+  /**
+   * @param {!Element} chipElement
+   * @private
+   */
+  onDeviceChipToggled_(chipElement) {
+    const deviceName = chipElement.getAttribute('data-device');
+    if (this.removeDevice_(deviceName)) {
+      this.mutateElement(() => {
+        chipElement.setAttribute('inactive', '');
+        this.toggleDeviceChipsWithSpaceAvailable_();
+      });
+    } else {
+      this.mutateElement(() => {
+        chipElement.removeAttribute('inactive');
+        this.toggleDeviceChipsWithSpaceAvailable_();
+      });
+      this.addDevice_(deviceName);
+    }
+    this.repositionDevices_();
+  }
+
+  /**
+   * If the devices are not the default ones, add them to the hashString
+   * @private
+   */
+  updateDevicesInHash_() {
+    const devicesStringRepresentation = this.devices_
+      .map((device) => simplifyDeviceName(device.name))
+      .join(';');
+    this.element.setAttribute('data-devices', devicesStringRepresentation);
+    updateHash(
+      {
+        'devices':
+          devicesStringRepresentation != DEFAULT_DEVICES
+            ? devicesStringRepresentation
+            : null,
+      },
+      this.win
+    );
+  }
+
+  /**
+   * Recalculate the positions of the devices to keep them spaced and scaled evenly.
+   * @private
+   * */
+  repositionDevices_() {
+    const {offsetHeight: height, offsetWidth: width} =
+      this.element.querySelector(
+        '.i-amphtml-story-dev-tools-devices-container'
+      );
+    let sumDeviceWidths = 0;
+    let maxDeviceHeights = 0;
+    // Find the sum of the device widths and max of heights since they are horizontally laid out.
+    this.devices_.forEach((deviceSpecs) => {
+      sumDeviceWidths += deviceSpecs.width;
+      maxDeviceHeights = Math.max(
+        maxDeviceHeights,
+        deviceSpecs.deviceHeight || deviceSpecs.height + 100
+      );
+    });
+    // Find the scale that covers up to 90% of width or 80% of height.
+    const scale = Math.min(
+      (width / sumDeviceWidths) * 0.9,
+      (height / maxDeviceHeights) * 0.8
+    );
+    const paddingSize =
+      (width - sumDeviceWidths * scale) / (this.devices_.length + 1);
+    let cumWidthSum = paddingSize;
+    this.mutateElement(() => {
+      this.devices_.forEach((deviceSpecs) => {
+        // Calculate the width change when scaling that needs to be added.
+        const scaleWidthChange = deviceSpecs.width * (1 - scale) * 0.5 + 10;
+        setStyles(deviceSpecs.element, {
+          'transform': `perspective(100px) translate3d(${
+            (cumWidthSum - scaleWidthChange) / scale
+          }px, 0px, ${(100 * (scale - 1)) / scale}px)`,
+        });
+        cumWidthSum += deviceSpecs.width * scale + paddingSize;
+      });
+    });
+  }
+
+  /** @private */
+  onResize_() {
+    this.repositionDevices_();
+  }
+
+  /**
+   * Builds & shows the ADD DEVICE dialog creating chips for each device in ALL_DEVICES
+   * and attaching them to the corresponding section (mobile, tablet, desktop).
+   * @private
+   */
+  showAddDeviceDialog_() {
+    const dialog = buildAddDeviceDialogTemplate(this.element);
+
+    // Find the sections for the different screen sizes, where chips will be attached.
+    const sections = ['mobile', 'tablet', 'desktop'].reduce((obj, section) => {
+      obj[section] = dialog.querySelector(
+        `.i-amphtml-story-dev-tools-device-dialog-${escapeCssSelectorIdent(
+          section
+        )}`
+      );
+      return obj;
+    }, {});
+
+    const currentDeviceSpaces = this.getCurrentSpacesSum_();
+
+    // Add a chip for each device on the right category, and mark as inactive if device not selected.
+    ALL_DEVICES.forEach((device) => {
+      const chip = this.buildDeviceChip_(device.name);
+      chip.setAttribute('data-action', PREVIEW_ACTIONS.TOGGLE_DEVICE_CHIP);
+      chip.setAttribute('data-spaces', device.deviceSpaces);
+      if (!this.devices_.find((d) => d.name == device.name)) {
+        chip.setAttribute('inactive', '');
+        if (currentDeviceSpaces + device.deviceSpaces > MAX_DEVICE_SPACES) {
+          chip.setAttribute('disabled', '');
+        }
+      }
+      if (device.width / device.height > 1) {
+        sections['desktop'].appendChild(chip);
+      } else if (device.width / device.height > 0.75) {
+        sections['tablet'].appendChild(chip);
+      } else {
+        sections['mobile'].appendChild(chip);
+      }
+    });
+
+    this.mutateElement(() => this.element.appendChild(dialog));
+    addAttributeAfterTimeout(this, dialog, 1, 'active');
+    this.currentDialog_ = dialog;
+  }
+
+  /**
+   * Builds & shows the HELP dialog.
+   * @private
+   */
+  showHelpDialog_() {
+    const dialog = buildHelpDialogTemplate(this.element);
+
+    dialog.querySelector(
+      '.i-amphtml-story-dev-tools-help-search-preview-link'
+    ).href += this.storyUrl_;
+    dialog.querySelector(
+      '.i-amphtml-story-dev-tools-help-page-experience-link'
+    ).href =
+      'https://amp.dev/page-experience/?url=' +
+      encodeURIComponent(this.storyUrl_);
+
+    this.mutateElement(() => this.element.appendChild(dialog));
+    addAttributeAfterTimeout(this, dialog, 1, 'active');
+    this.currentDialog_ = dialog;
+  }
+
+  /**
+   * Hides and removes the current dialog being shown.
+   * @private
+   */
+  hideCurrentDialog_() {
+    if (this.currentDialog_) {
+      this.currentDialog_.removeAttribute('active');
+      removeAfterTimeout(this, this.currentDialog_, 200);
+      this.currentDialog_ = null;
+    }
+  }
+
+  /**
+   * Return the number of spaces currently being used by the devices on the screen.
+   * @private
+   * @return {number}
+   */
+  getCurrentSpacesSum_() {
+    return this.devices_.reduce(
+      (prev, device) => prev + device.deviceSpaces,
+      0
+    );
+  }
+
+  /**
+   * Disable the chips in the dialog based on whether they have the remaining space available
+   * Must be called in a mutate context.
+   * @private
+   */
+  toggleDeviceChipsWithSpaceAvailable_() {
+    const allChips = this.currentDialog_.querySelectorAll(
+      '.i-amphtml-story-dev-tools-device-chip'
+    );
+    const currentDeviceSpaces = this.getCurrentSpacesSum_();
+    allChips.forEach((chipEl) => {
+      const spaces = parseInt(chipEl.getAttribute('data-spaces'), 10);
+      // Disable the button if there's no space for adding the device and the device is not added already.
+      const isEnabled =
+        (currentDeviceSpaces + spaces <= MAX_DEVICE_SPACES) |
+        !chipEl.hasAttribute('inactive');
+      chipEl.toggleAttribute('disabled', !isEnabled);
+    });
+  }
+}
diff --git a/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools.css b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools.css
new file mode 100644
index 0000000000000..260e55b68e0a8
--- /dev/null
+++ b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools.css
@@ -0,0 +1,149 @@
+/**
+ * Copyright 2020 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.
+ */
+
+@import './amp-story-dev-tools-tab-debug.css';
+@import './amp-story-dev-tools-tab-preview.css';
+
+amp-story-dev-tools {
+  width: 100% !important;
+  height: 100% !important;
+  background-color: black !important;
+  font-size: 16px !important;
+  font-family: 'Poppins', sans-serif !important;
+  color: white !important;
+  --i-amphtml-story-dev-tools-vertical-spacing: 30px !important;
+  --i-amphtml-story-dev-tools-accent: #79B3FF !important;
+  --i-amphtml-story-dev-tools-accent-light: #92c1ff !important;
+  --i-amphtml-story-dev-tools-accent-translucent: #79B3FF55 !important;
+
+  --i-amphtml-story-dev-tools-error-color: #FF5252 !important;
+  --i-amphtml-story-dev-tools-gray-1: #101010 !important;
+  --i-amphtml-story-dev-tools-gray-2: #2E3137 !important;
+  --i-amphtml-story-dev-tools-gray-3: #2E2E2E !important;
+  --i-amphtml-story-dev-tools-gray-4: #3D3D3D !important;
+  --i-amphtml-story-dev-tools-gray-5: #525358 !important;
+  --i-amphtml-story-dev-tools-gray-transparent-1: #111111CC !important;
+  --i-amphtml-story-dev-tools-white-transparent-1: #FFFFFF22 !important;
+  --i-amphtml-story-dev-tools-white-transparent-2: #FFFFFF35 !important;
+  --i-amphtml-story-dev-tools-white-transparent-3: #FFFFFF77 !important;
+  --i-amphtml-story-dev-tools-white-transparent-4: #FFFFFFCC !important;
+  --i-amphtml-story-dev-tools-black-transparent-1: #00000077 !important;
+
+
+  --i-amphtml-story-dev-tools-material-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1) !important;
+  --i-amphtml-story-dev-tools-material-easing-accelerated: cubic-bezier(0.4, 0.0, 1, 1) !important;
+  --i-amphtml-story-dev-tools-material-easing-decelerated: cubic-bezier(0.0, 0.0, 0.2, 1) !important;
+}
+
+amp-story-dev-tools, amp-story-dev-tools * {
+  box-sizing: border-box !important;
+}
+
+.i-amphtml-story-dev-tools-container {
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.i-amphtml-story-dev-tools-header {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  margin-top: 15px !important;
+  padding: 15px 10% !important;
+}
+
+.i-amphtml-story-dev-tools-brand {
+  display: flex !important;
+}
+
+.i-amphtml-story-dev-tools-brand-text > span {
+  display: block !important;
+  letter-spacing: 0.1em !important;
+  line-height: 1.2em !important;
+  padding-inline-start: 10px !important;
+}
+
+.i-amphtml-story-dev-tools-brand-text > span:nth-child(2) {
+  color: var(--i-amphtml-story-dev-tools-accent) !important;
+  font-size: 10px !important;
+}
+
+.i-amphtml-story-dev-tools-container {
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.i-amphtml-story-dev-tools-button {
+  cursor: pointer !important;
+  font-size: 13px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  border: 1px solid var(--i-amphtml-story-dev-tools-accent-translucent) !important;
+  border-radius: 20px !important;
+  padding-inline-start: 10px !important;
+  padding-inline-end: 6px !important;
+  height: 32px !important;
+  color: var(--i-amphtml-story-dev-tools-accent) !important;
+  text-decoration: none !important;
+  background: transparent !important;
+  font-family: inherit !important;
+  outline: none !important;
+}
+
+.i-amphtml-story-dev-tools-button:hover, .i-amphtml-story-dev-tools-button:focus  {
+  background: var(--i-amphtml-story-dev-tools-accent-translucent) !important;
+}
+
+.i-amphtml-story-dev-tools-button svg {
+  background: var(--i-amphtml-story-dev-tools-accent) !important;
+  padding: 3px !important;
+  width: 20px !important;
+  height: 20px !important;
+  border-radius: 50% !important;
+  margin-inline-start: 10px !important;
+}
+
+.i-amphtml-story-dev-tools-tab-selector {
+  padding-bottom: 0.2em !important;
+  margin: 0 16px !important;
+  cursor: pointer !important;
+  opacity: 0.4 !important;
+  font-size: inherit !important;
+  background: none !important;
+  border: none !important;
+  color: inherit !important;
+  outline: none !important;
+  box-shadow: none !important;
+  font-family: inherit !important;
+  display: inline-flex !important;
+  align-items: center !important;
+}
+
+.i-amphtml-story-dev-tools-tab-selector:not([active]):hover, .i-amphtml-story-dev-tools-tabs > button:not([active]):focus {
+  opacity: 0.9 !important;
+}
+
+.i-amphtml-story-dev-tools-tab-selector[active] {
+  opacity: 1 !important;
+  cursor: initial !important;
+  border-bottom: 2px solid white !important;
+}
+
+.i-amphtml-story-dev-tools-tab {
+  flex: 1 !important;
+}
diff --git a/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools.js b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools.js
new file mode 100644
index 0000000000000..873f2bc22ba98
--- /dev/null
+++ b/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools.js
@@ -0,0 +1,277 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  AmpStoryDevToolsTabDebug,
+  createTabDebugElement,
+} from './amp-story-dev-tools-tab-debug';
+import {
+  AmpStoryDevToolsTabPreview,
+  createTabPreviewElement,
+} from './amp-story-dev-tools-tab-preview';
+import {CSS} from '../../../build/amp-story-dev-tools-0.1.css';
+import {htmlFor} from '../../../src/static-template';
+import {parseQueryString} from '../../../src/core/types/string/url';
+import {toggle} from '../../../src/style';
+import {updateHash} from './utils';
+
+/** @const {Array<Object>} fontFaces with urls from https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap */
+const fontsToLoad = [
+  {
+    family: 'Poppins',
+    weight: '400',
+    src: "url(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2')",
+  },
+  {
+    family: 'Poppins',
+    weight: '600',
+    src: "url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2')",
+  },
+];
+
+/**
+ * Generates the template for the root layout.
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildContainerTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`
+    <div class="i-amphtml-story-dev-tools-container">
+      <div class="i-amphtml-story-dev-tools-header">
+        <span class="i-amphtml-story-dev-tools-brand">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            viewBox="0 0 30 30"
+            fill="none"
+          >
+            <circle cx="15" cy="15" r="15" fill="white"></circle>
+            <path
+              fill="#202125"
+              d="M19.5 9a1.5 1.5 0 011.5 1.5v9a1.5 1.5 0 01-1.5 1.5V9zM8.25 9a1.5 1.5 0 011.5-1.5h6.75A1.5 1.5 0 0118 9v12a1.5 1.5 0 01-1.5 1.5H9.75a1.5 1.5 0 01-1.5-1.5V9zM22.5 10.5c.621 0 1.125.504 1.125 1.125v6.75c0 .622-.504 1.125-1.125 1.125v-9z"
+            />
+          </svg>
+          <span class="i-amphtml-story-dev-tools-brand-text">
+            <span>WEB STORIES</span>
+            <span>DEV - TOOLS</span>
+          </span>
+        </span>
+        <div class="i-amphtml-story-dev-tools-tabs"></div>
+        <a
+          class="i-amphtml-story-dev-tools-button i-amphtml-story-dev-tools-close"
+        >
+          <span>OPEN STORY</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+          >
+            <path
+              d="M9.9165 4.08333L9.094 4.90583L10.599 6.41667H4.6665V7.58333H10.599L9.094 9.08833L9.9165 9.91667L12.8332 7L9.9165 4.08333ZM2.33317 2.91667H6.99984V1.75H2.33317C1.6915 1.75 1.1665 2.275 1.1665 2.91667V11.0833C1.1665 11.725 1.6915 12.25 2.33317 12.25H6.99984V11.0833H2.33317V2.91667Z"
+              fill="black"
+            />
+          </svg>
+        </a>
+      </div>
+    </div>
+  `;
+};
+
+/** @enum {string} */
+const DevToolsTab = {
+  PREVIEW: 'Preview',
+  DEBUG: 'Debug',
+};
+
+export class AmpStoryDevTools extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {!Object<string, string>} */
+    this.hashParams_ = parseQueryString(this.win.location.hash);
+
+    this.win.document.title = `Story Dev-Tools (${this.win.document.title})`;
+
+    // TODO: Remove support for url queryParam when widely available.
+    /** @private {string} */
+    this.storyUrl_ =
+      this.hashParams_['url'] || this.win.location.href.split('#')[0];
+
+    /** @private {!DevToolsTab} get URL param for tab (eg: #tab=page-experience) or default to PREVIEW*/
+    this.currentTab_ =
+      (this.hashParams_['tab']
+        ? Object.values(DevToolsTab).find(
+            (tab) =>
+              tab.toLowerCase().replace(' ', '-') === this.hashParams_['tab']
+          )
+        : null) || DevToolsTab.PREVIEW;
+
+    /** @private {!Object<string, !Element>} maps tabs to contents */
+    this.tabContents_ = {};
+
+    /** @private {!Array<!Element>} */
+    this.tabSelectors_ = [];
+  }
+
+  /** @override */
+  isLayoutSupported() {
+    return true;
+  }
+
+  /** @override */
+  buildCallback() {
+    this.loadFonts_();
+    this.removeCustomCSS_();
+    this.buildLayout_();
+    this.initializeListeners_();
+
+    this.buildTabs_();
+    this.switchTab_(this.currentTab_);
+  }
+
+  /**
+   * @private
+   */
+  buildLayout_() {
+    const container = buildContainerTemplate(this.element);
+    this.element.appendChild(container);
+    this.element.querySelector('.i-amphtml-story-dev-tools-close').href =
+      this.storyUrl_;
+
+    // Create tabs on top
+    const tabsContainer = container.querySelector(
+      '.i-amphtml-story-dev-tools-tabs'
+    );
+    Object.values(DevToolsTab).forEach((tabTitle) => {
+      const tabSelector = this.win.document.createElement('button');
+      tabSelector.classList.add('i-amphtml-story-dev-tools-tab-selector');
+      tabSelector.setAttribute('data-tab', tabTitle);
+      tabSelector.textContent = tabTitle;
+      this.tabSelectors_.push(tabSelector);
+      tabsContainer.appendChild(tabSelector);
+    });
+  }
+
+  /**
+   * @private
+   */
+  initializeListeners_() {
+    const tabsContainer = this.element.querySelector(
+      '.i-amphtml-story-dev-tools-tabs'
+    );
+    tabsContainer.addEventListener('click', (event) => {
+      const tab = event.target.getAttribute('data-tab');
+      if (
+        Object.values(DevToolsTab).find((t) => t == tab) &&
+        this.currentTab_ != tab
+      ) {
+        this.switchTab_(tab);
+        // Update hashString with tab selected or null if tab = preview (default)
+        updateHash(
+          {
+            'tab':
+              tab == DevToolsTab.PREVIEW
+                ? null
+                : tab.toLowerCase().replace(' ', '-'),
+          },
+          this.win
+        );
+      }
+    });
+  }
+
+  /**
+   * @private
+   */
+  buildTabs_() {
+    const container = this.element.querySelector(
+      '.i-amphtml-story-dev-tools-container'
+    );
+    this.tabContents_[DevToolsTab.PREVIEW] = createTabPreviewElement(
+      this.win,
+      this.storyUrl_,
+      this.hashParams_['devices']
+    );
+    this.tabContents_[DevToolsTab.DEBUG] = createTabDebugElement(
+      this.win,
+      this.storyUrl_
+    );
+    Object.values(this.tabContents_).forEach((tabContent) => {
+      tabContent.setAttribute('layout', 'container');
+      toggle(tabContent, false);
+      container.appendChild(tabContent);
+    });
+  }
+
+  /**
+   * Switches the tab shown by activating the tab button and switching the contents.
+   * @param {!DevToolsTab} tab
+   */
+  switchTab_(tab) {
+    this.mutateElement(() => {
+      toggle(this.tabContents_[this.currentTab_], false);
+      toggle(this.tabContents_[tab], true);
+      this.tabSelectors_.forEach((tabSelector) => {
+        return tabSelector.toggleAttribute(
+          'active',
+          tabSelector.getAttribute('data-tab') === tab
+        );
+      });
+      this.currentTab_ = tab;
+    });
+  }
+
+  /**
+   * @private
+   */
+  loadFonts_() {
+    if (this.win.document.fonts && FontFace) {
+      fontsToLoad.forEach((fontProperties) => {
+        const font = new FontFace(fontProperties.family, fontProperties.src, {
+          weight: fontProperties.weight,
+          style: 'normal',
+        });
+        font.load().then(() => {
+          this.win.document.fonts.add(font);
+        });
+      });
+    }
+  }
+
+  /** @private */
+  removeCustomCSS_() {
+    this.element.ownerDocument
+      .querySelectorAll('style[amp-custom]')
+      .forEach((e) => e.remove());
+  }
+}
+
+AMP.extension('amp-story-dev-tools', '0.1', (AMP) => {
+  AMP.registerElement('amp-story-dev-tools', AmpStoryDevTools, CSS);
+  AMP.registerElement(
+    'amp-story-dev-tools-tab-debug',
+    AmpStoryDevToolsTabDebug
+  );
+  AMP.registerElement(
+    'amp-story-dev-tools-tab-preview',
+    AmpStoryDevToolsTabPreview
+  );
+});
diff --git a/extensions/amp-story-dev-tools/0.1/utils.js b/extensions/amp-story-dev-tools/0.1/utils.js
new file mode 100644
index 0000000000000..c6b57b2a6c938
--- /dev/null
+++ b/extensions/amp-story-dev-tools/0.1/utils.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {parseQueryString} from '../../../src/core/types/string/url';
+
+/**
+ * Updates the hashString with the dictionary<string, string> passed in
+ * @public
+ * @param {!Object<string, string>} updates
+ * @param {!Window} win
+ */
+export function updateHash(updates, win) {
+  let queryHash = parseQueryString(win.location.hash);
+  queryHash = Object.assign(queryHash, updates);
+  win.location.hash = Object.entries(queryHash)
+    .filter((keyValue) => keyValue[1] != undefined)
+    .map((keyValue) => keyValue[0] + '=' + keyValue[1])
+    .join('&');
+}
+
+/**
+ * Deletes the node after the passed timeout.
+ * @public
+ * @param {!Element} context the mutateElement context
+ * @param {!Element} element the element to remove
+ * @param {number} timeout time in ms after which the element will be removed
+ */
+export function removeAfterTimeout(context, element, timeout) {
+  setTimeout(() => context.mutateElement(() => element.remove()), timeout);
+}
+
+/**
+ * Deletes the node after the passed timeout.
+ * @public
+ * @param {!Element} context the mutateElement context
+ * @param {!Element} element the element to remove
+ * @param {number} timeout time in ms after which the element will be removed
+ * @param {string} attributeName
+ * @param {string=} attributeValue
+ */
+export function addAttributeAfterTimeout(
+  context,
+  element,
+  timeout,
+  attributeName,
+  attributeValue = ''
+) {
+  setTimeout(
+    () =>
+      context.mutateElement(() =>
+        element.setAttribute(attributeName, attributeValue)
+      ),
+    timeout
+  );
+}
diff --git a/extensions/amp-story-dev-tools/OWNERS b/extensions/amp-story-dev-tools/OWNERS
new file mode 100644
index 0000000000000..532da73792258
--- /dev/null
+++ b/extensions/amp-story-dev-tools/OWNERS
@@ -0,0 +1,20 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {
+          name: 'gmajoulet',
+          notify: true,
+        },
+        {
+          name: 'mszylkowski',
+          notify: true,
+        },
+        {name: 'newmuis'},
+      ],
+    },
+  ],
+}
diff --git a/extensions/amp-story-dev-tools/amp-story-dev-tools.md b/extensions/amp-story-dev-tools/amp-story-dev-tools.md
new file mode 100644
index 0000000000000..e66a112cc6191
--- /dev/null
+++ b/extensions/amp-story-dev-tools/amp-story-dev-tools.md
@@ -0,0 +1,12 @@
+# amp-story-dev-tools
+
+This extension will provide creators with a range of tools to preview their layouts.
+
+Potential tools:
+
+-   Safe areas: The tool will show what the safe areas are for the story, so that important content is never cropped
+-   Multiple device checks: Users will be able to test the stories on multiple screen sizes
+-   Story insights: Parse the story and find out layout inconsistencies
+-   Validation: Ensure story is valid AMP
+
+`http://localhost:8000/examples/amp-story/ampconf.html#development=1`
diff --git a/extensions/amp-story-education/0.1/amp-story-education.css b/extensions/amp-story-education/0.1/amp-story-education.css
index 498b1ac95b46f..2a14e55268a8e 100644
--- a/extensions/amp-story-education/0.1/amp-story-education.css
+++ b/extensions/amp-story-education/0.1/amp-story-education.css
@@ -75,13 +75,16 @@ amp-story-education {
 .i-amphtml-story-education-navigation-gesture-outer {
   position: absolute !important;
   height: 60px !important;
-  width: 100% !important;
   border-radius: 60px !important;
   border: 4px solid #FFF !important;
   animation: i-amphtml-tap-outer 1.6s cubic-bezier(0.4,0,0.2,1) 0.5s infinite backwards !important;
   will-change: left, opacity !important;
 }
 
+[step="tap"] .i-amphtml-story-education-navigation-gesture-outer {
+  width: 100% !important;
+}
+
 [step="swipe"] .i-amphtml-story-education-navigation-gesture-outer {
   animation: i-amphtml-swipe-outer 1.6s cubic-bezier(0.4,0,0.2,1) 0.5s infinite backwards !important;
 }
@@ -96,18 +99,15 @@ amp-story-education {
   width: 30px !important;
   background: #FFF;
   border-radius: 50% !important;
-  opacity: 0.5 !important;
   animation: i-amphtml-tap-inner 1.6s cubic-bezier(0.4,0,0.2,1) 0.5s infinite backwards !important;
   will-change: opacity !important;
 }
 
 [step="swipe"] .i-amphtml-story-education-navigation-gesture-inner {
-  left: 15px !important;
   animation: i-amphtml-swipe-inner 1.6s cubic-bezier(0.4,0,0.2,1) 0.5s infinite backwards !important;
 }
 
 [dir="rtl"] [step="swipe"] .i-amphtml-story-education-navigation-gesture-inner {
-  right: 15px !important;
   animation: i-amphtml-swipe-inner-rtl 1.6s cubic-bezier(0.4,0,0.2,1) 0.5s infinite backwards !important;
 }
 
@@ -250,7 +250,7 @@ amp-story-education {
   80%, 90% {
     opacity: 0;
     left: 15px;
-  },
+  }
 
   100% {
     opacity: 0;
diff --git a/extensions/amp-story-education/0.1/amp-story-education.js b/extensions/amp-story-education/0.1/amp-story-education.js
index cda12207ac39b..26ec6a6b6c71e 100644
--- a/extensions/amp-story-education/0.1/amp-story-education.js
+++ b/extensions/amp-story-education/0.1/amp-story-education.js
@@ -25,7 +25,7 @@ import {LocalizedStringId} from '../../../src/localized-strings';
 import {Services} from '../../../src/services';
 import {createShadowRootWithStyle} from '../../amp-story/1.0/utils';
 import {dev} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getLocalizationService} from '../../amp-story/1.0/amp-story-localization-service';
 import {htmlFor} from '../../../src/static-template';
 import {removeChildren} from '../../../src/dom';
@@ -86,9 +86,10 @@ export class AmpStoryEducation extends AMP.BaseElement {
     this.state_ = State.HIDDEN;
 
     /** @private @const {!../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */
-    this.storeService_ = /** @type {!../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */ (Services.storyStoreService(
-      this.win
-    ));
+    this.storeService_ =
+      /** @type {!../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */ (
+        Services.storyStoreService(this.win)
+      );
 
     /** @private {?../../../src/service/viewer-interface.ViewerInterface} */
     this.viewer_ = null;
@@ -220,9 +221,8 @@ export class AmpStoryEducation extends AMP.BaseElement {
           : LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_TAP_PROGRESS_SINGLE;
         el.querySelector(
           '.i-amphtml-story-education-navigation-progress'
-        ).textContent = this.localizationService_.getLocalizedString(
-          progressStringId
-        );
+        ).textContent =
+          this.localizationService_.getLocalizedString(progressStringId);
         el.querySelector(
           '.i-amphtml-story-education-navigation-instructions'
         ).textContent = this.localizationService_.getLocalizedString(
diff --git a/extensions/amp-story-education/0.1/test/test-amp-story-education.js b/extensions/amp-story-education/0.1/test/test-amp-story-education.js
index 4cafa474d052d..e0fb5092b74eb 100644
--- a/extensions/amp-story-education/0.1/test/test-amp-story-education.js
+++ b/extensions/amp-story-education/0.1/test/test-amp-story-education.js
@@ -140,9 +140,8 @@ describes.realWin('amp-story-education', {amp: true}, (env) => {
       // TODO(gmajoulet): remove private method call when viewer messaging is
       // introduced.
       storyEducation.setState_(State.NAVIGATION_TAP);
-      const navigationTapEl = storyEducation.containerEl_.querySelector(
-        '[step="tap"]'
-      );
+      const navigationTapEl =
+        storyEducation.containerEl_.querySelector('[step="tap"]');
 
       expect(navigationTapEl).to.exist;
     });
@@ -154,9 +153,8 @@ describes.realWin('amp-story-education', {amp: true}, (env) => {
       // TODO(gmajoulet): remove private method call when viewer messaging is
       // introduced.
       storyEducation.setState_(State.NAVIGATION_SWIPE);
-      const navigationSwipeEl = storyEducation.containerEl_.querySelector(
-        '[step="swipe"]'
-      );
+      const navigationSwipeEl =
+        storyEducation.containerEl_.querySelector('[step="swipe"]');
 
       expect(navigationSwipeEl).to.exist;
     });
@@ -182,9 +180,8 @@ describes.realWin('amp-story-education', {amp: true}, (env) => {
       const clickEvent = new MouseEvent('click', {clientX: 100, clientY: 100});
       storyEducation.containerEl_.dispatchEvent(clickEvent);
 
-      const navigationSwipeEl = storyEducation.containerEl_.querySelector(
-        '[step="swipe"]'
-      );
+      const navigationSwipeEl =
+        storyEducation.containerEl_.querySelector('[step="swipe"]');
       expect(navigationSwipeEl).to.exist;
     });
 
@@ -257,9 +254,8 @@ describes.realWin('amp-story-education', {amp: true}, (env) => {
       await Promise.resolve(); // whenFirstVisible icrotask tick.
       await Promise.resolve(); // sendMessageAwaitResponse microtask tick.
 
-      const navigationTapEl = storyEducation.containerEl_.querySelector(
-        '[step="tap"]'
-      );
+      const navigationTapEl =
+        storyEducation.containerEl_.querySelector('[step="tap"]');
       expect(navigationTapEl).to.exist;
     });
 
@@ -275,9 +271,8 @@ describes.realWin('amp-story-education', {amp: true}, (env) => {
       await Promise.resolve(); // whenFirstVisible microtask tick.
       await Promise.resolve(); // sendMessageAwaitResponse microtask tick.
 
-      const navigationTapEl = storyEducation.containerEl_.querySelector(
-        '[step="tap"]'
-      );
+      const navigationTapEl =
+        storyEducation.containerEl_.querySelector('[step="tap"]');
       expect(navigationTapEl).to.not.exist;
     });
   });
diff --git a/extensions/amp-story-education/OWNERS b/extensions/amp-story-education/OWNERS
index 6789a24da08e9..bf2ee9bd979c2 100644
--- a/extensions/amp-story-education/OWNERS
+++ b/extensions/amp-story-education/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive-abstract.js b/extensions/amp-story-interactive/0.1/amp-story-interactive-abstract.js
new file mode 100644
index 0000000000000..b979cfa6f24e8
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/amp-story-interactive-abstract.js
@@ -0,0 +1,830 @@
+/**
+ * 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.
+ */
+
+import {
+  ANALYTICS_TAG_NAME,
+  StoryAnalyticsEvent,
+} from '../../amp-story/1.0/story-analytics';
+import {
+  Action,
+  StateProperty,
+} from '../../amp-story/1.0/amp-story-store-service';
+import {AnalyticsVariable} from '../../amp-story/1.0/variable-service';
+import {CSS} from '../../../build/amp-story-interactive-0.1.css';
+import {Services} from '../../../src/services';
+import {
+  addParamsToUrl,
+  appendPathToUrl,
+  assertAbsoluteHttpOrHttpsUrl,
+} from '../../../src/url';
+import {base64UrlEncodeFromString} from '../../../src/core/types/string/base64';
+import {
+  buildInteractiveDisclaimer,
+  tryCloseDisclaimer,
+} from './interactive-disclaimer';
+import {closest} from '../../../src/dom';
+import {createShadowRootWithStyle} from '../../amp-story/1.0/utils';
+import {deduplicateInteractiveIds} from './utils';
+import {dev, devAssert} from '../../../src/log';
+import {dict} from '../../../src/core/types/object';
+import {emojiConfetti} from './interactive-confetti';
+import {isExperimentOn} from '../../../src/experiments';
+import {toArray} from '../../../src/core/types/array';
+
+/** @const {string} */
+const TAG = 'amp-story-interactive';
+
+/**
+ * @const @enum {number}
+ */
+export const InteractiveType = {
+  QUIZ: 0,
+  POLL: 1,
+  RESULTS: 2,
+};
+
+/** @const {string} */
+const ENDPOINT_INVALID_ERROR =
+  'The publisher has specified an invalid datastore endpoint';
+
+/** @const {string} */
+const INTERACTIVE_ACTIVE_CLASS = 'i-amphtml-story-interactive-active';
+
+/**
+ * @typedef {{
+ *    index: number,
+ *    count: number,
+ *    selected: boolean,
+ * }}
+ */
+export let InteractiveOptionType;
+
+/**
+ * @typedef {{
+ *    options: !Array<InteractiveOptionType>,
+ * }}
+ */
+export let InteractiveResponseType;
+
+/**
+ * @typedef {{
+ *    optionIndex: number,
+ *    text: string,
+ *    correct: ?string,
+ *    resultscategory: ?string,
+ *    image: ?string,
+ *    confetti: ?string,
+ *    resultsthreshold: ?string,
+ * }}
+ */
+export let OptionConfigType;
+
+/** @const {Array<Object>} fontFaces with urls from https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&amp;display=swap */
+const fontsToLoad = [
+  {
+    family: 'Poppins',
+    weight: '400',
+    src: "url(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2')",
+  },
+  {
+    family: 'Poppins',
+    weight: '700',
+    src: "url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2')",
+  },
+];
+
+/**
+ * Interactive abstract class with shared functionality for interactive components.
+ *
+ * Lifecycle:
+ * 1) When created, the abstract class will call the buildComponent() method implemented by each concrete class.
+ *   NOTE: When created, the component will receive a .i-amphtml-story-interactive-component, inheriting useful CSS variables.
+ *
+ * 2) If an endpoint is specified, it will retrieve aggregate results from the backend and process them. If the clientId
+ *   has responded in a previous session, the component will change to a post-selection state. Otherwise it will wait
+ *   for user selection.
+ *   NOTE: Click listeners will be attached to all options, which require .i-amphtml-story-interactive-option.
+ *
+ * 3) On user selection, it will process the backend results (if endpoint specified) and display the selected option.
+ *   Analytic events will be sent, percentages updated (implemented by the concrete class), and backend posted with the
+ *   user response. Classes will be added to the component and options accordingly.
+ *   NOTE: On option selected, the selection will receive a .i-amphtml-story-interactive-option-selected, and the root element
+ *   will receive a .i-amphtml-story-interactive-post-selection. Optionally, if the endpoint returned aggregate results,
+ *   the root element will also receive a .i-amphtml-story-interactive-has-data.
+ *
+ * @abstract
+ */
+export class AmpStoryInteractive extends AMP.BaseElement {
+  /**
+   * @param {!AmpElement} element
+   * @param {!InteractiveType} type
+   * @param {!Array<number>} bounds the bounds on number of options, inclusive
+   */
+  constructor(element, type, bounds = [2, 4]) {
+    super(element);
+
+    /** @protected @const {InteractiveType} */
+    this.interactiveType_ = type;
+
+    /** @protected {?../../amp-story/1.0/story-analytics.StoryAnalyticsService} */
+    this.analyticsService_ = null;
+
+    /** @protected {?Promise<?InteractiveResponseType|?JsonObject|undefined>} */
+    this.backendDataPromise_ = null;
+
+    /** @protected {?Promise<JsonObject>} */
+    this.clientIdPromise_ = null;
+
+    /** @protected {boolean} */
+    this.hasUserSelection_ = false;
+
+    /** @private {!Array<number>} min and max number of options, inclusive */
+    this.optionBounds_ = bounds;
+
+    /** @private {?Array<!Element>} DOM elements that have the i-amphtml-story-interactive-option class */
+    this.optionElements_ = null;
+
+    /** @protected {?Array<!OptionConfigType>} option config values from attributes (text, correct...) */
+    this.options_ = null;
+
+    /** @protected {?Array<!InteractiveOptionType>} retrieved results from the backend */
+    this.optionsData_ = null;
+
+    /** @private {?string} the page id of the component */
+    this.pageId_ = null;
+
+    /** @protected {?Element} */
+    this.rootEl_ = null;
+
+    /** @public {../../../src/service/localizationService} */
+    this.localizationService = null;
+
+    /** @protected {?../../amp-story/1.0/amp-story-request-service.AmpStoryRequestService} */
+    this.requestService_ = null;
+
+    /** @protected {?../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */
+    this.storeService_ = null;
+
+    /** @protected {?../../../src/service/url-impl.Url} */
+    this.urlService_ = null;
+
+    /** @protected {?../../amp-story/1.0/variable-service.AmpStoryVariableService} */
+    this.variableService_ = null;
+  }
+
+  /**
+   * Gets the root element.
+   * @visibleForTesting
+   * @return {?Element}
+   */
+  getRootElement() {
+    return this.rootEl_;
+  }
+
+  /**
+   * Gets the options.
+   * @protected
+   * @return {!Array<!Element>}
+   */
+  getOptionElements() {
+    if (!this.optionElements_) {
+      this.optionElements_ = toArray(
+        this.rootEl_.querySelectorAll('.i-amphtml-story-interactive-option')
+      );
+    }
+    return this.optionElements_;
+  }
+
+  /**
+   * Gets the interactive ID
+   * @private
+   * @return {string}
+   */
+  getInteractiveId_() {
+    if (!AmpStoryInteractive.canonicalUrl64) {
+      deduplicateInteractiveIds(this.win.document);
+      AmpStoryInteractive.canonicalUrl64 = base64UrlEncodeFromString(
+        Services.documentInfoForDoc(this.element).canonicalUrl
+      );
+    }
+    return `${AmpStoryInteractive.canonicalUrl64}+${this.element.id}`;
+  }
+
+  /**
+   * @private
+   * @return {string} the page id
+   */
+  getPageId_() {
+    if (this.pageId_ == null) {
+      this.pageId_ = closest(dev().assertElement(this.element), (el) => {
+        return el.tagName.toLowerCase() === 'amp-story-page';
+      }).getAttribute('id');
+    }
+    return this.pageId_;
+  }
+
+  /** @override */
+  buildCallback(concreteCSS = '') {
+    this.loadFonts_();
+    this.options_ = this.parseOptions_();
+    this.element.classList.add('i-amphtml-story-interactive-component');
+    this.adjustGridLayer_();
+    devAssert(this.element.children.length == 0, 'Too many children');
+
+    // Initialize all the services before proceeding, and update store with state
+    this.urlService_ = Services.urlForDoc(this.element);
+    return Promise.all([
+      Services.storyVariableServiceForOrNull(this.win).then((service) => {
+        this.variableService_ = service;
+      }),
+      Services.storyStoreServiceForOrNull(this.win).then((service) => {
+        this.storeService_ = service;
+        this.updateStoryStoreState_(null);
+      }),
+      Services.storyRequestServiceForOrNull(this.win).then((service) => {
+        this.requestService_ = service;
+      }),
+      Services.storyAnalyticsServiceForOrNull(this.win).then((service) => {
+        this.analyticsService_ = service;
+      }),
+      Services.localizationServiceForOrNull(this.element).then((service) => {
+        this.localizationService = service;
+      }),
+    ]).then(() => {
+      this.rootEl_ = this.buildComponent();
+      this.rootEl_.classList.add('i-amphtml-story-interactive-container');
+      createShadowRootWithStyle(
+        this.element,
+        dev().assertElement(this.rootEl_),
+        CSS + concreteCSS
+      );
+      return Promise.resolve();
+    });
+  }
+
+  /**
+   * @private
+   */
+  loadFonts_() {
+    if (
+      !AmpStoryInteractive.loadedFonts &&
+      this.win.document.fonts &&
+      FontFace
+    ) {
+      fontsToLoad.forEach((fontProperties) => {
+        const font = new FontFace(fontProperties.family, fontProperties.src, {
+          weight: fontProperties.weight,
+          style: 'normal',
+        });
+        font.load().then(() => {
+          this.win.document.fonts.add(font);
+        });
+      });
+    }
+    AmpStoryInteractive.loadedFonts = true;
+  }
+
+  /**
+   * Reads the element attributes prefixed with option- and returns them as a list.
+   * eg: [
+   *      {optionIndex: 0, text: 'Koala'},
+   *      {optionIndex: 1, text: 'Developers', correct: ''}
+   *    ]
+   * @protected
+   * @return {?Array<!OptionConfigType>}
+   */
+  parseOptions_() {
+    const options = [];
+    toArray(this.element.attributes).forEach((attr) => {
+      // Match 'option-#-type' (eg: option-1-text, option-2-image, option-3-correct...)
+      if (attr.name.match(/^option-\d+(-\w+)+$/)) {
+        const splitParts = attr.name.split('-');
+        const optionNumber = parseInt(splitParts[1], 10);
+        // Add all options in order on the array with correct index.
+        while (options.length < optionNumber) {
+          options.push({'optionIndex': options.length});
+        }
+        options[optionNumber - 1][splitParts.slice(2).join('')] = attr.value;
+      }
+    });
+    if (
+      options.length >= this.optionBounds_[0] &&
+      options.length <= this.optionBounds_[1]
+    ) {
+      return options;
+    }
+    devAssert(
+      options.length >= this.optionBounds_[0] &&
+        options.length <= this.optionBounds_[1],
+      `Improper number of options. Expected ${this.optionBounds_[0]} <= options <= ${this.optionBounds_[1]} but got ${options.length}.`
+    );
+    dev().error(
+      TAG,
+      `Improper number of options. Expected ${this.optionBounds_[0]} <= options <= ${this.optionBounds_[1]} but got ${options.length}.`
+    );
+  }
+
+  /**
+   * Finds the prompt and adds it to the prompt-container
+   *
+   * @protected
+   * @param {Element} root
+   */
+  attachPrompt_(root) {
+    const promptContainer = root.querySelector(
+      '.i-amphtml-story-interactive-prompt-container'
+    );
+
+    if (!this.element.hasAttribute('prompt-text')) {
+      this.rootEl_.removeChild(promptContainer);
+    } else {
+      const prompt = document.createElement('p');
+      prompt.textContent = this.element.getAttribute('prompt-text');
+      prompt.classList.add('i-amphtml-story-interactive-prompt');
+      promptContainer.appendChild(prompt);
+    }
+  }
+
+  /**
+   * Generates the template from the config_ Map.
+   *
+   * @return {!Element} rootEl_
+   * @protected @abstract
+   */
+  buildComponent() {
+    // Subclass must override.
+  }
+
+  /** @override */
+  layoutCallback() {
+    if (
+      isExperimentOn(this.win, 'amp-story-interactive-disclaimer') &&
+      this.element.hasAttribute('endpoint')
+    ) {
+      // Needs to be called after buildCallback to measure properly.
+      this.disclaimerEl_ = buildInteractiveDisclaimer(this);
+      this.rootEl_.prepend(this.disclaimerEl_);
+    }
+    this.initializeListeners_();
+    return (this.backendDataPromise_ = this.element.hasAttribute('endpoint')
+      ? this.retrieveInteractiveData_()
+      : Promise.resolve());
+  }
+
+  /**
+   * Gets a Promise to return the unique AMP clientId
+   * @private
+   * @return {Promise<string>}
+   */
+  getClientId_() {
+    if (!this.clientIdPromise_) {
+      this.clientIdPromise_ = Services.cidForDoc(this.element).then((data) => {
+        return data.get(
+          {scope: 'amp-story', createCookieIfNotPresent: true},
+          /* consent */ Promise.resolve()
+        );
+      });
+    }
+    return this.clientIdPromise_;
+  }
+
+  /**
+   * Reacts to RTL state updates and triggers the UI for RTL.
+   * @param {boolean} rtlState
+   * @private
+   */
+  onRtlStateUpdate_(rtlState) {
+    this.mutateElement(() => {
+      rtlState
+        ? this.rootEl_.setAttribute('dir', 'rtl')
+        : this.rootEl_.removeAttribute('dir');
+    });
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout === 'container';
+  }
+
+  /**
+   * Add classes to adjust the bottom padding on the grid-layer
+   * to prevent overlap with the component.
+   *
+   * @private
+   */
+  adjustGridLayer_() {
+    const gridLayer = closest(dev().assertElement(this.element), (el) => {
+      return el.tagName.toLowerCase() === 'amp-story-grid-layer';
+    });
+
+    gridLayer.classList.add('i-amphtml-story-has-interactive');
+
+    if (gridLayer.parentElement.querySelector('amp-story-cta-layer')) {
+      gridLayer.classList.add('i-amphtml-story-has-CTA-layer');
+    }
+
+    if (gridLayer.parentElement.querySelector('amp-story-page-attachment')) {
+      gridLayer.classList.add('i-amphtml-story-has-page-attachment');
+    }
+  }
+
+  /**
+   * Attaches functions to each option to handle state transition.
+   * @private
+   */
+  initializeListeners_() {
+    this.storeService_.subscribe(
+      StateProperty.RTL_STATE,
+      (rtlState) => {
+        this.onRtlStateUpdate_(rtlState);
+      },
+      true /** callToInitialize */
+    );
+
+    // Check if the component page is active, and add class.
+    this.storeService_.subscribe(
+      StateProperty.CURRENT_PAGE_ID,
+      (currPageId) => {
+        this.mutateElement(() => {
+          this.rootEl_.classList.toggle(
+            INTERACTIVE_ACTIVE_CLASS,
+            currPageId === this.getPageId_()
+          );
+          this.toggleTabbableElements_(currPageId === this.getPageId_());
+        });
+        tryCloseDisclaimer(this, this.disclaimerEl_);
+      },
+      true /** callToInitialize */
+    );
+
+    this.rootEl_.addEventListener('click', (e) => this.handleTap_(e));
+  }
+
+  /**
+   * Handles a tap event on the quiz element.
+   * @param {Event} e
+   * @protected
+   */
+  handleTap_(e) {
+    if (this.hasUserSelection_) {
+      return;
+    }
+
+    const optionEl = closest(
+      dev().assertElement(e.target),
+      (element) => {
+        return element.classList.contains('i-amphtml-story-interactive-option');
+      },
+      this.rootEl_
+    );
+
+    if (optionEl) {
+      this.updateStoryStoreState_(optionEl.optionIndex_);
+      this.handleOptionSelection_(optionEl);
+      const confettiEmoji = this.options_[optionEl.optionIndex_].confetti;
+      if (confettiEmoji) {
+        emojiConfetti(
+          dev().assertElement(this.rootEl_),
+          this.win,
+          confettiEmoji
+        );
+      }
+      tryCloseDisclaimer(this, this.disclaimerEl_);
+    }
+  }
+
+  /**
+   * Triggers the analytics event for quiz response.
+   *
+   * @param {!Element} optionEl
+   * @private
+   */
+  triggerAnalytics_(optionEl) {
+    this.variableService_.onVariableUpdate(
+      AnalyticsVariable.STORY_INTERACTIVE_ID,
+      this.element.getAttribute('id')
+    );
+    this.variableService_.onVariableUpdate(
+      AnalyticsVariable.STORY_INTERACTIVE_RESPONSE,
+      optionEl.optionIndex_
+    );
+    this.variableService_.onVariableUpdate(
+      AnalyticsVariable.STORY_INTERACTIVE_TYPE,
+      this.interactiveType_
+    );
+
+    this.element[ANALYTICS_TAG_NAME] = this.element.tagName;
+    this.analyticsService_.triggerEvent(
+      StoryAnalyticsEvent.INTERACTIVE,
+      this.element
+    );
+  }
+
+  /**
+   * Update component to reflect values in the data obtained.
+   * Called when user has responded (in this session or before).
+   *
+   * @protected @abstract
+   * @param {!Array<!InteractiveOptionType>} unusedOptionsData
+   */
+  displayOptionsData(unusedOptionsData) {
+    // Subclass must implement
+  }
+
+  /**
+   * Preprocess the percentages for display.
+   *
+   * @param {!Array<!InteractiveOptionType>} optionsData
+   * @return {Array<number>}
+   * @protected
+   */
+  preprocessPercentages_(optionsData) {
+    const totalResponseCount = optionsData.reduce(
+      (acc, response) => acc + response['count'],
+      0
+    );
+
+    let percentages = optionsData.map((e) =>
+      ((100 * e['count']) / totalResponseCount).toFixed(2)
+    );
+    let total = percentages.reduce((acc, x) => acc + Math.round(x), 0);
+
+    // Special case: divide remainders by three if they break 100,
+    // 3 is the maximum above 100 the remainders can add.
+    if (total > 100) {
+      percentages = percentages.map((percentage) =>
+        (percentage - (2 * (percentage - Math.floor(percentage))) / 3).toFixed(
+          2
+        )
+      );
+      total = percentages.reduce((acc, x) => (acc += Math.round(x)), 0);
+    }
+
+    if (total === 100) {
+      return percentages.map((percentage) => Math.round(percentage));
+    }
+
+    // Truncate all and round up those with the highest remainders,
+    // preserving order and ties and adding to 100 (if possible given ties and ordering).
+    let remainder = 100 - total;
+
+    let preserveOriginal = percentages.map((percentage, index) => {
+      return {
+        originalIndex: index,
+        value: percentage,
+        remainder: (percentage - Math.floor(percentage)).toFixed(2),
+      };
+    });
+    preserveOriginal.sort(
+      (left, right) =>
+        // Break remainder ties using the higher value.
+        right.remainder - left.remainder || right.value - left.value
+    );
+
+    const finalPercentages = [];
+    while (remainder > 0 && preserveOriginal.length !== 0) {
+      const highestRemainderObj = preserveOriginal[0];
+
+      const ties = preserveOriginal.filter(
+        (percentageObj) => percentageObj.value === highestRemainderObj.value
+      );
+      preserveOriginal = preserveOriginal.filter(
+        (percentageObj) => percentageObj.value !== highestRemainderObj.value
+      );
+
+      const toRoundUp =
+        ties.length <= remainder && highestRemainderObj.remainder !== '0.00';
+
+      ties.forEach((percentageObj) => {
+        finalPercentages[percentageObj.originalIndex] =
+          Math.floor(percentageObj.value) + (toRoundUp ? 1 : 0);
+      });
+
+      // Update the remainder given additions to the percentages.
+      remainder -= toRoundUp ? ties.length : 0;
+    }
+
+    preserveOriginal.forEach((percentageObj) => {
+      finalPercentages[percentageObj.originalIndex] = Math.floor(
+        percentageObj.value
+      );
+    });
+
+    return finalPercentages;
+  }
+
+  /**
+   * Triggers changes to component state on response interactive.
+   *
+   * @param {!Element} optionEl
+   * @private
+   */
+  handleOptionSelection_(optionEl) {
+    this.backendDataPromise_
+      .then(() => {
+        if (this.hasUserSelection_) {
+          return;
+        }
+
+        this.triggerAnalytics_(optionEl);
+        this.hasUserSelection_ = true;
+
+        if (this.optionsData_) {
+          this.optionsData_[optionEl.optionIndex_]['count']++;
+          this.optionsData_[optionEl.optionIndex_]['selected'] = true;
+        }
+
+        this.mutateElement(() => {
+          this.updateToPostSelectionState_(optionEl);
+        });
+
+        if (this.element.hasAttribute('endpoint')) {
+          this.executeInteractiveRequest_('POST', optionEl.optionIndex_);
+        }
+      })
+      .catch(() => {
+        // If backend is not properly connected, still update state.
+        this.triggerAnalytics_(optionEl);
+        this.hasUserSelection_ = true;
+        this.mutateElement(() => {
+          this.updateToPostSelectionState_(optionEl);
+        });
+      });
+  }
+
+  /**
+   * Get the Interactive data from the datastore
+   *
+   * @return {?Promise<?InteractiveResponseType|?JsonObject|undefined>}
+   * @private
+   */
+  retrieveInteractiveData_() {
+    return this.executeInteractiveRequest_('GET').then((response) => {
+      this.handleSuccessfulDataRetrieval_(
+        /** @type {InteractiveResponseType} */ (response)
+      );
+    });
+  }
+
+  /**
+   * Executes a Interactive API call.
+   *
+   * @param {string} method GET or POST.
+   * @param {number=} optionSelected
+   * @return {!Promise<!InteractiveResponseType|string>}
+   * @private
+   */
+  executeInteractiveRequest_(method, optionSelected = undefined) {
+    let url = this.element.getAttribute('endpoint');
+    if (!assertAbsoluteHttpOrHttpsUrl(url)) {
+      return Promise.reject(ENDPOINT_INVALID_ERROR);
+    }
+
+    return this.getClientId_().then((clientId) => {
+      const requestOptions = {'method': method};
+      const requestParams = dict({
+        'type': this.interactiveType_,
+        'client': clientId,
+      });
+      url = appendPathToUrl(
+        this.urlService_.parse(url),
+        this.getInteractiveId_()
+      );
+      if (requestOptions['method'] === 'POST') {
+        requestOptions['body'] = {'option_selected': optionSelected};
+        requestOptions['headers'] = {'Content-Type': 'application/json'};
+        url = appendPathToUrl(this.urlService_.parse(url), ':vote');
+      }
+      url = addParamsToUrl(url, requestParams);
+      return this.requestService_
+        .executeRequest(url, requestOptions)
+        .catch((err) => dev().error(TAG, err));
+    });
+  }
+
+  /**
+   * Handles incoming interactive data response
+   *
+   * RESPONSE FORMAT
+   * {
+   *  options: [
+   *    {
+   *      index:
+   *      count:
+   *      selected:
+   *    },
+   *    ...
+   *  ]
+   * }
+   * @param {InteractiveResponseType|undefined} response
+   * @private
+   */
+  handleSuccessfulDataRetrieval_(response) {
+    if (!(response && response['options'])) {
+      devAssert(
+        response && 'options' in response,
+        `Invalid interactive response, expected { data: InteractiveResponseType, ...} but received ${response}`
+      );
+      dev().error(
+        TAG,
+        `Invalid interactive response, expected { data: InteractiveResponseType, ...} but received ${response}`
+      );
+      return;
+    }
+    const numOptions = this.rootEl_.querySelectorAll(
+      '.i-amphtml-story-interactive-option'
+    ).length;
+    // Only keep the visible options to ensure visible percentages add up to 100.
+    this.updateComponentOnDataRetrieval_(
+      response['options'].slice(0, numOptions)
+    );
+  }
+
+  /**
+   * Updates the quiz to reflect the state of the remote data.
+   * @param {!Array<InteractiveOptionType>} data
+   * @private
+   */
+  updateComponentOnDataRetrieval_(data) {
+    const options = this.rootEl_.querySelectorAll(
+      '.i-amphtml-story-interactive-option'
+    );
+
+    this.optionsData_ = data;
+    data.forEach((response, index) => {
+      if (response.selected) {
+        this.hasUserSelection_ = true;
+        this.updateStoryStoreState_(index);
+        this.mutateElement(() => {
+          this.updateToPostSelectionState_(options[index]);
+        });
+      }
+    });
+  }
+
+  /**
+   * Updates the selected classes on component and option selected.
+   * @param {?Element} selectedOption
+   * @protected
+   */
+  updateToPostSelectionState_(selectedOption) {
+    this.rootEl_.classList.add('i-amphtml-story-interactive-post-selection');
+    if (selectedOption != null) {
+      selectedOption.classList.add(
+        'i-amphtml-story-interactive-option-selected'
+      );
+    }
+
+    if (this.optionsData_) {
+      this.rootEl_.classList.add('i-amphtml-story-interactive-has-data');
+      this.displayOptionsData(this.optionsData_);
+    }
+    this.getOptionElements().forEach((el) => {
+      el.setAttribute('tabindex', -1);
+    });
+  }
+
+  /**
+   * @public
+   * @param {?number} option
+   */
+  updateStoryStoreState_(option = null) {
+    const update = {
+      option: option != null ? this.options_[option] : null,
+      interactiveId: this.getInteractiveId_(),
+      type: this.interactiveType_,
+    };
+    this.storeService_.dispatch(Action.ADD_INTERACTIVE_REACT, update);
+  }
+
+  /**
+   * Toggles the tabbable elements (buttons, links, etc) to only reach them when page is active.
+   * @param {boolean} toggle
+   */
+  toggleTabbableElements_(toggle) {
+    this.rootEl_.querySelectorAll('button, a').forEach((el) => {
+      // Disable tabbing through options if already selected.
+      if (
+        el.classList.contains('i-amphtml-story-interactive-option') &&
+        this.hasUserSelection_
+      ) {
+        el.setAttribute('tabindex', -1);
+      } else {
+        el.setAttribute('tabindex', toggle ? 0 : -1);
+      }
+    });
+  }
+}
diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive-binary-poll.css b/extensions/amp-story-interactive/0.1/amp-story-interactive-binary-poll.css
new file mode 100644
index 0000000000000..e26abf18554d2
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/amp-story-interactive-binary-poll.css
@@ -0,0 +1,209 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/* 1em = 16px for interactive components, unless overriden by font-size */
+.i-amphtml-story-interactive-binary-poll-container {
+  color: var(--i-amphtml-interactive-option-accent-color) !important;
+  --post-select-scale: 0.5 !important;
+  --post-select-scale-variable: 1;
+  border-radius: 2em !important;
+}
+
+.i-amphtml-story-interactive-binary-poll-option-container {
+  background: var(--i-amphtml-interactive-option-background-color) !important;
+  display: flex !important;
+  justify-content: center !important;
+  height: 5.625em !important;
+  border-radius: 1em !important;
+  overflow: hidden !important;
+  box-shadow: var(--i-amphtml-interactive-component-shadow) !important;
+  /* overflow bug fix for percent bar animation on ios safari  */
+  transform: translateZ(0) !important;
+}
+
+.i-amphtml-story-interactive-option {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  text-align: center !important;
+  flex-direction: column !important;
+  width: 50%;
+  position: relative !important;
+  background-color: transparent !important;
+  font: inherit !important;
+  border: none !important;
+  outline: none !important;
+  color: inherit !important;
+}
+
+.i-amphtml-story-interactive-prompt {
+  text-align: center !important;
+}
+
+.i-amphtml-story-interactive-option-text-container {
+  width: 100% !important;
+  display: flex !important;
+  align-items: center !important;
+  flex-direction: column !important;
+  transform: translateY(calc(1em + 1px)) !important;
+}
+
+.i-amphtml-story-interactive-post-selection
+  .i-amphtml-story-interactive-option-text-container {
+  transition: transform var(--i-amphtml-interactive-animation-time)
+      var(--i-amphtml-interactive-ease-out-curve),
+    opacity var(--i-amphtml-interactive-animation-time)
+      var(--i-amphtml-interactive-ease-out-curve) !important;
+  transform: translateY(0) !important;
+}
+
+.i-amphtml-story-interactive-binary-poll-container:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option-divider {
+  height: 100% !important;
+  width: 1px !important;
+  opacity: 0.3 !important;
+  background-color: var(--i-amphtml-interactive-theme-border) !important;
+}
+
+.i-amphtml-story-interactive-option
+  .i-amphtml-story-interactive-option-percent-bar {
+  height: 100% !important;
+  width: 100% !important;
+  position: absolute !important;
+  opacity: 0 !important;
+  transform-origin: left !important;
+  transition: transform var(--i-amphtml-interactive-animation-time)
+    var(--i-amphtml-interactive-ease-out-curve) !important;
+}
+
+[dir='rtl']
+  .i-amphtml-story-interactive-option
+  .i-amphtml-story-interactive-option-percent-bar {
+  transform-origin: right !important;
+}
+
+.i-amphtml-story-interactive-option:last-child
+  .i-amphtml-story-interactive-option-percent-bar {
+  transform-origin: right !important;
+}
+
+[dir='rtl']
+  .i-amphtml-story-interactive-option:last-child
+  .i-amphtml-story-interactive-option-percent-bar {
+  transform-origin: left !important;
+}
+
+.i-amphtml-story-interactive-post-selection
+  .i-amphtml-story-interactive-option.i-amphtml-story-interactive-option-selected
+  .i-amphtml-story-interactive-option-percent-bar {
+  background-color: var(--i-amphtml-interactive-option-accent-color) !important;
+  opacity: 0.2 !important;
+  animation: i-amphtml-interactive-animation-flash-background forwards
+    var(--i-amphtml-interactive-animation-time)
+    var(--i-amphtml-interactive-ease-out-curve);
+}
+
+.i-amphtml-story-interactive-option-title {
+  font-weight: 800 !important;
+  font-size: 1.75em !important;
+  margin: 0 !important;
+  line-height: 1.3em !important;
+  width: 4.42em !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  transition: transform var(--i-amphtml-interactive-animation-time)
+    var(--i-amphtml-interactive-ease-out-curve) !important;
+  height: 2.6em !important;
+}
+
+.i-amphtml-story-interactive-post-selection
+  .i-amphtml-story-interactive-option-title {
+  transform: scale(var(--post-select-scale)) !important;
+}
+
+.i-amphtml-story-interactive-option-title-text {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  display: -webkit-box !important;
+  -webkit-line-clamp: 2 !important;
+  -webkit-box-orient: vertical !important;
+  transition: transform var(--i-amphtml-interactive-animation-time)
+    var(--i-amphtml-interactive-ease-out-curve) !important;
+  max-height: 2.6em !important;
+}
+
+.i-amphtml-story-interactive-post-selection
+  .i-amphtml-story-interactive-option-title-text {
+  transform: scale(var(--post-select-scale-variable)) !important;
+}
+
+.i-amphtml-story-interactive-option-percentage-text {
+  font-weight: 700 !important;
+  font-size: 1.375em !important;
+  transform: scale(0) !important;
+  display: inline-block !important;
+  transition: transform var(--i-amphtml-interactive-animation-time)
+    var(--i-amphtml-interactive-ease-out-curve) !important;
+}
+
+.i-amphtml-story-interactive-post-selection
+  .i-amphtml-story-interactive-option-percentage-text {
+  transform: scale(1) translateY(-0.75em) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option::before {
+  background-color: var(--i-amphtml-interactive-theme-shading-flash) !important;
+  content: '' !important;
+  position: absolute !important;
+  width: 100% !important;
+  height: 100% !important;
+  left: 0 !important;
+  opacity: 0 !important;
+  animation: i-amphtml-interactive-animation-landing-animation-flash-background var(--i-amphtml-interactive-animation-time) !important;
+  animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el1) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option:nth-of-type(2)::before {
+  animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el2) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option:focus::before {
+    opacity: 1 !important;
+    background-color: var(--i-amphtml-interactive-theme-shading) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option
+    .i-amphtml-story-interactive-option-title-text {
+    animation: i-amphtml-story-interactive-option-title-text-landing-animation var(--i-amphtml-interactive-animation-time) !important;
+    animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el1) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option:nth-of-type(2)
+    .i-amphtml-story-interactive-option-title-text {
+    animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el2) !important;
+}
+
+@keyframes i-amphtml-story-interactive-option-title-text-landing-animation {
+  33% {
+    transform: scale(.95);
+  }
+}
diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive-binary-poll.js b/extensions/amp-story-interactive/0.1/amp-story-interactive-binary-poll.js
new file mode 100644
index 0000000000000..840e9caa9da92
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/amp-story-interactive-binary-poll.js
@@ -0,0 +1,269 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  AmpStoryInteractive,
+  InteractiveType,
+} from './amp-story-interactive-abstract';
+import {CSS} from '../../../build/amp-story-interactive-binary-poll-0.1.css';
+import {computedStyle, setStyle} from '../../../src/style';
+import {dev} from '../../../src/log';
+import {htmlFor} from '../../../src/static-template';
+import {toArray} from '../../../src/core/types/array';
+
+/** @const @enum {number} */
+export const FontSize = {
+  EMOJI: 28,
+  SINGLE_LINE: 16,
+  DOUBLE_LINE: 14,
+};
+
+/**
+ * Minimum transformX value.
+ * Prevents small percentages from moving outside of poll.
+ *
+/** @const {number} */
+const MIN_HORIZONTAL_TRANSFORM = -20;
+
+/**
+ * Generates the template for the binary poll.
+ *
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildBinaryPollTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`
+    <div class="i-amphtml-story-interactive-binary-poll-container">
+      <div class="i-amphtml-story-interactive-prompt-container"></div>
+      <div
+        class="i-amphtml-story-interactive-binary-poll-option-container"
+      ></div>
+    </div>
+  `;
+};
+
+/**
+ * Generates the template for the binary poll option.
+ *
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildOptionTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`
+    <button class="i-amphtml-story-interactive-option" aria-live="polite">
+      <span class="i-amphtml-story-interactive-option-percent-bar"></span>
+      <span class="i-amphtml-story-interactive-option-text-container">
+        <span class="i-amphtml-story-interactive-option-title"
+          ><span class="i-amphtml-story-interactive-option-title-text"></span
+        ></span>
+        <span
+          class="i-amphtml-story-interactive-option-percentage-text"
+          aria-hidden="true"
+          >0%</span
+        >
+      </span>
+    </button>
+  `;
+};
+
+/**
+ * Generates the template for the option divider.
+ *
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildBinaryOptionDividerTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`
+    <span class="i-amphtml-story-interactive-option-divider"></span>
+  `;
+};
+
+export class AmpStoryInteractiveBinaryPoll extends AmpStoryInteractive {
+  /**
+   * @param {!AmpElement} element
+   */
+  constructor(element) {
+    super(element, InteractiveType.POLL, /* bounds */ [2, 2]);
+  }
+
+  /** @override */
+  buildCallback() {
+    return super.buildCallback(CSS);
+  }
+
+  /** @override */
+  buildComponent() {
+    this.rootEl_ = buildBinaryPollTemplate(this.element);
+    this.attachContent_(this.rootEl_);
+    return this.rootEl_;
+  }
+
+  /** @override */
+  layoutCallback() {
+    return this.adaptFontSize_(dev().assertElement(this.rootEl_)).then(() =>
+      super.layoutCallback()
+    );
+  }
+
+  /**
+   * Gets the options and adds them to the element
+   *
+   * @private
+   * @param {!Element} root
+   */
+  attachContent_(root) {
+    this.attachPrompt_(root);
+    const options = root.querySelector(
+      '.i-amphtml-story-interactive-binary-poll-option-container'
+    );
+    options.appendChild(this.generateOption_(this.options_[0]));
+    options.appendChild(buildBinaryOptionDividerTemplate(root));
+    options.appendChild(this.generateOption_(this.options_[1]));
+  }
+
+  /**
+   * This method changes the font-size on post-select to best display the titles.
+   *
+   * It measures the number of lines and chars on the titles and generates an appropriate font-size.
+   * - font-size: 28px - Both titles are emojis or short text (yes/no)
+   * - font-size: 16px - Both titles have at most one line
+   * - font-size: 14px - At least one title has two lines
+   *
+   * The title container will shrink 50% on post-select to indicate the safe-zone for the title is smaller.
+   * To keep the font-size (original font-size:28px) true to the guidelines above, a post-select-scale is applied counteracting it.
+   * Eg. post-select-scale:1 corresponds to font-size:14px after the 50% scale (for 2-lined title),
+   * but post-select-scale:1.14 corresponds to font-size:16px after the 50% scale (for 1-lined titles),
+   * and post-select-scale:2 corresponds to font-size:28px after the 50% scale (for emoji titles).
+   * @private
+   * @param {!Element} root
+   * @return {!Promise}
+   */
+  adaptFontSize_(root) {
+    let largestFontSize = FontSize.EMOJI;
+    const allTitles = toArray(
+      root.querySelectorAll('.i-amphtml-story-interactive-option-title-text')
+    );
+    return this.measureMutateElement(
+      () => {
+        allTitles.forEach((e) => {
+          const lines = Math.round(
+            e./*OK*/ clientHeight /
+              parseFloat(
+                computedStyle(this.win, e)['line-height'].replace('px', '')
+              )
+          );
+          if (e.textContent.length <= 3 && largestFontSize >= FontSize.EMOJI) {
+            largestFontSize = FontSize.EMOJI;
+          } else if (lines == 1 && largestFontSize >= FontSize.SINGLE_LINE) {
+            largestFontSize = FontSize.SINGLE_LINE;
+          } else if (lines == 2) {
+            largestFontSize = FontSize.DOUBLE_LINE;
+          }
+        });
+      },
+      () => {
+        setStyle(
+          root,
+          '--post-select-scale-variable',
+          `${(largestFontSize / FontSize.DOUBLE_LINE).toFixed(2)}`
+        );
+      },
+      root
+    );
+  }
+
+  /**
+   * Creates an option template filled with the details the attributes.
+   * @param {./amp-story-interactive-abstract.OptionConfigType} option
+   * @return {Element} option element
+   * @private
+   */
+  generateOption_(option) {
+    const convertedOption = buildOptionTemplate(this.element);
+
+    const optionText = convertedOption.querySelector(
+      '.i-amphtml-story-interactive-option-title-text'
+    );
+    optionText.textContent = option['text'];
+    convertedOption.optionIndex_ = option['optionIndex'];
+    return convertedOption;
+  }
+
+  /**
+   * Creates a number to transfrom the x axis of binary poll text.
+   * @param {number} percentage
+   * @return {number}
+   * @private
+   */
+  getTransformVal_(percentage) {
+    let mappedVal = Math.max(percentage - 50, MIN_HORIZONTAL_TRANSFORM);
+    if (document.dir === 'rtl') {
+      mappedVal *= -1;
+    }
+    return mappedVal;
+  }
+
+  /**
+   * @override
+   */
+  displayOptionsData(responseData) {
+    if (!responseData) {
+      return;
+    }
+
+    const percentages = this.preprocessPercentages_(responseData);
+
+    this.getOptionElements().forEach((el, index) => {
+      // TODO(jackbsteinberg): Add i18n support for various ways of displaying percentages.
+      const percentage = percentages[index];
+      const percentageEl = el.querySelector(
+        '.i-amphtml-story-interactive-option-percentage-text'
+      );
+      percentageEl.textContent = `${percentage}%`;
+      percentageEl.removeAttribute('aria-hidden');
+
+      setStyle(
+        el.querySelector('.i-amphtml-story-interactive-option-percent-bar'),
+        'transform',
+        `scaleX(${percentage * 0.01 * 2})`
+      );
+
+      const textContainer = el.querySelector(
+        '.i-amphtml-story-interactive-option-text-container'
+      );
+
+      textContainer.setAttribute(
+        'style',
+        `transform: translateX(${
+          this.getTransformVal_(percentage) * (index === 0 ? 1 : -1)
+        }%) !important`
+      );
+      if (responseData[index].selected) {
+        textContainer.setAttribute(
+          'aria-label',
+          'selected ' + textContainer.textContent
+        );
+      }
+
+      if (percentage === 0) {
+        setStyle(textContainer, 'opacity', '0');
+      }
+    });
+  }
+}
diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive-poll.css b/extensions/amp-story-interactive/0.1/amp-story-interactive-poll.css
new file mode 100644
index 0000000000000..93062d732ad26
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/amp-story-interactive-poll.css
@@ -0,0 +1,211 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/* 1em = 16px for interactive components, unless overriden by font-size */
+.i-amphtml-story-interactive-option-container {
+  background-color: var(--i-amphtml-interactive-options-chip-background-color) !important;
+  border-radius: 1em !important;
+  color: var(--i-amphtml-interactive-strong-text-color) !important;
+  font-weight: bold !important;
+  padding: .5em !important;
+}
+
+.i-amphtml-story-interactive-option {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  height: 3.5em !important;
+  overflow: hidden !important;
+  padding: 0px .75em !important;
+  position: relative !important;
+  box-shadow: var(--i-amphtml-interactive-chip-shadow), inset 0px 0px 0px 1px var(--i-amphtml-interactive-theme-border) !important;
+  -webkit-box-shadow: var(--i-amphtml-interactive-chip-shadow), inset 0px 0px 0px 1px var(--i-amphtml-interactive-theme-border) !important;
+  -moz-box-shadow: var(--i-amphtml-interactive-chip-shadow), inset 0px 0px 0px 1px var(--i-amphtml-interactive-theme-border) !important;
+  border-radius: .5em !important;
+  background-color: var(--i-amphtml-interactive-option-background-color);
+  border: none !important;
+  font: inherit !important;
+  color: inherit !important;
+  width: 100% !important;
+  outline: none !important;
+  text-align: start !important;
+}
+
+.i-amphtml-story-interactive-option:not(:first-child) {
+  margin-top: .5em !important;
+}
+
+.i-amphtml-story-interactive-option.i-amphtml-story-interactive-option-selected {
+  background-color: var(--i-amphtml-interactive-theme-shading-base);
+  box-shadow: var(--i-amphtml-interactive-chip-shadow-inset), inset 0px 0px 0px 1px var(--i-amphtml-interactive-theme-border) !important;
+  -webkit-box-shadow: var(--i-amphtml-interactive-chip-shadow-inset), inset 0px 0px 0px 1px var(--i-amphtml-interactive-theme-border) !important;
+  -moz-box-shadow: var(--i-amphtml-interactive-chip-shadow-inset), inset 0px 0px 0px 1px var(--i-amphtml-interactive-theme-border) !important;
+  animation: i-amphtml-interactive-animation-flash-background-color forwards var(--i-amphtml-interactive-animation-time) var(--i-amphtml-interactive-ease-out-curve) !important;
+}
+
+.i-amphtml-story-interactive-option::after {
+  content: '' !important;
+  background-color: var(--i-amphtml-interactive-theme-shading) !important;
+  position: absolute !important;
+  height: 100% !important;
+  width: 100% !important;
+  left: 0 !important;
+  top: 0 !important;
+  transform: translateX(-100%) !important;
+  transition: transform var(--i-amphtml-interactive-animation-time) var(--i-amphtml-interactive-ease-out-curve) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option:focus::before {
+    opacity: 1 !important;
+    background-color: var(--i-amphtml-interactive-theme-shading) !important;
+}
+
+.i-amphtml-story-interactive-poll-container[dir="rtl"] .i-amphtml-story-interactive-option::after {
+  transform: translateX(100%)!important;
+}
+
+.i-amphtml-story-interactive-post-selection .i-amphtml-story-interactive-option::after {
+  transform: translateX(calc(var(--option-percentage) - 100%)) !important;
+}
+
+.i-amphtml-story-interactive-poll-container.i-amphtml-story-interactive-post-selection[dir="rtl"] .i-amphtml-story-interactive-option::after {
+  transform: translateX(calc(100% - var(--option-percentage)))!important;
+}
+
+.i-amphtml-story-interactive-poll-container:not(.i-amphtml-story-interactive-has-data) .i-amphtml-story-interactive-option::after {
+  visibility: hidden !important;
+}
+
+.i-amphtml-story-interactive-option-text {
+  font-size: 1.375em !important;
+  margin: 0 !important;
+  z-index: 1 !important;
+  transition: transform var(--i-amphtml-interactive-animation-time) var(--i-amphtml-interactive-ease-out-curve) !important;
+  transform-origin: left !important;
+  line-height: 1.3em !important;
+  word-wrap: break-word !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  display: -webkit-box !important;
+  -webkit-line-clamp: 2 !important;
+  -webkit-box-orient: vertical !important;
+  max-height: 2.6em !important;
+}
+
+.i-amphtml-story-interactive-poll-two-lines .i-amphtml-story-interactive-option-text {
+  font-size: 1.125em !important;
+}
+
+.i-amphtml-story-interactive-poll-container[dir="rtl"] .i-amphtml-story-interactive-option-text{
+  transform-origin: right !important;
+}
+
+.i-amphtml-story-interactive-post-selection .i-amphtml-story-interactive-option-text {
+  transform: scale(0.72) !important;
+}
+
+.i-amphtml-story-interactive-option-percentage {
+  font-weight: 700 !important;
+  font-size: 1.75em !important;
+  margin: 0 !important;
+  opacity: 0 !important;
+  transition: transform var(--i-amphtml-interactive-animation-time) var(--i-amphtml-interactive-ease-out-curve) !important;
+  transform: translateX(2em) !important;
+  flex-shrink: 0 !important;
+  /* Percentage sign always goes to the right of the number, regardless of language. TODO(mszylkowski): rtl for arabic */
+  direction: ltr !important;
+}
+
+.i-amphtml-story-interactive-poll-container[dir="rtl"] .i-amphtml-story-interactive-option-percentage {
+  transform: translateX(-2em) !important;
+}
+
+.i-amphtml-story-interactive-has-data.i-amphtml-story-interactive-post-selection[dir="rtl"] .i-amphtml-story-interactive-option-percentage,
+.i-amphtml-story-interactive-has-data.i-amphtml-story-interactive-post-selection:not([dir="rtl"]) .i-amphtml-story-interactive-option-percentage {
+  opacity: 1 !important;
+  transform: translateX(0px) !important;
+}
+
+.i-amphtml-story-interactive-option-percentage-sign {
+  font-size: .6em !important;
+  margin-left: -.25em !important;
+  display: inline-block !important;
+}
+
+.i-amphtml-story-interactive-poll-container:not(.i-amphtml-story-interactive-has-data) .i-amphtml-story-interactive-option-percentage {
+  visibility: hidden !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option::before {
+  background-color: var(--i-amphtml-interactive-theme-shading-flash) !important;
+  content: '' !important;
+  position: absolute !important;
+  width: 100% !important;
+  height: 100% !important;
+  left: 0 !important;
+  opacity: 0 !important;
+  animation: i-amphtml-interactive-animation-landing-animation-flash-background var(--i-amphtml-interactive-animation-time) !important;
+  animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el1) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option:nth-of-type(2)::before {
+  animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el2) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option:nth-of-type(3)::before {
+  animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el3) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option:nth-of-type(4)::before {
+  animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el4) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option
+    .i-amphtml-story-interactive-option-text {
+    transform-origin: center !important;
+    animation: i-amphtml-story-interactive-option-text-landing-text var(--i-amphtml-interactive-animation-time) !important;
+    animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el1) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option:nth-of-type(2)
+    .i-amphtml-story-interactive-option-text {
+    animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el2) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option:nth-of-type(3)
+    .i-amphtml-story-interactive-option-text {
+    animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el3) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option:nth-of-type(4)
+    .i-amphtml-story-interactive-option-text {
+    animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el4) !important;
+}
+
+@keyframes i-amphtml-story-interactive-option-text-landing-text {
+  33% {
+    transform: translateY(.2em);
+  }
+}
diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive-poll.js b/extensions/amp-story-interactive/0.1/amp-story-interactive-poll.js
new file mode 100644
index 0000000000000..6b67998b1d801
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/amp-story-interactive-poll.js
@@ -0,0 +1,190 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  AmpStoryInteractive,
+  InteractiveType,
+} from './amp-story-interactive-abstract';
+import {CSS} from '../../../build/amp-story-interactive-poll-0.1.css';
+import {computedStyle, setStyle} from '../../../src/style';
+import {dev} from '../../../src/log';
+import {htmlFor} from '../../../src/static-template';
+import {toArray} from '../../../src/core/types/array';
+
+/**
+ * Generates the template for the poll.
+ *
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildPollTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`
+    <div class="i-amphtml-story-interactive-poll-container">
+      <div class="i-amphtml-story-interactive-prompt-container"></div>
+      <div class="i-amphtml-story-interactive-option-container"></div>
+    </div>
+  `;
+};
+
+/**
+ * Generates the template for each option.
+ *
+ * @param {!Element} option
+ * @return {!Element}
+ */
+const buildOptionTemplate = (option) => {
+  const html = htmlFor(option);
+  return html`
+    <button class="i-amphtml-story-interactive-option" aria-live="polite">
+      <span class="i-amphtml-story-interactive-option-text"></span>
+      <span class="i-amphtml-story-interactive-option-percentage">
+        <span class="i-amphtml-story-interactive-option-percentage-text"></span>
+        <span class="i-amphtml-story-interactive-option-percentage-sign"
+          >%</span
+        >
+      </span>
+    </button>
+  `;
+};
+
+export class AmpStoryInteractivePoll extends AmpStoryInteractive {
+  /**
+   * @param {!AmpElement} element
+   */
+  constructor(element) {
+    super(element, InteractiveType.POLL, [2, 4]);
+  }
+
+  /** @override */
+  buildCallback() {
+    return super.buildCallback(CSS);
+  }
+
+  /** @override */
+  buildComponent() {
+    this.rootEl_ = buildPollTemplate(this.element);
+    this.attachContent_(this.rootEl_);
+    return this.rootEl_;
+  }
+
+  /** @override */
+  layoutCallback() {
+    return this.adaptFontSize_(dev().assertElement(this.rootEl_)).then(() =>
+      super.layoutCallback()
+    );
+  }
+
+  /**
+   * Finds the prompt and options content
+   * and adds it to the quiz element.
+   *
+   * @private
+   * @param {Element} root
+   */
+  attachContent_(root) {
+    this.attachPrompt_(root);
+    this.options_.forEach((option, index) =>
+      this.configureOption_(option, index)
+    );
+  }
+
+  /**
+   * Creates an option container with option content,
+   * adds styling and answer choices,
+   * and adds it to the quiz element.
+   *
+   * @param {!./amp-story-interactive-abstract.OptionConfigType} option
+   * @param {number} index
+   * @private
+   */
+  configureOption_(option, index) {
+    const convertedOption = buildOptionTemplate(this.element);
+    convertedOption.optionIndex_ = index;
+
+    // Extract and structure the option information
+    convertedOption.querySelector(
+      '.i-amphtml-story-interactive-option-text'
+    ).textContent = option.text;
+
+    this.rootEl_
+      .querySelector('.i-amphtml-story-interactive-option-container')
+      .appendChild(convertedOption);
+  }
+
+  /**
+   * @override
+   */
+  displayOptionsData(optionsData) {
+    if (!optionsData) {
+      return;
+    }
+
+    const percentages = this.preprocessPercentages_(optionsData);
+
+    this.getOptionElements().forEach((el, index) => {
+      if (optionsData[index].selected) {
+        const textEl = el.querySelector(
+          '.i-amphtml-story-interactive-option-text'
+        );
+        textEl.setAttribute('aria-label', 'selected ' + textEl.textContent);
+      }
+      el.querySelector(
+        '.i-amphtml-story-interactive-option-percentage-text'
+      ).textContent = percentages[index];
+      setStyle(el, '--option-percentage', percentages[index] + '%');
+    });
+  }
+
+  /**
+   * This method changes the font-size to best display the options, measured only once on create.
+   *
+   * If two lines appear, it will add the class 'i-amphtml-story-interactive-poll-two-lines'
+   * It measures the number of lines on all options and generates the best size.
+   * - font-size: 22px (1.375em) - All options are one line
+   * - font-size: 18px (1.125em) - Any option is two lines if displayed at 22px.
+   *
+   * @private
+   * @param {!Element} root
+   * @return {!Promise}
+   */
+  adaptFontSize_(root) {
+    let hasTwoLines = false;
+    const allOptionTexts = toArray(
+      root.querySelectorAll('.i-amphtml-story-interactive-option-text')
+    );
+    return this.measureMutateElement(
+      () => {
+        hasTwoLines = allOptionTexts.some((e) => {
+          const lines = Math.round(
+            e./*OK*/ clientHeight /
+              parseFloat(
+                computedStyle(this.win, e)['line-height'].replace('px', '')
+              )
+          );
+          return lines >= 2;
+        });
+      },
+      () => {
+        this.rootEl_.classList.toggle(
+          'i-amphtml-story-interactive-poll-two-lines',
+          hasTwoLines
+        );
+      },
+      root
+    );
+  }
+}
diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive-quiz.css b/extensions/amp-story-interactive/0.1/amp-story-interactive-quiz.css
new file mode 100644
index 0000000000000..3797c27a90c4b
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/amp-story-interactive-quiz.css
@@ -0,0 +1,348 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/* 1em = 16px for interactive components, unless overriden by font-size */
+.i-amphtml-story-interactive-quiz-container {
+  --correct-color: #5bba74 !important;
+  --correct-color-shaded: #00600f !important;
+  --incorrect-color: #f34e4e !important;
+  --incorrect-color-shaded: #b71c1c !important;
+}
+
+.i-amphtml-story-interactive-quiz-option-container {
+  display: flex !important;
+  flex-direction: column;
+  background-color: var(
+    --i-amphtml-interactive-options-chip-background-color
+  ) !important;
+  border-radius: 2em !important;
+  padding: 0.5em 0.5em 0 0.5em !important;
+  box-shadow: var(--i-amphtml-interactive-component-shadow) !important;
+}
+
+.i-amphtml-story-interactive-quiz-option {
+  font-family: inherit !important;
+  position: relative !important;
+  display: flex !important;
+  justify-items: start !important;
+  align-items: center !important;
+  border-radius: 1.649em !important; /* On iOS inset shadows with border-radius require borders smaller than sides to render correctly. Issue #31036 */
+  padding: 0.5em 1em 0.5em 0.5em !important;
+  background-color: var(
+    --i-amphtml-interactive-option-background-color
+  ) !important;
+  margin-bottom: 0.5em !important;
+  color: var(--i-amphtml-interactive-option-text-color) !important;
+  box-shadow: var(--i-amphtml-interactive-chip-shadow),
+    inset 0px 0px 0px 1px var(--i-amphtml-interactive-theme-border) !important;
+  -webkit-box-shadow: var(--i-amphtml-interactive-chip-shadow),
+    inset 0px 0px 0px 1px var(--i-amphtml-interactive-theme-border) !important;
+  -moz-box-shadow: var(--i-amphtml-interactive-chip-shadow),
+    inset 0px 0px 0px 1px var(--i-amphtml-interactive-theme-border) !important;
+  font-size: 1em !important;
+  line-height: 1.25em !important;
+  overflow: hidden !important;
+  z-index: 0 !important;
+  border: none !important;
+  outline: none !important;
+  text-align: start !important;
+}
+
+[dir='rtl'] .i-amphtml-story-interactive-quiz-option {
+  padding: 0.5em 0.5em 0.5em 1em !important;
+}
+
+/* Truncate option text and add an ellipsis after 2 lines. */
+.i-amphtml-story-interactive-quiz-option-text {
+  max-height: 2.5em !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  display: -webkit-box !important;
+  -webkit-line-clamp: 2 !important;
+  -webkit-box-orient: vertical !important;
+  visibility: visible !important;
+}
+
+.i-amphtml-story-interactive-post-selection
+  .i-amphtml-story-interactive-option-selected {
+  color: white !important;
+  border: solid 1px transparent !important;
+}
+
+.i-amphtml-story-interactive-quiz-answer-choice {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  height: 1.5em !important;
+  width: 1.5em !important;
+  min-width: 1.5em !important;
+  border-radius: 50% !important;
+  border: solid 0.125em !important;
+  padding: .31em !important;
+  margin-right: 1em !important;
+  color: var(--interactive-accent-color) !important;
+  border-color: var(--i-amphtml-interactive-answer-choice-border) !important;
+  font-size: 1em !important;
+  line-height: 1em !important;
+  font-weight: bold !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  background-size: 1.5em !important;
+}
+
+[dir='rtl'] .i-amphtml-story-interactive-quiz-answer-choice {
+  margin-left: 16px !important;
+  margin-right: 0px !important;
+}
+
+.i-amphtml-story-interactive-quiz-percentage-text {
+  display: flex !important;
+  padding-left: 1em !important;
+  margin-left: auto !important;
+  visibility: hidden !important;
+  flex-shrink: 0 !important;
+}
+
+.i-amphtml-story-interactive-quiz-option:not(.i-amphtml-story-interactive-option-selected) .i-amphtml-story-interactive-quiz-percentage-text {
+  opacity: 0.5 !important;
+}
+
+[dir='rtl'] .i-amphtml-story-interactive-quiz-percentage-text {
+  padding-left: 0px !important;
+  padding-right: 1em !important;
+  margin-right: auto !important;
+  margin-left: 0px !important;
+}
+
+.i-amphtml-story-interactive-post-selection.i-amphtml-story-interactive-has-data
+  .i-amphtml-story-interactive-quiz-percentage-text {
+  visibility: visible !important;
+}
+
+.i-amphtml-story-interactive-post-selection
+  .i-amphtml-story-interactive-option-selected
+  > .i-amphtml-story-interactive-quiz-percentage-text {
+  color: white !important;
+}
+
+.i-amphtml-story-interactive-post-selection
+  :not([correct])
+  > .i-amphtml-story-interactive-quiz-answer-choice {
+  color: var(--incorrect-color) !important;
+  border-color: var(--incorrect-color) !important;
+}
+
+.i-amphtml-story-interactive-post-selection
+  [correct]
+  > .i-amphtml-story-interactive-quiz-answer-choice {
+  color: var(--correct-color) !important;
+  border-color: var(--correct-color) !important;
+}
+
+.i-amphtml-story-interactive-post-selection
+  .i-amphtml-story-interactive-option-selected
+  > .i-amphtml-story-interactive-quiz-answer-choice {
+  border-color: transparent !important;
+  animation: answer-choice-bounce forwards 600ms linear;
+  background-color: var(
+    --i-amphtml-interactive-answer-choice-background
+  ) !important;
+}
+
+/** TODO(jackbsteinberg): Use a more a11y-friendly approach than color: transparent */
+
+.i-amphtml-story-interactive-post-selection
+  [correct]
+  > .i-amphtml-story-interactive-quiz-answer-choice {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%235BBA74'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E") !important;
+  color: transparent !important;
+}
+
+.i-amphtml-story-interactive-post-selection
+  :not([correct])
+  > .i-amphtml-story-interactive-quiz-answer-choice {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%23F34E4E'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !important;
+  color: transparent !important;
+}
+
+.i-amphtml-story-interactive-quiz-option > * {
+  position: relative !important;
+}
+
+.i-amphtml-story-interactive-quiz-option::before {
+  content: '' !important;
+  position: absolute !important;
+  left: 0px !important;
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: var(--i-amphtml-interactive-chip-radius) !important;
+  line-height: 1.25em !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-quiz-option:focus::before {
+    background: var(--i-amphtml-interactive-theme-shading) !important;
+}
+
+.i-amphtml-story-interactive-post-selection:not(.i-amphtml-story-interactive-has-data)
+  .i-amphtml-story-interactive-quiz-option-selected[correct].i-amphtml-story-interactive-quiz-option::before {
+  animation: option-select-correct forwards 150ms cubic-bezier(0, 0, 0.2, 1) !important;
+}
+
+.i-amphtml-story-interactive-post-selection:not(.i-amphtml-story-interactive-has-data)
+  .i-amphtml-story-interactive-quiz-option-selected:not([correct]).i-amphtml-story-interactive-quiz-option::before {
+  animation: option-select-incorrect forwards 150ms cubic-bezier(0, 0, 0.2, 1) !important;
+}
+
+.i-amphtml-story-interactive-post-selection.i-amphtml-story-interactive-has-data
+  .i-amphtml-story-interactive-quiz-option::before {
+  transform: translateX(var(--option-percentage, 0%)) !important;
+}
+
+.i-amphtml-story-interactive-post-selection.i-amphtml-story-interactive-has-data[dir='rtl']
+  .i-amphtml-story-interactive-quiz-option::before {
+  transform: translateX(calc(-1 * var(--option-percentage, 0%))) !important;
+}
+
+.i-amphtml-story-interactive-post-selection.i-amphtml-story-interactive-has-data
+  .i-amphtml-story-interactive-quiz-option::before {
+  left: -100% !important;
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: 0px !important;
+  background: var(--i-amphtml-interactive-theme-shading) !important;
+  color: var(--i-amphtml-interactive-theme-shading) !important;
+  transition: transform var(--i-amphtml-interactive-animation-time)
+    var(--i-amphtml-interactive-ease-out-curve) !important;
+}
+
+.i-amphtml-story-interactive-post-selection.i-amphtml-story-interactive-has-data[dir='rtl']
+  .i-amphtml-story-interactive-quiz-option::before {
+  left: 101% !important;
+}
+
+.i-amphtml-story-interactive-post-selection
+  .i-amphtml-story-interactive-option-selected[correct].i-amphtml-story-interactive-quiz-option {
+  background: var(--correct-color) !important;
+  box-shadow: var(--i-amphtml-interactive-chip-shadow-inset) !important;
+}
+
+.i-amphtml-story-interactive-post-selection
+  .i-amphtml-story-interactive-option-selected:not([correct]).i-amphtml-story-interactive-quiz-option {
+  background: var(--incorrect-color) !important;
+  box-shadow: var(--i-amphtml-interactive-chip-shadow-inset) !important;
+}
+
+.i-amphtml-story-interactive-option-selected.i-amphtml-story-interactive-quiz-option {
+  border: none !important;
+  box-shadow: var(--i-amphtml-interactive-chip-shadow-inset) !important;
+}
+
+.i-amphtml-story-interactive-post-selection.i-amphtml-story-interactive-has-data
+  .i-amphtml-story-interactive-option-selected[correct].i-amphtml-story-interactive-quiz-option::before {
+  background: var(--correct-color-shaded) !important;
+  color: var(--correct-color-shaded) !important;
+}
+
+.i-amphtml-story-interactive-post-selection.i-amphtml-story-interactive-has-data
+  .i-amphtml-story-interactive-option-selected:not([correct]).i-amphtml-story-interactive-quiz-option::before {
+  background: var(--incorrect-color-shaded) !important;
+  color: var(--incorrect-color-shaded) !important;
+}
+
+@keyframes answer-choice-bounce {
+  0% {
+    visibility: hidden;
+    border: solid 2px var(--i-amphtml-interactive-answer-choice-background);
+    transform: scale(0);
+    visibility: hidden;
+  }
+  21% {
+    visibility: visible;
+    transform: scale(.01);
+    animation-timing-function: cubic-bezier(.3, .5, .7, 1);
+  }
+  43% {
+    transform: scale(1.203);
+    animation-timing-function: ease-in-out;
+  }
+  62% {
+    transform: scale(0.956);
+  }
+  83% {
+    transform: scale(1.008);
+  }
+  96% {
+    transform: scale(1);
+  }
+  99% {
+    transform: scale(.998);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes option-select-incorrect {
+  0% {
+    border-color: var(--incorrect-color);
+    background: var(--incorrect-color);
+    opacity: 0.2;
+    transform: scale(0.1);
+    color: var(--incorrect-color);
+  }
+  50% {
+    opacity: 1;
+    color: var(--incorrect-color);
+  }
+  100% {
+    border-color: var(--incorrect-color);
+    background: var(--incorrect-color);
+    transform: scale(1);
+    color: white;
+  }
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option
+    .i-amphtml-story-interactive-quiz-answer-choice {
+  animation: i-amphtml-story-interactive-quiz-answer-choice-landing-animation var(--i-amphtml-interactive-animation-time) !important;
+  animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el1) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option:nth-of-type(2)
+    .i-amphtml-story-interactive-quiz-answer-choice {
+  animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el2) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option:nth-of-type(3)
+    .i-amphtml-story-interactive-quiz-answer-choice {
+  animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el3) !important;
+}
+
+.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option:nth-of-type(4)
+    .i-amphtml-story-interactive-quiz-answer-choice {
+  animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el4) !important;
+}
+
+@keyframes i-amphtml-story-interactive-quiz-answer-choice-landing-animation {
+  33% {
+    transform: scale(.8);
+  }
+}
diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive-quiz.js b/extensions/amp-story-interactive/0.1/amp-story-interactive-quiz.js
new file mode 100644
index 0000000000000..632858001ddf5
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/amp-story-interactive-quiz.js
@@ -0,0 +1,184 @@
+/**
+ * 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.
+ */
+
+import {
+  AmpStoryInteractive,
+  InteractiveType,
+} from './amp-story-interactive-abstract';
+import {CSS} from '../../../build/amp-story-interactive-quiz-0.1.css';
+import {LocalizedStringId} from '../../../src/localized-strings';
+import {htmlFor} from '../../../src/static-template';
+import {setStyle} from '../../../src/style';
+import objstr from 'obj-str';
+
+/**
+ * Generates the template for the quiz.
+ *
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildQuizTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`
+    <div class="i-amphtml-story-interactive-quiz-container">
+      <div class="i-amphtml-story-interactive-prompt-container"></div>
+      <div class="i-amphtml-story-interactive-quiz-option-container"></div>
+    </div>
+  `;
+};
+
+/**
+ * Generates the template for each option.
+ *
+ * @param {!Element} option
+ * @return {!Element}
+ */
+const buildOptionTemplate = (option) => {
+  const html = htmlFor(option);
+  return html`
+    <button
+      class="i-amphtml-story-interactive-quiz-option i-amphtml-story-interactive-option"
+      aria-live="polite"
+    >
+      <span
+        class="i-amphtml-story-interactive-quiz-answer-choice notranslate"
+      ></span>
+    </button>
+  `;
+};
+
+export class AmpStoryInteractiveQuiz extends AmpStoryInteractive {
+  /**
+   * @param {!AmpElement} element
+   */
+  constructor(element) {
+    super(element, InteractiveType.QUIZ);
+
+    /** @private {!Array<string>} */
+    this.localizedAnswerChoices_ = [];
+  }
+
+  /** @override */
+  buildCallback() {
+    return super.buildCallback(CSS);
+  }
+
+  /** @override */
+  buildComponent() {
+    this.rootEl_ = buildQuizTemplate(this.element);
+    this.attachContent_(this.rootEl_);
+    return this.rootEl_;
+  }
+
+  /**
+   * Finds the prompt and options content
+   * and adds it to the quiz element.
+   *
+   * @private
+   * @param {Element} root
+   */
+  attachContent_(root) {
+    this.attachPrompt_(root);
+
+    // Localize the answer choice options
+    this.localizedAnswerChoices_ = [
+      LocalizedStringId.AMP_STORY_INTERACTIVE_QUIZ_ANSWER_CHOICE_A,
+      LocalizedStringId.AMP_STORY_INTERACTIVE_QUIZ_ANSWER_CHOICE_B,
+      LocalizedStringId.AMP_STORY_INTERACTIVE_QUIZ_ANSWER_CHOICE_C,
+      LocalizedStringId.AMP_STORY_INTERACTIVE_QUIZ_ANSWER_CHOICE_D,
+    ].map((choice) => this.localizationService.getLocalizedString(choice));
+    const optionContainer = this.rootEl_.querySelector(
+      '.i-amphtml-story-interactive-quiz-option-container'
+    );
+    this.options_.forEach((option, index) =>
+      optionContainer.appendChild(this.configureOption_(option, index))
+    );
+  }
+
+  /**
+   * Creates an option container with option content,
+   * adds styling and answer choices,
+   * and adds it to the quiz element.
+   *
+   * @param {!./amp-story-interactive-abstract.OptionConfigType} option
+   * @param {number} index
+   * @return {!Element}
+   * @private
+   */
+  configureOption_(option, index) {
+    const convertedOption = buildOptionTemplate(this.element);
+
+    // Fill in the answer choice and set the option ID
+    const answerChoiceEl = convertedOption.querySelector(
+      '.i-amphtml-story-interactive-quiz-answer-choice'
+    );
+    answerChoiceEl.textContent = this.localizedAnswerChoices_[index];
+    convertedOption.optionIndex_ = option['optionIndex'];
+
+    // Extract and structure the option information
+    const optionText = document.createElement('span');
+    optionText.classList.add('i-amphtml-story-interactive-quiz-option-text');
+    optionText.textContent = option['text'];
+    convertedOption.appendChild(optionText);
+
+    // Add text container for percentage display
+    const percentageText = document.createElement('span');
+    percentageText.classList.add(
+      'i-amphtml-story-interactive-quiz-percentage-text'
+    );
+    convertedOption.appendChild(percentageText);
+
+    if ('correct' in option) {
+      convertedOption.setAttribute('correct', 'correct');
+    }
+    return convertedOption;
+  }
+
+  /**
+   * @override
+   */
+  displayOptionsData(optionsData) {
+    if (!optionsData) {
+      return;
+    }
+
+    const percentages = this.preprocessPercentages_(optionsData);
+
+    this.getOptionElements().forEach((el, index) => {
+      // Update the aria-label so they read "selected" and "correct" or "incorrect"
+      const ariaDescription = objstr({
+        selected: optionsData[index].selected,
+        correct: el.hasAttribute('correct'),
+        incorrect: !el.hasAttribute('correct'),
+      });
+      el.querySelector(
+        '.i-amphtml-story-interactive-quiz-answer-choice'
+      ).setAttribute('aria-hidden', true);
+      const optionText = el.querySelector(
+        '.i-amphtml-story-interactive-quiz-option-text'
+      );
+      optionText.setAttribute(
+        'aria-label',
+        ariaDescription + ' ' + optionText.textContent
+      );
+      // Update percentage text
+      el.querySelector(
+        '.i-amphtml-story-interactive-quiz-percentage-text'
+      ).textContent = `${percentages[index]}%`;
+      setStyle(el, '--option-percentage', `${percentages[index]}%`);
+    });
+  }
+}
diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive-results.css b/extensions/amp-story-interactive/0.1/amp-story-interactive-results.css
new file mode 100644
index 0000000000000..944eec1bed162
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/amp-story-interactive-results.css
@@ -0,0 +1,129 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/* 1em = 16px for interactive components, unless overriden by font-size */
+.i-amphtml-story-interactive-results-container {
+  font-family: 'Poppins', sans-serif !important;
+  background: var(--i-amphtml-interactive-options-chip-background-color) !important;
+  border-radius: var(--i-amphtml-interactive-chip-radius) !important;
+  color: var(--i-amphtml-interactive-strong-text-color) !important;
+  text-align: center !important;
+  box-shadow: var(--i-amphtml-interactive-component-shadow) !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  padding-bottom: 1.25em !important;
+}
+
+.i-amphtml-story-interactive-results-container.i-amphtml-story-interactive-has-image:not(.i-amphtml-story-interactive-has-score) {
+  padding-top: 2.5em !important;
+}
+
+.i-amphtml-story-interactive-has-score .i-amphtml-story-interactive-results-top {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  padding: 1em 1.5em !important;
+  box-sizing: border-box !important;
+  color: var(--interactive-prompt-text-color) !important;
+}
+
+.i-amphtml-story-interactive-results-top {
+  width: 100% !important;
+  border-top-left-radius: var(--i-amphtml-interactive-chip-radius) !important;
+  border-top-right-radius: var(--i-amphtml-interactive-chip-radius) !important;
+  display: none !important;
+}
+
+.i-amphtml-story-interactive-has-score:not(.i-amphtml-story-interactive-has-image) .i-amphtml-story-interactive-results-top {
+  background: var(--interactive-prompt-background) !important;
+}
+
+.i-amphtml-story-interactive-results-top-score {
+  font-weight: bold !important;
+  font-size: .75em !important;
+  line-height: 1em !important;
+  letter-spacing: .15em !important;
+  text-transform: uppercase !important;
+}
+
+[dir="rtl"] .i-amphtml-story-interactive-results-top-score {
+  left: auto !important;
+  right: 1.25em !important;
+}
+
+.i-amphtml-story-interactive-results-top-value {
+  font-weight: bold !important;
+  font-size: 1.75em !important;
+  line-height: 1 !important;
+}
+
+.i-amphtml-story-interactive-results-top-value > span:nth-child(2) {
+  font-size: .5em !important;
+}
+
+[dir="rtl"] .i-amphtml-story-interactive-results-top-value {
+  left: .7em !important;
+  right: auto !important;
+}
+
+.i-amphtml-story-interactive-results-container:not(.i-amphtml-story-interactive-has-score) {
+  --i-amphtml-story-interactive-score-display: none !important;
+}
+
+.i-amphtml-story-interactive-results-container:not(.i-amphtml-story-interactive-has-image) .i-amphtml-story-interactive-results-image-border {
+  display: none !important;
+}
+
+.i-amphtml-story-interactive-results-image {
+  width: 8.75em !important;
+  height: 8.75em !important;
+  background-size: cover !important;
+  background-position: center !important;
+  border-radius: 50% !important;
+}
+
+.i-amphtml-story-interactive-results-image-border {
+  margin: 0px 10px !important;
+  padding: 8px !important;
+  border-radius: 50% !important;
+  border: 2px solid var(--interactive-accent-color) !important;
+}
+
+.i-amphtml-story-interactive-results-prompt {
+  text-transform: uppercase !important;
+  font-size: .75em !important;
+  margin-top: 1.75em !important;
+  font-weight: bold !important;
+  letter-spacing: .2em !important;
+}
+
+.i-amphtml-story-interactive-results-top-transparent.i-amphtml-story-interactive-has-score:not(.i-amphtml-story-interactive-has-image) .i-amphtml-story-interactive-results-prompt {
+  margin-top: 0px !important;
+}
+
+.i-amphtml-story-interactive-results-title {
+  font-size: 1.75em !important;
+  font-weight: bold !important;
+}
+
+.i-amphtml-story-interactive-results-description {
+  font-size: .875em !important;
+  text-align: center !important;
+  color: var(--i-amphtml-interactive-option-text-color) !important;
+  margin-top: .5em !important;
+  padding: 0px 1.4em !important;
+}
diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive-results.js b/extensions/amp-story-interactive/0.1/amp-story-interactive-results.js
new file mode 100644
index 0000000000000..6f8b342b3e680
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/amp-story-interactive-results.js
@@ -0,0 +1,299 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  AmpStoryInteractive,
+  InteractiveType,
+} from './amp-story-interactive-abstract';
+import {CSS} from '../../../build/amp-story-interactive-results-0.1.css';
+import {StateProperty} from '../../amp-story/1.0/amp-story-store-service';
+import {computedStyle, setStyle} from '../../../src/style';
+import {dev} from '../../../src/log';
+import {htmlFor} from '../../../src/static-template';
+
+/**
+ * @typedef {{
+ *    category: ?string,
+ *    percentage: ?number,
+ * }}
+ */
+export let InteractiveResultsDef;
+
+/**
+ * Generates the template for the quiz.
+ *
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildResultsTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`
+    <div class="i-amphtml-story-interactive-results-container">
+      <div class="i-amphtml-story-interactive-results-top">
+        <div class="i-amphtml-story-interactive-results-top-score">SCORE:</div>
+        <div class="i-amphtml-story-interactive-results-top-value">
+          <span class="i-amphtml-story-interactive-results-top-value-number"
+            >100</span
+          ><span>%</span>
+        </div>
+      </div>
+      <div class="i-amphtml-story-interactive-results-image-border">
+        <div class="i-amphtml-story-interactive-results-image"></div>
+      </div>
+      <div class="i-amphtml-story-interactive-results-prompt"></div>
+      <div class="i-amphtml-story-interactive-results-title"></div>
+      <div class="i-amphtml-story-interactive-results-description"></div>
+    </div>
+  `;
+};
+
+const HAS_IMAGE_CLASS = 'i-amphtml-story-interactive-has-image';
+const HAS_SCORE_CLASS = 'i-amphtml-story-interactive-has-score';
+
+/**
+ * Processes the state and returns the condensed results.
+ * @param {!Map<string, {option: ?./amp-story-interactive-abstract.OptionConfigType, interactiveId: string}>} interactiveState
+ * @param {?Array<!./amp-story-interactive-abstract.OptionConfigType>} options needed to ensure the first options take precedence on ties
+ * @return {InteractiveResultsDef} the results
+ */
+const processResults = (interactiveState, options) => {
+  const processStrategy =
+    decideStrategy(options) === 'category'
+      ? processResultsCategory
+      : processResultsPercentage;
+  return processStrategy(interactiveState, options);
+};
+
+/**
+ * Processes the state and returns the condensed results for a category strategy
+ * @param {!Map<string, {option: ?./amp-story-interactive-abstract.OptionConfigType, interactiveId: string}>} interactiveState
+ * @param {?Array<!./amp-story-interactive-abstract.OptionConfigType>} options the attributes on the component
+ * @return {InteractiveResultsDef} the results
+ * @package
+ */
+export const processResultsCategory = (interactiveState, options) => {
+  const result = {category: null, percentage: null};
+
+  // Add all categories in order to the map with value 0
+  const categories = {};
+  options.forEach((option) => {
+    if (option.resultscategory) {
+      categories[option.resultscategory] = 0;
+    }
+  });
+
+  // Vote for category for each answered poll
+  Object.values(interactiveState).forEach((e) => {
+    if (e.type == InteractiveType.POLL) {
+      if (
+        e.option &&
+        e.option.resultscategory &&
+        categories[e.option.resultscategory] != null
+      ) {
+        categories[e.option.resultscategory] += 1;
+      }
+    }
+  });
+
+  // Returns category with most votes, first ones take precedence in ties
+  result.category = Object.keys(categories).reduce((a, b) =>
+    categories[a] >= categories[b] ? a : b
+  );
+  return result;
+};
+
+/**
+ * Processes the state and returns the condensed results for a percentage strategy
+ * @param {!Map<string, {option: ?./amp-story-interactive-abstract.OptionConfigType, interactiveId: string}>} interactiveState
+ * @param {?Array<!./amp-story-interactive-abstract.OptionConfigType>} options the attributes on the component
+ * @return {InteractiveResultsDef} the results
+ * @package
+ */
+export const processResultsPercentage = (interactiveState, options) => {
+  const result = {category: null, percentage: null};
+
+  // Count quizzes and correct quizzes
+  let quizCount = 0;
+  let quizCorrect = 0;
+  Object.values(interactiveState).forEach((e) => {
+    if (e.type == InteractiveType.QUIZ) {
+      quizCount += 1;
+      if (e.option && e.option.correct != null) {
+        quizCorrect += 1;
+      }
+    }
+  });
+
+  // Percentage = (correct / total) but avoid divide by 0 error
+  result.percentage = quizCount == 0 ? 0 : 100 * (quizCorrect / quizCount);
+
+  // Get closest threshold that is lower than percentage, or lowest one if percentage is too low
+  let minThresholdDiff = -100;
+  options.forEach((option) => {
+    // ThresholdDiff is positive if it's lower than percentage (desired)
+    const currThresholdDiff =
+      result.percentage - parseFloat(option.resultsthreshold);
+    if (
+      // Curr meets the requirement and (is better or min doesnt meet)
+      (currThresholdDiff >= 0 &&
+        (minThresholdDiff > currThresholdDiff || minThresholdDiff < 0)) ||
+      // Curr doesnt meet the requirement, but min also doesnt and curr is better than min
+      (currThresholdDiff < 0 &&
+        minThresholdDiff < 0 &&
+        currThresholdDiff > minThresholdDiff)
+    ) {
+      result.category = option.resultscategory;
+      minThresholdDiff = currThresholdDiff;
+    }
+  });
+  return result;
+};
+
+/**
+ * Decides what strategy to use.
+ * If there are thresholds specified, it uses percentage; otherwise it uses category.
+ * @param {?Array<!./amp-story-interactive-abstract.OptionConfigType>} options the attributes on the component
+ * @return {string} the strategy
+ * @package
+ */
+export const decideStrategy = (options) => {
+  return options.some((o) => {
+    return o.resultsthreshold != undefined;
+  })
+    ? 'percentage'
+    : 'category';
+};
+
+export class AmpStoryInteractiveResults extends AmpStoryInteractive {
+  /**
+   * @param {!AmpElement} element
+   */
+  constructor(element) {
+    super(element, InteractiveType.RESULTS, [2, 4]);
+  }
+
+  /** @override */
+  buildCallback() {
+    return super.buildCallback(CSS);
+  }
+
+  /** @override */
+  buildComponent() {
+    this.rootEl_ = buildResultsTemplate(this.element);
+    return this.rootEl_;
+  }
+
+  /** @override */
+  layoutCallback() {
+    if (this.element.hasAttribute('prompt-text')) {
+      this.rootEl_.querySelector(
+        '.i-amphtml-story-interactive-results-prompt'
+      ).textContent = this.element.getAttribute('prompt-text');
+    }
+    this.storeService_.subscribe(
+      StateProperty.INTERACTIVE_REACT_STATE,
+      (data) => this.onInteractiveReactStateUpdate_(data),
+      true
+    );
+  }
+
+  /**
+   * Receives state updates and fills up DOM with the result
+   * @param {!Map<string, {option: ?./amp-story-interactive-abstract.OptionConfigType, interactiveId: string}>} interactiveState
+   * @private
+   */
+  onInteractiveReactStateUpdate_(interactiveState) {
+    const results = processResults(interactiveState, this.options_);
+    this.rootEl_.classList.toggle(HAS_SCORE_CLASS, results.percentage != null);
+    this.rootEl_.querySelector(
+      '.i-amphtml-story-interactive-results-top-value-number'
+    ).textContent = (results.percentage || 0).toFixed(0);
+    this.options_.forEach((e) => {
+      if (e.resultscategory === results.category) {
+        this.mutateElement(() => {
+          this.updateCategory_(e);
+          this.updateToPostSelectionState_(null);
+        });
+      }
+    });
+  }
+
+  /**
+   * Updates the element with the correct category
+   * @param {./amp-story-interactive-abstract.OptionConfigType} categorySelected
+   * @private
+   */
+  updateCategory_(categorySelected) {
+    this.rootEl_.classList.toggle(
+      HAS_IMAGE_CLASS,
+      categorySelected.image != null
+    );
+    if (categorySelected.image) {
+      setStyle(
+        this.rootEl_.querySelector(
+          '.i-amphtml-story-interactive-results-image'
+        ),
+        'background',
+        'url(' + categorySelected.image + ')'
+      );
+    }
+    this.rootEl_.querySelector(
+      '.i-amphtml-story-interactive-results-title'
+    ).textContent = categorySelected.resultscategory;
+    this.rootEl_.querySelector(
+      '.i-amphtml-story-interactive-results-description'
+    ).textContent = categorySelected.text || '';
+    this.rootEl_.classList.toggle(
+      'i-amphtml-story-interactive-results-top-transparent',
+      this.scoreBackgroundIsTransparent_()
+    );
+  }
+
+  /** @override */
+  handleTap_(unusedEvent) {
+    // Disallow click handler since there are no options.
+  }
+
+  /** @override */
+  displayOptionsData(unusedOptionsData) {
+    // TODO(mszylkowski): Show percentages of categories if endpoint.
+  }
+
+  /** @override */
+  updateStoryStoreState_(unusedOption) {
+    // Prevent from updating the state.
+  }
+
+  /**
+   * Check score background has a color with alpha 0, used to adjust layout
+   * @return {boolean}
+   * @private
+   **/
+  scoreBackgroundIsTransparent_() {
+    const bgColor = computedStyle(
+      this.win,
+      dev().assertElement(
+        this.rootEl_.querySelector('.i-amphtml-story-interactive-results-top')
+      )
+    )['background'];
+    // Check the background starts with rgba and doesn't contain other colors (no gradients)
+    if (bgColor.startsWith('rgba') && bgColor.lastIndexOf('rgb') == 0) {
+      // If single rgba color, return alpha == 0
+      return parseFloat(bgColor.split(', ')[3].split(')')[0]) == 0;
+    }
+    return false;
+  }
+}
diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive.css b/extensions/amp-story-interactive/0.1/amp-story-interactive.css
new file mode 100644
index 0000000000000..b2200442008d2
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/amp-story-interactive.css
@@ -0,0 +1,192 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/* 1em = 16px for interactive components, unless overriden by font-size */
+.i-amphtml-story-interactive-container {
+  font-family: 'Poppins', sans-serif !important;
+}
+
+.i-amphtml-story-interactive-container {
+  background: var(--interactive-prompt-background) !important;
+  border-radius: 2em !important;
+}
+
+.i-amphtml-story-interactive-prompt-container {
+  display: flex !important;
+  justify-items: center !important;
+  padding: 1.25em !important;
+  color: var(--interactive-prompt-text-color) !important;
+}
+
+.i-amphtml-story-interactive-prompt {
+  margin: 0px !important;
+  overflow : hidden !important;
+  text-overflow: ellipsis !important;
+  display: -webkit-box !important;
+  -webkit-line-clamp: var(--i-amphtml-interactive-prompt-clamp) !important;
+  -webkit-box-orient: vertical !important;
+  visibility: visible !important;
+  font-size: var(--i-amphtml-interactive-prompt-text-size) !important;
+  line-height: var(--i-amphtml-interactive-prompt-line-height) !important;
+  font-weight: bold !important;
+  text-align: var(--interactive-prompt-alignment) !important;
+  width: 100% !important;
+}
+
+@keyframes i-amphtml-interactive-animation-flash-background {
+  0% {
+    opacity: .4;
+  }
+  100% {
+    opacity: .2;
+  }
+}
+
+@keyframes i-amphtml-interactive-animation-flash-background-color {
+  0% {
+    background-color: var(--i-amphtml-interactive-theme-shading-flash);
+  }
+  100% {
+    background-color: var(--i-amphtml-interactive-theme-shading-base);
+  }
+}
+
+.i-amphtml-story-interactive-container:not(.i-amphtml-story-interactive-post-selection)
+  .i-amphtml-story-interactive-option {
+  cursor: pointer !important;
+  pointer-events: all;
+}
+
+.i-amphtml-story-interactive-confetti-wrapper {
+  position: absolute !important;
+  top: 50% !important;
+  left: 50% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center;
+  z-index: 1 !important;
+  transform: scale(0) !important;
+  transition: transform .5s var(--i-amphtml-interactive-ease-out-curve), opacity .5s var(--i-amphtml-interactive-ease-out-curve) !important;
+}
+
+.i-amphtml-story-interactive-confetti-wrapper.i-amphtml-story-interactive-confetti-wrapper-animate-in {
+  transform: scale(1) !important;
+}
+
+.i-amphtml-story-interactive-confetti-wrapper.i-amphtml-story-interactive-confetti-wrapper-animate-out {
+  transform: scale(1.2) !important;
+  opacity: 0 !important;
+}
+
+.i-amphtml-story-interactive-confetti {
+  position: absolute !important;
+}
+
+/* landing animations variables */
+.i-amphtml-story-interactive-active {
+  --i-amphtml-interactive-landing-animation-delay: .5s;
+  --i-amphtml-interactive-landing-animation-offset: .9;
+  --i-amphtml-interactive-landing-animation-delay-offset-el1: var(--i-amphtml-interactive-landing-animation-delay);
+  --i-amphtml-interactive-landing-animation-delay-offset-el2: calc(var(--i-amphtml-interactive-landing-animation-delay) + var(--i-amphtml-interactive-animation-time) * var(--i-amphtml-interactive-landing-animation-offset) * 1);
+  --i-amphtml-interactive-landing-animation-delay-offset-el3: calc(var(--i-amphtml-interactive-landing-animation-delay) + var(--i-amphtml-interactive-animation-time) * var(--i-amphtml-interactive-landing-animation-offset) * 2);
+  --i-amphtml-interactive-landing-animation-delay-offset-el4: calc(var(--i-amphtml-interactive-landing-animation-delay) + var(--i-amphtml-interactive-animation-time) * var(--i-amphtml-interactive-landing-animation-offset) * 3);
+}
+
+@keyframes i-amphtml-interactive-animation-landing-animation-flash-background {
+  30% {
+    opacity: .4;
+  }
+}
+
+/* Disclaimer CSS rules */
+.i-amphtml-story-interactive-disclaimer {
+  position: absolute !important;
+  color: black !important;
+  bottom: calc(100% - 1.75em) !important;
+  right: 0 !important;
+  z-index: 1 !important;
+  --i-amphtml-story-interactive-disclaimer-black-transparent: #00000040 !important;
+  --i-amphtml-story-interactive-disclaimer-blue: #005af0 !important;
+  pointer-events: all !important;
+}
+
+.i-amphtml-story-interactive-disclaimer-alert {
+  width: 1.75em !important;
+  height: 1.75em !important;
+  position: absolute !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  padding: .25em !important;
+  font-size: inherit !important;
+  transform-origin: bottom right !important;
+  background-color: white !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="12" viewBox="0 0 4 12" fill="black"><path d="M2.00002 0C1.8191 2.71375e-07 1.64002 0.0361432 1.47343 0.10628C1.30683 0.176418 1.15613 0.279119 1.03026 0.408281C0.904391 0.537443 0.805932 0.690432 0.740732 0.858156C0.675531 1.02588 0.644921 1.20492 0.650718 1.38463L0.921037 6.88156C0.930028 7.15999 1.04765 7.42404 1.24901 7.61784C1.45038 7.81164 1.7197 7.92 2.00002 7.92C2.28034 7.92 2.54966 7.81164 2.75103 7.61784C2.9524 7.42404 3.07001 7.15999 3.07901 6.88156L3.34933 1.38463C3.35513 1.20492 3.32452 1.02588 3.25932 0.858158C3.19412 0.690434 3.09566 0.537445 2.96979 0.408282C2.84392 0.279119 2.69322 0.176418 2.52662 0.10628C2.36003 0.036143 2.18095 2.57507e-07 2.00002 0Z"/><path d="M2 9.30005C1.73299 9.30005 1.47199 9.37924 1.24999 9.52758C1.02798 9.67592 0.854954 9.88676 0.75278 10.1334C0.650606 10.3801 0.623875 10.6516 0.675968 10.9134C0.728061 11.1753 0.856639 11.4159 1.04544 11.6047C1.23424 11.7935 1.47479 11.922 1.73666 11.9741C1.99854 12.0262 2.26997 11.9995 2.51665 11.8973C2.76333 11.7951 2.97417 11.6221 3.12251 11.4001C3.27085 11.1781 3.35002 10.917 3.35002 10.65C3.35002 10.4728 3.3151 10.2972 3.24726 10.1334C3.17941 9.96963 3.07997 9.8208 2.95461 9.69544C2.82925 9.57008 2.68042 9.47064 2.51663 9.4028C2.35283 9.33496 2.17728 9.30004 2 9.30005Z"/></svg>') !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  background-size: 0.25em !important;
+  border: .25em solid var(--interactive-accent-color) !important;
+  border-radius: 50% !important;
+  box-shadow: 0 .2em .2em 0 var(--i-amphtml-story-interactive-disclaimer-black-transparent) !important;
+  box-sizing: border-box !important;
+  cursor: pointer !important;
+}
+
+.i-amphtml-story-interactive-disclaimer[active]
+  .i-amphtml-story-interactive-disclaimer-alert {
+  display: none !important;
+}
+
+.i-amphtml-story-interactive-disclaimer-dialog {
+  overflow: hidden !important;
+  padding: 1em !important;
+  text-align: initial !important;
+  box-sizing: border-box !important;
+  font-size: 1em !important;
+  background: white;
+  border-radius: 1em;
+  box-shadow: 0px .2em .2em 0px var(--i-amphtml-story-interactive-disclaimer-black-transparent) !important;
+}
+
+.i-amphtml-story-interactive-disclaimer:not([active])
+  .i-amphtml-story-interactive-disclaimer-dialog {
+  display: none !important;
+}
+
+.i-amphtml-story-interactive-disclaimer-url {
+  color: #5f6368 !important;
+  padding-bottom: 0.2em !important;
+}
+
+.i-amphtml-story-interactive-disclaimer-link {
+  color: var(--i-amphtml-story-interactive-disclaimer-blue) !important;
+  font-weight: bold !important;
+  text-decoration: none !important;
+}
+
+.i-amphtml-story-interactive-disclaimer-close {
+  position: absolute !important;
+  bottom: 0 !important;
+  right: 0 !important;
+  cursor: pointer !important;
+  background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#9AA0A6"><rect x="0.787868" y="1.83337" width="1.47851" height="13.2636" rx="0.739255" transform="rotate(-45 0.787868 1.83337)"/><rect x="10.1669" y="0.787868" width="1.47851" height="13.2636" rx="0.739255" transform="rotate(45 10.1669 0.787868)"/></svg>') !important;
+  width: 3em !important;
+  height: 3em !important;
+  background-size: 1em !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  border: none !important;
+  font-size: inherit !important;
+}
diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive.js b/extensions/amp-story-interactive/0.1/amp-story-interactive.js
new file mode 100644
index 0000000000000..12e5472cf21e9
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/amp-story-interactive.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {AmpStoryInteractiveBinaryPoll} from './amp-story-interactive-binary-poll';
+import {AmpStoryInteractivePoll} from './amp-story-interactive-poll';
+import {AmpStoryInteractiveQuiz} from './amp-story-interactive-quiz';
+import {AmpStoryInteractiveResults} from './amp-story-interactive-results';
+
+/**
+ * This extension imports the interactive components into amp-story.
+ */
+
+AMP.extension('amp-story-interactive', '0.1', (AMP) => {
+  AMP.registerElement(
+    'amp-story-interactive-binary-poll',
+    AmpStoryInteractiveBinaryPoll
+  );
+  AMP.registerElement('amp-story-interactive-poll', AmpStoryInteractivePoll);
+  AMP.registerElement('amp-story-interactive-quiz', AmpStoryInteractiveQuiz);
+  AMP.registerElement(
+    'amp-story-interactive-results',
+    AmpStoryInteractiveResults
+  );
+});
diff --git a/extensions/amp-story-interactive/0.1/disclaimer-backends-list.json b/extensions/amp-story-interactive/0.1/disclaimer-backends-list.json
new file mode 100644
index 0000000000000..5f8e196d69992
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/disclaimer-backends-list.json
@@ -0,0 +1,6 @@
+{
+  "webstoriesinteractivity-beta.web.app": {
+    "learnMoreUrl": "https://amp.dev/stories",
+    "entityName": "AMP Disclaimer Testing Site"
+  }
+}
diff --git a/extensions/amp-story-interactive/0.1/interactive-confetti.js b/extensions/amp-story-interactive/0.1/interactive-confetti.js
new file mode 100644
index 0000000000000..6bb3a9b72a068
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/interactive-confetti.js
@@ -0,0 +1,124 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Services} from '../../../src/services';
+import {htmlFor} from '../../../src/static-template';
+import {setStyles} from '../../../src/style';
+
+/**
+ * Generates the template for the confetti wrapper.
+ *
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildConfettiWrapperTemplate = (element) => {
+  const html = htmlFor(element);
+  return html`
+    <div
+      class="i-amphtml-story-interactive-confetti-wrapper"
+      aria-hidden="true"
+    ></div>
+  `;
+};
+
+/**
+ * Generates a template for a confetti.
+ *
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildconfettiTemplate = (element) => {
+  const html = htmlFor(element);
+  return html` <div class="i-amphtml-story-interactive-confetti"></div> `;
+};
+
+/**
+ * Creates a radial burst of emoji.
+ * The burst begins from the center of the parent element and
+ * animates to the edges of the parent element.
+ * Nodes are removed from the dom at the end of the animation.
+ *
+ * @param {!Element} rootEl
+ * @param {!Window} win
+ * @param {string} confettiEmoji
+ * @return {void}
+ */
+export function emojiConfetti(rootEl, win, confettiEmoji) {
+  const confettiCount = 5;
+  const angleSlice = (Math.PI * 2) / confettiCount;
+
+  const angleRandomness = angleSlice * 0.2;
+  const fontSizeRandomRange = [30, 50];
+  const rotationRandomness = 20;
+  const additionalDistance = 5;
+
+  const animationTime = 300;
+  const animationOutDelay = 1000;
+
+  // To calculate confetti transform distance.
+  const rootElRect = rootEl./*OK*/ getBoundingClientRect();
+
+  /** @private @const {!../../../src/service/timer-impl.Timer} */
+  const timer = Services.timerFor(win);
+
+  const confettiWrapper = buildConfettiWrapperTemplate(rootEl);
+  rootEl.appendChild(confettiWrapper);
+
+  timer.delay(() => {
+    // Generate confetti. Set their ending position, size and rotation.
+    for (let i = 0; i < confettiCount; i++) {
+      const confetti = buildconfettiTemplate(rootEl);
+      confettiWrapper.appendChild(confetti);
+      confetti.textContent = confettiEmoji;
+
+      const fontSize =
+        randomInRange(fontSizeRandomRange[0], fontSizeRandomRange[1]) + 'px';
+      const angle =
+        angleSlice * i + randomInRange(-angleRandomness, angleRandomness);
+      const x = Math.sin(angle) * (rootElRect.width / 2 + additionalDistance);
+      const y = Math.cos(angle) * (rootElRect.height / 2 + additionalDistance);
+      const rotation = randomInRange(-rotationRandomness, rotationRandomness);
+      setStyles(confetti, {
+        fontSize,
+        transform: `translate(${x}px, ${y}px) rotate(${rotation}deg)`,
+      });
+    }
+    // Scale up confetti container.
+    confettiWrapper.classList.add(
+      'i-amphtml-story-interactive-confetti-wrapper-animate-in'
+    );
+
+    // Animate out the wrapper
+    timer.delay(() => {
+      confettiWrapper.classList.add(
+        'i-amphtml-story-interactive-confetti-wrapper-animate-out'
+      );
+      // Remove the wrapper from the dom.
+      timer.delay(() => rootEl.removeChild(confettiWrapper), animationTime);
+    }, animationOutDelay);
+  }, animationTime);
+}
+
+/**
+ * Returns a random number between the min and max values.
+ *
+ * @param {number} min
+ * @param {number} max
+ * @return {number}
+ */
+function randomInRange(min, max) {
+  return Math.random() * (max - min) + min;
+}
diff --git a/extensions/amp-story-interactive/0.1/interactive-disclaimer.js b/extensions/amp-story-interactive/0.1/interactive-disclaimer.js
new file mode 100644
index 0000000000000..ec9c179189d77
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/interactive-disclaimer.js
@@ -0,0 +1,182 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * @fileoverview
+ * Interactive components support a disclaimer bubble that tells users where their data is being sent to.
+ * Disclaimers will retrieve the information from the lookup dictionary in disclaimer-backends-list.json.
+ * In order to add a "Learn more" link or entity name ("Your response will be sent to <Organization>"),
+ * submit a PR with a new entry on the DisclaimerBackendList and tag @ampproject/wg-stories to review it.
+ */
+
+import {LocalizedStringId} from '../../../src/localized-strings';
+import {htmlFor} from '../../../src/static-template';
+import DisclaimerBackendsList from './disclaimer-backends-list.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+
+/**
+ * Creates a disclaimer icon and dialog.
+ * @param {!Element} element
+ * @return {!Element}
+ */
+function buildDisclaimerLayout(element) {
+  const html = htmlFor(element);
+  return html`<div class="i-amphtml-story-interactive-disclaimer">
+    <button
+      class="i-amphtml-story-interactive-disclaimer-alert"
+      aria-label="Open disclaimer"
+    ></button>
+    <div
+      class="i-amphtml-story-interactive-disclaimer-dialog"
+      role="alertdialog"
+    >
+      <div class="i-amphtml-story-interactive-disclaimer-description">
+        <span class="i-amphtml-story-interactive-disclaimer-note"
+          >Your response will be sent to
+        </span>
+        <span class="i-amphtml-story-interactive-disclaimer-entity"></span>
+        <div class="i-amphtml-story-interactive-disclaimer-url"></div>
+      </div>
+      <div>
+        <a target="_blank" class="i-amphtml-story-interactive-disclaimer-link"
+          >Learn more</a
+        >
+      </div>
+      <button
+        class="i-amphtml-story-interactive-disclaimer-close"
+        aria-label="Close disclaimer"
+      ></button>
+    </div>
+  </div>`;
+}
+
+/**
+ * Creates a disclaimer icon and dialog from the interactive element passed in.
+ * @param {!AmpStoryInteractive} interactive the interactive element.
+ * @return {!Element} the icon with the dialog that should be added to the shadowRoot.
+ */
+export function buildInteractiveDisclaimer(interactive) {
+  const {element} = interactive;
+  const backendUrl = element.getAttribute('endpoint').replace('https://', '');
+
+  const disclaimer = buildDisclaimerLayout(element);
+  const dialogEl = disclaimer.querySelector(
+    '.i-amphtml-story-interactive-disclaimer-dialog'
+  );
+  const descriptionEl = disclaimer.querySelector(
+    '.i-amphtml-story-interactive-disclaimer-description'
+  );
+  const urlEl = disclaimer.querySelector(
+    '.i-amphtml-story-interactive-disclaimer-url'
+  );
+  const linkEl = disclaimer.querySelector(
+    '.i-amphtml-story-interactive-disclaimer-link'
+  );
+  const entityEl = disclaimer.querySelector(
+    '.i-amphtml-story-interactive-disclaimer-entity'
+  );
+  const noteEl = disclaimer.querySelector(
+    '.i-amphtml-story-interactive-disclaimer-note'
+  );
+
+  // Fill information
+  const backendSpecs = getBackendSpecs(backendUrl, DisclaimerBackendsList);
+  const disclaimerDescriptionId = `i-amphtml-story-disclaimer-${interactive.element.id}-description`;
+  interactive.mutateElement(() => {
+    if (backendSpecs) {
+      entityEl.textContent = backendSpecs[1].entityName;
+      urlEl.textContent = backendSpecs[0];
+      backendSpecs[1].learnMoreUrl
+        ? (linkEl.href = backendSpecs[1].learnMoreUrl)
+        : linkEl.remove();
+    } else {
+      entityEl.remove();
+      urlEl.textContent = backendUrl;
+      linkEl.remove();
+    }
+    noteEl.textContent = interactive.localizationService.getLocalizedString(
+      LocalizedStringId.AMP_STORY_INTERACTIVE_DISCLAIMER_NOTE
+    );
+    descriptionEl.id = disclaimerDescriptionId;
+    dialogEl.setAttribute('aria-describedby', disclaimerDescriptionId); // For screen readers.
+    return closeDisclaimer(interactive, disclaimer);
+  });
+
+  // Add click listener to open or close the dialog.
+  disclaimer.addEventListener('click', (event) => {
+    if (
+      event.target.classList.contains(
+        'i-amphtml-story-interactive-disclaimer-close'
+      )
+    ) {
+      closeDisclaimer(interactive, disclaimer);
+    } else if (
+      event.target.classList.contains(
+        'i-amphtml-story-interactive-disclaimer-alert'
+      )
+    ) {
+      openDisclaimer(interactive, disclaimer);
+    }
+  });
+  return disclaimer;
+}
+
+/**
+ * Sets the styles to open the disclaimer dialog.
+ * @param {!AmpStoryInteractive} interactive
+ * @param {!Element} disclaimerEl
+ */
+function openDisclaimer(interactive, disclaimerEl) {
+  interactive.mutateElement(() => {
+    disclaimerEl.setAttribute('active', '');
+  });
+}
+
+/**
+ * Sets the styles to close the disclaimer dialog.
+ * @param {!AmpStoryInteractive} interactive
+ * @param {!Element} disclaimerEl
+ * @return {!Promise}
+ */
+function closeDisclaimer(interactive, disclaimerEl) {
+  return interactive.mutateElement(() => {
+    disclaimerEl.removeAttribute('active');
+  });
+}
+
+/**
+ * Close the disclaimer if it's open.
+ * @param {!AmpStoryInteractive} interactive
+ * @param {?Element} disclaimerEl
+ * @return {!Promise}
+ */
+export function tryCloseDisclaimer(interactive, disclaimerEl) {
+  if (disclaimerEl && disclaimerEl.hasAttribute('active')) {
+    return closeDisclaimer(interactive, disclaimerEl);
+  }
+  return Promise.resolve();
+}
+
+/**
+ * Returns the corresponding backend specs (as an array of url and specs), or undefined.
+ * @param {string} backendUrl
+ * @param {!Object<string, !Object<string, string>>} backendsList
+ * @return {?Array<string|Object<string, string>>} array that contains: base url of backend, {learnMoreUrl, entity}.
+ */
+export function getBackendSpecs(backendUrl, backendsList) {
+  return Object.entries(backendsList).find((element) => {
+    return element[0] === backendUrl.substring(0, element[0].length);
+  });
+}
diff --git a/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-binary-poll.js b/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-binary-poll.js
new file mode 100644
index 0000000000000..398565dc0ab4a
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-binary-poll.js
@@ -0,0 +1,167 @@
+/**
+ * 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.
+ */
+
+import {AmpStoryInteractiveBinaryPoll} from '../amp-story-interactive-binary-poll';
+import {AmpStoryRequestService} from '../../../amp-story/1.0/amp-story-request-service';
+import {AmpStoryStoreService} from '../../../amp-story/1.0/amp-story-store-service';
+import {LocalizationService} from '../../../../src/service/localization';
+import {Services} from '../../../../src/services';
+import {
+  addConfigToInteractive,
+  getMockInteractiveData,
+} from './test-amp-story-interactive';
+import {measureMutateElementStub} from '../../../../testing/test-helper';
+import {registerServiceBuilder} from '../../../../src/service';
+
+describes.realWin(
+  'amp-story-interactive-binary-poll',
+  {
+    amp: true,
+  },
+  (env) => {
+    let win;
+    let ampStoryPoll;
+    let storyEl;
+    let requestService;
+
+    beforeEach(() => {
+      win = env.win;
+
+      env.sandbox
+        .stub(Services, 'cidForDoc')
+        .resolves({get: () => Promise.resolve('cid')});
+
+      const ampStoryPollEl = win.document.createElement(
+        'amp-story-interactive-binary-poll'
+      );
+      ampStoryPollEl.getResources = () => win.__AMP_SERVICES.resources.obj;
+      requestService = new AmpStoryRequestService(win);
+      registerServiceBuilder(win, 'story-request', function () {
+        return requestService;
+      });
+
+      const storeService = new AmpStoryStoreService(win);
+      registerServiceBuilder(win, 'story-store', function () {
+        return storeService;
+      });
+
+      const localizationService = new LocalizationService(win.document.body);
+      env.sandbox
+        .stub(Services, 'localizationServiceForOrNull')
+        .returns(Promise.resolve(localizationService));
+
+      storyEl = win.document.createElement('amp-story');
+      const storyPage = win.document.createElement('amp-story-page');
+      const gridLayer = win.document.createElement('amp-story-grid-layer');
+      gridLayer.appendChild(ampStoryPollEl);
+      storyPage.appendChild(gridLayer);
+      storyEl.appendChild(storyPage);
+
+      win.document.body.appendChild(storyEl);
+      ampStoryPoll = new AmpStoryInteractiveBinaryPoll(ampStoryPollEl);
+      env.sandbox
+        .stub(ampStoryPoll, 'measureMutateElement')
+        .callsFake(measureMutateElementStub);
+      env.sandbox.stub(ampStoryPoll, 'mutateElement').callsFake((fn) => fn());
+    });
+
+    it('should throw an error with fewer than two options', () => {
+      addConfigToInteractive(ampStoryPoll, 1);
+      allowConsoleError(() => {
+        expect(() => {
+          ampStoryPoll.buildCallback();
+        }).to.throw(/Improper number of options/);
+      });
+    });
+
+    it('should not throw an error with two options', () => {
+      addConfigToInteractive(ampStoryPoll, 2);
+      expect(() => ampStoryPoll.buildCallback()).to.not.throw();
+    });
+
+    it('should throw an error with more than two options', () => {
+      addConfigToInteractive(ampStoryPoll, 3);
+      allowConsoleError(() => {
+        expect(() => {
+          ampStoryPoll.buildCallback();
+        }).to.throw(/Improper number of options/);
+      });
+    });
+
+    it('should fill the content of the options', async () => {
+      ampStoryPoll.element.setAttribute('option-1-text', 'Fizz');
+      ampStoryPoll.element.setAttribute('option-2-text', 'Buzz');
+      await ampStoryPoll.buildCallback();
+      await ampStoryPoll.layoutCallback();
+      expect(ampStoryPoll.getOptionElements()[0].textContent).to.contain(
+        'Fizz'
+      );
+      expect(ampStoryPoll.getOptionElements()[1].textContent).to.contain(
+        'Buzz'
+      );
+    });
+
+    it('should handle the percentage pipeline', async () => {
+      env.sandbox
+        .stub(requestService, 'executeRequest')
+        .resolves(getMockInteractiveData());
+
+      ampStoryPoll.element.setAttribute('endpoint', 'http://localhost:8000');
+
+      addConfigToInteractive(ampStoryPoll, 2);
+      await ampStoryPoll.buildCallback();
+      await ampStoryPoll.layoutCallback();
+
+      expect(ampStoryPoll.getOptionElements()[0].innerText).to.contain('50%');
+      expect(ampStoryPoll.getOptionElements()[1].innerText).to.contain('50%');
+    });
+
+    it('should change the font-size wih the emoji content', async () => {
+      ampStoryPoll.element.setAttribute('option-1-text', '🧛');
+      ampStoryPoll.element.setAttribute('option-2-text', '🧛');
+      await ampStoryPoll.buildCallback();
+      await ampStoryPoll.layoutCallback();
+      expect(ampStoryPoll.getRootElement().getAttribute('style')).to.contain(
+        '--post-select-scale-variable:2'
+      );
+    });
+
+    it('should change the font-size with one line content', async () => {
+      ampStoryPoll.element.setAttribute('option-1-text', 'This');
+      ampStoryPoll.element.setAttribute('option-2-text', 'That');
+      await ampStoryPoll.buildCallback();
+      await ampStoryPoll.layoutCallback();
+      expect(ampStoryPoll.getRootElement().getAttribute('style')).to.contain(
+        '--post-select-scale-variable:1.14'
+      );
+    });
+
+    it('should change the font-size with two line content', async () => {
+      ampStoryPoll.element.setAttribute('option-1-text', 'This is one');
+      ampStoryPoll.element.setAttribute('option-2-text', 'That is two');
+      await ampStoryPoll.buildCallback();
+      await ampStoryPoll.layoutCallback();
+      expect(ampStoryPoll.getRootElement().getAttribute('style')).to.contain(
+        '--post-select-scale-variable:1'
+      );
+    });
+
+    it('should clamp transformX of text to MIN_HORIZONTAL_TRANSFORM value', () => {
+      const transformVal = ampStoryPoll.getTransformVal_(10);
+      expect(transformVal).to.deep.equal(-20);
+    });
+  }
+);
diff --git a/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-poll.js b/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-poll.js
new file mode 100644
index 0000000000000..9538884a145cb
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-poll.js
@@ -0,0 +1,168 @@
+/**
+ * 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.
+ */
+
+import {AmpStoryInteractivePoll} from '../amp-story-interactive-poll';
+import {AmpStoryRequestService} from '../../../amp-story/1.0/amp-story-request-service';
+import {AmpStoryStoreService} from '../../../amp-story/1.0/amp-story-store-service';
+import {LocalizationService} from '../../../../src/service/localization';
+import {Services} from '../../../../src/services';
+import {
+  addConfigToInteractive,
+  getMockInteractiveData,
+} from './test-amp-story-interactive';
+import {measureMutateElementStub} from '../../../../testing/test-helper';
+import {registerServiceBuilder} from '../../../../src/service';
+
+describes.realWin(
+  'amp-story-interactive-poll',
+  {
+    amp: true,
+  },
+  (env) => {
+    let win;
+    let ampStoryPoll;
+    let storyEl;
+    let requestService;
+
+    beforeEach(() => {
+      win = env.win;
+
+      env.sandbox
+        .stub(Services, 'cidForDoc')
+        .resolves({get: () => Promise.resolve('cid')});
+
+      const ampStoryPollEl = win.document.createElement(
+        'amp-story-interactive-poll'
+      );
+      ampStoryPollEl.getResources = () => win.__AMP_SERVICES.resources.obj;
+      requestService = new AmpStoryRequestService(win);
+      registerServiceBuilder(win, 'story-request', function () {
+        return requestService;
+      });
+
+      const storeService = new AmpStoryStoreService(win);
+      registerServiceBuilder(win, 'story-store', function () {
+        return storeService;
+      });
+
+      const localizationService = new LocalizationService(win.document.body);
+      env.sandbox
+        .stub(Services, 'localizationServiceForOrNull')
+        .returns(Promise.resolve(localizationService));
+
+      storyEl = win.document.createElement('amp-story');
+      const storyPage = win.document.createElement('amp-story-page');
+      const gridLayer = win.document.createElement('amp-story-grid-layer');
+      gridLayer.appendChild(ampStoryPollEl);
+      storyPage.appendChild(gridLayer);
+      storyEl.appendChild(storyPage);
+
+      win.document.body.appendChild(storyEl);
+      ampStoryPoll = new AmpStoryInteractivePoll(ampStoryPollEl);
+      env.sandbox
+        .stub(ampStoryPoll, 'measureMutateElement')
+        .callsFake(measureMutateElementStub);
+      env.sandbox.stub(ampStoryPoll, 'mutateElement').callsFake((fn) => fn());
+    });
+
+    it('should throw an error with fewer than two options', () => {
+      addConfigToInteractive(ampStoryPoll, 1);
+      allowConsoleError(() => {
+        expect(() => {
+          ampStoryPoll.buildCallback();
+        }).to.throw(/Improper number of options/);
+      });
+    });
+
+    it('should not throw an error with two options', () => {
+      addConfigToInteractive(ampStoryPoll, 2);
+      expect(() => ampStoryPoll.buildCallback()).to.not.throw();
+    });
+
+    it('should throw an error with more than four options', () => {
+      addConfigToInteractive(ampStoryPoll, 5);
+      allowConsoleError(() => {
+        expect(() => {
+          ampStoryPoll.buildCallback();
+        }).to.throw(/Improper number of options/);
+      });
+    });
+
+    it('should fill the content of the options', async () => {
+      ampStoryPoll.element.setAttribute('option-1-text', 'Fizz');
+      ampStoryPoll.element.setAttribute('option-2-text', 'Buzz');
+      await ampStoryPoll.buildCallback();
+      await ampStoryPoll.layoutCallback();
+      expect(ampStoryPoll.getOptionElements()[0].textContent).to.contain(
+        'Fizz'
+      );
+      expect(ampStoryPoll.getOptionElements()[1].textContent).to.contain(
+        'Buzz'
+      );
+    });
+
+    it('should handle the percentage pipeline', async () => {
+      env.sandbox
+        .stub(requestService, 'executeRequest')
+        .resolves(getMockInteractiveData());
+
+      ampStoryPoll.element.setAttribute('endpoint', 'http://localhost:8000');
+
+      addConfigToInteractive(ampStoryPoll, 2);
+      await ampStoryPoll.buildCallback();
+      await ampStoryPoll.layoutCallback();
+
+      expect(ampStoryPoll.getOptionElements()[0].innerText).to.contain('50 %');
+      expect(ampStoryPoll.getOptionElements()[1].innerText).to.contain('50 %');
+    });
+
+    it('should have large font size if options are short', async () => {
+      ampStoryPoll.element.setAttribute(
+        'option-1-text',
+        'This is a short text'
+      );
+      ampStoryPoll.element.setAttribute(
+        'option-2-text',
+        'This is another text'
+      );
+      await ampStoryPoll.buildCallback();
+      await ampStoryPoll.layoutCallback();
+      expect(
+        ampStoryPoll
+          .getRootElement()
+          .classList.contains('i-amphtml-story-interactive-poll-two-lines')
+      ).to.be.false;
+    });
+
+    it('should have small font size if options are long', async () => {
+      ampStoryPoll.element.setAttribute(
+        'option-1-text',
+        'This is a really really really really really long text'
+      );
+      ampStoryPoll.element.setAttribute(
+        'option-2-text',
+        'This is another text'
+      );
+      await ampStoryPoll.buildCallback();
+      await ampStoryPoll.layoutCallback();
+      expect(
+        ampStoryPoll
+          .getRootElement()
+          .classList.contains('i-amphtml-story-interactive-poll-two-lines')
+      ).to.be.true;
+    });
+  }
+);
diff --git a/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-quiz.js b/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-quiz.js
new file mode 100644
index 0000000000000..8c93eb0bd2640
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-quiz.js
@@ -0,0 +1,180 @@
+/**
+ * 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.
+ */
+
+import {AmpStoryInteractiveQuiz} from '../amp-story-interactive-quiz';
+import {AmpStoryRequestService} from '../../../amp-story/1.0/amp-story-request-service';
+import {AmpStoryStoreService} from '../../../amp-story/1.0/amp-story-store-service';
+import {LocalizationService} from '../../../../src/service/localization';
+import {Services} from '../../../../src/services';
+import {
+  addConfigToInteractive,
+  getMockInteractiveData,
+} from './test-amp-story-interactive';
+import {registerServiceBuilder} from '../../../../src/service';
+
+/**
+ * Populates the quiz with some number of prompts and some number of options.
+ *
+ * @param {Window} win
+ * @param {AmpStoryInteractiveQuiz} quiz
+ * @param {=number} numOptions
+ * @param {?string} prompt
+ * @param {=number} correctOption
+ */
+const populateQuiz = (
+  quiz,
+  numOptions = 4,
+  prompt = undefined,
+  correctOption = 1
+) => {
+  if (prompt) {
+    quiz.element.setAttribute('prompt-text', prompt);
+  }
+  addConfigToInteractive(quiz, numOptions, correctOption);
+  quiz.element.setAttribute('id', 'TEST_quizId');
+};
+
+describes.realWin(
+  'amp-story-interactive-quiz',
+  {
+    amp: true,
+  },
+  (env) => {
+    let win;
+    let ampStoryQuiz;
+    let storyEl;
+    let requestService;
+
+    beforeEach(() => {
+      win = env.win;
+
+      env.sandbox
+        .stub(Services, 'cidForDoc')
+        .resolves({get: () => Promise.resolve('cid')});
+
+      const ampStoryQuizEl = win.document.createElement(
+        'amp-story-interactive-quiz'
+      );
+      ampStoryQuizEl.getResources = () => win.__AMP_SERVICES.resources.obj;
+      requestService = new AmpStoryRequestService(win);
+      registerServiceBuilder(win, 'story-request', function () {
+        return requestService;
+      });
+
+      const storeService = new AmpStoryStoreService(win);
+      registerServiceBuilder(win, 'story-store', function () {
+        return storeService;
+      });
+
+      const localizationService = new LocalizationService(win.document.body);
+      env.sandbox
+        .stub(Services, 'localizationServiceForOrNull')
+        .returns(Promise.resolve(localizationService));
+
+      storyEl = win.document.createElement('amp-story');
+      const storyPage = win.document.createElement('amp-story-page');
+      const gridLayer = win.document.createElement('amp-story-grid-layer');
+      gridLayer.appendChild(ampStoryQuizEl);
+      storyPage.appendChild(gridLayer);
+      storyEl.appendChild(storyPage);
+
+      win.document.body.appendChild(storyEl);
+      ampStoryQuiz = new AmpStoryInteractiveQuiz(ampStoryQuizEl);
+
+      env.sandbox.stub(ampStoryQuiz, 'mutateElement').callsFake((fn) => fn());
+    });
+
+    it('should create the prompt and options container if there is a prompt', async () => {
+      populateQuiz(ampStoryQuiz, 4, 'Is this a prompt?');
+      await ampStoryQuiz.buildCallback();
+      await ampStoryQuiz.layoutCallback();
+      expect(ampStoryQuiz.getRootElement().children.length).to.equal(2);
+    });
+
+    it('should not create the prompt and options container if there no prompt', async () => {
+      populateQuiz(ampStoryQuiz, 4, undefined);
+      await ampStoryQuiz.buildCallback();
+      await ampStoryQuiz.layoutCallback();
+      expect(ampStoryQuiz.getRootElement().children.length).to.equal(1);
+    });
+
+    it('should structure the content in the quiz element', async () => {
+      populateQuiz(ampStoryQuiz, 4, 'Has prompt!?');
+      await ampStoryQuiz.buildCallback();
+      await ampStoryQuiz.layoutCallback();
+
+      const quizContent = ampStoryQuiz.getRootElement().children;
+      expect(quizContent[0]).to.have.class(
+        'i-amphtml-story-interactive-prompt-container'
+      );
+      expect(quizContent[1]).to.have.class(
+        'i-amphtml-story-interactive-quiz-option-container'
+      );
+
+      // Check prompt container structure.
+      expect(quizContent[0].children.length).to.equal(1);
+      expect(
+        quizContent[0].querySelectorAll('.i-amphtml-story-interactive-prompt')
+      ).to.have.length(1);
+
+      // Check option container structure.
+      expect(quizContent[1].childNodes.length).to.equal(4);
+      expect(
+        quizContent[1].querySelectorAll(
+          '.i-amphtml-story-interactive-quiz-option'
+        )
+      ).to.have.length(4);
+    });
+
+    it('should throw an error with fewer than two options', () => {
+      populateQuiz(ampStoryQuiz, 1);
+      allowConsoleError(() => {
+        expect(() => {
+          ampStoryQuiz.buildCallback();
+        }).to.throw(/Improper number of options/);
+      });
+    });
+
+    it('should not throw an error with three options and one prompt', () => {
+      populateQuiz(ampStoryQuiz, 3);
+      expect(() => ampStoryQuiz.buildCallback()).to.not.throw();
+    });
+
+    it('should throw an error with more than four options', () => {
+      populateQuiz(ampStoryQuiz, 5);
+      allowConsoleError(() => {
+        expect(() => {
+          ampStoryQuiz.buildCallback();
+        }).to.throw(/Improper number of options/);
+      });
+    });
+
+    it('should handle the percentage pipeline', async () => {
+      env.sandbox
+        .stub(requestService, 'executeRequest')
+        .resolves(getMockInteractiveData());
+
+      ampStoryQuiz.element.setAttribute('endpoint', 'http://localhost:8000');
+
+      populateQuiz(ampStoryQuiz);
+      await ampStoryQuiz.buildCallback();
+      await ampStoryQuiz.layoutCallback();
+
+      expect(ampStoryQuiz.getOptionElements()[0].innerText).to.contain('30%');
+      expect(ampStoryQuiz.getOptionElements()[3].innerText).to.contain('10%');
+    });
+  }
+);
diff --git a/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-results.js b/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-results.js
new file mode 100644
index 0000000000000..9b59712231858
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-results.js
@@ -0,0 +1,269 @@
+/**
+ * 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.
+ */
+
+import {
+  Action,
+  AmpStoryStoreService,
+} from '../../../amp-story/1.0/amp-story-store-service';
+import {
+  AmpStoryInteractiveResults,
+  decideStrategy,
+  processResultsCategory,
+  processResultsPercentage,
+} from '../amp-story-interactive-results';
+import {InteractiveType} from '../amp-story-interactive-abstract';
+import {LocalizationService} from '../../../../src/service/localization';
+import {Services} from '../../../../src/services';
+import {addConfigToInteractive} from './test-amp-story-interactive';
+import {registerServiceBuilder} from '../../../../src/service';
+
+const addThresholdsToInteractive = (interactive, thresholdList) => {
+  addConfigToInteractive(interactive, thresholdList.length, null, [
+    'results-category',
+  ]);
+  thresholdList.forEach((threshold, index) => {
+    interactive.element.setAttribute(
+      `option-${index + 1}-results-threshold`,
+      threshold
+    );
+  });
+};
+
+describes.realWin(
+  'amp-story-interactive-results',
+  {
+    amp: true,
+  },
+  (env) => {
+    let win;
+    let ampStoryResults;
+    let storyEl;
+    let storeService;
+
+    beforeEach(() => {
+      win = env.win;
+
+      const ampStoryResultsEl = win.document.createElement(
+        'amp-story-interactive-results'
+      );
+      ampStoryResultsEl.getResources = () => win.__AMP_SERVICES.resources.obj;
+
+      storeService = new AmpStoryStoreService(win);
+      registerServiceBuilder(win, 'story-store', function () {
+        return storeService;
+      });
+
+      const localizationService = new LocalizationService(win.document.body);
+      env.sandbox
+        .stub(Services, 'localizationServiceForOrNull')
+        .returns(Promise.resolve(localizationService));
+
+      storyEl = win.document.createElement('amp-story');
+      const storyPage = win.document.createElement('amp-story-page');
+      const gridLayer = win.document.createElement('amp-story-grid-layer');
+      gridLayer.appendChild(ampStoryResultsEl);
+      storyPage.appendChild(gridLayer);
+      storyEl.appendChild(storyPage);
+
+      win.document.body.appendChild(storyEl);
+      ampStoryResults = new AmpStoryInteractiveResults(ampStoryResultsEl);
+      env.sandbox
+        .stub(ampStoryResults, 'mutateElement')
+        .callsFake((fn) => fn());
+    });
+
+    it('should throw an error with fewer than two options', () => {
+      addConfigToInteractive(ampStoryResults, 1);
+      allowConsoleError(() => {
+        expect(() => {
+          ampStoryResults.buildCallback();
+        }).to.throw(/Improper number of options/);
+      });
+    });
+
+    it('should not throw an error with two-four options', () => {
+      addConfigToInteractive(ampStoryResults, 3);
+      expect(() => ampStoryResults.buildCallback()).to.not.throw();
+    });
+
+    it('should throw an error with more than four options', () => {
+      addConfigToInteractive(ampStoryResults, 5);
+      allowConsoleError(() => {
+        expect(() => {
+          ampStoryResults.buildCallback();
+        }).to.throw(/Improper number of options/);
+      });
+    });
+
+    it('should set the text for the category on update', async () => {
+      addConfigToInteractive(ampStoryResults, 3);
+      await ampStoryResults.buildCallback();
+      await ampStoryResults.layoutCallback();
+      storeService.dispatch(Action.ADD_INTERACTIVE_REACT, {
+        'interactiveId': 'i',
+        'option': {'resultscategory': 'results-category 2'},
+        'type': InteractiveType.POLL,
+      });
+      expect(
+        ampStoryResults.rootEl_.querySelector(
+          '.i-amphtml-story-interactive-results-title'
+        ).textContent
+      ).to.equal('results-category 2');
+    });
+
+    it('should use a percentage strategy if there are thresholds', async () => {
+      addConfigToInteractive(ampStoryResults, 3, null, [
+        'results-category',
+        'results-threshold',
+      ]);
+      expect(decideStrategy(ampStoryResults.parseOptions_())).to.equal(
+        'percentage'
+      );
+    });
+
+    it('should use a category strategy if there are no thresholds', () => {
+      addConfigToInteractive(ampStoryResults, 3, null, ['results-category']);
+      expect(decideStrategy(ampStoryResults.parseOptions_())).to.equal(
+        'category'
+      );
+    });
+
+    it('should select the category with most votes', () => {
+      const votes = {
+        'a': {
+          'option': {'resultscategory': 'results-category 1'},
+          'type': InteractiveType.POLL,
+        },
+        'b': {
+          'option': {'resultscategory': 'results-category 2'},
+          'type': InteractiveType.POLL,
+        },
+        'c': {
+          'option': {'resultscategory': 'results-category 2'},
+          'type': InteractiveType.POLL,
+        },
+      };
+      addConfigToInteractive(ampStoryResults, 3, null, ['results-category']);
+      expect(
+        processResultsCategory(votes, ampStoryResults.parseOptions_()).category
+      ).to.equal('results-category 2');
+    });
+
+    it('should select the first category with most votes if tied', () => {
+      const votes = {
+        'a': {
+          'option': {'resultscategory': 'results-category 1'},
+          'type': InteractiveType.POLL,
+        },
+        'b': {
+          'option': {'resultscategory': 'results-category 2'},
+          'type': InteractiveType.POLL,
+        },
+      };
+      addConfigToInteractive(ampStoryResults, 3, null, ['results-category']);
+      expect(
+        processResultsCategory(votes, ampStoryResults.parseOptions_()).category
+      ).to.equal('results-category 1');
+    });
+
+    it('should get the highest threshold that is lower or equal to the percentage', () => {
+      const votes = {
+        'a': {
+          'option': {'correct': 'correct'},
+          'type': InteractiveType.QUIZ,
+        },
+        'b': {
+          'option': {},
+          'type': InteractiveType.QUIZ,
+        },
+      };
+      addThresholdsToInteractive(ampStoryResults, [25, 80, 50]);
+      const results = processResultsPercentage(
+        votes,
+        ampStoryResults.parseOptions_()
+      );
+      expect(results.category).to.equal('results-category 3');
+      expect(results.percentage).to.equal(50);
+    });
+
+    it('should get the lowest threshold if all are higher than percentage', () => {
+      const votes = {
+        'a': {
+          'option': {},
+          'type': InteractiveType.QUIZ,
+        },
+        'b': {
+          'option': {},
+          'type': InteractiveType.QUIZ,
+        },
+      };
+      addThresholdsToInteractive(ampStoryResults, [50, 20, 80]);
+      const results = processResultsPercentage(
+        votes,
+        ampStoryResults.parseOptions_()
+      );
+      expect(results.category).to.equal('results-category 2');
+      expect(results.percentage).to.equal(0);
+    });
+
+    it('should set the text for the percentage category on update', async () => {
+      addThresholdsToInteractive(ampStoryResults, [80, 20, 50]);
+      await ampStoryResults.buildCallback();
+      await ampStoryResults.layoutCallback();
+      storeService.dispatch(Action.ADD_INTERACTIVE_REACT, {
+        'interactiveId': 'i',
+        'option': {correct: 'correct'},
+        'type': InteractiveType.QUIZ,
+      });
+      storeService.dispatch(Action.ADD_INTERACTIVE_REACT, {
+        'interactiveId': 'j',
+        'option': {},
+        'type': InteractiveType.QUIZ,
+      });
+      expect(
+        ampStoryResults.rootEl_.querySelector(
+          '.i-amphtml-story-interactive-results-title'
+        ).textContent
+      ).to.equal('results-category 3');
+    });
+
+    it('should set the percentage for the percentage category on update', async () => {
+      addThresholdsToInteractive(ampStoryResults, [80, 20, 50]);
+      await ampStoryResults.buildCallback();
+      await ampStoryResults.layoutCallback();
+      storeService.dispatch(Action.ADD_INTERACTIVE_REACT, {
+        'interactiveId': 'i',
+        'option': {correct: 'correct'},
+        'type': InteractiveType.QUIZ,
+      });
+      storeService.dispatch(Action.ADD_INTERACTIVE_REACT, {
+        'interactiveId': 'j',
+        'option': {},
+        'type': InteractiveType.QUIZ,
+      });
+      storeService.dispatch(Action.ADD_INTERACTIVE_REACT, {
+        'interactiveId': 'k',
+        'option': {},
+        'type': InteractiveType.QUIZ,
+      });
+      expect(
+        ampStoryResults.rootEl_.querySelector(
+          '.i-amphtml-story-interactive-results-top-value-number'
+        ).textContent
+      ).to.equal('33');
+    });
+  }
+);
diff --git a/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive.js b/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive.js
new file mode 100644
index 0000000000000..f3d51a0516b63
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/test/test-amp-story-interactive.js
@@ -0,0 +1,407 @@
+/**
+ * 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.
+ */
+
+import {
+  AmpStoryInteractive,
+  InteractiveType,
+} from '../amp-story-interactive-abstract';
+import {AmpStoryRequestService} from '../../../amp-story/1.0/amp-story-request-service';
+import {
+  AmpStoryStoreService,
+  StateProperty,
+} from '../../../amp-story/1.0/amp-story-store-service';
+import {
+  AmpStoryVariableService,
+  AnalyticsVariable,
+} from '../../../amp-story/1.0/variable-service';
+import {LocalizationService} from '../../../../src/service/localization';
+import {Services} from '../../../../src/services';
+import {StoryAnalyticsService} from '../../../amp-story/1.0/story-analytics';
+import {dict} from '../../../../src/core/types/object';
+import {getBackendSpecs} from '../interactive-disclaimer';
+import {htmlFor} from '../../../../src/static-template';
+import {measureMutateElementStub} from '../../../../testing/test-helper';
+import {registerServiceBuilder} from '../../../../src/service';
+import {toggleExperiment} from '../../../../src/experiments';
+
+/**
+ * Returns mock interactive data.
+ *
+ * @return {Object}
+ */
+export const getMockInteractiveData = () => {
+  return {
+    options: [
+      {
+        index: 0,
+        count: 3,
+        selected: true,
+      },
+      {
+        index: 1,
+        count: 3,
+        selected: false,
+      },
+      {
+        index: 2,
+        count: 3,
+        selected: false,
+      },
+      {
+        index: 3,
+        count: 1,
+        selected: false,
+      },
+    ],
+  };
+};
+
+export const addConfigToInteractive = (
+  interactive,
+  options = 4,
+  correct = undefined,
+  attributes = ['text', 'results-category', 'image']
+) => {
+  for (let i = 0; i < options; i++) {
+    attributes.forEach((attr) => {
+      interactive.element.setAttribute(
+        `option-${i + 1}-${attr}`,
+        `${attr} ${i + 1}`
+      );
+    });
+  }
+  if (correct) {
+    interactive.element.setAttribute(`option-${correct}-correct`, 'correct');
+  }
+};
+
+class InteractiveTest extends AmpStoryInteractive {
+  constructor(element) {
+    super(element, InteractiveType.QUIZ);
+  }
+
+  /** @override */
+  buildComponent() {
+    const html = htmlFor(this.element);
+    const root = html`<div class="container"></div>`;
+    const option = html`<span
+      class="i-amphtml-story-interactive-option"
+    ></span>`;
+    for (let i = 0; i < this.options_.length; i++) {
+      const newOption = option.cloneNode();
+      newOption.optionIndex_ = this.options_[i]['optionIndex'];
+      newOption.textContent = this.options_[i]['text'];
+      root.appendChild(newOption);
+    }
+    return root;
+  }
+
+  /** @override */
+  getInteractiveId_() {
+    return 'id';
+  }
+}
+
+/**
+ * Generates a response given an array of counts.
+ *
+ * @param {Array<number>} responseCounts
+ */
+export const generateResponseDataFor = (responseCounts) => {
+  return responseCounts.map((count, index) =>
+    dict({
+      'index': index,
+      'count': count,
+      'selected': false,
+    })
+  );
+};
+
+describes.realWin(
+  'amp-story-interactive',
+  {
+    amp: true,
+  },
+  (env) => {
+    let win;
+    let ampStoryInteractive;
+    let storyEl;
+    let analytics;
+    let analyticsVars;
+    let requestService;
+    let storeService;
+
+    beforeEach(() => {
+      win = env.win;
+
+      env.sandbox
+        .stub(Services, 'cidForDoc')
+        .resolves({get: () => Promise.resolve('cid')});
+
+      const ampStoryInteractiveEl = win.document.createElement(
+        'amp-story-interactive'
+      );
+      ampStoryInteractiveEl.id = 'TEST_interactiveId';
+      ampStoryInteractiveEl.getResources = () =>
+        win.__AMP_SERVICES.resources.obj;
+
+      analyticsVars = new AmpStoryVariableService(win);
+      registerServiceBuilder(win, 'story-variable', function () {
+        return analyticsVars;
+      });
+      analytics = new StoryAnalyticsService(win, win.document.body);
+      registerServiceBuilder(win, 'story-analytics', function () {
+        return analytics;
+      });
+      requestService = new AmpStoryRequestService(win);
+      registerServiceBuilder(win, 'story-request', function () {
+        return requestService;
+      });
+      storeService = new AmpStoryStoreService(win);
+      registerServiceBuilder(win, 'story-store', function () {
+        return storeService;
+      });
+      const localizationService = new LocalizationService(win.document.body);
+      env.sandbox
+        .stub(Services, 'localizationServiceForOrNull')
+        .returns(Promise.resolve(localizationService));
+
+      storyEl = win.document.createElement('amp-story');
+      const storyPage = win.document.createElement('amp-story-page');
+      storyPage.id = 'page-1';
+      const gridLayer = win.document.createElement('amp-story-grid-layer');
+      gridLayer.appendChild(ampStoryInteractiveEl);
+      storyPage.appendChild(gridLayer);
+      storyEl.appendChild(storyPage);
+
+      win.document.body.appendChild(storyEl);
+      ampStoryInteractive = new InteractiveTest(ampStoryInteractiveEl);
+
+      env.sandbox
+        .stub(ampStoryInteractive, 'mutateElement')
+        .callsFake((fn) => fn());
+      env.sandbox
+        .stub(ampStoryInteractive, 'measureMutateElement')
+        .callsFake(measureMutateElementStub);
+    });
+
+    it('should parse the attributes properly into an options list', async () => {
+      addConfigToInteractive(
+        ampStoryInteractive,
+        /* options */ 3,
+        /* correct */ 1
+      );
+      const optionsList = ampStoryInteractive.parseOptions_();
+      expect(optionsList).to.have.length(3);
+      for (let i = 0; i < 3; i++) {
+        expect(optionsList[i]).to.haveOwnProperty('text');
+        expect(optionsList[i]).to.haveOwnProperty('optionIndex');
+      }
+      expect(optionsList[0]).to.haveOwnProperty('correct', 'correct');
+    });
+
+    it('should enter post-selection state on option click', async () => {
+      addConfigToInteractive(ampStoryInteractive);
+      await ampStoryInteractive.buildCallback();
+      await ampStoryInteractive.layoutCallback();
+      await ampStoryInteractive.getOptionElements()[0].click();
+      expect(ampStoryInteractive.getRootElement()).to.have.class(
+        'i-amphtml-story-interactive-post-selection'
+      );
+      expect(ampStoryInteractive.getOptionElements()[0]).to.have.class(
+        'i-amphtml-story-interactive-option-selected'
+      );
+    });
+
+    it('should only record first option selected', async () => {
+      addConfigToInteractive(ampStoryInteractive);
+      await ampStoryInteractive.buildCallback();
+      await ampStoryInteractive.layoutCallback();
+      await ampStoryInteractive.getOptionElements()[0].click();
+      await ampStoryInteractive.getOptionElements()[1].click();
+      expect(ampStoryInteractive.getOptionElements()[0]).to.have.class(
+        'i-amphtml-story-interactive-option-selected'
+      );
+      expect(ampStoryInteractive.getOptionElements()[1]).to.not.have.class(
+        'i-amphtml-story-interactive-option-selected'
+      );
+    });
+
+    it('should trigger an analytics event with the right variables on selection', async () => {
+      const trigger = env.sandbox.stub(analytics, 'triggerEvent');
+      addConfigToInteractive(ampStoryInteractive);
+      await ampStoryInteractive.buildCallback();
+      await ampStoryInteractive.layoutCallback();
+      await ampStoryInteractive.getOptionElements()[1].click();
+      expect(trigger).to.have.been.calledWith('story-interactive');
+      const variables = analyticsVars.get();
+      expect(variables[AnalyticsVariable.STORY_INTERACTIVE_ID]).to.equal(
+        'TEST_interactiveId'
+      );
+      expect(variables[AnalyticsVariable.STORY_INTERACTIVE_RESPONSE]).to.equal(
+        1
+      );
+      expect(variables[AnalyticsVariable.STORY_INTERACTIVE_TYPE]).to.equal(
+        ampStoryInteractive.interactiveType_
+      );
+    });
+
+    it('should update the quiz when the user has already reacted', async () => {
+      env.sandbox
+        .stub(requestService, 'executeRequest')
+        .resolves(getMockInteractiveData());
+      addConfigToInteractive(ampStoryInteractive);
+      ampStoryInteractive.element.setAttribute(
+        'endpoint',
+        'http://localhost:8000'
+      );
+      await ampStoryInteractive.buildCallback();
+      await ampStoryInteractive.layoutCallback();
+
+      expect(ampStoryInteractive.getRootElement()).to.have.class(
+        'i-amphtml-story-interactive-post-selection'
+      );
+      expect(ampStoryInteractive.getOptionElements()[0]).to.have.class(
+        'i-amphtml-story-interactive-option-selected'
+      );
+    });
+
+    it('should throw error if percentages are not correctly passed', () => {
+      addConfigToInteractive(ampStoryInteractive);
+      const responseData = dict({'wrongKey': []});
+      allowConsoleError(() => {
+        expect(() =>
+          ampStoryInteractive.handleSuccessfulDataRetrieval_(responseData)
+        ).to.throw();
+      });
+    });
+
+    it('should preprocess percentages properly', () => {
+      const responseData1 = getMockInteractiveData()['options'];
+
+      const percentages1 =
+        ampStoryInteractive.preprocessPercentages_(responseData1);
+
+      expect(percentages1).to.deep.equal([30, 30, 30, 10]);
+    });
+
+    it('should preprocess percentages preserving ties', () => {
+      const responseData2 = generateResponseDataFor([3, 3, 3]);
+      const percentages2 =
+        ampStoryInteractive.preprocessPercentages_(responseData2);
+
+      expect(percentages2).to.deep.equal([33, 33, 33]);
+    });
+
+    it('should preprocess percentages preserving order', () => {
+      const responseData3 = generateResponseDataFor([255, 255, 245, 245]);
+      const percentages3 =
+        ampStoryInteractive.preprocessPercentages_(responseData3);
+
+      expect(percentages3).to.deep.equal([26, 26, 24, 24]);
+    });
+
+    it('should preprocess percentages handling rounding edge cases', () => {
+      const responseData4 = generateResponseDataFor([335, 335, 330]);
+      const percentages4 =
+        ampStoryInteractive.preprocessPercentages_(responseData4);
+
+      expect(percentages4).to.deep.equal([33, 33, 33]);
+    });
+
+    it('should update the store property correctly', async () => {
+      addConfigToInteractive(ampStoryInteractive, 4, null, ['text']);
+      await ampStoryInteractive.buildCallback();
+      await ampStoryInteractive.layoutCallback();
+      await ampStoryInteractive.getOptionElements()[2].click();
+
+      expect(
+        ampStoryInteractive.storeService_.get(
+          StateProperty.INTERACTIVE_REACT_STATE
+        )['id']
+      ).to.be.deep.equals({
+        option: {
+          optionIndex: 2,
+          text: 'text 3',
+        },
+        interactiveId: 'id',
+        type: InteractiveType.QUIZ,
+      });
+    });
+
+    it('should set the url of the disclaimer to the backend url', async () => {
+      toggleExperiment(win, 'amp-story-interactive-disclaimer', true);
+      env.sandbox
+        .stub(requestService, 'executeRequest')
+        .resolves(getMockInteractiveData());
+
+      addConfigToInteractive(ampStoryInteractive);
+      ampStoryInteractive.element.setAttribute(
+        'endpoint',
+        'https://notabackend.com'
+      );
+      await ampStoryInteractive.buildCallback();
+      await ampStoryInteractive.layoutCallback();
+
+      expect(
+        ampStoryInteractive.element.querySelector(
+          '.i-amphtml-story-interactive-disclaimer-url'
+        ).textContent
+      ).to.be.equal('notabackend.com');
+    });
+
+    it('should remove learn more link when backend is not on list', async () => {
+      toggleExperiment(win, 'amp-story-interactive-disclaimer', true);
+      env.sandbox
+        .stub(requestService, 'executeRequest')
+        .resolves(getMockInteractiveData());
+
+      addConfigToInteractive(ampStoryInteractive);
+      ampStoryInteractive.element.setAttribute(
+        'endpoint',
+        'https://notabackend.com'
+      );
+
+      await ampStoryInteractive.buildCallback();
+      await ampStoryInteractive.layoutCallback();
+      expect(
+        ampStoryInteractive.element.querySelector(
+          '.i-amphtml-story-interactive-disclaimer-link'
+        )
+      ).to.be.null;
+    });
+
+    it('should properly find backend from url in list of backends', async () => {
+      expect(
+        getBackendSpecs('notabackend.com/api/v1', {
+          'wrongbackend.com': {learnMoreUrl: 'url0', 'entity': 'WrongBackend'},
+          'notabackend.com': {learnMoreUrl: 'url1', 'entity': 'NotABackend'},
+        })
+      ).to.be.deep.equals([
+        'notabackend.com',
+        {learnMoreUrl: 'url1', entity: 'NotABackend'},
+      ]);
+    });
+
+    it('should not find backend from url in list of backends that does not include url passed', async () => {
+      expect(
+        getBackendSpecs('notabackend.com/api/v1', {
+          'wrongbackend.com': {learnMoreUrl: 'url0', 'entity': 'WrongBackend'},
+        })
+      ).to.be.undefined;
+    });
+  }
+);
diff --git a/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-poll.html b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-poll.html
new file mode 100644
index 0000000000000..eea6cdd4be07e
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-poll.html
@@ -0,0 +1,90 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  Correct poll, as well as 2 incorrect polls and a correct binary poll
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>STAMP examples</title>
+  <link rel="canonical" href="http://nonblocking.io/" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <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-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+</head>
+<body>
+  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+    <amp-story-page id="1">
+      <amp-story-grid-layer template="fill">
+        <!-- Valid: Example of amp-story-interactive-poll -->
+        <amp-story-interactive-poll
+          id="correct-poll"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          theme="dark"
+          chip-style="shadow"
+          class="nice-quiz"
+          prompt-text="What country do you like the most?"
+          option-1-text="France" option-1-confetti="🇺🇾" option-1-results-category="Dog"
+          option-2-text="Spain" option-2-confetti="🇺🇾" option-2-results-category="Cat"
+          option-3-text="Uruguay" option-3-confetti="🇺🇾" option-3-results-category="Bunny"
+          option-4-text="Brazil" option-4-confetti="🇺🇾" option-4-results-category="Mouse">
+        </amp-story-interactive-poll>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="2">
+      <amp-story-grid-layer template="fill">
+        <!-- Invalid: Poll missing endpoint attribute -->
+        <amp-story-interactive-poll
+          id="missing-endpoint-poll"
+          option-1-text="France"
+          option-2-text="Spain"
+          option-3-text="Uruguay">
+        </amp-story-interactive-poll>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="3">
+      <amp-story-grid-layer template="fill">
+        <!-- Invalid: Poll cannot have option-{1/2/3/4}-correct attribute -->
+        <amp-story-interactive-poll
+          id="extra-correct-poll"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          option-1-text="France" option-1-correct
+          option-2-text="Spain"
+          option-3-text="Uruguay"
+          option-4-text="Spain">
+        </amp-story-interactive-poll>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="4">
+      <amp-story-grid-layer template="fill">
+        <!-- Valid: Example of amp-story-interactive-binary-poll -->
+        <amp-story-interactive-binary-poll
+          id="correct-binary-poll"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          theme="dark"
+          class="cool-binary-poll"
+          option-1-text="France" option-1-confetti="🇺🇾"
+          option-2-text="Spain" option-2-confetti="🇺🇾">
+        </amp-story-interactive-binary-poll>
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-poll.out b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-poll.out
new file mode 100644
index 0000000000000..497174d8e4390
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-poll.out
@@ -0,0 +1,95 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Correct poll, as well as 2 incorrect polls and a correct binary poll
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <title>STAMP examples</title>
+|    <link rel="canonical" href="http://nonblocking.io/" >
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <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>
+|    <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-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+|  </head>
+|  <body>
+|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+|      <amp-story-page id="1">
+|        <amp-story-grid-layer template="fill">
+|          <!-- Valid: Example of amp-story-interactive-poll -->
+|          <amp-story-interactive-poll
+|            id="correct-poll"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            theme="dark"
+|            chip-style="shadow"
+|            class="nice-quiz"
+|            prompt-text="What country do you like the most?"
+|            option-1-text="France" option-1-confetti="🇺🇾" option-1-results-category="Dog"
+|            option-2-text="Spain" option-2-confetti="🇺🇾" option-2-results-category="Cat"
+|            option-3-text="Uruguay" option-3-confetti="🇺🇾" option-3-results-category="Bunny"
+|            option-4-text="Brazil" option-4-confetti="🇺🇾" option-4-results-category="Mouse">
+|          </amp-story-interactive-poll>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|      <amp-story-page id="2">
+|        <amp-story-grid-layer template="fill">
+|          <!-- Invalid: Poll missing endpoint attribute -->
+|          <amp-story-interactive-poll
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-poll.html:54:8 The mandatory attribute 'endpoint' is missing in tag 'amp-story-interactive-poll'. (see https://amp.dev/documentation/components/amp-story-interactive)
+|            id="missing-endpoint-poll"
+|            option-1-text="France"
+|            option-2-text="Spain"
+|            option-3-text="Uruguay">
+|          </amp-story-interactive-poll>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|      <amp-story-page id="3">
+|        <amp-story-grid-layer template="fill">
+|          <!-- Invalid: Poll cannot have option-{1/2/3/4}-correct attribute -->
+|          <amp-story-interactive-poll
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-poll.html:65:8 The attribute 'option-1-correct' may not appear in tag 'amp-story-interactive-poll'. (see https://amp.dev/documentation/components/amp-story-interactive)
+|            id="extra-correct-poll"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            option-1-text="France" option-1-correct
+|            option-2-text="Spain"
+|            option-3-text="Uruguay"
+|            option-4-text="Spain">
+|          </amp-story-interactive-poll>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|      <amp-story-page id="4">
+|        <amp-story-grid-layer template="fill">
+|          <!-- Valid: Example of amp-story-interactive-binary-poll -->
+|          <amp-story-interactive-binary-poll
+|            id="correct-binary-poll"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            theme="dark"
+|            class="cool-binary-poll"
+|            option-1-text="France" option-1-confetti="🇺🇾"
+|            option-2-text="Spain" option-2-confetti="🇺🇾">
+|          </amp-story-interactive-binary-poll>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|    </amp-story>
+|  </body>
+|  </html>
diff --git a/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-quiz.html b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-quiz.html
new file mode 100644
index 0000000000000..777964a23f82b
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-quiz.html
@@ -0,0 +1,78 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  Correct quiz, as well as 2 incorrect quizzes
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>STAMP examples</title>
+  <link rel="canonical" href="http://nonblocking.io/" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <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-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+</head>
+<body>
+  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+    <amp-story-page id="1">
+      <amp-story-grid-layer template="fill">
+        <!-- Valid: Example of amp-story-interactive-quiz -->
+        <amp-story-interactive-quiz
+          id="correct-quiz"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          theme="dark"
+          chip-style="shadow"
+          class="nice-quiz"
+          prompt-text="Who won the first soccer world cup?"
+          option-1-text="France"
+          option-2-text="Spain"
+          option-3-text="Uruguay" option-3-correct option-3-confetti="🇺🇾"
+          option-4-text="Brazil">
+        </amp-story-interactive-quiz>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="2">
+      <amp-story-grid-layer template="fill">
+        <!-- Invalid: Quiz missing a option-{1/2/3/4}-correct -->
+        <amp-story-interactive-quiz
+          id="missing-correct-quiz"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          option-1-text="France"
+          option-2-text="Spain"
+          option-3-text="Uruguay">
+        </amp-story-interactive-quiz>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="3">
+      <amp-story-grid-layer template="fill">
+        <!-- Invalid: Quiz endpoint must be a valid URL -->
+        <amp-story-interactive-poll
+          id="wrong-endpoint-quiz"
+          endpoint="hi"
+          option-1-text="France"
+          option-2-text="Spain"
+          option-3-text="Uruguay"
+          option-4-text="Spain">
+        </amp-story-interactive-quiz>
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-quiz.out b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-quiz.out
new file mode 100644
index 0000000000000..137f576479e5a
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-quiz.out
@@ -0,0 +1,83 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Correct quiz, as well as 2 incorrect quizzes
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <title>STAMP examples</title>
+|    <link rel="canonical" href="http://nonblocking.io/" >
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <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>
+|    <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-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+|  </head>
+|  <body>
+|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+|      <amp-story-page id="1">
+|        <amp-story-grid-layer template="fill">
+|          <!-- Valid: Example of amp-story-interactive-quiz -->
+|          <amp-story-interactive-quiz
+|            id="correct-quiz"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            theme="dark"
+|            chip-style="shadow"
+|            class="nice-quiz"
+|            prompt-text="Who won the first soccer world cup?"
+|            option-1-text="France"
+|            option-2-text="Spain"
+|            option-3-text="Uruguay" option-3-correct option-3-confetti="🇺🇾"
+|            option-4-text="Brazil">
+|          </amp-story-interactive-quiz>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|      <amp-story-page id="2">
+|        <amp-story-grid-layer template="fill">
+|          <!-- Invalid: Quiz missing a option-{1/2/3/4}-correct -->
+|          <amp-story-interactive-quiz
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-quiz.html:54:8 The tag 'amp-story-interactive-quiz' is missing a mandatory attribute - pick one of ['option-1-correct', 'option-2-correct', 'option-3-correct', 'option-4-correct']. (see https://amp.dev/documentation/components/amp-story-interactive)
+|            id="missing-correct-quiz"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            option-1-text="France"
+|            option-2-text="Spain"
+|            option-3-text="Uruguay">
+|          </amp-story-interactive-quiz>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|      <amp-story-page id="3">
+|        <amp-story-grid-layer template="fill">
+|          <!-- Invalid: Quiz endpoint must be a valid URL -->
+|          <amp-story-interactive-poll
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-quiz.html:66:8 The relative URL 'hi' for attribute 'endpoint' in tag 'amp-story-interactive-poll' is disallowed. (see https://amp.dev/documentation/components/amp-story-interactive)
+|            id="wrong-endpoint-quiz"
+|            endpoint="hi"
+|            option-1-text="France"
+|            option-2-text="Spain"
+|            option-3-text="Uruguay"
+|            option-4-text="Spain">
+|          </amp-story-interactive-quiz>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|    </amp-story>
+|  </body>
+|  </html>
diff --git a/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html
new file mode 100644
index 0000000000000..dc072eb3ac398
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html
@@ -0,0 +1,85 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  Correct results, as well as 2 incorrect results
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>STAMP examples</title>
+  <link rel="canonical" href="http://nonblocking.io/" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <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-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+</head>
+<body>
+  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+    <amp-story-page id="1">
+      <amp-story-grid-layer template="fill">
+        <!-- Valid: Example of amp-story-interactive-results -->
+        <amp-story-interactive-results
+          id="correct-results"
+          theme="dark"
+          class="nice-quiz"
+          prompt-text="What country do you like the most?"
+          option-1-text="France" option-1-results-category="Dog" option-1-image="./dog.png"
+          option-2-text="Spain" option-2-results-category="Cat" option-2-image="./cat.png"
+          option-3-text="Uruguay" option-3-results-category="Bunny" option-3-image="./bunny.png"
+          option-4-text="Brazil" option-4-results-category="Mouse" option-4-image="./mouse.png">
+        </amp-story-interactive-results>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="2">
+      <amp-story-grid-layer template="fill">
+        <!-- Invalid: Results is missing all option-{1/2/3/4}-results-category attributes -->
+        <amp-story-interactive-results
+        id="missing-results-category"
+        prompt-text="What country do you like the most?"
+        option-1-text="France" option-1-image="./dog.png"
+        option-2-text="Spain" option-2-image="./cat.png"
+        option-3-text="Uruguay" option-3-image="./bunny.png"
+        option-4-text="Brazil" option-4-image="./mouse.png">
+        </amp-story-interactive-results>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="3">
+      <amp-story-grid-layer template="fill">
+        <!-- Invalid: Results cannot have an endpoint attribute -->
+        <amp-story-interactive-results
+          id="extra-endpoint-results"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          option-1-text="France" option-1-results-category="Dog"
+          option-2-text="Spain" option-2-results-category="Cat"
+          option-3-text="Uruguay" option-3-results-category="Bunny"
+          option-4-text="Spain" option-4-results-category="Mouse">
+        </amp-story-interactive-results>
+        <!-- Invalid: Threshold has to be specified as a number -->
+        <amp-story-interactive-results
+          id="threshold attributes"
+          option-1-text="France" option-1-results-category="Dog" option-1-results-threshold="100"
+          option-2-text="Spain" option-2-results-category="Cat" option-2-results-threshold="100"
+          option-3-text="Uruguay" option-3-results-category="Bunny" option-3-results-threshold="100"
+          option-4-text="Spain" option-4-results-category="Mouse" option-4-results-threshold="a">
+        </amp-story-interactive-results>
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-results.out b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-results.out
new file mode 100644
index 0000000000000..efef0d5001785
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-results.out
@@ -0,0 +1,102 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Correct results, as well as 2 incorrect results
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <title>STAMP examples</title>
+|    <link rel="canonical" href="http://nonblocking.io/" >
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <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>
+|    <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-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+|  </head>
+|  <body>
+|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+|      <amp-story-page id="1">
+|        <amp-story-grid-layer template="fill">
+|          <!-- Valid: Example of amp-story-interactive-results -->
+|          <amp-story-interactive-results
+|            id="correct-results"
+|            theme="dark"
+|            class="nice-quiz"
+|            prompt-text="What country do you like the most?"
+|            option-1-text="France" option-1-results-category="Dog" option-1-image="./dog.png"
+|            option-2-text="Spain" option-2-results-category="Cat" option-2-image="./cat.png"
+|            option-3-text="Uruguay" option-3-results-category="Bunny" option-3-image="./bunny.png"
+|            option-4-text="Brazil" option-4-results-category="Mouse" option-4-image="./mouse.png">
+|          </amp-story-interactive-results>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|      <amp-story-page id="2">
+|        <amp-story-grid-layer template="fill">
+|          <!-- Invalid: Results is missing all option-{1/2/3/4}-results-category attributes -->
+|          <amp-story-interactive-results
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:52:8 The attribute 'option-3-results-category' in tag 'amp-story-interactive-results' is missing or incorrect, but required by attribute 'option-3-image'. (see https://amp.dev/documentation/components/amp-story-interactive)
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:52:8 The attribute 'option-3-results-category' in tag 'amp-story-interactive-results' is missing or incorrect, but required by attribute 'option-3-text'. (see https://amp.dev/documentation/components/amp-story-interactive)
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:52:8 The attribute 'option-4-results-category' in tag 'amp-story-interactive-results' is missing or incorrect, but required by attribute 'option-4-image'. (see https://amp.dev/documentation/components/amp-story-interactive)
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:52:8 The attribute 'option-4-results-category' in tag 'amp-story-interactive-results' is missing or incorrect, but required by attribute 'option-4-text'. (see https://amp.dev/documentation/components/amp-story-interactive)
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:52:8 The mandatory attribute 'option-1-results-category' is missing in tag 'amp-story-interactive-results'. (see https://amp.dev/documentation/components/amp-story-interactive)
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:52:8 The mandatory attribute 'option-2-results-category' is missing in tag 'amp-story-interactive-results'. (see https://amp.dev/documentation/components/amp-story-interactive)
+|          id="missing-results-category"
+|          prompt-text="What country do you like the most?"
+|          option-1-text="France" option-1-image="./dog.png"
+|          option-2-text="Spain" option-2-image="./cat.png"
+|          option-3-text="Uruguay" option-3-image="./bunny.png"
+|          option-4-text="Brazil" option-4-image="./mouse.png">
+|          </amp-story-interactive-results>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|      <amp-story-page id="3">
+|        <amp-story-grid-layer template="fill">
+|          <!-- Invalid: Results cannot have an endpoint attribute -->
+|          <amp-story-interactive-results
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:65:8 The attribute 'endpoint' may not appear in tag 'amp-story-interactive-results'. (see https://amp.dev/documentation/components/amp-story-interactive)
+|            id="extra-endpoint-results"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            option-1-text="France" option-1-results-category="Dog"
+|            option-2-text="Spain" option-2-results-category="Cat"
+|            option-3-text="Uruguay" option-3-results-category="Bunny"
+|            option-4-text="Spain" option-4-results-category="Mouse">
+|          </amp-story-interactive-results>
+|          <!-- Invalid: Threshold has to be specified as a number -->
+|          <amp-story-interactive-results
+>>         ^~~~~~~~~
+amp-story-interactive/0.1/test/validator-amp-story-interactive-results.html:74:8 The attribute 'option-4-results-threshold' in tag 'amp-story-interactive-results' is set to the invalid value 'a'. (see https://amp.dev/documentation/components/amp-story-interactive)
+|            id="threshold attributes"
+|            option-1-text="France" option-1-results-category="Dog" option-1-results-threshold="100"
+|            option-2-text="Spain" option-2-results-category="Cat" option-2-results-threshold="100"
+|            option-3-text="Uruguay" option-3-results-category="Bunny" option-3-results-threshold="100"
+|            option-4-text="Spain" option-4-results-category="Mouse" option-4-results-threshold="a">
+|          </amp-story-interactive-results>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|    </amp-story>
+|  </body>
+|  </html>
diff --git a/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-valid.html b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-valid.html
new file mode 100644
index 0000000000000..fddbf862ea2ab
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-valid.html
@@ -0,0 +1,92 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  One correct component of each type: binary-poll, poll, quiz, results
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>STAMP examples</title>
+  <link rel="canonical" href="http://nonblocking.io/" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <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-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+</head>
+<body>
+  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+    <amp-story-page id="1">
+      <amp-story-grid-layer template="fill">
+        <!-- Valid: Example of amp-story-interactive-poll -->
+        <amp-story-interactive-poll
+          id="correct-poll"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          theme="dark"
+          chip-style="shadow"
+          class="nice-quiz"
+          prompt-text="What country do you like the most?"
+          option-1-text="France" option-1-confetti="🇺🇾" option-1-results-category="Dog"
+          option-2-text="Spain" option-2-confetti="🇺🇾" option-2-results-category="Cat"
+          option-3-text="Uruguay" option-3-confetti="🇺🇾" option-3-results-category="Bunny"
+          option-4-text="Brazil" option-4-confetti="🇺🇾" option-4-results-category="Mouse">
+        </amp-story-interactive-poll>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="2">
+      <amp-story-grid-layer template="fill">
+        <!-- Valid: Example of amp-story-interactive-binary-poll -->
+        <amp-story-interactive-binary-poll
+          id="correct-binary-poll"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          theme="dark"
+          class="cool-binary-poll"
+          option-1-text="France" option-1-confetti="🇺🇾"
+          option-2-text="Spain" option-2-confetti="🇺🇾">
+        </amp-story-interactive-binary-poll>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="3">
+      <amp-story-grid-layer template="fill">
+        <!-- Valid: Example of amp-story-interactive-quiz -->
+        <amp-story-interactive-quiz
+          id="correct-quiz"
+          endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+          theme="dark"
+          class="cool-quiz"
+          prompt-text="What is the southest country in the list?"
+          option-1-text="Uruguay" option-1-confetti="🇺🇾" option-1-correct
+          option-2-text="Spain">
+        </amp-story-interactive-quiz>
+      </amp-story-grid-layer>
+    </amp-story-page>
+    <amp-story-page id="4">
+      <amp-story-grid-layer template="fill">
+      <!-- Valid: Example of amp-story-interactive-results -->
+        <amp-story-interactive-results
+          theme="dark"
+          class="cool-results"
+          prompt-text="You should go to"
+          option-1-results-category="Dog" option-1-text="Uruguay"
+          option-2-results-category="Cat" option-2-text="Spain">
+        </amp-story-interactive-results>
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-valid.out b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-valid.out
new file mode 100644
index 0000000000000..7254d746016ef
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/test/validator-amp-story-interactive-valid.out
@@ -0,0 +1,93 @@
+PASS
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    One correct component of each type: binary-poll, poll, quiz, results
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <title>STAMP examples</title>
+|    <link rel="canonical" href="http://nonblocking.io/" >
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <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>
+|    <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-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
+|  </head>
+|  <body>
+|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+|      <amp-story-page id="1">
+|        <amp-story-grid-layer template="fill">
+|          <!-- Valid: Example of amp-story-interactive-poll -->
+|          <amp-story-interactive-poll
+|            id="correct-poll"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            theme="dark"
+|            chip-style="shadow"
+|            class="nice-quiz"
+|            prompt-text="What country do you like the most?"
+|            option-1-text="France" option-1-confetti="🇺🇾" option-1-results-category="Dog"
+|            option-2-text="Spain" option-2-confetti="🇺🇾" option-2-results-category="Cat"
+|            option-3-text="Uruguay" option-3-confetti="🇺🇾" option-3-results-category="Bunny"
+|            option-4-text="Brazil" option-4-confetti="🇺🇾" option-4-results-category="Mouse">
+|          </amp-story-interactive-poll>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|      <amp-story-page id="2">
+|        <amp-story-grid-layer template="fill">
+|          <!-- Valid: Example of amp-story-interactive-binary-poll -->
+|          <amp-story-interactive-binary-poll
+|            id="correct-binary-poll"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            theme="dark"
+|            class="cool-binary-poll"
+|            option-1-text="France" option-1-confetti="🇺🇾"
+|            option-2-text="Spain" option-2-confetti="🇺🇾">
+|          </amp-story-interactive-binary-poll>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|      <amp-story-page id="3">
+|        <amp-story-grid-layer template="fill">
+|          <!-- Valid: Example of amp-story-interactive-quiz -->
+|          <amp-story-interactive-quiz
+|            id="correct-quiz"
+|            endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
+|            theme="dark"
+|            class="cool-quiz"
+|            prompt-text="What is the southest country in the list?"
+|            option-1-text="Uruguay" option-1-confetti="🇺🇾" option-1-correct
+|            option-2-text="Spain">
+|          </amp-story-interactive-quiz>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|      <amp-story-page id="4">
+|        <amp-story-grid-layer template="fill">
+|        <!-- Valid: Example of amp-story-interactive-results -->
+|          <amp-story-interactive-results
+|            theme="dark"
+|            class="cool-results"
+|            prompt-text="You should go to"
+|            option-1-results-category="Dog" option-1-text="Uruguay"
+|            option-2-results-category="Cat" option-2-text="Spain">
+|          </amp-story-interactive-results>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|    </amp-story>
+|  </body>
+|  </html>
diff --git a/extensions/amp-story-interactive/0.1/utils.js b/extensions/amp-story-interactive/0.1/utils.js
new file mode 100644
index 0000000000000..dd2c2ad4f8c38
--- /dev/null
+++ b/extensions/amp-story-interactive/0.1/utils.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {map} from '../../../src/core/types/object';
+import {user} from '../../../src/log';
+
+/** @private Whether ids are deduplicated or not */
+let deduplicatedIds = false;
+
+/**
+ * Deduplicates the interactive Ids, only called once
+ * @param {!Document} doc
+ */
+export const deduplicateInteractiveIds = (doc) => {
+  if (deduplicatedIds) {
+    return;
+  }
+  deduplicatedIds = true;
+  const interactiveEls = doc.querySelectorAll(
+    'amp-story-interactive-binary-poll, amp-story-interactive-poll, amp-story-interactive-quiz'
+  );
+  const idsMap = map();
+  for (let i = 0; i < interactiveEls.length; i++) {
+    const currId = interactiveEls[i].id || 'interactive-id';
+    if (idsMap[currId] === undefined) {
+      idsMap[currId] = 0;
+    } else {
+      user().error(
+        'AMP-STORY-INTERACTIVE',
+        `Duplicate interactive ID ${currId}`
+      );
+      const newId = `${currId}__${++idsMap[currId]}`;
+      interactiveEls[i].id = newId;
+    }
+  }
+};
diff --git a/extensions/amp-story-interactive/OWNERS b/extensions/amp-story-interactive/OWNERS
new file mode 100644
index 0000000000000..62cacc4696d6c
--- /dev/null
+++ b/extensions/amp-story-interactive/OWNERS
@@ -0,0 +1,21 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {name: 'enriqe'},
+        {
+          name: 'gmajoulet',
+          notify: true,
+        },
+        {
+          name: 'mszylkowski',
+          notify: true,
+        },
+        {name: 'newmuis'},
+      ],
+    },
+  ],
+}
diff --git a/extensions/amp-story-interactive/README.md b/extensions/amp-story-interactive/README.md
new file mode 100644
index 0000000000000..1810077acd689
--- /dev/null
+++ b/extensions/amp-story-interactive/README.md
@@ -0,0 +1,413 @@
+# Interactive components
+
+## Summary
+
+The interactive components extension provides story creators with a set of interactive experiences they can use to make stories more engaging.
+
+A more complete version of this document can be found in [amp.dev](https://amp.dev/documentation/components/amp-story-interactive/?format=stories).
+
+<table>
+  <tr>
+    <td><img src="https://user-images.githubusercontent.com/22420856/89562666-4e0bc480-d7e8-11ea-8897-372a24b6fb8b.png"></td>
+    <td><img src="https://user-images.githubusercontent.com/22420856/89562460-fc633a00-d7e7-11ea-8cbb-03351c05b5c8.png"></td>
+<td><img src="https://user-images.githubusercontent.com/22420856/90187528-e9bca800-dd87-11ea-8a22-0a99970fab1c.png"></td>
+  </tr>
+</table>
+
+## List of interactive components
+
+<table>
+<tr>
+<td>
+<strong>amp-story-interactive-binary-poll</strong>
+<br><br>Subjective component with only two options. When selected, the option gets hightlighted and it fills the container based on the percentage of votes.<br><br>Works well by itself, with or without prompt.</td><td><img src="https://user-images.githubusercontent.com/22420856/87987329-7ab3a280-caac-11ea-8395-7fcaf93b5550.png"></td>
+</tr>
+<tr>
+<td>
+<strong>amp-story-interactive-poll</strong>
+<br><br>Subjective component with 2-4 options displayed vertically. When selected, each option gets filled up according to the percentage of votes<br><br>Can be easily paired up to display different categories on a results component based on the answers to polls, but can be used by itself.</td><td><img src="https://user-images.githubusercontent.com/22420856/87987364-8a32eb80-caac-11ea-9754-c7f09c2c25ab.png"></td>
+</tr>
+<tr>
+<td>
+<strong>amp-story-interactive-quiz</strong>
+<br><br>Objective component with 2-4 options, one of which is correct. The option selected gets highlighted with green if correct, and red if not; and the percentages fill up the options according to the percentages of votes.<br><br>Can be easily paired up with a results component to display different states depending on the correctness of the quizzes on a story, but works well by itself. Prompt recommended to write the question to the quiz.</td><td><img src="https://user-images.githubusercontent.com/22420856/87987413-9dde5200-caac-11ea-8603-a1d5d23ac987.png"></td>
+</tr>
+<tr>
+<td>
+<strong>amp-story-interactive-results</strong>
+<br><br>Component that can display 2-4 different states/categories depending on the options selected on the previous pages of a story.<br><br>Requires polls or quizzes in previous pages to feed into the state of the component, and the state will be calculated following the strategy specified: correctness, category-voting, etc.</td>
+<td><img src="https://user-images.githubusercontent.com/22420856/89945317-2b661b00-dbef-11ea-9319-e36bede95460.png"></td>
+</tr>
+</table>
+
+## Environment setup
+
+Add the following import to your AMP documents:
+
+```html
+<script
+  async
+  custom-element="amp-story-interactive"
+  src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"
+></script>
+```
+
+## Single-Page Component APIs
+
+Single-page components are ones that can be embedded onto a story by themselves, which refers to all components but the interactive-results. The components have a shared API language for customizing their options. This makes it easier to port the configuration steps across all the interactive components.
+
+All of them support the config attributes:
+
+-   **id**: Unique element identifier, also used to match the votes in the backend.
+-   **endpoint**: Required url of the backend. More info on the backend section.
+-   **prompt-text**: Optional string that represents the title or question. All components support it out of the box. If too long (past 3 visible lines) it will be truncated. If not specified, the prompt space will not show up.
+-   **prompt-size**: String that determines the font size of the prompt, default is _medium_. Supports _small_, _medium_ and _large_.
+-   **option-{1/2/3/4}-text**: Strings that represent the options, indexed from 1. Binary polls require 2 options, polls and quizzes require 2-4 options.
+-   **option-{1/2/3/4}-confetti**: Optional emoji that, when the option is selected, will trigger a confetti animation with the given emoji.
+
+All of them support the styling attributes:
+
+-   **theme**: String that represents the color theme, default is _light_. Supports _light_ and _dark_.
+-   **chip-style**: Alternates the visual style of the component, defaults to _flat_. Supports _flat_ and _shadow_ (_transparent_ might also be available in upcoming PR). Only affects quizzes and polls, but not binary-polls.
+-   **style**: We have exposed the following CSS properties, available to be overridden through a class declaration:
+    -   **--interactive-accent-color**: Default color of the prompt background, and quizzes' option letters, defaults to blue.
+    -   **--interactive-prompt-background**: Color or gradient for the prompt background, defaults to \_var(--interactive-accent-color). Note: We recommend setting the accent color to match the prompt background color.
+    -   **--interactive-prompt-text-color**: Color of the prompt text, defaults to white. Note: We recommend changing to black/dark if the accent color is bright.
+    -   **--interactive-prompt-alignment**: Text alignment of the prompt, defaults to _initial_.
+
+Quizzes support:
+
+-   **option-{1/2/3/4}-correct**: Empty attribute that selects the correct option. All other options are assumed to be incorrect.
+
+### Components API examples
+
+Example of correctly configured binary poll:
+
+```html
+<amp-story-interactive-binary-poll
+  id="favorite-country-binary-poll"
+  endpoint="https://webstoriesinteractivity-beta.web.app/api/v1/"
+  prompt-text="What is your favorite country?"
+  option-1-text="Spain"
+  option-2-text="France"
+>
+</amp-story-interactive-binary-poll>
+```
+
+Example of correctly configured poll:
+
+```html
+<amp-story-interactive-poll
+  chip-style="shadow"
+  endpoint="https://webstoriesinteractivity-beta.web.app/api/v1/"
+  id="best-country-poll"
+  option-1-text="Spain"
+  option-2-text="France"
+  option-3-text="Uruguay"
+  option-4-text="Germany"
+>
+</amp-story-interactive-poll>
+```
+
+Example of correctly configured quiz:
+
+```html
+<amp-story-interactive-quiz
+  id="first-cup-quiz"
+  endpoint="https://webstoriesinteractivity-beta.web.app/api/v1/"
+  prompt-text="Who won the first world cup?"
+  option-1-text="Spain"
+  option-2-text="France"
+  option-3-text="Uruguay"
+  option-3-correct=""
+  option-4-text="Germany"
+>
+</amp-story-interactive-quiz>
+```
+
+Example of CSS config for shared styles:
+
+```html
+<style amp-custom>
+  .orange-interactives {
+    --interactive-accent-color: orange;
+    --interactive-prompt-background: linear-gradient(120deg, red, orange);
+  }
+</style>
+```
+
+## Multi-Page Component APIs
+
+The interactive-results component allows for rich multipage experiences, but extra configuration may be needed.
+Currently multi-page results support 2 strategies to decide on what option to show: percentage and category.
+
+All of them support the config attributes:
+
+-   **prompt-text**: Optional short text that shows before the category name. Eg: "you are a", "your spirit animal is", etc.
+-   **option-{1/2/3/4}-results-category**: Name of the category, also used to link the poll results to this option; required for all options.
+-   **option-{1/2/3/4}-image**: The image associated with this option, optional but highly encouraged.
+-   **option-{1/2/3/4}-text**: Description of the category, usually explaining what it is.
+
+All of them support the styling attributes:
+
+-   **theme**: String that represents the color theme, default is _light_. Supports _light_ and _dark_.
+-   **style**: We have exposed the following CSS properties, available to be overridden here:
+    -   **--interactive-accent-color**: Default color of the accents.
+
+### Percentage results
+
+Percentage results are linked to the percentage of quizzes answered correctly, and the threshold between different states can be specified with the attribute **option-{1/2/3/4}-results-threshold** on the results component. The threshold specified serves as an inclusive lower boundary to the option. No modifications need to be done to the quizzes in order to count towards the result, so this component should be placed after all the quizzes in a story. If the lowest threshold is not 0, it will be treated as 0. Thresholds don't need to be in order, but is usually a good idea.
+
+Eg:
+
+```html
+<amp-story-interactive-results
+  prompt-text="You are an"
+  option-1-results-category="Art Expert"
+  option-1-text="You got it all!"
+  option-1-image="expert.jpg"
+  option-1-results-threshold="90"
+  option-2-results-category="Art Enthusiast"
+  option-2-text="Keep going!"
+  option-2-image="enthusiast.jpg"
+  option-2-results-threshold="70"
+  option-3-results-category="Art Beginner"
+  option-3-text="Don't feel bad!"
+  option-3-image="beginner.jpg"
+  option-3-results-threshold="40"
+  option-4-results-category="Art Ignorant"
+  option-4-text="Give up already!"
+  option-4-image="ignorant.jpg"
+  option-4-results-threshold="0"
+>
+</amp-story-interactive-results>
+```
+
+### Category results
+
+Category results are linked to polls results, and each option in a poll can contribute towards a category by specifying **option-{1/2/3/4}-results-category** on the poll option as well as the result option. The category shown is the one that had the most poll options matching it. In case of ties, the first option with most votes is shown.
+
+Eg:
+
+```html
+<amp-story-interactive-results
+  class="orange"
+  prompt-text="You are a"
+  theme="dark"
+  option-1-results-category="Cat"
+  option-1-text="Everyone loves cats, and so do you!"
+  option-1-image="cat.png"
+  option-2-results-category="Dog"
+  option-2-text="You always have energy and love being with friends."
+  option-2-image="dog.png"
+  option-3-results-category="Bunny"
+  option-3-text="You love jumping around and having fun."
+  option-3-image="bunny.png"
+  option-4-results-category="Mouse"
+  option-4-text="Even though you're small, you're also full of curiosity."
+  option-4-image="mouse.png"
+>
+</amp-story-interactive-results>
+```
+
+Polls that want to count towards the categories specified, can do so with the attribute `option-{1/2/3/4}-results-category` matching the option on the results component. The category needs to match exactly the name of the category in the results component to count towards it.
+
+```html
+<amp-story-interactive-poll
+  chip-style="shadow"
+  endpoint="https://webstoriesinteractivity-beta.web.app/api/v1/"
+  id="favorite-food-poll"
+  prompt-text="What food do you like the most?"
+  option-1-text="Bones"
+  option-1-results-category="Dog"
+  option-2-text="Cheese"
+  option-2-results-category="Mouse"
+  option-3-text="Carrots"
+  option-3-results-category="Bunny"
+  option-4-text="Fish"
+  option-4-results-category="Cat"
+>
+</amp-story-interactive-poll>
+```
+
+## Backend API
+
+Tools are welcome to create their own backend implementations and provide the url on the **endpoint** attribute, but there will be a Google hosted backend that provides the necessary functionality to support the components out of the box (expected to be released in September). Users/creators should not be expected to set up their own backends.
+
+Meanwhile, please use:
+
+```html
+<amp-story-interactive
+  endpoint="https://webstoriesinteractivity-beta.web.app/api/v1/"
+  ...
+>
+</amp-story-interactive>
+```
+
+The endpoint will return the JSON on a GET request, useful for testing. The public endpoint will be released before the public launch, and with it, this mock endpoint will be deprecated.
+
+## Sizing
+
+The component follows the container model. The size can be changed by overriding the element's font-size, which by default will be set to `3*var(--story-page-vmin)`. The component has a `min-width: 14ems` and `max-width: 25ems`, unless it's a binary-poll or results, in which case it will have `max-width:18em`. This makes it occupy 75% of the width on portrait stories by default, but the width can be overridden with a CSS rule to any value in between the min and max. The height will depend on the font-size and number of lines on the prompt, so it cannot be specified.
+
+The demos section contains updated CSS to reflect all the mesurements in ems.
+
+### Creating pixel-perfect layouts with interactive components using amp-story-grid-layer with aspect-ratio
+
+While the component by default adapts to the screen size with the variable font-size, it doesn't stay perfectly consistent across screen sizes. It's possible to use the aspect-ratio layer in order to create layouts that will scale perfectly with different screen sizes, by setting the `font-size` in ems on the component.
+
+The width can be set either in ems or percentages of the parent width, and it will behave perfectly consistent (while keeping it between the min and max widths).
+
+<table>
+<tr>
+  <td>
+    <code>
+
+    ```
+    <amp-story-grid-layer template="fill" aspect-ratio="400:600">
+      <amp-story-interactive-quiz
+        style="font-size:0.2em">
+      </amp-story-interactive-quiz>
+    </amp-story-grid-layer>
+    ```
+
+  </code>
+  </td>
+
+  <td><img src="https://user-images.githubusercontent.com/22420856/92150262-26ab1600-eded-11ea-9b16-0e482c2f7d58.png" width="300"></td></tr>
+</table>
+
+### Resizing components without aspect-ratio
+
+By default the component will take 75% of the width, but publishers can set a `font-size` rule on the component, overriding the initial value. The `font-size` can take em, rem, px, var(--story-page-vmin) or any other units, but responsive units are recommended to have a component that scales with the screen size.
+
+The `width` can also be overriden to any value between the min and max using ems, percentages or any other unit available. It is important to consider that by default the component will take 25ems of width, which resizes with the component helping it keep the same look. If the width is specified in different units from the font-size, the component could shift the contents on different screen sizes (specially the prompt and option titles), so it's recommended to keep in mind the units used (or keep the width untouched).
+
+The `height` is always auto and will adapt to fit the prompt and options with the given font-size and width.
+
+## Demos
+
+With these components we wanted to help users create more entertaining and immersive experiences, and to facilitate that, we have created demos with good use cases of the components. Feel free to ~~steal~~ implement any ideas from these demos into your own stories (or check the source code).
+
+<table>
+  <tr>
+   <td><strong>Name that artist:</strong> How much do you know about art? This story contains 4 interactive quizzes about past and present artists showing the capabilities of quizzes. Coupled with a results component and (fake) aggregate data, displays the full experience of a multipage set of quizzes. We also added CSS timers and previous/next arrows for a responsive and fun UX.
+<br><br>
+Warning: you might learn facts about art along the way.
+<br><br>
+<a href="https://webstoriesinteractivity-beta.web.app/arts-quizzes.html">https://webstoriesinteractivity-beta.web.app/arts-quizzes.html</a>
+   </td>
+<td>
+<img src="https://user-images.githubusercontent.com/22420856/89209183-cde92300-d58b-11ea-903c-2e4148474c39.png">
+   </td>
+  </tr>
+<tr>
+<td>
+<img src="https://user-images.githubusercontent.com/22420856/89562853-9a570480-d7e8-11ea-94bc-abfd43cf15d7.png">
+   </td>
+   <td><strong>What Cute Animal Are You?</strong> Have you ever wondered what your spirit animal is? This story contains 4 interactive polls that will uncover your true animal self. Coupled with a results component and (fake) aggregate data, displays the full experience of a multipage set of polls.
+<br><br>
+<a href="https://webstoriesinteractivity-beta.web.app/animals-polls.html">https://webstoriesinteractivity-beta.web.app/animals-polls.html</a>
+   </td>
+</tr>
+<tr>
+<td>
+Codepen with HTML and CSS of a quiz, and a simple panel that could show how the component could look like on a creation tool. Useful to experiment how the component looks on different states, as well as imagine how to integrate it with creation tools.
+<br><br>
+Note: not all properties can be modified on this Codepen. When integrating, take into account other fields and variants such as prompt-text-color, prompt-background (if users want it different from the accent color, or if users want gradients), etc.
+<br><br>
+<a href="https://codepen.io/mszylkowski/pen/qBZXmQj">https://codepen.io/mszylkowski/pen/qBZXmQj</a>
+</td>
+<td>
+<img src="https://user-images.githubusercontent.com/22420856/88303287-dd878280-ccd4-11ea-8238-1dcedf4c5bee.png">
+</td>
+</tr>
+<tr>
+<td>
+<img src="https://user-images.githubusercontent.com/22420856/88310091-45da6200-ccdd-11ea-9d70-d65f54fecff1.png">
+</td>
+<td>
+Codepen with HTML and CSS of a poll, and a simple panel that could show how the component could look like on a creation tool. Useful to experiment how the component looks on different states, as well as imagine how to integrate it with creation tools.
+<br><br>
+Note: not all properties can be modified on this Codepen. When integrating, take into account other fields and variants such as prompt-text-color, prompt-background (if users want it different from the accent color, or if users want gradients), etc.
+<br><br>
+<a href="https://codepen.io/mszylkowski/pen/ZEWaBoZ">https://codepen.io/mszylkowski/pen/ZEWaBoZ</a>
+</td>
+</tr>
+<tr>
+<td>
+Codepen with HTML and CSS of a results component, and a simple panel that could show how the component could look like on a creation tool. This component is highly customizable, so we included a list of custom styles that can be implemented with the given CSS. The Codepen also can reflect the layout of results with/without an image on the category, and with/without score (for quizzes and polls results).
+<br><br>
+Note: not all properties can be modified on this Codepen. When integrating, take into account other fields and variants such as prompt-text-color, prompt-background (if users want it different from the accent color, or if users want gradients), etc.
+<br><br>
+<a href="https://codepen.io/mszylkowski/pen/abNWzdb">https://codepen.io/mszylkowski/pen/abNWzdb</a>
+</td>
+<td>
+<img src="https://user-images.githubusercontent.com/22420856/92153654-9f60a100-edf2-11ea-86ec-fe8bcd816879.png">
+</td>
+</tr>
+<tr>
+<td>
+<img src="https://user-images.githubusercontent.com/22420856/92153451-4c86e980-edf2-11ea-9327-1b5136e7e63c.png">
+</td>
+<td>
+Codepen with HTML and CSS of a binary poll, and a simple panel that could show how the component could look like on a creation tool. Useful to experiment how the component looks on different states, as well as imagine how to integrate it with creation tools. On answered state, the component reflects the option sizing that adapts to the content of the options.
+<br><br>
+Note: not all properties can be modified on this Codepen. When integrating, take into account other fields and variants such as prompt-text-color, prompt-background (if users want it different from the accent color, or if users want gradients), etc.
+<br><br>
+<a href="https://codepen.io/mszylkowski/pen/oNxogoV">https://codepen.io/mszylkowski/pen/oNxogoV</a>
+</td>
+</tr>
+</table>
+
+You can check out our explorations and mocks on https://codepen.io/collection/XjYZMq
+
+You can check the roadmap in https://github.com/ampproject/amphtml/projects/110
+
+## FAQ
+
+**Who can I contact if I have any questions?**
+
+We'll be answering on the Slack channel any questions, or feel free to email [mszylkowski@google.com](mailto:mszylkowski@google.com) for questions or feedback. We might update this FAQ with your questions, so everyone wins.
+
+**Can we branch to different pages based on the option selected?**
+
+That's not currently available or in our roadmap, but we will be listening to the feedback for feature requests.
+
+**How can we integrate the interactive components into our creation tools?**
+
+We have provided Codepens in the Demos section to check the current HTML and CSS component source codes. The actual integration of the layout and styles will depend on the tool UI, but it provides visualizations for the different styles available. Since all the components have very similar fields, the main customization options can be reused. The style rules on these codepens are not 100% matching the components to allow for live editing, but is visually identical in terms of looks.
+
+This is a starting point for creating the inputs on a creation tool (and just a guideline / thoughts on good ideas):
+
+-   _Styles_: A good starting point for customizing the style is to provide a color picker for accent color (and can additionally provide gradients for the prompt-background), and have dropdowns to select the theme=dark|light) and chip-style=flat|shadow. Dropdowns are better for future-proofing the attributes, as we may add more styles later.
+-   _Fields_: Prompt text can be a field that, if left empty, the tool doesn't specify it in the component. Options should be a list of custom fields, where users start with 2 options and can add new options (up to 4 if not a binary-poll). Each option requires a text, but more attributes such as the confetti/correct can be assigned to each option.
+-   _Results_: It's useful to guide the users through creating multi-page results. For quizzes, users can add the results component to any page, but it's a good idea to warn users that they need quizzes on previous pages to use it correctly. Users can edit the attributes in a WYSIWYG editor for the multiple states if tools provide a dropdown to change the visible option, allowing users to input one state at a time (thresholds can be specified on a sidebar for example). Poll results can also be edited in a WYSIWYG manner, but it's a good idea to first require users to create the categories in the results component, and provide a dropdown on each poll option to link it to a category of the results page. This prevents errors in matching the names of the categories across components (eg: titlecase vs lowercase, extra spaces, etc) that are hard to debug from a user standpoint.
+
+**What if I want to animate the interactive components?**
+
+We're working on cool animations, starting with the confetti explosions. For entering animations, check out [amp-animation](https://amp.dev/documentation/examples/visual-effects/amp_story_animations/#introduction).
+
+**Is it possible to get the history of an interactive aggregate data from the backend API?**
+
+In order to show story creators the history, tools can set up backends that query the endpoint once an hour/day (without specifying a client ID). The API only supports retrieving the current status, and we don't plan to support other advanced features, but check out the analytics extensions for added functionality.
+
+**Is the endpoint attribute mandatory?**
+
+We have seen in tests that interactive components are more engaging when users can see the mass results from everyone, that's why we require an endpoint attribute. However, we will provide a stable url to plug and play (you can use the testing endpoint in Backend API for now). However, the components will still work if users have slow connections or disconnect before fetching the results.
+
+**Why category results use polls and percentage results use quizzes?**
+
+Category results are subjective, meaning that all the options are equally valid; that maps perfectly with the subjectivity of polls. Percentage results require answers to be correct or wrong, so quizzes are the components that have objective questions and answers.
+
+**How can I specify all the custom style attributes or a component?**
+
+By creating a class and assigning it to the component/components, you can override as many of the CSS variables provided here as necessary.
+
+**Why does x feature of the component not work as I expected?**
+
+We're in the process of finishing the validation (as well as other aspects of the component), but we're giving developers the chance to contribute in the form of feedback before releasing the component to the rest of the community. While these components are not 100% bulletproof, we tried to consider every use-case and give options to users. We will be more actively listening for feedback in this early stage of development, in order to catch any last-minute bug. Also check the browser is receiving the nightly version of AMP (specially in the first days of the beta preview)
+
+**What's next for interactive components?**
+
+We have to polish animations, behaviors and write the public documentation before releasing publicly. After the public release, we plan to add more interactive components such as image polls and quizzes, sliders, and text fields. We also plan to release additional styles (eg: we just merged the transparent style). As always, the future will be shaped with the feedback we receive.
diff --git a/extensions/amp-story-interactive/amp-story-interactive.md b/extensions/amp-story-interactive/amp-story-interactive.md
new file mode 100644
index 0000000000000..afbf04c029fda
--- /dev/null
+++ b/extensions/amp-story-interactive/amp-story-interactive.md
@@ -0,0 +1,351 @@
+---
+$category@: dynamic-content
+formats:
+  - stories
+teaser:
+  text: A rich set of interactive experiences for stories, including quizzes, polls and results.
+draft:
+  - false
+tags:
+  - dynamic-content
+  - social
+author: mszylkowski
+---
+
+<!---
+Copyright 2020 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.
+-->
+
+The `amp-story-interactive` component provides a set of experiences, such as quizzes or polls, in [Web Stories](https://amp.dev/documentation/guides-and-tutorials/start/create_successful_stories/?format=stories).
+
+<div layout="container" width="3" height="2">
+<div style="width:32%;display:inline-block"><amp-img src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story-interactive/img/quiz-art.png" layout="responsive" width="200" height="350"/></div>
+<div style="width:32%;display:inline-block"><amp-img src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story-interactive/img/animal-poll.png" layout="responsive" width="200" height="350"/></div>
+<div style="width:32%;display:inline-block"><amp-img src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story-interactive/img/results-art.png" layout="responsive" width="200" height="350"/></div>
+</div>
+
+## Usage
+
+The `amp-story-interactive` component encompasses a set of interactive experiences. Specify an interactive experience by defining one of the elements below. For best results, only use one element per [`amp-story-page`](https://amp.dev/documentation/components/amp-story-page/?format=stories).
+
+Most elements require a backend endpoint that will store aggregate data for each interactive, as well as persist the selected option for a user across sessions. Elements will fetch the percentage of votes for each option as well as the user selection (if any) from this endpoint, and display it with the options after the user has selected one.
+
+To see all the components in action, check out the [example story](https://amp.dev/documentation/examples/components/amp-story-interactive-poll/story#page=title-components).
+
+### amp-story-interactive-binary-poll
+
+The `amp-story-interactive-binary-poll` element provides a two option voting user interface. Users may select one of two valid options. When selected, the highlighted option fills the container and displays the total percentage of votes.
+
+Does not support pairing with `amp-story-interactive-results`, and can optionally have a prompt.
+
+<amp-img alt="An example of a binary poll: 'Like pizza?' with a button for 'Yes' and 'No'" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story-interactive/img/binary-poll-raw.png" layout="intrinsic" width="400" height="230">
+
+```html
+<amp-story-interactive-binary-poll
+  id="pizza-binary-poll"
+  endpoint="https://backend.com/v1/interactives"
+  prompt-text="Like Pizza?"
+  option-1-text="Yes"
+  option-1-confetti="🍕"
+  option-2-text="No"
+  option-2-confetti="🤢"
+>
+</amp-story-interactive-binary-poll>
+```
+
+### amp-story-interactive-poll
+
+The `amp-story-interactive-poll` element provides a voting experience with 2-4 options displayed vertically, where all options are valid. When selected, each option displays the total percentage of votes.
+
+Display different categories based on user poll answers by pairing `amp-story-interactive-poll` with `amp-story-interactive-results`. Add a prompt for extra context.
+
+<amp-img alt="An example of an interactive poll: 'Pick a season' with options for each season, and their respective percentage votes" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story-interactive/img/poll-raw.png" layout="intrinsic" width="400" height="450">
+
+[sourcecode:html]
+<amp-story-interactive-poll
+    id="season-poll"
+    theme="dark"
+    endpoint="https://backend.com/v1/interactives"
+    prompt-text="Pick a season"
+    option-1-text="Spring" option-1-confetti="🌼"
+    option-2-text="Summer" option-2-confetti="☀️"
+    option-3-text="Fall" option-3-confetti="🍁"
+    option-4-text="Winter" option-4-confetti="☃️">
+</amp-story-interactive-poll>
+[/sourcecode]
+
+### amp-story-interactive-quiz
+
+The `amp-story-interactive-quiz` element provides a guessing experience with 2-4 options, one of which is correct. It displays the voting percentages after the user makes a selection. The user selection is green if correct and red if incorrect.
+
+Display different categories based on percentage of correct user answers by pairing `amp-story-interactive-quiz` with `amp-story-interactive-results`. Add a prompt for extra context.
+
+<amp-img alt="Example of an interactive quiz: 'Who was the artist that created the famous painting The Last Supper?', with various options; the correct answer, 'Leonardo da Vinci', has a green tick next to it, compared to the wrong answers which have a red cross; all answers show a percentage of how many people picked that particular answer" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story-interactive/img/quiz-raw.png" layout="intrinsic" width="400" height="450">
+
+[sourcecode:html]
+<amp-story-interactive-quiz
+    id="arts-quiz"
+    endpoint="https://backend.com/v1/interactives"
+    prompt-text='Who was the artist that created the famous painting "The Last Supper"?'
+    option-1-text="Michelangelo"
+    option-2-text="Leonardo da Vinci" option-2-correct option-2-confetti="🎨"
+    option-3-text="Rahael"
+    option-4-text="Sandro Boticelli">
+</amp-story-interactive-quiz>
+[/sourcecode]
+
+### amp-story-interactive-results
+
+The `amp-story-interactive-result` element displays a customized state defined by the user's selection from previous polls or quizzes. This element requires use of polls or quizzes from previous pages to calculate an answer-based state. Each result category may include an image, title and description to display to the user.
+
+Each category specifies its content `option-{1/2/3/4}-{text/image/results-category}` attributes, where `-results-category` refers to the name of the category, `-image` refers to the image that will be displayed if that category is selected, and `-text` refers to the description.
+
+Results can feed its state from quizzes if all categories also specify `option-{1/2/3/4}-results-threshold`. If no categories have thresholds, the state will count the `option-{1/2/3/4}-results-category` from options selected in polls.
+
+<amp-img alt="Example of a result sheet: 'You are a Dog. You always have energery...'" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story-interactive/img/results-raw.png" layout="intrinsic" width="400" height="500">
+
+[sourcecode:html]
+<amp-story-interactive-results
+    theme="dark"
+    prompt-text="You are a"
+    option-1-results-category="Dog" option-1-image="dog.png"
+    option-1-text="You always have energy and love being with friends. Outdoors is your favorite place"
+    option-2-results-category="Cat" option-2-image="cat.png"
+    option-2-text="Cats are great animals for WFH">
+</amp-story-interactive-results>
+[/sourcecode]
+
+### Store and display user selection
+
+All selectable interactive elements (`amp-story-interactive-binary-poll`, `amp-story-interactive-poll`, `amp-story-interactive-quiz`) show the percentage of users that selected each option. The backend specified with the `endpoint` attribute will store the aggregate data for the interaction following the API described below.
+To fetch the data for an interactive element, the necessary fields are:
+
+-   <div id="interactiveId"></div> `interactiveId`: the `base64encode(CANONICAL_URL) + "+" + element.id`
+-   `interactiveType`: enum from [amp-story-interactive-abstract:48](https://github.com/ampproject/amphtml/blob/3a86226fe428ce72adb67cffe2dd2f1fae278a35/extensions/amp-story-interactive/1.0/amp-story-interactive-abstract.js#L48)
+-   `endpoint`: the attribute `element.getAttribute("endpoint")`
+-   `ampId`: client ID that identifies the session, optional
+
+Then, the requests and responses are:
+
+[sourcecode:js]
+// Getting the votes for an interactive.
+// If no client param, selected will always be false
+// (can be used to display the results on a dashboard).
+
+GET_URL = "{endpoint}/{interactiveId}?type={interactiveType}&client={ampId}"
+
+Response: {
+"options": [
+{"index": 0, "selected": false, "count": 0},
+{"index": 1, "selected": false, "count": 5},
+{"index": 2, "selected": false, "count": 7},
+{"index": 3, "selected": false, "count": 2}
+]
+}
+[/sourcecode]
+
+[sourcecode:js]
+// Posting the vote for an interactive. Client param is required.
+
+POST_URL = "{endpoint}/{interactiveId}:vote?type={interactiveType}&client={ampId}"
+POST_BODY = {'option_selected': 1}
+
+Response: No response necessary
+[/sourcecode]
+
+Backends need to be specified on the necessary components (binary-poll, poll, quiz), and can be deployed by publishers, tools or others.
+
+## Attributes
+
+The interactive experience elements from `amp-story-interactive` share an API language for customizing options.
+
+### id (required for binary-poll, poll, quiz)
+
+Element ID that identifies the interactive component in the story. Used to compose the [`interactiveId`](#interactiveId) sent to the backend. Should be unique for each component in the story.
+
+### endpoint (required for binary-poll, poll, quiz)
+
+Complete URL of backend. Stores interactive element votes.
+
+### theme (optional)
+
+Controls the color of the chips and text. Can be `light` (default), `dark`.
+
+### chip-style (optional for poll, quiz, results)
+
+Controls the style of the component. Can be `flat` (default), `shadow`, or `transparent`.
+Results and binary-poll elements don't support shadow.
+
+### prompt-text (optional)
+
+Adds a prompt to the top of the component. Use `prompt-text` to write the poll/quiz question, or as a prefix to the category in the `amp-story-interactive-result` element.
+
+### prompt-size (optional for binary-poll, poll, quiz)
+
+Controls the `font-size` of prompt text. Can be `small`, `medium` (default), `large`. Large prompts will hold up to 3 lines of text, other sizes will hold up to 4 lines of text.
+
+This attribute does not apply styling to `amp-story-interactive-result` category prefix text.
+
+### option-{1/2/3/4}-text (required)
+
+String that represents a numbered option. Binary polls require 2 options. Polls and quizzes may include between 2 and 4 options.
+
+The `amp-story-interactive-result` element uses this string value as category description.
+
+### option-{1/2/3/4}-confetti (optional for binary-poll, poll, quiz)
+
+Emoji that bursts in an explosion animation when selecting an options. On quizzes, only the correct option should have a confetti.
+
+### option-{1/2/3/4}-results-category (optional for poll, required for results)
+
+The name of the category on the `amp-story-interactive-results` element. Shows in large text after the `prompt-text` and before the category description. It displays category with the most options selected in polls from the entire story if `option-{1/2/3/4}-results-threshold` is not defined.
+
+On polls it links the options to the result with that name as mentioned above. The string has to match perfectly for the options to link.
+
+Example:
+
+[sourcecode:html]
+<amp-story-interactive-poll
+    prompt-text="What's your favorite food"
+    endpoint="https://backend.com/v1/interactives"
+    option-1-results-category="Bunny" option-1-text="Carrots"
+    option-2-results-category="Dog" option-2-text="Bones"
+    option-3-results-category="Cat" option-3-text="Fish">
+</amp-story-interactive-poll>
+
+<!-- Each option in the poll above will count towards a category in the result's state, linked using the `option-{1/2/3/4}-results-category` attribute. Stories should have many polls with linked categories, but in this example we only show one. -->
+
+<amp-story-interactive-results
+    prompt-text="You are a"
+    option-1-results-category="Dog" option-1-image="dog.png"
+    option-2-results-category="Cat" option-2-image="cat.png"
+    option-3-results-category="Bunny" option-3-image="bunny.png">
+</amp-story-interactive-results>
+[/sourcecode]
+
+### option-{1/2/3/4}-results-threshold (optional for results)
+
+Determines the lower boundary for the `amp-story-interactive-results` category when linked to quiz elements. The component calculates a score from a percentage (between 0 and 100) of questions answered correctly. It displays the category that is lower or equal to the score. If all thresholds are higher than the score, it displays the category with the lowest score. If a threshold is present for any option, all other options also need a threshold.
+
+Example:
+
+[sourcecode:html]
+
+<!-- State is "beginner" if less than 80% of the quizzes were correct, state is "expert" otherwise. -->
+
+<amp-story-interactive-results
+    prompt-text="Your level is"
+    option-1-results-category="Beginner" option-1-image="beginner.png"
+    option-1-results-threshold="0"
+    option-2-results-category="Expert" option-2-image="expert.png"
+    option-2-results-threshold="80">
+</amp-story-interactive-results>
+[/sourcecode]
+
+## Styling
+
+View all theming options in action in the [example story](https://amp.dev/documentation/examples/components/amp-story-interactive-poll/story#page=title-themes).
+
+[tip type="read-on"]
+View and play with `amp-story-interactive` elements and styles in this [Codepen collection](https://codepen.io/collection/DEGRLE)!
+[/tip]
+
+### CSS Variables
+
+Style all `amp-story-interactive` elements with CSS variables and attributes. Override default variables by assigning a class to the element.
+
+-   `--interactive-accent-color`: The accent color of the component.
+-   `--interactive-prompt-text-color`: Color of the top text where applicable (elements with prompts or results with thresholds).
+-   `--interactive-prompt-background`: Background of the top text where applicable (elements with prompts or results with thresholds but no images). Can be a color (including transparent) or CSS gradient.
+-   `--interactive-prompt-alignment`: Alignment of the prompt where applicable (elements with prompts). Will default to center if the component has the transparent style or if it's a binary poll, otherwise it will default to initial.
+
+### Themes
+
+The `theme` attribute controls the chip color and text color of the component. Can be `light` (default) or `dark`.
+The `chip-style` attribute controls the style details of the component. Can be `flat` (default), `shadow` or `transparent`.
+
+### Sizing
+
+All `amp-story-interactive` elements use the [container](https://amp.dev/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated/#container) layout, so the width can be manipulated but the height is automatically computed. You may override the `font-size` on the element to any value in `rem`s, `em`s, or other units, and the element will scale accordingly. You may override the width to any value between the max and min widths (explained below) using CSS to update the element's aspect ratio.
+
+The default `font-size` is `3*var(--story-page-vmin)` so that elements take 75% of the width of portrait stories, independently of the screen size.
+
+The `amp-story-interactive-poll` and `amp-story-interactive-quiz` elements have a `min-width: 14em` and `max-width: 25em`. The `amp-story-interactive-binary-poll` and `amp-story-interactive-results` have a `min-width: 14em` and `max-width: 18em`.
+
+#### Sizing within amp-story-grid-layer[aspect-ratio]
+
+It's possible to use the [aspect-ratio](https://amp.dev/documentation/components/amp-story-grid-layer/#aspect-ratio-[optional]) layer in order to create layouts that will scale perfectly with different screen sizes, by setting the font-size in `em`s or `%` on the component. Users should not use pixels and they don't scale accordingly with different screen sizes.
+
+The width can be set either in `em`s or percentages of the parent width, and it will behave perfectly consistent (while keeping it between the min and max widths).
+
+[sourcecode:html]
+<amp-story-grid-layer template="fill" aspect-ratio="400:600">
+
+  <div class="center-quiz">
+    <amp-story-interactive-quiz
+      style="font-size:0.2em"
+      ...>
+    </amp-story-interactive-quiz>
+  </div>
+</amp-story-grid-layer>
+[/sourcecode]
+
+### Adaptive font sizes for options
+
+Polls and binary polls can adapt their font-sizes according to the content types. Depending on the number of lines that they have for the option text, they can increase or decrease the font size. The font-size will default to the largest possible that accommodates all the texts measured. For instance, if one of the options requires a small font-size (because it has a lot of text) but the other options don't, all the involved text elements will use a small font-size. Note that this only optimizes the content of the options to fit better, but they don't change the inherent size of the elements.
+
+Binary polls only on post-selection will show different font-sizes for the options. They will hold a large font-size if all the options are either emojis or have short texts (length <= 3). The element will use medium font-size if at least one of the options are longer than 3 characters but both can be displayed in one line; and small font-size if at least one option has two lines.
+
+Polls will also adapt the font-size of the options depending on the content. If all the options fit in one line, they will use a large font-size. If any of the options require 2 lines, all the options will reduce in size to accommodate the option text in the chip.
+
+For a live demo, check out the [binary-poll](https://codepen.io/mszylkowski/pen/oNxogoV) and [poll](https://codepen.io/mszylkowski/pen/ZEWaBoZ) Codepens, and change the option texts (be sure to select "Answered" on the binary-poll demo to see the size change).
+
+### Animations
+
+Enhance interactivity by adding an animation to the element when entering the page or when transitioning from option selection to data display. Pick from the [`amp-story` animations](https://amp.dev/documentation/components/amp-story/?format=stories#animation-attributes) and add the `animate-in` attribute to desired elements.
+
+## Analytics
+
+The `amp-story-interactive` component elements support [`amp-analytics`](https://amp.dev/documentation/components/amp-analytics/). Report a selected option by adding the `story-interactive` event to your configuration:
+
+-   `storyInteractiveId`: the element id
+-   `storyInteractiveResponse`: the option selected
+-   `storyInteractiveType`: the enum InteractiveType
+
+```html
+<amp-analytics id="my-analytics">
+  <script type="application/json">
+    {
+      "requests": {
+        "interactive": "https://example.com/interactive?id=${storyInteractiveId}&response=${storyInteractiveResponse}"
+      },
+      "triggers": {
+        "interactiveSelected": {
+          "on": "story-interactive",
+          "request": "interactive"
+        }
+      }
+    }
+  </script>
+</amp-analytics>
+```
+
+## Accessibility considerations
+
+Currently, this component lacks keyboard and screen reader accessibility.
+
+## Validation
+
+See validation rules in [amp-story-interactive validator](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story-interactive/validator-amp-story-interactive.protoascii).
diff --git a/extensions/amp-story-interactive/img/animal-poll.png b/extensions/amp-story-interactive/img/animal-poll.png
new file mode 100644
index 0000000000000..7091985ca24d3
Binary files /dev/null and b/extensions/amp-story-interactive/img/animal-poll.png differ
diff --git a/extensions/amp-story-interactive/img/binary-poll-raw.png b/extensions/amp-story-interactive/img/binary-poll-raw.png
new file mode 100644
index 0000000000000..82c19f964582c
Binary files /dev/null and b/extensions/amp-story-interactive/img/binary-poll-raw.png differ
diff --git a/extensions/amp-story-interactive/img/poll-raw.png b/extensions/amp-story-interactive/img/poll-raw.png
new file mode 100644
index 0000000000000..d0607e36cac0a
Binary files /dev/null and b/extensions/amp-story-interactive/img/poll-raw.png differ
diff --git a/extensions/amp-story-interactive/img/quiz-art.png b/extensions/amp-story-interactive/img/quiz-art.png
new file mode 100644
index 0000000000000..91eef8d10887e
Binary files /dev/null and b/extensions/amp-story-interactive/img/quiz-art.png differ
diff --git a/extensions/amp-story-interactive/img/quiz-raw.png b/extensions/amp-story-interactive/img/quiz-raw.png
new file mode 100644
index 0000000000000..9977ae1f84fc6
Binary files /dev/null and b/extensions/amp-story-interactive/img/quiz-raw.png differ
diff --git a/extensions/amp-story-interactive/img/results-art.png b/extensions/amp-story-interactive/img/results-art.png
new file mode 100644
index 0000000000000..15e8366a77288
Binary files /dev/null and b/extensions/amp-story-interactive/img/results-art.png differ
diff --git a/extensions/amp-story-interactive/img/results-raw.png b/extensions/amp-story-interactive/img/results-raw.png
new file mode 100644
index 0000000000000..4a8c06207122b
Binary files /dev/null and b/extensions/amp-story-interactive/img/results-raw.png differ
diff --git a/extensions/amp-story-interactive/validator-amp-story-interactive.protoascii b/extensions/amp-story-interactive/validator-amp-story-interactive.protoascii
new file mode 100644
index 0000000000000..7636182af3899
--- /dev/null
+++ b/extensions/amp-story-interactive/validator-amp-story-interactive.protoascii
@@ -0,0 +1,283 @@
+#
+# Copyright 2020 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.
+#
+
+tags: {  # amp-story-interactive
+  html_format: AMP
+  tag_name: "SCRIPT"
+  extension_spec: {
+    name: "amp-story-interactive"
+    version: "0.1"
+    version: "latest"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # <amp-story-interactive-quiz>
+  html_format: AMP
+  tag_name: "AMP-STORY-INTERACTIVE-QUIZ"
+  requires_extension: "amp-story-interactive"
+  mandatory_ancestor: "AMP-STORY-GRID-LAYER"
+  attr_lists: "interactive-options-text-attrs"
+  attr_lists: "interactive-options-confetti-attrs"
+  attr_lists: "interactive-shared-configs-attrs"
+  attrs: {
+    name: "option-1-correct"
+    mandatory_oneof: "['option-1-correct', 'option-2-correct', 'option-3-correct', 'option-4-correct']"
+  }
+  attrs: {
+    name: "option-2-correct"
+    mandatory_oneof: "['option-1-correct', 'option-2-correct', 'option-3-correct', 'option-4-correct']"
+  }
+  attrs: {
+    name: "option-3-correct"
+    mandatory_oneof: "['option-1-correct', 'option-2-correct', 'option-3-correct', 'option-4-correct']"
+    trigger: {
+      also_requires_attr: "option-3-text"
+    }
+  }
+  attrs: {
+    name: "option-4-correct"
+    mandatory_oneof: "['option-1-correct', 'option-2-correct', 'option-3-correct', 'option-4-correct']"
+    trigger: {
+      also_requires_attr: "option-4-text"
+    }
+  }
+}
+tags: {  # <amp-story-interactive-poll>
+  html_format: AMP
+  tag_name: "AMP-STORY-INTERACTIVE-POLL"
+  requires_extension: "amp-story-interactive"
+  mandatory_ancestor: "AMP-STORY-GRID-LAYER"
+  attr_lists: "interactive-options-text-attrs"
+  attr_lists: "interactive-options-confetti-attrs"
+  attr_lists: "interactive-options-results-category-attrs"
+  attr_lists: "interactive-shared-configs-attrs"
+}
+tags: {  # <amp-story-interactive-binary-poll>
+  html_format: AMP
+  tag_name: "AMP-STORY-INTERACTIVE-BINARY-POLL"
+  requires_extension: "amp-story-interactive"
+  mandatory_ancestor: "AMP-STORY-GRID-LAYER"
+  attr_lists: "interactive-shared-configs-attrs"
+  attrs: {
+    name: "option-1-text"
+    mandatory: true
+  }
+  attrs: {
+    name: "option-2-text"
+    mandatory: true
+  }
+  attrs: {
+    name: "option-1-confetti"
+  }
+  attrs: {
+    name: "option-2-confetti"
+  }
+}
+tags: {  # <amp-story-interactive-results>
+  html_format: AMP
+  tag_name: "AMP-STORY-INTERACTIVE-RESULTS"
+  requires_extension: "amp-story-interactive"
+  mandatory_ancestor: "AMP-STORY-GRID-LAYER"
+  attrs: {
+    name: "option-1-results-category"
+    mandatory: true
+  }
+  attrs: {
+    name: "option-2-results-category"
+    mandatory: true
+  }
+  attrs: {
+    name: "option-3-results-category"
+  }
+  attrs: {
+    name: "option-4-results-category"
+    trigger: {
+      also_requires_attr: "option-3-results-category"
+    }
+  }
+  attrs: {
+    name: "option-1-image"
+  }
+  attrs: {
+    name: "option-2-image"
+  }
+  attrs: {
+    name: "option-3-image"
+    trigger: {
+      also_requires_attr: "option-3-results-category"
+    }
+  }
+  attrs: {
+    name: "option-4-image"
+    trigger: {
+      also_requires_attr: "option-4-results-category"
+    }
+  }
+  attrs: {
+    name: "option-1-text"
+  }
+  attrs: {
+    name: "option-2-text"
+  }
+  attrs: {
+    name: "option-3-text"
+    trigger: {
+      also_requires_attr: "option-3-results-category"
+    }
+  }
+  attrs: {
+    name: "option-4-text"
+    trigger: {
+      also_requires_attr: "option-4-results-category"
+    }
+  }
+  attrs: {
+    name: "option-1-results-threshold"
+    value_regex: "\\d+(\\.\\d+)?"
+  }
+  attrs: {
+    name: "option-2-results-threshold"
+    value_regex: "\\d+(\\.\\d+)?"
+  }
+  attrs: {
+    name: "option-3-results-threshold"
+    value_regex: "\\d+(\\.\\d+)?"
+    trigger: {
+      also_requires_attr: "option-3-results-category"
+    }
+  }
+  attrs: {
+    name: "option-4-results-threshold"
+    value_regex: "\\d+(\\.\\d+)?"
+    trigger: {
+      also_requires_attr: "option-4-results-category"
+    }
+  }
+  attrs: {
+    name: "prompt-text"
+  }
+  attrs: {
+    name: "theme"
+    value: "light"
+    value: "dark"
+  }
+  attrs: {
+    name: "chip-style"
+    value: "flat"
+    value: "transparent"
+  }
+}
+
+attr_lists: {
+  name: "interactive-shared-configs-attrs"
+  attrs: {
+    name: "id"
+    mandatory: true
+  }
+  attrs: {
+    name: "prompt-text"
+  }
+  attrs: {
+    name: "endpoint"
+    mandatory: true
+    value_url: {
+      protocol: "https"
+      allow_relative: false
+      allow_empty: false
+    }
+  }
+  attrs: {
+    name: "theme"
+    value: "light"
+    value: "dark"
+  }
+  attrs: {
+    name: "chip-style"
+    value: "shadow"
+    value: "flat"
+    value: "transparent"
+  }
+  attrs: {
+    name: "prompt-size"
+    value: "small"
+    value: "medium"
+    value: "large"
+  }
+}
+attr_lists: {
+  name: "interactive-options-text-attrs"
+  attrs: {
+    name: "option-1-text"
+    mandatory: true
+  }
+  attrs: {
+    name: "option-2-text"
+    mandatory: true
+  }
+  attrs: {
+    name: "option-3-text"
+  }
+  attrs: {
+    name: "option-4-text"
+    trigger: {
+      also_requires_attr: "option-3-text"
+    }
+  }
+}
+attr_lists: {
+  name: "interactive-options-confetti-attrs"
+  attrs: {
+    name: "option-1-confetti"
+  }
+  attrs: {
+    name: "option-2-confetti"
+  }
+  attrs: {
+    name: "option-3-confetti"
+  }
+  attrs: {
+    name: "option-4-confetti"
+  }
+}
+attr_lists: {
+  name: "interactive-options-results-category-attrs"
+  attrs: {
+    name: "option-1-results-category"
+    trigger: {
+      also_requires_attr: "option-2-results-category"
+    }
+  }
+  attrs: {
+    name: "option-2-results-category"
+    trigger: {
+      also_requires_attr: "option-1-results-category"
+    }
+  }
+  attrs: {
+    name: "option-3-results-category"
+    trigger: {
+      also_requires_attr: "option-2-results-category"
+      also_requires_attr: "option-3-text"
+    }
+  }
+  attrs: {
+    name: "option-4-results-category"
+    trigger: {
+      also_requires_attr: "option-3-results-category"
+      also_requires_attr: "option-4-text"
+    }
+  }
+}
diff --git a/extensions/amp-story-panning-media/0.1/amp-story-panning-media.css b/extensions/amp-story-panning-media/0.1/amp-story-panning-media.css
new file mode 100644
index 0000000000000..a0c2efb842cce
--- /dev/null
+++ b/extensions/amp-story-panning-media/0.1/amp-story-panning-media.css
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2021 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.
+ */
+
+amp-story-panning-media {
+  /* Child img gets 100% height. This centers the image. */
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  /*
+  This gives a 3d reference point for the translate3d z value on the child.
+  A reference point is necessary for the effect of 3d space.
+  The calculation to convert scale to zoom is:
+  perspective * (zoom - 1) / zoom
+  1 is used here to simplify the calculation in updateTransform_ to be:
+  (zoom - 1) / zoom
+  */
+  perspective: 1px !important;
+}
+
+amp-story-panning-media amp-img {
+backface-visibility: hidden !important;
+}
+
+.i-amphtml-story-grid-template-fill amp-story-panning-media amp-img img {
+  /* override for layout=fill. This centers the image without clipping it */
+  position: relative !important;
+  display: block !important;
+  height: 100% !important;
+}
diff --git a/extensions/amp-story-panning-media/0.1/amp-story-panning-media.js b/extensions/amp-story-panning-media/0.1/amp-story-panning-media.js
new file mode 100644
index 0000000000000..fff180e6fb4d7
--- /dev/null
+++ b/extensions/amp-story-panning-media/0.1/amp-story-panning-media.js
@@ -0,0 +1,364 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  Action,
+  StateProperty,
+  UIType,
+} from '../../../extensions/amp-story/1.0/amp-story-store-service';
+import {CSS} from '../../../build/amp-story-panning-media-0.1.css';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
+import {Layout} from '../../../src/layout';
+import {Services} from '../../../src/services';
+import {closest, whenUpgradedToCustomElement} from '../../../src/dom';
+import {deepEquals} from '../../../src/core/types/object/json';
+import {dev, user} from '../../../src/log';
+import {prefersReducedMotion} from '../../../src/utils/media-query-props';
+import {setImportantStyles} from '../../../src/style';
+
+/** @const {string} */
+const TAG = 'AMP_STORY_PANNING_MEDIA';
+
+/** @const {string}  */
+const DURATION_MS = 1000;
+
+/** @const {number}  */
+const DISTANCE_TO_CENTER_EDGE_PERCENT = 50;
+
+/**
+ * A small number used to calculate zooming out to 0.
+ * @const {number}
+ */
+const MIN_INTEGER = -100000;
+
+/**
+ * Position values used to animate between components.
+ * x: (optional) Percentage between [-50; 50]
+ * y: (optional) Percentage between [-50; 50]
+ * zoom: 0 is not visible. 1 fills the viewport vertically.
+ * @typedef {{
+ *   x: float,
+ *   y: float,
+ *   zoom: float,
+ * }}
+ */
+export let panningMediaPositionDef;
+
+/**
+ * Max distances to keep image in viewport.
+ * horizontal: Percentage between [-50; 50]
+ * vertical: Percentage between [-50; 50]
+ * @typedef {{
+ *   horizontal: float,
+ *   vertical: float,
+ * }}
+ */
+export let panningMediaMaxBoundsPercentDef;
+
+export class AmpStoryPanningMedia extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {?Element} */
+    this.element_ = element;
+
+    /** @private {?Element} The element that is transitioned. */
+    this.ampImgEl_ = null;
+
+    /** @private {?panningMediaPositionDef} Position to animate to. */
+    this.animateTo_ = {};
+
+    /** @private {?{width: number, height: number}} */
+    this.pageSize_ = null;
+
+    /** @private {?panningMediaPositionDef} Current animation state. */
+    this.animationState_ = {};
+
+    /** @private {?../../../extensions/amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */
+    this.storeService_ = null;
+
+    /** @private {?string} */
+    this.pageId_ = null;
+
+    /** @private {boolean} */
+    this.isOnActivePage_ = false;
+
+    /** @private {?number} Distance from active page. */
+    this.pageDistance_ = null;
+
+    /** @private {number} Max distance from active page to animate. Either 0 or 1. */
+    this.maxDistanceToAnimate_ = 1;
+
+    /** @private {?string} */
+    this.groupId_ = null;
+  }
+
+  /** @override */
+  buildCallback() {
+    return Services.storyStoreServiceForOrNull(this.win).then(
+      (storeService) => {
+        this.storeService_ = storeService;
+      }
+    );
+  }
+
+  /** @override */
+  layoutCallback() {
+    this.ampImgEl_ = dev().assertElement(
+      this.element_.querySelector('amp-img')
+    );
+
+    this.groupId_ =
+      this.element_.getAttribute('group-id') ||
+      this.ampImgEl_.getAttribute('src');
+
+    this.initializeListeners_();
+
+    return whenUpgradedToCustomElement(this.ampImgEl_)
+      .then(() => this.ampImgEl_.signals().whenSignal(CommonSignals.LOAD_END))
+      .then(() => {
+        const imgEl = dev().assertElement(this.element_.querySelector('img'));
+        // Remove layout="fill" classes so image is not clipped.
+        imgEl.classList = '';
+        // Centers the amp-img horizontally. The image does not load if this is done in CSS.
+        // TODO(#31515): Handle base zoom of aspect ratio wider than image
+        setImportantStyles(this.ampImgEl_, {
+          left: 'auto',
+          right: 'auto',
+        });
+      })
+      .catch(() => user().error(TAG, 'Failed to load the amp-img.'));
+  }
+
+  /** @private */
+  initializeListeners_() {
+    this.storeService_.subscribe(
+      StateProperty.PAGE_SIZE,
+      (pageSize) => {
+        this.pageSize_ = pageSize;
+        this.setAnimateTo_();
+        this.animate_();
+      },
+      true /** callToInitialize */
+    );
+    this.storeService_.subscribe(
+      StateProperty.CURRENT_PAGE_ID,
+      (currPageId) => {
+        this.isOnActivePage_ = currPageId === this.getPageId_();
+        this.animate_();
+      },
+      true /** callToInitialize */
+    );
+    this.storeService_.subscribe(
+      StateProperty.PANNING_MEDIA_STATE,
+      (panningMediaState) => this.onPanningMediaStateChange_(panningMediaState),
+      true /** callToInitialize */
+    );
+    this.storeService_.subscribe(
+      StateProperty.UI_STATE,
+      (uiState) => {
+        this.maxDistanceToAnimate_ = uiState === UIType.DESKTOP_PANELS ? 0 : 1;
+      },
+      true /* callToInitialize */
+    );
+    // Mutation observer for distance attribute
+    const config = {attributes: true, attributeFilter: ['distance']};
+    const callback = (mutationsList) => {
+      this.pageDistance_ = parseInt(
+        mutationsList[0].target.getAttribute('distance'),
+        10
+      );
+    };
+    const observer = new MutationObserver(callback);
+    this.getPage_() && observer.observe(this.getPage_(), config);
+  }
+
+  /** @private */
+  setAnimateTo_() {
+    const x = parseFloat(this.element_.getAttribute('x') || 0);
+    const y = parseFloat(this.element_.getAttribute('y') || 0);
+    const zoom = parseFloat(this.element_.getAttribute('zoom') || 1);
+    const lockBounds = this.element_.hasAttribute('lock-bounds');
+
+    if (lockBounds) {
+      // Zoom must be set to calculate maxBounds.
+      this.animateTo_.zoom = zoom < 1 ? 1 : zoom;
+      const {horizontal, vertical} = this.getMaxBounds_();
+      this.animateTo_.x = Math.max(-horizontal, Math.min(x, horizontal));
+      this.animateTo_.y = Math.max(-vertical, Math.min(y, vertical));
+    } else {
+      this.animateTo_ = {x, y, zoom};
+    }
+  }
+
+  /**
+   * Calculates max distances to keep image in viewport.
+   * @private
+   * @return {panningMediaMaxBoundsPercentDef}
+   */
+  getMaxBounds_() {
+    // Calculations to clamp image to edge of container.
+    const {height: containerHeight, width: containerWidth} = this.pageSize_;
+
+    const ampImgWidth = this.ampImgEl_.getAttribute('width');
+    const ampImgHeight = this.ampImgEl_.getAttribute('height');
+    if (!ampImgWidth || !ampImgHeight) {
+      user().error(
+        TAG,
+        '"lock-bounds" requires "width" and "height" to be set on the amp-img child.'
+      );
+    }
+    // TODO(#31515): When aspect ratio is portrait, containerWidth will be used for this.
+    const percentScaledToFitViewport = containerHeight / ampImgHeight;
+    const scaledImageWidth = percentScaledToFitViewport * ampImgWidth;
+    const scaledImageHeight = percentScaledToFitViewport * ampImgHeight;
+
+    const widthFraction =
+      1 - containerWidth / (scaledImageWidth * this.animateTo_.zoom);
+    const heightFraction =
+      1 - containerHeight / (scaledImageHeight * this.animateTo_.zoom);
+
+    return {
+      horizontal: DISTANCE_TO_CENTER_EDGE_PERCENT * widthFraction,
+      vertical: DISTANCE_TO_CENTER_EDGE_PERCENT * heightFraction,
+    };
+  }
+
+  /**
+   * Animates from current position to active components position.
+   * @private
+   */
+  animate_() {
+    if (!this.isOnActivePage_) {
+      return;
+    }
+    const startPos = this.storeService_.get(StateProperty.PANNING_MEDIA_STATE)[
+      this.groupId_
+    ];
+
+    // Don't animate if first instance of group or prefers-reduced-motion.
+    if (!startPos || prefersReducedMotion(this.win)) {
+      this.storeService_.dispatch(Action.ADD_PANNING_MEDIA_STATE, {
+        [this.groupId_]: this.animateTo_,
+      });
+      return;
+    }
+
+    const easeInOutQuad = (val) =>
+      val < 0.5 ? 2 * val * val : 1 - Math.pow(-2 * val + 2, 2) / 2;
+
+    let startTime;
+    const nextFrame = (currTime) => {
+      if (!startTime) {
+        startTime = currTime;
+      }
+      const elapsedTime = currTime - startTime;
+      if (elapsedTime < DURATION_MS) {
+        const {x, y, zoom} = this.animateTo_;
+        const easing = easeInOutQuad(elapsedTime / DURATION_MS);
+        this.storeService_.dispatch(Action.ADD_PANNING_MEDIA_STATE, {
+          [this.groupId_]: {
+            x: startPos.x + (x - startPos.x) * easing,
+            y: startPos.y + (y - startPos.y) * easing,
+            zoom: startPos.zoom + (zoom - startPos.zoom) * easing,
+          },
+        });
+        // Only call loop again if on active page.
+        if (this.isOnActivePage_) {
+          requestAnimationFrame(nextFrame);
+        }
+      } else {
+        this.storeService_.dispatch(Action.ADD_PANNING_MEDIA_STATE, {
+          [this.groupId_]: this.animateTo_,
+        });
+      }
+    };
+    requestAnimationFrame(nextFrame);
+  }
+
+  /**
+   * @private
+   * @param {!Object<string, string>} panningMediaState
+   */
+  onPanningMediaStateChange_(panningMediaState) {
+    if (
+      this.pageDistance_ <= this.maxDistanceToAnimate_ &&
+      panningMediaState[this.groupId_] &&
+      // Prevent update if value is same as previous value.
+      // This happens when 2 or more components are on the same page.
+      !deepEquals(this.animationState_, panningMediaState[this.groupId_])
+    ) {
+      this.animationState_ = panningMediaState[this.groupId_];
+      this.updateTransform_();
+    }
+  }
+
+  /**
+   * @private
+   * @return {!Promise}
+   */
+  updateTransform_() {
+    const {x, y, zoom} = this.animationState_;
+    return this.mutateElement(() => {
+      setImportantStyles(this.ampImgEl_, {
+        transform: `translate3d(${x}%, ${y}%, ${this.calculateZoom_(zoom)}px)`,
+      });
+    });
+  }
+
+  /**
+   * Calculates zoom for translate3d and ensures the number is finite.
+   * @private
+   * @param {number} zoom
+   * @return {number}
+   */
+  calculateZoom_(zoom) {
+    const calculatedZoom = (zoom - 1) / zoom;
+    return isFinite(calculatedZoom) ? calculatedZoom : MIN_INTEGER;
+  }
+
+  /**
+   * @private
+   * @return {string} the page id
+   */
+  getPageId_() {
+    if (this.pageId_ == null) {
+      this.pageId_ = this.getPage_().getAttribute('id');
+    }
+    return this.pageId_;
+  }
+
+  /**
+   * @private
+   * @return {?Element} the parent amp-story-page
+   */
+  getPage_() {
+    return closest(
+      dev().assertElement(this.element),
+      (el) => el.tagName.toLowerCase() === 'amp-story-page'
+    );
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout == Layout.FILL;
+  }
+}
+
+AMP.extension('amp-story-panning-media', '0.1', (AMP) => {
+  AMP.registerElement('amp-story-panning-media', AmpStoryPanningMedia, CSS);
+});
diff --git a/extensions/amp-story-panning-media/0.1/test/test-amp-story-panning-media.js b/extensions/amp-story-panning-media/0.1/test/test-amp-story-panning-media.js
new file mode 100644
index 0000000000000..8f0943afda337
--- /dev/null
+++ b/extensions/amp-story-panning-media/0.1/test/test-amp-story-panning-media.js
@@ -0,0 +1,148 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import '../amp-story-panning-media';
+import {
+  Action,
+  AmpStoryStoreService,
+} from '../../../amp-story/1.0/amp-story-store-service';
+import {createElementWithAttributes} from '../../../../src/dom';
+import {registerServiceBuilder} from '../../../../src/service';
+
+/**
+ * @return {!Promise<undefined>} A Promise that resolves after the browser has
+ *    rendered.
+ */
+function afterRenderPromise() {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      setTimeout(resolve);
+    });
+  });
+}
+
+describes.realWin(
+  'amp-story-panning-media',
+  {
+    amp: {
+      runtimeOn: true,
+      extensions: ['amp-story-panning-media', 'amp-img'],
+    },
+  },
+  (env) => {
+    let win;
+    let element;
+    let panningMedia;
+    let storeService;
+
+    function appendAmpImg(parent, path) {
+      const ampImg = createElementWithAttributes(win.document, 'amp-img', {
+        'src': path,
+        'width': '4000',
+        'height': '3059',
+        'layout': 'fill',
+      });
+      parent.appendChild(ampImg);
+    }
+
+    async function createAmpStoryPanningMedia(imagePath, attributes = {}) {
+      const pageEl = win.document.createElement('amp-story-page');
+      pageEl.id = 'page1';
+      element = createElementWithAttributes(
+        win.document,
+        'amp-story-panning-media',
+        {
+          'layout': 'fill',
+          ...attributes,
+        }
+      );
+      if (imagePath) {
+        appendAmpImg(element, imagePath);
+      }
+      pageEl.appendChild(element);
+      win.document.body.appendChild(pageEl);
+
+      panningMedia = await element.getImpl();
+    }
+
+    beforeEach(() => {
+      win = env.win;
+
+      storeService = new AmpStoryStoreService(win);
+      registerServiceBuilder(win, 'story-store', function () {
+        return storeService;
+      });
+      storeService.dispatch(Action.SET_PAGE_SIZE, {
+        width: 700,
+        height: 1000,
+      });
+    });
+
+    it('should build', async () => {
+      await createAmpStoryPanningMedia(
+        '/examples/amp-story/img/conservatory-coords.jpg'
+      );
+      expect(() => panningMedia.layoutCallback()).to.not.throw();
+    });
+
+    it('should throw if nested amp-img is missing', async () => {
+      await createAmpStoryPanningMedia();
+      expect(() =>
+        allowConsoleError(() => panningMedia.layoutCallback())
+      ).to.throw('Element expected: null');
+    });
+
+    it('sets transform of amp-img on page change', async () => {
+      const attributes = {
+        'group-id': 'group-1',
+        'x': '50%',
+        'y': '50%',
+        'zoom': '2',
+      };
+      await createAmpStoryPanningMedia(
+        '/examples/amp-story/img/conservatory-coords.jpg',
+        attributes
+      );
+      await panningMedia.layoutCallback();
+      await storeService.dispatch(Action.CHANGE_PAGE, {id: 'page1', index: 0});
+      await afterRenderPromise();
+      expect(panningMedia.element.firstChild.style.transform).to.equal(
+        `translate3d(${attributes.x}, ${attributes.y}, ${
+          (attributes.zoom - 1) / attributes.zoom
+        }px)`
+      );
+    });
+
+    it('calculates transform with lock-bounds', async () => {
+      const attributes = {
+        'group-id': 'group-1',
+        'y': '50%',
+        'zoom': 0.2,
+        'lock-bounds': '',
+      };
+      await createAmpStoryPanningMedia(
+        '/examples/amp-story/img/conservatory-coords.jpg',
+        attributes
+      );
+      await storeService.dispatch(Action.CHANGE_PAGE, {id: 'page1', index: 0});
+      await panningMedia.layoutCallback();
+      await afterRenderPromise();
+      expect(panningMedia.element.firstChild.style.transform).to.equal(
+        `translate3d(0%, 0%, 0px)`
+      );
+    });
+  }
+);
diff --git a/extensions/amp-story-panning-media/0.1/test/validator-amp-story-panning-media.html b/extensions/amp-story-panning-media/0.1/test/validator-amp-story-panning-media.html
new file mode 100644
index 0000000000000..3062ccf1394ee
--- /dev/null
+++ b/extensions/amp-story-panning-media/0.1/test/validator-amp-story-panning-media.html
@@ -0,0 +1,47 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-story-panning-media tags.
+-->
+<!doctype html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8">
+    <title>amp-story-panning-media example</title>
+    <link rel="canonical" href="example.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <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-panning-media" src="https://cdn.ampproject.org/v0/amp-story-panning-media-0.1.js"></script>
+  </head>
+  <body>
+    <!-- Valid -->
+    <amp-story
+        standalone
+        title="Demo Story"
+        publisher="AMP Story"
+        publisher-logo-src="example.com/logo.png"
+        poster-portrait-src="example.com/poster.jpg">
+      <amp-story-page id="cover">
+        <amp-story-grid-layer template="fill">
+          <amp-story-panning-media layout="fill"></amp-story-panning-media>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/extensions/amp-story-panning-media/0.1/test/validator-amp-story-panning-media.out b/extensions/amp-story-panning-media/0.1/test/validator-amp-story-panning-media.out
new file mode 100644
index 0000000000000..c38b3e727691a
--- /dev/null
+++ b/extensions/amp-story-panning-media/0.1/test/validator-amp-story-panning-media.out
@@ -0,0 +1,48 @@
+PASS
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-story-panning-media tags.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|    <head>
+|      <meta charset="utf-8">
+|      <title>amp-story-panning-media example</title>
+|      <link rel="canonical" href="example.html">
+|      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|      <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>
+|      <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-panning-media" src="https://cdn.ampproject.org/v0/amp-story-panning-media-0.1.js"></script>
+|    </head>
+|    <body>
+|      <!-- Valid -->
+|      <amp-story
+|          standalone
+|          title="Demo Story"
+|          publisher="AMP Story"
+|          publisher-logo-src="example.com/logo.png"
+|          poster-portrait-src="example.com/poster.jpg">
+|        <amp-story-page id="cover">
+|          <amp-story-grid-layer template="fill">
+|            <amp-story-panning-media layout="fill"></amp-story-panning-media>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|      </amp-story>
+|    </body>
+|  </html>
diff --git a/extensions/amp-story-panning-media/OWNERS b/extensions/amp-story-panning-media/OWNERS
new file mode 100644
index 0000000000000..7eca736403831
--- /dev/null
+++ b/extensions/amp-story-panning-media/OWNERS
@@ -0,0 +1,23 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {
+          name: 'gmajoulet',
+          notify: true,
+        },
+        {
+          name: 'newmuis',
+          notify: true,
+        },
+        {
+          name: 'processprocess',
+          notify: true,
+        },
+      ],
+    },
+  ],
+}
diff --git a/extensions/amp-story-panning-media/amp-story-panning-media.md b/extensions/amp-story-panning-media/amp-story-panning-media.md
new file mode 100644
index 0000000000000..48fafde87518b
--- /dev/null
+++ b/extensions/amp-story-panning-media/amp-story-panning-media.md
@@ -0,0 +1,132 @@
+---
+$category@: media
+formats:
+  - stories
+teaser:
+  text: >-
+    Transition an image's position and zoom between pages.
+draft: true
+experimental: true
+tags:
+  - immersive
+  - panning
+  - zooming
+  - animation
+  - media
+  - transitions
+author: processprocess
+toc: true
+$title: amp-story-panning-media
+version: '0.1'
+versions:
+  - '0.1'
+latest_version: '0.1'
+is_current: true
+$path: /documentation/components/amp-story-panning-media.html
+$localization:
+  path: '/{locale}/documentation/components/amp-story-panning-media.html'
+scripts:
+  - >-
+    <script async custom-element="amp-story-panning-media"
+    src="https://cdn.ampproject.org/v0/amp-story-panning-media-0.1.js"></script>
+layouts:
+  - Fill
+---
+
+<!---
+Copyright 2021 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.
+-->
+
+<figure class="centered-fig">
+  <amp-anim alt="amp-story-panning-media example" width="304" height="548" layout="fixed" src="https://raw.githubusercontent.com/processprocess/amphtml/panning-media-docs/extensions/amp-story-panning-media/img/amp-story-panning-media.gif">
+    <noscript>
+    <img alt="amp-story-panning-media example" src="https://raw.githubusercontent.com/processprocess/amphtml/panning-media-docs/extensions/amp-story-panning-media/img/amp-story-panning-media.gif" />
+  </noscript>
+  </amp-anim>
+</figure>
+
+The `amp-story-panning-media` component provides a way to pan and zoom an image between pages in [Web Stories](https://amp.dev/documentation/guides-and-tutorials/start/create_successful_stories/?format=stories).
+
+## Usage
+
+Use the `amp-story-panning-media` to transition an image between pages. The component can animate between position and zoom.
+
+### Environment setup
+
+Add the following script tag to the head of your Web Story:
+
+```html
+<script async custom-element="amp-story-panning-media" src="https://cdn.ampproject.org/v0/amp-story-panning-media-0.1.js"><script>
+```
+
+#### Configuration
+
+The `amp-story-panning-media` component accepts 1 descendant. This descendant must be an [amp-img](https://amp.dev/documentation/components/amp-img/?format=stories). Components transition between pages when their child has the same `src` value.
+
+```html
+<amp-story-page>
+  <amp-story-grid-layer>
+    <amp-story-panning-media layout="fill" x="-10%" y="-20%" zoom=".8">
+      <amp-img layout="fill" src="assets/world-map.jpg" width="4000" height="3059" ></amp-img>
+    </amp-story-panning-media>
+  </amp-story-grid-layer>
+</amp-story-page>
+
+<amp-story-page>
+  <amp-story-grid-layer>
+    <amp-story-panning-media layout="fill" x="20%" y="30%" zoom="2">
+      <amp-img layout="fill" src="assets/world-map.jpg" width="4000" height="3059" ></amp-img>
+    </amp-story-panning-media>
+  </amp-story-grid-layer>
+</amp-story-page>
+```
+
+### Web Story use example
+
+The [Northern Sky Constellations Web Story](https://philipbell-panning-media.web.app/examples/amp-story/northern-sky-constellations.html) uses a single star chart for the entire story. It highlights different constellations by panning and zooming. A parallax transition effect is also achieved by layering two png star images with transparency.
+
+<amp-img alt="image of Northern Sky Constellations Web Story example" layout="fixed" src="https://raw.githubusercontent.com/processprocess/amphtml/panning-media-docs/extensions/amp-story-panning-media/img/constellations-screenshot.jpg" width="690" height="1009"></amp-img>
+
+### Web Story creation tool integration example
+
+The [Web Story creation tool integration example](https://philipbell-panning-media.web.app/examples/amp-story/controls.html) demos how to modify the component with sliders.
+
+<amp-img alt="image of Web Story tool example" layout="fixed" src="https://raw.githubusercontent.com/processprocess/amphtml/panning-media-docs/extensions/amp-story-panning-media/img/controls.jpg" width="690" height="1009"></amp-img>
+
+## Attributes
+
+### x (optional)
+
+Specifies the horizontal position in percentage.  
+Centered on 0 (default) with positive values moving the image to the right (50% centering left edge of image) and negative to the left (-50% centering right edge of image).
+
+### y (optional)
+
+Specifies the vertical position in percentage.
+Centered on 0 (default) with positive values moving the image down (50% centering top edge of image) and negative upward (-50% centering bottom edge of image).
+
+### zoom (optional)
+
+Specifies the level of zoom.
+The default is 1. This corresponds to the image fitting the viewport with [`layout=fill`](https://amp.dev/documentation/guides-and-tutorials/learn/amp-html-layout/?format=stories).
+A higher value scales the image up (zooms in). A lower value scales the image down (zooms out).
+
+### lock-bounds (optional)
+
+Prevents the image from panning beyond the viewport. When using `lock-bounds` `width` and `height` must be specified on the `amp-img` child.
+
+## Validation
+
+This component is available in experimental. Validation details will be defined before launch.
diff --git a/extensions/amp-story-panning-media/img/amp-story-panning-media.gif b/extensions/amp-story-panning-media/img/amp-story-panning-media.gif
new file mode 100644
index 0000000000000..6816dbd857b80
Binary files /dev/null and b/extensions/amp-story-panning-media/img/amp-story-panning-media.gif differ
diff --git a/extensions/amp-story-panning-media/img/constellations-screenshot.jpg b/extensions/amp-story-panning-media/img/constellations-screenshot.jpg
new file mode 100644
index 0000000000000..04f89830847fa
Binary files /dev/null and b/extensions/amp-story-panning-media/img/constellations-screenshot.jpg differ
diff --git a/extensions/amp-story-panning-media/img/controls.jpg b/extensions/amp-story-panning-media/img/controls.jpg
new file mode 100644
index 0000000000000..591e74e4b133e
Binary files /dev/null and b/extensions/amp-story-panning-media/img/controls.jpg differ
diff --git a/extensions/amp-story-panning-media/validator-amp-story-panning-media.protoascii b/extensions/amp-story-panning-media/validator-amp-story-panning-media.protoascii
new file mode 100644
index 0000000000000..992835f6dd6ca
--- /dev/null
+++ b/extensions/amp-story-panning-media/validator-amp-story-panning-media.protoascii
@@ -0,0 +1,36 @@
+#
+# Copyright 2020 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.
+#
+
+tags: {  # amp-story-panning-media
+  html_format: AMP
+  tag_name: "SCRIPT"
+  extension_spec: {
+    name: "amp-story-panning-media"
+    version: "0.1"
+    version: "latest"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # <amp-story-panning-media>
+  html_format: AMP
+  tag_name: "AMP-STORY-PANNING-MEDIA"
+  requires_extension: "amp-story-panning-media"
+  mandatory_ancestor: "AMP-STORY-GRID-LAYER"
+  spec_url: "https://amp.dev/documentation/components/amp-story-panning-media"
+  amp_layout: {
+    supported_layouts: FILL
+  }
+}
diff --git a/extensions/amp-story-player/0.1/amp-story-player.css b/extensions/amp-story-player/0.1/amp-story-player.css
new file mode 100644
index 0000000000000..c474a3ab4441a
--- /dev/null
+++ b/extensions/amp-story-player/0.1/amp-story-player.css
@@ -0,0 +1,17 @@
+/**
+ * Copyright 2020 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.
+ */
+
+@import '../../../css/amp-story-player.css'
diff --git a/extensions/amp-story-player/0.1/amp-story-player.js b/extensions/amp-story-player/0.1/amp-story-player.js
new file mode 100644
index 0000000000000..2a07dd85d43cc
--- /dev/null
+++ b/extensions/amp-story-player/0.1/amp-story-player.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {AmpStoryPlayer} from '../../../src/amp-story-player/amp-story-player-impl';
+import {cssText} from '../../../build/amp-story-player.css';
+import {isLayoutSizeDefined} from '../../../src/layout';
+
+class AmpStoryPlayerWrapper extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+    this.player_ = new AmpStoryPlayer(this.win, element);
+  }
+
+  /** @override */
+  buildCallback() {
+    this.player_.buildPlayer();
+  }
+
+  /** @override */
+  layoutCallback() {
+    this.player_.layoutPlayer();
+    return Promise.resolve();
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+}
+
+AMP.extension('amp-story-player', '0.1', (AMP) => {
+  AMP.registerElement('amp-story-player', AmpStoryPlayerWrapper, cssText);
+});
diff --git a/extensions/amp-story-player/0.1/amp-story-player.md b/extensions/amp-story-player/0.1/amp-story-player.md
new file mode 100644
index 0000000000000..3cf688687cdb6
--- /dev/null
+++ b/extensions/amp-story-player/0.1/amp-story-player.md
@@ -0,0 +1,87 @@
+---
+$category@: presentation
+formats:
+  - stories
+teaser:
+  text: A player for embedding and playing your favorite stories in your own AMP site.
+---
+
+<!--
+Copyright 2020 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.
+-->
+
+# <a name="`amp-story-player`"></a> `amp-story-player`
+
+## Usage
+
+<figure class="centered-fig">
+  <amp-anim alt="amp-story-player example" width="300" height="533" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/amp-story-player.gif">
+    <noscript>
+    <img alt="amp-story-player example" src="https://github.com/ampproject/amphtml/raw/main/docs/spec/img/amp-story-player.gif" />
+  </noscript>
+  </amp-anim>
+</figure>
+
+Use `amp-story-player` to embed and play stories within an AMP webpage.
+
+### Embed in an AMP page
+
+The code snippet below demonstrates an embed of `<amp-story-player>` in a AMP webpage.
+
+[example preview="top-frame" playground="true"]
+
+```html
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script
+    async
+    custom-element="amp-story-player"
+    src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"
+  ></script>
+</head>
+<body>
+  <amp-story-player layout="fixed" width="360" height="600">
+    <a href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp/">
+      <img src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg" width="360" height="600" loading="lazy" data-amp-story-player-poster-img>
+      Stories in AMP - Hello World
+    </a>
+  </amp-story-player>
+</body>
+```
+
+[/example]
+
+### Specify embedded stories
+
+The `<amp-story-player>` component contains one or more `<a>` tags. Point the href attribute of each to the story URL.
+
+Place the story's title within the `<a>` tag. This provides a better user experience and allows search engines to crawl embedded stories.
+
+## Attributes
+
+### layout
+
+Supports any of the size-defined layouts:
+
+<ul>
+  <li>fixed</li>
+  <li>fixed-height</li>
+  <li>responsive</li>
+  <li>fill</li>
+</ul>
+
+## Validation
+
+See [amp-story-player rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story-player/validator-amp-story-player.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-story-player/0.1/test/test-e2e/test-amp-story-player-navigation.js b/extensions/amp-story-player/0.1/test/test-e2e/test-amp-story-player-navigation.js
new file mode 100644
index 0000000000000..bead5bfeab2a4
--- /dev/null
+++ b/extensions/amp-story-player/0.1/test/test-e2e/test-amp-story-player-navigation.js
@@ -0,0 +1,99 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const VIEWPORT = {
+  HEIGHT: 768,
+  WIDTH: 1024,
+};
+
+/**
+ * @param {number} ms
+ * @return {!Promise}
+ */
+function timeout(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+describes.endtoend(
+  'story player navigation',
+  {
+    fixture: 'amp-story-player/navigation.amp.html',
+    initialRect: {width: VIEWPORT.WIDTH, height: VIEWPORT.HEIGHT},
+    environments: ['single'],
+  },
+  (env) => {
+    let player;
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+
+      await timeout(500);
+
+      player = await controller.findElement(
+        'amp-story-player.i-amphtml-story-player-loaded'
+      );
+      await expect(player);
+    });
+
+    it('first story should be playing video', async () => {
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await controller.switchToShadowRoot(shadowHost);
+
+      const iframe = await controller.findElement('iframe.story-player-iframe');
+
+      await controller.switchToShadowRoot(iframe);
+      await controller.switchToFrame(iframe);
+
+      const firstStoryVideo = await controller.findElement('#story1 video');
+      const isVideoPaused = await controller.getElementProperty(
+        firstStoryVideo,
+        'paused'
+      );
+
+      await timeout(800);
+      await expect(isVideoPaused).to.eql(false);
+    });
+
+    it('navigating to next story pauses the previous one', async () => {
+      // Navigate to next story.
+      await controller.click(player);
+
+      await timeout(500);
+
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+      await controller.switchToShadowRoot(shadowHost);
+
+      const iframe = await controller.findElement('iframe.story-player-iframe');
+      await controller.switchToShadowRoot(iframe);
+      await controller.switchToFrame(iframe);
+
+      const firstStoryVideo = await controller.findElement('#story1 video');
+      const isVideoPaused = await controller.getElementProperty(
+        firstStoryVideo,
+        'paused'
+      );
+
+      await timeout(800);
+      await expect(isVideoPaused).to.eql(true);
+    });
+  }
+);
diff --git a/extensions/amp-story-player/0.1/test/test-e2e/test-amp-story-player-prerender.js b/extensions/amp-story-player/0.1/test/test-e2e/test-amp-story-player-prerender.js
new file mode 100644
index 0000000000000..d8dc2a5e3b335
--- /dev/null
+++ b/extensions/amp-story-player/0.1/test/test-e2e/test-amp-story-player-prerender.js
@@ -0,0 +1,120 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const VIEWPORT = {
+  HEIGHT: 768,
+  WIDTH: 1024,
+};
+
+/**
+ * @param {number} ms
+ * @return {!Promise}
+ */
+function timeout(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+describes.endtoend(
+  'player prerendering',
+  {
+    fixture: 'amp-story-player/pre-rendering.amp.html',
+    initialRect: {width: VIEWPORT.WIDTH, height: VIEWPORT.HEIGHT},
+    environments: ['single'],
+  },
+  (env) => {
+    let player;
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+      player = await controller.findElement('amp-story-player');
+      await expect(player);
+    });
+
+    it('when player is not visible in first viewport, it builds the shadow DOM container', async () => {
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await expect(shadowHost);
+    });
+
+    it('when player is not visible in first viewport, no stories are loaded or prerendered', async () => {
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await controller.switchToShadowRoot(shadowHost);
+      const iframeContainer = await controller.findElement(
+        '.i-amphtml-story-player-main-container'
+      );
+
+      const count = await controller.getElementProperty(
+        iframeContainer,
+        'childElementCount'
+      );
+
+      await expect(count).to.eql(0);
+    });
+
+    it('when player becomes visible in viewport, first story starts playing', async () => {
+      const doc = await controller.getDocumentElement();
+      const playerRect = await controller.getElementRect(player);
+
+      await controller./*OK*/ scrollTo(doc, {top: playerRect.top});
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await controller.switchToShadowRoot(shadowHost);
+
+      const iframe = await controller.findElement('iframe.story-player-iframe');
+
+      await controller.switchToShadowRoot(iframe);
+      await controller.switchToFrame(iframe);
+
+      const storyEl = await controller.findElement(
+        'amp-story.i-amphtml-story-loaded'
+      );
+
+      await expect(storyEl).to.exist;
+    });
+
+    it('when player becomes visible in viewport and first story finishes loading, second story starts preloading', async () => {
+      const doc = await controller.getDocumentElement();
+      const playerRect = await controller.getElementRect(player);
+
+      await controller./*OK*/ scrollTo(doc, {top: playerRect.top});
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await controller.switchToShadowRoot(shadowHost);
+
+      // Wait for first story iframe to load.
+      await timeout(5000);
+
+      const iframes = await controller.findElements(
+        'iframe.story-player-iframe'
+      );
+      const iframeSrc = await controller.getElementAttribute(iframes[1], 'src');
+
+      await expect(iframeSrc).to.eql(
+        'http://localhost:8000/examples/amp-story/amp-story-animation.html#visibilityState=prerender&origin=http%3A%2F%2Flocalhost%3A8000&showStoryUrlInfo=0&storyPlayer=v0&cap=swipe'
+      );
+    });
+  }
+);
diff --git a/extensions/amp-story-player/0.1/test/test-e2e/test-amp-story-player.js b/extensions/amp-story-player/0.1/test/test-e2e/test-amp-story-player.js
new file mode 100644
index 0000000000000..d42857ff48ed5
--- /dev/null
+++ b/extensions/amp-story-player/0.1/test/test-e2e/test-amp-story-player.js
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const VIEWPORT = {
+  HEIGHT: 768,
+  WIDTH: 1024,
+};
+
+describes.endtoend(
+  'player prerendering',
+  {
+    fixture: 'amp-story-player/basic.amp.html',
+    initialRect: {width: VIEWPORT.WIDTH, height: VIEWPORT.HEIGHT},
+    environments: ['single'],
+  },
+  (env) => {
+    let player;
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+      player = await controller.findElement(
+        'amp-story-player.i-amphtml-story-player-loaded'
+      );
+      await expect(player);
+    });
+
+    it('loads and displays first story on page load when player is visible in viewport', async () => {
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await controller.switchToShadowRoot(shadowHost);
+
+      const iframes = await controller.findElement('iframe');
+      const iframeSrc = await controller.getElementAttribute(iframes, 'src');
+
+      await expect(iframeSrc).to.eql(
+        'http://localhost:8000/examples/amp-story/ampconf.html#visibilityState=prerender&origin=http%3A%2F%2Flocalhost%3A8000&showStoryUrlInfo=0&storyPlayer=v0&cap=swipe'
+      );
+    });
+  }
+);
diff --git a/extensions/amp-story-player/0.1/test/validator-amp-story-player-error.html b/extensions/amp-story-player/0.1/test/validator-amp-story-player-error.html
new file mode 100644
index 0000000000000..8278b732ff2aa
--- /dev/null
+++ b/extensions/amp-story-player/0.1/test/validator-amp-story-player-error.html
@@ -0,0 +1,48 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests that should fail for the amp-story-player tag.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+  <title>My Story</title>
+  <meta name="description" content="Get started with amp-story-player">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link rel="canonical" href="validator-amp-story-player.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>
+</head>
+<body>
+  <amp-story-player width="360" height="600">
+    <!-- <img> should be a child of <a> -->
+    <img data-amp-story-player-poster-img src="https://www.example.com/img" width="360" height="600" loading="lazy">
+    <a href="https://www.example.com" class="story">
+      <span class="title">A local’s guide to what to eat and do in New York City</span>
+    </a>
+    <a href="https://www.example.com2" class="story">
+      <!-- <img> should contain src attribute -->
+      <img data-amp-story-player-poster-img width="360" height="600" loading="lazy">
+      <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+    </a>
+    <a href="https://www.example.com2" class="story">
+      <!-- <img> should contain data-amp-story-player-poster-img attribute -->
+      <img src="https://www.example.com/img" width="360" height="600" loading="lazy">
+      <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+    </a>
+</amp-story-player>
+</body>
+</html>
diff --git a/extensions/amp-story-player/0.1/test/validator-amp-story-player-error.out b/extensions/amp-story-player/0.1/test/validator-amp-story-player-error.out
new file mode 100644
index 0000000000000..01895a2588276
--- /dev/null
+++ b/extensions/amp-story-player/0.1/test/validator-amp-story-player-error.out
@@ -0,0 +1,55 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests that should fail for the amp-story-player tag.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+|    <title>My Story</title>
+|    <meta name="description" content="Get started with amp-story-player">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <link rel="canonical" href="validator-amp-story-player.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>
+|  </head>
+|  <body>
+|    <amp-story-player width="360" height="600">
+|      <!-- <img> should be a child of <a> -->
+|      <img data-amp-story-player-poster-img src="https://www.example.com/img" width="360" height="600" loading="lazy">
+>>     ^~~~~~~~~
+amp-story-player/0.1/test/validator-amp-story-player-error.html:32:4 The parent tag of tag 'img' is 'amp-story-player', but it can only be 'a'. (see https://amp.dev/documentation/components/amp-story-player/)
+|      <a href="https://www.example.com" class="story">
+|        <span class="title">A local’s guide to what to eat and do in New York City</span>
+|      </a>
+|      <a href="https://www.example.com2" class="story">
+|        <!-- <img> should contain src attribute -->
+|        <img data-amp-story-player-poster-img width="360" height="600" loading="lazy">
+>>       ^~~~~~~~~
+amp-story-player/0.1/test/validator-amp-story-player-error.html:38:6 The mandatory attribute 'src' is missing in tag 'img'. (see https://amp.dev/documentation/components/amp-story-player/)
+|        <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+|      </a>
+|      <a href="https://www.example.com2" class="story">
+|        <!-- <img> should contain data-amp-story-player-poster-img attribute -->
+|        <img src="https://www.example.com/img" width="360" height="600" loading="lazy">
+>>       ^~~~~~~~~
+amp-story-player/0.1/test/validator-amp-story-player-error.html:43:6 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
+|        <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+|      </a>
+|  </amp-story-player>
+|  </body>
+|  </html>
diff --git a/extensions/amp-story-player/0.1/test/validator-amp-story-player-img-error.html b/extensions/amp-story-player/0.1/test/validator-amp-story-player-img-error.html
new file mode 100644
index 0000000000000..0c28b33650cc8
--- /dev/null
+++ b/extensions/amp-story-player/0.1/test/validator-amp-story-player-img-error.html
@@ -0,0 +1,35 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-story-player when using an img.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+  <title>My Story</title>
+  <meta name="description" content="Get started with amp-story-player">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link rel="canonical" href="validator-amp-story-player.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>
+</head>
+<body>
+  <amp-story-player width="360" height="600" layout="intrinsic">
+    <!-- This should fail, since img tags are not allowed in AMP yet. -->
+    <img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwMCIgd2lkdGg9IjM2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=">
+</amp-story-player>
+</body>
+</html>
diff --git a/extensions/amp-story-player/0.1/test/validator-amp-story-player-img-error.out b/extensions/amp-story-player/0.1/test/validator-amp-story-player-img-error.out
new file mode 100644
index 0000000000000..1fe0f3f3c4b19
--- /dev/null
+++ b/extensions/amp-story-player/0.1/test/validator-amp-story-player-img-error.out
@@ -0,0 +1,38 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-story-player when using an img.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+|    <title>My Story</title>
+|    <meta name="description" content="Get started with amp-story-player">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <link rel="canonical" href="validator-amp-story-player.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>
+|  </head>
+|  <body>
+|    <amp-story-player width="360" height="600" layout="intrinsic">
+|      <!-- This should fail, since img tags are not allowed in AMP yet. -->
+|      <img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwMCIgd2lkdGg9IjM2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=">
+>>     ^~~~~~~~~
+amp-story-player/0.1/test/validator-amp-story-player-img-error.html:32:4 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
+|  </amp-story-player>
+|  </body>
+|  </html>
diff --git a/extensions/amp-story-player/0.1/test/validator-amp-story-player-img.html b/extensions/amp-story-player/0.1/test/validator-amp-story-player-img.html
new file mode 100644
index 0000000000000..90bb0f33d4cd1
--- /dev/null
+++ b/extensions/amp-story-player/0.1/test/validator-amp-story-player-img.html
@@ -0,0 +1,41 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-story-player tag using the img tag.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+  <title>My Story</title>
+  <meta name="description" content="Get started with amp-story-player">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link rel="canonical" href="validator-amp-story-player.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>
+</head>
+<body>
+  <amp-story-player width="360" height="600">
+    <a href="https://www.example.com" class="story">
+      <img data-amp-story-player-poster-img src="https://www.example.com/img" width="360" height="600" loading="lazy">
+      <span class="title">A local’s guide to what to eat and do in New York City</span>
+    </a>
+    <a href="https://www.example.com2" class="story">
+      <img data-amp-story-player-poster-img src="https://www.example.com/img" width="360" height="600" loading="lazy">
+      <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+    </a>
+</amp-story-player>
+</body>
+</html>
diff --git a/extensions/amp-story-player/0.1/test/validator-amp-story-player-img.out b/extensions/amp-story-player/0.1/test/validator-amp-story-player-img.out
new file mode 100644
index 0000000000000..39fb344aa5cdf
--- /dev/null
+++ b/extensions/amp-story-player/0.1/test/validator-amp-story-player-img.out
@@ -0,0 +1,42 @@
+PASS
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-story-player tag using the img tag.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+|    <title>My Story</title>
+|    <meta name="description" content="Get started with amp-story-player">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <link rel="canonical" href="validator-amp-story-player.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>
+|  </head>
+|  <body>
+|    <amp-story-player width="360" height="600">
+|      <a href="https://www.example.com" class="story">
+|        <img data-amp-story-player-poster-img src="https://www.example.com/img" width="360" height="600" loading="lazy">
+|        <span class="title">A local’s guide to what to eat and do in New York City</span>
+|      </a>
+|      <a href="https://www.example.com2" class="story">
+|        <img data-amp-story-player-poster-img src="https://www.example.com/img" width="360" height="600" loading="lazy">
+|        <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+|      </a>
+|  </amp-story-player>
+|  </body>
+|  </html>
diff --git a/extensions/amp-story-player/0.1/test/validator-amp-story-player-sizer.html b/extensions/amp-story-player/0.1/test/validator-amp-story-player-sizer.html
new file mode 100644
index 0000000000000..1b990201341e2
--- /dev/null
+++ b/extensions/amp-story-player/0.1/test/validator-amp-story-player-sizer.html
@@ -0,0 +1,38 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-story-player transformed.
+-->
+<!doctype html>
+<html ⚡ transformed="self;v=1">
+<head>
+  <meta charset="utf-8">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+  <title>My Story</title>
+  <meta name="description" content="Get started with amp-story-player">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link rel="canonical" href="validator-amp-story-player.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-runtime i-amphtml-version="123456789012345"></style>
+</head>
+<body>
+  <amp-story-player width="360" height="600" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
+    <i-amphtml-sizer class="i-amphtml-sizer">
+        <img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwMCIgd2lkdGg9IjM2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=">
+    </i-amphtml-sizer>
+    <a href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp" data-amp-original-style="--story-player-poster: url(https://amp.dev/static/samples/img/story_dog2_portrait.jpg)" class="amp-wp-77421fc"> Stories in AMP – Hello World </a>
+</amp-story-player>
+</body>
+</html>
diff --git a/extensions/amp-story-player/0.1/test/validator-amp-story-player-sizer.out b/extensions/amp-story-player/0.1/test/validator-amp-story-player-sizer.out
new file mode 100644
index 0000000000000..6daf5ce3a81e1
--- /dev/null
+++ b/extensions/amp-story-player/0.1/test/validator-amp-story-player-sizer.out
@@ -0,0 +1,39 @@
+PASS
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-story-player transformed.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="self;v=1">
+|  <head>
+|    <meta charset="utf-8">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+|    <title>My Story</title>
+|    <meta name="description" content="Get started with amp-story-player">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <link rel="canonical" href="validator-amp-story-player.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-runtime i-amphtml-version="123456789012345"></style>
+|  </head>
+|  <body>
+|    <amp-story-player width="360" height="600" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
+|      <i-amphtml-sizer class="i-amphtml-sizer">
+|          <img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwMCIgd2lkdGg9IjM2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=">
+|      </i-amphtml-sizer>
+|      <a href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp" data-amp-original-style="--story-player-poster: url(https://amp.dev/static/samples/img/story_dog2_portrait.jpg)" class="amp-wp-77421fc"> Stories in AMP – Hello World </a>
+|  </amp-story-player>
+|  </body>
+|  </html>
diff --git a/extensions/amp-story-player/0.1/test/validator-amp-story-player.html b/extensions/amp-story-player/0.1/test/validator-amp-story-player.html
new file mode 100644
index 0000000000000..91249a9ba919b
--- /dev/null
+++ b/extensions/amp-story-player/0.1/test/validator-amp-story-player.html
@@ -0,0 +1,40 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-story-player tag.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+  <title>My Story</title>
+  <meta name="description" content="Get started with amp-story-player">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link rel="canonical" href="validator-amp-story-player.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>
+</head>
+<body>
+  <amp-story-player width="360" height="600">
+    <a href="https://www.example.com" class="story">
+      <img data-amp-story-player-poster-img src="https://www.example.com/img" width="360" height="600" loading="lazy">
+      <span class="title">A local’s guide to what to eat and do in New York City</span>
+    </a>
+    <a href="https://www.example.com2" class="story">
+      <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+    </a>
+</amp-story-player>
+</body>
+</html>
diff --git a/extensions/amp-story-player/0.1/test/validator-amp-story-player.out b/extensions/amp-story-player/0.1/test/validator-amp-story-player.out
new file mode 100644
index 0000000000000..baffe569494b1
--- /dev/null
+++ b/extensions/amp-story-player/0.1/test/validator-amp-story-player.out
@@ -0,0 +1,41 @@
+PASS
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-story-player tag.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+|    <title>My Story</title>
+|    <meta name="description" content="Get started with amp-story-player">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <link rel="canonical" href="validator-amp-story-player.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>
+|  </head>
+|  <body>
+|    <amp-story-player width="360" height="600">
+|      <a href="https://www.example.com" class="story">
+|        <img data-amp-story-player-poster-img src="https://www.example.com/img" width="360" height="600" loading="lazy">
+|        <span class="title">A local’s guide to what to eat and do in New York City</span>
+|      </a>
+|      <a href="https://www.example.com2" class="story">
+|        <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+|      </a>
+|  </amp-story-player>
+|  </body>
+|  </html>
diff --git a/extensions/amp-story-player/OWNERS b/extensions/amp-story-player/OWNERS
new file mode 100644
index 0000000000000..30deaef61c44a
--- /dev/null
+++ b/extensions/amp-story-player/OWNERS
@@ -0,0 +1,23 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {
+          name: 'gmajoulet',
+          notify: true,
+        },
+        {
+          name: 'newmuis',
+          notify: true,
+        },
+        {
+          name: 'enriqe',
+          notify: true,
+        },
+      ],
+    },
+  ],
+}
diff --git a/extensions/amp-story-player/validator-amp-story-player.protoascii b/extensions/amp-story-player/validator-amp-story-player.protoascii
new file mode 100644
index 0000000000000..ec58ce7436180
--- /dev/null
+++ b/extensions/amp-story-player/validator-amp-story-player.protoascii
@@ -0,0 +1,118 @@
+#
+# Copyright 2020 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.
+#
+
+tags: {  # amp-story-player
+  html_format: AMP
+  tag_name: "SCRIPT"
+  extension_spec: {
+    name: "amp-story-player"
+    version: "0.1"
+    version: "latest"
+  }
+  attr_lists: "common-extension-attrs"
+  spec_url: "https://amp.dev/documentation/components/amp-story-player/"
+}
+tags: {  # <amp-story-player>
+  html_format: AMP
+  tag_name: "AMP-STORY-PLAYER"
+  requires_extension: "amp-story-player"
+  descendant_tag_list: "amp-story-player-allowed-descendants"
+  amp_layout: {
+    supported_layouts: FILL
+    supported_layouts: FIXED
+    supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
+    supported_layouts: RESPONSIVE
+    supported_layouts: INTRINSIC
+  }
+  spec_url: "https://amp.dev/documentation/components/amp-story-player/"
+}
+descendant_tag_list {
+  name: "amp-story-player-allowed-descendants"
+  tag: "A"
+  tag: "SPAN"
+  tag: "I-AMPHTML-SIZER"  # Only allowed when document is transformed AMP
+  tag: "IMG"  # Only allowed when document is transformed AMP
+}
+tags: {
+  html_format: AMP
+  enabled_by: "transformed"
+  tag_name: "IMG"
+  spec_name: "img-i-amphtml-intrinsic-sizer-amp-story-player"
+  mandatory_parent: "I-AMPHTML-SIZER-INTRINSIC"
+  mandatory_ancestor: "AMP-STORY-PLAYER"
+  attrs: {
+    name: "alt"
+    value: ""
+    mandatory: true
+  }
+  attrs: {
+    name: "aria-hidden"
+    value: "true"
+    mandatory: true
+  }
+  attrs: {
+    name: "class"
+    value: "i-amphtml-intrinsic-sizer"
+    mandatory: true
+  }
+  attrs: {
+    name: "role"
+    value: "presentation"
+    mandatory: true
+  }
+  attrs: {
+    name: "src"
+    value_regex: "data:image\\/svg\\+xml;charset=utf-8,\\s*<svg height=\"\\d+(\\.\\d+)?\" width=\"\\d+(\\.\\d+)?\" xmlns=\"http:\\/\\/www\\.w3\\.org\\/2000\\/svg\" version=\"1\\.1\"\\/>|data:image\\/svg\\+xml;charset=utf-8,\\s*<svg height='\\d+(\\.\\d+)?\' width='\\d+(\\.\\d+)?\' xmlns='http:\\/\\/www\\.w3\\.org\\/2000\\/svg' version='1\\.1'\\/>|data:image\\/svg\\+xml;base64,[a-zA-Z0-9+\\/=]+"
+    mandatory: true
+  }
+  spec_url: "https://amp.dev/documentation/components/amp-story-player/"
+}
+tags: {
+  html_format: AMP
+  tag_name: "IMG"
+  spec_name: "amp-story-player > img"
+  mandatory_parent: "A"
+  mandatory_ancestor: "AMP-STORY-PLAYER"
+  attrs: { name: "alt" }
+  attrs: { name: "attribution" }
+  attrs: {
+    name: "data-amp-story-player-poster-img"
+    mandatory: true
+    value: ""
+    dispatch_key: NAME_VALUE_DISPATCH
+  }
+    attrs: {
+    name: "decoding"
+    value: "async"
+  }
+  attrs: {
+    name: "height"
+    value_regex: "[0-9]+"
+  }
+  attrs: {
+    name: "loading"
+    mandatory: true
+    value: "lazy"
+  }
+  attrs: { name: "sizes" }
+  attrs: {
+    name: "width"
+    value_regex: "[0-9]+"
+  }
+  attr_lists: "mandatory-src-or-srcset"
+  spec_url: "https://amp.dev/documentation/components/amp-story-player/"
+}
diff --git a/extensions/amp-story/0.1/_locales/default.js b/extensions/amp-story/0.1/_locales/default.js
deleted file mode 100644
index 9d3504ac608b6..0000000000000
--- a/extensions/amp-story/0.1/_locales/default.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for English strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Privacy settings',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Change data privacy settings',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Accept',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Decline',
-  },
-  [LocalizedStringId.DEPRECATED_AMP_STORY_EXPERIMENT_ENABLE_BUTTON_LABEL]: {
-    string: 'Enable',
-  },
-  [LocalizedStringId.DEPRECATED_AMP_STORY_EXPERIMENT_ENABLED_TEXT]: {
-    string: 'Experiment enabled.  Please reload.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: ':(',
-  },
-  [LocalizedStringId.DEPRECATED_AMP_STORY_SYSTEM_LAYER_SHARE_WIDGET_LABEL]: {
-    string: 'Share',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Expand your window to view this experience',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'You must enable the amp-story experiment to view this content.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'The page is best viewed in portrait mode',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      "We're sorry, it looks like your browser doesn't support " +
-      'this experience',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/0.1/_locales/en.js b/extensions/amp-story/0.1/_locales/en.js
deleted file mode 100644
index 19e0903a3a382..0000000000000
--- a/extensions/amp-story/0.1/_locales/en.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for English strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Privacy settings',
-    description:
-      'Title for a section that allows the user to configure ' +
-      'their privacy settings',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Change data privacy settings',
-    description:
-      'Label for a button that allows the user to change their ' +
-      'choice to consent to providing their cookie access.',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Accept',
-    description:
-      'Label for a button that allows the user to consent to ' +
-      'providing their cookie access.',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Decline',
-    description:
-      'Label for a button that allows the user to disconsent to ' +
-      'providing their cookie access.',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'View on original domain:',
-    description:
-      'Label for a heading of a dialog that shows the user the ' +
-      'domain from which the story is served.',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'More about AMP results',
-    description:
-      'Label for a link to documentation on how AMP links are handled.',
-  },
-  [LocalizedStringId.DEPRECATED_AMP_STORY_EXPERIMENT_ENABLE_BUTTON_LABEL]: {
-    string: 'Enable',
-    description: 'Label for a button that enables the amp-story experiment.',
-  },
-  [LocalizedStringId.DEPRECATED_AMP_STORY_EXPERIMENT_ENABLED_TEXT]: {
-    string: 'Experiment enabled.  Please reload.',
-    description:
-      'Text that is shown once the amp-story experiment has ' +
-      'been successfully enabled.',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Tap Next',
-    description:
-      'Label indicating that users can navigate to the next ' +
-      'page, in the amp-story hint UI.',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Tap Back',
-    description:
-      'Label indicating that users can navigate to the previous ' +
-      'page, in the amp-story hint UI.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Could not copy link to clipboard :(',
-    description:
-      'String shown in a failure message to inform the user that ' +
-      'a link could not be successfully copied to their clipboard.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Link copied!',
-    description:
-      'String shown in a confirmation message to inform the user ' +
-      'that a link was successfully copied to their clipboard.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Email',
-    description:
-      'Button label for the share target that shares a link via email.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-    description:
-      'Button label for the share target that shares a link via Facebook.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-    description:
-      'Button label for the share target that shares a link via Google+.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Get Link',
-    description:
-      'Button label for the share target that shares a link via ' +
-      "by copying it to the user's clipboard.",
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-    description:
-      'Button label for the share target that shares a link via LinkedIn.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-    description:
-      'Button label for the share target that shares a link via ' +
-      'Pinterest.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-    description:
-      'Button label for the share target that shares a link via SMS.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SYSTEM]: {
-    string: 'More',
-    description:
-      'Button label for the share target that shares a link via ' +
-      "deferral to the operating system's native sharing handler.",
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-    description:
-      'Button label for the share target that shares a link via Tumblr.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-    description:
-      'Button label for the share target that shares a link via Twitter.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'Whatsapp',
-    description:
-      'Button label for the share target that shares a link via Whatsapp.',
-  },
-  [LocalizedStringId.DEPRECATED_AMP_STORY_SYSTEM_LAYER_SHARE_WIDGET_LABEL]: {
-    string: 'Share',
-    description:
-      'Label for the expandable share widget shown in the desktop UI.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Expand your window to view this experience',
-    description:
-      'Text for a warning screen that informs the user that ' +
-      'stories are only supported in larger browser windows.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'You must enable the amp-story experiment to view this content.',
-    description:
-      'Text for a warning screen that informs the user that ' +
-      'they must enable an experiment to use stories.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'The page is best viewed in portrait mode',
-    description:
-      'Text for a warning screen that informs the user that ' +
-      'stories are only supported in portrait orientation.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      "We're sorry, it looks like your browser doesn't support " +
-      'this experience',
-    description:
-      'Text for a warning screen that informs the user that ' +
-      'their browser does not support stories.',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/0.1/amp-story-base-layer.js b/extensions/amp-story/0.1/amp-story-base-layer.js
deleted file mode 100644
index fd22721ca362d..0000000000000
--- a/extensions/amp-story/0.1/amp-story-base-layer.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-/**
- * @fileoverview Base layer that layers in a story page extend from.
- */
-
-import {Layout} from '../../../src/layout';
-
-/**
- * Base layer template.
- */
-export class AmpStoryBaseLayer extends AMP.BaseElement {
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout == Layout.CONTAINER;
-  }
-
-  /** @override */
-  buildCallback() {
-    this.element.classList.add('i-amphtml-story-layer');
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-bookend.css b/extensions/amp-story/0.1/amp-story-bookend.css
deleted file mode 100644
index d9d3488297e66..0000000000000
--- a/extensions/amp-story/0.1/amp-story-bookend.css
+++ /dev/null
@@ -1,288 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-@import './amp-story-share.css';
-
-.i-amphtml-story-bookend {
-  text-align: left !important;
-  color: #fff !important;
-  bottom: 0 !important;
-  display: flex !important;
-  flex-direction: column !important;
-  left: 0 !important;
-  position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
-  z-index: 100001 !important;
-  transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
-}
-
-.i-amphtml-story-bookend.i-amphtml-hidden {
-  transition: transform 0.2s cubic-bezier(0.4, 0.0, 1, 1) !important;
-  transform: translateY(100vh) !important;
-  pointer-events: none !important;
-}
-
-.i-amphtml-story-bookend-overflow {
-  overflow: auto !important;
-  -webkit-overflow-scrolling: touch !important;
-  margin-top: auto !important; /* positions it at the bottom of container */
-}
-
-.i-amphtml-story-bookend-inner {
-  margin: 88px 0 0 !important;
-  position: relative !important;
-  padding-top: 32px !important;
-  overflow: hidden !important;
-}
-
-.i-amphtml-story-bookend-inner::before {
-  content: " " !important;
-  display: block !important;
-  z-index: -1 !important; /* places it under content */
-  background: rgba(0, 0, 0, 0.70) !important;
-  position: absolute !important;
-  left: 8px !important;
-  top: 8px !important;
-  bottom: 8px !important;
-  right: 8px !important;
-  border-radius: 8px !important;
-}
-
-.i-amphtml-story-bookend-fullbleed .i-amphtml-story-bookend-inner::before,
-[desktop] .i-amphtml-story-bookend-inner::before {
-  left: 0 !important;
-  top: 0 !important;
-  bottom: 0 !important;
-  right: 0 !important;
-  border-radius: 0 !important;
-}
-
-.i-amphtml-story-bookend-heading {
-  text-transform: uppercase !important;
-  font-size: 12px !important;
-  padding-bottom: 8px !important;
-  margin: 48px 0 8px !important;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
-  color: rgba(255, 255, 255, 0.54) !important;
-  font-family: 'Roboto', sans-serif;
-  font-weight: 700 !important;
-  letter-spacing: 0.83px !important;
-  line-height: 1 !important;
-}
-
-.i-amphtml-story-bookend-consent {
-  margin: 0 32px 32px !important;
-}
-
-.i-amphtml-story-bookend-consent .i-amphtml-story-bookend-heading {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.i-amphtml-story-bookend-article-meta {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 400 !important;
-  font-size: 14px !important;
-  line-height: 1 !important;
-  color: rgba(255, 255, 255, 0.6) !important;
-}
-
-.i-amphtml-story-bookend-article {
-  box-sizing: border-box !important;
-  display: block !important;
-  text-decoration: none !important;
-  color: inherit !important;
-  overflow: hidden !important;
-  flex: 1 0 320px !important;
-  min-width: calc(33%) !important;
-  margin: 24px 0 !important;
-  padding: 0 32px !important;
-}
-
-@media (min-width: 640px) {
-  .i-amphtml-story-bookend-article {
-    max-width: calc(50%) !important;
-  }
-}
-
-@media (min-width: 960px) {
-  .i-amphtml-story-bookend-article {
-    max-width: calc(33%) !important;
-  }
-}
-
-.i-amphtml-story-bookend-article-heading,
-.i-amphtml-story-bookend-consent-button {
-  font-family: 'Roboto', sans-serif !important;
-  font-weight: 400 !important;
-  font-size: 16px !important;
-  color: #fff !important;
-  line-height: 1.4;
-  margin: 0 0 8px !important;
-}
-
-.i-amphtml-story-bookend-article-image,
-.i-amphtml-story-bookend-replay-image {
-  width: 100px !important;
-  height: 100px !important;
-  border-radius: 8px !important;
-  overflow: hidden;
-}
-
-.i-amphtml-story-bookend-article-image.amp-notsupported {
-  display: none !important;
-}
-
-.i-amphtml-story-bookend-article-image > img {
-  object-fit: cover !important;
-  width: 100% !important;
-  height: 100% !important;
-}
-
-.i-amphtml-story-bookend-replay-image {
-  background-position: center center !important;
-  background-size: cover !important;
-}
-
-.i-amphtml-story-bookend-article-image,
-.i-amphtml-story-bookend-replay-image,
-.i-amphtml-story-bookend-replay-icon {
-  float: right !important;
-  margin-left: 24px !important;
-  position: relative !important;
-}
-
-.i-amphtml-story-bookend-replay {
-  padding: 16px 0 !important;
-  margin: 0 0 24px !important;
-  overflow: hidden !important;
-}
-
-.i-amphtml-story-bookend-replay-icon {
-  background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" fill="#ffffff"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')
-      center center no-repeat !important;
-}
-
-/* Replay icon when image is rendered */
-.i-amphtml-story-bookend-replay-image > .i-amphtml-story-bookend-replay-icon {
-  width: 100% !important;
-  height: 100% !important;
-  background-color: rgba(0, 0, 0, 0.3) !important;
-  position: absolute !important; /* overlays image */
-  margin-left: 0 !important;
-}
-
-/* Replay icon when no image is rendered */
-.i-amphtml-story-bookend-replay > .i-amphtml-story-bookend-replay-icon {
-  width: 48px !important;
-  height: 48px !important;
-  background-color: rgba(60, 60, 60, 0.5) !important;
-  position: static !important; /* independent when no image is rendered */
-  border-radius: 4px !important;
-}
-
-.i-amphtml-story-bookend-heading + .i-amphtml-story-bookend-article-set {
-  border-top: none !important;
-}
-
-.i-amphtml-story-bookend-article-set {
-  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
-  margin-bottom: 32px !important;
-  display: flex !important;
-  flex-wrap: wrap !important;
-  justify-content: space-between !important;
-}
-
-/* All top-level bookend elements need to set their own left/right margins */
-.i-amphtml-story-bookend-heading,
-.i-amphtml-story-bookend-replay {
-  margin-left: 32px !important;
-  margin-right: 32px !important;
-}
-
-.i-amphtml-story-bookend-fullbleed::before {
-  content: " " !important;
-  display: block !important;
-  background-image: linear-gradient(0deg, rgba(1,1,1,0.00) 0%, #000000 100%) !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  height: 40px !important;
-  pointer-events: none !important;
-  z-index: 1 !important;
-}
-
-.i-amphtml-story-bookend-fullbleed .i-amphtml-story-share-widget {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.i-amphtml-story-bookend-fullbleed .i-amphtml-story-share-list {
-  padding-left: 16px !important;
-  padding-right: 16px !important;
-}
-
-[desktop].i-amphtml-story-bookend {
-  transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
-  transform: translateY(0) !important;
-  opacity: 1 !important;
-}
-
-[desktop].i-amphtml-story-bookend.i-amphtml-hidden {
-  transition: opacity 0.2s cubic-bezier(0.4, 0.0, 1, 1) !important;
-  transform: translateY(100vh) !important;
-  opacity: 0 !important;
-}
-
-[desktop].i-amphtml-story-bookend .i-amphtml-story-share-widget {
-  /* TODO(alanorozco): Don't render at all when on desktop */
-  display: none !important;
-}
-
-[desktop] .i-amphtml-story-bookend-inner {
-  box-sizing: border-box !important;
-  min-height: 100vh !important;
-  padding: 104px 156px 64px !important;
-  margin: 0 !important;
-}
-
-[desktop] .i-amphtml-story-bookend-inner::before {
-  display: none !important;
-}
-
-[desktop] .i-amphtml-story-bookend-replay {
-  /* This is replaced with the forward button on desktop. */
-  display: none !important;
-}
-
-[desktop] .i-amphtml-story-bookend-overflow {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-@media (min-width: 952px) {
-  [desktop] .i-amphtml-story-bookend-article {
-    max-width: calc(50%) !important;
-  }
-}
-
-@media (min-width: 1272px) {
-  [desktop] .i-amphtml-story-bookend-article {
-    max-width: calc(33%) !important;
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-bookend.js b/extensions/amp-story/0.1/amp-story-bookend.js
deleted file mode 100644
index 01eb5deb0b931..0000000000000
--- a/extensions/amp-story/0.1/amp-story-bookend.js
+++ /dev/null
@@ -1,727 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {Action, StateProperty} from './amp-story-store-service';
-import {ActionTrust} from '../../../src/action-constants';
-import {CSS} from '../../../build/amp-story-bookend-0.1.css';
-import {
-  DEPRECATED_SHARE_PROVIDERS_KEY,
-  SHARE_PROVIDERS_KEY,
-  ScrollableShareWidget,
-} from './amp-story-share';
-import {EventType, dispatch} from './events';
-import {Keys} from '../../../src/utils/key-codes';
-import {LocalizedStringId} from '../../../src/localized-strings';
-import {Services} from '../../../src/services';
-import {closest} from '../../../src/dom';
-import {createShadowRootWithStyle} from './utils';
-import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from './../../../src/utils/object';
-import {getAmpdoc} from '../../../src/service';
-import {getJsonLd} from './jsonld';
-import {isArray} from '../../../src/types';
-import {isProtocolValid, parseUrlDeprecated} from '../../../src/url';
-import {
-  parseArticlesToClassicApi,
-  relatedArticlesFromJson,
-} from './related-articles';
-import {renderAsElement, renderSimpleTemplate} from './simple-template';
-import {throttle} from '../../../src/utils/rate-limit';
-
-/**
- * Key for omponents in bookend config.
- * @private @const {string}
- */
-const BOOKEND_VERSION_KEY = 'bookendVersion';
-const BOOKEND_VERSION_1 = 'v1.0';
-
-/**
- * Deprecated key for components in bookend config.
- * @private @const {string}
- */
-const DEPRECATED_BOOKEND_VERSION_KEY = 'bookend-version';
-
-/**
- * @typedef {{
- *   shareProviders: (!JsonObject|!Object<string, !JsonObject>),
- *   relatedArticles: !Array<!./related-articles.RelatedArticleSetDef>
- * }}
- */
-export let BookendConfigDef;
-
-/**
- * Scroll amount required for full-bleed in px.
- * @private @const {number}
- */
-const FULLBLEED_THRESHOLD = 88;
-
-/** @private @const {string} */
-const FULLBLEED_CLASSNAME = 'i-amphtml-story-bookend-fullbleed';
-
-/** @private @const {string} */
-const HIDDEN_CLASSNAME = 'i-amphtml-hidden';
-
-/** @private @const {!./simple-template.ElementDef} */
-const ROOT_TEMPLATE = {
-  tag: 'section',
-  attrs: dict({
-    'class':
-      'i-amphtml-story-bookend i-amphtml-story-system-reset ' +
-      HIDDEN_CLASSNAME,
-  }),
-  children: [
-    // Overflow container that gets pushed to the bottom when content height is
-    // smaller than viewport.
-    {
-      tag: 'div',
-      attrs: dict({'class': 'i-amphtml-story-bookend-overflow'}),
-      children: [
-        // Holds bookend content.
-        {
-          tag: 'div',
-          attrs: dict({'class': 'i-amphtml-story-bookend-inner'}),
-        },
-      ],
-    },
-  ],
-};
-
-/** @private @const {!./simple-template.ElementDef} */
-const REPLAY_ICON_TEMPLATE = {
-  tag: 'div',
-  attrs: dict({'class': 'i-amphtml-story-bookend-replay-icon'}),
-};
-
-/** @type {string} */
-const TAG = 'amp-story';
-
-/**
- * @param {?string} consentId
- * @return {!./simple-template.ElementDef}
- */
-const buildPromptConsentTemplate = (consentId) => {
-  return /** @type {!./simple-template.ElementDef} */ ({
-    tag: 'div',
-    attrs: dict({'class': 'i-amphtml-story-bookend-consent'}),
-    children: [
-      {
-        tag: 'h3',
-        attrs: dict({'class': 'i-amphtml-story-bookend-heading'}),
-        localizedStringId:
-          LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE,
-      },
-      {
-        tag: 'h2',
-        attrs: dict({
-          'class': 'i-amphtml-story-bookend-consent-button',
-          'on': `tap:${consentId}.prompt`,
-          'role': 'button',
-          'aria-label': 'Change data privacy settings',
-        }),
-        localizedStringId:
-          LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL,
-      },
-    ],
-  });
-};
-
-/**
- * @param {!./related-articles.RelatedArticleDef} articleData
- * @return {!./simple-template.ElementDef}
- */
-function buildArticleTemplate(articleData) {
-  const template = /** @type {!./simple-template.ElementDef} */ ({
-    tag: 'a',
-    attrs: dict({
-      'class': 'i-amphtml-story-bookend-article',
-      'href': articleData.url,
-      'target': '_top',
-    }),
-    children: [
-      {
-        tag: 'h2',
-        attrs: dict({'class': 'i-amphtml-story-bookend-article-heading'}),
-        unlocalizedString: articleData.title,
-      },
-      {
-        tag: 'div',
-        attrs: dict({'class': 'i-amphtml-story-bookend-article-meta'}),
-        unlocalizedString: articleData.domainName,
-      },
-    ],
-  });
-
-  if (articleData.image) {
-    template.children.unshift(
-      /** @type {!./simple-template.ElementDef} */ ({
-        tag: 'amp-img',
-        attrs: dict({
-          'class': 'i-amphtml-story-bookend-article-image',
-          'src': articleData.image,
-          'width': 100,
-          'height': 100,
-        }),
-      })
-    );
-  }
-
-  return template;
-}
-
-/**
- * @param {!Array<!./related-articles.RelatedArticleSetDef>} articleSets
- * @return {!Array<!./simple-template.ElementDef>}
- */
-function buildArticlesContainerTemplate(articleSets) {
-  const template = [];
-
-  articleSets.forEach((articleSet) => {
-    if (articleSet.heading) {
-      template.push({
-        tag: 'h3',
-        attrs: dict({'class': 'i-amphtml-story-bookend-heading'}),
-        unlocalizedString: articleSet.heading,
-      });
-    }
-    template.push({
-      tag: 'div',
-      attrs: dict({'class': 'i-amphtml-story-bookend-article-set'}),
-      children: articleSet.articles.map((article) =>
-        buildArticleTemplate(article)
-      ),
-    });
-  });
-
-  return template;
-}
-
-/**
- * @param {!Document} doc
- * @param {string} title
- * @param {string} domainName
- * @param {string=} opt_imageUrl
- * @return {!./simple-template.ElementDef}
- */
-function buildReplayButtonTemplate(doc, title, domainName, opt_imageUrl) {
-  return /** @type {!./simple-template.ElementDef} */ ({
-    tag: 'div',
-    attrs: dict({'class': 'i-amphtml-story-bookend-replay'}),
-    children: [
-      !opt_imageUrl
-        ? REPLAY_ICON_TEMPLATE
-        : {
-            tag: 'div',
-            attrs: dict({
-              'class': 'i-amphtml-story-bookend-replay-image',
-              'style': `background-image: url(${opt_imageUrl}) !important`,
-            }),
-            children: [REPLAY_ICON_TEMPLATE],
-          },
-      {
-        tag: 'h2',
-        attrs: dict({'class': 'i-amphtml-story-bookend-article-heading'}),
-        unlocalizedString: title,
-      },
-      {
-        tag: 'div',
-        attrs: dict({'class': 'i-amphtml-story-bookend-article-meta'}),
-        unlocalizedString: domainName,
-      },
-    ],
-  });
-}
-
-/**
- * Bookend component for <amp-story>.
- * This component has to be built and preloaded before it can be displayed,
- * through the 'build' and 'loadConfig' method. It can then be toggled by
- * dispatching the store TOGGLE_BOOKEND action.
- */
-export class Bookend {
-  /**
-   * @param {!Window} win
-   * @param {!Element} parentEl Element where to append the bookend
-   */
-  constructor(win, parentEl) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private {?./amp-story-bookend.BookendConfigDef|undefined} */
-    this.config_;
-
-    /** @private {boolean} */
-    this.isBuilt_ = false;
-
-    /** @private {boolean} */
-    this.isConfigRendered_ = false;
-
-    /** @private {?Element} */
-    this.replayButton_ = null;
-
-    /**
-     * Root element containing a shadow DOM root.
-     * @private {?Element}
-     */
-    this.root_ = null;
-
-    /**
-     * Actual bookend.
-     * @private {?Element}
-     */
-    this.bookendEl_ = null;
-
-    /** @private @const {!./amp-story-request-service.AmpStoryRequestService} */
-    this.requestService_ = Services.storyRequestServiceV01(this.win_);
-
-    /** @private {!ScrollableShareWidget} */
-    this.shareWidget_ = ScrollableShareWidget.create(this.win_, parentEl);
-
-    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
-    this.storeService_ = Services.storyStoreServiceV01(this.win_);
-
-    /** @private @const {!Element} */
-    this.parentEl_ = parentEl;
-
-    /** @private @const {!../../../src/service/vsync-impl.Vsync} */
-    this.vsync_ = Services.vsyncFor(this.win_);
-  }
-
-  /**
-   * Builds the bookend components and appends it to the provided story.
-   */
-  build() {
-    if (this.isBuilt_) {
-      return;
-    }
-
-    this.isBuilt_ = true;
-
-    this.root_ = this.win_.document.createElement('div');
-    this.bookendEl_ = renderAsElement(this.win_.document, ROOT_TEMPLATE);
-
-    createShadowRootWithStyle(this.root_, this.bookendEl_, CSS);
-
-    this.replayButton_ = this.buildReplayButton_();
-
-    const ampdoc = getAmpdoc(this.parentEl_);
-
-    const innerContainer = this.getInnerContainer_();
-    innerContainer.appendChild(this.replayButton_);
-    innerContainer.appendChild(this.shareWidget_.build(ampdoc));
-
-    const consentId = this.storeService_.get(StateProperty.CONSENT_ID);
-
-    if (consentId) {
-      const promptConsentEl = renderAsElement(
-        this.win_.document,
-        buildPromptConsentTemplate(String(consentId))
-      );
-      innerContainer.appendChild(promptConsentEl);
-    }
-
-    this.initializeListeners_();
-
-    this.vsync_.mutate(() => {
-      this.parentEl_.appendChild(this.getRoot());
-    });
-  }
-
-  /**
-   * @private
-   */
-  initializeListeners_() {
-    this.getShadowRoot().addEventListener('click', (event) =>
-      this.onClick_(event)
-    );
-    this.replayButton_.addEventListener('click', (event) =>
-      this.onReplayButtonClick_(event)
-    );
-
-    this.getOverflowContainer_().addEventListener(
-      'scroll',
-      // minInterval is high since this is a step function that does not
-      // require smoothness
-      throttle(this.win_, () => this.onScroll_(), 100)
-    );
-
-    this.win_.addEventListener('keyup', (event) => {
-      if (!this.isActive_()) {
-        return;
-      }
-      if (event.key == Keys.ESCAPE) {
-        event.preventDefault();
-        this.close_();
-      }
-    });
-
-    this.storeService_.subscribe(StateProperty.BOOKEND_STATE, (isActive) => {
-      this.onBookendStateUpdate_(isActive);
-    });
-
-    this.storeService_.subscribe(
-      StateProperty.CAN_SHOW_SHARING_UIS,
-      (show) => {
-        this.onCanShowSharingUisUpdate_(show);
-      },
-      true /** callToInitialize */
-    );
-
-    this.storeService_.subscribe(
-      StateProperty.DESKTOP_STATE,
-      (isDesktop) => {
-        this.onDesktopStateUpdate_(isDesktop);
-      },
-      true /** callToInitialize */
-    );
-  }
-
-  /**
-   * Whether the bookend is displayed.
-   * @return {boolean}
-   * @private
-   */
-  isActive_() {
-    return !!this.storeService_.get(StateProperty.BOOKEND_STATE);
-  }
-
-  /**
-   * @param {!Event} event
-   * @private
-   */
-  onReplayButtonClick_(event) {
-    event.stopPropagation();
-    dispatch(this.getRoot(), EventType.REPLAY, /* opt_bubbles */ true);
-  }
-
-  /**
-   * Reacts to bookend state updates.
-   * @param {boolean} isActive
-   * @private
-   */
-  onBookendStateUpdate_(isActive) {
-    this.toggle_(isActive);
-  }
-
-  /**
-   * Reacts to updates to whether sharing UIs may be shown, and updates the UI
-   * accordingly.
-   * @param {boolean} canShowSharingUis
-   * @private
-   */
-  onCanShowSharingUisUpdate_(canShowSharingUis) {
-    this.vsync_.mutate(() => {
-      this.getShadowRoot().classList.toggle(
-        'i-amphtml-story-no-sharing',
-        !canShowSharingUis
-      );
-    });
-  }
-
-  /**
-   * Reacts to desktop state updates.
-   * @param {boolean} isDesktop
-   * @private
-   */
-  onDesktopStateUpdate_(isDesktop) {
-    this.toggleDesktopAttribute_(isDesktop);
-  }
-
-  /**
-   * Reads the bookend version from the bookend JSON config.
-   * @param {!JsonObject} config
-   * @return {?string}
-   * @private
-   */
-  readBookendVersion_(config) {
-    if (config[DEPRECATED_BOOKEND_VERSION_KEY]) {
-      user().warn(
-        'AMP-STORY-BOOKEND',
-        '`bookend-version` and ' +
-          '`share-providers` keys in the bookend config are deprecated, please ' +
-          '`bookendVersion` and `shareProviders` keys'
-      );
-    }
-
-    return (
-      config[DEPRECATED_BOOKEND_VERSION_KEY] ||
-      config[BOOKEND_VERSION_KEY] ||
-      null
-    );
-  }
-
-  /**
-   * Retrieves the publisher bookend configuration. Applying the configuration
-   * will prerender the bookend DOM, but there are cases where we need it before
-   * the component is built. Eg: the desktop share button needs the providers.
-   * @param {boolean=} applyConfig  Whether the config should be set.
-   * @return {!Promise<?./amp-story-bookend.BookendConfigDef>}
-   */
-  loadConfig(applyConfig = true) {
-    if (this.config_ !== undefined) {
-      if (applyConfig && this.config_) {
-        this.setConfig_(this.config_);
-      }
-      return Promise.resolve(this.config_);
-    }
-
-    return this.requestService_
-      .loadBookendConfig()
-      .then((response) => {
-        if (!response) {
-          return null;
-        }
-        if (this.readBookendVersion_(response) === BOOKEND_VERSION_1) {
-          this.config_ = {
-            shareProviders: this.shareWidget_.parseProvidersToClassicApi(
-              response[SHARE_PROVIDERS_KEY] ||
-                response[DEPRECATED_SHARE_PROVIDERS_KEY]
-            ),
-            relatedArticles: parseArticlesToClassicApi(response['components']),
-          };
-        } else {
-          this.config_ = {
-            shareProviders: response['share-providers'],
-            relatedArticles: relatedArticlesFromJson(
-              response['related-articles']
-            ),
-          };
-        }
-
-        // Allows the config to be fetched before the component is built, for
-        // cases like getting the share providers on desktop.
-        if (applyConfig) {
-          this.setConfig_(this.config_);
-        }
-
-        return this.config_;
-      })
-      .catch((e) => {
-        user().error(TAG, 'Error fetching bookend configuration', e.message);
-        return null;
-      });
-  }
-
-  /**
-   * Handles click events on the bookend:
-   *   - Closes bookend if tapping outside usable area
-   *   - Forwards AMP actions
-   * @param {!Event} event
-   * @private
-   */
-  onClick_(event) {
-    const target = dev().assertElement(event.target);
-
-    if (this.elementOutsideUsableArea_(target)) {
-      event.stopPropagation();
-      this.close_();
-      return;
-    }
-
-    if (target.hasAttribute('on')) {
-      const actionService = Services.actionServiceForDoc(this.parentEl_);
-      actionService.trigger(target, 'tap', event, ActionTrust.HIGH);
-    }
-  }
-
-  /**
-   * Closes the bookend.
-   */
-  close_() {
-    this.storeService_.dispatch(Action.TOGGLE_BOOKEND, false);
-  }
-
-  /**
-   * @param {!Element} el
-   * @return {boolean}
-   */
-  elementOutsideUsableArea_(el) {
-    return !closest(el, (el) => el == this.getInnerContainer_());
-  }
-
-  /**
-   * Changes between card view and full-bleed based on scroll position.
-   * @private
-   */
-  onScroll_() {
-    if (!this.isActive_()) {
-      return;
-    }
-    this.vsync_.run(
-      {
-        measure: (state) => {
-          state.shouldBeFullBleed =
-            this.getOverflowContainer_()./*OK*/ scrollTop >=
-            FULLBLEED_THRESHOLD;
-        },
-        mutate: (state) => {
-          this.getShadowRoot().classList.toggle(
-            FULLBLEED_CLASSNAME,
-            state.shouldBeFullBleed
-          );
-        },
-      },
-      {}
-    );
-  }
-
-  /**
-   * @param {boolean} show
-   * @private
-   */
-  toggle_(show) {
-    this.vsync_.mutate(() => {
-      this.getShadowRoot().classList.toggle(HIDDEN_CLASSNAME, !show);
-    });
-  }
-
-  /**
-   * Toggles the bookend desktop UI.
-   * @param {boolean} isDesktop
-   * @private
-   */
-  toggleDesktopAttribute_(isDesktop) {
-    this.vsync_.mutate(() => {
-      isDesktop
-        ? this.getShadowRoot().setAttribute('desktop', '')
-        : this.getShadowRoot().removeAttribute('desktop');
-    });
-  }
-
-  /**
-   * @return {boolean}
-   */
-  isBuilt() {
-    return this.isBuilt_;
-  }
-
-  /** @private */
-  assertBuilt_() {
-    devAssert(this.isBuilt(), 'Bookend component needs to be built.');
-  }
-
-  /**
-   * @param {!BookendConfigDef} bookendConfig
-   * @private
-   */
-  setConfig_(bookendConfig) {
-    if (this.isConfigRendered_) {
-      return;
-    }
-
-    this.assertBuilt_();
-    this.isConfigRendered_ = true;
-
-    this.setRelatedArticles_(bookendConfig.relatedArticles);
-  }
-
-  /**
-   * @param {!Array<!./related-articles.RelatedArticleSetDef>} articleSets
-   * @private
-   */
-  setRelatedArticles_(articleSets) {
-    this.vsync_.mutate(() => {
-      this.getInnerContainer_().appendChild(
-        renderSimpleTemplate(
-          this.win_.document,
-          buildArticlesContainerTemplate(articleSets)
-        )
-      );
-    });
-  }
-
-  /** @return {!Element} */
-  getRoot() {
-    this.assertBuilt_();
-    return dev().assertElement(this.root_);
-  }
-
-  /** @return {!Element} */
-  getShadowRoot() {
-    this.assertBuilt_();
-    return dev().assertElement(this.bookendEl_);
-  }
-
-  /**
-   * Gets container for bookend content.
-   * @return {!Element}
-   * @private
-   */
-  getInnerContainer_() {
-    return dev().assertElement(this.getOverflowContainer_().firstElementChild);
-  }
-
-  /**
-   * Gets outer container that gets scrolled.
-   * @return {!Element}
-   * @private
-   */
-  getOverflowContainer_() {
-    return dev().assertElement(this.getShadowRoot().firstElementChild);
-  }
-
-  /**
-   * @return {{
-   *   title: string,
-   *   domainName: string,
-   *   imageUrl: (string|undefined),
-   * }}
-   * @private
-   */
-  getStoryMetadata_() {
-    const ampdoc = getAmpdoc(this.parentEl_);
-    const jsonLd = getJsonLd(ampdoc.getRootNode());
-
-    const metadata = {
-      title:
-        jsonLd && jsonLd['headline']
-          ? jsonLd['headline']
-          : user().assertElement(
-              this.win_.document.head.querySelector('title'),
-              'Please set <title> or structured data (JSON-LD).'
-            ).textContent,
-
-      domainName: parseUrlDeprecated(
-        Services.documentInfoForDoc(ampdoc).canonicalUrl
-      ).hostname,
-    };
-
-    if (jsonLd && isArray(jsonLd['image']) && jsonLd['image'].length) {
-      userAssert(
-        isProtocolValid(jsonLd['image']),
-        `Unsupported protocol for story image URL ${jsonLd['image']}`
-      );
-      metadata.imageUrl = jsonLd['image'][0];
-    }
-
-    return metadata;
-  }
-
-  /**
-   * @return {!Element}
-   * @private
-   */
-  buildReplayButton_() {
-    const metadata = this.getStoryMetadata_();
-    return renderAsElement(
-      this.win_.document,
-      buildReplayButtonTemplate(
-        this.win_.document,
-        metadata.title,
-        metadata.domainName,
-        metadata.imageUrl
-      )
-    );
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-consent.css b/extensions/amp-story/0.1/amp-story-consent.css
deleted file mode 100644
index 226f32fa23d35..0000000000000
--- a/extensions/amp-story/0.1/amp-story-consent.css
+++ /dev/null
@@ -1,256 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-.i-amphtml-story-consent {
-  position: absolute !important;
-  display: flex !important;
-  flex-direction: column !important;
-  top: 0 !important;
-  left: 0 !important;
-  height: 100% !important;
-  width: 100% !important;
-  z-index: 100003 !important;
-}
-
-/** Black opacity overlay. */
-.i-amphtml-story-consent::before {
-  content: "" !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  height: 100% !important;
-  width: 100% !important;
-  background: #000000 !important;
-  opacity: 0.4 !important;
-}
-
-.i-amphtml-story-consent-overflow {
-  margin-top: auto !important;
-  overflow-y: auto !important;
-  overflow-x: hidden !important;
-  /* Enable iOS momentum scrolling. */
-  -webkit-overflow-scrolling: touch !important;
-}
-
-.i-amphtml-story-consent-container {
-  position: relative !important;
-  margin: 88px 8px 72px !important;
-  background: #FFFFFF !important;
-  border-radius: 8px 8px 0 0 !important;
-  color: rgba(0, 0, 0, 0.87) !important;
-  font-family: 'Roboto', sans-serif !important;
-  text-align: left !important;
-  overflow: hidden !important;
-}
-
-.i-amphtml-story-consent-fullbleed .i-amphtml-story-consent-container {
-  margin: 88px 0px 72px !important;
-  padding: 0 8px !important;
-  border-radius: initial !important;
-}
-
-/** Consent header. */
-
-.i-amphtml-story-consent-header {
-  position: relative !important;
-  height: 80px !important;
-  min-height: 80px !important;
-  background: var(--primary-color, #F0F0F0) !important;
-  z-index: 2 !important;
-
-  /* Making sure the background color fills the container in full bleed mode. */
-  margin: 0 -8px !important;
-}
-
-.i-amphtml-story-consent-logo {
-  position: absolute !important;
-  bottom: -32px !important;
-  margin-left: -32px !important;
-  left: 50% !important;
-  height: 64px !important;
-  width: 64px !important;
-  background: #F0F0F0 !important;
-  background-position: center !important;
-  background-repeat: no-repeat !important;
-  background-size: contain !important;
-  border-radius: 5px !important;
-}
-
-.i-amphtml-story-consent-logo::before {
-  content: "" !important;
-  position: absolute !important;
-  top: -6px !important;
-  bottom: -6px !important;
-  left: -6px !important;
-  right: -6px !important;
-  background: #FFFFFF !important;
-  border-radius: 6px !important;
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12) !important;
-  z-index: -1 !important;
-}
-
-/** Consent content. */
-
-.i-amphtml-story-consent-content {
-  padding: 42px 16px 16px !important;
-  font-size: 14px !important;
-  z-index: 0 !important;
-}
-
-.i-amphtml-story-consent-vendors {
-  margin: 0 !important;
-  padding: 0 !important;
-  list-style: none !important;
-}
-
-.i-amphtml-story-consent-vendor {
-  height: 40px !important;
-  border-bottom: 1px solid #F0F0F0 !important;
-  line-height: 40px !important;
-  text-overflow: ellipsis !important;
-  overflow: hidden !important;
-}
-
-.i-amphtml-story-consent-external-link {
-  position: relative !important;
-  display: inline-block !important;
-  margin: 24px 0 !important;
-  color: rgba(0, 0, 0, 0.87) !important;
-  font-size: 15px !important;
-  font-weight: bold !important;
-  text-decoration: none !important;
-}
-
-.i-amphtml-story-consent-external-link:hover {
-  text-decoration: underline !important;
-}
-
-.i-amphtml-story-consent-external-link::after {
-  content: "" !important;
-  position: absolute !important;
-  display: block !important;
-  height: 16px !important;
-  width: 16px !important;
-  top: 3px !important;
-  right: -20px !important;
-  background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="rgba(0, 0, 0, 0.87)"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')
-      center center no-repeat !important;
-}
-
-.i-amphtml-story-consent-external-link.i-amphtml-hidden {
-  display: none !important;
-}
-
-/** Consent actions. */
-
-.i-amphtml-story-consent-actions {
-  position: absolute !important;
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
-  bottom: 0 !important;
-  left: 8px !important;
-  right: 8px !important;
-  height: 72px !important;
-  min-height: 72px !important;
-  background: #FFFFFF !important;
-  box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.12) !important;
-  z-index: 1 !important;
-}
-
-.i-amphtml-story-consent-fullbleed .i-amphtml-story-consent-actions {
-  left: 0px !important;
-  right: 0px !important;
-}
-
-.i-amphtml-story-consent-action {
-  position: relative !important;
-  padding: 0 24px !important;
-  margin: 0 12px !important;
-  height: 40px !important;
-  width: 40vw !important;
-  background: #FFFFFF !important;
-  border: none !important;
-  border-radius: 40px !important;
-  box-sizing: border-box !important;
-  cursor: pointer !important;
-  font-size: 13px !important;
-  font-weight: bold !important;
-  line-height: 40px !important;
-  text-transform: uppercase !important;
-}
-
-.i-amphtml-story-consent-action.i-amphtml-hidden {
-  display: none !important;
-}
-
-.i-amphtml-story-consent-action-accept {
-  background: var(--primary-color, #000000) !important;
-  color: #FFFFFF !important;
-}
-
-.i-amphtml-story-consent-action-reject {
-  border: 1px solid #000000 !important;
-}
-
-/**
- * Tablets and desktop UI overrides.
- * Basically triggers for anything bigger than a Pixel XL / iPhone Plus.
- */
-
-@media (min-width: 420px) {
-  .i-amphtml-story-consent {
-    align-items: center !important;
-    justify-content: center !important;
-  }
-
-  .i-amphtml-story-consent-overflow {
-    margin-top: 0 !important;
-  }
-
-  .i-amphtml-story-consent-container {
-    display: flex !important;
-    flex-direction: column !important;
-    margin: 0 !important;
-    max-height: 80vh !important;
-    min-height: 40vh !important;
-    width: calc(100vw - 80px) !important;
-    max-width: 800px !important;
-  }
-
-  .i-amphtml-story-consent-content {
-    margin: 0 auto !important;
-    max-width: 424px !important; /** Width of the action buttons. */
-    flex-grow: 1 !important;
-    overflow-y: auto !important;
-  }
-
-  .i-amphtml-story-consent-content::-webkit-scrollbar {
-    width: 0px !important;
-    background: transparent !important;
-  }
-
-  .i-amphtml-story-consent-actions {
-    position: relative !important;
-    left: 0px !important;
-    right: 0px !important;
-  }
-
-  .i-amphtml-story-consent-action {
-    width: 33vw !important;
-    max-width: 200px !important;
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-consent.js b/extensions/amp-story/0.1/amp-story-consent.js
deleted file mode 100644
index 99d7b504772bd..0000000000000
--- a/extensions/amp-story/0.1/amp-story-consent.js
+++ /dev/null
@@ -1,376 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {Action} from './amp-story-store-service';
-import {ActionTrust} from '../../../src/action-constants';
-import {CSS} from '../../../build/amp-story-consent-0.1.css';
-import {Layout} from '../../../src/layout';
-import {LocalizedStringId} from '../../../src/localized-strings';
-import {Services} from '../../../src/services';
-import {assertAbsoluteHttpOrHttpsUrl} from '../../../src/url';
-import {
-  childElementByTag,
-  closestAncestorElementBySelector,
-  isJsonScriptTag,
-} from '../../../src/dom';
-import {computedStyle, setImportantStyles} from '../../../src/style';
-import {
-  createShadowRootWithStyle,
-  getRGBFromCssColorValue,
-  getTextColorForRGB,
-} from './utils';
-import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from './../../../src/utils/object';
-import {isArray} from '../../../src/types';
-import {parseJson} from '../../../src/json';
-import {renderAsElement} from './simple-template';
-import {throttle} from '../../../src/utils/rate-limit';
-
-/** @const {string} */
-const TAG = 'amp-story-consent';
-
-/**
- * Default optional config parameters.
- * @const {!Object}
- */
-const DEFAULT_OPTIONAL_PARAMETERS = {
-  externalLink: {},
-  onlyAccept: false,
-};
-
-// TODO(gmajoulet): switch to `htmlFor` static template helper.
-/**
- * Story consent template.
- * @param {!Object} config
- * @param {string} consentId
- * @param {?string} logoSrc
- * @return {!./simple-template.ElementDef}
- * @private @const
- */
-const getTemplate = (config, consentId, logoSrc) => ({
-  tag: 'div',
-  attrs: dict({
-    'class': 'i-amphtml-story-consent i-amphtml-story-system-reset',
-  }),
-  children: [
-    {
-      tag: 'div',
-      attrs: dict({'class': 'i-amphtml-story-consent-overflow'}),
-      children: [
-        {
-          tag: 'div',
-          attrs: dict({'class': 'i-amphtml-story-consent-container'}),
-          children: [
-            {
-              tag: 'div',
-              attrs: dict({'class': 'i-amphtml-story-consent-header'}),
-              children: [
-                {
-                  tag: 'div',
-                  attrs: dict({
-                    'class': 'i-amphtml-story-consent-logo',
-                    'style': logoSrc
-                      ? `background-image: url('${logoSrc}') !important;`
-                      : '',
-                  }),
-                  children: [],
-                },
-              ],
-            },
-            {
-              tag: 'div',
-              attrs: dict({'class': 'i-amphtml-story-consent-content'}),
-              children: [
-                {
-                  tag: 'h3',
-                  attrs: dict({}),
-                  children: [],
-                  unlocalizedString: config.title,
-                },
-                {
-                  tag: 'p',
-                  attrs: dict({}),
-                  children: [],
-                  unlocalizedString: config.message,
-                },
-                {
-                  tag: 'ul',
-                  attrs: dict({'class': 'i-amphtml-story-consent-vendors'}),
-                  children:
-                    config.vendors &&
-                    config.vendors.map((vendor) => ({
-                      tag: 'li',
-                      attrs: dict({'class': 'i-amphtml-story-consent-vendor'}),
-                      children: [],
-                      unlocalizedString: vendor,
-                    })),
-                },
-                {
-                  tag: 'a',
-                  attrs: dict({
-                    'class':
-                      'i-amphtml-story-consent-external-link ' +
-                      (!(config.externalLink.title && config.externalLink.href)
-                        ? 'i-amphtml-hidden'
-                        : ''),
-                    'href': config.externalLink.href,
-                    'target': '_top',
-                    'title': config.externalLink.title,
-                  }),
-                  children: [],
-                  unlocalizedString: config.externalLink.title,
-                },
-              ],
-            },
-          ],
-        },
-        {
-          tag: 'div',
-          attrs: dict({'class': 'i-amphtml-story-consent-actions'}),
-          children: [
-            {
-              tag: 'button',
-              attrs: dict({
-                'class':
-                  'i-amphtml-story-consent-action ' +
-                  'i-amphtml-story-consent-action-reject' +
-                  (config.onlyAccept === true ? ' i-amphtml-hidden' : ''),
-                'on': `tap:${consentId}.reject`,
-              }),
-              children: [],
-              localizedStringId:
-                LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL,
-            },
-            {
-              tag: 'button',
-              attrs: dict({
-                'class':
-                  'i-amphtml-story-consent-action ' +
-                  'i-amphtml-story-consent-action-accept',
-                'on': `tap:${consentId}.accept`,
-              }),
-              children: [],
-              localizedStringId:
-                LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL,
-            },
-          ],
-        },
-      ],
-    },
-  ],
-});
-
-/**
- * The <amp-story-consent> custom element.
- */
-export class AmpStoryConsent extends AMP.BaseElement {
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-
-    /** @const @private {!../../../src/service/action-impl.ActionService} */
-    this.actions_ = Services.actionServiceForDoc(this.element);
-
-    /** @private {?Element} */
-    this.scrollableEl_ = null;
-
-    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
-    this.storeService_ = Services.storyStoreServiceV01(this.win);
-
-    /** @private {?Object} */
-    this.storyConsentConfig_ = null;
-
-    /** @private {?Element} */
-    this.storyConsentEl_ = null;
-  }
-
-  /** @override */
-  buildCallback() {
-    this.assertAndParseConfig_();
-
-    const storyEl = closestAncestorElementBySelector(this.element, 'AMP-STORY');
-    const consentEl = closestAncestorElementBySelector(
-      this.element,
-      'AMP-CONSENT'
-    );
-    const consentId = consentEl.id;
-    this.storeService_.dispatch(Action.SET_CONSENT_ID, consentId);
-
-    const logoSrc = storyEl && storyEl.getAttribute('publisher-logo-src');
-
-    if (!logoSrc) {
-      user().warn(
-        TAG,
-        'Expected "publisher-logo-src" attribute on <amp-story>'
-      );
-    }
-
-    // Story consent config is set by the `assertAndParseConfig_` method.
-    if (this.storyConsentConfig_) {
-      this.storyConsentEl_ = renderAsElement(
-        this.win.document,
-        getTemplate(this.storyConsentConfig_, consentId, logoSrc)
-      );
-      createShadowRootWithStyle(this.element, this.storyConsentEl_, CSS);
-
-      // Allow <amp-consent> actions in STAMP (defaults to no actions allowed).
-      this.actions_.addToAllowlist('AMP-CONSENT', 'accept');
-      this.actions_.addToAllowlist('AMP-CONSENT', 'prompt');
-      this.actions_.addToAllowlist('AMP-CONSENT', 'reject');
-
-      this.setAcceptButtonFontColor_();
-
-      this.initializeListeners_();
-    }
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout == Layout.NODISPLAY;
-  }
-
-  /**
-   * @private
-   */
-  initializeListeners_() {
-    this.storyConsentEl_.addEventListener(
-      'click',
-      (event) => this.onClick_(event),
-      true /** useCapture */
-    );
-
-    this.scrollableEl_ = this.storyConsentEl_.querySelector(
-      '.i-amphtml-story-consent-overflow'
-    );
-    this.scrollableEl_.addEventListener(
-      'scroll',
-      throttle(this.win, () => this.onScroll_(), 100)
-    );
-  }
-
-  /**
-   * Listens to click events to trigger the actions programatically.
-   * Since events bubble up from the Shadow DOM but their target is updated to
-   * the Shadow root, the top level actions event listeners would not detect
-   * and trigger the actions upon click events.
-   * @param {!Event} event
-   * @private
-   */
-  onClick_(event) {
-    if (event.target && event.target.hasAttribute('on')) {
-      const targetEl = dev().assertElement(event.target);
-      this.actions_.trigger(targetEl, 'tap', event, ActionTrust.HIGH);
-    }
-  }
-
-  /**
-   * Toggles the fullbleed UI on scroll.
-   * @private
-   */
-  onScroll_() {
-    let isFullBleed;
-
-    const measurer = () =>
-      (isFullBleed = this.scrollableEl_./*OK*/ scrollTop > 88);
-    const mutator = () => {
-      this.storyConsentEl_.classList.toggle(
-        'i-amphtml-story-consent-fullbleed',
-        isFullBleed
-      );
-    };
-
-    Services.mutatorForDoc(this.getAmpDoc())./*OK*/ measureMutateElement(
-      devAssert(this.storyConsentEl_),
-      measurer,
-      mutator
-    );
-  }
-
-  /**
-   * Validates the story-consent config. `story-consent` is a new parameter
-   * specific to stories, added on the `amp-consent` JSON config.
-   * @private
-   */
-  assertAndParseConfig_() {
-    const storyConsentScript = childElementByTag(this.element, 'script');
-
-    userAssert(
-      storyConsentScript && isJsonScriptTag(storyConsentScript),
-      `${TAG} config should be put in a <script> tag with ` +
-        'type="application/json"'
-    );
-
-    this.storyConsentConfig_ = {
-      ...DEFAULT_OPTIONAL_PARAMETERS,
-      ...parseJson(storyConsentScript.textContent),
-    };
-
-    user().assertString(
-      this.storyConsentConfig_.title,
-      `${TAG}: config requires a title`
-    );
-    user().assertString(
-      this.storyConsentConfig_.message,
-      `${TAG}: config requires a message`
-    );
-    userAssert(
-      this.storyConsentConfig_.vendors &&
-        isArray(this.storyConsentConfig_.vendors),
-      `${TAG}: config requires an array of vendors`
-    );
-    user().assertBoolean(
-      this.storyConsentConfig_.onlyAccept,
-      `${TAG}: config requires "onlyAccept" to be a boolean`
-    );
-
-    // Runs the validation if any of the title or link are provided, since
-    // both have to be provided for the external link to be displayed.
-    if (
-      this.storyConsentConfig_.externalLink.href ||
-      this.storyConsentConfig_.externalLink.title
-    ) {
-      user().assertString(
-        this.storyConsentConfig_.externalLink.title,
-        `${TAG}: config requires "externalLink.title" to be a string`
-      );
-      user().assertString(
-        this.storyConsentConfig_.externalLink.href,
-        `${TAG}: config requires "externalLink.href" to be an absolute URL`
-      );
-      assertAbsoluteHttpOrHttpsUrl(this.storyConsentConfig_.externalLink.href);
-    }
-  }
-
-  /**
-   * Sets the accept button font color to either white or black, depending on
-   * the publisher custom background color.
-   * Must be called from the `buildCallback` or in another vsync mutate state.
-   * @private
-   */
-  setAcceptButtonFontColor_() {
-    const buttonEl = dev().assertElement(
-      this.storyConsentEl_.querySelector(
-        '.i-amphtml-story-consent-action-accept'
-      )
-    );
-    const styles = computedStyle(this.win, buttonEl);
-
-    const rgb = getRGBFromCssColorValue(styles['background-color']);
-    const color = getTextColorForRGB(rgb);
-
-    setImportantStyles(buttonEl, {color});
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-cta-layer.js b/extensions/amp-story/0.1/amp-story-cta-layer.js
deleted file mode 100644
index dee778f143169..0000000000000
--- a/extensions/amp-story/0.1/amp-story-cta-layer.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-/**
- * @fileoverview This is a layer that allows a call to action in a story page.
- * With this, a user could link to an external site from inside a story using
- * the call to action layer, for example.
- *
- * Example:
- * ...
- * <amp-story-page>
- *   <amp-story-cta-layer>
- *     <a href="wwww.google.com"> Visit my site! </a>
- *   </amp-story-cta-layer>
- * <amp-story-page>
- * ...
- */
-
-import {AmpStoryBaseLayer} from './amp-story-base-layer';
-
-/**
- * Call to action button layer template.
- *
- * No pre-rendering to let more computing-intensive elements (like
- * videos) get pre-rendered first. Since this layer will not contain
- * computing-intensive resources such as videos, we can just risk rendering
- * while the user is looking.
- */
-export class AmpStoryCtaLayer extends AmpStoryBaseLayer {
-  /** @override */
-  buildCallback() {
-    super.buildCallback();
-    this.setOrOverwriteTargetAttribute_();
-  }
-
-  /**
-   * Overwrite or set target attribute to _blank in call-to-action links.
-   * @private
-   */
-  setOrOverwriteTargetAttribute_() {
-    const ctaLinks = this.element.querySelectorAll('a');
-    for (let i = 0; i < ctaLinks.length; i++) {
-      ctaLinks[i].setAttribute('target', '_blank');
-    }
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-desktop-user-overridable.css b/extensions/amp-story/0.1/amp-story-desktop-user-overridable.css
deleted file mode 100644
index 36d44d5457826..0000000000000
--- a/extensions/amp-story/0.1/amp-story-desktop-user-overridable.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-
-.i-amphtml-story-background {
-  background-color: transparent;
-}
-
diff --git a/extensions/amp-story/0.1/amp-story-desktop.css b/extensions/amp-story/0.1/amp-story-desktop.css
deleted file mode 100644
index 1b455abfaa688..0000000000000
--- a/extensions/amp-story/0.1/amp-story-desktop.css
+++ /dev/null
@@ -1,456 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-@import './amp-story-desktop-user-overridable.css';
-
-
-amp-story[standalone][desktop] {
- max-width: none!important;
- max-height: none!important;
- width: 100vw!important;
-}
-
-[desktop] .i-amphtml-story-logo {
- display: block!important;
-}
-
-.i-amphtml-story-background-container {
- opacity: .8!important;
- position: absolute!important;
- top: 0!important;
- right: 0!important;
- bottom: 0!important;
- left: 0!important;
- overflow: hidden !important;
-}
-
-.i-amphtml-story-background-overlay,
-.i-amphtml-story-background-overlay::after {
-  position: absolute !important;
-  left: 0 !important;
-  top: 0 !important;
-  height: 100% !important;
-  width: 100% !important;
-  z-index: 1 !important;
-  background-color: rgba(0, 0, 0, 0.2) !important;
-}
-
-/* Separate layer so overlay opacity can transition from 20% to 70%. */
-.i-amphtml-story-background-overlay::after {
-  content: '' !important;
-  display: block !important;
-  opacity: 0 !important;
-  background-color: rgba(0, 0, 0, 0.5) !important;
-  transition: opacity 0.3s !important;
-}
-
-.i-amphtml-story-bookend-active .i-amphtml-story-background-overlay::after {
-  opacity: 1 !important;
-}
-
-.i-amphtml-story-background {
-  position: absolute !important;
-  top: -150px !important;
-  right: -150px !important;
-  bottom: -150px !important;
-  left: -150px !important;
-  opacity: 0 !important;
-  filter: blur(50px) !important;
-  background-size: cover !important;
-  background-color: transparent !important;
-  background-position: center center !important;
-  will-change: opacity, z-index !important;
-  z-index: 0 !important;
-}
-
-.i-amphtml-story-background.active {
-  opacity: 1 !important;
-  z-index: 1 !important;
-}
-
-[desktop] amp-story-page {
-  transform: scale(1.0) translateX(-200vw) translateY(0%) !important;
-  opacity: .05!important;
-  transform-origin: left!important;
-  border-radius: 16px!important;
-}
-
-[desktop] amp-story-page[distance="0"],
-[desktop] amp-story-page[distance="1"] {
-  /* TODO(alanorozco): Enable transition for distance = 2.
-   * For some reason, enabling it breaks layout scheduling. */
-  transition: opacity 300ms linear, transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1) !important;
-}
-
-[desktop] .i-amphtml-story-button-container {
-  position: absolute !important;
-  top: 0 !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  z-index: 100002 !important;
-  pointer-events: none !important;
-  display: block !important;
-}
-
-[desktop] .i-amphtml-story-button-container::before {
-  content: '';
-  position: absolute !important;
-  top: 0 !important;
-  bottom: 0 !important;
-  /* Roughly equivalent to (viewport width - active page width) / 2  */
-  width: calc(50vw - 23vh - 32px) !important;
-}
-
-.i-amphtml-story-button-move,
-.i-amphtml-story-fwd-next > .i-amphtml-story-page-sentinel,
-.i-amphtml-story-back-prev > .i-amphtml-story-page-sentinel {
-  pointer-events: all !important;
-}
-
-.i-amphtml-story-button-hidden > .i-amphtml-story-button-move {
-  cursor: default !important;
-  pointer-events: none !important;
-  opacity: 0 !important;
-}
-
-[desktop] > .next-container::before {
-  right: 0 !important;
-  background: linear-gradient(to right, rgba(33,33,33,0) 0%, rgba(33,33,33,0.32) 100%)!important;
-}
-
-[desktop] > .prev-container::before {
-  left: 0 !important;
-  background: linear-gradient(to right, rgba(33,33,33,0.32) 0%, rgba(33,33,33,0) 100%)!important;
-}
-
-[desktop] > .next-container > .i-amphtml-story-button-move {
-  right: 0 !important;
-}
-
-[desktop] amp-story-page[pre-active],
-.prev-container > .i-amphtml-story-page-sentinel {
-  /* -150% + 15% */
-  transform: scale(0.9) translateX(calc(-150% - 64px)) translateY(0%) !important;
-}
-
-[desktop] amp-story-page[active] {
-  transform: scale(1.0) translateX(-50%) translateY(0%) !important;
-  opacity: 1!important;;
-}
-
-[desktop] amp-story-page[active] + amp-story-page,
-.next-container > .i-amphtml-story-page-sentinel {
-  /* 50% - 15% */
-  transform: scale(0.9) translate(calc(50% + 64px), 0%) !important;
-}
-
-[desktop] amp-story-page[active] + amp-story-page ~ amp-story-page {
-  transform: scale(0.9) translateX(calc(50vw * 1.1)) translateY(0%) !important;
-}
-
-[dir=rtl] [desktop] amp-story-page {
-  transform: scale(0.9) translateX(calc(50vw * 1.1)) translateY(0%) !important;
-}
-
-[dir=rtl] [desktop] amp-story-page[pre-active] {
-  /* 50% - 15% */
-  transform: scale(0.9) translateX(calc(50% + 64px)) translateY(0%) !important;
-  /*transform: scale(1.0) translateX(35%) translateY(0%) !important;*/
-}
-
-[dir=rtl] [desktop] amp-story-page[active] {
-  transform: scale(1.0) translateX(-50%) translateY(0%) !important;
-  opacity: 1!important;
-}
-
-[dir=rtl] [desktop] amp-story-page[active] + amp-story-page {
-  /* -150% + 15% */
-  transform: scale(0.9) translateX(calc(-150% - 64px)) translateY(0%) !important;
-  /*transform: scale(0.9) translateX(-135%) translateY(0%) !important;*/
-}
-
-[dir=rtl] [desktop] amp-story-page[active] + amp-story-page ~ amp-story-page {
-  transform: scale(0.9) translateX(-200vw) translateY(0%) !important;
-}
-
-[desktop] > amp-story-page,
-.i-amphtml-story-page-sentinel {
-  left: 50%!important;
-  right: auto !important;
-  margin: auto !important;
-  max-height: 75vh !important;
-  max-width: calc(3/5 * 75vh) !important;
-  min-width: 320px !important;
-  min-height: 533px !important;
-}
-
-[desktop] > amp-story-page {
-  box-shadow: 0 0 15px rgba(0, 0, 0, .4)!important;
-}
-
-.i-amphtml-story-page-sentinel {
-  position: absolute !important;
-  width: 100vw !important;
-  height: 100vh !important;
-  top: 0 !important;
-  bottom: 0 !important;
-  margin-left: -32px !important;
-  z-index: 100002 !important;
-  cursor: pointer;
-}
-
-/* Navigation buttons */
-.i-amphtml-story-button-move {
-  position: absolute!important;
-  top: 0!important;
-  bottom: 0!important;
-  margin: auto 40px!important;
-  width: 60px!important;
-  height: 60px!important;
-  border-radius: 50%!important;
-  border: 0!important;
-  background-color: #fff!important;
-  background-repeat: no-repeat!important;
-  background-size: 12px 17px!important;
-  display: flex!important;
-  justify-content: center!important;
-  align-items: center!important;
-  opacity: .5!important;
-  transition: 150ms opacity linear, 300ms transform linear!important;
-  cursor: pointer!important;
-  z-index: 100002!important;
-  outline: none!important;
-}
-
-.i-amphtml-story-prev-hover > amp-story-page[pre-active] {
-  opacity: 0.3 !important;
-}
-
-.i-amphtml-story-next-hover > amp-story-page[active] + amp-story-page {
-  opacity: 0.3 !important;
-}
-
-.prev-container > .i-amphtml-story-button-move {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="25" xmlns="http://www.w3.org/2000/svg"><path d="M15.7 22l-9.5-9.5L15.7 3l-3-3L.4 12.6 12.8 25"/></svg>')!important;
-  background-position: 45% 50%!important;
-  left: 0!important;
-}
-
-.i-amphtml-story-fwd-next > .i-amphtml-story-button-move {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="25" xmlns="http://www.w3.org/2000/svg"><path d="M.3 3l9.5 9.5L.3 22l3 3 12.4-12.5L3.2 0"/></svg>')!important;
-  background-position: 55% 50%!important;
-}
-
-.i-amphtml-story-fwd-replay > .i-amphtml-story-button-move {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
-  background-position: center center;
-  background-size: 32px 32px !important;
-}
-
-.i-amphtml-story-fwd-more > .i-amphtml-story-button-move {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>') !important;
-  background-position: center center;
-  background-size: 32px 32px !important;
-}
-
-/* On forward button mouseover */
-.i-amphtml-story-next-hover > .next-container > .i-amphtml-story-button-move,
-.i-amphtml-story-prev-hover > .prev-container > .i-amphtml-story-button-move {
-  transform: scale(1.1) !important;
-  opacity: 1!important;
-}
-
-/* Do not display when hidden. */
-.i-amphtml-story-prev-hover > .i-amphtml-story-button-hidden >
-    .i-amphtml-story-button-move {
-  opacity: 0 !important;
-}
-
-/* On forward (next) button mouseover */
-.i-amphtml-story-next-hover > .i-amphtml-story-fwd-next >
-    .i-amphtml-story-button-move {
-  transform: translateX(8px)!important;
-  opacity: 1!important;
-}
-
-/* On back button mouseover */
-.i-amphtml-story-prev-hover > .i-amphtml-story-back-prev >
-    .i-amphtml-story-button-move,
-.i-amphtml-story-prev-hover > .i-amphtml-story-back-close-bookend  >
-    .i-amphtml-story-button-move {
-  transform: translateX(-8px)!important;
-  opacity: 1!important;
-}
-
-/* Top bar */
-div.i-amphtml-story-top {
-  position: relative!important;
-  display: block!important;
-  height: 96px!important;
-  width: 100%!important;
-  z-index: 1!important;
-  background: linear-gradient(to bottom, rgba(33,33,33,0.32) 0%, rgba(33,33,33,0) 100%)!important;
-}
-
-.i-amphtml-story-share-pill {
-  display: none !important;
-  position: absolute!important;
-  top: 0!important;
-  right: 40px!important;
-  bottom: 0!important;
-  margin: auto!important;
-  height: 40px!important;
-  align-items: center!important;
-}
-
-[desktop] .i-amphtml-story-share-pill {
-  display: flex !important;
-}
-
-/* Share text for share box */
-span.i-amphtml-story-share-pill-label {
-  font-family: 'Roboto', sans-serif!important;
-  position: absolute!important;
-  right: 15px!important;
-  text-align: center!important;
-  width: 60px!important;
-  font-size: 12px!important;
-  font-weight: bold!important;
-  letter-spacing: .5px!important;
-  margin: auto!important;
-  color:#fff!important;
-  box-sizing: initial !important;
-  text-transform: uppercase !important;
-}
-
-/* background for the share box */
-.i-amphtml-story-share-pill:before {
-  position: absolute!important;
-  content: ''!important;
-  width: 58px!important;
-  height: 40px!important;
-  padding: 0 16px!important;
-  background-color: rgba(255, 255, 255, .2)!important;
-  border-radius: 500px!important;
-  box-sizing: initial !important;
-  transition: width 300ms ease-in-out!important;
-  right: 0!important;
-}
-
-.i-amphtml-story-share-pill .i-amphtml-story-share-item  {
-  opacity: 0!important;
-  transition: opacity 300ms linear!important;
-}
-
-.i-amphtml-story-share-pill:hover .i-amphtml-story-share-item {
-  opacity: 1!important;
-}
-
-.i-amphtml-story-share-pill .i-amphtml-story-share-item {
-  margin: 0 !important;
-  width: 48px !important;
-  height: 48px !important;
-  padding: 0 !important;
-}
-
-/* Incremental fade in */
-.i-amphtml-story-share-pill:hover
-    .i-amphtml-story-share-item:nth-child(9) {
-  transition-delay: calc(30ms * 1)!important;
-}
-.i-amphtml-story-share-pill:hover
-    .i-amphtml-story-share-item:nth-child(8) {
-  transition-delay: calc(30ms * 2)!important;
-}
-.i-amphtml-story-share-pill:hover
-    .i-amphtml-story-share-item:nth-child(7) {
-  transition-delay: calc(30ms * 3)!important;
-}
-.i-amphtml-story-share-pill:hover
-    .i-amphtml-story-share-item:nth-child(6) {
-  transition-delay: calc(30ms * 4)!important;
-}
-.i-amphtml-story-share-pill:hover
-    .i-amphtml-story-share-item:nth-child(5) {
-  transition-delay: calc(30ms * 5)!important;
-}
-.i-amphtml-story-share-pill:hover
-    .i-amphtml-story-share-item:nth-child(4) {
-  transition-delay: calc(30ms * 6)!important;
-}
-.i-amphtml-story-share-pill:hover
-    .i-amphtml-story-share-item:nth-child(3) {
-  transition-delay: calc(30ms * 7)!important;
-}
-.i-amphtml-story-share-pill:hover
-    .i-amphtml-story-share-item:nth-child(2) {
-  transition-delay: calc(30ms * 8)!important;
-}
-.i-amphtml-story-share-pill:hover
-    .i-amphtml-story-share-item:nth-child(1) {
-  transition-delay: calc(30ms * 9)!important;
-}
-
-.i-amphtml-story-share-pill .i-amphtml-story-share-list {
-  padding: 0!important;
-  margin: 0 72px 0 0 !important;
-}
-
-.i-amphtml-story-share-pill:hover:before {
-  width: calc(100% - 32px) !important;
-}
-
-.i-amphtml-story-share-pill .i-amphtml-story-share-icon {
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-  width: 48px !important;
-  height: 48px !important;
-  padding: 0;
-}
-
-[desktop] .i-amphtml-story-share-icon {
-  font-size: 0px!important;
-  background-size: 24px 24px !important;
-  background-position: center center !important;
-  padding: 0 !important;
-}
-
-[desktop] .i-amphtml-story-share-icon.amp-social-share-facebook {
-  /* SVG icon has inner padding, so the glyph renders visually smaller than
-   * other icons, so we work around it by setting a higher background size. */
-  background-size: 28px 28px !important;
-  background-position: center center !important;
-}
-
-[desktop] .i-amphtml-story-share-icon::before {
-  display: none !important;
-}
-
-[desktop] .i-amphtml-story-share-icon:active::before {
-  display: none !important;
-}
-
-[desktop] .i-amphtml-story-share-list {
-  margin-right: 72px !important;
-}
-
-/* system layer changes */
-
-[desktop] .i-amphtml-story-top {
-  z-index: 100002 !important; /* 1 higher than bookend */
-}
diff --git a/extensions/amp-story/0.1/amp-story-grid-layer.js b/extensions/amp-story/0.1/amp-story-grid-layer.js
deleted file mode 100644
index 63e2f89b102aa..0000000000000
--- a/extensions/amp-story/0.1/amp-story-grid-layer.js
+++ /dev/null
@@ -1,171 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-/**
- * @fileoverview This is a layer that lays its children out into a grid. Its
- * implementation is based off of the CSS Grid Spec.
- *
- * Example:
- * <code>
- * <amp-story-grid-layer template="fill">
- *   ...
- * </amp-story-grid-layer>
- * </code>
- */
-
-import {AmpStoryBaseLayer} from './amp-story-base-layer';
-import {assertDoesNotContainDisplay, setStyles} from '../../../src/style';
-import {matches, scopedQuerySelectorAll} from '../../../src/dom';
-
-/**
- * A mapping of attribute names we support for grid layers to the CSS Grid
- * properties they control.
- * @private @const {!Object<string, string>}
- */
-const SUPPORTED_CSS_GRID_ATTRIBUTES = {
-  'align-content': 'alignContent',
-  'align-items': 'alignItems',
-  'align-self': 'alignSelf',
-  'grid-area': 'gridArea',
-  'justify-content': 'justifyContent',
-  'justify-items': 'justifyItems',
-  'justify-self': 'justifySelf',
-};
-
-/**
- * Converts the keys of the SUPPORTED_CSS_GRID_ATTRIBUTES object above into a
- * selector for the specified attributes.
- * (e.g. [align-content], [align-items], ...)
- * @private @const {string}
- */
-const SUPPORTED_CSS_GRID_ATTRIBUTES_SELECTOR = Object.keys(
-  SUPPORTED_CSS_GRID_ATTRIBUTES
-)
-  .map((key) => `[${key}]`)
-  .join(',');
-
-/**
- * The attribute name for grid layer templates.
- * @private @const {string}
- */
-const TEMPLATE_ATTRIBUTE_NAME = 'template';
-
-/**
- * A mapping of template attribute values to CSS class names.
- * @const {!Object<string, string>}
- */
-export const GRID_LAYER_TEMPLATE_CLASS_NAMES = {
-  'fill': 'i-amphtml-story-grid-template-fill',
-  'vertical': 'i-amphtml-story-grid-template-vertical',
-  'horizontal': 'i-amphtml-story-grid-template-horizontal',
-  'thirds': 'i-amphtml-story-grid-template-thirds',
-};
-
-/**
- * Grid layer template templating system.
- */
-export class AmpStoryGridLayer extends AmpStoryBaseLayer {
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-
-    /** @private {boolean} */
-    this.prerenderAllowed_ = false;
-  }
-
-  /** @override */
-  firstAttachedCallback() {
-    // Only prerender if child of the first page.
-    this.prerenderAllowed_ = matches(
-      this.element,
-      'amp-story-page:first-of-type amp-story-grid-layer'
-    );
-  }
-
-  /** @override */
-  buildCallback() {
-    super.buildCallback();
-    this.applyTemplateClassName_();
-    this.setOwnCssGridStyles_();
-    this.setDescendentCssGridStyles_();
-  }
-
-  /** @override */
-  prerenderAllowed() {
-    return this.prerenderAllowed_;
-  }
-
-  /**
-   * Applies internal CSS class names for the template attribute, so that styles
-   * can use the class name instead of compound
-   * amp-story-grid-layer[template="..."] selectors, since the latter increases
-   * CSS specificity and can prevent users from being able to override styles.
-   * @private
-   */
-  applyTemplateClassName_() {
-    if (this.element.hasAttribute(TEMPLATE_ATTRIBUTE_NAME)) {
-      const templateName = this.element.getAttribute(TEMPLATE_ATTRIBUTE_NAME);
-      const templateClassName = GRID_LAYER_TEMPLATE_CLASS_NAMES[templateName];
-      this.element.classList.add(templateClassName);
-    }
-  }
-
-  /**
-   * Copies the allowlisted CSS grid styles for descendants of the
-   * <amp-story-grid-layer> element.
-   * @private
-   */
-  setDescendentCssGridStyles_() {
-    const elementsToUpgradeStyles = scopedQuerySelectorAll(
-      this.element,
-      SUPPORTED_CSS_GRID_ATTRIBUTES_SELECTOR
-    );
-
-    Array.prototype.forEach.call(elementsToUpgradeStyles, (element) => {
-      this.setCssGridStyles_(element);
-    });
-  }
-
-  /**
-   * Copies the allowlisted CSS grid styles for the <amp-story-grid-layer>
-   * element itself.
-   * @private
-   */
-  setOwnCssGridStyles_() {
-    this.setCssGridStyles_(this.element);
-  }
-
-  /**
-   * Copies the values of an element's attributes to its styles, if the
-   * attributes/properties are in the allowlist.
-   *
-   * @param {!Element} element The element whose styles should be copied from
-   *     its attributes.
-   */
-  setCssGridStyles_(element) {
-    const styles = {};
-    for (let i = element.attributes.length - 1; i >= 0; i--) {
-      const attribute = element.attributes[i];
-      const attributeName = attribute.name.toLowerCase();
-      const propertyName = SUPPORTED_CSS_GRID_ATTRIBUTES[attributeName];
-      if (propertyName) {
-        styles[propertyName] = attribute.value;
-        element.removeAttribute(attributeName);
-      }
-    }
-    setStyles(element, assertDoesNotContainDisplay(styles));
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-hint.css b/extensions/amp-story/0.1/amp-story-hint.css
deleted file mode 100644
index c80b2ef06eab5..0000000000000
--- a/extensions/amp-story/0.1/amp-story-hint.css
+++ /dev/null
@@ -1,184 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-.i-amphtml-story-hint-container {
-  transition-property: opacity !important;
-  transition-duration: 200ms !important;
-  contain: strict !important;
-  pointer-events: none !important;
-  position: absolute !important;
-  left: 0 !important;
-  top: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  z-index: 2 !important;
-}
-
-.i-amphtml-story-hint-container.i-amphtml-hidden {
-  opacity: 0 !important;
-}
-
-.i-amphtml-story-hint-container .i-amphtml-story-navigation-help-overlay {
-  position: absolute !important;
-  left: 0 !important;
-  top: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  background: rgba(0,0,0,0.7) !important;
-  flex-direction: row !important;
-  color: #fff !important;
-  font-size: 20px !important;
-  padding: 16px 0 !important;
-}
-
-.i-amphtml-story-navigation-help-section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.prev-page {
-  flex: 1 !important;
-}
-
-.show-first-page-overlay .i-amphtml-story-navigation-help-overlay {
-  background: rgba(0,0,0,0) !important;
-}
-
-.show-first-page-overlay .prev-page {
-  background: linear-gradient(to right, rgba(0,0,0,0.5) , rgba(0,0,0,0)) !important;
-}
-
-.show-first-page-overlay .next-page {
-  opacity: 0 !important;
-}
-
-.show-first-page-overlay .i-amphtml-story-hint-placeholder {
-  display: none !important;
-}
-
-.show-first-page-overlay .i-amphtml-story-navigation-help-overlay {
-  padding: 0px !important;
-}
-
-.i-amphtml-story-hint-container .next-page {
-  flex: 3 !important;
-  border-left: 1px dashed transparent !important;
-  border-image-source: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" version="1.1"><line x1="0" y1="0" x2="0" y2="30" fill-rule="evenodd" stroke-width="1" fill="none" stroke-linecap="square" stroke-dasharray="6,6" stroke="white"></line></svg>')  !important;
-  border-image-slice: 33% 33%  !important;
-  border-image-repeat: repeat  !important;
-  border-image-width: 14px !important;
-}
-
-.show-navigation-overlay .i-amphtml-story-navigation-help-overlay,
-.show-first-page-overlay .i-amphtml-story-navigation-help-overlay {
-  display: flex !important;
-}
-
-.show-first-page-overlay .prev-page .i-amphtml-story-hint-tap-button {
-  visibility: hidden;
-}
-
-.show-navigation-overlay .prev-page .i-amphtml-story-hint-tap-button-icon:before {
-  content: '' !important;
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 24 24" fill="#000000"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
-  width: 30px !important;
-  height: 30px !important;
-  display: inline-block !important;
-}
-
-.i-amphtml-story-hint-container .i-amphtml-story-hint-tap-button {
-  position: relative !important;
-  width: 44px !important;
-  height: 44px !important;
-}
-
-.i-amphtml-story-hint-tap-button:before, .i-amphtml-story-hint-tap-button:after {
-  position: absolute !important;
-  content: '' !important;
-  width: 44px !important;
-  height: 44px !important;
-  border-radius: 50% !important;
-  background-color: rgba(255, 255, 255, 0.5) !important;
-  left: 0 !important;
-  right: 0 !important;
-}
-
-.i-amphtml-story-hint-tap-button:before {
-  animation: expandingBubble 1000ms infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
-}
-
-.i-amphtml-story-hint-tap-button:after {
-  background-color: #fff !important;
-}
-
-.i-amphtml-story-hint-container .i-amphtml-story-hint-tap-button-icon {
-  position: absolute !important;
-  z-index: 1 !important;
-  height: 44px !important;
-  width: 44px !important;
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
-}
-
-.i-amphtml-story-hint-tap-button-icon:before, .i-amphtml-story-hint-tap-button-icon:after{
-  vertical-align: middle !important;
-  margin: 0 2px !important;
-  background-position: center;
-}
-
-.next-page .i-amphtml-story-hint-tap-button-icon:after {
-  content: '' !important;
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 24 24" fill="#000000"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
-  width: 24px !important;
-  height: 24px !important;
-  display: inline-block !important;
-}
-
-.i-amphtml-story-hint-placeholder {
-  top: 50% !important;
-  position: absolute;
-  display: flex !important;
-  flex-direction: column !important;
-  align-items: center !important;
-}
-
-.i-amphtml-story-hint-container .i-amphtml-story-hint-tap-button-text {
-  color: #fff !important;
-  font-size: 16px !important;
-  font-family: 'Roboto-Medium', sans-serif !important;
-  margin-top: 24px !important;
-  text-align: center !important;
-}
-
-@keyframes expandingBubble {
-  0% {
-    transform: scale(1);
-    opacity: 0;
-  }
-
-  50% {
-    transform: scale(1.5);
-    opacity: 1;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-
diff --git a/extensions/amp-story/0.1/amp-story-hint.js b/extensions/amp-story/0.1/amp-story-hint.js
deleted file mode 100644
index 0b5bf07b5f545..0000000000000
--- a/extensions/amp-story/0.1/amp-story-hint.js
+++ /dev/null
@@ -1,267 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {CSS} from '../../../build/amp-story-hint-0.1.css';
-import {LocalizedStringId} from '../../../src/localized-strings';
-import {Services} from '../../../src/services';
-import {StateProperty} from './amp-story-store-service';
-import {createShadowRootWithStyle} from './utils';
-import {dict} from '../../../src/utils/object';
-import {renderAsElement} from './simple-template';
-
-/** @private @const {!./simple-template.ElementDef} */
-const TEMPLATE = {
-  tag: 'aside',
-  attrs: dict({
-    'class':
-      'i-amphtml-story-hint-container ' +
-      'i-amphtml-story-system-reset i-amphtml-hidden',
-  }),
-  children: [
-    {
-      tag: 'div',
-      attrs: dict({'class': 'i-amphtml-story-navigation-help-overlay'}),
-      children: [
-        {
-          tag: 'div',
-          attrs: dict({
-            'class': 'i-amphtml-story-navigation-help-section prev-page',
-          }),
-          children: [
-            {
-              tag: 'div',
-              attrs: dict({'class': 'i-amphtml-story-hint-placeholder'}),
-              children: [
-                {
-                  tag: 'div',
-                  attrs: dict({'class': 'i-amphtml-story-hint-tap-button'}),
-                  children: [
-                    {
-                      tag: 'div',
-                      attrs: dict({
-                        'class': 'i-amphtml-story-hint-tap-button-icon',
-                      }),
-                    },
-                  ],
-                },
-                {
-                  tag: 'div',
-                  attrs: dict({
-                    'class': 'i-amphtml-story-hint-tap-button-text',
-                  }),
-                  localizedStringId:
-                    LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL,
-                },
-              ],
-            },
-          ],
-        },
-        {
-          tag: 'div',
-          attrs: dict({
-            'class': 'i-amphtml-story-navigation-help-section next-page',
-          }),
-          children: [
-            {
-              tag: 'div',
-              attrs: dict({'class': 'i-amphtml-story-hint-placeholder'}),
-              children: [
-                {
-                  tag: 'div',
-                  attrs: dict({'class': 'i-amphtml-story-hint-tap-button'}),
-                  children: [
-                    {
-                      tag: 'div',
-                      attrs: dict({
-                        'class': 'i-amphtml-story-hint-tap-button-icon',
-                      }),
-                    },
-                  ],
-                },
-                {
-                  tag: 'div',
-                  attrs: dict({
-                    'class': 'i-amphtml-story-hint-tap-button-text',
-                  }),
-                  localizedStringId:
-                    LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-/** @type {string} */
-const NAVIGATION_OVERLAY_CLASS = 'show-navigation-overlay';
-
-/** @type {string} */
-const FIRST_PAGE_OVERLAY_CLASS = 'show-first-page-overlay';
-
-/** @type {number} */
-const NAVIGATION_OVERLAY_TIMEOUT = 3000;
-
-/** @type {number} */
-const FIRST_PAGE_NAVIGATION_OVERLAY_TIMEOUT = 275;
-
-/**
- * User Hint Layer for <amp-story>.
- */
-export class AmpStoryHint {
-  /**
-   * @param {!Window} win
-   * @param {!Element} parentEl Element where to append the component
-   */
-  constructor(win, parentEl) {
-    /** @private {!Window} */
-    this.win_ = win;
-
-    /** @private {boolean} Whether the component is built. */
-    this.isBuilt_ = false;
-
-    /** @private {!Document} */
-    this.document_ = this.win_.document;
-
-    /** @const @private {!../../../src/service/vsync-impl.Vsync} */
-    this.vsync_ = Services.vsyncFor(this.win_);
-
-    /** @const @private {!../../../src/service/timer-impl.Timer} */
-    this.timer_ = Services.timerFor(this.win_);
-
-    /** @private {?Element} */
-    this.hintContainer_ = null;
-
-    /** @private {?(number|string)} */
-    this.hintTimeout_ = null;
-
-    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
-    this.storeService_ = Services.storyStoreServiceV01(this.win_);
-
-    /** @private @const {!Element} */
-    this.parentEl_ = parentEl;
-  }
-
-  /**
-   * Builds the hint layer DOM.
-   */
-  build() {
-    if (this.isBuilt()) {
-      return;
-    }
-
-    this.isBuilt_ = true;
-
-    const root = this.document_.createElement('div');
-    this.hintContainer_ = renderAsElement(this.document_, TEMPLATE);
-    createShadowRootWithStyle(root, this.hintContainer_, CSS);
-
-    this.vsync_.mutate(() => {
-      this.parentEl_.appendChild(root);
-    });
-  }
-
-  /**
-   * Whether the component is built.
-   * @return {boolean}
-   */
-  isBuilt() {
-    return this.isBuilt_;
-  }
-
-  /**
-   * Shows the given hint, only if not desktop.
-   * @param {string} hintClass
-   * @private
-   */
-  showHint_(hintClass) {
-    if (this.storeService_.get(StateProperty.DESKTOP_STATE)) {
-      return;
-    }
-
-    this.build();
-
-    this.vsync_.mutate(() => {
-      this.hintContainer_.classList.toggle(
-        NAVIGATION_OVERLAY_CLASS,
-        hintClass == NAVIGATION_OVERLAY_CLASS
-      );
-      this.hintContainer_.classList.toggle(
-        FIRST_PAGE_OVERLAY_CLASS,
-        hintClass == FIRST_PAGE_OVERLAY_CLASS
-      );
-      this.hintContainer_.classList.remove('i-amphtml-hidden');
-
-      const hideTimeout =
-        hintClass == NAVIGATION_OVERLAY_CLASS
-          ? NAVIGATION_OVERLAY_TIMEOUT
-          : FIRST_PAGE_NAVIGATION_OVERLAY_TIMEOUT;
-      this.hideAfterTimeout(hideTimeout);
-    });
-  }
-
-  /**
-   * Show navigation overlay DOM.
-   */
-  showNavigationOverlay() {
-    // Don't show the overlay if the share menu is open.
-    if (this.storeService_.get(StateProperty.SHARE_MENU_STATE)) {
-      return;
-    }
-
-    this.showHint_(NAVIGATION_OVERLAY_CLASS);
-  }
-
-  /**
-   * Show navigation overlay DOM.
-   */
-  showFirstPageHintOverlay() {
-    this.showHint_(FIRST_PAGE_OVERLAY_CLASS);
-  }
-
-  /**
-   * Hides the overlay after a given time
-   * @param {number} timeout
-   */
-  hideAfterTimeout(timeout) {
-    this.hintTimeout_ = this.timer_.delay(() => this.hideInternal_(), timeout);
-  }
-
-  /**
-   * Hide all navigation hints.
-   */
-  hideAllNavigationHint() {
-    this.hideInternal_();
-
-    if (this.hintTimeout_ !== null) {
-      this.timer_.cancel(this.hintTimeout_);
-      this.hintTimeout_ = null;
-    }
-  }
-
-  /** @private */
-  hideInternal_() {
-    if (!this.isBuilt()) {
-      return;
-    }
-
-    this.vsync_.mutate(() => {
-      this.hintContainer_.classList.add('i-amphtml-hidden');
-    });
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-info-dialog.css b/extensions/amp-story/0.1/amp-story-info-dialog.css
deleted file mode 100644
index 2666b69892d01..0000000000000
--- a/extensions/amp-story/0.1/amp-story-info-dialog.css
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
-* Copyright 2018 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.
-*/
-
-@import './amp-story-share.css';
-
-.i-amphtml-story-info-dialog {
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  height: 100% !important;
-  width: 100% !important;
-  z-index: 100001 !important;
-  transform: translate3d(0, -100%, 0) !important;
-  transition-delay: 0.15s !important;
-}
-
-.i-amphtml-story-info-dialog-visible {
-  transform: translate3d(0, 0, 0) !important;
-  transition-delay: 0s !important;
-}
-
-/** Black opacity overlay. */
-.i-amphtml-story-info-dialog::before {
-  content: "" !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  height: 100% !important;
-  width: 100% !important;
-  background: #000000 !important;
-  opacity: 0 !important;
-  transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1) !important;
-}
-
-.i-amphtml-story-info-dialog.i-amphtml-story-info-dialog-visible::before {
-  opacity: 0.4 !important;
-  transition: opacity 0.2s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
-}
-
-.i-amphtml-story-info-dialog-container {
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  height: auto !important;
-  background: #fff !important;
-  transform: translate3d(0, -100%, 0) !important;
-  transition: transform 0.15s cubic-bezier(0.4, 0.0, 1, 1) !important;
-  padding: 20px !important;
-  font-family: 'Roboto', sans-serif !important;
-}
-
-.i-amphtml-story-info-dialog-visible .i-amphtml-story-info-dialog-container {
-  transform: translate3d(0, 0, 0) !important;
-  transition: transform 0.2s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
-}
-
-.i-amphtml-story-info-heading {
-  display: block !important;
-  font-size: 14px !important;
-  font-weight: bold !important;
-  margin: 0 0 8px !important;
-}
-
-.i-amphtml-story-info-link {
-  color: #000000 !important;
-  display: block !important;
-  margin: 0 !important;
-  opacity: 0.64 !important;
-  font-size: 12px !important;
-  text-decoration: none !important;
-}
-
-.i-amphtml-story-info-moreinfo {
-  color: #4285F4 !important;
-  display: none !important;
-  font-family: 'Roboto-Medium', sans-serif !important;
-  font-size: 12px !important;
-  letter-spacing: 0.5px !important;
-  margin: 16px 0 0;
-  text-decoration: none !important;
-}
-
-.i-amphtml-story-info-moreinfo.i-amphtml-story-info-moreinfo-visible {
-  display: block !important;
-}
diff --git a/extensions/amp-story/0.1/amp-story-info-dialog.js b/extensions/amp-story/0.1/amp-story-info-dialog.js
deleted file mode 100644
index 6a5ce51e7e877..0000000000000
--- a/extensions/amp-story/0.1/amp-story-info-dialog.js
+++ /dev/null
@@ -1,259 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {Action, StateProperty} from './amp-story-store-service';
-import {CSS} from '../../../build/amp-story-info-dialog-0.1.css';
-import {LocalizedStringId} from '../../../src/localized-strings';
-import {Services} from '../../../src/services';
-import {assertAbsoluteHttpOrHttpsUrl} from '../../../src/url';
-import {closest} from '../../../src/dom';
-import {createShadowRootWithStyle} from './utils';
-import {dev} from '../../../src/log';
-import {getAmpdoc} from '../../../src/service';
-import {getLocalizationService} from './amp-story-localization-service';
-import {htmlFor} from '../../../src/static-template';
-
-/** @const {string} Class to toggle the info dialog. */
-export const DIALOG_VISIBLE_CLASS = 'i-amphtml-story-info-dialog-visible';
-
-/** @const {string} Class to toggle the info dialog link. */
-export const MOREINFO_VISIBLE_CLASS = 'i-amphtml-story-info-moreinfo-visible';
-
-/**
- * A dialog that provides a link to the canonical URL of the story, as well as
- * a link to any more information that the viewer would like to provide about
- * linking on that platform.
- */
-export class InfoDialog {
-  /**
-   * @param {!Window} win
-   * @param {!Element} parentEl Element where to append the component
-   */
-  constructor(win, parentEl) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private {?Element} */
-    this.element_ = null;
-
-    /** @private {?Element} */
-    this.innerContainerEl_ = null;
-
-    /** @private {boolean} */
-    this.isBuilt_ = false;
-
-    /** @private @const {!../../../src/service/localization.LocalizationService} */
-    this.localizationService_ = getLocalizationService(parentEl);
-
-    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
-    this.storeService_ = Services.storyStoreServiceV01(this.win_);
-
-    /** @private @const {!Element} */
-    this.parentEl_ = parentEl;
-
-    /** @private @const {!../../../src/service/mutator-interface.MutatorInterface} */
-    this.mutator_ = Services.mutatorForDoc(getAmpdoc(this.win_.document));
-
-    /** @private {?Element} */
-    this.moreInfoLinkEl_ = null;
-
-    /** @const @private {!../../../src/service/viewer-interface.ViewerInterface} */
-    this.viewer_ = Services.viewerForDoc(this.parentEl_);
-  }
-
-  /**
-   * Builds and appends the component in the story.
-   * @return {!Promise} used for testing to ensure that the component is built
-   *     before assertions.
-   */
-  build() {
-    if (this.isBuilt()) {
-      return Promise.resolve();
-    }
-
-    this.isBuilt_ = true;
-    const root = this.win_.document.createElement('div');
-    const html = htmlFor(this.parentEl_);
-    this.element_ = html`
-      <div class="i-amphtml-story-info-dialog i-amphtml-story-system-reset">
-        <div class="i-amphtml-story-info-dialog-container">
-          <h1 class="i-amphtml-story-info-heading"></h1>
-          <a class="i-amphtml-story-info-link"></a>
-          <a class="i-amphtml-story-info-moreinfo"></a>
-        </div>
-      </div>
-    `;
-
-    createShadowRootWithStyle(root, this.element_, CSS);
-    this.initializeListeners_();
-
-    this.innerContainerEl_ = this.element_.querySelector(
-      '.i-amphtml-story-info-dialog-container'
-    );
-
-    const appendPromise = this.mutator_.mutateElement(this.parentEl_, () => {
-      this.parentEl_.appendChild(root);
-    });
-
-    const pageUrl = Services.documentInfoForDoc(getAmpdoc(this.parentEl_))
-      .canonicalUrl;
-
-    return Promise.all([
-      appendPromise,
-      this.setHeading_(),
-      this.setPageLink_(pageUrl),
-      this.requestMoreInfoLink_().then((moreInfoUrl) =>
-        this.setMoreInfoLinkUrl_(moreInfoUrl)
-      ),
-    ]);
-  }
-
-  /**
-   * Whether the element has been built.
-   * @return {boolean}
-   */
-  isBuilt() {
-    return this.isBuilt_;
-  }
-
-  /**
-   * @private
-   */
-  initializeListeners_() {
-    this.storeService_.subscribe(StateProperty.INFO_DIALOG_STATE, (isOpen) => {
-      this.onInfoDialogStateUpdated_(isOpen);
-    });
-
-    this.element_.addEventListener('click', (event) =>
-      this.onInfoDialogClick_(event)
-    );
-  }
-
-  /**
-   * Reacts to menu state updates and decides whether to show either the native
-   * system sharing, or the fallback UI.
-   * @param {boolean} isOpen
-   * @private
-   */
-  onInfoDialogStateUpdated_(isOpen) {
-    this.mutator_.mutateElement(dev().assertElement(this.element_), () => {
-      this.element_.classList.toggle(DIALOG_VISIBLE_CLASS, isOpen);
-    });
-  }
-
-  /**
-   * Handles click events and maybe closes the dialog.
-   * @param  {!Event} event
-   */
-  onInfoDialogClick_(event) {
-    const el = dev().assertElement(event.target);
-    // Closes the dialog if click happened outside of the dialog main container.
-    if (!closest(el, (el) => el === this.innerContainerEl_, this.element_)) {
-      this.close_();
-    }
-  }
-
-  /**
-   * Closes the info dialog.
-   * @private
-   */
-  close_() {
-    this.storeService_.dispatch(Action.TOGGLE_INFO_DIALOG, false);
-  }
-
-  /**
-   * @return {!Promise<?string>} The URL to visit to receive more info on this
-   *     page.
-   * @private
-   */
-  requestMoreInfoLink_() {
-    if (!this.viewer_.isEmbedded()) {
-      return Promise.resolve(null);
-    }
-    return this.viewer_
-      ./*OK*/ sendMessageAwaitResponse('moreInfoLinkUrl', /* data */ undefined)
-      .then((moreInfoUrl) => {
-        if (!moreInfoUrl) {
-          return null;
-        }
-        return assertAbsoluteHttpOrHttpsUrl(dev().assertString(moreInfoUrl));
-      });
-  }
-
-  /**
-   * Sets the heading on the dialog.
-   * @return {*} TODO(#23582): Specify return type
-   */
-  setHeading_() {
-    const label = this.localizationService_.getLocalizedString(
-      LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL
-    );
-    const headingEl = dev().assertElement(
-      this.element_.querySelector('.i-amphtml-story-info-heading')
-    );
-
-    return this.mutator_.mutateElement(headingEl, () => {
-      headingEl.textContent = label;
-    });
-  }
-
-  /**
-   * @param {string} pageUrl The URL to the canonical version of the current
-   *     document.
-   * @return {*} TODO(#23582): Specify return type
-   */
-  setPageLink_(pageUrl) {
-    const linkEl = dev().assertElement(
-      this.element_.querySelector('.i-amphtml-story-info-link')
-    );
-
-    return this.mutator_.mutateElement(linkEl, () => {
-      linkEl.setAttribute('href', pageUrl);
-
-      // Add zero-width space character (\u200B) after "." and "/" characters
-      // to help line-breaks occur more naturally.
-      linkEl.textContent = pageUrl.replace(/([/.]+)/gi, '$1\u200B');
-    });
-  }
-
-  /**
-   * @param {?string} moreInfoUrl The URL to the "more info" page, if there is
-   * one.
-   * @return {*} TODO(#23582): Specify return type
-   */
-  setMoreInfoLinkUrl_(moreInfoUrl) {
-    if (!moreInfoUrl) {
-      return Promise.resolve();
-    }
-
-    this.moreInfoLinkEl_ = dev().assertElement(
-      this.element_.querySelector('.i-amphtml-story-info-moreinfo')
-    );
-
-    return this.mutator_.mutateElement(this.moreInfoLinkEl_, () => {
-      const label = this.localizationService_.getLocalizedString(
-        LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK
-      );
-      this.moreInfoLinkEl_.classList.add(MOREINFO_VISIBLE_CLASS);
-      this.moreInfoLinkEl_.setAttribute(
-        'href',
-        dev().assertString(moreInfoUrl)
-      );
-      this.moreInfoLinkEl_.setAttribute('target', '_blank');
-      this.moreInfoLinkEl_.textContent = label;
-    });
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-localization-service.js b/extensions/amp-story/0.1/amp-story-localization-service.js
deleted file mode 100644
index 110d3b09a836b..0000000000000
--- a/extensions/amp-story/0.1/amp-story-localization-service.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {LocalizationService} from '../../../src/service/localization';
-import {Services} from '../../../src/services';
-import {registerServiceBuilderForDoc} from '../../../src/service';
-
-/**
- * Util function to retrieve the localization service. Ensures we can retrieve
- * the service synchronously from the amp-story codebase without running into
- * race conditions.
- * @param {!Element} element
- * @return {!../../../src/service/localization.LocalizationService}
- */
-export const getLocalizationService = (element) => {
-  let localizationService = Services.localizationForDoc(element);
-
-  if (!localizationService) {
-    localizationService = new LocalizationService(element);
-    registerServiceBuilderForDoc(element, 'localization', function () {
-      return localizationService;
-    });
-  }
-
-  return localizationService;
-};
diff --git a/extensions/amp-story/0.1/amp-story-page.js b/extensions/amp-story/0.1/amp-story-page.js
deleted file mode 100644
index 04dc2736d4ca6..0000000000000
--- a/extensions/amp-story/0.1/amp-story-page.js
+++ /dev/null
@@ -1,753 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-/**
- * @fileoverview Embeds a story
- *
- * Example:
- * <code>
- * <amp-story-page>
- * </amp-story>
- * </code>
- */
-import {AdvancementConfig} from './page-advancement';
-import {AnimationManager, hasAnimations} from './animation';
-import {Deferred} from '../../../src/utils/promise';
-import {EventType, dispatch, dispatchCustom} from './events';
-import {Layout} from '../../../src/layout';
-import {LoadingSpinner} from './loading-spinner';
-import {MediaPool} from './media-pool';
-import {Services} from '../../../src/services';
-import {
-  closestAncestorElementBySelector,
-  iterateCursor,
-  matches,
-  scopedQuerySelectorAll,
-} from '../../../src/dom';
-import {debounce} from '../../../src/utils/rate-limit';
-import {delegateAutoplay} from '../../../src/video-interface';
-import {dev} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {getLogEntries} from './logging';
-import {getMode} from '../../../src/mode';
-import {listen} from '../../../src/event-helper';
-import {upgradeBackgroundAudio} from './audio';
-
-/**
- * CSS class for an amp-story-page that indicates the entire page is loaded.
- * @const {string}
- */
-const PAGE_LOADED_CLASS_NAME = 'i-amphtml-story-page-loaded';
-
-/**
- * Selector for which media to wait for on page layout.
- * @const {string}
- */
-const PAGE_MEDIA_SELECTOR = 'amp-audio, amp-video, amp-img, amp-anim';
-
-/** @private @const {string} */
-const TAG = 'amp-story-page';
-
-/** @private @const {string} */
-const ADVERTISEMENT_ATTR_NAME = 'ad';
-
-/**
- * The <amp-story-page> custom element, which represents a single page of
- * an <amp-story>.
- */
-export class AmpStoryPage extends AMP.BaseElement {
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-
-    /** @private {?AnimationManager} */
-    this.animationManager_ = null;
-
-    /** @private @const {!AdvancementConfig} */
-    this.advancement_ = AdvancementConfig.forPage(this);
-
-    /** @private {?LoadingSpinner} */
-    this.loadingSpinner_ = null;
-
-    /** @private @const {!Promise} */
-    this.mediaLayoutPromise_ = this.waitForMediaLayout_();
-
-    /** @private @const {!Promise} */
-    this.pageLoadPromise_ = this.mediaLayoutPromise_.then(() => {
-      this.markPageAsLoaded_();
-    });
-
-    const deferred = new Deferred();
-
-    /** @private @const {!Promise<!MediaPool>} */
-    this.mediaPoolPromise_ = deferred.promise;
-
-    /** @private @const {!function(!MediaPool)} */
-    this.mediaPoolResolveFn_ = deferred.resolve;
-
-    /** @private @const {!function(*)} */
-    this.mediaPoolRejectFn_ = deferred.reject;
-
-    /** @private {boolean} */
-    this.prerenderAllowed_ = false;
-
-    /** @const @private {!function(boolean)} */
-    this.debounceToggleLoadingSpinner_ = debounce(
-      this.win,
-      (isActive) => this.toggleLoadingSpinner_(!!isActive),
-      100
-    );
-
-    /** @private {!Array<function()>} */
-    this.unlisteners_ = [];
-
-    /**
-     * Whether the user agent matches a bot.  This is used to prevent resource
-     * optimizations that make the document less useful at crawl time, e.g.
-     * removing sources from videos.
-     * @private @const {boolean}
-     */
-    this.isBotUserAgent_ = Services.platformFor(this.win).isBot();
-  }
-
-  /**
-   * @private
-   */
-  maybeCreateAnimationManager_() {
-    if (!this.animationManager_) {
-      if (!hasAnimations(this.element)) {
-        return;
-      }
-
-      this.animationManager_ = AnimationManager.create(
-        this.element,
-        this.getAmpDoc(),
-        this.getAmpDoc().getUrl()
-      );
-    }
-  }
-
-  /** @override */
-  firstAttachedCallback() {
-    // Only prerender the first story page.
-    this.prerenderAllowed_ = matches(
-      this.element,
-      'amp-story-page:first-of-type'
-    );
-  }
-
-  /** @override */
-  buildCallback() {
-    upgradeBackgroundAudio(this.element);
-    this.delegateVideoAutoplay();
-    this.markMediaElementsWithPreload_();
-    this.initializeMediaPool_();
-    this.maybeCreateAnimationManager_();
-    this.advancement_.addPreviousListener(() => this.previous());
-    this.advancement_.addAdvanceListener(() =>
-      this.next(/* opt_isAutomaticAdvance */ true)
-    );
-    this.advancement_.addOnTapNavigationListener((navigationDirection) =>
-      this.navigateOnTap(navigationDirection)
-    );
-    this.advancement_.addProgressListener((progress) =>
-      this.emitProgress_(progress)
-    );
-  }
-
-  /**
-   * Delegates video autoplay so the video manager does not follow the
-   * autoplay attribute that may have been set by a publisher, which could
-   * play videos from an inactive page.
-   */
-  delegateVideoAutoplay() {
-    iterateCursor(this.element.querySelectorAll('amp-video'), delegateAutoplay);
-  }
-
-  /** @private */
-  initializeMediaPool_() {
-    const storyEl = dev().assertElement(
-      closestAncestorElementBySelector(this.element, 'amp-story'),
-      'amp-story-page must be a descendant of amp-story.'
-    );
-
-    storyEl.getImpl().then(
-      (storyImpl) => {
-        this.mediaPoolResolveFn_(MediaPool.for(storyImpl));
-      },
-      (reason) => this.mediaPoolRejectFn_(reason)
-    );
-  }
-
-  /**
-   * Marks any AMP elements that represent media elements with preload="auto".
-   * @private
-   */
-  markMediaElementsWithPreload_() {
-    const mediaSet = this.element.querySelectorAll('amp-audio, amp-video');
-    Array.prototype.forEach.call(mediaSet, (mediaItem) => {
-      mediaItem.setAttribute('preload', 'auto');
-    });
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout == Layout.CONTAINER;
-  }
-
-  /** @override */
-  pauseCallback() {
-    this.advancement_.stop();
-
-    this.stopListeningToVideoEvents_();
-    this.pauseAllMedia_(true /* rewindToBeginning */);
-
-    if (this.animationManager_) {
-      this.animationManager_.cancelAll();
-    }
-  }
-
-  /** @override */
-  resumeCallback() {
-    this.registerAllMedia_();
-
-    if (this.isActive()) {
-      this.advancement_.start();
-      this.maybeStartAnimations();
-      this.preloadAllMedia_()
-        .then(() => this.startListeningToVideoEvents_())
-        .then(() => this.playAllMedia_());
-    }
-
-    this.reportDevModeErrors_();
-  }
-
-  /** @override */
-  layoutCallback() {
-    this.muteAllMedia();
-
-    return Promise.all([
-      this.beforeVisible(),
-      this.mediaLayoutPromise_,
-      this.mediaPoolPromise_,
-    ]);
-  }
-
-  /** @return {!Promise} */
-  beforeVisible() {
-    return this.maybeApplyFirstAnimationFrame();
-  }
-
-  /**
-   * @return {!Promise}
-   * @private
-   */
-  waitForMediaLayout_() {
-    const mediaSet = scopedQuerySelectorAll(this.element, PAGE_MEDIA_SELECTOR);
-    const mediaPromises = Array.prototype.map.call(mediaSet, (mediaEl) => {
-      return new Promise((resolve) => {
-        switch (mediaEl.tagName.toLowerCase()) {
-          case 'amp-img':
-          case 'amp-anim':
-            mediaEl.addEventListener('load', resolve, true /* useCapture */);
-            break;
-          case 'amp-audio':
-          case 'amp-video':
-            if (mediaEl.readyState >= 2) {
-              resolve();
-              return;
-            }
-
-            mediaEl.addEventListener('canplay', resolve, true /* useCapture */);
-            break;
-          default:
-            // Any other tags should not block loading.
-            resolve();
-        }
-
-        // We suppress errors so that Promise.all will still wait for all
-        // promises to complete, even if one has failed.  We do nothing with the
-        // error, as the resource itself and/or code that loads it should handle
-        // the error.
-        mediaEl.addEventListener('error', resolve, true /* useCapture */);
-      });
-    });
-
-    return Promise.all(mediaPromises);
-  }
-
-  /** @return {!Promise} */
-  whenLoaded() {
-    return this.pageLoadPromise_;
-  }
-
-  /** @private */
-  markPageAsLoaded_() {
-    dispatch(this.element, EventType.PAGE_LOADED, true);
-    this.mutateElement(() => {
-      this.element.classList.add(PAGE_LOADED_CLASS_NAME);
-    });
-  }
-
-  /** @override */
-  prerenderAllowed() {
-    return this.prerenderAllowed_;
-  }
-
-  /**
-   * Gets all media elements on this page.
-   * @return {!NodeList<!Element>}
-   * @private
-   */
-  getAllMedia_() {
-    return this.element.querySelectorAll('audio, video');
-  }
-
-  /**
-   * Gets all video elements on this page.
-   * @return {!NodeList<!Element>}
-   * @private
-   */
-  getAllVideos_() {
-    return this.element.querySelectorAll('video');
-  }
-
-  /**
-   * Applies the specified callback to each media element on the page, after the
-   * media element is loaded.
-   * @param {!function(!./media-pool.MediaPool, !Element)} callbackFn The
-   *     callback to be applied to each media element.
-   * @return {!Promise} Promise that resolves after the callbacks are called.
-   */
-  whenAllMediaElements_(callbackFn) {
-    const mediaSet = this.getAllMedia_();
-    return this.mediaPoolPromise_.then((mediaPool) => {
-      const promises = Array.prototype.map.call(mediaSet, (mediaEl) => {
-        return callbackFn(mediaPool, mediaEl);
-      });
-
-      return Promise.all(promises);
-    });
-  }
-
-  /**
-   * Pauses all media on this page.
-   * @param {boolean=} rewindToBeginning Whether to rewind the currentTime
-   *     of media items to the beginning.
-   * @return {!Promise} Promise that resolves after the callbacks are called.
-   * @private
-   */
-  pauseAllMedia_(rewindToBeginning = false) {
-    return this.whenAllMediaElements_((mediaPool, mediaEl) => {
-      if (this.isBotUserAgent_) {
-        mediaEl.pause();
-      } else {
-        return mediaPool.pause(
-          /** @type {!HTMLMediaElement} */ (mediaEl),
-          rewindToBeginning
-        );
-      }
-    });
-  }
-
-  /**
-   * Plays all media on this page.
-   * @return {!Promise} Promise that resolves after the callbacks are called.
-   * @private
-   */
-  playAllMedia_() {
-    return this.whenAllMediaElements_((mediaPool, mediaEl) => {
-      if (this.isBotUserAgent_) {
-        mediaEl.play();
-      } else {
-        return mediaPool.play(/** @type {!HTMLMediaElement} */ (mediaEl));
-      }
-    });
-  }
-
-  /**
-   * Preloads all media on this page.
-   * @return {!Promise} Promise that resolves after the callbacks are called.
-   * @private
-   */
-  preloadAllMedia_() {
-    return this.whenAllMediaElements_((mediaPool, mediaEl) => {
-      if (this.isBotUserAgent_) {
-        // No-op.
-      } else {
-        return mediaPool.preload(/** @type {!HTMLMediaElement} */ (mediaEl));
-      }
-    });
-  }
-
-  /**
-   * Mutes all media on this page.
-   * @return {!Promise} Promise that resolves after the callbacks are called.
-   */
-  muteAllMedia() {
-    return this.whenAllMediaElements_((mediaPool, mediaEl) => {
-      if (this.isBotUserAgent_) {
-        mediaEl.muted = true;
-        mediaEl.setAttribute('muted', '');
-      } else {
-        return mediaPool.mute(/** @type {!HTMLMediaElement} */ (mediaEl));
-      }
-    });
-  }
-
-  /**
-   * Unmutes all media on this page.
-   * @return {!Promise} Promise that resolves after the callbacks are called.
-   */
-  unmuteAllMedia() {
-    return this.whenAllMediaElements_((mediaPool, mediaEl) => {
-      if (this.isBotUserAgent_) {
-        mediaEl.muted = false;
-        mediaEl.removeAttribute('muted');
-      } else {
-        return mediaPool.unmute(/** @type {!HTMLMediaElement} */ (mediaEl));
-      }
-    });
-  }
-
-  /**
-   * Registers all media on this page
-   * @return {!Promise} Promise that resolves after the callbacks are called.
-   * @private
-   */
-  registerAllMedia_() {
-    return this.whenAllMediaElements_((mediaPool, mediaEl) => {
-      if (this.isBotUserAgent_) {
-        // No-op.
-      } else {
-        return mediaPool.register(/** @type {!HTMLMediaElement} */ (mediaEl));
-      }
-    });
-  }
-
-  /**
-   * Starts playing animations, if the animation manager is available.
-   */
-  maybeStartAnimations() {
-    if (!this.animationManager_) {
-      return;
-    }
-    this.animationManager_.animateIn();
-  }
-
-  /**
-   * @return {!Promise}
-   */
-  maybeApplyFirstAnimationFrame() {
-    if (!this.animationManager_) {
-      return Promise.resolve();
-    }
-    return this.animationManager_.applyFirstFrame();
-  }
-
-  /**
-   * @param {boolean} isActive
-   */
-  setActive(isActive) {
-    if (isActive) {
-      this.element.setAttribute('active', '');
-      this.beforeVisible();
-      this.resumeCallback();
-    } else {
-      this.element.removeAttribute('active');
-      this.pauseCallback();
-    }
-  }
-
-  /**
-   * @return {number} The distance from the current page to the active page.
-   */
-  getDistance() {
-    return parseInt(this.element.getAttribute('distance'), 10);
-  }
-
-  /**
-   * @param {number} distance The distance from the current page to the active
-   *     page.
-   */
-  setDistance(distance) {
-    // TODO(ccordry) refactor this when pages are managed
-    if (this.isAd()) {
-      distance = Math.min(distance, 2);
-    }
-
-    this.element.setAttribute('distance', distance);
-    this.registerAllMedia_();
-    if (distance > 0 && distance <= 2) {
-      this.preloadAllMedia_();
-    }
-  }
-
-  /**
-   * @return {boolean} Whether this page is currently active.
-   */
-  isActive() {
-    return this.element.hasAttribute('active');
-  }
-
-  /**
-   * Emits an event indicating that the progress of the current page has changed
-   * to the specified value.
-   * @param {number} progress The progress from 0.0 to 1.0.
-   */
-  emitProgress_(progress) {
-    const payload = dict({
-      'pageId': this.element.id,
-      'progress': progress,
-    });
-    const eventInit = {bubbles: true};
-    dispatchCustom(
-      this.win,
-      this.element,
-      EventType.PAGE_PROGRESS,
-      payload,
-      eventInit
-    );
-  }
-
-  /**
-   * Returns all of the pages that are one hop from this page.
-   * @return {!Array<string>}
-   */
-  getAdjacentPageIds() {
-    const adjacentPageIds = [];
-
-    const autoAdvanceNext = this.getNextPageId(
-      true /* opt_isAutomaticAdvance */
-    );
-    const manualAdvanceNext = this.getNextPageId(
-      false /* opt_isAutomaticAdvance */
-    );
-    const previous = this.getPreviousPageId_();
-
-    if (autoAdvanceNext) {
-      adjacentPageIds.push(autoAdvanceNext);
-    }
-
-    if (manualAdvanceNext && manualAdvanceNext != autoAdvanceNext) {
-      adjacentPageIds.push(manualAdvanceNext);
-    }
-
-    if (previous) {
-      adjacentPageIds.push(previous);
-    }
-
-    return adjacentPageIds;
-  }
-
-  /**
-   * Gets the ID of the previous page in the story (before the current page).
-   * @return {?string} Returns the ID of the next page in the story, or null if
-   *     there isn't one.
-   * @private
-   */
-  getPreviousPageId_() {
-    if (this.element.hasAttribute('i-amphtml-return-to')) {
-      return this.element.getAttribute('i-amphtml-return-to');
-    }
-
-    const previousElement = this.element.previousElementSibling;
-    if (previousElement && previousElement.tagName.toLowerCase() === TAG) {
-      return previousElement.id;
-    }
-
-    return null;
-  }
-
-  /**
-   * Gets the ID of the next page in the story (after the current page).
-   * @param {boolean=} opt_isAutomaticAdvance Whether this navigation was caused
-   *     by an automatic advancement after a timeout.
-   * @return {?string} Returns the ID of the next page in the story, or null if
-   *     there isn't one.
-   */
-  getNextPageId(opt_isAutomaticAdvance) {
-    if (
-      opt_isAutomaticAdvance &&
-      this.element.hasAttribute('auto-advance-to')
-    ) {
-      return this.element.getAttribute('auto-advance-to');
-    }
-
-    if (this.element.hasAttribute('i-amphtml-advance-to')) {
-      return this.element.getAttribute('i-amphtml-advance-to');
-    }
-
-    const nextElement = this.element.nextElementSibling;
-    if (nextElement && nextElement.tagName.toLowerCase() === TAG) {
-      return nextElement.id;
-    }
-
-    return null;
-  }
-
-  /**
-   * Navigates to the previous page in the story.
-   */
-  previous() {
-    const targetPageId = this.getPreviousPageId_();
-
-    if (targetPageId === null) {
-      dispatch(this.element, EventType.SHOW_NO_PREVIOUS_PAGE_HELP, true);
-      return;
-    }
-
-    this.switchTo_(targetPageId);
-  }
-
-  /**
-   * Navigates to the next page in the story.
-   * @param {boolean=} opt_isAutomaticAdvance Whether this navigation was caused
-   *     by an automatic advancement after a timeout.
-   */
-  next(opt_isAutomaticAdvance) {
-    const pageId = this.getNextPageId(opt_isAutomaticAdvance);
-
-    if (!pageId) {
-      return;
-    }
-
-    this.switchTo_(pageId);
-  }
-
-  /**
-   * Delegated the navigation decision to AMP-STORY via event.
-   * @param {number} direction The direction in which navigation needs to takes place.
-   */
-  navigateOnTap(direction) {
-    const payload = dict({'direction': direction});
-    const eventInit = {bubbles: true};
-    dispatchCustom(
-      this.win,
-      this.element,
-      EventType.TAP_NAVIGATION,
-      payload,
-      eventInit
-    );
-  }
-
-  /**
-   * @param {string} targetPageId
-   * @private
-   */
-  switchTo_(targetPageId) {
-    const payload = dict({'targetPageId': targetPageId});
-    const eventInit = {bubbles: true};
-    dispatchCustom(
-      this.win,
-      this.element,
-      EventType.SWITCH_PAGE,
-      payload,
-      eventInit
-    );
-  }
-
-  /**
-   * @private
-   */
-  reportDevModeErrors_() {
-    if (!getMode().development) {
-      return;
-    }
-
-    getLogEntries(this.element).then((logEntries) => {
-      dispatchCustom(
-        this.win,
-        this.element,
-        EventType.DEV_LOG_ENTRIES_AVAILABLE,
-        // ? is OK because all consumers are internal.
-        /** @type {?} */ (logEntries),
-        {bubbles: true}
-      );
-    });
-  }
-
-  /**
-   * Displays a loading spinner whenever the video is buffering.
-   * Has to be called after the mediaPool preload method, that swaps the video
-   * elements with new amp elements.
-   * @private
-   */
-  startListeningToVideoEvents_() {
-    const videos = this.getAllVideos_();
-
-    if (videos.length === 0) {
-      return;
-    }
-
-    this.debounceToggleLoadingSpinner_(true);
-    Array.prototype.forEach.call(videos, (videoEl) => {
-      this.unlisteners_.push(
-        listen(videoEl, 'playing', () =>
-          this.debounceToggleLoadingSpinner_(false)
-        )
-      );
-      this.unlisteners_.push(
-        listen(videoEl, 'waiting', () =>
-          this.debounceToggleLoadingSpinner_(true)
-        )
-      );
-    });
-  }
-
-  /**
-   * @private
-   */
-  stopListeningToVideoEvents_() {
-    this.debounceToggleLoadingSpinner_(false);
-    this.unlisteners_.forEach((unlisten) => unlisten());
-    this.unlisteners_ = [];
-  }
-
-  /**
-   * @private
-   */
-  buildAndAppendLoadingSpinner_() {
-    this.loadingSpinner_ = new LoadingSpinner(this.win.document);
-    this.element.appendChild(this.loadingSpinner_.build());
-  }
-
-  /**
-   * Has to be called through the `debounceToggleLoadingSpinner_` method, to
-   * avoid the spinner flashing on the screen when the video loops, or during
-   * navigation transitions.
-   * Builds the loading spinner and attaches it to the DOM on first call.
-   * @param {boolean} isActive
-   * @private
-   */
-  toggleLoadingSpinner_(isActive) {
-    this.getVsync().mutate(() => {
-      if (!this.loadingSpinner_) {
-        this.buildAndAppendLoadingSpinner_();
-      }
-
-      this.loadingSpinner_.toggle(isActive);
-    });
-  }
-
-  /**
-   * check to see if this page is a wrapper for an ad
-   * @return {boolean}
-   */
-  isAd() {
-    return this.element.hasAttribute(ADVERTISEMENT_ATTR_NAME);
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-render-service.js b/extensions/amp-story/0.1/amp-story-render-service.js
deleted file mode 100644
index 8e646d3a908f5..0000000000000
--- a/extensions/amp-story/0.1/amp-story-render-service.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 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.
- */
-
-import {CommonSignals} from '../../../src/common-signals';
-import {whenUpgradedToCustomElement} from '../../../src/dom';
-
-/** @implements {../../../src/render-delaying-services.RenderDelayingService} */
-export class AmpStoryRenderService {
-  /**
-   * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
-   */
-  constructor(ampdoc) {
-    /**
-     * @private {!../../../src/service/ampdoc-impl.AmpDoc}
-     */
-    this.ampdoc_ = ampdoc;
-  }
-
-  /**
-   * Function to return a promise for when it is finished delaying render, and
-   * is ready.  Implemented from RenderDelayingService
-   * @return {!Promise}
-   */
-  whenReady() {
-    return this.ampdoc_.whenReady().then((body) => {
-      const storyEl = body.querySelector('amp-story[standalone]');
-
-      if (!storyEl) {
-        return;
-      }
-
-      return whenUpgradedToCustomElement(storyEl).then(() => {
-        return storyEl.signals().whenSignal(CommonSignals.LOAD_END);
-      });
-    });
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-request-service.js b/extensions/amp-story/0.1/amp-story-request-service.js
deleted file mode 100644
index 9637f76a2c93d..0000000000000
--- a/extensions/amp-story/0.1/amp-story-request-service.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {Services} from '../../../src/services';
-import {once} from '../../../src/utils/function';
-import {user, userAssert} from '../../../src/log';
-
-/** @private @const {string} */
-export const BOOKEND_CONFIG_ATTRIBUTE_NAME = 'bookend-config-src';
-
-/**
- * Service to send XHRs.
- */
-export class AmpStoryRequestService {
-  /**
-   * @param {!Window} win
-   * @param {!Element} storyElement
-   */
-  constructor(win, storyElement) {
-    /** @private @const {!Element} */
-    this.storyElement_ = storyElement;
-
-    /** @private @const {!../../../src/service/xhr-impl.Xhr} */
-    this.xhr_ = Services.xhrFor(win);
-
-    /** @const @type {function():(!Promise<!JsonObject>|!Promise<null>)} */
-    this.loadBookendConfig = once(() => this.loadBookendConfigImpl_());
-  }
-
-  /**
-   * Retrieves the publisher bookend configuration, including the share
-   * providers.
-   * Has to be called through `loadBookendConfig`.
-   * @return {(!Promise<!JsonObject>|!Promise<null>)}
-   * @private
-   */
-  loadBookendConfigImpl_() {
-    return this.loadJsonFromAttribute_(BOOKEND_CONFIG_ATTRIBUTE_NAME);
-  }
-
-  /**
-   * @param {string} attributeName
-   * @return {(!Promise<!JsonObject>|!Promise<null>)}
-   * @private
-   */
-  loadJsonFromAttribute_(attributeName) {
-    if (!this.storyElement_.hasAttribute(attributeName)) {
-      return Promise.resolve(null);
-    }
-
-    const rawUrl = this.storyElement_.getAttribute(attributeName);
-    const opts = {};
-
-    return Services.urlReplacementsForDoc(this.storyElement_)
-      .expandUrlAsync(user().assertString(rawUrl))
-      .then((url) => this.xhr_.fetchJson(url, opts))
-      .then((response) => {
-        userAssert(response.ok, 'Invalid HTTP response');
-        return response.json();
-      });
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-share-menu.css b/extensions/amp-story/0.1/amp-story-share-menu.css
deleted file mode 100644
index 1d7ae3821fc30..0000000000000
--- a/extensions/amp-story/0.1/amp-story-share-menu.css
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-@import './amp-story-share.css';
-
-.i-amphtml-story-share-menu {
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  height: 100% !important;
-  width: 100% !important;
-  z-index: 100001 !important;
-  transform: translate3d(0, 100vh, 0) !important;
-  transition-delay: 0.15s !important;
-}
-
-.i-amphtml-story-share-menu-visible {
-  transform: translate3d(0, 0, 0) !important;
-  transition-delay: 0s !important;
-}
-
-/** Black opacity overlay. */
-.i-amphtml-story-share-menu::before {
-  content: "" !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  height: 100% !important;
-  width: 100% !important;
-  background: #000000 !important;
-  opacity: 0 !important;
-  transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1) !important;
-}
-
-.i-amphtml-story-share-menu.i-amphtml-story-share-menu-visible::before {
-  opacity: 0.4 !important;
-  transition: opacity 0.2s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
-}
-
-.i-amphtml-story-share-menu-container {
-  position: absolute !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  height: auto !important;
-  background: rgba(0, 0, 0, 0.9) !important;
-  transform: translate3d(0, 100%, 0) !important;
-  transition: transform 0.15s cubic-bezier(0.4, 0.0, 1, 1) !important;
-}
-
-.i-amphtml-story-share-menu-visible .i-amphtml-story-share-menu-container {
-  transform: translate3d(0, 0, 0) !important;
-  transition: transform 0.2s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
-}
diff --git a/extensions/amp-story/0.1/amp-story-share-menu.js b/extensions/amp-story/0.1/amp-story-share-menu.js
deleted file mode 100644
index 66360c922d771..0000000000000
--- a/extensions/amp-story/0.1/amp-story-share-menu.js
+++ /dev/null
@@ -1,236 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {Action, StateProperty} from './amp-story-store-service';
-import {CSS} from '../../../build/amp-story-share-menu-0.1.css';
-import {Services} from '../../../src/services';
-import {ShareWidget} from './amp-story-share';
-import {closest} from '../../../src/dom';
-import {createShadowRootWithStyle} from './utils';
-import {dev} from '../../../src/log';
-import {dict} from './../../../src/utils/object';
-import {getAmpdoc} from '../../../src/service';
-import {renderAsElement} from './simple-template';
-import {toggle} from '../../../src/style';
-
-/** @const {string} Class to toggle the share menu. */
-export const VISIBLE_CLASS = 'i-amphtml-story-share-menu-visible';
-
-/** @const {string} Class for the share widget component container. */
-const SHARE_WIDGET_CONTAINER_CLASS = 'i-amphtml-story-share-menu-container';
-
-/**
- * Quick share template, used as a fallback if native sharing is not supported.
- * @private @const {!./simple-template.ElementDef}
- */
-const TEMPLATE = {
-  tag: 'div',
-  attrs: dict({
-    'class': 'i-amphtml-story-share-menu i-amphtml-story-system-reset',
-  }),
-  children: [
-    {
-      tag: 'div',
-      attrs: dict({'class': SHARE_WIDGET_CONTAINER_CLASS}),
-      children: [],
-    },
-  ],
-};
-
-/**
- * System amp-social-share button template.
- * @private @const {!./simple-template.ElementDef}
- */
-const AMP_SOCIAL_SYSTEM_SHARE_TEMPLATE = {
-  tag: 'amp-social-share',
-  attrs: /** @type {!JsonObject} */ (dict({'type': 'system'})),
-};
-
-/**
- * Share menu UI.
- */
-export class ShareMenu {
-  /**
-   * @param {!Window} win
-   * @param {!Element} parentEl Element where to append the component
-   */
-  constructor(win, parentEl) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private {?Element} */
-    this.element_ = null;
-
-    /** @private {?Element} */
-    this.innerContainerEl_ = null;
-
-    /** @private {boolean} */
-    this.isBuilt_ = false;
-
-    /** @private {boolean} */
-    this.isSystemShareSupported_ = false;
-
-    /** @private @const {!ShareWidget} */
-    this.shareWidget_ = ShareWidget.create(this.win_, parentEl);
-
-    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
-    this.storeService_ = Services.storyStoreServiceV01(this.win_);
-
-    /** @private @const {!Element} */
-    this.parentEl_ = parentEl;
-
-    /** @const @private {!../../../src/service/vsync-impl.Vsync} */
-    this.vsync_ = Services.vsyncFor(this.win_);
-  }
-
-  /**
-   * Builds and appends the component in the story. Could build either the
-   * amp-social-share button to display the native system sharing, or a fallback
-   * UI.
-   */
-  build() {
-    if (this.isBuilt()) {
-      return;
-    }
-
-    this.isBuilt_ = true;
-
-    this.isSystemShareSupported_ = this.shareWidget_.isSystemShareSupported(
-      getAmpdoc(this.parentEl_)
-    );
-
-    this.isSystemShareSupported_
-      ? this.buildForSystemSharing_()
-      : this.buildForFallbackSharing_();
-  }
-
-  /**
-   * Whether the element has been built.
-   * @return {boolean}
-   */
-  isBuilt() {
-    return this.isBuilt_;
-  }
-
-  /**
-   * Builds a hidden amp-social-share button that triggers the native system
-   * sharing UI.
-   * @private
-   */
-  buildForSystemSharing_() {
-    this.shareWidget_.loadRequiredExtensions(getAmpdoc(this.parentEl_));
-    this.element_ = renderAsElement(
-      this.win_.document,
-      AMP_SOCIAL_SYSTEM_SHARE_TEMPLATE
-    );
-
-    this.initializeListeners_();
-
-    this.vsync_.mutate(() => {
-      toggle(dev().assertElement(this.element_), false);
-      this.parentEl_.appendChild(this.element_);
-    });
-  }
-
-  /**
-   * Builds and appends the fallback UI.
-   * @private
-   */
-  buildForFallbackSharing_() {
-    const root = this.win_.document.createElement('div');
-
-    this.element_ = renderAsElement(this.win_.document, TEMPLATE);
-    createShadowRootWithStyle(root, this.element_, CSS);
-
-    this.initializeListeners_();
-
-    this.vsync_.run({
-      measure: () => {
-        this.innerContainerEl_ = this.element_./*OK*/ querySelector(
-          `.${SHARE_WIDGET_CONTAINER_CLASS}`
-        );
-      },
-      mutate: () => {
-        this.parentEl_.appendChild(root);
-        // Preloads and renders the share widget content.
-        const shareWidget = this.shareWidget_.build(getAmpdoc(this.parentEl_));
-        this.innerContainerEl_.appendChild(shareWidget);
-      },
-    });
-  }
-
-  /**
-   * @private
-   */
-  initializeListeners_() {
-    this.storeService_.subscribe(StateProperty.SHARE_MENU_STATE, (isOpen) => {
-      this.onShareMenuStateUpdate_(isOpen);
-    });
-
-    // Don't listen to click events if the system share is supported, since the
-    // native layer handles all the UI interactions.
-    if (!this.isSystemShareSupported_) {
-      this.element_.addEventListener('click', (event) =>
-        this.onShareMenuClick_(event)
-      );
-    }
-  }
-
-  /**
-   * Reacts to menu state updates and decides whether to show either the native
-   * system sharing, or the fallback UI.
-   * @param {boolean} isOpen
-   * @private
-   */
-  onShareMenuStateUpdate_(isOpen) {
-    if (this.isSystemShareSupported_ && isOpen) {
-      // Dispatches a click event on the amp-social-share button to trigger the
-      // native system sharing UI. This has to be done upon user interaction.
-      this.element_.dispatchEvent(new Event('click'));
-
-      // There is no way to know when the user dismisses the native system share
-      // menu, so we pretend it is closed on the story end, and let the native
-      // end handle the UI interactions.
-      this.close_();
-    }
-
-    if (!this.isSystemShareSupported_) {
-      this.vsync_.mutate(() => {
-        this.element_.classList.toggle(VISIBLE_CLASS, isOpen);
-      });
-    }
-  }
-
-  /**
-   * Handles click events and maybe closes the menu for the fallback UI.
-   * @param  {!Event} event
-   */
-  onShareMenuClick_(event) {
-    const el = dev().assertElement(event.target);
-    // Closes the menu if click happened outside of the menu main container.
-    if (!closest(el, (el) => el === this.innerContainerEl_, this.element_)) {
-      this.close_();
-    }
-  }
-
-  /**
-   * Closes the share menu.
-   * @private
-   */
-  close_() {
-    this.storeService_.dispatch(Action.TOGGLE_SHARE_MENU, false);
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-share.css b/extensions/amp-story/0.1/amp-story-share.css
deleted file mode 100644
index 1279a3fd7fcef..0000000000000
--- a/extensions/amp-story/0.1/amp-story-share.css
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-@import '../../amp-social-share/0.1/amp-social-share.css';
-
-/* All top-level bookend elements need to set their own left/right margins */
-.i-amphtml-story-share-widget {
-  display: flex !important;
-  margin: 16px 8px !important;
-}
-
-.i-amphtml-story-no-sharing .i-amphtml-story-share-widget {
-  display: none !important;
-}
-
-.i-amphtml-story-share-widget-scrollable {
-  padding: 16px 0 !important;
-  height: 66px !important;
-  overflow: auto !important;
-}
-
-.i-amphtml-story-bookend-fullbleed .i-amphtml-story-share-widget {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.i-amphtml-story-share-widget::-webkit-scrollbar {
-  width: 0px !important;
-  background: transparent !important;
-}
-
-.i-amphtml-story-share-list {
-  list-style: none !important;
-  padding: 0 8px !important;
-  margin: 0 !important;
-  display: flex !important;
-  flex-wrap: wrap !important;
-  width: 100% !important;
-}
-
-.i-amphtml-story-bookend-fullbleed .i-amphtml-story-share-list {
-  padding-left: 16px !important;
-  padding-right: 16px !important;
-}
-
-.i-amphtml-story-share-item {
-  width: 48px !important;
-  height: 66px !important;
-  padding: 0 16px !important;
-  margin-bottom: 12px !important;
-}
-
-@media (max-width: 410px) {
-  .i-amphtml-story-share-item {
-    display: flex !important;
-    justify-content: center !important;
-    padding: 0 !important;
-    min-width: 60px !important;
-    width: 25% !important;
-  }
-}
-
-@media (min-width: 410px) and (max-width: 500px) {
-  .i-amphtml-story-share-item {
-    display: flex !important;
-    justify-content: center !important;
-    padding: 0 !important;
-    width: 20% !important;
-  }
-}
-
-@media (min-width: 500px) and (max-width: 720px) {
-  .i-amphtml-story-share-item {
-    display: flex !important;
-    justify-content: center !important;
-    padding: 0 !important;
-    width: 16.66% !important;
-  }
-}
-
-.i-amphtml-story-share-widget-scrollable .i-amphtml-story-share-list {
-  flex-wrap: nowrap !important;
-}
-
-.i-amphtml-story-share-widget-scrollable > * > .i-amphtml-story-share-item {
-  display: block !important;
-  margin: 0 !important;
-  padding: 0 16px !important;
-  min-width: auto !important;
-}
-
-.i-amphtml-story-share-item:empty {
-  display: none !important;
-}
-
-.i-amphtml-story-share-icon {
-  box-sizing: border-box !important;
-  position: relative !important;
-  width: 48px !important;
-  height: 66px !important;
-  padding: 56px 0 0 0 !important;
-  background-color: transparent !important;
-  display: block !important;
-  text-transform: capitalize !important;
-  font-family: 'Roboto', sans-serif !important;
-  color: #fff !important;
-  font-weight: 400 !important;
-  line-height: 10px !important;
-  font-size: 10px !important;
-  text-align: center !important;
-  cursor: pointer !important;
-
-  /* for svg backgrounds: */
-  background-position: 8px 8px !important;
-  background-size: 32px 32px !important;
-  background-repeat: no-repeat !important;
-}
-
-.i-amphtml-story-share-icon.amp-social-share-facebook {
-  /* SVG icon has inner padding, so the glyph renders visually smaller than
-   * other icons, so we work around it by setting a higher background size. */
-  background-size: 38px 38px !important;
-  background-position: 5px 5px !important;
-}
-
-.i-amphtml-story-share-icon::before {
-  content: " " !important;
-  border-radius: 4px !important;
-  background-color: rgba(255, 255, 255, 0.15) !important;
-  width: 48px !important;
-  height: 48px !important;
-  position: absolute !important;
-  display: block !important;
-  top: 0 !important;
-  left: 0 !important;
-  z-index: -1 !important;
-}
-
-.i-amphtml-story-share-icon:active,
-.i-amphtml-story-share-icon:focus {
-  outline: none !important;
-  box-shadow: none !important;
-}
-
-.i-amphtml-story-share-icon:active::before {
-  background-color: #787878 !important;
-}
-
-.i-amphtml-story-share-icon[type=email] {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" fill="#ffffff"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
-}
-
-.i-amphtml-story-share-icon[type=system] {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>') !important;
-}
-
-.i-amphtml-story-share-icon-link {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>') !important;
-}
diff --git a/extensions/amp-story/0.1/amp-story-share.js b/extensions/amp-story/0.1/amp-story-share.js
deleted file mode 100644
index 1064f1e8db5e8..0000000000000
--- a/extensions/amp-story/0.1/amp-story-share.js
+++ /dev/null
@@ -1,576 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {LocalizedStringId} from '../../../src/localized-strings';
-import {Services} from '../../../src/services';
-import {Toast} from './toast';
-import {
-  copyTextToClipboard,
-  isCopyingToClipboardSupported,
-} from '../../../src/clipboard';
-import {dev, devAssert, user} from '../../../src/log';
-import {dict, map} from './../../../src/utils/object';
-import {getLocalizationService} from './amp-story-localization-service';
-import {isObject} from '../../../src/types';
-import {listen} from '../../../src/event-helper';
-import {px, setImportantStyles} from '../../../src/style';
-import {renderAsElement, renderSimpleTemplate} from './simple-template';
-import {throttle} from '../../../src/utils/rate-limit';
-
-/**
- * Maps share provider type to visible name.
- * If the name only needs to be capitalized (e.g. `facebook` to `Facebook`) it
- * does not need to be included here.
- * @const {!Object<string, !LocalizedStringId>}
- */
-const SHARE_PROVIDER_LOCALIZED_STRING_ID = map({
-  'system': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SYSTEM,
-  'email': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL,
-  'facebook': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK,
-  'linkedin': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN,
-  'pinterest': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST,
-  'gplus': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS,
-  'tumblr': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR,
-  'twitter': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER,
-  'whatsapp': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP,
-  'sms': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS,
-});
-
-/**
- * Default left/right padding for share buttons.
- * @private @const {number}
- */
-const DEFAULT_BUTTON_PADDING = 16;
-
-/**
- * Minimum left/right padding for share buttons.
- * @private @const {number}
- */
-const MIN_BUTTON_PADDING = 10;
-
-/**
- * Key for share providers in bookend config.
- * @package @const {string}
- */
-export const SHARE_PROVIDERS_KEY = 'shareProviders';
-
-/**
- * Deprecated key for share providers in bookend config.
- * @package @const {string}
- */
-export const DEPRECATED_SHARE_PROVIDERS_KEY = 'share-providers';
-
-/** @private @const {!./simple-template.ElementDef} */
-const TEMPLATE = {
-  tag: 'div',
-  attrs: dict({'class': 'i-amphtml-story-share-widget'}),
-  children: [
-    {
-      tag: 'ul',
-      attrs: dict({'class': 'i-amphtml-story-share-list'}),
-      children: [
-        {
-          tag: 'li',
-          attrs: dict({'class': 'i-amphtml-story-share-system'}),
-        },
-      ],
-    },
-  ],
-};
-
-/** @private @const {!./simple-template.ElementDef} */
-const SHARE_ITEM_TEMPLATE = {
-  tag: 'li',
-  attrs: dict({'class': 'i-amphtml-story-share-item'}),
-};
-
-/** @private @const {!./simple-template.ElementDef} */
-const LINK_SHARE_ITEM_TEMPLATE = {
-  tag: 'div',
-  attrs: dict({
-    'class': 'i-amphtml-story-share-icon i-amphtml-story-share-icon-link',
-  }),
-  localizedStringId: LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK,
-};
-
-/** @private @const {string} */
-const SCROLLABLE_CLASSNAME = 'i-amphtml-story-share-widget-scrollable';
-
-/**
- * @param {!JsonObject=} opt_params
- * @return {!JsonObject}
- */
-function buildProviderParams(opt_params) {
-  const attrs = dict();
-
-  if (opt_params) {
-    Object.keys(opt_params).forEach((field) => {
-      attrs[`data-param-${field}`] = opt_params[field];
-    });
-  }
-
-  return attrs;
-}
-
-/**
- * @param {!Document} doc
- * @param {string} shareType
- * @param {!JsonObject=} opt_params
- * @return {!Node}
- */
-function buildProvider(doc, shareType, opt_params) {
-  const shareProviderLocalizedStringId = devAssert(
-    SHARE_PROVIDER_LOCALIZED_STRING_ID[shareType],
-    `No localized string to display name for share type ${shareType}.`
-  );
-
-  return renderSimpleTemplate(
-    doc,
-    /** @type {!Array<!./simple-template.ElementDef>} */ ([
-      {
-        tag: 'amp-social-share',
-        attrs: /** @type {!JsonObject} */ (Object.assign(
-          dict({
-            'width': 48,
-            'height': 66,
-            'class': 'i-amphtml-story-share-icon',
-            'type': shareType,
-          }),
-          buildProviderParams(opt_params)
-        )),
-        localizedStringId: shareProviderLocalizedStringId,
-      },
-    ])
-  );
-}
-
-/**
- * @param {!Document} doc
- * @param {string} url
- * @return {!Element}
- */
-function buildCopySuccessfulToast(doc, url) {
-  return renderAsElement(
-    doc,
-    /** @type {!./simple-template.ElementDef} */ ({
-      tag: 'div',
-      attrs: dict({'class': 'i-amphtml-story-copy-successful'}),
-      children: [
-        {
-          tag: 'div',
-          localizedStringId:
-            LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT,
-        },
-        {
-          tag: 'div',
-          attrs: dict({'class': 'i-amphtml-story-copy-url'}),
-          unlocalizedString: url,
-        },
-      ],
-    })
-  );
-}
-
-/**
- * Social share widget for story bookend.
- */
-export class ShareWidget {
-  /**
-   * @param {!Window} win
-   * @param {!Element} parentEl
-   */
-  constructor(win, parentEl) {
-    /** @private {?../../../src/service/ampdoc-impl.AmpDoc} */
-    this.ampdoc_ = null;
-
-    /** @protected @const {!Window} */
-    this.win = win;
-
-    /** @protected {?Element} */
-    this.root = null;
-
-    this.parentEl_ = parentEl;
-
-    /** @private @const {!./amp-story-request-service.AmpStoryRequestService} */
-    this.requestService_ = Services.storyRequestServiceV01(this.win);
-  }
-
-  /**
-   * @param {!Window} win
-   * @param {!Element} parentEl
-   * @return {!ShareWidget}
-   */
-  static create(win, parentEl) {
-    return new ShareWidget(win, parentEl);
-  }
-
-  /**
-   * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
-   * @return {!Element}
-   */
-  build(ampdoc) {
-    devAssert(!this.root, 'Already built.');
-
-    this.ampdoc_ = ampdoc;
-
-    this.root = renderAsElement(this.win.document, TEMPLATE);
-
-    this.loadProviders();
-    this.maybeAddLinkShareButton_();
-    this.maybeAddSystemShareButton_();
-
-    return this.root;
-  }
-
-  /**
-   * @return {!../../../src/service/ampdoc-impl.AmpDoc}
-   * @private
-   */
-  getAmpDoc_() {
-    return /** @type {!../../../src/service/ampdoc-impl.AmpDoc} */ (devAssert(
-      this.ampdoc_
-    ));
-  }
-
-  /** @private */
-  maybeAddLinkShareButton_() {
-    if (!isCopyingToClipboardSupported(this.win.document)) {
-      return;
-    }
-
-    const linkShareButton = renderAsElement(
-      this.win.document,
-      LINK_SHARE_ITEM_TEMPLATE
-    );
-
-    this.add_(linkShareButton);
-
-    // TODO(alanorozco): Listen for proper tap event (i.e. fastclick)
-    listen(linkShareButton, 'click', (e) => {
-      e.preventDefault();
-      this.copyUrlToClipboard_();
-    });
-  }
-
-  /** @private */
-  copyUrlToClipboard_() {
-    const url = Services.documentInfoForDoc(this.getAmpDoc_()).canonicalUrl;
-
-    if (!copyTextToClipboard(this.win, url)) {
-      const localizationService = getLocalizationService(this.parentEl_);
-      devAssert(localizationService, 'Could not retrieve LocalizationService.');
-      const failureString = localizationService.getLocalizedString(
-        LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT
-      );
-      Toast.show(this.win, dev().assertString(failureString));
-      return;
-    }
-
-    Toast.show(this.win, buildCopySuccessfulToast(this.win.document, url));
-  }
-
-  /** @private */
-  maybeAddSystemShareButton_() {
-    if (!this.isSystemShareSupported()) {
-      // `amp-social-share` will hide `system` buttons when not supported, but
-      // we also need to avoid adding it for rendering reasons.
-      return;
-    }
-
-    const container = dev()
-      .assertElement(this.root)
-      .querySelector('.i-amphtml-story-share-system');
-
-    this.loadRequiredExtensions();
-
-    container.appendChild(buildProvider(this.win.document, 'system'));
-  }
-
-  /**
-   * NOTE(alanorozco): This is a duplicate of the logic in the
-   * `amp-social-share` component.
-   * @param  {!../../../src/service/ampdoc-impl.AmpDoc=}  ampdoc
-   * @return {boolean} Whether the browser supports native system sharing.
-   */
-  isSystemShareSupported(ampdoc = this.getAmpDoc_()) {
-    const viewer = Services.viewerForDoc(ampdoc);
-
-    const platform = Services.platformFor(this.win);
-
-    // Chrome exports navigator.share in WebView but does not implement it.
-    // See https://bugs.chromium.org/p/chromium/issues/detail?id=765923
-    const isChromeWebview = viewer.isWebviewEmbedded() && platform.isChrome();
-
-    return 'share' in navigator && !isChromeWebview;
-  }
-
-  /**
-   * Loads and applies the share providers configured by the publisher.
-   * @protected
-   */
-  loadProviders() {
-    this.loadRequiredExtensions();
-
-    this.requestService_.loadBookendConfig().then((config) => {
-      const providers =
-        config &&
-        (config[SHARE_PROVIDERS_KEY] || config[DEPRECATED_SHARE_PROVIDERS_KEY]);
-      if (!providers) {
-        return;
-      }
-      this.setProviders_(providers);
-    });
-  }
-
-  /**
-   * @param {!Array<!JsonObject|string>} providers
-   * @return {!Object<string, !JsonObject>} providers
-   */
-  parseProvidersToClassicApi(providers) {
-    const providersMap = {};
-
-    providers.forEach((currentProvider) => {
-      if (
-        isObject(currentProvider) &&
-        currentProvider['provider'] == 'facebook'
-      ) {
-        providersMap['facebook'] = {'app_id': currentProvider['app_id']};
-      } else if (isObject(currentProvider)) {
-        providersMap[currentProvider['provider']] = true;
-      } else {
-        providersMap[currentProvider] = true;
-      }
-    });
-
-    return providersMap;
-  }
-
-  /**
-   * @param {!Object<string, (!JsonObject|boolean)>} providers
-   * @private
-   * TODO(alanorozco): Set story metadata in share config.
-   */
-  setProviders_(providers) {
-    if (Array.isArray(providers)) {
-      providers = this.parseProvidersToClassicApi(providers);
-    }
-
-    Object.keys(providers).forEach((type) => {
-      if (type == 'system') {
-        user().warn(
-          'AMP-STORY',
-          '`system` is not a valid share provider type. Native sharing is ' +
-            'enabled by default and cannot be turned off.',
-          type
-        );
-        return;
-      }
-
-      if (isObject(providers[type])) {
-        this.add_(
-          buildProvider(
-            this.win.document,
-            type,
-            /** @type {!JsonObject} */ (providers[type])
-          )
-        );
-        return;
-      }
-
-      // Bookend config API requires real boolean, not just truthy
-      if (providers[type] === true) {
-        this.add_(buildProvider(this.win.document, type));
-        return;
-      }
-
-      user().warn(
-        'AMP-STORY',
-        `Invalid share providers configuration for "${type}" in bookend. ` +
-          'Value must be `true` or a params object.'
-      );
-    });
-  }
-
-  /**
-   * @param {!../../../src/service/ampdoc-impl.AmpDoc=} ampdoc
-   */
-  loadRequiredExtensions(ampdoc = this.getAmpDoc_()) {
-    Services.extensionsFor(this.win).installExtensionForDoc(
-      ampdoc,
-      'amp-social-share'
-    );
-  }
-
-  /**
-   * @param {!Node} node
-   * @private
-   */
-  add_(node) {
-    const list = devAssert(this.root).firstElementChild;
-    const item = renderAsElement(this.win.document, SHARE_ITEM_TEMPLATE);
-
-    item.appendChild(node);
-
-    // `lastElementChild` is the system share button container, which should
-    // always be last in list
-    list.insertBefore(item, list.lastElementChild);
-  }
-}
-
-/**
- * Social share widget for story bookend with a scrollable layout.
- * This class is coupled to the DOM structure for ShareWidget, but that's ok.
- */
-export class ScrollableShareWidget extends ShareWidget {
-  /**
-   * @param {!Window} win
-   * @param {!Element} parentEl
-   */
-  constructor(win, parentEl) {
-    super(win, parentEl);
-
-    /** @private @const {!../../../src/service/vsync-impl.Vsync} */
-    this.vsync_ = Services.vsyncFor(win);
-
-    /**
-     * Container width is being tracked to prevent unnecessary layout
-     * calculations.
-     * @private {?number}
-     */
-    this.containerWidth_ = null;
-  }
-
-  /**
-   * @param {!Window} win
-   * @param {!Element} parentEl
-   * @return {!ScrollableShareWidget}
-   */
-  static create(win, parentEl) {
-    return new ScrollableShareWidget(win, parentEl);
-  }
-
-  /**
-   * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
-   * @return {!Element}
-   */
-  build(ampdoc) {
-    super.build(ampdoc);
-
-    this.root.classList.add(SCROLLABLE_CLASSNAME);
-
-    Services.viewportForDoc(ampdoc).onResize(
-      // we don't require a lot of smoothness here, so we throttle
-      throttle(this.win, () => this.applyButtonPadding_(), 100)
-    );
-
-    return this.root;
-  }
-
-  /**
-   * Calculates padding between buttons so that the result is that there's
-   * always one item visually "cut off" for scroll affordance.
-   * @private
-   */
-  applyButtonPadding_() {
-    const items = this.getVisibleItems_();
-
-    if (!items.length) {
-      return;
-    }
-
-    this.vsync_.run(
-      {
-        measure: (state) => {
-          const containerWidth = this.root./*OK*/ clientWidth;
-
-          if (containerWidth == this.containerWidth_) {
-            // Don't recalculate if width has not changed (i.e. onscreen keyboard)
-            state.noop = true;
-            return;
-          }
-
-          const icon = devAssert(items[0].firstElementChild);
-
-          const leftMargin =
-            icon./*OK*/ offsetLeft - this.root./*OK*/ offsetLeft;
-          const iconWidth = icon./*OK*/ offsetWidth;
-
-          // Total width that the buttons will occupy with minimum padding.
-          const totalItemWidth =
-            iconWidth * items.length +
-            2 * MIN_BUTTON_PADDING * (items.length - 1);
-
-          // If buttons don't fit within the available area, calculate padding so
-          // that there will be an element cut-off.
-          if (totalItemWidth > containerWidth - leftMargin * 2) {
-            const availableWidth = containerWidth - leftMargin - iconWidth / 2;
-            const amountVisible = Math.floor(
-              availableWidth / (iconWidth + MIN_BUTTON_PADDING * 2)
-            );
-
-            state.padding = 0.5 * (availableWidth / amountVisible - iconWidth);
-          } else {
-            // Otherwise, calculate padding in from MIN_PADDING to DEFAULT_PADDING
-            // so that all elements fit and take as much area as possible.
-            const totalPadding =
-              (containerWidth - leftMargin * 2 - iconWidth * items.length) /
-              (items.length - 1);
-
-            state.padding = Math.min(
-              DEFAULT_BUTTON_PADDING,
-              0.5 * totalPadding
-            );
-          }
-
-          this.containerWidth_ = containerWidth;
-        },
-        mutate: (state) => {
-          if (state.noop) {
-            return;
-          }
-          items.forEach((el, i) => {
-            if (i != 0) {
-              setImportantStyles(el, {'padding-left': px(state.padding)});
-            }
-            if (i != items.length - 1) {
-              setImportantStyles(el, {'padding-right': px(state.padding)});
-            }
-          });
-        },
-      },
-      {}
-    );
-  }
-
-  /**
-   * @return {!Array<!Element>}
-   * @private
-   */
-  getVisibleItems_() {
-    return Array.prototype.filter.call(
-      dev().assertElement(this.root).querySelectorAll('li'),
-      (el) => !!el.firstElementChild
-    );
-  }
-
-  /**
-   * Loads and applies the share providers configured by the publisher.
-   * @protected
-   */
-  loadProviders() {
-    super.loadProviders();
-    this.applyButtonPadding_();
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-store-service.js b/extensions/amp-story/0.1/amp-story-store-service.js
deleted file mode 100644
index 6ed1abcc6f269..0000000000000
--- a/extensions/amp-story/0.1/amp-story-store-service.js
+++ /dev/null
@@ -1,311 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {EmbedMode, parseEmbedMode} from './embed-mode';
-import {Observable} from '../../../src/observable';
-import {dev} from '../../../src/log';
-import {hasOwn} from '../../../src/utils/object';
-
-/** @type {string} */
-const TAG = 'amp-story';
-
-/**
- * @typedef {{
- *    caninsertautomaticad: boolean,
- *    canshowbookend: boolean,
- *    canshownavigationoverlayhint: boolean,
- *    canshowpreviouspagehelp: boolean,
- *    canshowsharinguis: boolean,
- *    canshowsystemlayerbuttons: boolean,
- *    adstate: boolean,
- *    bookendstate: boolean,
- *    desktopstate: boolean,
- *    infodialogstate: boolean,
- *    hasaudiostate: boolean,
- *    landscapestate: boolean,
- *    mutedstate: boolean,
- *    sharemenustate: boolean,
- *    supportedbrowserstate: boolean,
- *    consentid: ?string,
- *    currentpageid: string,
- * }}
- */
-export let State;
-
-/** @package @const @enum {string} */
-export const StateProperty = {
-  // Embed options.
-  CAN_INSERT_AUTOMATIC_AD: 'caninsertautomaticad',
-  CAN_SHOW_BOOKEND: 'canshowbookend',
-  CAN_SHOW_NAVIGATION_OVERLAY_HINT: 'canshownavigationoverlayhint',
-  CAN_SHOW_PREVIOUS_PAGE_HELP: 'canshowpreviouspagehelp',
-  CAN_SHOW_SHARING_UIS: 'canshowsharinguis',
-  CAN_SHOW_SYSTEM_LAYER_BUTTONS: 'canshowsystemlayerbuttons',
-
-  // App States.
-  AD_STATE: 'adstate',
-  BOOKEND_STATE: 'bookendstate',
-  DESKTOP_STATE: 'desktopstate',
-  HAS_AUDIO_STATE: 'hasaudiostate',
-  INFO_DIALOG_STATE: 'infodialogstate',
-  LANDSCAPE_STATE: 'landscapestate',
-  MUTED_STATE: 'mutedstate',
-  SHARE_MENU_STATE: 'sharemenustate',
-  SUPPORTED_BROWSER_STATE: 'supportedbrowserstate',
-
-  // App data.
-  CONSENT_ID: 'consentid',
-  CURRENT_PAGE_ID: 'currentpageid',
-  CURRENT_PAGE_INDEX: 'currentpageindex',
-};
-
-/** @package @const @enum {string} */
-export const Action = {
-  CHANGE_PAGE: 'changepage',
-  SET_CONSENT_ID: 'setconsentid',
-  TOGGLE_AD: 'togglead',
-  TOGGLE_BOOKEND: 'togglebookend',
-  TOGGLE_DESKTOP: 'toggledesktop',
-  TOGGLE_INFO_DIALOG: 'toggleinfodialog',
-  TOGGLE_HAS_AUDIO: 'togglehasaudio',
-  TOGGLE_LANDSCAPE: 'togglelandscape',
-  TOGGLE_MUTED: 'togglemuted',
-  TOGGLE_SHARE_MENU: 'togglesharemenu',
-  TOGGLE_SUPPORTED_BROWSER: 'togglesupportedbrowser',
-};
-
-/**
- * Returns the new sate.
- * @param  {!State} state Immutable state
- * @param  {!Action} action
- * @param  {*} data
- * @return {!State} new state
- */
-const actions = (state, action, data) => {
-  switch (action) {
-    // Triggers the ad UI.
-    case Action.TOGGLE_AD:
-      return /** @type {!State} */ ({
-        ...state,
-        [StateProperty.AD_STATE]: !!data,
-      });
-    // Shows or hides the bookend.
-    case Action.TOGGLE_BOOKEND:
-      if (!state[StateProperty.CAN_SHOW_BOOKEND]) {
-        return state;
-      }
-      return /** @type {!State} */ ({
-        ...state,
-        [StateProperty.BOOKEND_STATE]: !!data,
-      });
-    // Triggers the desktop UI.
-    case Action.TOGGLE_DESKTOP:
-      return /** @type {!State} */ ({
-        ...state,
-        [StateProperty.DESKTOP_STATE]: !!data,
-      });
-    // Shows or hides the info dialog.
-    case Action.TOGGLE_INFO_DIALOG:
-      return /** @type {!State} */ ({
-        ...state,
-        [StateProperty.INFO_DIALOG_STATE]: !!data,
-      });
-    // Shows or hides the audio controls.
-    case Action.TOGGLE_HAS_AUDIO:
-      return /** @type {!State} */ ({
-        ...state,
-        [StateProperty.HAS_AUDIO_STATE]: !!data,
-      });
-    case Action.TOGGLE_LANDSCAPE:
-      return /** @type {!State} */ ({
-        ...state,
-        [StateProperty.LANDSCAPE_STATE]: !!data,
-      });
-    // Mutes or unmutes the story media.
-    case Action.TOGGLE_MUTED:
-      return /** @type {!State} */ ({
-        ...state,
-        [StateProperty.MUTED_STATE]: !!data,
-      });
-    case Action.TOGGLE_SUPPORTED_BROWSER:
-      if (data) {
-        dev().error(TAG, 'Cannot exit unsupported browser state.');
-      }
-      return /** @type {!State} */ ({
-        ...state,
-        [StateProperty.CAN_INSERT_AUTOMATIC_AD]: false,
-        [StateProperty.CAN_SHOW_BOOKEND]: false,
-        [StateProperty.CAN_SHOW_NAVIGATION_OVERLAY_HINT]: false,
-        [StateProperty.CAN_SHOW_PREVIOUS_PAGE_HELP]: false,
-        [StateProperty.CAN_SHOW_SYSTEM_LAYER_BUTTONS]: false,
-        [StateProperty.BOOKEND_STATE]: false,
-        [StateProperty.DESKTOP_STATE]: false,
-        [StateProperty.HAS_AUDIO_STATE]: false,
-        [StateProperty.MUTED_STATE]: true,
-        [StateProperty.SUPPORTED_BROWSER_STATE]: false,
-      });
-    case Action.TOGGLE_SHARE_MENU:
-      return /** @type {!State} */ ({
-        ...state,
-        [StateProperty.SHARE_MENU_STATE]: !!data,
-      });
-    case Action.SET_CONSENT_ID:
-      return /** @type {!State} */ ({
-        ...state,
-        [StateProperty.CONSENT_ID]: data,
-      });
-    case Action.CHANGE_PAGE:
-      return /** @type {!State} */ ({
-        ...state,
-        [StateProperty.CURRENT_PAGE_ID]: data.id,
-        [StateProperty.CURRENT_PAGE_INDEX]: data.index,
-      });
-    default:
-      dev().error(TAG, `Unknown action ${action}.`);
-      return state;
-  }
-};
-
-/**
- * Store service.
- */
-export class AmpStoryStoreService {
-  /**
-   * @param {!Window} win
-   */
-  constructor(win) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private {!Object<string, !Observable>} */
-    this.listeners_ = {};
-
-    /** @private {!State} */
-    this.state_ = /** @type {!State} */ ({
-      ...this.getDefaultState_(),
-      ...this.getEmbedOverrides_(),
-    });
-  }
-
-  /**
-   * Retrieves a state property.
-   * @param  {string} key Property to retrieve from the state.
-   * @return {*}
-   */
-  get(key) {
-    if (!hasOwn(this.state_, key)) {
-      dev().error(TAG, `Unknown state ${key}.`);
-      return;
-    }
-    return this.state_[key];
-  }
-
-  /**
-   * Subscribes to a state property mutations.
-   * @param  {string} key
-   * @param  {!Function} listener
-   * @param  {boolean=} callToInitialize Whether the listener should be
-   *                                     triggered with current value.
-   */
-  subscribe(key, listener, callToInitialize = false) {
-    if (!hasOwn(this.state_, key)) {
-      dev().error(TAG, `Can't subscribe to unknown state ${key}.`);
-      return;
-    }
-    if (!this.listeners_[key]) {
-      this.listeners_[key] = new Observable();
-    }
-    this.listeners_[key].add(listener);
-
-    if (callToInitialize) {
-      listener(this.get(key));
-    }
-  }
-
-  /**
-   * Dispatches an action and triggers the listeners for the updated state
-   * properties.
-   * @param  {!Action} action
-   * @param  {*} data
-   */
-  dispatch(action, data) {
-    const oldState = {...this.state_};
-    this.state_ = actions(this.state_, action, data);
-
-    Object.keys(this.listeners_).forEach((key) => {
-      if (oldState[key] !== this.state_[key]) {
-        this.listeners_[key].fire(this.state_[key]);
-      }
-    });
-  }
-
-  /**
-   * Retrieves the default state, that could be overriden by an embed mode.
-   * @return {!State}
-   * @private
-   */
-  getDefaultState_() {
-    // Compiler won't resolve the object keys and trigger an error for missing
-    // properties, so we have to force the type.
-    return /** @type {!State} */ ({
-      [StateProperty.CAN_INSERT_AUTOMATIC_AD]: true,
-      [StateProperty.CAN_SHOW_BOOKEND]: true,
-      [StateProperty.CAN_SHOW_NAVIGATION_OVERLAY_HINT]: true,
-      [StateProperty.CAN_SHOW_PREVIOUS_PAGE_HELP]: true,
-      [StateProperty.CAN_SHOW_SHARING_UIS]: true,
-      [StateProperty.CAN_SHOW_SYSTEM_LAYER_BUTTONS]: true,
-      [StateProperty.AD_STATE]: false,
-      [StateProperty.BOOKEND_STATE]: false,
-      [StateProperty.DESKTOP_STATE]: false,
-      [StateProperty.INFO_DIALOG_STATE]: false,
-      [StateProperty.HAS_AUDIO_STATE]: false,
-      [StateProperty.LANDSCAPE_STATE]: false,
-      [StateProperty.MUTED_STATE]: true,
-      [StateProperty.SHARE_MENU_STATE]: false,
-      [StateProperty.SUPPORTED_BROWSER_STATE]: true,
-      [StateProperty.CONSENT_ID]: null,
-      [StateProperty.CURRENT_PAGE_ID]: '',
-      [StateProperty.CURRENT_PAGE_INDEX]: 0,
-    });
-  }
-
-  // @TODO(gmajoulet): These should get their own file if they start growing.
-  /**
-   * Retrieves the embed mode config, that will override the default state.
-   * @return {!Object<StateProperty, *>} Partial state
-   * @private
-   */
-  getEmbedOverrides_() {
-    const embedMode = parseEmbedMode(this.win_.location.hash);
-    switch (embedMode) {
-      case EmbedMode.NAME_TBD:
-        return {
-          [StateProperty.CAN_INSERT_AUTOMATIC_AD]: false,
-          [StateProperty.CAN_SHOW_BOOKEND]: false,
-          [StateProperty.CAN_SHOW_NAVIGATION_OVERLAY_HINT]: false,
-          [StateProperty.CAN_SHOW_PREVIOUS_PAGE_HELP]: true,
-          [StateProperty.CAN_SHOW_SYSTEM_LAYER_BUTTONS]: false,
-          [StateProperty.MUTED_STATE]: false,
-        };
-      case EmbedMode.NO_SHARING:
-        return {
-          [StateProperty.CAN_SHOW_SHARING_UIS]: false,
-        };
-      default:
-        return {};
-    }
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-system-layer.css b/extensions/amp-story/0.1/amp-story-system-layer.css
deleted file mode 100644
index c0f08725afd68..0000000000000
--- a/extensions/amp-story/0.1/amp-story-system-layer.css
+++ /dev/null
@@ -1,185 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-.i-amphtml-story-system-layer {
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent) !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  height: 56px !important; /* 6px progress bar + 48px icons + 2px margin */
-  z-index: 100000 !important;
-  box-sizing: border-box !important;
-  transition: opacity 0.3s !important;
-  pointer-events: none !important;
-}
-
-.i-amphtml-story-bookend-active.i-amphtml-story-system-layer {
-  opacity: 0.3 !important;
-}
-
-.i-amphtml-story-system-layer-buttons {
-  margin-top: 8px; /* 6px progress bar + 2px margin */
-  float: right !important;
-  pointer-events: auto !important;
-}
-
-.i-amphtml-story-button {
-  background-repeat: no-repeat !important;
-  background-position: center center !important;
-  height: 48px !important;
-  width: 48px !important;
-  cursor: pointer !important;
-  border-radius: 50% !important;
-  box-sizing: border-box !important;
-  position: relative !important;
-
-  /* for svg backgrounds: */
-  background: center center no-repeat !important;
-}
-
-.i-amphtml-story-button:active {
-  /* TODO(alanorozco): do we want material ripple effect? */
-  background-color: rgba(0, 0, 0, 0.2) !important;
-}
-
-.i-amphtml-story-system-layer .i-amphtml-story-button {
-  float: left !important;
-}
-
-.i-amphtml-story-progress-bar {
-  border: 0 !important;
-  display: flex !important;
-  height: 2px !important;
-  left: 0 !important;
-  margin: 4px 0 0 !important;
-  padding: 0 2px !important;
-  position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
-  visibility: visible !important;
-  z-index: 100001 !important;
-}
-
-.i-amphtml-story-page-progress-bar {
-  background: rgba(255, 255, 255, 0.4) !important;
-  border-radius: 1px !important;
-  height: 100% !important;
-  list-style-type: none !important;
-  margin: 0 2px!important;
-  overflow: hidden!important;
-  width: 100% !important;
-
-  /* An empty mask image works around Safari not clipping rounded corners.
-   * https://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera/10296258#10296258 */
-  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC) !important;
-}
-
-.i-amphtml-story-page-progress-value {
-  /* Do not remove `translateZ(0)` or `will-change` as they prevent an iOS
-   * repaint issue. */
-  background: rgba(255, 255, 255, 1) !important;
-  height: 100% !important;
-  width: 100% !important;
-  transform: translateZ(0) scaleX(0) !important; /* 0-width by default */
-  transform-origin: left !important;
-  will-change: transform, transition !important;
-}
-
-[dir=rtl] .i-amphtml-story-progress-value {
-  transform-origin: right !important;
-}
-
-.i-amphtml-story-mute-audio-control,
-.i-amphtml-story-unmute-audio-control {
-  display: none !important;
-}
-
-.audio-playing:not([muted]) .i-amphtml-story-mute-audio-control,
-.audio-playing[muted] .i-amphtml-story-unmute-audio-control {
-  display: block !important;
-}
-
-.i-amphtml-story-ui-no-buttons .i-amphtml-story-button,
-.i-amphtml-story-ui-no-buttons .i-amphtml-story-system-layer-buttons {
-  display: none !important;
-}
-
-.i-amphtml-story-unmute-audio-control {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
-}
-
-.i-amphtml-story-mute-audio-control {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
-}
-
-.i-amphtml-story-share-control {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>') !important;
-}
-
-[ios] .i-amphtml-story-share-control {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z"/></svg>') !important;
-  /** Visual hack to make the icon looks aligned. */
-  background-position-y: calc(50% - 2px) !important;
-}
-
-.i-amphtml-story-info-control {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 48 48" fill="#FFFFFF"><path d="M0 0h48v48H0z" fill="none"/><path d="M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z"/></svg>') !important;
-  display: none !important;
-}
-
-.i-amphtml-embedded.first-page-active .i-amphtml-story-info-control {
-  display: block !important;
-}
-
-.i-amphtml-story-no-sharing .i-amphtml-story-share-control,
-.i-amphtml-story-no-sharing .i-amphtml-story-info-control {
-  display: none !important;
-}
-
-[desktop].i-amphtml-story-system-layer {
-  background: linear-gradient(to bottom, rgba(33,33,33,0) 0%, rgba(33,33,33,0.32) 100%)!important;
-  top: auto!important;
-  bottom: 0!important;
-  height: 96px!important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  flex-direction: row-reverse !important;
-}
-
-[desktop] .i-amphtml-story-progress-bar {
-  position: relative !important;
-  margin: 0px 24px !important;
-  height: 3px !important;
-  width: calc(100vw / 3) !important;
-}
-
-[desktop] .i-amphtml-story-page-progress-bar {
-  border-radius: 100px !important;
-}
-
-[desktop].i-amphtml-story-system-layer .i-amphtml-story-system-layer-buttons {
-  display: flex !important;
-  margin-top: 0px !important;
-  height: 40px !important;
-  align-items: center !important;
-  justify-content: flex-end !important;
-}
-
-[desktop] .i-amphtml-story-share-control {
-  display: none !important;
-}
diff --git a/extensions/amp-story/0.1/amp-story-system-layer.js b/extensions/amp-story/0.1/amp-story-system-layer.js
deleted file mode 100644
index 33e86a0d5b26c..0000000000000
--- a/extensions/amp-story/0.1/amp-story-system-layer.js
+++ /dev/null
@@ -1,479 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {Action, StateProperty} from './amp-story-store-service';
-import {CSS} from '../../../build/amp-story-system-layer-0.1.css';
-import {
-  DevelopmentModeLog,
-  DevelopmentModeLogButtonSet,
-} from './development-ui';
-import {ProgressBar} from './progress-bar';
-import {Services} from '../../../src/services';
-import {createShadowRootWithStyle} from './utils';
-import {dev} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {getMode} from '../../../src/mode';
-import {matches} from '../../../src/dom';
-import {renderAsElement} from './simple-template';
-
-/** @private @const {string} */
-const AUDIO_MUTED_ATTRIBUTE = 'muted';
-
-/** @private @const {string} */
-const MUTE_CLASS = 'i-amphtml-story-mute-audio-control';
-
-/** @private @const {string} */
-const UNMUTE_CLASS = 'i-amphtml-story-unmute-audio-control';
-
-/** @private @const {string} */
-const SHARE_CLASS = 'i-amphtml-story-share-control';
-
-/** @private @const {string} */
-const INFO_CLASS = 'i-amphtml-story-info-control';
-
-/** @private @const {!./simple-template.ElementDef} */
-const TEMPLATE = {
-  tag: 'aside',
-  attrs: dict({
-    'class': 'i-amphtml-story-system-layer i-amphtml-story-system-reset',
-  }),
-  children: [
-    {
-      tag: 'div',
-      attrs: dict({'class': 'i-amphtml-story-system-layer-buttons'}),
-      children: [
-        {
-          tag: 'div',
-          attrs: dict({
-            'role': 'button',
-            'class': INFO_CLASS + ' i-amphtml-story-button',
-          }),
-        },
-        {
-          tag: 'div',
-          attrs: dict({
-            'role': 'button',
-            'class': UNMUTE_CLASS + ' i-amphtml-story-button',
-          }),
-        },
-        {
-          tag: 'div',
-          attrs: dict({
-            'role': 'button',
-            'class': MUTE_CLASS + ' i-amphtml-story-button',
-          }),
-        },
-        {
-          tag: 'div',
-          attrs: dict({
-            'role': 'button',
-            'class': SHARE_CLASS + ' i-amphtml-story-button',
-          }),
-        },
-      ],
-    },
-  ],
-};
-
-/**
- * System Layer (i.e. UI Chrome) for <amp-story>.
- * Chrome contains:
- *   - mute/unmute button
- *   - story progress bar
- *   - bookend close butotn
- */
-export class SystemLayer {
-  /**
-   * @param {!Window} win
-   */
-  constructor(win) {
-    /** @private {!Window} */
-    this.win_ = win;
-
-    /** @private {boolean} */
-    this.isBuilt_ = false;
-
-    /**
-     * Root element containing a shadow DOM root.
-     * @private {?Element}
-     */
-    this.root_ = null;
-
-    /**
-     * Actual system layer.
-     * @private {?Element}
-     */
-    this.systemLayerEl_ = null;
-
-    /** @private {?Element} */
-    this.buttonsContainer_ = null;
-
-    /** @private @const {!ProgressBar} */
-    this.progressBar_ = ProgressBar.create(win);
-
-    /** @private {!DevelopmentModeLog} */
-    this.developerLog_ = DevelopmentModeLog.create(win);
-
-    /** @private {!DevelopmentModeLogButtonSet} */
-    this.developerButtons_ = DevelopmentModeLogButtonSet.create(win);
-
-    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
-    this.storeService_ = Services.storyStoreServiceV01(this.win_);
-
-    /** @const @private {!../../../src/service/vsync-impl.Vsync} */
-    this.vsync_ = Services.vsyncFor(this.win_);
-  }
-
-  /**
-   * @param {!Array<string>} pageIds the ids of each page in the story
-   * @return {!Element}
-   */
-  build(pageIds) {
-    if (this.isBuilt_) {
-      return this.getRoot();
-    }
-
-    this.isBuilt_ = true;
-
-    this.root_ = this.win_.document.createElement('div');
-    this.systemLayerEl_ = renderAsElement(this.win_.document, TEMPLATE);
-
-    createShadowRootWithStyle(this.root_, this.systemLayerEl_, CSS);
-
-    this.systemLayerEl_.insertBefore(
-      this.progressBar_.build(pageIds),
-      this.systemLayerEl_.lastChild
-    );
-
-    this.buttonsContainer_ = this.systemLayerEl_.querySelector(
-      '.i-amphtml-story-system-layer-buttons'
-    );
-
-    this.buildForDevelopmentMode_();
-
-    this.initializeListeners_();
-
-    // TODO(newmuis): Observe this value.
-    if (!this.storeService_.get(StateProperty.CAN_SHOW_SYSTEM_LAYER_BUTTONS)) {
-      this.systemLayerEl_.classList.add('i-amphtml-story-ui-no-buttons');
-    }
-
-    if (Services.platformFor(this.win_).isIos()) {
-      this.systemLayerEl_.setAttribute('ios', '');
-    }
-
-    if (
-      Services.viewerForDoc(this.win_.document.documentElement).isEmbedded()
-    ) {
-      this.systemLayerEl_.classList.add('i-amphtml-embedded');
-    }
-
-    return this.getRoot();
-  }
-
-  /**
-   * @private
-   */
-  buildForDevelopmentMode_() {
-    if (!getMode().development) {
-      return;
-    }
-
-    this.buttonsContainer_.appendChild(
-      this.developerButtons_.build(
-        this.developerLog_.toggle.bind(this.developerLog_)
-      )
-    );
-    this.getShadowRoot().appendChild(this.developerLog_.build());
-  }
-
-  /**
-   * @private
-   */
-  initializeListeners_() {
-    // TODO(alanorozco): Listen to tap event properly (i.e. fastclick)
-    this.getShadowRoot().addEventListener('click', (event) => {
-      const target = dev().assertElement(event.target);
-
-      if (matches(target, `.${MUTE_CLASS}, .${MUTE_CLASS} *`)) {
-        this.onMuteAudioClick_();
-      } else if (matches(target, `.${UNMUTE_CLASS}, .${UNMUTE_CLASS} *`)) {
-        this.onUnmuteAudioClick_();
-      } else if (matches(target, `.${SHARE_CLASS}, .${SHARE_CLASS} *`)) {
-        this.onShareClick_();
-      } else if (matches(target, `.${INFO_CLASS}, .${INFO_CLASS} *`)) {
-        this.onInfoClick_();
-      }
-    });
-
-    this.storeService_.subscribe(StateProperty.BOOKEND_STATE, (isActive) => {
-      this.onBookendStateUpdate_(isActive);
-    });
-
-    this.storeService_.subscribe(
-      StateProperty.CAN_SHOW_SHARING_UIS,
-      (show) => {
-        this.onCanShowSharingUisUpdate_(show);
-      },
-      true /** callToInitialize */
-    );
-
-    this.storeService_.subscribe(
-      StateProperty.DESKTOP_STATE,
-      (isDesktop) => {
-        this.onDesktopStateUpdate_(isDesktop);
-      },
-      true /** callToInitialize */
-    );
-
-    this.storeService_.subscribe(
-      StateProperty.HAS_AUDIO_STATE,
-      (hasAudio) => {
-        this.onHasAudioStateUpdate_(hasAudio);
-      },
-      true /** callToInitialize */
-    );
-
-    this.storeService_.subscribe(
-      StateProperty.MUTED_STATE,
-      (isMuted) => {
-        this.onMutedStateUpdate_(isMuted);
-      },
-      true /** callToInitialize */
-    );
-
-    this.storeService_.subscribe(
-      StateProperty.CURRENT_PAGE_INDEX,
-      (index) => {
-        this.onPageIndexUpdate_(index);
-      },
-      true /** callToInitialize */
-    );
-  }
-
-  /**
-   * @return {!Element}
-   */
-  getRoot() {
-    return dev().assertElement(this.root_);
-  }
-
-  /**
-   * @return {!Element}
-   */
-  getShadowRoot() {
-    return dev().assertElement(this.systemLayerEl_);
-  }
-
-  /**
-   * Reacts to the bookend state updates and updates the UI accordingly.
-   * @param {boolean} isActive
-   * @private
-   */
-  onBookendStateUpdate_(isActive) {
-    this.getShadowRoot().classList.toggle(
-      'i-amphtml-story-bookend-active',
-      isActive
-    );
-  }
-
-  /**
-   * Reacts to updates to whether sharing UIs may be shown, and updates the UI
-   * accordingly.
-   * @param {boolean} canShowSharingUis
-   * @private
-   */
-  onCanShowSharingUisUpdate_(canShowSharingUis) {
-    this.vsync_.mutate(() => {
-      this.getShadowRoot().classList.toggle(
-        'i-amphtml-story-no-sharing',
-        !canShowSharingUis
-      );
-    });
-  }
-
-  /**
-   * Reacts to desktop state updates and triggers the desktop UI.
-   * @param {boolean} isDesktop
-   * @private
-   */
-  onDesktopStateUpdate_(isDesktop) {
-    this.vsync_.mutate(() => {
-      isDesktop
-        ? this.getShadowRoot().setAttribute('desktop', '')
-        : this.getShadowRoot().removeAttribute('desktop');
-    });
-  }
-
-  /**
-   * Reacts to has audio state updates, displays the audio controls if needed.
-   * @param {boolean} hasAudio
-   * @private
-   */
-  onHasAudioStateUpdate_(hasAudio) {
-    this.vsync_.mutate(() => {
-      this.getShadowRoot().classList.toggle('audio-playing', hasAudio);
-    });
-  }
-
-  /**
-   * Reacts to muted state updates.
-   * @param {boolean} isMuted
-   * @private
-   */
-  onMutedStateUpdate_(isMuted) {
-    this.vsync_.mutate(() => {
-      isMuted
-        ? this.getShadowRoot().setAttribute(AUDIO_MUTED_ATTRIBUTE, '')
-        : this.getShadowRoot().removeAttribute(AUDIO_MUTED_ATTRIBUTE);
-    });
-  }
-
-  /**
-   * Reacts to the active page index changing.
-   * @param {number} index
-   */
-  onPageIndexUpdate_(index) {
-    this.vsync_.mutate(() => {
-      this.getShadowRoot().classList.toggle('first-page-active', index === 0);
-    });
-  }
-
-  /**
-   * Handles click events on the mute button.
-   * @private
-   */
-  onMuteAudioClick_() {
-    this.storeService_.dispatch(Action.TOGGLE_MUTED, true);
-  }
-
-  /**
-   * Handles click events on the unmute button.
-   * @private
-   */
-  onUnmuteAudioClick_() {
-    this.storeService_.dispatch(Action.TOGGLE_MUTED, false);
-  }
-
-  /**
-   * Handles click events on the share button and toggles the share menu.
-   * @private
-   */
-  onShareClick_() {
-    const isOpen = this.storeService_.get(StateProperty.SHARE_MENU_STATE);
-    this.storeService_.dispatch(Action.TOGGLE_SHARE_MENU, !isOpen);
-  }
-
-  /**
-   * Handles click events on the info button and toggles the info dialog.
-   * @private
-   */
-  onInfoClick_() {
-    const isOpen = this.storeService_.get(StateProperty.INFO_DIALOG_STATE);
-    this.storeService_.dispatch(Action.TOGGLE_INFO_DIALOG, !isOpen);
-  }
-
-  /**
-   * @param {string} pageId The page id of the new active page.
-   * @public
-   */
-  setActivePageId(pageId) {
-    // TODO(newmuis) avoid passing progress logic through system-layer
-    this.progressBar_.setActiveSegmentId(pageId);
-  }
-
-  /**
-   * @param {string} pageId The id of the page whose progress should be
-   *     changed.
-   * @param {number} progress A number from 0.0 to 1.0, representing the
-   *     progress of the current page.
-   * @public
-   */
-  updateProgress(pageId, progress) {
-    // TODO(newmuis) avoid passing progress logic through system-layer
-    this.progressBar_.updateProgress(pageId, progress);
-  }
-
-  /**
-   * @param {!./logging.AmpStoryLogEntryDef} logEntry
-   * @private
-   */
-  logInternal_(logEntry) {
-    this.developerButtons_.log(logEntry);
-    this.developerLog_.log(logEntry);
-  }
-
-  /**
-   * Logs an array of entries to the developer logs.
-   * @param {!Array<!./logging.AmpStoryLogEntryDef>} logEntries
-   */
-  logAll(logEntries) {
-    if (!getMode().development) {
-      return;
-    }
-
-    this.vsync_.mutate(() => {
-      logEntries.forEach((logEntry) => this.logInternal_(logEntry));
-    });
-  }
-
-  /**
-   * Logs a single entry to the developer logs.
-   * @param {!./logging.AmpStoryLogEntryDef} logEntry
-   */
-  log(logEntry) {
-    if (!getMode().development) {
-      return;
-    }
-
-    this.logInternal_(logEntry);
-  }
-
-  /**
-   * Clears any state held by the developer log or buttons.
-   */
-  resetDeveloperLogs() {
-    if (!getMode().development) {
-      return;
-    }
-
-    this.developerButtons_.clear();
-    this.developerLog_.clear();
-  }
-
-  /**
-   * Sets the string providing context for the developer logs window.  This is
-   * often the name or ID of the element that all logs are for (e.g. the page).
-   * @param {string} contextString
-   */
-  setDeveloperLogContextString(contextString) {
-    if (!getMode().development) {
-      return;
-    }
-
-    this.developerLog_.setContextString(contextString);
-  }
-
-  /**
-   * Hides the developer log in the UI.
-   */
-  hideDeveloperLog() {
-    if (!getMode().development) {
-      return;
-    }
-
-    this.developerLog_.hide();
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-unsupported-browser-layer.css b/extensions/amp-story/0.1/amp-story-unsupported-browser-layer.css
deleted file mode 100644
index 1e6ffefe88086..0000000000000
--- a/extensions/amp-story/0.1/amp-story-unsupported-browser-layer.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-.i-amphtml-story-unsupported-browser-overlay {
-  position: absolute !important;
-  z-index: 200001 !important; /** no-rotation-overlay + 1 */
-  font-family: 'Roboto', sans-serif;
-  font-weight: 700 !important;
-  line-height: 1.5;
-  padding: 32px;
-  background-color: #000 !important;
-  color: #fff!important;
-  top:0 !important;
-  left:0 !important;
-  right:0 !important;
-  bottom:0 !important;
-  align-items: center !important;
-  justify-content: center !important;
-  text-align: center !important;
-  display: none !important;
-}
-
-.i-amphtml-story-unsupported-browser-overlay {
-  display: flex !important;
-}
-
-.i-amphtml-gear-icon {
-  background-repeat: no-repeat!important;
-  background-position: center center!important;
-  border-radius: 50%!important;
-  background-color: #fff!important;
-  padding: 16px!important;
-  height: 24px!important;
-  width: 24px!important;
-  margin: 16px auto!important;
-}
-
-.i-amphtml-gear-icon {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 20 20" fill="#000000"><path fill="none" d="M0 0h20v20H0V0z"/><path d="M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0 .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z"/></svg>')!important;
-}
diff --git a/extensions/amp-story/0.1/amp-story-unsupported-browser-layer.js b/extensions/amp-story/0.1/amp-story-unsupported-browser-layer.js
deleted file mode 100644
index fe7c4ef468d7b..0000000000000
--- a/extensions/amp-story/0.1/amp-story-unsupported-browser-layer.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {CSS} from '../../../build/amp-story-unsupported-browser-layer-0.1.css';
-import {LocalizedStringId} from '../../../src/localized-strings';
-import {createShadowRootWithStyle} from './utils';
-import {dict} from './../../../src/utils/object';
-import {renderAsElement} from './simple-template';
-
-/**
- * Full viewport black layer indicating browser is not supported.
- * @private @const {!./simple-template.ElementDef}
- */
-const UNSUPPORTED_BROWSER_LAYER_TEMPLATE = {
-  tag: 'div',
-  attrs: dict({'class': 'i-amphtml-story-unsupported-browser-overlay'}),
-  children: [
-    {
-      tag: 'div',
-      attrs: dict({'class': 'i-amphtml-overlay-container'}),
-      children: [
-        {
-          tag: 'div',
-          attrs: dict({'class': 'i-amphtml-gear-icon'}),
-        },
-        {
-          tag: 'div',
-          attrs: dict({'class': 'i-amphtml-story-overlay-text'}),
-          localizedStringId:
-            LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT,
-        },
-      ],
-    },
-  ],
-};
-
-/**
- * Unsupported browser layer UI.
- */
-export class UnsupportedBrowserLayer {
-  /**
-   * @param {!Window} win
-   */
-  constructor(win) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private {?Element} */
-    this.root_ = null;
-  }
-
-  /**
-   * Builds and appends the component in the story.
-   * @return {?Element}
-   */
-  build() {
-    if (this.root_) {
-      return this.root_;
-    }
-
-    this.root_ = this.win_.document.createElement('div');
-    const overlayEl = renderAsElement(
-      this.win_.document,
-      UNSUPPORTED_BROWSER_LAYER_TEMPLATE
-    );
-
-    createShadowRootWithStyle(this.root_, overlayEl, CSS);
-
-    return this.root_;
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story-user-overridable.css b/extensions/amp-story/0.1/amp-story-user-overridable.css
deleted file mode 100644
index f67023a1a88b5..0000000000000
--- a/extensions/amp-story/0.1/amp-story-user-overridable.css
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-amp-story {
-  font-display: optional;
-}
-
-.i-amphtml-story-grid-template-vertical {
-  align-content: start;
-  grid-gap: 16px;
-  justify-content: stretch;
-  justify-items: start;
-  padding: 32px;
-}
-
-.i-amphtml-story-grid-template-vertical > * {
-  width: 100%;
-}
-
-.i-amphtml-story-grid-template-horizontal {
-  align-content: stretch;
-  align-items: start;
-  grid-gap: 16px;
-  justify-content: start;
-  padding: 32px;
-}
-
-.i-amphtml-story-grid-template-thirds {
-  padding: 32px;
-}
-
-amp-story-grid-layer {
-  padding: 68px 32px 32px; /* 44 + 24 */
-}
-
diff --git a/extensions/amp-story/0.1/amp-story-viewport-warning-layer.css b/extensions/amp-story/0.1/amp-story-viewport-warning-layer.css
deleted file mode 100644
index 0e995967887d2..0000000000000
--- a/extensions/amp-story/0.1/amp-story-viewport-warning-layer.css
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-.i-amphtml-story-no-rotation-overlay {
-  position: absolute !important;
-  z-index: 200000!important; /** unsupported-browser-overlay - 1 */
-  font-family: 'Roboto', sans-serif;
-  font-weight: 700 !important;
-  line-height: 1.5;
-  padding: 32px;
-  background-color: #000 !important;
-  color: #fff!important;
-  top:0 !important;
-  left:0 !important;
-  right:0 !important;
-  bottom:0 !important;
-  align-items: center !important;
-  justify-content: center !important;
-  text-align: center !important;
-  display: none !important;
-}
-
-.i-amphtml-story-landscape.i-amphtml-story-no-rotation-overlay {
-  display: flex !important;
-}
-
-.i-amphtml-rotate-icon,
-.i-amphtml-desktop-size-icon {
-  background-repeat: no-repeat!important;
-  background-position: center center!important;
-  border-radius: 50%!important;
-  background-color: #fff!important;
-  padding: 16px!important;
-  height: 24px!important;
-  width: 24px!important;
-  margin: 16px auto!important;
-}
-
-.i-amphtml-rotate-icon {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.48 2.52c3.27 1.55 5.61 4.72 5.97 8.48h1.5C23.44 4.84 18.29 0 12 0l-.66.03 3.81 3.81 1.33-1.32zm-6.25-.77c-.59-.59-1.54-.59-2.12 0L1.75 8.11c-.59.59-.59 1.54 0 2.12l12.02 12.02c.59.59 1.54.59 2.12 0l6.36-6.36c.59-.59.59-1.54 0-2.12L10.23 1.75zm4.6 19.44L2.81 9.17l6.36-6.36 12.02 12.02-6.36 6.36zm-7.31.29C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32z"/></svg>')!important;
-}
-
-.i-amphtml-desktop-size-icon {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12.01 5.5L10 8h4l-1.99-2.5zM18 10v4l2.5-1.99L18 10zM6 10l-2.5 2.01L6 14v-4zm8 6h-4l2.01 2.5L14 16zm7-13H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"/></svg>')!important;
-}
diff --git a/extensions/amp-story/0.1/amp-story-viewport-warning-layer.js b/extensions/amp-story/0.1/amp-story-viewport-warning-layer.js
deleted file mode 100644
index 6f6861f00928b..0000000000000
--- a/extensions/amp-story/0.1/amp-story-viewport-warning-layer.js
+++ /dev/null
@@ -1,233 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {CSS} from '../../../build/amp-story-viewport-warning-layer-0.1.css';
-import {LocalizedStringId} from '../../../src/localized-strings';
-import {Services} from '../../../src/services';
-import {StateProperty} from './amp-story-store-service';
-import {createShadowRootWithStyle} from './utils';
-import {dict} from './../../../src/utils/object';
-import {renderAsElement} from './simple-template';
-
-/**
- * CSS class indicating the format is landscape.
- * @const {string}
- */
-const LANDSCAPE_OVERLAY_CLASS = 'i-amphtml-story-landscape';
-
-/**
- * Full viewport layer advising the user to rotate his device. Mobile only.
- * @private @const {!./simple-template.ElementDef}
- */
-const LANDSCAPE_ORIENTATION_WARNING_TEMPLATE = {
-  tag: 'div',
-  attrs: dict({
-    'class': 'i-amphtml-story-no-rotation-overlay i-amphtml-story-system-reset',
-  }),
-  children: [
-    {
-      tag: 'div',
-      attrs: dict({'class': 'i-amphtml-overlay-container'}),
-      children: [
-        {
-          tag: 'div',
-          attrs: dict({'class': 'i-amphtml-rotate-icon'}),
-        },
-        {
-          tag: 'div',
-          attrs: dict({'class': 'i-amphtml-story-overlay-text'}),
-          localizedStringId:
-            LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT,
-        },
-      ],
-    },
-  ],
-};
-
-/**
- * Full viewport layer advising the user to expand his window. Only displayed
- * for small desktop viewports.
- * @private @const {!./simple-template.ElementDef}
- */
-const DESKTOP_SIZE_WARNING_TEMPLATE = {
-  tag: 'div',
-  attrs: dict({
-    'class': 'i-amphtml-story-no-rotation-overlay i-amphtml-story-system-reset',
-  }),
-  children: [
-    {
-      tag: 'div',
-      attrs: dict({'class': 'i-amphtml-overlay-container'}),
-      children: [
-        {
-          tag: 'div',
-          attrs: dict({'class': 'i-amphtml-desktop-size-icon'}),
-        },
-        {
-          tag: 'div',
-          attrs: dict({'class': 'i-amphtml-story-overlay-text'}),
-          localizedStringId:
-            LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT,
-        },
-      ],
-    },
-  ],
-};
-
-/**
- * Viewport warning layer UI.
- */
-export class ViewportWarningLayer {
-  /**
-   * @param {!Window} win
-   * @param {!Element} storyElement Element where to append the component
-   */
-  constructor(win, storyElement) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private {boolean} */
-    this.isBuilt_ = false;
-
-    /** @private {?Element} */
-    this.overlayEl_ = null;
-
-    /** @private @const {!../../../src/service/platform-impl.Platform} */
-    this.platform_ = Services.platformFor(this.win_);
-
-    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
-    this.storeService_ = Services.storyStoreServiceV01(this.win_);
-
-    /** @private @const {!Element} */
-    this.storyElement_ = storyElement;
-
-    /** @const @private {!../../../src/service/vsync-impl.Vsync} */
-    this.vsync_ = Services.vsyncFor(this.win_);
-
-    this.initializeListeners_();
-  }
-
-  /**
-   * Builds and appends the component in the story.
-   */
-  build() {
-    if (this.isBuilt()) {
-      return;
-    }
-
-    this.isBuilt_ = true;
-
-    const root = this.win_.document.createElement('div');
-    this.overlayEl_ = renderAsElement(
-      this.win_.document,
-      this.getViewportWarningOverlayTemplate_()
-    );
-
-    createShadowRootWithStyle(root, this.overlayEl_, CSS);
-
-    // Initializes the desktop state now that the component is built.
-    this.onDesktopStateUpdate_(
-      !!this.storeService_.get(StateProperty.DESKTOP_STATE)
-    );
-
-    this.vsync_.mutate(() => {
-      this.storyElement_.insertBefore(root, this.storyElement_.firstChild);
-    });
-  }
-
-  /**
-   * Whether the element has been built.
-   * @return {boolean}
-   */
-  isBuilt() {
-    return this.isBuilt_;
-  }
-
-  /**
-   * @private
-   */
-  initializeListeners_() {
-    this.storeService_.subscribe(
-      StateProperty.DESKTOP_STATE,
-      (isDesktop) => {
-        this.onDesktopStateUpdate_(isDesktop);
-      },
-      true /** callToInitialize */
-    );
-
-    this.storeService_.subscribe(
-      StateProperty.LANDSCAPE_STATE,
-      (isLandscape) => {
-        this.onLandscapeStateUpdate_(isLandscape);
-      },
-      true /** callToInitialize */
-    );
-  }
-
-  /**
-   * Reacts to the landscape state update, only on mobile.
-   * @param  {boolean} isLandscape
-   * @private
-   */
-  onLandscapeStateUpdate_(isLandscape) {
-    const isDesktop = this.storeService_.get(StateProperty.DESKTOP_STATE);
-
-    // Adds the landscape class if we are mobile landscape.
-    const shouldShowLandscapeOverlay = !isDesktop && isLandscape;
-
-    // Don't build the layer until we need to display it.
-    if (!shouldShowLandscapeOverlay && !this.isBuilt()) {
-      return;
-    }
-
-    this.build();
-
-    this.vsync_.mutate(() => {
-      this.overlayEl_.classList.toggle(
-        LANDSCAPE_OVERLAY_CLASS,
-        !isDesktop && isLandscape
-      );
-    });
-  }
-
-  /**
-   * Reacts to desktop state updates.
-   * @param {boolean} isDesktop
-   * @private
-   */
-  onDesktopStateUpdate_(isDesktop) {
-    if (!this.isBuilt()) {
-      return;
-    }
-
-    this.vsync_.mutate(() => {
-      isDesktop
-        ? this.overlayEl_.setAttribute('desktop', '')
-        : this.overlayEl_.removeAttribute('desktop');
-    });
-  }
-
-  /**
-   * Returns the overlay corresponding to the device currently used.
-   * @return {!./simple-template.ElementDef} template
-   * @private
-   */
-  getViewportWarningOverlayTemplate_() {
-    return this.platform_.isIos() || this.platform_.isAndroid()
-      ? LANDSCAPE_ORIENTATION_WARNING_TEMPLATE
-      : DESKTOP_SIZE_WARNING_TEMPLATE;
-  }
-}
diff --git a/extensions/amp-story/0.1/amp-story.css b/extensions/amp-story/0.1/amp-story.css
deleted file mode 100644
index 879ca2402bc0f..0000000000000
--- a/extensions/amp-story/0.1/amp-story.css
+++ /dev/null
@@ -1,655 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-@import './amp-story-desktop.css';
-@import './amp-story-user-overridable.css';
-@import './amp-story-share.css';
-
-/** Common */
-amp-story, amp-story-page, amp-story-grid-layer, amp-story-cta-layer {
-  contain: strict !important;
-  overflow: hidden !important;
-}
-
-amp-story amp-consent {
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  height: 100% !important;
-  width: 100% !important;
-  background: none !important;
-  z-index: initial !important;
-}
-
-.i-amphtml-story-system-reset,
-.i-amphtml-story-system-reset * {
-  border: none !important;
-  box-sizing: initial !important;
-  color: initial !important;
-  font-family: 'Roboto', sans-serif !important;
-  font-size: initial !important;
-  font-weight: initial !important;
-  height: auto !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  text-align: start !important;
-  width: auto !important;
-}
-
-/** Story level */
-amp-story {
-  height: 100% !important;
-  position: relative !important;
-  text-rendering: geometricPrecision !important;
-  user-select: none !important;
-  width: 100% !important;
-}
-
-html.i-amphtml-story-standalone,
-html.i-amphtml-story-standalone body {
-  height: 100% !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  width: 100% !important;
-  /** Remove the cursor: pointer; style set by the runtime, to avoid wrong
-      touch feedback on mobile, like a flashing overlay on page transitions. */
-  cursor: auto !important;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
-}
-
-html.i-amphtml-story-standalone #i-amphtml-wrapper body {
-  /** AMP runtime adds a 1px border on iOS iframes, causing the body to be
-      1px bigger than the viewport. */
-  border-top: none !important;
-  overflow: hidden !important;
-}
-
-amp-story[standalone] {
-  align-self: center !important;
-  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5) !important;
-  height: 100% !important;
-  justify-self: center !important;
-  max-height: initial !important;
-  max-width: initial !important;
-  min-height: initial !important;
-  min-width: initial !important;
-}
-
-amp-story[standalone]:-webkit-full-screen {
-  height: 100vh !important;
-  max-height: none !important;
-  max-width: none !important;
-}
-
-amp-story[standalone]:-moz-full-screen {
-  height: 100vh !important;
-  max-height: none !important;
-  max-width: none !important;
-}
-
-amp-story[standalone]:-ms-fullscreen {
-  height: 100vh !important;
-  max-height: none !important;
-  max-width: none !important;
-}
-
-amp-story[standalone]:fullscreen {
-  height: 100vh !important;
-  max-height: none !important;
-  max-width: none !important;
-}
-
-amp-story .amp-video-eq {
-  height: 14px !important;;
-  width: 14px !important;
-}
-
-amp-story .amp-video-eq .amp-video-eq-col {
-  margin-right: 2px !important;
-}
-
-amp-story .amp-video-eq .amp-video-eq-col:last-child {
-  margin-right: 0 !important;
-}
-
-amp-story .amp-video-eq:not(.amp-video-eq-play) {
-  display: none !important;
-}
-
-/** Page level */
-amp-story-page {
-  bottom: 0 !important;
-  height: auto !important;
-  left: 0 !important;
-  position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
-  opacity: 1 !important;
-  transition: none !important;
-  z-index: 0 !important;
-}
-
-amp-story-page[active] {
-  z-index: 1 !important;
-}
-
-.i-amphtml-story-fallback amp-story-page {
-  display: none !important;
-}
-
-/* Setting `translateY` distances as a trick so that the runtime schedules
- * layout for the next N pages. The default value (1000%) means that pages are
- * not be automatically laid out. Max distance is set to 3 since we don't want
- * to schedule any further pages. */
-
-amp-story:not([desktop]) >
-    amp-story-page.i-amphtml-layout-container:not([active]) {
-  transform: translateY(1000%) !important;
-}
-
-amp-story-page[active],
-amp-story:not([desktop]) >
-    amp-story-page.i-amphtml-layout-container[distance="0"],
-amp-story:not([desktop]) >
-    amp-story-page.i-amphtml-layout-container[distance="1"] {
-  transform: translateY(0) !important;
-}
-
-amp-story:not([desktop]) >
-    amp-story-page.i-amphtml-layout-container[distance="2"] {
-  transform: translateY(100%) !important;
-}
-
-.i-amphtml-story-bookend-active:not([desktop]) >
-    amp-story-page.i-amphtml-layout-container[active] {
-  transform: translateY(0) scale(1.2) !important;
-  filter: blur(15px) !important;
-}
-
-.i-amphtml-story-bookend-active > amp-story-page[active]::after {
-  content: '' !important;
-  display: block !important;
-  left: 0 !important;
-  top: 0 !important;
-  bottom: 0 !important;
-  right: 0 !important;
-  position: absolute !important;
-  background: rgba(117, 117, 117, 0.3) !important;
-  z-index: 2 !important;
-}
-
-/**
- * Click shield to make sure click events are never swallowed by videos on
- * Safari iOS 11.2, which would prevent the user from navigating through the
- * story.
- * See #14401
- */
-amp-story amp-video::after {
-  content: "" !important;
-  position: absolute !important;
-  height: 100% !important;
-  width: 100% !important;
-  top: 0 !important;
-  left: 0 !important;
-}
-
-/** Call to action layer, positioned at the bottom 20% of the screen. */
-amp-story-cta-layer {
-  display: block !important;
-  position: absolute !important;
-  top: 80% !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  margin: 0 !important;
-  z-index: 3 !important;
-}
-
-/** Grid level */
-amp-story-grid-layer {
-  display: grid !important;
-  position: absolute !important;
-  top: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  z-index: 2 !important;
-}
-
-amp-story-grid-layer * {
-  box-sizing: border-box !important;
-  margin: 0 !important;
-}
-
-.i-amphtml-story-grid-template-with-full-bleed-animation {
-  position: absolute !important;
-  display: block !important;
-  padding: 0 !important;
-}
-
-.i-amphtml-story-grid-template-fill > :not(:first-child) {
-  display: none !important;
-}
-
-.i-amphtml-story-logo {
-  display: none !important;
-  margin: 15px !important;
-}
-
-.i-amphtml-story-grid-template-fill > :first-child {
-  bottom: 0 !important;
-  display: block !important;
-  height: auto !important;
-  left: 0 !important;
-  position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
-  width: auto !important;
-}
-
-.i-amphtml-story-grid-template-fill > amp-anim img,
-.i-amphtml-story-grid-template-fill > amp-img img,
-.i-amphtml-story-grid-template-fill > amp-video video {
-  object-fit: cover !important;
-}
-
-.i-amphtml-story-grid-template-vertical {
-  grid-auto-flow: row !important;
-  grid-template-columns: 100% !important;
-}
-
-.i-amphtml-story-grid-template-horizontal {
-  grid-auto-flow: column !important;
-  grid-template-rows: 100% !important;
-}
-
-.i-amphtml-story-grid-template-thirds {
-  grid-template-rows: 33% 33% 33% !important; /* `fr` is broken in Safari. */
-  grid-template-areas: "upper-third"
-                       "middle-third"
-                       "lower-third" !important;
-}
-
-/**
- * Development mode
- */
-
-.i-amphtml-story-dev-logs-button[data-count="0"],
-.i-amphtml-story-bookend-active .i-amphtml-story-dev-logs-button {
-  display: none !important;
-}
-
-.i-amphtml-story-dev-logs-button {
-  background-position: center center !important;
-  background-repeat: no-repeat !important;
-}
-
-.i-amphtml-story-dev-logs-button::after {
-  background-color: #fff !important;
-  border-radius: 6px !important;
-  box-sizing: border-box !important;
-  color: #444;
-  content: attr(data-count) !important;
-  display: inline-block !important;
-  font-family: Roboto !important;
-  font-size: 11px !important;
-  height: 12px !important;
-  line-height: 12px !important;
-  padding: 0 6px !important;
-  position: absolute !important;
-  right: 0 !important;
-  top: 6px !important;
-}
-
-.i-amphtml-story-error-button {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#DB4437"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
-}
-
-.i-amphtml-story-warning-button {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFC107"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>') !important;
-}
-
-.i-amphtml-story-success-button {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#0F9D58"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>') !important;
-}
-
-amp-story[standalone] .i-amphtml-story-developer-log {
-  background: rgba(0, 0, 0, 0.85) !important;
-  bottom: 0 !important;
-  box-sizing: border-box !important;
-  color: #fff !important;
-  display: flex !important;
-  flex-direction: column !important;
-  font-family: 'Roboto' !important;
-  left: 0 !important;
-  max-height: 45% !important;
-  padding: 0 !important;
-  position: fixed !important;
-  right: 0 !important;
-  text-align: left !important;
-  z-index: 100002 !important;
-}
-
-.i-amphtml-story-developer-log-header {
-  align-items: center !important;
-  background: rgb(3,169,244, 0.85) !important;
-  display: flex !important;
-  flex-grow: 0 !important;
-  flex-shrink: 0 !important;
-  font-weight: bold !important;
-  justify-content: space-between !important;
-  padding: 12px 20px !important;
-  text-align: center !important;
-}
-
-.i-amphtml-story-developer-log-close {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
-  flex-grow: 0 !important;
-  flex-shrink: 0 !important;
-}
-
-.i-amphtml-story-developer-log-context {
-  color: #000 !important;
-  font-family: 'Roboto Mono' !important;
-}
-
-.i-amphtml-story-developer-log-entries {
-  list-style-type: none !important;
-  margin: 0 !important;
-  overflow-x: hidden !important;
-  overflow-y: auto !important;
-  padding: 0 !important;
-}
-
-.i-amphtml-story-developer-log-entry {
-  align-items: center !important;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
-  display: flex !important;
-  padding: 20px !important;
-}
-
-.i-amphtml-story-developer-log-entry::before {
-  background-position: center center !important;
-  background-repeat: no-repeat !important;
-  background-size: cover !important;
-  content: '';
-  display: inline-block !important;
-  flex-grow: 0 !important;
-  flex-shrink: 0 !important;
-  height: 32px !important;
-  margin-right: 20px !important;
-  width: 32px !important;
-}
-
-.i-amphtml-story-developer-log-entry-error::before {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#DB4437"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
-}
-
-.i-amphtml-story-developer-log-entry-warning::before {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFC107"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>') !important;
-}
-
-.i-amphtml-story-developer-log-entry-success::before {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#0F9D58"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>') !important;
-}
-
-/** Experiment disabled  */
-.i-amphtml-story-experiment-error {
-  align-items: center !important;
-  align-content: center!important;
-  background-color: #222 !important;
-  bottom: 0 !important;
-  color: #f0f0f0 !important;
-  display: flex !important;
-  flex-direction: column !important;
-  font-family: 'Roboto', sans-serif !important;
-  font-size: 20px !important;
-  justify-content: center !important;
-  left: 0 !important;
-  padding: 32px !important;
-  position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
-  z-index: 999999 !important;
-  text-align: center !important;
-}
-
-.i-amphtml-story-experiment-icon {
-  background-repeat: no-repeat !important;
-  background-size: cover !important;
-  height: 64px !important;
-  margin: 0 auto 16px !important;
-  width: 64px !important;
-}
-
-.i-amphtml-story-experiment-icon-error {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>') !important;
-}
-
-.i-amphtml-story-experiment-icon-done {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path fill="none" d="M0 0h24v24H0z"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>') !important;
-}
-
-.i-amphtml-story-experiment-error button {
-  background-color: transparent !important;
-  border: 1px solid #f0f0f0 !important;
-  border-radius: 8px !important;
-  color: #f0f0f0 !important;
-  cursor: pointer !important;
-  font-size: 20px !important;
-  font-family: 'Roboto', sans-serif !important;
-  margin: 16px 0 0 !important;
-  outline: none !important;
-  padding: 8px 32px !important;
-  text-transform: uppercase !important;
-  width: 50% !important;
-}
-
-.i-amphtml-story-experiment-error button:active,
-.i-amphtml-story-experiment-error button:focus {
-  background-color: #f0f0f0 !important;
-  color: #222 !important;
-}
-
-.i-amphtml-story-toast {
-  position: absolute !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  display: inline-block !important;
-  padding: 1.16em 1.33em !important;
-  line-height: 1.33 !important;
-  color: #fff !important;
-  background: #212121 !important;
-  animation: toast 2.2s !important;
-  animation-fill-mode: both !important;
-  font-family: 'Roboto', sans-serif !important;
-  font-weight: 400 !important;
-  font-size: 12px !important;
-  max-width: 640px !important;
-  z-index: 100002 !important; /** Bookend + 1 */
-}
-
-@media (min-width: 640px) {
-  .i-amphtml-story-toast {
-    right: auto !important;
-    font-size: 14px !important;
-    margin: 0 auto 1.16em 1.16em !important;
-    border-radius: 6px;
-  }
-}
-
-@keyframes toast {
-  0% {
-    transform: translateY(100px);
-    easing: cubic-bezier(0.0, 0.0, 0.2, 1);
-  }
-  8% {
-    transform: translateY(0);
-  }
-  92% {
-    transform: translateY(0);
-    easing: cubic-bezier(0.4, 0.0, 1, 1);
-  }
-  100% {
-    transform: translateY(100px);
-  }
-}
-
-.i-amphtml-story-copy-successful {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>') !important;
-  background-repeat: no-repeat !important;
-  background-size: 16px 16px !important;
-  padding-left: 24px !important;
-  color: #fff !important;
-  display: flex !important;
-}
-
-.i-amphtml-story-copy-url {
-  flex: 1 !important;
-  color: rgba(255, 255, 255, 0.5) !important;
-  margin-left: 40px !important;
-  text-overflow: ellipsis !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-}
-
-.i-amphtml-story-button-container {
-  display: none !important;
-}
-
-/* Default loading spinner */
-
-.i-amphtml-story-spinner {
-  display: inline-block !important;
-  position: absolute !important;
-  top: calc(100% - 36px) !important;
-  right: 12px !important;
-  width: 24px !important;
-  height: 24px !important;
-  z-index: 10 !important;
-}
-
-.i-amphtml-story-spinner-container {
-  width: 100% !important;
-  height: 100% !important;
-  direction: ltr !important;
-}
-
-.i-amphtml-story-spinner[active] .i-amphtml-story-spinner-container {
-  animation: container-rotate 1294ms linear infinite !important;
-}
-
-@keyframes container-rotate {
-  to { transform: rotate(360deg) }
-}
-
-.i-amphtml-story-spinner-layer {
-  position: absolute !important;
-  width: 100% !important;
-  height: 100% !important;
-  opacity: 0 !important;
-  white-space: nowrap !important;
-  color: white !important;
-}
-
-.i-amphtml-story-spinner[active] .i-amphtml-story-spinner-layer {
-  animation-name: fill-unfill-rotate !important;
-  animation-duration: 4400ms !important;
-  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !important;
-  animation-iteration-count: infinite !important;
-  opacity: 1 !important;
-}
-
-@keyframes fill-unfill-rotate {
-  12.5% { transform: rotate(135deg) }
-  25%   { transform: rotate(270deg) }
-  37.5% { transform: rotate(405deg) }
-  50%   { transform: rotate(540deg) }
-  62.5% { transform: rotate(675deg) }
-  75%   { transform: rotate(810deg) }
-  87.5% { transform: rotate(945deg) }
-  to    { transform: rotate(1080deg) }
-}
-
-.i-amphtml-story-spinner-circle-clipper {
-  display: inline-block !important;
-  position: relative !important;
-  width: 50% !important;
-  height: 100% !important;
-  overflow: hidden !important;
-}
-
-.i-amphtml-story-spinner-layer::after {
-  left: 45% !important;
-  width: 10% !important;
-  border-top-style: solid !important;
-}
-
-.i-amphtml-story-spinner-layer::after,
-.i-amphtml-story-spinner-circle-clipper::after {
-  content: '' !important;
-  box-sizing: border-box !important;
-  position: absolute !important;
-  top: 0 !important;
-  border-width: 3px !important;
-  border-radius: 50% !important;
-}
-
-.i-amphtml-story-spinner-circle-clipper::after {
-  bottom: 0 !important;
-  width: 200% !important;
-  border-style: solid !important;
-  border-bottom-color: transparent !important;
-}
-
-.i-amphtml-story-spinner-circle-clipper.left::after {
-  left: 0 !important;
-  border-right-color: transparent !important;
-  transform: rotate(129deg) !important;
-}
-
-.i-amphtml-story-spinner-circle-clipper.right::after {
-  left: -100% !important;
-  border-left-color: transparent !important;
-  transform: rotate(-129deg) !important;
-}
-
-.i-amphtml-story-spinner[active] .i-amphtml-story-spinner-circle-clipper::after {
-  animation-duration: 1100ms !important;
-  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !important;
-  animation-iteration-count: infinite !important;
-}
-
-.i-amphtml-story-spinner[active] .i-amphtml-story-spinner-circle-clipper.left::after {
-  animation-name: left-spin !important;
-}
-
-.i-amphtml-story-spinner[active] .i-amphtml-story-spinner-circle-clipper.right::after {
-  animation-name: right-spin !important;
-}
-
-@keyframes left-spin {
-  0% { transform: rotate(130deg) }
-  50% { transform: rotate(-5deg) }
-  to { transform: rotate(130deg) }
-}
-
-@keyframes right-spin {
-  0% { transform: rotate(-130deg) }
-  50% { transform: rotate(5deg) }
-  to { transform: rotate(-130deg) }
-}
diff --git a/extensions/amp-story/0.1/amp-story.js b/extensions/amp-story/0.1/amp-story.js
deleted file mode 100644
index 383c61d7172cc..0000000000000
--- a/extensions/amp-story/0.1/amp-story.js
+++ /dev/null
@@ -1,1736 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-/**
- * @fileoverview Embeds a story
- *
- * Example:
- * <code>
- * <amp-story standalone>
- *   [...]
- * </amp-story>
- * </code>
- */
-import './amp-story-cta-layer';
-import './amp-story-grid-layer';
-import './amp-story-page';
-import {
-  Action,
-  AmpStoryStoreService,
-  StateProperty,
-} from './amp-story-store-service';
-import {ActionTrust} from '../../../src/action-constants';
-import {AmpStoryAnalytics} from './analytics';
-import {AmpStoryBackground} from './background';
-import {AmpStoryConsent} from './amp-story-consent';
-import {AmpStoryCtaLayer} from './amp-story-cta-layer';
-import {AmpStoryGridLayer} from './amp-story-grid-layer';
-import {AmpStoryHint} from './amp-story-hint';
-import {AmpStoryPage} from './amp-story-page';
-import {AmpStoryRenderService} from './amp-story-render-service';
-import {AmpStoryRequestService} from './amp-story-request-service';
-import {AmpStoryVariableService} from './variable-service';
-import {Bookend} from './amp-story-bookend';
-import {CSS} from '../../../build/amp-story-0.1.css';
-import {CommonSignals} from '../../../src/common-signals';
-import {
-  DoubletapRecognizer,
-  SwipeXYRecognizer,
-} from '../../../src/gesture-recognizers';
-import {EventType, dispatch} from './events';
-import {Gestures} from '../../../src/gesture';
-import {InfoDialog} from './amp-story-info-dialog';
-import {Keys} from '../../../src/utils/key-codes';
-import {Layout} from '../../../src/layout';
-import {
-  LocalizedStringId,
-  createPseudoLocale,
-} from '../../../src/localized-strings';
-import {MediaPool, MediaType} from './media-pool';
-import {NavigationState} from './navigation-state';
-import {ORIGIN_ALLOWLIST} from './origin-allowlist';
-import {PaginationButtons} from './pagination-buttons';
-import {Services} from '../../../src/services';
-import {ShareMenu} from './amp-story-share-menu';
-import {ShareWidget} from './amp-story-share';
-import {SystemLayer} from './amp-story-system-layer';
-import {TapNavigationDirection} from './page-advancement';
-import {UnsupportedBrowserLayer} from './amp-story-unsupported-browser-layer';
-import {ViewportWarningLayer} from './amp-story-viewport-warning-layer';
-import {
-  childElement,
-  childElementByTag,
-  childElements,
-  closest,
-  matches,
-  removeElement,
-  scopedQuerySelectorAll,
-  whenUpgradedToCustomElement,
-} from '../../../src/dom';
-import {
-  computedStyle,
-  resetStyles,
-  setImportantStyles,
-  toggle,
-} from '../../../src/style';
-import {debounce} from '../../../src/utils/rate-limit';
-import {dev, devAssert, user} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {escapeCssSelectorIdent} from '../../../src/css';
-import {findIndex} from '../../../src/utils/array';
-import {getDetail} from '../../../src/event-helper';
-import {getLocalizationService} from './amp-story-localization-service';
-import {getMode} from '../../../src/mode';
-import {getSourceOrigin, parseUrlDeprecated} from '../../../src/url';
-import {getState} from '../../../src/history';
-import {isExperimentOn, toggleExperiment} from '../../../src/experiments';
-import {registerServiceBuilder} from '../../../src/service';
-import {renderSimpleTemplate} from './simple-template';
-import {stringHash32} from '../../../src/string';
-import {upgradeBackgroundAudio} from './audio';
-import LocalizedStringsDefault from './_locales/default';
-import LocalizedStringsEn from './_locales/en';
-
-/** @private @const {string} */
-const PRE_ACTIVE_PAGE_ATTRIBUTE_NAME = 'pre-active';
-
-/** @private @const {string} */
-const AMP_STORY_STANDALONE_ATTRIBUTE = 'standalone';
-
-/** @private @const {number} */
-const DESKTOP_WIDTH_THRESHOLD = 1024;
-
-/** @private @const {number} */
-const DESKTOP_HEIGHT_THRESHOLD = 550;
-
-/** @private @const {number} */
-const MIN_SWIPE_FOR_HINT_OVERLAY_PX = 50;
-
-/** @private @const {string} */
-const ADVANCE_TO_ATTR = 'i-amphtml-advance-to';
-
-/** @private @const {string} */
-const RETURN_TO_ATTR = 'i-amphtml-return-to';
-
-/** @private @const {string} */
-const AUTO_ADVANCE_TO_ATTR = 'auto-advance-to';
-
-/** @private @const {string} */
-const AD_SHOWING_ATTR = 'ad-showing';
-
-/**
- * The duration of time (in milliseconds) to wait for a page to be loaded,
- * before the story becomes visible.
- * @const {number}
- */
-const PAGE_LOAD_TIMEOUT_MS = 5000;
-
-/**
- * CSS class for an amp-story that indicates the initial load for the story has
- * completed.
- * @const {string}
- */
-const STORY_LOADED_CLASS_NAME = 'i-amphtml-story-loaded';
-
-/** @const {!Object<string, number>} */
-const MAX_MEDIA_ELEMENT_COUNTS = {
-  [MediaType.AUDIO]: 4,
-  [MediaType.VIDEO]: 8,
-};
-
-/** @type {string} */
-const TAG = 'amp-story';
-
-/**
- * Container for "pill-style" share widget, rendered on desktop.
- * @private @const {!./simple-template.ElementDef}
- */
-const SHARE_WIDGET_PILL_CONTAINER = {
-  tag: 'div',
-  attrs: dict({'class': 'i-amphtml-story-share-pill'}),
-  children: [
-    {
-      tag: 'span',
-      attrs: dict({'class': 'i-amphtml-story-share-pill-label'}),
-      localizedStringId:
-        LocalizedStringId.DEPRECATED_AMP_STORY_SYSTEM_LAYER_SHARE_WIDGET_LABEL,
-    },
-  ],
-};
-
-/**
- * Selector for elements that should be hidden when the bookend is open on
- * desktop view.
- * @private @const {string}
- */
-const HIDE_ON_BOOKEND_SELECTOR =
-  'amp-story-page, .i-amphtml-story-system-layer';
-
-/**
- * @implements {./media-pool.MediaPoolRoot}
- */
-export class AmpStory extends AMP.BaseElement {
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-
-    /** @private @const {!AmpStoryStoreService} */
-    this.storeService_ = new AmpStoryStoreService(this.win);
-    const storeService = this.storeService_;
-    registerServiceBuilder(this.win, 'story-store', function () {
-      return storeService;
-    });
-
-    /** @private @const {!AmpStoryRequestService} */
-    const requestService = new AmpStoryRequestService(this.win, this.element);
-    registerServiceBuilder(this.win, 'story-request-v01', function () {
-      return requestService;
-    });
-
-    /** @private {!NavigationState} */
-    this.navigationState_ = new NavigationState(this.win, () =>
-      this.hasBookend_()
-    );
-
-    /** @private {!AmpStoryAnalytics} */
-    this.analytics_ = new AmpStoryAnalytics(this.win, this.element);
-
-    /** @const @private {!../../../src/service/vsync-impl.Vsync} */
-    this.vsync_ = this.getVsync();
-
-    /** @private @const {!../../../src/service/localization.LocalizationService} */
-    this.localizationService_ = getLocalizationService(this.element);
-
-    this.localizationService_
-      .registerLocalizedStringBundle('default', LocalizedStringsDefault)
-      .registerLocalizedStringBundle('en', LocalizedStringsEn);
-
-    const enXaPseudoLocaleBundle = createPseudoLocale(
-      LocalizedStringsEn,
-      (s) => `[${s} one two]`
-    );
-    this.localizationService_.registerLocalizedStringBundle(
-      'en-xa',
-      enXaPseudoLocaleBundle
-    );
-
-    /** @private @const {!Bookend} */
-    this.bookend_ = new Bookend(this.win, this.element);
-
-    /** @private @const {!ShareMenu} Preloads and prerenders the share menu. */
-    this.shareMenu_ = new ShareMenu(this.win, this.element);
-
-    /** @private @const {!SystemLayer} */
-    this.systemLayer_ = new SystemLayer(this.win);
-
-    /** @private @const {!UnsupportedBrowserLayer} */
-    this.unsupportedBrowserLayer_ = new UnsupportedBrowserLayer(this.win);
-
-    /** Instantiates the viewport warning layer. */
-    new ViewportWarningLayer(this.win, this.element);
-
-    /** @private @const {!Array<!./amp-story-page.AmpStoryPage>} */
-    this.pages_ = [];
-
-    /** @private @const {!Array<!./amp-story-page.AmpStoryPage>} */
-    this.adPages_ = [];
-
-    /** @const @private {!AmpStoryVariableService} */
-    this.variableService_ = new AmpStoryVariableService();
-    const variableService = this.variableService_;
-    registerServiceBuilder(this.win, 'story-variable', function () {
-      return variableService.get();
-    });
-
-    /** @private {?./amp-story-page.AmpStoryPage} */
-    this.activePage_ = null;
-
-    /** @private @const */
-    this.desktopMedia_ = this.win.matchMedia(
-      `(min-width: ${DESKTOP_WIDTH_THRESHOLD}px) and ` +
-        `(min-height: ${DESKTOP_HEIGHT_THRESHOLD}px)`
-    );
-
-    /** @private @const */
-    this.canRotateToDesktopMedia_ = this.win.matchMedia(
-      `(min-width: ${DESKTOP_HEIGHT_THRESHOLD}px) and ` +
-        `(min-height: ${DESKTOP_WIDTH_THRESHOLD}px)`
-    );
-
-    /** @private {?AmpStoryBackground} */
-    this.background_ = null;
-
-    /** @private {?HTMLMediaElement} */
-    this.backgroundAudioEl_ = null;
-
-    /** @private {?./pagination-buttons.PaginationButtons} */
-    this.paginationButtons_ = null;
-
-    /** @private {?Element} */
-    this.topBar_ = null;
-
-    /** @private {?ShareWidget} */
-    this.shareWidget_ = null;
-
-    /** @private @const {!Array<string>} */
-    this.originAllowlist_ = ORIGIN_ALLOWLIST;
-
-    /** @private {!AmpStoryHint} */
-    this.ampStoryHint_ = new AmpStoryHint(this.win, this.element);
-
-    /** @private {!MediaPool} */
-    this.mediaPool_ = MediaPool.for(this);
-
-    /** @private @const {!../../../src/service/timer-impl.Timer} */
-    this.timer_ = Services.timerFor(this.win);
-
-    /** @private @const {!../../../src/service/platform-impl.Platform} */
-    this.platform_ = Services.platformFor(this.win);
-  }
-
-  /** @override */
-  buildCallback() {
-    this.assertAmpStoryExperiment_();
-
-    if (this.element.hasAttribute(AMP_STORY_STANDALONE_ATTRIBUTE)) {
-      this.initializeStandaloneStory_();
-    }
-
-    // buildCallback already runs in a mutate context. Calling another
-    // mutateElement explicitly will force the runtime to remeasure the
-    // amp-story element, fixing rendering bugs where the story is inactive
-    // (layoutCallback not called) when accessed from any viewer using
-    // prerendering, because of a height incorrectly set to 0.
-    this.mutateElement(() => {});
-
-    this.element.querySelector('amp-story-page').setAttribute('active', '');
-
-    this.initializeListeners_();
-    this.initializeListenersForDev_();
-
-    if (this.isDesktop_()) {
-      this.storeService_.dispatch(Action.TOGGLE_DESKTOP, true);
-    }
-
-    this.navigationState_.observe((stateChangeEvent) => {
-      this.variableService_.onNavigationStateChange(stateChangeEvent);
-      this.analytics_.onNavigationStateChange(stateChangeEvent);
-    });
-  }
-
-  /** @private */
-  initializeStandaloneStory_() {
-    const html = this.win.document.documentElement;
-    html.classList.add('i-amphtml-story-standalone');
-    // Lock body to prevent overflow.
-    this.lockBody_();
-    // Standalone CSS affects sizing of the entire page.
-    this.onResize();
-  }
-
-  /**
-   * Builds the system layer DOM.  This is dependent on the pages_ array having
-   * been initialized, so it cannot happen at build time.
-   * @private
-   */
-  buildSystemLayer_() {
-    const pageIds = this.pages_.map((page) => page.element.id);
-    this.element.appendChild(this.systemLayer_.build(pageIds));
-    this.updateAudioIcon_();
-  }
-
-  /** @private */
-  initializeListeners_() {
-    this.element.addEventListener(EventType.NEXT_PAGE, () => {
-      this.next_();
-    });
-
-    this.element.addEventListener(EventType.PREVIOUS_PAGE, () => {
-      this.previous_();
-    });
-
-    this.storeService_.subscribe(
-      StateProperty.MUTED_STATE,
-      (isMuted) => {
-        this.onMutedStateUpdate_(isMuted);
-        this.variableService_.onMutedStateChange(isMuted);
-      },
-      true /** callToInitialize */
-    );
-
-    this.storeService_.subscribe(
-      StateProperty.MUTED_STATE,
-      (isMuted) => {
-        // We do not want to trigger an analytics event for the initialization of
-        // the muted state.
-        this.analytics_.onMutedStateChange(isMuted);
-      },
-      false /** callToInitialize */
-    );
-
-    this.storeService_.subscribe(
-      StateProperty.SUPPORTED_BROWSER_STATE,
-      (isBrowserSupported) => {
-        this.onSupportedBrowserStateUpdate_(isBrowserSupported);
-      }
-    );
-
-    this.element.addEventListener(EventType.SWITCH_PAGE, (e) => {
-      if (this.storeService_.get(StateProperty.BOOKEND_STATE)) {
-        // Disallow switching pages while the bookend is active.
-        return;
-      }
-
-      this.switchTo_(getDetail(e)['targetPageId']);
-      this.ampStoryHint_.hideAllNavigationHint();
-    });
-
-    this.element.addEventListener(EventType.PAGE_PROGRESS, (e) => {
-      const detail = getDetail(e);
-      const pageId = detail['pageId'];
-      const progress = detail['progress'];
-
-      if (pageId !== this.activePage_.element.id) {
-        // Ignore progress update events from inactive pages.
-        return;
-      }
-
-      if (!this.activePage_.isAd()) {
-        this.systemLayer_.updateProgress(pageId, progress);
-      }
-    });
-
-    this.element.addEventListener(EventType.REPLAY, () => {
-      this.replay_();
-    });
-
-    this.element.addEventListener(EventType.SHOW_NO_PREVIOUS_PAGE_HELP, () => {
-      if (this.storeService_.get(StateProperty.CAN_SHOW_PREVIOUS_PAGE_HELP)) {
-        this.ampStoryHint_.showFirstPageHintOverlay();
-      }
-    });
-
-    this.element.addEventListener(EventType.TAP_NAVIGATION, (e) => {
-      const direction = getDetail(e)['direction'];
-      this.performTapNavigation_(direction);
-    });
-
-    this.storeService_.subscribe(StateProperty.BOOKEND_STATE, (isActive) => {
-      this.onBookendStateUpdate_(isActive);
-    });
-
-    this.storeService_.subscribe(
-      StateProperty.DESKTOP_STATE,
-      (isDesktop) => {
-        this.onDesktopStateUpdate_(isDesktop);
-      },
-      true /** callToInitialize */
-    );
-
-    this.win.document.addEventListener(
-      'keydown',
-      (e) => {
-        this.onKeyDown_(e);
-      },
-      true
-    );
-
-    this.storeService_.subscribe(StateProperty.CURRENT_PAGE_ID, (pageId) => {
-      this.onCurrentPageIdUpdate_(pageId);
-    });
-
-    this.getViewport().onResize(debounce(this.win, () => this.onResize(), 300));
-    this.installGestureRecognizers_();
-  }
-
-  /** @private */
-  installGestureRecognizers_() {
-    const {element} = this;
-    const gestures = Gestures.get(element, /* shouldNotPreventDefault */ true);
-
-    // Disables zoom on double-tap.
-    gestures.onGesture(DoubletapRecognizer, (gesture) => {
-      const {event} = gesture;
-      event.preventDefault();
-    });
-
-    // Shows "tap to navigate" hint when swiping.
-    gestures.onGesture(SwipeXYRecognizer, (gesture) => {
-      const {deltaX, deltaY} = gesture.data;
-      if (this.storeService_.get(StateProperty.BOOKEND_STATE)) {
-        return;
-      }
-      if (!this.isSwipeLargeEnoughForHint_(deltaX, deltaY)) {
-        return;
-      }
-      if (
-        !this.storeService_.get(StateProperty.CAN_SHOW_NAVIGATION_OVERLAY_HINT)
-      ) {
-        return;
-      }
-
-      this.ampStoryHint_.showNavigationOverlay();
-    });
-  }
-
-  /**
-   * @param {number} deltaX
-   * @param {number} deltaY
-   * @return {boolean}
-   * @private
-   */
-  isSwipeLargeEnoughForHint_(deltaX, deltaY) {
-    const sideSwipe = Math.abs(deltaX) >= MIN_SWIPE_FOR_HINT_OVERLAY_PX;
-    const upSwipe = -1 * deltaY >= MIN_SWIPE_FOR_HINT_OVERLAY_PX;
-    return sideSwipe || upSwipe;
-  }
-
-  /** @private */
-  initializeListenersForDev_() {
-    if (!getMode().development) {
-      return;
-    }
-
-    this.element.addEventListener(EventType.DEV_LOG_ENTRIES_AVAILABLE, (e) => {
-      this.systemLayer_.logAll(/** @type {?} */ (getDetail(e)));
-    });
-  }
-
-  /** @private */
-  lockBody_() {
-    const {document} = this.win;
-    setImportantStyles(document.documentElement, {
-      'overflow': 'hidden',
-    });
-    setImportantStyles(document.body, {
-      'overflow': 'hidden',
-    });
-
-    this.getViewport().resetTouchZoom();
-    this.getViewport().disableTouchZoom();
-    this.maybeLockScreenOrientation_();
-  }
-
-  /** @private */
-  maybeLockScreenOrientation_() {
-    const {screen} = this.win;
-    if (!screen || !this.canRotateToDesktopMedia_.matches) {
-      return;
-    }
-
-    const lockOrientation =
-      screen.lockOrientation ||
-      screen.mozLockOrientation ||
-      screen.msLockOrientation ||
-      ((unusedOrientation) => {});
-
-    try {
-      lockOrientation('portrait');
-    } catch (e) {
-      dev().warn(TAG, 'Failed to lock screen orientation:', e.message);
-    }
-  }
-
-  /** @private */
-  buildPaginationButtons_() {
-    this.paginationButtons_ = PaginationButtons.create(this.win);
-
-    this.paginationButtons_.attach(this.element);
-
-    this.navigationState_.observe((e) =>
-      this.paginationButtons_.onNavigationStateChange(e)
-    );
-  }
-
-  /** @visibleForTesting */
-  buildPaginationButtonsForTesting() {
-    this.buildPaginationButtons_();
-  }
-
-  /** @private */
-  buildTopBar_() {
-    const doc = this.element.ownerDocument;
-
-    this.topBar_ = doc.createElement('div');
-    this.topBar_.classList.add(
-      'i-amphtml-story-top',
-      'i-amphtml-story-system-reset'
-    );
-    this.topBar_.appendChild(this.buildTopBarShare_());
-
-    this.element.insertBefore(this.topBar_, this.element.firstChild);
-  }
-
-  /**
-   * @return {!Node}
-   * @private
-   */
-  buildTopBarShare_() {
-    const container = renderSimpleTemplate(
-      this.win.document,
-      SHARE_WIDGET_PILL_CONTAINER
-    );
-
-    this.shareWidget_ = new ShareWidget(this.win, this.element);
-
-    const shareLabelEl = dev().assertElement(
-      container.querySelector('.i-amphtml-story-share-pill-label'),
-      'Expected share pill label to be present.'
-    );
-
-    container.insertBefore(
-      this.shareWidget_.build(this.getAmpDoc()),
-      shareLabelEl
-    );
-
-    return container;
-  }
-
-  /** @override */
-  layoutCallback() {
-    if (!AmpStory.isBrowserSupported(this.win) && !this.platform_.isBot()) {
-      this.storeService_.dispatch(Action.TOGGLE_SUPPORTED_BROWSER, false);
-      return Promise.resolve();
-    }
-
-    const firstPageEl = user().assertElement(
-      this.element.querySelector('amp-story-page'),
-      'Story must have at least one page.'
-    );
-
-    const initialPageId = this.getHistoryStatePageId_() || firstPageEl.id;
-
-    if (!this.paginationButtons_) {
-      this.buildPaginationButtons_();
-    }
-
-    const storyLayoutPromise = this.initializePages_()
-      .then(() => this.buildSystemLayer_())
-      .then(() => {
-        this.pages_.forEach((page) => {
-          page.setActive(false);
-        });
-      })
-      .then(() => this.switchTo_(initialPageId))
-      .then(() => this.preloadPagesByDistance_())
-      .then(() => {
-        // Preloads and prerenders the share menu if mobile, where the share
-        // button is visible.
-        if (!this.storeService_.get(StateProperty.DESKTOP_STATE)) {
-          this.shareMenu_.build();
-        }
-
-        const infoDialog = Services.viewerForDoc(this.element).isEmbedded()
-          ? new InfoDialog(this.win, this.element)
-          : null;
-        if (infoDialog) {
-          infoDialog.build();
-        }
-      });
-
-    // Do not block the layout callback on the completion of these promises, as
-    // that prevents descendents from being laid out (and therefore loaded).
-    storyLayoutPromise
-      .then(() => this.whenPagesLoaded_(PAGE_LOAD_TIMEOUT_MS))
-      .then(() => this.markStoryAsLoaded_());
-
-    this.validateConsent_();
-
-    // Story is being prerendered: resolve the layoutCallback when the first
-    // page is built. Other pages will only build if the document becomes
-    // visible.
-    if (!this.getAmpDoc().hasBeenVisible()) {
-      return whenUpgradedToCustomElement(firstPageEl).then(() =>
-        firstPageEl.whenBuilt()
-      );
-    }
-
-    return storyLayoutPromise;
-  }
-
-  /**
-   * @param {number} timeoutMs The maximum amount of time to wait, in
-   *     milliseconds.
-   * @return {!Promise} A promise that is resolved when the page is loaded or
-   *     the timeout has been exceeded, whichever happens first.
-   * @private
-   */
-  whenPagesLoaded_(timeoutMs = 0) {
-    const pagesToWaitFor = this.isDesktop_()
-      ? [this.pages_[0], this.pages_[1]]
-      : [this.pages_[0]];
-
-    const storyLoadPromise = Promise.all(
-      pagesToWaitFor.filter((page) => !!page).map((page) => page.whenLoaded())
-    );
-
-    return this.timer_
-      .timeoutPromise(timeoutMs, storyLoadPromise)
-      .catch(() => {});
-  }
-
-  /** @private */
-  markStoryAsLoaded_() {
-    dispatch(this.element, EventType.STORY_LOADED, true);
-    this.signals().signal(CommonSignals.INI_LOAD);
-    this.mutateElement(() => {
-      this.element.classList.add(STORY_LOADED_CLASS_NAME);
-    });
-  }
-
-  /**
-   * Ensures publishers using amp-consent use amp-story-consent.
-   * @private
-   */
-  validateConsent_() {
-    const consentEl = this.element.querySelector('amp-consent');
-    if (!consentEl) {
-      return;
-    }
-
-    if (!childElementByTag(consentEl, 'amp-story-consent')) {
-      dev().error(TAG, 'amp-consent must have an amp-story-consent child');
-    }
-
-    const allowedTags = ['SCRIPT', 'AMP-STORY-CONSENT'];
-    const toRemoveChildren = childElements(
-      consentEl,
-      (el) => allowedTags.indexOf(el.tagName) === -1
-    );
-
-    if (toRemoveChildren.length === 0) {
-      return;
-    }
-    dev().error(TAG, `amp-consent only allows tags: ${allowedTags}`);
-    toRemoveChildren.forEach((el) => consentEl.removeChild(el));
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout == Layout.CONTAINER;
-  }
-
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
-  /** @private */
-  isAmpStoryEnabled_() {
-    if (
-      isExperimentOn(this.win, 'amp-story') ||
-      getMode().test ||
-      this.win.location.protocol === 'file:'
-    ) {
-      return true;
-    }
-
-    const origin = getSourceOrigin(this.win.location);
-    return this.isOriginAllowlisted_(origin);
-  }
-
-  /**
-   * @param {string} domain The domain part of the origin, to be hashed.
-   * @return {string} The hashed origin.
-   * @private
-   */
-  hashOrigin_(domain) {
-    return stringHash32(domain.toLowerCase());
-  }
-
-  /**
-   * @param {string} origin The origin to check.
-   * @return {boolean} Whether the specified origin is allowlisted to use the
-   *     amp-story extension.
-   * @private
-   */
-  isOriginAllowlisted_(origin) {
-    const hostName = parseUrlDeprecated(origin).hostname;
-    const domains = hostName.split('.');
-
-    // Check all permutations of the domain to see if any level of the domain is
-    // allowlisted.  Taking the example of the allowlisted domain
-    // example.co.uk, if the page is served from www.example.co.uk/page.html:
-    //
-    //   www.example.co.uk => false
-    //   example.co.uk => true
-    //   co.uk => false
-    //   uk => false
-    //
-    // This is necessary, since we don't have any guarantees of which level of
-    // the domain is allowlisted.  For many domains (e.g. .com), the second
-    // level of the domain is likely to be allowlisted, whereas for others
-    // (e.g. .co.uk) the third level may be allowlisted.  Additionally, this
-    // allows subdomains to be allowlisted individually.
-    return domains.some((unusedDomain, index) => {
-      const domain = domains.slice(index, domains.length).join('.');
-      const domainHash = this.hashOrigin_(domain);
-      return this.originAllowlist_.includes(domainHash);
-    });
-  }
-
-  /** @private */
-  assertAmpStoryExperiment_() {
-    if (this.isAmpStoryEnabled_()) {
-      return;
-    }
-
-    const errorIconEl = this.win.document.createElement('div');
-    errorIconEl.classList.add('i-amphtml-story-experiment-icon');
-    errorIconEl.classList.add('i-amphtml-story-experiment-icon-error');
-
-    const errorMsgEl = this.win.document.createElement('span');
-    errorMsgEl.textContent = this.localizationService_.getLocalizedString(
-      LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT
-    );
-
-    const experimentsLinkEl = this.win.document.createElement('button');
-    experimentsLinkEl.textContent = this.localizationService_.getLocalizedString(
-      LocalizedStringId.DEPRECATED_AMP_STORY_EXPERIMENT_ENABLE_BUTTON_LABEL
-    );
-    experimentsLinkEl.addEventListener('click', () => {
-      toggleExperiment(this.win, 'amp-story', true);
-      errorIconEl.classList.remove('i-amphtml-story-experiment-icon-error');
-      errorIconEl.classList.add('i-amphtml-story-experiment-icon-done');
-      errorMsgEl.textContent = this.localizationService_.getLocalizedString(
-        LocalizedStringId.DEPRECATED_AMP_STORY_EXPERIMENT_ENABLED_TEXT
-      );
-      removeElement(experimentsLinkEl);
-    });
-
-    const errorEl = this.win.document.createElement('div');
-    errorEl.classList.add('i-amphtml-story-experiment-error');
-    errorEl.appendChild(errorIconEl);
-    errorEl.appendChild(errorMsgEl);
-    errorEl.appendChild(experimentsLinkEl);
-    this.element.appendChild(errorEl);
-
-    user().error(TAG, 'enable amp-story experiment');
-  }
-
-  /** @private */
-  initializePages_() {
-    const pageImplPromises = Array.prototype.map.call(
-      this.element.querySelectorAll('amp-story-page'),
-      (pageEl, index) => {
-        return pageEl.getImpl().then((pageImpl) => {
-          this.pages_[index] = pageImpl;
-        });
-      }
-    );
-
-    return Promise.all(pageImplPromises);
-  }
-
-  /**
-   * Advance to the next screen in the story, if there is one.
-   * @param {boolean=} opt_isAutomaticAdvance Whether this navigation was caused
-   *     by an automatic advancement after a timeout.
-   * @private
-   */
-  next_(opt_isAutomaticAdvance) {
-    const activePage = devAssert(
-      this.activePage_,
-      'No active page set when navigating to next page.'
-    );
-
-    const lastPage = this.pages_[this.getPageCount() - 1];
-    if (
-      activePage.element.hasAttribute(ADVANCE_TO_ATTR) ||
-      activePage !== lastPage
-    ) {
-      activePage.next(opt_isAutomaticAdvance);
-    } else {
-      this.hasBookend_().then((hasBookend) => {
-        if (hasBookend) {
-          this.showBookend_();
-        }
-      });
-    }
-  }
-
-  /**
-   * Go back to the previous screen in the story, if there is one.
-   * @private
-   */
-  previous_() {
-    const activePage = devAssert(
-      this.activePage_,
-      'No active page set when navigating to next page.'
-    );
-    activePage.previous();
-  }
-
-  /**
-   * @param {!TapNavigationDirection} direction The direction to navigate.
-   * @private
-   */
-  performTapNavigation_(direction) {
-    if (this.isDesktop_()) {
-      this.next_();
-      return;
-    }
-
-    if (direction === TapNavigationDirection.NEXT) {
-      this.next_();
-    } else if (direction === TapNavigationDirection.PREVIOUS) {
-      this.previous_();
-    }
-  }
-
-  /**
-   * Switches to a particular page.
-   * @param {string} targetPageId
-   * @return {!Promise}
-   */
-  switchTo_(targetPageId) {
-    const targetPage = this.getPageById(targetPageId);
-    const pageIndex = this.getPageIndex(targetPage);
-
-    this.storeService_.dispatch(Action.CHANGE_PAGE, {
-      id: targetPageId,
-      index: pageIndex,
-    });
-
-    this.updateBackground_(targetPage.element, /* initial */ !this.activePage_);
-
-    if (targetPage.isAd()) {
-      this.vsync_.mutate(() => {
-        this.element.setAttribute(AD_SHOWING_ATTR, '');
-      });
-    } else {
-      this.vsync_.mutate(() => {
-        this.element.removeAttribute(AD_SHOWING_ATTR);
-      });
-      // TODO(alanorozco): decouple this using NavigationState
-      this.systemLayer_.setActivePageId(targetPageId);
-    }
-
-    // TODO(alanorozco): check if autoplay
-    this.navigationState_.updateActivePage(
-      pageIndex,
-      this.getPageCount(),
-      targetPage.element.id
-    );
-
-    const oldPage = this.activePage_;
-
-    // TODO(cvializ): Move this to the page class?
-    const activePriorSibling = targetPage.element.previousElementSibling;
-    const previousActivePriorSibling = this.element.querySelector(
-      `[${escapeCssSelectorIdent(PRE_ACTIVE_PAGE_ATTRIBUTE_NAME)}]`
-    );
-
-    this.activePage_ = targetPage;
-
-    this.systemLayer_.resetDeveloperLogs();
-    this.systemLayer_.setDeveloperLogContextString(this.activePage_.element.id);
-
-    return targetPage.beforeVisible().then(() => {
-      this.triggerActiveEventForPage_();
-
-      if (oldPage) {
-        oldPage.setActive(false);
-      }
-
-      targetPage.setActive(true);
-
-      if (activePriorSibling && matches(activePriorSibling, 'amp-story-page')) {
-        activePriorSibling.setAttribute(PRE_ACTIVE_PAGE_ATTRIBUTE_NAME, '');
-      }
-      if (previousActivePriorSibling) {
-        previousActivePriorSibling.removeAttribute(
-          PRE_ACTIVE_PAGE_ATTRIBUTE_NAME
-        );
-      }
-
-      // If first navigation.
-      if (!oldPage) {
-        this.registerAndPreloadBackgroundAudio_();
-      }
-
-      this.preloadPagesByDistance_();
-      this.reapplyMuting_();
-      this.forceRepaintForSafari_();
-      this.maybePreloadBookend_();
-    });
-  }
-
-  /** @private */
-  triggerActiveEventForPage_() {
-    // TODO(alanorozco): pass event priority once amphtml-story repo is merged
-    // with upstream.
-    Services.actionServiceForDoc(this.element).trigger(
-      this.activePage_.element,
-      'active',
-      /* event */ null,
-      ActionTrust.HIGH
-    );
-  }
-
-  /**
-   * For some reason, Safari has an issue where sometimes when pages become
-   * visible, some descendants are not painted.  This is a hack where we detect
-   * that the browser is Safari and force it to repaint, to avoid this case.
-   * See newmuis/amphtml-story#106 for details.
-   * @private
-   */
-  forceRepaintForSafari_() {
-    if (!this.platform_.isSafari() && !this.platform_.isIos()) {
-      return;
-    }
-    if (this.isDesktop_()) {
-      // Force repaint is only needed when transitioning from invisible to
-      // visible
-      return;
-    }
-
-    this.mutateElement(() => {
-      toggle(this.element, false);
-
-      // Reading the height is what forces the repaint.  The conditional exists
-      // only to workaround the fact that the closure compiler would otherwise
-      // think that only reading the height has no effect.  Since the height is
-      // always >= 0, this conditional will always be executed.
-      const height = this.element./*OK*/ offsetHeight;
-      if (height >= 0) {
-        toggle(this.element, true);
-      }
-    });
-  }
-
-  /**
-   * Handles all key presses within the story.
-   * @param {!Event} e The keydown event.
-   * @private
-   */
-  onKeyDown_(e) {
-    if (this.storeService_.get(StateProperty.BOOKEND_STATE)) {
-      return;
-    }
-
-    switch (e.key) {
-      // TODO(newmuis): This will need to be flipped for RTL.
-      case Keys.LEFT_ARROW:
-        this.previous_();
-        break;
-      case Keys.RIGHT_ARROW:
-        this.next_();
-        break;
-    }
-  }
-
-  /**
-   * @param {string} pageId new current page id
-   * @private
-   * */
-  onCurrentPageIdUpdate_(pageId) {
-    this.setHistoryStatePageId_(pageId);
-  }
-
-  /**
-   * Save page id using history API.
-   * @param {string} pageId page id to be saved
-   * @private
-   */
-  setHistoryStatePageId_(pageId) {
-    // Never save ad pages to history as they are unique to each visit.
-    const page = this.getPageById(pageId);
-    if (page.isAd()) {
-      return;
-    }
-
-    const {history} = this.win;
-    if (history.replaceState && this.getHistoryStatePageId_() !== pageId) {
-      history.replaceState(
-        {
-          ampStoryPageId: pageId,
-        },
-        ''
-      );
-    }
-  }
-
-  /**
-   * @private
-   * @return {?string}
-   */
-  getHistoryStatePageId_() {
-    const state = getState(this.win.history);
-    return state ? state.ampStoryPageId : null;
-  }
-
-  /**
-   * Handle resize events and set the story's desktop state.
-   * @visibleForTesting
-   */
-  onResize() {
-    const isDesktop = this.isDesktop_();
-    this.storeService_.dispatch(Action.TOGGLE_DESKTOP, isDesktop);
-
-    if (isDesktop) {
-      this.storeService_.dispatch(Action.TOGGLE_LANDSCAPE, false);
-      return;
-    }
-
-    // On mobile, maybe display the landscape overlay warning.
-    this.vsync_.run(
-      {
-        measure: (state) => {
-          const {offsetWidth, offsetHeight} = this.element;
-          state.isLandscape = offsetWidth > offsetHeight;
-        },
-        mutate: (state) => {
-          this.storeService_.dispatch(
-            Action.TOGGLE_LANDSCAPE,
-            state.isLandscape
-          );
-        },
-      },
-      {}
-    );
-  }
-
-  /**
-   * Reacts to desktop state updates.
-   * @param {boolean} isDesktop
-   * @private
-   */
-  onDesktopStateUpdate_(isDesktop) {
-    if (isDesktop) {
-      this.vsync_.mutate(() => {
-        this.element.setAttribute('desktop', '');
-      });
-      if (!this.topBar_) {
-        this.buildTopBar_();
-      }
-      if (!this.background_) {
-        this.background_ = new AmpStoryBackground(this.win, this.element);
-        this.background_.attach();
-      }
-      if (this.activePage_) {
-        this.updateBackground_(this.activePage_.element, /* initial */ true);
-      }
-    } else {
-      // Preloads and prerenders the share menu as the share button gets visible
-      // on the mobile UI. No-op if already built.
-      this.shareMenu_.build();
-
-      this.vsync_.mutate(() => {
-        this.element.removeAttribute('desktop');
-      });
-    }
-  }
-
-  /**
-   * @return {boolean} True if the screen size matches the desktop media query.
-   */
-  isDesktop_() {
-    return this.desktopMedia_.matches && !this.platform_.isBot();
-  }
-
-  /**
-   * Displays the unsupported browser UI: either the publisher provided UI, or
-   * fallbacks to a generic default.
-   * @param {boolean} isBrowserSupported
-   * @private
-   */
-  onSupportedBrowserStateUpdate_(isBrowserSupported) {
-    if (isBrowserSupported) {
-      dev().error(TAG, 'No handler to exit unsupported browser state.');
-    }
-
-    const fallbackEl = this.getFallback();
-
-    this.mutateElement(() => {
-      this.element.classList.add('i-amphtml-story-fallback');
-    });
-
-    // Displays the publisher provided fallback, or fallbacks to the default
-    // unsupported browser layer.
-    if (fallbackEl) {
-      this.toggleFallback(true);
-    } else {
-      this.element.appendChild(this.unsupportedBrowserLayer_.build());
-    }
-  }
-
-  /**
-   * Get the URL of the given page's background resource.
-   * @param {!Element} pageElement
-   * @return {?string} The URL of the background resource
-   */
-  getBackgroundUrl_(pageElement) {
-    let fillElement = pageElement.querySelector(
-      '[template="fill"]:not(.i-amphtml-hidden-by-media-query)'
-    );
-
-    if (!fillElement) {
-      return null;
-    }
-
-    fillElement = dev().assertElement(fillElement);
-
-    const fillPosterElement = fillElement.querySelector(
-      '[poster]:not(.i-amphtml-hidden-by-media-query)'
-    );
-
-    const srcElement = fillElement.querySelector(
-      '[src]:not(.i-amphtml-hidden-by-media-query)'
-    );
-
-    const fillPoster = fillPosterElement
-      ? fillPosterElement.getAttribute('poster')
-      : '';
-    const src = srcElement ? srcElement.getAttribute('src') : '';
-
-    return fillPoster || src;
-  }
-
-  /**
-   * Update the background to the specified page's background.
-   * @param {!Element} pageElement
-   * @param {boolean=} initial
-   */
-  updateBackground_(pageElement, initial = false) {
-    if (!this.background_) {
-      return;
-    }
-
-    this.getVsync().run(
-      {
-        measure: (state) => {
-          state.url = this.getBackgroundUrl_(pageElement);
-          state.color = computedStyle(this.win, pageElement).getPropertyValue(
-            'background-color'
-          );
-        },
-        mutate: (state) => {
-          this.background_.setBackground(state.color, state.url, initial);
-        },
-      },
-      {}
-    );
-  }
-
-  /**
-   * Shows the bookend overlay.
-   * @private
-   */
-  showBookend_() {
-    this.buildAndPreloadBookend_().then(() => {
-      this.storeService_.dispatch(Action.TOGGLE_BOOKEND, true);
-    });
-  }
-
-  /**
-   * Hides the bookend overlay.
-   * @private
-   */
-  hideBookend_() {
-    this.storeService_.dispatch(Action.TOGGLE_BOOKEND, false);
-  }
-
-  /**
-   * @param {boolean} isActive
-   * @private
-   */
-  onBookendStateUpdate_(isActive) {
-    this.toggleElementsOnBookend_(/* display */ isActive);
-    this.element.classList.toggle('i-amphtml-story-bookend-active', isActive);
-
-    if (isActive) {
-      this.systemLayer_.hideDeveloperLog();
-      this.activePage_.pauseCallback();
-    }
-
-    if (!isActive) {
-      this.activePage_.resumeCallback();
-    }
-  }
-
-  /**
-   * Toggle content when bookend is opened/closed.
-   * TODO(gmajoulet): these elements should get hidden by listening to bookend
-   *                  state events.
-   * @param {boolean} isActive
-   * @private
-   */
-  toggleElementsOnBookend_(isActive) {
-    if (!this.isDesktop_()) {
-      return;
-    }
-
-    const elements = scopedQuerySelectorAll(
-      this.element,
-      HIDE_ON_BOOKEND_SELECTOR
-    );
-
-    Array.prototype.forEach.call(elements, (el) => {
-      if (isActive) {
-        setImportantStyles(el, {
-          opacity: 0,
-          transition: 'opacity 0.1s',
-        });
-      } else {
-        resetStyles(el, ['opacity', 'transition']);
-      }
-    });
-  }
-
-  /**
-   * @return {!Array<!Array<string>>} A 2D array representing lists of pages by
-   *     distance.  The outer array index represents the distance from the
-   *     active page; the inner array is a list of page IDs at the specified
-   *     distance.
-   */
-  getPagesByDistance_() {
-    const distanceMap = this.getPageDistanceMapHelper_(
-      /* distance */ 0,
-      /* map */ {},
-      this.activePage_.element.id
-    );
-
-    // Transpose the map into a 2D array.
-    const pagesByDistance = [];
-    Object.keys(distanceMap).forEach((pageId) => {
-      const distance = distanceMap[pageId];
-      if (!pagesByDistance[distance]) {
-        pagesByDistance[distance] = [];
-      }
-      pagesByDistance[distance].push(pageId);
-    });
-
-    return pagesByDistance;
-  }
-
-  /**
-   * Creates a map of a page and all of the pages reachable from that page, by
-   * distance.
-   *
-   * @param {number} distance The distance that the page with the specified
-   *     pageId is from the active page.
-   * @param {!Object<string, number>} map A mapping from pageId to its distance
-   *     from the active page.
-   * @param {string} pageId The page to be added to the map.
-   * @return {!Object<string, number>} A mapping from page ID to the priority of
-   *     that page.
-   * @private
-   */
-  getPageDistanceMapHelper_(distance, map, pageId) {
-    if (map[pageId] !== undefined && map[pageId] <= distance) {
-      return map;
-    }
-
-    map[pageId] = distance;
-    const page = this.getPageById(pageId);
-    page.getAdjacentPageIds().forEach((adjacentPageId) => {
-      if (
-        map[adjacentPageId] !== undefined &&
-        map[adjacentPageId] <= distance
-      ) {
-        return;
-      }
-
-      // TODO(newmuis): Remove the assignment and return, as they're
-      // unnecessary.
-      map = this.getPageDistanceMapHelper_(distance + 1, map, adjacentPageId);
-    });
-
-    return map;
-  }
-
-  /** @private */
-  preloadPagesByDistance_() {
-    if (this.platform_.isBot()) {
-      this.pages_.forEach((page) => {
-        page.setDistance(0);
-      });
-      return;
-    }
-
-    const pagesByDistance = this.getPagesByDistance_();
-
-    this.mutateElement(() => {
-      pagesByDistance.forEach((pageIds, distance) => {
-        pageIds.forEach((pageId) => {
-          const page = this.getPageById(pageId);
-          page.setDistance(distance);
-        });
-      });
-    });
-  }
-
-  /**
-   * Handles a background-audio attribute set on an <amp-story> tag.
-   * @private
-   */
-  registerAndPreloadBackgroundAudio_() {
-    let backgroundAudioEl = upgradeBackgroundAudio(this.element);
-
-    if (!backgroundAudioEl) {
-      return;
-    }
-
-    // Once the media pool is ready, registers and preloads the background
-    // audio, and then gets the swapped element from the DOM to mute/unmute/play
-    // it programmatically later.
-    this.activePage_
-      .whenLoaded()
-      .then(() => {
-        backgroundAudioEl = /** @type {!HTMLMediaElement} */ (backgroundAudioEl);
-        this.mediaPool_.register(backgroundAudioEl);
-        return this.mediaPool_.preload(backgroundAudioEl);
-      })
-      .then(() => {
-        this.backgroundAudioEl_ = /** @type {!HTMLMediaElement} */ (childElement(
-          this.element,
-          (el) => {
-            return el.tagName.toLowerCase() === 'audio';
-          }
-        ));
-      });
-  }
-
-  /**
-   * Preloads the bookend config if on the last page.
-   * @private
-   */
-  maybePreloadBookend_() {
-    if (!this.activePage_) {
-      return;
-    }
-
-    const pageIndex = this.getPageIndex(this.activePage_);
-
-    if (pageIndex + 1 >= this.getPageCount()) {
-      this.buildAndPreloadBookend_();
-    }
-  }
-
-  /**
-   * Builds, fetches and sets the bookend publisher configuration.
-   * @return {!Promise<?./amp-story-bookend.BookendConfigDef>}
-   * @private
-   */
-  buildAndPreloadBookend_() {
-    this.bookend_.build();
-    return this.bookend_.loadConfig();
-  }
-
-  /**
-   * @return {!Promise<boolean>}
-   * @private
-   */
-  hasBookend_() {
-    if (!this.storeService_.get(StateProperty.CAN_SHOW_BOOKEND)) {
-      return Promise.resolve(false);
-    }
-
-    // TODO(newmuis): Change this comment.
-    // On mobile there is always a bookend. On desktop, the bookend will only
-    // be shown if related articles have been configured.
-    if (!this.isDesktop_()) {
-      return Promise.resolve(true);
-    }
-    return this.bookend_
-      .loadConfig(false /** applyConfig */)
-      .then(
-        (config) =>
-          !!(config && config.relatedArticles && config.relatedArticles.length)
-      );
-  }
-
-  /**
-   * @param {string} id The ID of the page whose index should be retrieved.
-   * @return {number} The index of the page.
-   * @private
-   */
-  getPageIndexById_(id) {
-    const pageIndex = findIndex(this.pages_, (page) => page.element.id === id);
-
-    if (pageIndex < 0) {
-      user().error(
-        TAG,
-        `Story refers to page "${id}", but no such page exists.`
-      );
-    }
-
-    return pageIndex;
-  }
-
-  /**
-   * @param {string} id The ID of the page to be retrieved.
-   * @return {!./amp-story-page.AmpStoryPage} Retrieves the page with the
-   *     specified ID.
-   */
-  getPageById(id) {
-    const pageIndex = this.getPageIndexById_(id);
-    return devAssert(
-      this.pages_[pageIndex],
-      `Page at index ${pageIndex} exists, but is missing from the array.`
-    );
-  }
-
-  /**
-   * @return {number}
-   */
-  getPageCount() {
-    return this.pages_.length - this.adPages_.length;
-  }
-
-  /**
-   * @param {!./amp-story-page.AmpStoryPage} desiredPage
-   * @return {number} The index of the page.
-   */
-  getPageIndex(desiredPage) {
-    return findIndex(this.pages_, (page) => page === desiredPage);
-  }
-
-  /**
-   * Retrieves the page containing the element, or null. A background audio
-   * set on the <amp-story> tag would not be contained in a page.
-   * @param {!Element} element The element whose containing AmpStoryPage should
-   *     be retrieved
-   * @return {?./amp-story-page.AmpStoryPage} The AmpStoryPage containing the
-   *     specified element, if any.
-   */
-  getPageContainingElement_(element) {
-    const pageIndex = findIndex(this.pages_, (page) => {
-      const pageEl = closest(element, (el) => {
-        return el === page.element;
-      });
-
-      return !!pageEl;
-    });
-
-    return this.pages_[pageIndex] || null;
-  }
-
-  /** @override */
-  getElementDistance(element) {
-    const page = this.getPageContainingElement_(element);
-
-    // An element not contained in a page is likely to be global to the story,
-    // like a background audio. Setting the distance to -1 ensures it will not
-    // get evicted from the media pool.
-    if (!page) {
-      return -1;
-    }
-
-    return page.getDistance();
-  }
-
-  /** @override */
-  getMaxMediaElementCounts() {
-    let audioMediaElementsCount = this.element.querySelectorAll(
-      'amp-audio, [background-audio]'
-    ).length;
-    const videoMediaElementsCount = this.element.querySelectorAll('amp-video')
-      .length;
-
-    // The root element (amp-story) might have a background-audio as well.
-    if (this.element.hasAttribute('background-audio')) {
-      audioMediaElementsCount++;
-    }
-
-    return {
-      [MediaType.AUDIO]: Math.min(
-        audioMediaElementsCount,
-        MAX_MEDIA_ELEMENT_COUNTS[MediaType.AUDIO]
-      ),
-      [MediaType.VIDEO]: Math.min(
-        videoMediaElementsCount,
-        MAX_MEDIA_ELEMENT_COUNTS[MediaType.VIDEO]
-      ),
-    };
-  }
-
-  /** @override */
-  getElement() {
-    return this.element;
-  }
-
-  /**
-   * Reacts to muted state updates.
-   * @param  {boolean} isMuted Whether the story just got muted.
-   * @private
-   */
-  onMutedStateUpdate_(isMuted) {
-    isMuted ? this.mute_() : this.unmute_();
-  }
-
-  /**
-   * Mutes the audio for the story.
-   * @private
-   */
-  mute_() {
-    if (this.backgroundAudioEl_) {
-      this.mediaPool_.mute(this.backgroundAudioEl_);
-    }
-    this.pages_.forEach((page) => {
-      page.muteAllMedia();
-    });
-  }
-
-  /**
-   * Unmutes the audio for the story.
-   * @private
-   */
-  unmute_() {
-    const unmuteAllMedia = () => {
-      if (this.backgroundAudioEl_) {
-        this.mediaPool_.unmute(this.backgroundAudioEl_);
-        this.mediaPool_.play(this.backgroundAudioEl_);
-      }
-      if (this.activePage_) {
-        this.activePage_.unmuteAllMedia();
-      }
-    };
-
-    this.mediaPool_.blessAll().then(unmuteAllMedia, unmuteAllMedia);
-  }
-
-  /**
-   * Reapplies the muting status for the currently-active media in the story.
-   * @private
-   */
-  reapplyMuting_() {
-    const isMuted = this.storeService_.get(StateProperty.MUTED_STATE);
-    if (!isMuted) {
-      this.mute_();
-      this.unmute_();
-    }
-  }
-
-  /**
-   * Shows the audio icon if the story has any media elements containing audio,
-   * or background audio at the story or page level.
-   * @private
-   */
-  updateAudioIcon_() {
-    const containsMediaElementWithAudio = !!this.element.querySelector(
-      'amp-audio, amp-video:not([noaudio]), [background-audio]'
-    );
-    const hasStoryAudio = this.element.hasAttribute('background-audio');
-
-    this.storeService_.dispatch(
-      Action.TOGGLE_HAS_AUDIO,
-      containsMediaElementWithAudio || hasStoryAudio
-    );
-  }
-
-  /** @private */
-  replay_() {
-    if (this.storeService_.get(StateProperty.BOOKEND_STATE)) {
-      this.hideBookend_();
-    }
-    this.switchTo_(dev().assertElement(this.pages_[0].element).id);
-  }
-
-  /** @return {!NavigationState} */
-  getNavigationState() {
-    return this.navigationState_;
-  }
-
-  /**
-   * Add page to back of pages_ array
-   * @param {!./amp-story-page.AmpStoryPage} page
-   */
-  addPage(page) {
-    this.pages_.push(page);
-
-    if (page.isAd()) {
-      this.adPages_.push(page);
-    }
-  }
-
-  /**
-   * Insert a new page in navigation flow by changing the attr pointers
-   * on amp-story-page elements
-   * @param {string} pageBeforeId
-   * @param {string} pageToBeInsertedId
-   * @return {boolean} was page inserted
-   */
-  insertPage(pageBeforeId, pageToBeInsertedId) {
-    // TODO(ccordry): make sure this method moves to PageManager when
-    // implemented
-    const pageToBeInserted = this.getPageById(pageToBeInsertedId);
-    const pageToBeInsertedEl = pageToBeInserted.element;
-
-    if (
-      pageToBeInserted.isAd() &&
-      !this.storeService_.get(StateProperty.CAN_INSERT_AUTOMATIC_AD)
-    ) {
-      dev().expectedError(TAG, 'Inserting ads automatically is disallowed.');
-      return false;
-    }
-
-    const pageBefore = this.getPageById(pageBeforeId);
-    const pageBeforeEl = pageBefore.element;
-
-    const nextPage = this.getNextPage(pageBefore);
-
-    if (!nextPage) {
-      return false;
-    }
-
-    pageBeforeEl.setAttribute(ADVANCE_TO_ATTR, pageToBeInsertedId);
-    pageBeforeEl.setAttribute(AUTO_ADVANCE_TO_ATTR, pageToBeInsertedId);
-    pageToBeInsertedEl.setAttribute(RETURN_TO_ATTR, pageBeforeId);
-
-    const nextPageEl = nextPage.element;
-    const nextPageId = nextPageEl.id;
-    pageToBeInsertedEl.setAttribute(ADVANCE_TO_ATTR, nextPageId);
-    pageToBeInsertedEl.setAttribute(AUTO_ADVANCE_TO_ATTR, nextPageId);
-    nextPageEl.setAttribute(RETURN_TO_ATTR, pageToBeInsertedId);
-
-    return true;
-  }
-
-  /**
-   * Get next page object
-   * @param {!./amp-story-page.AmpStoryPage} page
-   * @return {?./amp-story-page.AmpStoryPage}
-   */
-  getNextPage(page) {
-    const nextPageId = page.getNextPageId(true /*opt_isAutomaticAdvance */);
-    if (!nextPageId) {
-      return null;
-    }
-    return this.getPageById(nextPageId);
-  }
-
-  /**
-   * @param {!Window} win
-   * @return {boolean} true if the user's browser supports the features needed
-   *     for amp-story.
-   */
-  static isBrowserSupported(win) {
-    return Boolean(
-      win.CSS && win.CSS.supports && win.CSS.supports('display', 'grid')
-    );
-  }
-}
-
-AMP.extension('amp-story', '0.1', (AMP) => {
-  AMP.registerElement('amp-story', AmpStory, CSS);
-  AMP.registerElement('amp-story-page', AmpStoryPage);
-  AMP.registerElement('amp-story-grid-layer', AmpStoryGridLayer);
-  AMP.registerElement('amp-story-cta-layer', AmpStoryCtaLayer);
-  AMP.registerElement('amp-story-consent', AmpStoryConsent);
-  AMP.registerServiceForDoc('amp-story-render', AmpStoryRenderService);
-});
diff --git a/extensions/amp-story/0.1/analytics.js b/extensions/amp-story/0.1/analytics.js
deleted file mode 100644
index 060e8903239f0..0000000000000
--- a/extensions/amp-story/0.1/analytics.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {Services} from '../../../src/services';
-import {StateChangeType} from './navigation-state';
-import {dev} from '../../../src/log';
-import {triggerAnalyticsEvent} from '../../../src/analytics';
-
-/** @enum {string} */
-const Events = {
-  PAGE_VISIBLE: 'story-page-visible',
-  BOOKEND_ENTER: 'story-bookend-enter',
-  BOOKEND_EXIT: 'story-bookend-exit',
-  STORY_MUTED: 'story-audio-muted',
-  STORY_UNMUTED: 'story-audio-unmuted',
-};
-
-/**
- * Intermediate handler for amp-story specific analytics.
- */
-export class AmpStoryAnalytics {
-  /**
-   * @param {!Window} win
-   * @param {!Element} element
-   */
-  constructor(win, element) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private @const {!Element} */
-    this.element_ = element;
-  }
-
-  /**
-   * @param {!./navigation-state.StateChangeEventDef} stateChangeEvent
-   */
-  onNavigationStateChange(stateChangeEvent) {
-    switch (stateChangeEvent.type) {
-      case StateChangeType.ACTIVE_PAGE:
-        this.triggerEvent_(Events.PAGE_VISIBLE);
-        break;
-      case StateChangeType.BOOKEND_ENTER:
-        this.triggerEvent_(Events.BOOKEND_ENTER);
-        break;
-      case StateChangeType.BOOKEND_EXIT:
-        this.triggerEvent_(Events.BOOKEND_EXIT);
-        break;
-    }
-  }
-
-  /**
-   * @param {boolean} isMuted
-   */
-  onMutedStateChange(isMuted) {
-    const event = isMuted ? Events.STORY_MUTED : Events.STORY_UNMUTED;
-    this.triggerEvent_(event);
-  }
-
-  /**
-   * @param {string} eventType
-   * @private
-   */
-  triggerEvent_(eventType) {
-    const variablesPromise = Services.storyVariableServiceForOrNull(this.win_);
-    variablesPromise.then(
-      (variables) => {
-        triggerAnalyticsEvent(
-          this.element_,
-          eventType,
-          /** @type {!JsonObject} */ (variables)
-        );
-      },
-      (reason) => {
-        dev().error('AMP-STORY', 'Could not get analytics variables', reason);
-      }
-    );
-  }
-}
diff --git a/extensions/amp-story/0.1/animation-presets-utils.js b/extensions/amp-story/0.1/animation-presets-utils.js
deleted file mode 100644
index daaa058fac05a..0000000000000
--- a/extensions/amp-story/0.1/animation-presets-utils.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-/**
- * @fileoverview Common animations utility functions used in the animation
- * presets.
- */
-
-import {KeyframesDef, StoryAnimationDimsDef} from './animation-types';
-import {rotate, scale, translate} from '../../../src/style';
-
-/**
- * Translates the element on the 2d plane according to the given points.
- * @param {number} startX Starting point in the abscissa.
- * @param {number} startY Starting point in the ordinate.
- * @param {number} endX Ending point in the abscissa.
- * @param {number} endY Ending point in the ordinate.
- * @return {KeyframesDef} Keyframes that make up the animation.
- */
-export function translate2d(startX, startY, endX, endY) {
-  return [
-    {transform: translate(startX, startY)},
-    {transform: translate(endX, endY)},
-  ];
-}
-
-/**
- * Translates and rotates the element on the 2d plane.
- * @param {number} startX Starting point in the abscissa.
- * @param {number} startY Starting point in the ordinate.
- * @param {number} endX Ending point in the abscissa.
- * @param {number} endY Ending point in the ordinate.
- * @param {number} direction -1 for left, 1 for right
- * @return {KeyframesDef} Keyframes that make up the animation.
- */
-export function rotateAndTranslate(startX, startY, endX, endY, direction) {
-  return [
-    {transform: translate(startX, startY) + ' ' + rotate(direction * 360)},
-    {transform: translate(endX, endY) + ' ' + rotate(0)},
-  ];
-}
-
-/**
- * Gradually shows and grows the element while translating it on the 2d plane.
- * @param {number} startX Starting point in the abscissa.
- * @param {number} startY Starting point in the ordinate.
- * @param {number} endX Ending point in the abscissa.
- * @param {number} endY Ending point in the ordinate.
- * @return {KeyframesDef} Keyframes that make up the animation.
- */
-export function whooshIn(startX, startY, endX, endY) {
-  return [
-    {
-      opacity: 0,
-      transform: translate(startX, startY) + ' ' + scale(0.15),
-    },
-    {
-      opacity: 1,
-      transform: translate(endX, endY) + ' ' + scale(1),
-    },
-  ];
-}
-
-/**
- * Checks if either of the target's dimensions are smaller than or equal to
- * those of the page.
- * @param {StoryAnimationDimsDef} dimensions Dimensions of page and target.
- * @return {boolean}
- * @visibleForTesting
- */
-export function targetFitsWithinPage(dimensions) {
-  return (
-    dimensions.targetWidth <= dimensions.pageWidth ||
-    dimensions.targetHeight <= dimensions.pageHeight
-  );
-}
-
-/**
- * Calculate target scaling factor so that it is at least 25% larger than the
- * page.
- * @param {StoryAnimationDimsDef} dimensions Dimensions of page and target.
- * @return {number}
- */
-export function calculateTargetScalingFactor(dimensions) {
-  if (targetFitsWithinPage(dimensions)) {
-    const scalingFactor = 1.25;
-    const widthFactor =
-      dimensions.pageWidth > dimensions.targetWidth
-        ? dimensions.pageWidth / dimensions.targetWidth
-        : 1;
-    const heightFactor =
-      dimensions.pageHeight > dimensions.targetHeight
-        ? dimensions.pageHeight / dimensions.targetHeight
-        : 1;
-    return Math.max(widthFactor, heightFactor) * scalingFactor;
-  }
-  return 1;
-}
-
-/**
- * Scale the image in every frame by a certain factor.
- * @param {KeyframesDef} keyframes Keyframes that will be used for the animation.
- * @param {number} scalingFactor Scaling factor at which target will be scaled.
- * @return {KeyframesDef}
- */
-function enlargeKeyFrames(keyframes, scalingFactor) {
-  keyframes.forEach((frame) => {
-    frame['transform'] += ' ' + scale(scalingFactor);
-    frame['transform-origin'] = 'left top';
-  });
-  return keyframes;
-}
-
-/**
- * Translates the element and scales it if necessary.
- * @param {number} startX Starting point in the abscissa.
- * @param {number} startY Starting point in the ordinate.
- * @param {number} endX Ending point in the abscissa.
- * @param {number} endY Ending point in the ordinate.
- * @param {number} scalingFactor Factor by which target will be scaled.
- * @return {KeyframesDef} Keyframes that make up the animation.
- */
-export function scaleAndTranslate(startX, startY, endX, endY, scalingFactor) {
-  if (scalingFactor === 1) {
-    return translate2d(startX, startY, endX, endY);
-  }
-  return enlargeKeyFrames(
-    translate2d(startX, startY, endX, endY),
-    scalingFactor
-  );
-}
diff --git a/extensions/amp-story/0.1/animation-presets.js b/extensions/amp-story/0.1/animation-presets.js
deleted file mode 100644
index e910e67498d35..0000000000000
--- a/extensions/amp-story/0.1/animation-presets.js
+++ /dev/null
@@ -1,299 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {GRID_LAYER_TEMPLATE_CLASS_NAMES} from './amp-story-grid-layer';
-import {StoryAnimationPresetDef} from './animation-types';
-import {
-  calculateTargetScalingFactor,
-  rotateAndTranslate,
-  scaleAndTranslate,
-  translate2d,
-  whooshIn,
-} from './animation-presets-utils';
-import {px} from '../../../src/style';
-
-const FULL_BLEED_CATEGORY = 'full-bleed';
-const FILL_TEMPLATE_LAYOUT = 'fill';
-
-/**
- * A list of animations that are full bleed.
- * @private @const {!Array<string>}
- */
-const FULL_BLEED_ANIMATION_NAMES = [
-  'pan-up',
-  'pan-down',
-  'pan-right',
-  'pan-left',
-  'zoom-in',
-  'zoom-out',
-];
-
-/**
- * A mapping of animation categories to corresponding CSS class names.
- * @private @const {!Object<string, string>}
- */
-const ANIMATION_CSS_CLASS_NAMES = {
-  [FULL_BLEED_CATEGORY]:
-    'i-amphtml-story-grid-template-with-full-bleed-animation',
-};
-
-/**
- * Perform style-specific operations for presets.
- * @param {!Element} el
- * @param {string} presetName
- */
-export function setStyleForPreset(el, presetName) {
-  // For full bleed animations.
-  if (FULL_BLEED_ANIMATION_NAMES.indexOf(presetName) >= 0) {
-    const parent = el.parentElement;
-    if (
-      parent.classList.contains(
-        GRID_LAYER_TEMPLATE_CLASS_NAMES[FILL_TEMPLATE_LAYOUT]
-      )
-    ) {
-      parent.classList.remove(
-        GRID_LAYER_TEMPLATE_CLASS_NAMES[FILL_TEMPLATE_LAYOUT]
-      );
-    }
-    parent.classList.add(ANIMATION_CSS_CLASS_NAMES[FULL_BLEED_CATEGORY]);
-  }
-}
-
-/** @const {!Object<string, !StoryAnimationPresetDef>} */
-// First keyframe will always be considered offset: 0 and will be applied to the
-// element as the first frame before animation starts.
-export const PRESETS = {
-  'pulse': {
-    duration: 500,
-    easing: 'linear',
-    keyframes: [
-      {
-        offset: 0,
-        transform: 'scale(1)',
-      },
-      {
-        offset: 0.25,
-        transform: 'scale(0.95)',
-      },
-      {
-        offset: 0.75,
-        transform: 'scale(1.05)',
-      },
-      {
-        offset: 1,
-        transform: 'scale(1)',
-      },
-    ],
-  },
-  'fly-in-left': {
-    duration: 500,
-    easing: 'ease-out',
-    keyframes(dimensions) {
-      const offsetX = -(dimensions.targetX + dimensions.targetWidth);
-      return translate2d(offsetX, 0, 0, 0);
-    },
-  },
-  'fly-in-right': {
-    duration: 500,
-    easing: 'ease-out',
-    keyframes(dimensions) {
-      const offsetX = dimensions.pageWidth - dimensions.targetX;
-      return translate2d(offsetX, 0, 0, 0);
-    },
-  },
-  'fly-in-top': {
-    duration: 500,
-    easing: 'ease-out',
-    keyframes(dimensions) {
-      const offsetY = -(dimensions.targetY + dimensions.targetHeight);
-      return translate2d(0, offsetY, 0, 0);
-    },
-  },
-  'fly-in-bottom': {
-    duration: 500,
-    easing: 'ease-out',
-    keyframes(dimensions) {
-      const offsetY = dimensions.pageHeight - dimensions.targetY;
-      return translate2d(0, offsetY, 0, 0);
-    },
-  },
-  'rotate-in-left': {
-    duration: 700,
-    easing: 'ease-out',
-    keyframes(dimensions) {
-      const offsetX = -(dimensions.targetX + dimensions.targetWidth);
-      return rotateAndTranslate(offsetX, 0, 0, 0, -1);
-    },
-  },
-  'rotate-in-right': {
-    duration: 700,
-    easing: 'ease-out',
-    keyframes(dimensions) {
-      const offsetX = dimensions.pageWidth - dimensions.targetX;
-      return rotateAndTranslate(offsetX, 0, 0, 0, 1);
-    },
-  },
-  'fade-in': {
-    duration: 500,
-    easing: 'ease-out',
-    keyframes: [
-      {
-        opacity: 0,
-      },
-      {
-        opacity: 1,
-      },
-    ],
-  },
-  'drop': {
-    duration: 1600,
-    keyframes(dimensions) {
-      const maxBounceHeight = Math.max(
-        160,
-        dimensions.targetY + dimensions.targetHeight
-      );
-
-      return [
-        {
-          offset: 0,
-          transform: `translateY(${px(-maxBounceHeight)})`,
-          easing: 'cubic-bezier(.75,.05,.86,.08)',
-        },
-        {
-          offset: 0.3,
-          transform: 'translateY(0)',
-          easing: 'cubic-bezier(.22,.61,.35,1)',
-        },
-        {
-          offset: 0.52,
-          transform: `translateY(${px(-0.6 * maxBounceHeight)})`,
-          easing: 'cubic-bezier(.75,.05,.86,.08)',
-        },
-        {
-          offset: 0.74,
-          transform: 'translateY(0)',
-          easing: 'cubic-bezier(.22,.61,.35,1)',
-        },
-        {
-          offset: 0.83,
-          transform: `translateY(${px(-0.3 * maxBounceHeight)})`,
-          easing: 'cubic-bezier(.75,.05,.86,.08)',
-        },
-        {
-          offset: 1,
-          transform: 'translateY(0)',
-          easing: 'cubic-bezier(.22,.61,.35,1)',
-        },
-      ];
-    },
-  },
-  'twirl-in': {
-    duration: 1000,
-    easing: 'cubic-bezier(.2,.75,.4,1)',
-    keyframes: [
-      {
-        transform: 'rotate(-540deg) scale(0.1)',
-        opacity: 0,
-      },
-      {
-        transform: 'none',
-        opacity: 1,
-      },
-    ],
-  },
-  'whoosh-in-left': {
-    duration: 500,
-    easing: 'ease-out',
-    keyframes(dimensions) {
-      const offsetX = -(dimensions.targetX + dimensions.targetWidth);
-      return whooshIn(offsetX, 0, 0, 0);
-    },
-  },
-  'whoosh-in-right': {
-    duration: 500,
-    easing: 'ease-out',
-    keyframes(dimensions) {
-      const offsetX = dimensions.pageWidth - dimensions.targetX;
-      return whooshIn(offsetX, 0, 0, 0);
-    },
-  },
-  'pan-left': {
-    duration: 1000,
-    easing: 'linear',
-    keyframes(dimensions) {
-      const scalingFactor = calculateTargetScalingFactor(dimensions);
-      dimensions.targetWidth *= scalingFactor;
-      dimensions.targetHeight *= scalingFactor;
-
-      const offsetX = dimensions.pageWidth - dimensions.targetWidth;
-      const offsetY = (dimensions.pageHeight - dimensions.targetHeight) / 2;
-
-      return scaleAndTranslate(offsetX, offsetY, 0, offsetY, scalingFactor);
-    },
-  },
-  'pan-right': {
-    duration: 1000,
-    easing: 'linear',
-    keyframes(dimensions) {
-      const scalingFactor = calculateTargetScalingFactor(dimensions);
-      dimensions.targetWidth *= scalingFactor;
-      dimensions.targetHeight *= scalingFactor;
-
-      const offsetX = dimensions.pageWidth - dimensions.targetWidth;
-      const offsetY = (dimensions.pageHeight - dimensions.targetHeight) / 2;
-
-      return scaleAndTranslate(0, offsetY, offsetX, offsetY, scalingFactor);
-    },
-  },
-  'pan-down': {
-    duration: 1000,
-    easing: 'linear',
-    keyframes(dimensions) {
-      const scalingFactor = calculateTargetScalingFactor(dimensions);
-      dimensions.targetWidth *= scalingFactor;
-      dimensions.targetHeight *= scalingFactor;
-
-      const offsetX = -dimensions.targetWidth / 2;
-      const offsetY = dimensions.pageHeight - dimensions.targetHeight;
-
-      return scaleAndTranslate(offsetX, 0, offsetX, offsetY, scalingFactor);
-    },
-  },
-  'pan-up': {
-    duration: 1000,
-    easing: 'linear',
-    keyframes(dimensions) {
-      const scalingFactor = calculateTargetScalingFactor(dimensions);
-      dimensions.targetWidth *= scalingFactor;
-      dimensions.targetHeight *= scalingFactor;
-
-      const offsetX = -dimensions.targetWidth / 2;
-      const offsetY = dimensions.pageHeight - dimensions.targetHeight;
-
-      return scaleAndTranslate(offsetX, offsetY, offsetX, 0, scalingFactor);
-    },
-  },
-  'zoom-in': {
-    duration: 1000,
-    easing: 'linear',
-    keyframes: [{transform: 'scale(1,1)'}, {transform: 'scale(3,3)'}],
-  },
-  'zoom-out': {
-    duration: 1000,
-    easing: 'linear',
-    keyframes: [{transform: 'scale(3,3)'}, {transform: 'scale(1,1)'}],
-  },
-};
diff --git a/extensions/amp-story/0.1/animation-types.js b/extensions/amp-story/0.1/animation-types.js
deleted file mode 100644
index 1fde42d6c9792..0000000000000
--- a/extensions/amp-story/0.1/animation-types.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-/** @typedef {!Array<!Object<string, *>>} */
-export let KeyframesDef;
-
-/** @typedef {(function(StoryAnimationDimsDef):!KeyframesDef)|!KeyframesDef} */
-export let KeyframesOrFilterFnDef;
-
-/**
- * @typedef {{
- *   pageWidth: number,
- *   pageHeight: number,
- *   targetWidth: number,
- *   targetHeight: number,
- *   targetX: number,
- *   targetY: number,
- * }}
- */
-export let StoryAnimationDimsDef;
-
-/**
- * @typedef {{
- *   duration: number,
- *   easing: (string|undefined),
- *   keyframes: !KeyframesOrFilterFnDef,
- * }}
- */
-export let StoryAnimationPresetDef;
-
-/**
- * @typedef {{
- *  target: !Element,
- *  startAfterId: (string|undefined),
- *  preset: !StoryAnimationPresetDef,
- *  duration: (number|undefined),
- *  delay: (number|undefined),
- * }}
- */
-export let StoryAnimationDef;
diff --git a/extensions/amp-story/0.1/animation.js b/extensions/amp-story/0.1/animation.js
deleted file mode 100644
index fe0c94d183fdc..0000000000000
--- a/extensions/amp-story/0.1/animation.js
+++ /dev/null
@@ -1,617 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {Deferred} from '../../../src/utils/promise';
-import {
-  KeyframesDef,
-  KeyframesOrFilterFnDef,
-  StoryAnimationDef,
-  StoryAnimationDimsDef,
-  StoryAnimationPresetDef,
-} from './animation-types';
-import {PRESETS, setStyleForPreset} from './animation-presets';
-import {Services} from '../../../src/services';
-import {WebAnimationPlayState} from '../../amp-animation/0.1/web-animation-types';
-import {assertDoesNotContainDisplay, setStyles} from '../../../src/style';
-import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {escapeCssSelectorIdent} from '../../../src/css';
-import {map, omit} from '../../../src/utils/object';
-import {scopedQuerySelector, scopedQuerySelectorAll} from '../../../src/dom';
-import {timeStrToMillis, unscaledClientRect} from './utils';
-
-/** const {string} */
-export const ANIMATE_IN_ATTRIBUTE_NAME = 'animate-in';
-/** const {string} */
-const ANIMATE_IN_DURATION_ATTRIBUTE_NAME = 'animate-in-duration';
-/** const {string} */
-const ANIMATE_IN_DELAY_ATTRIBUTE_NAME = 'animate-in-delay';
-/** const {string} */
-const ANIMATE_IN_AFTER_ATTRIBUTE_NAME = 'animate-in-after';
-/** const {string} */
-const ANIMATABLE_ELEMENTS_SELECTOR = `[${ANIMATE_IN_ATTRIBUTE_NAME}]`;
-
-/**
- * @param {!Element} element
- * @return {boolean}
- * TODO(alanorozco): maybe memoize?
- */
-export function hasAnimations(element) {
-  return !!scopedQuerySelector(element, ANIMATABLE_ELEMENTS_SELECTOR);
-}
-
-/** @enum {number} */
-const PlaybackActivity = {
-  START: 0,
-  FINISH: 1,
-};
-
-/** Wraps WebAnimationRunner for story page elements. */
-class AnimationRunner {
-  /**
-   * @param {!Element} page
-   * @param {!StoryAnimationDef} animationDef
-   * @param {!Promise<
-   *    !../../amp-animation/0.1/web-animations.Builder
-   * >} webAnimationBuilderPromise
-   * @param {!../../../src/service/vsync-impl.Vsync} vsync
-   * @param {!../../../src/service/timer-impl.Timer} timer
-   * @param {!AnimationSequence} sequence
-   */
-  constructor(
-    page,
-    animationDef,
-    webAnimationBuilderPromise,
-    vsync,
-    timer,
-    sequence
-  ) {
-    /** @private @const */
-    this.page_ = page;
-
-    /** @private @const */
-    this.timer_ = timer;
-
-    /** @private @const */
-    this.vsync_ = vsync;
-
-    /** @private @const */
-    this.target_ = dev().assertElement(animationDef.target);
-
-    /** @private @const */
-    this.sequence_ = sequence;
-
-    /** @private @const */
-    this.animationDef_ = animationDef;
-
-    /** @private @const */
-    this.presetDef_ = animationDef.preset;
-
-    /** @private @const */
-    this.keyframes_ = this.filterKeyframes_(animationDef.preset.keyframes);
-
-    /** @private @const */
-    this.delay_ = animationDef.delay || this.presetDef_.delay || 0;
-
-    /** @private @const */
-    this.duration_ = animationDef.duration || this.presetDef_.duration || 0;
-
-    /**
-     * @private @const {!Promise<
-     *    !../../amp-animation/0.1/runners/animation-runner.AnimationRunner>}
-     */
-    this.runnerPromise_ = this.getWebAnimationDef_().then((webAnimDef) =>
-      webAnimationBuilderPromise.then((builder) =>
-        builder.createRunner(webAnimDef)
-      )
-    );
-
-    /** @private @const {!Promise<!Object<string, *>>} */
-    this.firstFrameProps_ = this.keyframes_.then((keyframes) =>
-      omit(keyframes[0], ['offset'])
-    );
-
-    /** @private {?../../amp-animation/0.1/runners/animation-runner.AnimationRunner} */
-    this.runner_ = null;
-
-    /** @private {?PlaybackActivity} */
-    this.scheduledActivity_ = null;
-
-    /** @private {?Promise} */
-    this.scheduledWait_ = null;
-
-    this.keyframes_.then((keyframes) =>
-      devAssert(
-        !keyframes[0].offset,
-        'First keyframe offset for animation preset should be 0 or undefined'
-      )
-    );
-
-    userAssert(
-      this.delay_ >= 0,
-      'Negative delays are not allowed in amp-story entrance animations.'
-    );
-
-    this.runnerPromise_.then((runner) => this.onRunnerReady_(runner));
-  }
-
-  /**
-   * @return {!Promise<!StoryAnimationDimsDef>}
-   * @visibleForTesting
-   */
-  getDims() {
-    return this.vsync_.measurePromise(() => {
-      const targetRect = unscaledClientRect(this.target_);
-      const pageRect = unscaledClientRect(this.page_);
-
-      return /** @type {!StoryAnimationDimsDef} */ ({
-        pageWidth: pageRect.width,
-        pageHeight: pageRect.height,
-        targetWidth: targetRect.width,
-        targetHeight: targetRect.height,
-        targetX: targetRect.left - pageRect.left,
-        targetY: targetRect.top - pageRect.top,
-      });
-    });
-  }
-
-  /**
-   * @param {!KeyframesOrFilterFnDef} keyframesArrayOrFn
-   * @return {!Promise<!KeyframesDef>}
-   * @private
-   */
-  filterKeyframes_(keyframesArrayOrFn) {
-    if (Array.isArray(keyframesArrayOrFn)) {
-      return Promise.resolve(keyframesArrayOrFn);
-    }
-    return this.getDims().then(keyframesArrayOrFn);
-  }
-
-  /**
-   * @return {!Promise<
-   *   !../../amp-animation/0.1/web-animation-types.WebKeyframeAnimationDef>}
-   * @private
-   */
-  getWebAnimationDef_() {
-    return this.keyframes_.then((keyframes) => ({
-      keyframes,
-      target: this.target_,
-      duration: `${this.duration_}ms`,
-      easing: this.presetDef_.easing,
-      fill: 'forwards',
-    }));
-  }
-
-  /** @return {!Promise<void>} */
-  applyFirstFrame() {
-    if (this.hasStarted()) {
-      return Promise.resolve();
-    }
-
-    if (this.runner_) {
-      this.runner_.cancel();
-    }
-
-    return this.firstFrameProps_.then((firstFrameProps) =>
-      this.vsync_.mutatePromise(() => {
-        setStyles(this.target_, assertDoesNotContainDisplay(firstFrameProps));
-      })
-    );
-  }
-
-  /** Starts or resumes the animation. */
-  start() {
-    if (this.hasStarted()) {
-      return;
-    }
-
-    this.playback_(PlaybackActivity.START, this.getStartWaitPromise_());
-  }
-
-  /**
-   * @return {!Promise}
-   * @private
-   */
-  getStartWaitPromise_() {
-    let promise = Promise.resolve();
-
-    if (this.animationDef_.startAfterId) {
-      const startAfterId = /** @type {string} */ (this.animationDef_
-        .startAfterId);
-      promise = promise.then(() => this.sequence_.waitFor(startAfterId));
-    }
-
-    if (this.delay_) {
-      promise = promise.then(() => this.timer_.promise(this.delay_));
-    }
-
-    return promise;
-  }
-
-  /**
-   * @param {!../../amp-animation/0.1/runners/animation-runner.AnimationRunner} runner
-   * @private
-   */
-  startWhenReady_(runner) {
-    runner.start();
-  }
-
-  /** @return {boolean} */
-  hasStarted() {
-    return (
-      this.isActivityScheduled_(PlaybackActivity.START) ||
-      (!!this.runner_ &&
-        devAssert(this.runner_).getPlayState() == WebAnimationPlayState.RUNNING)
-    );
-  }
-
-  /** Force-finishes all animations. */
-  finish() {
-    if (!this.runner_) {
-      this.notifyFinish_();
-    }
-    this.playback_(PlaybackActivity.FINISH);
-  }
-
-  /**
-   * @param {!../../amp-animation/0.1/runners/animation-runner.AnimationRunner} runner
-   * @private
-   */
-  finishWhenReady_(runner) {
-    if (runner.getPlayState() == WebAnimationPlayState.RUNNING) {
-      runner.finish();
-    }
-  }
-
-  /** Cancels animation. */
-  cancel() {
-    this.scheduledActivity_ = null;
-    this.scheduledWait_ = null;
-
-    if (this.runner_) {
-      devAssert(this.runner_).cancel();
-    }
-  }
-
-  /**
-   * @param {!PlaybackActivity} activity
-   * @param {!Promise=} opt_wait
-   * @private
-   */
-  playback_(activity, opt_wait) {
-    const wait = opt_wait || null;
-
-    this.scheduledActivity_ = activity;
-    this.scheduledWait_ = wait;
-
-    if (this.runner_) {
-      this.playbackWhenReady_(activity, wait);
-    }
-  }
-
-  /**
-   * Executes playback activity if runner is ready.
-   * @param {!PlaybackActivity} activity
-   * @param {?Promise} wait
-   * @private
-   */
-  playbackWhenReady_(activity, wait) {
-    const runner =
-      /**
-       * @type {!../../amp-animation/0.1/runners/animation-runner.AnimationRunner}
-       */
-      (devAssert(
-        this.runner_,
-        'Tried to execute playbackWhenReady_ before runner was resolved.'
-      ));
-
-    (wait || Promise.resolve()).then(() => {
-      if (!this.isActivityScheduled_(activity)) {
-        return;
-      }
-
-      this.scheduledActivity_ = null;
-      this.scheduledWait_ = null;
-
-      switch (activity) {
-        case PlaybackActivity.START:
-          return this.startWhenReady_(runner);
-        case PlaybackActivity.FINISH:
-          return this.finishWhenReady_(runner);
-      }
-    });
-  }
-
-  /**
-   * Marks runner as ready and executes playback activity if needed.
-   * @param {!../../amp-animation/0.1/runners/animation-runner.AnimationRunner} runner
-   * @private
-   */
-  onRunnerReady_(runner) {
-    this.runner_ = runner;
-
-    runner.onPlayStateChanged((state) => {
-      if (state == WebAnimationPlayState.FINISHED) {
-        this.notifyFinish_();
-      }
-    });
-
-    if (!this.isActivityScheduled_()) {
-      return;
-    }
-
-    this.playbackWhenReady_(
-      /** @type {!PlaybackActivity} */ (this.scheduledActivity_),
-      this.scheduledWait_
-    );
-  }
-
-  /**
-   * @param {!PlaybackActivity=} opt_activity
-   * @return {boolean}
-   * @private
-   */
-  isActivityScheduled_(opt_activity) {
-    if (!opt_activity) {
-      return this.scheduledActivity_ !== null;
-    }
-    return this.scheduledActivity_ === opt_activity;
-  }
-
-  /** @private */
-  notifyFinish_() {
-    if (this.target_.id) {
-      this.sequence_.notifyFinish(this.target_.id);
-    }
-  }
-}
-
-// TODO(alanorozco): Looping animations
-/** Manager for animations in story pages. */
-export class AnimationManager {
-  /**
-   * @param {!Element} root
-   * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
-   */
-  constructor(root, ampdoc) {
-    devAssert(hasAnimations(root));
-
-    /** @private @const */
-    this.root_ = root;
-
-    /** @private @const */
-    this.ampdoc_ = ampdoc;
-
-    /** @private @const */
-    this.vsync_ = Services.vsyncFor(this.ampdoc_.win);
-
-    /** @private @const */
-    this.timer_ = Services.timerFor(this.ampdoc_.win);
-
-    /** @private @const */
-    this.builderPromise_ = this.createAnimationBuilderPromise_();
-
-    /** @private {?Array<!Promise<!AnimationRunner>>} */
-    this.runners_ = null;
-
-    /** @private */
-    this.sequence_ = AnimationSequence.create();
-  }
-
-  /**
-   * Decouples constructor so it can be stubbed in tests.
-   * @param {!Element} root
-   * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
-   * @param {string} unusedBaseUrl
-   * @return {!AnimationManager}
-   */
-  static create(root, ampdoc, unusedBaseUrl) {
-    return new AnimationManager(root, ampdoc);
-  }
-
-  /**
-   * Applies first frame to target element before starting animation.
-   * @return {!Promise}
-   */
-  applyFirstFrame() {
-    return Promise.all(
-      this.getOrCreateRunners_().map((runner) => runner.applyFirstFrame())
-    );
-  }
-
-  /** Starts all entrance animations for the page. */
-  animateIn() {
-    this.getRunners_().forEach((runner) => runner.start());
-  }
-
-  /** Skips all entrance animations for the page. */
-  finishAll() {
-    this.getRunners_().forEach((runner) => runner.finish());
-  }
-
-  /** Cancels all entrance animations for the page. */
-  cancelAll() {
-    if (!this.runners_) {
-      // nothing to cancel when the first frame has not been applied yet.
-      return;
-    }
-    this.getRunners_().forEach((runner) => runner.cancel());
-  }
-
-  /**
-   * Determines if there is an entrance animation running.
-   *
-   * @return {*} TODO(#23582): Specify return type
-   */
-  hasAnimationStarted() {
-    return this.getRunners_().some((runner) => runner.hasStarted());
-  }
-
-  /**
-   * @private
-   * @return {!Array} TODO(#23582): Specify return type
-   */
-  getRunners_() {
-    return devAssert(this.runners_, 'Executed before applyFirstFrame');
-  }
-
-  /**
-   * @return {!Array<!AnimationRunner>}
-   * @private
-   */
-  getOrCreateRunners_() {
-    if (!this.runners_) {
-      this.runners_ = Array.prototype.map.call(
-        scopedQuerySelectorAll(this.root_, ANIMATABLE_ELEMENTS_SELECTOR),
-        (el) => this.createRunner_(el)
-      );
-    }
-    return devAssert(this.runners_);
-  }
-
-  /**
-   * @param {!Element} el
-   * @return {!AnimationRunner}
-   */
-  createRunner_(el) {
-    const preset = this.getPreset_(el);
-    const animationDef = this.createAnimationDef(el, preset);
-
-    return new AnimationRunner(
-      this.root_,
-      animationDef,
-      devAssert(this.builderPromise_),
-      this.vsync_,
-      this.timer_,
-      this.sequence_
-    );
-  }
-
-  /**
-   * @param {!Element} el
-   * @param {!StoryAnimationPresetDef} preset
-   * @return {!StoryAnimationDef}
-   */
-  createAnimationDef(el, preset) {
-    const animationDef = {target: el, preset};
-
-    if (el.hasAttribute(ANIMATE_IN_DURATION_ATTRIBUTE_NAME)) {
-      animationDef.duration = timeStrToMillis(
-        el.getAttribute(ANIMATE_IN_DURATION_ATTRIBUTE_NAME)
-      );
-    }
-
-    if (el.hasAttribute(ANIMATE_IN_DELAY_ATTRIBUTE_NAME)) {
-      animationDef.delay = timeStrToMillis(
-        el.getAttribute(ANIMATE_IN_DELAY_ATTRIBUTE_NAME)
-      );
-    }
-
-    if (el.hasAttribute(ANIMATE_IN_AFTER_ATTRIBUTE_NAME)) {
-      const dependencyId = el.getAttribute(ANIMATE_IN_AFTER_ATTRIBUTE_NAME);
-
-      user().assertElement(
-        this.root_.querySelector(`#${escapeCssSelectorIdent(dependencyId)}`),
-        `The attribute '${ANIMATE_IN_AFTER_ATTRIBUTE_NAME}' in tag ` +
-          `'${el.tagName}' is set to the invalid value ` +
-          `'${dependencyId}'. No children of parenting 'amp-story-page' ` +
-          `exist with id ${dependencyId}.`
-      );
-
-      animationDef.startAfterId = el.getAttribute(
-        ANIMATE_IN_AFTER_ATTRIBUTE_NAME
-      );
-    }
-
-    return animationDef;
-  }
-
-  /**
-   * @return {!Promise<!../../amp-animation/0.1/web-animations.Builder>}
-   * @private
-   */
-  createAnimationBuilderPromise_() {
-    return Services.extensionsFor(this.ampdoc_.win)
-      .installExtensionForDoc(this.ampdoc_, 'amp-animation')
-      .then(() => Services.webAnimationServiceFor(this.root_))
-      .then((webAnimationService) => webAnimationService.createBuilder());
-  }
-
-  /**
-   * @param {!Element} el
-   * @return {!StoryAnimationPresetDef}
-   */
-  getPreset_(el) {
-    const name = el.getAttribute(ANIMATE_IN_ATTRIBUTE_NAME);
-    setStyleForPreset(el, name);
-
-    return userAssert(
-      PRESETS[name],
-      'Invalid %s preset "%s" for element %s',
-      ANIMATE_IN_ATTRIBUTE_NAME,
-      name,
-      el
-    );
-  }
-}
-
-/** Bus for animation sequencing. */
-class AnimationSequence {
-  /**
-   * @public
-   */
-  constructor() {
-    /** @private @const {!Object<string, !Promise>} */
-    this.subscriptionPromises_ = map();
-
-    /** @private @const {!Object<string, !Function>} */
-    this.subscriptionResolvers_ = map();
-  }
-
-  /**
-   * Decouples constructor for testing.
-   *
-   * @return {!AnimationSequence}
-   */
-  static create() {
-    return new AnimationSequence();
-  }
-
-  /**
-   * Notifies dependent elements that animation has finished.
-   * @param {string} id
-   */
-  notifyFinish(id) {
-    if (id in this.subscriptionPromises_) {
-      devAssert(this.subscriptionResolvers_[id])();
-
-      delete this.subscriptionPromises_[id];
-    }
-  }
-
-  /**
-   * Waits for another element to finish animating.
-   * @param {string} id
-   * @return {!Promise<void>}
-   */
-  waitFor(id) {
-    if (!(id in this.subscriptionPromises_)) {
-      const deferred = new Deferred();
-      this.subscriptionPromises_[id] = deferred.promise;
-      this.subscriptionResolvers_[id] = deferred.resolve;
-    }
-    return this.subscriptionPromises_[id];
-  }
-}
diff --git a/extensions/amp-story/0.1/audio.js b/extensions/amp-story/0.1/audio.js
deleted file mode 100644
index ffb60d8bb38e9..0000000000000
--- a/extensions/amp-story/0.1/audio.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {assertHttpsUrl} from '../../../src/url';
-
-/**
- * @const {string}
- */
-const BACKGROUND_AUDIO_ELEMENT_CLASS_NAME = 'i-amphtml-story-background-audio';
-
-/**
- * Adds support for the background-audio property on the specified element.
- * @param {!Element} element The element to upgrade with support for background
- *     audio.
- * @return {?Element} audioEl
- */
-export function upgradeBackgroundAudio(element) {
-  if (!element.hasAttribute('background-audio')) {
-    return null;
-  }
-
-  const audioEl = element.ownerDocument.createElement('audio');
-  const audioSrc = assertHttpsUrl(
-    element.getAttribute('background-audio'),
-    element
-  );
-  audioEl.setAttribute('src', audioSrc);
-  audioEl.setAttribute('preload', 'auto');
-  audioEl.setAttribute('loop', '');
-  audioEl.setAttribute('autoplay', '');
-  audioEl.setAttribute('muted', '');
-  audioEl.muted = true;
-  audioEl.classList.add(BACKGROUND_AUDIO_ELEMENT_CLASS_NAME);
-  element.appendChild(audioEl);
-
-  return audioEl;
-}
diff --git a/extensions/amp-story/0.1/background.js b/extensions/amp-story/0.1/background.js
deleted file mode 100644
index 66ca93a3e13b3..0000000000000
--- a/extensions/amp-story/0.1/background.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {Services} from '../../../src/services';
-import {listenOncePromise} from '../../../src/event-helper';
-import {setStyle} from '../../../src/style';
-
-/** @const {number} */
-const SWAP_TIMEOUT_MS = 500;
-
-const BACKGROUND_CLASS = 'i-amphtml-story-background';
-
-const BACKGROUND_CONTAINER_CLASS = 'i-amphtml-story-background-container';
-
-const BACKGROUND_OVERLAY_CLASS = 'i-amphtml-story-background-overlay';
-
-/**
- * @param {?string} url
- * @return {!Promise}
- */
-function maybeLoadImage(url) {
-  if (!url) {
-    return Promise.resolve();
-  }
-  const img = new Image();
-  img.src = url;
-  return listenOncePromise(img, 'load');
-}
-
-/**
- * TODO(cvializ): Investigate pre-rendering blurred backgrounds to canvas to
- * possibly improve performance?
- */
-export class AmpStoryBackground {
-  /**
-   * @param {!Window} win
-   * @param {!Element} element
-   */
-  constructor(win, element) {
-    /* @private @const {!Element} */
-    this.element_ = element;
-
-    /* @private @const {!Window} */
-    this.win_ = win;
-
-    /* @private {number} */
-    this.count_ = 0;
-
-    /** @private @const */
-    this.container_ = this.element_.ownerDocument.createElement('div');
-
-    /** @private @const */
-    this.containerOverlay_ = this.element_.ownerDocument.createElement('div');
-
-    /** @private {!Element} */
-    this.hidden_ = this.createBackground_();
-
-    /** @private {!Element} */
-    this.active_ = this.createBackground_();
-
-    this.container_.classList.add(BACKGROUND_CONTAINER_CLASS);
-    this.containerOverlay_.classList.add(BACKGROUND_OVERLAY_CLASS);
-
-    this.container_.appendChild(this.hidden_);
-    this.container_.appendChild(this.active_);
-    this.container_.appendChild(this.containerOverlay_);
-  }
-
-  /**
-   * @return {!Element}
-   */
-  createBackground_() {
-    const bg = this.element_.ownerDocument.createElement('div');
-    bg.classList.add(BACKGROUND_CLASS);
-    return bg;
-  }
-
-  /**
-   * Attach the backgrounds to the document.
-   */
-  attach() {
-    this.element_.insertBefore(this.container_, this.element_.firstChild);
-  }
-
-  /**
-   * Update the background with new background image URL.
-   * @param {string} color
-   * @param {?string} url
-   * @param {boolean=} initial
-   */
-  setBackground(color, url, initial = false) {
-    const countAtAdd = ++this.count_;
-
-    const whenFresh = (promise, callback) =>
-      promise.then(() => {
-        if (this.count_ == countAtAdd) {
-          callback();
-        }
-      });
-
-    const imgLoad = maybeLoadImage(url);
-    const timeout = Services.timerFor(this.win_).promise(
-      initial ? 0 : SWAP_TIMEOUT_MS
-    );
-
-    const hidden = this.hidden_;
-
-    setStyle(hidden, 'background-image', 'none');
-
-    // Image will be swapped on load.
-    whenFresh(imgLoad, () => {
-      setStyle(hidden, 'background-image', url ? `url(${url})` : null);
-    });
-
-    // Color will always be swapped on timeout.
-    whenFresh(Promise.race([imgLoad, timeout]), () => {
-      setStyle(hidden, 'background-color', color);
-      this.rotateActiveBackground_();
-    });
-  }
-
-  /**
-   * Rotates the classes on page background to bring the new bacground in
-   * foreground.
-   * @private
-   */
-  rotateActiveBackground_() {
-    const newHidden = this.active_;
-    this.active_ = this.hidden_;
-    this.hidden_ = newHidden;
-    this.active_.classList.add('active');
-    this.hidden_.classList.remove('active');
-  }
-}
diff --git a/extensions/amp-story/0.1/default-media.js b/extensions/amp-story/0.1/default-media.js
deleted file mode 100644
index 9058594add949..0000000000000
--- a/extensions/amp-story/0.1/default-media.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-export const BLANK_AUDIO_SRC =
-  'data:audio/wav;base64,UklGRjIAAABXQVZFZm10IBA' +
-  'AAAABAAEAIlYAAESsAAACABAAZGF0YRAAAAAAAAAAAAAAAAAAAAAAAA==';
-
-export const BLANK_VIDEO_SRC =
-  'data:video/mp4;base64,AAAAHGZ0eXBNNFYgAAACAG' +
-  'lzb21pc28yYXZjMQAAAAhmcmVlAAAGF21kYXTeBAAAbGliZmFhYyAxLjI4AABCAJMgBDIARw' +
-  'AAArEGBf//rdxF6b3m2Ui3lizYINkj7u94MjY0IC0gY29yZSAxNDIgcjIgOTU2YzhkOCAtIE' +
-  'guMjY0L01QRUctNCBBVkMgY29kZWMgLSBDb3B5bGVmdCAyMDAzLTIwMTQgLSBodHRwOi8vd3' +
-  'd3LnZpZGVvbGFuLm9yZy94MjY0Lmh0bWwgLSBvcHRpb25zOiBjYWJhYz0wIHJlZj0zIGRlYm' +
-  'xvY2s9MTowOjAgYW5hbHlzZT0weDE6MHgxMTEgbWU9aGV4IHN1Ym1lPTcgcHN5PTEgcHN5X3' +
-  'JkPTEuMDA6MC4wMCBtaXhlZF9yZWY9MSBtZV9yYW5nZT0xNiBjaHJvbWFfbWU9MSB0cmVsbG' +
-  'lzPTEgOHg4ZGN0PTAgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0xIGNocm9tYV' +
-  '9xcF9vZmZzZXQ9LTIgdGhyZWFkcz02IGxvb2thaGVhZF90aHJlYWRzPTEgc2xpY2VkX3Rocm' +
-  'VhZHM9MCBucj0wIGRlY2ltYXRlPTEgaW50ZXJsYWNlZD0wIGJsdXJheV9jb21wYXQ9MCBjb2' +
-  '5zdHJhaW5lZF9pbnRyYT0wIGJmcmFtZXM9MCB3ZWlnaHRwPTAga2V5aW50PTI1MCBrZXlpbn' +
-  'RfbWluPTI1IHNjZW5lY3V0PTQwIGludHJhX3JlZnJlc2g9MCByY19sb29rYWhlYWQ9NDAgcm' +
-  'M9Y3JmIG1idHJlZT0xIGNyZj0yMy4wIHFjb21wPTAuNjAgcXBtaW49MCBxcG1heD02OSBxcH' +
-  'N0ZXA9NCB2YnZfbWF4cmF0ZT03NjggdmJ2X2J1ZnNpemU9MzAwMCBjcmZfbWF4PTAuMCBuYW' +
-  'xfaHJkPW5vbmUgZmlsbGVyPTAgaXBfcmF0aW89MS40MCBhcT0xOjEuMDAAgAAAAFZliIQL8m' +
-  'KAAKvMnJycnJycnJycnXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' +
-  'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXiEASZACGQAjgCEASZACGQAjgAAAAAdBmjgX4G' +
-  'SAIQBJkAIZACOAAAAAB0GaVAX4GSAhAEmQAhkAI4AhAEmQAhkAI4AAAAAGQZpgL8DJIQBJkA' +
-  'IZACOAIQBJkAIZACOAAAAABkGagC/AySEASZACGQAjgAAAAAZBmqAvwMkhAEmQAhkAI4AhAE' +
-  'mQAhkAI4AAAAAGQZrAL8DJIQBJkAIZACOAAAAABkGa4C/AySEASZACGQAjgCEASZACGQAjgA' +
-  'AAAAZBmwAvwMkhAEmQAhkAI4AAAAAGQZsgL8DJIQBJkAIZACOAIQBJkAIZACOAAAAABkGbQC' +
-  '/AySEASZACGQAjgCEASZACGQAjgAAAAAZBm2AvwMkhAEmQAhkAI4AAAAAGQZuAL8DJIQBJkA' +
-  'IZACOAIQBJkAIZACOAAAAABkGboC/AySEASZACGQAjgAAAAAZBm8AvwMkhAEmQAhkAI4AhAE' +
-  'mQAhkAI4AAAAAGQZvgL8DJIQBJkAIZACOAAAAABkGaAC/AySEASZACGQAjgCEASZACGQAjgA' +
-  'AAAAZBmiAvwMkhAEmQAhkAI4AhAEmQAhkAI4AAAAAGQZpAL8DJIQBJkAIZACOAAAAABkGaYC' +
-  '/AySEASZACGQAjgCEASZACGQAjgAAAAAZBmoAvwMkhAEmQAhkAI4AAAAAGQZqgL8DJIQBJkA' +
-  'IZACOAIQBJkAIZACOAAAAABkGawC/AySEASZACGQAjgAAAAAZBmuAvwMkhAEmQAhkAI4AhAE' +
-  'mQAhkAI4AAAAAGQZsAL8DJIQBJkAIZACOAAAAABkGbIC/AySEASZACGQAjgCEASZACGQAjgA' +
-  'AAAAZBm0AvwMkhAEmQAhkAI4AhAEmQAhkAI4AAAAAGQZtgL8DJIQBJkAIZACOAAAAABkGbgC' +
-  'vAySEASZACGQAjgCEASZACGQAjgAAAAAZBm6AnwMkhAEmQAhkAI4AhAEmQAhkAI4AhAEmQAh' +
-  'kAI4AhAEmQAhkAI4AAAAhubW9vdgAAAGxtdmhkAAAAAAAAAAAAAAAAAAAD6AAABDcAAQAAAQ' +
-  'AAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAA' +
-  'AAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAzB0cmFrAAAAXHRraGQAAAADAAAAAAAAAAAAAAABAA' +
-  'AAAAAAA+kAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAA' +
-  'BAAAAAALAAAACQAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAAPpAAAAAAABAAAAAAKobW' +
-  'RpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAB1MAAAdU5VxAAAAAAALWhkbHIAAAAAAAAAAHZpZG' +
-  'UAAAAAAAAAAAAAAABWaWRlb0hhbmRsZXIAAAACU21pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAA' +
-  'AAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAhNzdGJsAAAAr3N0c2QAAA' +
-  'AAAAAAAQAAAJ9hdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAALAAkABIAAAASAAAAAAAAA' +
-  'ABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAALWF2Y0MBQsAN/+EAFW' +
-  'dCwA3ZAsTsBEAAAPpAADqYA8UKkgEABWjLg8sgAAAAHHV1aWRraEDyXyRPxbo5pRvPAyPzAA' +
-  'AAAAAAABhzdHRzAAAAAAAAAAEAAAAeAAAD6QAAABRzdHNzAAAAAAAAAAEAAAABAAAAHHN0c2' +
-  'MAAAAAAAAAAQAAAAEAAAABAAAAAQAAAIxzdHN6AAAAAAAAAAAAAAAeAAADDwAAAAsAAAALAA' +
-  'AACgAAAAoAAAAKAAAACgAAAAoAAAAKAAAACgAAAAoAAAAKAAAACgAAAAoAAAAKAAAACgAAAA' +
-  'oAAAAKAAAACgAAAAoAAAAKAAAACgAAAAoAAAAKAAAACgAAAAoAAAAKAAAACgAAAAoAAAAKAA' +
-  'AAiHN0Y28AAAAAAAAAHgAAAEYAAANnAAADewAAA5gAAAO0AAADxwAAA+MAAAP2AAAEEgAABC' +
-  'UAAARBAAAEXQAABHAAAASMAAAEnwAABLsAAATOAAAE6gAABQYAAAUZAAAFNQAABUgAAAVkAA' +
-  'AFdwAABZMAAAWmAAAFwgAABd4AAAXxAAAGDQAABGh0cmFrAAAAXHRraGQAAAADAAAAAAAAAA' +
-  'AAAAACAAAAAAAABDcAAAAAAAAAAAAAAAEBAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAA' +
-  'AAAAAAAABAAAAAAAAAAAAAAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAAQkAAADcAABAA' +
-  'AAAAPgbWRpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAC7gAAAykBVxAAAAAAALWhkbHIAAAAAAA' +
-  'AAAHNvdW4AAAAAAAAAAAAAAABTb3VuZEhhbmRsZXIAAAADi21pbmYAAAAQc21oZAAAAAAAAA' +
-  'AAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAADT3N0YmwAAABnc3RzZA' +
-  'AAAAAAAAABAAAAV21wNGEAAAAAAAAAAQAAAAAAAAAAAAIAEAAAAAC7gAAAAAAAM2VzZHMAAA' +
-  'AAA4CAgCIAAgAEgICAFEAVBbjYAAu4AAAADcoFgICAAhGQBoCAgAECAAAAIHN0dHMAAAAAAA' +
-  'AAAgAAADIAAAQAAAAAAQAAAkAAAAFUc3RzYwAAAAAAAAAbAAAAAQAAAAEAAAABAAAAAgAAAA' +
-  'IAAAABAAAAAwAAAAEAAAABAAAABAAAAAIAAAABAAAABgAAAAEAAAABAAAABwAAAAIAAAABAA' +
-  'AACAAAAAEAAAABAAAACQAAAAIAAAABAAAACgAAAAEAAAABAAAACwAAAAIAAAABAAAADQAAAA' +
-  'EAAAABAAAADgAAAAIAAAABAAAADwAAAAEAAAABAAAAEAAAAAIAAAABAAAAEQAAAAEAAAABAA' +
-  'AAEgAAAAIAAAABAAAAFAAAAAEAAAABAAAAFQAAAAIAAAABAAAAFgAAAAEAAAABAAAAFwAAAA' +
-  'IAAAABAAAAGAAAAAEAAAABAAAAGQAAAAIAAAABAAAAGgAAAAEAAAABAAAAGwAAAAIAAAABAA' +
-  'AAHQAAAAEAAAABAAAAHgAAAAIAAAABAAAAHwAAAAQAAAABAAAA4HN0c3oAAAAAAAAAAAAAAD' +
-  'MAAAAaAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAA' +
-  'AACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAA' +
-  'kAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAA' +
-  'AACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAACMc3RjbwAAAA' +
-  'AAAAAfAAAALAAAA1UAAANyAAADhgAAA6IAAAO+AAAD0QAAA+0AAAQAAAAEHAAABC8AAARLAA' +
-  'AEZwAABHoAAASWAAAEqQAABMUAAATYAAAE9AAABRAAAAUjAAAFPwAABVIAAAVuAAAFgQAABZ' +
-  '0AAAWwAAAFzAAABegAAAX7AAAGFwAAAGJ1ZHRhAAAAWm1ldGEAAAAAAAAAIWhkbHIAAAAAAA' +
-  'AAAG1kaXJhcHBsAAAAAAAAAAAAAAAALWlsc3QAAAAlqXRvbwAAAB1kYXRhAAAAAQAAAABMYX' +
-  'ZmNTUuMzMuMTAw';
diff --git a/extensions/amp-story/0.1/development-ui.js b/extensions/amp-story/0.1/development-ui.js
deleted file mode 100644
index 5d995411be8b6..0000000000000
--- a/extensions/amp-story/0.1/development-ui.js
+++ /dev/null
@@ -1,326 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {LogLevel, dev} from '../../../src/log';
-import {Services} from '../../../src/services';
-import {isArray} from '../../../src/types';
-import {removeChildren} from '../../../src/dom';
-import {toggle} from '../../../src/style';
-
-/**
- * @param {!../../../src/service/vsync-impl.Vsync} vsync
- * @param {!Element} el
- * @param {boolean} isHidden
- */
-function toggleHiddenAttribute(vsync, el, isHidden) {
-  vsync.mutate(() => {
-    toggle(el, !isHidden);
-  });
-}
-
-/**
- * @param {!Window} win
- * @param {string|!Array<string>} classNameOrList
- * @param {function(Event)} handler
- * @return {!Element}
- */
-function createButton(win, classNameOrList, handler) {
-  const button = win.document.createElement('div');
-  button.setAttribute('role', 'button');
-
-  if (isArray(classNameOrList)) {
-    classNameOrList.forEach((className) => button.classList.add(className));
-  } else {
-    button.classList.add(/** @type {string} */ (classNameOrList));
-  }
-  button.classList.add('i-amphtml-story-button');
-  button.addEventListener('click', handler);
-  return button;
-}
-
-/**
- * Development mode logs buttons.
- */
-export class DevelopmentModeLogButtonSet {
-  /**
-   * @param {!Window} win
-   */
-  constructor(win) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private {?Element} */
-    this.root_ = null;
-
-    /** @private {?Element} */
-    this.errorButton_ = null;
-
-    /** @private {?Element} */
-    this.warningButton_ = null;
-
-    /** @private {?Element} */
-    this.successButton_ = null;
-  }
-
-  /**
-   * @param {!Window} win
-   * @return {!DevelopmentModeLogButtonSet}
-   */
-  static create(win) {
-    return new DevelopmentModeLogButtonSet(win);
-  }
-
-  /**
-   * Builds the developer log button set element.
-   * @param {function()} logButtonActionFn A callback function to be invoked when
-   *     the log buttons are clicked.
-   * @return {?Element}
-   */
-  build(logButtonActionFn) {
-    this.errorButton_ = createButton(
-      this.win_,
-      ['i-amphtml-story-error-button', 'i-amphtml-story-dev-logs-button'],
-      () => logButtonActionFn()
-    );
-
-    this.warningButton_ = createButton(
-      this.win_,
-      ['i-amphtml-story-warning-button', 'i-amphtml-story-dev-logs-button'],
-      () => logButtonActionFn()
-    );
-
-    this.successButton_ = createButton(
-      this.win_,
-      ['i-amphtml-story-success-button', 'i-amphtml-story-dev-logs-button'],
-      () => logButtonActionFn()
-    );
-
-    this.root_ = this.win_.document.createElement('div');
-    this.root_.appendChild(this.errorButton_);
-    this.root_.appendChild(this.warningButton_);
-    this.root_.appendChild(this.successButton_);
-
-    return this.root_;
-  }
-
-  /**
-   * Gets the button associated to a given log entry.
-   * @param {!./logging.AmpStoryLogEntryDef} logEntry The log entry for which
-   *     the associated button shouldbe retrieved.
-   * @return {?Element} The button associated to the specified log entry, if one
-   *     exists.
-   * @private
-   */
-  getButtonForLogEntry_(logEntry) {
-    if (logEntry.conforms) {
-      return this.successButton_;
-    }
-
-    switch (logEntry.level) {
-      case LogLevel.ERROR:
-        return this.errorButton_;
-      case LogLevel.WARN:
-        return this.warningButton_;
-      default:
-        return null;
-    }
-  }
-
-  /**
-   * Logs an individual entry into the developer log.
-   * @param {!./logging.AmpStoryLogEntryDef} logEntry The entry to log.
-   */
-  log(logEntry) {
-    const button = this.getButtonForLogEntry_(logEntry);
-    if (!button) {
-      return;
-    }
-
-    const oldCount = parseInt(button.getAttribute('data-count') || 0, 10);
-    button.setAttribute('data-count', oldCount + 1);
-  }
-
-  /**
-   * Clears any error state held by the buttons.
-   */
-  clear() {
-    this.errorButton_.setAttribute('data-count', 0);
-    this.warningButton_.setAttribute('data-count', 0);
-    this.successButton_.setAttribute('data-count', 0);
-  }
-}
-
-/**
- * Development mode log for <amp-story>.
- */
-export class DevelopmentModeLog {
-  /**
-   * @param {!Window} win
-   */
-  constructor(win) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private {?Element} */
-    this.root_ = null;
-
-    /** @private {?Element} */
-    this.entriesEl_ = null;
-
-    /** @private {?Element} */
-    this.contextStringEl_ = null;
-  }
-
-  /**
-   * @param {!Window} win
-   * @return {!DevelopmentModeLog}
-   */
-  static create(win) {
-    return new DevelopmentModeLog(win);
-  }
-
-  /**
-   * Builds the developer log element.
-   * @return {?Element}
-   */
-  build() {
-    this.contextStringEl_ = this.win_.document.createElement('span');
-    this.contextStringEl_.classList.add(
-      'i-amphtml-story-developer-log-context'
-    );
-    const titleEl = this.win_.document.createElement('div');
-    titleEl.textContent = 'Developer logs for page ';
-    titleEl.appendChild(this.contextStringEl_);
-
-    const closeDeveloperLogEl = createButton(
-      this.win_,
-      'i-amphtml-story-developer-log-close',
-      () => this.hide()
-    );
-
-    const headerEl = this.win_.document.createElement('div');
-    headerEl.classList.add('i-amphtml-story-developer-log-header');
-    headerEl.appendChild(titleEl);
-    headerEl.appendChild(closeDeveloperLogEl);
-
-    this.entriesEl_ = this.win_.document.createElement('ul');
-    this.entriesEl_.classList.add('i-amphtml-story-developer-log-entries');
-
-    this.root_ = this.win_.document.createElement('div');
-    this.root_.classList.add('i-amphtml-story-developer-log');
-    toggle(this.root_, false);
-    this.root_.appendChild(headerEl);
-    this.root_.appendChild(this.entriesEl_);
-
-    this.clear();
-    return this.root_;
-  }
-
-  /**
-   * @param {!LogLevel} logLevel
-   * @return {?string} The CSS class to be applied to the log entry, given the
-   *     specified log level, or null if no class should be added.
-   * @private
-   */
-  getCssLogLevelClass_(logLevel) {
-    switch (logLevel) {
-      case LogLevel.WARN:
-        return 'i-amphtml-story-developer-log-entry-warning';
-      case LogLevel.ERROR:
-        return 'i-amphtml-story-developer-log-entry-error';
-      default:
-        return null;
-    }
-  }
-
-  /**
-   * @param {boolean} conforms Whether the log entry is for an element that
-   *     conforms to a best practice.
-   * @return {?string} The CSS class to be applied to the log entry, given the
-   *     element's conformance to a best practice, or null if no class should be
-   *     added.
-   * @private
-   */
-  getCssConformanceClass_(conforms) {
-    if (conforms) {
-      return 'i-amphtml-story-developer-log-entry-success';
-    }
-
-    return null;
-  }
-
-  /**
-   * @param {!./logging.AmpStoryLogEntryDef} logEntry The entry to be logged.
-   */
-  log(logEntry) {
-    const logLevelClass = this.getCssLogLevelClass_(logEntry.level);
-    const conformanceClass = this.getCssConformanceClass_(logEntry.conforms);
-
-    const logEntryUi = this.win_.document.createElement('li');
-    logEntryUi.classList.add('i-amphtml-story-developer-log-entry');
-
-    if (logLevelClass) {
-      logEntryUi.classList.add(logLevelClass);
-    }
-
-    if (conformanceClass) {
-      logEntryUi.classList.add(conformanceClass);
-    }
-
-    logEntryUi.textContent = logEntry.message;
-    this.entriesEl_.appendChild(logEntryUi);
-  }
-
-  /**
-   * Clears all entries from the developer logs.
-   */
-  clear() {
-    Services.vsyncFor(this.win_).mutate(() => {
-      removeChildren(dev().assertElement(this.entriesEl_));
-    });
-  }
-
-  /**
-   * Sets the string providing context for the developer logs window.  This is
-   * often the name or ID of the element that all logs are for (e.g. the page).
-   * @param {string} contextString
-   */
-  setContextString(contextString) {
-    this.contextStringEl_.textContent = contextString;
-  }
-
-  /**
-   * Toggles the visibility of the developer log.
-   */
-  toggle() {
-    const newHiddenState = !this.root_.hasAttribute('hidden');
-    toggleHiddenAttribute(
-      Services.vsyncFor(this.win_),
-      dev().assertElement(this.root_),
-      newHiddenState
-    );
-  }
-
-  /**
-   * Hides the developer log in the UI.
-   */
-  hide() {
-    toggleHiddenAttribute(
-      Services.vsyncFor(this.win_),
-      dev().assertElement(this.root_),
-      /* isHidden */ true
-    );
-  }
-}
diff --git a/extensions/amp-story/0.1/embed-mode.js b/extensions/amp-story/0.1/embed-mode.js
deleted file mode 100644
index 4a481cc306a14..0000000000000
--- a/extensions/amp-story/0.1/embed-mode.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {isEnumValue} from '../../../src/types';
-import {parseQueryString} from '../../../src/url';
-
-/**
- * Embed mode for AMP story.  See ../embed-modes.md for details.
- * @enum {number}
- */
-export const EmbedMode = {
-  /**
-   * Default mode.
-   */
-  NOT_EMBEDDED: 0,
-
-  /**
-   * TBD embed mode.
-   *
-   * This differs from the NOT_EMBEDDED embed mode in the following ways:
-   * - Hides bookend
-   * - Hides all system layer buttons
-   * - Disables swipe-based user education
-   * - Disallows ads
-   * - Unmutes audio in the story by default
-   */
-  NAME_TBD: 1,
-
-  /**
-   * This mode is intended for embedders that natively handle sharing the story,
-   * thereby rendering the sharing functionality within the amp-story extension
-   * redundant.
-   *
-   * This differs from the NOT_EMBEDDED embed mode in the following ways:
-   * - Removes "share" pill from desktop UI
-   * - Removes "share" icon from mobile UI
-   * - Removes sharing section from bookend
-   * - TODO(#14923): Removes the link information from embedded UIs.
-   */
-  NO_SHARING: 2,
-};
-
-/**
- * Parameter to retrieve the embed mode from the location hash.
- * @type {string}
- */
-export const EmbedModeParam = 'embedMode';
-
-/**
- * @param {string} str
- * @return {!EmbedMode}
- * @package
- */
-export function parseEmbedMode(str) {
-  const params = parseQueryString(str);
-  const unsanitizedEmbedMode = params[EmbedModeParam];
-  const embedModeIndex = parseInt(unsanitizedEmbedMode, 10);
-
-  return isEnumValue(EmbedMode, embedModeIndex)
-    ? /** @type {!EmbedMode} */ (embedModeIndex)
-    : EmbedMode.NOT_EMBEDDED;
-}
diff --git a/extensions/amp-story/0.1/events.js b/extensions/amp-story/0.1/events.js
deleted file mode 100644
index 1dcfd9a0a35fa..0000000000000
--- a/extensions/amp-story/0.1/events.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {createCustomEvent} from '../../../src/event-helper';
-
-/** @const {!Object<string, string>} */
-export const EventType = {
-  // Triggered when the user mutes the story
-  MUTE: 'ampstory:mute',
-
-  // Triggered when the user unmutes the story
-  UNMUTE: 'ampstory:unmute',
-
-  // Triggered when the story should switch to a specified page
-  SWITCH_PAGE: 'ampstory:switchpage',
-
-  // Triggered when the story should switch to the previous page
-  PREVIOUS_PAGE: 'ampstory:previouspage',
-
-  // Triggered when the story should switch to the next page
-  NEXT_PAGE: 'ampstory:nextpage',
-
-  // Triggered when the story should navigate after a tap on active page.
-  TAP_NAVIGATION: 'ampstory:tapnavigation',
-
-  // Triggered when a page updates its progress
-  PAGE_PROGRESS: 'ampstory:pageprogress',
-
-  // Triggered when the story should be replayed
-  REPLAY: 'ampstory:replay',
-
-  // DEVELOPMENT MODE ONLY: Triggered when a story page has log entries (e.g.
-  // warnings or errors).
-  DEV_LOG_ENTRIES_AVAILABLE: 'ampstory:devlogentriesavailable',
-
-  // Triggered when user clicks on left 25% of the first page
-  SHOW_NO_PREVIOUS_PAGE_HELP: 'ampstory:shownopreviouspagehelp',
-
-  // Triggered when a story has loaded at least its initial set of pages.
-  STORY_LOADED: 'ampstory:load',
-
-  // Triggered when a page has loaded at least one frame of all of its media.
-  PAGE_LOADED: 'ampstory:pageload',
-};
-
-/**
- * @param {!EventTarget} source
- * @param {string} eventName
- * @param {boolean=} opt_bubbles
- */
-export function dispatch(source, eventName, opt_bubbles) {
-  const event = new Event(eventName, {bubbles: !!opt_bubbles});
-  if (event.initEvent) {
-    event.initEvent(
-      eventName,
-      /* bubbles */ !!opt_bubbles,
-      /* cancelable */ false
-    );
-  }
-  source.dispatchEvent(event);
-}
-
-/**
- * @param {!Window} win
- * @param {!EventTarget} source
- * @param {string} eventName
- * @param {!JsonObject} payload
- * @param {!CustomEventInit=} opt_eventInit
- */
-export function dispatchCustom(win, source, eventName, payload, opt_eventInit) {
-  const event = createCustomEvent(win, eventName, payload, opt_eventInit);
-  source.dispatchEvent(event);
-}
diff --git a/extensions/amp-story/0.1/jsonld.js b/extensions/amp-story/0.1/jsonld.js
deleted file mode 100644
index 99e43b468eb65..0000000000000
--- a/extensions/amp-story/0.1/jsonld.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {isJsonLdScriptTag} from '../../../src/dom';
-import {tryParseJson} from '../../../src/json';
-import {user} from '../../../src/log';
-
-const TAG = 'getJsonLd';
-
-/**
- * @param {!Node} root
- * @return {?JsonObject}
- */
-export function getJsonLd(root) {
-  const scriptTag = root.querySelector('script[type="application/ld+json"]');
-
-  if (!scriptTag || !isJsonLdScriptTag(scriptTag)) {
-    return null;
-  }
-
-  return (
-    tryParseJson(scriptTag.textContent, (e) => {
-      user().error(TAG, 'Failed to parse ld+json. Is it valid JSON?', e);
-    }) || null
-  );
-}
diff --git a/extensions/amp-story/0.1/loading-spinner.js b/extensions/amp-story/0.1/loading-spinner.js
deleted file mode 100644
index 0736e19449609..0000000000000
--- a/extensions/amp-story/0.1/loading-spinner.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {dev} from '../../../src/log';
-import {dict} from './../../../src/utils/object';
-import {renderAsElement} from './simple-template';
-
-/** @const {string} */
-const SPINNER_ACTIVE_ATTRIBUTE = 'active';
-
-/** @private @const {!./simple-template.ElementDef} */
-const SPINNER = {
-  tag: 'div',
-  attrs: dict({
-    'class': 'i-amphtml-story-spinner',
-    'aria-hidden': 'true',
-    'aria-label': 'Loading video',
-  }),
-  children: [
-    {
-      tag: 'div',
-      attrs: dict({
-        'class': 'i-amphtml-story-spinner-container',
-      }),
-      children: [
-        {
-          tag: 'div',
-          attrs: dict({
-            'class': 'i-amphtml-story-spinner-layer',
-          }),
-          children: [
-            {
-              tag: 'div',
-              attrs: dict({
-                'class': 'i-amphtml-story-spinner-circle-clipper left',
-              }),
-            },
-            {
-              tag: 'div',
-              attrs: dict({
-                'class': 'i-amphtml-story-spinner-circle-clipper right',
-              }),
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-/**
- * Loading spinner UI element.
- */
-export class LoadingSpinner {
-  /**
-   * @param {!Document} doc
-   */
-  constructor(doc) {
-    /** @private @const {!Document} */
-    this.doc_ = doc;
-
-    /** @public {?Element} */
-    this.root_ = null;
-
-    /** @private {boolean} */
-    this.isActive_ = false;
-  }
-
-  /**
-   * @return {!Element}
-   */
-  build() {
-    if (this.root_) {
-      return this.root_;
-    }
-
-    this.root_ = renderAsElement(this.doc_, SPINNER);
-
-    return this.getRoot();
-  }
-
-  /** @return {!Element} */
-  getRoot() {
-    return dev().assertElement(this.root_);
-  }
-
-  /** @param {boolean} isActive */
-  toggle(isActive) {
-    if (isActive === this.isActive_) {
-      return;
-    }
-    if (isActive) {
-      this.root_.setAttribute(SPINNER_ACTIVE_ATTRIBUTE, '');
-      this.root_.setAttribute('aria-hidden', 'false');
-    } else {
-      this.root_.removeAttribute(SPINNER_ACTIVE_ATTRIBUTE);
-      this.root_.setAttribute('aria-hidden', 'true');
-    }
-    this.isActive_ = isActive;
-  }
-}
diff --git a/extensions/amp-story/0.1/logging.js b/extensions/amp-story/0.1/logging.js
deleted file mode 100644
index e99c60699dde7..0000000000000
--- a/extensions/amp-story/0.1/logging.js
+++ /dev/null
@@ -1,248 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {LogLevel, devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {scopedQuerySelectorAll} from '../../../src/dom';
-import {tryResolve} from '../../../src/utils/promise';
-
-/** @typedef {function(!Element): (boolean|!Promise<boolean>)} */
-let ElementPredicate_0_1_Def; // eslint-disable-line google-camelcase/google-camelcase
-
-/**
- * A log type is an abstract rule or best practice that should be followed when
- * constructing a story.  This is internal to this file, which handles finding
- * specific instances of these log types, and returning them as log entries.
- *
- * message: (required) The message shown to developers in development mode if
- *     the best practice is not followed.
- * level: (required) The log level at which this entry should be logged.
- * moreInfo: (optional) A URL to a page containing additional documentation on
- *     the best practice.
- * selector: (optional) A selector to be queried on the currently-active page,
- *     and whose results will be subject to the best practice (given that they
- *     also match the precondition).  If unspecified, the amp-story-page itself
- *     is assumed to be subject to the best practice.
- * precondition: (optional) A predicate that takes an element and returns true
- *     if the specified element should be subject to the best practice.  If
- *     unspecified, all elements that match the selector are subject to the best
- *     practice.
- * predicate: (optional) A predicate that takes an element and returns true if
- *     the element follows the best practice, or false otherwise.  If
- *     unspecified, all elements are assumed not to follow the best practice.
- *
- * @typedef {{
- *   message: string,
- *   level: !LogLevel,
- *   moreInfo: (string|undefined),
- *   selector: (string|undefined),
- *   precondition: (!ElementPredicate_0_1_Def|undefined),
- *   predicate: (!ElementPredicate_0_1_Def|undefined),
- * }}
- */
-let AmpStoryLogType_0_1_Def; // eslint-disable-line google-camelcase/google-camelcase
-
-/**
- * A log entry is a more concrete version of a rule or best practice; it refers
- * to whether a specific element on a specific page of a specific story conforms
- * to a given best practice.
- *
- * @typedef {{
- *   element: !Element,
- *   rootElement: !Element,
- *   message: string,
- *   level: !LogLevel,
- *   conforms: boolean,
- *   moreInfo: (string|undefined),
- * }}
- */
-export let AmpStoryLogEntryDef;
-
-/** @private @const {string} */
-const AMPPROJECT_DOCS = 'https://www.ampproject.org/docs';
-
-/**
- * @param  {!HTMLMediaElement} el
- * @return {!Promise<Image>}
- */
-function getPosterFromVideo(el) {
-  return new Promise((resolve, reject) => {
-    const poster = new Image();
-    poster.onload = () => resolve(poster);
-    poster.onerror = reject;
-    poster.src = el.getAttribute('poster');
-  });
-}
-
-/** @enum {!AmpStoryLogType_0_1_Def} */
-const LogType = {
-  /** Errors */
-  VIDEOS_POSTER_SPECIFIED: {
-    message: 'Videos should specify a poster image.',
-    moreInfo: AMPPROJECT_DOCS + '/reference/components/amp-video#poster',
-    selector: 'video:not([poster])',
-    level: LogLevel.ERROR,
-  },
-
-  /** Warnings */
-  IMAGES_MAX_720P_OR_SRCSET: {
-    message:
-      'Images should not be larger than 720p.  If you wish to use' +
-      ' images that are larger than 720p, you should specify a srcset.',
-    moreInfo: AMPPROJECT_DOCS + '/guides/responsive/art_direction#srcset',
-    selector: 'img:not([srcset])',
-    predicate: (el) => el.naturalWidth <= 720 && el.naturalHeight <= 1280,
-    level: LogLevel.WARN,
-  },
-
-  IMAGES_PORTRAIT: {
-    message: 'Full-bleed images should be in portrait orientation.',
-    selector: 'amp-story-grid-layer[template="fill"] > amp-img > img',
-    predicate: (el) => el.naturalWidth < el.naturalHeight,
-    level: LogLevel.WARN,
-  },
-
-  VIDEOS_MAX_720P: {
-    message: 'Videos should not be larger than 720p.',
-    selector: 'video',
-    predicate: (el) => el.videoWidth <= 720 && el.videoHeight <= 1280,
-    level: LogLevel.WARN,
-  },
-
-  VIDEOS_PORTRAIT: {
-    message: 'Full-bleed videos should be in portrait orientation.',
-    selector: 'amp-story-grid-layer[template="fill"] > amp-video > video',
-    predicate: (el) => el.videoWidth < el.videoHeight,
-    level: LogLevel.WARN,
-  },
-
-  VIDEO_POSTER_MAX_720P: {
-    message: 'Video poster images should not be larger than 720p.',
-    selector: 'video[poster]',
-    predicate: (el) =>
-      getPosterFromVideo(el).then((poster) => {
-        return poster.naturalWidth <= 720 && poster.naturalHeight <= 1280;
-      }),
-    level: LogLevel.WARN,
-  },
-
-  VIDEO_POSTER_POTRAIT: {
-    message:
-      'Poster images for full-bleed videos should be in portrait ' +
-      'orientation.',
-    selector:
-      'amp-story-grid-layer[template="fill"] > amp-video > video[poster]',
-    predicate: (el) =>
-      getPosterFromVideo(el).then(
-        (poster) => poster.naturalWidth < poster.naturalHeight
-      ),
-    level: LogLevel.WARN,
-  },
-};
-
-/**
- * Gets the log type associated with the specified key.
- * @param {string} logTypeKey
- * @return {!AmpStoryLogType_0_1_Def}
- */
-function getLogType(logTypeKey) {
-  const logType = LogType[logTypeKey];
-  devAssert(logType, `There is no log type "${logTypeKey}".`);
-  devAssert(
-    logType.message,
-    `Log type "${logTypeKey}" has no associated message.`
-  );
-  devAssert(
-    logType.level,
-    `Log type "${logTypeKey}" has no associated log level.`
-  );
-
-  return logType;
-}
-
-/**
- * @param {!Element} rootElement
- * @param {!AmpStoryLogType_0_1_Def} logType
- * @param {!Element} element
- * @return {!Promise<!AmpStoryLogEntryDef>}
- */
-function getLogEntry(rootElement, logType, element) {
-  const predicate = logType.predicate || ((unusedEl) => false);
-
-  return tryResolve(() => predicate(element)).then((conforms) => {
-    return new Promise((resolve) => {
-      resolve(
-        dict({
-          'rootElement': rootElement,
-          'element': element,
-          'conforms': conforms,
-          'level': logType.level,
-          'message': logType.message,
-          'moreInfo': logType.moreInfo,
-        })
-      );
-    });
-  });
-}
-
-/**
- * @param {!Element} rootElement
- * @param {!AmpStoryLogType_0_1_Def} logType
- * @return {!Array<!Promise<!AmpStoryLogEntryDef>>}
- */
-function getLogEntriesForType(rootElement, logType) {
-  const precondition = logType.precondition || ((unusedEl) => true);
-
-  const elements = logType.selector
-    ? [].slice.call(scopedQuerySelectorAll(rootElement, logType.selector))
-    : [rootElement];
-
-  return elements
-    .filter(precondition)
-    .map(getLogEntry.bind(/** thisArg */ null, rootElement, logType));
-}
-
-/**
- * @param {!AmpStoryLogEntryDef} logEntryA
- * @param {!AmpStoryLogEntryDef} logEntryB
- * @return {number}
- */
-function logEntryCompareFn(logEntryA, logEntryB) {
-  if (logEntryA.conforms == logEntryB.conforms) {
-    // For entries within that are all conformant or all non-conformant, sort by
-    // log level, with most severe entries first and least severe entries last.
-    return logEntryA.level <= logEntryB.level ? -1 : 1;
-  } else {
-    // false < true, so non-conformant issues go before conformant ones.
-    return logEntryA.conforms < logEntryB.conforms ? -1 : 1;
-  }
-}
-
-/**
- * Gets a promise which yields a list of log entries for the specified element.
- * @param {!Element} rootElement
- * @return {!Promise<!Array<!AmpStoryLogEntryDef>>}
- */
-export function getLogEntries(rootElement) {
-  const logEntryPromises = Object.keys(LogType).reduce((entries, key) => {
-    const logType = getLogType(key);
-    const newEntries = getLogEntriesForType(rootElement, logType);
-    return entries.concat(newEntries);
-  }, []);
-
-  return Promise.all(logEntryPromises).then((logEntries) => {
-    return logEntries.sort(logEntryCompareFn);
-  });
-}
diff --git a/extensions/amp-story/0.1/media-pool.js b/extensions/amp-story/0.1/media-pool.js
deleted file mode 100644
index 3910567066c73..0000000000000
--- a/extensions/amp-story/0.1/media-pool.js
+++ /dev/null
@@ -1,913 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {BLANK_AUDIO_SRC, BLANK_VIDEO_SRC} from './default-media';
-import {
-  BlessTask,
-  ELEMENT_BLESSED_PROPERTY_NAME,
-  LoadTask,
-  MuteTask,
-  PauseTask,
-  PlayTask,
-  RewindTask,
-  SwapIntoDomTask,
-  SwapOutOfDomTask,
-  UnmuteTask,
-  UpdateSourcesTask,
-} from './media-tasks';
-import {Services} from '../../../src/services';
-import {Sources} from './sources';
-import {ampMediaElementFor} from './utils';
-import {dev, devAssert} from '../../../src/log';
-import {findIndex} from '../../../src/utils/array';
-import {isConnectedNode} from '../../../src/dom';
-import {toWin} from '../../../src/types';
-
-/** @const @enum {string} */
-export const MediaType = {
-  UNSUPPORTED: 'unsupported',
-  AUDIO: 'audio',
-  VIDEO: 'video',
-};
-
-/**
- * Represents the distance of an element from the current place in the document.
- * @typedef {function(!HTMLMediaElement): number}
- */
-export let ElementDistanceFnDef;
-
-/**
- * Represents a task to be executed on a media element.
- * @typedef {function(!HTMLMediaElement, *): !Promise}
- */
-let ElementTask_0_1_Def; // eslint-disable-line google-camelcase/google-camelcase
-
-/**
- * @const {string}
- */
-const DOM_MEDIA_ELEMENT_ID_PREFIX = 'i-amphtml-media-';
-
-/**
- * @const {string}
- */
-const POOL_MEDIA_ELEMENT_PROPERTY_NAME = '__AMP_MEDIA_POOL_ID__';
-
-/**
- * @const {string}
- */
-const ELEMENT_TASK_QUEUE_PROPERTY_NAME = '__AMP_MEDIA_ELEMENT_TASKS__';
-
-/**
- * The name for a string attribute that represents the ID of a media element
- * that the element containing this attribute replaced.
- * @const {string}
- */
-export const REPLACED_MEDIA_PROPERTY_NAME = 'replaced-media';
-
-/**
- * @type {!Object<string, !MediaPool>}
- */
-const instances = {};
-
-/**
- * @type {number}
- */
-let nextInstanceId = 0;
-
-let elId = 0;
-
-/**
- * Media pool class, providing an optimized and cross browser interface to
- * handle HTMLMediaElements.
- */
-export class MediaPool {
-  /**
-   * @param {!Window} win The window object.
-   * @param {!Object<!MediaType, number>} maxCounts The maximum amount of each
-   *     media element that can be allocated by the pool.
-   * @param {!ElementDistanceFnDef} distanceFn A function that, given an
-   *     element, returns the distance of that element from the current position
-   *     in the document.  The definition of "distance" can be implementation-
-   *     dependant, as long as it is consistent between invocations.
-   */
-  constructor(win, maxCounts, distanceFn) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private @const {!../../../src/service/timer-impl.Timer} */
-    this.timer_ = Services.timerFor(win);
-
-    /**
-     * The function used to retrieve the distance between an element and the
-     * current position in the document.
-     * @private @const {!ElementDistanceFnDef}
-     */
-    this.distanceFn_ = distanceFn;
-
-    /**
-     * Holds all of the media elements that have been allocated.
-     * @const {!Object<!MediaType, !Array<!HTMLMediaElement>>}
-     * @visibleForTesting
-     */
-    this.allocated = {};
-
-    /**
-     * Holds all of the media elements that have not been allocated.
-     * @const {!Object<!MediaType, !Array<!HTMLMediaElement>>}
-     * @visibleForTesting
-     */
-    this.unallocated = {};
-
-    /**
-     * Maps a media element's ID to the object containing its sources.
-     * @private @const {!Object<string, !Sources>}
-     */
-    this.sources_ = {};
-
-    /**
-     * Maps a media element's ID to the element.  This is necessary, as elements
-     * are kept in memory when they are swapped out of the DOM.
-     * @private @const {!Object<string, !HTMLMediaElement>}
-     */
-    this.domMediaEls_ = {};
-
-    /**
-     * Counter used to produce unique IDs for media elements.
-     * @private {number}
-     */
-    this.idCounter_ = 0;
-
-    /**
-     * Whether the media elements in this MediaPool instance have been "blessed"
-     * for unmuted playback without user gesture.
-     * @private {boolean}
-     */
-    this.blessed_ = false;
-
-    /** @const {!Object<string, (function(): !HTMLMediaElement)>} */
-    this.mediaFactory_ = {
-      [MediaType.AUDIO]: () => {
-        const audioEl = this.win_.document.createElement('audio');
-        audioEl.setAttribute('muted', '');
-        audioEl.muted = true;
-        audioEl.classList.add('i-amphtml-pool-media');
-        audioEl.classList.add('i-amphtml-pool-audio');
-        return audioEl;
-      },
-      [MediaType.VIDEO]: () => {
-        const videoEl = this.win_.document.createElement('video');
-        videoEl.setAttribute('muted', '');
-        videoEl.muted = true;
-        videoEl.setAttribute('playsinline', '');
-        videoEl.classList.add('i-amphtml-pool-media');
-        videoEl.classList.add('i-amphtml-pool-video');
-        return videoEl;
-      },
-    };
-
-    this.initializeMediaPool_(maxCounts);
-  }
-
-  /**
-   * Fills the media pool by creating the maximum number of media elements for
-   * each of the types of media elements.  We need to create these eagerly so
-   * that all media elements exist by the time that blessAll() is invoked,
-   * thereby "blessing" all media elements for playback without user gesture.
-   * @param {!Object<!MediaType, number>} maxCounts The maximum amount of each
-   *     media element that can be allocated by the pool.
-   * @private
-   */
-  initializeMediaPool_(maxCounts) {
-    this.forEachMediaType_((key) => {
-      const type = MediaType[key];
-      const count = maxCounts[type] || 0;
-
-      if (count <= 0) {
-        return;
-      }
-
-      const ctor = devAssert(
-        this.mediaFactory_[type],
-        `Factory for media type \`${type}\` unset.`
-      );
-
-      // Cloning nodes is faster than building them.
-      // Construct a seed media element as a small optimization.
-      const mediaElSeed = ctor.call(this);
-
-      this.allocated[type] = [];
-      this.unallocated[type] = [];
-
-      // Reverse-looping is generally faster and Closure would usually make
-      // this optimization automatically. However, it skips it due to a
-      // comparison with the itervar below, so we have to roll it by hand.
-      for (let i = count; i > 0; i--) {
-        // Use seed element at end of set to prevent wasting it.
-        const mediaEl = /** @type {!HTMLMediaElement} */ (i == 1
-          ? mediaElSeed
-          : mediaElSeed.cloneNode(/* deep */ true));
-        const sources = this.getDefaultSource_(type);
-        mediaEl.setAttribute('pool-element', elId++);
-        this.enqueueMediaElementTask_(mediaEl, new UpdateSourcesTask(sources));
-        // TODO(newmuis): Check the 'error' field to see if MEDIA_ERR_DECODE
-        // is returned.  If so, we should adjust the pool size/distribution
-        // between media types.
-        this.unallocated[type].push(mediaEl);
-      }
-    });
-  }
-
-  /**
-   * @param {!MediaType} mediaType The media type whose source should be
-   *     retrieved.
-   * @return {!Sources} The default source for the specified type of media.
-   */
-  getDefaultSource_(mediaType) {
-    switch (mediaType) {
-      case MediaType.AUDIO:
-        return new Sources(BLANK_AUDIO_SRC);
-      case MediaType.VIDEO:
-        return new Sources(BLANK_VIDEO_SRC);
-      default:
-        dev().error('AMP-STORY', `No default media for type ${mediaType}.`);
-        return new Sources();
-    }
-  }
-
-  /**
-   * Comparison function that compares the distance of each element from the
-   * current position in the document.
-   * @param {!HTMLMediaElement} mediaA The first element to compare.
-   * @param {!HTMLMediaElement} mediaB The second element to compare.
-   * @return {number}
-   * @private
-   */
-  compareMediaDistances_(mediaA, mediaB) {
-    const distanceA = this.distanceFn_(mediaA);
-    const distanceB = this.distanceFn_(mediaB);
-    return distanceA < distanceB ? -1 : 1;
-  }
-
-  /**
-   * @return {string} A unique ID.
-   * @private
-   */
-  createDomMediaElementId_() {
-    return DOM_MEDIA_ELEMENT_ID_PREFIX + this.idCounter_++;
-  }
-
-  /**
-   * Gets the media type from a given element.
-   * @param {!HTMLMediaElement} mediaElement The element whose media type should
-   *     be retrieved.
-   * @return {!MediaType}
-   * @private
-   */
-  getMediaType_(mediaElement) {
-    const tagName = mediaElement.tagName.toLowerCase();
-    switch (tagName) {
-      case 'audio':
-        return MediaType.AUDIO;
-      case 'video':
-        return MediaType.VIDEO;
-      default:
-        return MediaType.UNSUPPORTED;
-    }
-  }
-
-  /**
-   * Reserves an element of the specified type by removing it from the set of
-   * unallocated elements and returning it.
-   * @param {!MediaType} mediaType The type of media element to reserve.
-   * @return {?HTMLMediaElement} The reserved element, if one exists.
-   * @private
-   */
-  reserveUnallocatedMediaElement_(mediaType) {
-    return this.unallocated[mediaType].pop();
-  }
-
-  /**
-   * Retrieves the media element from the pool that matches the specified
-   * element, if one exists.
-   * @param {!MediaType} mediaType The type of media element to get.
-   * @param {!HTMLMediaElement} domMediaEl The element whose matching media
-   *     element should be retrieved.
-   * @return {?HTMLMediaElement} The media element in the pool that represents
-   *     the specified media element
-   */
-  getMatchingMediaElementFromPool_(mediaType, domMediaEl) {
-    if (this.isAllocatedMediaElement_(mediaType, domMediaEl)) {
-      return domMediaEl;
-    }
-
-    const allocatedEls = this.allocated[mediaType];
-    const index = findIndex(allocatedEls, (poolMediaEl) => {
-      return poolMediaEl[REPLACED_MEDIA_PROPERTY_NAME] === domMediaEl.id;
-    });
-
-    return allocatedEls[index];
-  }
-
-  /**
-   * Allocates the specified media element of the specified type.
-   * @param {!MediaType} mediaType The type of media element to allocate.
-   * @param {!HTMLMediaElement} poolMediaEl The element to be allocated.
-   * @private
-   */
-  allocateMediaElement_(mediaType, poolMediaEl) {
-    this.allocated[mediaType].push(poolMediaEl);
-
-    const unallocatedEls = this.unallocated[mediaType];
-    const indexToRemove = unallocatedEls.indexOf(poolMediaEl);
-
-    if (indexToRemove >= 0) {
-      unallocatedEls.splice(indexToRemove, 1);
-    }
-  }
-
-  /**
-   * Deallocates and returns the media element of the specified type furthest
-   * from the current position in the document.
-   * @param {!MediaType} mediaType The type of media element to deallocate.
-   * @param {!HTMLMediaElement=} opt_elToAllocate If specified, the element that
-   *     is trying to be allocated, such that another element must be evicted.
-   * @return {?HTMLMediaElement} The deallocated element, if one exists.
-   * @private
-   */
-  deallocateMediaElement_(mediaType, opt_elToAllocate) {
-    const allocatedEls = this.allocated[mediaType];
-
-    // Sort the allocated media elements by distance to ensure that we are
-    // evicting the media element that is furthest from the current place in the
-    // document.
-    allocatedEls.sort((a, b) => this.compareMediaDistances_(a, b));
-
-    // Do not deallocate any media elements if the element being loaded or
-    // played is further than the farthest allocated element.
-    if (opt_elToAllocate) {
-      const furthestEl = allocatedEls[allocatedEls.length - 1];
-      if (
-        !furthestEl ||
-        this.distanceFn_(furthestEl) < this.distanceFn_(opt_elToAllocate)
-      ) {
-        return null;
-      }
-    }
-
-    // De-allocate a media element.
-    const poolMediaEl = allocatedEls.pop();
-    this.unallocated[mediaType].push(poolMediaEl);
-    return poolMediaEl;
-  }
-
-  /**
-   * Forcibly deallocates a specific media element, regardless of its distance
-   * from the current position in the document.
-   * @param {!HTMLMediaElement} poolMediaEl The element to be deallocated.
-   * @return {!Promise} A promise that is resolved when the specified media
-   *     element has been successfully deallocated.
-   */
-  forceDeallocateMediaElement_(poolMediaEl) {
-    const mediaType = this.getMediaType_(poolMediaEl);
-    const allocatedEls = this.allocated[mediaType];
-    const removeFromDom = isConnectedNode(poolMediaEl)
-      ? this.swapPoolMediaElementOutOfDom_(poolMediaEl)
-      : Promise.resolve();
-
-    return removeFromDom.then(() => {
-      const index = allocatedEls.indexOf(poolMediaEl);
-      devAssert(index >= 0, 'Cannot deallocate unallocated media element.');
-      allocatedEls.splice(index, 1);
-      this.unallocated[mediaType].push(poolMediaEl);
-    });
-  }
-
-  /**
-   * Evicts an element of the specified type, replaces it in the DOM with the
-   * original media element, and returns it.
-   * @param {!MediaType} mediaType The type of media element to evict.
-   * @param {!HTMLMediaElement=} opt_elToAllocate If specified, the element that
-   *     is trying to be allocated, such that another element must be evicted.
-   * @return {?HTMLMediaElement} A media element of the specified type.
-   * @private
-   */
-  evictMediaElement_(mediaType, opt_elToAllocate) {
-    const poolMediaEl = this.deallocateMediaElement_(
-      mediaType,
-      opt_elToAllocate
-    );
-    if (!poolMediaEl) {
-      return null;
-    }
-
-    this.swapPoolMediaElementOutOfDom_(poolMediaEl);
-    return poolMediaEl;
-  }
-
-  /**
-   * @param {!MediaType} mediaType The media type to check.
-   * @param {!HTMLMediaElement} el The element to check.
-   * @return {boolean} true, if the specified element has already been allocated
-   *     as the specified type of media element.
-   * @private
-   */
-  isAllocatedMediaElement_(mediaType, el) {
-    return this.allocated[mediaType].indexOf(el) >= 0;
-  }
-
-  /**
-   * Replaces a media element that was originally in the DOM with a media
-   * element from the pool.
-   * @param {!HTMLMediaElement} domMediaEl The media element originating from
-   *     the DOM.
-   * @param {!HTMLMediaElement} poolMediaEl The media element originating from
-   *     the pool.
-   * @param {!Sources} sources The sources for the media element.
-   * @return {!Promise} A promise that is resolved when the media element has
-   *     been successfully swapped into the DOM.
-   * @private
-   */
-  swapPoolMediaElementIntoDom_(domMediaEl, poolMediaEl, sources) {
-    const ampMediaForPoolEl = ampMediaElementFor(poolMediaEl);
-    const ampMediaForDomEl = ampMediaElementFor(domMediaEl);
-    poolMediaEl[REPLACED_MEDIA_PROPERTY_NAME] = domMediaEl.id;
-
-    return this.enqueueMediaElementTask_(
-      poolMediaEl,
-      new SwapIntoDomTask(domMediaEl)
-    ).then(
-      () => {
-        this.maybeResetAmpMedia_(ampMediaForPoolEl);
-        this.maybeResetAmpMedia_(ampMediaForDomEl);
-        this.enqueueMediaElementTask_(
-          poolMediaEl,
-          new UpdateSourcesTask(sources)
-        );
-        this.enqueueMediaElementTask_(poolMediaEl, new LoadTask());
-      },
-      () => {
-        this.forceDeallocateMediaElement_(poolMediaEl);
-      }
-    );
-  }
-
-  /**
-   * @param {?Element} componentEl
-   * @private
-   */
-  maybeResetAmpMedia_(componentEl) {
-    if (!componentEl) {
-      return;
-    }
-
-    if (componentEl.tagName.toLowerCase() == 'amp-audio') {
-      // TODO(alanorozco): Implement reset for amp-audio
-      return;
-    }
-
-    componentEl.getImpl().then((impl) => {
-      if (impl.resetOnDomChange) {
-        impl.resetOnDomChange();
-      }
-    });
-  }
-
-  /**
-   * @param {!HTMLMediaElement} poolMediaEl The element whose source should be
-   *     reset.
-   * @return {!Promise} A promise that is resolved when the pool media element
-   *     has been reset.
-   */
-  resetPoolMediaElementSource_(poolMediaEl) {
-    const mediaType = this.getMediaType_(poolMediaEl);
-    const defaultSources = this.getDefaultSource_(mediaType);
-
-    return this.enqueueMediaElementTask_(
-      poolMediaEl,
-      new UpdateSourcesTask(defaultSources)
-    );
-  }
-
-  /**
-   * Removes a pool media element from the DOM and replaces it with the video
-   * that it originally replaced.
-   * @param {!HTMLMediaElement} poolMediaEl The pool media element to remove
-   *     from the DOM.
-   * @return {!Promise} A promise that is resolved when the media element has
-   *     been successfully swapped out of the DOM.
-   * @private
-   */
-  swapPoolMediaElementOutOfDom_(poolMediaEl) {
-    const oldDomMediaElId = poolMediaEl[REPLACED_MEDIA_PROPERTY_NAME];
-    const oldDomMediaEl = /** @type {!HTMLMediaElement} */ (dev().assertElement(
-      this.domMediaEls_[oldDomMediaElId],
-      'No media element to put back into DOM after eviction.'
-    ));
-
-    const swapOutOfDom = this.enqueueMediaElementTask_(
-      poolMediaEl,
-      new SwapOutOfDomTask(oldDomMediaEl)
-    ).then(() => {
-      poolMediaEl[REPLACED_MEDIA_PROPERTY_NAME] = null;
-    });
-
-    this.resetPoolMediaElementSource_(poolMediaEl);
-    return swapOutOfDom;
-  }
-
-  /**
-   * @param {function(string)} callbackFn
-   * @private
-   */
-  forEachMediaType_(callbackFn) {
-    Object.keys(MediaType).forEach(callbackFn.bind(this));
-  }
-
-  /**
-   * Invokes a function for all media managed by the media pool.
-   * @param {function(!HTMLMediaElement)} callbackFn The function to be
-   *     invoked.
-   * @private
-   */
-  forEachMediaElement_(callbackFn) {
-    [this.allocated, this.unallocated].forEach((mediaSet) => {
-      this.forEachMediaType_((key) => {
-        const type = MediaType[key];
-        const els = /** @type {!Array} */ (mediaSet[type]);
-        if (!els) {
-          return;
-        }
-        els.forEach(callbackFn.bind(this));
-      });
-    });
-  }
-
-  /**
-   * Preloads the content of the specified media element in the DOM and returns
-   * a media element that can be used in its stead for playback.
-   * @param {!HTMLMediaElement} domMediaEl The media element, found in the DOM,
-   *     whose content should be loaded.
-   * @return {Promise<!HTMLMediaElement|undefined>} A media element from the pool that can be used
-   *     to replace the specified element.
-   */
-  loadInternal_(domMediaEl) {
-    if (!isConnectedNode(domMediaEl)) {
-      // Don't handle nodes that aren't even in the document.
-      return Promise.resolve();
-    }
-
-    const mediaType = this.getMediaType_(domMediaEl);
-    const existingPoolMediaEl = this.getMatchingMediaElementFromPool_(
-      mediaType,
-      domMediaEl
-    );
-    if (existingPoolMediaEl) {
-      // The element being loaded already has an allocated media element.
-      return Promise.resolve(existingPoolMediaEl);
-    }
-
-    const sources = this.sources_[domMediaEl.id];
-    devAssert(sources instanceof Sources, 'Cannot play unregistered element.');
-
-    const poolMediaEl =
-      this.reserveUnallocatedMediaElement_(mediaType) ||
-      this.evictMediaElement_(mediaType, domMediaEl);
-
-    if (!poolMediaEl) {
-      // If there is no space in the pool to allocate a new element, and no
-      // element can be evicted, do not return any element.
-      return Promise.resolve();
-    }
-
-    this.allocateMediaElement_(mediaType, poolMediaEl);
-
-    return this.swapPoolMediaElementIntoDom_(
-      domMediaEl,
-      poolMediaEl,
-      sources
-    ).then(() => poolMediaEl);
-  }
-
-  /**
-   * "Blesses" the specified media element for future playback without a user
-   * gesture.  In order for this to bless the media element, this function must
-   * be invoked in response to a user gesture.
-   * @param {!HTMLMediaElement} poolMediaEl The media element to bless.
-   * @return {!Promise} A promise that is resolved when blessing the media
-   *     element is complete.
-   */
-  bless_(poolMediaEl) {
-    if (poolMediaEl[ELEMENT_BLESSED_PROPERTY_NAME]) {
-      return Promise.resolve();
-    }
-
-    return this.enqueueMediaElementTask_(poolMediaEl, new BlessTask());
-  }
-
-  /**
-   * Registers the specified element to be usable by the media pool.  Elements
-   * should be registered as early as possible, in order to prevent them from
-   * being played while not managed by the media pool.  If the media element is
-   * already registered, this is a no-op.  Registering elements from within the
-   * pool is not allowed, and will also be a no-op.
-   * @param {!HTMLMediaElement} domMediaEl The media element to be registered.
-   * @return {!Promise} A promise that is resolved when the element has been
-   *     successfully registered, or rejected otherwise.
-   */
-  register(domMediaEl) {
-    const mediaType = this.getMediaType_(domMediaEl);
-    if (this.isAllocatedMediaElement_(mediaType, domMediaEl)) {
-      // This media element originated from the media pool.
-      return Promise.resolve();
-    }
-
-    const id = domMediaEl.id || this.createDomMediaElementId_();
-    if (this.sources_[id] && this.domMediaEls_[id]) {
-      // This media element is already registered.
-      return Promise.resolve();
-    }
-
-    // This media element has not yet been registered.
-    domMediaEl.id = id;
-    const sources = Sources.removeFrom(domMediaEl);
-    this.sources_[id] = sources;
-    this.domMediaEls_[id] = domMediaEl;
-
-    domMediaEl.muted = true;
-    domMediaEl.setAttribute('muted', '');
-    domMediaEl.pause();
-
-    return Promise.resolve();
-  }
-
-  /**
-   * Preloads the content of the specified media element in the DOM.
-   * @param {!HTMLMediaElement} domMediaEl The media element, found in the DOM,
-   *     whose content should be loaded.
-   * @return {!Promise} A promise that is resolved when the specified media
-   *     element has successfully started preloading.
-   */
-  preload(domMediaEl) {
-    // Empty then() invocation hides the value yielded by the loadInternal_
-    // promise, so that we do not leak the pool media element outside of the
-    // scope of the media pool.
-    return this.loadInternal_(domMediaEl).then();
-  }
-
-  /**
-   * Plays the specified media element in the DOM by replacing it with a media
-   * element from the pool and playing that.
-   * @param {!HTMLMediaElement} domMediaEl The media element to be played.
-   * @return {!Promise} A promise that is resolved when the specified media
-   *     element has been successfully played.
-   */
-  play(domMediaEl) {
-    return this.loadInternal_(domMediaEl).then((poolMediaEl) => {
-      if (!poolMediaEl) {
-        return;
-      }
-
-      return this.enqueueMediaElementTask_(poolMediaEl, new PlayTask());
-    });
-  }
-
-  /**
-   * Pauses the specified media element in the DOM.
-   * @param {!HTMLMediaElement} domMediaEl The media element to be paused.
-   * @param {boolean=} rewindToBeginning Whether to rewind the currentTime
-   *     of media items to the beginning.
-   * @return {!Promise} A promise that is resolved when the specified media
-   *     element has been successfully paused.
-   */
-  pause(domMediaEl, rewindToBeginning = false) {
-    const mediaType = this.getMediaType_(domMediaEl);
-    const poolMediaEl = this.getMatchingMediaElementFromPool_(
-      mediaType,
-      domMediaEl
-    );
-
-    if (!poolMediaEl) {
-      return Promise.resolve();
-    }
-
-    return this.enqueueMediaElementTask_(poolMediaEl, new PauseTask()).then(
-      () => {
-        if (rewindToBeginning) {
-          this.enqueueMediaElementTask_(
-            /** @type {!HTMLMediaElement} */ (poolMediaEl),
-            new RewindTask()
-          );
-        }
-      }
-    );
-  }
-
-  /**
-   * Rewinds a specified media element in the DOM to 0.
-   * @param {!HTMLMediaElement} domMediaEl The media element to be rewound.
-   * @return {!Promise} A promise that is resolved when the
-   *     specified media element has been successfully rewound.
-   */
-  rewindToBeginning(domMediaEl) {
-    const mediaType = this.getMediaType_(domMediaEl);
-    const poolMediaEl = this.getMatchingMediaElementFromPool_(
-      mediaType,
-      domMediaEl
-    );
-
-    if (!poolMediaEl) {
-      return Promise.resolve();
-    }
-
-    return this.enqueueMediaElementTask_(poolMediaEl, new RewindTask());
-  }
-
-  /**
-   * Mutes the specified media element in the DOM.
-   * @param {!HTMLMediaElement} domMediaEl The media element to be muted.
-   * @return {!Promise} A promise that is resolved when the specified media
-   *     element has been successfully muted.
-   */
-  mute(domMediaEl) {
-    const mediaType = this.getMediaType_(domMediaEl);
-    const poolMediaEl = this.getMatchingMediaElementFromPool_(
-      mediaType,
-      domMediaEl
-    );
-
-    if (!poolMediaEl) {
-      return Promise.resolve();
-    }
-
-    return this.enqueueMediaElementTask_(poolMediaEl, new MuteTask());
-  }
-
-  /**
-   * Unmutes the specified media element in the DOM.
-   * @param {!HTMLMediaElement} domMediaEl The media element to be unmuted.
-   * @return {!Promise} A promise that is resolved when the specified media
-   *     element has been successfully paused.
-   */
-  unmute(domMediaEl) {
-    const mediaType = this.getMediaType_(domMediaEl);
-    const poolMediaEl = this.getMatchingMediaElementFromPool_(
-      mediaType,
-      domMediaEl
-    );
-
-    if (!poolMediaEl) {
-      return Promise.resolve();
-    }
-
-    return this.enqueueMediaElementTask_(poolMediaEl, new UnmuteTask());
-  }
-
-  /**
-   * "Blesses" all media elements in the media pool for future playback without
-   * a user gesture.  In order for this to bless the media elements, this
-   * function must be invoked in response to a user gesture.
-   * @return {!Promise} A promise that is resolved when all media elements in
-   *     the pool are blessed.
-   */
-  blessAll() {
-    if (this.blessed_) {
-      return Promise.resolve();
-    }
-
-    const blessPromises = [];
-    this.forEachMediaElement_((mediaEl) => {
-      blessPromises.push(this.bless_(mediaEl));
-    });
-
-    return Promise.all(blessPromises)
-      .then(() => {
-        this.blessed_ = true;
-      })
-      .catch((reason) => {
-        dev().expectedError('AMP-STORY', 'Blessing all media failed: ', reason);
-      });
-  }
-
-  /**
-   * @param {!HTMLMediaElement} mediaEl The element whose task queue should be
-   *     executed.
-   * @private
-   */
-  executeNextMediaElementTask_(mediaEl) {
-    const queue = mediaEl[ELEMENT_TASK_QUEUE_PROPERTY_NAME];
-    if (queue.length === 0) {
-      return;
-    }
-
-    const task = queue[0];
-
-    const executionFn = () => {
-      task
-        .execute(mediaEl)
-        .catch((reason) => dev().error('AMP-STORY', reason))
-        .then(() => {
-          // Run regardless of success or failure of task execution.
-          queue.shift();
-          this.executeNextMediaElementTask_(mediaEl);
-        });
-    };
-
-    if (task.requiresSynchronousExecution()) {
-      executionFn.call(this);
-    } else {
-      this.timer_.delay(executionFn.bind(this), 0);
-    }
-  }
-
-  /**
-   * @param {!HTMLMediaElement} mediaEl The element for which the specified task
-   *     should be executed.
-   * @param {!./media-tasks.MediaTask} task The task to be executed.
-   * @return {!Promise} A promise that is resolved when the specified task is
-   *     completed.
-   * @private
-   */
-  enqueueMediaElementTask_(mediaEl, task) {
-    if (!mediaEl[ELEMENT_TASK_QUEUE_PROPERTY_NAME]) {
-      mediaEl[ELEMENT_TASK_QUEUE_PROPERTY_NAME] = [];
-    }
-
-    const queue = mediaEl[ELEMENT_TASK_QUEUE_PROPERTY_NAME];
-    const isQueueRunning = queue.length !== 0;
-
-    queue.push(task);
-
-    if (!isQueueRunning) {
-      this.executeNextMediaElementTask_(mediaEl);
-    }
-
-    return task.whenComplete();
-  }
-
-  /**
-   * @param {!MediaPoolRoot} root
-   * @return {!MediaPool}
-   */
-  static for(root) {
-    const element = root.getElement();
-    const existingId = element[POOL_MEDIA_ELEMENT_PROPERTY_NAME];
-    const hasInstanceAllocated = existingId && instances[existingId];
-
-    if (hasInstanceAllocated) {
-      return instances[existingId];
-    }
-
-    const newId = String(nextInstanceId++);
-    element[POOL_MEDIA_ELEMENT_PROPERTY_NAME] = newId;
-    instances[newId] = new MediaPool(
-      toWin(root.getElement().ownerDocument.defaultView),
-      root.getMaxMediaElementCounts(),
-      (element) => root.getElementDistance(element)
-    );
-
-    return instances[newId];
-  }
-}
-
-/**
- * Defines a common interface for elements that contain a MediaPool.
- *
- * @interface
- */
-export class MediaPoolRoot {
-  /**
-   * @return {!Element} The root element of this media pool.
-   */
-  getElement() {}
-
-  /**
-   * @param {!Element} unusedElement The element whose distance should be
-   *    retrieved.
-   * @return {number} A numerical distance representing how far the specified
-   *     element is from the user's current position in the document.  The
-   *     absolute magnitude of this number is irrelevant; the relative magnitude
-   *     is used to determine which media elements should be evicted (elements
-   *     furthest from the user's current position in the document are evicted
-   *     from the MediaPool first).
-   */
-  getElementDistance(unusedElement) {}
-
-  /**
-   * @return {!Object<!MediaType, number>} The maximum amount of each media
-   *     type to allow within this element.
-   */
-  getMaxMediaElementCounts() {}
-}
diff --git a/extensions/amp-story/0.1/media-pool.md b/extensions/amp-story/0.1/media-pool.md
deleted file mode 100644
index 3f92ce792ce22..0000000000000
--- a/extensions/amp-story/0.1/media-pool.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Motivation
-
-Web browsers generally do not allow audio to be played by media elements, unless they were explicitly played by a user gesture. [iOS Safari](https://webkit.org/blog/6784/new-video-policies-for-ios/), [Google Chrome](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes), etc. This behavior causes the problem outlined by #11856 where, since stories sometimes automatically (without user input) advance to new pages with media, some stories can fail to play media on some pages.
-
-# High-Level Design
-
-Every story always starts muted. Because muted autoplay of video is allowed by browsers, all videos are allowed to play. We offer an audio control to users where tapping the control unmutes ALL of the media present in the story. It then subsequently re-mutes all of the media, except for any media on the current page that should have otherwise been unmuted. We herein refer to this operation of umuting and immediately (conditionally) re-muting a media element in response to user gesture as "blessing" said media element. Blessing a media element leverages the user gesture to unmute that media element, so that future unmute operations do not require a user gesture.
-
-# Detailed Design
-
-Some browsers (notably, iOS Safari) place an explicit maximum on the number of media elements allowed to be kept in memory at once (as we last tested it in November 2017, this limit was 16). To ensure that all media elements get blessed, even when more than 16 are present, we maintain a pool of a fixed number of media elements, where the maximum number of media elements allowed is less than 16 (currently a maximum of 8 `<video>` tags and 4 `audio` tags, for a total of 12 elements). We refer to this pool as `MediaPool`, and it handles recycling the media elements it controls by swapping them in and out of the DOM as the user navigates through a story.
-
-By default, these `<audio>` and `<video>` elements are set to blank audio and video files. Notably, they are _not_ set to the empty string, but rather data URIs that represent an MP3 and an MP4 (respectively) that have no audio or video. This is because invoking media playback functions like `play()`, `pause()`, `mute()`, and `unmute()` does not work if the media element's source is unset.
-
-## Lifecycle
-
-![MediaPool element lifecycle diagram](../img/media-pool-element-lifecycle.png)
-
-Each media element present in the document should be registered into the media pool as soon as possible. Once registered, a media element can be blessed, and that blessed state will be honored regardless of whether the source of that media element is subsequently changed.
-
-We preload media elements based on what we refer to as the element's "distance": how far the element is away from the user's current position in the document. For stories, we measure this distance in pages; an element on the page the user is currently viewing has a distance of 0, an element on the page immediately before or after the page the user is currently viewing has a distance of 1, an element on the page two pages before or two pages after has a distance of 2, etc. Stories currently preload elements on pages that have a distance of 2 or less. If there are more elements in the story than can fit in the `MediaPool`, then media elements are evicted based on their distance; elements with the highest distance are evicted first, until all elements that are loaded have been allocated a resource from the pool.
-
-Once a media element has been loaded, one can call `play()`, `pause()`, `mute()`, or `unmute()`.
-
-## Queueing
-
-Some browsers can also have problems with the underlying media element methods interrupting one another, depending on the order in which they are invoked. For example, calling `load()` on a media element after calling `play()` can cause the promise returned by `play()` to be rejected. An example of the problems caused by this is outlined in #13232.
-
-To resolve this, we create a task queue, stored as a property on each media element. The `MediaPool` queues all media-element-bound tasks and executes them only upon completion of the previous tasks. This eliminates the race conditions that come with invoking many of the functions on a media element, as well as from swapping the elements into (and out of) the DOM.
-
-# Code
-
-- MediaPool: https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/0.1/media-pool.js
-- Tasks for queue: https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/0.1/media-tasks.js
diff --git a/extensions/amp-story/0.1/media-tasks.js b/extensions/amp-story/0.1/media-tasks.js
deleted file mode 100644
index ed8cf28990c35..0000000000000
--- a/extensions/amp-story/0.1/media-tasks.js
+++ /dev/null
@@ -1,425 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {Deferred, tryResolve} from '../../../src/utils/promise';
-import {Sources} from './sources';
-import {isConnectedNode} from '../../../src/dom';
-
-/**
- * The name for a boolean property on an element indicating whether that element
- * has already been "blessed".
- * @const {string}
- */
-export const ELEMENT_BLESSED_PROPERTY_NAME = '__AMP_MEDIA_IS_BLESSED__';
-
-/**
- * CSS class names that should not be removed from an element when swapping it
- * into/out of the DOM.
- * @const {!Array<string>}
- */
-const PROTECTED_CSS_CLASS_NAMES = [
-  'i-amphtml-pool-media',
-  'i-amphtml-pool-audio',
-  'i-amphtml-pool-video',
-];
-
-/**
- * Attribute names that should not be removed from an element when swapping it
- * into/out of the DOM.
- * @const {!Array<string>}
- */
-const PROTECTED_ATTRIBUTES = ['id', 'src', 'class', 'autoplay'];
-
-/**
- * Determines whether a CSS class name is allowed to be removed or copied from
- * media elements.
- * @param {string} cssClassName The CSS class name name to check.
- * @return {boolean} true, if the specified CSS class name is allowed to be
- *     removed or copied from media elements; false otherwise.
- * @private
- */
-function isProtectedCssClassName(cssClassName) {
-  return PROTECTED_CSS_CLASS_NAMES.indexOf(cssClassName) >= 0;
-}
-
-/**
- * Determines whether an attribute is allowed to be removed or copied from
- * media elements.
- * @param {string} attributeName The attribute name to check.
- * @return {boolean} true, if the specified attribute is allowed to be removed
- *     or copied from media elements; false otherwise.
- * @private
- */
-function isProtectedAttributeName(attributeName) {
-  return PROTECTED_ATTRIBUTES.indexOf(attributeName) >= 0;
-}
-
-/**
- * Copies all unprotected CSS classes from fromEl to toEl.
- * @param {!HTMLMediaElement} fromEl The element from which CSS classes should
- *     be copied.
- * @param {!HTMLMediaElement} toEl The element to which CSS classes should be
- *     copied.
- * @private
- */
-function copyCssClasses(fromEl, toEl) {
-  // Remove all of the unprotected CSS classes from the toEl.
-  for (let i = toEl.classList.length - 1; i >= 0; i--) {
-    const cssClass = toEl.classList.item(i);
-    if (!isProtectedCssClassName(cssClass)) {
-      toEl.classList.remove(cssClass);
-    }
-  }
-
-  // Copy all of the unprotected CSS classes from the fromEl to the toEl.
-  for (let i = 0; i < fromEl.classList.length; i++) {
-    const cssClass = fromEl.classList.item(i);
-    if (!isProtectedCssClassName(cssClass)) {
-      toEl.classList.add(cssClass);
-    }
-  }
-}
-
-/**
- * Copies all unprotected attributes from fromEl to toEl.
- * @param {!HTMLMediaElement} fromEl The element from which attributes should
- *     be copied.
- * @param {!HTMLMediaElement} toEl The element to which attributes should be
- *     copied.
- * @private
- */
-function copyAttributes(fromEl, toEl) {
-  const fromAttributes = fromEl.attributes;
-  const toAttributes = toEl.attributes;
-
-  // Remove all of the unprotected attributes from the toEl.
-  for (let i = toAttributes.length - 1; i >= 0; i--) {
-    const attributeName = toAttributes[i].name;
-    if (!isProtectedAttributeName(attributeName)) {
-      toEl.removeAttribute(attributeName);
-    }
-  }
-
-  // Copy all of the unprotected attributes from the fromEl to the toEl.
-  for (let i = 0; i < fromAttributes.length; i++) {
-    const {name: attributeName, value: attributeValue} = fromAttributes[i];
-    if (!isProtectedAttributeName(attributeName)) {
-      toEl.setAttribute(attributeName, attributeValue);
-    }
-  }
-}
-
-/**
- * Base class for tasks executed in order on HTMLMediaElements.
- */
-export class MediaTask {
-  /**
-   * @param {string} name
-   */
-  constructor(name) {
-    /** @private @const {string} */
-    this.name_ = name;
-
-    const deferred = new Deferred();
-
-    /** @private @const {!Promise} */
-    this.completionPromise_ = deferred.promise;
-
-    /** @private {?function()} */
-    this.resolve_ = deferred.resolve;
-
-    /** @private {?function(*)} */
-    this.reject_ = deferred.reject;
-  }
-
-  /**
-   * @return {string} The name of this task.
-   */
-  getName() {
-    return this.name_;
-  }
-
-  /**
-   * @return {!Promise<*>} A promise that is resolved when the task has
-   *     completed execution.
-   */
-  whenComplete() {
-    return this.completionPromise_;
-  }
-
-  /**
-   * @param {!HTMLMediaElement} mediaEl The media element on which this task
-   *     should be executed.
-   * @return {!Promise} A promise that is resolved when the task has completed
-   *     execution.
-   */
-  execute(mediaEl) {
-    return this.executeInternal(mediaEl).then(this.resolve_, this.reject_);
-  }
-
-  /**
-   * @param {!HTMLMediaElement} unusedMediaEl The media element on which this
-   *     task should be executed.
-   * @return {*} TODO(#23582): Specify return type
-   * @protected
-   */
-  executeInternal(unusedMediaEl) {
-    return Promise.resolve();
-  }
-
-  /**
-   * @return {boolean} true, if this task must be executed synchronously, e.g.
-   *    if it requires a user gesture.
-   */
-  requiresSynchronousExecution() {
-    return false;
-  }
-
-  /**
-   * @param {*} reason The reason for failing the task.
-   * @protected
-   */
-  failTask(reason) {
-    this.reject_(reason);
-  }
-}
-
-/**
- * Plays the specified media element.
- */
-export class PlayTask extends MediaTask {
-  /**
-   * @public
-   */
-  constructor() {
-    super('play');
-  }
-
-  /** @override */
-  executeInternal(mediaEl) {
-    if (!mediaEl.paused) {
-      // We do not want to invoke play() if the media element is already
-      // playing, as this can interrupt playback in some browsers.
-      return Promise.resolve();
-    }
-
-    // The play() invocation is wrapped in a Promise.resolve(...) due to the
-    // fact that some browsers return a promise from media elements' play()
-    // function, while others return a boolean.
-    return tryResolve(() => mediaEl.play());
-  }
-}
-
-/**
- * Pauses the specified media element.
- */
-export class PauseTask extends MediaTask {
-  /**
-   * @public
-   */
-  constructor() {
-    super('pause');
-  }
-
-  /** @override */
-  executeInternal(mediaEl) {
-    mediaEl.pause();
-    return Promise.resolve();
-  }
-}
-
-/**
- * Unmutes the specified media element.
- */
-export class UnmuteTask extends MediaTask {
-  /**
-   * @public
-   */
-  constructor() {
-    super('unmute');
-  }
-
-  /** @override */
-  executeInternal(mediaEl) {
-    mediaEl.muted = false;
-    mediaEl.removeAttribute('muted');
-    return Promise.resolve();
-  }
-}
-
-/**
- * Mutes the specified media element.
- */
-export class MuteTask extends MediaTask {
-  /**
-   * @public
-   */
-  constructor() {
-    super('mute');
-  }
-
-  /** @override */
-  executeInternal(mediaEl) {
-    mediaEl.muted = true;
-    mediaEl.setAttribute('muted', '');
-    return Promise.resolve();
-  }
-}
-
-/**
- * Seeks the specified media element to the beginning.
- */
-export class RewindTask extends MediaTask {
-  /**
-   * @public
-   */
-  constructor() {
-    super('rewind');
-  }
-
-  /** @override */
-  executeInternal(mediaEl) {
-    mediaEl.currentTime = 0;
-    return Promise.resolve();
-  }
-}
-
-/**
- * Loads the specified media element.
- */
-export class LoadTask extends MediaTask {
-  /**
-   * @public
-   */
-  constructor() {
-    super('load');
-  }
-
-  /** @override */
-  executeInternal(mediaEl) {
-    mediaEl.load();
-    return Promise.resolve();
-  }
-}
-
-/**
- * "Blesses" the specified media element for future playback without a user
- * gesture.  In order for this to bless the media element, this function must
- * be invoked in response to a user gesture.
- */
-export class BlessTask extends MediaTask {
-  /**
-   * @public
-   */
-  constructor() {
-    super('bless');
-  }
-
-  /** @override */
-  requiresSynchronousExecution() {
-    return true;
-  }
-
-  /** @override */
-  executeInternal(mediaEl) {
-    const isMuted = mediaEl.muted;
-    mediaEl.muted = false;
-    if (isMuted) {
-      mediaEl.muted = true;
-    }
-    return Promise.resolve();
-  }
-}
-
-/**
- * Updates the sources of the specified media element.
- */
-export class UpdateSourcesTask extends MediaTask {
-  /**
-   * @param {!Sources} newSources The sources to which the media element should
-   *     be updated.
-   */
-  constructor(newSources) {
-    super('update-src');
-
-    /** @private @const {!Sources} */
-    this.newSources_ = newSources;
-  }
-
-  /** @override */
-  executeInternal(mediaEl) {
-    Sources.removeFrom(mediaEl);
-    this.newSources_.applyToElement(mediaEl);
-    return Promise.resolve();
-  }
-}
-
-/**
- * Swaps a media element into the DOM, in the place of another media element.
- */
-export class SwapIntoDomTask extends MediaTask {
-  /**
-   * @param {!HTMLMediaElement} replacedMediaEl The element to be replaced by
-   *     the media element on which this task is executed.
-   */
-  constructor(replacedMediaEl) {
-    super('swap-into-dom');
-
-    /** @private @const {!HTMLMediaElement} */
-    this.replacedMediaEl_ = replacedMediaEl;
-  }
-
-  /** @override */
-  executeInternal(mediaEl) {
-    if (!isConnectedNode(this.replacedMediaEl_)) {
-      this.failTask('Cannot swap media for element that is not in DOM.');
-      return Promise.resolve();
-    }
-
-    copyCssClasses(this.replacedMediaEl_, mediaEl);
-    copyAttributes(this.replacedMediaEl_, mediaEl);
-    this.replacedMediaEl_.parentElement.replaceChild(
-      mediaEl,
-      this.replacedMediaEl_
-    );
-    return Promise.resolve();
-  }
-}
-
-/**
- * Swaps a media element out the DOM, in the place of a placeholder media
- * element.
- */
-export class SwapOutOfDomTask extends MediaTask {
-  /**
-   * @param {!HTMLMediaElement} placeholderMediaEl The element to be replaced by
-   *     the media element on which this task is executed.
-   */
-  constructor(placeholderMediaEl) {
-    super('swap-out-of-dom');
-
-    /** @private @const {!HTMLMediaElement} */
-    this.placeholderMediaEl_ = placeholderMediaEl;
-  }
-
-  /** @override */
-  executeInternal(mediaEl) {
-    copyCssClasses(mediaEl, this.placeholderMediaEl_);
-    copyAttributes(mediaEl, this.placeholderMediaEl_);
-    mediaEl.parentElement.replaceChild(this.placeholderMediaEl_, mediaEl);
-    return Promise.resolve();
-  }
-}
diff --git a/extensions/amp-story/0.1/navigation-state.js b/extensions/amp-story/0.1/navigation-state.js
deleted file mode 100644
index 3a348f5c9f082..0000000000000
--- a/extensions/amp-story/0.1/navigation-state.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {Observable} from '../../../src/observable';
-import {Services} from '../../../src/services';
-import {StateProperty} from './amp-story-store-service';
-
-/**
- * Types of state changes that can be consumed.
- * @enum {number}
- */
-export const StateChangeType = {
-  ACTIVE_PAGE: 0,
-  BOOKEND_ENTER: 1,
-  BOOKEND_EXIT: 2,
-  END: 3,
-};
-
-/** @typedef {{type: !StateChangeType, value: *}} */
-export let StateChangeEventDef;
-
-/**
- * State store to decouple navigation changes from consumers.
- */
-export class NavigationState {
-  /**
-   * @param {!Window} win
-   * @param {function():Promise<boolean>} hasBookend
-   */
-  constructor(win, hasBookend) {
-    /** @private @const {!function():Promise<boolean>} */
-    this.hasBookend_ = hasBookend;
-
-    /** @private {!Observable<StateChangeEventDef>} */
-    this.observable_ = new Observable();
-
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
-    this.storeService_ = Services.storyStoreServiceV01(this.win_);
-
-    this.initializeListeners_();
-  }
-
-  /**
-   * @private
-   */
-  initializeListeners_() {
-    this.storeService_.subscribe(StateProperty.BOOKEND_STATE, (isActive) => {
-      if (isActive) {
-        this.fire_(StateChangeType.BOOKEND_ENTER);
-        this.fire_(StateChangeType.END);
-      }
-
-      if (!isActive) {
-        this.fire_(StateChangeType.BOOKEND_EXIT);
-      }
-    });
-  }
-
-  /**
-   * @param {function(!StateChangeEventDef):void} stateChangeFn
-   */
-  observe(stateChangeFn) {
-    this.observable_.add(stateChangeFn);
-  }
-
-  /**
-   * @param {number} pageIndex
-   * @param {number} totalPages
-   * @param {string=} pageId
-   * TODO(alanorozco): pass whether change was automatic or on user action.
-   */
-  updateActivePage(pageIndex, totalPages, pageId) {
-    const changeValue = {
-      pageIndex,
-      pageId,
-      totalPages,
-      storyProgress: pageIndex / totalPages,
-    };
-
-    this.fire_(StateChangeType.ACTIVE_PAGE, changeValue);
-
-    if (pageIndex >= totalPages - 1) {
-      this.hasBookend_().then((hasBookend) => {
-        if (!hasBookend) {
-          this.fire_(StateChangeType.END);
-        }
-      });
-    }
-  }
-
-  /**
-   * @param {!StateChangeType} type
-   * @param {*=} opt_changeValue
-   */
-  fire_(type, opt_changeValue) {
-    this.observable_.fire({type, value: opt_changeValue});
-  }
-}
diff --git a/extensions/amp-story/0.1/origin-allowlist.js b/extensions/amp-story/0.1/origin-allowlist.js
deleted file mode 100644
index 80bd93f5c87ca..0000000000000
--- a/extensions/amp-story/0.1/origin-allowlist.js
+++ /dev/null
@@ -1,1155 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-/**
- * A allowlist of djb2a hashes of publisher origins.
- * @const {!Array<string>}
- */
-export const ORIGIN_ALLOWLIST = [
-  '1005249088',
-  '1006163429',
-  '1008162951',
-  '10089108',
-  '1010750108',
-  '101608808',
-  '1019348494',
-  '1024745460',
-  '1025683127',
-  '1033170015',
-  '1040387537',
-  '1042067194',
-  '1044520440',
-  '1048639639',
-  '1048768124',
-  '1055309246',
-  '1061774354',
-  '1066656902',
-  '1071568410',
-  '1075430814',
-  '1080553171',
-  '1081382723',
-  '1085278050',
-  '1087738722',
-  '108933955',
-  '1097876642',
-  '1098115586',
-  '1120549175',
-  '1120627104',
-  '1122637707',
-  '1123796379',
-  '1137284944',
-  '1139124777',
-  '1139232118',
-  '1148058575',
-  '1151862878',
-  '1152230187',
-  '1158106191',
-  '1162517776',
-  '1167928101',
-  '1170971680',
-  '1172399292',
-  '1179223384',
-  '1180555863',
-  '1182996899',
-  '1188221598',
-  '1189200007',
-  '1191530385',
-  '1193086302',
-  '1196288955',
-  '1203175957',
-  '1203629527',
-  '1206202368',
-  '1209396307',
-  '1210508580',
-  '1212905960',
-  '1217648514',
-  '1219663970',
-  '1221946827',
-  '1223948430',
-  '1224563123',
-  '1224575240',
-  '122776143',
-  '1230010468',
-  '1235870422',
-  '1239612924',
-  '1252045233',
-  '1266686880',
-  '1267058499',
-  '1271217363',
-  '1271836085',
-  '1272420392',
-  '1275112483',
-  '1279420495',
-  '128315777',
-  '1288425632',
-  '1291233749',
-  '1291285285',
-  '129196458',
-  '1296373605',
-  '1303205228',
-  '1304908597',
-  '1314122247',
-  '1315067761',
-  '1323716407',
-  '1324465699',
-  '1331021272',
-  '1332628692',
-  '1337085136',
-  '1338665863',
-  '1341677116',
-  '1343032467',
-  '1343153594',
-  '134439678',
-  '1346203807',
-  '1348111506',
-  '1358036688',
-  '1358275160',
-  '1362700107',
-  '1363274340',
-  '1365188219',
-  '1366298771',
-  '136948846',
-  '1370863654',
-  '1382180463',
-  '1384161523',
-  '1384885545',
-  '1390195319',
-  '1390422041',
-  '1391355679',
-  '1392973808',
-  '1401234945',
-  '140139328',
-  '1403015859',
-  '1406014587',
-  '1408213495',
-  '1409815047',
-  '1416203172',
-  '1416336576',
-  '1420964370',
-  '1424038674',
-  '1426205130',
-  '1426908974',
-  '142793127',
-  '1429768323',
-  '1433535079',
-  '1436589466',
-  '1444797690',
-  '1446722118',
-  '1448422024',
-  '1451865411',
-  '1452555948',
-  '1452631355',
-  '1454471704',
-  '1456452353',
-  '1462086116',
-  '1463873379',
-  '1465911308',
-  '1472537769',
-  '1474107485',
-  '1476740172',
-  '1485177716',
-  '1491204959',
-  '1491535554',
-  '1495909416',
-  '1496939000',
-  '1502183300',
-  '1502183303',
-  '1505657051',
-  '1506356073',
-  '1510693494',
-  '1512200976',
-  '1515192136',
-  '1516044894',
-  '1516712134',
-  '1527869901',
-  '1527955987',
-  '1531622827',
-  '1542113246',
-  '1542890108',
-  '1544071036',
-  '1544904918',
-  '154680092',
-  '1548043628',
-  '1551216225',
-  '1554302139',
-  '1560556568',
-  '156105329',
-  '1565761663',
-  '1568645882',
-  '1568765576',
-  '1569754863',
-  '1574632236',
-  '1581752952',
-  '1587531568',
-  '1597805481',
-  '1598215278',
-  '1604714840',
-  '1605964375',
-  '1606771939',
-  '1606845272',
-  '1607498054',
-  '1607726622',
-  '1616084341',
-  '1618633174',
-  '1628432066',
-  '1629009934',
-  '1633699767',
-  '1635597923',
-  '1638733129',
-  '1639295851',
-  '1639843601',
-  '164006119',
-  '1641361303',
-  '1641559905',
-  '1641755208',
-  '1645367571',
-  '1648418043',
-  '164958789',
-  '1651834381',
-  '165218748',
-  '1657655384',
-  '1657857651',
-  '166080441',
-  '166550074',
-  '1668265379',
-  '167065142',
-  '1672286708',
-  '167457365',
-  '1686480925',
-  '1692205821',
-  '1696562222',
-  '1710525818',
-  '1712515810',
-  '172062822',
-  '1721539702',
-  '1727000213',
-  '1729406438',
-  '1734343726',
-  '1741775485',
-  '1746787055',
-  '174935976',
-  '1750274567',
-  '1752199172',
-  '1755487660',
-  '1758506884',
-  '176099546',
-  '1761507447',
-  '1762075722',
-  '1762779619',
-  '1765761661',
-  '1766408482',
-  '1777879957',
-  '1778814731',
-  '1782415871',
-  '1786821707',
-  '1790421447',
-  '1793364122',
-  '1796631487',
-  '179954814',
-  '1799580062',
-  '1800644108',
-  '1804754165',
-  '1814333326',
-  '1820719129',
-  '1828302437',
-  '1829392117',
-  '1831449632',
-  '1834315395',
-  '1842365929',
-  '1844097179',
-  '185695994',
-  '1857703569',
-  '1862429134',
-  '1866288580',
-  '1868825623',
-  '1873175698',
-  '1875012067',
-  '1878840548',
-  '188153886',
-  '1881549152',
-  '1885949806',
-  '1888202576',
-  '1890223908',
-  '1890285526',
-  '1890671223',
-  '1890684493',
-  '1891136033',
-  '1892097962',
-  '1892894796',
-  '1897412628',
-  '1897877027',
-  '190058212',
-  '1911273138',
-  '191151933',
-  '1914691069',
-  '1916053925',
-  '1921891253',
-  '19233369',
-  '1924394550',
-  '1925340007',
-  '1926444709',
-  '192946894',
-  '1932332195',
-  '1934543421',
-  '1937775827',
-  '1938906399',
-  '1944707380',
-  '1948987049',
-  '1956324539',
-  '1958476175',
-  '1960309827',
-  '1960384540',
-  '1966744125',
-  '1969495793',
-  '197478601',
-  '1978180435',
-  '1980609434',
-  '198514785',
-  '198596',
-  '1996557418',
-  '2003114268',
-  '200513980',
-  '2025148527',
-  '2025653254',
-  '2028144989',
-  '2034674542',
-  '2038626037',
-  '2038733725',
-  '2045713344',
-  '2046769120',
-  '2050218658',
-  '2051204756',
-  '2052997999',
-  '2062991370',
-  '2064945552',
-  '2065286458',
-  '2068779408',
-  '2072157691',
-  '2072267213',
-  '2074180413',
-  '207690439',
-  '2076974480',
-  '2077125460',
-  '208348204',
-  '2084091630',
-  '2085643881',
-  '209024299',
-  '2105278890',
-  '2109740133',
-  '2114974219',
-  '2115738579',
-  '2116825342',
-  '2117678752',
-  '2118239665',
-  '2120518392',
-  '2124375454',
-  '2126860507',
-  '212690086',
-  '2127261154',
-  '2128662947',
-  '2130032338',
-  '2131418359',
-  '2133539483',
-  '2134891083',
-  '2138194233',
-  '2139925877',
-  '2143498672',
-  '2150296095',
-  '2151200413',
-  '2154124693',
-  '2160565275',
-  '2160983462',
-  '2160997979',
-  '2163333100',
-  '2164891421',
-  '21653271',
-  '2172705717',
-  '2182978707',
-  '218358682',
-  '2183916165',
-  '2185544172',
-  '2193197883',
-  '2199838184',
-  '220103233',
-  '220632861',
-  '2207832807',
-  '2214432888',
-  '2221548842',
-  '2231215830',
-  '2232562594',
-  '2236849121',
-  '2242481580',
-  '2246978037',
-  '2247419316',
-  '2250390055',
-  '2250762825',
-  '2252559194',
-  '2254619785',
-  '2258293519',
-  '2266549358',
-  '2271213671',
-  '2275977064',
-  '2277458929',
-  '2278516260',
-  '2284332078',
-  '2297008443',
-  '2299758819',
-  '2311290044',
-  '2313067530',
-  '2319346288',
-  '2320558357',
-  '2325333010',
-  '2326328585',
-  '2334635490',
-  '2335819407',
-  '2342924379',
-  '234914730',
-  '2355703345',
-  '2360854839',
-  '2362191459',
-  '2373437534',
-  '2374338088',
-  '2375389254',
-  '2380804515',
-  '2388222966',
-  '2391306573',
-  '2393754227',
-  '2406112565',
-  '2408225607',
-  '2408621595',
-  '24124510',
-  '2413038656',
-  '2414533450',
-  '2415015357',
-  '241505564',
-  '2422198952',
-  '2426360694',
-  '2427371871',
-  '2428857403',
-  '2430945021',
-  '2434633986',
-  '2437839027',
-  '2438549543',
-  '2450881433',
-  '2451485116',
-  '2454481433',
-  '2465244303',
-  '2471412274',
-  '2472591333',
-  '2479714660',
-  '2479885882',
-  '2480671357',
-  '2483800093',
-  '2486258543',
-  '2487828098',
-  '2490491327',
-  '2491279653',
-  '2497807902',
-  '2497925282',
-  '2498415300',
-  '2500743291',
-  '25024500',
-  '250464294',
-  '2505963428',
-  '2512768819',
-  '2514009950',
-  '2514987571',
-  '2517493756',
-  '251839354',
-  '25231870',
-  '2527538528',
-  '2529138038',
-  '2529319010',
-  '2540030627',
-  '2544113070',
-  '2556872339',
-  '255752794',
-  '2563128128',
-  '2564618500',
-  '2565653830',
-  '2569424332',
-  '2580152873',
-  '2587850265',
-  '2588277885',
-  '2594064109',
-  '2600368355',
-  '2602595202',
-  '2605626788',
-  '2606715995',
-  '2611729722',
-  '2612967453',
-  '2613072379',
-  '2616846056',
-  '2619537797',
-  '2625905896',
-  '2627761745',
-  '2629810525',
-  '2632114880',
-  '2632194804',
-  '2635588792',
-  '2636391541',
-  '2637085339',
-  '2638013283',
-  '2639830307',
-  '2652634921',
-  '2662207691',
-  '2669510717',
-  '2671290557',
-  '2672599929',
-  '2676022422',
-  '2678501748',
-  '2678784124',
-  '2688673784',
-  '2689355865',
-  '2690235168',
-  '2697147002',
-  '2697162102',
-  '2702577685',
-  '2705736432',
-  '270580042',
-  '2709426781',
-  '2713112922',
-  '2718273594',
-  '2718446350',
-  '2718657511',
-  '2720496885',
-  '2723434276',
-  '2725145135',
-  '2731883839',
-  '2732398879',
-  '2734313767',
-  '273580543',
-  '2738155690',
-  '2741673809',
-  '2749835187',
-  '2754997109',
-  '2755153627',
-  '2759976952',
-  '2761508292',
-  '2762302648',
-  '2766106524',
-  '2766754689',
-  '2767961054',
-  '2769442224',
-  '2771182563',
-  '2771839729',
-  '2773939274',
-  '2774175302',
-  '2777697460',
-  '2780223587',
-  '2780639696',
-  '2784212793',
-  '2784479860',
-  '2787853368',
-  '2790502057',
-  '2791249547',
-  '2795182078',
-  '2797839121',
-  '2797844367',
-  '2798104093',
-  '2803957366',
-  '2812672743',
-  '2814213354',
-  '2814269253',
-  '2818266545',
-  '2820864954',
-  '2824188819',
-  '2825564215',
-  '2826727325',
-  '2830660705',
-  '2835331287',
-  '283661147',
-  '2845803411',
-  '2852627326',
-  '2861134475',
-  '2866448207',
-  '2866470331',
-  '2869433580',
-  '2870769104',
-  '2871678619',
-  '2872980659',
-  '288246341',
-  '2885388648',
-  '2887960156',
-  '2889518419',
-  '2893467144',
-  '2893590542',
-  '2911378586',
-  '2912197083',
-  '2914243153',
-  '2916268499',
-  '2917909858',
-  '2918230434',
-  '2919447987',
-  '2927763036',
-  '2930531110',
-  '2930818498',
-  '2933287666',
-  '2933678691',
-  '2934412348',
-  '2939338957',
-  '2941207893',
-  '294281365',
-  '294281662',
-  '2947883909',
-  '2951025154',
-  '2955070851',
-  '2956714159',
-  '296084766',
-  '296529422',
-  '2970931887',
-  '2972849537',
-  '2981581097',
-  '3003621454',
-  '3017572169',
-  '3018496372',
-  '3018644774',
-  '3021388654',
-  '3022092377',
-  '302251478',
-  '3024284791',
-  '3028558767',
-  '3029994837',
-  '3033234915',
-  '3034807703',
-  '3036809290',
-  '303732921',
-  '3040972817',
-  '3046149777',
-  '3047184436',
-  '305548058',
-  '3057278033',
-  '3058691259',
-  '3060519019',
-  '3060985947',
-  '3063651839',
-  '3071986971',
-  '3075313860',
-  '3084083922',
-  '3090387299',
-  '3090399922',
-  '3092172140',
-  '3107121214',
-  '3108333779',
-  '3109674920',
-  '3121167307',
-  '3125715798',
-  '3129729985',
-  '313079991',
-  '3132221784',
-  '3132507840',
-  '3133369938',
-  '3143386019',
-  '3144086645',
-  '3144741080',
-  '3150411430',
-  '3153172095',
-  '3156001180',
-  '3162265419',
-  '3172876126',
-  '3176449798',
-  '3181090214',
-  '3185535902',
-  '3188249139',
-  '3188949253',
-  '3189406311',
-  '3200093935',
-  '3201739013',
-  '3208039641',
-  '3213623864',
-  '3216947982',
-  '3226517851',
-  '323546264',
-  '3238374737',
-  '3240528713',
-  '3244251087',
-  '3246119198',
-  '3250723869',
-  '3252080663',
-  '3256754508',
-  '3259979025',
-  '3261687030',
-  '3263349802',
-  '3263974103',
-  '3268659322',
-  '3271330177',
-  '3277018274',
-  '3283747143',
-  '3284374556',
-  '3285310371',
-  '32924227',
-  '3295776646',
-  '3301018689',
-  '3301688194',
-  '3305747518',
-  '3307671928',
-  '3308888367',
-  '3309952347',
-  '3317371897',
-  '3318184596',
-  '3319768647',
-  '3320829318',
-  '3321457753',
-  '3322156041',
-  '3326846086',
-  '3341054457',
-  '334796489',
-  '3348379104',
-  '3349409886',
-  '3353312560',
-  '3355368229',
-  '3355514211',
-  '3355865416',
-  '335855777',
-  '335993804',
-  '3361466716',
-  '3362397554',
-  '3367171293',
-  '3376790055',
-  '3377688480',
-  '3381390900',
-  '3381459707',
-  '3385268402',
-  '3385846727',
-  '3387204737',
-  '338844244',
-  '3390751743',
-  '3394315494',
-  '3394334006',
-  '3400713300',
-  '3402978750',
-  '3408249191',
-  '3412968150',
-  '3416831537',
-  '3422087589',
-  '3424311896',
-  '3426850699',
-  '3429649351',
-  '3432208034',
-  '3436742277',
-  '3437958748',
-  '3446215673',
-  '3447835494',
-  '3448620799',
-  '3450221390',
-  '3450932588',
-  '3451824873',
-  '3455711044',
-  '3458310975',
-  '3460779095',
-  '3464002149',
-  '3473901382',
-  '3478297609',
-  '3493836323',
-  '3494887100',
-  '3498056818',
-  '3500123957',
-  '3500124664',
-  '3501893757',
-  '3506413408',
-  '3512587025',
-  '351733085',
-  '3523014533',
-  '3523382932',
-  '35263365',
-  '353380306',
-  '3535681127',
-  '354082441',
-  '3546004700',
-  '3549522247',
-  '3550596029',
-  '3551433075',
-  '3552657708',
-  '3561349461',
-  '3568064118',
-  '3572504894',
-  '3574354948',
-  '3584992110',
-  '3585356855',
-  '3589838638',
-  '3591084947',
-  '3591311390',
-  '3594356251',
-  '3595155179',
-  '3601411955',
-  '3607050633',
-  '3616387476',
-  '3620312512',
-  '3623074634',
-  '3625642354',
-  '3625812674',
-  '3625817820',
-  '3626599030',
-  '3635562717',
-  '3638406088',
-  '363894702',
-  '3651158166',
-  '365125059',
-  '3652728877',
-  '3655120568',
-  '365605518',
-  '3656736643',
-  '3657625030',
-  '3662429216',
-  '3670522374',
-  '3673866953',
-  '3685844947',
-  '3692367215',
-  '3695202375',
-  '369644343',
-  '3699602083',
-  '3700425047',
-  '3700982698',
-  '3710911628',
-  '3711744991',
-  '3712090763',
-  '3715241048',
-  '3718288426',
-  '3720081763',
-  '3723719135',
-  '3724179151',
-  '3739222329',
-  '3739723588',
-  '3741803823',
-  '3742076373',
-  '3743398870',
-  '3747063085',
-  '3748953276',
-  '3751013831',
-  '3751563702',
-  '3759458978',
-  '3760821273',
-  '3768651282',
-  '3774834930',
-  '3782187505',
-  '3783616226',
-  '3785031815',
-  '3802272349',
-  '3803427289',
-  '3808515023',
-  '3817759242',
-  '3821795909',
-  '3828669497',
-  '3828921363',
-  '382915004',
-  '3835330948',
-  '3835931824',
-  '3838983789',
-  '3840525739',
-  '3841844405',
-  '3842213279',
-  '3855175500',
-  '3866956400',
-  '3867683259',
-  '3872981885',
-  '387441557',
-  '3882281943',
-  '3882775575',
-  '3887146960',
-  '3887937944',
-  '3902596111',
-  '3907965689',
-  '3909837387',
-  '3916735828',
-  '3919621757',
-  '3926983707',
-  '3931371606',
-  '3935672072',
-  '3942169396',
-  '39435537',
-  '3949846101',
-  '3950676371',
-  '3952253013',
-  '3952985875',
-  '3956139136',
-  '3960376034',
-  '3964022265',
-  '3965548152',
-  '3966987861',
-  '3969333164',
-  '3980734000',
-  '3981323989',
-  '3984520418',
-  '3984648422',
-  '398689081',
-  '3989863158',
-  '399163616',
-  '4011166599',
-  '4012569232',
-  '4015960781',
-  '402077837',
-  '4022635071',
-  '4031427958',
-  '4038419154',
-  '4038719404',
-  '4040963526',
-  '4045001232',
-  '4045348626',
-  '4047076163',
-  '4050194446',
-  '4051110478',
-  '4053566461',
-  '4062202631',
-  '4064403033',
-  '4067292809',
-  '4071169494',
-  '4072394641',
-  '4083044353',
-  '4084194935',
-  '4088806601',
-  '4092369519',
-  '4092664937',
-  '4096098894',
-  '4097039999',
-  '4098138342',
-  '4100429993',
-  '4101484574',
-  '4102232185',
-  '410737467',
-  '4107833758',
-  '4109200270',
-  '4118237066',
-  '4118683051',
-  '4120045721',
-  '4123031720',
-  '4123388433',
-  '4126100909',
-  '4127212193',
-  '4127351496',
-  '4129698325',
-  '4130370977',
-  '4136314176',
-  '4137128901',
-  '4137746800',
-  '4138310485',
-  '4138329786',
-  '4138748709',
-  '4139415765',
-  '4140762491',
-  '414191242',
-  '4143625838',
-  '4158727075',
-  '416271463',
-  '4162923732',
-  '4165850368',
-  '4166086783',
-  '4166688207',
-  '4171920376',
-  '4177803870',
-  '4188696195',
-  '4189589756',
-  '4189681769',
-  '4190697962',
-  '4192009492',
-  '4192906772',
-  '4194824130',
-  '4195946149',
-  '4197762186',
-  '4199121874',
-  '4200069764',
-  '4205027822',
-  '4205379393',
-  '4206479264',
-  '4214687327',
-  '4218607244',
-  '4220526267',
-  '4225558487',
-  '4236710113',
-  '4237053731',
-  '4237182114',
-  '4237691393',
-  '4239963767',
-  '4248203292',
-  '4249010776',
-  '4249223952',
-  '4265092200',
-  '4266729165',
-  '4269692612',
-  '4273375831',
-  '4278046063',
-  '4279918903',
-  '4280076006',
-  '4280929457',
-  '4282579220',
-  '4283958960',
-  '4286009170',
-  '4287324892',
-  '4288013307',
-  '428973607',
-  '4292132695',
-  '431449824',
-  '436035672',
-  '436895478',
-  '4389594',
-  '439949811',
-  '44587625',
-  '446783407',
-  '451861333',
-  '455553168',
-  '468972428',
-  '473408210',
-  '475325125',
-  '480050636',
-  '481608910',
-  '482157976',
-  '497560025',
-  '499586047',
-  '508331528',
-  '509623217',
-  '509801075',
-  '510469576',
-  '52068258',
-  '524581881',
-  '525657889',
-  '526607860',
-  '527981890',
-  '535848262',
-  '542002382',
-  '54455908',
-  '552831033',
-  '56119367',
-  '589348565',
-  '590180088',
-  '590449081',
-  '605645428',
-  '607649949',
-  '613252162',
-  '616398681',
-  '616652136',
-  '620434036',
-  '628256541',
-  '630124302',
-  '637590687',
-  '645596329',
-  '646925241',
-  '649068147',
-  '663752382',
-  '664849843',
-  '666552315',
-  '667284477',
-  '667802223',
-  '67153338',
-  '672304730',
-  '673490260',
-  '675617839',
-  '676286387',
-  '67750003',
-  '679088556',
-  '679226261',
-  '681317506',
-  '684496063',
-  '687924735',
-  '690204840',
-  '699169033',
-  '699554795',
-  '699835401',
-  '708478954',
-  '709875223',
-  '713842199',
-  '714291084',
-  '721006546',
-  '722659024',
-  '724181429',
-  '72862350',
-  '738209012',
-  '740460396',
-  '743664866',
-  '749072475',
-  '750731789',
-  '759835262',
-  '760180450',
-  '760645918',
-  '76243793',
-  '763580606',
-  '764546410',
-  '769246051',
-  '770400223',
-  '773697188',
-  '777846327',
-  '779185847',
-  '781950191',
-  '785278645',
-  '791888271',
-  '793360597',
-  '795111685',
-  '799038630',
-  '802940860',
-  '803626326',
-  '805461297',
-  '809525143',
-  '812914966',
-  '817596813',
-  '826702818',
-  '829747121',
-  '830059440',
-  '834917366',
-  '835348130',
-  '836634675',
-  '838130347',
-  '839663198',
-  '840748945',
-  '845690173',
-  '851918419',
-  '853535426',
-  '855882027',
-  '856215399',
-  '865387614',
-  '870075114',
-  '870901046',
-  '878041739',
-  '884037848',
-  '884942273',
-  '885000263',
-  '886030867',
-  '887992794',
-  '888009729',
-  '889471570',
-  '9021761',
-  '904920502',
-  '90677328',
-  '907695148',
-  '911963500',
-  '919166850',
-  '926902921',
-  '92732745',
-  '92829579',
-  '93038994',
-  '930681418',
-  '932642421',
-  '932940871',
-  '938755445',
-  '939810501',
-  '947303209',
-  '956771599',
-  '95816379',
-  '958749034',
-  '959889676',
-  '960466505',
-  '962380673',
-  '963095446',
-  '965728075',
-  '968466010',
-  '973612916',
-  '976603789',
-  '978364597',
-  '982152280',
-  '9851868',
-  '986539863',
-  '988140002',
-  '989444878',
-  '990312922',
-  '994801981',
-];
diff --git a/extensions/amp-story/0.1/page-advancement.js b/extensions/amp-story/0.1/page-advancement.js
deleted file mode 100644
index 746baea80363e..0000000000000
--- a/extensions/amp-story/0.1/page-advancement.js
+++ /dev/null
@@ -1,628 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {Services} from '../../../src/services';
-import {VideoEvents} from '../../../src/video-interface';
-import {closest} from '../../../src/dom';
-import {dev, user} from '../../../src/log';
-import {escapeCssSelectorIdent} from '../../../src/css';
-import {hasTapAction, timeStrToMillis} from './utils';
-import {listenOnce} from '../../../src/event-helper';
-import {map} from '../../../src/utils/object';
-
-/** @private @const {number} */
-const NEXT_SCREEN_AREA_RATIO = 0.75;
-
-/** @const {number} */
-export const POLL_INTERVAL_MS = 300;
-
-/** @const @enum */
-export const TapNavigationDirection = {
-  'NEXT': 1,
-  'PREVIOUS': 2,
-};
-
-/** @const */
-const PROTECTED_ELEMENTS = map({
-  A: true,
-  BUTTON: true,
-});
-
-/**
- * Base class for the AdvancementConfig.  By default, does nothing other than
- * tracking its internal state when started/stopped, and listeners will never be
- * invoked.
- */
-export class AdvancementConfig {
-  /**
-   * @public
-   */
-  constructor() {
-    /** @private @const {!Array<function(number)>} */
-    this.progressListeners_ = [];
-
-    /** @private @const {!Array<function()>} */
-    this.advanceListeners_ = [];
-
-    /** @private @const {!Array<function()>} */
-    this.previousListeners_ = [];
-
-    /** @private @const {!Array<function(number)>} */
-    this.tapNavigationListeners_ = [];
-
-    /** @private {boolean} */
-    this.isRunning_ = false;
-  }
-
-  /**
-   * @param {function(number)} progressListener A function that handles when the
-   *     progress of the current page has been updated.  It accepts a number
-   *     between 0.0 and 1.0 as its only argument, that represents the current
-   *     progress.
-   */
-  addProgressListener(progressListener) {
-    this.progressListeners_.push(progressListener);
-  }
-
-  /**
-   * @param {function()} advanceListener A function that handles when a
-   *     page should be advanced.
-   */
-  addAdvanceListener(advanceListener) {
-    this.advanceListeners_.push(advanceListener);
-  }
-
-  /**
-   * @param {function()} previousListener A function that handles when a
-   *     page should go back to the previous page.
-   */
-  addPreviousListener(previousListener) {
-    this.previousListeners_.push(previousListener);
-  }
-
-  /**
-   * @param {function(number)} onTapNavigationListener A function that handles when a
-   * navigation listener to be fired.
-   */
-  addOnTapNavigationListener(onTapNavigationListener) {
-    this.tapNavigationListeners_.push(onTapNavigationListener);
-  }
-
-  /**
-   * Invoked when the advancement configuration should begin taking effect.
-   */
-  start() {
-    this.isRunning_ = true;
-  }
-
-  /**
-   * Invoked when the advancement configuration should cease taking effect.
-   */
-  stop() {
-    this.isRunning_ = false;
-  }
-
-  /**
-   * @return {boolean}
-   * @protected
-   */
-  isRunning() {
-    return this.isRunning_;
-  }
-
-  /**
-   * @return {number}
-   * @protected
-   */
-  getProgress() {
-    return 1;
-  }
-
-  /** @protected */
-  onProgressUpdate() {
-    const progress = this.getProgress();
-    this.progressListeners_.forEach((progressListener) => {
-      progressListener(progress);
-    });
-  }
-
-  /** @protected */
-  onAdvance() {
-    this.advanceListeners_.forEach((advanceListener) => {
-      advanceListener();
-    });
-  }
-
-  /** @protected */
-  onPrevious() {
-    this.previousListeners_.forEach((previousListener) => {
-      previousListener();
-    });
-  }
-
-  /**
-   * @param {number} navigationDirection Direction of navigation
-   * @protected
-   */
-  onTapNavigation(navigationDirection) {
-    this.tapNavigationListeners_.forEach((navigationListener) => {
-      navigationListener(navigationDirection);
-    });
-  }
-
-  /**
-   * Provides an AdvancementConfig object for the specified amp-story-page.
-   * @param {!./amp-story-page.AmpStoryPage} page
-   * @return {!AdvancementConfig}
-   */
-  static forPage(page) {
-    const rootEl = page.element;
-    const win = /** @type {!Window} */ (rootEl.ownerDocument.defaultView);
-    const autoAdvanceStr = rootEl.getAttribute('auto-advance-after');
-
-    const supportedAdvancementModes = [
-      new ManualAdvancement(rootEl),
-      TimeBasedAdvancement.fromAutoAdvanceString(autoAdvanceStr, win),
-      MediaBasedAdvancement.fromAutoAdvanceString(autoAdvanceStr, win, rootEl),
-    ].filter((x) => x !== null);
-
-    if (supportedAdvancementModes.length === 0) {
-      return new AdvancementConfig();
-    }
-
-    if (supportedAdvancementModes.length === 1) {
-      return supportedAdvancementModes[0];
-    }
-
-    return new MultipleAdvancementConfig(supportedAdvancementModes);
-  }
-}
-
-/**
- * An AdvancementConfig implementation that composes multiple other
- * AdvancementConfig implementations by simply delegating all of its calls to
- * an array of underlying advancement modes.
- */
-class MultipleAdvancementConfig extends AdvancementConfig {
-  /**
-   * @param {!Array<!AdvancementConfig>} advancementModes A list of
-   *     AdvancementConfigs to which all calls should be delegated.
-   */
-  constructor(advancementModes) {
-    super();
-
-    /** @private @const {!Array<!AdvancementConfig>} */
-    this.advancementModes_ = advancementModes;
-  }
-
-  /** @override */
-  addProgressListener(progressListener) {
-    this.advancementModes_.forEach((advancementMode) => {
-      advancementMode.addProgressListener(progressListener);
-    });
-  }
-
-  /** @override */
-  addOnTapNavigationListener(onTapNavigationListener) {
-    this.advancementModes_.forEach((advancementMode) => {
-      advancementMode.addOnTapNavigationListener(onTapNavigationListener);
-    });
-  }
-
-  /** @override */
-  addAdvanceListener(advanceListener) {
-    this.advancementModes_.forEach((advancementMode) => {
-      advancementMode.addAdvanceListener(advanceListener);
-    });
-  }
-
-  /** @override */
-  addPreviousListener(previousListener) {
-    this.advancementModes_.forEach((advancementMode) => {
-      advancementMode.addPreviousListener(previousListener);
-    });
-  }
-
-  /** @override */
-  start() {
-    super.start();
-    this.advancementModes_.forEach((advancementMode) => {
-      advancementMode.start();
-    });
-  }
-
-  /** @override */
-  stop() {
-    super.stop();
-    this.advancementModes_.forEach((advancementMode) => {
-      advancementMode.stop();
-    });
-  }
-}
-
-/**
- * Always provides a progress of 1.0.  Advances when the user taps the rightmost
- * 75% of the screen; triggers the previous listener when the user taps the
- * leftmost 25% of the screen.
- */
-class ManualAdvancement extends AdvancementConfig {
-  /**
-   * @param {!Element} element The element that, when clicked, can cause
-   *     advancing to the next page or going back to the previous.
-   */
-  constructor(element) {
-    super();
-    this.element_ = element;
-    this.clickListener_ = this.maybePerformNavigation_.bind(this);
-    this.hasAutoAdvanceStr_ = this.element_.getAttribute('auto-advance-after');
-  }
-
-  /** @override */
-  start() {
-    super.start();
-    this.element_.addEventListener('click', this.clickListener_, true);
-    if (!this.hasAutoAdvanceStr_) {
-      super.onProgressUpdate();
-    }
-  }
-
-  /** @override */
-  stop() {
-    super.stop();
-    this.element_.removeEventListener('click', this.clickListener_, true);
-  }
-
-  /** @override */
-  getProgress() {
-    return 1.0;
-  }
-
-  /**
-   * Determines whether a click should be used for navigation.  Navigate should
-   * occur unless the click is on the system layer, or on an element that
-   * defines on="tap:..."
-   * @param {!Event} e 'click' event.
-   * @return {boolean} true, if the click should be used for navigation.
-   * @private
-   */
-  isNavigationalClick_(e) {
-    return !closest(
-      dev().assertElement(e.target),
-      (el) => {
-        return hasTapAction(el);
-      },
-      /* opt_stopAt */ this.element_
-    );
-  }
-
-  /**
-   * We want clicks on certain elements to be exempted from normal page
-   * navigation
-   * @param {!Event} event
-   * @return {boolean}
-   */
-  isProtectedTarget_(event) {
-    return !!closest(
-      dev().assertElement(event.target),
-      (el) => {
-        return PROTECTED_ELEMENTS[el.tagName];
-      },
-      /* opt_stopAt */ this.element_
-    );
-  }
-
-  /**
-   * Performs a system navigation if it is determined that the specified event
-   * was a click intended for navigation.
-   * @param {!Event} event 'click' event
-   * @private
-   */
-  maybePerformNavigation_(event) {
-    if (!this.isNavigationalClick_(event) || this.isProtectedTarget_(event)) {
-      // If the system doesn't need to handle this click, then we can simply
-      // return and let the event propagate as it would have otherwise.
-      return;
-    }
-
-    event.stopPropagation();
-
-    // TODO(newmuis): This will need to be flipped for RTL.
-    const elRect = this.element_./*OK*/ getBoundingClientRect();
-
-    // Using `left` as a fallback since Safari returns a ClientRect in some
-    // cases.
-    const offsetLeft = 'x' in elRect ? elRect.x : elRect.left;
-    const offsetWidth = elRect.width;
-
-    const nextScreenAreaMin =
-      offsetLeft + (1 - NEXT_SCREEN_AREA_RATIO) * offsetWidth;
-    const nextScreenAreaMax = offsetLeft + offsetWidth;
-
-    if (event.pageX >= nextScreenAreaMin && event.pageX < nextScreenAreaMax) {
-      this.onTapNavigation(TapNavigationDirection.NEXT);
-    } else if (event.pageX >= offsetLeft && event.pageX < nextScreenAreaMin) {
-      this.onTapNavigation(TapNavigationDirection.PREVIOUS);
-    }
-  }
-}
-
-/**
- * Provides progress and advancement based on a fixed duration of time,
- * specified in either seconds or milliseconds.
- */
-class TimeBasedAdvancement extends AdvancementConfig {
-  /**
-   * @param {!Window} win The Window object.
-   * @param {number} delayMs The duration to wait before advancing.
-   */
-  constructor(win, delayMs) {
-    super();
-
-    /** @private @const {!../../../src/service/timer-impl.Timer} */
-    this.timer_ = Services.timerFor(win);
-
-    /** @private @const {number} */
-    this.delayMs_ = delayMs;
-
-    /** @private {?number} */
-    this.startTimeMs_ = null;
-
-    /** @private {number|string|null} */
-    this.timeoutId_ = null;
-  }
-
-  /**
-   * @return {number} The current timestamp, in milliseconds.
-   * @private
-   */
-  getCurrentTimestampMs_() {
-    return Date.now();
-  }
-
-  /** @override */
-  start() {
-    super.start();
-    this.startTimeMs_ = this.getCurrentTimestampMs_();
-
-    this.timeoutId_ = this.timer_.delay(() => this.onAdvance(), this.delayMs_);
-
-    this.timer_.poll(POLL_INTERVAL_MS, () => {
-      this.onProgressUpdate();
-      return !this.isRunning();
-    });
-  }
-
-  /** @override */
-  stop() {
-    super.stop();
-
-    if (this.timeoutId_ !== null) {
-      this.timer_.cancel(this.timeoutId_);
-    }
-  }
-
-  /** @override */
-  getProgress() {
-    if (this.startTimeMs_ === null) {
-      return 0;
-    }
-
-    const progress =
-      (this.getCurrentTimestampMs_() - this.startTimeMs_) / this.delayMs_;
-
-    return Math.min(Math.max(progress, 0), 1);
-  }
-
-  /**
-   * Gets an instance of TimeBasedAdvancement based on the value of the
-   * auto-advance string (from the 'auto-advance-after' attribute on the page).
-   * @param {string} autoAdvanceStr The value of the auto-advance-after
-   *     attribute.
-   * @param {!Window} win
-   * @return {?AdvancementConfig} An AdvancementConfig, if time-based
-   *     auto-advance is supported for the specified auto-advance string; null
-   *     otherwise.
-   */
-  static fromAutoAdvanceString(autoAdvanceStr, win) {
-    if (!autoAdvanceStr) {
-      return null;
-    }
-
-    const delayMs = timeStrToMillis(autoAdvanceStr);
-    if (delayMs === undefined || isNaN(delayMs)) {
-      return null;
-    }
-
-    return new TimeBasedAdvancement(win, Number(delayMs));
-  }
-}
-
-/**
- * Provides progress and advances pages based on the completion percentage of
- * playback of an HTMLMediaElement or a video that implements the AMP
- * video-interface.
- *
- * These are combined into a single AdvancementConfig implementation because we
- * may not know at build time whether a video implements the AMP
- * video-interface, since that is dependent on the amp-video buildCallback
- * having been executed before the amp-story-page buildCallback, which is not
- * guaranteed.
- */
-class MediaBasedAdvancement extends AdvancementConfig {
-  /**
-   * @param {!Window} win
-   * @param {!Element} element
-   */
-  constructor(win, element) {
-    super();
-
-    /** @private @const {!../../../src/service/timer-impl.Timer} */
-    this.timer_ = Services.timerFor(win);
-
-    /** @private @const {!Element} */
-    this.element_ = element;
-
-    /** @private {?Element} */
-    this.mediaElement_ = null;
-
-    /** @private {?../../../src/video-interface.VideoInterface} */
-    this.video_ = null;
-  }
-
-  /**
-   * Determines whether the element for auto advancement implements the video
-   * interface.
-   * @return {boolean} true, if the specified element implements the video
-   *     interface.
-   * @private
-   */
-  isVideoInterfaceVideo_() {
-    return this.element_.classList.contains('i-amphtml-video-interface');
-  }
-
-  /**
-   * Gets an HTMLMediaElement from an element that wraps it.
-   * @return {?Element} The underlying HTMLMediaElement, if one exists.
-   * @private
-   */
-  getMediaElement_() {
-    const tagName = this.element_.tagName.toLowerCase();
-
-    if (this.element_ instanceof HTMLMediaElement) {
-      return this.element_;
-    } else if (
-      this.element_.hasAttribute('background-audio') &&
-      (tagName === 'amp-story' || tagName === 'amp-story-page')
-    ) {
-      return this.element_.querySelector('.i-amphtml-story-background-audio');
-    } else if (tagName === 'amp-audio') {
-      return this.element_.querySelector('audio');
-    }
-
-    return null;
-  }
-
-  /** @override */
-  start() {
-    super.start();
-
-    // Prevents race condition when checking for video interface classname.
-    (this.element_.whenBuilt
-      ? this.element_.whenBuilt()
-      : Promise.resolve()
-    ).then(() => this.startWhenBuilt_());
-  }
-
-  /** @private */
-  startWhenBuilt_() {
-    if (this.isVideoInterfaceVideo_()) {
-      this.startVideoInterfaceElement_();
-      return;
-    }
-
-    if (!this.mediaElement_) {
-      this.mediaElement_ = this.getMediaElement_();
-    }
-
-    if (this.mediaElement_) {
-      this.startHtmlMediaElement_();
-      return;
-    }
-
-    user().error(
-      'AMP-STORY-PAGE',
-      `Element with ID ${this.element_.id} is not a media element ` +
-        'supported for automatic advancement.'
-    );
-  }
-
-  /** @private */
-  startHtmlMediaElement_() {
-    const mediaElement = dev().assertElement(
-      this.mediaElement_,
-      'Media element was unspecified.'
-    );
-    listenOnce(mediaElement, 'ended', () => this.onAdvance());
-    listenOnce(mediaElement, 'timeupdate', () => this.onProgressUpdate());
-  }
-
-  /** @private */
-  startVideoInterfaceElement_() {
-    this.element_.getImpl().then((video) => {
-      this.video_ = video;
-    });
-
-    listenOnce(this.element_, VideoEvents.ENDED, () => this.onAdvance(), {
-      capture: true,
-    });
-
-    this.timer_.poll(POLL_INTERVAL_MS, () => {
-      this.onProgressUpdate();
-      return !this.isRunning();
-    });
-  }
-
-  /** @override */
-  stop() {
-    // We don't need to explicitly stop the polling or media events listed
-    // above, since they are already bound to either the playback of the media
-    // on the page, or the isRunning state of this AdvancementConfig.
-    super.stop();
-  }
-
-  /** @override */
-  getProgress() {
-    if (this.isVideoInterfaceVideo_()) {
-      if (this.video_ && this.video_.getDuration()) {
-        return this.video_.getCurrentTime() / this.video_.getDuration();
-      }
-
-      return 0;
-    }
-
-    if (this.mediaElement_ && this.mediaElement_.duration) {
-      return this.mediaElement_.currentTime / this.mediaElement_.duration;
-    }
-
-    return super.getProgress();
-  }
-
-  /**
-   * Gets an instance of MediaBasedAdvancement based on the value of the
-   * auto-advance string (from the 'auto-advance-after' attribute on the page).
-   * @param {string} autoAdvanceStr The value of the auto-advance-after
-   *     attribute.
-   * @param {!Window} win
-   * @param {!Element} rootEl
-   * @return {?AdvancementConfig} An AdvancementConfig, if media-element-based
-   *     auto-advance is supported for the specified auto-advance string; null
-   *     otherwise.
-   */
-  static fromAutoAdvanceString(autoAdvanceStr, win, rootEl) {
-    try {
-      const element = rootEl.querySelector(
-        `#${escapeCssSelectorIdent(autoAdvanceStr)}`
-      );
-
-      if (!element) {
-        return null;
-      }
-
-      return new MediaBasedAdvancement(win, element);
-    } catch (e) {
-      return null;
-    }
-  }
-}
diff --git a/extensions/amp-story/0.1/page-element.js b/extensions/amp-story/0.1/page-element.js
deleted file mode 100644
index a9331cc4f6ac1..0000000000000
--- a/extensions/amp-story/0.1/page-element.js
+++ /dev/null
@@ -1,415 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {dev} from '../../../src/log';
-import {scopedQuerySelectorAll} from '../../../src/dom';
-
-/**
- * A map of elements to delay showing the page.  The key is a DOM query to find
- * all elements that should wait for the specified event; the value is a factory
- * method that will return a PageElement to define rendering and loading
- * strategies.
- *
- * @const {!Object<string,
- *     !function(!Element, !./amp-story-page.AmpStoryPage): !PageElement>}
- */
-const PAGE_ELEMENT_FACTORIES = {
-  'amp-audio, amp-video, .i-amphtml-story-background-audio': (element, page) =>
-    new MediaElement(element, page),
-  'amp-img, amp-anim': (element, page) => new ImageElement(element, page),
-  '.i-amphtml-video-interface': (element, page) =>
-    new VideoInterfaceElement(element, page),
-};
-
-/**
- * CSS class for an element on an amp-story-page.
- * @const {string}
- */
-const ELEMENT_CLASS_NAME = 'i-amphtml-story-page-element';
-
-/**
- * CSS class for an element on an amp-story-page that indicates the element is
- * loaded.
- * @const {string}
- */
-const ELEMENT_LOADED_CLASS_NAME = 'i-amphtml-story-page-element-loaded';
-
-/**
- * CSS class for an element on an amp-story-page that indicates the element can
- * be shown in the UI.
- * @const {string}
- */
-const ELEMENT_SHOW_CLASS_NAME = 'i-amphtml-story-page-element-shown';
-
-/**
- * CSS class for an element on an amp-story-page that indicates the element has
- * failed to load.
- * @const {string}
- */
-const ELEMENT_FAILED_CLASS_NAME = 'i-amphtml-story-page-element-failed';
-
-/**
- * CSS class for an element on an amp-story-page that indicates the element was
- * hidden by a media query rule.
- * @const {string}
- */
-const HIDDEN_BY_MEDIA_QUERY_CLASS_NAME = 'i-amphtml-hidden-by-media-query';
-
-/**
- * The minimum amount of a media item (by percentage) that must be loaded in
- * order for that element to be considered "loaded".  Note that if the total
- * size cannot be determined, this criteria is simply ignored.
- */
-const MINIMUM_MEDIA_BUFFER_PERCENTAGE_FROM_BEGINNING = 0.25;
-
-/**
- * The minimum amount of a media item (in seconds) that must be loaded in order
- * for that element to be considered "loaded".
- */
-const MINIMUM_MEDIA_BUFFER_SECONDS_FROM_BEGINNING = 3;
-
-/**
- * Represents a single element on an <amp-story-page> that can affect the system
- * layer (e.g. by blocking loading or requiring an audio indicator).
- */
-export class PageElement {
-  /**
-   * @param {!Element} element The element on the page.
-   * @param {!./amp-story-page.AmpStoryPage} page The page that the element is on.
-   */
-  constructor(element, page) {
-    /** @protected @const {!Element} */
-    this.element = element;
-    this.element.classList.add(ELEMENT_CLASS_NAME);
-
-    /** @protected @const {!./amp-story-page.AmpStoryPage} */
-    this.page = page;
-
-    /** @public {boolean} */
-    this.isLoaded = false;
-
-    /** @public {boolean} */
-    this.canBeShown = false;
-
-    /** @public {boolean} */
-    this.hasFailed = false;
-  }
-
-  /**
-   * @return {boolean} Whether this element can be shown.
-   * @protected
-   */
-  canBeShown_() {
-    return false;
-  }
-
-  /**
-   * @return {boolean} Whether this element is considered loaded.
-   * @protected
-   */
-  isLoaded_() {
-    return false;
-  }
-
-  /**
-   * @return {boolean} Whether this element has failed to load.
-   * @protected
-   */
-  hasFailed_() {
-    return false;
-  }
-
-  /**
-   * Updates the isLoaded, canBeShown, and hasFailed boolean states.
-   */
-  updateState() {
-    if (!this.isLoaded && !this.hasFailed) {
-      this.isLoaded = this.isLoaded_();
-      this.element.classList.toggle(
-        ELEMENT_LOADED_CLASS_NAME,
-        /* force */ this.isLoaded
-      );
-    }
-
-    if (!this.hasFailed && !this.isLoaded) {
-      this.hasFailed = this.hasFailed_();
-      this.element.classList.toggle(
-        ELEMENT_FAILED_CLASS_NAME,
-        /* force */ this.hasFailed
-      );
-    }
-
-    if (!this.canBeShown) {
-      this.canBeShown = this.canBeShown_() || this.isLoaded;
-      this.element.classList.toggle(
-        ELEMENT_SHOW_CLASS_NAME,
-        /* force */ this.canBeShown
-      );
-    }
-  }
-
-  /**
-   * @return {boolean}
-   */
-  isHiddenByMediaQuery() {
-    return this.element.classList.contains(HIDDEN_BY_MEDIA_QUERY_CLASS_NAME);
-  }
-
-  /**
-   * Called when the page the element is on becomes active.
-   */
-  resumeCallback() {}
-
-  /**
-   * Called when the page the element is on is no longer active.
-   */
-  pauseCallback() {}
-
-  /**
-   * @return {boolean} Whether this element produces audio.
-   */
-  hasAudio() {
-    return false;
-  }
-
-  /**
-   * @param {!./amp-story-page.AmpStoryPage} page
-   * @return {!Array<!PageElement>}
-   */
-  static getElementsFromPage(page) {
-    const pageElements = [];
-
-    Object.keys(PAGE_ELEMENT_FACTORIES).forEach((query) => {
-      const elements = scopedQuerySelectorAll(page.element, query);
-      const factory = PAGE_ELEMENT_FACTORIES[query];
-      Array.prototype.forEach.call(elements, (element) => {
-        const pageElement = factory(element, page);
-        pageElements.push(pageElement);
-      });
-    });
-
-    return pageElements;
-  }
-}
-
-/**
- * Media element.
- */
-class MediaElement extends PageElement {
-  /**
-   * @param {!Element} element The element on the page.
-   * @param {!./amp-story-page.AmpStoryPage} page The page that the element is on.
-   */
-  constructor(element, page) {
-    super(element, page);
-
-    /** @private {?HTMLMediaElement} */
-    this.mediaElement_ = null;
-
-    /** @private {boolean} */
-    this.manualLoadInitiatedOnBuild_ = false;
-  }
-
-  /**
-   * @return {?HTMLMediaElement}
-   * @private
-   */
-  getMediaElement_() {
-    if (this.element instanceof HTMLMediaElement) {
-      this.mediaElement_ = this.element;
-    } else if (!this.mediaElement_) {
-      const el = this.element.querySelector('audio, video');
-      if (el instanceof HTMLMediaElement) {
-        this.mediaElement_ = /** @type {!HTMLMediaElement} */ (el);
-      }
-    }
-    return this.mediaElement_;
-  }
-
-  /** @override */
-  canBeShown_() {
-    const mediaElement = this.getMediaElement_();
-    if (!mediaElement) {
-      return false;
-    }
-
-    return mediaElement.readyState >= 2 || mediaElement.hasAttribute('poster');
-  }
-
-  /** @override */
-  resumeCallback() {
-    this.maybeManuallyForceLoading_();
-  }
-
-  /** @private */
-  maybeManuallyForceLoading_() {
-    const mediaElement = this.getMediaElement_();
-    if (
-      !mediaElement ||
-      (mediaElement.buffered && mediaElement.buffered.length > 0)
-    ) {
-      return;
-    }
-
-    mediaElement.load();
-  }
-
-  /** @override */
-  isLoaded_() {
-    const mediaElement = this.getMediaElement_();
-    const firstTimeRangeOrNull = this.getFirstTimeRange_();
-
-    if (!mediaElement) {
-      return false;
-    }
-
-    if (!mediaElement.buffered || mediaElement.buffered.length === 0) {
-      if (!this.manualLoadInitiatedOnBuild_) {
-        this.maybeManuallyForceLoading_();
-        this.manualLoadInitiatedOnBuild_ = true;
-      }
-      return false;
-    }
-
-    const firstTimeRange = dev().assertNumber(
-      firstTimeRangeOrNull,
-      'No first time range was found, despite media element existing.'
-    );
-    const bufferedSeconds = mediaElement.buffered.end(firstTimeRange);
-    const bufferedPercentage =
-      mediaElement.buffered.end(firstTimeRange) / mediaElement.duration;
-
-    return (
-      bufferedSeconds >= MINIMUM_MEDIA_BUFFER_SECONDS_FROM_BEGINNING ||
-      bufferedPercentage >= MINIMUM_MEDIA_BUFFER_PERCENTAGE_FROM_BEGINNING
-    );
-  }
-
-  /** @override */
-  hasFailed_() {
-    const mediaElement = this.getMediaElement_();
-    return !!mediaElement.error;
-  }
-
-  /**
-   * @return {?number} The numbered index of the first buffered time range in
-   *     this media element.
-   */
-  getFirstTimeRange_() {
-    const mediaElement = this.getMediaElement_();
-    if (mediaElement) {
-      for (let i = 0; i < mediaElement.buffered.length; i++) {
-        if (mediaElement.buffered.start(i) === 0) {
-          return i;
-        }
-      }
-    }
-
-    return null;
-  }
-
-  /** @override */
-  hasAudio() {
-    return true;
-  }
-}
-
-/**
- * Image element.
- */
-class ImageElement extends PageElement {
-  /**
-   * @param {!Element} element The element on the page.
-   * @param {!./amp-story-page.AmpStoryPage} page The page that the element is on.
-   */
-  constructor(element, page) {
-    super(element, page);
-
-    /**
-     * @private {?HTMLImageElement}
-     */
-    this.imageElement_ = null;
-  }
-
-  /**
-   * @return {?HTMLImageElement}
-   * @private
-   */
-  getImageElement_() {
-    if (this.element instanceof HTMLImageElement) {
-      this.imageElement_ = this.element;
-    } else if (!this.imageElement_) {
-      const el = this.element.querySelector('img');
-      if (el instanceof HTMLImageElement) {
-        this.imageElement_ = /** @type {!HTMLImageElement} */ (el);
-      }
-    }
-    return this.imageElement_;
-  }
-
-  /** @override */
-  isLoaded_() {
-    const imageElement = this.getImageElement_();
-    return Boolean(
-      imageElement &&
-        imageElement.complete &&
-        imageElement.naturalWidth &&
-        imageElement.naturalHeight
-    );
-  }
-
-  /** @override */
-  hasFailed_() {
-    const imageElement = this.getImageElement_();
-    return Boolean(
-      imageElement &&
-        imageElement.complete &&
-        (imageElement.naturalWidth === 0 || imageElement.naturalHeight === 0)
-    );
-  }
-
-  /** @override */
-  hasAudio() {
-    return false;
-  }
-}
-
-/**
- * Video interface.
- */
-class VideoInterfaceElement extends PageElement {
-  /**
-   * @private
-   * @return {*} TODO(#23582): Specify return type
-   */
-  isLaidOut_() {
-    return this.element.hasAttribute('i-amphtml-layout');
-  }
-
-  /** @override */
-  isLoaded_() {
-    return this.isLaidOut_();
-  }
-
-  /** @override */
-  hasFailed_() {
-    return !this.isLaidOut_();
-  }
-
-  /** @override */
-  hasAudio() {
-    return true;
-  }
-}
diff --git a/extensions/amp-story/0.1/pagination-buttons.js b/extensions/amp-story/0.1/pagination-buttons.js
deleted file mode 100644
index 316c793e8ff68..0000000000000
--- a/extensions/amp-story/0.1/pagination-buttons.js
+++ /dev/null
@@ -1,227 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {Action} from './amp-story-store-service';
-import {EventType, dispatch} from './events';
-import {Services} from '../../../src/services';
-import {StateChangeType} from './navigation-state';
-import {devAssert} from '../../../src/log';
-import {dict} from './../../../src/utils/object';
-import {renderAsElement} from './simple-template';
-
-/** @struct @typedef {{className: string, triggers: (string|undefined)}} */
-let ButtonState_0_1_Def; // eslint-disable-line google-camelcase/google-camelcase
-
-/** @const {!Object<string, !ButtonState_0_1_Def>} */
-const BackButtonStates = {
-  CLOSE_BOOKEND: {
-    className: 'i-amphtml-story-back-close-bookend',
-    action: Action.TOGGLE_BOOKEND,
-    data: false,
-  },
-  HIDDEN: {className: 'i-amphtml-story-button-hidden'},
-  PREVIOUS_PAGE: {
-    className: 'i-amphtml-story-back-prev',
-    triggers: EventType.PREVIOUS_PAGE,
-  },
-};
-
-/** @const {!Object<string, !ButtonState_0_1_Def>} */
-const ForwardButtonStates = {
-  NEXT_PAGE: {
-    className: 'i-amphtml-story-fwd-next',
-    triggers: EventType.NEXT_PAGE,
-  },
-  REPLAY: {
-    className: 'i-amphtml-story-fwd-replay',
-    triggers: EventType.REPLAY,
-  },
-  SHOW_BOOKEND: {
-    className: 'i-amphtml-story-fwd-more',
-    action: Action.TOGGLE_BOOKEND,
-    data: true,
-  },
-};
-
-/** @private @const {!./simple-template.ElementDef} */
-const BUTTON = {
-  tag: 'div',
-  attrs: dict({'class': 'i-amphtml-story-button-container'}),
-  children: [
-    {
-      tag: 'button',
-      attrs: dict({'class': 'i-amphtml-story-button-move'}),
-    },
-    {
-      tag: 'div',
-      attrs: dict({'class': 'i-amphtml-story-page-sentinel'}),
-    },
-  ],
-};
-
-/**
- * @param {!Element} hoverEl
- * @param {!Element} targetEl
- * @param {string} className
- */
-function setClassOnHover(hoverEl, targetEl, className) {
-  hoverEl.addEventListener('mouseenter', () => {
-    targetEl.classList.add(className);
-  });
-  hoverEl.addEventListener('mouseleave', () => {
-    targetEl.classList.remove(className);
-  });
-}
-
-/**
- * Desktop navigation buttons.
- */
-class PaginationButton {
-  /**
-   * @param {!Document} doc
-   * @param {!ButtonState_0_1_Def} initialState
-   * @param {!./amp-story-store-service.AmpStoryStoreService} storeService
-   */
-  constructor(doc, initialState, storeService) {
-    /** @private {!ButtonState_0_1_Def} */
-    this.state_ = initialState;
-
-    /** @public @const {!Element} */
-    this.element = renderAsElement(doc, BUTTON);
-
-    this.element.classList.add(initialState.className);
-
-    this.element.addEventListener('click', (e) => this.onClick_(e));
-
-    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
-    this.storeService_ = storeService;
-  }
-
-  /** @param {!ButtonState_0_1_Def} state */
-  updateState(state) {
-    if (state === this.state_) {
-      return;
-    }
-    this.element.classList.remove(this.state_.className);
-    this.element.classList.add(state.className);
-    this.state_ = state;
-  }
-
-  /**
-   * @param {!Event} e
-   * @private
-   */
-  onClick_(e) {
-    e.preventDefault();
-    if (this.state_.triggers) {
-      dispatch(
-        this.element,
-        devAssert(this.state_.triggers),
-        /* opt_bubbles */ true
-      );
-      return;
-    }
-    if (this.state_.action) {
-      this.storeService_.dispatch(this.state_.action, this.state_.data);
-      return;
-    }
-  }
-}
-
-/** Pagination buttons layer. */
-export class PaginationButtons {
-  /** @param {!Window} win */
-  constructor(win) {
-    const doc = win.document;
-    const storeService = Services.storyStoreServiceV01(win);
-
-    /** @private @const {!PaginationButton} */
-    this.forwardButton_ = new PaginationButton(
-      doc,
-      ForwardButtonStates.NEXT_PAGE,
-      storeService
-    );
-
-    /** @private @const {!PaginationButton} */
-    this.backButton_ = new PaginationButton(
-      doc,
-      BackButtonStates.HIDDEN,
-      storeService
-    );
-
-    this.forwardButton_.element.classList.add('next-container');
-    this.backButton_.element.classList.add('prev-container');
-  }
-
-  /**
-   * @param {!Window} win
-   * @return {!PaginationButtons}
-   */
-  static create(win) {
-    return new PaginationButtons(win);
-  }
-
-  /** @param {!Element} element */
-  attach(element) {
-    setClassOnHover(
-      this.forwardButton_.element,
-      element,
-      'i-amphtml-story-next-hover'
-    );
-
-    setClassOnHover(
-      this.backButton_.element,
-      element,
-      'i-amphtml-story-prev-hover'
-    );
-
-    element.appendChild(this.forwardButton_.element);
-    element.appendChild(this.backButton_.element);
-  }
-
-  /** @param {!./navigation-state.StateChangeEventDef} event */
-  onNavigationStateChange(event) {
-    switch (event.type) {
-      case StateChangeType.ACTIVE_PAGE:
-        const {pageIndex, totalPages} = event.value;
-
-        this.backButton_.updateState(
-          pageIndex === 0
-            ? BackButtonStates.HIDDEN
-            : BackButtonStates.PREVIOUS_PAGE
-        );
-
-        this.forwardButton_.updateState(
-          pageIndex === totalPages - 1
-            ? ForwardButtonStates.SHOW_BOOKEND
-            : ForwardButtonStates.NEXT_PAGE
-        );
-        break;
-
-      case StateChangeType.BOOKEND_ENTER:
-        this.backButton_.updateState(BackButtonStates.CLOSE_BOOKEND);
-        break;
-
-      case StateChangeType.BOOKEND_EXIT:
-        this.backButton_.updateState(BackButtonStates.PREVIOUS_PAGE);
-        this.forwardButton_.updateState(ForwardButtonStates.SHOW_BOOKEND);
-        break;
-
-      case StateChangeType.END:
-        this.forwardButton_.updateState(ForwardButtonStates.REPLAY);
-        break;
-    }
-  }
-}
diff --git a/extensions/amp-story/0.1/progress-bar.js b/extensions/amp-story/0.1/progress-bar.js
deleted file mode 100644
index 450e4e08b4eb2..0000000000000
--- a/extensions/amp-story/0.1/progress-bar.js
+++ /dev/null
@@ -1,200 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {POLL_INTERVAL_MS} from './page-advancement';
-import {Services} from '../../../src/services';
-import {dev, devAssert} from '../../../src/log';
-import {escapeCssSelectorNth} from '../../../src/css';
-import {hasOwn, map} from '../../../src/utils/object';
-import {scale, setImportantStyles} from '../../../src/style';
-import {scopedQuerySelector} from '../../../src/dom';
-
-/**
- * Transition used to show the progress of a media. Has to be linear so the
- * animation is smooth and constant.
- * @const {string}
- */
-const TRANSITION_LINEAR = `transform ${POLL_INTERVAL_MS}ms linear`;
-
-/**
- * Transition used to fully fill or unfill a progress bar item.
- * @const {string}
- */
-const TRANSITION_EASE = 'transform 200ms ease';
-
-/**
- * Progress bar for <amp-story>.
- */
-export class ProgressBar {
-  /**
-   * @param {!Window} win
-   */
-  constructor(win) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private {boolean} */
-    this.isBuilt_ = false;
-
-    /** @private {?Element} */
-    this.root_ = null;
-
-    /** @private {number} */
-    this.segmentCount_ = 0;
-
-    /** @private {number} */
-    this.activeSegmentIndex_ = 0;
-
-    /** @private @const {!../../../src/service/vsync-impl.Vsync} */
-    this.vsync_ = Services.vsyncFor(this.win_);
-
-    /** @private {!Object<string, number>} */
-    this.segmentIdMap_ = map();
-  }
-
-  /**
-   * @param {!Window} win
-   * @return {!ProgressBar}
-   */
-  static create(win) {
-    return new ProgressBar(win);
-  }
-
-  /**
-   * @param {!Array<string>} segmentIds The id of each segment in the story.
-   * @return {!Element}
-   */
-  build(segmentIds) {
-    if (this.isBuilt_) {
-      return this.getRoot();
-    }
-
-    const segmentCount = segmentIds.length;
-    devAssert(segmentCount > 0);
-
-    this.isBuilt_ = true;
-    this.segmentCount_ = segmentCount;
-
-    segmentIds.forEach((id, i) => (this.segmentIdMap_[id] = i));
-
-    this.root_ = this.win_.document.createElement('ol');
-    this.root_.classList.add('i-amphtml-story-progress-bar');
-
-    for (let i = 0; i < this.segmentCount_; i++) {
-      const segmentProgressBar = this.win_.document.createElement('li');
-      segmentProgressBar.classList.add('i-amphtml-story-page-progress-bar');
-      const segmentProgressValue = this.win_.document.createElement('div');
-      segmentProgressValue.classList.add('i-amphtml-story-page-progress-value');
-      segmentProgressBar.appendChild(segmentProgressValue);
-      this.root_.appendChild(segmentProgressBar);
-    }
-
-    return this.getRoot();
-  }
-
-  /**
-   * @return {!Element}
-   */
-  getRoot() {
-    return dev().assertElement(this.root_);
-  }
-
-  /**
-   * @param {string} segmentId The index of the new active segment.
-   * @public
-   */
-  setActiveSegmentId(segmentId) {
-    this.assertVaildSegmentId_(segmentId);
-    const segmentIndex = this.segmentIdMap_[segmentId];
-
-    for (let i = 0; i < this.segmentCount_; i++) {
-      if (i < segmentIndex) {
-        this.updateProgressByIndex_(
-          i,
-          1.0,
-          /* withTransition */ i == segmentIndex - 1
-        );
-      } else {
-        // The active segment manages its own progress by firing PAGE_PROGRESS
-        // events to amp-story.
-        this.updateProgressByIndex_(
-          i,
-          0.0,
-          /* withTransition */ segmentIndex != 0 &&
-            this.activeSegmentIndex_ != 1
-        );
-      }
-    }
-  }
-
-  /**
-   * @param {string} segmentId The index to assert validity
-   * @private
-   */
-  assertVaildSegmentId_(segmentId) {
-    devAssert(
-      hasOwn(this.segmentIdMap_, segmentId),
-      'Invalid segment-id passed to progress-bar'
-    );
-  }
-
-  /**
-   * The
-   * @param {string} segmentId the id of the segment whos progress to change
-   * @param {number} progress A number from 0.0 to 1.0, representing the
-   *     progress of the current segment.
-   */
-  updateProgress(segmentId, progress) {
-    this.assertVaildSegmentId_(segmentId);
-    const segmentIndex = this.segmentIdMap_[segmentId];
-    this.updateProgressByIndex_(segmentIndex, progress);
-  }
-
-  /**
-   * @param {number} segmentIndex The index of the progress bar segment whose progress should be
-   *     changed.
-   * @param {number} progress A number from 0.0 to 1.0, representing the
-   *     progress of the current segment.
-   * @param {boolean=} withTransition
-   * @public
-   */
-  updateProgressByIndex_(segmentIndex, progress, withTransition = true) {
-    this.activeSegmentIndex_ = segmentIndex;
-
-    // Offset the index by 1, since nth-child indices start at 1 while
-    // JavaScript indices start at 0.
-    const nthChildIndex = segmentIndex + 1;
-    const progressEl = scopedQuerySelector(
-      this.getRoot(),
-      `.i-amphtml-story-page-progress-bar:nth-child(${escapeCssSelectorNth(
-        nthChildIndex
-      )}) .i-amphtml-story-page-progress-value`
-    );
-    this.vsync_.mutate(() => {
-      let transition = 'none';
-      if (withTransition) {
-        // Using an eased transition only if filling the bar to 0 or 1.
-        transition =
-          progress === 1 || progress === 0
-            ? TRANSITION_EASE
-            : TRANSITION_LINEAR;
-      }
-      setImportantStyles(dev().assertElement(progressEl), {
-        'transform': scale(`${progress},1`),
-        'transition': transition,
-      });
-    });
-  }
-}
diff --git a/extensions/amp-story/0.1/related-articles.js b/extensions/amp-story/0.1/related-articles.js
deleted file mode 100644
index 00fa1af8c502f..0000000000000
--- a/extensions/amp-story/0.1/related-articles.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {devAssert, user, userAssert} from '../../../src/log';
-import {
-  getSourceOrigin,
-  isProtocolValid,
-  parseUrlDeprecated,
-} from '../../../src/url';
-
-const TAG = 'amp-story';
-
-/**
- * @typedef {{
- *   title: string,
- *   url: string,
- *   domainName: string,
- *   image: (string|undefined),
- * }}
- */
-export let RelatedArticleDef;
-
-/**
- * @typedef {{
- *   heading: (string|undefined),
- *   articles: !Array<!RelatedArticleDef>,
- * }}
- */
-export let RelatedArticleSetDef;
-
-/** New bookend components only supported in amp-story 1.0. */
-const NEW_COMPONENTS = [
-  'landscape',
-  'portrait',
-  'cta-link',
-  'heading',
-  'textbox',
-];
-
-/**
- * @param {!JsonObject} articleJson
- * @return {?RelatedArticleDef}
- */
-function buildArticleFromJson_(articleJson) {
-  if (!articleJson['title'] || !articleJson['url']) {
-    user().error(
-      TAG,
-      'Articles must contain `title` and `url` fields, skipping invalid.'
-    );
-    return null;
-  }
-
-  const articleUrl = devAssert(articleJson['url']);
-  userAssert(
-    isProtocolValid(articleUrl),
-    `Unsupported protocol for article URL ${articleUrl}`
-  );
-
-  let domain;
-  try {
-    domain = parseUrlDeprecated(getSourceOrigin(articleUrl)).hostname;
-  } catch (e) {
-    // Unknown path prefix in url.
-    domain = parseUrlDeprecated(articleUrl).hostname;
-  }
-
-  const article = {
-    title: devAssert(articleJson['title']),
-    url: articleUrl,
-    domainName: domain,
-  };
-
-  if (articleJson['image']) {
-    userAssert(
-      isProtocolValid(articleJson['image']),
-      `Unsupported protocol for article image URL ${articleJson['image']}`
-    );
-    article.image = devAssert(articleJson['image']);
-  }
-
-  return /** @type {!RelatedArticleDef} */ (article);
-}
-
-/**
- * @param {!JsonObject=} opt_articleSetsResponse
- * @return {!Array<!RelatedArticleSetDef>}
- */
-export function relatedArticlesFromJson(opt_articleSetsResponse) {
-  return /** @type {!Array<!RelatedArticleSetDef>} */ (Object.keys(
-    opt_articleSetsResponse || {}
-  ).map((headingKey) => {
-    const articleSet = {
-      articles: opt_articleSetsResponse[headingKey]
-        .map(buildArticleFromJson_)
-        .filter((valid) => !!valid),
-    };
-
-    if (headingKey.trim().length) {
-      articleSet.heading = headingKey;
-    }
-
-    return /** @type {!RelatedArticleSetDef} */ (articleSet);
-  }));
-}
-
-/**
- * @param {!Array<!JsonObject>} bookendComponents
- * @return {!Array<!RelatedArticleSetDef>}
- */
-export function parseArticlesToClassicApi(bookendComponents) {
-  const articleSet = {};
-  articleSet.articles = [];
-
-  bookendComponents.forEach((component) => {
-    if (component['type'] == 'small') {
-      articleSet.articles.push(buildArticleFromJson_(component));
-    } else if (NEW_COMPONENTS.includes(component['type'])) {
-      user().warn(
-        TAG,
-        component['type'] +
-          ' is not supported in ' +
-          'amp-story-0.1, upgrade to v1.0 to use this feature.'
-      );
-    } else {
-      user().warn(TAG, component['type'] + ' is not valid, skipping invalid.');
-    }
-  });
-
-  const articles = [];
-  articles.push(articleSet);
-  return articles;
-}
diff --git a/extensions/amp-story/0.1/simple-template.js b/extensions/amp-story/0.1/simple-template.js
deleted file mode 100644
index b2aaa585c6730..0000000000000
--- a/extensions/amp-story/0.1/simple-template.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {LocalizedStringId} from '../../../src/localized-strings'; // eslint-disable-line no-unused-vars
-
-import {createElementWithAttributes} from '../../../src/dom';
-import {devAssert} from '../../../src/log';
-import {getLocalizationService} from './amp-story-localization-service';
-import {isArray} from '../../../src/types';
-
-/**
- * @typedef {{
- *   tag: string,
- *   attrs: (!JsonObject|undefined),
- *   localizedStringId: (!LocalizedStringId|undefined),
- *   unlocalizedString: (string|undefined),
- *   children: (!Array<!ElementDef>|undefined),
- * }}
- */
-export let ElementDef;
-
-/**
- * @param {!Document} doc
- * @param {!ElementDef|!Array<!ElementDef>} elementsDef
- * @return {!Node}
- */
-export function renderSimpleTemplate(doc, elementsDef) {
-  if (isArray(elementsDef)) {
-    return renderMulti(doc, /** @type {!Array<!ElementDef>} */ (elementsDef));
-  }
-  return renderSingle(doc, /** @type {!ElementDef} */ (elementsDef));
-}
-
-/**
- * @param {!Document} doc
- * @param {!ElementDef} elementDef
- * @return {!Element}
- */
-export function renderAsElement(doc, elementDef) {
-  return renderSingle(doc, elementDef);
-}
-
-/**
- * @param {!Document} doc
- * @param {!Array<!ElementDef>} elementsDef
- * @return {!Node}
- */
-function renderMulti(doc, elementsDef) {
-  const fragment = doc.createDocumentFragment();
-  elementsDef.forEach((elementDef) =>
-    fragment.appendChild(renderSingle(doc, elementDef))
-  );
-  return fragment;
-}
-
-/**
- * @param {!Document} doc
- * @param {!ElementDef} elementDef
- * @return {!Element}
- */
-function renderSingle(doc, elementDef) {
-  const el = elementDef.attrs
-    ? createElementWithAttributes(doc, elementDef.tag, elementDef.attrs)
-    : doc.createElement(elementDef.tag);
-
-  if (elementDef.localizedStringId) {
-    const localizationService = getLocalizationService(devAssert(doc.body));
-
-    devAssert(localizationService, 'Could not retrieve LocalizationService.');
-    el.textContent = localizationService.getLocalizedString(
-      /** @type {!LocalizedStringId} */ (elementDef.localizedStringId)
-    );
-  }
-
-  if (elementDef.unlocalizedString) {
-    el.textContent = elementDef.unlocalizedString;
-  }
-
-  if (elementDef.children) {
-    el.appendChild(renderMulti(doc, elementDef.children));
-  }
-
-  return el;
-}
diff --git a/extensions/amp-story/0.1/sources.js b/extensions/amp-story/0.1/sources.js
deleted file mode 100644
index 12dea08ee2b49..0000000000000
--- a/extensions/amp-story/0.1/sources.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {ampMediaElementFor} from './utils';
-import {removeElement} from '../../../src/dom';
-
-/**
- * Class handling HTMLMediaElements sources.
- */
-export class Sources {
-  /**
-   * @param {?string=} opt_srcAttr The 'src' attribute of the media element.
-   * @param {?IArrayLike<!Element>=} opt_srcEls Any child <source> tags of the
-   *     media element.
-   * @param {?IArrayLike<!Element>=} opt_trackEls Any child <track> tags of the
-   *     media element.
-   */
-  constructor(opt_srcAttr, opt_srcEls, opt_trackEls) {
-    /** @private @const {?string} */
-    this.srcAttr_ = opt_srcAttr && opt_srcAttr.length ? opt_srcAttr : null;
-
-    /** @private @const {!IArrayLike<!Element>} */
-    this.srcEls_ = opt_srcEls || [];
-
-    /** @private @const {!IArrayLike<!Element>} */
-    this.trackEls_ = opt_trackEls || [];
-  }
-
-  /**
-   * Applies track tags to a specified element. This is done in a separate
-   * method from the source tags, because we must wait for "loadedmetadata"
-   * video event before doing this.
-   * @param {!HTMLMediaElement} element The element to adopt the text tracks
-   *     represented by this object.
-   * @private
-   */
-  applyTracksToElement_(element) {
-    Array.prototype.forEach.call(this.trackEls_, (trackEl) => {
-      const track = document.createElement('track');
-      track.id = trackEl.id;
-      track.kind = trackEl.kind;
-      track.label = trackEl.label;
-      track.srclang = trackEl.srclang;
-      track.default = trackEl.default;
-      track.src = trackEl.src;
-      track.addEventListener('load', () => {
-        track.mode = 'showing';
-        element.textTracks[0].mode = 'showing';
-      });
-      element.appendChild(track);
-    });
-  }
-
-  /**
-   * Applies the src attribute and source tags to a specified element.
-   * @param {!HTMLMediaElement} element The element to adopt the sources
-   *     represented by this object.
-   */
-  applyToElement(element) {
-    Sources.removeFrom(element);
-
-    if (!this.srcAttr_) {
-      element.removeAttribute('src');
-    } else {
-      element.setAttribute('src', this.srcAttr_);
-    }
-
-    Array.prototype.forEach.call(this.srcEls_, (srcEl) =>
-      element.appendChild(srcEl)
-    );
-
-    if (this.trackEls_.length > 0) {
-      // Wait for "loadedmetadata" before adding tracks.
-      // Firefox adds tracks, but does not toggle them on unless video metadata
-      // is loaded first.
-      if (element.readyState >= 1 /* HAVE_METADATA */) {
-        this.applyTracksToElement_(element);
-      } else {
-        const addTracksHandler = () => {
-          element.removeEventListener('loadedmetadata', addTracksHandler);
-          this.applyTracksToElement_(element);
-        };
-
-        element.addEventListener('loadedmetadata', addTracksHandler);
-      }
-    }
-  }
-
-  /**
-   * Removes and returns the sources from a specified element.
-   * @param {!Element} element The element whose sources should be removed and
-   *     returned.
-   * @return {!Sources} An object representing the sources of the specified
-   *     element.
-   */
-  static removeFrom(element) {
-    const elementToUse = ampMediaElementFor(element) || element;
-    const srcAttr = elementToUse.getAttribute('src');
-    elementToUse.removeAttribute('src');
-
-    const srcEls = elementToUse.querySelectorAll('source');
-    Array.prototype.forEach.call(srcEls, (srcEl) => removeElement(srcEl));
-
-    const trackEls = elementToUse.querySelectorAll('track');
-    Array.prototype.forEach.call(trackEls, (trackEl) => removeElement(trackEl));
-
-    return new Sources(srcAttr, srcEls, trackEls);
-  }
-}
diff --git a/extensions/amp-story/0.1/test/test-amp-story-consent.js b/extensions/amp-story/0.1/test/test-amp-story-consent.js
deleted file mode 100644
index 3dcfe9c9b338c..0000000000000
--- a/extensions/amp-story/0.1/test/test-amp-story-consent.js
+++ /dev/null
@@ -1,297 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {AmpStoryConsent} from '../amp-story-consent';
-import {AmpStoryStoreService, StateProperty} from '../amp-story-store-service';
-import {registerServiceBuilder} from '../../../../src/service';
-
-describes.realWin('amp-story-consent', {amp: true}, (env) => {
-  const CONSENT_ID = 'CONSENT_ID';
-  let win;
-  let defaultConfig;
-  let getComputedStyleStub;
-  let storyConsent;
-  let storyConsentConfigEl;
-  let storyConsentEl;
-
-  const setConfig = (config) => {
-    storyConsentConfigEl.textContent = JSON.stringify(config);
-  };
-
-  beforeEach(() => {
-    win = env.win;
-    const storeService = new AmpStoryStoreService(win);
-    registerServiceBuilder(win, 'story-store', function () {
-      return storeService;
-    });
-
-    defaultConfig = {
-      title: 'Foo title.',
-      message: 'Foo message about the consent.',
-      vendors: ['Item 1', 'Item 2'],
-      onlyAccept: false,
-      externalLink: {},
-    };
-
-    const styles = {'background-color': 'rgb(0, 0, 0)'};
-    getComputedStyleStub = env.sandbox
-      .stub(win, 'getComputedStyle')
-      .returns(styles);
-
-    // Test DOM structure:
-    // <amp-consent>
-    //   <amp-story-consent>
-    //     <script type="application/json">{JSON Config}</script>
-    //   </amp-story-consent>
-    // </amp-consent>
-    const consentEl = win.document.createElement('amp-consent');
-    consentEl.setAttribute('id', CONSENT_ID);
-
-    storyConsentConfigEl = win.document.createElement('script');
-    storyConsentConfigEl.setAttribute('type', 'application/json');
-    setConfig(defaultConfig);
-
-    storyConsentEl = win.document.createElement('amp-story-consent');
-    storyConsentEl.appendChild(storyConsentConfigEl);
-
-    consentEl.appendChild(storyConsentEl);
-    win.document.body.appendChild(consentEl);
-
-    storyConsent = new AmpStoryConsent(storyConsentEl);
-  });
-
-  it('should parse the config', () => {
-    storyConsent.buildCallback();
-    expect(storyConsent.storyConsentConfig_).to.deep.equal(defaultConfig);
-  });
-
-  it('should require a story-consent title', () => {
-    delete defaultConfig.title;
-    setConfig(defaultConfig);
-
-    allowConsoleError(() => {
-      expect(() => {
-        storyConsent.buildCallback();
-      }).to.throw('config requires a title');
-    });
-  });
-
-  it('should require a story-consent message', () => {
-    delete defaultConfig.message;
-    setConfig(defaultConfig);
-
-    allowConsoleError(() => {
-      expect(() => {
-        storyConsent.buildCallback();
-      }).to.throw('config requires a message');
-    });
-  });
-
-  it('should require a story-consent vendors', () => {
-    delete defaultConfig.vendors;
-    setConfig(defaultConfig);
-
-    allowConsoleError(() => {
-      expect(() => {
-        storyConsent.buildCallback();
-      }).to.throw('config requires an array of vendors');
-    });
-  });
-
-  it('should require a story-consent vendors of type array', () => {
-    defaultConfig.vendors = 'foo';
-    setConfig(defaultConfig);
-
-    allowConsoleError(() => {
-      expect(() => {
-        storyConsent.buildCallback();
-      }).to.throw('config requires an array of vendors');
-    });
-  });
-
-  it('should require onlyAccept to be a boolean', () => {
-    defaultConfig.onlyAccept = 'foo';
-    setConfig(defaultConfig);
-
-    allowConsoleError(() => {
-      expect(() => {
-        storyConsent.buildCallback();
-      }).to.throw('config requires "onlyAccept" to be a boolean');
-    });
-  });
-
-  it('should show the decline button by default', () => {
-    delete defaultConfig.onlyAccept;
-    setConfig(defaultConfig);
-
-    storyConsent.buildCallback();
-
-    const buttonEl = storyConsent.storyConsentEl_.querySelector(
-      '.i-amphtml-story-consent-action-reject'
-    );
-
-    // For some reason the win object provided by the test environment does not
-    // return all the styles.
-    expect(buttonEl).to.have.display('block');
-  });
-
-  it('should hide the decline button if onlyAccept is true', () => {
-    defaultConfig.onlyAccept = true;
-    setConfig(defaultConfig);
-
-    storyConsent.buildCallback();
-
-    const buttonEl = storyConsent.storyConsentEl_.querySelector(
-      '.i-amphtml-story-consent-action-reject'
-    );
-
-    // For some reason the win object provided by the test environment does not
-    // return all the styles.
-    expect(buttonEl).to.have.display('none');
-  });
-
-  it('should hide the external link by default', () => {
-    storyConsent.buildCallback();
-
-    const linkEl = storyConsent.storyConsentEl_.querySelector(
-      '.i-amphtml-story-consent-external-link'
-    );
-
-    expect(linkEl).to.have.display('none');
-  });
-
-  it('should require an external link title if a URL is provided', () => {
-    defaultConfig.externalLink.href = 'https://example.com';
-    setConfig(defaultConfig);
-
-    allowConsoleError(() => {
-      expect(() => {
-        storyConsent.buildCallback();
-      }).to.throw('config requires "externalLink.title" to be a string');
-    });
-  });
-
-  it('should require an external URL if a title is provided', () => {
-    defaultConfig.externalLink.title = 'Privacy settings';
-    setConfig(defaultConfig);
-
-    allowConsoleError(() => {
-      expect(() => {
-        storyConsent.buildCallback();
-      }).to.throw('config requires "externalLink.href" to be an absolute URL');
-    });
-  });
-
-  it('should validate an external absolute URL', () => {
-    defaultConfig.externalLink.title = 'Privacy settings';
-    defaultConfig.externalLink.href = '/foo.html';
-    setConfig(defaultConfig);
-
-    allowConsoleError(() => {
-      expect(() => {
-        storyConsent.buildCallback();
-      }).to.throw('URL must start with "http://" or "https://"');
-    });
-  });
-
-  it('should show the external link', () => {
-    defaultConfig.externalLink.title = 'Privacy settings';
-    defaultConfig.externalLink.href = 'https://example.com';
-    setConfig(defaultConfig);
-
-    storyConsent.buildCallback();
-
-    const linkEl = storyConsent.storyConsentEl_.querySelector(
-      '.i-amphtml-story-consent-external-link'
-    );
-
-    expect(linkEl).not.to.have.display('none');
-  });
-
-  it('should allowlist the <amp-consent> actions', () => {
-    const addToAllowlistStub = env.sandbox.stub(
-      storyConsent.actions_,
-      'addToAllowlist'
-    );
-
-    storyConsent.buildCallback();
-
-    expect(addToAllowlistStub).to.have.callCount(3);
-    expect(addToAllowlistStub).to.have.been.calledWith('AMP-CONSENT', 'accept');
-    expect(addToAllowlistStub).to.have.been.calledWith('AMP-CONSENT', 'prompt');
-    expect(addToAllowlistStub).to.have.been.calledWith('AMP-CONSENT', 'reject');
-  });
-
-  it('should broadcast the amp actions', () => {
-    env.sandbox.stub(storyConsent.actions_, 'trigger');
-
-    storyConsent.buildCallback();
-
-    // Builds and appends a fake button directly in the storyConsent Shadow DOM.
-    const buttonEl = win.document.createElement('button');
-    buttonEl.setAttribute('on', 'tap:ABC.accept');
-    storyConsent.storyConsentEl_.appendChild(buttonEl);
-
-    const clickEvent = new Event('click');
-    buttonEl.dispatchEvent(clickEvent);
-
-    expect(storyConsent.actions_.trigger).to.have.been.calledOnce;
-    expect(storyConsent.actions_.trigger).to.have.been.calledWith(buttonEl);
-  });
-
-  it('should render an accept button with the proper amp action', () => {
-    storyConsent.buildCallback();
-
-    const buttonEl = storyConsent.storyConsentEl_.querySelector(
-      `button[on="tap:${CONSENT_ID}.accept"]`
-    );
-    expect(buttonEl).to.exist;
-  });
-
-  it('should set the consent ID in the store', () => {
-    storyConsent.buildCallback();
-
-    expect(storyConsent.storeService_.get(StateProperty.CONSENT_ID)).to.equal(
-      CONSENT_ID
-    );
-  });
-
-  it('should set the font color to black if background is white', () => {
-    const styles = {'background-color': 'rgb(255, 255, 255)'};
-    getComputedStyleStub.returns(styles);
-    storyConsent.buildCallback();
-
-    const buttonEl = storyConsent.storyConsentEl_.querySelector(
-      '.i-amphtml-story-consent-action-accept'
-    );
-    expect(buttonEl.getAttribute('style')).to.equal(
-      'color: rgb(0, 0, 0) !important;'
-    );
-  });
-
-  it('should set the font color to white if background is black', () => {
-    const styles = {'background-color': 'rgba(0, 0, 0, 1)'};
-    getComputedStyleStub.returns(styles);
-    storyConsent.buildCallback();
-
-    const buttonEl = storyConsent.storyConsentEl_.querySelector(
-      '.i-amphtml-story-consent-action-accept'
-    );
-    expect(buttonEl.getAttribute('style')).to.equal(
-      'color: rgb(255, 255, 255) !important;'
-    );
-  });
-});
diff --git a/extensions/amp-story/0.1/test/test-amp-story-cta-layer.js b/extensions/amp-story/0.1/test/test-amp-story-cta-layer.js
deleted file mode 100644
index db49235da36f2..0000000000000
--- a/extensions/amp-story/0.1/test/test-amp-story-cta-layer.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {AmpStoryCtaLayer} from '../amp-story-cta-layer';
-
-describes.realWin(
-  'amp-story-cta-layer',
-  {
-    amp: {
-      runtimeOn: true,
-      extensions: ['amp-story'],
-    },
-  },
-  (env) => {
-    let win;
-    let ampStoryCtaLayer;
-
-    beforeEach(() => {
-      win = env.win;
-      const ampStoryCtaLayerEl = win.document.createElement(
-        'amp-story-cta-layer'
-      );
-      win.document.body.appendChild(ampStoryCtaLayerEl);
-      ampStoryCtaLayer = new AmpStoryCtaLayer(ampStoryCtaLayerEl);
-    });
-
-    it('should build the cta layer', () => {
-      ampStoryCtaLayer.buildCallback();
-      return ampStoryCtaLayer.layoutCallback().then(() => {
-        expect(ampStoryCtaLayer.element).to.have.class('i-amphtml-story-layer');
-      });
-    });
-
-    it('should add or overwrite target attribute to links', () => {
-      const ctaLink = win.document.createElement('a');
-      expect(ctaLink).to.not.have.attribute('target');
-
-      ampStoryCtaLayer.element.appendChild(ctaLink);
-      ampStoryCtaLayer.buildCallback();
-
-      return ampStoryCtaLayer.layoutCallback().then(() => {
-        expect(ctaLink).to.have.attribute('target');
-        expect(ctaLink.getAttribute('target')).to.equal('_blank');
-      });
-    });
-
-    it('should not add target attribute to other elements', () => {
-      const elem = win.document.createElement('span');
-      ampStoryCtaLayer.element.appendChild(elem);
-      ampStoryCtaLayer.buildCallback();
-
-      return ampStoryCtaLayer.layoutCallback().then(() => {
-        expect(elem).to.not.have.attribute('target');
-      });
-    });
-  }
-);
diff --git a/extensions/amp-story/0.1/test/test-amp-story-hint.js b/extensions/amp-story/0.1/test/test-amp-story-hint.js
deleted file mode 100644
index 47061865c7c0f..0000000000000
--- a/extensions/amp-story/0.1/test/test-amp-story-hint.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {AmpStoryHint} from '../amp-story-hint';
-import {AmpStoryStoreService} from '../amp-story-store-service';
-import {Services} from '../../../../src/services';
-import {registerServiceBuilder} from '../../../../src/service';
-
-const NOOP = () => {};
-
-describes.fakeWin('amp-story hint layer', {}, (env) => {
-  let host;
-  let win;
-  let ampStoryHint;
-
-  beforeEach(() => {
-    win = env.win;
-
-    const storeService = new AmpStoryStoreService(win);
-    registerServiceBuilder(win, 'story-store', function () {
-      return storeService;
-    });
-
-    env.sandbox
-      .stub(Services, 'vsyncFor')
-      .callsFake(() => ({mutate: (task) => task()}));
-    env.sandbox
-      .stub(Services, 'timerFor')
-      .callsFake(() => ({delay: NOOP, cancel: NOOP}));
-
-    host = win.document.createElement('div');
-    ampStoryHint = new AmpStoryHint(win, host);
-  });
-
-  it('should not build the UI until we have to display it', () => {
-    expect(getHintContainerFromHost(host)).to.be.null;
-  });
-
-  // TODO(@gmajoulet, #21618): Fails in AmpStoryHint.showHint_.
-  it.skip('should be able to show navigation help overlay', () => {
-    const hideAfterTimeoutStub = env.sandbox
-      .stub(ampStoryHint, 'hideAfterTimeout')
-      .callsFake(NOOP);
-
-    ampStoryHint.showNavigationOverlay();
-
-    const hintContainer = getHintContainerFromHost(host);
-
-    expect(hintContainer.className).to.contain('show-navigation-overlay');
-    expect(hintContainer.className).to.not.contain('show-first-page-overlay');
-    expect(hintContainer.className).to.not.contain('i-amphtml-hidden');
-    expect(hideAfterTimeoutStub).to.be.calledOnce;
-  });
-
-  // TODO(@gmajoulet, #21618): Fails in AmpStoryHint.showHint_.
-  it.skip('should be able to show no previous page help overlay', () => {
-    const hideAfterTimeoutStub = env.sandbox
-      .stub(ampStoryHint, 'hideAfterTimeout')
-      .callsFake(NOOP);
-
-    ampStoryHint.showFirstPageHintOverlay();
-
-    const hintContainer = getHintContainerFromHost(host);
-
-    expect(hintContainer.className).to.contain('show-first-page-overlay');
-    expect(hintContainer.className).to.not.contain('show-navigation-overlay');
-    expect(hintContainer.className).to.not.contain('i-amphtml-hidden');
-    expect(hideAfterTimeoutStub).to.be.calledOnce;
-  });
-
-  // TODO(@gmajoulet, #21618): Fails in AmpStoryHint.showHint_.
-  it.skip('should be able to hide shown hint', () => {
-    ampStoryHint.showNavigationOverlay();
-    ampStoryHint.hideAllNavigationHint();
-
-    const hintContainer = getHintContainerFromHost(host);
-
-    expect(hintContainer.className).to.contain('i-amphtml-hidden');
-  });
-});
-
-/**
- * Helper function to get the actual hint container from its host.
- * @param  {!Element} host
- * @return {?Element}
- */
-function getHintContainerFromHost(host) {
-  if (!host.lastElementChild || !host.lastElementChild.shadowRoot) {
-    return null;
-  }
-
-  return host.lastElementChild.shadowRoot.querySelector(
-    '.i-amphtml-story-hint-container'
-  );
-}
diff --git a/extensions/amp-story/0.1/test/test-amp-story-info-dialog.js b/extensions/amp-story/0.1/test/test-amp-story-info-dialog.js
deleted file mode 100644
index cc645be6bf207..0000000000000
--- a/extensions/amp-story/0.1/test/test-amp-story-info-dialog.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {
-  Action,
-  AmpStoryStoreService,
-  StateProperty,
-} from '../amp-story-store-service';
-import {
-  DIALOG_VISIBLE_CLASS,
-  InfoDialog,
-  MOREINFO_VISIBLE_CLASS,
-} from '../amp-story-info-dialog';
-import {LocalizationService} from '../../../../src/service/localization';
-import {Services} from '../../../../src/services';
-import {registerServiceBuilder} from '../../../../src/service';
-
-describes.realWin('amp-story-info-dialog', {amp: true}, (env) => {
-  let moreInfoLinkUrl;
-  let embedded;
-  let parentEl;
-  let infoDialog;
-  let storeService;
-  let win;
-
-  const MOREINFO_CLASS = '.i-amphtml-story-info-moreinfo';
-
-  beforeEach(() => {
-    win = env.win;
-    const localizationService = new LocalizationService(win.document.body);
-    env.sandbox
-      .stub(Services, 'localizationForDoc')
-      .returns(localizationService);
-    storeService = new AmpStoryStoreService(win);
-    embedded = true;
-    registerServiceBuilder(win, 'story-store', function () {
-      return storeService;
-    });
-
-    // Making sure mutator tasks run synchronously.
-    env.sandbox.stub(Services, 'mutatorForDoc').returns({
-      mutateElement: (element, callback) => {
-        callback();
-        return Promise.resolve();
-      },
-    });
-
-    env.sandbox.stub(Services, 'viewerForDoc').returns({
-      isEmbedded: () => embedded,
-      sendMessageAwaitResponse: (eventType) => {
-        if (eventType === 'moreInfoLinkUrl') {
-          return Promise.resolve(moreInfoLinkUrl);
-        }
-
-        return Promise.resolve();
-      },
-    });
-
-    parentEl = win.document.createElement('div');
-    win.document.body.appendChild(parentEl);
-    infoDialog = new InfoDialog(win, parentEl);
-  });
-
-  it('should build the info dialog', () => {
-    return infoDialog.build().then(() => {
-      expect(infoDialog.isBuilt()).to.be.true;
-      expect(infoDialog.element_).to.exist;
-    });
-  });
-
-  it('should hide more info link when there is no viewer messaging', () => {
-    embedded = false;
-    return infoDialog.build().then(() => {
-      expect(
-        infoDialog.element_.querySelector(MOREINFO_CLASS)
-      ).not.to.have.class(MOREINFO_VISIBLE_CLASS);
-    });
-  });
-
-  it('should hide more info link when the viewer does not supply it', () => {
-    moreInfoLinkUrl = null;
-
-    return infoDialog.build().then(() => {
-      expect(
-        infoDialog.element_.querySelector(MOREINFO_CLASS)
-      ).not.to.have.class(MOREINFO_VISIBLE_CLASS);
-    });
-  });
-
-  it('should show more info link when the viewer supplies it', () => {
-    moreInfoLinkUrl = 'https://example.com/more-info.html';
-
-    return infoDialog.build().then(() => {
-      expect(infoDialog.element_.querySelector(MOREINFO_CLASS)).to.have.class(
-        MOREINFO_VISIBLE_CLASS
-      );
-    });
-  });
-
-  it('should append the info dialog in the parentEl on build', () => {
-    return infoDialog.build().then(() => {
-      expect(parentEl.childElementCount).to.equal(1);
-    });
-  });
-
-  it('should show the info dialog on store property update', () => {
-    return infoDialog.build().then(() => {
-      storeService.dispatch(Action.TOGGLE_INFO_DIALOG, true);
-      expect(infoDialog.element_).to.have.class(DIALOG_VISIBLE_CLASS);
-    });
-  });
-
-  it('should hide the info dialog on click on the overlay', () => {
-    return infoDialog.build().then(() => {
-      storeService.dispatch(Action.TOGGLE_INFO_DIALOG, true);
-      infoDialog.element_.dispatchEvent(new Event('click'));
-
-      expect(infoDialog.element_).not.to.have.class(DIALOG_VISIBLE_CLASS);
-      expect(storeService.get(StateProperty.INFO_DIALOG_STATE)).to.be.false;
-    });
-  });
-
-  it('should not hide the info dialog on click on the inner container', () => {
-    return infoDialog.build().then(() => {
-      storeService.dispatch(Action.TOGGLE_INFO_DIALOG, true);
-      infoDialog.innerContainerEl_.dispatchEvent(new Event('click'));
-
-      expect(infoDialog.element_).to.have.class(DIALOG_VISIBLE_CLASS);
-      expect(storeService.get(StateProperty.INFO_DIALOG_STATE)).to.be.true;
-    });
-  });
-});
diff --git a/extensions/amp-story/0.1/test/test-amp-story-request-service.js b/extensions/amp-story/0.1/test/test-amp-story-request-service.js
deleted file mode 100644
index e68b973c125be..0000000000000
--- a/extensions/amp-story/0.1/test/test-amp-story-request-service.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {
-  AmpStoryRequestService,
-  BOOKEND_CONFIG_ATTRIBUTE_NAME,
-} from '../amp-story-request-service';
-
-describes.fakeWin('amp-story-store-service', {amp: true}, (env) => {
-  let requestService;
-  let storyElement;
-  let xhrMock;
-
-  beforeEach(() => {
-    storyElement = env.win.document.createElement('div');
-    env.win.document.body.appendChild(storyElement);
-    requestService = new AmpStoryRequestService(env.win, storyElement);
-    xhrMock = env.sandbox.mock(requestService.xhr_);
-  });
-
-  it('should not load the bookend config if no attribute is set', () => {
-    xhrMock.expects('fetchJson').never();
-
-    return requestService.loadBookendConfig().then((config) => {
-      expect(config).to.be.null;
-      xhrMock.verify();
-    });
-  });
-
-  it('should use the URL provided in the attribute to load the config', () => {
-    const bookendUrl = 'https://publisher.com/bookend';
-
-    storyElement.setAttribute(BOOKEND_CONFIG_ATTRIBUTE_NAME, bookendUrl);
-    xhrMock
-      .expects('fetchJson')
-      .withExactArgs(bookendUrl, {})
-      .resolves({
-        ok: true,
-        json() {
-          return Promise.resolve();
-        },
-      })
-      .once();
-
-    return requestService.loadBookendConfig().then(() => {
-      xhrMock.verify();
-    });
-  });
-
-  it('should return the expected bookend config', () => {
-    const bookendUrl = 'https://publisher.com/bookend';
-    const fetchedConfig = 'amazingConfig';
-
-    storyElement.setAttribute(BOOKEND_CONFIG_ATTRIBUTE_NAME, bookendUrl);
-    xhrMock
-      .expects('fetchJson')
-      .resolves({
-        ok: true,
-        json() {
-          return Promise.resolve(fetchedConfig);
-        },
-      })
-      .once();
-
-    return requestService.loadBookendConfig().then((config) => {
-      expect(config).to.equal(fetchedConfig);
-      xhrMock.verify();
-    });
-  });
-
-  it('should fetch the bookend config once if called multiple times', () => {
-    const bookendUrl = 'https://publisher.com/bookend';
-
-    storyElement.setAttribute(BOOKEND_CONFIG_ATTRIBUTE_NAME, bookendUrl);
-    xhrMock
-      .expects('fetchJson')
-      .resolves({
-        ok: true,
-        json() {
-          return Promise.resolve();
-        },
-      })
-      .once();
-
-    return requestService
-      .loadBookendConfig()
-      .then(() => requestService.loadBookendConfig())
-      .then(() => {
-        xhrMock.verify();
-      });
-  });
-});
diff --git a/extensions/amp-story/0.1/test/test-amp-story-share-menu.js b/extensions/amp-story/0.1/test/test-amp-story-share-menu.js
deleted file mode 100644
index 3c1fe8acc97c6..0000000000000
--- a/extensions/amp-story/0.1/test/test-amp-story-share-menu.js
+++ /dev/null
@@ -1,181 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {
-  Action,
-  AmpStoryStoreService,
-  StateProperty,
-} from '../amp-story-store-service';
-import {Services} from '../../../../src/services';
-import {ShareMenu, VISIBLE_CLASS} from '../amp-story-share-menu';
-import {ShareWidget} from '../amp-story-share';
-import {registerServiceBuilder} from '../../../../src/service';
-
-describes.realWin('amp-story-share-menu', {amp: true}, (env) => {
-  let isSystemShareSupported;
-  let parentEl;
-  let shareMenu;
-  let shareWidgetMock;
-  let storeService;
-  let win;
-
-  beforeEach(() => {
-    win = env.win;
-    storeService = new AmpStoryStoreService(win);
-    registerServiceBuilder(win, 'story-store', function () {
-      return storeService;
-    });
-
-    isSystemShareSupported = false;
-
-    const shareWidget = {
-      build: () => win.document.createElement('div'),
-      isSystemShareSupported: () => isSystemShareSupported,
-      loadRequiredExtensions: () => {},
-    };
-    shareWidgetMock = env.sandbox.mock(shareWidget);
-    env.sandbox.stub(ShareWidget, 'create').returns(shareWidget);
-
-    // Making sure the vsync tasks run synchronously.
-    env.sandbox.stub(Services, 'vsyncFor').returns({
-      mutate: (fn) => fn(),
-      run: (vsyncTaskSpec, vsyncState) => {
-        vsyncTaskSpec.measure(vsyncState);
-        vsyncTaskSpec.mutate(vsyncState);
-      },
-    });
-
-    parentEl = win.document.createElement('div');
-    win.document.body.appendChild(parentEl);
-    shareMenu = new ShareMenu(win, parentEl);
-  });
-
-  it('should build the sharing menu', () => {
-    shareMenu.build();
-
-    expect(shareMenu.isBuilt()).to.be.true;
-    expect(shareMenu.element_).to.exist;
-  });
-
-  it('should append the sharing menu in the parentEl on build', () => {
-    shareMenu.build();
-
-    expect(parentEl.childElementCount).to.equal(1);
-  });
-
-  it('should build the share widget when building the component', () => {
-    shareWidgetMock
-      .expects('build')
-      .once()
-      .returns(win.document.createElement('div'));
-
-    shareMenu.build();
-
-    expect(shareMenu.isBuilt()).to.be.true;
-
-    shareWidgetMock.verify();
-  });
-
-  it('should append the share widget when building the component', () => {
-    const shareWidgetEl = win.document.createElement('div');
-    shareWidgetEl.classList.add('foo');
-
-    shareWidgetMock.expects('build').returns(shareWidgetEl);
-
-    shareMenu.build();
-
-    expect(shareMenu.element_.querySelector('.foo')).to.exist;
-    shareWidgetMock.verify();
-  });
-
-  it('should show the share menu on store property update', () => {
-    shareMenu.build();
-
-    storeService.dispatch(Action.TOGGLE_SHARE_MENU, true);
-
-    expect(shareMenu.element_).to.have.class(VISIBLE_CLASS);
-  });
-
-  it('should hide the share menu on click on the overlay', () => {
-    shareMenu.build();
-
-    storeService.dispatch(Action.TOGGLE_SHARE_MENU, true);
-    shareMenu.element_.dispatchEvent(new Event('click'));
-
-    expect(shareMenu.element_).not.to.have.class(VISIBLE_CLASS);
-    expect(storeService.get(StateProperty.SHARE_MENU_STATE)).to.be.false;
-  });
-
-  it('should not hide the share menu on click on the widget container', () => {
-    shareMenu.build();
-
-    storeService.dispatch(Action.TOGGLE_SHARE_MENU, true);
-    shareMenu.innerContainerEl_.dispatchEvent(new Event('click'));
-
-    expect(shareMenu.element_).to.have.class(VISIBLE_CLASS);
-  });
-
-  it('should render the amp-social-share button if system share', () => {
-    isSystemShareSupported = true;
-
-    shareMenu.build();
-
-    expect(shareMenu.element_.tagName).to.equal('AMP-SOCIAL-SHARE');
-  });
-
-  it('should hide the amp-social-share button if system share', () => {
-    isSystemShareSupported = true;
-
-    shareMenu.build();
-
-    expect(shareMenu.element_).to.have.display('none');
-  });
-
-  it('should load the amp-social-share extension if system share', () => {
-    isSystemShareSupported = true;
-    shareWidgetMock.expects('loadRequiredExtensions').once();
-
-    shareMenu.build();
-
-    shareWidgetMock.verify();
-  });
-
-  it('should dispatch an event on system share button if system share', () => {
-    isSystemShareSupported = true;
-
-    shareMenu.build();
-
-    const clickCallbackSpy = env.sandbox.spy();
-    shareMenu.element_.addEventListener('click', clickCallbackSpy);
-
-    // Toggling the share menu dispatches a click event on the amp-social-share
-    // button, which triggers the native sharing menu.
-    storeService.dispatch(Action.TOGGLE_SHARE_MENU, true);
-
-    expect(clickCallbackSpy).to.have.been.calledOnce;
-  });
-
-  // See ShareMenu.onShareMenuStateUpdate_ for details.
-  it('should close back the share menu right away if system share', () => {
-    isSystemShareSupported = true;
-
-    shareMenu.build();
-
-    storeService.dispatch(Action.TOGGLE_SHARE_MENU, true);
-
-    expect(storeService.get(StateProperty.SHARE_MENU_STATE)).to.be.false;
-  });
-});
diff --git a/extensions/amp-story/0.1/test/test-amp-story-store-service.js b/extensions/amp-story/0.1/test/test-amp-story-store-service.js
deleted file mode 100644
index fca6533f54723..0000000000000
--- a/extensions/amp-story/0.1/test/test-amp-story-store-service.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {
-  Action,
-  AmpStoryStoreService,
-  StateProperty,
-} from '../amp-story-store-service';
-import {EmbedMode, EmbedModeParam} from '../embed-mode';
-
-describes.fakeWin('amp-story-store-service', {}, (env) => {
-  let storeService;
-
-  beforeEach(() => {
-    // Making sure we always get a new instance to isolate each test.
-    storeService = new AmpStoryStoreService(env.win);
-  });
-
-  it('should return the default state', () => {
-    expect(storeService.get(StateProperty.CAN_SHOW_BOOKEND)).to.be.true;
-  });
-
-  it('should subscribe to property mutations and receive the new value', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.BOOKEND_STATE, listenerSpy);
-    storeService.dispatch(Action.TOGGLE_BOOKEND, true);
-    expect(listenerSpy).to.have.been.calledOnce;
-    expect(listenerSpy).to.have.been.calledWith(true);
-  });
-
-  it('should not trigger a listener if another property changed', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.CAN_INSERT_AUTOMATIC_AD, listenerSpy);
-    storeService.dispatch(Action.TOGGLE_BOOKEND, true);
-    expect(listenerSpy).to.have.callCount(0);
-  });
-
-  it('should not trigger a listener on subscribe by default', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.BOOKEND_STATE, listenerSpy);
-    expect(listenerSpy).to.have.callCount(0);
-  });
-
-  it('should trigger a listener on subscribe if option is set to true', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.BOOKEND_STATE, listenerSpy, true);
-    expect(listenerSpy).to.have.been.calledOnce;
-    expect(listenerSpy).to.have.been.calledWith(false);
-  });
-});
-
-describes.fakeWin('amp-story-store-service embed mode', {}, (env) => {
-  let storeService;
-
-  beforeEach(() => {
-    // Initializing the store with an embed mode.
-    env.win.location = `#${EmbedModeParam}=${EmbedMode.NAME_TBD}`;
-    storeService = new AmpStoryStoreService(env.win);
-  });
-
-  it('should override the state with the expected mode', () => {
-    expect(storeService.get(StateProperty.CAN_SHOW_BOOKEND)).to.be.false;
-  });
-});
-
-describes.fakeWin('amp-story-store-service actions', {}, (env) => {
-  let storeService;
-
-  beforeEach(() => {
-    // Making sure we always get a new instance to isolate each test.
-    storeService = new AmpStoryStoreService(env.win);
-  });
-
-  it('should toggle the bookend', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.BOOKEND_STATE, listenerSpy);
-    storeService.dispatch(Action.TOGGLE_BOOKEND, true);
-    expect(listenerSpy).to.have.been.calledOnce;
-    expect(listenerSpy).to.have.been.calledWith(true);
-  });
-
-  it('should not toggle the bookend if embed mode disables it', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.state_[StateProperty.CAN_SHOW_BOOKEND] = false;
-    storeService.subscribe(StateProperty.BOOKEND_STATE, listenerSpy);
-    storeService.dispatch(Action.TOGGLE_BOOKEND, true);
-    expect(listenerSpy).to.have.callCount(0);
-  });
-
-  it('should toggle the muted state', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.MUTED_STATE, listenerSpy);
-    storeService.dispatch(Action.TOGGLE_MUTED, false);
-    expect(listenerSpy).to.have.been.calledOnce;
-    expect(listenerSpy).to.have.been.calledWith(false);
-  });
-
-  it('should toggle the desktop state', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.DESKTOP_STATE, listenerSpy);
-    storeService.dispatch(Action.TOGGLE_DESKTOP, true);
-    expect(listenerSpy).to.have.been.calledOnce;
-    expect(listenerSpy).to.have.been.calledWith(true);
-  });
-
-  it('should update the current page id', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.CURRENT_PAGE_ID, listenerSpy);
-    storeService.dispatch(Action.CHANGE_PAGE, {
-      id: 'test-page',
-      index: 1,
-    });
-    expect(listenerSpy).to.have.been.calledOnce;
-    expect(listenerSpy).to.have.been.calledWith('test-page');
-  });
-
-  it('should update the current page index', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.CURRENT_PAGE_INDEX, listenerSpy);
-    storeService.dispatch(Action.CHANGE_PAGE, {
-      id: 'test-page',
-      index: 1,
-    });
-    expect(listenerSpy).to.have.been.calledOnce;
-    expect(listenerSpy).to.have.been.calledWith(1);
-  });
-
-  it('should toggle the has audio state', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.HAS_AUDIO_STATE, listenerSpy);
-    storeService.dispatch(Action.TOGGLE_HAS_AUDIO, true);
-    expect(listenerSpy).to.have.been.calledOnce;
-    expect(listenerSpy).to.have.been.calledWith(true);
-  });
-
-  it('should toggle the landscape state', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.LANDSCAPE_STATE, listenerSpy);
-    storeService.dispatch(Action.TOGGLE_LANDSCAPE, true);
-    expect(listenerSpy).to.have.been.calledOnce;
-    expect(listenerSpy).to.have.been.calledWith(true);
-  });
-
-  it('should toggle the supported browser state', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.SUPPORTED_BROWSER_STATE, listenerSpy);
-    storeService.dispatch(Action.TOGGLE_SUPPORTED_BROWSER, false);
-    expect(listenerSpy).to.have.been.calledOnce;
-    expect(listenerSpy).to.have.been.calledWith(false);
-  });
-});
diff --git a/extensions/amp-story/0.1/test/test-amp-story-system-layer.js b/extensions/amp-story/0.1/test/test-amp-story-system-layer.js
deleted file mode 100644
index edbd4dfda8c6b..0000000000000
--- a/extensions/amp-story/0.1/test/test-amp-story-system-layer.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {ProgressBar} from '../progress-bar';
-import {Services} from '../../../../src/services';
-import {SystemLayer} from '../amp-story-system-layer';
-import {registerServiceBuilder} from '../../../../src/service';
-
-const NOOP = () => {};
-
-describes.fakeWin('amp-story system layer', {amp: true}, (env) => {
-  let win;
-  let systemLayer;
-  let progressBarStub;
-  let progressBarRoot;
-
-  beforeEach(() => {
-    win = env.win;
-
-    registerServiceBuilder(win, 'story-store', function () {
-      return {
-        get: NOOP,
-        subscribe: NOOP,
-      };
-    });
-    progressBarRoot = win.document.createElement('div');
-
-    progressBarStub = {
-      build: env.sandbox.stub().returns(progressBarRoot),
-      getRoot: env.sandbox.stub().returns(progressBarRoot),
-      setActiveSegmentId: env.sandbox.spy(),
-      updateProgress: env.sandbox.spy(),
-    };
-
-    env.sandbox.stub(ProgressBar, 'create').returns(progressBarStub);
-
-    env.sandbox.stub(Services, 'vsyncFor').returns({
-      mutate: (fn) => fn(),
-    });
-
-    systemLayer = new SystemLayer(win);
-  });
-
-  it.skip('should build UI', () => {
-    const initializeListeners = env.sandbox
-      .stub(systemLayer, 'initializeListeners_')
-      .callsFake(NOOP);
-
-    const root = systemLayer.build();
-
-    expect(root).to.not.be.null;
-
-    expect(initializeListeners).to.have.been.called;
-  });
-
-  // TODO(alanorozco, #12476): Make this test work with sinon 4.0.
-  it.skip('should attach event handlers', () => {
-    const rootMock = {addEventListener: env.sandbox.spy()};
-
-    env.sandbox.stub(systemLayer, 'root_').callsFake(rootMock);
-    env.sandbox.stub(systemLayer, 'win_').callsFake(rootMock);
-
-    systemLayer.initializeListeners_();
-
-    expect(rootMock.addEventListener).to.have.been.calledWith('click');
-  });
-
-  it('should set the active page index', () => {
-    [0, 1, 2, 3, 4].forEach((index) => {
-      systemLayer.setActivePageId(index);
-      progressBarStub.setActiveSegmentId.should.have.been.calledWith(index);
-    });
-  });
-});
diff --git a/extensions/amp-story/0.1/test/test-amp-story.js b/extensions/amp-story/0.1/test/test-amp-story.js
deleted file mode 100644
index 232e4d952e7eb..0000000000000
--- a/extensions/amp-story/0.1/test/test-amp-story.js
+++ /dev/null
@@ -1,482 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {Action} from '../amp-story-store-service';
-import {AmpStory} from '../amp-story';
-import {AmpStoryPage} from '../amp-story-page';
-import {EventType} from '../events';
-import {Keys} from '../../../../src/utils/key-codes';
-import {LocalizationService} from '../../../../src/service/localization';
-import {PaginationButtons} from '../pagination-buttons';
-import {Services} from '../../../../src/services';
-
-const NOOP = () => {};
-const IDENTITY_FN = (x) => x;
-// Represents the correct value of KeyboardEvent.which for the Right Arrow
-const KEYBOARD_EVENT_WHICH_RIGHT_ARROW = 39;
-
-describes.realWin(
-  'amp-story',
-  {
-    amp: {
-      runtimeOn: true,
-      extensions: ['amp-story'],
-    },
-  },
-  (env) => {
-    let win;
-    let element;
-    let story;
-
-    /**
-     * @param {!Element} container
-     * @param {boolean=} opt_active
-     * @return {!Element}
-     */
-    function appendEmptyPage(container, opt_active) {
-      const page = document.createElement('amp-story-page');
-      page.id = '-empty-page';
-      if (opt_active) {
-        page.setAttribute('active', true);
-      }
-      container.appendChild(page);
-      return page;
-    }
-
-    /**
-     * @param {!Element} container
-     * @param {number} count
-     * @param {Array<string>=} opt_ids
-     * @return {!Array<!Element>}
-     */
-    function createPages(container, count, opt_ids) {
-      return Array(count)
-        .fill(undefined)
-        .map((unused, i) => {
-          const page = win.document.createElement('amp-story-page');
-          page.id = opt_ids && opt_ids[i] ? opt_ids[i] : `-page-${i}`;
-          page.getImpl = () => Promise.resolve(new AmpStoryPage(page));
-          container.appendChild(page);
-          return page;
-        });
-    }
-
-    /**
-     * @param {string} eventType
-     * @return {!Event}
-     */
-    function createEvent(eventType) {
-      const eventObj = document.createEventObject
-        ? document.createEventObject()
-        : document.createEvent('Events');
-      if (eventObj.initEvent) {
-        eventObj.initEvent(eventType, true, true);
-      }
-      return eventObj;
-    }
-
-    beforeEach(() => {
-      win = env.win;
-      const localizationService = new LocalizationService(win.document.body);
-      env.sandbox
-        .stub(Services, 'localizationForDoc')
-        .returns(localizationService);
-
-      element = win.document.createElement('amp-story');
-      win.document.body.appendChild(element);
-
-      AmpStory.isBrowserSupported = () => true;
-      story = new AmpStory(element);
-      // TODO(alanorozco): Test active page event triggers once the stubbable
-      // `Services` module is part of the amphtml-story repo.
-      // env.sandbox.stub(element.implementation_,
-      // 'triggerActiveEventForPage_').callsFake(NOOP);
-    });
-
-    afterEach(() => {
-      element.remove();
-    });
-
-    it('should build with the expected number of pages', () => {
-      const pagesCount = 2;
-      createPages(story.element, pagesCount, ['cover', 'page-1']);
-
-      return story.layoutCallback().then(() => {
-        expect(story.getPageCount()).to.equal(pagesCount);
-      });
-    });
-
-    it('should activate the first page when built', () => {
-      createPages(story.element, 2, ['cover', 'page-1']);
-
-      return story
-        .layoutCallback()
-        .then(() => {
-          // Getting all the AmpStoryPage objets.
-          const pageElements = story.element.getElementsByTagName(
-            'amp-story-page'
-          );
-          const pages = Array.from(pageElements).map((el) => el.getImpl());
-
-          return Promise.all(pages);
-        })
-        .then((pages) => {
-          // Only the first page should be active.
-          for (let i = 0; i < pages.length; i++) {
-            i === 0
-              ? expect(pages[i].isActive()).to.be.true
-              : expect(pages[i].isActive()).to.be.false;
-          }
-        });
-    });
-
-    it('should update the navigation state when built', () => {
-      const firstPageId = 'cover';
-      const pageCount = 2;
-      createPages(story.element, pageCount, [firstPageId, 'page-1']);
-      const updateActivePageStub = env.sandbox.stub(
-        story.navigationState_,
-        'updateActivePage'
-      );
-
-      return story.layoutCallback().then(() => {
-        expect(updateActivePageStub).to.have.been.calledWith(
-          0,
-          pageCount,
-          firstPageId
-        );
-      });
-    });
-
-    it('should preload the bookend if navigating to the last page', () => {
-      createPages(story.element, 1, ['cover']);
-
-      const buildBookendStub = env.sandbox.stub(story.bookend_, 'build');
-      const loadBookendStub = env.sandbox
-        .stub(story.bookend_, 'loadConfig')
-        .resolves({});
-
-      return story.layoutCallback().then(() => {
-        expect(buildBookendStub).to.have.been.calledOnce;
-        expect(loadBookendStub).to.have.been.calledOnce;
-      });
-    });
-
-    it('should not preload the bookend if not on the last page', () => {
-      createPages(story.element, 2, ['cover']);
-
-      const buildBookendStub = env.sandbox.stub(story.bookend_, 'build');
-      const loadBookendStub = env.sandbox
-        .stub(story.bookend_, 'loadConfig')
-        .resolves({});
-
-      return story.layoutCallback().then(() => {
-        expect(buildBookendStub).to.not.have.been.called;
-        expect(loadBookendStub).to.not.have.been.called;
-      });
-    });
-
-    it('should prerender/load the share menu', () => {
-      createPages(story.element, 1, ['cover']);
-
-      env.sandbox.stub(story.bookend_, 'build');
-      const buildShareMenuStub = env.sandbox.stub(story.shareMenu_, 'build');
-
-      return story.layoutCallback().then(() => {
-        expect(buildShareMenuStub).to.have.been.calledOnce;
-      });
-    });
-
-    it('should not prerender/load the share menu on desktop', () => {
-      createPages(story.element, 1, ['cover']);
-
-      story.storeService_.dispatch(Action.TOGGLE_DESKTOP, true);
-
-      env.sandbox.stub(story.bookend_, 'build');
-      const buildShareMenuStub = env.sandbox.stub(story.shareMenu_, 'build');
-
-      return story.layoutCallback().then(() => {
-        expect(buildShareMenuStub).to.not.have.been.called;
-      });
-    });
-
-    // TODO(#11639): Re-enable this test.
-    it.skip('should hide bookend when CLOSE_BOOKEND is triggered', () => {
-      const hideBookendStub = env.sandbox.stub(
-        element.implementation_,
-        'hideBookend_',
-        NOOP
-      );
-
-      appendEmptyPage(element);
-
-      element.build();
-
-      element.dispatchEvent(new Event(EventType.CLOSE_BOOKEND));
-
-      expect(hideBookendStub).to.have.been.calledOnce;
-    });
-
-    // TODO(#11639): Re-enable this test.
-    it.skip('should return a valid page index', () => {
-      const count = 5;
-
-      const pages = createPages(element, count);
-
-      pages.forEach((page, i) => {
-        expect(element.implementation_.getPageIndex(page)).to.equal(i);
-      });
-    });
-
-    // TODO(#11639): Re-enable this test.
-    it.skip('should update progress bar when switching pages', () => {
-      const impl = element.implementation_;
-      const count = 10;
-      const index = 2;
-
-      const page = win.document.createElement('div');
-
-      const updateProgressBarStub = env.sandbox
-        .stub(impl.systemLayer_, 'updateProgressBar')
-        .callsFake(NOOP);
-
-      appendEmptyPage(element, /* opt_active */ true);
-
-      env.sandbox.stub(impl, 'getPageCount').returns(count);
-      env.sandbox.stub(impl, 'getPageIndex').withArgs(page).returns(index);
-
-      impl.switchTo_(page);
-
-      // first page is not counted as part of the progress
-      expect(updateProgressBarStub).to.have.been.calledWith(index, count - 1);
-    });
-
-    // TODO(#11639): Re-enable this test.
-    it.skip('should pause/resume pages when switching pages', () => {
-      const impl = element.implementation_;
-      const pages = createPages(element, 5);
-      const owners = Services.ownersForDoc(impl.element);
-      owners.schedulePause = env.sandbox.spy();
-      owners.scheduleResume = env.sandbox.spy();
-
-      const oldPage = pages[0];
-      const newPage = pages[1];
-
-      element.build();
-
-      return impl.switchTo_(newPage).then(() => {
-        expect(owners.schedulePause).to.have.been.calledWith(
-          impl.element,
-          oldPage
-        );
-        expect(owners.scheduleResume).to.have.been.calledWith(
-          impl.element,
-          newPage
-        );
-      });
-    });
-
-    // TODO(#11639): Re-enable this test.
-    it.skip('should go to next page on right arrow keydown', () => {
-      const pages = createPages(element, 5);
-
-      element.build();
-
-      expect(pages[0].hasAttribute('active')).to.be.true;
-      expect(pages[1].hasAttribute('active')).to.be.false;
-
-      // Stubbing because we need to assert synchronously
-      env.sandbox
-        .stub(element.implementation_, 'mutateElement')
-        .callsFake((mutator) => {
-          mutator();
-          return Promise.resolve();
-        });
-
-      const eventObj = createEvent('keydown');
-      eventObj.key = Keys.RIGHT_ARROW;
-      eventObj.which = KEYBOARD_EVENT_WHICH_RIGHT_ARROW;
-      const docEl = win.document.documentElement;
-      docEl.dispatchEvent
-        ? docEl.dispatchEvent(eventObj)
-        : docEl.fireEvent('onkeydown', eventObj);
-
-      expect(pages[0].hasAttribute('active')).to.be.false;
-      expect(pages[1].hasAttribute('active')).to.be.true;
-    });
-
-    it('lock body when amp-story is initialized', () => {
-      story.lockBody_();
-      expect(win.document.body.style.getPropertyValue('overflow')).to.be.equal(
-        'hidden'
-      );
-      expect(
-        win.document.documentElement.style.getPropertyValue('overflow')
-      ).to.be.equal('hidden');
-    });
-
-    it('builds and attaches pagination buttons ', () => {
-      const paginationButtonsStub = {
-        attach: env.sandbox.spy(),
-        onNavigationStateChange: env.sandbox.spy(),
-      };
-      env.sandbox
-        .stub(PaginationButtons, 'create')
-        .returns(paginationButtonsStub);
-      story.buildPaginationButtonsForTesting();
-      expect(paginationButtonsStub.attach).to.have.been.calledWith(
-        story.element
-      );
-    });
-
-    it.skip('toggles `i-amphtml-story-landscape` based on height and width', () => {
-      story.element.style.width = '11px';
-      story.element.style.height = '10px';
-      const isDesktopStub = env.sandbox
-        .stub(story, 'isDesktop_')
-        .returns(false);
-      story.vsync_ = {
-        run: (task, state) => {
-          if (task.measure) {
-            task.measure(state);
-          }
-          if (task.mutate) {
-            task.mutate(state);
-          }
-        },
-      };
-      story.onResize();
-      expect(isDesktopStub).to.be.calledOnce;
-      expect(story.element.classList.contains('i-amphtml-story-landscape')).to
-        .be.true;
-      story.element.style.width = '10px';
-      story.element.style.height = '11px';
-      story.onResize();
-      expect(isDesktopStub).to.be.calledTwice;
-      expect(story.element.classList.contains('i-amphtml-story-landscape')).to
-        .be.false;
-    });
-
-    it('should update page id in store', () => {
-      const firstPageId = 'page-one';
-      const pageCount = 2;
-      createPages(story.element, pageCount, [firstPageId, 'page-1']);
-      const dispatchStub = env.sandbox.stub(story.storeService_, 'dispatch');
-
-      return story.layoutCallback().then(() => {
-        expect(dispatchStub).to.have.been.calledWith(Action.CHANGE_PAGE, {
-          id: firstPageId,
-          index: 0,
-        });
-      });
-    });
-
-    it('should update page id in browser history', () => {
-      // Have to stub this because tests run in iframe and you can't write
-      // history from another domain (about:srcdoc)
-      const replaceStub = env.sandbox.stub(win.history, 'replaceState');
-      const firstPageId = 'page-zero';
-      const pageCount = 2;
-      createPages(story.element, pageCount, [firstPageId, 'page-1']);
-
-      story.buildCallback();
-      return story.layoutCallback().then(() => {
-        return expect(replaceStub).to.have.been.calledWith(
-          {ampStoryPageId: firstPageId},
-          ''
-        );
-      });
-    });
-
-    it('should NOT update page id in browser history if ad', () => {
-      // Have to stub this because tests run in iframe and you can't write
-      // history from another domain (about:srcdoc)
-      const replaceStub = env.sandbox.stub(win.history, 'replaceState');
-      const firstPageId = 'i-amphtml-ad-page-1';
-      const pageCount = 2;
-      const pages = createPages(story.element, pageCount, [
-        firstPageId,
-        'page-1',
-      ]);
-      const firstPage = pages[0];
-      firstPage.setAttribute('ad', '');
-
-      story.buildCallback();
-      return story.layoutCallback().then(() => {
-        return expect(replaceStub).to.not.have.been.called;
-      });
-    });
-  }
-);
-
-describes.realWin(
-  'amp-story origin allowlist',
-  {
-    amp: {
-      extensions: ['amp-story'],
-    },
-  },
-  (env) => {
-    let win;
-    let element;
-    let story;
-
-    beforeEach(() => {
-      win = env.win;
-      element = win.document.createElement('amp-story');
-      win.document.body.appendChild(element);
-
-      story = new AmpStory(element);
-      story.hashOrigin_ = IDENTITY_FN;
-    });
-
-    it('should allow exact allowlisted origin with https scheme', () => {
-      story.originAllowlist_ = ['example.com'];
-      expect(story.isOriginAllowlisted_('https://example.com')).to.be.true;
-    });
-
-    it('should allow exact allowlisted origin with http scheme', () => {
-      story.originAllowlist_ = ['example.com'];
-      expect(story.isOriginAllowlisted_('http://example.com')).to.be.true;
-    });
-
-    it('should allow www subdomain of origin', () => {
-      story.originAllowlist_ = ['example.com'];
-      expect(story.isOriginAllowlisted_('https://www.example.com')).to.be.true;
-    });
-
-    it('should allow subdomain of origin', () => {
-      story.originAllowlist_ = ['example.com'];
-      expect(story.isOriginAllowlisted_('https://foobar.example.com')).to.be
-        .true;
-    });
-
-    it('should not allow exact allowlisted domain under different tld', () => {
-      story.originAllowlist_ = ['example.com'];
-      expect(story.isOriginAllowlisted_('https://example.co.uk')).to.be.false;
-    });
-
-    it('should not allow exact allowlisted domain infixed in another tld', () => {
-      story.originAllowlist_ = ['example.co.uk'];
-      expect(story.isOriginAllowlisted_('https://example.co')).to.be.false;
-    });
-
-    it('should not allow domain that contains allowlisted domain', () => {
-      story.originAllowlist_ = ['example.co'];
-      expect(story.isOriginAllowlisted_('https://example.co.uk')).to.be.false;
-    });
-  }
-);
diff --git a/extensions/amp-story/0.1/test/test-analytics.js b/extensions/amp-story/0.1/test/test-analytics.js
deleted file mode 100644
index e260a43507923..0000000000000
--- a/extensions/amp-story/0.1/test/test-analytics.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {AmpStoryAnalytics} from '../analytics';
-import {StateChangeType} from '../navigation-state';
-
-describes.fakeWin('amp-story analytics', {}, (env) => {
-  let analytics;
-  let rootEl;
-
-  beforeEach(() => {
-    rootEl = env.win.document.createElement('div');
-    analytics = new AmpStoryAnalytics(rootEl);
-  });
-
-  it('should trigger `story-page-visible` on change', () => {
-    const trigger = env.sandbox.stub(analytics, 'triggerEvent_');
-
-    analytics.onNavigationStateChange({
-      type: StateChangeType.ACTIVE_PAGE,
-    });
-
-    expect(trigger).to.have.been.calledWith('story-page-visible');
-  });
-});
diff --git a/extensions/amp-story/0.1/test/test-full-bleed-animations.js b/extensions/amp-story/0.1/test/test-full-bleed-animations.js
deleted file mode 100644
index b51b7cdc40b00..0000000000000
--- a/extensions/amp-story/0.1/test/test-full-bleed-animations.js
+++ /dev/null
@@ -1,257 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-/**
- * @fileoverview Tests full-bleed animations like panning and zooming.
- */
-
-import {AmpStory} from '../amp-story';
-import {AmpStoryPage} from '../amp-story-page';
-import {PRESETS} from '../animation-presets';
-import {
-  calculateTargetScalingFactor,
-  targetFitsWithinPage,
-} from '../animation-presets-utils';
-
-describes.realWin(
-  'amp-story-full-bleed-animations',
-  {
-    amp: {
-      runtimeOn: true,
-      extensions: ['amp-story'],
-    },
-  },
-  (env) => {
-    let win;
-    let storyElem;
-    let ampStory;
-
-    beforeEach(() => {
-      win = env.win;
-      storyElem = win.document.createElement('amp-story');
-      win.document.body.appendChild(storyElem);
-      AmpStory.isBrowserSupported = () => true;
-      ampStory = new AmpStory(storyElem);
-    });
-
-    afterEach(() => {
-      storyElem.remove();
-    });
-
-    /**
-     * @param {!Element} container
-     * @param {number} count
-     * @param {Array<string>=} opt_ids
-     * @return {!Array<!Element>}
-     */
-    function createPages(container, count, opt_ids) {
-      return Array(count)
-        .fill(undefined)
-        .map((unused, i) => {
-          const page = win.document.createElement('amp-story-page');
-          page.id = opt_ids && opt_ids[i] ? opt_ids[i] : `-page-${i}`;
-          page.getImpl = () => Promise.resolve(new AmpStoryPage(page));
-          container.appendChild(page);
-          return page;
-        });
-    }
-
-    /**
-     * @param {!Element} container
-     * @param {string} animationName
-     * @param {string=} opt_gridLayerTempalate
-     */
-    function addAnimationToImage(
-      container,
-      animationName,
-      opt_gridLayerTempalate
-    ) {
-      const img = win.document.createElement('amp-img');
-      img.setAttribute('animate-in', animationName);
-
-      const gridLayer = win.document.createElement('amp-story-grid-layer');
-      opt_gridLayerTempalate = opt_gridLayerTempalate.length
-        ? opt_gridLayerTempalate
-        : 'fill';
-      gridLayer.setAttribute('template', opt_gridLayerTempalate);
-
-      gridLayer.appendChild(img);
-      container.appendChild(gridLayer);
-    }
-
-    it.skip(
-      'Should add corresponding CSS class when a full bleed animation target is' +
-        ' attached as a child of a grid layer with fill template.',
-      () => {
-        createPages(ampStory.element, 2, ['cover', 'page-1']);
-        return ampStory
-          .layoutCallback()
-          .then(() => {
-            // Get pages.
-            const pageElements = ampStory.element.getElementsByTagName(
-              'amp-story-page'
-            );
-            const pages = Array.from(pageElements).map((el) => el.getImpl());
-            return Promise.all(pages);
-          })
-          .then((pages) => {
-            // Append an image animated with a full-bleed animation inside a grid-
-            // layer with a `fill` template of the first page.
-            addAnimationToImage(pages[1].element, 'pan-down', 'fill');
-
-            pages[1].layoutCallback().then(() => {
-              const imgEls = pages[1].element.getElementsByTagName('amp-img');
-              expect(imgEls[0]).to.have.class(
-                'i-amphtml-story-grid-template-with-full-bleed-animation'
-              );
-            });
-          });
-      }
-    );
-
-    it.skip(
-      'Should not add additional CSS class to the target when a full-bleed ' +
-        'animation is used BUT the target is a child of a grid layer with a ' +
-        'template other than `fill`.',
-      () => {
-        createPages(ampStory.element, 2, ['cover', 'page-1']);
-        return ampStory
-          .layoutCallback()
-          .then(() => {
-            // Get pages.
-            const pageElements = ampStory.element.getElementsByTagName(
-              'amp-story-page'
-            );
-            const pages = Array.from(pageElements).map((el) => el.getImpl());
-            return Promise.all(pages);
-          })
-          .then((pages) => {
-            // Append an image animated with a full-bleed animation inside a grid-
-            // layer with a template other than fill.
-            addAnimationToImage(pages[1].element, 'fade-in', 'vertical');
-
-            pages[1].layoutCallback().then(() => {
-              const imgEls = pages[1].element.getElementsByTagName('amp-img');
-              expect(imgEls[0]).to.not.have.class(
-                'i-amphtml-story-grid-template-with-full-bleed-animation'
-              );
-            });
-          });
-      }
-    );
-
-    it.skip(
-      'Should not add additional CSS class to the target when a non-full-bleed' +
-        'animation is used.',
-      () => {
-        createPages(ampStory.element, 2, ['cover', 'page-1']);
-        return ampStory
-          .layoutCallback()
-          .then(() => {
-            // Get pages.
-            const pageElements = ampStory.element.getElementsByTagName(
-              'amp-story-page'
-            );
-            const pages = Array.from(pageElements).map((el) => el.getImpl());
-            return Promise.all(pages);
-          })
-          .then((pages) => {
-            // Append an image animated with a non-full-bleed animation.
-            addAnimationToImage(pages[1].element, 'fade-in', 'fill');
-
-            pages[1].layoutCallback().then(() => {
-              const imgEls = pages[1].element.getElementsByTagName('amp-img');
-              expect(imgEls[0]).to.not.have.class(
-                'i-amphtml-story-grid-template-with-full-bleed-animation'
-              );
-            });
-          });
-      }
-    );
-  }
-);
-
-describes.realWin(
-  'amp-story-animations-utils',
-  {
-    amp: {
-      runtimeOn: true,
-      extensions: ['amp-story'],
-    },
-  },
-  () => {
-    /**
-     * @param {number} pageW
-     * @param {number} pageH
-     * @param {number} targetW
-     * @param {number} targetH
-     * @return {!StoryAnimationDimsDef}
-     */
-    function setDimensions(pageW, pageH, targetW, targetH) {
-      return /** @type {!StoryAnimationDimsDef} */ ({
-        pageWidth: pageW,
-        pageHeight: pageH,
-        targetWidth: targetW,
-        targetHeight: targetH,
-        targetX: 0,
-        targetY: 0,
-      });
-    }
-
-    it('Should fit target same size as the screen.', () => {
-      const dimensions = setDimensions(380, 580, 360, 580);
-      expect(targetFitsWithinPage(dimensions)).to.be.true;
-    });
-
-    it('Should fit target with bigger width but same height as screen.', () => {
-      const dimensions = setDimensions(380, 580, 400, 580);
-      expect(targetFitsWithinPage(dimensions)).to.be.true;
-    });
-
-    it('Should not fit target with larger width and height than screen.', () => {
-      const dimensions = setDimensions(380, 580, 400, 600);
-      expect(targetFitsWithinPage(dimensions)).to.be.false;
-    });
-
-    it('Should scale the target accordingly.', () => {
-      const dimensions = setDimensions(380, 580, 360, 580);
-      expect(targetFitsWithinPage(dimensions)).to.be.true;
-
-      const factorThatWillMakeTargetFitPage = 380 / 360;
-      const factor = factorThatWillMakeTargetFitPage * 1.25;
-      expect(calculateTargetScalingFactor(dimensions)).to.equal(factor);
-
-      const calculatedKeyframes = PRESETS['pan-up'];
-      calculatedKeyframes.keyframes = calculatedKeyframes.keyframes(dimensions);
-
-      const offsetX = -dimensions.targetWidth / 2;
-      const offsetY = dimensions.pageHeight - dimensions.targetHeight;
-
-      const expectedKeyframes = [
-        {
-          'transform': `translate(${offsetX}px, ${offsetY}px) scale(${factor})`,
-          'transform-origin': 'left top',
-        },
-        {
-          'transform': `translate(${offsetX}px, 0px) scale(${factor})`,
-          'transform-origin': 'left top',
-        },
-      ];
-
-      expect(calculatedKeyframes.keyframes).to.deep.equal(expectedKeyframes);
-    });
-  }
-);
diff --git a/extensions/amp-story/0.1/test/test-loading-spinner.js b/extensions/amp-story/0.1/test/test-loading-spinner.js
deleted file mode 100644
index 0741e065ac231..0000000000000
--- a/extensions/amp-story/0.1/test/test-loading-spinner.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {LoadingSpinner} from '../loading-spinner';
-
-describes.realWin('loading-spinner', {}, (env) => {
-  let win;
-  let loadingSpinner;
-
-  beforeEach(() => {
-    win = env.win;
-    loadingSpinner = new LoadingSpinner(win.document);
-  });
-
-  it('should build the loading spinner', () => {
-    const loadingSpinnerEl = loadingSpinner.build();
-    expect(loadingSpinnerEl.className).to.contain('i-amphtml-story-spinner');
-  });
-
-  it('should be hidden by default', () => {
-    const loadingSpinnerEl = loadingSpinner.build();
-
-    expect(loadingSpinnerEl).not.to.have.attribute('active');
-    expect(loadingSpinnerEl).to.have.attribute('aria-hidden');
-    expect(loadingSpinnerEl.getAttribute('aria-hidden')).to.equal('true');
-  });
-
-  it('should toggle the loading spinner', () => {
-    const loadingSpinnerEl = loadingSpinner.build();
-    loadingSpinner.toggle(true);
-
-    expect(loadingSpinnerEl).to.have.attribute('active');
-    expect(loadingSpinnerEl).to.have.attribute('aria-hidden');
-    expect(loadingSpinnerEl.getAttribute('aria-hidden')).to.equal('false');
-  });
-});
diff --git a/extensions/amp-story/0.1/test/test-media-pool.js b/extensions/amp-story/0.1/test/test-media-pool.js
deleted file mode 100644
index c7746f646ba9f..0000000000000
--- a/extensions/amp-story/0.1/test/test-media-pool.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {MediaPool, MediaType} from '../media-pool';
-import {Services} from '../../../../src/services';
-import {findIndex} from '../../../../src/utils/array';
-
-const NOOP = () => {};
-
-describes.realWin('media-pool', {}, (env) => {
-  let win;
-  let mediaPool;
-  let distanceFnStub;
-  const COUNTS = {
-    [MediaType.AUDIO]: 2,
-    [MediaType.VIDEO]: 2,
-  };
-
-  beforeEach(() => {
-    win = env.win;
-    env.sandbox
-      .stub(Services, 'vsyncFor')
-      .callsFake(() => ({mutate: (task) => task()}));
-    env.sandbox.stub(Services, 'timerFor').callsFake(() => ({delay: NOOP}));
-
-    mediaPool = new MediaPool(win, COUNTS, (element) => {
-      return distanceFnStub(element);
-    });
-  });
-
-  /**
-   * @param {string} tagName
-   * @return {!HTMLMediaElement}
-   */
-  function createMediaElement(tagName) {
-    const el = env.win.document.createElement(tagName);
-    el.src = `http://example.com/${tagName}.xyz`;
-    env.win.document.body.appendChild(el);
-    return el;
-  }
-
-  /**
-   * @param {string} tagName
-   * @param {number} count
-   * @return {!Array<!HTMLMediaElement>}
-   */
-  function createMediaElements(tagName, count) {
-    const results = [];
-
-    for (let i = 0; i < count; i++) {
-      results.push(createMediaElement(tagName));
-    }
-
-    return results;
-  }
-
-  /**
-   * @param {!Object|!Array} poolOrPools
-   * @return {!Array<!HTMLMediaElement>}
-   */
-  function getElements(poolOrPools) {
-    const results = [];
-
-    const pools = Array.isArray(poolOrPools) ? poolOrPools : [poolOrPools];
-    pools.forEach((pool) => {
-      Object.keys(pool).forEach((key) => {
-        pool[key].forEach((el) => {
-          results.push(el);
-        });
-      });
-    });
-
-    return results;
-  }
-
-  /**
-   * @param {!Array<!HTMLMediaElement>} array
-   * @param {!HTMLMediaElement} element
-   * @return {boolean>}
-   */
-  function isElementInPool(array, element) {
-    const index = findIndex(array, (el) => {
-      return el['replaced-media'] === element.getAttribute('id');
-    });
-
-    return index >= 0;
-  }
-
-  it('should not be null', () => {
-    expect(mediaPool).to.not.be.null;
-  });
-
-  it('should start with no allocated elements', () => {
-    expect(getElements(mediaPool.allocated).length).to.equal(0);
-  });
-
-  it('should allocate element on play', () => {
-    mediaPool = new MediaPool(win, {'video': 2}, (unusedEl) => 0);
-
-    const videoEl = createMediaElement('video');
-    mediaPool.register(videoEl);
-
-    expect(mediaPool.allocated['video'].length).to.equal(0);
-    expect(mediaPool.unallocated['video'].length).to.equal(2);
-
-    mediaPool.play(videoEl);
-
-    expect(mediaPool.allocated['video'].length).to.equal(1);
-    expect(mediaPool.unallocated['video'].length).to.equal(1);
-  });
-
-  it.skip('should evict the element with the highest distance first', () => {
-    const elements = createMediaElements('video', 3);
-    mediaPool = new MediaPool(win, {'video': 2}, (element) => {
-      const index = elements.indexOf(element);
-      if (index < 0) {
-        return 9999;
-      }
-
-      return index;
-    });
-
-    elements.forEach((element) => mediaPool.register(element));
-    elements.forEach((element) => mediaPool.play(element));
-
-    expect(mediaPool.allocated['video'].length).to.equal(2);
-    expect(isElementInPool(mediaPool.allocated['video'], elements[0])).to.be
-      .true;
-    expect(isElementInPool(mediaPool.allocated['video'], elements[1])).to.be
-      .true;
-    expect(isElementInPool(mediaPool.allocated['video'], elements[2])).to.be
-      .false;
-  });
-});
diff --git a/extensions/amp-story/0.1/test/test-media-tasks.js b/extensions/amp-story/0.1/test/test-media-tasks.js
deleted file mode 100644
index b5b98062874ef..0000000000000
--- a/extensions/amp-story/0.1/test/test-media-tasks.js
+++ /dev/null
@@ -1,245 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {
-  LoadTask,
-  MuteTask,
-  PauseTask,
-  PlayTask,
-  RewindTask,
-  SwapIntoDomTask,
-  SwapOutOfDomTask,
-  UnmuteTask,
-  UpdateSourcesTask,
-} from '../media-tasks';
-import {Sources} from '../sources';
-import {toArray} from '../../../../src/types';
-
-describes.realWin('media-tasks', {}, (env) => {
-  let el;
-  let vsyncApi;
-
-  beforeEach(() => {
-    el = document.createElement('video');
-
-    // Mock vsync
-    vsyncApi = {
-      mutatePromise: () => {},
-    };
-    env.sandbox.stub(vsyncApi, 'mutatePromise').resolves((callback) => {
-      callback();
-    });
-  });
-
-  describe('PauseTask', () => {
-    it('should call pause()', () => {
-      const pause = env.sandbox.spy(el, 'pause');
-      const task = new PauseTask();
-      task.execute(el);
-      expect(pause).to.have.been.called;
-    });
-  });
-
-  describe('PlayTask', () => {
-    it('should call play() if element was not yet playing', () => {
-      expect(el.paused).to.be.true;
-
-      const play = env.sandbox.spy(el, 'play');
-      const task = new PlayTask();
-      task.execute(el);
-      expect(play).to.have.been.called;
-    });
-
-    it('should not call play() if element was already playing', () => {
-      el.play();
-      expect(el.paused).to.be.false;
-
-      const play = env.sandbox.spy(el, 'play');
-      const task = new PlayTask();
-      task.execute(el);
-      expect(play).not.to.have.been.called;
-    });
-  });
-
-  describe('MuteTask', () => {
-    it('should set muted to true', () => {
-      el.muted = false;
-      expect(el.muted).to.be.false;
-
-      const task = new MuteTask();
-      task.execute(el);
-      expect(el.muted).to.be.true;
-    });
-  });
-
-  describe('UnmuteTask', () => {
-    it('should set muted to false', () => {
-      el.muted = true;
-      expect(el.muted).to.be.true;
-
-      const task = new UnmuteTask();
-      task.execute(el);
-      expect(el.muted).to.be.false;
-    });
-  });
-
-  describe('LoadTask', () => {
-    it('should call load()', () => {
-      const load = env.sandbox.spy(el, 'load');
-      const task = new LoadTask();
-      task.execute(el);
-      expect(load).to.have.been.called;
-    });
-  });
-
-  describe('RewindTask', () => {
-    it('should set currentTime to 0', () => {
-      el.currentTime = 1;
-      expect(el.currentTime).to.equal(1);
-
-      const task = new RewindTask();
-      task.execute(el);
-      expect(el.currentTime).to.equal(0);
-    });
-  });
-
-  describe('UpdateSourcesTask', () => {
-    /**
-     * @param {number} index
-     * @return {string}
-     */
-    function getFakeVideoUrl(index) {
-      return `http://example.com/video${index}.mp4`;
-    }
-
-    /**
-     * @param {number} index
-     * @return {!Element}
-     */
-    function getFakeSource(index) {
-      const source = document.createElement('source');
-      source.src = getFakeVideoUrl(index);
-      return source;
-    }
-
-    /**
-     * @param {!Array<number>} indices
-     * @return {!Array<!Element>}
-     */
-    function getFakeSources(indices) {
-      return indices.map((index) => getFakeSource(index));
-    }
-
-    it('should clear existing src attribute', () => {
-      const OLD_SRC_URL = getFakeVideoUrl(1);
-      el.src = OLD_SRC_URL;
-
-      expect(el.src).to.not.be.empty;
-      const newSources = new Sources(null, []);
-      const task = new UpdateSourcesTask(newSources);
-      task.execute(el);
-      expect(el.src).to.be.empty;
-      expect(toArray(el.children)).to.be.empty;
-    });
-
-    it('should clear existing source elements', () => {
-      const OLD_SRC_ELS = getFakeSources([1, 2, 3]);
-      OLD_SRC_ELS.forEach((source) => {
-        el.appendChild(source);
-      });
-
-      expect(toArray(el.children)).to.deep.equal(OLD_SRC_ELS);
-      const newSources = new Sources(null, []);
-      const task = new UpdateSourcesTask(newSources);
-      task.execute(el);
-      expect(el.src).to.be.empty;
-      expect(toArray(el.children)).to.be.empty;
-    });
-
-    it('should set new src attribute', () => {
-      const OLD_SRC_URL = getFakeVideoUrl(1);
-      const NEW_SRC_URL = getFakeVideoUrl(2);
-      el.src = OLD_SRC_URL;
-
-      expect(el.src).to.not.be.empty;
-      const newSources = new Sources(NEW_SRC_URL, []);
-      const task = new UpdateSourcesTask(newSources);
-      task.execute(el);
-      expect(el.src).to.equal(NEW_SRC_URL);
-      expect(toArray(el.children)).to.be.empty;
-    });
-
-    it('should set new source elements', () => {
-      const OLD_SRC_ELS = getFakeSources([1, 2, 3]);
-      const NEW_SRC_ELS = getFakeSources([4, 5, 6]);
-
-      OLD_SRC_ELS.forEach((source) => {
-        el.appendChild(source);
-      });
-
-      expect(toArray(el.children)).to.deep.equal(OLD_SRC_ELS);
-      const newSources = new Sources(null, NEW_SRC_ELS);
-      const task = new UpdateSourcesTask(newSources);
-      task.execute(el);
-      expect(el.src).to.be.empty;
-      expect(toArray(el.children)).to.deep.equal(NEW_SRC_ELS);
-    });
-  });
-
-  describe('BlessTask', () => {
-    // TODO(newmuis): Blessing depends on the media element's play() promise
-    // being resolved, which does not happen until the video starts playing.
-    // However, the video will not play unless it is visible in the DOM.  We
-    // will need integration tests for this to rely on the actual underlying
-    // browser behavior.
-  });
-
-  describe('SwapIntoDomTask', () => {
-    // TODO(newmuis): Get this test working.
-    it.skip('should replace element in DOM', () => {
-      const parent = document.createElement('div');
-      const replacedMedia = document.createElement('video');
-      parent.appendChild(replacedMedia);
-
-      expect(replacedMedia.parentElement).to.equal(parent);
-      expect(el.parentElement).to.equal(null);
-
-      const task = new SwapIntoDomTask(replacedMedia);
-      return task.execute(el).then(() => {
-        expect(replacedMedia.parentElement).to.equal(null);
-        expect(el.parentElement).to.equal(parent);
-      });
-    });
-  });
-
-  describe('SwapOutOfDomTask', () => {
-    // TODO(newmuis): Get this test working.
-    it.skip('should replace element in DOM', () => {
-      const placeholderEl = document.createElement('video');
-
-      const parent = document.createElement('div');
-      parent.appendChild(el);
-
-      expect(el.parentElement).to.equal(parent);
-      expect(placeholderEl.parentElement).to.equal(null);
-
-      const task = new SwapOutOfDomTask(placeholderEl);
-      return task.execute(el).then(() => {
-        expect(el.parentElement).to.equal(null);
-        expect(placeholderEl.parentElement).to.equal(parent);
-      });
-    });
-  });
-});
diff --git a/extensions/amp-story/0.1/test/test-navigation-state.js b/extensions/amp-story/0.1/test/test-navigation-state.js
deleted file mode 100644
index 3306447bcfe2f..0000000000000
--- a/extensions/amp-story/0.1/test/test-navigation-state.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {Action, AmpStoryStoreService} from '../amp-story-store-service';
-import {NavigationState, StateChangeType} from '../navigation-state';
-import {registerServiceBuilder} from '../../../../src/service';
-
-describes.fakeWin('amp-story navigation state', {ampdoc: 'none'}, (env) => {
-  let navigationState;
-  let hasBookend = false;
-  let storeService;
-
-  beforeEach(() => {
-    storeService = new AmpStoryStoreService(env.win);
-    registerServiceBuilder(env.win, 'story-store', function () {
-      return storeService;
-    });
-    hasBookend = false;
-    navigationState = new NavigationState(
-      env.win,
-      // Not using `Promise.resolve` since we need synchronicity.
-      () => ({
-        then(fn) {
-          fn(hasBookend);
-        },
-      })
-    );
-  });
-
-  it('should dispatch active page changes to all observers', () => {
-    const observers = Array(5)
-      .fill(undefined)
-      .map(() => env.sandbox.spy());
-
-    observers.forEach((observer) => navigationState.observe(observer));
-
-    navigationState.updateActivePage(0, 10, 'my-page-id-1');
-
-    observers.forEach((observer) => {
-      expect(observer).to.have.been.calledWith(
-        env.sandbox.match(
-          (e) =>
-            e.type == StateChangeType.ACTIVE_PAGE &&
-            e.value.pageIndex === 0 &&
-            e.value.totalPages === 10 &&
-            e.value.pageId == 'my-page-id-1' &&
-            e.value.storyProgress === 0
-        )
-      );
-    });
-
-    navigationState.updateActivePage(5, 15, 'foo');
-
-    observers.forEach((observer) => {
-      expect(observer).to.have.been.calledWith(
-        env.sandbox.match(
-          (e) =>
-            e.type == StateChangeType.ACTIVE_PAGE &&
-            e.value.pageIndex === 5 &&
-            e.value.totalPages === 15 &&
-            e.value.pageId === 'foo' &&
-            e.value.storyProgress === 1 / 3
-        )
-      );
-    });
-
-    navigationState.updateActivePage(2, 5, 'one-two-three');
-
-    observers.forEach((observer) => {
-      expect(observer).to.have.been.calledWith(
-        env.sandbox.match(
-          (e) =>
-            e.type == StateChangeType.ACTIVE_PAGE &&
-            e.value.pageIndex === 2 &&
-            e.value.totalPages === 5 &&
-            e.value.pageId == 'one-two-three' &&
-            e.value.storyProgress === 0.4
-        )
-      );
-    });
-  });
-
-  it('should dispatch END on last page if story does NOT have bookend', () => {
-    const observer = env.sandbox.spy();
-
-    navigationState.observe((event) => observer(event));
-
-    hasBookend = false;
-
-    navigationState.updateActivePage(1, 2);
-
-    expect(observer).to.have.been.calledWith(
-      env.sandbox.match(
-        (e) =>
-          e.type == StateChangeType.ACTIVE_PAGE &&
-          e.value.pageIndex === 1 &&
-          e.value.totalPages === 2
-      )
-    );
-
-    expect(observer).to.have.been.calledWith(
-      env.sandbox.match((e) => e.type == StateChangeType.END)
-    );
-  });
-
-  it('should NOT dispatch END on last page if story has bookend', () => {
-    const observer = env.sandbox.spy();
-
-    navigationState.observe((event) => observer(event));
-
-    hasBookend = true;
-
-    navigationState.updateActivePage(1, 2);
-
-    expect(observer).to.have.been.calledWith(
-      env.sandbox.match(
-        (e) =>
-          e.type == StateChangeType.ACTIVE_PAGE &&
-          e.value.pageIndex === 1 &&
-          e.value.totalPages === 2
-      )
-    );
-
-    expect(observer).to.not.have.been.calledWith(
-      env.sandbox.match((e) => e.type == StateChangeType.END)
-    );
-  });
-
-  it('should dispatch BOOKEND_ENTER/END and BOOKEND_EXIT', () => {
-    const observer = env.sandbox.spy();
-
-    navigationState.observe((event) => observer(event.type));
-
-    storeService.dispatch(Action.TOGGLE_BOOKEND, true);
-
-    expect(observer).to.have.been.calledWith(StateChangeType.BOOKEND_ENTER);
-    expect(observer).to.have.been.calledWith(StateChangeType.END);
-
-    storeService.dispatch(Action.TOGGLE_BOOKEND, false);
-
-    expect(observer).to.have.been.calledWith(StateChangeType.BOOKEND_EXIT);
-  });
-});
diff --git a/extensions/amp-story/0.1/test/test-origin-allowlist.js b/extensions/amp-story/0.1/test/test-origin-allowlist.js
deleted file mode 100644
index a5edea07a6d2f..0000000000000
--- a/extensions/amp-story/0.1/test/test-origin-allowlist.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {ORIGIN_ALLOWLIST} from '../origin-allowlist';
-
-describes.fakeWin('amp-story origin allowlist', {}, () => {
-  it('should not have duplicates', () => {
-    let hasDuplicates = false;
-    const originList = ORIGIN_ALLOWLIST.reduce((origins, origin) => {
-      if (origins.indexOf(origin) >= 0) {
-        hasDuplicates = true;
-        return origins;
-      }
-
-      origins.push(origin);
-      return origins;
-    }, []);
-
-    expect(
-      hasDuplicates,
-      'Origin list should be:' +
-        `\n\n[\n  '${originList.join("',\n  '")}',\n];\n`
-    ).to.be.false;
-  });
-});
diff --git a/extensions/amp-story/0.1/test/test-utils.js b/extensions/amp-story/0.1/test/test-utils.js
deleted file mode 100644
index 7b8fdd905f341..0000000000000
--- a/extensions/amp-story/0.1/test/test-utils.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {
-  getRGBFromCssColorValue,
-  getTextColorForRGB,
-  timeStrToMillis,
-} from '../utils';
-
-describes.fakeWin('amp-story utils', {}, () => {
-  describe('timeStrToMillis', () => {
-    it('should return millis for a milliseconds string', () => {
-      const millis = timeStrToMillis('100ms');
-
-      expect(millis).to.equal(100);
-    });
-
-    it('should return millis for a seconds string', () => {
-      const millisForSeconds = timeStrToMillis('1s');
-
-      expect(millisForSeconds).to.equal(1000);
-    });
-
-    it('should return millis for a decimal seconds string', () => {
-      const millisForSeconds = timeStrToMillis('1.64s');
-
-      expect(millisForSeconds).to.equal(1640);
-    });
-
-    it('should return millis for a uppercase string', () => {
-      const millisForSeconds = timeStrToMillis('2.5S');
-
-      expect(millisForSeconds).to.equal(2500);
-    });
-
-    it('should return undefined for invalid types', () => {
-      const convertedMillis = timeStrToMillis('10kg');
-      expect(convertedMillis).to.be.NaN;
-    });
-  });
-
-  describe('getRGBFromCssColorValue', () => {
-    it('should accept rgb parameters', () => {
-      expect(getRGBFromCssColorValue('rgb(0, 10, 100)')).to.deep.equal({
-        r: 0,
-        g: 10,
-        b: 100,
-      });
-    });
-
-    it('should accept rgba parameters', () => {
-      expect(getRGBFromCssColorValue('rgba(0, 10, 100, 0.1)')).to.deep.equal({
-        r: 0,
-        g: 10,
-        b: 100,
-      });
-    });
-
-    it('should throw an error if wrong parameters', () => {
-      allowConsoleError(() => {
-        getRGBFromCssColorValue('who dis');
-      });
-    });
-
-    it('should return a default value if wrong parameters', () => {
-      allowConsoleError(() => {
-        expect(getRGBFromCssColorValue('who dis')).to.deep.equal({
-          r: 0,
-          g: 0,
-          b: 0,
-        });
-      });
-    });
-  });
-
-  describe('getTextColorForRGB', () => {
-    it('should return white for a dark background', () => {
-      expect(getTextColorForRGB({r: 10, g: 10, b: 10})).to.equal('#FFF');
-    });
-
-    it('should return white for a light background', () => {
-      expect(getTextColorForRGB({r: 200, g: 200, b: 200})).to.equal('#000');
-    });
-  });
-});
diff --git a/extensions/amp-story/0.1/test/test-variable-service.js b/extensions/amp-story/0.1/test/test-variable-service.js
deleted file mode 100644
index 721a8fc388ba1..0000000000000
--- a/extensions/amp-story/0.1/test/test-variable-service.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {AmpStoryVariableService} from '../variable-service';
-import {StateChangeType} from '../navigation-state';
-
-describes.fakeWin('amp-story variable service', {}, () => {
-  let variableService;
-
-  beforeEach(() => {
-    variableService = new AmpStoryVariableService();
-  });
-
-  it('should update pageIndex and pageId on change', () => {
-    variableService.onNavigationStateChange({
-      type: StateChangeType.ACTIVE_PAGE,
-      value: {
-        pageIndex: 123,
-        pageId: 'my-page-id',
-      },
-    });
-
-    const variables = variableService.get();
-    expect(variables['storyPageIndex']).to.equal(123);
-    expect(variables['storyPageId']).to.equal('my-page-id');
-  });
-});
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-animations-error.html b/extensions/amp-story/0.1/test/validator-amp-story-animations-error.html
deleted file mode 100644
index bb69308846184..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-animations-error.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!--
-  Copyright 2018 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.
--->
-<!--
-  Test Description:
-  Validator should prohibit invalid values in animate-in attribute.
--->
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>amp-story</title>
-  <link rel="canonical" href="/stories/features/animations/">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <style amp-custom>
-    amp-story-page {
-      font-family: 'Roboto', sans-serif;
-      background: #fff;
-    }
-    amp-story-grid-layer {
-      align-items: center;
-      justify-items: center;
-    }
-    .square {
-      background: #b60845;
-      width: 96px;
-      height: 96px;
-    }
-    </style>
-</head>
-<body>
-  <amp-story standalone>
-    <amp-story-page id="combining-animations">
-        <amp-story-grid-layer template="thirds">
-          <h1>invalid animation value + empty animation value</h1>
-          <div animate-in="invalid animation value"
-               animate-in-duration="2s"
-               grid-area="middle-third">
-            <div class="square"
-                 animate-in-duration="2s"
-                 animate-in="">
-            </div>
-          </div>
-        </amp-story-grid-layer>
-      </amp-story-page>
-  </amp-story>
-</body>
-</html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-animations-error.out b/extensions/amp-story/0.1/test/validator-amp-story-animations-error.out
deleted file mode 100644
index b7bc94a15d69e..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-animations-error.out
+++ /dev/null
@@ -1,84 +0,0 @@
-FAIL
-|  <!--
-|    Copyright 2018 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.
-|  -->
-|  <!--
-|    Test Description:
-|    Validator should prohibit invalid values in animate-in attribute.
-|  -->
-|  <!doctype html>
-|  <html ⚡>
-|  <head>
-|    <meta charset="utf-8">
-|    <title>amp-story</title>
-|    <link rel="canonical" href="/stories/features/animations/">
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations-error.html:27:2 The attribute 'src' in tag 'amp-story extension .js script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-story-0.1.js'. (see https://amp.dev/documentation/components/amp-story)
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <style amp-custom>
-|      amp-story-page {
-|        font-family: 'Roboto', sans-serif;
-|        background: #fff;
-|      }
-|      amp-story-grid-layer {
-|        align-items: center;
-|        justify-items: center;
-|      }
-|      .square {
-|        background: #b60845;
-|        width: 96px;
-|        height: 96px;
-|      }
-|      </style>
-|  </head>
-|  <body>
-|    <amp-story standalone>
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations-error.html:47:2 The mandatory attribute 'poster-portrait-src' is missing in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations-error.html:47:2 The mandatory attribute 'publisher' is missing in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations-error.html:47:2 The mandatory attribute 'publisher-logo-src' is missing in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations-error.html:47:2 The mandatory attribute 'title' is missing in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
-|      <amp-story-page id="combining-animations">
-|          <amp-story-grid-layer template="thirds">
-|            <h1>invalid animation value + empty animation value</h1>
-|            <div animate-in="invalid animation value"
->>           ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations-error.html:51:10 The attribute 'animate-in' may not appear in tag 'div'.
->>           ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations-error.html:51:10 The attribute 'animate-in-duration' may not appear in tag 'div'.
->>           ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations-error.html:51:10 The attribute 'grid-area' may not appear in tag 'div'.
-|                 animate-in-duration="2s"
-|                 grid-area="middle-third">
-|              <div class="square"
->>             ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations-error.html:54:12 The attribute 'animate-in' may not appear in tag 'div'.
->>             ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations-error.html:54:12 The attribute 'animate-in-duration' may not appear in tag 'div'.
-|                   animate-in-duration="2s"
-|                   animate-in="">
-|              </div>
-|            </div>
-|          </amp-story-grid-layer>
-|        </amp-story-page>
-|    </amp-story>
-|  </body>
-|  </html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-animations.html b/extensions/amp-story/0.1/test/validator-amp-story-animations.html
deleted file mode 100644
index 9a79577f83156..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-animations.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!--
-  Copyright 2018 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.
--->
-<!--
-  Test Description:
-  Tests the validation rules of the `animate-in` attribute in amp-story animations.
--->
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>amp-story</title>
-  <link rel="canonical" href="/stories/features/animations/">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <style amp-custom>
-    amp-story-page {
-      font-family: 'Roboto', sans-serif;
-      background: #fff;
-    }
-    amp-story-grid-layer {
-      align-items: center;
-      justify-items: center;
-    }
-    .img-container {
-      position: absloute;
-    }
-    </style>
-</head>
-<body>
-  <amp-story standalone>
-    <amp-story-page id="ken-burns-effect">
-      <amp-story-grid-layer template="vertical">
-        <h1>ken-burns-effect</h1>
-        <div animate-in="zoom-in" animate-in-duration="30s" class="img-container">
-            <amp-img id="ken-burns-img1"
-               src="https://picsum.photos/1024/768?image=1077"
-               animate-in="pan-left"
-               animate-in-duration="30s"
-               layout="fixed"
-               width="1024"
-               height="768">
-            </amp-img>
-        </div>
-        <div animate-in="fade-in" animate-in-after="ken-burns-img1" animate-in-delay="0.25s" animate-in-duration="1s">
-          <div
-            animate-in="zoom-out"
-            animate-in-duration="30s"
-            class="img-container"
-            animate-in-after="ken-burns-img1">
-            <amp-img id="ken-burns-img2"
-              src="https://picsum.photos/1024/768?image=1026"
-              layout="fixed"
-              width="1024"
-              height="768"
-              animate-in="pan-down"
-              animate-in-duration="30s"
-              animate-in-after="ken-burns-img1">
-            </amp-img>
-          </div>
-        </div>
-      </amp-story-grid-layer>
-    </amp-story-page>
-  </amp-story>
-</body>
-</html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-animations.out b/extensions/amp-story/0.1/test/validator-amp-story-animations.out
deleted file mode 100644
index d5a8b3e2bc630..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-animations.out
+++ /dev/null
@@ -1,91 +0,0 @@
-FAIL
-|  <!--
-|    Copyright 2018 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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests the validation rules of the `animate-in` attribute in amp-story animations.
-|  -->
-|  <!doctype html>
-|  <html ⚡>
-|  <head>
-|    <meta charset="utf-8">
-|    <title>amp-story</title>
-|    <link rel="canonical" href="/stories/features/animations/">
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations.html:27:2 The attribute 'src' in tag 'amp-story extension .js script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-story-0.1.js'. (see https://amp.dev/documentation/components/amp-story)
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <style amp-custom>
-|      amp-story-page {
-|        font-family: 'Roboto', sans-serif;
-|        background: #fff;
-|      }
-|      amp-story-grid-layer {
-|        align-items: center;
-|        justify-items: center;
-|      }
-|      .img-container {
-|        position: absloute;
-|      }
-|      </style>
-|  </head>
-|  <body>
-|    <amp-story standalone>
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations.html:45:2 The mandatory attribute 'poster-portrait-src' is missing in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations.html:45:2 The mandatory attribute 'publisher' is missing in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations.html:45:2 The mandatory attribute 'publisher-logo-src' is missing in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-animations.html:45:2 The mandatory attribute 'title' is missing in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
-|      <amp-story-page id="ken-burns-effect">
-|        <amp-story-grid-layer template="vertical">
-|          <h1>ken-burns-effect</h1>
-|          <div animate-in="zoom-in" animate-in-duration="30s" class="img-container">
-|              <amp-img id="ken-burns-img1"
-|                 src="https://picsum.photos/1024/768?image=1077"
-|                 animate-in="pan-left"
-|                 animate-in-duration="30s"
-|                 layout="fixed"
-|                 width="1024"
-|                 height="768">
-|              </amp-img>
-|          </div>
-|          <div animate-in="fade-in" animate-in-after="ken-burns-img1" animate-in-delay="0.25s" animate-in-duration="1s">
-|            <div
-|              animate-in="zoom-out"
-|              animate-in-duration="30s"
-|              class="img-container"
-|              animate-in-after="ken-burns-img1">
-|              <amp-img id="ken-burns-img2"
-|                src="https://picsum.photos/1024/768?image=1026"
-|                layout="fixed"
-|                width="1024"
-|                height="768"
-|                animate-in="pan-down"
-|                animate-in-duration="30s"
-|                animate-in-after="ken-burns-img1">
-|              </amp-img>
-|            </div>
-|          </div>
-|        </amp-story-grid-layer>
-|      </amp-story-page>
-|    </amp-story>
-|  </body>
-|  </html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-consent-geo.html b/extensions/amp-story/0.1/test/validator-amp-story-consent-geo.html
deleted file mode 100644
index 73ed31f39c0e3..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-consent-geo.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!--
-  Copyright 2018 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.
--->
-<!--
-  Test Description:
-  Tests for the amp-geo tag.
--->
-<!doctype html>
-<html ⚡>
-<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-0.1.js"></script>
-  <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
-  <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
-  <title>My Story</title>
-  <meta name="description" content="Get started with amp-story">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link rel="canonical" href="grid-layer-templates.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>
-</head>
-<body>
-  <amp-story standalone title="Foo" publisher="AMP" publisher-logo-src="http://example.com/foo.png" poster-portrait-src="http://example.com/foo.png">
-    <amp-geo layout="nodisplay">
-      <script type="application/json">{
-        "ISOCountryGroups": {
-          "eea": [ "at", "be", "bg", "cy", "cz", "de", "dk", "ee", "es", "fi", "fr",
-          "gb", "gr", "hr", "hu", "ie", "is", "it", "li", "lt", "lu", "lv", "mt", "nl",
-          "no", "pl", "pt", "ro", "se", "si", "sk"]
-        }
-      }</script>
-    </amp-geo>
-    <amp-consent id='ABC' layout='nodisplay'>
-      <script type="application/json">{
-        "consents": {
-          "ABC": {
-            "checkConsentHref": "http://localhost:8000/get-consent-v1",
-            "promptUI": "ui0"
-          }
-        }
-      }</script>
-      <amp-story-consent id="ui0" layout="nodisplay">
-        <script type="application/json">{
-          "title": "A message from AMP",
-          "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar a quam non tincidunt. Nam dictum non nisi eu consectetur.",
-          "vendors": ["Example Vendor One", "Example Vendor Two", "Example Vendor Three", "Google Adwords"]
-        }</script>
-      </amp-story-consent>
-    </amp-consent>
-    <amp-story-page id="fill-template-title">
-      <amp-story-grid-layer template="vertical">
-        <h1>fill</h1>
-      </amp-story-grid-layer>
-    </amp-story-page>
-  </amp-story>
-</body>
-</html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-consent-geo.out b/extensions/amp-story/0.1/test/validator-amp-story-consent-geo.out
deleted file mode 100644
index 473282e645d2f..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-consent-geo.out
+++ /dev/null
@@ -1,69 +0,0 @@
-FAIL
-|  <!--
-|    Copyright 2018 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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests for the amp-geo tag.
-|  -->
-|  <!doctype html>
-|  <html ⚡>
-|  <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-0.1.js"></script>
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-consent-geo.html:22:2 The attribute 'src' in tag 'amp-story extension .js script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-story-0.1.js'. (see https://amp.dev/documentation/components/amp-story)
-|    <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
-|    <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
-|    <title>My Story</title>
-|    <meta name="description" content="Get started with amp-story">
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link rel="canonical" href="grid-layer-templates.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>
-|  </head>
-|  <body>
-|    <amp-story standalone title="Foo" publisher="AMP" publisher-logo-src="http://example.com/foo.png" poster-portrait-src="http://example.com/foo.png">
-|      <amp-geo layout="nodisplay">
-|        <script type="application/json">{
-|          "ISOCountryGroups": {
-|            "eea": [ "at", "be", "bg", "cy", "cz", "de", "dk", "ee", "es", "fi", "fr",
-|            "gb", "gr", "hr", "hu", "ie", "is", "it", "li", "lt", "lu", "lv", "mt", "nl",
-|            "no", "pl", "pt", "ro", "se", "si", "sk"]
-|          }
-|        }</script>
-|      </amp-geo>
-|      <amp-consent id='ABC' layout='nodisplay'>
-|        <script type="application/json">{
-|          "consents": {
-|            "ABC": {
-|              "checkConsentHref": "http://localhost:8000/get-consent-v1",
-|              "promptUI": "ui0"
-|            }
-|          }
-|        }</script>
-|        <amp-story-consent id="ui0" layout="nodisplay">
-|          <script type="application/json">{
-|            "title": "A message from AMP",
-|            "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar a quam non tincidunt. Nam dictum non nisi eu consectetur.",
-|            "vendors": ["Example Vendor One", "Example Vendor Two", "Example Vendor Three", "Google Adwords"]
-|          }</script>
-|        </amp-story-consent>
-|      </amp-consent>
-|      <amp-story-page id="fill-template-title">
-|        <amp-story-grid-layer template="vertical">
-|          <h1>fill</h1>
-|        </amp-story-grid-layer>
-|      </amp-story-page>
-|    </amp-story>
-|  </body>
-|  </html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-consent.html b/extensions/amp-story/0.1/test/validator-amp-story-consent.html
deleted file mode 100644
index c534e4b007c8b..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-consent.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!--
-  Copyright 2018 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.
--->
-<!--
-  Test Description:
-  Tests for the amp-story-consent tag.
--->
-<!doctype html>
-<html ⚡>
-<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-0.1.js"></script>
-  <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
-  <title>My Story</title>
-  <meta name="description" content="Get started with amp-story">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link rel="canonical" href="grid-layer-templates.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>
-</head>
-<body>
-  <amp-story standalone title="Foo" publisher="AMP" publisher-logo-src="http://example.com/foo.png" poster-portrait-src="http://example.com/foo.png">
-    <amp-consent id='ABC' layout='nodisplay'>
-      <script type="application/json">{
-        "consents": {
-          "ABC": {
-            "checkConsentHref": "http://localhost:8000/get-consent-v1",
-            "promptUI": "ui0"
-          }
-        }
-      }</script>
-      <amp-story-consent id="ui0" layout="nodisplay">
-        <script type="application/json">{
-          "title": "A message from AMP",
-          "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar a quam non tincidunt. Nam dictum non nisi eu consectetur.",
-          "vendors": ["Example Vendor One", "Example Vendor Two", "Example Vendor Three", "Google Adwords"]
-        }</script>
-      </amp-story-consent>
-    </amp-consent>
-    <amp-story-page id="fill-template-title">
-      <amp-story-grid-layer template="vertical">
-        <h1>fill</h1>
-      </amp-story-grid-layer>
-    </amp-story-page>
-  </amp-story>
-</body>
-</html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-consent.out b/extensions/amp-story/0.1/test/validator-amp-story-consent.out
deleted file mode 100644
index e7eebd4d483b2..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-consent.out
+++ /dev/null
@@ -1,59 +0,0 @@
-FAIL
-|  <!--
-|    Copyright 2018 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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests for the amp-story-consent tag.
-|  -->
-|  <!doctype html>
-|  <html ⚡>
-|  <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-0.1.js"></script>
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-consent.html:22:2 The attribute 'src' in tag 'amp-story extension .js script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-story-0.1.js'. (see https://amp.dev/documentation/components/amp-story)
-|    <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
-|    <title>My Story</title>
-|    <meta name="description" content="Get started with amp-story">
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link rel="canonical" href="grid-layer-templates.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>
-|  </head>
-|  <body>
-|    <amp-story standalone title="Foo" publisher="AMP" publisher-logo-src="http://example.com/foo.png" poster-portrait-src="http://example.com/foo.png">
-|      <amp-consent id='ABC' layout='nodisplay'>
-|        <script type="application/json">{
-|          "consents": {
-|            "ABC": {
-|              "checkConsentHref": "http://localhost:8000/get-consent-v1",
-|              "promptUI": "ui0"
-|            }
-|          }
-|        }</script>
-|        <amp-story-consent id="ui0" layout="nodisplay">
-|          <script type="application/json">{
-|            "title": "A message from AMP",
-|            "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar a quam non tincidunt. Nam dictum non nisi eu consectetur.",
-|            "vendors": ["Example Vendor One", "Example Vendor Two", "Example Vendor Three", "Google Adwords"]
-|          }</script>
-|        </amp-story-consent>
-|      </amp-consent>
-|      <amp-story-page id="fill-template-title">
-|        <amp-story-grid-layer template="vertical">
-|          <h1>fill</h1>
-|        </amp-story-grid-layer>
-|      </amp-story-page>
-|    </amp-story>
-|  </body>
-|  </html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-cta-layer-error.html b/extensions/amp-story/0.1/test/validator-amp-story-cta-layer-error.html
deleted file mode 100644
index eda2cb04f1896..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-cta-layer-error.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!--
-  Copyright 2018 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.
--->
-<!--
-  Test Description:
-  Tests for the amp-story tag.
--->
-<!doctype html>
-<html ⚡>
-<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-0.1.js"></script>
-  <title>My Story</title>
-  <meta name="description" content="Get started with amp-story">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link rel="canonical" href="grid-layer-templates.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>
-    body {
-      font-family: 'Roboto', sans-serif;
-    }
-    amp-story-page {
-      background: white;
-    }
-    .button {
-      font: bold 20px Arial;
-      text-decoration: none;
-      background-color: rgba(0, 240, 248, 0.63);
-      color: #333333;
-      padding: 2px 6px 2px 6px;
-      border-top: 1px solid #CCCCCC;
-      border-right: 1px solid #333333;
-      border-bottom: 1px solid #333333;
-      border-left: 1px solid #CCCCCC;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-    }
-  </style>
-</head>
-<body>
-  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/poster.jpg">
-    <amp-story-page id="fill-template-title">
-      <amp-story-cta-layer>
-        <a href="http://www.google.com" class="button"> Illegal CTA layer above grid layer! </a>
-      </amp-story-cta-layer>
-      <amp-story-grid-layer template="vertical">
-        <h1>fill</h1>
-      </amp-story-grid-layer>
-    </amp-story-page>
-    <amp-story-cta-layer>
-      <a href="http://www.google.com" class="button"> Illegal CTA layer outside of amp-story-page! </a>
-    </amp-story-cta-layer>
-  </amp-story>
-</body>
-</html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-cta-layer-error.out b/extensions/amp-story/0.1/test/validator-amp-story-cta-layer-error.out
deleted file mode 100644
index 59f226d14272b..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-cta-layer-error.out
+++ /dev/null
@@ -1,75 +0,0 @@
-FAIL
-|  <!--
-|    Copyright 2018 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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests for the amp-story tag.
-|  -->
-|  <!doctype html>
-|  <html ⚡>
-|  <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-0.1.js"></script>
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-cta-layer-error.html:22:2 The attribute 'src' in tag 'amp-story extension .js script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-story-0.1.js'. (see https://amp.dev/documentation/components/amp-story)
-|    <title>My Story</title>
-|    <meta name="description" content="Get started with amp-story">
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link rel="canonical" href="grid-layer-templates.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>
-|      body {
-|        font-family: 'Roboto', sans-serif;
-|      }
-|      amp-story-page {
-|        background: white;
-|      }
-|      .button {
-|        font: bold 20px Arial;
-|        text-decoration: none;
-|        background-color: rgba(0, 240, 248, 0.63);
-|        color: #333333;
-|        padding: 2px 6px 2px 6px;
-|        border-top: 1px solid #CCCCCC;
-|        border-right: 1px solid #333333;
-|        border-bottom: 1px solid #333333;
-|        border-left: 1px solid #CCCCCC;
-|        width: 100%;
-|        height: 100%;
-|        position: absolute;
-|      }
-|    </style>
-|  </head>
-|  <body>
-|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/poster.jpg">
-|      <amp-story-page id="fill-template-title">
-|        <amp-story-cta-layer>
->>       ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-cta-layer-error.html:54:6 Tag 'amp-story-cta-layer', if present, must be the last child of tag 'amp-story-page'.
-|          <a href="http://www.google.com" class="button"> Illegal CTA layer above grid layer! </a>
-|        </amp-story-cta-layer>
-|        <amp-story-grid-layer template="vertical">
-|          <h1>fill</h1>
-|        </amp-story-grid-layer>
-|      </amp-story-page>
-|      <amp-story-cta-layer>
->>     ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-cta-layer-error.html:61:4 The tag 'amp-story-cta-layer' may only appear as a descendant of tag 'amp-story-page'.
->>     ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-cta-layer-error.html:61:4 Tag 'amp-story-cta-layer' is disallowed as child of tag 'amp-story'. Child tag must be one of ['amp-analytics', 'amp-consent', 'amp-geo', 'amp-pixel', 'amp-sidebar', 'amp-story-auto-ads', 'amp-story-bookend', 'amp-story-page']. (see https://amp.dev/documentation/components/amp-story)
-|        <a href="http://www.google.com" class="button"> Illegal CTA layer outside of amp-story-page! </a>
-|      </amp-story-cta-layer>
-|    </amp-story>
-|  </body>
-|  </html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-cta-layer.html b/extensions/amp-story/0.1/test/validator-amp-story-cta-layer.html
deleted file mode 100644
index 012db8826e32f..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-cta-layer.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!--
-  Copyright 2018 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.
--->
-<!--
-  Test Description:
-  Tests for the amp-story tag.
--->
-<!doctype html>
-<html ⚡>
-<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-0.1.js"></script>
-  <title>My Story</title>
-  <meta name="description" content="Get started with amp-story">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link rel="canonical" href="grid-layer-templates.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>
-    body {
-      font-family: 'Roboto', sans-serif;
-    }
-    amp-story-page {
-      background: white;
-    }
-    .button {
-      font: bold 20px Arial;
-      text-decoration: none;
-      background-color: rgba(0, 240, 248, 0.63);
-      color: #333333;
-      padding: 2px 6px 2px 6px;
-      border-top: 1px solid #CCCCCC;
-      border-right: 1px solid #333333;
-      border-bottom: 1px solid #333333;
-      border-left: 1px solid #CCCCCC;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-    }
-  </style>
-</head>
-<body>
-  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/poster.jpg">
-    <amp-story-page id="fill-template-title">
-      <amp-story-grid-layer template="vertical">
-        <h1>fill</h1>
-      </amp-story-grid-layer>
-      <amp-story-cta-layer>
-        <a href="http://www.google.com" class="button"> Call to action! </a>
-      </amp-story-cta-layer>
-    </amp-story-page>
-  </amp-story>
-</body>
-</html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-cta-layer.out b/extensions/amp-story/0.1/test/validator-amp-story-cta-layer.out
deleted file mode 100644
index 3e9b4499c0981..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-cta-layer.out
+++ /dev/null
@@ -1,66 +0,0 @@
-FAIL
-|  <!--
-|    Copyright 2018 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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests for the amp-story tag.
-|  -->
-|  <!doctype html>
-|  <html ⚡>
-|  <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-0.1.js"></script>
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-cta-layer.html:22:2 The attribute 'src' in tag 'amp-story extension .js script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-story-0.1.js'. (see https://amp.dev/documentation/components/amp-story)
-|    <title>My Story</title>
-|    <meta name="description" content="Get started with amp-story">
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link rel="canonical" href="grid-layer-templates.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>
-|      body {
-|        font-family: 'Roboto', sans-serif;
-|      }
-|      amp-story-page {
-|        background: white;
-|      }
-|      .button {
-|        font: bold 20px Arial;
-|        text-decoration: none;
-|        background-color: rgba(0, 240, 248, 0.63);
-|        color: #333333;
-|        padding: 2px 6px 2px 6px;
-|        border-top: 1px solid #CCCCCC;
-|        border-right: 1px solid #333333;
-|        border-bottom: 1px solid #333333;
-|        border-left: 1px solid #CCCCCC;
-|        width: 100%;
-|        height: 100%;
-|        position: absolute;
-|      }
-|    </style>
-|  </head>
-|  <body>
-|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/poster.jpg">
-|      <amp-story-page id="fill-template-title">
-|        <amp-story-grid-layer template="vertical">
-|          <h1>fill</h1>
-|        </amp-story-grid-layer>
-|        <amp-story-cta-layer>
-|          <a href="http://www.google.com" class="button"> Call to action! </a>
-|        </amp-story-cta-layer>
-|      </amp-story-page>
-|    </amp-story>
-|  </body>
-|  </html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-deprecated.html b/extensions/amp-story/0.1/test/validator-amp-story-deprecated.html
deleted file mode 100644
index 2a5b0c9dd74a1..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-deprecated.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!--
-  Copyright 2018 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.
--->
-<!--
-  Test Description:
-  Tests for the amp-story tag.
--->
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>STAMP examples</title>
-  <link rel="canonical" href="http://nonblocking.io/" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
-</head>
-<body>
-  <amp-story standalone bookend-config-src="./bookend-config-src.json" background-audio="path/to/my.mp3">
-    <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
-      <amp-story-grid-layer template="horizontal">
-        <h5 animate-in="drop">
-          <h1>
-            <h4 animate-in-delay="anything"></h4>
-          </h1>
-          <h2></h2>
-        </h5>
-        <h3 grid-area="any value">
-          <h6 animate-in-after="whatever-value"></h6>
-        </h3>
-        <h3 align-content="center"></h3>
-        <h3 align-items="stretch"></h3>
-        <h3 align-self="start"></h3>
-      </amp-story-grid-layer>
-      <amp-story-grid-layer template="horizontal">
-        <h1></h1>
-      </amp-story-grid-layer>
-    </amp-story-page>
-  </amp-story>
-</body>
-</html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-deprecated.out b/extensions/amp-story/0.1/test/validator-amp-story-deprecated.out
deleted file mode 100644
index 33e6173d43c1d..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-deprecated.out
+++ /dev/null
@@ -1,59 +0,0 @@
-FAIL
-|  <!--
-|    Copyright 2018 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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests for the amp-story tag.
-|  -->
-|  <!doctype html>
-|  <html ⚡>
-|  <head>
-|    <meta charset="utf-8">
-|    <title>STAMP examples</title>
-|    <link rel="canonical" href="http://nonblocking.io/" >
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-deprecated.html:29:2 The attribute 'src' in tag 'amp-story extension .js script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-story-0.1.js'. (see https://amp.dev/documentation/components/amp-story)
-|  </head>
-|  <body>
-|    <amp-story standalone bookend-config-src="./bookend-config-src.json" background-audio="path/to/my.mp3">
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-deprecated.html:32:2 The attribute 'bookend-config-src' may not appear in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
-|      <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
-|        <amp-story-grid-layer template="horizontal">
-|          <h5 animate-in="drop">
-|            <h1>
-|              <h4 animate-in-delay="anything"></h4>
-|            </h1>
-|            <h2></h2>
-|          </h5>
-|          <h3 grid-area="any value">
-|            <h6 animate-in-after="whatever-value"></h6>
-|          </h3>
-|          <h3 align-content="center"></h3>
-|          <h3 align-items="stretch"></h3>
-|          <h3 align-self="start"></h3>
-|        </amp-story-grid-layer>
-|        <amp-story-grid-layer template="horizontal">
-|          <h1></h1>
-|        </amp-story-grid-layer>
-|      </amp-story-page>
-|    </amp-story>
-|  </body>
-|  </html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-error.html b/extensions/amp-story/0.1/test/validator-amp-story-error.html
deleted file mode 100644
index bf49402b7b625..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-error.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!--
-  Copyright 2017 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.
--->
-<!--
-  Test Description:
-  Tests for the amp-story tag.
--->
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>STAMP examples</title>
-  <link rel="canonical" href="http://nonblocking.io/" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <amp-story> <!-- error because the 'standalone' and metadata attributes aren't set -->
-    <amp-story-page> <!-- error because the 'id' attribute isn't set -->
-      <amp-story-grid-layer> <!-- error because one of 'fill', 'horizontal', 'vertical', 'thirds' should be set. -->
-        <h5>
-          <h1>
-            <h4 height="50px"></h4> <!-- error because 'height' is not an allowed attribute. -->
-          </h1>
-        </h5>
-      </amp-story-grid-layer>
-    </amp-story-page>
-  </amp-story>
-  <div></div> <!-- this should create an error for the 'no siblings allowed' rule on <amp-story> -->
-</body>
-</html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-error.out b/extensions/amp-story/0.1/test/validator-amp-story-error.out
deleted file mode 100644
index 163d78b341318..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-error.out
+++ /dev/null
@@ -1,65 +0,0 @@
-FAIL
-|  <!--
-|    Copyright 2017 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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests for the amp-story tag.
-|  -->
-|  <!doctype html>
-|  <html ⚡>
-|  <head>
-|    <meta charset="utf-8">
-|    <title>STAMP examples</title>
-|    <link rel="canonical" href="http://nonblocking.io/" >
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|  </head>
-|  <body>
-|    <amp-story> <!-- error because the 'standalone' and metadata attributes aren't set -->
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-error.html:31:2 The mandatory attribute 'poster-portrait-src' is missing in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-error.html:31:2 The mandatory attribute 'publisher' is missing in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-error.html:31:2 The mandatory attribute 'publisher-logo-src' is missing in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-error.html:31:2 The mandatory attribute 'standalone' is missing in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-error.html:31:2 The mandatory attribute 'title' is missing in tag 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-error.html:31:2 The tag 'amp-story' requires including the 'amp-story' extension JavaScript. (see https://amp.dev/documentation/components/amp-story)
-|      <amp-story-page> <!-- error because the 'id' attribute isn't set -->
->>     ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-error.html:32:4 The mandatory attribute 'id' is missing in tag 'amp-story-page'. (see https://amp.dev/documentation/components/amp-story)
->>     ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-error.html:32:4 The tag 'amp-story-page' requires including the 'amp-story' extension JavaScript. (see https://amp.dev/documentation/components/amp-story)
-|        <amp-story-grid-layer> <!-- error because one of 'fill', 'horizontal', 'vertical', 'thirds' should be set. -->
->>       ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-error.html:33:6 The mandatory attribute 'template' is missing in tag 'amp-story-grid-layer'.
-|          <h5>
-|            <h1>
-|              <h4 height="50px"></h4> <!-- error because 'height' is not an allowed attribute. -->
->>             ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-error.html:36:12 The attribute 'height' may not appear in tag 'h4'.
-|            </h1>
-|          </h5>
-|        </amp-story-grid-layer>
-|      </amp-story-page>
-|    </amp-story>
-|    <div></div> <!-- this should create an error for the 'no siblings allowed' rule on <amp-story> -->
-|  </body>
-|  </html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-reference-point.html b/extensions/amp-story/0.1/test/validator-amp-story-reference-point.html
deleted file mode 100644
index 0f65b24dd4f50..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-reference-point.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!--
-  Copyright 2017 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.
--->
-<!--
-  Test Description:
-  Tests for the amp-story tag.
--->
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>STAMP examples</title>
-  <link rel="canonical" href="http://nonblocking.io/" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
-</head>
-<body>
-  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/poster.jpg" background-audio="path/to/my.mp3">
-    <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
-      <amp-story-grid-layer template="horizontal">
-        <img class="footer-logo" src="img/foot-logo.svg" width="40" height="40" /> <!-- The real error here is that <img/> tag is not allowed. But this is a weird use case where the validator error will comment about reference points. This needs to be fixed in the near future. -->
-      </amp-story-grid-layer>
-    </amp-story-page>
-  </amp-story>
-</body>
-</html>
-
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-reference-point.out b/extensions/amp-story/0.1/test/validator-amp-story-reference-point.out
deleted file mode 100644
index 11713a1b3f4ee..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-reference-point.out
+++ /dev/null
@@ -1,45 +0,0 @@
-FAIL
-|  <!--
-|    Copyright 2017 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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests for the amp-story tag.
-|  -->
-|  <!doctype html>
-|  <html ⚡>
-|  <head>
-|    <meta charset="utf-8">
-|    <title>STAMP examples</title>
-|    <link rel="canonical" href="http://nonblocking.io/" >
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-reference-point.html:29:2 The attribute 'src' in tag 'amp-story extension .js script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-story-0.1.js'. (see https://amp.dev/documentation/components/amp-story)
-|  </head>
-|  <body>
-|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/poster.jpg" background-audio="path/to/my.mp3">
-|      <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
-|        <amp-story-grid-layer template="horizontal">
-|          <img class="footer-logo" src="img/foot-logo.svg" width="40" height="40" /> <!-- The real error here is that <img/> tag is not allowed. But this is a weird use case where the validator error will comment about reference points. This needs to be fixed in the near future. -->
->>         ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-reference-point.html:35:8 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img)
-|        </amp-story-grid-layer>
-|      </amp-story-page>
-|    </amp-story>
-|  </body>
-|  </html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-video-error.html b/extensions/amp-story/0.1/test/validator-amp-story-video-error.html
deleted file mode 100644
index 1a2921e3de1b4..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-video-error.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!--
-  Copyright 2017 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.
--->
-<!--
-  Test Description:
-  Test to make sure amp-video under amp-story gets an error if it doesn't have the "poster"
-  attribute set.
--->
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>STAMP examples</title>
-  <link rel="canonical" href="http://nonblocking.io/" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
-  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
-</head>
-<body>
-  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/poster.jpg" background-audio="path/to/my.mp3">
-    <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
-      <amp-story-grid-layer template="horizontal">
-        <!-- This should fail because amp-video doesn't have the [poster] attribute. -->
-        <amp-video width="480"
-                   height="270"
-                   src="/video/tokyo.mp4"
-                   layout="responsive">
-             <div fallback>
-               <p>Your browser doesn't support HTML5 video.</p>
-             </div>
-             <source type="video/mp4" src="/video/tokyo.mp4">
-             <source type="video/webm" src="/video/tokyo.webm">
-         </amp-video>
-      </amp-story-grid-layer>
-    </amp-story-page>
-  </amp-story>
-</body>
-</html>
-
diff --git a/extensions/amp-story/0.1/test/validator-amp-story-video-error.out b/extensions/amp-story/0.1/test/validator-amp-story-video-error.out
deleted file mode 100644
index 046c56f17d908..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story-video-error.out
+++ /dev/null
@@ -1,59 +0,0 @@
-FAIL
-|  <!--
-|    Copyright 2017 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.
-|  -->
-|  <!--
-|    Test Description:
-|    Test to make sure amp-video under amp-story gets an error if it doesn't have the "poster"
-|    attribute set.
-|  -->
-|  <!doctype html>
-|  <html ⚡>
-|  <head>
-|    <meta charset="utf-8">
-|    <title>STAMP examples</title>
-|    <link rel="canonical" href="http://nonblocking.io/" >
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-video-error.html:30:2 The attribute 'src' in tag 'amp-story extension .js script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-story-0.1.js'. (see https://amp.dev/documentation/components/amp-story)
-|    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
-|  </head>
-|  <body>
-|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/poster.jpg" background-audio="path/to/my.mp3">
-|      <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
-|        <amp-story-grid-layer template="horizontal">
-|          <!-- This should fail because amp-video doesn't have the [poster] attribute. -->
-|          <amp-video width="480"
->>         ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-video-error.html:38:8 The mandatory attribute 'autoplay' is missing in tag 'amp-story >> amp-video'. (see https://amp.dev/documentation/components/amp-video)
->>         ^~~~~~~~~
-amp-story/0.1/test/validator-amp-story-video-error.html:38:8 The mandatory attribute 'poster' is missing in tag 'amp-story >> amp-video'. (see https://amp.dev/documentation/components/amp-video)
-|                     height="270"
-|                     src="/video/tokyo.mp4"
-|                     layout="responsive">
-|               <div fallback>
-|                 <p>Your browser doesn't support HTML5 video.</p>
-|               </div>
-|               <source type="video/mp4" src="/video/tokyo.mp4">
-|               <source type="video/webm" src="/video/tokyo.webm">
-|           </amp-video>
-|        </amp-story-grid-layer>
-|      </amp-story-page>
-|    </amp-story>
-|  </body>
-|  </html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story.html b/extensions/amp-story/0.1/test/validator-amp-story.html
deleted file mode 100644
index 59d894a204538..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!--
-  Copyright 2017 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.
--->
-<!--
-  Test Description:
-  Tests for the amp-story tag.
--->
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>STAMP examples</title>
-  <link rel="canonical" href="http://nonblocking.io/" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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>
-  <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>
-</head>
-<body>
-  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3">
-    <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
-      <amp-story-grid-layer template="horizontal">
-        <h5 animate-in="drop">
-          <h1>
-            <h4 animate-in-delay="anything"></h4>
-          </h1>
-          <h2></h2>
-        </h5>
-        <h3 grid-area="any value">
-          <h6 animate-in-after="whatever-value"></h6>
-        </h3>
-        <h3 align-content="center"></h3>
-        <h3 align-items="stretch"></h3>
-        <h3 align-self="start"></h3>
-      </amp-story-grid-layer>
-      <amp-story-grid-layer template="horizontal">
-        <h1></h1>
-      </amp-story-grid-layer>
-    </amp-story-page>
-  </amp-story>
-</body>
-</html>
diff --git a/extensions/amp-story/0.1/test/validator-amp-story.out b/extensions/amp-story/0.1/test/validator-amp-story.out
deleted file mode 100644
index 0d110c541560a..0000000000000
--- a/extensions/amp-story/0.1/test/validator-amp-story.out
+++ /dev/null
@@ -1,55 +0,0 @@
-PASS
-|  <!--
-|    Copyright 2017 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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests for the amp-story tag.
-|  -->
-|  <!doctype html>
-|  <html ⚡>
-|  <head>
-|    <meta charset="utf-8">
-|    <title>STAMP examples</title>
-|    <link rel="canonical" href="http://nonblocking.io/" >
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <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>
-|    <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>
-|  </head>
-|  <body>
-|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3">
-|      <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
-|        <amp-story-grid-layer template="horizontal">
-|          <h5 animate-in="drop">
-|            <h1>
-|              <h4 animate-in-delay="anything"></h4>
-|            </h1>
-|            <h2></h2>
-|          </h5>
-|          <h3 grid-area="any value">
-|            <h6 animate-in-after="whatever-value"></h6>
-|          </h3>
-|          <h3 align-content="center"></h3>
-|          <h3 align-items="stretch"></h3>
-|          <h3 align-self="start"></h3>
-|        </amp-story-grid-layer>
-|        <amp-story-grid-layer template="horizontal">
-|          <h1></h1>
-|        </amp-story-grid-layer>
-|      </amp-story-page>
-|    </amp-story>
-|  </body>
-|  </html>
diff --git a/extensions/amp-story/0.1/test/validator-empty-story.html b/extensions/amp-story/0.1/test/validator-empty-story.html
deleted file mode 100644
index 6a31e5a1ce642..0000000000000
--- a/extensions/amp-story/0.1/test/validator-empty-story.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!--
-  Copyright 2017 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.
--->
-<!--
-  Test Description:
-  This tests that every amp-story standalone must have at least one
-  amp-story-page child, not just one child of any kind.
--->
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>STAMP examples</title>
-  <link rel="canonical" href="http://nonblocking.io/" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
-</head>
-<body>
-  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/poster.jpg">
-    <amp-pixel src=""></amp-pixel>
-  </amp-story>
-</body>
-</html>
diff --git a/extensions/amp-story/0.1/test/validator-empty-story.out b/extensions/amp-story/0.1/test/validator-empty-story.out
deleted file mode 100644
index edf094b0cfa71..0000000000000
--- a/extensions/amp-story/0.1/test/validator-empty-story.out
+++ /dev/null
@@ -1,42 +0,0 @@
-FAIL
-|  <!--
-|    Copyright 2017 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.
-|  -->
-|  <!--
-|    Test Description:
-|    This tests that every amp-story standalone must have at least one
-|    amp-story-page child, not just one child of any kind.
-|  -->
-|  <!doctype html>
-|  <html ⚡>
-|  <head>
-|    <meta charset="utf-8">
-|    <title>STAMP examples</title>
-|    <link rel="canonical" href="http://nonblocking.io/" >
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
->>   ^~~~~~~~~
-amp-story/0.1/test/validator-empty-story.html:30:2 The attribute 'src' in tag 'amp-story extension .js script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-story-0.1.js'. (see https://amp.dev/documentation/components/amp-story)
-|  </head>
-|  <body>
-|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/poster.jpg">
-|      <amp-pixel src=""></amp-pixel>
-|    </amp-story>
-|  </body>
-|  </html>
->>       ^~~~~~~~~
-amp-story/0.1/test/validator-empty-story.html:37:6 The tag 'amp-story-page' is missing or incorrect, but required by 'amp-story'. (see https://amp.dev/documentation/components/amp-story)
diff --git a/extensions/amp-story/0.1/toast.js b/extensions/amp-story/0.1/toast.js
deleted file mode 100644
index 3330851e8feba..0000000000000
--- a/extensions/amp-story/0.1/toast.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {Services} from '../../../src/services';
-import {createElementWithAttributes, removeElement} from '../../../src/dom';
-
-/** @private @const {string} */
-const TOAST_CLASSNAME = 'i-amphtml-story-toast';
-
-/**
- * Should be higher than total animation time.
- * @private @const {number}
- */
-const TOAST_VISIBLE_TIME_MS = 2600;
-
-/**
- * UI notifications service, displaying a message to the user for a limited
- * amount of time.
- */
-export class Toast {
-  /**
-   * @param {!Window} win
-   * @param {!Node|string} childNodeOrText
-   */
-  static show(win, childNodeOrText) {
-    const toast = createElementWithAttributes(
-      win.document,
-      'div',
-      /** @type {!JsonObject} */ ({'class': TOAST_CLASSNAME})
-    );
-
-    if (typeof childNodeOrText == 'string') {
-      toast.textContent = childNodeOrText;
-    } else {
-      toast.appendChild(childNodeOrText);
-    }
-
-    win.document.body.appendChild(toast);
-
-    Services.timerFor(win).delay(
-      () => removeElement(toast),
-      TOAST_VISIBLE_TIME_MS
-    );
-  }
-}
diff --git a/extensions/amp-story/0.1/utils.js b/extensions/amp-story/0.1/utils.js
deleted file mode 100644
index 19db75623070f..0000000000000
--- a/extensions/amp-story/0.1/utils.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {closestAncestorElementBySelector} from '../../../src/dom';
-import {createShadowRoot} from '../../../src/shadow-embed';
-import {user, userAssert} from '../../../src/log';
-
-/**
- * Returns millis as number if given a string(e.g. 1s, 200ms etc)
- * @param {string} time
- * @return {number|undefined}
- */
-export function timeStrToMillis(time) {
-  const match = time.toLowerCase().match(/^([0-9\.]+)\s*(s|ms)$/);
-  if (!match) {
-    return NaN;
-  }
-
-  const num = match[1];
-  const units = match[2];
-
-  userAssert(
-    match && match.length == 3 && (units == 's' || units == 'ms'),
-    'Invalid time string %s',
-    time
-  );
-
-  return units == 's' ? parseFloat(num) * 1000 : parseInt(num, 10);
-}
-
-/**
- * Determines whether the specified element has an action for its on="tap:..."
- * handler.
- * @param {!Element} el
- * @return {boolean}
- */
-export function hasTapAction(el) {
-  // There are better ways to determine this, but they're all bound to action
-  // service race conditions. This is good enough for our use case.
-  return (
-    el.hasAttribute('on') && !!el.getAttribute('on').match(/(^|;)\s*tap\s*:/)
-  );
-}
-
-/**
- * Calculates a client rect without applying scaling transformations.
- * Note: must be run in a vsync measure context.
- * @param {!Element} el
- * @return {!ClientRect}
- */
-export function unscaledClientRect(el) {
-  const {width, height, left, top} = el./*OK*/ getBoundingClientRect();
-
-  const scaleFactorX = width == 0 ? 1 : width / el./*OK*/ offsetWidth;
-  const scaleFactorY = height == 0 ? 1 : height / el./*OK*/ offsetHeight;
-
-  return /** @type {!ClientRect} */ ({
-    left: left / scaleFactorX,
-    top: top / scaleFactorY,
-    width: width / scaleFactorX,
-    height: height / scaleFactorY,
-  });
-}
-
-/**
- * Finds an amp-video/amp-audio ancestor.
- * @param {!Element} el
- * @return {?AmpElement}
- */
-export function ampMediaElementFor(el) {
-  return closestAncestorElementBySelector(el, 'amp-video, amp-audio');
-}
-
-/**
- * Creates a shadow root for the provided container, and appends the element
- * along with its CSS.
- * @param  {!Element} container
- * @param  {!Element} element
- * @param  {string} css
- * @return {!ShadowRoot}
- */
-export function createShadowRootWithStyle(container, element, css) {
-  const shadowRoot = createShadowRoot(container);
-
-  const style = self.document.createElement('style');
-  style./*OK*/ textContent = css;
-
-  shadowRoot.appendChild(style);
-  shadowRoot.appendChild(element);
-
-  return shadowRoot;
-}
-
-/**
- * Parses the resolved CSS color property, that is always in the form of
- * `rgba(0, 0, 0, 1)` or `rgb(0, 0, 0)`, that can be retrieved using
- * `getComputedStyle`.
- * Returns an object containing the R, G, and B 8bit numbers.
- * @param  {string} cssValue
- * @return {!Object<string, number>}
- */
-export function getRGBFromCssColorValue(cssValue) {
-  const regexPattern = /rgba?\((\d{1,3}), (\d{1,3}), (\d{1,3})/;
-
-  if (!cssValue.match(regexPattern)) {
-    user().error(
-      'UTILS',
-      'getRGBFromCssColorValue expects a parameter in ' +
-        `the form of 'rgba(0, 0, 0, 1)' or 'rgb(0, 0, 0)' but got ${cssValue}`
-    );
-    // Returns a fallback value, to fail 'gracefully' in case a browser we don't
-    // know about gave an unexpected value.
-    return {r: 0, g: 0, b: 0};
-  }
-
-  const matches = regexPattern.exec(cssValue);
-
-  return {
-    r: Number(matches[1]),
-    g: Number(matches[2]),
-    b: Number(matches[3]),
-  };
-}
-
-/**
- * Returns the color, either black or white, that has the best contrast ratio
- * against the provided RGB 8bit values.
- * @param  {!Object<string, number>} rgb  ie: {r: 0, g: 0, b: 0}
- * @return {string} '#fff' or '#000'
- */
-export function getTextColorForRGB(rgb) {
-  const {r, g, b} = rgb;
-  // Calculates the relative luminance L.
-  // https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-  const getLinearRGBValue = (x) => {
-    // 8bit to sRGB.
-    x /= 255;
-
-    // Converts the gamma-compressed RGB values to linear RGB.
-    return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
-  };
-
-  const linearR = getLinearRGBValue(r);
-  const linearG = getLinearRGBValue(g);
-  const linearB = getLinearRGBValue(b);
-
-  const L = 0.2126 * linearR + 0.7152 * linearG + 0.0722 * linearB;
-
-  // Determines which one of the white and black text have a better contrast
-  // ratio against the used background color.
-  // https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
-  // @TODO(gmajoulet): Improve the text color for high contrast ratio.
-  // 1 is L for #FFF, and 0 is L for #000.
-  // (1 + 0.05) / (L + 0.05) > (L + 0.05) / (0 + 0.05) toggles for L = 0.179.
-  return L > 0.179 ? '#000' : '#FFF';
-}
diff --git a/extensions/amp-story/0.1/variable-service.js b/extensions/amp-story/0.1/variable-service.js
deleted file mode 100644
index 647883aa4a477..0000000000000
--- a/extensions/amp-story/0.1/variable-service.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-import {StateChangeType} from './navigation-state';
-import {dict} from '../../../src/utils/object';
-
-/**
- * @typedef {!JsonObject}
- */
-export let StoryVariableDef;
-
-/** @enum {string} */
-const Variable = {
-  STORY_PAGE_ID: 'storyPageId',
-  STORY_PAGE_INDEX: 'storyPageIndex',
-  STORY_PAGE_COUNT: 'storyPageCount',
-  STORY_IS_MUTED: 'storyIsMuted',
-  STORY_PROGRESS: 'storyProgress',
-};
-
-/**
- * Variable service for amp-story.
- * Used for URL replacement service. See usage in src/url-replacements-impl.
- */
-export class AmpStoryVariableService {
-  /**
-   * @public
-   */
-  constructor() {
-    /** @private {!StoryVariableDef} */
-    this.variables_ = dict({
-      [Variable.STORY_PAGE_INDEX]: null,
-      [Variable.STORY_PAGE_ID]: null,
-      [Variable.STORY_PAGE_COUNT]: null,
-      [Variable.STORY_PROGRESS]: null,
-      [Variable.STORY_IS_MUTED]: null,
-    });
-  }
-
-  /**
-   * @param {!./navigation-state.StateChangeEventDef} stateChangeEvent
-   */
-  onNavigationStateChange(stateChangeEvent) {
-    switch (stateChangeEvent.type) {
-      case StateChangeType.ACTIVE_PAGE:
-        const {
-          pageIndex,
-          pageId,
-          storyProgress,
-          totalPages,
-        } = stateChangeEvent.value;
-        this.variables_[Variable.STORY_PAGE_INDEX] = pageIndex;
-        this.variables_[Variable.STORY_PAGE_ID] = pageId;
-        this.variables_[Variable.STORY_PROGRESS] = storyProgress;
-        this.variables_[Variable.STORY_PAGE_COUNT] = totalPages;
-        break;
-    }
-  }
-
-  /**
-   * @param {boolean} isMuted
-   */
-  onMutedStateChange(isMuted) {
-    this.variables_[Variable.STORY_IS_MUTED] = isMuted;
-  }
-
-  /**
-   * @return {!StoryVariableDef}
-   */
-  get() {
-    // TODO(newmius): You should probably Object.freeze this in development.
-    return this.variables_;
-  }
-}
diff --git a/extensions/amp-story/1.0/_locales/README.md b/extensions/amp-story/1.0/_locales/README.md
index 4dab29b3de24c..aadcbea19a79d 100644
--- a/extensions/amp-story/1.0/_locales/README.md
+++ b/extensions/amp-story/1.0/_locales/README.md
@@ -1,6 +1,6 @@
 # Supported languages
 
-To see a list of the supported languages, see the list of `*.js` files in the [`_locales` directory](https://github.com/ampproject/amphtml/tree/master/extensions/amp-story/1.0/_locales).
+To see a list of the supported languages, see the list of `*.js` files in the [`_locales` directory](https://github.com/ampproject/amphtml/tree/main/extensions/amp-story/1.0/_locales).
 
 # Language fallbacks
 
@@ -8,9 +8,9 @@ Languages will fall back to their more general variants, and ultimately to the `
 
 For example, the language code `en-GB` will check the following languages (in this order):
 
-- `en-GB` (English, Great Britain)
-- `en` (English)
-- `default` (Default)
+-   `en-GB` (English, Great Britain)
+-   `en` (English)
+-   `default` (Default)
 
 The `default` language code is a fallback used in the case that the publisher-specified language code does not exist. It uses a minimal amount of English strings, so that the document can be displayed mostly in its primary language. Any labels that describe otherwise familiar or intelligible iconography can be dropped entirely. For example, since sharing icons show the sharing network's logo (e.g. the Twitter logo), the "Twitter" string is redundant and can be left out of the `default` language.
 
@@ -20,8 +20,8 @@ You can view the translations provided for each language in [this spreadsheet](h
 
 # Adding new strings (English)
 
-1. Add a new string ID in [`LocalizedStringId`](https://github.com/ampproject/amphtml/blob/master/src/localized-strings.js#L31). Keep the `LocalizedStringId` list in alphabetical order, and make sure your ID's name is clear about what it represents semantically.
-2. Open the [`en.js` file](https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/1.0/_locales/en.js)
+1. Add a new string ID in [`LocalizedStringId`](https://github.com/ampproject/amphtml/blob/main/src/localized-strings.js#L31). Keep the `LocalizedStringId` list in alphabetical order, and make sure your ID's name is clear about what it represents semantically.
+2. Open the [`en.js` file](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/1.0/_locales/en.js)
 3. Add a new object key with the `LocalizedStringId` as the key, and an object containing the string and its description as its value. For example:
 
 ```javascript
@@ -40,7 +40,7 @@ You can view the translations provided for each language in [this spreadsheet](h
 # Adding new translations (non-English strings)
 
 1. Find which string(s) are missing by looking at [the string spreadsheet](https://bit.ly/amp-story-strings).
-2. Open the `*.js` file from the [`_locales` directory](https://github.com/ampproject/amphtml/tree/master/extensions/amp-story/1.0/_locales) for the language for which you would like to add a translation.
+2. Open the `*.js` file from the [`_locales` directory](https://github.com/ampproject/amphtml/tree/main/extensions/amp-story/1.0/_locales) for the language for which you would like to add a translation.
 3. Add a new object key with the `LocalizedStringId` as the key, and an object containing the string as its value. For example:
 
 ```javascript
diff --git a/extensions/amp-story/1.0/_locales/af.js b/extensions/amp-story/1.0/_locales/af.js
deleted file mode 100644
index 5489fe732d85f..0000000000000
--- a/extensions/amp-story/1.0/_locales/af.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for af strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Klank af',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Hierdie bladsy het geen klank nie',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Klank aan',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Meer om te lees',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Verander dataprivaatheidsinstellings',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Privaatheidsinstellings',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Aanvaar',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Wys af',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Gaan in elk geval voort',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Bekyk op oorspronklike domein:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Meer oor AMP-resultate',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Tik op Volgende',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Tik Terug',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Swiep op',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Speel video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Kon nie skakel na knipbord kopieer nie :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Skakel is gekopieer!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-pos',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Kry skakel',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Vou twiet uit',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Maak jou venster se hoogte groter om hierdie ervaring te bekyk',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Maak sowel die hoogte as breedte van jou venster groter om ' +
-      'hierdie ervaring te bekyk',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Maak jou venster se breedte groter om hierdie ervaring te bekyk',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Jy moet die AMP-storie-eksperiment aktiveer om hierdie inhoud ' +
-      'te bekyk.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Die bladsy kan die beste in portretmodus bekyk word',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'Ons is jammer, maar dit lyk of jou blaaier nie hierdie ervaring ' +
-      'steun nie',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/af.json b/extensions/amp-story/1.0/_locales/af.json
new file mode 100644
index 0000000000000..5fe12c9d694ba
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/af.json
@@ -0,0 +1,44 @@
+{
+  "2": {"string": "Tik op Volgende"},
+  "3": {"string": "Tik Terug"},
+  "4": {"string": "Kon nie skakel na knipbord kopieer nie :("},
+  "5": {"string": "Skakel is gekopieer!"},
+  "6": {"string": "E-pos"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Kry skakel"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Maak sowel die hoogte as breedte van jou venster groter om hierdie ervaring te bekyk"
+  },
+  "19": {
+    "string": "Jy moet die AMP-storie-eksperiment aktiveer om hierdie inhoud te bekyk."
+  },
+  "20": {"string": "Die bladsy kan die beste in portretmodus bekyk word"},
+  "21": {
+    "string": "Ons is jammer, maar dit lyk of jou blaaier nie hierdie ervaring steun nie"
+  },
+  "22": {"string": "Aanvaar"},
+  "23": {"string": "Wys af"},
+  "25": {"string": "Bekyk op oorspronklike domein:"},
+  "26": {"string": "Meer oor AMP-resultate"},
+  "27": {"string": "Gaan in elk geval voort"},
+  "31": {"string": "Klank af"},
+  "32": {"string": "Klank aan"},
+  "33": {"string": "Hierdie bladsy het geen klank nie"},
+  "34": {"string": "Speel video"},
+  "35": {"string": "Swiep op"},
+  "36": {"string": "Vou twiet uit"},
+  "37": {
+    "string": "Maak jou venster se hoogte groter om hierdie ervaring te bekyk"
+  },
+  "38": {
+    "string": "Maak jou venster se breedte groter om hierdie ervaring te bekyk"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/am.js b/extensions/amp-story/1.0/_locales/am.js
deleted file mode 100644
index cef5efc250cb0..0000000000000
--- a/extensions/amp-story/1.0/_locales/am.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for am strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'ድምፅ ጠፍቷል',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'ይህ ገጽ ድምፅ የለውም',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'ድምፅ በርቷል',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'ተጨማሪ ለማንበብ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'የግላዊነት ውሂብ ቅንብሮች ይለውጡ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'የግላዊነት ቅንብሮች',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'ተቀበል',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'አትቀበል',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'ለማንኛውም ቀጥል',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'በኦርጂናሉ ጎራ ይመልከቱ፦',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'ስለ AMP ውጤቶች ተጨማሪ',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'ቀጣይ መታ ያድርጉ',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'ወደ ኋላ መታ ያድርጉ',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'ወደ ላይ ያንሸራትቱ',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'ቪድዮ አጫውት',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'አገናኝን ወደ ቅንጥብ ሰሌዳ መቅዳት አልተቻለም ፦(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'አገናኝ ተቀድቷል!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ኢሜይል',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'አገናኝ አግኝ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'ኤስኤምኤስ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ትዊትን ዘርጋ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'ተሞክሮውን ለመመልከት የእርስዎን መስኮት ቁመት ይዘርጉ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'ይህን ተሞክሮ ለማየት የእርስዎን መስኮት ቁመት እና ስፋት ሁለቱንም ይዘርጉ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'ይህን ተሞክሮ ለማየት የእርስዎን መስኮት ስፋት ይዘርጉ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'ይህን ይዘት ለማየት የ amp-ታሪክ ሙከራን ማንቃት አለብዎት።',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'ይህ ገጽ በቁም ሁነት ውስጥ ታይቷል።',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'እናዝናለን፣ የእርስዎ አሳሽ ይህን ተሞክሮ የሚደግፍ አይመስልም',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/am.json b/extensions/amp-story/1.0/_locales/am.json
new file mode 100644
index 0000000000000..ef9e079561c8c
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/am.json
@@ -0,0 +1,34 @@
+{
+  "2": {"string": "ቀጣይ መታ ያድርጉ"},
+  "3": {"string": "ወደ ኋላ መታ ያድርጉ"},
+  "4": {"string": "አገናኝን ወደ ቅንጥብ ሰሌዳ መቅዳት አልተቻለም ፦("},
+  "5": {"string": "አገናኝ ተቀድቷል!"},
+  "6": {"string": "ኢሜይል"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "አገናኝ አግኝ"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "ኤስኤምኤስ"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "ይህን ተሞክሮ ለማየት የእርስዎን መስኮት ቁመት እና ስፋት ሁለቱንም ይዘርጉ"},
+  "19": {"string": "ይህን ይዘት ለማየት የ amp-ታሪክ ሙከራን ማንቃት አለብዎት።"},
+  "20": {"string": "ይህ ገጽ በቁም ሁነት ውስጥ ታይቷል።"},
+  "21": {"string": "እናዝናለን፣ የእርስዎ አሳሽ ይህን ተሞክሮ የሚደግፍ አይመስልም"},
+  "22": {"string": "ተቀበል"},
+  "23": {"string": "አትቀበል"},
+  "25": {"string": "በኦርጂናሉ ጎራ ይመልከቱ፦"},
+  "26": {"string": "ስለ AMP ውጤቶች ተጨማሪ"},
+  "27": {"string": "ለማንኛውም ቀጥል"},
+  "31": {"string": "ድምፅ ጠፍቷል"},
+  "32": {"string": "ድምፅ በርቷል"},
+  "33": {"string": "ይህ ገጽ ድምፅ የለውም"},
+  "34": {"string": "ቪድዮ አጫውት"},
+  "35": {"string": "ወደ ላይ ያንሸራትቱ"},
+  "36": {"string": "ትዊትን ዘርጋ"},
+  "37": {"string": "ተሞክሮውን ለመመልከት የእርስዎን መስኮት ቁመት ይዘርጉ"},
+  "38": {"string": "ይህን ተሞክሮ ለማየት የእርስዎን መስኮት ስፋት ይዘርጉ"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/ar.js b/extensions/amp-story/1.0/_locales/ar.js
deleted file mode 100644
index 509c539a66fe0..0000000000000
--- a/extensions/amp-story/1.0/_locales/ar.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for ar strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'إيقاف الصوت',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'لا تحتوي هذه الصفحة على أي محتوى صوتي',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'تم تفعيل الصوت',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'قراءة المزيد',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'تعديل إعدادات خصوصية البيانات',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'إعدادات الخصوصية',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'قبول',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'رفض',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'المتابعة على أي حال',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'العرض على النطاق الأصلي:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'المزيد عن نتائج AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'انقر على "التالي"',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'انقر على "رجوع"',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'التمرير سريعًا لأعلى',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'تشغيل الفيديو',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'تعذّر نسخ الرابط إلى الحافظة :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'تمّ نسخ الرابط.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'البريد إلكتروني',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: '+Google',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'الحصول على الرابط',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'توسيع التغريدة',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'يمكنك توسيع النافذة طولاً لاستعراض هذه التجربة.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'يمكنك توسيع النافذة طولاً وعرضًا لاستعراض هذه التجربة.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'يمكنك توسيع النافذة عرضًا لاستعراض هذه التجربة.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'يجب تفعيل تجربة سجلّ AMP لعرض هذا المحتوى.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'للحصول على أفضل عرض، يمكن استعراض الصفحة في الوضع الرأسي.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'عذرًا، يبدو أن متصفّحك لا يوفّر هذه التجربة.',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/ar.json b/extensions/amp-story/1.0/_locales/ar.json
new file mode 100644
index 0000000000000..e9c94b1bcc8b2
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/ar.json
@@ -0,0 +1,34 @@
+{
+  "2": {"string": "انقر على \"التالي\""},
+  "3": {"string": "انقر على \"رجوع\""},
+  "4": {"string": "تعذّر نسخ الرابط إلى الحافظة :("},
+  "5": {"string": "تمّ نسخ الرابط."},
+  "6": {"string": "البريد إلكتروني"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "+Google"},
+  "9": {"string": "الحصول على الرابط"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "يمكنك توسيع النافذة طولاً وعرضًا لاستعراض هذه التجربة."},
+  "19": {"string": "يجب تفعيل تجربة سجلّ AMP لعرض هذا المحتوى."},
+  "20": {"string": "للحصول على أفضل عرض، يمكن استعراض الصفحة في الوضع الرأسي."},
+  "21": {"string": "عذرًا، يبدو أن متصفّحك لا يوفّر هذه التجربة."},
+  "22": {"string": "قبول"},
+  "23": {"string": "رفض"},
+  "25": {"string": "العرض على النطاق الأصلي:"},
+  "26": {"string": "المزيد عن نتائج AMP"},
+  "27": {"string": "المتابعة على أي حال"},
+  "31": {"string": "إيقاف الصوت"},
+  "32": {"string": "تم تفعيل الصوت"},
+  "33": {"string": "لا تحتوي هذه الصفحة على أي محتوى صوتي"},
+  "34": {"string": "تشغيل الفيديو"},
+  "35": {"string": "التمرير سريعًا لأعلى"},
+  "36": {"string": "توسيع التغريدة"},
+  "37": {"string": "يمكنك توسيع النافذة طولاً لاستعراض هذه التجربة."},
+  "38": {"string": "يمكنك توسيع النافذة عرضًا لاستعراض هذه التجربة."},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/bg.js b/extensions/amp-story/1.0/_locales/bg.js
deleted file mode 100644
index 2daef67b9dda5..0000000000000
--- a/extensions/amp-story/1.0/_locales/bg.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for bg strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Звукът е изключен',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Тази страница няма звук',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Звукът е включен',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Още за четене',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Промяна на настройките за поверителността на данните',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Настройки за поверителност',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Приемам',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Отхвърляне',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Напред въпреки това',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Преглед в първоначалния домейн:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Още за резултатите с AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Докоснете „Напред“',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Докоснете бутона за връщане назад',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Прекарайте пръст нагоре',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Пускане на видеоклипа',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Връзката не можа да се копира в буферната памет :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Връзката е копирана!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Имейл',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Получаване на връзка',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Разгъване на съобщението в Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Разгънете височината на прозореца, за да прегледате материалите',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Разгънете височината и ширината на прозореца, за да прегледате ' +
-      'материалите',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Разгънете ширината на прозореца, за да прегледате материалите',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'За да прегледате това съдържание, трябва да активирате ' +
-      'експеримента за AMP материали.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Най-добрият начин за преглед на страницата е във вертикален режим',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'За съжаление, изглежда, че браузърът ви не поддържа преглед на ' +
-      'материали.',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/bg.json b/extensions/amp-story/1.0/_locales/bg.json
new file mode 100644
index 0000000000000..eda6f8710e253
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/bg.json
@@ -0,0 +1,46 @@
+{
+  "2": {"string": "Докоснете „Напред“"},
+  "3": {"string": "Докоснете бутона за връщане назад"},
+  "4": {"string": "Връзката не можа да се копира в буферната памет :("},
+  "5": {"string": "Връзката е копирана!"},
+  "6": {"string": "Имейл"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Получаване на връзка"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Разгънете височината и ширината на прозореца, за да прегледате материалите"
+  },
+  "19": {
+    "string": "За да прегледате това съдържание, трябва да активирате експеримента за AMP материали."
+  },
+  "20": {
+    "string": "Най-добрият начин за преглед на страницата е във вертикален режим"
+  },
+  "21": {
+    "string": "За съжаление, изглежда, че браузърът ви не поддържа преглед на материали."
+  },
+  "22": {"string": "Приемам"},
+  "23": {"string": "Отхвърляне"},
+  "25": {"string": "Преглед в първоначалния домейн:"},
+  "26": {"string": "Още за резултатите с AMP"},
+  "27": {"string": "Напред въпреки това"},
+  "31": {"string": "Звукът е изключен"},
+  "32": {"string": "Звукът е включен"},
+  "33": {"string": "Тази страница няма звук"},
+  "34": {"string": "Пускане на видеоклипа"},
+  "35": {"string": "Прекарайте пръст нагоре"},
+  "36": {"string": "Разгъване на съобщението в Twitter"},
+  "37": {
+    "string": "Разгънете височината на прозореца, за да прегледате материалите"
+  },
+  "38": {
+    "string": "Разгънете ширината на прозореца, за да прегледате материалите"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/bn.js b/extensions/amp-story/1.0/_locales/bn.js
deleted file mode 100644
index 2591722ccd1dd..0000000000000
--- a/extensions/amp-story/1.0/_locales/bn.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for bn strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'সাউন্ড বন্ধ আছে',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'এই পেজে কোনও শব্দ নেই',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'সাউন্ড চালু আছে',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'পড়ার জন্য আরও',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'ডেটা গোপনীয়তা সেটিংস পরিবর্তন করুন',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'গোপনীয়তার সেটিংস',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'অ্যাক্সেপ্ট করুন',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'খারিজ করুন',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'যাই হোক, চালিয়ে যান',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'আসল ডোমেনে দেখুন:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'এমপি ফলফল সম্পর্কে আরও অনেক কিছু জানুন',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: "'পরবর্তী' বোতামে ট্যাপ করুন",
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: "'ফিরে যান' বোতামে ট্যাপ করুন",
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'উপরের দিকে সোয়াইপ করুন',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'ভিডিও চালান',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'ক্লিপবোর্ডে লিঙ্ক কপি করা যায়নি :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'লিঙ্ক কপি করা হয়েছে!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ইমেল',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'লিঙ্ক ডাউনলোড করুন',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'এসএমএস',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'টুইট বড় করে দেখুন',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'এই পরীক্ষা দেখতে আপনার উইন্ডোর সাইজ বড় করুন',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'এই পরীক্ষা দেখতে আপনার উইন্ডোর সাইজ বড় করুন',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'এই পরীক্ষা দেখতে আপনার উইন্ডোর সাইজ বড় করুন',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'এই কন্টেন্ট দেখতে আপনাকে এএমপি স্টোরি এক্সপেরিমেন্ট ফিচারটি ' +
-      'চালু করতে হবে।',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'পোর্ট্রেট মোডে পেজটি ভালভাবে দেখা যাবে',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'মনে হচ্ছে আপনার ব্রাউজারে এটি কাজ করবে না',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/bn.json b/extensions/amp-story/1.0/_locales/bn.json
new file mode 100644
index 0000000000000..e6e911fb4c7cf
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/bn.json
@@ -0,0 +1,36 @@
+{
+  "2": {"string": "'পরবর্তী' বোতামে ট্যাপ করুন"},
+  "3": {"string": "'ফিরে যান' বোতামে ট্যাপ করুন"},
+  "4": {"string": "ক্লিপবোর্ডে লিঙ্ক কপি করা যায়নি :("},
+  "5": {"string": "লিঙ্ক কপি করা হয়েছে!"},
+  "6": {"string": "ইমেল"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "লিঙ্ক ডাউনলোড করুন"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "এসএমএস"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "এই পরীক্ষা দেখতে আপনার উইন্ডোর সাইজ বড় করুন"},
+  "19": {
+    "string": "এই কন্টেন্ট দেখতে আপনাকে এএমপি স্টোরি এক্সপেরিমেন্ট ফিচারটি চালু করতে হবে।"
+  },
+  "20": {"string": "পোর্ট্রেট মোডে পেজটি ভালভাবে দেখা যাবে"},
+  "21": {"string": "মনে হচ্ছে আপনার ব্রাউজারে এটি কাজ করবে না"},
+  "22": {"string": "অ্যাক্সেপ্ট করুন"},
+  "23": {"string": "খারিজ করুন"},
+  "25": {"string": "আসল ডোমেনে দেখুন:"},
+  "26": {"string": "এমপি ফলফল সম্পর্কে আরও অনেক কিছু জানুন"},
+  "27": {"string": "যাই হোক, চালিয়ে যান"},
+  "31": {"string": "সাউন্ড বন্ধ আছে"},
+  "32": {"string": "সাউন্ড চালু আছে"},
+  "33": {"string": "এই পেজে কোনও শব্দ নেই"},
+  "34": {"string": "ভিডিও চালান"},
+  "35": {"string": "উপরের দিকে সোয়াইপ করুন"},
+  "36": {"string": "টুইট বড় করে দেখুন"},
+  "37": {"string": "এই পরীক্ষা দেখতে আপনার উইন্ডোর সাইজ বড় করুন"},
+  "38": {"string": "এই পরীক্ষা দেখতে আপনার উইন্ডোর সাইজ বড় করুন"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/bs.js b/extensions/amp-story/1.0/_locales/bs.js
deleted file mode 100644
index 80cc73bec7468..0000000000000
--- a/extensions/amp-story/1.0/_locales/bs.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for bs strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Zvuk je isključen',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Ova stranica nema zvuk',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Zvuk je uključen',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Više za pročitati',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Promijenite postavke privatnosti podataka',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Postavke privatnosti',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Prihvati',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Odbij',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Ipak nastavi',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Prikažite na originalnoj domeni:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Više o AMP rezultatima',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Dodirnite Sljedeće',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Dodirnite Nazad',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Prevuci gore',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Reproduciraj videozapis',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Kopiranje linka u međumemoriju nije uspjelo :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Link je kopiran!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-pošta',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Preuzmi link',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Proširite tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Proširite visinu prozora da vidite ovo iskustvo',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Proširite i visinu i širinu prozora da vidite ovo iskustvo',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Proširite širinu prozora da vidite ovo iskustvo',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'Morate omogućiti eksperiment AMP priče da vidite ovaj sadržaj',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Ovu stranicu je najbolje pregledati u uspravnom načinu',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'Žao nam je, ali izgleda da vaš preglednik ne podržava ovo iskustvo',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/bs.json b/extensions/amp-story/1.0/_locales/bs.json
new file mode 100644
index 0000000000000..731162cc1b114
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/bs.json
@@ -0,0 +1,40 @@
+{
+  "2": {"string": "Dodirnite Sljedeće"},
+  "3": {"string": "Dodirnite Nazad"},
+  "4": {"string": "Kopiranje linka u međumemoriju nije uspjelo :("},
+  "5": {"string": "Link je kopiran!"},
+  "6": {"string": "E-pošta"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Preuzmi link"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Proširite i visinu i širinu prozora da vidite ovo iskustvo"
+  },
+  "19": {
+    "string": "Morate omogućiti eksperiment AMP priče da vidite ovaj sadržaj"
+  },
+  "20": {"string": "Ovu stranicu je najbolje pregledati u uspravnom načinu"},
+  "21": {
+    "string": "Žao nam je, ali izgleda da vaš preglednik ne podržava ovo iskustvo"
+  },
+  "22": {"string": "Prihvati"},
+  "23": {"string": "Odbij"},
+  "25": {"string": "Prikažite na originalnoj domeni:"},
+  "26": {"string": "Više o AMP rezultatima"},
+  "27": {"string": "Ipak nastavi"},
+  "31": {"string": "Zvuk je isključen"},
+  "32": {"string": "Zvuk je uključen"},
+  "33": {"string": "Ova stranica nema zvuk"},
+  "34": {"string": "Reproduciraj videozapis"},
+  "35": {"string": "Prevuci gore"},
+  "36": {"string": "Proširite tweet"},
+  "37": {"string": "Proširite visinu prozora da vidite ovo iskustvo"},
+  "38": {"string": "Proširite širinu prozora da vidite ovo iskustvo"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/ca.js b/extensions/amp-story/1.0/_locales/ca.js
deleted file mode 100644
index 13db22ef54a3e..0000000000000
--- a/extensions/amp-story/1.0/_locales/ca.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ca strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'So desactivat',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Aquesta pàgina no té so',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'So activat',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Articles relacionats',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Canvia la configuració de privadesa de les dades',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Configuració de privadesa',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Accepta',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Rebutja',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Continua igualment',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Mostra al domini original:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Més informació sobre els resultats AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Toca Següent',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Toca Enrere',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Llisca cap amunt',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Reprodueix el vídeo',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: "No s'ha pogut copiar l'enllaç al porta-retalls :(",
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: "S'ha copiat l'enllaç",
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Correu electrònic',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: "Obtén l'enllaç",
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Desplega el tuit',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: "Amplia l'alçada de la finestra per veure aquesta experiència",
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      "Amplia l'alçada i l'amplada de la finestra per veure aquesta " +
-      'experiència',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: "Amplia l'amplada de la finestra per veure aquesta experiència",
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      "Has d'activar l'experiment d'història AMP per veure aquest " +
-      'contingut.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'La pàgina es veu millor en mode vertical',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Sembla que el teu navegador no admet aquesta experiència',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/ca.json b/extensions/amp-story/1.0/_locales/ca.json
new file mode 100644
index 0000000000000..c8927ef54a3c8
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/ca.json
@@ -0,0 +1,42 @@
+{
+  "2": {"string": "Toca Següent"},
+  "3": {"string": "Toca Enrere"},
+  "4": {"string": "No s'ha pogut copiar l'enllaç al porta-retalls :("},
+  "5": {"string": "S'ha copiat l'enllaç"},
+  "6": {"string": "Correu electrònic"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Obtén l'enllaç"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Amplia l'alçada i l'amplada de la finestra per veure aquesta experiència"
+  },
+  "19": {
+    "string": "Has d'activar l'experiment d'història AMP per veure aquest contingut."
+  },
+  "20": {"string": "La pàgina es veu millor en mode vertical"},
+  "21": {"string": "Sembla que el teu navegador no admet aquesta experiència"},
+  "22": {"string": "Accepta"},
+  "23": {"string": "Rebutja"},
+  "25": {"string": "Mostra al domini original:"},
+  "26": {"string": "Més informació sobre els resultats AMP"},
+  "27": {"string": "Continua igualment"},
+  "31": {"string": "So desactivat"},
+  "32": {"string": "So activat"},
+  "33": {"string": "Aquesta pàgina no té so"},
+  "34": {"string": "Reprodueix el vídeo"},
+  "35": {"string": "Llisca cap amunt"},
+  "36": {"string": "Desplega el tuit"},
+  "37": {
+    "string": "Amplia l'alçada de la finestra per veure aquesta experiència"
+  },
+  "38": {
+    "string": "Amplia l'amplada de la finestra per veure aquesta experiència"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/cs.js b/extensions/amp-story/1.0/_locales/cs.js
deleted file mode 100644
index 32c3c74ed0c0a..0000000000000
--- a/extensions/amp-story/1.0/_locales/cs.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for cs strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Zvuk je vypnutý',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Tato stránka nemá zvuk',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Zvuk je zapnutý',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Další ke čtení',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Změnit nastavení ochrany dat',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Nastavení ochrany soukromí',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Přijmout',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Zamítnout',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Přesto pokračovat',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Zobrazit v původní doméně:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Další informace o výsledcích AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Klepněte na Další',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Klepněte na Zpět',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Přejet nahoru',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Přehrát video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Odkaz se nepodařilo zkopírovat do schránky :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Odkaz byl zkopírován.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-mail',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Získat odkaz',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Rozbalit Tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Chcete-li tuto položku zobrazit, zvětšete výšku okna',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Chcete-li tento prvek zobrazit, zvětšete výšku i šířku okna',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Chcete-li tento prvek zobrazit, zvětšete šířku okna',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Chcete-li tento obsah zobrazit, musíte povolit experiment s ' +
-      'příběhem AMP',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Stránku je nejlepší zobrazit na výšku',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Je nám líto, váš prohlížeč tento prvek zřejmě nepodporuje',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/cs.json b/extensions/amp-story/1.0/_locales/cs.json
new file mode 100644
index 0000000000000..35be082422fc6
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/cs.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "Klepněte na Další"},
+  "3": {"string": "Klepněte na Zpět"},
+  "4": {"string": "Odkaz se nepodařilo zkopírovat do schránky :("},
+  "5": {"string": "Odkaz byl zkopírován."},
+  "6": {"string": "E-mail"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Získat odkaz"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Chcete-li tento prvek zobrazit, zvětšete výšku i šířku okna"
+  },
+  "19": {
+    "string": "Chcete-li tento obsah zobrazit, musíte povolit experiment s příběhem AMP"
+  },
+  "20": {"string": "Stránku je nejlepší zobrazit na výšku"},
+  "21": {"string": "Je nám líto, váš prohlížeč tento prvek zřejmě nepodporuje"},
+  "22": {"string": "Přijmout"},
+  "23": {"string": "Zamítnout"},
+  "25": {"string": "Zobrazit v původní doméně:"},
+  "26": {"string": "Další informace o výsledcích AMP"},
+  "27": {"string": "Přesto pokračovat"},
+  "31": {"string": "Zvuk je vypnutý"},
+  "32": {"string": "Zvuk je zapnutý"},
+  "33": {"string": "Tato stránka nemá zvuk"},
+  "34": {"string": "Přehrát video"},
+  "35": {"string": "Přejet nahoru"},
+  "36": {"string": "Rozbalit Tweet"},
+  "37": {"string": "Chcete-li tuto položku zobrazit, zvětšete výšku okna"},
+  "38": {"string": "Chcete-li tento prvek zobrazit, zvětšete šířku okna"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/da.js b/extensions/amp-story/1.0/_locales/da.js
deleted file mode 100644
index 8f42bac7a55a8..0000000000000
--- a/extensions/amp-story/1.0/_locales/da.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for da strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Lyden er slået fra',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Denne side har ingen lyd',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Lyden er slået til',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Forslag til læsning',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Skift privatlivsindstillinger for data',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Privatlivsindstillinger',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Acceptér',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Afvis',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Fortsæt alligevel',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Se på oprindeligt domæne:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Mere om AMP-resultater',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Tryk på Næste',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Tryk på Tilbage',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Stryg opad',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Afspil video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Linket kunne ikke kopieres til udklipsholderen :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Linket blev kopieret',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Mail',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Hent link',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'Sms',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Udvid tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Gør vinduet højere for at se denne oplevelse',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Gør vinduet højere og bredere for at se denne oplevelse',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Gør vinduet bredere for at se denne oplevelse',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Du skal aktivere AMP-historieeksperimentet for at se dette ' +
-      'indhold.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Denne side fungerer bedst i stående format',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'Det ser desværre ud til, at din browser ikke understøtter denne ' +
-      'oplevelse',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/da.json b/extensions/amp-story/1.0/_locales/da.json
new file mode 100644
index 0000000000000..08833a9bb58cc
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/da.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "Tryk på Næste"},
+  "3": {"string": "Tryk på Tilbage"},
+  "4": {"string": "Linket kunne ikke kopieres til udklipsholderen :("},
+  "5": {"string": "Linket blev kopieret"},
+  "6": {"string": "Mail"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Hent link"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "Sms"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "Gør vinduet højere og bredere for at se denne oplevelse"},
+  "19": {
+    "string": "Du skal aktivere AMP-historieeksperimentet for at se dette indhold."
+  },
+  "20": {"string": "Denne side fungerer bedst i stående format"},
+  "21": {
+    "string": "Det ser desværre ud til, at din browser ikke understøtter denne oplevelse"
+  },
+  "22": {"string": "Acceptér"},
+  "23": {"string": "Afvis"},
+  "25": {"string": "Se på oprindeligt domæne:"},
+  "26": {"string": "Mere om AMP-resultater"},
+  "27": {"string": "Fortsæt alligevel"},
+  "31": {"string": "Lyden er slået fra"},
+  "32": {"string": "Lyden er slået til"},
+  "33": {"string": "Denne side har ingen lyd"},
+  "34": {"string": "Afspil video"},
+  "35": {"string": "Stryg opad"},
+  "36": {"string": "Udvid tweet"},
+  "37": {"string": "Gør vinduet højere for at se denne oplevelse"},
+  "38": {"string": "Gør vinduet bredere for at se denne oplevelse"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/de.js b/extensions/amp-story/1.0/_locales/de.js
deleted file mode 100644
index 0a23a92a7e314..0000000000000
--- a/extensions/amp-story/1.0/_locales/de.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for de strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Ton aus',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Diese Seite hat keinen Ton',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Ton an',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Weitere Artikel',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Datenschutzeinstellungen ändern',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Datenschutzeinstellungen',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Annehmen',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Ablehnen',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Trotzdem fortfahren',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'In ursprünglicher Domain ansehen:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Weitere Informationen zu AMP-Ergebnissen',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Auf "Weiter" tippen',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Auf "Zurück" tippen',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Nach oben wischen',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Video abspielen',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Der Link konnte nicht in die Zwischenablage kopiert werden',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Link kopiert.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-Mail',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Link abrufen',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Tweet maximieren',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string:
-      'Maximiere die Höhe deines Fensters, um diese Funktion nutzen zu ' +
-      'können',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Maximiere die Höhe und Breite deines Fensters, um diese ' +
-      'Funktion nutzen zu können',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string:
-      'Maximiere die Breite deines Fensters, um diese Funktion nutzen ' +
-      'zu können',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Wenn du diesen Inhalt aufrufen möchtest, musst du den ' +
-      'amp-story-Test aktivieren.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Diese Seite lässt sich am besten im Hochformat ansehen',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Dein aktueller Browser unterstützt diese Funktion leider nicht.',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/de.json b/extensions/amp-story/1.0/_locales/de.json
new file mode 100644
index 0000000000000..9ec4a77a5665a
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/de.json
@@ -0,0 +1,44 @@
+{
+  "2": {"string": "Auf \"Weiter\" tippen"},
+  "3": {"string": "Auf \"Zurück\" tippen"},
+  "4": {"string": "Der Link konnte nicht in die Zwischenablage kopiert werden"},
+  "5": {"string": "Link kopiert."},
+  "6": {"string": "E-Mail"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Link abrufen"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Maximiere die Höhe und Breite deines Fensters, um diese Funktion nutzen zu können"
+  },
+  "19": {
+    "string": "Wenn du diesen Inhalt aufrufen möchtest, musst du den amp-story-Test aktivieren."
+  },
+  "20": {"string": "Diese Seite lässt sich am besten im Hochformat ansehen"},
+  "21": {
+    "string": "Dein aktueller Browser unterstützt diese Funktion leider nicht."
+  },
+  "22": {"string": "Annehmen"},
+  "23": {"string": "Ablehnen"},
+  "25": {"string": "In ursprünglicher Domain ansehen:"},
+  "26": {"string": "Weitere Informationen zu AMP-Ergebnissen"},
+  "27": {"string": "Trotzdem fortfahren"},
+  "31": {"string": "Ton aus"},
+  "32": {"string": "Ton an"},
+  "33": {"string": "Diese Seite hat keinen Ton"},
+  "34": {"string": "Video abspielen"},
+  "35": {"string": "Nach oben wischen"},
+  "36": {"string": "Tweet maximieren"},
+  "37": {
+    "string": "Maximiere die Höhe deines Fensters, um diese Funktion nutzen zu können"
+  },
+  "38": {
+    "string": "Maximiere die Breite deines Fensters, um diese Funktion nutzen zu können"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/default.js b/extensions/amp-story/1.0/_locales/default.js
deleted file mode 100644
index 1ac81815e39e7..0000000000000
--- a/extensions/amp-story/1.0/_locales/default.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for English strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Sound off',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Sound on',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'This page has no sound',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'More to read',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Privacy settings',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Change data privacy settings',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Accept',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Decline',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Continue Anyway',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'View on original domain:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'More about AMP results',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_SWIPE_PROGRESS]: {
-    string: 'Tip 2/2',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_SWIPE_INSTRUCTIONS]: {
-    string: 'Swipe to go to the next story',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_SWIPE_DISMISS]: {
-    string: 'Got it',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_TAP_PROGRESS]: {
-    string: 'Tip 1/2',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_TAP_PROGRESS_SINGLE]: {
-    string: 'Tip',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_TAP_INSTRUCTIONS]: {
-    string: 'Tap to go to the next screen',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_TAP_DISMISS]: {
-    string: 'Next',
-  },
-  [LocalizedStringId.AMP_STORY_HAS_NEW_PAGE_TEXT]: {
-    string: 'Updated',
-  },
-  [LocalizedStringId.AMP_STORY_QUIZ_ANSWER_CHOICE_A]: {
-    string: 'A',
-  },
-  [LocalizedStringId.AMP_STORY_QUIZ_ANSWER_CHOICE_B]: {
-    string: 'B',
-  },
-  [LocalizedStringId.AMP_STORY_QUIZ_ANSWER_CHOICE_C]: {
-    string: 'C',
-  },
-  [LocalizedStringId.AMP_STORY_QUIZ_ANSWER_CHOICE_D]: {
-    string: 'D',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: ':(',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Expand the height of your window to view this experience',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Expand both the height and width of your window to view this ' +
-      'experience',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Expand the width of your window to view this experience',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'You must enable the amp-story experiment to view this content.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'The page is best viewed in portrait mode',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      "We're sorry, it looks like your browser doesn't support " +
-      'this experience',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/default.json b/extensions/amp-story/1.0/_locales/default.json
new file mode 100644
index 0000000000000..3e34d1afc289b
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/default.json
@@ -0,0 +1,40 @@
+{
+  "4": {"string": ":("},
+  "18": {
+    "string": "Expand both the height and width of your window to view this experience"
+  },
+  "19": {
+    "string": "You must enable the amp-story experiment to view this content."
+  },
+  "20": {"string": "The page is best viewed in portrait mode"},
+  "21": {
+    "string": "We're sorry, it looks like your browser doesn't support this experience"
+  },
+  "22": {"string": "Accept"},
+  "23": {"string": "Decline"},
+  "25": {"string": "View on original domain:"},
+  "26": {"string": "More about AMP results"},
+  "27": {"string": "Continue Anyway"},
+  "31": {"string": "Sound off"},
+  "32": {"string": "Sound on"},
+  "33": {"string": "This page has no sound"},
+  "37": {"string": "Expand the height of your window to view this experience"},
+  "38": {"string": "Expand the width of your window to view this experience"},
+  "64": {"string": "Updated"},
+  "71": {"string": "A"},
+  "72": {"string": "B"},
+  "73": {"string": "C"},
+  "74": {"string": "D"},
+  "75": {"string": "Tip 1 of 2"},
+  "76": {"string": "Tap to go to the next screen"},
+  "77": {"string": "Next"},
+  "78": {"string": "Tip 2 of 2"},
+  "79": {"string": "Swipe to go to the next story"},
+  "80": {"string": "Got it"},
+  "81": {"string": "Tip"},
+  "84": {"string": "SCORE:"},
+  "85": {"string": "Pause"},
+  "86": {"string": "Play"},
+  "89": {"string": "Your response will be sent to"},
+  "96": {"string": "Move device to explore"}
+}
diff --git a/extensions/amp-story/1.0/_locales/el.js b/extensions/amp-story/1.0/_locales/el.js
deleted file mode 100644
index a01d0fb7519b1..0000000000000
--- a/extensions/amp-story/1.0/_locales/el.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for el strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Απενεργοποίηση ήχου',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Αυτή η σελίδα δεν έχει ήχο',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Ο ήχος είναι ενεργός',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Περισσότερα για ανάγνωση',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Αλλαγή ρυθμίσεων απορρήτου δεδομένων',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Ρυθμίσεις απορρήτου',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Αποδοχή',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Απόρριψη',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Συνέχεια ούτως ή άλλως',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Προβολή στον αρχικό τομέα:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Περισσότερα σχετικά με τα αποτελέσματα AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Πατήστε Επόμενο',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Πατήστε Πίσω',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Σάρωση προς τα επάνω',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Αναπαραγωγή βίντεο',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Δεν ήταν δυνατή η αντιγραφή του συνδέσμου στο πρόχειρο :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Ο σύνδεσμος αντιγράφηκε!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Ηλεκτρονικό ταχυδρομείο',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Λήψη συνδέσμου',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Ανάπτυξη tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string:
-      'Αναπτύξτε το ύψος του παραθύρου για την προβολή αυτής της ' +
-      'εμπειρίας',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Αναπτύξτε τόσο το ύψος όσο και το πλάτος του παραθύρου σας για ' +
-      'την προβολή αυτής της εμπειρίας',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string:
-      'Αναπτύξτε το πλάτος του παραθύρου σας για την προβολή αυτής της ' +
-      'εμπειρίας',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Πρέπει να ενεργοποιήσετε το πείραμα ιστορίας AMP για να ' +
-      'προβάλετε αυτό το περιεχόμενο.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string:
-      'Για βέλτιστη προβολή της σελίδας, επιλέξτε κατακόρυφο ' +
-      'προσανατολισμό',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      "Δυστυχώς, απ' ό,τι φαίνεται, το πρόγραμμα περιήγησής σας δεν " +
-      'υποστηρίζει αυτήν την εμπειρία',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/el.json b/extensions/amp-story/1.0/_locales/el.json
new file mode 100644
index 0000000000000..5c32fd14c99d2
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/el.json
@@ -0,0 +1,46 @@
+{
+  "2": {"string": "Πατήστε Επόμενο"},
+  "3": {"string": "Πατήστε Πίσω"},
+  "4": {"string": "Δεν ήταν δυνατή η αντιγραφή του συνδέσμου στο πρόχειρο :("},
+  "5": {"string": "Ο σύνδεσμος αντιγράφηκε!"},
+  "6": {"string": "Ηλεκτρονικό ταχυδρομείο"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Λήψη συνδέσμου"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Αναπτύξτε τόσο το ύψος όσο και το πλάτος του παραθύρου σας για την προβολή αυτής της εμπειρίας"
+  },
+  "19": {
+    "string": "Πρέπει να ενεργοποιήσετε το πείραμα ιστορίας AMP για να προβάλετε αυτό το περιεχόμενο."
+  },
+  "20": {
+    "string": "Για βέλτιστη προβολή της σελίδας, επιλέξτε κατακόρυφο προσανατολισμό"
+  },
+  "21": {
+    "string": "Δυστυχώς, απ' ό,τι φαίνεται, το πρόγραμμα περιήγησής σας δεν υποστηρίζει αυτήν την εμπειρία"
+  },
+  "22": {"string": "Αποδοχή"},
+  "23": {"string": "Απόρριψη"},
+  "25": {"string": "Προβολή στον αρχικό τομέα:"},
+  "26": {"string": "Περισσότερα σχετικά με τα αποτελέσματα AMP"},
+  "27": {"string": "Συνέχεια ούτως ή άλλως"},
+  "31": {"string": "Απενεργοποίηση ήχου"},
+  "32": {"string": "Ο ήχος είναι ενεργός"},
+  "33": {"string": "Αυτή η σελίδα δεν έχει ήχο"},
+  "34": {"string": "Αναπαραγωγή βίντεο"},
+  "35": {"string": "Σάρωση προς τα επάνω"},
+  "36": {"string": "Ανάπτυξη tweet"},
+  "37": {
+    "string": "Αναπτύξτε το ύψος του παραθύρου για την προβολή αυτής της εμπειρίας"
+  },
+  "38": {
+    "string": "Αναπτύξτε το πλάτος του παραθύρου σας για την προβολή αυτής της εμπειρίας"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/en-GB.js b/extensions/amp-story/1.0/_locales/en-GB.js
deleted file mode 100644
index 16e3c3942143f..0000000000000
--- a/extensions/amp-story/1.0/_locales/en-GB.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for en-GB strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Sound off',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'This page has no sound',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Sound on',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'More to read',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Change data privacy settings',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Privacy settings',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Accept',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Decline',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Continue Anyway',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'View on original domain:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'More about AMP results',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Tap Next',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Tap Back',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Swipe up',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Play video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Could not copy link to clipboard :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Link copied!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Email',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Get Link',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Expand Tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Expand the height of your window to view this experience',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Expand both the height and width of your window to view this ' +
-      'experience',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Expand the width of your window to view this experience',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'You must enable the amp-story experiment to view this content.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'The page is best viewed in portrait mode',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      "We're sorry, it looks like your browser doesn't support this " +
-      'experience',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/en-GB.json b/extensions/amp-story/1.0/_locales/en-GB.json
new file mode 100644
index 0000000000000..6b4110a2f0620
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/en-GB.json
@@ -0,0 +1,40 @@
+{
+  "2": {"string": "Tap Next"},
+  "3": {"string": "Tap Back"},
+  "4": {"string": "Could not copy link to clipboard :("},
+  "5": {"string": "Link copied!"},
+  "6": {"string": "Email"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Get Link"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Expand both the height and width of your window to view this experience"
+  },
+  "19": {
+    "string": "You must enable the amp-story experiment to view this content."
+  },
+  "20": {"string": "The page is best viewed in portrait mode"},
+  "21": {
+    "string": "We're sorry, it looks like your browser doesn't support this experience"
+  },
+  "22": {"string": "Accept"},
+  "23": {"string": "Decline"},
+  "25": {"string": "View on original domain:"},
+  "26": {"string": "More about AMP results"},
+  "27": {"string": "Continue Anyway"},
+  "31": {"string": "Sound off"},
+  "32": {"string": "Sound on"},
+  "33": {"string": "This page has no sound"},
+  "34": {"string": "Play video"},
+  "35": {"string": "Swipe up"},
+  "36": {"string": "Expand Tweet"},
+  "37": {"string": "Expand the height of your window to view this experience"},
+  "38": {"string": "Expand the width of your window to view this experience"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/en.js b/extensions/amp-story/1.0/_locales/en.js
deleted file mode 100644
index 524e32dbe020e..0000000000000
--- a/extensions/amp-story/1.0/_locales/en.js
+++ /dev/null
@@ -1,336 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for English strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_LABEL]: {
-    string: 'Mute story',
-    description:
-      'Label for the mute button that turns off the sound in the story',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Sound off',
-    description:
-      'Text that informs users that the sound is off after they ' +
-      'click the mute button',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_BUTTON_LABEL]: {
-    string: 'Unmute story',
-    description:
-      'Label for the unmute button that turns the sound ' +
-      'in the story back on',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'This page has no sound',
-    description:
-      'Text that informs users that the sound is on after they ' +
-      'click the unmute button on a page without sound',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Sound on',
-    description:
-      'Text that informs users that the sound is on after they ' +
-      'click the unmute button on a page with sound',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'More to read',
-    description:
-      'Label to be placed as a title on top of related articles ' +
-      'at the end of a story.',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Privacy settings',
-    description:
-      'Title for a section that allows the user to configure ' +
-      'their privacy settings',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Change data privacy settings',
-    description:
-      'Label for a button that allows the user to change their ' +
-      'choice to consent to providing their cookie access.',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Accept',
-    description:
-      'Label for a button that allows the user to consent to ' +
-      'providing their cookie access.',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Decline',
-    description:
-      'Label for a button that allows the user to disconsent to ' +
-      'providing their cookie access.',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Continue Anyway',
-    description:
-      'Button label to allow the user to continue even if they ' +
-      'are not using a supportive browser.',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'View on original domain:',
-    description:
-      'Label for a heading of a dialog that shows the user the ' +
-      'domain from which the story is served.',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'More about AMP results',
-    description:
-      'Label for a link to documentation on how AMP links are handled.',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_SWIPE_PROGRESS]: {
-    string: 'Tip 2/2',
-    description:
-      'Label for a hint indicating progress on a multistep onboarding user education tutorial.',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_SWIPE_INSTRUCTIONS]: {
-    string: 'Swipe to go to the next story',
-    description:
-      'Instruction on how to use the product, within an onboarding user education tutorial.',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_SWIPE_DISMISS]: {
-    string: 'Got it',
-    description:
-      'Label for a button dismissing or advancing to the next step of an onboarding user education tutorial.',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_TAP_PROGRESS]: {
-    string: 'Tip 1/2',
-    description:
-      'Label for a hint indicating progress on a multistep onboarding user education tutorial.',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_TAP_PROGRESS_SINGLE]: {
-    string: 'Tip',
-    description:
-      'Label for a hint in the context of an onboarding user education tutorial.',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_TAP_INSTRUCTIONS]: {
-    string: 'Tap to go to the next screen',
-    description:
-      'Instruction on how to use the product, within an onboarding user education tutorial.',
-  },
-  [LocalizedStringId.AMP_STORY_EDUCATION_NAVIGATION_TAP_DISMISS]: {
-    string: 'Next',
-    description:
-      'Label for a button dismissing or advancing to the next step of an onboarding user education tutorial.',
-  },
-  [LocalizedStringId.AMP_STORY_HAS_NEW_PAGE_TEXT]: {
-    string: 'Updated',
-    description:
-      'Label that indicates that additional content has been added to a story',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Tap Next',
-    description:
-      'Label indicating that users can navigate to the next ' +
-      'page, in the amp-story hint UI.',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Tap Back',
-    description:
-      'Label indicating that users can navigate to the previous ' +
-      'page, in the amp-story hint UI.',
-  },
-  [LocalizedStringId.AMP_STORY_INFO_BUTTON_LABEL]: {
-    string: 'Story information',
-    description:
-      'Label for the information button that pulls up ' +
-      'relevant information about the story content',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Swipe up',
-    description:
-      'Label for a button to open a drawer containing additional ' +
-      'content via a "swipe up" user gesture.',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ERROR_VIDEO]: {
-    string: 'Video failed to play',
-    description:
-      'Label indicating that the video visible on the page failed to play.',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Play video',
-    description: 'Label for a button to play the video visible on the page.',
-  },
-  [LocalizedStringId.AMP_STORY_QUIZ_ANSWER_CHOICE_A]: {
-    string: 'A',
-    description:
-      'Label for the first answer choice from a multiple choice quiz (e.g. A in A/B/C/D)',
-  },
-  [LocalizedStringId.AMP_STORY_QUIZ_ANSWER_CHOICE_B]: {
-    string: 'B',
-    description:
-      'Label for the second answer choice from a multiple choice quiz (e.g. B in A/B/C/D)',
-  },
-  [LocalizedStringId.AMP_STORY_QUIZ_ANSWER_CHOICE_C]: {
-    string: 'C',
-    description:
-      'Label for the third answer choice from a multiple choice quiz (e.g. C in A/B/C/D)',
-  },
-  [LocalizedStringId.AMP_STORY_QUIZ_ANSWER_CHOICE_D]: {
-    string: 'D',
-    description:
-      'Label for the fourth answer choice from a multiple choice quiz (e.g. D in A/B/C/D)',
-  },
-  [LocalizedStringId.AMP_STORY_SHARE_BUTTON_LABEL]: {
-    string: 'Share story',
-    description:
-      'Label for the share button that pulls up a panel ' +
-      'of options for sharing the story',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PAGE_LABEL]: {
-    string: 'Share starting from this page',
-    description:
-      'Checkbox label when the branching experiment is turned on ' +
-      ' and the story is in landscape mode; checking the checkbox lets the ' +
-      'user share the story from the current page.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Could not copy link to clipboard :(',
-    description:
-      'String shown in a failure message to inform the user that ' +
-      'a link could not be successfully copied to their clipboard.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Link copied!',
-    description:
-      'String shown in a confirmation message to inform the user ' +
-      'that a link was successfully copied to their clipboard.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Email',
-    description:
-      'Button label for the share target that shares a link via email.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-    description:
-      'Button label for the share target that shares a link via Facebook.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-    description:
-      'Button label for the share target that shares a link via Google+.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-    description:
-      'Button label for the share target that shares a link via Line.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Get Link',
-    description:
-      'Button label for the share target that shares a link via ' +
-      "by copying it to the user's clipboard.",
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-    description:
-      'Button label for the share target that shares a link via LinkedIn.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-    description:
-      'Button label for the share target that shares a link via ' +
-      'Pinterest.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-    description:
-      'Button label for the share target that shares a link via SMS.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SYSTEM]: {
-    string: 'More',
-    description:
-      'Button label for the share target that shares a link via ' +
-      "deferral to the operating system's native sharing handler.",
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-    description:
-      'Button label for the share target that shares a link via Tumblr.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-    description:
-      'Button label for the share target that shares a link via Twitter.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-    description:
-      'Button label for the share target that shares a link via WhatsApp.',
-  },
-  [LocalizedStringId.AMP_STORY_SIDEBAR_BUTTON_LABEL]: {
-    string: 'Toggle story menu',
-    description:
-      'Label for the sidebar button that pulls up a menu ' +
-      'of options for interacting with the story',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Expand Tweet',
-    description:
-      'Label in the tooltip text for when a Twitter embed is expandable.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Expand the height of your window to view this experience',
-    description:
-      'Text for a warning screen that informs the user that ' +
-      'stories are only supported in taller browser windows.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Expand both the height and width of your window to view this ' +
-      'experience',
-    description:
-      'Text for a warning screen that informs the user that ' +
-      'stories are only supported in larger browser windows.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Expand the width of your window to view this experience',
-    description:
-      'Text for a warning screen that informs the user that ' +
-      'stories are only supported in wider browser windows.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'You must enable the amp-story experiment to view this content.',
-    description:
-      'Text for a warning screen that informs the user that ' +
-      'they must enable an experiment to use stories.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'The page is best viewed in portrait mode',
-    description:
-      'Text for a warning screen that informs the user that ' +
-      'stories are only supported in portrait orientation.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      "We're sorry, it looks like your browser doesn't support " +
-      'this experience',
-    description:
-      'Text for a warning screen that informs the user that ' +
-      'their browser does not support stories.',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/en.json b/extensions/amp-story/1.0/_locales/en.json
new file mode 100644
index 0000000000000..2228de29aa09a
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/en.json
@@ -0,0 +1,266 @@
+{
+  "2": {
+    "string": "Tap Next",
+    "description": "Label indicating that users can navigate to the next page, in the amp-story hint UI."
+  },
+  "3": {
+    "string": "Tap Back",
+    "description": "Label indicating that users can navigate to the previous page, in the amp-story hint UI."
+  },
+  "4": {
+    "string": "Could not copy link to clipboard :(",
+    "description": "String shown in a failure message to inform the user that a link could not be successfully copied to their clipboard."
+  },
+  "5": {
+    "string": "Link copied!",
+    "description": "String shown in a confirmation message to inform the user that a link was successfully copied to their clipboard."
+  },
+  "6": {
+    "string": "Email",
+    "description": "Button label for the share target that shares a link via email."
+  },
+  "7": {
+    "string": "Facebook",
+    "description": "Button label for the share target that shares a link via Facebook."
+  },
+  "8": {
+    "string": "Google+",
+    "description": "Button label for the share target that shares a link via Google+."
+  },
+  "9": {
+    "string": "Get Link",
+    "description": "Button label for the share target that shares a link via by copying it to the user's clipboard."
+  },
+  "10": {
+    "string": "LinkedIn",
+    "description": "Button label for the share target that shares a link via LinkedIn."
+  },
+  "11": {
+    "string": "Pinterest",
+    "description": "Button label for the share target that shares a link via Pinterest."
+  },
+  "12": {
+    "string": "SMS",
+    "description": "Button label for the share target that shares a link via SMS."
+  },
+  "13": {
+    "string": "More",
+    "description": "Button label for the share target that shares a link via deferral to the operating system's native sharing handler."
+  },
+  "14": {
+    "string": "Tumblr",
+    "description": "Button label for the share target that shares a link via Tumblr."
+  },
+  "15": {
+    "string": "Twitter",
+    "description": "Button label for the share target that shares a link via Twitter."
+  },
+  "16": {
+    "string": "WhatsApp",
+    "description": "Button label for the share target that shares a link via WhatsApp."
+  },
+  "18": {
+    "string": "Expand both the height and width of your window to view this experience",
+    "description": "Text for a warning screen that informs the user that stories are only supported in larger browser windows."
+  },
+  "19": {
+    "string": "You must enable the amp-story experiment to view this content.",
+    "description": "Text for a warning screen that informs the user that they must enable an experiment to use stories."
+  },
+  "20": {
+    "string": "The page is best viewed in portrait mode",
+    "description": "Text for a warning screen that informs the user that stories are only supported in portrait orientation."
+  },
+  "21": {
+    "string": "We're sorry, it looks like your browser doesn't support this experience",
+    "description": "Text for a warning screen that informs the user that their browser does not support stories."
+  },
+  "22": {
+    "string": "Accept",
+    "description": "Label for a button that allows the user to consent to providing their cookie access."
+  },
+  "23": {
+    "string": "Decline",
+    "description": "Label for a button that allows the user to disconsent to providing their cookie access."
+  },
+  "25": {
+    "string": "View on original domain:",
+    "description": "Label for a heading of a dialog that shows the user the domain from which the story is served."
+  },
+  "26": {
+    "string": "More about AMP results",
+    "description": "Label for a link to documentation on how AMP links are handled."
+  },
+  "27": {
+    "string": "Continue Anyway",
+    "description": "Button label to allow the user to continue even if they are not using a supportive browser."
+  },
+  "31": {
+    "string": "Sound off",
+    "description": "Text that informs users that the sound is off after they click the mute button"
+  },
+  "32": {
+    "string": "Sound on",
+    "description": "Text that informs users that the sound is on after they click the unmute button on a page with sound"
+  },
+  "33": {
+    "string": "This page has no sound",
+    "description": "Text that informs users that the sound is on after they click the unmute button on a page without sound"
+  },
+  "34": {
+    "string": "Play video",
+    "description": "Label for a button to play the video visible on the page."
+  },
+  "35": {
+    "string": "Swipe up",
+    "description": "Label for a button to open a drawer containing additional content via a \"swipe up\" user gesture."
+  },
+  "36": {
+    "string": "Expand Tweet",
+    "description": "Label in the tooltip text for when a Twitter embed is expandable."
+  },
+  "37": {
+    "string": "Expand the height of your window to view this experience",
+    "description": "Text for a warning screen that informs the user that stories are only supported in taller browser windows."
+  },
+  "38": {
+    "string": "Expand the width of your window to view this experience",
+    "description": "Text for a warning screen that informs the user that stories are only supported in wider browser windows."
+  },
+  "62": {
+    "string": "Share starting from this page",
+    "description": "Checkbox label when the branching experiment is turned on  and the story is in landscape mode; checking the checkbox lets the user share the story from the current page."
+  },
+  "63": {
+    "string": "Line",
+    "description": "Button label for the share target that shares a link via Line."
+  },
+  "64": {
+    "string": "Updated",
+    "description": "Label that indicates that additional content has been added to a story"
+  },
+  "65": {
+    "string": "Video failed to play",
+    "description": "Label indicating that the video visible on the page failed to play."
+  },
+  "66": {
+    "string": "Mute story",
+    "description": "Label for the mute button that turns off the sound in the story"
+  },
+  "67": {
+    "string": "Unmute story",
+    "description": "Label for the unmute button that turns the sound in the story back on"
+  },
+  "68": {
+    "string": "Story information",
+    "description": "Label for the information button that pulls up relevant information about the story content"
+  },
+  "69": {
+    "string": "Share story",
+    "description": "Label for the share button that pulls up a panel of options for sharing the story"
+  },
+  "70": {
+    "string": "Toggle story menu",
+    "description": "Label for the sidebar button that pulls up a menu of options for interacting with the story"
+  },
+  "71": {
+    "string": "A",
+    "description": "Label for the first answer choice from a multiple choice quiz (e.g. A in A/B/C/D)"
+  },
+  "72": {
+    "string": "B",
+    "description": "Label for the second answer choice from a multiple choice quiz (e.g. B in A/B/C/D)"
+  },
+  "73": {
+    "string": "C",
+    "description": "Label for the third answer choice from a multiple choice quiz (e.g. C in A/B/C/D)"
+  },
+  "74": {
+    "string": "D",
+    "description": "Label for the fourth answer choice from a multiple choice quiz (e.g. D in A/B/C/D)"
+  },
+  "75": {
+    "string": "Tip 1 of 2",
+    "description": "Label for a hint indicating progress on a multistep onboarding user education tutorial."
+  },
+  "76": {
+    "string": "Tap to go to the next screen",
+    "description": "Instruction on how to use the product, within an onboarding user education tutorial."
+  },
+  "77": {
+    "string": "Next",
+    "description": "Label for a button dismissing or advancing to the next step of an onboarding user education tutorial."
+  },
+  "78": {
+    "string": "Tip 2 of 2",
+    "description": "Label for a hint indicating progress on a multistep onboarding user education tutorial."
+  },
+  "79": {
+    "string": "Swipe to go to the next story",
+    "description": "Instruction on how to use the product, within an onboarding user education tutorial."
+  },
+  "80": {
+    "string": "Got it",
+    "description": "Label for a button dismissing or advancing to the next step of an onboarding user education tutorial."
+  },
+  "81": {
+    "string": "Tip",
+    "description": "Label for a hint in the context of an onboarding user education tutorial."
+  },
+  "82": {
+    "string": "Previous page",
+    "description": "Label indicating that users can navigate to the previous page."
+  },
+  "83": {
+    "string": "Activate",
+    "description": "Label for the activate button to ask for device orientation permission"
+  },
+  "84": {
+    "string": "SCORE:",
+    "description": "Label for the results component preceding the score in percentages"
+  },
+  "85": {
+    "string": "Pause story",
+    "description": "Label for a button that pauses the media content on the story"
+  },
+  "86": {
+    "string": "Play story",
+    "description": "Label for a button that plays the media content on the story"
+  },
+  "87": {
+    "string": "Close",
+    "description": "Label for a button that closes the full page experience and takes the user back to where they were originally"
+  },
+  "88": {
+    "string": "Skip next",
+    "description": "Label for a button that advances to the next element in the carousel"
+  },
+  "89": {
+    "string": "Your response will be sent to",
+    "description": "Text displayed to users after clicking a button that reveals a disclaimer, telling them more about where their user data will be stored, after they interact with a poll or quiz."
+  },
+  "90": {
+    "string": "Next story",
+    "description": "Label for a button that advances to the next element in the carousel."
+  },
+  "91": {
+    "string": "Next page",
+    "description": "Label for a button that advances to the next page of the story."
+  },
+  "92": {
+    "string": "Replay",
+    "description": "Label for a button that replays the story."
+  },
+  "93": {
+    "string": "Previous page",
+    "description": "Label for a button that returns the user to the previous page of the story."
+  },
+  "96": {
+    "string": "Move device to explore",
+    "description": "Text displayed to users on gyroscope activation of an amp-story-360 component, telling them to move their device to experience the gyroscope effect."
+  },
+  "97": {
+    "string": "Opening",
+    "description": "Text displayed to users on tap of outlink button."
+  }
+}
diff --git a/extensions/amp-story/1.0/_locales/es-419.js b/extensions/amp-story/1.0/_locales/es-419.js
deleted file mode 100644
index 02cc2ac07c86c..0000000000000
--- a/extensions/amp-story/1.0/_locales/es-419.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for es-419 strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Sonido desactivado',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Esta página no tiene sonido',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Sonido activado',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Más para leer',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Cambiar la configuración de privacidad de los datos',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Configuración de privacidad',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Aceptar',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Rechazar',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Continuar de todos modos',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Ver en el dominio original:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Más información sobre los resultados de AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Presiona Siguiente',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Presiona Atrás',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Deslizar el dedo hacia arriba',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Reproducir video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'No se pudo copiar el vínculo en el portapapeles :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Se copió el vínculo.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Correo electrónico',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Obtener vínculo',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Expandir tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Expande la altura de la ventana para ver esta experiencia',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Expande el ancho y la altura de la ventana para ver esta ' +
-      'experiencia',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Expande el ancho de la ventana para ver esta experiencia',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Debes habilitar el experimento de historia en formato AMP para ' +
-      'ver este contenido.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'La página está optimizada para verse en orientación vertical.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Parece que el navegador no es compatible con esta experiencia',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/es-419.json b/extensions/amp-story/1.0/_locales/es-419.json
new file mode 100644
index 0000000000000..4a9b3971fb3a9
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/es-419.json
@@ -0,0 +1,42 @@
+{
+  "2": {"string": "Presiona Siguiente"},
+  "3": {"string": "Presiona Atrás"},
+  "4": {"string": "No se pudo copiar el vínculo en el portapapeles :("},
+  "5": {"string": "Se copió el vínculo."},
+  "6": {"string": "Correo electrónico"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Obtener vínculo"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Expande el ancho y la altura de la ventana para ver esta experiencia"
+  },
+  "19": {
+    "string": "Debes habilitar el experimento de historia en formato AMP para ver este contenido."
+  },
+  "20": {
+    "string": "La página está optimizada para verse en orientación vertical."
+  },
+  "21": {
+    "string": "Parece que el navegador no es compatible con esta experiencia"
+  },
+  "22": {"string": "Aceptar"},
+  "23": {"string": "Rechazar"},
+  "25": {"string": "Ver en el dominio original:"},
+  "26": {"string": "Más información sobre los resultados de AMP"},
+  "27": {"string": "Continuar de todos modos"},
+  "31": {"string": "Sonido desactivado"},
+  "32": {"string": "Sonido activado"},
+  "33": {"string": "Esta página no tiene sonido"},
+  "34": {"string": "Reproducir video"},
+  "35": {"string": "Deslizar el dedo hacia arriba"},
+  "36": {"string": "Expandir tweet"},
+  "37": {"string": "Expande la altura de la ventana para ver esta experiencia"},
+  "38": {"string": "Expande el ancho de la ventana para ver esta experiencia"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/es.js b/extensions/amp-story/1.0/_locales/es.js
deleted file mode 100644
index f722d11e4036d..0000000000000
--- a/extensions/amp-story/1.0/_locales/es.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for es strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Sonido desactivado',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Esta página no tiene sonido',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Sonido activado',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Más lecturas',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Cambiar configuración de privacidad de datos',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Configuración de privacidad',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Aceptar',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Rechazar',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Continuar de todos modos',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Ver en dominio original:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Más información sobre los resultados de AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Toca Siguiente',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Toca Atrás',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Deslizar el dedo hacia arriba',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Reproducir vídeo',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'No se ha podido copiar el enlace en el portapapeles :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Se ha copiado el enlace.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Correo electrónico',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Obtener enlace',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Mostrar tuit',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Amplía el alto de la ventana para ver esta experiencia',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Amplía el alto y el ancho de la ventana para ver esta experiencia',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Amplía el ancho de la ventana para ver esta experiencia',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Para ver este contenido, debes habilitar el experimento de ' +
-      'historia AMP.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'La página se visualiza mejor en modo vertical',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Parece que este servicio no está disponible para tu navegador',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/es.json b/extensions/amp-story/1.0/_locales/es.json
new file mode 100644
index 0000000000000..3004076e35111
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/es.json
@@ -0,0 +1,40 @@
+{
+  "2": {"string": "Toca Siguiente"},
+  "3": {"string": "Toca Atrás"},
+  "4": {"string": "No se ha podido copiar el enlace en el portapapeles :("},
+  "5": {"string": "Se ha copiado el enlace."},
+  "6": {"string": "Correo electrónico"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Obtener enlace"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Amplía el alto y el ancho de la ventana para ver esta experiencia"
+  },
+  "19": {
+    "string": "Para ver este contenido, debes habilitar el experimento de historia AMP."
+  },
+  "20": {"string": "La página se visualiza mejor en modo vertical"},
+  "21": {
+    "string": "Parece que este servicio no está disponible para tu navegador"
+  },
+  "22": {"string": "Aceptar"},
+  "23": {"string": "Rechazar"},
+  "25": {"string": "Ver en dominio original:"},
+  "26": {"string": "Más información sobre los resultados de AMP"},
+  "27": {"string": "Continuar de todos modos"},
+  "31": {"string": "Sonido desactivado"},
+  "32": {"string": "Sonido activado"},
+  "33": {"string": "Esta página no tiene sonido"},
+  "34": {"string": "Reproducir vídeo"},
+  "35": {"string": "Deslizar el dedo hacia arriba"},
+  "36": {"string": "Mostrar tuit"},
+  "37": {"string": "Amplía el alto de la ventana para ver esta experiencia"},
+  "38": {"string": "Amplía el ancho de la ventana para ver esta experiencia"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/et.js b/extensions/amp-story/1.0/_locales/et.js
deleted file mode 100644
index f2c55feb523af..0000000000000
--- a/extensions/amp-story/1.0/_locales/et.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for et strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Heli on väljas',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Sellel lehel pole heli',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Heli on sees',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Rohkem lugemiseks',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Andmete privaatsuse seadete muutmine',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Privaatsusseaded',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Nõustu',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Keeldu',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Jätka ikkagi',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Kuva algsel domeenil:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Lisateave AMP tulemuste kohta',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Puudutage nuppu Järgmine',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Puudutage nuppu Tagasi',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Pühkige üles',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Esita video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Linki ei saanud lõikelauale kopeerida :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Link kopeeriti!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-post',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Hangi link',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Laienda säutsu',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Selle sisu vaatamiseks suurendage akna kõrgust',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Selle sisu vaatamiseks suurendage nii akna kõrgust kui ka laiust',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Selle kasutuskogemuse vaatamiseks suurendage akna laiust',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'Selle sisu vaatamiseks peate lubama AMP-loo katse.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Lehte on kõige parem vaadata vertikaalpaigutuses',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Kahjuks näib, et teie brauser ei toeta seda sisu',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/et.json b/extensions/amp-story/1.0/_locales/et.json
new file mode 100644
index 0000000000000..b62ade3c24675
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/et.json
@@ -0,0 +1,36 @@
+{
+  "2": {"string": "Puudutage nuppu Järgmine"},
+  "3": {"string": "Puudutage nuppu Tagasi"},
+  "4": {"string": "Linki ei saanud lõikelauale kopeerida :("},
+  "5": {"string": "Link kopeeriti!"},
+  "6": {"string": "E-post"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Hangi link"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Selle sisu vaatamiseks suurendage nii akna kõrgust kui ka laiust"
+  },
+  "19": {"string": "Selle sisu vaatamiseks peate lubama AMP-loo katse."},
+  "20": {"string": "Lehte on kõige parem vaadata vertikaalpaigutuses"},
+  "21": {"string": "Kahjuks näib, et teie brauser ei toeta seda sisu"},
+  "22": {"string": "Nõustu"},
+  "23": {"string": "Keeldu"},
+  "25": {"string": "Kuva algsel domeenil:"},
+  "26": {"string": "Lisateave AMP tulemuste kohta"},
+  "27": {"string": "Jätka ikkagi"},
+  "31": {"string": "Heli on väljas"},
+  "32": {"string": "Heli on sees"},
+  "33": {"string": "Sellel lehel pole heli"},
+  "34": {"string": "Esita video"},
+  "35": {"string": "Pühkige üles"},
+  "36": {"string": "Laienda säutsu"},
+  "37": {"string": "Selle sisu vaatamiseks suurendage akna kõrgust"},
+  "38": {"string": "Selle kasutuskogemuse vaatamiseks suurendage akna laiust"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/eu.js b/extensions/amp-story/1.0/_locales/eu.js
deleted file mode 100644
index 42e008ced9096..0000000000000
--- a/extensions/amp-story/1.0/_locales/eu.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for eu strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Desaktibatu da audioa',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Orriak ez du soinurik',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Audioa aktibatu da',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Erlazionatutako artikuluak',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Aldatu datuen pribatutasun-ezarpenak',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Pribatutasun-ezarpenak',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Onartu',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Baztertu',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Egin aurrera, halere',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Ikusi jatorrizko domeinuan:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Informazio gehiago AMP emaitzei buruz',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Sakatu Aurrera',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Sakatu Atzera',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Pasatu hatza gora',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Erreproduzitu bideoa',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Ezin izan da kopiatu esteka arbelean :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Kopiatu da esteka.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Posta elektronikoa',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Lortu esteka',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Zabaldu txioa',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Handitu leihoaren altuera istorioak ikusteko',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Handitu leihoaren altuera eta zabalera istorioak ikusteko',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Handitu leihoaren zabalera istorioak ikusteko',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'Eduki hau ikusteko, AMP istorioen proba gaitu behar duzu.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Bertikalean ikusteko dago prestatuta orria',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Arakatzaile honek ez du onartzen proba hori',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/eu.json b/extensions/amp-story/1.0/_locales/eu.json
new file mode 100644
index 0000000000000..83c3bfa824162
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/eu.json
@@ -0,0 +1,34 @@
+{
+  "2": {"string": "Sakatu Aurrera"},
+  "3": {"string": "Sakatu Atzera"},
+  "4": {"string": "Ezin izan da kopiatu esteka arbelean :("},
+  "5": {"string": "Kopiatu da esteka."},
+  "6": {"string": "Posta elektronikoa"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Lortu esteka"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "Handitu leihoaren altuera eta zabalera istorioak ikusteko"},
+  "19": {"string": "Eduki hau ikusteko, AMP istorioen proba gaitu behar duzu."},
+  "20": {"string": "Bertikalean ikusteko dago prestatuta orria"},
+  "21": {"string": "Arakatzaile honek ez du onartzen proba hori"},
+  "22": {"string": "Onartu"},
+  "23": {"string": "Baztertu"},
+  "25": {"string": "Ikusi jatorrizko domeinuan:"},
+  "26": {"string": "Informazio gehiago AMP emaitzei buruz"},
+  "27": {"string": "Egin aurrera, halere"},
+  "31": {"string": "Desaktibatu da audioa"},
+  "32": {"string": "Audioa aktibatu da"},
+  "33": {"string": "Orriak ez du soinurik"},
+  "34": {"string": "Erreproduzitu bideoa"},
+  "35": {"string": "Pasatu hatza gora"},
+  "36": {"string": "Zabaldu txioa"},
+  "37": {"string": "Handitu leihoaren altuera istorioak ikusteko"},
+  "38": {"string": "Handitu leihoaren zabalera istorioak ikusteko"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/fa.js b/extensions/amp-story/1.0/_locales/fa.js
deleted file mode 100644
index 3b45505030fbe..0000000000000
--- a/extensions/amp-story/1.0/_locales/fa.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for fa strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'صدا خاموش است',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'این صفحه صدا ندارد',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'صدا روشن است',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'موارد بیشتر برای خواندن',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'تغییر تنظیمات حریم خصوصی داده‌ها',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'تنظیمات حریم خصوصی',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'پذیرش',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'نپذیرفتن',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'ادامه درهر صورت',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'مشاهده در دامنه اصلی:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'اطلاعات بیشتر درباره نتایج AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'روی «بعدی» ضربه بزنید',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'روی «برگشت» ضربه بزنید',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'تند کشیدن به بالا',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'پخش ویدیو',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'پیوند در بریده‌دان کپی نشد :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'پیوند کپی شد!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ایمیل',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+‎',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'دریافت پیوند',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'پیامک',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'بزرگ کردن Tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'برای مشاهده این تجربه، ارتفاع پنجره‌تان را افزایش دهید.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'برای مشاهده این تجربه، عرض و ارتفاع پنجره را افزایش دهید',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'برای مشاهده این تجربه، عرض صفحه را افزایش دهید',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'برای دیدن این محتوا، باید آزمایش داستان amp را فعال کنید.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'این صفحه درحالت چهره بهتر دیده می‌شود',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'متأسفیم، به‌نظر می‌رسد مرورگرتان این تجربه را پشتیبانی نمی‌کند',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/fa.json b/extensions/amp-story/1.0/_locales/fa.json
new file mode 100644
index 0000000000000..cbda198942fdb
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/fa.json
@@ -0,0 +1,36 @@
+{
+  "2": {"string": "روی «بعدی» ضربه بزنید"},
+  "3": {"string": "روی «برگشت» ضربه بزنید"},
+  "4": {"string": "پیوند در بریده‌دان کپی نشد :("},
+  "5": {"string": "پیوند کپی شد!"},
+  "6": {"string": "ایمیل"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+‎"},
+  "9": {"string": "دریافت پیوند"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "پیامک"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "برای مشاهده این تجربه، عرض و ارتفاع پنجره را افزایش دهید"},
+  "19": {"string": "برای دیدن این محتوا، باید آزمایش داستان amp را فعال کنید."},
+  "20": {"string": "این صفحه درحالت چهره بهتر دیده می‌شود"},
+  "21": {
+    "string": "متأسفیم، به‌نظر می‌رسد مرورگرتان این تجربه را پشتیبانی نمی‌کند"
+  },
+  "22": {"string": "پذیرش"},
+  "23": {"string": "نپذیرفتن"},
+  "25": {"string": "مشاهده در دامنه اصلی:"},
+  "26": {"string": "اطلاعات بیشتر درباره نتایج AMP"},
+  "27": {"string": "ادامه درهر صورت"},
+  "31": {"string": "صدا خاموش است"},
+  "32": {"string": "صدا روشن است"},
+  "33": {"string": "این صفحه صدا ندارد"},
+  "34": {"string": "پخش ویدیو"},
+  "35": {"string": "تند کشیدن به بالا"},
+  "36": {"string": "بزرگ کردن Tweet"},
+  "37": {"string": "برای مشاهده این تجربه، ارتفاع پنجره‌تان را افزایش دهید."},
+  "38": {"string": "برای مشاهده این تجربه، عرض صفحه را افزایش دهید"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/fi.js b/extensions/amp-story/1.0/_locales/fi.js
deleted file mode 100644
index bb977472a5db7..0000000000000
--- a/extensions/amp-story/1.0/_locales/fi.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for fi strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Äänet pois käytöstä',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Sivulla ei ole ääntä',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Äänet käytössä',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Lisää luettavaa',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Muuta tietosuoja-asetuksia',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Tietosuoja-asetukset',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Hyväksy',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Hylkää',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Jatka silti',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Näytä alkuperäisessä verkkotunnuksessa:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Lisätietoja AMP-tuloksista',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Valitse Seuraava',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Valitse Takaisin',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Pyyhkäise ylös',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Toista video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Linkkiä ei voitu kopioida leikepöydälle :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Linkki kopioitu',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Sähköposti',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Hae linkki',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'Tekstiviesti',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Laajenna twiitti',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Lisää ikkunan korkeutta, jos haluat katsella tätä',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Lisää ikkunan korkeutta ja leveyttä, jos haluat katsella tätä',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Lisää ikkunan leveyttä, jos haluat katsella tätä',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'AMP-tarinakokeilu on otettava käyttöön tämän sisällön näkemiseksi.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Sivu toimii parhaiten muotokuvatilassa',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Valitettavasti selaimesi ei tue tätä ominaisuutta',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/fi.json b/extensions/amp-story/1.0/_locales/fi.json
new file mode 100644
index 0000000000000..ab069dcd2add4
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/fi.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "Valitse Seuraava"},
+  "3": {"string": "Valitse Takaisin"},
+  "4": {"string": "Linkkiä ei voitu kopioida leikepöydälle :("},
+  "5": {"string": "Linkki kopioitu"},
+  "6": {"string": "Sähköposti"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Hae linkki"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "Tekstiviesti"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Lisää ikkunan korkeutta ja leveyttä, jos haluat katsella tätä"
+  },
+  "19": {
+    "string": "AMP-tarinakokeilu on otettava käyttöön tämän sisällön näkemiseksi."
+  },
+  "20": {"string": "Sivu toimii parhaiten muotokuvatilassa"},
+  "21": {"string": "Valitettavasti selaimesi ei tue tätä ominaisuutta"},
+  "22": {"string": "Hyväksy"},
+  "23": {"string": "Hylkää"},
+  "25": {"string": "Näytä alkuperäisessä verkkotunnuksessa:"},
+  "26": {"string": "Lisätietoja AMP-tuloksista"},
+  "27": {"string": "Jatka silti"},
+  "31": {"string": "Äänet pois käytöstä"},
+  "32": {"string": "Äänet käytössä"},
+  "33": {"string": "Sivulla ei ole ääntä"},
+  "34": {"string": "Toista video"},
+  "35": {"string": "Pyyhkäise ylös"},
+  "36": {"string": "Laajenna twiitti"},
+  "37": {"string": "Lisää ikkunan korkeutta, jos haluat katsella tätä"},
+  "38": {"string": "Lisää ikkunan leveyttä, jos haluat katsella tätä"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/fil.js b/extensions/amp-story/1.0/_locales/fil.js
deleted file mode 100644
index 296d8d07f37b6..0000000000000
--- a/extensions/amp-story/1.0/_locales/fil.js
+++ /dev/null
@@ -1,140 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for fil strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'I-off ang tunog',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Walang tunog ang page na ito',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'I-on ang tunog',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Higit pang babasahin',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Baguhin ang mga setting ng privacy ng data',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Mga setting ng privacy',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Tanggapin',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Tanggihan',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Magpatuloy Pa Rin',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Tingnan sa orihinal na domain:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Higit pa tungkol sa mga resulta ng AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'I-tap ang Susunod',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'I-tap ang Bumalik',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Mag-swipe pataas',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'I-play ang video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Hindi makopya sa clipboard ang link :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Nakopya ang link!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Email',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Kunin ang Link',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'I-expand ang Tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Palawakin ang taas ng iyong window para makita ang karanasang ito',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Palawakin ang parehong taas at lapad ng iyong window para ' +
-      'tingnan ang karanasang ito',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string:
-      'Palawakin ang lapad ng iyong window para makita ang karanasang ito',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Kailangan mong i-enable ang amp-story experiment para makita ' +
-      'ang content na ito.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Pinakamahusay na tingnan ang page na ito sa portrait mode',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'Ikinalulungkot namin, mukhang hindi sinusuportahan ng iyong ' +
-      'browser ang karanasang ito',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/fil.json b/extensions/amp-story/1.0/_locales/fil.json
new file mode 100644
index 0000000000000..bf04fdc77bdb4
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/fil.json
@@ -0,0 +1,44 @@
+{
+  "2": {"string": "I-tap ang Susunod"},
+  "3": {"string": "I-tap ang Bumalik"},
+  "4": {"string": "Hindi makopya sa clipboard ang link :("},
+  "5": {"string": "Nakopya ang link!"},
+  "6": {"string": "Email"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Kunin ang Link"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Palawakin ang parehong taas at lapad ng iyong window para tingnan ang karanasang ito"
+  },
+  "19": {
+    "string": "Kailangan mong i-enable ang amp-story experiment para makita ang content na ito."
+  },
+  "20": {"string": "Pinakamahusay na tingnan ang page na ito sa portrait mode"},
+  "21": {
+    "string": "Ikinalulungkot namin, mukhang hindi sinusuportahan ng iyong browser ang karanasang ito"
+  },
+  "22": {"string": "Tanggapin"},
+  "23": {"string": "Tanggihan"},
+  "25": {"string": "Tingnan sa orihinal na domain:"},
+  "26": {"string": "Higit pa tungkol sa mga resulta ng AMP"},
+  "27": {"string": "Magpatuloy Pa Rin"},
+  "31": {"string": "I-off ang tunog"},
+  "32": {"string": "I-on ang tunog"},
+  "33": {"string": "Walang tunog ang page na ito"},
+  "34": {"string": "I-play ang video"},
+  "35": {"string": "Mag-swipe pataas"},
+  "36": {"string": "I-expand ang Tweet"},
+  "37": {
+    "string": "Palawakin ang taas ng iyong window para makita ang karanasang ito"
+  },
+  "38": {
+    "string": "Palawakin ang lapad ng iyong window para makita ang karanasang ito"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/fr.js b/extensions/amp-story/1.0/_locales/fr.js
deleted file mode 100644
index 2cd1bb9ed9595..0000000000000
--- a/extensions/amp-story/1.0/_locales/fr.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for fr strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Son désactivé',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: "Cette page n'a pas de son",
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Son activé',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Autres articles à lire',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Modifier les paramètres de confidentialité des données',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Paramètres de confidentialité',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Accepter',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Refuser',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Continuer quand même',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: "Afficher sur le domaine d'origine :",
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'En savoir plus sur les résultats AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Appuyer sur Suivant',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Appuyer sur Retour',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: "Balayer l'écran vers le haut",
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Regarder la vidéo',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Impossible de copier le lien dans le presse-papiers :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Lien copié.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-mail',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Obtenir le lien',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Développer le tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Augmentez la hauteur de votre fenêtre pour voir cette expérience',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Modifiez la hauteur et la largeur de la fenêtre pour voir cette ' +
-      'expérience',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Élargissez la fenêtre pour voir cette expérience',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: "Vous devez activer l'expérience story AMP pour voir ce contenu.",
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: "La page s'affiche mieux en mode Portrait",
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      "Nous sommes désolés, mais votre navigateur n'est pas " +
-      'compatible avec cette expérience',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/fr.json b/extensions/amp-story/1.0/_locales/fr.json
new file mode 100644
index 0000000000000..12fd615e058c5
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/fr.json
@@ -0,0 +1,42 @@
+{
+  "2": {"string": "Appuyer sur Suivant"},
+  "3": {"string": "Appuyer sur Retour"},
+  "4": {"string": "Impossible de copier le lien dans le presse-papiers :("},
+  "5": {"string": "Lien copié."},
+  "6": {"string": "E-mail"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Obtenir le lien"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Modifiez la hauteur et la largeur de la fenêtre pour voir cette expérience"
+  },
+  "19": {
+    "string": "Vous devez activer l'expérience story AMP pour voir ce contenu."
+  },
+  "20": {"string": "La page s'affiche mieux en mode Portrait"},
+  "21": {
+    "string": "Nous sommes désolés, mais votre navigateur n'est pas compatible avec cette expérience"
+  },
+  "22": {"string": "Accepter"},
+  "23": {"string": "Refuser"},
+  "25": {"string": "Afficher sur le domaine d'origine :"},
+  "26": {"string": "En savoir plus sur les résultats AMP"},
+  "27": {"string": "Continuer quand même"},
+  "31": {"string": "Son désactivé"},
+  "32": {"string": "Son activé"},
+  "33": {"string": "Cette page n'a pas de son"},
+  "34": {"string": "Regarder la vidéo"},
+  "35": {"string": "Balayer l'écran vers le haut"},
+  "36": {"string": "Développer le tweet"},
+  "37": {
+    "string": "Augmentez la hauteur de votre fenêtre pour voir cette expérience"
+  },
+  "38": {"string": "Élargissez la fenêtre pour voir cette expérience"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/gl.js b/extensions/amp-story/1.0/_locales/gl.js
deleted file mode 100644
index be0a18f57b5fd..0000000000000
--- a/extensions/amp-story/1.0/_locales/gl.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for gl strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Son desactivado',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Esta páxina non ten son',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Son activado',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Máis artigos para ler',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Cambiar configuración de privacidade dos datos',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Configuración de privacidade',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Aceptar',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Rexeitar',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Continuar igualmente',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Ver a historia no dominio orixinal:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Máis información sobre os resultados de AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Toca Seguinte',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Toca Anterior',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Pasar o dedo cara arriba',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Reproducir vídeo',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Non se puido copiar a ligazón no portapapeis :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Copiouse a ligazón.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Correo electrónico',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Obter ligazón',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Despregar chío',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Amplía a altura da ventá para ver esta experiencia',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Amplía a altura e a largura da ventá para ver esta experiencia',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Amplía a largura da ventá para ver esta experiencia',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Debes activar o experimento da historia AMP para ver este contido.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'A páxina vese mellor no modo retrato',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Parece que o teu navegador non admite esta experiencia',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/gl.json b/extensions/amp-story/1.0/_locales/gl.json
new file mode 100644
index 0000000000000..458b16d956930
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/gl.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "Toca Seguinte"},
+  "3": {"string": "Toca Anterior"},
+  "4": {"string": "Non se puido copiar a ligazón no portapapeis :("},
+  "5": {"string": "Copiouse a ligazón."},
+  "6": {"string": "Correo electrónico"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Obter ligazón"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Amplía a altura e a largura da ventá para ver esta experiencia"
+  },
+  "19": {
+    "string": "Debes activar o experimento da historia AMP para ver este contido."
+  },
+  "20": {"string": "A páxina vese mellor no modo retrato"},
+  "21": {"string": "Parece que o teu navegador non admite esta experiencia"},
+  "22": {"string": "Aceptar"},
+  "23": {"string": "Rexeitar"},
+  "25": {"string": "Ver a historia no dominio orixinal:"},
+  "26": {"string": "Máis información sobre os resultados de AMP"},
+  "27": {"string": "Continuar igualmente"},
+  "31": {"string": "Son desactivado"},
+  "32": {"string": "Son activado"},
+  "33": {"string": "Esta páxina non ten son"},
+  "34": {"string": "Reproducir vídeo"},
+  "35": {"string": "Pasar o dedo cara arriba"},
+  "36": {"string": "Despregar chío"},
+  "37": {"string": "Amplía a altura da ventá para ver esta experiencia"},
+  "38": {"string": "Amplía a largura da ventá para ver esta experiencia"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/gu.js b/extensions/amp-story/1.0/_locales/gu.js
deleted file mode 100644
index f0bb24d254933..0000000000000
--- a/extensions/amp-story/1.0/_locales/gu.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for gu strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'સાઉન્ડ બંધ છે',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'આ પેજમાં કોઈ સાઉન્ડ નથી',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'સાઉન્ડ ચાલુ છે',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'વધુ વાંચવા માટે',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'ડેટા પ્રાઇવસી સેટિંગ બદલો',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'પ્રાઇવસી સેટિંગ',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'સ્વીકારો',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'નકારો',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'કોઈપણ રીતે ચાલુ રાખો',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'ઑરિજિનલ ડોમેન પર જુઓ:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP પરિણામો વિશે વધુ જાણકારી',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'આગળ પર ટૅપ કરો',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'પાછળ પર ટૅપ કરો',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'ઉપર સ્વાઇપ કરો',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'વીડિયો ચલાવો',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'લિંકને ક્લિપબોર્ડ પર કૉપિ કરી શકતાં નથી :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'લિંક કૉપિ કરી!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ઇમેઇલ મોકલો',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'લિંક મેળવો',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ટ્વિટ મોટી કરો',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'આ અનુભવ જોવા માટે તમારી વિંડોની ઊંચાઈ વધારો',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'આ અનુભવને જોવા માટે તમારી વિંડોની ઊંચાઈ અને પહોળાઈ વધારો',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'આ અનુભવ જોવા માટે તમારી વિંડોની પહોળાઈ વધારો',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'જો તમારે આ કન્ટેન્ટ જોવું હોય, તો તમારે AMP સ્ટોરીનો અનુભવ ચાલુ ' +
-      'કરવો પડશે.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'આ પેજને પોર્ટ્રેટ મોડમાં જોવાથી શ્રેષ્ઠ દેખાય છે',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'માફ કરશો, એવું લાગે છે કે તમારા બ્રાઉઝરમાં આ અનુભવની સુવિધા નથી',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/gu.json b/extensions/amp-story/1.0/_locales/gu.json
new file mode 100644
index 0000000000000..d5006cfd04bd6
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/gu.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "આગળ પર ટૅપ કરો"},
+  "3": {"string": "પાછળ પર ટૅપ કરો"},
+  "4": {"string": "લિંકને ક્લિપબોર્ડ પર કૉપિ કરી શકતાં નથી :("},
+  "5": {"string": "લિંક કૉપિ કરી!"},
+  "6": {"string": "ઇમેઇલ મોકલો"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "લિંક મેળવો"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "આ અનુભવને જોવા માટે તમારી વિંડોની ઊંચાઈ અને પહોળાઈ વધારો"},
+  "19": {
+    "string": "જો તમારે આ કન્ટેન્ટ જોવું હોય, તો તમારે AMP સ્ટોરીનો અનુભવ ચાલુ કરવો પડશે."
+  },
+  "20": {"string": "આ પેજને પોર્ટ્રેટ મોડમાં જોવાથી શ્રેષ્ઠ દેખાય છે"},
+  "21": {
+    "string": "માફ કરશો, એવું લાગે છે કે તમારા બ્રાઉઝરમાં આ અનુભવની સુવિધા નથી"
+  },
+  "22": {"string": "સ્વીકારો"},
+  "23": {"string": "નકારો"},
+  "25": {"string": "ઑરિજિનલ ડોમેન પર જુઓ:"},
+  "26": {"string": "AMP પરિણામો વિશે વધુ જાણકારી"},
+  "27": {"string": "કોઈપણ રીતે ચાલુ રાખો"},
+  "31": {"string": "સાઉન્ડ બંધ છે"},
+  "32": {"string": "સાઉન્ડ ચાલુ છે"},
+  "33": {"string": "આ પેજમાં કોઈ સાઉન્ડ નથી"},
+  "34": {"string": "વીડિયો ચલાવો"},
+  "35": {"string": "ઉપર સ્વાઇપ કરો"},
+  "36": {"string": "ટ્વિટ મોટી કરો"},
+  "37": {"string": "આ અનુભવ જોવા માટે તમારી વિંડોની ઊંચાઈ વધારો"},
+  "38": {"string": "આ અનુભવ જોવા માટે તમારી વિંડોની પહોળાઈ વધારો"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/hi.js b/extensions/amp-story/1.0/_locales/hi.js
deleted file mode 100644
index fc4944032926c..0000000000000
--- a/extensions/amp-story/1.0/_locales/hi.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for hi strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'आवाज़ बंद है',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'इस पेज में कोई आवाज़ नहीं है',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'आवाज़ चालू है',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'ये भी पढ़ें',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'डेटा की निजता सेटिंग बदलें',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'निजता सेटिंग',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'स्वीकार करें',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'अस्वीकार करें',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'फिर भी जारी रखें',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'मूल डोमेन पर देखें:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'एएमपी नतीजों के बारे में ज़्यादा जानें',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: "'अगला' पर टैप करें",
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: "'वापस जाएं' पर टैप करें",
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'ऊपर की ओर स्वाइप करें',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'वीडियो चलाएं',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'लिंक क्लिपबोर्ड पर कॉपी नहीं किया जा सका :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'लिंक कॉपी किया गया!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ईमेल',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'लिंक पाएं',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'मैसेज (एसएमएस)',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ट्वीट को बड़ा करके देखें',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'इस वर्शन को देखने के लिए अपनी विंडो की लंबाई बढ़ाएं',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'यह वर्शन देखने के लिए अपनी विंडो की लंबाई और चौड़ाई, दोनों को ' +
-      'बढ़ाएं',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'यह वर्शन देखने के लिए अपनी विंडो की चौड़ाई बढ़ाएं',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'यह सामग्री देखने के लिए आपको एएमपी-कहानी की परफ़ॉर्मेंस जाँच ' +
-      'चालू करनी होगी.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'यह पेज पोर्ट्रेट मोड में सबसे अच्छा दिखाई देता है',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'माफ़ करें, लगता है कि आपका ब्राउज़र इस वर्शन पर काम नहीं करता',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/hi.json b/extensions/amp-story/1.0/_locales/hi.json
new file mode 100644
index 0000000000000..37e065052f068
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/hi.json
@@ -0,0 +1,40 @@
+{
+  "2": {"string": "'अगला' पर टैप करें"},
+  "3": {"string": "'वापस जाएं' पर टैप करें"},
+  "4": {"string": "लिंक क्लिपबोर्ड पर कॉपी नहीं किया जा सका :("},
+  "5": {"string": "लिंक कॉपी किया गया!"},
+  "6": {"string": "ईमेल"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "लिंक पाएं"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "मैसेज (एसएमएस)"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "यह वर्शन देखने के लिए अपनी विंडो की लंबाई और चौड़ाई, दोनों को बढ़ाएं"
+  },
+  "19": {
+    "string": "यह सामग्री देखने के लिए आपको एएमपी-कहानी की परफ़ॉर्मेंस जाँच चालू करनी होगी."
+  },
+  "20": {"string": "यह पेज पोर्ट्रेट मोड में सबसे अच्छा दिखाई देता है"},
+  "21": {
+    "string": "माफ़ करें, लगता है कि आपका ब्राउज़र इस वर्शन पर काम नहीं करता"
+  },
+  "22": {"string": "स्वीकार करें"},
+  "23": {"string": "अस्वीकार करें"},
+  "25": {"string": "मूल डोमेन पर देखें:"},
+  "26": {"string": "एएमपी नतीजों के बारे में ज़्यादा जानें"},
+  "27": {"string": "फिर भी जारी रखें"},
+  "31": {"string": "आवाज़ बंद है"},
+  "32": {"string": "आवाज़ चालू है"},
+  "33": {"string": "इस पेज में कोई आवाज़ नहीं है"},
+  "34": {"string": "वीडियो चलाएं"},
+  "35": {"string": "ऊपर की ओर स्वाइप करें"},
+  "36": {"string": "ट्वीट को बड़ा करके देखें"},
+  "37": {"string": "इस वर्शन को देखने के लिए अपनी विंडो की लंबाई बढ़ाएं"},
+  "38": {"string": "यह वर्शन देखने के लिए अपनी विंडो की चौड़ाई बढ़ाएं"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/hr.js b/extensions/amp-story/1.0/_locales/hr.js
deleted file mode 100644
index 36a470b50d0eb..0000000000000
--- a/extensions/amp-story/1.0/_locales/hr.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for hr strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Zvuk isključen',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Ova stranica nema zvuk',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Zvuk uključen',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Više za čitanje',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Promijenite postavke privatnosti za podatke',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Postavke privatnosti',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Prihvaćam',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Odbij',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Ipak nastavi',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Pregledajte na izvornoj domeni:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Više o AMP rezultatima',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Dodirnite Dalje',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Dodirnite Natrag',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Prijeđite prstom prema gore',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Reproduciraj videozapis',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Veza se ne može kopirati u međuspremnik :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Veza je kopirana!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-pošta',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Dohvati vezu',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Proširi tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Povećajte prozor u visinu da biste vidjeli taj sadržaj',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Povećajte prozor u visinu i širinu da biste vidjeli taj sadržaj',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Povećajte prozor u širinu da biste vidjeli taj sadržaj',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Morate omogućiti eksperiment AMP priča da biste mogli vidjeti ' +
-      'taj sadržaj.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Najbolje je pregledavati stranicu u portretnom načinu',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Izgleda da vaš preglednik ne podržava tu značajku',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/hr.json b/extensions/amp-story/1.0/_locales/hr.json
new file mode 100644
index 0000000000000..f523bf38f4ab0
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/hr.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "Dodirnite Dalje"},
+  "3": {"string": "Dodirnite Natrag"},
+  "4": {"string": "Veza se ne može kopirati u međuspremnik :("},
+  "5": {"string": "Veza je kopirana!"},
+  "6": {"string": "E-pošta"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Dohvati vezu"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Povećajte prozor u visinu i širinu da biste vidjeli taj sadržaj"
+  },
+  "19": {
+    "string": "Morate omogućiti eksperiment AMP priča da biste mogli vidjeti taj sadržaj."
+  },
+  "20": {"string": "Najbolje je pregledavati stranicu u portretnom načinu"},
+  "21": {"string": "Izgleda da vaš preglednik ne podržava tu značajku"},
+  "22": {"string": "Prihvaćam"},
+  "23": {"string": "Odbij"},
+  "25": {"string": "Pregledajte na izvornoj domeni:"},
+  "26": {"string": "Više o AMP rezultatima"},
+  "27": {"string": "Ipak nastavi"},
+  "31": {"string": "Zvuk isključen"},
+  "32": {"string": "Zvuk uključen"},
+  "33": {"string": "Ova stranica nema zvuk"},
+  "34": {"string": "Reproduciraj videozapis"},
+  "35": {"string": "Prijeđite prstom prema gore"},
+  "36": {"string": "Proširi tweet"},
+  "37": {"string": "Povećajte prozor u visinu da biste vidjeli taj sadržaj"},
+  "38": {"string": "Povećajte prozor u širinu da biste vidjeli taj sadržaj"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/hu.js b/extensions/amp-story/1.0/_locales/hu.js
deleted file mode 100644
index cabbc7412bd18..0000000000000
--- a/extensions/amp-story/1.0/_locales/hu.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for hu strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Hang kikapcsolva',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Ennek az oldalnak nincs hangja',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Hang bekapcsolva',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'További információ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Adatvédelmi beállítások módosítása',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Adatvédelmi beállítások',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Elfogadás',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Elutasítás',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Folytatás ettől függetlenül',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Megtekintés az eredeti domainen:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'További információ az AMP-találatokról',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Koppintson a Tovább elemre',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Koppintson a Vissza elemre',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Csúsztatás felfelé',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Videó lejátszása',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Nem sikerült a linket a vágólapra másolni :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Link vágólapra másolva',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-mail',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Link mutatása',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Twitter-üzenet kibontása',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'A sztori megtekintéséhez növelje az ablak magasságát',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'A sztori megtekintéséhez növelje az ablak magasságát és ' +
-      'szélességét is',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'A sztori megtekintéséhez növelje az ablak szélességét',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'A tartalom megtekintéséhez engedélyeznie kell az AMP-sztori ' +
-      'kísérletet.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'A legjobb élmény érdekében álló tájolással tekintse meg az oldalt',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Sajnos úgy tűnik, a böngészője nem támogatja ezt a funkciót',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/hu.json b/extensions/amp-story/1.0/_locales/hu.json
new file mode 100644
index 0000000000000..f67e7f785a9f0
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/hu.json
@@ -0,0 +1,42 @@
+{
+  "2": {"string": "Koppintson a Tovább elemre"},
+  "3": {"string": "Koppintson a Vissza elemre"},
+  "4": {"string": "Nem sikerült a linket a vágólapra másolni :("},
+  "5": {"string": "Link vágólapra másolva"},
+  "6": {"string": "E-mail"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Link mutatása"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "A sztori megtekintéséhez növelje az ablak magasságát és szélességét is"
+  },
+  "19": {
+    "string": "A tartalom megtekintéséhez engedélyeznie kell az AMP-sztori kísérletet."
+  },
+  "20": {
+    "string": "A legjobb élmény érdekében álló tájolással tekintse meg az oldalt"
+  },
+  "21": {
+    "string": "Sajnos úgy tűnik, a böngészője nem támogatja ezt a funkciót"
+  },
+  "22": {"string": "Elfogadás"},
+  "23": {"string": "Elutasítás"},
+  "25": {"string": "Megtekintés az eredeti domainen:"},
+  "26": {"string": "További információ az AMP-találatokról"},
+  "27": {"string": "Folytatás ettől függetlenül"},
+  "31": {"string": "Hang kikapcsolva"},
+  "32": {"string": "Hang bekapcsolva"},
+  "33": {"string": "Ennek az oldalnak nincs hangja"},
+  "34": {"string": "Videó lejátszása"},
+  "35": {"string": "Csúsztatás felfelé"},
+  "36": {"string": "Twitter-üzenet kibontása"},
+  "37": {"string": "A sztori megtekintéséhez növelje az ablak magasságát"},
+  "38": {"string": "A sztori megtekintéséhez növelje az ablak szélességét"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/id.js b/extensions/amp-story/1.0/_locales/id.js
deleted file mode 100644
index d7ceeaf4587e9..0000000000000
--- a/extensions/amp-story/1.0/_locales/id.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for id strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Suara nonaktif',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Suara tidak aktif di halaman ini',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Suara aktif',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Artikel lain untuk dibaca',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Ubah setelan privasi data',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Setelan privasi',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Setuju',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Tolak',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Tetap Lanjutkan',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Lihat di domain asal:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Lebih lanjut tentang hasil AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Tap Berikutnya',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Tap Kembali.',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Geser ke atas',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Putar video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Tidak dapat menyalin link ke papan klip :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Link disalin!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Email',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Dapatkan Link',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Luaskan Tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Luaskan tinggi jendela untuk menampilkan pengalaman ini',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Luaskan tinggi dan lebar jendela untuk menampilkan pengalaman ini',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Luaskan lebar jendela untuk menampilkan pengalaman ini',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Anda harus mengaktifkan eksperimen cerita AMP untuk melihat ' +
-      'konten ini.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Halaman ini ditampilkan paling baik dalam mode potret',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Maaf, sepertinya browser Anda tidak mendukung pengalaman ini',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/id.json b/extensions/amp-story/1.0/_locales/id.json
new file mode 100644
index 0000000000000..ede26d3297c48
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/id.json
@@ -0,0 +1,40 @@
+{
+  "2": {"string": "Tap Berikutnya"},
+  "3": {"string": "Tap Kembali."},
+  "4": {"string": "Tidak dapat menyalin link ke papan klip :("},
+  "5": {"string": "Link disalin!"},
+  "6": {"string": "Email"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Dapatkan Link"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Luaskan tinggi dan lebar jendela untuk menampilkan pengalaman ini"
+  },
+  "19": {
+    "string": "Anda harus mengaktifkan eksperimen cerita AMP untuk melihat konten ini."
+  },
+  "20": {"string": "Halaman ini ditampilkan paling baik dalam mode potret"},
+  "21": {
+    "string": "Maaf, sepertinya browser Anda tidak mendukung pengalaman ini"
+  },
+  "22": {"string": "Setuju"},
+  "23": {"string": "Tolak"},
+  "25": {"string": "Lihat di domain asal:"},
+  "26": {"string": "Lebih lanjut tentang hasil AMP"},
+  "27": {"string": "Tetap Lanjutkan"},
+  "31": {"string": "Suara nonaktif"},
+  "32": {"string": "Suara aktif"},
+  "33": {"string": "Suara tidak aktif di halaman ini"},
+  "34": {"string": "Putar video"},
+  "35": {"string": "Geser ke atas"},
+  "36": {"string": "Luaskan Tweet"},
+  "37": {"string": "Luaskan tinggi jendela untuk menampilkan pengalaman ini"},
+  "38": {"string": "Luaskan lebar jendela untuk menampilkan pengalaman ini"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/index.js b/extensions/amp-story/1.0/_locales/index.js
new file mode 100644
index 0000000000000..b923888269e50
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/index.js
@@ -0,0 +1,161 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import LocalizedStringaf from './af.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringam from './am.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringar from './ar.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringbg from './bg.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringbn from './bn.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringbs from './bs.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringca from './ca.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringcs from './cs.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringda from './da.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringde from './de.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringdefault from './default.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringel from './el.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringen from './en.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringenGB from './en-GB.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringes from './es.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringes419 from './es-419.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringet from './et.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringeu from './eu.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringfa from './fa.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringfi from './fi.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringfil from './fil.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringfr from './fr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringgl from './gl.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringgu from './gu.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringhi from './hi.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringhr from './hr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringhu from './hu.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringid from './id.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringis from './is.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringit from './it.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringiw from './iw.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringja from './ja.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringka from './ka.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringkm from './km.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringkn from './kn.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringko from './ko.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringlo from './lo.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringlt from './lt.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringlv from './lv.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringmk from './mk.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringml from './ml.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringmn from './mn.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringmr from './mr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringms from './ms.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringmy from './my.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringne from './ne.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringnl from './nl.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringno from './no.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringpa from './pa.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringpl from './pl.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringptBR from './pt-BR.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringptPT from './pt-PT.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringro from './ro.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringru from './ru.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsi from './si.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsk from './sk.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsl from './sl.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsq from './sq.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsr from './sr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsv from './sv.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsw from './sw.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringta from './ta.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringte from './te.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringth from './th.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringtr from './tr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringuk from './uk.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringur from './ur.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringvi from './vi.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringzhCN from './zh-CN.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringzhTW from './zh-TW.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringzu from './zu.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+
+export default [
+  {LocalizedStringaf},
+  {LocalizedStringam},
+  {LocalizedStringar},
+  {LocalizedStringbg},
+  {LocalizedStringbn},
+  {LocalizedStringbs},
+  {LocalizedStringca},
+  {LocalizedStringcs},
+  {LocalizedStringda},
+  {LocalizedStringde},
+  {LocalizedStringdefault},
+  {LocalizedStringel},
+  {LocalizedStringen},
+  {LocalizedStringenGB},
+  {LocalizedStringes},
+  {LocalizedStringes419},
+  {LocalizedStringet},
+  {LocalizedStringeu},
+  {LocalizedStringfa},
+  {LocalizedStringfi},
+  {LocalizedStringfil},
+  {LocalizedStringfr},
+  {LocalizedStringgl},
+  {LocalizedStringgu},
+  {LocalizedStringhi},
+  {LocalizedStringhr},
+  {LocalizedStringhu},
+  {LocalizedStringid},
+  {LocalizedStringis},
+  {LocalizedStringit},
+  {LocalizedStringiw},
+  {LocalizedStringja},
+  {LocalizedStringka},
+  {LocalizedStringkm},
+  {LocalizedStringkn},
+  {LocalizedStringko},
+  {LocalizedStringlo},
+  {LocalizedStringlt},
+  {LocalizedStringlv},
+  {LocalizedStringmk},
+  {LocalizedStringml},
+  {LocalizedStringmn},
+  {LocalizedStringmr},
+  {LocalizedStringms},
+  {LocalizedStringmy},
+  {LocalizedStringne},
+  {LocalizedStringnl},
+  {LocalizedStringno},
+  {LocalizedStringpa},
+  {LocalizedStringpl},
+  {LocalizedStringptBR},
+  {LocalizedStringptPT},
+  {LocalizedStringro},
+  {LocalizedStringru},
+  {LocalizedStringsi},
+  {LocalizedStringsk},
+  {LocalizedStringsl},
+  {LocalizedStringsq},
+  {LocalizedStringsr},
+  {LocalizedStringsv},
+  {LocalizedStringsw},
+  {LocalizedStringta},
+  {LocalizedStringte},
+  {LocalizedStringth},
+  {LocalizedStringtr},
+  {LocalizedStringuk},
+  {LocalizedStringur},
+  {LocalizedStringvi},
+  {LocalizedStringzhCN},
+  {LocalizedStringzhTW},
+  {LocalizedStringzu},
+];
diff --git a/extensions/amp-story/1.0/_locales/is.js b/extensions/amp-story/1.0/_locales/is.js
deleted file mode 100644
index 6f321023457ce..0000000000000
--- a/extensions/amp-story/1.0/_locales/is.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for is strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Slökkt á hljóði',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Ekkert hljóð er á þessari síðu',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Kveikt á hljóði',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Fleira til að lesa',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Breyta stillingum gagnaleyndar',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Persónuverndarstillingar',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Samþykkja',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Hafna',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Halda samt áfram',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Skoða á upprunalega léninu:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Meira um AMP-niðurstöður',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Ýttu á „Næsta“',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Ýttu á „Til baka“',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Strjúka upp',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Spila myndskeið',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Ekki tókst að afrita tengil á klippiborð :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Tengill afritaður!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Tölvupóstur',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Fá tengil',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS-skilaboð',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Stækka tíst',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Lengdu gluggann til að skoða þessa upplifun',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Lengdu og breikkaðu gluggann til að skoða þessa upplifun',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Breikkaðu gluggann til að skoða þessa upplifun',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'Þú verður að virkja tilraun AMP-sögu til að skoða þetta efni.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Best er að skoða síðuna í skammsniði',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Vafrinn þinn virðist ekki styðja þessa upplifun',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/is.json b/extensions/amp-story/1.0/_locales/is.json
new file mode 100644
index 0000000000000..3549afa23326a
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/is.json
@@ -0,0 +1,36 @@
+{
+  "2": {"string": "Ýttu á „Næsta“"},
+  "3": {"string": "Ýttu á „Til baka“"},
+  "4": {"string": "Ekki tókst að afrita tengil á klippiborð :("},
+  "5": {"string": "Tengill afritaður!"},
+  "6": {"string": "Tölvupóstur"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Fá tengil"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS-skilaboð"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "Lengdu og breikkaðu gluggann til að skoða þessa upplifun"},
+  "19": {
+    "string": "Þú verður að virkja tilraun AMP-sögu til að skoða þetta efni."
+  },
+  "20": {"string": "Best er að skoða síðuna í skammsniði"},
+  "21": {"string": "Vafrinn þinn virðist ekki styðja þessa upplifun"},
+  "22": {"string": "Samþykkja"},
+  "23": {"string": "Hafna"},
+  "25": {"string": "Skoða á upprunalega léninu:"},
+  "26": {"string": "Meira um AMP-niðurstöður"},
+  "27": {"string": "Halda samt áfram"},
+  "31": {"string": "Slökkt á hljóði"},
+  "32": {"string": "Kveikt á hljóði"},
+  "33": {"string": "Ekkert hljóð er á þessari síðu"},
+  "34": {"string": "Spila myndskeið"},
+  "35": {"string": "Strjúka upp"},
+  "36": {"string": "Stækka tíst"},
+  "37": {"string": "Lengdu gluggann til að skoða þessa upplifun"},
+  "38": {"string": "Breikkaðu gluggann til að skoða þessa upplifun"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/it.js b/extensions/amp-story/1.0/_locales/it.js
deleted file mode 100644
index 99fb53b70d9bc..0000000000000
--- a/extensions/amp-story/1.0/_locales/it.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for it strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Audio disattivato',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Questa pagina non ha audio',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Audio attivo',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Altri articoli da leggere',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Modifica le impostazioni per la privacy dei dati',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Impostazioni sulla privacy',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Accetta',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Rifiuta',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Continua comunque',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Visualizza sul dominio originale:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Ulteriori informazioni sui risultati AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Tocca Avanti',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Tocca Indietro',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: "Scorri verso l'alto",
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Riproduci video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Impossibile copiare il link negli appunti :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Link copiato.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Email',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Ottieni link',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Espandi tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string:
-      "Espandi l'altezza della finestra per visualizzare questa " +
-      'esperienza',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      "Espandi sia l'altezza che la larghezza della finestra per " +
-      'visualizzare questa esperienza',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string:
-      'Espandi la larghezza della finestra per visualizzare questa ' +
-      'esperienza',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      "Devi attivare l'esperimento di storia AMP per visualizzare " +
-      'questi contenuti.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string:
-      'La pagina viene visualizzata in modo ottimale in orientamento ' +
-      'verticale',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'Spiacenti, sembra che il tuo browser non supporti questa ' +
-      'esperienza',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/it.json b/extensions/amp-story/1.0/_locales/it.json
new file mode 100644
index 0000000000000..5507e31048fa3
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/it.json
@@ -0,0 +1,46 @@
+{
+  "2": {"string": "Tocca Avanti"},
+  "3": {"string": "Tocca Indietro"},
+  "4": {"string": "Impossibile copiare il link negli appunti :("},
+  "5": {"string": "Link copiato."},
+  "6": {"string": "Email"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Ottieni link"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Espandi sia l'altezza che la larghezza della finestra per visualizzare questa esperienza"
+  },
+  "19": {
+    "string": "Devi attivare l'esperimento di storia AMP per visualizzare questi contenuti."
+  },
+  "20": {
+    "string": "La pagina viene visualizzata in modo ottimale in orientamento verticale"
+  },
+  "21": {
+    "string": "Spiacenti, sembra che il tuo browser non supporti questa esperienza"
+  },
+  "22": {"string": "Accetta"},
+  "23": {"string": "Rifiuta"},
+  "25": {"string": "Visualizza sul dominio originale:"},
+  "26": {"string": "Ulteriori informazioni sui risultati AMP"},
+  "27": {"string": "Continua comunque"},
+  "31": {"string": "Audio disattivato"},
+  "32": {"string": "Audio attivo"},
+  "33": {"string": "Questa pagina non ha audio"},
+  "34": {"string": "Riproduci video"},
+  "35": {"string": "Scorri verso l'alto"},
+  "36": {"string": "Espandi tweet"},
+  "37": {
+    "string": "Espandi l'altezza della finestra per visualizzare questa esperienza"
+  },
+  "38": {
+    "string": "Espandi la larghezza della finestra per visualizzare questa esperienza"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/iw.js b/extensions/amp-story/1.0/_locales/iw.js
deleted file mode 100644
index c4273251981fa..0000000000000
--- a/extensions/amp-story/1.0/_locales/iw.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for iw strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'ללא קול',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'בדף הזה אין קול',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'הקול פועל',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'לקריאה נוספת',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'שינוי הגדרות הפרטיות של הנתונים',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'הגדרות פרטיות',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'אישור',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'דחייה',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'אני רוצה להמשיך בכל זאת',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'להצגה בדומיין המקורי:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'מידע נוסף על תוצאות AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: "יש להקיש על 'הבא'",
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: "יש להקיש על 'הקודם'",
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'החלקה למעלה',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'הפעלת הסרטון',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'לא ניתן להעתיק את הקישור ללוח :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'הקישור הועתק',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'אימייל',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+‎',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'לקבלת קישור',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'הרחבת הציוץ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'כדי להציג את החוויה, יש להגדיל את גובה החלון',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'כדי להציג את החוויה, יש להגדיל את הגובה וגם את הרוחב של החלון',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'כדי להציג את החוויה, יש להגדיל את רוחב החלון',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'יש להפעיל את הניסוי של סטורי ב-AMP כדי להציג תוכן זה.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: "לחוויית הצפייה הטובה ביותר בדף, יש להשתמש במצב 'הדגשת דיוקן'",
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'לצערנו, נראה שהדפדפן שלך לא תומך בחוויה הזו',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/iw.json b/extensions/amp-story/1.0/_locales/iw.json
new file mode 100644
index 0000000000000..04802bb920836
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/iw.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "יש להקיש על 'הבא'"},
+  "3": {"string": "יש להקיש על 'הקודם'"},
+  "4": {"string": "לא ניתן להעתיק את הקישור ללוח :("},
+  "5": {"string": "הקישור הועתק"},
+  "6": {"string": "אימייל"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+‎"},
+  "9": {"string": "לקבלת קישור"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "כדי להציג את החוויה, יש להגדיל את הגובה וגם את הרוחב של החלון"
+  },
+  "19": {"string": "יש להפעיל את הניסוי של סטורי ב-AMP כדי להציג תוכן זה."},
+  "20": {
+    "string": "לחוויית הצפייה הטובה ביותר בדף, יש להשתמש במצב 'הדגשת דיוקן'"
+  },
+  "21": {"string": "לצערנו, נראה שהדפדפן שלך לא תומך בחוויה הזו"},
+  "22": {"string": "אישור"},
+  "23": {"string": "דחייה"},
+  "25": {"string": "להצגה בדומיין המקורי:"},
+  "26": {"string": "מידע נוסף על תוצאות AMP"},
+  "27": {"string": "אני רוצה להמשיך בכל זאת"},
+  "31": {"string": "ללא קול"},
+  "32": {"string": "הקול פועל"},
+  "33": {"string": "בדף הזה אין קול"},
+  "34": {"string": "הפעלת הסרטון"},
+  "35": {"string": "החלקה למעלה"},
+  "36": {"string": "הרחבת הציוץ"},
+  "37": {"string": "כדי להציג את החוויה, יש להגדיל את גובה החלון"},
+  "38": {"string": "כדי להציג את החוויה, יש להגדיל את רוחב החלון"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/ja.js b/extensions/amp-story/1.0/_locales/ja.js
deleted file mode 100644
index 6735c3a8fb35b..0000000000000
--- a/extensions/amp-story/1.0/_locales/ja.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for ja strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'サウンドはオフです',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'このページには音声がありません',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'サウンドオン',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'その他のおすすめ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'データのプライバシー設定を変更',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'プライバシー設定',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: '同意する',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: '同意しない',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: '続行する',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: '元のドメインで表示:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP の結果に関する詳細',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: '[次へ] をタップ',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: '戻るアイコンをタップ',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: '上にスワイプ',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: '動画を再生',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'リンクをクリップボードにコピーできませんでした。',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'リンクをコピーしました',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'メール',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'リンクを取得',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ツイートを展開',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'この記事を表示するには、ウィンドウの高さを拡大してください',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'この記事を表示するには、ウィンドウの高さと幅の両方を拡大してください',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'この記事を表示するには、ウィンドウの幅を拡大してください',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'このコンテンツを表示するには amp-story テストを有効にする必要があります。',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'このページはポートレート モードで最適に表示されます',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'ご利用のブラウザはこの記事に対応していません',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/ja.json b/extensions/amp-story/1.0/_locales/ja.json
new file mode 100644
index 0000000000000..c49fe68a8902b
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/ja.json
@@ -0,0 +1,40 @@
+{
+  "2": {"string": "[次へ] をタップ"},
+  "3": {"string": "戻るアイコンをタップ"},
+  "4": {"string": "リンクをクリップボードにコピーできませんでした。"},
+  "5": {"string": "リンクをコピーしました"},
+  "6": {"string": "メール"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "リンクを取得"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "この記事を表示するには、ウィンドウの高さと幅の両方を拡大してください"
+  },
+  "19": {
+    "string": "このコンテンツを表示するには amp-story テストを有効にする必要があります。"
+  },
+  "20": {"string": "このページはポートレート モードで最適に表示されます"},
+  "21": {"string": "ご利用のブラウザはこの記事に対応していません"},
+  "22": {"string": "同意する"},
+  "23": {"string": "同意しない"},
+  "25": {"string": "元のドメインで表示:"},
+  "26": {"string": "AMP の結果に関する詳細"},
+  "27": {"string": "続行する"},
+  "31": {"string": "サウンドはオフです"},
+  "32": {"string": "サウンドオン"},
+  "33": {"string": "このページには音声がありません"},
+  "34": {"string": "動画を再生"},
+  "35": {"string": "上にスワイプ"},
+  "36": {"string": "ツイートを展開"},
+  "37": {
+    "string": "この記事を表示するには、ウィンドウの高さを拡大してください"
+  },
+  "38": {"string": "この記事を表示するには、ウィンドウの幅を拡大してください"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/ka.js b/extensions/amp-story/1.0/_locales/ka.js
deleted file mode 100644
index 7f6be7fbd7195..0000000000000
--- a/extensions/amp-story/1.0/_locales/ka.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ka strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'ხმა გამორთულია',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'ამ გვერდს ხმა არ აქვს',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'ხმა ჩართულია',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'მეტი წასაკითხი',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'მონაცემთა კონფიდენციალურობის პარამეტრების შეცვლა',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'კონფიდენციალურობის პარამეტრები',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'მიღება',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'უარყოფა',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'მაინც გაგრძელება',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'ნახეთ საწყის დომენზე:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'ვრცლად AMP შედეგების შესახებ',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'შეეხეთ „გაგრძელებას“',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'შეეხეთ „დაბრუნებას“',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'ზემოთ გადაფურცვლა',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'ვიდეოს დაკვრა',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'ბმულის გაცვლის ბუფერში კოპირება ვერ მოხერხდა :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'ბმული დაკოპირდა!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ელფოსტა',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'ბმულის მიღება',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ტვიტის გაშლა',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'ამ გამოცდილების სანახავად, გაზარდეთ თქვენი ფანჯრის სიმაღლე',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'ამ გამოცდილების სანახავად, გაზარდეთ თქვენი ფანჯრის სიმაღლეც და ' +
-      'სიგანეც',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'ამ გამოცდილების სანახავად, გაზარდეთ თქვენი ფანჯრის სიგანე',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'ამ კონტენტის სანახავად, თქვენ უნდა ჩართოთ AMP ამბის ექსპერიმენტი.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'გვერდის სანახავად საუკეთესოა პორტრეტის რეჟიმი',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'ვწუხვართ, როგორც ჩანს, თქვენს ბრაუზერს არ აქვს ამ გამოცდილების ' +
-      'მხარდაჭერა',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/ka.json b/extensions/amp-story/1.0/_locales/ka.json
new file mode 100644
index 0000000000000..93a6376eaf6ce
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/ka.json
@@ -0,0 +1,42 @@
+{
+  "2": {"string": "შეეხეთ „გაგრძელებას“"},
+  "3": {"string": "შეეხეთ „დაბრუნებას“"},
+  "4": {"string": "ბმულის გაცვლის ბუფერში კოპირება ვერ მოხერხდა :("},
+  "5": {"string": "ბმული დაკოპირდა!"},
+  "6": {"string": "ელფოსტა"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "ბმულის მიღება"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "ამ გამოცდილების სანახავად, გაზარდეთ თქვენი ფანჯრის სიმაღლეც და სიგანეც"
+  },
+  "19": {
+    "string": "ამ კონტენტის სანახავად, თქვენ უნდა ჩართოთ AMP ამბის ექსპერიმენტი."
+  },
+  "20": {"string": "გვერდის სანახავად საუკეთესოა პორტრეტის რეჟიმი"},
+  "21": {
+    "string": "ვწუხვართ, როგორც ჩანს, თქვენს ბრაუზერს არ აქვს ამ გამოცდილების მხარდაჭერა"
+  },
+  "22": {"string": "მიღება"},
+  "23": {"string": "უარყოფა"},
+  "25": {"string": "ნახეთ საწყის დომენზე:"},
+  "26": {"string": "ვრცლად AMP შედეგების შესახებ"},
+  "27": {"string": "მაინც გაგრძელება"},
+  "31": {"string": "ხმა გამორთულია"},
+  "32": {"string": "ხმა ჩართულია"},
+  "33": {"string": "ამ გვერდს ხმა არ აქვს"},
+  "34": {"string": "ვიდეოს დაკვრა"},
+  "35": {"string": "ზემოთ გადაფურცვლა"},
+  "36": {"string": "ტვიტის გაშლა"},
+  "37": {
+    "string": "ამ გამოცდილების სანახავად, გაზარდეთ თქვენი ფანჯრის სიმაღლე"
+  },
+  "38": {"string": "ამ გამოცდილების სანახავად, გაზარდეთ თქვენი ფანჯრის სიგანე"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/km.js b/extensions/amp-story/1.0/_locales/km.js
deleted file mode 100644
index 64fed72539cf4..0000000000000
--- a/extensions/amp-story/1.0/_locales/km.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for km strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'បិទ​សំឡេង',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'ទំព័រនេះ​គ្មាន​សំឡេងទេ',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'បើក​សំឡេង',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'អត្ថបទច្រើនទៀត​សម្រាប់អាន',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'ផ្លាស់ប្ដូរ​ការកំណត់​ឯកជនភាព​នៃទិន្នន័យ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'ការកំណត់​ឯកជនភាព',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'ទទួលយក',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'បដិសេធ',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'មិនអីទេ​ បន្តចុះ',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'មើល​នៅលើ​ដែន​ដើម៖',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'ច្រើនទៀត​អំពី​លទ្ធផល AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'ចុច "បន្ទាប់"',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'ចុច​ថយក្រោយ',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'អូសឡើង',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'ចាក់​វីដេអូ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'មិន​អាច​ចម្លង​តំណ​ទៅ​ឃ្លីបបត​បាន​ទេ :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'បាន​ចម្លង​តំណរួចហើយ!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'អ៊ីមែល',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'ទទួលបាន​តំណ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'សារ SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ពង្រីកធ្វីត',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'ពង្រីក​កម្ពស់​វិនដូ​របស់អ្នក ដើម្បី​មើល​បទពិសោធន៍​នេះ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'ពង្រីក​កម្ពស់ និង​ទទឹង​វិនដូ​របស់អ្នក ដើម្បី​មើល​បទពិសោធន៍​នេះ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'ពង្រីក​ទទឹង​វិនដូ​របស់អ្នក ដើម្បី​មើល​បទពិសោធន៍​នេះ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'អ្នក​ត្រូវតែ​បើក​ការពិសោធរឿង AMP ដើម្បី​មើល​ខ្លឹមសារ​នេះ។',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'អាចមើលឃើញ​ទំព័រ​ល្អបំផុត​នៅក្នុង​មុខងារបញ្ឈរ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'សូម​អភ័យទោស ' +
-      // eslint-disable-next-line max-len
-      'កម្មវិធីរុករកតាមអ៊ីនធឺណិត​របស់អ្នក​ហាក់ដូចជា​មិនស្គាល់​បទពិសោធន៍​នេះ​ទេ',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/km.json b/extensions/amp-story/1.0/_locales/km.json
new file mode 100644
index 0000000000000..066fc9ed3fede
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/km.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "ចុច \"បន្ទាប់\""},
+  "3": {"string": "ចុច​ថយក្រោយ"},
+  "4": {"string": "មិន​អាច​ចម្លង​តំណ​ទៅ​ឃ្លីបបត​បាន​ទេ :("},
+  "5": {"string": "បាន​ចម្លង​តំណរួចហើយ!"},
+  "6": {"string": "អ៊ីមែល"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "ទទួលបាន​តំណ"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "សារ SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "ពង្រីក​កម្ពស់ និង​ទទឹង​វិនដូ​របស់អ្នក ដើម្បី​មើល​បទពិសោធន៍​នេះ"
+  },
+  "19": {"string": "អ្នក​ត្រូវតែ​បើក​ការពិសោធរឿង AMP ដើម្បី​មើល​ខ្លឹមសារ​នេះ។"},
+  "20": {"string": "អាចមើលឃើញ​ទំព័រ​ល្អបំផុត​នៅក្នុង​មុខងារបញ្ឈរ"},
+  "21": {
+    "string": "សូម​អភ័យទោស កម្មវិធីរុករកតាមអ៊ីនធឺណិត​របស់អ្នក​ហាក់ដូចជា​មិនស្គាល់​បទពិសោធន៍​នេះ​ទេ"
+  },
+  "22": {"string": "ទទួលយក"},
+  "23": {"string": "បដិសេធ"},
+  "25": {"string": "មើល​នៅលើ​ដែន​ដើម៖"},
+  "26": {"string": "ច្រើនទៀត​អំពី​លទ្ធផល AMP"},
+  "27": {"string": "មិនអីទេ​ បន្តចុះ"},
+  "31": {"string": "បិទ​សំឡេង"},
+  "32": {"string": "បើក​សំឡេង"},
+  "33": {"string": "ទំព័រនេះ​គ្មាន​សំឡេងទេ"},
+  "34": {"string": "ចាក់​វីដេអូ"},
+  "35": {"string": "អូសឡើង"},
+  "36": {"string": "ពង្រីកធ្វីត"},
+  "37": {"string": "ពង្រីក​កម្ពស់​វិនដូ​របស់អ្នក ដើម្បី​មើល​បទពិសោធន៍​នេះ"},
+  "38": {"string": "ពង្រីក​ទទឹង​វិនដូ​របស់អ្នក ដើម្បី​មើល​បទពិសោធន៍​នេះ"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/kn.js b/extensions/amp-story/1.0/_locales/kn.js
deleted file mode 100644
index dae7b8f5e00af..0000000000000
--- a/extensions/amp-story/1.0/_locales/kn.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for kn strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'ಧ್ವನಿ ಆಫ್ ಆಗಿದೆ',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'ಈ ಪುಟವು ಧ್ವನಿಯನ್ನು ಹೊಂದಿಲ್ಲ',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'ಧ್ವನಿ ಆನ್ ಆಗಿದೆ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'ಓದಲು ಇನ್ನಷ್ಟು',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'ಡೇಟಾ ಗೌಪ್ಯತಾ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'ಗೌಪ್ಯತಾ ಸೆಟ್ಟಿಂಗ್‌ಗಳು',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'ಸಮ್ಮತಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'ನಿರಾಕರಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'ಹೇಗಾದರೂ ಮುಂದುವರಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'ಮೂಲ ಡೊಮೇನ್‌ನಲ್ಲಿ ವೀಕ್ಷಿಸಿ:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP ಫಲಿತಾಂಶಗಳ ಕುರಿತು ಇನ್ನಷ್ಟು',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'ಮುಂದಿನದು ಟ್ಯಾಪ್ ಮಾಡಿ',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'ಹಿಂದಕ್ಕೆ ಟ್ಯಾಪ್ ಮಾಡಿ',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'ಮೇಲಕ್ಕೆ ಸ್ವೈಪ್ ಮಾಡಿ',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'ವೀಡಿಯೊ ಪ್ಲೇ ಮಾಡಿ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'ಕ್ಲಿಪ್‌ಬೋರ್ಡ್‌ಗೆ ಲಿಂಕ್ ಅನ್ನು ನಕಲಿಸಲು ಸಾಧ್ಯವಾಗಲಿಲ್ಲ :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'ಲಿಂಕ್ ನಕಲಿಸಲಾಗಿದೆ!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ಇಮೇಲ್',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'ಲಿಂಕ್ ಪಡೆಯಿರಿ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'ಎಸ್‌ಎಂಎಸ್',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ಟ್ವೀಟ್‌ ವಿಸ್ತರಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'ಈ ಅನುಭವವನ್ನು ವೀಕ್ಷಿಸಲು ನಿಮ್ಮ ವಿಂಡೋದ ಎತ್ತರವನ್ನು ವಿಸ್ತರಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'ನಿಮ್ಮ ವಿಂಡೋದಲ್ಲಿ ಈ ಅನುಭವವನ್ನು ವೀಕ್ಷಿಸಲು, ಎತ್ತರ ಮತ್ತು ಅಗಲ ' +
-      'ಎರಡನ್ನೂ ವಿಸ್ತರಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'ಈ ಅನುಭವವನ್ನು ವೀಕ್ಷಿಸಲು ನಿಮ್ಮ ವಿಂಡೋದ ಅಗಲವನ್ನು ವಿಸ್ತರಿಸಿ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'ಈ ವಿಷಯವನ್ನು ವೀಕ್ಷಿಸಲು ನೀವು AMP ಸ್ಟೋರಿ ಪ್ರಯೋಗವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬೇಕು.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'ಪೋರ್ಟೇಟ್ ಮೋಡ್‌ನಲ್ಲಿ ಈ ಪುಟವನ್ನು ಅತ್ಯತ್ತಮವಾಗಿ ವೀಕ್ಷಿಸಬಹುದಾಗಿದೆ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'ನಮ್ಮನ್ನು ಕ್ಷಮಿಸಿ, ಈ ಅನುಭವವನ್ನು ನಿಮ್ಮ ಬ್ರೌಸರ್ ಬೆಂಬಲಿಸುವಂತೆ ' +
-      'ಕಾಣುತ್ತಿಲ್ಲ',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/kn.json b/extensions/amp-story/1.0/_locales/kn.json
new file mode 100644
index 0000000000000..30705c19e9144
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/kn.json
@@ -0,0 +1,42 @@
+{
+  "2": {"string": "ಮುಂದಿನದು ಟ್ಯಾಪ್ ಮಾಡಿ"},
+  "3": {"string": "ಹಿಂದಕ್ಕೆ ಟ್ಯಾಪ್ ಮಾಡಿ"},
+  "4": {"string": "ಕ್ಲಿಪ್‌ಬೋರ್ಡ್‌ಗೆ ಲಿಂಕ್ ಅನ್ನು ನಕಲಿಸಲು ಸಾಧ್ಯವಾಗಲಿಲ್ಲ :("},
+  "5": {"string": "ಲಿಂಕ್ ನಕಲಿಸಲಾಗಿದೆ!"},
+  "6": {"string": "ಇಮೇಲ್"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "ಲಿಂಕ್ ಪಡೆಯಿರಿ"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "ಎಸ್‌ಎಂಎಸ್"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "ನಿಮ್ಮ ವಿಂಡೋದಲ್ಲಿ ಈ ಅನುಭವವನ್ನು ವೀಕ್ಷಿಸಲು, ಎತ್ತರ ಮತ್ತು ಅಗಲ ಎರಡನ್ನೂ ವಿಸ್ತರಿಸಿ"
+  },
+  "19": {
+    "string": "ಈ ವಿಷಯವನ್ನು ವೀಕ್ಷಿಸಲು ನೀವು AMP ಸ್ಟೋರಿ ಪ್ರಯೋಗವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬೇಕು."
+  },
+  "20": {
+    "string": "ಪೋರ್ಟೇಟ್ ಮೋಡ್‌ನಲ್ಲಿ ಈ ಪುಟವನ್ನು ಅತ್ಯತ್ತಮವಾಗಿ ವೀಕ್ಷಿಸಬಹುದಾಗಿದೆ"
+  },
+  "21": {
+    "string": "ನಮ್ಮನ್ನು ಕ್ಷಮಿಸಿ, ಈ ಅನುಭವವನ್ನು ನಿಮ್ಮ ಬ್ರೌಸರ್ ಬೆಂಬಲಿಸುವಂತೆ ಕಾಣುತ್ತಿಲ್ಲ"
+  },
+  "22": {"string": "ಸಮ್ಮತಿಸಿ"},
+  "23": {"string": "ನಿರಾಕರಿಸಿ"},
+  "25": {"string": "ಮೂಲ ಡೊಮೇನ್‌ನಲ್ಲಿ ವೀಕ್ಷಿಸಿ:"},
+  "26": {"string": "AMP ಫಲಿತಾಂಶಗಳ ಕುರಿತು ಇನ್ನಷ್ಟು"},
+  "27": {"string": "ಹೇಗಾದರೂ ಮುಂದುವರಿಸಿ"},
+  "31": {"string": "ಧ್ವನಿ ಆಫ್ ಆಗಿದೆ"},
+  "32": {"string": "ಧ್ವನಿ ಆನ್ ಆಗಿದೆ"},
+  "33": {"string": "ಈ ಪುಟವು ಧ್ವನಿಯನ್ನು ಹೊಂದಿಲ್ಲ"},
+  "34": {"string": "ವೀಡಿಯೊ ಪ್ಲೇ ಮಾಡಿ"},
+  "35": {"string": "ಮೇಲಕ್ಕೆ ಸ್ವೈಪ್ ಮಾಡಿ"},
+  "36": {"string": "ಟ್ವೀಟ್‌ ವಿಸ್ತರಿಸಿ"},
+  "37": {"string": "ಈ ಅನುಭವವನ್ನು ವೀಕ್ಷಿಸಲು ನಿಮ್ಮ ವಿಂಡೋದ ಎತ್ತರವನ್ನು ವಿಸ್ತರಿಸಿ"},
+  "38": {"string": "ಈ ಅನುಭವವನ್ನು ವೀಕ್ಷಿಸಲು ನಿಮ್ಮ ವಿಂಡೋದ ಅಗಲವನ್ನು ವಿಸ್ತರಿಸಿ"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/ko.js b/extensions/amp-story/1.0/_locales/ko.js
deleted file mode 100644
index a2abe7481bc1d..0000000000000
--- a/extensions/amp-story/1.0/_locales/ko.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for ko strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: '사운드 꺼짐',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: '이 페이지에는 사운드가 없습니다.',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: '사운드 켜짐',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: '더 읽기',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: '데이터 공개 설정 변경',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: '공개 설정',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: '수락',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: '거부',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: '계속하기',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: '원래 도메인에서 보기:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP 결과 자세히 알아보기',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: '다음을 탭하세요.',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: '뒤로를 탭하세요.',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: '위로 스와이프',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: '동영상 재생',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: '링크를 클립보드에 복사할 수 없습니다.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: '링크가 복사되었습니다.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: '이메일',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: '링크 받기',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: '트윗 펼치기',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: '이 환경을 보려면 창 높이를 늘리세요.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: '이 환경을 보려면 창 높이와 너비를 늘리세요.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: '이 환경을 보려면 창 너비를 늘리세요.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: '이 콘텐츠를 보려면 amp-story 실험을 사용하도록 설정해야 합니다.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: '이 페이지는 세로 모드에서 가장 잘 표시됩니다.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: '사용 중인 브라우저에서 이 환경을 지원하지 않는 것 같습니다.',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/ko.json b/extensions/amp-story/1.0/_locales/ko.json
new file mode 100644
index 0000000000000..f3eae489525a6
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/ko.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "다음을 탭하세요."},
+  "3": {"string": "뒤로를 탭하세요."},
+  "4": {"string": "링크를 클립보드에 복사할 수 없습니다."},
+  "5": {"string": "링크가 복사되었습니다."},
+  "6": {"string": "이메일"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "링크 받기"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "이 환경을 보려면 창 높이와 너비를 늘리세요."},
+  "19": {
+    "string": "이 콘텐츠를 보려면 amp-story 실험을 사용하도록 설정해야 합니다."
+  },
+  "20": {"string": "이 페이지는 세로 모드에서 가장 잘 표시됩니다."},
+  "21": {
+    "string": "사용 중인 브라우저에서 이 환경을 지원하지 않는 것 같습니다."
+  },
+  "22": {"string": "수락"},
+  "23": {"string": "거부"},
+  "25": {"string": "원래 도메인에서 보기:"},
+  "26": {"string": "AMP 결과 자세히 알아보기"},
+  "27": {"string": "계속하기"},
+  "31": {"string": "사운드 꺼짐"},
+  "32": {"string": "사운드 켜짐"},
+  "33": {"string": "이 페이지에는 사운드가 없습니다."},
+  "34": {"string": "동영상 재생"},
+  "35": {"string": "위로 스와이프"},
+  "36": {"string": "트윗 펼치기"},
+  "37": {"string": "이 환경을 보려면 창 높이를 늘리세요."},
+  "38": {"string": "이 환경을 보려면 창 너비를 늘리세요."},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/lo.js b/extensions/amp-story/1.0/_locales/lo.js
deleted file mode 100644
index b62c4b590d21c..0000000000000
--- a/extensions/amp-story/1.0/_locales/lo.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for lo strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'ປິດສຽງແລ້ວ',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'ໜ້ານີ້ບໍ່ມີສຽງ',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'ເປີດສຽງແລ້ວ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'ເນື້ອຫາເພີ່ມເຕີມ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'ປ່ຽນການຕັ້ງຄ່າຄວາມເປັນສ່ວນຕົວຂໍ້ມູນ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'ການຕັ້ງຄ່າຄວາມເປັນສ່ວນຕົວ',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'ຍອມຮັບ',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'ປະຕິເສດ',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'ຢືນຢັນດຳເນີນການຕໍ່',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'ເບິ່ງຢູ່ໂດເມນຕົ້ນສະບັບ:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'ເພີ່ມເຕີມກ່ຽວກັບຜົນການຊອກຫາແບບ AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'ແຕະຖັດໄປ',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'ແຕະກັບຄືນ',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'ປັດຂຶ້ນ',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'ສາຍວິດີໂອ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'ບໍ່ສາມາສຳເນົາລິ້ງໄປໃສ່ຄລິບບອດໄດ້ :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'ສຳເນົາລິ້ງແລ້ວ!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ອີເມວ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'ຂໍລິ້ງ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ຂະຫຍາຍ Tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'ຂະຫຍາຍຄວາມສູງຂອງໜ້າຈໍທ່ານເພື່ອເບິ່ງເນື້ອຫານີ້',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'ຂະຫຍາຍທັງຄວາມກວ້າງ ແລະ ຄວາມສູງຂອງໜ້າຈໍທ່ານເພື່ອເບິ່ງເນື້ອຫານີ້',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'ຂະຫຍາຍຄວາມກວ້າງຂອງໜ້າຈໍທ່ານເພື່ອເບິ່ງເນື້ອຫານີ້',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'ທ່ານຕ້ອງເປີດໃຊ້ການທົດລອງຂ່າວແບບ AMP ເພື່ອເບິ່ງເນື້ອຫານີ້.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'ໜ້ານີ້ເບິ່ງໄດ້ດີທີ່ສຸດໃນລວງຕັ້ງ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'ພວກເຮົາຂໍອະໄພ, ໂປຣແກຣມທ່ອງເວັບຂອງທ່ານບໍ່ຮອງຮັບຄຸນສົມບັດນີ້ເທື່ອ',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/lo.json b/extensions/amp-story/1.0/_locales/lo.json
new file mode 100644
index 0000000000000..ef9f297f4a306
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/lo.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "ແຕະຖັດໄປ"},
+  "3": {"string": "ແຕະກັບຄືນ"},
+  "4": {"string": "ບໍ່ສາມາສຳເນົາລິ້ງໄປໃສ່ຄລິບບອດໄດ້ :("},
+  "5": {"string": "ສຳເນົາລິ້ງແລ້ວ!"},
+  "6": {"string": "ອີເມວ"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "ຂໍລິ້ງ"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "ຂະຫຍາຍທັງຄວາມກວ້າງ ແລະ ຄວາມສູງຂອງໜ້າຈໍທ່ານເພື່ອເບິ່ງເນື້ອຫານີ້"
+  },
+  "19": {"string": "ທ່ານຕ້ອງເປີດໃຊ້ການທົດລອງຂ່າວແບບ AMP ເພື່ອເບິ່ງເນື້ອຫານີ້."},
+  "20": {"string": "ໜ້ານີ້ເບິ່ງໄດ້ດີທີ່ສຸດໃນລວງຕັ້ງ"},
+  "21": {
+    "string": "ພວກເຮົາຂໍອະໄພ, ໂປຣແກຣມທ່ອງເວັບຂອງທ່ານບໍ່ຮອງຮັບຄຸນສົມບັດນີ້ເທື່ອ"
+  },
+  "22": {"string": "ຍອມຮັບ"},
+  "23": {"string": "ປະຕິເສດ"},
+  "25": {"string": "ເບິ່ງຢູ່ໂດເມນຕົ້ນສະບັບ:"},
+  "26": {"string": "ເພີ່ມເຕີມກ່ຽວກັບຜົນການຊອກຫາແບບ AMP"},
+  "27": {"string": "ຢືນຢັນດຳເນີນການຕໍ່"},
+  "31": {"string": "ປິດສຽງແລ້ວ"},
+  "32": {"string": "ເປີດສຽງແລ້ວ"},
+  "33": {"string": "ໜ້ານີ້ບໍ່ມີສຽງ"},
+  "34": {"string": "ສາຍວິດີໂອ"},
+  "35": {"string": "ປັດຂຶ້ນ"},
+  "36": {"string": "ຂະຫຍາຍ Tweet"},
+  "37": {"string": "ຂະຫຍາຍຄວາມສູງຂອງໜ້າຈໍທ່ານເພື່ອເບິ່ງເນື້ອຫານີ້"},
+  "38": {"string": "ຂະຫຍາຍຄວາມກວ້າງຂອງໜ້າຈໍທ່ານເພື່ອເບິ່ງເນື້ອຫານີ້"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/lt.js b/extensions/amp-story/1.0/_locales/lt.js
deleted file mode 100644
index 756668d0a63c5..0000000000000
--- a/extensions/amp-story/1.0/_locales/lt.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for lt strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Garsas išjungtas',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Nėra šios puslapio garso',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Garsas įjungtas',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Skaityti daugiau',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Keisti duomenų privatumo nustatymus',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Privatumo nustatymai',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Sutikti',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Atmesti',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Vis tiek tęsti',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Peržiūra pradiniame domene:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Daugiau apie AMP rezultatus',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Palieskite „Kitas“',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Palieskite „Atgal“',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Perbraukti aukštyn',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Leisti vaizdo įrašą',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Nepavyko nukopijuoti nuorodos į iškarpinę.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Nuoroda nukopijuota!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'El. paštas',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Gauti nuorodą',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Išskleisti „Twitter“ įrašą',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Padidinkite lango aukštį, kad galėtumėte peržiūrėti šią funkciją',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Padidinkite lango aukštį ir plotį, kad galėtumėte peržiūrėti ' +
-      'šią funkciją',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Padidinkite lango plotį, kad galėtumėte peržiūrėti šią funkciją',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Turite įgalinti AMP istorijos eksperimentą, kad galėtumėte ' +
-      'peržiūrėti šį turinį.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Puslapį geriausia žiūrėti portreto režimu',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'Apgailestaujame, bet panašu, kad jūsų naršyklėje ši funkcija ' +
-      'nepalaikoma',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/lt.json b/extensions/amp-story/1.0/_locales/lt.json
new file mode 100644
index 0000000000000..f513456ce3760
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/lt.json
@@ -0,0 +1,44 @@
+{
+  "2": {"string": "Palieskite „Kitas“"},
+  "3": {"string": "Palieskite „Atgal“"},
+  "4": {"string": "Nepavyko nukopijuoti nuorodos į iškarpinę."},
+  "5": {"string": "Nuoroda nukopijuota!"},
+  "6": {"string": "El. paštas"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Gauti nuorodą"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Padidinkite lango aukštį ir plotį, kad galėtumėte peržiūrėti šią funkciją"
+  },
+  "19": {
+    "string": "Turite įgalinti AMP istorijos eksperimentą, kad galėtumėte peržiūrėti šį turinį."
+  },
+  "20": {"string": "Puslapį geriausia žiūrėti portreto režimu"},
+  "21": {
+    "string": "Apgailestaujame, bet panašu, kad jūsų naršyklėje ši funkcija nepalaikoma"
+  },
+  "22": {"string": "Sutikti"},
+  "23": {"string": "Atmesti"},
+  "25": {"string": "Peržiūra pradiniame domene:"},
+  "26": {"string": "Daugiau apie AMP rezultatus"},
+  "27": {"string": "Vis tiek tęsti"},
+  "31": {"string": "Garsas išjungtas"},
+  "32": {"string": "Garsas įjungtas"},
+  "33": {"string": "Nėra šios puslapio garso"},
+  "34": {"string": "Leisti vaizdo įrašą"},
+  "35": {"string": "Perbraukti aukštyn"},
+  "36": {"string": "Išskleisti „Twitter“ įrašą"},
+  "37": {
+    "string": "Padidinkite lango aukštį, kad galėtumėte peržiūrėti šią funkciją"
+  },
+  "38": {
+    "string": "Padidinkite lango plotį, kad galėtumėte peržiūrėti šią funkciją"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/lv.js b/extensions/amp-story/1.0/_locales/lv.js
deleted file mode 100644
index 51916f863371c..0000000000000
--- a/extensions/amp-story/1.0/_locales/lv.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for lv strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Skaņa ir izslēgta',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Šajā lapā nav skaņas',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Skaņa ir ieslēgta',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Cita lasāmviela',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Mainīt datu konfidencialitātes iestatījumus',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Konfidencialitātes iestatījumi',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Piekrist',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Noraidīt',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Tomēr turpināt',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Skatīt sākotnējā domēnā:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Uzzināt vairāk par AMP rezultātiem',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Pieskarieties vienumam Tālāk',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Pieskarieties vienumam Atpakaļ',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Vilkt augšup',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Atskaņot videoklipu',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Diemžēl neizdevās kopēt saiti starpliktuvē',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Saite ir nokopēta.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Sūtīt e-pasta ziņojumu',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Iegūt saiti',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'Īsziņas',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Izvērst tvītu',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Lai skatītu šo saturu, izvērsiet loga augstumu',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Lai skatītu šo saturu, izvērsiet loga augstumu un platumu',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Lai skatītu šo saturu, izvērsiet loga platumu',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'Lai skatītu šo saturu, jums jāiespējo AMP stāstu eksperiments.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Lapu ieteicams skatīt portreta režīmā',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Diemžēl jūsu pārlūkprogramma neatbalsta šo iespēju',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/lv.json b/extensions/amp-story/1.0/_locales/lv.json
new file mode 100644
index 0000000000000..0197f1e1ede02
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/lv.json
@@ -0,0 +1,36 @@
+{
+  "2": {"string": "Pieskarieties vienumam Tālāk"},
+  "3": {"string": "Pieskarieties vienumam Atpakaļ"},
+  "4": {"string": "Diemžēl neizdevās kopēt saiti starpliktuvē"},
+  "5": {"string": "Saite ir nokopēta."},
+  "6": {"string": "Sūtīt e-pasta ziņojumu"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Iegūt saiti"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "Īsziņas"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "Lai skatītu šo saturu, izvērsiet loga augstumu un platumu"},
+  "19": {
+    "string": "Lai skatītu šo saturu, jums jāiespējo AMP stāstu eksperiments."
+  },
+  "20": {"string": "Lapu ieteicams skatīt portreta režīmā"},
+  "21": {"string": "Diemžēl jūsu pārlūkprogramma neatbalsta šo iespēju"},
+  "22": {"string": "Piekrist"},
+  "23": {"string": "Noraidīt"},
+  "25": {"string": "Skatīt sākotnējā domēnā:"},
+  "26": {"string": "Uzzināt vairāk par AMP rezultātiem"},
+  "27": {"string": "Tomēr turpināt"},
+  "31": {"string": "Skaņa ir izslēgta"},
+  "32": {"string": "Skaņa ir ieslēgta"},
+  "33": {"string": "Šajā lapā nav skaņas"},
+  "34": {"string": "Atskaņot videoklipu"},
+  "35": {"string": "Vilkt augšup"},
+  "36": {"string": "Izvērst tvītu"},
+  "37": {"string": "Lai skatītu šo saturu, izvērsiet loga augstumu"},
+  "38": {"string": "Lai skatītu šo saturu, izvērsiet loga platumu"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/mk.js b/extensions/amp-story/1.0/_locales/mk.js
deleted file mode 100644
index c6a2091d8c5b4..0000000000000
--- a/extensions/amp-story/1.0/_locales/mk.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for mk strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Звукот е исклучен',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Страницава нема звук',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Звукот е вклучен',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Повеќе статии за читање',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Променете ги поставки за приватност на податоците',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Поставки за приватност',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Прифати',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Одбиј',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Сепак продолжи',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Прегледајте на оригиналниот домен:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Повеќе за резултати од AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Допри „Следно“',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Допри „Назад“',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Повлечи нагоре',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Пушти го видеото',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Не може да се копира линкот во привремената меморија :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Линкот е копиран.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-пошта',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Земи линк',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Прошири го твитот',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string:
-      'Проширете ја висината на прозорецот за прикажување на ова искуство',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Проширете ги висината и ширината на прозорецот за прикажување ' +
-      'на ова искуство',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string:
-      'Проширете ја ширината на прозорецот за прикажување на ова искуство',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Мора да го овозможите експериментот со AMP-приказната за ' +
-      'прикажување на овие содржини.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Страницата најдобро се прикажува во режим на портрет',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'За жал, се чини дека вашиот прелистувач не го поддржува ова ' +
-      'искуство',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/mk.json b/extensions/amp-story/1.0/_locales/mk.json
new file mode 100644
index 0000000000000..f5ecb3a53abdc
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/mk.json
@@ -0,0 +1,44 @@
+{
+  "2": {"string": "Допри „Следно“"},
+  "3": {"string": "Допри „Назад“"},
+  "4": {"string": "Не може да се копира линкот во привремената меморија :("},
+  "5": {"string": "Линкот е копиран."},
+  "6": {"string": "E-пошта"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Земи линк"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Проширете ги висината и ширината на прозорецот за прикажување на ова искуство"
+  },
+  "19": {
+    "string": "Мора да го овозможите експериментот со AMP-приказната за прикажување на овие содржини."
+  },
+  "20": {"string": "Страницата најдобро се прикажува во режим на портрет"},
+  "21": {
+    "string": "За жал, се чини дека вашиот прелистувач не го поддржува ова искуство"
+  },
+  "22": {"string": "Прифати"},
+  "23": {"string": "Одбиј"},
+  "25": {"string": "Прегледајте на оригиналниот домен:"},
+  "26": {"string": "Повеќе за резултати од AMP"},
+  "27": {"string": "Сепак продолжи"},
+  "31": {"string": "Звукот е исклучен"},
+  "32": {"string": "Звукот е вклучен"},
+  "33": {"string": "Страницава нема звук"},
+  "34": {"string": "Пушти го видеото"},
+  "35": {"string": "Повлечи нагоре"},
+  "36": {"string": "Прошири го твитот"},
+  "37": {
+    "string": "Проширете ја висината на прозорецот за прикажување на ова искуство"
+  },
+  "38": {
+    "string": "Проширете ја ширината на прозорецот за прикажување на ова искуство"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/ml.js b/extensions/amp-story/1.0/_locales/ml.js
deleted file mode 100644
index 0aed83aecf75d..0000000000000
--- a/extensions/amp-story/1.0/_locales/ml.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ml strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'ശബ്‌ദം ഓഫ് ചെയ്യുക',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'ഈ പേജിന് ശബ്‌ദമില്ല',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'ശബ്‌ദം ഓണാണ്',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'വായിക്കാൻ കൂടുതൽ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'ഡാറ്റ സ്വകാര്യതാ ക്രമീകരണം മാറ്റുക',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'സ്വകാര്യത ക്രമീകരണം',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'അംഗീകരിക്കുക',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'നിരസിക്കുക',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'എന്തായാലും തുടരുക',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'ഒറിജിനൽ ഡൊമെയ്‌നിൽ കാണുക:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP ഫലങ്ങളെക്കുറിച്ച് കൂടുതൽ',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: "'അടുത്തത്' ടാപ്പ് ചെയ്യുക",
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: "'മടങ്ങുക' ടാപ്പ് ചെയ്യുക",
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'മുകളിലോട്ട് സ്വൈപ്പ് ചെയ്യുക',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'വീഡിയോ പ്ലേ ചെയ്യുക',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'ക്ലിപ്പ്ബോർഡിലേക്ക് ലിങ്ക് പകർത്താനായില്ല :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'ലിങ്ക് പകർത്തി!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ഇമെയിൽ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'ലിങ്ക് സ്വന്തമാക്കുക',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ട്വീറ്റ് വികസിപ്പിക്കുക',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'ഈ അനുഭവം കാണാൻ നിങ്ങളുടെ വിൻഡോയുടെ ഉയരം കൂട്ടുക',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'ഈ അനുഭവം കാണാൻ നിങ്ങളുടെ വിൻഡോയുടെ ഉയരവും വീതിയും കൂട്ടുക',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'ഈ അനുഭവം കാണാൻ നിങ്ങളുടെ വിൻഡോയുടെ വീതി കൂട്ടുക',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'ഈ ഉള്ളടക്കം കാണാൻ AMP സ്‌റ്റോറി പരീക്ഷണം നിങ്ങൾ ' +
-      'പ്രവർത്തനക്ഷമമാക്കേണ്ടതുണ്ട്.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'പോർട്രെയ്‌റ്റ് മോഡിൽ ഈ പേജ് ഏറ്റവും മികച്ചതായി കാണാനാകും',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'ക്ഷമിക്കണം, നിങ്ങളുടെ ബ്രൗസർ ഈ അനുഭവത്തെ ' +
-      'പിന്തുണയ്ക്കുന്നില്ലെന്ന് തോന്നുന്നു',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/ml.json b/extensions/amp-story/1.0/_locales/ml.json
new file mode 100644
index 0000000000000..942845d6d53b5
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/ml.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "'അടുത്തത്' ടാപ്പ് ചെയ്യുക"},
+  "3": {"string": "'മടങ്ങുക' ടാപ്പ് ചെയ്യുക"},
+  "4": {"string": "ക്ലിപ്പ്ബോർഡിലേക്ക് ലിങ്ക് പകർത്താനായില്ല :("},
+  "5": {"string": "ലിങ്ക് പകർത്തി!"},
+  "6": {"string": "ഇമെയിൽ"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "ലിങ്ക് സ്വന്തമാക്കുക"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "ഈ അനുഭവം കാണാൻ നിങ്ങളുടെ വിൻഡോയുടെ ഉയരവും വീതിയും കൂട്ടുക"},
+  "19": {
+    "string": "ഈ ഉള്ളടക്കം കാണാൻ AMP സ്‌റ്റോറി പരീക്ഷണം നിങ്ങൾ പ്രവർത്തനക്ഷമമാക്കേണ്ടതുണ്ട്."
+  },
+  "20": {"string": "പോർട്രെയ്‌റ്റ് മോഡിൽ ഈ പേജ് ഏറ്റവും മികച്ചതായി കാണാനാകും"},
+  "21": {
+    "string": "ക്ഷമിക്കണം, നിങ്ങളുടെ ബ്രൗസർ ഈ അനുഭവത്തെ പിന്തുണയ്ക്കുന്നില്ലെന്ന് തോന്നുന്നു"
+  },
+  "22": {"string": "അംഗീകരിക്കുക"},
+  "23": {"string": "നിരസിക്കുക"},
+  "25": {"string": "ഒറിജിനൽ ഡൊമെയ്‌നിൽ കാണുക:"},
+  "26": {"string": "AMP ഫലങ്ങളെക്കുറിച്ച് കൂടുതൽ"},
+  "27": {"string": "എന്തായാലും തുടരുക"},
+  "31": {"string": "ശബ്‌ദം ഓഫ് ചെയ്യുക"},
+  "32": {"string": "ശബ്‌ദം ഓണാണ്"},
+  "33": {"string": "ഈ പേജിന് ശബ്‌ദമില്ല"},
+  "34": {"string": "വീഡിയോ പ്ലേ ചെയ്യുക"},
+  "35": {"string": "മുകളിലോട്ട് സ്വൈപ്പ് ചെയ്യുക"},
+  "36": {"string": "ട്വീറ്റ് വികസിപ്പിക്കുക"},
+  "37": {"string": "ഈ അനുഭവം കാണാൻ നിങ്ങളുടെ വിൻഡോയുടെ ഉയരം കൂട്ടുക"},
+  "38": {"string": "ഈ അനുഭവം കാണാൻ നിങ്ങളുടെ വിൻഡോയുടെ വീതി കൂട്ടുക"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/mn.js b/extensions/amp-story/1.0/_locales/mn.js
deleted file mode 100644
index 91a0987870433..0000000000000
--- a/extensions/amp-story/1.0/_locales/mn.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for mn strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Дуу унтраалттай',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Энэ хуудас дуугүй',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Дуу асаалттай',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Бусдыг нь унших',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Өгөгдлийн нууцлалын тохиргоог өөрчлөх',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Нууцлалын тохиргоо',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Зөвшөөрөх',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Татгалзах',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Ямар ч үед үргэлжлүүлэх',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Эх домэйн дээр харах:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP хайлтын талаарх дэлгэрэнгүй',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Дараах руу товших',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Буцахыг товших',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Дээш шудрах',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Видео тоглуулах',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Холбоосыг түр санах ойд хуулж чадсангүй :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Холбоосыг хуулсан!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Имэйл',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Холбоос авах',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Жиргээг дэлгэх',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Энэ хэрэглээг харахын тулд цонхоо өндрөөр нь дэлгэнэ үү',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Энэ хэрэглээг харахын тулд цонхоо өндөр, өргөнөөр нь дэлгэнэ үү',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Энэ хэрэглээг харахын тулд цонхоо өргөнөөр нь дэлгэнэ үү',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Та энэ контентыг харахын тулд amp түүхийн туршилтыг идэвхжүүлэх ' +
-      'ёстой.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Хуудсыг босоо горимд хамгийн их харсан',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Уучлаарай, таны хөтөч энэ хэрэглээг дэмждэггүй бололтой',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/mn.json b/extensions/amp-story/1.0/_locales/mn.json
new file mode 100644
index 0000000000000..c6821338a99d3
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/mn.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "Дараах руу товших"},
+  "3": {"string": "Буцахыг товших"},
+  "4": {"string": "Холбоосыг түр санах ойд хуулж чадсангүй :("},
+  "5": {"string": "Холбоосыг хуулсан!"},
+  "6": {"string": "Имэйл"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Холбоос авах"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Энэ хэрэглээг харахын тулд цонхоо өндөр, өргөнөөр нь дэлгэнэ үү"
+  },
+  "19": {
+    "string": "Та энэ контентыг харахын тулд amp түүхийн туршилтыг идэвхжүүлэх ёстой."
+  },
+  "20": {"string": "Хуудсыг босоо горимд хамгийн их харсан"},
+  "21": {"string": "Уучлаарай, таны хөтөч энэ хэрэглээг дэмждэггүй бололтой"},
+  "22": {"string": "Зөвшөөрөх"},
+  "23": {"string": "Татгалзах"},
+  "25": {"string": "Эх домэйн дээр харах:"},
+  "26": {"string": "AMP хайлтын талаарх дэлгэрэнгүй"},
+  "27": {"string": "Ямар ч үед үргэлжлүүлэх"},
+  "31": {"string": "Дуу унтраалттай"},
+  "32": {"string": "Дуу асаалттай"},
+  "33": {"string": "Энэ хуудас дуугүй"},
+  "34": {"string": "Видео тоглуулах"},
+  "35": {"string": "Дээш шудрах"},
+  "36": {"string": "Жиргээг дэлгэх"},
+  "37": {"string": "Энэ хэрэглээг харахын тулд цонхоо өндрөөр нь дэлгэнэ үү"},
+  "38": {"string": "Энэ хэрэглээг харахын тулд цонхоо өргөнөөр нь дэлгэнэ үү"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/mr.js b/extensions/amp-story/1.0/_locales/mr.js
deleted file mode 100644
index dbbdb0ab46150..0000000000000
--- a/extensions/amp-story/1.0/_locales/mr.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for mr strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'आवाज बंद',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'या पेजमध्ये आवाज नाही',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'आवाज सुरू',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'वाचण्यासाठी आणखी',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'डेटा गोपनीयता सेटिंग्ज बदला',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'गोपनीयता सेटिंग्ज',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'स्वीकारा',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'नकार द्या',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'तरीही सुरू ठेवा',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'मूळ डोमेनवर पाहा:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP परिणामांविषयी आणखी',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'पुढीलवर टॅप करा',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'मागेवर टॅप करा',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'वर स्वाइप करा',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'व्हिडिओ प्ले करा',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'लिंक क्लिपबोर्डवर कॉपी करता आली नाही :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'लिंक कॉपी केली!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ईमेल',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'लिंक मिळवा',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'एसएमएस',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ट्वीट विस्तृत करा',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'हा प्रयोग पाहाण्यासाठी तुमच्या विंडोच्या उंचीचा विस्तार करा',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'हा प्रयोग पाहाण्यासाठी तुमच्या विंडोची उंची आणि रूंदी दोन्हींचा ' +
-      'विस्तार करा',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'हा प्रयोग पाहाण्यासाठी तुमच्या विंडोची रूंदीचा विस्तार करा',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'तुम्ही हा आशय पाहाण्यासाठी AMP स्टोरी प्रयोग सुरू करणे आवश्यक आहे.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'पेज पोर्ट्रेट मोडमध्ये उत्तम पाहिले जाते',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'आम्ही क्षमस्व आहोत, तुमचा ब्राउझर या प्रयोगाला सपोर्ट करत ' +
-      'नसल्याचे दिसते',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/mr.json b/extensions/amp-story/1.0/_locales/mr.json
new file mode 100644
index 0000000000000..cf71875e91740
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/mr.json
@@ -0,0 +1,44 @@
+{
+  "2": {"string": "पुढीलवर टॅप करा"},
+  "3": {"string": "मागेवर टॅप करा"},
+  "4": {"string": "लिंक क्लिपबोर्डवर कॉपी करता आली नाही :("},
+  "5": {"string": "लिंक कॉपी केली!"},
+  "6": {"string": "ईमेल"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "लिंक मिळवा"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "एसएमएस"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "हा प्रयोग पाहाण्यासाठी तुमच्या विंडोची उंची आणि रूंदी दोन्हींचा विस्तार करा"
+  },
+  "19": {
+    "string": "तुम्ही हा आशय पाहाण्यासाठी AMP स्टोरी प्रयोग सुरू करणे आवश्यक आहे."
+  },
+  "20": {"string": "पेज पोर्ट्रेट मोडमध्ये उत्तम पाहिले जाते"},
+  "21": {
+    "string": "आम्ही क्षमस्व आहोत, तुमचा ब्राउझर या प्रयोगाला सपोर्ट करत नसल्याचे दिसते"
+  },
+  "22": {"string": "स्वीकारा"},
+  "23": {"string": "नकार द्या"},
+  "25": {"string": "मूळ डोमेनवर पाहा:"},
+  "26": {"string": "AMP परिणामांविषयी आणखी"},
+  "27": {"string": "तरीही सुरू ठेवा"},
+  "31": {"string": "आवाज बंद"},
+  "32": {"string": "आवाज सुरू"},
+  "33": {"string": "या पेजमध्ये आवाज नाही"},
+  "34": {"string": "व्हिडिओ प्ले करा"},
+  "35": {"string": "वर स्वाइप करा"},
+  "36": {"string": "ट्वीट विस्तृत करा"},
+  "37": {
+    "string": "हा प्रयोग पाहाण्यासाठी तुमच्या विंडोच्या उंचीचा विस्तार करा"
+  },
+  "38": {
+    "string": "हा प्रयोग पाहाण्यासाठी तुमच्या विंडोची रूंदीचा विस्तार करा"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/ms.js b/extensions/amp-story/1.0/_locales/ms.js
deleted file mode 100644
index 29ccc1d6c44fb..0000000000000
--- a/extensions/amp-story/1.0/_locales/ms.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ms strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Bunyi dimatikan',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Halaman ini tiada bunyi',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Bunyi dihidupkan',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Lagi untuk dibaca',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Tukar tetapan privasi data',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Tetapan privasi',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Terima',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Tolak',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Teruskan Juga',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Lihat pada domain asal:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Lagi tentang hasil AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Ketik Seterusnya',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Ketik Kembali',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Leret ke atas',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Mainkan video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Tidak dapat menyalin pautan ke papan keratan :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Pautan disalin!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-mel',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Dapatkan Pautan',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Kembangkan Twit',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Kembangkan ketinggian tetingkap anda untuk melihat pengalaman ini',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Kembangkan kedua-dua ketinggian dan lebar tetingkap anda untuk ' +
-      'melihat pengalaman ini',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Kembangkan lebar tetingkap anda untuk melihat pengalaman ini',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Anda mesti mendayakan eksperimen cerita amp untuk melihat ' +
-      'kandungan ini.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Halaman ini terbaik dilihat dalam mod potret',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'Maaf, nampaknya penyemak imbas anda tidak menyokong pengalaman ini',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/ms.json b/extensions/amp-story/1.0/_locales/ms.json
new file mode 100644
index 0000000000000..be0eac8f381c2
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/ms.json
@@ -0,0 +1,44 @@
+{
+  "2": {"string": "Ketik Seterusnya"},
+  "3": {"string": "Ketik Kembali"},
+  "4": {"string": "Tidak dapat menyalin pautan ke papan keratan :("},
+  "5": {"string": "Pautan disalin!"},
+  "6": {"string": "E-mel"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Dapatkan Pautan"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Kembangkan kedua-dua ketinggian dan lebar tetingkap anda untuk melihat pengalaman ini"
+  },
+  "19": {
+    "string": "Anda mesti mendayakan eksperimen cerita amp untuk melihat kandungan ini."
+  },
+  "20": {"string": "Halaman ini terbaik dilihat dalam mod potret"},
+  "21": {
+    "string": "Maaf, nampaknya penyemak imbas anda tidak menyokong pengalaman ini"
+  },
+  "22": {"string": "Terima"},
+  "23": {"string": "Tolak"},
+  "25": {"string": "Lihat pada domain asal:"},
+  "26": {"string": "Lagi tentang hasil AMP"},
+  "27": {"string": "Teruskan Juga"},
+  "31": {"string": "Bunyi dimatikan"},
+  "32": {"string": "Bunyi dihidupkan"},
+  "33": {"string": "Halaman ini tiada bunyi"},
+  "34": {"string": "Mainkan video"},
+  "35": {"string": "Leret ke atas"},
+  "36": {"string": "Kembangkan Twit"},
+  "37": {
+    "string": "Kembangkan ketinggian tetingkap anda untuk melihat pengalaman ini"
+  },
+  "38": {
+    "string": "Kembangkan lebar tetingkap anda untuk melihat pengalaman ini"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/my.js b/extensions/amp-story/1.0/_locales/my.js
deleted file mode 100644
index 500a976d46f55..0000000000000
--- a/extensions/amp-story/1.0/_locales/my.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for my strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'အသံပိတ်ထားသည်',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'ဤစာမျက်နှာတွင် အသံမပါရှိပါ',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'အသံဖွင့်ထားသည်',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'နောက်ထပ် ဖတ်ရန်များ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'ဒေတာ ကန့်သတ်ဆက်တင်များ ပြောင်းရန်',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'ကန့်သတ်ဆက်တင်များ',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'လက်ခံရန်',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'ငြင်းပယ်ရန်',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'မည်သို့ပင်ဖြစ်စေ ရှေ့ဆက်ရန်',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'မူရင်းဒိုမိန်းတွင် ကြည့်ခြင်း-',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP ရလဒ်များအကြောင်း နောက်ထပ် အချက်အလက်',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: "'ရှေ့သို့' ကိုတို့ရန်",
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: "'နောက်သို့' ကိုတို့ရန်",
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'အပေါ်သို့ ပွတ်ဆွဲရန်',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'ဗီဒီယို ဖွင့်ရန်',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'ကလစ်ဘုတ်သို့ လင့်ခ်ကို မိတ္တူကူး၍ မရပါ :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'လင့်ခ်ကို မိတ္တူကူးပြီးပါပြီ။',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'အီးမေးလ်',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'လင့်ခ်ရယူရန်',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS စာတိုစနစ်',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'တွိကို ချဲ့ပြရန်',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'ဤဇာတ်လမ်းများကိုကြည့်ရန် သင့်ဝင်းဒိုး၏ အမြင့်ကို ချဲ့ပါ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'ဤဇာတ်လမ်းများကိုကြည့်ရန် သင့်ဝင်းဒိုး၏ အမြင့်နှင့်အကျယ် ' +
-      'နှစ်ခုစလုံးကို ချဲ့ပါ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'ဤဇာတ်လမ်းများကိုကြည့်ရန် သင့်ဝင်းဒိုး၏ အကျယ်ကို ချဲ့ပါ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'ဤအကြောင်းအရာကို ကြည့်ရန် amp ဇာတ်လမ်း စမ်းသပ်မှုကို ဖွင့်ထားရမည်။',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string:
-      'ဤစာမျက်နှာကို ထောင်လိုက်အနေအထားတွင် ကြည့်လျှင် ' +
-      'အကောင်းဆုံးဖြစ်ပါသည်',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'သင့်ဘရောင်ဇာသည် ဤဇာတ်လမ်းများကို ပံ့ပိုးပုံမရပါ',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/my.json b/extensions/amp-story/1.0/_locales/my.json
new file mode 100644
index 0000000000000..9646687a3f011
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/my.json
@@ -0,0 +1,40 @@
+{
+  "2": {"string": "'ရှေ့သို့' ကိုတို့ရန်"},
+  "3": {"string": "'နောက်သို့' ကိုတို့ရန်"},
+  "4": {"string": "ကလစ်ဘုတ်သို့ လင့်ခ်ကို မိတ္တူကူး၍ မရပါ :("},
+  "5": {"string": "လင့်ခ်ကို မိတ္တူကူးပြီးပါပြီ။"},
+  "6": {"string": "အီးမေးလ်"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "လင့်ခ်ရယူရန်"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS စာတိုစနစ်"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "ဤဇာတ်လမ်းများကိုကြည့်ရန် သင့်ဝင်းဒိုး၏ အမြင့်နှင့်အကျယ် နှစ်ခုစလုံးကို ချဲ့ပါ"
+  },
+  "19": {
+    "string": "ဤအကြောင်းအရာကို ကြည့်ရန် amp ဇာတ်လမ်း စမ်းသပ်မှုကို ဖွင့်ထားရမည်။"
+  },
+  "20": {
+    "string": "ဤစာမျက်နှာကို ထောင်လိုက်အနေအထားတွင် ကြည့်လျှင် အကောင်းဆုံးဖြစ်ပါသည်"
+  },
+  "21": {"string": "သင့်ဘရောင်ဇာသည် ဤဇာတ်လမ်းများကို ပံ့ပိုးပုံမရပါ"},
+  "22": {"string": "လက်ခံရန်"},
+  "23": {"string": "ငြင်းပယ်ရန်"},
+  "25": {"string": "မူရင်းဒိုမိန်းတွင် ကြည့်ခြင်း-"},
+  "26": {"string": "AMP ရလဒ်များအကြောင်း နောက်ထပ် အချက်အလက်"},
+  "27": {"string": "မည်သို့ပင်ဖြစ်စေ ရှေ့ဆက်ရန်"},
+  "31": {"string": "အသံပိတ်ထားသည်"},
+  "32": {"string": "အသံဖွင့်ထားသည်"},
+  "33": {"string": "ဤစာမျက်နှာတွင် အသံမပါရှိပါ"},
+  "34": {"string": "ဗီဒီယို ဖွင့်ရန်"},
+  "35": {"string": "အပေါ်သို့ ပွတ်ဆွဲရန်"},
+  "36": {"string": "တွိကို ချဲ့ပြရန်"},
+  "37": {"string": "ဤဇာတ်လမ်းများကိုကြည့်ရန် သင့်ဝင်းဒိုး၏ အမြင့်ကို ချဲ့ပါ"},
+  "38": {"string": "ဤဇာတ်လမ်းများကိုကြည့်ရန် သင့်ဝင်းဒိုး၏ အကျယ်ကို ချဲ့ပါ"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/ne.js b/extensions/amp-story/1.0/_locales/ne.js
deleted file mode 100644
index e3996670fef03..0000000000000
--- a/extensions/amp-story/1.0/_locales/ne.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ne strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'ध्वनि निष्क्रिय भयो',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'यो पृष्ठ आवाजविहीन छ',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'ध्वनि सक्रिय भयो',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'पढ्न सकिने थप कुरा',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'डेटाको गोपनीयतासम्बन्धी सेटिङहरू परिवर्तन गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'गोपनीयतासम्बन्धी सेटिङहरू',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'स्वीकार गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'अस्वीकार गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'जे भए पनि जारी राख्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'मूल डोमेनमा हेर्नुहोस्:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP का परिणामबारे थप जानकारी',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'अर्को नामक विकल्पमा ट्याप गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'पछाडि नामक विकल्पमा ट्याप गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'माथितिर स्वाइप गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'भिडियो प्ले गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'क्लिपबोर्डमा लिंक प्रतिलिपि गर्न सकिएन :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'लिंक प्रतिलिपि गरियो!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'इमेल',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'लिंक प्राप्त गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ट्विट विस्तृत गर्नुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'यो अनुभव हेर्न आफ्नो विन्डोको उचाइ बढाउनुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'यो अनुभव हेर्न आफ्नो विन्डोको उचाइ र चौडाइ दुवै बढाउनुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'यो अनुभव हेर्न आफ्नो विन्डोको चौडाइ बढाउनुहोस्',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'यो सामग्री हेर्न तपाईंले अनिवार्य रूपमा amp स्टोरीको परीक्षण ' +
-      'सक्षम पार्नु पर्छ।',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'यो पृष्ठ पोर्ट्रेट मोडमा हेर्दा राम्रो देखिन्छ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'माफ गर्नुहोला, तपाईंको ब्राउजरले यो अनुभवको समर्थन गर्दैन जस्तो ' +
-      'देखिन्छ',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/ne.json b/extensions/amp-story/1.0/_locales/ne.json
new file mode 100644
index 0000000000000..8b5b5a57b1c3d
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/ne.json
@@ -0,0 +1,40 @@
+{
+  "2": {"string": "अर्को नामक विकल्पमा ट्याप गर्नुहोस्"},
+  "3": {"string": "पछाडि नामक विकल्पमा ट्याप गर्नुहोस्"},
+  "4": {"string": "क्लिपबोर्डमा लिंक प्रतिलिपि गर्न सकिएन :("},
+  "5": {"string": "लिंक प्रतिलिपि गरियो!"},
+  "6": {"string": "इमेल"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "लिंक प्राप्त गर्नुहोस्"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "यो अनुभव हेर्न आफ्नो विन्डोको उचाइ र चौडाइ दुवै बढाउनुहोस्"
+  },
+  "19": {
+    "string": "यो सामग्री हेर्न तपाईंले अनिवार्य रूपमा amp स्टोरीको परीक्षण सक्षम पार्नु पर्छ।"
+  },
+  "20": {"string": "यो पृष्ठ पोर्ट्रेट मोडमा हेर्दा राम्रो देखिन्छ"},
+  "21": {
+    "string": "माफ गर्नुहोला, तपाईंको ब्राउजरले यो अनुभवको समर्थन गर्दैन जस्तो देखिन्छ"
+  },
+  "22": {"string": "स्वीकार गर्नुहोस्"},
+  "23": {"string": "अस्वीकार गर्नुहोस्"},
+  "25": {"string": "मूल डोमेनमा हेर्नुहोस्:"},
+  "26": {"string": "AMP का परिणामबारे थप जानकारी"},
+  "27": {"string": "जे भए पनि जारी राख्नुहोस्"},
+  "31": {"string": "ध्वनि निष्क्रिय भयो"},
+  "32": {"string": "ध्वनि सक्रिय भयो"},
+  "33": {"string": "यो पृष्ठ आवाजविहीन छ"},
+  "34": {"string": "भिडियो प्ले गर्नुहोस्"},
+  "35": {"string": "माथितिर स्वाइप गर्नुहोस्"},
+  "36": {"string": "ट्विट विस्तृत गर्नुहोस्"},
+  "37": {"string": "यो अनुभव हेर्न आफ्नो विन्डोको उचाइ बढाउनुहोस्"},
+  "38": {"string": "यो अनुभव हेर्न आफ्नो विन्डोको चौडाइ बढाउनुहोस्"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/nl.js b/extensions/amp-story/1.0/_locales/nl.js
deleted file mode 100644
index 7ebaa3ec5bb60..0000000000000
--- a/extensions/amp-story/1.0/_locales/nl.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for nl strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Geluid uit',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Deze pagina heeft geen geluid',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Geluid aan',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Meer om te lezen',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Privacyinstellingen voor gegevens wijzigen',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Privacyinstellingen',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Accepteren',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Weigeren',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Toch doorgaan',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Bekijken op oorspronkelijk domein:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Meer over AMP-resultaten',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Tik op Volgende',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Tik op Terug',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Omhoog vegen',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Video afspelen',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Kan link niet kopiëren naar klembord :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Link gekopieerd',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-mail',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Link ophalen',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'Sms',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Tweet uitvouwen',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Maak je venster hoger om deze functionaliteit te bekijken',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Maak je venster hoger en breder om deze functionaliteit te ' +
-      'bekijken',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Maak je venster breder om deze functionaliteit te bekijken',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Je moet het amp-story-experiment inschakelen om deze content te ' +
-      'bekijken.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'De pagina kan het beste worden bekeken in de staande modus',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Je browser ondersteunt deze functionaliteit niet',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/nl.json b/extensions/amp-story/1.0/_locales/nl.json
new file mode 100644
index 0000000000000..be7f8f9222b9e
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/nl.json
@@ -0,0 +1,42 @@
+{
+  "2": {"string": "Tik op Volgende"},
+  "3": {"string": "Tik op Terug"},
+  "4": {"string": "Kan link niet kopiëren naar klembord :("},
+  "5": {"string": "Link gekopieerd"},
+  "6": {"string": "E-mail"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Link ophalen"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "Sms"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Maak je venster hoger en breder om deze functionaliteit te bekijken"
+  },
+  "19": {
+    "string": "Je moet het amp-story-experiment inschakelen om deze content te bekijken."
+  },
+  "20": {
+    "string": "De pagina kan het beste worden bekeken in de staande modus"
+  },
+  "21": {"string": "Je browser ondersteunt deze functionaliteit niet"},
+  "22": {"string": "Accepteren"},
+  "23": {"string": "Weigeren"},
+  "25": {"string": "Bekijken op oorspronkelijk domein:"},
+  "26": {"string": "Meer over AMP-resultaten"},
+  "27": {"string": "Toch doorgaan"},
+  "31": {"string": "Geluid uit"},
+  "32": {"string": "Geluid aan"},
+  "33": {"string": "Deze pagina heeft geen geluid"},
+  "34": {"string": "Video afspelen"},
+  "35": {"string": "Omhoog vegen"},
+  "36": {"string": "Tweet uitvouwen"},
+  "37": {"string": "Maak je venster hoger om deze functionaliteit te bekijken"},
+  "38": {
+    "string": "Maak je venster breder om deze functionaliteit te bekijken"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/no.js b/extensions/amp-story/1.0/_locales/no.js
deleted file mode 100644
index 94eac367d0df0..0000000000000
--- a/extensions/amp-story/1.0/_locales/no.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for no strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Lyd av',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Denne siden har ikke noe lyd',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Lyd på',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Mer å lese',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Endre personverninnstillingene for data',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Personverninnstillinger',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Godta',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Avslå',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Fortsett likevel',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Se på det opprinnelige domenet:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Mer om AMP-resultater',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Trykk på Neste',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Trykk på Tilbake',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Sveip opp',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Spill av videoen',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Kunne ikke kopiere linken til utklippstavlen :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Linken er kopiert.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-post',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Hent linken',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Vis Twitter-meldingen',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Gjør vinduet ditt større for å se denne opplevelsen',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Gjør vinduet ditt større for å se denne opplevelsen',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Gjør vinduet ditt bredere for å se denne opplevelsen',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Du må aktivere eksperimentet med AMP-snuttsamlinger for å se ' +
-      'dette innholdet.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Den beste visningen av siden er i stående retning',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'Beklager, men det ser ut til at nettleseren din ikke støtter ' +
-      'denne opplevelsen',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/no.json b/extensions/amp-story/1.0/_locales/no.json
new file mode 100644
index 0000000000000..26730a2c4f576
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/no.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "Trykk på Neste"},
+  "3": {"string": "Trykk på Tilbake"},
+  "4": {"string": "Kunne ikke kopiere linken til utklippstavlen :("},
+  "5": {"string": "Linken er kopiert."},
+  "6": {"string": "E-post"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Hent linken"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "Gjør vinduet ditt større for å se denne opplevelsen"},
+  "19": {
+    "string": "Du må aktivere eksperimentet med AMP-snuttsamlinger for å se dette innholdet."
+  },
+  "20": {"string": "Den beste visningen av siden er i stående retning"},
+  "21": {
+    "string": "Beklager, men det ser ut til at nettleseren din ikke støtter denne opplevelsen"
+  },
+  "22": {"string": "Godta"},
+  "23": {"string": "Avslå"},
+  "25": {"string": "Se på det opprinnelige domenet:"},
+  "26": {"string": "Mer om AMP-resultater"},
+  "27": {"string": "Fortsett likevel"},
+  "31": {"string": "Lyd av"},
+  "32": {"string": "Lyd på"},
+  "33": {"string": "Denne siden har ikke noe lyd"},
+  "34": {"string": "Spill av videoen"},
+  "35": {"string": "Sveip opp"},
+  "36": {"string": "Vis Twitter-meldingen"},
+  "37": {"string": "Gjør vinduet ditt større for å se denne opplevelsen"},
+  "38": {"string": "Gjør vinduet ditt bredere for å se denne opplevelsen"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/pa.js b/extensions/amp-story/1.0/_locales/pa.js
deleted file mode 100644
index 884adbe7db75c..0000000000000
--- a/extensions/amp-story/1.0/_locales/pa.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for pa strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'ਧੁਨੀ ਬੰਦ',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'ਇਸ ਪੰਨੇ ਵਿੱਚ ਕੋਈ ਧੁਨੀ ਨਹੀਂ ਹੈ',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'ਧੁਨੀ ਚਾਲੂ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'ਹੋਰ ਪੜ੍ਹੋ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'ਡਾਟਾ ਪਰਦੇਦਾਰੀ ਸੈਟਿੰਗਾਂ ਨੂੰ ਬਦਲੋ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'ਪਰਦੇਦਾਰੀ ਸੈਟਿੰਗਾਂ',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'ਸਵੀਕਾਰ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'ਅਸਵੀਕਾਰ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'ਫਿਰ ਵੀ ਜਾਰੀ ਰੱਖੋ',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: "ਮੂਲ ਡੋਮੇਨ 'ਤੇ ਦੇਖੋ:",
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP ਨਤੀਜਿਆਂ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: "'ਅੱਗੇ' 'ਤੇ ਟੈਪ ਕਰੋ",
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: "'ਪਿੱਛੇ ਜਾਓ' 'ਤੇ ਟੈਪ ਕਰੋ",
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'ਉੱਪਰ ਵੱਲ ਸਵਾਈਪ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'ਵੀਡੀਓ ਚਲਾਓ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: "ਲਿੰਕ ਨੂੰ ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਕਾਪੀ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਿਆ :(",
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'ਲਿੰਕ ਕਾਪੀ ਕੀਤਾ ਗਿਆ!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ਈਮੇਲ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'ਲਿੰਕ ਪ੍ਰਾਪਤ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ਟਵੀਟ ਦਾ ਵਿਸਤਾਰ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'ਇਸ ਅਨੁਭਵ ਨੂੰ ਦੇਖਣ ਲਈ ਆਪਣੀ ਵਿੰਡੋ ਦੀ ਉਚਾਈ ਦਾ ਵਿਸਤਾਰ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'ਇਸ ਅਨੁਭਵ ਨੂੰ ਦੇਖਣ ਲਈ ਆਪਣੀ ਵਿੰਡੋ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਦਾ ਵਿਸਤਾਰ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'ਇਸ ਅਨੁਭਵ ਨੂੰ ਦੇਖਣ ਲਈ ਆਪਣੀ ਵਿੰਡੋ ਦੀ ਚੌੜਾਈ ਦਾ ਵਿਸਤਾਰ ਕਰੋ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'ਇਸ ਸਮੱਗਰੀ ਨੂੰ ਦੇਖਣ ਲਈ ਤੁਹਾਨੂੰ AMP ਕਹਾਣੀ ਪ੍ਰਯੋਗ ਨੂੰ ਚਾਲੂ ਕਰਨਾ ' +
-      'ਲਾਜ਼ਮੀ ਹੈ।',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'ਪੰਨਾ ਪੋਰਟ੍ਰੇਟ ਮੋਡ ਵਿੱਚ ਚੰਗੀ ਤਰ੍ਹਾਂ ਦਿਸਦਾ ਹੈ',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'ਮਾਫ਼ ਕਰਨਾ, ਇੰਝ ਲੱਗਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਇਸ ਅਨੁਭਵ ਦੀ ' +
-      'ਸੁਵਿਧਾ ਨਹੀਂ ਹੈ',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/pa.json b/extensions/amp-story/1.0/_locales/pa.json
new file mode 100644
index 0000000000000..92266b68d7b31
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/pa.json
@@ -0,0 +1,40 @@
+{
+  "2": {"string": "'ਅੱਗੇ' 'ਤੇ ਟੈਪ ਕਰੋ"},
+  "3": {"string": "'ਪਿੱਛੇ ਜਾਓ' 'ਤੇ ਟੈਪ ਕਰੋ"},
+  "4": {"string": "ਲਿੰਕ ਨੂੰ ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਕਾਪੀ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਿਆ :("},
+  "5": {"string": "ਲਿੰਕ ਕਾਪੀ ਕੀਤਾ ਗਿਆ!"},
+  "6": {"string": "ਈਮੇਲ"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "ਲਿੰਕ ਪ੍ਰਾਪਤ ਕਰੋ"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "ਇਸ ਅਨੁਭਵ ਨੂੰ ਦੇਖਣ ਲਈ ਆਪਣੀ ਵਿੰਡੋ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਦਾ ਵਿਸਤਾਰ ਕਰੋ"
+  },
+  "19": {
+    "string": "ਇਸ ਸਮੱਗਰੀ ਨੂੰ ਦੇਖਣ ਲਈ ਤੁਹਾਨੂੰ AMP ਕਹਾਣੀ ਪ੍ਰਯੋਗ ਨੂੰ ਚਾਲੂ ਕਰਨਾ ਲਾਜ਼ਮੀ ਹੈ।"
+  },
+  "20": {"string": "ਪੰਨਾ ਪੋਰਟ੍ਰੇਟ ਮੋਡ ਵਿੱਚ ਚੰਗੀ ਤਰ੍ਹਾਂ ਦਿਸਦਾ ਹੈ"},
+  "21": {
+    "string": "ਮਾਫ਼ ਕਰਨਾ, ਇੰਝ ਲੱਗਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਇਸ ਅਨੁਭਵ ਦੀ ਸੁਵਿਧਾ ਨਹੀਂ ਹੈ"
+  },
+  "22": {"string": "ਸਵੀਕਾਰ ਕਰੋ"},
+  "23": {"string": "ਅਸਵੀਕਾਰ ਕਰੋ"},
+  "25": {"string": "ਮੂਲ ਡੋਮੇਨ 'ਤੇ ਦੇਖੋ:"},
+  "26": {"string": "AMP ਨਤੀਜਿਆਂ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ"},
+  "27": {"string": "ਫਿਰ ਵੀ ਜਾਰੀ ਰੱਖੋ"},
+  "31": {"string": "ਧੁਨੀ ਬੰਦ"},
+  "32": {"string": "ਧੁਨੀ ਚਾਲੂ"},
+  "33": {"string": "ਇਸ ਪੰਨੇ ਵਿੱਚ ਕੋਈ ਧੁਨੀ ਨਹੀਂ ਹੈ"},
+  "34": {"string": "ਵੀਡੀਓ ਚਲਾਓ"},
+  "35": {"string": "ਉੱਪਰ ਵੱਲ ਸਵਾਈਪ ਕਰੋ"},
+  "36": {"string": "ਟਵੀਟ ਦਾ ਵਿਸਤਾਰ ਕਰੋ"},
+  "37": {"string": "ਇਸ ਅਨੁਭਵ ਨੂੰ ਦੇਖਣ ਲਈ ਆਪਣੀ ਵਿੰਡੋ ਦੀ ਉਚਾਈ ਦਾ ਵਿਸਤਾਰ ਕਰੋ"},
+  "38": {"string": "ਇਸ ਅਨੁਭਵ ਨੂੰ ਦੇਖਣ ਲਈ ਆਪਣੀ ਵਿੰਡੋ ਦੀ ਚੌੜਾਈ ਦਾ ਵਿਸਤਾਰ ਕਰੋ"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/pl.js b/extensions/amp-story/1.0/_locales/pl.js
deleted file mode 100644
index 2af6565837052..0000000000000
--- a/extensions/amp-story/1.0/_locales/pl.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for pl strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Dźwięk wyłączony',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Na tej stronie nie ma dźwięku',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Dźwięk włączony',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Więcej artykułów',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Zmień ustawienia prywatności danych',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Ustawienia prywatności',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Zaakceptuj',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Odrzuć',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Kontynuuj mimo to',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Zobacz w oryginalnej domenie:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Więcej informacji o wynikach AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Kliknij Dalej',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Kliknij Wstecz',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Przesuń w górę',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Odtwórz film',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Nie udało się skopiować linku do schowka :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Link skopiowany',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-mail',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Pobierz link',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Rozwiń tweeta',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Powiększ okno, by użyć tej funkcji',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Powiększ i poszerz okno, by użyć tej funkcji',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Poszerz okno, by użyć tej funkcji',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Musisz włączyć eksperyment z relacją w technologii AMP, by ' +
-      'wyświetlić te treści.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Tę stronę najlepiej oglądać w pionie',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Twoja przeglądarka nie obsługuje tej funkcji',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/pl.json b/extensions/amp-story/1.0/_locales/pl.json
new file mode 100644
index 0000000000000..1a87f8e48e633
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/pl.json
@@ -0,0 +1,36 @@
+{
+  "2": {"string": "Kliknij Dalej"},
+  "3": {"string": "Kliknij Wstecz"},
+  "4": {"string": "Nie udało się skopiować linku do schowka :("},
+  "5": {"string": "Link skopiowany"},
+  "6": {"string": "E-mail"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Pobierz link"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "Powiększ i poszerz okno, by użyć tej funkcji"},
+  "19": {
+    "string": "Musisz włączyć eksperyment z relacją w technologii AMP, by wyświetlić te treści."
+  },
+  "20": {"string": "Tę stronę najlepiej oglądać w pionie"},
+  "21": {"string": "Twoja przeglądarka nie obsługuje tej funkcji"},
+  "22": {"string": "Zaakceptuj"},
+  "23": {"string": "Odrzuć"},
+  "25": {"string": "Zobacz w oryginalnej domenie:"},
+  "26": {"string": "Więcej informacji o wynikach AMP"},
+  "27": {"string": "Kontynuuj mimo to"},
+  "31": {"string": "Dźwięk wyłączony"},
+  "32": {"string": "Dźwięk włączony"},
+  "33": {"string": "Na tej stronie nie ma dźwięku"},
+  "34": {"string": "Odtwórz film"},
+  "35": {"string": "Przesuń w górę"},
+  "36": {"string": "Rozwiń tweeta"},
+  "37": {"string": "Powiększ okno, by użyć tej funkcji"},
+  "38": {"string": "Poszerz okno, by użyć tej funkcji"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/pt-BR.js b/extensions/amp-story/1.0/_locales/pt-BR.js
deleted file mode 100644
index f4c3fdb4dd779..0000000000000
--- a/extensions/amp-story/1.0/_locales/pt-BR.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for pt-BR strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Som desativado',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Esta página não tem som',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Som ativado',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Leituras sugeridas',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Alterar as configurações de privacidade de dados',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Configurações de privacidade',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Aceitar',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Recusar',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Continuar mesmo assim',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Ver no domínio original:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Mais sobre resultados de AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Toque em "Próxima"',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Toque em "Voltar"',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Deslizar para cima',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Assistir vídeo',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Não foi possível copiar o link para a área de transferência :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Link copiado',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-mail',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Copiar link',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Expandir tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Aumente a altura da janela para ver esta experiência',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Aumente a altura e largura da janela para ver esta experiência',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Aumente a largura da janela para ver esta experiência',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Você precisa ativar o experimento amp-story para ver este ' +
-      'conteúdo.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Melhor visualização da página no modo retrato',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Parece que o navegador não é compatível com esta experiência',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/pt-BR.json b/extensions/amp-story/1.0/_locales/pt-BR.json
new file mode 100644
index 0000000000000..72fef5f216f46
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/pt-BR.json
@@ -0,0 +1,42 @@
+{
+  "2": {"string": "Toque em \"Próxima\""},
+  "3": {"string": "Toque em \"Voltar\""},
+  "4": {
+    "string": "Não foi possível copiar o link para a área de transferência :("
+  },
+  "5": {"string": "Link copiado"},
+  "6": {"string": "E-mail"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Copiar link"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Aumente a altura e largura da janela para ver esta experiência"
+  },
+  "19": {
+    "string": "Você precisa ativar o experimento amp-story para ver este conteúdo."
+  },
+  "20": {"string": "Melhor visualização da página no modo retrato"},
+  "21": {
+    "string": "Parece que o navegador não é compatível com esta experiência"
+  },
+  "22": {"string": "Aceitar"},
+  "23": {"string": "Recusar"},
+  "25": {"string": "Ver no domínio original:"},
+  "26": {"string": "Mais sobre resultados de AMP"},
+  "27": {"string": "Continuar mesmo assim"},
+  "31": {"string": "Som desativado"},
+  "32": {"string": "Som ativado"},
+  "33": {"string": "Esta página não tem som"},
+  "34": {"string": "Assistir vídeo"},
+  "35": {"string": "Deslizar para cima"},
+  "36": {"string": "Expandir tweet"},
+  "37": {"string": "Aumente a altura da janela para ver esta experiência"},
+  "38": {"string": "Aumente a largura da janela para ver esta experiência"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/pt-PT.js b/extensions/amp-story/1.0/_locales/pt-PT.js
deleted file mode 100644
index a49b767977edf..0000000000000
--- a/extensions/amp-story/1.0/_locales/pt-PT.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for pt-PT strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Som desativado',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Esta página não tem som.',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Som ativado',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Mais para ler',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Alterar as definições de privacidade dos dados',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Definições de privacidade',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Aceitar',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Recusar',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Continuar mesmo assim',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Veja no domínio original:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Mais acerca dos resultados AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Toque em Seguinte.',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Toque em Anterior',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Deslizar rapidamente para cima',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Reproduzir vídeo',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Não foi possível copiar o link para a área de transferência :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Link copiado!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Email',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Obter link',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Expandir twit',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Expanda a altura da janela para ver esta experiência.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Expanda a altura e a largura da sua janela para ver esta ' +
-      'experiência.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Expanda a largura da janela para ver esta experiência.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Tem de ativar a experiência da história AMP para ver este ' +
-      'conteúdo.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Conseguirá visualizar melhor esta página no modo retrato.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'Lamentamos, mas parece que o seu navegador não suporta esta ' +
-      'experiência.',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/pt-PT.json b/extensions/amp-story/1.0/_locales/pt-PT.json
new file mode 100644
index 0000000000000..35f054749d827
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/pt-PT.json
@@ -0,0 +1,42 @@
+{
+  "2": {"string": "Toque em Seguinte."},
+  "3": {"string": "Toque em Anterior"},
+  "4": {
+    "string": "Não foi possível copiar o link para a área de transferência :("
+  },
+  "5": {"string": "Link copiado!"},
+  "6": {"string": "Email"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Obter link"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Expanda a altura e a largura da sua janela para ver esta experiência."
+  },
+  "19": {
+    "string": "Tem de ativar a experiência da história AMP para ver este conteúdo."
+  },
+  "20": {"string": "Conseguirá visualizar melhor esta página no modo retrato."},
+  "21": {
+    "string": "Lamentamos, mas parece que o seu navegador não suporta esta experiência."
+  },
+  "22": {"string": "Aceitar"},
+  "23": {"string": "Recusar"},
+  "25": {"string": "Veja no domínio original:"},
+  "26": {"string": "Mais acerca dos resultados AMP"},
+  "27": {"string": "Continuar mesmo assim"},
+  "31": {"string": "Som desativado"},
+  "32": {"string": "Som ativado"},
+  "33": {"string": "Esta página não tem som."},
+  "34": {"string": "Reproduzir vídeo"},
+  "35": {"string": "Deslizar rapidamente para cima"},
+  "36": {"string": "Expandir twit"},
+  "37": {"string": "Expanda a altura da janela para ver esta experiência."},
+  "38": {"string": "Expanda a largura da janela para ver esta experiência."},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/ro.js b/extensions/amp-story/1.0/_locales/ro.js
deleted file mode 100644
index 13036136a3982..0000000000000
--- a/extensions/amp-story/1.0/_locales/ro.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ro strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Sunetul este dezactivat',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Pagina nu are sunet',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Sunetul este activat',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Mai multe de citit',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Schimbați setările de confidențialitate ale datelor',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Setări de confidențialitate',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Accept',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Refuz',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Continuă oricum',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Vedeți pe domeniul inițial:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Mai multe despre rezultatele AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Atingeți Înainte',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Atingeți Înapoi',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Glisați în sus',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Redați videoclipul',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Linkul nu a putut fi copiat în clipboard :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Linkul a fost copiat!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-mail',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Obțineți linkul',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Extindeți tweetul',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Extindeți înălțimea ferestrei pentru a viziona această experiență',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Extindeți înălțimea și lățimea ferestrei pentru a viziona ' +
-      'această experiență',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Extindeți lățimea ferestrei pentru a viziona această experiență',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Trebuie să activați experimentul pentru subiectul AMP ca să ' +
-      'vizionați acest conținut.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Pagina poate fi vizionată cel mai bine în modul portret',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Se pare că browserul nu acceptă această experiență',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/ro.json b/extensions/amp-story/1.0/_locales/ro.json
new file mode 100644
index 0000000000000..2d497264c1542
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/ro.json
@@ -0,0 +1,42 @@
+{
+  "2": {"string": "Atingeți Înainte"},
+  "3": {"string": "Atingeți Înapoi"},
+  "4": {"string": "Linkul nu a putut fi copiat în clipboard :("},
+  "5": {"string": "Linkul a fost copiat!"},
+  "6": {"string": "E-mail"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Obțineți linkul"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Extindeți înălțimea și lățimea ferestrei pentru a viziona această experiență"
+  },
+  "19": {
+    "string": "Trebuie să activați experimentul pentru subiectul AMP ca să vizionați acest conținut."
+  },
+  "20": {"string": "Pagina poate fi vizionată cel mai bine în modul portret"},
+  "21": {"string": "Se pare că browserul nu acceptă această experiență"},
+  "22": {"string": "Accept"},
+  "23": {"string": "Refuz"},
+  "25": {"string": "Vedeți pe domeniul inițial:"},
+  "26": {"string": "Mai multe despre rezultatele AMP"},
+  "27": {"string": "Continuă oricum"},
+  "31": {"string": "Sunetul este dezactivat"},
+  "32": {"string": "Sunetul este activat"},
+  "33": {"string": "Pagina nu are sunet"},
+  "34": {"string": "Redați videoclipul"},
+  "35": {"string": "Glisați în sus"},
+  "36": {"string": "Extindeți tweetul"},
+  "37": {
+    "string": "Extindeți înălțimea ferestrei pentru a viziona această experiență"
+  },
+  "38": {
+    "string": "Extindeți lățimea ferestrei pentru a viziona această experiență"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/ru.js b/extensions/amp-story/1.0/_locales/ru.js
deleted file mode 100644
index a9166962391ac..0000000000000
--- a/extensions/amp-story/1.0/_locales/ru.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for ru strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Звук отключен',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'В контенте на странице нет звука.',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Звук включен',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Ещё статьи',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Настройки доступа к данным',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Настройки доступа.',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Принять',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Отклонить',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Все равно продолжить',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Исходный домен:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Сведения о AMP-результатах',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Нажмите "Далее"',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Нажмите "Назад"',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Провести вверх',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Воспроизвести видео',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Не удалось скопировать ссылку в буфер обмена.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Ссылка скопирована',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'По электронной почте',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Получить ссылку',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Твиттер',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Развернуть твит',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Увеличьте высоту окна браузера, чтобы посмотреть контент.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Увеличьте высоту и ширину окна браузера, чтобы посмотреть контент.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Увеличьте ширину окна браузера, чтобы посмотреть контент.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Для доступа к этому контенту нужно включить эксперимент с ' +
-      'AMP-историями.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Страница доступна только в вертикальной ориентации.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Ваш браузер не поддерживает эту функцию.',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/ru.json b/extensions/amp-story/1.0/_locales/ru.json
new file mode 100644
index 0000000000000..d8815b0a336b8
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/ru.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "Нажмите \"Далее\""},
+  "3": {"string": "Нажмите \"Назад\""},
+  "4": {"string": "Не удалось скопировать ссылку в буфер обмена."},
+  "5": {"string": "Ссылка скопирована"},
+  "6": {"string": "По электронной почте"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Получить ссылку"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Твиттер"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Увеличьте высоту и ширину окна браузера, чтобы посмотреть контент."
+  },
+  "19": {
+    "string": "Для доступа к этому контенту нужно включить эксперимент с AMP-историями."
+  },
+  "20": {"string": "Страница доступна только в вертикальной ориентации."},
+  "21": {"string": "Ваш браузер не поддерживает эту функцию."},
+  "22": {"string": "Принять"},
+  "23": {"string": "Отклонить"},
+  "25": {"string": "Исходный домен:"},
+  "26": {"string": "Сведения о AMP-результатах"},
+  "27": {"string": "Все равно продолжить"},
+  "31": {"string": "Звук отключен"},
+  "32": {"string": "Звук включен"},
+  "33": {"string": "В контенте на странице нет звука."},
+  "34": {"string": "Воспроизвести видео"},
+  "35": {"string": "Провести вверх"},
+  "36": {"string": "Развернуть твит"},
+  "37": {"string": "Увеличьте высоту окна браузера, чтобы посмотреть контент."},
+  "38": {"string": "Увеличьте ширину окна браузера, чтобы посмотреть контент."},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/si.js b/extensions/amp-story/1.0/_locales/si.js
deleted file mode 100644
index b21666be962e7..0000000000000
--- a/extensions/amp-story/1.0/_locales/si.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for si strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'හඬ ක්‍රියා විරහිතයි',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'මෙම පිටුවේ ශබ්ද නැත',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'හඬ ක්‍රියාත්මකයි',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'තවත් කියවීමට',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'දත්ත පෞද්ගලිකත්ව සැකසීම් වෙනස් කරන්න',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'පෞද්ගලිකත්ව සැකසීම්',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'පිළිගන්න',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'ප්‍රතික්‍ෂේප කරන්න',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'කෙසේ හෝ ඉදිරියට යන්න',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'මුල් වසහ මත බලන්න:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP ප්‍රතිඵල ගැන තවත්',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: "'මීළඟ' තට්ටු කරන්න",
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: "'ආපසු' තට්ටු කරන්න",
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'ඉහළට ස්වයිප් කරන්න',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'වීඩියෝව ධාවන කරන්න',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'සබැඳිය පසුරු පුවරුවට පිටපත් කිරීමට නොහැකි විය :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'සබැඳිය පිටපත් විය!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ඉ-තැපෑල',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'සබැඳිය ලබා ගන්න',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'කෙටිපණිවුඩ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ට්වීට් එක දිග හරින්න',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'මෙම අත්දැකීම බැලීමට ඔබේ කවුළුවේ උස දිග හරින්න',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'මෙම අත්දැකීම බැලීමට ඔබේ කවුළුවේ දිග සහ පළල යන දෙකම දිග හරින්න',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'මෙම අත්දැකීම බැලීමට ඔබේ කවුළුවේ පළල දිග හරින්න',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'ඔබ මෙම අන්තර්ගතය බැලීමට amp-කතා අත්හදා බැලීම සබල කළ යුතුමයි.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'පිටුව හොඳටම බැලිය හැක්කේ ආලේඛ්‍ය ප්‍රකාරයෙනි',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'කනගාටුයි, ඔබේ බ්‍රවුසරය මෙම අත්දැකීමට සහය නොදක්වන බව පෙනේ',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/si.json b/extensions/amp-story/1.0/_locales/si.json
new file mode 100644
index 0000000000000..c1fc580db2fb6
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/si.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "'මීළඟ' තට්ටු කරන්න"},
+  "3": {"string": "'ආපසු' තට්ටු කරන්න"},
+  "4": {"string": "සබැඳිය පසුරු පුවරුවට පිටපත් කිරීමට නොහැකි විය :("},
+  "5": {"string": "සබැඳිය පිටපත් විය!"},
+  "6": {"string": "ඉ-තැපෑල"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "සබැඳිය ලබා ගන්න"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "කෙටිපණිවුඩ"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "මෙම අත්දැකීම බැලීමට ඔබේ කවුළුවේ දිග සහ පළල යන දෙකම දිග හරින්න"
+  },
+  "19": {
+    "string": "ඔබ මෙම අන්තර්ගතය බැලීමට amp-කතා අත්හදා බැලීම සබල කළ යුතුමයි."
+  },
+  "20": {"string": "පිටුව හොඳටම බැලිය හැක්කේ ආලේඛ්‍ය ප්‍රකාරයෙනි"},
+  "21": {"string": "කනගාටුයි, ඔබේ බ්‍රවුසරය මෙම අත්දැකීමට සහය නොදක්වන බව පෙනේ"},
+  "22": {"string": "පිළිගන්න"},
+  "23": {"string": "ප්‍රතික්‍ෂේප කරන්න"},
+  "25": {"string": "මුල් වසහ මත බලන්න:"},
+  "26": {"string": "AMP ප්‍රතිඵල ගැන තවත්"},
+  "27": {"string": "කෙසේ හෝ ඉදිරියට යන්න"},
+  "31": {"string": "හඬ ක්‍රියා විරහිතයි"},
+  "32": {"string": "හඬ ක්‍රියාත්මකයි"},
+  "33": {"string": "මෙම පිටුවේ ශබ්ද නැත"},
+  "34": {"string": "වීඩියෝව ධාවන කරන්න"},
+  "35": {"string": "ඉහළට ස්වයිප් කරන්න"},
+  "36": {"string": "ට්වීට් එක දිග හරින්න"},
+  "37": {"string": "මෙම අත්දැකීම බැලීමට ඔබේ කවුළුවේ උස දිග හරින්න"},
+  "38": {"string": "මෙම අත්දැකීම බැලීමට ඔබේ කවුළුවේ පළල දිග හරින්න"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/sk.js b/extensions/amp-story/1.0/_locales/sk.js
deleted file mode 100644
index adac5142a8a8e..0000000000000
--- a/extensions/amp-story/1.0/_locales/sk.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for sk strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Zvuk je vypnutý',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Táto stránka nemá zvuk',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Zvuk je zapnutý',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Ďalšie články',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Zmeniť nastavenia ochrany súkromia',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Nastavenia ochrany súkromia',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Prijať',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Odmietnuť',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Pokračovať',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Zobrazenie v pôvodnej doméne:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Ďalšie informácie o výsledkoch AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Klepnite na Ďalej',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Klepnite na Späť',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Potiahnuť prstom nahor',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Prehrať video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Odkaz sa nepodarilo skopírovať do schránky :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Odkaz bol skopírovaný.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Poslať e‑mailom',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Získať odkaz',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Rozbaliť tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Ak si chcete zobraziť toto prostredie, zväčšite výšku okna.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Ak si chcete zobraziť toto prostredie, zväčšite výšku aj šírku ' +
-      'okna.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Ak si chcete zobraziť toto prostredie, zväčšite šírku okna.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Ak si chcete zobraziť tento obsah, musíte povoliť experiment ' +
-      's príbehom AMP.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Stránka sa najlepšie zobrazí v režime portrétu',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Ľutujeme, ale váš prehliadač zrejme toto prostredie nepodporuje',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/sk.json b/extensions/amp-story/1.0/_locales/sk.json
new file mode 100644
index 0000000000000..23c2d03305637
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/sk.json
@@ -0,0 +1,44 @@
+{
+  "2": {"string": "Klepnite na Ďalej"},
+  "3": {"string": "Klepnite na Späť"},
+  "4": {"string": "Odkaz sa nepodarilo skopírovať do schránky :("},
+  "5": {"string": "Odkaz bol skopírovaný."},
+  "6": {"string": "Poslať e‑mailom"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Získať odkaz"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Ak si chcete zobraziť toto prostredie, zväčšite výšku aj šírku okna."
+  },
+  "19": {
+    "string": "Ak si chcete zobraziť tento obsah, musíte povoliť experiment s príbehom AMP."
+  },
+  "20": {"string": "Stránka sa najlepšie zobrazí v režime portrétu"},
+  "21": {
+    "string": "Ľutujeme, ale váš prehliadač zrejme toto prostredie nepodporuje"
+  },
+  "22": {"string": "Prijať"},
+  "23": {"string": "Odmietnuť"},
+  "25": {"string": "Zobrazenie v pôvodnej doméne:"},
+  "26": {"string": "Ďalšie informácie o výsledkoch AMP"},
+  "27": {"string": "Pokračovať"},
+  "31": {"string": "Zvuk je vypnutý"},
+  "32": {"string": "Zvuk je zapnutý"},
+  "33": {"string": "Táto stránka nemá zvuk"},
+  "34": {"string": "Prehrať video"},
+  "35": {"string": "Potiahnuť prstom nahor"},
+  "36": {"string": "Rozbaliť tweet"},
+  "37": {
+    "string": "Ak si chcete zobraziť toto prostredie, zväčšite výšku okna."
+  },
+  "38": {
+    "string": "Ak si chcete zobraziť toto prostredie, zväčšite šírku okna."
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/sl.js b/extensions/amp-story/1.0/_locales/sl.js
deleted file mode 100644
index 49026ed11bd90..0000000000000
--- a/extensions/amp-story/1.0/_locales/sl.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for sl strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Izklop zvoka',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Na tej strani ni zvoka',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Vklop zvoka',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Več za branje',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Spremenite nastavitve zasebnosti podatkov',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Nastavitve zasebnosti',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Sprejmi',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Zavrni',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Vseeno nadaljuj',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Ogled v izvirni domeni:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Več o rezultatih AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Dotaknite se »Naprej«.',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Dotaknite se ikone za nazaj',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Vlečenje navzgor',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Predvajanje videoposnetka',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Povezave ni bilo mogoče kopirati v odložišče. :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Povezava je kopirana.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-pošta',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Pridobi povezavo',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Razširi tvit',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Če si želite ogledati to izkušnjo, povečajte višino okna',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Če si želite ogledati to izkušnjo, povečajte višino in širino okna',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Če si želite ogledati to izkušnjo, povečajte širino okna',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Če si želite ogledati to vsebino, morate omogočiti preizkus ' +
-      'zgodb amp.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Stran si je najbolje ogledati v pokončnem načinu',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Vaš brskalnik na žalost ne podpira te izkušnje',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/sl.json b/extensions/amp-story/1.0/_locales/sl.json
new file mode 100644
index 0000000000000..8dc0260085402
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/sl.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "Dotaknite se »Naprej«."},
+  "3": {"string": "Dotaknite se ikone za nazaj"},
+  "4": {"string": "Povezave ni bilo mogoče kopirati v odložišče. :("},
+  "5": {"string": "Povezava je kopirana."},
+  "6": {"string": "E-pošta"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Pridobi povezavo"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Če si želite ogledati to izkušnjo, povečajte višino in širino okna"
+  },
+  "19": {
+    "string": "Če si želite ogledati to vsebino, morate omogočiti preizkus zgodb amp."
+  },
+  "20": {"string": "Stran si je najbolje ogledati v pokončnem načinu"},
+  "21": {"string": "Vaš brskalnik na žalost ne podpira te izkušnje"},
+  "22": {"string": "Sprejmi"},
+  "23": {"string": "Zavrni"},
+  "25": {"string": "Ogled v izvirni domeni:"},
+  "26": {"string": "Več o rezultatih AMP"},
+  "27": {"string": "Vseeno nadaljuj"},
+  "31": {"string": "Izklop zvoka"},
+  "32": {"string": "Vklop zvoka"},
+  "33": {"string": "Na tej strani ni zvoka"},
+  "34": {"string": "Predvajanje videoposnetka"},
+  "35": {"string": "Vlečenje navzgor"},
+  "36": {"string": "Razširi tvit"},
+  "37": {"string": "Če si želite ogledati to izkušnjo, povečajte višino okna"},
+  "38": {"string": "Če si želite ogledati to izkušnjo, povečajte širino okna"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/sq.js b/extensions/amp-story/1.0/_locales/sq.js
deleted file mode 100644
index 82884ad691468..0000000000000
--- a/extensions/amp-story/1.0/_locales/sq.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for sq strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Tingulli joaktiv',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Kjo faqe nuk ka tingull',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Tingulli aktiv',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Më shumë për të lexuar',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Ndrysho cilësimet e privatësisë së të dhënave',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Cilësimet e privatësisë',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Prano',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Refuzo',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Vazhdo gjithsesi',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Shiko në domenin origjinal:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Më shumë për rezultatet në AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Trokit te "Para"',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Trokit te "Pas"',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Rrëshqit lart',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Luaj videon',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Lidhja nuk mund të kopjohej te kujtesa e fragmenteve :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Lidhja u kopjua!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Email',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Merr lidhjen',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Zgjero postimin e Tweeter',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Zgjero lartësinë e dritares për të shikuar këtë eksperiencë',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Zgjero lartësinë dhe gjerësinë e dritares sate për të shikuar ' +
-      'këtë eksperiencë',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Zgjero gjeresinë e dritares për të shikuar këtë eksperiencë',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Duhet të aktivizosh eksperimentin e historisë së AMP për të ' +
-      'shikuar këtë përmbajtje.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Faqja shikohet më mirë në modalitetin e portretit',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'Na vjen keq, por duket se shfletuesi yt nuk e mbështet këtë ' +
-      'eksperiencë',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/sq.json b/extensions/amp-story/1.0/_locales/sq.json
new file mode 100644
index 0000000000000..d2627255fd6a0
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/sq.json
@@ -0,0 +1,44 @@
+{
+  "2": {"string": "Trokit te \"Para\""},
+  "3": {"string": "Trokit te \"Pas\""},
+  "4": {"string": "Lidhja nuk mund të kopjohej te kujtesa e fragmenteve :("},
+  "5": {"string": "Lidhja u kopjua!"},
+  "6": {"string": "Email"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Merr lidhjen"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Zgjero lartësinë dhe gjerësinë e dritares sate për të shikuar këtë eksperiencë"
+  },
+  "19": {
+    "string": "Duhet të aktivizosh eksperimentin e historisë së AMP për të shikuar këtë përmbajtje."
+  },
+  "20": {"string": "Faqja shikohet më mirë në modalitetin e portretit"},
+  "21": {
+    "string": "Na vjen keq, por duket se shfletuesi yt nuk e mbështet këtë eksperiencë"
+  },
+  "22": {"string": "Prano"},
+  "23": {"string": "Refuzo"},
+  "25": {"string": "Shiko në domenin origjinal:"},
+  "26": {"string": "Më shumë për rezultatet në AMP"},
+  "27": {"string": "Vazhdo gjithsesi"},
+  "31": {"string": "Tingulli joaktiv"},
+  "32": {"string": "Tingulli aktiv"},
+  "33": {"string": "Kjo faqe nuk ka tingull"},
+  "34": {"string": "Luaj videon"},
+  "35": {"string": "Rrëshqit lart"},
+  "36": {"string": "Zgjero postimin e Tweeter"},
+  "37": {
+    "string": "Zgjero lartësinë e dritares për të shikuar këtë eksperiencë"
+  },
+  "38": {
+    "string": "Zgjero gjeresinë e dritares për të shikuar këtë eksperiencë"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/sr.js b/extensions/amp-story/1.0/_locales/sr.js
deleted file mode 100644
index 4ffe4044aeb98..0000000000000
--- a/extensions/amp-story/1.0/_locales/sr.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for sr strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Звук је искључен',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Ова страница нема звук',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Звук је укључен',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Још за читање',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Промените подешавања приватности података',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Подешавања приватности',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Прихвати',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Одбиј',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Ипак настави',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Прегледајте на првобитном домену:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Више о резултатима за AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Додирните Даље',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Додирните Назад',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Превуците нагоре',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Пусти видео',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Копирање линка у привремену меморију није успело :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Линк је копиран!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Пошаљи преко имејла',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Преузми линк',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Прошири твит',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Повећајте висину прозора да бисте прегледали овај доживљај',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Повећајте висину и ширину прозора да бисте прегледали овај ' +
-      'доживљај',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Повећајте ширину прозора да бисте прегледали овај доживљај',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Морате да омогућите експеримент AMP вести да бисте прегледали ' +
-      'овај садржај.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Страница се најбоље прегледа у усправном режиму',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Жао нам је, изгледа да прегледач не подржава овај доживљај',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/sr.json b/extensions/amp-story/1.0/_locales/sr.json
new file mode 100644
index 0000000000000..6bd87f0787879
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/sr.json
@@ -0,0 +1,44 @@
+{
+  "2": {"string": "Додирните Даље"},
+  "3": {"string": "Додирните Назад"},
+  "4": {"string": "Копирање линка у привремену меморију није успело :("},
+  "5": {"string": "Линк је копиран!"},
+  "6": {"string": "Пошаљи преко имејла"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Преузми линк"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Повећајте висину и ширину прозора да бисте прегледали овај доживљај"
+  },
+  "19": {
+    "string": "Морате да омогућите експеримент AMP вести да бисте прегледали овај садржај."
+  },
+  "20": {"string": "Страница се најбоље прегледа у усправном режиму"},
+  "21": {
+    "string": "Жао нам је, изгледа да прегледач не подржава овај доживљај"
+  },
+  "22": {"string": "Прихвати"},
+  "23": {"string": "Одбиј"},
+  "25": {"string": "Прегледајте на првобитном домену:"},
+  "26": {"string": "Више о резултатима за AMP"},
+  "27": {"string": "Ипак настави"},
+  "31": {"string": "Звук је искључен"},
+  "32": {"string": "Звук је укључен"},
+  "33": {"string": "Ова страница нема звук"},
+  "34": {"string": "Пусти видео"},
+  "35": {"string": "Превуците нагоре"},
+  "36": {"string": "Прошири твит"},
+  "37": {
+    "string": "Повећајте висину прозора да бисте прегледали овај доживљај"
+  },
+  "38": {
+    "string": "Повећајте ширину прозора да бисте прегледали овај доживљај"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/sv.js b/extensions/amp-story/1.0/_locales/sv.js
deleted file mode 100644
index d241a9d238ecb..0000000000000
--- a/extensions/amp-story/1.0/_locales/sv.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for sv strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Ljud av',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Sidan har inget ljud',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Ljud på',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Mer läsning',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Ändra inställningar för datasekretess',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Sekretessinställningar',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Godkänn',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Avvisa',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Fortsätt ändå',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Visa på den ursprungliga webbplatsen:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Mer om AMP-resultat',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Tryck på Nästa',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Tryck på Tillbaka',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Svep uppåt',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Spela upp video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Det gick inte att kopiera länken till urklipp :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Länken har kopierats.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-post',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Kopiera länken',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'Sms',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Utöka tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Gör fönstret högre om du vill kunna läsa bildinlägg',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Gör fönstret högre och bredare om du vill kunna läsa bildinlägg',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Gör fönstret bredare om du vill kunna läsa bildinlägg',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Du måste aktivera experimentet med amp-story om du vill kunna ' +
-      'läsa bildinlägg.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Sidan visas bäst i stående format',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Det verkar som om webbläsaren inte har stöd för detta.',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/sv.json b/extensions/amp-story/1.0/_locales/sv.json
new file mode 100644
index 0000000000000..5db9be9177b27
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/sv.json
@@ -0,0 +1,38 @@
+{
+  "2": {"string": "Tryck på Nästa"},
+  "3": {"string": "Tryck på Tillbaka"},
+  "4": {"string": "Det gick inte att kopiera länken till urklipp :("},
+  "5": {"string": "Länken har kopierats."},
+  "6": {"string": "E-post"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Kopiera länken"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "Sms"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Gör fönstret högre och bredare om du vill kunna läsa bildinlägg"
+  },
+  "19": {
+    "string": "Du måste aktivera experimentet med amp-story om du vill kunna läsa bildinlägg."
+  },
+  "20": {"string": "Sidan visas bäst i stående format"},
+  "21": {"string": "Det verkar som om webbläsaren inte har stöd för detta."},
+  "22": {"string": "Godkänn"},
+  "23": {"string": "Avvisa"},
+  "25": {"string": "Visa på den ursprungliga webbplatsen:"},
+  "26": {"string": "Mer om AMP-resultat"},
+  "27": {"string": "Fortsätt ändå"},
+  "31": {"string": "Ljud av"},
+  "32": {"string": "Ljud på"},
+  "33": {"string": "Sidan har inget ljud"},
+  "34": {"string": "Spela upp video"},
+  "35": {"string": "Svep uppåt"},
+  "36": {"string": "Utöka tweet"},
+  "37": {"string": "Gör fönstret högre om du vill kunna läsa bildinlägg"},
+  "38": {"string": "Gör fönstret bredare om du vill kunna läsa bildinlägg"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/sw.js b/extensions/amp-story/1.0/_locales/sw.js
deleted file mode 100644
index 22c1e3766dfcb..0000000000000
--- a/extensions/amp-story/1.0/_locales/sw.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for sw strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Sauti imezimwa',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Ukurasa huu hauna sauti',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Umewasha sauti',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Mapendekezo zaidi ya kusoma',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Badilisha mipangilio ya faragha ya data',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Mipangilio ya faragha',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Kubali',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Kataa',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Endelea Tu',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Angalia kwenye kikoa halisi:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Maelezo zadi kuhusu matokeo ya AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Gusa Inayofuata',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Gusa ili urudi Nyuma',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Telezesha kidole juu',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Cheza video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Imeshindwa kunakili kiungo kwenye ubao wa kunakili :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Kiungo kimenakiliwa!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Barua pepe',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Pata Kiungo',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Panua Tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Panua urefu wa kidirisha chako ili uone hali hii',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Panua urefu na upana wa kidirisha chako ili uone hali hii',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Panua upana wa kidirisha chako ili uone hali hii',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'Lazima uwashe jaribio la habari kwenye amp ili uone maudhui haya.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Ukurasa hutazamwa vyema zaidi katika mkao wima',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Samahani, inaonekana kivinjari chako hakitumii hali hii',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/sw.json b/extensions/amp-story/1.0/_locales/sw.json
new file mode 100644
index 0000000000000..cfeebb12f2cb5
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/sw.json
@@ -0,0 +1,36 @@
+{
+  "2": {"string": "Gusa Inayofuata"},
+  "3": {"string": "Gusa ili urudi Nyuma"},
+  "4": {"string": "Imeshindwa kunakili kiungo kwenye ubao wa kunakili :("},
+  "5": {"string": "Kiungo kimenakiliwa!"},
+  "6": {"string": "Barua pepe"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Pata Kiungo"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "Panua urefu na upana wa kidirisha chako ili uone hali hii"},
+  "19": {
+    "string": "Lazima uwashe jaribio la habari kwenye amp ili uone maudhui haya."
+  },
+  "20": {"string": "Ukurasa hutazamwa vyema zaidi katika mkao wima"},
+  "21": {"string": "Samahani, inaonekana kivinjari chako hakitumii hali hii"},
+  "22": {"string": "Kubali"},
+  "23": {"string": "Kataa"},
+  "25": {"string": "Angalia kwenye kikoa halisi:"},
+  "26": {"string": "Maelezo zadi kuhusu matokeo ya AMP"},
+  "27": {"string": "Endelea Tu"},
+  "31": {"string": "Sauti imezimwa"},
+  "32": {"string": "Umewasha sauti"},
+  "33": {"string": "Ukurasa huu hauna sauti"},
+  "34": {"string": "Cheza video"},
+  "35": {"string": "Telezesha kidole juu"},
+  "36": {"string": "Panua Tweet"},
+  "37": {"string": "Panua urefu wa kidirisha chako ili uone hali hii"},
+  "38": {"string": "Panua upana wa kidirisha chako ili uone hali hii"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/ta.js b/extensions/amp-story/1.0/_locales/ta.js
deleted file mode 100644
index 43e98d57dd62e..0000000000000
--- a/extensions/amp-story/1.0/_locales/ta.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ta strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'ஒலி முடக்கப்பட்டுள்ளது',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'இந்தப் பக்கத்தில் ஒலி இல்லை',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'ஒலி இயக்கப்பட்டுள்ளது',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'மேலும் படிக்க',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'தரவுத் தனியுரிமை அமைப்புகளை மாற்று',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'தனியுரிமை அமைப்புகள்',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'ஏற்கிறேன்',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'நிராகரி',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'பரவாயில்லை, தொடர்க',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'அசல் டொமைனில் காட்டு:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP முடிவுகள் குறித்த கூடுதல் தகவல்',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: "'அடுத்தது' என்பதைத் தட்டவும்",
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: "'முந்தையது' என்பதைத் தட்டவும்",
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'மேல்நோக்கி ஸ்வைப் செய்யவும்',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'வீடியோவை இயக்கு',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'கிளிப்போர்டுக்கு இணைப்பை நகலெடுக்க முடியவில்லை :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'இணைப்பு நகலெடுக்கப்பட்டது!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'மின்னஞ்சல்',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'இணைப்பைப் பெறுக',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ட்வீட்டை விரிவாக்கும்',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string:
-      'இந்த அனுபவத்தைப் பார்க்க உங்கள் சாளரத்தின் உயரத்தை ' +
-      'விரிவுபடுத்தவும்',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'இந்த அனுபவத்தைப் பார்க்க உங்கள் சாளரத்தின் உயரத்தையும் ' +
-      'அகலத்தையும் விரிவுபடுத்தவும்',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string:
-      'இந்த அனுபவத்தைப் பார்க்க உங்கள் சாளரத்தின் அகலத்தை ' +
-      'விரிவுபடுத்தவும்',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'இந்தக் கதைகளைப் பார்க்க AMP ஸ்டோரி சோதனையை இயக்க வேண்டும்.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'பக்கத்தை போர்ட்ரெய்ட் மோடில் மட்டுமே பார்க்கலாம்',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'உங்கள் உலாவியில் இந்த அனுபவம் ஆதரிக்கப்படாதது போல் தெரிகிறது',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/ta.json b/extensions/amp-story/1.0/_locales/ta.json
new file mode 100644
index 0000000000000..ead7ea5e0c97b
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/ta.json
@@ -0,0 +1,44 @@
+{
+  "2": {"string": "'அடுத்தது' என்பதைத் தட்டவும்"},
+  "3": {"string": "'முந்தையது' என்பதைத் தட்டவும்"},
+  "4": {"string": "கிளிப்போர்டுக்கு இணைப்பை நகலெடுக்க முடியவில்லை :("},
+  "5": {"string": "இணைப்பு நகலெடுக்கப்பட்டது!"},
+  "6": {"string": "மின்னஞ்சல்"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "இணைப்பைப் பெறுக"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "இந்த அனுபவத்தைப் பார்க்க உங்கள் சாளரத்தின் உயரத்தையும் அகலத்தையும் விரிவுபடுத்தவும்"
+  },
+  "19": {
+    "string": "இந்தக் கதைகளைப் பார்க்க AMP ஸ்டோரி சோதனையை இயக்க வேண்டும்."
+  },
+  "20": {"string": "பக்கத்தை போர்ட்ரெய்ட் மோடில் மட்டுமே பார்க்கலாம்"},
+  "21": {
+    "string": "உங்கள் உலாவியில் இந்த அனுபவம் ஆதரிக்கப்படாதது போல் தெரிகிறது"
+  },
+  "22": {"string": "ஏற்கிறேன்"},
+  "23": {"string": "நிராகரி"},
+  "25": {"string": "அசல் டொமைனில் காட்டு:"},
+  "26": {"string": "AMP முடிவுகள் குறித்த கூடுதல் தகவல்"},
+  "27": {"string": "பரவாயில்லை, தொடர்க"},
+  "31": {"string": "ஒலி முடக்கப்பட்டுள்ளது"},
+  "32": {"string": "ஒலி இயக்கப்பட்டுள்ளது"},
+  "33": {"string": "இந்தப் பக்கத்தில் ஒலி இல்லை"},
+  "34": {"string": "வீடியோவை இயக்கு"},
+  "35": {"string": "மேல்நோக்கி ஸ்வைப் செய்யவும்"},
+  "36": {"string": "ட்வீட்டை விரிவாக்கும்"},
+  "37": {
+    "string": "இந்த அனுபவத்தைப் பார்க்க உங்கள் சாளரத்தின் உயரத்தை விரிவுபடுத்தவும்"
+  },
+  "38": {
+    "string": "இந்த அனுபவத்தைப் பார்க்க உங்கள் சாளரத்தின் அகலத்தை விரிவுபடுத்தவும்"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/te.js b/extensions/amp-story/1.0/_locales/te.js
deleted file mode 100644
index ca0239ea83ed9..0000000000000
--- a/extensions/amp-story/1.0/_locales/te.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for te strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'ధ్వని ఆఫ్‌లో ఉంది',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'ఈ పేజీలో ధ్వని లేదు',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'ధ్వని ఆన్‌లో ఉంది',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'ఇంకా ఉంది',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'గోప్యతా సెట్టింగ్‌లను మార్చు',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'గోప్యతా సెట్టింగ్‌లు',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'ఆమోదించు',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'తిరస్కరించు',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'ఏదేమైనా కొనసాగించు',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'అసలైన డొమైన్‌లో చూడండి:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP ఫలితాల గురించి మరింత తెలుసుకోండి',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'తర్వాత నొక్కండి',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'వెనుకకు వెళ్ళడానికి నొక్కండి',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'పైకి స్వైప్ చేయి',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'వీడియోను ప్లే చేయి',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'లింక్‌ను క్లిప్‌బోర్డ్‌కు కాపీ చేయడం సాధ్యపడలేదు :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'లింక్ కాపీ చేయబడింది!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ఇమెయిల్',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'లింక్‌ను పొందండి',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ట్వీట్‌ను విస్తరించండి',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'ఈ కథనాన్ని చూడడానికి మీ విండో యొక్క ఎత్తును పెంచండి',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'ఈ కథనాన్ని చూడడానికి మీ విండో యొక్క ఎత్తు మరియు వెడల్పును పెంచండి',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'ఈ కథనాన్ని చూడడానికి మీ విండో యొక్క వెడల్పును పెంచండి',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'ఈ కంటెంట్‌ను చూడడానికి మీరు amp కథనం ప్రయోగాన్ని ప్రారంభించాలి.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'పోర్ట్రెయిట్ మోడ్‌లో ఈ పేజీ బాగా కనబడుతుంది',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'క్షమించండి, మీ బ్రౌజర్‌లో ఈ కథనానికి మద్దతు లేదని అనిపిస్తుంది',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/te.json b/extensions/amp-story/1.0/_locales/te.json
new file mode 100644
index 0000000000000..239d6224e11ed
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/te.json
@@ -0,0 +1,40 @@
+{
+  "2": {"string": "తర్వాత నొక్కండి"},
+  "3": {"string": "వెనుకకు వెళ్ళడానికి నొక్కండి"},
+  "4": {"string": "లింక్‌ను క్లిప్‌బోర్డ్‌కు కాపీ చేయడం సాధ్యపడలేదు :("},
+  "5": {"string": "లింక్ కాపీ చేయబడింది!"},
+  "6": {"string": "ఇమెయిల్"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "లింక్‌ను పొందండి"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "ఈ కథనాన్ని చూడడానికి మీ విండో యొక్క ఎత్తు మరియు వెడల్పును పెంచండి"
+  },
+  "19": {
+    "string": "ఈ కంటెంట్‌ను చూడడానికి మీరు amp కథనం ప్రయోగాన్ని ప్రారంభించాలి."
+  },
+  "20": {"string": "పోర్ట్రెయిట్ మోడ్‌లో ఈ పేజీ బాగా కనబడుతుంది"},
+  "21": {
+    "string": "క్షమించండి, మీ బ్రౌజర్‌లో ఈ కథనానికి మద్దతు లేదని అనిపిస్తుంది"
+  },
+  "22": {"string": "ఆమోదించు"},
+  "23": {"string": "తిరస్కరించు"},
+  "25": {"string": "అసలైన డొమైన్‌లో చూడండి:"},
+  "26": {"string": "AMP ఫలితాల గురించి మరింత తెలుసుకోండి"},
+  "27": {"string": "ఏదేమైనా కొనసాగించు"},
+  "31": {"string": "ధ్వని ఆఫ్‌లో ఉంది"},
+  "32": {"string": "ధ్వని ఆన్‌లో ఉంది"},
+  "33": {"string": "ఈ పేజీలో ధ్వని లేదు"},
+  "34": {"string": "వీడియోను ప్లే చేయి"},
+  "35": {"string": "పైకి స్వైప్ చేయి"},
+  "36": {"string": "ట్వీట్‌ను విస్తరించండి"},
+  "37": {"string": "ఈ కథనాన్ని చూడడానికి మీ విండో యొక్క ఎత్తును పెంచండి"},
+  "38": {"string": "ఈ కథనాన్ని చూడడానికి మీ విండో యొక్క వెడల్పును పెంచండి"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/th.js b/extensions/amp-story/1.0/_locales/th.js
deleted file mode 100644
index eb1af44f1910d..0000000000000
--- a/extensions/amp-story/1.0/_locales/th.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for th strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'ปิดเสียง',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'หน้านี้ไม่มีเสียง',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'เปิดเสียง',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'บทความอื่นๆ',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'เปลี่ยนการตั้งค่าความเป็นส่วนตัว',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'การตั้งค่าความเป็นส่วนตัว',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'ยอมรับ',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'ปฏิเสธ',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'ดำเนินการต่อ',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'ดูในโดเมนดั้งเดิม:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'ข้อมูลเพิ่มเติมเกี่ยวกับผลการค้นหา AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'แตะ "ถัดไป"',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'แตะ "กลับ"',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'เลื่อนขึ้น',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'เล่นวิดีโอ',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'คัดลอกลิงก์ไปยังคลิปบอร์ดไม่ได้ :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'คัดลอกลิงก์แล้ว',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'อีเมล',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'ดูลิงก์',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'ขยายทวีต',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'ขยายความสูงของหน้าต่างเพื่อดูเรื่องราว',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'ขยายทั้งความกว้างและความสูงของหน้าต่างเพื่อดูเรื่องราว',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'ขยายความกว้างของหน้าต่างเพื่อดูเรื่องราว',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'คุณต้องเปิดใช้การทดสอบเรื่องราว AMP เพื่อดูเนื้อหานี้',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'หน้านี้เหมาะกับการดูในโหมดแนวตั้ง',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'ขออภัย ดูเหมือนเบราว์เซอร์ไม่รองรับประสบการณ์นี้',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/th.json b/extensions/amp-story/1.0/_locales/th.json
new file mode 100644
index 0000000000000..c2d5f75c859ea
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/th.json
@@ -0,0 +1,34 @@
+{
+  "2": {"string": "แตะ \"ถัดไป\""},
+  "3": {"string": "แตะ \"กลับ\""},
+  "4": {"string": "คัดลอกลิงก์ไปยังคลิปบอร์ดไม่ได้ :("},
+  "5": {"string": "คัดลอกลิงก์แล้ว"},
+  "6": {"string": "อีเมล"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "ดูลิงก์"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "ขยายทั้งความกว้างและความสูงของหน้าต่างเพื่อดูเรื่องราว"},
+  "19": {"string": "คุณต้องเปิดใช้การทดสอบเรื่องราว AMP เพื่อดูเนื้อหานี้"},
+  "20": {"string": "หน้านี้เหมาะกับการดูในโหมดแนวตั้ง"},
+  "21": {"string": "ขออภัย ดูเหมือนเบราว์เซอร์ไม่รองรับประสบการณ์นี้"},
+  "22": {"string": "ยอมรับ"},
+  "23": {"string": "ปฏิเสธ"},
+  "25": {"string": "ดูในโดเมนดั้งเดิม:"},
+  "26": {"string": "ข้อมูลเพิ่มเติมเกี่ยวกับผลการค้นหา AMP"},
+  "27": {"string": "ดำเนินการต่อ"},
+  "31": {"string": "ปิดเสียง"},
+  "32": {"string": "เปิดเสียง"},
+  "33": {"string": "หน้านี้ไม่มีเสียง"},
+  "34": {"string": "เล่นวิดีโอ"},
+  "35": {"string": "เลื่อนขึ้น"},
+  "36": {"string": "ขยายทวีต"},
+  "37": {"string": "ขยายความสูงของหน้าต่างเพื่อดูเรื่องราว"},
+  "38": {"string": "ขยายความกว้างของหน้าต่างเพื่อดูเรื่องราว"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/tr.js b/extensions/amp-story/1.0/_locales/tr.js
deleted file mode 100644
index bc3a7ffb30c06..0000000000000
--- a/extensions/amp-story/1.0/_locales/tr.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for tr strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Ses kapalı',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Bu sayfada ses yok',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Ses açık',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Okuyabileceğiniz diğer makaleler',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Veri gizlilik ayarlarını değiştir',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Gizlilik ayarları',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Kabul et',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Reddet',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Yine de Devam Et',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Orijinal alanda görüntüle:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP sonuçları hakkında daha fazla bilgi',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: "Sonraki'ye dokunun",
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: "Geri'ye dokunun",
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Yukarı kaydır',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Videoyu oynat',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Bağlantı panoya kopyalanamadı :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Bağlantı kopyalandı!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'E-posta',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Bağlantıyı Al',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: "Tweet'i genişlet",
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Bu deneyimi görebilmek için pencerenizin yüksekliğini artırın',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'Bu deneyimi görebilmek için pencerenizin hem yüksekliğini hem ' +
-      'de genişliğini artırın',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Bu deneyimi görebilmek için pencerenizin genişliğini artırın',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Bu içeriği görebilmek için amp hikayesi deneyimini ' +
-      'etkinleştirmeniz gerekir.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Sayfa en iyi dikey modda görüntülenir',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Maalesef tarayıcınız bu deneyimi desteklemiyor gibi görünüyor',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/tr.json b/extensions/amp-story/1.0/_locales/tr.json
new file mode 100644
index 0000000000000..6284f3e850f62
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/tr.json
@@ -0,0 +1,44 @@
+{
+  "2": {"string": "Sonraki'ye dokunun"},
+  "3": {"string": "Geri'ye dokunun"},
+  "4": {"string": "Bağlantı panoya kopyalanamadı :("},
+  "5": {"string": "Bağlantı kopyalandı!"},
+  "6": {"string": "E-posta"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Bağlantıyı Al"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Bu deneyimi görebilmek için pencerenizin hem yüksekliğini hem de genişliğini artırın"
+  },
+  "19": {
+    "string": "Bu içeriği görebilmek için amp hikayesi deneyimini etkinleştirmeniz gerekir."
+  },
+  "20": {"string": "Sayfa en iyi dikey modda görüntülenir"},
+  "21": {
+    "string": "Maalesef tarayıcınız bu deneyimi desteklemiyor gibi görünüyor"
+  },
+  "22": {"string": "Kabul et"},
+  "23": {"string": "Reddet"},
+  "25": {"string": "Orijinal alanda görüntüle:"},
+  "26": {"string": "AMP sonuçları hakkında daha fazla bilgi"},
+  "27": {"string": "Yine de Devam Et"},
+  "31": {"string": "Ses kapalı"},
+  "32": {"string": "Ses açık"},
+  "33": {"string": "Bu sayfada ses yok"},
+  "34": {"string": "Videoyu oynat"},
+  "35": {"string": "Yukarı kaydır"},
+  "36": {"string": "Tweet'i genişlet"},
+  "37": {
+    "string": "Bu deneyimi görebilmek için pencerenizin yüksekliğini artırın"
+  },
+  "38": {
+    "string": "Bu deneyimi görebilmek için pencerenizin genişliğini artırın"
+  },
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/uk.js b/extensions/amp-story/1.0/_locales/uk.js
deleted file mode 100644
index d50bfefb112f7..0000000000000
--- a/extensions/amp-story/1.0/_locales/uk.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for uk strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Звук вимкнено',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'На цій сторінці немає звуку',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Звук увімкнено',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Читати ще',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Змінити налаштування конфіденційності даних',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Налаштування конфіденційності',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Прийняти',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Відхилити',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Усе одно продовжити',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Переглянути на оригінальному домені:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Більше про результати AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Торкніться опції "Далі".',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Торкніться опції "Назад"',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Провести пальцем угору',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Дивитися відео',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Не вдалося скопіювати посилання в буфер обміну :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Посилання скопійовано.',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Електронна пошта',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Отримати посилання',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Твіттер',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Розгорнути твіт',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Щоб переглядати цей вміст, збільште висоту вікна',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Щоб переглядати цей вміст, збільште висоту й ширину вікна',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Щоб переглядати цей вміст, збільште ширину вікна',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Щоб переглядати цей вміст, потрібно ввімкнути експеримент з ' +
-      'AMP-історіями.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Цю сторінку найкраще переглядати в книжковій орієнтації',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: 'Схоже, ваш веб-переглядач не підтримує цей формат',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/uk.json b/extensions/amp-story/1.0/_locales/uk.json
new file mode 100644
index 0000000000000..2af3e82a419c5
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/uk.json
@@ -0,0 +1,36 @@
+{
+  "2": {"string": "Торкніться опції \"Далі\"."},
+  "3": {"string": "Торкніться опції \"Назад\""},
+  "4": {"string": "Не вдалося скопіювати посилання в буфер обміну :("},
+  "5": {"string": "Посилання скопійовано."},
+  "6": {"string": "Електронна пошта"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Отримати посилання"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Твіттер"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "Щоб переглядати цей вміст, збільште висоту й ширину вікна"},
+  "19": {
+    "string": "Щоб переглядати цей вміст, потрібно ввімкнути експеримент з AMP-історіями."
+  },
+  "20": {"string": "Цю сторінку найкраще переглядати в книжковій орієнтації"},
+  "21": {"string": "Схоже, ваш веб-переглядач не підтримує цей формат"},
+  "22": {"string": "Прийняти"},
+  "23": {"string": "Відхилити"},
+  "25": {"string": "Переглянути на оригінальному домені:"},
+  "26": {"string": "Більше про результати AMP"},
+  "27": {"string": "Усе одно продовжити"},
+  "31": {"string": "Звук вимкнено"},
+  "32": {"string": "Звук увімкнено"},
+  "33": {"string": "На цій сторінці немає звуку"},
+  "34": {"string": "Дивитися відео"},
+  "35": {"string": "Провести пальцем угору"},
+  "36": {"string": "Розгорнути твіт"},
+  "37": {"string": "Щоб переглядати цей вміст, збільште висоту вікна"},
+  "38": {"string": "Щоб переглядати цей вміст, збільште ширину вікна"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/ur.js b/extensions/amp-story/1.0/_locales/ur.js
deleted file mode 100644
index 47713da687892..0000000000000
--- a/extensions/amp-story/1.0/_locales/ur.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for ur strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'آواز آف ہے',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'اس صفحہ پر آواز نہیں ہے',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'آواز آن ہے',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'پڑھنے کے لیے مزید',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'ڈیٹا کی رازداری کی ترتیبات کو تبدیل کریں',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'رازداری کی ترتیبات',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'قبول کریں',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'مسترد کریں',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'بہر صورت جاری رکھیں',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'اصل ڈومین پر دیکھیں:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'AMP نتائج کے بارے میں مزید',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'آگے جائیں پر تھپتھپائیں',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'پیچھے جائیں پر تھپتھپائیں',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'اوپر سوائپ کریں',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'ویڈیو چلائیں',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'لنک کلپ بورڈ میں کاپی نہیں ہو سکا: (',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'لنک کاپی ہوگیا!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'ای میل',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+‎',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'لنک حاصل کریں',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Tweet پھیلائیں',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'اس تجربے کو دیکھنے کے لیے اپنی ونڈو کی لمبائی کو پھیلائیں',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string:
-      'اس تجربے کو دیکھنے کے لیے اپنی ونڈو کی لمبائی اور چوڑائی دونوں ' +
-      'کو پھیلائیں',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'اس تجربے کو دیکھنے کے لیے اپنی ونڈو کی چوڑائی کو پھیلائیں',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'اس مواد کو دیکھنے کے لیے آپ کو amp کہانی کے تجربے کو فعال کرنا ' +
-      'ہوگا۔',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'پورٹریٹ وضع میں صفحہ بہت اچھی طرح نظر آتا ہے',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'ہمیں افسوس ہے، لگتا ہے کہ آپ کا براؤزر اس تجربے کو سپورٹ نہیں ' +
-      'کرتا ہے',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/ur.json b/extensions/amp-story/1.0/_locales/ur.json
new file mode 100644
index 0000000000000..c0bcfbdde143f
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/ur.json
@@ -0,0 +1,40 @@
+{
+  "2": {"string": "آگے جائیں پر تھپتھپائیں"},
+  "3": {"string": "پیچھے جائیں پر تھپتھپائیں"},
+  "4": {"string": "لنک کلپ بورڈ میں کاپی نہیں ہو سکا: ("},
+  "5": {"string": "لنک کاپی ہوگیا!"},
+  "6": {"string": "ای میل"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+‎"},
+  "9": {"string": "لنک حاصل کریں"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "اس تجربے کو دیکھنے کے لیے اپنی ونڈو کی لمبائی اور چوڑائی دونوں کو پھیلائیں"
+  },
+  "19": {
+    "string": "اس مواد کو دیکھنے کے لیے آپ کو amp کہانی کے تجربے کو فعال کرنا ہوگا۔"
+  },
+  "20": {"string": "پورٹریٹ وضع میں صفحہ بہت اچھی طرح نظر آتا ہے"},
+  "21": {
+    "string": "ہمیں افسوس ہے، لگتا ہے کہ آپ کا براؤزر اس تجربے کو سپورٹ نہیں کرتا ہے"
+  },
+  "22": {"string": "قبول کریں"},
+  "23": {"string": "مسترد کریں"},
+  "25": {"string": "اصل ڈومین پر دیکھیں:"},
+  "26": {"string": "AMP نتائج کے بارے میں مزید"},
+  "27": {"string": "بہر صورت جاری رکھیں"},
+  "31": {"string": "آواز آف ہے"},
+  "32": {"string": "آواز آن ہے"},
+  "33": {"string": "اس صفحہ پر آواز نہیں ہے"},
+  "34": {"string": "ویڈیو چلائیں"},
+  "35": {"string": "اوپر سوائپ کریں"},
+  "36": {"string": "Tweet پھیلائیں"},
+  "37": {"string": "اس تجربے کو دیکھنے کے لیے اپنی ونڈو کی لمبائی کو پھیلائیں"},
+  "38": {"string": "اس تجربے کو دیکھنے کے لیے اپنی ونڈو کی چوڑائی کو پھیلائیں"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/vi.js b/extensions/amp-story/1.0/_locales/vi.js
deleted file mode 100644
index b1c35c7606fe0..0000000000000
--- a/extensions/amp-story/1.0/_locales/vi.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for vi strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Tắt âm thanh',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Trang này không có âm thanh',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Bật âm thanh',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Những nội dung khác nên đọc',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Thay đổi dữ liệu các tùy chọn cài đặt bảo mật',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Các tùy chọn cài đặt quyền riêng tư',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Chấp nhận',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Từ chối',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Vẫn tiếp tục',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Xem trên miền gốc:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Thêm thông tin về kết quả AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Nhấn vào Tiếp theo',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Nhấn vào Quay lại',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Vuốt lên',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Phát video',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Không thể sao chép liên kết vào khay nhớ tạm :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Đã sao chép liên kết!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'Email',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Lấy liên kết',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Mở rộng Tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Mở rộng chiều cao cửa sổ để xem trải nghiệm này',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Mở rộng cả chiều cao và chiều rộng cửa sổ để xem trải nghiệm này',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Mở rộng chiều rộng cửa sổ để xem trải nghiệm này',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: 'Bạn cần phải bật thử nghiệm câu chuyện amp để xem nội dung này.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Trang này được xem tốt nhất ở chế độ chân dung',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'Rất tiếc, có vẻ như trình duyệt của bạn không hỗ trợ trải ' +
-      'nghiệm này',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/vi.json b/extensions/amp-story/1.0/_locales/vi.json
new file mode 100644
index 0000000000000..88a1b42eac054
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/vi.json
@@ -0,0 +1,40 @@
+{
+  "2": {"string": "Nhấn vào Tiếp theo"},
+  "3": {"string": "Nhấn vào Quay lại"},
+  "4": {"string": "Không thể sao chép liên kết vào khay nhớ tạm :("},
+  "5": {"string": "Đã sao chép liên kết!"},
+  "6": {"string": "Email"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "Lấy liên kết"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "SMS"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {
+    "string": "Mở rộng cả chiều cao và chiều rộng cửa sổ để xem trải nghiệm này"
+  },
+  "19": {
+    "string": "Bạn cần phải bật thử nghiệm câu chuyện amp để xem nội dung này."
+  },
+  "20": {"string": "Trang này được xem tốt nhất ở chế độ chân dung"},
+  "21": {
+    "string": "Rất tiếc, có vẻ như trình duyệt của bạn không hỗ trợ trải nghiệm này"
+  },
+  "22": {"string": "Chấp nhận"},
+  "23": {"string": "Từ chối"},
+  "25": {"string": "Xem trên miền gốc:"},
+  "26": {"string": "Thêm thông tin về kết quả AMP"},
+  "27": {"string": "Vẫn tiếp tục"},
+  "31": {"string": "Tắt âm thanh"},
+  "32": {"string": "Bật âm thanh"},
+  "33": {"string": "Trang này không có âm thanh"},
+  "34": {"string": "Phát video"},
+  "35": {"string": "Vuốt lên"},
+  "36": {"string": "Mở rộng Tweet"},
+  "37": {"string": "Mở rộng chiều cao cửa sổ để xem trải nghiệm này"},
+  "38": {"string": "Mở rộng chiều rộng cửa sổ để xem trải nghiệm này"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/zh-CN.js b/extensions/amp-story/1.0/_locales/zh-CN.js
deleted file mode 100644
index 35d4e50392ee7..0000000000000
--- a/extensions/amp-story/1.0/_locales/zh-CN.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for zh-CN strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: '声音已关闭',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: '此页没有声音',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: '声音已开启',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: '阅读更多内容',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: '更改数据隐私设置',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: '隐私权设置',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: '接受',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: '拒绝',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: '仍然继续',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: '在原始网域中查看：',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: '关于 AMP 结果的更多内容',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: '点按“下一页”',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: '点按“返回”',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: '向上滑动',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: '播放视频',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: '无法将链接复制到剪贴板 :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: '已复制链接！',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: '电子邮件',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: '获取链接',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: '短信',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: '展开 Twitter 微博',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: '要查看这种体验，请加大窗口高度',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: '要查看这种体验，请同时加大窗口高度和宽度',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: '要查看这种体验，请加大窗口宽度',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: '您必须启用 amp-story 实验性功能，才能查看此内容。',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: '最好以纵向模式查看此页面',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: '抱歉，您的浏览器好像不支持这种体验',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/zh-CN.json b/extensions/amp-story/1.0/_locales/zh-CN.json
new file mode 100644
index 0000000000000..2ab7284410d71
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/zh-CN.json
@@ -0,0 +1,34 @@
+{
+  "2": {"string": "点按“下一页”"},
+  "3": {"string": "点按“返回”"},
+  "4": {"string": "无法将链接复制到剪贴板 :("},
+  "5": {"string": "已复制链接！"},
+  "6": {"string": "电子邮件"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "获取链接"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "短信"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "要查看这种体验，请同时加大窗口高度和宽度"},
+  "19": {"string": "您必须启用 amp-story 实验性功能，才能查看此内容。"},
+  "20": {"string": "最好以纵向模式查看此页面"},
+  "21": {"string": "抱歉，您的浏览器好像不支持这种体验"},
+  "22": {"string": "接受"},
+  "23": {"string": "拒绝"},
+  "25": {"string": "在原始网域中查看："},
+  "26": {"string": "关于 AMP 结果的更多内容"},
+  "27": {"string": "仍然继续"},
+  "31": {"string": "声音已关闭"},
+  "32": {"string": "声音已开启"},
+  "33": {"string": "此页没有声音"},
+  "34": {"string": "播放视频"},
+  "35": {"string": "向上滑动"},
+  "36": {"string": "展开 Twitter 微博"},
+  "37": {"string": "要查看这种体验，请加大窗口高度"},
+  "38": {"string": "要查看这种体验，请加大窗口宽度"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/zh-TW.js b/extensions/amp-story/1.0/_locales/zh-TW.js
deleted file mode 100644
index 202e40e418d23..0000000000000
--- a/extensions/amp-story/1.0/_locales/zh-TW.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/localized-strings';
-
-/**
- * Localized string bundle used for zh-TW strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: '已關閉音效',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: '這個頁面沒有音效',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: '已開啟音效',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: '閱讀更多相關文章',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: '變更資料隱私權設定',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: '隱私權設定',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: '接受',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: '拒絕',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: '仍要繼續',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: '在原始網域中查看：',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: '更多與 AMP 結果相關的資訊',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: '輕觸 [下一頁]',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: '輕觸 [上一頁]',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: '向上滑動',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: '播放影片',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: '無法將連結複製到剪貼簿 :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: '已複製連結！',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: '電子郵件',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: '取得連結',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: '簡訊',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: '展開 Tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: '如要查看故事，請將視窗高度調高',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: '如要查看故事，請將視窗調高並調寬',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: '如要查看故事，請將視窗寬度調寬',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string: '你必須啟用 AMP 故事實驗才能查看此內容。',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: '你只能縱向查看這個頁面',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string: '很抱歉，你的瀏覽器不支援這項服務',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/zh-TW.json b/extensions/amp-story/1.0/_locales/zh-TW.json
new file mode 100644
index 0000000000000..26c5b23540df3
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/zh-TW.json
@@ -0,0 +1,34 @@
+{
+  "2": {"string": "輕觸 [下一頁]"},
+  "3": {"string": "輕觸 [上一頁]"},
+  "4": {"string": "無法將連結複製到剪貼簿 :("},
+  "5": {"string": "已複製連結！"},
+  "6": {"string": "電子郵件"},
+  "7": {"string": "Facebook"},
+  "8": {"string": "Google+"},
+  "9": {"string": "取得連結"},
+  "10": {"string": "LinkedIn"},
+  "11": {"string": "Pinterest"},
+  "12": {"string": "簡訊"},
+  "14": {"string": "Tumblr"},
+  "15": {"string": "Twitter"},
+  "16": {"string": "WhatsApp"},
+  "18": {"string": "如要查看故事，請將視窗調高並調寬"},
+  "19": {"string": "你必須啟用 AMP 故事實驗才能查看此內容。"},
+  "20": {"string": "你只能縱向查看這個頁面"},
+  "21": {"string": "很抱歉，你的瀏覽器不支援這項服務"},
+  "22": {"string": "接受"},
+  "23": {"string": "拒絕"},
+  "25": {"string": "在原始網域中查看："},
+  "26": {"string": "更多與 AMP 結果相關的資訊"},
+  "27": {"string": "仍要繼續"},
+  "31": {"string": "已關閉音效"},
+  "32": {"string": "已開啟音效"},
+  "33": {"string": "這個頁面沒有音效"},
+  "34": {"string": "播放影片"},
+  "35": {"string": "向上滑動"},
+  "36": {"string": "展開 Tweet"},
+  "37": {"string": "如要查看故事，請將視窗高度調高"},
+  "38": {"string": "如要查看故事，請將視窗寬度調寬"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/_locales/zu.js b/extensions/amp-story/1.0/_locales/zu.js
deleted file mode 100644
index 6d81e817575f2..0000000000000
--- a/extensions/amp-story/1.0/_locales/zu.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 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.
- */
-import {
-  LocalizedStringBundleDef,
-  LocalizedStringId,
-} from '../../../../src/service/localization';
-
-/**
- * Localized string bundle used for zu strings.
- * @const {!LocalizedStringBundleDef}
- */
-const strings = {
-  [LocalizedStringId.AMP_STORY_AUDIO_MUTE_BUTTON_TEXT]: {
-    string: 'Umsindo uvaliwe',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT]: {
-    string: 'Leli khasi alinawo umsindo',
-  },
-  [LocalizedStringId.AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT]: {
-    string: 'Umsindo uvuliwe',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL]: {
-    string: 'Okuningi okuzofundwa',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL]: {
-    string: 'Guqula izilungiselelo zedatha yobumfihlo',
-  },
-  [LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE]: {
-    string: 'Izilungiselelo zobumfihlo',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL]: {
-    string: 'Yamukela',
-  },
-  [LocalizedStringId.AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL]: {
-    string: 'Yenqaba',
-  },
-  [LocalizedStringId.AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL]: {
-    string: 'Qhubeka noma kunjalo',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL]: {
-    string: 'Buka isizinda sangempela:',
-  },
-  [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
-    string: 'Okuningi mayelana nemiphumela ye-AMP',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
-    string: 'Thepha okulandelayo',
-  },
-  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
-    string: 'Thepha Emuva',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL]: {
-    string: 'Swayiphela phezulu',
-  },
-  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
-    string: 'Dlala ividiyo',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
-    string: 'Ayikwazanga ukukopisha isixhumanisi kubhodi lokunamathisela :(',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
-    string: 'Isixhumanisi sikopishiwe!',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
-    string: 'I-imeyili',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
-    string: 'I-Facebook',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
-    string: 'I-Google+',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINE]: {
-    string: 'Line',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
-    string: 'Thola isixhumanisi',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
-    string: 'I-LinkedIn',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
-    string: 'I-Pinterest',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
-    string: 'I-SMS',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
-    string: 'I-Tumblr',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
-    string: 'I-Twitter',
-  },
-  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
-    string: 'I-WhatsApp',
-  },
-  [LocalizedStringId.AMP_STORY_TOOLTIP_EXPAND_TWEET]: {
-    string: 'Nweba i-Tweet',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
-    string: 'Nweba ubude bewindi lakho ukuze ubuke lo muzwa',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
-    string: 'Nweba kokubili ubude nobubanzi bewindi lakho ukuze ubuke lo muzwa',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_WIDTH_SIZE_TEXT]: {
-    string: 'Nweba ububanzi bewindi lakho ukuze ubuke lo muzwa',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
-    string:
-      'Kuzomele unike amandla umuzwa wendaba ye-amp ukuze ubuke lokhu ' +
-      'okuqukethwe.',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
-    string: 'Ikhasi libukwa kahle kakhulu kumodi yokuma ngobude',
-  },
-  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
-    string:
-      'Siyaxolisa, kubonakala sengathi isiphequluli sakho asisekeli lo ' +
-      'muzwa',
-  },
-};
-
-export default strings;
diff --git a/extensions/amp-story/1.0/_locales/zu.json b/extensions/amp-story/1.0/_locales/zu.json
new file mode 100644
index 0000000000000..91c7cc715bb85
--- /dev/null
+++ b/extensions/amp-story/1.0/_locales/zu.json
@@ -0,0 +1,42 @@
+{
+  "2": {"string": "Thepha okulandelayo"},
+  "3": {"string": "Thepha Emuva"},
+  "4": {
+    "string": "Ayikwazanga ukukopisha isixhumanisi kubhodi lokunamathisela :("
+  },
+  "5": {"string": "Isixhumanisi sikopishiwe!"},
+  "6": {"string": "I-imeyili"},
+  "7": {"string": "I-Facebook"},
+  "8": {"string": "I-Google+"},
+  "9": {"string": "Thola isixhumanisi"},
+  "10": {"string": "I-LinkedIn"},
+  "11": {"string": "I-Pinterest"},
+  "12": {"string": "I-SMS"},
+  "14": {"string": "I-Tumblr"},
+  "15": {"string": "I-Twitter"},
+  "16": {"string": "I-WhatsApp"},
+  "18": {
+    "string": "Nweba kokubili ubude nobubanzi bewindi lakho ukuze ubuke lo muzwa"
+  },
+  "19": {
+    "string": "Kuzomele unike amandla umuzwa wendaba ye-amp ukuze ubuke lokhu okuqukethwe."
+  },
+  "20": {"string": "Ikhasi libukwa kahle kakhulu kumodi yokuma ngobude"},
+  "21": {
+    "string": "Siyaxolisa, kubonakala sengathi isiphequluli sakho asisekeli lo muzwa"
+  },
+  "22": {"string": "Yamukela"},
+  "23": {"string": "Yenqaba"},
+  "25": {"string": "Buka isizinda sangempela:"},
+  "26": {"string": "Okuningi mayelana nemiphumela ye-AMP"},
+  "27": {"string": "Qhubeka noma kunjalo"},
+  "31": {"string": "Umsindo uvaliwe"},
+  "32": {"string": "Umsindo uvuliwe"},
+  "33": {"string": "Leli khasi alinawo umsindo"},
+  "34": {"string": "Dlala ividiyo"},
+  "35": {"string": "Swayiphela phezulu"},
+  "36": {"string": "Nweba i-Tweet"},
+  "37": {"string": "Nweba ubude bewindi lakho ukuze ubuke lo muzwa"},
+  "38": {"string": "Nweba ububanzi bewindi lakho ukuze ubuke lo muzwa"},
+  "63": {"string": "Line"}
+}
diff --git a/extensions/amp-story/1.0/amp-story-access.css b/extensions/amp-story/1.0/amp-story-access.css
index 413c82d1de574..f8a1415812dea 100644
--- a/extensions/amp-story/1.0/amp-story-access.css
+++ b/extensions/amp-story/1.0/amp-story-access.css
@@ -22,7 +22,7 @@ amp-story-access {
   left: 0 !important;
   height: 100% !important;
   width: 100% !important;
-  z-index: 100003 !important; /** Above the bookend and desktop navigation UI. */
+  z-index: 100003 !important; /** Above the desktop navigation UI. */
   transform: translate3d(0, 100vh, 0) !important;
   transition-delay: 0.15s !important;
   pointer-events: none !important;
diff --git a/extensions/amp-story/1.0/amp-story-access.js b/extensions/amp-story/1.0/amp-story-access.js
index 6b9d9672f7172..d13e986255c18 100644
--- a/extensions/amp-story/1.0/amp-story-access.js
+++ b/extensions/amp-story/1.0/amp-story-access.js
@@ -20,17 +20,12 @@ import {
   getStoreService,
 } from './amp-story-store-service';
 import {Layout} from '../../../src/layout';
-import {assertHttpsUrl} from '../../../src/url';
-import {
-  closest,
-  closestAncestorElementBySelector,
-  copyChildren,
-  removeChildren,
-} from '../../../src/dom';
+import {closest, copyChildren, removeChildren} from '../../../src/dom';
 import {dev, user} from '../../../src/log';
+import {getStoryAttributeSrc} from './utils';
 import {htmlFor} from '../../../src/static-template';
-import {isArray, isObject} from '../../../src/types';
-import {parseJson} from '../../../src/json';
+import {isArray, isObject} from '../../../src/core/types';
+import {parseJson} from '../../../src/core/types/object/json';
 import {setImportantStyles} from '../../../src/style';
 
 /** @const {string} */
@@ -220,7 +215,11 @@ export class AmpStoryAccess extends AMP.BaseElement {
       case Type.BLOCKING:
         const drawerEl = getBlockingTemplate(this.element);
 
-        const logoSrc = this.getLogoSrc_();
+        const logoSrc = getStoryAttributeSrc(
+          this.element,
+          'publisher-logo-src',
+          /* warn */ true
+        );
 
         if (logoSrc) {
           const logoEl = dev().assertElement(
@@ -243,28 +242,6 @@ export class AmpStoryAccess extends AMP.BaseElement {
     }
   }
 
-  /**
-   * Retrieves the publisher-logo-src set on the <amp-story> element, and
-   * validates it's a valid https or relative URL.
-   * @return {?string}
-   * @private
-   */
-  getLogoSrc_() {
-    const storyEl = dev().assertElement(
-      closestAncestorElementBySelector(this.element, 'AMP-STORY')
-    );
-    const logoSrc = storyEl && storyEl.getAttribute('publisher-logo-src');
-
-    logoSrc
-      ? assertHttpsUrl(logoSrc, storyEl, 'publisher-logo-src')
-      : user().warn(
-          TAG,
-          'Expected "publisher-logo-src" attribute on <amp-story>'
-        );
-
-    return logoSrc;
-  }
-
   /**
    * Allowlists the <amp-access> actions.
    * Depending on the publisher configuration, actions can be:
@@ -285,9 +262,9 @@ export class AmpStoryAccess extends AMP.BaseElement {
     );
 
     // Configuration validation is handled by the amp-access extension.
-    let accessConfig = /** @type {!Array|!Object} */ (parseJson(
-      accessEl.textContent
-    ));
+    let accessConfig = /** @type {!Array|!Object} */ (
+      parseJson(accessEl.textContent)
+    );
 
     if (!isArray(accessConfig)) {
       accessConfig = [accessConfig];
@@ -325,7 +302,7 @@ export class AmpStoryAccess extends AMP.BaseElement {
    * @private
    */
   getActionObject_(namespace = undefined, type = undefined) {
-    const method = ['login', namespace, type].filter((s) => !!s).join('-');
+    const method = ['login', namespace, type].filter(Boolean).join('-');
     return {tagOrTarget: 'SCRIPT', method};
   }
 }
diff --git a/extensions/amp-story/1.0/amp-story-affiliate-link.css b/extensions/amp-story/1.0/amp-story-affiliate-link.css
index bdad95a22c56f..f79ccf2781bdf 100644
--- a/extensions/amp-story/1.0/amp-story-affiliate-link.css
+++ b/extensions/amp-story/1.0/amp-story-affiliate-link.css
@@ -67,7 +67,7 @@ amp-story-page[active] [affiliate-link-icon][expanded], amp-story-page[active] [
   border-radius: 20px !important;
 }
 
-[affiliate-link-icon][expanded] .i-amphtml-story-affiliate-link-circle {  
+[affiliate-link-icon][expanded] .i-amphtml-story-affiliate-link-circle {
   overflow: hidden !important;
 }
 
@@ -113,10 +113,10 @@ amp-story-page[active] .i-amphtml-story-affiliate-link-pulse {
 
 @keyframes pulse {
   0% {
-    transform: scale(1);    
+    transform: scale(1);
   }
   100% {
-    transform: scale(1.3);    
+    transform: scale(1.3);
   }
 }
 
@@ -136,17 +136,17 @@ amp-story-page[active] .i-amphtml-story-affiliate-link-pulse {
   [affiliate-link-icon]:hover .i-amphtml-story-affiliate-link-circle {
     background: rgba(255, 255, 255, 0.4) !important;
   }
-  
+
   [affiliate-link-icon]:hover .i-amphtml-story-affiliate-link-pulse {
     background: none !important;
     animation: none !important;
   }
 }
 
-.i-amphtml-story-affiliate-link-icon {  
+.i-amphtml-story-affiliate-link-icon {
   background-position: center !important;
   background-repeat: no-repeat !important;
-  background-size: 24px 24px !important;  
+  background-size: 24px 24px !important;
   color: rgba(0, 0, 0, 0.54) !important;
   width: 40px !important;
   height: 40px !important;
diff --git a/extensions/amp-story/1.0/amp-story-bookend.css b/extensions/amp-story/1.0/amp-story-bookend.css
deleted file mode 100644
index d84cb76e174b4..0000000000000
--- a/extensions/amp-story/1.0/amp-story-bookend.css
+++ /dev/null
@@ -1,354 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-@import './amp-story-shadow-reset.css';
-@import './amp-story-share.css';
-
-.i-amphtml-story-bookend {
-  display: flex !important;
-  font-family: 'Roboto', sans-serif !important;
-  flex-direction: column !important;
-  background: #202125 !important;
-  border-radius: 8px 8px 0 0 !important;
-  color: #fff !important;
-  text-align: start !important;
-  z-index: 100001 !important;
-}
-
-.i-amphtml-story-bookend-handle {
-  height: 4px !important;
-  width: 40px !important;
-  margin: 12px auto 24px !important;
-  background: rgba(255, 255, 255, 0.24) !important;
-  border-radius: 4px !important;
-}
-
-.i-amphtml-story-bookend-heading {
-  width: 100% !important;
-  text-transform: uppercase !important;
-  font-size: 12px !important;
-  padding-bottom: 8px !important;
-  margin: 0 !important;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
-  color: rgba(255, 255, 255, 0.54) !important;
-  font-weight: 700 !important;
-  letter-spacing: 0.83px !important;
-  line-height: 1.48 !important;
-  overflow: hidden !important;
-}
-
-.i-amphtml-story-bookend-top-level {
-  margin-left: 24px !important;
-  margin-right: 24px !important;
-}
-
-.i-amphtml-story-bookend-consent:last-child {
-  margin-bottom: 24px !important;
-}
-
-.i-amphtml-story-bookend-consent .i-amphtml-story-bookend-heading {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.i-amphtml-story-bookend-component-meta {
-  font-weight: 400 !important;
-  font-size: 14px !important;
-  text-overflow: ellipsis !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  line-height: 16px !important;
-  color: rgba(255, 255, 255, 0.6) !important;
-  margin-top: 8px !important;
-}
-
-.i-amphtml-story-bookend-article {
-  text-decoration: none !important;
-  color: inherit !important;
-  display: flex !important;
-  justify-content: space-between !important;
-  max-height: 100px !important;
-}
-
-.i-amphtml-story-bookend-article-text-content {
-  width: 100% !important;
-  overflow: hidden !important;
-  padding-right: 10px !important;
-}
-
-[dir=rtl] .i-amphtml-story-bookend-article-text-content {
-  padding-right: 0px !important;
-  padding-left: 10px !important;
-}
-
-.i-amphtml-story-bookend-article-heading,
-.i-amphtml-story-bookend-text,
-.i-amphtml-story-bookend-consent-button {
-  font-weight: 400 !important;
-  font-size: 16px !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  color: #fff !important;
-  line-height: 1.45em !important;
-  max-height: 4.35em !important;
-  margin: 0 0 8px !important;
-}
-
-.i-amphtml-story-bookend-component {
-  width: 100% !important;
-  margin-bottom: 24px !important;
-}
-
-.i-amphtml-story-bookend-landscape,
-.i-amphtml-story-bookend-portrait {
-  box-sizing: border-box !important;
-  display: flex !important;
-  flex-direction: column !important;
-  text-decoration: none !important;
-  color: inherit !important;
-  overflow: hidden !important;
-}
-
-@media (min-width: 640px) {
-  .i-amphtml-story-bookend-component-set {
-    display: flex !important;
-    flex-wrap: wrap !important;
-    justify-content: space-between !important;
-  }
-
-  .i-amphtml-story-bookend-component:not(.i-amphtml-story-bookend-heading) {
-    /* 12px to match 24px margin-bottom with margin between 2 elements. */
-    width: calc(50% - 12px) !important;
-  }
-}
-
-@media (min-width: 960px) {
-  .i-amphtml-story-bookend-component:not(.i-amphtml-story-bookend-heading) {
-    /**
-     * 16px to get 24 in the two margins between the 3 elements and match the margin-bottom.
-     * 16px = (24px * 2) / 3
-     */
-    width: calc(33% - 16px) !important;
-  }
-}
-
-.i-amphtml-story-bookend-text {
-  font-size: 14px !important;
-}
-
-.i-amphtml-story-bookend-component-category {
-  margin-top: 0px !important;
-  margin-bottom: 8px !important;
-  font-weight: 400 !important;
-  font-size: 12px !important;
-  text-transform: uppercase !important;
-  text-overflow: ellipsis !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  width: 100% !important;
-  color: #FFFFFF !important;
-  letter-spacing: 0.5px !important;
-  line-height: 1.48 !important;
-}
-
-.i-amphtml-story-bookend-article-image,
-.i-amphtml-story-bookend-replay-image {
-  width: 100px !important;
-  height: 100px !important;
-  border-radius: 8px !important;
-  overflow: hidden !important;
-}
-
-
-@media (max-width: 376px) {
-  .i-amphtml-story-bookend-landscape-image,
-  .i-amphtml-story-bookend-portrait-image {
-    width: 100% !important;
-  }
-}
-
-.i-amphtml-story-bookend-article-image > img,
-.i-amphtml-story-bookend-landscape-image > img,
-.i-amphtml-story-bookend-portrait-image > img {
-  object-fit: cover !important;
-  width: 100% !important;
-  height: 100% !important;
-}
-
-.i-amphtml-story-bookend-landscape-image,
-.i-amphtml-story-bookend-portrait-image {
-  width: 100% !important;
-  position: relative !important;
-  border-radius: 8px !important;
-  overflow: hidden !important;
-}
-
-.i-amphtml-story-bookend-portrait-image {
-  padding-bottom: 125% !important;
-}
-
-.i-amphtml-story-bookend-landscape-image {
-  padding-bottom: 75% !important;
-}
-
-.i-amphtml-story-bookend-landscape-image > img,
-.i-amphtml-story-bookend-portrait-image > img {
-  position: absolute !important;
-}
-
-.i-amphtml-story-bookend-replay-image {
-  background-position: center center !important;
-  background-size: cover !important;
-}
-
-.i-amphtml-story-bookend-article-image,
-.i-amphtml-story-bookend-replay-image,
-.i-amphtml-story-bookend-replay-icon {
-  position: relative !important;
-  flex: none !important;
-}
-
-.i-amphtml-story-bookend-replay {
-  overflow: hidden !important;
-  display: flex !important;
-  max-height: 120px !important;
-  justify-content: space-between !important;
-}
-
-.i-amphtml-story-bookend-replay-icon {
-  background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" fill="#ffffff"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')
-      center center no-repeat !important;
-}
-
-/* Replay icon when image is rendered */
-.i-amphtml-story-bookend-replay-image > .i-amphtml-story-bookend-replay-icon {
-  width: 100% !important;
-  height: 100% !important;
-  background-color: rgba(0, 0, 0, 0.3) !important;
-  position: absolute !important; /* overlays image */
-  margin-left: 0 !important;
-}
-
-/* Replay icon when no image is rendered */
-.i-amphtml-story-bookend-replay > .i-amphtml-story-bookend-replay-icon {
-  width: 48px !important;
-  height: 48px !important;
-  background-color: rgba(60, 60, 60, 0.5) !important;
-  position: static !important; /* independent when no image is rendered */
-  border-radius: 4px !important;
-}
-
-.i-amphtml-story-bookend-component-set {
-  margin-bottom: 24px !important;
-}
-
-.i-amphtml-story-bookend-cta-link-wrapper,
-.i-amphtml-story-bookend-textbox {
-  display: flex !important;
-  flex-wrap: wrap !important;
-  box-sizing: border-box !important;
-  color: inherit !important;
-  overflow: hidden !important;
-  justify-content: space-between !important;
-}
-
-.i-amphtml-story-bookend-textbox {
-  flex-direction: column;
-}
-
-.i-amphtml-story-bookend-cta-link {
-  background-color: rgba(255, 255, 255, 0.15) !important;
-  border-radius: 100px !important;
-  height: 40px !important;
-  overflow: hidden !important;
-  text-decoration: none !important;
-  width: calc(50% - 6px) !important;
-  cursor: pointer !important;
-  margin-bottom: 12px !important;
-}
-
-.i-amphtml-story-bookend-cta-link:nth-child(2n+1):last-child {
-  width: 100% !important;
-}
-
-.i-amphtml-story-bookend-cta-link-text {
-  color: #FFFFFF !important;
-  text-transform: uppercase !important;
-  text-align: center !important;
-  font-size: 13px !important;
-  font-weight: bold !important;
-  line-height: 40px !important;
-  padding: 0 24px !important;
-  text-overflow: ellipsis !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-}
-
-.i-amphtml-story-bookend .i-amphtml-story-share-widget {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.i-amphtml-story-bookend .i-amphtml-story-share-list {
-  padding-left: 16px !important;
-  padding-right: 16px !important;
-}
-
-.i-amphtml-story-bookend .i-amphtml-story-share-item .i-amphtml-story-share-icon {
-  background-color: rgba(255, 255, 255, 0.15) !important;
-}
-
-.i-amphtml-story-bookend .i-amphtml-story-share-icon .i-amphtml-story-share-label {
-  color: #FFF !important;
-}
-
-[desktop].i-amphtml-story-bookend {
-  box-sizing: border-box !important;
-  min-height: 100vh !important;
-  padding: 104px 156px 64px !important;
-  margin: 0 !important;
-}
-
-[desktop].i-amphtml-story-bookend .i-amphtml-story-share-widget {
-  /* TODO(alanorozco): Don't render at all when on desktop */
-  display: none !important;
-}
-
-[desktop] .i-amphtml-story-bookend-replay {
-  /* This is replaced with the forward button on desktop. */
-  display: none !important;
-}
-
-[desktop] .i-amphtml-story-bookend-handle {
-  display: none !important;
-}
-
-@media (min-width: 952px) {
-  [desktop] .i-amphtml-story-bookend-component:not(.i-amphtml-story-bookend-heading) {
-    /* 12px to match 24px margin-bottom with margin between 2 elements. */
-    width: calc(50% - 12px) !important;
-  }
-}
-
-@media (min-width: 1272px) {
-  [desktop] .i-amphtml-story-bookend-component:not(.i-amphtml-story-bookend-heading) {
-    /**
-     * 16px to get 24 in the two margins between the 3 elements and match the margin-bottom.
-     * 16px = (24px * 2) / 3
-     */
-    width: calc(33% - 16px) !important;
-  }
-}
diff --git a/extensions/amp-story/1.0/amp-story-consent.js b/extensions/amp-story/1.0/amp-story-consent.js
index c8108d8dab7dc..bd635b6d7eaa1 100644
--- a/extensions/amp-story/1.0/amp-story-consent.js
+++ b/extensions/amp-story/1.0/amp-story-consent.js
@@ -19,7 +19,7 @@ import {
   StateProperty,
   getStoreService,
 } from './amp-story-store-service';
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {CSS} from '../../../build/amp-story-consent-1.0.css';
 import {Layout} from '../../../src/layout';
 import {LocalizedStringId} from '../../../src/localized-strings';
@@ -27,19 +27,22 @@ import {Services} from '../../../src/services';
 import {assertAbsoluteHttpOrHttpsUrl, assertHttpsUrl} from '../../../src/url';
 import {
   childElementByTag,
+  closest,
   closestAncestorElementBySelector,
   isJsonScriptTag,
+  matches,
 } from '../../../src/dom';
 import {computedStyle, setImportantStyles} from '../../../src/style';
 import {
   createShadowRootWithStyle,
   getRGBFromCssColorValue,
   getTextColorForRGB,
+  triggerClickFromLightDom,
 } from './utils';
 import {dev, user, userAssert} from '../../../src/log';
-import {dict} from './../../../src/utils/object';
-import {isArray} from '../../../src/types';
-import {parseJson} from '../../../src/json';
+import {dict} from './../../../src/core/types/object';
+import {isArray} from '../../../src/core/types';
+import {parseJson} from '../../../src/core/types/object/json';
 import {renderAsElement} from './simple-template';
 
 /** @const {string} */
@@ -184,8 +187,8 @@ export class AmpStoryConsent extends AMP.BaseElement {
   constructor(element) {
     super(element);
 
-    /** @const @private {!../../../src/service/action-impl.ActionService} */
-    this.actions_ = Services.actionServiceForDoc(this.element);
+    /** @private {?../../../src/service/action-impl.ActionService} */
+    this.actions_ = null;
 
     /** @private {?Object} */
     this.consentConfig_ = null;
@@ -202,6 +205,8 @@ export class AmpStoryConsent extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.actions_ = Services.actionServiceForDoc(this.element);
+
     this.assertAndParseConfig_();
 
     const storyEl = dev().assertElement(
@@ -217,12 +222,14 @@ export class AmpStoryConsent extends AMP.BaseElement {
 
     const logoSrc = storyEl && storyEl.getAttribute('publisher-logo-src');
 
-    logoSrc
-      ? assertHttpsUrl(logoSrc, storyEl, 'publisher-logo-src')
-      : user().warn(
-          TAG,
-          'Expected "publisher-logo-src" attribute on <amp-story>'
-        );
+    if (logoSrc) {
+      assertHttpsUrl(logoSrc, storyEl, 'publisher-logo-src');
+    } else {
+      user().warn(
+        TAG,
+        'Expected "publisher-logo-src" attribute on <amp-story>'
+      );
+    }
 
     // Story consent config is set by the `assertAndParseConfig_` method.
     if (this.storyConsentConfig_) {
@@ -279,10 +286,18 @@ export class AmpStoryConsent extends AMP.BaseElement {
    * @private
    */
   onClick_(event) {
-    if (event.target && event.target.hasAttribute('on')) {
+    if (!event.target) {
+      return;
+    }
+    if (event.target.hasAttribute('on')) {
       const targetEl = dev().assertElement(event.target);
       this.actions_.trigger(targetEl, 'tap', event, ActionTrust.HIGH);
     }
+    const anchorClicked = closest(event.target, (e) => matches(e, 'a[href]'));
+    if (anchorClicked) {
+      triggerClickFromLightDom(anchorClicked, this.element);
+      event.preventDefault();
+    }
   }
 
   /**
@@ -311,6 +326,7 @@ export class AmpStoryConsent extends AMP.BaseElement {
     const parentEl = dev().assertElement(this.element.parentElement);
     const consentScript = childElementByTag(parentEl, 'script');
     this.consentConfig_ = consentScript && parseJson(consentScript.textContent);
+    this.mergeLegacyConsents_();
 
     // amp-consent already triggered console errors, step out to avoid polluting
     // the console.
@@ -367,26 +383,43 @@ export class AmpStoryConsent extends AMP.BaseElement {
     }
   }
 
+  /**
+   * Merge legacy `consents` policy object from
+   * amp-consent config into top level.
+   * @private
+   */
+  mergeLegacyConsents_() {
+    const legacyConsents = this.consentConfig_['consents'];
+    if (legacyConsents) {
+      const policyId = Object.keys(legacyConsents)[0];
+      const policy = legacyConsents[policyId];
+      this.consentConfig_.consentInstanceId = policyId;
+      this.consentConfig_.checkConsentHref = policy.checkConsentHref;
+      this.consentConfig_.promptIfUnknownForGeoGroup =
+        policy.promptIfUnknownForGeoGroup;
+      delete this.consentConfig_['consents'];
+    }
+  }
+
   /**
    * @param {string} consentId
    * @private
    */
   storeConsentId_(consentId) {
-    const policyId = Object.keys(this.consentConfig_['consents'])[0];
-    const policy = this.consentConfig_['consents'][policyId];
-
     // checkConsentHref response overrides the amp-geo config, if provided.
-    if (policy.checkConsentHref) {
+    if (this.consentConfig_.checkConsentHref) {
       this.storeService_.dispatch(Action.SET_CONSENT_ID, consentId);
       return;
     }
 
     // If using amp-access with amp-geo, only set the consent id if the user is
     // in the expected geo group.
-    if (policy['promptIfUnknownForGeoGroup']) {
+    const geoGroup = this.consentConfig_.promptIfUnknownForGeoGroup;
+    if (geoGroup) {
       Services.geoForDocOrNull(this.element).then((geo) => {
-        const geoGroup = policy['promptIfUnknownForGeoGroup'];
-        const matchedGeoGroups = /** @type {!Array<string>} */ (geo.matchedISOCountryGroups);
+        const matchedGeoGroups = /** @type {!Array<string>} */ (
+          geo.matchedISOCountryGroups
+        );
         if (geo && !matchedGeoGroups.includes(geoGroup)) {
           return;
         }
diff --git a/extensions/amp-story/1.0/amp-story-cta-layer.js b/extensions/amp-story/1.0/amp-story-cta-layer.js
index 3ff6bdb648f66..3ac9903ac32c0 100644
--- a/extensions/amp-story/1.0/amp-story-cta-layer.js
+++ b/extensions/amp-story/1.0/amp-story-cta-layer.js
@@ -31,7 +31,7 @@
 
 import {AmpStoryBaseLayer} from './amp-story-base-layer';
 import {addAttributesToElement, matches, removeElement} from '../../../src/dom';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {user} from '../../../src/log';
 
 /**
diff --git a/extensions/amp-story/1.0/amp-story-desktop-panels.css b/extensions/amp-story/1.0/amp-story-desktop-panels.css
index 8b409c9525f44..f6e13ecc775d5 100644
--- a/extensions/amp-story/1.0/amp-story-desktop-panels.css
+++ b/extensions/amp-story/1.0/amp-story-desktop-panels.css
@@ -21,6 +21,7 @@ amp-story[standalone].i-amphtml-story-desktop-panels {
  max-width: none!important;
  max-height: none!important;
  width: 100vw!important;
+ --i-amphtml-story-inactive-page-scale-factor: 0.9;
 }
 
 /**
@@ -29,23 +30,20 @@ amp-story[standalone].i-amphtml-story-desktop-panels {
 
 .i-amphtml-story-desktop-panels amp-story-page.i-amphtml-element {
   /* Pages are stacked to the right side of the screen and then animated in. */
-  transform: perspective(1px) scale(0.9) translateX(calc(250% + 192px)) translateY(0%) !important;
+  transform: perspective(1px) scale(var(--i-amphtml-story-inactive-page-scale-factor)) translateX(calc(250% + 192px)) translateY(0%) !important;
   opacity: 0.05 !important;
   transform-origin: left !important;
   border-radius: 0 !important;
   box-shadow: none !important;
 }
 
-[dir=rtl] .i-amphtml-story-desktop-panels amp-story-page.i-amphtml-element {
-  transform: perspective(1px) scale(0.9) translateX(calc(-350% - 192px)) translateY(0%) !important;
-}
-
+[dir=rtl] .i-amphtml-story-desktop-panels amp-story-page.i-amphtml-element,
 .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-visited] {
-  transform: perspective(1px) scale(0.9) translateX(calc(-350% - 192px)) translateY(0%) !important;
+  transform: perspective(1px) scale(var(--i-amphtml-story-inactive-page-scale-factor)) translateX(calc(-350% - 192px)) translateY(0%) !important;
 }
 
 [dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-visited] {
-  transform: perspective(1px) scale(0.9) translateX(calc(250% + 192px)) translateY(0%) !important;
+  transform: perspective(1px) scale(var(--i-amphtml-story-inactive-page-scale-factor)) translateX(calc(250% + 192px)) translateY(0%) !important;
 }
 
 .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="-2"],
@@ -55,49 +53,49 @@ amp-story[standalone].i-amphtml-story-desktop-panels {
   transition: opacity 350ms ease-out, transform 350ms cubic-bezier(0.4, 0.0, 0.2, 1) !important;
 }
 
-.i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="0"] {
+.i-amphtml-story-desktop-panels amp-story-page[active],
+[dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[active],
+.i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="0"],
+[dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="0"] {
+  transform: perspective(1px) scale(1.0) translateX(calc(-1 * var(--i-amphtml-story-page-50vw, 50%))) translateY(0%) !important;
+  opacity: 1 !important;
   transition: opacity 350ms cubic-bezier(0.0, 0.0, 0.2, 1), transform 350ms cubic-bezier(0.4, 0.0, 0.2, 1) !important;
 }
 
 .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="-2"],
 [dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="2"] {
-  transform: perspective(1px) scale(0.9) translateX(calc(-5 * var(--i-amphtml-story-page-50vw, 50%) - 128px)) translateY(0%) !important;
+  transform: perspective(1px) scale(var(--i-amphtml-story-inactive-page-scale-factor)) translateX(calc(-5 * var(--i-amphtml-story-page-50vw, 50%) - 128px)) translateY(0%) !important;
 }
 
 .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="-1"],
-.i-amphtml-story-desktop-panels .prev-container > .i-amphtml-story-page-sentinel,
 [dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[active] + amp-story-page:not([i-amphtml-desktop-position]):not([distance]), /** Position n+1 page on load, before attributes are set. */
-[dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="1"],
-[dir=rtl] .i-amphtml-story-desktop-panels .next-container > .i-amphtml-story-page-sentinel {
-  transform: perspective(1px) scale(0.9) translateX(calc(-3 * var(--i-amphtml-story-page-50vw, 50%) - 64px)) translateY(0%) !important;
+[dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="1"] {
+  transform: perspective(1px) scale(var(--i-amphtml-story-inactive-page-scale-factor)) translateX(calc(-3 * var(--i-amphtml-story-page-50vw, 50%) - 64px)) translateY(0%) !important;
 }
 
-.i-amphtml-story-desktop-panels amp-story-page[active],
-[dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[active],
-.i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="0"],
-[dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="0"] {
-  transform: perspective(1px) scale(1.0) translateX(calc(-1 * var(--i-amphtml-story-page-50vw, 50%))) translateY(0%) !important;
-  opacity: 1 !important;
+.i-amphtml-story-desktop-panels .prev-container,
+[dir=rtl] .i-amphtml-story-desktop-panels .next-container {
+  left: calc(50% - var(--i-amphtml-story-page-50vw, 50%) * var(--i-amphtml-story-inactive-page-scale-factor) * 3 - 64px * var(--i-amphtml-story-inactive-page-scale-factor)) !important;
+}
+
+.i-amphtml-story-desktop-panels .next-container,
+[dir=rtl] .i-amphtml-story-desktop-panels .prev-container {
+  left: calc(var(--i-amphtml-story-page-50vw, 50%) * var(--i-amphtml-story-inactive-page-scale-factor) + 50% + 64px * var(--i-amphtml-story-inactive-page-scale-factor)) !important;
 }
 
 .i-amphtml-story-desktop-panels amp-story-page[active] + amp-story-page:not([i-amphtml-desktop-position]):not([distance]), /** Position n+1 page on load, before attributes are set. */
 .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="1"],
-.i-amphtml-story-desktop-panels .next-container > .i-amphtml-story-page-sentinel,
-[dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="-1"],
-[dir=rtl] .i-amphtml-story-desktop-panels .prev-container > .i-amphtml-story-page-sentinel {
-  transform: perspective(1px) scale(0.9) translate(calc(var(--i-amphtml-story-page-50vw, 50%) + 64px), 0%) !important;
+[dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="-1"] {
+  transform: perspective(1px) scale(var(--i-amphtml-story-inactive-page-scale-factor)) translate(calc(var(--i-amphtml-story-page-50vw, 50%) + 64px), 0%) !important;
 }
 
 .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="2"],
 [dir=rtl] .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-desktop-position="-2"] {
-  transform: perspective(1px) scale(0.9) translate(calc(3 * var(--i-amphtml-story-page-50vw, 50%) + 128px), 0%) !important;
+  transform: perspective(1px) scale(var(--i-amphtml-story-inactive-page-scale-factor)) translate(calc(3 * var(--i-amphtml-story-page-50vw, 50%) + 128px), 0%) !important;
 }
 
-.i-amphtml-story-prev-hover > amp-story-page[i-amphtml-desktop-position="-1"] {
-  opacity: 0.3 !important;
-}
-
-.i-amphtml-story-next-hover > amp-story-page[i-amphtml-desktop-position="0"] + amp-story-page {
+.i-amphtml-story-prev-hover > amp-story-page[i-amphtml-desktop-position="-1"],
+.i-amphtml-story-next-hover > amp-story-page[i-amphtml-desktop-position="1"] {
   opacity: 0.3 !important;
 }
 
@@ -122,7 +120,6 @@ amp-story[standalone].i-amphtml-story-desktop-panels {
 }
 
 .i-amphtml-story-desktop-panels > amp-story-page,
-.i-amphtml-story-desktop-panels .i-amphtml-story-page-sentinel,
 .i-amphtml-story-desktop-panels .i-amphtml-story-media-query-matcher {
   left: 50%!important;
   right: auto !important;
@@ -132,3 +129,10 @@ amp-story[standalone].i-amphtml-story-desktop-panels {
   min-width: 320px !important;
   min-height: 533px !important;
 }
+
+.i-amphtml-story-desktop-panels .i-amphtml-story-button-container {
+  height: calc(75vh * var(--i-amphtml-story-inactive-page-scale-factor)) !important;
+  width: calc(3/5 * 75vh * var(--i-amphtml-story-inactive-page-scale-factor)) !important;
+  min-width: calc(320px * var(--i-amphtml-story-inactive-page-scale-factor)) !important;
+  min-height: calc(533px * var(--i-amphtml-story-inactive-page-scale-factor)) !important;
+}
diff --git a/extensions/amp-story/1.0/amp-story-draggable-drawer-header.css b/extensions/amp-story/1.0/amp-story-draggable-drawer-header.css
index ba57a15107abf..01c6bb14625c0 100644
--- a/extensions/amp-story/1.0/amp-story-draggable-drawer-header.css
+++ b/extensions/amp-story/1.0/amp-story-draggable-drawer-header.css
@@ -40,6 +40,10 @@
   background-repeat: no-repeat !important;
   color: rgba(0, 0, 0, 0.87) !important;
   cursor: pointer !important;
+  /* default button style overrides */
+  box-sizing: content-box !important;
+  border: none !important;
+  background-color: transparent !important;
 }
 
 .i-amphtml-story-draggable-drawer-theme-dark .i-amphtml-story-page-attachment-close-button {
@@ -66,7 +70,89 @@
   color: #9AA0A6 !important;
 }
 
-.i-amphtml-story-draggable-drawer-header-bookend,
 .i-amphtml-story-draggable-drawer-header-attachment-remote {
   display: none !important;
 }
+
+/* For amp-story-page-attachment-ui-v2 experiment. */
+
+:host {
+  border-radius: inherit !important; /* Propogate border-radius */
+}
+
+.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-draggable-drawer-header {
+  --i-amphtml-draggable-drawer-background-color: #fff !important;
+  --i-amphtml-draggable-drawer-text-color: #202125 !important;
+  --i-amphtml-draggable-drawer-handle-color: rgba(0, 0, 0, .2) !important;
+  background: var(--i-amphtml-draggable-drawer-background-color) !important;
+  justify-content: center !important;
+  box-shadow: none !important;
+  border-radius: inherit !important;
+  height: auto !important;
+  position: sticky !important;
+  top: 0 !important;
+}
+
+[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-draggable-drawer-header {
+  --i-amphtml-draggable-drawer-background-color: #202125 !important;
+  --i-amphtml-draggable-drawer-text-color: #fff !important;
+  --i-amphtml-draggable-drawer-handle-color: rgba(255, 255, 255, .2) !important;
+}
+
+:not([desktop]).i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-draggable-drawer-header {
+  height: 20px !important;
+}
+
+.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-draggable-drawer-header .i-amphtml-story-draggable-drawer-header-title-and-close {
+  opacity: 1 !important;
+  height: 44px !important;
+  width: 100% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  background: var(--i-amphtml-draggable-drawer-background-color) !important;
+  border-radius: inherit !important;
+}
+
+:not([desktop]).i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-draggable-drawer-header .i-amphtml-story-draggable-drawer-header-title-and-close {
+  position: absolute !important;
+  opacity: 0 !important;
+  transition: opacity .3s, visibility .3s !important;
+  /* Visibility is toggled to prevent screen readers from selecting content. */
+  visibility: hidden !important;
+}
+
+:not([desktop]).i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-draggable-drawer-header.i-amphtml-story-draggable-drawer-header-stuck .i-amphtml-story-draggable-drawer-header-title-and-close {
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
+.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-title {
+  font-size: 14px !important;
+  position: absolute !important;
+  padding: 0 !important;
+  color: var(--i-amphtml-draggable-drawer-text-color) !important;
+}
+
+.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-close-button {
+  margin-inline-start: auto !important; /* RTL support */
+  width: 14px !important;
+  height: 14px !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="rgba(0, 0, 0, .4)" d="M13.295 2.115a.997.997 0 10-1.41-1.41L7 5.59 2.115.705a.997.997 0 10-1.41 1.41L5.59 7 .705 11.885a.997.997 0 101.41 1.41L7 8.41l4.885 4.885a.997.997 0 101.41-1.41L8.41 7l4.885-4.885z"/></svg>') !important;
+  padding: 15px !important;
+}
+
+[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-close-button {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="rgba(255, 255, 255, .4)" d="M13.295 2.115a.997.997 0 10-1.41-1.41L7 5.59 2.115.705a.997.997 0 10-1.41 1.41L5.59 7 .705 11.885a.997.997 0 101.41 1.41L7 8.41l4.885 4.885a.997.997 0 101.41-1.41L8.41 7l4.885-4.885z"/></svg>') !important;
+}
+
+/* Draggable handle UI */
+:not([desktop]).i-amphtml-amp-story-page-attachment-ui-v2:before {
+  content: '' !important;
+  position: absolute !important;
+  top: 8px !important;
+  width: 40px !important;
+  height: 3px !important;
+  background-color: var(--i-amphtml-draggable-drawer-handle-color) !important;
+  border-radius: 3px !important;
+}
diff --git a/extensions/amp-story/1.0/amp-story-draggable-drawer.css b/extensions/amp-story/1.0/amp-story-draggable-drawer.css
index 89296e89f8224..2568a69e4d8a5 100644
--- a/extensions/amp-story/1.0/amp-story-draggable-drawer.css
+++ b/extensions/amp-story/1.0/amp-story-draggable-drawer.css
@@ -24,7 +24,8 @@
   overflow: hidden !important;
   z-index: 4 !important; /** Over amp-story-cta-layer. */
   transform: translate3d(0, 100%, 0) !important;
-  transition: transform 0.25s cubic-bezier(0.4, 0.0, 1, 1) !important;
+  transition: transform 0.25s cubic-bezier(0.4, 0.0, 1, 1), visibility 0s linear 0.4s !important;
+  visibility: hidden !important;
 }
 
 .amp-story-draggable-drawer-root[hidden] {
@@ -33,7 +34,8 @@
 
 .amp-story-draggable-drawer-root.i-amphtml-story-draggable-drawer-open {
   transform: translate3d(0, 0, 0) !important;
-  transition: transform 0.4s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
+  transition: transform 0.4s cubic-bezier(0.0, 0.0, 0.2, 1), visibility 0s linear 0s !important;
+  visibility: visible !important;
 }
 
 .i-amphtml-story-draggable-drawer {
@@ -81,12 +83,12 @@
   justify-content: center !important;
   background: rgba(0, 0, 0, 0.55) !important;
   opacity: 0 !important;
-  transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1), transform 0s linear 0.15s !important;
+  transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1), transform 0s linear 0.15s, visibility 0s linear 0.4s !important;
 }
 
 [desktop] .amp-story-draggable-drawer-root.i-amphtml-story-draggable-drawer-open {
   opacity: 1 !important;
-  transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
+  transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), visibility 0s linear 0s !important;
   transform: translate3d(0, 0, 0) !important;
 }
 
@@ -97,31 +99,63 @@
   overflow: hidden !important;
 }
 
-/** Bookend overrides. */
+/* For amp-story-page-attachment-ui-v2 experiment. */
+
+[desktop] .i-amphtml-amp-story-page-attachment-ui-v2.amp-story-draggable-drawer-root {
+  background: none !important;
+}
+
+.i-amphtml-amp-story-page-attachment-ui-v2.amp-story-draggable-drawer-root {
+  --i-amphtml-draggable-drawer-background-color: #fff !important;
+  --i-amphtml-draggable-drawer-text-color: #202125 !important;
+}
 
-.i-amphtml-story-draggable-drawer-bookend .i-amphtml-story-draggable-drawer-container,
-.i-amphtml-story-draggable-drawer-bookend .i-amphtml-story-draggable-drawer-container[hidden] {
+[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2.amp-story-draggable-drawer-root {
+  --i-amphtml-draggable-drawer-background-color: #202125 !important;
+  --i-amphtml-draggable-drawer-text-color: #fff !important;
+}
+
+amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-container {
+  border-radius: 16px !important;
   height: 100% !important;
+}
+
+amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-container {
+  border-radius: 16px 16px 0 0 !important;
+}
+
+amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-container {
+  background: none !important;
+  /* This makes the spacer elmement take up all available space to push content to the bottom of the screen. */
   display: flex !important;
   flex-direction: column !important;
-  background: transparent !important;
-  transition: none !important;
 }
 
-.i-amphtml-story-draggable-drawer-bookend .i-amphtml-story-draggable-drawer-content {
-  margin-top: auto !important;
-  padding-top: 88px !important;
+.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-spacer {
+  /* spacer is mobile only */
+  display: none !important;
 }
 
-.i-amphtml-story-draggable-drawer-bookend .i-amphtml-story-draggable-drawer-container[hidden] .i-amphtml-story-draggable-drawer-content {
-  opacity: 1 !important;
+amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-spacer {
+  /* Removes default button background. */
+  background: none !important;
+  /* This placeholder element takes up all available space when drawer-content is less than 80vh. */
+  display: block !important;
+  height: calc(var(--story-page-vh) * 100) !important;
+  /* Sets the minimum size of the placeholder element */
+  min-height: calc(var(--story-page-vh) * 20) !important;
 }
 
-[desktop] .i-amphtml-story-draggable-drawer-bookend .i-amphtml-story-draggable-drawer {
-  height: 100% !important;
-  width: 100% !important;
+body:not(.amp-mode-keyboard-active) amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-spacer {
+  /* Remove outline if user is not navigating via keyboard */
+  outline: none !important;
+}
+
+.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-content {
+  background: var(--i-amphtml-draggable-drawer-background-color) !important;
+  color: var(--i-amphtml-draggable-drawer-text-color) !important;
 }
 
-[desktop] .i-amphtml-story-draggable-drawer-bookend .i-amphtml-story-draggable-drawer-content {
-  padding-top: 0 !important;
+amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-content {
+  border-radius: inherit !important;
 }
diff --git a/extensions/amp-story/1.0/amp-story-draggable-drawer.js b/extensions/amp-story/1.0/amp-story-draggable-drawer.js
index 4073dcd57321e..003d80f0ea8d3 100644
--- a/extensions/amp-story/1.0/amp-story-draggable-drawer.js
+++ b/extensions/amp-story/1.0/amp-story-draggable-drawer.js
@@ -22,11 +22,14 @@ import {
 } from './amp-story-store-service';
 import {CSS} from '../../../build/amp-story-draggable-drawer-header-1.0.css';
 import {Layout} from '../../../src/layout';
+import {LocalizedStringId} from '../../../src/localized-strings';
 import {Services} from '../../../src/services';
 import {closest, isAmpElement} from '../../../src/dom';
 import {createShadowRootWithStyle} from './utils';
-import {dev} from '../../../src/log';
+import {dev, devAssert} from '../../../src/log';
+import {getLocalizationService} from './amp-story-localization-service';
 import {htmlFor} from '../../../src/static-template';
+import {isPageAttachmentUiV2ExperimentOn} from './amp-story-page-attachment-ui-v2';
 import {listen} from '../../../src/event-helper';
 import {resetStyles, setImportantStyles, toggle} from '../../../src/style';
 
@@ -72,6 +75,11 @@ const getHeaderEl = (element) => {
  * @abstract
  */
 export class DraggableDrawer extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return false;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -114,6 +122,13 @@ export class DraggableDrawer extends AMP.BaseElement {
 
     /** @private {number} Threshold in pixels above which the drawer opens itself. */
     this.openThreshold_ = Infinity;
+
+    /**
+     * For amp-story-page-attachment-ui-v2 experiment
+     * Used for offsetting drag.
+     * @protected {?number}
+     */
+    this.spacerElHeight_ = null;
   }
 
   /** @override */
@@ -121,11 +136,6 @@ export class DraggableDrawer extends AMP.BaseElement {
     return layout === Layout.NODISPLAY;
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return false;
-  }
-
   /** @override */
   buildCallback() {
     this.element.classList.add('amp-story-draggable-drawer-root');
@@ -135,7 +145,6 @@ export class DraggableDrawer extends AMP.BaseElement {
     this.headerEl_ = getHeaderEl(this.element);
 
     createShadowRootWithStyle(headerShadowRootEl, this.headerEl_, CSS);
-    templateEl.insertBefore(headerShadowRootEl, templateEl.firstChild);
 
     this.containerEl_ = dev().assertElement(
       templateEl.querySelector('.i-amphtml-story-draggable-drawer-container')
@@ -146,6 +155,28 @@ export class DraggableDrawer extends AMP.BaseElement {
       )
     );
 
+    if (isPageAttachmentUiV2ExperimentOn(this.win)) {
+      const spacerEl = this.win.document.createElement('button');
+      spacerEl.classList.add('i-amphtml-story-draggable-drawer-spacer');
+      spacerEl.classList.add('i-amphtml-story-system-reset');
+      spacerEl.setAttribute('role', 'button');
+      const localizationService = getLocalizationService(
+        devAssert(this.element)
+      );
+      if (localizationService) {
+        const localizedCloseString = localizationService.getLocalizedString(
+          LocalizedStringId.AMP_STORY_CLOSE_BUTTON_LABEL
+        );
+        spacerEl.setAttribute('aria-label', localizedCloseString);
+      }
+      this.containerEl_.insertBefore(spacerEl, this.contentEl_);
+      this.contentEl_.appendChild(headerShadowRootEl);
+      this.element.classList.add('i-amphtml-amp-story-page-attachment-ui-v2');
+      this.headerEl_.classList.add('i-amphtml-amp-story-page-attachment-ui-v2');
+    } else {
+      templateEl.insertBefore(headerShadowRootEl, templateEl.firstChild);
+    }
+
     this.element.appendChild(templateEl);
     this.element.setAttribute('aria-hidden', true);
   }
@@ -181,6 +212,40 @@ export class DraggableDrawer extends AMP.BaseElement {
       },
       true /** callToInitialize */
     );
+
+    if (isPageAttachmentUiV2ExperimentOn(this.win)) {
+      const spacerEl = dev().assertElement(
+        this.element.querySelector('.i-amphtml-story-draggable-drawer-spacer')
+      );
+
+      // Handle click on spacer element to close.
+      spacerEl.addEventListener('click', () => {
+        this.close_();
+      });
+
+      // For displaying sticky header on mobile.
+      new this.win.IntersectionObserver((e) => {
+        this.headerEl_.classList.toggle(
+          'i-amphtml-story-draggable-drawer-header-stuck',
+          !e[0].isIntersecting
+        );
+      }).observe(spacerEl);
+
+      // Update spacerElHeight_ on resize for drag offset.
+      new this.win.ResizeObserver((e) => {
+        this.spacerElHeight_ = e[0].contentRect.height;
+      }).observe(spacerEl);
+
+      // Reset scroll position on end of close transiton.
+      this.element.addEventListener('transitionend', (e) => {
+        if (
+          e.propertyName === 'transform' &&
+          this.state_ === DrawerState.CLOSED
+        ) {
+          this.containerEl_./*OK*/ scrollTop = 0;
+        }
+      });
+    }
   }
 
   /**
@@ -189,9 +254,13 @@ export class DraggableDrawer extends AMP.BaseElement {
    * @protected
    */
   onUIStateUpdate_(uiState) {
-    uiState === UIType.MOBILE
+    const isMobile = uiState === UIType.MOBILE;
+
+    isMobile
       ? this.startListeningForTouchEvents_()
       : this.stopListeningForTouchEvents_();
+
+    this.headerEl_.toggleAttribute('desktop', !isMobile);
   }
 
   /**
@@ -290,7 +359,9 @@ export class DraggableDrawer extends AMP.BaseElement {
       return;
     }
 
-    event.stopPropagation();
+    if (this.shouldStopPropagation_()) {
+      event.stopPropagation();
+    }
 
     if (this.touchEventState_.isSwipeY === null) {
       this.touchEventState_.isSwipeY =
@@ -311,6 +382,18 @@ export class DraggableDrawer extends AMP.BaseElement {
     });
   }
 
+  /**
+   * Checks for when scroll event should be stopped from propagating.
+   * @return {boolean}
+   * @private
+   */
+  shouldStopPropagation_() {
+    return (
+      this.state_ !== DrawerState.CLOSED ||
+      (this.state_ === DrawerState.CLOSED && this.touchEventState_.swipingUp)
+    );
+  }
+
   /**
    * Handles touchend events to detect swipeY interactions.
    * @param {!Event} event
@@ -343,7 +426,7 @@ export class DraggableDrawer extends AMP.BaseElement {
   onSwipeY_(gesture) {
     const {data} = gesture;
 
-    if (this.ignoreCurrentSwipeYGesture_ === true) {
+    if (this.ignoreCurrentSwipeYGesture_) {
       this.ignoreCurrentSwipeYGesture_ = !data.last;
       return;
     }
@@ -453,7 +536,10 @@ export class DraggableDrawer extends AMP.BaseElement {
           return;
         }
         this.state_ = DrawerState.DRAGGING_TO_OPEN;
-        const drag = Math.max(deltaY, -this.dragCap_);
+        let drag = Math.max(deltaY, -this.dragCap_);
+        if (isPageAttachmentUiV2ExperimentOn(this.win)) {
+          drag -= this.spacerElHeight_;
+        }
         translate = `translate3d(0, calc(100% + ${drag}px), 0)`;
         break;
       case DrawerState.OPEN:
@@ -470,6 +556,7 @@ export class DraggableDrawer extends AMP.BaseElement {
       setImportantStyles(this.element, {
         transform: translate,
         transition: 'none',
+        visibility: 'visible',
       });
     });
   }
@@ -489,7 +576,7 @@ export class DraggableDrawer extends AMP.BaseElement {
 
     this.mutateElement(() => {
       this.element.setAttribute('aria-hidden', false);
-      resetStyles(this.element, ['transform', 'transition']);
+      resetStyles(this.element, ['transform', 'transition', 'visibility']);
 
       if (!shouldAnimate) {
         // Resets the 'transition' property, and removes this override in the
@@ -504,7 +591,6 @@ export class DraggableDrawer extends AMP.BaseElement {
       const owners = Services.ownersForDoc(this.element);
       owners.scheduleLayout(this.element, this.ampComponents_);
       owners.scheduleResume(this.element, this.ampComponents_);
-      owners.updateInViewport(this.element, this.ampComponents_, true);
     });
   }
 
@@ -546,7 +632,6 @@ export class DraggableDrawer extends AMP.BaseElement {
     }).then(() => {
       const owners = Services.ownersForDoc(this.element);
       owners.schedulePause(this.element, this.ampComponents_);
-      owners.updateInViewport(this.element, this.ampComponents_, false);
     });
   }
 }
diff --git a/extensions/amp-story/1.0/amp-story-embedded-component.js b/extensions/amp-story/1.0/amp-story-embedded-component.js
index 90f89fae5bc72..81e73c669ccc0 100644
--- a/extensions/amp-story/1.0/amp-story-embedded-component.js
+++ b/extensions/amp-story/1.0/amp-story-embedded-component.js
@@ -29,7 +29,7 @@ import {
 } from './story-analytics';
 import {CSS} from '../../../build/amp-story-tooltip-1.0.css';
 import {EventType, dispatch} from './events';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {LocalizedStringId} from '../../../src/localized-strings';
 import {Services} from '../../../src/services';
 import {
@@ -38,9 +38,13 @@ import {
   matches,
   tryFocus,
 } from '../../../src/dom';
-import {createShadowRootWithStyle, getSourceOriginForElement} from './utils';
+import {
+  createShadowRootWithStyle,
+  getSourceOriginForElement,
+  triggerClickFromLightDom,
+} from './utils';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getAmpdoc} from '../../../src/service';
 import {getLocalizationService} from './amp-story-localization-service';
 import {htmlFor, htmlRefs} from '../../../src/static-template';
@@ -213,10 +217,8 @@ export const EMBED_ID_ATTRIBUTE_NAME = 'i-amphtml-embed-id';
  * @return {!Element}
  */
 const buildExpandedViewOverlay = (element) => htmlFor(element)`
-    <div class="i-amphtml-story-expanded-view-overflow
-        i-amphtml-story-system-reset">
-      <span class="i-amphtml-expanded-view-close-button" role="button">
-      </span>
+    <div class="i-amphtml-story-expanded-view-overflow i-amphtml-story-system-reset">
+      <button class="i-amphtml-expanded-view-close-button" aria-label="close" role="button"></button>
     </div>`;
 
 /**
@@ -257,7 +259,9 @@ function buildStringStyleForTweet(embedData) {
   return `{
     width: ${px(embedData.width)} !important;
     transform: ${embedData.transform} !important;
-    margin: 0 ${embedData.horizontalMargin}px !important;
+    margin: ${embedData.verticalMargin}px ${
+    embedData.horizontalMargin
+  }px !important;
     }`;
 }
 
@@ -278,7 +282,7 @@ function buildDefaultStringStyle(embedData) {
 }
 
 /**
- * Measures syles for a given element in preparation for its expanded animation.
+ * Measures styles for a given element in preparation for its expanded animation.
  * @param {!Element} element
  * @param {!Object} state
  * @param {!DOMRect} pageRect
@@ -311,6 +315,9 @@ function measureStylesForTwitter(state, pageRect, elRect) {
   state.scaleFactor =
     Math.min(elRect.width, MAX_TWEET_WIDTH_PX) / state.newWidth;
 
+  const shrinkedSize = elRect.height * state.scaleFactor;
+
+  state.verticalMargin = -1 * ((elRect.height - shrinkedSize) / 2);
   state.horizontalMargin = -1 * ((state.newWidth - elRect.width) / 2);
 
   return state;
@@ -395,6 +402,7 @@ function updateStylesForTwitter(elId, state) {
     scaleFactor: state.scaleFactor,
     transform: `scale(${state.scaleFactor})`,
     horizontalMargin: state.horizontalMargin,
+    verticalMargin: state.verticalMargin,
   };
 }
 
@@ -668,6 +676,20 @@ export class AmpStoryEmbeddedComponent {
    */
   buildAndAppendExpandedViewOverlay_() {
     this.expandedViewOverlay_ = buildExpandedViewOverlay(this.storyEl_);
+    const closeButton = dev().assertElement(
+      this.expandedViewOverlay_.querySelector(
+        '.i-amphtml-expanded-view-close-button'
+      )
+    );
+    const localizationService = getLocalizationService(
+      devAssert(this.storyEl_)
+    );
+    if (localizationService) {
+      const localizedCloseString = localizationService.getLocalizedString(
+        LocalizedStringId.AMP_STORY_CLOSE_BUTTON_LABEL
+      );
+      closeButton.setAttribute('aria-label', localizedCloseString);
+    }
     this.mutator_.mutateElement(dev().assertElement(this.componentPage_), () =>
       this.componentPage_.appendChild(this.expandedViewOverlay_)
     );
@@ -718,6 +740,7 @@ export class AmpStoryEmbeddedComponent {
           StoryAnalyticsEvent.CLICK_THROUGH,
           this.triggeringTarget_
         );
+        this.tooltip_.href && this.onAnchorClick_(event);
       },
       true /** capture */
     );
@@ -736,11 +759,12 @@ export class AmpStoryEmbeddedComponent {
       this.clearTooltip_();
     }, TOOLTIP_CLOSE_ANIMATION_MS);
 
+    if (this.state_ === EmbeddedComponentState.EXPANDED) {
+      this.toggleExpandedView_(null);
+    }
     this.storeService_.dispatch(Action.TOGGLE_INTERACTIVE_COMPONENT, {
       state: EmbeddedComponentState.HIDDEN,
     });
-
-    this.toggleExpandedView_(null);
     this.tooltip_.removeEventListener(
       'click',
       this.expandComponentHandler_,
@@ -878,11 +902,13 @@ export class AmpStoryEmbeddedComponent {
    * @private
    */
   updateTooltipEl_(component) {
-    const embedConfig = /** @type {!Object} */ (userAssert(
-      this.getEmbedConfigFor_(component.element),
-      'Invalid embed config for target',
-      component.element
-    ));
+    const embedConfig = /** @type {!Object} */ (
+      userAssert(
+        this.getEmbedConfigFor_(component.element),
+        'Invalid embed config for target',
+        component.element
+      )
+    );
 
     const theme = this.triggeringTarget_.getAttribute('theme');
     if (theme && TooltipTheme.DARK === theme.toLowerCase()) {
@@ -1366,7 +1392,6 @@ export class AmpStoryEmbeddedComponent {
               i-amphtml-story-tooltip-nav-button-left"
         >
           <button
-            role="button"
             ref="buttonLeft"
             class="i-amphtml-story-focused-state-layer-nav-button
                 i-amphtml-story-tooltip-nav-button-left"
@@ -1377,7 +1402,6 @@ export class AmpStoryEmbeddedComponent {
               i-amphtml-story-tooltip-nav-button-right"
         >
           <button
-            role="button"
             ref="buttonRight"
             class="i-amphtml-story-focused-state-layer-nav-button
                     i-amphtml-story-tooltip-nav-button-right"
@@ -1397,12 +1421,8 @@ export class AmpStoryEmbeddedComponent {
       </section>
     `;
     const overlayEls = htmlRefs(tooltipOverlay);
-    const {
-      tooltip,
-      buttonLeft,
-      buttonRight,
-      arrow,
-    } = /** @type {!tooltipElementsDef} */ (overlayEls);
+    const {arrow, buttonLeft, buttonRight, tooltip} =
+      /** @type {!tooltipElementsDef} */ (overlayEls);
 
     this.tooltip_ = tooltip;
     this.tooltipArrow_ = arrow;
@@ -1448,6 +1468,16 @@ export class AmpStoryEmbeddedComponent {
     );
   }
 
+  /**
+   * Linkers don't work on shadow root elements so we click a clone of the anchor on the root dom.
+   * @param {!Event} event
+   * @private
+   */
+  onAnchorClick_(event) {
+    event.preventDefault();
+    triggerClickFromLightDom(this.tooltip_, this.storyEl_);
+  }
+
   /**
    * @visibleForTesting
    * @return {?Element}
diff --git a/extensions/amp-story/1.0/amp-story-grid-layer.js b/extensions/amp-story/1.0/amp-story-grid-layer.js
index 9798227c33599..993187ace6791 100644
--- a/extensions/amp-story/1.0/amp-story-grid-layer.js
+++ b/extensions/amp-story/1.0/amp-story-grid-layer.js
@@ -29,7 +29,8 @@
 import {AmpStoryBaseLayer} from './amp-story-base-layer';
 import {StateProperty, getStoreService} from './amp-story-store-service';
 import {assertDoesNotContainDisplay, px, setStyles} from '../../../src/style';
-import {matches, scopedQuerySelectorAll} from '../../../src/dom';
+import {isPrerenderActivePage} from './prerender-active-page';
+import {scopedQuerySelectorAll} from '../../../src/dom';
 
 /**
  * A mapping of attribute names we support for grid layers to the CSS Grid
@@ -75,47 +76,91 @@ export const GRID_LAYER_TEMPLATE_CLASS_NAMES = {
   'thirds': 'i-amphtml-story-grid-template-thirds',
 };
 
+/**
+ * The attribute name for grid layer presets.
+ * @private @const {string}
+ */
+const PRESET_ATTRIBUTE_NAME = 'preset';
+
+/**
+ * @typedef {{
+ *  aspect-ratio: string,
+ *  scaling-factor: ?float,
+ * }}
+ */
+export let PresetDetails;
+
+/**
+ * The attributes that will be applied for each preset.
+ * @private @const {!Object<string, !PresetDetails>}
+ */
+const GRID_LAYER_PRESET_DETAILS = {
+  '2021-background': {
+    'aspect-ratio': '69:116',
+    'scaling-factor': 1.142,
+  },
+  '2021-foreground': {
+    'aspect-ratio': '69:116',
+  },
+};
+
 /**
  * Grid layer template templating system.
  */
 export class AmpStoryGridLayer extends AmpStoryBaseLayer {
+  /** @override @nocollapse */
+  static prerenderAllowed(element) {
+    return isPrerenderActivePage(element.parentElement);
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
 
-    /** @private {boolean} */
-    this.prerenderAllowed_ = false;
-
     /** @private {?{horiz: number, vert: number}} */
     this.aspectRatio_ = null;
-  }
 
-  /** @override */
-  firstAttachedCallback() {
-    // Only prerender if child of the first page.
-    this.prerenderAllowed_ = matches(
-      this.element,
-      'amp-story-page:first-of-type amp-story-grid-layer'
-    );
+    /** @private {number} */
+    this.scalingFactor_ = 1;
   }
 
   /** @override */
   buildCallback() {
     super.buildCallback();
+    this.applyResponsivenessPresets_();
     this.applyTemplateClassName_();
     this.setOwnCssGridStyles_();
     this.setDescendentCssGridStyles_();
     this.initializeListeners_();
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return this.prerenderAllowed_;
+  /**
+   * Applies the attributes to the layer from the preset specified in the [preset] attribute.
+   * @private
+   */
+  applyResponsivenessPresets_() {
+    if (!this.element.hasAttribute(PRESET_ATTRIBUTE_NAME)) {
+      return;
+    }
+    const preset = this.element.getAttribute(PRESET_ATTRIBUTE_NAME);
+    const presetDetails = GRID_LAYER_PRESET_DETAILS[preset];
+    if (!presetDetails) {
+      return;
+    }
+    Object.entries(presetDetails).forEach((keyValue) =>
+      this.element.setAttribute(keyValue[0], keyValue[1])
+    );
   }
 
   /** @private */
   initializeListeners_() {
     const aspectRatio = this.element.getAttribute('aspect-ratio');
+    const scalingFactorFloat = parseFloat(
+      this.element.getAttribute('scaling-factor')
+    );
+    if (scalingFactorFloat && scalingFactorFloat > 0) {
+      this.scalingFactor_ = scalingFactorFloat;
+    }
     if (aspectRatio) {
       const aspectRatioSplits = aspectRatio.split(':');
       const horiz = parseInt(aspectRatioSplits[0], 10);
@@ -140,7 +185,7 @@ export class AmpStoryGridLayer extends AmpStoryBaseLayer {
     if (!pageSize) {
       return;
     }
-    const {width: vw, height: vh} = pageSize;
+    const {height: vh, width: vw} = pageSize;
     const {horiz, vert} = this.aspectRatio_;
     const width = Math.min(vw, (vh * horiz) / vert);
     const height = Math.min(vh, (vw * vert) / horiz);
@@ -148,8 +193,8 @@ export class AmpStoryGridLayer extends AmpStoryBaseLayer {
       this.getVsync().mutate(() => {
         this.element.classList.add('i-amphtml-story-grid-template-aspect');
         setStyles(this.element, {
-          '--i-amphtml-story-layer-width': px(width),
-          '--i-amphtml-story-layer-height': px(height),
+          '--i-amphtml-story-layer-width': px(width * this.scalingFactor_),
+          '--i-amphtml-story-layer-height': px(height * this.scalingFactor_),
         });
       });
     }
diff --git a/extensions/amp-story/1.0/amp-story-hint.css b/extensions/amp-story/1.0/amp-story-hint.css
index 3f0e8102f94f2..85bd674e4a3a1 100644
--- a/extensions/amp-story/1.0/amp-story-hint.css
+++ b/extensions/amp-story/1.0/amp-story-hint.css
@@ -204,4 +204,3 @@
     opacity: 0;
   }
 }
-
diff --git a/extensions/amp-story/1.0/amp-story-hint.js b/extensions/amp-story/1.0/amp-story-hint.js
index be1be72820b1c..83e0983a926cc 100644
--- a/extensions/amp-story/1.0/amp-story-hint.js
+++ b/extensions/amp-story/1.0/amp-story-hint.js
@@ -24,7 +24,7 @@ import {
 import {LocalizedStringId} from '../../../src/localized-strings';
 import {Services} from '../../../src/services';
 import {createShadowRootWithStyle} from './utils';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {renderAsElement} from './simple-template';
 
 /** @private @const {!./simple-template.ElementDef} */
@@ -191,10 +191,6 @@ export class AmpStoryHint {
       }
     );
 
-    this.storeService_.subscribe(StateProperty.BOOKEND_STATE, (isOpen) => {
-      this.onBookendStateUpdate_(isOpen);
-    });
-
     this.storeService_.subscribe(
       StateProperty.INTERACTIVE_COMPONENT_STATE,
       /** @param {./amp-story-store-service.InteractiveComponentDef} component */ (
@@ -324,17 +320,6 @@ export class AmpStoryHint {
     }
   }
 
-  /**
-   * Reacts to bookend state updates.
-   * @param {boolean} isOpen
-   * @private
-   */
-  onBookendStateUpdate_(isOpen) {
-    if (isOpen) {
-      this.hideAllNavigationHint();
-    }
-  }
-
   /**
    * Hides navigation hint if tooltip is open.
    * @param {boolean} isActive
diff --git a/extensions/amp-story/1.0/amp-story-info-dialog.js b/extensions/amp-story/1.0/amp-story-info-dialog.js
index 5dcb051001809..b083a31d9a89f 100644
--- a/extensions/amp-story/1.0/amp-story-info-dialog.js
+++ b/extensions/amp-story/1.0/amp-story-info-dialog.js
@@ -28,8 +28,8 @@ import {CSS} from '../../../build/amp-story-info-dialog-1.0.css';
 import {LocalizedStringId} from '../../../src/localized-strings';
 import {Services} from '../../../src/services';
 import {assertAbsoluteHttpOrHttpsUrl} from '../../../src/url';
-import {closest} from '../../../src/dom';
-import {createShadowRootWithStyle} from './utils';
+import {closest, matches} from '../../../src/dom';
+import {createShadowRootWithStyle, triggerClickFromLightDom} from './utils';
 import {dev} from '../../../src/log';
 import {getAmpdoc} from '../../../src/service';
 import {getLocalizationService} from './amp-story-localization-service';
@@ -120,8 +120,9 @@ export class InfoDialog {
       this.parentEl_.appendChild(root);
     });
 
-    const pageUrl = Services.documentInfoForDoc(getAmpdoc(this.parentEl_))
-      .canonicalUrl;
+    const pageUrl = Services.documentInfoForDoc(
+      getAmpdoc(this.parentEl_)
+    ).canonicalUrl;
 
     return Promise.all([
       appendPromise,
@@ -182,6 +183,11 @@ export class InfoDialog {
     if (!closest(el, (el) => el === this.innerContainerEl_, this.element_)) {
       this.close_();
     }
+    const anchorClicked = closest(event.target, (e) => matches(e, 'a[href]'));
+    if (anchorClicked) {
+      triggerClickFromLightDom(anchorClicked, this.element);
+      event.preventDefault();
+    }
   }
 
   /**
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
new file mode 100644
index 0000000000000..1bac23a104d75
--- /dev/null
+++ b/extensions/amp-story/1.0/amp-story-open-page-attachment.css
@@ -0,0 +1,407 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/** amp-story-page open attachment message Shadow DOM. */
+
+@keyframes open-attachment-fly-in {
+  0% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes open-attachment-icon {
+  0% {
+    transform: translateY(14px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes open-attachment-icon-explode {
+  0% {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.12);
+  }
+}
+
+@keyframes open-attachment-icon-color {
+  0% {
+    background: #fff;
+  }
+  to {
+    background: rgba(0, 0, 0, 0.87);
+    text-shadow: none;
+  }
+}
+
+@keyframes open-attachment-bar-left {
+  0% {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-30deg);
+  }
+}
+
+@keyframes open-attachment-bar-right {
+  0% {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(30deg);
+  }
+}
+
+/**
+   * Hiding the element and only showing it on the active page so the animation
+   * triggers every time the page becomes active.
+   */
+.i-amphtml-story-page-open-attachment {
+  display: none !important;
+}
+
+.i-amphtml-story-page-open-attachment[active] {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  flex-direction: column !important;
+  position: absolute !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  background: linear-gradient(0, rgba(0, 0, 0, 0.15), transparent) !important;
+  pointer-events: none !important;
+  z-index: 3 !important;
+  animation: open-attachment-fly-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both !important;
+  -webkit-touch-callout: default !important; /* Allow long pressing the button to open context menu in iOS */
+  text-decoration: none !important;
+}
+
+.i-amphtml-story-page-open-attachment > * {
+  cursor: pointer !important;
+  pointer-events: auto !important;
+}
+
+.i-amphtml-story-page-open-attachment-icon {
+  display: block !important;
+  height: 32px !important;
+  width: 32px !important;
+  cursor: pointer !important;
+  animation: open-attachment-icon 0.2s cubic-bezier(0.4, 0, 0.2, 1) 2s both !important;
+}
+
+.i-amphtml-story-page-open-attachment-icon::after {
+  content: '' !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  height: 100% !important;
+  width: 100% !important;
+  background: #fff !important;
+  border-radius: 100% !important;
+  z-index: -1 !important;
+  animation: open-attachment-icon-explode 0.25s cubic-bezier(0.4, 0, 0.2, 1) 2s
+    both !important;
+}
+
+.i-amphtml-story-page-open-attachment-bar-left,
+.i-amphtml-story-page-open-attachment-bar-right,
+.i-amphtml-story-outlink-page-open-attachment-bar-left,
+.i-amphtml-story-outlink-page-open-attachment-bar-right {
+  position: absolute !important;
+  display: block !important;
+  height: 3px !important;
+  width: 12px !important;
+  border-radius: 3px !important;
+  top: 14px !important;
+}
+
+.i-amphtml-story-page-open-attachment-bar-left {
+  left: 6px !important;
+  animation: open-attachment-icon-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) 2s
+      both,
+    open-attachment-bar-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) both !important;
+}
+
+.i-amphtml-story-page-open-attachment-bar-right {
+  right: 6px !important;
+  animation: open-attachment-icon-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) 2s
+      both,
+    open-attachment-bar-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) both !important;
+}
+
+.i-amphtml-story-page-open-attachment-label {
+  position: relative !important;
+  padding: 12px 32px 20px 32px !important;
+  height: 16px !important;
+  max-width: calc(100% - 64px) !important;
+  color: #fff !important;
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 16px !important;
+  font-weight: bold !important;
+  letter-spacing: 0.3px;
+  line-height: 16px !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.36) !important;
+  white-space: nowrap !important;
+}
+
+/** For amp-story-inline-page-attachment-v2 experiment elements. */
+.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment {
+  --i-amphtml-chip-background-color: rgba(255, 255, 255, 0.5) !important;
+  --i-amphtml-img-background-color: white !important;
+  --i-amphtml-label-text-color: white !important;
+  --i-amphtml-arrow-color: black !important;
+  --i-amphtml-page-attachment-ui-animation-delay: 1s !important;
+  --i-amphtml-page-attachment-ui-animation-duration: .6s !important;
+}
+
+[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment {
+  --i-amphtml-chip-background-color: rgba(0, 0, 0, 0.5) !important;
+  --i-amphtml-img-background-color: black !important;
+  --i-amphtml-label-text-color: black !important;
+  --i-amphtml-arrow-color: white !important;
+}
+
+.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  flex-direction: column !important;
+  position: absolute !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  background: linear-gradient(0, rgba(0, 0, 0, 0.15), transparent) !important;
+  pointer-events: none !important;
+  -webkit-touch-callout: default !important; /* Allow long pressing the button to open context menu in iOS */
+  text-decoration: none !important;
+  animation: none !important;
+}
+
+.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment:not([active]) {
+  /* Prevent tabbing to inactive page's buttons */
+  visibility: hidden !important;
+}
+
+.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-label {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 16px !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.3px;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  max-width: 210px !important;
+  /* Prevents clipping of decenders. */
+  line-height: 18px !important;
+}
+
+/** For amp-story-inline-page-attachment-v2 inline default. */
+.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-label {
+  color: var(--i-amphtml-label-text-color) !important;
+}
+
+/** For amp-story-inline-page-attachment-v2 inline with images. */
+.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-inline-page-attachment-chip {
+  background-color: var(--i-amphtml-chip-background-color) !important;
+  display: flex !important;
+  border-radius: 24px !important;
+  align-items: center !important;
+  overflow: hidden !important;
+  margin-bottom: 12px !important;
+}
+
+.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment[active] .i-amphtml-story-inline-page-attachment-chip {
+  animation: tap-scale var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important;
+}
+
+.i-amphtml-story-inline-page-attachment-chip:only-child {
+  margin-bottom: 20px !important;
+}
+
+.i-amphtml-story-inline-page-attachment-img {
+  background-size: contain !important;
+  background-repeat: no-repeat !important;
+}
+
+.i-amphtml-story-inline-page-attachment-img {
+  height: 48px !important;
+  width: 48px !important;
+  background-color: var(--i-amphtml-img-background-color) !important;
+}
+
+.i-amphtml-story-inline-page-attachment-img:nth-child(2) {
+  margin-inline-start: 1px !important;
+}
+
+.i-amphtml-story-inline-page-attachment-arrow {
+  position: relative !important;
+  height: 32px !important;
+  width: 32px !important;
+  border-radius: 50% !important;
+  background-color: var(--i-amphtml-img-background-color) !important;
+}
+
+.i-amphtml-story-inline-page-attachment-arrow:not(:only-child) {
+  margin: 8px !important;
+}
+
+.i-amphtml-story-inline-page-attachment-arrow:before {
+  content: '' !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 8" width="20px" height="8px"><path d="M18,7.7c-0.2,0-0.5-0.1-0.7-0.2l-7.3-4l-7.3,4C2,7.9,1.1,7.7,0.7,6.9c-0.4-0.7-0.1-1.6,0.6-2l8-4.4c0.5-0.2,1-0.2,1.5,0l8,4.4c0.7,0.4,1,1.3,0.6,2C19,7.4,18.5,7.7,18,7.7z"></path></svg>') !important;
+  background-position: center !important;
+  background-size: auto !important;
+  background-repeat: no-repeat !important;
+}
+
+.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment[active] .i-amphtml-story-inline-page-attachment-arrow:before {
+  animation: move-up-arrow-in-circle var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important;
+}
+
+[theme="dark"] .i-amphtml-story-inline-page-attachment-arrow:before {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 8" width="20px" height="8px"><path d="M18,7.7c-0.2,0-0.5-0.1-0.7-0.2l-7.3-4l-7.3,4C2,7.9,1.1,7.7,0.7,6.9c-0.4-0.7-0.1-1.6,0.6-2l8-4.4c0.5-0.2,1-0.2,1.5,0l8,4.4c0.7,0.4,1,1.3,0.6,2C19,7.4,18.5,7.7,18,7.7z"></path></svg>') !important;
+}
+
+.i-amphtml-amp-story-page-attachment-ui-v2:not([href]) .i-amphtml-story-page-attachment-label {
+  margin-bottom: 20px !important;
+  color: var(--i-amphtml-label-text-color) !important;
+}
+
+/** For amp-story-outlink-page-attachment-v2 outlink. */
+.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment {
+  --i-amphtml-outlink-cta-background-color: white !important;
+  --i-amphtml-outlink-cta-text-color: black !important;
+  background: linear-gradient(0, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)) !important;
+}
+
+[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment {
+  --i-amphtml-outlink-cta-background-color: black !important;
+  --i-amphtml-outlink-cta-text-color: white !important;
+  background: linear-gradient(0, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0)) !important;
+}
+
+[href].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment {
+  /* Outlink attachments do not need the linear gradient. */
+  background: none !important;
+}
+
+[href].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment[active] {
+  animation: tap-scale var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important;
+}
+
+.i-amphtml-story-outlink-page-attachment-arrow {
+  display: block !important;
+  cursor: pointer !important;
+  margin-bottom: 10px !important;
+  fill: var(--i-amphtml-outlink-cta-background-color) !important;
+  filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.3)) !important;
+}
+
+.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment[active] .i-amphtml-story-outlink-page-attachment-arrow {
+  animation: move-up-arrow var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important;
+}
+
+@keyframes move-up-arrow {
+  0%, 100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  45% {
+    opacity: 0;
+    transform: translateY(-7px);
+  }
+  45.01% {
+    transform: translateY(5px);
+  }
+}
+
+@keyframes move-up-arrow-in-circle {
+  0%, 100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  45% {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  45.01% {
+    transform: translateY(3px);
+  }
+}
+
+@keyframes tap-scale {
+  0%, 100% {
+    transform: scale(1);
+  }
+  45% {
+    transform: scale(.9);
+  }
+}
+
+.i-amphtml-story-outlink-page-attachment-outlink-chip {
+  display: flex !important;
+  position: relative !important;
+  padding: 10px 6px 10px 6px !important;
+  margin: 0 0 20px 0 !important;
+  height: 16px !important;
+  max-width: calc(100% - 64px) !important;
+  border-radius: 30px !important;
+  background: var(--i-amphtml-outlink-cta-background-color) !important;
+  place-items: center !important;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15) !important;
+}
+
+.i-amphtml-story-outlink-page-attachment-img {
+  height: 24px !important;
+  width: 24px !important;
+  vertical-align: middle !important;
+  background-size: cover !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  border-radius: 50% !important;
+}
+
+[href] .i-amphtml-story-page-attachment-label {
+  padding-inline-start: 6px !important;
+  padding-inline-end: 8px !important;
+  color: var(--i-amphtml-outlink-cta-text-color) !important;
+}
+
+.i-amphtml-story-outlink-page-attachment-label:only-child {
+  padding-inline-start: 8px !important;
+}
+
+.i-amphtml-story-page-open-attachment-link-icon {
+  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-open-page-attachment.js b/extensions/amp-story/1.0/amp-story-open-page-attachment.js
new file mode 100644
index 0000000000000..2e7920d6bbef9
--- /dev/null
+++ b/extensions/amp-story/1.0/amp-story-open-page-attachment.js
@@ -0,0 +1,304 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview Helper for amp-story rendering of page-attachment UI.
+ */
+import {AttachmentTheme} from './amp-story-page-attachment';
+import {LocalizedStringId} from '../../../src/localized-strings';
+import {computedStyle, setImportantStyles} from '../../../src/style';
+import {getLocalizationService} from './amp-story-localization-service';
+import {getRGBFromCssColorValue, getTextColorForRGB} from './utils';
+import {htmlFor, htmlRefs} from '../../../src/static-template';
+import {isPageAttachmentUiV2ExperimentOn} from './amp-story-page-attachment-ui-v2';
+import {toWin} from '../../../src/types';
+
+/**
+ * @enum {string}
+ */
+const CtaAccentElement = {
+  TEXT: 'text',
+  BACKGROUND: 'background',
+};
+
+/**
+ * @param {!Element} element
+ * @return {!Element}
+ */
+export const buildOldAttachmentElement = (element) =>
+  htmlFor(element)`
+    <a class="
+        i-amphtml-story-page-open-attachment i-amphtml-story-system-reset"
+        role="button" target="_top">
+      <span class="i-amphtml-story-page-open-attachment-icon">
+        <span class="i-amphtml-story-page-open-attachment-bar-left"></span>
+        <span class="i-amphtml-story-page-open-attachment-bar-right"></span>
+      </span>
+      <span class="i-amphtml-story-page-open-attachment-label"></span>
+    </a>`;
+
+/**
+ * For amp-story-page-attachment-ui-v2.
+ * No image by default, if images are defined they are appended to the template.
+ * @param {!Element} element
+ * @return {!Element}
+ */
+export const buildOpenInlineAttachmentElement = (element) =>
+  htmlFor(element)`
+    <a class="i-amphtml-story-page-open-attachment i-amphtml-story-system-reset i-amphtml-amp-story-page-attachment-ui-v2" role="button">
+      <div class="i-amphtml-story-inline-page-attachment-chip" ref="chipEl">
+        <div class="i-amphtml-story-inline-page-attachment-arrow"></div>
+      </div>
+    </a>`;
+
+/**
+ * For amp-story-page-attachment-ui-v2.
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildOpenOutlinkAttachmentElement = (element) =>
+  htmlFor(element)`
+    <a class="i-amphtml-story-page-open-attachment i-amphtml-amp-story-page-attachment-ui-v2" role="button" target="_top">
+      <svg class="i-amphtml-story-outlink-page-attachment-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 8" width="20px" height="8px"><path d="M18,7.7c-0.2,0-0.5-0.1-0.7-0.2l-7.3-4l-7.3,4C2,7.9,1.1,7.7,0.7,6.9c-0.4-0.7-0.1-1.6,0.6-2l8-4.4c0.5-0.2,1-0.2,1.5,0l8,4.4c0.7,0.4,1,1.3,0.6,2C19,7.4,18.5,7.7,18,7.7z"></path></svg>
+      <div class="i-amphtml-story-outlink-page-attachment-outlink-chip" ref="chipEl">
+        <span class="i-amphtml-story-page-attachment-label" ref="ctaLabelEl"></span>
+      </div>
+    </a>`;
+
+/**
+ * For amp-story-page-attachment-ui-v2.
+ * @param {!Element} element
+ * @return {!Element}
+ */
+export const buildOpenAttachmentElementLinkIcon = (element) =>
+  htmlFor(element)`
+  <svg class="i-amphtml-story-page-open-attachment-link-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill-opacity=".1" d="M12 0c6.6 0 12 5.4 12 12s-5.4 12-12 12S0 18.6 0 12 5.4 0 12 0z"></path>
+    <path d="M13.8 14.6c.1.1.2.3.2.5s-.1.3-.2.5L12.3 17c-.7.7-1.7 1.1-2.7 1.1-1 0-1.9-.4-2.7-1.1-.7-.7-1.1-1.7-1.1-2.7 0-1 .4-1.9 1.1-2.7l1.5-1.5c.2 0 .3-.1.5-.1s.3.1.5.2c.1.1.2.3.2.5s-.1.4-.2.5l-1.5 1.5c-.5.5-.7 1.1-.7 1.7 0 .6.3 1.3.7 1.7.5.5 1.1.7 1.7.7s1.3-.3 1.7-.7l1.5-1.5c.3-.3.7-.3 1 0zM17 7c-.7-.7-1.7-1.1-2.7-1.1-1 0-1.9.4-2.7 1.1l-1.5 1.5c0 .1-.1.3-.1.4 0 .2.1.3.2.5.1.1.3.2.5.2s.3-.1.5-.2l1.5-1.5c.5-.5 1.1-.7 1.7-.7.6 0 1.3.3 1.7.7.5.5.7 1.1.7 1.7 0 .6-.3 1.3-.7 1.7l-1.5 1.5c-.1.1-.2.3-.2.5s.1.3.2.5c.1.1.3.2.5.2s.3-.1.5-.2l1.5-1.5c.7-.7 1.1-1.7 1.1-2.7-.1-1-.5-1.9-1.2-2.6zm-7.9 7.2c0 .2.1.3.2.5.1.1.3.2.5.2s.4-.1.5-.2l4.5-4.5c.1-.1.2-.3.2-.5s-.1-.4-.2-.5c-.3-.2-.8-.2-1 .1l-4.5 4.5c-.1.1-.2.3-.2.4z"></path>
+  </svg>`;
+
+/**
+ * Determines which open attachment UI to render.
+ * @param {!Element} pageEl
+ * @param {!Element} attachmentEl
+ * @return {!Element}
+ */
+export const renderPageAttachmentUI = (pageEl, attachmentEl) => {
+  if (isPageAttachmentUiV2ExperimentOn(pageEl.getAmpDoc().win)) {
+    if (attachmentEl.getAttribute('href')) {
+      return renderOutlinkPageAttachmentUI(pageEl, attachmentEl);
+    } else {
+      return renderInlinePageAttachmentUi(pageEl, attachmentEl);
+    }
+  }
+  return renderOldPageAttachmentUI(pageEl, attachmentEl);
+};
+
+/**
+ * Renders default page attachment UI.
+ * @param {!Element} pageEl
+ * @param {!Element} attachmentEl
+ * @return {!Element}
+ */
+const renderOldPageAttachmentUI = (pageEl, attachmentEl) => {
+  const openAttachmentEl = buildOldAttachmentElement(pageEl);
+
+  // If the attachment is a link, copy href to the element so it can be previewed on hover and long press.
+  const attachmentHref = attachmentEl.getAttribute('href');
+  if (attachmentHref) {
+    openAttachmentEl.setAttribute('href', attachmentHref);
+  }
+
+  const textEl = openAttachmentEl.querySelector(
+    '.i-amphtml-story-page-open-attachment-label'
+  );
+
+  const openLabelAttr =
+    attachmentEl.getAttribute('cta-text') ||
+    attachmentEl.getAttribute('data-cta-text');
+  const openLabel =
+    (openLabelAttr && openLabelAttr.trim()) ||
+    getLocalizationService(pageEl).getLocalizedString(
+      LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL
+    );
+
+  textEl.textContent = openLabel;
+
+  return openAttachmentEl;
+};
+
+/**
+ * Renders inline page attachment UI.
+ * @param {!Element} pageEl
+ * @param {!Element} attachmentEl
+ * @return {!Element}
+ */
+const renderOutlinkPageAttachmentUI = (pageEl, attachmentEl) => {
+  const openAttachmentEl = buildOpenOutlinkAttachmentElement(pageEl);
+
+  // Copy href to the element so it can be previewed on hover and long press.
+  const attachmentHref = attachmentEl.getAttribute('href');
+  if (attachmentHref) {
+    openAttachmentEl.setAttribute('href', attachmentHref);
+  }
+
+  // Get elements.
+  const {chipEl, ctaLabelEl} = htmlRefs(openAttachmentEl);
+
+  // Set theme.
+  let themeAttribute = attachmentEl.getAttribute('theme');
+  if (themeAttribute) {
+    themeAttribute = themeAttribute.toLowerCase();
+  }
+  openAttachmentEl.setAttribute('theme', themeAttribute);
+
+  if (themeAttribute === AttachmentTheme.CUSTOM) {
+    setCustomThemeStyles(attachmentEl, openAttachmentEl);
+  }
+
+  // Append text & aria-label.
+  const openLabelAttr =
+    attachmentEl.getAttribute('cta-text') ||
+    attachmentEl.getAttribute('data-cta-text');
+  const openLabel = openLabelAttr
+    ? openLabelAttr.trim()
+    : getLocalizationService(pageEl).getLocalizedString(
+        LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL
+      );
+  ctaLabelEl.textContent = openLabel;
+  openAttachmentEl.setAttribute('aria-label', openLabel);
+
+  // Set image.
+  const openImgAttr = attachmentEl.getAttribute('cta-image');
+  if (openImgAttr && openImgAttr !== 'none') {
+    const ctaImgEl = htmlFor(chipEl)`
+      <div class="i-amphtml-story-outlink-page-attachment-img"></div>`;
+    setImportantStyles(ctaImgEl, {
+      'background-image': 'url(' + openImgAttr + ')',
+    });
+    chipEl.prepend(ctaImgEl);
+  } else if (!openImgAttr) {
+    // Attach link icon SVG by default.
+    const linkImage = buildOpenAttachmentElementLinkIcon(attachmentEl);
+    chipEl.prepend(linkImage);
+  }
+
+  return openAttachmentEl;
+};
+
+/**
+ * Renders inline page attachment UI.
+ * @param {!Element} pageEl
+ * @param {!Element} attachmentEl
+ * @return {!Element}
+ */
+const renderInlinePageAttachmentUi = (pageEl, attachmentEl) => {
+  const openAttachmentEl = buildOpenInlineAttachmentElement(pageEl);
+
+  // Set theme.
+  const theme = attachmentEl.getAttribute('theme');
+  if (theme && AttachmentTheme.DARK === theme.toLowerCase()) {
+    openAttachmentEl.setAttribute('theme', AttachmentTheme.DARK);
+  }
+
+  // Append text & aria-label if defined.
+  const openLabelAttr =
+    attachmentEl.getAttribute('cta-text') ||
+    attachmentEl.getAttribute('data-cta-text');
+  const openLabel =
+    (openLabelAttr && openLabelAttr.trim()) ||
+    getLocalizationService(pageEl).getLocalizedString(
+      LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL
+    );
+  openAttachmentEl.setAttribute('aria-label', openLabel);
+
+  if (openLabel !== 'none') {
+    const textEl = htmlFor(openAttachmentEl)`
+      <span class="i-amphtml-story-page-attachment-label"></span>`;
+    textEl.textContent = openLabel;
+    openAttachmentEl.appendChild(textEl);
+  }
+
+  // Add images if they are defined.
+  const {chipEl} = htmlRefs(openAttachmentEl);
+  const makeImgElWithBG = (openImgAttr) => {
+    const ctaImgEl = htmlFor(chipEl)`
+      <div class="i-amphtml-story-inline-page-attachment-img"></div>`;
+    setImportantStyles(ctaImgEl, {
+      'background-image': 'url(' + openImgAttr + ')',
+    });
+    return ctaImgEl;
+  };
+
+  const openImgAttr2 = attachmentEl.getAttribute('cta-image-2');
+  if (openImgAttr2) {
+    chipEl.prepend(makeImgElWithBG(openImgAttr2));
+  }
+
+  const openImgAttr = attachmentEl.getAttribute('cta-image');
+  if (openImgAttr) {
+    chipEl.prepend(makeImgElWithBG(openImgAttr));
+  }
+
+  return openAttachmentEl;
+};
+
+/**
+ * Sets custom theme attributes.
+ * @param {!Element} attachmentEl
+ * @param {!Element} openAttachmentEl
+ */
+export const setCustomThemeStyles = (attachmentEl, openAttachmentEl) => {
+  const accentColor = attachmentEl.getAttribute('cta-accent-color');
+
+  // Calculating contrast color (black or white) needed for outlink CTA UI.
+  let contrastColor = null;
+  if (accentColor) {
+    setImportantStyles(attachmentEl, {
+      'background-color': attachmentEl.getAttribute('cta-accent-color'),
+    });
+
+    const win = toWin(attachmentEl.ownerDocument.defaultView);
+    const styles = computedStyle(win, attachmentEl);
+    const rgb = getRGBFromCssColorValue(styles['background-color']);
+    contrastColor = getTextColorForRGB(rgb);
+    setImportantStyles(attachmentEl, {
+      'background-color': '',
+    });
+  }
+  if (
+    attachmentEl.getAttribute('cta-accent-element') ===
+    CtaAccentElement.BACKGROUND
+  ) {
+    setImportantStyles(openAttachmentEl, {
+      '--i-amphtml-outlink-cta-background-color': accentColor,
+      '--i-amphtml-outlink-cta-text-color': contrastColor,
+    });
+    setImportantStyles(attachmentEl, {
+      '--i-amphtml-outlink-cta-background-color': accentColor,
+      '--i-amphtml-outlink-cta-text-color': contrastColor,
+    });
+  } else {
+    setImportantStyles(openAttachmentEl, {
+      '--i-amphtml-outlink-cta-background-color': contrastColor,
+      '--i-amphtml-outlink-cta-text-color': accentColor,
+    });
+    setImportantStyles(attachmentEl, {
+      '--i-amphtml-outlink-cta-background-color': contrastColor,
+      '--i-amphtml-outlink-cta-text-color': accentColor,
+    });
+  }
+};
diff --git a/extensions/amp-story/1.0/amp-story-page-attachment-ui-v2.js b/extensions/amp-story/1.0/amp-story-page-attachment-ui-v2.js
new file mode 100644
index 0000000000000..511896e6b055a
--- /dev/null
+++ b/extensions/amp-story/1.0/amp-story-page-attachment-ui-v2.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {isExperimentOn} from '../../../src/experiments';
+
+/**
+ * Returns true if new inline attachment UI is enabled.
+ * @param {!Window} win
+ * @return {boolean}
+ */
+export const isPageAttachmentUiV2ExperimentOn = (win) => {
+  return isExperimentOn(win, 'amp-story-page-attachment-ui-v2');
+};
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 627051aaf65c3..925e74c6162a9 100644
--- a/extensions/amp-story/1.0/amp-story-page-attachment.css
+++ b/extensions/amp-story/1.0/amp-story-page-attachment.css
@@ -16,6 +16,10 @@
 
 /** Remote attachment styles. */
 
+:host {
+  visibility: inherit !important; /* Will propagate visibility of drawer to shadow dom for a11y */
+}
+
 .i-amphtml-story-page-attachment-remote {
   height: 48px !important;
   bottom: 0 !important;
@@ -58,173 +62,133 @@
   background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 48 48" fill="#9AA0A6"><path d="M0 0h48v48H0z" fill="none"/><path d="M38 38H10V10h14V6H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V24h-4v14zM28 6v4h7.17L15.51 29.66l2.83 2.83L38 12.83V20h4V6H28z"/></svg>') !important;
 }
 
-/** amp-story-page open attachment message. */
+/** Remote attachment opening animation */
 
-@keyframes open-attachment-fly-in {
-  0% {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.i-amphtml-story-page-attachment-expand {
+  position: relative !important;
+  width: 100% !important;
+  height: 100% !important;
+  background: #FFF !important;
+  z-index: 100000 !important; /** System layer + 1 */
+  animation: i-amphtml-open-3p-attachment 120ms cubic-bezier(0.0, 0.0, 0.2, 1) forwards !important;
 }
 
-@keyframes open-attachment-icon {
-  0% {
-    transform: translateY(14px);
-  }
-  to {
-    transform: translateY(0);
-  }
+@keyframes i-amphtml-open-3p-attachment {
+ 0% {
+  transform: scaleX(0);
+  opacity: 0.3;
+ }
+ 100% {
+  transform: scaleX(1);
+  opacity: 1;
+ }
 }
 
-@keyframes open-attachment-icon-explode {
-  0% {
-    transform: scale(0);
-  }
-  to {
-    transform: scale(1);
-    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.12);
-  }
-}
+/** For amp-story-outlink-page-attachment-v2 experiment elements. */
 
-@keyframes open-attachment-icon-color {
-  0% {
-    background: #fff;
-  }
-  to {
-    background: rgba(0, 0, 0, 0.87);
-    text-shadow: none;
-  }
+amp-story[desktop] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote  {
+  /* Shows outlink url preview on mobile only. */
+  display: none !important;
 }
 
-@keyframes open-attachment-bar-left {
-  0% {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(-30deg);
-  }
+.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote {
+  height: 56px !important;
+  --i-amphtml-outlink-cta-background-color: white !important;
+  --i-amphtml-outlink-cta-text-color: black !important;
 }
 
-@keyframes open-attachment-bar-right {
-  0% {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(30deg);
-  }
+[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote {
+  --i-amphtml-outlink-cta-background-color: black !important;
+  --i-amphtml-outlink-cta-text-color: white !important;
 }
 
-/**
- * Hiding the element and only showing it on the active page so the animation
- * triggers every time the page becomes active.
- */
-amp-story-page .i-amphtml-story-page-open-attachment {
-  display: none !important;
+[href].i-amphtml-amp-story-page-attachment-ui-v2.amp-story-draggable-drawer-root.i-amphtml-story-draggable-drawer-open {
+  /* Faster duration for outlink drawer. */
+  transition-duration: .3s !important;
 }
 
-amp-story-page[active] .i-amphtml-story-page-open-attachment {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  flex-direction: column !important;
-  position: absolute !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  width: 100% !important;
-  background: linear-gradient(0, rgba(0, 0, 0, 0.15), transparent) !important;
-  pointer-events: none !important;
-  z-index: 3 !important;
-  animation: open-attachment-fly-in 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) both !important;
+.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-content {
+  height: 56px !important;
+  padding-inline-start: 12px !important;
+  padding-inline-end: 18px !important;
+  background: var(--i-amphtml-outlink-cta-background-color) !important;
 }
 
-amp-story-page .i-amphtml-story-page-open-attachment > * {
-  cursor: pointer !important;
-  pointer-events: auto !important;
-}
-
-amp-story-page .i-amphtml-story-page-open-attachment-icon {
-  display: block !important;
-  height: 32px !important;
+.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;
-  cursor: pointer !important;
-  animation: open-attachment-icon 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 2s both !important;
+  height: 32px !important;
+  flex-shrink: 0 !important;
+  padding: 0px !important;
+  border-radius: 50% !important;
+  background-size: cover !important;
+  background-repeat: no-repeat !important;
+  overflow: hidden !important;
 }
 
-amp-story-page .i-amphtml-story-page-open-attachment-icon::after {
-  content: "" !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  height: 100% !important;
-  width: 100% !important;
-  background: #FFF !important;
-  border-radius: 100% !important;
-  z-index: -1 !important;
-  animation: open-attachment-icon-explode 0.25s cubic-bezier(0.4, 0.0, 0.2, 1) 2s both !important;
+.i-amphtml-amp-story-page-attachment-ui-v2 svg.i-amphtml-story-page-open-attachment-link-icon {
+  fill: var(--i-amphtml-outlink-cta-text-color) !important;
 }
 
-amp-story-page .i-amphtml-story-page-open-attachment-bar-left,
-amp-story-page .i-amphtml-story-page-open-attachment-bar-right {
-  position: absolute !important;
-  display: block !important;
-  height: 3px !important;
-  width: 12px !important;
-  border-radius: 3px !important;
-  top: 14px !important;
+.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-title {
+  font-size: 14px !important;
+  padding: 0 12px !important;
+  color: var(--i-amphtml-outlink-cta-text-color) !important;
+  /* For RTL support. */
+  display: flex !important;
 }
 
-amp-story-page .i-amphtml-story-page-open-attachment-bar-left {
-  left: 6px !important;
-  animation: open-attachment-icon-color 0.25s cubic-bezier(0.4, 0.0, 0.2, 1) 2s both,
-             open-attachment-bar-left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) both !important;
+.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-title :first-child {
+  font-weight: bold !important;
 }
 
-amp-story-page .i-amphtml-story-page-open-attachment-bar-right {
-  right: 6px !important;
-  animation: open-attachment-icon-color 0.25s cubic-bezier(0.4, 0.0, 0.2, 1) 2s both,
-             open-attachment-bar-right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) both !important;
+.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-title :first-child:after {
+  /* For RTL supportted space. */
+  content: "\00a0 " !important;
 }
 
-amp-story-page .i-amphtml-story-page-open-attachment-label {
-  position: relative !important;
-  padding: 0 32px !important;
-  margin: 12px 0 20px !important;
-  height: 16px !important;
-  max-width: calc(100% - 64px) !important;
-  color: #FFF !important;
-  font-family: 'Roboto', sans-serif !important;
-  font-size: 16px !important;
-  font-weight: bold !important;
-  letter-spacing: 0.3px;
-  line-height: 16px !important;
+.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-title :nth-child(2) {
+  white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
-  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.36) !important;
-  white-space: nowrap !important;
 }
 
-/** Remote attachment opening animation */
+.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-icon {
+  margin-inline-start: auto !important;
+  width: 20px !important;
+  height: 20px !important;
+  flex-shrink: 0 !important;
+  fill: var(--i-amphtml-outlink-cta-text-color) !important;
+  background: none !important;
+}
 
-.i-amphtml-story-page-attachment-expand {
-  position: relative !important;
+.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote.i-amphtml-story-draggable-drawer-open:after {
+  content: "" !important;
+  position: absolute !important;
   width: 100% !important;
-  height: 100% !important;
-  background: #FFF !important;
-  z-index: 100000 !important; /** System layer + 1 */
-  animation: i-amphtml-open-3p-attachment 120ms cubic-bezier(0.0, 0.0, 0.2, 1) forwards !important;
+  height: 4px !important;
+  color: black !important;
+  bottom: 0 !important;
+  background-color: var(--i-amphtml-outlink-cta-text-color) !important;
+  opacity: .6 !important;
+  transform-origin: left !important;
+  animation: progress-bar-animation .6s both cubic-bezier(0.4, 0.0, 1, 1) !important;
 }
 
-@keyframes i-amphtml-open-3p-attachment {
- 0% {
-  transform: scaleX(0);
-  opacity: 0.3;
- }
- 100% {
-  transform: scaleX(1);
-  opacity: 1;
- }
+[dir="rtl"] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote.i-amphtml-story-draggable-drawer-open:after {
+  transform-origin: right !important;
+}
+
+@keyframes progress-bar-animation {
+  0% {
+    transform: scaleX(0)
+  }
+  100% {
+    transform: scaleX(1)
+  }
+}
+
+amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote .i-amphtml-story-draggable-drawer-spacer {
+    /* Hide spacer in remote attachment. */
+    display: none !important;
 }
diff --git a/extensions/amp-story/1.0/amp-story-page-attachment.js b/extensions/amp-story/1.0/amp-story-page-attachment.js
index 63c1aac87f1c0..84703631d6b0c 100644
--- a/extensions/amp-story/1.0/amp-story-page-attachment.js
+++ b/extensions/amp-story/1.0/amp-story-page-attachment.js
@@ -14,26 +14,60 @@
  * limitations under the License.
  */
 
-import {Action, StateProperty} from './amp-story-store-service';
+import {Action, StateProperty, UIType} from './amp-story-store-service';
 import {DraggableDrawer, DrawerState} from './amp-story-draggable-drawer';
 import {HistoryState, setHistoryState} from './history';
+import {LocalizedStringId} from '../../../src/localized-strings';
 import {Services} from '../../../src/services';
 import {StoryAnalyticsEvent, getAnalyticsService} from './story-analytics';
+import {buildOpenAttachmentElementLinkIcon} from './amp-story-open-page-attachment';
 import {closest, removeElement} from '../../../src/dom';
-import {dev} from '../../../src/log';
+import {dev, devAssert} from '../../../src/log';
+import {getLocalizationService} from './amp-story-localization-service';
 import {getState} from '../../../src/history';
-import {htmlFor} from '../../../src/static-template';
-import {toggle} from '../../../src/style';
+import {htmlFor, htmlRefs} from '../../../src/static-template';
+import {isPageAttachmentUiV2ExperimentOn} from './amp-story-page-attachment-ui-v2';
+import {setImportantStyles, toggle} from '../../../src/style';
+
+import {triggerClickFromLightDom} from './utils';
 
 /** @const {string} */
 const DARK_THEME_CLASS = 'i-amphtml-story-draggable-drawer-theme-dark';
 
+/**
+ * Distance to swipe before opening attachment.
+ * @const {number}
+ */
+const OPEN_THRESHOLD_PX = 150;
+
+/**
+ * Max pixels to transform the remote attachment URL preview. Equivilent to the height of preview element.
+ * @const {number}
+ */
+const DRAG_CAP_PX = 48;
+
+/**
+ * Max pixels to transform the remote attachment URL preview. Equivilent to the height of preview element.
+ * Used for the amp-story-outlink-page-attachment-v2 experiment.
+ * @const {number}
+ */
+const DRAG_CAP_PX_V2 = 56;
+
+/**
+ * Duration of post-tap URL preview progress bar animation minus 100ms.
+ * The minus 100ms roughly accounts for the small system delay in opening a link.
+ * Used for the amp-story-outlink-page-attachment-v2 experiment.
+ * @const {number}
+ */
+const POST_TAP_ANIMATION_DURATION = 500;
+
 /**
  * @enum {string}
  */
-const AttachmentTheme = {
+export const AttachmentTheme = {
   LIGHT: 'light', // default
   DARK: 'dark',
+  CUSTOM: 'custom',
 };
 
 /**
@@ -68,10 +102,15 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
   buildCallback() {
     super.buildCallback();
 
-    const theme = this.element.getAttribute('theme');
-    if (theme && AttachmentTheme.DARK === theme.toLowerCase()) {
-      this.headerEl_.classList.add(DARK_THEME_CLASS);
-      this.element.classList.add(DARK_THEME_CLASS);
+    const theme = this.element.getAttribute('theme')?.toLowerCase();
+    if (theme && AttachmentTheme.DARK === theme) {
+      if (isPageAttachmentUiV2ExperimentOn(this.win)) {
+        this.headerEl_.setAttribute('theme', theme);
+        this.element.setAttribute('theme', theme);
+      } else {
+        this.headerEl_.classList.add(DARK_THEME_CLASS);
+        this.element.classList.add(DARK_THEME_CLASS);
+      }
     }
 
     // URL will be validated and resolved based on the canonical URL if relative
@@ -84,7 +123,11 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
     }
 
     if (this.type_ === AttachmentType.REMOTE) {
-      this.buildRemote_();
+      if (isPageAttachmentUiV2ExperimentOn(this.win)) {
+        this.buildRemoteV2_();
+      } else {
+        this.buildRemote_();
+      }
     }
 
     this.win.addEventListener('pageshow', (event) => {
@@ -105,21 +148,36 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
    * @private
    */
   buildInline_() {
-    this.headerEl_.appendChild(
-      htmlFor(this.element)`
-          <span class="i-amphtml-story-page-attachment-close-button" aria-label="X"
+    const closeButtonEl = htmlFor(this.element)`
+          <button class="i-amphtml-story-page-attachment-close-button" aria-label="close"
               role="button">
-          </span>`
-    );
-    this.headerEl_.appendChild(
-      htmlFor(this.element)`
-          <span class="i-amphtml-story-page-attachment-title"></span>`
-    );
+          </button>`;
+    const localizationService = getLocalizationService(devAssert(this.element));
+
+    const titleEl = htmlFor(this.element)`
+    <span class="i-amphtml-story-page-attachment-title"></span>`;
+
+    if (localizationService) {
+      const localizedCloseString = localizationService.getLocalizedString(
+        LocalizedStringId.AMP_STORY_CLOSE_BUTTON_LABEL
+      );
+      closeButtonEl.setAttribute('aria-label', localizedCloseString);
+    }
 
     if (this.element.hasAttribute('data-title')) {
-      this.headerEl_.querySelector(
-        '.i-amphtml-story-page-attachment-title'
-      ).textContent = this.element.getAttribute('data-title');
+      titleEl.textContent = this.element.getAttribute('data-title');
+    }
+
+    if (isPageAttachmentUiV2ExperimentOn(this.win)) {
+      const titleAndCloseWrapperEl = this.headerEl_.appendChild(
+        htmlFor(this.element)`
+            <div class="i-amphtml-story-draggable-drawer-header-title-and-close"></div>`
+      );
+      titleAndCloseWrapperEl.appendChild(closeButtonEl);
+      titleAndCloseWrapperEl.appendChild(titleEl);
+    } else {
+      this.headerEl_.appendChild(closeButtonEl);
+      this.headerEl_.appendChild(titleEl);
     }
 
     const templateEl = this.element.querySelector(
@@ -140,8 +198,8 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
    * @private
    */
   buildRemote_() {
-    this.setDragCap_(48 /* pixels */);
-    this.setOpenThreshold_(150 /* pixels */);
+    this.setDragCap_(DRAG_CAP_PX);
+    this.setOpenThreshold_(OPEN_THRESHOLD_PX);
 
     this.headerEl_.classList.add(
       'i-amphtml-story-draggable-drawer-header-attachment-remote'
@@ -165,6 +223,56 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
       );
   }
 
+  /**
+   * Builds remote V2 page attachment's UI.
+   * @private
+   */
+  buildRemoteV2_() {
+    this.setDragCap_(DRAG_CAP_PX_V2);
+    this.setOpenThreshold_(OPEN_THRESHOLD_PX);
+
+    this.headerEl_.classList.add(
+      'i-amphtml-story-draggable-drawer-header-attachment-remote'
+    );
+    this.element.classList.add('i-amphtml-story-page-attachment-remote');
+    // Use an anchor element to make this a real link in vertical rendering.
+    const link = htmlFor(this.element)`
+      <a class="i-amphtml-story-page-attachment-remote-content" target="_blank">
+        <span class="i-amphtml-story-page-attachment-remote-title"><span ref="openStringEl"></span><span ref="urlStringEl"></span></span>
+        <svg class="i-amphtml-story-page-attachment-remote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M38 38H10V10h14V6H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V24h-4v14zM28 6v4h7.17L15.51 29.66l2.83 2.83L38 12.83V20h4V6H28z"></path></svg>
+      </a>`;
+    const hrefAttr = this.element.getAttribute('href');
+    link.setAttribute('href', hrefAttr);
+    const {openStringEl, urlStringEl} = htmlRefs(link);
+
+    // Set image.
+    const openImgAttr = this.element.getAttribute('cta-image');
+    if (openImgAttr && openImgAttr !== 'none') {
+      const ctaImgEl = this.win.document.createElement('div');
+      ctaImgEl.classList.add('i-amphtml-story-page-attachment-remote-img');
+      setImportantStyles(ctaImgEl, {
+        'background-image': 'url(' + openImgAttr + ')',
+      });
+      link.prepend(ctaImgEl);
+    } else if (!openImgAttr) {
+      // Attach link icon SVG by default.
+      const linkImage = buildOpenAttachmentElementLinkIcon(link);
+      link.prepend(linkImage);
+    }
+
+    // Set url prevew text.
+    const localizationService = getLocalizationService(devAssert(this.element));
+    if (localizationService) {
+      const localizedOpenString = localizationService.getLocalizedString(
+        LocalizedStringId.AMP_STORY_OPEN_OUTLINK_TEXT
+      );
+      openStringEl.textContent = localizedOpenString;
+    }
+    urlStringEl.textContent = hrefAttr;
+
+    this.contentEl_.appendChild(link);
+  }
+
   /**
    * @override
    */
@@ -228,14 +336,15 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
 
     super.open(shouldAnimate);
 
+    this.storeService_.dispatch(Action.TOGGLE_PAGE_ATTACHMENT_STATE, true);
     this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, false);
 
     // Don't create a new history entry for remote attachment as user is
     // navigating away.
     if (this.type_ !== AttachmentType.REMOTE) {
-      const currentHistoryState = /** @type {!Object} */ (getState(
-        this.win.history
-      ));
+      const currentHistoryState = /** @type {!Object} */ (
+        getState(this.win.history)
+      );
       const historyState = {
         ...currentHistoryState,
         [HistoryState.ATTACHMENT_PAGE_ID]: this.storeService_.get(
@@ -251,7 +360,33 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
     );
 
     if (this.type_ === AttachmentType.REMOTE) {
-      this.openRemote_();
+      if (isPageAttachmentUiV2ExperimentOn(this.win)) {
+        this.openRemoteV2_();
+      } else {
+        this.openRemote_();
+      }
+    }
+  }
+
+  /**
+   * Triggers a remote attachment preview URL animation, and redirects
+   * to the specified URL.
+   * @private
+   */
+  openRemoteV2_() {
+    const clickTarget = this.element.parentElement
+      .querySelector('.i-amphtml-story-page-open-attachment-host')
+      .shadowRoot.querySelector('a.i-amphtml-story-page-open-attachment');
+
+    const isMobileUI =
+      this.storeService_.get(StateProperty.UI_STATE) === UIType.MOBILE;
+    // Shows outlink url preview on mobile only.
+    if (!isMobileUI) {
+      triggerClickFromLightDom(clickTarget, this.element);
+    } else {
+      this.win.setTimeout(() => {
+        triggerClickFromLightDom(clickTarget, this.element);
+      }, POST_TAP_ANIMATION_DURATION);
     }
   }
 
@@ -264,7 +399,6 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
     const animationEl = this.win.document.createElement('div');
     animationEl.classList.add('i-amphtml-story-page-attachment-expand');
     const storyEl = closest(this.element, (el) => el.tagName === 'AMP-STORY');
-    this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, false);
 
     this.mutateElement(() => {
       storyEl.appendChild(animationEl);
@@ -273,13 +407,12 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
       // amp-story-page-attachment.css). The navigation itself will take some
       // time, depending on the target and network conditions.
       this.win.setTimeout(() => {
-        const navigationService = Services.navigationForDoc(this.getAmpDoc());
-        navigationService.navigateTo(
-          this.win,
-          this.element.getAttribute('href')
-        );
-      }, 50);
-    });
+        const clickTarget = this.element.parentElement
+          .querySelector('.i-amphtml-story-page-open-attachment-host')
+          .shadowRoot.querySelector('a.i-amphtml-story-page-open-attachment');
+        triggerClickFromLightDom(clickTarget, this.element);
+      });
+    }, 50);
   }
 
   /**
@@ -313,6 +446,7 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
 
     super.closeInternal_(shouldAnimate);
 
+    this.storeService_.dispatch(Action.TOGGLE_PAGE_ATTACHMENT_STATE, false);
     this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, true);
 
     const storyEl = closest(this.element, (el) => el.tagName === 'AMP-STORY');
diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js
index 713e4dde93f6e..92b8bdd93bb34 100644
--- a/extensions/amp-story/1.0/amp-story-page.js
+++ b/extensions/amp-story/1.0/amp-story-page.js
@@ -35,7 +35,7 @@ import {
   getStoreService,
 } from './amp-story-store-service';
 import {AdvancementConfig} from './page-advancement';
-import {AmpEvents} from '../../../src/amp-events';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {
   AmpStoryEmbeddedComponent,
   EMBED_ID_ATTRIBUTE_NAME,
@@ -43,8 +43,8 @@ import {
   expandableElementsSelectors,
 } from './amp-story-embedded-component';
 import {AnimationManager, hasAnimations} from './animation';
-import {CommonSignals} from '../../../src/common-signals';
-import {Deferred} from '../../../src/utils/promise';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {EventType, dispatch} from './events';
 import {Layout} from '../../../src/layout';
 import {LoadingSpinner} from './loading-spinner';
@@ -52,33 +52,35 @@ import {LocalizedStringId} from '../../../src/localized-strings';
 import {MediaPool} from './media-pool';
 import {Services} from '../../../src/services';
 import {VideoEvents, delegateAutoplay} from '../../../src/video-interface';
-import {VideoUtils} from '../../../src/utils/video';
 import {
   addAttributesToElement,
-  childElement,
   closestAncestorElementBySelector,
-  isAmpElement,
   iterateCursor,
-  matches,
   scopedQuerySelectorAll,
   whenUpgradedToCustomElement,
 } from '../../../src/dom';
-import {debounce} from '../../../src/utils/rate-limit';
+import {createShadowRootWithStyle, setTextBackgroundColor} from './utils';
+import {debounce} from '../../../src/core/types/function';
 import {dev} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getAmpdoc} from '../../../src/service';
-import {getData, listen} from '../../../src/event-helper';
 import {getFriendlyIframeEmbedOptional} from '../../../src/iframe-helper';
 import {getLocalizationService} from './amp-story-localization-service';
 import {getLogEntries} from './logging';
 import {getMediaPerformanceMetricsService} from './media-performance-metrics-service';
 import {getMode} from '../../../src/mode';
 import {htmlFor} from '../../../src/static-template';
+import {isAutoplaySupported} from '../../../src/utils/video';
 import {isExperimentOn} from '../../../src/experiments';
-import {isMediaDisplayed, setTextBackgroundColor} from './utils';
+import {isPageAttachmentUiV2ExperimentOn} from './amp-story-page-attachment-ui-v2';
+import {isPrerenderActivePage} from './prerender-active-page';
+import {listen, listenOnce} from '../../../src/event-helper';
+import {CSS as pageAttachmentCSS} from '../../../build/amp-story-open-page-attachment-0.1.css';
+import {prefersReducedMotion} from '../../../src/utils/media-query-props';
 import {px, toggle} from '../../../src/style';
+import {renderPageAttachmentUI} from './amp-story-open-page-attachment';
 import {renderPageDescription} from './semantic-render';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
 import {upgradeBackgroundAudio} from './audio';
 
 /**
@@ -102,12 +104,16 @@ export const Selectors = {
     'amp-story-grid-layer amp-anim',
   ALL_AMP_VIDEO: 'amp-story-grid-layer amp-video',
   ALL_IFRAMED_MEDIA: 'audio, video',
+  ALL_PLAYBACK_AMP_MEDIA:
+    'amp-story-grid-layer amp-audio, amp-story-grid-layer amp-video',
   // TODO(gmajoulet): Refactor the way these selectors are used. They will be
   // passed to scopedQuerySelectorAll which expects only one selector and not
   // multiple separated by commas. `> audio` has to be kept first of the list to
   // work with this current implementation.
-  ALL_MEDIA: '> audio, amp-story-grid-layer audio, amp-story-grid-layer video',
+  ALL_PLAYBACK_MEDIA:
+    '> audio, amp-story-grid-layer audio, amp-story-grid-layer video',
   ALL_VIDEO: 'amp-story-grid-layer video',
+  ALL_TABBABLE: 'a, amp-twitter > iframe',
 };
 
 /** @private @const {string} */
@@ -121,7 +127,7 @@ const INTERACTIVE_EMBEDDED_COMPONENTS_SELECTORS = Object.values(
 ).join(',');
 
 /** @private @const {number} */
-const RESIZE_TIMEOUT_MS = 350;
+const RESIZE_TIMEOUT_MS = 1000;
 
 /** @private @const {string} */
 const TAG = 'amp-story-page';
@@ -138,14 +144,16 @@ const DEFAULT_PREVIEW_AUTO_ADVANCE_DURATION = '2s';
 /** @private @const {string} */
 const VIDEO_PREVIEW_AUTO_ADVANCE_DURATION = '5s';
 
+/** @private @const {number} */
+const VIDEO_MINIMUM_AUTO_ADVANCE_DURATION_S = 2;
+
 /**
  * @param {!Element} element
  * @return {!Element}
  */
 const buildPlayMessageElement = (element) =>
   htmlFor(element)`
-      <button role="button"
-          class="i-amphtml-story-page-play-button i-amphtml-story-system-reset">
+      <button role="button" class="i-amphtml-story-page-play-button i-amphtml-story-system-reset">
         <span class="i-amphtml-story-page-play-label"></span>
         <span class='i-amphtml-story-page-play-icon'></span>
       </button>`;
@@ -161,22 +169,6 @@ const buildErrorMessageElement = (element) =>
         <span class='i-amphtml-story-page-error-icon'></span>
       </div>`;
 
-/**
- * @param {!Element} element
- * @return {!Element}
- */
-const buildOpenAttachmentElement = (element) =>
-  htmlFor(element)`
-      <div class="
-          i-amphtml-story-page-open-attachment i-amphtml-story-system-reset"
-          role="button">
-        <span class="i-amphtml-story-page-open-attachment-icon">
-          <span class="i-amphtml-story-page-open-attachment-bar-left"></span>
-          <span class="i-amphtml-story-page-open-attachment-bar-right"></span>
-        </span>
-        <span class="i-amphtml-story-page-open-attachment-label"></span>
-      </div>`;
-
 /**
  * amp-story-page states.
  * @enum {number}
@@ -225,6 +217,11 @@ function debounceEmbedResize(win, page, mutator) {
  * an <amp-story>.
  */
 export class AmpStoryPage extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed(element) {
+    return isPrerenderActivePage(element);
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -242,9 +239,6 @@ export class AmpStoryPage extends AMP.BaseElement {
       100
     );
 
-    /** @private {boolean}  */
-    this.isFirstPage_ = false;
-
     /** @private {?LoadingSpinner} */
     this.loadingSpinner_ = null;
 
@@ -257,9 +251,6 @@ export class AmpStoryPage extends AMP.BaseElement {
     /** @private {?Element} */
     this.openAttachmentEl_ = null;
 
-    /** @private @const {!../../../src/service/resources-interface.ResourcesInterface} */
-    this.resources_ = Services.resourcesForDoc(getAmpdoc(this.win.document));
-
     /** @private @const {!../../../src/service/mutator-interface.MutatorInterface} */
     this.mutator_ = Services.mutatorForDoc(getAmpdoc(this.win.document));
 
@@ -294,7 +285,7 @@ export class AmpStoryPage extends AMP.BaseElement {
     /** @private {?Element} */
     this.cssVariablesStyleEl_ = null;
 
-    /** @private {?../../../src/layout-rect.LayoutRectDef} */
+    /** @private {?../../../src/layout-rect.LayoutSizeDef} */
     this.layoutBox_ = null;
 
     /** @private {!Array<function()>} */
@@ -303,6 +294,9 @@ export class AmpStoryPage extends AMP.BaseElement {
     /** @private @const {!../../../src/service/timer-impl.Timer} */
     this.timer_ = Services.timerFor(this.win);
 
+    /** @private {!Deferred} */
+    this.backgroundAudioDeferred_ = new Deferred();
+
     /**
      * Whether the user agent matches a bot.  This is used to prevent resource
      * optimizations that make the document less useful at crawl time, e.g.
@@ -319,23 +313,20 @@ export class AmpStoryPage extends AMP.BaseElement {
    * @private
    */
   maybeCreateAnimationManager_() {
-    if (!this.animationManager_) {
-      if (!hasAnimations(this.element)) {
-        return;
-      }
-
-      this.animationManager_ = AnimationManager.create(
-        this.element,
-        this.getAmpDoc(),
-        this.getAmpDoc().getUrl()
-      );
+    if (this.animationManager_) {
+      return;
     }
-  }
-
-  /** @override */
-  firstAttachedCallback() {
-    // Only prerender the first story page.
-    this.isFirstPage_ = matches(this.element, 'amp-story-page:first-of-type');
+    if (prefersReducedMotion(this.win)) {
+      return;
+    }
+    if (!hasAnimations(this.element)) {
+      return;
+    }
+    this.animationManager_ = AnimationManager.create(
+      this.element,
+      this.getAmpDoc(),
+      this.getAmpDoc().getUrl()
+    );
   }
 
   /** @override */
@@ -345,6 +336,7 @@ export class AmpStoryPage extends AMP.BaseElement {
     this.initializeMediaPool_();
     this.maybeCreateAnimationManager_();
     this.maybeSetPreviewDuration_();
+    this.maybeSetStoryNextUp_();
     this.advancement_ = AdvancementConfig.forElement(this.win, this.element);
     this.advancement_.addPreviousListener(() => this.previous());
     this.advancement_.addAdvanceListener(() =>
@@ -361,6 +353,8 @@ export class AmpStoryPage extends AMP.BaseElement {
     );
     this.setPageDescription_();
     this.element.setAttribute('role', 'region');
+    this.initializeImgAltTags_();
+    this.initializeTabbableElements_();
   }
 
   /** @private */
@@ -382,6 +376,91 @@ export class AmpStoryPage extends AMP.BaseElement {
     }
   }
 
+  /**
+   * Reads the storyNextUp param if provided and sets the auto-advance-after
+   * attribute to the given value if there isn't one set by the publisher. The
+   * auto-advance-after attribute may later be set to the duration of the first
+   * video if there is one, once the metadata is available.
+   * @private
+   */
+  maybeSetStoryNextUp_() {
+    const autoAdvanceAttr = this.element.getAttribute('auto-advance-after');
+    // This is a private param used for testing, it may be changed
+    // or removed without notice.
+    const storyNextUpParam = Services.viewerForDoc(this.element).getParam(
+      'storyNextUp'
+    );
+    if (autoAdvanceAttr !== null || storyNextUpParam === null) {
+      return;
+    }
+    addAttributesToElement(
+      this.element,
+      dict({
+        'auto-advance-after': storyNextUpParam,
+      })
+    );
+    this.listenAndUpdateAutoAdvanceDuration_();
+  }
+
+  /**
+   * If there's a video on the page, this sets a listener to update
+   * the TimeBasedAdvancement when the first video's duration becomes available.
+   * @private
+   */
+  listenAndUpdateAutoAdvanceDuration_() {
+    const video = this.getFirstAmpVideo_();
+    if (video === null) {
+      return;
+    }
+    whenUpgradedToCustomElement(video)
+      .then(() => video.getImpl())
+      .then((videoImpl) => {
+        const videoDuration = videoImpl.getDuration();
+        if (!isNaN(videoDuration)) {
+          this.maybeUpdateAutoAdvanceTime_(videoDuration);
+          return;
+        }
+        listenOnce(video, VideoEvents.LOADEDMETADATA, () => {
+          this.maybeUpdateAutoAdvanceTime_(videoImpl.getDuration());
+        });
+      });
+  }
+
+  /**
+   * If advancement_ is a TimeBasedConfig, this updates the 'auto-advance-after'
+   * attribute and updates the time delay used by the page's AdvancementConfig.
+   * If the duration is < 2 seconds, the default is left unchanged.
+   * @param {number} duration The updated duration for the page, in seconds.
+   * @private
+   */
+  maybeUpdateAutoAdvanceTime_(duration) {
+    if (
+      duration < VIDEO_MINIMUM_AUTO_ADVANCE_DURATION_S ||
+      !this.advancement_ ||
+      !this.advancement_.updateTimeDelay
+    ) {
+      return;
+    }
+    this.advancement_.updateTimeDelay(duration + 's');
+    // 'auto-advance-after' is only read during buildCallback(), but we update it
+    // here to keep the DOM consistent with the AdvancementConfig.
+    addAttributesToElement(
+      this.element,
+      dict({'auto-advance-after': duration + 's'})
+    );
+  }
+
+  /**
+   * Returns the first amp-video in the amp-story-page if there is one, otherwise
+   * returns null.
+   * @return {?Element}
+   * @private
+   */
+  getFirstAmpVideo_() {
+    const videos = this.getAllAmpVideos_();
+    return videos.length === 0 ? null : videos[0];
+  }
+
   /**
    * Delegates video autoplay so the video manager does not follow the
    * autoplay attribute that may have been set by a publisher, which could
@@ -398,12 +477,12 @@ export class AmpStoryPage extends AMP.BaseElement {
       'amp-story-page must be a descendant of amp-story.'
     );
 
-    storyEl.getImpl().then(
-      (storyImpl) => {
-        this.mediaPoolResolveFn_(MediaPool.for(storyImpl));
-      },
-      (reason) => this.mediaPoolRejectFn_(reason)
-    );
+    whenUpgradedToCustomElement(storyEl)
+      .then(() => storyEl.getImpl())
+      .then(
+        (storyImpl) => this.mediaPoolResolveFn_(MediaPool.for(storyImpl)),
+        (reason) => this.mediaPoolRejectFn_(reason)
+      );
   }
 
   /**
@@ -430,6 +509,9 @@ export class AmpStoryPage extends AMP.BaseElement {
     switch (state) {
       case PageState.NOT_ACTIVE:
         this.element.removeAttribute('active');
+        if (this.openAttachmentEl_) {
+          this.openAttachmentEl_.removeAttribute('active');
+        }
         this.pause_();
         this.state_ = state;
         break;
@@ -437,28 +519,23 @@ export class AmpStoryPage extends AMP.BaseElement {
         if (this.state_ === PageState.NOT_ACTIVE) {
           this.element.setAttribute('active', '');
           this.resume_();
+          if (this.openAttachmentEl_) {
+            this.openAttachmentEl_.setAttribute('active', '');
+          }
         }
 
         if (this.state_ === PageState.PAUSED) {
           this.advancement_.start();
           this.playAllMedia_();
-          if (this.animationManager_) {
-            this.animationManager_.resumeAll();
-          }
+          this.animationManager_?.resumeAll();
         }
 
         this.state_ = state;
         break;
       case PageState.PAUSED:
-        // canResume keeps the time advancement timer if set to true, and resets
-        // it when set to false. If the bookend if open, reset the timer. If
-        // user is long pressing, don't reset it.
-        const canResume = !this.storeService_.get(StateProperty.BOOKEND_STATE);
-        this.advancement_.stop(canResume);
+        this.advancement_.stop(true /** canResume */);
         this.pauseAllMedia_(false /** rewindToBeginning */);
-        if (this.animationManager_) {
-          this.animationManager_.pauseAll();
-        }
+        this.animationManager_?.pauseAll();
         this.state_ = state;
         break;
       default:
@@ -471,9 +548,9 @@ export class AmpStoryPage extends AMP.BaseElement {
    * @private
    */
   pause_() {
-    this.advancement_.stop();
+    this.advancement_.stop(false /** canResume */);
 
-    this.stopMeasuringVideoPerformance_();
+    this.stopMeasuringAllVideoPerformance_();
     this.stopListeningToVideoEvents_();
     this.toggleErrorMessage_(false);
     this.togglePlayMessage_(false);
@@ -492,9 +569,11 @@ export class AmpStoryPage extends AMP.BaseElement {
       this.pauseAllMedia_(true /** rewindToBeginning */);
     }
 
-    if (this.animationManager_) {
-      this.animationManager_.cancelAll();
+    if (!this.storeService_.get(StateProperty.MUTED_STATE)) {
+      this.muteAllMedia();
     }
+
+    this.animationManager_?.cancelAll();
   }
 
   /**
@@ -512,17 +591,20 @@ export class AmpStoryPage extends AMP.BaseElement {
               this.advancement_.start();
             }
           });
-        this.startMeasuringVideoPerformance_();
-        this.preloadAllMedia_()
-          .then(() => this.startListeningToVideoEvents_())
-          .then(() => this.playAllMedia_());
+        this.preloadAllMedia_().then(() => {
+          this.startMeasuringAllVideoPerformance_();
+          this.startListeningToVideoEvents_();
+          // iOS 14.2 and 14.3 requires play to be called before unmute
+          this.playAllMedia_().then(() => {
+            if (!this.storeService_.get(StateProperty.MUTED_STATE)) {
+              this.unmuteAllMedia();
+            }
+          });
+        });
       });
-      this.prefersReducedMotion_()
-        ? this.maybeFinishAnimations_()
-        : this.maybeStartAnimations_();
+      this.maybeStartAnimations_();
       this.checkPageHasAudio_();
       this.checkPageHasElementWithPlayback_();
-      this.renderOpenAttachmentUI_();
       this.findAndPrepareEmbeddedComponents_();
     }
 
@@ -535,18 +617,16 @@ export class AmpStoryPage extends AMP.BaseElement {
     const loop =
       this.element.getAttribute('id') !==
       this.element.getAttribute('auto-advance-after');
-    const audioEl = upgradeBackgroundAudio(this.element, loop);
-    if (audioEl) {
-      this.mediaPoolPromise_.then((mediaPool) =>
-        this.registerMedia_(mediaPool, dev().assertElement(audioEl)).then(() =>
-          mediaPool.preload(dev().assertElement(audioEl))
-        )
-      );
-    }
+    upgradeBackgroundAudio(this.element, loop);
+    this.backgroundAudioDeferred_.resolve();
+
     this.muteAllMedia();
     this.getViewport().onResize(
       debounce(this.win, () => this.onResize_(), RESIZE_TIMEOUT_MS)
     );
+
+    this.renderOpenAttachmentUI_();
+
     return Promise.all([
       this.beforeVisible(),
       this.waitForMediaLayout_(),
@@ -554,15 +634,13 @@ export class AmpStoryPage extends AMP.BaseElement {
     ]);
   }
 
-  // TODO(26866): switch back to onMeasuredChange and remove the layoutBox
-  // equality checks.
   /** @override */
   onLayoutMeasure() {
-    const layoutBox = this.getLayoutBox();
+    const layoutBox = this.getLayoutSize();
     // Only measures from the first story page, that always gets built because
     // of the prerendering optimizations in place.
     if (
-      !this.isFirstPage_ ||
+      !isPrerenderActivePage(this.element) ||
       (this.layoutBox_ &&
         this.layoutBox_.width === layoutBox.width &&
         this.layoutBox_.height === layoutBox.height)
@@ -578,7 +656,7 @@ export class AmpStoryPage extends AMP.BaseElement {
           const uiState = this.storeService_.get(StateProperty.UI_STATE);
           // The desktop panels UI uses CSS scale. Retrieving clientHeight/Width
           // ensures we are getting the raw size, ignoring the scale.
-          const {width, height} =
+          const {height, width} =
             uiState === UIType.DESKTOP_PANELS
               ? {
                   height: this.element./*OK*/ clientHeight,
@@ -648,13 +726,21 @@ export class AmpStoryPage extends AMP.BaseElement {
    * @private
    */
   waitForMediaLayout_() {
-    const mediaSet = this.getMediaBySelector_(Selectors.ALL_AMP_MEDIA);
+    const mediaSet = toArray(this.getMediaBySelector_(Selectors.ALL_AMP_MEDIA));
 
-    const mediaPromises = Array.prototype.map.call(mediaSet, (mediaEl) => {
+    const mediaPromises = mediaSet.map((mediaEl) => {
       return new Promise((resolve) => {
         switch (mediaEl.tagName.toLowerCase()) {
-          case 'amp-img':
           case 'amp-anim':
+          case 'amp-img':
+          case 'amp-story-360':
+            // Don't block media layout on a fallback element that will likely
+            // never build/load.
+            if (mediaEl.hasAttribute('fallback')) {
+              resolve();
+              return;
+            }
+
             whenUpgradedToCustomElement(mediaEl)
               .then((el) => el.signals().whenSignal(CommonSignals.LOAD_END))
               .then(resolve, resolve);
@@ -683,6 +769,44 @@ export class AmpStoryPage extends AMP.BaseElement {
     return Promise.all(mediaPromises).then(() => this.markPageAsLoaded_());
   }
 
+  /**
+   * @return {!Promise}
+   * @private
+   */
+  waitForPlaybackMediaLayout_() {
+    const mediaSet = toArray(
+      this.getMediaBySelector_(Selectors.ALL_PLAYBACK_AMP_MEDIA)
+    );
+
+    const mediaPromises = mediaSet.map((mediaEl) => {
+      return new Promise((resolve) => {
+        switch (mediaEl.tagName.toLowerCase()) {
+          case 'amp-audio':
+          case 'amp-video':
+            const signal =
+              mediaEl.getAttribute('layout') === Layout.NODISPLAY
+                ? CommonSignals.BUILT
+                : CommonSignals.LOAD_END;
+
+            whenUpgradedToCustomElement(mediaEl)
+              .then((el) => el.signals().whenSignal(signal))
+              .then(resolve, resolve);
+            break;
+          case 'audio': // Already laid out as built from background-audio attr.
+          default:
+            // Any other tags should not block loading.
+            resolve();
+        }
+      });
+    });
+
+    if (this.element.hasAttribute('background-audio')) {
+      mediaPromises.push(this.backgroundAudioDeferred_.promise);
+    }
+
+    return Promise.all(mediaPromises);
+  }
+
   /**
    * Finds embedded components in page and prepares them.
    * @param {boolean=} forceResize
@@ -772,18 +896,13 @@ export class AmpStoryPage extends AMP.BaseElement {
     });
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return this.isFirstPage_;
-  }
-
   /**
    * Gets all media elements on this page.
    * @return {!Array<?Element>}
    * @private
    */
   getAllMedia_() {
-    return this.getMediaBySelector_(Selectors.ALL_MEDIA);
+    return this.getMediaBySelector_(Selectors.ALL_PLAYBACK_MEDIA);
   }
 
   /**
@@ -795,16 +914,23 @@ export class AmpStoryPage extends AMP.BaseElement {
     return this.getMediaBySelector_(Selectors.ALL_VIDEO);
   }
 
+  /**
+   * Gets all amp video elements on this page.
+   * @return {!Array<?Element>}
+   * @private
+   */
+  getAllAmpVideos_() {
+    return this.getMediaBySelector_(Selectors.ALL_AMP_VIDEO);
+  }
+
   /**
    * Gets media on page by given selector. Finds elements through friendly
-   * iframe (if one exists). By default, it filters the media elements and only
-   * returns those that are visible, ie: not hidden by publisher's CSS.
+   * iframe (if one exists).
    * @param {string} selector
-   * @param {boolean=} includeHiddenMedia
    * @return {!Array<?Element>}
    * @private
    */
-  getMediaBySelector_(selector, includeHiddenMedia = false) {
+  getMediaBySelector_(selector) {
     const iframe = this.element.querySelector('iframe');
     const fie =
       iframe &&
@@ -827,24 +953,7 @@ export class AmpStoryPage extends AMP.BaseElement {
       );
     }
 
-    return includeHiddenMedia
-      ? mediaSet
-      : mediaSet.filter((mediaEl) => this.isMediaDisplayed_(mediaEl));
-  }
-
-  /**
-   * Returns a boolean indicating whether the media element is visible, or
-   * hidden by any publisher CSS rule.
-   * @param {!Element} mediaEl
-   * @return {boolean}
-   * @private
-   */
-  isMediaDisplayed_(mediaEl) {
-    const ampEl = dev().assertElement(
-      isAmpElement(mediaEl) ? mediaEl : mediaEl.parentElement
-    );
-    const resource = this.resources_.getResourceForElement(ampEl);
-    return isMediaDisplayed(ampEl, resource);
+    return mediaSet;
   }
 
   /**
@@ -852,23 +961,23 @@ export class AmpStoryPage extends AMP.BaseElement {
    * @private
    */
   isAutoplaySupported_() {
-    VideoUtils.resetIsAutoplaySupported();
-    return VideoUtils.isAutoplaySupported(this.win, getMode(this.win).lite);
+    return isAutoplaySupported(this.win);
   }
 
   /**
    * Applies the specified callback to each media element on the page, after the
    * media element is loaded.
-   * @param {!function(!./media-pool.MediaPool, !Element)} callbackFn The
+   * @param {function(!./media-pool.MediaPool, !Element)} callbackFn The
    *     callback to be applied to each media element.
    * @return {!Promise} Promise that resolves after the callbacks are called.
    * @private
    */
   whenAllMediaElements_(callbackFn) {
-    const mediaSet = this.getAllMedia_();
+    const mediaSet = toArray(this.getAllMedia_());
+
     return this.mediaPoolPromise_.then((mediaPool) => {
-      const promises = Array.prototype.map.call(mediaSet, (mediaEl) => {
-        return callbackFn(mediaPool, mediaEl);
+      const promises = mediaSet.map((mediaEl) => {
+        return callbackFn(mediaPool, dev().assertElement(mediaEl));
       });
 
       return Promise.all(promises);
@@ -936,10 +1045,6 @@ export class AmpStoryPage extends AMP.BaseElement {
       mediaEl.play();
       return Promise.resolve();
     } else {
-      if (!this.isMediaDisplayed_(mediaEl)) {
-        return Promise.resolve();
-      }
-
       return this.loadPromise(mediaEl).then(
         () => {
           return mediaPool
@@ -960,7 +1065,9 @@ export class AmpStoryPage extends AMP.BaseElement {
                   }
 
                   // Error was expected, don't send the performance metrics.
-                  this.stopMeasuringVideoPerformance_(false /** sendMetrics */);
+                  this.stopMeasuringAllVideoPerformance_(
+                    false /** sendMetrics */
+                  );
                   this.togglePlayMessage_(true);
                 });
               }
@@ -984,9 +1091,9 @@ export class AmpStoryPage extends AMP.BaseElement {
    * @private
    */
   preloadAllMedia_() {
-    return this.whenAllMediaElements_((mediaPool, mediaEl) => {
-      this.preloadMedia_(mediaPool, mediaEl);
-    });
+    return this.whenAllMediaElements_((mediaPool, mediaEl) =>
+      this.preloadMedia_(mediaPool, mediaEl)
+    );
   }
 
   /**
@@ -1069,7 +1176,11 @@ export class AmpStoryPage extends AMP.BaseElement {
       // happen after a user intent, and the media element was not "blessed".
       // On unmute, make sure this audio element is playing, at the expected
       // currentTime.
-      if (mediaEl.tagName === 'AUDIO' && mediaEl.paused) {
+      if (
+        mediaEl.tagName === 'AUDIO' &&
+        mediaEl.paused &&
+        this.playAudioElementFromTimestamp_
+      ) {
         const currentTime =
           (Date.now() - this.playAudioElementFromTimestamp_) / 1000;
         if (mediaEl.hasAttribute('loop') || currentTime < mediaEl.duration) {
@@ -1092,11 +1203,12 @@ export class AmpStoryPage extends AMP.BaseElement {
    * @private
    */
   registerAllMedia_() {
-    this.registerAllMediaPromise_ =
-      this.registerAllMediaPromise_ ||
-      this.whenAllMediaElements_((mediaPool, mediaEl) => {
-        return this.registerMedia_(mediaPool, mediaEl);
-      });
+    if (!this.registerAllMediaPromise_) {
+      this.registerAllMediaPromise_ = this.waitForPlaybackMediaLayout_().then(
+        () => this.whenAllMediaElements_((p, e) => this.registerMedia_(p, e))
+      );
+    }
+
     return this.registerAllMediaPromise_;
   }
 
@@ -1112,25 +1224,9 @@ export class AmpStoryPage extends AMP.BaseElement {
       // No-op.
       return Promise.resolve();
     } else {
-      const parentEl = mediaEl.parentElement;
-      let promise = Promise.resolve();
-      if (
-        parentEl.tagName === 'AMP-VIDEO' ||
-        (parentEl.tagName === 'AMP-AUDIO' &&
-          parentEl.getAttribute('layout') !== Layout.NODISPLAY)
-      ) {
-        promise = parentEl.signals().whenSignal(CommonSignals.LOAD_END);
-      } else if (
-        parentEl.tagName === 'AMP-AUDIO' &&
-        parentEl.getAttribute('layout') === Layout.NODISPLAY
-      ) {
-        promise = parentEl.signals().whenSignal(CommonSignals.BUILT);
-      }
-      return promise.then(() => {
-        mediaPool.register(
-          /** @type {!./media-pool.DomElementDef} */ (mediaEl)
-        );
-      });
+      return mediaPool.register(
+        /** @type {!./media-pool.DomElementDef} */ (mediaEl)
+      );
     }
   }
 
@@ -1157,10 +1253,7 @@ export class AmpStoryPage extends AMP.BaseElement {
    * @private
    */
   maybeStartAnimations_() {
-    if (!this.animationManager_) {
-      return;
-    }
-    this.animationManager_.animateIn();
+    this.animationManager_?.animateIn();
   }
 
   /**
@@ -1180,23 +1273,11 @@ export class AmpStoryPage extends AMP.BaseElement {
       });
   }
 
-  /**
-   * Whether the device opted in prefers-reduced-motion.
-   * @return {boolean}
-   * @private
-   */
-  prefersReducedMotion_() {
-    return this.win.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  }
-
   /**
    * @return {!Promise}
    */
   maybeApplyFirstAnimationFrame() {
-    if (!this.animationManager_) {
-      return Promise.resolve();
-    }
-    return this.animationManager_.applyFirstFrame();
+    return Promise.resolve(this.animationManager_?.applyFirstFrame());
   }
 
   /**
@@ -1225,6 +1306,7 @@ export class AmpStoryPage extends AMP.BaseElement {
       this.findAndPrepareEmbeddedComponents_();
       registerAllPromise.then(() => this.preloadAllMedia_());
     }
+    this.toggleTabbableElements_(distance == 0);
   }
 
   /**
@@ -1241,7 +1323,8 @@ export class AmpStoryPage extends AMP.BaseElement {
    */
   emitProgress_(progress) {
     // Don't emit progress for ads, since the progress bar is hidden.
-    if (this.isAd()) {
+    // Don't emit progress for inactive pages, because race conditions.
+    if (this.isAd() || this.state_ === PageState.NOT_ACTIVE) {
       return;
     }
 
@@ -1502,17 +1585,30 @@ export class AmpStoryPage extends AMP.BaseElement {
    * Has to be called directly before playing the video.
    * @private
    */
-  startMeasuringVideoPerformance_() {
+  startMeasuringAllVideoPerformance_() {
     if (!this.mediaPerformanceMetricsService_.isPerformanceTrackingOn()) {
       return;
     }
 
-    this.performanceTrackedVideos_ = /** @type {!Array<!HTMLMediaElement>} */ (this.getAllVideos_());
-    for (let i = 0; i < this.performanceTrackedVideos_.length; i++) {
-      this.mediaPerformanceMetricsService_.startMeasuring(
-        this.performanceTrackedVideos_[i]
-      );
+    const videoEls = /** @type {!Array<!HTMLMediaElement>} */ (
+      this.getAllVideos_()
+    );
+    for (let i = 0; i < videoEls.length; i++) {
+      this.startMeasuringVideoPerformance_(videoEls[i]);
+    }
+  }
+
+  /**
+   * @param {!HTMLMediaElement} videoEl
+   * @private
+   */
+  startMeasuringVideoPerformance_(videoEl) {
+    if (!this.mediaPerformanceMetricsService_.isPerformanceTrackingOn()) {
+      return;
     }
+
+    this.performanceTrackedVideos_.push(videoEl);
+    this.mediaPerformanceMetricsService_.startMeasuring(videoEl);
   }
 
   /**
@@ -1521,7 +1617,7 @@ export class AmpStoryPage extends AMP.BaseElement {
    * @param {boolean=} sendMetrics
    * @private
    */
-  stopMeasuringVideoPerformance_(sendMetrics = true) {
+  stopMeasuringAllVideoPerformance_(sendMetrics = true) {
     if (!this.mediaPerformanceMetricsService_.isPerformanceTrackingOn()) {
       return;
     }
@@ -1562,18 +1658,6 @@ export class AmpStoryPage extends AMP.BaseElement {
         )
       );
     });
-
-    const ampVideoEls = this.getMediaBySelector_(
-      Selectors.ALL_AMP_VIDEO,
-      true /* includeHiddenMedia */
-    );
-    Array.prototype.forEach.call(ampVideoEls, (ampVideoEl) => {
-      this.unlisteners_.push(
-        listen(ampVideoEl, VideoEvents.VISIBILITY, (event) =>
-          this.onVideoVisibilityUpdate_(event)
-        )
-      );
-    });
   }
 
   /**
@@ -1585,44 +1669,6 @@ export class AmpStoryPage extends AMP.BaseElement {
     this.unlisteners_ = [];
   }
 
-  /**
-   * On video visibility update, either play or pause the video.
-   * @param {!Event} event
-   * @private
-   */
-  onVideoVisibilityUpdate_(event) {
-    // AmpDoc visibility updates are handled by the PAUSED state. This method
-    // only handles video visiblity updates when the ampdoc is visible, eg:
-    // media query update.
-    if (!this.getAmpDoc().isVisible()) {
-      return;
-    }
-
-    const ampVideoEl = dev().assertElement(event.target);
-    const videoEl = dev().assertElement(
-      childElement(ampVideoEl, (el) => el.tagName === 'VIDEO')
-    );
-    const visible = getData(event)['visible'];
-
-    this.mediaPoolPromise_.then((mediaPool) => {
-      if (visible) {
-        this.registerMedia_(mediaPool, videoEl)
-          .then(() => this.preloadMedia_(mediaPool, videoEl))
-          .then((poolVideoEl) => {
-            if (!this.storeService_.get(StateProperty.PAUSED_STATE)) {
-              this.playMedia_(mediaPool, poolVideoEl);
-            }
-            if (!this.storeService_.get(StateProperty.MUTED_STATE)) {
-              this.unmuteAllMedia();
-            }
-          });
-      } else {
-        this.pauseMedia_(mediaPool, videoEl, true /** rewindToBeginning */);
-        this.muteMedia_(mediaPool, videoEl);
-      }
-    });
-  }
-
   /**
    * @private
    */
@@ -1666,7 +1712,7 @@ export class AmpStoryPage extends AMP.BaseElement {
 
     this.playMessageEl_.addEventListener('click', () => {
       this.togglePlayMessage_(false);
-      this.startMeasuringVideoPerformance_();
+      this.startMeasuringAllVideoPerformance_();
       this.mediaPoolPromise_
         .then((mediaPool) => mediaPool.blessAll())
         .then(() => this.playAllMedia_());
@@ -1742,33 +1788,54 @@ export class AmpStoryPage extends AMP.BaseElement {
    * @private
    */
   renderOpenAttachmentUI_() {
+    // AttachmentEl can be either amp-story-page-attachment or amp-story-page-outlink
     const attachmentEl = this.element.querySelector(
-      'amp-story-page-attachment'
+      'amp-story-page-attachment, amp-story-page-outlink'
     );
     if (!attachmentEl) {
       return;
     }
 
-    if (!this.openAttachmentEl_) {
-      this.openAttachmentEl_ = buildOpenAttachmentElement(this.element);
-      this.openAttachmentEl_.addEventListener('click', () =>
-        this.openAttachment()
+    // To prevent 'title' attribute from being used by browser, copy value to 'data-title' and remove.
+    if (attachmentEl.hasAttribute('title')) {
+      attachmentEl.setAttribute(
+        'data-title',
+        attachmentEl.getAttribute('title')
       );
+      attachmentEl.removeAttribute('title');
+    }
 
-      const textEl = this.openAttachmentEl_.querySelector(
-        '.i-amphtml-story-page-open-attachment-label'
+    if (!this.openAttachmentEl_) {
+      this.openAttachmentEl_ = renderPageAttachmentUI(
+        this.element,
+        attachmentEl
       );
 
-      const openLabelAttr = attachmentEl.getAttribute('data-cta-text');
-      const openLabel =
-        (openLabelAttr && openLabelAttr.trim()) ||
-        getLocalizationService(this.element).getLocalizedString(
-          LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL
-        );
+      // 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');
+
+      container.addEventListener('click', (e) => {
+        if (isPageAttachmentUiV2ExperimentOn(this.win)) {
+          // Prevent default so link can be opened programmatically after URL preview is shown.
+          e.preventDefault();
+        }
+        this.openAttachment();
+      });
 
       this.mutateElement(() => {
-        textEl.textContent = openLabel;
-        this.element.appendChild(this.openAttachmentEl_);
+        this.element.appendChild(container);
+        createShadowRootWithStyle(
+          container,
+          this.openAttachmentEl_,
+          pageAttachmentCSS
+        );
       });
     }
   }
@@ -1779,7 +1846,7 @@ export class AmpStoryPage extends AMP.BaseElement {
    */
   openAttachment(shouldAnimate = true) {
     const attachmentEl = this.element.querySelector(
-      'amp-story-page-attachment'
+      'amp-story-page-attachment, amp-story-page-outlink'
     );
 
     if (!attachmentEl) {
@@ -1813,10 +1880,7 @@ export class AmpStoryPage extends AMP.BaseElement {
    */
   setPageDescription_() {
     if (this.isBotUserAgent_) {
-      renderPageDescription(
-        this,
-        this.getMediaBySelector_(Selectors.ALL_AMP_VIDEO, true)
-      );
+      renderPageDescription(this, this.getAllAmpVideos_());
     }
 
     if (!this.isBotUserAgent_ && this.element.hasAttribute('title')) {
@@ -1832,6 +1896,25 @@ export class AmpStoryPage extends AMP.BaseElement {
     }
   }
 
+  /**
+   * Adds an empty alt tag to amp-img elements if not present.
+   * Prevents screen readers from announcing the img src value.
+   * @private
+   */
+  initializeImgAltTags_() {
+    toArray(this.element.querySelectorAll('amp-img')).forEach((ampImgNode) => {
+      if (!ampImgNode.getAttribute('alt')) {
+        ampImgNode.setAttribute('alt', '');
+        // If the child img element is in the dom, propogate the attribute to it.
+        const childImgNode = ampImgNode.querySelector('img');
+        childImgNode &&
+          ampImgNode
+            .getImpl()
+            .then((ampImg) => ampImg.propagateAttributes('alt', childImgNode));
+      }
+    });
+  }
+
   /**
    * Returns whether the page will automatically advance
    * @return {boolean}
@@ -1839,4 +1922,33 @@ export class AmpStoryPage extends AMP.BaseElement {
   isAutoAdvance() {
     return this.advancement_.isAutoAdvance();
   }
+
+  /**
+   * Set the i-amphtml-orig-tabindex to the default tabindex of tabbable elements
+   */
+  initializeTabbableElements_() {
+    toArray(
+      scopedQuerySelectorAll(this.element, Selectors.ALL_TABBABLE)
+    ).forEach((el) => {
+      el.setAttribute(
+        'i-amphtml-orig-tabindex',
+        el.getAttribute('tabindex') || 0
+      );
+    });
+  }
+
+  /**
+   * Toggles the tabbable elements (buttons, links, etc) to only reach them when page is active.
+   * @param {boolean} toggle
+   */
+  toggleTabbableElements_(toggle) {
+    toArray(
+      scopedQuerySelectorAll(this.element, Selectors.ALL_TABBABLE)
+    ).forEach((el) => {
+      el.setAttribute(
+        'tabindex',
+        toggle ? el.getAttribute('i-amphtml-orig-tabindex') : -1
+      );
+    });
+  }
 }
diff --git a/extensions/amp-story/1.0/amp-story-reaction-poll.css b/extensions/amp-story/1.0/amp-story-reaction-poll.css
deleted file mode 100644
index 4bb0d410a7d16..0000000000000
--- a/extensions/amp-story/1.0/amp-story-reaction-poll.css
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-.i-amphtml-story-reaction-poll-container {
-  display: flex !important;
-  justify-content: center !important;
-  height: 90px !important;
-  max-width: 296px !important;
-  border-radius: 16px !important;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12) !important;
-  color: var(--reaction-accent-color) !important;
-  background: var(--reaction-background-color) !important;
-  overflow: hidden !important;
-
-  --post-select-scale: 0.5 !important;
-  --post-select-scale-variable: 1 !important;
-}
-
-.i-amphtml-story-reaction-poll-container:not(.i-amphtml-story-reaction-post-selection) {
-  cursor: pointer !important;
-}
-
-.i-amphtml-story-reaction-option {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  text-align: center !important;
-  flex-direction: column !important;
-  flex-grow: 50 !important;
-  flex: 100 !important;
-  overflow: hidden !important;
-  position: relative !important;
-}
-
-.i-amphtml-story-reaction-poll-container:not(.i-amphtml-story-reaction-post-selection)
-  .i-amphtml-story-reaction-option-divider {
-  height: 100% !important;
-  width: 1px !important;
-  opacity: 0.3 !important;
-  background-color: var(--reaction-accent-color) !important;
-}
-
-.i-amphtml-story-reaction-post-selection
-  .i-amphtml-story-reaction-option.i-amphtml-story-reaction-option-selected::before {
-  content: '' !important;
-  background-color: var(--reaction-accent-color) !important;
-  opacity: 0.2 !important;
-  position: absolute !important;
-  left: 0px !important;
-  right: 0px !important;
-  height: 100% !important;
-}
-
-.i-amphtml-story-reaction-option-title {
-  font-weight: 800 !important;
-  font-size: 28px !important;
-  margin: 0 !important;
-  line-height: 36px !important;
-  width: 124px !important;
-  height: 66px !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
-
-.i-amphtml-story-reaction-post-selection
-  .i-amphtml-story-reaction-option-title {
-  transform: scale(var(--post-select-scale)) !important;
-  height: 33px !important;
-}
-
-.i-amphtml-story-reaction-option-title-text {
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  display: -webkit-box !important;
-  -webkit-line-clamp: 2 !important;
-  -webkit-box-orient: vertical !important;
-}
-
-.i-amphtml-story-reaction-post-selection
-  .i-amphtml-story-reaction-option-title-text {
-  transform: scale(var(--post-select-scale-variable)) !important;
-}
-
-.i-amphtml-story-reaction-option-percentage-text {
-  font-weight: 700 !important;
-  font-size: 22px !important;
-  display: none !important;
-}
-
-.i-amphtml-story-reaction-post-selection
-  .i-amphtml-story-reaction-option-percentage-text {
-  display: block !important;
-}
diff --git a/extensions/amp-story/1.0/amp-story-reaction-poll.js b/extensions/amp-story/1.0/amp-story-reaction-poll.js
deleted file mode 100644
index 12660d726de17..0000000000000
--- a/extensions/amp-story/1.0/amp-story-reaction-poll.js
+++ /dev/null
@@ -1,194 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {AmpStoryReaction, ReactionType} from './amp-story-reaction';
-import {CSS} from '../../../build/amp-story-reaction-poll-1.0.css';
-import {dev} from '../../../src/log';
-import {htmlFor} from '../../../src/static-template';
-import {setStyle} from '../../../src/style';
-import {toArray} from '../../../src/types';
-
-/** @const @enum {number} */
-export const FontSize = {
-  EMOJI: 28,
-  SINGLE_LINE: 16,
-  DOUBLE_LINE: 14,
-};
-
-/**
- * Generates the template for the binary poll.
- *
- * @param {!Element} element
- * @return {!Element}
- */
-const buildBinaryPollTemplate = (element) => {
-  const html = htmlFor(element);
-  return html` <div class="i-amphtml-story-reaction-poll-container"></div> `;
-};
-
-/**
- * Generates the template for the binary poll option.
- *
- * @param {!Element} element
- * @return {!Element}
- */
-const buildOptionTemplate = (element) => {
-  const html = htmlFor(element);
-  return html`
-    <div class="i-amphtml-story-reaction-option">
-      <span class="i-amphtml-story-reaction-option-title"
-        ><span class="i-amphtml-story-reaction-option-title-text"></span
-      ></span>
-      <span class="i-amphtml-story-reaction-option-percentage-text">0%</span>
-    </div>
-  `;
-};
-
-/**
- * Generates the template for the option divider.
- *
- * @param {!Element} element
- * @return {!Element}
- */
-const buildBinaryOptionDividerTemplate = (element) => {
-  const html = htmlFor(element);
-  return html` <div class="i-amphtml-story-reaction-option-divider"></div> `;
-};
-
-export class AmpStoryReactionPoll extends AmpStoryReaction {
-  /**
-   * @param {!AmpElement} element
-   */
-  constructor(element) {
-    super(element, ReactionType.POLL, /* bounds */ [2, 2]);
-  }
-
-  /** @override */
-  buildCallback() {
-    super.buildCallback(CSS);
-  }
-
-  /** @override */
-  buildComponent() {
-    this.rootEl_ = buildBinaryPollTemplate(this.element);
-    this.attachContent_(this.rootEl_);
-    return this.rootEl_;
-  }
-
-  /** @override */
-  layoutCallback() {
-    return this.adaptFontSize_(dev().assertElement(this.rootEl_)).then(() =>
-      super.layoutCallback()
-    );
-  }
-
-  /**
-   * Gets the options and adds them to the element
-   *
-   * @private
-   * @param {!Element} root
-   */
-  attachContent_(root) {
-    root.appendChild(this.generateOption_(this.options_[0]));
-    root.appendChild(buildBinaryOptionDividerTemplate(root));
-    root.appendChild(this.generateOption_(this.options_[1]));
-  }
-
-  /**
-   * This method changes the font-size on post-select to best display the titles.
-   *
-   * It measures the number of lines and chars on the titles and generates an appropriate font-size.
-   * - font-size: 28px - Both titles are emojis or short text (yes/no)
-   * - font-size: 16px - Both titles have at most one line
-   * - font-size: 14px - At least one title has two lines
-   *
-   * The title container will shrink 50% on post-select to indicate the safe-zone for the title is smaller.
-   * To keep the font-size (original font-size:28px) true to the guidelines above, a post-select-scale is applied counteracting it.
-   * Eg. post-select-scale:1 corresponds to font-size:14px after the 50% scale (for 2-lined title),
-   * but post-select-scale:1.14 corresponds to font-size:16px after the 50% scale (for 1-lined titles),
-   * and post-select-scale:2 corresponds to font-size:28px after the 50% scale (for emoji titles).
-   * @private
-   * @param {!Element} root
-   * @return {!Promise}
-   */
-  adaptFontSize_(root) {
-    let largestFontSize = FontSize.EMOJI;
-    const allTitles = toArray(
-      root.querySelectorAll('.i-amphtml-story-reaction-option-title-text')
-    );
-    return this.measureMutateElement(
-      () => {
-        allTitles.forEach((e) => {
-          if (e.textContent.length <= 3 && largestFontSize >= FontSize.EMOJI) {
-            largestFontSize = FontSize.EMOJI;
-          } else if (
-            e./*OK*/ clientHeight <= 36 &&
-            largestFontSize >= FontSize.SINGLE_LINE
-          ) {
-            largestFontSize = FontSize.SINGLE_LINE;
-          } else if (e./*OK*/ clientHeight > 36) {
-            largestFontSize = FontSize.DOUBLE_LINE;
-          }
-        });
-      },
-      () => {
-        setStyle(
-          root,
-          '--post-select-scale-variable',
-          `${(largestFontSize / FontSize.DOUBLE_LINE).toFixed(2)}`
-        );
-      },
-      root
-    );
-  }
-
-  /**
-   * Creates an option template filled with the details the attributes.
-   * @param {./amp-story-reaction.OptionConfigType} option
-   * @return {Element} option element
-   * @private
-   */
-  generateOption_(option) {
-    const convertedOption = buildOptionTemplate(this.element);
-
-    const optionText = convertedOption.querySelector(
-      '.i-amphtml-story-reaction-option-title-text'
-    );
-    optionText.textContent = option['text'];
-    convertedOption.optionIndex_ = option['optionIndex'];
-    return convertedOption;
-  }
-
-  /**
-   * @override
-   */
-  updateOptionPercentages_(responseData) {
-    if (!responseData) {
-      return;
-    }
-
-    const percentages = this.preprocessPercentages_(responseData);
-
-    percentages.forEach((percentage, index) => {
-      // TODO(jackbsteinberg): Add i18n support for various ways of displaying percentages.
-      const currOption = this.getOptionElements()[index];
-      currOption.querySelector(
-        '.i-amphtml-story-reaction-option-percentage-text'
-      ).textContent = `${percentage}%`;
-      currOption.setAttribute('style', `flex-grow: ${percentage} !important`);
-    });
-  }
-}
diff --git a/extensions/amp-story/1.0/amp-story-reaction-quiz.css b/extensions/amp-story/1.0/amp-story-reaction-quiz.css
deleted file mode 100644
index ee125301dee8d..0000000000000
--- a/extensions/amp-story/1.0/amp-story-reaction-quiz.css
+++ /dev/null
@@ -1,439 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-.i-amphtml-story-reaction-quiz-container {
-    --correct-color: #5BBA74 !important;
-    --correct-color-shaded: #00600f !important;
-    --incorrect-color: #F34E4E !important;
-    --incorrect-color-shaded: #B71C1C !important;
-    --option-1-percentage: 0%;
-    --option-2-percentage: 0%;
-    --option-3-percentage: 0%;
-    --option-4-percentage: 0%;
-    background: var(--reaction-accent-color) !important;
-    border-radius: 32px !important;
-}
-
-/* TODO: remove bg on no-prompt attribute here */
-
-.i-amphtml-story-reaction-quiz-prompt-container {
-    display: flex !important;
-    justify-items: center !important;
-    padding: 20px !important;
-    color: var(--reaction-prompt-text-color) !important;
-}
-
-.i-amphtml-story-reaction-quiz-prompt {
-    margin: 0px !important;
-    overflow : hidden !important;
-    text-overflow: ellipsis !important;
-    display: -webkit-box !important;
-    -webkit-line-clamp: 4 !important;
-    -webkit-box-orient: vertical !important;
-    visibility: visible !important;
-}
-
-h1.i-amphtml-story-reaction-quiz-prompt {
-    font-size: 28px !important;
-    line-height: 36px !important;
-    max-height: 144px !important;
-}
-
-h2.i-amphtml-story-reaction-quiz-prompt, p.i-amphtml-story-reaction-quiz-prompt {
-    font-size: 22px !important;
-    line-height: 28px !important;
-    max-height: 112px !important;
-    font-weight: bold;
-}
-
-h3.i-amphtml-story-reaction-quiz-prompt {
-    font-size: 18px !important;
-    line-height: 24px !important;
-    max-height: 96px !important;
-}
-
-.i-amphtml-story-reaction-quiz-option-container {
-    display: flex !important;
-    flex-direction: column;
-    background-color: var(--reaction-background-color) !important;
-    border-radius: var(--reaction-chip-radius) !important;
-    padding: 8px 8px 0px 8px !important;
-}
-
-.i-amphtml-story-reaction-quiz-option {
-    position: relative !important;
-    display: flex !important;
-    justify-items: start !important;
-    align-items: center !important;
-    border-radius: var(--reaction-chip-radius) !important;
-    padding: 8px 16px 8px 8px !important;
-    background-color: var(--reaction-background-color) !important;
-    margin-bottom: 8px !important;
-    color: var(--reaction-option-text-color) !important;
-    border: solid 1px var(--reaction-theme-border) !important;
-    box-shadow: var(--reaction-chip-shadow) !important;
-    -webkit-box-shadow: var(--reaction-chip-shadow) !important;
-    -moz-box-shadow: var(--reaction-chip-shadow) !important;
-    font-size: 16px !important;
-    line-height: 20px !important;
-    overflow: hidden !important;
-    z-index: 0 !important;
-}
-
-[dir=rtl] .i-amphtml-story-reaction-quiz-option {
-    padding: 8px 8px 8px 16px !important;
-}
-
-/* Truncate option text and add an ellipsis after 2 lines. */
-.i-amphtml-story-reaction-quiz-option-text {
-    max-height: 40px !important;
-    overflow : hidden !important;
-    text-overflow: ellipsis !important;
-    display: -webkit-box !important;
-    -webkit-line-clamp: 2 !important;
-    -webkit-box-orient: vertical !important;
-    visibility: visible !important;
-}
-
-.i-amphtml-story-reaction-post-selection .i-amphtml-story-reaction-option-selected {
-    color: white !important;
-    border: solid 1px transparent !important;
-}
-
-.i-amphtml-story-reaction-quiz-answer-choice {
-    display: flex !important;
-    justify-content: center !important;
-    align-items: center !important;
-    height: 24px !important;
-    width: 24px !important;
-    min-width: 24px !important;
-    border-radius: 50% !important;
-    border: solid 2px !important;
-    padding: 5px !important;
-    margin-right: 16px !important;
-    color: var(--reaction-accent-color) !important;
-    border-color: var(--reaction-answer-choice-border) !important;
-    font-size: 16px !important;
-    line-height: 16px !important;
-    font-weight: bold !important;
-}
-
-[dir=rtl ] .i-amphtml-story-reaction-quiz-answer-choice {
-    margin-left: 16px !important;
-    margin-right: 0px !important;
-}
-
-.i-amphtml-story-reaction-quiz-percentage-text {
-    display: flex !important;
-    padding-left: 10px !important;
-    margin-left: auto !important;
-    color: #AAAAAA !important;
-    visibility: hidden !important;
-}
-
-[dir=rtl ] .i-amphtml-story-reaction-quiz-percentage-text {
-    padding-left: 0px !important;
-    padding-right: 10px !important;
-    margin-right: auto !important;
-    margin-left: 0px !important;
-}
-
-.i-amphtml-story-reaction-post-selection.i-amphtml-story-reaction-has-data .i-amphtml-story-reaction-quiz-percentage-text {
-    visibility: visible !important;
-}
-
-.i-amphtml-story-reaction-post-selection .i-amphtml-story-reaction-option-selected > .i-amphtml-story-reaction-quiz-percentage-text {
-    color: white !important;
-}
-
-.i-amphtml-story-reaction-post-selection :not([correct]) > .i-amphtml-story-reaction-quiz-answer-choice {
-    color: var(--incorrect-color) !important;
-    border-color: var(--incorrect-color) !important;
-}
-
-.i-amphtml-story-reaction-post-selection [correct] > .i-amphtml-story-reaction-quiz-answer-choice {
-    color: var(--correct-color) !important;
-    border-color: var(--correct-color) !important;
-}
-
-.i-amphtml-story-reaction-post-selection .i-amphtml-story-reaction-option-selected > .i-amphtml-story-reaction-quiz-answer-choice {
-    border-color: transparent !important;
-    animation: answer-choice-bounce forwards 600ms linear;
-    background-color: var(--reaction-answer-choice-background) !important;
-}
-
-/** TODO(jackbsteinberg): Use a more a11y-friendly approach than font-size: 0px; */
-
-.i-amphtml-story-reaction-post-selection [correct] > .i-amphtml-story-reaction-quiz-answer-choice {
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%235BBA74'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E") !important;
-    background-repeat: no-repeat !important;
-    background-position: center !important;
-    font-size: 0 !important;
-}
-
-.i-amphtml-story-reaction-post-selection :not([correct]) > .i-amphtml-story-reaction-quiz-answer-choice {
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%23F34E4E'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !important;
-    background-repeat: no-repeat !important;
-    background-position: center !important;
-    font-size: 0 !important;
-}
-
-.i-amphtml-story-reaction-quiz-option > * {
-    position: relative !important;
-}
-
-.i-amphtml-story-reaction-quiz-option::before {
-    content: "" !important;
-    position: absolute !important;
-    width: 100% !important;
-    height: 100% !important;
-    border-radius: var(--reaction-chip-radius) !important;
-    font-size: 16px !important;
-    line-height: 20px !important;
-}
-
-.i-amphtml-story-reaction-post-selection:not(.i-amphtml-story-reaction-has-data) .i-amphtml-story-reaction-quiz-option-selected[correct].i-amphtml-story-reaction-quiz-option::before {
-    animation: option-select-correct forwards 150ms cubic-bezier(0.0, 0.0, 0.2, 1) !important;
-    border: solid 1px !important;
-}
-
-.i-amphtml-story-reaction-post-selection:not(.i-amphtml-story-reaction-has-data) .i-amphtml-story-reaction-quiz-option-selected:not([correct]).i-amphtml-story-reaction-quiz-option::before {
-    animation: option-select-incorrect forwards 150ms cubic-bezier(0.0, 0.0, 0.2, 1) !important;
-    border: solid 1px !important;
-}
-
-.i-amphtml-story-reaction-post-selection.i-amphtml-story-reaction-has-data .i-amphtml-story-reaction-quiz-option:nth-of-type(1)::before {
-    transform: translateX(var(--option-1-percentage)) !important;
-}
-
-.i-amphtml-story-reaction-post-selection.i-amphtml-story-reaction-has-data .i-amphtml-story-reaction-quiz-option:nth-of-type(2)::before {
-    transform: translateX(var(--option-2-percentage)) !important;
-}
-
-.i-amphtml-story-reaction-post-selection.i-amphtml-story-reaction-has-data .i-amphtml-story-reaction-quiz-option:nth-of-type(3)::before {
-    transform: translateX(var(--option-3-percentage)) !important;
-}
-
-.i-amphtml-story-reaction-post-selection.i-amphtml-story-reaction-has-data .i-amphtml-story-reaction-quiz-option:nth-of-type(4)::before {
-    transform: translateX(var(--option-4-percentage)) !important;
-}
-
-
-.i-amphtml-story-reaction-post-selection.i-amphtml-story-reaction-has-data[dir=rtl] .i-amphtml-story-reaction-quiz-option:nth-of-type(1)::before {
-    transform: translateX(calc(-1 * var(--option-1-percentage))) !important;
-}
-
-.i-amphtml-story-reaction-post-selection.i-amphtml-story-reaction-has-data[dir=rtl] .i-amphtml-story-reaction-quiz-option:nth-of-type(2)::before {
-    transform: translateX(calc(-1 * var(--option-2-percentage))) !important;
-}
-
-.i-amphtml-story-reaction-post-selection.i-amphtml-story-reaction-has-data[dir=rtl] .i-amphtml-story-reaction-quiz-option:nth-of-type(3)::before {
-    transform: translateX(calc(-1 * var(--option-3-percentage))) !important;
-}
-
-.i-amphtml-story-reaction-post-selection.i-amphtml-story-reaction-has-data[dir=rtl] .i-amphtml-story-reaction-quiz-option:nth-of-type(4)::before {
-    transform: translateX(calc(-1 * var(--option-4-percentage))) !important;
-}
-
-.i-amphtml-story-reaction-post-selection.i-amphtml-story-reaction-has-data .i-amphtml-story-reaction-quiz-option::before {
-    left: -100% !important;
-    width: 100% !important;
-    height: 100% !important;
-    border-radius: 0px !important;
-    background: var(--reaction-theme-shading) !important;
-    color: var(--reaction-theme-shading) !important;
-    transition: transform 1s !important;
-}
-
-.i-amphtml-story-reaction-post-selection.i-amphtml-story-reaction-has-data[dir=rtl] .i-amphtml-story-reaction-quiz-option::before {
-    left: 101% !important;
-}
-
-.i-amphtml-story-reaction-post-selection .i-amphtml-story-reaction-option-selected[correct].i-amphtml-story-reaction-quiz-option {
-    background: var(--correct-color) !important;
-}
-
-.i-amphtml-story-reaction-post-selection .i-amphtml-story-reaction-option-selected:not([correct]).i-amphtml-story-reaction-quiz-option {
-    background: var(--incorrect-color) !important;
-}
-
-.i-amphtml-story-reaction-post-selection .i-amphtml-story-reaction-option-selected.i-amphtml-story-reaction-quiz-option {
-    /* Ups the padding by one to account for the border which must be removed
-    * to allow the shading to reach the edge of the box */
-    padding: 9px 17px 9px 9px !important;
-    border: none !important;
-}
-
-.i-amphtml-story-reaction-post-selection[dir=rtl] .i-amphtml-story-reaction-option-selected.i-amphtml-story-reaction-quiz-option {
-    /* Switches the extra padding to the left from the right, since the answer choice and the percentage switch */
-    padding: 9px 9px 9px 17px !important;
-    border: none !important;
-}
-
-.i-amphtml-story-reaction-post-selection.i-amphtml-story-reaction-has-data .i-amphtml-story-reaction-option-selected[correct].i-amphtml-story-reaction-quiz-option::before {
-    background: var(--correct-color-shaded) !important;
-    color: var(--correct-color-shaded) !important;
-}
-
-.i-amphtml-story-reaction-post-selection.i-amphtml-story-reaction-has-data .i-amphtml-story-reaction-option-selected:not([correct]).i-amphtml-story-reaction-quiz-option::before {
-    background: var(--incorrect-color-shaded) !important;
-    color: var(--incorrect-color-shaded) !important;
-}
-
-/**
- * Proper bounce animation scale values calculated in a CodePen
- * using methodology from Medium post "Spring Animation in CSS"
- * by Thai Pangsakulyanont.
- *
- * https://codepen.io/jackbsteinberg/pen/ExaZpjZ
- * https://medium.com/@dtinth/spring-animation-in-css-2039de6e1a03
- */
-@keyframes answer-choice-bounce {
-    0% {
-        visibility: hidden;
-        border: solid 2px var(--reaction-answer-choice-background);
-        transform: scale(0);
-    }
-    20% {
-        visibility: hidden;
-    }
-    21% { 
-        visibility: visible;
-        transform: scale(0.01); 
-    }
-    22% { transform: scale(0.013); }
-    23% { transform: scale(0.051); }
-    24% { transform: scale(0.109); }
-    25% { transform: scale(0.183); }
-    26% { transform: scale(0.268); }
-    27% { transform: scale(0.361); }
-    28% { transform: scale(0.457); }
-    29% { transform: scale(0.555); }
-    30% { transform: scale(0.650); }
-    31% { transform: scale(0.742); }
-    32% { transform: scale(0.827); }
-    33% { transform: scale(0.905); }
-    34% { transform: scale(0.975); }
-    35% { transform: scale(1.035); }
-    36% { transform: scale(1.086); }
-    37% { transform: scale(1.127); }
-    38% { transform: scale(1.160); }
-    39% { transform: scale(1.183); }
-    40% { transform: scale(1.198); }
-    41% { transform: scale(1.206); }
-    42% { transform: scale(1.207); }
-    43% { transform: scale(1.203); }
-    44% { transform: scale(1.193); }
-    45% { transform: scale(1.180); }
-    46% { transform: scale(1.164); }
-    47% { transform: scale(1.146); }
-    48% { transform: scale(1.126); }
-    49% { transform: scale(1.106); }
-    50% { transform: scale(1.086); }
-    51% { transform: scale(1.066); }
-    52% { transform: scale(1.047); }
-    53% { transform: scale(1.030); }
-    54% { transform: scale(1.014); }
-    55% { transform: scale(1.000); }
-    56% { transform: scale(0.989); }
-    57% { transform: scale(0.979); }
-    58% { transform: scale(0.971); }
-    59% { transform: scale(0.964); }
-    60% { transform: scale(0.960); }
-    61% { transform: scale(0.958); }
-    62% { transform: scale(0.956); }
-    63% { transform: scale(0.957); }
-    64% { transform: scale(0.958); }
-    65% { transform: scale(0.960); }
-    66% { transform: scale(0.963); }
-    67% { transform: scale(0.967); }
-    68% { transform: scale(0.970); }
-    69% { transform: scale(0.975); }
-    70% { transform: scale(0.979); }
-    71% { transform: scale(0.983); }
-    72% { transform: scale(0.987); }
-    73% { transform: scale(0.991); }
-    74% { transform: scale(0.994); }
-    75% { transform: scale(0.997); }
-    76% { transform: scale(1.000); }
-    77% { transform: scale(1.002); }
-    78% { transform: scale(1.004); }
-    79% { transform: scale(1.006); }
-    80% { transform: scale(1.007); }
-    81% { transform: scale(1.008); }
-    82% { transform: scale(1.008); }
-    83% { transform: scale(1.008); }
-    84% { transform: scale(1.008); }
-    85% { transform: scale(1.008); }
-    86% { transform: scale(1.008); }
-    87% { transform: scale(1.007); }
-    88% { transform: scale(1.006); }
-    89% { transform: scale(1.005); }
-    90% { transform: scale(1.004); }
-    91% { transform: scale(1.004); }
-    92% { transform: scale(1.003); }
-    93% { transform: scale(1.002); }
-    94% { transform: scale(1.001); }
-    95% { transform: scale(1.000); }
-    96% { transform: scale(1.000); }
-    97% { transform: scale(0.999); }
-    98% { transform: scale(0.999); }
-    99% { transform: scale(0.998); }
-    100% { 
-        border: solid 2px var(--reaction-answer-choice-background);
-        transform: scale(1); 
-    }
-}
-
-@keyframes option-select-correct {
-    0% {
-        border-color: var(--correct-color);
-        background: var(--correct-color);
-        opacity: 0.2;
-        transform: scale(0.1);
-        color: var(--correct-color);
-    }
-    50% {
-        opacity: 1;
-        color: var(--correct-color);
-    }
-    100% {
-        border-color: var(--correct-color);
-        background: var(--correct-color);
-        transform: scale(1);
-        color: white;
-    }
-}
-
-@keyframes option-select-incorrect {
-    0% {
-        border-color: var(--incorrect-color);
-        background: var(--incorrect-color);
-        opacity: 0.2;
-        transform: scale(0.1);
-        color: var(--incorrect-color);
-    }
-    50% {
-        opacity: 1;
-        color: var(--incorrect-color);
-    }
-    100% {
-        border-color: var(--incorrect-color);
-        background: var(--incorrect-color);
-        transform: scale(1);
-        color: white;
-    }
-}
diff --git a/extensions/amp-story/1.0/amp-story-reaction-quiz.js b/extensions/amp-story/1.0/amp-story-reaction-quiz.js
deleted file mode 100644
index 5b6727f4e2e16..0000000000000
--- a/extensions/amp-story/1.0/amp-story-reaction-quiz.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * 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.
- */
-
-import {AmpStoryReaction, ReactionType} from './amp-story-reaction';
-import {CSS} from '../../../build/amp-story-reaction-quiz-1.0.css';
-import {LocalizedStringId} from '../../../src/localized-strings';
-import {dev} from '../../../src/log';
-import {getLocalizationService} from './amp-story-localization-service';
-import {htmlFor} from '../../../src/static-template';
-import {setStyles} from '../../../src/style';
-
-/**
- * Generates the template for the quiz.
- *
- * @param {!Element} element
- * @return {!Element}
- */
-const buildQuizTemplate = (element) => {
-  const html = htmlFor(element);
-  return html`
-    <div class="i-amphtml-story-reaction-quiz-container">
-      <div class="i-amphtml-story-reaction-quiz-prompt-container"></div>
-      <div class="i-amphtml-story-reaction-quiz-option-container"></div>
-    </div>
-  `;
-};
-
-/**
- * Generates the template for each option.
- *
- * @param {!Element} option
- * @return {!Element}
- */
-const buildOptionTemplate = (option) => {
-  const html = htmlFor(option);
-  return html`
-    <span
-      class="i-amphtml-story-reaction-quiz-option i-amphtml-story-reaction-option"
-    >
-      <span class="i-amphtml-story-reaction-quiz-answer-choice"></span>
-    </span>
-  `;
-};
-
-export class AmpStoryReactionQuiz extends AmpStoryReaction {
-  /**
-   * @param {!AmpElement} element
-   */
-  constructor(element) {
-    super(element, ReactionType.QUIZ);
-
-    /** @private {!Array<string>} */
-    this.answerChoiceOptions_ = ['A', 'B', 'C', 'D'];
-
-    /** @private {!../../../src/service/localization.LocalizationService} */
-    this.localizationService_ = getLocalizationService(element);
-  }
-
-  /** @override */
-  buildCallback() {
-    super.buildCallback(CSS);
-  }
-
-  /** @override */
-  buildComponent() {
-    this.rootEl_ = buildQuizTemplate(this.element);
-    this.attachContent_(this.rootEl_);
-    return this.rootEl_;
-  }
-
-  /**
-   * Finds the prompt and options content
-   * and adds it to the quiz element.
-   *
-   * @private
-   * @param {Element} root
-   */
-  attachContent_(root) {
-    const promptContainer = root.querySelector(
-      '.i-amphtml-story-reaction-quiz-prompt-container'
-    );
-
-    if (!this.element.hasAttribute('prompt-text')) {
-      this.rootEl_.removeChild(promptContainer);
-    } else {
-      const prompt = document.createElement('p');
-
-      prompt.textContent = this.element.getAttribute('prompt-text');
-      prompt.classList.add('i-amphtml-story-reaction-quiz-prompt');
-      promptContainer.appendChild(prompt);
-    }
-
-    // Localize the answer choice options
-    this.answerChoiceOptions_ = this.answerChoiceOptions_.map((choice) => {
-      return this.localizationService_.getLocalizedString(
-        LocalizedStringId[`AMP_STORY_QUIZ_ANSWER_CHOICE_${choice}`]
-      );
-    });
-    this.options_.forEach((option, index) =>
-      this.configureOption_(option, index)
-    );
-  }
-
-  /**
-   * Creates an option container with option content,
-   * adds styling and answer choices,
-   * and adds it to the quiz element.
-   *
-   * @param {!./amp-story-reaction.OptionConfigType} option
-   * @param {number} index
-   * @private
-   */
-  configureOption_(option, index) {
-    const convertedOption = buildOptionTemplate(this.element);
-
-    // Fill in the answer choice and set the option ID
-    convertedOption.querySelector(
-      '.i-amphtml-story-reaction-quiz-answer-choice'
-    ).textContent = this.answerChoiceOptions_[index];
-    convertedOption.optionIndex_ = option['optionIndex'];
-
-    // Extract and structure the option information
-    const optionText = document.createElement('span');
-    optionText.classList.add('i-amphtml-story-reaction-quiz-option-text');
-    optionText.textContent = option['text'];
-    convertedOption.appendChild(optionText);
-
-    // Add text container for percentage display
-    const percentageText = document.createElement('span');
-    percentageText.classList.add(
-      'i-amphtml-story-reaction-quiz-percentage-text'
-    );
-    convertedOption.appendChild(percentageText);
-
-    if ('correct' in option) {
-      convertedOption.setAttribute('correct', 'correct');
-    }
-
-    this.rootEl_
-      .querySelector('.i-amphtml-story-reaction-quiz-option-container')
-      .appendChild(convertedOption);
-  }
-
-  /**
-   * Get the quiz element
-   * @return {Element}
-   */
-  getQuizElement() {
-    return this.rootEl_;
-  }
-
-  /**
-   * @override
-   */
-  updateOptionPercentages_(optionsData) {
-    if (!optionsData) {
-      return;
-    }
-
-    const percentages = this.preprocessPercentages_(optionsData);
-
-    percentages.forEach((percentage, index) => {
-      // TODO(jackbsteinberg): Add i18n support for various ways of displaying percentages.
-      this.getOptionElements()[index].querySelector(
-        '.i-amphtml-story-reaction-quiz-percentage-text'
-      ).textContent = `${percentage}%`;
-    });
-
-    // TODO(mszylkowski): split each variable to be applied to the corresponding option.
-    setStyles(dev().assertElement(this.rootEl_), {
-      '--option-1-percentage': percentages[0] + '%',
-      '--option-2-percentage': percentages[1] + '%',
-      '--option-3-percentage': percentages[2] + '%',
-      '--option-4-percentage': percentages[3] + '%',
-    });
-  }
-}
diff --git a/extensions/amp-story/1.0/amp-story-reaction.css b/extensions/amp-story/1.0/amp-story-reaction.css
deleted file mode 100644
index e885707aa60e7..0000000000000
--- a/extensions/amp-story/1.0/amp-story-reaction.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-.i-amphtml-story-reaction-container {
-  font-family: 'Poppins', sans-serif !important;
-}
diff --git a/extensions/amp-story/1.0/amp-story-reaction.js b/extensions/amp-story/1.0/amp-story-reaction.js
deleted file mode 100644
index 6d5e87b99fd61..0000000000000
--- a/extensions/amp-story/1.0/amp-story-reaction.js
+++ /dev/null
@@ -1,678 +0,0 @@
-/**
- * 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.
- */
-
-import {
-  ANALYTICS_TAG_NAME,
-  StoryAnalyticsEvent,
-  getAnalyticsService,
-} from './story-analytics';
-import {AnalyticsVariable, getVariableService} from './variable-service';
-import {CSS} from '../../../build/amp-story-reaction-1.0.css';
-import {Services} from '../../../src/services';
-import {StateProperty, getStoreService} from './amp-story-store-service';
-import {
-  addParamsToUrl,
-  appendPathToUrl,
-  assertAbsoluteHttpOrHttpsUrl,
-} from '../../../src/url';
-import {closest} from '../../../src/dom';
-import {createShadowRootWithStyle} from './utils';
-import {dev, devAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {getRequestService} from './amp-story-request-service';
-import {toArray} from '../../../src/types';
-
-/** @const {string} */
-const TAG = 'amp-story-reaction';
-
-/**
- * @const @enum {number}
- */
-export const ReactionType = {
-  QUIZ: 0,
-  POLL: 1,
-};
-
-/** @const {string} */
-const ENDPOINT_INVALID_ERROR =
-  'The publisher has specified an invalid datastore endpoint';
-
-/**
- * @typedef {{
- *    optionIndex: number,
- *    totalCount: number,
- *    selectedByUser: boolean,
- * }}
- */
-export let ReactionOptionType;
-
-/**
- * @typedef {{
- *    options: !Array<ReactionOptionType>,
- * }}
- */
-export let ReactionResponseType;
-
-/**
- * @typedef {{
- *    optionIndex: number,
- *    text: string,
- *    correct: ?string
- * }}
- */
-export let OptionConfigType;
-
-/** @const {Array<Object>} fontFaces with urls from https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&amp;display=swap */
-const fontsToLoad = [
-  {
-    family: 'Poppins',
-    weight: '400',
-    src:
-      "url(https://fonts.gstatic.com/s/poppins/v9/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2')",
-  },
-  {
-    family: 'Poppins',
-    weight: '700',
-    src:
-      "url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2')",
-  },
-];
-
-/**
- * Reaction abstract class with shared functionality for interactive components.
- *
- * Lifecycle:
- * 1) When created, the abstract class will call the buildComponent() method implemented by each concrete class.
- *   NOTE: When created, the component will receive a .i-amphtml-story-reaction, inheriting useful CSS variables.
- *
- * 2) If an endpoint is specified, it will retrieve aggregate results from the backend and process them. If the clientId
- *   has responded in a previous session, the component will change to a post-selection state. Otherwise it will wait
- *   for user selection.
- *   NOTE: Click listeners will be attached to all options, which require .i-amphtml-story-reaction-option.
- *
- * 3) On user selection, it will process the backend results (if endpoint specified) and display the selected option.
- *   Analytic events will be sent, percentages updated (implemented by the concrete class), and backend posted with the
- *   user response. Classes will be added to the component and options accordingly.
- *   NOTE: On option selected, the selection will receive a .i-amphtml-story-reaction-option-selected, and the root element
- *   will receive a .i-amphtml-story-reaction-post-selection. Optionally, if the endpoint returned aggregate results,
- *   the root element will also receive a .i-amphtml-story-reaction-has-data.
- *
- * @abstract
- */
-export class AmpStoryReaction extends AMP.BaseElement {
-  /**
-   * @param {!AmpElement} element
-   * @param {!ReactionType} type
-   * @param {!Array<number>} bounds the bounds on number of options, inclusive
-   */
-  constructor(element, type, bounds = [2, 4]) {
-    super(element);
-
-    /** @protected @const {ReactionType} */
-    this.reactionType_ = type;
-
-    /** @protected @const {!./story-analytics.StoryAnalyticsService} */
-    this.analyticsService_ = getAnalyticsService(this.win, element);
-
-    /** @protected {?Promise<?ReactionResponseType|?JsonObject|undefined>} */
-    this.backendDataPromise_ = null;
-
-    /** @protected {?Promise<!../../../src/service/cid-impl.CidDef>} */
-    this.clientIdService_ = Services.cidForDoc(this.element);
-
-    /** @protected {?Promise<JsonObject>} */
-    this.clientIdPromise_ = null;
-
-    /** @protected {boolean} */
-    this.hasUserSelection_ = false;
-
-    /** @private {!Array<number>} min and max number of options, inclusive */
-    this.optionBounds_ = bounds;
-
-    /** @private {?Array<!Element>} */
-    this.optionElements_ = null;
-
-    /** @protected {?Array<!OptionConfigType>} */
-    this.options_ = null;
-
-    /** @protected {?Array<!ReactionOptionType>} */
-    this.optionsData_ = null;
-
-    /** @protected {?Element} */
-    this.rootEl_ = null;
-
-    /** @protected {?string} */
-    this.reactionId_ = null;
-
-    /** @protected {!./amp-story-request-service.AmpStoryRequestService} */
-    this.requestService_ = getRequestService(this.win, this.element);
-
-    /** @const @protected {!./amp-story-store-service.AmpStoryStoreService} */
-    this.storeService_ = getStoreService(this.win);
-
-    /** @protected {../../../src/service/url-impl.Url} */
-    this.urlService_ = Services.urlForDoc(this.element);
-
-    /** @const @protected {!./variable-service.AmpStoryVariableService} */
-    this.variableService_ = getVariableService(this.win);
-  }
-
-  /**
-   * Gets the root element.
-   * @visibleForTesting
-   * @return {?Element}
-   */
-  getRootElement() {
-    return this.rootEl_;
-  }
-
-  /**
-   * Gets the options.
-   * @protected
-   * @return {!Array<!Element>}
-   */
-  getOptionElements() {
-    if (!this.optionElements_) {
-      this.optionElements_ = toArray(
-        this.rootEl_.querySelectorAll('.i-amphtml-story-reaction-option')
-      );
-    }
-    return this.optionElements_;
-  }
-
-  /** @override */
-  buildCallback(concreteCSS = '') {
-    this.loadFonts_();
-    this.options_ = this.parseOptions_();
-    this.rootEl_ = this.buildComponent();
-    this.rootEl_.classList.add('i-amphtml-story-reaction-container');
-    this.element.classList.add('i-amphtml-story-reaction-component');
-    this.adjustGridLayer_();
-    this.initializeListeners_();
-    devAssert(this.element.children.length == 0, 'Too many children');
-    createShadowRootWithStyle(
-      this.element,
-      dev().assertElement(this.rootEl_),
-      CSS + concreteCSS
-    );
-  }
-
-  /**
-   * @private
-   */
-  loadFonts_() {
-    if (!AmpStoryReaction.loadedFonts && this.win.document.fonts && FontFace) {
-      fontsToLoad.forEach((fontProperties) => {
-        const font = new FontFace(fontProperties.family, fontProperties.src, {
-          weight: fontProperties.weight,
-          style: 'normal',
-        });
-        font.load().then(() => {
-          this.win.document.fonts.add(font);
-        });
-      });
-    }
-    AmpStoryReaction.loadedFonts = true;
-  }
-
-  /**
-   * Reads the element attributes prefixed with option- and returns them as a list.
-   * eg: [
-   *      {optionIndex: 0, text: 'Koala'},
-   *      {optionIndex: 1, text: 'Developers', correct: ''}
-   *    ]
-   * @protected
-   * @return {?Array<!OptionConfigType>}
-   */
-  parseOptions_() {
-    const options = [];
-    toArray(this.element.attributes).forEach((attr) => {
-      // Match 'option-#-type' (eg: option-1-text, option-2-image, option-3-correct...)
-      if (attr.name.match(/^option-\d+-\w+$/)) {
-        const splitParts = attr.name.split('-');
-        const optionNumber = parseInt(splitParts[1], 10);
-        // Add all options in order on the array with correct index.
-        while (options.length < optionNumber) {
-          options.push({'optionIndex': options.length});
-        }
-        options[optionNumber - 1][splitParts[2]] = attr.value;
-      }
-    });
-    if (
-      options.length >= this.optionBounds_[0] &&
-      options.length <= this.optionBounds_[1]
-    ) {
-      return options;
-    }
-    devAssert(
-      options.length >= this.optionBounds_[0] &&
-        options.length <= this.optionBounds_[1],
-      `Improper number of options. Expected ${this.optionBounds_[0]} <= options <= ${this.optionBounds_[1]} but got ${options.length}.`
-    );
-    dev().error(
-      TAG,
-      `Improper number of options. Expected ${this.optionBounds_[0]} <= options <= ${this.optionBounds_[1]} but got ${options.length}.`
-    );
-  }
-
-  /**
-   * Generates the template from the config_ Map.
-   *
-   * @return {!Element} rootEl_
-   * @protected @abstract
-   */
-  buildComponent() {
-    // Subclass must override.
-  }
-
-  /** @override */
-  layoutCallback() {
-    return (this.backendDataPromise_ = this.element.hasAttribute('endpoint')
-      ? this.retrieveReactionData_()
-      : Promise.resolve());
-  }
-
-  /**
-   * Gets a Promise to return the unique AMP clientId
-   * @private
-   * @return {Promise<string>}
-   */
-  getClientId_() {
-    if (!this.clientIdPromise_) {
-      this.clientIdPromise_ = this.clientIdService_.then((data) => {
-        return data.get(
-          {scope: 'amp-story', createCookieIfNotPresent: true},
-          /* consent */ Promise.resolve()
-        );
-      });
-    }
-    return this.clientIdPromise_;
-  }
-
-  /**
-   * Reacts to RTL state updates and triggers the UI for RTL.
-   * @param {boolean} rtlState
-   * @private
-   */
-  onRtlStateUpdate_(rtlState) {
-    this.mutateElement(() => {
-      rtlState
-        ? this.rootEl_.setAttribute('dir', 'rtl')
-        : this.rootEl_.removeAttribute('dir');
-    });
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout === 'container';
-  }
-
-  /**
-   * Add classes to adjust the bottom padding on the grid-layer
-   * to prevent overlap with the component.
-   *
-   * @private
-   */
-  adjustGridLayer_() {
-    const gridLayer = closest(dev().assertElement(this.element), (el) => {
-      return el.tagName.toLowerCase() === 'amp-story-grid-layer';
-    });
-
-    gridLayer.classList.add('i-amphtml-story-has-reaction');
-
-    if (gridLayer.parentElement.querySelector('amp-story-cta-layer')) {
-      gridLayer.classList.add('i-amphtml-story-has-CTA-layer');
-    }
-
-    if (gridLayer.parentElement.querySelector('amp-story-page-attachment')) {
-      gridLayer.classList.add('i-amphtml-story-has-page-attachment');
-    }
-  }
-
-  /**
-   * Attaches functions to each option to handle state transition.
-   * @private
-   */
-  initializeListeners_() {
-    // Add a listener for changes in the RTL state
-    this.storeService_.subscribe(
-      StateProperty.RTL_STATE,
-      (rtlState) => {
-        this.onRtlStateUpdate_(rtlState);
-      },
-      true /** callToInitialize */
-    );
-
-    // Add a click listener to the element to trigger the class change
-    this.rootEl_.addEventListener('click', (e) => this.handleTap_(e));
-  }
-
-  /**
-   * Handles a tap event on the quiz element.
-   * @param {Event} e
-   * @private
-   */
-  handleTap_(e) {
-    if (this.hasUserSelection_) {
-      return;
-    }
-
-    const optionEl = closest(
-      dev().assertElement(e.target),
-      (element) => {
-        return element.classList.contains('i-amphtml-story-reaction-option');
-      },
-      this.rootEl_
-    );
-
-    if (optionEl) {
-      this.handleOptionSelection_(optionEl);
-    }
-  }
-
-  /**
-   * Triggers the analytics event for quiz response.
-   *
-   * @param {!Element} optionEl
-   * @private
-   */
-  triggerAnalytics_(optionEl) {
-    this.variableService_.onVariableUpdate(
-      AnalyticsVariable.STORY_REACTION_ID,
-      this.element.getAttribute('id')
-    );
-    this.variableService_.onVariableUpdate(
-      AnalyticsVariable.STORY_REACTION_RESPONSE,
-      optionEl.optionIndex_
-    );
-    this.variableService_.onVariableUpdate(
-      AnalyticsVariable.STORY_REACTION_TYPE,
-      this.reactionType_
-    );
-
-    this.element[ANALYTICS_TAG_NAME] = this.element.tagName;
-    this.analyticsService_.triggerEvent(
-      StoryAnalyticsEvent.REACTION,
-      this.element
-    );
-  }
-
-  /**
-   * Update component to reflect values in the data obtained.
-   * Called when user has responded (in this session or before).
-   *
-   * @protected @abstract
-   * @param {!Array<!ReactionOptionType>} unusedOptionsData
-   */
-  updateOptionPercentages_(unusedOptionsData) {
-    // Subclass must implement
-  }
-
-  /**
-   * Preprocess the percentages for display.
-   *
-   * @param {!Array<!ReactionOptionType>} optionsData
-   * @return {Array<number>}
-   * @protected
-   */
-  preprocessPercentages_(optionsData) {
-    const totalResponseCount = optionsData.reduce(
-      (acc, response) => acc + response['totalCount'],
-      0
-    );
-
-    let percentages = optionsData.map((e) =>
-      ((100 * e['totalCount']) / totalResponseCount).toFixed(2)
-    );
-    let total = percentages.reduce((acc, x) => acc + Math.round(x), 0);
-
-    // Special case: divide remainders by three if they break 100,
-    // 3 is the maximum above 100 the remainders can add.
-    if (total > 100) {
-      percentages = percentages.map((percentage) =>
-        (percentage - (2 * (percentage - Math.floor(percentage))) / 3).toFixed(
-          2
-        )
-      );
-      total = percentages.reduce((acc, x) => (acc += Math.round(x)), 0);
-    }
-
-    if (total === 100) {
-      return percentages.map((percentage) => Math.round(percentage));
-    }
-
-    // Truncate all and round up those with the highest remainders,
-    // preserving order and ties and adding to 100 (if possible given ties and ordering).
-    let remainder = 100 - total;
-
-    let preserveOriginal = percentages.map((percentage, index) => {
-      return {
-        originalIndex: index,
-        value: percentage,
-        remainder: (percentage - Math.floor(percentage)).toFixed(2),
-      };
-    });
-    preserveOriginal.sort(
-      (left, right) =>
-        // Break remainder ties using the higher value.
-        right.remainder - left.remainder || right.value - left.value
-    );
-
-    const finalPercentages = [];
-    while (remainder > 0 && preserveOriginal.length !== 0) {
-      const highestRemainderObj = preserveOriginal[0];
-
-      const ties = preserveOriginal.filter(
-        (percentageObj) => percentageObj.value === highestRemainderObj.value
-      );
-      preserveOriginal = preserveOriginal.filter(
-        (percentageObj) => percentageObj.value !== highestRemainderObj.value
-      );
-
-      const toRoundUp =
-        ties.length <= remainder && highestRemainderObj.remainder !== '0.00';
-
-      ties.forEach((percentageObj) => {
-        finalPercentages[percentageObj.originalIndex] =
-          Math.floor(percentageObj.value) + (toRoundUp ? 1 : 0);
-      });
-
-      // Update the remainder given additions to the percentages.
-      remainder -= toRoundUp ? ties.length : 0;
-    }
-
-    preserveOriginal.forEach((percentageObj) => {
-      finalPercentages[percentageObj.originalIndex] = Math.floor(
-        percentageObj.value
-      );
-    });
-
-    return finalPercentages;
-  }
-
-  /**
-   * Triggers changes to component state on response interaction.
-   *
-   * @param {!Element} optionEl
-   * @private
-   */
-  handleOptionSelection_(optionEl) {
-    this.backendDataPromise_
-      .then(() => {
-        if (this.hasUserSelection_) {
-          return;
-        }
-
-        this.triggerAnalytics_(optionEl);
-        this.hasUserSelection_ = true;
-
-        if (this.optionsData_) {
-          this.optionsData_[optionEl.optionIndex_]['totalCount']++;
-          this.optionsData_[optionEl.optionIndex_]['selectedByUser'] = true;
-        }
-
-        this.mutateElement(() => {
-          if (this.optionsData_) {
-            this.updateOptionPercentages_(this.optionsData_);
-          }
-          this.updateToPostSelectionState_(optionEl);
-        });
-
-        if (this.element.hasAttribute('endpoint')) {
-          this.executeReactionRequest_('POST', optionEl.optionIndex_);
-        }
-      })
-      .catch(() => {
-        // If backend is not properly connected, still update state.
-        this.triggerAnalytics_(optionEl);
-        this.hasUserSelection_ = true;
-        this.mutateElement(() => {
-          this.updateToPostSelectionState_(optionEl);
-        });
-      });
-  }
-
-  /**
-   * Get the Reaction data from the datastore
-   *
-   * @return {?Promise<?ReactionResponseType|?JsonObject|undefined>}
-   * @private
-   */
-  retrieveReactionData_() {
-    return this.executeReactionRequest_('GET').then((response) => {
-      this.handleSuccessfulDataRetrieval_(
-        /** @type {ReactionResponseType} */ (response)
-      );
-    });
-  }
-
-  /**
-   * Executes a Reactions API call.
-   *
-   * @param {string} method GET or POST.
-   * @param {number=} optionSelected
-   * @return {!Promise<!ReactionResponseType|string>}
-   * @private
-   */
-  executeReactionRequest_(method, optionSelected = undefined) {
-    let url = this.element.getAttribute('endpoint');
-    if (!assertAbsoluteHttpOrHttpsUrl(url)) {
-      return Promise.reject(ENDPOINT_INVALID_ERROR);
-    }
-
-    if (!this.reactionId_) {
-      const pageId = closest(dev().assertElement(this.element), (el) => {
-        return el.tagName.toLowerCase() === 'amp-story-page';
-      }).getAttribute('id');
-      this.reactionId_ = `CANONICAL_URL+${pageId}`;
-    }
-
-    return this.getClientId_().then((clientId) => {
-      const requestOptions = {'method': method};
-      const requestParams = dict({
-        'reactionType': this.reactionType_,
-        'clientId': clientId,
-      });
-      url = appendPathToUrl(
-        this.urlService_.parse(url),
-        dev().assertString(this.reactionId_)
-      );
-      if (requestOptions['method'] === 'POST') {
-        requestOptions['body'] = {'optionSelected': optionSelected};
-        requestOptions['headers'] = {'Content-Type': 'application/json'};
-        url = appendPathToUrl(this.urlService_.parse(url), '/react');
-      }
-      url = addParamsToUrl(url, requestParams);
-      return this.requestService_
-        .executeRequest(url, requestOptions)
-        .catch((err) => dev().error(TAG, err));
-    });
-  }
-
-  /**
-   * Handles incoming reaction data response
-   *
-   * RESPONSE FORMAT
-   * {
-   *  options: [
-   *    {
-   *      optionIndex:
-   *      totalCount:
-   *      selectedByUser:
-   *    },
-   *    ...
-   *  ]
-   * }
-   * @param {ReactionResponseType|undefined} response
-   * @private
-   */
-  handleSuccessfulDataRetrieval_(response) {
-    if (!(response && response['options'])) {
-      devAssert(
-        response && 'options' in response,
-        `Invalid reaction response, expected { data: ReactionResponseType, ...} but received ${response}`
-      );
-      dev().error(
-        TAG,
-        `Invalid reaction response, expected { data: ReactionResponseType, ...} but received ${response}`
-      );
-      return;
-    }
-    const numOptions = this.rootEl_.querySelectorAll(
-      '.i-amphtml-story-reaction-option'
-    ).length;
-    // Only keep the visible options to ensure visible percentages add up to 100.
-    this.updateReactionOnDataRetrieval_(
-      response['options'].slice(0, numOptions)
-    );
-  }
-
-  /**
-   * Updates the quiz to reflect the state of the remote data.
-   * @param {!Array<ReactionOptionType>} data
-   * @private
-   */
-  updateReactionOnDataRetrieval_(data) {
-    const options = this.rootEl_.querySelectorAll(
-      '.i-amphtml-story-reaction-option'
-    );
-
-    this.optionsData_ = data;
-    data.forEach((response, index) => {
-      if (response.selectedByUser) {
-        this.hasUserSelection_ = true;
-        this.mutateElement(() => {
-          this.updateOptionPercentages_(data);
-          this.updateToPostSelectionState_(options[index]);
-        });
-      }
-    });
-  }
-
-  /**
-   * Updates the selected classes on option selected.
-   * @param {!Element} selectedOption
-   * @private
-   */
-  updateToPostSelectionState_(selectedOption) {
-    this.rootEl_.classList.add('i-amphtml-story-reaction-post-selection');
-    selectedOption.classList.add('i-amphtml-story-reaction-option-selected');
-
-    if (this.optionsData_) {
-      this.rootEl_.classList.add('i-amphtml-story-reaction-has-data');
-    }
-  }
-}
diff --git a/extensions/amp-story/1.0/amp-story-render-service.js b/extensions/amp-story/1.0/amp-story-render-service.js
index 8e646d3a908f5..b85351b0a61d8 100644
--- a/extensions/amp-story/1.0/amp-story-render-service.js
+++ b/extensions/amp-story/1.0/amp-story-render-service.js
@@ -14,9 +14,18 @@
  * limitations under the License.
  */
 
-import {CommonSignals} from '../../../src/common-signals';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
+import {Services} from '../../../src/services';
 import {whenUpgradedToCustomElement} from '../../../src/dom';
 
+/**
+ * Maximum milliseconds to wait for service to load.
+ * Needs to be shorter than the render delay timeout to account for the latency
+ * downloading and executing the amp-story js.
+ * @const
+ */
+const LOAD_TIMEOUT = 2900;
+
 /** @implements {../../../src/render-delaying-services.RenderDelayingService} */
 export class AmpStoryRenderService {
   /**
@@ -27,6 +36,9 @@ export class AmpStoryRenderService {
      * @private {!../../../src/service/ampdoc-impl.AmpDoc}
      */
     this.ampdoc_ = ampdoc;
+
+    /** @const @private {!../../../src/service/timer-impl.Timer} */
+    this.timer_ = Services.timerFor(ampdoc.win);
   }
 
   /**
@@ -35,7 +47,7 @@ export class AmpStoryRenderService {
    * @return {!Promise}
    */
   whenReady() {
-    return this.ampdoc_.whenReady().then((body) => {
+    const whenReadyPromise = this.ampdoc_.whenReady().then((body) => {
       const storyEl = body.querySelector('amp-story[standalone]');
 
       if (!storyEl) {
@@ -46,5 +58,7 @@ export class AmpStoryRenderService {
         return storyEl.signals().whenSignal(CommonSignals.LOAD_END);
       });
     });
+
+    return Promise.race([whenReadyPromise, this.timer_.promise(LOAD_TIMEOUT)]);
   }
 }
diff --git a/extensions/amp-story/1.0/amp-story-request-service.js b/extensions/amp-story/1.0/amp-story-request-service.js
index 92776c83fc667..ad8132633b136 100644
--- a/extensions/amp-story/1.0/amp-story-request-service.js
+++ b/extensions/amp-story/1.0/amp-story-request-service.js
@@ -15,18 +15,17 @@
  */
 
 import {Services} from '../../../src/services';
-import {childElementByTag} from '../../../src/dom';
 import {getChildJsonConfig} from '../../../src/json';
 import {isProtocolValid} from '../../../src/url';
-import {once} from '../../../src/utils/function';
+import {once} from '../../../src/core/types/function';
 import {registerServiceBuilder} from '../../../src/service';
 import {user, userAssert} from '../../../src/log';
 
 /** @private @const {string} */
-export const BOOKEND_CONFIG_ATTRIBUTE_NAME = 'src';
+export const CONFIG_SRC_ATTRIBUTE_NAME = 'src';
 
 /** @private const {string} */
-export const BOOKEND_CREDENTIALS_ATTRIBUTE_NAME = 'data-credentials';
+export const CREDENTIALS_ATTRIBUTE_NAME = 'data-credentials';
 
 /** @private @const {string} */
 const TAG = 'amp-story-request-service';
@@ -47,40 +46,7 @@ export class AmpStoryRequestService {
     this.xhr_ = Services.xhrFor(win);
 
     /** @const @type {function():(!Promise<!JsonObject>|!Promise<null>)} */
-    this.loadBookendConfig = once(() => this.loadBookendConfigImpl_());
-  }
-
-  /**
-   * Retrieves the publisher bookend configuration, including the share
-   * providers.
-   * Has to be called through `loadBookendConfig`.
-   * @return {(!Promise<!JsonObject>|!Promise<null>)}
-   * @private
-   */
-  loadBookendConfigImpl_() {
-    const bookendEl = childElementByTag(
-      this.storyElement_,
-      'amp-story-bookend'
-    );
-    if (!bookendEl) {
-      return Promise.resolve(null);
-    }
-
-    if (bookendEl.hasAttribute(BOOKEND_CONFIG_ATTRIBUTE_NAME)) {
-      const rawUrl = bookendEl.getAttribute(BOOKEND_CONFIG_ATTRIBUTE_NAME);
-      const credentials = bookendEl.getAttribute(
-        BOOKEND_CREDENTIALS_ATTRIBUTE_NAME
-      );
-      return this.executeRequest(rawUrl, credentials ? {credentials} : {});
-    }
-
-    // Fallback. Check for an inline json config.
-    let config = null;
-    try {
-      config = getChildJsonConfig(bookendEl);
-    } catch (err) {}
-
-    return Promise.resolve(config);
+    this.loadShareConfig = once(() => this.loadShareConfigImpl_());
   }
 
   /**
@@ -102,6 +68,36 @@ export class AmpStoryRequestService {
         return response.json();
       });
   }
+
+  /**
+   * Retrieves the publisher share providers.
+   * Has to be called through `loadShareConfig`.
+   * @return {(!Promise<!JsonObject>|!Promise<null>)}
+   */
+  loadShareConfigImpl_() {
+    const shareConfigEl = this.storyElement_.querySelector(
+      'amp-story-social-share, amp-story-bookend'
+    );
+    if (!shareConfigEl) {
+      return Promise.resolve();
+    }
+
+    if (shareConfigEl.hasAttribute(CONFIG_SRC_ATTRIBUTE_NAME)) {
+      const rawUrl = shareConfigEl.getAttribute(CONFIG_SRC_ATTRIBUTE_NAME);
+      const credentials = shareConfigEl.getAttribute(
+        CREDENTIALS_ATTRIBUTE_NAME
+      );
+      return this.executeRequest(rawUrl, credentials ? {credentials} : {});
+    }
+
+    // Fallback. Check for an inline json config.
+    let config = null;
+    try {
+      config = getChildJsonConfig(shareConfigEl);
+    } catch (err) {}
+
+    return Promise.resolve(config);
+  }
 }
 
 /**
diff --git a/extensions/amp-story/1.0/amp-story-share-menu.css b/extensions/amp-story/1.0/amp-story-share-menu.css
index 9a540de64317b..e45296f6aa391 100644
--- a/extensions/amp-story/1.0/amp-story-share-menu.css
+++ b/extensions/amp-story/1.0/amp-story-share-menu.css
@@ -27,12 +27,14 @@
   transform: translate3d(0, 100vh, 0) !important;
   transition-delay: 0.15s !important;
   pointer-events: none !important;
+  visibility: hidden !important;
 }
 
 .i-amphtml-story-share-menu-visible {
   transform: translate3d(0, 0, 0) !important;
   transition-delay: 0s !important;
   pointer-events: auto !important;
+  visibility: initial !important;
 }
 
 /** Black opacity overlay. */
@@ -112,6 +114,9 @@
   font-size: 24px !important;
   line-height: 30px !important;
   text-align: center !important;
+  border: 0 !important;
+  padding: 0 !important;
+  background: none !important;
 }
 
 [desktop].i-amphtml-story-share-menu .i-amphtml-story-share-item {
diff --git a/extensions/amp-story/1.0/amp-story-share-menu.js b/extensions/amp-story/1.0/amp-story-share-menu.js
index 6f1d4834451d7..d9a67bb304f04 100644
--- a/extensions/amp-story/1.0/amp-story-share-menu.js
+++ b/extensions/amp-story/1.0/amp-story-share-menu.js
@@ -26,13 +26,15 @@ import {
   getStoreService,
 } from './amp-story-store-service';
 import {CSS} from '../../../build/amp-story-share-menu-1.0.css';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
+import {LocalizedStringId} from '../../../src/localized-strings';
 import {Services} from '../../../src/services';
 import {ShareWidget} from './amp-story-share';
 import {closest} from '../../../src/dom';
 import {createShadowRootWithStyle} from './utils';
-import {dev} from '../../../src/log';
+import {dev, devAssert} from '../../../src/log';
 import {getAmpdoc} from '../../../src/service';
+import {getLocalizationService} from './amp-story-localization-service';
 import {htmlFor} from '../../../src/static-template';
 import {setStyles} from '../../../src/style';
 
@@ -48,9 +50,9 @@ const getTemplate = (element) => {
   return htmlFor(element)`
     <div class="i-amphtml-story-share-menu i-amphtml-story-system-reset" aria-hidden="true" role="alert">
       <div class="i-amphtml-story-share-menu-container">
-        <span class="i-amphtml-story-share-menu-close-button" role="button">
+        <button class="i-amphtml-story-share-menu-close-button" aria-label="close" role="button">
           &times;
-        </span>
+        </button>
       </div>
     </div>`;
 };
@@ -79,6 +81,9 @@ export class ShareMenu {
     /** @private {?Element} */
     this.element_ = null;
 
+    /** @private {?Element} */
+    this.closeButton_ = null;
+
     /** @private {?Element} */
     this.innerContainerEl_ = null;
 
@@ -165,6 +170,19 @@ export class ShareMenu {
     this.element_ = getTemplate(this.parentEl_);
     createShadowRootWithStyle(root, this.element_, CSS);
 
+    this.closeButton_ = dev().assertElement(
+      this.element_.querySelector('.i-amphtml-story-share-menu-close-button')
+    );
+    const localizationService = getLocalizationService(
+      devAssert(this.parentEl_)
+    );
+    if (localizationService) {
+      const localizedCloseString = localizationService.getLocalizedString(
+        LocalizedStringId.AMP_STORY_CLOSE_BUTTON_LABEL
+      );
+      this.closeButton_.setAttribute('aria-label', localizedCloseString);
+    }
+
     this.initializeListeners_();
 
     this.vsync_.run({
@@ -252,7 +270,7 @@ export class ShareMenu {
   onShareMenuClick_(event) {
     const el = dev().assertElement(event.target);
 
-    if (el.classList.contains('i-amphtml-story-share-menu-close-button')) {
+    if (el === this.closeButton_) {
       this.close_();
     }
 
diff --git a/extensions/amp-story/1.0/amp-story-share.css b/extensions/amp-story/1.0/amp-story-share.css
index 456fce36841a9..485f9e9252b29 100644
--- a/extensions/amp-story/1.0/amp-story-share.css
+++ b/extensions/amp-story/1.0/amp-story-share.css
@@ -16,7 +16,6 @@
 
 @import '../../amp-social-share/0.1/amp-social-share.css';
 
-/* All top-level bookend elements need to set their own left/right margins */
 .i-amphtml-story-share-widget {
   display: block !important;
   margin: 16px 8px !important;
@@ -31,11 +30,6 @@
   overflow: auto !important;
 }
 
-.i-amphtml-story-bookend-fullbleed .i-amphtml-story-share-widget {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
 .i-amphtml-story-share-widget::-webkit-scrollbar {
   width: 0px !important;
   background: transparent !important;
@@ -50,11 +44,6 @@
   width: 100% !important;
 }
 
-.i-amphtml-story-bookend-fullbleed .i-amphtml-story-share-list {
-  padding-left: 16px !important;
-  padding-right: 16px !important;
-}
-
 .i-amphtml-story-share-item {
   width: 48px !important;
   height: 66px !important;
@@ -128,14 +117,9 @@
   background-position: 5px 5px !important;
 }
 
-.i-amphtml-story-share-icon:active,
 .i-amphtml-story-share-icon:focus {
-  outline: none !important;
-  box-shadow: none !important;
-}
-
-.i-amphtml-story-share-icon:active::before {
-  background-color: #787878 !important;
+  outline: 2px solid #0389ff !important;
+  outline-offset: 2px !important;
 }
 
 .i-amphtml-story-share-icon[type=email] {
diff --git a/extensions/amp-story/1.0/amp-story-share.js b/extensions/amp-story/1.0/amp-story-share.js
index c7facd45e2353..859240a86c9ef 100644
--- a/extensions/amp-story/1.0/amp-story-share.js
+++ b/extensions/amp-story/1.0/amp-story-share.js
@@ -21,14 +21,12 @@ import {
   isCopyingToClipboardSupported,
 } from '../../../src/clipboard';
 import {dev, devAssert, user} from '../../../src/log';
-import {dict, map} from './../../../src/utils/object';
+import {dict, map} from './../../../src/core/types/object';
 import {getLocalizationService} from './amp-story-localization-service';
 import {getRequestService} from './amp-story-request-service';
-import {isObject} from '../../../src/types';
+import {isObject} from '../../../src/core/types';
 import {listen} from '../../../src/event-helper';
-import {px, setImportantStyles} from '../../../src/style';
 import {renderAsElement, renderSimpleTemplate} from './simple-template';
-import {throttle} from '../../../src/utils/rate-limit';
 
 /**
  * Maps share provider type to visible name.
@@ -51,25 +49,13 @@ const SHARE_PROVIDER_LOCALIZED_STRING_ID = map({
 });
 
 /**
- * Default left/right padding for share buttons.
- * @private @const {number}
- */
-const DEFAULT_BUTTON_PADDING = 16;
-
-/**
- * Minimum left/right padding for share buttons.
- * @private @const {number}
- */
-const MIN_BUTTON_PADDING = 10;
-
-/**
- * Key for share providers in bookend config.
+ * Key for share providers in config.
  * @const {string}
  */
 export const SHARE_PROVIDERS_KEY = 'shareProviders';
 
 /**
- * Deprecated key for share providers in bookend config.
+ * Deprecated key for share providers in config.
  * @const {string}
  */
 export const DEPRECATED_SHARE_PROVIDERS_KEY = 'share-providers';
@@ -98,23 +84,32 @@ const SHARE_ITEM_TEMPLATE = {
   attrs: dict({'class': 'i-amphtml-story-share-item'}),
 };
 
-/** @private @const {!./simple-template.ElementDef} */
-const LINK_SHARE_ITEM_TEMPLATE = {
-  tag: 'div',
-  attrs: dict({
-    'class': 'i-amphtml-story-share-icon i-amphtml-story-share-icon-link',
-  }),
-  children: [
-    {
-      tag: 'span',
-      attrs: dict({'class': 'i-amphtml-story-share-label'}),
-      localizedStringId: LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK,
-    },
-  ],
-};
-
-/** @private @const {string} */
-const SCROLLABLE_CLASSNAME = 'i-amphtml-story-share-widget-scrollable';
+/**
+ * @private
+ * @param {!Element} el
+ * @return {./simple-template-ElementDef}
+ */
+function buildLinkShareItemTemplate(el) {
+  return {
+    tag: 'div',
+    attrs: dict({
+      'class': 'i-amphtml-story-share-icon i-amphtml-story-share-icon-link',
+      'tabindex': 0,
+      'role': 'button',
+      'aria-label': getLocalizationService(el).getLocalizedString(
+        LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK
+      ),
+    }),
+    children: [
+      {
+        tag: 'span',
+        attrs: dict({'class': 'i-amphtml-story-share-label'}),
+        localizedStringId:
+          LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK,
+      },
+    ],
+  };
+}
 
 /**
  * @param {!JsonObject=} opt_params
@@ -152,15 +147,17 @@ function buildProvider(doc, shareType, opt_params) {
     /** @type {!Array<!./simple-template.ElementDef>} */ ([
       {
         tag: 'amp-social-share',
-        attrs: /** @type {!JsonObject} */ (Object.assign(
-          dict({
-            'width': 48,
-            'height': 48,
-            'class': 'i-amphtml-story-share-icon',
-            'type': shareType,
-          }),
-          buildProviderParams(opt_params)
-        )),
+        attrs: /** @type {!JsonObject} */ (
+          Object.assign(
+            dict({
+              'width': 48,
+              'height': 48,
+              'class': 'i-amphtml-story-share-icon',
+              'type': shareType,
+            }),
+            buildProviderParams(opt_params)
+          )
+        ),
         children: [
           {
             tag: 'span',
@@ -201,7 +198,7 @@ function buildCopySuccessfulToast(doc, url) {
 }
 
 /**
- * Social share widget for story bookend.
+ * Social share widget for the system button.
  */
 export class ShareWidget {
   /**
@@ -268,7 +265,7 @@ export class ShareWidget {
 
     const linkShareButton = renderAsElement(
       this.win.document,
-      LINK_SHARE_ITEM_TEMPLATE
+      buildLinkShareItemTemplate(this.storyEl)
     );
 
     this.add_(linkShareButton);
@@ -277,6 +274,14 @@ export class ShareWidget {
       e.preventDefault();
       this.copyUrlToClipboard_();
     });
+    listen(linkShareButton, 'keyup', (e) => {
+      const code = e.charCode || e.keyCode;
+      // Check if pressed Space or Enter to trigger button.
+      if (code === 32 || code === 13) {
+        e.preventDefault();
+        this.copyUrlToClipboard_();
+      }
+    });
   }
 
   /**
@@ -340,7 +345,7 @@ export class ShareWidget {
   loadProviders() {
     this.loadRequiredExtensions();
 
-    this.requestService_.loadBookendConfig().then((config) => {
+    this.requestService_.loadShareConfig().then((config) => {
       const providers =
         config &&
         (config[SHARE_PROVIDERS_KEY] || config[DEPRECATED_SHARE_PROVIDERS_KEY]);
@@ -409,170 +414,3 @@ export class ShareWidget {
     list.insertBefore(item, list.lastElementChild);
   }
 }
-
-/**
- * Social share widget for story bookend with a scrollable layout.
- * This class is coupled to the DOM structure for ShareWidget, but that's ok.
- */
-export class ScrollableShareWidget extends ShareWidget {
-  /**
-   * @param {!Window} win
-   * @param {!Element} storyEl
-   */
-  constructor(win, storyEl) {
-    super(win, storyEl);
-
-    /** @private @const {!../../../src/service/vsync-impl.Vsync} */
-    this.vsync_ = Services.vsyncFor(win);
-
-    /**
-     * Container width is being tracked to prevent unnecessary layout
-     * calculations.
-     * @private {?number}
-     */
-    this.containerWidth_ = null;
-  }
-
-  /**
-   * @param {!Window} win
-   * @param {!Element} storyEl
-   * @return {!ScrollableShareWidget}
-   */
-  static create(win, storyEl) {
-    return new ScrollableShareWidget(win, storyEl);
-  }
-
-  /**
-   * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
-   * @return {!Element}
-   */
-  build(ampdoc) {
-    super.build(ampdoc);
-
-    this.root.classList.add(SCROLLABLE_CLASSNAME);
-
-    Services.viewportForDoc(ampdoc).onResize(
-      throttle(this.win, () => this.applyButtonPadding_(), 100)
-    );
-
-    this.vsync_.measure(() => {
-      // If the element is actually scrollable, don't propagate the touch events
-      // so it is not interpreted as a swipe to the next story.
-      if (this.root./*OK*/ offsetWidth < this.root./*OK*/ scrollWidth) {
-        this.root.addEventListener(
-          'touchstart',
-          (event) => event.stopPropagation(),
-          {capture: true}
-        );
-        this.root.addEventListener(
-          'touchmove',
-          (event) => event.stopPropagation(),
-          {capture: true}
-        );
-        this.root.addEventListener(
-          'touchend',
-          (event) => event.stopPropagation(),
-          {capture: true}
-        );
-      }
-    });
-
-    return this.root;
-  }
-
-  /**
-   * Calculates padding between buttons so that the result is that there's
-   * always one item visually "cut off" for scroll affordance.
-   * @private
-   */
-  applyButtonPadding_() {
-    const items = this.getVisibleItems_();
-
-    if (!items.length) {
-      return;
-    }
-
-    this.vsync_.run(
-      {
-        measure: (state) => {
-          const containerWidth = this.root./*OK*/ clientWidth;
-
-          if (containerWidth == this.containerWidth_) {
-            // Don't recalculate if width has not changed (i.e. onscreen keyboard)
-            state.noop = true;
-            return;
-          }
-
-          const icon = devAssert(items[0].firstElementChild);
-
-          const leftMargin =
-            icon./*OK*/ offsetLeft - this.root./*OK*/ offsetLeft;
-          const iconWidth = icon./*OK*/ offsetWidth;
-
-          // Total width that the buttons will occupy with minimum padding.
-          const totalItemWidth =
-            iconWidth * items.length +
-            2 * MIN_BUTTON_PADDING * (items.length - 1);
-
-          // If buttons don't fit within the available area, calculate padding so
-          // that there will be an element cut-off.
-          if (totalItemWidth > containerWidth - leftMargin * 2) {
-            const availableWidth = containerWidth - leftMargin - iconWidth / 2;
-            const amountVisible = Math.floor(
-              availableWidth / (iconWidth + MIN_BUTTON_PADDING * 2)
-            );
-
-            state.padding = 0.5 * (availableWidth / amountVisible - iconWidth);
-          } else {
-            // Otherwise, calculate padding in from MIN_PADDING to DEFAULT_PADDING
-            // so that all elements fit and take as much area as possible.
-            const totalPadding =
-              (containerWidth - leftMargin * 2 - iconWidth * items.length) /
-              (items.length - 1);
-
-            state.padding = Math.min(
-              DEFAULT_BUTTON_PADDING,
-              0.5 * totalPadding
-            );
-          }
-
-          this.containerWidth_ = containerWidth;
-        },
-        mutate: (state) => {
-          if (state.noop) {
-            return;
-          }
-          items.forEach((el, i) => {
-            if (i != 0) {
-              setImportantStyles(el, {'padding-left': px(state.padding)});
-            }
-            if (i != items.length - 1) {
-              setImportantStyles(el, {'padding-right': px(state.padding)});
-            }
-          });
-        },
-      },
-      {}
-    );
-  }
-
-  /**
-   * @return {!Array<!Element>}
-   * @private
-   */
-  getVisibleItems_() {
-    return Array.prototype.filter.call(
-      dev().assertElement(this.root).querySelectorAll('li'),
-      (el) => !!el.firstElementChild
-    );
-  }
-
-  /**
-   * Loads and applies the share providers configured by the publisher.
-   * @protected
-   */
-  loadProviders() {
-    super.loadProviders();
-    this.applyButtonPadding_();
-  }
-}
diff --git a/extensions/amp-story/1.0/amp-story-store-service.js b/extensions/amp-story/1.0/amp-story-store-service.js
index 191b2a833aa66..b41c5902464fa 100644
--- a/extensions/amp-story/1.0/amp-story-store-service.js
+++ b/extensions/amp-story/1.0/amp-story-store-service.js
@@ -15,10 +15,11 @@
  */
 
 import {EmbedMode, parseEmbedMode} from './embed-mode';
-import {Observable} from '../../../src/observable';
+import {Observable} from '../../../src/core/data-structures/observable';
 import {Services} from '../../../src/services';
+import {deepEquals} from '../../../src/core/types/object/json';
 import {dev} from '../../../src/log';
-import {hasOwn} from '../../../src/utils/object';
+import {hasOwn} from '../../../src/core/types/object';
 import {registerServiceBuilder} from '../../../src/service';
 
 /** @type {string} */
@@ -75,27 +76,41 @@ export const EmbeddedComponentState = {
  */
 export let InteractiveComponentDef;
 
+/**
+ * @typedef {{
+ *    option: ?../../amp-story-interactive/0.1/amp-story-interactive-abstract.OptionConfigType,
+ *    interactiveId: string,
+ *    type: ../../amp-story-interactive/0.1/amp-story-interactive-abstract.InteractiveType
+ * }}
+ */
+export let InteractiveReactData;
+
 /**
  * @typedef {{
  *    canInsertAutomaticAd: boolean,
- *    canShowBookend: boolean,
+ *    canShowAudioUi: boolean,
  *    canShowNavigationOverlayHint: boolean,
  *    canShowPaginationButtons: boolean,
  *    canShowPreviousPageHelp: boolean,
  *    canShowSharingUis: boolean,
  *    canShowSystemLayerButtons: boolean,
+ *    viewerCustomControls: !Array<!Object>,
  *    accessState: boolean,
  *    adState: boolean,
+ *    pageAttachmentState: boolean,
  *    affiliateLinkState: !Element,
- *    bookendState: boolean,
  *    desktopState: boolean,
  *    educationState: boolean,
+ *    gyroscopeEnabledState: string,
  *    hasSidebarState: boolean,
  *    infoDialogState: boolean,
  *    interactiveEmbeddedComponentState: !InteractiveComponentDef,
+ *    interactiveReactState: !Map<string, !InteractiveReactData>,
+ *    keyboardActiveState: boolean,
  *    mutedState: boolean,
  *    pageAudioState: boolean,
  *    pageHasElementsWithPlaybackState: boolean,
+ *    panningMediaState: !Map<string, ../../amp-story-panning-media/0.1/amp-story-panning-media.panningMediaPositionDef> ,
  *    pausedState: boolean,
  *    previewState: boolean,
  *    rtlState: boolean,
@@ -123,26 +138,32 @@ export let State;
 export const StateProperty = {
   // Embed options.
   CAN_INSERT_AUTOMATIC_AD: 'canInsertAutomaticAd',
-  CAN_SHOW_BOOKEND: 'canShowBookend',
+  CAN_SHOW_AUDIO_UI: 'canShowAudioUi',
   CAN_SHOW_NAVIGATION_OVERLAY_HINT: 'canShowNavigationOverlayHint',
   CAN_SHOW_PAGINATION_BUTTONS: 'canShowPaginationButtons',
   CAN_SHOW_PREVIOUS_PAGE_HELP: 'canShowPreviousPageHelp',
   CAN_SHOW_SHARING_UIS: 'canShowSharingUis',
   CAN_SHOW_SYSTEM_LAYER_BUTTONS: 'canShowSystemLayerButtons',
+  VIEWER_CUSTOM_CONTROLS: 'viewerCustomControls',
 
   // App States.
   ACCESS_STATE: 'accessState', // amp-access paywall.
   AD_STATE: 'adState',
-  BOOKEND_STATE: 'bookendState',
+  PAGE_ATTACHMENT_STATE: 'pageAttachmentState',
   AFFILIATE_LINK_STATE: 'affiliateLinkState',
   DESKTOP_STATE: 'desktopState',
   EDUCATION_STATE: 'educationState',
+  GYROSCOPE_PERMISSION_STATE: 'gyroscopePermissionState',
   HAS_SIDEBAR_STATE: 'hasSidebarState',
   INFO_DIALOG_STATE: 'infoDialogState',
   INTERACTIVE_COMPONENT_STATE: 'interactiveEmbeddedComponentState',
+  // State of interactive components (polls, quizzes) on the story.
+  INTERACTIVE_REACT_STATE: 'interactiveReactState',
+  KEYBOARD_ACTIVE_STATE: 'keyboardActiveState',
   MUTED_STATE: 'mutedState',
   PAGE_HAS_AUDIO_STATE: 'pageAudioState',
   PAGE_HAS_ELEMENTS_WITH_PLAYBACK_STATE: 'pageHasElementsWithPlaybackState',
+  PANNING_MEDIA_STATE: 'panningMediaState',
   PAUSED_STATE: 'pausedState',
   // Story preview state.
   PREVIEW_STATE: 'previewState',
@@ -174,6 +195,7 @@ export const StateProperty = {
 
 /** @const @enum {string} */
 export const Action = {
+  ADD_INTERACTIVE_REACT: 'addInteractiveReact',
   ADD_TO_ACTIONS_ALLOWLIST: 'addToActionsAllowlist',
   CHANGE_PAGE: 'setCurrentPageId',
   SET_CONSENT_ID: 'setConsentId',
@@ -183,13 +205,13 @@ export const Action = {
   TOGGLE_ACCESS: 'toggleAccess',
   TOGGLE_AD: 'toggleAd',
   TOGGLE_AFFILIATE_LINK: 'toggleAffiliateLink',
-  TOGGLE_BOOKEND: 'toggleBookend',
-  TOGGLE_CAN_SHOW_BOOKEND: 'toggleCanShowBookend',
   TOGGLE_EDUCATION: 'toggleEducation',
   TOGGLE_HAS_SIDEBAR: 'toggleHasSidebar',
   TOGGLE_INFO_DIALOG: 'toggleInfoDialog',
   TOGGLE_INTERACTIVE_COMPONENT: 'toggleInteractiveComponent',
+  TOGGLE_KEYBOARD_ACTIVE_STATE: 'toggleKeyboardActiveState',
   TOGGLE_MUTED: 'toggleMuted',
+  TOGGLE_PAGE_ATTACHMENT_STATE: 'togglePageAttachmentState',
   TOGGLE_PAGE_HAS_AUDIO: 'togglePageHasAudio',
   TOGGLE_PAGE_HAS_ELEMENT_WITH_PLAYBACK: 'togglePageHasElementWithPlayblack',
   TOGGLE_PAUSED: 'togglePaused',
@@ -202,9 +224,12 @@ export const Action = {
   TOGGLE_STORY_HAS_PLAYBACK_UI: 'toggleStoryHasPlaybackUi',
   TOGGLE_SYSTEM_UI_IS_VISIBLE: 'toggleSystemUiIsVisible',
   TOGGLE_UI: 'toggleUi',
+  SET_GYROSCOPE_PERMISSION: 'setGyroscopePermission',
   TOGGLE_VIEWPORT_WARNING: 'toggleViewportWarning',
   ADD_NEW_PAGE_ID: 'addNewPageId',
   SET_PAGE_SIZE: 'updatePageSize',
+  ADD_PANNING_MEDIA_STATE: 'addPanningMediaState',
+  SET_VIEWER_CUSTOM_CONTROLS: 'setCustomControls',
 };
 
 /**
@@ -222,6 +247,15 @@ const stateComparisonFunctions = {
     (old, curr) => old.element !== curr.element || old.state !== curr.state,
   [StateProperty.NAVIGATION_PATH]: (old, curr) => old.length !== curr.length,
   [StateProperty.PAGE_IDS]: (old, curr) => old.length !== curr.length,
+  [StateProperty.PAGE_SIZE]: (old, curr) =>
+    old === null ||
+    curr === null ||
+    old.width !== curr.width ||
+    old.height !== curr.height,
+  [StateProperty.PANNING_MEDIA_STATE]: (old, curr) =>
+    old === null || curr === null || !deepEquals(old, curr, 2),
+  [StateProperty.INTERACTIVE_REACT_STATE]: (old, curr) =>
+    !deepEquals(old, curr, 3),
 };
 
 /**
@@ -233,11 +267,28 @@ const stateComparisonFunctions = {
  */
 const actions = (state, action, data) => {
   switch (action) {
+    case Action.ADD_INTERACTIVE_REACT:
+      return /** @type {!State} */ ({
+        ...state,
+        [StateProperty.INTERACTIVE_REACT_STATE]: {
+          ...state[StateProperty.INTERACTIVE_REACT_STATE],
+          [data['interactiveId']]: data,
+        },
+      });
     case Action.ADD_NEW_PAGE_ID:
       return /** @type {!State} */ ({
         ...state,
         [StateProperty.NEW_PAGE_AVAILABLE_ID]: data,
       });
+    case Action.ADD_PANNING_MEDIA_STATE:
+      const updatedState = {
+        ...state[StateProperty.PANNING_MEDIA_STATE],
+        ...data,
+      };
+      return /** @type {!State} */ ({
+        ...state,
+        [StateProperty.PANNING_MEDIA_STATE]: updatedState,
+      });
     case Action.ADD_TO_ACTIONS_ALLOWLIST:
       const newActionsAllowlist = [].concat(
         state[StateProperty.ACTIONS_ALLOWLIST],
@@ -259,6 +310,11 @@ const actions = (state, action, data) => {
         [StateProperty.ACCESS_STATE]: !!data,
         [StateProperty.PAUSED_STATE]: !!data,
       });
+    case Action.TOGGLE_PAGE_ATTACHMENT_STATE:
+      return /** @type {!State} */ ({
+        ...state,
+        [StateProperty.PAGE_ATTACHMENT_STATE]: !!data,
+      });
     // Triggers the ad UI.
     case Action.TOGGLE_AD:
       return /** @type {!State} */ ({
@@ -271,21 +327,6 @@ const actions = (state, action, data) => {
         ...state,
         [StateProperty.AFFILIATE_LINK_STATE]: data,
       });
-    // Shows or hides the bookend.
-    case Action.TOGGLE_BOOKEND:
-      if (!state[StateProperty.CAN_SHOW_BOOKEND]) {
-        return state;
-      }
-      return /** @type {!State} */ ({
-        ...state,
-        [StateProperty.BOOKEND_STATE]: !!data,
-        [StateProperty.PAUSED_STATE]: !!data,
-      });
-    case Action.TOGGLE_CAN_SHOW_BOOKEND:
-      return /** @type {!State} */ ({
-        ...state,
-        [StateProperty.CAN_SHOW_BOOKEND]: !!data,
-      });
     case Action.TOGGLE_EDUCATION:
       return /** @type {!State} */ ({
         ...state,
@@ -353,6 +394,11 @@ const actions = (state, action, data) => {
         ...state,
         [StateProperty.RTL_STATE]: !!data,
       });
+    case Action.TOGGLE_KEYBOARD_ACTIVE_STATE:
+      return /** @type {!State} */ ({
+        ...state,
+        [StateProperty.KEYBOARD_ACTIVE_STATE]: !!data,
+      });
     case Action.TOGGLE_SIDEBAR:
       // Don't change the PAUSED_STATE if SIDEBAR_STATE is not changed.
       if (state[StateProperty.SIDEBAR_STATE] === data) {
@@ -397,6 +443,11 @@ const actions = (state, action, data) => {
         [StateProperty.DESKTOP_STATE]: data === UIType.DESKTOP_PANELS,
         [StateProperty.UI_STATE]: data,
       });
+    case Action.SET_GYROSCOPE_PERMISSION:
+      return /** @type {!State} */ ({
+        ...state,
+        [StateProperty.GYROSCOPE_PERMISSION_STATE]: data,
+      });
     case Action.TOGGLE_VIEWPORT_WARNING:
       return /** @type {!State} */ ({
         ...state,
@@ -433,6 +484,11 @@ const actions = (state, action, data) => {
         ...state,
         [StateProperty.PAGE_SIZE]: data,
       });
+    case Action.SET_VIEWER_CUSTOM_CONTROLS:
+      return /** @type {!State} */ ({
+        ...state,
+        [StateProperty.VIEWER_CUSTOM_CONTROLS]: data,
+      });
     default:
       dev().error(TAG, 'Unknown action %s.', action);
       return state;
@@ -528,26 +584,31 @@ export class AmpStoryStoreService {
     // properties, so we have to force the type.
     return /** @type {!State} */ ({
       [StateProperty.CAN_INSERT_AUTOMATIC_AD]: true,
-      [StateProperty.CAN_SHOW_BOOKEND]: true,
+      [StateProperty.CAN_SHOW_AUDIO_UI]: true,
       [StateProperty.CAN_SHOW_NAVIGATION_OVERLAY_HINT]: true,
       [StateProperty.CAN_SHOW_PREVIOUS_PAGE_HELP]: true,
       [StateProperty.CAN_SHOW_PAGINATION_BUTTONS]: true,
       [StateProperty.CAN_SHOW_SHARING_UIS]: true,
       [StateProperty.CAN_SHOW_SYSTEM_LAYER_BUTTONS]: true,
+      [StateProperty.VIEWER_CUSTOM_CONTROLS]: [],
       [StateProperty.ACCESS_STATE]: false,
       [StateProperty.AD_STATE]: false,
       [StateProperty.AFFILIATE_LINK_STATE]: null,
-      [StateProperty.BOOKEND_STATE]: false,
       [StateProperty.DESKTOP_STATE]: false,
       [StateProperty.EDUCATION_STATE]: false,
+      [StateProperty.GYROSCOPE_PERMISSION_STATE]: '',
       [StateProperty.HAS_SIDEBAR_STATE]: false,
       [StateProperty.INFO_DIALOG_STATE]: false,
       [StateProperty.INTERACTIVE_COMPONENT_STATE]: {
         state: EmbeddedComponentState.HIDDEN,
       },
+      [StateProperty.INTERACTIVE_REACT_STATE]: {},
+      [StateProperty.KEYBOARD_ACTIVE_STATE]: false,
       [StateProperty.MUTED_STATE]: true,
+      [StateProperty.PAGE_ATTACHMENT_STATE]: false,
       [StateProperty.PAGE_HAS_AUDIO_STATE]: false,
       [StateProperty.PAGE_HAS_ELEMENTS_WITH_PLAYBACK_STATE]: false,
+      [StateProperty.PANNING_MEDIA_STATE]: {},
       [StateProperty.PAUSED_STATE]: false,
       [StateProperty.RTL_STATE]: false,
       [StateProperty.SHARE_MENU_STATE]: false,
@@ -586,7 +647,6 @@ export class AmpStoryStoreService {
       case EmbedMode.NAME_TBD:
         return {
           [StateProperty.CAN_INSERT_AUTOMATIC_AD]: false,
-          [StateProperty.CAN_SHOW_BOOKEND]: false,
           [StateProperty.CAN_SHOW_NAVIGATION_OVERLAY_HINT]: false,
           [StateProperty.CAN_SHOW_PAGINATION_BUTTONS]: false,
           [StateProperty.CAN_SHOW_PREVIOUS_PAGE_HELP]: true,
@@ -601,12 +661,16 @@ export class AmpStoryStoreService {
         return {
           [StateProperty.PREVIEW_STATE]: true,
           [StateProperty.CAN_INSERT_AUTOMATIC_AD]: false,
-          [StateProperty.CAN_SHOW_BOOKEND]: false,
           [StateProperty.CAN_SHOW_NAVIGATION_OVERLAY_HINT]: false,
           [StateProperty.CAN_SHOW_PAGINATION_BUTTONS]: false,
           [StateProperty.CAN_SHOW_PREVIOUS_PAGE_HELP]: false,
           [StateProperty.CAN_SHOW_SYSTEM_LAYER_BUTTONS]: false,
         };
+      case EmbedMode.NO_SHARING_NOR_AUDIO_UI:
+        return {
+          [StateProperty.CAN_SHOW_AUDIO_UI]: false,
+          [StateProperty.CAN_SHOW_SHARING_UIS]: false,
+        };
       default:
         return {};
     }
diff --git a/extensions/amp-story/1.0/amp-story-system-layer.css b/extensions/amp-story/1.0/amp-story-system-layer.css
index 7bb45c577471a..6681587f95c00 100644
--- a/extensions/amp-story/1.0/amp-story-system-layer.css
+++ b/extensions/amp-story/1.0/amp-story-system-layer.css
@@ -18,24 +18,22 @@
 
 
 .i-amphtml-story-system-layer {
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent) !important;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), transparent) !important;
   position: absolute !important;
+  display: flex !important;
+  justify-content: space-between !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
-  height: 56px !important; /* 6px progress bar + 48px icons + 2px margin */
-  opacity: 1 !important;
+  height: 54px !important;
   z-index: 100000 !important;
-  box-sizing: border-box !important;
   transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
   pointer-events: none !important;
   font-family: 'Roboto', sans-serif !important;
 }
 
-.i-amphtml-story-bookend-active.i-amphtml-story-system-layer {
-  opacity: 0.3 !important;
-  z-index: 1 !important;
-  transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1) !important;
+[desktop] .i-amphtml-story-system-layer {
+  height: 96px !important;
 }
 
 .i-amphtml-story-hidden.i-amphtml-story-system-layer {
@@ -47,15 +45,79 @@
   pointer-events: none !important;
 }
 
-.i-amphtml-story-desktop-panels.i-amphtml-story-bookend-active.i-amphtml-story-system-layer {
-  opacity: 0 !important;
+.i-amphtml-story-attribution {
+  top: 0 !important;
+  border: none !important;
+  pointer-events: auto !important;
+  cursor: pointer !important;
+  padding: 6px 8px 0 !important;
+  height: 48px !important;
+  place-items: center !important;
+  display: flex !important;
+  text-decoration: none !important;
+  overflow: hidden !important;
+  visibility: hidden !important;
+}
+
+.i-amphtml-story-attribution-visible {
+  visibility: visible !important;
+}
+
+[desktop] .i-amphtml-story-attribution {
+  padding: 6px 6px 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+}
+
+.i-amphtml-story-attribution > * {
+  margin: 0px 4px !important;
+}
+
+.i-amphtml-story-attribution-logo-container {
+  display: grid !important;
+  place-items: center !important;
+}
+
+.i-amphtml-story-attribution-logo {
+  border-radius: 100% !important;
+  border: 1px solid #D4D4D4 !important;
+  width: 28px !important;
+  height: 28px !important;
+  object-fit: cover !important;
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12) !important;
+}
+
+.i-amphtml-story-attribution-text {
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16) !important;
+  color: #FFFF !important;
 }
 
-.i-amphtml-story-system-layer-buttons {
-  margin-top: 8px; /* 6px progress bar + 2px margin */
+.i-amphtml-story-system-layer-buttons,
+.i-amphtml-story-system-layer-buttons-start-position {
   display: flex !important;
   flex-direction: row !important;
   justify-content: flex-end !important;
+  padding-top: 6px !important;
+  box-sizing: border-box !important;
+}
+
+.i-amphtml-story-system-layer-buttons-start-position {
+  position: absolute !important;
+  top: 0 !important;
+  justify-content: flex-start !important;
+}
+
+[desktop] .i-amphtml-story-system-layer-buttons {
+  padding: 8px 4px 0 !important;
+}
+
+.i-amphtml-story-system-layer-buttons .i-amphtml-story-ui-hide-button.i-amphtml-story-button {
+  display: none !important;
 }
 
 .i-amphtml-story-button {
@@ -64,23 +126,21 @@
   height: 48px !important;
   width: 48px !important;
   cursor: pointer !important;
-  border-radius: 50% !important;
-  border-width: 0 !important;
-  box-sizing: border-box !important;
-  position: relative !important;
+  border: none !important;
   pointer-events: auto !important;
-
   /* for svg backgrounds: */
   background: center center no-repeat !important;
+  background-size: 24px 24px !important;
 }
 
-.i-amphtml-story-button:active {
-  /* TODO(alanorozco): do we want material ripple effect? */
-  background-color: rgba(0, 0, 0, 0.2) !important;
+[desktop] .i-amphtml-story-button {
+  margin: 0 4px !important;
+  background-size: 32px 32px !important;
+  padding: 8px !important;
 }
 
-.i-amphtml-story-system-layer .i-amphtml-story-button {
-  float: left !important;
+.i-amphtml-story-button:active {
+  background-color: rgba(0, 0, 0, 0.2) !important;
 }
 
 .i-amphtml-story-progress-bar {
@@ -97,7 +157,19 @@
   z-index: 100001 !important;
 }
 
-[ad-showing] .i-amphtml-story-progress-bar {
+[ad-showing] .i-amphtml-story-progress-bar,
+[ad-showing] .i-amphtml-story-attribution {
+  visibility: hidden !important;
+}
+
+[ad-showing] .i-amphtml-story-share-control {
+  display: none !important;
+}
+
+[ad-showing]:not([i-amphtml-current-page-has-audio])
+.i-amphtml-story-mute-audio-control,
+[ad-showing]:not([i-amphtml-current-page-has-audio])
+.i-amphtml-story-unmute-audio-control {
   visibility: hidden !important;
 }
 
@@ -197,6 +269,10 @@
   position: relative !important;
 }
 
+.i-amphtml-story-no-audio-ui .i-amphtml-story-sound-display {
+  display: none !important;
+}
+
 .i-amphtml-story-mute-audio-control,
 .i-amphtml-story-unmute-audio-control,
 .i-amphtml-paused-display,
@@ -205,7 +281,8 @@
 .i-amphtml-story-mute-text,
 .i-amphtml-story-unmute-sound-text,
 .i-amphtml-story-unmute-no-sound-text,
-.i-amphtml-story-sidebar-control {
+.i-amphtml-story-sidebar-control,
+.i-amphtml-story-skip-to-next  {
   display: none !important;
 }
 
@@ -218,11 +295,11 @@
   display: block !important;
 }
 
-.i-amphtml-story-desktop-panels .i-amphtml-paused-display, .i-amphtml-story-desktop-fullbleed .i-amphtml-paused-display {
+[desktop] .i-amphtml-paused-display {
   display: block !important;
 }
 
-.i-amphtml-paused-display button[disabled] {
+.i-amphtml-story-system-layer-buttons button[disabled] {
   opacity: 0.3 !important;
   cursor: initial !important;
 }
@@ -232,6 +309,10 @@
   display: block !important;
 }
 
+.amp-mode-keyboard-active:not([desktop]) .i-amphtml-paused-display {
+  display: block !important;
+}
+
 .i-amphtml-story-has-audio[muted] .i-amphtml-story-mute-text,
 [i-amphtml-current-page-has-audio].i-amphtml-story-has-audio:not([muted]) .i-amphtml-story-unmute-sound-text,
 :not([i-amphtml-current-page-has-audio]).i-amphtml-story-has-audio:not([muted]) .i-amphtml-story-unmute-no-sound-text {
@@ -244,19 +325,27 @@
 }
 
 .i-amphtml-story-unmute-audio-control {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M5.19944 4L4 5.19944L8.46722 9.66667H4V15.3333H7.77778L12.5 20.0556V13.6994L16.5139 17.7133C15.8811 18.2044 15.1728 18.5917 14.3889 18.8278V20.7733C15.6922 20.4806 16.8728 19.8761 17.8739 19.0639L19.8006 21L21 19.8006L12.5 11.3006L5.19944 4ZM18.6011 14.9933C18.9222 14.2189 19.1111 13.3878 19.1111 12.5C19.1111 9.50611 17.1183 6.975 14.3889 6.16278V4.21722C18.1761 5.07667 21 8.45778 21 12.5C21 13.9167 20.6506 15.2483 20.0272 16.4194L18.6011 14.9933ZM14.3889 8.69389C15.7867 9.39278 16.75 10.8283 16.75 12.5C16.75 12.7078 16.7311 12.9061 16.7028 13.095L14.3889 10.7811V8.69389ZM10.5261 6.91833L12.5 4.94444V8.89222L10.5261 6.91833Z"/></svg>') !important;
+}
+
+[desktop] .i-amphtml-story-unmute-audio-control {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M7.4,6L6,7.4l5.3,5.3H6v6.7h4.4l5.6,5.6v-7.5l4.7,4.7c-0.7,0.6-1.6,1-2.5,1.3v2.3c1.5-0.3,2.9-1.1,4.1-2l2.3,2.3l1.4-1.4l-10-10L7.4,6z M23.2,18.9c0.4-0.9,0.6-1.9,0.6-2.9c0-3.5-2.3-6.5-5.6-7.5V6.3c4.5,1,7.8,5,7.8,9.7c0,1.7-0.4,3.2-1.1,4.6L23.2,18.9z M18.2,11.5C19.9,12.3,21,14,21,16c0,0.2,0,0.5-0.1,0.7L18.2,14V11.5z M13.7,9.4L16,7.1v4.6L13.7,9.4z"/></svg>') !important;
 }
 
 .i-amphtml-story-mute-audio-control {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M4 9.5924V15.4077H7.77778L12.5 20.2537V4.74634L7.77778 9.5924H4Z"/><path d="M16.7498 12.4999C16.7498 10.7844 15.7864 9.31121 14.3887 8.59399V16.3962C15.7864 15.6886 16.7498 14.2154 16.7498 12.4999Z" /><path d="M14.3887 4V5.99658C17.1181 6.8301 19.1109 9.42759 19.1109 12.5C19.1109 15.5724 17.1181 18.1699 14.3887 19.0034V21C18.1759 20.118 20.9998 16.6482 20.9998 12.5C20.9998 8.35177 18.1759 4.88198 14.3887 4Z"/></svg>') !important;
+}
+
+[desktop] .i-amphtml-story-mute-audio-control {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M10.4,12.6L16,6.9v18.2l-5.6-5.7H6v-6.8H10.4z M21,16c0-2-1.1-3.8-2.8-4.6v9.2C19.9,19.8,21,18,21,16z M18.2,6v2.3c3.2,1,5.6,4,5.6,7.7c0,3.6-2.3,6.7-5.6,7.7V26c4.5-1,7.8-5.1,7.8-10C26,11.1,22.7,7,18.2,6z"/></svg>') !important;
 }
 
 .i-amphtml-story-pause-control {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M13.3,25.3H8V6.7h5.3V25.3z M18.7,25.3V6.7H24v18.7H18.7z"/></svg>') !important;
 }
 
 .i-amphtml-story-play-control {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M23.5211 16.335L9 25.67V7L23.5211 16.335Z"/></svg>') !important;
 }
 
 .i-amphtml-story-sidebar-control {
@@ -264,18 +353,38 @@
 }
 
 .i-amphtml-story-share-control {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>') !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M15.6392 16.4092C16.125 15.9509 16.7758 15.6667 17.5 15.6667C19.0217 15.6667 20.25 16.895 20.25 18.4167C20.25 19.9384 19.0217 21.1667 17.5 21.1667C15.9783 21.1667 14.75 19.9384 14.75 18.4167C14.75 18.1967 14.7867 17.9859 14.8325 17.7842L8.37 14.0075C7.875 14.4659 7.22417 14.75 6.5 14.75C4.97833 14.75 3.75 13.5217 3.75 12C3.75 10.4784 4.97833 9.25004 6.5 9.25004C7.22417 9.25004 7.875 9.53421 8.37 9.99254L14.8325 6.22504C14.7867 6.02337 14.75 5.80337 14.75 5.58337C14.75 4.06171 15.9783 2.83337 17.5 2.83337C19.0217 2.83337 20.25 4.06171 20.25 5.58337C20.25 7.10504 19.0217 8.33337 17.5 8.33337C16.7758 8.33337 16.1158 8.04921 15.63 7.59087L9.1675 11.3584C9.21333 11.5692 9.25 11.78 9.25 12C9.25 12.22 9.21333 12.4309 9.1675 12.6417L15.6392 16.4092ZM18.4167 5.58337C18.4167 5.07921 18.0042 4.66671 17.5 4.66671C16.9958 4.66671 16.5833 5.07921 16.5833 5.58337C16.5833 6.08754 16.9958 6.50004 17.5 6.50004C18.0042 6.50004 18.4167 6.08754 18.4167 5.58337ZM6.5 12.9167C5.99583 12.9167 5.58333 12.5042 5.58333 12C5.58333 11.4959 5.99583 11.0834 6.5 11.0834C7.00417 11.0834 7.41667 11.4959 7.41667 12C7.41667 12.5042 7.00417 12.9167 6.5 12.9167ZM16.5833 18.4167C16.5833 18.9209 16.9958 19.3334 17.5 19.3334C18.0042 19.3334 18.4167 18.9209 18.4167 18.4167C18.4167 17.9125 18.0042 17.5 17.5 17.5C16.9958 17.5 16.5833 17.9125 16.5833 18.4167Z" fill-rule="evenodd"/></svg>') !important;
+}
+
+[desktop] .i-amphtml-story-share-control {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M20,20.8c0.5-0.5,1.2-0.8,2-0.8c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3c0-0.2,0-0.5,0.1-0.7l-7-4.1c-0.5,0.5-1.2,0.8-2,0.8c-1.7,0-3-1.3-3-3s1.3-3,3-3c0.8,0,1.5,0.3,2,0.8l7-4.1C19,9.5,19,9.2,19,9c0-1.7,1.3-3,3-3s3,1.3,3,3s-1.3,3-3,3c-0.8,0-1.5-0.3-2-0.8l-7,4.1c0,0.2,0.1,0.5,0.1,0.7s0,0.5-0.1,0.7L20,20.8z M23,9c0-0.5-0.5-1-1-1s-1,0.5-1,1s0.5,1,1,1S23,9.5,23,9z M10,17c-0.5,0-1-0.5-1-1s0.5-1,1-1s1,0.5,1,1S10.5,17,10,17z M21,23c0,0.5,0.5,1,1,1s1-0.5,1-1s-0.5-1-1-1S21,22.5,21,23z" fill-rule="evenodd"/></svg>') !important;
 }
 
 [ios] .i-amphtml-story-share-control {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z"/></svg>') !important;
-  /** Visual hack to make the icon looks aligned. */
-  background-position-y: calc(50% - 2px) !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path fill="white" d="M15.6665 4.58329L14.3648 5.88496L12.9073 4.42746V14.6666H11.0923V4.42746L9.63484 5.88496L8.33317 4.58329L11.9998 0.916626L15.6665 4.58329ZM19.3332 9.16663V19.25C19.3332 20.2583 18.5082 21.0833 17.4998 21.0833H6.49984C5.48234 21.0833 4.6665 20.2583 4.6665 19.25V9.16663C4.6665 8.14913 5.48234 7.33329 6.49984 7.33329H9.24984V9.16663H6.49984V19.25H17.4998V9.16663H14.7498V7.33329H17.4998C18.5082 7.33329 19.3332 8.14913 19.3332 9.16663Z"/></svg>') !important;
+  background-size: auto !important;
 }
 
 .i-amphtml-story-info-control {
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 48 48" fill="#FFFFFF"><path d="M0 0h48v48H0z" fill="none"/><path d="M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z"/></svg>') !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M11.1,7.3h1.9v1.9h-1.9V7.3z M11.1,11.1h1.9v5.7h-1.9V11.1z M12,2.5c-5.2,0-9.5,4.3-9.5,9.5s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S17.2,2.5,12,2.5z M12,19.6c-4.2,0-7.6-3.4-7.6-7.6S7.8,4.4,12,4.4s7.6,3.4,7.6,7.6S16.2,19.6,12,19.6z"/></svg>') !important;
   display: none !important;
+  background-size: auto !important;
+}
+
+.i-amphtml-story-close-control {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"/></svg>') !important;
+}
+
+[desktop] .i-amphtml-story-close-control {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M25.3332 8.54663L23.4532 6.66663L15.9998 14.12L8.5465 6.66663L6.6665 8.54663L14.1198 16L6.6665 23.4533L8.5465 25.3333L15.9998 17.88L23.4532 25.3333L25.3332 23.4533L17.8798 16L25.3332 8.54663Z"/></svg>') !important;
+}
+
+.i-amphtml-story-skip-to-next {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M19.3333 16L8 24V8L19.3333 16ZM24 24H21.3333V8H24V24Z"/></svg>') !important;
+}
+
+[desktop] .i-amphtml-story-skip-to-next {
+  display: block !important;
 }
 
 .i-amphtml-story-has-new-page-notification-container {
@@ -383,13 +492,15 @@
   transform-origin: right !important;
 }
 
-.i-amphtml-story-desktop-panels .i-amphtml-progress-bar-overflow .i-amphtml-story-page-progress-bar,
-.i-amphtml-story-desktop-fullbleed .i-amphtml-progress-bar-overflow .i-amphtml-story-page-progress-bar {
+[desktop] .i-amphtml-progress-bar-overflow .i-amphtml-story-page-progress-bar {
   width: 3px !important;
 }
 
-.i-amphtml-story-desktop-panels.i-amphtml-story-system-layer .i-amphtml-story-system-layer-buttons {
+.i-amphtml-story-desktop-panels.i-amphtml-story-system-layer .i-amphtml-story-system-layer-buttons,
+.i-amphtml-story-desktop-panels.i-amphtml-story-system-layer .i-amphtml-story-system-layer-buttons-start-position,
+.i-amphtml-story-desktop-panels.i-amphtml-story-system-layer .i-amphtml-story-attribution
+ {
   position: fixed !important;
   top: 0 !important;
-  right: 0 !important;
+  width: 100vw !important;
 }
diff --git a/extensions/amp-story/1.0/amp-story-system-layer.js b/extensions/amp-story/1.0/amp-story-system-layer.js
index 222948e992508..e6ca3c339648a 100644
--- a/extensions/amp-story/1.0/amp-story-system-layer.js
+++ b/extensions/amp-story/1.0/amp-story-system-layer.js
@@ -13,12 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import {AMP_STORY_PLAYER_EVENT} from '../../../src/amp-story-player/amp-story-player-impl';
 import {
   Action,
   StateProperty,
   UIType,
   getStoreService,
 } from './amp-story-store-service';
+import {AmpStoryViewerMessagingHandler} from './amp-story-viewer-messaging-handler';
 import {CSS} from '../../../build/amp-story-system-layer-1.0.css';
 import {
   DevelopmentModeLog,
@@ -27,13 +29,21 @@ import {
 import {LocalizedStringId} from '../../../src/localized-strings';
 import {ProgressBar} from './progress-bar';
 import {Services} from '../../../src/services';
-import {createShadowRootWithStyle, shouldShowStoryUrlInfo} from './utils';
+import {closest, matches, scopedQuerySelector} from '../../../src/dom';
+import {
+  createShadowRootWithStyle,
+  getStoryAttributeSrc,
+  shouldShowStoryUrlInfo,
+  triggerClickFromLightDom,
+} from './utils';
 import {dev} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {getMode} from '../../../src/mode';
-import {matches} from '../../../src/dom';
+import {getSourceOrigin} from '../../../src/url';
 import {renderAsElement} from './simple-template';
-import {toArray} from '../../../src/types';
+import {setImportantStyles} from '../../../src/style';
+import {toArray} from '../../../src/core/types/array';
 
 /** @private @const {string} */
 const AD_SHOWING_ATTRIBUTE = 'ad-showing';
@@ -50,6 +60,15 @@ const HAS_INFO_BUTTON_ATTRIBUTE = 'info';
 /** @private @const {string} */
 const MUTE_CLASS = 'i-amphtml-story-mute-audio-control';
 
+/** @private @const {string} */
+const CLOSE_CLASS = 'i-amphtml-story-close-control';
+
+/** @private @const {string} */
+const SKIP_TO_NEXT_CLASS = 'i-amphtml-story-skip-to-next';
+
+/** @private @const {string} */
+const VIEWER_CUSTOM_CONTROL_CLASS = 'i-amphtml-story-viewer-custom-control';
+
 /** @private @const {string} */
 const UNMUTE_CLASS = 'i-amphtml-story-unmute-audio-control';
 
@@ -80,6 +99,9 @@ const SIDEBAR_CLASS = 'i-amphtml-story-sidebar-control';
 /** @private @const {string} */
 const HAS_NEW_PAGE_ATTRIBUTE = 'i-amphtml-story-has-new-page';
 
+/** @private @const {string} */
+const ATTRIBUTION_CLASS = 'i-amphtml-story-attribution';
+
 /** @private @const {number} */
 const HIDE_MESSAGE_TIMEOUT_MS = 1500;
 
@@ -90,6 +112,36 @@ const TEMPLATE = {
     'class': 'i-amphtml-story-system-layer i-amphtml-story-system-reset',
   }),
   children: [
+    {
+      tag: 'a',
+      attrs: dict({
+        'class': ATTRIBUTION_CLASS,
+        'target': '_blank',
+      }),
+      children: [
+        {
+          tag: 'div',
+          attrs: dict({
+            'class': 'i-amphtml-story-attribution-logo-container',
+          }),
+          children: [
+            {
+              tag: 'img',
+              attrs: dict({
+                'alt': '',
+                'class': 'i-amphtml-story-attribution-logo',
+              }),
+            },
+          ],
+        },
+        {
+          tag: 'div',
+          attrs: dict({
+            'class': 'i-amphtml-story-attribution-text',
+          }),
+        },
+      ],
+    },
     {
       tag: 'div',
       attrs: dict({
@@ -199,19 +251,30 @@ const TEMPLATE = {
               attrs: dict({
                 'class': PAUSE_CLASS + ' i-amphtml-story-button',
               }),
+              localizedLabelId: LocalizedStringId.AMP_STORY_PAUSE_BUTTON_LABEL,
             },
             {
               tag: 'button',
               attrs: dict({
                 'class': PLAY_CLASS + ' i-amphtml-story-button',
               }),
+              localizedLabelId: LocalizedStringId.AMP_STORY_PLAY_BUTTON_LABEL,
             },
           ],
         },
         {
-          tag: 'a',
+          tag: 'button',
+          attrs: dict({
+            'class':
+              SKIP_TO_NEXT_CLASS +
+              ' i-amphtml-story-ui-hide-button i-amphtml-story-button',
+          }),
+          localizedLabelId:
+            LocalizedStringId.AMP_STORY_SKIP_TO_NEXT_BUTTON_LABEL,
+        },
+        {
+          tag: 'button',
           attrs: dict({
-            'role': 'button',
             'class': SHARE_CLASS + ' i-amphtml-story-button',
           }),
           localizedLabelId: LocalizedStringId.AMP_STORY_SHARE_BUTTON_LABEL,
@@ -223,21 +286,66 @@ const TEMPLATE = {
           }),
           localizedLabelId: LocalizedStringId.AMP_STORY_SIDEBAR_BUTTON_LABEL,
         },
+        {
+          tag: 'button',
+          attrs: dict({
+            'class':
+              CLOSE_CLASS +
+              ' i-amphtml-story-ui-hide-button i-amphtml-story-button',
+          }),
+          localizedLabelId: LocalizedStringId.AMP_STORY_CLOSE_BUTTON_LABEL,
+        },
       ],
     },
+    {
+      tag: 'div',
+      attrs: dict({
+        'class': 'i-amphtml-story-system-layer-buttons-start-position',
+      }),
+    },
   ],
 };
 
+/**
+ * Contains the event name belonging to the viewer control.
+ * @const {string}
+ */
+const VIEWER_CONTROL_EVENT_NAME = '__AMP_VIEWER_CONTROL_EVENT_NAME__';
+
+/** @enum {string} */
+const VIEWER_CONTROL_TYPES = {
+  CLOSE: 'close',
+  SHARE: 'share',
+  DEPRECATED_SKIP_NEXT: 'skip-next', // Deprecated in favor of SKIP_TO_NEXT.
+  SKIP_TO_NEXT: 'skip-to-next',
+};
+
+const VIEWER_CONTROL_DEFAULTS = {
+  [VIEWER_CONTROL_TYPES.SHARE]: {
+    'selector': `.${SHARE_CLASS}`,
+  },
+  [VIEWER_CONTROL_TYPES.CLOSE]: {
+    'selector': `.${CLOSE_CLASS}`,
+  },
+  [VIEWER_CONTROL_TYPES.DEPRECATED_SKIP_NEXT]: {
+    'selector': `.${SKIP_TO_NEXT_CLASS}`,
+  },
+  [VIEWER_CONTROL_TYPES.SKIP_TO_NEXT]: {
+    'selector': `.${SKIP_TO_NEXT_CLASS}`,
+  },
+};
+
 /**
  * System Layer (i.e. UI Chrome) for <amp-story>.
  * Chrome contains:
  *   - mute/unmute button
  *   - story progress bar
- *   - bookend close button
  *   - share button
  *   - domain info button
  *   - sidebar
  *   - story updated label (for live stories)
+ *   - close (for players)
+ *   - skip (for players)
  */
 export class SystemLayer {
   /**
@@ -289,6 +397,12 @@ export class SystemLayer {
 
     /** @private {?number|?string} */
     this.timeoutId_ = null;
+
+    /** @private {?../../../src/service/viewer-interface.ViewerInterface} */
+    this.viewer_ = null;
+
+    /** @private {?AmpStoryViewerMessagingHandler} */
+    this.viewerMessagingHandler_ = null;
   }
 
   /**
@@ -308,9 +422,8 @@ export class SystemLayer {
     // Make the share button link to the current document to make sure
     // embedded STAMPs always have a back-link to themselves, and to make
     // gestures like right-clicks work.
-    this.systemLayerEl_.querySelector(
-      '.i-amphtml-story-share-control'
-    ).href = Services.documentInfoForDoc(this.parentEl_).canonicalUrl;
+    this.systemLayerEl_.querySelector('.i-amphtml-story-share-control').href =
+      Services.documentInfoForDoc(this.parentEl_).canonicalUrl;
 
     createShadowRootWithStyle(this.root_, this.systemLayerEl_, CSS);
 
@@ -342,20 +455,52 @@ export class SystemLayer {
       this.systemLayerEl_.setAttribute('ios', '');
     }
 
-    const viewer = Services.viewerForDoc(this.win_.document.documentElement);
+    this.viewer_ = Services.viewerForDoc(this.win_.document.documentElement);
+    this.viewerMessagingHandler_ = this.viewer_.isEmbedded()
+      ? new AmpStoryViewerMessagingHandler(this.win_, this.viewer_)
+      : null;
 
-    if (shouldShowStoryUrlInfo(viewer)) {
+    if (shouldShowStoryUrlInfo(this.viewer_)) {
       this.systemLayerEl_.classList.add('i-amphtml-embedded');
       this.getShadowRoot().setAttribute(HAS_INFO_BUTTON_ATTRIBUTE, '');
     } else {
       this.getShadowRoot().removeAttribute(HAS_INFO_BUTTON_ATTRIBUTE);
     }
 
+    this.maybeBuildAttribution_();
+
     this.getShadowRoot().setAttribute(MESSAGE_DISPLAY_CLASS, 'noshow');
     this.getShadowRoot().setAttribute(HAS_NEW_PAGE_ATTRIBUTE, 'noshow');
     return this.getRoot();
   }
 
+  /** @private */
+  maybeBuildAttribution_() {
+    if (!this.viewer_ || this.viewer_.getParam('attribution') !== 'auto') {
+      return;
+    }
+
+    this.systemLayerEl_.querySelector('.i-amphtml-story-attribution-logo').src =
+      getStoryAttributeSrc(this.parentEl_, 'entity-logo-src') ||
+      getStoryAttributeSrc(this.parentEl_, 'publisher-logo-src');
+
+    const anchorEl = this.systemLayerEl_.querySelector(
+      `.${escapeCssSelectorIdent(ATTRIBUTION_CLASS)}`
+    );
+
+    anchorEl.href =
+      getStoryAttributeSrc(this.parentEl_, 'entity-url') ||
+      getSourceOrigin(Services.documentInfoForDoc(this.parentEl_).sourceUrl);
+
+    this.systemLayerEl_.querySelector(
+      '.i-amphtml-story-attribution-text'
+    ).textContent =
+      this.parentEl_.getAttribute('entity') ||
+      this.parentEl_.getAttribute('publisher');
+
+    anchorEl.classList.add('i-amphtml-story-attribution-visible');
+  }
+
   /**
    * @private
    */
@@ -394,6 +539,18 @@ export class SystemLayer {
         this.onInfoClick_();
       } else if (matches(target, `.${SIDEBAR_CLASS}, .${SIDEBAR_CLASS} *`)) {
         this.onSidebarClick_();
+      } else if (
+        matches(
+          target,
+          `.${VIEWER_CUSTOM_CONTROL_CLASS}, .${VIEWER_CUSTOM_CONTROL_CLASS} *`
+        )
+      ) {
+        this.onViewerControlClick_(dev().assertElement(event.target));
+      } else if (
+        matches(target, `.${ATTRIBUTION_CLASS}, .${ATTRIBUTION_CLASS} *`)
+      ) {
+        const anchorClicked = closest(target, (e) => matches(e, 'a[href]'));
+        triggerClickFromLightDom(anchorClicked, this.parentEl_);
       }
     });
 
@@ -401,9 +558,13 @@ export class SystemLayer {
       this.onAdStateUpdate_(isAd);
     });
 
-    this.storeService_.subscribe(StateProperty.BOOKEND_STATE, (isActive) => {
-      this.onBookendStateUpdate_(isActive);
-    });
+    this.storeService_.subscribe(
+      StateProperty.CAN_SHOW_AUDIO_UI,
+      (show) => {
+        this.onCanShowAudioUiUpdate_(show);
+      },
+      true /** callToInitialize */
+    );
 
     this.storeService_.subscribe(
       StateProperty.CAN_SHOW_SHARING_UIS,
@@ -469,6 +630,14 @@ export class SystemLayer {
       true /** callToInitialize */
     );
 
+    this.storeService_.subscribe(
+      StateProperty.KEYBOARD_ACTIVE_STATE,
+      (keyboardState) => {
+        this.onKeyboardActiveUpdate_(keyboardState);
+      },
+      true /** callToInitialize */
+    );
+
     this.storeService_.subscribe(
       StateProperty.PAGE_HAS_AUDIO_STATE,
       (audio) => {
@@ -503,6 +672,12 @@ export class SystemLayer {
     this.storeService_.subscribe(StateProperty.NEW_PAGE_AVAILABLE_ID, () => {
       this.onNewPageAvailable_();
     });
+
+    this.storeService_.subscribe(
+      StateProperty.VIEWER_CUSTOM_CONTROLS,
+      (config) => this.onViewerCustomControls_(config),
+      true /* callToInitialize */
+    );
   }
 
   /**
@@ -525,23 +700,12 @@ export class SystemLayer {
    * @private
    */
   onAdStateUpdate_(isAd) {
-    this.vsync_.mutate(() => {
-      isAd
-        ? this.getShadowRoot().setAttribute(AD_SHOWING_ATTRIBUTE, '')
-        : this.getShadowRoot().removeAttribute(AD_SHOWING_ATTRIBUTE);
-    });
-  }
-
-  /**
-   * Reacts to the bookend state updates and updates the UI accordingly.
-   * @param {boolean} isActive
-   * @private
-   */
-  onBookendStateUpdate_(isActive) {
-    this.getShadowRoot().classList.toggle(
-      'i-amphtml-story-bookend-active',
-      isActive
-    );
+    // This is not in vsync as we are showing/hiding items in the system layer
+    // based upon this attribute, and when wrapped in vsync there is a visual
+    // lag after the page change before the icons are updated.
+    isAd
+      ? this.getShadowRoot().setAttribute(AD_SHOWING_ATTRIBUTE, '')
+      : this.getShadowRoot().removeAttribute(AD_SHOWING_ATTRIBUTE);
   }
 
   /**
@@ -558,6 +722,21 @@ export class SystemLayer {
     }
   }
 
+  /**
+   * Reacts to updates to whether audio UI may be shown, and updates the UI
+   * accordingly.
+   * @param {boolean} canShowAudioUi
+   * @private
+   */
+  onCanShowAudioUiUpdate_(canShowAudioUi) {
+    this.vsync_.mutate(() => {
+      this.getShadowRoot().classList.toggle(
+        'i-amphtml-story-no-audio-ui',
+        !canShowAudioUi
+      );
+    });
+  }
+
   /**
    * Reacts to updates to whether sharing UIs may be shown, and updates the UI
    * accordingly.
@@ -707,12 +886,15 @@ export class SystemLayer {
 
       shadowRoot.classList.remove('i-amphtml-story-desktop-fullbleed');
       shadowRoot.classList.remove('i-amphtml-story-desktop-panels');
+      shadowRoot.removeAttribute('desktop');
 
       switch (uiState) {
         case UIType.DESKTOP_PANELS:
+          shadowRoot.setAttribute('desktop', '');
           shadowRoot.classList.add('i-amphtml-story-desktop-panels');
           break;
         case UIType.DESKTOP_FULLBLEED:
+          shadowRoot.setAttribute('desktop', '');
           shadowRoot.classList.add('i-amphtml-story-desktop-fullbleed');
           break;
       }
@@ -765,6 +947,20 @@ export class SystemLayer {
     });
   }
 
+  /**
+   * Reacts to keyboard updates and updates the UI.
+   * @param {boolean} keyboardActive
+   * @private
+   */
+  onKeyboardActiveUpdate_(keyboardActive) {
+    this.vsync_.mutate(() => {
+      this.getShadowRoot().classList.toggle(
+        'amp-mode-keyboard-active',
+        keyboardActive
+      );
+    });
+  }
+
   /**
    * Handles click events on the mute and unmute buttons.
    * @param {boolean} mute Specifies if the audio is being muted or unmuted.
@@ -794,10 +990,33 @@ export class SystemLayer {
    */
   onShareClick_(event) {
     event.preventDefault();
+    if (event.target[VIEWER_CONTROL_EVENT_NAME]) {
+      this.onViewerControlClick_(dev().assertElement(event.target));
+      return;
+    }
+
     const isOpen = this.storeService_.get(StateProperty.SHARE_MENU_STATE);
     this.storeService_.dispatch(Action.TOGGLE_SHARE_MENU, !isOpen);
   }
 
+  /**
+   * Sends message back to the viewer with the corresponding event.
+   * @param {!Element} element
+   * @private
+   */
+  onViewerControlClick_(element) {
+    const eventName = element[VIEWER_CONTROL_EVENT_NAME];
+
+    this.viewerMessagingHandler_ &&
+      this.viewerMessagingHandler_.send(
+        'documentStateUpdate',
+        dict({
+          'state': AMP_STORY_PLAYER_EVENT,
+          'value': eventName,
+        })
+      );
+  }
+
   /**
    * Handles click events on the info button and toggles the info dialog.
    * @private
@@ -826,6 +1045,83 @@ export class SystemLayer {
     });
   }
 
+  /**
+   * Reacts to a custom configuration change coming from the player level.
+   * Updates UI to match configuration described by publisher.
+   * @param {!Array<!../../../src/amp-story-player/amp-story-player-impl.ViewerControlDef>} controls
+   * @private
+   */
+  onViewerCustomControls_(controls) {
+    if (controls.length <= 0) {
+      return;
+    }
+
+    controls.forEach((control) => {
+      if (!control.name) {
+        return;
+      }
+
+      const defaultConfig = VIEWER_CONTROL_DEFAULTS[control.name];
+
+      let element;
+      if (defaultConfig && defaultConfig.selector) {
+        element = scopedQuerySelector(
+          this.getShadowRoot(),
+          defaultConfig.selector
+        );
+      } else {
+        element = this.win_.document.createElement('button');
+        this.vsync_.mutate(() => {
+          element.classList.add('i-amphtml-story-button');
+          this.buttonsContainer_.appendChild(element);
+        });
+      }
+
+      this.vsync_.mutate(() => {
+        element.classList.add(VIEWER_CUSTOM_CONTROL_CLASS);
+      });
+
+      if (control.visibility === 'hidden') {
+        this.vsync_.mutate(() => {
+          element.classList.add('i-amphtml-story-ui-hide-button');
+        });
+      }
+
+      if (!control.visibility || control.visibility === 'visible') {
+        this.vsync_.mutate(() => {
+          dev()
+            .assertElement(element)
+            .classList.remove('i-amphtml-story-ui-hide-button');
+        });
+      }
+
+      if (control.state === 'disabled') {
+        this.vsync_.mutate(() => {
+          element.disabled = true;
+        });
+      }
+
+      if (control.position === 'start') {
+        const startButtonContainer = this.systemLayerEl_.querySelector(
+          '.i-amphtml-story-system-layer-buttons-start-position'
+        );
+
+        this.vsync_.mutate(() => {
+          this.buttonsContainer_.removeChild(element);
+          startButtonContainer.appendChild(element);
+        });
+      }
+
+      if (control.backgroundImageUrl) {
+        setImportantStyles(dev().assertElement(element), {
+          'background-image': `url('${control.backgroundImageUrl}')`,
+        });
+      }
+
+      element[VIEWER_CONTROL_EVENT_NAME] = `amp-story-player-${control.name}`;
+    });
+  }
+
   /**
    * @param {string} pageId The id of the page whose progress should be
    *     changed.
diff --git a/extensions/amp-story/1.0/amp-story-tooltip.css b/extensions/amp-story/1.0/amp-story-tooltip.css
index 22960fe30dcb1..f4086d7145b76 100644
--- a/extensions/amp-story/1.0/amp-story-tooltip.css
+++ b/extensions/amp-story/1.0/amp-story-tooltip.css
@@ -123,7 +123,6 @@
   text-overflow: ellipsis !important;
   overflow: hidden !important;
   white-space: nowrap !important;
-  max-width: 172px !important;
   margin: 0px 5px !important;
   font-family: 'Roboto', sans-serif !important;
   font-size: 14px !important;
@@ -144,6 +143,8 @@
   background-position: center !important;
   background-repeat: no-repeat !important;
   filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.08)) !important;
+  flex-shrink: 0;
+  border-radius: 50% !important;
 }
 
 .i-amphtml-story-tooltip-custom-icon.i-amphtml-hidden {
@@ -155,6 +156,7 @@
   height: 16px !important;
   margin: 0px 5px !important;
   padding-bottom: 2px !important;
+  flex-shrink: 0;
 }
 
 .i-amphtml-tooltip-action-icon-launch {
diff --git a/extensions/amp-story/1.0/amp-story-unsupported-browser-layer.css b/extensions/amp-story/1.0/amp-story-unsupported-browser-layer.css
index fc06bf1c74a34..85c911a7b19f2 100644
--- a/extensions/amp-story/1.0/amp-story-unsupported-browser-layer.css
+++ b/extensions/amp-story/1.0/amp-story-unsupported-browser-layer.css
@@ -16,7 +16,7 @@
 
 .i-amphtml-story-unsupported-browser-overlay {
   position: absolute !important;
-  z-index: 200001 !important; /** no-rotation-overlay + 1 */
+  z-index: 20000001 !important; /** no-rotation-overlay + 1 */
   font-family: 'Roboto', sans-serif;
   font-weight: 700 !important;
   line-height: 1.5;
@@ -74,4 +74,3 @@
   justify-content: center !important;
   text-align: center !important;
 }
-
diff --git a/extensions/amp-story/1.0/amp-story-unsupported-browser-layer.js b/extensions/amp-story/1.0/amp-story-unsupported-browser-layer.js
index b99ce15f77e36..5f330ffe6da32 100644
--- a/extensions/amp-story/1.0/amp-story-unsupported-browser-layer.js
+++ b/extensions/amp-story/1.0/amp-story-unsupported-browser-layer.js
@@ -18,7 +18,7 @@ import {Action, getStoreService} from './amp-story-store-service';
 import {CSS} from '../../../build/amp-story-unsupported-browser-layer-1.0.css';
 import {LocalizedStringId} from '../../../src/localized-strings';
 import {createShadowRootWithStyle} from './utils';
-import {dict} from './../../../src/utils/object';
+import {dict} from './../../../src/core/types/object';
 import {removeElement} from '../../../src/dom';
 import {renderAsElement} from './simple-template';
 
diff --git a/extensions/amp-story/1.0/amp-story-user-overridable.css b/extensions/amp-story/1.0/amp-story-user-overridable.css
index 4137a6769111a..5093afddbd1c5 100644
--- a/extensions/amp-story/1.0/amp-story-user-overridable.css
+++ b/extensions/amp-story/1.0/amp-story-user-overridable.css
@@ -18,7 +18,7 @@ amp-story {
   font-display: optional;
 }
 
-amp-story-grid-layer {
+amp-story-grid-layer:not([aspect-ratio]) {
   overflow: hidden;
 }
 
@@ -56,10 +56,10 @@ amp-story-grid-layer {
   padding: 68px 32px 32px; /* 44 + 24 */
 }
 
-amp-story-grid-layer.i-amphtml-story-has-page-attachment.i-amphtml-story-has-reaction {
+amp-story-grid-layer.i-amphtml-story-has-page-attachment.i-amphtml-story-has-interactive {
   padding-bottom: 104px;
 }
 
-amp-story-grid-layer.i-amphtml-story-has-CTA-layer.i-amphtml-story-has-reaction {
+amp-story-grid-layer.i-amphtml-story-has-CTA-layer.i-amphtml-story-has-interactive {
   padding-bottom: 20%;
 }
diff --git a/extensions/amp-story/1.0/amp-story-vertical.css b/extensions/amp-story/1.0/amp-story-vertical.css
index ab03afde8b98f..7aaf94739846f 100644
--- a/extensions/amp-story/1.0/amp-story-vertical.css
+++ b/extensions/amp-story/1.0/amp-story-vertical.css
@@ -51,7 +51,6 @@ amp-story[i-amphtml-vertical].i-amphtml-element amp-story-page.i-amphtml-element
   display: block !important;
 }
 
-[i-amphtml-vertical] amp-story-bookend,
 [i-amphtml-vertical] amp-story-page-attachment {
   display: block !important;
   position: relative !important;
@@ -62,8 +61,8 @@ amp-story[i-amphtml-vertical].i-amphtml-element amp-story-page.i-amphtml-element
   overflow: visible !important;
 }
 
-[i-amphtml-vertical].i-amphtml-story-bookend-active amp-story-page[active]::after {
-  content: none !important;
+[i-amphtml-vertical] .amp-story-draggable-drawer-root {
+  visibility: visible !important;
 }
 
 [i-amphtml-vertical] .i-amphtml-story-page-description {
diff --git a/extensions/amp-story/1.0/amp-story-viewer-messaging-handler.js b/extensions/amp-story/1.0/amp-story-viewer-messaging-handler.js
index fadfc89c107a4..4d680aa079c0b 100644
--- a/extensions/amp-story/1.0/amp-story-viewer-messaging-handler.js
+++ b/extensions/amp-story/1.0/amp-story-viewer-messaging-handler.js
@@ -20,9 +20,8 @@ import {
   getStoreService,
 } from './amp-story-store-service';
 import {AnalyticsVariable, getVariableService} from './variable-service';
-import {HistoryState, getHistoryState} from './history';
 import {dev, user} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 
 /** @type {string} */
 const TAG = 'amp-story-viewer-messaging-handler';
@@ -30,14 +29,13 @@ const TAG = 'amp-story-viewer-messaging-handler';
 /** @enum {number} */
 const DataSources = {
   STORE_SERVICE: 0,
-  HISTORY: 1,
   VARIABLE_SERVICE: 2,
 };
 
 /**
  * @typedef {{
  *   dataSource: !DataSources,
- *   property: (!StateProperty|!HistoryState|!AnalyticsVariable)
+ *   property: (!StateProperty|!AnalyticsVariable)
  * }}
  */
 let GetStateConfigurationDef;
@@ -57,8 +55,8 @@ const GET_STATE_CONFIGURATIONS = {
     property: StateProperty.MUTED_STATE,
   },
   'PAGE_ATTACHMENT_STATE': {
-    dataSource: DataSources.HISTORY,
-    property: HistoryState.ATTACHMENT_PAGE_ID,
+    dataSource: DataSources.STORE_SERVICE,
+    property: StateProperty.PAGE_ATTACHMENT_STATE,
   },
   'STORY_PROGRESS': {
     dataSource: DataSources.VARIABLE_SERVICE,
@@ -94,9 +92,6 @@ export class AmpStoryViewerMessagingHandler {
 
     /** @private @const {!../../../src/service/viewer-interface.ViewerInterface} */
     this.viewer_ = viewer;
-
-    /** @private @const {!Window} */
-    this.win_ = win;
   }
 
   /**
@@ -112,6 +107,9 @@ export class AmpStoryViewerMessagingHandler {
     this.viewer_.onMessageRespond('setDocumentState', (data) =>
       this.onSetDocumentState_(data)
     );
+    this.viewer_.onMessageRespond('customDocumentUI', (data) =>
+      this.onCustomDocumentUI_(data)
+    );
   }
 
   /**
@@ -140,9 +138,6 @@ export class AmpStoryViewerMessagingHandler {
     let value;
 
     switch (config.dataSource) {
-      case DataSources.HISTORY:
-        value = !!getHistoryState(this.win_, config.property);
-        break;
       case DataSources.STORE_SERVICE:
         value = this.storeService_.get(config.property);
         break;
@@ -201,4 +196,16 @@ export class AmpStoryViewerMessagingHandler {
 
     return Promise.resolve({state, value});
   }
+
+  /**
+   * Handles 'customDocumentUI' viewer messages.
+   * @param {!Object} data
+   * @private
+   */
+  onCustomDocumentUI_(data) {
+    this.storeService_.dispatch(
+      Action.SET_VIEWER_CUSTOM_CONTROLS,
+      data.controls
+    );
+  }
 }
diff --git a/extensions/amp-story/1.0/amp-story-viewport-warning-layer.css b/extensions/amp-story/1.0/amp-story-viewport-warning-layer.css
index fdaf82814d707..f722f7ab07428 100644
--- a/extensions/amp-story/1.0/amp-story-viewport-warning-layer.css
+++ b/extensions/amp-story/1.0/amp-story-viewport-warning-layer.css
@@ -18,7 +18,7 @@
 
 .i-amphtml-story-no-rotation-overlay {
   position: absolute !important;
-  z-index: 200000!important; /** unsupported-browser-overlay - 1 */
+  z-index: 20000000 !important; /** unsupported-browser-overlay - 1 */
   font-family: 'Roboto', sans-serif !important;
   font-size: 20px !important;
   font-weight: 700 !important;
diff --git a/extensions/amp-story/1.0/amp-story-viewport-warning-layer.js b/extensions/amp-story/1.0/amp-story-viewport-warning-layer.js
index 3ef430f3a5731..54e10a63ab54a 100644
--- a/extensions/amp-story/1.0/amp-story-viewport-warning-layer.js
+++ b/extensions/amp-story/1.0/amp-story-viewport-warning-layer.js
@@ -26,7 +26,7 @@ import {createShadowRootWithStyle} from './utils';
 import {getLocalizationService} from './amp-story-localization-service';
 import {htmlFor} from '../../../src/static-template';
 import {listen} from '../../../src/event-helper';
-import {throttle} from '../../../src/utils/rate-limit';
+import {throttle} from '../../../src/core/types/function';
 
 /**
  * CSS class indicating the format is landscape.
diff --git a/extensions/amp-story/1.0/amp-story.css b/extensions/amp-story/1.0/amp-story.css
index 322a3aded6ae8..a15debf28b853 100644
--- a/extensions/amp-story/1.0/amp-story.css
+++ b/extensions/amp-story/1.0/amp-story.css
@@ -180,6 +180,10 @@ amp-story[standalone]:fullscreen {
   max-width: none !important;
 }
 
+amp-story[hide] {
+  display: none !important;
+}
+
 amp-story .amp-video-eq {
   height: 14px !important;;
   width: 14px !important;
@@ -193,7 +197,7 @@ amp-story .amp-video-eq .amp-video-eq-col:last-child {
   margin-right: 0 !important;
 }
 
-amp-story .amp-video-eq:not(.amp-video-eq-play) {
+amp-story .amp-video-eq:not(.amp-video-eq-play), .i-amphtml-story-no-audio-ui .amp-video-eq {
   display: none !important;
 }
 
@@ -279,13 +283,7 @@ amp-story-page [data-text-background-color] {
   -webkit-box-decoration-break: clone !important;
 }
 
-[desktop].i-amphtml-story-bookend-active amp-story-page[active] {
-  filter: blur(3px) !important;
-  transition: filter 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
-}
-
-/* TODO(gmajoulet): move the overlay to the bookend styles. */
-.i-amphtml-story-bookend-active amp-story-page[active]::after {
+.i-amphtml-story-attachment-active amp-story-page[active]::after {
   content: '' !important;
   display: block !important;
   left: 0 !important;
@@ -295,10 +293,10 @@ amp-story-page [data-text-background-color] {
   position: absolute !important;
   background: #000 !important;
   z-index: 2 !important;
-  animation: i-amphtml-bookend-overlay-opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) forwards !important;
+  animation: i-amphtml-drawwer-overlay-opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) forwards !important;
 }
 
-@keyframes i-amphtml-bookend-overlay-opacity {
+@keyframes i-amphtml-drawer-overlay-opacity {
   0% {
     opacity: 0;
   }
@@ -308,6 +306,22 @@ amp-story-page [data-text-background-color] {
   }
 }
 
+/* Overrides for amp-story-page-attachment-ui-v2 experiment. */
+.i-amphtml-story-attachment-active amp-story-page[active]::after {
+  z-index: 3 !important;
+  animation: i-amphtml-attachment-overlay-opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) forwards !important;
+}
+
+@keyframes i-amphtml-attachment-overlay-opacity {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0.5;
+  }
+}
+
 .i-amphtml-story-opacity-mask {
   position: absolute !important;
   top: 0 !important;
@@ -362,6 +376,23 @@ amp-story-grid-layer {
   pointer-events: none !important;
 }
 
+amp-story-grid-layer[anchor*="left"] {
+  margin-left: 0 !important;
+}
+
+amp-story-grid-layer[anchor*="top"] {
+  margin-top: 0 !important;
+}
+
+amp-story-grid-layer[anchor*="bottom"] {
+  margin-bottom: 0 !important;
+}
+
+amp-story-grid-layer[anchor*="right"] {
+  margin-right: 0 !important;
+  margin-left: auto !important;
+}
+
 /**
  * Click shield to make sure click events are never swallowed by videos on
  * Safari iOS 11.2, which would prevent the user from navigating through the
@@ -378,8 +409,8 @@ amp-story-grid-layer {
 }
 
 /**
- * Prevents pre-load placeholders from pushing content offscreen. 
- * Prevents preload placeholders from pushing content offscreen. 
+ * Prevents pre-load placeholders from pushing content offscreen.
+ * Prevents preload placeholders from pushing content offscreen.
  */
 .i-amphtml-story-grid-template-fill amp-img img,
 .i-amphtml-story-grid-template-fill amp-video video {
@@ -468,14 +499,14 @@ amp-story-grid-layer .i-amphtml-embedded-component::after {
   width: var(--i-amphtml-story-layer-width, 100%);
   height: var(--i-amphtml-story-layer-height, 100%);
   font-size: calc(var(--i-amphtml-story-layer-height, 100vh) / 10);
+  margin-left: calc((var(--story-page-vw, 1%) * 100 - var(--i-amphtml-story-layer-width, 100%)) * 0.5); /* Set margin to 1/2 of page-width - layer-width to center layer */
 }
 
 /**
  * Development mode
  */
 
-.i-amphtml-story-dev-logs-button[data-count="0"],
-.i-amphtml-story-bookend-active .i-amphtml-story-dev-logs-button {
+.i-amphtml-story-dev-logs-button[data-count="0"] {
   display: none !important;
 }
 
@@ -656,10 +687,6 @@ amp-story[standalone] .i-amphtml-story-developer-log {
   white-space: nowrap !important;
 }
 
-.i-amphtml-story-button-container {
-  display: none !important;
-}
-
 /* Default loading spinner */
 
 amp-story .amp-video-eq,
@@ -668,7 +695,7 @@ amp-story .amp-video-eq,
   bottom: 12px !important;
 }
 
-[dir=rtl]amp-story .amp-video-eq,
+[dir=rtl] amp-story .amp-video-eq,
 [dir=rtl] .i-amphtml-story-spinner {
   left: 12px !important;
   right: auto !important;
@@ -829,6 +856,7 @@ amp-story .amp-video-eq,
   background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 36 36" fill="rgba(255, 255, 255, 0.8)"><path d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z"/><path d="M0 0h36v36H0z" fill="none"/></svg>') !important;
   cursor: pointer !important;
   text-align: center !important;
+  background-color: transparent !important; /* Resets default button background-color. */
 }
 
 @keyframes play-button-fly-in {
@@ -873,43 +901,109 @@ amp-story .amp-video-eq,
   background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 48 48" fill="#FFF"><path d="M0 0h48v48H0z" fill="none"/><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>') !important;
 }
 
-.i-amphtml-story-reaction-component {
+.i-amphtml-story-interactive-component {
   align-self: center;
-  width: auto !important;
   height: auto !important;
-  /* 224px = the width of a narrow phone (320px) - tap-safe margins (48px * 2) */
-  min-width: 224px !important;
-  max-width: 400px !important;
+  pointer-events: none !important;
+  min-width: 14em !important; /* 14em = 224px = the width of a narrow phone (320px) - tap-safe margins (48px * 2) */
+  max-width: 25em !important;
+  font-size: calc(var(--story-page-vmin) * 3); /* override with ems for pixel perfect layout */
+  width: 100%;
   /* Properties overrideable by user */
-  --reaction-accent-color: #005AF0;
-  --reaction-background-color: white;
-  /* Shared properties by components */
-  --reaction-prompt-text-color: white !important;
-  --reaction-option-text-color: #5F6368 !important;
-  --reaction-theme-border: #DADCE0 !important;
-  --reaction-theme-shading: #ECEDEF !important;
-  --reaction-chip-radius: 32px !important;
-  --reaction-chip-shadow: none !important;
-  --reaction-answer-choice-border: var(--reaction-accent-color) !important;
-  --reaction-answer-choice-background: white !important;
-}
-
-.i-amphtml-story-reaction-component[theme="dark"] {
-  --reaction-option-text-color: white !important;
-  --reaction-background-color: #202124;
-  --reaction-theme-border: #3C4043 !important;
-  --reaction-theme-shading: #3C4043 !important;
-}
-
-.i-amphtml-story-reaction-component[chip-corner="sharp"] {
-  --reaction-chip-radius: 8px !important;
-}
-
-.i-amphtml-story-reaction-component[chip-style="shadow"] {
-  --reaction-chip-shadow: 0px 2px 8px rgba(60, 60, 60, 0.12) !important;
-  --reaction-theme-border: rgba(0, 0, 0, 0) !important;
-}
-
-.i-amphtml-story-reaction-component[chip-style="shadow"][theme="dark"] {
-  --reaction-chip-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3) !important;
+  --interactive-accent-color: #005AF0;
+  --interactive-prompt-background: var(--interactive-accent-color);
+  --interactive-prompt-text-color: white;
+  --interactive-prompt-alignment: initial;
+  /* Shared properties by interactives (overrideable by themes) */
+  --i-amphtml-interactive-option-accent-color: var(--interactive-accent-color) !important;
+  --i-amphtml-interactive-option-background-color: white !important;
+  --i-amphtml-interactive-options-chip-background-color: var(--i-amphtml-interactive-option-background-color) !important;
+  --i-amphtml-interactive-option-text-color: #55595E !important;
+  --i-amphtml-interactive-theme-border: rgba(85, 89, 94, 0.2) !important;
+  --i-amphtml-interactive-theme-shading: rgba(85, 89, 94, 0.2) !important;
+  --i-amphtml-interactive-theme-shading-base: rgb(222, 222, 225) !important;
+  --i-amphtml-interactive-theme-shading-flash: rgba(85, 89, 94, 0.5) !important;
+  --i-amphtml-interactive-chip-radius: 2em !important;
+  --i-amphtml-interactive-chip-shadow: 0px 0px 0px transparent !important;
+  --i-amphtml-interactive-chip-shadow-inset: inset 0px 0px 0px transparent !important;
+  --i-amphtml-interactive-answer-choice-border: var(--interactive-accent-color) !important;
+  --i-amphtml-interactive-answer-choice-background: white !important;
+  --i-amphtml-interactive-prompt-text-size: 1.375em !important;
+  --i-amphtml-interactive-prompt-line-height: 1.3em !important;
+  --i-amphtml-interactive-strong-text-color: black !important;
+  --i-amphtml-interactive-animation-time: .3s !important;
+  --i-amphtml-interactive-ease-out-curve: cubic-bezier(.3, 0, 0, 1) !important;
+  --i-amphtml-interactive-animation-delay: 0s !important;
+  --i-amphtml-interactive-component-shadow: 0px 4px 12px rgba(60, 64, 67, 0.08), 0px 2px 4px rgba(60, 64, 67, 0.12);
+  --i-amphtml-interactive-prompt-clamp: 4 !important;
+  --i-amphtml-interactive-results-prompt-margin: 20px !important;
+}
+
+.i-amphtml-story-interactive-component[theme="dark"] {
+  --i-amphtml-interactive-option-text-color: #A7ADB4 !important;
+  --i-amphtml-interactive-option-background-color: #202124 !important;
+  --i-amphtml-interactive-theme-border: rgba(167, 173, 180, 0.2) !important;
+  --i-amphtml-interactive-theme-shading: rgba(167, 173, 180, 0.2) !important;
+  --i-amphtml-interactive-theme-shading-base: rgb(60, 61, 63) !important;
+  --i-amphtml-interactive-theme-shading-flash: rgba(167, 173, 180, 0.5) !important;
+  --i-amphtml-interactive-strong-text-color: white !important;
+}
+
+.i-amphtml-story-interactive-component[chip-style="shadow"] {
+  --i-amphtml-interactive-chip-shadow: 0px 2px 8px rgba(60, 60, 60, 0.2) !important;
+  --i-amphtml-interactive-chip-shadow-inset: inset 4px 4px 8px rgba(0, 0, 0, 0.2) !important;
+  --i-amphtml-interactive-theme-border: rgba(0, 0, 0, 0) !important;
+}
+
+.i-amphtml-story-interactive-component:not(amp-story-interactive-results)[chip-style="transparent"] {
+  --i-amphtml-interactive-options-chip-background-color: transparent !important;
+  --interactive-prompt-background: transparent !important;
+  --interactive-prompt-alignment: center;
+  --i-amphtml-interactive-chip-shadow: 0px 2px 8px rgba(60, 60, 60, 0.2) !important;
+  --i-amphtml-interactive-chip-shadow-inset: inset 4px 4px 8px rgba(0, 0, 0, 0.2) !important;
+  --i-amphtml-interactive-theme-border: rgba(0, 0, 0, 0) !important;
+  --i-amphtml-interactive-component-shadow: none !important;
+}
+
+.i-amphtml-story-interactive-component[chip-style="shadow"][theme="dark"] {
+  --i-amphtml-interactive-chip-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.6) !important;
+  --i-amphtml-interactive-chip-shadow-inset: inset 4px 4px 8px rgba(0, 0, 0, 0.4) !important;
+}
+
+.i-amphtml-story-interactive-component[prompt-size="large"] {
+  --i-amphtml-interactive-prompt-text-size: 1.75em !important;
+  --i-amphtml-interactive-prompt-clamp: 3 !important;
+}
+
+.i-amphtml-story-interactive-component[prompt-size="small"] {
+  --i-amphtml-interactive-prompt-text-size: 1.125em !important;
+}
+
+amp-story-interactive-binary-poll.i-amphtml-story-interactive-component, amp-story-interactive-results.i-amphtml-story-interactive-component {
+  max-width: 18em !important;
+}
+
+amp-story-interactive-binary-poll[theme="dark"], amp-story-interactive-poll[theme="dark"] {
+  --i-amphtml-interactive-option-accent-color: white !important;
+}
+
+amp-story-interactive-results:not([chip-style="transparent"]) {
+  --interactive-prompt-text-color: var(--i-amphtml-interactive-strong-text-color);
+}
+
+amp-story-interactive-results[chip-style="transparent"] {
+  --i-amphtml-interactive-option-text-color: black !important;
+  --i-amphtml-interactive-options-chip-background-color: transparent !important;
+  --interactive-prompt-background: transparent;
+  --i-amphtml-interactive-component-shadow: none !important;
+  --interactive-prompt-text-color: black;
+  --i-amphtml-interactive-results-prompt-margin: 0px !important;
+}
+amp-story-interactive-results[theme="dark"][chip-style="transparent"] {
+  --i-amphtml-interactive-option-text-color: white !important;
+  --interactive-prompt-text-color: white;
+}
+
+amp-story-page.i-amphtml-story-desktop-panels .i-amphtml-story-interactive-component {
+  --i-amphtml-interactive-animation-delay: 350ms !important;
 }
diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js
index 398addc71e85f..1dbde93d8bef5 100644
--- a/extensions/amp-story/1.0/amp-story.js
+++ b/extensions/amp-story/1.0/amp-story.js
@@ -35,16 +35,15 @@ import {
   UIType,
   getStoreService,
 } from './amp-story-store-service';
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {AdvancementConfig, TapNavigationDirection} from './page-advancement';
 import {
   AdvancementMode,
   StoryAnalyticsEvent,
   getAnalyticsService,
 } from './story-analytics';
-import {AmpEvents} from '../../../src/amp-events';
+import {AmpEvents} from '../../../src/core/constants/amp-events';
 import {AmpStoryAccess} from './amp-story-access';
-import {AmpStoryBookend} from './bookend/amp-story-bookend';
 import {AmpStoryConsent} from './amp-story-consent';
 import {AmpStoryCtaLayer} from './amp-story-cta-layer';
 import {AmpStoryEmbeddedComponent} from './amp-story-embedded-component';
@@ -52,18 +51,16 @@ import {AmpStoryGridLayer} from './amp-story-grid-layer';
 import {AmpStoryHint} from './amp-story-hint';
 import {AmpStoryPage, NavigationDirection, PageState} from './amp-story-page';
 import {AmpStoryPageAttachment} from './amp-story-page-attachment';
-import {AmpStoryReactionPoll} from './amp-story-reaction-poll';
-import {AmpStoryReactionQuiz} from './amp-story-reaction-quiz';
 import {AmpStoryRenderService} from './amp-story-render-service';
 import {AmpStoryViewerMessagingHandler} from './amp-story-viewer-messaging-handler';
 import {AnalyticsVariable, getVariableService} from './variable-service';
 import {CSS} from '../../../build/amp-story-1.0.css';
-import {CommonSignals} from '../../../src/common-signals';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
 import {EventType, dispatch} from './events';
 import {Gestures} from '../../../src/gesture';
 import {HistoryState, getHistoryState, setHistoryState} from './history';
 import {InfoDialog} from './amp-story-info-dialog';
-import {Keys} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/core/constants/key-codes';
 import {Layout} from '../../../src/layout';
 import {LiveStoryManager} from './live-story-manager';
 import {MediaPool, MediaType} from './media-pool';
@@ -74,68 +71,65 @@ import {SwipeXYRecognizer} from '../../../src/gesture-recognizers';
 import {SystemLayer} from './amp-story-system-layer';
 import {UnsupportedBrowserLayer} from './amp-story-unsupported-browser-layer';
 import {ViewportWarningLayer} from './amp-story-viewport-warning-layer';
+import {VisibilityState} from '../../../src/core/constants/visibility-state';
 import {
   childElement,
   childElementByTag,
   childElements,
   childNodes,
   closest,
-  createElementWithAttributes,
   isRTL,
+  matches,
   scopedQuerySelector,
   scopedQuerySelectorAll,
   whenUpgradedToCustomElement,
 } from '../../../src/dom';
-import {
-  computedStyle,
-  resetStyles,
-  setImportantStyles,
-  toggle,
-} from '../../../src/style';
+import {computedStyle, setImportantStyles, toggle} from '../../../src/style';
 import {createPseudoLocale} from '../../../src/localized-strings';
-import {debounce} from '../../../src/utils/rate-limit';
+import {debounce} from '../../../src/core/types/function';
 import {dev, devAssert, user} from '../../../src/log';
-import {dict, map} from '../../../src/utils/object';
-import {endsWith} from '../../../src/string';
-import {escapeCssSelectorIdent} from '../../../src/css';
-import {findIndex, lastItem} from '../../../src/utils/array';
+import {dict, map} from '../../../src/core/types/object';
+import {endsWith} from '../../../src/core/types/string';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
+import {findIndex, lastItem, toArray} from '../../../src/core/types/array';
 import {getConsentPolicyState} from '../../../src/consent';
 import {getDetail} from '../../../src/event-helper';
 import {getLocalizationService} from './amp-story-localization-service';
 import {getMediaQueryService} from './amp-story-media-query-service';
-import {getMode} from '../../../src/mode';
+import {getMode, isModeDevelopment} from '../../../src/mode';
 import {getState} from '../../../src/history';
 import {isExperimentOn} from '../../../src/experiments';
-import {parseQueryString} from '../../../src/url';
+import {isPageAttachmentUiV2ExperimentOn} from './amp-story-page-attachment-ui-v2';
+import {parseQueryString} from '../../../src/core/types/string/url';
 import {
   removeAttributeInMutate,
   setAttributeInMutate,
   shouldShowStoryUrlInfo,
 } from './utils';
-import {toArray} from '../../../src/types';
+
 import {upgradeBackgroundAudio} from './audio';
-import LocalizedStringsAr from './_locales/ar';
-import LocalizedStringsDe from './_locales/de';
-import LocalizedStringsDefault from './_locales/default';
-import LocalizedStringsEn from './_locales/en';
-import LocalizedStringsEnGb from './_locales/en-GB';
-import LocalizedStringsEs from './_locales/es';
-import LocalizedStringsEs419 from './_locales/es-419';
-import LocalizedStringsFr from './_locales/fr';
-import LocalizedStringsHi from './_locales/hi';
-import LocalizedStringsId from './_locales/id';
-import LocalizedStringsIt from './_locales/it';
-import LocalizedStringsJa from './_locales/ja';
-import LocalizedStringsKo from './_locales/ko';
-import LocalizedStringsNl from './_locales/nl';
-import LocalizedStringsNo from './_locales/no';
-import LocalizedStringsPtBr from './_locales/pt-BR';
-import LocalizedStringsPtPt from './_locales/pt-PT';
-import LocalizedStringsRu from './_locales/ru';
-import LocalizedStringsTr from './_locales/tr';
-import LocalizedStringsVi from './_locales/vi';
-import LocalizedStringsZhCn from './_locales/zh-CN';
-import LocalizedStringsZhTw from './_locales/zh-TW';
+import LocalizedStringsAr from './_locales/ar.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsDe from './_locales/de.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsDefault from './_locales/default.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsEn from './_locales/en.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsEnGb from './_locales/en-GB.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsEs from './_locales/es.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsEs419 from './_locales/es-419.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsFr from './_locales/fr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsHi from './_locales/hi.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsId from './_locales/id.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsIt from './_locales/it.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsJa from './_locales/ja.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsKo from './_locales/ko.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsNl from './_locales/nl.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsNo from './_locales/no.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsPtBr from './_locales/pt-BR.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsPtPt from './_locales/pt-PT.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsRu from './_locales/ru.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsTr from './_locales/tr.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsVi from './_locales/vi.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsZhCn from './_locales/zh-CN.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import LocalizedStringsZhTw from './_locales/zh-TW.json' assert {type: 'json'}; // lgtm[js/syntax-error]
 
 /** @private @const {number} */
 const DESKTOP_WIDTH_THRESHOLD = 1024;
@@ -164,11 +158,11 @@ const Attributes = {
 };
 
 /**
- * The duration of time (in milliseconds) to wait for a page to be loaded,
- * before the story becomes visible.
+ * The duration of time (in milliseconds) to wait for the Story initial content
+ * to be loaded before marking the story as loaded.
  * @const {number}
  */
-const PAGE_LOAD_TIMEOUT_MS = 5000;
+const INITIAL_CONTENT_LOAD_TIMEOUT_MS = 8000;
 
 /**
  * Single page ads may be injected later. If the original story contains 0 media
@@ -207,14 +201,6 @@ const MAX_MEDIA_ELEMENT_COUNTS = {
 /** @type {string} */
 const TAG = 'amp-story';
 
-/**
- * Selector for elements that should be hidden when the bookend is open on
- * desktop view.
- * @private @const {string}
- */
-const HIDE_ON_BOOKEND_SELECTOR =
-  'amp-story-page, .i-amphtml-story-system-layer';
-
 /**
  * The default dark gray for chrome supported theme color.
  * @const {string}
@@ -233,6 +219,11 @@ const SIDEBAR_OBSERVER_OPTIONS = {
  * @implements {./media-pool.MediaPoolRoot}
  */
 export class AmpStory extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -255,9 +246,6 @@ export class AmpStory extends AMP.BaseElement {
     /** @const @private {!../../../src/service/vsync-impl.Vsync} */
     this.vsync_ = this.getVsync();
 
-    /** @private {?AmpStoryBookend} */
-    this.bookend_ = null;
-
     /** @private @const {!ShareMenu} Preloads and prerenders the share menu. */
     this.shareMenu_ = new ShareMenu(this.win, this.element);
 
@@ -310,9 +298,6 @@ export class AmpStory extends AMP.BaseElement {
     /** @private {?HTMLMediaElement} */
     this.backgroundAudioEl_ = null;
 
-    /** @private {?./pagination-buttons.PaginationButtons} */
-    this.paginationButtons_ = null;
-
     /** @private {!AmpStoryHint} */
     this.ampStoryHint_ = new AmpStoryHint(this.win, this.element);
 
@@ -331,20 +316,21 @@ export class AmpStory extends AMP.BaseElement {
     /** @private @const {!../../../src/service/platform-impl.Platform} */
     this.platform_ = Services.platformFor(this.win);
 
-    /** @private @const {!../../../src/service/viewer-interface.ViewerInterface} */
-    this.viewer_ = Services.viewerForDoc(this.element);
+    /** @private {?../../../src/service/viewer-interface.ViewerInterface} */
+    this.viewer_ = null;
 
-    /** @private @const {?AmpStoryViewerMessagingHandler} */
-    this.viewerMessagingHandler_ = this.viewer_.isEmbedded()
-      ? new AmpStoryViewerMessagingHandler(this.win, this.viewer_)
-      : null;
+    /** @private {?AmpStoryViewerMessagingHandler} */
+    this.viewerMessagingHandler_ = null;
+
+    /** @private {?../../../src/service/localization.LocalizationService} */
+    this.localizationService_ = null;
 
     /**
      * Store the current paused state, to make sure the story does not play on
-     * resume if it was previously paused.
-     * @private {boolean}
+     * resume if it was previously paused. null when nothing to restore.
+     * @private {?boolean}
      */
-    this.pausedStateToRestore_ = false;
+    this.pausedStateToRestore_ = null;
 
     /** @private {?Element} */
     this.sidebar_ = null;
@@ -357,8 +343,16 @@ export class AmpStory extends AMP.BaseElement {
 
     /** @private {?LiveStoryManager} */
     this.liveStoryManager_ = null;
+  }
+
+  /** @override */
+  buildCallback() {
+    this.viewer_ = Services.viewerForDoc(this.element);
+
+    this.viewerMessagingHandler_ = this.viewer_.isEmbedded()
+      ? new AmpStoryViewerMessagingHandler(this.win, this.viewer_)
+      : null;
 
-    /** @private @const {!../../../src/service/localization.LocalizationService} */
     this.localizationService_ = getLocalizationService(this.element);
 
     this.localizationService_
@@ -393,10 +387,7 @@ export class AmpStory extends AMP.BaseElement {
       'en-xa',
       enXaPseudoLocaleBundle
     );
-  }
 
-  /** @override */
-  buildCallback() {
     if (this.isStandalone_()) {
       this.initializeStandaloneStory_();
     }
@@ -408,8 +399,13 @@ export class AmpStory extends AMP.BaseElement {
     // prerendering, because of a height incorrectly set to 0.
     this.mutateElement(() => {});
 
-    const pageEl = this.element.querySelector('amp-story-page');
-    pageEl && pageEl.setAttribute('active', '');
+    const pageId = this.getInitialPageId_();
+    if (pageId) {
+      const page = this.element.querySelector(
+        `amp-story-page#${escapeCssSelectorIdent(pageId)}`
+      );
+      page.setAttribute('active', '');
+    }
 
     this.initializeStyles_();
     this.initializeListeners_();
@@ -419,11 +415,6 @@ export class AmpStory extends AMP.BaseElement {
 
     this.storeService_.dispatch(Action.TOGGLE_UI, this.getUIType_());
 
-    // Disables the bookend entirely if the story is within a group of stories.
-    if (this.viewer_.hasCapability('swipe')) {
-      this.storeService_.dispatch(Action.TOGGLE_CAN_SHOW_BOOKEND, false);
-    }
-
     // Removes title in order to prevent incorrect titles appearing on link
     // hover. (See 17654)
     if (!this.platform_.isBot()) {
@@ -458,7 +449,10 @@ export class AmpStory extends AMP.BaseElement {
         );
       });
     }
-    this.element.setAttribute('aria-live', 'polite');
+
+    if (this.maybeLoadStoryDevTools_()) {
+      return;
+    }
   }
 
   /**
@@ -467,10 +461,22 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   pause_() {
-    this.pausedStateToRestore_ = !!this.storeService_.get(
-      StateProperty.PAUSED_STATE
-    );
+    // Preserve if previously set. This method can be called several times when
+    // setting the visibilitystate to paused and then inactive.
+    if (this.pausedStateToRestore_ === null) {
+      this.pausedStateToRestore_ = !!this.storeService_.get(
+        StateProperty.PAUSED_STATE
+      );
+    }
     this.storeService_.dispatch(Action.TOGGLE_PAUSED, true);
+    if (!this.storeService_.get(StateProperty.MUTED_STATE)) {
+      this.pauseBackgroundAudio_();
+    }
+    // If viewer has navigated to the next document, reset the active page.
+    if (this.getAmpDoc().getVisibilityState() === VisibilityState.INACTIVE) {
+      this.activePage_.setState(PageState.NOT_ACTIVE);
+      this.activePage_.element.setAttribute('active', '');
+    }
   }
 
   /**
@@ -483,6 +489,10 @@ export class AmpStory extends AMP.BaseElement {
       Action.TOGGLE_PAUSED,
       this.pausedStateToRestore_
     );
+    this.pausedStateToRestore_ = null;
+    if (!this.storeService_.get(StateProperty.MUTED_STATE)) {
+      this.playBackgroundAudio_();
+    }
   }
 
   /**
@@ -545,10 +555,7 @@ export class AmpStory extends AMP.BaseElement {
    */
   initializePageIds_() {
     const pageEls = this.element.querySelectorAll('amp-story-page');
-    const pageIds = Array.prototype.map.call(
-      pageEls,
-      (el) => el.id || 'default-page'
-    );
+    const pageIds = toArray(pageEls).map((el) => el.id || 'default-page');
     const idsMap = map();
     for (let i = 0; i < pageIds.length; i++) {
       if (idsMap[pageIds[i]] === undefined) {
@@ -568,10 +575,6 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   rewriteStyles_(styleEl) {
-    if (!isExperimentOn(this.win, 'amp-story-responsive-units')) {
-      return;
-    }
-
     // TODO(#15955): Update this to use CssContext from
     // ../../../extensions/amp-animation/0.1/web-animations.js
     this.mutateElement(() => {
@@ -669,12 +672,15 @@ export class AmpStory extends AMP.BaseElement {
       );
     });
 
-    this.element.addEventListener(EventType.SWITCH_PAGE, (e) => {
-      if (this.storeService_.get(StateProperty.BOOKEND_STATE)) {
-        // Disallow switching pages while the bookend is active.
-        return;
-      }
+    this.storeService_.subscribe(
+      StateProperty.CAN_SHOW_AUDIO_UI,
+      (show) => {
+        this.element.classList.toggle('i-amphtml-story-no-audio-ui', !show);
+      },
+      true /** callToInitialize */
+    );
 
+    this.element.addEventListener(EventType.SWITCH_PAGE, (e) => {
       this.switchTo_(getDetail(e)['targetPageId'], getDetail(e)['direction']);
       this.ampStoryHint_.hideAllNavigationHint();
     });
@@ -735,9 +741,14 @@ export class AmpStory extends AMP.BaseElement {
       this.onAdStateUpdate_(isAd);
     });
 
-    this.storeService_.subscribe(StateProperty.BOOKEND_STATE, (isActive) => {
-      this.onBookendStateUpdate_(isActive);
-    });
+    if (isPageAttachmentUiV2ExperimentOn(this.win)) {
+      this.storeService_.subscribe(
+        StateProperty.PAGE_ATTACHMENT_STATE,
+        (isActive) => {
+          this.onAttachmentStateUpdate_(isActive);
+        }
+      );
+    }
 
     this.storeService_.subscribe(StateProperty.PAUSED_STATE, (isPaused) => {
       this.onPausedStateUpdate_(isPaused);
@@ -769,7 +780,9 @@ export class AmpStory extends AMP.BaseElement {
     this.win.document.addEventListener('contextmenu', (e) => {
       const uiState = this.storeService_.get(StateProperty.UI_STATE);
       if (uiState === UIType.MOBILE) {
-        e.preventDefault();
+        if (!this.allowContextMenuOnMobile_(e.target)) {
+          e.preventDefault();
+        }
         e.stopPropagation();
       }
     });
@@ -797,6 +810,15 @@ export class AmpStory extends AMP.BaseElement {
       );
     });
 
+    // Listen for class mutations on the <body> element.
+    const bodyElObserver = new this.win.MutationObserver((mutations) =>
+      this.onBodyElMutation_(mutations)
+    );
+    bodyElObserver.observe(this.win.document.body, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+
     this.getViewport().onResize(debounce(this.win, () => this.onResize(), 300));
     this.installGestureRecognizers_();
 
@@ -804,12 +826,26 @@ export class AmpStory extends AMP.BaseElement {
     // there is a way to navigate to pages that does not involve using private
     // amp-story methods.
     this.viewer_.onMessage('selectPage', (data) => this.onSelectPage_(data));
+    this.viewer_.onMessage('rewind', () => this.onRewind_());
 
     if (this.viewerMessagingHandler_) {
       this.viewerMessagingHandler_.startListening();
     }
   }
 
+  /** @private */
+  onBodyElMutation_(mutations) {
+    mutations.forEach((mutation) => {
+      const bodyEl = dev().assertElement(mutation.target);
+
+      // Updates presence of the `amp-mode-keyboard-active` class on the store.
+      this.storeService_.dispatch(
+        Action.TOGGLE_KEYBOARD_ACTIVE_STATE,
+        bodyEl.classList.contains('amp-mode-keyboard-active')
+      );
+    });
+  }
+
   /** @private */
   installGestureRecognizers_() {
     // If the story is within a viewer that enabled the swipe capability, this
@@ -826,12 +862,11 @@ export class AmpStory extends AMP.BaseElement {
     // Shows "tap to navigate" hint when swiping.
     gestures.onGesture(SwipeXYRecognizer, (gesture) => {
       const {deltaX, deltaY} = gesture.data;
-      const embedComponent = /** @type {InteractiveComponentDef} */ (this.storeService_.get(
-        StateProperty.INTERACTIVE_COMPONENT_STATE
-      ));
+      const embedComponent = /** @type {InteractiveComponentDef} */ (
+        this.storeService_.get(StateProperty.INTERACTIVE_COMPONENT_STATE)
+      );
       // TODO(enriqe): Move to a separate file if this keeps growing.
       if (
-        this.storeService_.get(StateProperty.BOOKEND_STATE) ||
         embedComponent.state !== EmbeddedComponentState.HIDDEN ||
         this.storeService_.get(StateProperty.ACCESS_STATE) ||
         this.storeService_.get(StateProperty.SIDEBAR_STATE) ||
@@ -914,28 +949,6 @@ export class AmpStory extends AMP.BaseElement {
     }
   }
 
-  /** @private */
-  buildPaginationButtons_() {
-    if (
-      this.paginationButtons_ ||
-      !this.storeService_.get(StateProperty.CAN_SHOW_PAGINATION_BUTTONS)
-    ) {
-      return;
-    }
-
-    // TODO(#19768): Avoid passing a private function here.
-    this.paginationButtons_ = PaginationButtons.create(this, () =>
-      this.hasBookend_()
-    );
-
-    this.paginationButtons_.attach(this.element);
-  }
-
-  /** @visibleForTesting */
-  buildPaginationButtonsForTesting() {
-    this.buildPaginationButtons_();
-  }
-
   /** @override */
   layoutCallback() {
     if (!AmpStory.isBrowserSupported(this.win) && !this.platform_.isBot()) {
@@ -952,11 +965,7 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   layoutStory_() {
-    const firstPageEl = user().assertElement(
-      this.element.querySelector('amp-story-page'),
-      'Story must have at least one page.'
-    );
-    const initialPageId = this.getInitialPageId_(firstPageEl);
+    const initialPageId = this.getInitialPageId_();
 
     this.buildSystemLayer_(initialPageId);
     this.initializeSidebar_();
@@ -975,22 +984,17 @@ export class AmpStory extends AMP.BaseElement {
           this.upgradeCtaAnchorTagsForTracking_(page, index);
         });
         this.initializeStoryNavigationPath_();
-      })
-      .then(() => this.initializeBookend_())
-      .then(() => {
-        const bookendInHistory = !!getHistoryState(
-          this.win,
-          HistoryState.BOOKEND_ACTIVE
-        );
-        if (bookendInHistory) {
-          return this.hasBookend_().then((hasBookend) => {
-            if (hasBookend) {
-              return this.showBookend_();
-            }
-          });
+
+        // Build pagination buttons if they can be displayed.
+        if (this.storeService_.get(StateProperty.CAN_SHOW_PAGINATION_BUTTONS)) {
+          new PaginationButtons(this);
         }
       })
-      .then(() => this.switchTo_(initialPageId, NavigationDirection.NEXT))
+      .then(() =>
+        // We need to call this.getInitialPageId_() again because the initial
+        // page could've changed between the start of layoutStory_ and here.
+        this.switchTo_(this.getInitialPageId_(), NavigationDirection.NEXT)
+      )
       .then(() => {
         const shouldReOpenAttachmentForPageId = getHistoryState(
           this.win,
@@ -1004,7 +1008,7 @@ export class AmpStory extends AMP.BaseElement {
         // Preloads and prerenders the share menu.
         this.shareMenu_.build();
 
-        const infoDialog = shouldShowStoryUrlInfo(this.viewer_)
+        const infoDialog = shouldShowStoryUrlInfo(devAssert(this.viewer_))
           ? new InfoDialog(this.win, this.element)
           : null;
         if (infoDialog) {
@@ -1015,7 +1019,9 @@ export class AmpStory extends AMP.BaseElement {
     // Do not block the layout callback on the completion of these promises, as
     // that prevents descendents from being laid out (and therefore loaded).
     storyLayoutPromise
-      .then(() => this.whenPagesLoaded_(PAGE_LOAD_TIMEOUT_MS))
+      .then(() =>
+        this.whenInitialContentLoaded_(INITIAL_CONTENT_LOAD_TIMEOUT_MS)
+      )
       .then(() => {
         this.markStoryAsLoaded_();
         this.initializeLiveStory_();
@@ -1023,12 +1029,15 @@ export class AmpStory extends AMP.BaseElement {
 
     this.maybeLoadStoryEducation_();
 
-    // Story is being prerendered: resolve the layoutCallback when the first
+    // Story is being prerendered: resolve the layoutCallback when the active
     // page is built. Other pages will only build if the document becomes
     // visible.
+    const initialPageEl = this.element.querySelector(
+      `amp-story-page#${escapeCssSelectorIdent(initialPageId)}`
+    );
     if (!this.getAmpDoc().hasBeenVisible()) {
-      return whenUpgradedToCustomElement(firstPageEl).then(() => {
-        return firstPageEl.whenBuilt();
+      return whenUpgradedToCustomElement(initialPageEl).then(() => {
+        return initialPageEl.build();
       });
     }
 
@@ -1068,26 +1077,25 @@ export class AmpStory extends AMP.BaseElement {
    * Retrieves the initial pageId to begin the story with. In order, the
    * initial page for a story should be either a valid page ID in the URL
    * fragment, the page ID in the history, or the first page of the story.
-   * @param {!Element} firstPageEl
-   * @return {string}
+   * @return {?string}
    * @private
    */
-  getInitialPageId_(firstPageEl) {
+  getInitialPageId_() {
     const maybePageId = parseQueryString(this.win.location.hash)['page'];
     if (maybePageId && this.isActualPage_(maybePageId)) {
       return maybePageId;
     }
 
-    const pages = /**  @type {!Array} */ (getHistoryState(
-      this.win,
-      HistoryState.NAVIGATION_PATH
-    ) || []);
+    const pages = /**  @type {!Array} */ (
+      getHistoryState(this.win, HistoryState.NAVIGATION_PATH) || []
+    );
     const historyPage = lastItem(pages);
     if (historyPage && this.isActualPage_(historyPage)) {
       return historyPage;
     }
 
-    return firstPageEl.id;
+    const firstPageEl = this.element.querySelector('amp-story-page');
+    return firstPageEl ? firstPageEl.id : null;
   }
 
   /**
@@ -1098,19 +1106,20 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   isActualPage_(pageId) {
-    // TODO(gmajoulet): check from the cached pages array if available, and use
-    // the querySelector as a fallback.
+    if (this.pages_.length > 0) {
+      return this.pages_.some((page) => page.element.id === pageId);
+    }
     return !!this.element.querySelector(`#${escapeCssSelectorIdent(pageId)}`);
   }
 
   /**
    * @param {number} timeoutMs The maximum amount of time to wait, in
    *     milliseconds.
-   * @return {!Promise} A promise that is resolved when the page is loaded or
-   *     the timeout has been exceeded, whichever happens first.
+   * @return {!Promise} A promise that is resolved when the initial content is
+   *     loaded or the timeout has been exceeded, whichever happens first.
    * @private
    */
-  whenPagesLoaded_(timeoutMs = 0) {
+  whenInitialContentLoaded_(timeoutMs = 0) {
     const pagesToWaitFor =
       this.storeService_.get(StateProperty.UI_STATE) === UIType.DESKTOP_PANELS
         ? [this.pages_[0], this.pages_[1]]
@@ -1118,7 +1127,7 @@ export class AmpStory extends AMP.BaseElement {
 
     const storyLoadPromise = Promise.all(
       pagesToWaitFor
-        .filter((page) => !!page)
+        .filter(Boolean)
         .map((page) =>
           page.element.signals().whenSignal(CommonSignals.LOAD_END)
         )
@@ -1138,6 +1147,11 @@ export class AmpStory extends AMP.BaseElement {
       /* payload */ undefined,
       {bubbles: true}
     );
+    this.viewerMessagingHandler_ &&
+      this.viewerMessagingHandler_.send('storyContentLoaded', dict({}));
+    this.analyticsService_.triggerEvent(
+      StoryAnalyticsEvent.STORY_CONTENT_LOADED
+    );
     this.signals().signal(CommonSignals.INI_LOAD);
     this.mutateElement(() => {
       this.element.classList.add(STORY_LOADED_CLASS_NAME);
@@ -1209,7 +1223,8 @@ export class AmpStory extends AMP.BaseElement {
         return;
       }
 
-      this.areAccessAuthorizationsCompleted_ = accessService.areFirstAuthorizationsCompleted();
+      this.areAccessAuthorizationsCompleted_ =
+        accessService.areFirstAuthorizationsCompleted();
       accessService.onApplyAuthorizations(() =>
         this.onAccessApplyAuthorizations_()
       );
@@ -1261,11 +1276,6 @@ export class AmpStory extends AMP.BaseElement {
     return layout == Layout.CONTAINER;
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @private */
   initializePages_() {
     const pageImplPromises = Array.prototype.map.call(
@@ -1327,12 +1337,6 @@ export class AmpStory extends AMP.BaseElement {
       );
       return;
     }
-
-    this.hasBookend_().then((hasBookend) => {
-      if (hasBookend) {
-        this.showBookend_();
-      }
-    });
   }
 
   /**
@@ -1514,19 +1518,12 @@ export class AmpStory extends AMP.BaseElement {
         if (!oldPage) {
           this.registerAndPreloadBackgroundAudio_();
         }
-
-        if (!this.storeService_.get(StateProperty.MUTED_STATE)) {
-          oldPage && oldPage.muteAllMedia();
-          this.activePage_.unmuteAllMedia();
-        }
       },
       // Third and last step contains all the actions that can be delayed after
       // the navigation happened, like preloading the following pages, or
       // sending analytics events.
       () => {
         this.preloadPagesByDistance_();
-        this.maybePreloadBookend_();
-
         this.triggerActiveEventForPage_();
 
         this.systemLayer_.resetDeveloperLogs();
@@ -1560,9 +1557,9 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   updateNavigationPath_(targetPageId, direction) {
-    const navigationPath = /** @type {!Array<string>} */ (this.storeService_.get(
-      StateProperty.NAVIGATION_PATH
-    ));
+    const navigationPath = /** @type {!Array<string>} */ (
+      this.storeService_.get(StateProperty.NAVIGATION_PATH)
+    );
 
     if (direction === NavigationDirection.PREVIOUS) {
       navigationPath.pop();
@@ -1692,10 +1689,6 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   onKeyDown_(e) {
-    if (this.storeService_.get(StateProperty.BOOKEND_STATE)) {
-      return;
-    }
-
     this.storeService_.dispatch(
       Action.SET_ADVANCEMENT_MODE,
       AdvancementMode.MANUAL_ADVANCE
@@ -1781,6 +1774,7 @@ export class AmpStory extends AMP.BaseElement {
           Action.TOGGLE_PAUSED,
           this.pausedStateToRestore_
         );
+        this.pausedStateToRestore_ = null;
         this.storeService_.dispatch(Action.TOGGLE_VIEWPORT_WARNING, false);
       }
     });
@@ -1824,7 +1818,6 @@ export class AmpStory extends AMP.BaseElement {
         break;
       case UIType.DESKTOP_PANELS:
         this.setDesktopPositionAttributes_(this.activePage_);
-        this.buildPaginationButtons_();
         this.vsync_.mutate(() => {
           this.element.setAttribute('desktop', '');
           this.element.classList.add('i-amphtml-story-desktop-panels');
@@ -1832,7 +1825,6 @@ export class AmpStory extends AMP.BaseElement {
         });
         break;
       case UIType.DESKTOP_FULLBLEED:
-        this.buildPaginationButtons_();
         this.vsync_.mutate(() => {
           this.element.setAttribute('desktop', '');
           this.element.classList.add('i-amphtml-story-desktop-fullbleed');
@@ -1847,8 +1839,6 @@ export class AmpStory extends AMP.BaseElement {
           'amp-story-page amp-story-page-attachment'
         );
 
-        this.initializeBookend_().then(() => this.showBookend_());
-
         this.vsync_.mutate(() => {
           this.element.setAttribute('i-amphtml-vertical', '');
           setImportantStyles(this.win.document.body, {height: 'auto'});
@@ -2078,6 +2068,7 @@ export class AmpStory extends AMP.BaseElement {
             Action.TOGGLE_PAUSED,
             this.pausedStateToRestore_
           );
+          this.pausedStateToRestore_ = null;
           this.mutateElement(() => {
             this.unsupportedBrowserLayer_.removeLayer();
           });
@@ -2102,59 +2093,14 @@ export class AmpStory extends AMP.BaseElement {
   }
 
   /**
-   * Shows the bookend overlay.
-   * @private
-   */
-  showBookend_() {
-    this.buildAndPreloadBookend_().then(() => {
-      this.storeService_.dispatch(Action.TOGGLE_BOOKEND, true);
-    });
-  }
-
-  /**
-   * Hides the bookend overlay.
-   * @private
-   */
-  hideBookend_() {
-    this.storeService_.dispatch(Action.TOGGLE_BOOKEND, false);
-  }
-
-  /**
-   * @param {boolean} isActive
-   * @private
-   */
-  onBookendStateUpdate_(isActive) {
-    this.toggleElementsOnBookend_(/* display */ isActive);
-    this.element.classList.toggle('i-amphtml-story-bookend-active', isActive);
-  }
-
-  /**
-   * Toggles content when bookend is opened/closed.
    * @param {boolean} isActive
    * @private
    */
-  toggleElementsOnBookend_(isActive) {
-    if (
-      this.storeService_.get(StateProperty.UI_STATE) !== UIType.DESKTOP_PANELS
-    ) {
-      return;
-    }
-
-    const elements = scopedQuerySelectorAll(
-      this.element,
-      HIDE_ON_BOOKEND_SELECTOR
+  onAttachmentStateUpdate_(isActive) {
+    this.element.classList.toggle(
+      'i-amphtml-story-attachment-active',
+      isActive
     );
-
-    Array.prototype.forEach.call(elements, (el) => {
-      if (isActive) {
-        setImportantStyles(el, {
-          opacity: 0,
-          transition: 'opacity 0.1s',
-        });
-      } else {
-        resetStyles(el, ['opacity', 'transition']);
-      }
-    });
   }
 
   /**
@@ -2173,7 +2119,16 @@ export class AmpStory extends AMP.BaseElement {
     // Transpose the map into a 2D array.
     const pagesByDistance = [];
     Object.keys(distanceMap).forEach((pageId) => {
-      const distance = distanceMap[pageId];
+      let distance = distanceMap[pageId];
+      // If on last page, mark first page with distance 1.
+      if (
+        pageId === this.pages_[0].element.id &&
+        this.activePage_ === this.pages_[this.pages_.length - 1] &&
+        this.pages_.length > 1 &&
+        !this.viewer_.hasCapability('swipe')
+      ) {
+        distance = 1;
+      }
       if (!pagesByDistance[distance]) {
         pagesByDistance[distance] = [];
       }
@@ -2279,17 +2234,18 @@ export class AmpStory extends AMP.BaseElement {
       .signals()
       .whenSignal(CommonSignals.LOAD_END)
       .then(() => {
-        backgroundAudioEl = /** @type {!HTMLMediaElement} */ (backgroundAudioEl);
+        backgroundAudioEl = /** @type {!HTMLMediaElement} */ (
+          backgroundAudioEl
+        );
         this.mediaPool_.register(backgroundAudioEl);
         return this.mediaPool_.preload(backgroundAudioEl);
       })
       .then(() => {
-        this.backgroundAudioEl_ = /** @type {!HTMLMediaElement} */ (childElement(
-          this.element,
-          (el) => {
+        this.backgroundAudioEl_ = /** @type {!HTMLMediaElement} */ (
+          childElement(this.element, (el) => {
             return el.tagName.toLowerCase() === 'audio';
-          }
-        ));
+          })
+        );
       });
   }
 
@@ -2314,82 +2270,6 @@ export class AmpStory extends AMP.BaseElement {
     );
   }
 
-  /**
-   * Initializes bookend.
-   * @return {!Promise}
-   * @private
-   */
-  initializeBookend_() {
-    let bookendEl = this.element.querySelector('amp-story-bookend');
-    if (!bookendEl) {
-      bookendEl = createElementWithAttributes(
-        this.win.document,
-        'amp-story-bookend',
-        dict({'layout': 'nodisplay'})
-      );
-      this.element.appendChild(bookendEl);
-    }
-
-    return whenUpgradedToCustomElement(bookendEl).then(() => {
-      return bookendEl.getImpl().then((bookendImpl) => {
-        this.bookend_ = bookendImpl;
-      });
-    });
-  }
-
-  /**
-   * Preloads the bookend config if on the last page.
-   * @private
-   */
-  maybePreloadBookend_() {
-    if (
-      !this.activePage_ ||
-      !this.storeService_.get(StateProperty.CAN_SHOW_BOOKEND)
-    ) {
-      return;
-    }
-
-    const pageIndex = this.getPageIndex(this.activePage_);
-
-    if (pageIndex + 1 >= this.getPageCount()) {
-      this.buildAndPreloadBookend_();
-    }
-  }
-
-  /**
-   * Builds, fetches and sets the bookend publisher configuration.
-   * @return {!Promise<?./bookend/bookend-component.BookendDataDef>}
-   * @private
-   */
-  buildAndPreloadBookend_() {
-    this.bookend_.build();
-    return this.bookend_.loadConfigAndMaybeRenderBookend();
-  }
-
-  /**
-   * @return {!Promise<boolean>}
-   * @private
-   */
-  hasBookend_() {
-    if (!this.storeService_.get(StateProperty.CAN_SHOW_BOOKEND)) {
-      return Promise.resolve(false);
-    }
-
-    // TODO(newmuis): Change this comment.
-    // On mobile there is always a bookend. On desktop, the bookend will only
-    // be shown if related articles have been configured.
-    if (this.storeService_.get(StateProperty.UI_STATE) === UIType.MOBILE) {
-      return Promise.resolve(true);
-    }
-
-    return this.bookend_
-      .loadConfigAndMaybeRenderBookend(false /** renderBookend */)
-      .then(
-        (config) =>
-          !!(config && config.components && config.components.length > 0)
-      );
-  }
-
   /**
    * @param {string} id The ID of the page whose index should be retrieved.
    * @return {number} The index of the page.
@@ -2445,8 +2325,15 @@ export class AmpStory extends AMP.BaseElement {
    *     specified element, if any.
    */
   getPageContainingElement_(element) {
+    let startingElement = element;
+    // If the element is inside an iframe (most likely an ad), start from the
+    // containing iframe element.
+    if (element.ownerDocument !== this.win.document) {
+      startingElement = element.ownerDocument.defaultView.frameElement;
+    }
+
     const pageIndex = findIndex(this.pages_, (page) => {
-      const pageEl = closest(element, (el) => {
+      const pageEl = closest(startingElement, (el) => {
         return el === page.element;
       });
 
@@ -2475,8 +2362,8 @@ export class AmpStory extends AMP.BaseElement {
     let audioMediaElementsCount = this.element.querySelectorAll(
       'amp-audio, [background-audio]'
     ).length;
-    const videoMediaElementsCount = this.element.querySelectorAll('amp-video')
-      .length;
+    const videoMediaElementsCount =
+      this.element.querySelectorAll('amp-video').length;
 
     // The root element (amp-story) might have a background-audio as well.
     if (this.element.hasAttribute('background-audio')) {
@@ -2570,9 +2457,8 @@ export class AmpStory extends AMP.BaseElement {
     const containsMediaElementWithAudio = !!this.element.querySelector(
       'amp-audio, amp-video:not([noaudio]), [background-audio]'
     );
-    const storyHasBackgroundAudio = this.element.hasAttribute(
-      'background-audio'
-    );
+    const storyHasBackgroundAudio =
+      this.element.hasAttribute('background-audio');
 
     this.storeService_.dispatch(
       Action.TOGGLE_STORY_HAS_AUDIO,
@@ -2594,9 +2480,8 @@ export class AmpStory extends AMP.BaseElement {
       'amp-story-grid-layer amp-audio, amp-story-grid-layer amp-video, amp-story-page[background-audio], amp-story-page[auto-advance-after]'
     );
 
-    const storyHasBackgroundAudio = this.element.hasAttribute(
-      'background-audio'
-    );
+    const storyHasBackgroundAudio =
+      this.element.hasAttribute('background-audio');
 
     this.storeService_.dispatch(
       Action.TOGGLE_STORY_HAS_PLAYBACK_UI,
@@ -2604,6 +2489,16 @@ export class AmpStory extends AMP.BaseElement {
     );
   }
 
+  /**
+   * Handles the rewind viewer event.
+   * @private
+   */
+  onRewind_() {
+    this.signals()
+      .whenSignal(CommonSignals.LOAD_END)
+      .then(() => this.replay_());
+  }
+
   /**
    * Handles the selectPage viewer event.
    * @param {!JsonObject} data
@@ -2623,7 +2518,48 @@ export class AmpStory extends AMP.BaseElement {
       this.next_();
     } else if (data['previous']) {
       this.previous_();
+    } else if (data['delta']) {
+      this.switchDelta_(data['delta']);
+    } else if (data['id']) {
+      this.switchTo_(
+        data['id'],
+        this.getPageIndexById(data['id']) > this.getPageIndex(this.activePage_)
+          ? NavigationDirection.NEXT
+          : NavigationDirection.PREVIOUS
+      );
+    }
+  }
+
+  /**
+   * Switches to a page in the story given a delta. If new index is out of
+   * bounds, it will go to the last or first page (depending on direction).
+   * @param {number} delta
+   * @private
+   */
+  switchDelta_(delta) {
+    const currentPageIdx = this.storeService_.get(
+      StateProperty.CURRENT_PAGE_INDEX
+    );
+
+    const newPageIdx =
+      delta > 0
+        ? Math.min(this.pages_.length - 1, currentPageIdx + delta)
+        : Math.max(0, currentPageIdx + delta);
+    const targetPage = this.pages_[newPageIdx];
+
+    if (
+      !this.isActualPage_(targetPage && targetPage.element.id) ||
+      newPageIdx === currentPageIdx
+    ) {
+      return;
     }
+
+    const direction =
+      newPageIdx > currentPageIdx
+        ? NavigationDirection.NEXT
+        : NavigationDirection.PREVIOUS;
+
+    this.switchTo_(targetPage.element.id, direction);
   }
 
   /**
@@ -2657,22 +2593,31 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   initializeStoryNavigationPath_() {
-    this.storeService_.dispatch(
-      Action.SET_NAVIGATION_PATH,
-      getHistoryState(this.win, HistoryState.NAVIGATION_PATH) || []
+    let navigationPath = getHistoryState(
+      this.win,
+      HistoryState.NAVIGATION_PATH
     );
+    if (
+      !navigationPath ||
+      !navigationPath.every((pageId) => this.isActualPage_(pageId))
+    ) {
+      navigationPath = [];
+    }
+    this.storeService_.dispatch(Action.SET_NAVIGATION_PATH, navigationPath);
   }
 
   /** @private */
   replay_() {
-    if (this.storeService_.get(StateProperty.BOOKEND_STATE)) {
-      this.hideBookend_();
-    }
     this.storeService_.dispatch(Action.SET_NAVIGATION_PATH, []);
     const switchPromise = this.switchTo_(
       dev().assertElement(this.pages_[0].element).id,
       NavigationDirection.NEXT
     );
+    // Restart page media, advancements, etc (#27742).
+    if (this.pages_.length === 1) {
+      this.pages_[0].setState(PageState.NOT_ACTIVE);
+      this.pages_[0].setState(PageState.PLAYING);
+    }
 
     // Reset all pages so that they are offscreen to right instead of left in
     // desktop view.
@@ -2793,18 +2738,56 @@ export class AmpStory extends AMP.BaseElement {
         win.CSS.supports('color', 'var(--test)')
     );
   }
+
+  /**
+   * Loads amp-story-dev-tools if it is enabled.
+   * @private
+   */
+  maybeLoadStoryDevTools_() {
+    if (
+      !isModeDevelopment(this.win) ||
+      this.element.getAttribute('mode') === 'inspect'
+    ) {
+      return false;
+    }
+
+    this.element.setAttribute('mode', 'inspect');
+
+    const devToolsEl = this.win.document.createElement('amp-story-dev-tools');
+    this.win.document.body.appendChild(devToolsEl);
+    this.element.setAttribute('hide', '');
+
+    Services.extensionsFor(this.win).installExtensionForDoc(
+      this.getAmpDoc(),
+      'amp-story-dev-tools'
+    );
+    return true;
+  }
+
+  /**
+   * Should enable the context menu (long press) on the element passed.
+   * @private
+   * @param {!Element} element
+   * @return {boolean}
+   */
+  allowContextMenuOnMobile_(element) {
+    // Match page attachments with links.
+    return !!closest(
+      element,
+      (e) => matches(e, 'a.i-amphtml-story-page-open-attachment[href]'),
+      this.element
+    );
+  }
 }
 
 AMP.extension('amp-story', '1.0', (AMP) => {
   AMP.registerElement('amp-story', AmpStory, CSS);
   AMP.registerElement('amp-story-access', AmpStoryAccess);
-  AMP.registerElement('amp-story-bookend', AmpStoryBookend);
   AMP.registerElement('amp-story-consent', AmpStoryConsent);
   AMP.registerElement('amp-story-cta-layer', AmpStoryCtaLayer);
   AMP.registerElement('amp-story-grid-layer', AmpStoryGridLayer);
   AMP.registerElement('amp-story-page', AmpStoryPage);
   AMP.registerElement('amp-story-page-attachment', AmpStoryPageAttachment);
-  AMP.registerElement('amp-story-reaction-quiz', AmpStoryReactionQuiz);
-  AMP.registerElement('amp-story-reaction-poll', AmpStoryReactionPoll);
+  AMP.registerElement('amp-story-page-outlink', AmpStoryPageAttachment); // Shares codepath with amp-story-page-attachment.
   AMP.registerServiceForDoc('amp-story-render', AmpStoryRenderService);
 });
diff --git a/extensions/amp-story/1.0/animation-presets-utils.js b/extensions/amp-story/1.0/animation-presets-utils.js
index 91ba0169d6a3c..88df8fcde3187 100644
--- a/extensions/amp-story/1.0/animation-presets-utils.js
+++ b/extensions/amp-story/1.0/animation-presets-utils.js
@@ -48,7 +48,7 @@ export function translate2d(startX, startY, endX, endY) {
  */
 export function rotateAndTranslate(startX, startY, endX, endY, direction) {
   return [
-    {transform: translate(startX, startY) + ' ' + rotate(direction * 360)},
+    {transform: translate(startX, startY) + ' ' + rotate(direction * 120)},
     {transform: translate(endX, endY) + ' ' + rotate(0)},
   ];
 }
diff --git a/extensions/amp-story/1.0/animation-presets.js b/extensions/amp-story/1.0/animation-presets.js
index 1d51ef249fba4..ab6799df06f37 100644
--- a/extensions/amp-story/1.0/animation-presets.js
+++ b/extensions/amp-story/1.0/animation-presets.js
@@ -43,6 +43,8 @@ const SCALE_END_ATTRIBUTE_NAME = 'scale-end';
 const TRANSLATE_X_ATTRIBUTE_NAME = 'translate-x';
 /** @const {string} */
 const TRANSLATE_Y_ATTRIBUTE_NAME = 'translate-y';
+/** @const {string} */
+const DEFAULT_CURVE = '0.4, 0.4, 0.0, 1';
 
 /** @const {!Array<string>} */
 export const PRESET_OPTION_ATTRIBUTES = [
@@ -103,8 +105,8 @@ export function setStyleForPreset(el, presetName) {
  */
 export const presets = {
   'pulse': {
-    duration: 400,
-    easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+    duration: 600,
+    easing: 'cubic-bezier(0.3, 0.0, 0.0, 1)',
     keyframes: [
       {
         offset: 0,
@@ -125,110 +127,158 @@ export const presets = {
     ],
   },
   'fly-in-left': {
-    duration: 400,
-    easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+    duration: 600,
+    easing: `cubic-bezier(0.2, 0.6, 0.0, 1)`,
     keyframes(dimensions) {
       const offsetX = -(dimensions.targetX + dimensions.targetWidth);
       return translate2d(offsetX, 0, 0, 0);
     },
   },
   'fly-in-right': {
-    duration: 400,
-    easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+    duration: 600,
+    easing: `cubic-bezier(0.2, 0.6, 0.0, 1)`,
     keyframes(dimensions) {
       const offsetX = dimensions.pageWidth - dimensions.targetX;
       return translate2d(offsetX, 0, 0, 0);
     },
   },
   'fly-in-top': {
-    duration: 400,
-    easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+    duration: 600,
+    easing: `cubic-bezier(0.2, 0.6, 0.0, 1)`,
     keyframes(dimensions) {
       const offsetY = -(dimensions.targetY + dimensions.targetHeight);
       return translate2d(0, offsetY, 0, 0);
     },
   },
   'fly-in-bottom': {
-    duration: 400,
-    easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+    duration: 600,
+    easing: `cubic-bezier(0.2, 0.6, 0.0, 1)`,
     keyframes(dimensions) {
       const offsetY = dimensions.pageHeight - dimensions.targetY;
       return translate2d(0, offsetY, 0, 0);
     },
   },
   'rotate-in-left': {
-    duration: 600,
-    easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+    duration: 1000,
+    easing: `cubic-bezier(${DEFAULT_CURVE})`,
     keyframes(dimensions) {
       const offsetX = -(dimensions.targetX + dimensions.targetWidth);
       return rotateAndTranslate(offsetX, 0, 0, 0, -1);
     },
   },
   'rotate-in-right': {
-    duration: 600,
-    easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+    duration: 1000,
+    easing: `cubic-bezier(${DEFAULT_CURVE})`,
     keyframes(dimensions) {
       const offsetX = dimensions.pageWidth - dimensions.targetX;
       return rotateAndTranslate(offsetX, 0, 0, 0, 1);
     },
   },
   'fade-in': {
-    duration: 400,
-    easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+    duration: 600,
+    easing: `cubic-bezier(${DEFAULT_CURVE})`,
+    keyframes: [
+      {
+        opacity: 0,
+      },
+      {
+        opacity: 1,
+      },
+    ],
+  },
+  'scale-fade-up': {
+    duration: 600,
+    easing: `cubic-bezier(${DEFAULT_CURVE})`,
+    keyframes: [
+      {
+        opacity: 0,
+        transform: 'scale(0.8)',
+      },
+      {
+        opacity: 1,
+        transform: 'scale(1)',
+      },
+    ],
+  },
+  'scale-fade-down': {
+    duration: 600,
+    easing: `cubic-bezier(${DEFAULT_CURVE})`,
     keyframes: [
       {
         opacity: 0,
+        transform: 'scale(1.4)',
       },
       {
         opacity: 1,
+        transform: 'scale(1)',
       },
     ],
   },
   'drop': {
     duration: 1600,
+    easing: `linear`,
     keyframes(dimensions) {
       const maxBounceHeight = Math.max(
         160,
         dimensions.targetY + dimensions.targetHeight
       );
-
       return [
         {
-          offset: 0,
-          transform: `translateY(${px(-maxBounceHeight)})`,
-          easing: 'cubic-bezier(.75,.05,.86,.08)',
+          offset: 0.0,
+          transform: `translateY(${px(Number(-maxBounceHeight))})`,
+          easing: 'cubic-bezier(.5, 0, 1, 1)',
+        },
+        {
+          offset: 0.29,
+          transform: `translateY(0)`,
+          easing: 'cubic-bezier(0, 0, .5, 1)',
         },
         {
-          offset: 0.3,
-          transform: 'translateY(0)',
-          easing: 'cubic-bezier(.22,.61,.35,1)',
+          offset: 0.45,
+          transform: `translateY(${px(-maxBounceHeight * 0.2812)})`,
+          easing: 'cubic-bezier(.5, 0, 1, 1)',
         },
         {
-          offset: 0.52,
-          transform: `translateY(${px(-0.6 * maxBounceHeight)})`,
-          easing: 'cubic-bezier(.75,.05,.86,.08)',
+          offset: 0.61,
+          transform: `translateY(0)`,
+          easing: 'cubic-bezier(0, 0, .5, 1)',
         },
         {
-          offset: 0.74,
-          transform: 'translateY(0)',
-          easing: 'cubic-bezier(.22,.61,.35,1)',
+          offset: 0.71,
+          transform: `translateY(${px(-maxBounceHeight * 0.0956)})`,
+          easing: 'cubic-bezier(.5, 0, 1, 1)',
         },
         {
-          offset: 0.83,
-          transform: `translateY(${px(-0.3 * maxBounceHeight)})`,
-          easing: 'cubic-bezier(.75,.05,.86,.08)',
+          offset: 0.8,
+          transform: `translateY(0)`,
+          easing: 'cubic-bezier(0, 0, .5, 1)',
+        },
+        {
+          offset: 0.85,
+          transform: `translateY(${px(-maxBounceHeight * 0.0359)})`,
+          easing: 'cubic-bezier(.5, 0, 1, 1)',
+        },
+        {
+          offset: 0.92,
+          transform: `translateY(0)`,
+          easing: 'cubic-bezier(0, 0, .5, 1)',
+        },
+        {
+          offset: 0.96,
+          transform: `translateY(${px(-maxBounceHeight * 0.0156)})`,
+          easing: 'cubic-bezier(.5, 0, 1, 1)',
         },
         {
           offset: 1,
-          transform: 'translateY(0)',
-          easing: 'cubic-bezier(.22,.61,.35,1)',
+          transform: `translateY(0)`,
+          easing: 'cubic-bezier(0, 0, .5, 1)',
         },
       ];
     },
   },
   'twirl-in': {
     duration: 1000,
-    easing: 'cubic-bezier(.2,.75,.4,1)',
+    easing: `cubic-bezier(${DEFAULT_CURVE})`,
     keyframes: [
       {
         transform: 'rotate(-540deg) scale(0.1)',
@@ -241,16 +291,16 @@ export const presets = {
     ],
   },
   'whoosh-in-left': {
-    duration: 400,
-    easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+    duration: 600,
+    easing: `cubic-bezier(${DEFAULT_CURVE})`,
     keyframes(dimensions) {
       const offsetX = -(dimensions.targetX + dimensions.targetWidth);
       return whooshIn(offsetX, 0, 0, 0);
     },
   },
   'whoosh-in-right': {
-    duration: 400,
-    easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+    duration: 600,
+    easing: `cubic-bezier(${DEFAULT_CURVE})`,
     keyframes(dimensions) {
       const offsetX = dimensions.pageWidth - dimensions.targetX;
       return whooshIn(offsetX, 0, 0, 0);
diff --git a/extensions/amp-story/1.0/animation.js b/extensions/amp-story/1.0/animation.js
index d4068df46432f..a8c66dfc5f017 100644
--- a/extensions/amp-story/1.0/animation.js
+++ b/extensions/amp-story/1.0/animation.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {
   PRESET_OPTION_ATTRIBUTES,
   presets,
@@ -34,12 +34,14 @@ import {
 } from './animation-types';
 import {assertDoesNotContainDisplay, setStyles} from '../../../src/style';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {escapeCssSelectorIdent} from '../../../src/css';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {getChildJsonConfig} from '../../../src/json';
-import {map, omit} from '../../../src/utils/object';
+import {map, omit} from '../../../src/core/types/object';
 import {scopedQuerySelector, scopedQuerySelectorAll} from '../../../src/dom';
 import {timeStrToMillis, unscaledClientRect} from './utils';
 
+const TAG = 'AMP-STORY';
+
 /** @const {string} */
 export const ANIMATE_IN_ATTRIBUTE_NAME = 'animate-in';
 /** @const {string} */
@@ -83,13 +85,16 @@ function getSequencingStartAfterId(root, element) {
   }
   const dependencyId = element.getAttribute(ANIMATE_IN_AFTER_ATTRIBUTE_NAME);
 
-  user().assertElement(
-    root.querySelector(`#${escapeCssSelectorIdent(dependencyId)}`),
-    `The attribute '${ANIMATE_IN_AFTER_ATTRIBUTE_NAME}' in tag ` +
-      `'${element.tagName}' is set to the invalid value ` +
-      `'${dependencyId}'. No children of parenting 'amp-story-page' ` +
-      `exist with id ${dependencyId}.`
-  );
+  if (!root.querySelector(`#${escapeCssSelectorIdent(dependencyId)}`)) {
+    user().warn(
+      TAG,
+      `The attribute '${ANIMATE_IN_AFTER_ATTRIBUTE_NAME}' in tag ` +
+        `'${element.tagName}' is set to the invalid value ` +
+        `'${dependencyId}'. No children of parenting 'amp-story-page' ` +
+        `exist with id ${dependencyId}.`
+    );
+    return null;
+  }
 
   return dependencyId;
 }
@@ -104,7 +109,7 @@ export class AnimationRunner {
    * @param {!AnimationSequence} sequence
    */
   constructor(page, config, webAnimationBuilderPromise, vsync, sequence) {
-    const {source, preset, startAfterId, spec} = config;
+    const {preset, source, spec, startAfterId} = config;
 
     /** @private @const */
     this.page_ = page;
@@ -241,7 +246,9 @@ export class AnimationRunner {
   resolvePresetKeyframes_(keyframesOrCreateFn, keyframeOptions) {
     if (typeof keyframesOrCreateFn === 'function') {
       return this.getDims().then((dimensions) => {
-        const fn = /** @type {!WebKeyframesCreateFnDef} */ (keyframesOrCreateFn);
+        const fn = /** @type {!WebKeyframesCreateFnDef} */ (
+          keyframesOrCreateFn
+        );
         return fn(dimensions, keyframeOptions || {});
       });
     }
@@ -264,11 +271,9 @@ export class AnimationRunner {
     // The need for this cast is an unfortunate result of using @mixes in
     // WebAnimationDef. Otherwise Closure will not understand the timing props
     // mixed in from another type.
-    const {
-      delay,
-      duration,
-      easing,
-    } = /** @type {!WebAnimationTimingDef} */ (spec);
+    const {delay, duration, easing} = /** @type {!WebAnimationTimingDef} */ (
+      spec
+    );
     const {target} = /** @type {!WebAnimationSelectorDef} */ (spec);
     return this.resolvePresetKeyframes_(preset.keyframes, keyframeOptions).then(
       (keyframes) => ({
@@ -445,10 +450,12 @@ export class AnimationRunner {
       /**
        * @type {!../../amp-animation/0.1/runners/animation-runner.AnimationRunner}
        */
-      (devAssert(
-        this.runner_,
-        'Tried to execute playbackWhenReady_ before runner was resolved.'
-      ));
+      (
+        devAssert(
+          this.runner_,
+          'Tried to execute playbackWhenReady_ before runner was resolved.'
+        )
+      );
 
     (wait || Promise.resolve()).then(() => {
       if (!this.isActivityScheduled_(activity)) {
@@ -626,6 +633,9 @@ export class AnimationManager {
           scopedQuerySelectorAll(this.page_, ANIMATABLE_ELEMENTS_SELECTOR),
           (el) => {
             const preset = this.getPreset_(el);
+            if (!preset) {
+              return null;
+            }
             return this.createRunner_({
               preset,
               source: el,
@@ -649,7 +659,8 @@ export class AnimationManager {
                 spec: /** @type {!WebAnimationDef} */ (getChildJsonConfig(el)),
               })
           )
-        );
+        )
+        .filter(Boolean);
     }
     return devAssert(this.runners_);
   }
@@ -688,13 +699,15 @@ export class AnimationManager {
 
     if (el.hasAttribute(ANIMATE_IN_DURATION_ATTRIBUTE_NAME)) {
       animationDef.duration = timeStrToMillis(
-        el.getAttribute(ANIMATE_IN_DURATION_ATTRIBUTE_NAME)
+        el.getAttribute(ANIMATE_IN_DURATION_ATTRIBUTE_NAME),
+        animationDef.duration
       );
     }
 
     if (el.hasAttribute(ANIMATE_IN_DELAY_ATTRIBUTE_NAME)) {
       animationDef.delay = timeStrToMillis(
-        el.getAttribute(ANIMATE_IN_DELAY_ATTRIBUTE_NAME)
+        el.getAttribute(ANIMATE_IN_DELAY_ATTRIBUTE_NAME),
+        animationDef.delay
       );
     }
 
@@ -725,21 +738,28 @@ export class AnimationManager {
 
   /**
    * @param {!Element} el
-   * @return {!StoryAnimationPresetDef}
+   * @return {?StoryAnimationPresetDef}
    */
   getPreset_(el) {
     const name = el.getAttribute(ANIMATE_IN_ATTRIBUTE_NAME);
 
+    if (!presets[name]) {
+      user().warn(
+        TAG,
+        'Invalid',
+        ANIMATE_IN_ATTRIBUTE_NAME,
+        'preset',
+        name,
+        'for element',
+        el
+      );
+      return null;
+    }
+
     // TODO(alanorozco): This should be part of a mutate cycle.
     setStyleForPreset(el, name);
 
-    return /** @type {StoryAnimationPresetDef} */ (userAssert(
-      presets[name],
-      'Invalid %s preset "%s" for element %s',
-      ANIMATE_IN_ATTRIBUTE_NAME,
-      name,
-      el
-    ));
+    return presets[name];
   }
 
   /**
@@ -756,13 +776,15 @@ export class AnimationManager {
       }
       const value = parseFloat(el.getAttribute(name));
 
-      userAssert(
-        value > 0,
-        '"%s" attribute must be a ' +
-          'positive number. Found negative or zero in element %s',
-        name,
-        el
-      );
+      if (isNaN(value) || value <= 0) {
+        user().warn(
+          TAG,
+          name,
+          'attribute must be a positive number. Found negative or zero in element',
+          el
+        );
+        return;
+      }
 
       options[name] = value;
     });
diff --git a/extensions/amp-story/1.0/bookend/amp-story-bookend.js b/extensions/amp-story/1.0/bookend/amp-story-bookend.js
deleted file mode 100644
index 21b535b153bb5..0000000000000
--- a/extensions/amp-story/1.0/bookend/amp-story-bookend.js
+++ /dev/null
@@ -1,704 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {AMP_STORY_BOOKEND_COMPONENT_DATA} from './components/bookend-component-interface';
-import {Action, StateProperty, UIType} from '../amp-story-store-service';
-import {ActionTrust} from '../../../../src/action-constants';
-import {AnalyticsVariable, getVariableService} from '../variable-service';
-import {BookendComponent} from './bookend-component';
-import {CSS} from '../../../../build/amp-story-bookend-1.0.css';
-import {
-  DEPRECATED_SHARE_PROVIDERS_KEY,
-  SHARE_PROVIDERS_KEY,
-  ScrollableShareWidget,
-} from '../amp-story-share';
-import {DraggableDrawer} from '../amp-story-draggable-drawer';
-import {EventType, dispatch} from '../events';
-import {HistoryState, getHistoryState, setHistoryState} from '../history';
-import {Keys} from '../../../../src/utils/key-codes';
-import {LocalizedStringId} from '../../../../src/localized-strings';
-import {Services} from '../../../../src/services';
-import {StoryAnalyticsEvent, getAnalyticsService} from '../story-analytics';
-import {closest, closestAncestorElementBySelector} from '../../../../src/dom';
-import {createShadowRootWithStyle} from '../utils';
-import {dev, devAssert, user, userAssert} from '../../../../src/log';
-import {dict} from '../../../../src/utils/object';
-import {getAmpdoc} from '../../../../src/service';
-import {getJsonLd} from '../jsonld';
-import {getLocalizationService} from '../amp-story-localization-service';
-import {getRequestService} from '../amp-story-request-service';
-import {isArray} from '../../../../src/types';
-import {renderAsElement} from '../simple-template';
-import {toggle} from '../../../../src/style';
-
-// TODO(#14591): Clean when bookend API v0.1 is deprecated.
-const BOOKEND_VERSION_1 = 'v1.0';
-const BOOKEND_VERSION_0 = 'v0.1';
-
-/**
- * Key for components in bookend config.
- * @private @const {string}
- */
-const BOOKEND_VERSION_KEY = 'bookendVersion';
-
-/**
- * Deprecated key for components in bookend config.
- * @private @const {string}
- */
-const DEPRECATED_BOOKEND_VERSION_KEY = 'bookend-version';
-
-/**
- * Key used for retargeting event target originating from shadow DOM.
- * @const {string}
- */
-const AMP_CUSTOM_LINKER_TARGET = '__AMP_CUSTOM_LINKER_TARGET__';
-
-/**
- * @const {!../simple-template.ElementDef}
- */
-const rootTemplate = {
-  tag: 'section',
-  attrs: dict({
-    'class': 'i-amphtml-story-bookend i-amphtml-story-system-reset',
-  }),
-  children: [
-    {
-      tag: 'div',
-      attrs: dict({'class': 'i-amphtml-story-bookend-handle'}),
-    },
-  ],
-};
-
-/** @const {!../simple-template.ElementDef} */
-const REPLAY_ICON_TEMPLATE = {
-  tag: 'div',
-  attrs: dict({'class': 'i-amphtml-story-bookend-replay-icon'}),
-};
-
-/** @const {string} */
-const TAG = 'amp-story-bookend';
-
-/**
- * @param {string} title
- * @param {string} domainName
- * @param {string=} imageUrl
- * @return {!../simple-template.ElementDef}
- */
-const buildReplayButtonTemplate = (title, domainName, imageUrl = undefined) => {
-  return /** @type {!../simple-template.ElementDef} */ ({
-    tag: 'div',
-    attrs: dict({
-      'class':
-        'i-amphtml-story-bookend-replay i-amphtml-story-bookend-top-level',
-    }),
-    children: [
-      {
-        tag: 'div',
-        attrs: dict({'class': 'i-amphtml-story-bookend-article-text-content'}),
-        children: [
-          {
-            tag: 'h2',
-            attrs: dict({'class': 'i-amphtml-story-bookend-article-heading'}),
-            unlocalizedString: title,
-          },
-          {
-            tag: 'div',
-            attrs: dict({'class': 'i-amphtml-story-bookend-component-meta'}),
-            unlocalizedString: domainName,
-          },
-        ],
-      },
-      !imageUrl
-        ? REPLAY_ICON_TEMPLATE
-        : {
-            tag: 'div',
-            attrs: dict({
-              'class': 'i-amphtml-story-bookend-replay-image',
-              'style': `background-image: url(${imageUrl}) !important`,
-            }),
-            children: [REPLAY_ICON_TEMPLATE],
-          },
-    ],
-  });
-};
-
-/**
- * @param {?string} consentId
- * @return {!../simple-template.ElementDef}
- */
-const buildPromptConsentTemplate = (consentId) => {
-  return /** @type {!../simple-template.ElementDef} */ ({
-    tag: 'div',
-    attrs: dict({
-      'class':
-        'i-amphtml-story-bookend-consent ' +
-        'i-amphtml-story-bookend-top-level',
-    }),
-    children: [
-      {
-        tag: 'h3',
-        attrs: dict({
-          'class':
-            'i-amphtml-story-bookend-heading ' +
-            ' i-amphtml-story-bookend-component',
-        }),
-        localizedStringId:
-          LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE,
-      },
-      {
-        tag: 'h2',
-        attrs: dict({
-          'class':
-            'i-amphtml-story-bookend-consent-button ' +
-            'i-amphtml-story-bookend-component',
-          'on': `tap:${consentId}.prompt`,
-          'role': 'button',
-          'aria-label': 'Change data privacy settings',
-        }),
-        localizedStringId:
-          LocalizedStringId.AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL,
-      },
-    ],
-  });
-};
-
-/**
- * Bookend component for <amp-story>.
- * This component has to be built and preloaded before it can be displayed,
- * through the 'build' and 'loadConfig' method. It can then be toggled by
- * dispatching the store TOGGLE_BOOKEND action.
- */
-export class AmpStoryBookend extends DraggableDrawer {
-  /**
-   * @param {!Element} element
-   */
-  constructor(element) {
-    super(element);
-
-    /** @private {?./bookend-component.BookendDataDef} */
-    this.config_ = null;
-
-    /** @private {boolean} */
-    this.isBuilt_ = false;
-
-    /** @private {boolean} */
-    this.isBookendRendered_ = false;
-
-    /** @private {?Element} */
-    this.replayButton_ = null;
-
-    /**
-     * Actual bookend.
-     * @private {?Element}
-     */
-    this.bookendEl_ = null;
-
-    /** @private {?Element} */
-    this.shadowHost_ = null;
-
-    /** @private {?ScrollableShareWidget} */
-    this.shareWidget_ = null;
-
-    /** @private {!../story-analytics.StoryAnalyticsService} */
-    this.analyticsService_ = getAnalyticsService(this.win, this.element);
-
-    /** @const @private {!../variable-service.AmpStoryVariableService} */
-    this.variableService_ = getVariableService(this.win);
-  }
-
-  /**
-   * @override
-   */
-  buildCallback() {
-    super.buildCallback();
-
-    this.headerEl_.classList.add(
-      'i-amphtml-story-draggable-drawer-header-bookend'
-    );
-    this.element.classList.add('i-amphtml-story-draggable-drawer-bookend');
-
-    const handleEl = this.win.document.createElement('div');
-    handleEl.classList.add('i-amphtml-story-bookend-handle');
-    this.headerEl_.appendChild(handleEl);
-  }
-
-  /**
-   * @override
-   */
-  layoutCallback() {
-    return Promise.resolve();
-  }
-
-  /**
-   * Builds the bookend components and appends it to the provided story.
-   */
-  build() {
-    if (this.isBuilt_) {
-      return;
-    }
-
-    this.isBuilt_ = true;
-
-    this.bookendEl_ = renderAsElement(this.win.document, rootTemplate);
-
-    this.shadowHost_ = this.win.document.createElement('div');
-
-    createShadowRootWithStyle(this.shadowHost_, this.bookendEl_, CSS);
-    this.contentEl_.appendChild(this.shadowHost_);
-
-    this.replayButton_ = this.buildReplayButton_();
-
-    this.shareWidget_ = ScrollableShareWidget.create(
-      this.win,
-      dev().assertElement(this.element.parentElement)
-    );
-
-    this.bookendEl_.appendChild(this.replayButton_);
-    this.bookendEl_.appendChild(
-      this.shareWidget_.build(getAmpdoc(this.win.document))
-    );
-
-    const consentId = this.storeService_.get(StateProperty.CONSENT_ID);
-
-    if (consentId) {
-      const promptConsentEl = renderAsElement(
-        this.win.document,
-        buildPromptConsentTemplate(String(consentId))
-      );
-      this.bookendEl_.appendChild(promptConsentEl);
-    }
-
-    this.initializeListeners_();
-
-    // Removes the [hidden] attribute the runtime sets because of the
-    // [layout="nodisplay"].
-    toggle(this.element, true);
-  }
-
-  /**
-   * @override
-   */
-  initializeListeners_() {
-    super.initializeListeners_();
-
-    this.element.addEventListener('click', (event) =>
-      this.onOuterShadowClick_(event)
-    );
-
-    this.getShadowRoot().addEventListener('click', (event) => {
-      this.onInnerShadowClick_(event);
-    });
-
-    this.replayButton_.addEventListener('click', (event) =>
-      this.onReplayButtonClick_(event)
-    );
-
-    this.win.addEventListener('keyup', (event) => {
-      if (!this.isActive_()) {
-        return;
-      }
-      if (event.key == Keys.ESCAPE) {
-        event.preventDefault();
-        this.storeService_.dispatch(Action.TOGGLE_BOOKEND, false);
-      }
-    });
-
-    this.storeService_.subscribe(StateProperty.BOOKEND_STATE, (isActive) => {
-      this.onBookendStateUpdate_(isActive);
-    });
-
-    this.storeService_.subscribe(
-      StateProperty.CAN_SHOW_SHARING_UIS,
-      (show) => {
-        this.onCanShowSharingUisUpdate_(show);
-      },
-      true /** callToInitialize */
-    );
-
-    this.storeService_.subscribe(
-      StateProperty.RTL_STATE,
-      (rtlState) => {
-        this.onRtlStateUpdate_(rtlState);
-      },
-      true /** callToInitialize */
-    );
-  }
-
-  /**
-   * Whether the bookend is displayed.
-   * @return {boolean}
-   * @private
-   */
-  isActive_() {
-    return !!this.storeService_.get(StateProperty.BOOKEND_STATE);
-  }
-
-  /**
-   * @param {!Event} event
-   * @private
-   */
-  onReplayButtonClick_(event) {
-    event.stopPropagation();
-    dispatch(
-      this.win,
-      this.element,
-      EventType.REPLAY,
-      /* payload */ undefined,
-      {bubbles: true}
-    );
-  }
-
-  /**
-   * @override
-   */
-  close_() {
-    this.storeService_.dispatch(Action.TOGGLE_BOOKEND, false);
-  }
-
-  /**
-   * Reacts to bookend state updates.
-   * @param {boolean} isActive
-   * @private
-   */
-  onBookendStateUpdate_(isActive) {
-    const shouldAnimate = !getHistoryState(
-      this.win,
-      HistoryState.BOOKEND_ACTIVE
-    );
-    isActive ? this.open(shouldAnimate) : this.closeInternal_();
-    this.analyticsService_.triggerEvent(
-      isActive ? StoryAnalyticsEvent.OPEN : StoryAnalyticsEvent.CLOSE,
-      this.element
-    );
-    setHistoryState(this.win, HistoryState.BOOKEND_ACTIVE, isActive);
-  }
-
-  /**
-   * Reacts to updates to whether sharing UIs may be shown, and updates the UI
-   * accordingly.
-   * @param {boolean} canShowSharingUis
-   * @private
-   */
-  onCanShowSharingUisUpdate_(canShowSharingUis) {
-    this.mutateElement(() => {
-      this.getShadowRoot().classList.toggle(
-        'i-amphtml-story-no-sharing',
-        !canShowSharingUis
-      );
-    });
-  }
-
-  /**
-   * @override
-   */
-  onUIStateUpdate_(uiState) {
-    super.onUIStateUpdate_(uiState);
-
-    this.mutateElement(() => {
-      [UIType.DESKTOP_FULLBLEED, UIType.DESKTOP_PANELS].includes(uiState)
-        ? this.getShadowRoot().setAttribute('desktop', '')
-        : this.getShadowRoot().removeAttribute('desktop');
-    });
-  }
-
-  /**
-   * Reacts to RTL state updates and triggers the UI for RTL.
-   * @param {boolean} rtlState
-   * @private
-   */
-  onRtlStateUpdate_(rtlState) {
-    this.mutateElement(() => {
-      rtlState
-        ? this.getShadowRoot().setAttribute('dir', 'rtl')
-        : this.getShadowRoot().removeAttribute('dir');
-    });
-  }
-
-  /**
-   * Reads the bookend version from the bookend JSON config.
-   * @param {!JsonObject} config
-   * @return {?string}
-   * @private
-   */
-  readBookendVersion_(config) {
-    if (config[DEPRECATED_BOOKEND_VERSION_KEY]) {
-      user().warn(
-        'AMP-STORY-BOOKEND',
-        '`bookend-version` and ' +
-          '`share-providers` keys in the bookend config are deprecated, please ' +
-          '`bookendVersion` and `shareProviders` keys'
-      );
-    }
-
-    return (
-      config[DEPRECATED_BOOKEND_VERSION_KEY] ||
-      config[BOOKEND_VERSION_KEY] ||
-      null
-    );
-  }
-
-  /**
-   * Retrieves the publisher bookend configuration.
-   * @return {!Promise<?./bookend-component.BookendDataDef>}
-   */
-  loadConfig() {
-    if (this.config_) {
-      return Promise.resolve(this.config_);
-    }
-
-    const requestService = getRequestService(
-      this.win,
-      dev().assertElement(this.element.parentElement)
-    );
-
-    return requestService
-      .loadBookendConfig()
-      .then((response) => {
-        if (!response) {
-          return null;
-        }
-        if (this.readBookendVersion_(response) === BOOKEND_VERSION_1) {
-          const components = BookendComponent.buildFromJson(
-            response['components'],
-            this.element
-          );
-
-          this.config_ = /** @type {./bookend-component.BookendDataDef} */ ({
-            [BOOKEND_VERSION_KEY]: BOOKEND_VERSION_1,
-            'components': components,
-            'shareProviders':
-              response[SHARE_PROVIDERS_KEY] ||
-              response[DEPRECATED_SHARE_PROVIDERS_KEY],
-          });
-        } else {
-          dev().warn(
-            TAG,
-            `Version ${BOOKEND_VERSION_0} of the amp-story` +
-              `-bookend is deprecated. Use ${BOOKEND_VERSION_1} instead.`
-          );
-        }
-        return this.config_;
-      })
-      .catch((e) => {
-        user().error(TAG, 'Error fetching bookend configuration', e.message);
-        return null;
-      });
-  }
-
-  /**
-   * Retrieves the publisher bookend configuration. Applying the configuration
-   * will prerender the bookend DOM, but there are cases where we need it before
-   * the component is built. Eg: the desktop share button needs the providers.
-   * @param {boolean=} renderBookend  Whether the bookend should be rendered.
-   * When set to false it allows the config to be fetched before the component
-   * is built, for cases like getting the share providers
-   * on desktop.
-   * @return {!Promise<?./bookend-component.BookendDataDef>}
-   */
-  loadConfigAndMaybeRenderBookend(renderBookend = true) {
-    return this.loadConfig().then((config) => {
-      if (renderBookend && !this.isBookendRendered_ && config) {
-        this.renderBookend_(config);
-      }
-      return config;
-    });
-  }
-
-  /**
-   * Reacts to clicks outside the shadow root.
-   * @param {!Event} event
-   * @private
-   */
-  onOuterShadowClick_(event) {
-    const target = dev().assertElement(event.target);
-    if (this.elementOutsideBookend_(target)) {
-      event.stopPropagation();
-      this.storeService_.dispatch(Action.TOGGLE_BOOKEND, false);
-      return;
-    }
-  }
-
-  /**
-   * Reacts to clicks inside the shadow root.
-   * @param {!Event} event
-   * @private
-   */
-  onInnerShadowClick_(event) {
-    const target = dev().assertElement(event.target);
-    event[AMP_CUSTOM_LINKER_TARGET] = target;
-
-    this.fireAnalyticsEvent_(target);
-
-    if (target.hasAttribute('on')) {
-      const actionService = Services.actionServiceForDoc(this.element);
-      actionService.trigger(target, 'tap', event, ActionTrust.HIGH);
-    }
-  }
-
-  /**
-   * Configures analytics variables and fires analytic event.
-   * @param {!Element} target
-   * @private
-   */
-  fireAnalyticsEvent_(target) {
-    const anchorEl = closestAncestorElementBySelector(target, 'A');
-    if (!anchorEl) {
-      return;
-    }
-
-    const componentData = anchorEl[AMP_STORY_BOOKEND_COMPONENT_DATA];
-
-    this.variableService_.onVariableUpdate(
-      AnalyticsVariable.BOOKEND_TARGET_HREF,
-      anchorEl.href
-    );
-
-    this.variableService_.onVariableUpdate(
-      AnalyticsVariable.BOOKEND_COMPONENT_TYPE,
-      componentData.type
-    );
-
-    this.variableService_.onVariableUpdate(
-      AnalyticsVariable.BOOKEND_COMPONENT_POSITION,
-      componentData.position
-    );
-
-    this.analyticsService_.triggerEvent(StoryAnalyticsEvent.BOOKEND_CLICK);
-  }
-
-  /**
-   * Returns true if element is outside the bookend.
-   * @param {!Element} el
-   * @return {boolean}
-   * @private
-   */
-  elementOutsideBookend_(el) {
-    return !closest(el, (el) => el === this.shadowHost_);
-  }
-
-  /**
-   * @return {boolean}
-   */
-  isBuilt() {
-    return this.isBuilt_;
-  }
-
-  /** @private */
-  assertBuilt_() {
-    devAssert(this.isBuilt(), 'Bookend component needs to be built.');
-  }
-
-  /**
-   * @param {!./bookend-component.BookendDataDef} bookendConfig
-   * @private
-   */
-  renderBookend_(bookendConfig) {
-    this.assertBuilt_();
-    this.isBookendRendered_ = true;
-
-    this.renderComponents_(bookendConfig.components);
-  }
-
-  /**
-   * Renders the configurable components of the bookend in the page. It returns
-   * a promise to ensure loadConfigAndMaybeRenderBookend renders the components
-   * first before proceeding. This is needed for our unit tests.
-   * @param {!Array<!../bookend/bookend-component.BookendComponentDef>} components
-   * @private
-   */
-  renderComponents_(components) {
-    dev().assertElement(this.bookendEl_, 'Error rendering amp-story-bookend.');
-
-    if (!components.length) {
-      return;
-    }
-
-    const localizationService = getLocalizationService(this.element);
-    if (!localizationService) {
-      user().error(TAG, 'Unable to fetch localization service.');
-      return;
-    }
-
-    const bookendEls = BookendComponent.buildElements(
-      components,
-      this.win,
-      localizationService
-    );
-    const container = dev().assertElement(
-      BookendComponent.buildContainer(this.getShadowRoot(), this.win.document)
-    );
-    this.mutateElement(() => container.appendChild(bookendEls));
-  }
-
-  /** @return {!Element} */
-  getShadowRoot() {
-    this.assertBuilt_();
-    return dev().assertElement(this.bookendEl_);
-  }
-
-  /**
-   * @return {{
-   *   title: string,
-   *   domainName: string,
-   *   imageUrl: (string|undefined),
-   * }}
-   * @private
-   */
-  getStoryMetadata_() {
-    const jsonLd = getJsonLd(this.getAmpDoc().getRootNode());
-
-    const urlService = Services.urlForDoc(this.element);
-    const {canonicalUrl} = Services.documentInfoForDoc(this.getAmpDoc());
-    const {hostname: domainName} = urlService.parse(canonicalUrl);
-
-    const title =
-      jsonLd && jsonLd['headline']
-        ? jsonLd['headline']
-        : user().assertElement(
-            this.win.document.head.querySelector('title'),
-            'Please set <title> or structured data (JSON-LD).'
-          ).textContent;
-
-    const metadata = {domainName, title};
-    const image = jsonLd && isArray(jsonLd['image']) ? jsonLd['image'] : null;
-
-    if (image != null && image.length >= 0) {
-      userAssert(
-        urlService.isProtocolValid(image[0]),
-        `Unsupported protocol for story image URL ${image[0]}`
-      );
-      metadata.imageUrl = image[0];
-    }
-
-    return metadata;
-  }
-
-  /**
-   * @return {!Element}
-   * @private
-   */
-  buildReplayButton_() {
-    const metadata = this.getStoryMetadata_();
-    return renderAsElement(
-      this.win.document,
-      buildReplayButtonTemplate(
-        metadata.title,
-        metadata.domainName,
-        metadata.imageUrl
-      )
-    );
-  }
-}
diff --git a/extensions/amp-story/1.0/bookend/bookend-component.js b/extensions/amp-story/1.0/bookend/bookend-component.js
deleted file mode 100644
index 96af3e2a6390a..0000000000000
--- a/extensions/amp-story/1.0/bookend/bookend-component.js
+++ /dev/null
@@ -1,194 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {ArticleComponent} from './components/article';
-import {BOOKEND_COMPONENT_TYPES} from './components/bookend-component-interface';
-import {CtaLinkComponent} from './components/cta-link';
-import {HeadingComponent} from './components/heading';
-import {LandscapeComponent} from './components/landscape';
-import {LocalizedStringId} from '../../../../src/localized-strings';
-import {PortraitComponent} from './components/portrait';
-import {TextBoxComponent} from './components/text-box';
-import {dev} from '../../../../src/log';
-import {htmlFor} from '../../../../src/static-template';
-
-/** @type {string} */
-export const TAG = 'amp-story-bookend';
-
-/**
- * @typedef {{
- *   bookendVersion: string,
- *   components: !Array<!BookendComponentDef>,
- *   shareProviders: !Array<(!JsonObject|string|undefined)>,
- * }}
- */
-export let BookendDataDef;
-
-/**
- * @typedef {
- *   (!./components/article.ArticleComponentDef|
- *    !./components/cta-link.CtaLinkDef|
- *    !./components/heading.HeadingComponentDef|
- *    !./components/landscape.LandscapeComponentDef|
- *    !./components/portrait.PortraitComponentDef|
- *    !./components/text-box.TextBoxComponentDef)
- * }
- */
-export let BookendComponentDef;
-
-/**
- * @typedef {
- *   (!ArticleComponent|
- *    !CtaLinkComponent|
- *    !HeadingComponent|
- *    !LandscapeComponent|
- *    !PortraitComponent|
- *    !TextBoxComponent)
- * }
- */
-export let BookendComponentClass;
-
-/** @private @const {!Object<string, !BookendComponentClass>} */
-const builderInstances = {};
-
-/**
- * @param {string} type
- * @param {function(new:BookendComponentClass)} ctor
- * @return {!BookendComponentClass}
- * @restricted
- */
-function setBuilderInstance(type, ctor) {
-  return (builderInstances[type] = builderInstances[type] || new ctor());
-}
-
-/**
- * Dispatches the components to their specific builder classes.
- * @param {string} type
- * @return {?BookendComponentClass}
- * @restricted
- */
-function componentBuilderInstanceFor(type) {
-  switch (type) {
-    case BOOKEND_COMPONENT_TYPES.SMALL:
-      return setBuilderInstance(type, ArticleComponent);
-    case BOOKEND_COMPONENT_TYPES.CTA_LINK:
-      return setBuilderInstance(type, CtaLinkComponent);
-    case BOOKEND_COMPONENT_TYPES.HEADING:
-      return setBuilderInstance(type, HeadingComponent);
-    case BOOKEND_COMPONENT_TYPES.LANDSCAPE:
-      return setBuilderInstance(type, LandscapeComponent);
-    case BOOKEND_COMPONENT_TYPES.PORTRAIT:
-      return setBuilderInstance(type, PortraitComponent);
-    case BOOKEND_COMPONENT_TYPES.TEXTBOX:
-      return setBuilderInstance(type, TextBoxComponent);
-    default:
-      return null;
-  }
-}
-
-/**
- * Prepend a heading to the related articles section if first component is not a
- * heading already.
- * @param {!Array<BookendComponentDef>} components
- * @param {?../../../../src/service/localization.LocalizationService} localizationService
- * @return {!Array<BookendComponentDef>}
- */
-function prependTitle(components, localizationService) {
-  if (components[0] && components[0].type == 'heading') {
-    return components;
-  }
-
-  const title = localizationService.getLocalizedString(
-    LocalizedStringId.AMP_STORY_BOOKEND_MORE_TO_READ_LABEL
-  );
-  components.unshift({'type': 'heading', 'text': title});
-  return components;
-}
-
-/**
- * Delegator class that dispatches the logic to build different components
- * on the bookend to their corresponding classes.
- */
-export class BookendComponent {
-  /**
-   * Takes components from JSON and delegates them to their corresponding
-   * builder class.
-   * @param {!Array<BookendComponentDef>} components
-   * @param {!Element} el
-   * @return {!Array<BookendComponentDef>}
-   */
-  static buildFromJson(components, el) {
-    return components.reduce((builtComponents, component) => {
-      const componentBuilder = componentBuilderInstanceFor(component.type);
-      if (!componentBuilder) {
-        dev().error(
-          TAG,
-          'Component type `' +
-            component.type +
-            '` is not supported. Skipping invalid.'
-        );
-        return builtComponents;
-      }
-      componentBuilder.assertValidity(component, el);
-      builtComponents.push(componentBuilder.build(component, el));
-      return builtComponents;
-    }, []);
-  }
-
-  /**
-   * Builds the bookend components elements by choosing the appropriate builder
-   * class and appending the elements to the container.
-   * @param {!Array<BookendComponentDef>} components
-   * @param {!Window} win
-   * @param {?../../../../src/service/localization.LocalizationService} localizationService
-   * @return {!DocumentFragment}
-   */
-  static buildElements(components, win, localizationService) {
-    const fragment = win.document.createDocumentFragment();
-
-    components = prependTitle(components, localizationService);
-    components.forEach((component, index) => {
-      const {type} = component;
-      if (type && componentBuilderInstanceFor(type)) {
-        const el = componentBuilderInstanceFor(type).buildElement(
-          component,
-          win,
-          {position: index}
-        );
-        fragment.appendChild(el);
-      }
-    });
-    return fragment;
-  }
-
-  /**
-   * Builds container for components.
-   * @param {!Element} element Bookend container
-   * @param {!Document} doc
-   * @return {?Element}
-   */
-  static buildContainer(element, doc) {
-    const html = htmlFor(doc);
-    const containerTemplate = html`
-      <div
-        class="i-amphtml-story-bookend-component-set
-          i-amphtml-story-bookend-top-level"
-      ></div>
-    `;
-    element.appendChild(containerTemplate);
-    return element.lastElementChild;
-  }
-}
diff --git a/extensions/amp-story/1.0/bookend/components/article.js b/extensions/amp-story/1.0/bookend/components/article.js
deleted file mode 100644
index 09d0cf4e44dd4..0000000000000
--- a/extensions/amp-story/1.0/bookend/components/article.js
+++ /dev/null
@@ -1,153 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {
-  AMP_STORY_BOOKEND_COMPONENT_DATA,
-  BOOKEND_COMPONENT_TYPES,
-  BookendComponentInterface,
-} from './bookend-component-interface';
-import {addAttributesToElement} from '../../../../../src/dom';
-import {dict} from '../../../../../src/utils/object';
-import {
-  getSourceOriginForElement,
-  resolveImgSrc,
-  userAssertValidProtocol,
-} from '../../utils';
-import {getSourceUrl, resolveRelativeUrl} from '../../../../../src/url';
-import {htmlFor, htmlRefs} from '../../../../../src/static-template';
-import {userAssert} from '../../../../../src/log';
-
-/**
- * @typedef {{
- *   type: string,
- *   title: string,
- *   url: string,
- *   image: (string|undefined),
- *   domainName: string,
- * }}
- */
-export let ArticleComponentDef;
-
-/**
- * Builder class for the small article component.
- * @implements {BookendComponentInterface}
- */
-export class ArticleComponent {
-  /** @override */
-  assertValidity(articleJson, element) {
-    const requiredFields = ['title', 'url'];
-    const hasAllRequiredFields = !requiredFields.some(
-      (field) => !(field in articleJson)
-    );
-    userAssert(
-      hasAllRequiredFields,
-      'Small article component must contain ' +
-        requiredFields.map((field) => '`' + field + '`').join(', ') +
-        ' fields, skipping invalid.'
-    );
-
-    userAssertValidProtocol(element, articleJson['url']);
-
-    const image = articleJson['image'];
-    if (image) {
-      userAssertValidProtocol(element, image);
-    }
-  }
-
-  /** @override */
-  build(articleJson, element) {
-    const url = articleJson['url'];
-    const domainName = getSourceOriginForElement(element, url);
-
-    const article = {
-      url,
-      domainName,
-      type: articleJson['type'],
-      title: articleJson['title'],
-    };
-
-    if (articleJson['image']) {
-      article.image = articleJson['image'];
-    }
-
-    if (articleJson['amphtml']) {
-      article.amphtml = articleJson['amphtml'];
-    }
-
-    return /** @type {!ArticleComponentDef} */ (article);
-  }
-
-  /** @override */
-  buildElement(articleData, win, data) {
-    const html = htmlFor(win.document);
-    //TODO(#14657, #14658): Binaries resulting from htmlFor are bloated.
-    const el = html`
-      <a
-        class="i-amphtml-story-bookend-article i-amphtml-story-bookend-component"
-        target="_top"
-      >
-        <div class="i-amphtml-story-bookend-article-text-content">
-          <h2
-            class="i-amphtml-story-bookend-article-heading"
-            ref="heading"
-          ></h2>
-          <div class="i-amphtml-story-bookend-component-meta" ref="meta"></div>
-        </div>
-      </a>
-    `;
-
-    addAttributesToElement(
-      el,
-      dict({
-        'href': resolveRelativeUrl(articleData.url, getSourceUrl(win.location)),
-      })
-    );
-
-    el[AMP_STORY_BOOKEND_COMPONENT_DATA] = {
-      position: data.position,
-      type: BOOKEND_COMPONENT_TYPES.SMALL,
-    };
-
-    if (articleData['amphtml'] === true) {
-      addAttributesToElement(el, dict({'rel': 'amphtml'}));
-    }
-
-    if (articleData.image) {
-      const imgEl = html`
-          <div class="i-amphtml-story-bookend-article-image">
-            <img ref="image">
-            </img>
-          </div>`;
-
-      const {image} = htmlRefs(imgEl);
-
-      addAttributesToElement(
-        image,
-        dict({'src': resolveImgSrc(win, articleData.image)})
-      );
-
-      el.appendChild(imgEl);
-    }
-
-    const articleElements = htmlRefs(el);
-    const {heading, meta} = articleElements;
-
-    heading.textContent = articleData.title;
-    meta.textContent = articleData.domainName;
-
-    return el;
-  }
-}
diff --git a/extensions/amp-story/1.0/bookend/components/bookend-component-interface.js b/extensions/amp-story/1.0/bookend/components/bookend-component-interface.js
deleted file mode 100644
index 67d5d248a9502..0000000000000
--- a/extensions/amp-story/1.0/bookend/components/bookend-component-interface.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-/** @enum {string} */
-export const BOOKEND_COMPONENT_TYPES = {
-  SMALL: 'small',
-  CTA_LINK: 'cta-link',
-  HEADING: 'heading',
-  LANDSCAPE: 'landscape',
-  PORTRAIT: 'portrait',
-  TEXTBOX: 'textbox',
-};
-
-/**
- *
- * @const {string}
- */
-export const AMP_STORY_BOOKEND_COMPONENT_DATA =
-  '__AMP_STORY_BOOKEND_COMPONENT_DATA__';
-
-/**
- * Interface implemented by the bookend components.
- * @interface
- */
-export class BookendComponentInterface {
-  /**
-   * Asserts whether the comopnent is valid.
-   * @param {../bookend-component.BookendComponentDef} unusedComponentJson
-   * @param {!Element} unusedElement
-   */
-  assertValidity(unusedComponentJson, unusedElement) {}
-
-  /**
-   * Builds the component.
-   * @param {../bookend-component.BookendComponentDef} unusedComponentJson
-   * @param {!Element} unusedElement
-   * @return {../bookend-component.BookendComponentDef}
-   */
-  build(unusedComponentJson, unusedElement) {}
-
-  /**
-   * Builds the DOM element for the component.
-   * @param {../bookend-component.BookendComponentDef} unusedComponentJson
-   * @param {!Window} unusedWin
-   * @param {!Object} unusedData
-   * @return {!Element}
-   */
-  buildElement(unusedComponentJson, unusedWin, unusedData) {}
-}
diff --git a/extensions/amp-story/1.0/bookend/components/cta-link.js b/extensions/amp-story/1.0/bookend/components/cta-link.js
deleted file mode 100644
index 920880dc7432a..0000000000000
--- a/extensions/amp-story/1.0/bookend/components/cta-link.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {
-  AMP_STORY_BOOKEND_COMPONENT_DATA,
-  BOOKEND_COMPONENT_TYPES,
-  BookendComponentInterface,
-} from './bookend-component-interface';
-import {addAttributesToElement} from '../../../../../src/dom';
-import {dict} from '../../../../../src/utils/object';
-import {getSourceUrl, resolveRelativeUrl} from '../../../../../src/url';
-import {htmlFor, htmlRefs} from '../../../../../src/static-template';
-import {isArray} from '../../../../../src/types';
-import {userAssert} from '../../../../../src/log';
-import {userAssertValidProtocol} from '../../utils';
-
-/**
- * @typedef {{
- *   url: string,
- *   text: string,
- * }}
- */
-let CtaLinkArrDef;
-
-/**
- * @typedef {{
- *   type: string,
- *   links: !Array<CtaLinkArrDef>,
- * }}
- */
-export let CtaLinkDef;
-
-/**
- * Builder class for the call to action link component.
- * @implements {BookendComponentInterface}
- */
-export class CtaLinkComponent {
-  /**
-   * @param {!../bookend-component.BookendComponentDef} ctaLinksJson
-   * @override
-   * */
-  assertValidity(ctaLinksJson, element) {
-    const links = /** @type {!Array} */ (ctaLinksJson['links']);
-    userAssert(
-      links && isArray(links) && links.length > 0,
-      'CTA link component must be an array and contain at least one link ' +
-        'inside it.'
-    );
-
-    links.forEach((ctaLink) => {
-      userAssert(
-        'text' in ctaLink && 'url' in ctaLink,
-        'Links in CTA link component must contain `text` field and a `url`.'
-      );
-
-      userAssertValidProtocol(element, ctaLink['url']);
-    });
-  }
-
-  /**
-   * @param {!../bookend-component.BookendComponentDef} ctaLinksJson
-   * @param {!Element} unusedElement
-   * @return {!CtaLinkDef}
-   * @override
-   * */
-  build(ctaLinksJson, unusedElement) {
-    const ctaLinks = {
-      type: ctaLinksJson['type'],
-      links: ctaLinksJson['links'],
-    };
-
-    return ctaLinks;
-  }
-
-  /** @override */
-  buildElement(ctaLinksData, win, data) {
-    const html = htmlFor(win.document);
-    const container = html`
-      <div
-        class="i-amphtml-story-bookend-cta-link-wrapper
-          i-amphtml-story-bookend-component"
-      ></div>
-    `;
-
-    let linkSeed = html`
-      <a class="i-amphtml-story-bookend-cta-link" target="_top">
-        <div class="i-amphtml-story-bookend-cta-link-text" ref="linkText"></div>
-      </a>
-    `;
-    /** @type {!Array} */ (ctaLinksData['links']).forEach((currentLink) => {
-      const el = linkSeed.cloneNode(/* deep */ true);
-      addAttributesToElement(
-        el,
-        dict({
-          'href': resolveRelativeUrl(
-            currentLink['url'],
-            getSourceUrl(win.location)
-          ),
-        })
-      );
-
-      if (currentLink['amphtml'] === true) {
-        addAttributesToElement(el, dict({'rel': 'amphtml'}));
-      }
-
-      const refs = htmlRefs(el);
-      refs['linkText'].textContent = currentLink['text'];
-
-      el[AMP_STORY_BOOKEND_COMPONENT_DATA] = {
-        position: data.position,
-        type: BOOKEND_COMPONENT_TYPES.CTA_LINK,
-      };
-
-      container.appendChild(el);
-    });
-
-    linkSeed = null; // GC
-
-    return container;
-  }
-}
diff --git a/extensions/amp-story/1.0/bookend/components/heading.js b/extensions/amp-story/1.0/bookend/components/heading.js
deleted file mode 100644
index 6440d1ce78074..0000000000000
--- a/extensions/amp-story/1.0/bookend/components/heading.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {
-  AMP_STORY_BOOKEND_COMPONENT_DATA,
-  BOOKEND_COMPONENT_TYPES,
-  BookendComponentInterface,
-} from './bookend-component-interface';
-import {htmlFor} from '../../../../../src/static-template';
-import {userAssert} from '../../../../../src/log';
-
-/**
- * @typedef {{
- *   type: string,
- *   text: string,
- * }}
- */
-export let HeadingComponentDef;
-
-/**
- * Builder class for the heading component that sits on top of a given set of
- * components in the bookend.
- * @implements {BookendComponentInterface}
- */
-export class HeadingComponent {
-  /**
-   * @param {!../bookend-component.BookendComponentDef} headingJson
-   * @override
-   * */
-  assertValidity(headingJson) {
-    userAssert(
-      'text' in headingJson,
-      'Heading component must contain `text` field, skipping invalid.'
-    );
-  }
-
-  /**
-   * @param {!../bookend-component.BookendComponentDef} headingJson
-   * @return {!HeadingComponentDef}
-   * @override
-   * */
-  build(headingJson) {
-    return {
-      type: headingJson['type'],
-      text: headingJson['text'],
-    };
-  }
-
-  /** @override */
-  buildElement(headingData, win, data) {
-    const html = htmlFor(win.document);
-    const template = html`
-      <h3
-        class="i-amphtml-story-bookend-component
-        i-amphtml-story-bookend-heading"
-      ></h3>
-    `;
-    template[AMP_STORY_BOOKEND_COMPONENT_DATA] = {
-      position: data.position,
-      type: BOOKEND_COMPONENT_TYPES.HEADING,
-    };
-
-    template.textContent = headingData.text;
-
-    return template;
-  }
-}
diff --git a/extensions/amp-story/1.0/bookend/components/landscape.js b/extensions/amp-story/1.0/bookend/components/landscape.js
deleted file mode 100644
index 4f4a755604500..0000000000000
--- a/extensions/amp-story/1.0/bookend/components/landscape.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {
-  AMP_STORY_BOOKEND_COMPONENT_DATA,
-  BOOKEND_COMPONENT_TYPES,
-  BookendComponentInterface,
-} from './bookend-component-interface';
-import {addAttributesToElement} from '../../../../../src/dom';
-import {dict} from '../../../../../src/utils/object';
-import {
-  getSourceOriginForElement,
-  resolveImgSrc,
-  userAssertValidProtocol,
-} from '../../utils';
-import {getSourceUrl, resolveRelativeUrl} from '../../../../../src/url';
-import {htmlFor, htmlRefs} from '../../../../../src/static-template';
-import {userAssert} from '../../../../../src/log';
-
-/**
- * @typedef {{
- *   type: string,
- *   category: string,
- *   title: string,
- *   url: string,
- *   domainName: string,
- *   image: string,
- * }}
- */
-export let LandscapeComponentDef;
-
-/**
- * @struct @typedef {{
- *   category: !Element,
- *   title: !Element,
- *   image: !Element,
- *   meta: !Element,
- *   domainName: string,
- * }}
- */
-let landscapeElementsDef;
-
-/**
- * Builder class for the landscape component.
- * @implements {BookendComponentInterface}
- */
-export class LandscapeComponent {
-  /** @override */
-  assertValidity(landscapeJson, element) {
-    const requiredFields = ['title', 'image', 'url'];
-    const hasAllRequiredFields = !requiredFields.some(
-      (field) => !(field in landscapeJson)
-    );
-    userAssert(
-      hasAllRequiredFields,
-      'Landscape component must contain ' +
-        requiredFields.map((field) => '`' + field + '`').join(', ') +
-        ' fields, skipping invalid.'
-    );
-
-    userAssertValidProtocol(element, landscapeJson['url']);
-    userAssertValidProtocol(element, landscapeJson['image']);
-  }
-
-  /** @override */
-  build(landscapeJson, element) {
-    const url = landscapeJson['url'];
-    const domainName = getSourceOriginForElement(element, url);
-
-    const landscape = {
-      url,
-      domainName,
-      type: landscapeJson['type'],
-      title: landscapeJson['title'],
-      category: landscapeJson['category'],
-      image: landscapeJson['image'],
-    };
-
-    if (landscapeJson['amphtml']) {
-      landscape.amphtml = landscapeJson['amphtml'];
-    }
-
-    return landscape;
-  }
-
-  /** @override */
-  buildElement(landscapeData, win, data) {
-    landscapeData = /** @type {LandscapeComponentDef} */ (landscapeData);
-    const html = htmlFor(win.document);
-    const el = html`
-        <a class="i-amphtml-story-bookend-landscape
-            i-amphtml-story-bookend-component" target="_top">
-          <h2 class="i-amphtml-story-bookend-component-category"
-            ref="category"></h2>
-          <h2 class="i-amphtml-story-bookend-article-heading"
-            ref="title"></h2>
-          <div class="i-amphtml-story-bookend-landscape-image">
-            <img ref="image"></img>
-          </div>
-          <div class="i-amphtml-story-bookend-component-meta"
-            ref="meta"></div>
-        </a>`;
-    addAttributesToElement(
-      el,
-      dict({
-        'href': resolveRelativeUrl(
-          landscapeData.url,
-          getSourceUrl(win.location)
-        ),
-      })
-    );
-
-    el[AMP_STORY_BOOKEND_COMPONENT_DATA] = {
-      position: data.position,
-      type: BOOKEND_COMPONENT_TYPES.LANDSCAPE,
-    };
-
-    if (landscapeData['amphtml'] === true) {
-      addAttributesToElement(el, dict({'rel': 'amphtml'}));
-    }
-
-    const landscapeEls = htmlRefs(el);
-    const {
-      category,
-      title,
-      image,
-      meta,
-    } = /** @type {!landscapeElementsDef} */ (landscapeEls);
-
-    category.textContent = landscapeData.category;
-    title.textContent = landscapeData.title;
-
-    addAttributesToElement(
-      image,
-      dict({'src': resolveImgSrc(win, landscapeData.image)})
-    );
-
-    meta.textContent = landscapeData.domainName;
-
-    return el;
-  }
-}
diff --git a/extensions/amp-story/1.0/bookend/components/portrait.js b/extensions/amp-story/1.0/bookend/components/portrait.js
deleted file mode 100644
index 1fa2591389c81..0000000000000
--- a/extensions/amp-story/1.0/bookend/components/portrait.js
+++ /dev/null
@@ -1,153 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {
-  AMP_STORY_BOOKEND_COMPONENT_DATA,
-  BOOKEND_COMPONENT_TYPES,
-  BookendComponentInterface,
-} from './bookend-component-interface';
-import {addAttributesToElement} from '../../../../../src/dom';
-import {dict} from '../../../../../src/utils/object';
-import {
-  getSourceOriginForElement,
-  resolveImgSrc,
-  userAssertValidProtocol,
-} from '../../utils';
-import {getSourceUrl, resolveRelativeUrl} from '../../../../../src/url';
-import {htmlFor, htmlRefs} from '../../../../../src/static-template';
-import {userAssert} from '../../../../../src/log';
-
-/**
- * @typedef {{
- *   type: string,
- *   category: string,
- *   title: string,
- *   url: string,
- *   domainName: string,
- *   image: string,
- * }}
- */
-export let PortraitComponentDef;
-
-/**
- * @struct @typedef {{
- *   category: !Element,
- *   title: !Element,
- *   image: !Element,
- *   meta: !Element,
- *   domainName: string
- * }}
- */
-let portraitElementsDef;
-
-/**
- * Builder class for the portrait component.
- * @implements {BookendComponentInterface}
- */
-export class PortraitComponent {
-  /** @override */
-  assertValidity(portraitJson, element) {
-    const requiredFields = ['title', 'image', 'url'];
-    const hasAllRequiredFields = !requiredFields.some(
-      (field) => !(field in portraitJson)
-    );
-    userAssert(
-      hasAllRequiredFields,
-      'Portrait component must contain ' +
-        requiredFields.map((field) => '`' + field + '`').join(', ') +
-        ' fields, skipping invalid.'
-    );
-
-    userAssertValidProtocol(element, portraitJson['url']);
-    userAssertValidProtocol(element, portraitJson['image']);
-  }
-
-  /** @override */
-  build(portraitJson, element) {
-    const url = portraitJson['url'];
-    const domainName = getSourceOriginForElement(element, url);
-
-    const portrait = {
-      url,
-      domainName,
-      type: portraitJson['type'],
-      category: portraitJson['category'],
-      title: portraitJson['title'],
-      image: portraitJson['image'],
-    };
-
-    if (portraitJson['amphtml']) {
-      portrait.amphtml = portraitJson['amphtml'];
-    }
-
-    return portrait;
-  }
-
-  /** @override */
-  buildElement(portraitData, win, data) {
-    portraitData = /** @type {PortraitComponentDef} */ (portraitData);
-    const html = htmlFor(win.document);
-    const el = html`
-        <a class="i-amphtml-story-bookend-portrait i-amphtml-story-bookend-component" target="_top">
-          <h2 class="i-amphtml-story-bookend-component-category"
-            ref="category"></h2>
-          <h2 class="i-amphtml-story-bookend-article-heading"
-            ref="title"></h2>
-          <div class="i-amphtml-story-bookend-portrait-image">
-            <img ref="image"></img>
-          </div>
-          <div class="i-amphtml-story-bookend-component-meta"
-            ref="meta"></div>
-        </a>`;
-    addAttributesToElement(
-      el,
-      dict({
-        'href': resolveRelativeUrl(
-          portraitData.url,
-          getSourceUrl(win.location)
-        ),
-      })
-    );
-
-    el[AMP_STORY_BOOKEND_COMPONENT_DATA] = {
-      position: data.position,
-      type: BOOKEND_COMPONENT_TYPES.PORTRAIT,
-    };
-
-    if (portraitData['amphtml'] === true) {
-      addAttributesToElement(el, dict({'rel': 'amphtml'}));
-    }
-
-    const {
-      category,
-      title,
-      image,
-      meta,
-    } = /** @type {!portraitElementsDef} */ (htmlRefs(el));
-
-    category.textContent = portraitData.category;
-    title.textContent = portraitData.title;
-
-    addAttributesToElement(
-      image,
-      dict({'src': resolveImgSrc(win, portraitData.image)})
-    );
-
-    meta.textContent = portraitData.domainName;
-
-    return el;
-  }
-}
diff --git a/extensions/amp-story/1.0/bookend/components/text-box.js b/extensions/amp-story/1.0/bookend/components/text-box.js
deleted file mode 100644
index 2e2c787c8b207..0000000000000
--- a/extensions/amp-story/1.0/bookend/components/text-box.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {
-  AMP_STORY_BOOKEND_COMPONENT_DATA,
-  BOOKEND_COMPONENT_TYPES,
-  BookendComponentInterface,
-} from './bookend-component-interface';
-import {htmlFor} from '../../../../../src/static-template';
-import {isArray} from '../../../../../src/types';
-import {userAssert} from '../../../../../src/log';
-
-/**
- * @typedef {{
- *   type: string,
- *   text: string
- * }}
- */
-export let TextBoxComponentDef;
-
-/**
- * Builder class for the textbox bookend component.
- * @implements {BookendComponentInterface}
- */
-export class TextBoxComponent {
-  /**
-   * @param {!../bookend-component.BookendComponentDef} textboxJson
-   * @override
-   * */
-  assertValidity(textboxJson) {
-    userAssert(
-      'text' in textboxJson &&
-        isArray(textboxJson['text']) &&
-        textboxJson['text'].length > 0,
-      'Textbox component must contain ' +
-        '`text` array and at least one element inside it, ' +
-        'skipping invalid.'
-    );
-  }
-
-  /**
-   * @param {!../bookend-component.BookendComponentDef} textboxJson
-   * @return {!TextBoxComponentDef}
-   * @override
-   * */
-  build(textboxJson) {
-    const {type, text} = textboxJson;
-    return {type, text};
-  }
-
-  /** @override */
-  buildElement(textboxData, win, data) {
-    const html = htmlFor(win.document);
-    const container = html`
-      <div
-        class="i-amphtml-story-bookend-textbox
-          i-amphtml-story-bookend-component"
-      ></div>
-    `;
-    container[AMP_STORY_BOOKEND_COMPONENT_DATA] = {
-      position: data.position,
-      type: BOOKEND_COMPONENT_TYPES.TEXTBOX,
-    };
-
-    let textSeed = html` <h3 class="i-amphtml-story-bookend-text"></h3> `;
-    /** @type {!Array} */ (textboxData['text']).forEach((currentLine) => {
-      const el = textSeed.cloneNode(/* deep */ true);
-      el.textContent = currentLine;
-      container.appendChild(el);
-    });
-
-    textSeed = null;
-
-    return container;
-  }
-}
diff --git a/extensions/amp-story/1.0/default-media.js b/extensions/amp-story/1.0/default-media.js
deleted file mode 100644
index 9058594add949..0000000000000
--- a/extensions/amp-story/1.0/default-media.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-export const BLANK_AUDIO_SRC =
-  'data:audio/wav;base64,UklGRjIAAABXQVZFZm10IBA' +
-  'AAAABAAEAIlYAAESsAAACABAAZGF0YRAAAAAAAAAAAAAAAAAAAAAAAA==';
-
-export const BLANK_VIDEO_SRC =
-  'data:video/mp4;base64,AAAAHGZ0eXBNNFYgAAACAG' +
-  'lzb21pc28yYXZjMQAAAAhmcmVlAAAGF21kYXTeBAAAbGliZmFhYyAxLjI4AABCAJMgBDIARw' +
-  'AAArEGBf//rdxF6b3m2Ui3lizYINkj7u94MjY0IC0gY29yZSAxNDIgcjIgOTU2YzhkOCAtIE' +
-  'guMjY0L01QRUctNCBBVkMgY29kZWMgLSBDb3B5bGVmdCAyMDAzLTIwMTQgLSBodHRwOi8vd3' +
-  'd3LnZpZGVvbGFuLm9yZy94MjY0Lmh0bWwgLSBvcHRpb25zOiBjYWJhYz0wIHJlZj0zIGRlYm' +
-  'xvY2s9MTowOjAgYW5hbHlzZT0weDE6MHgxMTEgbWU9aGV4IHN1Ym1lPTcgcHN5PTEgcHN5X3' +
-  'JkPTEuMDA6MC4wMCBtaXhlZF9yZWY9MSBtZV9yYW5nZT0xNiBjaHJvbWFfbWU9MSB0cmVsbG' +
-  'lzPTEgOHg4ZGN0PTAgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0xIGNocm9tYV' +
-  '9xcF9vZmZzZXQ9LTIgdGhyZWFkcz02IGxvb2thaGVhZF90aHJlYWRzPTEgc2xpY2VkX3Rocm' +
-  'VhZHM9MCBucj0wIGRlY2ltYXRlPTEgaW50ZXJsYWNlZD0wIGJsdXJheV9jb21wYXQ9MCBjb2' +
-  '5zdHJhaW5lZF9pbnRyYT0wIGJmcmFtZXM9MCB3ZWlnaHRwPTAga2V5aW50PTI1MCBrZXlpbn' +
-  'RfbWluPTI1IHNjZW5lY3V0PTQwIGludHJhX3JlZnJlc2g9MCByY19sb29rYWhlYWQ9NDAgcm' +
-  'M9Y3JmIG1idHJlZT0xIGNyZj0yMy4wIHFjb21wPTAuNjAgcXBtaW49MCBxcG1heD02OSBxcH' +
-  'N0ZXA9NCB2YnZfbWF4cmF0ZT03NjggdmJ2X2J1ZnNpemU9MzAwMCBjcmZfbWF4PTAuMCBuYW' +
-  'xfaHJkPW5vbmUgZmlsbGVyPTAgaXBfcmF0aW89MS40MCBhcT0xOjEuMDAAgAAAAFZliIQL8m' +
-  'KAAKvMnJycnJycnJycnXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' +
-  'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXiEASZACGQAjgCEASZACGQAjgAAAAAdBmjgX4G' +
-  'SAIQBJkAIZACOAAAAAB0GaVAX4GSAhAEmQAhkAI4AhAEmQAhkAI4AAAAAGQZpgL8DJIQBJkA' +
-  'IZACOAIQBJkAIZACOAAAAABkGagC/AySEASZACGQAjgAAAAAZBmqAvwMkhAEmQAhkAI4AhAE' +
-  'mQAhkAI4AAAAAGQZrAL8DJIQBJkAIZACOAAAAABkGa4C/AySEASZACGQAjgCEASZACGQAjgA' +
-  'AAAAZBmwAvwMkhAEmQAhkAI4AAAAAGQZsgL8DJIQBJkAIZACOAIQBJkAIZACOAAAAABkGbQC' +
-  '/AySEASZACGQAjgCEASZACGQAjgAAAAAZBm2AvwMkhAEmQAhkAI4AAAAAGQZuAL8DJIQBJkA' +
-  'IZACOAIQBJkAIZACOAAAAABkGboC/AySEASZACGQAjgAAAAAZBm8AvwMkhAEmQAhkAI4AhAE' +
-  'mQAhkAI4AAAAAGQZvgL8DJIQBJkAIZACOAAAAABkGaAC/AySEASZACGQAjgCEASZACGQAjgA' +
-  'AAAAZBmiAvwMkhAEmQAhkAI4AhAEmQAhkAI4AAAAAGQZpAL8DJIQBJkAIZACOAAAAABkGaYC' +
-  '/AySEASZACGQAjgCEASZACGQAjgAAAAAZBmoAvwMkhAEmQAhkAI4AAAAAGQZqgL8DJIQBJkA' +
-  'IZACOAIQBJkAIZACOAAAAABkGawC/AySEASZACGQAjgAAAAAZBmuAvwMkhAEmQAhkAI4AhAE' +
-  'mQAhkAI4AAAAAGQZsAL8DJIQBJkAIZACOAAAAABkGbIC/AySEASZACGQAjgCEASZACGQAjgA' +
-  'AAAAZBm0AvwMkhAEmQAhkAI4AhAEmQAhkAI4AAAAAGQZtgL8DJIQBJkAIZACOAAAAABkGbgC' +
-  'vAySEASZACGQAjgCEASZACGQAjgAAAAAZBm6AnwMkhAEmQAhkAI4AhAEmQAhkAI4AhAEmQAh' +
-  'kAI4AhAEmQAhkAI4AAAAhubW9vdgAAAGxtdmhkAAAAAAAAAAAAAAAAAAAD6AAABDcAAQAAAQ' +
-  'AAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAA' +
-  'AAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAzB0cmFrAAAAXHRraGQAAAADAAAAAAAAAAAAAAABAA' +
-  'AAAAAAA+kAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAA' +
-  'BAAAAAALAAAACQAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAAPpAAAAAAABAAAAAAKobW' +
-  'RpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAB1MAAAdU5VxAAAAAAALWhkbHIAAAAAAAAAAHZpZG' +
-  'UAAAAAAAAAAAAAAABWaWRlb0hhbmRsZXIAAAACU21pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAA' +
-  'AAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAhNzdGJsAAAAr3N0c2QAAA' +
-  'AAAAAAAQAAAJ9hdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAALAAkABIAAAASAAAAAAAAA' +
-  'ABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAALWF2Y0MBQsAN/+EAFW' +
-  'dCwA3ZAsTsBEAAAPpAADqYA8UKkgEABWjLg8sgAAAAHHV1aWRraEDyXyRPxbo5pRvPAyPzAA' +
-  'AAAAAAABhzdHRzAAAAAAAAAAEAAAAeAAAD6QAAABRzdHNzAAAAAAAAAAEAAAABAAAAHHN0c2' +
-  'MAAAAAAAAAAQAAAAEAAAABAAAAAQAAAIxzdHN6AAAAAAAAAAAAAAAeAAADDwAAAAsAAAALAA' +
-  'AACgAAAAoAAAAKAAAACgAAAAoAAAAKAAAACgAAAAoAAAAKAAAACgAAAAoAAAAKAAAACgAAAA' +
-  'oAAAAKAAAACgAAAAoAAAAKAAAACgAAAAoAAAAKAAAACgAAAAoAAAAKAAAACgAAAAoAAAAKAA' +
-  'AAiHN0Y28AAAAAAAAAHgAAAEYAAANnAAADewAAA5gAAAO0AAADxwAAA+MAAAP2AAAEEgAABC' +
-  'UAAARBAAAEXQAABHAAAASMAAAEnwAABLsAAATOAAAE6gAABQYAAAUZAAAFNQAABUgAAAVkAA' +
-  'AFdwAABZMAAAWmAAAFwgAABd4AAAXxAAAGDQAABGh0cmFrAAAAXHRraGQAAAADAAAAAAAAAA' +
-  'AAAAACAAAAAAAABDcAAAAAAAAAAAAAAAEBAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAA' +
-  'AAAAAAAABAAAAAAAAAAAAAAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAAQkAAADcAABAA' +
-  'AAAAPgbWRpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAC7gAAAykBVxAAAAAAALWhkbHIAAAAAAA' +
-  'AAAHNvdW4AAAAAAAAAAAAAAABTb3VuZEhhbmRsZXIAAAADi21pbmYAAAAQc21oZAAAAAAAAA' +
-  'AAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAADT3N0YmwAAABnc3RzZA' +
-  'AAAAAAAAABAAAAV21wNGEAAAAAAAAAAQAAAAAAAAAAAAIAEAAAAAC7gAAAAAAAM2VzZHMAAA' +
-  'AAA4CAgCIAAgAEgICAFEAVBbjYAAu4AAAADcoFgICAAhGQBoCAgAECAAAAIHN0dHMAAAAAAA' +
-  'AAAgAAADIAAAQAAAAAAQAAAkAAAAFUc3RzYwAAAAAAAAAbAAAAAQAAAAEAAAABAAAAAgAAAA' +
-  'IAAAABAAAAAwAAAAEAAAABAAAABAAAAAIAAAABAAAABgAAAAEAAAABAAAABwAAAAIAAAABAA' +
-  'AACAAAAAEAAAABAAAACQAAAAIAAAABAAAACgAAAAEAAAABAAAACwAAAAIAAAABAAAADQAAAA' +
-  'EAAAABAAAADgAAAAIAAAABAAAADwAAAAEAAAABAAAAEAAAAAIAAAABAAAAEQAAAAEAAAABAA' +
-  'AAEgAAAAIAAAABAAAAFAAAAAEAAAABAAAAFQAAAAIAAAABAAAAFgAAAAEAAAABAAAAFwAAAA' +
-  'IAAAABAAAAGAAAAAEAAAABAAAAGQAAAAIAAAABAAAAGgAAAAEAAAABAAAAGwAAAAIAAAABAA' +
-  'AAHQAAAAEAAAABAAAAHgAAAAIAAAABAAAAHwAAAAQAAAABAAAA4HN0c3oAAAAAAAAAAAAAAD' +
-  'MAAAAaAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAA' +
-  'AACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAA' +
-  'kAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAA' +
-  'AACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAACMc3RjbwAAAA' +
-  'AAAAAfAAAALAAAA1UAAANyAAADhgAAA6IAAAO+AAAD0QAAA+0AAAQAAAAEHAAABC8AAARLAA' +
-  'AEZwAABHoAAASWAAAEqQAABMUAAATYAAAE9AAABRAAAAUjAAAFPwAABVIAAAVuAAAFgQAABZ' +
-  '0AAAWwAAAFzAAABegAAAX7AAAGFwAAAGJ1ZHRhAAAAWm1ldGEAAAAAAAAAIWhkbHIAAAAAAA' +
-  'AAAG1kaXJhcHBsAAAAAAAAAAAAAAAALWlsc3QAAAAlqXRvbwAAAB1kYXRhAAAAAQAAAABMYX' +
-  'ZmNTUuMzMuMTAw';
diff --git a/extensions/amp-story/1.0/development-ui.js b/extensions/amp-story/1.0/development-ui.js
index 5d995411be8b6..46224dabf64a9 100644
--- a/extensions/amp-story/1.0/development-ui.js
+++ b/extensions/amp-story/1.0/development-ui.js
@@ -15,7 +15,7 @@
  */
 import {LogLevel, dev} from '../../../src/log';
 import {Services} from '../../../src/services';
-import {isArray} from '../../../src/types';
+import {isArray} from '../../../src/core/types';
 import {removeChildren} from '../../../src/dom';
 import {toggle} from '../../../src/style';
 
diff --git a/extensions/amp-story/1.0/embed-mode.js b/extensions/amp-story/1.0/embed-mode.js
index 66af454a86e14..7179d2f8e9ef0 100644
--- a/extensions/amp-story/1.0/embed-mode.js
+++ b/extensions/amp-story/1.0/embed-mode.js
@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {isEnumValue} from '../../../src/types';
-import {parseQueryString} from '../../../src/url';
+import {isEnumValue} from '../../../src/core/types';
+import {parseQueryString} from '../../../src/core/types/string/url';
 
 /**
  * Embed mode for AMP story.  See ../embed-modes.md for details.
@@ -30,7 +30,6 @@ export const EmbedMode = {
    * TBD embed mode.
    *
    * This differs from the NOT_EMBEDDED embed mode in the following ways:
-   * - Hides bookend
    * - Hides all system layer buttons
    * - Disables swipe-based user education
    * - Disallows ads
@@ -44,9 +43,7 @@ export const EmbedMode = {
    * redundant.
    *
    * This differs from the NOT_EMBEDDED embed mode in the following ways:
-   * - Removes "share" pill from desktop UI
-   * - Removes "share" icon from mobile UI
-   * - Removes sharing section from bookend
+   * - Removes share icon from system layer
    * - TODO(#14923): Removes the link information from embedded UIs.
    */
   NO_SHARING: 2,
@@ -56,12 +53,21 @@ export const EmbedMode = {
    *
    * This differs from the NOT_EMBEDDED embed mode in the following ways:
    * - Auto-advances pages by a given duration.
-   * - Hides bookend
    * - Hides all system layer buttons
    * - Disables swipe-based user education
    * - Disallows ads
    */
   PREVIEW: 3,
+
+  /**
+   * This mode is intended for embedders that natively handle the audio and
+   * sharing experiences, through native controls and viewer communication.
+   *
+   * This differs from the NOT_EMBEDDED embed mode in the following ways:
+   * - Removes share icon from system layer
+   * - Removes audio icon from system layer
+   */
+  NO_SHARING_NOR_AUDIO_UI: 4,
 };
 
 /**
diff --git a/extensions/amp-story/1.0/history.js b/extensions/amp-story/1.0/history.js
index b8394aaa6e3cc..37b2d9bb9c045 100644
--- a/extensions/amp-story/1.0/history.js
+++ b/extensions/amp-story/1.0/history.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getState} from '../../../src/history';
-import {parseJson} from '../../../src/json';
+import {parseJson} from '../../../src/core/types/object/json';
 
 const EXPIRATION_DURATION_MILLIS = 10 * 60 * 1000; // 10 Minutes
 const CREATION_TIME = 'time';
@@ -27,7 +27,6 @@ export const LOCAL_STORAGE_KEY = 'amp-story-state';
 /** @enum {string} */
 export const HistoryState = {
   ATTACHMENT_PAGE_ID: 'ampStoryAttachmentPageId',
-  BOOKEND_ACTIVE: 'ampStoryBookendActive',
   NAVIGATION_PATH: 'ampStoryNavigationPath',
 };
 
@@ -68,8 +67,9 @@ export function getHistoryState(win, stateName) {
     state = getLocalStorageState(win);
   }
   if (state) {
-    return /** @type {string|boolean|Array<string>|null} */ (state[stateName] ||
-      null);
+    return /** @type {string|boolean|Array<string>|null} */ (
+      state[stateName] || null
+    );
   }
   return null;
 }
@@ -81,8 +81,12 @@ export function getHistoryState(win, stateName) {
  */
 function getLocalStorageState(win) {
   // We definitely don't want to restore state from localStorage if the URL
-  // is explicit about the page that should be shown.
-  if (win.location.hash.indexOf('page=') != -1) {
+  // is explicit about it.
+  const {hash} = win.location;
+  if (
+    hash.indexOf('page=') != -1 ||
+    hash.indexOf('ignoreLocalStorageHistory') != -1
+  ) {
     return undefined;
   }
   const container = getLocalStorageStateContainer(win);
diff --git a/extensions/amp-story/1.0/jsonld.js b/extensions/amp-story/1.0/jsonld.js
index 99e43b468eb65..5f9e5078e86fd 100644
--- a/extensions/amp-story/1.0/jsonld.js
+++ b/extensions/amp-story/1.0/jsonld.js
@@ -15,7 +15,7 @@
  */
 
 import {isJsonLdScriptTag} from '../../../src/dom';
-import {tryParseJson} from '../../../src/json';
+import {tryParseJson} from '../../../src/core/types/object/json';
 import {user} from '../../../src/log';
 
 const TAG = 'getJsonLd';
diff --git a/extensions/amp-story/1.0/live-story-manager.js b/extensions/amp-story/1.0/live-story-manager.js
index 1cbe43e9d8716..42ce020377a67 100644
--- a/extensions/amp-story/1.0/live-story-manager.js
+++ b/extensions/amp-story/1.0/live-story-manager.js
@@ -15,10 +15,10 @@
  */
 
 import {Action, getStoreService} from './amp-story-store-service';
-import {CommonSignals} from '../../../src/common-signals';
+import {CommonSignals} from '../../../src/core/constants/common-signals';
 import {Services} from '../../../src/services';
 import {createElementWithAttributes, lastChildElement} from '../../../src/dom';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {userAssert} from '../../../src/log';
 
 /**
diff --git a/extensions/amp-story/1.0/loading-spinner.js b/extensions/amp-story/1.0/loading-spinner.js
index 0736e19449609..804d1b88c0557 100644
--- a/extensions/amp-story/1.0/loading-spinner.js
+++ b/extensions/amp-story/1.0/loading-spinner.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import {dev} from '../../../src/log';
-import {dict} from './../../../src/utils/object';
+import {dict} from './../../../src/core/types/object';
 import {renderAsElement} from './simple-template';
 
 /** @const {string} */
diff --git a/extensions/amp-story/1.0/logging.js b/extensions/amp-story/1.0/logging.js
index a75ca3ec4e379..c2aa1822fe18e 100644
--- a/extensions/amp-story/1.0/logging.js
+++ b/extensions/amp-story/1.0/logging.js
@@ -15,7 +15,7 @@
  */
 import {LogLevel, devAssert} from '../../../src/log';
 import {scopedQuerySelectorAll} from '../../../src/dom';
-import {tryResolve} from '../../../src/utils/promise';
+import {tryResolve} from '../../../src/core/data-structures/promise';
 
 /** @typedef {function(!Element): (boolean|!Promise<boolean>)} */
 let ElementPredicate_1_0_Def; // eslint-disable-line google-camelcase/google-camelcase
diff --git a/extensions/amp-story/1.0/media-performance-metrics-service.js b/extensions/amp-story/1.0/media-performance-metrics-service.js
index 19674c23c143f..004038fb12762 100644
--- a/extensions/amp-story/1.0/media-performance-metrics-service.js
+++ b/extensions/amp-story/1.0/media-performance-metrics-service.js
@@ -19,11 +19,10 @@ import {
   listen,
 } from '../../../src/event-helper';
 import {Services} from '../../../src/services';
-import {TickLabel} from '../../../src/enums';
+import {TickLabel} from '../../../src/core/constants/enums';
 import {dev} from '../../../src/log';
-import {escapeCssSelectorIdent} from '../../../src/css';
-import {lastChildElement} from '../../../src/dom';
-import {map} from '../../../src/utils/object';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
+import {lastChildElement, matches} from '../../../src/dom';
 import {registerServiceBuilder} from '../../../src/service';
 import {urls} from '../../../src/config';
 
@@ -48,6 +47,15 @@ const CacheState = {
   CACHE: 2, // Served from cache.
 };
 
+/**
+ * Video is first page status.
+ * @enum
+ */
+const FirstPageState = {
+  NOT_ON_FIRST_PAGE: 0, // Video is not on the first page.
+  ON_FIRST_PAGE: 1, // Video is on the first page.
+};
+
 /**
  * @typedef {{
  *   start: number,
@@ -79,9 +87,6 @@ let MetricsDef;
  */
 let MediaEntryDef;
 
-/** @type {string} */
-const ID_PROPERTY = '__AMP_MEDIA_PERFORMANCE_METRICS_ID';
-
 /** @type {number} */
 const MINIMUM_TIME_THRESHOLD_MS = 1000;
 
@@ -120,12 +125,8 @@ export class MediaPerformanceMetricsService {
    * @param {!Window} win
    */
   constructor(win) {
-    /** @private {number} */
-    this.mediaId_ = 1;
-
-    // TODO(gmajoulet): switch to WeakMap once the AMPHTML project allows them.
-    /** @private @const {!Object<number, !MediaEntryDef>} */
-    this.mediaMap_ = map();
+    /** @private @const {!WeakMap<HTMLMediaElement|EventTarget|null, !MediaEntryDef>} */
+    this.mediaMap_ = new WeakMap();
 
     /** @private @const {!../../../src/service/performance-impl.Performance} */
     this.performanceService_ = Services.performanceFor(win);
@@ -160,7 +161,7 @@ export class MediaPerformanceMetricsService {
 
     const unlisteners = this.listen_(media);
     const mediaEntry = this.getNewMediaEntry_(media, unlisteners);
-    this.setMediaEntry_(media, mediaEntry);
+    this.mediaMap_.set(media, mediaEntry);
 
     // Checks if the media already errored (eg: could have failed the source
     // selection).
@@ -180,14 +181,14 @@ export class MediaPerformanceMetricsService {
    * @param {boolean=} sendMetrics
    */
   stopMeasuring(media, sendMetrics = true) {
-    const mediaEntry = this.getMediaEntry_(media);
+    const mediaEntry = this.mediaMap_.get(media);
 
     if (!mediaEntry) {
       return;
     }
 
     mediaEntry.unlisteners.forEach((unlisten) => unlisten());
-    this.deleteMediaEntry_(media);
+    this.mediaMap_.delete(media);
 
     switch (mediaEntry.status) {
       case Status.PLAYING:
@@ -226,6 +227,12 @@ export class MediaPerformanceMetricsService {
       TickLabel.VIDEO_CACHE_STATE,
       videoCacheState
     );
+    this.performanceService_.tickDelta(
+      TickLabel.VIDEO_ON_FIRST_PAGE,
+      matches(media, `amp-story-page:first-of-type ${media.tagName}`)
+        ? FirstPageState.ON_FIRST_PAGE
+        : FirstPageState.NOT_ON_FIRST_PAGE
+    );
 
     // If the media errored.
     if (metrics.error !== null) {
@@ -285,33 +292,6 @@ export class MediaPerformanceMetricsService {
     this.performanceService_.flush();
   }
 
-  /**
-   * @param {!HTMLMediaElement} media
-   * @return {!MediaEntryDef}
-   * @private
-   */
-  getMediaEntry_(media) {
-    return this.mediaMap_[media[ID_PROPERTY]];
-  }
-
-  /**
-   * @param {!HTMLMediaElement} media
-   * @param {!MediaEntryDef} mediaEntry
-   * @private
-   */
-  setMediaEntry_(media, mediaEntry) {
-    media[ID_PROPERTY] = media[ID_PROPERTY] || this.mediaId_++;
-    this.mediaMap_[media[ID_PROPERTY]] = mediaEntry;
-  }
-
-  /**
-   * @param {!HTMLMediaElement} media
-   * @private
-   */
-  deleteMediaEntry_(media) {
-    delete this.mediaMap_[media[ID_PROPERTY]];
-  }
-
   /**
    * @param {!HTMLMediaElement} media
    * @param {!Array<!UnlistenDef>} unlisteners
@@ -400,12 +380,9 @@ export class MediaPerformanceMetricsService {
     // Media error target could be either HTMLMediaElement or HTMLSourceElement.
     const media =
       event.target.tagName === 'SOURCE' ? event.target.parent : event.target;
-    const mediaEntry = this.getMediaEntry_(
-      /** @type {!HTMLMediaElement} */ (media)
-    );
+    const mediaEntry = this.mediaMap_.get(media);
 
     mediaEntry.metrics.error = media.error ? media.error.code : 0;
-
     mediaEntry.status = Status.ERRORED;
   }
 
@@ -414,14 +391,11 @@ export class MediaPerformanceMetricsService {
    * @private
    */
   onPauseOrEnded_(event) {
-    const mediaEntry = this.getMediaEntry_(
-      /** @type {!HTMLMediaElement} */ (event.target)
-    );
+    const mediaEntry = this.mediaMap_.get(event.target);
 
     if (mediaEntry.status === Status.PLAYING) {
       this.addWatchTime_(mediaEntry);
     }
-
     mediaEntry.status = Status.PAUSED;
   }
 
@@ -430,10 +404,8 @@ export class MediaPerformanceMetricsService {
    * @private
    */
   onPlaying_(event) {
-    const mediaEntry = this.getMediaEntry_(
-      /** @type {!HTMLMediaElement} */ (event.target)
-    );
-    const {timeStamps, metrics} = mediaEntry;
+    const mediaEntry = this.mediaMap_.get(event.target);
+    const {metrics, timeStamps} = mediaEntry;
 
     if (!metrics.jointLatency) {
       metrics.jointLatency = Date.now() - timeStamps.start;
@@ -452,9 +424,7 @@ export class MediaPerformanceMetricsService {
    * @private
    */
   onWaiting_(event) {
-    const mediaEntry = this.getMediaEntry_(
-      /** @type {!HTMLMediaElement} */ (event.target)
-    );
+    const mediaEntry = this.mediaMap_.get(event.target);
     const {timeStamps} = mediaEntry;
 
     if (mediaEntry.status === Status.PLAYING) {
diff --git a/extensions/amp-story/1.0/media-pool.js b/extensions/amp-story/1.0/media-pool.js
index 33fe5fe6ea254..06b936001d9f3 100644
--- a/extensions/amp-story/1.0/media-pool.js
+++ b/extensions/amp-story/1.0/media-pool.js
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import {BLANK_AUDIO_SRC, BLANK_VIDEO_SRC} from './default-media';
 import {
   BlessTask,
   ELEMENT_BLESSED_PROPERTY_NAME,
@@ -33,9 +32,8 @@ import {Services} from '../../../src/services';
 import {Sources} from './sources';
 import {ampMediaElementFor} from './utils';
 import {dev, devAssert} from '../../../src/log';
-import {findIndex} from '../../../src/utils/array';
+import {findIndex} from '../../../src/core/types/array';
 import {isConnectedNode, matches} from '../../../src/dom';
-import {isExperimentOn} from '../../../src/experiments';
 import {toWin} from '../../../src/types';
 import {userInteractedWith} from '../../../src/video-interface';
 
@@ -194,19 +192,6 @@ export class MediaPool {
      */
     this.blessed_ = false;
 
-    /**
-     * The default source to use for pool-created audio sources,
-     * @private @const {!Object<!MediaType, string>}
-     */
-    this.defaultSources_ = {
-      [MediaType.AUDIO]: isExperimentOn(win, 'disable-amp-story-default-media')
-        ? ''
-        : BLANK_AUDIO_SRC,
-      [MediaType.VIDEO]: isExperimentOn(win, 'disable-amp-story-default-media')
-        ? ''
-        : BLANK_VIDEO_SRC,
-    };
-
     /** @private {?Array<!AmpElement>} */
     this.ampElementsToBless_ = null;
 
@@ -271,23 +256,15 @@ export class MediaPool {
       // comparison with the itervar below, so we have to roll it by hand.
       for (let i = count; i > 0; i--) {
         // Use seed element at end of set to prevent wasting it.
-        const mediaEl = /** @type {!PoolBoundElementDef} */ (i == 1
-          ? mediaElSeed
-          : mediaElSeed.cloneNode(/* deep */ true));
+        const mediaEl = /** @type {!PoolBoundElementDef} */ (
+          i == 1 ? mediaElSeed : mediaElSeed.cloneNode(/* deep */ true)
+        );
         mediaEl.addEventListener('error', this.onMediaError_, {capture: true});
-        const sources = this.getDefaultSource_(type);
         mediaEl.id = POOL_ELEMENT_ID_PREFIX + poolIdCounter++;
         // In Firefox, cloneNode() does not properly copy the muted property
         // that was set in the seed. We need to set it again here.
         mediaEl.muted = true;
         mediaEl[MEDIA_ELEMENT_ORIGIN_PROPERTY_NAME] = MediaElementOrigin.POOL;
-        this.enqueueMediaElementTask_(
-          mediaEl,
-          new UpdateSourcesTask(this.win_, sources)
-        );
-        // TODO(newmuis): Check the 'error' field to see if MEDIA_ERR_DECODE
-        // is returned.  If so, we should adjust the pool size/distribution
-        // between media types.
         this.unallocated[type].push(mediaEl);
       }
     });
@@ -310,18 +287,11 @@ export class MediaPool {
   }
 
   /**
-   * @param {!MediaType} mediaType The media type whose source should be
-   *     retrieved.
-   * @return {!Sources} The default source for the specified type of media.
+   * @return {!Sources} The default source, empty.
+   * @private
    */
-  getDefaultSource_(mediaType) {
-    const sourceStr = this.defaultSources_[mediaType];
-    if (sourceStr === undefined) {
-      dev().error('AMP-STORY', `No default media for type ${mediaType}.`);
-      return new Sources();
-    }
-
-    return new Sources(sourceStr);
+  getDefaultSource_() {
+    return new Sources();
   }
 
   /**
@@ -544,37 +514,41 @@ export class MediaPool {
     return this.enqueueMediaElementTask_(
       poolMediaEl,
       new SwapIntoDomTask(placeholderEl)
-    ).then(
-      () => {
-        this.maybeResetAmpMedia_(ampMediaForPoolEl);
-        this.maybeResetAmpMedia_(ampMediaForDomEl);
+    )
+      .then(() =>
+        Promise.all([
+          this.maybeResetAmpMedia_(ampMediaForPoolEl),
+          this.maybeResetAmpMedia_(ampMediaForDomEl),
+        ])
+      )
+      .then(() =>
         this.enqueueMediaElementTask_(
           poolMediaEl,
           new UpdateSourcesTask(this.win_, sources)
-        );
-        this.enqueueMediaElementTask_(poolMediaEl, new LoadTask());
-      },
-      () => {
+        )
+      )
+      .then(() => this.enqueueMediaElementTask_(poolMediaEl, new LoadTask()))
+      .catch(() => {
         this.forceDeallocateMediaElement_(poolMediaEl);
-      }
-    );
+      });
   }
 
   /**
    * @param {?Element} componentEl
+   * @return {!Promise}
    * @private
    */
   maybeResetAmpMedia_(componentEl) {
     if (!componentEl) {
-      return;
+      return Promise.resolve();
     }
 
     if (componentEl.tagName.toLowerCase() == 'amp-audio') {
       // TODO(alanorozco): Implement reset for amp-audio
-      return;
+      return Promise.resolve();
     }
 
-    componentEl.getImpl().then((impl) => {
+    return componentEl.getImpl().then((impl) => {
       if (impl.resetOnDomChange) {
         impl.resetOnDomChange();
       }
@@ -588,13 +562,12 @@ export class MediaPool {
    *     has been reset.
    */
   resetPoolMediaElementSource_(poolMediaEl) {
-    const mediaType = this.getMediaType_(poolMediaEl);
-    const defaultSources = this.getDefaultSource_(mediaType);
+    const defaultSources = this.getDefaultSource_();
 
     return this.enqueueMediaElementTask_(
       poolMediaEl,
       new UpdateSourcesTask(this.win_, defaultSources)
-    );
+    ).then(() => this.enqueueMediaElementTask_(poolMediaEl, new LoadTask()));
   }
 
   /**
@@ -608,11 +581,13 @@ export class MediaPool {
    */
   swapPoolMediaElementOutOfDom_(poolMediaEl) {
     const placeholderElId = poolMediaEl[REPLACED_MEDIA_PROPERTY_NAME];
-    const placeholderEl = /** @type {!PlaceholderElementDef} */ (dev().assertElement(
-      this.placeholderEls_[placeholderElId],
-      `No media element ${placeholderElId} to put back into DOM after` +
-        'eviction.'
-    ));
+    const placeholderEl = /** @type {!PlaceholderElementDef} */ (
+      dev().assertElement(
+        this.placeholderEls_[placeholderElId],
+        `No media element ${placeholderElId} to put back into DOM after` +
+          'eviction.'
+      )
+    );
     poolMediaEl[REPLACED_MEDIA_PROPERTY_NAME] = null;
 
     const swapOutOfDom = this.enqueueMediaElementTask_(
diff --git a/extensions/amp-story/1.0/media-pool.md b/extensions/amp-story/1.0/media-pool.md
index ea7f693c1e081..79190306a60ae 100644
--- a/extensions/amp-story/1.0/media-pool.md
+++ b/extensions/amp-story/1.0/media-pool.md
@@ -30,5 +30,5 @@ To resolve this, we create a task queue, stored as a property on each media elem
 
 # Code
 
-- MediaPool: https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/1.0/media-pool.js
-- Tasks for queue: https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/1.0/media-tasks.js
+-   MediaPool: https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/1.0/media-pool.js
+-   Tasks for queue: https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/1.0/media-tasks.js
diff --git a/extensions/amp-story/1.0/media-tasks.js b/extensions/amp-story/1.0/media-tasks.js
index 3fc93d48aae6a..b36e2e7aa8a92 100644
--- a/extensions/amp-story/1.0/media-tasks.js
+++ b/extensions/amp-story/1.0/media-tasks.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Deferred, tryResolve} from '../../../src/utils/promise';
+import {Deferred, tryResolve} from '../../../src/core/data-structures/promise';
 import {Sources} from './sources';
 import {isConnectedNode} from '../../../src/dom';
 
@@ -317,6 +317,15 @@ export class LoadTask extends MediaTask {
     mediaEl.load();
     return Promise.resolve();
   }
+
+  /** @override */
+  requiresSynchronousExecution() {
+    // When recycling a media pool element, its sources are removed and the
+    // LoadTask runs to reset it (buffered data, readyState, etc). It needs to
+    // run synchronously so the media element can't be used in a new context
+    // but with old data.
+    return true;
+  }
 }
 
 /**
@@ -373,6 +382,11 @@ export class UpdateSourcesTask extends MediaTask {
     this.newSources_.applyToElement(this.win_, mediaEl);
     return Promise.resolve();
   }
+
+  /** @override */
+  requiresSynchronousExecution() {
+    return true;
+  }
 }
 
 /**
@@ -405,6 +419,11 @@ export class SwapIntoDomTask extends MediaTask {
     );
     return Promise.resolve();
   }
+
+  /** @override */
+  requiresSynchronousExecution() {
+    return true;
+  }
 }
 
 /**
@@ -429,4 +448,9 @@ export class SwapOutOfDomTask extends MediaTask {
     mediaEl.parentElement.replaceChild(this.placeholderEl_, mediaEl);
     return Promise.resolve();
   }
+
+  /** @override */
+  requiresSynchronousExecution() {
+    return true;
+  }
 }
diff --git a/extensions/amp-story/1.0/page-advancement.js b/extensions/amp-story/1.0/page-advancement.js
index 86657a0613e83..a666474e63cc5 100644
--- a/extensions/amp-story/1.0/page-advancement.js
+++ b/extensions/amp-story/1.0/page-advancement.js
@@ -19,6 +19,7 @@ import {
   EmbeddedComponentState,
   InteractiveComponentDef,
   StateProperty,
+  UIType,
   getStoreService,
 } from './amp-story-store-service';
 import {AdvancementMode} from './story-analytics';
@@ -27,13 +28,11 @@ import {TAPPABLE_ARIA_ROLES} from '../../../src/service/action-impl';
 import {VideoEvents} from '../../../src/video-interface';
 import {closest, matches} from '../../../src/dom';
 import {dev, user} from '../../../src/log';
-import {escapeCssSelectorIdent} from '../../../src/css';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {getAmpdoc} from '../../../src/service';
-import {hasTapAction, isMediaDisplayed, timeStrToMillis} from './utils';
+import {hasTapAction, timeStrToMillis} from './utils';
 import {interactiveElementsSelectors} from './amp-story-embedded-component';
-import {listen, listenOnce} from '../../../src/event-helper';
-import {startsWith} from '../../../src/string';
-import {toArray} from '../../../src/types';
+import {listenOnce} from '../../../src/event-helper';
 
 /** @private @const {number} */
 const HOLD_TOUCH_THRESHOLD_MS = 500;
@@ -48,12 +47,32 @@ const PREVIOUS_SCREEN_AREA_RATIO = 0.25;
 const TOP_REGION = 0.8;
 
 /**
- * Protected edges of the screen in pixels. When tapped on these areas, we will
+ * Protected edges of the screen as a percent of page width. When tapped on these areas, we will
  * always perform navigation. Even if a clickable element is there.
  * @const {number}
  * @private
  */
-const PROTECTED_SCREEN_EDGE_PX = 48;
+const PROTECTED_SCREEN_EDGE_PERCENT = 12;
+
+/**
+ * Minimum protected edges of the screen in pixels.
+ * If PROTECTED_SCREEN_EDGE_PERCENT results in a protected edge value less than MINIMUM_PROTECTED_SCREEN_EDGE_PX,
+ * we will use MINIMUM_PROTECTED_SCREEN_EDGE_PX.
+ * @const {number}
+ * @private
+ */
+const MINIMUM_PROTECTED_SCREEN_EDGE_PX = 48;
+
+/** @private @const {number} */
+const MINIMUM_TIME_BASED_AUTO_ADVANCE_MS = 500;
+
+/**
+ * Maximum percent of screen that can be occupied by a single link
+ * before the link is considered navigation blocking and ignored.
+ * @const {number}
+ * @private
+ */
+const MAX_LINK_SCREEN_PERCENT = 0.8;
 
 const INTERACTIVE_EMBEDDED_COMPONENTS_SELECTORS = Object.values(
   interactiveElementsSelectors()
@@ -262,6 +281,12 @@ export class ManualAdvancement extends AdvancementConfig {
     /** @private {?number} Last touchstart event's timestamp */
     this.touchstartTimestamp_ = null;
 
+    /** @private {boolean} Saving the paused state before pressing */
+    this.pausedState_ = false;
+
+    /** @private {!../../../src/service/ampdoc-impl.AmpDoc} */
+    this.ampdoc_ = getAmpdoc(win.document);
+
     this.startListening_();
 
     if (element.ownerDocument.defaultView) {
@@ -317,6 +342,9 @@ export class ManualAdvancement extends AdvancementConfig {
       this.maybePerformNavigation_.bind(this),
       true
     );
+    this.ampdoc_.onVisibilityChanged(() => {
+      this.ampdoc_.isVisible() ? this.processTouchend_() : null;
+    });
   }
 
   /**
@@ -339,8 +367,10 @@ export class ManualAdvancement extends AdvancementConfig {
     if (this.touchstartTimestamp_ || !this.shouldHandleEvent_(event)) {
       return;
     }
-
     this.touchstartTimestamp_ = Date.now();
+    this.pausedState_ = /** @type {boolean} */ (
+      this.storeService_.get(StateProperty.PAUSED_STATE)
+    );
     this.storeService_.dispatch(Action.TOGGLE_PAUSED, true);
     this.timeoutId_ = this.timer_.delay(() => {
       this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, false);
@@ -366,14 +396,26 @@ export class ManualAdvancement extends AdvancementConfig {
       event.preventDefault();
     }
 
-    this.storeService_.dispatch(Action.TOGGLE_PAUSED, false);
+    this.processTouchend_();
+  }
+
+  /**
+   * Logic triggered by touchend events.
+   * @private
+   */
+  processTouchend_() {
+    if (!this.touchstartTimestamp_) {
+      return;
+    }
+    this.storeService_.dispatch(Action.TOGGLE_PAUSED, this.pausedState_);
     this.touchstartTimestamp_ = null;
     this.timer_.cancel(this.timeoutId_);
+    this.timeoutId_ = null;
     if (
       !this.storeService_.get(StateProperty.SYSTEM_UI_IS_VISIBLE_STATE) &&
-      /** @type {InteractiveComponentDef} */ (this.storeService_.get(
-        StateProperty.INTERACTIVE_COMPONENT_STATE
-      )).state !== EmbeddedComponentState.EXPANDED
+      /** @type {InteractiveComponentDef} */ (
+        this.storeService_.get(StateProperty.INTERACTIVE_COMPONENT_STATE)
+      ).state !== EmbeddedComponentState.EXPANDED
     ) {
       this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, true);
     }
@@ -435,14 +477,17 @@ export class ManualAdvancement extends AdvancementConfig {
       (el) => {
         tagName = el.tagName.toLowerCase();
 
-        if (tagName === 'amp-story-page-attachment') {
+        if (
+          tagName === 'amp-story-page-attachment' ||
+          tagName === 'amp-story-page-outlink'
+        ) {
           shouldHandleEvent = false;
           return true;
         }
 
         if (
-          startsWith(tagName, 'amp-story-reaction-') &&
-          !this.isInScreenSideEdge_(event, this.element_.getLayoutBox())
+          tagName.startsWith('amp-story-interactive-') &&
+          !this.isInStoryPageSideEdge_(event, this.getStoryPageRect_())
         ) {
           shouldHandleEvent = false;
           return true;
@@ -463,7 +508,7 @@ export class ManualAdvancement extends AdvancementConfig {
 
   /**
    * For an element to trigger a tooltip it has to be descendant of
-   * amp-story-page but not of amp-story-cta-layer or amp-story-page-attachment.
+   * amp-story-page but not of amp-story-cta-layer, amp-story-page-attachment or amp-story-page-outlink.
    * @param {!Event} event
    * @param {!ClientRect} pageRect
    * @return {boolean}
@@ -479,7 +524,10 @@ export class ManualAdvancement extends AdvancementConfig {
     // <span>).
     const target = dev().assertElement(event.target);
 
-    if (this.isInScreenSideEdge_(event, pageRect)) {
+    if (
+      this.isInStoryPageSideEdge_(event, pageRect) ||
+      this.isTooLargeOnPage_(event, pageRect)
+    ) {
       event.preventDefault();
       return false;
     }
@@ -500,7 +548,8 @@ export class ManualAdvancement extends AdvancementConfig {
 
         if (
           tagName === 'amp-story-cta-layer' ||
-          tagName === 'amp-story-page-attachment'
+          tagName === 'amp-story-page-attachment' ||
+          tagName === 'amp-story-page-outlink'
         ) {
           valid = false;
           return false;
@@ -525,19 +574,63 @@ export class ManualAdvancement extends AdvancementConfig {
   }
 
   /**
-   * Checks if click was inside of one of the side edges of the screen.
+   * Checks if click was inside of one of the side edges of the page.
    * @param {!Event} event
    * @param {!ClientRect} pageRect
    * @return {boolean}
    * @private
    */
-  isInScreenSideEdge_(event, pageRect) {
+  isInStoryPageSideEdge_(event, pageRect) {
+    // Clicks with coordinates (0,0) are assumed to be from keyboard or Talkback.
+    // These clicks should never be overriden for navigation.
+    if (event.clientX === 0 && event.clientY === 0) {
+      return false;
+    }
+
+    const sideEdgeWidthFromPercent =
+      pageRect.width * (PROTECTED_SCREEN_EDGE_PERCENT / 100);
+    const sideEdgeLimit = Math.max(
+      sideEdgeWidthFromPercent,
+      MINIMUM_PROTECTED_SCREEN_EDGE_PX
+    );
+
     return (
-      event.clientX <= PROTECTED_SCREEN_EDGE_PX ||
-      event.clientX >= pageRect.width - PROTECTED_SCREEN_EDGE_PX
+      event.clientX <= pageRect.x + sideEdgeLimit ||
+      event.clientX >= pageRect.x + pageRect.width - sideEdgeLimit
     );
   }
 
+  /**
+   * Checks if click target is too large on the page and preventing navigation.
+   * If yes, the link is ignored & logged.
+   * @param {!Event} event
+   * @param {!ClientRect} pageRect
+   * @return {boolean}
+   * @private
+   */
+  isTooLargeOnPage_(event, pageRect) {
+    // Clicks with coordinates (0,0) are assumed to be from keyboard or Talkback.
+    // These clicks should never be overriden for navigation.
+    if (event.clientX === 0 && event.clientY === 0) {
+      return false;
+    }
+
+    const target = dev().assertElement(event.target);
+    const targetRect = target./*OK*/ getBoundingClientRect();
+    if (
+      (targetRect.height * targetRect.width) /
+        (pageRect.width * pageRect.height) >=
+      MAX_LINK_SCREEN_PERCENT
+    ) {
+      user().error(
+        'AMP-STORY-PAGE',
+        'Link was too large; skipped for navigation. For more information, see https://github.com/ampproject/amphtml/issues/31108'
+      );
+      return true;
+    }
+    return false;
+  }
+
   /**
    * Checks if click should be handled by the embedded component logic rather
    * than by navigation.
@@ -548,9 +641,9 @@ export class ManualAdvancement extends AdvancementConfig {
    */
   isHandledByEmbeddedComponent_(event, pageRect) {
     const target = dev().assertElement(event.target);
-    const stored = /** @type {InteractiveComponentDef} */ (this.storeService_.get(
-      StateProperty.INTERACTIVE_COMPONENT_STATE
-    ));
+    const stored = /** @type {InteractiveComponentDef} */ (
+      this.storeService_.get(StateProperty.INTERACTIVE_COMPONENT_STATE)
+    );
     const inExpandedMode = stored.state === EmbeddedComponentState.EXPANDED;
 
     return (
@@ -589,14 +682,15 @@ export class ManualAdvancement extends AdvancementConfig {
    */
   maybePerformNavigation_(event) {
     const target = dev().assertElement(event.target);
-    const pageRect = this.element_.getLayoutBox();
+
+    const pageRect = this.getStoryPageRect_();
 
     if (this.isHandledByEmbeddedComponent_(event, pageRect)) {
       event.stopPropagation();
       event.preventDefault();
-      const embedComponent = /** @type {InteractiveComponentDef} */ (this.storeService_.get(
-        StateProperty.INTERACTIVE_COMPONENT_STATE
-      ));
+      const embedComponent = /** @type {InteractiveComponentDef} */ (
+        this.storeService_.get(StateProperty.INTERACTIVE_COMPONENT_STATE)
+      );
       this.storeService_.dispatch(Action.TOGGLE_INTERACTIVE_COMPONENT, {
         element: target,
         state: embedComponent.state || EmbeddedComponentState.FOCUSED,
@@ -650,6 +744,25 @@ export class ManualAdvancement extends AdvancementConfig {
     this.onTapNavigation(this.getTapDirection_(page));
   }
 
+  /**
+   * Calculates the pageRect based on the UIType.
+   * We can an use LayoutBox for mobile since the story page occupies entire screen.
+   * Desktop UI needs the most recent value from the getBoundingClientRect function.
+   * @return {DOMRect | LayoutBox}
+   * @private
+   */
+  getStoryPageRect_() {
+    if (
+      this.storeService_.get(StateProperty.UI_STATE) !== UIType.DESKTOP_PANELS
+    ) {
+      return this.element_.getLayoutBox();
+    } else {
+      return this.element_
+        .querySelector('amp-story-page[active]')
+        ./*OK*/ getBoundingClientRect();
+    }
+  }
+
   /**
    * Decides what direction to navigate depending on which
    * section of the page was there a click. The navigation direction of each
@@ -700,6 +813,14 @@ export class TimeBasedAdvancement extends AdvancementConfig {
     /** @private @const {!../../../src/service/timer-impl.Timer} */
     this.timer_ = Services.timerFor(win);
 
+    if (delayMs < MINIMUM_TIME_BASED_AUTO_ADVANCE_MS) {
+      user().warn(
+        'AMP-STORY-PAGE',
+        `${element.id} has an auto advance duration that is too short. ` +
+          `${MINIMUM_TIME_BASED_AUTO_ADVANCE_MS}ms is used instead.`
+      );
+      delayMs = MINIMUM_TIME_BASED_AUTO_ADVANCE_MS;
+    }
     /** @private @const {number} */
     this.delayMs_ = delayMs;
 
@@ -794,6 +915,21 @@ export class TimeBasedAdvancement extends AdvancementConfig {
     super.onAdvance();
   }
 
+  /**
+   * Updates the delay (and derived values) from the given auto-advance string.
+   * @param {string} autoAdvanceStr The value of the updated auto-advance-after attribute.
+   */
+  updateTimeDelay(autoAdvanceStr) {
+    const newDelayMs = timeStrToMillis(autoAdvanceStr);
+    if (newDelayMs === undefined || isNaN(newDelayMs)) {
+      return;
+    }
+    if (this.remainingDelayMs_) {
+      this.remainingDelayMs_ += newDelayMs - this.delayMs_;
+    }
+    this.delayMs_ = newDelayMs;
+  }
+
   /**
    * Gets an instance of TimeBasedAdvancement based on the value of the
    * auto-advance string (from the 'auto-advance-after' attribute on the page).
@@ -833,22 +969,16 @@ export class TimeBasedAdvancement extends AdvancementConfig {
 export class MediaBasedAdvancement extends AdvancementConfig {
   /**
    * @param {!Window} win
-   * @param {!Array<!Element>} elements
+   * @param {!Element} element
    */
-  constructor(win, elements) {
+  constructor(win, element) {
     super();
 
     /** @private @const {!../../../src/service/timer-impl.Timer} */
     this.timer_ = Services.timerFor(win);
 
-    /** @private @const {!../../../src/service/resources-interface.ResourcesInterface} */
-    this.resources_ = Services.resourcesForDoc(getAmpdoc(win.document));
-
-    /** @private @const {!Array<!Element>} */
-    this.elements_ = elements;
-
-    /** @private {?Element} */
-    this.element_ = this.getFirstPlayableElement_();
+    /** @private {!Element} */
+    this.element_ = element;
 
     /** @private {?Element} */
     this.mediaElement_ = null;
@@ -867,54 +997,6 @@ export class MediaBasedAdvancement extends AdvancementConfig {
 
     /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
     this.storeService_ = getStoreService(win);
-
-    this.elements_.forEach((el) => {
-      listen(el, VideoEvents.VISIBILITY, () => this.onVideoVisibilityChange_());
-    });
-  }
-
-  /**
-   * Returns the first playable element, or null. An element is considered
-   * playable if it's either visible, or a hidden AMP-AUDIO.
-   * @return {?Element}
-   * @private
-   */
-  getFirstPlayableElement_() {
-    if (this.elements_.length === 1) {
-      return this.elements_[0];
-    }
-
-    for (let i = 0; i < this.elements_.length; i++) {
-      const element = this.elements_[i];
-      const resource = this.resources_.getResourceForElement(element);
-      if (isMediaDisplayed(element, resource)) {
-        return element;
-      }
-    }
-
-    return null;
-  }
-
-  /**
-   * On video visibility change, resets the media based advancement to rely on
-   * the newly visible video, if needed.
-   * @private
-   */
-  onVideoVisibilityChange_() {
-    const element = this.getFirstPlayableElement_();
-    if (element === this.element_) {
-      return;
-    }
-    this.element_ = element;
-    this.mediaElement_ = null;
-    this.video_ = null;
-    // If the page-advancement is running, reset the event listeners so the
-    // progress bar reflects the advancement of the new video. If not running,
-    // the next call to `start()` will set the listeners on the new element.
-    if (this.isRunning()) {
-      this.stop();
-      this.start();
-    }
   }
 
   /**
@@ -954,18 +1036,10 @@ export class MediaBasedAdvancement extends AdvancementConfig {
   start() {
     super.start();
 
-    // If no element is visible yet, keep isRunning true by stepping out after
-    // `super.start()`. When an element becomes visible, it will call `start()`
-    // again if isRunning is still true.
-    if (!this.element_) {
-      return;
-    }
-
     // Prevents race condition when checking for video interface classname.
-    (this.element_.whenBuilt
-      ? this.element_.whenBuilt()
-      : Promise.resolve()
-    ).then(() => this.startWhenBuilt_());
+    (this.element_.build ? this.element_.build() : Promise.resolve()).then(() =>
+      this.startWhenBuilt_()
+    );
   }
 
   /** @private */
@@ -998,6 +1072,9 @@ export class MediaBasedAdvancement extends AdvancementConfig {
       'Media element was unspecified.'
     );
 
+    // Removes [loop] attribute if specified, so the 'ended' event can trigger.
+    this.mediaElement_.removeAttribute('loop');
+
     this.unlistenFns_.push(
       listenOnce(mediaElement, 'ended', () => this.onAdvance())
     );
@@ -1016,6 +1093,9 @@ export class MediaBasedAdvancement extends AdvancementConfig {
       this.video_ = video;
     });
 
+    // Removes [loop] attribute if specified, so the 'ended' event can trigger.
+    this.element_.querySelector('video').removeAttribute('loop');
+
     this.unlistenFns_.push(
       listenOnce(this.element_, VideoEvents.ENDED, () => this.onAdvance(), {
         capture: true,
@@ -1075,45 +1155,43 @@ export class MediaBasedAdvancement extends AdvancementConfig {
    * @param {string} autoAdvanceStr The value of the auto-advance-after
    *     attribute.
    * @param {!Window} win
-   * @param {!Element} element
+   * @param {!Element} pageEl
    * @return {?AdvancementConfig} An AdvancementConfig, if media-element-based
    *     auto-advance is supported for the specified auto-advance string; null
    *     otherwise.
    */
-  static fromAutoAdvanceString(autoAdvanceStr, win, element) {
+  static fromAutoAdvanceString(autoAdvanceStr, win, pageEl) {
     try {
       // amp-video, amp-audio, as well as amp-story-page with a background audio
       // are eligible for media based auto advance.
-      const elements = toArray(
-        element.querySelectorAll(
-          `amp-video[data-id=${escapeCssSelectorIdent(autoAdvanceStr)}],
+      let element = pageEl.querySelector(
+        `amp-video[data-id=${escapeCssSelectorIdent(autoAdvanceStr)}],
           amp-video#${escapeCssSelectorIdent(autoAdvanceStr)},
           amp-audio[data-id=${escapeCssSelectorIdent(autoAdvanceStr)}],
           amp-audio#${escapeCssSelectorIdent(autoAdvanceStr)}`
-        )
       );
       if (
         matches(
-          element,
+          pageEl,
           `amp-story-page[background-audio]#${escapeCssSelectorIdent(
             autoAdvanceStr
           )}`
         )
       ) {
-        elements.push(element);
+        element = pageEl;
       }
-      if (!elements.length) {
+      if (!element) {
         if (autoAdvanceStr) {
           user().warn(
             'AMP-STORY-PAGE',
-            `Element with ID ${element.id} has no media element ` +
+            `Element with ID ${pageEl.id} has no media element ` +
               'supported for automatic advancement.'
           );
         }
         return null;
       }
 
-      return new MediaBasedAdvancement(win, elements);
+      return new MediaBasedAdvancement(win, element);
     } catch (e) {
       return null;
     }
diff --git a/extensions/amp-story/1.0/pagination-buttons.css b/extensions/amp-story/1.0/pagination-buttons.css
index 4c6dac1afbcd3..7fb96aac1689d 100644
--- a/extensions/amp-story/1.0/pagination-buttons.css
+++ b/extensions/amp-story/1.0/pagination-buttons.css
@@ -14,74 +14,69 @@
  * limitations under the License.
  */
 
-.i-amphtml-story-desktop-fullbleed .i-amphtml-story-button-container,
-.i-amphtml-story-desktop-panels .i-amphtml-story-button-container {
+/*
+ * In desktop panel mode i-amphtml-story-button-container acts as a sentinel
+ * and covers the previous and next pages.
+ * In mobile it is focusable for screen readers and the buttons are hidden.
+ * In desktop full bleed it is not focusable since the buttons are visible.
+ */
+.i-amphtml-story-button-container {
+  cursor: pointer !important;
   position: absolute !important;
+  width: 30px !important;
   top: 0 !important;
   bottom: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
+  height: calc(100vh - 150px) !important;
+  margin: auto 0 !important;
+  background: none !important;
+  transition: 150ms opacity linear, 150ms visibility linear !important;
+  outline: none !important;
   z-index: 100002 !important;
-  pointer-events: none !important;
-  display: block !important;
-}
-
-.i-amphtml-story-desktop-panels .i-amphtml-story-button-container::before {
-  content: '';
-  position: absolute !important;
-  top: 0 !important;
-  bottom: 0 !important;
-  /* Roughly equivalent to (viewport width - active page width) / 2  */
-  width: calc(50vw - 23vh - 32px) !important;
-}
-
-.i-amphtml-story-desktop-panels .i-amphtml-story-button-container.next-container::before,
-[dir=rtl] .i-amphtml-story-desktop-panels .i-amphtml-story-button-container.prev-container::before {
-  right: 0 !important;
-  left: auto !important;
-}
-
-.i-amphtml-story-desktop-panels .i-amphtml-story-button-container.prev-container::before,
-[dir=rtl] .i-amphtml-story-desktop-panels .i-amphtml-story-button-container.next-container::before {
-  left: 0 !important;
-  right: auto !important;
 }
 
-.i-amphtml-story-button-move,
-.i-amphtml-story-fwd-next > .i-amphtml-story-page-sentinel,
-.i-amphtml-story-back-prev > .i-amphtml-story-page-sentinel {
-  pointer-events: all !important;
+/* Hide pointer events on mobile so only visible to screenreaders like TalkBack */
+amp-story:not([desktop]) .i-amphtml-story-button-container {
+  pointer-events: none !important;
 }
 
+.next-container,
 .i-amphtml-story-button-container.next-container > .i-amphtml-story-button-move {
   left: auto !important;
   right: 0 !important;
 }
 
-/** This is needed to overwrite position of replay and read more button at the end of the the story. */
+[dir=rtl] .next-container,
 [dir=rtl] .i-amphtml-story-button-container.next-container > .i-amphtml-story-button-move {
-  right: auto !important;
   left: 0 !important;
+  right: auto !important;
 }
 
-.i-amphtml-story-page-sentinel {
-  position: absolute !important;
-  width: 100vw !important;
-  height: 100vh !important;
-  top: 0 !important;
-  bottom: 0 !important;
-  margin-left: -32px !important;
-  z-index: 100002 !important;
-  cursor: pointer;
+.i-amphtml-story-desktop-fullbleed .i-amphtml-story-button-container {
+  pointer-events: none !important;
 }
 
-.i-amphtml-story-desktop-fullbleed .i-amphtml-story-page-sentinel {
-  display: none !important;
+/* A11y pagination element. Focusable by screen readers. Visibly Hidden on mobile unless navigating with keyboard. */
+amp-story:not([desktop]) .i-amphtml-story-button-move,
+[dir=rtl] amp-story:not([desktop]) .i-amphtml-story-button-move {
+  width: 100% !important;
+  height: 100% !important;
+  border: none !important;
+  padding: 0 !important;
+  pointer-events: none !important;
+  background-repeat: no-repeat !important;
+  background-color: transparent !important;
+  /* Contrast protection. Make icons white. */
+  filter: invert(100%) drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)) !important;
 }
 
-/* Navigation buttons */
-.i-amphtml-story-button-move {
-  position: absolute!important;
+body:not(.amp-mode-keyboard-active) amp-story:not([desktop]) .i-amphtml-story-button-move {
+  /* Hides background unless navigating with keyboard. */
+  background: none !important;
+}
+
+[desktop] .i-amphtml-story-button-move {
+  display: flex !important;
+  position: fixed!important;
   top: 0!important;
   bottom: 0!important;
   margin: auto 40px!important;
@@ -92,13 +87,12 @@
   background-color: #fff!important;
   background-repeat: no-repeat!important;
   background-size: 12px 17px!important;
-  display: flex!important;
   justify-content: center!important;
   align-items: center!important;
   opacity: .5!important;
   transition: 150ms opacity linear, 350ms transform linear!important;
   cursor: pointer!important;
-  z-index: 100002!important;
+  pointer-events: all!important;
 }
 
 .i-amphtml-story-desktop-fullbleed .i-amphtml-story-button-move {
@@ -138,6 +132,10 @@
   background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 48 48" fill="#FFFFFF"><path d="M11.76 8.24L27.51 24 11.76 39.76 16 44l20-20L16 4z"/><path fill="none" d="M0 0h48v48H0z"/></svg>') !important;
 }
 
+.i-amphtml-story-fwd-replay {
+  pointer-events: none !important;
+}
+
 .i-amphtml-story-fwd-replay > .i-amphtml-story-button-move {
   background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
   background-position: center center;
@@ -160,38 +158,26 @@
   background-size: auto !important;
 }
 
-/* On forward button mouseover */
-.i-amphtml-story-desktop-panels.i-amphtml-story-next-hover > .next-container > .i-amphtml-story-button-move,
-.i-amphtml-story-desktop-panels.i-amphtml-story-prev-hover > .prev-container > .i-amphtml-story-button-move {
-  transform: scale(1.1) !important;
-  opacity: 1!important;
-}
-
 /* Do not display when hidden. */
-.i-amphtml-story-prev-hover > .i-amphtml-story-button-hidden >
-    .i-amphtml-story-button-move,
-.i-amphtml-story-next-hover > .i-amphtml-story-button-hidden >
-    .i-amphtml-story-button-move {
+.i-amphtml-story-button-hidden {
+  visibility: hidden !important;
   opacity: 0 !important;
-}
-
-.i-amphtml-story-button-hidden > .i-amphtml-story-button-move {
-  cursor: default !important;
   pointer-events: none !important;
-  opacity: 0 !important;
 }
 
-/* On forward (next) button mouseover */
+/* Mouseover states */
 .i-amphtml-story-desktop-panels.i-amphtml-story-next-hover > .i-amphtml-story-fwd-next >
     .i-amphtml-story-button-move {
   transform: translateX(8px)!important;
   opacity: 1!important;
 }
 
-/* On back button mouseover */
+.i-amphtml-story-desktop-panels.i-amphtml-story-next-hover > .i-amphtml-story-fwd-replay >
+    .i-amphtml-story-button-move {
+  opacity: 1 !important;
+}
+
 .i-amphtml-story-desktop-panels.i-amphtml-story-prev-hover > .i-amphtml-story-back-prev >
-    .i-amphtml-story-button-move,
-.i-amphtml-story-desktop-panels.i-amphtml-story-prev-hover > .i-amphtml-story-back-close-bookend  >
     .i-amphtml-story-button-move {
   transform: translateX(-8px)!important;
   opacity: 1!important;
diff --git a/extensions/amp-story/1.0/pagination-buttons.js b/extensions/amp-story/1.0/pagination-buttons.js
index c645f79fc017f..6bc9504475850 100644
--- a/extensions/amp-story/1.0/pagination-buttons.js
+++ b/extensions/amp-story/1.0/pagination-buttons.js
@@ -16,31 +16,28 @@
 import {
   Action,
   StateProperty,
+  UIType,
   getStoreService,
 } from './amp-story-store-service';
 import {AdvancementMode} from './story-analytics';
-import {CommonSignals} from '../../../src/common-signals';
 import {EventType, dispatch} from './events';
-import {devAssert} from '../../../src/log';
-import {dict} from './../../../src/utils/object';
-import {renderAsElement} from './simple-template';
+import {LocalizedStringId} from '../../../src/localized-strings';
+import {Services} from '../../../src/services';
+import {dev, devAssert} from '../../../src/log';
+
+import {getLocalizationService} from './amp-story-localization-service';
+import {htmlFor} from '../../../src/static-template';
 
 /** @struct @typedef {{className: string, triggers: (string|undefined)}} */
 let ButtonState_1_0_Def; // eslint-disable-line google-camelcase/google-camelcase
 
 /** @const {!Object<string, !ButtonState_1_0_Def>} */
 const BackButtonStates = {
-  CLOSE_BOOKEND: {
-    className: 'i-amphtml-story-back-close-bookend',
-    action: Action.TOGGLE_BOOKEND,
-    data: false,
-    label: 'Close bookend',
-  },
   HIDDEN: {className: 'i-amphtml-story-button-hidden'},
   PREVIOUS_PAGE: {
     className: 'i-amphtml-story-back-prev',
     triggers: EventType.PREVIOUS_PAGE,
-    label: 'Previous page',
+    label: LocalizedStringId.AMP_STORY_PREVIOUS_PAGE,
   },
 };
 
@@ -50,50 +47,42 @@ const ForwardButtonStates = {
   NEXT_PAGE: {
     className: 'i-amphtml-story-fwd-next',
     triggers: EventType.NEXT_PAGE,
-    // TODO: Here and other labels: i18n.
-    label: 'Next page',
+    label: LocalizedStringId.AMP_STORY_NEXT_PAGE,
+  },
+  NEXT_STORY: {
+    className: 'i-amphtml-story-fwd-next',
+    triggers: EventType.NEXT_PAGE,
+    label: LocalizedStringId.AMP_STORY_NEXT_STORY,
   },
   REPLAY: {
     className: 'i-amphtml-story-fwd-replay',
     triggers: EventType.REPLAY,
-    label: 'Replay',
-  },
-  SHOW_BOOKEND: {
-    className: 'i-amphtml-story-fwd-more',
-    action: Action.TOGGLE_BOOKEND,
-    data: true,
-    label: 'Show bookend',
+    label: LocalizedStringId.AMP_STORY_REPLAY,
   },
 };
 
-/** @private @const {!./simple-template.ElementDef} */
-const BUTTON = {
-  tag: 'div',
-  attrs: dict({'class': 'i-amphtml-story-button-container'}),
-  children: [
-    {
-      tag: 'button',
-      attrs: dict({'class': 'i-amphtml-story-button-move'}),
-    },
-    {
-      tag: 'div',
-      attrs: dict({'class': 'i-amphtml-story-page-sentinel'}),
-    },
-  ],
-};
+/**
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildPaginationButton = (element) =>
+  htmlFor(element)`
+      <div class="i-amphtml-story-button-container">
+        <button class="i-amphtml-story-button-move"></button>
+      </div>`;
 
 /**
  * @param {!Element} hoverEl
  * @param {!Element} targetEl
  * @param {string} className
+ * @return {?Array<function(!Event)>}
  */
 function setClassOnHover(hoverEl, targetEl, className) {
-  hoverEl.addEventListener('mouseenter', () => {
-    targetEl.classList.add(className);
-  });
-  hoverEl.addEventListener('mouseleave', () => {
-    targetEl.classList.remove(className);
-  });
+  const enterListener = () => targetEl.classList.add(className);
+  const exitListener = () => targetEl.classList.remove(className);
+  hoverEl.addEventListener('mouseenter', enterListener);
+  hoverEl.addEventListener('mouseleave', exitListener);
+  return [enterListener, exitListener];
 }
 
 /**
@@ -111,16 +100,22 @@ class PaginationButton {
     this.state_ = initialState;
 
     /** @public @const {!Element} */
-    this.element = renderAsElement(doc, BUTTON);
-    /** @public @const {!Element} */
-    this.button_ = devAssert(
-      this.element.querySelector('button'),
-      'Expect to find a button'
+    this.element = buildPaginationButton(doc);
+
+    /** @private @const {!Element} */
+    this.buttonElement_ = dev().assertElement(
+      this.element.querySelector('button')
     );
 
-    this.element.classList.add(initialState.className);
-    this.button_.setAttribute('aria-label', initialState.label);
+    /** @private @const {!../../../src/service/localization.LocalizationService} */
+    this.localizationService_ = getLocalizationService(doc);
 
+    this.element.classList.add(initialState.className);
+    initialState.label &&
+      this.buttonElement_.setAttribute(
+        'aria-label',
+        this.localizationService_.getLocalizedString(initialState.label)
+      );
     this.element.addEventListener('click', (e) => this.onClick_(e));
 
     /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
@@ -137,7 +132,13 @@ class PaginationButton {
     }
     this.element.classList.remove(this.state_.className);
     this.element.classList.add(state.className);
-    this.button_.setAttribute('aria-label', state.label);
+    state.label
+      ? this.buttonElement_.setAttribute(
+          'aria-label',
+          this.localizationService_.getLocalizedString(state.label)
+        )
+      : this.buttonElement_.removeAttribute('aria-label');
+
     this.state_ = state;
   }
 
@@ -181,9 +182,8 @@ class PaginationButton {
 export class PaginationButtons {
   /**
    * @param {!./amp-story.AmpStory} ampStory
-   * @param {function():Promise<boolean>} hasBookend
    */
-  constructor(ampStory, hasBookend) {
+  constructor(ampStory) {
     /** @private @const {!./amp-story.AmpStory} */
     this.ampStory_ = ampStory;
 
@@ -216,47 +216,38 @@ export class PaginationButtons {
     /** @private {?ButtonState_1_0_Def} */
     this.forwardButtonStateToRestore_ = null;
 
-    /** @private {function():Promise<boolean>} */
-    this.hasBookend_ = hasBookend;
+    /** @private {?Array<function(!Event)>} */
+    this.hoverListeners_ = null;
 
     this.initializeListeners_();
-  }
 
-  /**
-   * @param {!./amp-story.AmpStory} ampStory
-   * @param {function():Promise<boolean>} hasBookend
-   * @return {!PaginationButtons}
-   */
-  static create(ampStory, hasBookend) {
-    return new PaginationButtons(ampStory, hasBookend);
+    this.ampStory_.element.appendChild(this.forwardButton_.element);
+    this.ampStory_.element.appendChild(this.backButton_.element);
   }
 
-  /** @param {!Element} element */
-  attach(element) {
-    setClassOnHover(
+  /** @private */
+  addHoverListeners_() {
+    if (this.hoverListeners_) {
+      return;
+    }
+
+    const forwardButtonListeners = setClassOnHover(
       this.forwardButton_.element,
-      element,
+      this.ampStory_.element,
       'i-amphtml-story-next-hover'
     );
 
-    setClassOnHover(
+    const backButtonListeners = setClassOnHover(
       this.backButton_.element,
-      element,
+      this.ampStory_.element,
       'i-amphtml-story-prev-hover'
     );
 
-    element.appendChild(this.forwardButton_.element);
-    element.appendChild(this.backButton_.element);
+    this.hoverListeners_ = forwardButtonListeners.concat(backButtonListeners);
   }
 
-  /**
-   * @private
-   */
+  /** @private */
   initializeListeners_() {
-    this.storeService_.subscribe(StateProperty.BOOKEND_STATE, (isActive) => {
-      this.onBookendStateUpdate_(isActive);
-    });
-
     this.storeService_.subscribe(
       StateProperty.CURRENT_PAGE_INDEX,
       (pageIndex) => {
@@ -264,20 +255,16 @@ export class PaginationButtons {
       }
     );
 
-    this.storeService_.subscribe(StateProperty.PAGE_IDS, () => {
-      // Since onCurrentPageIndexUpdate_ uses this.hasBookend_, and the bookend
-      // isn't initialized until after the story is laid out, we wait for the
-      // story to be laid out before calling this function.
-      this.ampStory_.element
-        .signals()
-        .whenSignal(CommonSignals.LOAD_END)
-        .then(() => {
-          const currentPageIndex = Number(
-            this.storeService_.get(StateProperty.CURRENT_PAGE_INDEX)
-          );
-          this.onCurrentPageIndexUpdate_(currentPageIndex);
-        });
-    });
+    this.storeService_.subscribe(
+      StateProperty.PAGE_IDS,
+      () => {
+        const currentPageIndex = Number(
+          this.storeService_.get(StateProperty.CURRENT_PAGE_INDEX)
+        );
+        this.onCurrentPageIndexUpdate_(currentPageIndex);
+      },
+      true /** callToInitialize */
+    );
 
     this.storeService_.subscribe(
       StateProperty.SYSTEM_UI_IS_VISIBLE_STATE,
@@ -285,20 +272,14 @@ export class PaginationButtons {
         this.onSystemUiIsVisibleStateUpdate_(isVisible);
       }
     );
-  }
 
-  /**
-   * @param {boolean} isActive
-   * @private
-   */
-  onBookendStateUpdate_(isActive) {
-    if (isActive) {
-      this.backButton_.updateState(BackButtonStates.CLOSE_BOOKEND);
-      this.forwardButton_.updateState(ForwardButtonStates.REPLAY);
-    } else {
-      this.backButton_.updateState(BackButtonStates.PREVIOUS_PAGE);
-      this.forwardButton_.updateState(ForwardButtonStates.SHOW_BOOKEND);
-    }
+    this.storeService_.subscribe(
+      StateProperty.UI_STATE,
+      (uiState) => {
+        this.onUIStateUpdate_(uiState);
+      },
+      true /** callToInitialize */
+    );
   }
 
   /**
@@ -307,13 +288,12 @@ export class PaginationButtons {
    */
   onCurrentPageIndexUpdate_(pageIndex) {
     const totalPages = this.storeService_.get(StateProperty.PAGE_IDS).length;
-    const bookendActive = this.storeService_.get(StateProperty.BOOKEND_STATE);
 
     if (pageIndex === 0) {
       this.backButton_.updateState(BackButtonStates.HIDDEN);
     }
 
-    if (pageIndex > 0 && !bookendActive) {
+    if (pageIndex > 0) {
       this.backButton_.updateState(BackButtonStates.PREVIOUS_PAGE);
     }
 
@@ -321,16 +301,13 @@ export class PaginationButtons {
       this.forwardButton_.updateState(ForwardButtonStates.NEXT_PAGE);
     }
 
-    if (pageIndex === totalPages - 1 && !bookendActive) {
-      this.forwardButton_.updateState(ForwardButtonStates.SHOW_BOOKEND);
-    }
-
     if (pageIndex === totalPages - 1) {
-      this.hasBookend_().then((hasBookend) => {
-        if (!hasBookend) {
-          this.forwardButton_.updateState(ForwardButtonStates.REPLAY);
-        }
-      });
+      const viewer = Services.viewerForDoc(this.ampStory_.element);
+      if (viewer.hasCapability('swipe')) {
+        this.forwardButton_.updateState(ForwardButtonStates.NEXT_STORY);
+      } else {
+        this.forwardButton_.updateState(ForwardButtonStates.REPLAY);
+      }
     }
   }
 
@@ -342,14 +319,14 @@ export class PaginationButtons {
   onSystemUiIsVisibleStateUpdate_(isVisible) {
     if (isVisible) {
       this.backButton_.updateState(
-        /** @type {!ButtonState_1_0_Def} */ (devAssert(
-          this.backButtonStateToRestore_
-        ))
+        /** @type {!ButtonState_1_0_Def} */ (
+          devAssert(this.backButtonStateToRestore_)
+        )
       );
       this.forwardButton_.updateState(
-        /** @type {!ButtonState_1_0_Def} */ (devAssert(
-          this.forwardButtonStateToRestore_
-        ))
+        /** @type {!ButtonState_1_0_Def} */ (
+          devAssert(this.forwardButtonStateToRestore_)
+        )
       );
     } else {
       this.backButtonStateToRestore_ = this.backButton_.getState();
@@ -358,4 +335,18 @@ export class PaginationButtons {
       this.forwardButton_.updateState(ForwardButtonStates.HIDDEN);
     }
   }
+
+  /**
+   * Reacts to UI state updates.
+   * @param {!UIType} uiState
+   * @private
+   */
+  onUIStateUpdate_(uiState) {
+    if (
+      uiState === UIType.DESKTOP_PANELS ||
+      uiState === UIType.DESKTOP_FULLBLEED
+    ) {
+      this.addHoverListeners_();
+    }
+  }
 }
diff --git a/extensions/amp-story/1.0/prerender-active-page.js b/extensions/amp-story/1.0/prerender-active-page.js
new file mode 100644
index 0000000000000..c3c7df8b16894
--- /dev/null
+++ b/extensions/amp-story/1.0/prerender-active-page.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
+import {parseQueryString} from '../../../src/core/types/string/url';
+import {toWin} from '../../../src/types';
+
+/**
+ * Returns true if the page should be prerendered (for being an active page or
+ * first page).
+ * @param {!AmpElement} pageElement
+ * @return {boolean}
+ */
+export function isPrerenderActivePage(pageElement) {
+  const win = toWin(pageElement.ownerDocument.defaultView);
+  const hashId = parseQueryString(win.location.href)['page'];
+  let selector = 'amp-story-page:first-of-type';
+  if (hashId) {
+    selector += `, amp-story-page#${escapeCssSelectorIdent(hashId)}`;
+  }
+  const selectorNodes = win.document.querySelectorAll(selector);
+  return selectorNodes[selectorNodes.length - 1] === pageElement;
+}
diff --git a/extensions/amp-story/1.0/progress-bar.js b/extensions/amp-story/1.0/progress-bar.js
index 229789cdfbb34..d3ac89cd92d5c 100644
--- a/extensions/amp-story/1.0/progress-bar.js
+++ b/extensions/amp-story/1.0/progress-bar.js
@@ -21,10 +21,10 @@ import {
   UIType,
   getStoreService,
 } from './amp-story-store-service';
-import {debounce} from '../../../src/utils/rate-limit';
+import {debounce} from '../../../src/core/types/function';
 import {dev, devAssert} from '../../../src/log';
-import {escapeCssSelectorNth} from '../../../src/css';
-import {hasOwn, map} from '../../../src/utils/object';
+import {escapeCssSelectorNth} from '../../../src/core/dom/css';
+import {hasOwn, map} from '../../../src/core/types/object';
 import {removeChildren, scopedQuerySelector} from '../../../src/dom';
 import {scale, setImportantStyles} from '../../../src/style';
 
diff --git a/extensions/amp-story/1.0/semantic-render.js b/extensions/amp-story/1.0/semantic-render.js
index 0c1c197718ace..e7a248c7fe539 100644
--- a/extensions/amp-story/1.0/semantic-render.js
+++ b/extensions/amp-story/1.0/semantic-render.js
@@ -17,8 +17,8 @@
 import {Services} from '../../../src/services';
 import {createElementWithAttributes} from '../../../src/dom';
 import {dev} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {includes, startsWith} from '../../../src/string';
+import {dict} from '../../../src/core/types/object';
+import {includes} from '../../../src/core/types/string';
 
 /**
  * Renders the page description, and videos title/alt attributes in the page.
@@ -108,7 +108,7 @@ function fetchCaptions(page, videoEl) {
  */
 export function extractTextContent(text) {
   text = text.trim();
-  if (startsWith(text, 'WEBVTT')) {
+  if (text.startsWith('WEBVTT')) {
     return extractTextContentWebVtt(text);
   }
   if (includes(text, 'http://www.w3.org/ns/ttml')) {
diff --git a/extensions/amp-story/1.0/simple-template.js b/extensions/amp-story/1.0/simple-template.js
index e58cf765aec74..82f762429ad60 100644
--- a/extensions/amp-story/1.0/simple-template.js
+++ b/extensions/amp-story/1.0/simple-template.js
@@ -17,8 +17,8 @@ import {LocalizedStringId} from '../../../src/localized-strings'; // eslint-disa
 import {createElementWithAttributes} from '../../../src/dom';
 import {devAssert} from '../../../src/log';
 import {getLocalizationService} from './amp-story-localization-service';
-import {hasOwn} from '../../../src/utils/object';
-import {isArray} from '../../../src/types';
+import {hasOwn} from '../../../src/core/types/object';
+import {isArray} from '../../../src/core/types';
 
 /**
  * @typedef {{
diff --git a/extensions/amp-story/1.0/sources.js b/extensions/amp-story/1.0/sources.js
index 8aeb156cdb012..7670d3484acd5 100644
--- a/extensions/amp-story/1.0/sources.js
+++ b/extensions/amp-story/1.0/sources.js
@@ -16,7 +16,7 @@
 
 import {ampMediaElementFor} from './utils';
 import {removeElement} from '../../../src/dom';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
 
 /**
  * Class handling HTMLMediaElements sources.
@@ -83,6 +83,9 @@ export class Sources {
     Array.prototype.forEach.call(this.srcEls_, (srcEl) =>
       element.appendChild(srcEl)
     );
+    if (element.changedSources) {
+      element.changedSources();
+    }
 
     if (this.trackEls_.length > 0) {
       // Wait for "loadedmetadata" before adding tracks.
diff --git a/extensions/amp-story/1.0/story-analytics.js b/extensions/amp-story/1.0/story-analytics.js
index 75b75b9226776..28ad4a93c9a3e 100644
--- a/extensions/amp-story/1.0/story-analytics.js
+++ b/extensions/amp-story/1.0/story-analytics.js
@@ -17,18 +17,15 @@ import {Services} from '../../../src/services';
 import {StateProperty, getStoreService} from './amp-story-store-service';
 import {getDataParamsFromAttributes} from '../../../src/dom';
 import {getVariableService} from './variable-service';
-import {map} from '../../../src/utils/object';
+import {map} from '../../../src/core/types/object';
 import {registerServiceBuilder} from '../../../src/service';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
 
-/** @package @const {string} */
+/** @const {string} */
 export const ANALYTICS_TAG_NAME = '__AMP_ANALYTICS_TAG_NAME__';
 
 /** @enum {string} */
 export const StoryAnalyticsEvent = {
-  BOOKEND_CLICK: 'story-bookend-click',
-  BOOKEND_ENTER: 'story-bookend-enter',
-  BOOKEND_EXIT: 'story-bookend-exit',
   CLICK_THROUGH: 'story-click-through',
   FOCUS: 'story-focus',
   LAST_PAGE_VISIBLE: 'story-last-page-visible',
@@ -37,12 +34,16 @@ export const StoryAnalyticsEvent = {
   PAGE_ATTACHMENT_ENTER: 'story-page-attachment-enter',
   PAGE_ATTACHMENT_EXIT: 'story-page-attachment-exit',
   PAGE_VISIBLE: 'story-page-visible',
-  REACTION: 'story-reaction',
+  INTERACTIVE: 'story-interactive',
+  STORY_CONTENT_LOADED: 'story-content-loaded',
   STORY_MUTED: 'story-audio-muted',
   STORY_UNMUTED: 'story-audio-unmuted',
 };
 
-/** @enum {string} */
+/**
+ * @enum {string}
+ * Note: auto advance advancements should always be prefixed with "autoAdvance".
+ */
 export const AdvancementMode = {
   GO_TO_PAGE: 'goToPageAction',
   AUTO_ADVANCE_TIME: 'autoAdvanceTime',
@@ -108,18 +109,11 @@ export class StoryAnalyticsService {
 
   /** @private */
   initializeListeners_() {
-    this.storeService_.subscribe(StateProperty.BOOKEND_STATE, (isActive) => {
-      this.triggerEvent(
-        isActive
-          ? StoryAnalyticsEvent.BOOKEND_ENTER
-          : StoryAnalyticsEvent.BOOKEND_EXIT
-      );
-    });
-
     this.storeService_.subscribe(
       StateProperty.CURRENT_PAGE_ID,
       (pageId) => {
-        if (!pageId) {
+        const isAd = this.storeService_.get(StateProperty.AD_STATE);
+        if (!pageId || isAd) {
           return;
         }
 
diff --git a/extensions/amp-story/1.0/test-e2e/test-amp-story-bookend.js b/extensions/amp-story/1.0/test-e2e/test-amp-story-bookend.js
deleted file mode 100644
index 282fcf1ceea43..0000000000000
--- a/extensions/amp-story/1.0/test-e2e/test-amp-story-bookend.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * 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.
- */
-
-import {Key} from '../../../../build-system/tasks/e2e/functional-test-controller';
-import sleep from 'sleep-promise';
-
-describes.endtoend(
-  'amp story bookend',
-  {
-    testUrl: 'http://localhost:8000/test/manual/amp-story/amp-story.amp.html',
-    // TODO(estherkim): implement mobile emulation on Firefox when available on geckodriver
-    browsers: ['chrome'],
-    environments: ['single'],
-    deviceName: 'iPhone X', // bookend appears only on mobile
-  },
-  async (env) => {
-    /** @type {SeleniumWebDriverController} */
-    let controller;
-
-    beforeEach(async () => {
-      controller = env.controller;
-
-      // ensure story is loaded
-      await expect(controller.findElement('amp-story.i-amphtml-story-loaded'))
-        .to.exist;
-
-      // ensure page is in mobile emulation mode
-      const story = await controller.findElement('amp-story');
-      await expect(await story.getElement().getAttribute('desktop')).to.be.null;
-    });
-
-    it('should display bookend at the end of the story', async () => {
-      await goToBookend();
-      await expect(
-        controller.findElement(
-          'amp-story-bookend.i-amphtml-story-draggable-drawer-open'
-        )
-      ).to.exist;
-    });
-
-    it('should copy the link using the bookend share menu', async () => {
-      await goToBookend();
-
-      const shadowHost = await controller.findElement(
-        '.i-amphtml-story-draggable-drawer-content > div'
-      );
-      await controller.switchToShadowRoot(shadowHost);
-
-      const getLinkButton = await controller.findElement(
-        'div.i-amphtml-story-share-icon.i-amphtml-story-share-icon-link'
-      );
-
-      // give shadow dom half a second to be interactable
-      await sleep(500);
-      await controller.click(getLinkButton);
-      await controller.switchToLight();
-
-      // paste link
-      const input = await controller.findElement('.input-field');
-      await controller.click(input);
-      await sleep(500);
-      await controller.type(input, Key.CtrlV);
-      await sleep(500);
-
-      const output = await controller.getElementProperty(input, 'value');
-      await expect(output).to.equal(
-        'http://localhost:8000/test/manual/amp-story/amp-story.amp.html'
-      );
-    });
-
-    async function goToBookend() {
-      const story = await controller.findElement('amp-story');
-      await controller.click(story);
-      await controller.click(story);
-      await controller.click(story);
-    }
-  }
-);
diff --git a/extensions/amp-story/1.0/test-e2e/test-amp-story-share-menu.js b/extensions/amp-story/1.0/test-e2e/test-amp-story-share-menu.js
index 715d5361e1058..466897bd1db57 100644
--- a/extensions/amp-story/1.0/test-e2e/test-amp-story-share-menu.js
+++ b/extensions/amp-story/1.0/test-e2e/test-amp-story-share-menu.js
@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import {Key} from '../../../../build-system/tasks/e2e/functional-test-controller';
-import sleep from 'sleep-promise';
+import {Key} from '../../../../build-system/tasks/e2e/e2e-types';
 
 describes.endtoend(
   'amp story share menu',
   {
-    testUrl: 'http://localhost:8000/test/manual/amp-story/amp-story.amp.html',
+    fixture: 'amp-story/amp-story.amp.html',
     browsers: ['chrome'],
     environments: ['single'],
     deviceName: 'iPhone X',
@@ -29,11 +28,15 @@ describes.endtoend(
     /** @type {SeleniumWebDriverController} */
     let controller;
 
+    function sleep(ms) {
+      return new Promise((res) => setTimeout(res, ms));
+    }
+
     beforeEach(() => {
       controller = env.controller;
     });
 
-    it('should copy the link using the browser share menu', async () => {
+    it.skip('should copy the link using the browser share menu', async () => {
       // copy link
       const systemLayerHost = await controller.findElement(
         '.i-amphtml-system-layer-host'
diff --git a/extensions/amp-story/1.0/test/integration/test-amp-story-affiliate-link.js b/extensions/amp-story/1.0/test/integration/test-amp-story-affiliate-link.js
index 2dbf7ec8670d7..8378f89d412a0 100644
--- a/extensions/amp-story/1.0/test/integration/test-amp-story-affiliate-link.js
+++ b/extensions/amp-story/1.0/test/integration/test-amp-story-affiliate-link.js
@@ -19,9 +19,9 @@ import {
   RequestBank,
 } from '../../../../../testing/test-helper';
 
-const t = describe.configure().skipSafari().skipEdge();
+const t = describes.sandboxed.configure().skipSafari().skipEdge();
 
-t.run('amp-story-affiliate link', () => {
+t.run('amp-story-affiliate link', {}, () => {
   describes.integration(
     'analytics on click',
     {
@@ -62,6 +62,10 @@ t.run('amp-story-affiliate link', () => {
         return browser.waitForElementLayout('amp-analytics');
       });
 
+      afterEach(() => {
+        return RequestBank.tearDown();
+      });
+
       it.skip('should not send any analytics event on expand', async () => {
         browser.click('#blink-1');
         browser.click('h1');
diff --git a/extensions/amp-story/1.0/test/test-amp-story-bookend.js b/extensions/amp-story/1.0/test/test-amp-story-bookend.js
deleted file mode 100644
index d94e18bf7a3f8..0000000000000
--- a/extensions/amp-story/1.0/test/test-amp-story-bookend.js
+++ /dev/null
@@ -1,1357 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {Action} from '../amp-story-store-service';
-import {AmpStoryBookend} from '../bookend/amp-story-bookend';
-import {AmpStoryRequestService} from '../amp-story-request-service';
-import {AnalyticsVariable, getVariableService} from '../variable-service';
-import {ArticleComponent} from '../bookend/components/article';
-import {CtaLinkComponent} from '../bookend/components/cta-link';
-import {LandscapeComponent} from '../bookend/components/landscape';
-import {LocalizationService} from '../../../../src/service/localization';
-import {PortraitComponent} from '../bookend/components/portrait';
-import {Services} from '../../../../src/services';
-import {StoryAnalyticsEvent, getAnalyticsService} from '../story-analytics';
-import {TextBoxComponent} from '../bookend/components/text-box';
-import {createElementWithAttributes} from '../../../../src/dom';
-import {user} from '../../../../src/log';
-
-const location =
-  'https://www.testorigin.com/amp-stories/example/path/google.com';
-
-describes.fakeWin('amp-story-bookend', {win: {location}, amp: true}, (env) => {
-  let win;
-  let doc;
-  let storyElem;
-  let bookend;
-  let bookendElem;
-  let requestService;
-  let analytics;
-  let analyticsVariables;
-
-  const expectedComponents = [
-    {
-      'type': 'heading',
-      'text': 'My Heading Title!',
-    },
-    {
-      'type': 'small',
-      'title': 'This is an example article',
-      'domainName': 'example.com',
-      'url': 'http://example.com/article.html',
-      'image': 'http://placehold.it/256x128',
-    },
-    {
-      'type': 'portrait',
-      'title': 'This is an example article',
-      'category': 'This is an example article',
-      'domainName': 'example.com',
-      'url': 'http://example.com/article.html',
-      'image': 'http://placehold.it/256x128',
-    },
-    {
-      'type': 'cta-link',
-      'links': [
-        {
-          'text': 'buttonA',
-          'url': 'google.com',
-        },
-        {
-          'text': 'buttonB',
-          'url': 'google.com',
-        },
-        {
-          'text': 'longtext longtext longtext longtext longtext',
-          'url': 'google.com',
-        },
-      ],
-    },
-    {
-      'type': 'landscape',
-      'title': 'TRAPPIST-1 Planets May Still Be Wet Enough for Life',
-      'domainName': 'example.com',
-      'url': 'http://example.com/article.html',
-      'category': 'astronomy',
-      'image': 'http://placehold.it/256x128',
-    },
-    {
-      'type': 'textbox',
-      'text': [
-        'Food by Enrique McPizza',
-        'Choreography by Gabriel Filly',
-        'Script by Alan Ecma S.',
-        'Direction by Jon Tarantino',
-      ],
-    },
-  ];
-
-  const metadata = {
-    '@context': 'http://schema.org',
-    '@type': 'NewsArticle',
-    'mainEntityOfPage': {
-      '@type': 'WebPage',
-      '@id': './bookend.html',
-    },
-    'headline': 'My Story',
-    'image': ['http://placehold.it/420x740'],
-    'datePublished': '2018-01-01T00:00:00+00:00',
-    'dateModified': '2018-01-01T00:00:00+00:00',
-    'author': {
-      '@type': 'Organization',
-      'name': 'AMP Project',
-    },
-    'publisher': {
-      '@type': 'Organization',
-      'name': 'AMP Project',
-      'logo': {
-        '@type': 'ImageObject',
-        'url': 'http://placehold.it/128x128',
-      },
-    },
-    'description': 'My Story',
-  };
-
-  beforeEach(() => {
-    win = env.win;
-    doc = win.document;
-    const localizationService = new LocalizationService(win.document.body);
-    env.sandbox
-      .stub(Services, 'localizationForDoc')
-      .returns(localizationService);
-    storyElem = doc.createElement('amp-story');
-    storyElem.appendChild(doc.createElement('amp-story-page'));
-    doc.body.appendChild(storyElem);
-    bookendElem = createElementWithAttributes(doc, 'amp-story-bookend', {
-      'layout': 'nodisplay',
-    });
-    storyElem.appendChild(bookendElem);
-
-    requestService = new AmpStoryRequestService(win, storyElem);
-    env.sandbox.stub(Services, 'storyRequestService').returns(requestService);
-
-    bookend = new AmpStoryBookend(bookendElem);
-    bookend.buildCallback();
-
-    analytics = getAnalyticsService(win);
-    analyticsVariables = getVariableService(win);
-
-    // Force sync mutateElement.
-    env.sandbox.stub(bookend, 'mutateElement').callsArg(0);
-    env.sandbox.stub(bookend, 'getStoryMetadata_').returns(metadata);
-  });
-
-  it('should build the users json', async () => {
-    const userJson = {
-      'bookendVersion': 'v1.0',
-      'shareProviders': [
-        'email',
-        {'provider': 'facebook', 'app_id': '254325784911610'},
-        'whatsapp',
-      ],
-      'components': [
-        {
-          'type': 'heading',
-          'text': 'My Heading Title!',
-        },
-        {
-          'type': 'small',
-          'title': 'This is an example article',
-          'url': 'http://example.com/article.html',
-          'image': 'http://placehold.it/256x128',
-        },
-        {
-          'type': 'portrait',
-          'title': 'This is an example article',
-          'category': 'This is an example article',
-          'url': 'http://example.com/article.html',
-          'image': 'http://placehold.it/256x128',
-        },
-        {
-          'type': 'cta-link',
-          'links': [
-            {
-              'text': 'buttonA',
-              'url': 'google.com',
-            },
-            {
-              'text': 'buttonB',
-              'url': 'google.com',
-            },
-            {
-              'text': 'longtext longtext longtext longtext longtext',
-              'url': 'google.com',
-            },
-          ],
-        },
-        {
-          'type': 'landscape',
-          'title': 'TRAPPIST-1 Planets May Still Be Wet Enough for Life',
-          'url': 'http://example.com/article.html',
-          'category': 'astronomy',
-          'image': 'http://placehold.it/256x128',
-        },
-        {
-          'type': 'textbox',
-          'text': [
-            'Food by Enrique McPizza',
-            'Choreography by Gabriel Filly',
-            'Script by Alan Ecma S.',
-            'Direction by Jon Tarantino',
-          ],
-        },
-      ],
-    };
-
-    env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-
-    bookend.build();
-    const config = await bookend.loadConfigAndMaybeRenderBookend();
-    config.components.forEach((currentComponent, index) => {
-      expect(currentComponent).to.deep.equal(expectedComponents[index]);
-    });
-  });
-
-  it('should build the users json with share providers alternative', async () => {
-    const userJson = {
-      'bookendVersion': 'v1.0',
-      'shareProviders': [
-        'email',
-        {'provider': 'facebook', 'app_id': '254325784911610'},
-        {'provider': 'whatsapp'},
-      ],
-      'components': [
-        {
-          'type': 'heading',
-          'text': 'My Heading Title!',
-        },
-        {
-          'type': 'small',
-          'title': 'This is an example article',
-          'url': 'http://example.com/article.html',
-          'image': 'http://placehold.it/256x128',
-        },
-        {
-          'type': 'portrait',
-          'title': 'This is an example article',
-          'category': 'This is an example article',
-          'domainName': 'example.com',
-          'url': 'http://example.com/article.html',
-          'image': 'http://placehold.it/256x128',
-        },
-        {
-          'type': 'cta-link',
-          'links': [
-            {
-              'text': 'buttonA',
-              'url': 'google.com',
-            },
-            {
-              'text': 'buttonB',
-              'url': 'google.com',
-            },
-            {
-              'text': 'longtext longtext longtext longtext longtext',
-              'url': 'google.com',
-            },
-          ],
-        },
-        {
-          'type': 'landscape',
-          'title': 'TRAPPIST-1 Planets May Still Be Wet Enough for Life',
-          'url': 'http://example.com/article.html',
-          'category': 'astronomy',
-          'image': 'http://placehold.it/256x128',
-        },
-        {
-          'type': 'textbox',
-          'text': [
-            'Food by Enrique McPizza',
-            'Choreography by Gabriel Filly',
-            'Script by Alan Ecma S.',
-            'Direction by Jon Tarantino',
-          ],
-        },
-      ],
-    };
-
-    env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-
-    bookend.build();
-    const config = await bookend.loadConfigAndMaybeRenderBookend();
-    config.components.forEach((currentComponent, index) => {
-      expect(currentComponent).to.deep.equal(expectedComponents[index]);
-    });
-  });
-
-  it('should build the users share providers', async () => {
-    const userJson = {
-      'bookendVersion': 'v1.0',
-      'shareProviders': [
-        'email',
-        {'provider': 'facebook', 'app_id': '254325784911610'},
-        {
-          'provider': 'twitter',
-          'text':
-            'This is custom share text that I' +
-            ' would like for the Twitter platform',
-        },
-        'whatsapp',
-      ],
-      'components': [
-        {
-          'type': 'heading',
-          'text': 'My Heading Title!',
-        },
-        {
-          'type': 'small',
-          'title': 'This is an example article',
-          'url': 'http://example.com/article.html',
-          'image': 'http://placehold.it/256x128',
-        },
-      ],
-    };
-
-    const expectedShareProviders = [
-      'email',
-      {'provider': 'facebook', 'app_id': '254325784911610'},
-      {
-        'provider': 'twitter',
-        'text':
-          'This is custom share text that I ' +
-          'would like for the Twitter platform',
-      },
-      'whatsapp',
-    ];
-
-    env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-
-    bookend.build();
-    const config = await bookend.loadConfigAndMaybeRenderBookend();
-    config['shareProviders'].forEach((currProvider, index) => {
-      expect(currProvider).to.deep.equal(expectedShareProviders[index]);
-    });
-  });
-
-  it('should ignore empty share providers', async () => {
-    const userJson = {
-      'bookendVersion': 'v1.0',
-      'shareProviders': [],
-      'components': [
-        {
-          'type': 'heading',
-          'text': 'My Heading Title!',
-        },
-        {
-          'type': 'small',
-          'title': 'This is an example article',
-          'url': 'http://example.com/article.html',
-          'image': 'http://placehold.it/256x128',
-        },
-      ],
-    };
-
-    env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-
-    bookend.build();
-    const config = await bookend.loadConfigAndMaybeRenderBookend();
-    expect(config['shareProviders']).to.deep.equal([]);
-  });
-
-  it('should warn when trying to use system sharing', async () => {
-    const userJson = {
-      'bookendVersion': 'v1.0',
-      'shareProviders': ['system'],
-      'components': [
-        {
-          'type': 'heading',
-          'text': 'My Heading Title!',
-        },
-        {
-          'type': 'small',
-          'title': 'This is an example article',
-          'url': 'http://example.com/article.html',
-          'image': 'http://placehold.it/256x128',
-        },
-      ],
-    };
-
-    const userWarnStub = env.sandbox.stub(user(), 'warn');
-
-    env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-
-    bookend.build();
-    await bookend.loadConfigAndMaybeRenderBookend();
-    expect(userWarnStub).to.be.calledOnce;
-    expect(userWarnStub.args[0][1]).to.be.equal(
-      '`system` is not a valid ' +
-        'share provider type. Native sharing is ' +
-        'enabled by default and cannot be turned off.'
-    );
-  });
-
-  it('should reject invalid user json for a textbox component', () => {
-    const textBoxComponent = new TextBoxComponent();
-    const userJson = {
-      'bookendVersion': 'v1.0',
-      'shareProviders': [
-        'email',
-        {'provider': 'facebook', 'app-id': '254325784911610'},
-        'whatsapp',
-      ],
-      'components': [
-        {
-          'type': 'heading',
-          'title': 'test',
-        },
-        {
-          'type': 'small',
-          'url': 'http://example.com/article.html',
-          'image': 'http://placehold.it/256x128',
-        },
-        {
-          'type': 'textbox',
-          'text': 'http://example.com/article.html',
-        },
-      ],
-    };
-
-    allowConsoleError(() => {
-      expect(() => textBoxComponent.assertValidity(userJson)).to.throw(
-        'Textbox component must contain ' +
-          '`text` array and at least one element inside it, ' +
-          'skipping invalid.'
-      );
-    });
-  });
-
-  it('should have a button to re-prompt the consent if story has one', () => {
-    const consentId = 'CONSENT_ID';
-    bookend.storeService_.dispatch(Action.SET_CONSENT_ID, consentId);
-
-    bookend.build();
-
-    const promptButtonEl = bookend
-      .getShadowRoot()
-      .querySelector(`[on="tap:${consentId}.prompt"]`);
-
-    expect(promptButtonEl).to.exist;
-  });
-
-  it('should not have a button to re-prompt the consent by default', () => {
-    bookend.build();
-
-    // No element with an "on" attribute ending with ".prompt".
-    const promptButtonEl = bookend
-      .getShadowRoot()
-      .querySelector('[on$=".prompt"]');
-
-    expect(promptButtonEl).to.be.null;
-  });
-
-  it('should skip invalid component name and continue building', async () => {
-    const userJson = {
-      'bookendVersion': 'v1.0',
-      'shareProviders': [
-        'email',
-        {'provider': 'facebook', 'app-id': '254325784911610'},
-        'whatsapp',
-      ],
-      'components': [
-        {
-          'type': 'invalid-type',
-          'title': 'test',
-        },
-        {
-          'type': 'small',
-          'title': 'This is an example article',
-          'domainName': 'example.com',
-          'url': 'http://example.com/article.html',
-          'image': 'http://placehold.it/256x128',
-        },
-      ],
-    };
-
-    env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-
-    bookend.build();
-    expectAsyncConsoleError(
-      /[Component `invalid-type` is not supported. Skipping invalid]/
-    );
-
-    const config = await bookend.loadConfigAndMaybeRenderBookend();
-    // Still builds rest of valid components.
-
-    // We use config.components[1] because config.components[0] is a heading
-    // that we prepend when there is no heading present in the user config.
-    expect(config.components[1]).to.deep.equal(userJson.components[1]);
-  });
-
-  it('should not add a heading component when there are no components', async () => {
-    const userJson = {
-      'bookendVersion': 'v1.0',
-      'shareProviders': [
-        'email',
-        {'provider': 'facebook', 'app_id': '254325784911610'},
-        'whatsapp',
-      ],
-      'components': [],
-    };
-
-    env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-
-    bookend.build();
-    const config = await bookend.loadConfigAndMaybeRenderBookend();
-    expect(config.components.length).to.equal(0);
-  });
-
-  describe('analytics', () => {
-    it('should fire analytics event when clicking on a link', async () => {
-      const userJson = {
-        'bookendVersion': 'v1.0',
-        'shareProviders': [
-          'email',
-          {'provider': 'facebook', 'app_id': '254325784911610'},
-          'whatsapp',
-        ],
-        'components': [
-          {
-            'type': 'cta-link',
-            'links': [
-              {
-                'text': 'buttonA',
-                'url': 'google.com',
-                'amphtml': true,
-              },
-            ],
-          },
-        ],
-      };
-
-      env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-      const analyticsSpy = env.sandbox.spy(analytics, 'triggerEvent');
-
-      bookend.build();
-      await bookend.loadConfigAndMaybeRenderBookend();
-      const ctaLinks = bookend.bookendEl_.querySelector(
-        '.i-amphtml-story-bookend-cta-link-wrapper'
-      );
-      ctaLinks.children[0].onclick = function (e) {
-        e.preventDefault(); // Make the test not actually navigate.
-      };
-      ctaLinks.children[0].click();
-
-      expect(analyticsSpy).to.have.been.calledWith(
-        StoryAnalyticsEvent.BOOKEND_CLICK
-      );
-      expect(
-        analyticsVariables.get()[AnalyticsVariable.BOOKEND_TARGET_HREF]
-      ).to.equal(
-        'https://www.testorigin.com/amp-stories/example/path/google.com'
-      );
-      expect(
-        analyticsVariables.get()[AnalyticsVariable.BOOKEND_COMPONENT_TYPE]
-      ).to.equal('cta-link');
-      expect(
-        analyticsVariables.get()[AnalyticsVariable.BOOKEND_COMPONENT_POSITION]
-      ).to.equal(1);
-    });
-
-    it('should not fire analytics event when clicking non-clickable components', async () => {
-      const userJson = {
-        'bookendVersion': 'v1.0',
-        'shareProviders': [
-          'email',
-          {'provider': 'facebook', 'app_id': '254325784911610'},
-          'whatsapp',
-        ],
-        'components': [
-          {
-            'type': 'textbox',
-            'text': [
-              'Food by Enrique McPizza',
-              'Choreography by Gabriel Filly',
-              'Script by Alan Ecma S.',
-              'Direction by Jon Tarantino',
-            ],
-          },
-        ],
-      };
-
-      env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-      const analyticsSpy = env.sandbox.spy(analytics, 'triggerEvent');
-
-      bookend.build();
-      await bookend.loadConfigAndMaybeRenderBookend();
-      const textEl = bookend.bookendEl_.querySelector(
-        '.i-amphtml-story-bookend-text'
-      );
-
-      textEl.click();
-
-      expect(analyticsSpy).to.not.have.been.called;
-    });
-
-    it('should forward the correct target when clicking on an element', async () => {
-      const userJson = {
-        'bookendVersion': 'v1.0',
-        'shareProviders': [
-          'email',
-          {'provider': 'facebook', 'app_id': '254325784911610'},
-          'whatsapp',
-        ],
-        'components': [
-          {
-            'type': 'cta-link',
-            'links': [
-              {
-                'text': 'buttonA',
-                'url': 'google.com',
-                'amphtml': true,
-              },
-            ],
-          },
-        ],
-      };
-
-      env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-      const clickSpy = env.sandbox.spy();
-      doc.addEventListener('click', clickSpy);
-
-      bookend.build();
-      await bookend.loadConfigAndMaybeRenderBookend();
-      const ctaLinks = bookend.bookendEl_.querySelector(
-        '.i-amphtml-story-bookend-cta-link-wrapper'
-      );
-      ctaLinks.children[0].onclick = function (e) {
-        e.preventDefault(); // Make the test not actually navigate.
-      };
-      ctaLinks.children[0].click();
-
-      expect(clickSpy.getCall(0).args[0]).to.contain({
-        '__AMP_CUSTOM_LINKER_TARGET__': ctaLinks.children[0],
-      });
-    });
-  });
-
-  describe('cta links component', () => {
-    it('should reject invalid user json', () => {
-      const ctaLinkComponent = new CtaLinkComponent();
-      const userJson = {
-        'bookendVersion': 'v1.0',
-        'shareProviders': [
-          'email',
-          {'provider': 'facebook', 'app_id': '254325784911610'},
-          'whatsapp',
-        ],
-        'components': [
-          {
-            'type': 'heading',
-            'title': 'test',
-          },
-          {
-            'type': 'small',
-            'url': 'http://example.com/article.html',
-            'image': 'http://placehold.it/256x128',
-          },
-          {
-            'type': 'cta-link',
-            'links': [],
-          },
-        ],
-      };
-
-      allowConsoleError(() => {
-        expect(() => ctaLinkComponent.assertValidity(userJson)).to.throw(
-          'CTA link component must be an array ' +
-            'and contain at least one link inside it.'
-        );
-      });
-    });
-
-    it(
-      'should add amp-to-amp linking to individual cta links when ' +
-        'specified in the JSON config',
-      async () => {
-        const userJson = {
-          'bookendVersion': 'v1.0',
-          'shareProviders': [
-            'email',
-            {'provider': 'facebook', 'app_id': '254325784911610'},
-            'whatsapp',
-          ],
-          'components': [
-            {
-              'type': 'cta-link',
-              'links': [
-                {
-                  'text': 'buttonA',
-                  'url': 'google.com',
-                  'amphtml': true,
-                },
-              ],
-            },
-          ],
-        };
-
-        env.sandbox
-          .stub(requestService, 'loadBookendConfig')
-          .resolves(userJson);
-
-        bookend.build();
-        await bookend.loadConfigAndMaybeRenderBookend();
-        const ctaLinks = bookend.bookendEl_.querySelector(
-          '.i-amphtml-story-bookend-cta-link-wrapper'
-        );
-        expect(ctaLinks.children[0]).to.have.attribute('rel');
-        expect(ctaLinks.children[0].getAttribute('rel')).to.equal('amphtml');
-      }
-    );
-
-    it(
-      'should not add amp-to-amp linking to cta links when not ' +
-        'specified in the JSON config',
-      async () => {
-        const userJson = {
-          'bookendVersion': 'v1.0',
-          'shareProviders': [
-            'email',
-            {'provider': 'facebook', 'app_id': '254325784911610'},
-            'whatsapp',
-          ],
-          'components': [
-            {
-              'type': 'cta-link',
-              'links': [
-                {
-                  'text': 'buttonB',
-                  'url': 'google.com',
-                  'amphtml': '',
-                },
-                {
-                  'text': 'longtext longtext longtext longtext longtext',
-                  'url': 'google.com',
-                  'amphtml': false,
-                },
-              ],
-            },
-          ],
-        };
-
-        env.sandbox
-          .stub(requestService, 'loadBookendConfig')
-          .resolves(userJson);
-
-        bookend.build();
-        await bookend.loadConfigAndMaybeRenderBookend();
-        const ctaLinks = bookend.bookendEl_.querySelector(
-          '.i-amphtml-story-bookend-cta-link-wrapper'
-        );
-        expect(ctaLinks.children[0]).to.not.have.attribute('rel');
-        expect(ctaLinks.children[1]).to.not.have.attribute('rel');
-      }
-    );
-  });
-
-  describe('small article component', () => {
-    it('should reject invalid user json', () => {
-      const articleComponent = new ArticleComponent();
-      const userJson = {
-        'bookendVersion': 'v1.0',
-        'shareProviders': [
-          'email',
-          {'provider': 'facebook', 'app_id': '254325784911610'},
-          'whatsapp',
-        ],
-        'components': [
-          {
-            'type': 'heading',
-            'title': 'test',
-          },
-          {
-            'type': 'small',
-            'url': 'http://example.com/article.html',
-            'image': 'http://placehold.it/256x128',
-          },
-        ],
-      };
-
-      allowConsoleError(() => {
-        expect(() => articleComponent.assertValidity(userJson)).to.throw(
-          'Small article component must contain `title`, `url` fields, ' +
-            'skipping invalid.​​​'
-        );
-      });
-    });
-
-    it('should add amp-to-amp linking when specified in the JSON config', async () => {
-      const userJson = {
-        'bookendVersion': 'v1.0',
-        'shareProviders': [
-          'email',
-          {'provider': 'facebook', 'app_id': '254325784911610'},
-          'whatsapp',
-        ],
-        'components': [
-          {
-            'type': 'small',
-            'title': 'This is an example article!',
-            'url': 'http://example.com/article.html',
-            'image': 'http://placehold.it/256x128',
-            'amphtml': true,
-          },
-        ],
-      };
-
-      env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-
-      bookend.build();
-      await bookend.loadConfigAndMaybeRenderBookend();
-      const articles = bookend.bookendEl_.querySelectorAll(
-        '.i-amphtml-story-bookend-article'
-      );
-      expect(articles[0]).to.have.attribute('rel');
-      expect(articles[0].getAttribute('rel')).to.equal('amphtml');
-    });
-
-    it('should not add amp-to-amp linking when not specified in the JSON config', async () => {
-      const userJson = {
-        'bookendVersion': 'v1.0',
-        'shareProviders': [
-          'email',
-          {'provider': 'facebook', 'app_id': '254325784911610'},
-          'whatsapp',
-        ],
-        'components': [
-          {
-            'type': 'small',
-            'title': 'This is an example article!',
-            'url': 'http://example.com/article.html',
-            'image': 'http://placehold.it/256x128',
-          },
-          {
-            'type': 'small',
-            'title': 'This is an example article!',
-            'url': 'http://example.com/article.html',
-            'image': 'http://placehold.it/256x128',
-            'amphtml': 'true',
-          },
-        ],
-      };
-
-      env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-
-      bookend.build();
-      await bookend.loadConfigAndMaybeRenderBookend();
-      const articles = bookend.bookendEl_.querySelectorAll(
-        '.i-amphtml-story-bookend-article'
-      );
-      expect(articles[0]).to.not.have.attribute('rel');
-      expect(articles[1]).to.not.have.attribute('rel');
-    });
-
-    it('should resolve relative url for origin url when served from the cache', () => {
-      const component = {
-        url: './other-article.html',
-        domainName: 'example.com',
-        type: 'small',
-        title: 'This is an example article',
-        image: '../../assets/01-iconic-american-destinations.jpg',
-      };
-
-      win.location.resetHref(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/c/s/www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-
-      const article = new ArticleComponent();
-      const el = article.buildElement(component, win, {position: 0});
-      expect(el.href).to.equal(
-        'https://www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/other-article.html'
-      );
-    });
-
-    it('should respect specified absolute URL', () => {
-      const component = {
-        url: 'https://www.anothersite.com/article.html',
-        domainName: 'example.com',
-        type: 'small',
-        title: 'This is an example article',
-        image: '../../assets/01-iconic-american-destinations.jpg',
-      };
-
-      win.location.resetHref(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/c/s/www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-
-      const article = new ArticleComponent();
-      const el = article.buildElement(component, win, {position: 0});
-      expect(el.href).to.equal('https://www.anothersite.com/article.html');
-    });
-
-    it('should rewrite thumbnail image url for cached version', () => {
-      const component = {
-        url: 'http://example.com/article.html',
-        domainName: 'example.com',
-        type: 'small',
-        title: 'This is an example article',
-        image: '../../assets/01-iconic-american-destinations.jpg',
-      };
-
-      win.location.resetHref(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/c/s/www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-
-      const article = new ArticleComponent();
-      const el = article.buildElement(component, win, {position: 0});
-      expect(el.querySelector('img').src).to.equal(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/i/s/www.nationalgeographic.com/amp-stories/assets/01-iconic-american-destinations.jpg'
-      );
-    });
-
-    it('should not rewrite thumbnail image url when using absolute url', () => {
-      const component = {
-        url: 'http://example.com/small.html',
-        domainName: 'example.com',
-        type: 'small',
-        title: 'This is an example small',
-        image: 'http://placehold.it/256x128',
-      };
-
-      win.location.resetHref(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/c/s/www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-      const small = new ArticleComponent();
-      const el = small.buildElement(component, win, {position: 0});
-      expect(el.querySelector('img').src).to.equal(
-        'http://placehold.it/256x128'
-      );
-    });
-
-    it('should not rewrite thumbnail image for origin documents', () => {
-      const component = {
-        url: 'http://example.com/small.html',
-        domainName: 'example.com',
-        type: 'small',
-        title: 'This is an example small',
-        image: '../../assets/01-iconic-american-destinations.jpg',
-      };
-
-      win.location.resetHref(
-        'https://www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-      const small = new ArticleComponent();
-      const el = small.buildElement(component, win, {position: 0});
-      expect(el.querySelector('img').src).to.equal(
-        'https://www.nationalgeographic.com/amp-stories/assets/01-iconic-american-destinations.jpg'
-      );
-    });
-  });
-
-  describe('landscape component', () => {
-    it('should reject invalid user json', () => {
-      const landscapeComponent = new LandscapeComponent();
-      const userJson = {
-        'bookendVersion': 'v1.0',
-        'shareProviders': [
-          'email',
-          {'provider': 'facebook', 'app_id': '254325784911610'},
-          'whatsapp',
-        ],
-        'components': [
-          {
-            'type': 'heading',
-            'title': 'test',
-          },
-          {
-            'type': 'small',
-            'url': 'http://example.com/article.html',
-            'image': 'http://placehold.it/256x128',
-          },
-          {
-            'type': 'landscape',
-            'url': 'http://example.com/article.html',
-            'category': 'astronomy',
-            'image': 'http://placehold.it/256x128',
-          },
-        ],
-      };
-
-      allowConsoleError(() => {
-        expect(() => landscapeComponent.assertValidity(userJson)).to.throw(
-          'Landscape component must contain `title`, `image`, ' +
-            '`url` fields, skipping invalid.'
-        );
-      });
-    });
-
-    it('should add amp-to-amp linking when specified in the JSON config', async () => {
-      const userJson = {
-        'bookendVersion': 'v1.0',
-        'shareProviders': [
-          'email',
-          {'provider': 'facebook', 'app_id': '254325784911610'},
-          'whatsapp',
-        ],
-        'components': [
-          {
-            'type': 'landscape',
-            'category': 'example category',
-            'title': 'example title',
-            'url': 'http://example.com/article.html',
-            'image': 'http://placehold.it/256x128',
-            'amphtml': true,
-          },
-        ],
-      };
-
-      env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-
-      bookend.build();
-      await bookend.loadConfigAndMaybeRenderBookend();
-      const articles = bookend.bookendEl_.querySelectorAll(
-        '.i-amphtml-story-bookend-landscape'
-      );
-      expect(articles[0]).to.have.attribute('rel');
-      expect(articles[0].getAttribute('rel')).to.equal('amphtml');
-    });
-
-    it('should not add amp-to-amp linking when not specified in the JSON config', async () => {
-      const userJson = {
-        'bookendVersion': 'v1.0',
-        'shareProviders': [
-          'email',
-          {'provider': 'facebook', 'app_id': '254325784911610'},
-          'whatsapp',
-        ],
-        'components': [
-          {
-            'type': 'landscape',
-            'category': 'example category',
-            'title': 'example title',
-            'url': 'http://example.com/article.html',
-            'image': 'http://placehold.it/256x128',
-          },
-          {
-            'type': 'landscape',
-            'category': 'example category',
-            'title': 'example title',
-            'url': 'http://example.com/article.html',
-            'image': 'http://placehold.it/256x128',
-            'amphtml': 'true',
-          },
-        ],
-      };
-
-      env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-
-      bookend.build();
-      await bookend.loadConfigAndMaybeRenderBookend();
-      const articles = bookend.bookendEl_.querySelectorAll(
-        '.i-amphtml-story-bookend-landscape'
-      );
-      expect(articles[0]).to.not.have.attribute('rel');
-      expect(articles[1]).to.not.have.attribute('rel');
-    });
-
-    it('should resolve relative url for origin url when served from the cache', () => {
-      const component = {
-        url: './other-article.html',
-        domainName: 'example.com',
-        type: 'landscape',
-        title: 'This is an example landscape article',
-        image: '../../assets/01-iconic-american-destinations.jpg',
-      };
-
-      win.location.resetHref(
-        'https://www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-
-      const landscape = new LandscapeComponent();
-
-      const el = landscape.buildElement(component, win, {position: 0});
-      expect(el.href).to.equal(
-        'https://www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/other-article.html'
-      );
-    });
-
-    it('should respect specified absolute URL', () => {
-      const component = {
-        url: 'https://www.anothersite.com/article.html',
-        domainName: 'example.com',
-        type: 'landscape',
-        title: 'This is an example landscape article',
-        image: '../../assets/01-iconic-american-destinations.jpg',
-      };
-
-      win.location.resetHref(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/c/s/www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-      const landscape = new LandscapeComponent();
-      const el = landscape.buildElement(component, win, {position: 0});
-      expect(el.href).to.equal('https://www.anothersite.com/article.html');
-    });
-
-    it('should rewrite landscape thumbnail image url for cached version', () => {
-      const component = {
-        url: 'http://example.com/landscape.html',
-        domainName: 'example.com',
-        type: 'landscape',
-        title: 'This is an example landscape',
-        image: './assets/01-iconic-american-destinations.jpg',
-      };
-
-      win.location.resetHref(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/c/s/www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-
-      const landscape = new LandscapeComponent();
-      const el = landscape.buildElement(component, win, {position: 0});
-      expect(el.querySelector('img').src).to.equal(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/i/s/www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/assets/01-iconic-american-destinations.jpg'
-      );
-    });
-
-    it('should not rewrite thumbnail image url when using absolute url', () => {
-      const component = {
-        url: 'http://example.com/landscape.html',
-        domainName: 'example.com',
-        type: 'landscape',
-        title: 'This is an example landscape',
-        image: 'http://placehold.it/256x128',
-      };
-
-      win.location.resetHref(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/c/s/www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-      const landscape = new LandscapeComponent();
-      const el = landscape.buildElement(component, win, {position: 0});
-      expect(el.querySelector('img').src).to.equal(
-        'http://placehold.it/256x128'
-      );
-    });
-
-    it('should not rewrite thumbnail image for origin documents', () => {
-      const component = {
-        url: 'http://example.com/landscape.html',
-        domainName: 'example.com',
-        type: 'small',
-        title: 'This is an example landscape',
-        image: '../../assets/01-iconic-american-destinations.jpg',
-      };
-
-      win.location.resetHref(
-        'https://www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-      const landscape = new LandscapeComponent();
-      const el = landscape.buildElement(component, win, {position: 0});
-      expect(el.querySelector('img').src).to.equal(
-        'https://www.nationalgeographic.com/amp-stories/assets/01-iconic-american-destinations.jpg'
-      );
-    });
-  });
-
-  describe('portrait component', () => {
-    it('should reject invalid user json', () => {
-      const portraitComponant = new PortraitComponent();
-      const userJson = {
-        'bookendVersion': 'v1.0',
-        'shareProviders': [
-          'email',
-          {'provider': 'facebook', 'app_id': '254325784911610'},
-          'whatsapp',
-        ],
-        'components': [
-          {
-            'type': 'portrait',
-            'category': 'sample',
-            'url': 'http://example.com/article.html',
-            'image': 'http://placehold.it/256x128',
-          },
-        ],
-      };
-
-      allowConsoleError(() => {
-        expect(() => portraitComponant.assertValidity(userJson)).to.throw(
-          'Portrait component must contain `title`, `image`, ' +
-            '`url` fields, skipping invalid.'
-        );
-      });
-    });
-
-    it('should add amp-to-amp linking when specified in the JSON config', async () => {
-      const userJson = {
-        'bookendVersion': 'v1.0',
-        'shareProviders': [
-          'email',
-          {'provider': 'facebook', 'app_id': '254325784911610'},
-          'whatsapp',
-        ],
-        'components': [
-          {
-            'type': 'portrait',
-            'title': 'example title',
-            'category': 'example category',
-            'url': 'http://example.com/article.html',
-            'image': 'http://placehold.it/256x128',
-            'amphtml': true,
-          },
-        ],
-      };
-
-      env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-
-      bookend.build();
-      await bookend.loadConfigAndMaybeRenderBookend();
-      const articles = bookend.bookendEl_.querySelectorAll(
-        '.i-amphtml-story-bookend-portrait'
-      );
-      expect(articles[0]).to.have.attribute('rel');
-      expect(articles[0].getAttribute('rel')).to.equal('amphtml');
-    });
-
-    it('should not add amp-to-amp linking when not specified in the JSON config', async () => {
-      const userJson = {
-        'bookendVersion': 'v1.0',
-        'shareProviders': [
-          'email',
-          {'provider': 'facebook', 'app_id': '254325784911610'},
-          'whatsapp',
-        ],
-        'components': [
-          {
-            'type': 'portrait',
-            'title': 'example title',
-            'category': 'example category',
-            'url': 'http://example.com/article.html',
-            'image': 'http://placehold.it/256x128',
-          },
-          {
-            'type': 'portrait',
-            'title': 'example title',
-            'category': 'example category',
-            'url': 'http://example.com/article.html',
-            'image': 'http://placehold.it/256x128',
-            'amphtml': 'true',
-          },
-        ],
-      };
-
-      env.sandbox.stub(requestService, 'loadBookendConfig').resolves(userJson);
-
-      bookend.build();
-      await bookend.loadConfigAndMaybeRenderBookend();
-      const articles = bookend.bookendEl_.querySelectorAll(
-        '.i-amphtml-story-bookend-portrait'
-      );
-      expect(articles[0]).to.not.have.attribute('rel');
-      expect(articles[1]).to.not.have.attribute('rel');
-    });
-
-    it('should resolve relative url for origin url when served from the cache', () => {
-      const component = {
-        url: './other-article.html',
-        domainName: 'example.com',
-        type: 'portrait',
-        title: 'This is an example portrait article',
-        image: '../../assets/01-iconic-american-destinations.jpg',
-      };
-
-      win.location.resetHref(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/c/s/www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-
-      const portrait = new PortraitComponent();
-      const el = portrait.buildElement(component, win, {position: 0});
-      expect(el.href).to.equal(
-        'https://www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/other-article.html'
-      );
-    });
-
-    it('should respect specified absolute URL', () => {
-      const component = {
-        url: 'https://www.anothersite.com/article.html',
-        domainName: 'example.com',
-        type: 'portrait',
-        title: 'This is an example portrait article',
-        image: '../../assets/01-iconic-american-destinations.jpg',
-      };
-
-      win.location.resetHref(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/c/s/www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-
-      const portrait = new PortraitComponent();
-      const el = portrait.buildElement(component, win, {position: 0});
-      expect(el.href).to.equal('https://www.anothersite.com/article.html');
-    });
-
-    it('should rewrite thumbnail image url for cached version', () => {
-      const component = {
-        url: 'http://example.com/portrait.html',
-        domainName: 'example.com',
-        type: 'portrait',
-        title: 'This is an example portrait',
-        image: 'assets/01-iconic-american-destinations.jpg',
-      };
-
-      win.location.resetHref(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/c/s/www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-      const portrait = new PortraitComponent();
-      const el = portrait.buildElement(component, win, {position: 0});
-      expect(el.querySelector('img').src).to.equal(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/i/s/www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/assets/01-iconic-american-destinations.jpg'
-      );
-    });
-
-    it('should not rewrite thumbnail image url when using absolute url', () => {
-      const component = {
-        url: 'http://example.com/portrait.html',
-        domainName: 'example.com',
-        type: 'portrait',
-        title: 'This is an example portrait',
-        image: 'http://placehold.it/256x128',
-      };
-
-      win.location.resetHref(
-        'https://www-nationalgeographic-com.cdn.ampproject.org/c/s/www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-      const portrait = new PortraitComponent();
-      const el = portrait.buildElement(component, win, {position: 0});
-      expect(el.querySelector('img').src).to.equal(
-        'http://placehold.it/256x128'
-      );
-    });
-
-    it('should not rewrite thumbnail image for origin documents', () => {
-      const component = {
-        url: 'http://example.com/portrait.html',
-        domainName: 'example.com',
-        type: 'small',
-        title: 'This is an example portrait',
-        image: '../../assets/01-iconic-american-destinations.jpg',
-      };
-
-      win.location.resetHref(
-        'https://www.nationalgeographic.com/amp-stories/travel/10-iconic-places-to-photograph/'
-      );
-      const portrait = new PortraitComponent();
-      const el = portrait.buildElement(component, win, {position: 0});
-      expect(el.querySelector('img').src).to.equal(
-        'https://www.nationalgeographic.com/amp-stories/assets/01-iconic-american-destinations.jpg'
-      );
-    });
-  });
-});
diff --git a/extensions/amp-story/1.0/test/test-amp-story-consent.js b/extensions/amp-story/1.0/test/test-amp-story-consent.js
index 63fc82b11af6b..57857936e4387 100644
--- a/extensions/amp-story/1.0/test/test-amp-story-consent.js
+++ b/extensions/amp-story/1.0/test/test-amp-story-consent.js
@@ -102,6 +102,16 @@ describes.realWin('amp-story-consent', {amp: true}, (env) => {
     expect(storyConsent.storyConsentConfig_).to.deep.equal(defaultConfig);
   });
 
+  it('should parse and merge legacy consent config', () => {
+    const newConsentConfig = {
+      'consentInstanceId': 'ABC',
+      'checkConsentHref': 'https://example.com',
+      'promptIfUnknownForGeoGroup': undefined,
+    };
+    storyConsent.buildCallback();
+    expect(storyConsent.consentConfig_).to.deep.equal(newConsentConfig);
+  });
+
   it('should require a story-consent title', () => {
     delete defaultConfig.title;
     setConfig(defaultConfig);
@@ -266,10 +276,10 @@ describes.realWin('amp-story-consent', {amp: true}, (env) => {
   });
 
   it('should broadcast the amp actions', () => {
-    env.sandbox.stub(storyConsent.actions_, 'trigger');
-
     storyConsent.buildCallback();
 
+    env.sandbox.stub(storyConsent.actions_, 'trigger');
+
     // Builds and appends a fake button directly in the storyConsent Shadow DOM.
     const buttonEl = win.document.createElement('button');
     buttonEl.setAttribute('on', 'tap:ABC.accept');
diff --git a/extensions/amp-story/1.0/test/test-amp-story-grid-layer.js b/extensions/amp-story/1.0/test/test-amp-story-grid-layer.js
index 184d694ae3417..3c9ae8ab2702c 100644
--- a/extensions/amp-story/1.0/test/test-amp-story-grid-layer.js
+++ b/extensions/amp-story/1.0/test/test-amp-story-grid-layer.js
@@ -58,6 +58,8 @@ describes.realWin('amp-story-grid-layer', {amp: true}, (env) => {
 
     const story = win.document.createElement('amp-story');
     story.getImpl = () => Promise.resolve(mediaPoolRoot);
+    // Makes whenUpgradedToCustomElement() resolve immediately.
+    story.createdCallback = Promise.resolve();
 
     element = win.document.createElement('amp-story-page');
     gridLayerEl = win.document.createElement('amp-story-grid-layer');
@@ -124,4 +126,51 @@ describes.realWin('amp-story-grid-layer', {amp: true}, (env) => {
       )
     ).to.equal(562);
   });
+
+  it('should use the scaling factor to set the size of the layer', async () => {
+    gridLayerEl.setAttribute('aspect-ratio', '1:2');
+    gridLayerEl.setAttribute('scaling-factor', '1.5');
+    await buildGridLayer();
+
+    storeService.dispatch(Action.SET_PAGE_SIZE, {width: 1000, height: 1000});
+
+    expect(gridLayerEl).to.have.class('i-amphtml-story-grid-template-aspect');
+    expect(
+      parseInt(
+        gridLayerEl.style.getPropertyValue('--i-amphtml-story-layer-width'),
+        10
+      )
+    ).to.equal(750);
+    expect(
+      parseInt(
+        gridLayerEl.style.getPropertyValue('--i-amphtml-story-layer-height'),
+        10
+      )
+    ).to.equal(1500);
+  });
+
+  it('should apply the aspect-ratio attribute from the responsiveness preset', async () => {
+    gridLayerEl.setAttribute('preset', '2021-foreground');
+    await buildGridLayer();
+
+    storeService.dispatch(Action.SET_PAGE_SIZE, {width: 1000, height: 1000});
+
+    expect(gridLayerEl.getAttribute('aspect-ratio')).to.equal('69:116');
+  });
+
+  it('should use the responsiveness preset to change the layer aspect', async () => {
+    gridLayerEl.setAttribute('preset', '2021-foreground');
+    await buildGridLayer();
+
+    storeService.dispatch(Action.SET_PAGE_SIZE, {width: 1000, height: 1000});
+
+    expect(gridLayerEl).to.have.class('i-amphtml-story-grid-template-aspect');
+  });
+
+  it('should not add aspect-ratio attribute if preset passed is incorrect', async () => {
+    gridLayerEl.setAttribute('preset', 'wrong-preset');
+    await buildGridLayer();
+
+    expect(gridLayerEl.hasAttribute('aspect-ratio')).to.be.false;
+  });
 });
diff --git a/extensions/amp-story/1.0/test/test-amp-story-localization-strings.js b/extensions/amp-story/1.0/test/test-amp-story-localization-strings.js
new file mode 100644
index 0000000000000..11fe7467e7ca4
--- /dev/null
+++ b/extensions/amp-story/1.0/test/test-amp-story-localization-strings.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {LocalizedStringId} from '../../../../src/localized-strings';
+import localesObjs from '../_locales/index';
+
+describes.fakeWin('amp-story-localization-strings', {amp: true}, () => {
+  describe('localized strings', () => {
+    localesObjs.forEach((obj) => {
+      const languageName = Object.keys(obj)[0];
+      const languageStrings = obj[languageName];
+      const languageKeys = Object.keys(languageStrings);
+
+      it(languageName + ' should have unique keys', () => {
+        const uniqueKeys = new Set(languageKeys);
+
+        expect(uniqueKeys.size).to.eql(languageKeys.length);
+      });
+
+      it(languageName + ' keys should exist in LocalizedStringId', () => {
+        const localizedStringIdKeys = Object.values(LocalizedStringId);
+
+        languageKeys.forEach((key) => {
+          expect(localizedStringIdKeys).to.contain(key);
+        });
+      });
+    });
+  });
+});
diff --git a/extensions/amp-story/1.0/test/test-amp-story-page.js b/extensions/amp-story/1.0/test/test-amp-story-page.js
index 4197fb58b8cfc..5312aa83d9339 100644
--- a/extensions/amp-story/1.0/test/test-amp-story-page.js
+++ b/extensions/amp-story/1.0/test/test-amp-story-page.js
@@ -14,26 +14,36 @@
  * limitations under the License.
  */
 
+import * as MediaQueryProps from '../../../../src/utils/media-query-props';
+import * as VideoUtils from '../../../../src/utils/video';
+import {Action, AmpStoryStoreService} from '../amp-story-store-service';
+import {AmpAudio} from '../../../amp-audio/0.1/amp-audio';
 import {AmpDocSingle} from '../../../../src/service/ampdoc-impl';
 import {AmpStoryPage, PageState, Selectors} from '../amp-story-page';
-import {AmpStoryStoreService} from '../amp-story-store-service';
-import {Deferred} from '../../../../src/utils/promise';
+import {Deferred} from '../../../../src/core/data-structures/promise';
 import {LocalizationService} from '../../../../src/service/localization';
 import {MediaType} from '../media-pool';
 import {Services} from '../../../../src/services';
-import {Signals} from '../../../../src/utils/signals';
+import {Signals} from '../../../../src/core/data-structures/signals';
 import {
+  addAttributesToElement,
   createElementWithAttributes,
   scopedQuerySelectorAll,
 } from '../../../../src/dom';
+import {htmlFor} from '../../../../src/static-template';
 import {installFriendlyIframeEmbed} from '../../../../src/friendly-iframe-embed';
 import {registerServiceBuilder} from '../../../../src/service';
+import {toggleExperiment} from '../../../../src/experiments';
 
-describes.realWin('amp-story-page', {amp: true}, (env) => {
+const extensions = ['amp-story:1.0', 'amp-audio'];
+
+describes.realWin('amp-story-page', {amp: {extensions}}, (env) => {
   let win;
   let element;
+  let html;
   let gridLayerEl;
   let page;
+  let storeService;
   let isPerformanceTrackingOn;
 
   const nextTick = () => new Promise((resolve) => win.setTimeout(resolve, 0));
@@ -42,6 +52,8 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
     win = env.win;
     isPerformanceTrackingOn = false;
 
+    html = htmlFor(win.document);
+
     const mediaPoolRoot = {
       getElement: () => win.document.createElement('div'),
       getMaxMediaElementCounts: () => ({
@@ -55,7 +67,7 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
       .stub(Services, 'localizationForDoc')
       .returns(localizationService);
 
-    const storeService = new AmpStoryStoreService(win);
+    storeService = new AmpStoryStoreService(win);
     registerServiceBuilder(win, 'story-store', function () {
       return storeService;
     });
@@ -68,6 +80,8 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
 
     const story = win.document.createElement('amp-story');
     story.getImpl = () => Promise.resolve(mediaPoolRoot);
+    // Makes whenUpgradedToCustomElement() resolve immediately.
+    story.createdCallback = Promise.resolve();
 
     element = win.document.createElement('amp-story-page');
     gridLayerEl = win.document.createElement('amp-story-grid-layer');
@@ -98,9 +112,8 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
   });
 
   it('should build the animation manager if an element is animated', async () => {
-    // Adding an element that has to be animated.
-    const animatedEl = win.document.createElement('div');
-    animatedEl.setAttribute('animate-in', 'fade-in');
+    const animatedEl = html`<div animate-in="fade-in"></div>`;
+
     element.appendChild(animatedEl);
     element.getAmpDoc = () => new AmpDocSingle(win);
 
@@ -108,6 +121,18 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
     expect(page.animationManager_).to.exist;
   });
 
+  it('should not build the animation manager if `prefers-reduced-motion` is on', async () => {
+    env.sandbox.stub(MediaQueryProps, 'prefersReducedMotion').returns(true);
+
+    const animatedEl = html`<div animate-in="fade-in"></div>`;
+
+    element.appendChild(animatedEl);
+    element.getAmpDoc = () => new AmpDocSingle(win);
+
+    page.buildCallback();
+    expect(page.animationManager_).to.be.null;
+  });
+
   it('should set an active attribute when state becomes active', async () => {
     page.buildCallback();
     await page.layoutCallback();
@@ -156,9 +181,7 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
   });
 
   it('should start the animations if needed when state becomes active', async () => {
-    // Adding an element that has to be animated.
-    const animatedEl = win.document.createElement('div');
-    animatedEl.setAttribute('animate-in', 'fade-in');
+    const animatedEl = html`<div animate-in="fade-in"></div>`;
     element.appendChild(animatedEl);
 
     page.buildCallback();
@@ -171,9 +194,6 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
   });
 
   it('should perform media operations when state becomes active', (done) => {
-    env.sandbox
-      .stub(page.resources_, 'getResourceForElement')
-      .returns({isDisplayed: () => true});
     env.sandbox.stub(page, 'loadPromise').returns(Promise.resolve());
 
     const videoEl = win.document.createElement('video');
@@ -210,11 +230,42 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
       });
   });
 
+  it('should unmute audio when state becomes active', (done) => {
+    env.sandbox.stub(page, 'loadPromise').returns(Promise.resolve());
+
+    storeService.dispatch(Action.TOGGLE_MUTED, false);
+
+    const videoEl = win.document.createElement('video');
+    videoEl.setAttribute('src', 'https://example.com/video.mp3');
+    gridLayerEl.appendChild(videoEl);
+
+    let mediaPoolMock;
+
+    page.buildCallback();
+    page
+      .layoutCallback()
+      .then(() => page.mediaPoolPromise_)
+      .then((mediaPool) => {
+        mediaPoolMock = env.sandbox.mock(mediaPool);
+        mediaPoolMock.expects('preload').resolves();
+        mediaPoolMock.expects('play').resolves();
+        mediaPoolMock.expects('unmute').once();
+
+        page.setState(PageState.PLAYING);
+
+        win.requestAnimationFrame(() => {
+          mediaPoolMock.verify();
+          done();
+        });
+      });
+  });
+
   it('should perform media operations on fie video when active', (done) => {
     const iframe = win.document.createElement('iframe');
     const fiePromise = installFriendlyIframeEmbed(iframe, gridLayerEl, {
       url: 'https://amp.dev',
       html: '<video src="https://example.com/video.mp3"></video>',
+      extensions: [],
     });
     env.sandbox.stub(page, 'loadPromise').returns(Promise.resolve());
 
@@ -224,10 +275,6 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
 
       let mediaPoolMock;
 
-      env.sandbox
-        .stub(page.resources_, 'getResourceForElement')
-        .returns({isDisplayed: () => true});
-
       page.buildCallback();
       page
         .layoutCallback()
@@ -258,53 +305,82 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
   });
 
   it('should build the background audio on layoutCallback', async () => {
-    env.sandbox
-      .stub(page.resources_, 'getResourceForElement')
-      .returns({isDisplayed: () => true});
-
     element.setAttribute('background-audio', 'foo.mp3');
     page.buildCallback();
     await page.layoutCallback();
     expect(
-      scopedQuerySelectorAll(element, Selectors.ALL_MEDIA)[0].tagName
+      scopedQuerySelectorAll(element, Selectors.ALL_PLAYBACK_MEDIA)[0].tagName
     ).to.equal('AUDIO');
   });
 
   it('should register the background audio on layoutCallback', async () => {
-    env.sandbox
-      .stub(page.resources_, 'getResourceForElement')
-      .returns({isDisplayed: () => true});
-
     element.setAttribute('background-audio', 'foo.mp3');
     page.buildCallback();
     const mediaPool = await page.mediaPoolPromise_;
     const mediaPoolRegister = env.sandbox.stub(mediaPool, 'register');
     await page.layoutCallback();
 
-    const audioEl = scopedQuerySelectorAll(element, Selectors.ALL_MEDIA)[0];
+    page.setState(PageState.PLAYING);
+
+    await nextTick();
+
+    const audioEl = scopedQuerySelectorAll(
+      element,
+      Selectors.ALL_PLAYBACK_MEDIA
+    )[0];
     expect(mediaPoolRegister).to.have.been.calledOnceWithExactly(audioEl);
   });
 
-  it('should preload the background audio on layoutCallback', async () => {
-    env.sandbox
-      .stub(page.resources_, 'getResourceForElement')
-      .returns({isDisplayed: () => true});
+  it('should register amp-audio on layoutCallback', async () => {
+    const ampAudioEl = win.document.createElement('amp-audio');
+    addAttributesToElement(ampAudioEl, {
+      'src': 'foo.mp3',
+      'layout': 'nodisplay',
+    });
+
+    page.element.querySelector('amp-story-grid-layer').appendChild(ampAudioEl);
+
+    new AmpAudio(ampAudioEl);
+    ampAudioEl.buildInternal();
+    page.buildCallback();
+
+    const mediaPool = await page.mediaPoolPromise_;
+    const mediaPoolRegister = env.sandbox.stub(mediaPool, 'register');
+    env.sandbox.stub(mediaPool, 'preload');
 
+    await page.layoutCallback();
+
+    page.setState(PageState.PLAYING);
+
+    await nextTick();
+
+    const audioEl = scopedQuerySelectorAll(
+      element,
+      Selectors.ALL_PLAYBACK_MEDIA
+    )[0];
+
+    expect(mediaPoolRegister).to.have.been.calledOnceWithExactly(audioEl);
+  });
+
+  it('should preload the background audio on layoutCallback', async () => {
     element.setAttribute('background-audio', 'foo.mp3');
     page.buildCallback();
     const mediaPool = await page.mediaPoolPromise_;
     const mediaPoolPreload = env.sandbox.stub(mediaPool, 'preload');
     await page.layoutCallback();
 
-    const audioEl = scopedQuerySelectorAll(element, Selectors.ALL_MEDIA)[0];
+    page.setState(PageState.PLAYING);
+
+    await nextTick();
+
+    const audioEl = scopedQuerySelectorAll(
+      element,
+      Selectors.ALL_PLAYBACK_MEDIA
+    )[0];
     expect(mediaPoolPreload).to.have.been.calledOnceWithExactly(audioEl);
   });
 
   it('should wait for media layoutCallback to register it', async () => {
-    env.sandbox
-      .stub(page.resources_, 'getResourceForElement')
-      .returns({isDisplayed: () => true});
-
     const ampVideoEl = win.document.createElement('amp-video');
     const videoEl = win.document.createElement('video');
     videoEl.setAttribute('src', 'https://example.com/video.mp4');
@@ -331,10 +407,6 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
   });
 
   it('should not register media before its layoutCallback resolves', async () => {
-    env.sandbox
-      .stub(page.resources_, 'getResourceForElement')
-      .returns({isDisplayed: () => true});
-
     const ampVideoEl = win.document.createElement('amp-video');
     const videoEl = win.document.createElement('video');
     videoEl.setAttribute('src', 'https://example.com/video.mp4');
@@ -361,6 +433,28 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
     expect(mediaPoolRegister).to.not.have.been.called;
   });
 
+  it('should use storyNextUp value as default for auto-advance-after', async () => {
+    env.sandbox
+      .stub(Services.viewerForDoc(element), 'getParam')
+      .withArgs('storyNextUp')
+      .returns('5s');
+    expect(element.getAttribute('auto-advance-after')).to.be.equal(null);
+    page.buildCallback();
+
+    expect(element.getAttribute('auto-advance-after')).to.be.equal('5s');
+  });
+
+  it('should not use storyNextUp to override auto-advance-after value', async () => {
+    env.sandbox
+      .stub(Services.viewerForDoc(element), 'getParam')
+      .withArgs('storyNextUp')
+      .returns('5s');
+    element.setAttribute('auto-advance-after', '20000ms');
+    page.buildCallback();
+
+    expect(element.getAttribute('auto-advance-after')).to.be.equal('20000ms');
+  });
+
   it('should stop the advancement when state becomes not active', async () => {
     page.buildCallback();
     const advancementStopStub = env.sandbox.stub(page.advancement_, 'stop');
@@ -371,9 +465,7 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
   });
 
   it('should stop the animations when state becomes not active', async () => {
-    // Adding an element that has to be animated.
-    const animatedEl = win.document.createElement('div');
-    animatedEl.setAttribute('animate-in', 'fade-in');
+    const animatedEl = html`<div animate-in="fade-in"></div>`;
     element.appendChild(animatedEl);
 
     page.buildCallback();
@@ -386,10 +478,6 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
   });
 
   it('should pause/rewind media when state becomes not active', (done) => {
-    env.sandbox
-      .stub(page.resources_, 'getResourceForElement')
-      .returns({isDisplayed: () => true});
-
     const videoEl = win.document.createElement('video');
     videoEl.setAttribute('src', 'https://example.com/video.mp3');
     gridLayerEl.appendChild(videoEl);
@@ -419,6 +507,32 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
       });
   });
 
+  it('should mute audio when state becomes active', (done) => {
+    storeService.dispatch(Action.TOGGLE_MUTED, false);
+
+    const videoEl = win.document.createElement('video');
+    videoEl.setAttribute('src', 'https://example.com/video.mp3');
+    gridLayerEl.appendChild(videoEl);
+
+    let mediaPoolMock;
+
+    page.buildCallback();
+    page
+      .layoutCallback()
+      .then(() => page.mediaPoolPromise_)
+      .then((mediaPool) => {
+        mediaPoolMock = env.sandbox.mock(mediaPool);
+        mediaPoolMock.expects('mute').withExactArgs(videoEl).once();
+
+        page.setState(PageState.NOT_ACTIVE);
+
+        win.requestAnimationFrame(() => {
+          mediaPoolMock.verify();
+          done();
+        });
+      });
+  });
+
   it('should stop the advancement when state becomes paused', async () => {
     page.buildCallback();
     const advancementStopStub = env.sandbox.stub(page.advancement_, 'stop');
@@ -429,9 +543,6 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
   });
 
   it('should pause media when state becomes paused', (done) => {
-    env.sandbox
-      .stub(page.resources_, 'getResourceForElement')
-      .returns({isDisplayed: () => true});
     const videoEl = win.document.createElement('video');
     videoEl.setAttribute('src', 'https://example.com/video.mp3');
     gridLayerEl.appendChild(videoEl);
@@ -514,6 +625,30 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
     expect(actions[0]).to.be.equal('pageId');
   });
 
+  it('play message should have role="button" to prevent story page navigation', async () => {
+    env.sandbox.stub(page, 'loadPromise').returns(Promise.resolve());
+    env.sandbox.stub(VideoUtils, 'isAutoplaySupported').resolves(false);
+    const videoEl = win.document.createElement('video');
+    videoEl.setAttribute('src', 'https://example.com/video.mp4');
+    gridLayerEl.appendChild(videoEl);
+
+    page.buildCallback();
+    const mediaPool = await page.mediaPoolPromise_;
+    const mediaPoolPlay = env.sandbox.stub(mediaPool, 'play');
+    mediaPoolPlay.returns(Promise.reject());
+
+    page.layoutCallback();
+
+    page.setState(PageState.PLAYING);
+    await nextTick();
+
+    const playButtonEl = element.querySelector(
+      '.i-amphtml-story-page-play-button'
+    );
+
+    expect(playButtonEl.getAttribute('role')).to.eql('button');
+  });
+
   it('should not build the open attachment UI if no attachment', async () => {
     page.buildCallback();
     await page.layoutCallback();
@@ -529,6 +664,7 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
     const attachmentEl = win.document.createElement(
       'amp-story-page-attachment'
     );
+    attachmentEl.setAttribute('layout', 'nodisplay');
     element.appendChild(attachmentEl);
 
     page.buildCallback();
@@ -541,11 +677,175 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
     expect(openAttachmentEl).to.exist;
   });
 
+  it('should build the open attachment UI with target="_top" to navigate in top window. For viewers, this ensures the link will open in the parent window.', async () => {
+    const attachmentEl = win.document.createElement(
+      'amp-story-page-attachment'
+    );
+    attachmentEl.setAttribute('layout', 'nodisplay');
+    element.appendChild(attachmentEl);
+
+    page.buildCallback();
+    await page.layoutCallback();
+    page.setState(PageState.PLAYING);
+
+    const openAttachmentEl = element.querySelector(
+      '.i-amphtml-story-page-open-attachment'
+    );
+
+    expect(openAttachmentEl.getAttribute('target')).to.eql('_top');
+  });
+
+  it('should build the new outlink page attachment UI with target="_top" to navigate in top level browsing context. For viewers, this ensures the link will open in the parent window.', async () => {
+    toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true);
+
+    const attachmentEl = win.document.createElement(
+      'amp-story-page-attachment'
+    );
+    attachmentEl.setAttribute('layout', 'nodisplay');
+    attachmentEl.setAttribute('href', 'google.com');
+    element.appendChild(attachmentEl);
+
+    page.buildCallback();
+    await page.layoutCallback();
+    page.setState(PageState.PLAYING);
+
+    const openAttachmentEl = element.querySelector(
+      '.i-amphtml-story-page-open-attachment'
+    );
+
+    expect(openAttachmentEl.getAttribute('target')).to.eql('_top');
+  });
+
+  it('should build the open outlink UI with same codepath as page attachment', async () => {
+    const outlinkEl = win.document.createElement('amp-story-page-outlink');
+    outlinkEl.setAttribute('layout', 'nodisplay');
+    element.appendChild(outlinkEl);
+
+    page.buildCallback();
+    await page.layoutCallback();
+    page.setState(PageState.PLAYING);
+
+    const openoutlinkEl = element.querySelector(
+      '.i-amphtml-story-page-open-attachment'
+    );
+    expect(openoutlinkEl).to.exist;
+  });
+
+  it('should build the inline page attachment UI with one image', async () => {
+    toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true);
+
+    const attachmentEl = win.document.createElement(
+      'amp-story-page-attachment'
+    );
+
+    attachmentEl.setAttribute('layout', 'nodisplay');
+    attachmentEl.setAttribute('cta-image', 'nodisplay');
+    element.appendChild(attachmentEl);
+
+    page.buildCallback();
+    await page.layoutCallback();
+    page.setState(PageState.PLAYING);
+
+    const openAttachmentEl = element.querySelector(
+      '.i-amphtml-story-page-open-attachment'
+    );
+
+    expect(
+      openAttachmentEl.querySelector(
+        '.i-amphtml-story-inline-page-attachment-img'
+      )
+    ).to.exist;
+  });
+
+  it('should build the inline page attachment UI with two images', async () => {
+    toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true);
+
+    const attachmentEl = win.document.createElement(
+      'amp-story-page-attachment'
+    );
+
+    attachmentEl.setAttribute('layout', 'nodisplay');
+    attachmentEl.setAttribute('cta-image', 'nodisplay');
+    attachmentEl.setAttribute('cta-image-2', 'nodisplay');
+    element.appendChild(attachmentEl);
+
+    page.buildCallback();
+    await page.layoutCallback();
+    page.setState(PageState.PLAYING);
+
+    const openAttachmentEl = element.querySelector(
+      '.i-amphtml-story-page-open-attachment'
+    );
+
+    expect(
+      openAttachmentEl.querySelectorAll(
+        '.i-amphtml-story-inline-page-attachment-img'
+      ).length
+    ).to.equal(2);
+  });
+
+  it('should build the new default outlink page attachment UI', async () => {
+    toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true);
+
+    const attachmentEl = createElementWithAttributes(
+      win.document,
+      'amp-story-page-attachment',
+      {'layout': 'nodisplay', 'href': 'www.google.com'}
+    );
+    element.appendChild(attachmentEl);
+
+    await page.buildCallback();
+    await page.layoutCallback();
+    page.setState(PageState.PLAYING);
+
+    const openAttachmentEl = element.querySelector(
+      '.i-amphtml-story-page-open-attachment'
+    );
+
+    expect(
+      openAttachmentEl.querySelector(
+        '.i-amphtml-story-outlink-page-attachment-outlink-chip'
+      )
+    ).to.exist;
+  });
+
+  it('should build the new outlink page attachment UI with icon', async () => {
+    toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true);
+
+    const attachmentEl = createElementWithAttributes(
+      win.document,
+      'amp-story-page-attachment',
+      {
+        'layout': 'nodisplay',
+        'href': 'www.google.com',
+        'theme': 'custom',
+        'cta-accent-color': 'pink',
+        'cta-accent-element': 'text',
+      }
+    );
+    element.appendChild(attachmentEl);
+
+    await page.buildCallback();
+    await page.layoutCallback();
+    page.setState(PageState.PLAYING);
+
+    const openAttachmentEl = element.querySelector(
+      '.i-amphtml-story-page-open-attachment'
+    );
+
+    expect(
+      openAttachmentEl.querySelector(
+        '.i-amphtml-story-page-open-attachment-link-icon'
+      )
+    ).to.exist;
+  });
+
   it('should build the open attachment UI with custom CTA label', async () => {
     const attachmentEl = win.document.createElement(
       'amp-story-page-attachment'
     );
-    attachmentEl.setAttribute('data-cta-text', 'Custom label');
+    attachmentEl.setAttribute('layout', 'nodisplay');
+    attachmentEl.setAttribute('cta-text', 'Custom label');
     element.appendChild(attachmentEl);
 
     page.buildCallback();
@@ -558,12 +858,29 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
     expect(openAttachmentLabelEl.textContent).to.equal('Custom label');
   });
 
+  it('should use cta-text attribute when data-cta-text also exist', async () => {
+    const attachmentEl = win.document.createElement(
+      'amp-story-page-attachment'
+    );
+    attachmentEl.setAttribute('layout', 'nodisplay');
+    attachmentEl.setAttribute('cta-text', 'CTA text');
+    attachmentEl.setAttribute('data-cta-text', 'data CTA text');
+    element.appendChild(attachmentEl);
+
+    page.buildCallback();
+    await page.layoutCallback();
+    page.setState(PageState.PLAYING);
+
+    const openAttachmentLabelEl = element.querySelector(
+      '.i-amphtml-story-page-open-attachment-label'
+    );
+
+    expect(openAttachmentLabelEl.textContent).to.equal('CTA text');
+  });
+
   it('should start tracking media performance when entering the page', async () => {
     expectAsyncConsoleError(/source must start with/, 1);
 
-    env.sandbox
-      .stub(page.resources_, 'getResourceForElement')
-      .returns({isDisplayed: () => true});
     isPerformanceTrackingOn = true;
     const startMeasuringStub = env.sandbox.stub(
       page.mediaPerformanceMetricsService_,
@@ -580,15 +897,16 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
 
     await nextTick();
 
-    expect(startMeasuringStub).to.have.been.calledOnceWithExactly(videoEl);
+    const poolVideoEl = element.querySelector('video');
+    // Not called with the original video.
+    expect(startMeasuringStub).to.not.have.been.calledOnceWithExactly(videoEl);
+    // Called with the media pool replaced video.
+    expect(startMeasuringStub).to.have.been.calledOnceWithExactly(poolVideoEl);
   });
 
   it('should stop tracking media performance when leaving the page', async () => {
     expectAsyncConsoleError(/source must start with/, 1);
 
-    env.sandbox
-      .stub(page.resources_, 'getResourceForElement')
-      .returns({isDisplayed: () => true});
     isPerformanceTrackingOn = true;
     const stopMeasuringStub = env.sandbox.stub(
       page.mediaPerformanceMetricsService_,
@@ -605,8 +923,9 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
     await nextTick();
     page.setState(PageState.NOT_ACTIVE);
 
+    const poolVideoEl = element.querySelector('video');
     expect(stopMeasuringStub).to.have.been.calledOnceWithExactly(
-      videoEl,
+      poolVideoEl,
       true /* sendMetrics */
     );
   });
@@ -614,9 +933,6 @@ describes.realWin('amp-story-page', {amp: true}, (env) => {
   it('should not start tracking media performance if tracking is off', async () => {
     expectAsyncConsoleError(/source must start with/, 1);
 
-    env.sandbox
-      .stub(page.resources_, 'getResourceForElement')
-      .returns({isDisplayed: () => true});
     isPerformanceTrackingOn = false;
     const startMeasuringStub = env.sandbox.stub(
       page.mediaPerformanceMetricsService_,
diff --git a/extensions/amp-story/1.0/test/test-amp-story-reaction-poll.js b/extensions/amp-story/1.0/test/test-amp-story-reaction-poll.js
deleted file mode 100644
index 21f13e8ad7982..0000000000000
--- a/extensions/amp-story/1.0/test/test-amp-story-reaction-poll.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * 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.
- */
-
-import {AmpStoryReactionPoll} from '../amp-story-reaction-poll';
-import {AmpStoryStoreService} from '../amp-story-store-service';
-import {Services} from '../../../../src/services';
-import {
-  addConfigToReaction,
-  getMockReactionData,
-} from './test-amp-story-reaction';
-import {getRequestService} from '../amp-story-request-service';
-import {measureMutateElementStub} from '../../../../testing/test-helper';
-import {registerServiceBuilder} from '../../../../src/service';
-
-describes.realWin(
-  'amp-story-reaction-poll',
-  {
-    amp: true,
-  },
-  (env) => {
-    let win;
-    let ampStoryPoll;
-    let storyEl;
-    let requestService;
-
-    beforeEach(() => {
-      win = env.win;
-
-      env.sandbox
-        .stub(Services, 'cidForDoc')
-        .resolves({get: () => Promise.resolve('cid')});
-
-      const ampStoryPollEl = win.document.createElement(
-        'amp-story-reaction-poll'
-      );
-      ampStoryPollEl.getResources = () => win.__AMP_SERVICES.resources.obj;
-      requestService = getRequestService(win, ampStoryPollEl);
-
-      const storeService = new AmpStoryStoreService(win);
-      registerServiceBuilder(win, 'story-store', function () {
-        return storeService;
-      });
-
-      storyEl = win.document.createElement('amp-story');
-      const storyPage = win.document.createElement('amp-story-page');
-      const gridLayer = win.document.createElement('amp-story-grid-layer');
-      gridLayer.appendChild(ampStoryPollEl);
-      storyPage.appendChild(gridLayer);
-      storyEl.appendChild(storyPage);
-
-      win.document.body.appendChild(storyEl);
-      ampStoryPoll = new AmpStoryReactionPoll(ampStoryPollEl);
-      env.sandbox
-        .stub(ampStoryPoll, 'measureMutateElement')
-        .callsFake(measureMutateElementStub);
-      env.sandbox.stub(ampStoryPoll, 'mutateElement').callsFake((fn) => fn());
-    });
-
-    it('should throw an error with fewer than two options', () => {
-      addConfigToReaction(ampStoryPoll, 1);
-      allowConsoleError(() => {
-        expect(() => {
-          ampStoryPoll.buildCallback();
-        }).to.throw(/Improper number of options/);
-      });
-    });
-
-    it('should not throw an error with two options', () => {
-      addConfigToReaction(ampStoryPoll, 2);
-      expect(() => ampStoryPoll.buildCallback()).to.not.throw();
-    });
-
-    it('should throw an error with more than two options', () => {
-      addConfigToReaction(ampStoryPoll, 3);
-      allowConsoleError(() => {
-        expect(() => {
-          ampStoryPoll.buildCallback();
-        }).to.throw(/Improper number of options/);
-      });
-    });
-
-    it('should fill the content of the options', async () => {
-      ampStoryPoll.element.setAttribute('option-1-text', 'Fizz');
-      ampStoryPoll.element.setAttribute('option-2-text', 'Buzz');
-      ampStoryPoll.buildCallback();
-      await ampStoryPoll.layoutCallback();
-      expect(ampStoryPoll.getOptionElements()[0].textContent).to.contain(
-        'Fizz'
-      );
-      expect(ampStoryPoll.getOptionElements()[1].textContent).to.contain(
-        'Buzz'
-      );
-    });
-
-    it('should enter the post-interaction state on option click', async () => {
-      addConfigToReaction(ampStoryPoll, 2);
-      ampStoryPoll.buildCallback();
-      await ampStoryPoll.layoutCallback();
-
-      await ampStoryPoll.getOptionElements()[0].click();
-
-      expect(ampStoryPoll.getRootElement()).to.have.class(
-        'i-amphtml-story-reaction-post-selection'
-      );
-      expect(ampStoryPoll.getOptionElements()[0]).to.have.class(
-        'i-amphtml-story-reaction-option-selected'
-      );
-    });
-
-    it('should handle the percentage pipeline', async () => {
-      env.sandbox
-        .stub(requestService, 'executeRequest')
-        .resolves(getMockReactionData());
-
-      ampStoryPoll.element.setAttribute('endpoint', 'http://localhost:8000');
-
-      addConfigToReaction(ampStoryPoll, 2);
-      ampStoryPoll.buildCallback();
-      await ampStoryPoll.layoutCallback();
-
-      expect(ampStoryPoll.getOptionElements()[0].innerText).to.contain('50%');
-      expect(ampStoryPoll.getOptionElements()[1].innerText).to.contain('50%');
-    });
-
-    it('should change the font-size wih the emoji content', async () => {
-      ampStoryPoll.element.setAttribute('option-1-text', '🧛');
-      ampStoryPoll.element.setAttribute('option-2-text', '🧛');
-      ampStoryPoll.buildCallback();
-      await ampStoryPoll.layoutCallback();
-      expect(ampStoryPoll.getRootElement().getAttribute('style')).to.contain(
-        '--post-select-scale-variable:2'
-      );
-    });
-
-    it('should change the font-size with one line content', async () => {
-      ampStoryPoll.element.setAttribute('option-1-text', 'This');
-      ampStoryPoll.element.setAttribute('option-2-text', 'That');
-      ampStoryPoll.buildCallback();
-      await ampStoryPoll.layoutCallback();
-      expect(ampStoryPoll.getRootElement().getAttribute('style')).to.contain(
-        '--post-select-scale-variable:1.14'
-      );
-    });
-
-    it('should change the font-size with two line content', async () => {
-      ampStoryPoll.element.setAttribute('option-1-text', 'This is one');
-      ampStoryPoll.element.setAttribute('option-2-text', 'That is two');
-      ampStoryPoll.buildCallback();
-      await ampStoryPoll.layoutCallback();
-      expect(ampStoryPoll.getRootElement().getAttribute('style')).to.contain(
-        '--post-select-scale-variable:1'
-      );
-    });
-  }
-);
diff --git a/extensions/amp-story/1.0/test/test-amp-story-reaction-quiz.js b/extensions/amp-story/1.0/test/test-amp-story-reaction-quiz.js
deleted file mode 100644
index c4bc767632e0a..0000000000000
--- a/extensions/amp-story/1.0/test/test-amp-story-reaction-quiz.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/**
- * 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.
- */
-
-import {AmpStoryReactionQuiz} from '../amp-story-reaction-quiz';
-import {AmpStoryStoreService} from '../amp-story-store-service';
-import {Services} from '../../../../src/services';
-import {
-  addConfigToReaction,
-  getMockReactionData,
-} from './test-amp-story-reaction';
-import {getRequestService} from '../amp-story-request-service';
-import {registerServiceBuilder} from '../../../../src/service';
-
-/**
- * Populates the quiz with some number of prompts and some number of options.
- *
- * @param {Window} win
- * @param {AmpStoryReactionQuiz} quiz
- * @param {=number} numOptions
- * @param {?string} prompt
- * @param {=number} correctOption
- */
-const populateQuiz = (
-  quiz,
-  numOptions = 4,
-  prompt = undefined,
-  correctOption = 1
-) => {
-  if (prompt) {
-    quiz.element.setAttribute('prompt-text', prompt);
-  }
-  addConfigToReaction(quiz, numOptions, correctOption);
-  quiz.element.setAttribute('id', 'TEST_quizId');
-};
-
-describes.realWin(
-  'amp-story-reaction-quiz',
-  {
-    amp: true,
-  },
-  (env) => {
-    let win;
-    let ampStoryQuiz;
-    let storyEl;
-    let requestService;
-
-    beforeEach(() => {
-      win = env.win;
-
-      env.sandbox
-        .stub(Services, 'cidForDoc')
-        .resolves({get: () => Promise.resolve('cid')});
-
-      const ampStoryQuizEl = win.document.createElement(
-        'amp-story-reaction-quiz'
-      );
-      ampStoryQuizEl.getResources = () => win.__AMP_SERVICES.resources.obj;
-      requestService = getRequestService(win, ampStoryQuizEl);
-
-      const storeService = new AmpStoryStoreService(win);
-      registerServiceBuilder(win, 'story-store', function () {
-        return storeService;
-      });
-
-      storyEl = win.document.createElement('amp-story');
-      const storyPage = win.document.createElement('amp-story-page');
-      const gridLayer = win.document.createElement('amp-story-grid-layer');
-      gridLayer.appendChild(ampStoryQuizEl);
-      storyPage.appendChild(gridLayer);
-      storyEl.appendChild(storyPage);
-
-      win.document.body.appendChild(storyEl);
-      ampStoryQuiz = new AmpStoryReactionQuiz(ampStoryQuizEl);
-
-      env.sandbox.stub(ampStoryQuiz, 'mutateElement').callsFake((fn) => fn());
-    });
-
-    it('should create the prompt and options container if there is a prompt', () => {
-      populateQuiz(ampStoryQuiz, 4, 'Is this a prompt?');
-      ampStoryQuiz.buildCallback();
-      expect(ampStoryQuiz.getRootElement().children.length).to.equal(2);
-    });
-
-    it('should not create the prompt and options container if there no prompt', () => {
-      populateQuiz(ampStoryQuiz, 4, undefined);
-      ampStoryQuiz.buildCallback();
-      expect(ampStoryQuiz.getRootElement().children.length).to.equal(1);
-    });
-
-    it('should structure the content in the quiz element', () => {
-      populateQuiz(ampStoryQuiz, 4, 'Has prompt!?');
-      ampStoryQuiz.buildCallback();
-
-      const quizContent = ampStoryQuiz.getRootElement().children;
-      expect(quizContent[0]).to.have.class(
-        'i-amphtml-story-reaction-quiz-prompt-container'
-      );
-      expect(quizContent[1]).to.have.class(
-        'i-amphtml-story-reaction-quiz-option-container'
-      );
-
-      // Check prompt container structure.
-      expect(quizContent[0].children.length).to.equal(1);
-      expect(
-        quizContent[0].querySelectorAll('.i-amphtml-story-reaction-quiz-prompt')
-      ).to.have.length(1);
-
-      // Check option container structure.
-      expect(quizContent[1].childNodes.length).to.equal(4);
-      expect(
-        quizContent[1].querySelectorAll('.i-amphtml-story-reaction-quiz-option')
-      ).to.have.length(4);
-    });
-
-    it('should throw an error with fewer than two options', () => {
-      populateQuiz(ampStoryQuiz, 1);
-      allowConsoleError(() => {
-        expect(() => {
-          ampStoryQuiz.buildCallback();
-        }).to.throw(/Improper number of options/);
-      });
-    });
-
-    it('should not throw an error with three options and one prompt', () => {
-      populateQuiz(ampStoryQuiz, 3);
-      expect(() => ampStoryQuiz.buildCallback()).to.not.throw();
-    });
-
-    it('should throw an error with more than four options', () => {
-      populateQuiz(ampStoryQuiz, 5);
-      allowConsoleError(() => {
-        expect(() => {
-          ampStoryQuiz.buildCallback();
-        }).to.throw(/Improper number of options/);
-      });
-    });
-
-    it('should enter the post-interaction state on option click', async () => {
-      populateQuiz(ampStoryQuiz);
-      ampStoryQuiz.buildCallback();
-      await ampStoryQuiz.layoutCallback();
-
-      const quizElement = ampStoryQuiz.getRootElement();
-      const quizOption = quizElement.querySelector(
-        '.i-amphtml-story-reaction-quiz-option'
-      );
-
-      await quizOption.click();
-
-      expect(quizElement).to.have.class(
-        'i-amphtml-story-reaction-post-selection'
-      );
-      expect(quizOption).to.have.class(
-        'i-amphtml-story-reaction-option-selected'
-      );
-    });
-
-    it('should handle the percentage pipeline', async () => {
-      env.sandbox
-        .stub(requestService, 'executeRequest')
-        .resolves(getMockReactionData());
-
-      ampStoryQuiz.element.setAttribute('endpoint', 'http://localhost:8000');
-
-      populateQuiz(ampStoryQuiz);
-      ampStoryQuiz.buildCallback();
-      await ampStoryQuiz.layoutCallback();
-
-      expect(ampStoryQuiz.getOptionElements()[0].innerText).to.contain('30%');
-      expect(ampStoryQuiz.getOptionElements()[3].innerText).to.contain('10%');
-    });
-  }
-);
diff --git a/extensions/amp-story/1.0/test/test-amp-story-reaction.js b/extensions/amp-story/1.0/test/test-amp-story-reaction.js
deleted file mode 100644
index 44d4a09c673b7..0000000000000
--- a/extensions/amp-story/1.0/test/test-amp-story-reaction.js
+++ /dev/null
@@ -1,279 +0,0 @@
-/**
- * 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.
- */
-
-import {AmpStoryReaction, ReactionType} from '../amp-story-reaction';
-import {AmpStoryStoreService} from '../amp-story-store-service';
-import {AnalyticsVariable, getVariableService} from '../variable-service';
-import {Services} from '../../../../src/services';
-import {dict} from '../../../../src/utils/object';
-import {getAnalyticsService} from '../story-analytics';
-import {getRequestService} from '../amp-story-request-service';
-import {htmlFor} from '../../../../src/static-template';
-import {registerServiceBuilder} from '../../../../src/service';
-
-/**
- * Returns mock reaction data.
- *
- * @return {Object}
- */
-export const getMockReactionData = () => {
-  return {
-    options: [
-      {
-        optionIndex: 0,
-        totalCount: 3,
-        selectedByUser: true,
-      },
-      {
-        optionIndex: 1,
-        totalCount: 3,
-        selectedByUser: false,
-      },
-      {
-        optionIndex: 2,
-        totalCount: 3,
-        selectedByUser: false,
-      },
-      {
-        optionIndex: 3,
-        totalCount: 1,
-        selectedByUser: false,
-      },
-    ],
-  };
-};
-
-export const addConfigToReaction = (
-  reaction,
-  options = 4,
-  correct = undefined
-) => {
-  for (let i = 0; i < options; i++) {
-    reaction.element.setAttribute(`option-${i + 1}-text`, `text ${i + 1}`);
-  }
-  if (correct) {
-    reaction.element.setAttribute(`option-${correct}-correct`, 'correct');
-  }
-};
-
-class ReactionTest extends AmpStoryReaction {
-  constructor(element) {
-    super(element, ReactionType.QUIZ);
-  }
-
-  /** @override */
-  buildComponent() {
-    const html = htmlFor(this.element);
-    const root = html`<div class="container"></div>`;
-    const option = html`<span class="i-amphtml-story-reaction-option"></span>`;
-    for (let i = 0; i < this.options_.length; i++) {
-      const newOption = option.cloneNode();
-      newOption.optionIndex_ = this.options_[i]['optionIndex'];
-      newOption.textContent = this.options_[i]['text'];
-      root.appendChild(newOption);
-    }
-    return root;
-  }
-}
-
-/**
- * Generates a response given an array of counts.
- *
- * @param {Array<number>} responseCounts
- */
-export const generateResponseDataFor = (responseCounts) => {
-  return responseCounts.map((count, index) =>
-    dict({
-      'optionIndex': index,
-      'totalCount': count,
-      'selectedByUser': false,
-    })
-  );
-};
-
-describes.realWin(
-  'amp-story-reaction',
-  {
-    amp: true,
-  },
-  (env) => {
-    let win;
-    let ampStoryReaction;
-    let storyEl;
-    let analytics;
-    let analyticsVars;
-    let requestService;
-
-    beforeEach(() => {
-      win = env.win;
-
-      env.sandbox
-        .stub(Services, 'cidForDoc')
-        .resolves({get: () => Promise.resolve('cid')});
-
-      const ampStoryReactionEl = win.document.createElement(
-        'amp-story-reaction'
-      );
-      ampStoryReactionEl.id = 'TEST_reactionId';
-      ampStoryReactionEl.getResources = () => win.__AMP_SERVICES.resources.obj;
-
-      analyticsVars = getVariableService(win);
-      analytics = getAnalyticsService(win, win.document.body);
-      requestService = getRequestService(win, ampStoryReactionEl);
-
-      const storeService = new AmpStoryStoreService(win);
-      registerServiceBuilder(win, 'story-store', function () {
-        return storeService;
-      });
-
-      storyEl = win.document.createElement('amp-story');
-      const storyPage = win.document.createElement('amp-story-page');
-      const gridLayer = win.document.createElement('amp-story-grid-layer');
-      gridLayer.appendChild(ampStoryReactionEl);
-      storyPage.appendChild(gridLayer);
-      storyEl.appendChild(storyPage);
-
-      win.document.body.appendChild(storyEl);
-      ampStoryReaction = new ReactionTest(ampStoryReactionEl);
-
-      env.sandbox
-        .stub(ampStoryReaction, 'mutateElement')
-        .callsFake((fn) => fn());
-    });
-
-    it('should parse the attributes properly into an options list', async () => {
-      addConfigToReaction(ampStoryReaction, /* options */ 3, /* correct */ 1);
-      const optionsList = ampStoryReaction.parseOptions_();
-      expect(optionsList).to.have.length(3);
-      for (let i = 0; i < 3; i++) {
-        expect(optionsList[i]).to.haveOwnProperty('text');
-        expect(optionsList[i]).to.haveOwnProperty('optionIndex');
-      }
-      expect(optionsList[0]).to.haveOwnProperty('correct', 'correct');
-    });
-
-    it('should enter post-interaction state on option click', async () => {
-      addConfigToReaction(ampStoryReaction);
-      ampStoryReaction.buildCallback();
-      await ampStoryReaction.layoutCallback();
-      await ampStoryReaction.getOptionElements()[0].click();
-      expect(ampStoryReaction.getRootElement()).to.have.class(
-        'i-amphtml-story-reaction-post-selection'
-      );
-      expect(ampStoryReaction.getOptionElements()[0]).to.have.class(
-        'i-amphtml-story-reaction-option-selected'
-      );
-    });
-
-    it('should only record first option selected', async () => {
-      addConfigToReaction(ampStoryReaction);
-      ampStoryReaction.buildCallback();
-      await ampStoryReaction.layoutCallback();
-      await ampStoryReaction.getOptionElements()[0].click();
-      await ampStoryReaction.getOptionElements()[1].click();
-      expect(ampStoryReaction.getOptionElements()[0]).to.have.class(
-        'i-amphtml-story-reaction-option-selected'
-      );
-      expect(ampStoryReaction.getOptionElements()[1]).to.not.have.class(
-        'i-amphtml-story-reaction-option-selected'
-      );
-    });
-
-    it('should trigger an analytics event with the right variables on selection', async () => {
-      const trigger = env.sandbox.stub(analytics, 'triggerEvent');
-      addConfigToReaction(ampStoryReaction);
-      ampStoryReaction.buildCallback();
-      await ampStoryReaction.layoutCallback();
-      await ampStoryReaction.getOptionElements()[1].click();
-      expect(trigger).to.have.been.calledWith('story-reaction');
-      const variables = analyticsVars.get();
-      expect(variables[AnalyticsVariable.STORY_REACTION_ID]).to.equal(
-        'TEST_reactionId'
-      );
-      expect(variables[AnalyticsVariable.STORY_REACTION_RESPONSE]).to.equal(1);
-      expect(variables[AnalyticsVariable.STORY_REACTION_TYPE]).to.equal(
-        ampStoryReaction.reactionType_
-      );
-    });
-
-    it('should update the quiz when the user has already reacted', async () => {
-      env.sandbox
-        .stub(requestService, 'executeRequest')
-        .resolves(getMockReactionData());
-      addConfigToReaction(ampStoryReaction);
-      ampStoryReaction.element.setAttribute(
-        'endpoint',
-        'http://localhost:8000'
-      );
-      ampStoryReaction.buildCallback();
-      await ampStoryReaction.layoutCallback();
-
-      expect(ampStoryReaction.getRootElement()).to.have.class(
-        'i-amphtml-story-reaction-post-selection'
-      );
-      expect(ampStoryReaction.getOptionElements()[0]).to.have.class(
-        'i-amphtml-story-reaction-option-selected'
-      );
-    });
-
-    it('should throw error if percentages are not correctly passed', () => {
-      addConfigToReaction(ampStoryReaction);
-      const responseData = dict({'wrongKey': []});
-      allowConsoleError(() => {
-        expect(() =>
-          ampStoryReaction.handleSuccessfulDataRetrieval_(responseData)
-        ).to.throw();
-      });
-    });
-
-    it('should preprocess percentages properly', () => {
-      const responseData1 = getMockReactionData()['options'];
-
-      const percentages1 = ampStoryReaction.preprocessPercentages_(
-        responseData1
-      );
-
-      expect(percentages1).to.deep.equal([30, 30, 30, 10]);
-    });
-
-    it('should preprocess percentages preserving ties', () => {
-      const responseData2 = generateResponseDataFor([3, 3, 3]);
-      const percentages2 = ampStoryReaction.preprocessPercentages_(
-        responseData2
-      );
-
-      expect(percentages2).to.deep.equal([33, 33, 33]);
-    });
-
-    it('should preprocess percentages preserving order', () => {
-      const responseData3 = generateResponseDataFor([255, 255, 245, 245]);
-      const percentages3 = ampStoryReaction.preprocessPercentages_(
-        responseData3
-      );
-
-      expect(percentages3).to.deep.equal([26, 26, 24, 24]);
-    });
-
-    it('should preprocess percentages handling rounding edge cases', () => {
-      const responseData4 = generateResponseDataFor([335, 335, 330]);
-      const percentages4 = ampStoryReaction.preprocessPercentages_(
-        responseData4
-      );
-
-      expect(percentages4).to.deep.equal([33, 33, 33]);
-    });
-  }
-);
diff --git a/extensions/amp-story/1.0/test/test-amp-story-request-service.js b/extensions/amp-story/1.0/test/test-amp-story-request-service.js
index 6261e72c3a275..8897b3957f55f 100644
--- a/extensions/amp-story/1.0/test/test-amp-story-request-service.js
+++ b/extensions/amp-story/1.0/test/test-amp-story-request-service.js
@@ -16,40 +16,39 @@
 
 import {
   AmpStoryRequestService,
-  BOOKEND_CONFIG_ATTRIBUTE_NAME,
-  BOOKEND_CREDENTIALS_ATTRIBUTE_NAME,
+  CONFIG_SRC_ATTRIBUTE_NAME,
 } from '../amp-story-request-service';
 
-describes.fakeWin('amp-story-store-service', {amp: true}, (env) => {
+describes.fakeWin('amp-story-request-service', {amp: true}, (env) => {
   let requestService;
   let storyElement;
-  let bookendElement;
+  let shareElement;
   let xhrMock;
 
   beforeEach(() => {
     storyElement = env.win.document.createElement('div');
-    bookendElement = env.win.document.createElement('amp-story-bookend');
-    storyElement.appendChild(bookendElement);
+    shareElement = env.win.document.createElement('amp-story-social-share');
+    storyElement.appendChild(shareElement);
     env.win.document.body.appendChild(storyElement);
     requestService = new AmpStoryRequestService(env.win, storyElement);
     xhrMock = env.sandbox.mock(requestService.xhr_);
   });
 
-  it('should not load the bookend config if no attribute is set', async () => {
+  it('should not load the share config if no attribute is set', async () => {
     xhrMock.expects('fetchJson').never();
 
-    const config = await requestService.loadBookendConfig();
+    const config = await requestService.loadShareConfig();
     expect(config).to.be.null;
     xhrMock.verify();
   });
 
   it('should use the URL provided in the attribute to load the config', async () => {
-    const bookendUrl = 'https://publisher.com/bookend';
+    const shareUrl = 'https://publisher.com/share';
 
-    bookendElement.setAttribute(BOOKEND_CONFIG_ATTRIBUTE_NAME, bookendUrl);
+    shareElement.setAttribute(CONFIG_SRC_ATTRIBUTE_NAME, shareUrl);
     xhrMock
       .expects('fetchJson')
-      .withExactArgs(bookendUrl, {})
+      .withExactArgs(shareUrl, {})
       .resolves({
         ok: true,
         json() {
@@ -58,15 +57,15 @@ describes.fakeWin('amp-story-store-service', {amp: true}, (env) => {
       })
       .once();
 
-    await requestService.loadBookendConfig();
+    await requestService.loadShareConfig();
     xhrMock.verify();
   });
 
-  it('should return the expected bookend config', async () => {
-    const bookendUrl = 'https://publisher.com/bookend';
+  it('should return the expected share config', async () => {
+    const shareUrl = 'https://publisher.com/share';
     const fetchedConfig = 'amazingConfig';
 
-    bookendElement.setAttribute(BOOKEND_CONFIG_ATTRIBUTE_NAME, bookendUrl);
+    shareElement.setAttribute(CONFIG_SRC_ATTRIBUTE_NAME, shareUrl);
     xhrMock
       .expects('fetchJson')
       .resolves({
@@ -77,15 +76,15 @@ describes.fakeWin('amp-story-store-service', {amp: true}, (env) => {
       })
       .once();
 
-    const config = await requestService.loadBookendConfig();
+    const config = await requestService.loadShareConfig();
     expect(config).to.equal(fetchedConfig);
     xhrMock.verify();
   });
 
-  it('should fetch the bookend config once if called multiple times', async () => {
-    const bookendUrl = 'https://publisher.com/bookend';
+  it('should fetch the share config once if called multiple times', async () => {
+    const shareUrl = 'https://publisher.com/share';
 
-    bookendElement.setAttribute(BOOKEND_CONFIG_ATTRIBUTE_NAME, bookendUrl);
+    shareElement.setAttribute(CONFIG_SRC_ATTRIBUTE_NAME, shareUrl);
     xhrMock
       .expects('fetchJson')
       .resolves({
@@ -96,30 +95,27 @@ describes.fakeWin('amp-story-store-service', {amp: true}, (env) => {
       })
       .once();
 
-    await requestService.loadBookendConfig();
-    await requestService.loadBookendConfig();
+    await requestService.loadShareConfig();
     xhrMock.verify();
   });
 
-  it('should fetch the bookend config with credentials', async () => {
-    const bookendUrl = 'https://publisher.com/bookend';
+  it('should return the social share config from the share element', async () => {
+    const shareUrl = 'https://publisher.com/share';
+    const fetchedConfig = 'amazingConfig';
 
-    bookendElement.setAttribute(BOOKEND_CONFIG_ATTRIBUTE_NAME, bookendUrl);
-    bookendElement.setAttribute(BOOKEND_CREDENTIALS_ATTRIBUTE_NAME, 'include');
+    shareElement.setAttribute(CONFIG_SRC_ATTRIBUTE_NAME, shareUrl);
     xhrMock
       .expects('fetchJson')
-      .withExactArgs(bookendUrl, {
-        credentials: 'include',
-      })
       .resolves({
         ok: true,
         json() {
-          return Promise.resolve();
+          return Promise.resolve(fetchedConfig);
         },
       })
       .once();
 
-    await requestService.loadBookendConfig();
+    const config = await requestService.loadShareConfig();
+    expect(config).to.equal(fetchedConfig);
     xhrMock.verify();
   });
 });
diff --git a/extensions/amp-story/1.0/test/test-amp-story-share-menu.js b/extensions/amp-story/1.0/test/test-amp-story-share-menu.js
index 69516b8edd143..03d00c7711955 100644
--- a/extensions/amp-story/1.0/test/test-amp-story-share-menu.js
+++ b/extensions/amp-story/1.0/test/test-amp-story-share-menu.js
@@ -19,7 +19,7 @@ import {
   AmpStoryStoreService,
   StateProperty,
 } from '../amp-story-store-service';
-import {Keys} from '../../../../src/utils/key-codes';
+import {Keys} from '../../../../src/core/constants/key-codes';
 import {Services} from '../../../../src/services';
 import {ShareMenu, VISIBLE_CLASS} from '../amp-story-share-menu';
 import {ShareWidget} from '../amp-story-share';
diff --git a/extensions/amp-story/1.0/test/test-amp-story-store-service.js b/extensions/amp-story/1.0/test/test-amp-story-store-service.js
index 5b1ecb959a068..4245534346406 100644
--- a/extensions/amp-story/1.0/test/test-amp-story-store-service.js
+++ b/extensions/amp-story/1.0/test/test-amp-story-store-service.js
@@ -31,35 +31,35 @@ describes.fakeWin('amp-story-store-service', {}, (env) => {
   });
 
   it('should return the default state', () => {
-    expect(storeService.get(StateProperty.CAN_SHOW_BOOKEND)).to.be.true;
+    expect(storeService.get(StateProperty.MUTED_STATE)).to.be.true;
   });
 
   it('should subscribe to property mutations and receive the new value', () => {
     const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.BOOKEND_STATE, listenerSpy);
-    storeService.dispatch(Action.TOGGLE_BOOKEND, true);
+    storeService.subscribe(StateProperty.MUTED_STATE, listenerSpy);
+    storeService.dispatch(Action.TOGGLE_MUTED, false);
     expect(listenerSpy).to.have.been.calledOnce;
-    expect(listenerSpy).to.have.been.calledWith(true);
+    expect(listenerSpy).to.have.been.calledWith(false);
   });
 
   it('should not trigger a listener if another property changed', () => {
     const listenerSpy = env.sandbox.spy();
     storeService.subscribe(StateProperty.CAN_INSERT_AUTOMATIC_AD, listenerSpy);
-    storeService.dispatch(Action.TOGGLE_BOOKEND, true);
+    storeService.dispatch(Action.TOGGLE_MUTED, true);
     expect(listenerSpy).to.have.callCount(0);
   });
 
   it('should not trigger a listener on subscribe by default', () => {
     const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.BOOKEND_STATE, listenerSpy);
+    storeService.subscribe(StateProperty.MUTED_STATE, listenerSpy);
     expect(listenerSpy).to.have.callCount(0);
   });
 
   it('should trigger a listener on subscribe if option is set to true', () => {
     const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.BOOKEND_STATE, listenerSpy, true);
+    storeService.subscribe(StateProperty.MUTED_STATE, listenerSpy, true);
     expect(listenerSpy).to.have.been.calledOnce;
-    expect(listenerSpy).to.have.been.calledWith(false);
+    expect(listenerSpy).to.have.been.calledWith(true);
   });
 });
 
@@ -73,7 +73,7 @@ describes.fakeWin('amp-story-store-service embed mode', {}, (env) => {
   });
 
   it('should override the state with the expected mode', () => {
-    expect(storeService.get(StateProperty.CAN_SHOW_BOOKEND)).to.be.false;
+    expect(storeService.get(StateProperty.MUTED_STATE)).to.be.false;
   });
 });
 
@@ -85,22 +85,6 @@ describes.fakeWin('amp-story-store-service actions', {}, (env) => {
     storeService = new AmpStoryStoreService(env.win);
   });
 
-  it('should toggle the bookend', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.BOOKEND_STATE, listenerSpy);
-    storeService.dispatch(Action.TOGGLE_BOOKEND, true);
-    expect(listenerSpy).to.have.been.calledOnce;
-    expect(listenerSpy).to.have.been.calledWith(true);
-  });
-
-  it('should not toggle the bookend if embed mode disables it', () => {
-    const listenerSpy = env.sandbox.spy();
-    storeService.state_[StateProperty.CAN_SHOW_BOOKEND] = false;
-    storeService.subscribe(StateProperty.BOOKEND_STATE, listenerSpy);
-    storeService.dispatch(Action.TOGGLE_BOOKEND, true);
-    expect(listenerSpy).to.have.callCount(0);
-  });
-
   it('should toggle the muted state', () => {
     const listenerSpy = env.sandbox.spy();
     storeService.subscribe(StateProperty.MUTED_STATE, listenerSpy);
@@ -171,27 +155,6 @@ describes.fakeWin('amp-story-store-service actions', {}, (env) => {
     expect(pausedListenerSpy).to.have.been.calledWith(true);
   });
 
-  it('should pause the story when displaying the bookend', () => {
-    const pausedListenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.PAUSED_STATE, pausedListenerSpy);
-    storeService.dispatch(Action.TOGGLE_BOOKEND, true);
-    expect(pausedListenerSpy).to.have.been.calledOnce;
-    expect(pausedListenerSpy).to.have.been.calledWith(true);
-  });
-
-  it('should unpause the story when closing the bookend', () => {
-    // First open the bookend.
-    storeService.dispatch(Action.TOGGLE_BOOKEND, true);
-
-    // Close the bookend.
-    const pausedListenerSpy = env.sandbox.spy();
-    storeService.subscribe(StateProperty.PAUSED_STATE, pausedListenerSpy);
-    storeService.dispatch(Action.TOGGLE_BOOKEND, false);
-
-    expect(pausedListenerSpy).to.have.been.calledOnce;
-    expect(pausedListenerSpy).to.have.been.calledWith(false);
-  });
-
   it('should unpause the story when hiding the share menu', () => {
     storeService.dispatch(Action.TOGGLE_SHARE_MENU, true);
 
@@ -267,4 +230,104 @@ describes.fakeWin('amp-story-store-service actions', {}, (env) => {
       action3,
     ]);
   });
+
+  describes.fakeWin('amp-story-store-service interactive reacts', {}, (env) => {
+    let storeService;
+
+    const makeInteractive = (interactiveId, answered = false) => {
+      return {
+        interactiveId,
+        option: answered
+          ? {
+              'optionIndex': 1,
+              'resultscategory': 'cat',
+              'text': 'This is an option',
+            }
+          : null,
+      };
+    };
+
+    beforeEach(() => {
+      // Making sure we always get a new instance to isolate each test.
+      storeService = new AmpStoryStoreService(env.win);
+    });
+
+    it('should trigger the interaction subscription when initializing interactive', () => {
+      const actionsListenerSpy = env.sandbox.spy();
+      storeService.subscribe(
+        StateProperty.INTERACTIVE_REACT_STATE,
+        actionsListenerSpy
+      );
+
+      storeService.dispatch(
+        Action.ADD_INTERACTIVE_REACT,
+        makeInteractive('foo')
+      );
+      expect(actionsListenerSpy).to.have.been.calledOnce;
+    });
+
+    it('should trigger the interaction subscription when answering interactive', () => {
+      const actionsListenerSpy = env.sandbox.spy();
+      storeService.dispatch(
+        Action.ADD_INTERACTIVE_REACT,
+        makeInteractive('foo')
+      );
+      storeService.subscribe(
+        StateProperty.INTERACTIVE_REACT_STATE,
+        actionsListenerSpy
+      );
+
+      storeService.dispatch(
+        Action.ADD_INTERACTIVE_REACT,
+        makeInteractive('foo', true)
+      );
+
+      expect(actionsListenerSpy).to.have.been.calledOnce;
+    });
+
+    it('should not trigger the interaction subscription twice when not updating the interactive', () => {
+      const actionsListenerSpy = env.sandbox.spy();
+      storeService.dispatch(
+        Action.ADD_INTERACTIVE_REACT,
+        makeInteractive('foo')
+      );
+      storeService.subscribe(
+        StateProperty.INTERACTIVE_REACT_STATE,
+        actionsListenerSpy
+      );
+
+      storeService.dispatch(
+        Action.ADD_INTERACTIVE_REACT,
+        makeInteractive('foo', true)
+      );
+      storeService.dispatch(
+        Action.ADD_INTERACTIVE_REACT,
+        makeInteractive('foo', true)
+      );
+
+      expect(actionsListenerSpy).to.have.been.calledOnce;
+    });
+
+    it('should trigger the interaction subscription once for each update', () => {
+      const actionsListenerSpy = env.sandbox.spy();
+      storeService.dispatch(
+        Action.ADD_INTERACTIVE_REACT,
+        makeInteractive('bar')
+      );
+      storeService.subscribe(
+        StateProperty.INTERACTIVE_REACT_STATE,
+        actionsListenerSpy
+      );
+
+      storeService.dispatch(
+        Action.ADD_INTERACTIVE_REACT,
+        makeInteractive('foo', true)
+      );
+      storeService.dispatch(
+        Action.ADD_INTERACTIVE_REACT,
+        makeInteractive('bar', true)
+      );
+      expect(actionsListenerSpy).to.have.been.calledTwice;
+    });
+  });
 });
diff --git a/extensions/amp-story/1.0/test/test-amp-story-system-layer.js b/extensions/amp-story/1.0/test/test-amp-story-system-layer.js
index dec43610bca1a..050dba6715400 100644
--- a/extensions/amp-story/1.0/test/test-amp-story-system-layer.js
+++ b/extensions/amp-story/1.0/test/test-amp-story-system-layer.js
@@ -142,7 +142,7 @@ describes.fakeWin('amp-story system layer', {amp: true}, (env) => {
       .getShadowRoot()
       .querySelector('.i-amphtml-story-share-control');
     expect(shareButton).to.not.be.null;
-    expect(shareButton.tagName).to.equal('A');
+    expect(shareButton.tagName).to.equal('BUTTON');
     // Default "canonical"
     expect(shareButton.href).to.equal('http://localhost:9876/context.html');
   });
diff --git a/extensions/amp-story/1.0/test/test-amp-story-viewer-messaging-handler.js b/extensions/amp-story/1.0/test/test-amp-story-viewer-messaging-handler.js
index 05fd9a6a661de..153e9a779b53d 100644
--- a/extensions/amp-story/1.0/test/test-amp-story-viewer-messaging-handler.js
+++ b/extensions/amp-story/1.0/test/test-amp-story-viewer-messaging-handler.js
@@ -20,7 +20,6 @@ import {
   getStoreService,
 } from '../amp-story-store-service';
 import {AmpStoryViewerMessagingHandler} from '../amp-story-viewer-messaging-handler';
-import {HistoryState, setHistoryState} from '../history';
 
 describes.fakeWin('amp-story-viewer-messaging-handler', {}, (env) => {
   let fakeViewerService;
@@ -97,7 +96,7 @@ describes.fakeWin('amp-story-viewer-messaging-handler', {}, (env) => {
     });
 
     it('should return the PAGE_ATTACHMENT_STATE', async () => {
-      setHistoryState(env.win, HistoryState.ATTACHMENT_PAGE_ID, 'SOME_ID');
+      storeService.dispatch(Action.TOGGLE_PAGE_ATTACHMENT_STATE, true);
       const response = await fakeViewerService.receiveMessage(
         'getDocumentState',
         {state: 'PAGE_ATTACHMENT_STATE'}
@@ -106,11 +105,10 @@ describes.fakeWin('amp-story-viewer-messaging-handler', {}, (env) => {
         state: 'PAGE_ATTACHMENT_STATE',
         value: true,
       });
-      setHistoryState(env.win, HistoryState.ATTACHMENT_PAGE_ID, null);
     });
 
     it('should return the STORY_PROGRESS', async () => {
-      storeService.dispatch(Action.SET_PAGE_IDS, [1, 2, 3, 4]);
+      storeService.dispatch(Action.SET_PAGE_IDS, [1, 2, 3, 4, 5]);
       storeService.dispatch(Action.CHANGE_PAGE, {id: 3, index: 2});
       const response = await fakeViewerService.receiveMessage(
         'getDocumentState',
diff --git a/extensions/amp-story/1.0/test/test-amp-story.js b/extensions/amp-story/1.0/test/test-amp-story.js
index 02cb5b7527f1c..22b20d7341fa5 100644
--- a/extensions/amp-story/1.0/test/test-amp-story.js
+++ b/extensions/amp-story/1.0/test/test-amp-story.js
@@ -22,23 +22,21 @@ import {
   StateProperty,
   UIType,
 } from '../amp-story-store-service';
-import {ActionTrust} from '../../../../src/action-constants';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
 import {AdvancementMode} from '../story-analytics';
 import {AmpStory} from '../amp-story';
-import {AmpStoryBookend} from '../bookend/amp-story-bookend';
 import {AmpStoryConsent} from '../amp-story-consent';
-import {CommonSignals} from '../../../../src/common-signals';
-import {Keys} from '../../../../src/utils/key-codes';
+import {CommonSignals} from '../../../../src/core/constants/common-signals';
+import {Keys} from '../../../../src/core/constants/key-codes';
 import {LocalizationService} from '../../../../src/service/localization';
 import {MediaType} from '../media-pool';
 import {PageState} from '../amp-story-page';
-import {PaginationButtons} from '../pagination-buttons';
 import {Services} from '../../../../src/services';
-import {VisibilityState} from '../../../../src/visibility-state';
+import {VisibilityState} from '../../../../src/core/constants/visibility-state';
 import {createElementWithAttributes} from '../../../../src/dom';
-import {poll} from '../../../../testing/iframe';
 import {registerServiceBuilder} from '../../../../src/service';
 import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor} from '../../../../testing/test-helper';
 
 // Represents the correct value of KeyboardEvent.which for the Right Arrow
 const KEYBOARD_EVENT_WHICH_RIGHT_ARROW = 39;
@@ -68,7 +66,7 @@ describes.realWin(
     async function createStoryWithPages(count, ids = [], autoAdvance = false) {
       element = win.document.createElement('amp-story');
 
-      Array(count)
+      const pageArray = Array(count)
         .fill(undefined)
         .map((unused, i) => {
           const page = win.document.createElement('amp-story-page');
@@ -82,6 +80,8 @@ describes.realWin(
 
       win.document.body.appendChild(element);
       story = await element.getImpl();
+
+      return pageArray;
     }
 
     /**
@@ -98,25 +98,11 @@ describes.realWin(
       return eventObj;
     }
 
-    function waitFor(callback, errorMessage) {
-      return poll(
-        errorMessage,
-        () => {
-          return callback();
-        },
-        undefined /** opt_onError */,
-        200 /** opt_timeout */
-      );
-    }
-
     beforeEach(() => {
       win = env.win;
       ampdoc = env.ampdoc;
 
       replaceStateStub = env.sandbox.stub(win.history, 'replaceState');
-      // Required by the bookend code.
-      win.document.title = 'Story';
-      env.ampdoc.defaultView = env.win;
 
       const localizationService = new LocalizationService(win.document.body);
       env.sandbox
@@ -184,28 +170,6 @@ describes.realWin(
       expect(story.element.innerText).to.not.have.string(textToRemove);
     });
 
-    it('should preload the bookend if navigating to the last page', async () => {
-      await createStoryWithPages(1, ['cover']);
-
-      const buildBookendStub = env.sandbox.stub(
-        story,
-        'buildAndPreloadBookend_'
-      );
-      await story.layoutCallback();
-      expect(buildBookendStub).to.have.been.calledOnce;
-    });
-
-    it('should not preload the bookend if not on the last page', async () => {
-      await createStoryWithPages(2, ['cover']);
-
-      const buildBookendStub = env.sandbox.stub(
-        story,
-        'buildAndPreloadBookend_'
-      );
-      await story.layoutCallback();
-      expect(buildBookendStub).to.not.have.been.called;
-    });
-
     it('should prerender/load the share menu', async () => {
       await createStoryWithPages(2);
 
@@ -232,7 +196,6 @@ describes.realWin(
 
     it('should pause/resume pages when switching pages', async () => {
       await createStoryWithPages(2, ['cover', 'page-1']);
-      env.sandbox.stub(story, 'maybePreloadBookend_').returns();
 
       await story.layoutCallback();
       // Getting all the AmpStoryPage objects.
@@ -259,18 +222,17 @@ describes.realWin(
       await createStoryWithPages();
       const pages = story.element.querySelectorAll('amp-story-page');
 
-      element.build();
+      element.buildInternal();
 
       expect(pages[0].hasAttribute('active')).to.be.true;
       expect(pages[1].hasAttribute('active')).to.be.false;
 
       // Stubbing because we need to assert synchronously
-      env.sandbox
-        .stub(element.implementation_, 'mutateElement')
-        .callsFake((mutator) => {
-          mutator();
-          return Promise.resolve();
-        });
+      const impl = await element.getImpl(false);
+      env.sandbox.stub(impl, 'mutateElement').callsFake((mutator) => {
+        mutator();
+        return Promise.resolve();
+      });
 
       const eventObj = createEvent('keydown');
       eventObj.key = Keys.RIGHT_ARROW;
@@ -297,18 +259,14 @@ describes.realWin(
       ).to.be.equal('hidden');
     });
 
-    it('builds and attaches pagination buttons ', async () => {
+    it('checks if pagination buttons exist ', async () => {
       await createStoryWithPages(2, ['cover', 'page-1']);
 
       await story.layoutCallback();
-      const paginationButtonsStub = {attach: env.sandbox.spy()};
-      env.sandbox
-        .stub(PaginationButtons, 'create')
-        .returns(paginationButtonsStub);
-      story.buildPaginationButtonsForTesting();
-      expect(paginationButtonsStub.attach).to.have.been.calledWith(
-        story.element
-      );
+      expect(
+        story.element.querySelectorAll('.i-amphtml-story-button-container')
+          .length
+      ).to.equal(2);
     });
 
     it.skip('toggles `i-amphtml-story-landscape` based on height and width', () => {
@@ -364,26 +322,6 @@ describes.realWin(
       );
     });
 
-    it('should not block layoutCallback when bookend xhr fails', async () => {
-      await createStoryWithPages(1, ['page-1']);
-      env.sandbox.stub(AmpStoryBookend.prototype, 'build');
-
-      const bookendXhr = env.sandbox
-        .stub(AmpStoryBookend.prototype, 'loadConfigAndMaybeRenderBookend')
-        .returns(Promise.reject());
-
-      story.buildCallback();
-
-      return story
-        .layoutCallback()
-        .then(() => {
-          expect(bookendXhr).to.have.been.calledOnce;
-        })
-        .catch((error) => {
-          expect(error).to.be.undefined;
-        });
-    });
-
     it('should NOT update page id in browser history if ad', async () => {
       const firstPageId = 'i-amphtml-ad-page-1';
       const pageCount = 2;
@@ -729,6 +667,17 @@ describes.realWin(
         expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.true;
       });
 
+      it('should rewind the story page when viewer becomes inactive', async () => {
+        await createStoryWithPages(2, ['cover', 'page-1']);
+
+        await story.layoutCallback();
+        const setStateStub = env.sandbox.stub(story.activePage_, 'setState');
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.INACTIVE);
+        expect(setStateStub.getCall(1)).to.have.been.calledWithExactly(
+          PageState.NOT_ACTIVE
+        );
+      });
+
       it('should pause the story when viewer becomes hidden', async () => {
         await createStoryWithPages(2, ['cover', 'page-1']);
 
@@ -737,6 +686,17 @@ describes.realWin(
         expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.true;
       });
 
+      it('should pause the story page when viewer becomes hidden', async () => {
+        await createStoryWithPages(2, ['cover', 'page-1']);
+
+        await story.layoutCallback();
+        const setStateStub = env.sandbox.stub(story.activePage_, 'setState');
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.HIDDEN);
+        expect(setStateStub).to.have.been.calledOnceWithExactly(
+          PageState.PAUSED
+        );
+      });
+
       it('should pause the story when viewer becomes paused', async () => {
         await createStoryWithPages(2, ['cover', 'page-1']);
 
@@ -749,14 +709,14 @@ describes.realWin(
         await createStoryWithPages(2, ['cover', 'page-1']);
 
         await story.layoutCallback();
-        const setStateStub = window.sandbox.stub(story.activePage_, 'setState');
+        const setStateStub = env.sandbox.stub(story.activePage_, 'setState');
         story.getAmpDoc().overrideVisibilityState(VisibilityState.PAUSED);
         expect(setStateStub).to.have.been.calledOnceWithExactly(
           PageState.PAUSED
         );
       });
 
-      it('should play the story when viewer becomes active', async () => {
+      it('should play the story when viewer becomes active after paused', async () => {
         await createStoryWithPages(2, ['cover', 'page-1']);
 
         await story.layoutCallback();
@@ -765,14 +725,33 @@ describes.realWin(
         expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.false;
       });
 
-      it('should play the story page when viewer becomes active', async () => {
+      it('should play the story page when viewer becomes active after paused', async () => {
+        await createStoryWithPages(2, ['cover', 'page-1']);
+
+        await story.layoutCallback();
+        const setStateStub = env.sandbox.stub(story.activePage_, 'setState');
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.PAUSED);
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.ACTIVE);
+        expect(setStateStub.getCall(1)).to.have.been.calledWithExactly(
+          PageState.PLAYING
+        );
+      });
+
+      it('should play the story page when viewer becomes active after paused + inactive', async () => {
         await createStoryWithPages(2, ['cover', 'page-1']);
 
         await story.layoutCallback();
-        const setStateStub = window.sandbox.stub(story.activePage_, 'setState');
+        const setStateStub = env.sandbox.stub(story.activePage_, 'setState');
         story.getAmpDoc().overrideVisibilityState(VisibilityState.PAUSED);
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.INACTIVE);
         story.getAmpDoc().overrideVisibilityState(VisibilityState.ACTIVE);
+        expect(setStateStub.getCall(0)).to.have.been.calledWithExactly(
+          PageState.PAUSED
+        );
         expect(setStateStub.getCall(1)).to.have.been.calledWithExactly(
+          PageState.NOT_ACTIVE
+        );
+        expect(setStateStub.getCall(2)).to.have.been.calledWithExactly(
           PageState.PLAYING
         );
       });
@@ -788,6 +767,18 @@ describes.realWin(
         expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.true;
       });
 
+      it('should keep the story paused on resume when previously paused + inactive', async () => {
+        await createStoryWithPages(2, ['cover', 'page-1']);
+
+        story.storeService_.dispatch(Action.TOGGLE_PAUSED, true);
+
+        await story.layoutCallback();
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.PAUSED);
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.INACTIVE);
+        story.getAmpDoc().overrideVisibilityState(VisibilityState.ACTIVE);
+        expect(story.storeService_.get(StateProperty.PAUSED_STATE)).to.be.true;
+      });
+
       describe('amp-story continue anyway', () => {
         it('should not display layout', async () => {
           await createStoryWithPages(2, ['cover', 'page-4']);
@@ -922,7 +913,6 @@ describes.realWin(
       });
 
       it('should add previous visited attribute', async () => {
-        env.sandbox.stub(story, 'maybePreloadBookend_').returns();
         env.sandbox
           .stub(utils, 'setAttributeInMutate')
           .callsFake((el, attr) => el.element.setAttribute(attr, ''));
@@ -1030,30 +1020,6 @@ describes.realWin(
           expect(unmuteStub).not.to.have.been.called;
           expect(playStub).not.to.have.been.called;
         });
-
-        it('should mute the page and unmute the next page upon navigation', async () => {
-          await createStoryWithPages(4, [
-            'cover',
-            'page-1',
-            'page-2',
-            'page-3',
-          ]);
-
-          story.storeService_.dispatch(Action.TOGGLE_MUTED, false);
-
-          await story.layoutCallback();
-          const coverMuteStub = env.sandbox.stub(
-            story.getPageById('cover'),
-            'muteAllMedia'
-          );
-          const firstPageUnmuteStub = env.sandbox.stub(
-            story.getPageById('page-1'),
-            'unmuteAllMedia'
-          );
-          await story.switchTo_('page-1');
-          expect(coverMuteStub).to.have.been.calledOnce;
-          expect(firstPageUnmuteStub).to.have.been.calledOnce;
-        });
       });
 
       it('should remove the muted attribute on unmuted state change', async () => {
@@ -1132,21 +1098,41 @@ describes.realWin(
         });
       });
 
-      describe('amp-story NO_NEXT_PAGE', () => {
-        describe('without #cap=swipe', () => {
-          it('should open the bookend when tapping on the last page', async () => {
-            await createStoryWithPages(1, ['cover']);
+      describe('#getElementDistance', () => {
+        it('should return -1 for elements without a page', async () => {
+          await createStoryWithPages(3);
+          await story.layoutCallback();
+          const elToFind = win.document.createElement('video');
+          const distance = story.getElementDistance(elToFind);
+          expect(distance).to.equal(-1);
+        });
 
-            await story.layoutCallback();
-            // Click on right side of the screen to trigger page advancement.
-            const clickEvent = new MouseEvent('click', {clientX: 200});
-            story.activePage_.element.dispatchEvent(clickEvent);
-            await waitFor(() => {
-              return !!story.storeService_.get(StateProperty.BOOKEND_STATE);
-            }, 'BOOKEND_STATE should be true');
-          });
+        it('should find elements inside organic pages', async () => {
+          const pageArray = await createStoryWithPages(3);
+          await story.layoutCallback();
+          const elToFind = win.document.createElement('video');
+          const hostPage = pageArray[1];
+          hostPage.setAttribute('distance', '4');
+          hostPage.appendChild(elToFind);
+          const distance = story.getElementDistance(elToFind);
+          expect(distance).to.equal(4);
         });
 
+        it('should find elements inside ad pages / FIE', async () => {
+          const pageArray = await createStoryWithPages(3);
+          await story.layoutCallback();
+          const elToFind = win.document.createElement('video');
+          const hostPage = pageArray[1];
+          hostPage.setAttribute('distance', '4');
+          const iframe = win.document.createElement('iframe');
+          hostPage.appendChild(iframe);
+          iframe.contentDocument.body.appendChild(elToFind);
+          const distance = story.getElementDistance(elToFind);
+          expect(distance).to.equal(4);
+        });
+      });
+
+      describe('amp-story NO_NEXT_PAGE', () => {
         describe('with #cap=swipe', () => {
           before(() => {
             hasSwipeCapability = true;
@@ -1194,42 +1180,15 @@ describes.realWin(
 
             story.activePage_.advancement_.onAdvance();
 
-            await waitFor(() => {
-              if (sendMessageStub.calledOnce) {
-                expect(sendMessageStub).to.be.calledWithExactly(
-                  'selectDocument',
-                  {
-                    next: true,
-                    advancementMode: AdvancementMode.AUTO_ADVANCE_TIME,
-                  }
-                );
-                return true;
-              }
-              return false;
-            }, 'sendMessageStub should be called');
+            expect(sendMessageStub).to.be.calledWithExactly('selectDocument', {
+              next: true,
+              advancementMode: AdvancementMode.AUTO_ADVANCE_TIME,
+            });
           });
         });
       });
 
       describe('amp-story NO_PREVIOUS_PAGE', () => {
-        describe('without #cap=swipe', () => {
-          it('should open the bookend when tapping on the last page', async () => {
-            await createStoryWithPages(1, ['cover']);
-            const showPageHintStub = env.sandbox.stub(
-              story.ampStoryHint_,
-              'showFirstPageHintOverlay'
-            );
-
-            await story.layoutCallback();
-            // Click on left side of the screen to trigger page advancement.
-            const clickEvent = new MouseEvent('click', {clientX: 10});
-            story.activePage_.element.dispatchEvent(clickEvent);
-            await waitFor(() => {
-              return showPageHintStub.calledOnce;
-            }, 'showPageHintStub should be called');
-          });
-        });
-
         describe('with #cap=swipe', () => {
           before(() => {
             hasSwipeCapability = true;
@@ -1643,14 +1602,6 @@ describes.realWin(
       });
 
       describe('amp-story rewriteStyles', () => {
-        beforeEach(() => {
-          toggleExperiment(win, 'amp-story-responsive-units', true);
-        });
-
-        afterEach(() => {
-          toggleExperiment(win, 'amp-story-responsive-units', false);
-        });
-
         it('should rewrite vw styles', async () => {
           await createStoryWithPages(1, ['cover']);
           const styleEl = win.document.createElement('style');
diff --git a/extensions/amp-story/1.0/test/test-animation.js b/extensions/amp-story/1.0/test/test-animation.js
index 165db2bbc481b..bcb2b323db024 100644
--- a/extensions/amp-story/1.0/test/test-animation.js
+++ b/extensions/amp-story/1.0/test/test-animation.js
@@ -19,14 +19,14 @@ import {
   AnimationRunner,
   AnimationSequence,
 } from '../animation';
-import {Deferred} from '../../../../src/utils/promise';
+import {Deferred} from '../../../../src/core/data-structures/promise';
 import {Services} from '../../../../src/services';
 import {WebAnimationPlayState} from '../../../amp-animation/0.1/web-animation-types';
 import {htmlFor, htmlRefs} from '../../../../src/static-template';
-import {layoutRectLtwh} from '../../../../src/layout-rect';
+import {layoutRectLtwh} from '../../../../src/core/math/layout-rect';
 import {presets} from '../animation-presets';
 import {scopedQuerySelectorAll} from '../../../../src/dom';
-import {toArray} from '../../../../src/types';
+import {toArray} from '../../../../src/core/types/array';
 
 const querySelectorAllAnimateIn = (element) =>
   toArray(scopedQuerySelectorAll(element, '[animate-in]'));
@@ -335,7 +335,7 @@ describes.realWin('amp-story animations', {}, (env) => {
 
       webAnimationBuilder.createRunner = () => webAnimationRunner;
 
-      const {resolve: resolveWaitFor, promise} = new Deferred();
+      const {promise, resolve: resolveWaitFor} = new Deferred();
       sequence.waitFor = env.sandbox.spy(() => promise);
 
       const runner = new AnimationRunner(
@@ -533,7 +533,7 @@ describes.realWin('amp-story animations', {}, (env) => {
       ).to.have.been.calledOnce;
     });
 
-    it('fails when using unknown presets', () => {
+    it('ignores unknown presets', async () => {
       const animationManager = new AnimationManager(
         html`
           <div>
@@ -542,7 +542,8 @@ describes.realWin('amp-story animations', {}, (env) => {
         `,
         ampdoc
       );
-      return expect(() => animationManager.applyFirstFrame()).to.throw();
+      await animationManager.applyFirstFrame();
+      expect(createAnimationRunner).to.not.have.been.called;
     });
 
     it('passes keyframeOptions to runner', async () => {
@@ -571,6 +572,16 @@ describes.realWin('amp-story animations', {}, (env) => {
           `,
           expectedOptions: {'scale-end': 0.1, 'scale-start': 0.5},
         },
+        {
+          target: html`
+            <div
+              animate-in="zoom-in"
+              scale-end="invalid"
+              scale-start="invalid"
+            ></div>
+          `,
+          expectedOptions: {},
+        },
       ];
 
       targetsWithOptions.forEach(({target}) => {
@@ -580,13 +591,16 @@ describes.realWin('amp-story animations', {}, (env) => {
       const animationManager = new AnimationManager(page, ampdoc);
       await animationManager.applyFirstFrame();
 
-      targetsWithOptions.forEach(({target, expectedOptions}) => {
+      targetsWithOptions.forEach(({expectedOptions, target}) => {
         expect(
           createAnimationRunner.withArgs(
             page,
             env.sandbox.match({
               source: target,
-              keyframeOptions: expectedOptions,
+              keyframeOptions: env.sandbox.match((passedOptions) => {
+                expect(passedOptions).to.eql(expectedOptions);
+                return true;
+              }),
               spec: {target},
             }),
             env.sandbox.match.any,
@@ -612,15 +626,59 @@ describes.realWin('amp-story animations', {}, (env) => {
       );
     });
 
-    it('fails when animate-in-after element does not exist', async () => {
+    it('sets fallback value for invalid animate-in-duration', async () => {
+      const page = html`
+        <div>
+          <div animate-in="fly-in-left" animate-in-duration="invalid"></div>
+        </div>
+      `;
+
+      const {firstElementChild} = page;
+
+      env.win.document.body.appendChild(page);
+      const animationManager = new AnimationManager(page, ampdoc);
+      await animationManager.applyFirstFrame();
+
+      expect(
+        createAnimationRunner.withArgs(
+          env.sandbox.match.any,
+          env.sandbox.match({
+            spec: {
+              target: firstElementChild,
+              duration: presets['fly-in-left'].duration,
+            },
+          }),
+          env.sandbox.match.any,
+          env.sandbox.match.any,
+          env.sandbox.match.any
+        )
+      ).to.have.been.calledOnce;
+    });
+
+    it('sets fallback value for invalid animate-in-delay', async () => {
       const page = html`
         <div>
-          <div animate-in="fly-in-left" animate-in-after="does-not-exist"></div>
+          <div animate-in="fly-in-left" animate-in-delay="invalid"></div>
         </div>
       `;
+
+      const {firstElementChild} = page;
+
       env.win.document.body.appendChild(page);
       const animationManager = new AnimationManager(page, ampdoc);
-      expect(() => animationManager.applyFirstFrame()).to.throw();
+      await animationManager.applyFirstFrame();
+
+      expect(
+        createAnimationRunner.withArgs(
+          env.sandbox.match.any,
+          env.sandbox.match({
+            spec: {target: firstElementChild, delay: 0},
+          }),
+          env.sandbox.match.any,
+          env.sandbox.match.any,
+          env.sandbox.match.any
+        )
+      ).to.have.been.calledOnce;
     });
 
     it('passes animate-in-after id in definition', async () => {
@@ -640,7 +698,7 @@ describes.realWin('amp-story animations', {}, (env) => {
           <div
             id="animated-third"
             ref="animatedThird"
-            animate-in-after="animated-second"
+            animate-in-after="does-not-exist-should-be-null"
             animate-in="fly-in-right"
           ></div>
           <amp-story-animation
@@ -655,12 +713,8 @@ describes.realWin('amp-story animations', {}, (env) => {
           </amp-story-animation>
         </div>
       `;
-      const {
-        animatedFirst,
-        animatedSecond,
-        animatedThird,
-        animatedFourth,
-      } = htmlRefs(page);
+      const {animatedFirst, animatedFourth, animatedSecond, animatedThird} =
+        htmlRefs(page);
 
       env.win.document.body.appendChild(page);
 
@@ -700,7 +754,7 @@ describes.realWin('amp-story animations', {}, (env) => {
           env.sandbox.match.any,
           env.sandbox.match({
             source: animatedThird,
-            startAfterId: 'animated-second',
+            startAfterId: null,
             spec: {target: animatedThird},
           }),
           env.sandbox.match.any,
diff --git a/extensions/amp-story/1.0/test/test-full-bleed-animations.js b/extensions/amp-story/1.0/test/test-full-bleed-animations.js
index deb51e2b79c10..95d6e7114bddb 100644
--- a/extensions/amp-story/1.0/test/test-full-bleed-animations.js
+++ b/extensions/amp-story/1.0/test/test-full-bleed-animations.js
@@ -45,9 +45,6 @@ describes.realWin(
     beforeEach(() => {
       win = env.win;
 
-      // Required by the bookend code.
-      win.document.title = 'Story';
-
       env.sandbox.stub(win.history, 'replaceState');
 
       const viewer = Services.viewerForDoc(env.ampdoc);
@@ -114,6 +111,10 @@ describes.realWin(
       img.setAttribute('animate-in', animationName);
       img.setAttribute('layout', 'fill');
 
+      env.sandbox
+        .stub(img, 'signals')
+        .callsFake({whenSignal: () => Promise.resolve()});
+
       const gridLayer = win.document.createElement('amp-story-grid-layer');
       opt_gridLayerTempalate = opt_gridLayerTempalate.length
         ? opt_gridLayerTempalate
diff --git a/extensions/amp-story/1.0/test/test-live-story-manager.js b/extensions/amp-story/1.0/test/test-live-story-manager.js
index 0e535c8ac6e4b..c24fcfb3dc06c 100644
--- a/extensions/amp-story/1.0/test/test-live-story-manager.js
+++ b/extensions/amp-story/1.0/test/test-live-story-manager.js
@@ -17,7 +17,7 @@
 import {Action} from '../amp-story-store-service';
 import {AmpStory} from '../amp-story';
 import {AmpStoryPage} from '../amp-story-page';
-import {CommonSignals} from '../../../../src/common-signals';
+import {CommonSignals} from '../../../../src/core/constants/common-signals';
 import {LiveStoryManager} from '../live-story-manager';
 import {LocalizationService} from '../../../../src/service/localization';
 import {Services} from '../../../../src/services';
diff --git a/extensions/amp-story/1.0/test/test-media-performance-metrics-service.js b/extensions/amp-story/1.0/test/test-media-performance-metrics-service.js
index 3c3f7c3d6cdf4..4ee656bf61542 100644
--- a/extensions/amp-story/1.0/test/test-media-performance-metrics-service.js
+++ b/extensions/amp-story/1.0/test/test-media-performance-metrics-service.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {MEDIA_LOAD_FAILURE_SRC_PROPERTY} from '../../../../src/event-helper';
 import {MediaPerformanceMetricsService} from '../media-performance-metrics-service';
 import {Services} from '../../../../src/services';
@@ -26,11 +26,7 @@ describes.fakeWin('media-performance-metrics-service', {amp: true}, (env) => {
   let win;
 
   before(() => {
-    clock = lolex.install({
-      target: win,
-      toFake: ['Date'],
-      now: 0,
-    });
+    clock = fakeTimers.withGlobal(window).install({toFake: ['Date'], now: 0});
   });
 
   after(() => {
@@ -62,7 +58,7 @@ describes.fakeWin('media-performance-metrics-service', {amp: true}, (env) => {
     clock.tick(300);
     service.stopMeasuring(video);
 
-    expect(tickStub).to.have.callCount(6);
+    expect(tickStub).to.have.callCount(7);
     expect(flushStub).to.have.been.calledOnce;
   });
 
@@ -76,7 +72,7 @@ describes.fakeWin('media-performance-metrics-service', {amp: true}, (env) => {
     clock.tick(10000);
     service.stopMeasuring(video);
 
-    expect(tickStub).to.have.callCount(2);
+    expect(tickStub).to.have.callCount(3);
     expect(flushStub).to.have.been.calledOnce;
   });
 
@@ -96,7 +92,7 @@ describes.fakeWin('media-performance-metrics-service', {amp: true}, (env) => {
     video2.dispatchEvent(new Event('playing'));
     service.stopMeasuring(video2);
 
-    expect(tickStub).to.have.callCount(11);
+    expect(tickStub).to.have.callCount(13);
     expect(flushStub).to.have.been.calledTwice;
   });
 
@@ -424,4 +420,42 @@ describes.fakeWin('media-performance-metrics-service', {amp: true}, (env) => {
       expect(tickStub).to.have.been.calledWithExactly('vcs', 2);
     });
   });
+
+  describe('Video on first page', () => {
+    it('should report the video is on the first page', () => {
+      const video = win.document.createElement('video');
+      const source = win.document.createElement('source');
+      const firstPage = win.document.createElement('amp-story-page');
+      source.setAttribute('src', 'foo.mp4');
+      video.appendChild(source);
+      firstPage.appendChild(video);
+      win.document.body.appendChild(firstPage);
+
+      service.startMeasuring(video);
+      service.stopMeasuring(video);
+
+      expect(tickStub).to.have.been.calledWithExactly('vofp', 1);
+    });
+
+    it('should report the video is not on the first page', () => {
+      // Create first page with unregistered video
+      const firstPage = win.document.createElement('amp-story-page');
+      firstPage.appendChild(win.document.createElement('video'));
+      win.document.body.appendChild(firstPage);
+
+      // Create second page with registered video
+      const video = win.document.createElement('video');
+      const source = win.document.createElement('source');
+      const secondPage = win.document.createElement('amp-story-page');
+      source.setAttribute('src', 'foo.mp4');
+      video.appendChild(source);
+      secondPage.appendChild(video);
+      win.document.body.appendChild(secondPage);
+
+      service.startMeasuring(video);
+      service.stopMeasuring(video);
+
+      expect(tickStub).to.have.been.calledWithExactly('vofp', 0);
+    });
+  });
 });
diff --git a/extensions/amp-story/1.0/test/test-media-pool.js b/extensions/amp-story/1.0/test/test-media-pool.js
index 2410126d779f1..b66a87fb54e20 100644
--- a/extensions/amp-story/1.0/test/test-media-pool.js
+++ b/extensions/amp-story/1.0/test/test-media-pool.js
@@ -15,7 +15,7 @@
  */
 import {MediaPool, MediaType} from '../media-pool';
 import {Services} from '../../../../src/services';
-import {findIndex} from '../../../../src/utils/array';
+import {findIndex} from '../../../../src/core/types/array';
 
 const NOOP = () => {};
 
diff --git a/extensions/amp-story/1.0/test/test-media-tasks.js b/extensions/amp-story/1.0/test/test-media-tasks.js
index 968cf6e66fe73..90fa399dc68a4 100644
--- a/extensions/amp-story/1.0/test/test-media-tasks.js
+++ b/extensions/amp-story/1.0/test/test-media-tasks.js
@@ -25,7 +25,7 @@ import {
   UpdateSourcesTask,
 } from '../media-tasks';
 import {Sources} from '../sources';
-import {toArray} from '../../../../src/types';
+import {toArray} from '../../../../src/core/types/array';
 
 describes.realWin('media-tasks', {}, (env) => {
   let win;
diff --git a/extensions/amp-story/1.0/test/test-page-advancement.js b/extensions/amp-story/1.0/test/test-page-advancement.js
index 6eae4abc39e23..f53e8be7fe84e 100644
--- a/extensions/amp-story/1.0/test/test-page-advancement.js
+++ b/extensions/amp-story/1.0/test/test-page-advancement.js
@@ -20,6 +20,7 @@ import {
   MediaBasedAdvancement,
   TimeBasedAdvancement,
 } from '../page-advancement';
+import {StateProperty} from '../amp-story-store-service';
 import {htmlFor} from '../../../../src/static-template';
 
 describes.realWin('page-advancement', {amp: true}, (env) => {
@@ -46,6 +47,50 @@ describes.realWin('page-advancement', {amp: true}, (env) => {
 
         expect(advancement).to.not.be.instanceOf(ManualAdvancement);
       });
+
+      it('should unpause on visibilitychange', async () => {
+        // Fix #28425, on player swipe doesn't get touchend so UI doesn't show.
+        const storyEl = win.document.createElement('amp-story');
+        const pageEl = win.document.createElement('amp-story-page');
+        storyEl.appendChild(pageEl);
+        const advancement = new ManualAdvancement(win, storyEl);
+
+        advancement.onTouchstart_({target: pageEl});
+
+        expect(advancement.storeService_.get(StateProperty.PAUSED_STATE)).to.be
+          .true;
+
+        // Update visibility to visible.
+        env.sandbox.stub(advancement.ampdoc_, 'isVisible').returns(true);
+        advancement.ampdoc_.visibilityStateHandlers_.fire();
+
+        expect(advancement.storeService_.get(StateProperty.PAUSED_STATE)).to.be
+          .false;
+      });
+
+      it('should not hide system UI on visibilitychange', async () => {
+        // Fix #28425, on player swipe doesn't get touchend so UI doesn't show.
+        const storyEl = win.document.createElement('amp-story');
+        const pageEl = win.document.createElement('amp-story-page');
+        storyEl.appendChild(pageEl);
+        const advancement = new ManualAdvancement(win, storyEl);
+
+        advancement.onTouchstart_({target: pageEl});
+
+        expect(!!advancement.timeoutId_).to.be.true;
+
+        // Update visibility to visible.
+        env.sandbox.stub(advancement.ampdoc_, 'isVisible').returns(true);
+        advancement.ampdoc_.visibilityStateHandlers_.fire();
+
+        // Check system UI is not visible and timeout was cancelled.
+        expect(
+          advancement.storeService_.get(
+            StateProperty.SYSTEM_UI_IS_VISIBLE_STATE
+          )
+        ).to.be.true;
+        expect(!!advancement.timeoutId_).to.be.false;
+      });
     });
 
     describe('TimeBasedAdvancement', () => {
@@ -84,6 +129,76 @@ describes.realWin('page-advancement', {amp: true}, (env) => {
 
         expect(advancement).to.not.be.instanceOf(TimeBasedAdvancement);
       });
+
+      it('should update delayMs_ when updateTimeDelay() is called', () => {
+        const pageEl = html`
+          <amp-story-page auto-advance-after="3s"> </amp-story-page>
+        `;
+        const advancement = AdvancementConfig.forElement(win, pageEl);
+        expect(advancement.delayMs_).to.be.equal(3000);
+
+        advancement.updateTimeDelay('5s');
+
+        expect(advancement.delayMs_).to.be.above(4500).and.below(5500);
+        expect(advancement.remainingDelayMs_).to.be.equal(null);
+      });
+
+      it('should update remainingDelayMs_ when updateTimeDelay() is called', () => {
+        const pageEl = html`
+          <amp-story-page auto-advance-after="3s"> </amp-story-page>
+        `;
+        const advancement = AdvancementConfig.forElement(win, pageEl);
+        // Simulate a pause after 1 second.
+        advancement.start();
+        advancement.startTimeMs_ -= 1000;
+        advancement.stop(true /** canResume */);
+        expect(advancement.remainingDelayMs_).to.be.above(1500).and.below(2500);
+
+        advancement.updateTimeDelay('5s');
+
+        expect(advancement.remainingDelayMs_).to.be.above(3500).and.below(4500);
+      });
+
+      it('should not keep a remainingDelayMs_ if will not resume', () => {
+        const pageEl = html`
+          <amp-story-page auto-advance-after="3s"> </amp-story-page>
+        `;
+        const advancement = AdvancementConfig.forElement(win, pageEl);
+        // Simulate a pause after 1 second.
+        advancement.start();
+        advancement.startTimeMs_ -= 1000;
+        advancement.stop(false /** canResume */);
+        expect(advancement.remainingDelayMs_).to.be.null;
+      });
+
+      it('should return progress 0 if stopped and will not resume, then start again', () => {
+        const pageEl = html`
+          <amp-story-page auto-advance-after="3s"> </amp-story-page>
+        `;
+        const advancement = AdvancementConfig.forElement(win, pageEl);
+        // Simulate a pause after 1 second.
+        advancement.start();
+        advancement.startTimeMs_ -= 1000;
+        advancement.stop(false /** canResume */);
+        advancement.start();
+        // Progress of ~0
+        expect(advancement.getProgress()).to.be.below(0.1);
+      });
+
+      it('should return progress > 0 if stopped and will resume', () => {
+        const pageEl = html`
+          <amp-story-page auto-advance-after="3s"> </amp-story-page>
+        `;
+        const advancement = AdvancementConfig.forElement(win, pageEl);
+        // Simulate a pause after 1 second.
+        advancement.start();
+        advancement.startTimeMs_ -= 1000;
+        advancement.stop(true /** canResume */);
+        advancement.start();
+        // Progress of ~0.33
+        expect(advancement.getProgress()).to.be.above(0.3);
+        expect(advancement.getProgress()).to.be.below(0.4);
+      });
     });
 
     describe('MediaBasedAdvancement', () => {
diff --git a/extensions/amp-story/1.0/test/test-story-analytics.js b/extensions/amp-story/1.0/test/test-story-analytics.js
new file mode 100644
index 0000000000000..4d2a1d23c6141
--- /dev/null
+++ b/extensions/amp-story/1.0/test/test-story-analytics.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as analytics from '../../../../src/analytics';
+import {Action, getStoreService} from '../amp-story-store-service';
+import {StoryAnalyticsService} from '../story-analytics';
+
+describes.realWin('amp-story-analytics', {amp: true}, (env) => {
+  let el;
+  let storeService;
+
+  beforeEach(() => {
+    const {win} = env;
+    el = win.document.createElement('amp-story');
+    storeService = getStoreService(win);
+    new StoryAnalyticsService(env.win, el);
+  });
+
+  it('sends story-page-visible on current page change', () => {
+    const triggerAnalyticsStub = env.sandbox.stub(
+      analytics,
+      'triggerAnalyticsEvent'
+    );
+    storeService.dispatch(Action.CHANGE_PAGE, {
+      id: 'page-1',
+      index: 0,
+    });
+    expect(triggerAnalyticsStub).to.have.been.calledOnceWithExactly(
+      el,
+      'story-page-visible',
+      env.sandbox.match({storyPageIndex: 0, storyPageId: 'page-1'})
+    );
+  });
+
+  it('does not send story-page-visible on ad page', () => {
+    const triggerAnalyticsStub = env.sandbox.stub(
+      analytics,
+      'triggerAnalyticsEvent'
+    );
+    storeService.dispatch(Action.TOGGLE_AD, true);
+    storeService.dispatch(Action.CHANGE_PAGE, {
+      id: 'ad-page-1',
+      index: 1,
+    });
+    expect(triggerAnalyticsStub).not.to.be.called;
+  });
+
+  it('sends story-page-visible on content page after ad page', () => {
+    const triggerAnalyticsStub = env.sandbox.stub(
+      analytics,
+      'triggerAnalyticsEvent'
+    );
+    storeService.dispatch(Action.CHANGE_PAGE, {
+      id: 'page-1',
+      index: 0,
+    });
+    expect(triggerAnalyticsStub).to.have.been.calledOnceWithExactly(
+      el,
+      'story-page-visible',
+      env.sandbox.match({storyPageIndex: 0, storyPageId: 'page-1'})
+    );
+    storeService.dispatch(Action.TOGGLE_AD, true);
+    storeService.dispatch(Action.CHANGE_PAGE, {
+      id: 'ad-page-1',
+      index: 1,
+    });
+    expect(triggerAnalyticsStub).to.have.been.calledOnce;
+    storeService.dispatch(Action.TOGGLE_AD, false);
+    storeService.dispatch(Action.CHANGE_PAGE, {
+      id: 'page-2',
+      index: 2,
+    });
+    expect(triggerAnalyticsStub).to.have.been.calledTwice;
+    expect(triggerAnalyticsStub.secondCall).to.have.been.calledWithExactly(
+      el,
+      'story-page-visible',
+      env.sandbox.match({storyPageIndex: 2, storyPageId: 'page-2'})
+    );
+  });
+});
diff --git a/extensions/amp-story/1.0/test/test-utils.js b/extensions/amp-story/1.0/test/test-utils.js
index 9ccd653469a81..e8a878c4f5064 100644
--- a/extensions/amp-story/1.0/test/test-utils.js
+++ b/extensions/amp-story/1.0/test/test-utils.js
@@ -47,10 +47,16 @@ describes.fakeWin('amp-story utils', {}, () => {
       expect(millisForSeconds).to.equal(2500);
     });
 
-    it('should return undefined for invalid types', () => {
+    it('should return NaN for invalid types', () => {
       const convertedMillis = timeStrToMillis('10kg');
       expect(convertedMillis).to.be.NaN;
     });
+
+    it('should return fallback value for invalid types', () => {
+      const fallback = 312;
+      const convertedMillis = timeStrToMillis('10kg', fallback);
+      expect(convertedMillis).to.equal(fallback);
+    });
   });
 
   describe('getRGBFromCssColorValue', () => {
diff --git a/extensions/amp-story/1.0/test/test-variable-service.js b/extensions/amp-story/1.0/test/test-variable-service.js
index ce03bb37899c7..1b75cbffa4bd5 100644
--- a/extensions/amp-story/1.0/test/test-variable-service.js
+++ b/extensions/amp-story/1.0/test/test-variable-service.js
@@ -47,4 +47,26 @@ describes.fakeWin('amp-story variable service', {}, (env) => {
     const variables = variableService.get();
     expect(variables['storyAdvancementMode']).to.equal('manualAdvance');
   });
+
+  it('should calculate storyProgress correctly on change', () => {
+    storeService.dispatch(Action.SET_PAGE_IDS, ['a', 'b', 'c', 'd', 'e']);
+    storeService.dispatch(Action.CHANGE_PAGE, {
+      id: 'd',
+      index: 3,
+    });
+
+    const variables = variableService.get();
+    expect(variables['storyProgress']).to.equal(0.75);
+  });
+
+  it('should calculate storyProgress when a story only has 1 page', () => {
+    storeService.dispatch(Action.SET_PAGE_IDS, ['a']);
+    storeService.dispatch(Action.CHANGE_PAGE, {
+      id: 'a',
+      index: 0,
+    });
+
+    const variables = variableService.get();
+    expect(variables['storyProgress']).to.equal(0);
+  });
 });
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-360.html b/extensions/amp-story/1.0/test/validator-amp-story-360.html
new file mode 100644
index 0000000000000..d7e003b2bc13a
--- /dev/null
+++ b/extensions/amp-story/1.0/test/validator-amp-story-360.html
@@ -0,0 +1,48 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  Tests the validation rules of the amp-story-360 tag.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-story</title>
+  <link rel="canonical" href="example.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <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-360" src="https://cdn.ampproject.org/v0/amp-story-360-0.1.js"></script>
+</head>
+<body>
+  <amp-story
+        standalone
+        title="Demo Story"
+        publisher="AMP Story"
+        publisher-logo-src="example.com/logo.png"
+        poster-portrait-src="example.com/poster.jpg">
+    <amp-story-page id="cover">
+      <amp-story-grid-layer template="fill">
+        <amp-story-360 layout="fill" heading-start="95" pitch-start="-10" zoom-start="4" heading-end="-45" pitch-end="-20" zoom-end="1" duration="30s">
+          <amp-img src="img/panorama1.jpg" width="7168" height="3584"></amp-img>
+        </amp-story-360>
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-360.out b/extensions/amp-story/1.0/test/validator-amp-story-360.out
new file mode 100644
index 0000000000000..d7c594cce390a
--- /dev/null
+++ b/extensions/amp-story/1.0/test/validator-amp-story-360.out
@@ -0,0 +1,49 @@
+PASS
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests the validation rules of the amp-story-360 tag.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <title>amp-story</title>
+|    <link rel="canonical" href="example.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <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>
+|    <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-360" src="https://cdn.ampproject.org/v0/amp-story-360-0.1.js"></script>
+|  </head>
+|  <body>
+|    <amp-story
+|          standalone
+|          title="Demo Story"
+|          publisher="AMP Story"
+|          publisher-logo-src="example.com/logo.png"
+|          poster-portrait-src="example.com/poster.jpg">
+|      <amp-story-page id="cover">
+|        <amp-story-grid-layer template="fill">
+|          <amp-story-360 layout="fill" heading-start="95" pitch-start="-10" zoom-start="4" heading-end="-45" pitch-end="-20" zoom-end="1" duration="30s">
+|            <amp-img src="img/panorama1.jpg" width="7168" height="3584"></amp-img>
+|          </amp-story-360>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|    </amp-story>
+|  </body>
+|  </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-amp-experiment-error.out b/extensions/amp-story/1.0/test/validator-amp-story-amp-experiment-error.out
index 53b88dc3643cc..2e65b697f6fb0 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-amp-experiment-error.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-amp-experiment-error.out
@@ -48,7 +48,7 @@ FAIL
 |          <!-- Invalid: bare script not allowed as a child of amp-story-grid-layer -->
 |          <script type="application/json">
 >>         ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-amp-experiment-error.html:48:8 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp-story/1.0/test/validator-amp-story-amp-experiment-error.html:48:8 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |            {
 |              "background-color-test": {
 |                "variants": {
@@ -63,7 +63,7 @@ amp-story/1.0/test/validator-amp-story-amp-experiment-error.html:48:8 Custom Jav
 |        <!-- Invalid: amp-experiment not allowed as a child of amp-story-page -->
 |        <amp-experiment>
 >>       ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-amp-experiment-error.html:61:6 Tag 'amp-experiment' is disallowed as child of tag 'amp-story-page'. Child tag must be one of ['amp-analytics', 'amp-pixel', 'amp-story-animation', 'amp-story-cta-layer', 'amp-story-grid-layer', 'amp-story-page-attachment']. (see https://amp.dev/documentation/components/amp-story)
+amp-story/1.0/test/validator-amp-story-amp-experiment-error.html:61:6 Tag 'amp-experiment' is disallowed as child of tag 'amp-story-page'. Child tag must be one of ['amp-analytics', 'amp-pixel', 'amp-story-animation', 'amp-story-auto-analytics', 'amp-story-cta-layer', 'amp-story-grid-layer', 'amp-story-page-attachment']. (see https://amp.dev/documentation/components/amp-story)
 |            <script type="application/json">
 |              {
 |                "background-color-test": {
@@ -81,7 +81,7 @@ amp-story/1.0/test/validator-amp-story-amp-experiment-error.html:61:6 Tag 'amp-e
 |      <!-- Invalid: amp-experiment not allowed as a child of amp-story -->
 |      <amp-experiment>
 >>     ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-amp-experiment-error.html:77:4 Tag 'amp-experiment' is disallowed as child of tag 'amp-story'. Child tag must be one of ['amp-analytics', 'amp-consent', 'amp-geo', 'amp-pixel', 'amp-sidebar', 'amp-story-auto-ads', 'amp-story-bookend', 'amp-story-page']. (see https://amp.dev/documentation/components/amp-story)
+amp-story/1.0/test/validator-amp-story-amp-experiment-error.html:77:4 Tag 'amp-experiment' is disallowed as child of tag 'amp-story'. Child tag must be one of ['amp-analytics', 'amp-consent', 'amp-geo', 'amp-pixel', 'amp-sidebar', 'amp-story-auto-ads', 'amp-story-auto-analytics', 'amp-story-bookend', 'amp-story-page', 'amp-story-social-share']. (see https://amp.dev/documentation/components/amp-story)
 |          <script type="application/json">
 |            {
 |              "background-color-test": {
@@ -95,4 +95,4 @@ amp-story/1.0/test/validator-amp-story-amp-experiment-error.html:77:4 Tag 'amp-e
 |      </amp-experiment>
 |    </amp-story>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-amp-experiment.out b/extensions/amp-story/1.0/test/validator-amp-story-amp-experiment.out
index f3b5e8f1d8978..26666094e39f4 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-amp-experiment.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-amp-experiment.out
@@ -48,4 +48,4 @@ PASS
 |      </amp-story-page>
 |    </amp-story>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-amp-list.out b/extensions/amp-story/1.0/test/validator-amp-story-amp-list.out
index b22f9374790be..72c0aa87e1870 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-amp-list.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-amp-list.out
@@ -90,4 +90,4 @@ PASS
 |        </amp-story-page>
 |      </amp-story>
 |    </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-amp-twitter-error.out b/extensions/amp-story/1.0/test/validator-amp-story-amp-twitter-error.out
index e48069710c5cd..eb21db5c277b9 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-amp-twitter-error.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-amp-twitter-error.out
@@ -36,7 +36,7 @@ FAIL
 |        <!-- Invalid: is not a descendant of amp-story-grid-layer. -->
 |        <amp-twitter width="375"
 >>       ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-amp-twitter-error.html:36:6 Tag 'amp-twitter' is disallowed as child of tag 'amp-story-page'. Child tag must be one of ['amp-analytics', 'amp-pixel', 'amp-story-animation', 'amp-story-cta-layer', 'amp-story-grid-layer', 'amp-story-page-attachment']. (see https://amp.dev/documentation/components/amp-story)
+amp-story/1.0/test/validator-amp-story-amp-twitter-error.html:36:6 Tag 'amp-twitter' is disallowed as child of tag 'amp-story-page'. Child tag must be one of ['amp-analytics', 'amp-pixel', 'amp-story-animation', 'amp-story-auto-analytics', 'amp-story-cta-layer', 'amp-story-grid-layer', 'amp-story-page-attachment']. (see https://amp.dev/documentation/components/amp-story)
 >>       ^~~~~~~~~
 amp-story/1.0/test/validator-amp-story-amp-twitter-error.html:36:6 The tag 'amp-twitter' requires including the 'amp-twitter' extension JavaScript. (see https://amp.dev/documentation/components/amp-twitter)
 |          height="472"
@@ -46,4 +46,4 @@ amp-story/1.0/test/validator-amp-story-amp-twitter-error.html:36:6 The tag 'amp-
 |      </amp-story-page>
 |    </amp-story>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-amp-twitter.out b/extensions/amp-story/1.0/test/validator-amp-story-amp-twitter.out
index 885ae01c0e066..b3476429bc5c3 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-amp-twitter.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-amp-twitter.out
@@ -47,4 +47,4 @@ PASS
 |      </amp-story-page>
 |    </amp-story>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.out b/extensions/amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.out
index ec137216ec014..f79afe92b5fc3 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.out
@@ -58,11 +58,11 @@ amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-erro
 amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:49:8 The attribute 'scale-start' may not appear in tag 'div'.
 |              <amp-img id="ken-burns-img1"
 >>             ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:50:12 The attribute 'animate-in' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:50:12 The attribute 'animate-in' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 >>             ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:50:12 The attribute 'animate-in-duration' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:50:12 The attribute 'animate-in-duration' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 >>             ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:50:12 The attribute 'translate-x' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:50:12 The attribute 'translate-x' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |                 src="https://picsum.photos/1024/768?image=1077"
 |                 animate-in="pan-left"
 |                 translate-x="-100"
@@ -92,11 +92,11 @@ amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-erro
 |              animate-in-after="ken-burns-img1">
 |              <amp-img id="ken-burns-img2"
 >>             ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:68:12 The attribute 'animate-in-after' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:68:12 The attribute 'animate-in-after' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 >>             ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:68:12 The attribute 'animate-in-duration' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:68:12 The attribute 'animate-in-duration' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 >>             ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:68:12 The attribute 'translate-y' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+amp-story/1.0/test/validator-amp-story-animations-visual-effects-parameters-error.html:68:12 The attribute 'translate-y' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |                src="https://picsum.photos/1024/768?image=1026"
 |                layout="fixed"
 |                width="1024"
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-cta-layer-error.out b/extensions/amp-story/1.0/test/validator-amp-story-cta-layer-error.out
index c5cd12badaa0c..ec8d685eec6fd 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-cta-layer-error.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-cta-layer-error.out
@@ -72,7 +72,7 @@ amp-story/1.0/test/validator-amp-story-cta-layer-error.html:60:6 The attribute '
 >>     ^~~~~~~~~
 amp-story/1.0/test/validator-amp-story-cta-layer-error.html:64:4 The tag 'amp-story-cta-layer' may only appear as a descendant of tag 'amp-story-page'.
 >>     ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-cta-layer-error.html:64:4 Tag 'amp-story-cta-layer' is disallowed as child of tag 'amp-story'. Child tag must be one of ['amp-analytics', 'amp-consent', 'amp-geo', 'amp-pixel', 'amp-sidebar', 'amp-story-auto-ads', 'amp-story-bookend', 'amp-story-page']. (see https://amp.dev/documentation/components/amp-story)
+amp-story/1.0/test/validator-amp-story-cta-layer-error.html:64:4 Tag 'amp-story-cta-layer' is disallowed as child of tag 'amp-story'. Child tag must be one of ['amp-analytics', 'amp-consent', 'amp-geo', 'amp-pixel', 'amp-sidebar', 'amp-story-auto-ads', 'amp-story-auto-analytics', 'amp-story-bookend', 'amp-story-page', 'amp-story-social-share']. (see https://amp.dev/documentation/components/amp-story)
 |        <a href="http://www.google.com" class="button"> Illegal CTA layer outside of amp-story-page! </a>
 |      </amp-story-cta-layer>
 |    </amp-story>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-deprecated.out b/extensions/amp-story/1.0/test/validator-amp-story-deprecated.out
index 59119f3d47461..90943bbefdfe5 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-deprecated.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-deprecated.out
@@ -29,7 +29,7 @@ FAIL
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
 >>   ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-deprecated.html:29:2 The attribute 'src' in tag 'amp-story extension .js script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-story-0.1.js'. (see https://amp.dev/documentation/components/amp-story)
+amp-story/1.0/test/validator-amp-story-deprecated.html:29:2 The attribute 'src' in tag 'amp-story extension script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-story-0.1.js'. (see https://amp.dev/documentation/components/amp-story)
 |  </head>
 |  <body>
 |    <amp-story standalone bookend-config-src="./bookend-config-src.json" background-audio="path/to/my.mp3">
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-embedded-component-error.out b/extensions/amp-story/1.0/test/validator-amp-story-embedded-component-error.out
index ae81ab128c842..198aaee29e749 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-embedded-component-error.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-embedded-component-error.out
@@ -36,9 +36,9 @@ FAIL
 amp-story/1.0/test/validator-amp-story-embedded-component-error.html:33:8 The tag 'a', a child tag of 'amp-story-grid-layer', does not satisfy one of the acceptable reference points: AMP-STORY-GRID-LAYER default, AMP-STORY-GRID-LAYER animate-in.
 |          <a href="javascript:alert('hello evil world')" role="link" data-tooltip-icon="/my-icon" data-tooltip-text="click me" target="">TOOLTIP</a>
 >>         ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-embedded-component-error.html:34:8 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+amp-story/1.0/test/validator-amp-story-embedded-component-error.html:34:8 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 >>         ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-embedded-component-error.html:34:8 The attribute 'target' in tag 'a' is set to the invalid value ''. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+amp-story/1.0/test/validator-amp-story-embedded-component-error.html:34:8 The attribute 'target' in tag 'a' is set to the invalid value ''. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |        </amp-story-grid-layer>
 |        <amp-story-grid-layer template="vertical">
 |            <a href="google.com" role="link" data-tooltip-icon="/my-icon" data-tooltip-text="click me" target="_top">TOOLTIP</a>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-grid-layer-presets.html b/extensions/amp-story/1.0/test/validator-amp-story-grid-layer-presets.html
new file mode 100644
index 0000000000000..57a2849f3d317
--- /dev/null
+++ b/extensions/amp-story/1.0/test/validator-amp-story-grid-layer-presets.html
@@ -0,0 +1,51 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the AMP Story grid layer templates.
+-->
+<!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-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
+    <title>Presets story</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>
+  </head>
+
+  <body>
+    <amp-story
+        standalone
+        publisher="The AMP team"
+        publisher-logo-src="./img/AMP-Brand-White-Icon.svg"
+        poster-portrait-src="./img/overview.jpg"
+        title="Landscape story"
+        supports-landscape>
+      <amp-story-page id="cover">
+        <amp-story-grid-layer preset="2021-background" template="fill">
+          <amp-img layout="fill" src="./img/example.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer preset="2021-foreground" anchor="left" template="fill">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet massa felis. Integer consequat accumsan velit, in condimentum quam sodales eu. Aliquam ac elit malesuada, iaculis massa egestas, malesuada dui. Suspendisse molestie ultricies mauris, vel tincidunt libero dignissim vel. Vivamus lacinia elit sit amet risus sagittis, sit amet imperdiet leo congue. Quisque finibus at est non commodo. Pellentesque ullamcorper feugiat metus sed ultrices. Vestibulum iaculis egestas ultricies.</p>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer preset="2021-foreground" anchor="bottom right" template="fill">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet massa felis. Integer consequat accumsan velit, in condimentum quam sodales eu. Aliquam ac elit malesuada, iaculis massa egestas, malesuada dui. Suspendisse molestie ultricies mauris, vel tincidunt libero dignissim vel. Vivamus lacinia elit sit amet risus sagittis, sit amet imperdiet leo congue. Quisque finibus at est non commodo. Pellentesque ullamcorper feugiat metus sed ultrices. Vestibulum iaculis egestas ultricies.</p>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-grid-layer-presets.out b/extensions/amp-story/1.0/test/validator-amp-story-grid-layer-presets.out
new file mode 100644
index 0000000000000..ce459636cb0c9
--- /dev/null
+++ b/extensions/amp-story/1.0/test/validator-amp-story-grid-layer-presets.out
@@ -0,0 +1,52 @@
+PASS
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the AMP Story grid layer templates.
+|  -->
+|  <!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-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
+|      <title>Presets story</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>
+|    </head>
+|
+|    <body>
+|      <amp-story
+|          standalone
+|          publisher="The AMP team"
+|          publisher-logo-src="./img/AMP-Brand-White-Icon.svg"
+|          poster-portrait-src="./img/overview.jpg"
+|          title="Landscape story"
+|          supports-landscape>
+|        <amp-story-page id="cover">
+|          <amp-story-grid-layer preset="2021-background" template="fill">
+|            <amp-img layout="fill" src="./img/example.jpg"></amp-img>
+|          </amp-story-grid-layer>
+|          <amp-story-grid-layer preset="2021-foreground" anchor="left" template="fill">
+|            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet massa felis. Integer consequat accumsan velit, in condimentum quam sodales eu. Aliquam ac elit malesuada, iaculis massa egestas, malesuada dui. Suspendisse molestie ultricies mauris, vel tincidunt libero dignissim vel. Vivamus lacinia elit sit amet risus sagittis, sit amet imperdiet leo congue. Quisque finibus at est non commodo. Pellentesque ullamcorper feugiat metus sed ultrices. Vestibulum iaculis egestas ultricies.</p>
+|          </amp-story-grid-layer>
+|          <amp-story-grid-layer preset="2021-foreground" anchor="bottom right" template="fill">
+|            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet massa felis. Integer consequat accumsan velit, in condimentum quam sodales eu. Aliquam ac elit malesuada, iaculis massa egestas, malesuada dui. Suspendisse molestie ultricies mauris, vel tincidunt libero dignissim vel. Vivamus lacinia elit sit amet risus sagittis, sit amet imperdiet leo congue. Quisque finibus at est non commodo. Pellentesque ullamcorper feugiat metus sed ultrices. Vestibulum iaculis egestas ultricies.</p>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|      </amp-story>
+|    </body>
+|  </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-next-page-no-ad.html b/extensions/amp-story/1.0/test/validator-amp-story-next-page-no-ad.html
index 49fbef65ddb0f..68a4f60a5b048 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-next-page-no-ad.html
+++ b/extensions/amp-story/1.0/test/validator-amp-story-next-page-no-ad.html
@@ -49,7 +49,6 @@ <h3 align-self="start"></h3>
         <h1></h1>
       </amp-story-grid-layer>
     </amp-story-page>
-    <amp-story-bookend src="http://me.com/bookend-config-src.json" layout="nodisplay"></amp-story-bookend>
   </amp-story>
 </body>
 </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-next-page-no-ad.out b/extensions/amp-story/1.0/test/validator-amp-story-next-page-no-ad.out
index d7f1c58a77da2..71c2a3f3fae64 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-next-page-no-ad.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-next-page-no-ad.out
@@ -50,7 +50,6 @@ PASS
 |          <h1></h1>
 |        </amp-story-grid-layer>
 |      </amp-story-page>
-|      <amp-story-bookend src="http://me.com/bookend-config-src.json" layout="nodisplay"></amp-story-bookend>
 |    </amp-story>
 |  </body>
 |  </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.html b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.html
index 8ccd45f9ee6e2..be00fed594f2b 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.html
+++ b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.html
@@ -54,9 +54,6 @@ <h1>Amazing title</h1>
           <h1>fill</h1>
         </amp-story-grid-layer>
 
-        <amp-story-bookend src="bookendv1.json" layout="nodisplay">
-        </amp-story-bookend>
-
         <amp-youtube
             id="myLiveChannel"
             data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.out b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.out
index 4b6aa027e4f3f..bcdc3e8822104 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.out
@@ -37,18 +37,18 @@ FAIL
 |
 |        <amp-story-page-attachment layout="nodisplay" theme="cat">
 >>       ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-page-attachment-error.html:37:6 The attribute 'theme' in tag 'amp-story-page-attachment[href]' is set to the invalid value 'cat'.
+amp-story/1.0/test/validator-amp-story-page-attachment-error.html:37:6 The attribute 'theme' in tag 'amp-story-page-attachment' is set to the invalid value 'cat'.
 |          <h1>Amazing title</h1>
 |          <p>Bacon ipsum dolor cat cat cat.</p>
 |        </amp-story-page-attachment>
 |
 |        <amp-story-page-attachment layout="nodisplay" href="javascript:alert(1)"></amp-story-page-attachment>
 >>       ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-page-attachment-error.html:42:6 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'amp-story-page-attachment[href]'.
+amp-story/1.0/test/validator-amp-story-page-attachment-error.html:42:6 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'amp-story-page-attachment'.
 |
 |        <amp-story-page-attachment layout="nodisplay" href="https://www.gooogle.com">
 >>       ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-page-attachment-error.html:44:6 Tag 'amp-story-page-attachment[href]' must have 0 child tags - saw 1 child tags.
+amp-story/1.0/test/validator-amp-story-page-attachment-error.html:44:6 Tag 'amp-story-page-attachment' must have 0 child tags - saw 1 child tags.
 >>       ^~~~~~~~~
 amp-story/1.0/test/validator-amp-story-page-attachment-error.html:44:6 Tag 'amp-story-page-attachment[href]', if present, must be the last child of tag 'amp-story-page'.
 >>       ^~~~~~~~~
@@ -65,11 +65,6 @@ amp-story/1.0/test/validator-amp-story-page-attachment-error.html:44:6 Tag 'amp-
 |            <h1>fill</h1>
 |          </amp-story-grid-layer>
 |
-|          <amp-story-bookend src="bookendv1.json" layout="nodisplay">
->>         ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-page-attachment-error.html:57:8 Tag 'amp-story-bookend', if present, must be the last child of tag 'amp-story-page-attachment'.
-|          </amp-story-bookend>
-|
 |          <amp-youtube
 |              id="myLiveChannel"
 |              data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
@@ -90,4 +85,4 @@ amp-story/1.0/test/validator-amp-story-page-attachment-error.html:57:8 Tag 'amp-
 |      </amp-story-page>
 |    </amp-story>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.html b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.html
index b74f274c952d9..771d61afb96a6 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.html
+++ b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.html
@@ -57,6 +57,48 @@ <h1>fill</h1>
       <amp-story-page-attachment layout="nodisplay" href="https://www.google.com">
       </amp-story-page-attachment>
     </amp-story-page>
+    <amp-story-page id="cta-button-with-images">
+      <amp-story-grid-layer template="vertical">
+        <h1>fill</h1>
+      </amp-story-grid-layer>
+      <amp-story-page-attachment
+        title="Page attachment title"
+        layout="nodisplay"
+        cta-text="Call To Action"
+        cta-image="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
+        cta-image-2="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
+        >
+      </amp-story-page-attachment>
+    </amp-story-page>
+    <amp-story-page id="outlink-cta-button">
+      <amp-story-grid-layer template="vertical">
+        <h1>fill</h1>
+      </amp-story-grid-layer>
+      <amp-story-page-attachment
+        href="https://www.google.com"
+        title="Page attachment title"
+        layout="nodisplay"
+        cta-text="Call To Action"
+        cta-image="https://website.com/image.png"
+        >
+      </amp-story-page-attachment>
+    </amp-story-page>
+    <amp-story-page id="outlink-cta-button-custom-theme">
+      <amp-story-grid-layer template="vertical">
+        <h1>fill</h1>
+      </amp-story-grid-layer>
+      <amp-story-page-attachment
+        href="https://www.google.com"
+        title="Page attachment title"
+        layout="nodisplay"
+        theme="custom"
+        cta-accent-color="pink"
+        cta-accent-element="background"
+        cta-text="Call To Action"
+        cta-image="https://website.com/image.png"
+        >
+      </amp-story-page-attachment>
+    </amp-story-page>
   </amp-story>
 </body>
 </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.out b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.out
index 85cf4b88066fb..8392e53f4f02e 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.out
@@ -58,6 +58,48 @@ PASS
 |        <amp-story-page-attachment layout="nodisplay" href="https://www.google.com">
 |        </amp-story-page-attachment>
 |      </amp-story-page>
+|      <amp-story-page id="cta-button-with-images">
+|        <amp-story-grid-layer template="vertical">
+|          <h1>fill</h1>
+|        </amp-story-grid-layer>
+|        <amp-story-page-attachment
+|          title="Page attachment title"
+|          layout="nodisplay"
+|          cta-text="Call To Action"
+|          cta-image="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
+|          cta-image-2="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
+|          >
+|        </amp-story-page-attachment>
+|      </amp-story-page>
+|      <amp-story-page id="outlink-cta-button">
+|        <amp-story-grid-layer template="vertical">
+|          <h1>fill</h1>
+|        </amp-story-grid-layer>
+|        <amp-story-page-attachment
+|          href="https://www.google.com"
+|          title="Page attachment title"
+|          layout="nodisplay"
+|          cta-text="Call To Action"
+|          cta-image="https://website.com/image.png"
+|          >
+|        </amp-story-page-attachment>
+|      </amp-story-page>
+|      <amp-story-page id="outlink-cta-button-custom-theme">
+|        <amp-story-grid-layer template="vertical">
+|          <h1>fill</h1>
+|        </amp-story-grid-layer>
+|        <amp-story-page-attachment
+|          href="https://www.google.com"
+|          title="Page attachment title"
+|          layout="nodisplay"
+|          theme="custom"
+|          cta-accent-color="pink"
+|          cta-accent-element="background"
+|          cta-text="Call To Action"
+|          cta-image="https://website.com/image.png"
+|          >
+|        </amp-story-page-attachment>
+|      </amp-story-page>
 |    </amp-story>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-reference-point.html b/extensions/amp-story/1.0/test/validator-amp-story-reference-point.html
index 9c4c7ebcb9b7b..3ece0f4390f32 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-reference-point.html
+++ b/extensions/amp-story/1.0/test/validator-amp-story-reference-point.html
@@ -35,8 +35,6 @@
         <img class="footer-logo" src="img/foot-logo.svg" width="40" height="40" /> <!-- The real error here is that <img/> tag is not allowed. But this is a weird use case where the validator error will comment about reference points. This needs to be fixed in the near future. -->
       </amp-story-grid-layer>
     </amp-story-page>
-    <amp-story-bookend src="./related.json" layout="nodisplay"></amp-story-bookend>
   </amp-story>
 </body>
 </html>
-
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-reference-point.out b/extensions/amp-story/1.0/test/validator-amp-story-reference-point.out
index 651972241c922..4ced1163706fe 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-reference-point.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-reference-point.out
@@ -35,10 +35,9 @@ FAIL
 |        <amp-story-grid-layer template="horizontal">
 |          <img class="footer-logo" src="img/foot-logo.svg" width="40" height="40" /> <!-- The real error here is that <img/> tag is not allowed. But this is a weird use case where the validator error will comment about reference points. This needs to be fixed in the near future. -->
 >>         ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-reference-point.html:35:8 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img)
+amp-story/1.0/test/validator-amp-story-reference-point.html:35:8 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
 |        </amp-story-grid-layer>
 |      </amp-story-page>
-|      <amp-story-bookend src="./related.json" layout="nodisplay"></amp-story-bookend>
 |    </amp-story>
 |  </body>
 |  </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-sidebar-error.out b/extensions/amp-story/1.0/test/validator-amp-story-sidebar-error.out
index 9997e013aa740..b09da2961c44b 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-sidebar-error.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-sidebar-error.out
@@ -47,7 +47,7 @@ FAIL
 |        poster-portrait-src="https://example.com/my-story/poster/3x4.jpg">
 |        <amp-sidebar id="sidebar1" layout="nodisplay" side="right">
 >>       ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-sidebar-error.html:47:6 The attribute 'side' may not appear in tag 'amp-story >> amp-sidebar'. (see https://amp.dev/documentation/components/amp-sidebar)
+amp-story/1.0/test/validator-amp-story-sidebar-error.html:47:6 The attribute 'side' may not appear in tag 'amp-sidebar'. (see https://amp.dev/documentation/components/amp-sidebar/)
 |          <ul>
 |            <li>Nav item 1</li>
 |            <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
@@ -64,4 +64,3 @@ amp-story/1.0/test/validator-amp-story-sidebar-error.html:47:6 The attribute 'si
 |        </amp-story-page>
 |       </amp-story>
 |    </body>
-
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-sidebar.html b/extensions/amp-story/1.0/test/validator-amp-story-sidebar.html
index e6256c6c7be22..7faec3e007c33 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-sidebar.html
+++ b/extensions/amp-story/1.0/test/validator-amp-story-sidebar.html
@@ -61,4 +61,3 @@ <h1>This is the cover. Open up the sidebar!</h1>
       </amp-story-page>
      </amp-story>
   </body>
-
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-sidebar.out b/extensions/amp-story/1.0/test/validator-amp-story-sidebar.out
index 52adf282a06c5..cf8ef988d4938 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-sidebar.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-sidebar.out
@@ -46,6 +46,8 @@ PASS
 |        publisher-logo-src="https://example.com/logo/1x1.png"
 |        poster-portrait-src="https://example.com/my-story/poster/3x4.jpg">
 |        <amp-sidebar id="sidebar1" layout="nodisplay">
+>>       ^~~~~~~~~
+amp-story/1.0/test/validator-amp-story-sidebar.html:47:6 The tag 'amp-sidebar' is deprecated - use 'anchor tags or amp-story-player controls' instead. (see https://github.com/ampproject/amphtml/issues/33293)
 |          <ul>
 |            <li>Nav item 1</li>
 |            <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-social-share.html b/extensions/amp-story/1.0/test/validator-amp-story-social-share.html
new file mode 100644
index 0000000000000..3b815c9192ed6
--- /dev/null
+++ b/extensions/amp-story/1.0/test/validator-amp-story-social-share.html
@@ -0,0 +1,45 @@
+<!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>
+    <title>My Story</title>
+    <meta name="viewport"
+          content="width=device-width,minimum-scale=1,initial-scale=1">
+    <link rel="canonical" href="social-share.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>
+      body {
+        font-family: 'Roboto', sans-serif;
+      }
+      amp-story-page {
+        background-color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <amp-story standalone title="My Story"
+      publisher="The AMP Team"
+      publisher-logo-src="https://example.com/logo/1x1.png"
+      poster-portrait-src="https://example.com/my-story/poster/3x4.jpg">
+      <amp-story-page id="cover">
+        <amp-story-grid-layer template="vertical">
+          <h1>Validation test for social-share providers</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <!-- Valid social share tag -->
+      <amp-story-social-share layout="nodisplay">
+        <script type="application/json">
+          {
+            "shareProviders": [
+              "facebook",
+              "whatsapp"
+            ]
+          }
+        </script>
+      </amp-story-social-share>
+    </amp-story>
+  </body>
+</html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-social-share.out b/extensions/amp-story/1.0/test/validator-amp-story-social-share.out
new file mode 100644
index 0000000000000..0696d62f1e25f
--- /dev/null
+++ b/extensions/amp-story/1.0/test/validator-amp-story-social-share.out
@@ -0,0 +1,46 @@
+PASS
+|  <!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>
+|      <title>My Story</title>
+|      <meta name="viewport"
+|            content="width=device-width,minimum-scale=1,initial-scale=1">
+|      <link rel="canonical" href="social-share.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>
+|        body {
+|          font-family: 'Roboto', sans-serif;
+|        }
+|        amp-story-page {
+|          background-color: white;
+|        }
+|      </style>
+|    </head>
+|    <body>
+|      <amp-story standalone title="My Story"
+|        publisher="The AMP Team"
+|        publisher-logo-src="https://example.com/logo/1x1.png"
+|        poster-portrait-src="https://example.com/my-story/poster/3x4.jpg">
+|        <amp-story-page id="cover">
+|          <amp-story-grid-layer template="vertical">
+|            <h1>Validation test for social-share providers</h1>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|        <!-- Valid social share tag -->
+|        <amp-story-social-share layout="nodisplay">
+|          <script type="application/json">
+|            {
+|              "shareProviders": [
+|                "facebook",
+|                "whatsapp"
+|              ]
+|            }
+|          </script>
+|        </amp-story-social-share>
+|      </amp-story>
+|    </body>
+|  </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-svg-error.out b/extensions/amp-story/1.0/test/validator-amp-story-svg-error.out
index 348b8be40bbd0..56e0c8b57fd19 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-svg-error.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-svg-error.out
@@ -38,7 +38,7 @@ FAIL
 |              <path d="m64.3 22.023h-4.16l-6.975 17.797h3.674s.74-.33 1.18-1.4l.805-2.57h6.808l.805 2.57c.44 1.07 1.18 1.4 1.18 1.4h3.674zm-4.524 11.033 2.45-7.26 2.45 7.26zm36.608-11.033v17.797h-3.664v-11.684l-4.524 8.805s-.552 1.158-1.82 1.026h-.1c-1.27.143-1.82-1.026-1.82-1.026l-4.524-8.805v11.684h-3.674v-17.797h3.586c.827.01.938.684.938.684l5.55 10.978 5.55-10.978s.1-.673.938-.684zm19.196 2.837c-1.655-3.2-8.75-2.836-8.75-2.836h-3.94v17.796h4.05l.143-5.958c6.73.188 7.756-1.876 7.756-1.876 2.946-2.902.74-7.128.74-7.128zm-5.78 5.88h-2.8v-5.517c0-.364 3.178-.022 3.487.077.706.22 1.346.662 1.556 1.4.52 1.82-.188 3.773-2.25 4.038z"/>
 |              <circle cx="24.578" cy="30" r="20.952" foo-attribute="bar"/>
 >>             ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-svg-error.html:38:12 The attribute 'foo-attribute' may not appear in tag 'circle'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg)
+amp-story/1.0/test/validator-amp-story-svg-error.html:38:12 The attribute 'foo-attribute' may not appear in tag 'circle'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg)
 |            </g>
 |            <path d="m26.144 26.834h5.075s1.07 0 .52 1.214l-8.75 14.564h-1.622l1.545-9.522-5.153-.033s-.916-.364-.22-1.545l8.606-14.233h1.688z" fill="#fff"/>
 |          </svg>
@@ -46,7 +46,7 @@ amp-story/1.0/test/validator-amp-story-svg-error.html:38:12 The attribute 'foo-a
 |        <amp-story-page-attachment layout="nodisplay">
 |          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
 >>         ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-svg-error.html:44:8 The tag 'circle' may only appear as a descendant of tag 'svg'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg)
+amp-story/1.0/test/validator-amp-story-svg-error.html:44:8 The tag 'circle' may only appear as a descendant of tag 'svg'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg)
 |          <svg height="100" width="100">
 |          </svg>
 |        </amp-story-page-attachment>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-video-controls.html b/extensions/amp-story/1.0/test/validator-amp-story-video-controls.html
index 72b7173fe5013..f5a938dfd117a 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-video-controls.html
+++ b/extensions/amp-story/1.0/test/validator-amp-story-video-controls.html
@@ -74,4 +74,3 @@
   </amp-story>
 </body>
 </html>
-
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-video-controls.out b/extensions/amp-story/1.0/test/validator-amp-story-video-controls.out
index 9505f10689d9f..0f8a901290975 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-video-controls.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-video-controls.out
@@ -38,7 +38,7 @@ PASS
 |          <!-- This should show a deprecation warning because amp-video has the [controls] attribute. -->
 |          <amp-video width="480"
 >>         ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-video-controls.html:38:8 The attribute 'controls' in tag 'amp-story >> amp-video' is deprecated - use '- no replacement' instead. (see https://github.com/ampproject/amphtml/issues/23798)
+amp-story/1.0/test/validator-amp-story-video-controls.html:38:8 The attribute 'controls' in tag 'amp-video' is deprecated - use '- no replacement' instead. (see https://github.com/ampproject/amphtml/issues/23798)
 |                     height="270"
 |                     src="/video/tokyo.mp4"
 |                     layout="responsive"
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-video-error.html b/extensions/amp-story/1.0/test/validator-amp-story-video-error.html
index f16d48f2de671..bd185bc07b5e6 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-video-error.html
+++ b/extensions/amp-story/1.0/test/validator-amp-story-video-error.html
@@ -50,4 +50,3 @@
   </amp-story>
 </body>
 </html>
-
diff --git a/extensions/amp-story/1.0/test/validator-amp-story-video-error.out b/extensions/amp-story/1.0/test/validator-amp-story-video-error.out
index 9ef4c6da0ec49..f07020cfb5b24 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story-video-error.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story-video-error.out
@@ -38,9 +38,9 @@ FAIL
 |          <!-- This should fail because amp-video doesn't have the [poster] attribute. -->
 |          <amp-video width="480"
 >>         ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-video-error.html:38:8 The mandatory attribute 'autoplay' is missing in tag 'amp-story >> amp-video'. (see https://amp.dev/documentation/components/amp-video)
+amp-story/1.0/test/validator-amp-story-video-error.html:38:8 The mandatory attribute 'autoplay' is missing in tag 'amp-video'. (see https://amp.dev/documentation/components/amp-video/)
 >>         ^~~~~~~~~
-amp-story/1.0/test/validator-amp-story-video-error.html:38:8 The mandatory attribute 'poster' is missing in tag 'amp-story >> amp-video'. (see https://amp.dev/documentation/components/amp-video)
+amp-story/1.0/test/validator-amp-story-video-error.html:38:8 The mandatory attribute 'poster' is missing in tag 'amp-video'. (see https://amp.dev/documentation/components/amp-video/)
 |                     height="270"
 |                     src="/video/tokyo.mp4"
 |                     layout="responsive">
diff --git a/extensions/amp-story/1.0/test/validator-amp-story.html b/extensions/amp-story/1.0/test/validator-amp-story.html
index 759164eddb3f6..243251745c7f6 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story.html
+++ b/extensions/amp-story/1.0/test/validator-amp-story.html
@@ -24,12 +24,14 @@
   <title>STAMP examples</title>
   <link rel="canonical" href="http://nonblocking.io/" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <meta name="amp-story-generator-name" content="Creation Tool 1">
+  <meta name="amp-story-generator-version" content="0.1">
   <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>
   <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>
 </head>
 <body>
-  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3">
+  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
     <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
       <amp-story-grid-layer template="horizontal">
         <h5 animate-in="drop">
@@ -49,7 +51,6 @@ <h3 align-self="start"></h3>
         <h1></h1>
       </amp-story-grid-layer>
     </amp-story-page>
-    <amp-story-bookend src="http://me.com/bookend-config-src.json" layout="nodisplay"></amp-story-bookend>
   </amp-story>
 </body>
 </html>
diff --git a/extensions/amp-story/1.0/test/validator-amp-story.out b/extensions/amp-story/1.0/test/validator-amp-story.out
index 13d33c6674afb..4c822d362cc51 100644
--- a/extensions/amp-story/1.0/test/validator-amp-story.out
+++ b/extensions/amp-story/1.0/test/validator-amp-story.out
@@ -25,12 +25,14 @@ PASS
 |    <title>STAMP examples</title>
 |    <link rel="canonical" href="http://nonblocking.io/" >
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <meta name="amp-story-generator-name" content="Creation Tool 1">
+|    <meta name="amp-story-generator-version" content="0.1">
 |    <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>
 |    <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>
 |  </head>
 |  <body>
-|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3">
+|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
 |      <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
 |        <amp-story-grid-layer template="horizontal">
 |          <h5 animate-in="drop">
@@ -50,7 +52,6 @@ PASS
 |          <h1></h1>
 |        </amp-story-grid-layer>
 |      </amp-story-page>
-|      <amp-story-bookend src="http://me.com/bookend-config-src.json" layout="nodisplay"></amp-story-bookend>
 |    </amp-story>
 |  </body>
 |  </html>
diff --git a/extensions/amp-story/1.0/utils.js b/extensions/amp-story/1.0/utils.js
index 9bafc3f1ac4a8..473c4f5ae19bb 100644
--- a/extensions/amp-story/1.0/utils.js
+++ b/extensions/amp-story/1.0/utils.js
@@ -13,43 +13,40 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Layout} from '../../../src/layout';
+
 import {Services} from '../../../src/services';
+import {
+  assertHttpsUrl,
+  getSourceOrigin,
+  isProxyOrigin,
+  resolveRelativeUrl,
+} from '../../../src/url';
 import {
   closestAncestorElementBySelector,
   scopedQuerySelectorAll,
 } from '../../../src/dom';
 import {createShadowRoot} from '../../../src/shadow-embed';
+import {dev, user, userAssert} from '../../../src/log';
 import {getMode} from '../../../src/mode';
-import {
-  getSourceOrigin,
-  isProxyOrigin,
-  resolveRelativeUrl,
-} from '../../../src/url';
-import {setStyle} from '../../../src/style';
-import {user, userAssert} from '../../../src/log';
+import {setStyle, toggle} from '../../../src/style';
 
 /**
  * Returns millis as number if given a string(e.g. 1s, 200ms etc)
  * @param {string} time
+ * @param {number=} fallbackMs Used when `time` is not a valid time string.
  * @return {number|undefined}
  */
-export function timeStrToMillis(time) {
+export function timeStrToMillis(time, fallbackMs = NaN) {
   const match = time.toLowerCase().match(/^([0-9\.]+)\s*(s|ms)$/);
-  if (!match) {
-    return NaN;
-  }
 
-  const num = match[1];
-  const units = match[2];
+  const num = match ? match[1] : undefined;
+  const units = match ? match[2] : undefined;
 
-  userAssert(
-    match && match.length == 3 && (units == 's' || units == 'ms'),
-    'Invalid time string %s',
-    time
-  );
+  if (!match || match.length !== 3 || (units !== 's' && units !== 'ms')) {
+    return fallbackMs;
+  }
 
-  return units == 's' ? parseFloat(num) * 1000 : parseInt(num, 10);
+  return Math.round((units == 's' ? 1000 : 1) * parseFloat(num));
 }
 
 /**
@@ -73,7 +70,7 @@ export function hasTapAction(el) {
  * @return {!ClientRect}
  */
 export function unscaledClientRect(el) {
-  const {width, height, left, top} = el./*OK*/ getBoundingClientRect();
+  const {height, left, top, width} = el./*OK*/ getBoundingClientRect();
 
   const scaleFactorX = width == 0 ? 1 : width / el./*OK*/ offsetWidth;
   const scaleFactorY = height == 0 ? 1 : height / el./*OK*/ offsetHeight;
@@ -152,7 +149,7 @@ export function getRGBFromCssColorValue(cssValue) {
  * @return {string} '#fff' or '#000'
  */
 export function getTextColorForRGB(rgb) {
-  const {r, g, b} = rgb;
+  const {b, g, r} = rgb;
   // Calculates the relative luminance L.
   // https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
   const getLinearRGBValue = (x) => {
@@ -251,23 +248,6 @@ export function resolveImgSrc(win, url) {
   return urlSrc;
 }
 
-/**
- * Returns a boolean indicating whether the media element is visible or has to
- * play, or hidden by any publisher CSS rule.
- * @param {!Element} ampMediaEl amp-video or amp-audio
- * @param {!../../../src/service/resource.Resource} resource
- * @return {boolean}
- */
-export function isMediaDisplayed(ampMediaEl, resource) {
-  // Considers amp-audio elements with a layout=nodisplay attribute as
-  // displayed, since they are expected to play when the page is active.
-  return (
-    resource.isDisplayed() ||
-    (ampMediaEl.tagName === 'AMP-AUDIO' &&
-      ampMediaEl.getLayout() === Layout.NODISPLAY)
-  );
-}
-
 /**
  * Whether a Story should show the URL info dialog.
  * @param {!../../../src/service/viewer-interface.ViewerInterface} viewer
@@ -278,6 +258,28 @@ export function shouldShowStoryUrlInfo(viewer) {
   return showStoryUrlInfo ? showStoryUrlInfo !== '0' : viewer.isEmbedded();
 }
 
+/**
+ * Retrieves an attribute src from the <amp-story> element.
+ * @param {!Element} element
+ * @param {string} attribute
+ * @param {string=} warn
+ * @return {?string}
+ */
+export function getStoryAttributeSrc(element, attribute, warn = false) {
+  const storyEl = dev().assertElement(
+    closestAncestorElementBySelector(element, 'AMP-STORY')
+  );
+  const attrSrc = storyEl && storyEl.getAttribute(attribute);
+
+  if (attrSrc) {
+    assertHttpsUrl(attrSrc, storyEl, attribute);
+  } else if (warn) {
+    user().warn('AMP-STORY', `Expected ${attribute} attribute on <amp-story>`);
+  }
+
+  return attrSrc;
+}
+
 /**
  * The attribute name for text background color
  * @private @const {string}
@@ -306,3 +308,17 @@ export function setTextBackgroundColor(element) {
     setStyle(el, 'background-color', color);
   });
 }
+
+/**
+ * Click a clone of the anchor in the context of the light dom.
+ * Used to apply linker logic on shadow-dom anchors.
+ * @param {!Element} anchorElement
+ * @param {!Element} domElement element from the light dom
+ */
+export function triggerClickFromLightDom(anchorElement, domElement) {
+  const outerAnchor = anchorElement.cloneNode();
+  toggle(outerAnchor, false);
+  domElement.appendChild(outerAnchor);
+  outerAnchor.click();
+  outerAnchor.remove();
+}
diff --git a/extensions/amp-story/1.0/variable-service.js b/extensions/amp-story/1.0/variable-service.js
index 20977a4fe2323..db77706ce17b1 100644
--- a/extensions/amp-story/1.0/variable-service.js
+++ b/extensions/amp-story/1.0/variable-service.js
@@ -15,7 +15,7 @@
  */
 import {Services} from '../../../src/services';
 import {StateProperty, getStoreService} from './amp-story-store-service';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {registerServiceBuilder} from '../../../src/service';
 
 /**
@@ -25,12 +25,9 @@ export let StoryVariableDef;
 
 /** @enum {string} */
 export const AnalyticsVariable = {
-  BOOKEND_COMPONENT_POSITION: 'storyBookendComponentPosition',
-  BOOKEND_COMPONENT_TYPE: 'storyBookendComponentType',
-  BOOKEND_TARGET_HREF: 'storyBookendTargetHref',
-  STORY_REACTION_ID: 'storyReactionId',
-  STORY_REACTION_RESPONSE: 'storyReactionResponse',
-  STORY_REACTION_TYPE: 'storyReactionType',
+  STORY_INTERACTIVE_ID: 'storyInteractiveId',
+  STORY_INTERACTIVE_RESPONSE: 'storyInteractiveResponse',
+  STORY_INTERACTIVE_TYPE: 'storyInteractiveType',
   STORY_PAGE_ID: 'storyPageId',
   STORY_PAGE_INDEX: 'storyPageIndex',
   STORY_PAGE_COUNT: 'storyPageCount',
@@ -72,12 +69,9 @@ export class AmpStoryVariableService {
   constructor(win) {
     /** @private {!StoryVariableDef} */
     this.variables_ = dict({
-      [AnalyticsVariable.BOOKEND_COMPONENT_POSITION]: null,
-      [AnalyticsVariable.BOOKEND_COMPONENT_TYPE]: null,
-      [AnalyticsVariable.BOOKEND_TARGET_HREF]: null,
-      [AnalyticsVariable.STORY_REACTION_ID]: null,
-      [AnalyticsVariable.STORY_REACTION_RESPONSE]: null,
-      [AnalyticsVariable.STORY_REACTION_TYPE]: null,
+      [AnalyticsVariable.STORY_INTERACTIVE_ID]: null,
+      [AnalyticsVariable.STORY_INTERACTIVE_RESPONSE]: null,
+      [AnalyticsVariable.STORY_INTERACTIVE_TYPE]: null,
       [AnalyticsVariable.STORY_PAGE_INDEX]: null,
       [AnalyticsVariable.STORY_PAGE_ID]: null,
       [AnalyticsVariable.STORY_PAGE_COUNT]: null,
@@ -106,22 +100,26 @@ export class AmpStoryVariableService {
           return;
         }
 
-        this.variables_[
-          AnalyticsVariable.STORY_PREVIOUS_PAGE_ID
-        ] = this.variables_[AnalyticsVariable.STORY_PAGE_ID];
+        this.variables_[AnalyticsVariable.STORY_PREVIOUS_PAGE_ID] =
+          this.variables_[AnalyticsVariable.STORY_PAGE_ID];
 
         this.variables_[AnalyticsVariable.STORY_PAGE_ID] = pageId;
 
-        const pageIndex = /** @type {number} */ (this.storeService_.get(
-          StateProperty.CURRENT_PAGE_INDEX
-        ));
+        const pageIndex = /** @type {number} */ (
+          this.storeService_.get(StateProperty.CURRENT_PAGE_INDEX)
+        );
         this.variables_[AnalyticsVariable.STORY_PAGE_INDEX] = pageIndex;
 
-        const numberOfPages = this.storeService_.get(StateProperty.PAGE_IDS)
-          .length;
+        const numberOfPages = this.storeService_.get(
+          StateProperty.PAGE_IDS
+        ).length;
         if (numberOfPages > 0) {
-          this.variables_[AnalyticsVariable.STORY_PROGRESS] =
-            pageIndex / numberOfPages;
+          if (numberOfPages === 1) {
+            this.variables_[AnalyticsVariable.STORY_PROGRESS] = 0;
+          } else {
+            this.variables_[AnalyticsVariable.STORY_PROGRESS] =
+              pageIndex / (numberOfPages - 1);
+          }
         }
       },
       true /* callToInitialize */
diff --git a/extensions/amp-story/OWNERS b/extensions/amp-story/OWNERS
index 79d4b6e44eb0d..8b5f9536c763e 100644
--- a/extensions/amp-story/OWNERS
+++ b/extensions/amp-story/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
@@ -17,6 +17,15 @@
           name: 'enriqe',
           notify: true,
         },
+        {
+          name: 'processprocess',
+        },
+        {
+          name: 'mszylkowski',
+        },
+        {
+          name: 'raxsha',
+        },
       ],
     },
   ],
diff --git a/extensions/amp-story/amp-story-analytics.md b/extensions/amp-story/amp-story-analytics.md
index e566303dc89ab..81c6e25f3ffe8 100644
--- a/extensions/amp-story/amp-story-analytics.md
+++ b/extensions/amp-story/amp-story-analytics.md
@@ -56,17 +56,103 @@ Consult your vendor's documentation for more specific details on how to set this
 
 The `story-last-page-visible` trigger is fired when the last page in the story is shown to the user. This can be used to measure completion rate.
 
-### Bookend enter trigger (`"on": "story-bookend-enter"`)
+### Tooltip focus trigger (`"on": "story-focus"`)
 
-The `story-bookend-enter` trigger is fired when the bookend is shown to the user, after the last page of the current story.
+The `story-focus` trigger is fired when clicking an element that opens a tooltip.
 
-### Bookend exit trigger (`"on": "story-bookend-exit"`)
+The current elements trackable by the `story-focus` and `story-click-through` triggers are:
 
-The `story-bookend-exit` trigger is fired when the bookend is dismissed by the user.
+-   `<a>`
+-   `<amp-twitter>`
 
-### Bookend click trigger (`"on": "story-bookend-click"`)
+To use it, specify the trigger on your `"triggers"` property of your analytics configuration, accompanied by the `"tagName"` of the element you want to track.
 
-The `story-bookend-click` trigger is fired when a user clicks a link inside the bookend. This trigger can be tracked with the accompanying variables: [`storyBookendComponentPosition`](#storyBookendComponentPosition), [`storyBookendComponentType`](#storyBookendComponentType), and [`storyBookendTargetHref`](#storyBookendTargetHref) listed below.
+Example:
+
+```
+<amp-analytics id="my-analytics">
+  <script type="application/json">
+    {
+      "requests": {
+        "click": "https://example.com/my-endpoint"
+      },
+      "triggers": {
+        "trackFocusState": {
+          "on": "story-focus",
+          "tagName": "a",
+          "request": "click"
+        }
+      }
+    }
+  </script>
+</amp-analytics>
+
+```
+
+### Tooltip click through trigger (`"on": "story-click-through"`)
+
+The `story-click-through` trigger is fired when clicking on a tooltip.
+
+To use it, specify the trigger on your `"triggers"` property of your analytics configuration, accompanied by the `"tagName"` of the element you want to track.
+
+Example:
+
+```
+<amp-analytics id="my-analytics">
+  <script type="application/json">
+    {
+      "requests": {
+        "click": "https://example.com/my-endpoint"
+      },
+      "triggers": {
+        "trackClickThrough": {
+          "on": "story-click-through",
+          "tagName": "a",
+          "request": "click"
+        }
+      }
+    }
+  </script>
+</amp-analytics>
+
+```
+
+### Story open trigger (`"on": "story-open"`)
+
+The `story-open` trigger is fired when opening a drawer or dialog inside a story. The components that are currently trackable by this are:
+
+-   Page attachment (`<amp-story-page-attachment>`)
+-   Share dialog (`<amp-story-share-menu>`)
+-   Info dialog (`<amp-story-info-dialog>`)
+-   Sidebar (`<amp-sidebar>`)
+
+To use it, specify the trigger on your `"triggers"` property of your analytics configuration, accompanied by the `"tagName"` of the element you want to track.
+
+Example:
+
+```
+<amp-analytics id="my-analytics">
+  <script type="application/json">
+    {
+      "requests": {
+        "base": "https://example.com/my-endpoint"
+      },
+      "triggers": {
+        "trackShareOpen": {
+          "on": "story-open",
+          "tagName": "amp-story-share-menu",
+          "request": "base"
+        }
+      }
+    }
+  </script>
+</amp-analytics>
+
+```
+
+### Story close trigger (`"on": "story-close"`)
+
+The `story-close` trigger is fired when closing a drawer or dialog inside a story. The components that are currently trackable by this are the same as the [`story-open` trigger](#Story-open-trigger-"on":-"story-open").
 
 ### Mute trigger (`"on": "story-audio-muted"`)
 
@@ -84,6 +170,45 @@ The `story-page-attachment-enter` trigger is fired when a page attachment is ope
 
 The `story-page-attachment-exit` trigger is fired when a page attachment is dismissed by the user.
 
+## Variables as data attribute
+
+For the following event types, variables can be passed as part of the element level data attribute
+
+-   story-focus
+-   story-click-through
+-   story-open
+-   story-close
+
+The variables passed as data attributes should follow the format `data-vars-*`.
+
+Example:
+
+Given the following analytics config with the corresponding element
+
+```
+// amp-analytics config
+"trackTooltipClicks": {
+  "on": "story-focus",
+  "request": "focusedState",
+},
+
+...
+
+<amp-twitter width="375" data-tooltip-text="my twitter embed"
+  height="472"
+  layout="responsive"
+  data-tweetid="1166723359696130049"
+  data-vars-tooltip-click-id="tweet1"
+  data-vars-tooltip-href="twitter.com"
+  interactive>
+</amp-twitter>
+
+```
+
+And in the request url the token would be of the format `${eventId}` (follows camelcase):
+
+`"focusedState": "${base}&tooltipClickId=${tooltipClickId}&tooltipTargetHref=${tooltipHref}"`
+
 ## Story variables
 
 AMP story contributes the following URL substitutions:
@@ -96,6 +221,14 @@ The unique ID for an AMP story page, as provided by the `id` attribute of the cu
 
 A zero-based index value for an AMP story page determined by its ordering within `amp-story`.
 
+### `storyPreviousPageId`
+
+The unique ID for an AMP story page, as provided by the `id` attribute of the previous `amp-story-page`.
+
+### `storyAdvancementMode`
+
+Advancement mode through which the user navigated (i.e. manual or automatic).
+
 ### `storyPageCount`
 
 The total number of pages available to the user in the story.
@@ -108,18 +241,6 @@ The user's progress through the story, as a decimal in the range [0...1]. This r
 
 A boolean representing whether the story was muted when the accompanying trigger was fired.
 
-### `storyBookendComponentPosition`
-
-A number representing the index of the bookend component that the user clicked when the accompanying trigger, [`story-bookend-click`](#bookend-click-trigger-"on":-"story-bookend-click") was fired.
-
-### `storyBookendComponentType`
-
-The type of component in the bookend that was clicked when the accompanying trigger, [`story-bookend-click`](#bookend-click-trigger-"on":-"story-bookend-click") was fired.
-
-### `storyBookendTargetHref`
-
-The url of the bookend component that was clicked when the accompanying trigger, [`story-bookend-click`](#bookend-click-trigger-"on":-"story-bookend-click") was fired.
-
 ### Additional Vars
 
 Description of additional variables can be found in the [analytics-vars.md](../amp-analytics/analytics-vars.md) file.
diff --git a/extensions/amp-story/amp-story-bookend.md b/extensions/amp-story/amp-story-bookend.md
deleted file mode 100644
index 8a5c751b66903..0000000000000
--- a/extensions/amp-story/amp-story-bookend.md
+++ /dev/null
@@ -1,303 +0,0 @@
----
-$category@: presentation
-formats:
-  - stories
-teaser:
-  text: The end screen of an AMP story, showcasing sharing and related content.
----
-
-<!--
-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.
--->
-
-# amp-story-bookend
-
-The `amp-story-bookend` is the last screen of the story. It contains related links, sharing options, call to action links, and more.
-
-<figure class="centered-fig">
-  <amp-anim alt="related article example" width="300" height="533" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/related-articles.gif">
-    <noscript>
-    <img alt="related article example" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/related-articles.gif" />
-  </noscript>
-  </amp-anim>
-</figure>
-
-## Configuration
-
-Importing the JSON configuration through the `src` attribute:
-
-```html
-<amp-story standalone>
-  <amp-story-page id="cover">
-    ...
-  </amp-story-page>
-  <!-- `layout=nodisplay` is required. -->
-  <amp-story-bookend src="bookendv1.json" layout="nodisplay">
-  </amp-story-bookend>
-  <amp-story></amp-story
-></amp-story>
-```
-
-If you don't want to fetch the bookend configuration from a server, you can also specify it inline:
-
-```html
-<amp-story standalone>
-  ...
-  <amp-story-bookend layout="nodisplay">
-    <script type="application/json">
-       {
-         "bookendVersion": "v1.0",
-         "shareProviders": [ ... ],
-         "components": [ ... ]
-      }
-    </script>
-  </amp-story-bookend>
-  <amp-story></amp-story
-></amp-story>
-```
-
-Next, you must fill in the JSON configuration. This is where you customize the bookend. The overall structure of the config looks like so:
-
-```json
-{
-  "bookendVersion": "v1.0",
-  "shareProviders": [
-    ...
-  ],
-  "components": [
-    ...
-  ]
-}
-```
-
-It is required to specify you are using the v1.0 version by including the first line.
-
-### Bookend components
-
-The bookend is made up of a variety of components. These components can be articles, call to action links, text, and more.
-
-They are specified in the `components` field of the configured JSON. See the [Example JSON response](#example-json-response) section below for an example.
-
-#### heading
-
-The `heading` component has a `text` field, which can be used to append a title to a group of articles.
-
-```json
-{
-  "type": "heading",
-  "text": "More to Read"
-}
-```
-
-<amp-img alt="Bookend heading component" layout="fixed"
-src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/amp-story-bookend-component-heading.png" width="386" height="123">
-<noscript>
-<img alt="Bookend heading component" src="img/amp-story-bookend-component-heading.png" />
-</noscript>
-</amp-img>
-
-#### small
-
-The `small` component can be used to link to related articles. This component requires the following fields: `title`, `url`, and optionally an `image`.
-
-```json
-{
-  "type": "small",
-  "title": "This is India an the best places you should go",
-  "url": "http://example.com/article.html",
-  "image": "http://placehold.it/256x128"
-}
-```
-
-<amp-img alt="Bookend small component" layout="fixed"
-src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/amp-story-bookend-component-small.png" width="379" height="192">
-<noscript>
-<img alt="Bookend small component" src="img/amp-story-bookend-component-small.png" />
-</noscript>
-</amp-img>
-
-#### landscape
-
-The `landscape` component can be used for alternative formats of content, like videos. This component requires the following fields: `title`, `url`, and `image`. Optionally, you can add a `category` field, which displays a subheading above the title.
-
-```json
-{
-  "type": "landscape",
-  "title": "TRAPPIST-1 Planets May Still Be Wet Enough for Life",
-  "url": "http://example.com/article.html",
-  "category": "astronomy",
-  "image": "http://placehold.it/256x128"
-}
-```
-
-<amp-img alt="Bookend landscape component" layout="fixed"
-src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/amp-story-bookend-component-landscape.png" width="388" height="410">
-<noscript>
-<img alt="Bookend landscape component" src="img/amp-story-bookend-component-landscape.png" />
-</noscript>
-</amp-img>
-
-#### portrait
-
-The `portrait` component can be used to link to other stories. This component requires the following fields: `title`, `url`, and `image`. Optionally, you can add a `category` field, which displays a subheading above the title.
-
-```json
-{
-  "type": "portrait",
-  "category": "Science",
-  "title": "New discovery found",
-  "url": "http://example.com/article.html",
-  "image": "http://placehold.it/312x416"
-}
-```
-
-<amp-img alt="Bookend portrait component" layout="fixed"
-src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/amp-story-bookend-component-portrait.png" width="382" height="522">
-<noscript>
-<img alt="Bookend portrait component" src="img/amp-story-bookend-component-portrait.png" />
-</noscript>
-</amp-img>
-
-#### cta-link
-
-The `cta-link` component lets you specify links for call to actions (e.g., `Read More` or `Subscribe`). This component has a `links` key, which specifies an array of links. Each link is an object with a `text` and `url` values.
-
-```json
-{
-  "type": "cta-link",
-  "links": [
-    {
-      "text": "Sign Up",
-      "url": "example.com/signup"
-    },
-    {
-      "text": "Subscribe",
-      "url": "example.com/subscribe"
-    }
-  ]
-}
-```
-
-<amp-img alt="Bookend cta-links component" layout="fixed"
-src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/amp-story-bookend-component-cta-links.png" width="381" height="81">
-<noscript>
-<img alt="Bookend cta-links component" src="img/amp-story-bookend-component-cta-links.png" />
-</noscript>
-</amp-img>
-
-#### textbox
-
-The `textbox` component lets you specify text inside the bookend (for example, photo credits). This component requires a `text` array, where each element of the array is a line of text.
-
-```json
-{
-  "type": "textbox",
-  "text": [
-    "Food by Enrique McPizza",
-    "Choreography by Gabriel Filly",
-    "Script by Alan Ecma S.",
-    "Direction by Jon Tarantino"
-  ]
-}
-```
-
-<amp-img alt="Bookend textbox component" layout="fixed"
-src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/amp-story-bookend-component-textbox.png" width="591" height="358">
-<noscript>
-<img alt="Bookend textbox component" src="img/amp-story-bookend-component-textbox.png" />
-</noscript>
-</amp-img>
-
-**AMP-to-AMP linking**
-
-For documents displayed in an AMP viewer, links typically navigate `_top` or open in a new window. Links to AMP pages, however, may continue to be displayed in the viewer. To enable this behavior, add `"amphtml": true` to a component that supports links. For example:
-
-```json
-...
-{
-  "type": "small",
-  "title": "This is India an the best places you should go",
-  "url": "http://example.com/my-amp-document.html",
-  "image": "http://placehold.it/256x128",
-  "amphtml": true
-},
-{
-  "type": "cta-link",
-  "links": [
-    {
-      "text": "Sign Up",
-      "url": "example.com/signup",
-      "amphtml": true
-    },
-    {
-      "text": "Subscribe",
-      "url": "example.com/subscribe"
-    }
-  ]
-},
-...
-```
-
-### Social sharing
-
-The configuration for social sharing is defined in the `shareProviders` field of the response object, and it's optional.
-
-This field should contain a string, where each string respresents a share provider's name (e.g. `twitter`).
-
-When extra parameters are required, an object with key-value pairs should be used. The object should contain a key `provider` with a value (e.g. `facebook`) corresponding to the provider's name. The next key-values will depend on the share provider.
-
-The list of available providers is the same as in the [amp-social-share](https://amp.dev/documentation/components/amp-social-share) component.
-
-Each of these providers has a different set of available parameters ([see `data-param-*`](https://amp.dev/documentation/components/amp-social-share#data-param-*)). The configuration object takes these parameters without the `data-param-` prefix (for example, the `data-param-app_id` would appear in the configuration object as `app_id`).
-
-### JSON configuration
-
-The `<amp-story-bookend>` must have a `src` attribute pointing to the JSON configuration of the bookend. It is described as a URL endpoint that accepts GET requests and returns a JSON response with the contents of the bookend. If omitted, the amp-story component renders a default UI for the end screen. The system is responsible for fetching the data necessary to render related and trending articles. This can be served from a static JSON file, or dynamically-generated (e.g., to calculate what is currently trending).
-
-### Example JSON response
-
-```text
-{
-  // You must specify version v1.0.
-  "bookendVersion": "v1.0",
-  "shareProviders": [
-    "email",
-    "tumblr",
-    {
-      "provider": "twitter",
-      // You can add custom sharing parameters depending on the social platform.
-      "text": "This is custom share text that I would like for the Twitter platform"
-    },
-    {
-      "provider": "facebook",
-      // Facebook requires an `app_id` param
-      "app_id": "MY_FACEBOOK_APP_ID"
-    }
-  ],
-  "components": [
-    {
-      "type": "heading",
-      "text": "More to read"
-    },
-    {
-      "type": "small",
-      "title": "This is India an the best places you should go",
-      "url": "http://example.com/article.html",
-      "image": "http://placehold.it/256x128"
-    },
-    ...
-  ]
-}
-```
diff --git a/extensions/amp-story/amp-story-cta-layer.md b/extensions/amp-story/amp-story-cta-layer.md
index 6aa0905c5e2d0..4ec2431825731 100644
--- a/extensions/amp-story/amp-story-cta-layer.md
+++ b/extensions/amp-story/amp-story-cta-layer.md
@@ -24,14 +24,18 @@ limitations under the License.
 
 # amp-story-cta-layer
 
-The `<amp-story-cta-layer>` component allows the usage of `<a>` and `<button>` elements inside an `<amp-story-page>`.
+## Usage
 
-## Constraints
+The `<amp-story-cta-layer>` component allows the usage of `<a>` and `<button>` elements inside an `<amp-story-page>`.
 
-- If specified, the `<amp-story-cta-layer>` element must be the last layer within an `<amp-story-page>`. As a result, effectively every `<amp-story-page>` can have exactly one or exactly zero of the `<amp-story-cta-layer>` element.
-- Positioning and sizing of this layer cannot be controlled. It is always 100% width of the page, 20% height of the page, and aligned to the bottom of the page.
+-   The `<amp-story-cta-layer>` element may not appear on the first story page.
+-   If specified, the `<amp-story-cta-layer>` element must be the last layer within an `<amp-story-page>`.
+-   Every `<amp-story-page>` (except the first) can have exactly one or exactly zero of the `<amp-story-cta-layer>` element.
+-   Positioning and sizing of this layer cannot be controlled. It is always 100% width of the page, 20% height of the page, and aligned to the bottom of the page.
 
-## Example
+[tip type="important"]
+Both `amp-story-cta-layer` and `amp-story-page-attachment`(amp-story-page-attachment.md) must be the last child tag of an [`amp-story-page`](amp-story-page.md). Because of this, you may include neither or one, but not both.
+[/tip]
 
 ```html
 <amp-story-page id="vertical-template-thirds">
@@ -47,18 +51,18 @@ The `<amp-story-cta-layer>` component allows the usage of `<a>` and `<button>` e
 ```
 
 <amp-img alt="CTA Layer" layout="fixed"
-    src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/layers-cta-layer.png"
+    src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/layers-cta-layer.png"
     width="404" height="678">
 <noscript>
 <img width="404" height="678"
-         src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/layers-cta-layer.png" />
+         src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/layers-cta-layer.png" />
 </noscript>
 </amp-img>
 
-[Complete example found in the examples directory](https://github.com/ampproject/amphtml/blob/master/examples/amp-story/cta-layer-outlink.html)
+[Complete example found in the examples directory](https://github.com/ampproject/amphtml/blob/main/examples/amp-story/cta-layer-outlink.html)
 
-## Children
+### Valid children
 
 The `amp-story-cta-layer` allows mostly the same descendants as `amp-story-grid-layer`, and additionally allows `<a>` and `<button>` tags.
 
-For an updated list of supported children, be sure to take a look at the [amp-story-cta-layer-allowed-descendants](https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/validator-amp-story.protoascii) field in the validation rules.
+For an updated list of supported children, be sure to take a look at the [amp-story-cta-layer-allowed-descendants](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/validator-amp-story.protoascii) field in the validation rules.
diff --git a/extensions/amp-story/amp-story-grid-layer.md b/extensions/amp-story/amp-story-grid-layer.md
index 93aaa101f1d52..55d105726bd51 100644
--- a/extensions/amp-story/amp-story-grid-layer.md
+++ b/extensions/amp-story/amp-story-grid-layer.md
@@ -24,150 +24,25 @@ limitations under the License.
 
 # amp-story-grid-layer
 
+## Usage
+
 The `<amp-story-grid-layer>` component lays its children out into a grid. Its implementation is based off of the [CSS Grid Spec](https://www.w3.org/TR/css-grid-1/).
 
 <div class="flex-images">
-  <amp-img alt="Layer 1" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/layers-layer-1.gif" width="200" height="355">
-  <noscript><img width="200" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/layers-layer-1.gif" /></noscript></amp-img>
+  <amp-img alt="Layer 1 - background" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/layers-layer-1.gif" width="200" height="355">
+  <noscript><img width="200" alt="Layer 1 - background" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/layers-layer-1.gif" /></noscript></amp-img>
   <span class="special-char">+</span>
-  <amp-img alt="Layer 2" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/layers-layer-2.jpg" width="200" height="355">
-  <noscript><img width="200" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/layers-layer-2.jpg" /></noscript></amp-img>
+  <amp-img alt="Layer 2 - page content (with equal margin from the screen edge)" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/layers-layer-2.jpg" alt="Layer 2" width="200" height="355">
+  <noscript><img width="200" alt="Layer 2 - page content (with equal margin from the screen edge)" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/layers-layer-2.jpg" /></noscript></amp-img>
   <span class="special-char">+</span>
-  <amp-img alt="Layer 3" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/layers-layer-3.jpg" width="200" height="355">
-  <noscript><img width="200" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/layers-layer-3.jpg" /></noscript></amp-img>
+  <amp-img alt="Layer 3 - logo, positioned in the bottom-right of the screen" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/layers-layer-3.jpg" width="200" height="355">
+  <noscript><img width="200" alt="Layer 3 - logo, positioned in the bottom-right of the screen" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/layers-layer-3.jpg" /></noscript></amp-img>
   <span class="special-char">=</span>
-  <amp-img alt="All layers" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/layers-layer-4.gif" width="200" height="355">
-  <noscript><img width="200" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/layers-layer-4.gif" /></noscript></amp-img>
+  <amp-img alt="All layers shown together" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/layers-layer-4.gif" width="200" height="355">
+  <noscript><img width="200" alt="All layers shown together" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/layers-layer-4.gif" /></noscript></amp-img>
 </div>
 
-## Attributes
-
-### template [required]
-
-The `template` attribute determines the layout of the grid layer. Available templates are described in the [Templates](#templates) section below.
-
-### grid-area [optional]
-
-This attribute is specified on children of `<amp-story-grid-layer>`. `grid-area` specifies the named area (from using a `template` that defines them) in which the element containing this attribute should appear.
-
-Example:
-
-```html
-<amp-story-grid-layer template="thirds">
-  <p grid-area="middle-third">Element 1</p>
-  <p grid-area="lower-third">Element 2</p>
-  <p grid-area="upper-third">Element 3</p>
-</amp-story-grid-layer>
-```
-
-### aspect-ratio [optional]
-
-The value specifies an aspect ratio in the "horizontal:vertical" format, where both "horizontal" and "vertical" are integer numbers. If this attribute is specified, the layout of the grid layer is set to conform to the specified proportions. The font size, in this case, is automatically set to the 1/10th of the resulting height to enable proportional content scaling.
-
-Example:
-
-```html
-<amp-story-grid-layer aspect-ratio="9:16" template="vertical">
-  <div style="width: 10%; height: 10%; font-size: 2em;">
-    This block will be in 9:16 aspect ratio and font size will be set at the 20%
-    of the layer's height.
-  </div>
-</amp-story-grid-layer>
-```
-
-## Templates
-
-The following are available templates to specify for the layout of the grid layer.
-
-{% call callout('Tip', type='success') %}
-To see the layout templates in use, check out the [layouts demo on AMP By Example](https://amp.dev/documentation/examples/style-layout/amp_story_layouts/).
-{% endcall %}
-
-### fill
-
-The `fill` template shows its first child full bleed. All other children are not shown.
-
-Names Areas: (none)
-
-Example:
-
-<amp-img alt="Fill template example" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/template-fill.png" width="145" height="255">
-  <noscript>
-    <img alt="Horizontal template example" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/template-fill.png" />
-  </noscript>
-</amp-img>
-
-```html
-<amp-story-grid-layer template="fill">
-  <amp-img src="cat.jpg"></amp-img>
-</amp-story-grid-layer>
-```
-
-### vertical
-
-The `vertical` template lays its elements out along the y-axis. By default, its elements are aligned to the top, and can take up the entirety of the screen along the x-axis.
-
-Names Areas: (none)
-
-<amp-img alt="Vertical template example" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/template-vertical.png" width="145" height="255">
-  <noscript>
-    <img alt="Horizontal template example" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/template-vertical.png" />
-  </noscript>
-</amp-img>
-
-```html
-<amp-story-grid-layer template="vertical">
-  <p>Element 1</p>
-  <p>Element 2</p>
-  <p>Element 3</p>
-</amp-story-grid-layer>
-```
-
-### horizontal
-
-The `horizontal` template lays its elements out along the x-axis. By default, its elements are aligned to the start of the line and can take up the entirety of the screen along the y-axis.
-
-Names Areas: (none)
-
-<amp-img alt="Horizontal template example" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/template-horizontal.png" width="145" height="255">
-  <noscript>
-    <img alt="Horizontal template example" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/template-horizontal.png" />
-  </noscript>
-</amp-img>
-
-```html
-<amp-story-grid-layer template="horizontal">
-  <p>Element 1</p>
-  <p>Element 2</p>
-  <p>Element 3</p>
-</amp-story-grid-layer>
-```
-
-### thirds
-
-The `thirds` template divides the screen into three equally-sized rows, and allows you to slot content into each area.
-
-Named Areas:
-
-- `upper-third`
-- `middle-third`
-- `lower-third`
-
-<amp-img alt="Horizontal template example" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/template-thirds.png" width="145" height="255">
-  <noscript>
-    <img alt="Thirds template example" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/template-thirds.png" />
-  </noscript>
-</amp-img>
-
-```html
-<amp-story-grid-layer template="thirds">
-  <p grid-area="middle-third">Element 1</p>
-  <p grid-area="lower-third">Element 2</p>
-  <p grid-area="upper-third">Element 3</p>
-</amp-story-grid-layer>
-```
-
-## Children
+## Valid children
 
 An `amp-story-grid-layer` can contain any of the following elements:
 
@@ -183,7 +58,6 @@ An `amp-story-grid-layer` can contain any of the following elements:
     <td>
       <ul>
         <li><code>&lt;amp-audio></code></li>
-        <li><code>&lt;amp-google-vrview-image></code></li>
         <li><code>&lt;amp-img></code></li>
         <li><code>&lt;amp-video></code></li>
         <li><code>&lt;source></code></li>
@@ -326,9 +200,180 @@ An `amp-story-grid-layer` can contain any of the following elements:
   </tr>
 </table>
 
-## Pre templated UI
+## Attributes
+
+### template [required]
 
-### Landscape half-half UI
+The `template` attribute determines the layout of the grid layer. Available templates are described in the [Templates](#templates) section below.
+
+### grid-area [optional]
+
+This attribute is specified on children of `<amp-story-grid-layer>`. `grid-area` specifies the named area (from using a `template` that defines them) in which the element containing this attribute should appear.
+
+Example:
+
+```html
+<amp-story-grid-layer template="thirds">
+  <p grid-area="middle-third">Element 1</p>
+  <p grid-area="lower-third">Element 2</p>
+  <p grid-area="upper-third">Element 3</p>
+</amp-story-grid-layer>
+```
+
+### aspect-ratio [optional]
+
+The value specifies an aspect ratio in the "horizontal:vertical" format, where both "horizontal" and "vertical" are integer numbers. If this attribute is specified, the layout of the grid layer is set to conform to the specified proportions. The font size, in this case, is automatically set to the 1/10th of the resulting height to enable proportional content scaling.
+
+Example:
+
+```html
+<amp-story-grid-layer aspect-ratio="9:16" template="vertical">
+  <div style="width: 10%; height: 10%; font-size: 2em;">
+    This block will be in 9:16 aspect ratio and font size will be set at the 20%
+    of the layer's height.
+  </div>
+</amp-story-grid-layer>
+```
+
+### preset [optional]
+
+Specifies a responsiveness preset that configures the layer with an aspect-ratio and scaling-factor.
+
+The presets are:
+
+-   **2021-background**: An aspect-ratio layer scaled up to cover letterboxed margins. May only contain the background asset (image or video).
+-   **2021-foreground**: An aspect-ratio layer containing all the foreground assets.
+
+Values are:
+
+<table>
+  <tr>
+    <th>Preset</th>
+    <th>Aspect ratio</th>
+    <th>Scaling factor</th>
+  </tr>
+  <tr>
+    <td>2021-background</td>
+    <td>69:116</td>
+    <td>1.142</td>
+  </tr>
+  <tr>
+    <td>2021-foreground</td>
+    <td>69:116</td>
+    <td>1</td>
+  </tr>
+</table>
+
+{% call callout('Tip', type='success') %}
+These presets are optimized for mobile screens in 2021. Keep an eye out for new presets as technology evolves and follow the [Web Stories roadmap](https://amp.dev/community/roadmap/?category=stories#status-updates).
+{% endcall %}
+
+### anchor [optional]
+
+Aligns aspect-ratio layers (including presets) to the border or corner specified. Use this attribute to maintain scaling across layers when position elements relative to borders or corners.
+Options: `top`, `left`, `bottom`, `right`, `top-left`, `top-right`, `bottom-left`, `bottom-right`.
+
+## Styling
+
+### Templates
+
+The following are available templates to specify for the layout of the grid layer.
+
+{% call callout('Tip', type='success') %}
+To see the layout templates in use, check out the [layouts demo on AMP By Example](https://amp.dev/documentation/examples/style-layout/amp_story_layouts/).
+{% endcall %}
+
+#### fill
+
+The `fill` template shows its first child full bleed. All other children are not shown.
+
+Names Areas: (none)
+
+Example:
+
+<amp-img alt="Fill template example: a cat.jpg image, sized to fill the entire screen" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/template-fill.png" width="145" height="255">
+  <noscript>
+    <img  alt="Fill template example: a cat.jpg image, sized to fill the entire screen" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/template-fill.png" />
+  </noscript>
+</amp-img>
+
+```html
+<amp-story-grid-layer template="fill">
+  <amp-img src="cat.jpg" alt="..."></amp-img>
+</amp-story-grid-layer>
+```
+
+#### vertical
+
+The `vertical` template lays its elements out along the y-axis. By default, its elements are aligned to the top, and can take up the entirety of the screen along the x-axis.
+
+Names Areas: (none)
+
+<amp-img alt="Illustration: element1, element2 and element3, stacked vertically" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/template-vertical.png" width="145" height="255">
+  <noscript>
+    <img alt="Illustration: element1, element2 and element3, stacked vertically" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/template-vertical.png" />
+  </noscript>
+</amp-img>
+
+```html
+<amp-story-grid-layer template="vertical">
+  <p>Element 1</p>
+  <p>Element 2</p>
+  <p>Element 3</p>
+</amp-story-grid-layer>
+```
+
+#### horizontal
+
+The `horizontal` template lays its elements out along the x-axis. By default, its elements are aligned to the start of the line and can take up the entirety of the screen along the y-axis.
+
+Names Areas: (none)
+
+<amp-img alt="Illustration: element1, element2 and element3, stacked horizontally in columns" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/template-horizontal.png" width="145" height="255">
+  <noscript>
+    <img alt="Illustration: element1, element2 and element3, stacked horizontally in columns" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/template-horizontal.png" />
+  </noscript>
+</amp-img>
+
+```html
+<amp-story-grid-layer template="horizontal">
+  <p>Element 1</p>
+  <p>Element 2</p>
+  <p>Element 3</p>
+</amp-story-grid-layer>
+```
+
+#### thirds
+
+The `thirds` template divides the screen into three equally-sized rows, and allows you to slot content into each area.
+
+Named Areas:
+
+-   `upper-third`
+-   `middle-third`
+-   `lower-third`
+
+<amp-img alt="Illustration: the screen split into three horizontal stacked areas - upper-third, middle-third, lower-third; element 3 is in the upper-third; element 2 is in the lower-third; element 1 is in the middle third" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/template-thirds.png" width="145" height="255">
+  <noscript>
+    <img alt="Illustration: the screen split into three horizontal stacked areas - upper-third, middle-third, lower-third; element 3 is in the upper-third; element 2 is in the lower-third; element 1 is in the middle third" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/template-thirds.png" />
+  </noscript>
+</amp-img>
+
+```html
+<amp-story-grid-layer template="thirds">
+  <p grid-area="middle-third">Element 1</p>
+  <p grid-area="lower-third">Element 2</p>
+  <p grid-area="upper-third">Element 3</p>
+</amp-story-grid-layer>
+```
+
+{% call callout('Note', type='note') %}
+While these templates allow you to visually arrange content on the screen, the content will still be announced by screen readers / assistive technologies in the order in which it appears in the underlying markup. Make sure that the content order in your document's markup is logical, regardless of how it will be presented visually.
+{% endcall %}
+
+### Pre templated UI
+
+#### Landscape half-half UI
 
 The landscape half-half pre templated UI will resize the `<amp-story-grid-layer>` element to take half of the screen rather than the full screen, and be positioned either on the half left or half right of the viewport. This attribute only affects landscape viewports, and is ignored on portrait viewports.
 This template makes it easier to design full bleed landscape stories: splitting the screen in two halves gives each half a portrait ratio on most devices, allowing re-using the portrait assets, design, and templates already built for portrait stories.
@@ -339,19 +384,62 @@ Note: your story needs to enable the `supports-landscape` mode to use this templ
 
 Example:
 
-<amp-img alt="Landscape half-half UI template" layout="fixed" src="https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/img/amp-story-img-video-object-fit-position.png" width="600" height="287">
+<amp-img alt="Landscape half-half UI template - in small screen/smartphone, the image is behind the content; on large screen/tablet, the image is on the left, while the content is on the right" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-img-video-object-fit-position.png" width="600" height="287">
   <noscript>
-    <img alt="Landscape half-half UI template" src="https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/img/amp-story-img-video-object-fit-position.png" />
+    <img alt="Landscape half-half UI template - in small screen/smartphone, the image is behind the content; on large screen/tablet, the image is on the left, while the content is on the right" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-img-video-object-fit-position.png" />
   </noscript>
 </amp-img>
 
 ```html
 <amp-story-page id="foo">
   <amp-story-grid-layer template="fill" position="landscape-half-left">
-    <amp-img src="cat.jpg"></amp-img>
+    <amp-img src="cat.jpg" alt="..."></amp-img>
   </amp-story-grid-layer>
   <amp-story-grid-layer template="vertical" position="landscape-half-right">
     <h2>Cat ipsum dolor sit amet...</h2>
   </amp-story-grid-layer>
 </amp-story-page>
 ```
+
+#### Modern aspect-ratio
+
+Responsive presets on grid-layers maximize usable screen space for foreground elements and scale assets consistently.
+
+```html
+<amp-story-grid-layer preset="2021-background" template="fill">
+    <amp-img src="cat.jpg" layout="fill" alt="...">
+</amp-story-grid-layer>
+<amp-story-grid-layer preset="2021-foreground">
+    <h1>This will stay consistent with the bg</h1>
+</amp-story-grid-layer>
+<amp-story-grid-layer preset="2021-foreground" anchor="bottom-left">
+    <!-- Position the icon close to the corner on all screens -->
+    <amp-img src="icon.jpg" alt="..." style="bottom: 1em; left: 1em">
+</amp-story-grid-layer>
+```
+
+{% call callout('Tip', type='success') %}
+The background preset is mostly useful for designing layouts with both background and foreground elements. If a page only contains an image or video in the background, consider using regular grid-layers for that scenario.
+{% endcall %}
+
+##### Foreground
+
+Use the `2021-foreground` preset for foreground elements. This layer will always be fully visible and expand to the borders either horizontally or vertically, maximizing the size without cropping. The attribute `anchor` can be used to pin foreground layers to the page corners or borders, such that elements can be positioned relative to those borders or corners (which is useful for logos or footnotes).
+
+##### Background
+
+Use the `2021-background` preset for the background layer. This preset covers the entire screen on most mobile phones with the background asset. It does so without letterboxing, and keeps positioning consistent with the foreground elements.
+While this technique provides the most consistent user experience, it may crop up to 7% of one or all borders of your background. Keep this in mind when designing and picking your assets.
+
+[tip type="warning"]
+This preset may show letterboxing on devices that don't have conventional phone screen sizes, such as tablets or foldable phones. You may change the background color of your pages to match the background for the best visual outcome.
+[/tip]
+
+<div layout="container" width="3" height="2">
+  <div style="width:33%;display:inline-block">
+    <amp-img src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/preset_story_scaled.gif" layout="responsive" alt="Animation showing how a perfectly scaled with a 7.2% bleed-area adapts to different screen aspect ratios, always keeping content visible" width="200" height="350"/>
+  </div>
+  <div style="width:66%;display:inline-block">
+    <amp-img src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/preset_story_anchor.gif" layout="responsive" alt="Animation showing a background that remains anchored to the bottom of the viewport, regardless of screen aspect ratio/height" width="500" height="400"/>
+  </div>
+</div>
diff --git a/extensions/amp-story/amp-story-page-attachment.md b/extensions/amp-story/amp-story-page-attachment.md
index f5dbad0aad1f6..ebfa72065abee 100644
--- a/extensions/amp-story/amp-story-page-attachment.md
+++ b/extensions/amp-story/amp-story-page-attachment.md
@@ -24,55 +24,50 @@ limitations under the License.
 
 # amp-story-page-attachment
 
+## Usage
+
 Story page attachments allow you to provide additional content in the form of a link or inline AMPHTML content to specific pages. This content can be revealed by users through a "swipe up" gesture, or a tap on the call to action element.
 A UI prompt to open the attachment will automatically be added at the bottom of every page that configured an attachment.
 
-<amp-img alt="AMP Story page attachment" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/amp-story-page-attachment.gif" width="240" height="480">
+<amp-img alt="AMP Story page attachment" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-attachment.gif" width="240" height="480">
   <noscript>
-    <img alt="AMP Story page attachment" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/amp-story-page-attachment.gif" />
+    <img alt="AMP Story page attachment" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-attachment.gif" />
   </noscript>
 </amp-img>
 
-## Placement
-
-The `<amp-story-page-attachment>` element must be the last child of `<amp-story-page>`, and must have the `layout="nodisplay"` attribute. The attachment AMPHTML content is expected to be provided inline in your AMP Story, within this `<amp-story-page-attachment>` tag.
-
-## Optional customization
-
-### `data-cta-text`
-
-Customizes the call to action text displayed on the UI prompt to open the attachment.
-Default: "Swipe up"
-
 ```html
-<amp-story-page-attachment layout="nodisplay" data-cta-text="Read more"
-  >...</amp-story-page-attachment
->
+<amp-story-page id="foo">
+  <amp-story-grid-layer template="fill">
+    <amp-img src="https://example.ampproject.org/helloworld/bg1.jpg" width="900" height="1600">
+  </amp-story-grid-layer>
+  <amp-story-page-attachment layout="nodisplay">
+    <h1>My title</h1>
+    <p>Lots of interesting text with <a href="https://example.ampproject.org">links</a>!</p>
+    <p>More text and a YouTube video!</p>
+    <amp-youtube
+        data-videoid="b4Vhdr8jtx0"
+        layout="responsive"
+        width="480" height="270">
+    </amp-youtube>
+    <p>And a tweet!</p>
+    <amp-twitter
+        data-tweetid="885634330868850689"
+        layout="responsive"
+        width="480" height="270">
+    </amp-twitter>
+  </amp-story-page-attachment>
+</amp-story-page>
 ```
 
-### `data-title`
-
-Displays the provided title in the page attachment header.
-Default: `null`
-
-```html
-<amp-story-page-attachment layout="nodisplay" data-title="My title"
-  >...</amp-story-page-attachment
->
-```
+### Placement
 
-### `theme`
+The `<amp-story-page-attachment>` element must be the last child of `<amp-story-page>`, and must have the `layout="nodisplay"` attribute. The attachment AMPHTML content is expected to be provided inline in your AMP Story, within this `<amp-story-page-attachment>` tag.
 
-Enables light or dark mode for the page attachment header and content background.
-Values: "light" (default), "dark"
+[tip type="important"]
+Both [`amp-story-cta-layer`](amp-story-cta-layer.md) and `amp-story-page-attachment` must be the last child tag of an [`amp-story-page`](amp-story-page.md). Because of this, you may include neither or one, but not both.
+[/tip]
 
-```html
-<amp-story-page-attachment layout="nodisplay" theme="dark">
-  ...
-</amp-story-page-attachment>
-```
-
-## Linked content
+### Linked content
 
 When providing a `href` attribute as page attachment, the respective URL is opened when the user activates the page attachment.
 
@@ -81,7 +76,7 @@ When providing a `href` attribute as page attachment, the respective URL is open
 </amp-story-page-attachment>
 ```
 
-## Inline content
+### Inline content
 
 As an alternative to linking a page attachment, you may also provide inline AMP HTML as the page attachment.
 
@@ -117,8 +112,6 @@ Story page attachments allow the same HTML elements as AMP Story along with addi
   <li><code>&lt;amp-gist></code></li>
   <li><code>&lt;amp-gist></code></li>
   <li><code>&lt;amp-google-document-embed></code></li>
-  <li><code>&lt;amp-google-vrview-image></code></li>
-  <li><code>&lt;amp-google-vrview-image></code></li>
   <li><code>&lt;amp-hulu></code></li>
   <li><code>&lt;amp-ima-video></code></li>
   <li><code>&lt;amp-image-slider></code></li>
@@ -158,28 +151,37 @@ Story page attachments allow the same HTML elements as AMP Story along with addi
   <li><code>&lt;amp-youtube></code></li>
 </ul>
 
-## Example
+## Attributes
+
+### `cta-text`
+
+Customizes the call to action text displayed on the UI prompt to open the attachment.
+Default: "Swipe up"
 
 ```html
-<amp-story-page id="foo">
-  <amp-story-grid-layer template="fill">
-    <amp-img src="https://example.ampproject.org/helloworld/bg1.jpg" width="900" height="1600">
-  </amp-story-grid-layer>
-  <amp-story-page-attachment layout="nodisplay">
-    <h1>My title</h1>
-    <p>Lots of interesting text with <a href="https://example.ampproject.org">links</a>!</p>
-    <p>More text and a YouTube video!</p>
-    <amp-youtube
-        data-videoid="b4Vhdr8jtx0"
-        layout="responsive"
-        width="480" height="270">
-    </amp-youtube>
-    <p>And a tweet!</p>
-    <amp-twitter
-        data-tweetid="885634330868850689"
-        layout="responsive"
-        width="480" height="270">
-    </amp-twitter>
-  </amp-story-page-attachment>
-</amp-story-page>
+<amp-story-page-attachment layout="nodisplay" cta-text="Read more"
+  >...</amp-story-page-attachment
+>
+```
+
+### `title`
+
+Displays the provided title in the page attachment header.
+Default: `null`
+
+```html
+<amp-story-page-attachment layout="nodisplay" title="My title"
+  >...</amp-story-page-attachment
+>
+```
+
+### `theme`
+
+Enables light or dark mode for the page attachment header and content background.
+Values: "light" (default), "dark"
+
+```html
+<amp-story-page-attachment layout="nodisplay" theme="dark">
+  ...
+</amp-story-page-attachment>
 ```
diff --git a/extensions/amp-story/amp-story-page.md b/extensions/amp-story/amp-story-page.md
index c0a607139d26f..787759d052624 100644
--- a/extensions/amp-story/amp-story-page.md
+++ b/extensions/amp-story/amp-story-page.md
@@ -24,25 +24,25 @@ limitations under the License.
 
 # amp-story-page
 
+## Usage
+
 The `<amp-story-page>` component represents the content to display on a single page of a story.
 
 <figure class="centered-fig">
-  <amp-anim alt="Page 1 example" width="300" height="533" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/pages-page-1.gif">
+  <amp-anim alt="Page 1 example" width="300" height="533" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/pages-page-1.gif">
   <noscript>
-    <img alt="Page 1 example" width="200" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/pages-page-1.gif" />
+    <img alt="Page 1 example" width="200" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/pages-page-1.gif" />
   </noscript>
   </amp-anim>
 </figure>
 <figure class="centered-fig">
-  <amp-anim alt="Page 2 example" width="300" height="533" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/pages-page-2.gif">
+  <amp-anim alt="Page 2 example" width="300" height="533" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/pages-page-2.gif">
   <noscript>
-    <img alt="Page 2 example" width="200" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/pages-page-2.gif" />
+    <img alt="Page 2 example" width="200" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/pages-page-2.gif" />
   </noscript>
   </amp-anim>
 </figure>
 
-## Example
-
 ```html
 <amp-story-page id="cover">
   <amp-story-grid-layer template="fill">
@@ -70,6 +70,10 @@ The `<amp-story-page>` component represents the content to display on a single p
 </amp-story-page>
 ```
 
+## Valid children
+
+The `<amp-story-page>` component contains one or more [layers](amp-story-grid-layer.md). Layers are stacked bottom-up (the first layer specified in the DOM is at the bottom; the last layer specified in the DOM is at the top).
+
 ## Attributes
 
 ### id [required]
@@ -78,15 +82,33 @@ A unique identifier for the page. Can be used for styling the page and its desce
 
 ### auto-advance-after [optional]
 
-Specifies when to auto-advance to the next page. If omitted, the page will not automatically advance. The value for `auto-advance-after` must be either:
+Specifies when to auto-advance to the next page. If omitted, the page will not automatically advance. The value for `auto-advance-after` must be either a specified amount of time, or the `id` of an [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) or video-interface.
 
-- A positive amount of [time](https://developer.mozilla.org/en-US/docs/Web/CSS/time) to wait before automatically advancing to the next page
-- An ID of an [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) or video-interface video whose completion will trigger the auto-advance
+#### Time
 
-For example:
+Auto-advance to the next story page after a specified amount of [time](https://developer.mozilla.org/en-US/docs/Web/CSS/time). The time must be positive.
+
+```html
+<amp-story-page id="tokyo" auto-advance-after="1s">
+  ...
+</amp-story-page>
+```
+
+#### Element `id`
+
+You can auto-advance to the next story page when a video completes. Point the `auto-advance-after` attribute to the id of an [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) or video-interface that displays the video. This includes AMP specific components, like [`amp-video`](../amp-video/amp-video.md).
 
 ```html
-<amp-story-page id="tokyo" auto-advance-after="1s"></amp-story-page>
+<amp-story-page id="tokyo" auto-advance-after="video1">
+  ...
+  	<amp-video autoplay id="video1"
+    width="720" height="1280"
+    poster="todo.jpg"
+    layout="responsive">
+    <source src="video1.mp4" type="video/mp4">
+    </amp-video>
+  ...
+</amp-story-page>
 ```
 
 ### background-audio [optional]
@@ -101,7 +123,3 @@ For example:
   background-audio="./media/switzerland.mp3"
 ></amp-story-page>
 ```
-
-## Children (of amp-story-page)
-
-The `<amp-story-page>` component contains one or more [layers](amp-story-grid-layer.md). Layers are stacked bottom-up (the first layer specified in the DOM is at the bottom; the last layer specified in the DOM is at the top).
diff --git a/extensions/amp-story/amp-story.md b/extensions/amp-story/amp-story.md
index 095495fe4f352..7edba02aaea9c 100644
--- a/extensions/amp-story/amp-story.md
+++ b/extensions/amp-story/amp-story.md
@@ -24,12 +24,12 @@ limitations under the License.
 
 # amp-story
 
-[Web stories](https://amp.dev/documentation/guides-and-tutorials/start/create_successful_stories/?format=stories) are an immersive, tappable and easily shareable storytelling format. Web stories are built using the AMP Framework. The `amp-story` component provides the AMP story subsect of AMP. It is the base technology for web stories.
+[Web stories](https://amp.dev/documentation/guides-and-tutorials/start/create_successful_stories/?format=stories) are an immersive, tappable and easily shareable storytelling format. Web stories are built using the AMP Framework. The `amp-story` component provides the AMP story subset of AMP. It is the base technology for web stories.
 
 <figure class="centered-fig">
-  <amp-anim width="300" height="533" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/amp-story.gif">
+  <amp-anim width="300" height="533" layout="fixed" alt="AMP Story Example" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story.gif">
     <noscript>
-    <img alt="AMP Story Example" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/amp-story.gif" />
+    <img alt="AMP Story Example" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story.gif" />
   </noscript>
   </amp-anim>
 </figure>
@@ -47,11 +47,11 @@ As of 2018-07-16, version 0.1 is considered deprecated, and will be deleted on 2
 
 ## AMP story format
 
-An [AMP story](#story:-amp-story) is a complete AMP HTML document that is comprised of [pages](#pages:-amp-story-page), within the pages are [layers](#layers:-amp-story-grid-layer), within the layers are AMP & HTML elements, like media, analytics, text, and so on.
+An [AMP story](#story:-amp-story) is a complete AMP HTML document that is comprised of [pages](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/amp-story-page.md), within the pages are [layers](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/amp-story-grid-layer.md), within the layers are AMP & HTML elements, like media, analytics, text, and so on.
 
-<amp-img alt="AMP story tag hierarchy" layout="responsive" src="https://github.com/ampproject/docs/raw/master/assets/img/docs/amp-story-tag-hierarchy.png" width="591" height="358">
+<amp-img alt="An illustration of the nested markup structure of an amp-story: an amp-story element, which contains two amp-story-page blocks, which in turn contain an amp-story-grid-layer, which then contains the actual content elements" layout="responsive" src="https://github.com/ampproject/amp.dev/raw/legacy-production/assets/img/docs/amp-story-tag-hierarchy.png" width="591" height="358">
   <noscript>
-    <img alt="AMP story tag hierarchy" src="https://github.com/ampproject/docs/raw/master/assets/img/docs/amp-story-tag-hierarchy.png" />
+    <img alt="An illustration of the nested markup structure of an amp-story: an amp-story element, which contains two amp-story-page blocks, which in turn contain an amp-story-grid-layer, which then contains the actual content elements" src="https://github.com/ampproject/amp.dev/raw/legacy-production/assets/img/docs/amp-story-tag-hierarchy.png" />
   </noscript>
 </amp-img>
 
@@ -149,6 +149,7 @@ The following markup is a decent starting point or boilerplate. Copy this and sa
             src="https://example.ampproject.org/helloworld/bg1.jpg"
             width="900"
             height="1600"
+            alt=""
           >
           </amp-img>
         </amp-story-grid-layer>
@@ -162,6 +163,7 @@ The following markup is a decent starting point or boilerplate. Copy this and sa
             src="https://example.ampproject.org/helloworld/bg2.gif"
             width="900"
             height="1600"
+            alt=""
           >
           </amp-img>
         </amp-story-grid-layer>
@@ -169,8 +171,6 @@ The following markup is a decent starting point or boilerplate. Copy this and sa
           <h1>The End</h1>
         </amp-story-grid-layer>
       </amp-story-page>
-      <amp-story-bookend src="bookendv1.json" layout="nodisplay">
-      </amp-story-bookend>
     </amp-story>
   </body>
 </html>
@@ -193,9 +193,9 @@ The AMP story HTML format follows the [same markup requirements as a valid AMP H
 The `amp-story` component represents an entire story. The component itself implements the UI shell, including handling gestures and navigation, and inserting the application shell UI (controls, progress bar, etc).
 
 <figure class="centered-fig">
-  <amp-anim alt="amp-story example" width="300" height="533" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/amp-story.gif">
+  <amp-anim alt="amp-story example" width="300" height="533" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story.gif">
     <noscript>
-    <img alt="amp-story example" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/amp-story.gif" />
+    <img alt="amp-story example" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story.gif" />
   </noscript>
   </amp-anim>
 </figure>
@@ -216,66 +216,12 @@ The `amp-story` component represents an entire story. The component itself imple
   <amp-story-page>[...]</amp-story-page>
   <amp-story-page>[...]</amp-story-page>
   <amp-story-page>[...]</amp-story-page>
-  <amp-story-bookend src="./related.json"></amp-story-bookend>
 </amp-story>
 ```
 
-### Attributes
-
-<table>
-  <tr id="standalone">
-    <td width="40%"><strong>standalone [required]</strong></td>
-    <td>Identifies that the AMP document is a story.</td>
-  </tr>
-  <tr id="title">
-    <td width="40%"><strong>title [required]</strong></td>
-    <td>The title of the story.</td>
-  </tr>
-  <tr id="publisher">
-    <td width="40%"><strong>publisher [required]</strong></td>
-    <td>The name of the story's publisher.</td>
-  </tr>
-  <tr id="publisher-logo-src">
-    <td width="40%"><strong>publisher-logo-src [required]</strong></td>
-    <td>A URL to the story publisher's logo in square format (1x1 aspect ratio). For example <code>publisher-logo-src="https://example.com/logo/1x1.png"</code>, where 1x1.png is a 96x96 px logo.</td>
-  </tr>
-  <tr id="poster-portrait-src">
-    <td width="40%"><strong>poster-portrait-src [required]</strong></td>
-    <td>A URL to the <a href="#poster-guidelines-(for-poster-portrait-src,-poster-landscape-src,-and-poster-square-src)">story poster</a> in portrait format (3x4 aspect ratio).</td>
-  </tr>
-  <tr id="poster-square-src">
-    <td width="40%"><strong>poster-square-src [optional]</strong></td>
-    <td>A URL to the <a href="#poster-guidelines-(for-poster-portrait-src,-poster-landscape-src,-and-poster-square-src)">story poster</a> in square format (1x1 aspect ratio).</td>
-  </tr>
-  <tr id="poster-landscape-src">
-    <td width="40%"><strong>poster-landscape-src [optional]</strong></td>
-    <td>A URL to the <a href="#poster-guidelines-(for-poster-portrait-src,-poster-landscape-src,-and-poster-square-src)">story poster</a> in landscape format (4x3 aspect ratio).</td>
-  </tr>
-  <tr id="supports-landscape">
-    <td width="40%"><strong>supports-landscape [optional]</strong></td>
-    <td>Enables landscape orientation support on mobile devices and a full bleed landscape experience on desktop devices.</td>
-  </tr>
-  <tr id="background-audio">
-    <td width="40%"><strong>background-audio [optional]</strong></td>
-    <td>A URL to an audio file that plays throughout the story.</td>
-  </tr>
-  <tr id="live-story">
-    <td width="40%"><strong>live-story [optional]</strong></td>
-    <td>Enables the <a href="#Live-story">Live story</a> functionality.</td>
-  </tr>
-  <tr id="live-story-disabled">
-    <td width="40%"><strong>live-story-disabled [optional]</strong></td>
-    <td>Disables the <a href="#Live-story">Live story</a> functionality.</td>
-  </tr>
-  <tr id="data-poll-interval">
-    <td width="40%"><strong>data-poll-interval [optional]</strong></td>
-    <td>Used with the <code>live-story</code> attribute. Time interval (in milliseconds) between checks for new content. If no <code>data-poll-interval</code> is provided it with default to the 15000 millisecond minimum. A value under 15000 milliseconds is invalid.</td>
-  </tr>
-</table>
-
 ### Metadata guidelines
 
-Metadata attributes display a preview of the story across the Web Stories ecosystem, such as rendering an engaging preview link in the bookend of a related stories. These attributes future-proof your story for rich, embedded experience Web Stories surfaces to come.
+Metadata attributes display a preview of the story across the Web Stories ecosystem, such as rendering an engaging preview link. These attributes future-proof your story for rich, embedded experience Web Stories surfaces to come.
 
 These metadata attributes supplement and do not replace any Structured Data (e.g. JSON-LD) on the page. We still recommend adding [Structured Data to your Web Stories](https://developers.google.com/search/docs/guides/enable-web-stories#implement).
 
@@ -283,9 +229,9 @@ These metadata attributes supplement and do not replace any Structured Data (e.g
 
 These guidelines apply to the publisher logo image:
 
-- Provide a raster file, such as `.jpg`, `.png`, or `.gif`. Avoid vector files, such as `.svg` or `.eps`.
-- Avoid animated images, such as animated gifs.
-- Image logo should be legible on the background color.
+-   Provide a raster file, such as `.jpg`, `.png`, or `.gif`. Avoid vector files, such as `.svg` or `.eps`.
+-   Avoid animated images, such as animated gifs.
+-   Image logo should be legible on the background color.
 
 <table>
   <tr>
@@ -293,7 +239,7 @@ These guidelines apply to the publisher logo image:
       <amp-img alt="Logo with blue text on white background"
           layout="fixed"
           width="107" height="112"
-          src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/publisher-logo-1.png" >
+          src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/publisher-logo-1.png" >
         <noscript>
           <img alt="Logo with blue text on white background" src="img/publisher-logo-1.png" />
         </noscript>
@@ -304,7 +250,7 @@ These guidelines apply to the publisher logo image:
       <amp-img alt="Logo with white text on blue background"
           layout="fixed"
           width="107" height="101"
-          src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/publisher-logo-2.png" >
+          src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/publisher-logo-2.png" >
         <noscript>
           <img alt="Logo with white text on blue background" src="img/publisher-logo-2.png" />
         </noscript>
@@ -315,7 +261,7 @@ These guidelines apply to the publisher logo image:
       <amp-img alt="Logo with blue text on blue background"
           layout="fixed"
           width="103" height="102"
-          src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/publisher-logo-3.png" >
+          src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/publisher-logo-3.png" >
         <noscript>
           <img alt="Logo with blue text on blue background" src="img/publisher-logo-3.png" />
         </noscript>
@@ -325,50 +271,61 @@ These guidelines apply to the publisher logo image:
   </tr>
 </table>
 
-- Logos should be at least 96x96 pixels and a perfect square.
-- The background should not be transparent.
-- Use one logo per brand that is consistent across AMP stories.
+-   Logos should be at least 96x96 pixels and a perfect square.
+-   The background should not be transparent.
+-   Use one logo per brand that is consistent across AMP stories.
 
 #### Poster guidelines (for `poster-portrait-src`, `poster-landscape-src`, and `poster-square-src`)
 
 These guidelines apply to the story poster image(s):
 
-- The poster image should be representative of the entire AMP story.
-- The poster image should be visible to the user when the AMP story begins. To accommodate sizing, cropping or minor styling changes or preview purposes, the image file URL used in the metadata does not need to be an exact match to the URL on the first page of the story.
-- Provide a raster file, such as `.jpg`, `.png`, or `.gif`. Avoid vector files, such as `.svg` or `.eps`.
-- The poster image should be in 3x4 aspect ratio for portrait, 4x3 for landscape, and 1x1 for square.
-- If the poster image is derived from a frame in a video, the thumbnail should be representative of the video. For example, the first frame in a video is often not representative.
-- Each poster image should meet the recommended minimium size:
-  - Portrait: 640px x 853px
-  - Landscape: 853px x 640px
-  - Square: 640px x 640px
+-   The poster image should be representative of the entire AMP story.
+-   The poster image should be visible to the user when the AMP story begins. To accommodate sizing, cropping or minor styling changes or preview purposes, the image file URL used in the metadata does not need to be an exact match to the URL on the first page of the story.
+-   Provide a raster file, such as `.jpg`, `.png`, or `.gif`. Avoid vector files, such as `.svg` or `.eps`.
+-   The poster image should be in 3x4 aspect ratio for portrait, 4x3 for landscape, and 1x1 for square.
+-   If the poster image is derived from a frame in a video, the thumbnail should be representative of the video. For example, the first frame in a video is often not representative.
+-   Each poster image should meet the recommended minimum size:
+    -   Portrait: 640px x 853px
+    -   Landscape: 853px x 640px
+    -   Square: 640px x 640px
+
+### Story generator meta tags
+
+Optional HTML meta tags can be used to indicate which Story generator the document was created with. There are two meta tags, respectively indicating the generator name and its version.
+
+```html
+<meta name="amp-story-generator-name" content="Story generator name" />
+<meta name="amp-story-generator-version" content="0.1" />
+```
 
 ### Landscape orientation and full bleed desktop experience opt in
 
 If the `supports-landscape` attribute is specified on the `<amp-story>` element, it will:
 
-- Allow the story to be seen when a mobile device is held in a landscape orientation.
-- Change the desktop experience to an immersive full bleed mode, replacing the default three portrait panels experience.
+-   Allow the story to be seen when a mobile device is held in a landscape orientation.
+-   Change the desktop experience to an immersive full bleed mode, replacing the default three portrait panels experience.
+
+While this is currently opt-in and optional, we strongly recommend making sure that users on mobile devices are able to view stories in whatever orientation best suits their needs - otherwise, they will simply be presented with a "The page is best viewed in portrait mode" message.
 
 Usage: `<amp-story ... supports-landscape>...</amp-story>`
 
 <figure class="centered-fig">
   <span class="special-char">Before:</span>
-  <amp-anim alt="Desktop three panels experience" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/amp-story-desktop-three-panels.gif" width="400" height="299">
-  <noscript><img width="400" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/amp-story-desktop-three-panels.gif" /></noscript>
+  <amp-anim alt="Desktop three panels experience" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/amp-story-desktop-three-panels.gif" width="400" height="299">
+  <noscript><img width="400" alt="Desktop three panels experience" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/amp-story-desktop-three-panels.gif" /></noscript>
   </amp-anim>
   <span class="special-char">After:</span>
-  <amp-anim alt="Desktop full bleed experience" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/amp-story-desktop-full-bleed.gif" width="400" height="299">
-  <noscript><img width="400" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/amp-story-desktop-full-bleed.gif" /></noscript>
+  <amp-anim alt="Desktop full bleed experience" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/amp-story-desktop-full-bleed.gif" width="400" height="299">
+  <noscript><img width="400" alt="Desktop full bleed experience" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/amp-story-desktop-full-bleed.gif" /></noscript>
   </amp-anim>
 </figure>
 
 ### Live story
 
 <figure class="centered-fig">
-  <amp-anim alt="Live story example" width="300" height="533" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/live-stories-gif.gif">
+  <amp-anim alt="Live story example" width="300" height="533" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/live-stories-gif.gif">
   <noscript>
-    <img alt="Live story example" width="200" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/live-stories-gif.gif" />
+    <img alt="Live story example" width="200" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/live-stories-gif.gif" />
   </noscript>
   </amp-anim>
 </figure>
@@ -389,7 +346,7 @@ In most implementations for live blogs, content is either pushed by the server t
 
 This means that publishers of stories do not need to set up a JSON endpoint or push mechanism for this functionality to work.
 
-Content is updated by publishing to the same URL with valid `<amp-story>` markup. The content is pulled into the user's client instance during the next poll. Poll intervals are configurable using the [`data-poll-interval`](#data-poll-interval) attribute.
+Content is updated by publishing to the same URL with valid `<amp-story>` markup. The content is pulled into the user's client instance during the next poll. Poll intervals are configurable using the [`data-poll-interval`](<#data-poll-interval-(optional)>) attribute.
 
 #### Stop polling
 
@@ -397,12 +354,12 @@ As long as the `live-story` attribute is present on the `<amp-story>` element, t
 
 #### Usage
 
-- Specify an `id` on the `<amp-story>` element.
-- Add the `live-story` attribute to the `<amp-story>` element.
-- [Optional] Add the [`data-poll-interval`](#data-poll-interval) attribute to the `<amp-story>` element to specify a time interval for checking for new updates.
-- [Optional] When finishing the live broadcast, add the [`live-story-disabled`](#live-story-disabled) attribute to the `<amp-story>` element to disable the polling.
-- On each `<amp-story-page>`:
-  - Specify a `data-sort-time` attribute with a valid value. This is a timestamp used for sorting the pages. Higher timestamps will be inserted after older page entries. We recommend using [Unix time](https://www.unixtimestamp.com/).
+-   Specify an `id` on the `<amp-story>` element.
+-   Add the `live-story` attribute to the `<amp-story>` element.
+-   [Optional] Add the [`data-poll-interval`](<#data-poll-interval-(optional)>) attribute to the `<amp-story>` element to specify a time interval for checking for new updates.
+-   [Optional] When finishing the live broadcast, add the [`live-story-disabled`](<#live-story-disabled-(optional)>) attribute to the `<amp-story>` element to disable the polling.
+-   On each `<amp-story-page>`:
+    -   Specify a `data-sort-time` attribute with a valid value. This is a timestamp used for sorting the pages. Higher timestamps will be inserted after older page entries. We recommend using [Unix time](https://www.unixtimestamp.com/).
 
 ```html
 <amp-story id="story1" live-story ...>
@@ -414,7 +371,7 @@ As long as the `live-story` attribute is present on the `<amp-story>` element, t
 
 ### Children (of amp-story)
 
-The `<amp-story>` component contains one or more [`<amp-story-page>`](#pages:-amp-story-page) components, containing each of the individual screens of the story. The first page specified in the document order is the first page shown in the story.
+The `<amp-story>` component contains one or more [`<amp-story-page>`](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/amp-story-page.md) components, containing each of the individual screens of the story. The first page specified in the document order is the first page shown in the story.
 
 #### Optional customization
 
@@ -426,16 +383,16 @@ This attribute accepts any value accepted by the `object-position` CSS property.
 
 Example:
 
-<amp-img alt="Custom crop on amp-img and amp-video assets" layout="fixed" src="https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/img/amp-story-object-position.gif" width="600" height="689">
+<amp-img alt="Custom crop on amp-img and amp-video assets" layout="fixed" src="https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/img/amp-story-object-position.gif" width="600" height="689">
   <noscript>
-    <img alt="Custom crop on amp-img and amp-video assets" src="https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/img/amp-story-object-position.gif" />
+    <img alt="Custom crop on amp-img and amp-video assets" src="https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/img/amp-story-object-position.gif" />
   </noscript>
 </amp-img>
 
 This same image can be used for both mobile portrait and landscape desktop using the `object-position` this way:
 
 ```html
-<amp-img src="cat.jpg" object-position="75% 40%"></amp-img>
+<amp-img src="cat.jpg" alt="..." object-position="75% 40%"></amp-img>
 ```
 
 ##### `data-text-background-color`
@@ -443,9 +400,9 @@ This same image can be used for both mobile portrait and landscape desktop using
 The `data-text-background-color` attribute highlights the text of the element with a specified color. To highlight the entire block, add this attribute directly to the text element. To only highlight the text, add the attribute and text to an inner <span>. Note that works anywhere inside an `<amp-story-page>`, not just in `<amp-story-grid-layer>`.
 
 Example:
-<amp-img alt="text background color only example" layout="fixed" src="https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/img/text-background-color-ex-1.png" width="145" height="255">
+<amp-img alt="text background color only example" layout="fixed" src="https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/img/text-background-color-ex-1.png" width="145" height="255">
 <noscript>
-<img alt="text background color only example" src="https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/img/text-background-color-ex-1.png" />
+<img alt="text background color only example" src="https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/img/text-background-color-ex-1.png" />
 </noscript>
 </amp-img>
 
@@ -461,9 +418,9 @@ Example:
 ```
 
 Example:
-<amp-img alt="text background color full example" layout="fixed" src="https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/img/text-background-color-ex-2.png" width="145" height="255">
+<amp-img alt="text background color full example" layout="fixed" src="https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/img/text-background-color-ex-2.png" width="145" height="255">
 <noscript>
-<img alt="text background color full example" src="https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/img/text-background-color-ex-2.png" />
+<img alt="text background color full example" src="https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/img/text-background-color-ex-2.png" />
 </noscript>
 </amp-img>
 
@@ -486,8 +443,8 @@ Example:
 
 <figure class="centered-fig">
   <span class="special-char">Example:</span>
-  <amp-anim alt="Embedded component example" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/amp-story-tooltip.gif" width="300" height="553">
-  <noscript><img width="300" src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-story/img/amp-story-tooltip.gif" /></noscript>
+  <amp-anim alt="Embedded component example" layout="flex-item" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/amp-story-tooltip.gif" width="300" height="553">
+  <noscript><img width="300"  alt="Embedded component example" src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-story/img/amp-story-tooltip.gif" /></noscript>
   </amp-anim>
 </figure>
 
@@ -506,6 +463,11 @@ Example:
 
 We support inline links `<a>` as a descendant of `amp-story-grid-layer`. Whenever a link is tapped a tooltip will be shown - deferring the corresponding action until the user taps again in the tooltip.
 
+Please note the following guidelines for including links in your amp-story:
+
+-   Parts of links that are too far to the left or right edge of a story page will yield to navigation.
+-   Links that occupy too much of the page area will be ignored for navigation.
+
 #### Customizing tooltip for links or interactive components
 
 You can customize the contents of the tooltip displayed on top of a user interactive element by specifying the following attributes. If they are not specified, a fallback value will be provided automatically.
@@ -531,12 +493,116 @@ Example:
 </a>
 ```
 
+#### Integration with sidebar for stories
+
+`amp-story` supports the use of `amp-sidebar` with a few limitations and caveats. See the [Sidebar for Stories documentation](https://amp.dev/documentation/components/amp-sidebar?format=websites#sidebar-for-stories) for more details.
+
+By using branching and `amp-sidebar`, you can create stories that have a table of contents. To do this, make use of URL fragment parameter.
+
+The following example demonstrates a table of contents inside of an `amp-sidebar`. The table of contents has a link to a specific story page, and and out-link to a different website.
+
+```html
+<amp-story id="story" standalone>
+  <amp-sidebar id="sidebar1" layout="nodisplay">
+    <ul>
+      <li><a href="#page=bacon-page"> Bacon page </a></li>
+      <li><a href="https://www.amp.dev"> External Link </a></li>
+    </ul>
+  </amp-sidebar>
+
+  <amp-story-page id="bacon-page">
+    <amp-story-grid-layer>
+      <p>Bacon, of course!</p>
+    </amp-story-grid-layer>
+  </amp-story-page>
+  ...
+</amp-story>
+```
+
+#### Other components usable in AMP stories
+
+The following are other components usable in AMP stories that require some story-specific caveats.
+
+-   [amp-consent](https://amp.dev/documentation/components/amp-consent#prompt-ui-for-stories)
+-   [amp-sidebar](https://amp.dev/documentation/components/amp-sidebar#sidebar-for-stories)
+-   [amp-twitter](https://amp.dev/documentation/components/amp-twitter)
+
+For more generally usable components see the [list of allowed children](https://amp.dev/documentation/components/amp-story#children).
+
+## Attributes
+
+### standalone (required)
+
+Identifies that the AMP document is a story.
+
+### title (required)
+
+The title of the story.
+
+### publisher (required)
+
+The name of the story's publisher.
+
+### publisher-logo-src (required)
+
+A URL to the story publisher's logo in square format (1x1 aspect ratio). For example `publisher-logo-src="https://example.com/logo/1x1.png"`, where 1x1.png is a 96x96 px logo.
+
+### poster-portrait-src (required)
+
+A URL to the [story poster](<#poster-guidelines-(for-poster-portrait-src,-poster-landscape-src,-and-poster-square-src)>) in portrait format (3x4 aspect ratio).
+
+### poster-square-src (optional)
+
+A URL to the [story poster](<#poster-guidelines-(for-poster-portrait-src,-poster-landscape-src,-and-poster-square-src)>) in square format (1x1 aspect ratio).
+
+### poster-landscape-src (optional)
+
+A URL to the [story poster](<#poster-guidelines-(for-poster-portrait-src,-poster-landscape-src,-and-poster-square-src)>) in landscape format (4x3 aspect ratio).
+
+### entity (optional)
+
+The name of the story's creating entity. For example: `entity="User"`, where User created the story on the publisher's platform.
+
+### entity-logo-src (optional)
+
+A URL to the story creating entity's logo in square format (1x1 aspect ratio). For example `entity-logo-src="https://example.com/logo/1x1.png"`, where 1x1.png is a 96x96 px logo.
+
+### entity-url (optional)
+
+A URL to the story creating entity's platform. For example `entity-url="https://example.com/profile/user"`, which links to User's profile on the publisher's platform.
+
+### supports-landscape (optional)
+
+Enables landscape orientation support on mobile devices and a full bleed landscape experience on desktop devices.
+
+### background-audio (optional)
+
+A URL to an audio file that plays throughout the story.
+
+### live-story (optional)
+
+Enables the [Live story](#Live-story) functionality.
+
+### live-story-disabled (optional)
+
+Disables the [Live story](#Live-story) functionality.
+
+### data-poll-interval (optional)
+
+Used with the `live-story` attribute. Time interval (in milliseconds) between checks for new content. If no `data-poll-interval` is provided it with default to the 15000 millisecond minimum. A value under 15000 milliseconds is invalid.
+
 ## Animations
 
 Every element inside an `<amp-story-page>` can have an entrance animation.
 
 You can configure animations by specifying a set of [animation attributes](#animation-attributes) on the element; no additional AMP extensions or configuration is needed.
 
+You can also create more advanced animations by using the `<amp-story-animation>` component. Read more on the [Advanced animations](#Advanced-animations).
+
+{% call callout('Note', type='note') %}
+Animations can help make your Web Story more visually exciting and engaging, but use them sparingly. Some users may find long, continuous animations distracting. Other users may have motion sensitivity and be adversely affected by excessive use of motion and parallax effects.
+{% endcall %}
+
 ### Animation effects
 
 The following animation effects are available as presets for AMP stories:
@@ -544,17 +610,19 @@ The following animation effects are available as presets for AMP stories:
 | Preset name       | Default duration (ms) | Default delay (ms) |
 | ----------------- | --------------------- | ------------------ |
 | `drop`            | 1600                  | 0                  |
-| `fade-in`         | 500                   | 0                  |
-| `fly-in-bottom`   | 500                   | 0                  |
-| `fly-in-left`     | 500                   | 0                  |
-| `fly-in-right`    | 500                   | 0                  |
-| `fly-in-top`      | 500                   | 0                  |
-| `pulse`           | 500                   | 0                  |
-| `rotate-in-left`  | 700                   | 0                  |
-| `rotate-in-right` | 700                   | 0                  |
+| `fade-in`         | 600                   | 0                  |
+| `fly-in-bottom`   | 600                   | 0                  |
+| `fly-in-left`     | 600                   | 0                  |
+| `fly-in-right`    | 600                   | 0                  |
+| `fly-in-top`      | 600                   | 0                  |
+| `pulse`           | 600                   | 0                  |
+| `rotate-in-left`  | 1000                  | 0                  |
+| `rotate-in-right` | 1000                  | 0                  |
+| `scale-fade-down` | 600                   | 0                  |
+| `scale-fade-up`   | 600                   | 0                  |
 | `twirl-in`        | 1000                  | 0                  |
-| `whoosh-in-left`  | 500                   | 0                  |
-| `whoosh-in-right` | 500                   | 0                  |
+| `whoosh-in-left`  | 600                   | 0                  |
+| `whoosh-in-right` | 600                   | 0                  |
 | `pan-left`        | 1000                  | 0                  |
 | `pan-right`       | 1000                  | 0                  |
 | `pan-down`        | 1000                  | 0                  |
@@ -568,7 +636,7 @@ See a [live demo of all the AMP story animations](https://amp.dev/documentation/
 
 ### Animation attributes
 
-##### animate-in [required]
+#### animate-in [required]
 
 Use this attribute to specify the name of the entrance [animation preset](#animation-effects).
 
@@ -580,7 +648,7 @@ _Example_: A heading flies in from left of the page.
 </h2>
 ```
 
-##### animate-in-duration [optional]
+#### animate-in-duration [optional]
 
 Use this attribute to specify the duration of the entrance animation, in seconds or milliseconds (e.g., 0.2s or 200ms). The default duration depends on the animation preset you specified.
 
@@ -592,7 +660,7 @@ _Example_: A heading flies in from left of the page and the animation finishes w
 </h2>
 ```
 
-##### animate-in-timing-function [optional]
+#### animate-in-timing-function [optional]
 
 Use this attribute to specify the timing function (animation curve) of the entrance animation. The default timing function depends on the animation preset you specified.
 
@@ -607,7 +675,7 @@ _Example_: A heading flies in from left of the page and the animation decelerate
 </h2>
 ```
 
-##### animate-in-delay [optional]
+#### animate-in-delay [optional]
 
 Use this attribute to specify the delay before starting the animation. The value must be greater than or equal to 0, in seconds or milliseconds (for example, 0.2s or 200ms). The default delay depends on the animation preset you specified.
 
@@ -623,7 +691,7 @@ _Example_: After 0.4 seconds, a heading flies in from the left of the page and c
 The animation delay is not guaranteed to be exact. Additional delays can be caused by loading the `amp-animation` extension in the background when the first animated element has been scanned. The attribute contract is defined as _delay this animation for at least N milliseconds_. This applies to all elements including those with a delay of 0 seconds.
 {% endcall %}
 
-##### animate-in-after [optional]
+#### animate-in-after [optional]
 
 Use this attribute to chain or sequence animations (for example, animation2 starts after animation1 is complete). Specify the ID of the animated element that this element's animation will follow. The element must be present on the same `<amp-story-page>`. The delay is applied after the previous element's animation has finished. For further details, see the [Sequencing animations](#sequencing-animations) section below.
 
@@ -643,7 +711,7 @@ For example, in the following code, `object2` animates in after `object1` comple
 </amp-story-page>
 ```
 
-##### scale-start, scale-end [optional, only works with `zoom-in` & `zoom-out` animations]
+#### scale-start, scale-end [optional, only works with `zoom-in` & `zoom-out` animations]
 
 Use these two attributes to further specify the parameters of your zoom-in and zoom-out animations. The value must be greater than or equal to 0, and decimals are allowed. The default will be scale-start: 1 and scale-start: 3 for zoom-in, and the inverse for zoom-out.
 
@@ -659,11 +727,12 @@ _Example_: An image zooming-in from 2x to 5x its size over 4 seconds.
   src="https://picsum.photos/720/320?image=1026"
   width="720"
   height="320"
+  alt="..."
 >
 </amp-img>
 ```
 
-##### translate-x [optional, only works with `pan-left` & `pan-right` animations]
+#### translate-x [optional, only works with `pan-left` & `pan-right` animations]
 
 Use this attribute to specify the horizontal panning of your image in a pan-left/pan-right animation. The value must be greater than or equal to 0 in pixels. The default value will pan the whole width of the specified image.
 
@@ -678,11 +747,12 @@ _Example_: An image panning 200px to the left over 10 seconds.
   src="https://picsum.photos/720/320?image=1026"
   width="720"
   height="320"
+  alt="..."
 >
 </amp-img>
 ```
 
-##### translate-y [optional, only works with `pan-up` & `pan-down` animations]
+#### translate-y [optional, only works with `pan-up` & `pan-down` animations]
 
 Use this attribute to specify the vertical panning of your image in a pan-up/pan-down animation. The value must be greater than or equal to 0 in pixels. The default value will pan the whole height of the specified image.
 
@@ -697,6 +767,7 @@ _Example_: An image panning 50px down over 15 seconds.
   src="https://picsum.photos/720/320?image=1026"
   width="720"
   height="320"
+  alt="..."
 >
 </amp-img>
 ```
@@ -760,97 +831,86 @@ You can apply multiple entrance animations on one element (for example, an eleme
 If a composed animation is supposed to start after the end of a separate element's animation, make sure that all nested elements that compose the animation have the attribute `animate-in-after` set to the same `id`.
 {% endcall %}
 
-## Branching
+## Advanced animations
 
-Branching enables the identification of individual story pages. Users can jump around within a story, start a story from somewhere other than the beginning, and share specific story pages. An example is a table of contents or multiple choice buttons.
+You can create more advanced animations by using the `<amp-story-animation>` component. It lets you create [`<amp-animation>`](https://github.com/ampproject/amphtml/blob/main/extensions/amp-animation/amp-animation.md)-type animations inside your Web Story.
 
-Fragment parameters in the URL supports this feature.
-
-### URL Fragment Parameter
+To use it, add a `<amp-story-animation layout="nodisplay" trigger="visibility">` tag under your `<amp-story-page>` with a child `<script type="application/json">` containing the JSON configuration describing your animation. In the following example, the "rotate with amp-story-animation" text will be rotated for 1 second using `<amp-story-animation>`:
 
-With branching, AMP Stories now supports URLs in the form of:
+```html
+...
+      <amp-story-page id="cover">
+        <amp-story-grid-layer template="vertical">
+          <strong class="animate">rotate with amp-story-animation</strong>
+        </amp-story-grid-layer>
 
+        <amp-story-animation layout="nodisplay" trigger="visibility">
+          <script type="application/json">
+            {
+              "selector": ".animate",
+              "duration": "1s",
+              "keyframes": {"transform": "rotate(360deg)"}
+            }
+          </script>
+        </amp-story-animation>
+      </amp-story-page>
 ```
-https://www.mydomain.com/good-story/#page=<page-id>
-```
-
-where `page-id` refers to the unique id of an `amp-story-page`. You can also use the fragment parameter and the `page-id` value like an anchor link in some use cases. See [Integration with Sidebar for Stories](#integration-with-sidebar-for-stories) for an example.
 
-## Integration with Sidebar for Stories
-
-`amp-story` supports the use of `amp-sidebar` with a few limitations and caveats. See the [Sidebar for Stories documentation](https://amp.dev/documentation/components/amp-sidebar?format=websites#sidebar-for-stories) for more details.
-
-By using branching and `amp-sidebar`, you can create stories that have a table of contents. To do this, make use of URL fragment parameter.
+For more details on the animation configuration and options, please refer to the [`<amp-animation> docs`](https://github.com/ampproject/amphtml/blob/main/extensions/amp-animation/amp-animation.md)
 
-The following example demonstrates a table of contents inside of an `amp-sidebar`. The table of contents has a link to a specific story page, and and out-link to a different website.
-
-```html
-<amp-story id="story" standalone>
-  <amp-sidebar id="sidebar1" layout="nodisplay">
-    <ul>
-      <li><a href="#page=bacon-page"> Bacon page </a></li>
-      <li><a href="https://www.amp.dev"> External Link </a></li>
-    </ul>
-  </amp-sidebar>
+## Branching
 
-  <amp-story-page id="bacon-page">
-    <amp-story-grid-layer>
-      <p>Bacon, of course!</p>
-    </amp-story-grid-layer>
-  </amp-story-page>
-  ...
-</amp-story>
-```
+Branching enables the identification of individual story pages. Users can jump around within a story, start a story from somewhere other than the beginning, and share specific story pages. An example is a table of contents or multiple choice buttons.
 
-### Manipulating Navigation
+Fragment parameters in the URL supports this feature.
 
 Branching allows navigation manipulation within a story. The story tracks navigation. If a user navigates from `page-1` to `page-5` and then `page-6`, navigating backwards will follow the exact path. The skipped pages are not exposed to the user when navigating backwards, it will follow `page-6`, to `page-5`, and ends back at `page-1`.
 
-## Other components usable in AMP stories
-
-The following are other components usable in AMP stories that require some story-specific caveats.
-
-- [amp-consent](https://amp.dev/documentation/components/amp-consent#prompt-ui-for-stories)
-- [amp-sidebar](https://amp.dev/documentation/components/amp-sidebar#sidebar-for-stories)
-- [amp-twitter](https://amp.dev/documentation/components/amp-twitter)
+### URL Fragment Parameter
 
-For more generally usable components see the [list of allowed children](https://amp.dev/documentation/components/amp-story#children).
+With branching, AMP Stories now supports URLs in the form of:
 
-## Validation
+```
+https://www.mydomain.com/good-story/#page=<page-id>
+```
 
-See [amp-story rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/validator-amp-story.protoascii) in the AMP validator specification.
+where `page-id` refers to the unique id of an `amp-story-page`. You can also use the fragment parameter and the `page-id` value like an anchor link in some use cases. See [Integration with Sidebar for Stories](#integration-with-sidebar-for-stories) for an example.
 
 ## Localization
 
-To localize your story, include the language code in the `lang` attribute on the `<html>` tag of your story, such as `<html ⚡ lang="en">` for English. The supported language codes are:
-
-- ar (Arabic)
-- de (German)
-- en-GB (English, UK)
-- en (English, US)
-- es-419 (Spanish, Central/Latin America)
-- es (Spanish, Spain)
-- fr-CA (French, Canada)
-- fr (French, France)
-- hi (Hindi)
-- id (Indonesian)
-- it (Italian)
-- ja (Japanese)
-- ko (Korean)
-- nl (Dutch)
-- no (Norwegian)
-- pt-BR (Portuguese, Brazil)
-- pt (Portuguese, Portugal)
-- ru (Russian)
-- tr (Turkish)
-- vi (Vietnamese)
-- zh-TW (Traditional Chinese)
-- zh (Simplified Chinese)
+You should always include the language code in the `lang` attribute on the `<html>` tag of your story, such as `<html ⚡ lang="en">` for English content. The supported language codes are:
+
+-   ar (Arabic)
+-   de (German)
+-   en-GB (English, UK)
+-   en (English, US)
+-   es-419 (Spanish, Central/Latin America)
+-   es (Spanish, Spain)
+-   fr-CA (French, Canada)
+-   fr (French, France)
+-   hi (Hindi)
+-   id (Indonesian)
+-   it (Italian)
+-   ja (Japanese)
+-   ko (Korean)
+-   nl (Dutch)
+-   no (Norwegian)
+-   pt-BR (Portuguese, Brazil)
+-   pt (Portuguese, Portugal)
+-   ru (Russian)
+-   tr (Turkish)
+-   vi (Vietnamese)
+-   zh-TW (Traditional Chinese)
+-   zh (Simplified Chinese)
 
 Additionally, for right-to-left languages, you may include the `dir="rtl"` attribute on the `<html>` tag of your story. This may be used in conjunction with the language code as well, e.g. `<html ⚡ lang="ar" dir="rtl">`.
 
 ## Related resources
 
-- [Tutorial: Create a visual AMP story](https://www.ampproject.org/docs/tutorials/visual_story)
-- [Samples on AMP By Example](https://amp.dev/documentation/examples/?format=stories)
-- [Best practices for creating an AMP story](https://amp.dev/documentation/guides-and-tutorials/develop/amp_story_best_practices)
+-   [Tutorial: Create a visual AMP story](https://www.ampproject.org/docs/tutorials/visual_story)
+-   [Samples on AMP By Example](https://amp.dev/documentation/examples/?format=stories)
+-   [Best practices for creating an AMP story](https://amp.dev/documentation/guides-and-tutorials/develop/amp_story_best_practices)
+
+## Validation
+
+See [amp-story rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/validator-amp-story.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-story/img/preset_story_anchor.gif b/extensions/amp-story/img/preset_story_anchor.gif
new file mode 100644
index 0000000000000..498d50d14176b
Binary files /dev/null and b/extensions/amp-story/img/preset_story_anchor.gif differ
diff --git a/extensions/amp-story/img/preset_story_scaled.gif b/extensions/amp-story/img/preset_story_scaled.gif
new file mode 100644
index 0000000000000..849f5b813657f
Binary files /dev/null and b/extensions/amp-story/img/preset_story_scaled.gif differ
diff --git a/extensions/amp-story/validator-amp-story.protoascii b/extensions/amp-story/validator-amp-story.protoascii
index e6dc551c15fd9..bc193a02cfd6e 100644
--- a/extensions/amp-story/validator-amp-story.protoascii
+++ b/extensions/amp-story/validator-amp-story.protoascii
@@ -41,6 +41,23 @@ tags: {  # <amp-story>
       protocol: "https"
     }
   }
+  attrs: {
+    name: "entity"
+  }
+  attrs: {
+    name: "entity-logo-src"
+    value_url: {
+      protocol: "http"
+      protocol: "https"
+    }
+  }
+  attrs: {
+    name: "entity-url"
+    value_url: {
+      protocol: "http"
+      protocol: "https"
+    }
+  }
   attrs: {
     name: "poster-landscape-src"
     value_url: {
@@ -105,8 +122,10 @@ tags: {  # <amp-story>
     child_tag_name_oneof: "AMP-PIXEL"
     child_tag_name_oneof: "AMP-SIDEBAR"
     child_tag_name_oneof: "AMP-STORY-AUTO-ADS"
+    child_tag_name_oneof: "AMP-STORY-AUTO-ANALYTICS"
     child_tag_name_oneof: "AMP-STORY-BOOKEND"
     child_tag_name_oneof: "AMP-STORY-PAGE"
+    child_tag_name_oneof: "AMP-STORY-SOCIAL-SHARE"
   }
 }
 tags: {  # <amp-story-page>
@@ -129,6 +148,7 @@ tags: {  # <amp-story-page>
     child_tag_name_oneof: "AMP-ANALYTICS"
     child_tag_name_oneof: "AMP-PIXEL"
     child_tag_name_oneof: "AMP-STORY-ANIMATION"
+    child_tag_name_oneof: "AMP-STORY-AUTO-ANALYTICS"
     child_tag_name_oneof: "AMP-STORY-CTA-LAYER"
     child_tag_name_oneof: "AMP-STORY-GRID-LAYER"
     child_tag_name_oneof: "AMP-STORY-PAGE-ATTACHMENT"
@@ -140,12 +160,12 @@ tags: {  # <amp-story-grid-layer>
   tag_name: "AMP-STORY-GRID-LAYER"
   mandatory_ancestor: "AMP-STORY-PAGE"
   attrs: {
-    name: "template"
-    mandatory: true
-    value: "fill"
-    value: "horizontal"
-    value: "thirds"
-    value: "vertical"
+    name: "anchor"
+    value_regex: "top|bottom|left|right|(top|bottom)[ -](left|right)|(left|right)[ -](top|bottom)"
+  }
+  attrs: {
+    name: "aspect-ratio"
+    value_regex: "\\d+:\\d+"
   }
   attrs: {
     name: "position"
@@ -153,8 +173,17 @@ tags: {  # <amp-story-grid-layer>
     value: "landscape-half-right"
   }
   attrs: {
-    name: "aspect-ratio"
-    value_regex: "\\d+:\\d+"
+    name: "preset"
+    value: "2021-background"
+    value: "2021-foreground"
+  }
+  attrs: {
+    name: "template"
+    mandatory: true
+    value: "fill"
+    value: "horizontal"
+    value: "thirds"
+    value: "vertical"
   }
   descendant_tag_list: "amp-story-grid-layer-allowed-descendants"
   reference_points: {
@@ -219,6 +248,8 @@ tags: {
     value: "pulse"
     value: "rotate-in-left"
     value: "rotate-in-right"
+    value: "scale-fade-down"
+    value: "scale-fade-up"
     value: "twirl-in"
     value: "whoosh-in-left"
     value: "whoosh-in-right"
@@ -277,7 +308,7 @@ tags: {
   reference_points: {
     tag_spec_name: "AMP-STORY-GRID-LAYER animate-in"
   }
-  spec_url: "https://amp.dev/documentation/components/amp-story"
+  spec_url: "https://amp.dev/documentation/components/amp-story/"
 }
 tags: {
   html_format: AMP
@@ -300,6 +331,8 @@ tags: {
     value: "pulse"
     value: "rotate-in-left"
     value: "rotate-in-right"
+    value: "scale-fade-down"
+    value: "scale-fade-up"
     value: "twirl-in"
     value: "whoosh-in-left"
     value: "whoosh-in-right"
@@ -345,7 +378,7 @@ tags: {
   reference_points: {
     tag_spec_name: "AMP-STORY-GRID-LAYER animate-in"
   }
-  spec_url: "https://amp.dev/documentation/components/amp-story"
+  spec_url: "https://amp.dev/documentation/components/amp-story/"
 }
 tags: {  # <amp-story-bookend>
   html_format: AMP
@@ -387,6 +420,46 @@ tags: {  # amp-story-bookend (json)
   }
   attr_lists: "nonce-attr"
 }
+tags: {  # <amp-story-social-share>
+  html_format: AMP
+  tag_name: "AMP-STORY-SOCIAL-SHARE"
+  mandatory_ancestor: "AMP-STORY"
+  mandatory_last_child: true
+  descendant_tag_list: "amp-story-social-share-allowed-descendants"
+  attrs: {
+    name: "layout"
+    mandatory: true
+    value: "nodisplay"
+  }
+  attrs: {
+    name: "src"
+    value_url: {
+      protocol: "http"
+      protocol: "https"
+    }
+  }
+}
+descendant_tag_list: {
+  name: "amp-story-social-share-allowed-descendants"
+  tag: "SCRIPT"
+}
+tags: {  # amp-story-social-share (json)
+  html_format: AMP
+  tag_name: "SCRIPT"
+  spec_name: "amp-story-social-share extension .json script"
+  requires_extension: "amp-story"
+  mandatory_parent: "AMP-STORY-SOCIAL-SHARE"
+  unique: true
+  mandatory_last_child: true
+  siblings_disallowed: true
+  attrs: {
+    name: "type"
+    mandatory: true
+    value_casei: "application/json"
+    dispatch_key: NAME_VALUE_PARENT_DISPATCH
+  }
+  attr_lists: "nonce-attr"
+}
 tags: {  # amp-story-consent (json)
   html_format: AMP
   tag_name: "SCRIPT"
@@ -438,7 +511,6 @@ tags: {  # <amp-story-cta-layer>
 }
 tags: {  # amp-experiment (json)
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   spec_name: "amp-experiment story extension .json script"
   mandatory_parent: "AMP-EXPERIMENT"
@@ -451,13 +523,13 @@ tags: {  # amp-experiment (json)
   attr_lists: "nonce-attr"
   cdata: {
     max_bytes: 15000
-    max_bytes_spec_url: "https://amp.dev/documentation/components/amp-experiment#configuration"
+    max_bytes_spec_url: "https://amp.dev/documentation/components/amp-experiment/#configuration"
     disallowed_cdata_regex: {
       regex: "<!--"
       error_message: "html comments"
     }
   }
-  spec_url: "https://amp.dev/documentation/components/amp-experiment"
+  spec_url: "https://amp.dev/documentation/components/amp-experiment/"
 }
 tags: {
   html_format: AMP
@@ -478,6 +550,8 @@ tags: {
     value: "pulse"
     value: "rotate-in-left"
     value: "rotate-in-right"
+    value: "scale-fade-down"
+    value: "scale-fade-up"
     value: "twirl-in"
     value: "whoosh-in-left"
     value: "whoosh-in-right"
@@ -507,7 +581,7 @@ tags: {
   reference_points: {
     tag_spec_name: "AMP-STORY-CTA-LAYER animate-in"
   }
-  spec_url: "https://amp.dev/documentation/components/amp-story"
+  spec_url: "https://amp.dev/documentation/components/amp-story/"
 }
 descendant_tag_list: {
   name: "amp-story-cta-layer-allowed-descendants"
@@ -516,6 +590,7 @@ descendant_tag_list: {
   tag: "ADDRESS"
   tag: "AMP-CALL-TRACKING"
   tag: "AMP-DATE-COUNTDOWN"
+  tag: "AMP-DATE-DISPLAY"
   tag: "AMP-FIT-TEXT"
   tag: "AMP-FONT"
   tag: "AMP-IMG"
@@ -564,6 +639,7 @@ descendant_tag_list: {
   tag: "HKERN"
   tag: "HR"
   tag: "I"
+  tag: "IMG"  # Only allowed when document is transformed AMP
   tag: "I-AMPHTML-SIZER"  # Only allowed when document is transformed AMP
   tag: "IMAGE"
   tag: "INS"
@@ -628,17 +704,24 @@ descendant_tag_list: {
   tag: "AMP-ANALYTICS"
   tag: "AMP-AUDIO"
   tag: "AMP-DATE-COUNTDOWN"
+  tag: "AMP-DATE-DISPLAY"
   tag: "AMP-EXPERIMENT"
   tag: "AMP-FIT-TEXT"
   tag: "AMP-FONT"
   tag: "AMP-GIST"
-  tag: "AMP-GOOGLE-VRVIEW-IMAGE"
   tag: "AMP-IMG"
   tag: "AMP-INSTALL-SERVICEWORKER"
   tag: "AMP-LIST"
   tag: "AMP-LIVE-LIST"
   tag: "AMP-PIXEL"
   tag: "AMP-STATE"
+  tag: "AMP-STORY-360"
+  tag: "AMP-STORY-AUTO-ANALYTICS"
+  tag: "AMP-STORY-INTERACTIVE-BINARY-POLL"
+  tag: "AMP-STORY-INTERACTIVE-POLL"
+  tag: "AMP-STORY-INTERACTIVE-QUIZ"
+  tag: "AMP-STORY-INTERACTIVE-RESULTS"
+  tag: "AMP-STORY-PANNING-MEDIA"
   tag: "AMP-TIMEAGO"
   tag: "AMP-TWITTER"
   tag: "AMP-VIDEO"
@@ -693,6 +776,7 @@ descendant_tag_list: {
   tag: "HR"
   tag: "I"
   tag: "IMAGE"
+  tag: "IMG"  # Only allowed when document is transformed AMP
   tag: "I-AMPHTML-SIZER"  # Only allowed when document is transformed AMP
   tag: "INS"
   tag: "KBD"
@@ -765,14 +849,22 @@ tags: {  # <amp-story-page-attachment> with href
   mandatory_ancestor: "AMP-STORY-PAGE"
   mandatory_last_child: true
   attrs: {
-    name: "layout"
-    mandatory: true
-    value: "nodisplay"
+    name: "cta-accent-color"
   }
   attrs: {
-    name: "theme"
-    value: "dark"
-    value: "light"
+    name: "cta-accent-element"
+    value: "background"
+    value: "text"
+  }
+  attrs: {
+    name: "cta-image"
+    value_url: {
+      protocol: "http"
+      protocol: "https"
+    }
+  }
+  attrs: {
+    name: "cta-text"
   }
   attrs: {
     name: "href"
@@ -782,6 +874,20 @@ tags: {  # <amp-story-page-attachment> with href
       protocol: "https"
     }
   }
+  attrs: {
+    name: "layout"
+    mandatory: true
+    value: "nodisplay"
+  }
+  attrs: {
+    name: "theme"
+    value: "custom"
+    value: "dark"
+    value: "light"
+  }
+  attrs: {
+    name: "title"
+  }
   child_tags: {
     mandatory_num_child_tags: 0
   }
@@ -793,6 +899,26 @@ tags: {  # <amp-story-page-attachment> with no href
   mandatory_ancestor: "AMP-STORY-PAGE"
   descendant_tag_list: "amp-story-page-attachment-allowed-descendants"
   mandatory_last_child: true
+  attrs: {
+    name: "cta-text"
+  }
+  attrs: {
+    name: "title"
+  }
+  attrs: {
+    name: "cta-image"
+    value_url: {
+      protocol: "http"
+      protocol: "https"
+    }
+  }
+  attrs: {
+    name: "cta-image-2"
+    value_url: {
+      protocol: "http"
+      protocol: "https"
+    }
+  }
   attrs: {
     name: "layout"
     mandatory: true
@@ -804,6 +930,56 @@ tags: {  # <amp-story-page-attachment> with no href
     value: "light"
   }
 }
+tags: {  # Same validation rules as `<amp-story-page-attachment> with href`
+  html_format: AMP
+  tag_name: "AMP-STORY-PAGE-OUTLINK"
+  spec_name: "amp-story-page-outlink"
+  mandatory_ancestor: "AMP-STORY-PAGE"
+  mandatory_last_child: true
+  attrs: {
+    name: "cta-accent-color"
+  }
+  attrs: {
+    name: "cta-accent-element"
+    value: "background"
+    value: "text"
+  }
+  attrs: {
+    name: "cta-image"
+    value_url: {
+      protocol: "http"
+      protocol: "https"
+    }
+  }
+  attrs: {
+    name: "cta-text"
+  }
+  attrs: {
+    name: "href"
+    mandatory: true
+    value_url: {
+      protocol: "http"
+      protocol: "https"
+    }
+  }
+  attrs: {
+    name: "layout"
+    mandatory: true
+    value: "nodisplay"
+  }
+  attrs: {
+    name: "theme"
+    value: "custom"
+    value: "dark"
+    value: "light"
+  }
+  attrs: {
+    name: "title"
+  }
+  child_tags: {
+    mandatory_num_child_tags: 0
+  }
+}
 tags: {  # <amp-story-animation> <script>
   html_format: AMP
   tag_name: "SCRIPT"
@@ -846,6 +1022,40 @@ tags: {  # <amp-story-animation>
     supported_layouts: NODISPLAY
   }
 }
+# AMP Story metadata, name=amp-story-generator-name
+tags: {
+  html_format: AMP
+  tag_name: "META"
+  spec_name: "meta name=amp-story-generator-name"
+  mandatory_parent: "HEAD"
+  unique: true
+  attrs: {
+    name: "content"
+    mandatory: true
+  }
+  attrs: {
+    name: "name"
+    mandatory: true
+    value_casei: "amp-story-generator-name"
+  }
+}
+# AMP Story metadata, name=amp-story-generator-version
+tags: {
+  html_format: AMP
+  tag_name: "META"
+  spec_name: "meta name=amp-story-generator-version"
+  mandatory_parent: "HEAD"
+  unique: true
+  attrs: {
+    name: "content"
+    mandatory: true
+  }
+  attrs: {
+    name: "name"
+    mandatory: true
+    value_casei: "amp-story-generator-version"
+  }
+}
 descendant_tag_list {
   # Allowlisting as many components as possible, unless they could result in a
   # bad UX (ie: modal in a modal with amp-lightbox), or potential security
@@ -867,6 +1077,7 @@ descendant_tag_list {
   tag: "AMP-CAROUSEL"
   tag: "AMP-DAILYMOTION"
   tag: "AMP-DATE-COUNTDOWN"
+  tag: "AMP-DATE-DISPLAY"
   tag: "AMP-EMBEDLY-CARD"
   tag: "AMP-FACEBOOK"
   tag: "AMP-FACEBOOK-COMMENTS"
@@ -878,7 +1089,6 @@ descendant_tag_list {
   tag: "AMP-GFYCAT"
   tag: "AMP-GIST"
   tag: "AMP-GOOGLE-DOCUMENT-EMBED"
-  tag: "AMP-GOOGLE-VRVIEW-IMAGE"
   tag: "AMP-HULU"
   tag: "AMP-IMA-VIDEO"
   tag: "AMP-IMAGE-SLIDER"
@@ -968,6 +1178,7 @@ descendant_tag_list {
   tag: "HR"
   tag: "I"
   tag: "IMAGE"
+  tag: "IMG"  # Only allowed when document is transformed AMP
   tag: "I-AMPHTML-SIZER"  # Only allowed when document is transformed AMP
   tag: "INS"
   tag: "KBD"
diff --git a/extensions/amp-stream-gallery/0.1/amp-stream-gallery.js b/extensions/amp-stream-gallery/0.1/amp-stream-gallery.js
index 376afaa58e189..bc5617ece6e24 100644
--- a/extensions/amp-stream-gallery/0.1/amp-stream-gallery.js
+++ b/extensions/amp-stream-gallery/0.1/amp-stream-gallery.js
@@ -15,7 +15,7 @@
  */
 
 import {ActionSource} from '../../amp-base-carousel/0.1/action-source';
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {CSS} from '../../../build/amp-stream-gallery-0.1.css';
 import {Carousel} from '../../amp-base-carousel/0.1/carousel.js';
 import {CarouselEvents} from '../../amp-base-carousel/0.1/carousel-events';
@@ -27,13 +27,18 @@ import {
 import {Services} from '../../../src/services';
 import {createCustomEvent, getDetail} from '../../../src/event-helper';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
+import {
+  dispatchCustomEvent,
+  isRTL,
+  iterateCursor,
+  toggleAttribute,
+} from '../../../src/dom';
 import {htmlFor} from '../../../src/static-template';
 import {isExperimentOn} from '../../../src/experiments';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {isRTL, iterateCursor, toggleAttribute} from '../../../src/dom';
 import {setStyle} from '../../../src/style';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
 
 /** @enum {number} */
 const InsetArrowVisibility = {
@@ -73,6 +78,11 @@ const TAG = 'amp-stream-gallery';
  * - Does not support autoplay
  */
 class AmpStreamGallery extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -268,11 +278,6 @@ class AmpStreamGallery extends AMP.BaseElement {
     return isLayoutSizeDefined(layout);
   }
 
-  /** @override */
-  prerenderAllowed() {
-    return true;
-  }
-
   /** @override */
   buildCallback() {
     userAssert(
@@ -580,8 +585,8 @@ class AmpStreamGallery extends AMP.BaseElement {
   updateVisibleCount_() {
     const {
       maxItemWidth_,
-      minItemWidth_,
       maxVisibleCount_,
+      minItemWidth_,
       minVisibleCount_,
       slides_,
     } = this;
@@ -767,7 +772,7 @@ class AmpStreamGallery extends AMP.BaseElement {
 
     const action = createCustomEvent(this.win, `streamGallery.${name}`, data);
     this.action_.trigger(this.element, name, action, trust);
-    this.element.dispatchCustomEvent(name, data);
+    dispatchCustomEvent(this.element, name, data);
   }
 
   /**
diff --git a/extensions/amp-stream-gallery/0.1/arrows.css b/extensions/amp-stream-gallery/0.1/arrows.css
index b0d3745286a49..cac714c2805b7 100644
--- a/extensions/amp-stream-gallery/0.1/arrows.css
+++ b/extensions/amp-stream-gallery/0.1/arrows.css
@@ -46,7 +46,7 @@
 
 .i-amphtml-stream-gallery-arrow-prev-slot > *,
 .i-amphtml-stream-gallery-arrow-next-slot > * {
-  /* 
+  /*
    * Make sure arrows do not collapse due to parent having no width for inset
    * arrows. Note this needs to apply to both the default arrows and custom
    * arrows.
diff --git a/extensions/amp-stream-gallery/0.1/inset-arrows.css b/extensions/amp-stream-gallery/0.1/inset-arrows.css
index dc844eead4d90..6058b96c1f210 100644
--- a/extensions/amp-stream-gallery/0.1/inset-arrows.css
+++ b/extensions/amp-stream-gallery/0.1/inset-arrows.css
@@ -29,7 +29,7 @@
 [i-amphtml-stream-gallery-hide-inset-buttons]:not([amp-stream-gallery-outset-arrows]) .i-amphtml-stream-gallery-arrow-prev-slot > *,
 [i-amphtml-stream-gallery-hide-inset-buttons]:not([amp-stream-gallery-outset-arrows]) .i-amphtml-stream-gallery-arrow-next-slot > * {
   opacity: 0;
-  /** 
+  /**
    * Note, screen readers can still activate the buttons when hide buttons is
    * specified, even though we have `pointer-events: none`.
    */
diff --git a/extensions/amp-stream-gallery/0.1/test/test-amp-stream-gallery.js b/extensions/amp-stream-gallery/0.1/test/test-amp-stream-gallery.js
index 5aadd1067bd79..6abe745fe8cc0 100644
--- a/extensions/amp-stream-gallery/0.1/test/test-amp-stream-gallery.js
+++ b/extensions/amp-stream-gallery/0.1/test/test-amp-stream-gallery.js
@@ -18,7 +18,7 @@ import '../amp-stream-gallery';
 import {CarouselEvents} from '../../../amp-base-carousel/0.1/carousel-events';
 import {getDetail, listenOncePromise} from '../../../../src/event-helper';
 import {setStyle, setStyles} from '../../../../src/style';
-import {toArray} from '../../../../src/types';
+import {toArray} from '../../../../src/core/types/array';
 import {toggleExperiment} from '../../../../src/experiments';
 
 /**
@@ -34,8 +34,9 @@ import {toggleExperiment} from '../../../../src/experiments';
  */
 async function afterIndexUpdate(el, index) {
   const event = await listenOncePromise(el, CarouselEvents.INDEX_CHANGE);
-  await el.implementation_.mutateElement(() => {});
-  await el.implementation_.mutateElement(() => {});
+  const impl = await el.getImpl(false);
+  await impl.mutateElement(() => {});
+  await impl.mutateElement(() => {});
 
   if (index != undefined && getDetail(event)['index'] != index) {
     return afterIndexUpdate(el, index);
@@ -168,7 +169,7 @@ describes.realWin(
 
       container.appendChild(el);
 
-      await el.build();
+      await el.buildInternal();
       await el.layoutCallback();
       await afterIndexUpdate(el);
 
diff --git a/extensions/amp-stream-gallery/1.0/amp-stream-gallery.css b/extensions/amp-stream-gallery/1.0/amp-stream-gallery.css
new file mode 100644
index 0000000000000..d16f39f9275e2
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/amp-stream-gallery.css
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/*
+ * Pre-upgrade:
+ * - display:block element
+ * - size-defined element
+ */
+amp-stream-gallery {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Pre-upgrade: size-defining element - hide children. */
+amp-stream-gallery:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc) {
+  display: none;
+  content-visibility: hidden;
+}
diff --git a/extensions/amp-stream-gallery/1.0/amp-stream-gallery.js b/extensions/amp-stream-gallery/1.0/amp-stream-gallery.js
new file mode 100644
index 0000000000000..15269c9b7634c
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/amp-stream-gallery.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {BaseElement} from './base-element';
+import {CSS} from '../../../build/amp-stream-gallery-1.0.css';
+import {Services} from '../../../src/services';
+import {createCustomEvent} from '../../../src/event-helper';
+import {isExperimentOn} from '../../../src/experiments';
+import {toWin} from '../../../src/types';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-stream-gallery';
+
+class AmpStreamGallery extends BaseElement {
+  /** @override */
+  init() {
+    this.registerApiAction('prev', (api) => api.prev(), ActionTrust.LOW);
+    this.registerApiAction('next', (api) => api.next(), ActionTrust.LOW);
+    this.registerApiAction(
+      'goToSlide',
+      (api, invocation) => {
+        const {args} = invocation;
+        api.goToSlide(args['index'] || -1);
+      },
+      ActionTrust.LOW
+    );
+
+    return super.init();
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento-stream-gallery') ||
+        isExperimentOn(this.win, 'bento'),
+      'expected global "bento" or specific "bento-stream-gallery" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+
+  /** @override */
+  triggerEvent(element, eventName, detail) {
+    const event = createCustomEvent(
+      toWin(element.ownerDocument.defaultView),
+      `amp-stream-gallery.${eventName}`,
+      detail
+    );
+    Services.actionServiceForDoc(element).trigger(
+      element,
+      eventName,
+      event,
+      ActionTrust.HIGH
+    );
+
+    super.triggerEvent(element, eventName, detail);
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpStreamGallery, CSS);
+});
diff --git a/extensions/amp-stream-gallery/1.0/base-element.js b/extensions/amp-stream-gallery/1.0/base-element.js
new file mode 100644
index 0000000000000..06d7d42312a0d
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/base-element.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {CSS as CAROUSEL_CSS} from '../../amp-base-carousel/1.0/component.jss';
+import {CSS as GALLERY_CSS} from './component.jss';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {StreamGallery} from './component';
+import {dict} from '../../../src/core/types/object';
+
+export class BaseElement extends PreactBaseElement {
+  /** @override */
+  init() {
+    const {element} = this;
+    return dict({
+      'onSlideChange': (index) => {
+        this.triggerEvent(element, 'slideChange', dict({'index': index}));
+      },
+    });
+  }
+}
+
+/** @override */
+BaseElement['Component'] = StreamGallery;
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['props'] = {
+  'arrowPrevAs': {
+    selector: '[slot="prev-arrow"]',
+    single: true,
+    as: true,
+  },
+  'arrowNextAs': {
+    selector: '[slot="next-arrow"]',
+    single: true,
+    as: true,
+  },
+  'controls': {attr: 'controls', type: 'string', media: true},
+  'extraSpace': {attr: 'extra-space', type: 'string', media: true},
+  'loop': {attr: 'loop', type: 'boolean', media: true},
+  'minItemWidth': {attr: 'min-item-width', type: 'number', media: true},
+  'maxItemWidth': {attr: 'max-item-width', type: 'number', media: true},
+  'maxVisibleCount': {attr: 'max-visible-count', type: 'number', media: true},
+  'minVisibleCount': {attr: 'min-visible-count', type: 'number', media: true},
+  'outsetArrows': {attr: 'outset-arrows', type: 'boolean', media: true},
+  'peek': {attr: 'peek', type: 'number', media: true},
+  'slideAlign': {attr: 'slide-align', type: 'string', media: true},
+  'snap': {attr: 'snap', type: 'boolean', media: true},
+  'children': {
+    selector: '*', // This should be last as catch-all.
+    single: false,
+  },
+};
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
+
+/** @override */
+BaseElement['shadowCss'] = GALLERY_CSS + CAROUSEL_CSS;
diff --git a/extensions/amp-stream-gallery/1.0/component.js b/extensions/amp-stream-gallery/1.0/component.js
new file mode 100644
index 0000000000000..c5795af0a70e3
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/component.js
@@ -0,0 +1,243 @@
+/**
+ * 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {BaseCarousel} from '../../amp-base-carousel/1.0/component';
+import {forwardRef} from '../../../src/preact/compat';
+import {setStyle} from '../../../src/style';
+import {toWin} from '../../../src/types';
+import {
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from '../../../src/preact';
+import {useStyles} from './component.jss';
+import objstr from 'obj-str';
+
+const DEFAULT_VISIBLE_COUNT = 1;
+const OUTSET_ARROWS_WIDTH = 100;
+
+/**
+ * @param {!StreamGalleryDef.Props} props
+ * @param {{current: (!BaseCarouselDef.CarouselApi|null)}} ref
+ * @return {PreactDef.Renderable}
+ */
+function StreamGalleryWithRef(props, ref) {
+  const {
+    arrowPrevAs = DefaultArrow,
+    arrowNextAs = DefaultArrow,
+    children,
+    className,
+    extraSpace,
+    maxItemWidth = Number.MAX_VALUE,
+    minItemWidth = 1,
+    maxVisibleCount = Number.MAX_VALUE,
+    minVisibleCount = 1,
+    outsetArrows,
+    peek = 0,
+    slideAlign = 'start',
+    ...rest
+  } = props;
+  const classes = useStyles();
+  const carouselRef = useRef(null);
+  const [visibleCount, setVisibleCount] = useState(DEFAULT_VISIBLE_COUNT);
+
+  const measure = useCallback(
+    (containerWidth) =>
+      getVisibleCount(
+        maxItemWidth,
+        minItemWidth,
+        maxVisibleCount,
+        minVisibleCount,
+        children.length,
+        outsetArrows,
+        peek,
+        containerWidth,
+        carouselRef.current.node
+      ),
+    [
+      maxItemWidth,
+      minItemWidth,
+      maxVisibleCount,
+      minVisibleCount,
+      children.length,
+      outsetArrows,
+      peek,
+    ]
+  );
+
+  useImperativeHandle(
+    ref,
+    () =>
+      /** @type {!BaseCarouselDef.CarouselApi} */ ({
+        goToSlide: (index) => carouselRef.current.goToSlide(index),
+        next: () => carouselRef.current.next(),
+        prev: () => carouselRef.current.prev(),
+      }),
+    []
+  );
+
+  // Adjust visible slide count when container size or parameters change.
+  useLayoutEffect(() => {
+    if (!carouselRef.current) {
+      return;
+    }
+    const node = carouselRef.current.root;
+    if (!node) {
+      return;
+    }
+    // Use local window.
+    const win = toWin(node.ownerDocument.defaultView);
+    if (!win) {
+      return undefined;
+    }
+    const observer = new win.ResizeObserver((entries) => {
+      const last = entries[entries.length - 1];
+      setVisibleCount(measure(last.contentRect.width));
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [measure]);
+
+  return (
+    <BaseCarousel
+      advanceCount={Math.floor(visibleCount)}
+      arrowPrevAs={arrowPrevAs}
+      arrowNextAs={arrowNextAs}
+      className={objstr({
+        [className]: !!className,
+        [classes.gallery]: true,
+        [classes.extraSpace]: extraSpace === 'around',
+      })}
+      outsetArrows={outsetArrows}
+      snapAlign={slideAlign}
+      ref={carouselRef}
+      visibleCount={visibleCount}
+      {...rest}
+    >
+      {children}
+    </BaseCarousel>
+  );
+}
+
+const StreamGallery = forwardRef(StreamGalleryWithRef);
+StreamGallery.displayName = 'StreamGallery'; // Make findable for tests.
+export {StreamGallery};
+
+/**
+ * @param {!StreamGalleryDef.ArrowProps} props
+ * @return {PreactDef.Renderable}
+ */
+function DefaultArrow({by, className, outsetArrows, ...rest}) {
+  const classes = useStyles();
+  return (
+    <div className={className}>
+      <button
+        aria-hidden="true"
+        className={objstr({
+          [classes.arrow]: true,
+          [classes.arrowPrev]: by < 0,
+          [classes.arrowNext]: by > 0,
+          [classes.outsetArrow]: outsetArrows,
+          [classes.insetArrow]: !outsetArrows,
+        })}
+        {...rest}
+      >
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d={
+              by < 0 ? 'M14,7.4 L9.4,12 L14,16.6' : 'M10,7.4 L14.6,12 L10,16.6'
+            }
+            fill="none"
+            stroke="#000"
+            stroke-width="2"
+            stroke-linejoin="round"
+            stroke-linecap="round"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+/**
+ * Updates the number of items visible for the internal carousel based on
+ * the min/max item widths and how much space is available.
+ * @param {number} maxItemWidth
+ * @param {number} minItemWidth
+ * @param {number} maxVisibleCount
+ * @param {number} minVisibleCount
+ * @param {number} slideCount
+ * @param {boolean|undefined} outsetArrows
+ * @param {number} peek
+ * @param {(null|number)} containerWidth
+ * @param {Element} container
+ * @return {number}
+ */
+function getVisibleCount(
+  maxItemWidth,
+  minItemWidth,
+  maxVisibleCount,
+  minVisibleCount,
+  slideCount,
+  outsetArrows,
+  peek,
+  containerWidth,
+  container
+) {
+  if (!containerWidth) {
+    return DEFAULT_VISIBLE_COUNT;
+  }
+  const items = getItemsForWidth(containerWidth, minItemWidth, peek);
+  const maxVisibleSlides = Math.min(slideCount, maxVisibleCount);
+  const visibleCount = Math.min(
+    Math.max(minVisibleCount, items),
+    maxVisibleSlides
+  );
+  /*
+   * When we are going to show more slides than we have, cap the width so
+   * that we do not go over the max requested slide width. Otherwise,
+   * cap the max width based on how many items are showing and the max
+   * width for each item.
+   */
+  const maxContainerWidth =
+    (items > maxVisibleSlides
+      ? maxVisibleSlides * maxItemWidth
+      : items * maxItemWidth) + (outsetArrows ? OUTSET_ARROWS_WIDTH : 0);
+  const maxWidthValue =
+    maxContainerWidth < Number.MAX_VALUE ? `${maxContainerWidth}px` : '';
+  setStyle(container, 'max-width', maxWidthValue);
+  return visibleCount;
+}
+
+/**
+ * Determines how many whole items in addition to the current peek value can
+ * fit for a given item width. This can be rounded up or down to satisfy a
+ * max/min size constraint.
+ * @param {number} containerWidth The width of the container element.
+ * @param {number} itemWidth The width of each item.
+ * @param {number} peek The amount of slides to show besides the current item.
+ * @return {number} The number of items to show.
+ */
+function getItemsForWidth(containerWidth, itemWidth, peek) {
+  const availableWidth = containerWidth - peek * itemWidth;
+  const fractionalItems = availableWidth / itemWidth;
+  const wholeItems = Math.floor(fractionalItems);
+  // Always show at least 1 whole item.
+  return Math.max(DEFAULT_VISIBLE_COUNT, wholeItems) + peek;
+}
diff --git a/extensions/amp-stream-gallery/1.0/component.jss.js b/extensions/amp-stream-gallery/1.0/component.jss.js
new file mode 100644
index 0000000000000..cb067829fc351
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/component.jss.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+const gallery = {
+  display: 'flex',
+  flexGrow: 1,
+  '&$extraSpace': {
+    justifyContent: 'center',
+  },
+};
+const extraSpace = {};
+const arrow = {
+  position: 'relative',
+  zIndex: 1,
+  border: 'none',
+  outline: 'none',
+  boxShadow: '0px 2px 6px 0px rgba(0,0,0,.4)',
+  backgroundColor: 'rgba(255,255,255,0.6)',
+  backgroundSize: '24px 24px',
+  backgroundPosition: 'center',
+  backgroundRepeat: 'no-repeat',
+  backdropFilter: 'blur(3px)',
+  transition: '200ms opacity ease-in',
+};
+const arrowPrev = {};
+const arrowNext = {};
+const insetArrow = {
+  flexShrink: 0,
+  width: '40px',
+  height: '40px',
+  padding: '8px',
+  margin: '-12px',
+  '&$arrowPrev': {
+    borderRadius: '0px 4px 4px 0px',
+  },
+  '&$arrowNext': {
+    borderRadius: '4px 0px 0px 4px',
+  },
+};
+const outsetArrow = {
+  flexShrink: 0,
+  width: '32px',
+  height: '32px',
+  padding: '4px',
+  margin: '2px',
+  borderRadius: '50%',
+  pointerEvents: 'auto',
+};
+
+const JSS = {
+  arrow,
+  arrowPrev,
+  arrowNext,
+  extraSpace,
+  gallery,
+  insetArrow,
+  outsetArrow,
+};
+
+// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
+// eslint-disable-next-line local/no-export-side-effect
+export const useStyles = createUseStyles(JSS);
diff --git a/extensions/amp-stream-gallery/1.0/component.type.js b/extensions/amp-stream-gallery/1.0/component.type.js
new file mode 100644
index 0000000000000..92e904e5b0256
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/component.type.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/** @const */
+var StreamGalleryDef = {};
+
+/**
+ * @typedef {{
+ *   arrowNext: (?PreactDef.VNode|undefined),
+ *   arrowPrev: (?PreactDef.VNode|undefined),
+ *   children: (!PreactDef.Renderable),
+ *   controls: (string|undefined),
+ *   extraSpace: (string|undefined),
+ *   loop: (boolean|undefined),
+ *   maxItemWidth: (number|undefined),
+ *   minItemWidth: (number|undefined),
+ *   maxVisibleCount: (number|undefined),
+ *   minVisibleCount: (number|undefined),
+ *   onSlideChange: (function(number):undefined|undefined),
+ *   outsetArrows: (boolean|undefined),
+ *   peek: (number|undefined),
+ *   slideAlign: (string|undefined),
+ *   snap: (boolean|undefined)
+ * }}
+ */
+StreamGalleryDef.Props;
+
+/**
+ * @typedef {{
+ *   advance: (function(number):undefined|undefined),
+ *   customArrow: (PreactDef.VNode|undefined),
+ *   by: number,
+ *   disabled: (boolean|undefined),
+ *   outsetArrows: (boolean|undefined)
+ * }}
+ */
+StreamGalleryDef.ArrowProps;
diff --git a/extensions/amp-stream-gallery/1.0/package.json b/extensions/amp-stream-gallery/1.0/package.json
new file mode 100644
index 0000000000000..cbd3fb2a9e568
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-stream-gallery",
+  "version": "VERSION",
+  "description": "AMP Stream Gallery Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "./dist/component.js",
+  "module": "./dist/component-preact.module.js",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "./dist/component-preact.module.js",
+      "require": "./dist/component-preact.js"
+    },
+    "./react": {
+      "import": "./dist/component-react.module.js",
+      "require": "./dist/component-react.js"
+    }
+  },
+  "files": ["dist/*", "react.js"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml.git",
+    "directory": "extensions/amp-stream-gallery/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0",
+  "peerDependencies": {
+    "preact": "^10.2.1",
+    "react": "^17.0.0"
+  }
+}
diff --git a/extensions/amp-stream-gallery/1.0/react.js b/extensions/amp-stream-gallery/1.0/react.js
new file mode 100644
index 0000000000000..0b2957c35c38d
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/react.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-env node */
+// eslint-disable-next-line local/no-module-exports
+module.exports = require('./dist/component-react');
diff --git a/extensions/amp-stream-gallery/1.0/storybook/Basic.amp.js b/extensions/amp-stream-gallery/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..5fb5d98863e28
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/storybook/Basic.amp.js
@@ -0,0 +1,119 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+const CONTROLS = ['auto', 'always', 'never'];
+
+export default {
+  title: 'amp-stream-gallery-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-stream-gallery', version: '1.0'}],
+
+    experiments: ['bento'],
+  },
+};
+
+export const Default = () => {
+  const slideCount = number('slide count', 15, {min: 3, max: 99});
+  const extraSpace = boolean('extra space around?', true);
+  const controls = select('controls', CONTROLS);
+  const loop = boolean('loop', true);
+  const snap = boolean('snap', true);
+  const slideAlign = select('slide align', ['start', 'center']);
+  const minItemWidth = number('min item width', 130, {min: 1});
+  const maxItemWidth = number('max item width', 180, {min: 1});
+  const minVisibleCount = number('min visible count', 2.5, {min: 1});
+  const maxVisibleCount = number('max visible count', 5, {min: 1});
+  const peek = number('peek', 0, {min: 1});
+  const outsetArrows = boolean('outset arrows', true);
+  const colorIncrement = Math.floor(255 / (slideCount + 1));
+  return (
+    <>
+      <amp-stream-gallery
+        id="carousel"
+        width="735"
+        height="225"
+        layout="responsive"
+        controls={controls}
+        extra-space={extraSpace}
+        loop={loop}
+        min-item-width={minItemWidth}
+        max-item-width={maxItemWidth}
+        min-visible-count={minVisibleCount}
+        max-visible-count={maxVisibleCount}
+        outset-arrows={outsetArrows}
+        peek={peek}
+        slide-align={slideAlign}
+        snap={snap}
+      >
+        {Array.from({length: slideCount}, (x, i) => {
+          const v = colorIncrement * (i + 1);
+          return (
+            <amp-layout width="245" height="225" layout="flex-item">
+              <svg viewBox="0 0 440 225">
+                <rect
+                  style={{fill: `rgb(${v}, 100, 100)`}}
+                  width="440"
+                  height="225"
+                />
+                Sorry, your browser does not support inline SVG.
+              </svg>
+            </amp-layout>
+          );
+        })}
+      </amp-stream-gallery>
+
+      <div class="buttons" style={{marginTop: 8}}>
+        <button on="tap:carousel.goToSlide(index=3)">goToSlide(index=3)</button>
+        <button on="tap:carousel.next">Next</button>
+        <button on="tap:carousel.prev">Prev</button>
+      </div>
+    </>
+  );
+};
+
+export const customArrows = () => {
+  const width = number('width', 400);
+  const height = number('height', 200);
+  const slideCount = number('slide count', 7, {min: 0, max: 99});
+  const colorIncrement = Math.floor(255 / (slideCount + 1));
+  return (
+    <amp-stream-gallery max-visible-count={3} width={width} height={height}>
+      {Array.from({length: slideCount}, (x, i) => {
+        const v = colorIncrement * (i + 1);
+        return (
+          <div
+            style={{
+              backgroundColor: `rgb(${v}, 100, 100)`,
+              border: 'solid white 1px',
+              width: '100%',
+              height: '100%',
+            }}
+          ></div>
+        );
+      })}
+      <button slot="next-arrow">Next</button>
+      <button slot="prev-arrow">Prev</button>
+    </amp-stream-gallery>
+  );
+};
+
+Default.storyName = 'default';
diff --git a/extensions/amp-stream-gallery/1.0/storybook/Basic.js b/extensions/amp-stream-gallery/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..0ac2631fc06a7
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/storybook/Basic.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {StreamGallery} from '../component';
+import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
+
+const CONTROLS = ['auto', 'always', 'never'];
+
+export default {
+  title: 'StreamGallery',
+  component: StreamGallery,
+  decorators: [withKnobs],
+};
+
+/**
+ * @param {!Object} props
+ * @return {*}
+ */
+function CarouselWithActions(props) {
+  // TODO(#30447): replace imperative calls with "button" knobs when the
+  // Storybook 6.1 is released.
+  const ref = Preact.useRef();
+  return (
+    <section>
+      <StreamGallery ref={ref} {...props} />
+      <div style={{marginTop: 8}}>
+        <button onClick={() => ref.current.goToSlide(3)}>goToSlide(3)</button>
+        <button onClick={() => ref.current.next()}>next</button>
+        <button onClick={() => ref.current.prev()}>prev</button>
+      </div>
+    </section>
+  );
+}
+
+export const _default = () => {
+  const width = number('width', 735);
+  const height = number('height', 225);
+  const slideCount = number('slide count', 5, {min: 0, max: 99});
+  const extraSpace = boolean('extra space around?', true);
+  const controls = select('controls', CONTROLS);
+  const loop = boolean('loop', true);
+  const snap = boolean('snap', true);
+  const slideAlign = select('slide align', ['start', 'center']);
+  const minItemWidth = number('min item width', 130, {min: 1});
+  const maxItemWidth = number('max item width', 180, {min: 1});
+  const minVisibleCount = number('min visible count', 3, {min: 1});
+  const maxVisibleCount = number('max visible count', 5, {min: 1});
+  const peek = number('peek', 0, {min: 1});
+  const outsetArrows = boolean('outset arrows', true);
+  const colorIncrement = Math.floor(255 / (slideCount + 1));
+  return (
+    <>
+      <CarouselWithActions
+        extraSpace={extraSpace ? 'around' : ''}
+        controls={controls}
+        loop={loop}
+        slideAlign={slideAlign}
+        snap={snap}
+        outsetArrows={outsetArrows}
+        minItemWidth={minItemWidth}
+        maxItemWidth={maxItemWidth}
+        minVisibleCount={minVisibleCount}
+        maxVisibleCount={maxVisibleCount}
+        peek={peek}
+        style={{width, height}}
+      >
+        {Array.from({length: slideCount}, (_, i) => {
+          const v = colorIncrement * (i + 1);
+          return (
+            <div
+              style={{
+                backgroundColor: `rgb(${v}, 100, 100)`,
+                width,
+                height,
+              }}
+            ></div>
+          );
+        })}
+      </CarouselWithActions>
+    </>
+  );
+};
diff --git a/extensions/amp-stream-gallery/1.0/test/test-amp-stream-gallery.js b/extensions/amp-stream-gallery/1.0/test/test-amp-stream-gallery.js
new file mode 100644
index 0000000000000..fa840bcc8efd2
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/test/test-amp-stream-gallery.js
@@ -0,0 +1,259 @@
+/**
+ * Copyright 2020 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.
+ */
+import '../../../amp-base-carousel/1.0/amp-base-carousel';
+import '../amp-stream-gallery';
+import {ActionInvocation} from '../../../../src/service/action-impl';
+import {ActionTrust} from '../../../../src/core/constants/action-constants';
+import {
+  createElementWithAttributes,
+  waitForChildPromise,
+} from '../../../../src/dom';
+import {poll} from '../../../../testing/iframe';
+import {setStyles} from '../../../../src/style';
+import {toArray} from '../../../../src/core/types/array';
+import {toggleExperiment} from '../../../../src/experiments';
+import {useStyles} from '../../../amp-base-carousel/1.0/component.jss';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-stream-gallery',
+  {
+    amp: {
+      extensions: ['amp-stream-gallery:1.0'],
+    },
+  },
+  (env) => {
+    let win;
+    let element;
+    const userSuppliedChildren = [];
+
+    const styles = useStyles();
+
+    beforeEach(async () => {
+      win = env.win;
+      toggleExperiment(win, 'bento-stream-gallery', true, true);
+      element = createElementWithAttributes(
+        win.document,
+        'amp-stream-gallery',
+        {
+          'layout': 'fixed',
+          'width': '300px',
+          'height': '200px',
+        }
+      );
+
+      // Add slides.
+      for (let i = 0; i < 3; i++) {
+        const slide = newSlide(`${i}`);
+        userSuppliedChildren[i] = slide;
+        element.appendChild(slide);
+      }
+    });
+
+    afterEach(() => {
+      toggleExperiment(win, 'bento-stream-gallery', false, true);
+    });
+
+    function newSlide(id) {
+      const slide = document.createElement('div');
+      slide.className = 'test-slide';
+      setStyles(slide, {
+        flexShrink: '0',
+        height: '100px',
+        width: '100%',
+      });
+      slide.textContent = 'slide ' + id;
+      return slide;
+    }
+
+    async function getSlideWrappersFromShadow() {
+      await element.buildInternal();
+      const shadow = element.shadowRoot;
+      await waitForChildPromise(shadow, (shadow) => {
+        return shadow.querySelectorAll('[class*=hideScrollbar]');
+      });
+      await waitFor(
+        () =>
+          shadow.querySelectorAll(`[class*=${styles.hideScrollbar}] `).length >
+          0,
+        'slots rendered'
+      );
+      return shadow.querySelectorAll(
+        `[class*=${styles.hideScrollbar}] [class*=${styles.slideElement}]`
+      );
+    }
+
+    async function getSlidesFromShadow() {
+      const wrappers = await getSlideWrappersFromShadow();
+      const slots = Array.from(wrappers)
+        .map((wrapper) => wrapper.querySelector('slot'))
+        .filter(Boolean);
+      return toArray(slots).reduce(
+        (acc, slot) => acc.concat(slot.assignedElements()),
+        []
+      );
+    }
+
+    it('should render slides and arrows when built', async () => {
+      win.document.body.appendChild(element);
+      await element.buildInternal();
+
+      const renderedSlides = await getSlidesFromShadow();
+      expect(renderedSlides).to.have.ordered.members(userSuppliedChildren);
+      const buttons = element.shadowRoot.querySelectorAll('button');
+      expect(buttons).to.have.length(2);
+    });
+
+    it('should render custom arrows when given', async () => {
+      const customPrev = createElementWithAttributes(win.document, 'button', {
+        'slot': 'prev-arrow',
+      });
+      const customNext = createElementWithAttributes(win.document, 'button', {
+        'slot': 'next-arrow',
+      });
+      element.appendChild(customPrev);
+      element.appendChild(customNext);
+      win.document.body.appendChild(element);
+      await element.buildInternal();
+
+      const renderedSlides = await getSlidesFromShadow();
+      expect(renderedSlides).to.have.ordered.members(userSuppliedChildren);
+
+      const defaultButtons = element.shadowRoot.querySelectorAll('button');
+      expect(defaultButtons).to.have.length(0);
+
+      const slotButtons = element.shadowRoot.querySelectorAll(
+        'slot[name="prev-arrow"], slot[name="next-arrow"]'
+      );
+      expect(slotButtons).to.have.length(2);
+      expect(slotButtons[0].assignedElements()).to.have.ordered.members([
+        customPrev,
+      ]);
+      expect(slotButtons[1].assignedElements()).to.have.ordered.members([
+        customNext,
+      ]);
+    });
+
+    it('should render in preparation for looping with loop prop', async () => {
+      element.setAttribute('loop', '');
+      win.document.body.appendChild(element);
+      await element.buildInternal();
+
+      const renderedSlideWrappers = await getSlideWrappersFromShadow();
+      // Given slides [0][1][2] should be rendered as [2][0][1]. But [2] is
+      // a placeholder.
+      expect(renderedSlideWrappers).to.have.lengthOf(3);
+      expect(
+        renderedSlideWrappers[0].querySelector('slot').assignedElements()
+      ).to.deep.equal([userSuppliedChildren[2]]);
+      expect(
+        renderedSlideWrappers[1].querySelector('slot').assignedElements()
+      ).to.deep.equal([userSuppliedChildren[0]]);
+      expect(
+        renderedSlideWrappers[2].querySelector('slot').assignedElements()
+      ).to.deep.equal([userSuppliedChildren[1]]);
+    });
+
+    describe('imperative api', () => {
+      beforeEach(async () => {
+        element.setAttribute('max-visible-count', '1');
+        win.document.body.appendChild(element);
+        await element.buildInternal();
+      });
+
+      afterEach(() => {
+        win.document.body.removeChild(element);
+      });
+
+      function invocation(method, args = {}) {
+        const source = null;
+        const caller = null;
+        const event = null;
+        const trust = ActionTrust.DEFAULT;
+        return new ActionInvocation(
+          element,
+          method,
+          args,
+          source,
+          caller,
+          event,
+          trust
+        );
+      }
+
+      it('should execute next and prev actions', async () => {
+        const eventSpy = env.sandbox.spy();
+        element.addEventListener('slideChange', eventSpy);
+
+        element.enqueAction(invocation('next'));
+        // These must wait longer than `waitFor` because of
+        // the render on debounced scrolling.
+        await poll(
+          'advanced to next slide',
+          () => eventSpy.callCount > 0,
+          null,
+          1000
+        );
+
+        expect(eventSpy).to.be.calledOnce;
+        expect(eventSpy.firstCall).calledWithMatch({
+          'data': {
+            'index': 1,
+          },
+        });
+
+        element.enqueAction(invocation('prev'));
+        // These must wait longer than `waitFor` because of
+        // the render on debounced scrolling.
+        await poll(
+          'returned to prev slide',
+          () => eventSpy.callCount > 1,
+          null,
+          1000
+        );
+        expect(eventSpy).to.be.calledTwice;
+        expect(eventSpy.secondCall).calledWithMatch({
+          'data': {
+            'index': 0,
+          },
+        });
+      });
+
+      it('should execute goToSlide action', async () => {
+        const eventSpy = env.sandbox.spy();
+        element.addEventListener('slideChange', eventSpy);
+
+        element.enqueAction(invocation('goToSlide', {index: 1}));
+        await waitFor(() => eventSpy.callCount > 0, 'go to slide 1');
+        expect(eventSpy).to.be.calledOnce;
+        expect(eventSpy.firstCall).calledWithMatch({
+          'data': {
+            'index': 1,
+          },
+        });
+
+        element.enqueAction(invocation('goToSlide', {index: 0}));
+        await waitFor(() => eventSpy.callCount > 1, 'returned to first slide');
+        expect(eventSpy).to.be.calledTwice;
+        expect(eventSpy.secondCall).calledWithMatch({
+          'data': {
+            'index': 0,
+          },
+        });
+      });
+    });
+  }
+);
diff --git a/extensions/amp-stream-gallery/1.0/test/test-component.js b/extensions/amp-stream-gallery/1.0/test/test-component.js
new file mode 100644
index 0000000000000..b92579964c4ac
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/test/test-component.js
@@ -0,0 +1,101 @@
+/**
+ * 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {StreamGallery} from '../component';
+import {mount} from 'enzyme';
+
+describes.sandboxed('StreamGallery preact component', {}, () => {
+  it('should render BaseCarousel', () => {
+    const wrapper = mount(
+      <StreamGallery>
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </StreamGallery>
+    );
+    const carousel = wrapper.find('BaseCarousel');
+    expect(carousel).to.have.lengthOf(1);
+    expect(wrapper.find('Arrow')).to.have.lengthOf(2);
+
+    const slides = wrapper.find('[data-slide]');
+    expect(slides).to.have.lengthOf(3);
+
+    expect(slides.first().text()).to.equal('slide 1');
+    expect(slides.at(1).text()).to.equal('slide 2');
+    expect(slides.last().text()).to.equal('slide 3');
+  });
+
+  it('should render custom Arrows when given', () => {
+    const arrowPrev = (props) => (
+      <div {...props} className="my-custom-arrow-prev">
+        left
+      </div>
+    );
+    const arrowNext = (props) => (
+      <div {...props} className="my-custom-arrow-next">
+        right
+      </div>
+    );
+    const wrapper = mount(
+      <StreamGallery arrowPrevAs={arrowPrev} arrowNextAs={arrowNext}>
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+      </StreamGallery>
+    );
+    const arrows = wrapper.find('Arrow');
+    expect(arrows).to.have.lengthOf(2);
+    expect(arrows.first().props().as).to.equal(arrowPrev);
+    expect(arrows.last().props().as).to.equal(arrowNext);
+  });
+
+  it('should not loop by default', () => {
+    const wrapper = mount(
+      <StreamGallery>
+        <div class="my-slide">slide 1</div>
+        <div class="my-slide">slide 2</div>
+        <div class="my-slide">slide 3</div>
+      </StreamGallery>
+    );
+    const slides = wrapper.find('[data-slide]');
+    expect(slides).to.have.lengthOf(3);
+
+    // Given slides [1][2][3] should be rendered as is, but [3] is a
+    // placeholder.
+    expect(slides.first().text()).to.equal('slide 1');
+    expect(slides.at(1).text()).to.equal('slide 2');
+    expect(slides.last().text()).to.equal('slide 3');
+  });
+
+  it('should render in preparation for looping with loop prop', () => {
+    const wrapper = mount(
+      <StreamGallery loop>
+        <div class="my-slide">slide 1</div>
+        <div class="my-slide">slide 2</div>
+        <div class="my-slide">slide 3</div>
+      </StreamGallery>
+    );
+    const slides = wrapper.find('[data-slide]');
+    expect(slides).to.have.lengthOf(3);
+
+    // Given slides [1][2][3] should be rendered as [3][1][2]. But [3] is a
+    // placeholder.
+    expect(slides.at(0).text()).to.equal('slide 3');
+    expect(slides.at(1).text()).to.equal('slide 1');
+    expect(slides.at(2).text()).to.equal('slide 2');
+  });
+});
diff --git a/extensions/amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html b/extensions/amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html
new file mode 100644
index 0000000000000..417022249c62b
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html
@@ -0,0 +1,162 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-stream-gallery tag. See the inline comments.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-stream-gallery" src="https://cdn.ampproject.org/v0/amp-stream-gallery-1.0.js"></script>
+</head>
+<body>
+  <!-- Boolean values -->
+  <section>
+    <!-- Valid: true -->
+    <amp-stream-gallery width="4" height="3" loop="true">
+    </amp-stream-gallery>
+    <!-- Valid: false -->
+    <amp-stream-gallery width="4" height="3" loop="false">
+    </amp-stream-gallery>
+    <!-- Valid: booleans with a media query -->
+    <amp-stream-gallery width="4" height="3" loop="(min-width: 800px) true, false">
+    </amp-stream-gallery>
+    <!-- Valid: booleans with multiple media queries -->
+    <amp-stream-gallery width="4" height="3" loop="(min-width: 800px) true, (max-height: 1000px) true, false">
+    </amp-stream-gallery>
+    <!-- Invalid: no default value-->
+    <amp-stream-gallery width="4" height="3" loop="(min-width: 800px) true">
+    </amp-stream-gallery>
+    <!-- Invalid: no value -->
+    <amp-stream-gallery width="4" height="3" loop>
+    </amp-stream-gallery>
+    <!-- Invalid: incorrect value -->
+    <amp-stream-gallery width="4" height="3" loop="5">
+    </amp-stream-gallery>
+    <!-- Invalid: incorrect in media query -->
+    <amp-stream-gallery width="4" height="3" loop="(min-width: 800px) true, (max-height: 1000px) 5, false">
+    </amp-stream-gallery>
+  </section>
+
+  <!-- Integer values-->
+  <section>
+    <!-- Valid: positive integer value -->
+    <amp-stream-gallery width="4" height="3" min-item-width="200">
+    </amp-stream-gallery>
+    <!-- Valid: integer values with media queries -->
+    <amp-stream-gallery width="4" height="3" min-item-width="(min-width: 800px) 300, 100">
+    </amp-stream-gallery>
+    <!-- Valid: integer values with multiple media queries -->
+    <amp-stream-gallery width="4" height="3" min-item-width="(min-width: 800px) 200, (max-height: 1000px) 300, 100">
+    </amp-stream-gallery>
+    <!-- Invalid: no default value-->
+    <amp-stream-gallery width="4" height="3" min-item-width="(min-width: 800px) 300">
+    </amp-stream-gallery>
+    <!-- Invalid: no value -->
+    <amp-stream-gallery width="4" height="3" min-item-width>
+    </amp-stream-gallery>
+    <!-- Invalid: negative integer value -->
+    <amp-stream-gallery width="4" height="3" min-item-width="-2">
+    </amp-stream-gallery>
+    <!-- Invalid: floating point value -->
+    <amp-stream-gallery width="4" height="3" min-item-width="300.5">
+    </amp-stream-gallery>
+    <!-- Invalid: floating point value in media query -->
+    <amp-stream-gallery width="4" height="3" min-item-width="(min-width: 800px) -300, (max-height: 1000px) 300.5, 1">
+    </amp-stream-gallery>
+  </section>
+
+  <!-- Positive float values-->
+  <section>
+    <!-- Valid: integer value -->
+    <amp-stream-gallery width="4" height="3" min-visible-count="2">
+    </amp-stream-gallery>
+    <!-- Valid: floating point value -->
+    <amp-stream-gallery width="4" height="3" min-visible-count="3.2">
+    </amp-stream-gallery>
+    <!-- Valid: mixed value with one media query -->
+    <amp-stream-gallery width="4" height="3" min-visible-count="(min-width: 800px) 3.2, 1">
+    </amp-stream-gallery>
+    <!-- Valid: mixed values with multiple media queries -->
+    <amp-stream-gallery width="4" height="3" min-visible-count="(min-width: 800px) 3, (max-height: 1000px) 3, 1.1">
+    </amp-stream-gallery>
+    <!-- Invalid: negative integer value -->
+    <amp-stream-gallery width="4" height="3" min-visible-count="-2">
+    </amp-stream-gallery>
+    <!-- Invalid: no default value-->
+    <amp-stream-gallery width="4" height="3" min-visible-count="(min-width: 800px) 3">
+    </amp-stream-gallery>
+    <!-- Invalid: no value -->
+    <amp-stream-gallery width="4" height="3" min-visible-count>
+    </amp-stream-gallery>
+    <!-- Invalid: string value -->
+    <amp-stream-gallery width="4" height="3" min-visible-count="foo">
+    </amp-stream-gallery>
+    <!-- Invalid: negative value in media query -->
+    <amp-stream-gallery width="4" height="3" min-visible-count="(min-width: 800px) -3, (max-height: 1000px) 3, 1">
+    </amp-stream-gallery>
+  </section>
+
+  <!-- String values -->
+  <section>
+    <!-- Valid: always -->
+    <amp-stream-gallery width="4" height="3" controls="always">
+    </amp-stream-gallery>
+    <!-- Valid: auto -->
+    <amp-stream-gallery width="4" height="3" controls="auto">
+    </amp-stream-gallery>
+    <!-- Valid: never -->
+    <amp-stream-gallery width="4" height="3" controls="never">
+    </amp-stream-gallery>
+    <!-- Valid: strings with a media query -->
+    <amp-stream-gallery width="4" height="3" controls="(min-width: 800px) never, auto">
+    </amp-stream-gallery>
+    <!-- Valid: strings with multiple media queries -->
+    <amp-stream-gallery width="4" height="3" controls="(min-width: 800px) always, (max-height: 1000px) auto, never">
+    </amp-stream-gallery>
+    <!-- Invalid: no default value-->
+    <amp-stream-gallery width="4" height="3" controls="(min-width: 800px) always">
+    </amp-stream-gallery>
+    <!-- Invalid: no value -->
+    <amp-stream-gallery width="4" height="3" controls>
+    </amp-stream-gallery>
+    <!-- Invalid: incorrect value -->
+    <amp-stream-gallery width="4" height="3" controls="true">
+    </amp-stream-gallery>
+    <!-- Invalid: incorrect in media query -->
+    <amp-stream-gallery width="4" height="3" controls="(min-width: 800px) auto, (max-height: 1000px) true, never">
+    </amp-stream-gallery>
+  </section>
+
+  <!-- Spaces-->
+  <section>
+    <!-- Valid: spaces between groups -->
+    <amp-stream-gallery width="4" height="3" loop="(min-width: 800px) true, false">
+    </amp-stream-gallery>
+    <!-- Valid: no spaces between groups -->
+    <amp-stream-gallery width="4" height="3" loop="(min-width: 800px) true,(max-height: 1000px) true,false">
+    </amp-stream-gallery>
+    <!-- Invalid: no space between media query and value -->
+    <amp-stream-gallery width="4" height="3" loop="(min-width: 800px)true, false">
+    </amp-stream-gallery>
+  </section>
+</body>
+</html>
diff --git a/extensions/amp-stream-gallery/1.0/test/validator-amp-stream-gallery.out b/extensions/amp-stream-gallery/1.0/test/validator-amp-stream-gallery.out
new file mode 100644
index 0000000000000..63ba0867b7cd8
--- /dev/null
+++ b/extensions/amp-stream-gallery/1.0/test/validator-amp-stream-gallery.out
@@ -0,0 +1,201 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-stream-gallery tag. See the inline comments.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-stream-gallery" src="https://cdn.ampproject.org/v0/amp-stream-gallery-1.0.js"></script>
+|  </head>
+|  <body>
+|    <!-- Boolean values -->
+|    <section>
+|      <!-- Valid: true -->
+|      <amp-stream-gallery width="4" height="3" loop="true">
+|      </amp-stream-gallery>
+|      <!-- Valid: false -->
+|      <amp-stream-gallery width="4" height="3" loop="false">
+|      </amp-stream-gallery>
+|      <!-- Valid: booleans with a media query -->
+|      <amp-stream-gallery width="4" height="3" loop="(min-width: 800px) true, false">
+|      </amp-stream-gallery>
+|      <!-- Valid: booleans with multiple media queries -->
+|      <amp-stream-gallery width="4" height="3" loop="(min-width: 800px) true, (max-height: 1000px) true, false">
+|      </amp-stream-gallery>
+|      <!-- Invalid: no default value-->
+|      <amp-stream-gallery width="4" height="3" loop="(min-width: 800px) true">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:46:4 The attribute 'loop' in tag 'amp-stream-gallery' is set to the invalid value '(min-width: 800px) true'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: no value -->
+|      <amp-stream-gallery width="4" height="3" loop>
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:49:4 The attribute 'loop' in tag 'amp-stream-gallery' is set to the invalid value ''. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: incorrect value -->
+|      <amp-stream-gallery width="4" height="3" loop="5">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:52:4 The attribute 'loop' in tag 'amp-stream-gallery' is set to the invalid value '5'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: incorrect in media query -->
+|      <amp-stream-gallery width="4" height="3" loop="(min-width: 800px) true, (max-height: 1000px) 5, false">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:55:4 The attribute 'loop' in tag 'amp-stream-gallery' is set to the invalid value '(min-width: 800px) true, (max-height: 1000px) 5, false'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|    </section>
+|
+|    <!-- Integer values-->
+|    <section>
+|      <!-- Valid: positive integer value -->
+|      <amp-stream-gallery width="4" height="3" min-item-width="200">
+|      </amp-stream-gallery>
+|      <!-- Valid: integer values with media queries -->
+|      <amp-stream-gallery width="4" height="3" min-item-width="(min-width: 800px) 300, 100">
+|      </amp-stream-gallery>
+|      <!-- Valid: integer values with multiple media queries -->
+|      <amp-stream-gallery width="4" height="3" min-item-width="(min-width: 800px) 200, (max-height: 1000px) 300, 100">
+|      </amp-stream-gallery>
+|      <!-- Invalid: no default value-->
+|      <amp-stream-gallery width="4" height="3" min-item-width="(min-width: 800px) 300">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:71:4 The attribute 'min-item-width' in tag 'amp-stream-gallery' is set to the invalid value '(min-width: 800px) 300'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: no value -->
+|      <amp-stream-gallery width="4" height="3" min-item-width>
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:74:4 The attribute 'min-item-width' in tag 'amp-stream-gallery' is set to the invalid value ''. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: negative integer value -->
+|      <amp-stream-gallery width="4" height="3" min-item-width="-2">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:77:4 The attribute 'min-item-width' in tag 'amp-stream-gallery' is set to the invalid value '-2'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: floating point value -->
+|      <amp-stream-gallery width="4" height="3" min-item-width="300.5">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:80:4 The attribute 'min-item-width' in tag 'amp-stream-gallery' is set to the invalid value '300.5'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: floating point value in media query -->
+|      <amp-stream-gallery width="4" height="3" min-item-width="(min-width: 800px) -300, (max-height: 1000px) 300.5, 1">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:83:4 The attribute 'min-item-width' in tag 'amp-stream-gallery' is set to the invalid value '(min-width: 800px) -300, (max-height: 1000px) 300.5, 1'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|    </section>
+|
+|    <!-- Positive float values-->
+|    <section>
+|      <!-- Valid: integer value -->
+|      <amp-stream-gallery width="4" height="3" min-visible-count="2">
+|      </amp-stream-gallery>
+|      <!-- Valid: floating point value -->
+|      <amp-stream-gallery width="4" height="3" min-visible-count="3.2">
+|      </amp-stream-gallery>
+|      <!-- Valid: mixed value with one media query -->
+|      <amp-stream-gallery width="4" height="3" min-visible-count="(min-width: 800px) 3.2, 1">
+|      </amp-stream-gallery>
+|      <!-- Valid: mixed values with multiple media queries -->
+|      <amp-stream-gallery width="4" height="3" min-visible-count="(min-width: 800px) 3, (max-height: 1000px) 3, 1.1">
+|      </amp-stream-gallery>
+|      <!-- Invalid: negative integer value -->
+|      <amp-stream-gallery width="4" height="3" min-visible-count="-2">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:102:4 The attribute 'min-visible-count' in tag 'amp-stream-gallery' is set to the invalid value '-2'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: no default value-->
+|      <amp-stream-gallery width="4" height="3" min-visible-count="(min-width: 800px) 3">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:105:4 The attribute 'min-visible-count' in tag 'amp-stream-gallery' is set to the invalid value '(min-width: 800px) 3'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: no value -->
+|      <amp-stream-gallery width="4" height="3" min-visible-count>
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:108:4 The attribute 'min-visible-count' in tag 'amp-stream-gallery' is set to the invalid value ''. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: string value -->
+|      <amp-stream-gallery width="4" height="3" min-visible-count="foo">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:111:4 The attribute 'min-visible-count' in tag 'amp-stream-gallery' is set to the invalid value 'foo'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: negative value in media query -->
+|      <amp-stream-gallery width="4" height="3" min-visible-count="(min-width: 800px) -3, (max-height: 1000px) 3, 1">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:114:4 The attribute 'min-visible-count' in tag 'amp-stream-gallery' is set to the invalid value '(min-width: 800px) -3, (max-height: 1000px) 3, 1'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|    </section>
+|
+|    <!-- String values -->
+|    <section>
+|      <!-- Valid: always -->
+|      <amp-stream-gallery width="4" height="3" controls="always">
+|      </amp-stream-gallery>
+|      <!-- Valid: auto -->
+|      <amp-stream-gallery width="4" height="3" controls="auto">
+|      </amp-stream-gallery>
+|      <!-- Valid: never -->
+|      <amp-stream-gallery width="4" height="3" controls="never">
+|      </amp-stream-gallery>
+|      <!-- Valid: strings with a media query -->
+|      <amp-stream-gallery width="4" height="3" controls="(min-width: 800px) never, auto">
+|      </amp-stream-gallery>
+|      <!-- Valid: strings with multiple media queries -->
+|      <amp-stream-gallery width="4" height="3" controls="(min-width: 800px) always, (max-height: 1000px) auto, never">
+|      </amp-stream-gallery>
+|      <!-- Invalid: no default value-->
+|      <amp-stream-gallery width="4" height="3" controls="(min-width: 800px) always">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:136:4 The attribute 'controls' in tag 'amp-stream-gallery' is set to the invalid value '(min-width: 800px) always'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: no value -->
+|      <amp-stream-gallery width="4" height="3" controls>
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:139:4 The attribute 'controls' in tag 'amp-stream-gallery' is set to the invalid value ''. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: incorrect value -->
+|      <amp-stream-gallery width="4" height="3" controls="true">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:142:4 The attribute 'controls' in tag 'amp-stream-gallery' is set to the invalid value 'true'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|      <!-- Invalid: incorrect in media query -->
+|      <amp-stream-gallery width="4" height="3" controls="(min-width: 800px) auto, (max-height: 1000px) true, never">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:145:4 The attribute 'controls' in tag 'amp-stream-gallery' is set to the invalid value '(min-width: 800px) auto, (max-height: 1000px) true, never'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|    </section>
+|
+|    <!-- Spaces-->
+|    <section>
+|      <!-- Valid: spaces between groups -->
+|      <amp-stream-gallery width="4" height="3" loop="(min-width: 800px) true, false">
+|      </amp-stream-gallery>
+|      <!-- Valid: no spaces between groups -->
+|      <amp-stream-gallery width="4" height="3" loop="(min-width: 800px) true,(max-height: 1000px) true,false">
+|      </amp-stream-gallery>
+|      <!-- Invalid: no space between media query and value -->
+|      <amp-stream-gallery width="4" height="3" loop="(min-width: 800px)true, false">
+>>     ^~~~~~~~~
+amp-stream-gallery/1.0/test/validator-amp-stream-gallery.html:158:4 The attribute 'loop' in tag 'amp-stream-gallery' is set to the invalid value '(min-width: 800px)true, false'. (see https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md)
+|      </amp-stream-gallery>
+|    </section>
+|  </body>
+|  </html>
diff --git a/extensions/amp-stream-gallery/OWNERS b/extensions/amp-stream-gallery/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-stream-gallery/OWNERS
+++ b/extensions/amp-stream-gallery/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-stream-gallery/amp-stream-gallery.md b/extensions/amp-stream-gallery/amp-stream-gallery.md
new file mode 100644
index 0000000000000..e2689ef1d2303
--- /dev/null
+++ b/extensions/amp-stream-gallery/amp-stream-gallery.md
@@ -0,0 +1,404 @@
+---
+$category@: layout
+formats:
+  - websites
+teaser:
+  text: Displays multiple similar pieces of content at a time along a horizontal axis, for features like related products or articles.
+experimental: true
+bento: true
+---
+
+<!---
+Copyright 2020 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.
+-->
+
+# amp-stream-gallery
+
+## Usage
+
+A stream gallery for displaying multiple similar pieces of content at a time along a
+horizontal axis. To implement a more customized UX, see
+[`amp-base-carousel`](https://amp.dev/documentation/components/amp-base-carousel/).
+
+_Example:_
+
+In the following example, we use `amp-stream-gallery` to display its content
+in a responsive container, showing a varying amount of its children at a time
+according to the viewport size.
+
+```html
+<amp-stream-gallery width="7.5" height="2" layout="responsive">
+  <amp-img src="img1.png" layout="flex-item"></amp-img>
+  <amp-img src="img2.png" layout="flex-item"></amp-img>
+  <amp-img src="img3.png" layout="flex-item"></amp-img>
+  <amp-img src="img4.png" layout="flex-item"></amp-img>
+  <amp-img src="img5.png" layout="flex-item"></amp-img>
+  <amp-img src="img6.png" layout="flex-item"></amp-img>
+  <amp-img src="img7.png" layout="flex-item"></amp-img>
+</amp-stream-gallery>
+```
+
+Each of the `amp-stream-gallery` component’s immediate children is considered an
+item in the gallery. Each of these nodes may also have arbitrary HTML children.
+
+The gallery consists of an arbitrary number of items, as well as optional
+navigational arrows to go forward or backwards by a given number of items.
+
+The gallery advances between items if the user swipes or uses the customizable
+arrow buttons.
+
+### Standalone use outside valid AMP documents
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+#### Example
+
+The example below demonstrates `amp-stream-gallery` component in standalone use.
+
+[example preview="top-frame" playground="false"]
+
+```html
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-stream-gallery-1.0.css">
+  <script async custom-element="amp-stream-gallery" src="https://cdn.ampproject.org/v0/amp-stream-gallery-1.0.js"></script>
+  <style>
+    amp-stream-gallery {
+      aspect-ratio: 3/1;
+    }
+    amp-stream-gallery > div {
+      aspect-ratio: 1/1;
+    }
+    .red-gradient {
+      background: brown;
+      background: linear-gradient(90deg, brown 50%, lightsalmon 90%, wheat 100%);
+    }
+    .blue-gradient {
+      background: steelblue;
+      background: linear-gradient(90deg, steelblue 50%, plum 90%, lavender 100%);
+    }
+    .green-gradient {
+      background: seagreen;
+      background: linear-gradient(90deg, seagreen 50%, mediumturquoise 90%, turquoise 100%);
+    }
+    .pink-gradient {
+      background: pink;
+      background: linear-gradient(90deg, pink 50%, lightsalmon 90%, wheat 100%);
+    }
+    .yellow-gradient {
+      background: gold;
+      background: linear-gradient(90deg, gold 50%, goldenrod 90%, darkgoldenrod 100%);
+    }
+    .orange-gradient {
+      background: peru;
+      background: linear-gradient(90deg, peru 50%, chocolate 90%, saddlebrown 100%);
+    }
+    .seafoam-gradient {
+      background: darkseagreen;
+      background: linear-gradient(90deg, darkseagreen 50%, lightseagreen 90%, MediumAquaMarine 100%);
+    }
+    .purple-gradient {
+      background: rebeccapurple;
+      background: linear-gradient(90deg, rebeccapurple 50%, mediumpurple 90%, mediumslateblue 100%);
+    }
+    .cyan-gradient {
+      background: darkcyan;
+      background: linear-gradient(90deg, darkcyan 50%, lightcyan 90%, white 100%);
+    }
+  </style>
+</head>
+<amp-stream-gallery id="my-carousel" max-visible-count="3">
+  <div class="red-gradient"></div>
+  <div class="blue-gradient"></div>
+  <div class="green-gradient"></div>
+
+  <div class="pink-gradient"></div>
+  <div class="yellow-gradient"></div>
+  <div class="orange-gradient"></div>
+
+  <div class="seafoam-gradient"></div>
+  <div class="purple-gradient"></div>
+  <div class="cyan-gradient"></div>
+</amp-stream-gallery>
+<div class="buttons" style="margin-top: 8px;">
+  <button id='prev-button'>Go to previous page of slides</button>
+  <button id='next-button'>Go to next page of slides</button>
+  <button id='go-to-button'>Go to slide with green gradient</button>
+</div>
+<script>
+  (async () => {
+    const carousel = document.querySelector('#my-carousel');
+    await customElements.whenDefined('amp-stream-gallery');
+    const api = await carousel.getApi();
+    // programatically advance to next slide
+    api.next();
+    // set up button actions
+    document.querySelector('#prev-button').onclick = () => api.prev();
+    document.querySelector('#next-button').onclick = () => api.next();
+    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);
+  })();
+</script>
+```
+
+[/example]
+
+#### Interactivity and API usage
+
+Bento enabled components in standalone use are highly interactive through their API. In Bento standalone use, the element's API replaces AMP Actions and events and [`amp-bind`](https://amp.dev/documentation/components/amp-bind/?format=websites).
+
+The `amp-stream-gallery` component API is accessible by including the following script tag in your document:
+
+```js
+await customElements.whenDefined('amp-stream-gallery');
+const api = await carousel.getApi();
+```
+
+##### Actions
+
+The `amp-stream-gallery` API allows you to perform the following actions:
+
+**next()**
+Moves the carousel forwards by `advance-count` slides.
+
+```js
+api.next();
+```
+
+**prev()**
+Moves the carousel backwards by `advance-count` slides.
+
+```js
+api.prev();
+```
+
+**goToSlide(index: number)**
+Moves the carousel to the slide specified by the `index` argument.
+Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.
+
+```js
+api.goToSlide(0); // Advance to first slide.
+api.goToSlide(length - 1); // Advance to last slide.
+```
+
+##### Events
+
+The `amp-stream-gallery` API allows you to register and respond to the following events:
+
+**slideChange**
+
+This event is triggered when the index displayed by the carousel has changed.
+The new index is available via `event.data.index`.
+
+```js
+carousel.addEventListener('slideChange', (e) => console.log(e.data.index))
+```
+
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-stream-gallery-1.0.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
+
+**Container type**
+
+The `amp-stream-gallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):
+
+```css
+amp-stream-gallery {
+  height: 100px;
+  width: 100%;
+}
+amp-stream-gallery > * {
+  aspect-ratio: 4/1
+}
+```
+
+### Behavior users should be aware of
+
+#### Slide layout
+
+Slides are automatically sized by the carousel. You should give the slides `layout="flex-item"`:
+
+```html
+<amp-stream-gallery …>
+  <amp-img layout="flex-item" src="…"></amp-img>
+</amp-stream-gallery>
+```
+
+The slides have a default height of `100%` when the carousel is laid out
+horizontally. This can easily be changed with CSS or by using
+`layout="fixed-height"`. When specifying the height, the slide will be
+vertically centered within the carousel.
+
+If you want to horizontally center your slide content, you will want to create a
+wrapping element, and use that to center the content.
+
+## Attributes
+
+### Media Queries
+
+The attributes for `<amp-stream-gallery>` can be configured to use different
+options based on a [media query](./../../docs/spec/amp-html-responsive-attributes.md).
+
+### Behavior
+
+#### controls
+
+Either `"always"`, `"auto"`, or `"never"`, defaults to `"auto"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `"always"`.
+
+-   `always`: Arrows are always displayed.
+-   `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.
+-   `never`: Arrows are never displayed.
+
+#### extra-space
+
+Either `"around"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `"around"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.
+
+#### loop
+
+Either `true` or `false`, defaults to `true`. When true, the carousel will allow
+the user to move from the first item back to the last item and visa versa. There
+must be at least three slides present for looping to occur.
+
+#### outset-arrows
+
+Either `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.
+
+#### peek
+
+A number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.
+
+#### common attributes
+
+This element includes
+[common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
+extended to AMP components.
+
+### Gallery slide visibility
+
+#### min-visible-count
+
+A number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s)
+visible.
+
+#### max-visible-count
+
+A number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.
+
+#### min-item-width
+
+A number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.
+
+#### max-item-width
+
+A number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.
+
+### Slide snapping
+
+#### slide-align
+
+Either `start` or `center`. When start aligning, the start of a slide (e.g. the
+left edge, when horizontal aligning) is aligned with the start of a carousel.
+When center aligning, the center of a slide is aligned with the center of a
+carousel.
+
+#### snap
+
+Either `true` or `false`, defaults to `true`. Determines whether or not the
+carousel should snap on slides when scrolling.
+
+## Actions
+
+### next
+
+Moves the carousel forwards by the calculated number of visible slides.
+
+### prev
+
+Moves the carousel backwards by the calculated number of visible slides.
+
+### goToSlide
+
+Moves the carousel to the slide specified by the `index` argument.
+
+## Events
+
+### slideChange
+
+This event is triggered when the index displayed by the carousel has changed.
+The new index is available via `event.index`.
+
+## Styling
+
+You may use the `amp-stream-gallery` element selector to style the carousel
+freely.
+
+### Customizing Arrow Buttons
+
+Arrow buttons can be customized by passing in your own custom markup. For
+example, you can recreate the default styling with the following HTML and CSS:
+
+```css
+.carousel-prev,
+.carousel-next {
+  filter: drop-shadow(0px 1px 2px #4a4a4a);
+  width: 40px;
+  height: 40px;
+  padding: 20px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.carousel-prev {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M14,7.4 L9.4,12 L14,16.6" fill="none" stroke="#fff" stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" /></svg>');
+}
+
+.carousel-next {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M10,7.4 L14.6,12 L10,16.6" fill="none" stroke="#fff" stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" /></svg>');
+}
+```
+
+```html
+<amp-stream-gallery …>
+  <div>first slide</div>
+  …
+  <button slot="next-arrow" class="carousel-next" aria-label="Next"></button>
+  <button
+    slot="prev-arrow"
+    class="carousel-prev"
+    aria-label="Previous"
+  ></button>
+</amp-stream-gallery>
+```
+
+If you want more customization for the arrow buttons, you can use the `next` and
+`prev` actions. For example, if you want to place buttons under the carousel and
+use the words "Previous" and "Next" instead of having them in the default
+location, you can use the following HTML:
+
+```html
+  <amp-stream-gallery id="carousel-1" …>
+    …
+    <div slot="next-arrow"></div>
+    <div slot="prev-arrow"></div>
+  </amp-stream-gallery>
+  <button on="tap:carousel-1.prev()">Previous</button>
+  <button on="tap:carousel-1.next()">Next</button>
+```
diff --git a/extensions/amp-stream-gallery/validator-amp-stream-gallery.protoascii b/extensions/amp-stream-gallery/validator-amp-stream-gallery.protoascii
new file mode 100644
index 0000000000000..543f541a623cb
--- /dev/null
+++ b/extensions/amp-stream-gallery/validator-amp-stream-gallery.protoascii
@@ -0,0 +1,118 @@
+#
+# Copyright 2020 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.
+#
+
+tags: {  # amp-stream-gallery
+  html_format: AMP
+  tag_name: "SCRIPT"
+  extension_spec: {
+    name: "amp-stream-gallery"
+    version: "1.0"
+    version: "latest"
+  }
+  attr_lists: "common-extension-attrs"
+}
+tags: {  # <amp-stream-gallery>
+  html_format: AMP
+  tag_name: "AMP-STREAM-GALLERY"
+  requires_extension: "amp-stream-gallery"
+  attr_lists: "amp-stream-gallery-common"
+  attr_lists: "extended-amp-global"
+  spec_url: "https://github.com/ampproject/amphtml/blob/master/extensions/amp-stream-gallery/amp-stream-gallery.md"
+  amp_layout: {
+    supported_layouts: FILL
+    supported_layouts: FIXED
+    supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
+    supported_layouts: INTRINSIC
+    supported_layouts: NODISPLAY
+    supported_layouts: RESPONSIVE
+  }
+}
+
+# Examples for media query / value pairs:
+# (min-width: 600px) and (min-height: 800px)  false, true
+# (min-width: 600px) false,(min-width: 600px) true,false
+# true
+attr_lists: {
+  name: "amp-stream-gallery-common"
+  attrs: {
+    name: "controls"
+    # Media query / (always|auto|never)
+    value_regex: "([^,]+\\s+(always|auto|never),\\s*)*(always|auto|never)"
+  }
+  attrs: {
+    name: "extra-space"
+    value: "between"
+  }
+  attrs: {
+    name: "loop"
+    # Media query / boolean pairs
+    value_regex: "([^,]+\\s+(true|false),\\s*)*(true|false)"
+  }
+  attrs: {
+    name: "min-visible-count"
+    # Media query / positive float pairs
+    value_regex: "([^,]+\\s+(\\d+(\\.\\d+)?),\\s*)*(\\d+(\\.\\d+)?)"
+  }
+  attrs: {
+    name: "max-visible-count"
+    # Media query / positive float pairs
+    value_regex: "([^,]+\\s+(\\d+(\\.\\d+)?),\\s*)*(\\d+(\\.\\d+)?)"
+  }
+  attrs: {
+    name: "min-item-width"
+    # Media query / positive integer pairs
+    value_regex: "([^,]+\\s+(\\d+),\\s*)*(\\d+)"
+  }
+  attrs: {
+    name: "max-item-width"
+    # Media query / positive integer pairs
+    value_regex: "([^,]+\\s+(\\d+),\\s*)*(\\d+)"
+  }
+  attrs: {
+    name: "outset-arrows"
+    # Media query / boolean pairs
+    value_regex: "([^,]+\\s+(true|false),\\s*)*(true|false)"
+  }
+  attrs: {
+    name: "peek"
+    # Media query / positive float pairs
+    value_regex: "([^,]+\\s+(\\d+(\\.\\d+)?),\\s*)*(\\d+(\\.\\d+)?)"
+  }
+  attrs: {
+    name: "slide-align"
+    # Media query / (start|center) pairs
+    value_regex: "([^,]+\\s+(start|center),\\s*)*(start|center)"
+  }
+  attrs: {
+    name: "snap"
+    # Media query / boolean pairs
+    value_regex: "([^,]+\\s+(true|false),\\s*)*(true|false)"
+  }
+
+  # amp-bind
+  attrs: { name: "[controls]" }
+  attrs: { name: "[extra-space]" }
+  attrs: { name: "[loop]" }
+  attrs: { name: "[min-visible-count]" }
+  attrs: { name: "[max-visible-count]" } # 0.1 only
+  attrs: { name: "[min-item-width]" }
+  attrs: { name: "[max-item-width]" }
+  attrs: { name: "[outset-arrows]" }
+  attrs: { name: "[peek]" }
+  attrs: { name: "[slide-align]" }
+  attrs: { name: "[snap]" }
+}
diff --git a/extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.css b/extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.css
index 8808215c1a73a..9614ae57951ae 100644
--- a/extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.css
+++ b/extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.css
@@ -15,3 +15,13 @@
  */
 
 @import url("../../../third_party/subscriptions-project/swg-button.css");
+
+
+/**
+ * Disabled Action when  realtime config has not loaded yet
+ * Can be overridden by publisher CSS
+ */
+[subscriptions-action][subscriptions-google-rtc] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
diff --git a/extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js b/extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js
index 4c4f434089633..3599ad83c2772 100644
--- a/extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js
+++ b/extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js
@@ -33,20 +33,35 @@ import {
   Entitlement,
   GrantReason,
 } from '../../amp-subscriptions/0.1/entitlement';
+import {GaaMeteringRegwall} from '../../../third_party/subscriptions-project/swg-gaa';
 import {Services} from '../../../src/services';
 import {SubscriptionsScoreFactor} from '../../amp-subscriptions/0.1/constants.js';
+import {UrlBuilder} from '../../amp-subscriptions/0.1/url-builder';
 import {WindowInterface} from '../../../src/window-interface';
+import {assertHttpsUrl, parseUrlDeprecated} from '../../../src/url';
 import {experimentToggles, isExperimentOn} from '../../../src/experiments';
 import {getData} from '../../../src/event-helper';
+import {getMode} from '../../../src/mode';
+import {getValueForExpr} from '../../../src/core/types/object';
 import {installStylesForDoc} from '../../../src/style-installer';
-import {parseUrlDeprecated} from '../../../src/url';
-import {startsWith} from '../../../src/string';
-import {userAssert} from '../../../src/log';
+import {parseQueryString} from '../../../src/core/types/string/url';
+
+import {devAssert, user, userAssert} from '../../../src/log';
 
 const TAG = 'amp-subscriptions-google';
-const PLATFORM_ID = 'subscribe.google.com';
+const PLATFORM_KEY = 'subscribe.google.com';
 const GOOGLE_DOMAIN_RE = /(^|\.)google\.(com?|[a-z]{2}|com?\.[a-z]{2}|cat)$/;
 
+/** @enum {number} */
+const ShowcaseStrategy = {
+  NONE: 1,
+  LEAD_ARTICLE: 2,
+  EXTENDED_ACCESS: 3,
+};
+
+/** @const */
+const SERVICE_TIMEOUT = 3000;
+
 const SWG_EVENTS_TO_SUPPRESS = {
   [AnalyticsEvent.IMPRESSION_PAYWALL]: true,
   [AnalyticsEvent.IMPRESSION_PAGE_LOAD]: true,
@@ -104,6 +119,15 @@ export class GoogleSubscriptionsPlatform {
      */
     this.serviceAdapter_ = serviceAdapter;
 
+    /** @private {!../../../src/service/ampdoc-impl.AmpDoc} */
+    this.ampdoc_ = ampdoc;
+
+    /** @private @const {!../../../src/service/vsync-impl.Vsync} */
+    this.vsync_ = Services.vsyncFor(ampdoc.win);
+
+    /** @private @const {boolean} */
+    this.isDev_ = getMode().development || getMode().localDev;
+
     /**
      * @private @const
      * {!../../amp-subscriptions/0.1/analytics.SubscriptionAnalytics}
@@ -113,11 +137,23 @@ export class GoogleSubscriptionsPlatform {
       this.handleAnalyticsEvent_.bind(this)
     );
 
+    /** @private @const {!UrlBuilder} */
+    this.urlBuilder_ = new UrlBuilder(
+      this.ampdoc_,
+      this.serviceAdapter_.getReaderId('local')
+    );
+
+    /** @const @private {!../../../src/service/timer-impl.Timer} */
+    this.timer_ = Services.timerFor(this.ampdoc_.win);
+
+    //* @const @private */
+    this.fetcher_ = new AmpFetcher(ampdoc.win);
+
     // Map AMP experiments prefixed with 'swg-' to SwG experiments.
     const ampExperimentsForSwg = Object.keys(experimentToggles(ampdoc.win))
       .filter(
         (exp) =>
-          startsWith(exp, 'swg-') && isExperimentOn(ampdoc.win, /*OK*/ exp)
+          exp.startsWith('swg-') && isExperimentOn(ampdoc.win, /*OK*/ exp)
       )
       .map((exp) => exp.substring(4));
 
@@ -154,14 +190,14 @@ export class GoogleSubscriptionsPlatform {
     this.runtime_.setOnLinkComplete(() => {
       this.onLinkComplete_();
       this.subscriptionAnalytics_.actionEvent(
-        this.getServiceId(),
+        this.getPlatformKey(),
         Action.LINK,
         ActionStatus.SUCCESS
       );
       // TODO(dvoytenko): deprecate separate "link" events.
       this.subscriptionAnalytics_.serviceEvent(
         SubscriptionAnalyticsEvents.LINK_COMPLETE,
-        this.getServiceId()
+        this.getPlatformKey()
       );
     });
     this.runtime_.setOnFlowStarted((e) => {
@@ -187,7 +223,7 @@ export class GoogleSubscriptionsPlatform {
         e.flow == Action.SHOW_OFFERS
       ) {
         this.subscriptionAnalytics_.actionEvent(
-          this.getServiceId(),
+          this.getPlatformKey(),
           e.flow,
           ActionStatus.STARTED,
           params
@@ -198,14 +234,14 @@ export class GoogleSubscriptionsPlatform {
       if (e.flow == 'linkAccount') {
         this.onLinkComplete_();
         this.subscriptionAnalytics_.actionEvent(
-          this.getServiceId(),
+          this.getPlatformKey(),
           Action.LINK,
           ActionStatus.REJECTED
         );
         // TODO(dvoytenko): deprecate separate "link" events.
         this.subscriptionAnalytics_.serviceEvent(
           SubscriptionAnalyticsEvents.LINK_CANCELED,
-          this.getServiceId()
+          this.getPlatformKey()
         );
       } else if (
         e.flow == Action.SUBSCRIBE ||
@@ -214,7 +250,7 @@ export class GoogleSubscriptionsPlatform {
         e.flow == Action.SHOW_OFFERS
       ) {
         this.subscriptionAnalytics_.actionEvent(
-          this.getServiceId(),
+          this.getPlatformKey(),
           e.flow,
           ActionStatus.REJECTED
         );
@@ -237,15 +273,47 @@ export class GoogleSubscriptionsPlatform {
     /** @const @private {!JsonObject} */
     this.serviceConfig_ = platformConfig;
 
+    /** @private viewer */
+    this.viewerPromise_ = Services.viewerForDoc(ampdoc);
+
     /** @private {boolean} */
     this.isGoogleViewer_ = false;
-    this.resolveGoogleViewer_(Services.viewerForDoc(ampdoc));
+    this.resolveGoogleViewer_(this.viewerPromise_);
 
     /** @private {boolean} */
     this.isReadyToPay_ = false;
 
     // Install styles.
     installStylesForDoc(ampdoc, CSS, () => {}, false, TAG);
+
+    /** @private @const {boolean} */
+    this.enableMetering_ = !!this.serviceConfig_['enableMetering'];
+
+    /** @private @const {boolean} */
+    this.enableLAA_ = !!this.serviceConfig_['enableLAA'];
+
+    /**
+     * Allows publishers to turn off SwG entitlement checks.
+     * Some publishers just use LAA entitlements.
+     * SwG entitlement checks are enabled by default, for backward compatibility.
+     * @private @const {boolean}
+     */
+    this.enableEntitlements_ =
+      this.serviceConfig_['enableEntitlements'] === false ? false : true;
+
+    userAssert(
+      !(this.enableLAA_ && this.enableMetering_),
+      'enableLAA and enableMetering are mutually exclusive.'
+    );
+
+    /** @private @const {string} */
+    this.skuMapUrl_ = this.serviceConfig_['skuMapUrl'] || null;
+
+    /** @private {JsonObject} */
+    this.skuMap_ = /** @type {!JsonObject} */ ({});
+
+    /** @private {!Promise} */
+    this.rtcPromise_ = this.maybeFetchRealTimeConfig();
   }
 
   /**
@@ -299,17 +367,19 @@ export class GoogleSubscriptionsPlatform {
     if (linkRequested && this.isGoogleViewer_) {
       this.loginWithAmpReaderId_();
       this.subscriptionAnalytics_.actionEvent(
-        this.getServiceId(),
+        this.getPlatformKey(),
         Action.LINK,
         ActionStatus.STARTED
       );
       // TODO(dvoytenko): deprecate separate "link" events.
       this.subscriptionAnalytics_.serviceEvent(
         SubscriptionAnalyticsEvents.LINK_REQUESTED,
-        this.getServiceId()
+        this.getPlatformKey()
       );
     } else {
-      this.maybeComplete_(this.serviceAdapter_.delegateActionToLocal('login'));
+      this.maybeComplete_(
+        this.serviceAdapter_.delegateActionToLocal('login', null)
+      );
     }
   }
 
@@ -333,7 +403,7 @@ export class GoogleSubscriptionsPlatform {
   /** @private */
   onNativeSubscribeRequest_() {
     this.maybeComplete_(
-      this.serviceAdapter_.delegateActionToLocal(Action.SUBSCRIBE)
+      this.serviceAdapter_.delegateActionToLocal(Action.SUBSCRIBE, null)
     );
   }
 
@@ -349,6 +419,59 @@ export class GoogleSubscriptionsPlatform {
     });
   }
 
+  /**
+   * Fetch a real time config if appropriate.
+   *
+   * Note that we don't return the skuMap, instead we save it.
+   * The creates an intentional race condition.  If the server
+   * doesn't return a skuMap before the user clicks the subscribe button
+   * the button wil lbe disabled.
+   *
+   * We can't wait for the skumap in the button click becasue it will be popup blocked.
+   *
+   * @return {!Promise}
+   */
+  maybeFetchRealTimeConfig() {
+    let timeout = SERVICE_TIMEOUT;
+    if (this.isDev_) {
+      timeout = SERVICE_TIMEOUT * 2;
+    }
+
+    if (!this.skuMapUrl_) {
+      return Promise.resolve();
+    }
+
+    assertHttpsUrl(this.skuMapUrl_, 'skuMapUrl must be valid https Url');
+    // RTC is never pre-render safe
+    return this.ampdoc_
+      .whenFirstVisible()
+      .then(() =>
+        this.urlBuilder_.buildUrl(
+          /**  @type {string } */ (this.skuMapUrl_),
+          /* useAuthData */ false
+        )
+      )
+      .then((url) =>
+        this.timer_.timeoutPromise(
+          timeout,
+          this.fetcher_.fetchCredentialedJson(url)
+        )
+      )
+      .then((resJson) => {
+        userAssert(
+          resJson['subscribe.google.com'],
+          'skuMap does not contain subscribe.google.com section'
+        );
+        this.skuMap_ = resJson['subscribe.google.com'];
+      })
+      .catch((reason) => {
+        throw user().createError(
+          `fetch skuMap failed for ${PLATFORM_KEY}`,
+          reason
+        );
+      });
+  }
+
   /**
    * @param {!SubscribeResponseInterface} response
    * @param {string} eventType
@@ -372,13 +495,99 @@ export class GoogleSubscriptionsPlatform {
     });
 
     this.subscriptionAnalytics_.actionEvent(
-      this.getServiceId(),
+      this.getPlatformKey(),
       eventType,
       ActionStatus.SUCCESS,
       params
     );
   }
 
+  /**
+   * Returns URL params - in its own method so we can stub it for testing.
+   * @return {Object<string>}
+   * @private
+   */
+  getUrlParams_() {
+    return parseQueryString(this.ampdoc_.win.location.search);
+  }
+
+  /**
+   * Returns a LAA entitlement for this article, if it's appropriate.
+   * @return {!Promise<?Entitlement>}
+   * @private
+   */
+  maybeGetLAAEntitlement_() {
+    return this.getShowcaseStrategy_().then((strategy) => {
+      // Verify Google's Showcase strategy for this article.
+      if (strategy !== ShowcaseStrategy.LEAD_ARTICLE) {
+        return null;
+      }
+
+      // All the criteria are met to return an LAA entitlement
+      return new Entitlement({
+        source: 'google:laa',
+        raw: '',
+        service: PLATFORM_KEY,
+        granted: true,
+        grantReason: GrantReason.LAA,
+        dataObject: {},
+        decryptedDocumentKey: null,
+      });
+    });
+  }
+
+  /**
+   * Returns Google's Showcase strategy for this article.
+   * @private
+   * @return {!Promise<!ShowcaseStrategy>}
+   */
+  getShowcaseStrategy_() {
+    // Verify the service config enables a Google Showcase strategy.
+    if (!this.enableLAA_ && !this.enableMetering_) {
+      return Promise.resolve(ShowcaseStrategy.NONE);
+    }
+
+    return this.viewerPromise_.getReferrerUrl().then((referrer) => {
+      // Check referrer.
+      const parsedReferrer = parseUrlDeprecated(referrer);
+      if (
+        (parsedReferrer.protocol !== 'https:' ||
+          !GOOGLE_DOMAIN_RE.test(parsedReferrer.hostname)) &&
+        // Note we don't use the more generic this.isDev_ flag because that can be
+        // triggered by a hash value which would allow non google hostnames to
+        // construct LAA urls.
+        !getMode(this.ampdoc_.win).localDev
+      ) {
+        return ShowcaseStrategy.NONE;
+      }
+
+      // Parse URL params.
+      const urlParams = this.getUrlParams_();
+
+      // Verify timestamp.
+      if (parseInt(urlParams[`gaa_ts`], 16) < Date.now() / 1000) {
+        return ShowcaseStrategy.NONE;
+      }
+
+      // Verify a few params exist.
+      if (!urlParams[`gaa_n`] || !urlParams[`gaa_sig`]) {
+        return ShowcaseStrategy.NONE;
+      }
+
+      // Determine Google's Showcase strategy.
+      if (urlParams[`gaa_at`] === 'la' && this.enableLAA_) {
+        return ShowcaseStrategy.LEAD_ARTICLE;
+      } else if (
+        (urlParams[`gaa_at`] === 'la' || urlParams[`gaa_at`] === 'g') &&
+        this.enableMetering_
+      ) {
+        return ShowcaseStrategy.EXTENDED_ACCESS;
+      } else {
+        return ShowcaseStrategy.NONE;
+      }
+    });
+  }
+
   /** @override */
   isPrerenderSafe() {
     /**
@@ -386,72 +595,226 @@ export class GoogleSubscriptionsPlatform {
      * entitlement at prerender time does not leak any private
      * information.  If it's not a google viewer then we wait
      * for the page to be visible to avoid leaking that the
-     * page was prerendered
+     * page was prerendered.
+     *
+     * If this article enables Showcase metering, then it's not prerender safe.
+     * This extension could load a publisher URL to render a Google Sign-In button.
      */
-    return this.isGoogleViewer_;
+    return this.isGoogleViewer_ && !this.enableMetering_;
   }
 
   /** @override */
   getEntitlements() {
-    const encryptedDocumentKey = this.serviceAdapter_.getEncryptedDocumentKey(
-      'google.com'
+    const encryptedDocumentKey =
+      this.serviceAdapter_.getEncryptedDocumentKey('google.com');
+    userAssert(
+      !(this.enableLAA_ && encryptedDocumentKey),
+      `enableLAA cannot be used when the document is encrypted`
     );
-    return this.runtime_
-      .getEntitlements(encryptedDocumentKey)
-      .then((swgEntitlements) => {
-        // Get and store the isReadyToPay signal which is independent of
-        // any entitlments existing.
-        if (swgEntitlements.isReadyToPay) {
-          this.isReadyToPay_ = true;
+
+    return this.maybeGetLAAEntitlement_().then((laaEntitlement) => {
+      if (laaEntitlement) {
+        return laaEntitlement;
+      }
+
+      // Allow publishers to disable SwG entitlement checks.
+      // Some publishers just want LAA entitlements.
+      if (!this.enableEntitlements_) {
+        return null;
+      }
+
+      const showcaseStrategyPromise = this.getShowcaseStrategy_();
+      const meteringStatePromise = this.serviceAdapter_.loadMeteringState();
+      const promises = Promise.all([
+        showcaseStrategyPromise,
+        meteringStatePromise,
+      ]);
+
+      return promises.then((results) => {
+        const showcaseStrategy = results[0];
+        const meteringState = results[1];
+
+        const entitlementsParams = {};
+
+        // Add encryption param.
+        if (encryptedDocumentKey) {
+          entitlementsParams.encryption = {encryptedDocumentKey};
         }
 
-        // Get the specifc entitlement we're looking for
-        let swgEntitlement = swgEntitlements.getEntitlementForThis();
-        let granted = false;
-        if (swgEntitlement && swgEntitlement.source) {
-          granted = true;
-        } else if (
-          swgEntitlements.entitlements.length &&
-          swgEntitlements.entitlements[0].products.length
+        // Add metering param.
+        if (
+          showcaseStrategy === ShowcaseStrategy.EXTENDED_ACCESS &&
+          meteringState
         ) {
-          // We didn't find a grant so see if there is a non granting
-          // and return that. Note if we start returning multiple non
-          // granting we'll need to refactor to handle returning an
-          // array of Entitlement objects.
-          // #TODO(jpettitt) - refactor to handle multi entitlement case
-          swgEntitlement = swgEntitlements.entitlements[0];
-        } else {
-          return null;
+          // Make sure SwG sends a fresh request, instead of using cache.
+          this.runtime_.clear();
+
+          entitlementsParams.metering = {state: meteringState};
+
+          // Remember we requested metering entitlements.
+          // This helps avoid redundant fetches for metering entitlements.
+          this.serviceAdapter_.rememberMeteringEntitlementsWereFetched();
         }
-        swgEntitlements.ack();
-        return new Entitlement({
-          source: swgEntitlement.source,
-          raw: swgEntitlements.raw,
-          service: PLATFORM_ID,
-          granted,
-          // if it's granted it must be a subscriber
-          grantReason: granted ? GrantReason.SUBSCRIBER : null,
-          dataObject: swgEntitlement.json(),
-          decryptedDocumentKey: swgEntitlements.decryptedDocumentKey,
-        });
+
+        return this.runtime_
+          .getEntitlements(entitlementsParams)
+          .then((swgEntitlements) =>
+            this.createAmpEntitlement(swgEntitlements)
+          );
       });
+    });
+  }
+
+  /**
+   * Returns an AMP entitlement based on SwG entitlements.
+   * @param {!Entitlements} swgEntitlements
+   * @return {Entitlement}
+   */
+  createAmpEntitlement(swgEntitlements) {
+    // Get and store the isReadyToPay signal which is independent of
+    // any entitlments existing.
+    if (swgEntitlements.isReadyToPay) {
+      this.isReadyToPay_ = true;
+    }
+
+    let swgEntitlement = swgEntitlements.getEntitlementForThis();
+    let granted = false;
+    if (swgEntitlement && swgEntitlement.source) {
+      granted = true;
+    } else if (
+      swgEntitlements.entitlements.length &&
+      swgEntitlements.entitlements[0].products.length
+    ) {
+      // We didn't find a grant so see if there is a non granting
+      // and return that. Note if we start returning multiple non
+      // granting we'll need to refactor to handle returning an
+      // array of Entitlement objects.
+      // #TODO(jpettitt) - refactor to handle multi entitlement case
+      swgEntitlement = swgEntitlements.entitlements[0];
+    } else {
+      return null;
+    }
+    swgEntitlements.ack();
+
+    // Determine grant reason.
+    let grantReason;
+    if (granted) {
+      if (swgEntitlement.source === 'google:metering') {
+        grantReason = GrantReason.METERING;
+      } else {
+        grantReason = GrantReason.SUBSCRIBER;
+      }
+    } else {
+      grantReason = null;
+    }
+
+    return new Entitlement({
+      source: swgEntitlement.source,
+      raw: swgEntitlements.raw,
+      service: PLATFORM_KEY,
+      granted,
+      // if it's granted it must be a subscriber
+      grantReason,
+      dataObject: swgEntitlement.json(),
+      decryptedDocumentKey: swgEntitlements.decryptedDocumentKey,
+    });
   }
 
   /** @override */
-  getServiceId() {
-    return PLATFORM_ID;
+  getPlatformKey() {
+    return PLATFORM_KEY;
   }
 
   /** @override */
-  activate(entitlement, grantEntitlement) {
+  activate(entitlement, grantEntitlement, continueAuthorizationFlow) {
     const best = grantEntitlement || entitlement;
-    // Offers or abbreviated offers may need to be shown depending on
-    // whether the access has been granted and whether user is a subscriber.
-    if (!best.granted) {
-      this.runtime_.showOffers({list: 'amp'});
-    } else if (!best.isSubscriber()) {
-      this.runtime_.showAbbrvOffer({list: 'amp'});
-    }
+
+    const showcaseStrategyPromise = this.getShowcaseStrategy_();
+    const meteringStatePromise = this.serviceAdapter_.loadMeteringState();
+    const promises = Promise.all([
+      showcaseStrategyPromise,
+      meteringStatePromise,
+    ]);
+
+    promises.then((results) => {
+      const showcaseStrategy = results[0];
+      const meteringState = results[1];
+
+      if (showcaseStrategy === ShowcaseStrategy.EXTENDED_ACCESS) {
+        // Show the Regwall, so the user can get
+        // a metering state that leads to a
+        // granting entitlement.
+        // After the Regwall flow completes, then continue authorization flow.
+        if (!best.granted && !meteringState) {
+          this.showMeteringRegwall_().then(continueAuthorizationFlow);
+          return;
+        }
+
+        // Consume the metering entitlement.
+        if (best.granted && !best.isSubscriber()) {
+          this.runtime_.consumeShowcaseEntitlementJwt(
+            best.raw,
+            continueAuthorizationFlow
+          );
+          return;
+        }
+      }
+
+      // Offers or abbreviated offers may need to be shown depending on
+      // whether the access has been granted and whether user is a subscriber.
+      if (!best.granted) {
+        this.runtime_.showOffers({list: 'amp'});
+      } else if (!best.isSubscriber()) {
+        this.runtime_.showAbbrvOffer({list: 'amp'});
+      }
+    });
+  }
+
+  /**
+   * Asks user to register an account with the publisher.
+   * Returns a promise that resolves when the process completes.
+   * @return {!Promise}
+   */
+  showMeteringRegwall_() {
+    // Show the Showcase Regwall.
+    const googleSignInDetailsPromise = GaaMeteringRegwall.show({
+      // Specify a URL that renders a Google Sign-In button.
+      iframeUrl: this.serviceConfig_['googleSignInHelperUrl'],
+    });
+    const ampReaderIdPromise = this.serviceAdapter_.getReaderId('local');
+
+    // Register the user with the publisher.
+    const registerUserPromise = Promise.all([
+      googleSignInDetailsPromise,
+      ampReaderIdPromise,
+    ]).then((results) => {
+      const googleSignInDetails = results[0];
+      const ampReaderId = results[1];
+
+      const url = this.serviceConfig_['extendedAccessRegistrationUrl'];
+      const postBody = {
+        googleSignInDetails,
+        ampReaderId,
+      };
+
+      return this.fetcher_.sendPostToPublisher(url, postBody);
+    });
+
+    // The publisher responds with a metering state.
+    // Let's save it.
+    const saveMeteringStatePromise = registerUserPromise.then(
+      (publisherResponse) => {
+        const meteringState =
+          publisherResponse &&
+          publisherResponse['metering'] &&
+          publisherResponse['metering']['state'];
+
+        return this.serviceAdapter_.saveMeteringState(meteringState);
+      }
+    );
+
+    // That's all.
+    return saveMeteringStatePromise;
   }
 
   /** @override */
@@ -521,30 +884,69 @@ export class GoogleSubscriptionsPlatform {
   }
 
   /** @override */
-  executeAction(action) {
+  executeAction(action, sourceId) {
     /**
-     * The contribute and subscribe flows are not called
-     * directly with a sku to avoid baking sku detail into
-     * a page that may be cached for an extended time.
-     * Instead we use showOffers and showContributionOptions
-     * which get sku info from the server.
-     *
      * Note: we do handle events form the contribute and
      * subscribe flows elsewhere since they are invoked after
      * offer selection.
      */
+    let mappedSku, carouselOptions;
+    /*
+     * If the id of the source element (sourceId) is in a map supplied via
+     * the skuMap Url we use that to lookup which sku to associate this button
+     * with.
+     */
+    const rtcPending = sourceId
+      ? this.ampdoc_
+          .getElementById(sourceId)
+          .hasAttribute('subscriptions-google-rtc')
+      : false;
+    // if subscriptions-google-rtc is set then this element is configured by the
+    // rtc url but has not yet been configured so we ignore it.
+    // Once the rtc resolves the attribute is changed to subscriptions-google-rtc-set.
+    if (rtcPending) {
+      return;
+    }
+    if (sourceId && this.skuMap_) {
+      mappedSku = getValueForExpr(this.skuMap_, `${sourceId}.sku`);
+      carouselOptions = getValueForExpr(
+        this.skuMap_,
+        `${sourceId}.carouselOptions`
+      );
+    }
     if (action == Action.SUBSCRIBE) {
-      this.runtime_.showOffers({
-        list: 'amp',
-        isClosable: true,
-      });
+      if (mappedSku) {
+        // publisher provided single sku
+        this.runtime_.subscribe(mappedSku);
+      } else if (carouselOptions) {
+        // publisher provided carousel options, must always be closable
+        carouselOptions.isClosable = true;
+        this.runtime_.showOffers(carouselOptions);
+      } else {
+        // no mapping just use the amp carousel
+        this.runtime_.showOffers({
+          list: 'amp',
+          isClosable: true,
+        });
+      }
       return Promise.resolve(true);
     }
+    // Same idea as above but it's contribute instead of subscribe
     if (action == Action.CONTRIBUTE) {
-      this.runtime_.showContributionOptions({
-        list: 'amp',
-        isClosable: true,
-      });
+      if (mappedSku) {
+        // publisher provided single sku
+        this.runtime_.contribute(mappedSku);
+      } else if (carouselOptions) {
+        // publisher provided carousel options, must always be closable
+        carouselOptions.isClosable = true;
+        this.runtime_.showContributionOptions(carouselOptions);
+      } else {
+        // no mapping just use the amp carousel
+        this.runtime_.showContributionOptions({
+          list: 'amp',
+          isClosable: true,
+        });
+      }
       return Promise.resolve(true);
     }
     if (action == Action.LOGIN) {
@@ -589,6 +991,29 @@ export class GoogleSubscriptionsPlatform {
       default:
       // do nothing
     }
+    // enable any real time buttons once it's resolved.
+    this.rtcPromise_.then(() => {
+      this.vsync_.mutate(() =>
+        Object.keys(/** @type {!Object} */ (this.skuMap_)).forEach(
+          (elementId) => {
+            const element = this.ampdoc_.getElementById(elementId);
+            if (element) {
+              devAssert(
+                element.hasAttribute('subscriptions-google-rtc'),
+                `Trying to set real time config on element '${elementId}' with missing 'subscriptions-google-rtc' attrbute`
+              );
+              element.setAttribute('subscriptions-google-rtc-set', '');
+              element.removeAttribute('subscriptions-google-rtc');
+            } else {
+              user().warn(
+                TAG,
+                `Element "{elemendId}" in real time config not found`
+              );
+            }
+          }
+        )
+      );
+    });
   }
 }
 
@@ -624,6 +1049,23 @@ export class AmpFetcher {
     return this.xhr_.fetch(input, opt_init); //needed to kepp closure happy
   }
 
+  /** @override */
+  sendPost(url, message) {
+    const init = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      credentials: 'include',
+      body:
+        'f.req=' +
+        JSON.stringify(/** @type {JsonObject} */ (message.toArray(false))),
+    };
+    return this.fetch(url, init).then(
+      (response) => (response && response.json()) || {}
+    );
+  }
+
   /**
    * POST data to a URL endpoint, do not wait for a response.
    * @param {string} url
@@ -651,6 +1093,31 @@ export class AmpFetcher {
     };
     this.fetch(url, init);
   }
+
+  /**
+   * Sends POST request, with a JSON payload, to a publisher URL.
+   * @param {string} url
+   * @param {!JsonObject} payload
+   * @return {!Promise<!JsonObject>}
+   */
+  sendPostToPublisher(url, payload) {
+    const init = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      ampCors: true,
+      credentials: 'include',
+      body: JSON.stringify(payload),
+    };
+
+    const fetchPromise = this.fetch(url, init);
+    const responsePromise = fetchPromise.then(
+      (response) => (response && response.json()) || {}
+    );
+
+    return responsePromise;
+  }
 }
 
 // Register the extension services.
@@ -666,7 +1133,7 @@ AMP.extension(TAG, '0.1', function (AMP) {
       const element = ampdoc.getHeadNode();
       Services.subscriptionsServiceForDoc(element).then((service) => {
         service.registerPlatform(
-          PLATFORM_ID,
+          PLATFORM_KEY,
           (platformConfig, serviceAdapter) => {
             return platformService.createPlatform(
               platformConfig,
diff --git a/extensions/amp-subscriptions-google/0.1/test-e2e/test-amp-subscriptions-google.js b/extensions/amp-subscriptions-google/0.1/test-e2e/test-amp-subscriptions-google.js
index 6ce20dab9b345..47fba0d9ab8e3 100644
--- a/extensions/amp-subscriptions-google/0.1/test-e2e/test-amp-subscriptions-google.js
+++ b/extensions/amp-subscriptions-google/0.1/test-e2e/test-amp-subscriptions-google.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'amp-subscriptions-google',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-subscriptions-google/swg.amp.html',
+    fixture: 'amp-subscriptions-google/swg.amp.html',
     environments: ['single'],
   },
   (env) => {
diff --git a/extensions/amp-subscriptions-google/0.1/test/test-amp-subscriptions-google.js b/extensions/amp-subscriptions-google/0.1/test/test-amp-subscriptions-google.js
index 9cb44b41e7e90..379df0890e497 100644
--- a/extensions/amp-subscriptions-google/0.1/test/test-amp-subscriptions-google.js
+++ b/extensions/amp-subscriptions-google/0.1/test/test-amp-subscriptions-google.js
@@ -33,6 +33,7 @@ import {
   Entitlement,
   GrantReason,
 } from '../../../amp-subscriptions/0.1/entitlement';
+import {GaaMeteringRegwall} from '../../../../third_party/subscriptions-project/swg-gaa';
 import {PageConfig} from '../../../../third_party/subscriptions-project/config';
 import {ServiceAdapter} from '../../../amp-subscriptions/0.1/service-adapter';
 import {Services} from '../../../../src/services';
@@ -117,7 +118,9 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
   let ackStub;
   let element;
   let entitlementResponse;
+  let rtcButtonElement;
   let win;
+  let subscriptionService;
 
   beforeEach(() => {
     win = env.win;
@@ -130,11 +133,15 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
     xhr = Services.xhrFor(env.win);
     viewer = Services.viewerForDoc(ampdoc);
     ampdoc.params_['viewerUrl'] = 'https://www.google.com/other';
-    serviceAdapter = new ServiceAdapter(null);
+    subscriptionService = {};
+    serviceAdapter = new ServiceAdapter(subscriptionService);
     serviceAdapterMock = env.sandbox.mock(serviceAdapter);
     env.sandbox
       .stub(serviceAdapter, 'getPageConfig')
       .callsFake(() => pageConfig);
+    env.sandbox
+      .stub(serviceAdapter, 'getReaderId')
+      .callsFake(() => Promise.resolve('ari1'));
     const analytics = new SubscriptionAnalytics(ampdoc.getRootNode());
     env.sandbox.stub(serviceAdapter, 'getAnalytics').callsFake(() => analytics);
     analyticsMock = env.sandbox.mock(analytics);
@@ -180,12 +187,17 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
         ConfiguredRuntime.prototype,
         'showContributionOptions'
       ),
+      subscribe: env.sandbox.stub(ConfiguredRuntime.prototype, 'subscribe'),
       showOffers: env.sandbox.stub(ConfiguredRuntime.prototype, 'showOffers'),
       showAbbrvOffer: env.sandbox.stub(
         ConfiguredRuntime.prototype,
         'showAbbrvOffer'
       ),
       linkAccount: env.sandbox.stub(ConfiguredRuntime.prototype, 'linkAccount'),
+      consumeShowcaseEntitlementJwt: env.sandbox.stub(
+        ConfiguredRuntime.prototype,
+        'consumeShowcaseEntitlementJwt'
+      ),
     };
     ackStub = env.sandbox.stub(Entitlements.prototype, 'ack');
     toggleExperiment(win, 'swg-gpay-api', true);
@@ -199,6 +211,13 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
     toggleExperiment(win, 'swg-gpay-api', false);
   });
 
+  /** Awaits N times. Allows promises to resolve. */
+  async function flush(n = 100) {
+    for (let i = 0; i < n; i++) {
+      await 'tick';
+    }
+  }
+
   function callback(stub) {
     return stub.args[0][0];
   }
@@ -229,6 +248,221 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
     ]);
   });
 
+  it('should throw if enableLAA and enableMetering are set', () => {
+    expect(
+      () =>
+        new GoogleSubscriptionsPlatform(
+          ampdoc,
+          {enableLAA: true, enableMetering: true},
+          serviceAdapter
+        )
+    ).to.throw(/enableLAA and enableMetering are mutually exclusive/);
+  });
+
+  it('should ignore enableLAA and fallback if url params are missing', async () => {
+    env.sandbox
+      .stub(viewer, 'getReferrerUrl')
+      .callsFake(() => Promise.resolve('http://localhost'));
+    platform = new GoogleSubscriptionsPlatform(
+      ampdoc,
+      {enableLAA: true},
+      serviceAdapter
+    );
+    const fetchStub = env.sandbox.stub(xhr, 'fetchJson').callsFake(() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            entitlements: {},
+          }),
+      })
+    );
+
+    await platform.getEntitlements();
+    expect(fetchStub).to.be.calledOnce;
+  });
+
+  it('should ignore enableLAA and not fallback if url params are missing and enableEntitlements is false', async () => {
+    env.sandbox
+      .stub(viewer, 'getReferrerUrl')
+      .callsFake(() => Promise.resolve('http://localhost'));
+    platform = new GoogleSubscriptionsPlatform(
+      ampdoc,
+      {enableLAA: true, enableEntitlements: false},
+      serviceAdapter
+    );
+    const fetchStub = env.sandbox.stub(xhr, 'fetchJson').callsFake(() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            entitlements: {},
+          }),
+      })
+    );
+
+    await platform.getEntitlements();
+    expect(fetchStub).to.not.be.called;
+  });
+
+  it('should ignore enableLAA if url params have expired', async () => {
+    env.sandbox
+      .stub(viewer, 'getReferrerUrl')
+      .callsFake(() => Promise.resolve('http://localhost'));
+    platform = new GoogleSubscriptionsPlatform(
+      ampdoc,
+      {enableLAA: true},
+      serviceAdapter
+    );
+
+    env.sandbox.stub(platform, 'getUrlParams_').returns({
+      'gaa_ts': (Date.now() / 1000 - 10).toString(16),
+      'gaa_at': 'la',
+      'gaa_sig': 'signature',
+      'gaa_n': 123456,
+    });
+
+    const fetchStub = env.sandbox.stub(xhr, 'fetchJson').callsFake(() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            entitlements: {},
+          }),
+      })
+    );
+    await platform.getEntitlements();
+    expect(fetchStub).to.be.calledOnce;
+  });
+
+  it('should return LAA if url params present and are in timestamp', async () => {
+    env.sandbox
+      .stub(viewer, 'getReferrerUrl')
+      .callsFake(() => Promise.resolve('http://localhost'));
+    platform = new GoogleSubscriptionsPlatform(
+      ampdoc,
+      {enableLAA: true},
+      serviceAdapter
+    );
+    env.sandbox.stub(platform, 'getUrlParams_').returns({
+      'gaa_ts': (Date.now() / 1000 + 10).toString(16),
+      'gaa_at': 'la',
+      'gaa_sig': 'signature',
+      'gaa_n': 123456,
+    });
+    const fetchStub = env.sandbox.stub(xhr, 'fetchJson').callsFake(() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            entitlements: {},
+          }),
+      })
+    );
+    const ents = await platform.getEntitlements();
+    expect(ents.service).to.not.be.null;
+    expect(ents.source).to.equal('google:laa');
+    expect(fetchStub).to.not.be.called;
+  });
+
+  it('should ignore valid LAA if referrer domain is not allowed', async () => {
+    env.sandbox
+      .stub(viewer, 'getReferrerUrl')
+      .callsFake(() => Promise.resolve('http://www.example.com'));
+    platform = new GoogleSubscriptionsPlatform(
+      ampdoc,
+      {enableLAA: true, enableEntitlements: false},
+      serviceAdapter
+    );
+    ampdoc.win.__AMP_MODE.localDev = false;
+    env.sandbox.stub(platform, 'getUrlParams_').returns({
+      'gaa_ts': (Date.now() / 1000 + 10).toString(16),
+      'gaa_at': 'la',
+      'gaa_sig': 'signature',
+      'gaa_n': 123456,
+    });
+    const fetchStub = env.sandbox.stub(xhr, 'fetchJson').callsFake(() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            entitlements: {},
+          }),
+      })
+    );
+
+    const ents = await platform.getEntitlements();
+    expect(ents).to.be.null;
+    expect(fetchStub).to.not.be.called;
+  });
+
+  it('should ignore valid LAA if referrer protocol is not allowed', async () => {
+    env.sandbox
+      .stub(viewer, 'getReferrerUrl')
+      .callsFake(() => Promise.resolve('http://google.com'));
+    platform = new GoogleSubscriptionsPlatform(
+      ampdoc,
+      {enableLAA: true, enableEntitlements: false},
+      serviceAdapter
+    );
+    ampdoc.win.__AMP_MODE.localDev = false;
+    env.sandbox.stub(platform, 'getUrlParams_').returns({
+      'gaa_ts': (Date.now() / 1000 + 10).toString(16),
+      'gaa_at': 'la',
+      'gaa_sig': 'signature',
+      'gaa_n': 123456,
+    });
+    const fetchStub = env.sandbox.stub(xhr, 'fetchJson').callsFake(() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            entitlements: {},
+          }),
+      })
+    );
+
+    const ents = await platform.getEntitlements();
+    expect(ents).to.be.null;
+    expect(fetchStub).to.not.be.called;
+  });
+
+  it('should request metering entitlements if URL params are present and timestamp is valid', async () => {
+    env.sandbox
+      .stub(viewer, 'getReferrerUrl')
+      .callsFake(() => Promise.resolve('http://localhost'));
+    platform = new GoogleSubscriptionsPlatform(
+      ampdoc,
+      {enableMetering: true},
+      serviceAdapter
+    );
+    env.sandbox.stub(platform, 'getUrlParams_').returns({
+      'gaa_ts': (Date.now() / 1000 + 10).toString(16),
+      'gaa_at': 'g',
+      'gaa_sig': 'signature',
+      'gaa_n': 123456,
+    });
+    env.sandbox
+      .stub(serviceAdapter, 'loadMeteringState')
+      .resolves({id: 'abc123'});
+    const fetchStub = env.sandbox.stub(xhr, 'fetchJson').callsFake(() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            entitlements: [
+              {
+                source: 'google:metering',
+                products: ['example.org:basic'],
+                subscriptionToken: 'tok1',
+              },
+            ],
+          }),
+      })
+    );
+    const ents = await platform.getEntitlements();
+    expect(ents.service).to.not.be.null;
+    expect(ents.source).to.equal('google:metering');
+
+    const fetchUrl = fetchStub.getCall(0).args[0];
+    expect(fetchUrl).to.equal(
+      'https://news.google.com/swg/_/api/v1/publication/example.org/entitlements?encodedParams=eyJtZXRlcmluZyI6eyJjbGllbnRUeXBlcyI6WzFdLCJvd25lciI6ImV4YW1wbGUub3JnIiwicmVzb3VyY2UiOnsiaGFzaGVkQ2Fub25pY2FsVXJsIjoiMjcwM2YyYjZlZjBlYWFhODEzNzZhMThmYWE3N2E1OTAwOTc1Zjc3MDVkNWQ4YjZlMWEzNzJkNWY2YzJiOTdiYjU5ZjI4M2Q3MzdiNmQ5YWI3N2M1YTNkODQ4YzZlY2UyMDdjZDYwMzU4M2NjMzIyZGQ4MGFiMGI5MzA5MmM2NTAifSwic3RhdGUiOnsiaWQiOiJhYmMxMjMiLCJhdHRyaWJ1dGVzIjpbXX19fQ'
+    );
+  });
+
   it('should proxy fetch via AMP fetcher', async () => {
     const fetchStub = env.sandbox
       .stub(xhr, 'fetchJson')
@@ -326,15 +560,17 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
     expect(methods.showAbbrvOffer).to.not.be.called;
   });
 
-  it('should show offers on activate when not granted', () => {
+  it('should show offers on activate when not granted', async () => {
     platform.activate(new Entitlement({service: PLATFORM_ID, granted: false}));
+    await flush();
+
     expect(methods.showOffers).to.be.calledOnce.calledWithExactly({
       list: 'amp',
     });
     expect(methods.showAbbrvOffer).to.not.be.called;
   });
 
-  it('should show abbrv offer on activate when granted non-subscriber', () => {
+  it('should show abbrv offer on activate when granted non-subscriber', async () => {
     platform.activate(
       new Entitlement({
         service: PLATFORM_ID,
@@ -342,6 +578,8 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
         grantReason: GrantReason.METERING,
       })
     );
+    await flush();
+
     expect(methods.showAbbrvOffer).to.be.calledOnce.calledWithExactly({
       list: 'amp',
     });
@@ -360,7 +598,7 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
     expect(methods.showAbbrvOffer).to.not.be.called;
   });
 
-  it('should override show offers with the grant non-subscriber', () => {
+  it('should override show offers with the grant non-subscriber', async () => {
     const entitlement = new Entitlement({service: PLATFORM_ID, granted: false});
     const grantEntitlement = new Entitlement({
       service: 'local',
@@ -368,16 +606,64 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
       grantReason: GrantReason.METERING,
     });
     platform.activate(entitlement, grantEntitlement);
+    await flush();
+
     expect(methods.showOffers).to.not.be.called;
     expect(methods.showAbbrvOffer).to.be.calledOnce;
   });
 
+  it('should consume showcase entitlement, if appropriate', async () => {
+    platform = new GoogleSubscriptionsPlatform(
+      ampdoc,
+      {enableMetering: true},
+      serviceAdapter
+    );
+    env.sandbox.stub(platform, 'getUrlParams_').returns({
+      'gaa_ts': (Date.now() / 1000 + 10).toString(16),
+      'gaa_at': 'g',
+      'gaa_sig': 'signature',
+      'gaa_n': 123456,
+    });
+    const entitlement = new Entitlement({service: PLATFORM_ID, granted: true});
+    const grantEntitlement = new Entitlement({
+      service: 'local',
+      granted: true,
+      grantReason: GrantReason.METERING,
+    });
+    platform.activate(entitlement, grantEntitlement);
+    await flush();
+
+    expect(methods.consumeShowcaseEntitlementJwt).to.be.called;
+  });
+
+  it('should show showcase regwall, if appropriate', async () => {
+    platform = new GoogleSubscriptionsPlatform(
+      ampdoc,
+      {enableMetering: true},
+      serviceAdapter
+    );
+    env.sandbox.stub(platform, 'getUrlParams_').returns({
+      'gaa_ts': (Date.now() / 1000 + 10).toString(16),
+      'gaa_at': 'g',
+      'gaa_sig': 'signature',
+      'gaa_n': 123456,
+    });
+    env.sandbox.stub(serviceAdapter, 'loadMeteringState').resolves(null);
+    env.sandbox.stub(platform.fetcher_, 'sendPostToPublisher').resolves();
+    env.sandbox.stub(GaaMeteringRegwall, 'show').resolves();
+    env.sandbox.stub(serviceAdapter, 'saveMeteringState').resolves();
+    const entitlement = new Entitlement({service: PLATFORM_ID, granted: false});
+    const continueSpy = env.sandbox.spy();
+    platform.activate(entitlement, entitlement, continueSpy);
+    await flush();
+
+    expect(platform.fetcher_.sendPostToPublisher).to.be.calledOnce;
+    expect(GaaMeteringRegwall.show).to.be.calledOnce;
+    expect(serviceAdapter.saveMeteringState).to.be.calledOnce;
+    expect(continueSpy).to.be.calledOnce;
+  });
+
   it('should start linking flow when requested', async () => {
-    serviceAdapterMock
-      .expects('getReaderId')
-      .withExactArgs('local')
-      .returns(Promise.resolve('ari1'))
-      .once();
     serviceAdapterMock.expects('delegateActionToLocal').never();
     callback(callbacks.loginRequest)({linkRequested: true});
     await 'Event loop tick';
@@ -389,7 +675,7 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
   it('should delegate login when linking not requested', () => {
     serviceAdapterMock
       .expects('delegateActionToLocal')
-      .withExactArgs(Action.LOGIN)
+      .withExactArgs(Action.LOGIN, null)
       .returns(Promise.resolve(false))
       .once();
     callback(callbacks.loginRequest)({linkRequested: false});
@@ -400,7 +686,7 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
     platform.isGoogleViewer_ = false;
     serviceAdapterMock
       .expects('delegateActionToLocal')
-      .withExactArgs(Action.LOGIN)
+      .withExactArgs(Action.LOGIN, null)
       .returns(Promise.resolve(false))
       .once();
     callback(callbacks.loginRequest)({linkRequested: true});
@@ -467,7 +753,7 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
   describe('should reauthorize on complete subscribe', () => {
     let productId;
     let entitlements;
-    const serviceId = 'serviceId';
+    const platformKey = 'platformKey';
 
     afterEach(() => {
       analyticsMock
@@ -505,7 +791,7 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
     it('should work with poorly formatted entitlements', () => {
       productId = 'unknown subscriptionToken';
       entitlements = new Entitlements(
-        serviceId,
+        platformKey,
         null,
         [new SwgEntitlement(null, [productId], null)],
         productId
@@ -518,7 +804,7 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
         productId,
       });
       entitlements = new Entitlements(
-        serviceId,
+        platformKey,
         null,
         [new SwgEntitlement('google', [productId], token)],
         productId
@@ -529,7 +815,7 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
   it('should delegate native subscribe request', () => {
     serviceAdapterMock
       .expects('delegateActionToLocal')
-      .withExactArgs(Action.SUBSCRIBE)
+      .withExactArgs(Action.SUBSCRIBE, null)
       .returns(Promise.resolve(false))
       .once();
     callback(callbacks.subscribeRequest)();
@@ -539,7 +825,7 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
     const loginResult = Promise.resolve(true);
     serviceAdapterMock
       .expects('delegateActionToLocal')
-      .withExactArgs(Action.LOGIN)
+      .withExactArgs(Action.LOGIN, null)
       .returns(loginResult)
       .once();
     callback(callbacks.loginRequest)({linkRequested: false});
@@ -552,7 +838,7 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
     const loginResult = Promise.resolve(false);
     serviceAdapterMock
       .expects('delegateActionToLocal')
-      .withExactArgs(Action.LOGIN)
+      .withExactArgs(Action.LOGIN, null)
       .returns(loginResult)
       .once();
     callback(callbacks.loginRequest)({linkRequested: false});
@@ -565,7 +851,7 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
     const loginResult = Promise.resolve(true);
     serviceAdapterMock
       .expects('delegateActionToLocal')
-      .withExactArgs(Action.SUBSCRIBE)
+      .withExactArgs(Action.SUBSCRIBE, null)
       .returns(loginResult)
       .once();
     callback(callbacks.subscribeRequest)();
@@ -703,6 +989,57 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
     expect(executeStub).to.be.calledWith({list: 'amp', isClosable: true});
   });
 
+  it('should do nothing if rtc mapped button is not read ', () => {
+    // rtc button
+    rtcButtonElement = env.win.document.createElement('button');
+    rtcButtonElement.setAttribute('subscriptions-google-rtc', '');
+    rtcButtonElement.id = 'rtcTestButton';
+    env.win.document.body.appendChild(rtcButtonElement);
+    platform.skuMap_ = {
+      rtcTestButton: {
+        sku: 'testSku',
+      },
+    };
+    const executeStub = platform.runtime_.subscribe;
+    platform.executeAction(Action.SUBSCRIBE, 'rtcTestButton');
+    expect(executeStub).to.not.be.called;
+  });
+
+  it('should show subscribe flow if single sku is mapped ', () => {
+    // rtc button
+    rtcButtonElement = env.win.document.createElement('button');
+    rtcButtonElement.setAttribute('subscriptions-google-rtc-set', '');
+    rtcButtonElement.id = 'rtcTestButton';
+    env.win.document.body.appendChild(rtcButtonElement);
+    platform.skuMap_ = {
+      rtcTestButton: {
+        sku: 'testSku',
+      },
+    };
+    const executeStub = platform.runtime_.subscribe;
+    platform.executeAction(Action.SUBSCRIBE, 'rtcTestButton');
+    expect(executeStub).to.be.calledWith('testSku');
+  });
+
+  it("should show offers if multiple sku's are mapped", () => {
+    // rtc button
+    rtcButtonElement = env.win.document.createElement('button');
+    rtcButtonElement.setAttribute('subscriptions-google-rtc-set', '');
+    rtcButtonElement.id = 'rtcTestButton';
+    env.win.document.body.appendChild(rtcButtonElement);
+    platform.skuMap_ = {
+      rtcTestButton: {
+        carouselOptions: {skus: ['testSku1', 'testsku2']},
+      },
+    };
+    const executeStub = platform.runtime_.showOffers;
+    platform.executeAction(Action.SUBSCRIBE, 'rtcTestButton');
+    expect(executeStub).to.be.calledWith({
+      isClosable: true,
+      skus: ['testSku1', 'testsku2'],
+    });
+  });
+
   it('should show contributions if contribute action is delegated', () => {
     const executeStub = platform.runtime_.showContributionOptions;
     platform.executeAction(Action.CONTRIBUTE);
@@ -710,11 +1047,6 @@ describes.realWin('amp-subscriptions-google', {amp: true}, (env) => {
   });
 
   it('should link accounts if login action is delegated', async () => {
-    serviceAdapterMock
-      .expects('getReaderId')
-      .withExactArgs('local')
-      .returns(Promise.resolve('ari1'))
-      .once();
     const executeStub = platform.runtime_.linkAccount;
     platform.executeAction(Action.LOGIN);
     await 'Event loop tick';
diff --git a/extensions/amp-subscriptions-google/OWNERS b/extensions/amp-subscriptions-google/OWNERS
index 19fb613271605..bca1de28b7c18 100644
--- a/extensions/amp-subscriptions-google/OWNERS
+++ b/extensions/amp-subscriptions-google/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
@@ -7,8 +7,8 @@
       owners: [
         {name: 'chenshay'},
         {name: 'chrisantaki'},
-        {name: 'dparikh'},
         {name: 'dvoytenko'},
+        {name: 'elijahsoria'},
         {name: 'jpettitt'},
         {name: 'qidonna'},
       ],
diff --git a/extensions/amp-subscriptions-google/amp-subscriptions-google.md b/extensions/amp-subscriptions-google/amp-subscriptions-google.md
index 50c1615432bd0..ca0d0d8f8afb2 100644
--- a/extensions/amp-subscriptions-google/amp-subscriptions-google.md
+++ b/extensions/amp-subscriptions-google/amp-subscriptions-google.md
@@ -64,6 +64,53 @@ The `amp-subscriptions-google` is configured as part of `amp-subscriptions` conf
 </head>
 ```
 
+## Real Time Config (rtc)
+
+Real Time Config allows the publisher to specify the sku or sku's for a subscribe button at page load time. The allows user specific offers, time limited offers etc.
+
+To enable rtc add a `skuMapUrl` to the `subscribe.google.com` service.
+
+```html
+<script type="application/json" id="amp-subscriptions">
+  {
+    "services": [
+      {
+        // Local service configuration
+      },
+      {
+        "serviceId": "subscribe.google.com"
+        "skuMapUrl": "https://example.com/sky/map/endpoint"
+      }
+    ]
+  }
+</script>
+```
+
+The `skuMapUrl` is called on page load. It should be a map of element id's and configurations:
+
+```JSON
+{
+  "subscribe.google.com": {
+    // button that goes straight to purchase flow
+    "elementId": {
+      "sku": "sku"
+     },
+    // button that launches an offer carousel
+    "anotherElementId": {
+      "carouselOptions": {
+          "skus": ["basic", "premium_monthly"],
+      }
+    }
+  }
+}
+```
+
+Each configuration corresponds to the sku or skus associated with the button.
+
+To enable a button for rtc add the `subscriptions-google-rtc` attribute. If this attribute is present the button will be disabled until the skuMapUrl request is completed. Once the skuMap is resolved the `subscriptions-google-rtc` attribute will be removed and `subscriptions-google-rtc-set` attribute added. These attributes may be used for CSS styling, however it is recommended that the button not be hidden if it will cause a page re-layout when displayed.
+
+Note: The `skuMapUrl` can be the same as the local service auth url as the JSON objects do not conflict. If the auth url is cacheable (`max-age=1` is sufficient) this will allow in a single request to the server to resove authentication and mapping.
+
 ## Entitlements pingback
 
 As described in [amp-subscriptions](../amp-subscriptions/amp-subscriptions.md#pingback-endpoint), if a `pingbackUrl` is specified by the local service, the entitlements response returned by the "winning" service will be sent to the `pingbackUrl` via a POST request.
@@ -85,7 +132,7 @@ If `subscribe.google.com` is the "winning" service, the request to the `pingback
 }
 ```
 
-Where `data` matches the [entitlements response](https://github.com/subscriptions-project/swg-js/blob/master/docs/entitlements-flow.md#entitlement-response) format.
+Where `data` matches the [entitlements response](https://github.com/subscriptions-project/swg-js/blob/main/docs/entitlements-flow.md#entitlement-response) format.
 
 ## Example with markup
 
diff --git a/extensions/amp-subscriptions/0.1/actions.js b/extensions/amp-subscriptions/0.1/actions.js
index 97118d1becbdb..5f99207feb721 100644
--- a/extensions/amp-subscriptions/0.1/actions.js
+++ b/extensions/amp-subscriptions/0.1/actions.js
@@ -15,10 +15,11 @@
  */
 
 import {ActionStatus} from './analytics';
-import {assertHttpsUrl, parseQueryString} from '../../../src/url';
+import {assertHttpsUrl} from '../../../src/url';
 import {dev, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {openLoginDialog} from '../../amp-access/0.1/login-dialog';
+import {parseQueryString} from '../../../src/core/types/string/url';
 
 const TAG = 'amp-subscriptions';
 const LOCAL = 'local';
diff --git a/extensions/amp-subscriptions/0.1/amp-subscriptions.js b/extensions/amp-subscriptions/0.1/amp-subscriptions.js
index 38acf31ff818b..e6156eb083e55 100644
--- a/extensions/amp-subscriptions/0.1/amp-subscriptions.js
+++ b/extensions/amp-subscriptions/0.1/amp-subscriptions.js
@@ -25,6 +25,7 @@ import {Dialog} from './dialog';
 import {DocImpl} from './doc-impl';
 import {ENTITLEMENTS_REQUEST_TIMEOUT} from './constants';
 import {Entitlement, GrantReason} from './entitlement';
+import {Metering} from './metering';
 import {
   PageConfig as PageConfigInterface,
   PageConfigResolver,
@@ -37,13 +38,13 @@ import {SubscriptionPlatform as SubscriptionPlatformInterface} from './subscript
 import {ViewerSubscriptionPlatform} from './viewer-subscription-platform';
 import {ViewerTracker} from './viewer-tracker';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict, getValueForExpr} from '../../../src/core/types/object';
 import {getMode} from '../../../src/mode';
-import {getValueForExpr, tryParseJson} from '../../../src/json';
 import {getWinOrigin} from '../../../src/url';
 import {installStylesForDoc} from '../../../src/style-installer';
 import {isStoryDocument} from '../../../src/utils/story';
 import {localSubscriptionPlatformFactory} from './local-subscription-platform';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 /** @const */
 const TAG = 'amp-subscriptions';
@@ -126,10 +127,13 @@ export class SubscriptionService {
     this.cid_ = Services.cidForDoc(ampdoc);
 
     /** @private {!Object<string, ?Promise<string>>} */
-    this.serviceIdToReaderIdPromiseMap_ = {};
+    this.platformKeyToReaderIdPromiseMap_ = {};
 
     /** @private {!CryptoHandler} */
     this.cryptoHandler_ = new CryptoHandler(ampdoc);
+
+    /** @private {?Metering} */
+    this.metering_ = null;
   }
 
   /**
@@ -145,7 +149,7 @@ export class SubscriptionService {
 
       if (this.doesViewerProvideAuth_) {
         this.delegateAuthToViewer_();
-        this.startAuthorizationFlow_(false /** doPlatformSelection */);
+        this.startAuthorizationFlow_(false /** shouldActivatePlatform */);
         return;
       }
 
@@ -154,11 +158,11 @@ export class SubscriptionService {
         'Services not configured in service config'
       );
 
-      const serviceIds = this.platformConfig_['services'].map(
+      const platformKeys = this.platformConfig_['services'].map(
         (service) => service['serviceId'] || 'local'
       );
 
-      this.initializePlatformStore_(serviceIds);
+      this.initializePlatformStore_(platformKeys);
 
       /** @type {!Array} */ (this.platformConfig_['services']).forEach(
         (service) => {
@@ -174,7 +178,7 @@ export class SubscriptionService {
 
       isStoryDocument(this.ampdoc_).then((isStory) => {
         // Delegates the platform selection and activation call if is story.
-        this.startAuthorizationFlow_(!isStory /** doPlatformSelection */);
+        this.startAuthorizationFlow_(!isStory /** shouldActivatePlatform */);
       });
     });
     return this;
@@ -212,12 +216,12 @@ export class SubscriptionService {
    * Returns encrypted document key if it exists.
    * This key is needed for requesting a different key
    * that decrypts locked content on the page.
-   * @param {string} serviceId Who you want to decrypt the key.
-   *                           For example: 'google.com'
+   * @param {string} platformKey Who you want to decrypt the key.
+   *                             For example: 'google.com'
    * @return {?string}
    */
-  getEncryptedDocumentKey(serviceId) {
-    return this.cryptoHandler_.getEncryptedDocumentKey(serviceId);
+  getEncryptedDocumentKey(platformKey) {
+    return this.cryptoHandler_.getEncryptedDocumentKey(platformKey);
   }
 
   /**
@@ -233,21 +237,21 @@ export class SubscriptionService {
   }
 
   /**
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @return {!Promise<string>}
    */
-  getReaderId(serviceId) {
-    let readerIdPromise = this.serviceIdToReaderIdPromiseMap_[serviceId];
+  getReaderId(platformKey) {
+    let readerIdPromise = this.platformKeyToReaderIdPromiseMap_[platformKey];
     if (!readerIdPromise) {
       const consent = Promise.resolve();
       // Scope is kept "amp-access" by default to avoid unnecessary CID
       // rotation.
       const scope =
-        'amp-access' + (serviceId == 'local' ? '' : '-' + serviceId);
+        'amp-access' + (platformKey == 'local' ? '' : '-' + platformKey);
       readerIdPromise = this.cid_.then((cid) =>
         cid.get({scope, createCookieIfNotPresent: true}, consent)
       );
-      this.serviceIdToReaderIdPromiseMap_[serviceId] = readerIdPromise;
+      this.platformKeyToReaderIdPromiseMap_[platformKey] = readerIdPromise;
     }
     return readerIdPromise;
   }
@@ -264,17 +268,17 @@ export class SubscriptionService {
    * This method registers an auto initialized subcription platform with this
    * service.
    *
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @param {function(!JsonObject, !ServiceAdapter):!SubscriptionPlatformInterface} subscriptionPlatformFactory
    * @return {!Promise}
    */
-  registerPlatform(serviceId, subscriptionPlatformFactory) {
+  registerPlatform(platformKey, subscriptionPlatformFactory) {
     return this.initialize_().then(() => {
       if (this.doesViewerProvideAuth_) {
         return; // External platforms should not register if viewer provides auth
       }
       const matchedServices = this.platformConfig_['services'].filter(
-        (service) => (service.serviceId || 'local') === serviceId
+        (service) => (service.serviceId || 'local') === platformKey
       );
 
       const matchedServiceConfig = userAssert(
@@ -288,17 +292,17 @@ export class SubscriptionService {
       );
 
       this.platformStore_.resolvePlatform(
-        subscriptionPlatform.getServiceId(),
+        subscriptionPlatform.getPlatformKey(),
         subscriptionPlatform
       );
       this.subscriptionAnalytics_.serviceEvent(
         SubscriptionAnalyticsEvents.PLATFORM_REGISTERED,
-        subscriptionPlatform.getServiceId()
+        subscriptionPlatform.getPlatformKey()
       );
       // Deprecated event fired for backward compatibility
       this.subscriptionAnalytics_.serviceEvent(
         SubscriptionAnalyticsEvents.PLATFORM_REGISTERED_DEPRECATED,
-        subscriptionPlatform.getServiceId()
+        subscriptionPlatform.getPlatformKey()
       );
       this.fetchEntitlements_(subscriptionPlatform);
     });
@@ -312,85 +316,6 @@ export class SubscriptionService {
     return this.platformStore_.selectPlatformForLogin();
   }
 
-  /**
-   * Reset all platforms and re-fetch entitlements after an
-   * external event (for example a login)
-   * @return {!Promise}
-   */
-  resetPlatforms() {
-    return this.initialize_().then(() => {
-      this.platformStore_ = this.platformStore_.resetPlatformStore();
-      this.maybeAddFreeEntitlement_(this.platformStore_);
-
-      this.renderer_.toggleLoading(true);
-
-      this.platformStore_
-        .getAvailablePlatforms()
-        .forEach((subscriptionPlatform) => {
-          this.fetchEntitlements_(subscriptionPlatform);
-        });
-      this.subscriptionAnalytics_.serviceEvent(
-        SubscriptionAnalyticsEvents.PLATFORM_REAUTHORIZED,
-        ''
-      );
-      // deprecated event fired for backward compatibility
-      this.subscriptionAnalytics_.serviceEvent(
-        SubscriptionAnalyticsEvents.PLATFORM_REAUTHORIZED_DEPRECATED,
-        ''
-      );
-      this.startAuthorizationFlow_();
-    });
-  }
-
-  /**
-   * Delegates an action to local platform.
-   * @param {string} action
-   * @return {!Promise<boolean>}
-   */
-  delegateActionToLocal(action) {
-    return this.delegateActionToService(action, 'local');
-  }
-
-  /**
-   * Delegates an action to specified platform.
-   * @param {string} action
-   * @param {string} serviceId
-   * @return {!Promise<boolean>}
-   */
-  delegateActionToService(action, serviceId) {
-    return new Promise((resolve) => {
-      this.platformStore_.onPlatformResolves(serviceId, (platform) => {
-        devAssert(platform, 'Platform is not registered');
-        this.subscriptionAnalytics_.event(
-          SubscriptionAnalyticsEvents.ACTION_DELEGATED,
-          dict({
-            'action': action,
-            'serviceId': serviceId,
-          }),
-          dict({
-            'action': action,
-            'status': ActionStatus.STARTED,
-          })
-        );
-        resolve(platform.executeAction(action));
-      });
-    });
-  }
-
-  /**
-   * Delegate UI decoration to another service.
-   * @param {!Element} element
-   * @param {string} serviceId
-   * @param {string} action
-   * @param {?JsonObject} options
-   */
-  decorateServiceAction(element, serviceId, action, options) {
-    this.platformStore_.onPlatformResolves(serviceId, (platform) => {
-      devAssert(platform, 'Platform is not registered');
-      platform.decorateUI(element, action, options);
-    });
-  }
-
   /**
    * Returns promise that resolves when page and platform configs are processed.
    * @return {!Promise}
@@ -403,12 +328,16 @@ export class SubscriptionService {
       this.initialized_ = Promise.all([
         this.getPlatformConfig_(),
         pageConfigResolver.resolveConfig(),
-      ]).then((promiseValues) => {
-        /** @type {!JsonObject} */
-        this.platformConfig_ = promiseValues[0];
-        /** @type {!PageConfigInterface} */
-        this.pageConfig_ = promiseValues[1];
-      });
+      ])
+        .then((promiseValues) => {
+          /** @type {!JsonObject} */
+          this.platformConfig_ = promiseValues[0];
+          /** @type {!PageConfigInterface} */
+          this.pageConfig_ = promiseValues[1];
+        })
+        .then(() => {
+          this.maybeEnableMetering_();
+        });
     }
     return this.initialized_;
   }
@@ -454,7 +383,7 @@ export class SubscriptionService {
     // Hide loading animation.
     this.renderer_.toggleLoading(false);
 
-    // Track view.
+    // Set Pingback viewer timer
     this.viewTrackerPromise_ = this.viewerTracker_.scheduleView(2000);
 
     // If the viewer is providing a paywall we don't want the publisher
@@ -469,12 +398,12 @@ export class SubscriptionService {
   }
 
   /**
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @param {!./entitlement.Entitlement} entitlement
    * @private
    */
-  resolveEntitlementsToStore_(serviceId, entitlement) {
-    this.platformStore_.resolveEntitlement(serviceId, entitlement);
+  resolveEntitlementsToStore_(platformKey, entitlement) {
+    this.platformStore_.resolveEntitlement(platformKey, entitlement);
     if (entitlement.decryptedDocumentKey) {
       this.cryptoHandler_.tryToDecryptDocument(
         entitlement.decryptedDocumentKey
@@ -482,7 +411,7 @@ export class SubscriptionService {
     }
     this.subscriptionAnalytics_.serviceEvent(
       SubscriptionAnalyticsEvents.ENTITLEMENT_RESOLVED,
-      serviceId
+      platformKey
     );
   }
 
@@ -500,10 +429,11 @@ export class SubscriptionService {
         this.cryptoHandler_.isDocumentEncrypted() &&
         !entitlements.decryptedDocumentKey
       ) {
-        const logChannel = platform.getServiceId() == 'local' ? user() : dev();
+        const logChannel =
+          platform.getPlatformKey() == 'local' ? user() : dev();
         logChannel.error(
           TAG,
-          `${platform.getServiceId()}: Subscription granted and encryption enabled, ` +
+          `${platform.getPlatformKey()}: Subscription granted and encryption enabled, ` +
             'but no decrypted document key returned.'
         );
         return null;
@@ -537,18 +467,18 @@ export class SubscriptionService {
         .then((entitlement) => {
           entitlement =
             entitlement ||
-            Entitlement.empty(subscriptionPlatform.getServiceId());
+            Entitlement.empty(subscriptionPlatform.getPlatformKey());
           this.resolveEntitlementsToStore_(
-            subscriptionPlatform.getServiceId(),
+            subscriptionPlatform.getPlatformKey(),
             entitlement
           );
           return entitlement;
         })
         .catch((reason) => {
-          const serviceId = subscriptionPlatform.getServiceId();
-          this.platformStore_.reportPlatformFailureAndFallback(serviceId);
+          const platformKey = subscriptionPlatform.getPlatformKey();
+          this.platformStore_.reportPlatformFailureAndFallback(platformKey);
           throw user().createError(
-            `fetch entitlements failed for ${serviceId}`,
+            `fetch entitlements failed for ${platformKey}`,
             reason
           );
         })
@@ -556,15 +486,15 @@ export class SubscriptionService {
   }
 
   /**
-   * Initializes the PlatformStore with the service ids.
-   * @param {!Array<string>} serviceIds
+   * Initializes the PlatformStore with a list of platform keys.
+   * @param {!Array<string>} platformKeys
    */
-  initializePlatformStore_(serviceIds) {
+  initializePlatformStore_(platformKeys) {
     const fallbackEntitlement = this.platformConfig_['fallbackEntitlement']
       ? Entitlement.parseFromJson(this.platformConfig_['fallbackEntitlement'])
       : Entitlement.empty('local');
     this.platformStore_ = new PlatformStore(
-      serviceIds,
+      platformKeys,
       this.platformConfig_['score'],
       fallbackEntitlement
     );
@@ -575,9 +505,9 @@ export class SubscriptionService {
    * Delegates authentication to viewer
    */
   delegateAuthToViewer_() {
-    const serviceIds = ['local'];
+    const platformKeys = ['local'];
     const origin = getWinOrigin(this.ampdoc_.win);
-    this.initializePlatformStore_(serviceIds);
+    this.initializePlatformStore_(platformKeys);
 
     /** @type {!Array} */ (this.platformConfig_['services']).forEach(
       (service) => {
@@ -609,16 +539,113 @@ export class SubscriptionService {
 
   /**
    * Unblock document based on grant state and selected platform
-   * @param {boolean=} doPlatformSelection
+   * @param {boolean=} shouldActivatePlatform
+   * @return {!Promise}
    * @private
    */
-  startAuthorizationFlow_(doPlatformSelection = true) {
-    this.platformStore_.getGrantStatus().then((grantState) => {
-      this.processGrantState_(grantState);
-      this.performPingback_();
+  startAuthorizationFlow_(shouldActivatePlatform = true) {
+    const grantStatusPromise = this.platformStore_.getGrantStatus();
+    const grantEntitlementPromise = this.platformStore_.getGrantEntitlement();
+    const promises = Promise.all([grantStatusPromise, grantEntitlementPromise]);
+
+    return promises.then((results) => {
+      const granted = results[0];
+      const entitlement = results[1];
+
+      // Create shortcut to continue authorization flow.
+      const continueAuthorizationFlow = () =>
+        this.handleGrantState_({granted, shouldActivatePlatform});
+
+      if (!this.metering_) {
+        // Move along. This article doesn't need AMP metering's logic.
+        continueAuthorizationFlow();
+        return;
+      }
+
+      // AMP metering's logic:
+      // - Granted?
+      //   - Yes.
+      //     - From AMP metering?
+      //       - Yes. Consume entitlements.
+      //       - No. Handle grant state normally.
+      //   - No.
+      //     - Have we fetched AMP metering entitlements before?
+      //       - Yes. Handle grant state normally.
+      //       - No.
+      //         - Do we have AMP metering state?
+      //           - Yes. Fetch metering entitlements.
+      //           - No. Show regwall.
+
+      const meteringPlatform = this.platformStore_.getPlatform(
+        this.metering_.platformKey
+      );
+
+      if (granted) {
+        const grantCameFromAmpMetering =
+          entitlement &&
+          entitlement.grantReason === GrantReason.METERING &&
+          entitlement.service === this.metering_.platformKey;
+
+        if (!grantCameFromAmpMetering) {
+          // Move along. AMP metering isn't responsible for this grant.
+          continueAuthorizationFlow();
+          return;
+        }
+
+        // Consume metering entitlements.
+        const finishAuthorizationFlow = () => {
+          this.handleGrantState_({
+            granted: true,
+            shouldActivatePlatform: false,
+          });
+        };
+        meteringPlatform.activate(
+          entitlement,
+          entitlement,
+          finishAuthorizationFlow
+        );
+        return;
+      }
+
+      if (this.metering_.entitlementsWereFetchedWithCurrentMeteringState) {
+        // Move along.
+        // The current metering state isn't granting.
+        continueAuthorizationFlow();
+        return;
+      }
+
+      // Ask metering platform to either (1) fetch entitlements or (2) show regwall.
+      this.metering_.loadMeteringState().then((meteringState) => {
+        if (meteringState) {
+          // Fetch metering entitlements.
+          this.resetPlatform(this.metering_.platformKey);
+        } else {
+          // Show regwall.
+          const emptyEntitlement = Entitlement.empty('local');
+          const restartAuthorizationFlow = () => this.startAuthorizationFlow_();
+          meteringPlatform.activate(
+            emptyEntitlement,
+            emptyEntitlement,
+            restartAuthorizationFlow
+          );
+        }
+      });
     });
+  }
 
-    if (doPlatformSelection) {
+  /**
+   * Handles grant status updates.
+   * @param {{
+   *   granted: boolean,
+   *   shouldActivatePlatform: boolean,
+   * }} params
+   * @private
+   */
+  handleGrantState_({granted, shouldActivatePlatform}) {
+    this.processGrantState_(granted);
+    this.performPingback_();
+
+    if (shouldActivatePlatform) {
       this.selectAndActivatePlatform_();
     }
   }
@@ -638,7 +665,7 @@ export class SubscriptionService {
       const selectedPlatform = resolvedValues[1];
       const grantEntitlement = resolvedValues[2];
       const selectedEntitlement = this.platformStore_.getResolvedEntitlementFor(
-        selectedPlatform.getServiceId()
+        selectedPlatform.getPlatformKey()
       );
       const bestEntitlement = grantEntitlement || selectedEntitlement;
 
@@ -646,12 +673,12 @@ export class SubscriptionService {
 
       this.subscriptionAnalytics_.serviceEvent(
         SubscriptionAnalyticsEvents.PLATFORM_ACTIVATED,
-        selectedPlatform.getServiceId()
+        selectedPlatform.getPlatformKey()
       );
       // Deprecated events are fire for backwards compatibility
       this.subscriptionAnalytics_.serviceEvent(
         SubscriptionAnalyticsEvents.PLATFORM_ACTIVATED_DEPRECATED,
-        selectedPlatform.getServiceId()
+        selectedPlatform.getPlatformKey()
       );
       if (bestEntitlement.granted) {
         this.subscriptionAnalytics_.serviceEvent(
@@ -661,45 +688,150 @@ export class SubscriptionService {
       } else {
         this.subscriptionAnalytics_.serviceEvent(
           SubscriptionAnalyticsEvents.PAYWALL_ACTIVATED,
-          selectedPlatform.getServiceId()
+          selectedPlatform.getPlatformKey()
         );
         this.subscriptionAnalytics_.serviceEvent(
           SubscriptionAnalyticsEvents.ACCESS_DENIED,
-          selectedPlatform.getServiceId()
+          selectedPlatform.getPlatformKey()
         );
       }
     });
   }
 
   /**
-   * Performs pingback on local platform.
+   * Performs pingback on configured platforms.
    * @return {?Promise}
    * @private
    */
   performPingback_() {
     if (this.viewTrackerPromise_) {
-      const localPlatform = this.platformStore_.getLocalPlatform();
-      return this.viewTrackerPromise_
-        .then(() => {
-          if (localPlatform.pingbackReturnsAllEntitlements()) {
-            return this.platformStore_.getAllPlatformsEntitlements();
-          }
-          return this.platformStore_
-            .getGrantEntitlement()
-            .then(
-              (grantStateEntitlement) =>
-                grantStateEntitlement || Entitlement.empty('local')
-            );
-        })
-        .then((resolveEntitlements) => {
-          if (localPlatform.isPingbackEnabled()) {
-            localPlatform.pingback(resolveEntitlements);
-          }
-        });
+      return this.viewTrackerPromise_.then(() => {
+        this.platformStore_
+          .getAvailablePlatforms()
+          .forEach((subscriptionPlatform) => {
+            // Iterate the platforms and pingback if it's enabled on that platform
+            if (subscriptionPlatform.isPingbackEnabled()) {
+              // Platforms can choose if they want all entitlements
+              // or just the granting entitlement
+              if (subscriptionPlatform.pingbackReturnsAllEntitlements()) {
+                this.platformStore_
+                  .getAllPlatformsEntitlements()
+                  .then((resolvedEntitlments) =>
+                    subscriptionPlatform.pingback(resolvedEntitlments)
+                  );
+              } else {
+                this.platformStore_
+                  .getGrantEntitlement()
+                  .then((grantStateEntitlement) =>
+                    subscriptionPlatform.pingback(
+                      grantStateEntitlement || Entitlement.empty('local')
+                    )
+                  );
+              }
+            }
+          });
+      });
     }
     return null;
   }
 
+  /**
+   * Reset all platforms and re-fetch entitlements after an
+   * external event (for example a login)
+   */
+  resetPlatforms() {
+    this.platformStore_ = this.platformStore_.resetPlatformStore();
+    this.renderer_.toggleLoading(true);
+
+    if (this.metering_) {
+      this.metering_.entitlementsWereFetchedWithCurrentMeteringState = false;
+    }
+
+    this.platformStore_
+      .getAvailablePlatforms()
+      .forEach((subscriptionPlatform) => {
+        this.fetchEntitlements_(subscriptionPlatform);
+      });
+    this.subscriptionAnalytics_.serviceEvent(
+      SubscriptionAnalyticsEvents.PLATFORM_REAUTHORIZED,
+      ''
+    );
+    // deprecated event fired for backward compatibility
+    this.subscriptionAnalytics_.serviceEvent(
+      SubscriptionAnalyticsEvents.PLATFORM_REAUTHORIZED_DEPRECATED,
+      ''
+    );
+    this.startAuthorizationFlow_();
+  }
+
+  /**
+   * Resets a platform and re-fetches its entitlements.
+   * @param {string} platformId
+   */
+  resetPlatform(platformId) {
+    // Show loading UX.
+    this.renderer_.toggleLoading(true);
+    this.platformStore_.resetPlatform(platformId);
+
+    // Re-fetch entitlements.
+    const platform = this.platformStore_.getPlatform(platformId);
+    this.fetchEntitlements_(platform);
+
+    // Start auth flow.
+    this.startAuthorizationFlow_();
+  }
+
+  /**
+   * Delegates an action to local platform.
+   * @param {string} action
+   * @param {?string} sourceId
+   * @return {!Promise<boolean>}
+   */
+  delegateActionToLocal(action, sourceId) {
+    return this.delegateActionToService(action, 'local', sourceId);
+  }
+
+  /**
+   * Delegates an action to specified platform.
+   * @param {string} action
+   * @param {string} platformKey
+   * @param {?string} sourceId
+   * @return {!Promise<boolean>}
+   */
+  delegateActionToService(action, platformKey, sourceId = null) {
+    return new Promise((resolve) => {
+      this.platformStore_.onPlatformResolves(platformKey, (platform) => {
+        devAssert(platform, 'Platform is not registered');
+        this.subscriptionAnalytics_.event(
+          SubscriptionAnalyticsEvents.ACTION_DELEGATED,
+          dict({
+            'action': action,
+            'serviceId': platformKey,
+          }),
+          dict({
+            'action': action,
+            'status': ActionStatus.STARTED,
+          })
+        );
+        resolve(platform.executeAction(action, sourceId));
+      });
+    });
+  }
+
+  /**
+   * Delegate UI decoration to another service.
+   * @param {!Element} element
+   * @param {string} platformKey
+   * @param {string} action
+   * @param {?JsonObject} options
+   */
+  decorateServiceAction(element, platformKey, action, options) {
+    this.platformStore_.onPlatformResolves(platformKey, (platform) => {
+      devAssert(platform, 'Platform is not registered');
+      platform.decorateUI(element, action, options);
+    });
+  }
+
   /**
    * Adds entitlement on free pages.
    * @param {PlatformStore} platformStore
@@ -716,7 +848,7 @@ export class SubscriptionService {
         source: '',
         raw: '',
         granted: true,
-        grantReason: GrantReason.UNLOCKED,
+        grantReason: GrantReason.FREE,
         dataObject: {},
       })
     );
@@ -730,6 +862,23 @@ export class SubscriptionService {
   isPageFree_() {
     return !this.pageConfig_.isLocked() || this.platformConfig_['alwaysGrant'];
   }
+
+  /**
+   * Enables metering, if a platform needs it.
+   * @private
+   */
+  maybeEnableMetering_() {
+    const {services} = this.platformConfig_;
+    const meteringPlatform = services.find(
+      (service) => service['enableMetering']
+    );
+
+    if (meteringPlatform) {
+      this.metering_ = new Metering({
+        platformKey: meteringPlatform.serviceId,
+      });
+    }
+  }
 }
 
 // Register the `amp-subscriptions` extension.
diff --git a/extensions/amp-subscriptions/0.1/analytics.js b/extensions/amp-subscriptions/0.1/analytics.js
index 54702d6d15a91..a8c0bf49a4d1c 100644
--- a/extensions/amp-subscriptions/0.1/analytics.js
+++ b/extensions/amp-subscriptions/0.1/analytics.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
 import {user} from '../../../src/log';
 
@@ -96,19 +96,21 @@ export class SubscriptionAnalytics {
 
   /**
    * @param {!SubscriptionAnalyticsEvents|string} eventType
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @param {!JsonObject=} opt_vars
    * @param {!JsonObject=} internalVars
    */
-  serviceEvent(eventType, serviceId, opt_vars, internalVars) {
+  serviceEvent(eventType, platformKey, opt_vars, internalVars) {
     this.event(
       eventType,
-      /** @type {!JsonObject} */ (Object.assign(
-        dict({
-          'serviceId': serviceId,
-        }),
-        opt_vars
-      )),
+      /** @type {!JsonObject} */ (
+        Object.assign(
+          dict({
+            'serviceId': platformKey,
+          }),
+          opt_vars
+        )
+      ),
       internalVars
     );
   }
@@ -129,7 +131,12 @@ export class SubscriptionAnalytics {
     user().info(TAG, loggedString, opt_vars || '');
 
     opt_vars = opt_vars || dict({});
-    triggerAnalyticsEvent(this.element_, loggedString, opt_vars);
+    triggerAnalyticsEvent(
+      this.element_,
+      loggedString,
+      opt_vars,
+      /** enableDataVars */ false
+    );
 
     for (let l = 0; l < this.listeners_.length; l++) {
       this.listeners_[l](eventType, opt_vars, internalVars);
@@ -137,15 +144,15 @@ export class SubscriptionAnalytics {
   }
 
   /**
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @param {!Action|string} action
    * @param {!ActionStatus|string} status
    * @param {!JsonObject=} opt_vars
    */
-  actionEvent(serviceId, action, status, opt_vars) {
+  actionEvent(platformKey, action, status, opt_vars) {
     this.serviceEvent(
       SubscriptionAnalyticsEvents.SUBSCRIPTIONS_ACTION,
-      serviceId,
+      platformKey,
       opt_vars,
       dict({
         'action': action,
diff --git a/extensions/amp-subscriptions/0.1/crypto-handler.js b/extensions/amp-subscriptions/0.1/crypto-handler.js
index cf5afa2737f46..44d86ec2c70a6 100644
--- a/extensions/amp-subscriptions/0.1/crypto-handler.js
+++ b/extensions/amp-subscriptions/0.1/crypto-handler.js
@@ -14,12 +14,16 @@
  * limitations under the License.
  */
 
-import {decryptAesGcm} from '../../../third_party/subscriptions-project/aes_gcm';
+import {
+  base64Decode,
+  decryptAesGcmImpl,
+  safeAesGcmImportKey,
+} from '../../../third_party/subscriptions-project/aes_gcm';
 import {iterateCursor} from '../../../src/dom';
-import {padStart} from '../../../src/string';
-import {toArray} from '../../../src/types';
-import {tryParseJson} from '../../../src/json';
-import {utf8Encode} from '../../../src/utils/bytes';
+import {padStart} from '../../../src/core/types/string';
+import {toArray} from '../../../src/core/types/array';
+import {tryParseJson} from '../../../src/core/types/object/json';
+import {utf8Encode} from '../../../src/core/types/string/bytes';
 
 export class CryptoHandler {
   /**
@@ -72,17 +76,17 @@ export class CryptoHandler {
    * Returns encrypted document key if it exists.
    * This key is needed for requesting a different key
    * that decrypts locked content on the page.
-   * @param {string} serviceId Who you want to decrypt the key.
-   *                           For example: 'google.com'
+   * @param {string} platformKey Who you want to decrypt the key.
+   *                             For example: 'google.com'
    * @return {?string}
    */
-  getEncryptedDocumentKey(serviceId) {
+  getEncryptedDocumentKey(platformKey) {
     // Doing this for testing.
     const encryptedKeys = this.getEncryptedKeys();
     if (!encryptedKeys) {
       return null;
     }
-    return encryptedKeys[serviceId] || null;
+    return encryptedKeys[platformKey] || null;
   }
 
   /**
@@ -116,21 +120,27 @@ export class CryptoHandler {
       return this.decryptionPromise_;
     }
     this.decryptionPromise_ = this.ampdoc_.whenReady().then(() => {
-      const encryptedSections = this.ampdoc_
-        .getRootNode()
-        .querySelectorAll('script[ciphertext]');
-      const promises = [];
-      iterateCursor(encryptedSections, (encryptedSection) => {
-        promises.push(
-          decryptAesGcm(
-            decryptedDocumentKey,
-            encryptedSection.textContent
-          ).then((decryptedContent) => {
-            encryptedSection./*OK*/ outerHTML = decryptedContent;
-          })
-        );
+      const keybytes = base64Decode(decryptedDocumentKey);
+      return safeAesGcmImportKey(keybytes.buffer).then((formattedkey) => {
+        const encryptedSections = this.ampdoc_
+          .getRootNode()
+          .querySelectorAll('script[ciphertext]');
+        const promises = [];
+        iterateCursor(encryptedSections, (encryptedSection) => {
+          const text = encryptedSection.textContent.replace(/\s+/g, '');
+          const contentBuffer = base64Decode(text).buffer;
+          const iv = contentBuffer.slice(0, 12);
+          const bytesToDecrypt = contentBuffer.slice(12);
+          promises.push(
+            decryptAesGcmImpl(formattedkey, iv, bytesToDecrypt).then(
+              (decryptedContent) => {
+                encryptedSection./*OK*/ outerHTML = decryptedContent;
+              }
+            )
+          );
+        });
+        return Promise.all(promises);
       });
-      return Promise.all(promises);
     });
     return this.decryptionPromise_;
   }
diff --git a/extensions/amp-subscriptions/0.1/entitlement.js b/extensions/amp-subscriptions/0.1/entitlement.js
index a2d79959f6f5b..a2f6b6e5cfba8 100644
--- a/extensions/amp-subscriptions/0.1/entitlement.js
+++ b/extensions/amp-subscriptions/0.1/entitlement.js
@@ -13,15 +13,30 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 
 /** @enum {string} */
 export const GrantReason = {
   'SUBSCRIBER': 'SUBSCRIBER',
   'METERING': 'METERING',
-  'UNLOCKED': 'UNLOCKED',
+  'FREE': 'UNLOCKED',
+  'LAA': 'LAA',
 };
 
+/**
+ * The constructor arg for an {@link Entitlement}
+ *
+ * @typedef {{
+ *   source: string,
+ *   raw: string,
+ *   service: string,
+ *   granted: boolean,
+ *   grantReason: ?GrantReason,
+ *   dataObject: ?JsonObject,
+ *   decryptedDocumentKey: ?string
+ * }} EntitlementConstructorInputDef
+ */
+
 /**
  * The single entitlement object.
  */
@@ -40,24 +55,17 @@ export class Entitlement {
   }
 
   /**
-   * @param {Object} input
-   * @param {string} [input.source]
-   * @param {string} [input.raw]
-   * @param {string} [input.service]
-   * @param {boolean} [input.granted]
-   * @param {?GrantReason} [input.grantReason]
-   * @param {?JsonObject} [input.dataObject]
-   * @param {?string} [input.decryptedDocumentKey]
+   * @param {!EntitlementConstructorInputDef} input
    */
   constructor(input) {
     const {
-      source,
-      raw = '',
-      service,
-      granted = false,
-      grantReason = '',
       dataObject,
       decryptedDocumentKey,
+      grantReason = '',
+      granted = false,
+      raw = '',
+      service,
+      source,
     } = input;
     /** @const {string} */
     this.raw = raw;
@@ -126,10 +134,18 @@ export class Entitlement {
   }
 
   /**
-   * Returns if the user is a subscriber.
+   * Returns true if the user is a subscriber.
    * @return {boolean}
    */
   isSubscriber() {
     return this.granted && this.grantReason === GrantReason.SUBSCRIBER;
   }
+
+  /**
+   * Returns true if the article is free.
+   * @return {boolean}
+   */
+  isFree() {
+    return this.granted && this.grantReason === GrantReason.FREE;
+  }
 }
diff --git a/extensions/amp-subscriptions/0.1/local-subscription-platform-base.js b/extensions/amp-subscriptions/0.1/local-subscription-platform-base.js
index 087b8b9fd7b57..97c2543a135cb 100644
--- a/extensions/amp-subscriptions/0.1/local-subscription-platform-base.js
+++ b/extensions/amp-subscriptions/0.1/local-subscription-platform-base.js
@@ -49,9 +49,8 @@ export class LocalSubscriptionBasePlatform {
     this.serviceConfig_ = platformConfig;
 
     /** @private @const {boolean} */
-    this.pingbackAllEntitlements_ = !!this.serviceConfig_[
-      'pingbackAllEntitlements'
-    ];
+    this.pingbackAllEntitlements_ =
+      !!this.serviceConfig_['pingbackAllEntitlements'];
 
     /** @protected @const {!./service-adapter.ServiceAdapter} */
     this.serviceAdapter_ = serviceAdapter;
@@ -89,7 +88,7 @@ export class LocalSubscriptionBasePlatform {
   /**
    * @override
    */
-  getServiceId() {
+  getPlatformKey() {
     return 'local';
   }
 
@@ -146,7 +145,7 @@ export class LocalSubscriptionBasePlatform {
       const action = element.getAttribute('subscriptions-action');
       const serviceAttr = element.getAttribute('subscriptions-service');
       if (serviceAttr == 'local') {
-        this.executeAction(action);
+        this.executeAction(action, element.id);
       } else if ((serviceAttr || 'auto') == 'auto') {
         if (action == Action.LOGIN) {
           // The "login" action is somewhat special b/c viewers can
@@ -154,13 +153,18 @@ export class LocalSubscriptionBasePlatform {
           const platform = this.serviceAdapter_.selectPlatformForLogin();
           this.serviceAdapter_.delegateActionToService(
             action,
-            platform.getServiceId()
+            platform.getPlatformKey(),
+            element.id
           );
         } else {
-          this.executeAction(action);
+          this.executeAction(action, element.id);
         }
       } else if (serviceAttr) {
-        this.serviceAdapter_.delegateActionToService(action, serviceAttr);
+        this.serviceAdapter_.delegateActionToService(
+          action,
+          serviceAttr,
+          element.id
+        );
       }
     }
   }
@@ -235,8 +239,6 @@ export class LocalSubscriptionBasePlatform {
 
   /**
    * @override
-   * @param {?./entitlement.Entitlement} unusedEntitlement
-   * @return {!Promise|undefined}
    */
   pingback(unusedEntitlement) {}
 
diff --git a/extensions/amp-subscriptions/0.1/local-subscription-platform-iframe.js b/extensions/amp-subscriptions/0.1/local-subscription-platform-iframe.js
index b04ec43f71d6a..eb749ac400690 100644
--- a/extensions/amp-subscriptions/0.1/local-subscription-platform-iframe.js
+++ b/extensions/amp-subscriptions/0.1/local-subscription-platform-iframe.js
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Entitlement} from './entitlement';
 import {LocalSubscriptionBasePlatform} from './local-subscription-platform-base';
 import {Messenger} from '../../amp-access/0.1/iframe-api/messenger';
 import {assertHttpsUrl, parseUrlDeprecated} from '../../../src/url';
 import {devAssert, userAssert} from '../../../src/log';
-import {isArray} from '../../../src/types';
-import {parseJson} from '../../../src/json';
+import {isArray} from '../../../src/core/types';
+import {parseJson} from '../../../src/core/types/object/json';
 import {toggle} from '../../../src/style';
 
 /**
diff --git a/extensions/amp-subscriptions/0.1/local-subscription-platform-remote.js b/extensions/amp-subscriptions/0.1/local-subscription-platform-remote.js
index 870efcec33f67..27386bae97f17 100644
--- a/extensions/amp-subscriptions/0.1/local-subscription-platform-remote.js
+++ b/extensions/amp-subscriptions/0.1/local-subscription-platform-remote.js
@@ -19,8 +19,8 @@ import {LocalSubscriptionBasePlatform} from './local-subscription-platform-base'
 import {Services} from '../../../src/services';
 import {addParamToUrl, assertHttpsUrl} from '../../../src/url';
 import {devAssert, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {isArray} from '../../../src/types';
+import {dict} from '../../../src/core/types/object';
+import {isArray} from '../../../src/core/types';
 
 /**
  * Implments the remotel local subscriptions platform which uses
@@ -57,14 +57,30 @@ export class LocalSubscriptionRemotePlatform extends LocalSubscriptionBasePlatfo
 
   /** @override */
   getEntitlements() {
-    return this.urlBuilder_
-      .buildUrl(this.authorizationUrl_, /* useAuthData */ false)
-      .then((fetchUrl) => {
+    const fetchUrlPromise = this.urlBuilder_.buildUrl(
+      this.authorizationUrl_,
+      /* useAuthData */ false
+    );
+    const meteringStatePromise = this.serviceAdapter_.loadMeteringState();
+    return Promise.all([fetchUrlPromise, meteringStatePromise]).then(
+      (results) => {
+        let fetchUrl = results[0];
+        const meteringState = results[1];
+
+        // WARNING: If this value is really long, you might run into issues by hitting
+        // the maximum URL length in some browsers when sending the GET fetch URL.
+        if (meteringState) {
+          fetchUrl = addParamToUrl(
+            fetchUrl,
+            'meteringState',
+            btoa(JSON.stringify(meteringState))
+          );
+        }
+
         // WARNING: If this key is really long, you might run into issues by hitting
         // the maximum URL length in some browsers when sending the GET fetch URL.
-        const encryptedDocumentKey = this.serviceAdapter_.getEncryptedDocumentKey(
-          'local'
-        );
+        const encryptedDocumentKey =
+          this.serviceAdapter_.getEncryptedDocumentKey('local');
         if (encryptedDocumentKey) {
           //TODO(chenshay): if crypt, switch to 'post'
           fetchUrl = addParamToUrl(fetchUrl, 'crypt', encryptedDocumentKey);
@@ -73,9 +89,21 @@ export class LocalSubscriptionRemotePlatform extends LocalSubscriptionBasePlatfo
           .fetchJson(fetchUrl, {credentials: 'include'})
           .then((res) => res.json())
           .then((resJson) => {
-            return Entitlement.parseFromJson(resJson);
+            const promises = [];
+
+            // Save metering state, if present.
+            if (resJson.metering && resJson.metering.state) {
+              promises.push(
+                this.serviceAdapter_.saveMeteringState(resJson.metering.state)
+              );
+            }
+
+            return Promise.all(promises).then(() =>
+              Entitlement.parseFromJson(resJson)
+            );
           });
-      });
+      }
+    );
   }
 
   /** @override */
@@ -105,10 +133,9 @@ export class LocalSubscriptionRemotePlatform extends LocalSubscriptionBasePlatfo
     if (!this.isPingbackEnabled) {
       return;
     }
-    const pingbackUrl = /** @type {string} */ (devAssert(
-      this.pingbackUrl_,
-      'pingbackUrl is null'
-    ));
+    const pingbackUrl = /** @type {string} */ (
+      devAssert(this.pingbackUrl_, 'pingbackUrl is null')
+    );
 
     const promise = this.urlBuilder_.buildUrl(
       pingbackUrl,
diff --git a/extensions/amp-subscriptions/0.1/local-subscription-platform-renderer.js b/extensions/amp-subscriptions/0.1/local-subscription-platform-renderer.js
index a829a8202e15f..1132e5daf1b07 100644
--- a/extensions/amp-subscriptions/0.1/local-subscription-platform-renderer.js
+++ b/extensions/amp-subscriptions/0.1/local-subscription-platform-renderer.js
@@ -15,7 +15,7 @@
  */
 
 import {Services} from '../../../src/services';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {evaluateExpr} from './expr';
 
 /**
@@ -39,7 +39,7 @@ export class LocalSubscriptionPlatformRenderer {
     this.dialog_ = dialog;
 
     /** @private @const {!../../../src/service/template-impl.Templates} */
-    this.templates_ = Services.templatesFor(ampdoc.win);
+    this.templates_ = Services.templatesForDoc(ampdoc);
 
     /** @private @const {!./service-adapter.ServiceAdapter} */
     this.serviceAdapter_ = serviceAdapter;
diff --git a/extensions/amp-subscriptions/0.1/metering.js b/extensions/amp-subscriptions/0.1/metering.js
new file mode 100644
index 0000000000000..bb6602e96b97b
--- /dev/null
+++ b/extensions/amp-subscriptions/0.1/metering.js
@@ -0,0 +1,115 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {user} from '../../../src/log';
+
+/** @const */
+const TAG = 'amp-subscriptions';
+
+/**
+ * Describes metering state for a single publication.
+ * @typedef {{
+ *   id: string,
+ *   attributes: !Array<{
+ *     name: string,
+ *     timestamp: string,
+ *   }>,
+ * }}
+ */
+let MeteringStateDef;
+
+/** Handles metering functionality. */
+export class Metering {
+  /**
+   *
+   * @param {{
+   *   platformKey: string,
+   * }} params
+   */
+  constructor({platformKey}) {
+    /**
+     * Remembers if metering entitlements were fetched
+     * with the current metering state.
+     *
+     * This helps avoid redundant fetches.
+     * @type {boolean}
+     */
+    this.entitlementsWereFetchedWithCurrentMeteringState = false;
+
+    /**
+     * Key for the subscription platform with metering enabled.
+     * @const
+     */
+    this.platformKey = platformKey;
+
+    /**
+     * Metering state for user.
+     * Currently this isn't persisted. It's just saved in memory.
+     * @private
+     */
+    this.meteringStateString_ = '';
+  }
+
+  /**
+   * Saves metering state for a given publication ID.
+   *
+   * @param {!MeteringStateDef} meteringState
+   * @return {!Promise}
+   */
+  saveMeteringState(meteringState) {
+    const meteringStateString = JSON.stringify(meteringState);
+
+    const meteringStateChangedPromise = Promise.resolve(
+      this.meteringStateString_
+    ).then((existingMeteringStateString) => {
+      const changed = meteringStateString !== existingMeteringStateString;
+
+      // Log when an existing metering state is updated.
+      if (existingMeteringStateString && changed) {
+        user().info(
+          TAG,
+          `Meter state changed from ${existingMeteringStateString} to ${meteringStateString}`
+        );
+      }
+
+      return changed;
+    });
+
+    return meteringStateChangedPromise.then((meteringStateChanged) => {
+      if (!meteringStateChanged) {
+        // Bail. Fetching metering entitlements again is redundant,
+        // until the metering state changes.
+        return;
+      }
+
+      this.meteringStateString_ = meteringStateString;
+      this.entitlementsWereFetchedWithCurrentMeteringState = false;
+    });
+  }
+
+  /**
+   * Loads metering state for a given publication ID.
+   *
+   * @return {!Promise<?MeteringStateDef>}
+   */
+  loadMeteringState() {
+    if (!this.meteringStateString_) {
+      return Promise.resolve(null);
+    }
+
+    return Promise.resolve(JSON.parse(this.meteringStateString_));
+  }
+}
diff --git a/extensions/amp-subscriptions/0.1/platform-store.js b/extensions/amp-subscriptions/0.1/platform-store.js
index f74a2130b4859..4e1ecb83810f1 100644
--- a/extensions/amp-subscriptions/0.1/platform-store.js
+++ b/extensions/amp-subscriptions/0.1/platform-store.js
@@ -15,13 +15,13 @@
  */
 
 import {DEFAULT_SCORE_CONFIG, SubscriptionsScoreFactor} from './constants.js';
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Entitlement} from './entitlement';
-import {Observable} from '../../../src/observable';
+import {Observable} from '../../../src/core/data-structures/observable';
 import {devAssert, user} from '../../../src/log';
-import {dict, hasOwn} from '../../../src/utils/object';
+import {dict, hasOwn} from '../../../src/core/types/object';
 
-/** @typedef {{serviceId: string, entitlement: (!./entitlement.Entitlement|undefined)}} */
+/** @typedef {{platformKey: string, entitlement: (!./entitlement.Entitlement|undefined)}} */
 export let EntitlementChangeEventDef;
 
 /** @const */
@@ -36,26 +36,21 @@ const TAG = 'amp-subscriptions';
 let PlatformWeightDef;
 
 /**
- * Manages platforms. Has a list of platforms it instantiates and manages.
+ * Manages subscription platforms.
  */
 export class PlatformStore {
   /**
-   * @param {!Array<string>} expectedServiceIds
+   * @param {!Array<string>} platformKeys
    * @param {!JsonObject|Object<string, number>} scoreConfig
    * @param {!./entitlement.Entitlement} fallbackEntitlement
    * @param {Object<string, !./subscription-platform.SubscriptionPlatform>=} opt_Platforms
    */
-  constructor(
-    expectedServiceIds,
-    scoreConfig,
-    fallbackEntitlement,
-    opt_Platforms
-  ) {
+  constructor(platformKeys, scoreConfig, fallbackEntitlement, opt_Platforms) {
     /** @private @const {!Object<string, !./subscription-platform.SubscriptionPlatform>} */
     this.subscriptionPlatforms_ = opt_Platforms || dict();
 
     /** @private @const {!Array<string>} */
-    this.serviceIds_ = expectedServiceIds;
+    this.platformKeys_ = platformKeys;
 
     /** @private @const {!Object<string, !./entitlement.Entitlement>} */
     this.entitlements_ = {};
@@ -65,14 +60,14 @@ export class PlatformStore {
      * {!Object<string, !Deferred<!./entitlement.Entitlement>>}
      */
     this.entitlementDeferredMap_ = {};
-    expectedServiceIds.forEach((serviceId) => {
-      this.entitlementDeferredMap_[serviceId] = new Deferred();
+    platformKeys.forEach((platformKey) => {
+      this.entitlementDeferredMap_[platformKey] = new Deferred();
     });
 
     /** @private @const {!Observable<!EntitlementChangeEventDef>} */
     this.onEntitlementResolvedCallbacks_ = new Observable();
 
-    /** @private @const {!Observable<{serviceId: string}>} */
+    /** @private @const {!Observable<{platformKey: string}>} */
     this.onPlatformResolvedCallbacks_ = new Observable();
 
     /** @private {?Deferred} */
@@ -82,10 +77,10 @@ export class PlatformStore {
     this.grantStatusEntitlement_ = null;
 
     /** @private {?Deferred<?Entitlement>} */
-    this.grantStatusEntitlementPromise_ = null;
+    this.grantStatusEntitlementDeferred_ = null;
 
     /** @private {?Deferred<!Array<!./entitlement.Entitlement>>} */
-    this.allResolvedPromise_ = null;
+    this.allResolvedDeferred_ = null;
 
     /** @private {!Array<string>} */
     this.failedPlatforms_ = [];
@@ -99,13 +94,13 @@ export class PlatformStore {
 
   /**
    * Resolves a platform in the store
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @param {!./subscription-platform.SubscriptionPlatform} platform
    */
-  resolvePlatform(serviceId, platform) {
-    this.subscriptionPlatforms_[serviceId] = platform;
+  resolvePlatform(platformKey, platform) {
+    this.subscriptionPlatforms_[platformKey] = platform;
     this.onPlatformResolvedCallbacks_.fire({
-      serviceId,
+      platformKey,
     });
   }
 
@@ -119,28 +114,50 @@ export class PlatformStore {
     for (const platformKey in this.subscriptionPlatforms_) {
       this.subscriptionPlatforms_[platformKey].reset();
     }
-    // Then create new platform store withe the newply reset platforms in it.
+
+    // Then create new platform store with the newly reset platforms in it.
     return new PlatformStore(
-      this.serviceIds_,
+      this.platformKeys_,
       this.scoreConfig_,
       this.fallbackEntitlement_,
       this.subscriptionPlatforms_
     );
   }
 
+  /**
+   * Resets a given platform.
+   * @param {string} platformKey
+   */
+  resetPlatform(platformKey) {
+    // Remove platform's entitlement.
+    delete this.entitlements_[platformKey];
+
+    // Reset platform's deferred entitlement map entry.
+    this.entitlementDeferredMap_[platformKey] = new Deferred();
+
+    // Reset platform's UX.
+    this.subscriptionPlatforms_[platformKey].reset();
+
+    // Reset summary promises.
+    this.grantStatusPromise_ = null;
+    this.grantStatusEntitlement_ = null;
+    this.grantStatusEntitlementDeferred_ = null;
+    this.allResolvedDeferred_ = null;
+  }
+
   /**
    * Calls a callback for when a platform is resolved.
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @param {!Function} callback
    */
-  onPlatformResolves(serviceId, callback) {
-    const platform = this.subscriptionPlatforms_[serviceId];
+  onPlatformResolves(platformKey, callback) {
+    const platform = this.subscriptionPlatforms_[platformKey];
     if (platform) {
       callback(platform);
     } else {
       this.onPlatformResolvedCallbacks_.add((e) => {
-        if (e.serviceId === serviceId) {
-          callback(this.getPlatform(serviceId));
+        if (e.platformKey === platformKey) {
+          callback(this.getPlatform(platformKey));
         }
       });
     }
@@ -148,20 +165,21 @@ export class PlatformStore {
 
   /**
    * Returns the platform for the given id
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @return {!./subscription-platform.SubscriptionPlatform}
    */
-  getPlatform(serviceId) {
-    const platform = this.subscriptionPlatforms_[serviceId];
-    devAssert(platform, `Platform for id ${serviceId} is not resolved`);
+  getPlatform(platformKey) {
+    const platform = this.subscriptionPlatforms_[platformKey];
+    devAssert(platform, `Platform for id ${platformKey} is not resolved`);
     return platform;
   }
 
   /**
    * Returns the local platform
+   * @private
    * @return {!./subscription-platform.SubscriptionPlatform}
    */
-  getLocalPlatform() {
+  getLocalPlatform_() {
     const localPlatform =
       /** @type {!./subscription-platform.SubscriptionPlatform} */
       (this.getPlatform('local'));
@@ -183,7 +201,7 @@ export class PlatformStore {
   }
 
   /**
-   * This registers a callback which is called whenever a service id is resolved
+   * This registers a callback which is called whenever a platform key is resolved
    * with an entitlement.
    * @param {function(!EntitlementChangeEventDef):void} callback
    */
@@ -192,54 +210,60 @@ export class PlatformStore {
   }
 
   /**
-   * This resolves the entitlement to a serviceId
-   * @param {string} serviceId
+   * This resolves the entitlement to a platformKey
+   * @param {string} platformKey
    * @param {!./entitlement.Entitlement} entitlement
    */
-  resolveEntitlement(serviceId, entitlement) {
+  resolveEntitlement(platformKey, entitlement) {
     if (entitlement) {
-      entitlement.service = serviceId;
+      entitlement.service = platformKey;
     }
-    this.entitlements_[serviceId] = entitlement;
-    const deferred = this.entitlementDeferredMap_[serviceId];
+    this.entitlements_[platformKey] = entitlement;
+    const deferred = this.entitlementDeferredMap_[platformKey];
     if (deferred) {
       deferred.resolve(entitlement);
     }
-    // Remove this serviceId as a failed platform now
-    if (this.failedPlatforms_.indexOf(serviceId) != -1) {
-      this.failedPlatforms_.splice(this.failedPlatforms_.indexOf(serviceId));
+    // Remove this platformKey from the failed platforms list
+    if (this.failedPlatforms_.indexOf(platformKey) !== -1) {
+      this.failedPlatforms_.splice(
+        this.failedPlatforms_.indexOf(platformKey),
+        1
+      );
     }
     // Call all onChange callbacks.
     if (entitlement.granted) {
       this.saveGrantEntitlement_(entitlement);
     }
-    this.onEntitlementResolvedCallbacks_.fire({serviceId, entitlement});
+    this.onEntitlementResolvedCallbacks_.fire({
+      platformKey,
+      entitlement,
+    });
   }
 
   /**
    * Returns entitlement for a platform.
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @return {!./entitlement.Entitlement} entitlement
    */
-  getResolvedEntitlementFor(serviceId) {
+  getResolvedEntitlementFor(platformKey) {
     devAssert(
-      this.entitlements_[serviceId],
-      `Platform ${serviceId} has not yet resolved with entitlements`
+      this.entitlements_[platformKey],
+      `Platform ${platformKey} has not yet resolved with entitlements`
     );
-    return this.entitlements_[serviceId];
+    return this.entitlements_[platformKey];
   }
 
   /**
    * Returns entitlement for a platform once it's resolved.
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @return {!Promise<!./entitlement.Entitlement>} entitlement
    */
-  getEntitlementPromiseFor(serviceId) {
+  getEntitlementPromiseFor(platformKey) {
     devAssert(
-      this.entitlementDeferredMap_[serviceId],
-      `Platform ${serviceId} is not declared`
+      this.entitlementDeferredMap_[platformKey],
+      `Platform ${platformKey} is not declared`
     );
-    return this.entitlementDeferredMap_[serviceId].promise;
+    return this.entitlementDeferredMap_[platformKey].promise;
   }
 
   /**
@@ -261,7 +285,7 @@ export class PlatformStore {
   getScoreFactorStates() {
     const states = dict({});
     return Promise.all(
-      this.serviceIds_.map((platformId) => {
+      this.platformKeys_.map((platformId) => {
         states[platformId] = dict();
         return Promise.all(
           Object.values(SubscriptionsScoreFactor).map((scoreFactor) =>
@@ -278,15 +302,15 @@ export class PlatformStore {
 
   /**
    * Return a score factor for a platform once it's resolved
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @param {string} scoreFactor
    * @return {!Promise<number>}
    * @private
    */
-  getScoreFactorPromiseFor_(serviceId, scoreFactor) {
+  getScoreFactorPromiseFor_(platformKey, scoreFactor) {
     // Make sure the platform is ready
-    return this.getEntitlementPromiseFor(serviceId).then(() => {
-      return this.subscriptionPlatforms_[serviceId].getSupportedScoreFactor(
+    return this.getEntitlementPromiseFor(platformKey).then(() => {
+      return this.subscriptionPlatforms_[platformKey].getSupportedScoreFactor(
         scoreFactor
       );
     });
@@ -352,31 +376,37 @@ export class PlatformStore {
    * @return {!Promise<?Entitlement>}
    */
   getGrantEntitlement() {
-    if (this.grantStatusEntitlementPromise_) {
-      return this.grantStatusEntitlementPromise_.promise;
+    // Define when grant entitlement promise can resolve.
+    const canResolveImmediately = () =>
+      this.grantStatusEntitlement_ &&
+      (this.grantStatusEntitlement_.isSubscriber() ||
+        this.grantStatusEntitlement_.isFree());
+    const canResolve = () =>
+      canResolveImmediately() || this.areAllPlatformsResolved_();
+
+    // Cache deferred.
+    if (this.grantStatusEntitlementDeferred_) {
+      return this.grantStatusEntitlementDeferred_.promise;
     }
-    this.grantStatusEntitlementPromise_ = new Deferred();
-    if (
-      (this.grantStatusEntitlement_ &&
-        this.grantStatusEntitlement_.isSubscriber()) ||
-      this.areAllPlatformsResolved_()
-    ) {
-      this.grantStatusEntitlementPromise_.resolve(this.grantStatusEntitlement_);
+    this.grantStatusEntitlementDeferred_ = new Deferred();
+
+    // Resolve when possible.
+    if (canResolve()) {
+      this.grantStatusEntitlementDeferred_.resolve(
+        this.grantStatusEntitlement_
+      );
     } else {
       this.onEntitlementResolvedCallbacks_.add(() => {
         // Grant entitlement only if subscriber
-        if (
-          (this.grantStatusEntitlement_ &&
-            this.grantStatusEntitlement_.isSubscriber()) ||
-          this.areAllPlatformsResolved_()
-        ) {
-          this.grantStatusEntitlementPromise_.resolve(
+        if (canResolve()) {
+          this.grantStatusEntitlementDeferred_.resolve(
             this.grantStatusEntitlement_
           );
         }
       });
     }
-    return this.grantStatusEntitlementPromise_.promise;
+
+    return this.grantStatusEntitlementDeferred_.promise;
   }
 
   /**
@@ -387,30 +417,34 @@ export class PlatformStore {
   }
 
   /**
-   * Returns entitlements when all services are done fetching them.
+   * Returns entitlements when all platforms are done fetching them.
    * @return {!Promise<!Array<!./entitlement.Entitlement>>}
    */
   getAllPlatformsEntitlements() {
-    if (this.allResolvedPromise_) {
-      return this.allResolvedPromise_.promise;
+    // Cache deferred.
+    if (this.allResolvedDeferred_) {
+      return this.allResolvedDeferred_.promise;
     }
-    this.allResolvedPromise_ = new Deferred();
+    this.allResolvedDeferred_ = new Deferred();
+
+    // Resolve when possible.
     if (this.areAllPlatformsResolved_()) {
       // Resolve with null if none of the entitlements unblock the reader
-      this.allResolvedPromise_.resolve(
+      this.allResolvedDeferred_.resolve(
         this.getAvailablePlatformsEntitlements_()
       );
     } else {
       // Listen if any upcoming entitlements unblock the reader
       this.onChange(() => {
         if (this.areAllPlatformsResolved_()) {
-          this.allResolvedPromise_.resolve(
+          this.allResolvedDeferred_.resolve(
             this.getAvailablePlatformsEntitlements_()
           );
         }
       });
     }
-    return this.allResolvedPromise_.promise;
+
+    return this.allResolvedDeferred_.promise;
   }
 
   /**
@@ -429,7 +463,7 @@ export class PlatformStore {
   }
 
   /**
-   * Returns entitlements when all services are done fetching them.
+   * Returns platform after all platforms fetch entitlements.
    * @return {!Promise<!./subscription-platform.SubscriptionPlatform>}
    */
   selectPlatform() {
@@ -447,7 +481,7 @@ export class PlatformStore {
    */
   areAllPlatformsResolved_() {
     const entitlementsResolved = Object.keys(this.entitlements_).length;
-    return entitlementsResolved === this.serviceIds_.length;
+    return entitlementsResolved === this.platformKeys_.length;
   }
 
   /**
@@ -485,14 +519,14 @@ export class PlatformStore {
       'All platforms are not resolved yet'
     );
 
-    // Subscriber wins immediately.
+    // Prefer platforms that granted with subscriptions or free articles.
     const availablePlatforms = this.getAvailablePlatforms();
     while (availablePlatforms.length) {
       const platform = availablePlatforms.pop();
       const entitlement = this.getResolvedEntitlementFor(
-        platform.getServiceId()
+        platform.getPlatformKey()
       );
-      if (entitlement.isSubscriber()) {
+      if (entitlement.isSubscriber() || entitlement.isFree()) {
         return platform;
       }
     }
@@ -527,7 +561,7 @@ export class PlatformStore {
     // Start with base score
     const weight = platform.getBaseScore();
 
-    // Iterate score factors checking service support
+    // Iterate score factors checking platform support
     for (const factor in this.scoreConfig_) {
       if (hasOwn(this.scoreConfig_, factor)) {
         factorWeights.push(this.getSupportedFactorWeight_(factor, platform));
@@ -548,12 +582,12 @@ export class PlatformStore {
    * @private
    */
   rankPlatformsByWeight_(platformWeights) {
-    const localPlatform = this.getLocalPlatform();
+    const localPlatform = this.getLocalPlatform_();
     platformWeights.sort((platform1, platform2) => {
       // Force local platform to win ties
       if (
-        platform2.weight == platform1.weight &&
-        platform1.platform == localPlatform
+        platform2.weight === platform1.weight &&
+        platform1.platform === localPlatform
       ) {
         return -1;
       }
@@ -575,7 +609,7 @@ export class PlatformStore {
   selectApplicablePlatformForFactor_(factor) {
     const platformWeights = this.getAvailablePlatforms().map((platform) => {
       const factorValue = platform.getSupportedScoreFactor(factor);
-      const weight = typeof factorValue == 'number' ? factorValue : 0;
+      const weight = typeof factorValue === 'number' ? factorValue : 0;
       return {platform, weight};
     });
     return this.rankPlatformsByWeight_(platformWeights);
@@ -585,15 +619,15 @@ export class PlatformStore {
    * Records a platform failure
    * logs error if all platforms have failed
    * uses fallback if there is one.
-   * @param {string} serviceId
+   * @param {string} platformKey
    */
-  reportPlatformFailureAndFallback(serviceId) {
+  reportPlatformFailureAndFallback(platformKey) {
     if (
-      serviceId === this.getLocalPlatform().getServiceId() &&
+      platformKey === this.getLocalPlatform_().getPlatformKey() &&
       this.fallbackEntitlement_
     ) {
       this.resolveEntitlement(
-        this.getLocalPlatform().getServiceId(),
+        this.getLocalPlatform_().getPlatformKey(),
         this.fallbackEntitlement_
       );
       user().warn(
@@ -601,10 +635,10 @@ export class PlatformStore {
         'Local platform has failed to resolve,  ' +
           'using fallback entitlement.'
       );
-    } else if (this.failedPlatforms_.indexOf(serviceId) == -1) {
-      const entitlement = Entitlement.empty(serviceId);
-      this.resolveEntitlement(serviceId, entitlement);
-      this.failedPlatforms_.push(serviceId);
+    } else if (this.failedPlatforms_.indexOf(platformKey) === -1) {
+      const entitlement = Entitlement.empty(platformKey);
+      this.resolveEntitlement(platformKey, entitlement);
+      this.failedPlatforms_.push(platformKey);
     }
   }
 
diff --git a/extensions/amp-subscriptions/0.1/renderer.js b/extensions/amp-subscriptions/0.1/renderer.js
index b40d96f5ee904..cc226736d2c8a 100644
--- a/extensions/amp-subscriptions/0.1/renderer.js
+++ b/extensions/amp-subscriptions/0.1/renderer.js
@@ -16,7 +16,7 @@
 
 import {Services} from '../../../src/services';
 import {childElementByTag, createElementWithAttributes} from '../../../src/dom';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 
 const CSS_PREFIX = 'i-amphtml-subs';
 
diff --git a/extensions/amp-subscriptions/0.1/service-adapter.js b/extensions/amp-subscriptions/0.1/service-adapter.js
index abd4e70a5d856..68186273726f6 100644
--- a/extensions/amp-subscriptions/0.1/service-adapter.js
+++ b/extensions/amp-subscriptions/0.1/service-adapter.js
@@ -42,11 +42,11 @@ export class ServiceAdapter {
 
   /**
    * Returns the encrypted document key for the specified service.
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @return {?string}
    */
-  getEncryptedDocumentKey(serviceId) {
-    return this.subscriptionService_.getEncryptedDocumentKey(serviceId);
+  getEncryptedDocumentKey(platformKey) {
+    return this.subscriptionService_.getEncryptedDocumentKey(platformKey);
   }
 
   /**
@@ -59,11 +59,11 @@ export class ServiceAdapter {
 
   /**
    * Returns the reader ID for the specified service.
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @return {!Promise<string>}
    */
-  getReaderId(serviceId) {
-    return this.subscriptionService_.getReaderId(serviceId);
+  getReaderId(platformKey) {
+    return this.subscriptionService_.getReaderId(platformKey);
   }
 
   /**
@@ -77,33 +77,39 @@ export class ServiceAdapter {
   /**
    * Delegates actions to local platform.
    * @param {string} action
+   * @param {?string} sourceId
    * @return {!Promise<boolean>}
    */
-  delegateActionToLocal(action) {
-    return this.delegateActionToService(action, 'local');
+  delegateActionToLocal(action, sourceId) {
+    return this.delegateActionToService(action, 'local', sourceId);
   }
 
   /**
    * Delegates actions to a given service.
    * @param {string} action
-   * @param {string} serviceId
+   * @param {string} platformKey
+   * @param {?string} sourceId
    * @return {!Promise<boolean>}
    */
-  delegateActionToService(action, serviceId) {
-    return this.subscriptionService_.delegateActionToService(action, serviceId);
+  delegateActionToService(action, platformKey, sourceId) {
+    return this.subscriptionService_.delegateActionToService(
+      action,
+      platformKey,
+      sourceId
+    );
   }
 
   /**
    * Delegate UI decoration to another service.
    * @param {!Element} element
-   * @param {string} serviceId
+   * @param {string} platformKey
    * @param {string} action
    * @param {?JsonObject} options
    */
-  decorateServiceAction(element, serviceId, action, options) {
+  decorateServiceAction(element, platformKey, action, options) {
     this.subscriptionService_.decorateServiceAction(
       element,
-      serviceId,
+      platformKey,
       action,
       options
     );
@@ -124,4 +130,43 @@ export class ServiceAdapter {
   selectPlatformForLogin() {
     return this.subscriptionService_.selectPlatformForLogin();
   }
+
+  /**
+   * Loads metering state.
+   * @return {!Promise<?./metering-store.MeteringStateDef>}
+   */
+  loadMeteringState() {
+    if (!this.subscriptionService_.metering_) {
+      return Promise.resolve(null);
+    }
+
+    return this.subscriptionService_.metering_.loadMeteringState();
+  }
+
+  /**
+   * Saves metering state.
+   * @param {!./metering-store.MeteringStateDef} meteringState
+   * @return {!Promise}
+   */
+  saveMeteringState(meteringState) {
+    if (!this.subscriptionService_.metering_) {
+      return Promise.resolve();
+    }
+
+    return this.subscriptionService_.metering_.saveMeteringState(meteringState);
+  }
+
+  /**
+   * Remembers metering entitlements were fetched
+   * with the current metering state.
+   *
+   * This helps avoid redundant fetches.
+   */
+  rememberMeteringEntitlementsWereFetched() {
+    if (!this.subscriptionService_.metering_) {
+      return;
+    }
+
+    this.subscriptionService_.metering_.entitlementsWereFetchedWithCurrentMeteringState = true;
+  }
 }
diff --git a/extensions/amp-subscriptions/0.1/subscription-platform.js b/extensions/amp-subscriptions/0.1/subscription-platform.js
index 9c323409e1292..35611ba773e99 100644
--- a/extensions/amp-subscriptions/0.1/subscription-platform.js
+++ b/extensions/amp-subscriptions/0.1/subscription-platform.js
@@ -22,10 +22,10 @@
  */
 export class SubscriptionPlatform {
   /**
-   * Returns the service Id.
+   * Returns the platform key.
    * @return {string}
    */
-  getServiceId() {}
+  getPlatformKey() {}
 
   /**
    * Requests entitlement for a subscription platform.
@@ -38,8 +38,16 @@ export class SubscriptionPlatform {
    * rendering.
    * @param {!./entitlement.Entitlement} unusedEntitlement
    * @param {?./entitlement.Entitlement} unusedGrantEntitlement
+   * @param {function()=} unusedContinueAuthorizationFlow Usually this is undefined. When it's defined,
+   *   that means (1) the authorization flow is blocked and (2) the subscription platform receiving
+   *   this callback is responsible for unblocking the flow. Once the flow is unblocked, the
+   *   platform should execute the `unusedContinueAuthorizationFlow` method to continue the flow.
    */
-  activate(unusedEntitlement, unusedGrantEntitlement) {}
+  activate(
+    unusedEntitlement,
+    unusedGrantEntitlement,
+    unusedContinueAuthorizationFlow
+  ) {}
 
   /**
    * Reset the platform and renderer.
@@ -69,10 +77,10 @@ export class SubscriptionPlatform {
 
   /**
    * Performs the pingback to the subscription platform.
-   * @param {!./entitlement.Entitlement} unusedSelectedPlatform
+   * @param {./entitlement.Entitlement|Array<./entitlement.Entitlement>} unusedEntitlement
    * @return {!Promise|undefined}
    */
-  pingback(unusedSelectedPlatform) {}
+  pingback(unusedEntitlement) {}
 
   /**
    * Tells if the platform supports a score factor
@@ -84,9 +92,10 @@ export class SubscriptionPlatform {
   /**
    * Executes action for the local platform.
    * @param {string} unusedAction
+   * @param {?string} unusedSourceId
    * @return {!Promise<boolean>}
    */
-  executeAction(unusedAction) {}
+  executeAction(unusedAction, unusedSourceId) {}
 
   /**
    * Returns the base score configured for the platform.
diff --git a/extensions/amp-subscriptions/0.1/test/test-amp-subscriptions.js b/extensions/amp-subscriptions/0.1/test/test-amp-subscriptions.js
index 6bb9376aebfb4..711dbbade0ad9 100644
--- a/extensions/amp-subscriptions/0.1/test/test-amp-subscriptions.js
+++ b/extensions/amp-subscriptions/0.1/test/test-amp-subscriptions.js
@@ -30,7 +30,6 @@ import {SubscriptionPlatform} from '../subscription-platform';
 import {SubscriptionService} from '../amp-subscriptions';
 import {ViewerSubscriptionPlatform} from '../viewer-subscription-platform';
 import {localSubscriptionPlatformFactory} from '../local-subscription-platform';
-import {setTimeout} from 'timers';
 
 describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
   let win;
@@ -73,6 +72,10 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
     services: [{'serviceId': 'platform1'}],
   };
 
+  const meteringPlatformConfig = {
+    services: [{'serviceId': 'platform1', 'enableMetering': true}],
+  };
+
   const serviceConfigIframe = {
     services: [
       {
@@ -314,7 +317,7 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
     platform.getEntitlements = env.sandbox
       .stub()
       .callsFake(() => Promise.resolve(entitlement));
-    platform.getServiceId = env.sandbox.stub().callsFake(() => 'local');
+    platform.getPlatformKey = env.sandbox.stub().callsFake(() => 'local');
 
     subscriptionService.platformConfig_ = platformConfig;
     subscriptionService.registerPlatform(serviceData.serviceId, factoryStub);
@@ -407,7 +410,8 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
         ? new Entitlement(grantEntitlementSpec)
         : null;
       const granted = !!grantEntitlementSpec;
-      const localPlatform = subscriptionService.platformStore_.getLocalPlatform();
+      const localPlatform =
+        subscriptionService.platformStore_.getLocalPlatform_();
       env.sandbox
         .stub(subscriptionService.platformStore_, 'getGrantStatus')
         .callsFake(() => Promise.resolve(granted));
@@ -433,7 +437,8 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
         granted: true,
         grantReason: GrantReason.SUBSCRIBER,
       });
-      const localPlatform = subscriptionService.platformStore_.getLocalPlatform();
+      const localPlatform =
+        subscriptionService.platformStore_.getLocalPlatform_();
       const selectPlatformStub =
         subscriptionService.platformStore_.selectPlatform;
       const activateStub = env.sandbox.stub(localPlatform, 'activate');
@@ -478,7 +483,8 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
           grantReason: GrantReason.SUBSCRIBER,
         }
       );
-      const localPlatform = subscriptionService.platformStore_.getLocalPlatform();
+      const localPlatform =
+        subscriptionService.platformStore_.getLocalPlatform_();
       const selectPlatformStub =
         subscriptionService.platformStore_.selectPlatform;
       const activateStub = env.sandbox.stub(localPlatform, 'activate');
@@ -531,7 +537,8 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
 
       await subscriptionService.initialize_();
       resolveRequiredPromises({granted: false});
-      const localPlatform = subscriptionService.platformStore_.getLocalPlatform();
+      const localPlatform =
+        subscriptionService.platformStore_.getLocalPlatform_();
       env.sandbox.stub(localPlatform, 'activate');
 
       await subscriptionService.selectAndActivatePlatform_();
@@ -557,40 +564,204 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
   });
 
   describe('startAuthorizationFlow_', () => {
-    it('should start grantStatus and platform selection', async () => {
-      subscriptionService.platformStore_ = new PlatformStore(products);
-      const getGrantStatusStub = env.sandbox
-        .stub(subscriptionService.platformStore_, 'getGrantStatus')
-        .callsFake(() => Promise.resolve());
-      const selectAndActivateStub = env.sandbox.stub(
-        subscriptionService,
-        'selectAndActivatePlatform_'
-      );
-      const performPingbackStub = env.sandbox.stub(
-        subscriptionService,
-        'performPingback_'
+    let entitlement;
+    let platform;
+    let platformStore;
+    let renderer;
+
+    beforeEach(() => {
+      renderer = subscriptionService.renderer_;
+
+      // Setup platform store.
+      const serviceAdapter = new ServiceAdapter(subscriptionService);
+      platformStore = new PlatformStore(products);
+      platform = localSubscriptionPlatformFactory(
+        ampdoc,
+        platformConfig.services[0],
+        serviceAdapter
       );
-      await subscriptionService.initialize_();
+      subscriptionService.platformStore_ = platformStore;
+
+      entitlement = new Entitlement({
+        source: 'local',
+        raw: 'raw',
+        granted: true,
+        grantReason: GrantReason.SUBSCRIBER,
+      });
+
+      env.sandbox.stub(platform, 'activate');
+      env.sandbox.stub(platform, 'getEntitlements').callsFake(() => {
+        subscriptionService.metering_.entitlementsWereFetchedWithCurrentMeteringState = true;
+        return Promise.resolve();
+      });
+      env.sandbox.stub(renderer, 'setGrantState');
+      env.sandbox
+        .stub(platformStore, 'getGrantEntitlement')
+        .resolves(entitlement);
+      env.sandbox.stub(platformStore, 'getGrantStatus').resolves(true);
+      env.sandbox.stub(platformStore, 'getPlatform').returns(platform);
+      env.sandbox.stub(platformStore, 'getResolvedEntitlementFor');
+      env.sandbox.stub(platformStore, 'resetPlatform');
+      env.sandbox.stub(platformStore, 'selectPlatform').resolves(platform);
+    });
+
+    it('should set grant state', async () => {
       subscriptionService.startAuthorizationFlow_();
-      expect(getGrantStatusStub).to.be.calledOnce;
-      expect(selectAndActivateStub).to.be.calledOnce;
+      await flush();
 
-      await subscriptionService.platformStore_.getGrantStatus();
-      expect(performPingbackStub).to.be.calledOnce;
+      expect(renderer.setGrantState).to.be.called;
     });
 
-    it('should not call selectAndActivatePlatform based on param', () => {
-      subscriptionService.platformStore_ = new PlatformStore(products);
-      const getGrantStatusStub = env.sandbox
-        .stub(subscriptionService.platformStore_, 'getGrantStatus')
-        .callsFake(() => Promise.resolve());
-      const selectAndActivateStub = env.sandbox.stub(
-        subscriptionService,
-        'selectAndActivatePlatform_'
-      );
+    it('should activate platform, when its requested', async () => {
+      subscriptionService.startAuthorizationFlow_(true);
+      await flush();
+
+      expect(platform.activate).to.be.called;
+    });
+
+    it('should not activate platform, when its not requested', async () => {
       subscriptionService.startAuthorizationFlow_(false);
-      expect(getGrantStatusStub).to.be.calledOnce;
-      expect(selectAndActivateStub).to.not.be.called;
+      await flush();
+
+      expect(platform.activate).to.not.be.called;
+    });
+
+    describe('with metering', () => {
+      beforeEach(async () => {
+        subscriptionService.getPlatformConfig_.resolves(meteringPlatformConfig);
+        await subscriptionService.initialize_();
+      });
+
+      it('handle grant state normally, when a non-metering platform granted', async () => {
+        subscriptionService.startAuthorizationFlow_();
+        await flush();
+
+        expect(renderer.setGrantState).to.be.called;
+        expect(platform.activate).to.be.called;
+      });
+
+      it('allow metering platform to consume entitlement before setting grant state, when the metering platform granted', async () => {
+        // Metering platform granted this entitlement.
+        entitlement.grantReason = GrantReason.METERING;
+        entitlement.service = meteringPlatformConfig.services[0].serviceId;
+
+        subscriptionService.startAuthorizationFlow_();
+        await flush();
+
+        // Wait to set grant state.
+        expect(renderer.setGrantState).to.not.be.called;
+        expect(platform.activate).be.called;
+
+        // Set grant state after platform continues flow.
+        const continueCallback = platform.activate.getCall(0).args[2];
+        continueCallback();
+        expect(renderer.setGrantState).to.be.called;
+      });
+
+      it('handle grant state normally, when there is no grant and we already fetched entitlements with the current metering state', async () => {
+        // Nothing granted.
+        platformStore.getGrantStatus.resolves(false);
+
+        // We already fetched entitlements with the current metering state.
+        subscriptionService.metering_.entitlementsWereFetchedWithCurrentMeteringState = true;
+
+        subscriptionService.startAuthorizationFlow_();
+        await flush();
+
+        expect(renderer.setGrantState).to.be.called;
+        expect(platform.activate).to.be.called;
+      });
+
+      it('fetch entitlements, when there is no grant and we have not fetched entitlements with the current metering state yet', async () => {
+        // Nothing granted.
+        platformStore.getGrantStatus.resolves(false);
+
+        // Add metering state.
+        env.sandbox
+          .stub(subscriptionService.metering_, 'loadMeteringState')
+          .resolves({key: 'value'});
+
+        subscriptionService.startAuthorizationFlow_();
+        await flush();
+
+        expect(platformStore.resetPlatform).to.be.called;
+        expect(platform.getEntitlements).to.be.called;
+      });
+
+      it('allow metering platform to generate metering state, before restarting authorization flow, when there is no grant and no metering state', async () => {
+        // Nothing granted.
+        platformStore.getGrantStatus.resolves(false);
+
+        // No metering state...
+        env.sandbox
+          .stub(subscriptionService.metering_, 'loadMeteringState')
+          .resolves(null);
+
+        subscriptionService.startAuthorizationFlow_();
+        await flush();
+
+        // Wait to set grant state.
+        expect(renderer.setGrantState).to.not.be.called;
+        expect(platform.activate).to.be.called;
+
+        // Let platform restart flow.
+        env.sandbox.stub(subscriptionService, 'startAuthorizationFlow_');
+        const restartCallback = platform.activate.getCall(0).args[2];
+        restartCallback();
+        expect(subscriptionService.startAuthorizationFlow_).to.be.called;
+      });
+    });
+  });
+
+  describe('resetPlatform', () => {
+    const platformKey = 'local';
+    let platform;
+
+    beforeEach(async () => {
+      const serviceAdapter = new ServiceAdapter(subscriptionService);
+      platform = localSubscriptionPlatformFactory(
+        ampdoc,
+        platformConfig.services[0],
+        serviceAdapter
+      );
+      env.sandbox.stub(platform, 'reset');
+
+      subscriptionService.getPlatformConfig_.resolves(meteringPlatformConfig);
+      subscriptionService.pageConfig_ = pageConfig;
+      subscriptionService.platformStore_ = new PlatformStore([platformKey]);
+      subscriptionService.platformStore_.resolvePlatform(platformKey, platform);
+
+      await subscriptionService.initialize_();
+    });
+
+    it('resets a specific platform', async () => {
+      expectAsyncConsoleError(/Platform for id platform1 is not resolved/);
+
+      subscriptionService.resetPlatform(platformKey);
+
+      await flush();
+
+      expect(platform.reset).to.be.called;
+    });
+  });
+
+  describe('resetPlatforms', () => {
+    beforeEach(async () => {
+      subscriptionService.getPlatformConfig_.resolves(meteringPlatformConfig);
+      subscriptionService.pageConfig_ = pageConfig;
+      subscriptionService.platformStore_ = new PlatformStore(['local']);
+      await subscriptionService.initialize_();
+    });
+
+    it('should clear metering flag(s), if metering is enabled', async () => {
+      subscriptionService.metering_.entitlementsWereFetchedWithCurrentMeteringState = true;
+
+      await subscriptionService.resetPlatforms();
+
+      expect(
+        subscriptionService.metering_
+          .entitlementsWereFetchedWithCurrentMeteringState
+      ).to.be.false;
     });
   });
 
@@ -692,10 +863,10 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
         'resetPlatformStore'
       );
       env.sandbox.stub(subscriptionService, 'startAuthorizationFlow_');
-      const origPlatforms = subscriptionService.platformStore_.serviceIds_;
+      const origPlatforms = subscriptionService.platformStore_.platformKeys_;
       await subscriptionService.resetPlatforms();
       expect(resetSubscriptionPlatformSpy).to.be.calledOnce;
-      expect(subscriptionService.platformStore_.serviceIds_).to.equal(
+      expect(subscriptionService.platformStore_.platformKeys_).to.equal(
         origPlatforms
       );
     });
@@ -814,7 +985,7 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
   describe('registerPlatform', () => {
     it('should work on free pages', async () => {
       const platformFactoryStub = env.sandbox.stub().callsFake(() => ({
-        getServiceId: () => 'platform1',
+        getPlatformKey: () => 'platform1',
       }));
       env.sandbox.stub(subscriptionService, 'initialize_').callsFake(() => {
         subscriptionService.platformConfig_ = freePlatformConfig;
@@ -861,7 +1032,7 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
 
         await subscriptionService.initialize_();
         expect(
-          subscriptionService.platformStore_.getLocalPlatform()
+          subscriptionService.platformStore_.getLocalPlatform_()
         ).to.be.instanceOf(LocalSubscriptionRemotePlatform);
       }
     );
@@ -874,7 +1045,7 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
 
         await subscriptionService.initialize_();
         expect(
-          subscriptionService.platformStore_.getLocalPlatform()
+          subscriptionService.platformStore_.getLocalPlatform_()
         ).to.be.instanceOf(ViewerSubscriptionPlatform);
       }
     );
@@ -906,13 +1077,16 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
       }
     );
 
-    it('not unlock page if no entitlments and viewer provides paywall', async () => {
+    it('not unlock page if no entitlements and viewer provides paywall', async () => {
       subscriptionService.doesViewerProvidePaywall_ = true;
       subscriptionService.doesViewerProvideAuth_ = true;
       subscriptionService.platformStore_ = new PlatformStore(products);
       const getGrantStatusStub = env.sandbox
         .stub(subscriptionService.platformStore_, 'getGrantStatus')
-        .callsFake(() => Promise.resolve());
+        .returns(Promise.resolve());
+      const getGrantEntitlementStub = env.sandbox
+        .stub(subscriptionService.platformStore_, 'getGrantEntitlement')
+        .returns(Promise.resolve());
       const selectAndActivateStub = env.sandbox.stub(
         subscriptionService,
         'selectAndActivatePlatform_'
@@ -925,11 +1099,10 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
         subscriptionService.renderer_,
         'setGrantState'
       );
-      subscriptionService.startAuthorizationFlow_();
+      await subscriptionService.startAuthorizationFlow_();
       expect(getGrantStatusStub).to.be.calledOnce;
+      expect(getGrantEntitlementStub).to.be.calledOnce;
       expect(selectAndActivateStub).to.be.calledOnce;
-
-      await subscriptionService.platformStore_.getGrantStatus();
       expect(performPingbackStub).to.be.called;
       expect(setGrantStateStub).to.not.be.called;
     });
@@ -969,18 +1142,23 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
         granted: true,
         grantReason: GrantReason.SUBSCRIBER,
       };
+      let resolver;
+      subscriptionService.viewTrackerPromise_ = new Promise((resolve) => {
+        resolver = resolve;
+      });
       const entitlement = Entitlement.parseFromJson(entitlementData);
-      subscriptionService.viewTrackerPromise_ = Promise.resolve();
+      const platform = new SubscriptionPlatform();
       subscriptionService.platformStore_ = new PlatformStore(['local']);
-      subscriptionService.platformStore_.resolvePlatform(
-        'local',
-        new SubscriptionPlatform()
-      );
+      subscriptionService.platformStore_.resolvePlatform('local', platform);
+      platform.isPingbackEnabled = () => true;
       const entitlementStub = env.sandbox
         .stub(subscriptionService.platformStore_, 'getGrantEntitlement')
         .callsFake(() => Promise.resolve(entitlement));
 
-      await subscriptionService.performPingback_();
+      const pingBackPromise = subscriptionService.performPingback_();
+      expect(entitlementStub).to.not.be.called;
+      resolver();
+      await pingBackPromise;
       expect(entitlementStub).to.be.called;
     });
 
@@ -1005,6 +1183,37 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
       expect(pingbackStub).to.be.calledWith(entitlement);
     });
 
+    it('should send pingback with all platforms that are enabled', async () => {
+      const entitlementData = {
+        source: 'local',
+        granted: true,
+        grantReason: GrantReason.SUBSCRIBER,
+      };
+      const entitlement = Entitlement.parseFromJson(entitlementData);
+      subscriptionService.viewTrackerPromise_ = Promise.resolve();
+      subscriptionService.platformStore_ = new PlatformStore(['local']);
+      const platform1 = new SubscriptionPlatform();
+      platform1.isPingbackEnabled = () => true;
+      const platform2 = new SubscriptionPlatform();
+      platform2.isPingbackEnabled = () => false;
+      const platform3 = new SubscriptionPlatform();
+      platform3.isPingbackEnabled = () => true;
+      subscriptionService.platformStore_.resolvePlatform('local', platform1);
+      subscriptionService.platformStore_.resolvePlatform('p2', platform2);
+      subscriptionService.platformStore_.resolvePlatform('p3', platform3);
+      env.sandbox
+        .stub(subscriptionService.platformStore_, 'getGrantEntitlement')
+        .callsFake(() => Promise.resolve(entitlement));
+      const pingbackStub1 = env.sandbox.stub(platform1, 'pingback');
+      const pingbackStub2 = env.sandbox.stub(platform2, 'pingback');
+      const pingbackStub3 = env.sandbox.stub(platform3, 'pingback');
+
+      await subscriptionService.performPingback_();
+      expect(pingbackStub1).to.be.calledWith(entitlement);
+      expect(pingbackStub2).to.be.not.be.called;
+      expect(pingbackStub3).to.be.calledWith(entitlement);
+    });
+
     it('should send pingback with all entitlements if "pingbackAllEntitlements" is set', async () => {
       const entitlementData = {
         source: 'local',
@@ -1052,9 +1261,9 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
         platformConfig.fallbackEntitlement
       );
       subscriptionService.initializePlatformStore_(['local']);
-      expect(subscriptionService.platformStore_.serviceIds_).to.be.deep.equal([
-        'local',
-      ]);
+      expect(subscriptionService.platformStore_.platformKeys_).to.be.deep.equal(
+        ['local']
+      );
       expect(
         subscriptionService.platformStore_.fallbackEntitlement_.json()
       ).to.be.deep.equal(entitlement.json());
@@ -1062,7 +1271,7 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
   });
 
   describe('action delegation', () => {
-    it('should call delegateActionToService with serviceId local', () => {
+    it('should call delegateActionToService with "local" platformKey', () => {
       const delegateStub = env.sandbox.stub(
         subscriptionService,
         'delegateActionToService'
@@ -1082,7 +1291,7 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
       const executeActionStub = env.sandbox.stub(platform, 'executeAction');
       const getPlatformStub = env.sandbox
         .stub(subscriptionService.platformStore_, 'onPlatformResolves')
-        .callsFake((serviceId, callback) => callback(platform));
+        .callsFake((platformKey, callback) => callback(platform));
       const action = action;
 
       await subscriptionService.delegateActionToService(action, 'local');
@@ -1092,21 +1301,21 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
   });
 
   describe('decorateServiceAction', () => {
-    it('should delegate element to platform of given serviceId', () => {
+    it('should delegate element to platform of given platformKey', () => {
       const element = document.createElement('div');
       element.setAttribute('subscriptions-service', 'swg-google');
       const platform = new SubscriptionPlatform();
-      platform.getServiceId = () => 'swg-google';
+      platform.getPlatformKey = () => 'swg-google';
       subscriptionService.platformStore_ = new PlatformStore([
         'local',
         'swg-google',
       ]);
       const whenResolveStub = env.sandbox
         .stub(subscriptionService.platformStore_, 'onPlatformResolves')
-        .callsFake((serviceId, callback) => callback(platform));
+        .callsFake((platformKey, callback) => callback(platform));
       const decorateUIStub = env.sandbox.stub(platform, 'decorateUI');
       subscriptionService.decorateServiceAction(element, 'swg-google', 'login');
-      expect(whenResolveStub).to.be.calledWith(platform.getServiceId());
+      expect(whenResolveStub).to.be.calledWith(platform.getPlatformKey());
       expect(decorateUIStub).to.be.calledWith(element);
     });
   });
@@ -1152,7 +1361,10 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
         subscriptionService.cryptoHandler_,
         'tryToDecryptDocument'
       );
-      subscriptionService.resolveEntitlementsToStore_('serviceId', entitlement);
+      subscriptionService.resolveEntitlementsToStore_(
+        'platformKey',
+        entitlement
+      );
       expect(stub).to.be.calledWith(decryptedDocumentKey);
     });
 
@@ -1170,7 +1382,10 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
         subscriptionService.cryptoHandler_,
         'tryToDecryptDocument'
       );
-      subscriptionService.resolveEntitlementsToStore_('serviceId', entitlement);
+      subscriptionService.resolveEntitlementsToStore_(
+        'platformKey',
+        entitlement
+      );
       expect(stub).to.not.be.called;
     });
   });
@@ -1233,7 +1448,7 @@ describes.fakeWin('AmpSubscriptions', {amp: true}, (env) => {
 
       await expect(
         subscriptionService.getAuthdataField('grantReason')
-      ).to.eventually.equal(GrantReason.UNLOCKED);
+      ).to.eventually.equal(GrantReason.FREE);
       await expect(
         subscriptionService.getAuthdataField('data.userAccount')
       ).to.eventually.equal(undefined);
diff --git a/extensions/amp-subscriptions/0.1/test/test-analytics.js b/extensions/amp-subscriptions/0.1/test/test-analytics.js
index cd8a9d42ca17e..dbbc8a9489b11 100644
--- a/extensions/amp-subscriptions/0.1/test/test-analytics.js
+++ b/extensions/amp-subscriptions/0.1/test/test-analytics.js
@@ -25,7 +25,7 @@ import {user} from '../../../../src/log';
 //--> env.sandbox.stub(ServiceUrl, 'adsUrl', url => serverUrl + url);
 
 const TAG = 'amp-subscriptions';
-const OPT_VARS = {'serviceId': 'service1'};
+const OPT_VARS = {'serviceId': 'platform1'};
 const INT_VARS = {
   'action': 'action1',
   'status': ActionStatus.SUCCESS,
@@ -43,7 +43,7 @@ describes.realWin('SubscriptionAnalytics', {amp: true}, (env) => {
   it('should not fail', () => {
     analytics.event('event1');
     analytics.serviceEvent('event1', 'serviceId');
-    analytics.actionEvent('service1', 'action1', ActionStatus.SUCCESS);
+    analytics.actionEvent('platform1', 'action1', ActionStatus.SUCCESS);
   });
 
   describe('internal routing', () => {
@@ -54,12 +54,12 @@ describes.realWin('SubscriptionAnalytics', {amp: true}, (env) => {
     });
 
     it('should trigger a service event', () => {
-      analytics.serviceEvent('event1', 'service1');
+      analytics.serviceEvent('event1', 'platform1');
       expect(eventStub).to.be.calledOnce.calledWith('event1', OPT_VARS);
     });
 
     it('should trigger an action event', () => {
-      analytics.actionEvent('service1', 'action1', ActionStatus.SUCCESS);
+      analytics.actionEvent('platform1', 'action1', ActionStatus.SUCCESS);
       expect(eventStub).to.be.calledOnce.calledWith(
         SubscriptionAnalyticsEvents.SUBSCRIPTIONS_ACTION,
         OPT_VARS,
@@ -92,7 +92,7 @@ describes.realWin('SubscriptionAnalytics', {amp: true}, (env) => {
     });
 
     it('should log an action event', () => {
-      analytics.actionEvent('service1', 'action1', ActionStatus.SUCCESS);
+      analytics.actionEvent('platform1', 'action1', ActionStatus.SUCCESS);
       expect(userLogStub).to.be.calledOnce.calledWith(
         TAG,
         'subscriptions-action-action1-success',
@@ -108,7 +108,7 @@ describes.realWin('SubscriptionAnalytics', {amp: true}, (env) => {
     it('should log a service event', () => {
       analytics.serviceEvent(
         SubscriptionAnalyticsEvents.PLATFORM_ACTIVATED,
-        'service1'
+        'platform1'
       );
       expect(userLogStub).to.be.calledOnce.calledWith(
         TAG,
@@ -144,14 +144,14 @@ describes.realWin('SubscriptionAnalytics', {amp: true}, (env) => {
     });
 
     it('should notify about service events', () => {
-      analytics.serviceEvent('servEvent', 'service1');
+      analytics.serviceEvent('servEvent', 'platform1');
       expect(eventStr).to.equal('servEvent');
       expect(optParams).to.deep.equal(OPT_VARS);
       expect(intParams).to.deep.equal({});
     });
 
     it('should notify about action events', () => {
-      analytics.actionEvent('service1', 'action1', ActionStatus.SUCCESS);
+      analytics.actionEvent('platform1', 'action1', ActionStatus.SUCCESS);
       expect(eventStr).to.equal(
         SubscriptionAnalyticsEvents.SUBSCRIPTIONS_ACTION
       );
diff --git a/extensions/amp-subscriptions/0.1/test/test-crypto-handler.js b/extensions/amp-subscriptions/0.1/test/test-crypto-handler.js
index bdd90749f3931..adf651b4290cb 100644
--- a/extensions/amp-subscriptions/0.1/test/test-crypto-handler.js
+++ b/extensions/amp-subscriptions/0.1/test/test-crypto-handler.js
@@ -39,13 +39,10 @@ describes.realWin(
         },
       ],
     };
-    // eslint-disable-next-line max-len
     const encryptedContent =
       '8bCQpCyIBxBHwTZVRaMuA+DGXSTzVHR/Eh/l6QqfvcXQbn5uF/HzL539jw6Ok8+oppqo2eP/H9oqaYCi4Ya50uVFzdTCBzOSTlJDmeXhqO1DIBYHIQTK3z+NweOAJci7aXwSOLtJZd1KrrCesoBjAlQ55GwyPe6xPVcUESjtT15Z7Ez1GSetSE99MIbn8fWjq5CjUZn4q3jDKdNGdM6NZ86lqL5ZsbbUQRQ2dIVExrwS9GuuFsuFi8Eahe3/eZaibZY4PzPuVR6jjCrDrgF5qw+N+uacDumoA5he/1WrHiYHzoV28Xo9yuBBm5JWEcMepoUkQgKVywOFZS4otSR81va9JNwk1F1AIQ4VOqezFE6ce92qbzo+aMVzceZJqPhVqsA=';
-    // eslint-disable-next-line max-len
     const decryptedContent =
       "\n              This is section is top secret.\n              You should only be able to read this if you have the correct permissions.\n              If you don't have the correct permissions, you shouldn't be able to read this section at all.\n            ";
-    // eslint-disable-next-line max-len
     const encryptedKey =
       "ENCRYPT({'AccessRequirements': ['googleAccessRequirements:123'], 'Key':'mSfq5tRx5omXoOX20Oqq8g=='})";
     const decryptedDocKey = 'mSfq5tRx5omXoOX20Oqq8g==';
@@ -130,7 +127,6 @@ describes.realWin(
     });
 
     describe('tryToDecryptDocument', () => {
-      // eslint-disable-next-line max-len
       it('should replace the encrypted content with decrypted content in multiple sections', async () => {
         cryptoHandler = new CryptoHandler(ampdoc);
         await cryptoHandler.tryToDecryptDocument(decryptedDocKey);
diff --git a/extensions/amp-subscriptions/0.1/test/test-entitlement.js b/extensions/amp-subscriptions/0.1/test/test-entitlement.js
index 3872ea985e6e5..5610250c008e4 100644
--- a/extensions/amp-subscriptions/0.1/test/test-entitlement.js
+++ b/extensions/amp-subscriptions/0.1/test/test-entitlement.js
@@ -112,4 +112,36 @@ describes.realWin('EntitlementClass', {}, () => {
     const pingbackData = entitlement.jsonForPingback();
     expect(pingbackData).to.deep.equal({raw, ...entitlement.json()});
   });
+
+  it('should identify subscriber entitlements', () => {
+    const raw = 'raw';
+    const granted = true;
+    const grantReason = GrantReason.SUBSCRIBER;
+    const entitlement = new Entitlement({
+      source,
+      raw,
+      service,
+      granted,
+      grantReason,
+      dataObject,
+    });
+    expect(entitlement.isFree()).to.be.false;
+    expect(entitlement.isSubscriber()).to.be.true;
+  });
+
+  it('should identify free entitlements', () => {
+    const raw = 'raw';
+    const granted = true;
+    const grantReason = GrantReason.FREE;
+    const entitlement = new Entitlement({
+      source,
+      raw,
+      service,
+      granted,
+      grantReason,
+      dataObject,
+    });
+    expect(entitlement.isFree()).to.be.true;
+    expect(entitlement.isSubscriber()).to.be.false;
+  });
 });
diff --git a/extensions/amp-subscriptions/0.1/test/test-local-subscription-rendering.js b/extensions/amp-subscriptions/0.1/test/test-local-subscription-rendering.js
index 44184fae249c4..45fbae71c735f 100644
--- a/extensions/amp-subscriptions/0.1/test/test-local-subscription-rendering.js
+++ b/extensions/amp-subscriptions/0.1/test/test-local-subscription-rendering.js
@@ -38,9 +38,9 @@ describes.realWin('local-subscriptions-rendering', {amp: true}, (env) => {
       dialog,
       serviceAdapter
     );
-    const serviceIds = ['service1', 'service2'];
+    const platformKeys = ['platformKey1', 'platformKey2'];
     entitlementsForService1 = new Entitlement({
-      service: serviceIds[0],
+      service: platformKeys[0],
       granted: false,
       grantReason: null,
     });
@@ -134,7 +134,7 @@ describes.realWin('local-subscriptions-rendering', {amp: true}, (env) => {
     let dialog0, dialog1, dialog2, dialog3;
 
     beforeEach(() => {
-      templatesMock = env.sandbox.mock(Services.templatesFor(win));
+      templatesMock = env.sandbox.mock(Services.templatesForDoc(ampdoc));
       dialogMock = env.sandbox.mock(renderer.dialog_);
       dialog0 = createElementWithAttributes(doc, 'div', {
         'id': 'dialog0',
diff --git a/extensions/amp-subscriptions/0.1/test/test-local-subscriptions.js b/extensions/amp-subscriptions/0.1/test/test-local-subscriptions.js
index 94e0eef5662fb..66a3f5d1e0ec6 100644
--- a/extensions/amp-subscriptions/0.1/test/test-local-subscriptions.js
+++ b/extensions/amp-subscriptions/0.1/test/test-local-subscriptions.js
@@ -69,7 +69,7 @@ describes.fakeWin('LocalSubscriptionsPlatform', {amp: true}, (env) => {
 
   beforeEach(() => {
     ampdoc = env.ampdoc;
-    serviceAdapter = new ServiceAdapter(null);
+    serviceAdapter = new ServiceAdapter({});
     const analytics = new SubscriptionAnalytics(ampdoc.getRootNode());
     env.sandbox.stub(serviceAdapter, 'getAnalytics').callsFake(() => analytics);
     env.sandbox
@@ -211,6 +211,39 @@ describes.fakeWin('LocalSubscriptionsPlatform', {amp: true}, (env) => {
     );
   });
 
+  it('should add metering params to url, if metering state is available', async () => {
+    env.sandbox
+      .stub(localSubscriptionPlatform.serviceAdapter_, 'loadMeteringState')
+      .returns({key: 'value'});
+    const fetchStub = env.sandbox
+      .stub(localSubscriptionPlatform.xhr_, 'fetchJson')
+      .callsFake(() => Promise.resolve({json: () => Promise.resolve(json)}));
+
+    await localSubscriptionPlatform.getEntitlements();
+    expect(fetchStub).to.be.calledWith(
+      'https://lipsum.com/login/authorize?rid=reader1&meteringState=eyJrZXkiOiJ2YWx1ZSJ9'
+    );
+  });
+
+  it('should save metering state from response', async () => {
+    const meteringState = {key: 'value'};
+    const responseWithMeteringState = {
+      ...json,
+      metering: {state: meteringState},
+    };
+    env.sandbox.stub(localSubscriptionPlatform.xhr_, 'fetchJson').returns(
+      Promise.resolve({
+        json: () => Promise.resolve(responseWithMeteringState),
+      })
+    );
+    const saveMeteringStateStub = env.sandbox
+      .stub(localSubscriptionPlatform.serviceAdapter_, 'saveMeteringState')
+      .returns(Promise.resolve());
+
+    await localSubscriptionPlatform.getEntitlements();
+    expect(saveMeteringStateStub).to.be.calledWith(meteringState);
+  });
+
   describe('validateActionMap', () => {
     let actionMap;
     beforeEach(() => {
@@ -239,9 +272,8 @@ describes.fakeWin('LocalSubscriptionsPlatform', {amp: true}, (env) => {
       'should return actionMap as is if login and subscribe actions' +
         ' are present',
       () => {
-        const returnedMap = localSubscriptionPlatform.validateActionMap(
-          actionMap
-        );
+        const returnedMap =
+          localSubscriptionPlatform.validateActionMap(actionMap);
         expect(JSON.stringify(returnedMap)).to.be.equal(
           JSON.stringify(actionMap)
         );
@@ -307,8 +339,10 @@ describes.fakeWin('LocalSubscriptionsPlatform', {amp: true}, (env) => {
         element.setAttribute('subscriptions-action', Action.LOGIN);
         element.removeAttribute('subscriptions-service');
         const platform = {};
-        const serviceId = 'serviceId';
-        platform.getServiceId = env.sandbox.stub().callsFake(() => serviceId);
+        const platformKey = 'platformKey';
+        platform.getPlatformKey = env.sandbox
+          .stub()
+          .callsFake(() => platformKey);
         const loginStub = env.sandbox
           .stub(
             localSubscriptionPlatform.serviceAdapter_,
@@ -321,7 +355,7 @@ describes.fakeWin('LocalSubscriptionsPlatform', {amp: true}, (env) => {
         );
         localSubscriptionPlatform.handleClick_(element);
         expect(loginStub).to.be.called;
-        expect(delegateStub).to.be.calledWith(Action.LOGIN, serviceId);
+        expect(delegateStub).to.be.calledWith(Action.LOGIN, platformKey);
       }
     );
 
@@ -342,11 +376,13 @@ describes.fakeWin('LocalSubscriptionsPlatform', {amp: true}, (env) => {
           'delegateActionToService'
         );
         const platform = {};
-        const serviceId = 'serviceId';
-        platform.getServiceId = env.sandbox.stub().callsFake(() => serviceId);
+        const platformKey = 'platformKey';
+        platform.getPlatformKey = env.sandbox
+          .stub()
+          .callsFake(() => platformKey);
         localSubscriptionPlatform.handleClick_(element);
         expect(loginStub).to.be.called;
-        expect(delegateStub).to.be.calledWith(Action.LOGIN, serviceId);
+        expect(delegateStub).to.be.calledWith(Action.LOGIN, platformKey);
       }
     );
 
@@ -366,8 +402,8 @@ describes.fakeWin('LocalSubscriptionsPlatform', {amp: true}, (env) => {
         'delegateActionToService'
       );
       const platform = {};
-      const serviceId = 'serviceId';
-      platform.getServiceId = env.sandbox.stub().callsFake(() => serviceId);
+      const platformKey = 'platformKey';
+      platform.getPlatformKey = env.sandbox.stub().callsFake(() => platformKey);
       localSubscriptionPlatform.handleClick_(element);
       expect(loginStub).to.not.be.called;
       expect(delegateStub).to.not.be.called;
diff --git a/extensions/amp-subscriptions/0.1/test/test-metering.js b/extensions/amp-subscriptions/0.1/test/test-metering.js
new file mode 100644
index 0000000000000..fbd9a77e735b8
--- /dev/null
+++ b/extensions/amp-subscriptions/0.1/test/test-metering.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {Metering} from '../metering';
+
+describes.fakeWin('Metering', {amp: true}, () => {
+  /** @type {!Metering} */
+  let metering;
+
+  beforeEach(() => {
+    const platformKey = 'subscribe.google.com';
+
+    metering = new Metering({
+      platformKey,
+    });
+  });
+
+  describe('saveMeteringState', () => {
+    it('saves state', async () => {
+      const newMeteringState = {new: true};
+
+      await metering.saveMeteringState(newMeteringState);
+      const savedMeteringState = await metering.loadMeteringState();
+
+      expect(savedMeteringState).to.deep.equal(newMeteringState);
+    });
+
+    it('resets flag', async () => {
+      metering.entitlementsWereFetchedWithCurrentMeteringState = true;
+
+      await metering.saveMeteringState({new: true});
+
+      expect(metering.entitlementsWereFetchedWithCurrentMeteringState).to.be
+        .false;
+    });
+  });
+
+  describe('loadMeteringState', () => {
+    it('loads state', async () => {
+      const newMeteringState = {new: true};
+
+      await metering.saveMeteringState(newMeteringState);
+      const savedMeteringState = await metering.loadMeteringState();
+
+      expect(savedMeteringState).to.deep.equal(newMeteringState);
+    });
+
+    it('returns null if state is not defined', async () => {
+      const meteringState = await metering.loadMeteringState();
+
+      expect(meteringState).to.equal(null);
+    });
+  });
+});
diff --git a/extensions/amp-subscriptions/0.1/test/test-platform-store.js b/extensions/amp-subscriptions/0.1/test/test-platform-store.js
index 0cddeb9546b90..ef07b4c308daa 100644
--- a/extensions/amp-subscriptions/0.1/test/test-platform-store.js
+++ b/extensions/amp-subscriptions/0.1/test/test-platform-store.js
@@ -22,17 +22,17 @@ import {user} from '../../../../src/log';
 
 describes.realWin('Platform store', {}, (env) => {
   let platformStore;
-  const serviceIds = ['service1', 'service2'];
+  const platformKeys = ['platform1', 'platform2'];
   const entitlementsForService1 = new Entitlement({
-    source: serviceIds[0],
+    source: platformKeys[0],
     raw: '',
-    service: serviceIds[0],
+    service: platformKeys[0],
     granted: true,
   });
   const entitlementsForService2 = new Entitlement({
-    source: serviceIds[1],
+    source: platformKeys[1],
     raw: '',
-    service: serviceIds[1],
+    service: platformKeys[1],
     granted: false,
   });
   const fallbackEntitlement = new Entitlement({
@@ -55,7 +55,7 @@ describes.realWin('Platform store', {}, (env) => {
 
   beforeEach(() => {
     platformStore = new PlatformStore(
-      serviceIds,
+      platformKeys,
       {
         supportsViewer: 9,
         testFactor1: 10,
@@ -65,32 +65,32 @@ describes.realWin('Platform store', {}, (env) => {
     );
   });
 
-  it('should instantiate with the service ids', () => {
-    expect(platformStore.serviceIds_).to.be.equal(serviceIds);
+  it('should instantiate with the platform keys', () => {
+    expect(platformStore.platformKeys_).to.be.equal(platformKeys);
   });
 
   it('should resolve entitlement', async () => {
     // Request entitlement promise even before it's resolved.
-    const p = platformStore.getEntitlementPromiseFor('service2');
+    const p = platformStore.getEntitlementPromiseFor('platform2');
 
     // Resolve once.
     const ent = new Entitlement({
-      service: 'service2',
+      service: 'platform2',
       granted: false,
     });
-    platformStore.resolveEntitlement('service2', ent);
-    expect(platformStore.getResolvedEntitlementFor('service2')).to.equal(ent);
-    expect(platformStore.getEntitlementPromiseFor('service2')).to.equal(p);
+    platformStore.resolveEntitlement('platform2', ent);
+    expect(platformStore.getResolvedEntitlementFor('platform2')).to.equal(ent);
+    expect(platformStore.getEntitlementPromiseFor('platform2')).to.equal(p);
 
     // Additional resolution doesn't change anything without reset.
     platformStore.resolveEntitlement(
-      'service2',
+      'platform2',
       new Entitlement({
-        service: 'service2',
+        service: 'platform2',
         granted: true,
       })
     );
-    expect(platformStore.getEntitlementPromiseFor('service2')).to.equal(p);
+    expect(platformStore.getEntitlementPromiseFor('platform2')).to.equal(p);
     await expect(p).to.eventually.equal(ent);
   });
 
@@ -101,9 +101,9 @@ describes.realWin('Platform store', {}, (env) => {
     );
     platformStore.onChange(cb);
     platformStore.resolveEntitlement(
-      'service2',
+      'platform2',
       new Entitlement({
-        service: 'service2',
+        service: 'platform2',
         granted: false,
       })
     );
@@ -119,13 +119,19 @@ describes.realWin('Platform store', {}, (env) => {
           throw new Error('Incorrect entitlement resolved');
         }
       });
-      platformStore.resolveEntitlement(serviceIds[1], entitlementsForService2);
-      platformStore.resolveEntitlement(serviceIds[0], entitlementsForService1);
+      platformStore.resolveEntitlement(
+        platformKeys[1],
+        entitlementsForService2
+      );
+      platformStore.resolveEntitlement(
+        platformKeys[0],
+        entitlementsForService1
+      );
     });
 
     it('should resolve true for existing positive entitlement', (done) => {
-      platformStore.entitlements_[serviceIds[0]] = entitlementsForService1;
-      platformStore.entitlements_[serviceIds[1]] = entitlementsForService2;
+      platformStore.entitlements_[platformKeys[0]] = entitlementsForService1;
+      platformStore.entitlements_[platformKeys[1]] = entitlementsForService2;
       platformStore.getGrantStatus().then((entitlements) => {
         if (entitlements === true) {
           done();
@@ -137,12 +143,12 @@ describes.realWin('Platform store', {}, (env) => {
 
     it('should resolve false for negative entitlement', (done) => {
       const negativeEntitlements = new Entitlement({
-        source: serviceIds[0],
+        source: platformKeys[0],
         raw: '',
-        service: serviceIds[0],
+        service: platformKeys[0],
       });
-      platformStore.entitlements_[serviceIds[0]] = negativeEntitlements;
-      platformStore.entitlements_[serviceIds[1]] = entitlementsForService2;
+      platformStore.entitlements_[platformKeys[0]] = negativeEntitlements;
+      platformStore.entitlements_[platformKeys[1]] = entitlementsForService2;
       platformStore.getGrantStatus().then((entitlements) => {
         if (entitlements === false) {
           done();
@@ -154,11 +160,11 @@ describes.realWin('Platform store', {}, (env) => {
 
     it('should resolve false if all future entitlement are also negative ', (done) => {
       const negativeEntitlements = new Entitlement({
-        source: serviceIds[0],
+        source: platformKeys[0],
         raw: '',
-        service: serviceIds[0],
+        service: platformKeys[0],
       });
-      platformStore.entitlements_[serviceIds[0]] = negativeEntitlements;
+      platformStore.entitlements_[platformKeys[0]] = negativeEntitlements;
       platformStore.getGrantStatus().then((entitlements) => {
         if (entitlements === false) {
           done();
@@ -166,26 +172,41 @@ describes.realWin('Platform store', {}, (env) => {
           throw new Error('Incorrect entitlement resolved');
         }
       });
-      platformStore.resolveEntitlement(serviceIds[1], entitlementsForService2);
+      platformStore.resolveEntitlement(
+        platformKeys[1],
+        entitlementsForService2
+      );
     });
   });
 
   describe('areAllPlatformsResolved_', () => {
     it('should return true if all entitlements are present', () => {
-      platformStore.resolveEntitlement(serviceIds[1], entitlementsForService2);
+      platformStore.resolveEntitlement(
+        platformKeys[1],
+        entitlementsForService2
+      );
       expect(platformStore.areAllPlatformsResolved_()).to.be.equal(false);
-      platformStore.resolveEntitlement(serviceIds[0], entitlementsForService1);
+      platformStore.resolveEntitlement(
+        platformKeys[0],
+        entitlementsForService1
+      );
       expect(platformStore.areAllPlatformsResolved_()).to.be.equal(true);
     });
   });
 
   describe('getAvailablePlatformsEntitlements_', () => {
     it('should return all available entitlements', () => {
-      platformStore.resolveEntitlement(serviceIds[1], entitlementsForService2);
+      platformStore.resolveEntitlement(
+        platformKeys[1],
+        entitlementsForService2
+      );
       expect(platformStore.getAvailablePlatformsEntitlements_()).to.deep.equal([
         entitlementsForService2,
       ]);
-      platformStore.resolveEntitlement(serviceIds[0], entitlementsForService1);
+      platformStore.resolveEntitlement(
+        platformKeys[0],
+        entitlementsForService1
+      );
       expect(platformStore.getAvailablePlatformsEntitlements_()).to.deep.equal([
         entitlementsForService2,
         entitlementsForService1,
@@ -200,13 +221,15 @@ describes.realWin('Platform store', {}, (env) => {
     const anotherPlatformBaseScore = 0;
     beforeEach(() => {
       localPlatform = new SubscriptionPlatform();
-      env.sandbox.stub(localPlatform, 'getServiceId').callsFake(() => 'local');
+      env.sandbox
+        .stub(localPlatform, 'getPlatformKey')
+        .callsFake(() => 'local');
       env.sandbox
         .stub(localPlatform, 'getBaseScore')
         .callsFake(() => localPlatformBaseScore);
       anotherPlatform = new SubscriptionPlatform();
       env.sandbox
-        .stub(anotherPlatform, 'getServiceId')
+        .stub(anotherPlatform, 'getPlatformKey')
         .callsFake(() => 'another');
       env.sandbox
         .stub(anotherPlatform, 'getBaseScore')
@@ -272,13 +295,15 @@ describes.realWin('Platform store', {}, (env) => {
     let anotherPlatformBaseScore = 0;
     beforeEach(() => {
       localPlatform = new SubscriptionPlatform();
-      env.sandbox.stub(localPlatform, 'getServiceId').callsFake(() => 'local');
+      env.sandbox
+        .stub(localPlatform, 'getPlatformKey')
+        .callsFake(() => 'local');
       env.sandbox
         .stub(localPlatform, 'getBaseScore')
         .callsFake(() => localPlatformBaseScore);
       anotherPlatform = new SubscriptionPlatform();
       env.sandbox
-        .stub(anotherPlatform, 'getServiceId')
+        .stub(anotherPlatform, 'getPlatformKey')
         .callsFake(() => 'another');
       env.sandbox
         .stub(anotherPlatform, 'getBaseScore')
@@ -313,9 +338,9 @@ describes.realWin('Platform store', {}, (env) => {
           service: 'another',
         })
       );
-      expect(platformStore.selectApplicablePlatform_().getServiceId()).to.equal(
-        localPlatform.getServiceId()
-      );
+      expect(
+        platformStore.selectApplicablePlatform_().getPlatformKey()
+      ).to.equal(localPlatform.getPlatformKey());
       platformStore.resolveEntitlement(
         'local',
         new Entitlement({
@@ -334,9 +359,9 @@ describes.realWin('Platform store', {}, (env) => {
           grantReason: GrantReason.SUBSCRIBER,
         })
       );
-      expect(platformStore.selectApplicablePlatform_().getServiceId()).to.equal(
-        anotherPlatform.getServiceId()
-      );
+      expect(
+        platformStore.selectApplicablePlatform_().getPlatformKey()
+      ).to.equal(anotherPlatform.getPlatformKey());
     });
 
     it('should choose local platform if all other conditions are same', () => {
@@ -363,9 +388,9 @@ describes.realWin('Platform store', {}, (env) => {
           service: 'another',
         })
       );
-      expect(platformStore.selectApplicablePlatform_().getServiceId()).to.equal(
-        localPlatform.getServiceId()
-      );
+      expect(
+        platformStore.selectApplicablePlatform_().getPlatformKey()
+      ).to.equal(localPlatform.getPlatformKey());
     });
 
     it('should chose platform based on score weight', () => {
@@ -395,9 +420,9 @@ describes.realWin('Platform store', {}, (env) => {
           service: 'another',
         })
       );
-      expect(platformStore.selectApplicablePlatform_().getServiceId()).to.equal(
-        anotherPlatform.getServiceId()
-      );
+      expect(
+        platformStore.selectApplicablePlatform_().getPlatformKey()
+      ).to.equal(anotherPlatform.getPlatformKey());
     });
 
     it('should chose platform based on multiple factors', () => {
@@ -430,9 +455,9 @@ describes.realWin('Platform store', {}, (env) => {
           service: 'another',
         })
       );
-      expect(platformStore.selectApplicablePlatform_().getServiceId()).to.equal(
-        localPlatform.getServiceId()
-      );
+      expect(
+        platformStore.selectApplicablePlatform_().getPlatformKey()
+      ).to.equal(localPlatform.getPlatformKey());
     });
 
     it('should chose platform specified factors', () => {
@@ -466,8 +491,10 @@ describes.realWin('Platform store', {}, (env) => {
         })
       );
       expect(
-        platformStore.selectApplicablePlatform_('supporsViewer').getServiceId()
-      ).to.equal(localPlatform.getServiceId());
+        platformStore
+          .selectApplicablePlatform_('supporsViewer')
+          .getPlatformKey()
+      ).to.equal(localPlatform.getPlatformKey());
     });
 
     it('should chose platform handle negative factor values', () => {
@@ -500,9 +527,9 @@ describes.realWin('Platform store', {}, (env) => {
           service: 'another',
         })
       );
-      expect(platformStore.selectApplicablePlatform_().getServiceId()).to.equal(
-        anotherPlatform.getServiceId()
-      );
+      expect(
+        platformStore.selectApplicablePlatform_().getPlatformKey()
+      ).to.equal(anotherPlatform.getPlatformKey());
     });
 
     it('should use baseScore', () => {
@@ -530,9 +557,9 @@ describes.realWin('Platform store', {}, (env) => {
           service: 'another',
         })
       );
-      expect(platformStore.selectApplicablePlatform_().getServiceId()).to.equal(
-        anotherPlatform.getServiceId()
-      );
+      expect(
+        platformStore.selectApplicablePlatform_().getPlatformKey()
+      ).to.equal(anotherPlatform.getPlatformKey());
     });
     it('getScoreFactorStates should return promised score', async () => {
       env.sandbox
@@ -587,7 +614,9 @@ describes.realWin('Platform store', {}, (env) => {
     beforeEach(() => {
       localFactors = {};
       localPlatform = new SubscriptionPlatform();
-      env.sandbox.stub(localPlatform, 'getServiceId').callsFake(() => 'local');
+      env.sandbox
+        .stub(localPlatform, 'getPlatformKey')
+        .callsFake(() => 'local');
       // Base score does not matter.
       env.sandbox.stub(localPlatform, 'getBaseScore').callsFake(() => 10000);
       env.sandbox
@@ -596,7 +625,7 @@ describes.realWin('Platform store', {}, (env) => {
       anotherFactors = {};
       anotherPlatform = new SubscriptionPlatform();
       env.sandbox
-        .stub(anotherPlatform, 'getServiceId')
+        .stub(anotherPlatform, 'getPlatformKey')
         .callsFake(() => 'another');
       env.sandbox.stub(anotherPlatform, 'getBaseScore').callsFake(() => 0);
       env.sandbox
@@ -631,25 +660,124 @@ describes.realWin('Platform store', {}, (env) => {
 
   describe('reportPlatformFailureAndFallback', () => {
     let errorSpy;
+
     beforeEach(() => {
       errorSpy = env.sandbox.spy(user(), 'warn');
     });
+
+    it('should report warning and use fallback entitlement, when local platform fails', () => {
+      const platform = new SubscriptionPlatform();
+      env.sandbox.stub(platform, 'getPlatformKey').returns('local');
+      env.sandbox.stub(platformStore, 'getLocalPlatform_').returns(platform);
+
+      platformStore.reportPlatformFailureAndFallback('local');
+      expect(errorSpy).to.be.calledOnce;
+      expect(platformStore.entitlements_['local'].json()).to.deep.equal(
+        fallbackEntitlement.json()
+      );
+    });
+
+    it('should use empty entitlement and call onChange callback, when non-local platform fails', () => {
+      env.sandbox
+        .stub(platformStore, 'getLocalPlatform_')
+        .returns(new SubscriptionPlatform());
+
+      platformStore.reportPlatformFailureAndFallback('service1');
+
+      expect(errorSpy).to.not.be.called;
+      expect(platformStore.entitlements_['service1'].json()).to.deep.equal(
+        Entitlement.empty('service1').json()
+      );
+    });
+
+    it('should only call onChange callback once, when non-local platform fails multiple times in a row', () => {
+      env.sandbox
+        .stub(platformStore, 'getLocalPlatform_')
+        .returns(new SubscriptionPlatform());
+      const onChangeSpy = env.sandbox.spy();
+      platformStore.onChange(onChangeSpy);
+
+      // Report failure for the first time.
+      // The onChange callback should be called.
+      onChangeSpy.resetHistory();
+      platformStore.reportPlatformFailureAndFallback('service1');
+      expect(onChangeSpy).to.be.calledOnce;
+
+      // Report failure for the second time.
+      // The onChange callback should NOT be called.
+      onChangeSpy.resetHistory();
+      platformStore.reportPlatformFailureAndFallback('service1');
+      expect(onChangeSpy).not.to.be.called;
+    });
+
     it(
-      'should report warning if all platforms fail and resolve ' +
-        'local with fallbackEntitlement',
+      'should call onChange callback again, when non-local platform fails multiple times ' +
+        'but with a success in between',
       () => {
-        const platform = new SubscriptionPlatform();
-        env.sandbox.stub(platform, 'getServiceId').callsFake(() => 'local');
         env.sandbox
-          .stub(platformStore, 'getLocalPlatform')
-          .callsFake(() => platform);
+          .stub(platformStore, 'getLocalPlatform_')
+          .returns(new SubscriptionPlatform());
+        const onChangeSpy = env.sandbox.spy();
+        platformStore.onChange(onChangeSpy);
+
+        // Report failure for the first time.
+        // The onChange callback should be called.
+        onChangeSpy.resetHistory();
         platformStore.reportPlatformFailureAndFallback('service1');
-        expect(errorSpy).to.not.be.called;
-        platformStore.reportPlatformFailureAndFallback('local');
-        expect(errorSpy).to.be.calledOnce;
-        expect(platformStore.entitlements_['local'].json()).to.deep.equal(
-          fallbackEntitlement.json()
+        expect(onChangeSpy).to.be.calledOnce;
+
+        // Succeed.
+        // This will reset the platform's failed flag.
+        platformStore.resolveEntitlement(
+          'service1',
+          Entitlement.empty('service1')
+        );
+
+        // Report failure for the second time.
+        // The onChange callback should be called again.
+        onChangeSpy.resetHistory();
+        platformStore.reportPlatformFailureAndFallback('service1');
+        expect(onChangeSpy).to.be.calledOnce;
+
+        // Report failure for the third time.
+        // The onChange callback should NOT be called again.
+        onChangeSpy.resetHistory();
+        platformStore.reportPlatformFailureAndFallback('service1');
+        expect(onChangeSpy).not.to.be.called;
+      }
+    );
+
+    it(
+      'should call onChange callback once, when non-local platform fails multiple times ' +
+        "but with a different platform's success in between",
+      () => {
+        env.sandbox
+          .stub(platformStore, 'getLocalPlatform_')
+          .returns(new SubscriptionPlatform());
+        const onChangeSpy = env.sandbox.spy();
+        platformStore.onChange(onChangeSpy);
+
+        // Report the other platform's failure first.
+        platformStore.reportPlatformFailureAndFallback('otherPlatform');
+
+        // Report failure for the first time.
+        // The onChange callback should be called.
+        onChangeSpy.resetHistory();
+        platformStore.reportPlatformFailureAndFallback('service1');
+        expect(onChangeSpy).to.be.calledOnce;
+
+        // Succeed with a different platform.
+        // This should not reset the "service1" platform's failed flag.
+        platformStore.resolveEntitlement(
+          'otherPlatform',
+          Entitlement.empty('otherPlatform')
         );
+
+        // Report failure for the second time.
+        // The onChange callback should be called again.
+        onChangeSpy.resetHistory();
+        platformStore.reportPlatformFailureAndFallback('service1');
+        expect(onChangeSpy).to.not.be.called;
       }
     );
 
@@ -659,19 +787,19 @@ describes.realWin('Platform store', {}, (env) => {
       async () => {
         const platform = new SubscriptionPlatform();
         const anotherPlatform = new SubscriptionPlatform();
-        env.sandbox.stub(platform, 'getServiceId').callsFake(() => 'local');
+        env.sandbox.stub(platform, 'getPlatformKey').callsFake(() => 'local');
         env.sandbox
-          .stub(platformStore, 'getLocalPlatform')
+          .stub(platformStore, 'getLocalPlatform_')
           .callsFake(() => platform);
         env.sandbox
-          .stub(anotherPlatform, 'getServiceId')
-          .callsFake(() => serviceIds[0]);
+          .stub(anotherPlatform, 'getPlatformKey')
+          .callsFake(() => platformKeys[0]);
         env.sandbox.stub(anotherPlatform, 'getBaseScore').callsFake(() => 10);
-        platformStore.resolvePlatform(serviceIds[0], anotherPlatform);
+        platformStore.resolvePlatform(platformKeys[0], anotherPlatform);
         platformStore.resolvePlatform('local', platform);
         platformStore.reportPlatformFailureAndFallback('local');
         platformStore.resolveEntitlement(
-          serviceIds[0],
+          platformKeys[0],
           entitlementsForService1
         );
 
@@ -680,7 +808,7 @@ describes.realWin('Platform store', {}, (env) => {
           fallbackEntitlement
         );
         // falbackEntitlement has Reason as SUBSCRIBER so it should win
-        expect(selectedPlatform.getServiceId()).to.equal('local');
+        expect(selectedPlatform.getPlatformKey()).to.equal('local');
       }
     );
 
@@ -690,20 +818,20 @@ describes.realWin('Platform store', {}, (env) => {
       async () => {
         const platform = new SubscriptionPlatform();
         const anotherPlatform = new SubscriptionPlatform();
-        env.sandbox.stub(platform, 'getServiceId').callsFake(() => 'local');
+        env.sandbox.stub(platform, 'getPlatformKey').callsFake(() => 'local');
         env.sandbox
-          .stub(platformStore, 'getLocalPlatform')
+          .stub(platformStore, 'getLocalPlatform_')
           .callsFake(() => platform);
         env.sandbox
-          .stub(anotherPlatform, 'getServiceId')
-          .callsFake(() => serviceIds[0]);
+          .stub(anotherPlatform, 'getPlatformKey')
+          .callsFake(() => platformKeys[0]);
         env.sandbox.stub(anotherPlatform, 'getBaseScore').callsFake(() => 10);
-        platformStore.resolvePlatform(serviceIds[0], anotherPlatform);
+        platformStore.resolvePlatform(platformKeys[0], anotherPlatform);
         platformStore.resolvePlatform('local', platform);
         fallbackEntitlement.grantReason = GrantReason.METERING;
         platformStore.reportPlatformFailureAndFallback('local');
         platformStore.resolveEntitlement(
-          serviceIds[0],
+          platformKeys[0],
           entitlementsForService1
         );
 
@@ -712,17 +840,17 @@ describes.realWin('Platform store', {}, (env) => {
           fallbackEntitlement
         );
         // falbackEntitlement has Reason as SUBSCRIBER so it should win
-        expect(selectedPlatform.getServiceId()).to.equal(serviceIds[0]);
+        expect(selectedPlatform.getPlatformKey()).to.equal(platformKeys[0]);
       }
     );
   });
 
   describe('getPlatform', () => {
-    it('should return the platform for the serviceId', () => {
+    it('should return the platform for a given platform key', () => {
       const platform = new SubscriptionPlatform();
-      platform.getServiceId = () => 'test';
+      platform.getPlatformKey = () => 'test';
       platformStore.subscriptionPlatforms_['test'] = platform;
-      expect(platformStore.getPlatform('test').getServiceId()).to.be.equal(
+      expect(platformStore.getPlatform('test').getPlatformKey()).to.be.equal(
         'test'
       );
     });
@@ -754,7 +882,7 @@ describes.realWin('Platform store', {}, (env) => {
     });
 
     it('should resolve with first entitlement with subscriptions', async () => {
-      platformStore.resolveEntitlement('service1', subscribedEntitlement);
+      platformStore.resolveEntitlement('platform1', subscribedEntitlement);
       const entitlement = await platformStore.getGrantEntitlement();
       expect(entitlement).to.equal(subscribedEntitlement);
     });
@@ -763,23 +891,23 @@ describes.realWin('Platform store', {}, (env) => {
       'should resolve with metered entitlement when no ' +
         'platform is subscribed',
       async () => {
-        platformStore.resolveEntitlement('service1', noEntitlement);
-        platformStore.resolveEntitlement('service2', meteringEntitlement);
+        platformStore.resolveEntitlement('platform1', noEntitlement);
+        platformStore.resolveEntitlement('platform2', meteringEntitlement);
         const entitlement = await platformStore.getGrantEntitlement();
         expect(entitlement).to.equal(meteringEntitlement);
       }
     );
 
     it('should override metering with subscription', async () => {
-      platformStore.resolveEntitlement('service1', meteringEntitlement);
-      platformStore.resolveEntitlement('service2', subscribedEntitlement);
+      platformStore.resolveEntitlement('platform1', meteringEntitlement);
+      platformStore.resolveEntitlement('platform2', subscribedEntitlement);
       const entitlement = await platformStore.getGrantEntitlement();
       expect(entitlement).to.equal(subscribedEntitlement);
     });
 
     it('should resolve to null if nothing matched', async () => {
-      platformStore.resolveEntitlement('service1', noEntitlement);
-      platformStore.resolveEntitlement('service2', noEntitlement);
+      platformStore.resolveEntitlement('platform1', noEntitlement);
+      platformStore.resolveEntitlement('platform2', noEntitlement);
       const entitlement = await platformStore.getGrantEntitlement();
       expect(entitlement).to.be.null;
     });
@@ -845,21 +973,23 @@ describes.realWin('Platform store', {}, (env) => {
 
     beforeEach(() => {
       localPlatform = new SubscriptionPlatform();
-      env.sandbox.stub(localPlatform, 'getServiceId').callsFake(() => 'local');
+      env.sandbox
+        .stub(localPlatform, 'getPlatformKey')
+        .callsFake(() => 'local');
     });
 
     it(
       'should return a promise resolving the requested platform ' +
         'if it is already registered',
       () => {
-        let serviceId;
+        let platformKey;
 
         platformStore.resolvePlatform('local', localPlatform);
         platformStore.onPlatformResolves('local', (platform) => {
-          serviceId = platform.getServiceId();
+          platformKey = platform.getPlatformKey();
         });
 
-        expect(serviceId).to.be.equal('local');
+        expect(platformKey).to.be.equal('local');
       }
     );
 
@@ -867,15 +997,31 @@ describes.realWin('Platform store', {}, (env) => {
       'should return a promise resolving when the requested platform ' +
         'gets registered',
       () => {
-        let serviceId;
+        let platformKey;
 
         platformStore.onPlatformResolves('local', (platform) => {
-          serviceId = platform.getServiceId();
+          platformKey = platform.getPlatformKey();
         });
         platformStore.resolvePlatform('local', localPlatform);
 
-        expect(serviceId).to.be.equal('local');
+        expect(platformKey).to.be.equal('local');
       }
     );
   });
+
+  describe('resetPlatform', () => {
+    const platformKey = 'local';
+    let platform;
+
+    beforeEach(() => {
+      platform = new SubscriptionPlatform();
+      env.sandbox.stub(platform, 'reset');
+      platformStore.resolvePlatform('local', platform);
+    });
+
+    it('should reset a given platform', () => {
+      platformStore.resetPlatform(platformKey);
+      expect(platform.reset).to.be.calledOnce;
+    });
+  });
 });
diff --git a/extensions/amp-subscriptions/0.1/test/test-service-adapter.js b/extensions/amp-subscriptions/0.1/test/test-service-adapter.js
index 48e667c82b61f..24ed5219386c5 100644
--- a/extensions/amp-subscriptions/0.1/test/test-service-adapter.js
+++ b/extensions/amp-subscriptions/0.1/test/test-service-adapter.js
@@ -37,20 +37,43 @@ describes.realWin(
             subscribe: 'https://lipsum.com/subscribe',
             login: 'https://lipsum.com/login',
           },
+          enableMetering: true,
         },
       ],
     };
-    beforeEach(() => {
+    beforeEach(async () => {
       pageConfig = new PageConfig('example.org:basic', true);
       ampdoc = env.ampdoc;
       win = env.win;
       ampdoc = env.ampdoc;
-      const element = win.document.createElement('script');
-      element.id = 'amp-subscriptions';
-      element.setAttribute('type', 'json');
-      element.innerHTML = JSON.stringify(serviceConfig);
-      win.document.body.appendChild(element);
+
+      // Platform config.
+      const platformConfigElement = win.document.createElement('script');
+      platformConfigElement.id = 'amp-subscriptions';
+      platformConfigElement.setAttribute('type', 'json');
+      platformConfigElement.innerHTML = JSON.stringify(serviceConfig);
+      win.document.body.appendChild(platformConfigElement);
+
+      // Page config.
+      const pageConfigElement = win.document.createElement('script');
+      pageConfigElement.type = 'application/ld+json';
+      pageConfigElement.innerHTML = `
+      {
+        "@context": "http://schema.org",
+        "@type": "NewsArticle",
+        "isAccessibleForFree": "False",
+        "isPartOf": {
+          "@type": ["CreativeWork", "Product"],
+          "name": "Scenic News",
+          "productID": "scenic-2017.appspot.com:news"
+        }
+      }
+      `;
+      win.document.body.appendChild(pageConfigElement);
+
       subscriptionService = new SubscriptionService(ampdoc);
+      await subscriptionService.initialize_();
+
       serviceAdapter = new ServiceAdapter(subscriptionService);
     });
 
@@ -60,9 +83,9 @@ describes.realWin(
           subscriptionService,
           'getEncryptedDocumentKey'
         );
-        serviceAdapter.getEncryptedDocumentKey('serviceId');
+        serviceAdapter.getEncryptedDocumentKey('platformKey');
         expect(stub).to.be.calledOnce;
-        expect(stub).to.be.calledWith('serviceId');
+        expect(stub).to.be.calledWith('platformKey');
       });
     });
 
@@ -119,13 +142,13 @@ describes.realWin(
     describe('decorateServiceAction', () => {
       it('should call decorateServiceAction of subscription service', () => {
         const element = win.document.createElement('div');
-        const serviceId = 'local';
+        const platformKey = 'local';
         const stub = env.sandbox.stub(
           subscriptionService,
           'decorateServiceAction'
         );
-        serviceAdapter.decorateServiceAction(element, serviceId, 'action');
-        expect(stub).to.be.calledWith(element, serviceId, 'action');
+        serviceAdapter.decorateServiceAction(element, platformKey, 'action');
+        expect(stub).to.be.calledWith(element, platformKey, 'action');
       });
     });
 
@@ -140,5 +163,63 @@ describes.realWin(
         expect(promise).to.equal(readerIdPromise);
       });
     });
+
+    describe('loadMeteringState', () => {
+      it('should return metering state, if metering is enabled', async () => {
+        const meteringState = {};
+        const stub = env.sandbox
+          .stub(subscriptionService.metering_, 'loadMeteringState')
+          .returns(meteringState);
+        expect(await serviceAdapter.loadMeteringState()).to.equal(
+          meteringState
+        );
+        expect(stub).to.be.calledOnce;
+      });
+
+      it('should handle metering being disabled', async () => {
+        delete subscriptionService.metering_;
+        expect(await serviceAdapter.loadMeteringState()).to.equal(null);
+      });
+    });
+
+    describe('saveMeteringState', () => {
+      it('should return promise, if metering is enabled', async () => {
+        const stub = env.sandbox.stub(
+          subscriptionService.metering_,
+          'saveMeteringState'
+        );
+        expect(await serviceAdapter.saveMeteringState()).to.equal(undefined);
+        expect(stub).to.be.calledOnce;
+      });
+
+      it('should handle metering being disabled', async () => {
+        delete subscriptionService.metering_;
+        expect(await serviceAdapter.saveMeteringState()).to.equal(undefined);
+      });
+    });
+
+    describe('rememberMeteringEntitlementsWereFetched', () => {
+      it('should update flag', async () => {
+        expect(
+          subscriptionService.metering_
+            .entitlementsWereFetchedWithCurrentMeteringState
+        ).to.be.false;
+
+        serviceAdapter.rememberMeteringEntitlementsWereFetched();
+
+        expect(
+          subscriptionService.metering_
+            .entitlementsWereFetchedWithCurrentMeteringState
+        ).to.be.true;
+      });
+
+      it('should handle metering being disabled', async () => {
+        delete subscriptionService.metering_;
+
+        expect(() =>
+          serviceAdapter.rememberMeteringEntitlementsWereFetched()
+        ).to.not.throw();
+      });
+    });
   }
 );
diff --git a/extensions/amp-subscriptions/0.1/test/test-viewer-platform.js b/extensions/amp-subscriptions/0.1/test/test-viewer-platform.js
index 076647722f03d..566e984ee0186 100644
--- a/extensions/amp-subscriptions/0.1/test/test-viewer-platform.js
+++ b/extensions/amp-subscriptions/0.1/test/test-viewer-platform.js
@@ -22,7 +22,7 @@ import {PageConfig} from '../../../../third_party/subscriptions-project/config';
 import {ServiceAdapter} from '../service-adapter';
 import {Services} from '../../../../src/services';
 import {ViewerSubscriptionPlatform} from '../viewer-subscription-platform';
-import {dict} from '../../../../src/utils/object';
+import {dict} from '../../../../src/core/types/object';
 import {getWinOrigin} from '../../../../src/url';
 
 describes.fakeWin('ViewerSubscriptionPlatform', {amp: true}, (env) => {
@@ -68,7 +68,7 @@ describes.fakeWin('ViewerSubscriptionPlatform', {amp: true}, (env) => {
   beforeEach(() => {
     ampdoc = env.ampdoc;
     win = env.win;
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
     serviceAdapter = new ServiceAdapter(null);
     const analytics = new SubscriptionAnalytics(ampdoc.getRootNode());
     env.sandbox.stub(serviceAdapter, 'getAnalytics').callsFake(() => analytics);
@@ -354,12 +354,12 @@ describes.fakeWin('ViewerSubscriptionPlatform', {amp: true}, (env) => {
   });
 
   describe('proxy methods', () => {
-    it('should delegate getServiceId', () => {
+    it('should delegate getPlatformKey', () => {
       const proxyStub = env.sandbox.stub(
         viewerPlatform.platform_,
-        'getServiceId'
+        'getPlatformKey'
       );
-      viewerPlatform.getServiceId();
+      viewerPlatform.getPlatformKey();
       expect(proxyStub).to.be.called;
     });
 
diff --git a/extensions/amp-subscriptions/0.1/test/test-viewer-tracker.js b/extensions/amp-subscriptions/0.1/test/test-viewer-tracker.js
index b8dd9696892fa..b6a71ba132454 100644
--- a/extensions/amp-subscriptions/0.1/test/test-viewer-tracker.js
+++ b/extensions/amp-subscriptions/0.1/test/test-viewer-tracker.js
@@ -1,4 +1,4 @@
-import {Observable} from '../../../../src/observable';
+import {Observable} from '../../../../src/core/data-structures/observable';
 import {ViewerTracker} from '../viewer-tracker';
 
 /**
diff --git a/extensions/amp-subscriptions/0.1/url-builder.js b/extensions/amp-subscriptions/0.1/url-builder.js
index f8b2a2ff21508..277d09816ad70 100644
--- a/extensions/amp-subscriptions/0.1/url-builder.js
+++ b/extensions/amp-subscriptions/0.1/url-builder.js
@@ -15,7 +15,7 @@
  */
 
 import {Services} from '../../../src/services';
-import {getValueForExpr} from '../../../src/json';
+import {getValueForExpr} from '../../../src/core/types/object';
 
 export class UrlBuilder {
   /**
diff --git a/extensions/amp-subscriptions/0.1/viewer-subscription-platform.js b/extensions/amp-subscriptions/0.1/viewer-subscription-platform.js
index ab975a8644ec0..aeb634b530aa5 100644
--- a/extensions/amp-subscriptions/0.1/viewer-subscription-platform.js
+++ b/extensions/amp-subscriptions/0.1/viewer-subscription-platform.js
@@ -20,7 +20,7 @@ import {JwtHelper} from '../../amp-access/0.1/jwt';
 import {PageConfig as PageConfigInterface} from '../../../third_party/subscriptions-project/config';
 import {Services} from '../../../src/services';
 import {devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getSourceOrigin, getWinOrigin} from '../../../src/url';
 import {localSubscriptionPlatformFactory} from './local-subscription-platform';
 
@@ -111,34 +111,36 @@ export class ViewerSubscriptionPlatform {
       authRequest['encryptedDocumentKey'] = encryptedDocumentKey;
     }
 
-    return /** @type {!Promise<Entitlement>} */ (this.timer_
-      .timeoutPromise(
-        ENTITLEMENTS_REQUEST_TIMEOUT,
-        this.viewer_.sendMessageAwaitResponse('auth', authRequest)
-      )
-      .then((entitlementData) => {
-        entitlementData = entitlementData || {};
-
-        /** Note to devs: Send error at top level of postMessage instead. */
-        const deprecatedError = entitlementData['error'];
-        const authData = entitlementData['authorization'];
-        const decryptedDocumentKey = entitlementData['decryptedDocumentKey'];
-
-        if (deprecatedError) {
-          throw new Error(deprecatedError.message);
-        }
-
-        if (!authData) {
-          return Entitlement.empty('local');
-        }
+    return /** @type {!Promise<Entitlement>} */ (
+      this.timer_
+        .timeoutPromise(
+          ENTITLEMENTS_REQUEST_TIMEOUT,
+          this.viewer_.sendMessageAwaitResponse('auth', authRequest)
+        )
+        .then((entitlementData) => {
+          entitlementData = entitlementData || {};
+
+          /** Note to devs: Send error at top level of postMessage instead. */
+          const deprecatedError = entitlementData['error'];
+          const authData = entitlementData['authorization'];
+          const decryptedDocumentKey = entitlementData['decryptedDocumentKey'];
+
+          if (deprecatedError) {
+            throw new Error(deprecatedError.message);
+          }
 
-        return this.verifyAuthToken_(authData, decryptedDocumentKey).catch(
-          (reason) => {
-            this.sendAuthTokenErrorToViewer_(reason.message);
-            throw reason;
+          if (!authData) {
+            return Entitlement.empty('local');
           }
-        );
-      }));
+
+          return this.verifyAuthToken_(authData, decryptedDocumentKey).catch(
+            (reason) => {
+              this.sendAuthTokenErrorToViewer_(reason.message);
+              throw reason;
+            }
+          );
+        })
+    );
   }
 
   /**
@@ -153,10 +155,9 @@ export class ViewerSubscriptionPlatform {
       const origin = getWinOrigin(this.ampdoc_.win);
       const sourceOrigin = getSourceOrigin(this.ampdoc_.win.location);
       const decodedData = this.jwtHelper_.decode(token);
-      const currentProductId = /** @type {string} */ (userAssert(
-        this.pageConfig_.getProductId(),
-        'Product id is null'
-      ));
+      const currentProductId = /** @type {string} */ (
+        userAssert(this.pageConfig_.getProductId(), 'Product id is null')
+      );
       if (decodedData['aud'] != origin && decodedData['aud'] != sourceOrigin) {
         throw user().createError(
           `The mismatching "aud" field: ${decodedData['aud']}`
@@ -232,8 +233,8 @@ export class ViewerSubscriptionPlatform {
   }
 
   /** @override */
-  getServiceId() {
-    return this.platform_.getServiceId();
+  getPlatformKey() {
+    return this.platform_.getPlatformKey();
   }
 
   /** @override */
@@ -268,8 +269,8 @@ export class ViewerSubscriptionPlatform {
   }
 
   /** @override */
-  executeAction(action) {
-    return this.platform_.executeAction(action);
+  executeAction(action, sourceId) {
+    return this.platform_.executeAction(action, sourceId);
   }
 
   /** @override */
diff --git a/extensions/amp-subscriptions/0.1/viewer-tracker.js b/extensions/amp-subscriptions/0.1/viewer-tracker.js
index bfbd080a8c452..2bcbb4fbe9838 100644
--- a/extensions/amp-subscriptions/0.1/viewer-tracker.js
+++ b/extensions/amp-subscriptions/0.1/viewer-tracker.js
@@ -15,7 +15,7 @@
  */
 
 import {Services} from '../../../src/services';
-import {cancellation} from '../../../src/error';
+import {cancellation} from '../../../src/error-reporting';
 import {dev} from '../../../src/log';
 import {listenOnce} from '../../../src/event-helper';
 
diff --git a/extensions/amp-subscriptions/OWNERS b/extensions/amp-subscriptions/OWNERS
index 522604b482560..bca1de28b7c18 100644
--- a/extensions/amp-subscriptions/OWNERS
+++ b/extensions/amp-subscriptions/OWNERS
@@ -1,14 +1,16 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [
         {name: 'chenshay'},
-        {name: 'dparikh'},
+        {name: 'chrisantaki'},
         {name: 'dvoytenko'},
+        {name: 'elijahsoria'},
         {name: 'jpettitt'},
+        {name: 'qidonna'},
       ],
     },
   ],
diff --git a/extensions/amp-subscriptions/amp-subscriptions.md b/extensions/amp-subscriptions/amp-subscriptions.md
index 3d43d7c9c1202..0fb399ce87e61 100644
--- a/extensions/amp-subscriptions/amp-subscriptions.md
+++ b/extensions/amp-subscriptions/amp-subscriptions.md
@@ -32,13 +32,13 @@ The `amp-subscriptions` component implements subscription-style access/paywall r
 
 1. The AMP Page is loaded in the AMP viewer with some sections obscured using [attributes][11].
 2. The AMP Runtime calls the [Authorization endpoint][3] of all configured services.
-   1. If all services fail to respond, the [fallback entitlement][8] will be used.
+    1. If all services fail to respond, the [fallback entitlement][8] will be used.
 3. The AMP Runtime uses the response to either hide or show different sections as defined by the [Attributes][11].
 4. After the document has been shown to the Reader, AMP Runtime calls the Pingback endpoint that can be used by the Publisher to update the countdown meter (number of free views used).
 5. The Publisher can place specific [Actions][12] in the AMP document in order to:
-   1. Launch their own [Login page][4] to authenticate the Reader and associate the Reader’s identity in their system with the [AMP Reader ID][1]
-   2. Launch their own [Subscribe page][5] to allow the Reader to purchase a new subscription
-   3. Launch login or subscribe actions from [Vendor Services][7].
+    1. Launch their own [Login page][4] to authenticate the Reader and associate the Reader’s identity in their system with the [AMP Reader ID][1]
+    2. Launch their own [Subscribe page][5] to allow the Reader to purchase a new subscription
+    3. Launch login or subscribe actions from [Vendor Services][7].
 
 ### Relationship to `amp-access`
 
@@ -46,14 +46,16 @@ The `amp-subscriptions` component is similar to [`amp-access`](../amp-access/amp
 and in many features builds on top of `amp-access`. However, it's a much more
 specialized version of access/paywall protocol. Some of the key differences are:
 
-1. The `amp-subscriptions` entitlements response is similar to the amp-access
-   authorization, but it's strictly defined and standardized.
-2. The `amp-subscriptions` component allows multiple services to be configured
+1. The `amp-subscriptions` [authorization endpoint](#authorization-endpoint) is similar to the
+   [`amp-access` authorization endpoint](../amp-access/amp-access.md#authorization-endpoint) but its response is strictly defined and standardized.
+2. Instead of using `amp-access-hide` and `amp-access` attributes as described in [`amp-access` Access Content Markup](../amp-access/amp-access.md#access-content-markup), you'll need to use:
+    - [`subscription-section`](#subscriptions-section) to define sections of content for subscribers and non-subscribers.
+    - [`subscription-display`](#subscriptions-display) to display elements based on factors that are **not** related to the subscription that the user has.
+3. The `amp-subscriptions` component allows multiple [vendor services](#vendor-services) to be configured
    for the page to participate in access/paywall decisions. Services are executed
    concurrently and prioritized based on which service returns the positive response.
-3. AMP viewers are allowed to provide `amp-subscriptions` a signed authorization
+4. AMP viewers are allowed to provide `amp-subscriptions` a signed authorization
    response based on an independent agreement with publishers as a proof of access.
-4. In `amp-subscriptions` content markup is standardized allowing apps and crawlers to easily detect premium content sections.
 
 Because of standardization of markup, support for multiple providers, and improved viewer
 support it is recommended that new publisher and paywall provider implementations
@@ -71,6 +73,8 @@ The Reader ID is constructed on the user device and intended to be long-lived. H
 
 The Reader ID is constructed similarly to the mechanism used to build ExternalCID described [here](https://docs.google.com/document/d/1f7z3X2GM_ASb3ZCI_7tngglxwS6WoWi1EB3aKzdf6vo/edit#heading=h.hb9q0wpwwhuf). An example Reader ID is `amp-OFsqR4pPKynymPyMmplPNMvxSTsNQob3TnK-oE3nwVT0clORaZ1rkeEz8xej-vV6`.
 
+We strongly recommend the usage of Reader ID over cookies to identify Readers, as publisher cookies are considered third party cookies when AMP is loaded from CDN and might be blocked by browsers. If you however want to rely on the cookie in cases where it is available, make sure to mark the cookies correctly as [cross-origin cookies](https://web.dev/samesite-cookies-explained/).
+
 ### Configuration
 
 The `amp-subscriptions` component must be configured using JSON configuration:
@@ -203,7 +207,7 @@ Below is an example of a "local" service configuration:
 
 #### URL variables
 
-When configuring the URLs for various endpoints, the Publisher can use substitution variables. The full list of these variables are defined in the [HTML URL Variable Substitutions](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
+When configuring the URLs for various endpoints, the Publisher can use substitution variables. The full list of these variables are defined in the [HTML URL Variable Substitutions](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md).
 
 [`amp-access`](../amp-access/amp-access.md) added the following subscriptions-specific variables:
 
@@ -218,7 +222,7 @@ When configuring the URLs for various endpoints, the Publisher can use substitut
   </tr>
   <tr>
     <td class="col-thirty"><code>AUTHDATA(field)</code></td>
-    <td>Available to Pingback and Login URLs. It allows passing any field in the authorization response as an URL parameter. For example, <code>AUTHDATA(data.isLoggedIn)`</code></td>
+    <td>Available to Pingback and Login URLs. It allows passing any field in the authorization response as an URL parameter. For example, <code>AUTHDATA(data.isLoggedIn)</code></td>
   </tr>
   <tr>
     <td class="col-thirty"><code>RETURN_URL</code></td>
@@ -295,7 +299,7 @@ The Entitlement response returned by the authorization endpoint must conform to
   <tr>
     <td class="col-fourty"><code>data</code></td>
     <td>&lt;object&gt;</td>
-    <td>Free-form data which can be used for template rendering, e.g. messaging related to metering or article count. See <a href="#customising-content">Customising Content</a> for more details.</td>
+    <td>Free-form data which can be used for template rendering, e.g. messaging related to metering or article count. See <a href="#using-scores-to-customise-content">Customising Content</a> for more details.</td>
   </tr>
 </table>
 
@@ -411,9 +415,13 @@ By default, as the body, pingback POST request receives the entitlement object r
 
 To accurately identify the Reader, the Publisher should associate the [AMP Reader ID][1] with any Publisher cookies relevant to the Reader.
 
-![Process Diagram](images/reader-id-assoociation.png)
+<amp-img alt="reader id cookie association" layout="responsive" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-subscriptions/images/reader-id-assoociation.png">
+  <noscript>
+    <img alt="reader id cookie association" layout="responsive" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-subscriptions/images/reader-id-assoociation.png">
+  </noscript>
+</amp-img>
 
-**Note:** due to the way that the [AMP Reader ID][1] is created, there may be multiple [AMP Reader IDs][1] for the same the Reader so the Publisher should be able to handle that appropriately.
+**Note:** due to the way that the [AMP Reader ID][1] is created, there may be multiple [AMP Reader IDs][1] for the same the user across different devices and browsers so the Publisher must take care to handle that appropriately.
 
 #### "iframe" mode
 
@@ -422,9 +430,9 @@ In the "iframe" mode authorization and pingback are provided by messaging to a p
 In iframe mode the `authorzationUrl` and `pingbackUrl` are deleted
 and replaced by:
 
-- "iframeSrc" - publisher supplied iframe
-- "iframeVars - AMP variables to be sent to the iframe
-- "type" - must be "iframe"
+-   "iframeSrc" - publisher supplied iframe
+-   "iframeVars - AMP variables to be sent to the iframe
+-   "type" - must be "iframe"
 
 The "local" service is configured in "iframe" mode as follows:
 
@@ -455,17 +463,17 @@ The "local" service is configured in "iframe" mode as follows:
 
 The properties in the "local" service are (remote mode):
 
-- "type" - optional type, defaults to "remote"
-- "authorizationUrl" - the authorization endpoint URL.
-- "pingbackUrl" - the pingback endpoint URL.
-- "actions" - a named map of action URLs. At a minimum there must be two actions specified: "login" and "subscribe".
+-   "type" - optional type, defaults to "remote"
+-   "authorizationUrl" - the authorization endpoint URL.
+-   "pingbackUrl" - the pingback endpoint URL.
+-   "actions" - a named map of action URLs. At a minimum there must be two actions specified: "login" and "subscribe".
 
 In iframe mode the `authorizationUrl` and `pingbackUrl` are deleted
 and replaced by:
 
-- "iframeSrc" - publisher supplied iframe
-- "iframeVars - AMP variables to be sent to the iframe
-- "type" - must be "iframe"
+-   "iframeSrc" - publisher supplied iframe
+-   "iframeVars - AMP variables to be sent to the iframe
+-   "type" - must be "iframe"
 
 See [amp-access-iframe](../amp-access/0.1/iframe-api/README.md) for details of the messaging protocol.
 
@@ -492,7 +500,7 @@ See the vendor service's documentation for details.
 
 #### Available vendor services
 
-- [amp-subscriptions-google](../amp-subscriptions-google/amp-subscriptions-google.md)
+-   [amp-subscriptions-google](../amp-subscriptions-google/amp-subscriptions-google.md)
 
 ### Service score factors
 
@@ -596,8 +604,8 @@ In order to present the Reader with specific experiences, the Publisher provides
 
 Available values:
 
-- `login`: this will trigger the [Login page][4] of the selected service.
-- `subscribe`: this will trigger the [Subscribe page][5] of the selected service.
+-   `login`: this will trigger the [Login page][4] of the selected service.
+-   `subscribe`: this will trigger the [Subscribe page][5] of the selected service.
 
 For example, this button will execute the "subscribe" action:
 
@@ -615,8 +623,8 @@ In the markup the actions can be delegated to other services for them to execute
 
 Available values:
 
-- `local`: this will force the `local` service to be used for a particular action.
-- `{serviceId}` (e.g. `subscribe.google.com`): this will force the service with ID `serviceId` to be used for a particular action.
+-   `local`: this will force the `local` service to be used for a particular action.
+-   `{serviceId}` (e.g. `subscribe.google.com`): this will force the service with ID `serviceId` to be used for a particular action.
 
 For example, this button will surface the subscribe page from the `subscribe.google.com` service, regardless of the [service score factors][9]:
 
@@ -649,8 +657,8 @@ The premium sections are shown/hidden automatically based on the authorization/e
 
 Available values:
 
-- `content`: this is used to encapsulate the premium content.
-- `content-not-granted`: this is used to will force the `local` service to be used for a particular action.
+-   `content`: this is used to encapsulate the premium content.
+-   `content-not-granted`: this is used to will force the `local` service to be used for a particular action.
 
 For instance, you should include the premium article contents in the `content` section and any fallback content in the `content-not-granted` section:
 
@@ -672,7 +680,7 @@ For instance, you should include the premium article contents in the `content` s
 
 As well as showing/hiding premium and fallback content, there are more ways to customise the document using the `subscriptions-display` attribute which uses expressions for actions and dialogs. The value of `subscriptions-display` is a boolean expression defined in a SQL-like language. The grammar is defined in [amp-access Appendix A](../amp-access/amp-access.md#appendix-a-amp-access-expression-grammar).
 
-Values in the `data` object of an Entitlements response can be used to build expressions. In this example the values of `isLoggedIn` and `isSubscriber` are in the `data` object and are used to conditionally show UI for login and upgrading your account:
+Values in the `data` object of an Entitlements response can be used to build expressions. In this example the value of `isLoggedIn` is in the `data` object and is used to conditionally show UI for login and upgrading your account:
 
 ```html
 <section>
@@ -787,20 +795,20 @@ Example action configuration:
 The `login` action flow is as follows:
 
 1. A request is made to the specified URL of the following format:
-   ```http
-   https://pub.com/amp-login?
-     rid=READER_ID
-     &url=SOURCE_URL
-     &return=RETURN_URL
-   ```
-   **Note:** the “return” URL parameter is added by the AMP Runtime automatically if `RETURN_URL` substitution is not specified.
+    ```http
+    https://pub.com/amp-login?
+      rid=READER_ID
+      &url=SOURCE_URL
+      &return=RETURN_URL
+    ```
+    **Note:** the “return” URL parameter is added by the AMP Runtime automatically if `RETURN_URL` substitution is not specified.
 2. The Login page will be opened as a normal web page with no special constraints, other than it should function well as a [browser dialog](https://developer.mozilla.org/en-US/docs/Web/API/Window/open).
 3. Once the Publisher has authenticated the Reader, the Publisher should associate the Publisher cookies with the [AMP Reader ID][1] as described in the [Combining the AMP Reader ID with Publisher Cookies][14] section.
 4. Once the Login page completes its work, it must redirect back to the specified “Return URL” with the following format:
-   ```text
-   RETURN_URL#success=true|false
-   ```
-   Notice the use of a URL hash parameter `success`. The value is either `true` or `false` depending on whether the login succeeds or is abandoned. Ideally the Login page, when possible, will send the signal in cases of both success or failure.
+    ```text
+    RETURN_URL#success=true|false
+    ```
+    Notice the use of a URL hash parameter `success`. The value is either `true` or `false` depending on whether the login succeeds or is abandoned. Ideally the Login page, when possible, will send the signal in cases of both success or failure.
 5. If the `success=true` signal is returned, the AMP Runtime will repeat calls to the Authorization and Pingback endpoints to update the document’s state and report the "view" with the new access profile.
 
 The `login` action will be triggered when the Reader clicks on a button with the `subscriptions-action="login"` attribute. For example:
@@ -816,19 +824,19 @@ The `login` action will be triggered when the Reader clicks on a button with the
 The `subscribe` flow is as follows:
 
 1. A request is made to the specified URL of the following format:
-   ```http
-   https://pub.com/amp-subscribe?
-     rid=READER_ID
-     &url=SOURCE_URL
-     &return=RETURN_URL
-   ```
-   **Note:** the “return” URL parameter is added by the AMP Runtime automatically if `RETURN_URL` substitution is not specified.
+    ```http
+    https://pub.com/amp-subscribe?
+      rid=READER_ID
+      &url=SOURCE_URL
+      &return=RETURN_URL
+    ```
+    **Note:** the “return” URL parameter is added by the AMP Runtime automatically if `RETURN_URL` substitution is not specified.
 2. The Subscribe page will be opened as a normal web page with no special constraints, other than it should function well as a [browser dialog](https://developer.mozilla.org/en-US/docs/Web/API/Window/open).
 3. Once the Subscribe page completes its work, it must redirect back to the specified “Return URL” with the following format:
-   ```text
-   RETURN_URL#success=true|false
-   ```
-   Notice the use of a URL hash parameter `success`. The value is either `true` or `false` depending on whether the login succeeds or is abandoned. Ideally the Subscribe page, when possible, will send the signal in cases of both success or failure.
+    ```text
+    RETURN_URL#success=true|false
+    ```
+    Notice the use of a URL hash parameter `success`. The value is either `true` or `false` depending on whether the login succeeds or is abandoned. Ideally the Subscribe page, when possible, will send the signal in cases of both success or failure.
 4. If the `success=true` signal is returned, the AMP Runtime will repeat calls to the Authorization and Pingback endpoints to update the document’s state and report the "view" with the new access profile.
 
 The `subscribe` action will be triggered when the Reader clicks on a button with the `subscriptions-action="subscribe"` attribute. For example:
@@ -845,83 +853,83 @@ The `amp-subscriptions` component triggers the following analytics signals:
 
 1. `subscriptions-started`
 
-- Triggered when `amp-subscriptions` is initialized.
-- Data: none.
+-   Triggered when `amp-subscriptions` is initialized.
+-   Data: none.
 
 2. `subscriptions-service-registered`
 
-- Triggered when `amp-subscriptions` is able to resolve the instance of the service. A service is free to initialize itself at anytime on the page.
-- Data: `serviceId` of the selected service.
+-   Triggered when `amp-subscriptions` is able to resolve the instance of the service. A service is free to initialize itself at anytime on the page.
+-   Data: `serviceId` of the selected service.
 
 3. `subscriptions-service-activated`
 
-- Triggered when a configured service is selected and activated for use. See [service score factors][9].
-- Data: `serviceId` of the selected service.
+-   Triggered when a configured service is selected and activated for use. See [service score factors][9].
+-   Data: `serviceId` of the selected service.
 
 4. `subscriptions-entitlement-resolved`
 
-- Triggered when the entitlement fetch for a service is complete.
-- Data: `serviceId` and `action` of the selected service.
+-   Triggered when the entitlement fetch for a service is complete.
+-   Data: `serviceId` and `action` of the selected service.
 
 5. `subscriptions-access-granted`
 
-- Triggered when the entitlement from the selected service grants access to the document.
-- Data: `serviceId` of the selected service.
+-   Triggered when the entitlement from the selected service grants access to the document.
+-   Data: `serviceId` of the selected service.
 
 6. `subscriptions-paywall-activated`
 
-- Triggered when the entitlement from the selected service does not grant access to the document.
-- Data: `serviceId` of the selected service.
+-   Triggered when the entitlement from the selected service does not grant access to the document.
+-   Data: `serviceId` of the selected service.
 
 7. `subscriptions-access-denied`
 
-- Triggered when the entitlement from the selected service denies access to the document.
-- Data: `serviceId` of the selected service.
+-   Triggered when the entitlement from the selected service denies access to the document.
+-   Data: `serviceId` of the selected service.
 
 8. `subscriptions-service-re-authorized`
 
-- Triggered when re-authorization of a service is complete. A service can request re-authorization after any action is performed e.g., `login`. A new entitlement is fetched for the service after re-authorization is complete.
-- Data: `serviceId` of the selected service.
+-   Triggered when re-authorization of a service is complete. A service can request re-authorization after any action is performed e.g., `login`. A new entitlement is fetched for the service after re-authorization is complete.
+-   Data: `serviceId` of the selected service.
 
 9. `subscriptions-action-delegated`
 
-- Triggered just before a delegated service action is handed off to the other service. See `[subscription-service][15]`.
-- Data: `serviceId` and the delegated `action` of the selected service.
+-   Triggered just before a delegated service action is handed off to the other service. See `[subscription-service][15]`.
+-   Data: `serviceId` and the delegated `action` of the selected service.
 
 10. `subscriptions-action-ActionName-started`
 
-- Triggered when the execution of action `ActionName` starts.
-- Data: none.
+-   Triggered when the execution of action `ActionName` starts.
+-   Data: none.
 
 11. `subscriptions-action-ActionName-failed`
 
-- Triggered when the execution of action `ActionName` fails due to any reason.
-- Data: none.
+-   Triggered when the execution of action `ActionName` fails due to any reason.
+-   Data: none.
 
 12. `subscriptions-action-ActionName-success`
 
-- Triggered when the execution result of action `ActionName` is reported as a success.
-- Data: none.
+-   Triggered when the execution result of action `ActionName` is reported as a success.
+-   Data: none.
 
 13. `subscriptions-action-ActionName-rejected`
 
-- Triggered when the execution result of action `ActionName` is reported as a failure.
-- Data: none.
+-   Triggered when the execution result of action `ActionName` is reported as a failure.
+-   Data: none.
 
 14. `subscriptions-link-requested`
 
-- Triggered when a subscription account linking request is initiated by the selected service.
-- Data: `serviceId` of the selected service.
+-   Triggered when a subscription account linking request is initiated by the selected service.
+-   Data: `serviceId` of the selected service.
 
 15. `subscriptions-link-complete`
 
-- Triggered when subscription account linking has been completed by the selected service.
-- Data: `serviceId` of the selected service.
+-   Triggered when subscription account linking has been completed by the selected service.
+-   Data: `serviceId` of the selected service.
 
 16. `subscriptions-link-canceled`
 
-- Triggered when a subscription account linking request initiated by the selected service has been cancelled.
-- Data: `serviceId` of the selected service.
+-   Triggered when a subscription account linking request initiated by the selected service has been cancelled.
+-   Data: `serviceId` of the selected service.
 
 [1]: #amp-reader-id
 [2]: #local-service
diff --git a/extensions/amp-tiktok/0.1/amp-tiktok.css b/extensions/amp-tiktok/0.1/amp-tiktok.css
new file mode 100644
index 0000000000000..06d9a135c1051
--- /dev/null
+++ b/extensions/amp-tiktok/0.1/amp-tiktok.css
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2021 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.
+ */
+
+.i-amphtml-tiktok-centered {
+    height: 100%;
+    left: 50%;
+    width: 325px;
+    transform: translateX(-50%);
+    position: absolute;
+}
+
+.i-amphtml-tiktok-unresolved {
+    position: fixed;
+    opacity: 0;
+    pointer-events: none;
+    width: 325px;
+    height: 500px;
+}
diff --git a/extensions/amp-tiktok/0.1/amp-tiktok.js b/extensions/amp-tiktok/0.1/amp-tiktok.js
new file mode 100644
index 0000000000000..25383410be8d9
--- /dev/null
+++ b/extensions/amp-tiktok/0.1/amp-tiktok.js
@@ -0,0 +1,235 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {CSS} from '../../../build/amp-tiktok-0.1.css';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {Services} from '../../../src/services';
+import {
+  childElementByTag,
+  createElementWithAttributes,
+  removeElement,
+} from '../../../src/dom';
+import {debounce} from '../../../src/core/types/function';
+import {getData, listen} from '../../../src/event-helper';
+import {isLayoutSizeDefined} from '../../../src/layout';
+import {px, resetStyles, setStyles} from '../../../src/style';
+import {tryParseJson} from '../../../src/core/types/object/json';
+
+let id = 0;
+const NAME_PREFIX = '__tt_embed__v';
+const PLAYER_WIDTH = 325;
+const ASPECT_RATIO = 1.77;
+const COMMENT_HEIGHT = 200;
+
+export class AmpTiktok extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {!Element} */
+    this.iframe_ = null;
+
+    /** @private {string} */
+    this.videoId_ = null;
+
+    /** @private {?Function}*/
+    this.unlistenMessage_ = null;
+
+    /** @private {?Promise} */
+    this.resolveReceivedFirstMessage_ = null;
+
+    /** @private {string} */
+    this.iframeNameString_ = this.getIframeNameString_();
+
+    /**
+     * @private {number}
+     * This value is calculated by multiplying our fixed width (325px)
+     * by the video aspect ratio (13:23 or 1.77) and adding 200px to account
+     * for the height of the caption.
+     */
+    this.fallbackHeight_ = PLAYER_WIDTH * ASPECT_RATIO + COMMENT_HEIGHT;
+
+    this.resizeOuter_ = (height) => {
+      resetStyles(this.iframe_, [
+        'width',
+        'height',
+        'position',
+        'opacity',
+        'pointer-events',
+      ]);
+      this.iframe_.removeAttribute('aria-hidden');
+      this.iframe_.setAttribute('aria-label', 'Tiktok');
+      this.iframe_.classList.remove('i-amphtml-tiktok-unresolved');
+      this.iframe_.classList.add('i-amphtml-tiktok-centered');
+      this.forceChangeHeight(height);
+    };
+
+    this.resizeOuterDebounced_ = debounce(
+      this.win,
+      (height) => {
+        this.resizeOuter_(height);
+      },
+      1000
+    );
+  }
+
+  /**
+   * @param {boolean=} opt_onLayout
+   * @override
+   */
+  preconnectCallback(opt_onLayout) {
+    /**
+     * @see {@link https://developers.tiktok.com/doc/Embed}
+     */
+    Services.preconnectFor(this.win).url(
+      this.getAmpDoc(),
+      'https://www.tiktok.com',
+      opt_onLayout
+    );
+  }
+
+  /** @override */
+  buildCallback() {
+    const {src} = this.element.dataset;
+    if (src) {
+      // If the user provides a src attribute extract the video id from the src
+      const videoIdRegex = /^((.+\/)?)(\d+)\/?$/;
+      this.videoId_ = src.replace(videoIdRegex, '$3');
+    } else {
+      // If the user provides a blockquote element use the blockquote videoId as video id
+      const blockquoteOrNull = childElementByTag(this.element, 'blockquote');
+      if (
+        !blockquoteOrNull ||
+        !blockquoteOrNull.hasAttribute('placeholder') ||
+        !blockquoteOrNull.dataset.videoId
+      ) {
+        // If the blockquote is not a placeholder or it does not contain a videoId
+        // exit early and do not set this.videoId to this value.
+        return;
+      }
+      this.videoId_ = blockquoteOrNull.dataset.videoId;
+    }
+  }
+
+  /** @override */
+  layoutCallback() {
+    const {locale = 'en-US'} = this.element.dataset;
+    const src = `https://www.tiktok.com/embed/v2/${encodeURIComponent(
+      this.videoId_
+    )}?lang=${encodeURIComponent(locale)}`;
+
+    const iframe = createElementWithAttributes(
+      this.element.ownerDocument,
+      'iframe',
+      {
+        'src': src,
+        'name': this.iframeNameString_,
+        'aria-hidden': 'true',
+        'frameborder': '0',
+        'class': 'i-amphtml-tiktok-unresolved',
+      }
+    );
+    this.iframe_ = iframe;
+
+    this.unlistenMessage_ = listen(
+      this.win,
+      'message',
+      this.handleTiktokMessages_.bind(this)
+    );
+
+    this.element.appendChild(iframe);
+    return this.loadPromise(iframe).then(() => {
+      const {promise, resolve} = new Deferred();
+
+      this.resolveRecievedFirstMessage_ = resolve;
+      Services.timerFor(this.win)
+        .timeoutPromise(1000, promise)
+        .catch(() => {
+          // If no resize messages are recieved the fallback is to
+          // resize to the fallbackHeight value.
+          this.resizeOuter_(this.fallbackHeight_);
+          setStyles(this.iframe_, {
+            'width': px(PLAYER_WIDTH),
+            'height': px(this.fallbackHeight_),
+          });
+        });
+    });
+  }
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  handleTiktokMessages_(event) {
+    if (
+      event.origin != 'https://www.tiktok.com' ||
+      event.source != this.iframe_.contentWindow
+    ) {
+      return;
+    }
+    const data = tryParseJson(getData(event));
+    if (!data) {
+      return;
+    }
+    if (data['height']) {
+      if (this.resolveReceivedFirstMessage_) {
+        this.resolveReceivedFirstMessage_();
+      }
+      this.resizeOuterDebounced_(data['height']);
+      setStyles(this.iframe_, {
+        'width': px(data['width']),
+        'height': px(data['height']),
+      });
+    }
+  }
+
+  /** @override */
+  unlayoutCallback() {
+    if (this.iframe_) {
+      removeElement(this.iframe_);
+      this.iframe_ = null;
+    }
+    if (this.unlistenMessage_) {
+      this.unlistenMessage_();
+    }
+    return true;
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+
+  /**
+   * Return unique name with the appropriate prefix.
+   * This name is defined by tiktok but is not documented on their site.
+   * @private
+   * @return {string}
+   */
+  getIframeNameString_() {
+    let idString = (id++).toString();
+    // The id is padded to 17 digits because that is what TikTok requires
+    // in order to recieve messages correctly.
+    while (idString.length < 17) {
+      idString = '0' + idString;
+    }
+    return NAME_PREFIX + idString;
+  }
+}
+
+AMP.extension('amp-tiktok', '0.1', (AMP) => {
+  AMP.registerElement('amp-tiktok', AmpTiktok, CSS);
+});
diff --git a/extensions/amp-tiktok/0.1/test/test-amp-tiktok.js b/extensions/amp-tiktok/0.1/test/test-amp-tiktok.js
new file mode 100644
index 0000000000000..139c67e4253a6
--- /dev/null
+++ b/extensions/amp-tiktok/0.1/test/test-amp-tiktok.js
@@ -0,0 +1,129 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import '../amp-tiktok';
+import * as dom from '../../../../src/dom';
+import {computedStyle} from '../../../../src/style';
+import {isAmpElement} from '../../../../src/dom';
+
+const VIDEOID = '6948210747285441798';
+
+describes.realWin(
+  'amp-tiktok',
+  {
+    amp: {
+      extensions: ['amp-tiktok'],
+    },
+  },
+  (env) => {
+    let win;
+    let doc;
+    let createElementWithAttributes;
+
+    beforeEach(() => {
+      win = env.win;
+      doc = win.document;
+      createElementWithAttributes = dom.createElementWithAttributes;
+
+      env.sandbox
+        .stub(dom, 'createElementWithAttributes')
+        .callsFake((document, tagName, attributes) => {
+          if (tagName === 'iframe' && attributes.src) {
+            // Serve a blank page, since these tests don't require an actual page.
+            // hash # at the end so path is not affected by param concat
+            attributes.src = `http://localhost:${location.port}/test/fixtures/served/blank.html#${attributes.src}`;
+          }
+          return createElementWithAttributes(document, tagName, attributes);
+        });
+    });
+
+    async function getTiktok(attrs = {}) {
+      const tiktok = dom.createElementWithAttributes(
+        win.document,
+        'amp-tiktok',
+        {
+          layout: 'responsive',
+          width: '325px',
+          height: '730px',
+          ...attrs,
+        }
+      );
+      doc.body.appendChild(tiktok);
+      return tiktok
+        .buildInternal()
+        .then(() => {
+          return tiktok.layoutCallback();
+        })
+        .then(() => tiktok);
+    }
+
+    it('renders with videoId', async () => {
+      const player = await getTiktok({'data-src': VIDEOID});
+      const iframe = player.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+      expect(iframe.getAttribute('src')).to.contain(VIDEOID);
+      expect(iframe.getAttribute('src')).to.contain('en-US');
+    });
+
+    it('renders with videoId', async () => {
+      const videoSrc =
+        'https://www.tiktok.com/@scout2015/video/6948210747285441798';
+      const player = await getTiktok({'data-src': videoSrc});
+      const iframe = player.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+      expect(iframe.getAttribute('src')).to.contain(VIDEOID);
+      expect(iframe.getAttribute('src')).to.contain('en-US');
+    });
+
+    it('renders with videoId and locale', async () => {
+      const player = await getTiktok({
+        'data-src': VIDEOID,
+        'data-locale': 'fr-FR',
+      });
+      const iframe = player.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+      expect(iframe.getAttribute('src')).to.contain(VIDEOID);
+      expect(iframe.getAttribute('src')).to.contain('fr-FR');
+    });
+
+    it('resizes using the fallback mechanism when no messages are received', async () => {
+      const player = await getTiktok({'data-src': VIDEOID});
+      const playerIframe = player.querySelector('iframe');
+      const impl = await player.getImpl(false);
+      env.sandbox.stub(impl, 'handleTiktokMessages_');
+
+      // Wait 1100ms for resize fallback to be invoked.
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, 1100);
+      });
+
+      expect(computedStyle(win, playerIframe).height).to.equal('775.25px');
+    });
+
+    it('removes iframe after unlayoutCallback', async () => {
+      const player = await getTiktok({'data-src': VIDEOID});
+      const playerIframe = player.querySelector('iframe');
+      expect(playerIframe).to.not.be.null;
+
+      const impl = await player.getImpl(false);
+      impl.unlayoutCallback();
+      expect(player.querySelector('iframe')).to.be.null;
+      expect(impl.iframe_).to.be.null;
+    });
+  }
+);
diff --git a/extensions/amp-tiktok/amp-tiktok.md b/extensions/amp-tiktok/amp-tiktok.md
new file mode 100644
index 0000000000000..a3328548cae9e
--- /dev/null
+++ b/extensions/amp-tiktok/amp-tiktok.md
@@ -0,0 +1,147 @@
+---
+$category@: social
+formats:
+  - websites
+teaser:
+  text: Displays a TikTok video embed.
+experimental: true
+---
+
+<!---
+Copyright 2021 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.
+-->
+
+# amp-tiktok
+
+## Usage
+
+The `amp-tiktok` component embeds a [TikTok](https://www.tiktok.com/about) video on your page.
+
+```html
+<amp-tiktok
+  width="325"
+  height="575"
+  data-src="6718335390845095173"
+></amp-tiktok>
+```
+
+### Behavior
+
+The `amp-tiktok` component displays the TikTok video in an iframe. You may specify the `width`, `height` and `data-src` attributes. `amp-tiktok` does not support autoplay and requires user interaction to play videos.
+
+## Avoiding Layout shift
+
+Prevent layout shift by matching the `width` and `height` attributes on the `amp-tiktok` element to the size of the video player.
+
+By default, the width of the `amp-tiktok` iframe is 325px, resulting in a hight of roughly 575px. The default height of the embedded TikTok video player depends on the length and content of the TikTok caption. To show the entire video, the `amp-tiktok` component resizes to match the player height. You can avoid this by defining the width and height to match the video player.
+
+[example preview="inline" playground="true" imports="amp-tiktok"]
+
+```html
+<amp-tiktok
+  width="325"
+  height="731"
+  data-src="6718335390845095173"
+></amp-tiktok>
+```
+
+[/example]
+
+If you choose to set the width to a value which is greater than 325px, the `iframe` will remain 325px and will be horizontally centered in that space. The surrounding space will be empty.
+
+If you choose to set the height of to a value which is which is greater than the height the height will remain the height of the `iframe`.
+
+## Attributes
+
+### `data-src`
+
+The `data-src` attribute can contain one of two values: a **video id** or a **full URL** to a TikTok detail page.
+
+Example with video-id
+
+[example preview="inline" playground="true" imports="amp-tiktok"]
+
+```html
+<amp-tiktok
+  width="325"
+  height="575"
+  data-src="6948210747285441798"
+></amp-tiktok>
+```
+
+[\example]
+
+Example with source url:
+
+[example preview="inline" playground="true" imports="amp-tiktok"]
+
+```html
+<amp-tiktok
+  width="325 "
+  height="575"
+  data-src="https://www.tiktok.com/@scout2015/video/6948210747285441798"
+></amp-tiktok>
+```
+
+[\example]
+
+In liu of the `data-src` attribute, `amp-tiktok` also allows the use of the TikTok generated embed code to display.
+
+To use this method copy the blockquote from the TikTok Embed code:
+
+1. Refer to the (TikTok embed documentation)[https://developers.tiktok.com/doc/Embed] to find the embed code for your TikTok.
+2. Copy the embed code and add it as a child element of the `amp-tiktok` element.
+3. Add the `placeholder` attribute to the `blockquote`.
+4. Remove the `style` attribute from the `blockquote`.
+
+[example preview="inline" playground="true" imports="amp-tiktok"]
+
+```html
+<amp-tiktok width="300" height="800">
+<blockquote
+  placeholder
+  class="tiktok-embed"
+  cite="https://www.tiktok.com/@countingprimes/video/6948210747285441798"
+  data-video-id="6948210747285441798"
+>
+  <section>
+    <a
+      target="_blank"
+      title="@countingprimes"
+      href="https://www.tiktok.com/@countingprimes"
+      >@countingprimes</a
+    >
+    <p>
+      VIM is great.... right up until you start typing the commands into every
+      single text editor you see. I’d like to apologize for all my unneeded
+      “:wq”’s
+    </p>
+    <a
+      target="_blank"
+      title="♬ original sound - countingprimes"
+      href="https://www.tiktok.com/music/original-sound-6948210588145175302"
+      >♬ original sound - countingprimes</a
+    >
+  </section>
+</blockquote>
+</amp-tiktok>
+```
+
+[\example]
+
+## Accessibility
+
+If the user provides an `aria-label` then that label will be propogated to the `iframe`.
+Otherwise the `aria-label` will default to 'TikTok'.
diff --git a/extensions/amp-timeago/0.1/amp-timeago.js b/extensions/amp-timeago/0.1/amp-timeago.js
index 2fdb8ad412f15..b22c28e30219e 100644
--- a/extensions/amp-timeago/0.1/amp-timeago.js
+++ b/extensions/amp-timeago/0.1/amp-timeago.js
@@ -14,8 +14,12 @@
  * limitations under the License.
  */
 
+import {format, getLocale} from './locales';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {timeago} from '../../../third_party/timeagojs/timeago';
+import {
+  observeWithSharedInOb,
+  unobserveWithSharedInOb,
+} from '../../../src/viewport-observer';
 import {userAssert} from '../../../src/log';
 
 export class AmpTimeAgo extends AMP.BaseElement {
@@ -48,13 +52,16 @@ export class AmpTimeAgo extends AMP.BaseElement {
     );
 
     this.datetime_ = this.element.getAttribute('datetime');
-    this.locale_ =
+    this.locale_ = getLocale(
       this.element.getAttribute('locale') ||
-      this.win.document.documentElement.lang;
+        this.win.document.documentElement.lang
+    );
     this.title_ = this.element.textContent.trim();
 
-    this.element.title = this.title_;
     this.element.textContent = '';
+    if (!this.element.hasAttribute('role')) {
+      this.element.setAttribute('role', 'text');
+    }
 
     this.timeElement_ = document.createElement('time');
     this.timeElement_.setAttribute('datetime', this.datetime_);
@@ -63,13 +70,30 @@ export class AmpTimeAgo extends AMP.BaseElement {
     this.element.appendChild(this.timeElement_);
   }
 
-  /** @override */
-  viewportCallback(inViewport) {
+  /**
+   * @param {boolean} inViewport
+   * @private
+   */
+  viewportCallback_(inViewport) {
     if (inViewport && !this.cutOffReached_) {
       this.setFuzzyTimestampValue_();
     }
   }
 
+  /** @override */
+  layoutCallback() {
+    observeWithSharedInOb(this.element, (inViewport) =>
+      this.viewportCallback_(inViewport)
+    );
+    return Promise.resolve();
+  }
+
+  /** @override */
+  unlayoutCallback() {
+    unobserveWithSharedInOb(this.element);
+    return false;
+  }
+
   /** @override */
   mutatedAttributesCallback(mutations) {
     const datetime = mutations['datetime'];
@@ -95,10 +119,10 @@ export class AmpTimeAgo extends AMP.BaseElement {
         this.timeElement_.textContent = this.title_;
         this.cutOffReached_ = true;
       } else {
-        this.timeElement_.textContent = timeago(this.datetime_, this.locale_);
+        this.timeElement_.textContent = format(this.datetime_, this.locale_);
       }
     } else {
-      this.timeElement_.textContent = timeago(this.datetime_, this.locale_);
+      this.timeElement_.textContent = format(this.datetime_, this.locale_);
     }
   }
 }
diff --git a/extensions/amp-timeago/0.1/amp-timeago.md b/extensions/amp-timeago/0.1/amp-timeago.md
new file mode 100644
index 0000000000000..4b7b829f04939
--- /dev/null
+++ b/extensions/amp-timeago/0.1/amp-timeago.md
@@ -0,0 +1,122 @@
+---
+$category@: presentation
+formats:
+  - websites
+  - email
+teaser:
+  text: Provides fuzzy timestamps by formatting dates as time ago (for example, 3 hours ago).
+---
+
+<!--
+Copyright 2017 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.
+-->
+
+# amp-timeago
+
+## Usage
+
+Use the `amp-timeago` component to count up to, or away from, a specified date and time.
+
+The component replaces the text node with a fuzzy timestamp, such as `in 30 years` or `3 hours ago`.
+
+Example:
+
+[example preview="inline" playground="true" imports="amp-timeago"]
+
+```html
+<amp-timeago
+  layout="fixed"
+  width="160"
+  height="20"
+  datetime="2017-04-11T00:37:33.809Z"
+  locale="en"
+>
+  Saturday 11 April 2017 00.37
+</amp-timeago>
+```
+
+[/example]
+
+The `amp-timeago` component requires a placeholder in the text node. The calculated timestamp replaces the placeholder once ready. Use the placeholder as a fallback to display to users if `amp-timeago` is unable to process the fuzzy timestamp.
+
+## Attributes
+
+### `datetime`
+
+The required `datetime` attribute sets the date and time. The value must be an [ISO datetime](https://www.w3.org/QA/Tips/iso-date).
+
+-   Express time in UTC (Coordinated Universal Time): `2017-03-10T01:00:00Z`
+-   Express in local time with a time zone offset: `2017-03-09T20:00:00-05:00`
+
+### `locale` (optional)
+
+The local default is `en`. Add the `locale` attribute and specify one of the following values to chance the local.
+
+-   `ar` (Arabic)
+-   `be` (Belarusian)
+-   `bg` (Bulgarian)
+-   `bn-IN` (Bangla)
+-   `ca` (Catalan)
+-   `cs` (Czech)
+-   `da` (Danish)
+-   `de` (German)
+-   `el` (Greek)
+-   `en` (English)
+-   `en-short` (English - short)
+-   `es` (Spanish)
+-   `eu` (Basque)
+-   `fa` (Persian - Farsi)
+-   `fi` (Finnish)
+-   `fr` (French)
+-   `gl` (Galician)
+-   `he` (Hebrew)
+-   `hi-IN` (Hindi)
+-   `hu` (Hungarian)
+-   `id-ID` (Malay)
+-   `it` (Italian)
+-   `ja` (Japanese)
+-   `ka` (Georgian)
+-   `ko` (Korean)
+-   `ml` (Malayalam)
+-   `my` (Burmese - Myanmar)
+-   `nb-NO` (Norwegian Bokmål)
+-   `nl` (Dutch)
+-   `nn-NO` (Norwegian Nynorsk)
+-   `pl` (Polish)
+-   `pt-BR` (Portuguese)
+-   `ro` (Romanian)
+-   `ru` (Russian)
+-   `sq` (Albanian)
+-   `sr` (Serbian)
+-   `sv` (Swedish)
+-   `ta` (Tamil)
+-   `th` (Thai)
+-   `tr` (Turkish)
+-   `uk` (Ukrainian)
+-   `vi` (Vietnamese)
+-   `zh-CN` (Chinese)
+-   `zh-TW` (Taiwanese)
+
+### `cutoff`
+
+Add the `cutoff` attribute to display the date specified in the `datatime` attribute after passing the specified date in seconds.
+
+### Common attributes
+
+The AMP provided set of [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) is available to `<amp-timeago>`.
+
+## Validation
+
+See [amp-timeago rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-timeago/validator-amp-timeago.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-timeago/0.1/locales.js b/extensions/amp-timeago/0.1/locales.js
new file mode 100644
index 0000000000000..6e77c408338db
--- /dev/null
+++ b/extensions/amp-timeago/0.1/locales.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * This file registers all necessary locales supported by amp-timeago.
+ */
+
+import * as timeago from 'timeago.js/dist/timeago.full.min.js';
+import cs from 'timeago.js/esm/lang/cs.js';
+import da from 'timeago.js/esm/lang/da.js';
+import ka from 'timeago.js/esm/lang/ka.js';
+import oc from 'timeago.js/esm/lang/oc.js';
+
+const {format, register} = timeago.default || timeago;
+export {format};
+
+/**
+ * timeago.full.min.js only contains the following 41 locales:
+ * ar, be, bg, bn_IN, ca, de, el, en_short, en_US, es, eu, fa, fi, fr, gl, he,
+ * hi_IN, hu, id_ID, it, ja, ko, ml, my, nb_NO, nl, nn_NO, pl, pt_BR, ro, ru,
+ * sq, sr, sv, ta, th, tr, uk, vi, zh_CN, zh_TW
+ *
+ * Register the rest to create full support for the 46 languages
+ * provided by the timeago.js library.
+ *
+ * TODO(wg-components): These can be removed once all the languages are
+ * exported in timeago.js. See https://github.com/hustcc/timeago.js/issues/238.
+ */
+register('cs', cs);
+register('da', da);
+register('ka', ka);
+register('oc', oc);
+
+/**
+ * timeago.full.min.js registers some locales in a different format than what
+ * is currently supported by amp-timeago. For backwards compatibility, the
+ * following additional locale formats are converted to their registered type.
+ * @param {string} locale
+ * @return {string}
+ */
+export function getLocale(locale) {
+  locale = locale.toLowerCase();
+  if (nonStandardReplacements[locale]) {
+    return nonStandardReplacements[locale];
+  }
+  if (
+    locale.length === 4 /* without '-|_' */ ||
+    locale.length === 5 /* with '-|_' */
+  ) {
+    return `${locale.slice(0, 2)}_${locale.slice(-2).toUpperCase()}`;
+  }
+  return locale;
+}
+
+const nonStandardReplacements = {
+  'en': 'en_US',
+  'enshort': 'en_short',
+  'en-short': 'en_short',
+  'inbg': 'bn_IN',
+  'inid': 'id_ID',
+  'inhi': 'hi_IN',
+};
diff --git a/extensions/amp-timeago/0.1/test/test-amp-timeago.js b/extensions/amp-timeago/0.1/test/test-amp-timeago.js
index 40d322ef4e58c..672a61765eefc 100644
--- a/extensions/amp-timeago/0.1/test/test-amp-timeago.js
+++ b/extensions/amp-timeago/0.1/test/test-amp-timeago.js
@@ -37,22 +37,22 @@ describes.realWin(
       win.document.body.appendChild(element);
     });
 
-    it('should display 2 days ago when built', () => {
+    it('should display 2 days ago when built', async () => {
       const date = new Date();
       date.setDate(date.getDate() - 2);
       element.setAttribute('datetime', date.toISOString());
       element.textContent = date.toString();
-      element.build();
+      await element.buildInternal();
       const timeElement = element.querySelector('time');
       expect(timeElement.textContent).to.equal('2 days ago');
     });
 
-    it('should display original date when older than cutoff', () => {
+    it('should display original date when older than cutoff', async () => {
       const date = new Date('2017-01-01');
       element.setAttribute('datetime', date.toISOString());
       element.textContent = 'Sunday 1 January 2017';
       element.setAttribute('cutoff', '8640000');
-      element.build();
+      await element.buildInternal();
       const timeElement = element.querySelector('time');
       expect(timeElement.textContent).to.equal('Sunday 1 January 2017');
     });
@@ -62,19 +62,19 @@ describes.realWin(
       date.setSeconds(date.getSeconds() - 10);
       element.setAttribute('datetime', date.toISOString());
       element.textContent = date.toString();
-      element.build();
+      await element.buildInternal();
       await timeout(1000);
-      element.viewportCallback(true);
+      (await element.getImpl(true)).viewportCallback_(true);
       const timeElement = element.querySelector('time');
       expect(timeElement.textContent).to.equal('11 seconds ago');
     });
 
-    it('should update after mutation of datetime attribute', () => {
+    it('should update after mutation of datetime attribute', async () => {
       const date = new Date();
       date.setDate(date.getDate() - 2);
       element.setAttribute('datetime', date.toISOString());
       element.textContent = date.toString();
-      element.build();
+      await element.buildInternal();
       date.setDate(date.getDate() + 1);
       element.setAttribute('datetime', date.toString());
       element.mutatedAttributesCallback({
@@ -83,5 +83,36 @@ describes.realWin(
       const timeElement = element.querySelector('time');
       expect(timeElement.textContent).to.equal('1 day ago');
     });
+
+    it('should have a role of text on the custom element by default', async () => {
+      const date = new Date();
+      date.setDate(date.getDate() - 2);
+      element.setAttribute('datetime', date.toISOString());
+      element.textContent = date.toString();
+      await element.buildInternal();
+      await timeout(1000);
+      expect(element.getAttribute('role')).to.equal('text');
+    });
+
+    it('should not override the role attribute if set', async () => {
+      const date = new Date();
+      date.setDate(date.getDate() - 2);
+      element.setAttribute('datetime', date.toISOString());
+      element.textContent = date.toString();
+      element.setAttribute('role', 'button');
+      await element.buildInternal();
+      await timeout(1000);
+      expect(element.getAttribute('role')).to.equal('button');
+    });
+
+    it('should not have a title attribute', async () => {
+      const date = new Date();
+      date.setDate(date.getDate() - 2);
+      element.setAttribute('datetime', date.toISOString());
+      element.textContent = date.toString();
+      await element.buildInternal();
+      await timeout(1000);
+      expect(element.hasAttribute('title')).to.be.false;
+    });
   }
 );
diff --git a/extensions/amp-timeago/0.1/test/validator-amp-timeago-mutation-error.out b/extensions/amp-timeago/0.1/test/validator-amp-timeago-mutation-error.out
index cbe4834d4fd34..8abedd6c55daf 100644
--- a/extensions/amp-timeago/0.1/test/validator-amp-timeago-mutation-error.out
+++ b/extensions/amp-timeago/0.1/test/validator-amp-timeago-mutation-error.out
@@ -43,7 +43,7 @@ FAIL
 |      <!-- invalid, layout cannot be mutated with amp-bind -->
 |      <amp-timeago layout="fixed" width="160" height="20" datetime="2018-04-11T00:37:33.809Z" locale="en" cutoff="8640000" [datetime]="myState.datetime" [title]="myState.title" [layout]="myState.layout">Saturday 11 April 2018 00.37</amp-timeago>
 >>     ^~~~~~~~~
-amp-timeago/0.1/test/validator-amp-timeago-mutation-error.html:43:4 The attribute '[layout]' may not appear in tag 'amp-timeago'. (see https://amp.dev/documentation/components/amp-timeago)
+amp-timeago/0.1/test/validator-amp-timeago-mutation-error.html:43:4 The attribute '[layout]' may not appear in tag 'amp-timeago'. (see https://amp.dev/documentation/components/amp-timeago/)
 |
 |    </body>
 |  </html>
diff --git a/extensions/amp-timeago/0.1/test/validator-amp-timeago.out b/extensions/amp-timeago/0.1/test/validator-amp-timeago.out
index 7d99bb67f2104..427d12663a38a 100644
--- a/extensions/amp-timeago/0.1/test/validator-amp-timeago.out
+++ b/extensions/amp-timeago/0.1/test/validator-amp-timeago.out
@@ -42,12 +42,12 @@ FAIL
 |      <!-- invalid, datetime is not ISO date format -->
 |      <amp-timeago layout="fixed" width="160" height="20" datetime="2017/04/11">Saturday 11 April 2017 00.37</amp-timeago>
 >>     ^~~~~~~~~
-amp-timeago/0.1/test/validator-amp-timeago.html:42:4 The attribute 'datetime' in tag 'amp-timeago' is set to the invalid value '2017/04/11'. (see https://amp.dev/documentation/components/amp-timeago)
+amp-timeago/0.1/test/validator-amp-timeago.html:42:4 The attribute 'datetime' in tag 'amp-timeago' is set to the invalid value '2017/04/11'. (see https://amp.dev/documentation/components/amp-timeago/)
 |
 |      <!-- invalid, needs datetime -->
 |      <amp-timeago layout="fixed" width="160" height="20">Saturday 11 April 2017 00.37</amp-timeago>
 >>     ^~~~~~~~~
-amp-timeago/0.1/test/validator-amp-timeago.html:45:4 The mandatory attribute 'datetime' is missing in tag 'amp-timeago'. (see https://amp.dev/documentation/components/amp-timeago)
+amp-timeago/0.1/test/validator-amp-timeago.html:45:4 The mandatory attribute 'datetime' is missing in tag 'amp-timeago'. (see https://amp.dev/documentation/components/amp-timeago/)
 |
 |    </body>
 |  </html>
diff --git a/extensions/amp-timeago/1.0/amp-timeago.js b/extensions/amp-timeago/1.0/amp-timeago.js
index bca4ae4a9e4e5..37f726e80fa0f 100644
--- a/extensions/amp-timeago/1.0/amp-timeago.js
+++ b/extensions/amp-timeago/1.0/amp-timeago.js
@@ -14,45 +14,25 @@
  * limitations under the License.
  */
 
-import {PreactBaseElement} from '../../../src/preact/base-element';
-import {Timeago} from './timeago';
-import {dict} from '../../../src/utils/object';
+import {BaseElement} from './base-element';
 import {isExperimentOn} from '../../../src/experiments';
-import {isLayoutSizeDefined} from '../../../src/layout';
 import {userAssert} from '../../../src/log';
 
 /** @const {string} */
 const TAG = 'amp-timeago';
 
-class AmpTimeago extends PreactBaseElement {
-  /** @override */
-  init() {
-    return dict({'cutoffText': this.element.textContent});
-  }
-
+class AmpTimeago extends BaseElement {
   /** @override */
   isLayoutSupported(layout) {
     userAssert(
-      isExperimentOn(this.win, 'amp-timeago-bento'),
-      'expected amp-timeago-bento experiment to be enabled'
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-timeago'),
+      'expected global "bento" or specific "bento-timeago" experiment to be enabled'
     );
-    return isLayoutSizeDefined(layout);
+    return super.isLayoutSupported(layout);
   }
 }
 
-/** @override */
-AmpTimeago['Component'] = Timeago;
-
-/** @override */
-AmpTimeago['passthrough'] = true;
-
-/** @override */
-AmpTimeago['props'] = {
-  'datetime': {attr: 'datetime'},
-  'locale': {attr: 'locale'},
-  'cutoff': {attr: 'cutoff', type: 'number'},
-};
-
 AMP.extension(TAG, '1.0', (AMP) => {
   AMP.registerElement(TAG, AmpTimeago);
 });
diff --git a/extensions/amp-timeago/1.0/base-element.js b/extensions/amp-timeago/1.0/base-element.js
new file mode 100644
index 0000000000000..27ecc4431795d
--- /dev/null
+++ b/extensions/amp-timeago/1.0/base-element.js
@@ -0,0 +1,60 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {Timeago} from './component';
+import {parseDateAttrs as parseDateAttrsBase} from '../../../src/core/dom/parse-date-attributes';
+
+export class BaseElement extends PreactBaseElement {
+  /** @override */
+  updatePropsForRendering(props) {
+    props['placeholder'] = props['children'];
+  }
+}
+
+/** @override */
+BaseElement['Component'] = Timeago;
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['props'] = {
+  'children': {passthroughNonEmpty: true},
+  'cutoff': {attr: 'cutoff', type: 'number'},
+  'datetime': {
+    attrs: ['datetime', 'timestamp-ms', 'timestamp-seconds', 'offset-seconds'],
+    parseAttrs: parseDateAttrs,
+  },
+  'locale': {attr: 'locale'},
+};
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
+
+/**
+ * @param {!Element} element
+ * @return {?number}
+ * @throws {UserError} when attribute values are missing or invalid.
+ * @visibleForTesting
+ */
+export function parseDateAttrs(element) {
+  return parseDateAttrsBase(element, [
+    'datetime',
+    'timestamp-ms',
+    'timestamp-seconds',
+  ]);
+}
diff --git a/extensions/amp-timeago/1.0/component.js b/extensions/amp-timeago/1.0/component.js
new file mode 100644
index 0000000000000..05feb8b152197
--- /dev/null
+++ b/extensions/amp-timeago/1.0/component.js
@@ -0,0 +1,123 @@
+/**
+ * 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {Wrapper} from '../../../src/preact/component';
+import {format, getLocale} from './locales';
+import {getDate} from '../../../src/core/types/date';
+import {toWin} from '../../../src/types';
+import {useEffect, useRef, useState} from '../../../src/preact';
+import {useResourcesNotify} from '../../../src/preact/utils';
+
+/** @const {string} */
+const DEFAULT_LOCALE = 'en_US';
+
+/** @const {!Object<string, *>} */
+const DEFAULT_DATETIME_OPTIONS = {
+  'year': 'numeric',
+  'month': 'short',
+  'day': 'numeric',
+  'hour': 'numeric',
+  'minute': 'numeric',
+};
+
+/** @const {!Object<string, *>} */
+const DEFAULT_TIME_OPTIONS = {'hour': 'numeric', 'minute': 'numeric'};
+
+/**
+ * @param {!TimeagoProps} props
+ * @return {PreactDef.Renderable}
+ */
+export function Timeago({
+  cutoff,
+  datetime,
+  locale: localeProp,
+  placeholder,
+  ...rest
+}) {
+  const [timestamp, setTimestamp] = useState(placeholder || '');
+  const ref = useRef(null);
+
+  const date = getDate(datetime);
+
+  useEffect(() => {
+    const node = ref.current;
+    const win = node && toWin(node.ownerDocument.defaultView);
+    if (!win) {
+      return undefined;
+    }
+    const observer = new win.IntersectionObserver((entries) => {
+      let {lang} = node.ownerDocument.documentElement;
+      if (lang === 'unknown') {
+        lang = win.navigator?.language || DEFAULT_LOCALE;
+      }
+      const locale = getLocale(localeProp || lang);
+      const last = entries[entries.length - 1];
+      if (last.isIntersecting) {
+        setTimestamp(
+          getFuzzyTimestampValue(new Date(date), locale, cutoff, placeholder)
+        );
+      }
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [date, localeProp, cutoff, placeholder]);
+
+  useResourcesNotify();
+
+  return (
+    <Wrapper
+      {...rest}
+      as="time"
+      ref={ref}
+      datetime={new Date(date).toISOString()}
+    >
+      {timestamp}
+    </Wrapper>
+  );
+}
+
+/**
+ * @param {!Date} date
+ * @param {string} locale
+ * @param {number|undefined} cutoff
+ * @param {string|!PreactDef.VNode|null|undefined} placeholder
+ * @return {string|!PreactDef.VNode}
+ */
+function getFuzzyTimestampValue(date, locale, cutoff, placeholder) {
+  if (!cutoff) {
+    return format(date, locale);
+  }
+  const secondsAgo = Math.floor((Date.now() - date.getTime()) / 1000);
+
+  if (secondsAgo > cutoff) {
+    return placeholder ? placeholder : getDefaultPlaceholder(date, locale);
+  }
+  return format(date, locale);
+}
+
+/**
+ * @param {Date} date
+ * @param {string} locale
+ * @return {string}
+ */
+function getDefaultPlaceholder(date, locale) {
+  if (date.toLocaleDateString() == new Date().toLocaleDateString()) {
+    // Same date: time is enough.
+    return date.toLocaleTimeString(locale, DEFAULT_TIME_OPTIONS);
+  }
+  return date.toLocaleString(locale, DEFAULT_DATETIME_OPTIONS);
+}
diff --git a/extensions/amp-timeago/1.0/component.type.js b/extensions/amp-timeago/1.0/component.type.js
new file mode 100644
index 0000000000000..30054a5c91123
--- /dev/null
+++ b/extensions/amp-timeago/1.0/component.type.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/**
+ * @typedef {{
+ *   datetime: (!Date|number|string),
+ *   locale: (string|undefined),
+ *   cutoff: (number|undefined),
+ *   placeholder: (string|!PreactDef.VNode|null|undefined),
+ * }}
+ */
+var TimeagoProps;
diff --git a/extensions/amp-timeago/1.0/locales.js b/extensions/amp-timeago/1.0/locales.js
new file mode 100644
index 0000000000000..6e77c408338db
--- /dev/null
+++ b/extensions/amp-timeago/1.0/locales.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * This file registers all necessary locales supported by amp-timeago.
+ */
+
+import * as timeago from 'timeago.js/dist/timeago.full.min.js';
+import cs from 'timeago.js/esm/lang/cs.js';
+import da from 'timeago.js/esm/lang/da.js';
+import ka from 'timeago.js/esm/lang/ka.js';
+import oc from 'timeago.js/esm/lang/oc.js';
+
+const {format, register} = timeago.default || timeago;
+export {format};
+
+/**
+ * timeago.full.min.js only contains the following 41 locales:
+ * ar, be, bg, bn_IN, ca, de, el, en_short, en_US, es, eu, fa, fi, fr, gl, he,
+ * hi_IN, hu, id_ID, it, ja, ko, ml, my, nb_NO, nl, nn_NO, pl, pt_BR, ro, ru,
+ * sq, sr, sv, ta, th, tr, uk, vi, zh_CN, zh_TW
+ *
+ * Register the rest to create full support for the 46 languages
+ * provided by the timeago.js library.
+ *
+ * TODO(wg-components): These can be removed once all the languages are
+ * exported in timeago.js. See https://github.com/hustcc/timeago.js/issues/238.
+ */
+register('cs', cs);
+register('da', da);
+register('ka', ka);
+register('oc', oc);
+
+/**
+ * timeago.full.min.js registers some locales in a different format than what
+ * is currently supported by amp-timeago. For backwards compatibility, the
+ * following additional locale formats are converted to their registered type.
+ * @param {string} locale
+ * @return {string}
+ */
+export function getLocale(locale) {
+  locale = locale.toLowerCase();
+  if (nonStandardReplacements[locale]) {
+    return nonStandardReplacements[locale];
+  }
+  if (
+    locale.length === 4 /* without '-|_' */ ||
+    locale.length === 5 /* with '-|_' */
+  ) {
+    return `${locale.slice(0, 2)}_${locale.slice(-2).toUpperCase()}`;
+  }
+  return locale;
+}
+
+const nonStandardReplacements = {
+  'en': 'en_US',
+  'enshort': 'en_short',
+  'en-short': 'en_short',
+  'inbg': 'bn_IN',
+  'inid': 'id_ID',
+  'inhi': 'hi_IN',
+};
diff --git a/extensions/amp-timeago/1.0/package.json b/extensions/amp-timeago/1.0/package.json
new file mode 100644
index 0000000000000..216a1c6252f70
--- /dev/null
+++ b/extensions/amp-timeago/1.0/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-timeago",
+  "version": "VERSION",
+  "description": "AMP Time Ago Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "./dist/component.js",
+  "module": "./dist/component-preact.module.js",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "./dist/component-preact.module.js",
+      "require": "./dist/component-preact.js"
+    },
+    "./react": {
+      "import": "./dist/component-react.module.js",
+      "require": "./dist/component-react.js"
+    }
+  },
+  "files": ["dist/*", "react.js"],
+  "repository": {
+      "type": "git",
+      "url": "https://github.com/ampproject/amphtml.git",
+      "directory": "extensions/amp-timeago/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-timeago/1.0",
+  "peerDependencies": {
+      "preact": "^10.2.1",
+      "react": "^17.0.0"
+  }
+}
diff --git a/extensions/amp-timeago/1.0/react.js b/extensions/amp-timeago/1.0/react.js
new file mode 100644
index 0000000000000..0b2957c35c38d
--- /dev/null
+++ b/extensions/amp-timeago/1.0/react.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-env node */
+// eslint-disable-next-line local/no-module-exports
+module.exports = require('./dist/component-react');
diff --git a/extensions/amp-timeago/1.0/storybook/Basic.amp.js b/extensions/amp-timeago/1.0/storybook/Basic.amp.js
index ead98a182bde8..150ad61b30240 100644
--- a/extensions/amp-timeago/1.0/storybook/Basic.amp.js
+++ b/extensions/amp-timeago/1.0/storybook/Basic.amp.js
@@ -15,28 +15,35 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {date, withKnobs} from '@storybook/addon-knobs';
-import {storiesOf} from '@storybook/preact';
-import {withA11y} from '@storybook/addon-a11y';
-import withAmp from '../../../../build-system/tasks/storybook/amp-env/decorator.js';
+import {date, number, text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
 
-// eslint-disable-next-line
-storiesOf('amp-timeago', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withA11y)
-  .addDecorator(withAmp)
-  .addParameters({extensions: [{name: 'amp-timeago', version: '1.0'}]})
-  .add('responsive', () => {
-    const datetime = date('Date/Time', new Date());
-    return (
-      <amp-timeago
-        layout="responsive"
-        width="100"
-        height="100"
-        datetime={datetime}
-        locale="en"
-      >
-        Saturday 11 April 2018 00.37
-      </amp-timeago>
-    );
-  });
+export default {
+  title: 'amp-timeago-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-timeago', version: '1.0'}],
+    experiments: ['bento'],
+  },
+};
+
+export const Responsive = () => {
+  const datetime = date('Date/Time', new Date());
+  const cutoff = number('Cutoff (seconds)', 0);
+  const placeholder = text('Cutoff placeholder', 'Time passed!');
+  return (
+    <amp-timeago
+      layout="responsive"
+      width="100"
+      height="40"
+      datetime={new Date(datetime).toISOString()}
+      cutoff={cutoff}
+      locale="en"
+    >
+      {placeholder}
+    </amp-timeago>
+  );
+};
+
+Responsive.storyName = 'responsive';
diff --git a/extensions/amp-timeago/1.0/storybook/Basic.js b/extensions/amp-timeago/1.0/storybook/Basic.js
index c7c329961a1f0..1076719d681ff 100644
--- a/extensions/amp-timeago/1.0/storybook/Basic.js
+++ b/extensions/amp-timeago/1.0/storybook/Basic.js
@@ -15,26 +15,42 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {Timeago} from '../timeago';
-import {date, number, text, withKnobs} from '@storybook/addon-knobs';
-import {withA11y} from '@storybook/addon-a11y';
+import {Timeago} from '../component';
+import {date, number, select, text, withKnobs} from '@storybook/addon-knobs';
 
 export default {
   title: 'Timeago',
   component: Timeago,
-  decorators: [withA11y, withKnobs],
+  decorators: [withKnobs],
 };
 
+const LOCALES = [
+  'en-US',
+  'en-GB',
+  'fr',
+  'ru',
+  'ar',
+  'he',
+  'ja',
+  'ZhTw',
+  'zH-Tw',
+];
+
 export const _default = () => {
   const dateTime = date('Date/time', new Date());
   const cutoff = number('Cutoff (seconds)', 0);
-  const cutoffText = text('Cutoff text', 'Time passed!');
+  const placeholder = text('Cutoff placeholder', 'Time passed!');
+  const userLocale = navigator.language || 'en-US';
+  const allLocales = [userLocale].concat(
+    LOCALES.filter((locale) => locale != userLocale)
+  );
+  const locale = select('Locale', allLocales, userLocale);
   return (
     <Timeago
-      datetime={new Date(dateTime).toISOString()}
-      locale="en"
+      datetime={dateTime}
+      locale={locale}
       cutoff={cutoff}
-      cutoffText={cutoffText}
+      placeholder={placeholder}
     />
   );
 };
diff --git a/extensions/amp-timeago/1.0/test/test-amp-timeago.js b/extensions/amp-timeago/1.0/test/test-amp-timeago.js
index 40cb9f45293e1..c0477b2acc73b 100644
--- a/extensions/amp-timeago/1.0/test/test-amp-timeago.js
+++ b/extensions/amp-timeago/1.0/test/test-amp-timeago.js
@@ -15,14 +15,12 @@
  */
 import '../amp-timeago';
 import {toggleExperiment} from '../../../../src/experiments';
-import {waitForChildPromise} from '../../../../src/dom';
-import {whenCalled} from '../../../../testing/test-helper.js';
+import {waitFor} from '../../../../testing/test-helper.js';
 
 describes.realWin(
-  'amp-timeago',
+  'amp-timeago 1.0',
   {
     amp: {
-      runtimeOn: true,
       extensions: ['amp-timeago:1.0'],
     },
   },
@@ -31,28 +29,36 @@ describes.realWin(
     let element;
 
     const getTimeFromShadow = async () => {
-      await whenCalled(env.sandbox.spy(element, 'attachShadow'));
-      const shadow = element.shadowRoot;
-      await waitForChildPromise(shadow, (shadow) => {
-        return shadow.querySelector('time');
-      });
-      const time = shadow.querySelector('time');
-      if (time.textContent) {
-        return time.textContent;
-      }
-      await new Promise((resolve) => {
-        const mo = new MutationObserver(() => {
-          mo.disconnect();
-          resolve();
-        });
-        mo.observe(time, {characterData: true, subtree: true});
-      });
-      return time.textContent;
+      await element.buildInternal();
+      const getTimeContent = () =>
+        element.shadowRoot &&
+        element.shadowRoot.querySelector('time') &&
+        element.shadowRoot.querySelector('time').textContent;
+      await waitFor(getTimeContent, 'Timeago rendered');
+      return getTimeContent();
+    };
+
+    const getTimeFromSlot = async () => {
+      await element.buildInternal();
+      const getTimeContent = () => {
+        const slot =
+          element.shadowRoot && element.shadowRoot.querySelector('slot');
+        if (!slot) {
+          return null;
+        }
+        return slot
+          .assignedNodes()
+          .map((n) => n.textContent)
+          .join('')
+          .trim();
+      };
+      await waitFor(getTimeContent, 'Timeago rendered as slot');
+      return getTimeContent();
     };
 
     beforeEach(() => {
       win = env.win;
-      toggleExperiment(win, 'amp-timeago-bento', true);
+      toggleExperiment(win, 'bento-timeago', true);
 
       element = win.document.createElement('amp-timeago');
       element.setAttribute('layout', 'fixed');
@@ -61,10 +67,10 @@ describes.realWin(
     });
 
     afterEach(() => {
-      toggleExperiment(win, 'amp-timeago-bento', false);
+      toggleExperiment(win, 'bento-timeago', false);
     });
 
-    it('should renders display 2 days ago when built', async () => {
+    it('should render display 2 days ago when built', async () => {
       const date = new Date();
       date.setDate(date.getDate() - 2);
       element.setAttribute('datetime', date.toISOString());
@@ -74,13 +80,23 @@ describes.realWin(
       expect(time).to.equal('2 days ago');
     });
 
+    it('should render display 2 days ago using "timestamp-ms"', async () => {
+      const date = new Date();
+      date.setDate(date.getDate() - 2);
+      element.setAttribute('timestamp-ms', date.getTime());
+      element.textContent = date.toString();
+      win.document.body.appendChild(element);
+      const time = await getTimeFromShadow();
+      expect(time).to.equal('2 days ago');
+    });
+
     it('should display original date when older than cutoff', async () => {
       const date = new Date('2017-01-01');
       element.setAttribute('datetime', date.toISOString());
       element.textContent = 'Sunday 1 January 2017';
       element.setAttribute('cutoff', '8640000');
       win.document.body.appendChild(element);
-      const time = await getTimeFromShadow();
+      const time = await getTimeFromSlot();
       expect(time).to.equal('Sunday 1 January 2017');
     });
 
diff --git a/extensions/amp-timeago/1.0/test/test-component.js b/extensions/amp-timeago/1.0/test/test-component.js
new file mode 100644
index 0000000000000..4e8626301ee4b
--- /dev/null
+++ b/extensions/amp-timeago/1.0/test/test-component.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Timeago} from '../component';
+import {mount} from 'enzyme';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin('Timeago 1.0 preact component', {}, (env) => {
+  function getTime(wrapper) {
+    const time = wrapper.find('time');
+    expect(time).to.have.lengthOf(1);
+    return time.text();
+  }
+
+  it('should render display 2 days ago when built', async () => {
+    const date = new Date();
+    date.setDate(date.getDate() - 2);
+    const props = {
+      datetime: date.toISOString(),
+      displayIn: 'UTC',
+    };
+    const wrapper = mount(<Timeago {...props} />, {
+      attachTo: env.win.document.body,
+    });
+    expect(getTime(wrapper)).to.equal('');
+    await waitFor(() => getTime(wrapper) !== '', 'update time');
+    expect(getTime(wrapper)).to.equal('2 days ago');
+  });
+
+  it('should render display 2 days ago using "timestamp-ms"', async () => {
+    const date = new Date();
+    date.setDate(date.getDate() - 2);
+    const placeholder = date.toString();
+    const props = {
+      datetime: date.getTime(),
+      placeholder,
+    };
+    const wrapper = mount(<Timeago {...props} />, {
+      attachTo: env.win.document.body,
+    });
+    expect(getTime(wrapper)).to.equal(placeholder);
+    await waitFor(() => getTime(wrapper) !== placeholder, 'update time');
+    expect(getTime(wrapper)).to.equal('2 days ago');
+  });
+
+  it('should display original date when older than cutoff', async () => {
+    const date = new Date('2017-01-01');
+    const placeholder = 'Sunday 1 January 2017';
+    const props = {
+      cutoff: 8640000,
+      datetime: date.toISOString(),
+      placeholder,
+    };
+    const wrapper = mount(<Timeago {...props} />, {
+      attachTo: env.win.document.body,
+    });
+    expect(getTime(wrapper)).to.equal(placeholder);
+
+    // Placeholder text does not get replaced.
+    expectAsyncConsoleError('Timeout waiting for update time', 1);
+    await expect(
+      waitFor(() => getTime(wrapper) !== placeholder, 'update time')
+    ).to.be.rejectedWith('Timeout waiting for update time');
+  });
+
+  it('should update after mutation of datetime attribute', async () => {
+    const date = new Date();
+    date.setDate(date.getDate() - 2);
+    const placeholder = date.toString();
+    const props = {
+      datetime: date.toISOString(),
+      placeholder,
+    };
+    const wrapper = mount(<Timeago {...props} />, {
+      attachTo: env.win.document.body,
+    });
+    expect(getTime(wrapper)).to.equal(placeholder);
+    await waitFor(() => getTime(wrapper) !== placeholder, 'update time');
+    expect(getTime(wrapper)).to.equal('2 days ago');
+
+    date.setDate(date.getDate() + 1);
+    wrapper.setProps({datetime: date.toISOString()});
+    expect(getTime(wrapper)).to.equal('2 days ago');
+    await waitFor(() => getTime(wrapper) !== '2 days ago', 'update time');
+    expect(getTime(wrapper)).to.equal('1 day ago');
+  });
+});
diff --git a/extensions/amp-timeago/1.0/test/validator-amp-timeago-mutation-error.html b/extensions/amp-timeago/1.0/test/validator-amp-timeago-mutation-error.html
new file mode 100644
index 0000000000000..f9701cd968f5e
--- /dev/null
+++ b/extensions/amp-timeago/1.0/test/validator-amp-timeago-mutation-error.html
@@ -0,0 +1,46 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-timeago tag.
+-->
+<!DOCTYPE html>
+<html amp lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="canonical" href="./regular-html-version.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1">
+    <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>
+    <script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-1.0.js"></script>
+    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+  <body>
+    <amp-state id="myState">
+      <script type="application/json">
+        {
+          "datetime": "2018-04-11T00:37:33.809Z",
+          "title": "Saturday 11 April 2018 00.37",
+          "layout": "fixed"
+        }
+      </script>
+    </amp-state>
+
+    <!-- invalid, layout cannot be mutated with amp-bind -->
+    <amp-timeago layout="fixed" width="160" height="20" datetime="2018-04-11T00:37:33.809Z" locale="en" cutoff="8640000" [datetime]="myState.datetime" [title]="myState.title" [layout]="myState.layout">Saturday 11 April 2018 00.37</amp-timeago>
+
+  </body>
+</html>
diff --git a/extensions/amp-timeago/1.0/test/validator-amp-timeago-mutation-error.out b/extensions/amp-timeago/1.0/test/validator-amp-timeago-mutation-error.out
new file mode 100644
index 0000000000000..575b83e71a6d2
--- /dev/null
+++ b/extensions/amp-timeago/1.0/test/validator-amp-timeago-mutation-error.out
@@ -0,0 +1,49 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-timeago tag.
+|  -->
+|  <!DOCTYPE html>
+|  <html amp lang="en">
+|    <head>
+|      <meta charset="utf-8">
+|      <link rel="canonical" href="./regular-html-version.html">
+|      <meta name="viewport" content="width=device-width,minimum-scale=1">
+|      <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>
+|      <script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-1.0.js"></script>
+|      <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+|      <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    </head>
+|    <body>
+|      <amp-state id="myState">
+|        <script type="application/json">
+|          {
+|            "datetime": "2018-04-11T00:37:33.809Z",
+|            "title": "Saturday 11 April 2018 00.37",
+|            "layout": "fixed"
+|          }
+|        </script>
+|      </amp-state>
+|
+|      <!-- invalid, layout cannot be mutated with amp-bind -->
+|      <amp-timeago layout="fixed" width="160" height="20" datetime="2018-04-11T00:37:33.809Z" locale="en" cutoff="8640000" [datetime]="myState.datetime" [title]="myState.title" [layout]="myState.layout">Saturday 11 April 2018 00.37</amp-timeago>
+>>     ^~~~~~~~~
+amp-timeago/1.0/test/validator-amp-timeago-mutation-error.html:43:4 The attribute '[layout]' may not appear in tag 'amp-timeago'. (see https://amp.dev/documentation/components/amp-timeago/)
+|
+|    </body>
+|  </html>
diff --git a/extensions/amp-timeago/1.0/test/validator-amp-timeago-mutation.html b/extensions/amp-timeago/1.0/test/validator-amp-timeago-mutation.html
new file mode 100644
index 0000000000000..d8bef6521bf01
--- /dev/null
+++ b/extensions/amp-timeago/1.0/test/validator-amp-timeago-mutation.html
@@ -0,0 +1,45 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-timeago tag.
+-->
+<!DOCTYPE html>
+<html amp lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="canonical" href="./regular-html-version.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1">
+    <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>
+    <script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-1.0.js"></script>
+    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+  <body>
+    <amp-state id="myState">
+      <script type="application/json">
+        {
+          "datetime": "2018-04-11T00:37:33.809Z",
+          "title": "Saturday 11 April 2018 00.37"
+        }
+      </script>
+    </amp-state>
+
+    <!-- valid, datetime and title can be mutated with amp-bind -->
+    <amp-timeago layout="fixed" width="160" height="20" datetime="2018-04-11T00:37:33.809Z" locale="en" cutoff="8640000" [datetime]="myState.datetime" [title]="myState.title">Saturday 11 April 2018 00.37</amp-timeago>
+
+  </body>
+</html>
diff --git a/extensions/amp-timeago/1.0/test/validator-amp-timeago-mutation.out b/extensions/amp-timeago/1.0/test/validator-amp-timeago-mutation.out
new file mode 100644
index 0000000000000..89c6482b9069e
--- /dev/null
+++ b/extensions/amp-timeago/1.0/test/validator-amp-timeago-mutation.out
@@ -0,0 +1,46 @@
+PASS
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-timeago tag.
+|  -->
+|  <!DOCTYPE html>
+|  <html amp lang="en">
+|    <head>
+|      <meta charset="utf-8">
+|      <link rel="canonical" href="./regular-html-version.html">
+|      <meta name="viewport" content="width=device-width,minimum-scale=1">
+|      <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>
+|      <script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-1.0.js"></script>
+|      <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+|      <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    </head>
+|    <body>
+|      <amp-state id="myState">
+|        <script type="application/json">
+|          {
+|            "datetime": "2018-04-11T00:37:33.809Z",
+|            "title": "Saturday 11 April 2018 00.37"
+|          }
+|        </script>
+|      </amp-state>
+|
+|      <!-- valid, datetime and title can be mutated with amp-bind -->
+|      <amp-timeago layout="fixed" width="160" height="20" datetime="2018-04-11T00:37:33.809Z" locale="en" cutoff="8640000" [datetime]="myState.datetime" [title]="myState.title">Saturday 11 April 2018 00.37</amp-timeago>
+|
+|    </body>
+|  </html>
diff --git a/extensions/amp-timeago/1.0/test/validator-amp-timeago.html b/extensions/amp-timeago/1.0/test/validator-amp-timeago.html
new file mode 100644
index 0000000000000..29dc65ed685ee
--- /dev/null
+++ b/extensions/amp-timeago/1.0/test/validator-amp-timeago.html
@@ -0,0 +1,48 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-timeago tag.
+-->
+<!DOCTYPE html>
+<html amp lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="canonical" href="./regular-html-version.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1">
+    <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>
+    <script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-1.0.js"></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+  <body>
+
+    <!-- valid -->
+    <amp-timeago layout="fixed" width="160" height="20" datetime="2017-04-11T00:37:33.809Z" locale="en" cutoff="8640000">Saturday 11 April 2017 00.37</amp-timeago>
+
+    <!-- valid, international locale -->
+    <amp-timeago layout="fixed" width="160" height="20" datetime="2017-08-11T18:58:58.000Z" locale="fr" cutoff="8640000">Lundi 14 août 2017</amp-timeago>
+
+    <!-- valid, locale optional, cutoff optional -->
+    <amp-timeago layout="fixed" width="160" height="20" datetime="2017-04-11T00:37:33.809Z">Saturday 11 April 2017 00.37</amp-timeago>
+
+    <!-- invalid, datetime is not ISO date format -->
+    <amp-timeago layout="fixed" width="160" height="20" datetime="2017/04/11">Saturday 11 April 2017 00.37</amp-timeago>
+
+    <!-- invalid, needs datetime -->
+    <amp-timeago layout="fixed" width="160" height="20">Saturday 11 April 2017 00.37</amp-timeago>
+
+  </body>
+</html>
diff --git a/extensions/amp-timeago/1.0/test/validator-amp-timeago.out b/extensions/amp-timeago/1.0/test/validator-amp-timeago.out
new file mode 100644
index 0000000000000..151278e7e496f
--- /dev/null
+++ b/extensions/amp-timeago/1.0/test/validator-amp-timeago.out
@@ -0,0 +1,53 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-timeago tag.
+|  -->
+|  <!DOCTYPE html>
+|  <html amp lang="en">
+|    <head>
+|      <meta charset="utf-8">
+|      <link rel="canonical" href="./regular-html-version.html">
+|      <meta name="viewport" content="width=device-width,minimum-scale=1">
+|      <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>
+|      <script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-1.0.js"></script>
+|      <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    </head>
+|    <body>
+|
+|      <!-- valid -->
+|      <amp-timeago layout="fixed" width="160" height="20" datetime="2017-04-11T00:37:33.809Z" locale="en" cutoff="8640000">Saturday 11 April 2017 00.37</amp-timeago>
+|
+|      <!-- valid, international locale -->
+|      <amp-timeago layout="fixed" width="160" height="20" datetime="2017-08-11T18:58:58.000Z" locale="fr" cutoff="8640000">Lundi 14 août 2017</amp-timeago>
+|
+|      <!-- valid, locale optional, cutoff optional -->
+|      <amp-timeago layout="fixed" width="160" height="20" datetime="2017-04-11T00:37:33.809Z">Saturday 11 April 2017 00.37</amp-timeago>
+|
+|      <!-- invalid, datetime is not ISO date format -->
+|      <amp-timeago layout="fixed" width="160" height="20" datetime="2017/04/11">Saturday 11 April 2017 00.37</amp-timeago>
+>>     ^~~~~~~~~
+amp-timeago/1.0/test/validator-amp-timeago.html:42:4 The attribute 'datetime' in tag 'amp-timeago' is set to the invalid value '2017/04/11'. (see https://amp.dev/documentation/components/amp-timeago/)
+|
+|      <!-- invalid, needs datetime -->
+|      <amp-timeago layout="fixed" width="160" height="20">Saturday 11 April 2017 00.37</amp-timeago>
+>>     ^~~~~~~~~
+amp-timeago/1.0/test/validator-amp-timeago.html:45:4 The mandatory attribute 'datetime' is missing in tag 'amp-timeago'. (see https://amp.dev/documentation/components/amp-timeago/)
+|
+|    </body>
+|  </html>
diff --git a/extensions/amp-timeago/1.0/timeago.js b/extensions/amp-timeago/1.0/timeago.js
deleted file mode 100644
index b474d9b15cca3..0000000000000
--- a/extensions/amp-timeago/1.0/timeago.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * 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.
- */
-
-import {createElement, useEffect, useRef, useState} from '../../../src/preact';
-import {timeago} from '../../../third_party/timeagojs/timeago';
-import {useResourcesNotify} from '../../../src/preact/utils';
-
-/**
- * @param {!JsonObject} props
- * @return {PreactDef.Renderable}
- */
-export function Timeago(props) {
-  const {
-    'datetime': datetime,
-    'locale': locale,
-    'cutoff': cutoff,
-    'cutoffText': cutoffText,
-  } = props;
-  const [timestamp, setTimestamp] = useState('');
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const node = ref.current;
-    const observer = new IntersectionObserver((entries) => {
-      const last = entries[entries.length - 1];
-      if (last.isIntersecting) {
-        setTimestamp(
-          getFuzzyTimestampValue(datetime, locale, cutoffText, cutoff)
-        );
-      }
-    });
-    if (node) {
-      observer.observe(node);
-    }
-    return () => observer.disconnect();
-  }, [datetime, locale, cutoff, cutoffText]);
-
-  useResourcesNotify();
-  return createElement('time', {datetime, ref}, timestamp);
-}
-
-/**
- * @param {string} datetime
- * @param {string} locale
- * @param {string} cutoffText
- * @param {number=} opt_cutoff
- * @return {string}
- */
-function getFuzzyTimestampValue(datetime, locale, cutoffText, opt_cutoff) {
-  if (!opt_cutoff) {
-    return timeago(datetime, locale);
-  }
-  const elDate = new Date(datetime);
-  const secondsAgo = Math.floor((Date.now() - elDate.getTime()) / 1000);
-
-  if (secondsAgo > opt_cutoff) {
-    return cutoffText;
-  }
-  return timeago(datetime, locale);
-}
diff --git a/extensions/amp-timeago/OWNERS b/extensions/amp-timeago/OWNERS
index 3aebc485fec1d..10c9cdc861e5b 100644
--- a/extensions/amp-timeago/OWNERS
+++ b/extensions/amp-timeago/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-timeago/amp-timeago.md b/extensions/amp-timeago/amp-timeago.md
index 65f9260a5fc94..f4e5b328ac689 100644
--- a/extensions/amp-timeago/amp-timeago.md
+++ b/extensions/amp-timeago/amp-timeago.md
@@ -2,13 +2,14 @@
 $category@: presentation
 formats:
   - websites
-  - email
 teaser:
   text: Provides fuzzy timestamps by formatting dates as time ago (for example, 3 hours ago).
+experimental: true
+bento: true
 ---
 
 <!--
-Copyright 2017 The AMP HTML Authors. All Rights Reserved.
+Copyright 2021 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.
@@ -27,13 +28,13 @@ limitations under the License.
 
 ## Usage
 
-Use the amp-timago component to count up to, or away from, a specified date and time.
+Use the `amp-timeago` component to count up to, or away from, a specified date and time.
 
 The component replaces the text node with a fuzzy timestamp, such as `in 30 years` or `3 hours ago`.
 
 Example:
 
-[example preview="inline" playground="true" imports="amp-timeago"]
+[example preview="inline" playground="true" imports="amp-timeago:1.0"]
 
 ```html
 <amp-timeago
@@ -51,56 +52,128 @@ Example:
 
 The `amp-timeago` component requires a placeholder in the text node. The calculated timestamp replaces the placeholder once ready. Use the placeholder as a fallback to display to users if `amp-timeago` is unable to process the fuzzy timestamp.
 
+### Standalone use outside valid AMP documents
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+#### Example
+
+The example below demonstrates `amp-timeago` component in standalone use.
+
+[example preview="top-frame" playground="false"]
+
+```html
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-timeago-1.0.css">
+  <script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-1.0.js"></script>
+  <style>
+    amp-timeago {
+      height: 20px;
+    }
+  </style>
+</head>
+<amp-timeago id="my-timeago" datetime="2017-04-11T00:37:33.809Z" locale="en">
+  Saturday 11 April 2017 00.37
+</amp-timeago>
+<div class="buttons" style="margin-top: 8px;">
+  <button id='ar-button'>Change locale to Arabic</button>
+  <button id='en-button'>Change locale to English</button>
+  <button id='now-button'>Change time to now</button>
+</div>
+
+<script>
+  (async () => {
+    const timeago = document.querySelector('#my-timeago');
+    await customElements.whenDefined('amp-timeago');
+
+    // set up button actions
+    document.querySelector('#ar-button').onclick = () => timeago.setAttribute('locale', 'ar');
+    document.querySelector('#en-button').onclick = () => timeago.setAttribute('locale', 'en');
+    document.querySelector('#now-button').onclick = () => timeago.setAttribute('datetime', 'now');
+  })();
+</script>
+```
+
+[/example]
+
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-timeago-1.0.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
+
+**Container type**
+
+The `amp-timeago` component has a defined layout size type. To ensure the component renders correctly, apply the following styles:
+
+```css
+amp-timeago {
+  height: 20px;
+}
+```
+
 ## Attributes
 
 ### `datetime`
 
 The required `datetime` attribute sets the date and time. The value must be an [ISO datetime](https://www.w3.org/QA/Tips/iso-date).
 
-- Express time in UTC (Coordinated Universal Time): `2017-03-10T01:00:00Z`
-- Express in local time with a time zone offset: `2017-03-09T20:00:00-05:00`
+-   Express time in UTC (Coordinated Universal Time): `2017-03-10T01:00:00Z`
+-   Express in local time with a time zone offset: `2017-03-09T20:00:00-05:00`
 
 ### `locale` (optional)
 
 The local default is `en`. Add the `locale` attribute and specify one of the following values to chance the local.
 
-- `ar` (Arabic)
-- `be` (Belarusian)
-- `bg` (Bulgarian)
-- `ca` (Catalan)
-- `da` (Danish)
-- `de` (German)
-- `el` (Greek)
-- `en` (English)
-- `enShort` (English - short)
-- `es` (Spanish)
-- `eu` (Basque)
-- `fi` (Finnish)
-- `fr` (French)
-- `he` (Hebrew)
-- `hu` (Hungarian)
-- `inBG` (Bangla)
-- `inHI` (Hindi)
-- `inID` (Malay)
-- `it` (Italian)
-- `ja` (Japanese)
-- `ko` (Korean)
-- `ml` (Malayalam)
-- `nbNO` (Norwegian Bokmål)
-- `nl` (Dutch)
-- `nnNO` (Norwegian Nynorsk)
-- `pl` (Polish)
-- `ptBR` (Portuguese)
-- `ro` (Romanian)
-- `ru` (Russian)
-- `sv` (Swedish)
-- `ta` (Tamil)
-- `th` (Thai)
-- `tr` (Turkish)
-- `uk` (Ukrainian)
-- `vi` (Vietnamese)
-- `zhCN` (Chinese)
-- `zhTW` (Taiwanese)
+-   `ar` (Arabic)
+-   `be` (Belarusian)
+-   `bg` (Bulgarian)
+-   `bn-IN` (Bangla)
+-   `ca` (Catalan)
+-   `cs` (Czech)
+-   `da` (Danish)
+-   `de` (German)
+-   `el` (Greek)
+-   `en` (English)
+-   `en-short` (English - short)
+-   `es` (Spanish)
+-   `eu` (Basque)
+-   `fa` (Persian - Farsi)
+-   `fi` (Finnish)
+-   `fr` (French)
+-   `gl` (Galician)
+-   `he` (Hebrew)
+-   `hi-IN` (Hindi)
+-   `hu` (Hungarian)
+-   `id-ID` (Malay)
+-   `it` (Italian)
+-   `ja` (Japanese)
+-   `ka` (Georgian)
+-   `ko` (Korean)
+-   `ml` (Malayalam)
+-   `my` (Burmese - Myanmar)
+-   `nb-NO` (Norwegian Bokmål)
+-   `nl` (Dutch)
+-   `nn-NO` (Norwegian Nynorsk)
+-   `pl` (Polish)
+-   `pt-BR` (Portuguese)
+-   `ro` (Romanian)
+-   `ru` (Russian)
+-   `sq` (Albanian)
+-   `sr` (Serbian)
+-   `sv` (Swedish)
+-   `ta` (Tamil)
+-   `th` (Thai)
+-   `tr` (Turkish)
+-   `uk` (Ukrainian)
+-   `vi` (Vietnamese)
+-   `zh-CN` (Chinese)
+-   `zh-TW` (Taiwanese)
 
 ### `cutoff`
 
@@ -109,7 +182,3 @@ Add the `cutoff` attribute to display the date specified in the `datatime` attri
 ### Common attributes
 
 The AMP provided set of [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) is available to `<amp-timeago>`.
-
-## Validation
-
-See [amp-timeago rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-timeago/validator-amp-timeago.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-timeago/validator-amp-timeago.protoascii b/extensions/amp-timeago/validator-amp-timeago.protoascii
index f80feff41d4ef..72138157c3989 100644
--- a/extensions/amp-timeago/validator-amp-timeago.protoascii
+++ b/extensions/amp-timeago/validator-amp-timeago.protoascii
@@ -16,11 +16,11 @@
 
 tags: {  # amp-timeago
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-timeago"
     version: "0.1"
+    version: "1.0"
     version: "latest"
   }
   attr_lists: "common-extension-attrs"
@@ -39,7 +39,6 @@ tags: {  # amp-timeago
 tags: {  # <amp-timeago>
   html_format: AMP
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "AMP-TIMEAGO"
   requires_extension: "amp-timeago"
   attrs: {
@@ -58,7 +57,7 @@ tags: {  # <amp-timeago>
   attrs: { name: "[datetime]" }
   attrs: { name: "[title]" }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-timeago"
+  spec_url: "https://amp.dev/documentation/components/amp-timeago/"
   amp_layout: {
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
diff --git a/extensions/amp-truncate-text/0.1/amp-truncate-text.css b/extensions/amp-truncate-text/0.1/amp-truncate-text.css
index ccdf836139151..5fadb5558afc9 100644
--- a/extensions/amp-truncate-text/0.1/amp-truncate-text.css
+++ b/extensions/amp-truncate-text/0.1/amp-truncate-text.css
@@ -42,7 +42,7 @@ amp-truncate-text:not([i-amphtml-truncate-expanded]) .i-amphtml-truncate-expande
   right: 0 !important;
 }
 
-.i-amphtml-truncate-content [slot="expand"] {
+.i-amphtml-truncate-content [slot="expanded"] {
   margin: 0 !important;
   white-space: nowrap !important;
 }
diff --git a/extensions/amp-truncate-text/0.1/amp-truncate-text.js b/extensions/amp-truncate-text/0.1/amp-truncate-text.js
index 780ccb1318c76..1f43509170e3d 100644
--- a/extensions/amp-truncate-text/0.1/amp-truncate-text.js
+++ b/extensions/amp-truncate-text/0.1/amp-truncate-text.js
@@ -25,7 +25,7 @@ import {createShadowRoot} from './shadow-utils';
 import {dev} from '../../../src/log';
 import {htmlFor} from '../../../src/static-template';
 import {isExperimentOn} from '../../../src/experiments';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
 import {truncateText} from './truncate-text';
 
 /**
@@ -81,6 +81,13 @@ export class AmpTruncateText extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
+    this.mutationObserver_.observe(this.element, {
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true,
+    });
+
     this.useShadow_ =
       !!this.element.attachShadow &&
       isExperimentOn(this.win, 'amp-truncate-text-shadow');
@@ -179,16 +186,6 @@ export class AmpTruncateText extends AMP.BaseElement {
     });
   }
 
-  /** @override */
-  firstAttachedCallback() {
-    this.mutationObserver_.observe(this.element, {
-      attributes: true,
-      characterData: true,
-      childList: true,
-      subtree: true,
-    });
-  }
-
   /** @override */
   isRelayoutNeeded() {
     return true;
diff --git a/extensions/amp-truncate-text/0.1/test/test-amp-truncate-text.js b/extensions/amp-truncate-text/0.1/test/test-amp-truncate-text.js
index 3df310e1eca0f..1e3edffdb9852 100644
--- a/extensions/amp-truncate-text/0.1/test/test-amp-truncate-text.js
+++ b/extensions/amp-truncate-text/0.1/test/test-amp-truncate-text.js
@@ -16,7 +16,7 @@
 
 import '../amp-truncate-text';
 import {setStyles} from '../../../../src/style';
-import {toArray} from '../../../../src/types';
+import {toArray} from '../../../../src/core/types/array';
 import {toggleExperiment} from '../../../../src/experiments';
 
 // Lint complains about a template string due to lines being too long.
@@ -83,7 +83,7 @@ describes.realWin(
         });
         element.innerHTML = content;
         container.appendChild(element);
-        await element.build();
+        await element.buildInternal();
         await element.layoutCallback();
         await afterMutationAndClamp();
 
@@ -272,10 +272,11 @@ describes.realWin(
             width: 10,
             height: 13,
           });
+          const impl = await element.getImpl(false);
           const childNodes = getChildNodes(element);
 
           childNodes[0].data = 'Good night and good luck';
-          await element.implementation_.mutateElement(() => {});
+          await impl.mutateElement(() => {});
 
           expect(element.scrollHeight).to.equal(13);
           expect(getTextContent(element)).to.match(/^Good/);
diff --git a/extensions/amp-truncate-text/0.1/test/test-binary-search.js b/extensions/amp-truncate-text/0.1/test/test-binary-search.js
index 7fab0b09b6270..4d7f9498696fb 100644
--- a/extensions/amp-truncate-text/0.1/test/test-binary-search.js
+++ b/extensions/amp-truncate-text/0.1/test/test-binary-search.js
@@ -20,9 +20,9 @@ import {
  * limitations under the License.
  */
 
-describe('binarySearch', () => {
+describes.sandboxed('binarySearch', {}, () => {
   const {NEXT, PREV} = BinarySearchPreference;
-  const {RIGHT, LEFT} = BinarySearchStop;
+  const {LEFT, RIGHT} = BinarySearchStop;
 
   /**
    * @param {!Array<number>} arr
diff --git a/extensions/amp-truncate-text/0.1/test/validator-amp-truncate-text.out b/extensions/amp-truncate-text/0.1/test/validator-amp-truncate-text.out
index e3ec51f73f81e..14459b9b43ec9 100644
--- a/extensions/amp-truncate-text/0.1/test/validator-amp-truncate-text.out
+++ b/extensions/amp-truncate-text/0.1/test/validator-amp-truncate-text.out
@@ -43,9 +43,9 @@ FAIL
 |    <!-- Invalid overflow-style -->
 |    <amp-truncate-text layout="fixed" width="150" height="80" overflow-style="left">
 >>   ^~~~~~~~~
-amp-truncate-text/0.1/test/validator-amp-truncate-text.html:43:2 The attribute 'overflow-style' in tag 'amp-truncate-text' is set to the invalid value 'left'. (see https://amp.dev/documentation/components/amp-truncate-text)
+amp-truncate-text/0.1/test/validator-amp-truncate-text.html:43:2 The attribute 'overflow-style' in tag 'amp-truncate-text' is set to the invalid value 'left'. (see https://amp.dev/documentation/components/amp-truncate-text/)
 |      Hello world
 |      <div slot="collapsed">Expand</div>
 |    </amp-truncate-text>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-truncate-text/0.1/truncate-text.js b/extensions/amp-truncate-text/0.1/truncate-text.js
index 257aa284423f6..34a9033c00876 100644
--- a/extensions/amp-truncate-text/0.1/truncate-text.js
+++ b/extensions/amp-truncate-text/0.1/truncate-text.js
@@ -19,7 +19,7 @@ import {
   BinarySearchStop,
   binarySearch,
 } from './binary-search';
-import {trimEnd} from '../../../src/string';
+import {trimEnd} from '../../../src/core/types/string';
 
 /** The class to add to the container when it has overflow. */
 const CONTAINER_OVERFLOW_ATTRIBUTE = 'i-amphtml-truncate-overflow';
@@ -175,7 +175,7 @@ function getOverflowY(element) {
  *   overflowNodes: !Array<!Node>,
  * }} config
  */
-export function truncateText({container, overflowNodes} = {}) {
+export function truncateText({container, overflowNodes}) {
   clearTruncated(container);
 
   // If everything fits while the overflow button is hidden, we are done.
diff --git a/extensions/amp-truncate-text/amp-truncate-text.md b/extensions/amp-truncate-text/amp-truncate-text.md
index c3bb98409c38c..ff741a5240ca0 100644
--- a/extensions/amp-truncate-text/amp-truncate-text.md
+++ b/extensions/amp-truncate-text/amp-truncate-text.md
@@ -25,13 +25,19 @@ limitations under the License.
 
 # amp-truncate-text
 
-Truncates text within a container with an ellipsis.
-
-## Behavior
+## Usage
 
 Truncates text with an ellipsis, optionally showing an overflow element when there is overflow. The overflow element is always placed at the end of the content and must be a direct child of `<amp-truncate-text>`.
 
-## Children
+```html
+<amp-truncate-text layout="fixed" height="3em" width="20em">
+  Some text that may get truncated.
+  <button slot="collapsed">See more</button>
+  <button slot="expanded">See less</button>
+</amp-truncate-text>
+```
+
+### Valid children
 
 <table>
   <tr>
@@ -50,17 +56,7 @@ Truncates text with an ellipsis, optionally showing an overflow element when the
   </tr>
 </table>
 
-## Usage
-
-```html
-<amp-truncate-text layout="fixed" height="3em" width="20em">
-  Some text that may get truncated.
-  <button slot="collapsed">See more</button>
-  <button slot="expanded">See less</button>
-</amp-truncate-text>
-```
-
-## Using a Custom Action
+### Custom actions
 
 If you do not want to expand in place, you can use `slot="persistent"` to perform a custom acton, such as navigating to another page with additional information. This can be useful when there is more content than would make sense to expand inline.
 
@@ -92,4 +88,4 @@ By default, clicking within an element that has `slot="expanded"` will collapse
 
 ## Validation
 
-See [amp-truncate-text rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-truncate-text/validator-amp-truncate-text.protoascii) in the AMP validator specification.
+See [amp-truncate-text rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-truncate-text/validator-amp-truncate-text.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-truncate-text/validator-amp-truncate-text.protoascii b/extensions/amp-truncate-text/validator-amp-truncate-text.protoascii
index de404c1842eec..25d77b090f8a1 100644
--- a/extensions/amp-truncate-text/validator-amp-truncate-text.protoascii
+++ b/extensions/amp-truncate-text/validator-amp-truncate-text.protoascii
@@ -34,7 +34,7 @@ tags: {  # <amp-truncate-text>
     value: "right"
     value: "default"
   }
-  spec_url: "https://amp.dev/documentation/components/amp-truncate-text"
+  spec_url: "https://amp.dev/documentation/components/amp-truncate-text/"
   amp_layout: {
     supported_layouts: CONTAINER
     supported_layouts: FILL
diff --git a/extensions/amp-twitter/0.1/amp-twitter.js b/extensions/amp-twitter/0.1/amp-twitter.js
index 9ede7a8da73c5..8c89c8808b709 100644
--- a/extensions/amp-twitter/0.1/amp-twitter.js
+++ b/extensions/amp-twitter/0.1/amp-twitter.js
@@ -22,7 +22,30 @@ import {isLayoutSizeDefined} from '../../../src/layout';
 import {listenFor} from '../../../src/iframe-helper';
 import {removeElement} from '../../../src/dom';
 
+const TYPE = 'twitter';
+
 class AmpTwitter extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static createLoaderLogoCallback(element) {
+    const html = htmlFor(element);
+    return {
+      color: '#1DA1F2',
+      content: html`
+        <svg viewBox="0 0 72 72">
+          <path
+            fill="currentColor"
+            d="M32.29,44.13c7.55,0,11.67-6.25,11.67-11.67c0-0.18,0-0.35-0.01-0.53c0.8-0.58,1.5-1.3,2.05-2.12
+    c-0.74,0.33-1.53,0.55-2.36,0.65c0.85-0.51,1.5-1.31,1.8-2.27c-0.79,0.47-1.67,0.81-2.61,1c-0.75-0.8-1.82-1.3-3-1.3
+    c-2.27,0-4.1,1.84-4.1,4.1c0,0.32,0.04,0.64,0.11,0.94c-3.41-0.17-6.43-1.8-8.46-4.29c-0.35,0.61-0.56,1.31-0.56,2.06
+    c0,1.42,0.72,2.68,1.83,3.42c-0.67-0.02-1.31-0.21-1.86-0.51c0,0.02,0,0.03,0,0.05c0,1.99,1.41,3.65,3.29,4.02
+    c-0.34,0.09-0.71,0.14-1.08,0.14c-0.26,0-0.52-0.03-0.77-0.07c0.52,1.63,2.04,2.82,3.83,2.85c-1.4,1.1-3.17,1.76-5.1,1.76
+    c-0.33,0-0.66-0.02-0.98-0.06C27.82,43.45,29.97,44.13,32.29,44.13"
+          />
+        </svg>
+      `,
+    };
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -48,7 +71,7 @@ class AmpTwitter extends AMP.BaseElement {
   preconnectCallback(opt_onLayout) {
     const preconnect = Services.preconnectFor(this.win);
     const ampdoc = this.getAmpDoc();
-    preloadBootstrap(this.win, ampdoc, preconnect);
+    preloadBootstrap(this.win, TYPE, ampdoc, preconnect);
     // Hosts the script that renders tweets.
     preconnect.preload(
       ampdoc,
@@ -74,9 +97,10 @@ class AmpTwitter extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    const iframe = getIframe(this.win, this.element, 'twitter', null, {
+    const iframe = getIframe(this.win, this.element, TYPE, null, {
       allowFullscreen: true,
     });
+    iframe.title = this.element.title || 'Twitter';
     this.applyFillContent(iframe);
     this.updateForLoadingState_();
     listenFor(
@@ -154,35 +178,6 @@ class AmpTwitter extends AMP.BaseElement {
     });
   }
 
-  /**
-   * amp-twitter reuses the loading indicator when id changes via bind mutation
-   * @override
-   */
-  isLoadingReused() {
-    return true;
-  }
-
-  /** @override */
-  createLoaderLogoCallback() {
-    const html = htmlFor(this.element);
-    return {
-      color: '#1DA1F2',
-      content: html`
-        <svg viewBox="0 0 72 72">
-          <path
-            fill="currentColor"
-            d="M32.29,44.13c7.55,0,11.67-6.25,11.67-11.67c0-0.18,0-0.35-0.01-0.53c0.8-0.58,1.5-1.3,2.05-2.12
-    c-0.74,0.33-1.53,0.55-2.36,0.65c0.85-0.51,1.5-1.31,1.8-2.27c-0.79,0.47-1.67,0.81-2.61,1c-0.75-0.8-1.82-1.3-3-1.3
-    c-2.27,0-4.1,1.84-4.1,4.1c0,0.32,0.04,0.64,0.11,0.94c-3.41-0.17-6.43-1.8-8.46-4.29c-0.35,0.61-0.56,1.31-0.56,2.06
-    c0,1.42,0.72,2.68,1.83,3.42c-0.67-0.02-1.31-0.21-1.86-0.51c0,0.02,0,0.03,0,0.05c0,1.99,1.41,3.65,3.29,4.02
-    c-0.34,0.09-0.71,0.14-1.08,0.14c-0.26,0-0.52-0.03-0.77-0.07c0.52,1.63,2.04,2.82,3.83,2.85c-1.4,1.1-3.17,1.76-5.1,1.76
-    c-0.33,0-0.66-0.02-0.98-0.06C27.82,43.45,29.97,44.13,32.29,44.13"
-          />
-        </svg>
-      `,
-    };
-  }
-
   /** @override */
   unlayoutOnPause() {
     return true;
@@ -201,7 +196,7 @@ class AmpTwitter extends AMP.BaseElement {
   mutatedAttributesCallback(mutations) {
     if (this.iframe_ && mutations['data-tweetid'] != null) {
       this.unlayoutCallback();
-      this.toggleLoading(true);
+      this.toggleLoading(true, /* force */ true);
       this.layoutCallback();
     }
   }
diff --git a/extensions/amp-twitter/0.1/storybook/Basic.amp.js b/extensions/amp-twitter/0.1/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..0f764911f6e12
--- /dev/null
+++ b/extensions/amp-twitter/0.1/storybook/Basic.amp.js
@@ -0,0 +1,159 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-twitter-0_1',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [
+      {
+        name: 'amp-twitter',
+        version: '0.1',
+      },
+      {
+        name: 'amp-bind',
+        version: '0.1',
+      },
+    ],
+  },
+};
+
+export const Default = () => {
+  const tweetId = select(
+    'tweet id',
+    ['1356304203044499462', '495719809695621121', '463440424141459456'],
+    '1356304203044499462'
+  );
+  const cards = boolean('show cards', true) ? undefined : 'hidden';
+  const conversation = boolean('show conversation', false) ? undefined : 'none';
+  return (
+    <amp-twitter
+      width="300"
+      height="200"
+      data-tweetid={tweetId}
+      data-cards={cards}
+      data-conversation={conversation}
+    />
+  );
+};
+
+export const Moments = () => {
+  const limit = number('limit to', 2);
+  return (
+    <amp-twitter
+      data-limit={limit}
+      data-momentid="1009149991452135424"
+      width="300"
+      height="200"
+    />
+  );
+};
+
+export const Timelines = () => {
+  const tweetLimit = number('limit to', 5);
+  const timelineSourceType = select(
+    'source type',
+    ['profile', 'likes', 'list', 'source', 'collection', 'url', 'widget'],
+    'profile'
+  );
+  const timelineScreenName = 'amphtml';
+  const timelineUserId = '3450662892';
+  return (
+    <amp-twitter
+      data-tweet-limit={tweetLimit}
+      data-timeline-source-type={timelineSourceType}
+      data-timeline-scree-name={timelineScreenName}
+      data-timeline-user-id={timelineUserId}
+      width="300"
+      height="200"
+    />
+  );
+};
+
+export const DeletedTweet = () => {
+  const withFallback = boolean('include fallback?', true);
+  return (
+    <amp-twitter
+      width="390"
+      height="330"
+      layout="fixed"
+      data-tweetid="882818033403789316"
+      data-cards="hidden"
+    >
+      <blockquote placeholder>
+        <p lang="en" dir="ltr">
+          In case you missed it last week, check out our recap of AMP in 2020
+          ⚡🙌
+        </p>
+        <p>
+          Watch here ➡️
+          <br />
+          <a href="https://t.co/eaxT3MuSAK">https://t.co/eaxT3MuSAK</a>
+        </p>
+      </blockquote>
+      {withFallback && (
+        <div fallback>
+          An error occurred while retrieving the tweet. It might have been
+          deleted.
+        </div>
+      )}
+    </amp-twitter>
+  );
+};
+
+export const InvalidTweet = () => {
+  return (
+    <amp-twitter
+      width="390"
+      height="330"
+      layout="fixed"
+      data-tweetid="1111111111111641653602164060160"
+      data-cards="hidden"
+    >
+      <blockquote placeholder class="twitter-tweet" data-lang="en">
+        <p>
+          This placeholder should never change because given tweet-id is
+          invalid.
+        </p>
+      </blockquote>
+    </amp-twitter>
+  );
+};
+
+export const MutatedTweetId = () => {
+  return (
+    <>
+      <button on="tap:AMP.setState({tweetid: '495719809695621121'})">
+        Change tweet
+      </button>
+      <amp-state id="tweetid">
+        <script type="application/json">1356304203044499462</script>
+      </amp-state>
+      <amp-twitter
+        width="375"
+        height="472"
+        layout="responsive"
+        data-tweetid="1356304203044499462"
+        data-amp-bind-data-tweetid="tweetid"
+      ></amp-twitter>
+    </>
+  );
+};
diff --git a/extensions/amp-twitter/0.1/test/test-amp-twitter.js b/extensions/amp-twitter/0.1/test/test-amp-twitter.js
index 3af6980adf721..75d87d1774692 100644
--- a/extensions/amp-twitter/0.1/test/test-amp-twitter.js
+++ b/extensions/amp-twitter/0.1/test/test-amp-twitter.js
@@ -40,7 +40,7 @@ describes.realWin(
       ampTwitter.setAttribute('width', '111');
       ampTwitter.setAttribute('height', '222');
       doc.body.appendChild(ampTwitter);
-      await ampTwitter.build();
+      await ampTwitter.buildInternal();
       await ampTwitter.layoutCallback();
       return ampTwitter;
     }
@@ -116,9 +116,9 @@ describes.realWin(
 
     it('removes iframe after unlayoutCallback', async () => {
       const ampTwitter = await getAmpTwitter(tweetId);
+      const obj = await ampTwitter.getImpl(false);
       const iframe = ampTwitter.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      const obj = ampTwitter.implementation_;
       obj.unlayoutCallback();
       expect(ampTwitter.querySelector('iframe')).to.be.null;
       expect(obj.iframe_).to.be.null;
@@ -128,7 +128,8 @@ describes.realWin(
     it('should replace iframe after tweetid mutation', async () => {
       const newTweetId = '638793490521001985';
       const ampTwitter = await getAmpTwitter(tweetId);
-      const spy = env.sandbox.spy(ampTwitter.implementation_, 'toggleLoading');
+      const impl = await ampTwitter.getImpl(false);
+      const spy = env.sandbox.spy(impl, 'toggleLoading');
       const iframe = ampTwitter.querySelector('iframe');
       ampTwitter.setAttribute('data-tweetid', newTweetId);
       ampTwitter.mutatedAttributesCallback({'data-tweetid': newTweetId});
diff --git a/extensions/amp-twitter/0.1/test/validator-amp-twitter.html b/extensions/amp-twitter/0.1/test/validator-amp-twitter.html
index 376b1098d20d6..9d3c63fdcb6f3 100644
--- a/extensions/amp-twitter/0.1/test/validator-amp-twitter.html
+++ b/extensions/amp-twitter/0.1/test/validator-amp-twitter.html
@@ -20,7 +20,6 @@
   <title>Twitter examples</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/extensions/amp-twitter/0.1/test/validator-amp-twitter.out b/extensions/amp-twitter/0.1/test/validator-amp-twitter.out
index 297f4bd0bb25e..33d6c49f1599f 100644
--- a/extensions/amp-twitter/0.1/test/validator-amp-twitter.out
+++ b/extensions/amp-twitter/0.1/test/validator-amp-twitter.out
@@ -21,7 +21,6 @@ FAIL
 |    <title>Twitter examples</title>
 |    <link rel="canonical" href="amps.html" >
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
 |    <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -80,14 +79,14 @@ FAIL
 |    <h2>Missing tweetid/momentid</h2>
 |    <amp-twitter width=486 height=1312
 >>   ^~~~~~~~~
-amp-twitter/0.1/test/validator-amp-twitter.html:80:2 The tag 'amp-twitter' is missing a mandatory attribute - pick one of ['data-momentid', 'data-timeline-source-type', 'data-tweetid']. (see https://amp.dev/documentation/components/amp-twitter)
+amp-twitter/0.1/test/validator-amp-twitter.html:79:2 The tag 'amp-twitter' is missing a mandatory attribute - pick one of ['data-momentid', 'data-timeline-source-type', 'data-tweetid']. (see https://amp.dev/documentation/components/amp-twitter)
 |        layout="responsive">
 |    </amp-twitter>
 |
 |    <h2>Non-number momentid</h2>
 |    <amp-twitter width=486 height=1312
 >>   ^~~~~~~~~
-amp-twitter/0.1/test/validator-amp-twitter.html:85:2 The attribute 'data-momentid' in tag 'amp-twitter' is set to the invalid value 'https://twitter.com/i/moments/1009149991452135424'. (see https://amp.dev/documentation/components/amp-twitter)
+amp-twitter/0.1/test/validator-amp-twitter.html:84:2 The attribute 'data-momentid' in tag 'amp-twitter' is set to the invalid value 'https://twitter.com/i/moments/1009149991452135424'. (see https://amp.dev/documentation/components/amp-twitter)
 |        layout="responsive"
 |        data-momentid="https://twitter.com/i/moments/1009149991452135424">
 |    </amp-twitter>
@@ -95,7 +94,7 @@ amp-twitter/0.1/test/validator-amp-twitter.html:85:2 The attribute 'data-momenti
 |    <h2>Using cards with momentid</h2>
 |    <amp-twitter width=486 height=1312
 >>   ^~~~~~~~~
-amp-twitter/0.1/test/validator-amp-twitter.html:91:2 The attribute 'data-tweetid' in tag 'amp-twitter' is missing or incorrect, but required by attribute 'data-cards'. (see https://amp.dev/documentation/components/amp-twitter)
+amp-twitter/0.1/test/validator-amp-twitter.html:90:2 The attribute 'data-tweetid' in tag 'amp-twitter' is missing or incorrect, but required by attribute 'data-cards'. (see https://amp.dev/documentation/components/amp-twitter)
 |        layout="responsive"
 |        data-momentid="1009149991452135424"
 |        data-cards="hidden">
@@ -105,7 +104,7 @@ amp-twitter/0.1/test/validator-amp-twitter.html:91:2 The attribute 'data-tweetid
 |    <h3>with tweetid</h3>
 |    <amp-twitter width=486 height=1312
 >>   ^~~~~~~~~
-amp-twitter/0.1/test/validator-amp-twitter.html:99:2 The attribute 'data-momentid' in tag 'amp-twitter' is missing or incorrect, but required by attribute 'data-limit'. (see https://amp.dev/documentation/components/amp-twitter)
+amp-twitter/0.1/test/validator-amp-twitter.html:98:2 The attribute 'data-momentid' in tag 'amp-twitter' is missing or incorrect, but required by attribute 'data-limit'. (see https://amp.dev/documentation/components/amp-twitter)
 |        layout="responsive"
 |        data-tweetid="585110598171631616"
 |        data-limit="42">
diff --git a/extensions/amp-twitter/1.0/amp-twitter.js b/extensions/amp-twitter/1.0/amp-twitter.js
new file mode 100644
index 0000000000000..2dca4e9d03162
--- /dev/null
+++ b/extensions/amp-twitter/1.0/amp-twitter.js
@@ -0,0 +1,94 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {BaseElement} from './base-element';
+import {dict} from '../../../src/core/types/object';
+import {getBootstrapBaseUrl, getBootstrapUrl} from '../../../src/3p-frame';
+import {htmlFor} from '../../../src/static-template';
+import {isExperimentOn} from '../../../src/experiments';
+import {userAssert} from '../../../src/core/assert';
+
+/** @const {string} */
+const TAG = 'amp-twitter';
+const TYPE = 'twitter';
+
+class AmpTwitter extends BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+  }
+
+  /** @override @nocollapse */
+  static createLoaderLogoCallback(element) {
+    const html = htmlFor(element);
+    return {
+      color: '#1DA1F2',
+      content: html`
+        <svg viewBox="0 0 72 72">
+          <path
+            fill="currentColor"
+            d="M32.29,44.13c7.55,0,11.67-6.25,11.67-11.67c0-0.18,0-0.35-0.01-0.53c0.8-0.58,1.5-1.3,2.05-2.12
+      c-0.74,0.33-1.53,0.55-2.36,0.65c0.85-0.51,1.5-1.31,1.8-2.27c-0.79,0.47-1.67,0.81-2.61,1c-0.75-0.8-1.82-1.3-3-1.3
+      c-2.27,0-4.1,1.84-4.1,4.1c0,0.32,0.04,0.64,0.11,0.94c-3.41-0.17-6.43-1.8-8.46-4.29c-0.35,0.61-0.56,1.31-0.56,2.06
+      c0,1.42,0.72,2.68,1.83,3.42c-0.67-0.02-1.31-0.21-1.86-0.51c0,0.02,0,0.03,0,0.05c0,1.99,1.41,3.65,3.29,4.02
+      c-0.34,0.09-0.71,0.14-1.08,0.14c-0.26,0-0.52-0.03-0.77-0.07c0.52,1.63,2.04,2.82,3.83,2.85c-1.4,1.1-3.17,1.76-5.1,1.76
+      c-0.33,0-0.66-0.02-0.98-0.06C27.82,43.45,29.97,44.13,32.29,44.13"
+          />
+        </svg>
+      `,
+    };
+  }
+
+  /** @override @nocollapse */
+  static getPreconnects(element) {
+    const ampdoc = element.getAmpDoc();
+    const {win} = ampdoc;
+    return [
+      // Base URL for 3p bootstrap iframes
+      getBootstrapBaseUrl(win, ampdoc),
+      // Script URL for iframe
+      getBootstrapUrl(TYPE, win),
+      // Hosts the script that renders tweets.
+      'https://platform.twitter.com/widgets.js',
+      // This domain serves the actual tweets as JSONP.
+      'https://syndication.twitter.com',
+      // All images
+      'https://pbs.twimg.com',
+      'https://cdn.syndication.twimg.com',
+    ];
+  }
+
+  /** @override */
+  init() {
+    return dict({
+      'requestResize': (height) => this.forceChangeHeight(height),
+    });
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-twitter'),
+      'expected global "bento" or specific "bento-twitter" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpTwitter);
+});
diff --git a/extensions/amp-twitter/1.0/base-element.js b/extensions/amp-twitter/1.0/base-element.js
new file mode 100644
index 0000000000000..9fab48f1f4432
--- /dev/null
+++ b/extensions/amp-twitter/1.0/base-element.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {Twitter} from './component';
+
+export class BaseElement extends PreactBaseElement {}
+
+/** @override */
+BaseElement['Component'] = Twitter;
+
+/** @override */
+BaseElement['props'] = {
+  'title': {attr: 'title'}, // Needed for Preact component
+  'options': {attrPrefix: 'data-'}, // Needed to render componoent upon mutation
+};
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
diff --git a/extensions/amp-twitter/1.0/component.js b/extensions/amp-twitter/1.0/component.js
new file mode 100644
index 0000000000000..932c0bef0fbaa
--- /dev/null
+++ b/extensions/amp-twitter/1.0/component.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {
+  MessageType,
+  ProxyIframeEmbed,
+} from '../../../src/preact/component/3p-frame';
+import {deserializeMessage} from '../../../src/3p-frame-messaging';
+import {forwardRef} from '../../../src/preact/compat';
+import {useCallback, useState} from '../../../src/preact';
+
+/** @const {string} */
+const TYPE = 'twitter';
+const FULL_HEIGHT = '100%';
+const MATCHES_MESSAGING_ORIGIN = () => true;
+
+/**
+ * @param {!TwitterDef.Props} props
+ * @param {{current: (!TwitterDef.Api|null)}} ref
+ * @return {PreactDef.Renderable}
+ */
+function TwitterWithRef(
+  {momentid, options, requestResize, style, title, tweetid, ...rest},
+  ref
+) {
+  const [height, setHeight] = useState(null);
+  const messageHandler = useCallback(
+    (event) => {
+      const data = deserializeMessage(event.data);
+      if (data['type'] == MessageType.EMBED_SIZE) {
+        const height = data['height'];
+        if (requestResize) {
+          requestResize(height);
+          setHeight(FULL_HEIGHT);
+        } else {
+          setHeight(height);
+        }
+      }
+    },
+    [requestResize]
+  );
+
+  return (
+    <ProxyIframeEmbed
+      allowFullscreen
+      ref={ref}
+      title={title}
+      {...rest}
+      // non-overridable props
+      matchesMessagingOrigin={MATCHES_MESSAGING_ORIGIN}
+      messageHandler={messageHandler}
+      options={{tweetid, momentid, ...options}}
+      type={TYPE}
+      style={height ? {...style, height} : style}
+    />
+  );
+}
+
+const Twitter = forwardRef(TwitterWithRef);
+Twitter.displayName = 'Twitter'; // Make findable for tests.
+export {Twitter};
diff --git a/extensions/amp-twitter/1.0/component.type.js b/extensions/amp-twitter/1.0/component.type.js
new file mode 100644
index 0000000000000..054bc64168f6c
--- /dev/null
+++ b/extensions/amp-twitter/1.0/component.type.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/** @externs */
+
+/** @const */
+var TwitterDef = {};
+
+/**
+ * @typedef {{
+ *   loading: (string|undefined),
+ *   onReadyState: (function(string, *=)|undefined),
+ *   requestResize: (function(number):*|undefined),
+ *   title: (string|undefined),
+ * }}
+ */
+TwitterDef.Props;
+
+/** @constructor */
+TwitterDef.Api = function () {};
+
+/** @type {string} */
+TwitterDef.Api.prototype.readyState;
diff --git a/extensions/amp-twitter/1.0/package.json b/extensions/amp-twitter/1.0/package.json
new file mode 100644
index 0000000000000..0a076efe00cee
--- /dev/null
+++ b/extensions/amp-twitter/1.0/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-twitter",
+  "version": "VERSION",
+  "description": "AMP Twitter Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "./dist/component.js",
+  "module": "./dist/component-preact.module.js",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "./dist/component-preact.module.js",
+      "require": "./dist/component-preact.js"
+    },
+    "./react": {
+      "import": "./dist/component-react.module.js",
+      "require": "./dist/component-react.js"
+    }
+  },
+  "files": ["dist/*", "react.js"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml.git",
+    "directory": "extensions/amp-twitter/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-twitter/1.0",
+  "peerDependencies": {
+    "preact": "^10.2.1",
+    "react": "^17.0.0"
+  }
+}
diff --git a/extensions/amp-twitter/1.0/react.js b/extensions/amp-twitter/1.0/react.js
new file mode 100644
index 0000000000000..0b2957c35c38d
--- /dev/null
+++ b/extensions/amp-twitter/1.0/react.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-env node */
+// eslint-disable-next-line local/no-module-exports
+module.exports = require('./dist/component-react');
diff --git a/extensions/amp-twitter/1.0/storybook/Basic.amp.js b/extensions/amp-twitter/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..4e5e00c1eb61d
--- /dev/null
+++ b/extensions/amp-twitter/1.0/storybook/Basic.amp.js
@@ -0,0 +1,160 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-twitter-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [
+      {
+        name: 'amp-twitter',
+        version: '1.0',
+      },
+      {
+        name: 'amp-bind',
+        version: '0.1',
+      },
+    ],
+    experiments: ['bento'],
+  },
+};
+
+export const Default = () => {
+  const tweetId = select(
+    'tweet id',
+    ['1356304203044499462', '495719809695621121', '463440424141459456'],
+    '1356304203044499462'
+  );
+  const cards = boolean('show cards', true) ? undefined : 'hidden';
+  const conversation = boolean('show conversation', false) ? undefined : 'none';
+  return (
+    <amp-twitter
+      width="300"
+      height="200"
+      data-tweetid={tweetId}
+      data-cards={cards}
+      data-conversation={conversation}
+    />
+  );
+};
+
+export const Moments = () => {
+  const limit = number('limit to', 2);
+  return (
+    <amp-twitter
+      data-limit={limit}
+      data-momentid="1009149991452135424"
+      width="300"
+      height="200"
+    />
+  );
+};
+
+export const Timelines = () => {
+  const tweetLimit = number('limit to', 5);
+  const timelineSourceType = select(
+    'source type',
+    ['profile', 'likes', 'list', 'source', 'collection', 'url', 'widget'],
+    'profile'
+  );
+  const timelineScreenName = 'amphtml';
+  const timelineUserId = '3450662892';
+  return (
+    <amp-twitter
+      data-tweet-limit={tweetLimit}
+      data-timeline-source-type={timelineSourceType}
+      data-timeline-scree-name={timelineScreenName}
+      data-timeline-user-id={timelineUserId}
+      width="300"
+      height="200"
+    />
+  );
+};
+
+export const DeletedTweet = () => {
+  const withFallback = boolean('include fallback?', true);
+  return (
+    <amp-twitter
+      width="390"
+      height="330"
+      layout="fixed"
+      data-tweetid="882818033403789316"
+      data-cards="hidden"
+    >
+      <blockquote placeholder>
+        <p lang="en" dir="ltr">
+          In case you missed it last week, check out our recap of AMP in 2020
+          ⚡🙌
+        </p>
+        <p>
+          Watch here ➡️
+          <br />
+          <a href="https://t.co/eaxT3MuSAK">https://t.co/eaxT3MuSAK</a>
+        </p>
+      </blockquote>
+      {withFallback && (
+        <div fallback>
+          An error occurred while retrieving the tweet. It might have been
+          deleted.
+        </div>
+      )}
+    </amp-twitter>
+  );
+};
+
+export const InvalidTweet = () => {
+  return (
+    <amp-twitter
+      width="390"
+      height="330"
+      layout="fixed"
+      data-tweetid="1111111111111641653602164060160"
+      data-cards="hidden"
+    >
+      <blockquote placeholder class="twitter-tweet" data-lang="en">
+        <p>
+          This placeholder should never change because given tweet-id is
+          invalid.
+        </p>
+      </blockquote>
+    </amp-twitter>
+  );
+};
+
+export const MutatedTweetId = () => {
+  return (
+    <>
+      <button on="tap:AMP.setState({tweetid: '495719809695621121'})">
+        Change tweet
+      </button>
+      <amp-state id="tweetid">
+        <script type="application/json">1356304203044499462</script>
+      </amp-state>
+      <amp-twitter
+        width="375"
+        height="472"
+        layout="responsive"
+        data-tweetid="1356304203044499462"
+        data-amp-bind-data-tweetid="tweetid"
+      ></amp-twitter>
+    </>
+  );
+};
diff --git a/extensions/amp-twitter/1.0/storybook/Basic.js b/extensions/amp-twitter/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..1c00737254769
--- /dev/null
+++ b/extensions/amp-twitter/1.0/storybook/Basic.js
@@ -0,0 +1,81 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Twitter} from '../component';
+import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'Twitter',
+  component: Twitter,
+  decorators: [withKnobs],
+};
+
+export const _default = () => {
+  const tweetId = select(
+    'tweet id',
+    ['1356304203044499462', '495719809695621121', '463440424141459456'],
+    '1356304203044499462'
+  );
+  const cards = boolean('show cards', true) ? undefined : 'hidden';
+  const conversation = boolean('show conversation', false) ? undefined : 'none';
+  return (
+    <Twitter
+      bootstrap="https://3p.ampproject.net/2104170104001/f.js"
+      options={{cards, conversation}}
+      tweetid={tweetId}
+      src="https://d-41929527682976137678.ampproject.net/2104170104001/frame.html"
+      style={{width: '300px', height: '200px'}}
+    />
+  );
+};
+
+export const moments = () => {
+  const limit = number('limit to', 2);
+  return (
+    <Twitter
+      bootstrap="https://3p.ampproject.net/2104170104001/f.js"
+      options={{limit}}
+      momentid="1009149991452135424"
+      src="https://d-41929527682976137678.ampproject.net/2104170104001/frame.html"
+      style={{width: '300px', height: '200px'}}
+    />
+  );
+};
+
+export const timelines = () => {
+  const tweetLimit = number('limit to', 5);
+  const timelineSourceType = select(
+    'source type',
+    ['profile', 'likes', 'list', 'source', 'collection', 'url', 'widget'],
+    'profile'
+  );
+  const timelineScreenName = 'amphtml';
+  const timelineUserId = '3450662892';
+  return (
+    <Twitter
+      bootstrap="https://3p.ampproject.net/2104170104001/f.js"
+      options={{
+        tweetLimit,
+        timelineSourceType,
+        timelineScreenName,
+        timelineUserId,
+      }}
+      src="https://d-41929527682976137678.ampproject.net/2104170104001/frame.html"
+      style={{width: '300px', height: '200px'}}
+    />
+  );
+};
diff --git a/extensions/amp-twitter/1.0/test/test-amp-twitter.js b/extensions/amp-twitter/1.0/test/test-amp-twitter.js
new file mode 100644
index 0000000000000..532e7cf83fd8b
--- /dev/null
+++ b/extensions/amp-twitter/1.0/test/test-amp-twitter.js
@@ -0,0 +1,124 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import '../amp-twitter';
+import {createElementWithAttributes} from '../../../../src/dom';
+import {doNotLoadExternalResourcesInTest} from '../../../../testing/iframe';
+import {serializeMessage} from '../../../../src/3p-frame-messaging';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-twitter-v1.0',
+  {
+    amp: {
+      extensions: ['amp-twitter:1.0'],
+    },
+  },
+  (env) => {
+    let win, doc, element;
+
+    const waitForRender = async () => {
+      await element.buildInternal();
+      const loadPromise = element.layoutCallback();
+      const shadow = element.shadowRoot;
+      await waitFor(() => shadow.querySelector('iframe'), 'iframe mounted');
+      await loadPromise;
+    };
+
+    beforeEach(async function () {
+      win = env.win;
+      doc = win.document;
+      toggleExperiment(win, 'bento-twitter', true, true);
+      // Override global window here because Preact uses global `createElement`.
+      doNotLoadExternalResourcesInTest(window, env.sandbox);
+    });
+
+    it('renders', async () => {
+      element = createElementWithAttributes(doc, 'amp-twitter', {
+        'data-tweetid': '585110598171631616',
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      expect(element.shadowRoot.querySelector('iframe').src).to.equal(
+        'http://ads.localhost:9876/dist.3p/current/frame.max.html'
+      );
+    });
+
+    it("container's height is changed", async () => {
+      const initialHeight = 300;
+      element = createElementWithAttributes(win.document, 'amp-twitter', {
+        'data-tweetid': '585110598171631616',
+        'height': initialHeight,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      const impl = await element.getImpl(false);
+      const forceChangeHeightStub = env.sandbox.stub(impl, 'forceChangeHeight');
+
+      const mockEvent = new CustomEvent('message');
+      const sentinel = JSON.parse(
+        element.shadowRoot.querySelector('iframe').getAttribute('name')
+      )['attributes']['sentinel'];
+      mockEvent.data = serializeMessage('embed-size', sentinel, {
+        'height': 1000,
+      });
+      mockEvent.source =
+        element.shadowRoot.querySelector('iframe').contentWindow;
+      win.dispatchEvent(mockEvent);
+      expect(forceChangeHeightStub).to.be.calledOnce.calledWith(1000);
+    });
+
+    it('should replace iframe after tweetid mutation', async () => {
+      const originalTweetId = '585110598171631616';
+      const newTweetId = '638793490521001985';
+      element = createElementWithAttributes(win.document, 'amp-twitter', {
+        'data-tweetid': originalTweetId,
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      const iframe = element.shadowRoot.querySelector('iframe');
+      const originalName = iframe.getAttribute('name');
+      expect(originalName).to.contain(originalTweetId);
+      expect(originalName).not.to.contain(newTweetId);
+
+      element.setAttribute('data-tweetid', newTweetId);
+      await waitFor(
+        () =>
+          element.shadowRoot.querySelector('iframe').getAttribute('name') !=
+          originalName,
+        'iframe changed'
+      );
+
+      const newName = element.shadowRoot
+        .querySelector('iframe')
+        .getAttribute('name');
+      expect(newName).not.to.contain(originalTweetId);
+      expect(newName).to.contain(newTweetId);
+    });
+  }
+);
diff --git a/extensions/amp-twitter/1.0/test/test-component.js b/extensions/amp-twitter/1.0/test/test-component.js
new file mode 100644
index 0000000000000..c0ba17d74fd82
--- /dev/null
+++ b/extensions/amp-twitter/1.0/test/test-component.js
@@ -0,0 +1,157 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Twitter} from '../component';
+import {WithAmpContext} from '../../../../src/preact/context';
+import {createRef} from '../../../../src/preact';
+import {mount} from 'enzyme';
+import {serializeMessage} from '../../../../src/3p-frame-messaging';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.sandboxed('Twitter preact component v1.0', {}, (env) => {
+  it('should render', () => {
+    const wrapper = mount(
+      <Twitter
+        tweetid="1356304203044499462"
+        style={{
+          'width': '500px',
+          'height': '600px',
+        }}
+      />
+    );
+
+    const iframe = wrapper.find('iframe');
+
+    expect(iframe.prop('src')).to.equal(
+      'http://ads.localhost:9876/dist.3p/current/frame.max.html'
+    );
+    expect(wrapper.find('iframe').prop('style').width).to.equal('100%');
+    expect(wrapper.find('iframe').prop('style').height).to.equal('100%');
+  });
+
+  it('should call given requestResize', () => {
+    const requestResizeSpy = env.sandbox.spy();
+    const wrapper = mount(
+      <Twitter
+        tweetid="1356304203044499462"
+        style={{
+          'width': '500px',
+          'height': '600px',
+        }}
+        requestResize={requestResizeSpy}
+      />
+    );
+
+    const iframe = wrapper.find('iframe').getDOMNode();
+    const sentinel = JSON.parse(iframe.getAttribute('name'))['attributes'][
+      'sentinel'
+    ];
+
+    const mockEvent = new CustomEvent('message');
+    mockEvent.data = serializeMessage('embed-size', sentinel, {
+      'height': 1000,
+    });
+    mockEvent.source = wrapper
+      .getDOMNode()
+      .querySelector('iframe').contentWindow;
+    window.dispatchEvent(mockEvent);
+
+    expect(requestResizeSpy).to.have.been.calledOnce;
+  });
+
+  it('should change height', async () => {
+    const wrapper = mount(
+      <Twitter
+        tweetid="1356304203044499462"
+        style={{
+          'width': '500px',
+          'height': '600px',
+        }}
+      />
+    );
+
+    const iframe = wrapper.find('iframe').getDOMNode();
+    const sentinel = JSON.parse(iframe.getAttribute('name'))['attributes'][
+      'sentinel'
+    ];
+
+    const mockEvent = new CustomEvent('message');
+    mockEvent.data = serializeMessage('embed-size', sentinel, {
+      'height': 1000,
+    });
+    mockEvent.source = wrapper
+      .getDOMNode()
+      .querySelector('iframe').contentWindow;
+    window.dispatchEvent(mockEvent);
+
+    wrapper.update();
+
+    await waitFor(
+      () => wrapper.find('div').at(0).prop('style').height == 1000,
+      'Height changes'
+    );
+
+    expect(wrapper.find('div').at(0).prop('style').height).to.equal(1000);
+  });
+
+  it('should dispatch load event', async () => {
+    const ref = createRef();
+    const onReadyState = env.sandbox.spy();
+    const wrapper = mount(
+      <Twitter
+        ref={ref}
+        tweetid="1356304203044499462"
+        style={{
+          'width': '500px',
+          'height': '600px',
+        }}
+        onReadyState={onReadyState}
+      />
+    );
+
+    let api = ref.current;
+    expect(api.readyState).to.equal('loading');
+    expect(onReadyState).to.not.be.called;
+
+    await wrapper.find('iframe').invoke('onLoad')();
+    api = ref.current;
+    expect(api.readyState).to.equal('complete');
+    expect(onReadyState).to.be.calledOnce.calledWith('complete');
+  });
+
+  it('should reset iframe on pause', () => {
+    const ref = createRef();
+    const wrapper = mount(
+      <WithAmpContext playable={true}>
+        <Twitter
+          ref={ref}
+          tweetid="1356304203044499462"
+          style={{
+            'width': '500px',
+            'height': '600px',
+          }}
+        />
+      </WithAmpContext>
+    );
+    expect(wrapper.find('iframe')).to.have.lengthOf(1);
+
+    const iframe = wrapper.find('iframe').getDOMNode();
+    const spy = env.sandbox.spy(iframe, 'src', ['set']);
+    wrapper.setProps({playable: false});
+    expect(spy.set).to.be.calledOnce;
+  });
+});
diff --git a/extensions/amp-twitter/OWNERS b/extensions/amp-twitter/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-twitter/OWNERS
+++ b/extensions/amp-twitter/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-twitter/amp-twitter.md b/extensions/amp-twitter/amp-twitter.md
index d3b8920e5af53..e1adfad7d7c3f 100644
--- a/extensions/amp-twitter/amp-twitter.md
+++ b/extensions/amp-twitter/amp-twitter.md
@@ -131,6 +131,10 @@ For details on the available arguments, see the "Timelines" section in <a href="
     <td width="40%"><strong>data-* (optional)</strong></td>
     <td>You can specify options for the Tweet, Moment, or Timeline appearance by setting <code>data-</code> attributes. For example, <code>data-cards="hidden"</code> deactivates Twitter cards.
 For details on the available options, see Twitter's docs <a href="https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference">for tweets</a>, <a href="https://developer.twitter.com/en/docs/twitter-for-websites/moments/guides/parameter-reference0">for moments</a> and <a href="https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/parameter-reference">for timelines</a>.</td>
+  </tr>
+   <tr>
+    <td width="40%"><strong>title (optional)</strong></td>
+    <td>Define a <code>title</code> attribute for the component. The default is <code>Twitter</code>.</td>
   </tr>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>
@@ -140,4 +144,4 @@ For details on the available options, see Twitter's docs <a href="https://develo
 
 ## Validation
 
-See [amp-twitter rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-twitter/validator-amp-twitter.protoascii) in the AMP validator specification.
+See [amp-twitter rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-twitter/validator-amp-twitter.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-user-location/amp-user-location.md b/extensions/amp-user-location/amp-user-location.md
deleted file mode 100644
index 95802df35c1dd..0000000000000
--- a/extensions/amp-user-location/amp-user-location.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-$category@: presentation
-formats:
-  - ads-analytics
-  - websites
-  - dynamic-content
-teaser:
-  text: Requests the user's location and provides it to AMP components.
-experimental: true
----
-
-<!--
-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.
--->
-
-# amp-user-location
-
-## Behavior
-
-The `amp-user-location` component can be used in combination with other components to
-send the user's location as part of other AMP components' requests. For example, to send the user's
-location with a form or an analytics request, the Variable Substitution variables can be used.
-
-## Attributes
-
-The `amp-user-location` component only requires an `id` attribute.
-
-## AMP Actions
-
-`amp-user-location` exposes the `request` action. This action is required to send the user's location
-to another AMP component. This will cause the browser to prompt the user to approve location access
-for the current domain, if the user has not already.
-
-```html
-<button on="tap: location.request()">Use my location</button>
-<amp-user-location id="location" on="approve:…" layout="nodisplay">
-</amp-user-location>
-```
-
-## AMP Events
-
-`amp-user-location` exposes the following events
-
-<table>
-  <tr>
-    <th width="30%">Event</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td><code>approve</code></td>
-    <td>This event is fired when the user triggers the `request` action and then approves the browser prompt to access their location, or the user has previously approved the prompt. The `event` object contains `lat` `lon` and `source` properties.
-    </td>
-  </tr>
-  <tr>
-    <td><code>deny</code></td>
-    <td>This event is fired when the user triggers the `request` action and then denies the browser prompt to access their location, or the user has previously denied the prompt.</td>
-  </tr>
-  <tr>
-    <td><code>error</code></td>
-    <td>This event is fired when the user triggers the `request` action and and error occurs. This can happen if the browser takes too long to retrieve the location information, if the hardware is unavailable, or other errors occur.</td>
-  </tr>
-</table>
-
-## Variable Substitution
-
-The user's location is also available via AMP variable substitution:
-
-`AMP_USER_LOCATION` or `${ampUserLocation}` returns the latitude and longitude separated by a comma.
-`AMP_USER_LOCATION(LAT)` or `${ampUserLocation(LAT)}` returns the latitude.
-`AMP_USER_LOCATION(LON)` or `${ampUserLocation(LON)}` returns the longitude.
-`AMP_USER_LOCATION(SOURCE)` or `${ampUserLocation(SOURCE)}` returns the source. The source may be one of `debug`, `fallback`, `geolocation`, `unavailable`, or `unsupported`.
-
-The `AMP_USER_LOCATION_POLL` or `${ampUserLocationPoll}` substitution is also available with the same
-syntax as above. It will wait for the location to be requested before resolving, and will prevent a
-request from occurring until that time. Polling is useful when the location is required for the request.
-
-## Validation
-
-See [amp-user-location rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-user-location/validator-amp-user-location.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-user-notification/0.1/amp-user-notification.js b/extensions/amp-user-notification/0.1/amp-user-notification.js
index 926e2e9da85ef..61a4015f3f3bf 100644
--- a/extensions/amp-user-notification/0.1/amp-user-notification.js
+++ b/extensions/amp-user-notification/0.1/amp-user-notification.js
@@ -15,7 +15,7 @@
  */
 
 import {CSS} from '../../../build/amp-user-notification-0.1.css';
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {GEO_IN_GROUP} from '../../amp-geo/0.1/amp-geo-in-group';
 import {
   NOTIFICATION_UI_MANAGER,
@@ -23,19 +23,19 @@ import {
 } from '../../../src/service/notification-ui-manager';
 import {Services} from '../../../src/services';
 import {addParamsToUrl, assertHttpsUrl} from '../../../src/url';
-import {dev, rethrowAsync, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dev, user, userAssert} from '../../../src/log';
+import {dict} from '../../../src/core/types/object';
 import {
   getServicePromiseForDoc,
   registerServiceBuilderForDoc,
 } from '../../../src/service';
+import {rethrowAsync} from '../../../src/core/error';
 import {toggle} from '../../../src/style';
 
 const TAG = 'amp-user-notification';
 const SERVICE_ID = 'userNotificationManager';
 
 /**
- * @export
  * @typedef {{
  *   showNotification: boolean
  * }}
diff --git a/extensions/amp-user-notification/0.1/test/test-amp-user-notification.js b/extensions/amp-user-notification/0.1/test/test-amp-user-notification.js
index 2103138b3a00e..d8b7047e102a3 100644
--- a/extensions/amp-user-notification/0.1/test/test-amp-user-notification.js
+++ b/extensions/amp-user-notification/0.1/test/test-amp-user-notification.js
@@ -90,51 +90,51 @@ describes.realWin(
       return elem;
     }
 
-    it('should have storage key', () => {
+    it('should have storage key', async () => {
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
       expect(impl.storageKey_).to.equal('amp-user-notification:n1');
     });
 
-    it('should require an id', () => {
+    it('should require an id', async () => {
       const el = getUserNotification({
         'data-show-if-href': 'https://www.ampproject.org/get/here',
         'data-dismiss-href': 'https://www.ampproject.org/post/here',
         'layout': 'nodisplay',
       });
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       allowConsoleError(() => {
         expect(impl.buildCallback.bind(impl)).to.throw(/should have an id/);
       });
     });
 
-    it.skip('should NOT require `data-show-if-href`', () => {
+    it.skip('should NOT require `data-show-if-href`', async () => {
       const el = getUserNotification({
         id: 'n1',
         'data-show-if-geo': 'nafta',
       });
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       expect(impl.buildCallback.bind(impl)).to.not.throw();
     });
 
-    it.skip('should NOT require `data-show-if-geo`', () => {
+    it.skip('should NOT require `data-show-if-geo`', async () => {
       const el = getUserNotification({
         id: 'n1',
         'data-show-if-href': 'https://www.ampproject.org/get',
       });
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       expect(impl.buildCallback.bind(impl)).to.not.throw();
     });
 
-    it('should throw if more than one data-how-if-* attrib is defined', () => {
+    it('should throw if more than one data-how-if-* attrib is defined', async () => {
       const el = getUserNotification({
         'data-show-if-href': 'https://www.ampproject.org/get/here',
         'data-show-if-geo': 'foo',
         'id': 'n1',
         'layout': 'nodisplay',
       });
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       allowConsoleError(() =>
         expect(impl.buildCallback.bind(impl)).to.throw(
           /Only one "data-show-if-\*" attribute allowed​​​/
@@ -142,18 +142,18 @@ describes.realWin(
       );
     });
 
-    it.skip('should NOT require `data-dismiss-href`', () => {
+    it.skip('should NOT require `data-dismiss-href`', async () => {
       const el = getUserNotification({
         id: 'n1',
         'data-show-if-href': 'https://www.ampproject.org/get',
       });
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       expect(impl.buildCallback.bind(impl)).to.not.throw();
     });
 
-    it('isDismissed should return true if dismissal has been recorded', () => {
+    it('isDismissed should return true if dismissal has been recorded', async () => {
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -167,9 +167,9 @@ describes.realWin(
       });
     });
 
-    it('isDismissed should return false if dismissal has not been recorded', () => {
+    it('isDismissed should return false if dismissal has not been recorded', async () => {
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -183,10 +183,10 @@ describes.realWin(
       });
     });
 
-    it('isDismissed should return false if data-persist-dismissal=false', () => {
+    it('isDismissed should return false if data-persist-dismissal=false', async () => {
       dftAttrs['data-persist-dismissal'] = false;
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock.expects('get').never();
@@ -196,9 +196,9 @@ describes.realWin(
       });
     });
 
-    it('isDismissed should return false if storage throws error', () => {
+    it('isDismissed should return false if storage throws error', async () => {
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -212,9 +212,9 @@ describes.realWin(
       });
     });
 
-    it('shouldShow should return false if storage has been recorded', () => {
+    it('shouldShow should return false if storage has been recorded', async () => {
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       env.sandbox.stub(impl, 'getAsyncCid_').throws();
@@ -229,10 +229,10 @@ describes.realWin(
       });
     });
 
-    it('should skip storage if data-persist-dismissal=false', () => {
+    it('should skip storage if data-persist-dismissal=false', async () => {
       dftAttrs['data-persist-dismissal'] = false;
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -256,31 +256,31 @@ describes.realWin(
       });
     });
 
-    it('should set persistDismissal to false', () => {
+    it('should set persistDismissal to false', async () => {
       const el = getUserNotification({
         id: 'n1',
         layout: 'nodisplay',
         'data-persist-dismissal': false,
       });
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
       expect(impl.persistDismissal_).to.be.false;
     });
 
-    it('should set persistDismissal to true for any other value', () => {
+    it('should set persistDismissal to true for any other value', async () => {
       const el = getUserNotification({
         id: 'n1',
         layout: 'nodisplay',
         'data-persist-dismissal': 'anything',
       });
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
       expect(impl.persistDismissal_).to.be.true;
     });
 
-    it('shouldShow should fallback to xhr and return true', () => {
+    it('shouldShow should fallback to xhr and return true', async () => {
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -304,9 +304,9 @@ describes.realWin(
       });
     });
 
-    it('shouldShow should fallback to xhr and return false', () => {
+    it('shouldShow should fallback to xhr and return false', async () => {
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -330,9 +330,9 @@ describes.realWin(
       });
     });
 
-    it.skip('shouldShow should return true if not stored and no xhr', () => {
+    it.skip('shouldShow should return true if not stored and no xhr', async () => {
       const el = getUserNotification({id: 'n1'});
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       env.sandbox.stub(impl, 'getAsyncCid_').throws();
@@ -347,12 +347,12 @@ describes.realWin(
       });
     });
 
-    it('shouldShow should recover from error to xhr', () => {
+    it('shouldShow should recover from error to xhr', async () => {
       expectAsyncConsoleError(
         '[amp-user-notification] Failed to read storage intentional'
       );
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -376,12 +376,12 @@ describes.realWin(
       });
     });
 
-    it.skip('shouldShow should recover from error and return true with no xhr', () => {
+    it.skip('shouldShow should recover from error and return true with no xhr', async () => {
       expectAsyncConsoleError(
         '[amp-user-notification] Failed to read storage intentional'
       );
       const el = getUserNotification({id: 'n1'});
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       env.sandbox.stub(impl, 'getAsyncCid_').throws();
@@ -396,9 +396,9 @@ describes.realWin(
       });
     });
 
-    it.skip('should store value on dismiss and run post', () => {
+    it.skip('should store value on dismiss and run post', async () => {
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -415,9 +415,9 @@ describes.realWin(
       });
     });
 
-    it.skip('should ignore post on dismiss if not configured', () => {
+    it.skip('should ignore post on dismiss if not configured', async () => {
       const el = getUserNotification({id: 'n1'});
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -434,10 +434,10 @@ describes.realWin(
       });
     });
 
-    it('should not store value on dismiss if persist-dismissal=false', () => {
+    it('should not store value on dismiss if persist-dismissal=false', async () => {
       dftAttrs['data-persist-dismissal'] = false;
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -454,13 +454,13 @@ describes.realWin(
       });
     });
 
-    it('shouldShow should return true if no datashow-if-* is specified', () => {
+    it('shouldShow should return true if no datashow-if-* is specified', async () => {
       const el = getUserNotification({
         id: 'n1',
         'layout': 'nodisplay',
       });
       ISOCountryGroups = [];
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -474,14 +474,14 @@ describes.realWin(
       });
     });
 
-    it('shouldShow should return true if geo matches', () => {
+    it('shouldShow should return true if geo matches', async () => {
       const el = getUserNotification({
         id: 'n1',
         'data-show-if-geo': 'nafta',
         'layout': 'nodisplay',
       });
       ISOCountryGroups = ['nafta'];
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -495,14 +495,14 @@ describes.realWin(
       });
     });
 
-    it('shouldShow should hande comma separated country groups', () => {
+    it('shouldShow should hande comma separated country groups', async () => {
       const el = getUserNotification({
         id: 'n1',
         'data-show-if-geo': 'eea, nafta, anz',
         'layout': 'nodisplay',
       });
       ISOCountryGroups = ['nafta'];
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -516,14 +516,14 @@ describes.realWin(
       });
     });
 
-    it('shouldShow should return false if geo does not match', () => {
+    it('shouldShow should return false if geo does not match', async () => {
       ISOCountryGroups = ['nafta'];
       const el = getUserNotification({
         id: 'n1',
         'data-show-if-geo': 'eea',
         'layout': 'nodisplay',
       });
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       return impl.shouldShow().then((shouldShow) => {
@@ -531,14 +531,14 @@ describes.realWin(
       });
     });
 
-    it('shouldShow should return false no match and comma separated groups', () => {
+    it('shouldShow should return false no match and comma separated groups', async () => {
       ISOCountryGroups = ['nafta'];
       const el = getUserNotification({
         id: 'n1',
         'data-show-if-geo': 'eea',
         'layout': 'nodisplay',
       });
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       return impl.shouldShow().then((shouldShow) => {
@@ -546,14 +546,14 @@ describes.realWin(
       });
     });
 
-    it('shouldShow should return true when not geo is used', () => {
+    it('shouldShow should return true when not geo is used', async () => {
       ISOCountryGroups = [];
       const el = getUserNotification({
         id: 'n1',
         'data-show-if-not-geo': 'anz',
         'layout': 'nodisplay',
       });
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       return impl.shouldShow().then((shouldShow) => {
@@ -561,14 +561,14 @@ describes.realWin(
       });
     });
 
-    it('shouldShow should return false when any match not geo is used', () => {
+    it('shouldShow should return false when any match not geo is used', async () => {
       ISOCountryGroups = ['waldo'];
       const el = getUserNotification({
         id: 'n1',
         'data-show-if-geo': 'eea, nafta, anz',
         'layout': 'nodisplay',
       });
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       return impl.shouldShow().then((shouldShow) => {
@@ -576,10 +576,10 @@ describes.realWin(
       });
     });
 
-    it('should not store value on dismiss if persist-dismissal=no', () => {
+    it('should not store value on dismiss if persist-dismissal=no', async () => {
       dftAttrs['data-persist-dismissal'] = 'no';
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
 
       storageMock
@@ -596,7 +596,7 @@ describes.realWin(
       });
     });
 
-    it('should have class `amp-active`', () => {
+    it('should have class `amp-active`', async () => {
       env.sandbox
         .stub(AmpUserNotification.prototype, 'getAsyncCid_')
         .returns(Promise.resolve('12345'));
@@ -605,7 +605,7 @@ describes.realWin(
         .returns(Promise.resolve({showNotification: true}));
 
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
       impl.dialogPromise_ = Promise.resolve();
       const addToFixedLayerStub = env.sandbox.stub(
@@ -625,7 +625,7 @@ describes.realWin(
       });
     });
 
-    it('should not have `amp-active`', () => {
+    it('should not have `amp-active`', async () => {
       env.sandbox
         .stub(AmpUserNotification.prototype, 'getAsyncCid_')
         .returns(Promise.resolve('12345'));
@@ -634,7 +634,7 @@ describes.realWin(
         .returns(Promise.resolve({showNotification: false}));
 
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
       impl.dialogPromise_ = Promise.resolve();
       impl.dialogResolve_ = function () {};
@@ -650,7 +650,7 @@ describes.realWin(
       });
     });
 
-    it('should have `amp-hidden` and no `amp-active`', () => {
+    it('should have `amp-hidden` and no `amp-active`', async () => {
       env.sandbox
         .stub(AmpUserNotification.prototype, 'getAsyncCid_')
         .returns(Promise.resolve('12345'));
@@ -662,7 +662,7 @@ describes.realWin(
         .returns(Promise.resolve());
 
       const el = getUserNotification(dftAttrs);
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
       impl.dialogPromise_ = Promise.resolve();
       impl.dialogResolve_ = function () {};
@@ -688,24 +688,24 @@ describes.realWin(
       });
     });
 
-    it.skip('should have a default `role` if unspecified', () => {
+    it.skip('should have a default `role` if unspecified', async () => {
       const el = getUserNotification({id: 'n1'});
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
       expect(el.getAttribute('role')).to.equal('alert');
     });
 
-    it.skip('should not override `role` if specified', () => {
+    it.skip('should not override `role` if specified', async () => {
       const el = getUserNotification({id: 'n1', role: 'status'});
-      const impl = el.implementation_;
+      const impl = await el.getImpl(false);
       impl.buildCallback();
       expect(el.getAttribute('role')).to.equal('status');
     });
 
-    describe('buildPostDismissRequest_', () => {
-      it('should return JSON request body', () => {
+    describe('buildPostDismissRequest_', async () => {
+      it('should return JSON request body', async () => {
         const el = getUserNotification(dftAttrs);
-        const impl = el.implementation_;
+        const impl = await el.getImpl(false);
         const elementId = 'elementId';
         const ampUserId = '1';
         const request = impl.buildPostDismissRequest_(
@@ -720,11 +720,11 @@ describes.realWin(
     });
 
     describe('buildGetHref_', () => {
-      it('should do url replacement', () => {
+      it('should do url replacement', async () => {
         dftAttrs['data-show-if-href'] =
           'https://www.ampproject.org/path/?ord=RANDOM';
         const el = getUserNotification(dftAttrs);
-        const impl = el.implementation_;
+        const impl = await el.getImpl(false);
         impl.buildCallback();
         return impl.buildGetHref_('12345').then((href) => {
           const value = href.match(/\?ord=(.*)$/)[1];
@@ -733,9 +733,9 @@ describes.realWin(
         });
       });
 
-      it('should build a valid url', () => {
+      it('should build a valid url', async () => {
         const el = getUserNotification(dftAttrs);
-        const impl = el.implementation_;
+        const impl = await el.getImpl(false);
         impl.buildCallback();
         return impl.buildGetHref_('12345').then((href) => {
           expect(href).to.equal(
@@ -846,9 +846,9 @@ describes.realWin(
         optOutOfCidStub = env.sandbox.spy(cidMock, 'optOut');
       });
 
-      it.skip('should call cid.optOut() and dismiss', () => {
+      it.skip('should call cid.optOut() and dismiss', async () => {
         const element = getUserNotification({id: 'n1'});
-        const impl = element.implementation_;
+        const impl = await element.getImpl(false);
         impl.buildCallback();
         optoutPromise = Promise.resolve();
         impl.getCidService_ = () => {
@@ -862,13 +862,13 @@ describes.realWin(
         });
       });
 
-      it.skip('should dismiss without persistence if cid.optOut() fails', () => {
+      it.skip('should dismiss without persistence if cid.optOut() fails', async () => {
         expectAsyncConsoleError(
           '[amp-user-notification] Failed to opt out of Cid failed'
         );
 
         const element = getUserNotification({id: 'n1'});
-        const impl = element.implementation_;
+        const impl = await element.getImpl(false);
         impl.buildCallback();
         optoutPromise = Promise.reject('failed');
         impl.getCidService_ = () => {
diff --git a/extensions/amp-user-notification/OWNERS b/extensions/amp-user-notification/OWNERS
index 72f2e2e8f330d..d2c98ffdb7d5d 100644
--- a/extensions/amp-user-notification/OWNERS
+++ b/extensions/amp-user-notification/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'erwinmombay'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'erwinmombay'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-user-notification/amp-user-notification.md b/extensions/amp-user-notification/amp-user-notification.md
index c8954ad89df63..5585164890445 100644
--- a/extensions/amp-user-notification/amp-user-notification.md
+++ b/extensions/amp-user-notification/amp-user-notification.md
@@ -48,8 +48,6 @@ When multiple `amp-user-notification` elements are on a page, only one is shown
 at a single time (Once one is dismissed the next one is shown).
 The order of the notifications being shown is currently not deterministic.
 
-Example:
-
 ```html
 <amp-user-notification
   layout="nodisplay"
@@ -63,47 +61,73 @@ Example:
 </amp-user-notification>
 ```
 
+A notification is shown when:
+
+1. There's no record locally that the user has dismissed the notification with the
+   specified ID.
+2. When specified, `data-show-if-href` endpoint returns `{ "showNotification": true }`.
+
+When notification is dismissed:
+
+1. AMP stores the "dismiss" record locally for the specified ID. This will prevent the
+   notification from being shown again.
+2. When specified, `data-dismiss-href` is invoked and can be used to make the "dismiss"
+   record remotely.
+
+### JSON Fields
+
+-   `elementId` (string): The HTML ID used on the `amp-user-notification` element.
+-   `ampUserId` (string): This ID is passed to both the `data-show-if-href` GET request
+    (as a query string field) and the `data-dismiss-href` POST request (as a json field).
+    The ID will be the same for this user going forward, but no other requests
+    in AMP send the same ID.
+    You can use the ID on your side to lookup/store whether the user has
+    dismissed the notification before.
+-   `showNotification` (boolean): Indicates whether the notification should be shown. If `false`, the promise associated to the element is resolved right away.
+
+### Delaying Client ID generation until the notification is acknowledged
+
+Optionally, you can delay generation of Client IDs used for analytics and similar purposes until an `amp-user-notification` is confirmed by the user. See these docs for how to implement this:
+
+-   [CLIENT_ID URL substitution](../../docs/spec/amp-var-substitutions.md#client-id)
+-   [`amp-ad`](https://amp.dev/documentation/components/amp-ad)
+-   [`amp-analytics`](https://amp.dev/documentation/components/amp-analytics)
+
 ## Attributes
 
-##### data-show-if-href (optional)
+### data-show-if-href (optional)
 
 When specified, AMP will make a CORS GET request with credentials to the specified URL to determine whether the notification should be shown. AMP appends the `elementId` and `ampUserId` query string fields to the href provided
 on the `data-show-if-href` attribute (see [#1228](https://github.com/ampproject/amphtml/issues/1228) on why this is a GET instead of a POST).
 
 As a best practice to not let the browser cache the GET response values, you should add
-a [`TIMESTAMP` url replacement](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md) value to the `data-show-if-href` attribute value.
+a [`TIMESTAMP` url replacement](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md) value to the `data-show-if-href` attribute value.
 You can add it as a query string field (e.g.,
 `data-show-if-href="https://foo.com/api/show-api?timestamp=TIMESTAMP"`).
 
 If the `data-show-if-href` attribute is not specified, AMP will only check if the notification with the specified ID has been "dismissed" by the user locally. If not, the notification will be shown.
 
-{% call callout('Important', type='caution') %}
+[tip type="read-on"]
 For handling CORS requests and responses, see the [AMP CORS spec](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests).
-{% endcall %}
+[/tip]
 
 **CORS GET request** query string fields: `elementId`, `ampUserId`
 
-Example:
-
 ```http
 https://foo.com/api/show-api?timestamp=1234567890&elementId=notification1&ampUserId=cid-value
 ```
 
 **CORS GET response** JSON fields: `showNotification`. The response must contain a single JSON object with a `showNotification` field of type boolean. If this field is `true`, the notification will be shown, otherwise it won't.
 
-Example:
-
 ```json
 {"showNotification": true}
 ```
 
-##### data-show-if-geo
+### data-show-if-geo
 
 When specified `amp-user-notification` will only trigger if an `amp-geo` country group for matches one of the comma delimited list of country groups.
 
-Example:
-
-In this example if the user is located in Mexico (`mx`) the `amp-geo` will return the `nafta` country group. `nafta` is in the `data-show-if-geo` attribute so the notification will display.
+In the example below, if the user is located in Mexico (`mx`) the `amp-geo` will return the `nafta` country group. `nafta` is in the `data-show-if-geo` attribute so the notification will display.
 
 ```html
 <amp-geo layout="nodisplay">
@@ -129,12 +153,10 @@ In this example if the user is located in Mexico (`mx`) the `amp-geo` will retur
 </amp-user-notification>
 ```
 
-##### data-show-if-not-geo
+### data-show-if-not-geo
 
 This is the opposite of `data-show-if-geo`. When specified `amp-user-notification` will only trigger if the `amp-geo` country group does not match the supplied list.
 
-Example:
-
 In this example user in Mexico would not trigger the notification, but a user in an unknon country (assigned to the `whereIsWaldo` group) would trigger the notifcation.
 
 ```html
@@ -169,24 +191,22 @@ When specified, AMP will make a CORS POST request to the specified URL transmitt
 
 If this attribute is not specified, AMP will not send a request upon dismissal, and will only store the "dismissed" flag for the specified ID locally.
 
-{% call callout('Important', type='caution') %}
+[tip type="read-on"]
 For handling CORS requests and responses, see the [AMP CORS spec](https://www.ampproject.org/docs/fundamentals/amp-cors-requests).
-{% endcall %}
+[/tip]
 
 **POST request** JSON fields: `elementId`, `ampUserId`
 
 Use the `ampUserId` field to store that the user has seen the notification before, if you want to avoid showing it in the future. It's the same value that
 will be passed in future requests to `data-show-if-href`.
 
-Example:
-
 ```json
 {"elementId": "id-of-amp-user-notification", "ampUserId": "ampUserIdString"}
 ```
 
 **POST response** should be a 200 HTTP code and no data is expected back.
 
-##### data-persist-dismissal (optional)
+### data-persist-dismissal (optional)
 
 By default, this is set to `true`. If set to `false`, AMP will not remember the user's dismissal of the notification. The notification
 will always show if the `data-show-if-href` result is show notification. If no `data-show-if-href` is provided
@@ -223,12 +243,10 @@ Example 2:
 </amp-user-notification>
 ```
 
-##### enctype (optional)
+### enctype (optional)
 
 By default, this is set to `application/json;charset=utf-8`. But you can set it to `application/x-www-form-urlencoded`, AMP will send the post dismiss request using this content type instead.
 
-Example:
-
 ```html
 <amp-user-notification
   layout="nodisplay"
@@ -245,31 +263,13 @@ Example:
 </amp-user-notification>
 ```
 
-## JSON Fields
-
-- `elementId` (string): The HTML ID used on the `amp-user-notification` element.
-- `ampUserId` (string): This ID is passed to both the `data-show-if-href` GET request
-  (as a query string field) and the `data-dismiss-href` POST request (as a json field).
-  The ID will be the same for this user going forward, but no other requests
-  in AMP send the same ID.
-  You can use the ID on your side to lookup/store whether the user has
-  dismissed the notification before.
-- `showNotification` (boolean): Indicates whether the notification should be shown. If `false`, the promise associated to the element is resolved right away.
-
-## Behavior
-
-A notification is shown when:
+## Actions
 
-1. There's no record locally that the user has dismissed the notification with the
-   specified ID.
-2. When specified, `data-show-if-href` endpoint returns `{ "showNotification": true }`.
+The `amp-user-notification` exposes the following actions that you can use [AMP on-syntax to trigger](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events):
 
-When notification is dismissed:
+### dismiss (default)
 
-1. AMP stores the "dismiss" record locally for the specified ID. This will prevent the
-   notification from being shown again.
-2. When specified, `data-dismiss-href` is invoked and can be used to make the "dismiss"
-   record remotely.
+Closes the user notification.
 
 ## Styling
 
@@ -301,29 +301,6 @@ amp-user-notification.amp-active {
 }
 ```
 
-## Actions
-
-The `amp-user-notification` exposes the following actions that you can use [AMP on-syntax to trigger](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events):
-
-<table>
-  <tr>
-    <th>Action</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td>dismiss (default)</td>
-    <td>Closes the user notification; see <a href="#usage">usage</a> for more details.</td>
-  </tr>
-</table>
-
-## Delaying Client ID generation until the notification is acknowledged
-
-Optionally, you can delay generation of Client IDs used for analytics and similar purposes until an `amp-user-notification` is confirmed by the user. See these docs for how to implement this:
-
-- [CLIENT_ID URL substitution](../../spec/amp-var-substitutions.md#client-id)
-- [`amp-ad`](https://amp.dev/documentation/components/amp-ad)
-- [`amp-analytics`](https://amp.dev/documentation/components/amp-analytics)
-
 ## Validation
 
-See [amp-user-notification rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-user-notification/validator-amp-user-notification.protoascii) in the AMP validator specification.
+See [amp-user-notification rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-user-notification/validator-amp-user-notification.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-video-docking/0.1/amp-video-docking.css b/extensions/amp-video-docking/0.1/amp-video-docking.css
index 0c8068e5d17ea..70ea21d2ca0e9 100644
--- a/extensions/amp-video-docking/0.1/amp-video-docking.css
+++ b/extensions/amp-video-docking/0.1/amp-video-docking.css
@@ -116,6 +116,7 @@
 
 .amp-video-docked-shadow {
   box-shadow: 0px 0 20px 6px rgba(0, 0, 0, 0.2);
+  transition-property: transform, opacity !important;
 }
 
 .amp-video-docked-controls-bg {
@@ -153,7 +154,7 @@
 
 .amp-rtl .amp-video-docked-scroll-back {
   /* opposite direction of icon arrow */
-  /* TODO(alanorozco): Might not be worth it to keep a horizontally asymmetrical 
+  /* TODO(alanorozco): Might not be worth it to keep a horizontally asymmetrical
      icon for a simple drop shadow, consider removing drop shadow and use a
      horizontal flip CSS transform instead of another SVG definition here. */
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M-4-4h48v48H-4z'/%3E%3Cpath d='M36 0c2.2 0 4 1.8 4 4v24c0 2.2-1.8 4-4 4H12c-2.2 0-4-1.8-4-4V4c0-2.2 1.8-4 4-4h24zM16 11.868l12.618 12.618 2.829-2.828L18.789 9H27V5H12v15h4v-8.132zM4 8H0v28c0 2.2 1.8 4 4 4h28v-4H4V8z' fill='%23000' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
@@ -194,6 +195,9 @@
   transform-origin: left top !important;
 
   will-change: width, height, transition, transform, opacity;
+
+  /* Needs an arbitrary transition by default so browser won't glitch/jump. */
+  transition: 0.05s transform;
 }
 
 .i-amphtml-video-docked-overlay {
diff --git a/extensions/amp-video-docking/0.1/amp-video-docking.js b/extensions/amp-video-docking/0.1/amp-video-docking.js
index e6e8741e5b874..6dbf4cf1ac644 100644
--- a/extensions/amp-video-docking/0.1/amp-video-docking.js
+++ b/extensions/amp-video-docking/0.1/amp-video-docking.js
@@ -13,16 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {ActionTrust} from '../../../src/action-constants';
+import {ActionTrust} from '../../../src/core/constants/action-constants';
 import {CSS} from '../../../build/amp-video-docking-0.1.css';
 import {Controls} from './controls';
-import {DirectionX, DirectionY, FLOAT_TOLERANCE} from './def.js';
+import {DirectionX, DirectionY, FLOAT_TOLERANCE, RectDef} from './def';
 import {HtmlLiteralTagDef} from './html';
-import {
-  LayoutRectDef,
-  layoutRectEquals,
-  moveLayoutRect,
-} from '../../../src/layout-rect';
 import {
   PlayingStates,
   VideoAttributes,
@@ -31,11 +26,6 @@ import {
   VideoOrBaseElementDef,
   isDockable,
 } from '../../../src/video-interface';
-import {
-  PositionObserver, // eslint-disable-line no-unused-vars
-  installPositionObserverServiceForDoc,
-} from '../../../src/service/position-observer/position-observer-impl';
-import {PositionObserverFidelity} from '../../../src/service/position-observer/position-observer-worker';
 import {Services} from '../../../src/services';
 import {VideoDockingEvents, pointerCoords} from './events';
 import {applyBreakpointClassname} from './breakpoints';
@@ -51,13 +41,17 @@ import {
 import {createCustomEvent, listen, listenOnce} from '../../../src/event-helper';
 import {createViewportRect} from './viewport-rect';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {escapeCssSelectorIdent} from '../../../src/css';
+import {dict} from '../../../src/core/types/object';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {getInternalVideoElementFor} from '../../../src/utils/video';
 import {htmlFor, htmlRefs} from '../../../src/static-template';
 import {installStylesForDoc} from '../../../src/style-installer';
 import {isRTL, removeElement, scopedQuerySelector} from '../../../src/dom';
-import {once} from '../../../src/utils/function';
+import {
+  layoutRectEquals,
+  rectIntersection,
+} from '../../../src/core/math/layout-rect';
+import {once} from '../../../src/core/types/function';
 import {
   px,
   resetStyles,
@@ -139,7 +133,8 @@ let DockedDef;
 /**
  * @struct @typedef {{
  *   type: DockTargetType,
- *   rect: !LayoutRectDef,
+ *   rect: !RectDef,
+ *   slot: (!Element|undefined),
  * }}
  */
 let DockTargetDef;
@@ -247,9 +242,8 @@ const PlaceholderBackground = (html) =>
 export class VideoDocking {
   /**
    * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
-   * @param {!PositionObserver=} opt_injectedPositionObserver
    */
-  constructor(ampdoc, opt_injectedPositionObserver) {
+  constructor(ampdoc) {
     /** @private @const {!../../../src/service/ampdoc-impl.AmpDoc} */
     this.ampdoc_ = ampdoc;
 
@@ -259,7 +253,7 @@ export class VideoDocking {
     /** @private @const {!../../../src/service/viewport/viewport-interface.ViewportInterface} */
     this.viewport_ = Services.viewportForDoc(ampdoc);
 
-    /** @private @const {!LayoutRectDef} */
+    /** @private @const {!RectDef} */
     this.viewportRect_ = createViewportRect(this.viewport_);
 
     /** @private {?DockedDef} */
@@ -347,8 +341,8 @@ export class VideoDocking {
     /** @private @const {function():?Element} */
     this.findSlotOnce_ = once(() => this.findSlot_());
 
-    /** @private @const {?PositionObserver} */
-    this.injectedPositionObserver_ = opt_injectedPositionObserver || null;
+    /** @private @const {?IntersectionObserver} */
+    this.intersectionObserver_ = null;
 
     /** @private {boolean} */
     this.isTransitioning_ = false;
@@ -450,7 +444,8 @@ export class VideoDocking {
     const slot = this.getSlot_();
     if (slot) {
       // Match slot's top edge to tie transition to element.
-      return slot.getPageLayoutBox().top;
+      // TODO: Reuse a inlineRect
+      return slot./*OK*/ getBoundingClientRect().top;
     }
     return 0;
   }
@@ -459,11 +454,27 @@ export class VideoDocking {
   register(video) {
     this.install_();
 
-    const {element} = video;
-    const fidelity = PositionObserverFidelity.HIGH;
-    this.getPositionObserver_().observe(element, fidelity, () =>
-      this.updateOnPositionChange_(video)
-    );
+    if (!this.intersectionObserver_) {
+      this.intersectionObserver_ = new IntersectionObserver(
+        (entries) => {
+          // Multiple entries could belong to the same element, use only the
+          // most recent.
+          const handled = [];
+          for (let i = entries.length - 1; i >= 0; i--) {
+            const {boundingClientRect, target} = entries[i];
+            if (handled.indexOf(target) < 0) {
+              target.getImpl().then((video) => {
+                this.updateOnPositionChange_(video, boundingClientRect);
+              });
+              handled.push(target);
+            }
+          }
+        },
+        {threshold: [0, 0.1, 0.2, 0.8, 0.9, 1]}
+      );
+    }
+
+    this.intersectionObserver_.observe(video.element);
     this.observed_.push(video);
   }
 
@@ -496,7 +507,8 @@ export class VideoDocking {
    * @private
    */
   getDoc_() {
-    return /** @type {!Document} */ (this.ampdoc_.getRootNode());
+    const root = this.ampdoc_.getRootNode();
+    return /** @type {!Document} */ (root.ownerDocument || root);
   }
 
   /**
@@ -562,30 +574,17 @@ export class VideoDocking {
     return devAssert(this.currentlyDocked_).video;
   }
 
-  /**
-   * @return {!PositionObserver}
-   * @private
-   */
-  getPositionObserver_() {
-    // for testing
-    if (this.injectedPositionObserver_) {
-      return this.injectedPositionObserver_;
-    }
-
-    installPositionObserverServiceForDoc(this.ampdoc_);
-    return Services.positionObserverForDoc(this.ampdoc_.getHeadNode());
-  }
-
   /**
    * Returns the area's target when a video should be docked.
    * @param {!VideoOrBaseElementDef} video
+   * @param {!RectDef=} opt_inlineRect
    * @return {?DockTargetDef}
    * @private
    */
-  getTargetFor_(video) {
+  getTargetFor_(video, opt_inlineRect) {
     if (
       this.isDragging_ ||
-      !this.isValidSize_(video) ||
+      !this.isValidSize_(video, opt_inlineRect) ||
       this.ignoreBecauseAnotherDocked_(video) ||
       this.ignoreDueToNotPlayingManually_(video)
     ) {
@@ -593,24 +592,25 @@ export class VideoDocking {
     }
 
     const {element} = video;
-    const {intersectionRect} = element.getIntersectionChangeEntry();
-    if (!isSizedRect(intersectionRect)) {
+    const inlineRect = opt_inlineRect || element./*OK*/ getBoundingClientRect();
+    const intersectionRect = rectIntersection(inlineRect, this.viewportRect_);
+    if (!intersectionRect || !isSizedRect(intersectionRect)) {
       return null;
     }
     if (intersectionRect.top > this.getTopBoundary_()) {
       return null;
     }
-    return this.getUsableTarget_(video);
+    return this.getUsableTarget_(video, opt_inlineRect);
   }
 
   /**
    * @param {!AmpElement|!VideoOrBaseElementDef} element
-   * @return {!LayoutRectDef}
+   * @return {!inlineRect}
    * @private
    */
   getScrollAdjustedRect_(element) {
-    const dy = -this.viewport_.getScrollTop();
-    return moveLayoutRect(element.getLayoutBox(), /* dx */ 0, dy);
+    element = element.element || element;
+    return element./*OK*/ getBoundingClientRect();
   }
 
   /**
@@ -642,24 +642,26 @@ export class VideoDocking {
 
   /**
    * @param {!VideoOrBaseElementDef} video
+   * @param {!RectDef=} opt_inlineRect
    * @private
    */
-  updateOnPositionChange_(video) {
+  updateOnPositionChange_(video, opt_inlineRect) {
     if (this.isTransitioning_) {
       return;
     }
     if (this.scrollDirection_ == DirectionY.TOP) {
-      const target = this.getTargetFor_(video);
+      const target = this.getTargetFor_(video, opt_inlineRect);
       if (target) {
-        this.dockOnPositionChange_(video, target);
+        this.dockOnPositionChange_(video, target, opt_inlineRect);
       }
     } else if (this.scrollDirection_ == DirectionY.BOTTOM) {
       if (!this.currentlyDocked_) {
         return;
       }
-      const video = this.getDockedVideo_();
-      if (this.isVisible_(video, REVERT_TO_INLINE_RATIO)) {
-        this.undock_(video);
+      if (video === this.getDockedVideo_()) {
+        if (this.isVisible_(video, REVERT_TO_INLINE_RATIO, opt_inlineRect)) {
+          this.undock_(video, /* opt_reconciled */ false, opt_inlineRect);
+        }
       }
     }
   }
@@ -682,11 +684,13 @@ export class VideoDocking {
 
   /**
    * @param  {!VideoOrBaseElementDef} video
+   * @param {!RectDef=} opt_inlineRect
    * @return {boolean}
    * @private
    */
-  isValidSize_(video) {
-    const {width, height} = video.getLayoutBox();
+  isValidSize_(video, opt_inlineRect) {
+    const {height, width} =
+      opt_inlineRect || video.element./*OK*/ getBoundingClientRect();
     if (width / height < 1 - FLOAT_TOLERANCE) {
       complainAboutPortrait(video.element);
       return false;
@@ -703,8 +707,9 @@ export class VideoDocking {
    * @private
    */
   isPlaying_(optVideo = null) {
-    const video = /** @type {!VideoInterface} */ (optVideo ||
-      this.getDockedVideo_());
+    const video = /** @type {!VideoInterface} */ (
+      optVideo || this.getDockedVideo_()
+    );
     return (
       this.manager_().getPlayingState(video) == PlayingStates.PLAYING_MANUAL
     );
@@ -713,9 +718,10 @@ export class VideoDocking {
   /**
    * @param {!VideoOrBaseElementDef} video
    * @param {!DockTargetDef} target
+   * @param {!RectDef=} opt_inlineRect
    * @private
    */
-  dockOnPositionChange_(video, target) {
+  dockOnPositionChange_(video, target, opt_inlineRect) {
     if (this.ignoreDueToDismissal_(video)) {
       return;
     }
@@ -724,41 +730,31 @@ export class VideoDocking {
       return;
     }
 
-    const currentlyDocked = this.currentlyDocked_;
-
-    if (
-      currentlyDocked &&
-      currentlyDocked.step >= 0 &&
-      layoutRectEquals(currentlyDocked.target.rect, target.rect)
-    ) {
-      return;
-    }
-
-    this.dockInTransferLayerStep_(video, target);
+    this.dockInTransferLayerStep_(video, target, opt_inlineRect);
   }
 
   /**
+   * Dock this in a two-step process due to a browser quirk in transferring
+   * layers to GPU.
    * @param {!VideoOrBaseElementDef} video
    * @param {!DockTargetDef} target
-   * @param {number=} opt_step
+   * @param {!RectDef=} opt_inlineRect
    * @return {!Promise}
    * @private
    */
-  dockInTransferLayerStep_(video, target, opt_step) {
-    // Do this in a multi-step process due to a browser quirk in transferring
-    // layers to GPU.
-    const step = opt_step || 0.1;
-    // This cutoff is arbitrary and may be dependant on performance.
-    // TODO(alanorozco): Investigate.
-    if (step > 0.3) {
-      return this.dock_(video, target, /* step */ 1);
-    }
+  dockInTransferLayerStep_(video, target, opt_inlineRect) {
     const isTransferLayerStep = true;
-    return this.dock_(video, target, step, isTransferLayerStep).then(
+    return this.dock_(
+      video,
+      target,
+      /* step */ 0.05,
+      opt_inlineRect,
+      isTransferLayerStep
+    ).then(
       () =>
         new Promise((resolve) => {
           this.raf_(() => {
-            this.dockInTransferLayerStep_(video, target, step + 0.1).then(
+            this.dock_(video, target, /* step */ 1, opt_inlineRect).then(
               resolve
             );
           });
@@ -770,11 +766,12 @@ export class VideoDocking {
    * @param {!VideoOrBaseElementDef} video
    * @param {!DockTargetDef} target
    * @param {number} step
+   * @param {!RectDef=} opt_inlineRect
    * @param {boolean=} opt_isTransferLayerStep
    * @return {!Promise}
    * @private
    */
-  dock_(video, target, step, opt_isTransferLayerStep) {
+  dock_(video, target, step, opt_inlineRect, opt_isTransferLayerStep) {
     const {element} = video;
 
     // Component background is now visible, so hide the poster for the Android
@@ -783,7 +780,12 @@ export class VideoDocking {
     // TODO(alanorozco): Make docking agnostic to this workaround.
     this.removePosterForAndroidBug_(element);
 
-    const {x, y, scale, relativeX} = this.getDims_(video, target, step);
+    const {relativeX, scale, x, y} = this.getDims_(
+      video,
+      target,
+      step,
+      opt_inlineRect
+    );
 
     video.hideControls();
 
@@ -798,7 +800,8 @@ export class VideoDocking {
       scale,
       step,
       transitionDurationMs,
-      relativeX
+      relativeX,
+      opt_inlineRect
     ).then(() => {
       if (opt_isTransferLayerStep) {
         // Do not enable controls during transfer layer steps, which would
@@ -811,11 +814,14 @@ export class VideoDocking {
 
   /**
    * @param {!Actions} action
+   * @param {!DockTargetDef=} opt_target
    * @private
    */
-  trigger_(action) {
+  trigger_(action, opt_target) {
     const element = dev().assertElement(
-      this.getSlot_() || this.getDockedVideo_().element
+      (opt_target && opt_target.slot) ||
+        this.getSlot_() ||
+        this.getDockedVideo_().element
     );
 
     const trust = ActionTrust.LOW;
@@ -837,6 +843,7 @@ export class VideoDocking {
     if (this.lastDismissed_ != video) {
       return false;
     }
+    // TODO: Reuse a inlineRect
     if (this.isVisible_(video.element, FLOAT_TOLERANCE)) {
       this.resetDismissed_();
     }
@@ -848,27 +855,6 @@ export class VideoDocking {
     this.lastDismissed_ = null;
   }
 
-  /**
-   * @param {!AmpElement|!VideoOrBaseElementDef} element
-   * @return {number}
-   * @private
-   */
-  calculateIntersectionRatio_(element) {
-    const inlineRect = this.getScrollAdjustedRect_(element);
-
-    // If the component's box is way out of view, the runtime might have
-    // discarded its size values.
-    if (!isSizedRect(inlineRect)) {
-      return 0;
-    }
-
-    const intersectionHeight =
-      Math.min(inlineRect.bottom, this.viewportRect_.bottom) -
-      Math.max(inlineRect.top, this.viewportRect_.top);
-
-    return Math.max(0, intersectionHeight / inlineRect.height);
-  }
-
   /**
    * @param {number} step
    * @return {number}
@@ -907,24 +893,38 @@ export class VideoDocking {
    * @param {number} step in [0..1]
    * @param {number} transitionDurationMs
    * @param {DirectionX=} opt_relativeX
+   * @param {!RectDef=} opt_inlineRect
+   * @param {string=} position
    * @return {!Promise}
    * @private
    */
-  placeAt_(video, x, y, scale, step, transitionDurationMs, opt_relativeX) {
+  placeAt_(
+    video,
+    x,
+    y,
+    scale,
+    step,
+    transitionDurationMs,
+    opt_relativeX,
+    opt_inlineRect,
+    position = 'fixed'
+  ) {
     if (this.alreadyPlacedAt_(x, y, scale)) {
       return Promise.resolve();
     }
 
     this.isTransitioning_ = true;
 
-    const {width, height} = video.getLayoutBox();
+    const {element} = video;
+    const inlineRect =
+      opt_inlineRect || video.element./*OK*/ getBoundingClientRect();
+
+    const {height, width} = inlineRect;
 
     this.placedAt_ = {x, y, scale};
 
     const transitionTiming = step > 0 ? 'ease-out' : 'ease-in';
 
-    const {element} = video;
-
     const internalElement = getInternalVideoElementFor(element);
     const shadowLayer = this.getShadowLayer_();
     const {overlay} = this.getControls_();
@@ -973,9 +973,8 @@ export class VideoDocking {
         'transition-timing-function': transitionTiming,
       });
 
-    const isSmallPlaceholderIcon = placeholderIcon.classList.contains(
-      'amp-small'
-    );
+    const isSmallPlaceholderIcon =
+      placeholderIcon.classList.contains('amp-small');
 
     const placeholderIconWidth = isSmallPlaceholderIcon
       ? PLACEHOLDER_ICON_SMALL_WIDTH
@@ -1034,12 +1033,39 @@ export class VideoDocking {
         });
       });
 
-      this.getElementsOnDockArea_(video).forEach((el) => {
-        setImportantStyles(el, {
+      // To re-orient position: absolute elements since they're no longer
+      // relative to viewport rect.
+      let offsetLeft = 0;
+      let offsetTop = 0;
+
+      // Body-level elements that do not descend from the <amp-video> element,
+      // like the shadow layer, need to be additionally offset by the inline
+      // element's position relative to the body.
+      let bodyLevelOffsetLeft = 0;
+      let bodyLevelOffsetTop = 0;
+
+      if (position === 'absolute') {
+        offsetLeft = inlineRect.left;
+        offsetTop = inlineRect.top;
+        bodyLevelOffsetLeft = element./*OK*/ offsetLeft;
+        bodyLevelOffsetTop = element./*OK*/ offsetTop;
+      }
+
+      this.getElementsOnDockArea_(video).forEach((element) => {
+        const bodyLevelOffsetFactor = Number(element !== internalElement);
+
+        const left = bodyLevelOffsetFactor * bodyLevelOffsetLeft - offsetLeft;
+        const top = bodyLevelOffsetFactor * bodyLevelOffsetTop - offsetTop;
+
+        setImportantStyles(element, {
+          'position': position,
+          'left': px(left),
+          'top': px(top),
           'transform': transform(x, y, scale),
         });
-        setTransitionTiming(el);
-        maybeSetSizing(el);
+
+        setTransitionTiming(element);
+        maybeSetSizing(element);
       });
 
       setOpacity(shadowLayer);
@@ -1062,41 +1088,6 @@ export class VideoDocking {
     return Services.timerFor(this.ampdoc_.win);
   }
 
-  /**
-   * @param {!VideoOrBaseElementDef} video
-   * @return {!Promise|undefined}
-   * @private
-   */
-  maybeUpdateStaleYAfterScroll_(video) {
-    if (!this.placedAt_) {
-      return;
-    }
-
-    const {x, y, scale} = this.placedAt_;
-    const {top: fixedScrollTop} = this.getScrollAdjustedRect_(video);
-
-    if (y == fixedScrollTop) {
-      return;
-    }
-
-    const maxTransitionDurationMs = 150;
-    const tentativeTransitionDurationMs = Math.abs(y - fixedScrollTop) / 2;
-
-    const transitionDurationMs = Math.min(
-      maxTransitionDurationMs,
-      tentativeTransitionDurationMs
-    );
-
-    return this.placeAt_(
-      video,
-      x,
-      fixedScrollTop,
-      scale,
-      /* step */ 0,
-      transitionDurationMs
-    );
-  }
-
   /**
    * @param {!VideoOrBaseElementDef} video
    * @return {!Array<!Element>}
@@ -1170,7 +1161,7 @@ export class VideoDocking {
       return;
     }
     this.getControls_().setVideo(video, target.rect);
-    this.trigger_(Actions.DOCK);
+    this.trigger_(Actions.DOCK, target);
   }
 
   /**
@@ -1184,7 +1175,7 @@ export class VideoDocking {
     const step = 1;
     const transitionDurationMs = 0;
 
-    const {x, y, scale} = this.getDims_(video, target, step);
+    const {scale, x, y} = this.getDims_(video, target, step);
     const centerX = this.getCenterX_(offsetX);
     const directionX = this.calculateDirectionX_(centerX);
 
@@ -1205,10 +1196,27 @@ export class VideoDocking {
   /**
    * @param {!AmpElement|!VideoOrBaseElementDef} element
    * @param {number=} minRatio
+   * @param {!RectDef=} opt_inlineRect
    * @return {boolean}
    */
-  isVisible_(element, minRatio = 1) {
-    const intersectionRatio = this.calculateIntersectionRatio_(element);
+  isVisible_(element, minRatio = 1, opt_inlineRect) {
+    const inlineRect = opt_inlineRect || this.getScrollAdjustedRect_(element);
+
+    // If the component's box is way out of view, the runtime might have
+    // discarded its size values.
+    if (!isSizedRect(inlineRect)) {
+      return 0;
+    }
+
+    const intersectionHeight =
+      Math.min(inlineRect.bottom, this.viewportRect_.bottom) -
+      Math.max(inlineRect.top, this.viewportRect_.top);
+
+    const intersectionRatio = Math.max(
+      0,
+      intersectionHeight / inlineRect.height
+    );
+
     return intersectionRatio > minRatio - FLOAT_TOLERANCE;
   }
 
@@ -1374,6 +1382,7 @@ export class VideoDocking {
 
     video.pause();
 
+    // TODO: Reuse a inlineRect
     if (this.isVisible_(video, 0.2)) {
       this.bounceToDismiss_(video, offsetX, direction);
       return;
@@ -1381,7 +1390,7 @@ export class VideoDocking {
 
     const step = 1;
     const {target} = devAssert(this.currentlyDocked_);
-    const {x, y, width} = target.rect;
+    const {width, x, y} = target.rect;
     const {scale} = this.getDims_(video, target, step);
 
     const currentX = x + offsetX;
@@ -1423,7 +1432,7 @@ export class VideoDocking {
     const step = 1;
     const {target} = devAssert(this.currentlyDocked_);
 
-    const {x, y, width} = target.rect;
+    const {width, x, y} = target.rect;
     const {scale} = this.getDims_(video, target, step);
 
     const outerWidth = this.viewportRect_.width;
@@ -1448,6 +1457,7 @@ export class VideoDocking {
       /* step */ 0,
       transitionDurationMs
     ).then(() => {
+      // TODO: Reuse a inlineRect
       this.undock_(video, /* reconciled */ true);
       video.showControls();
     });
@@ -1469,10 +1479,10 @@ export class VideoDocking {
    * @private
    */
   getCenterX_(offsetX) {
-    const {target, step} = this.currentlyDocked_;
+    const {step, target} = this.currentlyDocked_;
     const video = this.getDockedVideo_();
-    const {width} = video.getLayoutBox();
-    const {x, scale} = this.getDims_(video, target, step);
+    const {width} = video.element./*OK*/ getBoundingClientRect();
+    const {scale, x} = this.getDims_(video, target, step);
     return x + offsetX + (width * scale) / 2;
   }
 
@@ -1487,11 +1497,12 @@ export class VideoDocking {
     const directionX = this.calculateDirectionX_(offsetX);
     this.cornerDirectionX_ = directionX;
 
+    // TODO: Reuse inlineRect
     const target = this.getUsableTarget_(video);
 
     this.currentlyDocked_.target = target;
 
-    const {x, y, scale} = this.getDims_(video, target, step);
+    const {scale, x, y} = this.getDims_(video, target, step);
 
     this.placeAt_(
       video,
@@ -1519,11 +1530,12 @@ export class VideoDocking {
    * @param {!VideoOrBaseElementDef} video
    * @param {!DockTargetDef} target
    * @param {number} step in [0..1]
+   * @param {!RectDef} opt_inlineRect
    * @return {{x: number, y: number, scale: number, relativeX: !DirectionX}}
    */
-  getDims_(video, target, step) {
+  getDims_(video, target, step, opt_inlineRect) {
     return interpolatedBoxesTransform(
-      this.getScrollAdjustedRect_(video),
+      opt_inlineRect || this.getScrollAdjustedRect_(video),
       target.rect,
       step
     );
@@ -1532,11 +1544,16 @@ export class VideoDocking {
   /**
    * @param {!VideoOrBaseElementDef} video
    * @param {boolean=} opt_reconciled
+   * @param {!RectDef=} opt_inlineRect
    * @return {!Promise}
    * @private
    */
-  undock_(video, opt_reconciled) {
-    const isMostlyInView = this.isVisible_(video, REVERT_TO_INLINE_RATIO);
+  undock_(video, opt_reconciled, opt_inlineRect) {
+    const isMostlyInView = this.isVisible_(
+      video,
+      REVERT_TO_INLINE_RATIO,
+      opt_inlineRect
+    );
 
     if (!isMostlyInView) {
       video.pause();
@@ -1555,7 +1572,7 @@ export class VideoDocking {
 
     const {target} = devAssert(this.currentlyDocked_);
 
-    const {x, y, scale, relativeX} = this.getDims_(video, target, step);
+    const {relativeX, scale, x, y} = this.getDims_(video, target, step);
 
     // Do not animate transition if video is out-of-view. Chrome glitches
     // when pausing an out-of-view video, so we need to show controls and
@@ -1572,13 +1589,13 @@ export class VideoDocking {
       scale,
       step,
       transitionDurationMs,
-      relativeX
-    )
-      .then(() => this.maybeUpdateStaleYAfterScroll_(video))
-      .then(() => {
-        video.showControls();
-        this.resetOnUndock_(video);
-      });
+      relativeX,
+      opt_inlineRect,
+      /* position */ 'absolute'
+    ).then(() => {
+      video.showControls();
+      this.resetOnUndock_(video);
+    });
   }
 
   /** @private */
@@ -1625,6 +1642,9 @@ export class VideoDocking {
           'height',
           'opacity',
           'overflow',
+          'position',
+          'left',
+          'top',
         ]);
       });
 
@@ -1666,17 +1686,20 @@ export class VideoDocking {
    * Otherwise returns a rectangle calculated relative to viewport and sticking
    * to the horizontal `directionX`.
    * @param {!AmpElement|!VideoOrBaseElementDef} video
+   * @param {!RectDef=} opt_inlineRect
    * @return {!DockTargetDef}
    * @private
    */
-  getUsableTarget_(video) {
+  getUsableTarget_(video, opt_inlineRect) {
     const slot = this.getSlot_();
-    const inlineRect = video.getLayoutBox();
+    const inlineRect =
+      opt_inlineRect || video.element./*OK*/ getBoundingClientRect();
 
     if (slot) {
       return {
         type: DockTargetType.SLOT,
-        rect: letterboxRect(inlineRect, slot.getPageLayoutBox()),
+        rect: letterboxRect(inlineRect, slot./*OK*/ getBoundingClientRect()),
+        slot,
       };
     }
 
diff --git a/extensions/amp-video-docking/0.1/controls.js b/extensions/amp-video-docking/0.1/controls.js
index 06da4233c32f6..f56f3250d63e4 100644
--- a/extensions/amp-video-docking/0.1/controls.js
+++ b/extensions/amp-video-docking/0.1/controls.js
@@ -27,8 +27,8 @@ import {
 import {createCustomEvent, listen} from '../../../src/event-helper';
 import {dev, devAssert} from '../../../src/log';
 import {htmlFor, htmlRefs} from '../../../src/static-template';
-import {layoutRectLtwh} from '../../../src/layout-rect';
-import {once} from '../../../src/utils/function';
+import {layoutRectLtwh} from '../../../src/core/math/layout-rect';
+import {once} from '../../../src/core/types/function';
 import {
   resetStyles,
   setImportantStyles,
@@ -340,7 +340,7 @@ export class Controls {
 
   /** @private */
   onPlay_() {
-    const {playButton_, pauseButton_} = this;
+    const {pauseButton_, playButton_} = this;
     this.isSticky_ = false;
     swap(playButton_, pauseButton_);
   }
@@ -360,7 +360,7 @@ export class Controls {
 
   /** @private */
   onUnmute_() {
-    const {unmuteButton_, muteButton_} = this;
+    const {muteButton_, unmuteButton_} = this;
     swap(unmuteButton_, muteButton_);
   }
 
@@ -529,7 +529,7 @@ export class Controls {
       devAssert(this.area_);
 
       const {x, y} = pointerCoords(/** @type {!MouseEvent} */ (e));
-      const {left, top, right, bottom} = this.area_;
+      const {bottom, left, right, top} = this.area_;
 
       // check bounding box as not to trigger this while mouse hovers over
       // buttons
@@ -556,7 +556,7 @@ export class Controls {
 
   /** @public */
   reset() {
-    const {overlay, container} = this;
+    const {container, overlay} = this;
     const els = [overlay, container];
 
     toggle(overlay, false);
diff --git a/extensions/amp-video-docking/0.1/def.js b/extensions/amp-video-docking/0.1/def.js
index d3ca582dd3e4a..c82d87025e564 100644
--- a/extensions/amp-video-docking/0.1/def.js
+++ b/extensions/amp-video-docking/0.1/def.js
@@ -14,6 +14,12 @@
  * limitations under the License.
  */
 
+/**
+ * These are interchangeable.
+ * @typedef {!ClientRect|!../../../src/layout-rect.LayoutRectDef}
+ */
+export let RectDef;
+
 /** @enum {string} */
 export const DirectionX = {LEFT: 'left', RIGHT: 'right'};
 
diff --git a/extensions/amp-video-docking/0.1/math.js b/extensions/amp-video-docking/0.1/math.js
index 3b948ef61e7fe..57faaf5378450 100644
--- a/extensions/amp-video-docking/0.1/math.js
+++ b/extensions/amp-video-docking/0.1/math.js
@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {DirectionX} from './def';
-import {LayoutRectDef, layoutRectLtwh} from '../../../src/layout-rect';
-import {mapRange} from '../../../src/utils/math.js';
+import {DirectionX, RectDef} from './def';
+import {layoutRectLtwh} from '../../../src/core/math/layout-rect';
+import {mapRange} from '../../../src/core/math';
 
 /**
  * @param {number} containerWidth
@@ -76,8 +76,8 @@ const mapStep = (step, min, max) => mapRange(step, 0, 1, min, max);
 
 /**
  * Provides offset coords to interpolate `from` rect `to` rect.
- * @param {!LayoutRectDef} from
- * @param {!LayoutRectDef} to
+ * @param {!RectDef} from
+ * @param {!RectDef} to
  * @param {number=} step  in [0..1]
  * @return {{x: number, y: number, scale: number, relativeX: !DirectionX}}
  *  - x is offset from the original box in pixels.
@@ -95,13 +95,13 @@ export function interpolatedBoxesTransform(from, to, step = 1) {
 
 /**
  * Scales, fits and centers `original` into `container`.
- * @param {!LayoutRectDef} original
- * @param {!LayoutRectDef} container
- * @return {!LayoutRectDef}
+ * @param {!RectDef} original
+ * @param {!RectDef} container
+ * @return {!RectDef}
  */
 export function letterboxRect(original, container) {
-  const {width, height} = original;
-  const {top, left, width: maxWidth, height: maxHeight} = container;
+  const {height, width} = original;
+  const {height: maxHeight, left, top, width: maxWidth} = container;
 
   const containerAspect = maxWidth / maxHeight;
   const originalAspect = width / height;
@@ -122,14 +122,14 @@ export function letterboxRect(original, container) {
 }
 
 /**
- * @param {!LayoutRectDef} original
- * @param {!LayoutRectDef} container
+ * @param {!RectDef} original
+ * @param {!RectDef} container
  * @param {DirectionX} horizontalEdge
  * @param {number} widthRatio
  * @param {number} widthMin
  * @param {number} marginRatio
  * @param {number} marginMax
- * @return {!LayoutRectDef}
+ * @return {!RectDef}
  */
 export function topCornerRect(
   original,
@@ -163,10 +163,10 @@ export function topCornerRect(
  * @return {boolean}
  */
 export const isVisibleBySize = (element) =>
-  isSizedRect(element.getPageLayoutBox());
+  isSizedRect(element./*OK*/ getBoundingClientRect());
 
 /**
- * @param {!LayoutRectDef|!ClientRect|!DOMRect} rect
+ * @param {!RectDef} rect
  * @return {boolean}
  */
 export const isSizedRect = (rect) => rect.width > 0 && rect.height > 0;
diff --git a/extensions/amp-video-docking/0.1/test/test-amp-video-docking.js b/extensions/amp-video-docking/0.1/test/test-amp-video-docking.js
index 632f07eaf3f03..dbdeb9ce294ac 100644
--- a/extensions/amp-video-docking/0.1/test/test-amp-video-docking.js
+++ b/extensions/amp-video-docking/0.1/test/test-amp-video-docking.js
@@ -30,15 +30,16 @@ import {
   VideoDocking,
   getPosterImageSrc,
 } from '../amp-video-docking';
-import {Deferred, tryResolve} from '../../../../src/utils/promise';
+import {
+  Deferred,
+  tryResolve,
+} from '../../../../src/core/data-structures/promise';
 import {DirectionX, DirectionY} from '../def.js';
 import {PlayingStates} from '../../../../src/video-interface';
 import {Services} from '../../../../src/services';
 import {createElementWithAttributes} from '../../../../src/dom';
 import {htmlFor} from '../../../../src/static-template';
-import {layoutRectLtwh} from '../../../../src/layout-rect';
-
-const noop = () => {};
+import {layoutRectLtwh} from '../../../../src/core/math/layout-rect';
 
 const slotId = 'my-slot-element';
 
@@ -56,16 +57,13 @@ describes.realWin('video docking', {amp: true}, (env) => {
   function createAmpElementMock(tag = 'div', attrs = {}) {
     const element = createElementWithAttributes(env.win.document, tag, attrs);
     const defaultLayoutRect = layoutRectLtwh(0, 0, 0, 0);
-    Object.assign(element, {
-      getIntersectionChangeEntry: noop,
-      getLayoutBox: () => defaultLayoutRect,
-    });
-    return {
+    const impl = {
       element,
-      getLayoutBox: () => defaultLayoutRect,
       mutateElement: (cb) => tryResolve(cb),
       applyFillContent: env.sandbox.spy(),
     };
+    stubLayoutBox(impl, defaultLayoutRect);
+    return impl;
   }
 
   function createVideo() {
@@ -93,13 +91,14 @@ describes.realWin('video docking', {amp: true}, (env) => {
   }
 
   function stubLayoutBox(impl, rect) {
-    impl.getLayoutBox = () => rect;
-    impl.getPageLayoutBox = impl.getLayoutBox;
-    impl.element.getLayoutBox = impl.getLayoutBox;
-    impl.element.getPageLayoutBox = impl.getLayoutBox;
-    impl.element.getIntersectionChangeEntry = () => ({
-      intersectionRect: rect,
-    });
+    let stub = impl.element.__stubBoundingClientRect;
+    if (!stub) {
+      stub = impl.element.__stubBoundingClientRect = env.sandbox.stub(
+        impl.element,
+        'getBoundingClientRect'
+      );
+    }
+    stub.returns(rect);
   }
 
   function setValidAreaWidth() {
@@ -192,9 +191,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
     env.sandbox.stub(Services, 'viewportForDoc').returns(viewport);
     env.sandbox.stub(Services, 'videoManagerForDoc').returns(manager);
 
-    const positionObserverMock = {};
-
-    docking = new VideoDocking(ampdoc, positionObserverMock);
+    docking = new VideoDocking(ampdoc);
 
     env.sandbox.stub(docking, 'getTimer_').returns({
       promise: () => Promise.resolve(),
@@ -295,8 +292,8 @@ describes.realWin('video docking', {amp: true}, (env) => {
       enableComputedStyle(video.element);
       enableComputedStyle(overlay);
 
-      const width = 400;
-      const height = 300;
+      const expectedWidth = 400;
+      const expectedHeight = 300;
 
       const x = 30;
       const y = 60;
@@ -304,7 +301,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
       const step = 1;
       const transitionDurationMs = 200;
 
-      placeElementLtwh(video, 0, 0, width, height);
+      placeElementLtwh(video, 0, 0, expectedWidth, expectedHeight);
 
       await docking.placeAt_(video, x, y, scale, step, transitionDurationMs);
 
@@ -313,13 +310,13 @@ describes.realWin('video docking', {amp: true}, (env) => {
       const expectedTransform = transformMatrix(x, y, scale);
 
       [internalElement, overlay, shadow].forEach((el) => {
-        expect(getComputedStyle(el)).to.include({
-          'transform': expectedTransform,
-          'width': width + 'px',
-          'min-width': width + 'px',
-          'height': height + 'px',
-          'min-height': height + 'px',
-        });
+        const {height, minHeight, minWidth, transform, width} =
+          getComputedStyle(el);
+        expect(transform).to.equal(expectedTransform);
+        expect(width).to.equal(expectedWidth + 'px');
+        expect(minWidth).to.equal(expectedWidth + 'px');
+        expect(height).to.equal(expectedHeight + 'px');
+        expect(minHeight).to.equal(expectedHeight + 'px');
       });
     });
 
@@ -402,7 +399,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
     [
       {step: 0, fn: 'ease-in'},
       {step: 1, fn: 'ease-out'},
-    ].forEach(({step, fn}) => {
+    ].forEach(({fn, step}) => {
       it(`sets transition timing on elements for step = ${step}`, async () => {
         const {overlay} = stubControls();
 
@@ -433,7 +430,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
       });
     });
 
-    PLACEHOLDER_ICON_BREAKPOINTS.forEach(({minWidth, className}) => {
+    PLACEHOLDER_ICON_BREAKPOINTS.forEach(({className, minWidth}) => {
       const width = Math.max(200, minWidth);
 
       const iconMargin =
@@ -486,7 +483,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
           relativeXTextual: 'left',
           expectedIconX: -width + iconWidth + iconMargin * 2,
         },
-      ].forEach(({relativeX, relativeXTextual, expectedIconX}) => {
+      ].forEach(({expectedIconX, relativeX, relativeXTextual}) => {
         it(`translates placeholder icon horizontally for posX=${relativeXTextual} in threshold for .${className}`, async () => {
           stubControls();
           enableComputedStyle(video.element);
@@ -521,6 +518,85 @@ describes.realWin('video docking', {amp: true}, (env) => {
           expect(computedStyle['transform']).to.equal(expectedTransformMatrix);
         });
       });
+
+      it('sets position', async () => {
+        stubControls();
+        enableComputedStyle(video.element);
+
+        const offsetLeft = 12;
+        const offsetTop = 24;
+
+        placeElementLtwh(video, offsetLeft, offsetTop, width, 200);
+
+        await docking.placeAt_(
+          video,
+          /* x */ 52,
+          /* y */ 10,
+          /* scale */ 0.5,
+          /* step */ 0,
+          /* transitionDurationMs */ 300,
+          DirectionX.RIGHT,
+          /* opt_clientRect */ undefined,
+          'sticky'
+        );
+
+        const computedStyle = getComputedStyle(internalElement);
+        expect(computedStyle['position']).to.equal('sticky');
+      });
+
+      it('offsets position: absolute elements', async () => {
+        stubControls();
+        enableComputedStyle(video.element);
+
+        const offsetLeft = 12;
+        const offsetTop = 24;
+
+        placeElementLtwh(video, offsetLeft, offsetTop, width, 200);
+
+        await docking.placeAt_(
+          video,
+          /* x */ 52,
+          /* y */ 10,
+          /* scale */ 0.5,
+          /* step */ 0,
+          /* transitionDurationMs */ 300,
+          DirectionX.RIGHT,
+          /* opt_clientRect */ undefined,
+          'absolute'
+        );
+
+        const computedStyle = getComputedStyle(internalElement);
+        expect(computedStyle['position']).to.equal('absolute');
+        expect(computedStyle['left']).to.equal(`${-offsetLeft}px`);
+        expect(computedStyle['top']).to.equal(`${-offsetTop}px`);
+      });
+
+      it('does not offset position: fixed elements', async () => {
+        stubControls();
+        enableComputedStyle(video.element);
+
+        const offsetLeft = 12;
+        const offsetTop = 24;
+
+        placeElementLtwh(video, offsetLeft, offsetTop, width, 200);
+
+        await docking.placeAt_(
+          video,
+          /* x */ 52,
+          /* y */ 10,
+          /* scale */ 0.5,
+          /* step */ 0,
+          /* transitionDurationMs */ 300,
+          DirectionX.RIGHT,
+          /* opt_clientRect */ undefined,
+          'fixed'
+        );
+
+        const computedStyle = getComputedStyle(internalElement);
+        expect(computedStyle['position']).to.equal('fixed');
+        expect(computedStyle['left']).to.equal('0px');
+        expect(computedStyle['top']).to.equal('0px');
+      });
     });
 
     [
@@ -534,7 +610,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
         directionTextual: 'right to left',
         hasAmpRtl: true,
       },
-    ].forEach(({relativeX, directionTextual, hasAmpRtl}) => {
+    ].forEach(({directionTextual, hasAmpRtl, relativeX}) => {
       const setsOrUnsets = hasAmpRtl ? 'sets' : 'unsets';
 
       it(
@@ -665,7 +741,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
         posXTextual: 'left',
         expectedXFn: (unusedVw, margin, unusedWidth) => margin,
       },
-    ].forEach(({posX, posXTextual, expectedXFn}) => {
+    ].forEach(({expectedXFn, posX, posXTextual}) => {
       const videoWidth = 600;
       const videoHeight = 400;
 
@@ -688,7 +764,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
 
         mockAreaHeight(200);
 
-        const {width, height} = docking.getTargetAreaFromPos_(
+        const {height, width} = docking.getTargetAreaFromPos_(
           video,
           posX,
           DirectionY.TOP
@@ -769,7 +845,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
 
       env.sandbox.stub(docking.viewport_, 'getScrollTop').returns(scrollTop);
 
-      const {x, y, width, height} = docking.getTargetAreaFromSlot_(
+      const {height, width, x, y} = docking.getTargetAreaFromSlot_(
         video,
         slot.element
       );
@@ -812,7 +888,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
 
       env.sandbox.stub(docking.viewport_, 'getScrollTop').returns(scrollTop);
 
-      const {x, y, width, height} = docking.getTargetAreaFromSlot_(
+      const {height, width, x, y} = docking.getTargetAreaFromSlot_(
         video,
         slot.element
       );
@@ -856,7 +932,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
 
       env.sandbox.stub(docking.viewport_, 'getScrollTop').returns(scrollTop);
 
-      const {x, y, width, height} = docking.getTargetAreaFromSlot_(
+      const {height, width, x, y} = docking.getTargetAreaFromSlot_(
         video,
         slot.element
       );
@@ -897,16 +973,16 @@ describes.realWin('video docking', {amp: true}, (env) => {
 
     it('returns starting position for step = 0', () => {
       const step = 0;
-      const {x, y, scale} = docking.getDims_(video, target, step);
+      const {scale, x, y} = docking.getDims_(video, target, step);
 
       expect(x, 'x').to.equal(videoX);
-      expect(y, 'y').to.equal(videoY - scrollTop);
+      expect(y, 'y').to.equal(videoY);
       expect(scale, 'scale').to.equal(1);
     });
 
     it('returns final position for step = 1', () => {
       const step = 1;
-      const {x, y, scale} = docking.getDims_(video, target, step);
+      const {scale, x, y} = docking.getDims_(video, target, step);
 
       expect(x, 'x').to.equal(targetX);
       expect(y, 'y').to.equal(targetY);
@@ -926,7 +1002,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
         videoX: 10,
         targetX: 0,
       },
-    ].forEach(({expectedRelativeX, placementTextual, videoX, targetX}) => {
+    ].forEach(({expectedRelativeX, placementTextual, targetX, videoX}) => {
       it(
         `returns relativeX=${placementTextual.toUpperCase()} when target ` +
           `placed ${placementTextual} of component`,
@@ -986,7 +1062,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
 
       await docking.dock_(video, target, step);
 
-      const {x, y, scale, relativeX} = targetDims;
+      const {relativeX, scale, x, y} = targetDims;
 
       expect(
         placeAt.withArgs(
@@ -1018,7 +1094,13 @@ describes.realWin('video docking', {amp: true}, (env) => {
     it('does not enable docked controls if transferring layer', async () => {
       const {enable} = stubControls();
 
-      await docking.dock_(video, target, step, /* isTransferLayerStep */ true);
+      await docking.dock_(
+        video,
+        target,
+        step,
+        /* clientRect */ undefined,
+        /* isTransferLayerStep */ true
+      );
 
       expect(enable).to.not.have.been.called;
     });
@@ -1095,7 +1177,6 @@ describes.realWin('video docking', {amp: true}, (env) => {
     let trigger;
     let resetOnUndock;
     let placeAt;
-    let maybeUpdateStaleYAfterScroll;
 
     const targetDims = {x: 20, y: 10, scale: 0.5, relativeX: DirectionX.RIGHT};
 
@@ -1106,9 +1187,6 @@ describes.realWin('video docking', {amp: true}, (env) => {
 
       trigger = env.sandbox.stub(docking, 'trigger_');
       resetOnUndock = env.sandbox.stub(docking, 'resetOnUndock_');
-      maybeUpdateStaleYAfterScroll = env.sandbox
-        .stub(docking, 'maybeUpdateStaleYAfterScroll_')
-        .returns(Promise.resolve());
 
       placeAt = env.sandbox
         .stub(docking, 'placeAt_')
@@ -1130,22 +1208,21 @@ describes.realWin('video docking', {amp: true}, (env) => {
       expect(trigger.withArgs(Actions.UNDOCK)).to.have.been.calledOnce;
     });
 
-    it('updates stale Y after undock', async () => {
-      const {promise, resolve} = new Deferred();
-
-      placeAt.returns(promise);
-
-      const done = docking.undock_(video);
-
-      expect(maybeUpdateStaleYAfterScroll.withArgs(video)).to.not.have.been
-        .called;
-
-      resolve();
-
-      await done;
-
-      expect(maybeUpdateStaleYAfterScroll.withArgs(video)).to.have.been
-        .calledOnce;
+    it('sets position: absolute on undock', async () => {
+      await docking.undock_(video);
+      expect(
+        placeAt.withArgs(
+          video,
+          env.sandbox.match.any,
+          env.sandbox.match.any,
+          env.sandbox.match.any,
+          env.sandbox.match.any,
+          env.sandbox.match.any,
+          env.sandbox.match.any,
+          env.sandbox.match.any,
+          'absolute'
+        )
+      ).to.have.been.calledOnce;
     });
 
     it('resets after undock', async () => {
@@ -1165,7 +1242,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
     });
 
     it('hides and disables docked controls', async () => {
-      const {hide, disable} = stubControls();
+      const {disable, hide} = stubControls();
 
       await docking.undock_(video);
 
@@ -1178,7 +1255,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
 
       await docking.undock_(video);
 
-      const {x, y, scale, relativeX} = targetDims;
+      const {relativeX, scale, x, y} = targetDims;
 
       expect(
         placeAt.withArgs(
@@ -1330,7 +1407,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
         topBoundary: 20,
       },
     },
-    (name, {useSlot, topBoundary}) => {
+    (name, {topBoundary, useSlot}) => {
       const DocktargetType = useSlot ? 'slot element' : 'corner';
 
       function maybeCreateSlotElementLtwh(left, top, width, height) {
@@ -1524,6 +1601,7 @@ describes.realWin('video docking', {amp: true}, (env) => {
             video,
             target: {
               type: useSlot ? DockTargetType.SLOT : DockTargetType.CORNER,
+              slot: useSlot ? slot : undefined,
             },
           };
 
diff --git a/extensions/amp-video-docking/0.1/test/test-breakpoints.js b/extensions/amp-video-docking/0.1/test/test-breakpoints.js
index e603813efc4b6..05ec53c402ff6 100644
--- a/extensions/amp-video-docking/0.1/test/test-breakpoints.js
+++ b/extensions/amp-video-docking/0.1/test/test-breakpoints.js
@@ -38,7 +38,7 @@ describes.realWin('Synthetic Breakpoints', {amp: false}, (env) => {
       {width: 300, expected: large},
       {width: 400, expected: huge},
       {width: 200000, expected: huge},
-    ].forEach(({width, expected}) => {
+    ].forEach(({expected, width}) => {
       const unexpected = Object.values(breakpoints)
         .filter(({className}) => className != expected)
         .map(({className}) => className);
diff --git a/extensions/amp-video-docking/0.1/test/validator-amp-video-docking-amp-brid-player.html b/extensions/amp-video-docking/0.1/test/validator-amp-video-docking-amp-brid-player.html
new file mode 100644
index 0000000000000..a09cf23522e07
--- /dev/null
+++ b/extensions/amp-video-docking/0.1/test/validator-amp-video-docking-amp-brid-player.html
@@ -0,0 +1,42 @@
+<!--
+  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.
+-->
+<!--
+  Test Description:
+  Tests for amp-video-docking tag with amp-video player.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-brid-player" src="https://cdn.ampproject.org/v0/amp-brid-player-latest.js"></script>
+  <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-latest.js"></script>
+</head>
+<body>
+  <!-- Valid: dock with `amp-brid-player` and `amp-video-docking` extensions-->
+  <amp-brid-player
+      dock
+      data-partner="264"
+      data-player="4144"
+      data-video="13663"
+      layout="responsive"
+      width="480" height="270">
+  </amp-brid-player>
+</body>
+</html>
diff --git a/extensions/amp-video-docking/0.1/test/validator-amp-video-docking-amp-brid-player.out b/extensions/amp-video-docking/0.1/test/validator-amp-video-docking-amp-brid-player.out
new file mode 100644
index 0000000000000..3c6c9751f725b
--- /dev/null
+++ b/extensions/amp-video-docking/0.1/test/validator-amp-video-docking-amp-brid-player.out
@@ -0,0 +1,43 @@
+PASS
+|  <!--
+|    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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for amp-video-docking tag with amp-video player.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-brid-player" src="https://cdn.ampproject.org/v0/amp-brid-player-latest.js"></script>
+|    <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-latest.js"></script>
+|  </head>
+|  <body>
+|    <!-- Valid: dock with `amp-brid-player` and `amp-video-docking` extensions-->
+|    <amp-brid-player
+|        dock
+|        data-partner="264"
+|        data-player="4144"
+|        data-video="13663"
+|        layout="responsive"
+|        width="480" height="270">
+|    </amp-brid-player>
+|  </body>
+|  </html>
diff --git a/extensions/amp-video-docking/0.1/viewport-rect.js b/extensions/amp-video-docking/0.1/viewport-rect.js
index 6f8003dbc5d14..56475c7ffccf1 100644
--- a/extensions/amp-video-docking/0.1/viewport-rect.js
+++ b/extensions/amp-video-docking/0.1/viewport-rect.js
@@ -13,7 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {LayoutRectDef, layoutRectLtwh} from '../../../src/layout-rect';
+import {
+  LayoutRectDef,
+  layoutRectLtwh,
+} from '../../../src/core/math/layout-rect';
 
 /**
  * @param {function():T} get
@@ -36,13 +39,12 @@ export function createViewportRect(viewport) {
   const width = readonlyGetterProp(() => viewport.getSize().width);
   const height = readonlyGetterProp(() => viewport.getSize().height);
 
-  return /** @type {!LayoutRectDef} */ (Object.defineProperties(
-    layoutRectLtwh(0, 0, 0, 0),
-    {
+  return /** @type {!LayoutRectDef} */ (
+    Object.defineProperties(layoutRectLtwh(0, 0, 0, 0), {
       width,
       height,
       right: width,
       bottom: height,
-    }
-  ));
+    })
+  );
 }
diff --git a/extensions/amp-video-docking/OWNERS b/extensions/amp-video-docking/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-video-docking/OWNERS
+++ b/extensions/amp-video-docking/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-video-docking/amp-video-docking.md b/extensions/amp-video-docking/amp-video-docking.md
index c86a081305fd4..51a78a4a2527e 100644
--- a/extensions/amp-video-docking/amp-video-docking.md
+++ b/extensions/amp-video-docking/amp-video-docking.md
@@ -24,51 +24,47 @@ limitations under the License.
 
 # amp-video-docking
 
-## Behavior
+## Usage
 
-The `amp-video-docking` extension allows videos to be minimized to a corner or
+The `amp-video-docking` component allows videos to be minimized to a corner or
 to a custom positioned element via the `dock` attribute.
 
 If this attribute is present and the video is playing manually, the video will
 be "docked" and float on a corner or a custom position when the user scrolls out of the video
 component's visual area. If the user scrolls back, the video reverts to its original static position.
 
-- The video can be docked to a default corner or to a custom fixed position.
-- The video can be dragged and repositioned by the user on a different corner.
-- The video can be flicked to be dismissed from its docked position.
-- Multiple videos on the same page can be docked, but only one at a time will be docked and fixed.
+-   The video can be docked to a default corner or to a custom fixed position.
+-   The video can be dragged and repositioned by the user on a different corner.
+-   The video can be flicked to be dismissed from its docked position.
+-   Multiple videos on the same page can be docked, but only one at a time will be docked and fixed.
 
-### <a id="support"></a> Support
+### Support
 
-This extension is used in conjunction with a [supported video player](../../spec/amp-video-interface.md).
+This extension is used in conjunction with a [supported video player](../../docs/spec/amp-video-interface.md).
 Currently, the supported players are:
 
-- [`amp-brightcove`](https://amp.dev/documentation/components/amp-brightcove)
-- [`amp-dailymotion`](https://amp.dev/documentation/components/amp-dailymotion)
-- [`amp-delight-player`](https://github.com/ampproject/amphtml/blob/master/extensions/amp-delight-player/amp-delight-player.md)
-- [`amp-ima-video`](https://amp.dev/documentation/components/amp-ima-video)
-- [`amp-video`](https://amp.dev/documentation/components/amp-video)
-- [`amp-video-iframe`](https://amp.dev/documentation/components/amp-video-iframe)
-- [`amp-youtube`](https://amp.dev/documentation/components/amp-youtube)
+-   [`amp-brid-player`](https://amp.dev/documentation/components/amp-brid-player)
+-   [`amp-brightcove`](https://amp.dev/documentation/components/amp-brightcove)
+-   [`amp-dailymotion`](https://amp.dev/documentation/components/amp-dailymotion)
+-   [`amp-delight-player`](https://github.com/ampproject/amphtml/blob/main/extensions/amp-delight-player/amp-delight-player.md)
+-   [`amp-ima-video`](https://amp.dev/documentation/components/amp-ima-video)
+-   [`amp-video`](https://amp.dev/documentation/components/amp-video)
+-   [`amp-video-iframe`](https://amp.dev/documentation/components/amp-video-iframe)
+-   [`amp-youtube`](https://amp.dev/documentation/components/amp-youtube)
 
 ### Triggering conditions
 
 Note that the video won't be docked unless it's playing _manually_. This means:
 
-- If the video has `autoplay`, the feature will not be triggered unless the user clicks on the video first.
-- If the video does not have `autoplay`, the feature will not be triggered unless the user plays the video.
-- If the video is paused while scrolling, it will not be docked.
+-   If the video has `autoplay`, the feature will not be triggered unless the user clicks on the video first.
+-   If the video does not have `autoplay`, the feature will not be triggered unless the user plays the video.
+-   If the video is paused while scrolling, it will not be docked.
 
-## Attributes
-
-N/A. `amp-video-docking` does not define any custom elements. To use this extension, set the `dock` attribute on
-an [elligible video player component.](#support)
-
-## <a id="target"></a> Docking target
+### Docking target
 
 On scroll, the video will minimize to an automatically calculated corner or to a custom defined position.
 
-### Corner
+#### Corner
 
 When setting the `dock` attribute with an empty value, the video will dock to a corner defined by the extension:
 
@@ -78,7 +74,7 @@ When setting the `dock` attribute with an empty value, the video will dock to a
 
 By default, the video will be minimized to the top-right corner. It will be sized at 30% of the viewport's width, no less than 180 pixels wide. If the document is [RTL](https://www.w3.org/International/questions/qa-html-dir), the video will dock to the top-left corner. When in this mode, users can drag the docked video to snap to either corner.
 
-### Custom position by "slot"
+#### Custom position by "slot"
 
 When setting the `dock` attribute to a non-empty value, the video will dock to the same position as a "slot element" referenced in the attribute value by [CSS selector.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
 
@@ -92,10 +88,15 @@ The slot element must always be an [`amp-layout`](https://amp.dev/documentation/
 
 In order for custom positioning to work properly, the slot element must be [`position: fixed`.](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
 
-### <a id="combined-targets"></a> Combining corner and custom position behavior
+#### <a id="combined-targets"></a> Combining corner and custom position behavior
 
 Custom positioning will be rejected when the element target is not visible. This means that corner targets or slot elements can be picked depending on layout by [CSS media queries.](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) For an example where target types are combined and applied in different layout conditions, [see AMP by Example.](https://amp.dev/documentation/examples/multimedia-animations/advanced_video_docking/)
 
+## Attributes
+
+N/A. `amp-video-docking` does not define any custom elements. To use this extension, set the `dock` attribute on
+an [elligible video player component.](#support)
+
 ## Events
 
 ### `dock` and `undock`
@@ -106,12 +107,12 @@ These can, for example, trigger an [`amp-animation`](https://amp.dev/documentati
 
 ### Event source
 
-Depending on the [docking target](#target), the corresponding event will be triggered from different source elements:
+Depending on the [docking target](#docking-target), the corresponding event will be triggered from different source elements:
 
-- **From the video element itself**, when the video is docked to a corner.
-- **From the slot element**, when the video is docked to the slot element.
+-   **From the video element itself**, when the video is docked to a corner.
+-   **From the slot element**, when the video is docked to the slot element.
 
-You can set `dock`/`undock` action triggers on either the video or the slot to alter your layout differently when [combining target types.](#combined-targets)
+You can set `dock`/`undock` action triggers on either the video or the slot to alter your layout differently when combining target types.
 
 ## Styling
 
@@ -142,12 +143,12 @@ background can be overridden or removed.
 A controls group that contains a set of buttons. Only one of these elements are
 displayed at a time depending on the state of the video:
 
-- The **playback** set is displayed on most scenarios and contains play/pause,
-  mute/unmute and fullscreen buttons.
+-   The **playback** set is displayed on most scenarios and contains play/pause,
+    mute/unmute and fullscreen buttons.
 
-- The **scroll back** set only contains a button to scroll the document back
-  to the video's inline position. This is displayed during ad playback in order
-  to allow user interaction.
+-   The **scroll back** set only contains a button to scroll the document back
+    to the video's inline position. This is displayed during ad playback in order
+    to allow user interaction.
 
 The dismiss button is **not** part of a controls set and is always displayed.
 
@@ -214,3 +215,7 @@ Represents a layer displaying the `poster` or `placeholder` image of the video o
 Represents an animated icon for a UX affordance displayed on the empty component area.
 
 This element also gets the classname `amp-small` when rendered in small viewports (those under 420 pixels wide). It also gets the classname `amp-rtl` when animating from right to left.
+
+## Validation
+
+See [amp-video-docking rules](validator-amp-video-docking.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-video-docking/validator-amp-video-docking.protoascii b/extensions/amp-video-docking/validator-amp-video-docking.protoascii
index 2875dfbd7b637..bfb2c4ad7bad7 100644
--- a/extensions/amp-video-docking/validator-amp-video-docking.protoascii
+++ b/extensions/amp-video-docking/validator-amp-video-docking.protoascii
@@ -17,7 +17,6 @@
 tags: {  # amp-video-docking
   html_format: AMP
   tag_name: "SCRIPT"
-  spec_name: "amp-video-docking"
   extension_spec: {
     name: "amp-video-docking"
     version: "0.1"
diff --git a/extensions/amp-video-iframe/0.1/amp-video-iframe.js b/extensions/amp-video-iframe/0.1/amp-video-iframe.js
index 08f09e47faa02..0e6c02931559a 100644
--- a/extensions/amp-video-iframe/0.1/amp-video-iframe.js
+++ b/extensions/amp-video-iframe/0.1/amp-video-iframe.js
@@ -13,11 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Deferred} from '../../../src/utils/promise';
+import {BUBBLE_MESSAGE_EVENTS} from '../amp-video-iframe-api';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {
   MIN_VISIBILITY_RATIO_FOR_AUTOPLAY,
   VideoEvents,
 } from '../../../src/video-interface';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {
   SandboxOptions,
   createFrameFor,
@@ -27,22 +29,24 @@ import {
 } from '../../../src/iframe-video';
 import {Services} from '../../../src/services';
 import {addParamsToUrl} from '../../../src/url';
-import {
-  createElementWithAttributes,
-  getDataParamsFromAttributes,
-  isFullscreenElement,
-  removeElement,
-} from '../../../src/dom';
 import {dev, devAssert, user, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {
   disableScrollingOnIframe,
   looksLikeTrackingIframe,
 } from '../../../src/iframe-helper';
+import {
+  dispatchCustomEvent,
+  getDataParamsFromAttributes,
+  isFullscreenElement,
+  removeElement,
+} from '../../../src/dom';
+import {getConsentDataToForward} from '../../../src/consent';
 import {getData, listen} from '../../../src/event-helper';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {once} from '../../../src/utils/function';
+import {measureIntersection} from '../../../src/utils/intersection';
+import {once} from '../../../src/core/types/function';
 
 /** @private @const */
 const TAG = 'amp-video-iframe';
@@ -59,20 +63,6 @@ const SANDBOX = [
   SandboxOptions.ALLOW_TOP_NAVIGATION_BY_USER_ACTIVATION,
 ];
 
-/**
- * Events allowed to be dispatched from messages.
- * @private @const
- */
-const ALLOWED_EVENTS = [
-  VideoEvents.PLAYING,
-  VideoEvents.PAUSE,
-  VideoEvents.ENDED,
-  VideoEvents.MUTED,
-  VideoEvents.UNMUTED,
-  VideoEvents.AD_START,
-  VideoEvents.AD_END,
-];
-
 /**
  * @return {!RegExp}
  * @private
@@ -110,7 +100,7 @@ class AmpVideoIframe extends AMP.BaseElement {
     /** @private {?Element} */
     this.iframe_ = null;
 
-    /** @private {!UnlistenDef|null} */
+    /** @private {?UnlistenDef} */
     this.unlistenFrame_ = null;
 
     /** @private {?Deferred} */
@@ -121,10 +111,13 @@ class AmpVideoIframe extends AMP.BaseElement {
 
     /**
      * @param {!Event} e
-     * @return {*} TODO(#23582): Specify return type
+     * @return {undefined}
      * @private
      */
     this.boundOnMessage_ = (e) => this.onMessage_(e);
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /** @override */
@@ -134,26 +127,17 @@ class AmpVideoIframe extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
-    const {element} = this;
-
-    // TODO(alanorozco): On integration tests, `getLayoutBox` will return a
-    // cached default value, which makes this assertion fail. Move to
-    // `describes.integration` to see if that fixes it.
-    const isIntegrationTest = element.hasAttribute(
-      'i-amphtml-integration-test'
-    );
+    installVideoManagerForDoc(this.element);
+  }
 
+  /** @override */
+  layoutCallback() {
     this.user().assert(
-      isIntegrationTest || !looksLikeTrackingIframe(element),
+      !looksLikeTrackingIframe(this.element),
       '<amp-video-iframe> does not allow tracking iframes. ' +
         'Please use amp-analytics instead.'
     );
 
-    installVideoManagerForDoc(element);
-  }
-
-  /** @override */
-  layoutCallback() {
     const name = JSON.stringify(this.getMetadata_());
 
     this.iframe_ = disableScrollingOnIframe(
@@ -187,11 +171,14 @@ class AmpVideoIframe extends AMP.BaseElement {
    * @private
    */
   getMetadata_() {
-    const {sourceUrl, canonicalUrl} = Services.documentInfoForDoc(this.element);
+    const {canonicalUrl, sourceUrl} = Services.documentInfoForDoc(this.element);
+    const {documentElement, title} = this.getAmpDoc().getRootNode();
 
     return dict({
       'sourceUrl': sourceUrl,
       'canonicalUrl': canonicalUrl,
+      'title': title || null,
+      'lang': documentElement?.lang || null,
     });
   }
 
@@ -199,31 +186,29 @@ class AmpVideoIframe extends AMP.BaseElement {
   onReady_() {
     const {element} = this;
     Services.videoManagerForDoc(element).register(this);
-    element.dispatchCustomEvent(VideoEvents.LOAD);
+    dispatchCustomEvent(element, VideoEvents.LOAD);
   }
 
   /** @override */
   createPlaceholderCallback() {
     const {element} = this;
-    const src = addDataParamsToUrl(
-      user().assertString(element.getAttribute('poster')),
-      element
-    );
-    return createElementWithAttributes(
-      devAssert(element.ownerDocument),
-      'amp-img',
-      dict({
-        'src': src,
-        'layout': 'fill',
-        'placeholder': '',
-      })
-    );
+    const poster = element.getAttribute('poster');
+    if (!poster) {
+      return null;
+    }
+    const img = new Image();
+    img.src = addDataParamsToUrl(poster, element);
+    img.setAttribute('loading', 'lazy');
+    img.setAttribute('placeholder', '');
+    this.applyFillContent(img);
+    return img;
   }
 
   /** @override */
   unlayoutCallback() {
     this.canPlay_ = false;
     this.removeIframe_();
+    this.pauseHelper_.updatePlaying(false);
     return true; // layout again.
   }
 
@@ -280,6 +265,7 @@ class AmpVideoIframe extends AMP.BaseElement {
 
   /**
    * @param {!Event} event
+   * @return {!Promise|undefined}
    * @private
    */
   onMessage_(event) {
@@ -302,12 +288,29 @@ class AmpVideoIframe extends AMP.BaseElement {
       return; // we only process valid json
     }
 
-    const messageId = data['id'];
+    // Expected message format:
+    //
+    // @typedef {{
+    //   id: number,
+    //   method: (undefined|string),
+    //   event: (undefined|string),
+    //   analytics: (undefined|{
+    //     eventType: string,
+    //     vars: Object<string, string>,
+    //   }),
+    // }}
+
     const methodReceived = data['method'];
 
     if (methodReceived) {
+      const messageId = data['id'];
       if (methodReceived == 'getIntersection') {
-        this.postIntersection_(messageId);
+        return measureIntersection(this.element).then((intersection) => {
+          this.postIntersection_(messageId, intersection);
+        });
+      }
+      if (methodReceived === 'getConsentData') {
+        this.postConsentData_(messageId);
         return;
       }
       userAssert(false, 'Unknown method `%s`.', methodReceived);
@@ -335,8 +338,18 @@ class AmpVideoIframe extends AMP.BaseElement {
       return;
     }
 
-    if (ALLOWED_EVENTS.indexOf(eventReceived) > -1) {
-      this.element.dispatchCustomEvent(eventReceived);
+    switch (eventReceived) {
+      case 'playing':
+        this.pauseHelper_.updatePlaying(true);
+        break;
+      case 'pause':
+      case 'ended':
+        this.pauseHelper_.updatePlaying(false);
+        break;
+    }
+
+    if (BUBBLE_MESSAGE_EVENTS.indexOf(eventReceived) > -1) {
+      dispatchCustomEvent(this.element, eventReceived);
       return;
     }
   }
@@ -354,7 +367,8 @@ class AmpVideoIframe extends AMP.BaseElement {
       ANALYTICS_EVENT_TYPE_PREFIX
     );
 
-    this.element.dispatchCustomEvent(
+    dispatchCustomEvent(
+      this.element,
       VideoEvents.CUSTOM_TICK,
       dict({
         'eventType': eventType,
@@ -365,10 +379,11 @@ class AmpVideoIframe extends AMP.BaseElement {
 
   /**
    * @param {number} messageId
+   * @param {!IntersectionObserverEntry} intersection
    * @private
    */
-  postIntersection_(messageId) {
-    const {time, intersectionRatio} = this.element.getIntersectionChangeEntry();
+  postIntersection_(messageId, intersection) {
+    const {intersectionRatio, time} = intersection;
 
     // Only post ratio > 0 when in autoplay range to prevent internal autoplay
     // implementations that differ from ours.
@@ -389,38 +404,47 @@ class AmpVideoIframe extends AMP.BaseElement {
   }
 
   /**
-   * @param {string} method
+   * @param {number} messageId
    * @private
    */
-  method_(method) {
-    this.postMessage_(
-      dict({
-        'event': 'method',
-        'method': method,
-      })
+  postConsentData_(messageId) {
+    getConsentDataToForward(this.element, this.getConsentPolicy()).then(
+      (consentData) => {
+        this.postMessage_(dict({'id': messageId, 'args': consentData}));
+      }
     );
   }
 
   /**
-   * @param {!JsonObject} message
+   * @param {string} method
    * @private
    */
-  postMessage_(message) {
-    const promise = this.readyDeferred_ && this.readyDeferred_.promise;
+  method_(method) {
+    const {promise} = this.readyDeferred_ || {};
     if (!promise) {
       return;
     }
     promise.then(() => {
-      if (!this.iframe_ || !this.iframe_.contentWindow) {
-        return;
-      }
-      this.iframe_.contentWindow./*OK*/ postMessage(
-        JSON.stringify(message),
-        '*'
+      this.postMessage_(
+        dict({
+          'event': 'method',
+          'method': method,
+        })
       );
     });
   }
 
+  /**
+   * @param {!JsonObject} message
+   * @private
+   */
+  postMessage_(message) {
+    if (!this.iframe_ || !this.iframe_.contentWindow) {
+      return;
+    }
+    this.iframe_.contentWindow./*OK*/ postMessage(JSON.stringify(message), '*');
+  }
+
   /** @override */
   pauseCallback() {
     this.pause();
diff --git a/extensions/amp-video-iframe/0.1/test/test-amp-video-iframe.js b/extensions/amp-video-iframe/0.1/test/test-amp-video-iframe.js
index 4ffbbbc096deb..5593808afbfb3 100644
--- a/extensions/amp-video-iframe/0.1/test/test-amp-video-iframe.js
+++ b/extensions/amp-video-iframe/0.1/test/test-amp-video-iframe.js
@@ -18,16 +18,12 @@ import '../amp-video-iframe';
 import {Services} from '../../../../src/services';
 import {VideoEvents} from '../../../../src/video-interface';
 import {
-  addAttributesToElement,
   createElementWithAttributes,
   whenUpgradedToCustomElement,
 } from '../../../../src/dom';
+import {installResizeObserverStub} from '../../../../testing/resize-observer-stub';
 import {listenOncePromise} from '../../../../src/event-helper';
-import {tryParseJson} from '../../../../src/json';
-
-function getIntersectionMessage(id) {
-  return {data: {id, method: 'getIntersection'}};
-}
+import {macroTask} from '../../../../testing/yield';
 
 describes.realWin(
   'amp-video-iframe',
@@ -42,12 +38,11 @@ describes.realWin(
     let win;
     let doc;
     let videoManagerStub;
-    let any;
+    let resizeObserverStub;
 
     beforeEach(() => {
       win = env.win;
       doc = win.document;
-      any = env.sandbox.match.any;
 
       videoManagerStub = {
         register: env.sandbox.spy(),
@@ -56,6 +51,7 @@ describes.realWin(
       env.sandbox
         .stub(Services, 'videoManagerForDoc')
         .returns(videoManagerStub);
+      resizeObserverStub = installResizeObserverStub(env.sandbox, win);
     });
 
     function getIframeSrc(fixture = null) {
@@ -75,43 +71,50 @@ describes.realWin(
           };
 
     function createVideoIframe(attrs = {}, opt_size) {
-      const el = createElementWithAttributes(doc, 'amp-video-iframe', attrs);
-      const {src = getIframeSrc(), poster = 'foo.png'} = attrs;
-      addAttributesToElement(el, {src, poster});
-      addAttributesToElement(el, layoutConfigAttrs(opt_size));
+      const {src = getIframeSrc(), ...rest} = attrs;
+      const el = createElementWithAttributes(doc, 'amp-video-iframe', {
+        src,
+        ...rest,
+        ...layoutConfigAttrs(opt_size),
+      });
       doc.body.appendChild(el);
       return el;
     }
 
-    function spyDispatch(el) {
-      return env.sandbox.spy(el, 'dispatchCustomEvent');
-    }
-
-    function acceptMockedMessages(videoIframe) {
-      env.sandbox
-        ./*OK*/ stub(videoIframe.implementation_, 'originMatches_')
-        .returns(true);
+    async function acceptMockedMessages(videoIframe) {
+      const impl = await videoIframe.getImpl(false);
+      env.sandbox./*OK*/ stub(impl, 'originMatches_').returns(true);
     }
 
-    async function layoutAndLoad(videoIframe) {
-      await whenUpgradedToCustomElement(videoIframe);
-      videoIframe.implementation_.layoutCallback();
-      return listenOncePromise(videoIframe, VideoEvents.LOAD);
+    async function layoutAndLoad(element) {
+      await whenUpgradedToCustomElement(element);
+      const impl = await element.getImpl(false);
+      // getLayoutSize() affects looksLikeTrackingIframe().
+      // Use default width/height of 100 since element is not sized
+      // as expected in test fixture.
+      env.sandbox.stub(element, 'getLayoutSize').returns({
+        width: Number(element.getAttribute('width')) || 100,
+        height: Number(element.getAttribute('height')) || 100,
+      });
+      impl.layoutCallback();
+      return listenOncePromise(element, VideoEvents.LOAD);
     }
 
-    function stubPostMessage(videoIframe) {
-      return env.sandbox./*OK*/ stub(
-        videoIframe.implementation_,
-        'postMessage_'
-      );
+    async function stubPostMessage(videoIframe) {
+      const impl = await videoIframe.getImpl(false);
+      return env.sandbox./*OK*/ stub(impl, 'postMessage_');
     }
 
-    function stubIntersectionEntry(element, time, intersectionRatio) {
-      const entry = {time, intersectionRatio};
-      env.sandbox
-        ./*OK*/ stub(element, 'getIntersectionChangeEntry')
-        .returns(entry);
-      return entry;
+    function stubMeasureIntersection(target, time, intersectionRatio) {
+      env.win.IntersectionObserver = (callback) => ({
+        observe() {
+          Promise.resolve().then(() => {
+            callback([{target, time, intersectionRatio}]);
+          });
+        },
+        unobserve() {},
+        disconnect() {},
+      });
     }
 
     describe('#layoutCallback', () => {
@@ -126,20 +129,30 @@ describes.realWin(
       });
 
       it('sets metadata in iframe name', async () => {
-        const metadata = {
-          canonicalUrl: 'foo.html',
-          sourceUrl: 'bar.html',
-        };
+        const canonicalUrl = 'foo.html';
+        const sourceUrl = 'bar.html';
+        const title = 'My test title';
+        const lang = 'es';
 
-        env.sandbox.stub(Services, 'documentInfoForDoc').returns(metadata);
+        env.sandbox.stub(win.document, 'title').value(title);
+        env.sandbox.stub(win.document.documentElement, 'lang').value(lang);
+
+        env.sandbox.stub(Services, 'documentInfoForDoc').returns({
+          canonicalUrl,
+          sourceUrl,
+        });
 
         const videoIframe = createVideoIframe();
 
         await layoutAndLoad(videoIframe);
 
-        const {name} = videoIframe.implementation_.iframe_;
-
-        expect(tryParseJson(name)).to.deep.equal(metadata);
+        const iframe = videoIframe.querySelector('iframe');
+        expect(JSON.parse(iframe.name)).to.deep.equal({
+          canonicalUrl,
+          sourceUrl,
+          title,
+          lang,
+        });
       });
 
       it('sets amp=1 fragment in src', async () => {
@@ -148,8 +161,8 @@ describes.realWin(
 
         await layoutAndLoad(videoIframe);
 
-        const {src} = videoIframe.implementation_.iframe_;
-        expect(src).to.equal(`${rawSrc}#amp=1`);
+        const iframe = videoIframe.querySelector('iframe');
+        expect(iframe.src).to.equal(`${rawSrc}#amp=1`);
       });
 
       it('does not set amp=1 fragment in src when fragment present', async () => {
@@ -158,8 +171,8 @@ describes.realWin(
 
         await layoutAndLoad(videoIframe);
 
-        const {src} = videoIframe.implementation_.iframe_;
-        expect(src).to.equal(rawSrc);
+        const iframe = videoIframe.querySelector('iframe');
+        expect(iframe.src).to.equal(rawSrc);
       });
     });
 
@@ -178,34 +191,103 @@ describes.realWin(
           [1, 1],
         ];
 
-        trackingSizes.forEach((size) => {
-          const {implementation_} = createVideoIframe({}, size);
-          allowConsoleError(() => {
-            expect(() => implementation_.buildCallback()).to.throw();
-          });
+        return Promise.all(
+          trackingSizes.map(async (size) => {
+            const videoIframe = createVideoIframe({}, size);
+            const impl = await videoIframe.getImpl(false);
+            allowConsoleError(() => {
+              expect(() => impl.layoutCallback()).to.throw();
+            });
+          })
+        );
+      });
+    });
+
+    describe('pause', () => {
+      let player, impl;
+      let postMessageSpy;
+
+      beforeEach(async () => {
+        player = createVideoIframe();
+        await layoutAndLoad(player);
+        await acceptMockedMessages(player);
+        env.sandbox.stub(player, 'isBuilt').returns(true);
+        impl = await player.getImpl(false);
+        postMessageSpy = await stubPostMessage(player);
+      });
+
+      it('should auto-pause when playing and no size', async () => {
+        impl.onMessage_({data: {event: VideoEvents.PLAYING}});
+        // First send "size" event and then "no size".
+        resizeObserverStub.notifySync({
+          target: player,
+          borderBoxSize: [{inlineSize: 10, blockSize: 10}],
         });
+        resizeObserverStub.notifySync({
+          target: player,
+          borderBoxSize: [{inlineSize: 0, blockSize: 0}],
+        });
+        await macroTask();
+        expect(
+          postMessageSpy.withArgs(
+            env.sandbox.match({
+              event: 'method',
+              method: 'pause',
+            })
+          )
+        ).to.be.calledOnce;
+      });
+
+      it('should NOT auto-pause when not playing', async () => {
+        impl.onMessage_({data: {event: VideoEvents.PLAYING}});
+        impl.onMessage_({data: {event: VideoEvents.PAUSE}});
+        // First send "size" event and then "no size".
+        resizeObserverStub.notifySync({
+          target: player,
+          borderBoxSize: [{inlineSize: 10, blockSize: 10}],
+        });
+        resizeObserverStub.notifySync({
+          target: player,
+          borderBoxSize: [{inlineSize: 0, blockSize: 0}],
+        });
+        await macroTask();
+        expect(
+          postMessageSpy.withArgs(
+            env.sandbox.match({
+              event: 'method',
+              method: 'pause',
+            })
+          )
+        ).to.not.be.called;
       });
     });
 
     describe('#createPlaceholderCallback', () => {
+      it('does not create placeholder without poster attribute', () => {
+        const placeholder = createVideoIframe().createPlaceholder();
+        expect(placeholder).to.be.null;
+      });
+
       it('creates an amp-img with the poster as src', () => {
         const poster = 'foo.bar';
         const placeholder = createVideoIframe({poster}).createPlaceholder();
         expect(placeholder).to.have.attribute('placeholder');
-        expect(placeholder.tagName.toLowerCase()).to.equal('amp-img');
-        expect(placeholder.getAttribute('layout')).to.equal('fill');
+        expect(placeholder.tagName.toLowerCase()).to.equal('img');
+        expect(placeholder).to.have.class('i-amphtml-fill-content');
+        expect(placeholder.getAttribute('loading')).to.equal('lazy');
         expect(placeholder.getAttribute('src')).to.equal(poster);
       });
 
       it("uses data-param-* in the poster's src", () => {
         expect(
           createVideoIframe({
+            poster: 'foo.png',
             'data-param-my-poster-param': 'my param',
             'data-param-another': 'value',
           })
             .createPlaceholder()
             .getAttribute('src')
-        ).to.match(/\?myPosterParam=my%20param&another=value$/);
+        ).to.match(/foo\.png\?myPosterParam=my%20param&another=value$/);
       });
     });
 
@@ -214,10 +296,9 @@ describes.realWin(
         // Fixture inside frame triggers `canplay`.
         const videoIframe = createVideoIframe();
         await layoutAndLoad(videoIframe);
+        const impl = await videoIframe.getImpl(false);
 
-        const register = videoManagerStub.register.withArgs(
-          videoIframe.implementation_
-        );
+        const register = videoManagerStub.register.withArgs(impl);
 
         expect(register).to.have.been.calledOnce;
       });
@@ -226,14 +307,15 @@ describes.realWin(
         const videoIframe = createVideoIframe();
 
         await layoutAndLoad(videoIframe);
-
-        const dispatch = spyDispatch(videoIframe);
+        const impl = await videoIframe.getImpl(false);
 
         const invalidEvents = 'tacos al pastor'.split(' ');
 
         invalidEvents.forEach((event) => {
-          videoIframe.implementation_.onMessage_({data: {event}});
-          expect(dispatch.withArgs(event)).to.not.have.been.called;
+          const spy = env.sandbox.spy();
+          videoIframe.addEventListener(event, spy);
+          impl.onMessage_({data: {event}});
+          expect(spy).to.not.have.been.called;
         });
       });
 
@@ -242,9 +324,9 @@ describes.realWin(
 
         await layoutAndLoad(videoIframe);
 
-        const dispatch = spyDispatch(videoIframe);
+        await acceptMockedMessages(videoIframe);
 
-        acceptMockedMessages(videoIframe);
+        const impl = await videoIframe.getImpl(false);
 
         const validEvents = [
           VideoEvents.PLAYING,
@@ -258,11 +340,58 @@ describes.realWin(
 
         for (let i = 0; i < validEvents.length; i++) {
           const event = validEvents[i];
-          videoIframe.implementation_.onMessage_({data: {event}});
-          expect(dispatch.withArgs(event)).to.have.been.calledOnce;
+          const spy = env.sandbox.spy();
+          videoIframe.addEventListener(event, spy);
+          impl.onMessage_({data: {event}});
+          expect(spy).to.have.been.calledOnce;
         }
       });
 
+      it('should return consent data on getConsentData', async () => {
+        const consentString = 'foo-consentString';
+        const consentMetadata = 'bar-consentMetadata';
+        const consentPolicyState = 'baz-consentPolicyState';
+        const consentPolicySharedData = 'foo-consentPolicySharedData';
+
+        env.sandbox.stub(Services, 'consentPolicyServiceForDocOrNull').returns(
+          Promise.resolve({
+            getConsentMetadataInfo: () => Promise.resolve(consentMetadata),
+            getConsentStringInfo: () => Promise.resolve(consentString),
+            whenPolicyResolved: () => Promise.resolve(consentPolicyState),
+            getMergedSharedData: () => Promise.resolve(consentPolicySharedData),
+          })
+        );
+
+        const id = 1234;
+
+        const videoIframe = createVideoIframe();
+
+        await layoutAndLoad(videoIframe);
+
+        const postMessage = await stubPostMessage(videoIframe);
+
+        await acceptMockedMessages(videoIframe);
+
+        const impl = await videoIframe.getImpl(false);
+        impl.onMessage_({
+          data: {id, method: 'getConsentData'},
+        });
+
+        await macroTask();
+
+        expect(
+          postMessage.withArgs({
+            id,
+            args: {
+              consentString,
+              consentMetadata,
+              consentPolicyState,
+              consentPolicySharedData,
+            },
+          })
+        ).to.have.been.calledOnce;
+      });
+
       it('should return intersection ratio if in autoplay range', async () => {
         const id = 1234;
         const time = 1.234;
@@ -272,18 +401,17 @@ describes.realWin(
 
         await layoutAndLoad(videoIframe);
 
-        const postMessage = stubPostMessage(videoIframe);
+        const postMessage = await stubPostMessage(videoIframe);
 
-        acceptMockedMessages(videoIframe);
+        await acceptMockedMessages(videoIframe);
 
-        const message = getIntersectionMessage(id);
+        const message = {data: {id, method: 'getIntersection'}};
 
-        const expectedResponseMessage = {
-          id,
-          args: stubIntersectionEntry(videoIframe, time, intersectionRatio),
-        };
+        stubMeasureIntersection(videoIframe, time, intersectionRatio);
+        const expectedResponseMessage = {id, args: {time, intersectionRatio}};
 
-        videoIframe.implementation_.onMessage_(message);
+        const impl = await videoIframe.getImpl(false);
+        await impl.onMessage_(message);
 
         expect(postMessage.withArgs(env.sandbox.match(expectedResponseMessage)))
           .to.have.been.calledOnce;
@@ -299,13 +427,13 @@ describes.realWin(
 
         await layoutAndLoad(videoIframe);
 
-        const postMessage = stubPostMessage(videoIframe);
+        const postMessage = await stubPostMessage(videoIframe);
 
-        stubIntersectionEntry(videoIframe, time, intersectionRatio);
+        stubMeasureIntersection(videoIframe, time, intersectionRatio);
 
-        acceptMockedMessages(videoIframe);
+        await acceptMockedMessages(videoIframe);
 
-        const message = getIntersectionMessage(id);
+        const message = {data: {id, method: 'getIntersection'}};
 
         const expectedResponseMessage = {
           id,
@@ -315,7 +443,8 @@ describes.realWin(
           },
         };
 
-        videoIframe.implementation_.onMessage_(message);
+        const impl = await videoIframe.getImpl(false);
+        await impl.onMessage_(message);
 
         expect(postMessage.withArgs(env.sandbox.match(expectedResponseMessage)))
           .to.have.been.calledOnce;
@@ -340,16 +469,17 @@ describes.realWin(
           eventType: 'tacos al pastor',
           sufix: 'with invalid event name',
         },
-      ].forEach(({sufix, eventType, vars, accept}) => {
+      ].forEach(({accept, eventType, sufix, vars}) => {
         const verb = accept ? 'dispatch' : 'reject';
 
         it(`should ${verb} custom analytics event ${sufix}`, async () => {
           const videoIframe = createVideoIframe();
-          const dispatch = spyDispatch(videoIframe);
+          const eventSpy = env.sandbox.spy();
+          videoIframe.addEventListener(VideoEvents.CUSTOM_TICK, eventSpy);
 
           await layoutAndLoad(videoIframe);
 
-          acceptMockedMessages(videoIframe);
+          await acceptMockedMessages(videoIframe);
 
           const data = {
             event: 'analytics',
@@ -362,22 +492,20 @@ describes.realWin(
             Object.assign(data.analytics, {vars});
           }
 
-          const {implementation_} = videoIframe;
+          const impl = await videoIframe.getImpl(false);
 
           if (accept) {
             const expectedEventVars = {eventType, vars: vars || {}};
-            const expectedDispatch = dispatch.withArgs(
-              VideoEvents.CUSTOM_TICK,
-              expectedEventVars
-            );
-            implementation_.onMessage_({data});
-            expect(expectedDispatch).to.have.been.calledOnce;
+            impl.onMessage_({data});
+            expect(eventSpy).to.be.calledOnce;
+            const eventData = eventSpy.firstCall.firstArg.data;
+            expect(eventData.eventType).to.equal(expectedEventVars.eventType);
+            expect(eventData.vars).to.deep.equal(expectedEventVars.vars);
           } else {
             allowConsoleError(() => {
-              expect(() => implementation_.onMessage_({data})).to.throw();
+              expect(() => impl.onMessage_({data})).to.throw();
             });
-            expect(dispatch.withArgs(VideoEvents.CUSTOM_TICK, any)).to.not.have
-              .been.called;
+            expect(eventSpy).to.not.have.been.called;
           }
         });
       });
@@ -387,11 +515,11 @@ describes.realWin(
       it('updates src', async () => {
         const defaultSrc = getIframeSrc(defaultFixture);
         const videoIframe = createVideoIframe({src: defaultSrc});
-        const {implementation_} = videoIframe;
+        const impl = await videoIframe.getImpl(false);
 
         await layoutAndLoad(videoIframe);
 
-        const {iframe_} = implementation_;
+        const {iframe_} = impl;
 
         expect(iframe_.src).to.match(new RegExp(`^${defaultSrc}#`));
 
@@ -399,7 +527,7 @@ describes.realWin(
 
         videoIframe.setAttribute('src', newSrc);
 
-        implementation_.mutatedAttributesCallback({'src': true});
+        impl.mutatedAttributesCallback({'src': true});
 
         expect(iframe_.src).to.match(new RegExp(`^${newSrc}#`));
       });
@@ -425,9 +553,12 @@ describes.realWin(
 
           await layoutAndLoad(videoIframe);
 
-          const postMessage = stubPostMessage(videoIframe);
+          const postMessage = await stubPostMessage(videoIframe);
+
+          const impl = await videoIframe.getImpl(false);
+          impl[method]();
 
-          videoIframe.implementation_[method]();
+          await macroTask();
 
           expect(
             postMessage.withArgs(
diff --git a/extensions/amp-video-iframe/0.1/test/validator-amp-video-iframe.html b/extensions/amp-video-iframe/0.1/test/validator-amp-video-iframe.html
index bcfeedd527afe..7a8caf5401511 100644
--- a/extensions/amp-video-iframe/0.1/test/validator-amp-video-iframe.html
+++ b/extensions/amp-video-iframe/0.1/test/validator-amp-video-iframe.html
@@ -33,8 +33,7 @@
       width="640"
       height="360"
       layout="responsive"
-      src="https://foo.com"
-      poster="images/kitten-playing.png">
+      src="https://foo.com">
   </amp-video-iframe>
 
   <!-- Valid -->
@@ -42,8 +41,8 @@
       width="640"
       height="360"
       layout="responsive"
-      src="https://foo.com">
-    <div placeholder></div>
+      src="https://foo.com"
+      poster="images/kitten-playing.png">
   </amp-video-iframe>
 
   <!-- Invalid: Incorrect attribute value for autoplay -->
diff --git a/extensions/amp-video-iframe/0.1/test/validator-amp-video-iframe.out b/extensions/amp-video-iframe/0.1/test/validator-amp-video-iframe.out
index a55a3668aaa6d..1db5e2225e8a6 100644
--- a/extensions/amp-video-iframe/0.1/test/validator-amp-video-iframe.out
+++ b/extensions/amp-video-iframe/0.1/test/validator-amp-video-iframe.out
@@ -34,8 +34,7 @@ FAIL
 |        width="640"
 |        height="360"
 |        layout="responsive"
-|        src="https://foo.com"
-|        poster="images/kitten-playing.png">
+|        src="https://foo.com">
 |    </amp-video-iframe>
 |
 |    <!-- Valid -->
@@ -43,14 +42,14 @@ FAIL
 |        width="640"
 |        height="360"
 |        layout="responsive"
-|        src="https://foo.com">
-|      <div placeholder></div>
+|        src="https://foo.com"
+|        poster="images/kitten-playing.png">
 |    </amp-video-iframe>
 |
 |    <!-- Invalid: Incorrect attribute value for autoplay -->
 |    <amp-video-iframe
 >>   ^~~~~~~~~
-amp-video-iframe/0.1/test/validator-amp-video-iframe.html:50:2 The attribute 'autoplay' in tag 'AMP-VIDEO-IFRAME[poster]' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-video-iframe)
+amp-video-iframe/0.1/test/validator-amp-video-iframe.html:49:2 The attribute 'autoplay' in tag 'amp-video-iframe' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-video-iframe/)
 |        autoplay=true
 |        layout=fill
 |        width=300
@@ -82,7 +81,7 @@ amp-video-iframe/0.1/test/validator-amp-video-iframe.html:50:2 The attribute 'au
 |    <!-- Invalid: Incorrect attribute value for rotate-to-fullscreen -->
 |    <amp-video-iframe
 >>   ^~~~~~~~~
-amp-video-iframe/0.1/test/validator-amp-video-iframe.html:80:2 The attribute 'rotate-to-fullscreen' in tag 'AMP-VIDEO-IFRAME[poster]' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-video-iframe)
+amp-video-iframe/0.1/test/validator-amp-video-iframe.html:79:2 The attribute 'rotate-to-fullscreen' in tag 'amp-video-iframe' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-video-iframe/)
 |        rotate-to-fullscreen=true
 |        layout=fill
 |        width=300
diff --git a/extensions/amp-video-iframe/1.0/amp-video-iframe.css b/extensions/amp-video-iframe/1.0/amp-video-iframe.css
new file mode 100644
index 0000000000000..bdc92cf1faa8d
--- /dev/null
+++ b/extensions/amp-video-iframe/1.0/amp-video-iframe.css
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/*
+ * Pre-upgrade:
+ * - display:block element
+ * - size-defined element
+ */
+amp-video-iframe {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Pre-upgrade: size-defining element - hide children. */
+amp-video-iframe:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc) {
+  display: none;
+  content-visibility: hidden;
+}
diff --git a/extensions/amp-video-iframe/1.0/amp-video-iframe.js b/extensions/amp-video-iframe/1.0/amp-video-iframe.js
new file mode 100644
index 0000000000000..14a88297bcd05
--- /dev/null
+++ b/extensions/amp-video-iframe/1.0/amp-video-iframe.js
@@ -0,0 +1,126 @@
+/**
+ * Copyright 2020 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.
+ */
+import {BUBBLE_MESSAGE_EVENTS} from '../amp-video-iframe-api';
+import {BaseElement} from './base-element';
+import {CSS} from '../../../build/amp-video-iframe-1.0.css';
+import {MIN_VISIBILITY_RATIO_FOR_AUTOPLAY} from '../../../src/video-interface';
+import {createCustomEvent} from '../../../src/event-helper';
+import {dict} from '../../../src/core/types/object';
+import {isExperimentOn} from '../../../src/experiments';
+import {measureIntersection} from '../../../src/utils/intersection';
+import {postMessageWhenAvailable} from '../../../src/iframe-video';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-video-iframe';
+
+/**
+ * @param {!Element} element
+ * @return {!Promise<number>}
+ */
+function getIntersectionRatioMinAutoplay(element) {
+  return measureIntersection(element).then(({intersectionRatio}) =>
+    // Only post ratio > 0 when in autoplay range to prevent internal
+    // autoplay implementations that differ from ours.
+    intersectionRatio < MIN_VISIBILITY_RATIO_FOR_AUTOPLAY
+      ? 0
+      : intersectionRatio
+  );
+}
+
+class AmpVideoIframe extends BaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-video-iframe'),
+      'expected global "bento" or specific "bento-video-iframe" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+}
+
+/**
+ * @param {!MessageEvent} e
+ */
+function onMessage(e) {
+  const {currentTarget} = e;
+  const method = e.data?.['method'];
+  const messageId = e.data?.['id'];
+  if (method) {
+    if (method == 'getIntersection') {
+      // TODO(alanorozco): Throttle
+      getIntersectionRatioMinAutoplay(currentTarget).then(
+        (intersectionRatio) => {
+          postMessageWhenAvailable(
+            currentTarget,
+            JSON.stringify(
+              dict({
+                'id': messageId,
+                'intersectionRatio': intersectionRatio,
+              })
+            )
+          );
+        }
+      );
+      return;
+    }
+    throw new Error(`Unknown method ${method}`);
+  }
+  const event = e.data?.['event'];
+  if (!event) {
+    return;
+  }
+  if (event === 'analytics') {
+    // TODO(alanorozco): In classic AMP, this is an indirect chain of:
+    // VideoEvents.CUSTOM_TICK -> VideoAnalyticsEvents.CUSTOM.
+    // VideoManager "massages" the data for this event, adding a prefix.
+    // Whatever the VideoManager does, needs to be refactored.
+    return;
+  }
+  if (
+    event === 'error' ||
+    event === 'canplay' ||
+    BUBBLE_MESSAGE_EVENTS.indexOf(event) > -1
+  ) {
+    currentTarget.dispatchEvent(
+      createCustomEvent(window, event, /* detail */ null, {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+    return;
+  }
+}
+
+/**
+ * @param {string} method
+ * @return {string}
+ */
+const makeMethodMessage = (method) =>
+  JSON.stringify({
+    'event': 'method',
+    'method': method.toLowerCase(),
+  });
+
+AmpVideoIframe['staticProps'] = dict({
+  'onMessage': onMessage,
+  'makeMethodMessage': makeMethodMessage,
+});
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpVideoIframe, CSS);
+});
diff --git a/extensions/amp-video-iframe/1.0/base-element.js b/extensions/amp-video-iframe/1.0/base-element.js
new file mode 100644
index 0000000000000..98936ac8239eb
--- /dev/null
+++ b/extensions/amp-video-iframe/1.0/base-element.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2021 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.
+ */
+import {VideoBaseElement} from '../../amp-video/1.0/base-element';
+import {VideoIframe} from './component';
+
+export class BaseElement extends VideoBaseElement {}
+
+/** @override */
+BaseElement['Component'] = VideoIframe;
+
+/** @override */
+BaseElement['props'] = {
+  'autoplay': {attr: 'autoplay', type: 'boolean'},
+  'referrerpolicy': {attr: 'referrerpolicy'},
+  'implements-media-session': {attr: 'mediasession', type: 'boolean'},
+  'poster': {attr: 'poster'},
+  'src': {attr: 'src'},
+  'controls': {attr: 'controls', type: 'boolean'},
+
+  // TODO(alanorozco): These props have no internal implementation yet.
+  'dock': {attr: 'dock'},
+  'rotate-to-fullscreen': {attr: 'rotate-to-fullscreen', type: 'boolean'},
+};
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
diff --git a/extensions/amp-video-iframe/1.0/component.js b/extensions/amp-video-iframe/1.0/component.js
new file mode 100644
index 0000000000000..fb45e155876a2
--- /dev/null
+++ b/extensions/amp-video-iframe/1.0/component.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright 2021 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.
+ */
+
+export {VideoIframe} from '../../amp-video/1.0/video-iframe';
diff --git a/extensions/amp-video-iframe/1.0/storybook/Basic.amp.js b/extensions/amp-video-iframe/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..3205905f120c0
--- /dev/null
+++ b/extensions/amp-video-iframe/1.0/storybook/Basic.amp.js
@@ -0,0 +1,138 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {boolean, number, text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-video-iframe-1_0',
+  decorators: [withKnobs, withAmp],
+  parameters: {
+    extensions: [{name: 'amp-video-iframe', version: '1.0'}],
+    experiments: ['bento'],
+  },
+};
+
+const AmpVideoIframeWithKnobs = ({i, ...rest}) => {
+  const group = i ? `Player ${i + 1}` : undefined;
+
+  const width = text('width', '640px', group);
+  const height = text('height', '360px', group);
+
+  const ariaLabel = text('aria-label', 'Video Player');
+  const autoplay = boolean('autoplay', true);
+  const controls = boolean('controls', true);
+  const mediasession = boolean('mediasession', true);
+  const noaudio = boolean('noaudio', false);
+  const loop = boolean('loop', false);
+  const poster = text(
+    'poster',
+    'https://amp.dev/static/samples/img/amp-video-iframe-sample-placeholder.jpg'
+  );
+
+  const artist = text('artist', '');
+  const album = text('album', '');
+  const artwork = text('artwork', '');
+  const title = text('title', '');
+
+  const src = text(
+    'src',
+    'https://amp.dev/static/samples/files/amp-video-iframe-videojs.html'
+  );
+
+  return (
+    <amp-video-iframe
+      {...rest}
+      ariaLabel={ariaLabel}
+      autoplay={autoplay}
+      controls={controls}
+      mediasession={mediasession}
+      noaudio={noaudio}
+      loop={loop}
+      poster={poster}
+      artist={artist}
+      album={album}
+      artwork={artwork}
+      title={title}
+      layout="responsive"
+      width={width}
+      height={height}
+      src={src}
+    ></amp-video-iframe>
+  );
+};
+
+const Spacer = ({height}) => {
+  return (
+    <div
+      style={{
+        height,
+        background: `linear-gradient(to bottom, #bbb, #bbb 10%, #fff 10%, #fff)`,
+        backgroundSize: '100% 10px',
+      }}
+    ></div>
+  );
+};
+
+export const Default = () => {
+  const amount = number('Amount', 1, {}, 'Page');
+  const spacerHeight = text('Space', '80vh', 'Page');
+  const spaceAbove = boolean('Space above', false, 'Page');
+  const spaceBelow = boolean('Space below', false, 'Page');
+
+  const players = [];
+  for (let i = 0; i < amount; i++) {
+    players.push(<AmpVideoIframeWithKnobs key={i} i={i} />);
+    if (i < amount - 1) {
+      players.push(<Spacer height={spacerHeight} />);
+    }
+  }
+
+  return (
+    <>
+      {spaceAbove && <Spacer height={spacerHeight} />}
+      {players}
+      {spaceBelow && <Spacer height={spacerHeight} />}
+    </>
+  );
+};
+
+const ActionButton = ({children, ...props}) => (
+  <button style={{flex: 1, margin: '0 4px'}} {...props}>
+    {children}
+  </button>
+);
+
+export const Actions = () => {
+  return (
+    <div style="max-width: 800px">
+      <AmpVideoIframeWithKnobs id="player" />
+      <div
+        style={{
+          margin: '12px 0',
+          display: 'flex',
+        }}
+      >
+        <ActionButton on="tap:player.play">Play</ActionButton>
+        <ActionButton on="tap:player.pause">Pause</ActionButton>
+        <ActionButton on="tap:player.mute">Mute</ActionButton>
+        <ActionButton on="tap:player.unmute">Unmute</ActionButton>
+        <ActionButton on="tap:player.fullscreen">Fullscreen</ActionButton>
+      </div>
+    </div>
+  );
+};
diff --git a/extensions/amp-video-iframe/1.0/test/test-amp-video-iframe.js b/extensions/amp-video-iframe/1.0/test/test-amp-video-iframe.js
new file mode 100644
index 0000000000000..10f3182e111bd
--- /dev/null
+++ b/extensions/amp-video-iframe/1.0/test/test-amp-video-iframe.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import '../amp-video-iframe';
+import {dispatchCustomEvent} from '../../../../src/dom';
+import {htmlFor} from '../../../../src/static-template';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-video-iframe-v1.0',
+  {
+    amp: {
+      extensions: ['amp-video-iframe:1.0'],
+      canonicalUrl: 'https://canonicalexample.com/',
+    },
+  },
+  (env) => {
+    let html;
+    let element;
+
+    const waitForRender = async () => {
+      await element.buildInternal();
+      const loadPromise = element.layoutCallback();
+      const shadow = element.shadowRoot;
+      await waitFor(() => shadow.querySelector('iframe'), 'iframe mounted');
+      const iframe = shadow.querySelector('iframe');
+      dispatchCustomEvent(iframe, 'canplay', null, {bubbles: false});
+      await loadPromise;
+    };
+
+    beforeEach(() => {
+      html = htmlFor(env.win.document);
+      toggleExperiment(env.win, 'bento-video-iframe', true, true);
+    });
+
+    it('renders iframe', async () => {
+      element = html`
+        <amp-video-iframe
+          layout="responsive"
+          width="16"
+          height="9"
+        ></amp-video-iframe>
+      `;
+
+      element.setAttribute(
+        'src',
+        `http://localhost:${location.port}/test/fixtures/served/blank.html#`
+      );
+
+      env.win.document.body.appendChild(element);
+
+      await waitForRender();
+
+      const iframe = element.shadowRoot.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+    });
+  }
+);
diff --git a/extensions/amp-video-iframe/1.0/test/validator-amp-video-iframe.html b/extensions/amp-video-iframe/1.0/test/validator-amp-video-iframe.html
new file mode 100644
index 0000000000000..ba9a4207151b6
--- /dev/null
+++ b/extensions/amp-video-iframe/1.0/test/validator-amp-video-iframe.html
@@ -0,0 +1,95 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Tests for amp-video-iframe tag version 1.0
+-->
+<!DOCTYPE html>
+<html ⚡>
+  <!-- prettier-ignore -->
+  <head>
+    <meta charset="utf-8">
+    <title>amp-video-iframe 1.0</title>
+    <link rel="canonical" href="./">
+    <meta name="viewport" content="width=device-width,minimum-scale=1">
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-1.0.js"></script>
+  </head>
+  <body>
+    <!-- Valid -->
+    <amp-video-iframe
+      width="640"
+      height="360"
+      layout="responsive"
+      src="https://foo.com"
+    >
+    </amp-video-iframe>
+
+    <!-- Valid -->
+    <amp-video-iframe
+      width="640"
+      height="360"
+      layout="responsive"
+      src="https://foo.com"
+      poster="images/kitten-playing.png"
+    >
+    </amp-video-iframe>
+
+    <!-- Invalid: Incorrect attribute value for autoplay -->
+    <amp-video-iframe
+      autoplay="true"
+      layout="fill"
+      width="300"
+      height="500"
+      src="https://foo.com"
+      poster="images/kitten-playing.png"
+    >
+    </amp-video-iframe>
+
+    <!-- Valid: correct attribute value for autoplay -->
+    <amp-video-iframe
+      autoplay
+      layout="fill"
+      width="300"
+      height="500"
+      src="https://foo.com"
+      poster="images/kitten-playing.png"
+    >
+    </amp-video-iframe>
+
+    <!-- Valid: Correct attribute value for rotate-to-fullscreen -->
+    <amp-video-iframe
+      rotate-to-fullscreen
+      layout="fill"
+      width="300"
+      height="500"
+      src="https://foo.com"
+      poster="images/kitten-playing.png"
+    >
+    </amp-video-iframe>
+
+    <!-- Invalid: Incorrect attribute value for rotate-to-fullscreen -->
+    <amp-video-iframe
+      rotate-to-fullscreen="true"
+      layout="fill"
+      width="300"
+      height="500"
+      src="https://foo.com"
+      poster="images/kitten-playing.png"
+    >
+    </amp-video-iframe>
+  </body>
+</html>
diff --git a/extensions/amp-video-iframe/1.0/test/validator-amp-video-iframe.out b/extensions/amp-video-iframe/1.0/test/validator-amp-video-iframe.out
new file mode 100644
index 0000000000000..b55e795b6635b
--- /dev/null
+++ b/extensions/amp-video-iframe/1.0/test/validator-amp-video-iframe.out
@@ -0,0 +1,100 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Tests for amp-video-iframe tag version 1.0
+|  -->
+|  <!DOCTYPE html>
+|  <html ⚡>
+|    <!-- prettier-ignore -->
+|    <head>
+|      <meta charset="utf-8">
+|      <title>amp-video-iframe 1.0</title>
+|      <link rel="canonical" href="./">
+|      <meta name="viewport" content="width=device-width,minimum-scale=1">
+|      <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>
+|      <script async src="https://cdn.ampproject.org/v0.js"></script>
+|      <script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-1.0.js"></script>
+|    </head>
+|    <body>
+|      <!-- Valid -->
+|      <amp-video-iframe
+|        width="640"
+|        height="360"
+|        layout="responsive"
+|        src="https://foo.com"
+|      >
+|      </amp-video-iframe>
+|
+|      <!-- Valid -->
+|      <amp-video-iframe
+|        width="640"
+|        height="360"
+|        layout="responsive"
+|        src="https://foo.com"
+|        poster="images/kitten-playing.png"
+|      >
+|      </amp-video-iframe>
+|
+|      <!-- Invalid: Incorrect attribute value for autoplay -->
+|      <amp-video-iframe
+>>     ^~~~~~~~~
+amp-video-iframe/1.0/test/validator-amp-video-iframe.html:52:4 The attribute 'autoplay' in tag 'amp-video-iframe' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-video-iframe/)
+|        autoplay="true"
+|        layout="fill"
+|        width="300"
+|        height="500"
+|        src="https://foo.com"
+|        poster="images/kitten-playing.png"
+|      >
+|      </amp-video-iframe>
+|
+|      <!-- Valid: correct attribute value for autoplay -->
+|      <amp-video-iframe
+|        autoplay
+|        layout="fill"
+|        width="300"
+|        height="500"
+|        src="https://foo.com"
+|        poster="images/kitten-playing.png"
+|      >
+|      </amp-video-iframe>
+|
+|      <!-- Valid: Correct attribute value for rotate-to-fullscreen -->
+|      <amp-video-iframe
+|        rotate-to-fullscreen
+|        layout="fill"
+|        width="300"
+|        height="500"
+|        src="https://foo.com"
+|        poster="images/kitten-playing.png"
+|      >
+|      </amp-video-iframe>
+|
+|      <!-- Invalid: Incorrect attribute value for rotate-to-fullscreen -->
+|      <amp-video-iframe
+>>     ^~~~~~~~~
+amp-video-iframe/1.0/test/validator-amp-video-iframe.html:85:4 The attribute 'rotate-to-fullscreen' in tag 'amp-video-iframe' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-video-iframe/)
+|        rotate-to-fullscreen="true"
+|        layout="fill"
+|        width="300"
+|        height="500"
+|        src="https://foo.com"
+|        poster="images/kitten-playing.png"
+|      >
+|      </amp-video-iframe>
+|    </body>
+|  </html>
diff --git a/extensions/amp-video-iframe/OWNERS b/extensions/amp-video-iframe/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-video-iframe/OWNERS
+++ b/extensions/amp-video-iframe/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-video-iframe/amp-video-iframe-api.js b/extensions/amp-video-iframe/amp-video-iframe-api.js
new file mode 100644
index 0000000000000..d02a2dbd0a9a3
--- /dev/null
+++ b/extensions/amp-video-iframe/amp-video-iframe-api.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {VideoEvents} from '../../src/video-interface';
+
+/**
+ * @fileoverview
+ * Definitions of messages and other utilities to talk to an iframe that embeds
+ * the amp-video-iframe integration script.
+ * See https://go.amp.dev/c/amp-video-iframe#integration-inside-the-frame
+ */
+
+// ⚠️ This module should not have side-effects.
+
+/**
+ * Events allowed to be dispatched from messages.
+ * @private @const
+ */
+export const BUBBLE_MESSAGE_EVENTS = [
+  VideoEvents.PLAYING,
+  VideoEvents.PAUSE,
+  VideoEvents.ENDED,
+  VideoEvents.MUTED,
+  VideoEvents.UNMUTED,
+  VideoEvents.AD_START,
+  VideoEvents.AD_END,
+];
diff --git a/extensions/amp-video-iframe/amp-video-iframe.md b/extensions/amp-video-iframe/amp-video-iframe.md
index 0fb369c4f63af..65e6b90975ba3 100644
--- a/extensions/amp-video-iframe/amp-video-iframe.md
+++ b/extensions/amp-video-iframe/amp-video-iframe.md
@@ -32,24 +32,24 @@ supported by the AMP component library.
 
 1. If you'd like to **include a video directly on the AMP document**, you should use [`amp-video`](https://amp.dev/documentation/components/amp-video).
 
-2. If you're using a **common 3rd party** like Youtube, Vimeo or [others supported in AMP](../../spec/amp-video-interface.md), you should use their supported component (e.g. [`amp-youtube`](https://amp.dev/documentation/components/amp-youtube), [`amp-vimeo`](https://amp.dev/documentation/components/amp-vimeo)).
+2. If you're using a **common 3rd party** like Youtube, Vimeo or [others supported in AMP](../../docs/spec/amp-video-interface.md), you should use their supported component (e.g. [`amp-youtube`](https://amp.dev/documentation/components/amp-youtube), [`amp-vimeo`](https://amp.dev/documentation/components/amp-vimeo)).
 
 3. If you've built a **custom player** or are using one provided by an **unsupported 3rd party**, **you should use `amp-video-iframe`**. This is different from using [`amp-iframe`](https://amp.dev/documentation/components/amp-iframe) in that it enables
-   [Video Features on AMP](../../spec/amp-video-interface.md). See [behavior](#behavior) below for more details.
+   [Video Features on AMP](../../docs/spec/amp-video-interface.md). See [behavior](#behavior) below for more details.
 
-4. If you're a **3rd party video vendor**, **you can use `amp-video-iframe`** to [provide a simple way for authors to embed video.](#vendors)
+4. If you're a **3rd party video vendor**, **you can use `amp-video-iframe`** to [provide a simple way for authors to embed video.](#third-party-video-vendors)
 
 ## Behavior
 
 `amp-video-iframe` has several important differences from vanilla iframes and `amp-iframe`.
 
-- By default, an `amp-video-iframe` is sandboxed (see [details](#sandbox)).
+-   By default, an `amp-video-iframe` is sandboxed.
 
-- `amp-video-iframe` implements all [Video Features](../../spec/amp-video-interface.md), like autoplay, minimize-to-corner and rotate-to-fullscreen.
+-   `amp-video-iframe` implements all [Video Features](../../docs/spec/amp-video-interface.md), like autoplay, minimize-to-corner and rotate-to-fullscreen.
 
-- `amp-video-iframe` must only request resources via HTTPS.
+-   `amp-video-iframe` must only request resources via HTTPS.
 
-- `amp-video-iframe` is not scrollable.
+-   `amp-video-iframe` is not scrollable.
 
 In short, `amp-video-iframe` plugs AMP video features into an embedded document that hosts a video player.
 
@@ -61,9 +61,9 @@ Advertising use cases should use [`amp-ad`](https://amp.dev/documentation/compon
 
 The reasons for this policy are that:
 
-- `amp-video-iframe` enforces sandboxing and the sandbox is also applied to child iframes. This means landing pages may be broken, even if the ad itself appears to work.
+-   `amp-video-iframe` enforces sandboxing and the sandbox is also applied to child iframes. This means landing pages may be broken, even if the ad itself appears to work.
 
-- `amp-video-iframe` has no controlled resize mechanism.
+-   `amp-video-iframe` has no controlled resize mechanism.
 
 ## Attributes
 
@@ -75,15 +75,14 @@ source documents to know that they are embedded in the AMP context. This fragmen
 not already have a fragment.</td>
   </tr>
   <tr>
-    <td width="40%"><strong>poster (required)</strong></td>
-    <td>Points to an image URL that will be displayed while the video loads.
-</td>
+    <td width="40%"><strong>poster</strong></td>
+    <td>URL to an image displayed while the video loads. <strong>It's recommended to always set this attribute for best perceived performance.</strong></td>
   </tr>
   <tr>
     <td width="40%"><strong>autoplay</strong></td>
     <td>If this attribute is present, and the browser supports autoplay, the video will be automatically
 played as soon as it becomes visible. There are some conditions that the component needs to meet
-to be played, <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-video-interface.md#autoplay">which are outlined in the Video in AMP spec</a>.</td>
+to be played, <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-video-interface.md#autoplay">which are outlined in the Video in AMP spec</a>.</td>
   </tr>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>
@@ -139,15 +138,15 @@ Include an `amp-video-iframe` on your AMP document:
 </amp-video-iframe>
 ```
 
-`my-video-player.html` is the inner document loaded inside the frame that plays the video. This document must include and bootstrap [an integration script](#integration) so that the AMP document including the `<amp-video-iframe>` can coordinate the video's playback.
+`my-video-player.html` is the inner document loaded inside the frame that plays the video. This document must include and bootstrap [an integration script](#integration-inside-the-frame) so that the AMP document including the `<amp-video-iframe>` can coordinate the video's playback.
 
-### <a id="vendors"></a> Third-party video vendors
+### Third-party video vendors
 
-If you're a vendor that does _not_ provide a [custom video player component](../../spec/amp-video-interface.md), you can integrate with AMP in the form of an `amp-video-iframe` configuration, so authors can embed video provided through your service.
+If you're a vendor that does _not_ provide a [custom video player component](../../docs/spec/amp-video-interface.md), you can integrate with AMP in the form of an `amp-video-iframe` configuration, so authors can embed video provided through your service.
 
-Note: For most video providers, `amp-video-iframe` provides enough tools for common playback actions (see [methods](#method) and [events](#postEvent)). Refer to the [vendor player spec](../../spec/amp-3p-video.md) for more details on whether you can use `amp-video-iframe` or you should build a third-party player component instead.
+Note: For most video providers, `amp-video-iframe` provides enough tools for common playback actions (see [methods](#method) and [events](#postEvent)). Refer to the [vendor player spec](../../docs/spec/amp-3p-video.md) for more details on whether you can use `amp-video-iframe` or you should build a third-party player component instead.
 
-As a vendor, you can serve a generic [integration document](#integration) that references provided videos via URL parameters. AMP authors who use your video service only need to include an `<amp-video-iframe>` tag in their documents:
+As a vendor, you can serve a generic [integration document](#integration-inside-the-frame) that references provided videos via URL parameters. AMP authors who use your video service only need to include an `<amp-video-iframe>` tag in their documents:
 
 ```html
 <!--
@@ -176,12 +175,12 @@ As a vendor, you can serve a generic [integration document](#integration) that r
 
 The `src` and `poster` URLs are appended with [`data-param-*` attributes as query string](#data-param).
 
-The `/amp-video-iframe` document bootstraps the [integration script](#integration) so that the AMP document can coordinate with the player.
+The `/amp-video-iframe` document bootstraps the [integration script](#integration-inside-the-frame) so that the AMP document can coordinate with the player.
 
-Note: If you're a vendor hosting an integration document, feel free to [contribute a code sample to this page,](https://github.com/ampproject/amphtml/blob/master/extensions/amp-video-iframe/amp-video-iframe.md) specifying your provided
+Note: If you're a vendor hosting an integration document, feel free to [contribute a code sample to this page,](https://github.com/ampproject/amphtml/blob/main/extensions/amp-video-iframe/amp-video-iframe.md) specifying your provided
 `src` and usable `data-param-*` attributes.
 
-## <a id="integration"></a> Integration inside the frame
+## Integration inside the frame
 
 In order for the video integration to work, the embedded document (e.g. `my-video-player.html`) must include a small library:
 
@@ -219,7 +218,7 @@ playback methods and event dispatchers to plug these together. For common video
 
 ### Readymade integrations
 
-If you're using a common video framework like [JwPlayer](https://www.jwplayer.com/) or [Video.js](http://videojs.com/), you can call **`listenTo()`** for a basic, readymade integration. These integrations support all playback and UI controls when the framework provides them, see each for supported methods.
+If you're using a common video framework like [JW Player](https://www.jwplayer.com/) or [Video.js](http://videojs.com/), you can call **`listenTo()`** for a basic, readymade integration. These integrations support all playback and UI controls when the framework provides them, see each for supported methods.
 
 {% call callout('Framework APIs', type='note') %}
 Depending on which video framework you use, you'll call the `listenTo` method differently. Read on the specific APIs below.
@@ -229,7 +228,7 @@ Depending on which video framework you use, you'll call the `listenTo` method di
 You can additionally use [custom integration methods](#custom-integrations) if you require a feature not available in readymade implementations.
 {% endcall %}
 
-##### For JwPlayer
+##### For JW Player
 
 **Default supported events:** `ad_end`/`ad_start`, `canplay`, `error`, `muted`/`unmuted`, `pause`/`playing`
 
@@ -294,10 +293,10 @@ If you don't use any of the [video frameworks supported by default](#readymade-i
 
 These are the communication methods available:
 
-- [`method`](#method) to control playback.
-- [`postEvent`](#postEvent) to inform the host document about playback events.
-- [`getIntersection`](#getIntersection) to get video's viewability on the host document.
-- [`getMetadata`](#getMetadata) to get information about the host document.
+-   [`method`](#method) to control playback.
+-   [`postEvent`](#postEvent) to inform the host document about playback events.
+-   [`getIntersection`](#getIntersection) to get video's viewability on the host document.
+-   [`getMetadata`](#getMetadata) to get information about the host document.
 
 If you use a supported framework, it's possible to have more fine-grained control over the default implementation by using these same methods.
 
@@ -313,29 +312,29 @@ ampIntegration.method('play', function () {
 
 These are methods that should be implemented:
 
-- `play`
-- `pause`
-- `mute`
-- `unmute`
-- `showcontrols`
-- `hidecontrols`
-- `fullscreenenter`
-- `fullscreenexit`
+-   `play`
+-   `pause`
+-   `mute`
+-   `unmute`
+-   `showcontrols`
+-   `hidecontrols`
+-   `fullscreenenter`
+-   `fullscreenexit`
 
 You can choose to only implement this interface partially, with a few caveats:
 
-- `play` and `pause` are required for either/both of playback [actions](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/) or autoplay.
+-   `play` and `pause` are required for either/both of playback [actions](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/) or autoplay.
 
-- `mute` and `unmute` are required for autoplay.
+-   `mute` and `unmute` are required for autoplay.
 
-- `showcontrols` and `hidecontrols` are required for the best possible UX. For
-  example, when minimizing the video to the corner, a custom controls overlay is
-  shown. If you don't provide methods to hide and show controls, two sets of
-  controls could be displayed at the same time, which is a poor user experience.
+-   `showcontrols` and `hidecontrols` are required for the best possible UX. For
+    example, when minimizing the video to the corner, a custom controls overlay is
+    shown. If you don't provide methods to hide and show controls, two sets of
+    controls could be displayed at the same time, which is a poor user experience.
 
-- `fullscreenenter` and `fullscreenexit` are required for best possible UX. For
-  example, for `rotate-to-fullscreen` or the fullscreen button on minimized
-  video.
+-   `fullscreenenter` and `fullscreenexit` are required for best possible UX. For
+    example, for `rotate-to-fullscreen` or the fullscreen button on minimized
+    video.
 
 #### <a name="postEvent"></a> `postEvent(name)`
 
@@ -424,6 +423,70 @@ custom variables to log. These are available as `VIDEO_STATE`, keyed by name
 prefixed with `custom_`, i.e. the object `{myVar: 'foo'}` will be available as
 `{'custom_myVar': 'foo}`.
 
+#### <a name="getConsentData"></a> `getConsentData(callback)`
+
+The iframe document can request user consent data when the host document uses
+[`amp-consent`](hhttps://amp.dev/documentation/components/amp-consent/).
+
+Note: If you only require to block the iframe from loading when consent is not given, it's preferable to [set the `data-block-on-consent` attribute](https://amp.dev/documentation/components/amp-consent/#basic-blocking-behaviors) instead of calling `getConsentData()`
+
+The `callback` passed to the function will be executed with an object containing the following properties:
+
+-   [**`consentMetadata`**](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/customizing-extension-behaviors-on-consent.md#on-consent-metadata)
+-   [**`consentString`**](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/customizing-extension-behaviors-on-consent.md#on-consent-string)
+-   [**`consentPolicyState`**](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/customizing-extension-behaviors-on-consent.md#on-consent-state)
+-   [**`consentPolicySharedData`**](https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/customizing-extension-behaviors-on-consent.md#on-related-information)
+
+```json
+{
+  "consentMetadata": {
+    "consentStringType": 2,
+    "additionalConsent": "additional-consent-string",
+    "gdprApplies": true,
+    "purposeOne": true
+  },
+  "consentString": "accept-string",
+  "consentPolicyState": 1,
+  "consentPolicySharedData": {
+    "tfua": true,
+    "coppa": true
+  }
+}
+```
+
+For example, a video could be blocked from loading until `consentPolicyState` is
+available:
+
+```js
+// Create and listen to video once consent is given on the parent page:
+integration.getConsentData(function(consent) {
+  if (
+    consent.consentPolicyState !== /* SUFFICIENT */ 1 &&
+    consent.consentPolicyState !== /* UNKNOWN_NOT_REQUIRED */ 3
+  ) {
+    integration.postEvent('error');
+    return;
+  }
+
+  // You can use other consent values to map video consent logic as well.
+  console.log(consent);
+
+  // Initialize video and integration once consent is available.
+  var video = document.createElement(video);
+  video.style = "width: 100vw; height: 100vh";
+  video.src = document.body.getAttribute('data-videoid');
+  document.body.appendChild(video);
+
+  integration.method('play', function() {
+    video.play();
+  });
+
+  // etc...
+});
+```
+
+A complete [example using `getConsentData` is available as well.](../../examples/amp-video-iframe/frame-consent.html)
+
 #### <a name="getIntersection"></a> `getIntersection(callback)`
 
 Gets the intersection ratio (between 0 and 1) for the video element. This is useful for viewability information, e.g.
@@ -455,7 +518,17 @@ Returns an object containing metadata about the host document:
 
 ```json
 {
-  "canonicalUrl": "foo.html",
-  "sourceUrl": "bar.html"
+  "canonicalUrl": "https://example.com/canonical.html",
+  "sourceUrl": "https://example.com/amp.html",
+  "title": "My host document's title",
+  "lang": "en"
 }
 ```
+
+-   `canonicalUrl` is the canonical URL.
+
+-   `sourceUrl` is the AMPHTML URL.
+
+-   `title` is the source URL's document title at the time the `<amp-video-iframe>` is initialized. `null` when the component is loaded in a shadow root.
+
+-   `lang` is the source URL's language specified in `<html ⚡️ lang="en">`. `null` when the component is loaded in a shadow root.
diff --git a/extensions/amp-video-iframe/validator-amp-video-iframe.protoascii b/extensions/amp-video-iframe/validator-amp-video-iframe.protoascii
index 4905f1141eeec..e3e71a3a0aca0 100644
--- a/extensions/amp-video-iframe/validator-amp-video-iframe.protoascii
+++ b/extensions/amp-video-iframe/validator-amp-video-iframe.protoascii
@@ -17,8 +17,24 @@
 tags: {  # amp-video-iframe
   html_format: AMP  # Iframes not allowed in ads.
   tag_name: "SCRIPT"
+  satisfies: "amp-video-iframe 1.0"
+  excludes: "amp-video-iframe 0.1"
   extension_spec: {
     name: "amp-video-iframe"
+    version_name: "v1.0"
+    version: "1.0"
+  }
+  attr_lists: "common-extension-attrs"
+}
+
+tags: {  # amp-video-iframe
+  html_format: AMP  # Iframes not allowed in ads.
+  tag_name: "SCRIPT"
+  satisfies: "amp-video-iframe 0.1"
+  excludes: "amp-video-iframe 1.0"
+  extension_spec: {
+    name: "amp-video-iframe"
+    version_name: "v0.1"
     version: "0.1"
     version: "latest"
   }
@@ -48,6 +64,7 @@ attr_lists: {
     name: "implements-rotate-to-fullscreen"
     value: ""
   }
+  attrs: { name: "poster" }
   attrs: { name: "referrerpolicy" }
   attrs: {
     name: "rotate-to-fullscreen"
@@ -65,45 +82,15 @@ attr_lists: {
   attrs: { name: "[src]" }
 }
 
-tags: {  # <amp-video-iframe> with poster
-  html_format: AMP
-  tag_name: "AMP-VIDEO-IFRAME"
-  spec_name: "AMP-VIDEO-IFRAME[poster]"
-  requires_extension: "amp-video-iframe"
-  attrs: {
-    name: "poster"
-    mandatory: true
-  }
-  attr_lists: "extended-amp-global"
-  attr_lists: "amp-video-iframe-common"
-  attr_lists: "lightboxable-elements"
-  spec_url: "https://amp.dev/documentation/components/amp-video-iframe"
-  amp_layout: {
-    supported_layouts: FILL
-    supported_layouts: FIXED
-    supported_layouts: FIXED_HEIGHT
-    supported_layouts: FLEX_ITEM
-    supported_layouts: INTRINSIC
-    supported_layouts: NODISPLAY
-    supported_layouts: RESPONSIVE
-  }
-}
-
-tags: {  # <amp-video-iframe> with [placeholder]
+tags: {  # <amp-video-iframe>
   html_format: AMP
   disabled_by: "transformed"
   tag_name: "AMP-VIDEO-IFRAME"
-  spec_name: "AMP-VIDEO-IFRAME with [placeholder]"
   requires_extension: "amp-video-iframe"
   attr_lists: "extended-amp-global"
   attr_lists: "amp-video-iframe-common"
   attr_lists: "lightboxable-elements"
-  spec_url: "https://amp.dev/documentation/components/amp-video-iframe"
-  reference_points: {
-    tag_spec_name: "AMP-VIDEO-IFRAME > [placeholder]"
-    mandatory: true
-    unique: true
-  }
+  spec_url: "https://amp.dev/documentation/components/amp-video-iframe/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
@@ -115,24 +102,16 @@ tags: {  # <amp-video-iframe> with [placeholder]
   }
 }
 
-tags: {  # <amp-video-iframe> with [placeholder] (transformed)
+tags: {  # <amp-video-iframe> (transformed)
   html_format: AMP
   enabled_by: "transformed"
   tag_name: "AMP-VIDEO-IFRAME"
-  spec_name: "AMP-VIDEO-IFRAME with [placeholder] (transformed)"
+  spec_name: "AMP-VIDEO-IFRAME (transformed)"
   requires_extension: "amp-video-iframe"
   attr_lists: "extended-amp-global"
   attr_lists: "amp-video-iframe-common"
   attr_lists: "lightboxable-elements"
-  spec_url: "https://amp.dev/documentation/components/amp-video-iframe"
-  reference_points: {
-    tag_spec_name: "AMP-VIDEO-IFRAME > [placeholder]"
-    mandatory: true
-    unique: true
-  }
-  reference_points: {
-    tag_spec_name: "AMP-VIDEO-IFRAME > I-AMPHTML-SIZER [style]"
-  }
+  spec_url: "https://amp.dev/documentation/components/amp-video-iframe/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
@@ -143,33 +122,3 @@ tags: {  # <amp-video-iframe> with [placeholder] (transformed)
     supported_layouts: RESPONSIVE
   }
 }
-
-tags: {
-  html_format: AMP
-  tag_name: "$REFERENCE_POINT"
-  spec_name: "AMP-VIDEO-IFRAME > [placeholder]"
-  attrs: {
-    name: "placeholder"
-    mandatory: true
-  }
-  spec_url: "https://amp.dev/documentation/components/amp-video-iframe"
-}
-
-tags: {
-  html_format: AMP
-  enabled_by: "transformed"
-  tag_name: "$REFERENCE_POINT"
-  spec_name: "AMP-VIDEO-IFRAME > I-AMPHTML-SIZER [style]"
-  explicit_attrs_only: true
-  attrs: {
-    name: "style"
-    mandatory: true
-    disallowed_value_regex: "!\\s*important"
-    css_declaration: {
-      name: "display"
-      value_casei: "block"
-    }
-    css_declaration: { name: "padding-top" }
-  }
-  spec_url: "https://amp.dev/documentation/components/amp-video-iframe"
-}
diff --git a/extensions/amp-video/0.1/amp-video.js b/extensions/amp-video/0.1/amp-video.js
index 77545b08e9f8d..2cb0eda87da5d 100644
--- a/extensions/amp-video/0.1/amp-video.js
+++ b/extensions/amp-video/0.1/amp-video.js
@@ -15,13 +15,16 @@
  */
 
 import {EMPTY_METADATA} from '../../../src/mediasession-helper';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
-import {VisibilityState} from '../../../src/visibility-state';
+import {VisibilityState} from '../../../src/core/constants/visibility-state';
+import {addParamsToUrl} from '../../../src/url';
 import {
   childElement,
   childElementByTag,
   childElementsByTag,
+  dispatchCustomEvent,
   fullscreenEnter,
   fullscreenExit,
   insertAfterOrAtStart,
@@ -30,11 +33,13 @@ import {
 } from '../../../src/dom';
 import {descendsFromStory} from '../../../src/utils/story';
 import {dev, devAssert, user} from '../../../src/log';
+import {fetchCachedSources} from './video-cache';
+import {getBitrateManager} from './flexible-bitrate';
 import {getMode} from '../../../src/mode';
 import {htmlFor} from '../../../src/static-template';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {listen} from '../../../src/event-helper';
+import {listen, listenOncePromise} from '../../../src/event-helper';
 import {mutedOrUnmutedEvent} from '../../../src/iframe-video';
 import {
   propagateObjectFitStyles,
@@ -42,7 +47,7 @@ import {
   setInitialDisplay,
   setStyles,
 } from '../../../src/style';
-import {toArray} from '../../../src/types';
+import {toArray} from '../../../src/core/types/array';
 
 const TAG = 'amp-video';
 
@@ -55,8 +60,16 @@ const ATTRS_TO_PROPAGATE_ON_BUILD = [
   'crossorigin',
   'disableremoteplayback',
   'controlsList',
+  'title',
 ];
 
+/** @private {!Map<string, number>} the bitrate in Kb/s of amp_video_quality for videos in the ampproject cdn */
+const AMP_VIDEO_QUALITY_BITRATES = {
+  'high': 2000,
+  'medium': 720,
+  'low': 400,
+};
+
 /**
  * Do not propagate `autoplay`. Autoplay behavior is managed by
  *       video manager since amp-video implements the VideoInterface.
@@ -72,58 +85,7 @@ const ATTRS_TO_PROPAGATE = ATTRS_TO_PROPAGATE_ON_BUILD.concat(
 /**
  * @implements {../../../src/video-interface.VideoInterface}
  */
-class AmpVideo extends AMP.BaseElement {
-  /**
-   * @param {!AmpElement} element
-   */
-  constructor(element) {
-    super(element);
-
-    /** @private {?Element} */
-    this.video_ = null;
-
-    /** @private {boolean} */
-    this.muted_ = false;
-
-    /** @private {boolean} */
-    this.prerenderAllowed_ = false;
-
-    /** @private {!../../../src/mediasession-helper.MetadataDef} */
-    this.metadata_ = EMPTY_METADATA;
-
-    /** @private @const {!Array<!UnlistenDef>} */
-    this.unlisteners_ = [];
-
-    /** @visibleForTesting {?Element} */
-    this.posterDummyImageForTesting_ = null;
-  }
-
-  /**
-   * @param {boolean=} opt_onLayout
-   * @override
-   */
-  preconnectCallback(opt_onLayout) {
-    this.getVideoSourcesForPreconnect_().forEach((videoSrc) => {
-      Services.preconnectFor(this.win).url(
-        this.getAmpDoc(),
-        videoSrc,
-        opt_onLayout
-      );
-    });
-  }
-
-  /**
-   * @override
-   */
-  firstAttachedCallback() {
-    // Only allow prerender if video sources are cached on CDN, or if video has
-    // a poster image. Set this value in `firstAttachedCallback` since
-    // `buildCallback` is too late and the element children may not be available
-    // in the constructor.
-    const posterAttr = this.element.getAttribute('poster');
-    this.prerenderAllowed_ = !!posterAttr || this.hasAnyCachedSources_();
-  }
-
+export class AmpVideo extends AMP.BaseElement {
   /**
    * AMP Cache may selectively cache certain video sources (based on various
    * heuristics such as video type, extensions, etc...).
@@ -158,9 +120,69 @@ class AmpVideo extends AMP.BaseElement {
    * dependent on the value of `prerenderAllowed()`.
    *
    * @override
+   * @nocollapse
+   */
+  static prerenderAllowed(element) {
+    // Only allow prerender if video sources are cached on CDN, or if video has
+    // a poster image.
+
+    // Poster is available.
+    if (element.getAttribute('poster')) {
+      return true;
+    }
+
+    // Look for sources.
+    const sources = toArray(childElementsByTag(element, 'source'));
+    sources.push(element);
+    for (let i = 0; i < sources.length; i++) {
+      if (isCachedByCdn(sources[i], element)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * @param {!AmpElement} element
+   */
+  constructor(element) {
+    super(element);
+
+    /** @private {?Element} */
+    this.video_ = null;
+
+    /** @private {boolean} */
+    this.muted_ = false;
+
+    /** @private {!../../../src/mediasession-helper.MetadataDef} */
+    this.metadata_ = EMPTY_METADATA;
+
+    /** @private @const {!Array<!UnlistenDef>} */
+    this.unlisteners_ = [];
+
+    /** @visibleForTesting {?Element} */
+    this.posterDummyImageForTesting_ = null;
+
+    /** @private {?boolean} whether there are sources that will use a BitrateManager */
+    this.hasBitrateSources_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
+  }
+
+  /**
+   * @param {boolean=} opt_onLayout
+   * @override
    */
-  prerenderAllowed() {
-    return this.prerenderAllowed_;
+  preconnectCallback(opt_onLayout) {
+    this.getVideoSourcesForPreconnect_().forEach((videoSrc) => {
+      Services.preconnectFor(this.win).url(
+        this.getAmpDoc(),
+        videoSrc,
+        opt_onLayout
+      );
+    });
   }
 
   /**
@@ -211,6 +233,7 @@ class AmpVideo extends AMP.BaseElement {
     this.video_.setAttribute('webkit-playsinline', '');
     // Disable video preload in prerender mode.
     this.video_.setAttribute('preload', 'none');
+    this.checkA11yAttributeText_();
     this.propagateAttributes(
       ATTRS_TO_PROPAGATE_ON_BUILD,
       this.video_,
@@ -234,9 +257,38 @@ class AmpVideo extends AMP.BaseElement {
       'artwork': [{'src': artwork || poster || ''}],
     };
 
+    // Cached so mediapool operations (eg: swapping sources) don't interfere with this bool.
+    this.hasBitrateSources_ =
+      !!this.element.querySelector('source[data-bitrate]') ||
+      this.hasAnyCachedSources_() ||
+      this.element.hasAttribute('cache');
+
     installVideoManagerForDoc(element);
 
     Services.videoManagerForDoc(element).register(this);
+
+    // Fetch and add cached sources URLs if opted-in, and if the sources don't already contained cached URLs from the AMP Cache.
+    if (this.element.hasAttribute('cache') && !this.hasAnyCachedSources_()) {
+      return fetchCachedSources(this.element, this.getAmpDoc());
+    }
+  }
+
+  /**
+   * @private
+   * Overrides aria-label with alt if aria-label or title is not specified.
+   */
+  checkA11yAttributeText_() {
+    const altText = this.element.getAttribute('alt');
+    const hasTitle = this.element.hasAttribute('title');
+    const hasAriaLabel = this.element.hasAttribute('aria-label');
+    if (altText && !hasTitle && !hasAriaLabel) {
+      this.element.setAttribute('aria-label', altText);
+    }
+  }
+
+  /** @override */
+  detachedCallback() {
+    this.updateIsPlaying_(false);
   }
 
   /** @private */
@@ -272,7 +324,7 @@ class AmpVideo extends AMP.BaseElement {
       /* opt_removeMissingAttrs */ true
     );
     if (mutations['src']) {
-      element.dispatchCustomEvent(VideoEvents.RELOAD);
+      dispatchCustomEvent(element, VideoEvents.RELOAD);
     }
     if (mutations['artwork'] || mutations['poster']) {
       const artwork = element.getAttribute('artwork');
@@ -296,11 +348,6 @@ class AmpVideo extends AMP.BaseElement {
     // while the video is playing).
   }
 
-  /** @override */
-  viewportCallback(visible) {
-    this.element.dispatchCustomEvent(VideoEvents.VISIBILITY, {visible});
-  }
-
   /** @override */
   layoutCallback() {
     this.video_ = dev().assertElement(this.video_);
@@ -338,7 +385,13 @@ class AmpVideo extends AMP.BaseElement {
           // load.
           return Services.timerFor(this.win)
             .promise(1)
-            .then(() => this.loadPromise(this.video_));
+            .then(() => {
+              // Don't wait for the source to load if media pool is taking over.
+              if (this.isManagedByPool_()) {
+                return;
+              }
+              return this.loadPromise(this.video_);
+            });
         });
     } else {
       this.propagateLayoutChildren_();
@@ -352,15 +405,19 @@ class AmpVideo extends AMP.BaseElement {
         }
         throw reason;
       })
-      .then(() => {
-        this.element.dispatchCustomEvent(VideoEvents.LOAD);
-      });
+      .then(() => this.onVideoLoaded_());
 
     // Resolve layoutCallback right away if the video won't preload.
     if (this.element.getAttribute('preload') === 'none') {
       return;
     }
 
+    // Resolve layoutCallback as soon as all sources are appended when within a
+    // story, so it can be handled by the media pool as soon as possible.
+    if (this.isManagedByPool_()) {
+      return pendingOriginPromise;
+    }
+
     return promise;
   }
 
@@ -423,7 +480,7 @@ class AmpVideo extends AMP.BaseElement {
     const sources = toArray(childElementsByTag(this.element, 'source'));
 
     // if the `src` of `amp-video` itself is cached, move it to <source>
-    if (this.element.hasAttribute('src') && this.isCachedByCDN_(this.element)) {
+    if (this.element.hasAttribute('src') && isCachedByCdn(this.element)) {
       const src = this.element.getAttribute('src');
       const type = this.element.getAttribute('type');
       const srcSource = this.createSourceElement_(src, type);
@@ -436,13 +493,35 @@ class AmpVideo extends AMP.BaseElement {
       sources.unshift(srcSource);
     }
 
-    // Only cached sources are added during prerender.
+    // Only cached sources are added during prerender, with all the available transcodes generated by the cache.
     // Origin sources will only be added when document becomes visible.
     sources.forEach((source) => {
-      if (this.isCachedByCDN_(source)) {
-        this.video_.appendChild(source);
+      if (isCachedByCdn(source, this.element)) {
+        source.remove();
+        const qualities = Object.keys(AMP_VIDEO_QUALITY_BITRATES);
+        const origType = source.getAttribute('type');
+        const origSrc = source.getAttribute('amp-orig-src');
+        qualities.forEach((quality, index) => {
+          const cachedSource = addParamsToUrl(source.src, {
+            'amp_video_quality': quality,
+          });
+          const currSource = this.createSourceElement_(
+            cachedSource,
+            origType,
+            AMP_VIDEO_QUALITY_BITRATES[quality]
+          );
+          // Keep src of amp-orig only in last one so it adds the orig source after it.
+          if (index === qualities.length - 1) {
+            currSource.setAttribute('amp-orig-src', origSrc);
+          }
+          this.video_.appendChild(currSource);
+        });
       }
     });
+
+    if (this.video_.changedSources) {
+      this.video_.changedSources();
+    }
   }
 
   /**
@@ -458,14 +537,14 @@ class AmpVideo extends AMP.BaseElement {
     const urlService = this.getUrlService_();
 
     // If the `src` of `amp-video` itself is NOT cached, set it on video
-    if (element.hasAttribute('src') && !this.isCachedByCDN_(element)) {
+    if (element.hasAttribute('src') && !isCachedByCdn(element)) {
       urlService.assertHttpsUrl(element.getAttribute('src'), element);
       this.propagateAttributes(['src'], dev().assertElement(this.video_));
     }
 
     sources.forEach((source) => {
       // Cached sources should have been moved from <amp-video> to <video>.
-      devAssert(!this.isCachedByCDN_(source));
+      devAssert(!isCachedByCdn(source, element));
       urlService.assertHttpsUrl(source.getAttribute('src'), source);
       this.video_.appendChild(source);
     });
@@ -488,26 +567,20 @@ class AmpVideo extends AMP.BaseElement {
     tracks.forEach((track) => {
       this.video_.appendChild(track);
     });
-  }
 
-  /**
-   * @param {!Element} element
-   * @return {boolean}
-   * @private
-   */
-  isCachedByCDN_(element) {
-    const src = element.getAttribute('src');
-    const hasOrigSrcAttr = element.hasAttribute('amp-orig-src');
-    return hasOrigSrcAttr && this.getUrlService_().isProxyOrigin(src);
+    if (this.video_.changedSources) {
+      this.video_.changedSources();
+    }
   }
 
   /**
    * @param {string} src
    * @param {?string} type
+   * @param {number=} bitrate
    * @return {!Element} source element
    * @private
    */
-  createSourceElement_(src, type) {
+  createSourceElement_(src, type, bitrate = null) {
     const {element} = this;
     this.getUrlService_().assertHttpsUrl(src, element);
     const source = element.ownerDocument.createElement('source');
@@ -515,6 +588,9 @@ class AmpVideo extends AMP.BaseElement {
     if (type) {
       source.setAttribute('type', type);
     }
+    if (bitrate !== null) {
+      source.setAttribute('data-bitrate', bitrate);
+    }
     return source;
   }
 
@@ -523,23 +599,15 @@ class AmpVideo extends AMP.BaseElement {
    * @return {boolean}
    */
   hasAnyCachedSources_() {
-    return !!this.getFirstCachedSource_();
-  }
-
-  /**
-   * @private
-   * @return {?Element}
-   */
-  getFirstCachedSource_() {
     const {element} = this;
     const sources = toArray(childElementsByTag(element, 'source'));
     sources.push(element);
     for (let i = 0; i < sources.length; i++) {
-      if (this.isCachedByCDN_(sources[i])) {
-        return sources[i];
+      if (isCachedByCdn(sources[i])) {
+        return true;
       }
     }
-    return null;
+    return false;
   }
 
   /**
@@ -549,30 +617,41 @@ class AmpVideo extends AMP.BaseElement {
     const video = dev().assertElement(this.video_);
     video.addEventListener('error', (e) => this.handleMediaError_(e));
 
-    const forwardEventsUnlisten = this.forwardEvents(
-      [
-        VideoEvents.ENDED,
-        VideoEvents.LOADEDMETADATA,
-        VideoEvents.PAUSE,
-        VideoEvents.PLAYING,
-      ],
-      video
+    this.unlisteners_.push(
+      this.forwardEvents(
+        [
+          VideoEvents.ENDED,
+          VideoEvents.LOADEDMETADATA,
+          VideoEvents.LOADEDDATA,
+          VideoEvents.PAUSE,
+          VideoEvents.PLAYING,
+          VideoEvents.PLAY,
+        ],
+        video
+      )
     );
 
-    const mutedOrUnmutedEventUnlisten = listen(video, 'volumechange', () => {
-      const {muted} = this.video_;
-      if (this.muted_ == muted) {
-        return;
-      }
-      this.muted_ = muted;
-      this.element.dispatchCustomEvent(mutedOrUnmutedEvent(this.muted_));
-    });
+    this.unlisteners_.push(
+      listen(video, 'volumechange', () => {
+        const {muted} = this.video_;
+        if (this.muted_ == muted) {
+          return;
+        }
+        this.muted_ = muted;
+        dispatchCustomEvent(this.element, mutedOrUnmutedEvent(this.muted_));
+      })
+    );
 
-    this.unlisteners_.push(forwardEventsUnlisten, mutedOrUnmutedEventUnlisten);
+    ['play', 'pause', 'ended'].forEach((type) => {
+      this.unlisteners_.push(
+        listen(video, type, () => this.updateIsPlaying_(type == 'play'))
+      );
+    });
   }
 
   /** @private */
   uninstallEventHandlers_() {
+    this.updateIsPlaying_(false);
     while (this.unlisteners_.length) {
       this.unlisteners_.pop().call();
     }
@@ -588,9 +667,26 @@ class AmpVideo extends AMP.BaseElement {
       childElementByTag(this.element, 'video'),
       'Tried to reset amp-video without an underlying <video>.'
     );
-
     this.uninstallEventHandlers_();
     this.installEventHandlers_();
+    if (this.hasBitrateSources_) {
+      getBitrateManager(this.win).manage(this.video_);
+    }
+    // When source changes, video needs to trigger loaded again.
+    if (this.video_.readyState >= 1) {
+      this.onVideoLoaded_();
+      return;
+    }
+    // Video might not have the sources yet, so instead of loadPromise (which would fail),
+    // we listen for loadedmetadata.
+    listenOncePromise(this.video_, 'loadedmetadata').then(() =>
+      this.onVideoLoaded_()
+    );
+  }
+
+  /** @private */
+  onVideoLoaded_() {
+    dispatchCustomEvent(this.element, VideoEvents.LOAD);
   }
 
   /** @override */
@@ -600,6 +696,14 @@ class AmpVideo extends AMP.BaseElement {
     }
   }
 
+  /** @private */
+  updateIsPlaying_(isPlaying) {
+    if (this.isManagedByPool_()) {
+      return;
+    }
+    this.pauseHelper_.updatePlaying(isPlaying);
+  }
+
   /** @private */
   isVideoSupported_() {
     return !!this.video_.play;
@@ -659,6 +763,7 @@ class AmpVideo extends AMP.BaseElement {
     setStyles(poster, {
       'background-image': `url(${src})`,
       'background-size': 'cover',
+      'background-position': 'center',
     });
     poster.classList.add('i-amphtml-android-poster-bug');
     this.applyFillContent(poster);
@@ -841,6 +946,22 @@ class AmpVideo extends AMP.BaseElement {
   }
 }
 
+/**
+ * @param {!Element} element
+ * @param {!Element=} opt_videoElement
+ * @return {boolean}
+ * @visibleForTesting
+ */
+export function isCachedByCdn(element, opt_videoElement) {
+  const src = element.getAttribute('src');
+  const hasOrigSrcAttr = element.hasAttribute('amp-orig-src');
+  if (!hasOrigSrcAttr) {
+    return false;
+  }
+  const urlService = Services.urlForDoc(opt_videoElement || element);
+  return urlService.isProxyOrigin(src);
+}
+
 AMP.extension(TAG, '0.1', (AMP) => {
   AMP.registerElement(TAG, AmpVideo);
 });
diff --git a/extensions/amp-video/0.1/amp-video.md b/extensions/amp-video/0.1/amp-video.md
new file mode 100644
index 0000000000000..89d85514cd7c5
--- /dev/null
+++ b/extensions/amp-video/0.1/amp-video.md
@@ -0,0 +1,171 @@
+---
+$category@: media
+formats:
+  - websites
+  - stories
+  - ads
+teaser:
+  text: Replaces the HTML5 video tag.
+---
+
+<!---
+Copyright 2015 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.
+-->
+
+# amp-video
+
+## Usage
+
+A replacement for the HTML5 `video` tag; only to be used for direct HTML5 video file embeds.
+
+The `amp-video` component loads the video resource specified by its `src` attribute lazily, at a time determined by the runtime. You can control an `amp-video` component much the same way as a standard HTML5 `<video>` tag.
+
+The `amp-video` component accepts up to four unique types of HTML nodes as children:
+
+-   `source` tags: Just like in the HTML `<video>` tag, you can add `<source>` tag children to specify different source media files to play.
+-   `track` tags to enable subtitles in the video. If the track is hosted on a different origin than the document, you must add the `crossorigin` attribute to the `<amp-video>` tag. Whenever the video has narration or important audio information, make sure to include subtitles/captions for users who may not be able to hear it or have their sound turned off.
+-   a placeholder for before the video starts
+-   a fallback if the browser doesn’t support HTML5 video: One or zero immediate child nodes can have the `fallback` attribute. If present, this node and its children form the content that displays if HTML5 video is not supported on the user’s browser.
+
+[example preview="inline" playground="true" imports="amp-video"]
+
+```html
+<amp-video {% if format=='stories'%}autoplay {% endif %}controls
+  width="640"
+  height="360"
+  layout="responsive"
+  poster="{{server_for_email}}/static/inline-examples/images/kitten-playing.png">
+  <source src="{{server_for_email}}/static/inline-examples/videos/kitten-playing.webm"
+    type="video/webm" />
+  <source src="{{server_for_email}}/static/inline-examples/videos/kitten-playing.mp4"
+    type="video/mp4" />
+  <div fallback>
+    <p>This browser does not support the video element.</p>
+  </div>
+</amp-video>
+```
+
+[/example]
+
+## Attributes
+
+### src
+
+Required if no `<source>` children are present. Must be HTTPS.
+
+### poster
+
+The image for the frame to be displayed before video playback has started. By
+default, the first frame is displayed.
+
+Alternatively, you can present a click-to-play overlay.
+
+### autoplay
+
+If this attribute is present, and the browser supports autoplay, the video will be automatically
+played as soon as it becomes visible. There are some conditions that the component needs to meet
+to be played, [which are outlined in the Video in AMP spec](../../../docs/spec/amp-video-interface.md#autoplay).
+
+### controls
+
+This attribute is similar to the `controls` attribute in the HTML5 `video`. If this attribute is present, the browser offers controls to allow the user to control video playback.
+
+### controlsList
+
+Same as [controlsList](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList) attribute of HTML5 video element. Only supported by certain browsers.
+
+### dock
+
+Requires [`amp-video-docking`](../../amp-video-docking/amp-video-docking.md) component. If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
+
+### loop
+
+If present, the video will automatically loop back to the start upon reaching the end.
+
+### crossorigin
+
+Required if a `track` resource is hosted on a different origin than the document.
+
+### disableremoteplayback
+
+Determines whether the media element is allowed to have a remote playback UI such as Chromecast or AirPlay.
+
+### muted (deprecated)
+
+The `muted` attribute is deprecated and no longer has any effect. The `autoplay` attribute automatically controls the mute behavior.
+
+### noaudio
+
+Annotates the video as having no audio. This hides the equalizer icon that is displayed
+when the video has autoplay.
+
+### rotate-to-fullscreen
+
+If the video is visible, the video displays fullscreen after the user rotates their device into landscape mode. For more details, see the [Video in AMP spec](../../../docs/spec/amp-video-interface.md#rotate-to-fullscreen).
+
+### common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
+
+### Media Session API attributes
+
+The `amp-video` component implements the [Media Session API](https://developers.google.com/web/updates/2017/02/media-session), which enables developers to specify more information about the video file. The additional information for the video displays in the notification center of the user's device (along with the play/pause controls).
+
+This example contains both the `poster` and `artwork` attributes. The `poster` serves as the placeholder image before the video plays, while `artwork` is the image that displays in the notification via the MediaSession API.
+
+```html
+<amp-video
+  width="720"
+  height="305"
+  layout="responsive"
+  src="https://yourhost.com/videos/myvideo.mp4"
+  poster="https://yourhost.com/posters/poster.png"
+  artwork="https://yourhost.com/artworks/artwork.png"
+  title="Awesome video"
+  artist="Awesome artist"
+  album="Amazing album"
+>
+</amp-video>
+```
+
+#### artwork
+
+Specifies a URL to a PNG/JPG/ICO image serving as the video's artwork. If `artwork` is not present, the Media Session API helper uses either the `image` field in the `schema.org` definition, the `og:image`, or the website's `favicon`.
+
+#### artist
+
+Indicates the author of the video file, specified as a string.
+
+#### album
+
+Indicates the album/collection the video was taken from, specified as a string.
+
+#### title
+
+Indicates the name/title of the video, specified as a string. If not provided, the Media Session API helper uses either the `aria-label` attribute or falls back to the page's title.
+
+## Analytics
+
+`amp-video` supports analytics out of the box. See [video analytics](../../amp-analytics/amp-video-analytics.md) for more information.
+
+## Styling
+
+### Click-to-Play overlay
+
+Providing a click-to-play overlay is a common UX feature for video players on the web. For example, you could display a custom play icon that the user can click, as well as include the title of the video, different sized poster images, and so on. Because the `amp-video` component supports the standard `play` AMP action, you can easily implement click-to-play.
+
+## Validation
+
+See [amp-video rules](../validator-amp-video.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-video/0.1/flexible-bitrate.js b/extensions/amp-video/0.1/flexible-bitrate.js
new file mode 100644
index 0000000000000..12e5d874b7355
--- /dev/null
+++ b/extensions/amp-video/0.1/flexible-bitrate.js
@@ -0,0 +1,379 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {DomBasedWeakRef} from '../../../src/core/dom/weakref';
+import {Services} from '../../../src/services';
+import {childElement, childElementsByTag} from '../../../src/dom';
+import {dev, devAssert} from '../../../src/log';
+import {isExperimentOn} from '../../../src/experiments';
+import {listen, listenOnce} from '../../../src/event-helper';
+import {toArray} from '../../../src/core/types/array';
+
+const TAG = 'amp-video';
+
+/** @const {!Object<string, number>} */
+const BITRATE_BY_EFFECTIVE_TYPE = {
+  // We assign low values to 2G in general. None of these will likely be able
+  // to stream any bitrates we see in the wild.
+  'slow-2g': 50,
+  '2g': 50,
+  // Commonly found bitrates that should typically fit into the spectrum of
+  // these connections. Further tuning may be needed.
+  '3g': 1000,
+  '4g': 2500,
+  '5g': 5000,
+};
+
+/** @const {number} Do not downgrade the quality of a video that has loaded enough content */
+const BUFFERED_THRESHOLD_PERCENTAGE = 0.8;
+
+/** @const {string} Simulates video being buffered (fully loaded) for the bitrate algorithm. */
+const IS_VIDEO_FULLY_LOADED_OVERRIDE_FOR_TESTING =
+  'i-amphtml-is-video-fully-loaded-override-for-testing';
+
+/** @type {!BitrateManager|undefined} */
+let instance;
+/**
+ * @param {!Window} win
+ * @return {!BitrateManager}
+ */
+export function getBitrateManager(win) {
+  if (instance) {
+    return instance;
+  }
+
+  if (isExperimentOn(win, 'flexible-bitrate')) {
+    Services.performanceFor(win).addEnabledExperiment('flexible-bitrate');
+  }
+
+  return (instance = new BitrateManager(win));
+}
+
+/**
+ * Manages the sources of video elements by bitrate.
+ *
+ * Expects all sources to have a `data-bitrate` attribute with an integer
+ * value in Kilobits/s.
+ *
+ * Initializes based on the effective connection type. See BITRATE_BY_EFFECTIVE_TYPE
+ * for inferred bitrates. Lowers assumed bitrate when a video goes into `waiting`
+ * state.
+ *
+ * Potentially desirable but unsupported features
+ * - Does not ever increase the bitrate when things are going well.
+ * - Does not persist information across page loads.
+ * - Does not re-sort sources of non-playing videos that are already managed.
+ */
+export class BitrateManager {
+  /**
+   * @param {!Window} win
+   */
+  constructor(win) {
+    /** @const */
+    this.win = win;
+    /**
+     * Init set as a side effect of the this.getAcceptableBitrate_() call
+     * @private {string}
+     */
+    this.effectiveConnectionType_ = '';
+    /** @private {number} */
+    this.acceptableBitrate_ = this.getAcceptableBitrate_();
+
+    /** @private {!Array<!WeakRef<!Element>|!../../../src/utils/dom-based-weakref.DomBasedWeakRef<!Element>>} */
+    this.videos_ = [];
+  }
+
+  /**
+   * Manages bitrate changes for the given video.
+   *
+   * Callers MUST call `video.changedSources()` synchronously whenever they
+   * changed the sources of the video element.
+   *
+   * @param {!Element} video
+   */
+  manage(video) {
+    if (!isExperimentOn(this.win, 'flexible-bitrate')) {
+      return;
+    }
+    // Prevent duplicate listeners if already managing this video.
+    if (video.changedSources) {
+      return;
+    }
+    onNontrivialWait(video, () => this.downgradeVideo_(video));
+    listen(video, 'downgrade', () => this.downgradeVideo_(video));
+    video.changedSources = () => {
+      this.sortSources_(video);
+    };
+    this.videos_.push(DomBasedWeakRef.make(this.win, video));
+  }
+
+  /**
+   * Downgrade a video quality by selecting a lower bitrate source if available,
+   * then downgrade the other registered videos.
+   * @param {!Element} video
+   */
+  downgradeVideo_(video) {
+    const current = currentSource(video);
+    const newBitrate = current.bitrate_ - 1;
+    if (newBitrate >= this.acceptableBitrate_) {
+      return;
+    }
+    this.acceptableBitrate_ = newBitrate;
+    this.switchToLowerBitrate_(video, current.bitrate_);
+    this.updateOtherManagedAndPausedVideos_();
+  }
+
+  /**
+   * Returns the effective connection type as reported by the browser.
+   * Defaults to `4g` if the browser (notably WebKit) does not report it.
+   * @return {string}
+   * @private
+   */
+  getCurrentEffectiveConnectionType_() {
+    const {connection} = this.win.navigator;
+    if (connection && connection.effectiveType) {
+      return connection.effectiveType;
+    }
+    return '4g'; // Most common nowadays.
+  }
+
+  /**
+   * Returns the currently known acceptable bitrate for the user.
+   * If the effective connection type of the user has changed since we last
+   * looked, then this will overrride the result. Otherwise
+   * @return {number}
+   * @private
+   */
+  getAcceptableBitrate_() {
+    if (
+      this.effectiveConnectionType_ != this.getCurrentEffectiveConnectionType_()
+    ) {
+      this.effectiveConnectionType_ = this.getCurrentEffectiveConnectionType_();
+      this.acceptableBitrate_ =
+        BITRATE_BY_EFFECTIVE_TYPE[this.effectiveConnectionType_] ||
+        BITRATE_BY_EFFECTIVE_TYPE['4g'];
+    }
+    return this.acceptableBitrate_;
+  }
+
+  /**
+   * Sorts the sources of the given video element by their bitrates such that
+   * the sources closest matching the acceptable bitrate are in front.
+   * Returns true if the sorting changed the order of sources.
+   * @param {!Element} video
+   * @return {boolean}
+   */
+  sortSources_(video) {
+    const sources = toArray(childElementsByTag(video, 'source'));
+    // Ensure each element has the bitrate_ property
+    sources.forEach((source) => {
+      if (source.bitrate_) {
+        return;
+      }
+      const bitrate = source.getAttribute('data-bitrate');
+      source.bitrate_ = bitrate
+        ? parseInt(bitrate, 10)
+        : Number.POSITIVE_INFINITY;
+    });
+    let hasChanges = false;
+    sources.sort((a, b) => {
+      // Biggest first, bitrates above threshold to the back
+      const value =
+        this.getBitrateForComparison_(b) - this.getBitrateForComparison_(a);
+      if (value < 0) {
+        hasChanges = true;
+      }
+      return value;
+    });
+
+    if (hasChanges) {
+      sources.forEach((source) => {
+        video.appendChild(source);
+      });
+    }
+    return hasChanges;
+  }
+
+  /**
+   * Returns the bitrate of a source in such a way that bitrates that are higher
+   * than the current acceptable bitrate rank lowest.
+   * @param {!Element} source
+   * @return {number}
+   * @private
+   */
+  getBitrateForComparison_(source) {
+    let rate = source.bitrate_;
+    if (rate > this.getAcceptableBitrate_()) {
+      // We make bitrates higher than the acceptable rate negative. That means,
+      // the higher they are, the further they go in the back.
+      rate *= -1;
+    }
+    return rate;
+  }
+
+  /**
+   * Returns true if any sources of the video have a lower bitrate than the given
+   * bitrate.
+   * @param {!Element} video
+   * @param {number} bitrate
+   * @return {boolean}
+   * @private
+   */
+  hasLowerBitrate_(video, bitrate) {
+    const lowerBitrateSource = sources(video, (source) => {
+      return source.bitrate_ < bitrate;
+    });
+    return !!lowerBitrateSource;
+  }
+
+  /**
+   * Switches the video to use a lower bitrate if available.
+   * This should be called if the video is currently in waiting mode.
+   * @param {!Element} video
+   * @param {number} currentBitrate
+   * @private
+   */
+  switchToLowerBitrate_(video, currentBitrate) {
+    if (!this.hasLowerBitrate_(video, currentBitrate)) {
+      dev().fine(TAG, 'No lower bitrate available');
+      return;
+    }
+    const {currentTime} = video;
+    video.pause();
+    const hasChanges = this.sortSources_(video);
+    if (!hasChanges) {
+      video.play();
+      return;
+    }
+    video.load();
+    listenOnce(video, 'loadedmetadata', () => {
+      // Restore currentTime after loading new source.
+      video.currentTime = currentTime;
+      video.play();
+      dev().fine(TAG, 'Playing at lower bitrate %s', video.currentSrc);
+    });
+  }
+
+  /**
+   * Update other managed videos when we learn that the current selected
+   * bandwidth wasn't good. Only operates on videos that are currently paused
+   * as we never want to interrupt playing videos if we don't have to.
+   * @private
+   */
+  updateOtherManagedAndPausedVideos_() {
+    for (let i = this.videos_.length - 1; i >= 0; i--) {
+      const weakref = this.videos_[i];
+      const video = weakref.deref();
+      if (!video) {
+        this.videos_.splice(i, 1);
+        continue;
+      }
+      if (!video.paused || isVideoLoaded(video)) {
+        continue;
+      }
+      const hasChanges = this.sortSources_(video);
+      if (hasChanges) {
+        video.load();
+      }
+    }
+  }
+}
+
+/**
+ * Calls the callback if the video goes into waiting state and does not
+ * emerge from it within a short amount of time.
+ * @param {!Element} video
+ * @param {function()} callback
+ */
+function onNontrivialWait(video, callback) {
+  listen(video, 'waiting', () => {
+    // Do not trigger downgrade if not loaded metadata yet, or if video is fully loaded (eg: replay).
+    if (video.readyState < 1 || getBufferedPercentage(video) > 0.99) {
+      return;
+    }
+    let timer = null;
+    const unlisten = listenOnce(video, 'playing', () => {
+      clearTimeout(timer);
+    });
+    timer = setTimeout(() => {
+      unlisten();
+      callback();
+    }, 100);
+  });
+}
+
+/**
+ * Returns the source element for which the callback returns true.
+ * @param {!Element} video
+ * @param {function(!HTMLSourceElement):boolean} fn
+ * @return {?HTMLSourceElement}
+ */
+function sources(video, fn) {
+  return /** @type {?HTMLSourceElement} */ (
+    childElement(video, (source) => {
+      if (source.tagName != 'SOURCE') {
+        return false;
+      }
+      return fn(/** @type {!HTMLSourceElement} */ (source));
+    })
+  );
+}
+
+/**
+ * Returns the currently active source element of the video.
+ * @param {!Element} video
+ * @return {!HTMLSourceElement}
+ */
+function currentSource(video) {
+  return devAssert(
+    sources(video, (source) => {
+      return source.src == video.currentSrc;
+    })
+  );
+}
+
+/**
+ * @private
+ * @param {!Element} videoEl
+ * @return {number} the percentage buffered [0-1]
+ */
+function getBufferedPercentage(videoEl) {
+  // videoEl.duration can be NaN if video is not loaded or 0.
+  if (!videoEl.duration) {
+    return 0;
+  }
+  let bufferedSum = 0;
+  for (let i = 0; i < videoEl.buffered.length; i++) {
+    bufferedSum += videoEl.buffered.end(i) - videoEl.buffered.start(i);
+  }
+  return bufferedSum / videoEl.duration;
+}
+
+/**
+ * Checks for the video buffer percentage to know if a video is loaded
+ * (can be overriden with the attribute `i-amphtml-is-video-fully-loaded-override-for-testing`).
+ * @param {!Element} videoEl
+ * @return {boolean}
+ */
+function isVideoLoaded(videoEl) {
+  if (videoEl.hasAttribute(IS_VIDEO_FULLY_LOADED_OVERRIDE_FOR_TESTING)) {
+    return (
+      videoEl.getAttribute(IS_VIDEO_FULLY_LOADED_OVERRIDE_FOR_TESTING) ===
+      'true'
+    );
+  }
+  return getBufferedPercentage(videoEl) > BUFFERED_THRESHOLD_PERCENTAGE;
+}
diff --git a/extensions/amp-video/0.1/test-e2e/test-amp-video-analytics.js b/extensions/amp-video/0.1/test-e2e/test-amp-video-analytics.js
new file mode 100644
index 0000000000000..e298085fb54b1
--- /dev/null
+++ b/extensions/amp-video/0.1/test-e2e/test-amp-video-analytics.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright 2020 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.
+ */
+
+describes.endtoend(
+  'amp-video with video analytics',
+  {
+    fixture: 'amp-video/analytics-triggers.html',
+    environments: ['single'],
+  },
+  (env) => {
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+    });
+
+    function isPaused(elem) {
+      return controller.getElementProperty(elem, 'paused');
+    }
+
+    function sleep(ms) {
+      return new Promise((res) => setTimeout(res, ms));
+    }
+
+    it('control buttons should manipulate video box behavior', async () => {
+      const videoElem1 = await controller.findElement('#myVideo video');
+      const videoElem2 = await controller.findElement('#myVideo2 video');
+      const playBtn1 = await controller.findElement('#playBtn1');
+      const playBtn2 = await controller.findElement('#playBtn2');
+
+      // Play video 1
+      await controller.click(playBtn1);
+      await expect(isPaused(videoElem1)).to.be.false;
+      await expect(isPaused(videoElem2)).to.be.true;
+
+      // Sleep 1 second for the `video-percentage-played` event trigger
+      // and the request to be sent
+      await sleep(1000);
+      await expect(
+        'http://localhost:8000/amp4test/request-bank/e2e/deposit/tracking&id=myVideo'
+      ).to.have.been.sent;
+
+      // Play video 2
+      await controller.click(playBtn2);
+      await expect(isPaused(videoElem1)).to.be.true;
+      await expect(isPaused(videoElem2)).to.be.false;
+      // Sleep 1 second for the `video-percentage-played` event trigger
+      // and the request to be sent
+      await sleep(1000);
+      await expect(
+        'http://localhost:8000/amp4test/request-bank/e2e/deposit/tracking&id=myVideo2'
+      ).to.have.been.sent;
+    });
+  }
+);
diff --git a/extensions/amp-video/0.1/test-e2e/test-amp-video-flexible-bitrate.js b/extensions/amp-video/0.1/test-e2e/test-amp-video-flexible-bitrate.js
new file mode 100644
index 0000000000000..f894ca55caee9
--- /dev/null
+++ b/extensions/amp-video/0.1/test-e2e/test-amp-video-flexible-bitrate.js
@@ -0,0 +1,297 @@
+/**
+ * Copyright 2021 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.
+ */
+
+const VIEWPORT = {
+  HEIGHT: 768,
+  WIDTH: 1024,
+};
+
+const VIDEO_EVENTS = {
+  DOWNGRADE: 'd',
+  LOAD: 'l',
+  UNLOAD: 'u',
+};
+
+describes.endtoend(
+  'amp-video flexible bitrate',
+  {
+    fixture: 'amp-video/videos-cdn.html',
+    environments: ['single'],
+    experiments: ['flexible-bitrate'],
+    initialRect: {width: VIEWPORT.WIDTH, height: VIEWPORT.HEIGHT},
+  },
+  (env) => {
+    let controller;
+    let story;
+    let debugField;
+
+    beforeEach(async () => {
+      controller = env.controller;
+
+      story = await controller.findElement('amp-story.i-amphtml-story-loaded');
+      await controller.findElement('amp-story-page#page-1[active]');
+
+      debugField = await controller.findElement('input#flexible-bitrate-debug');
+    });
+
+    describe('first load', () => {
+      it('plays the best quality when loading the page with good connection', async () => {
+        const video1El = await controller.findElement('#video1 video');
+        await expect(
+          await controller.getElementProperty(video1El, 'currentSrc')
+        ).contains('#high');
+      });
+
+      it('does not load a video far away when on the first page', async () => {
+        const video4El = await controller.findElement('#video4 video');
+        await expect(
+          await controller.getElementProperty(video4El, 'currentSrc')
+        ).to.equal('');
+      });
+    });
+
+    describe('downgrades on active videos', () => {
+      it('changes the video to a lower quality when it buffers', async () => {
+        await forceEventOnVideo(VIDEO_EVENTS.UNLOAD, 1);
+        await forceEventOnVideo(VIDEO_EVENTS.DOWNGRADE, 1);
+
+        const video1El = await controller.findElement('#video1 video');
+
+        await expect(
+          await controller.getElementProperty(video1El, 'currentSrc')
+        ).contains('#med');
+      });
+
+      it('keeps playing the video at the same time when a video downgrades', async () => {
+        await sleep(100);
+
+        await forceEventOnVideo(VIDEO_EVENTS.UNLOAD, 1);
+        await forceEventOnVideo(VIDEO_EVENTS.DOWNGRADE, 1);
+
+        const video1El = await controller.findElement('#video1 video');
+
+        const currentTime = await controller.getElementProperty(
+          video1El,
+          'currentTime'
+        );
+
+        await expect(
+          await controller.getElementProperty(video1El, 'currentTime')
+        ).to.be.gte(currentTime);
+      });
+
+      it('does not keep reloading the video when a video buffers multiple times', async () => {
+        await forceEventOnVideo(VIDEO_EVENTS.UNLOAD, 1);
+        await forceEventOnVideo(VIDEO_EVENTS.DOWNGRADE, 1);
+        await forceEventOnVideo(VIDEO_EVENTS.DOWNGRADE, 1);
+        await forceEventOnVideo(VIDEO_EVENTS.DOWNGRADE, 1);
+
+        const video1El = await controller.findElement(
+          '#video1 video.i-amphtml-pool-video'
+        );
+
+        await expect(
+          await controller.getElementProperty(video1El, 'currentSrc')
+        ).contains('#low');
+        await expect(await controller.getElementProperty(video1El, 'paused')).is
+          .false;
+      });
+    });
+
+    describe('downgrades on inactive videos', () => {
+      it('does not load videos out of range when a video buffers', async () => {
+        await forceEventOnVideo(VIDEO_EVENTS.DOWNGRADE, 1);
+
+        const video4El = await controller.findElement('#video4 video');
+
+        // If currentSrc is empty, video is not loaded.
+        await expect(
+          await controller.getElementProperty(video4El, 'currentSrc')
+        ).equal('');
+      });
+
+      it('lowers the quality on close videos that are not already loaded when a video buffers', async () => {
+        await forceEventOnVideo(VIDEO_EVENTS.UNLOAD, 2);
+        await forceEventOnVideo(VIDEO_EVENTS.DOWNGRADE, 1);
+
+        const video2El = await controller.findElement('#video2 video');
+
+        await expect(
+          await controller.getElementProperty(video2El, 'currentSrc')
+        ).contains('#med');
+      });
+
+      it('does not lower the quality on close videos that are already loaded when a video buffers', async () => {
+        await forceEventOnVideo(VIDEO_EVENTS.LOAD, 2);
+        await forceEventOnVideo(VIDEO_EVENTS.DOWNGRADE, 1);
+
+        const video4El = await controller.findElement(
+          '#video2 video.i-amphtml-pool-video'
+        );
+
+        await expect(
+          await controller.getElementProperty(video4El, 'currentSrc')
+        ).contains('#high');
+      });
+    });
+
+    describe('source generation', () => {
+      it('configures the 3 qualities for CDN sources when a video contains a CDN url source element', async () => {
+        await controller.click(story);
+        await controller.click(story);
+
+        await controller.findElement('amp-story-page#page-3[active]');
+
+        const sources = await controller.findElements(
+          '#video3 video.i-amphtml-pool-media source'
+        );
+
+        await testElementForSrcAndBitrate(
+          controller,
+          sources[0],
+          '?amp_video_quality=high',
+          '2000'
+        );
+        await testElementForSrcAndBitrate(
+          controller,
+          sources[1],
+          '?amp_video_quality=medium',
+          '720'
+        );
+        await testElementForSrcAndBitrate(
+          controller,
+          sources[2],
+          '?amp_video_quality=low',
+          '400'
+        );
+      });
+
+      it('configures the 3 qualities for CDN sources when a video contains a CDN url src attribute', async () => {
+        await controller.click(story);
+        await controller.click(story);
+        await controller.click(story);
+        await controller.click(story);
+        await controller.click(story);
+
+        await controller.findElement('amp-story-page#page-6[active]');
+
+        const sources = await controller.findElements(
+          '#video6 video.i-amphtml-pool-media source'
+        );
+
+        await testElementForSrcAndBitrate(
+          controller,
+          sources[0],
+          '?amp_video_quality=high',
+          '2000'
+        );
+        await testElementForSrcAndBitrate(
+          controller,
+          sources[1],
+          '?amp_video_quality=medium',
+          '720'
+        );
+        await testElementForSrcAndBitrate(
+          controller,
+          sources[2],
+          '?amp_video_quality=low',
+          '400'
+        );
+      });
+
+      it('sends a network request to fetch cached sources when video is configured with the cache attribute', async () => {
+        await controller.click(story);
+        await controller.click(story);
+        await controller.click(story);
+        await controller.click(story);
+
+        await controller.findElement('amp-story-page#page-5[active]');
+
+        await controller.findElement(
+          '#video5 video.i-amphtml-replaced-content'
+        );
+
+        await expect(
+          'https://amp-dev.cdn.ampproject.org/mbv/s/amp.dev/static/samples/video/tokyo.mp4?amp_video_host_url=https%3A%2F%2Famp.dev%2F&__amp_source_origin=http%3A%2F%2Flocalhost%3A8000'
+        ).to.have.been.sent;
+      });
+    });
+
+    describe('navigation', () => {
+      it('loads a video on a far page when navigating to the page', async () => {
+        await controller.click(story);
+        await controller.click(story);
+        await controller.click(story);
+
+        await controller.findElement('amp-story-page#page-4[active]');
+
+        const video4El = await controller.findElement(
+          '#video4 video.i-amphtml-pool-media'
+        );
+
+        await expect(
+          await controller.getElementProperty(video4El, 'currentSrc')
+        ).contains('#high');
+      });
+
+      it('loads a low quality source on a far video when the connection drops and the user advances to that page', async () => {
+        await forceEventOnVideo(VIDEO_EVENTS.DOWNGRADE, 1);
+        await forceEventOnVideo(VIDEO_EVENTS.UNLOAD, 4);
+        await controller.click(story);
+        await controller.click(story);
+        await controller.click(story);
+
+        await controller.findElement('amp-story-page#page-4[active]');
+
+        await sleep(100);
+
+        const video4El = await controller.findElement(
+          '#video4 video.i-amphtml-pool-video'
+        );
+
+        await expect(
+          await controller.getElementProperty(video4El, 'currentSrc')
+        ).contains('#med');
+      });
+    });
+
+    function sleep(ms) {
+      return new Promise((res) => setTimeout(res, ms));
+    }
+
+    async function forceEventOnVideo(videoEvent, videoId, delayMs = 50) {
+      await controller.type(debugField, videoId + videoEvent);
+      await sleep(delayMs);
+    }
+  }
+);
+
+/**
+ * Tests that the element contains the {srcContains} in the [src], and the [data-bitrate] is {bitrateEquals}
+ */
+async function testElementForSrcAndBitrate(
+  controller,
+  element,
+  srcContains,
+  bitrateEquals
+) {
+  await expect(await controller.getElementProperty(element, 'src')).contains(
+    srcContains
+  );
+  await expect(
+    await controller.getElementAttribute(element, 'data-bitrate')
+  ).equals(bitrateEquals);
+}
diff --git a/extensions/amp-video/0.1/test-e2e/test-amp-video.js b/extensions/amp-video/0.1/test-e2e/test-amp-video.js
index 460dda01c1dc7..c270039838ed7 100644
--- a/extensions/amp-video/0.1/test-e2e/test-amp-video.js
+++ b/extensions/amp-video/0.1/test-e2e/test-amp-video.js
@@ -17,7 +17,7 @@
 describes.endtoend(
   'amp-video autoplay with control',
   {
-    testUrl: 'http://localhost:8000/test/fixtures/e2e/amp-video/autoplay.html',
+    fixture: 'amp-video/autoplay.html',
     environments: 'amp4ads-preset',
   },
   (env) => {
diff --git a/extensions/amp-video/0.1/test/test-amp-video.js b/extensions/amp-video/0.1/test/test-amp-video.js
index 5a1d68d6b1807..3ef53099e38e9 100644
--- a/extensions/amp-video/0.1/test/test-amp-video.js
+++ b/extensions/amp-video/0.1/test/test-amp-video.js
@@ -14,11 +14,15 @@
  * limitations under the License.
  */
 
-import '../amp-video';
+import {AmpVideo, isCachedByCdn} from '../amp-video';
 import {Services} from '../../../../src/services';
 import {VideoEvents} from '../../../../src/video-interface';
-import {VisibilityState} from '../../../../src/visibility-state';
+import {VisibilityState} from '../../../../src/core/constants/visibility-state';
+import {dispatchCustomEvent} from '../../../../src/dom';
+import {installPerformanceService} from '../../../../src/service/performance-impl';
+import {installResizeObserverStub} from '../../../../testing/resize-observer-stub';
 import {listenOncePromise} from '../../../../src/event-helper';
+import {toggleExperiment} from '../../../../src/experiments';
 
 describes.realWin(
   'amp-video',
@@ -30,11 +34,15 @@ describes.realWin(
   (env) => {
     let win, doc;
     let timer;
+    let resizeObserverStub;
 
     beforeEach(() => {
       win = env.win;
       doc = win.document;
       timer = Services.timerFor(win);
+
+      installPerformanceService(win);
+      resizeObserverStub = installResizeObserverStub(env.sandbox, win);
     });
 
     function getFooVideoSrc(filetype) {
@@ -57,13 +65,14 @@ describes.realWin(
         }
       }
       doc.body.appendChild(v);
-      await v.build();
+      await v.buildInternal();
+      const impl = await v.getImpl(false);
 
       if (opt_noLayout) {
         return;
       }
       if (opt_beforeLayoutCallback) {
-        opt_beforeLayoutCallback(v);
+        opt_beforeLayoutCallback(v, impl);
       }
       try {
         await v.layoutCallback();
@@ -84,9 +93,10 @@ describes.realWin(
         width: 160,
         height: 90,
       });
+      const impl = await v.getImpl(false);
       const preconnect = Services.preconnectFor(win);
       env.sandbox.spy(preconnect, 'url');
-      v.implementation_.preconnectCallback();
+      impl.preconnectCallback();
       expect(preconnect.url).to.have.been.calledWithExactly(
         env.sandbox.match.object, // AmpDoc
         'video.mp4',
@@ -106,6 +116,59 @@ describes.realWin(
       expect(video.hasAttribute('controls')).to.be.false;
     });
 
+    it('should load a cached video', async () => {
+      const v = await getVideo({
+        src: 'https://example-com.cdn.ampproject.org/m/s/video.mp4',
+        'amp-orig-src': 'https://example.com/video.mp4',
+        width: 160,
+        height: 90,
+      });
+      const video = v.querySelector('video');
+      expect(video.getAttribute('src')).to.be.null;
+      const sources = video.querySelectorAll('source');
+      expect(sources.length).to.equal(4);
+      expect(sources[0].getAttribute('src')).to.equal(
+        'https://example-com.cdn.ampproject.org/m/s/video.mp4?amp_video_quality=high'
+      );
+      expect(sources[1].getAttribute('src')).to.equal(
+        'https://example-com.cdn.ampproject.org/m/s/video.mp4?amp_video_quality=medium'
+      );
+      expect(sources[2].getAttribute('src')).to.equal(
+        'https://example-com.cdn.ampproject.org/m/s/video.mp4?amp_video_quality=low'
+      );
+      expect(sources[3].getAttribute('src')).to.equal(
+        'https://example.com/video.mp4'
+      );
+    });
+
+    it('should load a cached video and bitrate', async () => {
+      const source = doc.createElement('source');
+      source.setAttribute(
+        'src',
+        'https://example-com.cdn.ampproject.org/m/s/video.mp4'
+      );
+      source.setAttribute('amp-orig-src', 'https://example.com/video.mp4');
+      source.setAttribute('data-bitrate', '1000');
+      const v = await getVideo(
+        {
+          width: 160,
+          height: 90,
+        },
+        [source]
+      );
+      const video = v.querySelector('video');
+      expect(video.getAttribute('src')).to.be.null;
+      const sources = video.querySelectorAll('source');
+      expect(sources.length).to.equal(4);
+      expect(sources[0].getAttribute('data-bitrate')).to.equal('2000');
+      expect(sources[1].getAttribute('data-bitrate')).to.equal('720');
+      expect(sources[2].getAttribute('data-bitrate')).to.equal('400');
+      expect(sources[3].hasAttribute('data-bitrate')).to.be.false;
+      expect(sources[3].getAttribute('src')).to.equal(
+        'https://example.com/video.mp4'
+      );
+    });
+
     it('should load a video', async () => {
       const v = await getVideo({
         src: 'video.mp4',
@@ -216,11 +279,12 @@ describes.realWin(
           'autoplay': '',
           'muted': '',
           'loop': '',
-        }).catch((e) => {
+        }).catch(async (e) => {
           const v = doc.querySelector('amp-video');
+          const impl = await v.getImpl(false);
           // preconnectCallback could get called again after this test is done, and
           // trigger an other "start with https://" error that would crash mocha.
-          env.sandbox.stub(v.implementation_, 'preconnectCallback');
+          env.sandbox.stub(impl, 'preconnectCallback');
           throw e;
         })
       ).to.be.rejectedWith(/start with/);
@@ -393,16 +457,25 @@ describes.realWin(
       expect(video.getAttribute('poster')).to.equal('img.png');
     });
 
-    it('should pause the video when document inactive', async () => {
+    it('should auto-pause the video', async () => {
       const v = await getVideo({
         src: 'video.mp4',
         width: 160,
         height: 90,
       });
-      const impl = v.implementation_;
       const video = v.querySelector('video');
       env.sandbox.spy(video, 'pause');
-      impl.pauseCallback();
+      // The auto-pause only happens on when the video is actually playing.
+      dispatchCustomEvent(video, 'play');
+      // First send "size" event and then "no size".
+      resizeObserverStub.notifySync({
+        target: v,
+        borderBoxSize: [{inlineSize: 10, blockSize: 10}],
+      });
+      resizeObserverStub.notifySync({
+        target: v,
+        borderBoxSize: [{inlineSize: 0, blockSize: 0}],
+      });
       expect(video.pause.called).to.be.true;
     });
 
@@ -414,13 +487,12 @@ describes.realWin(
           height: 90,
         },
         null,
-        function (element) {
-          const impl = element.implementation_;
+        function (element, impl) {
           env.sandbox.stub(impl, 'isVideoSupported_').returns(false);
           env.sandbox.spy(impl, 'toggleFallback');
         }
       );
-      const impl = v.implementation_;
+      const impl = await v.getImpl(false);
       expect(impl.toggleFallback.called).to.be.true;
       expect(impl.toggleFallback).to.have.been.calledWith(true);
     });
@@ -435,8 +507,7 @@ describes.realWin(
           height: 90,
         },
         null,
-        function (element) {
-          const impl = element.implementation_;
+        function (element, impl) {
           env.sandbox.stub(impl.video_, 'play').returns(playPromise);
           impl.play();
         }
@@ -456,7 +527,8 @@ describes.realWin(
         },
         [s0, s1]
       );
-      const ele = video.implementation_.video_;
+      const impl = await video.getImpl(false);
+      const ele = impl.video_;
       ele.play = env.sandbox.stub();
       ele.load = env.sandbox.stub();
       Object.defineProperty(ele, 'error', {
@@ -486,7 +558,8 @@ describes.realWin(
         },
         [s0, s1]
       );
-      const ele = video.implementation_.video_;
+      const impl = await video.getImpl(false);
+      const ele = impl.video_;
       ele.play = env.sandbox.stub();
       ele.load = env.sandbox.stub();
       Object.defineProperty(ele, 'error', {
@@ -594,12 +667,14 @@ describes.realWin(
         width: 160,
         height: 90,
       });
-      const impl = v.implementation_;
+      const impl = await v.getImpl(false);
       await Promise.resolve();
       impl.mute();
       await listenOncePromise(v, VideoEvents.MUTED);
       impl.play();
+      const playPromise = listenOncePromise(v, VideoEvents.PLAY);
       await listenOncePromise(v, VideoEvents.PLAYING);
+      await playPromise;
       impl.pause();
       await listenOncePromise(v, VideoEvents.PAUSE);
       impl.unmute();
@@ -628,9 +703,9 @@ describes.realWin(
        *     placeholder attribute.
        * @param {boolean} addBlurClass Whether the child should have the
        *     class that allows it to be a blurred placeholder.
-       * @return {AmpImg} An amp-video potentially with a blurry placeholder
+       * @return {!Promise<AmpImg>} An amp-video potentially with a blurry placeholder
        */
-      function getVideoWithBlur(addPlaceholder, addBlurClass) {
+      async function getVideoWithBlur(addPlaceholder, addBlurClass) {
         const v = doc.createElement('amp-video');
         v.setAttribute('layout', 'fixed');
         v.setAttribute('width', '300px');
@@ -648,14 +723,14 @@ describes.realWin(
         v.setAttribute('poster', 'img.png');
         doc.body.appendChild(v);
         v.appendChild(img);
-        v.build();
-        const impl = v.implementation_;
+        v.buildInternal();
+        const impl = await v.getImpl(false);
         impl.togglePlaceholder = env.sandbox.stub();
         return impl;
       }
 
-      it('should only fade out blurry image placeholders', () => {
-        let impl = getVideoWithBlur(true, true);
+      it('should only fade out blurry image placeholders', async () => {
+        let impl = await getVideoWithBlur(true, true);
         impl.buildCallback();
         impl.layoutCallback();
         impl.firstLayoutCompleted();
@@ -664,7 +739,7 @@ describes.realWin(
         expect(img.style.opacity).to.equal('0');
         expect(impl.togglePlaceholder).to.not.be.called;
 
-        impl = getVideoWithBlur(true, false);
+        impl = await getVideoWithBlur(true, false);
         impl.buildCallback();
         impl.layoutCallback();
         impl.firstLayoutCompleted();
@@ -673,7 +748,7 @@ describes.realWin(
         expect(img.style.opacity).to.be.equal('');
         expect(impl.togglePlaceholder).to.have.been.calledWith(false);
 
-        impl = getVideoWithBlur(false, true);
+        impl = await getVideoWithBlur(false, true);
         impl.buildCallback();
         impl.layoutCallback();
         impl.firstLayoutCompleted();
@@ -682,7 +757,7 @@ describes.realWin(
         expect(img.style.opacity).to.be.equal('');
         expect(impl.togglePlaceholder).to.have.been.calledWith(false);
 
-        impl = getVideoWithBlur(false, false);
+        impl = await getVideoWithBlur(false, false);
         impl.buildCallback();
         impl.layoutCallback();
         impl.firstLayoutCompleted();
@@ -691,8 +766,8 @@ describes.realWin(
         expect(impl.togglePlaceholder).to.have.been.calledWith(false);
       });
 
-      it('should fade out the blurry image placeholder on video load', () => {
-        const impl = getVideoWithBlur(true, true);
+      it('should fade out the blurry image placeholder on video load', async () => {
+        const impl = await getVideoWithBlur(true, true);
         impl.buildCallback();
         impl.layoutCallback();
         impl.firstLayoutCompleted();
@@ -702,8 +777,8 @@ describes.realWin(
         expect(impl.togglePlaceholder).to.not.be.called;
       });
 
-      it('should fade out the blurry image placeholder on poster load', () => {
-        const impl = getVideoWithBlur(true, true);
+      it('should fade out the blurry image placeholder on poster load', async () => {
+        const impl = await getVideoWithBlur(true, true);
         impl.buildCallback();
         impl.layoutCallback();
         const el = impl.element;
@@ -733,156 +808,80 @@ describes.realWin(
           makeVisible = resolve;
         });
         visibilityStubs.whenFirstVisible.returns(visiblePromise);
+
+        video = doc.createElement('amp-video');
+        video.setAttribute('layout', 'nodisplay');
+        doc.body.appendChild(video);
       });
 
       describe('should not prerender if no cached sources', () => {
         it('with just src', () => {
-          return new Promise((resolve) => {
-            getVideo(
-              {
-                src: 'video.mp4',
-                width: 160,
-                height: 90,
-              },
-              null,
-              (element) => {
-                expect(element.implementation_.prerenderAllowed()).to.be.false;
-                resolve();
-              }
-            );
-          });
+          video.setAttribute('src', 'video.mp4');
+          expect(AmpVideo.prerenderAllowed(video)).to.be.false;
         });
 
         it('with just source', () => {
-          return new Promise((resolve) => {
-            const source = doc.createElement('source');
-            source.setAttribute('src', 'video.mp4');
-            getVideo(
-              {
-                width: 160,
-                height: 90,
-              },
-              null,
-              (element) => {
-                expect(element.implementation_.prerenderAllowed()).to.be.false;
-                resolve();
-              }
-            );
-          });
+          const source = doc.createElement('source');
+          source.setAttribute('src', 'video.mp4');
+          video.appendChild(source);
+          expect(AmpVideo.prerenderAllowed(video)).to.be.false;
         });
 
         it('with both src and source', () => {
-          return new Promise((resolve) => {
-            const source = doc.createElement('source');
-            source.setAttribute('src', 'video.mp4');
-            getVideo(
-              {
-                src: 'video.mp4',
-                width: 160,
-                height: 90,
-              },
-              [source],
-              (element) => {
-                expect(element.implementation_.prerenderAllowed()).to.be.false;
-                resolve();
-              }
-            );
-          });
+          video.setAttribute('src', 'video.mp4');
+          const source = doc.createElement('source');
+          source.setAttribute('src', 'video.mp4');
+          video.appendChild(source);
+          expect(AmpVideo.prerenderAllowed(video)).to.be.false;
         });
       });
 
       describe('should prerender cached sources', () => {
         it('with just cached src', () => {
-          return new Promise((resolve) => {
-            getVideo(
-              {
-                'src': 'https://example-com.cdn.ampproject.org/m/s/video.mp4',
-                'amp-orig-src': 'https://example.com/video.mp4',
-                width: 160,
-                height: 90,
-              },
-              null,
-              (element) => {
-                expect(element.implementation_.prerenderAllowed()).to.be.true;
-                resolve();
-              }
-            );
-          });
+          video.setAttribute(
+            'src',
+            'https://example-com.cdn.ampproject.org/m/s/video.mp4'
+          );
+          video.setAttribute('amp-orig-src', 'https://example.com/video.mp4');
+          expect(AmpVideo.prerenderAllowed(video)).to.be.true;
         });
 
         it('with just cached source', () => {
-          return new Promise((resolve) => {
-            const source = doc.createElement('source');
-            source.setAttribute(
-              'src',
-              'https://example-com.cdn.ampproject.org/m/s/video.mp4'
-            );
-            source.setAttribute(
-              'amp-orig-src',
-              'https://example.com/video.mp4'
-            );
-            getVideo(
-              {
-                width: 160,
-                height: 90,
-              },
-              [source],
-              (element) => {
-                expect(element.implementation_.prerenderAllowed()).to.be.true;
-                resolve();
-              }
-            );
-          });
+          const source = doc.createElement('source');
+          source.setAttribute(
+            'src',
+            'https://example-com.cdn.ampproject.org/m/s/video.mp4'
+          );
+          source.setAttribute('amp-orig-src', 'https://example.com/video.mp4');
+          video.appendChild(source);
+          expect(AmpVideo.prerenderAllowed(video)).to.be.true;
         });
 
         it('with a mix or cached and non-cached', () => {
-          return new Promise((resolve) => {
-            const source = doc.createElement('source');
-            source.setAttribute('src', 'video.mp4');
+          const source = doc.createElement('source');
+          source.setAttribute('src', 'video.mp4');
+          video.appendChild(source);
 
-            const cachedSource = doc.createElement('source');
-            cachedSource.setAttribute(
-              'src',
-              'https://example-com.cdn.ampproject.org/m/s/video.mp4'
-            );
-            cachedSource.setAttribute(
-              'amp-orig-src',
-              'https://example.com/video.mp4'
-            );
+          const cachedSource = doc.createElement('source');
+          cachedSource.setAttribute(
+            'src',
+            'https://example-com.cdn.ampproject.org/m/s/video.mp4'
+          );
+          cachedSource.setAttribute(
+            'amp-orig-src',
+            'https://example.com/video.mp4'
+          );
+          video.appendChild(cachedSource);
 
-            getVideo(
-              {
-                src: 'video.mp4',
-                width: 160,
-                height: 90,
-              },
-              [source, cachedSource],
-              (element) => {
-                expect(element.implementation_.prerenderAllowed()).to.be.true;
-                resolve();
-              }
-            );
-          });
+          expect(AmpVideo.prerenderAllowed(video)).to.be.true;
         });
       });
 
       describe('should prerender poster image', () => {
         it('with just cached src', () => {
-          return new Promise((resolve) => {
-            getVideo(
-              {
-                src: 'https://example.com/video.mp4',
-                poster: 'https://example.com/poster.jpg',
-                width: 160,
-                height: 90,
-              },
-              null,
-              (element) => {
-                expect(element.implementation_.prerenderAllowed()).to.be.true;
-                resolve();
-              }
-            );
-          });
+          video.setAttribute('src', 'https://example.com/video.mp4');
+          video.setAttribute('poster', 'https://example.com/poster.jpg');
+          expect(AmpVideo.prerenderAllowed(video)).to.be.true;
         });
       });
 
@@ -1162,8 +1161,7 @@ describes.realWin(
               },
               null,
               (element) => {
-                expect(element.implementation_.isCachedByCDN_(element)).to.be
-                  .false;
+                expect(isCachedByCdn(element)).to.be.false;
                 resolve();
               }
             );
@@ -1182,8 +1180,7 @@ describes.realWin(
               },
               null,
               (element) => {
-                expect(element.implementation_.isCachedByCDN_(element)).to.be
-                  .false;
+                expect(isCachedByCdn(element)).to.be.false;
                 resolve();
               }
             );
@@ -1202,14 +1199,13 @@ describes.realWin(
               height: 90,
             },
             /* children */ null,
-            (element) => {
-              const {implementation_} = element;
-              const {video_} = implementation_;
+            (element, impl) => {
+              const {video_} = impl;
 
               expect(video_.currentTime).to.equal(0);
 
               [20, 100, 0, 50, 22].forEach((timeSeconds) => {
-                implementation_.seekTo(timeSeconds);
+                impl.seekTo(timeSeconds);
                 expect(video_.currentTime).to.equal(timeSeconds);
               });
 
@@ -1218,5 +1214,25 @@ describes.realWin(
           );
         }));
     });
+
+    describe('bitrate manager', () => {
+      it('should manage bitrate of replaced video from mediapool', async () => {
+        toggleExperiment(env.win, 'flexible-bitrate', true);
+        const v = await getVideo(
+          {
+            src: 'video.mp4',
+            width: 160,
+            height: 90,
+          },
+          null,
+          null
+        );
+        const impl = await v.getImpl(false);
+        impl.hasBitrateSources_ = true;
+        impl.resetOnDomChange();
+
+        expect(impl.video_.changedSources).to.not.be.undefined;
+      });
+    });
   }
 );
diff --git a/extensions/amp-video/0.1/test/test-flexible-bitrate.js b/extensions/amp-video/0.1/test/test-flexible-bitrate.js
new file mode 100644
index 0000000000000..719eeb3f032bb
--- /dev/null
+++ b/extensions/amp-video/0.1/test/test-flexible-bitrate.js
@@ -0,0 +1,309 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import '../flexible-bitrate';
+import {BitrateManager} from '../flexible-bitrate';
+import {childElementsByTag} from '../../../../src/dom';
+import {toArray} from '../../../../src/core/types/array';
+import {toggleExperiment} from '../../../../src/experiments';
+
+describes.fakeWin('amp-video flexible-bitrate', {}, (env) => {
+  let clock;
+  beforeEach(() => {
+    clock = env.sandbox.useFakeTimers();
+    toggleExperiment(env.win, 'flexible-bitrate', true);
+  });
+
+  describe('reduce bitrate', () => {
+    const pickSmallerPhase1 = () => {
+      const m = getManager('4g');
+      const v = getVideo([4000, 1000, 3000, 2000]);
+      m.manage(v);
+      v.changedSources();
+      v.load();
+      expect(currentBitrates(v)[0]).to.equal(2000);
+      v.currentTime = 3;
+      causeWait(v);
+      expect(currentBitrates(v)[0]).to.equal(1000);
+      return v;
+    };
+
+    it('should pick a smaller video', pickSmallerPhase1);
+
+    it('should pick a smaller video and play', () => {
+      const video = pickSmallerPhase1();
+      callEvent(video, 'loadedmetadata');
+      expect(video.play).to.have.been.calledOnce;
+      expect(video.currentTime).to.equal(3);
+    });
+
+    it('should not change if no smaller video is available', () => {
+      const m = getManager('3g');
+      const v0 = getVideo([4000, 1000, 3000, 2000]);
+      m.sortSources_(v0);
+      v0.load();
+      m.manage(v0);
+      expect(currentBitrates(v0)[0]).to.equal(1000);
+      causeWait(v0);
+      expect(currentBitrates(v0)[0]).to.equal(1000);
+    });
+
+    it('should observe lower bandwidth on next sort', () => {
+      const m = getManager('4g');
+      const v0 = getVideo([4000, 1000, 3000, 2000]);
+      v0.id = 'v0';
+      const v1 = getVideo([4000, 1000, 3000, 2000]);
+      v1.id = 'v1';
+      m.sortSources_(v0);
+      v0.load();
+      m.sortSources_(v1);
+      m.manage(v0);
+      m.manage(v1);
+      expect(currentBitrates(v0)[0]).to.equal(2000);
+      expect(currentBitrates(v1)[0]).to.equal(2000);
+      causeWait(v0);
+      expect(currentBitrates(v0)[0]).to.equal(1000);
+      expect(v0.currentSrc).to.equal('http://localhost:9876/1000.mp4');
+      expect(currentBitrates(v1)[0]).to.equal(1000);
+      expect(v1.currentSrc).to.equal('http://localhost:9876/1000.mp4');
+    });
+
+    it('should not lower bitrate on loaded video', () => {
+      const m = getManager('4g');
+      const v0 = getVideo([4000, 1000, 3000, 2000]);
+      env.sandbox.stub(v0, 'duration').value(10);
+      env.sandbox.stub(v0, 'buffered').value({
+        start: () => 0,
+        end: () => 9,
+        length: 1,
+      });
+      m.manage(v0);
+      m.updateOtherManagedAndPausedVideos_();
+
+      expect(currentBitrates(v0)[0]).to.equal(4000);
+    });
+
+    it('should not lower bitrate on waiting before metadata loaded', () => {
+      const m = getManager('4g');
+      const v0 = getVideo([4000, 1000, 3000, 2000]);
+      v0.id = 'v0';
+      m.sortSources_(v0);
+      m.manage(v0);
+      // Video should not downgrade on wait since it has not started loading (we never called `load`).
+      expect(currentBitrates(v0)[0]).to.equal(2000);
+      causeWait(v0);
+      expect(currentBitrates(v0)[0]).to.equal(2000);
+    });
+  });
+
+  describe('sorting', () => {
+    it('should sort sources', () => {
+      const m = getManager('4g');
+      const v = getVideo([4000, 1000, 3000, 2000]);
+      m.sortSources_(v);
+      expect(currentBitrates(v)).to.jsonEqual([2000, 1000, 3000, 4000]);
+    });
+
+    it('should sort sources [3g]', () => {
+      const m = getManager('3g');
+      const v = getVideo([4000, 1000, 3000, 2000]);
+      m.sortSources_(v);
+      expect(currentBitrates(v)).to.jsonEqual([1000, 2000, 3000, 4000]);
+    });
+
+    it('should sort sources [2g]', () => {
+      const m = getManager('2g');
+      const v = getVideo([4000, 1000, 3000, 2000]);
+      m.sortSources_(v);
+      expect(currentBitrates(v)).to.jsonEqual([1000, 2000, 3000, 4000]);
+    });
+
+    it('should sort sources [undefined]', () => {
+      const m = getManager(undefined);
+      const v = getVideo([4000, 1000, 3000, 2000]);
+      m.sortSources_(v);
+      expect(currentBitrates(v)).to.jsonEqual([2000, 1000, 3000, 4000]);
+    });
+
+    it('should sort sources [unknown]', () => {
+      const m = getManager('some string');
+      const v = getVideo([4000, 1000, 3000, 2000]);
+      m.sortSources_(v);
+      expect(currentBitrates(v)).to.jsonEqual([2000, 1000, 3000, 4000]);
+    });
+
+    it('should sort sources [at threshold]', () => {
+      const m = getManager('4g');
+      const v = getVideo([4000, 2500, 1000, 3000]);
+      m.sortSources_(v);
+      expect(currentBitrates(v)).to.jsonEqual([2500, 1000, 3000, 4000]);
+    });
+
+    it('should sort sources [threshold at 1]', () => {
+      const m = getManager('4g');
+      const v = getVideo([2500, 4000, 1000, 3000]);
+      m.sortSources_(v);
+      expect(currentBitrates(v)).to.jsonEqual([2500, 1000, 3000, 4000]);
+    });
+
+    it('should sort sources [threshold at 4]', () => {
+      const m = getManager('4g');
+      const v = getVideo([4000, 1000, 3000, 2500]);
+      m.sortSources_(v);
+      expect(currentBitrates(v)).to.jsonEqual([2500, 1000, 3000, 4000]);
+    });
+
+    it('should sort sources [all lower]', () => {
+      const m = getManager('4g');
+      const v = getVideo([1, 2, 3, 4]);
+      m.sortSources_(v);
+      expect(currentBitrates(v)).to.jsonEqual([4, 3, 2, 1]);
+    });
+
+    it('should sort sources [all too high]', () => {
+      const m = getManager('4g');
+      const v = getVideo([40000, 10000, 30000, 20000]);
+      m.sortSources_(v);
+      expect(currentBitrates(v)).to.jsonEqual([10000, 20000, 30000, 40000]);
+    });
+
+    it('should sort sources with empty bitrate considered positive infinity', () => {
+      const m = getManager('4g');
+      const v = getVideo([4000, null, 3000, 2000]);
+      m.sortSources_(v);
+      expect(currentBitrates(v)).to.jsonEqual([2000, 3000, 4000, null]);
+    });
+
+    it('should retain order within a given bitrate', () => {
+      const m = getManager('4g');
+      const v = getVideo([4000, 1000, 3000, 2000], ['mkv', 'mp4']);
+      const cacheSource = v.firstElementChild.cloneNode();
+      cacheSource.setAttribute('amp-orig-src', 'CACHE');
+      v.insertBefore(cacheSource, v.firstElementChild);
+      m.sortSources_(v);
+      expect(currentBitrates(v)).to.jsonEqual([
+        2000, 2000, 1000, 1000, 3000, 3000, 4000, 4000, 4000,
+      ]);
+      expect(
+        toArray(childElementsByTag(v, 'source')).map((source) => {
+          return source.getAttribute('type');
+        })
+      ).to.jsonEqual([
+        'video/mkv',
+        'video/mp4',
+        'video/mkv',
+        'video/mp4',
+        'video/mkv',
+        'video/mp4',
+        'video/mkv',
+        'video/mkv',
+        'video/mp4',
+      ]);
+      expect(
+        toArray(childElementsByTag(v, 'source')).map((source) => {
+          return source.getAttribute('amp-orig-src');
+        })
+      ).to.jsonEqual([null, null, null, null, null, null, 'CACHE', null, null]);
+    });
+
+    it("should sort sources only when it's not already sorted", () => {
+      const m = getManager('4g');
+      const v0 = getVideo([4000, 1000, 3000, 2000]);
+      m.manage(v0);
+
+      // Sorting once should work, but second time it should be a noop.
+      expect(m.sortSources_(v0)).to.be.true;
+      expect(m.sortSources_(v0)).to.be.false;
+    });
+
+    it('should not call load if there are no lower bitrates', () => {
+      const m = getManager('4g');
+      const v0 = getVideo([4000, 1000, 3000, 2000]);
+      m.manage(v0);
+      m.sortSources_(v0);
+      v0.load = env.sandbox.spy();
+      m.switchToLowerBitrate_(v0, m.acceptableBitrate_);
+      expect(v0.load).to.not.have.been.called;
+    });
+  });
+
+  function currentBitrates(video) {
+    return toArray(childElementsByTag(video, 'source')).map((source) => {
+      return source.bitrate_ || parseFloat(source.getAttribute('data-bitrate'));
+    });
+  }
+
+  function getManager(effectiveType) {
+    env.win.navigator.connection = {
+      effectiveType,
+    };
+    return new BitrateManager(env.win);
+  }
+
+  function callEvent(video, type) {
+    const event = video.eventListeners.listeners.find((l) => l.type == type);
+    expect(event).to.be.not.undefined;
+    event.handler();
+  }
+
+  function causeWait(video, opt_time) {
+    callEvent(video, 'waiting');
+    clock.tick(opt_time || 100);
+  }
+
+  function getVideo(rates, opt_types) {
+    const video = env.win.document.createElement('video');
+    rates.forEach((rate) => {
+      (opt_types || ['mp4']).forEach((type) => {
+        const s = env.win.document.createElement('source');
+        s.src = `${rate}.${type}`;
+        s.setAttribute('type', `video/${type}`);
+        if (rate) {
+          s.setAttribute('data-bitrate', rate);
+        }
+        video.appendChild(s);
+      });
+    });
+    video.readyStateOverride = 0;
+
+    Object.defineProperty(video, 'currentSrc', {
+      get: () => {
+        return video.currentSrcOverride;
+      },
+    });
+    Object.defineProperty(video, 'currentTime', {
+      get: () => {
+        return video.currentTimeOverride;
+      },
+      set: (val) => {
+        video.currentTimeOverride = val;
+      },
+    });
+    Object.defineProperty(video, 'readyState', {
+      get: () => {
+        return video.readyStateOverride;
+      },
+    });
+    video.load = function () {
+      video.currentTime = 0;
+      video.currentSrcOverride = video.firstElementChild.src;
+      video.readyStateOverride = 1;
+    };
+    video.play = env.sandbox.spy();
+    env.win.document.body.appendChild(video);
+    return video;
+  }
+});
diff --git a/extensions/amp-video/0.1/test/test-video-cache.js b/extensions/amp-video/0.1/test/test-video-cache.js
new file mode 100644
index 0000000000000..3abea594b9077
--- /dev/null
+++ b/extensions/amp-video/0.1/test/test-video-cache.js
@@ -0,0 +1,258 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {AmpCacheUrlService} from '../../../amp-cache-url/0.1/amp-cache-url';
+import {Services} from '../../../../src/services';
+import {createElementWithAttributes} from '../../../../src/dom';
+import {fetchCachedSources} from '../video-cache';
+import {xhrServiceForTesting} from '../../../../src/service/xhr-impl';
+
+describes.realWin('amp-video cached-sources', {amp: true}, (env) => {
+  let cacheUrlService;
+  let extensionsService;
+  let xhrService;
+
+  beforeEach(() => {
+    xhrService = xhrServiceForTesting(env.win);
+    env.sandbox.stub(Services, 'xhrFor').returns(xhrService);
+
+    extensionsService = {
+      installExtensionForDoc: env.sandbox.spy(() => Promise.resolve()),
+    };
+    env.sandbox.stub(Services, 'extensionsFor').returns(extensionsService);
+
+    cacheUrlService = new AmpCacheUrlService();
+    env.sandbox
+      .stub(Services, 'cacheUrlServicePromiseForDoc')
+      .resolves(cacheUrlService);
+    env.sandbox.stub(Services, 'documentInfoForDoc').returns({
+      sourceUrl: 'https://example.com',
+      canonicalUrl: 'https://canonical.com',
+    });
+  });
+
+  describe('select sources', () => {
+    it('should select the source if there is only one source', async () => {
+      const videoEl = createVideo([{src: 'video1.mp4'}]);
+      const xhrSpy = env.sandbox.spy(xhrService, 'fetch');
+
+      await fetchCachedSources(videoEl, env.ampdoc);
+
+      expect(xhrSpy).to.have.been.calledWith(
+        'https://example-com.cdn.ampproject.org/mbv/s/example.com/video1.mp4?amp_video_host_url=https%3A%2F%2Fcanonical.com'
+      );
+    });
+
+    it('should select the first source if there are similar sources', async () => {
+      const videoEl = createVideo([{src: 'video1.mp4'}, {src: 'video2.mp4'}]);
+      const xhrSpy = env.sandbox.spy(xhrService, 'fetch');
+
+      await fetchCachedSources(videoEl, env.ampdoc);
+
+      expect(xhrSpy).to.have.been.calledWith(
+        'https://example-com.cdn.ampproject.org/mbv/s/example.com/video1.mp4?amp_video_host_url=https%3A%2F%2Fcanonical.com'
+      );
+    });
+
+    it('should select the mp4 source if there are many sources', async () => {
+      const videoEl = createVideo([
+        {src: 'video1.mp4'},
+        {src: 'video2.mp4', type: 'video/mp4'},
+      ]);
+      const xhrSpy = env.sandbox.spy(xhrService, 'fetch');
+
+      await fetchCachedSources(videoEl, env.ampdoc);
+
+      expect(xhrSpy).to.have.been.calledWith(
+        'https://example-com.cdn.ampproject.org/mbv/s/example.com/video2.mp4?amp_video_host_url=https%3A%2F%2Fcanonical.com'
+      );
+    });
+
+    it('should select the video[src] and never the sources children', async () => {
+      const videoEl = createVideo([
+        {src: 'video2.mp4'},
+        {src: 'video3.mp4', type: 'video/mp4'},
+      ]);
+      videoEl.setAttribute('src', 'video1.mp4');
+      const xhrSpy = env.sandbox.spy(xhrService, 'fetch');
+
+      await fetchCachedSources(videoEl, env.ampdoc);
+
+      expect(xhrSpy).to.have.been.calledWith(
+        'https://example-com.cdn.ampproject.org/mbv/s/example.com/video1.mp4?amp_video_host_url=https%3A%2F%2Fcanonical.com'
+      );
+    });
+  });
+
+  describe('url forming', () => {
+    it('should send the request to the correct address if the video has an absolute url', async () => {
+      const videoEl = createVideo([{'src': 'https://website.com/video.html'}]);
+      const xhrSpy = env.sandbox.spy(xhrService, 'fetch');
+
+      await fetchCachedSources(videoEl, env.ampdoc);
+
+      expect(xhrSpy).to.have.been.calledWith(
+        'https://website-com.cdn.ampproject.org/mbv/s/website.com/video.html?amp_video_host_url=https%3A%2F%2Fcanonical.com'
+      );
+    });
+
+    it('should send the request to the correct address if the video has a relative url', async () => {
+      const videoEl = createVideo([{'src': 'video.html'}]);
+      const xhrSpy = env.sandbox.spy(xhrService, 'fetch');
+
+      await fetchCachedSources(videoEl, env.ampdoc);
+
+      expect(xhrSpy).to.have.been.calledWith(
+        'https://example-com.cdn.ampproject.org/mbv/s/example.com/video.html?amp_video_host_url=https%3A%2F%2Fcanonical.com'
+      );
+    });
+  });
+
+  describe('add sources', () => {
+    it('should set the correct attributes on the source added', async () => {
+      env.sandbox.stub(xhrService, 'fetch').resolves({
+        json: () =>
+          Promise.resolve({
+            sources: [
+              {'url': 'video1.mp4', 'bitrate_kbps': 700, type: 'video/mp4'},
+            ],
+          }),
+      });
+
+      const videoEl = createVideo([{src: 'video.mp4'}]);
+      await fetchCachedSources(videoEl, env.ampdoc);
+
+      const addedSource = videoEl.querySelector('source');
+      expect(addedSource.getAttribute('src')).to.equal('video1.mp4');
+      expect(addedSource.getAttribute('data-bitrate')).to.equal('700');
+      expect(addedSource.getAttribute('type')).to.equal('video/mp4');
+    });
+
+    it('should add the sources sorted by bitrate', async () => {
+      env.sandbox.stub(xhrService, 'fetch').resolves({
+        json: () =>
+          Promise.resolve({
+            sources: [
+              {'url': 'video1.mp4', 'bitrate_kbps': 700, type: 'video/mp4'},
+              {'url': 'video2.mp4', 'bitrate_kbps': 2000, type: 'video/mp4'},
+              {'url': 'video3.mp4', 'bitrate_kbps': 1500, type: 'video/mp4'},
+            ],
+          }),
+      });
+
+      const videoEl = createVideo([{src: 'video.mp4'}]);
+
+      await fetchCachedSources(videoEl, env.ampdoc);
+
+      const addedSources = videoEl.querySelectorAll('source');
+      expect(addedSources[0].getAttribute('data-bitrate')).to.equal('2000');
+      expect(addedSources[1].getAttribute('data-bitrate')).to.equal('1500');
+      expect(addedSources[2].getAttribute('data-bitrate')).to.equal('700');
+    });
+
+    it('should add video[src] as the last fallback source', async () => {
+      env.sandbox.stub(xhrService, 'fetch').resolves({
+        json: () =>
+          Promise.resolve({
+            sources: [
+              {'url': 'video1.mp4', 'bitrate_kbps': 700, type: 'video/mp4'},
+              {'url': 'video2.mp4', 'bitrate_kbps': 2000, type: 'video/mp4'},
+              {'url': 'video3.mp4', 'bitrate_kbps': 1500, type: 'video/mp4'},
+            ],
+          }),
+      });
+
+      const videoEl = createVideo([{src: 'video.mp4'}]);
+      videoEl.setAttribute('src', 'video1.mp4');
+      videoEl.setAttribute('type', 'video/mp4');
+
+      await fetchCachedSources(videoEl, env.ampdoc);
+
+      const lastSource = videoEl.querySelector('source:last-of-type');
+      expect(lastSource.getAttribute('src')).to.equal('video1.mp4');
+      expect(lastSource.getAttribute('type')).to.equal('video/mp4');
+    });
+
+    it('should clear the unused sources when video[src]', async () => {
+      env.sandbox.stub(xhrService, 'fetch').resolves({
+        json: () =>
+          Promise.resolve({
+            sources: [
+              {'url': 'video1.mp4', 'bitrate_kbps': 700, type: 'video/mp4'},
+              {'url': 'video2.mp4', 'bitrate_kbps': 2000, type: 'video/mp4'},
+              {'url': 'video3.mp4', 'bitrate_kbps': 1500, type: 'video/mp4'},
+            ],
+          }),
+      });
+
+      const videoEl = createVideo([
+        {src: 'video.mp4'},
+        {src: 'video.mp4'},
+        {src: 'video.mp4'},
+        {src: 'video.mp4'},
+        {src: 'video.mp4'},
+      ]);
+      videoEl.setAttribute('src', 'video1.mp4');
+
+      await fetchCachedSources(videoEl, env.ampdoc);
+
+      const addedSources = videoEl.querySelectorAll('source');
+      expect(addedSources).to.have.lengthOf(4); // 3 from cache + 1 fallback.
+    });
+  });
+
+  describe('end to end', () => {
+    it('should create the sources from the request with the correct attributes', async () => {
+      env.sandbox.stub(xhrService, 'fetch').resolves({
+        json: () =>
+          Promise.resolve({
+            sources: [
+              {'url': 'video.mp4', 'bitrate_kbps': 700, 'type': 'video/mp4'},
+            ],
+          }),
+      });
+
+      const videoEl = createVideo([{src: 'video.mp4'}]);
+
+      await fetchCachedSources(videoEl, env.ampdoc);
+
+      expect(videoEl.querySelector('source[data-bitrate]')).to.not.be.null;
+    });
+    it('should not create the sources if there is amp-orig-src attribute', async () => {
+      const videoEl = createVideo([{'src': 'video.mp4', 'amp-orig-src': ''}]);
+      await fetchCachedSources(videoEl, env.ampdoc);
+
+      expect(videoEl.querySelector('source[data-bitrate]')).to.be.null;
+    });
+  });
+
+  function createVideo(children) {
+    const videoEl = createElementWithAttributes(env.win.document, 'amp-video', {
+      'cache': 'google',
+      'layout': 'fill',
+    });
+    children.forEach((childJson) => {
+      const sourceEl = createElementWithAttributes(
+        env.win.document,
+        'source',
+        childJson
+      );
+      videoEl.appendChild(sourceEl);
+    });
+    env.win.document.body.appendChild(videoEl);
+    return videoEl;
+  }
+});
diff --git a/extensions/amp-video/0.1/test/validator-amp-video-cache.html b/extensions/amp-video/0.1/test/validator-amp-video-cache.html
new file mode 100644
index 0000000000000..11ee427197945
--- /dev/null
+++ b/extensions/amp-video/0.1/test/validator-amp-video-cache.html
@@ -0,0 +1,48 @@
+<!--
+  Copyright 2017 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.
+-->
+<!--
+  Test Description:
+  Tests for amp-video tag with a video cache specified.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+</head>
+<body>
+  <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+    <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
+      <amp-story-grid-layer template="horizontal">
+        <amp-video cache="google"
+          autoplay
+          width="640"
+          height="360"
+          layout="responsive"
+          poster="images/kitten-playing.png">
+          <source src="videos/kitten-playing.webm"
+            type="video/mp4" />
+        </amp-video>
+      </amp-story-grid-layer>
+    </amp-story-page>
+  </amp-story>
+</body>
+</html>
diff --git a/extensions/amp-video/0.1/test/validator-amp-video-cache.out b/extensions/amp-video/0.1/test/validator-amp-video-cache.out
new file mode 100644
index 0000000000000..9a2a126cc54d5
--- /dev/null
+++ b/extensions/amp-video/0.1/test/validator-amp-video-cache.out
@@ -0,0 +1,49 @@
+PASS
+|  <!--
+|    Copyright 2017 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for amp-video tag with a video cache specified.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+|  </head>
+|  <body>
+|    <amp-story standalone title="My Story" publisher="Me" publisher-logo-src="http://me.com/logo.png" poster-portrait-src="http://me.com/portrait.jpg" poster-square-src="http://me.com/square.jpg" poster-landscape-src="http://me.com/landscape.jpg" background-audio="http://me.com/path/to/my.mp3" entity="Someone else" entity-logo-src="http://someoneelse.com/logo.png" entity-url="http://someoneelse.com/profile">
+|      <amp-story-page id="1" background-audio="path/to/my.mp3" auto-advance-after="any-value">
+|        <amp-story-grid-layer template="horizontal">
+|          <amp-video cache="google"
+|            autoplay
+|            width="640"
+|            height="360"
+|            layout="responsive"
+|            poster="images/kitten-playing.png">
+|            <source src="videos/kitten-playing.webm"
+|              type="video/mp4" />
+|          </amp-video>
+|        </amp-story-grid-layer>
+|      </amp-story-page>
+|    </amp-story>
+|  </body>
+|  </html>
diff --git a/extensions/amp-video/0.1/test/validator-amp-video.html b/extensions/amp-video/0.1/test/validator-amp-video.html
index a289d00a8cc8d..83bcbd27fd53d 100644
--- a/extensions/amp-video/0.1/test/validator-amp-video.html
+++ b/extensions/amp-video/0.1/test/validator-amp-video.html
@@ -54,12 +54,12 @@
     loop preload="metadata" controls></amp-video>
 
   <!-- Valid: Media Session Attributes -->
-  <amp-video layout=fill width=300 height=500 
+  <amp-video layout=fill width=300 height=500
     title="Hello" artist="World" artwork="example.jpg" poster="example.jpg"
     ></amp-video>
 
   <!-- Valid: Most attributes are bindable -->
-  <amp-video layout=fill width=300 height=500 
+  <amp-video layout=fill width=300 height=500
     [title]="Hello" [artist]="World" [artwork]="example.jpg" [poster]="example.jpg"
     ></amp-video>
 
@@ -69,5 +69,8 @@
   <!-- Invalid: Incorrect attribute value for rotate-to-fullscreen -->
   <amp-video rotate-to-fullscreen=true layout=fill width=300 height=500
     loop preload="metadata" controls></amp-video>
+  <!-- Invalid: Cannot enable google cache on non-stories video -->
+  <amp-video cache="google" layout=fill width=300 height=500
+    loop preload="metadata" controls></amp-video>
 </body>
 </html>
diff --git a/extensions/amp-video/0.1/test/validator-amp-video.out b/extensions/amp-video/0.1/test/validator-amp-video.out
index ffff74160bbad..757f446121c46 100644
--- a/extensions/amp-video/0.1/test/validator-amp-video.out
+++ b/extensions/amp-video/0.1/test/validator-amp-video.out
@@ -49,9 +49,9 @@ FAIL
 |    <!-- Invalid: Incorrect attribute value for autoplay -->
 |    <amp-video autoplay=true layout=fill width=300 height=500
 >>   ^~~~~~~~~
-amp-video/0.1/test/validator-amp-video.html:49:2 The attribute 'autoplay' in tag 'amp-video' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-video)
+amp-video/0.1/test/validator-amp-video.html:49:2 The attribute 'autoplay' in tag 'amp-video' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-video/)
 >>   ^~~~~~~~~
-amp-video/0.1/test/validator-amp-video.html:49:2 The attribute 'loop' in tag 'amp-video' is set to the invalid value '1'. (see https://amp.dev/documentation/components/amp-video)
+amp-video/0.1/test/validator-amp-video.html:49:2 The attribute 'loop' in tag 'amp-video' is set to the invalid value '1'. (see https://amp.dev/documentation/components/amp-video/)
 |      loop="1" preload="metadata" controls="controls"></amp-video>
 |
 |    <!-- Valid: Correct attribute value for rotate-to-fullscreen -->
@@ -59,12 +59,12 @@ amp-video/0.1/test/validator-amp-video.html:49:2 The attribute 'loop' in tag 'am
 |      loop preload="metadata" controls></amp-video>
 |
 |    <!-- Valid: Media Session Attributes -->
-|    <amp-video layout=fill width=300 height=500 
+|    <amp-video layout=fill width=300 height=500
 |      title="Hello" artist="World" artwork="example.jpg" poster="example.jpg"
 |      ></amp-video>
 |
 |    <!-- Valid: Most attributes are bindable -->
-|    <amp-video layout=fill width=300 height=500 
+|    <amp-video layout=fill width=300 height=500
 |      [title]="Hello" [artist]="World" [artwork]="example.jpg" [poster]="example.jpg"
 |      ></amp-video>
 |
@@ -76,7 +76,12 @@ amp-video/0.1/test/validator-amp-video.html:67:2 The attribute 'dock' requires i
 |    <!-- Invalid: Incorrect attribute value for rotate-to-fullscreen -->
 |    <amp-video rotate-to-fullscreen=true layout=fill width=300 height=500
 >>   ^~~~~~~~~
-amp-video/0.1/test/validator-amp-video.html:70:2 The attribute 'rotate-to-fullscreen' in tag 'amp-video' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-video)
+amp-video/0.1/test/validator-amp-video.html:70:2 The attribute 'rotate-to-fullscreen' in tag 'amp-video' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-video/)
+|      loop preload="metadata" controls></amp-video>
+|    <!-- Invalid: Cannot enable google cache on non-stories video -->
+|    <amp-video cache="google" layout=fill width=300 height=500
+>>   ^~~~~~~~~
+amp-video/0.1/test/validator-amp-video.html:73:2 The attribute 'cache' may not appear in tag 'amp-video'. (see https://amp.dev/documentation/components/amp-video/)
 |      loop preload="metadata" controls></amp-video>
 |  </body>
 |  </html>
diff --git a/extensions/amp-video/0.1/video-cache.js b/extensions/amp-video/0.1/video-cache.js
new file mode 100644
index 0000000000000..7d15775679f76
--- /dev/null
+++ b/extensions/amp-video/0.1/video-cache.js
@@ -0,0 +1,147 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {Services} from '../../../src/services';
+import {addParamsToUrl, resolveRelativeUrl} from '../../../src/url';
+import {
+  createElementWithAttributes,
+  iterateCursor,
+  matches,
+  removeElement,
+} from '../../../src/dom';
+import {toArray} from '../../../src/core/types/array';
+import {user} from '../../../src/log';
+
+/**
+ * Add the caching sources to the video if opted in.
+ * The request is sent to the AMP cache url with /mbv path prefix,
+ * and appends the document canonical url as the queryParam `amp_video_host_url`.
+ *
+ * @param {!Element} videoEl
+ * @param {!AmpDoc} ampdoc
+ * @return {!Promise}
+ */
+export function fetchCachedSources(videoEl, ampdoc) {
+  const {win} = ampdoc;
+  if (
+    !(
+      videoEl.getAttribute('src') ||
+      videoEl.querySelector('source[src]')?.getAttribute('src')
+    )
+  ) {
+    user().error('AMP-VIDEO', 'Video cache not properly configured');
+    return Promise.resolve();
+  }
+  const {canonicalUrl, sourceUrl} = Services.documentInfoForDoc(win.document);
+  maybeReplaceSrcWithSourceElement(videoEl, win);
+  const videoUrl = resolveRelativeUrl(selectVideoSource(videoEl), sourceUrl);
+  return getCacheUrlService(videoEl, ampdoc)
+    .then((service) => service.createCacheUrl(videoUrl))
+    .then((cacheUrl) => {
+      const requestUrl = addParamsToUrl(cacheUrl.replace('/c/', '/mbv/'), {
+        'amp_video_host_url':
+          /* document url that contains the video */ canonicalUrl,
+      });
+      return Services.xhrFor(win).fetch(requestUrl);
+    })
+    .then((response) => response.json())
+    .then((jsonResponse) =>
+      applySourcesToVideo(videoEl, jsonResponse['sources'])
+    )
+    .catch(() => {
+      // If cache fails, video should still load properly.
+    });
+}
+
+/**
+ * Selects and returns the prioritized video source URL
+ * @param {!Element} videoEl
+ * @return {?string}
+ */
+function selectVideoSource(videoEl) {
+  const possibleSources = toArray(videoEl.querySelectorAll('source[src]'));
+  for (let i = 0; i < possibleSources.length; i++) {
+    if (matches(possibleSources[i], '[type*="video/mp4"]')) {
+      return possibleSources[i].getAttribute('src');
+    }
+  }
+  return possibleSources[0]?.getAttribute('src');
+}
+
+/**
+ *
+ * @param {!Element} videoEl
+ * @param {!Array<!Object>} sources
+ */
+function applySourcesToVideo(videoEl, sources) {
+  sources
+    .sort((a, b) => a['bitrate_kbps'] - b['bitrate_kbps'])
+    .forEach((source) => {
+      const sourceEl = createElementWithAttributes(
+        videoEl.ownerDocument,
+        'source',
+        {
+          'src': source['url'],
+          'type': source['type'],
+          'data-bitrate': source['bitrate_kbps'],
+        }
+      );
+      videoEl.insertBefore(sourceEl, videoEl.firstChild);
+    });
+}
+
+/**
+ * If present, moves the src attribute to a source element to enable playing
+ * from multiple sources: the cached ones and the fallback initial src.
+ * @param {!Element} videoEl
+ * @param {!Window} win
+ */
+function maybeReplaceSrcWithSourceElement(videoEl, win) {
+  if (!videoEl.hasAttribute('src')) {
+    return;
+  }
+  const sourceEl = win.document.createElement('source');
+  const srcAttr = videoEl.getAttribute('src');
+  sourceEl.setAttribute('src', srcAttr);
+
+  const typeAttr = videoEl.getAttribute('type');
+  if (typeAttr) {
+    sourceEl.setAttribute('type', typeAttr);
+  }
+
+  // Remove the src attr so the source children can play.
+  videoEl.removeAttribute('src');
+  videoEl.removeAttribute('type');
+
+  // Remove all existing sources as they are never supposed to play for a video
+  // that has a src, cf https://html.spec.whatwg.org/#concept-media-load-algorithm
+  const sourceEls = videoEl.querySelectorAll('source');
+  iterateCursor(sourceEls, (el) => removeElement(el));
+
+  videoEl.insertBefore(sourceEl, videoEl.firstChild);
+}
+
+/**
+ * Lazy loads the amp-cache-url extension if needed and retrieves its service.
+ * @param {!Element} videoEl
+ * @param {!AmpDoc} ampdoc
+ * @return {!Promise<../../../amp-cache-url/amp-cache-url.AmpCacheUrlService>}
+ */
+function getCacheUrlService(videoEl, ampdoc) {
+  return Services.extensionsFor(ampdoc.win)
+    .installExtensionForDoc(ampdoc, 'amp-cache-url')
+    .then(() => Services.cacheUrlServicePromiseForDoc(videoEl));
+}
diff --git a/extensions/amp-video/1.0/amp-video.css b/extensions/amp-video/1.0/amp-video.css
new file mode 100644
index 0000000000000..c1606459faa22
--- /dev/null
+++ b/extensions/amp-video/1.0/amp-video.css
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/*
+ * Pre-upgrade:
+ * - display:block element
+ * - size-defined element
+ */
+amp-video {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Pre-upgrade: size-defining element - hide children. */
+amp-video:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc) {
+  display: none;
+  content-visibility: hidden;
+}
diff --git a/extensions/amp-video/1.0/amp-video.js b/extensions/amp-video/1.0/amp-video.js
new file mode 100644
index 0000000000000..02a0b78ba7d96
--- /dev/null
+++ b/extensions/amp-video/1.0/amp-video.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {CSS} from '../../../build/amp-video-1.0.css';
+import {VideoBaseElement} from './base-element';
+import {isExperimentOn} from '../../../src/experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-video';
+
+class AmpVideo extends VideoBaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-video'),
+      'expected global "bento" or specific "bento-video" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpVideo, CSS);
+});
diff --git a/extensions/amp-video/1.0/autoplay.jss.js b/extensions/amp-video/1.0/autoplay.jss.js
new file mode 100644
index 0000000000000..ad384f92a50ce
--- /dev/null
+++ b/extensions/amp-video/1.0/autoplay.jss.js
@@ -0,0 +1,92 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createUseStyles} from 'react-jss';
+
+const eq = {
+  pointerEvents: 'none !important',
+  alignItems: 'flex-end',
+  bottom: 7,
+  height: 12,
+  opacity: 0.8,
+  overflow: 'hidden',
+  position: 'absolute',
+  right: 7,
+  width: 20,
+  zIndex: 1,
+  display: 'flex',
+};
+
+const eqCol = {
+  flex: 1,
+  height: '100%',
+  marginRight: 1,
+  position: 'relative',
+  '&:before, &:after': {
+    content: '""',
+    animation: '0s linear infinite alternate $eq-animation',
+    backgroundColor: '#FAFAFA',
+    height: '100%',
+    position: 'absolute',
+    width: '100%',
+    willChange: 'transform',
+    animationPlayState: 'paused',
+  },
+  '&:nth-child(1)': {
+    '&:before': {animationDuration: '0.3s'},
+    '&:after': {animationDuration: '0.45s'},
+  },
+  '&:nth-child(2)': {
+    '&:before': {animationDuration: '0.5s'},
+    '&:after': {animationDuration: '0.4s'},
+  },
+  '&:nth-child(3)': {
+    '&:before': {animationDuration: '0.3s'},
+    '&:after': {animationDuration: '0.35s'},
+  },
+  '&:nth-child(4)': {
+    '&:before': {animationDuration: '0.4s'},
+    '&:after': {animationDuration: '0.25s'},
+  },
+};
+
+const eqPlaying = {
+  // These are same as `eqCol`
+  '& > div:before, & > div:after': {animationPlayState: 'running'},
+};
+
+const autoplayMaskButton = {
+  display: 'block',
+  appearance: 'none',
+  background: 'transparent',
+  border: 'none',
+  width: '100%',
+};
+
+const JSS = {
+  autoplayMaskButton,
+  eq,
+  eqPlaying,
+  eqCol,
+  '@keyframes eq-animation': {
+    '0%': {transform: 'translateY(100%)'},
+    '100%': {transform: 'translateY(0)'},
+  },
+};
+
+// useStyles gets replaced for AMP builds via `babel-plugin-transform-jss`.
+// eslint-disable-next-line local/no-export-side-effect
+export const useStyles = createUseStyles(JSS);
diff --git a/extensions/amp-video/1.0/base-element.js b/extensions/amp-video/1.0/base-element.js
new file mode 100644
index 0000000000000..5513be1524af0
--- /dev/null
+++ b/extensions/amp-video/1.0/base-element.js
@@ -0,0 +1,119 @@
+/**
+ * Copyright 2020 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.
+ */
+import {ActionTrust} from '../../../src/core/constants/action-constants';
+import {CSS} from './autoplay.jss';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {VideoWrapper} from './video-wrapper';
+
+/** @extends {PreactBaseElement<VideoWrapperDef.Api>} */
+export class VideoBaseElement extends PreactBaseElement {
+  /** @override */
+  init() {
+    this.registerApiAction_('play', (api) => api.play());
+    this.registerApiAction_('pause', (api) => api.pause());
+    this.registerApiAction_('mute', (api) => api.mute());
+    this.registerApiAction_('unmute', (api) => api.unmute());
+
+    // Ugly that this action has three names, but:
+    // - requestFullscreen for consistency with Element.requestFullscreen
+    // - fullscreenenter / fullscreen are for backwards compatibility
+    const requestFullscreen = (api) => api.requestFullscreen();
+    this.registerApiAction_('requestFullscreen', requestFullscreen);
+    this.registerApiAction_('fullscreenenter', requestFullscreen);
+    this.registerApiAction_('fullscreen', requestFullscreen);
+  }
+
+  /**
+   * @param {string} alias
+   * @param {function(!VideoWrapperDef.Api, !../../../src/service/action-impl.ActionInvocation)} handler
+   * @param {!../../../src/core/constants/action-constants.ActionTrust=} minTrust
+   * @private
+   */
+  registerApiAction_(alias, handler, minTrust = ActionTrust.HIGH) {
+    this.registerApiAction(
+      alias,
+      (api, invocation) => {
+        if (invocation.trust >= ActionTrust.HIGH) {
+          // TODO(alanorozco): There may be a better solution that doesn't
+          // require this method which is not standard in HTMLMediaElement, like
+          // potentially toggling `autoplay` instead.
+          api.userInteracted();
+        }
+        handler(api, invocation);
+      },
+      minTrust
+    );
+  }
+}
+
+/** @override */
+VideoBaseElement['Component'] = VideoWrapper;
+
+/** @override */
+VideoBaseElement['loadable'] = true;
+
+/** @override */
+VideoBaseElement['layoutSizeDefined'] = true;
+
+/**
+ * Defaults to `{component: 'video'}` from `VideoWrapper` component.
+ * Subclasses may set:
+ * ```
+ *   AmpMyPlayer['staticProps'] = dict({
+ *     'component': MyPlayerComponent,
+ *   });
+ * ```
+ * @override
+ */
+VideoBaseElement['staticProps'];
+
+/** @override */
+VideoBaseElement['props'] = {
+  'album': {attr: 'album'},
+  'alt': {attr: 'alt'},
+  'artist': {attr: 'artist'},
+  'artwork': {attr: 'artwork'},
+  'attribution': {attr: 'attribution'},
+  'autoplay': {attr: 'autoplay', type: 'boolean'},
+  'controls': {attr: 'controls', type: 'boolean'},
+  'controlslist': {attr: 'controlslist'},
+  'crossorigin': {attr: 'crossorigin'},
+  'disableremoteplayback': {attr: 'disableremoteplayback'},
+  'loop': {attr: 'loop', type: 'boolean'},
+  'noaudio': {attr: 'noaudio', type: 'boolean'},
+  'poster': {attr: 'poster'},
+  'sources': {
+    selector: 'source',
+    single: false,
+    clone: true,
+  },
+  'src': {attr: 'src'},
+  'title': {attr: 'title'},
+
+  // TODO(alanorozco): These props have no internal implementation yet.
+  'dock': {attr: 'dock', media: true},
+  'rotate-to-fullscreen': {
+    attr: 'rotate-to-fullscreen',
+    type: 'boolean',
+    media: true,
+  },
+};
+
+/** @override */
+VideoBaseElement['shadowCss'] = CSS;
+
+/** @override */
+VideoBaseElement['usesShadowDom'] = true;
diff --git a/extensions/amp-video/1.0/storybook/Basic.amp.js b/extensions/amp-video/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..f94d946948f12
--- /dev/null
+++ b/extensions/amp-video/1.0/storybook/Basic.amp.js
@@ -0,0 +1,191 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {VideoElementWithActions} from './_helpers';
+import {boolean, number, object, text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-video-1_0',
+  decorators: [withKnobs, withAmp],
+  parameters: {
+    extensions: [
+      {name: 'amp-video', version: '1.0'},
+      {name: 'amp-accordion', version: '1.0'},
+    ],
+    experiments: ['bento'],
+  },
+};
+
+const AmpVideoWithKnobs = ({i, ...rest}) => {
+  const group = i ? `Player ${i + 1}` : undefined;
+
+  const width = text('width', '640px', group);
+  const height = text('height', '360px', group);
+
+  const ariaLabel = text('aria-label', 'Video Player', group);
+  const autoplay = boolean('autoplay', true, group);
+  const controls = boolean('controls', true, group);
+  const mediasession = boolean('mediasession', true, group);
+  const noaudio = boolean('noaudio', false, group);
+  const loop = boolean('loop', false, group);
+  const poster = text(
+    'poster',
+    'https://amp.dev/static/inline-examples/images/kitten-playing.png',
+    group
+  );
+
+  const artist = text('artist', '', group);
+  const album = text('album', '', group);
+  const artwork = text('artwork', '', group);
+  const title = text('title', '', group);
+
+  const sources = object(
+    'sources',
+    [
+      {
+        src: 'https://amp.dev/static/inline-examples/videos/kitten-playing.webm',
+        type: 'video/webm',
+      },
+      {
+        src: 'https://amp.dev/static/inline-examples/videos/kitten-playing.mp4',
+        type: 'video/mp4',
+      },
+    ],
+    group
+  );
+
+  return (
+    <amp-video
+      {...rest}
+      ariaLabel={ariaLabel}
+      autoplay={autoplay}
+      controls={controls}
+      mediasession={mediasession}
+      noaudio={noaudio}
+      loop={loop}
+      poster={poster}
+      artist={artist}
+      album={album}
+      artwork={artwork}
+      title={title}
+      layout="responsive"
+      width={width}
+      height={height}
+    >
+      {sources.map((props) => (
+        <source {...props}></source>
+      ))}
+    </amp-video>
+  );
+};
+
+const Spacer = ({height}) => {
+  return (
+    <div
+      style={{
+        height,
+        background: `linear-gradient(to bottom, #bbb, #bbb 10%, #fff 10%, #fff)`,
+        backgroundSize: '100% 10px',
+      }}
+    ></div>
+  );
+};
+
+export const Default = () => {
+  const amount = number('Amount', 1, {}, 'Page');
+  const spacerHeight = text('Space', '80vh', 'Page');
+  const spaceAbove = boolean('Space above', false, 'Page');
+  const spaceBelow = boolean('Space below', false, 'Page');
+
+  const players = [];
+  for (let i = 0; i < amount; i++) {
+    players.push(<AmpVideoWithKnobs key={i} i={i} />);
+    if (i < amount - 1) {
+      players.push(<Spacer height={spacerHeight} />);
+    }
+  }
+
+  return (
+    <>
+      {spaceAbove && <Spacer height={spacerHeight} />}
+      {players}
+      {spaceBelow && <Spacer height={spacerHeight} />}
+    </>
+  );
+};
+
+export const Actions = () => {
+  const id = 'player';
+  return (
+    <VideoElementWithActions id={id}>
+      <AmpVideoWithKnobs id={id} />
+    </VideoElementWithActions>
+  );
+};
+
+export const InsideAccordion = () => {
+  const width = number('width', 320);
+  const height = number('height', 180);
+  const autoplay = boolean('autoplay', false);
+
+  return (
+    <amp-accordion expand-single-section>
+      <section expanded>
+        <h2>Video</h2>
+        <div>
+          <amp-video
+            autoplay={autoplay}
+            controls
+            loop
+            width={width}
+            height={height}
+          >
+            <source
+              type="video/mp4"
+              src="https://amp.dev/static/inline-examples/videos/kitten-playing.mp4"
+            ></source>
+          </amp-video>
+        </div>
+      </section>
+    </amp-accordion>
+  );
+};
+
+export const InsideDetails = () => {
+  const width = number('width', 320);
+  const height = number('height', 180);
+  const autoplay = boolean('autoplay', false);
+
+  return (
+    <details open>
+      <summary>Video</summary>
+      <amp-video
+        autoplay={autoplay}
+        controls
+        loop
+        width={width}
+        height={height}
+      >
+        <source
+          type="video/mp4"
+          src="https://amp.dev/static/inline-examples/videos/kitten-playing.mp4"
+        ></source>
+      </amp-video>
+    </details>
+  );
+};
diff --git a/extensions/amp-video/1.0/storybook/Basic.js b/extensions/amp-video/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..8160ed0e86f8c
--- /dev/null
+++ b/extensions/amp-video/1.0/storybook/Basic.js
@@ -0,0 +1,171 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionSection,
+} from '../../../amp-accordion/1.0/component';
+import {VideoWrapper} from '../video-wrapper';
+import {boolean, number, object, text, withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'Video Wrapper',
+  component: VideoWrapper,
+  decorators: [withKnobs],
+};
+
+const VideoTagPlayer = ({i}) => {
+  const group = `Player ${i + 1}`;
+
+  const width = text('width', '640px', group);
+  const height = text('height', '360px', group);
+
+  const ariaLabel = text('aria-label', 'Video Player', group);
+  const autoplay = boolean('autoplay', true, group);
+  const controls = boolean('controls', true, group);
+  const mediasession = boolean('mediasession', true, group);
+  const noaudio = boolean('noaudio', false, group);
+  const loop = boolean('loop', false, group);
+  const poster = text(
+    'poster',
+    'https://amp.dev/static/inline-examples/images/kitten-playing.png',
+    group
+  );
+
+  const artist = text('artist', '', group);
+  const album = text('album', '', group);
+  const artwork = text('artwork', '', group);
+  const title = text('title', '', group);
+
+  const sources = object(
+    'sources',
+    [
+      {
+        src: 'https://amp.dev/static/inline-examples/videos/kitten-playing.webm',
+        type: 'video/webm',
+      },
+      {
+        src: 'https://amp.dev/static/inline-examples/videos/kitten-playing.mp4',
+        type: 'video/mp4',
+      },
+    ],
+    group
+  );
+
+  return (
+    <VideoWrapper
+      component="video"
+      ariaLabel={ariaLabel}
+      autoplay={autoplay}
+      controls={controls}
+      mediasession={mediasession}
+      noaudio={noaudio}
+      loop={loop}
+      poster={poster}
+      artist={artist}
+      album={album}
+      artwork={artwork}
+      title={title}
+      style={{width, height}}
+      sources={sources.map((props) => (
+        <source {...props}></source>
+      ))}
+    />
+  );
+};
+
+const Spacer = ({height}) => {
+  return (
+    <div
+      style={{
+        height,
+        background: `linear-gradient(to bottom, #bbb, #bbb 10%, #fff 10%, #fff)`,
+        backgroundSize: '100% 10px',
+      }}
+    ></div>
+  );
+};
+
+export const Default = () => {
+  const amount = number('Amount', 1, {}, 'Page');
+  const spacerHeight = text('Space', '80vh', 'Page');
+  const spaceAbove = boolean('Space above', false, 'Page');
+  const spaceBelow = boolean('Space below', false, 'Page');
+
+  const players = [];
+  for (let i = 0; i < amount; i++) {
+    players.push(<VideoTagPlayer key={i} i={i} />);
+    if (i < amount - 1) {
+      players.push(<Spacer height={spacerHeight} />);
+    }
+  }
+
+  return (
+    <>
+      {spaceAbove && <Spacer height={spacerHeight} />}
+      {players}
+      {spaceBelow && <Spacer height={spacerHeight} />}
+    </>
+  );
+};
+
+export const InsideAccordion = () => {
+  const width = text('width', '320px');
+  const height = text('height', '180px');
+  return (
+    <Accordion expandSingleSection>
+      <AccordionSection key={1} expanded>
+        <AccordionHeader>
+          <h2>Controls</h2>
+        </AccordionHeader>
+        <AccordionContent>
+          <VideoWrapper
+            component="video"
+            controls={true}
+            loop={true}
+            style={{width, height}}
+            src="https://amp.dev/static/inline-examples/videos/kitten-playing.mp4"
+            poster="https://amp.dev/static/inline-examples/images/kitten-playing.png"
+          />
+        </AccordionContent>
+      </AccordionSection>
+      <AccordionSection key={2}>
+        <AccordionHeader>
+          <h2>Autoplay</h2>
+        </AccordionHeader>
+        <AccordionContent>
+          <VideoWrapper
+            component="video"
+            autoplay={true}
+            loop={true}
+            style={{width, height}}
+            src="https://amp.dev/static/inline-examples/videos/kitten-playing.mp4"
+            poster="https://amp.dev/static/inline-examples/images/kitten-playing.png"
+            sources={[
+              <source
+                type="video/mp4"
+                src="https://amp.dev/static/inline-examples/videos/kitten-playing.mp4"
+              />,
+            ]}
+          />
+        </AccordionContent>
+      </AccordionSection>
+    </Accordion>
+  );
+};
diff --git a/extensions/amp-video/1.0/storybook/VideoIframe.js b/extensions/amp-video/1.0/storybook/VideoIframe.js
new file mode 100644
index 0000000000000..e3bb33b1860c7
--- /dev/null
+++ b/extensions/amp-video/1.0/storybook/VideoIframe.js
@@ -0,0 +1,144 @@
+/**
+ * Copyright 2020 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.
+ */
+import * as Preact from '../../../../src/preact';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionSection,
+} from '../../../amp-accordion/1.0/component';
+import {VideoIframe} from '../video-iframe';
+import {boolean, text, withKnobs} from '@storybook/addon-knobs';
+import {createCustomEvent} from '../../../../src/event-helper';
+import {useCallback} from '../../../../src/preact';
+
+export default {
+  title: 'VideoIframe',
+  component: VideoIframe,
+  decorators: [withKnobs],
+};
+
+const AmpVideoIframeLike = ({unloadOnPause, ...rest}) => {
+  const onMessage = useCallback((e) => {
+    // Expect HTMLMediaElement events from document in `src` as
+    // `{event: 'playing'}`
+    // (video-iframe-integration-v0.js talks similarly to HTMLMediaElement,
+    // so amp-video-iframe samples already mostly work).
+    if (e.data?.event) {
+      e.currentTarget.dispatchEvent(
+        createCustomEvent(window, e.data.event, /* detail */ null, {
+          bubbles: true,
+          cancelable: true,
+        })
+      );
+    }
+  }, []);
+
+  const makeMethodMessage = useCallback(
+    (method) =>
+      JSON.stringify({
+        // Like amp-video-iframe
+        'event': 'method',
+        'method': method.toLowerCase(),
+      }),
+    []
+  );
+
+  return (
+    <VideoIframe
+      {...rest}
+      unloadOnPause={unloadOnPause}
+      allow="autoplay" // this is not safe for a generic frame
+      onMessage={onMessage}
+      makeMethodMessage={makeMethodMessage}
+    />
+  );
+};
+
+export const UsingVideoIframe = () => {
+  const width = text('width', '640px');
+  const height = text('height', '360px');
+
+  const ariaLabel = text('aria-label', 'Video Player');
+  const autoplay = boolean('autoplay', true);
+  const controls = boolean('controls', true);
+  const mediasession = boolean('mediasession', true);
+  const noaudio = boolean('noaudio', false);
+  const loop = boolean('loop', false);
+  const poster = text(
+    'poster',
+    'https://amp.dev/static/samples/img/amp-video-iframe-sample-placeholder.jpg'
+  );
+
+  const artist = text('artist', '');
+  const album = text('album', '');
+  const artwork = text('artwork', '');
+  const title = text('title', '');
+
+  const src = text(
+    'src',
+    'https://amp.dev/static/samples/files/amp-video-iframe-videojs.html'
+  );
+
+  return (
+    <AmpVideoIframeLike
+      ariaLabel={ariaLabel}
+      autoplay={autoplay}
+      controls={controls}
+      mediasession={mediasession}
+      noaudio={noaudio}
+      loop={loop}
+      poster={poster}
+      artist={artist}
+      album={album}
+      artwork={artwork}
+      title={title}
+      style={{width, height}}
+      src={src}
+    />
+  );
+};
+
+export const InsideAccordion = () => {
+  const width = text('width', '640px');
+  const height = text('height', '360px');
+  const autoplay = boolean('autoplay', false);
+  const controls = boolean('controls', true);
+  const src = text(
+    'src',
+    'https://amp.dev/static/samples/files/amp-video-iframe-videojs.html'
+  );
+  const unloadOnPause = boolean('unloadOnPause', false);
+  return (
+    <Accordion expandSingleSection>
+      <AccordionSection key={1} expanded>
+        <AccordionHeader>
+          <h2>Controls</h2>
+        </AccordionHeader>
+        <AccordionContent>
+          <AmpVideoIframeLike
+            controls={controls}
+            autoplay={autoplay}
+            loop={true}
+            style={{width, height}}
+            src={src}
+            unloadOnPause={unloadOnPause}
+          />
+        </AccordionContent>
+      </AccordionSection>
+    </Accordion>
+  );
+};
diff --git a/extensions/amp-video/1.0/storybook/_helpers.js b/extensions/amp-video/1.0/storybook/_helpers.js
new file mode 100644
index 0000000000000..45fea4bc27ad1
--- /dev/null
+++ b/extensions/amp-video/1.0/storybook/_helpers.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2021 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.
+ */
+import * as Preact from '../../../../src/preact';
+
+export const VideoElementWithActions = ({
+  id,
+  children,
+  actions = ['play', 'pause', 'mute', 'unmute', 'fullscreen'],
+}) => (
+  <div style="max-width: 800px">
+    <p style={{display: 'flex'}}>
+      {actions.map((action) => (
+        <button style={{flex: 1, margin: '0 4px'}} on={`tap:${id}.${action}`}>
+          {action}
+        </button>
+      ))}
+    </p>
+    {children}
+  </div>
+);
diff --git a/extensions/amp-video/1.0/test/test-amp-video.js b/extensions/amp-video/1.0/test/test-amp-video.js
new file mode 100644
index 0000000000000..79c93177f1c85
--- /dev/null
+++ b/extensions/amp-video/1.0/test/test-amp-video.js
@@ -0,0 +1,116 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import '../amp-video';
+import {dispatchCustomEvent} from '../../../../src/dom';
+import {htmlFor} from '../../../../src/static-template';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-video-v1.0',
+  {
+    amp: {
+      extensions: ['amp-video:1.0'],
+      canonicalUrl: 'https://canonicalexample.com/',
+    },
+  },
+  (env) => {
+    let html;
+    let element;
+
+    const waitForRender = async () => {
+      await element.buildInternal();
+      const loadPromise = element.layoutCallback();
+      const shadow = element.shadowRoot;
+      await waitFor(() => shadow.querySelector('video'), 'video mounted');
+      const video = shadow.querySelector('video');
+      dispatchCustomEvent(video, 'canplay', null, {bubbles: false});
+      await loadPromise;
+    };
+
+    beforeEach(() => {
+      html = htmlFor(env.win.document);
+      toggleExperiment(env.win, 'bento-video', true, true);
+    });
+
+    it('renders video element', async () => {
+      element = html`
+        <amp-video layout="responsive" width="16" height="9">
+          <source src="foo" type="bar/baz" />
+        </amp-video>
+      `;
+
+      env.win.document.body.appendChild(element);
+
+      await waitForRender();
+
+      const video = element.shadowRoot.querySelector('video');
+      expect(video).to.not.be.null;
+    });
+
+    it('passes attributes through to <video>', async () => {
+      element = html`
+        <amp-video
+          layout="responsive"
+          width="16"
+          height="9"
+          src="something.mp4"
+          poster="foo.png"
+          loop
+        ></amp-video>
+      `;
+
+      env.win.document.body.appendChild(element);
+
+      await waitForRender();
+
+      const video = element.shadowRoot.querySelector('video');
+      expect(video.getAttribute('src')).to.equal(element.getAttribute('src'));
+      expect(video.getAttribute('poster')).to.equal(
+        element.getAttribute('poster')
+      );
+      expect(video.getAttribute('loop')).to.equal(element.getAttribute('loop'));
+    });
+
+    it('clones <source> elements', async () => {
+      element = html`
+        <amp-video layout="responsive" width="16" height="9">
+          <source src="foo" type="bar/baz" />
+          <source src="something.mp4" type="application/mp4" />
+        </amp-video>
+      `;
+
+      env.win.document.body.appendChild(element);
+
+      const inputSources = element.querySelectorAll('source');
+
+      await waitForRender();
+
+      const outputSources = element.shadowRoot.querySelectorAll('source');
+
+      for (let i = 0; i < inputSources.length; i++) {
+        expect(outputSources[i]).to.not.be.null;
+        expect(outputSources[i].getAttribute('src')).to.eql(
+          inputSources[i].getAttribute('src')
+        );
+        expect(outputSources[i].getAttribute('type')).to.eql(
+          inputSources[i].getAttribute('type')
+        );
+      }
+    });
+  }
+);
diff --git a/extensions/amp-video/1.0/test/test-video-iframe.js b/extensions/amp-video/1.0/test/test-video-iframe.js
new file mode 100644
index 0000000000000..bd761f8831028
--- /dev/null
+++ b/extensions/amp-video/1.0/test/test-video-iframe.js
@@ -0,0 +1,324 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {VideoIframeInternal} from '../video-iframe';
+import {createRef} from '../../../../src/preact';
+import {mount} from 'enzyme';
+
+function dispatchMessage(window, opt_event) {
+  const event = window.document.createEvent('Event');
+  event.initEvent('message', /* bubbles */ true, /* cancelable */ true);
+  window.dispatchEvent(Object.assign(event, opt_event));
+}
+
+describes.realWin('VideoIframeInternal Preact component', {}, (env) => {
+  let window;
+  let document;
+
+  beforeEach(() => {
+    window = env.win;
+    document = window.document;
+  });
+
+  it('calls `onIframeLoad` once loaded', async () => {
+    const onIframeLoad = env.sandbox.spy();
+    const onCanPlay = env.sandbox.spy();
+    const makeMethodMessage = env.sandbox.spy();
+    const videoIframe = mount(
+      <VideoIframeInternal
+        src="about:blank"
+        makeMethodMessage={makeMethodMessage}
+        onIframeLoad={onIframeLoad}
+        onCanPlay={onCanPlay}
+      />,
+      {attachTo: document.body}
+    );
+
+    await videoIframe.find('iframe').invoke('onCanPlay')();
+
+    expect(onCanPlay).to.be.calledOnce;
+    expect(onIframeLoad).to.be.calledOnce;
+  });
+
+  it('unmutes per lack of `muted` prop', async () => {
+    const makeMethodMessage = env.sandbox.spy();
+    const videoIframe = mount(
+      <VideoIframeInternal
+        src="about:blank"
+        makeMethodMessage={makeMethodMessage}
+      />,
+      {attachTo: document.body}
+    );
+
+    await videoIframe.find('iframe').invoke('onCanPlay')();
+
+    expect(makeMethodMessage.withArgs('unmute')).to.have.been.calledOnce;
+  });
+
+  it('mutes per `muted` prop', async () => {
+    const makeMethodMessage = env.sandbox.spy();
+    const videoIframe = mount(
+      <VideoIframeInternal
+        src="about:blank"
+        makeMethodMessage={makeMethodMessage}
+        muted
+      />,
+      {attachTo: document.body}
+    );
+
+    await videoIframe.find('iframe').invoke('onCanPlay')();
+
+    expect(makeMethodMessage.withArgs('mute')).to.have.been.calledOnce;
+  });
+
+  it('hides controls per lack of `controls` prop', async () => {
+    const makeMethodMessage = env.sandbox.spy();
+    const videoIframe = mount(
+      <VideoIframeInternal
+        src="about:blank"
+        makeMethodMessage={makeMethodMessage}
+      />,
+      {attachTo: document.body}
+    );
+
+    await videoIframe.find('iframe').invoke('onCanPlay')();
+
+    expect(makeMethodMessage.withArgs('hideControls')).to.have.been.calledOnce;
+  });
+
+  it('shows controls per `controls` prop', async () => {
+    const makeMethodMessage = env.sandbox.spy();
+    const videoIframe = mount(
+      <VideoIframeInternal
+        src="about:blank"
+        makeMethodMessage={makeMethodMessage}
+        controls
+      />,
+      {attachTo: document.body}
+    );
+
+    await videoIframe.find('iframe').invoke('onCanPlay')();
+
+    expect(makeMethodMessage.withArgs('showControls')).to.have.been.calledOnce;
+  });
+
+  it('passes messages to onMessage', async () => {
+    const onMessage = env.sandbox.spy();
+    const videoIframe = mount(
+      <VideoIframeInternal src="about:blank" onMessage={onMessage} controls />,
+      {attachTo: document.body}
+    );
+
+    const iframe = videoIframe.getDOMNode();
+
+    const data = {foo: 'bar'};
+    dispatchMessage(window, {source: iframe.contentWindow, data});
+
+    expect(
+      onMessage.withArgs(
+        env.sandbox.match({
+          currentTarget: iframe,
+          target: iframe,
+          data,
+        })
+      )
+    ).to.have.been.calledOnce;
+  });
+
+  it("ignores messages if source doesn't match iframe", async () => {
+    const onMessage = env.sandbox.spy();
+    mount(
+      <VideoIframeInternal src="about:blank" onMessage={onMessage} controls />,
+      {
+        attachTo: document.body,
+      }
+    );
+    dispatchMessage(window, {source: null, data: 'whatever'});
+    expect(onMessage).to.not.have.been.called;
+  });
+
+  it('stops listening to messages on unmount', async () => {
+    const onMessage = env.sandbox.spy();
+    const videoIframe = mount(
+      <VideoIframeInternal src="about:blank" onMessage={onMessage} />,
+      {attachTo: document.body}
+    );
+    const iframe = videoIframe.getDOMNode();
+    videoIframe.unmount();
+    dispatchMessage(window, {source: iframe.contentWindow, data: 'whatever'});
+    expect(onMessage).to.not.have.been.called;
+  });
+
+  it('unlistens only when unmounted', async () => {
+    const addEventListener = env.sandbox.stub(window, 'addEventListener');
+    const removeEventListener = env.sandbox.stub(window, 'removeEventListener');
+
+    const videoIframe = mount(
+      <VideoIframeInternal src="about:blank" onMessage={() => {}} />,
+      {attachTo: document.body}
+    );
+
+    expect(addEventListener.withArgs('message')).to.have.been.calledOnce;
+    expect(removeEventListener.withArgs('message')).to.not.have.been.called;
+
+    videoIframe.setProps({
+      onMessage: () => {
+        // An unstable onMessage prop should not cause unlisten
+      },
+    });
+    videoIframe.update();
+    expect(removeEventListener.withArgs('message')).to.not.have.been.called;
+
+    videoIframe.unmount();
+    expect(removeEventListener.withArgs('message')).to.have.been.calledOnce;
+  });
+
+  it('should reset an unloadOnPause-iframe on pause', () => {
+    const ref = createRef();
+
+    const makeMethodMessageStub = env.sandbox.stub();
+
+    const videoIframe = mount(
+      <VideoIframeInternal
+        ref={ref}
+        src="about:blank"
+        makeMethodMessage={makeMethodMessageStub}
+        unloadOnPause={true}
+      />
+    );
+
+    const iframe = videoIframe.getDOMNode();
+    let iframeSrc = iframe.src;
+    const iframeSrcSetterSpy = env.sandbox.spy();
+    Object.defineProperty(iframe, 'src', {
+      get() {
+        return iframeSrc;
+      },
+      set(value) {
+        iframeSrc = value;
+        iframeSrcSetterSpy(value);
+      },
+    });
+
+    ref.current.pause();
+    expect(iframeSrcSetterSpy).to.be.calledOnce;
+    expect(makeMethodMessageStub).to.not.be.calledWith('pause');
+  });
+
+  describe('uses playerStateRef to read the imperative state', () => {
+    const makeMethodMessage = (method) => ({makeMethodMessageFor: method});
+
+    it('should NOT fail when player state is not available', () => {
+      const ref = createRef();
+
+      // no value.
+      mount(
+        <VideoIframeInternal
+          ref={ref}
+          src="about:blank"
+          makeMethodMessage={makeMethodMessage}
+        />
+      );
+      expect(ref.current.currentTime).to.be.NaN;
+      expect(ref.current.duration).to.be.NaN;
+
+      // null value.
+      const playerStateRef = createRef();
+      mount(
+        <VideoIframeInternal
+          ref={ref}
+          src="about:blank"
+          makeMethodMessage={makeMethodMessage}
+          playerStateRef={playerStateRef}
+        />
+      );
+      expect(ref.current.currentTime).to.be.NaN;
+      expect(ref.current.duration).to.be.NaN;
+
+      // empty value.
+      playerStateRef.current = {};
+      mount(
+        <VideoIframeInternal
+          ref={ref}
+          src="about:blank"
+          makeMethodMessage={makeMethodMessage}
+          playerStateRef={playerStateRef}
+        />
+      );
+      expect(ref.current.currentTime).to.be.NaN;
+      expect(ref.current.duration).to.be.NaN;
+    });
+
+    it('should return the provided player state', () => {
+      const ref = createRef();
+      const playerStateRef = createRef();
+      playerStateRef.current = {duration: 111, currentTime: 11};
+      mount(
+        <VideoIframeInternal
+          ref={ref}
+          src="about:blank"
+          makeMethodMessage={makeMethodMessage}
+          playerStateRef={playerStateRef}
+        />
+      );
+      expect(ref.current.currentTime).to.equal(11);
+      expect(ref.current.duration).to.equal(111);
+
+      // 0-values are ok.
+      playerStateRef.current = {duration: 0, currentTime: 0};
+      expect(ref.current.currentTime).to.equal(0);
+      expect(ref.current.duration).to.equal(0);
+    });
+  });
+
+  describe('uses makeMethodMessage to post imperative handle methods', () => {
+    ['play', 'pause'].forEach((method) => {
+      it(`with \`${method}\``, async () => {
+        let videoIframeRef;
+
+        const makeMethodMessage = (method) => ({makeMethodMessageFor: method});
+
+        const makeMethodMessageSpy = env.sandbox.spy(makeMethodMessage);
+
+        const videoIframe = mount(
+          <VideoIframeInternal
+            ref={(ref) => (videoIframeRef = ref)}
+            src="about:blank"
+            makeMethodMessage={makeMethodMessageSpy}
+          />,
+          {attachTo: document.body}
+        );
+
+        const postMessage = env.sandbox.stub(
+          videoIframe.getDOMNode().contentWindow,
+          'postMessage'
+        );
+
+        videoIframeRef[method]();
+        await videoIframe.find('iframe').invoke('onCanPlay')();
+
+        expect(makeMethodMessageSpy.withArgs(method)).to.have.been.calledOnce;
+        expect(
+          postMessage.withArgs(
+            env.sandbox.match(makeMethodMessage(method)),
+            '*'
+          )
+        ).to.have.been.calledOnce;
+      });
+    });
+  });
+});
diff --git a/extensions/amp-video/1.0/test/test-video-wrapper.js b/extensions/amp-video/1.0/test/test-video-wrapper.js
new file mode 100644
index 0000000000000..0b60d488e719d
--- /dev/null
+++ b/extensions/amp-video/1.0/test/test-video-wrapper.js
@@ -0,0 +1,428 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {VideoWrapper} from '../video-wrapper';
+import {WithAmpContext} from '../../../../src/preact/context';
+import {createRef} from '../../../../src/preact';
+import {forwardRef} from '../../../../src/preact/compat';
+import {mount} from 'enzyme';
+import {omit} from '../../../../src/core/types/object';
+
+import {useStyles as useAutoplayStyles} from '../autoplay.jss';
+
+describes.sandboxed('VideoWrapper Preact component', {}, (env) => {
+  let intersectionObserverObserved;
+  let intersectionObserverCallback;
+
+  let playerReadyState;
+  let play;
+  let pause;
+
+  let metadata;
+
+  const TestPlayer = forwardRef(({}, ref) => {
+    Preact.useImperativeHandle(ref, () => ({
+      get readyState() {
+        return playerReadyState;
+      },
+      play,
+      pause,
+      getMetadata: () => metadata,
+    }));
+    return <></>;
+  });
+
+  beforeEach(() => {
+    playerReadyState = undefined;
+    pause = env.sandbox.spy();
+    play = env.sandbox.spy();
+
+    metadata = {
+      'title': 'Test player title',
+      'artist': 'Test player artist',
+      'album': 'Test player album',
+      'artwork': [{'src': 'http://test/image.jpg'}],
+    };
+
+    env.sandbox.stub(window, 'IntersectionObserver').callsFake((callback) => {
+      intersectionObserverObserved = [];
+      intersectionObserverCallback = callback;
+      return {
+        observe(element) {
+          intersectionObserverObserved.push(element);
+        },
+        disconnect() {
+          intersectionObserverObserved = null;
+        },
+      };
+    });
+  });
+
+  it('should pass props to inner instance, sources as children', () => {
+    const expectedPassthroughProps = {foo: 1, bar: 2};
+    const wrapper = mount(
+      <VideoWrapper
+        component={TestPlayer}
+        autoplay
+        controls
+        noaudio
+        sources={<div></div>}
+        {...expectedPassthroughProps}
+      />
+    );
+    const player = wrapper.find(TestPlayer);
+    expect(player).to.have.lengthOf(1);
+    expect(player.props()).to.include(expectedPassthroughProps);
+    expect(player.props().children).to.equal(wrapper.props().sources);
+  });
+
+  it('should render only shell and resolve API as unloaded', () => {
+    const ref = createRef();
+    const wrapper = mount(
+      <VideoWrapper
+        ref={ref}
+        loading="unload"
+        component={TestPlayer}
+        sources={<div></div>}
+      />
+    );
+    const player = wrapper.find(TestPlayer);
+    expect(player).to.have.lengthOf(0);
+
+    // API is functional but returns 0/NaN values.
+    const api = ref.current;
+    expect(api.readyState).to.equal('loading');
+    expect(api.currentTime).to.equal(0);
+    expect(api.duration).to.be.NaN;
+  });
+
+  it('should initialize in a readyState=complete', () => {
+    playerReadyState = 1;
+    const ref = createRef();
+    mount(
+      <VideoWrapper ref={ref} component={TestPlayer} sources={<div></div>} />
+    );
+    const api = ref.current;
+    expect(api.readyState).to.equal('complete');
+  });
+
+  it('should set readyState=complete on canplay', async () => {
+    const ref = createRef();
+    const onReadyState = env.sandbox.spy();
+    const wrapper = mount(
+      <VideoWrapper
+        ref={ref}
+        component={TestPlayer}
+        sources={<div></div>}
+        onReadyState={onReadyState}
+      />
+    );
+    let api = ref.current;
+    expect(api.readyState).to.equal('loading');
+    expect(onReadyState).to.not.be.called;
+
+    await wrapper.find(TestPlayer).invoke('onCanPlay')();
+    api = ref.current;
+    expect(api.readyState).to.equal('complete');
+    expect(onReadyState).to.be.calledOnce.calledWith('complete');
+  });
+
+  it('should set readyState=complete on metadata', async () => {
+    const ref = createRef();
+    const onReadyState = env.sandbox.spy();
+    const wrapper = mount(
+      <VideoWrapper
+        ref={ref}
+        component={TestPlayer}
+        sources={<div></div>}
+        onReadyState={onReadyState}
+      />
+    );
+    let api = ref.current;
+    expect(api.readyState).to.equal('loading');
+    expect(onReadyState).to.not.be.called;
+
+    await wrapper.find(TestPlayer).invoke('onLoadedMetadata')();
+    api = ref.current;
+    expect(api.readyState).to.equal('complete');
+    expect(onReadyState).to.be.calledOnce.calledWith('complete');
+  });
+
+  it('should set readyState=error on error event', async () => {
+    const ref = createRef();
+    const onReadyState = env.sandbox.spy();
+    const wrapper = mount(
+      <VideoWrapper
+        ref={ref}
+        component={TestPlayer}
+        sources={<div></div>}
+        onReadyState={onReadyState}
+      />
+    );
+    let api = ref.current;
+    expect(api.readyState).to.equal('loading');
+    expect(onReadyState).to.not.be.called;
+
+    await wrapper.find(TestPlayer).invoke('onError')();
+    api = ref.current;
+    expect(api.readyState).to.equal('error');
+    expect(onReadyState).to.be.calledOnce.calledWith('error');
+  });
+
+  it('should send playing state on events', async () => {
+    const onPlayingState = env.sandbox.spy();
+    const wrapper = mount(
+      <VideoWrapper
+        component={TestPlayer}
+        sources={<div></div>}
+        onPlayingState={onPlayingState}
+      />
+    );
+    expect(onPlayingState).to.not.be.called;
+
+    // onPlaying
+    await wrapper.find(TestPlayer).invoke('onPlaying')();
+    expect(onPlayingState).to.be.calledOnce.calledWith(true);
+
+    // onPause
+    onPlayingState.resetHistory();
+    await wrapper.find(TestPlayer).invoke('onPause')();
+    expect(onPlayingState).to.be.calledOnce.calledWith(false);
+
+    // onPlaying again
+    onPlayingState.resetHistory();
+    await wrapper.find(TestPlayer).invoke('onPlaying')();
+    expect(onPlayingState).to.be.calledOnce.calledWith(true);
+
+    // onEnded
+    onPlayingState.resetHistory();
+    await wrapper.find(TestPlayer).invoke('onEnded')();
+    expect(onPlayingState).to.be.calledOnce.calledWith(false);
+  });
+
+  it('should reset playing state when component is not mounted', async () => {
+    const onPlayingState = env.sandbox.spy();
+    const wrapper = mount(
+      <WithAmpContext playable={true}>
+        <VideoWrapper
+          component={TestPlayer}
+          sources={<div></div>}
+          onPlayingState={onPlayingState}
+        />
+      </WithAmpContext>
+    );
+    await wrapper.find(TestPlayer).invoke('onPlaying')();
+    expect(onPlayingState).to.be.calledOnce.calledWith(true);
+  });
+
+  describe('MediaSession', () => {
+    let navigator;
+
+    beforeEach(() => {
+      navigator = {mediaSession: {setActionHandler: env.sandbox.spy()}};
+      env.sandbox.stub(window, 'navigator').value(navigator);
+      env.sandbox.stub(window, 'MediaMetadata').value(Object);
+    });
+
+    it('should not set mediasession when disabled', async () => {
+      const wrapper = mount(
+        <VideoWrapper component={TestPlayer} mediasession={false} />
+      );
+
+      await wrapper.find(TestPlayer).invoke('onLoadedMetadata')();
+      await wrapper.find(TestPlayer).invoke('onCanPlay')();
+      await wrapper.find(TestPlayer).invoke('onPlaying')();
+
+      expect(navigator.mediaSession.metadata).to.be.undefined;
+      expect(navigator.mediaSession.setActionHandler).to.not.have.been.called;
+    });
+
+    it('should set mediasession when playing', async () => {
+      const wrapper = mount(<VideoWrapper component={TestPlayer} />);
+
+      await wrapper.find(TestPlayer).invoke('onLoadedMetadata')();
+      await wrapper.find(TestPlayer).invoke('onCanPlay')();
+      await wrapper.find(TestPlayer).invoke('onPlaying')();
+
+      expect(navigator.mediaSession.metadata).to.eql(metadata);
+      expect(
+        navigator.mediaSession.setActionHandler.withArgs(
+          'play',
+          env.sandbox.match.typeOf('function')
+        )
+      ).to.have.been.calledOnce;
+      expect(
+        navigator.mediaSession.setActionHandler.withArgs(
+          'pause',
+          env.sandbox.match.typeOf('function')
+        )
+      ).to.have.been.calledOnce;
+    });
+
+    ['title', 'aria-label'].forEach((prop) => {
+      it(`should use ${prop} prop as fallback for title`, async () => {
+        const title = `Title through ${prop} prop`;
+
+        metadata = omit(metadata, ['title']);
+
+        const wrapper = mount(
+          <VideoWrapper component={TestPlayer} {...{[prop]: title}} />
+        );
+
+        await wrapper.find(TestPlayer).invoke('onLoadedMetadata')();
+        await wrapper.find(TestPlayer).invoke('onCanPlay')();
+        await wrapper.find(TestPlayer).invoke('onPlaying')();
+
+        expect(navigator.mediaSession.metadata.title).to.eql(title);
+      });
+    });
+
+    it('should use document.title as fallback', async () => {
+      document.title = 'Document title';
+
+      metadata = omit(metadata, ['title']);
+
+      const wrapper = mount(<VideoWrapper component={TestPlayer} />);
+
+      await wrapper.find(TestPlayer).invoke('onLoadedMetadata')();
+      await wrapper.find(TestPlayer).invoke('onCanPlay')();
+      await wrapper.find(TestPlayer).invoke('onPlaying')();
+
+      expect(navigator.mediaSession.metadata.title).to.eql(document.title);
+    });
+  });
+
+  describe('Autoplay', () => {
+    const classes = useAutoplayStyles();
+
+    it('should render icon', () => {
+      const wrapper = mount(
+        <VideoWrapper component={TestPlayer} controls autoplay />
+      );
+      expect(wrapper.exists(`.${classes.eq}`)).to.be.true;
+    });
+
+    it('should remove icon when clicking autoplay mask', () => {
+      const wrapper = mount(
+        <VideoWrapper component={TestPlayer} controls autoplay />
+      );
+      expect(wrapper.exists(`.${classes.eq}`)).to.be.true;
+      wrapper.find('button').simulate('click');
+      expect(wrapper.exists(`.${classes.eq}`)).to.be.false;
+    });
+
+    it('should not render icon when setting "noaudio"', () => {
+      const wrapper = mount(
+        <VideoWrapper component={TestPlayer} controls noaudio autoplay />
+      );
+      expect(wrapper.exists(`.${classes.eq}`)).to.be.false;
+    });
+
+    it('should not render mask without controls', () => {
+      const wrapper = mount(<VideoWrapper component={TestPlayer} autoplay />);
+      expect(wrapper.exists('button')).to.be.false;
+    });
+
+    it('should render mask with controls', () => {
+      const wrapper = mount(
+        <VideoWrapper component={TestPlayer} controls autoplay />
+      );
+      expect(wrapper.exists('button')).to.be.true;
+    });
+
+    it('should enable native controls on mask interaction', () => {
+      const wrapper = mount(
+        <VideoWrapper component={TestPlayer} controls autoplay />
+      );
+      expect(wrapper.find(TestPlayer).props().controls).to.be.false;
+      wrapper.find('button').simulate('click');
+      expect(wrapper.find(TestPlayer).props().controls).to.be.true;
+    });
+
+    it('should mute with autoplay', () => {
+      const wrapper = mount(<VideoWrapper component={TestPlayer} autoplay />);
+      expect(wrapper.find(TestPlayer).props().muted).to.be.true;
+    });
+
+    it('should unmute on mask interaction', () => {
+      const wrapper = mount(
+        <VideoWrapper component={TestPlayer} controls autoplay />
+      );
+      expect(wrapper.find(TestPlayer).props().muted).to.be.true;
+      wrapper.find('button').simulate('click');
+      expect(wrapper.find(TestPlayer).props().muted).to.be.false;
+    });
+
+    it('should remove Autoplay on mask interaction', () => {
+      const wrapper = mount(
+        <VideoWrapper component={TestPlayer} controls autoplay />
+      );
+      expect(wrapper.exists('Autoplay')).to.be.true;
+      wrapper.find('button').simulate('click');
+      expect(wrapper.exists('Autoplay')).to.be.false;
+    });
+
+    it('should observe/disconnect intersection on mount/unmount', () => {
+      const wrapper = mount(
+        <VideoWrapper component={TestPlayer} controls autoplay />
+      );
+      expect(intersectionObserverObserved).to.have.lengthOf(1);
+      wrapper.unmount();
+      expect(intersectionObserverObserved).to.be.null;
+    });
+
+    it('should observe/disconnect intersection on mask interaction', () => {
+      const wrapper = mount(
+        <VideoWrapper component={TestPlayer} controls autoplay />
+      );
+      expect(intersectionObserverObserved).to.have.lengthOf(1);
+      wrapper.find('button').simulate('click');
+      expect(intersectionObserverObserved).to.be.null;
+    });
+
+    it('should play when intersecting', async () => {
+      const wrapper = mount(
+        <VideoWrapper component={TestPlayer} controls autoplay />
+      );
+      intersectionObserverCallback([{isIntersecting: true}]);
+      await wrapper.find(TestPlayer).invoke('onCanPlay')();
+      expect(play).to.have.been.calledOnce;
+      expect(pause).to.not.have.been.called;
+    });
+
+    it('should pause when not intersecting', async () => {
+      const wrapper = mount(
+        <VideoWrapper component={TestPlayer} controls autoplay />
+      );
+      intersectionObserverCallback([{isIntersecting: false}]);
+      await wrapper.find(TestPlayer).invoke('onCanPlay')();
+      expect(play).to.not.have.been.called;
+      expect(pause).to.have.been.calledOnce;
+    });
+
+    it('should not play when not playable', async () => {
+      const wrapper = mount(
+        <WithAmpContext playable={false}>
+          <VideoWrapper component={TestPlayer} controls autoplay />
+        </WithAmpContext>
+      );
+      intersectionObserverCallback([{isIntersecting: true}]);
+      await wrapper.find(TestPlayer).invoke('onCanPlay')();
+      expect(play).to.not.have.been.called;
+    });
+  });
+});
diff --git a/extensions/amp-video/1.0/test/validator-amp-video.html b/extensions/amp-video/1.0/test/validator-amp-video.html
new file mode 100644
index 0000000000000..41255c06c1881
--- /dev/null
+++ b/extensions/amp-video/1.0/test/validator-amp-video.html
@@ -0,0 +1,86 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for amp-video tag using 1.0.
+-->
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8">
+    <link rel="canonical" href="./regular-html-version.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1">
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-1.0.js"></script>
+  </head>
+  <body>
+    <!-- Valid -->
+    <amp-video
+      controls
+      width="640"
+      height="360"
+      layout="responsive"
+      poster="images/kitten-playing.png"
+    >
+      <source src="videos/kitten-playing.webm" type="video/webm" />
+      <source src="videos/kitten-playing.mp4" type="video/mp4" />
+      <div fallback>
+        <p>This browser does not support the video element.</p>
+      </div>
+    </amp-video>
+
+    <!-- Invalid: Incorrect attribute value for autoplay -->
+    <amp-video
+      autoplay="true"
+      width="300"
+      height="500"
+      loop="1"
+      preload="metadata"
+      controls="controls"
+    ></amp-video>
+
+    <!-- Valid: Correct attribute value for rotate-to-fullscreen -->
+    <amp-video
+      rotate-to-fullscreen
+      width="300"
+      height="500"
+      loop
+      preload="metadata"
+      controls
+    ></amp-video>
+
+    <!-- Valid: Media Session Attributes -->
+    <amp-video
+      width="300"
+      height="500"
+      title="Hello"
+      artist="World"
+      artwork="example.jpg"
+      poster="example.jpg"
+    ></amp-video>
+
+    <!-- Valid: Most attributes are bindable -->
+    <amp-video
+      width="300"
+      height="500"
+      [title]="Hello"
+      [artist]="World"
+      [artwork]="example.jpg"
+      [poster]="example.jpg"
+    ></amp-video>
+  </body>
+</html>
diff --git a/extensions/amp-video/1.0/test/validator-amp-video.out b/extensions/amp-video/1.0/test/validator-amp-video.out
new file mode 100644
index 0000000000000..e1a5a2fb1ba95
--- /dev/null
+++ b/extensions/amp-video/1.0/test/validator-amp-video.out
@@ -0,0 +1,91 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for amp-video tag using 1.0.
+|  -->
+|  <!DOCTYPE html>
+|  <html ⚡>
+|    <head>
+|      <meta charset="utf-8">
+|      <link rel="canonical" href="./regular-html-version.html">
+|      <meta name="viewport" content="width=device-width,minimum-scale=1">
+|      <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>
+|      <script async src="https://cdn.ampproject.org/v0.js"></script>
+|      <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-1.0.js"></script>
+|    </head>
+|    <body>
+|      <!-- Valid -->
+|      <amp-video
+|        controls
+|        width="640"
+|        height="360"
+|        layout="responsive"
+|        poster="images/kitten-playing.png"
+|      >
+|        <source src="videos/kitten-playing.webm" type="video/webm" />
+|        <source src="videos/kitten-playing.mp4" type="video/mp4" />
+|        <div fallback>
+|          <p>This browser does not support the video element.</p>
+|        </div>
+|      </amp-video>
+|
+|      <!-- Invalid: Incorrect attribute value for autoplay -->
+|      <amp-video
+>>     ^~~~~~~~~
+amp-video/1.0/test/validator-amp-video.html:47:4 The attribute 'autoplay' in tag 'amp-video' is set to the invalid value 'true'. (see https://amp.dev/documentation/components/amp-video/)
+>>     ^~~~~~~~~
+amp-video/1.0/test/validator-amp-video.html:47:4 The attribute 'loop' in tag 'amp-video' is set to the invalid value '1'. (see https://amp.dev/documentation/components/amp-video/)
+|        autoplay="true"
+|        width="300"
+|        height="500"
+|        loop="1"
+|        preload="metadata"
+|        controls="controls"
+|      ></amp-video>
+|
+|      <!-- Valid: Correct attribute value for rotate-to-fullscreen -->
+|      <amp-video
+|        rotate-to-fullscreen
+|        width="300"
+|        height="500"
+|        loop
+|        preload="metadata"
+|        controls
+|      ></amp-video>
+|
+|      <!-- Valid: Media Session Attributes -->
+|      <amp-video
+|        width="300"
+|        height="500"
+|        title="Hello"
+|        artist="World"
+|        artwork="example.jpg"
+|        poster="example.jpg"
+|      ></amp-video>
+|
+|      <!-- Valid: Most attributes are bindable -->
+|      <amp-video
+|        width="300"
+|        height="500"
+|        [title]="Hello"
+|        [artist]="World"
+|        [artwork]="example.jpg"
+|        [poster]="example.jpg"
+|      ></amp-video>
+|    </body>
+|  </html>
diff --git a/extensions/amp-video/1.0/video-iframe.js b/extensions/amp-video/1.0/video-iframe.js
new file mode 100644
index 0000000000000..cd171b048fdcc
--- /dev/null
+++ b/extensions/amp-video/1.0/video-iframe.js
@@ -0,0 +1,212 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {VideoWrapper} from './video-wrapper';
+import {forwardRef} from '../../../src/preact/compat';
+import {
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from '../../../src/preact';
+
+const DEFAULT_SANDBOX = [
+  'allow-scripts',
+  'allow-same-origin',
+  'allow-popups',
+  'allow-popups-to-escape-sandbox',
+  'allow-top-navigation-by-user-activation',
+].join(' ');
+
+/**
+ * @param {T} prop
+ * @return {{current: ?T}}
+ * @template T
+ */
+function usePropRef(prop) {
+  const ref = useRef(null);
+  ref.current = prop;
+  return ref;
+}
+
+/**
+ * @param {!VideoIframeDef.Props} props
+ * @param {{current: ?T}} ref
+ * @return {PreactDef.Renderable}
+ * @template T
+ */
+function VideoIframeInternalWithRef(
+  {
+    loading,
+    unloadOnPause = false,
+    sandbox = DEFAULT_SANDBOX,
+    muted = false,
+    controls = false,
+    origin,
+    onCanPlay,
+    onMessage,
+    playerStateRef,
+    makeMethodMessage: makeMethodMessageProp,
+    onIframeLoad,
+    ...rest
+  },
+  ref
+) {
+  const iframeRef = useRef(null);
+
+  const readyDeferred = useMemo(() => new Deferred(), []);
+
+  // Only use the first instance of `makeMethodMessage` to avoid resetting this
+  // callback all the time.
+  const makeMethodMessageRef = useRef(makeMethodMessageProp);
+  const postMethodMessage = useCallback(
+    (method) => {
+      if (!iframeRef.current || !iframeRef.current.contentWindow) {
+        return;
+      }
+      const makeMethodMessage = makeMethodMessageRef.current;
+      readyDeferred.promise.then(() => {
+        const message = makeMethodMessage(method);
+        iframeRef.current.contentWindow./*OK*/ postMessage(message, '*');
+      });
+    },
+    [readyDeferred.promise]
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      get currentTime() {
+        return playerStateRef?.current?.['currentTime'] ?? NaN;
+      },
+      get duration() {
+        return playerStateRef?.current?.['duration'] ?? NaN;
+      },
+      play: () => postMethodMessage('play'),
+      pause: () => {
+        if (unloadOnPause) {
+          const iframe = iframeRef.current;
+          if (iframe) {
+            iframe.src = iframe.src;
+          }
+        } else {
+          postMethodMessage('pause');
+        }
+      },
+    }),
+    [playerStateRef, postMethodMessage, unloadOnPause]
+  );
+
+  // Keep `onMessage` in a ref to prevent re-listening on every render.
+  // This could otherwise occur when the passed `onMessage` is not memoized.
+  const onMessageRef = usePropRef(onMessage);
+
+  useLayoutEffect(() => {
+    if (!iframeRef.current) {
+      return;
+    }
+
+    /** @param {Event} event */
+    function handleMessage(event) {
+      if (!onMessageRef.current) {
+        return;
+      }
+
+      if (
+        (origin && !origin.test(event.origin)) ||
+        event.source != iframeRef.current.contentWindow
+      ) {
+        return;
+      }
+
+      // Triggers like an HTMLMediaElement, so we give it an iframe handle
+      // to dispatch events from. They're caught from being set on {...rest} so
+      // setting onPlay, etc. props should just work.
+      onMessageRef.current({
+        // Event
+        currentTarget: iframeRef.current,
+        target: iframeRef.current,
+
+        // MessageEvent
+        data: event.data,
+      });
+    }
+
+    const {defaultView} = iframeRef.current.ownerDocument;
+    defaultView.addEventListener('message', handleMessage);
+    return () => defaultView.removeEventListener('message', handleMessage);
+  }, [origin, onMessageRef]);
+
+  useLayoutEffect(() => {
+    postMethodMessage(muted ? 'mute' : 'unmute');
+  }, [muted, postMethodMessage]);
+
+  useLayoutEffect(() => {
+    postMethodMessage(controls ? 'showControls' : 'hideControls');
+  }, [controls, postMethodMessage]);
+
+  return (
+    <iframe
+      {...rest}
+      ref={iframeRef}
+      allowfullscreen
+      frameborder="0"
+      sandbox={sandbox}
+      loading={loading}
+      onCanPlay={() => {
+        if (onCanPlay) {
+          readyDeferred.promise.then(onCanPlay);
+        }
+        readyDeferred.resolve();
+      }}
+      onLoad={(event) => {
+        if (onIframeLoad) {
+          onIframeLoad(event);
+        }
+      }}
+    />
+  );
+}
+
+/** @visibleForTesting */
+const VideoIframeInternal = forwardRef(VideoIframeInternalWithRef);
+VideoIframeInternal.displayName = 'VideoIframeInternal';
+export {VideoIframeInternal};
+
+/**
+ * VideoWrapper using an <iframe> for implementation.
+ * Usable on the AMP layer through VideoBaseElement.
+ * @param {VideoIframeDef.Props} props
+ * @param {{current: (?T)}} ref
+ * @return {PreactDef.Renderable}
+ * @template T
+ */
+function VideoIframeWithRef(props, ref) {
+  return <VideoWrapper ref={ref} {...props} component={VideoIframeInternal} />;
+}
+
+/**
+ * VideoWrapper using an <iframe> for implementation.
+ * Usable on the AMP layer through VideoBaseElement.
+ * @param {VideoIframeDef.Props} props
+ * @return {PreactDef.Renderable}=
+ */
+const VideoIframe = forwardRef(VideoIframeWithRef);
+VideoIframe.displayName = 'VideoIframe';
+export {VideoIframe};
diff --git a/extensions/amp-video/1.0/video-iframe.type.js b/extensions/amp-video/1.0/video-iframe.type.js
new file mode 100644
index 0000000000000..8df6328bd2e26
--- /dev/null
+++ b/extensions/amp-video/1.0/video-iframe.type.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/** @const */
+var VideoIframeDef = {};
+
+/**
+ * @mixin VideoWrapperDef.props
+ * @typedef {{
+ *   loading: (string|undefined),
+ *   unloadOnPause: (boolean|undefined),
+ *   sandbox: (string|undefined),
+ *   origin: (RegExp|undefined),
+ *   onMessage: function(!MessageEvent),
+ *   makeMethodMessage: function(string):(!Object|string),
+ *   onIframeLoad: (function(!Event)|undefined),
+ * }}
+ */
+VideoIframeDef.Props;
diff --git a/extensions/amp-video/1.0/video-wrapper.css.js b/extensions/amp-video/1.0/video-wrapper.css.js
new file mode 100644
index 0000000000000..6afe79d1b3b21
--- /dev/null
+++ b/extensions/amp-video/1.0/video-wrapper.css.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2020 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.
+ */
+
+// TODO(alanorozco): Share these across components, make them JSS.
+
+export const fillStretch = {
+  'position': 'relative',
+  'width': '100%',
+  'height': '100%',
+};
+
+export const fillContentOverlay = {
+  'position': 'absolute',
+  'left': 0,
+  'right': 0,
+  'bottom': 0,
+  'top': 0,
+};
diff --git a/extensions/amp-video/1.0/video-wrapper.js b/extensions/amp-video/1.0/video-wrapper.js
new file mode 100644
index 0000000000000..ffee0fb60ac72
--- /dev/null
+++ b/extensions/amp-video/1.0/video-wrapper.js
@@ -0,0 +1,399 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {ContainWrapper, useValueRef} from '../../../src/preact/component';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {Loading} from '../../../src/core/loading-instructions';
+import {MIN_VISIBILITY_RATIO_FOR_AUTOPLAY} from '../../../src/video-interface';
+import {
+  MetadataDef,
+  parseFavicon,
+  parseOgImage,
+  parseSchemaImage,
+  setMediaSession,
+} from '../../../src/mediasession-helper';
+import {ReadyState} from '../../../src/core/constants/ready-state';
+import {dict} from '../../../src/core/types/object';
+import {fillContentOverlay, fillStretch} from './video-wrapper.css';
+import {forwardRef} from '../../../src/preact/compat';
+import {once} from '../../../src/core/types/function';
+import {useAmpContext, useLoading} from '../../../src/preact/context';
+import {useStyles as useAutoplayStyles} from './autoplay.jss';
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from '../../../src/preact';
+import {useResourcesNotify} from '../../../src/preact/utils';
+import objstr from 'obj-str';
+
+/**
+ * @param {?{getMetadata: (function():?JsonObject|undefined)}} player
+ * @param {!VideoWrapperDef.Props} props
+ * @return {!MetadataDef}
+ */
+const getMetadata = (player, props) =>
+  /** @type {!MetadataDef} */ (
+    Object.assign(
+      dict({
+        'title': props.title || props['aria-label'] || document.title,
+        'artist': props.artist || '',
+        'album': props.album || '',
+        'artwork': [
+          {
+            'src':
+              props.artwork ||
+              props.poster ||
+              parseSchemaImage(document) ||
+              parseOgImage(document) ||
+              parseFavicon(document) ||
+              '',
+          },
+        ],
+      }),
+      player && player.getMetadata ? player.getMetadata() : Object.create(null)
+    )
+  );
+
+/**
+ * @param {!VideoWrapperDef.Props} props
+ * @param {{current: ?T}} ref
+ * @return {PreactDef.Renderable}
+ * @template T
+ */
+function VideoWrapperWithRef(
+  {
+    autoplay = false,
+    className,
+    component: Component = 'video',
+    controls = false,
+    loading: loadingProp,
+    loop = false,
+    mediasession = true,
+    noaudio = false,
+    onPlayingState,
+    onReadyState,
+    poster,
+    sources,
+    src,
+    style,
+    ...rest
+  },
+  ref
+) {
+  useResourcesNotify();
+  const {playable} = useAmpContext();
+  const loading = useLoading(loadingProp);
+  const load = loading !== Loading.UNLOAD;
+
+  const [muted, setMuted] = useState(autoplay);
+  const [playing, setPlaying_] = useState(false);
+  const [metadata, setMetadata] = useState(/** @type {?MetadataDef}*/ (null));
+  const [hasUserInteracted, setHasUserInteracted] = useState(!autoplay);
+
+  const wrapperRef = useRef(null);
+  const playerRef = useRef(null);
+
+  // TODO(alanorozco): We might need an API to notify reload, like when
+  // <source>s change.
+  const readyDeferred = useMemo(() => new Deferred(), []);
+
+  const readyStateRef = useRef(ReadyState.LOADING);
+  // The `onReadyStateRef` is passed via a ref to avoid the changed values
+  // of `onReadyState` re-triggering the side effects.
+  const onReadyStateRef = useValueRef(onReadyState);
+  const setReadyState = useCallback(
+    (state, opt_failure) => {
+      if (state !== readyStateRef.current) {
+        readyStateRef.current = state;
+        const onReadyState = onReadyStateRef.current;
+        if (onReadyState) {
+          onReadyState(state, opt_failure);
+        }
+      }
+    },
+    [onReadyStateRef]
+  );
+
+  // The `onPlayingStateRef` is passed via a ref to avoid the changed values
+  // of `onPlayingState` re-triggering the side effects.
+  const onPlayingStateRef = useValueRef(onPlayingState);
+  const setPlayingState = useCallback(
+    (playing) => {
+      setPlaying_(playing);
+      const onPlayingState = onPlayingStateRef.current;
+      if (onPlayingState) {
+        onPlayingState(playing);
+      }
+    },
+    [onPlayingStateRef]
+  );
+
+  // Reset playing state when the video player is unmounted.
+  useLayoutEffect(() => {
+    if (!load) {
+      setPlayingState(false);
+    }
+  }, [load, setPlayingState]);
+
+  const play = useCallback(() => {
+    return readyDeferred.promise.then(() => playerRef.current.play());
+  }, [readyDeferred]);
+
+  const pause = useCallback(() => {
+    readyDeferred.promise.then(() => playerRef.current?.pause());
+  }, [readyDeferred]);
+
+  const requestFullscreen = useCallback(() => {
+    return readyDeferred.promise.then(() =>
+      playerRef.current.requestFullscreen()
+    );
+  }, [readyDeferred]);
+
+  const userInteracted = useCallback(() => {
+    setMuted(false);
+    setHasUserInteracted(true);
+  }, []);
+
+  // Update the initial readyState. Using `useLayoutEffect` here to avoid
+  // race conditions with possible future events.
+  useLayoutEffect(() => {
+    const readyState = playerRef.current?.readyState;
+    if (readyState != null) {
+      setReadyState(readyState > 0 ? ReadyState.COMPLETE : ReadyState.LOADING);
+    }
+  }, [setReadyState]);
+
+  useLayoutEffect(() => {
+    if (mediasession && playing && metadata) {
+      setMediaSession(window, metadata, play, pause);
+    }
+    return () => {
+      // TODO(alanorozco): Clear media session.
+      // (Tricky because we don't want to clear a different active session.)
+    };
+  }, [mediasession, playing, metadata, play, pause]);
+
+  // Pause if the video goes into a "paused" context.
+  useEffect(() => {
+    if (!playable) {
+      pause();
+    }
+  }, [playable, pause]);
+
+  // We'd like this to be as close as possible to the HTMLMediaElement
+  // interface, preferrably as an extension/superset.
+  useImperativeHandle(
+    ref,
+    () => ({
+      // Standard Bento
+      get readyState() {
+        return readyStateRef.current;
+      },
+
+      // Standard HTMLMediaElement/Element
+      play,
+      pause,
+      requestFullscreen,
+      get currentTime() {
+        if (!playerRef.current) {
+          return 0;
+        }
+        return playerRef.current.currentTime;
+      },
+      get duration() {
+        if (!playerRef.current) {
+          return NaN;
+        }
+        return playerRef.current.duration;
+      },
+      get autoplay() {
+        return autoplay;
+      },
+      get controls() {
+        return controls;
+      },
+      get loop() {
+        return loop;
+      },
+
+      // Non-standard
+      userInteracted,
+      mute: () => setMuted(true),
+      unmute: () => {
+        if (hasUserInteracted) {
+          setMuted(false);
+        }
+      },
+    }),
+    [
+      play,
+      pause,
+      requestFullscreen,
+      userInteracted,
+      hasUserInteracted,
+      autoplay,
+      controls,
+      loop,
+    ]
+  );
+
+  return (
+    <ContainWrapper
+      contentRef={wrapperRef}
+      className={className}
+      style={style}
+      size
+      layout
+      paint
+    >
+      {load && (
+        <Component
+          {...rest}
+          ref={playerRef}
+          loading={loading}
+          muted={muted}
+          loop={loop}
+          controls={controls && (!autoplay || hasUserInteracted)}
+          onCanPlay={() => {
+            readyDeferred.resolve();
+            setReadyState(ReadyState.COMPLETE);
+          }}
+          onLoadedMetadata={() => {
+            if (mediasession) {
+              readyDeferred.promise.then(() => {
+                setMetadata(getMetadata(playerRef.current, rest));
+              });
+            }
+            setReadyState(ReadyState.COMPLETE);
+          }}
+          onPlaying={() => setPlayingState(true)}
+          onPause={() => setPlayingState(false)}
+          onEnded={() => setPlayingState(false)}
+          onError={(e) => {
+            setReadyState(ReadyState.ERROR, e);
+            readyDeferred.reject(e);
+          }}
+          style={fillStretch}
+          src={src}
+          poster={poster}
+        >
+          {sources}
+        </Component>
+      )}
+      {autoplay && !hasUserInteracted && (
+        <Autoplay
+          metadata={metadata}
+          playing={playing}
+          displayIcon={!noaudio && muted}
+          wrapperRef={wrapperRef}
+          play={play}
+          pause={pause}
+          displayOverlay={controls}
+          onOverlayClick={userInteracted}
+        />
+      )}
+    </ContainWrapper>
+  );
+}
+
+/**
+ * @param {!VideoWrapperDef.AutoplayProps} props
+ * @return {PreactDef.Renderable}
+ */
+function Autoplay({
+  displayIcon,
+  displayOverlay,
+  metadata,
+  onOverlayClick,
+  pause,
+  play,
+  playing,
+  wrapperRef,
+}) {
+  const {playable} = useAmpContext();
+  const classes = useAutoplayStyles();
+
+  useEffect(() => {
+    if (!playable) {
+      pause();
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[entries.length - 1].isIntersecting) {
+          play().catch(() => {
+            // Empty catch to prevent useless unhandled rejection logging.
+            // play() can fail for benign reasons like pausing.
+          });
+        } else {
+          pause();
+        }
+      },
+      {threshold: MIN_VISIBILITY_RATIO_FOR_AUTOPLAY}
+    );
+
+    observer.observe(wrapperRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [wrapperRef, play, pause, playable]);
+
+  return (
+    <>
+      {displayIcon && (
+        <div
+          className={objstr({
+            [classes.eq]: true,
+            [classes.eqPlaying]: playing,
+          })}
+        >
+          <AutoplayIconContent />
+        </div>
+      )}
+
+      {displayOverlay && (
+        <button
+          aria-label={(metadata && metadata.title) || 'Unmute video'}
+          tabindex="0"
+          className={classes.autoplayMaskButton}
+          style={fillContentOverlay}
+          onClick={onOverlayClick}
+        ></button>
+      )}
+    </>
+  );
+}
+
+const AutoplayIconContent = /** @type {function():!PreactDef.Renderable} */ (
+  once(() => {
+    const classes = useAutoplayStyles();
+    return [1, 2, 3, 4].map((i) => (
+      <div className={classes.eqCol} key={i}></div>
+    ));
+  })
+);
+
+const VideoWrapper = forwardRef(VideoWrapperWithRef);
+VideoWrapper.displayName = 'VideoWrapper'; // Make findable for tests.
+export {VideoWrapper};
diff --git a/extensions/amp-video/1.0/video-wrapper.type.js b/extensions/amp-video/1.0/video-wrapper.type.js
new file mode 100644
index 0000000000000..1efac073d63d7
--- /dev/null
+++ b/extensions/amp-video/1.0/video-wrapper.type.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/** @const */
+var VideoWrapperDef = {};
+
+/**
+ * @typedef {{
+ *   play: function():!Promise,
+ *   pause: function():void,
+ *   requestFullscreen: function():!Promise,
+ *   currentTime: number,
+ *   duration: number,
+ *   autoplay: boolean,
+ *   controls: boolean,
+ *   loop: boolean,
+ *
+ *   mute: function(),
+ *   unmute: function(),
+ *   userInteracted: function(),
+ * }}
+ */
+VideoWrapperDef.Api;
+
+/**
+ * @typedef {function():PreactDef.Renderable|string}
+ */
+VideoWrapperDef.PlayerComponent;
+
+/**
+ * @typedef {{
+ *   component: (!VideoWrapperDef.PlayerComponent|undefined),
+ *   loading: (string|undefined),
+ *   src: (string|undefined),
+ *   sources: (?PreactDef.Renderable|undefined),
+ *   autoplay: (boolean|undefined),
+ *   controls: (boolean|undefined),
+ *   noaudio: (boolean|undefined),
+ *   poster: (string|undefined),
+ *   mediasession: (boolean|undefined),
+ *   title: (string|undefined),
+ *   artist: (string|undefined),
+ *   album: (string|undefined),
+ *   artwork: (string|undefined),
+ *   onReadyState: (function(string, *=)|undefined),
+ * }}
+ */
+VideoWrapperDef.Props;
+
+/**
+ * @typedef {{
+ *   metadata: ?Object,
+ *   displayIcon: boolean,
+ *   playing: boolean,
+ *   displayOverlay: boolean,
+ *   onOverlayClick: !Function,
+ *   wrapperRef: {current: !Element},
+ *   play: !Function,
+ *   pause: !Function,
+ * }}
+ */
+VideoWrapperDef.AutoplayProps;
diff --git a/extensions/amp-video/OWNERS b/extensions/amp-video/OWNERS
index 6b1d001d15c8c..bdea384f5ee11 100644
--- a/extensions/amp-video/OWNERS
+++ b/extensions/amp-video/OWNERS
@@ -1,10 +1,20 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [
+        {
+          name: 'ampproject/wg-components',
+        },
+        {
+          name: 'alanorozco',
+        },
+        {
+          name: 'gmajoulet',
+        },
+      ],
     },
   ],
 }
diff --git a/extensions/amp-video/amp-video.md b/extensions/amp-video/amp-video.md
index d14a208d49807..116dfc6b1bf9d 100644
--- a/extensions/amp-video/amp-video.md
+++ b/extensions/amp-video/amp-video.md
@@ -2,14 +2,14 @@
 $category@: media
 formats:
   - websites
-  - stories
-  - ads
 teaser:
   text: Replaces the HTML5 video tag.
+experimental: true
+bento: true
 ---
 
 <!---
-Copyright 2015 The AMP HTML Authors. All Rights Reserved.
+Copyright 2021 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.
@@ -26,22 +26,20 @@ limitations under the License.
 
 # amp-video
 
-A replacement for the HTML5 `video` tag; only to be used for direct HTML5 video file embeds.
+## Usage
 
-## Behavior
+A replacement for the HTML5 `video` tag; only to be used for direct HTML5 video file embeds.
 
 The `amp-video` component loads the video resource specified by its `src` attribute lazily, at a time determined by the runtime. You can control an `amp-video` component much the same way as a standard HTML5 `<video>` tag.
 
 The `amp-video` component accepts up to four unique types of HTML nodes as children:
 
-- `source` tags: Just like in the HTML `<video>` tag, you can add `<source>` tag children to specify different source media files to play.
-- `track` tags to enable subtitles in the video. If the track is hosted on a different origin than the document, you must add the `crossorigin` attribute to the `<amp-video>` tag.
-- a placeholder for before the video starts
-- a fallback if the browser doesn’t support HTML5 video: One or zero immediate child nodes can have the `fallback` attribute. If present, this node and its children form the content that displays if HTML5 video is not supported on the user’s browser.
+-   `source` tags: Just like in the HTML `<video>` tag, you can add `<source>` tag children to specify different source media files to play.
+-   `track` tags to enable subtitles in the video. If the track is hosted on a different origin than the document, you must add the `crossorigin` attribute to the `<amp-video>` tag. Whenever the video has narration or important audio information, make sure to include subtitles/captions for users who may not be able to hear it or have their sound turned off.
+-   a placeholder for before the video starts
+-   a fallback if the browser doesn’t support HTML5 video: One or zero immediate child nodes can have the `fallback` attribute. If present, this node and its children form the content that displays if HTML5 video is not supported on the user’s browser.
 
-#### Example
-
-[example preview="inline" playground="true" imports="amp-video"]
+[example preview="inline" playground="true" imports="amp-video:1.0"]
 
 ```html
 <amp-video {% if format=='stories'%}autoplay {% endif %}controls
@@ -61,98 +59,217 @@ The `amp-video` component accepts up to four unique types of HTML nodes as child
 
 [/example]
 
-## Analytics
+#### Standalone use outside valid AMP documents
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+[example preview="top-frame" playground="false"]
+
+```html
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-video-1.0.css">
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-1.0.js"></script>
+</head>
+<body>
+  <amp-video
+    style="aspect-ratio: 16/9"
+    id="my-video"
+  >
+    <source src="my-video.webm" type="video/webm" />
+    <source src="my-video.mp4" type="video/mp4" />
+  </amp-video>
+  <script>
+    (async () => {
+      const video = document.querySelector('#my-video');
+      await customElements.whenDefined('amp-video');
+      const videoHandle = await video.getApi();
+
+      // programatically call playback actions
+      videoHandle.play();
+      videoHandle.pause();
+      videoHandle.requestFullscreen();
+      videoHandle.mute();
+      videoHandle.unmute();
+
+      // get video state
+      console.log({
+        autoplay: videoHandle.autoplay,
+        controls: videoHandle.controls,
+        duration: videoHandle.duration,
+        currentTime: videoHandle.currentTime,
+        loop: videoHandle.loop,
+      })
+    })();
+  </script>
+</body>
+```
+
+[/example]
+
+#### Interactivity and API usage
+
+Bento enabled components in standalone use are highly interactive through their API. In Bento standalone use, the element's API replaces AMP Actions and events and [`amp-bind`](https://amp.dev/documentation/components/amp-bind/?format=websites).
+
+The `amp-video` component API is accessible by including the following script tag in your document:
+
+```js
+await customElements.whenDefined('amp-video');
+const videoHandle = await video.getApi();
+```
+
+##### Actions
+
+The `amp-video` API allows you to perform the following actions:
+
+##### `play()`
+
+Plays the video.
+
+```js
+videoHandle.play();
+```
+
+##### `pause()`
+
+Pauses the video.
+
+```js
+videoHandle.pause();
+```
+
+##### `mute()`
+
+Mutes the video.
+
+```js
+videoHandle.mute();
+```
+
+##### `unmute()`
+
+Unmutes the video.
+
+```js
+videoHandle.unmute();
+```
+
+##### `requestFullscreen()`
+
+Expands the video to fullscreen when possible.
+
+```js
+videoHandle.requestFullscreen();
+```
+
+#### Properties
+
+It also exposes the following read-only properties:
+
+##### `currentTime` (`number`)
+
+The current playback time in seconds.
+
+```js
+console.log(videoHandle.currentTime);
+```
+
+##### `duration` (`number`)
+
+The video's duration in seconds, when it's known (e.g. is not a livestream).
+
+```js
+console.log(videoHandle.duration);
+```
+
+##### `autoplay` (`boolean`)
 
-`amp-video` supports analytics out of the box. See [video analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-video-analytics.md) for more information.
+Whether the video autoplays.
+
+```js
+console.log(videoHandle.autoplay);
+```
+
+##### `controls` (`boolean`)
+
+Whether the video shows controls.
+
+```js
+console.log(videoHandle.controls);
+```
+
+##### `loop` (`boolean`)
+
+Whether the video loops.
+
+```js
+console.log(videoHandle.loop);
+```
 
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>src</strong></td>
-    <td>Required if no <code>&lt;source&gt;</code> children are present. Must be HTTPS.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>poster</strong></td>
-    <td>The image for the frame to be displayed before video playback has started. By
+### src
+
+Required if no `<source>` children are present. Must be HTTPS.
+
+### poster
+
+The image for the frame to be displayed before video playback has started. By
 default, the first frame is displayed.
-<br>
-Alternatively, you can present a click-to-play overlay. For details, see the <a href="#click-to-play-overlay">Click-to-Play overlay</a> section below.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>autoplay</strong></td>
-    <td>If this attribute is present, and the browser supports autoplay, the video will be automatically
+
+Alternatively, you can present a click-to-play overlay.
+
+### autoplay
+
+If this attribute is present, and the browser supports autoplay, the video will be automatically
 played as soon as it becomes visible. There are some conditions that the component needs to meet
-to be played, <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-video-interface.md#autoplay">which are outlined in the Video in AMP spec</a>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>controls</strong></td>
-    <td>This attribute is similar to the <code>controls</code> attribute in the HTML5 <code>video</code>. If this attribute is present, the browser offers controls to allow the user to control video playback.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>controlsList</strong></td>
-    <td>Same as <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList">controlsList</a> attribute of HTML5 video element. Only supported by certain browsers. Please see <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList">https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList</a> for details.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>dock</strong></td>
-    <td><strong>Requires <code>amp-video-docking</code> extension.</strong> If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
-    For more details, see <a href="https://amp.dev/documentation/components/amp-video-docking">documentation on the docking extension itself.</a></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>loop</strong></td>
-    <td>If present, the video will automatically loop back to the start upon reaching the end.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>crossorigin</strong></td>
-    <td>Required if a <code>track</code> resource is hosted on a different origin than the document.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>disableremoteplayback</strong></td>
-    <td>Determines whether the media element is allowed to have a remote playback UI such as Chromecast or AirPlay.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>muted (deprecated)</strong></td>
-    <td>The <code>muted</code> attribute is deprecated and no longer has any effect. The <code>autoplay</code> attribute automatically controls the mute behavior.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>noaudio</strong></td>
-    <td>Annotates the video as having no audio. This hides the equalizer icon that is displayed
-when the video has autoplay.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>rotate-to-fullscreen</strong></td>
-    <td>If the video is visible, the video displays fullscreen after the user rotates their device into landscape mode. For more details, see the <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-video-interface.md#rotate-to-fullscreen">Video in AMP spec</a>.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
-
-## Media Session API attributes
+to be played, [which are outlined in the Video in AMP spec](../../docs/spec/amp-video-interface.md#autoplay).
 
-The `amp-video` component implements the [Media Session API](https://developers.google.com/web/updates/2017/02/media-session), which enables developers to specify more information about the video file. The additional information for the video displays in the notification center of the user's device (along with the play/pause controls).
+### controls
+
+This attribute is similar to the `controls` attribute in the HTML5 `video`. If this attribute is present, the browser offers controls to allow the user to control video playback.
+
+### controlsList
+
+Same as [controlsList](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList) attribute of HTML5 video element. Only supported by certain browsers.
+
+### loop
+
+If present, the video will automatically loop back to the start upon reaching the end.
+
+### crossorigin
+
+Required if a `track` resource is hosted on a different origin than the document.
+
+### disableremoteplayback
 
-<table>
-  <tr>
-    <td width="40%"><strong>artwork</strong></td>
-    <td>Specifies a URL to a PNG/JPG/ICO image serving as the video's artwork. If `artwork` is not present, the Media Session API helper uses either the `image` field in the `schema.org` definition, the `og:image`, or the website's `favicon`.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>artist</strong></td>
-    <td>Indicates the author of the video file, specified as a string.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>album</strong></td>
-    <td>Indicates the album/collection the video was taken from, specified as a string.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>title</strong></td>
-    <td>Indicates the name/title of the video, specified as a string. If not provided, the Media Session API helper uses either the `aria-label` attribute or falls back to the page's title.</td>
-  </tr>
-</table>
-
-Example:
+Determines whether the media element is allowed to have a remote playback UI such as Chromecast or AirPlay.
+
+### muted (deprecated)
+
+The `muted` attribute is deprecated and no longer has any effect. The `autoplay` attribute automatically controls the mute behavior.
+
+### noaudio
+
+Annotates the video as having no audio. This has the following effects:
+
+-   An equalizer icon will **not** be drawn when setting [`autoplay`](#autoplay).
+
+-   An `<amp-story>` that includes this video will **not** draw an unnecessary mute button.
+
+### rotate-to-fullscreen
+
+If the video is visible, the video displays fullscreen after the user rotates their device into landscape mode. For more details, see the [Video in AMP spec](../../docs/spec/amp-video-interface.md#rotate-to-fullscreen).
+
+This attribute can be configured to based on a [media query](./../../docs/spec/amp-html-responsive-attributes.md).
+
+### common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
+
+### Media Session API attributes
+
+The `amp-video` component implements the [Media Session API](https://developers.google.com/web/updates/2017/02/media-session), which enables developers to specify more information about the video file. The additional information for the video displays in the notification center of the user's device (along with the play/pause controls).
 
 This example contains both the `poster` and `artwork` attributes. The `poster` serves as the placeholder image before the video plays, while `artwork` is the image that displays in the notification via the MediaSession API.
 
@@ -171,12 +288,28 @@ This example contains both the `poster` and `artwork` attributes. The `poster` s
 </amp-video>
 ```
 
-## Click-to-Play overlay
+#### artwork
 
-Providing a click-to-play overlay is a common UX feature for video players on the web. For example, you could display a custom play icon that the user can click, as well as include the title of the video, different sized poster images, and so on. Because the `amp-video` component supports the standard `play` AMP action, you can easily implement click-to-play.
+Specifies a URL to a PNG/JPG/ICO image serving as the video's artwork. If `artwork` is not present, the Media Session API helper uses either the `image` field in the `schema.org` definition, the `og:image`, or the website's `favicon`.
+
+#### artist
+
+Indicates the author of the video file, specified as a string.
+
+#### album
+
+Indicates the album/collection the video was taken from, specified as a string.
 
-For a detailed example, visit AMP By Example's [Click-to-play overlay for amp-video](https://amp.dev/documentation/examples/multimedia-animations/click-to-play_overlay_for_amp-video/).
+#### title
 
-## Validation
+Indicates the name/title of the video, specified as a string. If not provided, the Media Session API helper uses either the `aria-label` attribute or falls back to the page's title.
 
-See [amp-video rules](https://github.com/ampproject/amphtml/blob/master/validator/validator-main.protoascii) in the AMP validator specification.
+## Analytics
+
+`amp-video` supports analytics out of the box. See [video analytics](../amp-analytics/amp-video-analytics.md) for more information.
+
+## Styling
+
+### Click-to-Play overlay
+
+Providing a click-to-play overlay is a common UX feature for video players on the web. For example, you could display a custom play icon that the user can click, as well as include the title of the video, different sized poster images, and so on. Because the `amp-video` component supports the standard `play` AMP action, you can easily implement click-to-play.
diff --git a/extensions/amp-video/validator-amp-video.protoascii b/extensions/amp-video/validator-amp-video.protoascii
index b6e5826888734..56aca09f04995 100644
--- a/extensions/amp-video/validator-amp-video.protoascii
+++ b/extensions/amp-video/validator-amp-video.protoascii
@@ -14,19 +14,30 @@
 # limitations under the license.
 #
 
-tags: {  # amp-video
+tags: {  # amp-video 1.0
+  html_format: AMP
+  tag_name: "SCRIPT"
+  satisfies: "amp-video 1.0"
+  excludes: "amp-video 0.1"
+  extension_spec: {
+    name: "amp-video"
+    version_name: "v1.0"
+    version: "1.0"
+  }
+  attr_lists: "common-extension-attrs"
+}
+
+tags: {  # amp-video 0.1
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SCRIPT"
-  # Typically the extension_spec takes care of this, but we have
-  # a unique situation where we need to refer to this earlier in
-  # the rules processing for the also_requires_tag_warning below.
-  spec_name: "amp-video extension .js script"
+  satisfies: "amp-video 0.1"
+  excludes: "amp-video 1.0"
   extension_spec: {
     name: "amp-video"
     version: "0.1"
     version: "latest"
+    version_name: "v0.1"
     requires_usage: NONE
   }
   attr_lists: "common-extension-attrs"
@@ -109,24 +120,21 @@ attr_lists: {
 tags: {  # <amp-video> not in amp-story.
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "AMP-VIDEO"
   # There is an alternate spec for amp-video in amp-story.
   disallowed_ancestor: "AMP-STORY"
-  # Typically we'd require the extension j/s, but for historical reasons
-  # many pages don't have it, so it ends up late loaded and we warn, instead
-  # of making this a validation error.
-  also_requires_tag_warning: "amp-video extension .js script"
+  requires_extension: "amp-video"
   attrs: { name: "poster" }
   attr_lists: "extended-amp-global"
   attr_lists: "amp-video-common"
   attr_lists: "lightboxable-elements"
-  spec_url: "https://amp.dev/documentation/components/amp-video"
+  spec_url: "https://amp.dev/documentation/components/amp-video/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
     supported_layouts: FLEX_ITEM
+    supported_layouts: INTRINSIC
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
@@ -135,21 +143,21 @@ tags: {  # <amp-video> not in amp-story.
 tags: {  # <amp-video> in amp-story-page-attachment (same rules as regular AMPHTML).
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "AMP-VIDEO"
   spec_name: "amp-story >> amp-story-page-attachment >> amp-video"
   mandatory_ancestor: "AMP-STORY-PAGE-ATTACHMENT"
-  also_requires_tag_warning: "amp-video extension .js script"
+  requires_extension: "amp-video"
   attrs: { name: "poster" }
   attr_lists: "extended-amp-global"
   attr_lists: "amp-video-common"
   attr_lists: "lightboxable-elements"
-  spec_url: "https://amp.dev/documentation/components/amp-video"
+  spec_url: "https://amp.dev/documentation/components/amp-video/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
     supported_layouts: FLEX_ITEM
+    supported_layouts: INTRINSIC
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
@@ -182,9 +190,13 @@ tags: {  # <amp-video> in amp-story
     name: "poster"
     mandatory: true
   }
+  attrs: {
+    name: "cache"
+    value: "google"
+  }
   attr_lists: "extended-amp-global"
   attr_lists: "amp-video-common"
-  spec_url: "https://amp.dev/documentation/components/amp-video"
+  spec_url: "https://amp.dev/documentation/components/amp-video/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
diff --git a/extensions/amp-viewer-assistance/0.1/amp-viewer-assistance.js b/extensions/amp-viewer-assistance/0.1/amp-viewer-assistance.js
deleted file mode 100644
index a29493f78f3bf..0000000000000
--- a/extensions/amp-viewer-assistance/0.1/amp-viewer-assistance.js
+++ /dev/null
@@ -1,284 +0,0 @@
-/**
- * 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.
- */
-
-import {ActionTrust} from '../../../src/action-constants';
-import {Services} from '../../../src/services';
-import {dev, user} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
-import {isExperimentOn} from '../../../src/experiments';
-import {tryParseJson} from '../../../src/json';
-
-/** @const {string} */
-const TAG = 'amp-viewer-assistance';
-
-/** @const {string} */
-const GSI_TOKEN_PROVIDER = 'actions-on-google-gsi';
-
-/** @const {!Array<string>} */
-const ACTION_STATUS_ALLOWLIST = [
-  'ACTIVE_ACTION_STATUS',
-  'FAILED_ACTION_STATUS',
-  'COMPLETED_ACTION_STATUS',
-];
-
-export class AmpViewerAssistance {
-  /**
-   * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
-   */
-  constructor(ampdoc) {
-    const assistanceElement = ampdoc.getElementById('amp-viewer-assistance');
-
-    /** @private {boolean} */
-    this.enabled_ = !!assistanceElement;
-    if (!this.enabled_) {
-      return;
-    }
-
-    /** @const @private */
-    this.ampdoc_ = ampdoc;
-
-    /** @const @private {!Element} */
-    this.assistanceElement_ = dev().assertElement(assistanceElement);
-
-    /** @const @private {JsonObject|null|undefined} */
-    this.configJson_ = tryParseJson(
-      this.assistanceElement_.textContent,
-      (e) => {
-        throw user().createError(
-          'Failed to parse "amp-viewer-assistance" JSON: ' + e
-        );
-      }
-    );
-
-    /** @private @const {!../../../src/service/viewer-interface.ViewerInterface} */
-    this.viewer_ = Services.viewerForDoc(ampdoc);
-
-    /** @private @const {!../../../src/service/action-impl.ActionService} */
-    this.action_ = Services.actionServiceForDoc(this.assistanceElement_);
-
-    /** @private @const {!../../../src/service/vsync-impl.Vsync} */
-    this.vsync_ = Services.vsyncFor(ampdoc.win);
-  }
-
-  /**
-   * @param {!../../../src/service/action-impl.ActionInvocation} invocation
-   * @return {?Promise}
-   * @private
-   */
-  actionHandler_(invocation) {
-    const {method, args} = invocation;
-    if (method == 'updateActionState') {
-      if (invocation.satisfiesTrust(ActionTrust.LOW)) {
-        this.validateAndTransformUpdateArgs_(args)
-          .then((args) => {
-            return this.viewer_./*OK*/ sendMessageAwaitResponse(method, args);
-          })
-          .catch((err) => {
-            user().error(TAG, err.toString());
-          });
-      }
-    } else if (method == 'signIn') {
-      if (invocation.satisfiesTrust(ActionTrust.DEFAULT)) {
-        this.requestSignIn_();
-      }
-    }
-    return null;
-  }
-
-  /**
-   * @private
-   * @restricted
-   * @return {!AmpViewerAssistance|Promise<!AmpViewerAssistance>}
-   */
-  start_() {
-    if (!this.enabled_) {
-      user().error(TAG, 'Could not find #amp-viewer-assistance element.');
-      return this;
-    }
-    return this.viewer_.isTrustedViewer().then((isTrustedViewer) => {
-      if (
-        !isTrustedViewer &&
-        !isExperimentOn(this.ampdoc_.win, 'amp-viewer-assistance-untrusted')
-      ) {
-        this.enabled_ = false;
-        user().error(
-          TAG,
-          'amp-viewer-assistance is currently only supported on trusted' +
-            ' viewers.'
-        );
-        return this;
-      }
-      this.action_.installActionHandler(
-        this.assistanceElement_,
-        this.actionHandler_.bind(this)
-      );
-
-      this.getIdTokenPromise();
-
-      this.viewer_./*OK*/ sendMessage(
-        'viewerAssistanceConfig',
-        dict({
-          'config': this.configJson_,
-        })
-      );
-      return this;
-    });
-  }
-
-  /**
-   * @return {!Promise<undefined>}
-   */
-  getIdTokenPromise() {
-    return this.viewer_
-      ./*OK*/ sendMessageAwaitResponse(
-        'getAccessTokenPassive',
-        dict({
-          // For now there's only 1 provider option, so we just hard code it
-          'providers': [GSI_TOKEN_PROVIDER],
-        })
-      )
-      .then((token) => {
-        this.setIdTokenStatus_(Boolean(!!token));
-        return token;
-      })
-      .catch(() => {
-        this.setIdTokenStatus_(/*available=*/ false);
-      });
-  }
-
-  /**
-   * @private
-   */
-  requestSignIn_() {
-    this.viewer_
-      ./*OK*/ sendMessageAwaitResponse(
-        'requestSignIn',
-        dict({
-          'providers': [GSI_TOKEN_PROVIDER],
-        })
-      )
-      .then((token) => {
-        user().info(TAG, 'Token: ' + token);
-        if (token) {
-          this.setIdTokenStatus_(/*available=*/ true);
-          this.action_.trigger(
-            this.assistanceElement_,
-            'signedIn',
-            null,
-            ActionTrust.DEFAULT // DEFAULT because async after gesture.
-          );
-        } else {
-          this.setIdTokenStatus_(/*available=*/ false);
-        }
-      });
-  }
-
-  /**
-   * Checks the arguments of 'updateActionState' to have either a valid
-   * 'update' or 'error' parameter.
-   * @private
-   * @param {?JsonObject} args
-   * @return {!Promise<!JsonObject>}
-   */
-  validateAndTransformUpdateArgs_(args) {
-    if (!args) {
-      return Promise.reject(
-        '"updateActionState" was called with no arguments!"'
-      );
-    }
-
-    const update = args['update'];
-    const error = args['error'];
-    if (error && update) {
-      return Promise.reject(
-        '"updateActionState" must have only one of' +
-          ' the parameters "error" and "update".'
-      );
-    } else if (error) {
-      // Must transform 'error' Response object
-      if (error && typeof error.text === 'function') {
-        return error.text().then((errorMessage) => {
-          return dict({
-            'update': {
-              'actionStatus': 'FAILED_ACTION_STATUS',
-              'result': {
-                'code': error.status,
-                'message': errorMessage,
-              },
-            },
-          });
-        });
-      } else {
-        return Promise.reject(
-          '"updateActionState" action "error" parameter' +
-            ' must contain a valid "response" object.'
-        );
-      }
-    } else if (update) {
-      const actionStatus = update && update['actionStatus'];
-      if (!actionStatus || !ACTION_STATUS_ALLOWLIST.includes(actionStatus)) {
-        return Promise.reject(
-          '"updateActionState" action "update" parameter' +
-            ' must contain a valid "actionStatus" field.'
-        );
-      }
-      return Promise.resolve(args);
-    } else {
-      return Promise.reject(
-        '"updateActionState" action must have an' +
-          ' "update" or "error" parameter.'
-      );
-    }
-  }
-
-  /**
-   * Toggles the CSS classes related to the status of the identity token.
-   * @private
-   * @param {boolean} available
-   */
-  setIdTokenStatus_(available) {
-    this.toggleTopClass_('amp-viewer-assistance-identity-available', available);
-  }
-
-  /**
-   * Gets the root element of the AMP doc.
-   * @return {!Element}
-   * @private
-   */
-  getRootElement_() {
-    const root = this.ampdoc_.getRootNode();
-    return dev().assertElement(root.documentElement || root.body || root);
-  }
-
-  /**
-   * Toggles a class on the root element of the AMP doc.
-   * @param {string} className
-   * @param {boolean} on
-   * @private
-   */
-  toggleTopClass_(className, on) {
-    this.vsync_.mutate(() => {
-      this.getRootElement_().classList.toggle(className, on);
-    });
-  }
-}
-
-// Register the extension services.
-AMP.extension(TAG, '0.1', function (AMP) {
-  AMP.registerServiceForDoc('amp-viewer-assistance', function (ampdoc) {
-    return new AmpViewerAssistance(ampdoc).start_();
-  });
-});
diff --git a/extensions/amp-viewer-assistance/0.1/test/test-amp-viewer-assistance.js b/extensions/amp-viewer-assistance/0.1/test/test-amp-viewer-assistance.js
deleted file mode 100644
index 06fc85ad42f57..0000000000000
--- a/extensions/amp-viewer-assistance/0.1/test/test-amp-viewer-assistance.js
+++ /dev/null
@@ -1,351 +0,0 @@
-/**
- * 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.
- */
-
-import {ActionInvocation} from '../../../../src/service/action-impl';
-import {ActionTrust} from '../../../../src/action-constants';
-import {AmpViewerAssistance} from '../amp-viewer-assistance';
-import {mockServiceForDoc} from '../../../../testing/test-helper';
-
-describes.fakeWin(
-  'AmpViewerAssistance',
-  {
-    amp: true,
-    location: 'https://pub.com/doc1',
-  },
-  (env) => {
-    let document;
-    let ampdoc;
-    let element;
-    let viewerMock;
-
-    beforeEach(() => {
-      ampdoc = env.ampdoc;
-      document = env.win.document;
-      viewerMock = mockServiceForDoc(env.sandbox, env.ampdoc, 'viewer', [
-        'isTrustedViewer',
-        'sendMessage',
-        'sendMessageAwaitResponse',
-      ]);
-      viewerMock.isTrustedViewer.returns(Promise.resolve(true));
-      viewerMock.sendMessageAwaitResponse.returns(Promise.resolve('idToken'));
-
-      element = document.createElement('script');
-      element.setAttribute('id', 'amp-viewer-assistance');
-      element.setAttribute('type', 'application/json');
-      document.body.appendChild(element);
-    });
-
-    it('should disable service when no config', () => {
-      document.body.removeChild(element);
-      const service = new AmpViewerAssistance(ampdoc);
-      expect(service.enabled_).to.be.false;
-      expect(service.assistanceElement_).to.be.undefined;
-    });
-
-    it('should disable service when the viewer is not trusted', () => {
-      expectAsyncConsoleError(
-        '[amp-viewer-assistance] amp-viewer-assistance is' +
-          ' currently only supported on trusted viewers.'
-      );
-      viewerMock.isTrustedViewer.returns(Promise.resolve(false));
-      const config = {
-        'providerId': 'foo-bar',
-      };
-      element.textContent = JSON.stringify(config);
-      const service = new AmpViewerAssistance(ampdoc);
-      return service.start_().then(() => {
-        expect(service.enabled_).to.be.false;
-      });
-    });
-
-    it('should fail if config is malformed', () => {
-      expect(() => {
-        new AmpViewerAssistance(ampdoc);
-      }).to.throw(Error);
-    });
-
-    it('should send the config to the viewer', () => {
-      const config = {
-        'providerId': 'foo-bar',
-      };
-      element.textContent = JSON.stringify(config);
-      const service = new AmpViewerAssistance(ampdoc);
-      expect(service.enabled_).to.be.true;
-      expect(service.assistanceElement_).to.equal(element);
-      const sendMessageStub = service.viewer_.sendMessage;
-      return service.start_().then(() => {
-        expect(sendMessageStub).to.be.calledOnce;
-        expect(sendMessageStub.firstCall.args[0]).to.equal(
-          'viewerAssistanceConfig'
-        );
-        expect(sendMessageStub.firstCall.args[1]).to.deep.equal({
-          'config': config,
-        });
-      });
-    });
-
-    describe('updateActionState', () => {
-      let service;
-      let sendMessageStub;
-
-      beforeEach(() => {
-        const config = {
-          'providerId': 'foo-bar',
-        };
-        element.textContent = JSON.stringify(config);
-
-        service = new AmpViewerAssistance(ampdoc);
-        sendMessageStub = service.viewer_.sendMessageAwaitResponse;
-      });
-
-      it('should send if "update" params are well-formed', () => {
-        const args = {
-          'update': {'actionStatus': 'COMPLETED_ACTION_STATUS'},
-        };
-        const invoke = new ActionInvocation(element, 'updateActionState', args);
-        invoke.trust = ActionTrust.LOW;
-
-        return service
-          .start_()
-          .then(() => {
-            sendMessageStub.resetHistory();
-            return service.actionHandler_(invoke);
-          })
-          .then(() => {
-            expect(sendMessageStub).to.be.calledOnce;
-            expect(sendMessageStub.firstCall.args[0]).to.equal(
-              'updateActionState'
-            );
-            expect(sendMessageStub.firstCall.args[1]).to.deep.equal(args);
-          });
-      });
-
-      it('should not send if both "update" and "error" params are missing', () => {
-        const invoke = new ActionInvocation(element, 'updateActionState', {});
-        invoke.trust = ActionTrust.LOW;
-        let actionHandlerPromise;
-        expectAsyncConsoleError(
-          '[amp-viewer-assistance] "updateActionState"' +
-            ' action must have an "update" or "error" parameter.',
-          1
-        );
-        return service
-          .start_()
-          .then(() => {
-            sendMessageStub.resetHistory();
-            actionHandlerPromise = service.actionHandler_(invoke);
-            expect(actionHandlerPromise).to.be.null;
-            return actionHandlerPromise;
-          })
-          .then(() => {
-            expect(sendMessageStub).to.not.be.called;
-          });
-      });
-
-      it('should not send if "update.actionStatus" param is missing', () => {
-        const args = {'update': {}};
-        const invoke = new ActionInvocation(element, 'updateActionState', args);
-        invoke.trust = ActionTrust.LOW;
-        let actionHandlerPromise;
-        expectAsyncConsoleError(
-          '[amp-viewer-assistance] "updateActionState"' +
-            ' action "update" parameter must contain a valid "actionStatus"' +
-            ' field.',
-          1
-        );
-        return service
-          .start_()
-          .then(() => {
-            sendMessageStub.resetHistory();
-            actionHandlerPromise = service.actionHandler_(invoke);
-            expect(actionHandlerPromise).to.be.null;
-            return actionHandlerPromise;
-          })
-          .then(() => {
-            expect(sendMessageStub).to.not.be.called;
-          });
-      });
-
-      it('should not send if "update.actionStatus" param is invalid', () => {
-        const args = {
-          'update': {'actionStatus': 'INVALID_ACTION_STATUS'},
-        };
-        const invoke = new ActionInvocation(element, 'updateActionState', args);
-        invoke.trust = ActionTrust.LOW;
-        expectAsyncConsoleError(
-          '[amp-viewer-assistance] "updateActionState"' +
-            ' action "update" parameter must contain a valid "actionStatus"' +
-            ' field.',
-          1
-        );
-
-        return service.start_().then(() => {
-          sendMessageStub.reset();
-          expect(service.actionHandler_(invoke)).to.be.null;
-          expect(sendMessageStub).to.not.be.called;
-        });
-      });
-
-      it('should send if "error" param is well-formed', () => {
-        const error = {
-          text: () => {
-            return Promise.resolve('error message');
-          },
-          status: 500,
-        };
-        const args = {
-          'error': error,
-        };
-        const invoke = new ActionInvocation(element, 'updateActionState', args);
-        invoke.trust = ActionTrust.LOW;
-
-        return service
-          .start_()
-          .then(() => {
-            sendMessageStub.resetHistory();
-            service.actionHandler_(invoke);
-            return error.text();
-          })
-          .then(() => {
-            expect(sendMessageStub).to.be.calledOnce;
-            expect(sendMessageStub.firstCall.args[0]).to.equal(
-              'updateActionState'
-            );
-            expect(sendMessageStub.firstCall.args[1]).to.deep.equal({
-              update: {
-                actionStatus: 'FAILED_ACTION_STATUS',
-                result: {
-                  code: 500,
-                  message: 'error message',
-                },
-              },
-            });
-          });
-      });
-
-      it('should not send if "error" param is invalid', () => {
-        const error = {
-          status: 500,
-        };
-        const args = {
-          'error': error,
-        };
-        const invoke = new ActionInvocation(element, 'updateActionState', args);
-        invoke.trust = ActionTrust.LOW;
-        expectAsyncConsoleError(
-          '[amp-viewer-assistance] "updateActionState"' +
-            ' action "error" parameter must contain a valid "response"' +
-            ' object.',
-          1
-        );
-
-        return service.start_().then(() => {
-          sendMessageStub.resetHistory();
-          expect(service.actionHandler_(invoke)).to.be.null;
-          expect(sendMessageStub).to.not.be.called;
-        });
-      });
-
-      it('should not send if both "update" and "error" params are present', () => {
-        const args = {
-          'error': {},
-          'update': {},
-        };
-        const invoke = new ActionInvocation(element, 'updateActionState', args);
-        invoke.trust = ActionTrust.LOW;
-        expectAsyncConsoleError(
-          '[amp-viewer-assistance] "updateActionState"' +
-            ' must have only one of the parameters "error" and "update".',
-          1
-        );
-
-        return service.start_().then(() => {
-          sendMessageStub.resetHistory();
-          expect(service.actionHandler_(invoke)).to.be.null;
-          expect(sendMessageStub).to.not.be.called;
-        });
-      });
-    });
-
-    it('should send handle the signIn action', () => {
-      const config = {
-        'providerId': 'foo-bar',
-      };
-      element.textContent = JSON.stringify(config);
-      const service = new AmpViewerAssistance(ampdoc);
-      const sendMessageStub = service.viewer_.sendMessageAwaitResponse;
-      return service.start_().then(() => {
-        sendMessageStub.resetHistory();
-        sendMessageStub.returns(Promise.reject());
-
-        const invocation = new ActionInvocation(element, 'signIn');
-        invocation.trust = ActionTrust.LOW;
-        allowConsoleError(() => {
-          service.actionHandler_(invocation);
-        });
-        expect(sendMessageStub).to.not.be.called;
-
-        // signIn requires high-trust.
-        invocation.trust = ActionTrust.HIGH;
-        service.actionHandler_(invocation);
-        expect(sendMessageStub).to.be.calledOnce;
-        expect(sendMessageStub.firstCall.args[0]).to.equal('requestSignIn');
-        expect(sendMessageStub.firstCall.args[1]).to.deep.equal({
-          providers: ['actions-on-google-gsi'],
-        });
-      });
-    });
-
-    it('should make IDENTITY_TOKEN available through a promise', () => {
-      const config = {
-        'providerId': 'foo-bar',
-      };
-      element.textContent = JSON.stringify(config);
-      const service = new AmpViewerAssistance(ampdoc);
-      return service
-        .start_()
-        .then(() => service.getIdTokenPromise())
-        .then((token) => expect(token).to.equal('idToken'));
-    });
-
-    it('should set a css class if IDENTITY_TOKEN is available', () => {
-      const config = {
-        'providerId': 'foo-bar',
-      };
-      element.textContent = JSON.stringify(config);
-      const service = new AmpViewerAssistance(ampdoc);
-      service.vsync_ = {
-        mutate: (callback) => {
-          callback();
-        },
-      };
-      const sendMessageStub = service.viewer_.sendMessageAwaitResponse;
-      sendMessageStub.returns(Promise.resolve('idToken'));
-      return service.getIdTokenPromise().then(() => {
-        expect(sendMessageStub).to.be.calledOnce;
-        expect(sendMessageStub.firstCall.args[0]).to.equal(
-          'getAccessTokenPassive'
-        );
-        expect(sendMessageStub.firstCall.args[1]).to.deep.equal({
-          providers: ['actions-on-google-gsi'],
-        });
-        expect(document.documentElement).to.have.class(
-          'amp-viewer-assistance-identity-available'
-        );
-      });
-    });
-  }
-);
diff --git a/extensions/amp-viewer-assistance/0.1/test/validator-actions-amp-viewer-assistance.html b/extensions/amp-viewer-assistance/0.1/test/validator-actions-amp-viewer-assistance.html
deleted file mode 100644
index 125a367e26734..0000000000000
--- a/extensions/amp-viewer-assistance/0.1/test/validator-actions-amp-viewer-assistance.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!--
-  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.
--->
-<!--
-  Test Description:
-  Tests for the amp-viewer-assistance tag. See inline comments.
--->
-<!doctype html>
-<html ⚡ actions>
-<head>
-  <meta charset="utf-8">
-  <link rel="canonical" href="./regular-html-version.html">
-  <meta name="viewport" content="width=device-width">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-viewer-assistance" src="https://cdn.ampproject.org/v0/amp-viewer-assistance-0.1.js"></script>
-  <!-- Valid -->
-  <script id="amp-viewer-assistance" type="application/json">
-  {
-    "actionsOnGoogle" : {
-      "projectId": "0123456789"
-    }
-  }
-  </script>
-</head>
-<body>
-  <button on="tap:amp-viewer-assistance.updateActionState({})">Done</button>
-</body>
-</html>
diff --git a/extensions/amp-viewer-assistance/0.1/test/validator-actions-amp-viewer-assistance.out b/extensions/amp-viewer-assistance/0.1/test/validator-actions-amp-viewer-assistance.out
deleted file mode 100644
index b7799734862fc..0000000000000
--- a/extensions/amp-viewer-assistance/0.1/test/validator-actions-amp-viewer-assistance.out
+++ /dev/null
@@ -1,42 +0,0 @@
-PASS
-|  <!--
-|    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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests for the amp-viewer-assistance tag. See inline comments.
-|  -->
-|  <!doctype html>
-|  <html ⚡ actions>
-|  <head>
-|    <meta charset="utf-8">
-|    <link rel="canonical" href="./regular-html-version.html">
-|    <meta name="viewport" content="width=device-width">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <script async custom-element="amp-viewer-assistance" src="https://cdn.ampproject.org/v0/amp-viewer-assistance-0.1.js"></script>
-|    <!-- Valid -->
-|    <script id="amp-viewer-assistance" type="application/json">
-|    {
-|      "actionsOnGoogle" : {
-|        "projectId": "0123456789"
-|      }
-|    }
-|    </script>
-|  </head>
-|  <body>
-|    <button on="tap:amp-viewer-assistance.updateActionState({})">Done</button>
-|  </body>
-|  </html>
diff --git a/extensions/amp-viewer-assistance/amp-viewer-assistance.md b/extensions/amp-viewer-assistance/amp-viewer-assistance.md
deleted file mode 100644
index bd1359baadd54..0000000000000
--- a/extensions/amp-viewer-assistance/amp-viewer-assistance.md
+++ /dev/null
@@ -1,268 +0,0 @@
----
-formats:
-  - actions
----
-
-# <a name="amp-viewer-assistance"></a> amp-viewer-assistance
-
-[TOC]
-
-<!---
-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.
--->
-
-<table>
-  <tr>
-    <td class="col-fourty"><strong>Description</strong></td>
-    <td>Amp-viewer-assistance provides assistive behaviors on AMP pages facilitated by a viewer. Messages are passed between the amp-viewer-assistance extension and the external viewer as outlined below.</td>
-  </tr>
-  <tr>
-    <td><strong>Availability</strong></td>
-    <td>Stable</td>
-  <tr>
-    <td class="col-fourty"><strong>Required Script</strong></td>
-    <td>
-      <div>
-        <code>&lt;script async custom-element="amp-viewer-assistance" src="https://cdn.ampproject.org/v0/amp-viewer-assistance-0.1.js">&lt;/script></code>
-      </div>
-    </td>
-  </tr>
-  <tr>
-    <td class="col-fourty"><strong>Required Element</strong></td>
-    <td>
-        <code> &lt;script id="amp-viewer-assistance" type="application/json">&lt;/script></code>
-    </td>
-  </tr>
-</table>
-
-## Supported Functions
-
-The `amp-viewer-assistance` extension currently has two functions that can be invoked via AMP expressions. For example, you may invoke the signIn function on a button tap:
-
-```html
-<button on="tap:amp-viewer-assistance.signIn">
-  Sign In
-</button>
-```
-
-<table>
-  <tr>
-    <th>Function Name</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td class="col-fourty"><code>signIn</code></td>
-    <td>The <code>amp-viewer-assistance</code> extension sends a message to the viewer to sign in expecting an identity token back.</td>
-  </tr>
-  <tr>
-    <td class="col-fourty"><code>updateActionState</code></td>
-    <td>A function to send a message to the outer viewer representing a state change. Requires either an <code>update</code> or <code>error</code> object parameter
-  </tr>
-</table>
-
-### UpdateActionState Payloads
-
-A valid `amp-viewer-assistance.updateActionState` payload can either be an `update` object of the format:
-
-```js
-{
-  "actionStatus": "COMPLETED_ACTION_STATUS" | "ACTIVE_ACTION_STATUS" | "FAILED_ACTION_STATUS",
-  "result": { ... }, // optional field used with COMPLETED_ACTION_STATUS
-}
-```
-
-or an `error` standard [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) object.
-
-## Handling Errors
-
-In the event of an error with the `amp-list` extension, we can listen to the `fetch-error` event and call `amp-viewer-assistance.updateActionState` to pass the error to the viewer. With an `error` parameter, `amp-viewer-assistance` will transform the parameter into a `FAILED_ACTION_STATUS` payload before sending it to the viewer.
-
-```html
-<amp-list
-  id="my-failing-list"
-  src="failing.xhr.address.com"
-  on="fetch-error:amp-viewer-assistance.updateActionState(error=event.response)"
->
-</amp-list>
-```
-
-## Messages Sent
-
-There are several messages that can be sent from the amp-viewer-assistance extension to the external viewer.
-
-<table>
-  <tr>
-    <th>Message Name</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td class="col-fourty"><code>viewerAssistanceConfig</code></td>
-    <td>A message containing the initial json config within the <code>amp-viewer-assistance</code> element. This message is sent during the extension's initialization.</td>
-  </tr>
-  <tr>
-    <td class="col-fourty"><code>requestSignIn</code></td>
-    <td>Requests for a sign in from the viewer expecting a string identity token back from the viewer. Passes a json argument with a property <code>providers</code> containing an array of identity providers. Currently only supports <code>actions-on-google-gsi</code>.</td>
-  </tr>
-  <tr>
-    <td class="col-fourty"><code>getAccessTokenPassive</code></td>
-    <td>Similar to requestSignIn however, only requests for the identity token instead of a fresh sign in. Passes a json argument with a property <code>providers</code> containing an array of identity providers. Currently only supports <code>actions-on-google-gsi</code>.</td>
-  </tr>
-  <tr>
-    <td class="col-fourty"><code>updateActionState</code></td>
-    <td>A message representing a change in state. Can be sent with an argument payload.</td>
-  </tr>
-</table>
-
-## Events Triggered
-
-In order to act upon a successful sign in from the viewer assistance, a `signedIn` event is emitted from the `amp-viewer-assistance` script element. On the element, an expression can be attached via the `on` attribute. In this example, we are showing a success message after a user has signed in:
-
-```html
-<script
-  id="amp-viewer-assistance"
-  type="application/json"
-  on="signedIn:success-message.show"
->
-  {
-    "myConfigItem1": {
-      "foo": 123,
-      "bar": 456
-    }
-  }
-</script>
-<div id="success-message" hidden>
-  Successfully Signed In!
-</div>
-```
-
-<table>
-  <tr>
-    <th>Event Name</th>
-    <th>Emitting Element</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td class="col-fourty"><code>signedIn</code></td>
-    <td><code>amp-viewer-assistance</code> </td>
-    <td>An action emitted upon a successful signIn by the external viewer.</td>
-  </tr>
-</table>
-
-## Utilizing an Identity Token
-
-Given a viewer with identity capabilities, the `amp-viewer-assistance` extension can pass an identity token back to the amphtml run-time to attach to remote XHRs. To attach the identity token to a remote XHR request in an `amp-state`, `amp-list`, or `amp-form` element, simply attach the attribute `crossorigin="amp-viewer-auth-token-via-post"` to the performing element. The request will be transformed into a POST request, and within the request body will be an `ampViewerAuthToken` variable set to the authorization token from the viewer.
-
-Here are some examples:
-
-`amp-state:`
-
-```html
-<amp-state
-  id="myRemoteState"
-  src="https://data.com/articles.json"
-  crossorigin="”amp-viewer-auth-token-via-post”"
->
-</amp-state>
-```
-
-yields a POST request body:
-
-```http
-ampViewerAuthToken=AUTH_TOKEN_FROM_VIEWER_ASSISTANCE
-```
-
-`amp-form:`
-
-```html
-<form
-  id="name-form"
-  method="post"
-  target="_top"
-  action-xhr="https://data.com/formsubmit"
-  crossorigin="amp-viewer-auth-token-via-post"
->
-  <div class="form-header">Full Name</div>
-  <input type="text" name="name" value="Default name value" />
-  <button type="submit">
-    <span class="order-button-text">Submit Name</span>
-  </button>
-</form>
-```
-
-yields a POST request form-data payload of:
-
-```http
---------formDataBoundary--------
-Content Disposition: form-data; name="name"
-Default name value
---------formDataBoundary--------
-Content Disposition: form-data; name="ampViewerAuthToken"
-AUTH_TOKEN_FROM_VIEWER_ASSISTANCE
-```
-
-### Identity Class
-
-Upon a successful sign in or identity token retrieval from the viewer, an `amp-viewer-assistance-identity-available` class will be attached to the root element of the AMP document. This can be used to manipulate elements with compound CSS classes.
-
-In this example, we have a message telling the user they are signed out. If the identity is available through the extension, the message's `display` attribute will be overwritten to `display:none`.
-
-```css
-.signedOutMessage {
-  display: block;
-}
-
-.amp-viewer-assistance-identity-available .signedOutMessage {
-  display: none;
-}
-```
-
-## Example
-
-Wrapping up the above, here is an example implementation of a page utilizing sign in, as well as an `updateActionState` after a form submission.
-
-```html
-<script
-  id="amp-viewer-assistance"
-  type="application/json"
-  on="signedIn:success-message.show"
->
-  {
-    "myConfigItem1": {
-      "foo": 123,
-      "bar": 456
-    }
-  }
-</script>
-<button on="tap:amp-viewer-assistance.signIn">
-  Sign In
-</button>
-<div id="success-message" hidden>
-  Successfully Signed In!
-</div>
-<div id="signed-out-message">
-  Signed Out!
-</div>
-
-<form
-  id="state-change-form"
-  method="POST"
-  action-xhr="myAuthorizedRemoteXHR/endpoint"
-  crossorigin="amp-viewer-auth-token-via-post"
-  on="submit-success:amp-viewer-assistance.updateActionState(update=event.response)"
-></form>
-<button on="tap:state-change-form.submit">
-  Change State
-</button>
-```
diff --git a/extensions/amp-viewer-assistance/validator-amp-viewer-assistance.protoascii b/extensions/amp-viewer-assistance/validator-amp-viewer-assistance.protoascii
deleted file mode 100644
index 46d0d1cb8d2fd..0000000000000
--- a/extensions/amp-viewer-assistance/validator-amp-viewer-assistance.protoascii
+++ /dev/null
@@ -1,51 +0,0 @@
-#
-# 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.
-
-tags: {  # amp-viewer-assistance
-  html_format: ACTIONS
-  tag_name: "SCRIPT"
-  extension_spec: {
-    name: "amp-viewer-assistance"
-    version: "0.1"
-    version: "latest"
-  }
-  attr_lists: "common-extension-attrs"
-}
-tags: {  # amp-viewer-assistance (json)
-  html_format: ACTIONS
-  tag_name: "SCRIPT"
-  spec_name: "amp-viewer-assistance extension .json script"
-  unique: true
-  mandatory_parent: "HEAD"
-  requires_extension: "amp-viewer-assistance"
-  attrs: {
-    name: "id"
-    mandatory: true
-    value: "amp-viewer-assistance"
-    dispatch_key: NAME_VALUE_DISPATCH
-  }
-  attrs: {
-    name: "type"
-    mandatory: true
-    value_casei: "application/json"
-  }
-  attr_lists: "nonce-attr"
-  cdata: {
-    disallowed_cdata_regex: {
-      regex: "<!--"
-      error_message: "html comments"
-    }
-  }
-}
diff --git a/extensions/amp-viewer-gpay-button/0.1/amp-viewer-gpay-button.js b/extensions/amp-viewer-gpay-button/0.1/amp-viewer-gpay-button.js
deleted file mode 100644
index 0e8ef37a2071b..0000000000000
--- a/extensions/amp-viewer-gpay-button/0.1/amp-viewer-gpay-button.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * 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.
- */
-
-import {Layout} from '../../../src/layout';
-
-export class AmpViewerGpayButton extends AMP.BaseElement {
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-
-    /** @private {string} */
-    this.myText_ = 'hello world';
-
-    /** @private {?Element} */
-    this.container_ = null;
-  }
-
-  /** @override */
-  buildCallback() {
-    this.container_ = this.element.ownerDocument.createElement('div');
-    this.container_.textContent = this.myText_;
-    this.element.appendChild(this.container_);
-    this.applyFillContent(this.container_, /* replacedContent */ true);
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout == Layout.RESPONSIVE;
-  }
-}
-
-AMP.extension('amp-viewer-gpay-button', '0.1', (AMP) => {
-  AMP.registerElement('amp-viewer-gpay-button', AmpViewerGpayButton);
-});
diff --git a/extensions/amp-viewer-gpay-button/0.1/test/test-amp-viewer-gpay-button.js b/extensions/amp-viewer-gpay-button/0.1/test/test-amp-viewer-gpay-button.js
deleted file mode 100644
index 86175fa40398b..0000000000000
--- a/extensions/amp-viewer-gpay-button/0.1/test/test-amp-viewer-gpay-button.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * 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.
- */
-
-import '../amp-viewer-gpay-button';
-
-describes.realWin(
-  'amp-viewer-gpay-button',
-  {
-    amp: {
-      extensions: ['amp-viewer-gpay-button'],
-    },
-  },
-  (env) => {
-    let win;
-    let element;
-
-    beforeEach(() => {
-      win = env.win;
-      element = win.document.createElement('amp-viewer-gpay-button');
-      win.document.body.appendChild(element);
-    });
-
-    it('should have hello world when built', () => {
-      element.build();
-      expect(element.querySelector('div').textContent).to.equal('hello world');
-    });
-  }
-);
diff --git a/extensions/amp-viewer-gpay-button/0.1/test/validator-amp-viewer-gpay-button.html b/extensions/amp-viewer-gpay-button/0.1/test/validator-amp-viewer-gpay-button.html
deleted file mode 100644
index 9335c0ebb4106..0000000000000
--- a/extensions/amp-viewer-gpay-button/0.1/test/validator-amp-viewer-gpay-button.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>amp-viewer-gpay-button example</title>
-  <link rel="canonical" href="amps.html">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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>
-    amp-viewer-gpay-button {
-      color: red;
-    }
-  </style>
-  <script async custom-element="amp-viewer-gpay-button" src="https://cdn.ampproject.org/v0/amp-viewer-gpay-button-0.1.js"></script>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <amp-viewer-gpay-button layout="responsive" width="150" height="80"></amp-viewer-gpay-button>
-</body>
-</html>
diff --git a/extensions/amp-viewer-gpay-button/0.1/test/validator-amp-viewer-gpay-button.out b/extensions/amp-viewer-gpay-button/0.1/test/validator-amp-viewer-gpay-button.out
deleted file mode 100644
index 18e4a9c104c95..0000000000000
--- a/extensions/amp-viewer-gpay-button/0.1/test/validator-amp-viewer-gpay-button.out
+++ /dev/null
@@ -1,25 +0,0 @@
-FAIL
-|  <!doctype html>
-|  <html ⚡>
-|  <head>
-|    <meta charset="utf-8">
-|    <title>amp-viewer-gpay-button example</title>
-|    <link rel="canonical" href="amps.html">
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <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>
-|      amp-viewer-gpay-button {
-|        color: red;
-|      }
-|    </style>
-|    <script async custom-element="amp-viewer-gpay-button" src="https://cdn.ampproject.org/v0/amp-viewer-gpay-button-0.1.js"></script>
->>   ^~~~~~~~~
-amp-viewer-gpay-button/0.1/test/validator-amp-viewer-gpay-button.html:14:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|  </head>
-|  <body>
-|    <amp-viewer-gpay-button layout="responsive" width="150" height="80"></amp-viewer-gpay-button>
->>   ^~~~~~~~~
-amp-viewer-gpay-button/0.1/test/validator-amp-viewer-gpay-button.html:18:2 The tag 'amp-viewer-gpay-button' is disallowed.
-|  </body>
-|  </html>
\ No newline at end of file
diff --git a/extensions/amp-viewer-gpay-button/amp-viewer-gpay-button.md b/extensions/amp-viewer-gpay-button/amp-viewer-gpay-button.md
deleted file mode 100644
index 17d2c2fa7045d..0000000000000
--- a/extensions/amp-viewer-gpay-button/amp-viewer-gpay-button.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-$category: presentation
-formats:
-  - websites
-teaser:
-  text: FILL THIS IN.
----
-
-<!--
-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.
--->
-
-# amp-viewer-gpay-button
-
-## Behavior
-
-FILL THIS IN. What does this extension do?
-
-## Attributes
-
-FILL THIS IN. Does this extension allow for properties to configure?
-
-<table>
-  <tr>
-    <td width="40%"><strong>data-my-attribute</strong></td>
-    <td>FILL THIS IN. This table <strong>must</strong> be written in HTML.</td>
-  </tr>
-</table>
-
-## Validation
-
-See [amp-viewer-gpay-button rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-viewer-gpay-button/validator-amp-viewer-gpay-button.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-viewer-gpay-button/validator-amp-viewer-gpay-button.protoascii b/extensions/amp-viewer-gpay-button/validator-amp-viewer-gpay-button.protoascii
deleted file mode 100644
index 0dd3de8657e43..0000000000000
--- a/extensions/amp-viewer-gpay-button/validator-amp-viewer-gpay-button.protoascii
+++ /dev/null
@@ -1,36 +0,0 @@
-#
-# 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.
-#
-
-# tags: {  # amp-viewer-gpay-button
-#  html_format: AMP
-#  tag_name: "SCRIPT"
-#  extension_spec: {
-#    name: "amp-viewer-gpay-button"
-#    version: "0.1"
-#    version: "latest"
-#  }
-#  attr_lists: "common-extension-attrs"
-#}
-#tags: {  # <amp-viewer-gpay-button>
-#  html_format: AMP
-#  tag_name: "AMP-VIEWER-GPAY-BUTTON"
-#  requires_extension: "amp-viewer-gpay-button"
-#  attr_lists: "extended-amp-global"
-#  spec_url: "https://amp.dev/documentation/components/amp-viewer-gpay-button"
-#  amp_layout: {
-#    supported_layouts: RESPONSIVE
-#  }
-#}
diff --git a/extensions/amp-viewer-gpay-inline/0.1/amp-viewer-gpay-inline.js b/extensions/amp-viewer-gpay-inline/0.1/amp-viewer-gpay-inline.js
deleted file mode 100644
index 16d8d20fb290f..0000000000000
--- a/extensions/amp-viewer-gpay-inline/0.1/amp-viewer-gpay-inline.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * 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.
- */
-
-import {Layout} from '../../../src/layout';
-
-export class AmpViewerGpayInline extends AMP.BaseElement {
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-
-    /** @private {string} */
-    this.myText_ = 'hello world';
-
-    /** @private {?Element} */
-    this.container_ = null;
-  }
-
-  /** @override */
-  buildCallback() {
-    this.container_ = this.element.ownerDocument.createElement('div');
-    this.container_.textContent = this.myText_;
-    this.element.appendChild(this.container_);
-    this.applyFillContent(this.container_, /* replacedContent */ true);
-  }
-
-  /** @override */
-  isLayoutSupported(layout) {
-    return layout == Layout.RESPONSIVE;
-  }
-}
-
-AMP.extension('amp-viewer-gpay-inline', '0.1', (AMP) => {
-  AMP.registerElement('amp-viewer-gpay-inline', AmpViewerGpayInline);
-});
diff --git a/extensions/amp-viewer-gpay-inline/0.1/test/test-amp-viewer-gpay-inline.js b/extensions/amp-viewer-gpay-inline/0.1/test/test-amp-viewer-gpay-inline.js
deleted file mode 100644
index 3ee305a744a27..0000000000000
--- a/extensions/amp-viewer-gpay-inline/0.1/test/test-amp-viewer-gpay-inline.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * 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.
- */
-
-import '../amp-viewer-gpay-inline';
-
-describes.realWin(
-  'amp-viewer-gpay-inline',
-  {
-    amp: {
-      extensions: ['amp-viewer-gpay-inline'],
-    },
-  },
-  (env) => {
-    let win;
-    let element;
-
-    beforeEach(() => {
-      win = env.win;
-      element = win.document.createElement('amp-viewer-gpay-inline');
-      win.document.body.appendChild(element);
-    });
-
-    it('should have hello world when built', () => {
-      element.build();
-      expect(element.querySelector('div').textContent).to.equal('hello world');
-    });
-  }
-);
diff --git a/extensions/amp-viewer-gpay-inline/0.1/test/validator-amp-viewer-gpay-inline.html b/extensions/amp-viewer-gpay-inline/0.1/test/validator-amp-viewer-gpay-inline.html
deleted file mode 100644
index 83c4cf82c603d..0000000000000
--- a/extensions/amp-viewer-gpay-inline/0.1/test/validator-amp-viewer-gpay-inline.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>amp-viewer-gpay-inline example</title>
-  <link rel="canonical" href="amps.html">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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>
-    amp-viewer-gpay-inline {
-      color: red;
-    }
-  </style>
-  <script async custom-element="amp-viewer-gpay-inline" src="https://cdn.ampproject.org/v0/amp-viewer-gpay-inline-0.1.js"></script>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <amp-viewer-gpay-inline layout="responsive" width="150" height="80"></amp-viewer-gpay-inline>
-</body>
-</html>
diff --git a/extensions/amp-viewer-gpay-inline/0.1/test/validator-amp-viewer-gpay-inline.out b/extensions/amp-viewer-gpay-inline/0.1/test/validator-amp-viewer-gpay-inline.out
deleted file mode 100644
index 946a769cbaf45..0000000000000
--- a/extensions/amp-viewer-gpay-inline/0.1/test/validator-amp-viewer-gpay-inline.out
+++ /dev/null
@@ -1,25 +0,0 @@
-FAIL
-|  <!doctype html>
-|  <html ⚡>
-|  <head>
-|    <meta charset="utf-8">
-|    <title>amp-viewer-gpay-inline example</title>
-|    <link rel="canonical" href="amps.html">
-|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <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>
-|      amp-viewer-gpay-inline {
-|        color: red;
-|      }
-|    </style>
-|    <script async custom-element="amp-viewer-gpay-inline" src="https://cdn.ampproject.org/v0/amp-viewer-gpay-inline-0.1.js"></script>
->>   ^~~~~~~~~
-amp-viewer-gpay-inline/0.1/test/validator-amp-viewer-gpay-inline.html:14:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|  </head>
-|  <body>
-|    <amp-viewer-gpay-inline layout="responsive" width="150" height="80"></amp-viewer-gpay-inline>
->>   ^~~~~~~~~
-amp-viewer-gpay-inline/0.1/test/validator-amp-viewer-gpay-inline.html:18:2 The tag 'amp-viewer-gpay-inline' is disallowed.
-|  </body>
-|  </html>
\ No newline at end of file
diff --git a/extensions/amp-viewer-gpay-inline/amp-viewer-gpay-inline.md b/extensions/amp-viewer-gpay-inline/amp-viewer-gpay-inline.md
deleted file mode 100644
index c3e731d19ffe5..0000000000000
--- a/extensions/amp-viewer-gpay-inline/amp-viewer-gpay-inline.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-$category: presentation
-formats:
-  - websites
-  - email
-teaser:
-  text: FILL THIS IN.
----
-
-<!--
-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.
--->
-
-# amp-viewer-gpay-inline
-
-## Behavior
-
-FILL THIS IN. What does this extension do?
-
-## Attributes
-
-FILL THIS IN. Does this extension allow for properties to configure?
-
-<table>
-  <tr>
-    <td width="40%"><strong>data-my-attribute</strong></td>
-    <td>FILL THIS IN. This table <strong>must</strong> be written in HTML.</td>
-  </tr>
-</table>
-
-## Validation
-
-See [amp-viewer-gpay-inline rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-viewer-gpay-inline/validator-amp-viewer-gpay-inline.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-viewer-gpay-inline/validator-amp-viewer-gpay-inline.protoascii b/extensions/amp-viewer-gpay-inline/validator-amp-viewer-gpay-inline.protoascii
deleted file mode 100644
index 40036bcdbf4b1..0000000000000
--- a/extensions/amp-viewer-gpay-inline/validator-amp-viewer-gpay-inline.protoascii
+++ /dev/null
@@ -1,36 +0,0 @@
-#
-# 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.
-#
-
-#tags: {  # amp-viewer-gpay-inline
-#  html_format: AMP
-#  tag_name: "SCRIPT"
-#  extension_spec: {
-#    name: "amp-viewer-gpay-inline"
-#    version: "0.1"
-#    version: "latest"
-#  }
-#  attr_lists: "common-extension-attrs"
-#}
-#tags: {  # <amp-viewer-gpay-inline>
-#  html_format: AMP
-#  tag_name: "AMP-VIEWER-GPAY-INLINE"
-#  requires_extension: "amp-viewer-gpay-inline"
-#  attr_lists: "extended-amp-global"
-#  spec_url: "https://amp.dev/documentation/components/amp-viewer-gpay-inline"
-#  amp_layout: {
-#    supported_layouts: RESPONSIVE
-#  }
-#}
diff --git a/extensions/amp-viewer-integration/0.1/amp-viewer-integration.js b/extensions/amp-viewer-integration/0.1/amp-viewer-integration.js
index 73e871b998862..6ce372d9b4b79 100644
--- a/extensions/amp-viewer-integration/0.1/amp-viewer-integration.js
+++ b/extensions/amp-viewer-integration/0.1/amp-viewer-integration.js
@@ -30,7 +30,7 @@ import {
 import {Services} from '../../../src/services';
 import {TouchHandler} from './touch-handler';
 import {dev} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getAmpdoc} from '../../../src/service';
 import {getData, listen, listenOnce} from '../../../src/event-helper';
 import {getSourceUrl} from '../../../src/url';
@@ -90,10 +90,8 @@ export class AmpViewerIntegration {
       return Promise.resolve();
     }
 
-    if (MOVE_FIXED_LAYER) {
-      const viewport = Services.viewportForDoc(ampdoc);
-      viewport.createFixedLayer(FixedLayer);
-    }
+    const viewport = Services.viewportForDoc(ampdoc);
+    viewport.createFixedLayer(FixedLayer);
 
     if (this.isWebView_ || this.isHandShakePoll_) {
       const source = isIframed(this.win) ? this.win.parent : null;
diff --git a/extensions/amp-viewer-integration/0.1/findtext.js b/extensions/amp-viewer-integration/0.1/findtext.js
index 29126c39dcb4f..f15379b3c3253 100644
--- a/extensions/amp-viewer-integration/0.1/findtext.js
+++ b/extensions/amp-viewer-integration/0.1/findtext.js
@@ -178,7 +178,7 @@ class Matcher {
       this.skip_--;
       return;
     }
-    const {sen_: sen, buf_: buf} = this;
+    const {buf_: buf, sen_: sen} = this;
     const bufSize = buf.size();
     for (let j = 0; j < sen.length; j++) {
       const c = canonicalizeChar(textPosChar(buf.get(bufSize - 1 - j).pos));
diff --git a/extensions/amp-viewer-integration/0.1/focus-handler.js b/extensions/amp-viewer-integration/0.1/focus-handler.js
index 14352dbfdd3c3..3234a2f42162e 100644
--- a/extensions/amp-viewer-integration/0.1/focus-handler.js
+++ b/extensions/amp-viewer-integration/0.1/focus-handler.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {listen} from '../../../src/event-helper';
 
 /**
diff --git a/extensions/amp-viewer-integration/0.1/highlight-handler.js b/extensions/amp-viewer-integration/0.1/highlight-handler.js
index de364f3a7b75f..78bab2a56bc37 100644
--- a/extensions/amp-viewer-integration/0.1/highlight-handler.js
+++ b/extensions/amp-viewer-integration/0.1/highlight-handler.js
@@ -15,15 +15,16 @@
  */
 
 import {Services} from '../../../src/services';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {findSentences, markTextRangeList} from './findtext';
+import {isExperimentOn} from '../../../src/experiments';
 import {listenOnce} from '../../../src/event-helper';
-import {moveLayoutRect} from '../../../src/layout-rect';
-import {once} from '../../../src/utils/function';
-import {parseJson} from '../../../src/json';
-import {parseQueryString} from '../../../src/url';
+import {moveLayoutRect} from '../../../src/core/math/layout-rect';
+import {once} from '../../../src/core/types/function';
+import {parseJson} from '../../../src/core/types/object/json';
+import {parseQueryString} from '../../../src/core/types/string/url';
 import {resetStyles, setInitialDisplay, setStyles} from '../../../src/style';
-import {whenDocumentReady} from '../../../src/document-ready';
+import {whenDocumentReady} from '../../../src/core/document-ready';
 
 /**
  * The message name sent by viewers to dismiss highlights.
@@ -86,6 +87,12 @@ const SCROLL_ANIMATION_HEIGHT = 500;
  */
 const PAGE_TOP_MARGIN = 80;
 
+/**
+ * Text fragment prefix to add to the URL
+ * @type {string}
+ */
+const TEXT_FRAGMENT_PREFIX = ':~:';
+
 /**
  * Returns highlight param in the URL hash.
  * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
@@ -150,9 +157,46 @@ export class HighlightHandler {
     /** @private {?Array<!Element>} */
     this.highlightedNodes_ = null;
 
-    whenDocumentReady(ampdoc.win.document).then(() => {
-      this.initHighlight_(highlightInfo);
-    });
+    if (
+      'fragmentDirective' in document &&
+      isExperimentOn(ampdoc.win, 'use-text-fragments-for-highlights')
+    ) {
+      ampdoc
+        .whenFirstVisible()
+        .then(() => this.highlightUsingTextFragments_(highlightInfo));
+    } else {
+      whenDocumentReady(ampdoc.win.document).then(() => {
+        this.initHighlight_(highlightInfo);
+      });
+    }
+  }
+
+  /**
+   * @param {!HighlightInfoDef} highlightInfo
+   * @private
+   */
+  highlightUsingTextFragments_(highlightInfo) {
+    const {sentences} = highlightInfo;
+    if (!sentences?.length) {
+      return;
+    }
+    const fragment = sentences
+      .map((text) => 'text=' + encodeURIComponent(text))
+      .join('&');
+    this.updateUrlWithTextFragment_(fragment);
+  }
+
+  /**
+   * @param {string} fragment
+   * @private
+   */
+  updateUrlWithTextFragment_(fragment) {
+    const {hash} = this.ampdoc_.win.location;
+    if (hash) {
+      this.ampdoc_.win.location.replace(hash + TEXT_FRAGMENT_PREFIX + fragment);
+    } else {
+      this.ampdoc_.win.location.replace('#' + TEXT_FRAGMENT_PREFIX + fragment);
+    }
   }
 
   /**
@@ -285,7 +329,7 @@ export class HighlightHandler {
       // top and bottom returned by getLayoutRect includes the header padding
       // size. We need to cancel the padding to calculate the positions in
       // document.body like Viewport.animateScrollIntoView does.
-      const {top, bottom} = moveLayoutRect(
+      const {bottom, top} = moveLayoutRect(
         viewport.getLayoutRect(nodes[i]),
         0,
         -paddingTop
diff --git a/extensions/amp-viewer-integration/0.1/keyboard-handler.js b/extensions/amp-viewer-integration/0.1/keyboard-handler.js
index 5a378d6a8d0c0..7f8ff7354ecc7 100644
--- a/extensions/amp-viewer-integration/0.1/keyboard-handler.js
+++ b/extensions/amp-viewer-integration/0.1/keyboard-handler.js
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import {Keys} from '../../../src/utils/key-codes';
-import {dict} from '../../../src/utils/object';
+import {Keys} from '../../../src/core/constants/key-codes';
+import {dict} from '../../../src/core/types/object';
 import {listen} from '../../../src/event-helper';
 
 /**
diff --git a/extensions/amp-viewer-integration/0.1/messaging/README.md b/extensions/amp-viewer-integration/0.1/messaging/README.md
index baf39c0f78925..cf370079d2db5 100644
--- a/extensions/amp-viewer-integration/0.1/messaging/README.md
+++ b/extensions/amp-viewer-integration/0.1/messaging/README.md
@@ -5,7 +5,7 @@
 The AMP Viewer Messaging library allows an AMP Viewer to establish a
 communication channel with an AMP document.
 
-See [Connecting AMP Viewers with AMP pages](https://github.com/ampproject/amphtml/blob/master/extensions/amp-viewer-integration/integrating-viewer-with-amp-doc-guide.md)
+See [Connecting AMP Viewers with AMP pages](https://github.com/ampproject/amphtml/blob/main/extensions/amp-viewer-integration/integrating-viewer-with-amp-doc-guide.md)
 for more information.
 
 ## Installation
diff --git a/extensions/amp-viewer-integration/0.1/messaging/messaging.js b/extensions/amp-viewer-integration/0.1/messaging/messaging.js
index a66016352f44f..62383e59bd57d 100644
--- a/extensions/amp-viewer-integration/0.1/messaging/messaging.js
+++ b/extensions/amp-viewer-integration/0.1/messaging/messaging.js
@@ -45,9 +45,9 @@ export function parseMessage(message) {
   }
 
   try {
-    return /** @type {?AmpViewerMessage} */ (JSON.parse(
-      /** @type {string} */ (message)
-    ));
+    return /** @type {?AmpViewerMessage} */ (
+      JSON.parse(/** @type {string} */ (message))
+    );
   } catch (e) {
     return null;
   }
@@ -161,9 +161,16 @@ export class Messaging {
    * @param {!Window} target - window containing AMP document to perform handshake with (usually contentWindow of iframe)
    * @param {string} origin - origin of target window (use "null" if opaque)
    * @param {?string=} opt_token - message token to verify on incoming messages (must be provided as viewer parameter)
+   * @param {?RegExp=} opt_cdnProxyRegex
    * @return {!Promise<!Messaging>}
    */
-  static waitForHandshakeFromDocument(source, target, origin, opt_token) {
+  static waitForHandshakeFromDocument(
+    source,
+    target,
+    origin,
+    opt_token,
+    opt_cdnProxyRegex
+  ) {
     return new Promise((resolve) => {
       const listener = (event) => {
         const message = parseMessage(event.data);
@@ -171,13 +178,14 @@ export class Messaging {
           return;
         }
         if (
-          event.origin == origin &&
+          (event.origin == origin ||
+            (opt_cdnProxyRegex && opt_cdnProxyRegex.test(event.origin))) &&
           (!event.source || event.source == target) &&
           message.app === APP &&
           message.name === CHANNEL_OPEN_MSG
         ) {
           source.removeEventListener('message', listener);
-          const port = new WindowPortEmulator(source, origin, target);
+          const port = new WindowPortEmulator(source, event.origin, target);
           const messaging = new Messaging(
             null,
             port,
diff --git a/extensions/amp-viewer-integration/0.1/messaging/package.json b/extensions/amp-viewer-integration/0.1/messaging/package.json
index 69d291ade62c5..f984a53098a60 100644
--- a/extensions/amp-viewer-integration/0.1/messaging/package.json
+++ b/extensions/amp-viewer-integration/0.1/messaging/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ampproject/viewer-messaging",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Messaging between an AMP Doc and a Viewer",
   "author": "The AMP HTML Authors",
   "license": "Apache-2.0",
@@ -12,5 +12,5 @@
     "url": "https://github.com/ampproject/amphtml.git",
     "directory": "extensions/amp-viewer-integration/0.1/messaging"
   },
-  "homepage": "https://github.com/ampproject/amphtml/tree/master/extensions/amp-viewer-integration/0.1/messaging"
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-viewer-integration/0.1/messaging"
 }
diff --git a/extensions/amp-viewer-integration/0.1/test/integration/test-amp-viewer-integration.js b/extensions/amp-viewer-integration/0.1/test/integration/test-amp-viewer-integration.js
index 716e8a033e037..0062a2c781e85 100644
--- a/extensions/amp-viewer-integration/0.1/test/integration/test-amp-viewer-integration.js
+++ b/extensions/amp-viewer-integration/0.1/test/integration/test-amp-viewer-integration.js
@@ -21,207 +21,224 @@ import {
   parseMessage,
 } from '../../messaging/messaging';
 import {ViewerForTesting} from '../../viewer-for-testing';
+import {done} from 'fetch-mock';
 import {getSourceUrl} from '../../../../../src/url';
 
-describes.sandboxed('AmpViewerIntegration', {}, (env) => {
+describes.sandboxed('amp-viewer-integration', {}, () => {
   const ampDocSrc = '/test/fixtures/served/ampdoc-with-messaging.html';
-  // TODO(aghassemi): Investigate failure in beforeEach. #10974.
-  describe.skip('Handshake', function () {
-    let viewerEl;
-    let viewer;
-    let ampDocUrl;
+  let viewerEl;
+  let viewer;
+  let ampDocUrl;
 
-    beforeEach(() => {
-      const loc = window.location;
-      ampDocUrl = `${loc.protocol}//iframe.${loc.hostname}:${loc.port}${ampDocSrc}`;
+  beforeEach(() => {
+    const loc = window.location;
+    ampDocUrl = `${loc.protocol}//iframe.${loc.hostname}:${loc.port}${ampDocSrc}`;
 
-      viewerEl = document.createElement('div');
-      document.body.appendChild(viewerEl);
-      viewer = new ViewerForTesting(viewerEl, '1', ampDocUrl, true);
-      return viewer.waitForHandshakeRequest();
-    });
+    viewerEl = document.createElement('div');
+    document.body.appendChild(viewerEl);
+    viewer = new ViewerForTesting(viewerEl, '1', ampDocUrl, true);
+  });
 
-    afterEach(() => {
-      document.body.removeChild(viewerEl);
-    });
+  afterEach(() => {
+    document.body.removeChild(viewerEl);
+  });
 
-    it('should confirm the handshake', () => {
-      console /*OK*/
-        .log('sending handshake response');
+  // TODO: investigate why this fails on Safari on MacOS
+  it.configure()
+    .skipSafari()
+    .run('should confirm the handshake', async () => {
+      await viewer.waitForHandshakeRequest();
       viewer.confirmHandshake();
-      return viewer.waitForDocumentLoaded();
+      await viewer.waitForDocumentLoaded();
+      expect(viewer.hasDocumentLoaded_).to.be.true;
     });
+});
 
-    it('should handle unload correctly', () => {
-      viewer.confirmHandshake();
-      viewer.waitForDocumentLoaded().then(() => {
-        const stub = env.sandbox.stub(viewer, 'handleUnload_');
-        window.eventListeners.fire({type: 'unload'});
-        expect(stub).to.be.calledOnce;
+describes.realWin(
+  'amp-viewer-integration with messaging',
+  {
+    amp: {
+      location: 'https://cdn.ampproject.org/c/s/www.example.com/path',
+      params: {
+        origin: 'https://example.com',
+      },
+    },
+  },
+  (env) => {
+    describe('Open Channel', () => {
+      class Messaging {
+        constructor() {}
+        sendRequest() {}
+        setup_() {}
+        setDefaultHandler() {}
+        registerHandler() {}
+      }
+
+      let win;
+      let messaging;
+      let ampViewerIntegration;
+      let origin;
+      let viewer, viewerEl, ampDocUrl;
+      const loc = window.location;
+      const ampDocSrc = '/test/fixtures/served/ampdoc-with-messaging.html';
+
+      beforeEach(() => {
+        win = env.win;
+        ampDocUrl = `${loc.protocol}//iframe.${loc.hostname}:${loc.port}${ampDocSrc}`;
+        viewerEl = document.createElement('div');
+        viewer = new ViewerForTesting(viewerEl, '1', ampDocUrl, true);
+        ampViewerIntegration = new AmpViewerIntegration(win);
+        messaging = new Messaging();
+        origin = 'http://localhost:9876';
       });
-    });
 
-    describes.realWin(
-      'amp-viewer-integration',
-      {
-        amp: {
-          location: 'https://cdn.ampproject.org/c/s/www.example.com/path',
-          params: {
-            origin: 'https://example.com',
-          },
-        },
-      },
-      (env) => {
-        describe.configure().run('Open Channel', () => {
-          class Messaging {
-            constructor() {}
-            sendRequest() {}
-            setup_() {}
-            setDefaultHandler() {}
-            registerHandler() {}
-          }
-
-          let win;
-          let messaging;
-          let ampViewerIntegration;
-          let origin;
-
-          beforeEach(() => {
-            win = document.createElement('div');
-            win.document = document.createElement('div');
-            ampViewerIntegration = new AmpViewerIntegration(win);
-            messaging = new Messaging();
-            origin = 'http://localhost:9876';
-          });
+      it('should handle unload correctly', async () => {
+        env.sandbox.stub(messaging, 'sendRequest').callsFake(() => {
+          return Promise.resolve();
+        });
 
-          it('should start with the correct message', () => {
-            const sendRequestSpy = env.sandbox
-              .stub(messaging, 'sendRequest')
-              .callsFake(() => {
-                return Promise.resolve();
-              });
-
-            ampViewerIntegration.openChannelAndStart_(
-              viewer,
-              env.ampdoc,
-              origin,
-              messaging
-            );
-
-            const ampdocUrl = env.ampdoc.getUrl();
-            const srcUrl = getSourceUrl(ampdocUrl);
-
-            expect(sendRequestSpy).to.have.been.calledOnce;
-            expect(sendRequestSpy.lastCall.args[0]).to.equal('channelOpen');
-            expect(sendRequestSpy.lastCall.args[1].sourceUrl).to.equal(srcUrl);
-            expect(sendRequestSpy.lastCall.args[1].url).to.equal(ampdocUrl);
-            expect(sendRequestSpy.lastCall.args[2]).to.equal(true);
-          });
+        ampViewerIntegration.openChannelAndStart_(
+          viewer,
+          env.ampdoc,
+          origin,
+          messaging
+        );
 
-          it('should not initiate touch handler without capability', () => {
-            env.sandbox.stub(messaging, 'sendRequest').callsFake(() => {
-              return Promise.resolve();
-            });
-            const initTouchHandlerStub = env.sandbox.stub(
-              ampViewerIntegration,
-              'initTouchHandler_'
-            );
-            ampViewerIntegration.openChannelAndStart_(
-              viewer,
-              env.ampdoc,
-              origin,
-              messaging
-            );
-
-            expect(initTouchHandlerStub).to.not.be.called;
-          });
+        win.eventListeners.fire({type: 'unload'});
 
-          it('should initiate touch handler with capability', () => {
-            env.sandbox.stub(messaging, 'sendRequest').callsFake(() => {
-              return Promise.resolve();
-            });
-            env.sandbox
-              .stub(viewer, 'hasCapability')
-              .withArgs('swipe')
-              .returns(true);
-            const initTouchHandlerStub = env.sandbox.stub(
-              ampViewerIntegration,
-              'initTouchHandler_'
-            );
-            ampViewerIntegration.unconfirmedViewerOrigin_ = '';
-            ampViewerIntegration
-              .openChannelAndStart_(viewer, env.ampdoc, origin, messaging)
-              .then(() => {
-                expect(initTouchHandlerStub).to.be.called;
-              });
-          });
+        ampViewerIntegration.handleUnload_(messaging).then(() => {
+          done();
+        });
+      });
 
-          it('should not initiate keyboard handler without capability', () => {
-            env.sandbox.stub(messaging, 'sendRequest').callsFake(() => {
-              return Promise.resolve();
-            });
-            const initKeyboardHandlerStub = env.sandbox.stub(
-              ampViewerIntegration,
-              'initKeyboardHandler_'
-            );
-            ampViewerIntegration.openChannelAndStart_(
-              viewer,
-              env.ampdoc,
-              origin,
-              messaging
-            );
-
-            expect(initKeyboardHandlerStub).to.not.be.called;
+      it('should start with the correct message', () => {
+        const sendRequestSpy = env.sandbox
+          .stub(messaging, 'sendRequest')
+          .callsFake(() => {
+            return Promise.resolve();
           });
 
-          it('should initiate keyboard handler with capability', () => {
-            env.sandbox.stub(messaging, 'sendRequest').callsFake(() => {
-              return Promise.resolve();
-            });
-            env.sandbox
-              .stub(viewer, 'hasCapability')
-              .withArgs('keyboard')
-              .returns(true);
-            const initKeyboardHandlerStub = env.sandbox.stub(
-              ampViewerIntegration,
-              'initKeyboardHandler_'
-            );
-            ampViewerIntegration.unconfirmedViewerOrigin_ = '';
-            ampViewerIntegration
-              .openChannelAndStart_(viewer, env.ampdoc, origin, messaging)
-              .then(() => {
-                expect(initKeyboardHandlerStub).to.be.called;
-              });
-          });
+        ampViewerIntegration.openChannelAndStart_(
+          viewer,
+          env.ampdoc,
+          origin,
+          messaging
+        );
+
+        const ampdocUrl = env.ampdoc.getUrl();
+        const srcUrl = getSourceUrl(ampdocUrl);
+
+        expect(sendRequestSpy).to.have.been.calledOnce;
+        expect(sendRequestSpy.lastCall.args[0]).to.equal('channelOpen');
+        expect(sendRequestSpy.lastCall.args[1].sourceUrl).to.equal(srcUrl);
+        expect(sendRequestSpy.lastCall.args[1].url).to.equal(ampdocUrl);
+        expect(sendRequestSpy.lastCall.args[2]).to.equal(true);
+      });
+
+      it('should not initiate touch handler without capability', () => {
+        env.sandbox.stub(messaging, 'sendRequest').callsFake(() => {
+          return Promise.resolve();
+        });
+        const initTouchHandlerStub = env.sandbox.stub(
+          ampViewerIntegration,
+          'initTouchHandler_'
+        );
+        ampViewerIntegration.openChannelAndStart_(
+          viewer,
+          env.ampdoc,
+          origin,
+          messaging
+        );
+
+        expect(initTouchHandlerStub).to.not.be.called;
+      });
 
-          it('should initiate focus handler with capability', () => {
-            env.sandbox.stub(messaging, 'sendRequest').callsFake(() => {
-              return Promise.resolve();
-            });
-            env.sandbox
-              .stub(viewer, 'hasCapability')
-              .withArgs('focus-rect')
-              .returns(true);
-            const initFocusHandlerStub = env.sandbox.stub(
-              ampViewerIntegration,
-              'initFocusHandler_'
-            );
-            ampViewerIntegration.unconfirmedViewerOrigin_ = '';
-            ampViewerIntegration
-              .openChannelAndStart_(viewer, env.ampdoc, origin, messaging)
-              .then(() => {
-                expect(initFocusHandlerStub).to.be.called;
-              });
+      it('should initiate touch handler with capability', () => {
+        env.sandbox.stub(messaging, 'sendRequest').callsFake(() => {
+          return Promise.resolve();
+        });
+        env.sandbox
+          .stub(viewer, 'hasCapability')
+          .withArgs('swipe')
+          .returns(true);
+        const initTouchHandlerStub = env.sandbox.stub(
+          ampViewerIntegration,
+          'initTouchHandler_'
+        );
+        ampViewerIntegration.unconfirmedViewerOrigin_ = '';
+        ampViewerIntegration
+          .openChannelAndStart_(viewer, env.ampdoc, origin, messaging)
+          .then(() => {
+            expect(initTouchHandlerStub).to.be.called;
           });
+      });
+
+      it('should not initiate keyboard handler without capability', () => {
+        env.sandbox.stub(messaging, 'sendRequest').callsFake(() => {
+          return Promise.resolve();
         });
-      }
-    );
-  });
+        const initKeyboardHandlerStub = env.sandbox.stub(
+          ampViewerIntegration,
+          'initKeyboardHandler_'
+        );
+        ampViewerIntegration.openChannelAndStart_(
+          viewer,
+          env.ampdoc,
+          origin,
+          messaging
+        );
+
+        expect(initKeyboardHandlerStub).to.not.be.called;
+      });
+
+      it('should initiate keyboard handler with capability', () => {
+        env.sandbox.stub(messaging, 'sendRequest').callsFake(() => {
+          return Promise.resolve();
+        });
+        env.sandbox
+          .stub(viewer, 'hasCapability')
+          .withArgs('keyboard')
+          .returns(true);
+        const initKeyboardHandlerStub = env.sandbox.stub(
+          ampViewerIntegration,
+          'initKeyboardHandler_'
+        );
+        ampViewerIntegration.unconfirmedViewerOrigin_ = '';
+        ampViewerIntegration
+          .openChannelAndStart_(viewer, env.ampdoc, origin, messaging)
+          .then(() => {
+            expect(initKeyboardHandlerStub).to.be.called;
+          });
+      });
 
-  describe
-    .configure()
-    .ifChrome()
-    .run('Unit Tests for messaging.js', () => {
+      it('should initiate focus handler with capability', () => {
+        env.sandbox.stub(messaging, 'sendRequest').callsFake(() => {
+          return Promise.resolve();
+        });
+        env.sandbox
+          .stub(viewer, 'hasCapability')
+          .withArgs('focus-rect')
+          .returns(true);
+        const initFocusHandlerStub = env.sandbox.stub(
+          ampViewerIntegration,
+          'initFocusHandler_'
+        );
+        ampViewerIntegration.unconfirmedViewerOrigin_ = '';
+        ampViewerIntegration
+          .openChannelAndStart_(viewer, env.ampdoc, origin, messaging)
+          .then(() => {
+            expect(initFocusHandlerStub).to.be.called;
+          });
+      });
+    });
+  }
+);
+
+describes.sandboxed
+  .configure()
+  .ifChrome()
+  .run('Unit Tests for messaging.js', {}, () => {
+    describes.sandboxed('amp-viewer-integration', {}, (env) => {
       const viewerOrigin = 'http://localhost:9876';
       const messagingToken = '32q4pAwei09W845V3j24o8OJIO3fE9l3q49p';
       const requestProcessor = function () {
@@ -282,15 +299,14 @@ describes.sandboxed('AmpViewerIntegration', {}, (env) => {
         });
       });
 
-      // TODO(chenshay, #12476): Make this test work with sinon 4.0.
-      it.skip('handleMessage_ should resolve', () => {
+      it('handleMessage_ should resolve', () => {
         const data = {
           time: 12345678,
           id: 'abcdefg',
         };
 
         const event = {
-          source: window,
+          source: env.win,
           origin: viewerOrigin,
           data: {
             app: '__AMPHTML__',
@@ -304,28 +320,24 @@ describes.sandboxed('AmpViewerIntegration', {}, (env) => {
 
         const resolveSpy = env.sandbox.stub();
         const rejectSpy = env.sandbox.stub();
-        const waitingForResponse = {
+        messaging.waitingForResponse_ = {
           '1': {
             resolve: resolveSpy,
             reject: rejectSpy,
           },
         };
 
-        env.sandbox
-          .stub(messaging, 'waitingForResponse_')
-          .callsFake(waitingForResponse);
         messaging.handleMessage_(event);
 
         expect(resolveSpy).to.have.been.calledOnce;
         expect(resolveSpy).to.have.been.calledWith(JSON.stringify(data));
       });
 
-      // TODO(chenshay, #12476): Make this test work with sinon 4.0.
-      it.skip('handleMessage_ should resolve with correct data', () => {
+      it('handleMessage_ should resolve with correct data', () => {
         const data = 12345;
 
         const event = {
-          source: window,
+          source: env.win,
           origin: viewerOrigin,
           data: {
             app: '__AMPHTML__',
@@ -339,25 +351,21 @@ describes.sandboxed('AmpViewerIntegration', {}, (env) => {
 
         const resolveSpy = env.sandbox.stub();
         const rejectSpy = env.sandbox.stub();
-        const waitingForResponse = {
+        messaging.waitingForResponse_ = {
           '1': {
             resolve: resolveSpy,
             reject: rejectSpy,
           },
         };
 
-        env.sandbox
-          .stub(messaging, 'waitingForResponse_')
-          .callsFake(waitingForResponse);
         messaging.handleMessage_(event);
 
         expect(resolveSpy).to.have.been.calledWith(data);
       });
 
-      // TODO(chenshay, #12476): Make this test work with sinon 4.0.
-      it.skip('handleMessage_ should reject', () => {
+      it('handleMessage_ should reject', () => {
         const event = {
-          source: window,
+          source: env.win,
           origin: viewerOrigin,
           data: {
             app: '__AMPHTML__',
@@ -372,7 +380,7 @@ describes.sandboxed('AmpViewerIntegration', {}, (env) => {
 
         const resolveSpy = env.sandbox.stub();
         const rejectSpy = env.sandbox.stub();
-        const waitingForResponse = {
+        messaging.waitingForResponse_ = {
           '1': {
             resolve: resolveSpy,
             reject: rejectSpy,
@@ -380,15 +388,11 @@ describes.sandboxed('AmpViewerIntegration', {}, (env) => {
         };
 
         const logErrorSpy = env.sandbox.stub(messaging, 'logError_');
-        env.sandbox
-          .stub(messaging, 'waitingForResponse_')
-          .callsFake(waitingForResponse);
+
         messaging.handleMessage_(event);
 
         expect(rejectSpy).to.have.been.calledOnce;
-
         expect(logErrorSpy).to.have.been.calledOnce;
-
         expect(logErrorSpy).to.have.been.calledWith(
           'amp-viewer-messaging: handleResponse_ error: ',
           'reason'
@@ -474,4 +478,4 @@ describes.sandboxed('AmpViewerIntegration', {}, (env) => {
         expect(parseMessage(badJson)).to.be.null;
       });
     });
-});
+  });
diff --git a/extensions/amp-viewer-integration/0.1/test/integration/test-messaging-handshake.js b/extensions/amp-viewer-integration/0.1/test/integration/test-messaging-handshake.js
index 5164965be994c..40e7b24d0df45 100644
--- a/extensions/amp-viewer-integration/0.1/test/integration/test-messaging-handshake.js
+++ b/extensions/amp-viewer-integration/0.1/test/integration/test-messaging-handshake.js
@@ -17,7 +17,7 @@
 import {Messaging} from '../../messaging/messaging';
 import {getWinOrigin, serializeQueryString} from '../../../../../src/url';
 
-describes.sandboxed('AmpViewerMessagingIntegration', {}, () => {
+describes.sandboxed('AmpViewerMessagingIntegration', {}, (env) => {
   const ampDocSrc = '/test/fixtures/served/ampdoc-with-messaging.html';
 
   describe
@@ -87,29 +87,7 @@ describes.sandboxed('AmpViewerMessagingIntegration', {}, () => {
           });
       });
 
-      it('should fail if messaging token is wrong', () => {
-        const params = serializeQueryString({
-          origin: getWinOrigin(window),
-          messagingToken: 'foo',
-        });
-        const ampDocUrl = `${iframeOrigin}${ampDocSrc}#${params}`;
-        viewerIframe.setAttribute('src', ampDocUrl);
-
-        return Messaging.waitForHandshakeFromDocument(
-          window,
-          viewerIframe.contentWindow,
-          iframeOrigin,
-          'bar'
-        ).then((messaging) => {
-          const handlerStub = window.sandbox.stub();
-          messaging.setDefaultHandler(handlerStub);
-          expect(handlerStub).to.not.have.been.called;
-        });
-      });
-
       it('should perform polling handshake', function () {
-        this.timeout(5000);
-
         const params = serializeQueryString({
           origin: getWinOrigin(window),
           cap: 'handshakepoll',
@@ -130,5 +108,25 @@ describes.sandboxed('AmpViewerMessagingIntegration', {}, () => {
             expect(name).to.equal('documentLoaded');
           });
       });
+
+      it('should fail if messaging token is wrong', () => {
+        const params = serializeQueryString({
+          origin: getWinOrigin(window),
+          messagingToken: 'foo',
+        });
+        const ampDocUrl = `${iframeOrigin}${ampDocSrc}#${params}`;
+        viewerIframe.setAttribute('src', ampDocUrl);
+
+        return Messaging.waitForHandshakeFromDocument(
+          window,
+          viewerIframe.contentWindow,
+          iframeOrigin,
+          'bar'
+        ).then((messaging) => {
+          const handlerStub = env.sandbox.stub();
+          messaging.setDefaultHandler(handlerStub);
+          expect(handlerStub).to.not.have.been.called;
+        });
+      });
     });
 });
diff --git a/extensions/amp-viewer-integration/0.1/test/test-findtext.js b/extensions/amp-viewer-integration/0.1/test/test-findtext.js
index 164daadd3dbf1..abe01d66da91f 100644
--- a/extensions/amp-viewer-integration/0.1/test/test-findtext.js
+++ b/extensions/amp-viewer-integration/0.1/test/test-findtext.js
@@ -23,7 +23,7 @@ import {
   textPosChar,
 } from '../findtext';
 
-describe('CircularBuffer', () => {
+describes.sandboxed('CircularBuffer', {}, () => {
   it('add and get', () => {
     const buf = new CircularBuffer(5);
     for (let i = 0; i < 7; i++) {
@@ -37,7 +37,7 @@ describe('CircularBuffer', () => {
   });
 });
 
-describe('canonicalizeString', () => {
+describes.sandboxed('canonicalizeString', {}, () => {
   it('test examples', () => {
     expect(canonicalizeString('a b  c')).to.equal('abc');
     expect(canonicalizeString('abc.d')).to.equal('abcd');
diff --git a/extensions/amp-viewer-integration/0.1/test/test-highlight-handler.js b/extensions/amp-viewer-integration/0.1/test/test-highlight-handler.js
index 7dba63d1a80f9..060193bb9c48b 100644
--- a/extensions/amp-viewer-integration/0.1/test/test-highlight-handler.js
+++ b/extensions/amp-viewer-integration/0.1/test/test-highlight-handler.js
@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import * as docready from '../../../../src/document-ready';
+import * as docready from '../../../../src/core/document-ready';
 import {HighlightHandler, getHighlightParam} from '../highlight-handler';
 import {Messaging, WindowPortEmulator} from '../messaging/messaging';
 import {Services} from '../../../../src/services';
-import {VisibilityState} from '../../../../src/visibility-state';
-import {layoutRectLtwh} from '../../../../src/layout-rect';
+import {VisibilityState} from '../../../../src/core/constants/visibility-state';
+import {layoutRectLtwh} from '../../../../src/core/math/layout-rect';
+import {toggleExperiment} from '../../../../src/experiments';
 
 describes.fakeWin(
   'getHighlightParam',
@@ -422,5 +423,69 @@ describes.realWin(
       expect(setScrollTopStub).to.be.calledOnce;
       expect(setScrollTopStub.firstCall.args[0]).to.equal(350);
     });
+
+    // TODO(dmanek): remove `ifChrome` once other major browsers support
+    // text fragments (i.e. 'fragmentDirective' in document = true)
+    it.configure()
+      .ifChrome()
+      .run('should highlight using text fragments', async () => {
+        toggleExperiment(env.win, 'use-text-fragments-for-highlights', true);
+        const {ampdoc} = env;
+        let whenFirstVisiblePromiseResolve;
+        const whenFirstVisiblePromise = new Promise((resolve) => {
+          whenFirstVisiblePromiseResolve = resolve;
+        });
+        env.sandbox
+          .stub(ampdoc, 'whenFirstVisible')
+          .returns(whenFirstVisiblePromise);
+
+        const highlightHandler = new HighlightHandler(ampdoc, {
+          sentences: ['amp', 'highlight'],
+        });
+
+        const updateUrlWithTextFragmentSpy = env.sandbox.spy();
+        highlightHandler.updateUrlWithTextFragment_ =
+          updateUrlWithTextFragmentSpy;
+
+        whenFirstVisiblePromiseResolve();
+        await whenFirstVisiblePromise;
+
+        expect(updateUrlWithTextFragmentSpy).to.be.calledOnce;
+        expect(updateUrlWithTextFragmentSpy.getCall(0).args[0]).to.equal(
+          'text=amp&text=highlight'
+        );
+      });
+
+    // TODO(dmanek): remove `ifChrome` once other major browsers support
+    // text fragments (i.e. 'fragmentDirective' in document = true)
+    it.configure()
+      .ifChrome()
+      .run(
+        'should not highlight if highlightInfo.sentences is empty',
+        async () => {
+          toggleExperiment(env.win, 'use-text-fragments-for-highlights', true);
+          const {ampdoc} = env;
+          let whenFirstVisiblePromiseResolve;
+          const whenFirstVisiblePromise = new Promise((resolve) => {
+            whenFirstVisiblePromiseResolve = resolve;
+          });
+          env.sandbox
+            .stub(ampdoc, 'whenFirstVisible')
+            .returns(whenFirstVisiblePromise);
+
+          const highlightHandler = new HighlightHandler(ampdoc, {
+            sentences: [],
+          });
+
+          const updateUrlWithTextFragmentSpy = env.sandbox.spy();
+          highlightHandler.updateUrlWithTextFragment_ =
+            updateUrlWithTextFragmentSpy;
+
+          whenFirstVisiblePromiseResolve();
+          await whenFirstVisiblePromise;
+
+          expect(updateUrlWithTextFragmentSpy).not.to.be.called;
+        }
+      );
   }
 );
diff --git a/extensions/amp-viewer-integration/0.1/test/test-keyboard-handler.js b/extensions/amp-viewer-integration/0.1/test/test-keyboard-handler.js
index 7eca829c51530..e97efbe1c8172 100644
--- a/extensions/amp-viewer-integration/0.1/test/test-keyboard-handler.js
+++ b/extensions/amp-viewer-integration/0.1/test/test-keyboard-handler.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {KeyCodes, Keys} from '../../../../src/utils/key-codes';
+import {KeyCodes, Keys} from '../../../../src/core/constants/key-codes';
 import {KeyboardHandler} from '../keyboard-handler';
 import {Messaging} from '../messaging/messaging';
 
diff --git a/extensions/amp-viewer-integration/0.1/test/test-touch-handler.js b/extensions/amp-viewer-integration/0.1/test/test-touch-handler.js
index 6be7787511911..8154c792c362b 100644
--- a/extensions/amp-viewer-integration/0.1/test/test-touch-handler.js
+++ b/extensions/amp-viewer-integration/0.1/test/test-touch-handler.js
@@ -17,7 +17,7 @@
 import {Messaging} from '../messaging/messaging';
 import {TouchHandler} from '../touch-handler';
 
-function fakeTouchEvent(type) {
+function getFakeTouchEvent(type) {
   return {
     type,
     'pageX': 10,
@@ -37,6 +37,7 @@ function fakeTouchEvent(type) {
     ],
     cancelable: true,
     preventDefault() {},
+    stopImmediatePropagation() {},
   };
 }
 
@@ -100,26 +101,82 @@ describes.fakeWin('TouchHandler', {}, (env) => {
 
     afterEach(() => {
       touchHandler = null;
+      env.sandbox.restore();
     });
 
     it('should only forward supported events', () => {
-      touchHandler.handleEvent_(fakeTouchEvent('notasupportedevent'));
+      touchHandler.handleEvent_(getFakeTouchEvent('notasupportedevent'));
       expect(messages).to.have.length(0);
 
-      touchHandler.handleEvent_(fakeTouchEvent('touchstart'));
-      touchHandler.handleEvent_(fakeTouchEvent('touchmove'));
-      touchHandler.handleEvent_(fakeTouchEvent('touchend'));
+      touchHandler.handleEvent_(getFakeTouchEvent('touchstart'));
+      touchHandler.handleEvent_(getFakeTouchEvent('touchmove'));
+      touchHandler.handleEvent_(getFakeTouchEvent('touchend'));
       expect(messages).to.have.length(3);
       expect(messages[0].data.data.type).to.equal('touchstart');
       expect(messages[0].data.data.type).to.equal('touchstart');
     });
 
+    describe('event propagation', () => {
+      let event, event2;
+
+      beforeEach(() => {
+        event = getFakeTouchEvent('touchmove');
+        event2 = getFakeTouchEvent('touchmove');
+        event.stopImmediatePropagation = env.sandbox.spy();
+        event2.stopImmediatePropagation = env.sandbox.spy();
+      });
+
+      it('should forward events if event does not contain `shouldViewerCancelPropagation`', () => {
+        touchHandler.handleEvent_(event);
+
+        expect(messages).to.have.length(1);
+        expect(messages[0].data.data.type).to.equal('touchmove');
+        expect(event.stopImmediatePropagation).to.not.be.called;
+      });
+
+      it('should not forward events marked with `shouldViewerCancelPropagation`', () => {
+        event.shouldViewerCancelPropagation = true;
+        touchHandler.handleEvent_(event);
+
+        expect(messages).to.have.length(0);
+        expect(event.stopImmediatePropagation).to.be.calledOnce;
+      });
+
+      it('should stop propagation once, and then allow', () => {
+        event.shouldViewerCancelPropagation = true;
+        touchHandler.handleEvent_(event);
+
+        expect(messages).to.have.length(0);
+        expect(event.stopImmediatePropagation).to.be.calledOnce;
+
+        touchHandler.handleEvent_(event2);
+        expect(messages).to.have.length(1);
+        expect(messages[0].data.data.type).to.equal('touchmove');
+        expect(event2.stopImmediatePropagation).to.not.be.called;
+      });
+
+      it('should allow once, and then stop propagation', () => {
+        touchHandler.handleEvent_(event);
+
+        expect(messages).to.have.length(1);
+        expect(messages[0].data.data.type).to.equal('touchmove');
+        expect(event.stopImmediatePropagation).to.not.be.called;
+
+        event2.shouldViewerCancelPropagation = true;
+        touchHandler.handleEvent_(event2);
+
+        expect(messages).to.have.length(1);
+        expect(messages[0].data.data.type).to.equal('touchmove');
+        expect(event2.stopImmediatePropagation).to.be.calledOnce;
+      });
+    });
+
     it('should lock scrolling', () => {
       expect(unlistenCount).to.equal(0);
       expect(listeners).to.have.length(3);
       expect(listeners[0].options.passive).to.be.true;
       expect(listeners[0].options.capture).to.be.false;
-      const fakeEvent = fakeTouchEvent('touchstart');
+      const fakeEvent = getFakeTouchEvent('touchstart');
       const preventDefaultStub = env.sandbox.stub(fakeEvent, 'preventDefault');
       const copyTouchEventStub = env.sandbox.stub(
         touchHandler,
@@ -147,7 +204,7 @@ describes.fakeWin('TouchHandler', {}, (env) => {
     });
 
     it('should only cancel touch event when cancelable', () => {
-      const fakeEvent = fakeTouchEvent('touchstart');
+      const fakeEvent = getFakeTouchEvent('touchstart');
       fakeEvent.cancelable = false;
       const preventDefaultStub = env.sandbox.stub(fakeEvent, 'preventDefault');
       env.sandbox.stub(touchHandler, 'copyTouchEvent_');
@@ -160,7 +217,7 @@ describes.fakeWin('TouchHandler', {}, (env) => {
 
     it('should copy events correctly', () => {
       const eventType = 'touchstart';
-      const fakeEvent = fakeTouchEvent(eventType);
+      const fakeEvent = getFakeTouchEvent(eventType);
       const copiedEvent = touchHandler.copyTouchEvent_(fakeEvent);
       expect(copiedEvent).to.deep.equal({
         'pageX': 10,
diff --git a/extensions/amp-viewer-integration/0.1/touch-handler.js b/extensions/amp-viewer-integration/0.1/touch-handler.js
index 4983979937258..feda76b208d33 100644
--- a/extensions/amp-viewer-integration/0.1/touch-handler.js
+++ b/extensions/amp-viewer-integration/0.1/touch-handler.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {listen} from '../../../src/event-helper';
 
 /**
@@ -138,6 +138,12 @@ export class TouchHandler {
    * @private
    */
   forwardEvent_(e) {
+    // Check if an AMP component is signaling that we should
+    // stop propagation of the event from bubbling up to the viewer
+    if (e?.shouldViewerCancelPropagation) {
+      e.stopImmediatePropagation();
+      return;
+    }
     if (e && e.type) {
       const msg = this.copyTouchEvent_(e);
       this.messaging_.sendRequest(e.type, msg, false);
diff --git a/extensions/amp-viewer-integration/0.1/viewer-for-testing.js b/extensions/amp-viewer-integration/0.1/viewer-for-testing.js
index 2f3ce2e72df47..0f2c400e6ea6d 100644
--- a/extensions/amp-viewer-integration/0.1/viewer-for-testing.js
+++ b/extensions/amp-viewer-integration/0.1/viewer-for-testing.js
@@ -35,7 +35,7 @@ export class ViewerForTesting {
     this.ampdocUrl = ampdocUrl;
 
     /** @visibleForTesting @private {boolean} */
-    this.alreadyLoaded_ = false;
+    this.hasDocumentLoaded_ = false;
 
     /** @private {string} */
     this.visibilityState_ = visible ? 'visible' : 'hidden';
@@ -58,6 +58,7 @@ export class ViewerForTesting {
     this.documentLoadedPromise_ = new Promise((resolve) => {
       /** @private {?function()} */
       this.documentLoadedResolve_ = resolve;
+      this.hasDocumentLoaded_ = true;
     });
   }
 
diff --git a/extensions/amp-viewer-integration/0.1/viewer-initiated-handshake-viewer-for-testing.js b/extensions/amp-viewer-integration/0.1/viewer-initiated-handshake-viewer-for-testing.js
index 2cce7f0045263..2e0206bc5ad1b 100644
--- a/extensions/amp-viewer-integration/0.1/viewer-initiated-handshake-viewer-for-testing.js
+++ b/extensions/amp-viewer-integration/0.1/viewer-initiated-handshake-viewer-for-testing.js
@@ -75,7 +75,6 @@ export class WebviewViewerForTesting {
       width: this.containerEl./*OK*/ offsetWidth,
       height: this.containerEl./*OK*/ offsetHeight,
       visibilityState: this.visibilityState_,
-      prerenderSize: 1,
       origin: parseUrlDeprecated(window.location.href).origin,
       csi: 1,
       cap: 'foo,a2a,handshakepoll,iframeScroll',
@@ -112,7 +111,7 @@ export class WebviewViewerForTesting {
     if (!this.iframe) {
       return;
     }
-    const listener = function (e) {
+    const listener = (e) => {
       if (this.isChannelOpen_(e)) {
         //stop polling
         window.clearInterval(this.pollingIntervalIds_[intervalCtr]);
@@ -120,7 +119,7 @@ export class WebviewViewerForTesting {
         this.completeHandshake_(e.data.requestid);
       }
     };
-    window.addEventListener('message', listener.bind(this));
+    window.addEventListener('message', listener);
 
     const message = {
       app: APP,
@@ -158,7 +157,6 @@ export class WebviewViewerForTesting {
 
     this.sendRequest_('visibilitychange', {
       state: this.visibilityState_,
-      prerenderSize: this.prerenderSize,
     });
 
     this.handshakeResponseResolve_();
diff --git a/extensions/amp-viewer-integration/0.1/webview-viewer-for-testing.js b/extensions/amp-viewer-integration/0.1/webview-viewer-for-testing.js
index 299c4474afdc5..bd41dd4be19e6 100644
--- a/extensions/amp-viewer-integration/0.1/webview-viewer-for-testing.js
+++ b/extensions/amp-viewer-integration/0.1/webview-viewer-for-testing.js
@@ -125,7 +125,7 @@ export class WebviewViewerForTesting {
         '*',
         [channel.port2]
       );
-      channel.port1.onmessage = function (e) {
+      channel.port1.onmessage = (e) => {
         if (this.isChannelOpen_(e)) {
           window.clearInterval(this.pollingIntervalIds_[intervalCtr]);
           const data = JSON.parse(e.data);
@@ -133,7 +133,7 @@ export class WebviewViewerForTesting {
         } else {
           this.handleMessage_(e);
         }
-      }.bind(this);
+      };
     }
   }
 
diff --git a/extensions/amp-viewer-integration/OWNERS b/extensions/amp-viewer-integration/OWNERS
index 799d67402de78..f8bf89d23cb70 100644
--- a/extensions/amp-viewer-integration/OWNERS
+++ b/extensions/amp-viewer-integration/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-viewer-integration/TICKEVENTS.md b/extensions/amp-viewer-integration/TICKEVENTS.md
index a4dcfa5a2856a..f7a6c7d76069e 100644
--- a/extensions/amp-viewer-integration/TICKEVENTS.md
+++ b/extensions/amp-viewer-integration/TICKEVENTS.md
@@ -53,4 +53,3 @@ As an example if we executed `perf.tick('label')` we assume we have a counterpar
 | Load Event Start                         | `loadEventStart`             | Time immediately before the load event of the current document is fired                                                                                                                            |
 | Request Start                            | `requestStart`               | Time immediately before the user agent starts requesting the resource from the server                                                                                                              |
 | Response Start                           | `responseStart`              | Time immediately after the user agent's HTTP parser receives the first byte of the response from the server                                                                                        |
-| Slow element ratio                       | `ser`                        | Percentage of elements laid out after entering viewport                                                                                                                                            |
diff --git a/extensions/amp-viewer-integration/amp-doc-viewer-api.md b/extensions/amp-viewer-integration/amp-doc-viewer-api.md
index 901b9de2653a8..f7e123b8cf459 100644
--- a/extensions/amp-viewer-integration/amp-doc-viewer-api.md
+++ b/extensions/amp-viewer-integration/amp-doc-viewer-api.md
@@ -26,7 +26,7 @@ This document explains the API between an AMP Viewer and the AMP document(s) it
 
 When an AMP Viewer opens an AMP document, it can include initialization parameters. The parameters are set as key value pairs encoded as a query string in the hash fragment of the AMP document URL. For example:
 www.amp.dev?origin=https%3A%2F%2Fplayground.amp.dev
-Some parameters are read by the AMP runtime (the core library that initializes and manages all components, included as v0.js) and configure its behavior and others are read by the [Viewer integration script](https://github.com/ampproject/amphtml/blob/master/extensions/amp-viewer-integration/0.1/amp-viewer-integration.js) in order to establish the communication channel used by the rest of the API. An initialization parameter is enabled or disabled via the '1' or '0' value respectively.
+Some parameters are read by the AMP runtime (the core library that initializes and manages all components, included as v0.js) and configure its behavior and others are read by the [Viewer integration script](https://github.com/ampproject/amphtml/blob/main/extensions/amp-viewer-integration/0.1/amp-viewer-integration.js) in order to establish the communication channel used by the rest of the API. An initialization parameter is enabled or disabled via the '1' or '0' value respectively.
 
 #### Viewer Integration Script Parameters
 
@@ -55,23 +55,22 @@ The origin of the Viewer. The Viewer Integration will verify this is an allowed
 
 ### AMP Runtime Parameters
 
-| Parameter         | Data type                                                                       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| ----------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `cid`             | `boolean`                                                                       | Whether to request the Base Client ID from the Viewer.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `csi`             | `boolean`                                                                       | Whether the Viewer will collect latency metrics from the Document.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `dialog`          | `boolean`                                                                       | Whether the Viewer will take responsibility for opening a dialog for an AMP Access login. If false, opening a login dialog does not involve the Viewer. If true, the Viewer must support openDialog.                                                                                                                                                                                                                                                                                                                                                              |
-| `development`     | `boolean`                                                                       | Whether the AMP runtime is in development mode. Development mode will validate the AMP document and show its results in the developer console.                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `history`         | `boolean`                                                                       | Whether the AMP Viewer will take over history management. If true, the Viewer must support popHistory, pushHistory, and historyPopped.                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `log`             | `boolean`                                                                       | Whether to turn on logging in the AMP runtime.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `paddingTop`      | `integer`                                                                       | The paddingTop to apply to the document body in pixels. This is used to allow space for a title bar.                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `prerenderSize`   | `integer`                                                                       | The number of vertical screens to prerender. Resources within the range may be loaded before the document is visible.                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `p2r`             | `boolean`                                                                       | Whether to Pull to Refresh is enabled. pull-to-refresh.js                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| `referrer`        | `string`                                                                        | The referrer to use for AMP analytics.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `storage`         | `boolean`                                                                       | Whether the Viewer will provide local storage. If true, then the Viewer must support loadStore and saveStore.                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `viewerUrl`       | `string`                                                                        | The url of the Viewer. This is the shareable Viewer URL and may be used as a fallback as part of AMP Access.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `webview`         | `boolean`                                                                       | Whether the document is being loaded in a WebView instead of an iframe. This will enable "embedded" mode for the document, which is needed for dialog to work.                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `highlight`       | `string`                                                                        | The information to highlight text. JSON-encoded string.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `visibilityState` | `inactive`,`paused`,`visible`,`prerender`,`hidden` (deprecated, use `inactive`) | The initial visibility state of the AMP document.<ul><li>prerender- AMP document is being pre-rendered before being shown. It may be prerendered according to prerenderSize</li><li>inactive or hidden -The document is not visible to the user.</li><li>paused - this document should stop loading new resources and pause any resources such as video. The document may still be visible to the user, but the Viewer may be performing a performance sensitive operation such as a swipe.</li><li>visible- The document is active and visible to the user.</li> |
+| Parameter         | Data type                                                                       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ----------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cid`             | `boolean`                                                                       | Whether to request the Base Client ID from the Viewer.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `csi`             | `boolean`                                                                       | Whether the Viewer will collect latency metrics from the Document.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `dialog`          | `boolean`                                                                       | Whether the Viewer will take responsibility for opening a dialog for an AMP Access login. If false, opening a login dialog does not involve the Viewer. If true, the Viewer must support openDialog.                                                                                                                                                                                                                                                                                                                                    |
+| `development`     | `boolean`                                                                       | Whether the AMP runtime is in development mode. Development mode will validate the AMP document and show its results in the developer console.                                                                                                                                                                                                                                                                                                                                                                                          |
+| `history`         | `boolean`                                                                       | Whether the AMP Viewer will take over history management. If true, the Viewer must support popHistory, pushHistory, and historyPopped.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `log`             | `boolean`                                                                       | Whether to turn on logging in the AMP runtime.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `paddingTop`      | `integer`                                                                       | The paddingTop to apply to the document body in pixels. This is used to allow space for a title bar.                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `p2r`             | `boolean`                                                                       | Whether to Pull to Refresh is enabled. pull-to-refresh.js                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `referrer`        | `string`                                                                        | The referrer to use for AMP analytics.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `storage`         | `boolean`                                                                       | Whether the Viewer will provide local storage. If true, then the Viewer must support loadStore and saveStore.                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `viewerUrl`       | `string`                                                                        | The url of the Viewer. This is the shareable Viewer URL and may be used as a fallback as part of AMP Access.                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `webview`         | `boolean`                                                                       | Whether the document is being loaded in a WebView instead of an iframe. This will enable "embedded" mode for the document, which is needed for dialog to work.                                                                                                                                                                                                                                                                                                                                                                          |
+| `highlight`       | `string`                                                                        | The information to highlight text. JSON-encoded string.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `visibilityState` | `inactive`,`paused`,`visible`,`prerender`,`hidden` (deprecated, use `inactive`) | The initial visibility state of the AMP document.<ul><li>prerender- AMP document is being pre-rendered before being shown. It may be prerendered.</li><li>inactive or hidden -The document is not visible to the user.</li><li>paused - this document should stop loading new resources and pause any resources such as video. The document may still be visible to the user, but the Viewer may be performing a performance sensitive operation such as a swipe.</li><li>visible- The document is active and visible to the user.</li> |
 
 ### Messaging
 
@@ -93,25 +92,25 @@ The messages in this section are sent by the Viewer Integration Script and are n
 
 #### Document to Viewer
 
-| Message              | Description                                                                                                         | Request                                                                                                                                                                 | Response                                                                                                                                                                          |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `broadcast`          | Message that will be broadcast to every other AMP document open in the Viewer.                                      | \*(Any value may be broadcast.)                                                                                                                                         | Array<\*> (The response is an array of the responses from the other documents.)                                                                                                   |
-| `bindReady`          | Sent from AMP pages that use the amp-bind extension. Informs the Viewer that amp-bind has completed initialization. | undefined                                                                                                                                                               | undefined                                                                                                                                                                         |
-| `cancelFullOverlay`  | Requests that Full Overlay mode is cancelled. If the header was hidden, it should be restored.                      | undefined                                                                                                                                                               | undefined (The response is sent once Viewer exits Full Overlay mode.)                                                                                                             |
-| `cid`                | Requests the scoped Client ID. See Client identifiers in AMP.                                                       | undefined                                                                                                                                                               | string (The scoped Client ID.)                                                                                                                                                    |
-| `documentHeight`     | The AMP runtime sends this request to the Viewer when the height of the document content changes.                   | {'height': (number)}                                                                                                                                                    | undefined                                                                                                                                                                         |
-| `documentLoaded`     | The AMP runtime sends this request to the Viewer when it has fully loaded and is ready for display.                 | {'linkRels': (Map<string, string\|Array<string>>), 'viewport': (string), 'title': (string), 'sourceUrl': (string)}, where linkRels is a map <link> rel values to hrefs. | undefined                                                                                                                                                                         |
-| `loadStore`          | Requests the local storage blob for the document's origin.                                                          | {'origin': (string)}                                                                                                                                                    | {'blob': (string)}                                                                                                                                                                |
-| `openDialog`         | Requests that the AMP Access dialog with a specified URL is opened by the Viewer.                                   | {'url': (string)}                                                                                                                                                       | string (The response is the token string from the dialog if the flow completed successfully. If the dialog is closed without completing the flow, then the response is rejected.) |
-| `popHistory`         | Requests that an entry is popped off the history stack down to the new stackIndex value.                            | {'stackIndex': (string)} (stackIndex specifies the new stack index.)                                                                                                    | undefined (The response resolves once the history pop is complete.)                                                                                                               |
-| `prerenderComplete`  | Notifies the Viewer that prerendering of viewport is complete.                                                      | undefined                                                                                                                                                               | undefined                                                                                                                                                                         |
-| `pushHistory`        | Pushes the new stack index onto the history stack.                                                                  | {'stackIndex': (string)} (stackIndex specifies the new stack index.)                                                                                                    | undefined (The response resolves once the history pop is complete. It rejects on an invalid stack index.)                                                                         |
-| `replaceHistory`     | Replaces the fragment value in history state (without pushing or popping). Used to implement share tracking.        | {'fragment': (string)} (fragment specifies the new fragment (hash) value in the current history frame.)                                                                 | undefined (The response resolves once the replacement is complete.)                                                                                                               |
-| `requestFullOverlay` | Requests that the Viewer enter Full Overlay mode. In this mode, the title bar may be hidden.                        | undefined                                                                                                                                                               | undefined (The response is resolved once Viewer enters Full Overlay mode.)                                                                                                        |
-| `saveStore`          | Requests that the specified blob is stored to local storage for the document's origin.                              | {'origin': (string), 'blob': (string)}                                                                                                                                  | undefined (The response resolves once the blob has been successfully stored.)                                                                                                     |
-| `sendCsi`            | Requests that the CSI ticks are flushed. See tick.                                                                  | undefined                                                                                                                                                               | undefined                                                                                                                                                                         |
-| `setFlushParams`     | Sets arbitrary additional parameters to be included in the CSI flush. See sendCsi.                                  | Object                                                                                                                                                                  | undefined                                                                                                                                                                         |
-| `tick`               | Records a timing measurement.                                                                                       | {'label': (string), 'from': (string), 'value': (number)}, where from is the label of another tick using this timing reference and value is the time to record.          | undefined                                                                                                                                                                         |
+| Message              | Description                                                                                                         | Request                                                                                                                                                                                       | Response                                                                                                                                                                          |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `broadcast`          | Message that will be broadcast to every other AMP document open in the Viewer.                                      | \*(Any value may be broadcast.)                                                                                                                                                               | Array<\*> (The response is an array of the responses from the other documents.)                                                                                                   |
+| `bindReady`          | Sent from AMP pages that use the amp-bind extension. Informs the Viewer that amp-bind has completed initialization. | undefined                                                                                                                                                                                     | undefined                                                                                                                                                                         |
+| `cancelFullOverlay`  | Requests that Full Overlay mode is cancelled. If the header was hidden, it should be restored.                      | undefined                                                                                                                                                                                     | undefined (The response is sent once Viewer exits Full Overlay mode.)                                                                                                             |
+| `cid`                | Requests the scoped Client ID. See Client identifiers in AMP.                                                       | undefined                                                                                                                                                                                     | string (The scoped Client ID.)                                                                                                                                                    |
+| `documentHeight`     | The AMP runtime sends this request to the Viewer when the height of the document content changes.                   | {'height': (number)}                                                                                                                                                                          | undefined                                                                                                                                                                         |
+| `documentLoaded`     | The AMP runtime sends this request to the Viewer when it has fully loaded and is ready for display.                 | {'linkRels': (Map<string, string\|Array<string>>), 'viewport': (string), 'title': (string), 'sourceUrl': (string), 'isStory': (boolean)}, where linkRels is a map <link> rel values to hrefs. | undefined                                                                                                                                                                         |
+| `loadStore`          | Requests the local storage blob for the document's origin.                                                          | {'origin': (string)}                                                                                                                                                                          | {'blob': (string)}                                                                                                                                                                |
+| `openDialog`         | Requests that the AMP Access dialog with a specified URL is opened by the Viewer.                                   | {'url': (string)}                                                                                                                                                                             | string (The response is the token string from the dialog if the flow completed successfully. If the dialog is closed without completing the flow, then the response is rejected.) |
+| `popHistory`         | Requests that an entry is popped off the history stack down to the new stackIndex value.                            | {'stackIndex': (string)} (stackIndex specifies the new stack index.)                                                                                                                          | undefined (The response resolves once the history pop is complete.)                                                                                                               |
+| `prerenderComplete`  | Notifies the Viewer that prerendering of viewport is complete.                                                      | undefined                                                                                                                                                                                     | undefined                                                                                                                                                                         |
+| `pushHistory`        | Pushes the new stack index onto the history stack.                                                                  | {'stackIndex': (string)} (stackIndex specifies the new stack index.)                                                                                                                          | undefined (The response resolves once the history pop is complete. It rejects on an invalid stack index.)                                                                         |
+| `replaceHistory`     | Replaces the fragment value in history state (without pushing or popping).                                          | {'fragment': (string)} (fragment specifies the new fragment (hash) value in the current history frame.)                                                                                       | undefined (The response resolves once the replacement is complete.)                                                                                                               |
+| `requestFullOverlay` | Requests that the Viewer enter Full Overlay mode. In this mode, the title bar may be hidden.                        | undefined                                                                                                                                                                                     | undefined (The response is resolved once Viewer enters Full Overlay mode.)                                                                                                        |
+| `saveStore`          | Requests that the specified blob is stored to local storage for the document's origin.                              | {'origin': (string), 'blob': (string)}                                                                                                                                                        | undefined (The response resolves once the blob has been successfully stored.)                                                                                                     |
+| `sendCsi`            | Requests that the CSI ticks are flushed. See tick.                                                                  | undefined                                                                                                                                                                                     | undefined                                                                                                                                                                         |
+| `setFlushParams`     | Sets arbitrary additional parameters to be included in the CSI flush. See sendCsi.                                  | Object                                                                                                                                                                                        | undefined                                                                                                                                                                         |
+| `tick`               | Records a timing measurement.                                                                                       | {'label': (string), 'from': (string), 'value': (number)}, where from is the label of another tick using this timing reference and value is the time to record.                                | undefined                                                                                                                                                                         |
 
 #### Viewer to Document
 
@@ -121,7 +120,7 @@ The messages in this section are sent by the Viewer Integration Script and are n
 | `historyPopped`        | This informs the document that the history stack has been popped down to the new index.                                                                                                                                                             | {'newStackIndex': (number)}                                                                                                                                                                                                 | undefined                                                       |
 | `scrollLock`           | Requests that scrolling should be enabled or disabled in the document by calling preventDefault() on any touchmove events. Requires the swipe capability. Will not stop the user from scrolling using a non-touch input device e.g. mouse/keyboard. | boolean                                                                                                                                                                                                                     | undefined                                                       |
 | `disableScroll`        | Requests that scrolling should be enabled or disabled in the document by setting overflow: hidden on the viewport.                                                                                                                                  | boolean                                                                                                                                                                                                                     | undefined                                                       |
-| `visibilitychange`     | Notifies the document that its visibility state has changed.                                                                                                                                                                                        | {'prerenderSize': (number), 'state': (string)}                                                                                                                                                                              | undefined                                                       |
+| `visibilitychange`     | Notifies the document that its visibility state has changed.                                                                                                                                                                                        | {'state': (string)}                                                                                                                                                                                                         | undefined                                                       |
 | `willLikelyUnload`     | Notifies the document that it is likely that it will be imminently unloaded, but it may not be.                                                                                                                                                     | {}                                                                                                                                                                                                                          | undefined                                                       |
 | `xhr`                  | Notifies the document that an XHR fires.                                                                                                                                                                                                            | {'input': (string), 'init': (!FetchInitDef)}                                                                                                                                                                                | {'response': (JsonObject\|string\|undefined)}                   |
 | `viewerRenderTemplate` | Notifies the document that an XHR fires along with mustache template(s) to render the third party endpoint response.                                                                                                                                | {'originalRequest': {'input': (string), 'init': (!FetchInitDef)}, 'ampComponent': {'type': (string), 'successTemplate': {'type': (string), 'payload': (string)}, 'errorTemplate': {'type': (string), 'payload': (string)}}} | {'html': (string), 'response': (JsonObject\|string\|undefined)} |
diff --git a/extensions/amp-viewer-integration/integrating-viewer-with-amp-doc-guide.md b/extensions/amp-viewer-integration/integrating-viewer-with-amp-doc-guide.md
index fd69690dbb84e..ec24b18fc52f9 100644
--- a/extensions/amp-viewer-integration/integrating-viewer-with-amp-doc-guide.md
+++ b/extensions/amp-viewer-integration/integrating-viewer-with-amp-doc-guide.md
@@ -18,9 +18,9 @@ limitations under the License.
 
 ## Introduction
 
-This document explains the communication between a Viewer and AMP documents by using the open-source [AMP Viewer Integration API](https://github.com/ampproject/amphtml/tree/master/extensions/amp-viewer-integration). The AMP Viewer Integration API provides a protocol to establish a connection and send [messages](https://github.com/ampproject/amphtml/blob/viewer-doc-api-link/extensions/amp-viewer-integration/amp-doc-viewer-api.md) between the Viewer and AMP documents.
+This document explains the communication between a Viewer and AMP documents by using the open-source [AMP Viewer Integration API](https://github.com/ampproject/amphtml/tree/main/extensions/amp-viewer-integration). The AMP Viewer Integration API provides a protocol to establish a connection and send [messages](https://github.com/ampproject/amphtml/blob/main/extensions/amp-viewer-integration/amp-doc-viewer-api.md) between the Viewer and AMP documents.
 
-<img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/intro.png" height="300px"></img>
+<img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/intro.png" height="300px"></img>
 
 A Viewer is a container in which you can view AMP Documents. An AMP Document is a document created with the AMPHTML library and validated by the [AMP Validator](https://validator.amp.dev/).
 
@@ -38,87 +38,87 @@ To establish communication between the Viewer and AMP Document, we need to estab
 
 1. The Viewer waits for the AMP document to load. The Viewer listens on its window for a `message` event.
 
-   <img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/mobile-web-handshake1.png" height="300px"></img>
+    <img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/mobile-web-handshake1.png" height="300px"></img>
 
 2. As soon as the AMP document loads, the AMP document sends a message to the Viewer (its parent) using `postMessage()`.
 
-   <img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/mobile-web-handshake2.png" height="300px"></img>
+    <img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/mobile-web-handshake2.png" height="300px"></img>
 
-   The message from the AMP Document to the Viewer looks like this:
+    The message from the AMP Document to the Viewer looks like this:
 
-   ```javascript
-   {
-     app: “__AMPHTML__”,     // Hey viewer, it's me AMP Doc!
-     requestid: 1,           // A unique ID for the request
-     type: “q”,              // Represents a REQUEST
-     name: “channelOpen”,    // Let’s shake hands
-     data: {
-       url: “amp...yoursite.com”,   // from the amp cache
-       sourceUrl: “yoursite.com”    // the original source url
-     }
-     rsvp: true              // response required
-   };
-   ```
+    ```javascript
+    {
+      app: "__AMPHTML__",     // Hey viewer, it's me AMP Doc!
+      requestid: 1,           // A unique ID for the request
+      type: "q",              // Represents a REQUEST
+      name: "channelOpen",    // Let’s shake hands
+      data: {
+        url: "amp...yoursite.com",   // from the amp cache
+        sourceUrl: "yoursite.com"    // the original source url
+      }
+      rsvp: true              // response required
+    };
+    ```
 
 3. The Viewer responds to the AMP Document by also using `postMessage()`.
 
-   <img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/mobile-web-handshake3.png" height="300px"></img>
+    <img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/mobile-web-handshake3.png" height="300px"></img>
 
-   The message from the Viewer to the AMP Document looks like this:
+    The message from the Viewer to the AMP Document looks like this:
 
-   ```javascript
-   {
-     app: “__AMPHTML__”,    // Hey AMP Doc, it's me Viewer!
-     type: “s”,             // Represents a RESPONSE
-     requestid: 1,          // The same ID used in the REQUEST
-   };
-   ```
+    ```javascript
+    {
+      app: "__AMPHTML__",    // Hey AMP Doc, it's me Viewer!
+      type: "s",             // Represents a RESPONSE
+      requestid: 1,          // The same ID used in the REQUEST
+    };
+    ```
 
 4. The Viewer and AMP Document are now introduced, and they can start posting messages to each other.
 
-   <img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/mobile-web-handshake4.png" height="300px"></img>
+    <img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/mobile-web-handshake4.png" height="300px"></img>
 
 ### Communicating between Doc and Viewer in Webview
 
 Webview is for Native apps. In Webview, the Viewer can see the AMP document, but the AMP document cannot identify the Viewer. The Viewer can talk to the AMP document, but the AMP document doesn’t know who to respond to. To allow communication between the two, we need to create a 2-way connection.
 
-<img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/webview-connection1.png" height="300px"></img>
+<img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/webview-connection1.png" height="300px"></img>
 
 #### Creating a 2-way connection
 
 1. The Viewer starts by polling the AMP Document every x milliseconds until the AMP Document is loaded and ready.
 
-   <img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/webview-connection2.png" height="300px"></img>
+    <img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/webview-connection2.png" height="300px"></img>
 
 2. When the AMP document loads, it receives a “Are you there?” polling message but the AMP document doesn't know who to respond to. For this reason, the Viewer uses the [Channel Messaging API](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API) to create a 2-way connection.
 
 3. The Viewer creates two ports: one for the Viewer and one for the AMP Document. The Viewer sends a port with its polling message to the AMP Document.
 
-   <img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/webview-connection3.png" height="300px"></img>
+    <img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/webview-connection3.png" height="300px"></img>
 
-   The message sent from the Viewer to the AMP Doc is done using the `postMessage()` method. The post contains the following message:
+    The message sent from the Viewer to the AMP Doc is done using the `postMessage()` method. The post contains the following message:
 
-   ```javascript
-   var message = {
-     app: ‘__AMPHTML__’,       // Hey AMP Doc, it's me Viewer!
-     name: ‘handshake-poll’,   // I’m polling you so we can shake hands.
-   };
-   ```
+    ```javascript
+    var message = {
+      app: ‘__AMPHTML__’,       // Hey AMP Doc, it's me Viewer!
+      name: ‘handshake-poll’,   // I’m polling you so we can shake hands.
+    };
+    ```
 
-   When calling `postMessage()`, the Viewer also sends the port to the AMP Doc and it looks like this:
+    When calling `postMessage()`, the Viewer also sends the port to the AMP Doc and it looks like this:
 
-   ```javascript
-   var channel = new MessageChannel();
-   ampdoc.postMessage(message, ‘*’, [channel.port2]);
-   ```
+    ```javascript
+    var channel = new MessageChannel();
+    ampdoc.postMessage(message, ‘*’, [channel.port2]);
+    ```
 
 4. Eventually, the AMP Document loads and receives the message and the port.
 
-   <img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/webview-connection4.png" height="300px"></img>
+    <img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/webview-connection4.png" height="300px"></img>
 
 5. A 2-way connection is established where the Viewer can send messages to the AMP Doc and the AMP Doc can send messages to the Viewer!
 
-   <img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/webview-connection5.png" height="300px"></img>
+    <img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/webview-connection5.png" height="300px"></img>
 
 6. Now that the connection is set up, we need to establish the handshake between the Viewer and the AMP document.
 
@@ -128,41 +128,41 @@ In the previous section, we set up the connection between the Viewer and AMP Doc
 
 1. The AMP Doc sends a message to the Viewer over the port.
 
-   <img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/webview-handshake1.png" height="300px"></img>
+    <img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/webview-handshake1.png" height="300px"></img>
 
-   The message from the AMP document looks like this:
+    The message from the AMP document looks like this:
 
-   ```javascript
-   {
-     app: “__AMPHTML__”,     // Hey viewer, it's me AMP Doc!
-     requestid: 1,           // A unique ID for the request
-     type: “q”,              // Represents a REQUEST
-     name: “channelOpen”,    // Let’s shake hands
-     data: {
-       url: “amp...yoursite.com”,   // from the amp cache
-       sourceUrl: “yoursite.com”    // the original source url
-     }
-     rsvp: true              // response required
-   };
-   ```
+    ```javascript
+    {
+      app: "__AMPHTML__",     // Hey viewer, it's me AMP Doc!
+      requestid: 1,           // A unique ID for the request
+      type: "q",              // Represents a REQUEST
+      name: "channelOpen",    // Let’s shake hands
+      data: {
+        url: "amp...yoursite.com",   // from the amp cache
+        sourceUrl: "yoursite.com"    // the original source url
+      }
+      rsvp: true              // response required
+    };
+    ```
 
 2. The Viewer responds to the AMP document over the port.
 
-   <img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/webview-handshake2.png" height="300px"></img>
+    <img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/webview-handshake2.png" height="300px"></img>
 
-   The message looks like this:
+    The message looks like this:
 
-   ```javascript
-   {
-     app: “__AMPHTML__”,    // Hey AMP Doc, it's me Viewer!
-     type: “s”,             // Represents a RESPONSE
-     requestid: 1,          // The same ID used in the REQUEST
-   };
-   ```
+    ```javascript
+    {
+      app: "__AMPHTML__",    // Hey AMP Doc, it's me Viewer!
+      type: "s",             // Represents a RESPONSE
+      requestid: 1,          // The same ID used in the REQUEST
+    };
+    ```
 
 3. The handshake is established and now the Viewer and AMP Document can start communicating.
 
-   <img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/webview-handshake3.png" height="300px"></img>
+    <img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/webview-handshake3.png" height="300px"></img>
 
 ## Using the Integration API with the Viewer
 
@@ -186,7 +186,7 @@ If the Viewer uses an AMP cache other than the Google AMP Cache, refer to the Ca
 
 #### AMP Cache Providers
 
-AMP Cache providers must include the [amp-viewer-integration](https://github.com/ampproject/amphtml/tree/master/extensions/amp-viewer-integration) component in the cached AMP documents like this:
+AMP Cache providers must include the [amp-viewer-integration](https://github.com/ampproject/amphtml/tree/main/extensions/amp-viewer-integration) component in the cached AMP documents like this:
 
 ```html
 <script async src=”../amp-viewer-integration”>
@@ -196,22 +196,22 @@ AMP Cache providers must include the [amp-viewer-integration](https://github.com
 
 1. In the Viewer, you need to create initialization parameters in an object:
 
-   ```javascript
-   var initParams = {
-     origin: “http://yourAmpDocsOrigin.com”
-     someOtherParam: “someValue,anotherValue”
-   };
-   ```
+    ```javascript
+    var initParams = {
+      origin: "http://yourAmpDocsOrigin.com"
+      someOtherParam: "someValue,anotherValue"
+    };
+    ```
 
 2. Using `encodeUriComponent`, convert the object to query string format:
 
-   - Separated by `&`
-   - Encoded to UTF-8 (`','` -> `'%2C'`, `':'` -> `'%3A'`, `'/'` -> `'%2F'`, etc)
+    - Separated by `&`
+    - Encoded to UTF-8 (`','` -> `'%2C'`, `':'` -> `'%3A'`, `'/'` -> `'%2F'`, etc)
 
 3. Add the query string to the fragment part of the AMP Cache URL:
-   ```html
-   https://cdn.ampproject.org/v/s/origin?amp_js_v=0.1#origin=http%3A%2F%2FyourAmpDocsOrigin.com&someOtherParam=someValue%2CanotherValue
-   ```
+    ```html
+    https://cdn.ampproject.org/v/s/origin?amp_js_v=0.1#origin=http%3A%2F%2FyourAmpDocsOrigin.com&someOtherParam=someValue%2CanotherValue
+    ```
 
 ### Composing messages
 
@@ -229,15 +229,15 @@ A message can be either an Object, or a String that’s serialized using JSON st
 };
 ```
 
-- **app**: A sentinel that both the Viewer and AMP Documents will use to know that the message they’ve received is a part of the AMP Viewer Integrations API. The value should always be set to `'__AMPHTML__'`.
-- **type**: This signals that the message is either a request or a response.
-  - For a request message, specify a value of `'q'`.
-  - For a response message, specify a value of `'s'`.
-- **requestid**: A unique ID to identify the request. A simple request counter that increases its value with each request message should work just fine.
-- **name**: Specifies the message name.
-- **rsvp**: Set to `true` if you need a response to your message; otherwise, `false`.
-- **data**: The data you need to send with your message.
-- **error**: The string explaining the error that occurred. Only used in a response.
+-   **app**: A sentinel that both the Viewer and AMP Documents will use to know that the message they’ve received is a part of the AMP Viewer Integrations API. The value should always be set to `'__AMPHTML__'`.
+-   **type**: This signals that the message is either a request or a response.
+    -   For a request message, specify a value of `'q'`.
+    -   For a response message, specify a value of `'s'`.
+-   **requestid**: A unique ID to identify the request. A simple request counter that increases its value with each request message should work just fine.
+-   **name**: Specifies the message name.
+-   **rsvp**: Set to `true` if you need a response to your message; otherwise, `false`.
+-   **data**: The data you need to send with your message.
+-   **error**: The string explaining the error that occurred. Only used in a response.
 
 ### Establishing handshakes
 
@@ -245,8 +245,8 @@ There are two types of handshakes:
 
 1. A handshake initiated by the AMP Document (typically used in Mobile Web).
 2. A handshake initiated by the Viewer (typically used in Webview). In this case, the Viewer polls the AMP Document every X milliseconds to initiate the handshake. There are two ways to do this:
-   - Mobile Web
-   - Webview (Native apps)
+    - Mobile Web
+    - Webview (Native apps)
 
 #### AMP Document-initiated handshake
 
@@ -254,29 +254,29 @@ To establish a handshake initiated by the AMP Document:
 
 1. The AMP Document initiates the handshake by sending a request to the Viewer via `postMessage()`:
 
-   ```javascript
-   {
-     app: "__AMPHTML__",
-     requestid: 1,
-     type: "q",
-     name: "channelOpen",
-     data: {
-       url: “amp...yoursite.com”,
-       sourceUrl: “yoursite.com”
-     }
-     rsvp: true,
-   };
-   ```
+    ```javascript
+    {
+      app: "__AMPHTML__",
+      requestid: 1,
+      type: "q",
+      name: "channelOpen",
+      data: {
+        url: "amp...yoursite.com",
+        sourceUrl: "yoursite.com"
+      }
+      rsvp: true,
+    };
+    ```
 
 2. The Viewer needs to acknowledge the request and respond via `postMessage()`:
 
-   ```javascript
-   {
-     app: “__AMPHTML__”,
-     type: “s”,
-     requestid: 1,
-   };
-   ```
+    ```javascript
+    {
+      app: "__AMPHTML__",
+      type: "s",
+      requestid: 1,
+    };
+    ```
 
 #### Viewer-initiated handshake (polling)
 
@@ -316,13 +316,13 @@ The AMP Document sends the following message to the Viewer over the port:
 
 ```javascript
 {
-  app: “__AMPHTML__”,
+  app: "__AMPHTML__",
   requestid: 1,
-  type: “q”,
-  name: “channelOpen”,
+  type: "q",
+  name: "channelOpen",
   data: {
-    url: “amp...yoursite.com”,
-    sourceUrl: “yoursite.com”
+    url: "amp...yoursite.com",
+    sourceUrl: "yoursite.com"
   }
   rsvp: true,
 };
@@ -332,8 +332,8 @@ The Viewer needs to respond with the following message over the port:
 
 ```javascript
 {
-  app: “__AMPHTML__”,
-  type: “s”,
+  app: "__AMPHTML__",
+  type: "s",
   requestid: 1,
 };
 ```
@@ -348,8 +348,8 @@ _Example: Parameters in an object_
 
 ```javascript
 var initParams = {
-  origin: “http://yourAmpDocsOrigin.com”,
-  cap: “handshakepoll”
+  origin: "http://yourAmpDocsOrigin.com",
+  cap: "handshakepoll"
 };
 ```
 
@@ -374,13 +374,13 @@ Eventually, the AMP Document receives and loads the message. The AMP Document se
 
 ```javascript
 {
-  app: “__AMPHTML__”,
+  app: "__AMPHTML__",
   requestid: 1,
-  type: “q”,
-  name: “channelOpen”,
+  type: "q",
+  name: "channelOpen",
   data: {
-    url: “amp...yoursite.com”,
-    sourceUrl: “yoursite.com”
+    url: "amp...yoursite.com",
+    sourceUrl: "yoursite.com"
   }
   rsvp: true,
 };
@@ -390,8 +390,8 @@ The Viewer needs to respond with the following message via `postMessage()`:
 
 ```javascript
 {
-  app: “__AMPHTML__”,
-  type: “s”,
+  app: "__AMPHTML__",
+  type: "s",
   requestid: 1,
 };
 ```
@@ -404,18 +404,13 @@ A message needs to be sent from the Viewer to the AMP Doc:
 
 ```javascript
 {
-  app: “__AMPHTML__”,
+  app: "__AMPHTML__",
   requestid: 2,
-  type: “q”,
-  name: “visibilitychange”,     // The message type.
+  type: "q",
+  name: "visibilitychange",     // The message type.
   data: {
-    state: “the new state”,     // See visibility-state.js for allowed
-                                // values.Can be “visible” or “hidden”.
-                                // If “visible”, prerenderSize is
-                                // ignored and the page loads fully.
-    prerenderSize: 1            // # of Windows of content to prerender.
-                                // 0=no prerendering. 1=load resources for
-                                // 1st screen, etc. Default is 1.
+    state: "the new state",     // See visibility-state.js for allowed
+                                // values. Can be "visible" or "hidden".
   }
   rsvp: true
 };
@@ -423,14 +418,14 @@ A message needs to be sent from the Viewer to the AMP Doc:
 
 ### Enabling swiping between AMP pages
 
-<img src="https://raw.githubusercontent.com/ampproject/amphtml/master/extensions/amp-viewer-integration/img/swipe.png" height="300px"></img>
+<img src="https://raw.githubusercontent.com/ampproject/amphtml/main/extensions/amp-viewer-integration/img/swipe.png" height="300px"></img>
 
 Touch events go straight to the AMP Document. So how does the Viewer know when to animate an AMP doc out of view while bringing another one into view? The AMP Doc forwards all touch events to the Viewer. To enable this functionality, add `cap=swipe` to your Viewer Init Params:
 
 ```javascript
 var initParams = {
-  origin: “http://yourAmpDocsOrigin.com”,
-  cap: “foo,swipe”
+  origin: "http://yourAmpDocsOrigin.com",
+  cap: "foo,swipe"
 };
 ```
 
@@ -442,18 +437,18 @@ https://cdn.ampproject.org/v/s/origin?amp_js_v=0.1#origin=http%3A%2F%2FyourAmpDo
 
 The forwarded touch events are:
 
-- touchstart
-- touchend
-- touchmove
+-   touchstart
+-   touchend
+-   touchmove
 
 The message forwarded from the AMP Doc to the Viewer looks like this:
 
 ```javascript
 {
-  app: “__AMPHTML__”,
+  app: "__AMPHTML__",
   requestid: 1,
-  type: “q”,
-  name: “touchmove”,
+  type: "q",
+  name: "touchmove",
   data: {
     … // The event data.
   }
@@ -463,4 +458,4 @@ The message forwarded from the AMP Doc to the Viewer looks like this:
 
 ### Related Resources
 
-- [AMP Viewer Integration API repo](https://github.com/ampproject/amphtml/tree/master/extensions/amp-viewer-integration)
+-   [AMP Viewer Integration API repo](https://github.com/ampproject/amphtml/tree/main/extensions/amp-viewer-integration)
diff --git a/extensions/amp-vimeo/0.1/amp-vimeo.js b/extensions/amp-vimeo/0.1/amp-vimeo.js
index b4bbf0f1e602f..8f717fbb1ec4c 100644
--- a/extensions/amp-vimeo/0.1/amp-vimeo.js
+++ b/extensions/amp-vimeo/0.1/amp-vimeo.js
@@ -13,61 +13,35 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
+import {
+  VIMEO_EVENTS,
+  getVimeoIframeSrc,
+  getVimeoOriginRegExp,
+  listenToVimeoEvents,
+  makeVimeoMessage,
+} from '../vimeo-api';
 import {VideoAttributes, VideoEvents} from '../../../src/video-interface';
-import {VideoUtils} from '../../../src/utils/video';
-import {addParamToUrl} from '../../../src/url';
 import {
   createFrameFor,
   isJsonOrObj,
   mutedOrUnmutedEvent,
   objOrParseJson,
   originMatches,
+  postMessageWhenAvailable,
   redispatch,
 } from '../../../src/iframe-video';
-import {dict} from '../../../src/utils/object';
+import {dispatchCustomEvent, removeElement} from '../../../src/dom';
 import {getData, listen} from '../../../src/event-helper';
-import {getMode} from '../../../src/mode';
 import {installVideoManagerForDoc} from '../../../src/service/video-manager-impl';
+import {isAutoplaySupported} from '../../../src/utils/video';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {once} from '../../../src/utils/function';
-import {removeElement} from '../../../src/dom';
+import {once} from '../../../src/core/types/function';
 import {userAssert} from '../../../src/log';
 
 const TAG = 'amp-vimeo';
 
-/**
- * Get the name of the method for a given getter or setter.
- * See https://developer.vimeo.com/player/js-api
- * @param {string} prop The name of the property.
- * @param {?string} optType Either “get” or “set”.
- * @return {string}
- */
-function getMethodName(prop, optType = null) {
-  if (!optType) {
-    return prop;
-  }
-  return (
-    optType.toLowerCase() + prop.substr(0, 1).toUpperCase() + prop.substr(1)
-  );
-}
-
-/**
- * Maps events coming from the Vimeo frame to events to be dispatched from the
- * component element.
- *
- * If the item does not have a value, the event will not be forwarded 1:1, but
- * it will be listened to.
- *
- * @private {!Object<string, ?string>}
- */
-const VIMEO_EVENTS = {
-  'play': VideoEvents.PLAYING,
-  'pause': VideoEvents.PAUSE,
-  'ended': VideoEvents.ENDED,
-  'volumechange': null,
-};
-
 /** @implements {../../../src/video-interface.VideoInterface} */
 class AmpVimeo extends AMP.BaseElement {
   /** @param {!AmpElement} element */
@@ -77,9 +51,6 @@ class AmpVimeo extends AMP.BaseElement {
     /** @private {?Element} */
     this.iframe_ = null;
 
-    /** @private {function():string} */
-    this.setVolumeMethod_ = once(() => getMethodName('volume', 'set'));
-
     /** @private {function()} */
     this.onReadyOnce_ = once(() => this.onReady_());
 
@@ -95,6 +66,9 @@ class AmpVimeo extends AMP.BaseElement {
 
     /** @private {!UnlistenDef|null} */
     this.unlistenFrame_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /** @override */
@@ -120,35 +94,29 @@ class AmpVimeo extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
+    const {element} = this;
+    const videoid = userAssert(
+      element.getAttribute('data-videoid'),
+      'The data-videoid attribute is required for <amp-vimeo> %s',
+      element
+    );
     return this.isAutoplay_().then((isAutoplay) =>
-      this.buildIframe_(isAutoplay)
+      this.buildIframe_(
+        getVimeoIframeSrc(
+          videoid,
+          isAutoplay,
+          this.element.hasAttribute('do-not-track')
+        )
+      )
     );
   }
 
   /**
-   * @param {boolean} isAutoplay
+   * @param {string} src
    * @return {!Promise}
    * @private
    */
-  buildIframe_(isAutoplay) {
-    const {element} = this;
-    const vidId = userAssert(
-      element.getAttribute('data-videoid'),
-      'The data-videoid attribute is required for <amp-vimeo> %s',
-      element
-    );
-
-    // See
-    // https://developer.vimeo.com/player/embedding
-
-    let src = `https://player.vimeo.com/video/${encodeURIComponent(vidId)}`;
-
-    if (isAutoplay) {
-      // Only muted videos are allowed to autoplay
-      this.muted_ = true;
-      src = addParamToUrl(src, 'muted', '1');
-    }
-
+  buildIframe_(src) {
     const iframe = createFrameFor(this, src);
 
     this.iframe_ = iframe;
@@ -162,6 +130,7 @@ class AmpVimeo extends AMP.BaseElement {
   /** @override */
   unlayoutCallback() {
     this.removeIframe_();
+    this.pauseHelper_.updatePlaying(false);
     return true; // layout again.
   }
 
@@ -185,21 +154,18 @@ class AmpVimeo extends AMP.BaseElement {
     if (!this.element.hasAttribute(VideoAttributes.AUTOPLAY)) {
       return Promise.resolve(false);
     }
-    const {win} = this;
-    return VideoUtils.isAutoplaySupported(win, getMode(win).lite);
+    return isAutoplaySupported(this.win);
   }
 
   /** @private */
   onReady_() {
     const {element} = this;
 
-    Object.keys(VIMEO_EVENTS).forEach((event) => {
-      this.sendCommand_('addEventListener', event);
-    });
+    listenToVimeoEvents(this.iframe_);
 
     Services.videoManagerForDoc(element).register(this);
 
-    element.dispatchCustomEvent(VideoEvents.LOAD);
+    dispatchCustomEvent(element, VideoEvents.LOAD);
   }
 
   /**
@@ -207,13 +173,7 @@ class AmpVimeo extends AMP.BaseElement {
    * @private
    */
   onMessage_(event) {
-    if (
-      !originMatches(
-        event,
-        this.iframe_,
-        /^(https?:)?\/\/((player|www)\.)?vimeo.com(?=$|\/)/
-      )
-    ) {
+    if (!originMatches(event, this.iframe_, getVimeoOriginRegExp())) {
       return;
     }
 
@@ -235,6 +195,16 @@ class AmpVimeo extends AMP.BaseElement {
 
     const {element} = this;
 
+    switch (data['event']) {
+      case 'play':
+        this.pauseHelper_.updatePlaying(true);
+        break;
+      case 'pause':
+      case 'ended':
+        this.pauseHelper_.updatePlaying(false);
+        break;
+    }
+
     if (redispatch(element, data['event'], VIMEO_EVENTS)) {
       return;
     }
@@ -249,7 +219,7 @@ class AmpVimeo extends AMP.BaseElement {
         return;
       }
       this.muted_ = muted;
-      element.dispatchCustomEvent(mutedOrUnmutedEvent(muted));
+      dispatchCustomEvent(element, mutedOrUnmutedEvent(muted));
       return;
     }
   }
@@ -276,13 +246,13 @@ class AmpVimeo extends AMP.BaseElement {
       // that would disable autoplay on iOS.
       return;
     }
-    this.sendCommand_(this.setVolumeMethod_(), '0');
+    this.sendCommand_('setVolume', '0');
   }
 
   /** @override */
   unmute() {
     // TODO(alanorozco): Set based on volume before unmuting.
-    this.sendCommand_(this.setVolumeMethod_(), '1');
+    this.sendCommand_('setVolume', '1');
   }
 
   /** @override */
@@ -356,28 +326,11 @@ class AmpVimeo extends AMP.BaseElement {
 
   /**
    * @param {string} method
-   * @param {?Object|string=} optParams
+   * @param {?Object|string=} params
    * @private
    */
-  sendCommand_(method, optParams = null) {
-    // See
-    // https://developer.vimeo.com/player/js-api
-    if (!this.iframe_) {
-      return;
-    }
-    const {contentWindow} = this.iframe_;
-    if (!contentWindow) {
-      return;
-    }
-    contentWindow./*OK*/ postMessage(
-      JSON.stringify(
-        dict({
-          'method': method,
-          'value': optParams || '',
-        })
-      ),
-      '*'
-    );
+  sendCommand_(method, params) {
+    postMessageWhenAvailable(this.iframe_, makeVimeoMessage(method, params));
   }
 
   /** @override */
diff --git a/extensions/amp-vimeo/0.1/test/test-amp-vimeo.js b/extensions/amp-vimeo/0.1/test/test-amp-vimeo.js
index df50758c41c24..4ff879bcf457e 100644
--- a/extensions/amp-vimeo/0.1/test/test-amp-vimeo.js
+++ b/extensions/amp-vimeo/0.1/test/test-amp-vimeo.js
@@ -15,6 +15,7 @@
  */
 
 import '../amp-vimeo';
+import * as VideoUtils from '../../../../src/utils/video';
 
 describes.realWin(
   'amp-vimeo',
@@ -29,9 +30,15 @@ describes.realWin(
     beforeEach(() => {
       win = env.win;
       doc = win.document;
+      env.sandbox.stub(VideoUtils, 'isAutoplaySupported').resolves(true);
     });
 
-    async function getVimeo(videoId, opt_responsive) {
+    async function getVimeo(
+      videoId,
+      opt_responsive,
+      opt_doNotTrack,
+      opt_isAutoPlay
+    ) {
       const vimeo = doc.createElement('amp-vimeo');
       vimeo.setAttribute('data-videoid', videoId);
       vimeo.setAttribute('width', '111');
@@ -39,8 +46,14 @@ describes.realWin(
       if (opt_responsive) {
         vimeo.setAttribute('layout', 'responsive');
       }
+      if (opt_doNotTrack) {
+        vimeo.setAttribute('do-not-track', '');
+      }
+      if (opt_isAutoPlay) {
+        vimeo.setAttribute('autoplay', '');
+      }
       doc.body.appendChild(vimeo);
-      await vimeo.build();
+      await vimeo.buildInternal();
       await vimeo.layoutCallback();
       return vimeo;
     }
@@ -65,5 +78,25 @@ describes.realWin(
         /The data-videoid attribute is required for/
       );
     });
+
+    it('renders do-not-track src url', async () => {
+      const vimeo = await getVimeo('2323', false, true);
+      const iframe = vimeo.querySelector('iframe');
+      expect(iframe.src).to.equal('https://player.vimeo.com/video/2323?dnt=1');
+    });
+
+    it('should append muted=1 if video is autoplay', async () => {
+      const vimeo = await getVimeo('0123', true, false, true);
+      const iframe = vimeo.querySelector('iframe');
+      expect(iframe.src).to.equal(
+        'https://player.vimeo.com/video/0123?muted=1'
+      );
+    });
+
+    it('unlayoutCallback', async () => {
+      const vimeo = await getVimeo('0123', true, false, true);
+      vimeo.unlayoutCallback();
+      expect(vimeo.querySelector('iframe')).to.be.null;
+    });
   }
 );
diff --git a/extensions/amp-vimeo/0.1/test/validator-amp-vimeo.html b/extensions/amp-vimeo/0.1/test/validator-amp-vimeo.html
index bacc5110749b6..87ad785346b50 100644
--- a/extensions/amp-vimeo/0.1/test/validator-amp-vimeo.html
+++ b/extensions/amp-vimeo/0.1/test/validator-amp-vimeo.html
@@ -24,7 +24,6 @@
     <title>Vimeo examples</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>
      <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/extensions/amp-vimeo/0.1/test/validator-amp-vimeo.out b/extensions/amp-vimeo/0.1/test/validator-amp-vimeo.out
index 3200aa9443a52..a35d2143b2562 100644
--- a/extensions/amp-vimeo/0.1/test/validator-amp-vimeo.out
+++ b/extensions/amp-vimeo/0.1/test/validator-amp-vimeo.out
@@ -25,7 +25,6 @@ FAIL
 |      <title>Vimeo examples</title>
 |      <link rel="canonical" href="amps.html">
 |      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|      <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |      <script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>
 |       <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>
 |      <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -45,16 +44,16 @@ FAIL
 |  <!-- invalid videoid -->
 |  <amp-vimeo data-videoid="i don't think so" width="500" height="281" layout="responsive"></amp-vimeo>
 >> ^~~~~~~~~
-amp-vimeo/0.1/test/validator-amp-vimeo.html:45:0 The attribute 'data-videoid' in tag 'amp-vimeo' is set to the invalid value 'i don't think so'. (see https://amp.dev/documentation/components/amp-vimeo)
+amp-vimeo/0.1/test/validator-amp-vimeo.html:44:0 The attribute 'data-videoid' in tag 'amp-vimeo' is set to the invalid value 'i don't think so'. (see https://amp.dev/documentation/components/amp-vimeo)
 |
 |  <!-- videoid missing -->
 |  <amp-vimeo width="500" height="281" layout="responsive"></amp-vimeo>
 >> ^~~~~~~~~
-amp-vimeo/0.1/test/validator-amp-vimeo.html:48:0 The mandatory attribute 'data-videoid' is missing in tag 'amp-vimeo'. (see https://amp.dev/documentation/components/amp-vimeo)
+amp-vimeo/0.1/test/validator-amp-vimeo.html:47:0 The mandatory attribute 'data-videoid' is missing in tag 'amp-vimeo'. (see https://amp.dev/documentation/components/amp-vimeo)
 |
 |  <!-- noloading must not have a value other than "" or noloading-->
 |  <amp-vimeo width="500" height="281" layout="responsive" noloading="foo"></amp-vimeo>
 >> ^~~~~~~~~
-amp-vimeo/0.1/test/validator-amp-vimeo.html:51:0 The attribute 'noloading' in tag 'amp-vimeo' is set to the invalid value 'foo'. (see https://amp.dev/documentation/components/amp-vimeo)
+amp-vimeo/0.1/test/validator-amp-vimeo.html:50:0 The attribute 'noloading' in tag 'amp-vimeo' is set to the invalid value 'foo'. (see https://amp.dev/documentation/components/amp-vimeo)
 |  </body>
-|  </html>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-vimeo/1.0/amp-vimeo.css b/extensions/amp-vimeo/1.0/amp-vimeo.css
new file mode 100644
index 0000000000000..07581d4877327
--- /dev/null
+++ b/extensions/amp-vimeo/1.0/amp-vimeo.css
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/*
+ * Pre-upgrade:
+ * - display:block element
+ * - size-defined element
+ */
+ amp-vimeo {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Pre-upgrade: size-defining element - hide children. */
+amp-vimeo:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc) {
+  display: none;
+  content-visibility: hidden;
+}
diff --git a/extensions/amp-vimeo/1.0/amp-vimeo.js b/extensions/amp-vimeo/1.0/amp-vimeo.js
new file mode 100644
index 0000000000000..453e609c86535
--- /dev/null
+++ b/extensions/amp-vimeo/1.0/amp-vimeo.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {BaseElement} from './base-element';
+import {CSS} from '../../../build/amp-vimeo-1.0.css';
+import {isExperimentOn} from '../../../src/experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-vimeo';
+
+class AmpVimeo extends BaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-vimeo'),
+      'expected global "bento" or specific "bento-vimeo" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpVimeo, CSS);
+});
diff --git a/extensions/amp-vimeo/1.0/base-element.js b/extensions/amp-vimeo/1.0/base-element.js
new file mode 100644
index 0000000000000..abb4433ba045c
--- /dev/null
+++ b/extensions/amp-vimeo/1.0/base-element.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {VideoBaseElement} from '../../amp-video/1.0/base-element';
+import {Vimeo} from './component';
+
+export class BaseElement extends VideoBaseElement {}
+
+/** @override */
+BaseElement['Component'] = Vimeo;
+
+/** @override */
+BaseElement['props'] = {
+  'autoplay': {attr: 'autoplay', type: 'boolean'},
+  'controls': {attr: 'controls', type: 'boolean'},
+  'videoid': {attr: 'data-videoid'},
+  'doNotTrack': {attr: 'do-not-track'},
+};
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
diff --git a/extensions/amp-vimeo/1.0/component.js b/extensions/amp-vimeo/1.0/component.js
new file mode 100644
index 0000000000000..139345df4f709
--- /dev/null
+++ b/extensions/amp-vimeo/1.0/component.js
@@ -0,0 +1,127 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {
+  VIMEO_EVENTS,
+  getVimeoIframeSrc,
+  getVimeoOriginRegExp,
+  listenToVimeoEvents,
+  makeVimeoMessage,
+} from '../vimeo-api';
+import {VideoIframe} from '../../amp-video/1.0/video-iframe';
+import {dispatchCustomEvent} from '../../../src/dom';
+import {forwardRef} from '../../../src/preact/compat';
+import {
+  objOrParseJson,
+  postMessageWhenAvailable,
+} from '../../../src/iframe-video';
+import {useCallback, useMemo, useRef} from '../../../src/preact';
+
+/**
+ * @param {!HTMLIframeElement} iframe
+ * @param {string} type
+ */
+function dispatchEvent(iframe, type) {
+  dispatchCustomEvent(iframe, type, null, {
+    bubbles: true,
+    cancelable: false,
+  });
+}
+
+/**
+ * @param {string} method
+ * @return {string}
+ */
+function makeMethodMessage(method) {
+  if (method === 'mute') {
+    return makeVimeoMessage('setVolume', '0');
+  }
+  if (method === 'unmute') {
+    return makeVimeoMessage('setVolume', '1');
+  }
+  return makeVimeoMessage(method);
+}
+
+/**
+ * @param {!VimeoDef.Props} props
+ * @param {{current: ?T}} ref
+ * @return {PreactDef.Renderable}
+ * @template T
+ */
+export function VimeoWithRef(
+  {autoplay = false, doNotTrack = false, videoid, ...rest},
+  ref
+) {
+  const origin = useMemo(getVimeoOriginRegExp, []);
+  const src = useMemo(
+    () => getVimeoIframeSrc(videoid, autoplay, doNotTrack),
+    [videoid, doNotTrack, autoplay]
+  );
+
+  const readyIframeRef = useRef(null);
+  const onReadyMessage = useCallback((iframe) => {
+    if (readyIframeRef.current === iframe) {
+      return;
+    }
+    readyIframeRef.current = iframe;
+    dispatchEvent(iframe, 'canplay');
+    listenToVimeoEvents(iframe);
+  }, []);
+
+  const onMessage = useCallback(
+    (e) => {
+      const {currentTarget} = e;
+      const data = objOrParseJson(e.data);
+      if (!data) {
+        return;
+      }
+      const event = data['event'];
+      if (event == 'ready' || data['method'] == 'ping') {
+        onReadyMessage(currentTarget);
+        return;
+      }
+      if (VIMEO_EVENTS[event]) {
+        dispatchEvent(currentTarget, VIMEO_EVENTS[event]);
+        return;
+      }
+    },
+    [onReadyMessage]
+  );
+
+  const onIframeLoad = useCallback((e) => {
+    postMessageWhenAvailable(e.currentTarget, makeVimeoMessage('ping'));
+  }, []);
+
+  return (
+    <VideoIframe
+      ref={ref}
+      {...rest}
+      origin={origin}
+      autoplay={autoplay}
+      src={src}
+      onMessage={onMessage}
+      makeMethodMessage={makeMethodMessage}
+      onIframeLoad={onIframeLoad}
+      // Vimeo API does not have a way to hide controls, so they're always set
+      controls
+    />
+  );
+}
+
+const Vimeo = forwardRef(VimeoWithRef);
+Vimeo.displayName = 'Vimeo'; // Make findable for tests.
+export {Vimeo};
diff --git a/extensions/amp-vimeo/1.0/component.type.js b/extensions/amp-vimeo/1.0/component.type.js
new file mode 100644
index 0000000000000..6d69f37c49acd
--- /dev/null
+++ b/extensions/amp-vimeo/1.0/component.type.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/** @externs */
+
+/** @const */
+var VimeoDef = {};
+
+/**
+ * @typedef {{
+ *   videoid: string,
+ *   autoplay: (boolean|undefined),
+ *   doNotTrack: (boolean|undefined),
+ * }}
+ */
+VimeoDef.Props;
diff --git a/extensions/amp-vimeo/1.0/storybook/Basic.amp.js b/extensions/amp-vimeo/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..31a46bb6a727a
--- /dev/null
+++ b/extensions/amp-vimeo/1.0/storybook/Basic.amp.js
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {VideoElementWithActions} from '../../../amp-video/1.0/storybook/_helpers';
+import {boolean, text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-vimeo-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-vimeo', version: '1.0'}],
+    experiments: ['bento'],
+  },
+};
+
+export const Default = ({id}) => {
+  const videoid = text('videoid', '27246366');
+  const autoplay = boolean('autoplay', true);
+  const doNotTrack = boolean('do-not-track', false);
+  return (
+    <amp-vimeo
+      id={id}
+      width="16"
+      height="9"
+      layout="responsive"
+      autoplay={autoplay}
+      data-videoid={videoid}
+      do-not-track={doNotTrack}
+    />
+  );
+};
+
+export const Actions = () => {
+  const id = 'my-vimeo';
+  return (
+    <VideoElementWithActions id={id}>
+      <Default id={id} />
+    </VideoElementWithActions>
+  );
+};
diff --git a/extensions/amp-vimeo/1.0/storybook/Basic.js b/extensions/amp-vimeo/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..f231f6887e0a4
--- /dev/null
+++ b/extensions/amp-vimeo/1.0/storybook/Basic.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Vimeo} from '../component';
+import {boolean, number, text, withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'Vimeo',
+  component: Vimeo,
+  decorators: [withKnobs],
+};
+
+export const _default = () => {
+  const videoid = text('videoid', '27246366');
+  const width = number('width', 320);
+  const height = number('height', 180);
+  const autoplay = boolean('autoplay', true);
+  const doNotTrack = boolean('do-not-track', false);
+  return (
+    <Vimeo
+      style={{width, height}}
+      autoplay={autoplay}
+      doNotTrack={doNotTrack}
+      videoid={videoid}
+    />
+  );
+};
diff --git a/extensions/amp-vimeo/1.0/test/test-amp-vimeo.js b/extensions/amp-vimeo/1.0/test/test-amp-vimeo.js
new file mode 100644
index 0000000000000..e55b6b443f870
--- /dev/null
+++ b/extensions/amp-vimeo/1.0/test/test-amp-vimeo.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import '../amp-vimeo';
+import {htmlFor} from '../../../../src/static-template';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-vimeo-v1.0',
+  {
+    amp: {
+      extensions: ['amp-vimeo:1.0'],
+    },
+  },
+  (env) => {
+    let html;
+
+    const waitForRender = async (element) => {
+      await element.buildInternal();
+      const loadPromise = element.layoutCallback();
+      const {shadowRoot} = element;
+      await waitFor(() => shadowRoot.querySelector('iframe'), 'iframe mounted');
+      await loadPromise;
+    };
+
+    beforeEach(async () => {
+      html = htmlFor(env.win.document);
+      toggleExperiment(env.win, 'bento-vimeo', true, true);
+    });
+
+    it('renders', async () => {
+      const element = html`
+        <amp-vimeo layout="responsive" width="16" height="9"></amp-vimeo>
+      `;
+      env.win.document.body.appendChild(element);
+
+      await waitForRender(element);
+
+      const iframe = element.shadowRoot.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+    });
+  }
+);
diff --git a/extensions/amp-vimeo/1.0/test/validator-amp-vimeo.html b/extensions/amp-vimeo/1.0/test/validator-amp-vimeo.html
new file mode 100644
index 0000000000000..ad2836aacdbc4
--- /dev/null
+++ b/extensions/amp-vimeo/1.0/test/validator-amp-vimeo.html
@@ -0,0 +1,74 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  This tests validation for the amp-vimeo tag version 1.0.
+-->
+<!DOCTYPE html>
+<html ⚡>
+  <!-- prettier-ignore -->
+  <head>
+    <meta charset="utf-8">
+    <title>amp-vimeo 1.0</title>
+    <link rel="canonical" href="./">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-1.0.js"></script>
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+  <body>
+    <!-- valid -->
+    <amp-vimeo data-videoid="27246366" width="500" height="281"></amp-vimeo>
+
+    <!-- valid -->
+    <amp-vimeo
+      data-videoid="27246366"
+      width="500"
+      height="281"
+      layout="responsive"
+      noloading
+      autoplay
+    ></amp-vimeo>
+
+    <!-- valid -->
+    <amp-vimeo
+      data-videoid="27246366"
+      width="500"
+      height="281"
+      layout="responsive"
+      noloading="noloading"
+    ></amp-vimeo>
+
+    <!-- invalid: bad videoid -->
+    <amp-vimeo
+      data-videoid="i don't think so"
+      width="500"
+      height="281"
+      layout="responsive"
+    ></amp-vimeo>
+
+    <!-- invalid: videoid missing -->
+    <amp-vimeo width="500" height="281" layout="responsive"></amp-vimeo>
+
+    <!-- invalid: noloading must not have a value other than "" or noloading -->
+    <amp-vimeo
+      width="500"
+      height="281"
+      layout="responsive"
+      noloading="foo"
+    ></amp-vimeo>
+  </body>
+</html>
diff --git a/extensions/amp-vimeo/1.0/test/validator-amp-vimeo.out b/extensions/amp-vimeo/1.0/test/validator-amp-vimeo.out
new file mode 100644
index 0000000000000..1b0c53ed6b95a
--- /dev/null
+++ b/extensions/amp-vimeo/1.0/test/validator-amp-vimeo.out
@@ -0,0 +1,81 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This tests validation for the amp-vimeo tag version 1.0.
+|  -->
+|  <!DOCTYPE html>
+|  <html ⚡>
+|    <!-- prettier-ignore -->
+|    <head>
+|      <meta charset="utf-8">
+|      <title>amp-vimeo 1.0</title>
+|      <link rel="canonical" href="./">
+|      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|      <script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-1.0.js"></script>
+|      <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>
+|      <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    </head>
+|    <body>
+|      <!-- valid -->
+|      <amp-vimeo data-videoid="27246366" width="500" height="281"></amp-vimeo>
+|
+|      <!-- valid -->
+|      <amp-vimeo
+|        data-videoid="27246366"
+|        width="500"
+|        height="281"
+|        layout="responsive"
+|        noloading
+|        autoplay
+|      ></amp-vimeo>
+|
+|      <!-- valid -->
+|      <amp-vimeo
+|        data-videoid="27246366"
+|        width="500"
+|        height="281"
+|        layout="responsive"
+|        noloading="noloading"
+|      ></amp-vimeo>
+|
+|      <!-- invalid: bad videoid -->
+|      <amp-vimeo
+>>     ^~~~~~~~~
+amp-vimeo/1.0/test/validator-amp-vimeo.html:56:4 The attribute 'data-videoid' in tag 'amp-vimeo' is set to the invalid value 'i don't think so'. (see https://amp.dev/documentation/components/amp-vimeo)
+|        data-videoid="i don't think so"
+|        width="500"
+|        height="281"
+|        layout="responsive"
+|      ></amp-vimeo>
+|
+|      <!-- invalid: videoid missing -->
+|      <amp-vimeo width="500" height="281" layout="responsive"></amp-vimeo>
+>>     ^~~~~~~~~
+amp-vimeo/1.0/test/validator-amp-vimeo.html:64:4 The mandatory attribute 'data-videoid' is missing in tag 'amp-vimeo'. (see https://amp.dev/documentation/components/amp-vimeo)
+|
+|      <!-- invalid: noloading must not have a value other than "" or noloading -->
+|      <amp-vimeo
+>>     ^~~~~~~~~
+amp-vimeo/1.0/test/validator-amp-vimeo.html:67:4 The attribute 'noloading' in tag 'amp-vimeo' is set to the invalid value 'foo'. (see https://amp.dev/documentation/components/amp-vimeo)
+|        width="500"
+|        height="281"
+|        layout="responsive"
+|        noloading="foo"
+|      ></amp-vimeo>
+|    </body>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-vimeo/OWNERS b/extensions/amp-vimeo/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-vimeo/OWNERS
+++ b/extensions/amp-vimeo/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-vimeo/amp-vimeo.md b/extensions/amp-vimeo/amp-vimeo.md
index f2d48daba800c..887bf0798c035 100644
--- a/extensions/amp-vimeo/amp-vimeo.md
+++ b/extensions/amp-vimeo/amp-vimeo.md
@@ -48,7 +48,13 @@ With responsive layout, the width and height from the example should yield corre
     <td width="40%"><strong>autoplay</strong></td>
     <td>If this attribute is present, and the browser supports autoplay, the video will be automatically
 played as soon as it becomes visible. There are some conditions that the component needs to meet
-to be played, <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-video-interface.md#autoplay">which are outlined in the Video in AMP spec</a>.</td>
+to be played, <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-video-interface.md#autoplay">which are outlined in the Video in AMP spec</a>.</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>do-not-track</strong></td>
+    <td>If this attribute is present the player will be blocked from tracking any session data, including all cookies and
+    <a href="https://vimeo.com/stats">stats</a>. (It has the same effect as enabling a Do Not Track setting in your browser).
+    See the 'dnt' parameter in the <a href="https://developer.vimeo.com/api/oembed/videos">Vimeo oEmbed Documentation</a></td>
   </tr>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>
@@ -58,4 +64,4 @@ to be played, <a href="https://github.com/ampproject/amphtml/blob/master/spec/am
 
 ## Validation
 
-See [amp-vimeo rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-vimeo/validator-amp-vimeo.protoascii) in the AMP validator specification.
+See [amp-vimeo rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-vimeo/validator-amp-vimeo.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-vimeo/validator-amp-vimeo.protoascii b/extensions/amp-vimeo/validator-amp-vimeo.protoascii
index 50eeeadac8bf0..af6b7880c6ad4 100644
--- a/extensions/amp-vimeo/validator-amp-vimeo.protoascii
+++ b/extensions/amp-vimeo/validator-amp-vimeo.protoascii
@@ -17,8 +17,11 @@
 tags: {  # amp-vimeo
   html_format: AMP
   tag_name: "SCRIPT"
+  satisfies: "amp-vimeo 0.1"
+  excludes: "amp-vimeo 1.0"
   extension_spec: {
     name: "amp-vimeo"
+    version_name: "v0.1"
     version: "0.1"
     version: "latest"
     requires_usage: EXEMPTED
@@ -26,6 +29,18 @@ tags: {  # amp-vimeo
   }
   attr_lists: "common-extension-attrs"
 }
+tags: {  # amp-vimeo 1.0
+  html_format: AMP
+  tag_name: "SCRIPT"
+  satisfies: "amp-vimeo 1.0"
+  excludes: "amp-vimeo 0.1"
+  extension_spec: {
+    name: "amp-vimeo"
+    version_name: "v1.0"
+    version: "1.0"
+  }
+  attr_lists: "common-extension-attrs"
+}
 tags: {  # <amp-vimeo>
   html_format: AMP
   tag_name: "AMP-VIMEO"
diff --git a/extensions/amp-vimeo/vimeo-api.js b/extensions/amp-vimeo/vimeo-api.js
new file mode 100644
index 0000000000000..304b69f3a5e51
--- /dev/null
+++ b/extensions/amp-vimeo/vimeo-api.js
@@ -0,0 +1,91 @@
+/**
+ * Copyright 2021 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.
+ */
+import {VideoEvents} from '../../src/video-interface';
+import {addParamsToUrl} from '../../src/url';
+import {dict} from '../../src/core/types/object';
+import {postMessageWhenAvailable} from '../../src/iframe-video';
+
+/**
+ * @fileoverview
+ * Definitions of messages and other utilities to talk to Vimeo embed iframes.
+ * See https://developer.vimeo.com/player/js-api
+ */
+
+// ⚠️ This module should not have side-effects.
+
+export const getVimeoOriginRegExp = () =>
+  /^(https?:)?\/\/((player|www)\.)?vimeo.com(?=$|\/)/;
+
+/**
+ * Maps events coming from the Vimeo frame to events to be dispatched from the
+ * component element.
+ *
+ * If the item does not have a value, the event will not be forwarded 1:1, but
+ * it will be listened to.
+ *
+ * @const {!Object<string, ?string>}
+ */
+export const VIMEO_EVENTS = {
+  'play': VideoEvents.PLAYING,
+  'pause': VideoEvents.PAUSE,
+  'ended': VideoEvents.ENDED,
+  'volumechange': null,
+};
+
+/**
+ * @param {string} videoid
+ * @param {?boolean=} autoplay
+ * @param {?boolean=} doNotTrack
+ * @return {string}
+ */
+export function getVimeoIframeSrc(videoid, autoplay, doNotTrack) {
+  return addParamsToUrl(
+    `https://player.vimeo.com/video/${encodeURIComponent(videoid)}`,
+    dict({
+      'dnt': doNotTrack ? '1' : undefined,
+      'muted': autoplay ? '1' : undefined,
+    })
+  );
+}
+
+/**
+ * @param {string} method
+ * @param {?Object|string=} params
+ * @return {string}
+ */
+export function makeVimeoMessage(method, params = '') {
+  return JSON.stringify(
+    dict({
+      'method': method,
+      'value': params,
+    })
+  );
+}
+
+/**
+ * Sends a set of messages to the Vimeo iframe to listen to events.
+ * We need to explicitly listen to these so that we receive incoming event
+ * messages.
+ * @param {!HTMLIFrameElement} iframe
+ */
+export function listenToVimeoEvents(iframe) {
+  Object.keys(VIMEO_EVENTS).forEach((event) => {
+    postMessageWhenAvailable(
+      iframe,
+      makeVimeoMessage('addEventListener', event)
+    );
+  });
+}
diff --git a/extensions/amp-vine/0.1/amp-vine.js b/extensions/amp-vine/0.1/amp-vine.js
index 95633d7056c9c..e46c30793b81f 100644
--- a/extensions/amp-vine/0.1/amp-vine.js
+++ b/extensions/amp-vine/0.1/amp-vine.js
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {userAssert} from '../../../src/log';
@@ -24,6 +25,9 @@ class AmpVine extends AMP.BaseElement {
     super(element);
     /** @private {?Element} */
     this.iframe_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -68,9 +72,22 @@ class AmpVine extends AMP.BaseElement {
 
     this.iframe_ = iframe;
 
+    this.pauseHelper_.updatePlaying(true);
+
     return this.loadPromise(iframe);
   }
 
+  /** @override */
+  unlayoutCallback() {
+    const iframe = this.iframe_;
+    if (iframe) {
+      this.element.removeChild(iframe);
+      this.iframe_ = null;
+    }
+    this.pauseHelper_.updatePlaying(false);
+    return true;
+  }
+
   /** @override */
   pauseCallback() {
     if (this.iframe_ && this.iframe_.contentWindow) {
diff --git a/extensions/amp-vine/0.1/test/test-amp-vine.js b/extensions/amp-vine/0.1/test/test-amp-vine.js
index 3206c087aa403..f0890a2118a03 100644
--- a/extensions/amp-vine/0.1/test/test-amp-vine.js
+++ b/extensions/amp-vine/0.1/test/test-amp-vine.js
@@ -41,7 +41,7 @@ describes.realWin(
       }
       doc.body.appendChild(vine);
       return vine
-        .build()
+        .buildInternal()
         .then(() => vine.layoutCallback())
         .then(() => vine);
     }
@@ -70,5 +70,17 @@ describes.realWin(
         /The data-vineid attribute is required for/
       );
     });
+
+    it('unlayout and relayout', async () => {
+      const vine = await getVine('MdKjXez002d', true);
+      expect(vine.querySelector('iframe')).to.exist;
+
+      const unlayoutResult = vine.unlayoutCallback();
+      expect(unlayoutResult).to.be.true;
+      expect(vine.querySelector('iframe')).to.not.exist;
+
+      await vine.layoutCallback();
+      expect(vine.querySelector('iframe')).to.exist;
+    });
   }
 );
diff --git a/extensions/amp-vine/0.1/test/validator-amp-vine.html b/extensions/amp-vine/0.1/test/validator-amp-vine.html
index fd9b403623184..80c757df53aea 100644
--- a/extensions/amp-vine/0.1/test/validator-amp-vine.html
+++ b/extensions/amp-vine/0.1/test/validator-amp-vine.html
@@ -20,7 +20,6 @@
   <title>Vine examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/extensions/amp-vine/0.1/test/validator-amp-vine.out b/extensions/amp-vine/0.1/test/validator-amp-vine.out
index f35a64991a101..b2b8175fbd98d 100644
--- a/extensions/amp-vine/0.1/test/validator-amp-vine.out
+++ b/extensions/amp-vine/0.1/test/validator-amp-vine.out
@@ -21,7 +21,6 @@ PASS
 |    <title>Vine examples</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |    <script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -43,4 +42,4 @@ PASS
 |      layout="responsive">
 |    </amp-vine>
 |  </body>
-|  </html>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-vine/OWNERS b/extensions/amp-vine/OWNERS
index b0125f410a860..28413c73d8c0c 100644
--- a/extensions/amp-vine/OWNERS
+++ b/extensions/amp-vine/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}, {name: 'niallkennedy'}],
+      owners: [{name: 'ampproject/wg-components'}, {name: 'niallkennedy'}],
     },
   ],
 }
diff --git a/extensions/amp-vine/amp-vine.md b/extensions/amp-vine/amp-vine.md
index 427f5f5267f66..790b090db0353 100644
--- a/extensions/amp-vine/amp-vine.md
+++ b/extensions/amp-vine/amp-vine.md
@@ -41,10 +41,10 @@ A Vine simple embed has equal width and height:
   </tr>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>
-    <td>See <a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-vine/validator-amp-vine.protoascii">amp-vine rules</a> in the AMP validator specification.</td>
+    <td>See <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-vine/validator-amp-vine.protoascii">amp-vine rules</a> in the AMP validator specification.</td>
   </tr>
 </table>
 
 ## Validation
 
-See [amp-vine rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-vine/validator-amp-vine.protoascii) in the AMP validator specification.
+See [amp-vine rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-vine/validator-amp-vine.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-viqeo-player/0.1/amp-viqeo-player.js b/extensions/amp-viqeo-player/0.1/amp-viqeo-player.js
index 0e48c79dc5eb7..f9dd4502e1c2d 100644
--- a/extensions/amp-viqeo-player/0.1/amp-viqeo-player.js
+++ b/extensions/amp-viqeo-player/0.1/amp-viqeo-player.js
@@ -15,12 +15,11 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Layout, isLayoutSizeDefined} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {VideoAttributes, VideoEvents} from '../../../src/video-interface';
 import {redispatch} from '../../../src/iframe-video';
-import {startsWith} from '../../../src/string';
 
 import {dev, userAssert} from '../../../src/log';
 import {
@@ -140,6 +139,7 @@ class AmpViqeoPlayer extends AMP.BaseElement {
         allowFullscreen: true,
       }
     );
+    iframe.title = this.element.title || 'Viqeo video';
 
     // required to display the user gesture in the iframe
     iframe.setAttribute('allow', 'autoplay');
@@ -177,7 +177,7 @@ class AmpViqeoPlayer extends AMP.BaseElement {
     if (redispatch(this.element, action, EVENTS)) {
       return;
     }
-    if (startsWith(action, 'update')) {
+    if (action.startsWith('update')) {
       const key = action.replace(
         /^update([A-Z])(.*)$/,
         (_, c, rest) => c.toLowerCase() + rest
@@ -204,8 +204,12 @@ class AmpViqeoPlayer extends AMP.BaseElement {
 
   /** @override */
   createPlaceholderCallback() {
-    const placeholder = this.element.ownerDocument.createElement('amp-img');
+    const placeholder = this.element.ownerDocument.createElement('img');
     this.propagateAttributes(['aria-label'], placeholder);
+    this.applyFillContent(placeholder);
+    placeholder.setAttribute('loading', 'lazy');
+    placeholder.setAttribute('placeholder', '');
+    placeholder.setAttribute('referrerpolicy', 'origin');
     if (placeholder.hasAttribute('aria-label')) {
       placeholder.setAttribute(
         'alt',
@@ -218,10 +222,7 @@ class AmpViqeoPlayer extends AMP.BaseElement {
       'src',
       `https://cdn.viqeo.tv/preview/${encodeURIComponent(this.videoId_)}.jpg`
     );
-    placeholder.setAttribute('layout', 'fill');
-    placeholder.setAttribute('placeholder', '');
-    placeholder.setAttribute('referrerpolicy', 'origin');
-    this.applyFillContent(placeholder);
+
     return placeholder;
   }
 
@@ -320,8 +321,9 @@ class AmpViqeoPlayer extends AMP.BaseElement {
 
   /** @override */
   getPlayedRanges() {
-    return /** @type {!Array<!Array<number>>} */ (this.meta_['playedRanges'] ||
-      []);
+    return /** @type {!Array<!Array<number>>} */ (
+      this.meta_['playedRanges'] || []
+    );
   }
 
   /**
diff --git a/extensions/amp-viqeo-player/0.1/test/test-amp-viqeo-player.js b/extensions/amp-viqeo-player/0.1/test/test-amp-viqeo-player.js
index deceb9435ae31..d586f8ac7a61f 100644
--- a/extensions/amp-viqeo-player/0.1/test/test-amp-viqeo-player.js
+++ b/extensions/amp-viqeo-player/0.1/test/test-amp-viqeo-player.js
@@ -36,8 +36,9 @@ describes.realWin(
       doc = win.document;
     });
 
-    function fakePostMessage(viqeoElement, info) {
-      viqeoElement.implementation_.handleViqeoMessages_({
+    async function fakePostMessage(viqeoElement, info) {
+      const impl = await viqeoElement.getImpl(false);
+      impl.handleViqeoMessages_({
         source: viqeoElement.querySelector('iframe').contentWindow,
         data: {source: 'ViqeoPlayer', ...info},
       });
@@ -45,7 +46,7 @@ describes.realWin(
 
     it.skip('test-get-data', () => {
       return getViqeo().then((p) => {
-        const {viqeoElement, entry, viqeo} = p;
+        const {entry, viqeo, viqeoElement} = p;
         expect(entry.video.element).to.equal(viqeoElement);
         expect(entry.video instanceof AmpViqeoPlayer).to.equal(true);
         expect(entry.video).to.equal(viqeo);
@@ -115,13 +116,14 @@ describes.realWin(
     describe('createPlaceholderCallback', () => {
       it('should create a placeholder image', () => {
         return getViqeo().then((p) => {
-          const img = p.viqeoElement.querySelector('amp-img');
+          const img = p.viqeoElement.querySelector('img');
           expect(img).to.not.be.null;
+          expect(img.getAttribute('loading')).to.equal('lazy');
           expect(img.getAttribute('src')).to.equal(
             'https://cdn.viqeo.tv/preview/922d04f30b66f1a32eb2.jpg'
           );
-          expect(img.getAttribute('layout')).to.equal('fill');
-          expect(img.hasAttribute('placeholder')).to.be.true;
+          expect(img).to.have.class('i-amphtml-fill-content');
+          expect(img).to.have.attribute('placeholder');
           expect(img.getAttribute('referrerpolicy')).to.equal('origin');
           expect(img.getAttribute('alt')).to.equal('Loading video');
         });
@@ -131,51 +133,51 @@ describes.realWin(
     it('should forward events', () => {
       return getViqeo().then(({viqeoElement}) => {
         return Promise.resolve()
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(viqeoElement, VideoEvents.LOAD);
-            fakePostMessage(viqeoElement, {action: 'ready'});
+            await fakePostMessage(viqeoElement, {action: 'ready'});
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(viqeoElement, VideoEvents.PLAYING);
-            fakePostMessage(viqeoElement, {action: 'play'});
+            await fakePostMessage(viqeoElement, {action: 'play'});
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(viqeoElement, VideoEvents.PAUSE);
-            fakePostMessage(viqeoElement, {action: 'pause'});
+            await fakePostMessage(viqeoElement, {action: 'pause'});
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(viqeoElement, VideoEvents.MUTED);
-            fakePostMessage(viqeoElement, {action: 'mute'});
+            await fakePostMessage(viqeoElement, {action: 'mute'});
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(viqeoElement, VideoEvents.UNMUTED);
-            fakePostMessage(viqeoElement, {action: 'unmute'});
+            await fakePostMessage(viqeoElement, {action: 'unmute'});
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(viqeoElement, VideoEvents.ENDED);
-            fakePostMessage(viqeoElement, {action: 'end'});
+            await fakePostMessage(viqeoElement, {action: 'end'});
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(viqeoElement, VideoEvents.AD_START);
-            fakePostMessage(viqeoElement, {action: 'startAdvert'});
+            await fakePostMessage(viqeoElement, {action: 'startAdvert'});
             return p;
           })
-          .then(() => {
+          .then(async () => {
             const p = listenOncePromise(viqeoElement, VideoEvents.AD_END);
-            fakePostMessage(viqeoElement, {action: 'endAdvert'});
+            await fakePostMessage(viqeoElement, {action: 'endAdvert'});
             return p;
           });
       });
     });
 
     function getViqeo(params) {
-      const {id, viqeoProfileId, viqeoId, width, height, opt_params} = {
+      const {height, id, opt_params, viqeoId, viqeoProfileId, width} = {
         id: 'myVideo',
         viqeoProfileId: 184,
         viqeoId: '922d04f30b66f1a32eb2',
@@ -203,7 +205,7 @@ describes.realWin(
 
       doc.body.appendChild(viqeoElement);
       return viqeoElement
-        .build()
+        .buildInternal()
         .then(() => viqeoElement.layoutCallback())
         .then(() => {
           const videoManager = Services.videoManagerForDoc(doc);
diff --git a/extensions/amp-viqeo-player/OWNERS b/extensions/amp-viqeo-player/OWNERS
index c41d093975f40..52b836d87177b 100644
--- a/extensions/amp-viqeo-player/OWNERS
+++ b/extensions/amp-viqeo-player/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'sdbaron'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'sdbaron'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-viqeo-player/amp-viqeo-player.md b/extensions/amp-viqeo-player/amp-viqeo-player.md
index e5162e6242a11..cb6cef436083b 100644
--- a/extensions/amp-viqeo-player/amp-viqeo-player.md
+++ b/extensions/amp-viqeo-player/amp-viqeo-player.md
@@ -67,4 +67,8 @@ The `width` and `height` attributes determine the aspect ratio of the Viqeo embe
     <td width="40%"><strong>width and height</strong></td>
     <td>The width and height attributes are special for the Viqeo embed. Viqeo supports any proportions of videos. Basically Viqeo generates an unique code for each video depending on video size and proportions, but Viqeo user may change proportions in interface. Anyway after pressing 'Get code' button an unique code will be generated.</td>
   </tr>
+   <tr>
+    <td width="40%"><strong>title</strong></td>
+    <td>Define a <code>title</code> attribute for the component. The default is <code>Viqeo video</code>.</td>
+  </tr>
 </table>
diff --git a/extensions/amp-viz-vega/0.1/amp-viz-vega.js b/extensions/amp-viz-vega/0.1/amp-viz-vega.js
index c3939d380177f..c93412f4b1af5 100644
--- a/extensions/amp-viz-vega/0.1/amp-viz-vega.js
+++ b/extensions/amp-viz-vega/0.1/amp-viz-vega.js
@@ -19,11 +19,16 @@ import {CSS} from '../../../build/amp-viz-vega-0.1.css';
 import {Services} from '../../../src/services';
 import {assertHttpsUrl} from '../../../src/url';
 import {dev, devAssert, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {isExperimentOn} from '../../../src/experiments';
-import {isFiniteNumber, isObject} from '../../../src/types';
+import {isFiniteNumber, isObject} from '../../../src/core/types';
 import {isLayoutSizeDefined} from '../../../src/layout';
-import {tryParseJson} from '../../../src/json';
+
+import {
+  observeContentSize,
+  unobserveContentSize,
+} from '../../../src/utils/size-observer';
+import {tryParseJson} from '../../../src/core/types/object/json';
 
 export class AmpVizVega extends AMP.BaseElement {
   /** @param {!AmpElement} element */
@@ -62,6 +67,8 @@ export class AmpVizVega extends AMP.BaseElement {
      * Instance of Vega chart object. https://goo.gl/laszHL
      */
     this.chart_ = null;
+
+    this.onResized_ = this.onResized_.bind(this);
   }
 
   /** @override */
@@ -106,23 +113,35 @@ export class AmpVizVega extends AMP.BaseElement {
     }
   }
 
+  /** @override */
+  attachedCallback() {
+    observeContentSize(this.element, this.onResized_);
+  }
+
+  /** @override */
+  detachedCallback() {
+    unobserveContentSize(this.element, this.onResized_);
+  }
+
   /** @override */
   layoutCallback() {
     this.initialize_();
     return this.loadData_().then(() => this.renderGraph_());
   }
 
-  /** @override */
-  onLayoutMeasure() {
-    const box = this.getLayoutBox();
+  /**
+   * @param {!../layout-rect.LayoutSizeDef} size
+   * @private
+   */
+  onResized_(size) {
     if (
-      this.measuredWidth_ == box.width &&
-      this.measuredHeight_ == box.height
+      this.measuredWidth_ == size.width &&
+      this.measuredHeight_ == size.height
     ) {
       return;
     }
-    this.measuredWidth_ = box.width;
-    this.measuredHeight_ = box.height;
+    this.measuredWidth_ = size.width;
+    this.measuredHeight_ = size.height;
     if (this.chart_) {
       this.renderGraph_();
     }
@@ -149,16 +168,15 @@ export class AmpVizVega extends AMP.BaseElement {
     devAssert(!this.src_ != !this.inlineData_);
 
     if (this.inlineData_) {
-      this.data_ = /** @type {JsonObject} */ (tryParseJson(
-        this.inlineData_,
-        (err) => {
+      this.data_ = /** @type {JsonObject} */ (
+        tryParseJson(this.inlineData_, (err) => {
           userAssert(
             !err,
             'data could not be parsed. Is it in a valid JSON format?: %s',
             err
           );
-        }
-      ));
+        })
+      );
       return Promise.resolve();
     } else {
       // TODO(aghassemi): We may need to expose credentials. But for now Vega
diff --git a/extensions/amp-viz-vega/OWNERS b/extensions/amp-viz-vega/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-viz-vega/OWNERS
+++ b/extensions/amp-viz-vega/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-viz-vega/amp-viz-vega.md b/extensions/amp-viz-vega/amp-viz-vega.md
index 7821c2aa31e85..8325db94d8db5 100644
--- a/extensions/amp-viz-vega/amp-viz-vega.md
+++ b/extensions/amp-viz-vega/amp-viz-vega.md
@@ -134,7 +134,7 @@ to learn more and play with samples.
   and/or horizontal scrolling to be fully viewable. But they can be used in certain
   cases where it may not be possible for the visualization to scale to fit the given
   width and height. For example, the <em>World Map</em> visualization in the
-  <a href="https://github.com/ampproject/amphtml/blob/master/examples/viz-vega.amp.html">examples</a>
+  <a href="https://github.com/ampproject/amphtml/blob/main/examples/viz-vega.amp.html">examples</a>
   can not realistically scale to the given width and still be usable so it <code>use-data-width</code>
   and allows user to scroll horizontally.</p></td>
   </tr>
diff --git a/extensions/amp-vk/0.1/amp-vk.js b/extensions/amp-vk/0.1/amp-vk.js
index f2fbbf5bc3265..d46a749ecf81f 100644
--- a/extensions/amp-vk/0.1/amp-vk.js
+++ b/extensions/amp-vk/0.1/amp-vk.js
@@ -25,7 +25,7 @@ const EmbedType = {
 import {Layout} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {addParamsToUrl, appendEncodedParamStringToUrl} from '../../../src/url';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {getData, listen} from '../../../src/event-helper';
 import {removeElement} from '../../../src/dom';
 import {user, userAssert} from '../../../src/log';
diff --git a/extensions/amp-vk/0.1/test/test-amp-vk.js b/extensions/amp-vk/0.1/test/test-amp-vk.js
index e7f9e4993ad21..2f8039eedf82b 100644
--- a/extensions/amp-vk/0.1/test/test-amp-vk.js
+++ b/extensions/amp-vk/0.1/test/test-amp-vk.js
@@ -62,7 +62,7 @@ describes.realWin(
 
       doc.body.appendChild(element);
 
-      await element.build();
+      await element.buildInternal();
       const resource = Resource.forElement(element);
       resource.measure();
       await element.layoutCallback();
@@ -83,7 +83,7 @@ describes.realWin(
       const vkPost = await createAmpVkElement(POST_PARAMS);
       const iframe = vkPost.querySelector('iframe');
       expect(iframe).to.not.be.null;
-      const obj = vkPost.implementation_;
+      const obj = await vkPost.getImpl(false);
       obj.unlayoutCallback();
       expect(vkPost.querySelector('iframe')).to.be.null;
       expect(obj.iframe_).to.be.null;
@@ -137,14 +137,14 @@ describes.realWin(
 
     it('post::sets correct src url to the vk iFrame', async () => {
       const vkPost = await createAmpVkElement(POST_PARAMS, Layout.RESPONSIVE);
-      const impl = vkPost.implementation_;
+      const impl = await vkPost.getImpl(false);
       const iframe = vkPost.querySelector('iframe');
       const referrer = encodeURIComponent(vkPost.ownerDocument.referrer);
       const url = encodeURIComponent(
         vkPost.ownerDocument.location.href.replace(/#.*$/, '')
       );
       impl.onLayoutMeasure();
-      const startWidth = vkPost.getLayoutWidth();
+      const startWidth = vkPost.getLayoutSize().width;
       const correctIFrameSrc = `https://vk.com/widget_post.php?app=0&width=100%25&_ver=1&owner_id=1&post_id=45616&hash=Yc8_Z9pnpg8aKMZbVcD-jK45eAk&amp=1&startWidth=${startWidth}&url=${url}&referrer=${referrer}&title=AMP%20Post`;
       expect(iframe).to.not.be.null;
       const timeArgPosition = iframe.src.lastIndexOf('&');
@@ -203,18 +203,19 @@ describes.realWin(
 
     it('both::resizes amp-vk element in response to postmessages', async () => {
       const vkPoll = await createAmpVkElement(POLL_PARAMS);
-      const impl = vkPoll.implementation_;
+      const impl = await vkPoll.getImpl(false);
       const iframe = vkPoll.querySelector('iframe');
       const forceChangeHeight = env.sandbox.spy(impl, 'forceChangeHeight');
       const fakeHeight = 555;
       expect(iframe).to.not.be.null;
-      generatePostMessage(vkPoll, iframe, fakeHeight);
+      await generatePostMessage(vkPoll, iframe, fakeHeight);
       expect(forceChangeHeight).to.be.calledOnce;
       expect(forceChangeHeight.firstCall.args[0]).to.equal(fakeHeight);
     });
 
-    function generatePostMessage(ins, iframe, height) {
-      ins.implementation_.handleVkIframeMessage_({
+    async function generatePostMessage(ins, iframe, height) {
+      const impl = await ins.getImpl(false);
+      impl.handleVkIframeMessage_({
         origin: 'https://vk.com',
         source: iframe.contentWindow,
         data: JSON.stringify(['resize', [height]]),
diff --git a/extensions/amp-vk/0.1/test/validator-amp-vk.html b/extensions/amp-vk/0.1/test/validator-amp-vk.html
index 942e160403f22..a507d4af8a19c 100644
--- a/extensions/amp-vk/0.1/test/validator-amp-vk.html
+++ b/extensions/amp-vk/0.1/test/validator-amp-vk.html
@@ -20,7 +20,6 @@
   <title>VK examples</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
   <script async custom-element="amp-vk" src="https://cdn.ampproject.org/v0/amp-vk-0.1.js"></script>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/extensions/amp-vk/0.1/test/validator-amp-vk.out b/extensions/amp-vk/0.1/test/validator-amp-vk.out
index 5214dd838563e..d9868422c5b4d 100644
--- a/extensions/amp-vk/0.1/test/validator-amp-vk.out
+++ b/extensions/amp-vk/0.1/test/validator-amp-vk.out
@@ -21,7 +21,6 @@ PASS
 |    <title>VK examples</title>
 |    <link rel="canonical" href="amps.html">
 |    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-|    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
 |    <script async custom-element="amp-vk" src="https://cdn.ampproject.org/v0/amp-vk-0.1.js"></script>
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -49,4 +48,4 @@ PASS
 |        data-poll-id="274086843_1a2a465f60fff4699f">
 |    </amp-vk>
 |  </body>
-|  </html>
+|  </html>
\ No newline at end of file
diff --git a/extensions/amp-vk/OWNERS b/extensions/amp-vk/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-vk/OWNERS
+++ b/extensions/amp-vk/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-vk/amp-vk.md b/extensions/amp-vk/amp-vk.md
index 5d822eb63806a..5e1a9789c8df6 100644
--- a/extensions/amp-vk/amp-vk.md
+++ b/extensions/amp-vk/amp-vk.md
@@ -94,4 +94,4 @@ For additional information about widgets attributes, please see [VK post widget
 
 ## Validation
 
-See [amp-vk rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-vk/validator-amp-vk.protoascii) in the AMP validator specification.
+See [amp-vk rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-vk/validator-amp-vk.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-web-push/0.1/amp-web-push-config.js b/extensions/amp-web-push/0.1/amp-web-push-config.js
index 4897ef7d047f9..905669d04d5c5 100644
--- a/extensions/amp-web-push/0.1/amp-web-push-config.js
+++ b/extensions/amp-web-push/0.1/amp-web-push-config.js
@@ -16,7 +16,7 @@
 
 import {CONFIG_TAG, TAG} from './vars';
 import {dev, user, userAssert} from '../../../src/log';
-import {escapeCssSelectorIdent} from '../../../src/css';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {parseUrlDeprecated} from '../../../src/url';
 import {webPushServiceForDoc} from './web-push-service';
 
diff --git a/extensions/amp-web-push/0.1/amp-web-push-helper-frame.html b/extensions/amp-web-push/0.1/amp-web-push-helper-frame.html
index 8964bd5f5bdfb..fb425d36a4c92 100644
--- a/extensions/amp-web-push/0.1/amp-web-push-helper-frame.html
+++ b/extensions/amp-web-push/0.1/amp-web-push-helper-frame.html
@@ -4,7 +4,7 @@
 
 <head>
   <meta charset="utf-8">
-  <!-- [GULP-MAGIC-REPLACE amp-web-push-helper-frame.js] -->
+  <!-- [REPLACE-SENTINEL amp-web-push-helper-frame.js] -->
 </head>
 <body>
 </body>
diff --git a/extensions/amp-web-push/0.1/amp-web-push-helper-frame.js b/extensions/amp-web-push/0.1/amp-web-push-helper-frame.js
index 8fa59203ac942..cd86d654e40d0 100644
--- a/extensions/amp-web-push/0.1/amp-web-push-helper-frame.js
+++ b/extensions/amp-web-push/0.1/amp-web-push-helper-frame.js
@@ -17,8 +17,12 @@
 import {TAG} from './vars';
 import {WindowMessenger} from './window-messenger';
 import {getMode} from '../../../src/mode';
-import {parseQueryString} from '../../../src/url.js';
-import {user} from '../../../src/log';
+import {initLogConstructor, setReportError, user} from '../../../src/log';
+import {parseQueryString} from '../../../src/core/types/string/url';
+import {reportError} from '../../../src/error-reporting';
+
+initLogConstructor();
+setReportError(reportError);
 
 /**
  * @typedef {{
@@ -375,7 +379,7 @@ export class AmpWebPushHelperFrame {
    * Sets up message listeners for messages from the AMP page and service
    * worker.
    *
-   * @param {string|null} allowedOrigin For testing purposes only. Pass in the
+   * @param {?string} allowedOrigin For testing purposes only. Pass in the
    * allowedOrigin since test environments cannot access the parent origin.
    */
   run(allowedOrigin) {
diff --git a/extensions/amp-web-push/0.1/amp-web-push-permission-dialog.html b/extensions/amp-web-push/0.1/amp-web-push-permission-dialog.html
index 7328a70063f7b..618c2b35c094d 100644
--- a/extensions/amp-web-push/0.1/amp-web-push-permission-dialog.html
+++ b/extensions/amp-web-push/0.1/amp-web-push-permission-dialog.html
@@ -137,6 +137,6 @@
       </p>
     </div>
   </div>
-  <!-- [GULP-MAGIC-REPLACE amp-web-push-permission-dialog.js] -->
+  <!-- [REPLACE-SENTINEL amp-web-push-permission-dialog.js] -->
 </body>
 </html>
diff --git a/extensions/amp-web-push/0.1/amp-web-push-permission-dialog.js b/extensions/amp-web-push/0.1/amp-web-push-permission-dialog.js
index a07348d0235e3..f7235cc1cd84d 100644
--- a/extensions/amp-web-push/0.1/amp-web-push-permission-dialog.js
+++ b/extensions/amp-web-push/0.1/amp-web-push-permission-dialog.js
@@ -16,13 +16,13 @@
 
 import {NotificationPermission, StorageKeys} from './vars';
 import {WindowMessenger} from './window-messenger';
-import {escapeCssSelectorIdent} from '../../../src/css';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {getMode} from '../../../src/mode';
 import {
   parseQueryString,
-  parseUrlDeprecated,
   tryDecodeUriComponent,
-} from '../../../src/url.js';
+} from '../../../src/core/types/string/url';
+import {parseUrlDeprecated} from '../../../src/url.js';
 
 /** @typedef {{
  *    debug: boolean,
diff --git a/extensions/amp-web-push/0.1/iframehost.js b/extensions/amp-web-push/0.1/iframehost.js
index 312d30e9286fe..4f040ff5f6a23 100644
--- a/extensions/amp-web-push/0.1/iframehost.js
+++ b/extensions/amp-web-push/0.1/iframehost.js
@@ -41,7 +41,7 @@ export class IFrameHost {
     this.url_ = url;
 
     /**
-     * @type {Element|null}
+     * @type {?Element}
      * @private
      */
     this.domElement_ = null;
diff --git a/extensions/amp-web-push/0.1/test/test-web-push-config.js b/extensions/amp-web-push/0.1/test/test-web-push-config.js
index cb6d321ff6656..4b3b8525f40b6 100644
--- a/extensions/amp-web-push/0.1/test/test-web-push-config.js
+++ b/extensions/amp-web-push/0.1/test/test-web-push-config.js
@@ -48,6 +48,7 @@ describes.realWin(
 
     function createConfigElementWithAttributes(attributes) {
       const element = env.win.document.createElement(CONFIG_TAG);
+      element.setAttribute('layout', 'nodisplay');
       element.setAttribute(
         WebPushConfigAttributes.HELPER_FRAME_URL,
         attributes[WebPushConfigAttributes.HELPER_FRAME_URL]
@@ -75,21 +76,23 @@ describes.realWin(
     }
 
     it('should fail if element does not have correct ID', () => {
-      return env.ampdoc.whenReady().then(() => {
+      return env.ampdoc.whenReady().then(async () => {
         const element = createConfigElementWithAttributes(webPushConfig);
+        const impl = await element.getImpl(false);
         element.removeAttribute('id');
         expect(() => {
-          element.implementation_.validate();
+          impl.validate();
         }).to.throw(/must have an id attribute with value/);
       });
     });
 
     it('should fail if page contains duplicate element id', () => {
-      return env.ampdoc.whenReady().then(() => {
+      return env.ampdoc.whenReady().then(async () => {
         createConfigElementWithAttributes(webPushConfig);
         const element = createConfigElementWithAttributes(webPushConfig);
+        const impl = await element.getImpl(false);
         expect(() => {
-          element.implementation_.validate();
+          impl.validate();
         }).to.throw(/only one .* element may exist on a page/i);
       });
     });
@@ -99,13 +102,14 @@ describes.realWin(
       for (const attribute in WebPushConfigAttributes) {
         const configName = WebPushConfigAttributes[attribute];
         if (configName !== WebPushConfigAttributes.SERVICE_WORKER_SCOPE) {
-          const promise = env.ampdoc.whenReady().then(() => {
+          const promise = env.ampdoc.whenReady().then(async () => {
             removeAllWebPushConfigElements();
             webPushConfig = setDefaultWebPushConfig();
             delete webPushConfig[configName];
             const element = createConfigElementWithAttributes(webPushConfig);
+            const impl = await element.getImpl(false);
             expect(() => {
-              element.implementation_.validate();
+              impl.validate();
             }).to.throw(
               new RegExp('must have a valid ' + configName + ' attribute')
             );
@@ -120,12 +124,13 @@ describes.realWin(
       const promises = [];
       for (const attribute in WebPushConfigAttributes) {
         const configName = WebPushConfigAttributes[attribute];
-        const promise = env.ampdoc.whenReady().then(() => {
+        const promise = env.ampdoc.whenReady().then(async () => {
           removeAllWebPushConfigElements();
           webPushConfig[configName] = 'http://example.com/test';
           const element = createConfigElementWithAttributes(webPushConfig);
+          const impl = await element.getImpl(false);
           expect(() => {
-            element.implementation_.validate();
+            impl.validate();
           }).to.throw(/should begin with the https:\/\/ protocol/);
         });
         promises.push(promise);
@@ -137,12 +142,13 @@ describes.realWin(
       const promises = [];
       for (const attribute in WebPushConfigAttributes) {
         const configName = WebPushConfigAttributes[attribute];
-        const promise = env.ampdoc.whenReady().then(() => {
+        const promise = env.ampdoc.whenReady().then(async () => {
           removeAllWebPushConfigElements();
           webPushConfig[configName] = 'http://example.com/';
           const element = createConfigElementWithAttributes(webPushConfig);
+          const impl = await element.getImpl(false);
           expect(() => {
-            element.implementation_.validate();
+            impl.validate();
           }).to.throw(/and point to the/);
         });
         promises.push(promise);
@@ -154,12 +160,13 @@ describes.realWin(
       const promises = [];
       for (const attribute in WebPushConfigAttributes) {
         const configName = WebPushConfigAttributes[attribute];
-        const promise = env.ampdoc.whenReady().then(() => {
+        const promise = env.ampdoc.whenReady().then(async () => {
           removeAllWebPushConfigElements();
           webPushConfig[configName] = 'www.example.com/test';
           const element = createConfigElementWithAttributes(webPushConfig);
+          const impl = await element.getImpl(false);
           expect(() => {
-            element.implementation_.validate();
+            impl.validate();
           }).to.throw(/should begin with the https:\/\/ protocol/);
         });
         promises.push(promise);
@@ -170,18 +177,20 @@ describes.realWin(
     it('should fail if attribute origins differ', () => {
       webPushConfig[WebPushConfigAttributes.HELPER_FRAME_URL] =
         'https://another-origin.com/test';
-      return env.ampdoc.whenReady().then(() => {
+      return env.ampdoc.whenReady().then(async () => {
         const element = createConfigElementWithAttributes(webPushConfig);
+        const impl = await element.getImpl(false);
         expect(() => {
-          element.implementation_.validate();
+          impl.validate();
         }).to.throw(/must all share the same origin/);
       });
     });
 
     it('should succeed for valid config', () => {
-      return env.ampdoc.whenReady().then(() => {
+      return env.ampdoc.whenReady().then(async () => {
         const element = createConfigElementWithAttributes(webPushConfig);
-        element.implementation_.validate();
+        const impl = await element.getImpl(false);
+        impl.validate();
       });
     });
   }
diff --git a/extensions/amp-web-push/0.1/test/test-web-push-permission-dialog.js b/extensions/amp-web-push/0.1/test/test-web-push-permission-dialog.js
index 09f4c2e141abb..b9842c0e47d17 100644
--- a/extensions/amp-web-push/0.1/test/test-web-push-permission-dialog.js
+++ b/extensions/amp-web-push/0.1/test/test-web-push-permission-dialog.js
@@ -35,12 +35,10 @@ describes.realWin(
 
     function setDefaultConfigParams_() {
       webPushConfig[WebPushConfigAttributes.HELPER_FRAME_URL] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.PERMISSION_DIALOG_URL
-      ] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.SERVICE_WORKER_URL
-      ] = FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.PERMISSION_DIALOG_URL] =
+        FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.SERVICE_WORKER_URL] =
+        FAKE_IFRAME_URL;
     }
 
     /**
@@ -59,12 +57,11 @@ describes.realWin(
         iframeWindow = helperIframe.contentWindow;
         iframeWindow.WindowMessenger = WindowMessenger;
         iframeWindow.AmpWebPushPermissionDialog = AmpWebPushPermissionDialog;
-        iframeWindow._ampWebPushPermissionDialog = new iframeWindow.AmpWebPushPermissionDialog(
-          {
+        iframeWindow._ampWebPushPermissionDialog =
+          new iframeWindow.AmpWebPushPermissionDialog({
             debug: true,
             windowContext: iframeWindow,
-          }
-        );
+          });
       });
     }
 
@@ -77,7 +74,8 @@ describes.realWin(
     it.skip('should detect opened as popup', () => {
       return setupPermissionDialogFrame().then(() => {
         env.sandbox./*OK*/ stub(iframeWindow, 'opener').callsFake(true);
-        const isCurrentDialogPopup = iframeWindow._ampWebPushPermissionDialog.isCurrentDialogPopup();
+        const isCurrentDialogPopup =
+          iframeWindow._ampWebPushPermissionDialog.isCurrentDialogPopup();
         expect(isCurrentDialogPopup).to.eq(true);
       });
     });
@@ -104,7 +102,7 @@ describes.realWin(
       });
     });
 
-    // TODO(jasonpang): This fails on master under headless Chrome.
+    // TODO(jasonpang): This fails during CI under headless Chrome.
     it.skip('should request notification permissions, when opened as popup', () => {
       return setupPermissionDialogFrame().then(() => {
         env.sandbox
@@ -121,7 +119,7 @@ describes.realWin(
       });
     });
 
-    // TODO(jasonpang): This fails on master under headless Chrome.
+    // TODO(jasonpang): This fails during CI under headless Chrome.
     it.skip('should request notification permissions when redirected', () => {
       return setupPermissionDialogFrame().then(() => {
         env.sandbox
@@ -142,7 +140,7 @@ describes.realWin(
       });
     });
 
-    // TODO(jasonpang): This fails on master under headless Chrome.
+    // TODO(jasonpang): This fails during CI under headless Chrome.
     it.skip('should redirect back to original site, when redirected', () => {
       let spy = null;
       return setupPermissionDialogFrame()
diff --git a/extensions/amp-web-push/0.1/test/test-web-push-service.js b/extensions/amp-web-push/0.1/test/test-web-push-service.js
index 5f98d4661ee6c..1c39a1fbf40e3 100644
--- a/extensions/amp-web-push/0.1/test/test-web-push-service.js
+++ b/extensions/amp-web-push/0.1/test/test-web-push-service.js
@@ -192,15 +192,12 @@ describes.realWin(
 
     function setDefaultConfigParams_() {
       webPushConfig[WebPushConfigAttributes.HELPER_FRAME_URL] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.PERMISSION_DIALOG_URL
-      ] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.SERVICE_WORKER_URL
-      ] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.SERVICE_WORKER_SCOPE
-      ] = FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.PERMISSION_DIALOG_URL] =
+        FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.SERVICE_WORKER_URL] =
+        FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.SERVICE_WORKER_SCOPE] =
+        FAKE_IFRAME_URL;
     }
 
     function setupHelperIframe() {
@@ -210,12 +207,11 @@ describes.realWin(
         iframeWindow = helperIframe.contentWindow;
         iframeWindow.WindowMessenger = WindowMessenger;
         iframeWindow.AmpWebPushHelperFrame = AmpWebPushHelperFrame;
-        iframeWindow._ampWebPushHelperFrame = new iframeWindow.AmpWebPushHelperFrame(
-          {
+        iframeWindow._ampWebPushHelperFrame =
+          new iframeWindow.AmpWebPushHelperFrame({
             debug: true,
             windowContext: iframeWindow,
-          }
-        );
+          });
         iframeWindow._ampWebPushHelperFrame.run(
           env.win.location.ancestorOrigins[0]
         );
@@ -244,7 +240,7 @@ describes.realWin(
       });
     });
 
-    // TODO(jasonpang): This fails on master under headless Chrome.
+    // TODO(jasonpang): This fails during CI under headless Chrome.
     it.skip('should receive reply from helper iframe for permission query', () => {
       return setupHelperIframe()
         .then(() => {
@@ -269,15 +265,12 @@ describes.realWin(
 
     function setDefaultConfigParams_() {
       webPushConfig[WebPushConfigAttributes.HELPER_FRAME_URL] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.PERMISSION_DIALOG_URL
-      ] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.SERVICE_WORKER_URL
-      ] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.SERVICE_WORKER_SCOPE
-      ] = FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.PERMISSION_DIALOG_URL] =
+        FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.SERVICE_WORKER_URL] =
+        FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.SERVICE_WORKER_SCOPE] =
+        FAKE_IFRAME_URL;
     }
 
     function setupHelperIframe() {
@@ -287,12 +280,11 @@ describes.realWin(
         iframeWindow = helperIframe.contentWindow;
         iframeWindow.WindowMessenger = WindowMessenger;
         iframeWindow.AmpWebPushHelperFrame = AmpWebPushHelperFrame;
-        iframeWindow._ampWebPushHelperFrame = new iframeWindow.AmpWebPushHelperFrame(
-          {
+        iframeWindow._ampWebPushHelperFrame =
+          new iframeWindow.AmpWebPushHelperFrame({
             debug: true,
             windowContext: iframeWindow,
-          }
-        );
+          });
         iframeWindow._ampWebPushHelperFrame.run(
           env.win.location.ancestorOrigins[0]
         );
@@ -560,15 +552,12 @@ describes.realWin(
 
     function setDefaultConfigParams_() {
       webPushConfig[WebPushConfigAttributes.HELPER_FRAME_URL] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.PERMISSION_DIALOG_URL
-      ] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.SERVICE_WORKER_URL
-      ] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.SERVICE_WORKER_SCOPE
-      ] = FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.PERMISSION_DIALOG_URL] =
+        FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.SERVICE_WORKER_URL] =
+        FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.SERVICE_WORKER_SCOPE] =
+        FAKE_IFRAME_URL;
     }
 
     function setupHelperIframe() {
@@ -578,12 +567,11 @@ describes.realWin(
         iframeWindow = helperIframe.contentWindow;
         iframeWindow.WindowMessenger = WindowMessenger;
         iframeWindow.AmpWebPushHelperFrame = AmpWebPushHelperFrame;
-        iframeWindow._ampWebPushHelperFrame = new iframeWindow.AmpWebPushHelperFrame(
-          {
+        iframeWindow._ampWebPushHelperFrame =
+          new iframeWindow.AmpWebPushHelperFrame({
             debug: true,
             windowContext: iframeWindow,
-          }
-        );
+          });
         iframeWindow._ampWebPushHelperFrame.run(
           env.win.location.ancestorOrigins[0]
         );
@@ -696,18 +684,16 @@ describes.realWin(
 
       const urlWithSingleParam =
         'https://a.com/?' + WebPushService.PERMISSION_POPUP_URL_FRAGMENT;
-      const newUrlWithSingleParam = webPush.removePermissionPopupUrlFragmentFromUrl(
-        urlWithSingleParam
-      );
+      const newUrlWithSingleParam =
+        webPush.removePermissionPopupUrlFragmentFromUrl(urlWithSingleParam);
       expect(newUrlWithSingleParam).to.eq('https://a.com/');
 
       const urlWithMultipleParams =
         'https://a.com/?a=1&' +
         WebPushService.PERMISSION_POPUP_URL_FRAGMENT +
         '&b=2';
-      const newUrlWithMultipleParams = webPush.removePermissionPopupUrlFragmentFromUrl(
-        urlWithMultipleParams
-      );
+      const newUrlWithMultipleParams =
+        webPush.removePermissionPopupUrlFragmentFromUrl(urlWithMultipleParams);
       expect(newUrlWithMultipleParams).to.eq('https://a.com/?a=1&b=2');
     });
   }
@@ -725,15 +711,12 @@ describes.realWin(
 
     function setDefaultConfigParams_() {
       webPushConfig[WebPushConfigAttributes.HELPER_FRAME_URL] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.PERMISSION_DIALOG_URL
-      ] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.SERVICE_WORKER_URL
-      ] = FAKE_IFRAME_URL;
-      webPushConfig[
-        WebPushConfigAttributes.SERVICE_WORKER_SCOPE
-      ] = FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.PERMISSION_DIALOG_URL] =
+        FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.SERVICE_WORKER_URL] =
+        FAKE_IFRAME_URL;
+      webPushConfig[WebPushConfigAttributes.SERVICE_WORKER_SCOPE] =
+        FAKE_IFRAME_URL;
     }
 
     function setupHelperIframe() {
@@ -743,12 +726,11 @@ describes.realWin(
         iframeWindow = helperIframe.contentWindow;
         iframeWindow.WindowMessenger = WindowMessenger;
         iframeWindow.AmpWebPushHelperFrame = AmpWebPushHelperFrame;
-        iframeWindow._ampWebPushHelperFrame = new iframeWindow.AmpWebPushHelperFrame(
-          {
+        iframeWindow._ampWebPushHelperFrame =
+          new iframeWindow.AmpWebPushHelperFrame({
             debug: true,
             windowContext: iframeWindow,
-          }
-        );
+          });
         iframeWindow._ampWebPushHelperFrame.run(
           env.win.location.ancestorOrigins[0]
         );
diff --git a/extensions/amp-web-push/0.1/web-push-service.js b/extensions/amp-web-push/0.1/web-push-service.js
index e6e9aa676d4a1..0b7cc564f94cd 100644
--- a/extensions/amp-web-push/0.1/web-push-service.js
+++ b/extensions/amp-web-push/0.1/web-push-service.js
@@ -27,12 +27,13 @@ import {Services} from '../../../src/services';
 import {WebPushWidgetVisibilities} from './amp-web-push-widget';
 import {WindowMessenger} from './window-messenger';
 import {dev, user} from '../../../src/log';
-import {escapeCssSelectorIdent} from '../../../src/css';
+import {escapeCssSelectorIdent} from '../../../src/core/dom/css';
 import {getMode} from '../../../src/mode';
 import {getServicePromiseForDoc} from '../../../src/service';
 import {installStylesForDoc} from '../../../src/style-installer';
 import {openWindowDialog} from '../../../src/dom';
-import {parseQueryString, parseUrlDeprecated} from '../../../src/url';
+import {parseQueryString} from '../../../src/core/types/string/url';
+import {parseUrlDeprecated} from '../../../src/url';
 
 /** @typedef {{
  *    isControllingFrame: boolean,
@@ -62,10 +63,9 @@ export let AmpWebPushConfig;
  * @return {!Promise<!./web-push-service.WebPushService>}
  */
 export function webPushServiceForDoc(element) {
-  return /** @type {!Promise<!./web-push-service.WebPushService>} */ (getServicePromiseForDoc(
-    element,
-    SERVICE_TAG
-  ));
+  return /** @type {!Promise<!./web-push-service.WebPushService>} */ (
+    getServicePromiseForDoc(element, SERVICE_TAG)
+  );
 }
 
 /**
@@ -910,9 +910,8 @@ export class WebPushService {
 
     const permissionDialogUrlHasQueryParams =
       this.config_['permission-dialog-url'].indexOf('?') !== -1;
-    const permissionDialogUrlQueryParamPrefix = permissionDialogUrlHasQueryParams
-      ? '&'
-      : '?';
+    const permissionDialogUrlQueryParamPrefix =
+      permissionDialogUrlHasQueryParams ? '&' : '?';
     // The permission dialog URL, containing the return URL above embedded in a
     // query parameter
     const openingPopupUrl =
diff --git a/extensions/amp-web-push/0.1/window-messenger.js b/extensions/amp-web-push/0.1/window-messenger.js
index 09d08148b1d59..8498ebeb9445d 100644
--- a/extensions/amp-web-push/0.1/window-messenger.js
+++ b/extensions/amp-web-push/0.1/window-messenger.js
@@ -119,12 +119,13 @@ export class WindowMessenger {
         );
         return;
       }
-      this.onListenConnectionMessageReceivedProc_ = this.onListenConnectionMessageReceived_.bind(
-        this,
-        allowedOrigins,
-        resolve,
-        reject
-      );
+      this.onListenConnectionMessageReceivedProc_ =
+        this.onListenConnectionMessageReceived_.bind(
+          this,
+          allowedOrigins,
+          resolve,
+          reject
+        );
       this.window_.addEventListener(
         'message',
         /** @type {(function (Event): (boolean|undefined)|null)} */
@@ -226,9 +227,8 @@ export class WindowMessenger {
     );
     // Get the message port
     this.messagePort_ = messagePorts[0];
-    this.onChannelMessageReceivedProc_ = this.onChannelMessageReceived_.bind(
-      this
-    );
+    this.onChannelMessageReceivedProc_ =
+      this.onChannelMessageReceived_.bind(this);
     this.messagePort_.addEventListener(
       'message',
       this.onChannelMessageReceivedProc_,
@@ -272,12 +272,13 @@ export class WindowMessenger {
       }
       this.channel_ = new MessageChannel();
       this.messagePort_ = this.channel_.port1;
-      this.onConnectConnectionMessageReceivedProc_ = this.onConnectConnectionMessageReceived_.bind(
-        this,
-        this.messagePort_,
-        expectedRemoteOrigin,
-        resolve
-      );
+      this.onConnectConnectionMessageReceivedProc_ =
+        this.onConnectConnectionMessageReceived_.bind(
+          this,
+          this.messagePort_,
+          expectedRemoteOrigin,
+          resolve
+        );
       this.messagePort_.addEventListener(
         'message',
         this.onConnectConnectionMessageReceivedProc_
@@ -323,9 +324,8 @@ export class WindowMessenger {
       this.onConnectConnectionMessageReceivedProc_
     );
     // Install a new message handler for receiving normal messages
-    this.onChannelMessageReceivedProc_ = this.onChannelMessageReceived_.bind(
-      this
-    );
+    this.onChannelMessageReceivedProc_ =
+      this.onChannelMessageReceived_.bind(this);
     messagePort.addEventListener(
       'message',
       this.onChannelMessageReceivedProc_,
diff --git a/extensions/amp-web-push/OWNERS b/extensions/amp-web-push/OWNERS
index de71c6f079f17..0baaea9812f71 100644
--- a/extensions/amp-web-push/OWNERS
+++ b/extensions/amp-web-push/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/extensions/amp-web-push/amp-web-push.md b/extensions/amp-web-push/amp-web-push.md
index 1791f8971d680..d2640ef270092 100644
--- a/extensions/amp-web-push/amp-web-push.md
+++ b/extensions/amp-web-push/amp-web-push.md
@@ -24,12 +24,10 @@ limitations under the License.
 
 # amp-web-push
 
-## Behavior
+## Usage
 
 Developers compose widgets that appear based on a user's subscription state. Widgets are composed of AMP elements and can be as simple as a button or a text link.
 
-_Example_
-
 Clicking the subscription widget pops up a page prompting the user for notification permissions and signals the service worker (configured below) to subscribe the user to push in the background. Clicking the unsubscription widget signals the worker to unsubscribe the user from push in the background.
 
 ```html
@@ -56,18 +54,7 @@ Clicking the subscription widget pops up a page prompting the user for notificat
 </amp-web-push-widget>
 ```
 
-## Attributes
-
-<table>
-  <tr>
-    <td width="40%"><strong>visibility (required)</strong></td>
-    <td>Describes when the widget is shown. The value can be one of <code>unsubscribed</code>, <code>subscribed</code>, or <code>blocked</code>.<br>
-Widgets are initially hidden while the user's subscription state is computed.</td>
-  </tr>
-
-</table>
-
-## Configuration
+### Configuration
 
 The `amp-web-push` component requires extra integration on your site. You will need to upload two HTML files (provided) on your site as well as an amp-web-push compatible service worker JavaScript file. These three files form the configuration described below.
 
@@ -128,7 +115,7 @@ All properties are <strong>required</strong>, and all URLs must begin with the s
         This service worker runs in the background and subscribes and unsubscribes the user from notifications.
       </p>
       <p>
-         If you develop a custom push solution, <a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-web-push/0.1/amp-web-push.service-worker.js">see this example on how to make your service worker compatible with amp-web-push</a>.
+         If you develop a custom push solution, <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-web-push/0.1/amp-web-push.service-worker.js">see this example on how to make your service worker compatible with amp-web-push</a>.
        </p>
     </td>
   </tr>
@@ -142,6 +129,14 @@ All properties are <strong>required</strong>, and all URLs must begin with the s
   </tr>
 </table>
 
+## Attributes
+
+### visibility (required)
+
+Describes when the widget is shown. The value can be one of `unsubscribed`, `subscribed`, or `blocked`.
+
+Widgets are initially hidden while the user's subscription state is computed.
+
 ## Validation
 
-See [amp-web-push rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-web-push/validator-amp-web-push.protoascii) in the AMP validator specification.
+See [amp-web-push rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-web-push/validator-amp-web-push.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-web-push/validator-amp-web-push.protoascii b/extensions/amp-web-push/validator-amp-web-push.protoascii
index 1a6fbca2518a3..9a850dea5ee34 100644
--- a/extensions/amp-web-push/validator-amp-web-push.protoascii
+++ b/extensions/amp-web-push/validator-amp-web-push.protoascii
@@ -64,7 +64,7 @@ tags: {  # <amp-web-push>
     }
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-web-push"
+  spec_url: "https://amp.dev/documentation/components/amp-web-push/"
   amp_layout: {
     supported_layouts: NODISPLAY
   }
@@ -81,7 +81,7 @@ tags: {  # <amp-web-push-widget>
     value: "unsubscribed"
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-web-push"
+  spec_url: "https://amp.dev/documentation/components/amp-web-push/"
   amp_layout: {
     supported_layouts: FIXED
   }
diff --git a/extensions/amp-wistia-player/0.1/amp-wistia-player.js b/extensions/amp-wistia-player/0.1/amp-wistia-player.js
index 1e13404004e82..59199b3929ab8 100644
--- a/extensions/amp-wistia-player/0.1/amp-wistia-player.js
+++ b/extensions/amp-wistia-player/0.1/amp-wistia-player.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
 import {
@@ -27,6 +27,7 @@ import {
 } from '../../../src/iframe-video';
 import {dev, userAssert} from '../../../src/log';
 import {
+  dispatchCustomEvent,
   fullscreenEnter,
   fullscreenExit,
   isFullscreenElement,
@@ -119,7 +120,7 @@ class AmpWistiaPlayer extends AMP.BaseElement {
     const loaded = this.loadPromise(this.iframe_).then(() => {
       // Tell Wistia Player we want to receive messages
       this.listenToFrame_();
-      element.dispatchCustomEvent(VideoEvents.LOAD);
+      dispatchCustomEvent(element, VideoEvents.LOAD);
     });
 
     this.playerReadyResolver_(loaded);
@@ -143,11 +144,6 @@ class AmpWistiaPlayer extends AMP.BaseElement {
     return true;
   }
 
-  /** @override */
-  viewportCallback(visible) {
-    this.element.dispatchCustomEvent(VideoEvents.VISIBILITY, {visible});
-  }
-
   /** @override */
   pauseCallback() {
     if (this.iframe_) {
@@ -194,7 +190,7 @@ class AmpWistiaPlayer extends AMP.BaseElement {
 
     if (playerEvent == 'mutechange') {
       const isMuted = data['args'] ? data['args'][1] : undefined;
-      element.dispatchCustomEvent(mutedOrUnmutedEvent(isMuted));
+      dispatchCustomEvent(element, mutedOrUnmutedEvent(isMuted));
       return;
     }
   }
diff --git a/extensions/amp-wistia-player/0.1/test/test-amp-wistia-player.js b/extensions/amp-wistia-player/0.1/test/test-amp-wistia-player.js
index d829ee01262b4..82951e701f040 100644
--- a/extensions/amp-wistia-player/0.1/test/test-amp-wistia-player.js
+++ b/extensions/amp-wistia-player/0.1/test/test-amp-wistia-player.js
@@ -15,6 +15,7 @@
  */
 
 import '../amp-wistia-player';
+import * as dom from '../../../../src/dom';
 
 describes.realWin(
   'amp-wistia-player',
@@ -38,26 +39,88 @@ describes.realWin(
       wistiaEmbed.setAttribute('height', '360');
       doc.body.appendChild(wistiaEmbed);
       return wistiaEmbed
-        .build()
+        .buildInternal()
         .then(() => wistiaEmbed.layoutCallback())
         .then(() => wistiaEmbed);
     }
 
-    it('renders', () => {
-      return getWistiaEmbed('u8p9wq6mq8').then((wistiaEmbed) => {
-        const iframe = wistiaEmbed.querySelector('iframe');
-        expect(iframe).to.not.be.null;
-        expect(iframe.tagName).to.equal('IFRAME');
-        expect(iframe.src).to.equal(
-          'https://fast.wistia.net/embed/iframe/u8p9wq6mq8'
+    describe('rendering', () => {
+      it('renders', () => {
+        return getWistiaEmbed('u8p9wq6mq8').then((wistiaEmbed) => {
+          const iframe = wistiaEmbed.querySelector('iframe');
+          expect(iframe).to.not.be.null;
+          expect(iframe.tagName).to.equal('IFRAME');
+          expect(iframe.src).to.equal(
+            'https://fast.wistia.net/embed/iframe/u8p9wq6mq8'
+          );
+        });
+      });
+
+      it('requires data-media-hashed-id', () => {
+        return getWistiaEmbed('').should.eventually.be.rejectedWith(
+          /The data-media-hashed-id attribute is required for/
         );
       });
+
+      it('removes iframe after unlayoutCallback', async () => {
+        const player = await getWistiaEmbed('u8p9wq6mq8');
+        const playerIframe = player.querySelector('iframe');
+        expect(playerIframe).to.not.be.null;
+
+        const impl = await player.getImpl(false);
+        impl.unlayoutCallback();
+        expect(player.querySelector('iframe')).to.be.null;
+        expect(impl.iframe_).to.be.null;
+      });
     });
 
-    it('requires data-media-hashed-id', () => {
-      return getWistiaEmbed('').should.eventually.be.rejectedWith(
-        /The data-media-hashed-id attribute is required for/
-      );
+    describe('methods', () => {
+      let impl;
+      beforeEach(async () => {
+        const player = await getWistiaEmbed('u8p9wq6mq8');
+        impl = await player.getImpl(false);
+      });
+
+      it('is interactive', () => {
+        expect(impl.isInteractive()).to.be.true;
+      });
+
+      it('plays', () => {
+        const spy = env.sandbox.spy(impl, 'sendCommand_');
+        impl.play();
+        expect(spy).to.be.calledWith('amp-play');
+      });
+
+      it('can pause', () => {
+        const spy = env.sandbox.spy(impl, 'sendCommand_');
+        impl.pause();
+        expect(spy).to.be.calledWith('amp-pause');
+      });
+
+      it('can mute', () => {
+        const spy = env.sandbox.spy(impl, 'sendCommand_');
+        impl.mute();
+        expect(spy).calledWith('amp-mute');
+      });
+
+      it('can unmute', () => {
+        const spy = env.sandbox.spy(impl, 'sendCommand_');
+        impl.unmute();
+        expect(spy).calledWith('amp-unmute');
+      });
+
+      it('can enter fullscreen', () => {
+        const spy = env.sandbox.spy(dom, 'fullscreenEnter');
+        impl.fullscreenEnter();
+        expect(spy).calledWith(impl.iframe_);
+      });
+
+      it('can exit fullscreen', () => {
+        const spy = env.sandbox.spy(dom, 'fullscreenExit');
+        impl.fullscreenExit();
+        expect(spy).calledWith(impl.iframe_);
+        expect(impl.isFullscreen()).to.be.false;
+      });
     });
   }
 );
diff --git a/extensions/amp-wistia-player/OWNERS b/extensions/amp-wistia-player/OWNERS
index defb1c60b8b1c..18d59091f51a6 100644
--- a/extensions/amp-wistia-player/OWNERS
+++ b/extensions/amp-wistia-player/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'chen-anders'}, {name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'chen-anders'}, {name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-yotpo/0.1/amp-yotpo.js b/extensions/amp-yotpo/0.1/amp-yotpo.js
index 331f7384dc6e2..129861c19ac92 100644
--- a/extensions/amp-yotpo/0.1/amp-yotpo.js
+++ b/extensions/amp-yotpo/0.1/amp-yotpo.js
@@ -84,6 +84,7 @@ export class AmpYotpo extends AMP.BaseElement {
   /** @override */
   layoutCallback() {
     const iframe = getIframe(this.win, this.element, 'yotpo');
+    iframe.title = this.element.title || 'Yotpo widget';
     this.applyFillContent(iframe);
 
     const unlisten = listenFor(
diff --git a/extensions/amp-yotpo/0.1/test/test-amp-yotpo.js b/extensions/amp-yotpo/0.1/test/test-amp-yotpo.js
index e70f3191e115c..31a461922b174 100644
--- a/extensions/amp-yotpo/0.1/test/test-amp-yotpo.js
+++ b/extensions/amp-yotpo/0.1/test/test-amp-yotpo.js
@@ -53,7 +53,7 @@ describes.realWin(
       ampYotpo.setAttribute('data-widget-type', opts.widgetType);
       doc.body.appendChild(ampYotpo);
       return ampYotpo
-        .build()
+        .buildInternal()
         .then(() => ampYotpo.layoutCallback())
         .then(() => ampYotpo);
     }
diff --git a/extensions/amp-yotpo/0.1/test/validator-amp-yotpo.out b/extensions/amp-yotpo/0.1/test/validator-amp-yotpo.out
index 3089b89ef6139..96e171eca5a1f 100644
--- a/extensions/amp-yotpo/0.1/test/validator-amp-yotpo.out
+++ b/extensions/amp-yotpo/0.1/test/validator-amp-yotpo.out
@@ -41,7 +41,7 @@ FAIL
 |    <!-- Invalid: Missing data-app-key attribute. -->
 |    <amp-yotpo
 >>   ^~~~~~~~~
-amp-yotpo/0.1/test/validator-amp-yotpo.html:41:2 The mandatory attribute 'data-app-key' is missing in tag 'amp-yotpo'. (see https://amp.dev/documentation/components/amp-yotpo)
+amp-yotpo/0.1/test/validator-amp-yotpo.html:41:2 The mandatory attribute 'data-app-key' is missing in tag 'amp-yotpo'. (see https://amp.dev/documentation/components/amp-yotpo/)
 |      layout="responsive"
 |      height="100"
 |      width="550"
@@ -51,7 +51,7 @@ amp-yotpo/0.1/test/validator-amp-yotpo.html:41:2 The mandatory attribute 'data-a
 |    <!-- Invalid: Missing data-widget-type attribute. -->
 |    <amp-yotpo
 >>   ^~~~~~~~~
-amp-yotpo/0.1/test/validator-amp-yotpo.html:49:2 The mandatory attribute 'data-widget-type' is missing in tag 'amp-yotpo'. (see https://amp.dev/documentation/components/amp-yotpo)
+amp-yotpo/0.1/test/validator-amp-yotpo.html:49:2 The mandatory attribute 'data-widget-type' is missing in tag 'amp-yotpo'. (see https://amp.dev/documentation/components/amp-yotpo/)
 |      layout="responsive"
 |      height="100"
 |      width="550"
@@ -61,7 +61,7 @@ amp-yotpo/0.1/test/validator-amp-yotpo.html:49:2 The mandatory attribute 'data-w
 |    <!-- Invalid: illegal layout. -->
 |    <amp-yotpo
 >>   ^~~~~~~~~
-amp-yotpo/0.1/test/validator-amp-yotpo.html:57:2 The specified layout 'CONTAINER' is not supported by tag 'amp-yotpo'. (see https://amp.dev/documentation/components/amp-yotpo)
+amp-yotpo/0.1/test/validator-amp-yotpo.html:57:2 The specified layout 'CONTAINER' is not supported by tag 'amp-yotpo'. (see https://amp.dev/documentation/components/amp-yotpo/)
 |      layout="container"
 |      height="100"
 |      width="550">
diff --git a/extensions/amp-yotpo/OWNERS b/extensions/amp-yotpo/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-yotpo/OWNERS
+++ b/extensions/amp-yotpo/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-yotpo/amp-yotpo.md b/extensions/amp-yotpo/amp-yotpo.md
index b1996886c1481..cc41faa4f76fe 100644
--- a/extensions/amp-yotpo/amp-yotpo.md
+++ b/extensions/amp-yotpo/amp-yotpo.md
@@ -71,6 +71,10 @@ _Example: Display the reviews widget_
     <td width="40%"><strong>data-** (optional)</strong></td>
     <td>Each Yotpo widget has optional data attributes. For example, the reviews widget has an optional attribute named <code>product-id</code>. Refer to <a href="https://support.yotpo.com/en/on-site">Yottpo's documentation</a> for which attributes to specify.<br>
 When using the <code>amp-yotpo</code> extension, for each corresponding Yotpo attribute prepend <code>data</code> to the attribute. For example, the <code>product-id</code> attribute becomes <code>data-product-id</code>.</td>
+  </tr>
+   <tr>
+    <td width="40%"><strong>title (optional)</strong></td>
+    <td>Define a <code>title</code> attribute for the component. The default is <code>Yotpo widget</code>.</td>
   </tr>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>
@@ -80,4 +84,4 @@ When using the <code>amp-yotpo</code> extension, for each corresponding Yotpo at
 
 ## Validation
 
-See [amp-yotpo rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-yotpo/validator-amp-yotpo.protoascii) in the AMP validator specification.
+See [amp-yotpo rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-yotpo/validator-amp-yotpo.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-yotpo/validator-amp-yotpo.protoascii b/extensions/amp-yotpo/validator-amp-yotpo.protoascii
index 03a19f6bdc492..abf329a991eaf 100644
--- a/extensions/amp-yotpo/validator-amp-yotpo.protoascii
+++ b/extensions/amp-yotpo/validator-amp-yotpo.protoascii
@@ -16,7 +16,6 @@
 
 tags: {  # amp-yotpo
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   extension_spec: {
     name: "amp-yotpo"
@@ -24,15 +23,14 @@ tags: {  # amp-yotpo
     version: "latest"
   }
   attr_lists: "common-extension-attrs"
-  spec_url: "https://amp.dev/documentation/components/amp-yotpo"
+  spec_url: "https://amp.dev/documentation/components/amp-yotpo/"
 }
 tags: {  # <amp-yotpo>
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "AMP-YOTPO"
   requires_extension: "amp-yotpo"
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-yotpo"
+  spec_url: "https://amp.dev/documentation/components/amp-yotpo/"
   attrs: {
     name: "data-app-key"
     mandatory: true
diff --git a/extensions/amp-youtube/0.1/amp-youtube.js b/extensions/amp-youtube/0.1/amp-youtube.js
index 38e421dd0b498..95a4a335a8042 100644
--- a/extensions/amp-youtube/0.1/amp-youtube.js
+++ b/extensions/amp-youtube/0.1/amp-youtube.js
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {PauseHelper} from '../../../src/utils/pause-helper';
 import {Services} from '../../../src/services';
 import {VideoEvents} from '../../../src/video-interface';
 import {addParamsToUrl} from '../../../src/url';
@@ -28,8 +29,9 @@ import {
   redispatch,
 } from '../../../src/iframe-video';
 import {dev, userAssert} from '../../../src/log';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {
+  dispatchCustomEvent,
   fullscreenEnter,
   fullscreenExit,
   getDataParamsFromAttributes,
@@ -107,6 +109,9 @@ class AmpYoutube extends AMP.BaseElement {
 
     /** @private {?Function} */
     this.unlistenLooping_ = null;
+
+    /** @private @const */
+    this.pauseHelper_ = new PauseHelper(this.element);
   }
 
   /**
@@ -141,11 +146,6 @@ class AmpYoutube extends AMP.BaseElement {
     return 0.75;
   }
 
-  /** @override */
-  viewportCallback(visible) {
-    this.element.dispatchCustomEvent(VideoEvents.VISIBILITY, {visible});
-  }
-
   /** @override */
   buildCallback() {
     this.videoid_ = this.getVideoId_();
@@ -156,14 +156,6 @@ class AmpYoutube extends AMP.BaseElement {
     this.playerReadyPromise_ = deferred.promise;
     this.playerReadyResolver_ = deferred.resolve;
 
-    // TODO(aghassemi, #3216): amp-youtube has a special case where 404s are not
-    // easily caught hence the following hacky-solution.
-    // Please don't follow this behavior in other extensions, instead
-    // see BaseElement.createPlaceholderCallback.
-    if (!this.getPlaceholder() && this.videoid_) {
-      this.buildImagePlaceholder_();
-    }
-
     installVideoManagerForDoc(this.element);
   }
 
@@ -173,19 +165,11 @@ class AmpYoutube extends AMP.BaseElement {
    */
   getEmbedUrl_() {
     this.assertDatasourceExists_();
-    let urlSuffix = '';
-    if (this.getCredentials_() === 'omit') {
-      urlSuffix = '-nocookie';
-    }
+    const urlSuffix = this.getCredentials_() === 'omit' ? '-nocookie' : '';
     const baseUrl = `https://www.youtube${urlSuffix}.com/embed/`;
-    let descriptor = '';
-    if (this.videoid_) {
-      descriptor = `${encodeURIComponent(this.videoid_ || '')}?`;
-    } else {
-      descriptor =
-        'live_stream?channel=' +
-        `${encodeURIComponent(this.liveChannelid_ || '')}&`;
-    }
+    const descriptor = this.videoid_
+      ? `${encodeURIComponent(this.videoid_ || '')}?`
+      : `live_stream?channel=${encodeURIComponent(this.liveChannelid_ || '')}&`;
     return `${baseUrl}${descriptor}enablejsapi=1&amp=1`;
   }
 
@@ -265,6 +249,7 @@ class AmpYoutube extends AMP.BaseElement {
   layoutCallback() {
     // See https://developers.google.com/youtube/iframe_api_reference
     const iframe = createFrameFor(this, this.getVideoIframeSrc_());
+    iframe.title = this.element.title || 'YouTube video';
 
     // This is temporary until M74 launches.
     // TODO(aghassemi, #21247)
@@ -302,7 +287,7 @@ class AmpYoutube extends AMP.BaseElement {
       .then(() => {
         // Tell YT that we want to receive messages
         this.listenToFrame_();
-        this.element.dispatchCustomEvent(VideoEvents.LOAD);
+        dispatchCustomEvent(this.element, VideoEvents.LOAD);
       });
     this.playerReadyResolver_(loaded);
     return loaded;
@@ -326,6 +311,9 @@ class AmpYoutube extends AMP.BaseElement {
     const deferred = new Deferred();
     this.playerReadyPromise_ = deferred.promise;
     this.playerReadyResolver_ = deferred.resolve;
+
+    this.pauseHelper_.updatePlaying(false);
+
     return true; // Call layoutCallback again.
   }
 
@@ -433,6 +421,16 @@ class AmpYoutube extends AMP.BaseElement {
 
     const playerState = info['playerState'];
     if (eventType == 'infoDelivery' && playerState != null) {
+      switch (playerState) {
+        case PlayerStates.PLAYING:
+          this.pauseHelper_.updatePlaying(true);
+          break;
+        case PlayerStates.PAUSED:
+        case PlayerStates.ENDED:
+          this.pauseHelper_.updatePlaying(false);
+          break;
+      }
+
       redispatch(element, playerState.toString(), {
         [PlayerStates.PLAYING]: VideoEvents.PLAYING,
         [PlayerStates.PAUSED]: VideoEvents.PAUSE,
@@ -448,13 +446,13 @@ class AmpYoutube extends AMP.BaseElement {
         return;
       }
       this.muted_ = muted;
-      element.dispatchCustomEvent(mutedOrUnmutedEvent(this.muted_));
+      dispatchCustomEvent(element, mutedOrUnmutedEvent(this.muted_));
       return;
     }
 
     if (eventType == 'initialDelivery') {
       this.info_ = info;
-      element.dispatchCustomEvent(VideoEvents.LOADEDMETADATA);
+      dispatchCustomEvent(element, VideoEvents.LOADEDMETADATA);
       return;
     }
 
@@ -482,8 +480,12 @@ class AmpYoutube extends AMP.BaseElement {
     );
   }
 
-  /** @private */
-  buildImagePlaceholder_() {
+  /** @override */
+  createPlaceholderCallback() {
+    if (!this.videoid_) {
+      return null;
+    }
+
     const {element: el} = this;
     const imgPlaceholder = htmlFor(el)`<img placeholder referrerpolicy=origin>`;
     const videoid = dev().assertString(this.videoid_);
@@ -499,10 +501,9 @@ class AmpYoutube extends AMP.BaseElement {
     // TODO(mkhatib): Maybe add srcset to allow the browser to
     // load the needed size or even better match YTPlayer logic for loading
     // player thumbnails for different screen sizes for a cache win!
-    imgPlaceholder.src =
-      'https://i.ytimg.com/vi/' +
-      encodeURIComponent(videoid) +
-      '/sddefault.jpg#404_is_fine';
+    imgPlaceholder.src = `https://i.ytimg.com/vi/${encodeURIComponent(
+      videoid
+    )}/sddefault.jpg#404_is_fine`;
 
     if (imgPlaceholder.hasAttribute('aria-label')) {
       imgPlaceholder.setAttribute(
@@ -513,7 +514,6 @@ class AmpYoutube extends AMP.BaseElement {
       imgPlaceholder.setAttribute('alt', 'Loading video');
     }
     this.applyFillContent(imgPlaceholder);
-    el.appendChild(imgPlaceholder);
 
     // Because sddefault.jpg isn't available for all videos, we try to load
     // it and fallback to hqdefault.jpg.
@@ -531,10 +531,9 @@ class AmpYoutube extends AMP.BaseElement {
         }
       })
       .catch(() => {
-        imgPlaceholder.src =
-          'https://i.ytimg.com/vi/' +
-          encodeURIComponent(videoid) +
-          '/hqdefault.jpg';
+        imgPlaceholder.src = `https://i.ytimg.com/vi/${encodeURIComponent(
+          videoid
+        )}/hqdefault.jpg`;
         return this.loadPromise(imgPlaceholder);
       })
       .then(() => {
@@ -544,6 +543,8 @@ class AmpYoutube extends AMP.BaseElement {
           });
         });
       });
+
+    return imgPlaceholder;
   }
 
   // VideoInterface Implementation. See ../src/video-interface.VideoInterface
diff --git a/extensions/amp-youtube/0.1/amp-youtube.md b/extensions/amp-youtube/0.1/amp-youtube.md
new file mode 100644
index 0000000000000..e53f585f6f36e
--- /dev/null
+++ b/extensions/amp-youtube/0.1/amp-youtube.md
@@ -0,0 +1,131 @@
+---
+$category@: media
+formats:
+  - websites
+  - ads
+teaser:
+  text: Displays a YouTube video.
+---
+
+<!---
+Copyright 2015 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.
+-->
+
+# amp-youtube
+
+## Usage
+
+Displays a YouTube video.
+
+With the responsive layout, the width and height from the example should yield correct layouts for 16:9 aspect ratio videos:
+
+```html
+<amp-youtube
+  data-videoid="mGENRKrdoGY"
+  layout="responsive"
+  width="480"
+  height="270"
+></amp-youtube>
+```
+
+```html
+<amp-youtube
+  id="myLiveChannel"
+  data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
+  width="358"
+  height="204"
+  layout="responsive"
+>
+  <amp-img
+    src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
+    placeholder
+    layout="fill"
+  />
+</amp-youtube>
+```
+
+## Attributes
+
+### autoplay
+
+If this attribute is present, and the browser supports autoplay:
+
+<ul>
+  <li>the video is automatically muted before autoplay starts
+  </li>
+  <li>when the video is scrolled out of view, the video is paused
+  </li>
+  <li>when the video is scrolled into view, the video resumes playback
+  </li>
+  <li>when the user taps the video, the video is unmuted
+  </li>
+  <li>if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.
+  </li>
+</ul>
+
+### loop
+
+If this attribute is present, the video or playlist will play again (from the beginning) once it ends.
+
+### data-videoid
+
+The YouTube video id found in every YouTube video page URL.
+
+For example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.
+
+### data-live-channelid
+
+The Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.
+
+### data-param-\*
+
+All `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.
+
+Keys and values will be URI encoded. Keys will be camel cased
+
+`data-param-controls=1` becomes `&controls=1`
+
+See [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.
+
+[tip type="note"]
+Use the `autoplay` attribute instead of `data-param-autoplay` and the `loop` attribute instead of `data-param-loop` since both the autoplay and looping behaviors are handled internally by AMP instead of the Youtube player.
+[/tip]
+
+### dock
+
+Requires [`amp-video-docking`](../../amp-video-docking/amp-video-docking.md) component. If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
+
+### credentials (optional)
+
+Defines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/).
+
+-   Supported values: `omit`, `include`
+-   Default: `include`
+
+If you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.
+
+Usually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.
+
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"YouTube video"`.
+
+### common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
+
+## Validation
+
+See [amp-youtube rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-youtube/validator-amp-youtube.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-youtube/0.1/storybook/Basic.amp.js b/extensions/amp-youtube/0.1/storybook/Basic.amp.js
index a84be681c1b3b..b59c970188adc 100644
--- a/extensions/amp-youtube/0.1/storybook/Basic.amp.js
+++ b/extensions/amp-youtube/0.1/storybook/Basic.amp.js
@@ -15,48 +15,57 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {storiesOf} from '@storybook/preact';
 import {text, withKnobs} from '@storybook/addon-knobs';
-import {withA11y} from '@storybook/addon-a11y';
-import withAmp from '../../../../build-system/tasks/storybook/amp-env/decorator.js';
-
-// eslint-disable-next-line
-storiesOf('Youtube', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withA11y)
-  .addDecorator(withAmp)
-  .addParameters({extensions: [{name: 'amp-youtube', version: 0.1}]})
-  .add('default', () => {
-    const videoId = text('Video ID', 'mGENRKrdoGY');
-    return (
-      <amp-youtube
-        data-videoid={videoId}
-        layout="fixed"
-        width="480"
-        height="270"
-      ></amp-youtube>
-    );
-  })
-  .add('responsive', () => {
-    const videoId = text('Video ID', 'mGENRKrdoGY');
-    return (
-      <amp-youtube
-        data-videoid={videoId}
-        layout="responsive"
-        width="480"
-        height="270"
-      ></amp-youtube>
-    );
-  })
-  .add('autoplay', () => {
-    const videoId = text('Video ID', 'mGENRKrdoGY');
-    return (
-      <amp-youtube
-        data-videoid={videoId}
-        layout="fixed"
-        width="480"
-        height="270"
-        autoplay
-      ></amp-youtube>
-    );
-  });
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-youtube-0_1',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-youtube', version: 0.1}],
+  },
+};
+
+export const Default = () => {
+  const videoId = text('Video ID', 'mGENRKrdoGY');
+  return (
+    <amp-youtube
+      data-videoid={videoId}
+      layout="fixed"
+      width="480"
+      height="270"
+    ></amp-youtube>
+  );
+};
+
+Default.storyName = 'default';
+
+export const Responsive = () => {
+  const videoId = text('Video ID', 'mGENRKrdoGY');
+  return (
+    <amp-youtube
+      data-videoid={videoId}
+      layout="responsive"
+      width="480"
+      height="270"
+    ></amp-youtube>
+  );
+};
+
+Responsive.storyName = 'responsive';
+
+export const Autoplay = () => {
+  const videoId = text('Video ID', 'mGENRKrdoGY');
+  return (
+    <amp-youtube
+      data-videoid={videoId}
+      layout="fixed"
+      width="480"
+      height="270"
+      autoplay
+    ></amp-youtube>
+  );
+};
+
+Autoplay.storyName = 'autoplay';
diff --git a/extensions/amp-youtube/0.1/test/test-amp-youtube.js b/extensions/amp-youtube/0.1/test/test-amp-youtube.js
index e6ba90976a99f..07c8d49e275b5 100644
--- a/extensions/amp-youtube/0.1/test/test-amp-youtube.js
+++ b/extensions/amp-youtube/0.1/test/test-amp-youtube.js
@@ -17,6 +17,7 @@
 import '../amp-youtube';
 import {Services} from '../../../../src/services';
 import {VideoEvents} from '../../../../src/video-interface';
+import {installResizeObserverStub} from '../../../../testing/resize-observer-stub';
 import {listenOncePromise} from '../../../../src/event-helper';
 
 const EXAMPLE_VIDEOID = 'mGENRKrdoGY';
@@ -36,11 +37,13 @@ describes.realWin(
     this.timeout(5000);
     let win, doc;
     let timer;
+    let resizeObserverStub;
 
     beforeEach(() => {
       win = env.win;
       doc = win.document;
       timer = Services.timerFor(win);
+      resizeObserverStub = installResizeObserverStub(env.sandbox, win);
     });
 
     async function getYt(attributes, opt_responsive, opt_beforeLayoutCallback) {
@@ -54,13 +57,14 @@ describes.realWin(
         yt.setAttribute('layout', 'responsive');
       }
       doc.body.appendChild(yt);
-      await yt.build();
+      await yt.buildInternal();
       if (opt_beforeLayoutCallback) {
         opt_beforeLayoutCallback(yt);
       }
       await yt.layoutCallback();
+      const impl = await yt.getImpl(false);
       const ytIframe = yt.querySelector('iframe');
-      yt.implementation_.handleYoutubeMessage_({
+      impl.handleYoutubeMessage_({
         origin: 'https://www.youtube.com',
         source: ytIframe.contentWindow,
         data: JSON.stringify({event: 'onReady'}),
@@ -91,9 +95,10 @@ describes.realWin(
 
       it('should pause if the video is playing', async () => {
         const yt = await getYt({'data-videoid': datasource});
-        env.sandbox.spy(yt.implementation_, 'pause');
-        yt.implementation_.pauseCallback();
-        expect(yt.implementation_.pause.called).to.be.true;
+        const impl = await yt.getImpl(false);
+        env.sandbox.spy(impl, 'pause');
+        impl.pauseCallback();
+        expect(impl.pause.called).to.be.true;
       });
 
       it('should pass data-param-* attributes to the iframe src', async () => {
@@ -161,11 +166,12 @@ describes.realWin(
           'data-videoid': datasource,
           'data-param-playsinline': '0',
         });
+        const impl = await yt.getImpl(false);
         const {src} = yt.querySelector('iframe');
 
         const preconnect = Services.preconnectFor(win);
         env.sandbox.spy(preconnect, 'url');
-        yt.implementation_.preconnectCallback();
+        impl.preconnectCallback();
         expect(preconnect.url).to.have.been.calledWith(
           env.sandbox.match.object, // AmpDoc
           src
@@ -177,32 +183,76 @@ describes.realWin(
         const iframe = yt.querySelector('iframe');
         await Promise.resolve();
         const p1 = listenOncePromise(yt, VideoEvents.MUTED);
-        sendFakeInfoDeliveryMessage(yt, iframe, {muted: true});
+        await sendFakeInfoDeliveryMessage(yt, iframe, {muted: true});
         await p1;
         const p2 = listenOncePromise(yt, VideoEvents.PLAYING);
-        sendFakeInfoDeliveryMessage(yt, iframe, {playerState: 1});
+        await sendFakeInfoDeliveryMessage(yt, iframe, {playerState: 1});
         await p2;
         const p3 = listenOncePromise(yt, VideoEvents.PAUSE);
-        sendFakeInfoDeliveryMessage(yt, iframe, {playerState: 2});
+        await sendFakeInfoDeliveryMessage(yt, iframe, {playerState: 2});
         await p3;
         const p4 = listenOncePromise(yt, VideoEvents.UNMUTED);
-        sendFakeInfoDeliveryMessage(yt, iframe, {muted: false});
+        await sendFakeInfoDeliveryMessage(yt, iframe, {muted: false});
         await p4;
         // Should not send the unmute event twice if already sent once.
         const p5 = listenOncePromise(yt, VideoEvents.UNMUTED).then(() => {
           assert.fail('Should not have dispatch unmute message twice');
         });
-        sendFakeInfoDeliveryMessage(yt, iframe, {muted: false});
+        await sendFakeInfoDeliveryMessage(yt, iframe, {muted: false});
         const successTimeout = timer.promise(10);
         await Promise.race([p5, successTimeout]);
         // Make sure pause and end are triggered when video ends.
         const pEnded = listenOncePromise(yt, VideoEvents.ENDED);
         const pPause = listenOncePromise(yt, VideoEvents.PAUSE);
-        sendFakeInfoDeliveryMessage(yt, iframe, {playerState: 0});
+        await sendFakeInfoDeliveryMessage(yt, iframe, {playerState: 0});
         return Promise.all([pEnded, pPause]);
       });
     }
 
+    describe('pause', () => {
+      let yt, impl, iframe;
+      let pauseCallbackSpy;
+
+      beforeEach(async () => {
+        yt = await getYt({'data-videoid': EXAMPLE_VIDEOID});
+        impl = await yt.getImpl();
+        iframe = yt.querySelector('iframe');
+        pauseCallbackSpy = env.sandbox.spy(impl, 'pauseCallback');
+      });
+
+      it('should auto-pause when playing and no size', async () => {
+        // PLAYING state.
+        await sendFakeInfoDeliveryMessage(yt, iframe, {playerState: 1});
+        // First send "size" event and then "no size".
+        resizeObserverStub.notifySync({
+          target: yt,
+          borderBoxSize: [{inlineSize: 10, blockSize: 10}],
+        });
+        resizeObserverStub.notifySync({
+          target: yt,
+          borderBoxSize: [{inlineSize: 0, blockSize: 0}],
+        });
+        expect(pauseCallbackSpy).to.be.calledOnce;
+      });
+
+      it('should NOT auto-pause when not playing', async () => {
+        // PLAYING state.
+        await sendFakeInfoDeliveryMessage(yt, iframe, {playerState: 1});
+        // PAUSE state.
+        await sendFakeInfoDeliveryMessage(yt, iframe, {playerState: 2});
+        // First send "size" event and then "no size".
+        resizeObserverStub.notifySync({
+          target: yt,
+          borderBoxSize: [{inlineSize: 10, blockSize: 10}],
+        });
+        resizeObserverStub.notifySync({
+          target: yt,
+          borderBoxSize: [{inlineSize: 0, blockSize: 0}],
+        });
+        expect(pauseCallbackSpy).to.not.be.called;
+      });
+    });
+
     it('renders for video ids', async () => {
       const yt = await getYt({'data-videoid': EXAMPLE_VIDEOID});
       const iframe = yt.querySelector('iframe');
@@ -239,22 +289,24 @@ describes.realWin(
     });
 
     it('adds an img placeholder in prerender mode if source is videoid', async () => {
-      const yt = await getYt({'data-videoid': EXAMPLE_VIDEOID}, true, function (
-        yt
-      ) {
-        const iframe = yt.querySelector('iframe');
-        expect(iframe).to.be.null;
-        const imgPlaceholder = yt.querySelector('img[placeholder]');
-        expect(imgPlaceholder).to.not.be.null;
-        expect(imgPlaceholder.className).to.not.match(/amp-hidden/);
-        expect(imgPlaceholder.src).to.be.equal(
-          `https://i.ytimg.com/vi/${EXAMPLE_VIDEOID}/sddefault.jpg#404_is_fine`
-        );
-        expect(imgPlaceholder.getAttribute('referrerpolicy')).to.equal(
-          'origin'
-        );
-        expect(imgPlaceholder.getAttribute('alt')).to.equal('Loading video');
-      });
+      const yt = await getYt(
+        {'data-videoid': EXAMPLE_VIDEOID},
+        true,
+        function (yt) {
+          const iframe = yt.querySelector('iframe');
+          expect(iframe).to.be.null;
+          const imgPlaceholder = yt.querySelector('img[placeholder]');
+          expect(imgPlaceholder).to.not.be.null;
+          expect(imgPlaceholder.className).to.not.match(/amp-hidden/);
+          expect(imgPlaceholder.src).to.be.equal(
+            `https://i.ytimg.com/vi/${EXAMPLE_VIDEOID}/sddefault.jpg#404_is_fine`
+          );
+          expect(imgPlaceholder.getAttribute('referrerpolicy')).to.equal(
+            'origin'
+          );
+          expect(imgPlaceholder.getAttribute('alt')).to.equal('Loading video');
+        }
+      );
       const iframe = yt.querySelector('iframe');
       expect(iframe).to.not.be.null;
       const imgPlaceholder = yt.querySelector('img[placeholder]');
@@ -283,19 +335,21 @@ describes.realWin(
       );
     });
 
-    it('loads only sddefault when it exists if source is videoid', async () => {
-      const yt = await getYt({'data-videoid': EXAMPLE_VIDEOID}, true, function (
-        yt
-      ) {
-        const iframe = yt.querySelector('iframe');
-        expect(iframe).to.be.null;
-        const imgPlaceholder = yt.querySelector('img[placeholder]');
-        expect(imgPlaceholder).to.not.be.null;
-        expect(imgPlaceholder.className).to.not.match(/amp-hidden/);
-        expect(imgPlaceholder.getAttribute('referrerpolicy')).to.equal(
-          'origin'
-        );
-      });
+    it('loads only default when it exists if source is videoid', async () => {
+      const yt = await getYt(
+        {'data-videoid': EXAMPLE_VIDEOID},
+        true,
+        function (yt) {
+          const iframe = yt.querySelector('iframe');
+          expect(iframe).to.be.null;
+          const imgPlaceholder = yt.querySelector('img[placeholder]');
+          expect(imgPlaceholder).to.not.be.null;
+          expect(imgPlaceholder.className).to.not.match(/amp-hidden/);
+          expect(imgPlaceholder.getAttribute('referrerpolicy')).to.equal(
+            'origin'
+          );
+        }
+      );
       const iframe = yt.querySelector('iframe');
       expect(iframe).to.not.be.null;
       const imgPlaceholder = yt.querySelector('img[placeholder]');
@@ -336,7 +390,8 @@ describes.realWin(
 
     it('should propagate attribute mutations for videoid', async () => {
       const yt = await getYt({'data-videoid': EXAMPLE_VIDEOID});
-      const spy = env.sandbox.spy(yt.implementation_, 'sendCommand_');
+      const impl = await yt.getImpl(false);
+      const spy = env.sandbox.spy(impl, 'sendCommand_');
       yt.setAttribute('data-videoid', 'lBTCB7yLs8Y');
       yt.mutatedAttributesCallback({'data-videoid': 'lBTCB7yLs8Y'});
       expect(spy).to.be.calledWith(
@@ -347,8 +402,8 @@ describes.realWin(
 
     it('should remove iframe after unlayoutCallback', async () => {
       const yt = await getYt({'data-videoid': EXAMPLE_VIDEOID});
+      const obj = await yt.getImpl(false);
       const placeholder = yt.querySelector('[placeholder]');
-      const obj = yt.implementation_;
       const unlistenSpy = env.sandbox.spy(obj, 'unlistenMessage_');
       obj.unlayoutCallback();
       expect(unlistenSpy).to.have.been.called;
@@ -357,8 +412,9 @@ describes.realWin(
       expect(placeholder).to.not.have.display('');
     });
 
-    function sendFakeInfoDeliveryMessage(yt, iframe, info) {
-      yt.implementation_.handleYoutubeMessage_({
+    async function sendFakeInfoDeliveryMessage(yt, iframe, info) {
+      const impl = await yt.getImpl(false);
+      impl.handleYoutubeMessage_({
         origin: 'https://www.youtube.com',
         source: iframe.contentWindow,
         data: JSON.stringify({
diff --git a/extensions/amp-youtube/0.1/test/validator-amp-youtube.out b/extensions/amp-youtube/0.1/test/validator-amp-youtube.out
index 63d8c577b747e..d9ea5b92ca3ca 100644
--- a/extensions/amp-youtube/0.1/test/validator-amp-youtube.out
+++ b/extensions/amp-youtube/0.1/test/validator-amp-youtube.out
@@ -75,4 +75,4 @@ amp-youtube/0.1/test/validator-amp-youtube.html:58:2 Mutually exclusive attribut
 amp-youtube/0.1/test/validator-amp-youtube.html:64:2 The attribute 'dock' requires including the 'amp-video-docking' extension JavaScript.
 |    </amp-youtube>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/extensions/amp-youtube/1.0/amp-youtube.css b/extensions/amp-youtube/1.0/amp-youtube.css
new file mode 100644
index 0000000000000..d7c9248636fca
--- /dev/null
+++ b/extensions/amp-youtube/1.0/amp-youtube.css
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/*
+ * Pre-upgrade:
+ * - display:block element
+ * - size-defined element
+ */
+amp-youtube {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Pre-upgrade: size-defining element - hide children. */
+amp-youtube:not(.i-amphtml-built) > :not([placeholder]):not(.i-amphtml-svc) {
+  display: none;
+  content-visibility: hidden;
+}
diff --git a/extensions/amp-youtube/1.0/amp-youtube.js b/extensions/amp-youtube/1.0/amp-youtube.js
new file mode 100644
index 0000000000000..283e0764b7604
--- /dev/null
+++ b/extensions/amp-youtube/1.0/amp-youtube.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {BaseElement} from './base-element';
+import {CSS} from '../../../build/amp-youtube-1.0.css';
+import {isExperimentOn} from '../../../src/experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-youtube';
+
+class AmpYoutube extends BaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-youtube'),
+      'expected global "bento" or specific "bento-youtube" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpYoutube, CSS);
+});
diff --git a/extensions/amp-youtube/1.0/base-element.js b/extensions/amp-youtube/1.0/base-element.js
new file mode 100644
index 0000000000000..6429714107af5
--- /dev/null
+++ b/extensions/amp-youtube/1.0/base-element.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright 2021 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.
+ */
+import {VideoBaseElement} from '../../amp-video/1.0/base-element';
+import {Youtube} from './component';
+
+export class BaseElement extends VideoBaseElement {}
+
+/** @override */
+BaseElement['Component'] = Youtube;
+
+/** @override */
+BaseElement['props'] = {
+  'autoplay': {attr: 'autoplay', type: 'boolean'},
+  'loop': {attr: 'loop', type: 'boolean'},
+  'controls': {attr: 'controls', type: 'boolean'},
+  'videoid': {attr: 'data-videoid'},
+  'liveChannelid': {attr: 'data-live-channelid'},
+  'dock': {attr: 'dock', media: true},
+  'credentials': {attr: 'credentials'},
+  'params': {attrPrefix: 'data-param-'},
+};
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
diff --git a/extensions/amp-youtube/1.0/component.js b/extensions/amp-youtube/1.0/component.js
new file mode 100644
index 0000000000000..5c7b39f103d9c
--- /dev/null
+++ b/extensions/amp-youtube/1.0/component.js
@@ -0,0 +1,256 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {VideoEvents} from '../../../src/video-interface';
+import {VideoIframe} from '../../amp-video/1.0/video-iframe';
+import {addParamsToUrl} from '../../../src/url';
+import {dict} from '../../../src/core/types/object';
+import {dispatchCustomEvent} from '../../../src/dom';
+import {forwardRef} from '../../../src/preact/compat';
+import {mutedOrUnmutedEvent, objOrParseJson} from '../../../src/iframe-video';
+import {useRef} from '../../../src/preact';
+
+// Correct PlayerStates taken from
+// https://developers.google.com/youtube/iframe_api_reference#Playback_status
+/**
+ * @enum {string}
+ * @private
+ */
+const PlayerStates = {
+  '-1': 'unstarted',
+  '0': 'ended',
+  '1': 'playing',
+  '2': 'pause',
+  '3': 'buffering',
+  '5': 'video_cued',
+};
+
+/**
+ * @enum {string}
+ * @private
+ */
+const methods = {
+  'play': 'playVideo',
+  'pause': 'pauseVideo',
+  'mute': 'mute',
+  'unmute': 'unMute',
+};
+
+/**
+ * @enum {number}
+ * @private
+ */
+const PlayerFlags = {
+  // Config to tell YouTube to hide annotations by default
+  HIDE_ANNOTATION: 3,
+};
+
+/** @const {!../../../src/dom.CustomEventOptionsDef} */
+const VIDEO_EVENT_OPTIONS = {bubbles: false, cancelable: false};
+
+/**
+ * Created once per component mount.
+ * The fields returned can be overridden by `infoDelivery` messages.
+ * @return {!JsonObject}
+ */
+function createDefaultInfo() {
+  return dict({
+    'currentTime': 0,
+    'duration': NaN,
+  });
+}
+
+/**
+ * @param {!YoutubeProps} props
+ * @param {{current: ?T}} ref
+ * @return {PreactDef.Renderable}
+ * @template T
+ */
+function YoutubeWithRef(
+  {autoplay, loop, videoid, liveChannelid, params = {}, credentials, ...rest},
+  ref
+) {
+  const datasourceExists =
+    !(videoid && liveChannelid) && (videoid || liveChannelid);
+
+  if (!datasourceExists) {
+    throw new Error(
+      'Exactly one of data-videoid or data-live-channelid should be present for <amp-youtube>'
+    );
+  }
+
+  let src = getEmbedUrl(credentials, videoid, liveChannelid);
+  if (!('playsinline' in params)) {
+    params['playsinline'] = '1';
+  }
+  if ('autoplay' in params) {
+    delete params['autoplay'];
+    autoplay = true;
+  }
+
+  if (autoplay) {
+    if (!('iv_load_policy' in params)) {
+      params['iv_load_policy'] = `${PlayerFlags.HIDE_ANNOTATION}`;
+    }
+
+    // Inline play must be set for autoplay regardless of original value.
+    params['playsinline'] = '1';
+  }
+
+  if ('loop' in params) {
+    loop = true;
+    delete params['loop'];
+  }
+
+  if (loop) {
+    if ('playlist' in params) {
+      params['loop'] = '1';
+    } else if ('loop' in params) {
+      delete params['loop'];
+    }
+  }
+
+  src = addParamsToUrl(src, params);
+
+  // Player state. Includes `currentTime` and `duration`.
+  const playerStateRef = useRef();
+  if (!playerStateRef.current) {
+    playerStateRef.current = createDefaultInfo();
+  }
+
+  const onMessage = ({currentTarget, data}) => {
+    const parsedData = objOrParseJson(data);
+    if (!parsedData) {
+      return;
+    }
+
+    const {'event': event, 'info': parsedInfo} = parsedData;
+
+    if (event == 'initialDelivery') {
+      dispatchVideoEvent(currentTarget, VideoEvents.LOADEDMETADATA);
+      return;
+    }
+
+    if (!parsedInfo) {
+      return;
+    }
+
+    const info = playerStateRef.current;
+    for (const key in info) {
+      if (parsedInfo[key] != null) {
+        info[key] = parsedInfo[key];
+      }
+    }
+
+    const playerState = parsedInfo['playerState'];
+    if (event == 'infoDelivery' && playerState == 0 && loop) {
+      currentTarget.contentWindow./*OK*/ postMessage(
+        JSON.stringify(
+          dict({
+            'event': 'command',
+            'func': 'playVideo',
+          })
+        ),
+        '*'
+      );
+    }
+    if (event == 'infoDelivery' && playerState != undefined) {
+      dispatchVideoEvent(currentTarget, PlayerStates[playerState.toString()]);
+    }
+    if (event == 'infoDelivery' && parsedInfo['muted']) {
+      dispatchVideoEvent(
+        currentTarget,
+        mutedOrUnmutedEvent(parsedInfo['muted'])
+      );
+      return;
+    }
+  };
+
+  return (
+    <VideoIframe
+      ref={ref}
+      {...rest}
+      autoplay={autoplay}
+      src={src}
+      onMessage={onMessage}
+      makeMethodMessage={makeMethodMessage}
+      onIframeLoad={(event) => {
+        const {currentTarget} = event;
+        dispatchVideoEvent(currentTarget, 'canplay');
+        currentTarget.contentWindow./*OK*/ postMessage(
+          JSON.stringify(
+            dict({
+              'event': 'listening',
+            })
+          ),
+          '*'
+        );
+      }}
+      sandbox="allow-scripts allow-same-origin allow-presentation"
+      playerStateRef={playerStateRef}
+    />
+  );
+}
+
+/**
+ * @param {string} credentials
+ * @param {string} videoid
+ * @param {string} liveChannelid
+ * @return {string}
+ * @private
+ */
+function getEmbedUrl(credentials, videoid, liveChannelid) {
+  let urlSuffix = '';
+  if (credentials === 'omit') {
+    urlSuffix = '-nocookie';
+  }
+  const baseUrl = `https://www.youtube${urlSuffix}.com/embed/`;
+  let descriptor = '';
+  if (videoid) {
+    descriptor = `${encodeURIComponent(videoid)}?`;
+  } else {
+    descriptor = `live_stream?channel=${encodeURIComponent(
+      liveChannelid || ''
+    )}&`;
+  }
+  return `${baseUrl}${descriptor}enablejsapi=1&amp=1`;
+}
+
+/**
+ * @param {!HTMLIFrameElement} currentTarget
+ * @param {string} name
+ */
+function dispatchVideoEvent(currentTarget, name) {
+  dispatchCustomEvent(currentTarget, name, null, VIDEO_EVENT_OPTIONS);
+}
+
+/**
+ * @param {string} method
+ * @return {!Object|string}
+ */
+function makeMethodMessage(method) {
+  return JSON.stringify(
+    dict({
+      'event': 'command',
+      'func': methods[method],
+    })
+  );
+}
+
+const Youtube = forwardRef(YoutubeWithRef);
+Youtube.displayName = 'Youtube'; // Make findable for tests.
+export {Youtube};
diff --git a/extensions/amp-youtube/1.0/component.type.js b/extensions/amp-youtube/1.0/component.type.js
new file mode 100644
index 0000000000000..7a2f51100c6a3
--- /dev/null
+++ b/extensions/amp-youtube/1.0/component.type.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/**
+ * @typedef {{
+ *   autoplay: boolean,
+ *   loop: boolean,
+ *   videoid: (string|undefined),
+ *   liveChannelid: (string|undefined),
+ *   params: Object,
+ *   credentials: (string|undefined),
+ * }}
+ */
+var YoutubeProps;
diff --git a/extensions/amp-youtube/1.0/package.json b/extensions/amp-youtube/1.0/package.json
new file mode 100644
index 0000000000000..59a786642cdc6
--- /dev/null
+++ b/extensions/amp-youtube/1.0/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@ampproject/amp-youtube",
+  "version": "VERSION",
+  "description": "AMP Youtube Component",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "main": "./dist/component.js",
+  "module": "./dist/component-preact.module.js",
+  "exports": {
+    ".": "./preact",
+    "./preact": {
+      "import": "./dist/component-preact.module.js",
+      "require": "./dist/component-preact.js"
+    },
+    "./react": {
+      "import": "./dist/component-react.module.js",
+      "require": "./dist/component-react.js"
+    }
+  },
+  "files": ["dist/*", "react.js"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml.git",
+    "directory": "extensions/amp-youtube/1.0"
+  },
+  "homepage": "https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0",
+  "peerDependencies": {
+    "preact": "^10.2.1",
+    "react": "^17.0.0"
+  }
+}
diff --git a/extensions/amp-youtube/1.0/react.js b/extensions/amp-youtube/1.0/react.js
new file mode 100644
index 0000000000000..0b2957c35c38d
--- /dev/null
+++ b/extensions/amp-youtube/1.0/react.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/* eslint-env node */
+// eslint-disable-next-line local/no-module-exports
+module.exports = require('./dist/component-react');
diff --git a/extensions/amp-youtube/1.0/storybook/Basic.amp.js b/extensions/amp-youtube/1.0/storybook/Basic.amp.js
new file mode 100644
index 0000000000000..9db2a41c2bda6
--- /dev/null
+++ b/extensions/amp-youtube/1.0/storybook/Basic.amp.js
@@ -0,0 +1,107 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {VideoElementWithActions} from '../../../amp-video/1.0/storybook/_helpers';
+import {boolean, number, text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-youtube-1_0',
+  decorators: [withKnobs, withAmp],
+  parameters: {
+    extensions: [
+      {name: 'amp-youtube', version: '1.0'},
+      {name: 'amp-accordion', version: '1.0'},
+    ],
+    experiments: ['bento'],
+  },
+};
+
+export const Default = ({id}) => {
+  const videoid = text('videoid', 'IAvf-rkzNck');
+  const layout = text('layout', 'responsive');
+  const autoplay = boolean('autoplay', false);
+  const loop = boolean('loop', false);
+  const width = number('width', 300);
+  const height = number('height', 200);
+  const credentials = text('credentials', 'include');
+  return (
+    <amp-youtube
+      id={id}
+      width={width}
+      height={height}
+      data-videoid={videoid}
+      layout={layout}
+      autoplay={autoplay}
+      loop={loop}
+      credentials={credentials}
+    ></amp-youtube>
+  );
+};
+
+export const Actions = () => {
+  const id = 'my-amp-youtube';
+  return (
+    <VideoElementWithActions id={id}>
+      <Default id={id} />
+    </VideoElementWithActions>
+  );
+};
+
+export const InsideAccordion = () => {
+  const videoid = text('videoid', 'IAvf-rkzNck');
+  const width = number('width', 300);
+  const height = number('height', 200);
+  const autoplay = boolean('autoplay', false);
+  return (
+    <amp-accordion expand-single-section>
+      <section expanded>
+        <h2>YouTube Video</h2>
+        <div>
+          <amp-youtube
+            width={width}
+            height={height}
+            data-videoid={videoid}
+            autoplay={autoplay}
+            loop
+          ></amp-youtube>
+        </div>
+      </section>
+    </amp-accordion>
+  );
+};
+
+export const InsideDetails = () => {
+  const videoid = text('videoid', 'IAvf-rkzNck');
+  const width = number('width', 300);
+  const height = number('height', 200);
+  const autoplay = boolean('autoplay', false);
+  return (
+    <details open>
+      <summary>YouTube Video</summary>
+      <amp-youtube
+        width={width}
+        height={height}
+        data-videoid={videoid}
+        autoplay={autoplay}
+        loop
+      ></amp-youtube>
+    </details>
+  );
+};
+
+Default.storyName = 'Default';
diff --git a/extensions/amp-youtube/1.0/storybook/Basic.js b/extensions/amp-youtube/1.0/storybook/Basic.js
new file mode 100644
index 0000000000000..ac262b31d012f
--- /dev/null
+++ b/extensions/amp-youtube/1.0/storybook/Basic.js
@@ -0,0 +1,178 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionSection,
+} from '../../../amp-accordion/1.0/component';
+import {Youtube} from '../component';
+import {boolean, number, object, text, withKnobs} from '@storybook/addon-knobs';
+import {useRef, useState} from '../../../../src/preact';
+
+export default {
+  title: 'YouTube',
+  component: Youtube,
+  decorators: [withKnobs],
+};
+
+const VIDEOID = 'IAvf-rkzNck';
+const LIVE_CHANNEL_ID = 'sKCkM-f2Qk4';
+
+export const _default = () => {
+  const width = number('width', 300);
+  const height = number('height', 200);
+  const videoid = text('videoid', VIDEOID);
+  const autoplay = boolean('autoplay', false);
+  const loop = boolean('loop', false);
+  const params = object('params', {});
+  const credentials = text('credentials', 'include');
+  return (
+    <Youtube
+      autoplay={autoplay}
+      loop={loop}
+      videoid={videoid}
+      params={params}
+      style={{width, height}}
+      credentials={credentials}
+    />
+  );
+};
+
+/**
+ * @param {*} props
+ * @return {*}
+ */
+function WithStateTable({autoplay, credentials, loop, params, style, videoid}) {
+  const ref = useRef(null);
+
+  const [stateTable, setStateTable] = useState(null);
+  const setCurrentStateTable = () => {
+    setStateTable(
+      <table>
+        {['autoplay', 'controls', 'loop', 'currentTime', 'duration'].map(
+          (key) => (
+            <tr key={key}>
+              <td>{key}</td>
+              <td>{ref.current[key]}</td>
+            </tr>
+          )
+        )}
+      </table>
+    );
+  };
+
+  return (
+    <>
+      <Youtube
+        ref={ref}
+        autoplay={autoplay}
+        loop={loop}
+        videoid={videoid}
+        params={params}
+        style={style}
+        credentials={credentials}
+      />
+      <p>
+        <button onClick={setCurrentStateTable}>🔄 current state</button>
+      </p>
+      {stateTable}
+    </>
+  );
+}
+
+/**
+ * @return {*}
+ */
+export function State() {
+  const width = number('width', 300);
+  const height = number('height', 200);
+  const videoid = text('videoid', VIDEOID);
+  const autoplay = boolean('autoplay', false);
+  const loop = boolean('loop', false);
+  const params = object('params', {});
+  const credentials = text('credentials', 'include');
+  return (
+    <WithStateTable
+      autoplay={autoplay}
+      loop={loop}
+      videoid={videoid}
+      params={params}
+      style={{width, height}}
+      credentials={credentials}
+    />
+  );
+}
+
+export const liveChannelId = () => {
+  const width = number('width', 300);
+  const height = number('height', 200);
+  const liveChannelid = text('liveChannelid', LIVE_CHANNEL_ID);
+  const autoplay = boolean('autoplay', false);
+  const loop = boolean('loop', false);
+  const params = object('params', {});
+  const credentials = text('credentials', 'include');
+  return (
+    <Youtube
+      autoplay={autoplay}
+      loop={loop}
+      liveChannelid={liveChannelid}
+      params={params}
+      style={{width, height}}
+      credentials={credentials}
+    />
+  );
+};
+
+export const InsideAccordion = () => {
+  const width = text('width', '320px');
+  const height = text('height', '180px');
+  const videoid = text('videoid', VIDEOID);
+  const params = object('params', {});
+  return (
+    <Accordion expandSingleSection>
+      <AccordionSection key={1} expanded>
+        <AccordionHeader>
+          <h2>Controls</h2>
+        </AccordionHeader>
+        <AccordionContent>
+          <Youtube
+            loop={true}
+            videoid={videoid}
+            params={params}
+            style={{width, height}}
+          />
+        </AccordionContent>
+      </AccordionSection>
+      <AccordionSection key={2}>
+        <AccordionHeader>
+          <h2>Autoplay</h2>
+        </AccordionHeader>
+        <AccordionContent>
+          <Youtube
+            autoplay={true}
+            loop={true}
+            videoid={videoid}
+            params={params}
+            style={{width, height}}
+          />
+        </AccordionContent>
+      </AccordionSection>
+    </Accordion>
+  );
+};
diff --git a/extensions/amp-youtube/1.0/test/test-amp-youtube.js b/extensions/amp-youtube/1.0/test/test-amp-youtube.js
new file mode 100644
index 0000000000000..cc1a69f781017
--- /dev/null
+++ b/extensions/amp-youtube/1.0/test/test-amp-youtube.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import '../amp-youtube';
+import {createElementWithAttributes} from '../../../../src/dom';
+
+import {doNotLoadExternalResourcesInTest} from '../../../../testing/iframe';
+import {toggleExperiment} from '../../../../src/experiments';
+import {waitFor} from '../../../../testing/test-helper';
+
+describes.realWin(
+  'amp-youtube-v1.0',
+  {
+    amp: {
+      extensions: ['amp-youtube:1.0'],
+    },
+  },
+  (env) => {
+    let win, doc;
+    let element;
+
+    const waitForRender = async () => {
+      await element.buildInternal();
+      const loadPromise = element.layoutCallback();
+      const shadow = element.shadowRoot;
+      await waitFor(() => shadow.querySelector('iframe'), 'iframe mounted');
+      await loadPromise;
+    };
+
+    beforeEach(() => {
+      win = env.win;
+      doc = win.document;
+      toggleExperiment(env.win, 'bento-youtube', true, true);
+      // Override global window here because Preact uses global `createElement`.
+      doNotLoadExternalResourcesInTest(window, env.sandbox);
+    });
+
+    it('renders', async () => {
+      element = createElementWithAttributes(win.document, 'amp-youtube', {
+        'data-videoid': 'IAvf-rkzNck',
+        'amp': true,
+        'height': 500,
+        'width': 500,
+        'layout': 'responsive',
+      });
+      doc.body.appendChild(element);
+      await waitForRender();
+
+      expect(element.shadowRoot.querySelector('iframe').src).to.equal(
+        'https://www.youtube.com/embed/IAvf-rkzNck?enablejsapi=1&amp=1&playsinline=1'
+      );
+    });
+  }
+);
diff --git a/extensions/amp-youtube/1.0/test/test-component.js b/extensions/amp-youtube/1.0/test/test-component.js
new file mode 100644
index 0000000000000..a6b58706d429e
--- /dev/null
+++ b/extensions/amp-youtube/1.0/test/test-component.js
@@ -0,0 +1,197 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact';
+import {Youtube} from '../component';
+import {createRef} from '../../../../src/preact';
+
+import {dispatchCustomEvent} from '../../../../src/dom';
+import {mount} from 'enzyme';
+
+describes.realWin('YouTube preact component v1.0', {}, (env) => {
+  let window, document;
+  let container;
+
+  beforeEach(() => {
+    window = env.win;
+    document = window.document;
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  it('Normal render', () => {
+    const wrapper = mount(
+      <Youtube
+        videoid="IAvf-rkzNck"
+        style={{
+          'width': 600,
+          'height': 500,
+        }}
+      />,
+      {attachTo: container}
+    );
+
+    const iframe = wrapper.find('iframe');
+
+    expect(iframe.prop('src')).to.equal(
+      'https://www.youtube.com/embed/IAvf-rkzNck?enablejsapi=1&amp=1&playsinline=1'
+    );
+
+    // Style propagated to container, but not iframe.
+    expect(wrapper.prop('style').width).to.equal(600);
+    expect(wrapper.prop('style').height).to.equal(500);
+    expect(wrapper.find('iframe').prop('style').width).to.equal('100%');
+    expect(wrapper.find('iframe').prop('style').height).to.equal('100%');
+  });
+
+  it('Pass correct param attributes to the iframe src', () => {
+    const wrapper = mount(
+      <Youtube
+        videoid="IAvf-rkzNck"
+        autoplay
+        loop
+        style={{
+          'width': 600,
+          'height': 500,
+        }}
+        params={{'myparam': 'hello world', 'loop': '1'}}
+      />,
+      {attachTo: container}
+    );
+
+    const iframe = wrapper.find('iframe');
+
+    expect(iframe.prop('src')).to.contain('&myparam=hello%20world');
+    expect(iframe.prop('src')).to.not.contain('autoplay=1');
+    // data-param-loop is black listed in favor of just loop for single videos
+    expect(iframe.prop('src')).to.not.contain('loop=1');
+    // playsinline should default to 1 if not provided.
+    expect(iframe.prop('src')).to.contain('playsinline=1');
+    expect(iframe.prop('src')).to.contain('iv_load_policy=3');
+  });
+
+  it('Keep data param: loop in iframe src for playlists', () => {
+    const wrapper = mount(
+      <Youtube
+        videoid="IAvf-rkzNck"
+        autoplay
+        loop
+        style={{
+          'width': 600,
+          'height': 500,
+        }}
+        params={{'playlist': 'IAvf-rkzNck', 'loop': '1'}}
+      />,
+      {attachTo: container}
+    );
+
+    const iframe = wrapper.find('iframe');
+
+    expect(iframe.prop('src')).to.contain('loop=1');
+  });
+
+  it('Uses privacy-enhanced mode', () => {
+    const wrapper = mount(
+      <Youtube
+        videoid="IAvf-rkzNck"
+        autoplay
+        loop
+        style={{
+          'width': 600,
+          'height': 500,
+        }}
+        credentials="omit"
+      />,
+      {attachTo: container}
+    );
+
+    const iframe = wrapper.find('iframe');
+
+    expect(iframe.prop('src')).to.equal(
+      'https://www.youtube-nocookie.com/embed/IAvf-rkzNck?enablejsapi=1&amp=1&playsinline=1&iv_load_policy=3'
+    );
+  });
+
+  it('should trigger onCanPlay when youtube iframe is loaded', () => {
+    const wrapper = mount(
+      <Youtube
+        videoid="IAvf-rkzNck"
+        autoplay
+        loop
+        style={{
+          'width': 600,
+          'height': 500,
+        }}
+        credentials="omit"
+      />,
+      {attachTo: container}
+    );
+
+    const iframe = wrapper.find('iframe').getDOMNode();
+    const onCanPlaySpy = env.sandbox.spy();
+    iframe.addEventListener('canplay', onCanPlaySpy);
+    const postMessageSpy = env.sandbox.stub(
+      iframe.contentWindow,
+      'postMessage'
+    );
+
+    dispatchCustomEvent(iframe, 'load', {bubbles: false});
+    expect(onCanPlaySpy).to.be.calledOnce;
+    expect(onCanPlaySpy.firstCall.firstArg).to.contain({bubbles: false});
+    expect(postMessageSpy).to.be.calledOnce;
+    expect(JSON.parse(postMessageSpy.firstCall.firstArg)).to.deep.equal({
+      event: 'listening',
+    });
+  });
+
+  it('exposes properties from info messages', () => {
+    const ref = createRef();
+
+    const wrapper = mount(
+      <Youtube
+        ref={ref}
+        videoid="IAvf-rkzNck"
+        shortcode="B8QaZW4AQY_"
+        style={{width: 500, height: 600}}
+      />,
+      {attachTo: document.body}
+    );
+
+    const {contentWindow} = wrapper.getDOMNode().querySelector('iframe');
+
+    expect(ref.current.currentTime).to.equal(0);
+    expect(ref.current.duration).to.be.NaN;
+
+    mockMessage(window, contentWindow, {info: {duration: 420}});
+
+    expect(ref.current.currentTime).to.equal(0);
+    expect(ref.current.duration).to.equal(420);
+
+    mockMessage(window, contentWindow, {info: {currentTime: 12.3}});
+
+    expect(ref.current.currentTime).to.equal(12.3);
+    expect(ref.current.duration).to.equal(420);
+  });
+});
+
+function mockMessage(win, source, data) {
+  const mockEvent = new CustomEvent('message');
+  mockEvent.data = JSON.stringify(data);
+  mockEvent.source = source;
+  win.dispatchEvent(mockEvent);
+  return mockEvent;
+}
diff --git a/extensions/amp-youtube/1.0/test/validator-amp-youtube.html b/extensions/amp-youtube/1.0/test/validator-amp-youtube.html
new file mode 100644
index 0000000000000..feea9eb538984
--- /dev/null
+++ b/extensions/amp-youtube/1.0/test/validator-amp-youtube.html
@@ -0,0 +1,79 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for the amp-youtube tag using 1.0. See the inline comments.
+-->
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8">
+    <link rel="canonical" href="./">
+    <meta name="viewport" content="width=device-width,minimum-scale=1">
+    <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>
+    <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-1.0.js"></script>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
+  <body>
+    <!-- Valid -->
+    <amp-youtube width="480" height="270" data-videoid="dQw4w9WgXcQ">
+    </amp-youtube>
+
+    <!-- Valid: with bindable [data-videoid] attribute -->
+    <amp-youtube
+      width="480"
+      height="270"
+      data-videoid="dQw4w9WgXcQ"
+      [data-videoid]="foo.bar"
+    >
+    </amp-youtube>
+
+    <!-- Valid: with data-live-channelid attribute -->
+    <amp-youtube
+      width="480"
+      height="270"
+      data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
+    >
+    </amp-youtube>
+
+    <!-- Valid: with loop attribute -->
+    <amp-youtube width="480" height="270" data-videoid="dQw4w9WgXcQ" loop>
+    </amp-youtube>
+
+    <!-- Invalid: data-videoid and data-live-channelid both missing. -->
+    <amp-youtube width="480" height="270"></amp-youtube>
+
+    <!-- Invalid: dimensions are missing. -->
+    <amp-youtube data-videoid="dQw4w9WgXcQ"> </amp-youtube>
+
+    <!-- Invalid: the attr value must be a video id -->
+    <amp-youtube
+      width="480"
+      height="270"
+      data-videoid="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+    >
+    </amp-youtube>
+
+    <!-- Invalid: cannot have both data-videoid and data-live-channelid -->
+    <amp-youtube
+      width="480"
+      height="270"
+      data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
+      data-videoid="dQw4w9WgXcQ"
+    >
+    </amp-youtube>
+  </body>
+</html>
diff --git a/extensions/amp-youtube/1.0/test/validator-amp-youtube.out b/extensions/amp-youtube/1.0/test/validator-amp-youtube.out
new file mode 100644
index 0000000000000..044462ef8698d
--- /dev/null
+++ b/extensions/amp-youtube/1.0/test/validator-amp-youtube.out
@@ -0,0 +1,88 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the amp-youtube tag using 1.0. See the inline comments.
+|  -->
+|  <!DOCTYPE html>
+|  <html ⚡>
+|    <head>
+|      <meta charset="utf-8">
+|      <link rel="canonical" href="./">
+|      <meta name="viewport" content="width=device-width,minimum-scale=1">
+|      <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>
+|      <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-1.0.js"></script>
+|      <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    </head>
+|    <body>
+|      <!-- Valid -->
+|      <amp-youtube width="480" height="270" data-videoid="dQw4w9WgXcQ">
+|      </amp-youtube>
+|
+|      <!-- Valid: with bindable [data-videoid] attribute -->
+|      <amp-youtube
+|        width="480"
+|        height="270"
+|        data-videoid="dQw4w9WgXcQ"
+|        [data-videoid]="foo.bar"
+|      >
+|      </amp-youtube>
+|
+|      <!-- Valid: with data-live-channelid attribute -->
+|      <amp-youtube
+|        width="480"
+|        height="270"
+|        data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
+|      >
+|      </amp-youtube>
+|
+|      <!-- Valid: with loop attribute -->
+|      <amp-youtube width="480" height="270" data-videoid="dQw4w9WgXcQ" loop>
+|      </amp-youtube>
+|
+|      <!-- Invalid: data-videoid and data-live-channelid both missing. -->
+|      <amp-youtube width="480" height="270"></amp-youtube>
+>>     ^~~~~~~~~
+amp-youtube/1.0/test/validator-amp-youtube.html:57:4 The tag 'amp-youtube' is missing a mandatory attribute - pick one of ['data-live-channelid', 'data-videoid']. (see https://amp.dev/documentation/components/amp-youtube)
+|
+|      <!-- Invalid: dimensions are missing. -->
+|      <amp-youtube data-videoid="dQw4w9WgXcQ"> </amp-youtube>
+>>     ^~~~~~~~~
+amp-youtube/1.0/test/validator-amp-youtube.html:60:4 Incomplete layout attributes specified for tag 'amp-youtube'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-youtube)
+|
+|      <!-- Invalid: the attr value must be a video id -->
+|      <amp-youtube
+>>     ^~~~~~~~~
+amp-youtube/1.0/test/validator-amp-youtube.html:63:4 The attribute 'data-videoid' in tag 'amp-youtube' is set to the invalid value 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'. (see https://amp.dev/documentation/components/amp-youtube)
+|        width="480"
+|        height="270"
+|        data-videoid="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+|      >
+|      </amp-youtube>
+|
+|      <!-- Invalid: cannot have both data-videoid and data-live-channelid -->
+|      <amp-youtube
+>>     ^~~~~~~~~
+amp-youtube/1.0/test/validator-amp-youtube.html:71:4 Mutually exclusive attributes encountered in tag 'amp-youtube' - pick one of ['data-live-channelid', 'data-videoid']. (see https://amp.dev/documentation/components/amp-youtube)
+|        width="480"
+|        height="270"
+|        data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
+|        data-videoid="dQw4w9WgXcQ"
+|      >
+|      </amp-youtube>
+|    </body>
+|  </html>
diff --git a/extensions/amp-youtube/OWNERS b/extensions/amp-youtube/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/extensions/amp-youtube/OWNERS
+++ b/extensions/amp-youtube/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/extensions/amp-youtube/amp-youtube.md b/extensions/amp-youtube/amp-youtube.md
index 74bf7a7e74b95..2d1ea0208457d 100644
--- a/extensions/amp-youtube/amp-youtube.md
+++ b/extensions/amp-youtube/amp-youtube.md
@@ -2,13 +2,14 @@
 $category@: media
 formats:
   - websites
-  - ads
 teaser:
   text: Displays a YouTube video.
+experimental: true
+bento: true
 ---
 
 <!---
-Copyright 2015 The AMP HTML Authors. All Rights Reserved.
+Copyright 2021 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.
@@ -25,7 +26,9 @@ limitations under the License.
 
 # amp-youtube
 
-## Example
+## Usage
+
+Displays a YouTube video.
 
 With the responsive layout, the width and height from the example should yield correct layouts for 16:9 aspect ratio videos:
 
@@ -54,74 +57,217 @@ With the responsive layout, the width and height from the example should yield c
 </amp-youtube>
 ```
 
+#### Standalone use outside valid AMP documents
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide [Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/).
+
+[example preview="top-frame" playground="false"]
+
+```html
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-youtube-1.0.css">
+  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-1.0.js"></script>
+</head>
+<body>
+  <amp-youtube
+    style="aspect-ratio: 16/9"
+    id="my-youtube-video"
+    data-videoid="mGENRKrdoGY"
+  ></amp-youtube>
+  <script>
+    (async () => {
+      const video = document.querySelector('#my-youtube-video');
+      await customElements.whenDefined('amp-youtube');
+      const videoHandle = await video.getApi();
+
+      // programatically call playback actions
+      videoHandle.play();
+      videoHandle.pause();
+      videoHandle.requestFullscreen();
+      videoHandle.mute();
+      videoHandle.unmute();
+
+      // get video state
+      console.log({
+        autoplay: videoHandle.autoplay,
+        controls: videoHandle.controls,
+        duration: videoHandle.duration,
+        currentTime: videoHandle.currentTime,
+        loop: videoHandle.loop,
+      })
+    })();
+  </script>
+</body>
+```
+
+[/example]
+
+#### Interactivity and API usage
+
+Bento enabled components in standalone use are highly interactive through their API. In Bento standalone use, the element's API replaces AMP Actions and events and [`amp-bind`](https://amp.dev/documentation/components/amp-bind/?format=websites).
+
+The `amp-youtube` component API is accessible by including the following script tag in your document:
+
+```js
+await customElements.whenDefined('amp-youtube');
+const videoHandle = await video.getApi();
+```
+
+##### Actions
+
+The `amp-youtube` API allows you to perform the following actions:
+
+##### `play()`
+
+Plays the video.
+
+```js
+videoHandle.play();
+```
+
+##### `pause()`
+
+Pauses the video.
+
+```js
+videoHandle.pause();
+```
+
+##### `mute()`
+
+Mutes the video.
+
+```js
+videoHandle.mute();
+```
+
+##### `unmute()`
+
+Unmutes the video.
+
+```js
+videoHandle.unmute();
+```
+
+##### `requestFullscreen()`
+
+Expands the video to fullscreen when possible.
+
+```js
+videoHandle.requestFullscreen();
+```
+
+#### Properties
+
+It also exposes the following read-only properties:
+
+##### `currentTime` (`number`)
+
+The current playback time in seconds.
+
+```js
+console.log(videoHandle.currentTime);
+```
+
+##### `duration` (`number`)
+
+The video's duration in seconds, when it's known (e.g. is not a livestream).
+
+```js
+console.log(videoHandle.duration);
+```
+
+##### `autoplay` (`boolean`)
+
+Whether the video autoplays.
+
+```js
+console.log(videoHandle.autoplay);
+```
+
+##### `controls` (`boolean`)
+
+Whether the video shows controls.
+
+```js
+console.log(videoHandle.controls);
+```
+
+##### `loop` (`boolean`)
+
+Whether the video loops.
+
+```js
+console.log(videoHandle.loop);
+```
+
+### Migrating from 0.1
+
+The experimental `1.0` version of `amp-youtube` does not automatically convert `data-param-controls` to `controls`. Instead it takes `controls` directly as an attribute.
+
 ## Attributes
 
-<table>
-  <tr>
-    <td width="40%"><strong>autoplay</strong></td>
-    <td>
-      <p>If this attribute is present, and the browser supports autoplay:</p>
-      <ul>
-        <li>the video is automatically muted before autoplay starts
-        </li>
-        <li>when the video is scrolled out of view, the video is paused
-        </li>
-        <li>when the video is scrolled into view, the video resumes playback
-        </li>
-        <li>when the user taps the video, the video is unmuted
-        </li>
-        <li>if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.
-        </li>
-      </ul>
-    </td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>loop</strong></td>
-    <td>
-      <p>If this attribute is present, the video or playlist will play again (from the beginning) once it ends.</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-videoid</strong></td>
-    <td><p>The YouTube video id found in every YouTube video page URL.</p>
-<p>For example, in this URL: https://www.youtube.com/watch?v=Z1q71gFeRqM, <code>Z1q71gFeRqM</code> is the video id.</p></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-live-channelid</strong></td>
-    <td>The Youtube channel id that provides a stable livestream url. For example, in this URL: https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q, <code>UCB8Kb4pxYzsDsHxzBfnid4Q</code> is the channel id. You can provide a <code>data-live-channelid</code> instead of a <code>data-videoid</code> attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>data-param-&#42;</strong></td>
-    <td><p>All <code>data-param-*</code> attributes (with the exception of <code>data-param-autoplay</code> and <code>data-param-loop</code>) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.</p>
-<p>Keys and values will be URI encoded. Keys will be camel cased.</p>
-<ul>
-  <li>`data-param-controls=1` becomes `&controls=1`</li>
-</ul>
-<p>See <a href="https://developers.google.com/youtube/player_parameters">YouTube Embedded Player Parameters</a> for more parameter options for YouTube.</p>
-<p>Note: Use the <code>autoplay</code> attribute instead of <code>data-param-autoplay</code> and the <code>loop</code> attribute instead of <code>data-param-loop</code> since both the autoplay and looping behaviors are handled internally by AMP instead of the Youtube player.</p>
-</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>dock</strong></td>
-    <td><strong>Requires <code>amp-video-docking</code> extension.</strong> If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
-    For more details, see <a href="https://amp.dev/documentation/components/amp-video-docking">documentation on the docking extension itself.</a></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>credentials (optional)</strong></td>
-    <td><p>Defines a <code>credentials</code> option as specified by the <a href="https://fetch.spec.whatwg.org/">Fetch API</a>.</p>
+### autoplay
+
+If this attribute is present, and the browser supports autoplay:
+
 <ul>
-  <li>Supported values: `omit`, `include`</li>
-  <li>Default: `include`</li>
+  <li>the video is automatically muted before autoplay starts
+  </li>
+  <li>when the video is scrolled out of view, the video is paused
+  </li>
+  <li>when the video is scrolled into view, the video resumes playback
+  </li>
+  <li>when the user taps the video, the video is unmuted
+  </li>
+  <li>if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.
+  </li>
 </ul>
-<p>If you want to use the <a href="http://www.google.com/support/youtube/bin/answer.py?answer=141046">YouTube player in privacy-enhanced mode</a>, pass the value of <code>omit</code>.
-  Usually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.</p></td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>common attributes</strong></td>
-    <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
-  </tr>
-</table>
-
-## Validation
-
-See [amp-youtube rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube/validator-amp-youtube.protoascii) in the AMP validator specification.
+
+### loop
+
+If this attribute is present, the video or playlist will play again (from the beginning) once it ends.
+
+### data-videoid
+
+The YouTube video id found in every YouTube video page URL.
+
+For example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.
+
+### data-live-channelid
+
+The Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.
+
+### data-param-\*
+
+All `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.
+
+Keys and values will be URI encoded. Keys will be camel cased
+
+### controls
+
+See [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.
+
+[tip type="note"]
+Use the `autoplay` attribute instead of `data-param-autoplay` and the `loop` attribute instead of `data-param-loop` since both the autoplay and looping behaviors are handled internally by AMP instead of the Youtube player.
+[/tip]
+
+### credentials (optional)
+
+Defines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/).
+
+-   Supported values: `omit`, `include`
+-   Default: `include`
+
+If you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.
+
+Usually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.
+
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"YouTube video"`.
+
+### common attributes
+
+This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
diff --git a/extensions/amp-youtube/validator-amp-youtube.protoascii b/extensions/amp-youtube/validator-amp-youtube.protoascii
index 3923f0fd19f13..672000210dfff 100644
--- a/extensions/amp-youtube/validator-amp-youtube.protoascii
+++ b/extensions/amp-youtube/validator-amp-youtube.protoascii
@@ -14,12 +14,27 @@
 # limitations under the license.
 #
 
-tags: {  # amp-youtube
+tags: {  # amp-youtube 1.0
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
+  satisfies: "amp-youtube 1.0"
+  excludes: "amp-youtube 0.1"
   extension_spec: {
     name: "amp-youtube"
+    version_name: "v1.0"
+    version: "1.0"
+  }
+  attr_lists: "common-extension-attrs"
+}
+
+tags: {  # amp-youtube 0.1 and latest
+  html_format: AMP
+  tag_name: "SCRIPT"
+  satisfies: "amp-youtube 0.1"
+  excludes: "amp-youtube 1.0"
+  extension_spec: {
+    name: "amp-youtube"
+    version_name: "v0.1"
     version: "0.1"
     version: "latest"
     requires_usage: EXEMPTED
@@ -27,9 +42,9 @@ tags: {  # amp-youtube
   }
   attr_lists: "common-extension-attrs"
 }
+
 tags: {  # <amp-youtube>
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "AMP-YOUTUBE"
   requires_extension: "amp-youtube"
   attrs: { name: "autoplay" }
diff --git a/gulpfile.js b/gulpfile.js
deleted file mode 100644
index d0ce8b159995e..0000000000000
--- a/gulpfile.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * 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.
- */
-
-/* global require, process */
-
-const argv = require('minimist')(process.argv.slice(2));
-const gulp = require('gulp-help')(require('gulp'));
-const log = require('fancy-log');
-const {cyan, red} = require('ansi-colors');
-
-const {
-  checkExactVersions,
-} = require('./build-system/tasks/check-exact-versions');
-const {
-  checkRenovateConfig,
-} = require('./build-system/tasks/check-renovate-config');
-const {
-  process3pGithubPr,
-} = require('./build-system/tasks/process-3p-github-pr');
-const {
-  processGithubIssues,
-} = require('./build-system/tasks/process-github-issues');
-const {
-  storybookAmp,
-  storybookPreact,
-} = require('./build-system/tasks/storybook');
-const {
-  validator,
-  validatorJava,
-  validatorWebui,
-} = require('./build-system/tasks/validator');
-const {a4a} = require('./build-system/tasks/a4a');
-const {ava} = require('./build-system/tasks/ava');
-const {babelPluginTests} = require('./build-system/tasks/babel-plugin-tests');
-const {build, watch} = require('./build-system/tasks/build');
-const {bundleSize} = require('./build-system/tasks/bundle-size');
-const {cachesJson} = require('./build-system/tasks/caches-json');
-const {checkLinks} = require('./build-system/tasks/check-links');
-const {checkOwners} = require('./build-system/tasks/check-owners');
-const {checkSourcemaps} = require('./build-system/tasks/check-sourcemaps');
-const {checkTypes} = require('./build-system/tasks/check-types');
-const {cherryPick} = require('./build-system/tasks/cherry-pick');
-const {clean} = require('./build-system/tasks/clean');
-const {codecovUpload} = require('./build-system/tasks/codecov-upload');
-const {compileJison} = require('./build-system/tasks/compile-jison');
-const {createGoldenCss} = require('./build-system/tasks/create-golden-css');
-const {css} = require('./build-system/tasks/css');
-const {csvifySize} = require('./build-system/tasks/csvify-size');
-const {defaultTask} = require('./build-system/tasks/default-task');
-const {depCheck} = require('./build-system/tasks/dep-check');
-const {devDashboardTests} = require('./build-system/tasks/dev-dashboard-tests');
-const {dist} = require('./build-system/tasks/dist');
-const {e2e} = require('./build-system/tasks/e2e');
-const {firebase} = require('./build-system/tasks/firebase');
-const {getZindex} = require('./build-system/tasks/get-zindex');
-const {integration} = require('./build-system/tasks/integration');
-const {lint} = require('./build-system/tasks/lint');
-const {makeExtension} = require('./build-system/tasks/extension-generator');
-const {nailgunStart, nailgunStop} = require('./build-system/tasks/nailgun');
-const {performanceUrls} = require('./build-system/tasks/performance-urls');
-const {performance} = require('./build-system/tasks/performance');
-const {prCheck} = require('./build-system/tasks/pr-check');
-const {prependGlobal} = require('./build-system/tasks/prepend-global');
-const {presubmit} = require('./build-system/tasks/presubmit-checks');
-const {prettify} = require('./build-system/tasks/prettify');
-const {serverTests} = require('./build-system/tasks/server-tests');
-const {serve} = require('./build-system/tasks/serve.js');
-const {size} = require('./build-system/tasks/size');
-const {todosFindClosed} = require('./build-system/tasks/todos');
-const {unit} = require('./build-system/tasks/unit');
-const {updatePackages} = require('./build-system/tasks/update-packages');
-const {vendorConfigs} = require('./build-system/tasks/vendor-configs');
-const {visualDiff} = require('./build-system/tasks/visual-diff');
-
-/**
- * Creates a gulp task using the given name and task function.
- *
- * @param {string} name
- * @param {function} taskFunc
- */
-function createTask(name, taskFunc) {
-  checkFlags(name, taskFunc);
-  gulp.task(name, taskFunc);
-}
-
-/**
- * Checks if the flags passed in to a task are valid.
- * @param {string} name
- * @param {function} taskFunc
- */
-function checkFlags(name, taskFunc) {
-  const isDefaultTask = name == 'default' && argv._.length == 0;
-  if (!argv._.includes(name) && !isDefaultTask) {
-    return; // This isn't the task being run.
-  }
-  const validFlags = taskFunc.flags ? Object.keys(taskFunc.flags) : [];
-  const usedFlags = Object.keys(argv).slice(1); // Skip the '_' argument
-  const invalidFlags = [];
-  usedFlags.forEach((flag) => {
-    if (!validFlags.includes(flag)) {
-      invalidFlags.push(`--${flag}`);
-    }
-  });
-  if (invalidFlags.length > 0) {
-    log(
-      red('ERROR:'),
-      'Found invalid flags for',
-      cyan(`gulp ${name}`) + ':',
-      cyan(invalidFlags.join(', '))
-    );
-    log('For detailed usage information, run', cyan('gulp help') + '.');
-    if (validFlags.length > 0) {
-      log('Valid flags for', cyan(`gulp ${name}`) + ':');
-      validFlags.forEach((key) => {
-        log(cyan(`\t--${key}`) + `: ${taskFunc.flags[key]}`);
-      });
-    }
-    process.exit(1);
-  }
-}
-
-/**
- * All the gulp tasks. Keep this list alphabetized.
- */
-createTask('a4a', a4a);
-createTask('ava', ava);
-createTask('babel-plugin-tests', babelPluginTests);
-createTask('build', build);
-createTask('bundle-size', bundleSize);
-createTask('caches-json', cachesJson);
-createTask('check-exact-versions', checkExactVersions);
-createTask('check-links', checkLinks);
-createTask('check-owners', checkOwners);
-createTask('check-renovate-config', checkRenovateConfig);
-createTask('check-sourcemaps', checkSourcemaps);
-createTask('check-types', checkTypes);
-createTask('cherry-pick', cherryPick);
-createTask('clean', clean);
-createTask('codecov-upload', codecovUpload);
-createTask('compile-jison', compileJison);
-createTask('create-golden-css', createGoldenCss);
-createTask('css', css);
-createTask('csvify-size', csvifySize);
-createTask('default', defaultTask);
-createTask('dep-check', depCheck);
-createTask('dev-dashboard-tests', devDashboardTests);
-createTask('dist', dist);
-createTask('e2e', e2e);
-createTask('firebase', firebase);
-createTask('get-zindex', getZindex);
-createTask('integration', integration);
-createTask('lint', lint);
-createTask('make-extension', makeExtension);
-createTask('nailgun-start', nailgunStart);
-createTask('nailgun-stop', nailgunStop);
-createTask('performance', performance);
-createTask('performance-urls', performanceUrls);
-createTask('pr-check', prCheck);
-createTask('prepend-global', prependGlobal);
-createTask('presubmit', presubmit);
-createTask('prettify', prettify);
-createTask('process-3p-github-pr', process3pGithubPr);
-createTask('process-github-issues', processGithubIssues);
-createTask('serve', serve);
-createTask('server-tests', serverTests);
-createTask('size', size);
-createTask('storybook-amp', storybookAmp);
-createTask('storybook-preact', storybookPreact);
-createTask('todos:find-closed', todosFindClosed);
-createTask('unit', unit);
-createTask('update-packages', updatePackages);
-createTask('validator', validator);
-createTask('validator-java', validatorJava);
-createTask('validator-webui', validatorWebui);
-createTask('vendor-configs', vendorConfigs);
-createTask('visual-diff', visualDiff);
-createTask('watch', watch);
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000000000..444bae3fe4520
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,18770 @@
+{
+  "name": "amp-html",
+  "version": "0.1.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@ampproject/animations": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@ampproject/animations/-/animations-0.2.2.tgz",
+      "integrity": "sha512-Ukegl+czEVP2S6Xd48d8vR/yL1bXd2A2ccUDztW29vVOC7XrJjKSa3bIqecYckuUI+mBfJtzHJKzN6rkscz3jw=="
+    },
+    "@ampproject/filesize": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/filesize/-/filesize-4.3.0.tgz",
+      "integrity": "sha512-ruXED0Xv1gg7STkhs32k+qKFg4eMnnYLjPZ5PhJbYG5Klf9TvcJlVrjjVpbo17gl3pp5mKLSFxbRrI7Le8vaRQ==",
+      "dev": true,
+      "requires": {
+        "@kristoferbaxter/async": "1.0.0",
+        "@kristoferbaxter/bytes": "0.1.2",
+        "@kristoferbaxter/kleur": "4.0.2",
+        "fast-glob": "3.2.5",
+        "mri": "1.1.6"
+      },
+      "dependencies": {
+        "fast-glob": {
+          "version": "3.2.5",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
+          "integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
+          "dev": true,
+          "requires": {
+            "@nodelib/fs.stat": "^2.0.2",
+            "@nodelib/fs.walk": "^1.2.3",
+            "glob-parent": "^5.1.0",
+            "merge2": "^1.3.0",
+            "micromatch": "^4.0.2",
+            "picomatch": "^2.2.1"
+          }
+        }
+      }
+    },
+    "@ampproject/google-closure-compiler": {
+      "version": "20210406.0.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/google-closure-compiler/-/google-closure-compiler-20210406.0.0.tgz",
+      "integrity": "sha512-o4q+P5wxUozDG750GvaVHrgf28YY7M0Y9HvQlJVZByeixQTbI7tOOWOcJ7XmOeVtY9tyDSHkNokC8Du4vxi6HQ==",
+      "dev": true,
+      "requires": {
+        "@ampproject/google-closure-compiler-java": "20210406.0.0",
+        "@ampproject/google-closure-compiler-linux": "20210406.0.0",
+        "@ampproject/google-closure-compiler-osx": "20210406.0.0",
+        "@ampproject/google-closure-compiler-windows": "20210406.0.0",
+        "kleur": "4.1.4",
+        "vinyl": "2.2.1",
+        "vinyl-sourcemaps-apply": "0.2.1"
+      }
+    },
+    "@ampproject/google-closure-compiler-java": {
+      "version": "20210406.0.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/google-closure-compiler-java/-/google-closure-compiler-java-20210406.0.0.tgz",
+      "integrity": "sha512-KHmywvL9dLcWqZQk+aSE9YmX6uFYR4SUT9vaDWeFvxMwM8kATr8rZnqRwBBEdVFZ90Z4BG6WG/f9in8TUgKOuw==",
+      "dev": true
+    },
+    "@ampproject/google-closure-compiler-linux": {
+      "version": "20210406.0.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/google-closure-compiler-linux/-/google-closure-compiler-linux-20210406.0.0.tgz",
+      "integrity": "sha512-lf4YDPRi/Hv13XNhdtgDgLlhtigUKD1qZ7SOJ3I/mVsRKDvvY0RmRS53WwXXcUj2XlTugduyGGZarhGZzF+QkQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@ampproject/google-closure-compiler-osx": {
+      "version": "20210406.0.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/google-closure-compiler-osx/-/google-closure-compiler-osx-20210406.0.0.tgz",
+      "integrity": "sha512-0DSPFSS9ICktDRo13h0ouD6kdkWN6SoRIwrMPmELaVkv5cI1K3NXtKZv/v/AQ1JFeT9+dKWq9MTi2WCOwZVZgQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@ampproject/google-closure-compiler-windows": {
+      "version": "20210406.0.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/google-closure-compiler-windows/-/google-closure-compiler-windows-20210406.0.0.tgz",
+      "integrity": "sha512-vAWND8NEqoBEya8yJCiN3xkxzKlU9QWzr9cxzO75waa2JGGseeNhxs8mctyePky9/S4N2Q/VZfvB1GJAHIMcBg==",
+      "dev": true,
+      "optional": true
+    },
+    "@ampproject/remapping": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-1.0.1.tgz",
+      "integrity": "sha512-Ta9bMA3EtUHDaZJXqUoT5cn/EecwOp+SXpKJqxDbDuMbLvEMu6YTyDDuvTWeStODfdmXyfMo7LymQyPkN3BicA==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "1.0.0",
+        "sourcemap-codec": "1.4.8"
+      }
+    },
+    "@ampproject/toolbox-cache-url": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@ampproject/toolbox-cache-url/-/toolbox-cache-url-2.7.2.tgz",
+      "integrity": "sha512-dpHSgZffx4rC+ch9aEl/Ebz4GOoSgterbpwkFfkktaAgWE0OgZFnaGpNR22ct9e/8U0YlKnTCIMEklt+5Xq1ag==",
+      "requires": {
+        "punycode": "2.1.1",
+        "url-parse": "1.4.7"
+      }
+    },
+    "@ampproject/viewer-messaging": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@ampproject/viewer-messaging/-/viewer-messaging-1.1.2.tgz",
+      "integrity": "sha512-oOlju4AQkgel/h4h8ZPRk0xIsE1xtFsn2IAvFOAB6GTa8IXLp+XNDzAUKKU/HpJbrbh/c+AUjYvcKds+c7C+uQ=="
+    },
+    "@ampproject/worker-dom": {
+      "version": "0.29.3",
+      "resolved": "https://registry.npmjs.org/@ampproject/worker-dom/-/worker-dom-0.29.3.tgz",
+      "integrity": "sha512-qVTmxOVaIeJ/94OymOfN/TZS2Z5IA/rXcGyRNusZEHk0P0qIAWnLu8bSx27wRkc3cCVn9HhBiLsXkMzxhL/UQA=="
+    },
+    "@babel/code-frame": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+      "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.12.13"
+      }
+    },
+    "@babel/compat-data": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.0.tgz",
+      "integrity": "sha512-vu9V3uMM/1o5Hl5OekMUowo3FqXLJSw+s+66nt0fSWVWTtmosdzn45JHOB3cPtZoe6CTBDzvSw0RdOY85Q37+Q==",
+      "dev": true
+    },
+    "@babel/core": {
+      "version": "7.14.3",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.3.tgz",
+      "integrity": "sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/generator": "^7.14.3",
+        "@babel/helper-compilation-targets": "^7.13.16",
+        "@babel/helper-module-transforms": "^7.14.2",
+        "@babel/helpers": "^7.14.0",
+        "@babel/parser": "^7.14.3",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.14.2",
+        "@babel/types": "^7.14.2",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.1.2",
+        "semver": "^6.3.0",
+        "source-map": "^0.5.0"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.14.3",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.3.tgz",
+          "integrity": "sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.14.2",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
+          "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
+          "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.2.tgz",
+          "integrity": "sha512-OznJUda/soKXv0XhpvzGWDnml4Qnwp16GN+D/kZIdLsWoHj05kyu8Rm5kXmMef+rVJZ0+4pSGLkeixdqNUATDA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "^7.13.12",
+            "@babel/helper-replace-supers": "^7.13.12",
+            "@babel/helper-simple-access": "^7.13.12",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "@babel/template": "^7.12.13",
+            "@babel/traverse": "^7.14.2",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.14.3",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.3.tgz",
+          "integrity": "sha512-Rlh8qEWZSTfdz+tgNV/N4gz1a0TMNwCUcENhMjHTHKp3LseYH5Jha0NSlyTQWMnjbYcwFt+bqAMqSLHVXkQ6UA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.13.12",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.14.2",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz",
+          "integrity": "sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+          "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
+          "dev": true
+        },
+        "@babel/helpers": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.0.tgz",
+          "integrity": "sha512-+ufuXprtQ1D1iZTO/K9+EBRn+qPWMJjZSw/S0KlFrxCw4tkrzv9grgpDHkY9MeQTjTY8i2sp7Jep8DfU6tN9Mg==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.12.13",
+            "@babel/traverse": "^7.14.0",
+            "@babel/types": "^7.14.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.14.3",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.3.tgz",
+          "integrity": "sha512-7MpZDIfI7sUC5zWo2+foJ50CSI5lcqDehZ0lVgIhSi4bFEk94fLAKlF3Q0nzSQQ+ca0lm+O6G9ztKVBeu8PMRQ==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz",
+          "integrity": "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.14.2",
+            "@babel/helper-function-name": "^7.14.2",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.14.2",
+            "@babel/types": "^7.14.2",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.2.tgz",
+          "integrity": "sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/eslint-parser": {
+      "version": "7.14.3",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.14.3.tgz",
+      "integrity": "sha512-IfJXKEVRV/Gisvgmih/+05gkBzzg4Dy0gcxkZ84iFiLK8+O+fI1HLnGJv3UrUMPpsMmmThNa69v+UnF80XP+kA==",
+      "dev": true,
+      "requires": {
+        "eslint-scope": "^5.1.0",
+        "eslint-visitor-keys": "^2.1.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+          "dev": true
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/generator": {
+      "version": "7.13.9",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.9.tgz",
+      "integrity": "sha512-mHOOmY0Axl/JCTkxTU6Lf5sWOg/v8nUa+Xkt4zMTftX0wqmb6Sh7J8gvcehBw7q0AhrhAR+FDacKjCZ2X8K+Sw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.13.0",
+        "jsesc": "^2.5.1",
+        "source-map": "^0.5.0"
+      }
+    },
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz",
+      "integrity": "sha512-7YXfX5wQ5aYM/BOlbSccHDbuXXFPxeoUmfWtz8le2yTkTZc+BxsiEnENFoi2SlmA8ewDkG2LgIMIVzzn2h8kfw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.12.13.tgz",
+      "integrity": "sha512-CZOv9tGphhDRlVjVkAgm8Nhklm9RzSmWpX2my+t7Ua/KT616pEzXsQCjinzvkRvHWJ9itO4f296efroX23XCMA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-explode-assignable-expression": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-compilation-targets": {
+      "version": "7.13.16",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.16.tgz",
+      "integrity": "sha512-3gmkYIrpqsLlieFwjkGgLaSHmhnvlAYzZLlYVjlW+QwI+1zE17kGxuJGmIqDQdYp56XdmGeD+Bswx0UTyG18xA==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.13.15",
+        "@babel/helper-validator-option": "^7.12.17",
+        "browserslist": "^4.14.5",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.13.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.10.tgz",
+      "integrity": "sha512-YV7r2YxdTUaw84EwNkyrRke/TJHR/UXGiyvACRqvdVJ2/syV2rQuJNnaRLSuYiop8cMRXOgseTGoJCWX0q2fFg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/helper-member-expression-to-functions": "^7.13.0",
+        "@babel/helper-optimise-call-expression": "^7.12.13",
+        "@babel/helper-replace-supers": "^7.13.0",
+        "@babel/helper-split-export-declaration": "^7.12.13"
+      }
+    },
+    "@babel/helper-create-regexp-features-plugin": {
+      "version": "7.12.17",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.17.tgz",
+      "integrity": "sha512-p2VGmBu9oefLZ2nQpgnEnG0ZlRPvL8gAGvPUMQwUdaE8k49rOMuZpOwdQoy5qJf6K8jL3bcAMhVUlHAjIgJHUg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.12.13",
+        "regexpu-core": "^4.7.1"
+      }
+    },
+    "@babel/helper-define-polyfill-provider": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.0.tgz",
+      "integrity": "sha512-JT8tHuFjKBo8NnaUbblz7mIu1nnvUDiHVjXXkulZULyidvo/7P6TY7+YqpV37IfF+KUFxmlK04elKtGKXaiVgw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-compilation-targets": "^7.13.0",
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/traverse": "^7.13.0",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2",
+        "semver": "^6.1.2"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/helper-explode-assignable-expression": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.13.0.tgz",
+      "integrity": "sha512-qS0peLTDP8kOisG1blKbaoBg/o9OSa1qoumMjTK5pM+KDTtpxpsiubnCGP34vK8BXGcb2M9eigwgvoJryrzwWA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.13.0"
+      }
+    },
+    "@babel/helper-fixtures": {
+      "version": "7.13.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-fixtures/-/helper-fixtures-7.13.13.tgz",
+      "integrity": "sha512-szPan8hbCET/xFMWrpgeJ53q8kHhPb1iJyns0asbI8YEITfbOTJs0LOJiyCVSriLFSDRYDgJwaJhO8NxMuSUvA==",
+      "dev": true,
+      "requires": {
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/helper-function-name": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+      "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-get-function-arity": "^7.12.13",
+        "@babel/template": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-get-function-arity": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+      "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.13.16",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.13.16.tgz",
+      "integrity": "sha512-1eMtTrXtrwscjcAeO4BVK+vvkxaLJSPFz1w1KLawz6HLNi9bPFGBNwwDyVfiu1Tv/vRRFYfoGaKhmAQPGPn5Wg==",
+      "dev": true,
+      "requires": {
+        "@babel/traverse": "^7.13.15",
+        "@babel/types": "^7.13.16"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.2.tgz",
+          "integrity": "sha512-OnADYbKrffDVai5qcpkMxQ7caomHOoEwjkouqnN2QhydAjowFAZcsdecFIRUBdb+ZcruwYE4ythYmF1UBZU5xQ==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.14.2",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
+          "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+          "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
+          "dev": true
+        },
+        "@babel/parser": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.2.tgz",
+          "integrity": "sha512-IoVDIHpsgE/fu7eXBeRWt8zLbDrSvD7H1gpomOkPpBoEN8KCruCqSDdqo8dddwQQrui30KSvQBaMUOJiuFu6QQ==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz",
+          "integrity": "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.14.2",
+            "@babel/helper-function-name": "^7.14.2",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.14.2",
+            "@babel/types": "^7.14.2",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.2.tgz",
+          "integrity": "sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-member-expression-to-functions": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.0.tgz",
+      "integrity": "sha512-yvRf8Ivk62JwisqV1rFRMxiSMDGnN6KH1/mDMmIrij4jztpQNRoHqqMG3U6apYbGRPJpgPalhva9Yd06HlUxJQ==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.13.0"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
+      "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.13.12"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.14.tgz",
+          "integrity": "sha512-A2aa3QTkWoyqsZZFl56MLUsfmh7O0gN41IPvXAE/++8ojpbz12SszD7JEGYVdn4f9Kt4amIei07swF1h4AqmmQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-module-transforms": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.13.0.tgz",
+      "integrity": "sha512-Ls8/VBwH577+pw7Ku1QkUWIyRRNHpYlts7+qSqBBFCW3I8QteB9DxfcZ5YJpOwH6Ihe/wn8ch7fMGOP1OhEIvw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/helper-replace-supers": "^7.13.0",
+        "@babel/helper-simple-access": "^7.12.13",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "@babel/helper-validator-identifier": "^7.12.11",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.13.0",
+        "@babel/types": "^7.13.0",
+        "lodash": "^4.17.19"
+      }
+    },
+    "@babel/helper-optimise-call-expression": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+      "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-plugin-test-runner": {
+      "version": "7.13.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-test-runner/-/helper-plugin-test-runner-7.13.10.tgz",
+      "integrity": "sha512-28urFD/sm4bDs6vLgU6eUX0I68LEiyKImA5i8eC8fwBLU2KuchKhQn6tjlmdB+UIZJsFkq+WpUhKvYN9/j2Jag==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-transform-fixture-test-runner": "^7.13.10"
+      }
+    },
+    "@babel/helper-plugin-utils": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz",
+      "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==",
+      "dev": true
+    },
+    "@babel/helper-remap-async-to-generator": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.13.0.tgz",
+      "integrity": "sha512-pUQpFBE9JvC9lrQbpX0TmeNIy5s7GnZjna2lhhcHC7DzgBs6fWn722Y5cfwgrtrqc7NAJwMvOa0mKhq6XaE4jg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.12.13",
+        "@babel/helper-wrap-function": "^7.13.0",
+        "@babel/types": "^7.13.0"
+      }
+    },
+    "@babel/helper-replace-supers": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.0.tgz",
+      "integrity": "sha512-Segd5me1+Pz+rmN/NFBOplMbZG3SqRJOBlY+mA0SxAv6rjj7zJqr1AVr3SfzUVTLCv7ZLU5FycOM/SBGuLPbZw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-member-expression-to-functions": "^7.13.0",
+        "@babel/helper-optimise-call-expression": "^7.12.13",
+        "@babel/traverse": "^7.13.0",
+        "@babel/types": "^7.13.0"
+      }
+    },
+    "@babel/helper-simple-access": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.12.13.tgz",
+      "integrity": "sha512-0ski5dyYIHEfwpWGx5GPWhH35j342JaflmCeQmsPWcrOQDtCN6C1zKAVRFVbK53lPW2c9TsuLLSUDf0tIGJ5hA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz",
+      "integrity": "sha512-Mf5AUuhG1/OCChOJ/HcADmvcHM42WJockombn8ATJG3OnyiSxBK/Mm5x78BQWvmtXZKHgbjdGL2kin/HOLlZGA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.1"
+      }
+    },
+    "@babel/helper-split-export-declaration": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+      "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-transform-fixture-test-runner": {
+      "version": "7.13.14",
+      "resolved": "https://registry.npmjs.org/@babel/helper-transform-fixture-test-runner/-/helper-transform-fixture-test-runner-7.13.14.tgz",
+      "integrity": "sha512-Iv1YO4TU6mT5roxdnRWvDDDv92+m7oY+NIB8xbAsqAtlWW4mTomBd+s6rs5ZKc5X4n4Z1hCV0IMmdaVkssch3w==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/core": "^7.13.14",
+        "@babel/helper-fixtures": "^7.13.13",
+        "babel-check-duplicated-nodes": "^1.0.0",
+        "quick-lru": "5.1.0",
+        "regenerator-runtime": "^0.13.7",
+        "source-map": "^0.5.0"
+      },
+      "dependencies": {
+        "@babel/compat-data": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.13.12.tgz",
+          "integrity": "sha512-3eJJ841uKxeV8dcN/2yGEUy+RfgQspPEgQat85umsE1rotuquQ2AbIub4S6j7c50a2d+4myc+zSlnXeIHrOnhQ==",
+          "dev": true
+        },
+        "@babel/core": {
+          "version": "7.13.14",
+          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.14.tgz",
+          "integrity": "sha512-wZso/vyF4ki0l0znlgM4inxbdrUvCb+cVz8grxDq+6C9k6qbqoIJteQOKicaKjCipU3ISV+XedCqpL2RJJVehA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.13.9",
+            "@babel/helper-compilation-targets": "^7.13.13",
+            "@babel/helper-module-transforms": "^7.13.14",
+            "@babel/helpers": "^7.13.10",
+            "@babel/parser": "^7.13.13",
+            "@babel/template": "^7.12.13",
+            "@babel/traverse": "^7.13.13",
+            "@babel/types": "^7.13.14",
+            "convert-source-map": "^1.7.0",
+            "debug": "^4.1.0",
+            "gensync": "^1.0.0-beta.2",
+            "json5": "^2.1.2",
+            "semver": "^6.3.0",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-compilation-targets": {
+          "version": "7.13.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.13.tgz",
+          "integrity": "sha512-q1kcdHNZehBwD9jYPh3WyXcsFERi39X4I59I3NadciWtNDyZ6x+GboOxncFK0kXlKIv6BJm5acncehXWUjWQMQ==",
+          "dev": true,
+          "requires": {
+            "@babel/compat-data": "^7.13.12",
+            "@babel/helper-validator-option": "^7.12.17",
+            "browserslist": "^4.14.5",
+            "semver": "^6.3.0"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
+          "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.13.14",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.13.14.tgz",
+          "integrity": "sha512-QuU/OJ0iAOSIatyVZmfqB0lbkVP0kDRiKj34xy+QNsnVZi/PA6BoSoreeqnxxa9EHFAIL0R9XOaAR/G9WlIy5g==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "^7.13.12",
+            "@babel/helper-replace-supers": "^7.13.12",
+            "@babel/helper-simple-access": "^7.13.12",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "@babel/template": "^7.12.13",
+            "@babel/traverse": "^7.13.13",
+            "@babel/types": "^7.13.14"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz",
+          "integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.13.12",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.13.0",
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz",
+          "integrity": "sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.13.13",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.13.tgz",
+          "integrity": "sha512-OhsyMrqygfk5v8HmWwOzlYjJrtLaFhF34MrfG/Z73DgYCI6ojNUTUp2TYbtnjo8PegeJp12eamsNettCQjKjVw==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.13.13",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.13.tgz",
+          "integrity": "sha512-CblEcwmXKR6eP43oQGG++0QMTtCjAsa3frUuzHoiIJWpaIIi8dwMyEFUJoXRLxagGqCK+jALRwIO+o3R9p/uUg==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.13.9",
+            "@babel/helper-function-name": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.13.13",
+            "@babel/types": "^7.13.13",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.14.tgz",
+          "integrity": "sha512-A2aa3QTkWoyqsZZFl56MLUsfmh7O0gN41IPvXAE/++8ojpbz12SszD7JEGYVdn4f9Kt4amIei07swF1h4AqmmQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+      "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==",
+      "dev": true
+    },
+    "@babel/helper-validator-option": {
+      "version": "7.12.17",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz",
+      "integrity": "sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw==",
+      "dev": true
+    },
+    "@babel/helper-wrap-function": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.13.0.tgz",
+      "integrity": "sha512-1UX9F7K3BS42fI6qd2A4BjKzgGjToscyZTdp1DjknHLCIvpgne6918io+aL5LXFcER/8QWiwpoY902pVEqgTXA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.13.0",
+        "@babel/types": "^7.13.0"
+      }
+    },
+    "@babel/helpers": {
+      "version": "7.13.10",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.13.10.tgz",
+      "integrity": "sha512-4VO883+MWPDUVRF3PhiLBUFHoX/bsLTGFpFK/HqvvfBZz2D57u9XzPVNFVBTc0PW/CWR9BXTOKt8NF4DInUHcQ==",
+      "dev": true,
+      "requires": {
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.13.0",
+        "@babel/types": "^7.13.0"
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.13.10",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.13.10.tgz",
+      "integrity": "sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.12.11",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@babel/parser": {
+      "version": "7.13.10",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.10.tgz",
+      "integrity": "sha512-0s7Mlrw9uTWkYua7xWr99Wpk2bnGa0ANleKfksYAES8LpWH4gW1OUr42vqKNf0us5UQNfru2wPqMqRITzq/SIQ==",
+      "dev": true
+    },
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.13.12.tgz",
+      "integrity": "sha512-d0u3zWKcoZf379fOeJdr1a5WPDny4aOFZ6hlfKivgK0LY7ZxNfoaHL2fWwdGtHyVvra38FC+HVYkO+byfSA8AQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1",
+        "@babel/plugin-proposal-optional-chaining": "^7.13.12"
+      }
+    },
+    "@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.2.tgz",
+      "integrity": "sha512-b1AM4F6fwck4N8ItZ/AtC4FP/cqZqmKRQ4FaTDutwSYyjuhtvsGEMLK4N/ztV/ImP40BjIDyMgBQAeAMsQYVFQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-remap-async-to-generator": "^7.13.0",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      }
+    },
+    "@babel/plugin-proposal-class-properties": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.13.0.tgz",
+      "integrity": "sha512-KnTDjFNC1g+45ka0myZNvSBFLhNCLN+GeGYLDEA8Oq7MZ6yMgfLoIRh86GRT0FjtJhZw8JyUskP9uvj5pHM9Zg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.13.0",
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-proposal-class-static-block": {
+      "version": "7.13.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.13.11.tgz",
+      "integrity": "sha512-fJTdFI4bfnMjvxJyNuaf8i9mVcZ0UhetaGEUHaHV9KEnibLugJkZAtXikR8KcYj+NYmI4DZMS8yQAyg+hvfSqg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-class-static-block": "^7.12.13"
+      }
+    },
+    "@babel/plugin-proposal-dynamic-import": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.2.tgz",
+      "integrity": "sha512-oxVQZIWFh91vuNEMKltqNsKLFWkOIyJc95k2Gv9lWVyDfPUQGSSlbDEgWuJUU1afGE9WwlzpucMZ3yDRHIItkA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.2.tgz",
+      "integrity": "sha512-sRxW3z3Zp3pFfLAgVEvzTFutTXax837oOatUIvSG9o5gRj9mKwm3br1Se5f4QalTQs9x4AzlA/HrCWbQIHASUQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-json-strings": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.2.tgz",
+      "integrity": "sha512-w2DtsfXBBJddJacXMBhElGEYqCZQqN99Se1qeYn8DVLB33owlrlLftIbMzn5nz1OITfDVknXF433tBrLEAOEjA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.2.tgz",
+      "integrity": "sha512-1JAZtUrqYyGsS7IDmFeaem+/LJqujfLZ2weLR9ugB0ufUPjzf8cguyVT1g5im7f7RXxuLq1xUxEzvm68uYRtGg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.13.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.13.8.tgz",
+      "integrity": "sha512-iePlDPBn//UhxExyS9KyeYU7RM9WScAG+D3Hhno0PLJebAEpDZMocbDe64eqynhNAnwz/vZoL/q/QB2T1OH39A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-numeric-separator": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.14.2.tgz",
+      "integrity": "sha512-DcTQY9syxu9BpU3Uo94fjCB3LN9/hgPS8oUL7KrSW3bA2ePrKZZPJcc5y0hoJAM9dft3pGfErtEUvxXQcfLxUg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.2.tgz",
+      "integrity": "sha512-hBIQFxwZi8GIp934+nj5uV31mqclC1aYDhctDu5khTi9PCCUOczyy0b34W0oE9U/eJXiqQaKyVsmjeagOaSlbw==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.14.0",
+        "@babel/helper-compilation-targets": "^7.13.16",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.14.2"
+      }
+    },
+    "@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.2.tgz",
+      "integrity": "sha512-XtkJsmJtBaUbOxZsNk0Fvrv8eiqgneug0A6aqLFZ4TSkar2L5dSXWcnUKHgmjJt49pyB/6ZHvkr3dPgl9MOWRQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-optional-chaining": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.13.12.tgz",
+      "integrity": "sha512-fcEdKOkIB7Tf4IxrgEVeFC4zeJSTr78no9wTdBuZZbqF64kzllU0ybo2zrzm7gUQfxGhBgq4E39oRs8Zx/RMYQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-private-methods": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.13.0.tgz",
+      "integrity": "sha512-MXyyKQd9inhx1kDYPkFRVOBXQ20ES8Pto3T7UZ92xj2mY0EVD8oAVzeyYuVfy/mxAdTSIayOvg+aVzcHV2bn6Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.13.0",
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.14.0.tgz",
+      "integrity": "sha512-59ANdmEwwRUkLjB7CRtwJxxwtjESw+X2IePItA+RGQh+oy5RmpCh/EvVVvh5XQc3yxsm5gtv0+i9oBZhaDNVTg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.12.13",
+        "@babel/helper-create-class-features-plugin": "^7.14.0",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.0"
+      },
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.2.tgz",
+          "integrity": "sha512-6YctwVsmlkchxfGUogvVrrhzyD3grFJyluj5JgDlQrwfMLJSt5tdAzFZfPf4H2Xoi5YLcQ6BxfJlaOBHuctyIw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.12.13",
+            "@babel/helper-function-name": "^7.14.2",
+            "@babel/helper-member-expression-to-functions": "^7.13.12",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/helper-replace-supers": "^7.13.12",
+            "@babel/helper-split-export-declaration": "^7.12.13"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
+          "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
+          "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz",
+          "integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.13.12",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.13.0",
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+          "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.2.tgz",
+          "integrity": "sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.13.tgz",
+      "integrity": "sha512-XyJmZidNfofEkqFV5VC/bLabGmO5QzenPO/YOfGuEbgU+2sSwMmio3YLb4WtBgcmmdwZHyVyv8on77IUjQ5Gvg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-bigint": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
+      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-class-static-block": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.12.13.tgz",
+      "integrity": "sha512-ZmKQ0ZXR0nYpHZIIuj9zE7oIqCx2hw9TKi+lIo73NNrMPAZGHfS92/VRV0ZmPj6H2ffBgyFHXvJ5NYsNeEaP2A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      }
+    },
+    "@babel/plugin-syntax-flow": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.12.13.tgz",
+      "integrity": "sha512-J/RYxnlSLXZLVR7wTRsozxKT8qbsx1mNKJzXEEjQ0Kjx1ZACcyHgbanNWNCFtc36IzuWhYWPpvJFFoexoOWFmA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-import-assertions": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.12.1.tgz",
+      "integrity": "sha512-eyHdg2/DBrQfPgT7URyQacH0BuR2yJoKPkc5yQwRSh6yfA+77A5JRRGxwSOWHpsitWxtimHfPqJ+sZA2DuDJLg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz",
+      "integrity": "sha512-d4HM23Q1K7oq/SLNmG6mRt85l2csmQ0cHRaxRXjKW0YFdEXqlZ5kzFQKH5Uc3rDJECgu+yCRgPkG04Mm98R/1g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.0.tgz",
+      "integrity": "sha512-bda3xF8wGl5/5btF794utNOL0Jw+9jE5C1sLZcoK7c4uonE/y3iQiyG+KbkF3WBV/paX58VCpjhxLPkdj5Fe4w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-syntax-top-level-await": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.12.13.tgz",
+      "integrity": "sha512-A81F9pDwyS7yM//KwbCSDqy3Uj4NMIurtplxphWxoYtNPov7cJsDkAFNNyVlIZ3jwGycVsurZ+LtOA8gZ376iQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-typescript": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz",
+      "integrity": "sha512-cHP3u1JiUiG2LFDKbXnwVad81GvfyIOmCD6HIEId6ojrY0Drfy2q1jw7BwN7dE84+kTnBjLkXoL3IEy/3JPu2w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-arrow-functions": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.13.0.tgz",
+      "integrity": "sha512-96lgJagobeVmazXFaDrbmCLQxBysKu7U6Do3mLsx27gf5Dk85ezysrs2BZUpXD703U/Su1xTBDxxar2oa4jAGg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-async-to-generator": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.13.0.tgz",
+      "integrity": "sha512-3j6E004Dx0K3eGmhxVJxwwI89CTJrce7lg3UrtFuDAVQ/2+SJ/h/aSFOeE6/n0WB1GsOffsJp6MnPQNQ8nmwhg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-remap-async-to-generator": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.13.tgz",
+      "integrity": "sha512-zNyFqbc3kI/fVpqwfqkg6RvBgFpC4J18aKKMmv7KdQ/1GgREapSJAykLMVNwfRGO3BtHj3YQZl8kxCXPcVMVeg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-block-scoping": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.2.tgz",
+      "integrity": "sha512-neZZcP19NugZZqNwMTH+KoBjx5WyvESPSIOQb4JHpfd+zPfqcH65RMu5xJju5+6q/Y2VzYrleQTr+b6METyyxg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-classes": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.14.2.tgz",
+      "integrity": "sha512-7oafAVcucHquA/VZCsXv/gmuiHeYd64UJyyTYU+MPfNu0KeNlxw06IeENBO8bJjXVbolu+j1MM5aKQtH1OMCNg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.12.13",
+        "@babel/helper-function-name": "^7.14.2",
+        "@babel/helper-optimise-call-expression": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-replace-supers": "^7.13.12",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "globals": "^11.1.0"
+      },
+      "dependencies": {
+        "@babel/helper-function-name": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
+          "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
+          "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz",
+          "integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.13.12",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.13.0",
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+          "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.2.tgz",
+          "integrity": "sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/plugin-transform-computed-properties": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.13.0.tgz",
+      "integrity": "sha512-RRqTYTeZkZAz8WbieLTvKUEUxZlUTdmL5KGMyZj7FnMfLNKV4+r5549aORG/mgojRmFlQMJDUupwAMiF2Q7OUg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-destructuring": {
+      "version": "7.13.17",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.13.17.tgz",
+      "integrity": "sha512-UAUqiLv+uRLO+xuBKKMEpC+t7YRNVRqBsWWq1yKXbBZBje/t3IXCiSinZhjn/DC3qzBfICeYd2EFGEbHsh5RLA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-dotall-regex": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.13.tgz",
+      "integrity": "sha512-foDrozE65ZFdUC2OfgeOCrEPTxdB3yjqxpXh8CH+ipd9CHd4s/iq81kcUpyH8ACGNEPdFqbtzfgzbT/ZGlbDeQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-duplicate-keys": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.13.tgz",
+      "integrity": "sha512-NfADJiiHdhLBW3pulJlJI2NB0t4cci4WTZ8FtdIuNc2+8pslXdPtRRAEWqUY+m9kNOk2eRYbTAOipAxlrOcwwQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.13.tgz",
+      "integrity": "sha512-fbUelkM1apvqez/yYx1/oICVnGo2KM5s63mhGylrmXUxK/IAXSIf87QIxVfZldWf4QsOafY6vV3bX8aMHSvNrA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-flow-strip-types": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.13.0.tgz",
+      "integrity": "sha512-EXAGFMJgSX8gxWD7PZtW/P6M+z74jpx3wm/+9pn+c2dOawPpBkUX7BrfyPvo6ZpXbgRIEuwgwDb/MGlKvu2pOg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-flow": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-for-of": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.13.0.tgz",
+      "integrity": "sha512-IHKT00mwUVYE0zzbkDgNRP6SRzvfGCYsOxIRz8KsiaaHCcT9BWIkO+H9QRJseHBLOGBZkHUdHiqj6r0POsdytg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-function-name": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.13.tgz",
+      "integrity": "sha512-6K7gZycG0cmIwwF7uMK/ZqeCikCGVBdyP2J5SKNCXO5EOHcqi+z7Jwf8AmyDNcBgxET8DrEtCt/mPKPyAzXyqQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-literals": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.13.tgz",
+      "integrity": "sha512-FW+WPjSR7hiUxMcKqyNjP05tQ2kmBCdpEpZHY1ARm96tGQCCBvXKnpjILtDplUnJ/eHZ0lALLM+d2lMFSpYJrQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-member-expression-literals": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.12.13.tgz",
+      "integrity": "sha512-kxLkOsg8yir4YeEPHLuO2tXP9R/gTjpuTOjshqSpELUN3ZAg2jfDnKUvzzJxObun38sw3wm4Uu69sX/zA7iRvg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-modules-amd": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.2.tgz",
+      "integrity": "sha512-hPC6XBswt8P3G2D1tSV2HzdKvkqOpmbyoy+g73JG0qlF/qx2y3KaMmXb1fLrpmWGLZYA0ojCvaHdzFWjlmV+Pw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.14.2",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.2.tgz",
+          "integrity": "sha512-OnADYbKrffDVai5qcpkMxQ7caomHOoEwjkouqnN2QhydAjowFAZcsdecFIRUBdb+ZcruwYE4ythYmF1UBZU5xQ==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.14.2",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
+          "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
+          "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.2.tgz",
+          "integrity": "sha512-OznJUda/soKXv0XhpvzGWDnml4Qnwp16GN+D/kZIdLsWoHj05kyu8Rm5kXmMef+rVJZ0+4pSGLkeixdqNUATDA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "^7.13.12",
+            "@babel/helper-replace-supers": "^7.13.12",
+            "@babel/helper-simple-access": "^7.13.12",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "@babel/template": "^7.12.13",
+            "@babel/traverse": "^7.14.2",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz",
+          "integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.13.12",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.13.0",
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz",
+          "integrity": "sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+          "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
+          "dev": true
+        },
+        "@babel/parser": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.2.tgz",
+          "integrity": "sha512-IoVDIHpsgE/fu7eXBeRWt8zLbDrSvD7H1gpomOkPpBoEN8KCruCqSDdqo8dddwQQrui30KSvQBaMUOJiuFu6QQ==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz",
+          "integrity": "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.14.2",
+            "@babel/helper-function-name": "^7.14.2",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.14.2",
+            "@babel/types": "^7.14.2",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.2.tgz",
+          "integrity": "sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/plugin-transform-modules-commonjs": {
+      "version": "7.13.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.13.8.tgz",
+      "integrity": "sha512-9QiOx4MEGglfYZ4XOnU79OHr6vIWUakIj9b4mioN8eQIoEh+pf5p/zEB36JpDFWA12nNMiRf7bfoRvl9Rn79Bw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.13.0",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-simple-access": "^7.12.13",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-systemjs": {
+      "version": "7.13.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.13.8.tgz",
+      "integrity": "sha512-hwqctPYjhM6cWvVIlOIe27jCIBgHCsdH2xCJVAYQm7V5yTMoilbVMi9f6wKg0rpQAOn6ZG4AOyvCqFF/hUh6+A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-hoist-variables": "^7.13.0",
+        "@babel/helper-module-transforms": "^7.13.0",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-validator-identifier": "^7.12.11",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-umd": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.0.tgz",
+      "integrity": "sha512-nPZdnWtXXeY7I87UZr9VlsWme3Y0cfFFE41Wbxz4bbaexAjNMInXPFUpRRUJ8NoMm0Cw+zxbqjdPmLhcjfazMw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.14.0",
+        "@babel/helper-plugin-utils": "^7.13.0"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.2.tgz",
+          "integrity": "sha512-OnADYbKrffDVai5qcpkMxQ7caomHOoEwjkouqnN2QhydAjowFAZcsdecFIRUBdb+ZcruwYE4ythYmF1UBZU5xQ==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.14.2",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
+          "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
+          "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.2.tgz",
+          "integrity": "sha512-OznJUda/soKXv0XhpvzGWDnml4Qnwp16GN+D/kZIdLsWoHj05kyu8Rm5kXmMef+rVJZ0+4pSGLkeixdqNUATDA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "^7.13.12",
+            "@babel/helper-replace-supers": "^7.13.12",
+            "@babel/helper-simple-access": "^7.13.12",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "@babel/template": "^7.12.13",
+            "@babel/traverse": "^7.14.2",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz",
+          "integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.13.12",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.13.0",
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz",
+          "integrity": "sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+          "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
+          "dev": true
+        },
+        "@babel/parser": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.2.tgz",
+          "integrity": "sha512-IoVDIHpsgE/fu7eXBeRWt8zLbDrSvD7H1gpomOkPpBoEN8KCruCqSDdqo8dddwQQrui30KSvQBaMUOJiuFu6QQ==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz",
+          "integrity": "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.14.2",
+            "@babel/helper-function-name": "^7.14.2",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.14.2",
+            "@babel/types": "^7.14.2",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.2.tgz",
+          "integrity": "sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.13.tgz",
+      "integrity": "sha512-Xsm8P2hr5hAxyYblrfACXpQKdQbx4m2df9/ZZSQ8MAhsadw06+jW7s9zsSw6he+mJZXRlVMyEnVktJo4zjk1WA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-new-target": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.13.tgz",
+      "integrity": "sha512-/KY2hbLxrG5GTQ9zzZSc3xWiOy379pIETEhbtzwZcw9rvuaVV4Fqy7BYGYOWZnaoXIQYbbJ0ziXLa/sKcGCYEQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-object-super": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.13.tgz",
+      "integrity": "sha512-JzYIcj3XtYspZDV8j9ulnoMPZZnF/Cj0LUxPOjR89BdBVx+zYJI9MdMIlUZjbXDX+6YVeS6I3e8op+qQ3BYBoQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/helper-replace-supers": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-parameters": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.2.tgz",
+      "integrity": "sha512-NxoVmA3APNCC1JdMXkdYXuQS+EMdqy0vIwyDHeKHiJKRxmp1qGSdb0JLEIoPRhkx6H/8Qi3RJ3uqOCYw8giy9A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-property-literals": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.12.13.tgz",
+      "integrity": "sha512-nqVigwVan+lR+g8Fj8Exl0UQX2kymtjcWfMOYM1vTYEKujeyv2SkMgazf2qNcK7l4SDiKyTA/nHCPqL4e2zo1A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-react-constant-elements": {
+      "version": "7.13.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.13.13.tgz",
+      "integrity": "sha512-SNJU53VM/SjQL0bZhyU+f4kJQz7bQQajnrZRSaU21hruG/NWY41AEM9AWXeXX90pYr/C2yAmTgI6yW3LlLrAUQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-react-jsx": {
+      "version": "7.14.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.3.tgz",
+      "integrity": "sha512-uuxuoUNVhdgYzERiHHFkE4dWoJx+UFVyuAl0aqN8P2/AKFHwqgUC5w2+4/PjpKXJsFgBlYAFXlUmDQ3k3DUkXw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.12.13",
+        "@babel/helper-module-imports": "^7.13.12",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/types": "^7.14.2"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+          "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.2.tgz",
+          "integrity": "sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/plugin-transform-regenerator": {
+      "version": "7.13.15",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.13.15.tgz",
+      "integrity": "sha512-Bk9cOLSz8DiurcMETZ8E2YtIVJbFCPGW28DJWUakmyVWtQSm6Wsf0p4B4BfEr/eL2Nkhe/CICiUiMOCi1TPhuQ==",
+      "dev": true,
+      "requires": {
+        "regenerator-transform": "^0.14.2"
+      }
+    },
+    "@babel/plugin-transform-reserved-words": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.12.13.tgz",
+      "integrity": "sha512-xhUPzDXxZN1QfiOy/I5tyye+TRz6lA7z6xaT4CLOjPRMVg1ldRf0LHw0TDBpYL4vG78556WuHdyO9oi5UmzZBg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-shorthand-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.13.tgz",
+      "integrity": "sha512-xpL49pqPnLtf0tVluuqvzWIgLEhuPpZzvs2yabUHSKRNlN7ScYU7aMlmavOeyXJZKgZKQRBlh8rHbKiJDraTSw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-spread": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.13.0.tgz",
+      "integrity": "sha512-V6vkiXijjzYeFmQTr3dBxPtZYLPcUfY34DebOU27jIl2M/Y8Egm52Hw82CSjjPqd54GTlJs5x+CR7HeNr24ckg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1"
+      }
+    },
+    "@babel/plugin-transform-sticky-regex": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.13.tgz",
+      "integrity": "sha512-Jc3JSaaWT8+fr7GRvQP02fKDsYk4K/lYwWq38r/UGfaxo89ajud321NH28KRQ7xy1Ybc0VUE5Pz8psjNNDUglg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-template-literals": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.13.0.tgz",
+      "integrity": "sha512-d67umW6nlfmr1iehCcBv69eSUSySk1EsIS8aTDX4Xo9qajAh6mYtcl4kJrBkGXuxZPEgVr7RVfAvNW6YQkd4Mw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0"
+      }
+    },
+    "@babel/plugin-transform-typeof-symbol": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.13.tgz",
+      "integrity": "sha512-eKv/LmUJpMnu4npgfvs3LiHhJua5fo/CysENxa45YCQXZwKnGCQKAg87bvoqSW1fFT+HA32l03Qxsm8ouTY3ZQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-typescript": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.13.0.tgz",
+      "integrity": "sha512-elQEwluzaU8R8dbVuW2Q2Y8Nznf7hnjM7+DSCd14Lo5fF63C9qNLbwZYbmZrtV9/ySpSUpkRpQXvJb6xyu4hCQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.13.0",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-typescript": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-unicode-escapes": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.13.tgz",
+      "integrity": "sha512-0bHEkdwJ/sN/ikBHfSmOXPypN/beiGqjo+o4/5K+vxEFNPRPdImhviPakMKG4x96l85emoa0Z6cDflsdBusZbw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-unicode-regex": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.13.tgz",
+      "integrity": "sha512-mDRzSNY7/zopwisPZ5kM9XKCfhchqIYwAKRERtEnhYscZB79VRekuRSoYbN0+KVe3y8+q1h6A4svXtP7N+UoCA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/preset-env": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.14.2.tgz",
+      "integrity": "sha512-7dD7lVT8GMrE73v4lvDEb85cgcQhdES91BSD7jS/xjC6QY8PnRhux35ac+GCpbiRhp8crexBvZZqnaL6VrY8TQ==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.14.0",
+        "@babel/helper-compilation-targets": "^7.13.16",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-validator-option": "^7.12.17",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.13.12",
+        "@babel/plugin-proposal-async-generator-functions": "^7.14.2",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
+        "@babel/plugin-proposal-class-static-block": "^7.13.11",
+        "@babel/plugin-proposal-dynamic-import": "^7.14.2",
+        "@babel/plugin-proposal-export-namespace-from": "^7.14.2",
+        "@babel/plugin-proposal-json-strings": "^7.14.2",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.14.2",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.2",
+        "@babel/plugin-proposal-numeric-separator": "^7.14.2",
+        "@babel/plugin-proposal-object-rest-spread": "^7.14.2",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.14.2",
+        "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+        "@babel/plugin-proposal-private-methods": "^7.13.0",
+        "@babel/plugin-proposal-private-property-in-object": "^7.14.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.12.13",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.12.13",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.0",
+        "@babel/plugin-syntax-top-level-await": "^7.12.13",
+        "@babel/plugin-transform-arrow-functions": "^7.13.0",
+        "@babel/plugin-transform-async-to-generator": "^7.13.0",
+        "@babel/plugin-transform-block-scoped-functions": "^7.12.13",
+        "@babel/plugin-transform-block-scoping": "^7.14.2",
+        "@babel/plugin-transform-classes": "^7.14.2",
+        "@babel/plugin-transform-computed-properties": "^7.13.0",
+        "@babel/plugin-transform-destructuring": "^7.13.17",
+        "@babel/plugin-transform-dotall-regex": "^7.12.13",
+        "@babel/plugin-transform-duplicate-keys": "^7.12.13",
+        "@babel/plugin-transform-exponentiation-operator": "^7.12.13",
+        "@babel/plugin-transform-for-of": "^7.13.0",
+        "@babel/plugin-transform-function-name": "^7.12.13",
+        "@babel/plugin-transform-literals": "^7.12.13",
+        "@babel/plugin-transform-member-expression-literals": "^7.12.13",
+        "@babel/plugin-transform-modules-amd": "^7.14.2",
+        "@babel/plugin-transform-modules-commonjs": "^7.14.0",
+        "@babel/plugin-transform-modules-systemjs": "^7.13.8",
+        "@babel/plugin-transform-modules-umd": "^7.14.0",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.12.13",
+        "@babel/plugin-transform-new-target": "^7.12.13",
+        "@babel/plugin-transform-object-super": "^7.12.13",
+        "@babel/plugin-transform-parameters": "^7.14.2",
+        "@babel/plugin-transform-property-literals": "^7.12.13",
+        "@babel/plugin-transform-regenerator": "^7.13.15",
+        "@babel/plugin-transform-reserved-words": "^7.12.13",
+        "@babel/plugin-transform-shorthand-properties": "^7.12.13",
+        "@babel/plugin-transform-spread": "^7.13.0",
+        "@babel/plugin-transform-sticky-regex": "^7.12.13",
+        "@babel/plugin-transform-template-literals": "^7.13.0",
+        "@babel/plugin-transform-typeof-symbol": "^7.12.13",
+        "@babel/plugin-transform-unicode-escapes": "^7.12.13",
+        "@babel/plugin-transform-unicode-regex": "^7.12.13",
+        "@babel/preset-modules": "^0.1.4",
+        "@babel/types": "^7.14.2",
+        "babel-plugin-polyfill-corejs2": "^0.2.0",
+        "babel-plugin-polyfill-corejs3": "^0.2.0",
+        "babel-plugin-polyfill-regenerator": "^0.2.0",
+        "core-js-compat": "^3.9.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.2.tgz",
+          "integrity": "sha512-OnADYbKrffDVai5qcpkMxQ7caomHOoEwjkouqnN2QhydAjowFAZcsdecFIRUBdb+ZcruwYE4ythYmF1UBZU5xQ==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.14.2",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
+          "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
+          "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.2.tgz",
+          "integrity": "sha512-OznJUda/soKXv0XhpvzGWDnml4Qnwp16GN+D/kZIdLsWoHj05kyu8Rm5kXmMef+rVJZ0+4pSGLkeixdqNUATDA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "^7.13.12",
+            "@babel/helper-replace-supers": "^7.13.12",
+            "@babel/helper-simple-access": "^7.13.12",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "@babel/template": "^7.12.13",
+            "@babel/traverse": "^7.14.2",
+            "@babel/types": "^7.14.2"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz",
+          "integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.13.12",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.13.0",
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.13.12",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz",
+          "integrity": "sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.13.12"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+          "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
+          "dev": true
+        },
+        "@babel/parser": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.2.tgz",
+          "integrity": "sha512-IoVDIHpsgE/fu7eXBeRWt8zLbDrSvD7H1gpomOkPpBoEN8KCruCqSDdqo8dddwQQrui30KSvQBaMUOJiuFu6QQ==",
+          "dev": true
+        },
+        "@babel/plugin-proposal-nullish-coalescing-operator": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.2.tgz",
+          "integrity": "sha512-ebR0zU9OvI2N4qiAC38KIAK75KItpIPTpAtd2r4OZmMFeKbKJpUFLYP2EuDut82+BmYi8sz42B+TfTptJ9iG5Q==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.13.0",
+            "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+          }
+        },
+        "@babel/plugin-proposal-optional-chaining": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.2.tgz",
+          "integrity": "sha512-qQByMRPwMZJainfig10BoaDldx/+VDtNcrA7qdNaEOAj6VXud+gfrkA8j4CRAU5HjnWREXqIpSpH30qZX1xivA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.13.0",
+            "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1",
+            "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+          }
+        },
+        "@babel/plugin-transform-modules-commonjs": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.0.tgz",
+          "integrity": "sha512-EX4QePlsTaRZQmw9BsoPeyh5OCtRGIhwfLquhxGp5e32w+dyL8htOcDwamlitmNFK6xBZYlygjdye9dbd9rUlQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-transforms": "^7.14.0",
+            "@babel/helper-plugin-utils": "^7.13.0",
+            "@babel/helper-simple-access": "^7.13.12",
+            "babel-plugin-dynamic-import-node": "^2.3.3"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz",
+          "integrity": "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.14.2",
+            "@babel/helper-function-name": "^7.14.2",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.14.2",
+            "@babel/types": "^7.14.2",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.2.tgz",
+          "integrity": "sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/preset-flow": {
+      "version": "7.13.13",
+      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.13.13.tgz",
+      "integrity": "sha512-MDtwtamMifqq3R2mC7l3A3uFalUb3NH5TIBQWjN/epEPlZktcLq4se3J+ivckKrLMGsR7H9LW8+pYuIUN9tsKg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-validator-option": "^7.12.17",
+        "@babel/plugin-transform-flow-strip-types": "^7.13.0"
+      }
+    },
+    "@babel/preset-modules": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.4.tgz",
+      "integrity": "sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      }
+    },
+    "@babel/preset-typescript": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.13.0.tgz",
+      "integrity": "sha512-LXJwxrHy0N3f6gIJlYbLta1D9BDtHpQeqwzM0LIfjDlr6UE/D5Mc7W4iDiQzaE+ks0sTjT26ArcHWnJVt0QiHw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/helper-validator-option": "^7.12.17",
+        "@babel/plugin-transform-typescript": "^7.13.0"
+      }
+    },
+    "@babel/register": {
+      "version": "7.13.16",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.13.16.tgz",
+      "integrity": "sha512-dh2t11ysujTwByQjXNgJ48QZ2zcXKQVdV8s0TbeMI0flmtGWCdTwK9tJiACHXPLmncm5+ktNn/diojA45JE4jg==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "find-cache-dir": "^2.0.0",
+        "make-dir": "^2.1.0",
+        "pirates": "^4.0.0",
+        "source-map-support": "^0.5.16"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/runtime": {
+      "version": "7.13.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
+      "integrity": "sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/template": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+      "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/parser": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.0.tgz",
+      "integrity": "sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/generator": "^7.13.0",
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "@babel/parser": "^7.13.0",
+        "@babel/types": "^7.13.0",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0",
+        "lodash": "^4.17.19"
+      }
+    },
+    "@babel/types": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
+      "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.12.11",
+        "lodash": "^4.17.19",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
+      "dev": true
+    },
+    "@chiragrupani/karma-chromium-edge-launcher": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@chiragrupani/karma-chromium-edge-launcher/-/karma-chromium-edge-launcher-2.1.1.tgz",
+      "integrity": "sha512-QK6M+1CYMbndWRaEAOpMW9kwF+JKcqyaEY2lqe8Nnm1hyOzSZaxTqXnLTZpk7RqQHhWCOduSU/XDvceWs4H74g==",
+      "dev": true
+    },
+    "@cnakazawa/watch": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
+      "integrity": "sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==",
+      "dev": true,
+      "requires": {
+        "exec-sh": "^0.3.2",
+        "minimist": "^1.2.0"
+      }
+    },
+    "@concordance/react": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@concordance/react/-/react-2.0.0.tgz",
+      "integrity": "sha512-huLSkUuM2/P+U0uy2WwlKuixMsTODD8p4JVQBI4VKeopkiN0C7M3N9XYVawb4M+4spN5RrO/eLhk7KoQX6nsfA==",
+      "dev": true,
+      "requires": {
+        "arrify": "^1.0.1"
+      },
+      "dependencies": {
+        "arrify": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+          "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+          "dev": true
+        }
+      }
+    },
+    "@emotion/is-prop-valid": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz",
+      "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==",
+      "requires": {
+        "@emotion/memoize": "0.7.1"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
+      "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
+    },
+    "@es-joy/jsdoccomment": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.7.2.tgz",
+      "integrity": "sha512-i5p0VgxeCXbf5aPLPY9s9Fz6K5BkzYdbRCisw/vEY/FXAxUJ8SiAifPwkFUm0CJrmZ8tFBGW8bUtM7wiE4KTIA==",
+      "dev": true,
+      "requires": {
+        "comment-parser": "^1.1.5",
+        "esquery": "^1.4.0",
+        "jsdoctypeparser": "^9.0.0"
+      }
+    },
+    "@eslint/eslintrc": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.1.tgz",
+      "integrity": "sha512-5v7TDE9plVhvxQeWLXDTvFvJBdH6pEsdnl2g/dAptmuFEPedQ4Erq5rsDsX+mvAM610IhNaO2W5V1dOOnDKxkQ==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.1.1",
+        "espree": "^7.3.0",
+        "globals": "^12.1.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^3.13.1",
+        "minimatch": "^3.0.4",
+        "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "globals": {
+          "version": "12.4.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
+          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.8.1"
+          }
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
+        },
+        "strip-json-comments": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+          "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+          "dev": true
+        }
+      }
+    },
+    "@istanbuljs/load-nyc-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
+      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.3.1",
+        "find-up": "^4.1.0",
+        "get-package-type": "^0.1.0",
+        "js-yaml": "^3.13.1",
+        "resolve-from": "^5.0.0"
+      }
+    },
+    "@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "dev": true
+    },
+    "@jest/console": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-26.6.2.tgz",
+      "integrity": "sha512-IY1R2i2aLsLr7Id3S6p2BA82GNWryt4oSvEXLAKc+L2zdi89dSkE8xC1C+0kpATG4JhBJREnQOH7/zmccM2B0g==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "jest-message-util": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "slash": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@jest/core": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/core/-/core-26.6.3.tgz",
+      "integrity": "sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==",
+      "dev": true,
+      "requires": {
+        "@jest/console": "^26.6.2",
+        "@jest/reporters": "^26.6.2",
+        "@jest/test-result": "^26.6.2",
+        "@jest/transform": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.4",
+        "jest-changed-files": "^26.6.2",
+        "jest-config": "^26.6.3",
+        "jest-haste-map": "^26.6.2",
+        "jest-message-util": "^26.6.2",
+        "jest-regex-util": "^26.0.0",
+        "jest-resolve": "^26.6.2",
+        "jest-resolve-dependencies": "^26.6.3",
+        "jest-runner": "^26.6.3",
+        "jest-runtime": "^26.6.3",
+        "jest-snapshot": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "jest-validate": "^26.6.2",
+        "jest-watcher": "^26.6.2",
+        "micromatch": "^4.0.2",
+        "p-each-series": "^2.1.0",
+        "rimraf": "^3.0.0",
+        "slash": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@jest/environment": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-26.6.2.tgz",
+      "integrity": "sha512-nFy+fHl28zUrRsCeMB61VDThV1pVTtlEokBRgqPrcT1JNq4yRNIyTHfyht6PqtUvY9IsuLGTrbG8kPXjSZIZwA==",
+      "dev": true,
+      "requires": {
+        "@jest/fake-timers": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "jest-mock": "^26.6.2"
+      }
+    },
+    "@jest/fake-timers": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-26.6.2.tgz",
+      "integrity": "sha512-14Uleatt7jdzefLPYM3KLcnUl1ZNikaKq34enpb5XG9i81JpppDb5muZvonvKyrl7ftEHkKS5L5/eB/kxJ+bvA==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "@sinonjs/fake-timers": "^6.0.1",
+        "@types/node": "*",
+        "jest-message-util": "^26.6.2",
+        "jest-mock": "^26.6.2",
+        "jest-util": "^26.6.2"
+      },
+      "dependencies": {
+        "@sinonjs/fake-timers": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz",
+          "integrity": "sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==",
+          "dev": true,
+          "requires": {
+            "@sinonjs/commons": "^1.7.0"
+          }
+        }
+      }
+    },
+    "@jest/globals": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-26.6.2.tgz",
+      "integrity": "sha512-85Ltnm7HlB/KesBUuALwQ68YTU72w9H2xW9FjZ1eL1U3lhtefjjl5c2MiUbpXt/i6LaPRvoOFJ22yCBSfQ0JIA==",
+      "dev": true,
+      "requires": {
+        "@jest/environment": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "expect": "^26.6.2"
+      }
+    },
+    "@jest/reporters": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-26.6.2.tgz",
+      "integrity": "sha512-h2bW53APG4HvkOnVMo8q3QXa6pcaNt1HkwVsOPMBV6LD/q9oSpxNSYZQYkAnjdMjrJ86UuYeLo+aEZClV6opnw==",
+      "dev": true,
+      "requires": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@jest/console": "^26.6.2",
+        "@jest/test-result": "^26.6.2",
+        "@jest/transform": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "chalk": "^4.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "exit": "^0.1.2",
+        "glob": "^7.1.2",
+        "graceful-fs": "^4.2.4",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-instrument": "^4.0.3",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.0",
+        "istanbul-reports": "^3.0.2",
+        "jest-haste-map": "^26.6.2",
+        "jest-resolve": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "jest-worker": "^26.6.2",
+        "node-notifier": "^8.0.0",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.0",
+        "string-length": "^4.0.1",
+        "terminal-link": "^2.0.0",
+        "v8-to-istanbul": "^7.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@jest/source-map": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-26.6.2.tgz",
+      "integrity": "sha512-YwYcCwAnNmOVsZ8mr3GfnzdXDAl4LaenZP5z+G0c8bzC9/dugL8zRmxZzdoTl4IaS3CryS1uWnROLPFmb6lVvA==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0",
+        "graceful-fs": "^4.2.4",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "@jest/test-result": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-26.6.2.tgz",
+      "integrity": "sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==",
+      "dev": true,
+      "requires": {
+        "@jest/console": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "collect-v8-coverage": "^1.0.0"
+      }
+    },
+    "@jest/test-sequencer": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-26.6.3.tgz",
+      "integrity": "sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==",
+      "dev": true,
+      "requires": {
+        "@jest/test-result": "^26.6.2",
+        "graceful-fs": "^4.2.4",
+        "jest-haste-map": "^26.6.2",
+        "jest-runner": "^26.6.3",
+        "jest-runtime": "^26.6.3"
+      }
+    },
+    "@jest/transform": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.6.2.tgz",
+      "integrity": "sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.1.0",
+        "@jest/types": "^26.6.2",
+        "babel-plugin-istanbul": "^6.0.0",
+        "chalk": "^4.0.0",
+        "convert-source-map": "^1.4.0",
+        "fast-json-stable-stringify": "^2.0.0",
+        "graceful-fs": "^4.2.4",
+        "jest-haste-map": "^26.6.2",
+        "jest-regex-util": "^26.0.0",
+        "jest-util": "^26.6.2",
+        "micromatch": "^4.0.2",
+        "pirates": "^4.0.1",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.1",
+        "write-file-atomic": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@jest/types": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
+      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^15.0.0",
+        "chalk": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@jridgewell/doctrine": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/doctrine/-/doctrine-3.0.2.tgz",
+      "integrity": "sha512-DwZ/uJmyCQcYkMNoIwB24O0SAyq0R0MYovAxxHecdNfencCWDK2PYkNnlVv50e/0nDkBawBpcWNp9behpRzQDA==",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-1.0.0.tgz",
+      "integrity": "sha512-9oLAnygRMi8Q5QkYEU4XWK04B+nuoXoxjRvRxgjuChkLZFBja0YPSgdZ7dZtwhncLBcQe/I/E+fLuk5qxcYVJA==",
+      "dev": true
+    },
+    "@kristoferbaxter/async": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@kristoferbaxter/async/-/async-1.0.0.tgz",
+      "integrity": "sha512-CAQQQ8mUUBKI2P7stYojHwHb+ShdFN8SrC90/96V4m2XlDSctXAA+5PD5CqCICs0o5c/83cYJCeub+FSetKLrw==",
+      "dev": true
+    },
+    "@kristoferbaxter/bytes": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@kristoferbaxter/bytes/-/bytes-0.1.2.tgz",
+      "integrity": "sha512-jEnik0TVc+nxANari0ZQ+4dZYxxA3HTcK9OVglK8kptsczKpW7I7AVCjKcfujTi8V3qrd9oklr8fJAzA4FjWDA==",
+      "dev": true
+    },
+    "@kristoferbaxter/kleur": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@kristoferbaxter/kleur/-/kleur-4.0.2.tgz",
+      "integrity": "sha512-qZzvfOCXECWaCv3GDOd0uw2iqY+/VqMKvrAu1ufwZNjZEVSMjrFWpeQa+8UnezFOtaBF1FxnzN1Y3u42doK01g==",
+      "dev": true
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
+      "integrity": "sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.4",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+      "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz",
+      "integrity": "sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.4",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@sindresorhus/is": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
+      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
+      "dev": true
+    },
+    "@sinonjs/commons": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.2.tgz",
+      "integrity": "sha512-sruwd86RJHdsVf/AtBoijDmUqJp3B6hF/DGC23C+JaegnDHaZyewCjoVGTdg3J0uz3Zs7NnIT05OBOmML72lQw==",
+      "dev": true,
+      "requires": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "@sinonjs/fake-timers": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-7.1.1.tgz",
+      "integrity": "sha512-am34LJf0N2nON/PT9G7pauA+xjcwX9P6x31m4hBgfUeSXYRZBRv/R6EcdWs8iV4XJjPO++NTsrj7ua/cN2s6ZA==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.7.0"
+      }
+    },
+    "@sinonjs/samsam": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-5.3.1.tgz",
+      "integrity": "sha512-1Hc0b1TtyfBu8ixF/tpfSHTVWKwCBLY4QJbkgnE7HcwyvT2xArDxb4K7dMgqRm3szI+LJbzmW/s4xxEhv6hwDg==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.6.0",
+        "lodash.get": "^4.4.2",
+        "type-detect": "^4.0.8"
+      }
+    },
+    "@sinonjs/text-encoding": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz",
+      "integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==",
+      "dev": true
+    },
+    "@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
+      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
+      "dev": true,
+      "requires": {
+        "defer-to-connect": "^1.0.1"
+      }
+    },
+    "@tootallnate/once": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
+      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
+      "dev": true
+    },
+    "@trysound/sax": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
+      "integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==",
+      "dev": true
+    },
+    "@types/babel__core": {
+      "version": "7.1.12",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.12.tgz",
+      "integrity": "sha512-wMTHiiTiBAAPebqaPiPDLFA4LYPKr6Ph0Xq/6rq1Ur3v66HXyG+clfR9CNETkD7MQS8ZHvpQOtA53DLws5WAEQ==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "@types/babel__generator": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.2.tgz",
+      "integrity": "sha512-MdSJnBjl+bdwkLskZ3NGFp9YcXGx5ggLpQQPqtgakVhsWK0hTtNYhjpZLlWQTviGTvF8at+Bvli3jV7faPdgeQ==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@types/babel__template": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.0.tgz",
+      "integrity": "sha512-NTPErx4/FiPCGScH7foPyr+/1Dkzkni+rHiYHHoTjvwou7AQzJkNeD60A9CXRy+ZEN2B1bggmkTMCDb+Mv5k+A==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@types/babel__traverse": {
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.11.0.tgz",
+      "integrity": "sha512-kSjgDMZONiIfSH1Nxcr5JIRMwUetDki63FSQfpTCz8ogF3Ulqm8+mr5f78dUYs6vMiB6gBusQqfQmBvHZj/lwg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.3.0"
+      }
+    },
+    "@types/chai": {
+      "version": "4.2.18",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.2.18.tgz",
+      "integrity": "sha512-rS27+EkB/RE1Iz3u0XtVL5q36MGDWbgYe7zWiodyKNUnthxY0rukK5V36eiUCtCisB7NN8zKYH6DO2M37qxFEQ==",
+      "dev": true
+    },
+    "@types/component-emitter": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
+      "integrity": "sha512-bsjleuRKWmGqajMerkzox19aGbscQX5rmmvvXl3wlIp5gMG1HgkiwPxsN5p070fBDKTNSPgojVbuY1+HWMbFhg==",
+      "dev": true
+    },
+    "@types/cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-y7mImlc/rNkvCRmg8gC3/lj87S7pTUIJ6QGjwHR9WQJcFs+ZMTOaoPrkdFA/YdbuqVEmEbb5RdhVxMkAcgOnpg==",
+      "dev": true
+    },
+    "@types/cors": {
+      "version": "2.8.10",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.10.tgz",
+      "integrity": "sha512-C7srjHiVG3Ey1nR6d511dtDkCEjxuN9W1HWAEjGq8kpcwmNM6JJkpC0xvabM7BXTG2wDq8Eu33iH9aQKa7IvLQ==",
+      "dev": true
+    },
+    "@types/eslint": {
+      "version": "7.2.12",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.12.tgz",
+      "integrity": "sha512-HjikV/jX6e0Pg4DcB+rtOBKSrG6w5IaxWpmi3efL/eLxMz5lZTK+W1DKERrX5a+mNzL78axfsDNXu7JHFP4uLg==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "@types/estree": {
+      "version": "0.0.47",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.47.tgz",
+      "integrity": "sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==",
+      "dev": true
+    },
+    "@types/graceful-fs": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
+      "integrity": "sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/istanbul-lib-coverage": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
+      "integrity": "sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==",
+      "dev": true
+    },
+    "@types/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "@types/istanbul-reports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
+      "integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "@types/json-schema": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
+      "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==",
+      "dev": true
+    },
+    "@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
+      "dev": true
+    },
+    "@types/minimist": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.1.tgz",
+      "integrity": "sha512-fZQQafSREFyuZcdWFAExYjBiCL7AUCdgsk80iO0q4yihYYdcIiH28CcuPTGFgLOCC8RlW49GSQxdHwZP+I7CNg==",
+      "dev": true
+    },
+    "@types/mocha": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-8.2.2.tgz",
+      "integrity": "sha512-Lwh0lzzqT5Pqh6z61P3c3P5nm6fzQK/MMHl9UKeneAeInVflBSz1O2EkX6gM6xfJd7FBXBY5purtLx7fUiZ7Hw==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "14.17.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.1.tgz",
+      "integrity": "sha512-/tpUyFD7meeooTRwl3sYlihx2BrJE7q9XF71EguPFIySj9B7qgnRtHsHTho+0AUm4m1SvWGm6uSncrR94q6Vtw==",
+      "dev": true
+    },
+    "@types/normalize-package-data": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
+      "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
+      "dev": true
+    },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
+    "@types/prettier": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.2.2.tgz",
+      "integrity": "sha512-i99hy7Ki19EqVOl77WplDrvgNugHnsSjECVR/wUrzw2TJXz1zlUfT2ngGckR6xN7yFYaijsMAqPkOLx9HgUqHg==",
+      "dev": true
+    },
+    "@types/stack-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.0.tgz",
+      "integrity": "sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==",
+      "dev": true
+    },
+    "@types/yargs": {
+      "version": "15.0.13",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz",
+      "integrity": "sha512-kQ5JNTrbDv3Rp5X2n/iUu37IJBDU2gsZ5R/g1/KHOOEc5IKfUFjXT6DENPGduh08I/pamwtEq4oul7gUqKTQDQ==",
+      "dev": true,
+      "requires": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "@types/yargs-parser": {
+      "version": "20.2.0",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.0.tgz",
+      "integrity": "sha512-37RSHht+gzzgYeobbG+KWryeAW8J33Nhr69cjTqSYymXVZEN9NbRYWoYlRtDhHKPVT1FyNKwaTPC1NynKZpzRA==",
+      "dev": true
+    },
+    "@ungap/promise-all-settled": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz",
+      "integrity": "sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==",
+      "dev": true
+    },
+    "@webcomponents/webcomponentsjs": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.5.0.tgz",
+      "integrity": "sha512-C0l51MWQZ9kLzcxOZtniOMohpIFdCLZum7/TEHv3XWFc1Fvt5HCpbSX84x8ltka/JuNKcuiDnxXFkiB2gaePcg=="
+    },
+    "JSONSelect": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/JSONSelect/-/JSONSelect-0.4.0.tgz",
+      "integrity": "sha1-oI7cxn6z/L6Z7WMIVTRKDPKCu40=",
+      "dev": true
+    },
+    "JSV": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/JSV/-/JSV-4.0.2.tgz",
+      "integrity": "sha1-0Hf2glVx+CEy+d/67Vh7QCn+/1c=",
+      "dev": true
+    },
+    "abab": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
+      "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==",
+      "dev": true
+    },
+    "abbrev": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
+      "integrity": "sha1-kbR5JYinc4wl813W9jdSovh3YTU=",
+      "dev": true
+    },
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "dev": true,
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "acorn": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.1.0.tgz",
+      "integrity": "sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==",
+      "dev": true
+    },
+    "acorn-globals": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
+      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.1.1",
+        "acorn-walk": "^7.1.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        }
+      }
+    },
+    "acorn-jsx": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
+      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
+      "dev": true
+    },
+    "acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true
+    },
+    "agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dev": true,
+      "requires": {
+        "debug": "4"
+      }
+    },
+    "aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "dev": true,
+      "requires": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      }
+    },
+    "airbnb-prop-types": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz",
+      "integrity": "sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==",
+      "requires": {
+        "array.prototype.find": "^2.1.1",
+        "function.prototype.name": "^1.1.2",
+        "is-regex": "^1.1.0",
+        "object-is": "^1.1.2",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.1.2",
+        "prop-types": "^15.7.2",
+        "prop-types-exact": "^1.2.0",
+        "react-is": "^16.13.1"
+      }
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "alphanum-sort": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
+      "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
+      "dev": true
+    },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "dev": true,
+      "optional": true
+    },
+    "amphtml-validator": {
+      "version": "1.0.35",
+      "resolved": "https://registry.npmjs.org/amphtml-validator/-/amphtml-validator-1.0.35.tgz",
+      "integrity": "sha512-C67JzC5EI6pE2C0sAo/zuCp8ARDl1Vtt6/s0nr+3NuXDNOdkjclZUkaNAd/ZnsEvvYodkXZ6T/uww890IQh9dQ==",
+      "dev": true,
+      "requires": {
+        "colors": "1.4.0",
+        "commander": "7.2.0",
+        "promise": "8.1.0"
+      }
+    },
+    "ansi-align": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
+      "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==",
+      "dev": true,
+      "requires": {
+        "string-width": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
+    "ansi-colors": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
+      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
+      "dev": true
+    },
+    "ansi-escapes": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
+      "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^0.11.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
+          "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
+          "dev": true
+        }
+      }
+    },
+    "ansi-gray": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-gray/-/ansi-gray-0.1.1.tgz",
+      "integrity": "sha1-KWLPVOyXksSFEKPetSRDaGHvclE=",
+      "dev": true,
+      "requires": {
+        "ansi-wrap": "0.1.0"
+      }
+    },
+    "ansi-red": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-red/-/ansi-red-0.1.1.tgz",
+      "integrity": "sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=",
+      "dev": true,
+      "requires": {
+        "ansi-wrap": "0.1.0"
+      }
+    },
+    "ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "ansi-wrap": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
+      "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768=",
+      "dev": true
+    },
+    "any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha1-q8av7tzqUugJzcA3au0845Y10X8=",
+      "dev": true
+    },
+    "anymatch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+      "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "append-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/append-buffer/-/append-buffer-1.0.2.tgz",
+      "integrity": "sha1-2CIM9GYIFSXv6lBhTz3mUU36WPE=",
+      "dev": true,
+      "requires": {
+        "buffer-equal": "^1.0.0"
+      }
+    },
+    "append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY=",
+      "dev": true
+    },
+    "archiver": {
+      "version": "0.14.4",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-0.14.4.tgz",
+      "integrity": "sha1-W53bn17hzu8hy487Ag5iQOy0MVw=",
+      "dev": true,
+      "requires": {
+        "async": "~0.9.0",
+        "buffer-crc32": "~0.2.1",
+        "glob": "~4.3.0",
+        "lazystream": "~0.1.0",
+        "lodash": "~3.2.0",
+        "readable-stream": "~1.0.26",
+        "tar-stream": "~1.1.0",
+        "zip-stream": "~0.5.0"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "4.3.5",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-4.3.5.tgz",
+          "integrity": "sha1-gPuwjKVA8jiszl0R0em8QedRc9M=",
+          "dev": true,
+          "requires": {
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^2.0.1",
+            "once": "^1.3.0"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "lazystream": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-0.1.0.tgz",
+          "integrity": "sha1-GyXWPHcqTCDwpe0KnXf0hLbhaSA=",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~1.0.2"
+          }
+        },
+        "lodash": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.2.0.tgz",
+          "integrity": "sha1-S/UKMkP5rrC6xBpV09WZBnWkYvs=",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "2.0.10",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz",
+          "integrity": "sha1-jQh8OcazjAAbl/ynzm0OHoCvusc=",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.0.0"
+          }
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        }
+      }
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "argv": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/argv/-/argv-0.0.2.tgz",
+      "integrity": "sha1-7L0W+JSbFXGDcRsb2jNPN4QBhas=",
+      "dev": true
+    },
+    "arr-diff": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
+      "dev": true
+    },
+    "arr-flatten": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
+      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
+      "dev": true
+    },
+    "arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
+      "dev": true
+    },
+    "array-filter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-1.0.0.tgz",
+      "integrity": "sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=",
+      "dev": true
+    },
+    "array-find-index": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
+      "dev": true
+    },
+    "array-includes": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz",
+      "integrity": "sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2",
+        "get-intrinsic": "^1.1.1",
+        "is-string": "^1.0.5"
+      },
+      "dependencies": {
+        "get-intrinsic": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+          "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+          "dev": true,
+          "requires": {
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1"
+          }
+        }
+      }
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
+    "array-unique": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
+      "dev": true
+    },
+    "array.prototype.find": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.1.tgz",
+      "integrity": "sha512-mi+MYNJYLTx2eNYy+Yh6raoQacCsNeeMUaspFPh9Y141lFSsWxxB8V9mM2ye+eqiRs917J6/pJ4M9ZPzenWckA==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.4"
+      }
+    },
+    "array.prototype.flat": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz",
+      "integrity": "sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.1"
+      }
+    },
+    "array.prototype.flatmap": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz",
+      "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.1",
+        "function-bind": "^1.1.1"
+      }
+    },
+    "arrgv": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/arrgv/-/arrgv-1.0.2.tgz",
+      "integrity": "sha512-a4eg4yhp7mmruZDQFqVMlxNRFGi/i1r87pt8SDHy0/I8PqSXoUTlWZRdAZo0VXgvEARcujbtTk8kiZRi1uDGRw==",
+      "dev": true
+    },
+    "arrify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
+      "dev": true
+    },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "dev": true
+    },
+    "asn1": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+      "dev": true
+    },
+    "assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "dev": true
+    },
+    "assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
+      "dev": true
+    },
+    "ast-replace": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/ast-replace/-/ast-replace-1.1.3.tgz",
+      "integrity": "sha1-ufwkimP9xnomVr729l1MHQFNmo0=",
+      "dev": true,
+      "requires": {
+        "ast-test": "^1.1.1",
+        "ast-types": "^0.6.12",
+        "is-function": "^1.0.1"
+      }
+    },
+    "ast-test": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ast-test/-/ast-test-1.1.1.tgz",
+      "integrity": "sha1-8CXL9A2nBzpdECRCPffkPCrS3MA=",
+      "dev": true,
+      "requires": {
+        "ast-types": "^0.6.14"
+      }
+    },
+    "ast-types": {
+      "version": "0.6.16",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.6.16.tgz",
+      "integrity": "sha1-BCBbcu3dGVqP6qCB8R0ClKJN7ZM=",
+      "dev": true
+    },
+    "astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true
+    },
+    "async": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
+      "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=",
+      "dev": true
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "dev": true
+    },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "dev": true
+    },
+    "autolinker": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-0.28.1.tgz",
+      "integrity": "sha1-BlK0kYgYefB3XazgzcoyM5QqTkc=",
+      "dev": true,
+      "requires": {
+        "gulp-header": "^1.7.1"
+      }
+    },
+    "autoprefixer": {
+      "version": "10.2.6",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.6.tgz",
+      "integrity": "sha512-8lChSmdU6dCNMCQopIf4Pe5kipkAGj/fvTMslCsih0uHpOrXOPUEVOmYMMqmw3cekQkSD7EhIeuYl5y0BLdKqg==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.16.6",
+        "caniuse-lite": "^1.0.30001230",
+        "colorette": "^1.2.2",
+        "fraction.js": "^4.1.1",
+        "normalize-range": "^0.1.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.16.6",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+          "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001219",
+            "colorette": "^1.2.2",
+            "electron-to-chromium": "^1.3.723",
+            "escalade": "^3.1.1",
+            "node-releases": "^1.1.71"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001230",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz",
+          "integrity": "sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.739",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.739.tgz",
+          "integrity": "sha512-+LPJVRsN7hGZ9EIUUiWCpO7l4E3qBYHNadazlucBfsXBbccDFNKUBAgzE68FnkWGJPwD/AfKhSzL+G+Iqb8A4A==",
+          "dev": true
+        }
+      }
+    },
+    "ava": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/ava/-/ava-3.15.0.tgz",
+      "integrity": "sha512-HGAnk1SHPk4Sx6plFAUkzV/XC1j9+iQhOzt4vBly18/yo0AV8Oytx7mtJd/CR8igCJ5p160N/Oo/cNJi2uSeWA==",
+      "dev": true,
+      "requires": {
+        "@concordance/react": "^2.0.0",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "ansi-styles": "^5.0.0",
+        "arrgv": "^1.0.2",
+        "arrify": "^2.0.1",
+        "callsites": "^3.1.0",
+        "chalk": "^4.1.0",
+        "chokidar": "^3.4.3",
+        "chunkd": "^2.0.1",
+        "ci-info": "^2.0.0",
+        "ci-parallel-vars": "^1.0.1",
+        "clean-yaml-object": "^0.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-truncate": "^2.1.0",
+        "code-excerpt": "^3.0.0",
+        "common-path-prefix": "^3.0.0",
+        "concordance": "^5.0.1",
+        "convert-source-map": "^1.7.0",
+        "currently-unhandled": "^0.4.1",
+        "debug": "^4.3.1",
+        "del": "^6.0.0",
+        "emittery": "^0.8.0",
+        "equal-length": "^1.0.0",
+        "figures": "^3.2.0",
+        "globby": "^11.0.1",
+        "ignore-by-default": "^2.0.0",
+        "import-local": "^3.0.2",
+        "indent-string": "^4.0.0",
+        "is-error": "^2.2.2",
+        "is-plain-object": "^5.0.0",
+        "is-promise": "^4.0.0",
+        "lodash": "^4.17.20",
+        "matcher": "^3.0.0",
+        "md5-hex": "^3.0.1",
+        "mem": "^8.0.0",
+        "ms": "^2.1.3",
+        "ora": "^5.2.0",
+        "p-event": "^4.2.0",
+        "p-map": "^4.0.0",
+        "picomatch": "^2.2.2",
+        "pkg-conf": "^3.1.0",
+        "plur": "^4.0.0",
+        "pretty-ms": "^7.0.1",
+        "read-pkg": "^5.2.0",
+        "resolve-cwd": "^3.0.0",
+        "slash": "^3.0.0",
+        "source-map-support": "^0.5.19",
+        "stack-utils": "^2.0.3",
+        "strip-ansi": "^6.0.0",
+        "supertap": "^2.0.0",
+        "temp-dir": "^2.0.0",
+        "trim-off-newlines": "^1.0.1",
+        "update-notifier": "^5.0.1",
+        "write-file-atomic": "^3.0.3",
+        "yargs": "^16.2.0"
+      },
+      "dependencies": {
+        "acorn-walk": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.0.2.tgz",
+          "integrity": "sha512-+bpA9MJsHdZ4bgfDcpk0ozQyhhVct7rzOmO0s1IIr0AGGgKBljss8n2zp11rRP2wid5VGeh04CgeKzgat5/25A==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.1.0.tgz",
+          "integrity": "sha512-osxifZo3ar56+e8tdYreU6p8FZGciBHo5O0JoDAxMUqZuyNUb+yHEwYtJZ+Z32R459jEgtwVf1u8D7qYwU0l6w==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "4.3.0",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+              "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+              "dev": true,
+              "requires": {
+                "color-convert": "^2.0.1"
+              }
+            }
+          }
+        },
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "emittery": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
+          "integrity": "sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "4.3.0",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+              "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+              "dev": true,
+              "requires": {
+                "color-convert": "^2.0.1"
+              }
+            }
+          }
+        },
+        "y18n": {
+          "version": "5.0.5",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz",
+          "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "20.2.7",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz",
+          "integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==",
+          "dev": true
+        }
+      }
+    },
+    "available-typed-arrays": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz",
+      "integrity": "sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==",
+      "dev": true,
+      "requires": {
+        "array-filter": "^1.0.0"
+      }
+    },
+    "aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+      "dev": true
+    },
+    "aws4": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
+      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
+      "dev": true
+    },
+    "babel-check-duplicated-nodes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/babel-check-duplicated-nodes/-/babel-check-duplicated-nodes-1.0.0.tgz",
+      "integrity": "sha512-luUr6B28RzichAHdhCaGY6z53sm4+PAxzSedNlhZ9LtdW9txpR3G2Y5983iOnBosky88V08LeaUiDB/NR7vWvQ==",
+      "dev": true
+    },
+    "babel-core": {
+      "version": "7.0.0-bridge.0",
+      "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
+      "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
+      "dev": true
+    },
+    "babel-jest": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-26.6.3.tgz",
+      "integrity": "sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==",
+      "dev": true,
+      "requires": {
+        "@jest/transform": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/babel__core": "^7.1.7",
+        "babel-plugin-istanbul": "^6.0.0",
+        "babel-preset-jest": "^26.6.2",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.4",
+        "slash": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "dev": true,
+      "requires": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "babel-plugin-istanbul": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz",
+      "integrity": "sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@istanbuljs/load-nyc-config": "^1.0.0",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-instrument": "^4.0.0",
+        "test-exclude": "^6.0.0"
+      }
+    },
+    "babel-plugin-jest-hoist": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.6.2.tgz",
+      "integrity": "sha512-PO9t0697lNTmcEHH69mdtYiOIkkOlj9fySqfO3K1eCcdISevLAE0xY59VLLUj0SoiPiTX/JU2CYFpILydUa5Lw==",
+      "dev": true,
+      "requires": {
+        "@babel/template": "^7.3.3",
+        "@babel/types": "^7.3.3",
+        "@types/babel__core": "^7.0.0",
+        "@types/babel__traverse": "^7.0.6"
+      }
+    },
+    "babel-plugin-minify-replace": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-minify-replace/-/babel-plugin-minify-replace-0.5.0.tgz",
+      "integrity": "sha512-aXZiaqWDNUbyNNNpWs/8NyST+oU7QTpK7J9zFEFSA0eOmtUNMU3fczlTTTlnCxHmq/jYNFEmkkSG3DDBtW3Y4Q==",
+      "dev": true
+    },
+    "babel-plugin-optimize-objstr": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-optimize-objstr/-/babel-plugin-optimize-objstr-1.0.0.tgz",
+      "integrity": "sha512-0AMyPrN4s6Nh3PhNIo5C/xqOGacJJQkLzZbfgAZ05nSvp/WJYr+UWgRsNOdAmFtlJArBqEoLAtD0w97nJtA3+w==",
+      "dev": true
+    },
+    "babel-plugin-polyfill-corejs2": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.0.tgz",
+      "integrity": "sha512-9bNwiR0dS881c5SHnzCmmGlMkJLl0OUZvxrxHo9w/iNoRuqaPjqlvBf4HrovXtQs/au5yKkpcdgfT1cC5PAZwg==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.13.11",
+        "@babel/helper-define-polyfill-provider": "^0.2.0",
+        "semver": "^6.1.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "babel-plugin-polyfill-corejs3": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.0.tgz",
+      "integrity": "sha512-zZyi7p3BCUyzNxLx8KV61zTINkkV65zVkDAFNZmrTCRVhjo1jAS+YLvDJ9Jgd/w2tsAviCwFHReYfxO3Iql8Yg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.2.0",
+        "core-js-compat": "^3.9.1"
+      }
+    },
+    "babel-plugin-polyfill-regenerator": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.0.tgz",
+      "integrity": "sha512-J7vKbCuD2Xi/eEHxquHN14bXAW9CXtecwuLrOIDJtcZzTaPzV1VdEfoUf9AzcRBMolKUQKM9/GVojeh0hFiqMg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.2.0"
+      }
+    },
+    "babel-preset-current-node-syntax": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
+      "integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-bigint": "^7.8.3",
+        "@babel/plugin-syntax-class-properties": "^7.8.3",
+        "@babel/plugin-syntax-import-meta": "^7.8.3",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.8.3",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-top-level-await": "^7.8.3"
+      }
+    },
+    "babel-preset-jest": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-26.6.2.tgz",
+      "integrity": "sha512-YvdtlVm9t3k777c5NPQIv6cxFFFapys25HiUmuSgHwIZhfifweR5c5Sf5nwE3MAbfu327CYSvps8Yx6ANLyleQ==",
+      "dev": true,
+      "requires": {
+        "babel-plugin-jest-hoist": "^26.6.2",
+        "babel-preset-current-node-syntax": "^1.0.0"
+      }
+    },
+    "baconipsum": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/baconipsum/-/baconipsum-0.1.2.tgz",
+      "integrity": "sha1-sudltKgEhiP0Ys6ptBLJB4yZG28=",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "base": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
+      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
+      "dev": true,
+      "requires": {
+        "cache-base": "^1.0.1",
+        "class-utils": "^0.3.5",
+        "component-emitter": "^1.2.1",
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.1",
+        "mixin-deep": "^1.2.0",
+        "pascalcase": "^0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "base62": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/base62/-/base62-2.0.1.tgz",
+      "integrity": "sha512-4t4WQK7mdbcWzqEBiq6tfo2qDCeIZGXvjifJZyxHIVcjQkZJxpFtu/pa2Va69OouCkg6izZ08hKnPxroeDyzew==",
+      "dev": true
+    },
+    "base64-arraybuffer": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz",
+      "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=",
+      "dev": true
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true
+    },
+    "base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "dev": true
+    },
+    "basic-auth": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
+      "dev": true
+    },
+    "bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "dev": true,
+      "requires": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
+    "bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "requires": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+          "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+          "dev": true,
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.1.13"
+          }
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "blueimp-md5": {
+      "version": "2.18.0",
+      "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.18.0.tgz",
+      "integrity": "sha512-vE52okJvzsVWhcgUHOv+69OG3Mdg151xyn41aVQN/5W5S+S43qZhxECtYLAEHMSFWX6Mv5IZrzj3T5+JqXfj5Q==",
+      "dev": true
+    },
+    "body": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/body/-/body-5.1.0.tgz",
+      "integrity": "sha1-5LoM5BCkaTYyM2dgnstOZVMSUGk=",
+      "dev": true,
+      "requires": {
+        "continuable-cache": "^0.3.1",
+        "error": "^7.0.0",
+        "raw-body": "~1.1.0",
+        "safe-json-parse": "~1.0.1"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz",
+          "integrity": "sha1-NWnt6Lo0MV+rmcPpLLBMciDeH6g=",
+          "dev": true
+        },
+        "raw-body": {
+          "version": "1.1.7",
+          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-1.1.7.tgz",
+          "integrity": "sha1-HQJ8K/oRasxmI7yo8AAWVyqH1CU=",
+          "dev": true,
+          "requires": {
+            "bytes": "1",
+            "string_decoder": "0.10"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        }
+      }
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "dev": true,
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        },
+        "qs": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+          "dev": true
+        }
+      }
+    },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
+    },
+    "bower-config": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/bower-config/-/bower-config-1.4.3.tgz",
+      "integrity": "sha512-MVyyUk3d1S7d2cl6YISViwJBc2VXCkxF5AUFykvN0PQj5FsUiMNSgAYTso18oRFfyZ6XEtjrgg9MAaufHbOwNw==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.3",
+        "minimist": "^0.2.1",
+        "mout": "^1.0.0",
+        "osenv": "^0.1.3",
+        "untildify": "^2.1.0",
+        "wordwrap": "^0.0.3"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.2.1.tgz",
+          "integrity": "sha512-GY8fANSrTMfBVfInqJAY41QkOM+upUTytK1jZ0c8+3HdHrJxBJ3rF5i9moClXTE8uUSnUo8cAsCoxDXvSY4DHg==",
+          "dev": true
+        }
+      }
+    },
+    "boxen": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.0.0.tgz",
+      "integrity": "sha512-5bvsqw+hhgUi3oYGK0Vf4WpIkyemp60WBInn7+WNfoISzAqk/HX4L7WNROq38E6UR/y3YADpv6pEm4BfkeEAdA==",
+      "dev": true,
+      "requires": {
+        "ansi-align": "^3.0.0",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.1.0",
+        "cli-boxes": "^2.2.1",
+        "string-width": "^4.2.0",
+        "type-fest": "^0.20.2",
+        "widest-line": "^3.1.0",
+        "wrap-ansi": "^7.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "camelcase": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
+          "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+          "dev": true
+        },
+        "wrap-ansi": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        }
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "brcast": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brcast/-/brcast-2.0.2.tgz",
+      "integrity": "sha512-Tfn5JSE7hrUlFcOoaLzVvkbgIemIorMIyoMr3TgvszWW7jFt2C9PdeMLtysYD9RU0MmU17b69+XJG1eRY2OBRg=="
+    },
+    "browser-process-hrtime": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
+      "dev": true
+    },
+    "browser-stdout": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
+      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
+      "dev": true
+    },
+    "browserslist": {
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz",
+      "integrity": "sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "^1.0.30001181",
+        "colorette": "^1.2.1",
+        "electron-to-chromium": "^1.3.649",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.70"
+      }
+    },
+    "bser": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
+      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
+      "dev": true,
+      "requires": {
+        "node-int64": "^0.4.0"
+      }
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "dev": true
+    },
+    "buffer-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-1.0.0.tgz",
+      "integrity": "sha1-WWFrSYME1Var1GaWayLu2j7KX74=",
+      "dev": true
+    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "dev": true
+    },
+    "busboy": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz",
+      "integrity": "sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=",
+      "dev": true,
+      "requires": {
+        "dicer": "0.2.5",
+        "readable-stream": "1.1.x"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        }
+      }
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "dev": true
+    },
+    "cache-base": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
+      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
+      "dev": true,
+      "requires": {
+        "collection-visit": "^1.0.0",
+        "component-emitter": "^1.2.1",
+        "get-value": "^2.0.6",
+        "has-value": "^1.0.0",
+        "isobject": "^3.0.1",
+        "set-value": "^2.0.0",
+        "to-object-path": "^0.3.0",
+        "union-value": "^1.0.0",
+        "unset-value": "^1.0.0"
+      }
+    },
+    "cacheable-request": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
+      "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
+      "dev": true,
+      "requires": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^3.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^4.1.0",
+        "responselike": "^1.0.2"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+          "dev": true,
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "lowercase-keys": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+          "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+          "dev": true
+        }
+      }
+    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
+    },
+    "camel-case": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
+      "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
+      "dev": true,
+      "requires": {
+        "no-case": "^2.2.0",
+        "upper-case": "^1.1.1"
+      }
+    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true
+    },
+    "caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001198",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001198.tgz",
+      "integrity": "sha512-r5GGgESqOPZzwvdLVER374FpQu2WluCF1Z2DSiFJ89KSmGjT0LVKjgv4NcAqHmGWF9ihNpqRI9KXO9Ex4sKsgA==",
+      "dev": true
+    },
+    "capture-exit": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
+      "integrity": "sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==",
+      "dev": true,
+      "requires": {
+        "rsvp": "^4.8.4"
+      }
+    },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
+      "dev": true
+    },
+    "chai": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.4.tgz",
+      "integrity": "sha512-yS5H68VYOCtN1cjfwumDSuzn/9c+yza4f3reKXlE5rUg7SFcCEy90gJvydNgOYtblyf4Zi6jIWRnXOgErta0KA==",
+      "dev": true,
+      "requires": {
+        "assertion-error": "^1.1.0",
+        "check-error": "^1.0.2",
+        "deep-eql": "^3.0.1",
+        "get-func-name": "^2.0.0",
+        "pathval": "^1.1.1",
+        "type-detect": "^4.0.5"
+      }
+    },
+    "chai-as-promised": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/chai-as-promised/-/chai-as-promised-7.1.1.tgz",
+      "integrity": "sha512-azL6xMoi+uxu6z4rhWQ1jbdUhOMhis2PvscD/xjLqNMkv3BPPp2JyyuTHOrf9BOosGpNQ11v6BKv/g57RXbiaA==",
+      "dev": true,
+      "requires": {
+        "check-error": "^1.0.2"
+      }
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+      "dev": true
+    },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
+      "dev": true
+    },
+    "check-dependencies": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/check-dependencies/-/check-dependencies-1.1.0.tgz",
+      "integrity": "sha512-GDrbGzzJ6Gc6tQh87HBMGhrJ4UWIlR9MKJwgvlrJyj/gWvTYYb2jQetKbajt/EYK5Y8/4g7gH2LEvq8GdUWTag==",
+      "dev": true,
+      "requires": {
+        "bower-config": "^1.4.0",
+        "chalk": "^2.1.0",
+        "findup-sync": "^2.0.0",
+        "lodash.camelcase": "^4.3.0",
+        "minimist": "^1.2.0",
+        "semver": "^5.4.1"
+      },
+      "dependencies": {
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "findup-sync": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-2.0.0.tgz",
+          "integrity": "sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=",
+          "dev": true,
+          "requires": {
+            "detect-file": "^1.0.0",
+            "is-glob": "^3.1.0",
+            "micromatch": "^3.0.4",
+            "resolve-dir": "^1.0.1"
+          }
+        },
+        "is-glob": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+          "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^2.1.0"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "dev": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        }
+      }
+    },
+    "check-error": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
+      "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=",
+      "dev": true
+    },
+    "cheerio": {
+      "version": "1.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.5.tgz",
+      "integrity": "sha512-yoqps/VCaZgN4pfXtenwHROTp8NG6/Hlt4Jpz2FEP0ZJQ+ZUkVDd0hAPDNKhj3nakpfPt/CNs57yEtxD1bXQiw==",
+      "dev": true,
+      "requires": {
+        "cheerio-select-tmp": "^0.1.0",
+        "dom-serializer": "~1.2.0",
+        "domhandler": "^4.0.0",
+        "entities": "~2.1.0",
+        "htmlparser2": "^6.0.0",
+        "parse5": "^6.0.0",
+        "parse5-htmlparser2-tree-adapter": "^6.0.0"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.2.0.tgz",
+          "integrity": "sha512-n6kZFH/KlCrqs/1GHMOd5i2fd/beQHuehKdWvNNffbGHTr/almdhuVvTVFb3V7fglz+nC50fFusu3lY33h12pA==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.0.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz",
+          "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==",
+          "dev": true
+        },
+        "domutils": {
+          "version": "2.4.4",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.4.tgz",
+          "integrity": "sha512-jBC0vOsECI4OMdD0GC9mGn7NXPLb+Qt6KW1YDQzeQYRUFKmNG8lh7mO5HiELfr+lLQE7loDVI4QcAxV80HS+RA==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.0.0"
+          }
+        },
+        "entities": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+          "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+          "dev": true
+        },
+        "htmlparser2": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.0.1.tgz",
+          "integrity": "sha512-GDKPd+vk4jvSuvCbyuzx/unmXkk090Azec7LovXP8as1Hn8q9p3hbjmDGbUqqhknw0ajwit6LiiWqfiTUPMK7w==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.0.0",
+            "domutils": "^2.4.4",
+            "entities": "^2.0.0"
+          }
+        },
+        "parse5": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+          "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+          "dev": true
+        }
+      }
+    },
+    "cheerio-select-tmp": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/cheerio-select-tmp/-/cheerio-select-tmp-0.1.1.tgz",
+      "integrity": "sha512-YYs5JvbpU19VYJyj+F7oYrIE2BOll1/hRU7rEy/5+v9BzkSo3bK81iAeeQEMI92vRIxz677m72UmJUiVwwgjfQ==",
+      "dev": true,
+      "requires": {
+        "css-select": "^3.1.2",
+        "css-what": "^4.0.0",
+        "domelementtype": "^2.1.0",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.4.4"
+      },
+      "dependencies": {
+        "css-select": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-3.1.2.tgz",
+          "integrity": "sha512-qmss1EihSuBNWNNhHjxzxSfJoFBM/lERB/Q4EnsJQQC62R2evJDW481091oAdOr9uh46/0n4nrg0It5cAnj1RA==",
+          "dev": true,
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^4.0.0",
+            "domhandler": "^4.0.0",
+            "domutils": "^2.4.3",
+            "nth-check": "^2.0.0"
+          }
+        },
+        "css-what": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-4.0.0.tgz",
+          "integrity": "sha512-teijzG7kwYfNVsUh2H/YN62xW3KK9YhXEgSlbxMlcyjPNvdKJqFx5lrwlJgoFP1ZHlB89iGDlo/JyshKeRhv5A==",
+          "dev": true
+        },
+        "dom-serializer": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.2.0.tgz",
+          "integrity": "sha512-n6kZFH/KlCrqs/1GHMOd5i2fd/beQHuehKdWvNNffbGHTr/almdhuVvTVFb3V7fglz+nC50fFusu3lY33h12pA==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.0.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz",
+          "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==",
+          "dev": true
+        },
+        "domutils": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.5.0.tgz",
+          "integrity": "sha512-Ho16rzNMOFk2fPwChGh3D2D9OEHAfG19HgmRR2l+WLSsIstNsAYBzePH412bL0y5T44ejABIVfTHQ8nqi/tBCg==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.0.0"
+          }
+        },
+        "nth-check": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
+          "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
+          "dev": true,
+          "requires": {
+            "boolbase": "^1.0.0"
+          }
+        }
+      }
+    },
+    "chokidar": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
+      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.1",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.5.0"
+      }
+    },
+    "chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "dev": true
+    },
+    "chunkd": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/chunkd/-/chunkd-2.0.1.tgz",
+      "integrity": "sha512-7d58XsFmOq0j6el67Ug9mHf9ELUXsQXYJBkyxhH/k+6Ke0qXRnv0kbemx+Twc6fRJ07C49lcbdgm9FL1Ei/6SQ==",
+      "dev": true
+    },
+    "ci-info": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
+      "dev": true
+    },
+    "ci-parallel-vars": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ci-parallel-vars/-/ci-parallel-vars-1.0.1.tgz",
+      "integrity": "sha512-uvzpYrpmidaoxvIQHM+rKSrigjOe9feHYbw4uOI2gdfe1C3xIlxO+kVXq83WQWNniTf8bAxVpy+cQeFQsMERKg==",
+      "dev": true
+    },
+    "cjs-module-lexer": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz",
+      "integrity": "sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw==",
+      "dev": true
+    },
+    "cjson": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/cjson/-/cjson-0.3.0.tgz",
+      "integrity": "sha1-5kObkHA9MS/24iJAl76pLOPQKhQ=",
+      "dev": true,
+      "requires": {
+        "jsonlint": "1.6.0"
+      }
+    },
+    "class-utils": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
+      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
+      "dev": true,
+      "requires": {
+        "arr-union": "^3.1.0",
+        "define-property": "^0.2.5",
+        "isobject": "^3.0.0",
+        "static-extend": "^0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        }
+      }
+    },
+    "clean-css": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
+      "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
+      "dev": true,
+      "requires": {
+        "source-map": "~0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "dev": true
+    },
+    "clean-yaml-object": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/clean-yaml-object/-/clean-yaml-object-0.1.0.tgz",
+      "integrity": "sha1-Y/sRDcLOGoTcIfbZM0h20BCui2g=",
+      "dev": true
+    },
+    "cli-boxes": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
+      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==",
+      "dev": true
+    },
+    "cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "requires": {
+        "restore-cursor": "^3.1.0"
+      }
+    },
+    "cli-highlight": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/cli-highlight/-/cli-highlight-2.1.11.tgz",
+      "integrity": "sha512-9KDcoEVwyUXrjcJNvHD0NFc/hiwe/WPVYIleQh2O1N2Zro5gWJZ/K+3DGn8w8P/F6FxOgzyC5bxDyHIgCSPhGg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0",
+        "highlight.js": "^10.7.1",
+        "mz": "^2.4.0",
+        "parse5": "^5.1.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.0",
+        "yargs": "^16.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "5.0.8",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+          "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "20.2.7",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz",
+          "integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==",
+          "dev": true
+        }
+      }
+    },
+    "cli-spinners": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.5.0.tgz",
+      "integrity": "sha512-PC+AmIuK04E6aeSs/pUccSujsTzBhu4HzC2dL+CfJB/Jcc2qTRbEwZQDfIUpt2Xl8BodYBEq8w4fc0kU2I9DjQ==",
+      "dev": true
+    },
+    "cli-truncate": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
+      "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
+      "dev": true,
+      "requires": {
+        "slice-ansi": "^3.0.0",
+        "string-width": "^4.2.0"
+      }
+    },
+    "cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dev": true,
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+      "dev": true
+    },
+    "clone-buffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/clone-buffer/-/clone-buffer-1.0.0.tgz",
+      "integrity": "sha1-4+JbIHrE5wGvch4staFnksrD3Fg=",
+      "dev": true
+    },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
+    "clone-response": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
+      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
+      "dev": true,
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "clone-stats": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-1.0.0.tgz",
+      "integrity": "sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=",
+      "dev": true
+    },
+    "cloneable-readable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/cloneable-readable/-/cloneable-readable-1.1.3.tgz",
+      "integrity": "sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "process-nextick-args": "^2.0.0",
+        "readable-stream": "^2.3.5"
+      }
+    },
+    "co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
+      "dev": true
+    },
+    "code-excerpt": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/code-excerpt/-/code-excerpt-3.0.0.tgz",
+      "integrity": "sha512-VHNTVhd7KsLGOqfX3SyeO8RyYPMp1GJOg194VITk04WMYCv4plV68YWe6TJZxd9MhobjtpMRnVky01gqZsalaw==",
+      "dev": true,
+      "requires": {
+        "convert-to-spaces": "^1.0.1"
+      }
+    },
+    "codecov": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.8.2.tgz",
+      "integrity": "sha512-6w/kt/xvmPsWMfDFPE/T054txA9RTgcJEw36PNa6MYX+YV29jCHCRFXwbQ3QZBTOgnex1J2WP8bo2AT8TWWz9g==",
+      "dev": true,
+      "requires": {
+        "argv": "0.0.2",
+        "ignore-walk": "3.0.3",
+        "js-yaml": "3.14.1",
+        "teeny-request": "7.0.1",
+        "urlgrey": "0.4.4"
+      }
+    },
+    "coffee-script": {
+      "version": "1.12.7",
+      "resolved": "https://registry.npmjs.org/coffee-script/-/coffee-script-1.12.7.tgz",
+      "integrity": "sha512-fLeEhqwymYat/MpTPUjSKHVYYl0ec2mOyALEMLmzr5i1isuG+6jfI2j2d5oBO3VIzgUXgBVIcOT9uH1TFxBckw==",
+      "dev": true
+    },
+    "collect-v8-coverage": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
+      "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==",
+      "dev": true
+    },
+    "collection-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
+      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
+      "dev": true,
+      "requires": {
+        "map-visit": "^1.0.0",
+        "object-visit": "^1.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+      "dev": true
+    },
+    "colord": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.0.0.tgz",
+      "integrity": "sha512-WMDFJfoY3wqPZNpKUFdse3HhD5BHCbE9JCdxRzoVH+ywRITGOeWAHNkGEmyxLlErEpN9OLMWgdM9dWQtDk5dog==",
+      "dev": true
+    },
+    "colorette": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
+      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
+      "dev": true
+    },
+    "colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true
+    },
+    "comment-parser": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.1.5.tgz",
+      "integrity": "sha512-RePCE4leIhBlmrqiYTvaqEeGYg7qpSl4etaIabKtdOQVi+mSTIBBklGUwIr79GXYnl3LpMwmDw4KeR2stNc6FA==",
+      "dev": true
+    },
+    "common-path-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
+      "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==",
+      "dev": true
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
+      "dev": true
+    },
+    "component-emitter": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
+      "dev": true
+    },
+    "compress-commons": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-0.2.9.tgz",
+      "integrity": "sha1-Qi2SdDDAGr0GzUVbbfwEy0z4ADw=",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "~0.2.1",
+        "crc32-stream": "~0.3.1",
+        "node-int64": "~0.3.0",
+        "readable-stream": "~1.0.26"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "node-int64": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.3.3.tgz",
+          "integrity": "sha1-LW5rLs5d6FiLQ9iNG8QbJs0fqE0=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        }
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "concat-with-sourcemaps": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
+      "integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
+      "dev": true,
+      "requires": {
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "concordance": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/concordance/-/concordance-5.0.3.tgz",
+      "integrity": "sha512-niSG8GwnplIe5fXZCmIrbAaF41Eqt2A1PVG269flPzndjccwKbyIhyZYsbTBW+0IF5lWf4RWn9WstSxyKq8hIg==",
+      "dev": true,
+      "requires": {
+        "date-time": "^3.1.0",
+        "esutils": "^2.0.3",
+        "fast-diff": "^1.2.0",
+        "js-string-escape": "^1.0.1",
+        "lodash": "^4.17.15",
+        "md5-hex": "^3.0.1",
+        "semver": "^7.3.2",
+        "well-known-symbols": "^2.0.0"
+      }
+    },
+    "configstore": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
+      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
+      "dev": true,
+      "requires": {
+        "dot-prop": "^5.2.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^3.0.0",
+        "unique-string": "^2.0.0",
+        "write-file-atomic": "^3.0.0",
+        "xdg-basedir": "^4.0.0"
+      }
+    },
+    "connect": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
+      "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "finalhandler": "1.1.2",
+        "parseurl": "~1.3.3",
+        "utils-merge": "1.0.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "connect-header": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/connect-header/-/connect-header-0.0.5.tgz",
+      "integrity": "sha1-FotwoXcNZiXOrzVUnwL9DX8UU1s=",
+      "dev": true
+    },
+    "connect-livereload": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/connect-livereload/-/connect-livereload-0.6.1.tgz",
+      "integrity": "sha512-3R0kMOdL7CjJpU66fzAkCe6HNtd3AavCS4m+uW4KtJjrdGPT0SQEZieAYd+cm+lJoBznNQ4lqipYWkhBMgk00g==",
+      "dev": true
+    },
+    "consolidated-events": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/consolidated-events/-/consolidated-events-2.0.2.tgz",
+      "integrity": "sha512-2/uRVMdRypf5z/TW/ncD/66l75P5hH2vM/GR8Jf8HLc2xnfJtmina6F6du8+v4Z2vTrMo7jC+W1tmEEuuELgkQ=="
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "dev": true
+    },
+    "continuable-cache": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/continuable-cache/-/continuable-cache-0.3.1.tgz",
+      "integrity": "sha1-vXJ6f67XfnH/OYWskzUakSczrQ8=",
+      "dev": true
+    },
+    "convert-source-map": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "convert-to-spaces": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/convert-to-spaces/-/convert-to-spaces-1.0.2.tgz",
+      "integrity": "sha1-fj5Iu+bZl7FBfdyihoIEtNPYVxU=",
+      "dev": true
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
+      "dev": true
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
+      "dev": true
+    },
+    "copy-descriptor": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
+      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
+      "dev": true
+    },
+    "core-js": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.9.1.tgz",
+      "integrity": "sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg==",
+      "dev": true
+    },
+    "core-js-compat": {
+      "version": "3.12.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.12.1.tgz",
+      "integrity": "sha512-i6h5qODpw6EsHAoIdQhKoZdWn+dGBF3dSS8m5tif36RlWvW3A6+yu2S16QHUo3CrkzrnEskMAt9f8FxmY9fhWQ==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.16.6",
+        "semver": "7.0.0"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.16.6",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+          "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001219",
+            "colorette": "^1.2.2",
+            "electron-to-chromium": "^1.3.723",
+            "escalade": "^3.1.1",
+            "node-releases": "^1.1.71"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001228",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz",
+          "integrity": "sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.727",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.727.tgz",
+          "integrity": "sha512-Mfz4FIB4FSvEwBpDfdipRIrwd6uo8gUDoRDF4QEYb4h4tSuI3ov594OrjU6on042UlFHouIJpClDODGkPcBSbg==",
+          "dev": true
+        },
+        "semver": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+          "dev": true
+        }
+      }
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "dev": true
+    },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
+    "cosmiconfig": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
+      "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
+      "dev": true,
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      }
+    },
+    "crc32-stream": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-0.3.4.tgz",
+      "integrity": "sha1-c7wltF+sHbZjIjGnv86JJ+nwZVI=",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "~0.2.1",
+        "readable-stream": "~1.0.24"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        }
+      }
+    },
+    "cross-spawn": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "dev": true,
+      "requires": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
+      "dev": true
+    },
+    "crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "dev": true
+    },
+    "css-color-names": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz",
+      "integrity": "sha512-/loXYOch1qU1biStIFsHH8SxTmOseh1IJqFvy8IujXOm1h+QjUdDhkzOrR5HG8K8mlxREj0yfi8ewCHx0eMxzA==",
+      "dev": true
+    },
+    "css-declaration-sorter": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.0.3.tgz",
+      "integrity": "sha512-52P95mvW1SMzuRZegvpluT6yEv0FqQusydKQPZsNN5Q7hh8EwQvN8E2nwuJ16BBvNN6LcoIZXu/Bk58DAhrrxw==",
+      "dev": true,
+      "requires": {
+        "timsort": "^0.3.0"
+      }
+    },
+    "css-jss": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/css-jss/-/css-jss-10.6.0.tgz",
+      "integrity": "sha512-4SE0tWggVM6Y4UTcKMoZXFBuhzycY6fKEdONr7wn89SIFd4eXiUZ0f5f4tLwXyFOW2q13JReXp8n9vSLKp48/g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.6.0",
+        "jss-preset-default": "10.6.0"
+      }
+    },
+    "css-select": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-3.1.2.tgz",
+      "integrity": "sha512-qmss1EihSuBNWNNhHjxzxSfJoFBM/lERB/Q4EnsJQQC62R2evJDW481091oAdOr9uh46/0n4nrg0It5cAnj1RA==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^4.0.0",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.4.3",
+        "nth-check": "^2.0.0"
+      },
+      "dependencies": {
+        "css-what": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-4.0.0.tgz",
+          "integrity": "sha512-teijzG7kwYfNVsUh2H/YN62xW3KK9YhXEgSlbxMlcyjPNvdKJqFx5lrwlJgoFP1ZHlB89iGDlo/JyshKeRhv5A==",
+          "dev": true
+        }
+      }
+    },
+    "css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
+    "css-what": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.0.tgz",
+      "integrity": "sha512-qxyKHQvgKwzwDWC/rGbT821eJalfupxYW2qbSJSAtdSTimsr/MlaGONoNLllaUPZWf8QnbcKM/kPVYUQuEKAFA==",
+      "dev": true
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
+    "cssnano": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.4.tgz",
+      "integrity": "sha512-I+fDW74CJ4yb31765ov9xXe70XLZvFTXjwhmA//VgAAuSAU34Oblbe94Q9zffiCX1VhcSfQWARQnwhz+Nqgb4Q==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^7.0.0",
+        "cssnano-preset-default": "^5.1.1",
+        "is-resolvable": "^1.1.0"
+      }
+    },
+    "cssnano-preset-default": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.1.tgz",
+      "integrity": "sha512-kAhR71Tascmnjlhl4UegGA3KGGbMLXHkkqVpA9idsRT1JmIhIsz1C3tDpBeQMUw5EX5Rfb1HGc/PRqD2AFk3Vg==",
+      "dev": true,
+      "requires": {
+        "css-declaration-sorter": "^6.0.3",
+        "cssnano-utils": "^2.0.1",
+        "postcss-calc": "^8.0.0",
+        "postcss-colormin": "^5.1.1",
+        "postcss-convert-values": "^5.0.1",
+        "postcss-discard-comments": "^5.0.1",
+        "postcss-discard-duplicates": "^5.0.1",
+        "postcss-discard-empty": "^5.0.1",
+        "postcss-discard-overridden": "^5.0.1",
+        "postcss-merge-longhand": "^5.0.2",
+        "postcss-merge-rules": "^5.0.1",
+        "postcss-minify-font-values": "^5.0.1",
+        "postcss-minify-gradients": "^5.0.1",
+        "postcss-minify-params": "^5.0.1",
+        "postcss-minify-selectors": "^5.1.0",
+        "postcss-normalize-charset": "^5.0.1",
+        "postcss-normalize-display-values": "^5.0.1",
+        "postcss-normalize-positions": "^5.0.1",
+        "postcss-normalize-repeat-style": "^5.0.1",
+        "postcss-normalize-string": "^5.0.1",
+        "postcss-normalize-timing-functions": "^5.0.1",
+        "postcss-normalize-unicode": "^5.0.1",
+        "postcss-normalize-url": "^5.0.1",
+        "postcss-normalize-whitespace": "^5.0.1",
+        "postcss-ordered-values": "^5.0.1",
+        "postcss-reduce-initial": "^5.0.1",
+        "postcss-reduce-transforms": "^5.0.1",
+        "postcss-svgo": "^5.0.1",
+        "postcss-unique-selectors": "^5.0.1"
+      }
+    },
+    "cssnano-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz",
+      "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==",
+      "dev": true
+    },
+    "csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dev": true,
+      "requires": {
+        "css-tree": "^1.1.2"
+      }
+    },
+    "cssom": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
+      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
+      "dev": true
+    },
+    "cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "dev": true,
+      "requires": {
+        "cssom": "~0.3.6"
+      },
+      "dependencies": {
+        "cssom": {
+          "version": "0.3.8",
+          "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+          "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+          "dev": true
+        }
+      }
+    },
+    "csstype": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+    },
+    "currently-unhandled": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
+      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
+      "dev": true,
+      "requires": {
+        "array-find-index": "^1.0.1"
+      }
+    },
+    "custom-event": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
+      "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=",
+      "dev": true
+    },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "data-urls": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
+      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
+      "dev": true,
+      "requires": {
+        "abab": "^2.0.3",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.0.0"
+      }
+    },
+    "date-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/date-format/-/date-format-3.0.0.tgz",
+      "integrity": "sha512-eyTcpKOcamdhWJXj56DpQMo1ylSQpcGtGKXcU0Tb97+K56/CF5amAqqqNj0+KvA0iw2ynxtHWFsPDSClCxe48w==",
+      "dev": true
+    },
+    "date-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/date-time/-/date-time-3.1.0.tgz",
+      "integrity": "sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==",
+      "dev": true,
+      "requires": {
+        "time-zone": "^1.0.0"
+      }
+    },
+    "debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
+      "dev": true
+    },
+    "debug": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dev": true,
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true
+    },
+    "decimal.js": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.2.1.tgz",
+      "integrity": "sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw==",
+      "dev": true
+    },
+    "decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
+      "dev": true
+    },
+    "decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+      "dev": true,
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "deep-eql": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz",
+      "integrity": "sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==",
+      "dev": true,
+      "requires": {
+        "type-detect": "^4.0.0"
+      }
+    },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true
+    },
+    "deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
+      "dev": true
+    },
+    "deepmerge": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
+    },
+    "defaults": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
+      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
+      "dev": true,
+      "requires": {
+        "clone": "^1.0.2"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+          "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
+          "dev": true
+        }
+      }
+    },
+    "defer-to-connect": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
+      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==",
+      "dev": true
+    },
+    "define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true
+    },
+    "define-properties": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
+      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "requires": {
+        "object-keys": "^1.0.12"
+      }
+    },
+    "define-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+      "dev": true,
+      "requires": {
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
+      },
+      "dependencies": {
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "del": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz",
+      "integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==",
+      "dev": true,
+      "requires": {
+        "globby": "^11.0.1",
+        "graceful-fs": "^4.2.4",
+        "is-glob": "^4.0.1",
+        "is-path-cwd": "^2.2.0",
+        "is-path-inside": "^3.0.2",
+        "p-map": "^4.0.0",
+        "rimraf": "^3.0.2",
+        "slash": "^3.0.0"
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "dev": true
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "dev": true
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
+      "dev": true
+    },
+    "detect-file": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+      "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=",
+      "dev": true
+    },
+    "detect-newline": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
+      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
+      "dev": true
+    },
+    "di": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
+      "integrity": "sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=",
+      "dev": true
+    },
+    "diacritics-map": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/diacritics-map/-/diacritics-map-0.1.0.tgz",
+      "integrity": "sha1-bfwP+dAQAKLt8oZTccrDFulJd68=",
+      "dev": true
+    },
+    "dicer": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.2.5.tgz",
+      "integrity": "sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "1.1.x",
+        "streamsearch": "0.1.2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        }
+      }
+    },
+    "diff": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.0.0.tgz",
+      "integrity": "sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==",
+      "dev": true
+    },
+    "diff-sequences": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
+      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
+      "dev": true
+    },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "requires": {
+        "path-type": "^4.0.0"
+      }
+    },
+    "direction": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz",
+      "integrity": "sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ=="
+    },
+    "discontinuous-range": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
+      "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
+      "dev": true
+    },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
+    "document.contains": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/document.contains/-/document.contains-1.0.2.tgz",
+      "integrity": "sha512-YcvYFs15mX8m3AO1QNQy3BlIpSMfNRj3Ujk2BEJxsZG+HZf7/hZ6jr7mDpXrF8q+ff95Vef5yjhiZxm8CGJr6Q==",
+      "requires": {
+        "define-properties": "^1.1.3"
+      }
+    },
+    "dom-serialize": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
+      "integrity": "sha1-ViromZ9Evl6jB29UGdzVnrQ6yVs=",
+      "dev": true,
+      "requires": {
+        "custom-event": "~1.0.0",
+        "ent": "~2.2.0",
+        "extend": "^3.0.0",
+        "void-elements": "^2.0.0"
+      }
+    },
+    "dom-serializer": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.1.tgz",
+      "integrity": "sha512-Pv2ZluG5ife96udGgEDovOOOA5UELkltfJpnIExPrAk1LTvecolUGn6lIaoLh86d83GiB86CjzciMd9BuRB71Q==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "entities": "^2.0.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "dev": true
+    },
+    "domexception": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
+      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
+      "dev": true,
+      "requires": {
+        "webidl-conversions": "^5.0.0"
+      },
+      "dependencies": {
+        "webidl-conversions": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
+          "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
+          "dev": true
+        }
+      }
+    },
+    "domhandler": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.0.0.tgz",
+      "integrity": "sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.1.0"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz",
+          "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==",
+          "dev": true
+        }
+      }
+    },
+    "dompurify": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.2.8.tgz",
+      "integrity": "sha512-9H0UL59EkDLgY3dUFjLV6IEUaHm5qp3mxSqWw7Yyx4Zhk2Jn2cmLe+CNPP3xy13zl8Bqg+0NehQzkdMoVhGRww=="
+    },
+    "domutils": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.5.2.tgz",
+      "integrity": "sha512-MHTthCb1zj8f1GVfRpeZUbohQf/HdBos0oX5gZcQFepOZPLLRyj6Wn7XS7EMnY7CVpwv8863u2vyE83Hfu28HQ==",
+      "dev": true,
+      "requires": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.1.0"
+      },
+      "dependencies": {
+        "domhandler": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.1.0.tgz",
+          "integrity": "sha512-/6/kmsGlMY4Tup/nGVutdrK9yQi4YjWVcVeoQmixpzjOUK1U7pQkvAPHBJeUxOgxF0J8f8lwCJSlCfD0V4CMGQ==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.2.0"
+          }
+        }
+      }
+    },
+    "dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "dev": true,
+      "requires": {
+        "is-obj": "^2.0.0"
+      }
+    },
+    "duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
+    },
+    "duplexer3": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=",
+      "dev": true
+    },
+    "duplexify": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
+      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "ebnf-parser": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/ebnf-parser/-/ebnf-parser-0.1.10.tgz",
+      "integrity": "sha1-zR9rpHfFY4xAyX7ZtXLbW6tdgzE=",
+      "dev": true
+    },
+    "ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+      "dev": true,
+      "requires": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
+      "dev": true
+    },
+    "electron-to-chromium": {
+      "version": "1.3.686",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.686.tgz",
+      "integrity": "sha512-SOJT3m00NX/gT3sD6E3PcZX6u3+zUmQq4+yp8QCKLOwf2ECnmh9eAY+eonhC/AAu5Gg2WrtUU2m7/+e85O0l6A==",
+      "dev": true
+    },
+    "emittery": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.7.2.tgz",
+      "integrity": "sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==",
+      "dev": true
+    },
+    "emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
+      "dev": true
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "engine.io": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-4.1.1.tgz",
+      "integrity": "sha512-t2E9wLlssQjGw0nluF6aYyfX8LwYU8Jj0xct+pAhfWfv/YrBn6TSNtEYsgxHIfaMqfrLx07czcMg9bMN6di+3w==",
+      "dev": true,
+      "requires": {
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.4.1",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~4.0.0",
+        "ws": "~7.4.2"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
+          "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==",
+          "dev": true
+        }
+      }
+    },
+    "engine.io-parser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.2.tgz",
+      "integrity": "sha512-sHfEQv6nmtJrq6TKuIz5kyEKH/qSdK56H/A+7DnAuUPWosnIZAS2NHNcPLmyjtY3cGS/MqJdZbUjW97JU72iYg==",
+      "dev": true,
+      "requires": {
+        "base64-arraybuffer": "0.1.4"
+      }
+    },
+    "enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^4.1.1"
+      }
+    },
+    "ent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
+      "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=",
+      "dev": true
+    },
+    "entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true
+    },
+    "enzyme": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.11.0.tgz",
+      "integrity": "sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==",
+      "dev": true,
+      "requires": {
+        "array.prototype.flat": "^1.2.3",
+        "cheerio": "^1.0.0-rc.3",
+        "enzyme-shallow-equal": "^1.0.1",
+        "function.prototype.name": "^1.1.2",
+        "has": "^1.0.3",
+        "html-element-map": "^1.2.0",
+        "is-boolean-object": "^1.0.1",
+        "is-callable": "^1.1.5",
+        "is-number-object": "^1.0.4",
+        "is-regex": "^1.0.5",
+        "is-string": "^1.0.5",
+        "is-subset": "^0.1.1",
+        "lodash.escape": "^4.0.1",
+        "lodash.isequal": "^4.5.0",
+        "object-inspect": "^1.7.0",
+        "object-is": "^1.0.2",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.1.1",
+        "object.values": "^1.1.1",
+        "raf": "^3.4.1",
+        "rst-selector-parser": "^2.2.3",
+        "string.prototype.trim": "^1.2.1"
+      }
+    },
+    "enzyme-adapter-preact-pure": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-preact-pure/-/enzyme-adapter-preact-pure-3.1.0.tgz",
+      "integrity": "sha512-IyhHVOe4TtgnQX/iF1PGvhNFXZCBJ8amRQ30Atb6actyelMh4tQAXEjj06FaO5c+frChgDw3YxtLxGEs1Mhv2A==",
+      "dev": true,
+      "requires": {
+        "array.prototype.flatmap": "^1.2.1"
+      }
+    },
+    "enzyme-shallow-equal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.4.tgz",
+      "integrity": "sha512-MttIwB8kKxypwHvRynuC3ahyNc+cFbR8mjVIltnmzQ0uKGqmsfO4bfBuLxb0beLNPhjblUEYvEbsg+VSygvF1Q==",
+      "requires": {
+        "has": "^1.0.3",
+        "object-is": "^1.1.2"
+      }
+    },
+    "equal-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/equal-length/-/equal-length-1.0.1.tgz",
+      "integrity": "sha1-IcoRLUirJLTh5//A5TOdMf38J0w=",
+      "dev": true
+    },
+    "error": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/error/-/error-7.2.1.tgz",
+      "integrity": "sha512-fo9HBvWnx3NGUKMvMwB/CBCMMrfEJgbDTVDEkPygA3Bdd3lM1OyCd+rbQ8BwnpF6GdVeOLDNmyL4N5Bg80ZvdA==",
+      "dev": true,
+      "requires": {
+        "string-template": "~0.2.1"
+      }
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "es-abstract": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz",
+      "integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.2",
+        "is-callable": "^1.2.3",
+        "is-negative-zero": "^2.0.1",
+        "is-regex": "^1.1.2",
+        "is-string": "^1.0.5",
+        "object-inspect": "^1.9.0",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "string.prototype.trimend": "^1.0.4",
+        "string.prototype.trimstart": "^1.0.4",
+        "unbox-primitive": "^1.0.0"
+      },
+      "dependencies": {
+        "get-intrinsic": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+          "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+          "requires": {
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1"
+          }
+        },
+        "has-symbols": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
+        },
+        "is-callable": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
+          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ=="
+        },
+        "is-negative-zero": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
+          "integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w=="
+        },
+        "is-regex": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz",
+          "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==",
+          "requires": {
+            "call-bind": "^1.0.2",
+            "has-symbols": "^1.0.1"
+          }
+        }
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
+    "esbuild": {
+      "version": "0.12.4",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.4.tgz",
+      "integrity": "sha512-HObgzMHbba5HzsHzxj1ccDIPWncCCCQjoruuLyS5geidwndqgLsjZEMt0XeSYIIbqoJFENGCEFQt4m2PtAFK2Q==",
+      "dev": true
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true
+    },
+    "escape-goat": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
+      "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==",
+      "dev": true
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "escodegen": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.0.0.tgz",
+      "integrity": "sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==",
+      "dev": true,
+      "requires": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "eslint": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.27.0.tgz",
+      "integrity": "sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.12.11",
+        "@eslint/eslintrc": "^0.4.1",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.0.1",
+        "doctrine": "^3.0.0",
+        "enquirer": "^2.3.5",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^2.1.0",
+        "eslint-visitor-keys": "^2.0.0",
+        "espree": "^7.3.1",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^5.0.0",
+        "globals": "^13.6.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^3.13.1",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.0.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "progress": "^2.0.0",
+        "regexpp": "^3.1.0",
+        "semver": "^7.2.1",
+        "strip-ansi": "^6.0.0",
+        "strip-json-comments": "^3.1.0",
+        "table": "^6.0.9",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.4"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+          "dev": true
+        },
+        "globals": {
+          "version": "13.8.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.8.0.tgz",
+          "integrity": "sha512-rHtdA6+PDBIjeEvA91rpqzEvk/k3/i7EeNQiryiWuJH0Hw9cpyJMAt2jtbAwUaRdhD+573X4vWw6IcjKPasi9Q==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.20.2"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
+        },
+        "levn": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+          "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+          "dev": true,
+          "requires": {
+            "prelude-ls": "^1.2.1",
+            "type-check": "~0.4.0"
+          }
+        },
+        "optionator": {
+          "version": "0.9.1",
+          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+          "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+          "dev": true,
+          "requires": {
+            "deep-is": "^0.1.3",
+            "fast-levenshtein": "^2.0.6",
+            "levn": "^0.4.1",
+            "prelude-ls": "^1.2.1",
+            "type-check": "^0.4.0",
+            "word-wrap": "^1.2.3"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        },
+        "prelude-ls": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+          "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
+        },
+        "strip-json-comments": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+          "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "type-check": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+          "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+          "dev": true,
+          "requires": {
+            "prelude-ls": "^1.2.1"
+          }
+        },
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+          "dev": true
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
+    "eslint-config-prettier": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz",
+      "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==",
+      "dev": true
+    },
+    "eslint-import-resolver-node": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
+      "integrity": "sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==",
+      "dev": true,
+      "requires": {
+        "debug": "^2.6.9",
+        "resolve": "^1.13.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "eslint-module-utils": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.1.tgz",
+      "integrity": "sha512-ZXI9B8cxAJIH4nfkhTwcRTEAnrVfobYqwjWy/QMCZ8rHkZHFjf9yO4BzpiF9kCSfNlMG54eKigISHpX0+AaT4A==",
+      "dev": true,
+      "requires": {
+        "debug": "^3.2.7",
+        "pkg-dir": "^2.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "find-up": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+          "dev": true,
+          "requires": {
+            "locate-path": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+          "dev": true,
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "dev": true,
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+          "dev": true,
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+          "dev": true
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        },
+        "pkg-dir": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
+          "integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=",
+          "dev": true,
+          "requires": {
+            "find-up": "^2.1.0"
+          }
+        }
+      }
+    },
+    "eslint-plugin-chai-expect": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-chai-expect/-/eslint-plugin-chai-expect-2.2.0.tgz",
+      "integrity": "sha512-ExTJKhgeYMfY8wDj3UiZmgpMKJOUHGNHmWMlxT49JUDB1vTnw0sSNfXJSxnX+LcebyBD/gudXzjzD136WqPJrQ==",
+      "dev": true
+    },
+    "eslint-plugin-eslint-plugin": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-eslint-plugin/-/eslint-plugin-eslint-plugin-3.0.3.tgz",
+      "integrity": "sha512-vVNx9qexy0iQwqtOzzJPFAfC6j6i4L6QE//JqwJOnAC5aUHJA4yFQy56kX9JOJ2rx3iKlpTt3h/adErgbqU/SA==",
+      "dev": true,
+      "requires": {
+        "eslint-utils": "^2.1.0"
+      }
+    },
+    "eslint-plugin-google-camelcase": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-google-camelcase/-/eslint-plugin-google-camelcase-0.0.2.tgz",
+      "integrity": "sha1-DCdVXkeCBzRC0DSj2x8hTuCzdAE=",
+      "dev": true
+    },
+    "eslint-plugin-import": {
+      "version": "2.23.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.23.3.tgz",
+      "integrity": "sha512-wDxdYbSB55F7T5CC7ucDjY641VvKmlRwT0Vxh7PkY1mI4rclVRFWYfsrjDgZvwYYDZ5ee0ZtfFKXowWjqvEoRQ==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.3",
+        "array.prototype.flat": "^1.2.4",
+        "debug": "^2.6.9",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.4",
+        "eslint-module-utils": "^2.6.1",
+        "find-up": "^2.0.0",
+        "has": "^1.0.3",
+        "is-core-module": "^2.4.0",
+        "minimatch": "^3.0.4",
+        "object.values": "^1.1.3",
+        "pkg-up": "^2.0.0",
+        "read-pkg-up": "^3.0.0",
+        "resolve": "^1.20.0",
+        "tsconfig-paths": "^3.9.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "find-up": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+          "dev": true,
+          "requires": {
+            "locate-path": "^2.0.0"
+          }
+        },
+        "is-core-module": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
+          "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
+          "dev": true,
+          "requires": {
+            "has": "^1.0.3"
+          }
+        },
+        "load-json-file": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+          "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "parse-json": "^4.0.0",
+            "pify": "^3.0.0",
+            "strip-bom": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+          "dev": true,
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "dev": true,
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+          "dev": true,
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+          "dev": true
+        },
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+          "dev": true,
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        },
+        "path-type": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+          "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+          "dev": true,
+          "requires": {
+            "pify": "^3.0.0"
+          }
+        },
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        },
+        "read-pkg": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
+          "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
+          "dev": true,
+          "requires": {
+            "load-json-file": "^4.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^3.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz",
+          "integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=",
+          "dev": true,
+          "requires": {
+            "find-up": "^2.0.0",
+            "read-pkg": "^3.0.0"
+          }
+        },
+        "strip-bom": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+          "dev": true
+        }
+      }
+    },
+    "eslint-plugin-jasmine": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jasmine/-/eslint-plugin-jasmine-4.1.2.tgz",
+      "integrity": "sha512-Jr52EBi6Ql5WVDvRCKBID9kRD6/CaObvCWmgHpqobczX2Mzt8/QMu9vpgx6q/O5jyQ9CIGrKaEbPuEfHRf8guw==",
+      "dev": true
+    },
+    "eslint-plugin-jsdoc": {
+      "version": "35.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-35.0.0.tgz",
+      "integrity": "sha512-n92EO6g84qzjF4Lyvg+hDouMQTRHCKvW0hRobGRza0aqbG9fmmlS4p1x8cvPPAc0P87TmahMZnrP0F7hPOcAoQ==",
+      "dev": true,
+      "requires": {
+        "@es-joy/jsdoccomment": "^0.7.2",
+        "comment-parser": "1.1.5",
+        "debug": "^4.3.1",
+        "esquery": "^1.4.0",
+        "jsdoctypeparser": "^9.0.0",
+        "lodash": "^4.17.21",
+        "regextras": "^0.7.1",
+        "semver": "^7.3.5",
+        "spdx-expression-parse": "^3.0.1"
+      }
+    },
+    "eslint-plugin-local": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-local/-/eslint-plugin-local-1.0.0.tgz",
+      "integrity": "sha1-8MBwEclf7EK/tNkJ3rtuoDXzsqQ=",
+      "dev": true
+    },
+    "eslint-plugin-notice": {
+      "version": "0.9.10",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-notice/-/eslint-plugin-notice-0.9.10.tgz",
+      "integrity": "sha512-rF79EuqdJKu9hhTmwUkNeSvLmmq03m/NXq/NHwUENHbdJ0wtoyOjxZBhW4QCug8v5xYE6cGe3AWkGqSIe9KUbQ==",
+      "dev": true,
+      "requires": {
+        "find-root": "^1.1.0",
+        "lodash": "^4.17.15",
+        "metric-lcs": "^0.1.2"
+      }
+    },
+    "eslint-plugin-prettier": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz",
+      "integrity": "sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
+    "eslint-plugin-react": {
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.23.2.tgz",
+      "integrity": "sha512-AfjgFQB+nYszudkxRkTFu0UR1zEQig0ArVMPloKhxwlwkzaw/fBiH0QWcBBhZONlXqQC51+nfqFrkn4EzHcGBw==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.3",
+        "array.prototype.flatmap": "^1.2.4",
+        "doctrine": "^2.1.0",
+        "has": "^1.0.3",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.0.4",
+        "object.entries": "^1.1.3",
+        "object.fromentries": "^2.0.4",
+        "object.values": "^1.1.3",
+        "prop-types": "^15.7.2",
+        "resolve": "^2.0.0-next.3",
+        "string.prototype.matchall": "^4.0.4"
+      },
+      "dependencies": {
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "resolve": {
+          "version": "2.0.0-next.3",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz",
+          "integrity": "sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==",
+          "dev": true,
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        }
+      }
+    },
+    "eslint-plugin-react-hooks": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz",
+      "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==",
+      "dev": true
+    },
+    "eslint-plugin-sort-destructure-keys": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-sort-destructure-keys/-/eslint-plugin-sort-destructure-keys-1.3.5.tgz",
+      "integrity": "sha512-JmVpidhDsLwZsmRDV7Tf/vZgOAOEQGkLtwToSvX5mD8fuWYS/xkgMRBsalW1fGlc8CgJJwnzropt4oMQ7YCHLg==",
+      "dev": true,
+      "requires": {
+        "natural-compare-lite": "^1.4.0"
+      }
+    },
+    "eslint-plugin-sort-imports-es6-autofix": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-sort-imports-es6-autofix/-/eslint-plugin-sort-imports-es6-autofix-0.6.0.tgz",
+      "integrity": "sha512-2NVaBGF9NN+727Fyq+jJYihdIeegjXeUUrZED9Q8FVB8MsV3YQEyXG96GVnXqWt0pmn7xfCZOZf3uKnIhBrfeQ==",
+      "dev": true
+    },
+    "eslint-plugin-sort-requires": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-sort-requires/-/eslint-plugin-sort-requires-2.1.0.tgz",
+      "integrity": "sha1-PvrZSNyDeYIZ6An1QGfEDlVESGE=",
+      "dev": true
+    },
+    "eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      }
+    },
+    "eslint-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
+      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^1.1.0"
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "dev": true
+    },
+    "espree": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
+      "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.4.0",
+        "acorn-jsx": "^5.3.1",
+        "eslint-visitor-keys": "^1.3.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        }
+      }
+    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
+    },
+    "esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.1.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
+        }
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.2.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
+        }
+      }
+    },
+    "estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+      "dev": true
+    },
+    "event-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
+      "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
+      "dev": true,
+      "requires": {
+        "duplexer": "^0.1.1",
+        "from": "^0.1.7",
+        "map-stream": "0.0.7",
+        "pause-stream": "^0.0.11",
+        "split": "^1.0.1",
+        "stream-combiner": "^0.2.2",
+        "through": "^2.3.8"
+      }
+    },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true
+    },
+    "events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true
+    },
+    "exec-sh": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.3.4.tgz",
+      "integrity": "sha512-sEFIkc61v75sWeOe72qyrqg2Qg0OuLESziUDk/O/z2qgS15y2gWVFrI6f2Qn/qw/0/NCfCEsmNA4zOjkwEZT1A==",
+      "dev": true
+    },
+    "execa": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^6.0.0",
+        "get-stream": "^4.0.0",
+        "is-stream": "^1.1.0",
+        "npm-run-path": "^2.0.0",
+        "p-finally": "^1.0.0",
+        "signal-exit": "^3.0.0",
+        "strip-eof": "^1.0.0"
+      }
+    },
+    "exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=",
+      "dev": true
+    },
+    "expand-brackets": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+      "dev": true,
+      "requires": {
+        "debug": "^2.3.3",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "posix-character-classes": "^0.1.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "expand-range": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
+      "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
+      "dev": true,
+      "requires": {
+        "fill-range": "^2.1.0"
+      },
+      "dependencies": {
+        "fill-range": {
+          "version": "2.2.4",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.4.tgz",
+          "integrity": "sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==",
+          "dev": true,
+          "requires": {
+            "is-number": "^2.1.0",
+            "isobject": "^2.0.0",
+            "randomatic": "^3.0.0",
+            "repeat-element": "^1.1.2",
+            "repeat-string": "^1.5.2"
+          }
+        },
+        "is-number": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
+          "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          }
+        },
+        "isobject": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+          "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+          "dev": true,
+          "requires": {
+            "isarray": "1.0.0"
+          }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "expand-tilde": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+      "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
+      "dev": true,
+      "requires": {
+        "homedir-polyfill": "^1.0.1"
+      }
+    },
+    "expect": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-26.6.2.tgz",
+      "integrity": "sha512-9/hlOBkQl2l/PLHJx6JjoDF6xPKcJEsUlWKb23rKE7KzeDqUZKXKNMW27KIue5JMdBV9HgmoJPcc8HtO85t9IA==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "ansi-styles": "^4.0.0",
+        "jest-get-type": "^26.3.0",
+        "jest-matcher-utils": "^26.6.2",
+        "jest-message-util": "^26.6.2",
+        "jest-regex-util": "^26.0.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "26.6.2",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
+          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^3.0.0",
+            "@types/node": "*",
+            "@types/yargs": "^15.0.0",
+            "chalk": "^4.0.0"
+          }
+        },
+        "@types/istanbul-reports": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
+          "integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-report": "*"
+          }
+        },
+        "@types/yargs": {
+          "version": "15.0.12",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.12.tgz",
+          "integrity": "sha512-f+fD/fQAo3BCbCDlrUpznF1A5Zp9rB0noS5vnoormHSIPFKL0Z2DcUJ3Gxp5ytH4uLRNxy7AwYUC9exZzqGMAw==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "jest-get-type": {
+          "version": "26.3.0",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
+          "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "dev": true,
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "array-flatten": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+          "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
+          "dev": true
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        },
+        "qs": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+          "dev": true
+        }
+      }
+    },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
+    "extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dev": true,
+      "requires": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "dev": true,
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "extglob": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+      "dev": true,
+      "requires": {
+        "array-unique": "^0.3.2",
+        "define-property": "^1.0.0",
+        "expand-brackets": "^2.1.4",
+        "extend-shallow": "^2.0.1",
+        "fragment-cache": "^0.2.1",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
+      "dev": true
+    },
+    "fancy-log": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.3.tgz",
+      "integrity": "sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==",
+      "dev": true,
+      "requires": {
+        "ansi-gray": "^0.1.1",
+        "color-support": "^1.1.3",
+        "parse-node-version": "^1.0.0",
+        "time-stamp": "^1.0.0"
+      }
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
+    "fast-glob": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
+      "integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.0",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.2",
+        "picomatch": "^2.2.1"
+      }
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
+    },
+    "fastq": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.8.0.tgz",
+      "integrity": "sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "faye-websocket": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
+      "integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=",
+      "dev": true,
+      "requires": {
+        "websocket-driver": ">=0.5.1"
+      }
+    },
+    "fb-watchman": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
+      "integrity": "sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==",
+      "dev": true,
+      "requires": {
+        "bser": "2.1.1"
+      }
+    },
+    "fetch-mock": {
+      "version": "9.11.0",
+      "resolved": "https://registry.npmjs.org/fetch-mock/-/fetch-mock-9.11.0.tgz",
+      "integrity": "sha512-PG1XUv+x7iag5p/iNHD4/jdpxL9FtVSqRMUQhPab4hVDt80T1MH5ehzVrL2IdXO9Q2iBggArFvPqjUbHFuI58Q==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.0.0",
+        "@babel/runtime": "^7.0.0",
+        "core-js": "^3.0.0",
+        "debug": "^4.1.1",
+        "glob-to-regexp": "^0.4.0",
+        "is-subset": "^0.1.1",
+        "lodash.isequal": "^4.5.0",
+        "path-to-regexp": "^2.2.1",
+        "querystring": "^0.2.0",
+        "whatwg-url": "^6.5.0"
+      },
+      "dependencies": {
+        "path-to-regexp": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.4.0.tgz",
+          "integrity": "sha512-G6zHoVqC6GGTQkZwF4lkuEyMbVOjoBKAEybQUypI1WTkqinCOrq2x6U2+phkJ1XsEMTy4LjtwPI7HW+NVrRR2w==",
+          "dev": true
+        },
+        "tr46": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+          "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
+          "dev": true,
+          "requires": {
+            "punycode": "^2.1.0"
+          }
+        },
+        "webidl-conversions": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+          "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
+          "dev": true
+        },
+        "whatwg-url": {
+          "version": "6.5.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.5.0.tgz",
+          "integrity": "sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==",
+          "dev": true,
+          "requires": {
+            "lodash.sortby": "^4.7.0",
+            "tr46": "^1.0.1",
+            "webidl-conversions": "^4.0.2"
+          }
+        }
+      }
+    },
+    "figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.5"
+      }
+    },
+    "file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "requires": {
+        "flat-cache": "^3.0.4"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "find-cache-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
+      "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
+      "dev": true,
+      "requires": {
+        "commondir": "^1.0.1",
+        "make-dir": "^2.0.0",
+        "pkg-dir": "^3.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true
+        },
+        "pkg-dir": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+          "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+          "dev": true,
+          "requires": {
+            "find-up": "^3.0.0"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "dev": true
+    },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "dependencies": {
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+          "dev": true
+        }
+      }
+    },
+    "flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true
+    },
+    "flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "requires": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "dependencies": {
+        "flatted": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.1.tgz",
+          "integrity": "sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==",
+          "dev": true
+        }
+      }
+    },
+    "flatted": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
+      "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==",
+      "dev": true
+    },
+    "flow-parser": {
+      "version": "0.149.0",
+      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.149.0.tgz",
+      "integrity": "sha512-ruUVkZuM9oFQjhSsLO/OJYRYpGnuXJpTnIZmgzna6DyLFb3CLpeO27oJbWyeXaa830hmKf0JRzpcdFsFS8lmpg==",
+      "dev": true
+    },
+    "flush-write-stream": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
+      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.3.6"
+      }
+    },
+    "follow-redirects": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.0.tgz",
+      "integrity": "sha512-0vRwd7RKQBTt+mgu87mtYeofLFZpTas2S9zY+jIeuLJMNvudIgF52nr19q40HOwH5RrhWIPuj9puybzSJiRrVg==",
+      "dev": true
+    },
+    "for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
+      "dev": true
+    },
+    "foreach": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
+      "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k=",
+      "dev": true
+    },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+      "dev": true
+    },
+    "form-data": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "dev": true,
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "formidable": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.2.tgz",
+      "integrity": "sha512-V8gLm+41I/8kguQ4/o1D3RIHRmhYFG4pnNyonvua+40rqcEmT4+V71yaZ3B457xbbgCsCfjSPi65u/W6vK1U5Q==",
+      "dev": true
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
+      "dev": true
+    },
+    "fraction.js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
+      "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
+      "dev": true
+    },
+    "fragment-cache": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
+      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+      "dev": true,
+      "requires": {
+        "map-cache": "^0.2.2"
+      }
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+      "dev": true
+    },
+    "from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=",
+      "dev": true
+    },
+    "fs-extra": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
+      "integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "dependencies": {
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "dev": true
+        }
+      }
+    },
+    "fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
+    "fs-mkdirp-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-mkdirp-stream/-/fs-mkdirp-stream-1.0.0.tgz",
+      "integrity": "sha1-C3gV/DIBxqaeFNuYzgmMFpNSWes=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.11",
+        "through2": "^2.0.3"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "function.prototype.name": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.2.tgz",
+      "integrity": "sha512-C8A+LlHBJjB2AdcRPorc5JvJ5VUoWlXdEHLOJdCI7kjHEtGTpHQUiqMvCIKUwIsGwZX2jZJy761AXsn356bJQg==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0-next.1",
+        "functions-have-names": "^1.2.0"
+      }
+    },
+    "functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "dev": true
+    },
+    "functions-have-names": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.1.tgz",
+      "integrity": "sha512-j48B/ZI7VKs3sgeI2cZp7WXWmZXu7Iq5pl5/vptV5N2mq+DGFuS/ulaDjtaoLpYzuD6u8UgrUKHfgo7fDTSiBA=="
+    },
+    "fuse.js": {
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.4.6.tgz",
+      "integrity": "sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw==",
+      "dev": true
+    },
+    "gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true
+    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true
+    },
+    "get-func-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
+      "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=",
+      "dev": true
+    },
+    "get-intrinsic": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.2.tgz",
+      "integrity": "sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "get-package-type": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
+      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
+      "dev": true
+    },
+    "get-port": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
+      "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=",
+      "dev": true
+    },
+    "get-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "dev": true,
+      "requires": {
+        "pump": "^3.0.0"
+      }
+    },
+    "get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
+      "dev": true
+    },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "glob-stream": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-6.1.0.tgz",
+      "integrity": "sha1-cEXJlBOz65SIjYOrRtC0BMx73eQ=",
+      "dev": true,
+      "requires": {
+        "extend": "^3.0.0",
+        "glob": "^7.1.1",
+        "glob-parent": "^3.1.0",
+        "is-negated-glob": "^1.0.0",
+        "ordered-read-streams": "^1.0.0",
+        "pumpify": "^1.3.5",
+        "readable-stream": "^2.1.5",
+        "remove-trailing-separator": "^1.0.1",
+        "to-absolute-glob": "^2.0.0",
+        "unique-stream": "^2.0.2"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "dev": true,
+          "requires": {
+            "is-glob": "^3.1.0",
+            "path-dirname": "^1.0.0"
+          }
+        },
+        "is-glob": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+          "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^2.1.0"
+          }
+        }
+      }
+    },
+    "glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true
+    },
+    "global-cache": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/global-cache/-/global-cache-1.2.1.tgz",
+      "integrity": "sha512-EOeUaup5DgWKlCMhA9YFqNRIlZwoxt731jCh47WBV9fQqHgXhr3Fa55hfgIUqilIcPsfdNKN7LHjrNY+Km40KA==",
+      "requires": {
+        "define-properties": "^1.1.2",
+        "is-symbol": "^1.0.1"
+      }
+    },
+    "global-dirs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.0.tgz",
+      "integrity": "sha512-v8ho2DS5RiCjftj1nD9NmnfaOzTdud7RRnVd9kFNOjqZbISlx5DQ+OrTkywgd0dIt7oFCvKetZSHoHcP3sDdiA==",
+      "dev": true,
+      "requires": {
+        "ini": "2.0.0"
+      },
+      "dependencies": {
+        "ini": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
+          "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
+          "dev": true
+        }
+      }
+    },
+    "global-modules": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+      "dev": true,
+      "requires": {
+        "global-prefix": "^1.0.1",
+        "is-windows": "^1.0.1",
+        "resolve-dir": "^1.0.0"
+      }
+    },
+    "global-prefix": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+      "integrity": "sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=",
+      "dev": true,
+      "requires": {
+        "expand-tilde": "^2.0.2",
+        "homedir-polyfill": "^1.0.1",
+        "ini": "^1.3.4",
+        "is-windows": "^1.0.1",
+        "which": "^1.2.14"
+      }
+    },
+    "globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true
+    },
+    "globby": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.3.tgz",
+      "integrity": "sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==",
+      "dev": true,
+      "requires": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.1.1",
+        "ignore": "^5.1.4",
+        "merge2": "^1.3.0",
+        "slash": "^3.0.0"
+      }
+    },
+    "google-closure-library": {
+      "version": "20210406.0.0",
+      "resolved": "https://registry.npmjs.org/google-closure-library/-/google-closure-library-20210406.0.0.tgz",
+      "integrity": "sha512-1lAC/KC9R2QM6nygniM0pRcGrv5bkCUrIZb2hXFxLtAkA+zRiVeWtRYpFWDHXXJzkavKjsn9upiffL4x/nmmVg=="
+    },
+    "got": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
+      "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
+      "dev": true,
+      "requires": {
+        "@sindresorhus/is": "^0.14.0",
+        "@szmarczak/http-timer": "^1.1.2",
+        "cacheable-request": "^6.0.0",
+        "decompress-response": "^3.3.0",
+        "duplexer3": "^0.1.4",
+        "get-stream": "^4.1.0",
+        "lowercase-keys": "^1.0.1",
+        "mimic-response": "^1.0.1",
+        "p-cancelable": "^1.0.0",
+        "to-readable-stream": "^1.0.0",
+        "url-parse-lax": "^3.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+      "dev": true
+    },
+    "gray-matter": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-2.1.1.tgz",
+      "integrity": "sha1-MELZrewqHe1qdwep7SOA+KF6Qw4=",
+      "dev": true,
+      "requires": {
+        "ansi-red": "^0.1.1",
+        "coffee-script": "^1.12.4",
+        "extend-shallow": "^2.0.1",
+        "js-yaml": "^3.8.1",
+        "toml": "^2.3.2"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
+    "growl": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
+      "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==",
+      "dev": true
+    },
+    "growly": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
+      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
+      "dev": true,
+      "optional": true
+    },
+    "gulp-connect": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/gulp-connect/-/gulp-connect-5.7.0.tgz",
+      "integrity": "sha512-8tRcC6wgXMLakpPw9M7GRJIhxkYdgZsXwn7n56BA2bQYGLR9NOPhMzx7js+qYDy6vhNkbApGKURjAw1FjY4pNA==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^2.0.5",
+        "connect": "^3.6.6",
+        "connect-livereload": "^0.6.0",
+        "fancy-log": "^1.3.2",
+        "map-stream": "^0.0.7",
+        "send": "^0.16.2",
+        "serve-index": "^1.9.1",
+        "serve-static": "^1.13.2",
+        "tiny-lr": "^1.1.1"
+      },
+      "dependencies": {
+        "ansi-colors": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-2.0.5.tgz",
+          "integrity": "sha512-yAdfUZ+c2wetVNIFsNRn44THW+Lty6S5TwMpUfLA/UaGhiXbBv/F8E60/1hMLd0cnF/CDoWH8vzVaI5bAcHCjw==",
+          "dev": true
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "http-errors": {
+          "version": "1.6.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+          "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
+          "dev": true,
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.3",
+            "setprototypeof": "1.1.0",
+            "statuses": ">= 1.4.0 < 2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "dev": true
+        },
+        "mime": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
+          "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        },
+        "send": {
+          "version": "0.16.2",
+          "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
+          "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
+          "dev": true,
+          "requires": {
+            "debug": "2.6.9",
+            "depd": "~1.1.2",
+            "destroy": "~1.0.4",
+            "encodeurl": "~1.0.2",
+            "escape-html": "~1.0.3",
+            "etag": "~1.8.1",
+            "fresh": "0.5.2",
+            "http-errors": "~1.6.2",
+            "mime": "1.4.1",
+            "ms": "2.0.0",
+            "on-finished": "~2.3.0",
+            "range-parser": "~1.2.0",
+            "statuses": "~1.4.0"
+          }
+        },
+        "setprototypeof": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+          "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
+          "dev": true
+        },
+        "statuses": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
+          "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
+          "dev": true
+        }
+      }
+    },
+    "gulp-header": {
+      "version": "1.8.12",
+      "resolved": "https://registry.npmjs.org/gulp-header/-/gulp-header-1.8.12.tgz",
+      "integrity": "sha512-lh9HLdb53sC7XIZOYzTXM4lFuXElv3EVkSDhsd7DoJBj7hm+Ni7D3qYbb+Rr8DuM8nRanBvkVO9d7askreXGnQ==",
+      "dev": true,
+      "requires": {
+        "concat-with-sourcemaps": "*",
+        "lodash.template": "^4.4.0",
+        "through2": "^2.0.0"
+      },
+      "dependencies": {
+        "lodash._reinterpolate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+          "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
+          "dev": true
+        },
+        "lodash.template": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
+          "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
+          "dev": true,
+          "requires": {
+            "lodash._reinterpolate": "^3.0.0",
+            "lodash.templatesettings": "^4.0.0"
+          }
+        },
+        "lodash.templatesettings": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
+          "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
+          "dev": true,
+          "requires": {
+            "lodash._reinterpolate": "^3.0.0"
+          }
+        },
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
+          }
+        }
+      }
+    },
+    "handlebars": {
+      "version": "4.7.6",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz",
+      "integrity": "sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.0",
+        "source-map": "^0.6.1",
+        "uglify-js": "^3.1.4",
+        "wordwrap": "^1.0.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "wordwrap": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+          "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
+          "dev": true
+        }
+      }
+    },
+    "har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+      "dev": true
+    },
+    "har-validator": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.3",
+        "har-schema": "^2.0.0"
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-bigints": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
+      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA=="
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "has-symbols": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
+      "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg=="
+    },
+    "has-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
+      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
+      "dev": true,
+      "requires": {
+        "get-value": "^2.0.6",
+        "has-values": "^1.0.0",
+        "isobject": "^3.0.0"
+      }
+    },
+    "has-values": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
+      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
+      "dev": true,
+      "requires": {
+        "is-number": "^3.0.0",
+        "kind-of": "^4.0.0"
+      },
+      "dependencies": {
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "kind-of": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
+          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "has-yarn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz",
+      "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==",
+      "dev": true
+    },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
+    },
+    "hex-color-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
+      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
+      "dev": true
+    },
+    "highlight.js": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.2.tgz",
+      "integrity": "sha512-oFLl873u4usRM9K63j4ME9u3etNF0PLiJhSQ8rdfuL51Wn3zkD6drf9ZW0dOzjnZI22YYG24z30JcmfCZjMgYg==",
+      "dev": true
+    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "homedir-polyfill": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+      "dev": true,
+      "requires": {
+        "parse-passwd": "^1.0.0"
+      }
+    },
+    "hosted-git-info": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
+      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
+      "dev": true
+    },
+    "hsl-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
+      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=",
+      "dev": true
+    },
+    "hsla-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
+      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
+      "dev": true
+    },
+    "html-element-map": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.2.0.tgz",
+      "integrity": "sha512-0uXq8HsuG1v2TmQ8QkIhzbrqeskE4kn52Q18QJ9iAA/SnHoEKXWiUxHQtclRsCFWEUD2So34X+0+pZZu862nnw==",
+      "dev": true,
+      "requires": {
+        "array-filter": "^1.0.0"
+      }
+    },
+    "html-encoding-sniffer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
+      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
+      "dev": true,
+      "requires": {
+        "whatwg-encoding": "^1.0.5"
+      }
+    },
+    "html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true
+    },
+    "html-minifier": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-4.0.0.tgz",
+      "integrity": "sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==",
+      "dev": true,
+      "requires": {
+        "camel-case": "^3.0.0",
+        "clean-css": "^4.2.1",
+        "commander": "^2.19.0",
+        "he": "^1.2.0",
+        "param-case": "^2.1.1",
+        "relateurl": "^0.2.7",
+        "uglify-js": "^3.5.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        }
+      }
+    },
+    "htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
+    "http-cache-semantics": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
+      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
+      "dev": true
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "dev": true,
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "dev": true
+        }
+      }
+    },
+    "http-parser-js": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.2.tgz",
+      "integrity": "sha512-opCO9ASqg5Wy2FNo7A0sxy71yGbbkJJXLdgMK04Tcypw9jr2MgWbyubb0+WdmDmGnFflO7fRbqbaihh/ENDlRQ==",
+      "dev": true
+    },
+    "http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "requires": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "http-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "dev": true,
+      "requires": {
+        "@tootallnate/once": "1",
+        "agent-base": "6",
+        "debug": "4"
+      }
+    },
+    "http-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      }
+    },
+    "https-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
+      "dev": true,
+      "requires": {
+        "agent-base": "6",
+        "debug": "4"
+      }
+    },
+    "human-signals": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
+      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+      "dev": true
+    },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "ieee754": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
+      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==",
+      "dev": true
+    },
+    "ignore": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+      "dev": true
+    },
+    "ignore-by-default": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-2.0.0.tgz",
+      "integrity": "sha512-+mQSgMRiFD3L3AOxLYOCxjIq4OnAmo5CIuC+lj5ehCJcPtV++QacEV7FdpzvYxH6DaOySWzQU6RR0lPLy37ckA==",
+      "dev": true
+    },
+    "ignore-walk": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
+      "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==",
+      "dev": true,
+      "requires": {
+        "minimatch": "^3.0.4"
+      }
+    },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        }
+      }
+    },
+    "import-lazy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
+      "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=",
+      "dev": true
+    },
+    "import-local": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.0.2.tgz",
+      "integrity": "sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==",
+      "dev": true,
+      "requires": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "dev": true
+    },
+    "indefinite-observable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz",
+      "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==",
+      "requires": {
+        "symbol-observable": "1.2.0"
+      }
+    },
+    "indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
+    },
+    "internal-slot": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
+      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
+      },
+      "dependencies": {
+        "get-intrinsic": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+          "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+          "dev": true,
+          "requires": {
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1"
+          }
+        }
+      }
+    },
+    "intersection-observer": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.0.tgz",
+      "integrity": "sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ=="
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "dev": true
+    },
+    "irregular-plurals": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-3.2.0.tgz",
+      "integrity": "sha512-YqTdPLfwP7YFN0SsD3QUVCkm9ZG2VzOXv3DOrw5G5mkMbVwptTwVcFv7/C0vOpBmgTxAeTG19XpUs1E522LW9Q==",
+      "dev": true
+    },
+    "is-absolute": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
+      "integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==",
+      "dev": true,
+      "requires": {
+        "is-relative": "^1.0.0",
+        "is-windows": "^1.0.1"
+      }
+    },
+    "is-absolute-url": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
+      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
+      "dev": true
+    },
+    "is-accessor-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "is-arguments": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
+      "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==",
+      "dev": true
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "dev": true
+    },
+    "is-bigint": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.1.tgz",
+      "integrity": "sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg=="
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-boolean-object": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.0.1.tgz",
+      "integrity": "sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==",
+      "dev": true
+    },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "dev": true
+    },
+    "is-callable": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz",
+      "integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA=="
+    },
+    "is-ci": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
+      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
+      "dev": true,
+      "requires": {
+        "ci-info": "^2.0.0"
+      }
+    },
+    "is-color-stop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
+      "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
+      "dev": true,
+      "requires": {
+        "css-color-names": "^0.0.4",
+        "hex-color-regex": "^1.1.0",
+        "hsl-regex": "^1.0.0",
+        "hsla-regex": "^1.0.0",
+        "rgb-regex": "^1.0.1",
+        "rgba-regex": "^1.0.0"
+      },
+      "dependencies": {
+        "css-color-names": {
+          "version": "0.0.4",
+          "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
+          "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
+          "dev": true
+        }
+      }
+    },
+    "is-core-module": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
+      "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-data-descriptor": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "is-date-object": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
+      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
+    },
+    "is-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+      "dev": true,
+      "requires": {
+        "is-accessor-descriptor": "^0.1.6",
+        "is-data-descriptor": "^0.1.4",
+        "kind-of": "^5.0.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+          "dev": true
+        }
+      }
+    },
+    "is-docker": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.1.1.tgz",
+      "integrity": "sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==",
+      "dev": true
+    },
+    "is-error": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-error/-/is-error-2.2.2.tgz",
+      "integrity": "sha512-IOQqts/aHWbiisY5DuPJQ0gcbvaLFCa7fBa9xoLfxBZvQ+ZI/Zh9xoI7Gk+G64N0FdK4AbibytHht2tWgpJWLg==",
+      "dev": true
+    },
+    "is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "dev": true
+    },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
+      "dev": true
+    },
+    "is-generator-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
+      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
+      "dev": true
+    },
+    "is-generator-function": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.7.tgz",
+      "integrity": "sha512-YZc5EwyO4f2kWCax7oegfuSr9mFz1ZvieNYBEjmukLxgXfBUbxAWGVF7GZf0zidYtoBl3WvC07YK0wT76a+Rtw==",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
+    "is-installed-globally": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
+      "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
+      "dev": true,
+      "requires": {
+        "global-dirs": "^3.0.0",
+        "is-path-inside": "^3.0.2"
+      }
+    },
+    "is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "dev": true
+    },
+    "is-negated-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz",
+      "integrity": "sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=",
+      "dev": true
+    },
+    "is-npm": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-5.0.0.tgz",
+      "integrity": "sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==",
+      "dev": true
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "is-number-object": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.4.tgz",
+      "integrity": "sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw=="
+    },
+    "is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+      "dev": true
+    },
+    "is-path-cwd": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
+      "dev": true
+    },
+    "is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true
+    },
+    "is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "dev": true
+    },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true
+    },
+    "is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "dev": true
+    },
+    "is-regex": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz",
+      "integrity": "sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==",
+      "requires": {
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "is-relative": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
+      "integrity": "sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==",
+      "dev": true,
+      "requires": {
+        "is-unc-path": "^1.0.0"
+      }
+    },
+    "is-relative-url": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-relative-url/-/is-relative-url-3.0.0.tgz",
+      "integrity": "sha512-U1iSYRlY2GIMGuZx7gezlB5dp1Kheaym7zKzO1PV06mOihiWTXejLwm4poEJysPyXF+HtK/BEd0DVlcCh30pEA==",
+      "dev": true,
+      "requires": {
+        "is-absolute-url": "^3.0.0"
+      },
+      "dependencies": {
+        "is-absolute-url": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
+          "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
+          "dev": true
+        }
+      }
+    },
+    "is-resolvable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
+      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
+      "dev": true
+    },
+    "is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
+      "dev": true
+    },
+    "is-string": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz",
+      "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ=="
+    },
+    "is-subset": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
+      "integrity": "sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY=",
+      "dev": true
+    },
+    "is-symbol": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
+      "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
+      "requires": {
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "is-touch-device": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-touch-device/-/is-touch-device-1.0.1.tgz",
+      "integrity": "sha512-LAYzo9kMT1b2p19L/1ATGt2XcSilnzNlyvq6c0pbPRVisLbAPpLqr53tIJS00kvrTkj0HtR8U7+u8X0yR8lPSw=="
+    },
+    "is-typed-array": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.3.tgz",
+      "integrity": "sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.0",
+        "es-abstract": "^1.17.4",
+        "foreach": "^2.0.5",
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "dev": true
+    },
+    "is-unc-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz",
+      "integrity": "sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==",
+      "dev": true,
+      "requires": {
+        "unc-path-regex": "^0.1.2"
+      }
+    },
+    "is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
+      "dev": true
+    },
+    "is-valid-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-1.0.0.tgz",
+      "integrity": "sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao=",
+      "dev": true
+    },
+    "is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+      "dev": true
+    },
+    "is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "requires": {
+        "is-docker": "^2.0.0"
+      }
+    },
+    "is-yarn-global": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
+      "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==",
+      "dev": true
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+      "dev": true
+    },
+    "isbinaryfile": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.6.tgz",
+      "integrity": "sha512-ORrEy+SNVqUhrCaal4hA4fBzhggQQ+BaLntyPOdoEiwlKZW9BZiJXjg3RMiruE4tPEI3pyVPpySHQF/dKWperg==",
+      "dev": true
+    },
+    "isemail": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/isemail/-/isemail-3.2.0.tgz",
+      "integrity": "sha512-zKqkK+O+dGqevc93KNsbZ/TqTUFd46MwWjYOoMrjIMZ51eU7DtQG3Wmd9SQQT7i7RVnuTPEiYEWHU3MSbxC1Tg==",
+      "dev": true,
+      "requires": {
+        "punycode": "2.x.x"
+      }
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "dev": true
+    },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
+      "dev": true
+    },
+    "istanbul": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/istanbul/-/istanbul-0.4.5.tgz",
+      "integrity": "sha1-ZcfXPUxNqE1POsMQuRj7C4Azczs=",
+      "dev": true,
+      "requires": {
+        "abbrev": "1.0.x",
+        "async": "1.x",
+        "escodegen": "1.8.x",
+        "esprima": "2.7.x",
+        "glob": "^5.0.15",
+        "handlebars": "^4.0.1",
+        "js-yaml": "3.x",
+        "mkdirp": "0.5.x",
+        "nopt": "3.x",
+        "once": "1.x",
+        "resolve": "1.1.x",
+        "supports-color": "^3.1.0",
+        "which": "^1.1.1",
+        "wordwrap": "^1.0.0"
+      },
+      "dependencies": {
+        "async": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
+          "dev": true
+        },
+        "escodegen": {
+          "version": "1.8.1",
+          "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.8.1.tgz",
+          "integrity": "sha1-WltTr0aTEQvrsIZ6o0MN07cKEBg=",
+          "dev": true,
+          "requires": {
+            "esprima": "^2.7.1",
+            "estraverse": "^1.9.1",
+            "esutils": "^2.0.2",
+            "optionator": "^0.8.1",
+            "source-map": "~0.2.0"
+          }
+        },
+        "esprima": {
+          "version": "2.7.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
+          "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=",
+          "dev": true
+        },
+        "estraverse": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.9.3.tgz",
+          "integrity": "sha1-r2fy3JIlgkFZUJJgkaQAXSnJu0Q=",
+          "dev": true
+        },
+        "glob": {
+          "version": "5.0.15",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
+          "integrity": "sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=",
+          "dev": true,
+          "requires": {
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "2 || 3",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        },
+        "resolve": {
+          "version": "1.1.7",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
+          "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.2.0.tgz",
+          "integrity": "sha1-2rc/vPwrqBm03gO9b26qSBZLP50=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "dev": true,
+          "requires": {
+            "has-flag": "^1.0.0"
+          }
+        },
+        "wordwrap": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+          "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
+          "dev": true
+        }
+      }
+    },
+    "istanbul-lib-coverage": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz",
+      "integrity": "sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==",
+      "dev": true
+    },
+    "istanbul-lib-instrument": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz",
+      "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.7.5",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.0.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==",
+      "dev": true,
+      "requires": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^3.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "istanbul-lib-source-maps": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz",
+      "integrity": "sha512-c16LpFRkR8vQXyHZ5nLpY35JZtzj1PQY1iZmesUbf1FZHbIupcWfjgOXBY9YHkLEQ6puz1u4Dgj6qmU/DisrZg==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "istanbul-middleware": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-middleware/-/istanbul-middleware-0.2.2.tgz",
+      "integrity": "sha1-g8TBPBKOGg1qFHeSORrzwVqKuOA=",
+      "dev": true,
+      "requires": {
+        "archiver": "0.14.x",
+        "body-parser": "~1.12.3",
+        "express": "4.x",
+        "istanbul": "0.4.x"
+      },
+      "dependencies": {
+        "body-parser": {
+          "version": "1.12.4",
+          "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.12.4.tgz",
+          "integrity": "sha1-CQcAxLoohiqFIO83g5X97l9hwik=",
+          "dev": true,
+          "requires": {
+            "bytes": "1.0.0",
+            "content-type": "~1.0.1",
+            "debug": "~2.2.0",
+            "depd": "~1.0.1",
+            "iconv-lite": "0.4.8",
+            "on-finished": "~2.2.1",
+            "qs": "2.4.2",
+            "raw-body": "~2.0.1",
+            "type-is": "~1.6.2"
+          }
+        },
+        "bytes": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz",
+          "integrity": "sha1-NWnt6Lo0MV+rmcPpLLBMciDeH6g=",
+          "dev": true
+        },
+        "debug": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
+          "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
+          "dev": true,
+          "requires": {
+            "ms": "0.7.1"
+          }
+        },
+        "depd": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-1.0.1.tgz",
+          "integrity": "sha1-gK7GTJ1tl+ZcwqnKqTwKpqv3Oqo=",
+          "dev": true
+        },
+        "ee-first": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.0.tgz",
+          "integrity": "sha1-ag18YiHkkP7v2S7D9EHJzozQl/Q=",
+          "dev": true
+        },
+        "iconv-lite": {
+          "version": "0.4.8",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.8.tgz",
+          "integrity": "sha1-xgGadZXyzvynAuq2lKAQvNkpjSA=",
+          "dev": true
+        },
+        "ms": {
+          "version": "0.7.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
+          "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
+          "dev": true
+        },
+        "on-finished": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.2.1.tgz",
+          "integrity": "sha1-XIXBzDYpn3gCllP2Z/J7a5nrwCk=",
+          "dev": true,
+          "requires": {
+            "ee-first": "1.1.0"
+          }
+        },
+        "qs": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-2.4.2.tgz",
+          "integrity": "sha1-9854jld33wtQENp/fE5zujJHD1o=",
+          "dev": true
+        },
+        "raw-body": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.0.2.tgz",
+          "integrity": "sha1-osL5jIUxzumcY9jSOLfel7tln8o=",
+          "dev": true,
+          "requires": {
+            "bytes": "2.1.0",
+            "iconv-lite": "0.4.8"
+          },
+          "dependencies": {
+            "bytes": {
+              "version": "2.1.0",
+              "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.1.0.tgz",
+              "integrity": "sha1-rJPEEOL/ycx89LRks4KJBn9eR7Q=",
+              "dev": true
+            }
+          }
+        }
+      }
+    },
+    "istanbul-reports": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.0.2.tgz",
+      "integrity": "sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==",
+      "dev": true,
+      "requires": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      }
+    },
+    "jest-changed-files": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-26.6.2.tgz",
+      "integrity": "sha512-fDS7szLcY9sCtIip8Fjry9oGf3I2ht/QT21bAHm5Dmf0mD4X3ReNUf17y+bO6fR8WgbIZTlbyG1ak/53cbRzKQ==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "execa": "^4.0.0",
+        "throat": "^5.0.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "execa": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
+          "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^7.0.0",
+            "get-stream": "^5.0.0",
+            "human-signals": "^1.1.1",
+            "is-stream": "^2.0.0",
+            "merge-stream": "^2.0.0",
+            "npm-run-path": "^4.0.0",
+            "onetime": "^5.1.0",
+            "signal-exit": "^3.0.2",
+            "strip-final-newline": "^2.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+          "dev": true,
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "is-stream": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+          "dev": true
+        },
+        "npm-run-path": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.0.0"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
+    "jest-config": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-26.6.3.tgz",
+      "integrity": "sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.1.0",
+        "@jest/test-sequencer": "^26.6.3",
+        "@jest/types": "^26.6.2",
+        "babel-jest": "^26.6.3",
+        "chalk": "^4.0.0",
+        "deepmerge": "^4.2.2",
+        "glob": "^7.1.1",
+        "graceful-fs": "^4.2.4",
+        "jest-environment-jsdom": "^26.6.2",
+        "jest-environment-node": "^26.6.2",
+        "jest-get-type": "^26.3.0",
+        "jest-jasmine2": "^26.6.3",
+        "jest-regex-util": "^26.0.0",
+        "jest-resolve": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "jest-validate": "^26.6.2",
+        "micromatch": "^4.0.2",
+        "pretty-format": "^26.6.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-diff": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
+      "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^26.6.2",
+        "jest-get-type": "^26.3.0",
+        "pretty-format": "^26.6.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-docblock": {
+      "version": "26.0.0",
+      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-26.0.0.tgz",
+      "integrity": "sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==",
+      "dev": true,
+      "requires": {
+        "detect-newline": "^3.0.0"
+      }
+    },
+    "jest-each": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-26.6.2.tgz",
+      "integrity": "sha512-Mer/f0KaATbjl8MCJ+0GEpNdqmnVmDYqCTJYTvoo7rqmRiDllmp2AYN+06F93nXcY3ur9ShIjS+CO/uD+BbH4A==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^26.3.0",
+        "jest-util": "^26.6.2",
+        "pretty-format": "^26.6.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-environment-jsdom": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz",
+      "integrity": "sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==",
+      "dev": true,
+      "requires": {
+        "@jest/environment": "^26.6.2",
+        "@jest/fake-timers": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "jest-mock": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "jsdom": "^16.4.0"
+      }
+    },
+    "jest-environment-node": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-26.6.2.tgz",
+      "integrity": "sha512-zhtMio3Exty18dy8ee8eJ9kjnRyZC1N4C1Nt/VShN1apyXc8rWGtJ9lI7vqiWcyyXS4BVSEn9lxAM2D+07/Tag==",
+      "dev": true,
+      "requires": {
+        "@jest/environment": "^26.6.2",
+        "@jest/fake-timers": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "jest-mock": "^26.6.2",
+        "jest-util": "^26.6.2"
+      }
+    },
+    "jest-get-type": {
+      "version": "26.3.0",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
+      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
+      "dev": true
+    },
+    "jest-haste-map": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.2.tgz",
+      "integrity": "sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "@types/graceful-fs": "^4.1.2",
+        "@types/node": "*",
+        "anymatch": "^3.0.3",
+        "fb-watchman": "^2.0.0",
+        "fsevents": "^2.1.2",
+        "graceful-fs": "^4.2.4",
+        "jest-regex-util": "^26.0.0",
+        "jest-serializer": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "jest-worker": "^26.6.2",
+        "micromatch": "^4.0.2",
+        "sane": "^4.0.3",
+        "walker": "^1.0.7"
+      }
+    },
+    "jest-jasmine2": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz",
+      "integrity": "sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==",
+      "dev": true,
+      "requires": {
+        "@babel/traverse": "^7.1.0",
+        "@jest/environment": "^26.6.2",
+        "@jest/source-map": "^26.6.2",
+        "@jest/test-result": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "co": "^4.6.0",
+        "expect": "^26.6.2",
+        "is-generator-fn": "^2.0.0",
+        "jest-each": "^26.6.2",
+        "jest-matcher-utils": "^26.6.2",
+        "jest-message-util": "^26.6.2",
+        "jest-runtime": "^26.6.3",
+        "jest-snapshot": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "pretty-format": "^26.6.2",
+        "throat": "^5.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-leak-detector": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-26.6.2.tgz",
+      "integrity": "sha512-i4xlXpsVSMeKvg2cEKdfhh0H39qlJlP5Ex1yQxwF9ubahboQYMgTtz5oML35AVA3B4Eu+YsmwaiKVev9KCvLxg==",
+      "dev": true,
+      "requires": {
+        "jest-get-type": "^26.3.0",
+        "pretty-format": "^26.6.2"
+      }
+    },
+    "jest-matcher-utils": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz",
+      "integrity": "sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0",
+        "jest-diff": "^26.6.2",
+        "jest-get-type": "^26.3.0",
+        "pretty-format": "^26.6.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-message-util": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.2.tgz",
+      "integrity": "sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@jest/types": "^26.6.2",
+        "@types/stack-utils": "^2.0.0",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.4",
+        "micromatch": "^4.0.2",
+        "pretty-format": "^26.6.2",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-mock": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-26.6.2.tgz",
+      "integrity": "sha512-YyFjePHHp1LzpzYcmgqkJ0nm0gg/lJx2aZFzFy1S6eUqNjXsOqTK10zNRff2dNfssgokjkG65OlWNcIlgd3zew==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "@types/node": "*"
+      }
+    },
+    "jest-pnp-resolver": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
+      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
+      "dev": true
+    },
+    "jest-progress-bar-reporter": {
+      "version": "1.0.21",
+      "resolved": "https://registry.npmjs.org/jest-progress-bar-reporter/-/jest-progress-bar-reporter-1.0.21.tgz",
+      "integrity": "sha512-hJ1yDNjXjROcLF7XyESiC3lNkMPnMewPqohsSjMkul3tRbfkQDrGMjVBSH2gocOJqx4nfJ0CLtLlKITeLwzujg==",
+      "dev": true,
+      "requires": {
+        "chalk": "4.1.1",
+        "moment": "2.29.1",
+        "progress": "2.0.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-regex-util": {
+      "version": "26.0.0",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-26.0.0.tgz",
+      "integrity": "sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==",
+      "dev": true
+    },
+    "jest-resolve": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.2.tgz",
+      "integrity": "sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.4",
+        "jest-pnp-resolver": "^1.2.2",
+        "jest-util": "^26.6.2",
+        "read-pkg-up": "^7.0.1",
+        "resolve": "^1.18.1",
+        "slash": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-resolve-dependencies": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz",
+      "integrity": "sha512-pVwUjJkxbhe4RY8QEWzN3vns2kqyuldKpxlxJlzEYfKSvY6/bMvxoFrYYzUO1Gx28yKWN37qyV7rIoIp2h8fTg==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "jest-regex-util": "^26.0.0",
+        "jest-snapshot": "^26.6.2"
+      }
+    },
+    "jest-runner": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-26.6.3.tgz",
+      "integrity": "sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==",
+      "dev": true,
+      "requires": {
+        "@jest/console": "^26.6.2",
+        "@jest/environment": "^26.6.2",
+        "@jest/test-result": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "emittery": "^0.7.1",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.4",
+        "jest-config": "^26.6.3",
+        "jest-docblock": "^26.0.0",
+        "jest-haste-map": "^26.6.2",
+        "jest-leak-detector": "^26.6.2",
+        "jest-message-util": "^26.6.2",
+        "jest-resolve": "^26.6.2",
+        "jest-runtime": "^26.6.3",
+        "jest-util": "^26.6.2",
+        "jest-worker": "^26.6.2",
+        "source-map-support": "^0.5.6",
+        "throat": "^5.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-runtime": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-26.6.3.tgz",
+      "integrity": "sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==",
+      "dev": true,
+      "requires": {
+        "@jest/console": "^26.6.2",
+        "@jest/environment": "^26.6.2",
+        "@jest/fake-timers": "^26.6.2",
+        "@jest/globals": "^26.6.2",
+        "@jest/source-map": "^26.6.2",
+        "@jest/test-result": "^26.6.2",
+        "@jest/transform": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/yargs": "^15.0.0",
+        "chalk": "^4.0.0",
+        "cjs-module-lexer": "^0.6.0",
+        "collect-v8-coverage": "^1.0.0",
+        "exit": "^0.1.2",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.2.4",
+        "jest-config": "^26.6.3",
+        "jest-haste-map": "^26.6.2",
+        "jest-message-util": "^26.6.2",
+        "jest-mock": "^26.6.2",
+        "jest-regex-util": "^26.0.0",
+        "jest-resolve": "^26.6.2",
+        "jest-snapshot": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "jest-validate": "^26.6.2",
+        "slash": "^3.0.0",
+        "strip-bom": "^4.0.0",
+        "yargs": "^15.4.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-serializer": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-26.6.2.tgz",
+      "integrity": "sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "graceful-fs": "^4.2.4"
+      }
+    },
+    "jest-silent-reporter": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/jest-silent-reporter/-/jest-silent-reporter-0.5.0.tgz",
+      "integrity": "sha512-epdLt8Oj0a1AyRiR6F8zx/1SVT1Mi7VU3y4wB2uOBHs/ohIquC7v2eeja7UN54uRPyHInIKWdL+RdG228n5pJQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0",
+        "jest-util": "^26.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-snapshot": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.6.2.tgz",
+      "integrity": "sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.0.0",
+        "@jest/types": "^26.6.2",
+        "@types/babel__traverse": "^7.0.4",
+        "@types/prettier": "^2.0.0",
+        "chalk": "^4.0.0",
+        "expect": "^26.6.2",
+        "graceful-fs": "^4.2.4",
+        "jest-diff": "^26.6.2",
+        "jest-get-type": "^26.3.0",
+        "jest-haste-map": "^26.6.2",
+        "jest-matcher-utils": "^26.6.2",
+        "jest-message-util": "^26.6.2",
+        "jest-resolve": "^26.6.2",
+        "natural-compare": "^1.4.0",
+        "pretty-format": "^26.6.2",
+        "semver": "^7.3.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-util": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.2.tgz",
+      "integrity": "sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.4",
+        "is-ci": "^2.0.0",
+        "micromatch": "^4.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-validate": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-26.6.2.tgz",
+      "integrity": "sha512-NEYZ9Aeyj0i5rQqbq+tpIOom0YS1u2MVu6+euBsvpgIme+FOfRmoC4R5p0JiAUpaFvFy24xgrpMknarR/93XjQ==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "camelcase": "^6.0.0",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^26.3.0",
+        "leven": "^3.1.0",
+        "pretty-format": "^26.6.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "camelcase": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
+          "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-watcher": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-26.6.2.tgz",
+      "integrity": "sha512-WKJob0P/Em2csiVthsI68p6aGKTIcsfjH9Gsx1f0A3Italz43e3ho0geSAVsmj09RWOELP1AZ/DXyJgOgDKxXQ==",
+      "dev": true,
+      "requires": {
+        "@jest/test-result": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "jest-util": "^26.6.2",
+        "string-length": "^4.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-worker": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jison": {
+      "version": "0.4.18",
+      "resolved": "https://registry.npmjs.org/jison/-/jison-0.4.18.tgz",
+      "integrity": "sha512-FKkCiJvozgC7VTHhMJ00a0/IApSxhlGsFIshLW6trWJ8ONX2TQJBBz6DlcO1Gffy4w9LT+uL+PA+CVnUSJMF7w==",
+      "dev": true,
+      "requires": {
+        "JSONSelect": "0.4.0",
+        "cjson": "0.3.0",
+        "ebnf-parser": "0.1.10",
+        "escodegen": "1.3.x",
+        "esprima": "1.1.x",
+        "jison-lex": "0.3.x",
+        "lex-parser": "~0.1.3",
+        "nomnom": "1.5.2"
+      },
+      "dependencies": {
+        "escodegen": {
+          "version": "1.3.3",
+          "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.3.3.tgz",
+          "integrity": "sha1-8CQBb1qI4Eb9EgBQVek5gC5sXyM=",
+          "dev": true,
+          "requires": {
+            "esprima": "~1.1.1",
+            "estraverse": "~1.5.0",
+            "esutils": "~1.0.0",
+            "source-map": "~0.1.33"
+          }
+        },
+        "esprima": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.1.1.tgz",
+          "integrity": "sha1-W28VR/TRAuZw4UDFCb5ncdautUk=",
+          "dev": true
+        },
+        "estraverse": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.5.1.tgz",
+          "integrity": "sha1-hno+jlip+EYYr7bC3bzZFrfLr3E=",
+          "dev": true
+        },
+        "esutils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.0.0.tgz",
+          "integrity": "sha1-gVHTWOIMisx/t0XnRywAJf5JZXA=",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.1.43",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
+          "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
+    "jison-lex": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/jison-lex/-/jison-lex-0.3.4.tgz",
+      "integrity": "sha1-gcoo2E+ESZ36jFlNzePYo/Jux6U=",
+      "dev": true,
+      "requires": {
+        "lex-parser": "0.1.x",
+        "nomnom": "1.5.2"
+      }
+    },
+    "js-string-escape": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
+      "integrity": "sha1-4mJbrbwNZ8dTPp7cEGjFh65BN+8=",
+      "dev": true
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+      "dev": true
+    },
+    "jscodeshift": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.12.0.tgz",
+      "integrity": "sha512-LEgr+wklbtEQD6SptyVYox+YZ7v+4NQeWHgqASedxl2LxQ+/kSQs6Nhs/GX+ymVOu84Hsz9/C2hQfDY89dKZ6A==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.13.16",
+        "@babel/parser": "^7.13.16",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
+        "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+        "@babel/plugin-transform-modules-commonjs": "^7.13.8",
+        "@babel/preset-flow": "^7.13.13",
+        "@babel/preset-typescript": "^7.13.0",
+        "@babel/register": "^7.13.16",
+        "babel-core": "^7.0.0-bridge.0",
+        "colors": "^1.1.2",
+        "flow-parser": "0.*",
+        "graceful-fs": "^4.2.4",
+        "micromatch": "^3.1.10",
+        "neo-async": "^2.5.0",
+        "node-dir": "^0.1.17",
+        "recast": "^0.20.4",
+        "temp": "^0.8.1",
+        "write-file-atomic": "^2.3.0"
+      },
+      "dependencies": {
+        "@babel/parser": {
+          "version": "7.13.16",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.16.tgz",
+          "integrity": "sha512-6bAg36mCwuqLO0hbR+z7PHuqWiCeP7Dzg73OpQwsAB1Eb8HnGEz5xYBzCfbu+YjoaJsJs+qheDxVAuqbt3ILEw==",
+          "dev": true
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
+          }
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "dev": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        },
+        "write-file-atomic": {
+          "version": "2.4.3",
+          "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
+          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.11",
+            "imurmurhash": "^0.1.4",
+            "signal-exit": "^3.0.2"
+          }
+        }
+      }
+    },
+    "jsdoctypeparser": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/jsdoctypeparser/-/jsdoctypeparser-9.0.0.tgz",
+      "integrity": "sha512-jrTA2jJIL6/DAEILBEh2/w9QxCuwmvNXIry39Ay/HVfhE3o2yVV0U44blYkqdHA/OKloJEqvJy0xU+GSdE2SIw==",
+      "dev": true
+    },
+    "jsdom": {
+      "version": "16.6.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.6.0.tgz",
+      "integrity": "sha512-Ty1vmF4NHJkolaEmdjtxTfSfkdb8Ywarwf63f+F8/mDD1uLSSWDxDuMiZxiPhwunLrn9LOSVItWj4bLYsLN3Dg==",
+      "dev": true,
+      "requires": {
+        "abab": "^2.0.5",
+        "acorn": "^8.2.4",
+        "acorn-globals": "^6.0.0",
+        "cssom": "^0.4.4",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^2.0.0",
+        "decimal.js": "^10.2.1",
+        "domexception": "^2.0.1",
+        "escodegen": "^2.0.0",
+        "form-data": "^3.0.0",
+        "html-encoding-sniffer": "^2.0.1",
+        "http-proxy-agent": "^4.0.1",
+        "https-proxy-agent": "^5.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.0",
+        "parse5": "6.0.1",
+        "saxes": "^5.0.1",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.0.0",
+        "w3c-hr-time": "^1.0.2",
+        "w3c-xmlserializer": "^2.0.0",
+        "webidl-conversions": "^6.1.0",
+        "whatwg-encoding": "^1.0.5",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.5.0",
+        "ws": "^7.4.5",
+        "xml-name-validator": "^3.0.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "8.2.4",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.2.4.tgz",
+          "integrity": "sha512-Ibt84YwBDDA890eDiDCEqcbwvHlBvzzDkU2cGBBDDI1QWT12jTiXIOn2CIw5KK4i6N5Z2HUxwYjzriDyqaqqZg==",
+          "dev": true
+        },
+        "form-data": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+          "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+          "dev": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        },
+        "ws": {
+          "version": "7.4.6",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+          "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
+          "dev": true
+        }
+      }
+    },
+    "jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true
+    },
+    "json-buffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
+      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=",
+      "dev": true
+    },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
+    "json-schema": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+      "dev": true
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "json-stable-stringify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
+      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
+      "dev": true,
+      "requires": {
+        "jsonify": "~0.0.0"
+      }
+    },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "dev": true
+    },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "dev": true
+    },
+    "json5": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      },
+      "dependencies": {
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "dev": true
+        }
+      }
+    },
+    "jsonify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
+      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
+      "dev": true
+    },
+    "jsonlint": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/jsonlint/-/jsonlint-1.6.0.tgz",
+      "integrity": "sha1-iKpGvCiaesk7tGyuLVihh6m7SUo=",
+      "dev": true,
+      "requires": {
+        "JSV": ">= 4.0.x",
+        "nomnom": ">= 1.5.x"
+      }
+    },
+    "jsonminify": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/jsonminify/-/jsonminify-0.4.1.tgz",
+      "integrity": "sha1-gF2vuzk5UYjO6atYLIHvlZ1+cQw=",
+      "dev": true
+    },
+    "jsprim": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
+      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.2.3",
+        "verror": "1.10.0"
+      }
+    },
+    "jss": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.6.0.tgz",
+      "integrity": "sha512-n7SHdCozmxnzYGXBHe0NsO0eUf9TvsHVq2MXvi4JmTn3x5raynodDVE/9VQmBdWFyyj9HpHZ2B4xNZ7MMy7lkw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "indefinite-observable": "^2.0.1",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.6.0.tgz",
+      "integrity": "sha512-JdLpA3aI/npwj3nDMKk308pvnhoSzkW3PXlbgHAzfx0yHWnPPVUjPhXFtLJzgKZge8lsfkUxvYSQ3X2OYIFU6A==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.6.0"
+      }
+    },
+    "jss-plugin-compose": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-compose/-/jss-plugin-compose-10.6.0.tgz",
+      "integrity": "sha512-zBhI5ZDVX30h4N+rPunAfbwHVDWlme0JPiLBT0TSg24aX+QhjpogZSKHv9pn23NqIdiz3aIJmrNVnJ5rwNKQKA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.6.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.6.0.tgz",
+      "integrity": "sha512-7y4cAScMHAxvslBK2JRK37ES9UT0YfTIXWgzUWD5euvR+JR3q+o8sQKzBw7GmkQRfZijrRJKNTiSt1PBsLI9/w==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.6.0"
+      }
+    },
+    "jss-plugin-expand": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-expand/-/jss-plugin-expand-10.6.0.tgz",
+      "integrity": "sha512-TYVfKS3l8kNaClWW3PA9AhFr9ixhBnKcdGwZDRH3WRGDmdX0RYOhpfScscRXQM1HAlqaXLRqiP+NYGCK6QBgOg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.6.0"
+      }
+    },
+    "jss-plugin-extend": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-extend/-/jss-plugin-extend-10.6.0.tgz",
+      "integrity": "sha512-eY/zKMT+aUOdHegTDzTznq8Nwsv0PEb5AyJfo8A1B9jPxzzLTGcFOl9S6JZoYRxMh9TWxA5lOULMIjgKAKzUcQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.6.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.6.0.tgz",
+      "integrity": "sha512-I3w7ji/UXPi3VuWrTCbHG9rVCgB4yoBQLehGDTmsnDfXQb3r1l3WIdcO8JFp9m0YMmyy2CU7UOV6oPI7/Tmu+w==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.6.0"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.6.0.tgz",
+      "integrity": "sha512-fOFQWgd98H89E6aJSNkEh2fAXquC9aZcAVjSw4q4RoQ9gU++emg18encR4AT4OOIFl4lQwt5nEyBBRn9V1Rk8g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.6.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.6.0.tgz",
+      "integrity": "sha512-oMCe7hgho2FllNc60d9VAfdtMrZPo9n1Iu6RNa+3p9n0Bkvnv/XX5San8fTPujrTBScPqv9mOE0nWVvIaohNuw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.6.0"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.6.0.tgz",
+      "integrity": "sha512-TKFqhRTDHN1QrPTMYRlIQUOC2FFQb271+AbnetURKlGvRl/eWLswcgHQajwuxI464uZk91sPiTtdGi7r7XaWfA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.6.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-rule-value-observable": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-observable/-/jss-plugin-rule-value-observable-10.6.0.tgz",
+      "integrity": "sha512-+N6S8UZ+Tu+G2Fbu/UrfLI/JyaTi/KfkPbKsVRfyg/C/IdI+p9+H67HncMIFYEi/KnNj5fqvMNSDe4ag/lqbHw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.6.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
+    "jss-plugin-template": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-template/-/jss-plugin-template-10.6.0.tgz",
+      "integrity": "sha512-P3iaIR6AqTOoutwP7Y2KVCq4jShEMACrwKf8W9gsS3ppnIeBg4OCAQvLKmqunApkEoIk0711xbW9XPi9CYy3zg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.6.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.6.0.tgz",
+      "integrity": "sha512-doJ7MouBXT1lypLLctCwb4nJ6lDYqrTfVS3LtXgox42Xz0gXusXIIDboeh6UwnSmox90QpVnub7au8ybrb0krQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.6.0"
+      }
+    },
+    "jss-preset-default": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-10.6.0.tgz",
+      "integrity": "sha512-TuHDZiuxGLLJ/LIMLAzO5uf2PnLOCR6yF5GHQLPp59YTascmwEldJfR0tuqjKa8B2F/v708ZvzE1Dw0Ao7UIcA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.6.0",
+        "jss-plugin-camel-case": "10.6.0",
+        "jss-plugin-compose": "10.6.0",
+        "jss-plugin-default-unit": "10.6.0",
+        "jss-plugin-expand": "10.6.0",
+        "jss-plugin-extend": "10.6.0",
+        "jss-plugin-global": "10.6.0",
+        "jss-plugin-nested": "10.6.0",
+        "jss-plugin-props-sort": "10.6.0",
+        "jss-plugin-rule-value-function": "10.6.0",
+        "jss-plugin-rule-value-observable": "10.6.0",
+        "jss-plugin-template": "10.6.0",
+        "jss-plugin-vendor-prefixer": "10.6.0"
+      }
+    },
+    "jsx-ast-utils": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz",
+      "integrity": "sha512-EIsmt3O3ljsU6sot/J4E1zDRxfBNrhjyf/OKjlydwgEimQuznlM4Wv7U+ueONJMyEn1WRE0K8dhi3dVAXYT24Q==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.2",
+        "object.assign": "^4.1.2"
+      }
+    },
+    "just-extend": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.2.1.tgz",
+      "integrity": "sha512-g3UB796vUFIY90VIv/WX3L2c8CS2MdWUww3CNrYmqza1Fg0DURc2K/O4YrnklBdQarSJ/y8JnJYDGc+1iumQjg==",
+      "dev": true
+    },
+    "karma": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.2.tgz",
+      "integrity": "sha512-fo4Wt0S99/8vylZMxNj4cBFyOBBnC1bewZ0QOlePij/2SZVWxqbyLeIddY13q6URa2EpLRW8ixvFRUMjkmo1bw==",
+      "dev": true,
+      "requires": {
+        "body-parser": "^1.19.0",
+        "braces": "^3.0.2",
+        "chokidar": "^3.4.2",
+        "colors": "^1.4.0",
+        "connect": "^3.7.0",
+        "di": "^0.0.1",
+        "dom-serialize": "^2.2.1",
+        "glob": "^7.1.6",
+        "graceful-fs": "^4.2.4",
+        "http-proxy": "^1.18.1",
+        "isbinaryfile": "^4.0.6",
+        "lodash": "^4.17.19",
+        "log4js": "^6.2.1",
+        "mime": "^2.4.5",
+        "minimatch": "^3.0.4",
+        "qjobs": "^1.2.0",
+        "range-parser": "^1.2.1",
+        "rimraf": "^3.0.2",
+        "socket.io": "^3.1.0",
+        "source-map": "^0.6.1",
+        "tmp": "0.2.1",
+        "ua-parser-js": "^0.7.23",
+        "yargs": "^16.1.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "mime": {
+          "version": "2.5.2",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+          "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "wrap-ansi": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "5.0.8",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+          "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "20.2.7",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz",
+          "integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==",
+          "dev": true
+        }
+      }
+    },
+    "karma-chrome-launcher": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-3.1.0.tgz",
+      "integrity": "sha512-3dPs/n7vgz1rxxtynpzZTvb9y/GIaW8xjAwcIGttLbycqoFtI7yo1NGnQi6oFTherRE+GIhCAHZC4vEqWGhNvg==",
+      "dev": true,
+      "requires": {
+        "which": "^1.2.1"
+      }
+    },
+    "karma-coverage-istanbul-reporter": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-3.0.3.tgz",
+      "integrity": "sha512-wE4VFhG/QZv2Y4CdAYWDbMmcAHeS926ZIji4z+FkB2aF/EposRb6DP6G5ncT/wXhqUfAb/d7kZrNKPonbvsATw==",
+      "dev": true,
+      "requires": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^3.0.6",
+        "istanbul-reports": "^3.0.2",
+        "minimatch": "^3.0.4"
+      },
+      "dependencies": {
+        "istanbul-lib-source-maps": {
+          "version": "3.0.6",
+          "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz",
+          "integrity": "sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==",
+          "dev": true,
+          "requires": {
+            "debug": "^4.1.1",
+            "istanbul-lib-coverage": "^2.0.5",
+            "make-dir": "^2.1.0",
+            "rimraf": "^2.6.3",
+            "source-map": "^0.6.1"
+          },
+          "dependencies": {
+            "istanbul-lib-coverage": {
+              "version": "2.0.5",
+              "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
+              "integrity": "sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==",
+              "dev": true
+            }
+          }
+        },
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "karma-esbuild": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/karma-esbuild/-/karma-esbuild-2.2.0.tgz",
+      "integrity": "sha512-6dZSoKHod2YJzQSe5sbUhXFuuLR8TIJXGRRxf4ZOgBzk34WTtasBS7+eRDbVRjp/hryULvhD06Vx7bo/veg8Yw==",
+      "dev": true,
+      "requires": {
+        "chokidar": "^3.5.1",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "karma-firefox-launcher": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/karma-firefox-launcher/-/karma-firefox-launcher-2.1.0.tgz",
+      "integrity": "sha512-dkiyqN2R6fCWt78rciOXJLFDWcQ7QEQi++HgebPJlw1y0ycDjGNDHuSrhdh48QG02fzZKK20WHFWVyBZ6CPngg==",
+      "dev": true,
+      "requires": {
+        "is-wsl": "^2.2.0",
+        "which": "^2.0.1"
+      },
+      "dependencies": {
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
+    "karma-fixture": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/karma-fixture/-/karma-fixture-0.2.6.tgz",
+      "integrity": "sha1-lxzqjCFtc/BwQ5ZMtz8Q4IMAGO8=",
+      "dev": true
+    },
+    "karma-html2js-preprocessor": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/karma-html2js-preprocessor/-/karma-html2js-preprocessor-1.1.0.tgz",
+      "integrity": "sha1-/Ant8Eu+K7bu6boZaPgmtziAIL0=",
+      "dev": true
+    },
+    "karma-ie-launcher": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/karma-ie-launcher/-/karma-ie-launcher-1.0.0.tgz",
+      "integrity": "sha1-SXmGhCxJAZA0bNifVJTKmDDG1Zw=",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.6.1"
+      }
+    },
+    "karma-junit-reporter": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/karma-junit-reporter/-/karma-junit-reporter-2.0.1.tgz",
+      "integrity": "sha512-VtcGfE0JE4OE1wn0LK8xxDKaTP7slN8DO3I+4xg6gAi1IoAHAXOJ1V9G/y45Xg6sxdxPOR3THCFtDlAfBo9Afw==",
+      "dev": true,
+      "requires": {
+        "path-is-absolute": "^1.0.0",
+        "xmlbuilder": "12.0.0"
+      }
+    },
+    "karma-mocha": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/karma-mocha/-/karma-mocha-2.0.1.tgz",
+      "integrity": "sha512-Tzd5HBjm8his2OA4bouAsATYEpZrp9vC7z5E5j4C5Of5Rrs1jY67RAwXNcVmd/Bnk1wgvQRou0zGVLey44G4tQ==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.3"
+      }
+    },
+    "karma-mocha-reporter": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/karma-mocha-reporter/-/karma-mocha-reporter-2.2.5.tgz",
+      "integrity": "sha1-FRIAlejtgZGG5HoLAS8810GJVWA=",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.1.0",
+        "log-symbols": "^2.1.0",
+        "strip-ansi": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "log-symbols": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
+          "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
+    "karma-safarinative-launcher": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/karma-safarinative-launcher/-/karma-safarinative-launcher-1.1.0.tgz",
+      "integrity": "sha512-vdMjdQDHkSUbOZc8Zq2K5bBC0yJGFEgfrKRJTqt0Um0SC1Rt8drS2wcN6UA3h4LgsL3f1pMcmRSvKucbJE8Qdg==",
+      "dev": true
+    },
+    "karma-source-map-support": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/karma-source-map-support/-/karma-source-map-support-1.4.0.tgz",
+      "integrity": "sha512-RsBECncGO17KAoJCYXjv+ckIz+Ii9NCi+9enk+rq6XC81ezYkb4/RHE6CTXdA7IOJqoF3wcaLfVG0CPmE5ca6A==",
+      "dev": true,
+      "requires": {
+        "source-map-support": "^0.5.5"
+      }
+    },
+    "karma-spec-reporter": {
+      "version": "0.0.32",
+      "resolved": "https://registry.npmjs.org/karma-spec-reporter/-/karma-spec-reporter-0.0.32.tgz",
+      "integrity": "sha1-LpxyB+pyZ3EmAln4K+y1QyCeRAo=",
+      "dev": true,
+      "requires": {
+        "colors": "^1.1.2"
+      }
+    },
+    "karma-structured-json-reporter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/karma-structured-json-reporter/-/karma-structured-json-reporter-1.0.1.tgz",
+      "integrity": "sha1-HWQJ6mXAFos0XK9309K9n0ztFdU=",
+      "dev": true
+    },
+    "karma-super-dots-reporter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/karma-super-dots-reporter/-/karma-super-dots-reporter-0.2.0.tgz",
+      "integrity": "sha512-JNzEV7vqIa3GrKcES+kBKYarFCtY/IraYBhUfsTIy0QWn4JzmV8x0jCED9PLqEfJVYrNC0hPBAH13wnlKkPGTQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^0.5.1",
+        "log-symbols": "^1.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
+          "integrity": "sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
+          "integrity": "sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
+          "integrity": "sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^1.1.0",
+            "escape-string-regexp": "^1.0.0",
+            "has-ansi": "^0.1.0",
+            "strip-ansi": "^0.3.0",
+            "supports-color": "^0.2.0"
+          }
+        },
+        "has-ansi": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
+          "integrity": "sha1-hPJlqujA5qiKEtcCKJS3VoiUxi4=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^0.2.0"
+          }
+        },
+        "log-symbols": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz",
+          "integrity": "sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=",
+          "dev": true,
+          "requires": {
+            "chalk": "^1.0.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+              "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+              "dev": true
+            },
+            "ansi-styles": {
+              "version": "2.2.1",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+              "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+              "dev": true
+            },
+            "chalk": {
+              "version": "1.1.3",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+              "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^2.2.1",
+                "escape-string-regexp": "^1.0.2",
+                "has-ansi": "^2.0.0",
+                "strip-ansi": "^3.0.0",
+                "supports-color": "^2.0.0"
+              }
+            },
+            "has-ansi": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+              "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^2.0.0"
+              }
+            },
+            "strip-ansi": {
+              "version": "3.0.1",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+              "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^2.0.0"
+              }
+            },
+            "supports-color": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+              "dev": true
+            }
+          }
+        },
+        "strip-ansi": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
+          "integrity": "sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^0.2.1"
+          }
+        },
+        "supports-color": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
+          "integrity": "sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=",
+          "dev": true
+        }
+      }
+    },
+    "keyv": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
+      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
+      "dev": true,
+      "requires": {
+        "json-buffer": "3.0.0"
+      }
+    },
+    "kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true
+    },
+    "klaw": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz",
+      "integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.9"
+      }
+    },
+    "kleur": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz",
+      "integrity": "sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==",
+      "dev": true
+    },
+    "latest-version": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
+      "integrity": "sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==",
+      "dev": true,
+      "requires": {
+        "package-json": "^6.3.0"
+      }
+    },
+    "lazy-cache": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-2.0.2.tgz",
+      "integrity": "sha1-uRkKT5EzVGlIQIWfio9whNiCImQ=",
+      "dev": true,
+      "requires": {
+        "set-getter": "^0.1.0"
+      }
+    },
+    "lazystream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz",
+      "integrity": "sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^2.0.5"
+      }
+    },
+    "lead": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lead/-/lead-1.0.0.tgz",
+      "integrity": "sha1-bxT5mje+Op3XhPVJVpDlkDRm7kI=",
+      "dev": true,
+      "requires": {
+        "flush-write-stream": "^1.0.2"
+      }
+    },
+    "leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "dev": true
+    },
+    "levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
+      }
+    },
+    "lex-parser": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/lex-parser/-/lex-parser-0.1.4.tgz",
+      "integrity": "sha1-ZMTwJfF/1Tv7RXY/rrFvAVp0dVA=",
+      "dev": true
+    },
+    "lines-and-columns": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
+      "dev": true
+    },
+    "link-check": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/link-check/-/link-check-4.5.4.tgz",
+      "integrity": "sha512-VdjiYrIBNHtqH7NEvIlF/4i0V9xQWkoBry+65DtmmyKyD5qBZ2U9fCJYx75SI5Ms4ILJzGlNNojPKbPMpg5Spg==",
+      "dev": true,
+      "requires": {
+        "is-relative-url": "^3.0.0",
+        "isemail": "^3.2.0",
+        "ms": "^2.1.2",
+        "request": "^2.88.2"
+      }
+    },
+    "list-imports-exports": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/list-imports-exports/-/list-imports-exports-0.1.2.tgz",
+      "integrity": "sha512-2P6aZ0Ew8bWTT+JNTeylwyOAPavKnS1SagrXGegou5qrWkLMRgxGy5VweSbo5386MpYt647I0GWM8y8+etTTBw==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.0.0",
+        "@babel/traverse": "^7.0.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "list-item": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/list-item/-/list-item-1.1.1.tgz",
+      "integrity": "sha1-DGXQDih8tmPMs8s4Sad+iewmilY=",
+      "dev": true,
+      "requires": {
+        "expand-range": "^1.8.1",
+        "extend-shallow": "^2.0.1",
+        "is-number": "^2.1.0",
+        "repeat-string": "^1.5.2"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "is-number": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
+          "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "livereload-js": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-2.4.0.tgz",
+      "integrity": "sha512-XPQH8Z2GDP/Hwz2PCDrh2mth4yFejwA1OZ/81Ti3LgKyhDcEjsSsqFWZojHG0va/duGd+WyosY7eXLDoOyqcPw==",
+      "dev": true
+    },
+    "load-json-file": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
+      "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.15",
+        "parse-json": "^4.0.0",
+        "pify": "^4.0.1",
+        "strip-bom": "^3.0.0",
+        "type-fest": "^0.3.0"
+      },
+      "dependencies": {
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+          "dev": true,
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true
+        },
+        "strip-bom": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+          "dev": true
+        },
+        "type-fest": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
+          "dev": true
+        }
+      }
+    },
+    "locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^4.1.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
+      "dev": true
+    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
+      "dev": true
+    },
+    "lodash.escape": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
+      "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=",
+      "dev": true
+    },
+    "lodash.flattendeep": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
+      "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
+      "dev": true
+    },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
+      "dev": true
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
+      "dev": true
+    },
+    "lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
+      "dev": true
+    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
+      "dev": true
+    },
+    "lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=",
+      "dev": true
+    },
+    "lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
+      "dev": true
+    },
+    "log-symbols": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.0.0.tgz",
+      "integrity": "sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "log4js": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.3.0.tgz",
+      "integrity": "sha512-Mc8jNuSFImQUIateBFwdOQcmC6Q5maU0VVvdC2R6XMb66/VnT+7WS4D/0EeNMZu1YODmJe5NIn2XftCzEocUgw==",
+      "dev": true,
+      "requires": {
+        "date-format": "^3.0.0",
+        "debug": "^4.1.1",
+        "flatted": "^2.0.1",
+        "rfdc": "^1.1.4",
+        "streamroller": "^2.2.4"
+      }
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "lower-case": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
+      "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=",
+      "dev": true
+    },
+    "lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
+      "dev": true
+    },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "luxon": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.26.0.tgz",
+      "integrity": "sha512-+V5QIQ5f6CDXQpWNICELwjwuHdqeJM1UenlZWx5ujcRMc9venvluCjFb4t5NYLhb6IhkbMVOxzVuOqkgMxee2A==",
+      "optional": true
+    },
+    "magic-string": {
+      "version": "0.25.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+      "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "dev": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.4"
+      }
+    },
+    "make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "requires": {
+        "semver": "^6.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "makeerror": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.11.tgz",
+      "integrity": "sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=",
+      "dev": true,
+      "requires": {
+        "tmpl": "1.0.x"
+      }
+    },
+    "map-age-cleaner": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "dev": true,
+      "requires": {
+        "p-defer": "^1.0.0"
+      }
+    },
+    "map-cache": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
+      "dev": true
+    },
+    "map-stream": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
+      "integrity": "sha1-ih8HiW2CsQkmvTdEokIACfiJdKg=",
+      "dev": true
+    },
+    "map-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
+      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
+      "dev": true,
+      "requires": {
+        "object-visit": "^1.0.0"
+      }
+    },
+    "markdown-link": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-link/-/markdown-link-0.1.1.tgz",
+      "integrity": "sha1-MsXGUZmmRXMWMi0eQinRNAfIx88=",
+      "dev": true
+    },
+    "markdown-link-check": {
+      "version": "3.8.7",
+      "resolved": "https://registry.npmjs.org/markdown-link-check/-/markdown-link-check-3.8.7.tgz",
+      "integrity": "sha512-Qy2JBkrzmZjMIoOstIMV/Wk/pONM0xuTBO2d/9UuqtO84emvge9A9IdtHfE4r1bxH+GdqyVn3e7aHQLXvRPnYQ==",
+      "dev": true,
+      "requires": {
+        "async": "^3.2.0",
+        "chalk": "^4.1.0",
+        "commander": "^6.2.0",
+        "link-check": "^4.5.4",
+        "lodash": "^4.17.21",
+        "markdown-link-extractor": "^1.2.7",
+        "progress": "^2.0.3",
+        "request": "^2.88.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "async": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz",
+          "integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "commander": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "markdown-link-extractor": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/markdown-link-extractor/-/markdown-link-extractor-1.2.7.tgz",
+      "integrity": "sha512-gFwyqKEMPAwXiW2n7ZeM26bJL9WfkYnzP1O2lxFvqenefzPQE4A5XjidqbotOyDA5qUzjOHeqYoaGa2qb4B4Og==",
+      "dev": true,
+      "requires": {
+        "marked": "^2.0.1"
+      }
+    },
+    "markdown-toc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-toc/-/markdown-toc-1.2.0.tgz",
+      "integrity": "sha512-eOsq7EGd3asV0oBfmyqngeEIhrbkc7XVP63OwcJBIhH2EpG2PzFcbZdhy1jutXSlRBBVMNXHvMtSr5LAxSUvUg==",
+      "dev": true,
+      "requires": {
+        "concat-stream": "^1.5.2",
+        "diacritics-map": "^0.1.0",
+        "gray-matter": "^2.1.0",
+        "lazy-cache": "^2.0.2",
+        "list-item": "^1.1.1",
+        "markdown-link": "^0.1.1",
+        "minimist": "^1.2.0",
+        "mixin-deep": "^1.1.3",
+        "object.pick": "^1.2.0",
+        "remarkable": "^1.7.1",
+        "repeat-string": "^1.6.1",
+        "strip-color": "^0.1.0"
+      }
+    },
+    "marked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.1.tgz",
+      "integrity": "sha512-5+/fKgMv2hARmMW7DOpykr2iLhl0NgjyELk5yn92iE7z8Se1IS9n3UsFm86hFXIkvMBmVxki8+ckcpjBeyo/hw==",
+      "dev": true
+    },
+    "matcher": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
+      "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^4.0.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        }
+      }
+    },
+    "math-random": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
+      "integrity": "sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==",
+      "dev": true
+    },
+    "md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "dev": true,
+      "requires": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
+    "md5-hex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/md5-hex/-/md5-hex-3.0.1.tgz",
+      "integrity": "sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==",
+      "dev": true,
+      "requires": {
+        "blueimp-md5": "^2.10.0"
+      }
+    },
+    "mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "dev": true
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
+      "dev": true
+    },
+    "mem": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-8.0.0.tgz",
+      "integrity": "sha512-qrcJOe6uD+EW8Wrci1Vdiua/15Xw3n/QnaNXE7varnB6InxSk7nu3/i5jfy3S6kWxr8WYJ6R1o0afMUtvorTsA==",
+      "dev": true,
+      "requires": {
+        "map-age-cleaner": "^0.1.3",
+        "mimic-fn": "^3.1.0"
+      },
+      "dependencies": {
+        "mimic-fn": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
+          "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
+          "dev": true
+        }
+      }
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
+      "dev": true
+    },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
+      "dev": true
+    },
+    "metric-lcs": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/metric-lcs/-/metric-lcs-0.1.2.tgz",
+      "integrity": "sha512-+TZ5dUDPKPJaU/rscTzxyN8ZkX7eAVLAiQU/e+YINleXPv03SCmJShaMT1If1liTH8OcmWXZs0CmzCBRBLcMpA==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+      "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.0.5"
+      }
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true
+    },
+    "mime-db": {
+      "version": "1.46.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.46.0.tgz",
+      "integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==",
+      "dev": true
+    },
+    "mime-types": {
+      "version": "2.1.29",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.29.tgz",
+      "integrity": "sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==",
+      "dev": true,
+      "requires": {
+        "mime-db": "1.46.0"
+      }
+    },
+    "mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true
+    },
+    "mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
+    "minipass": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
+      "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      }
+    },
+    "mixin-deep": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
+      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
+      "dev": true,
+      "requires": {
+        "for-in": "^1.0.2",
+        "is-extendable": "^1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "dev": true,
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "mocha": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-8.4.0.tgz",
+      "integrity": "sha512-hJaO0mwDXmZS4ghXsvPVriOhsxQ7ofcpQdm8dE+jISUOKopitvnXFQmpRR7jd2K6VBG6E26gU3IAbXXGIbu4sQ==",
+      "dev": true,
+      "requires": {
+        "@ungap/promise-all-settled": "1.1.2",
+        "ansi-colors": "4.1.1",
+        "browser-stdout": "1.3.1",
+        "chokidar": "3.5.1",
+        "debug": "4.3.1",
+        "diff": "5.0.0",
+        "escape-string-regexp": "4.0.0",
+        "find-up": "5.0.0",
+        "glob": "7.1.6",
+        "growl": "1.10.5",
+        "he": "1.2.0",
+        "js-yaml": "4.0.0",
+        "log-symbols": "4.0.0",
+        "minimatch": "3.0.4",
+        "ms": "2.1.3",
+        "nanoid": "3.1.20",
+        "serialize-javascript": "5.0.1",
+        "strip-json-comments": "3.1.1",
+        "supports-color": "8.1.1",
+        "which": "2.0.2",
+        "wide-align": "1.1.3",
+        "workerpool": "6.1.0",
+        "yargs": "16.2.0",
+        "yargs-parser": "20.2.4",
+        "yargs-unparser": "2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+          "dev": true
+        },
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "js-yaml": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.0.0.tgz",
+          "integrity": "sha512-pqon0s+4ScYUvX30wxQi3PogGFAlUyH0awepWvwkj4jD4v+ova3RiYw8bmA6x2rDrEaj8i/oWKoRxpVNW+Re8Q==",
+          "dev": true,
+          "requires": {
+            "argparse": "^2.0.1"
+          }
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "dev": true
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        },
+        "strip-json-comments": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+          "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "8.1.1",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "5.0.8",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+          "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "20.2.4",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
+          "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==",
+          "dev": true
+        }
+      }
+    },
+    "mocha-junit-reporter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mocha-junit-reporter/-/mocha-junit-reporter-2.0.0.tgz",
+      "integrity": "sha512-20HoWh2HEfhqmigfXOKUhZQyX23JImskc37ZOhIjBKoBEsb+4cAFRJpAVhFpnvsztLklW/gFVzsrobjLwmX4lA==",
+      "dev": true,
+      "requires": {
+        "debug": "^2.2.0",
+        "md5": "^2.1.0",
+        "mkdirp": "~0.5.1",
+        "strip-ansi": "^4.0.0",
+        "xml": "^1.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
+    "mocha-silent-reporter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/mocha-silent-reporter/-/mocha-silent-reporter-1.0.0.tgz",
+      "integrity": "sha1-8fL8r6Ti6u6YmsbNALdrggT4kLs=",
+      "dev": true,
+      "requires": {
+        "chalk": "^0.5.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
+          "integrity": "sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
+          "integrity": "sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
+          "integrity": "sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^1.1.0",
+            "escape-string-regexp": "^1.0.0",
+            "has-ansi": "^0.1.0",
+            "strip-ansi": "^0.3.0",
+            "supports-color": "^0.2.0"
+          }
+        },
+        "has-ansi": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
+          "integrity": "sha1-hPJlqujA5qiKEtcCKJS3VoiUxi4=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^0.2.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
+          "integrity": "sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^0.2.1"
+          }
+        },
+        "supports-color": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
+          "integrity": "sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=",
+          "dev": true
+        }
+      }
+    },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
+    "moo": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz",
+      "integrity": "sha512-I1mnb5xn4fO80BH9BLcF0yLypy2UKl+Cb01Fu0hJRkJjlCRtxZMWkTdAtDd5ZqCOxtCkhmRwyI57vWT+1iZ67w==",
+      "dev": true
+    },
+    "morgan": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
+      "integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
+      "dev": true,
+      "requires": {
+        "basic-auth": "~2.0.1",
+        "debug": "2.6.9",
+        "depd": "~2.0.0",
+        "on-finished": "~2.3.0",
+        "on-headers": "~1.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "depd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "mout": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/mout/-/mout-1.2.2.tgz",
+      "integrity": "sha512-w0OUxFEla6z3d7sVpMZGBCpQvYh8PHS1wZ6Wu9GNKHMpAHWJ0if0LsQZh3DlOqw55HlhJEOMLpFnwtxp99Y5GA==",
+      "dev": true
+    },
+    "mri": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
+      "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==",
+      "dev": true
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "multer": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.2.tgz",
+      "integrity": "sha512-xY8pX7V+ybyUpbYMxtjM9KAiD9ixtg5/JkeKUTD6xilfDv0vzzOFcCp4Ljb1UU3tSOM3VTZtKo63OmzOrGi3Cg==",
+      "dev": true,
+      "requires": {
+        "append-field": "^1.0.0",
+        "busboy": "^0.2.11",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.1",
+        "object-assign": "^4.1.1",
+        "on-finished": "^2.3.0",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      }
+    },
+    "mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "requires": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "nanoid": {
+      "version": "3.1.20",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
+      "integrity": "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==",
+      "dev": true
+    },
+    "nanomatch": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
+      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
+      "dev": true,
+      "requires": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "fragment-cache": "^0.2.1",
+        "is-windows": "^1.0.2",
+        "kind-of": "^6.0.2",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      }
+    },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
+      "dev": true
+    },
+    "natural-compare-lite": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+      "integrity": "sha1-F7CVgZiJef3a/gIB6TG6kzyWy7Q=",
+      "dev": true
+    },
+    "nearley": {
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
+      "integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==",
+      "dev": true,
+      "requires": {
+        "commander": "^2.19.0",
+        "moo": "^0.5.0",
+        "railroad-diagrams": "^1.0.0",
+        "randexp": "0.4.6"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        }
+      }
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
+      "dev": true
+    },
+    "neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
+    },
+    "nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
+    "nise": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/nise/-/nise-4.1.0.tgz",
+      "integrity": "sha512-eQMEmGN/8arp0xsvGoQ+B1qvSkR73B1nWSCh7nOt5neMCtwcQVYQGdzQMhcNscktTsWB54xnlSQFzOAPJD8nXA==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.7.0",
+        "@sinonjs/fake-timers": "^6.0.0",
+        "@sinonjs/text-encoding": "^0.7.1",
+        "just-extend": "^4.0.2",
+        "path-to-regexp": "^1.7.0"
+      },
+      "dependencies": {
+        "@sinonjs/fake-timers": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz",
+          "integrity": "sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==",
+          "dev": true,
+          "requires": {
+            "@sinonjs/commons": "^1.7.0"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "dev": true,
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "no-case": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
+      "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
+      "dev": true,
+      "requires": {
+        "lower-case": "^1.1.1"
+      }
+    },
+    "node-dir": {
+      "version": "0.1.17",
+      "resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz",
+      "integrity": "sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=",
+      "dev": true,
+      "requires": {
+        "minimatch": "^3.0.2"
+      }
+    },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "dev": true
+    },
+    "node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=",
+      "dev": true
+    },
+    "node-modules-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
+      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=",
+      "dev": true
+    },
+    "node-notifier": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-8.0.2.tgz",
+      "integrity": "sha512-oJP/9NAdd9+x2Q+rfphB2RJCHjod70RcRLjosiPMMu5gjIfwVnOUGq2nbTjTUbmy0DJ/tFIVT30+Qe3nzl4TJg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "growly": "^1.3.0",
+        "is-wsl": "^2.2.0",
+        "semver": "^7.3.2",
+        "shellwords": "^0.1.1",
+        "uuid": "^8.3.0",
+        "which": "^2.0.2"
+      },
+      "dependencies": {
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
+    "node-releases": {
+      "version": "1.1.71",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.71.tgz",
+      "integrity": "sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg==",
+      "dev": true
+    },
+    "nomnom": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.5.2.tgz",
+      "integrity": "sha1-9DRUSKhTz71cDSYyDyR3qwUm/i8=",
+      "dev": true,
+      "requires": {
+        "colors": "0.5.x",
+        "underscore": "1.1.x"
+      },
+      "dependencies": {
+        "colors": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/colors/-/colors-0.5.1.tgz",
+          "integrity": "sha1-fQAj6usVTo7p/Oddy5I9DtFmd3Q=",
+          "dev": true
+        }
+      }
+    },
+    "nopt": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+      "dev": true,
+      "requires": {
+        "abbrev": "1"
+      }
+    },
+    "normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
+    "normalize-url": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
+      "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==",
+      "dev": true
+    },
+    "now-and-later": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-2.0.1.tgz",
+      "integrity": "sha512-KGvQ0cB70AQfg107Xvs/Fbu+dGmZoTRJp2TaPwcwQm3/7PteUyN2BCgk8KBMPGBUXZdVwyWS8fDCGFygBm19UQ==",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.2"
+      }
+    },
+    "npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
+      "dev": true,
+      "requires": {
+        "path-key": "^2.0.0"
+      }
+    },
+    "nth-check": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
+      "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0"
+      }
+    },
+    "nwsapi": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
+      "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==",
+      "dev": true
+    },
+    "oauth-sign": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "dev": true
+    },
+    "obj-str": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/obj-str/-/obj-str-1.1.0.tgz",
+      "integrity": "sha512-iQNCv4NPzzVSnG4nVmkBsBwSq3+Z5/X/Yi4omFpzALC4ZbLXd4QByOFqWd+Khh2nQnbzhsklRxbDwhYKHotrYA=="
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "object-copy": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
+      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
+      "dev": true,
+      "requires": {
+        "copy-descriptor": "^0.1.0",
+        "define-property": "^0.2.5",
+        "kind-of": "^3.0.3"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "object-inspect": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
+      "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw=="
+    },
+    "object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+    },
+    "object-visit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
+      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.0"
+      }
+    },
+    "object.assign": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "has-symbols": "^1.0.1",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "object.entries": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.3.tgz",
+      "integrity": "sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.1",
+        "has": "^1.0.3"
+      }
+    },
+    "object.fromentries": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.4.tgz",
+      "integrity": "sha512-EsFBshs5RUUpQEY1D4q/m59kMfz4YJvxuNCJcv/jWwOJr34EaVnG11ZrZa0UHB3wnzV1wx8m58T4hQL8IuNXlQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2",
+        "has": "^1.0.3"
+      }
+    },
+    "object.pick": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "object.values": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.3.tgz",
+      "integrity": "sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2",
+        "has": "^1.0.3"
+      }
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "dev": true,
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "requires": {
+        "mimic-fn": "^2.1.0"
+      }
+    },
+    "open": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.2.0.tgz",
+      "integrity": "sha512-O8uInONB4asyY3qUcEytpgwxQG3O0fJ/hlssoUHsBboOIRVZzT6Wq+Rwj5nffbeUhOdMjpXeISpDDzHCMRDuOQ==",
+      "dev": true,
+      "requires": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      }
+    },
+    "optionator": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+      "dev": true,
+      "requires": {
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.6",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "word-wrap": "~1.2.3"
+      }
+    },
+    "ora": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.3.0.tgz",
+      "integrity": "sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==",
+      "dev": true,
+      "requires": {
+        "bl": "^4.0.3",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "log-symbols": "^4.0.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "ordered-read-streams": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-1.0.1.tgz",
+      "integrity": "sha1-d8DLN8QVJdZBZtmQ/61+xqDhNj4=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^2.0.1"
+      }
+    },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+      "dev": true
+    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+      "dev": true
+    },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "dev": true,
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
+    "p-cancelable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
+      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==",
+      "dev": true
+    },
+    "p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
+      "dev": true
+    },
+    "p-each-series": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz",
+      "integrity": "sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA==",
+      "dev": true
+    },
+    "p-event": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/p-event/-/p-event-4.2.0.tgz",
+      "integrity": "sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==",
+      "dev": true,
+      "requires": {
+        "p-timeout": "^3.1.0"
+      }
+    },
+    "p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
+      "dev": true
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.2.0"
+      }
+    },
+    "p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "dev": true,
+      "requires": {
+        "aggregate-error": "^3.0.0"
+      }
+    },
+    "p-timeout": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+      "dev": true,
+      "requires": {
+        "p-finally": "^1.0.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
+    "package-json": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz",
+      "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==",
+      "dev": true,
+      "requires": {
+        "got": "^9.6.0",
+        "registry-auth-token": "^4.0.0",
+        "registry-url": "^5.0.0",
+        "semver": "^6.2.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "param-case": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
+      "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
+      "dev": true,
+      "requires": {
+        "no-case": "^2.2.0"
+      }
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      }
+    },
+    "parse-ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-2.1.0.tgz",
+      "integrity": "sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA==",
+      "dev": true
+    },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true
+    },
+    "parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
+      "dev": true
+    },
+    "parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+      "dev": true
+    },
+    "parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "dev": true,
+      "requires": {
+        "parse5": "^6.0.1"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "dev": true
+    },
+    "pascalcase": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
+      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
+      "dev": true
+    },
+    "path-dirname": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
+      "dev": true
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
+      "dev": true
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "pathval": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "dev": true
+    },
+    "pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=",
+      "dev": true,
+      "requires": {
+        "through": "~2.3"
+      }
+    },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+    },
+    "picomatch": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
+      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
+      "dev": true
+    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+      "dev": true
+    },
+    "pirates": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
+      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
+      "dev": true,
+      "requires": {
+        "node-modules-regexp": "^1.0.0"
+      }
+    },
+    "pkg-conf": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pkg-conf/-/pkg-conf-3.1.0.tgz",
+      "integrity": "sha512-m0OTbR/5VPNPqO1ph6Fqbj7Hv6QU7gR/tQW40ZqrL1rjgCU85W6C1bJn0BItuJqnR98PWzw7Z8hHeChD1WrgdQ==",
+      "dev": true,
+      "requires": {
+        "find-up": "^3.0.0",
+        "load-json-file": "^5.2.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        }
+      }
+    },
+    "pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "requires": {
+        "find-up": "^4.0.0"
+      }
+    },
+    "pkg-up": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz",
+      "integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=",
+      "dev": true,
+      "requires": {
+        "find-up": "^2.1.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+          "dev": true,
+          "requires": {
+            "locate-path": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+          "dev": true,
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "dev": true,
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+          "dev": true,
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+          "dev": true
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        }
+      }
+    },
+    "plugin-error": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
+      "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^1.0.1",
+        "arr-diff": "^4.0.0",
+        "arr-union": "^3.1.0",
+        "extend-shallow": "^3.0.2"
+      },
+      "dependencies": {
+        "ansi-colors": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
+          "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
+          "dev": true,
+          "requires": {
+            "ansi-wrap": "^0.1.0"
+          }
+        }
+      }
+    },
+    "plur": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/plur/-/plur-4.0.0.tgz",
+      "integrity": "sha512-4UGewrYgqDFw9vV6zNV+ADmPAUAfJPKtGvb/VdpQAx25X5f3xXdGdyOEVFwkl8Hl/tl7+xbeHqSEM+D5/TirUg==",
+      "dev": true,
+      "requires": {
+        "irregular-plurals": "^3.2.0"
+      }
+    },
+    "posix-character-classes": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
+      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
+      "dev": true
+    },
+    "postcss": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz",
+      "integrity": "sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==",
+      "dev": true,
+      "requires": {
+        "colorette": "^1.2.2",
+        "nanoid": "^3.1.23",
+        "source-map-js": "^0.6.2"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "3.1.23",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
+          "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-calc": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.0.0.tgz",
+      "integrity": "sha512-5NglwDrcbiy8XXfPM11F3HeC6hoT9W7GUH/Zi5U/p7u3Irv4rHhdDcIZwG0llHXV4ftsBjpfWMXAnXNl4lnt8g==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
+    "postcss-colormin": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.1.1.tgz",
+      "integrity": "sha512-SyTmqKKN6PyYNeeKEC0hqIP5CDuprO1hHurdW1aezDyfofDUOn7y7MaxcolbsW3oazPwFiGiY30XRiW1V4iZpA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.16.0",
+        "colord": "^2.0.0",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-convert-values": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.1.tgz",
+      "integrity": "sha512-C3zR1Do2BkKkCgC0g3sF8TS0koF2G+mN8xxayZx3f10cIRmTaAnpgpRQZjNekTZxM2ciSPoh2IWJm0VZx8NoQg==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-discard-comments": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz",
+      "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==",
+      "dev": true
+    },
+    "postcss-discard-duplicates": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz",
+      "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==",
+      "dev": true
+    },
+    "postcss-discard-empty": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz",
+      "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==",
+      "dev": true
+    },
+    "postcss-discard-overridden": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz",
+      "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==",
+      "dev": true
+    },
+    "postcss-import": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.0.2.tgz",
+      "integrity": "sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      }
+    },
+    "postcss-merge-longhand": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.2.tgz",
+      "integrity": "sha512-BMlg9AXSI5G9TBT0Lo/H3PfUy63P84rVz3BjCFE9e9Y9RXQZD3+h3YO1kgTNsNJy7bBc1YQp8DmSnwLIW5VPcw==",
+      "dev": true,
+      "requires": {
+        "css-color-names": "^1.0.1",
+        "postcss-value-parser": "^4.1.0",
+        "stylehacks": "^5.0.1"
+      }
+    },
+    "postcss-merge-rules": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.1.tgz",
+      "integrity": "sha512-UR6R5Ph0c96QB9TMBH3ml8/kvPCThPHepdhRqAbvMRDRHQACPC8iM5NpfIC03+VRMZTGXy4L/BvFzcDFCgb+fA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.16.0",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^2.0.1",
+        "postcss-selector-parser": "^6.0.5",
+        "vendors": "^1.0.3"
+      }
+    },
+    "postcss-minify-font-values": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.0.1.tgz",
+      "integrity": "sha512-7JS4qIsnqaxk+FXY1E8dHBDmraYFWmuL6cgt0T1SWGRO5bzJf8sUoelwa4P88LEWJZweHevAiDKxHlofuvtIoA==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-minify-gradients": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.1.tgz",
+      "integrity": "sha512-odOwBFAIn2wIv+XYRpoN2hUV3pPQlgbJ10XeXPq8UY2N+9ZG42xu45lTn/g9zZ+d70NKSQD6EOi6UiCMu3FN7g==",
+      "dev": true,
+      "requires": {
+        "cssnano-utils": "^2.0.1",
+        "is-color-stop": "^1.1.0",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-minify-params": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.1.tgz",
+      "integrity": "sha512-4RUC4k2A/Q9mGco1Z8ODc7h+A0z7L7X2ypO1B6V8057eVK6mZ6xwz6QN64nHuHLbqbclkX1wyzRnIrdZehTEHw==",
+      "dev": true,
+      "requires": {
+        "alphanum-sort": "^1.0.2",
+        "browserslist": "^4.16.0",
+        "cssnano-utils": "^2.0.1",
+        "postcss-value-parser": "^4.1.0",
+        "uniqs": "^2.0.0"
+      }
+    },
+    "postcss-minify-selectors": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.1.0.tgz",
+      "integrity": "sha512-NzGBXDa7aPsAcijXZeagnJBKBPMYLaJJzB8CQh6ncvyl2sIndLVWfbcDi0SBjRWk5VqEjXvf8tYwzoKf4Z07og==",
+      "dev": true,
+      "requires": {
+        "alphanum-sort": "^1.0.2",
+        "postcss-selector-parser": "^6.0.5"
+      }
+    },
+    "postcss-normalize-charset": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
+      "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==",
+      "dev": true
+    },
+    "postcss-normalize-display-values": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.0.1.tgz",
+      "integrity": "sha512-uupdvWk88kLDXi5HEyI9IaAJTE3/Djbcrqq8YgjvAVuzgVuqIk3SuJWUisT2gaJbZm1H9g5k2w1xXilM3x8DjQ==",
+      "dev": true,
+      "requires": {
+        "cssnano-utils": "^2.0.1",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-normalize-positions": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.0.1.tgz",
+      "integrity": "sha512-rvzWAJai5xej9yWqlCb1OWLd9JjW2Ex2BCPzUJrbaXmtKtgfL8dBMOOMTX6TnvQMtjk3ei1Lswcs78qKO1Skrg==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-normalize-repeat-style": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.0.1.tgz",
+      "integrity": "sha512-syZ2itq0HTQjj4QtXZOeefomckiV5TaUO6ReIEabCh3wgDs4Mr01pkif0MeVwKyU/LHEkPJnpwFKRxqWA/7O3w==",
+      "dev": true,
+      "requires": {
+        "cssnano-utils": "^2.0.1",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-normalize-string": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.0.1.tgz",
+      "integrity": "sha512-Ic8GaQ3jPMVl1OEn2U//2pm93AXUcF3wz+OriskdZ1AOuYV25OdgS7w9Xu2LO5cGyhHCgn8dMXh9bO7vi3i9pA==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-normalize-timing-functions": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.0.1.tgz",
+      "integrity": "sha512-cPcBdVN5OsWCNEo5hiXfLUnXfTGtSFiBU9SK8k7ii8UD7OLuznzgNRYkLZow11BkQiiqMcgPyh4ZqXEEUrtQ1Q==",
+      "dev": true,
+      "requires": {
+        "cssnano-utils": "^2.0.1",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-normalize-unicode": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.0.1.tgz",
+      "integrity": "sha512-kAtYD6V3pK0beqrU90gpCQB7g6AOfP/2KIPCVBKJM2EheVsBQmx/Iof+9zR9NFKLAx4Pr9mDhogB27pmn354nA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.16.0",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-normalize-url": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.1.tgz",
+      "integrity": "sha512-hkbG0j58Z1M830/CJ73VsP7gvlG1yF+4y7Fd1w4tD2c7CaA2Psll+pQ6eQhth9y9EaqZSLzamff/D0MZBMbYSg==",
+      "dev": true,
+      "requires": {
+        "is-absolute-url": "^3.0.3",
+        "normalize-url": "^4.5.0",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-normalize-whitespace": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.0.1.tgz",
+      "integrity": "sha512-iPklmI5SBnRvwceb/XH568yyzK0qRVuAG+a1HFUsFRf11lEJTiQQa03a4RSCQvLKdcpX7XsI1Gen9LuLoqwiqA==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-ordered-values": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.0.1.tgz",
+      "integrity": "sha512-6mkCF5BQ25HvEcDfrMHCLLFHlraBSlOXFnQMHYhSpDO/5jSR1k8LdEXOkv+7+uzW6o6tBYea1Km0wQSRkPJkwA==",
+      "dev": true,
+      "requires": {
+        "cssnano-utils": "^2.0.1",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-reduce-initial": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.0.1.tgz",
+      "integrity": "sha512-zlCZPKLLTMAqA3ZWH57HlbCjkD55LX9dsRyxlls+wfuRfqCi5mSlZVan0heX5cHr154Dq9AfbH70LyhrSAezJw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.16.0",
+        "caniuse-api": "^3.0.0"
+      }
+    },
+    "postcss-reduce-transforms": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.0.1.tgz",
+      "integrity": "sha512-a//FjoPeFkRuAguPscTVmRQUODP+f3ke2HqFNgGPwdYnpeC29RZdCBvGRGTsKpMURb/I3p6jdKoBQ2zI+9Q7kA==",
+      "dev": true,
+      "requires": {
+        "cssnano-utils": "^2.0.1",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
+      "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-svgo": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.1.tgz",
+      "integrity": "sha512-cD7DFo6tF9i5eWvwtI4irKOHCpmASFS0xvZ5EQIgEdA1AWfM/XiHHY/iss0gcKHhkqwgYmuo2M0KhJLd5Us6mg==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.1.0",
+        "svgo": "^2.3.0"
+      }
+    },
+    "postcss-unique-selectors": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.1.tgz",
+      "integrity": "sha512-gwi1NhHV4FMmPn+qwBNuot1sG1t2OmacLQ/AX29lzyggnjd+MnVD5uqQmpXO3J17KGL2WAxQruj1qTd3H0gG/w==",
+      "dev": true,
+      "requires": {
+        "alphanum-sort": "^1.0.2",
+        "postcss-selector-parser": "^6.0.5",
+        "uniqs": "^2.0.0"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "dev": true
+    },
+    "posthtml": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.15.2.tgz",
+      "integrity": "sha512-YugEJ5ze/0DLRIVBjCpDwANWL4pPj1kHJ/2llY8xuInr0nbkon3qTiMPe5LQa+cCwNjxS7nAZZTp+1M+6mT4Zg==",
+      "dev": true,
+      "requires": {
+        "posthtml-parser": "^0.7.2",
+        "posthtml-render": "^1.3.1"
+      }
+    },
+    "posthtml-parser": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.7.2.tgz",
+      "integrity": "sha512-LjEEG/3fNcWZtBfsOE3Gbyg1Li4CmsZRkH1UmbMR7nKdMXVMYI3B4/ZMiCpaq8aI1Aym4FRMMW9SAOLSwOnNsQ==",
+      "dev": true,
+      "requires": {
+        "htmlparser2": "^6.0.0"
+      }
+    },
+    "posthtml-render": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-1.3.1.tgz",
+      "integrity": "sha512-eSToKjNLu0FiF76SSGMHjOFXYzAc/CJqi677Sq6hYvcvFCBtD6de/W5l+0IYPf7ypscqAfjCttxvTdMJt5Gj8Q==",
+      "dev": true
+    },
+    "preact": {
+      "version": "10.5.13",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.13.tgz",
+      "integrity": "sha512-q/vlKIGNwzTLu+jCcvywgGrt+H/1P/oIRSD6mV4ln3hmlC+Aa34C7yfPI4+5bzW8pONyVXYS7SvXosy2dKKtWQ=="
+    },
+    "prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
+      "dev": true
+    },
+    "prepend-http": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
+      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
+      "dev": true
+    },
+    "prettier": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz",
+      "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==",
+      "dev": true
+    },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
+    "pretty-format": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
+      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "ansi-regex": "^5.0.0",
+        "ansi-styles": "^4.0.0",
+        "react-is": "^17.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "react-is": {
+          "version": "17.0.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
+          "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==",
+          "dev": true
+        }
+      }
+    },
+    "pretty-ms": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-7.0.1.tgz",
+      "integrity": "sha512-973driJZvxiGOQ5ONsFhOF/DtzPMOMtgC11kCpUrPGMTgqp2q/1gwzCquocrN33is0VZ5GFHXZYMM9l6h67v2Q==",
+      "dev": true,
+      "requires": {
+        "parse-ms": "^2.1.0"
+      }
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true
+    },
+    "promise": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz",
+      "integrity": "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==",
+      "dev": true,
+      "requires": {
+        "asap": "~2.0.6"
+      }
+    },
+    "promise-pjs": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/promise-pjs/-/promise-pjs-1.1.5.tgz",
+      "integrity": "sha512-TaRXEbkLsIk+ni1w8qxbL/BJpdsjeMJqKnV5NtKjAKSa0czLiihdx+20fDxBJaznGvoMXerJ5+giwN2jNCZO1A=="
+    },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "prop-types-exact": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz",
+      "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==",
+      "requires": {
+        "has": "^1.0.3",
+        "object.assign": "^4.1.0",
+        "reflect.ownkeys": "^0.2.0"
+      }
+    },
+    "proxy-addr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
+      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
+      "dev": true,
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "psl": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
+      "dev": true
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "pumpify": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
+      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+      "dev": true,
+      "requires": {
+        "duplexify": "^3.6.0",
+        "inherits": "^2.0.3",
+        "pump": "^2.0.0"
+      },
+      "dependencies": {
+        "pump": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+          "dev": true,
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        }
+      }
+    },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
+    },
+    "pupa": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz",
+      "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==",
+      "dev": true,
+      "requires": {
+        "escape-goat": "^2.0.0"
+      }
+    },
+    "qjobs": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/qjobs/-/qjobs-1.2.0.tgz",
+      "integrity": "sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==",
+      "dev": true
+    },
+    "qs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+      "dev": true
+    },
+    "querystring": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
+      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
+      "dev": true
+    },
+    "querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
+    "queue-microtask": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.2.tgz",
+      "integrity": "sha512-dB15eXv3p2jDlbOiNLyMabYg1/sXvppd8DP2J3EOCQ0AkuSXCW2tP7mnVouVLJKgUMY6yP0kcQDVpLCN13h4Xg==",
+      "dev": true
+    },
+    "quick-lru": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.0.tgz",
+      "integrity": "sha512-WjAKQ9ORzvqjLijJXiXWqc3Gcs1ivoxCj6KJmEjoWBE6OtHwuaDLSAUqGHALUiid7A1KqGqsSHZs8prxF5xxAQ==",
+      "dev": true
+    },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
+    "railroad-diagrams": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
+      "integrity": "sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=",
+      "dev": true
+    },
+    "randexp": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
+      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
+      "dev": true,
+      "requires": {
+        "discontinuous-range": "1.0.0",
+        "ret": "~0.1.10"
+      }
+    },
+    "randomatic": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
+      "integrity": "sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==",
+      "dev": true,
+      "requires": {
+        "is-number": "^4.0.0",
+        "kind-of": "^6.0.0",
+        "math-random": "^1.0.1"
+      },
+      "dependencies": {
+        "is-number": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
+          "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==",
+          "dev": true
+        }
+      }
+    },
+    "randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "dev": true
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "dev": true,
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "dependencies": {
+        "ini": {
+          "version": "1.3.8",
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+          "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+          "dev": true
+        }
+      }
+    },
+    "react": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "react-dates": {
+      "version": "21.8.0",
+      "resolved": "https://registry.npmjs.org/react-dates/-/react-dates-21.8.0.tgz",
+      "integrity": "sha512-PPriGqi30CtzZmoHiGdhlA++YPYPYGCZrhydYmXXQ6RAvAsaONcPtYgXRTLozIOrsQ5mSo40+DiA5eOFHnZ6xw==",
+      "requires": {
+        "airbnb-prop-types": "^2.15.0",
+        "consolidated-events": "^1.1.1 || ^2.0.0",
+        "enzyme-shallow-equal": "^1.0.0",
+        "is-touch-device": "^1.0.1",
+        "lodash": "^4.1.1",
+        "object.assign": "^4.1.0",
+        "object.values": "^1.1.0",
+        "prop-types": "^15.7.2",
+        "raf": "^3.4.1",
+        "react-moment-proptypes": "^1.6.0",
+        "react-outside-click-handler": "^1.2.4",
+        "react-portal": "^4.2.0",
+        "react-with-direction": "^1.3.1",
+        "react-with-styles": "^4.1.0",
+        "react-with-styles-interface-css": "^6.0.0"
+      }
+    },
+    "react-display-name": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.5.tgz",
+      "integrity": "sha512-I+vcaK9t4+kypiSgaiVWAipqHRXYmZIuAiS8vzFvXHHXVigg/sMKwlRgLy6LH2i3rmP+0Vzfl5lFsFRwF1r3pg=="
+    },
+    "react-dom": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "^0.20.2"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "react-jss": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-10.6.0.tgz",
+      "integrity": "sha512-uCvOHMoQrB+cD8l6K6+gIStqBhTyjPM/55sXHfujlr0E4GclQg0ZR26nyGyh7XB+v9a2FfMp6Y4L2Bc1Z+L1oQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "@emotion/is-prop-valid": "^0.7.3",
+        "css-jss": "10.6.0",
+        "hoist-non-react-statics": "^3.2.0",
+        "is-in-browser": "^1.1.3",
+        "jss": "10.6.0",
+        "jss-preset-default": "10.6.0",
+        "prop-types": "^15.6.0",
+        "shallow-equal": "^1.2.0",
+        "theming": "^3.3.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "react-moment-proptypes": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/react-moment-proptypes/-/react-moment-proptypes-1.8.1.tgz",
+      "integrity": "sha512-Er940DxWoObfIqPrZNfwXKugjxMIuk1LAuEzn23gytzV6hKS/sw108wibi9QubfMN4h+nrlje8eUCSbQRJo2fQ==",
+      "requires": {
+        "moment": ">=1.6.0"
+      }
+    },
+    "react-outside-click-handler": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz",
+      "integrity": "sha512-Te/7zFU0oHpAnctl//pP3hEAeobfeHMyygHB8MnjP6sX5OR8KHT1G3jmLsV3U9RnIYo+Yn+peJYWu+D5tUS8qQ==",
+      "requires": {
+        "airbnb-prop-types": "^2.15.0",
+        "consolidated-events": "^1.1.1 || ^2.0.0",
+        "document.contains": "^1.0.1",
+        "object.values": "^1.1.0",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "react-portal": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-portal/-/react-portal-4.2.1.tgz",
+      "integrity": "sha512-fE9kOBagwmTXZ3YGRYb4gcMy+kSA+yLO0xnPankjRlfBv4uCpFXqKPfkpsGQQR15wkZ9EssnvTOl1yMzbkxhPQ==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
+    "react-with-direction": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-with-direction/-/react-with-direction-1.3.1.tgz",
+      "integrity": "sha512-aGcM21ZzhqeXFvDCfPj0rVNYuaVXfTz5D3Rbn0QMz/unZe+CCiLHthrjQWO7s6qdfXORgYFtmS7OVsRgSk5LXQ==",
+      "requires": {
+        "airbnb-prop-types": "^2.10.0",
+        "brcast": "^2.0.2",
+        "deepmerge": "^1.5.2",
+        "direction": "^1.0.2",
+        "hoist-non-react-statics": "^3.3.0",
+        "object.assign": "^4.1.0",
+        "object.values": "^1.0.4",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "react-with-styles": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-with-styles/-/react-with-styles-4.2.0.tgz",
+      "integrity": "sha512-tZCTY27KriRNhwHIbg1NkSdTTOSfXDg6Z7s+Q37mtz0Ym7Sc7IOr3PzVt4qJhJMW6Nkvfi3g34FuhtiGAJCBQA==",
+      "requires": {
+        "airbnb-prop-types": "^2.14.0",
+        "hoist-non-react-statics": "^3.2.1",
+        "object.assign": "^4.1.0",
+        "prop-types": "^15.7.2",
+        "react-with-direction": "^1.3.1"
+      }
+    },
+    "react-with-styles-interface-css": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-with-styles-interface-css/-/react-with-styles-interface-css-6.0.0.tgz",
+      "integrity": "sha512-6khSG1Trf4L/uXOge/ZAlBnq2O2PEXlQEqAhCRbvzaQU4sksIkdwpCPEl6d+DtP3+IdhyffTWuHDO9lhe1iYvA==",
+      "requires": {
+        "array.prototype.flat": "^1.2.1",
+        "global-cache": "^1.2.1"
+      }
+    },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
+      "dev": true,
+      "requires": {
+        "pify": "^2.3.0"
+      }
+    },
+    "read-pkg": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+      "dev": true,
+      "requires": {
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^2.5.0",
+        "parse-json": "^5.0.0",
+        "type-fest": "^0.6.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+          "dev": true
+        }
+      }
+    },
+    "read-pkg-up": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+      "dev": true,
+      "requires": {
+        "find-up": "^4.1.0",
+        "read-pkg": "^5.2.0",
+        "type-fest": "^0.8.1"
+      }
+    },
+    "readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dev": true,
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "readdirp": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
+      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "recast": {
+      "version": "0.20.4",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.20.4.tgz",
+      "integrity": "sha512-6qLIBGGRcwjrTZGIiBpJVC/NeuXpogXNyRQpqU1zWPUigCphvApoCs9KIwDYh1eDuJ6dAFlQoi/QUyE5KQ6RBQ==",
+      "dev": true,
+      "requires": {
+        "ast-types": "0.14.2",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tslib": "^2.0.1"
+      },
+      "dependencies": {
+        "ast-types": {
+          "version": "0.14.2",
+          "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz",
+          "integrity": "sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.0.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==",
+          "dev": true
+        }
+      }
+    },
+    "reflect.ownkeys": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
+      "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA="
+    },
+    "regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true
+    },
+    "regenerate-unicode-properties": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
+      "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
+      "dev": true,
+      "requires": {
+        "regenerate": "^1.4.0"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+    },
+    "regenerator-transform": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.5.tgz",
+      "integrity": "sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "regex-not": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
+      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^3.0.2",
+        "safe-regex": "^1.1.0"
+      }
+    },
+    "regexp.prototype.flags": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz",
+      "integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "regexpp": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
+      "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==",
+      "dev": true
+    },
+    "regexpu-core": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
+      "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==",
+      "dev": true,
+      "requires": {
+        "regenerate": "^1.4.0",
+        "regenerate-unicode-properties": "^8.2.0",
+        "regjsgen": "^0.5.1",
+        "regjsparser": "^0.6.4",
+        "unicode-match-property-ecmascript": "^1.0.4",
+        "unicode-match-property-value-ecmascript": "^1.2.0"
+      }
+    },
+    "regextras": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/regextras/-/regextras-0.7.1.tgz",
+      "integrity": "sha512-9YXf6xtW+qzQ+hcMQXx95MOvfqXFgsKDZodX3qZB0x2n5Z94ioetIITsBtvJbiOyxa/6s9AtyweBLCdPmPko/w==",
+      "dev": true
+    },
+    "registry-auth-token": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
+      "integrity": "sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==",
+      "dev": true,
+      "requires": {
+        "rc": "^1.2.8"
+      }
+    },
+    "registry-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz",
+      "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==",
+      "dev": true,
+      "requires": {
+        "rc": "^1.2.8"
+      }
+    },
+    "regjsgen": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
+      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==",
+      "dev": true
+    },
+    "regjsparser": {
+      "version": "0.6.9",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz",
+      "integrity": "sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==",
+      "dev": true,
+      "requires": {
+        "jsesc": "~0.5.0"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
+          "dev": true
+        }
+      }
+    },
+    "relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
+      "dev": true
+    },
+    "remarkable": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-1.7.4.tgz",
+      "integrity": "sha512-e6NKUXgX95whv7IgddywbeN/ItCkWbISmc2DiqHJb0wTrqZIexqdco5b8Z3XZoo/48IdNVKM9ZCvTPJ4F5uvhg==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.10",
+        "autolinker": "~0.28.0"
+      }
+    },
+    "remove-bom-buffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz",
+      "integrity": "sha512-8v2rWhaakv18qcvNeli2mZ/TMTL2nEyAKRvzo1WtnZBl15SHyEhrCu2/xKlJyUFKHiHgfXIyuY6g2dObJJycXQ==",
+      "dev": true,
+      "requires": {
+        "is-buffer": "^1.1.5",
+        "is-utf8": "^0.2.1"
+      }
+    },
+    "remove-bom-stream": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/remove-bom-stream/-/remove-bom-stream-1.2.0.tgz",
+      "integrity": "sha1-BfGlk/FuQuH7kOv1nejlaVJflSM=",
+      "dev": true,
+      "requires": {
+        "remove-bom-buffer": "^3.0.0",
+        "safe-buffer": "^5.1.0",
+        "through2": "^2.0.3"
+      }
+    },
+    "remove-trailing-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
+      "dev": true
+    },
+    "repeat-element": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz",
+      "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==",
+      "dev": true
+    },
+    "repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
+      "dev": true
+    },
+    "replace-ext": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.1.tgz",
+      "integrity": "sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==",
+      "dev": true
+    },
+    "request": {
+      "version": "2.88.2",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+      "dev": true,
+      "requires": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.2",
+        "har-validator": "~5.1.3",
+        "http-signature": "~1.2.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "oauth-sign": "~0.9.0",
+        "performance-now": "^2.1.0",
+        "qs": "~6.5.2",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "~2.5.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "dev": true,
+          "requires": {
+            "psl": "^1.1.28",
+            "punycode": "^2.1.1"
+          }
+        },
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "dev": true
+    },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true
+    },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "dev": true
+    },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+    },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
+    "resolve": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      }
+    },
+    "resolve-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^5.0.0"
+      }
+    },
+    "resolve-dir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+      "integrity": "sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=",
+      "dev": true,
+      "requires": {
+        "expand-tilde": "^2.0.0",
+        "global-modules": "^1.0.0"
+      }
+    },
+    "resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true
+    },
+    "resolve-options": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-options/-/resolve-options-1.1.0.tgz",
+      "integrity": "sha1-MrueOcBtZzONyTeMDW1gdFZq0TE=",
+      "dev": true,
+      "requires": {
+        "value-or-function": "^3.0.0"
+      }
+    },
+    "resolve-url": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
+      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
+      "dev": true
+    },
+    "responselike": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
+      "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
+      "dev": true,
+      "requires": {
+        "lowercase-keys": "^1.0.0"
+      }
+    },
+    "restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "requires": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "ret": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
+      "dev": true
+    },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
+    "rfdc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
+      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
+      "dev": true
+    },
+    "rgb-regex": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
+      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=",
+      "dev": true
+    },
+    "rgba-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
+      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "rocambole": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rocambole/-/rocambole-0.7.0.tgz",
+      "integrity": "sha1-9seVBVF9xCtvuECEK4uVOw+WhYU=",
+      "dev": true,
+      "requires": {
+        "esprima": "^2.1"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "2.7.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
+          "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=",
+          "dev": true
+        }
+      }
+    },
+    "rrule": {
+      "version": "2.6.8",
+      "resolved": "https://registry.npmjs.org/rrule/-/rrule-2.6.8.tgz",
+      "integrity": "sha512-cUaXuUPrz9d1wdyzHsBfT1hptKlGgABeCINFXFvulEPqh9Np9BnF3C3lrv9uO54IIr8VDb58tsSF3LhsW+4VRw==",
+      "requires": {
+        "luxon": "^1.21.3",
+        "tslib": "^1.10.0"
+      }
+    },
+    "rst-selector-parser": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
+      "integrity": "sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=",
+      "dev": true,
+      "requires": {
+        "lodash.flattendeep": "^4.4.0",
+        "nearley": "^2.7.10"
+      }
+    },
+    "rsvp": {
+      "version": "4.8.5",
+      "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
+      "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==",
+      "dev": true
+    },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "safe-json-parse": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-1.0.1.tgz",
+      "integrity": "sha1-PnZyPjjf3aE8mx0poeB//uSzC1c=",
+      "dev": true
+    },
+    "safe-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+      "dev": true,
+      "requires": {
+        "ret": "~0.1.10"
+      }
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "sane": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz",
+      "integrity": "sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==",
+      "dev": true,
+      "requires": {
+        "@cnakazawa/watch": "^1.0.3",
+        "anymatch": "^2.0.0",
+        "capture-exit": "^2.0.0",
+        "exec-sh": "^0.3.2",
+        "execa": "^1.0.0",
+        "fb-watchman": "^2.0.0",
+        "micromatch": "^3.1.4",
+        "minimist": "^1.1.1",
+        "walker": "~1.0.5"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "dev": true,
+          "requires": {
+            "micromatch": "^3.1.4",
+            "normalize-path": "^2.1.1"
+          }
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.3.1",
+            "define-property": "^2.0.2",
+            "extend-shallow": "^3.0.2",
+            "extglob": "^2.0.4",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^6.0.2",
+            "nanomatch": "^1.2.9",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.2"
+          }
+        },
+        "normalize-path": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+          "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+          "dev": true,
+          "requires": {
+            "remove-trailing-separator": "^1.0.1"
+          }
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "dev": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        }
+      }
+    },
+    "saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "dev": true,
+      "requires": {
+        "xmlchars": "^2.2.0"
+      }
+    },
+    "scheduler": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "semver": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "dev": true,
+      "requires": {
+        "lru-cache": "^6.0.0"
+      }
+    },
+    "semver-diff": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz",
+      "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==",
+      "dev": true,
+      "requires": {
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          },
+          "dependencies": {
+            "ms": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+              "dev": true
+            }
+          }
+        },
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+          "dev": true
+        }
+      }
+    },
+    "serialize-error": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-7.0.1.tgz",
+      "integrity": "sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^0.13.1"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.13.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+          "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+          "dev": true
+        }
+      }
+    },
+    "serialize-javascript": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
+      "integrity": "sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==",
+      "dev": true,
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=",
+      "dev": true,
+      "requires": {
+        "accepts": "~1.3.4",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.2",
+        "mime-types": "~2.1.17",
+        "parseurl": "~1.3.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "http-errors": {
+          "version": "1.6.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+          "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
+          "dev": true,
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.3",
+            "setprototypeof": "1.1.0",
+            "statuses": ">= 1.4.0 < 2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        },
+        "setprototypeof": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+          "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
+          "dev": true
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "dev": true,
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "dev": true
+    },
+    "set-getter": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/set-getter/-/set-getter-0.1.0.tgz",
+      "integrity": "sha1-12nBgsnVpR9AkUXy+6guXoboA3Y=",
+      "dev": true,
+      "requires": {
+        "to-object-path": "^0.3.0"
+      }
+    },
+    "set-value": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        }
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
+      "dev": true
+    },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
+    "shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^1.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
+      "dev": true
+    },
+    "shellwords": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
+      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
+      "dev": true,
+      "optional": true
+    },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
+    "signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
+      "dev": true
+    },
+    "sinon": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/sinon/-/sinon-10.0.0.tgz",
+      "integrity": "sha512-XAn5DxtGVJBlBWYrcYKEhWCz7FLwZGdyvANRyK06419hyEpdT0dMc5A8Vcxg5SCGHc40CsqoKsc1bt1CbJPfNw==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.8.1",
+        "@sinonjs/fake-timers": "^6.0.1",
+        "@sinonjs/samsam": "^5.3.1",
+        "diff": "^4.0.2",
+        "nise": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "dependencies": {
+        "@sinonjs/fake-timers": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz",
+          "integrity": "sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==",
+          "dev": true,
+          "requires": {
+            "@sinonjs/commons": "^1.7.0"
+          }
+        },
+        "diff": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+          "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "sinon-chai": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/sinon-chai/-/sinon-chai-3.7.0.tgz",
+      "integrity": "sha512-mf5NURdUaSdnatJx3uhoBOrY9dtL19fiOtAdT1Azxg3+lNJFiuN0uzaU3xX1LeAfL17kHQhTAJgpsfhbMJMY2g==",
+      "dev": true
+    },
+    "slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true
+    },
+    "slice-ansi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
+      "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        }
+      }
+    },
+    "snapdragon": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
+      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
+      "dev": true,
+      "requires": {
+        "base": "^0.11.1",
+        "debug": "^2.2.0",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "map-cache": "^0.2.2",
+        "source-map": "^0.5.6",
+        "source-map-resolve": "^0.5.0",
+        "use": "^3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "snapdragon-node": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
+      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
+      "dev": true,
+      "requires": {
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.0",
+        "snapdragon-util": "^3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        }
+      }
+    },
+    "snapdragon-util": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
+      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.2.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "socket.io": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-3.1.2.tgz",
+      "integrity": "sha512-JubKZnTQ4Z8G4IZWtaAZSiRP3I/inpy8c/Bsx2jrwGrTbKeVU5xd6qkKMHpChYeM3dWZSO0QACiGK+obhBNwYw==",
+      "dev": true,
+      "requires": {
+        "@types/cookie": "^0.4.0",
+        "@types/cors": "^2.8.8",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "debug": "~4.3.1",
+        "engine.io": "~4.1.0",
+        "socket.io-adapter": "~2.1.0",
+        "socket.io-parser": "~4.0.3"
+      }
+    },
+    "socket.io-adapter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.1.0.tgz",
+      "integrity": "sha512-+vDov/aTsLjViYTwS9fPy5pEtTkrbEKsw2M+oVSoFGw6OD1IpvlV1VPhUzNbofCQ8oyMbdYJqDtGdmHQK6TdPg==",
+      "dev": true
+    },
+    "socket.io-parser": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz",
+      "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==",
+      "dev": true,
+      "requires": {
+        "@types/component-emitter": "^1.2.10",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1"
+      }
+    },
+    "source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true
+    },
+    "source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "dev": true
+    },
+    "source-map-resolve": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
+      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
+      "dev": true,
+      "requires": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0",
+        "resolve-url": "^0.2.1",
+        "source-map-url": "^0.4.0",
+        "urix": "^0.1.0"
+      }
+    },
+    "source-map-support": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "source-map-url": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
+      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
+      "dev": true
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
+    "spdx-correct": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
+      "dev": true,
+      "requires": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "requires": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz",
+      "integrity": "sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==",
+      "dev": true
+    },
+    "split": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "dev": true,
+      "requires": {
+        "through": "2"
+      }
+    },
+    "split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^3.0.0"
+      }
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
+    "sshpk": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
+      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
+      "dev": true,
+      "requires": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      }
+    },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
+    },
+    "stack-utils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.3.tgz",
+      "integrity": "sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^2.0.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+          "dev": true
+        }
+      }
+    },
+    "static-extend": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
+      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
+      "dev": true,
+      "requires": {
+        "define-property": "^0.2.5",
+        "object-copy": "^0.1.0"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        }
+      }
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+      "dev": true
+    },
+    "stream-browserify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-3.0.0.tgz",
+      "integrity": "sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==",
+      "dev": true,
+      "requires": {
+        "inherits": "~2.0.4",
+        "readable-stream": "^3.5.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "stream-combiner": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
+      "integrity": "sha1-rsjLrBd7Vrb0+kec7YwZEs7lKFg=",
+      "dev": true,
+      "requires": {
+        "duplexer": "~0.1.1",
+        "through": "~2.3.4"
+      }
+    },
+    "stream-events": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
+      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
+      "dev": true,
+      "requires": {
+        "stubs": "^3.0.0"
+      }
+    },
+    "stream-shift": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
+      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
+      "dev": true
+    },
+    "streamroller": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-2.2.4.tgz",
+      "integrity": "sha512-OG79qm3AujAM9ImoqgWEY1xG4HX+Lw+yY6qZj9R1K2mhF5bEmQ849wvrb+4vt4jLMLzwXttJlQbOdPOQVRv7DQ==",
+      "dev": true,
+      "requires": {
+        "date-format": "^2.1.0",
+        "debug": "^4.1.1",
+        "fs-extra": "^8.1.0"
+      },
+      "dependencies": {
+        "date-format": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/date-format/-/date-format-2.1.0.tgz",
+          "integrity": "sha512-bYQuGLeFxhkxNOF3rcMtiZxvCBAquGzZm6oWA1oZ0g2THUzivaRhv8uOhdr19LmoobSOLoIAxeUK2RdbM8IFTA==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        }
+      }
+    },
+    "streamsearch": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz",
+      "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo=",
+      "dev": true
+    },
+    "string-length": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.1.tgz",
+      "integrity": "sha512-PKyXUd0LK0ePjSOnWn34V2uD6acUWev9uy0Ft05k0E8xRW+SKcA0F7eMr7h5xlzfn+4O3N+55rduYyet3Jk+jw==",
+      "dev": true,
+      "requires": {
+        "char-regex": "^1.0.2",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "string-template": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
+      "integrity": "sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=",
+      "dev": true
+    },
+    "string-width": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "dev": true,
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        }
+      }
+    },
+    "string.prototype.matchall": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz",
+      "integrity": "sha512-pknFIWVachNcyqRfaQSeu/FUfpvJTe4uskUSZ9Wc1RijsPuzbZ8TyYT8WCNnntCjUEqQ3vUHMAfVj2+wLAisPQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2",
+        "has-symbols": "^1.0.1",
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.3.1",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "string.prototype.trim": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.4.tgz",
+      "integrity": "sha512-hWCk/iqf7lp0/AgTF7/ddO1IWtSNPASjlzCicV5irAVdE1grjsneK26YG6xACMBEdCvO8fUST0UzDMh/2Qy+9Q==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2"
+      }
+    },
+    "string.prototype.trimend": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
+      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
+      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.0"
+      }
+    },
+    "strip-bom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+      "dev": true
+    },
+    "strip-color": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/strip-color/-/strip-color-0.1.0.tgz",
+      "integrity": "sha1-EG9l09PmotlAHKwOsM6LinArT3s=",
+      "dev": true
+    },
+    "strip-eof": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
+      "dev": true
+    },
+    "strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true
+    },
+    "strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+      "dev": true
+    },
+    "stubs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
+      "integrity": "sha1-6NK6H6nJBXAwPAMLaQD31fiavls=",
+      "dev": true
+    },
+    "stylehacks": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz",
+      "integrity": "sha512-Es0rVnHIqbWzveU1b24kbw92HsebBepxfcqe5iix7t9j0PQqhs0IxXVXv0pY2Bxa08CgMkzD6OWql7kbGOuEdA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.16.0",
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "supertap": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supertap/-/supertap-2.0.0.tgz",
+      "integrity": "sha512-jRzcXlCeDYvKoZGA5oRhYyR3jUIYu0enkSxtmAgHRlD7HwrovTpH4bDSi0py9FtuA8si9cW/fKommJHuaoDHJA==",
+      "dev": true,
+      "requires": {
+        "arrify": "^2.0.1",
+        "indent-string": "^4.0.0",
+        "js-yaml": "^3.14.0",
+        "serialize-error": "^7.0.1",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "supports-hyperlinks": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.1.0.tgz",
+      "integrity": "sha512-zoE5/e+dnEijk6ASB6/qrK+oYdm2do1hjoLWrqUC/8WEIW1gbxFcKuBof7sW8ArN6e+AYvsE8HBGiVRWL/F5CA==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "svgo": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.3.0.tgz",
+      "integrity": "sha512-fz4IKjNO6HDPgIQxu4IxwtubtbSfGEAJUq/IXyTPIkGhWck/faiiwfkvsB8LnBkKLvSoyNNIY6d13lZprJMc9Q==",
+      "dev": true,
+      "requires": {
+        "@trysound/sax": "0.1.1",
+        "chalk": "^4.1.0",
+        "commander": "^7.1.0",
+        "css-select": "^3.1.2",
+        "css-tree": "^1.1.2",
+        "csso": "^4.2.0",
+        "stable": "^0.1.8"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
+    "symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true
+    },
+    "sync-rpc": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/sync-rpc/-/sync-rpc-1.3.6.tgz",
+      "integrity": "sha512-J8jTXuZzRlvU7HemDgHi3pGnh/rkoqR/OZSjhTyyZrEkkYQbk7Z33AXp37mkPfPpfdOuj7Ex3H/TJM1z48uPQw==",
+      "dev": true,
+      "requires": {
+        "get-port": "^3.1.0"
+      }
+    },
+    "table": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
+      "integrity": "sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==",
+      "dev": true,
+      "requires": {
+        "ajv": "^8.0.1",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.5.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.5.0.tgz",
+          "integrity": "sha512-Y2l399Tt1AguU3BPRP9Fn4eN+Or+StUGWCUpbnFyXSo8NZ9S4uj+AG2pjs5apK+ZMOwYOz1+a+VKvKH7CudXgQ==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        },
+        "slice-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+          "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "astral-regex": "^2.0.0",
+            "is-fullwidth-code-point": "^3.0.0"
+          }
+        }
+      }
+    },
+    "tar": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
+      "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
+      "dev": true,
+      "requires": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^3.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
+        }
+      }
+    },
+    "tar-stream": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.1.5.tgz",
+      "integrity": "sha1-vpIYwTDCACnhB7D5Z/sj3gV50Tw=",
+      "dev": true,
+      "requires": {
+        "bl": "^0.9.0",
+        "end-of-stream": "^1.0.0",
+        "readable-stream": "~1.0.33",
+        "xtend": "^4.0.0"
+      },
+      "dependencies": {
+        "bl": {
+          "version": "0.9.5",
+          "resolved": "https://registry.npmjs.org/bl/-/bl-0.9.5.tgz",
+          "integrity": "sha1-wGt5evCF6gC8Unr8jvzxHeIjIFQ=",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~1.0.26"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        }
+      }
+    },
+    "teeny-request": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-7.0.1.tgz",
+      "integrity": "sha512-sasJmQ37klOlplL4Ia/786M5YlOcoLGQyq2TE4WHSRupbAuDaQW0PfVxV4MtdBtRJ4ngzS+1qim8zP6Zp35qCw==",
+      "dev": true,
+      "requires": {
+        "http-proxy-agent": "^4.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "node-fetch": "^2.6.1",
+        "stream-events": "^1.0.5",
+        "uuid": "^8.0.0"
+      }
+    },
+    "temp": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.4.tgz",
+      "integrity": "sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==",
+      "dev": true,
+      "requires": {
+        "rimraf": "~2.6.2"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.6.3",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "temp-dir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
+      "integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
+      "dev": true
+    },
+    "tempy": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tempy/-/tempy-1.0.1.tgz",
+      "integrity": "sha512-biM9brNqxSc04Ee71hzFbryD11nX7VPhQQY32AdDmjFvodsRFz/3ufeoTZ6uYkRFfGo188tENcASNs3vTdsM0w==",
+      "dev": true,
+      "requires": {
+        "del": "^6.0.0",
+        "is-stream": "^2.0.0",
+        "temp-dir": "^2.0.0",
+        "type-fest": "^0.16.0",
+        "unique-string": "^2.0.0"
+      },
+      "dependencies": {
+        "is-stream": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+          "dev": true
+        },
+        "type-fest": {
+          "version": "0.16.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",
+          "integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==",
+          "dev": true
+        }
+      }
+    },
+    "terminal-link": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
+      "integrity": "sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==",
+      "dev": true,
+      "requires": {
+        "ansi-escapes": "^4.2.1",
+        "supports-hyperlinks": "^2.0.0"
+      }
+    },
+    "terser": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.7.0.tgz",
+      "integrity": "sha512-HP5/9hp2UaZt5fYkuhNBR8YyRcT8juw8+uFbAme53iN9hblvKnLUTKkmwJG6ocWpIKf8UK4DoeWG4ty0J6S6/g==",
+      "dev": true,
+      "requires": {
+        "commander": "^2.20.0",
+        "source-map": "~0.7.2",
+        "source-map-support": "~0.5.19"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        }
+      }
+    },
+    "test-exclude": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+      "dev": true,
+      "requires": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^7.1.4",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
+    "theming": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/theming/-/theming-3.3.0.tgz",
+      "integrity": "sha512-u6l4qTJRDaWZsqa8JugaNt7Xd8PPl9+gonZaIe28vAhqgHMIG/DOyFPqiKN/gQLQYj05tHv+YQdNILL4zoiAVA==",
+      "requires": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.8",
+        "react-display-name": "^0.2.4",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "requires": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=",
+      "dev": true,
+      "requires": {
+        "thenify": ">= 3.1.0 < 4"
+      }
+    },
+    "throat": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
+      "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
+      "dev": true
+    },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "dev": true
+    },
+    "through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "through2-filter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/through2-filter/-/through2-filter-3.0.0.tgz",
+      "integrity": "sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==",
+      "dev": true,
+      "requires": {
+        "through2": "~2.0.0",
+        "xtend": "~4.0.0"
+      }
+    },
+    "time-stamp": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
+      "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=",
+      "dev": true
+    },
+    "time-zone": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/time-zone/-/time-zone-1.0.0.tgz",
+      "integrity": "sha1-mcW/VZWJZq9tBtg73zgA3IL67F0=",
+      "dev": true
+    },
+    "timeago.js": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/timeago.js/-/timeago.js-4.0.2.tgz",
+      "integrity": "sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w=="
+    },
+    "timsort": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
+      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
+      "dev": true
+    },
+    "tiny-lr": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-1.1.1.tgz",
+      "integrity": "sha512-44yhA3tsaRoMOjQQ+5v5mVdqef+kH6Qze9jTpqtVufgYjYt08zyZAwNwwVBj3i1rJMnR52IxOW0LK0vBzgAkuA==",
+      "dev": true,
+      "requires": {
+        "body": "^5.1.0",
+        "debug": "^3.1.0",
+        "faye-websocket": "~0.10.0",
+        "livereload-js": "^2.3.0",
+        "object-assign": "^4.1.0",
+        "qs": "^6.4.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
+    "tmp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "dev": true,
+      "requires": {
+        "rimraf": "^3.0.0"
+      }
+    },
+    "tmpl": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
+      "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=",
+      "dev": true
+    },
+    "to-absolute-glob": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
+      "integrity": "sha1-GGX0PZ50sIItufFFt4z/fQ98hJs=",
+      "dev": true,
+      "requires": {
+        "is-absolute": "^1.0.0",
+        "is-negated-glob": "^1.0.0"
+      }
+    },
+    "to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "dev": true
+    },
+    "to-object-path": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
+      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "to-readable-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
+      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==",
+      "dev": true
+    },
+    "to-regex": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
+      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
+      "dev": true,
+      "requires": {
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "regex-not": "^1.0.2",
+        "safe-regex": "^1.1.0"
+      }
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "to-through": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-through/-/to-through-2.0.0.tgz",
+      "integrity": "sha1-/JKtq6ByZHvAtn1rA2ZKoZUJOvY=",
+      "dev": true,
+      "requires": {
+        "through2": "^2.0.3"
+      }
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
+      "dev": true
+    },
+    "toml": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/toml/-/toml-2.3.6.tgz",
+      "integrity": "sha512-gVweAectJU3ebq//Ferr2JUY4WKSDe5N+z0FvjDncLGyHmIDoxgY/2Ie4qfEIDm4IS7OA6Rmdm7pdEEdMcV/xQ==",
+      "dev": true
+    },
+    "tough-cookie": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
+      "integrity": "sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==",
+      "dev": true,
+      "requires": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.1.2"
+      }
+    },
+    "tr46": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
+      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.1"
+      }
+    },
+    "traverse": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
+      "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=",
+      "dev": true
+    },
+    "trim-off-newlines": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz",
+      "integrity": "sha1-n5up2e+odkw4dpi8v+sshI8RrbM=",
+      "dev": true
+    },
+    "tsconfig-paths": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz",
+      "integrity": "sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==",
+      "dev": true,
+      "requires": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.1",
+        "minimist": "^1.2.0",
+        "strip-bom": "^3.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "strip-bom": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+          "dev": true
+        }
+      }
+    },
+    "tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "dev": true
+    },
+    "type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "~1.1.2"
+      }
+    },
+    "type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true
+    },
+    "type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "dev": true
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dev": true,
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
+      "dev": true
+    },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dev": true,
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "typescript": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz",
+      "integrity": "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==",
+      "dev": true
+    },
+    "ua-parser-js": {
+      "version": "0.7.28",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
+      "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==",
+      "dev": true
+    },
+    "uglify-js": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.0.tgz",
+      "integrity": "sha512-TWYSWa9T2pPN4DIJYbU9oAjQx+5qdV5RUDxwARg8fmJZrD/V27Zj0JngW5xg1DFz42G0uDYl2XhzF6alSzD62w==",
+      "dev": true
+    },
+    "unbox-primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.0.tgz",
+      "integrity": "sha512-P/51NX+JXyxK/aigg1/ZgyccdAxm5K1+n8+tvqSntjOivPt19gvm1VC49RWYetsiub8WViUchdxl/KWHHB0kzA==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has-bigints": "^1.0.0",
+        "has-symbols": "^1.0.0",
+        "which-boxed-primitive": "^1.0.1"
+      }
+    },
+    "unc-path-regex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
+      "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
+      "dev": true
+    },
+    "underscore": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.1.7.tgz",
+      "integrity": "sha1-QLq4S60Z0jAJbo1u9ii/8FXYPbA=",
+      "dev": true
+    },
+    "unicode-canonical-property-names-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==",
+      "dev": true
+    },
+    "unicode-match-property-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
+      "dev": true,
+      "requires": {
+        "unicode-canonical-property-names-ecmascript": "^1.0.4",
+        "unicode-property-aliases-ecmascript": "^1.0.4"
+      }
+    },
+    "unicode-match-property-value-ecmascript": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
+      "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==",
+      "dev": true
+    },
+    "unicode-property-aliases-ecmascript": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
+      "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==",
+      "dev": true
+    },
+    "union-value": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
+      "dev": true,
+      "requires": {
+        "arr-union": "^3.1.0",
+        "get-value": "^2.0.6",
+        "is-extendable": "^0.1.1",
+        "set-value": "^2.0.1"
+      }
+    },
+    "uniqs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
+      "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=",
+      "dev": true
+    },
+    "unique-stream": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-2.3.1.tgz",
+      "integrity": "sha512-2nY4TnBE70yoxHkDli7DMazpWiP7xMdCYqU2nBRO0UB+ZpEkGsSija7MvmvnZFUeC+mrgiUfcHSr3LmRFIg4+A==",
+      "dev": true,
+      "requires": {
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "through2-filter": "^3.0.0"
+      }
+    },
+    "unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "dev": true,
+      "requires": {
+        "crypto-random-string": "^2.0.0"
+      }
+    },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+      "dev": true
+    },
+    "unset-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
+      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
+      "dev": true,
+      "requires": {
+        "has-value": "^0.3.1",
+        "isobject": "^3.0.0"
+      },
+      "dependencies": {
+        "has-value": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
+          "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
+          "dev": true,
+          "requires": {
+            "get-value": "^2.0.3",
+            "has-values": "^0.1.4",
+            "isobject": "^2.0.0"
+          },
+          "dependencies": {
+            "isobject": {
+              "version": "2.1.0",
+              "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+              "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+              "dev": true,
+              "requires": {
+                "isarray": "1.0.0"
+              }
+            }
+          }
+        },
+        "has-values": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
+          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=",
+          "dev": true
+        }
+      }
+    },
+    "untildify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-2.1.0.tgz",
+      "integrity": "sha1-F+soB5h/dpUunASF/DEdBqgmouA=",
+      "dev": true,
+      "requires": {
+        "os-homedir": "^1.0.0"
+      }
+    },
+    "update-notifier": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-5.1.0.tgz",
+      "integrity": "sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==",
+      "dev": true,
+      "requires": {
+        "boxen": "^5.0.0",
+        "chalk": "^4.1.0",
+        "configstore": "^5.0.1",
+        "has-yarn": "^2.1.0",
+        "import-lazy": "^2.1.0",
+        "is-ci": "^2.0.0",
+        "is-installed-globally": "^0.4.0",
+        "is-npm": "^5.0.0",
+        "is-yarn-global": "^0.3.0",
+        "latest-version": "^5.1.0",
+        "pupa": "^2.1.1",
+        "semver": "^7.3.4",
+        "semver-diff": "^3.1.1",
+        "xdg-basedir": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "upper-case": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
+      "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
+      "dev": true
+    },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "urix": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
+      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
+      "dev": true
+    },
+    "url-parse": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz",
+      "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==",
+      "requires": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "url-parse-lax": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
+      "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
+      "dev": true,
+      "requires": {
+        "prepend-http": "^2.0.0"
+      }
+    },
+    "urlgrey": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/urlgrey/-/urlgrey-0.4.4.tgz",
+      "integrity": "sha1-iS/pWWCAXoVRnxzUOJ8stMu3ZS8=",
+      "dev": true
+    },
+    "use": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
+      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
+      "dev": true
+    },
+    "util": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.3.tgz",
+      "integrity": "sha512-I8XkoQwE+fPQEhy9v012V+TSdH2kp9ts29i20TaaDUXsg7x/onePbhFJUExBfv/2ay1ZOp/Vsm3nDlmnFGSAog==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "safe-buffer": "^5.1.2",
+        "which-typed-array": "^1.1.2"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
+      "dev": true
+    },
+    "uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true
+    },
+    "v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+      "dev": true
+    },
+    "v8-to-istanbul": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-7.1.0.tgz",
+      "integrity": "sha512-uXUVqNUCLa0AH1vuVxzi+MI4RfxEOKt9pBgKwHbgH7st8Kv2P1m+jvWNnektzBh5QShF3ODgKmUFCf38LnVz1g==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^1.6.0",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        }
+      }
+    },
+    "validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "requires": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "value-or-function": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/value-or-function/-/value-or-function-3.0.0.tgz",
+      "integrity": "sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM=",
+      "dev": true
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
+      "dev": true
+    },
+    "vendors": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
+      "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
+      "dev": true
+    },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "vinyl": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.1.tgz",
+      "integrity": "sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.1",
+        "clone-buffer": "^1.0.0",
+        "clone-stats": "^1.0.0",
+        "cloneable-readable": "^1.0.0",
+        "remove-trailing-separator": "^1.0.1",
+        "replace-ext": "^1.0.0"
+      }
+    },
+    "vinyl-fs": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-3.0.3.tgz",
+      "integrity": "sha512-vIu34EkyNyJxmP0jscNzWBSygh7VWhqun6RmqVfXePrOwi9lhvRs//dOaGOTRUQr4tx7/zd26Tk5WeSVZitgng==",
+      "dev": true,
+      "requires": {
+        "fs-mkdirp-stream": "^1.0.0",
+        "glob-stream": "^6.1.0",
+        "graceful-fs": "^4.0.0",
+        "is-valid-glob": "^1.0.0",
+        "lazystream": "^1.0.0",
+        "lead": "^1.0.0",
+        "object.assign": "^4.0.4",
+        "pumpify": "^1.3.5",
+        "readable-stream": "^2.3.3",
+        "remove-bom-buffer": "^3.0.0",
+        "remove-bom-stream": "^1.2.0",
+        "resolve-options": "^1.1.0",
+        "through2": "^2.0.0",
+        "to-through": "^2.0.0",
+        "value-or-function": "^3.0.0",
+        "vinyl": "^2.0.0",
+        "vinyl-sourcemap": "^1.1.0"
+      }
+    },
+    "vinyl-sourcemap": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz",
+      "integrity": "sha1-kqgAWTo4cDqM2xHYswCtS+Y7PhY=",
+      "dev": true,
+      "requires": {
+        "append-buffer": "^1.0.2",
+        "convert-source-map": "^1.5.0",
+        "graceful-fs": "^4.1.6",
+        "normalize-path": "^2.1.1",
+        "now-and-later": "^2.0.0",
+        "remove-bom-buffer": "^3.0.0",
+        "vinyl": "^2.0.0"
+      },
+      "dependencies": {
+        "normalize-path": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+          "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+          "dev": true,
+          "requires": {
+            "remove-trailing-separator": "^1.0.1"
+          }
+        }
+      }
+    },
+    "vinyl-sourcemaps-apply": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz",
+      "integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=",
+      "dev": true,
+      "requires": {
+        "source-map": "^0.5.1"
+      }
+    },
+    "void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
+      "dev": true
+    },
+    "w3c-hr-time": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
+      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+      "dev": true,
+      "requires": {
+        "browser-process-hrtime": "^1.0.0"
+      }
+    },
+    "w3c-xmlserializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
+      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
+      "dev": true,
+      "requires": {
+        "xml-name-validator": "^3.0.0"
+      }
+    },
+    "walker": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",
+      "integrity": "sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=",
+      "dev": true,
+      "requires": {
+        "makeerror": "1.0.x"
+      }
+    },
+    "wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
+      "dev": true,
+      "requires": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "web-activities": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/web-activities/-/web-activities-1.24.0.tgz",
+      "integrity": "sha512-vF8EeFBxnW24Oje4Rt0ghT1i56OYLQNGwUjFfRlObarI4kRQB7wZUGAhxC2oyhyqLflpIzfMCa8sKLdIwiCeAw==",
+      "requires": {
+        "promise-pjs": "1.1.3"
+      },
+      "dependencies": {
+        "promise-pjs": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/promise-pjs/-/promise-pjs-1.1.3.tgz",
+          "integrity": "sha1-wASTbxEMZtPRFvgrGBvWoZfggNE="
+        }
+      }
+    },
+    "web-animations-js": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.3.2.tgz",
+      "integrity": "sha512-TOMFWtQdxzjWp8qx4DAraTWTsdhxVSiWa6NkPFSaPtZ1diKUxTn4yTix73A1euG1WbSOMMPcY51cnjTIHrGtDA=="
+    },
+    "webidl-conversions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
+      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
+      "dev": true
+    },
+    "websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dev": true,
+      "requires": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      }
+    },
+    "websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "dev": true
+    },
+    "well-known-symbols": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/well-known-symbols/-/well-known-symbols-2.0.0.tgz",
+      "integrity": "sha512-ZMjC3ho+KXo0BfJb7JgtQ5IBuvnShdlACNkKkdsqBmYw3bPAaJfPeYUo6tLUaT5tG/Gkh7xkpBhKRQ9e7pyg9Q==",
+      "dev": true
+    },
+    "whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "dev": true,
+      "requires": {
+        "iconv-lite": "0.4.24"
+      }
+    },
+    "whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
+      "dev": true
+    },
+    "whatwg-url": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.5.0.tgz",
+      "integrity": "sha512-fy+R77xWv0AiqfLl4nuGUlQ3/6b5uNfQ4WAbGQVMYshCTCCPK9psC1nWh3XHuxGVCtlcDDQPQW1csmmIQo+fwg==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.7.0",
+        "tr46": "^2.0.2",
+        "webidl-conversions": "^6.1.0"
+      }
+    },
+    "which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "dependencies": {
+        "is-boolean-object": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.0.tgz",
+          "integrity": "sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==",
+          "requires": {
+            "call-bind": "^1.0.0"
+          }
+        }
+      }
+    },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+      "dev": true
+    },
+    "which-typed-array": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.4.tgz",
+      "integrity": "sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.2",
+        "call-bind": "^1.0.0",
+        "es-abstract": "^1.18.0-next.1",
+        "foreach": "^2.0.5",
+        "function-bind": "^1.1.1",
+        "has-symbols": "^1.0.1",
+        "is-typed-array": "^1.1.3"
+      }
+    },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "dev": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
+    "widest-line": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
+      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
+      "dev": true,
+      "requires": {
+        "string-width": "^4.0.0"
+      }
+    },
+    "word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true
+    },
+    "wordwrap": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
+      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
+      "dev": true
+    },
+    "workerpool": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-6.1.0.tgz",
+      "integrity": "sha512-toV7q9rWNYha963Pl/qyeZ6wG+3nnsyvolaNUS8+R5Wtw6qJPTxIlOP1ZSvcGhEJw+l3HMMmtiNo9Gl61G4GVg==",
+      "dev": true
+    },
+    "wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        }
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "dev": true,
+      "requires": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "ws": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.4.tgz",
+      "integrity": "sha512-Qm8k8ojNQIMx7S+Zp8u/uHOx7Qazv3Yv4q68MiWWWOJhiwG5W3x7iqmRtJo8xxrciZUY4vRxUTJCKuRnF28ZZw==",
+      "dev": true
+    },
+    "xdg-basedir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
+      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
+      "dev": true
+    },
+    "xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=",
+      "dev": true
+    },
+    "xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
+      "dev": true
+    },
+    "xmlbuilder": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-12.0.0.tgz",
+      "integrity": "sha512-lMo8DJ8u6JRWp0/Y4XLa/atVDr75H9litKlb2E5j3V3MesoL50EBgZDWoLT3F/LztVnG67GjPXLZpqcky/UMnQ==",
+      "dev": true
+    },
+    "xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true
+    },
+    "y18n": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
+      "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==",
+      "dev": true
+    },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true
+    },
+    "yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dev": true,
+      "requires": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      }
+    },
+    "yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    },
+    "yargs-unparser": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz",
+      "integrity": "sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^6.0.0",
+        "decamelize": "^4.0.0",
+        "flat": "^5.0.2",
+        "is-plain-obj": "^2.1.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
+          "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==",
+          "dev": true
+        },
+        "decamelize": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz",
+          "integrity": "sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==",
+          "dev": true
+        }
+      }
+    },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true
+    },
+    "zip-stream": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-0.5.2.tgz",
+      "integrity": "sha1-Mty8UG0Nq00hNyYlvX66rDwv/1Y=",
+      "dev": true,
+      "requires": {
+        "compress-commons": "~0.2.0",
+        "lodash": "~3.2.0",
+        "readable-stream": "~1.0.26"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "lodash": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.2.0.tgz",
+          "integrity": "sha1-S/UKMkP5rrC6xBpV09WZBnWkYvs=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        }
+      }
+    }
+  }
+}
diff --git a/package-scripts.js b/package-scripts.js
new file mode 100644
index 0000000000000..f93afd1fc774a
--- /dev/null
+++ b/package-scripts.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2021 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';
+
+/**
+ * @fileoverview
+ *
+ * - Use this file to store NPM scripts that aid in development but
+ *   are not available via AMP's amp tasks in build-system/tasks/.
+ * - To use these scripts, first install npm-package-scripts by running
+ *   "npm install --global nps" (or for short, "npm i -g nps").
+ * - Once installed, run any script by calling "nps <scriptname>".
+ * - For more info, see https://www.npmjs.com/package/nps#scripts-1
+ */
+
+module.exports = {
+  scripts: {
+    filesize: 'filesize -c=build-system/tasks/bundle-size/filesize.json',
+  },
+};
diff --git a/package.json b/package.json
index 5a29a5e3dfbf9..f734150cc5ad7 100644
--- a/package.json
+++ b/package.json
@@ -11,184 +11,172 @@
     "url": "https://github.com/ampproject/amphtml.git"
   },
   "scripts": {
-    "preinstall": "node build-system/common/check-package-manager.js"
+    "preinstall": "node build-system/common/check-package-manager.js",
+    "postinstall": "node build-system/task-runner/install-amp-task-runner.js"
   },
   "dependencies": {
     "@ampproject/animations": "0.2.2",
-    "@ampproject/toolbox-cache-url": "2.3.0",
-    "@ampproject/viewer-messaging": "1.1.0",
-    "@ampproject/worker-dom": "0.25.0",
-    "dompurify": "2.0.7",
-    "intersection-observer": "0.10.0",
-    "moment": "2.24.0",
-    "preact": "10.2.1",
+    "@ampproject/toolbox-cache-url": "2.7.2",
+    "@ampproject/viewer-messaging": "1.1.2",
+    "@ampproject/worker-dom": "0.29.3",
+    "@webcomponents/webcomponentsjs": "2.5.0",
+    "dompurify": "2.2.8",
+    "google-closure-library": "20210406.0.0",
+    "intersection-observer": "0.12.0",
+    "jss": "10.6.0",
+    "jss-preset-default": "10.6.0",
+    "moment": "2.29.1",
+    "obj-str": "1.1.0",
+    "preact": "10.5.13",
     "ip": "1.1.5",
-    "promise-pjs": "1.1.4",
-    "prop-types": "15.7.2",
-    "react-dates": "15.5.3",
-    "web-activities": "1.13.0",
-    "web-animations-js": "2.3.1"
+    "promise-pjs": "1.1.5",
+    "react-dates": "21.8.0",
+    "react-jss": "10.6.0",
+    "resize-observer-polyfill": "1.5.1",
+    "rrule": "2.6.8",
+    "timeago.js": "4.0.2",
+    "web-activities": "1.24.0",
+    "web-animations-js": "2.3.2"
   },
   "devDependencies": {
-    "@ampproject/filesize": "4.2.0",
-    "@ampproject/remapping": "0.2.0",
-    "@babel/core": "7.10.2",
-    "@babel/helper-module-imports": "7.10.1",
-    "@babel/helper-plugin-test-runner": "7.10.1",
-    "@babel/plugin-proposal-class-properties": "7.10.1",
-    "@babel/plugin-transform-react-constant-elements": "7.10.1",
-    "@babel/plugin-transform-react-jsx": "7.10.1",
-    "@babel/preset-env": "7.10.2",
-    "@jest/core": "26.0.1",
-    "@types/minimist": "1.2.0",
+    "@ampproject/filesize": "4.3.0",
+    "@ampproject/google-closure-compiler": "20210406.0.0",
+    "@ampproject/remapping": "1.0.1",
+    "@babel/core": "7.14.3",
+    "@babel/eslint-parser": "7.14.3",
+    "@babel/helper-module-imports": "7.13.12",
+    "@babel/helper-plugin-test-runner": "7.13.10",
+    "@babel/plugin-proposal-class-properties": "7.13.0",
+    "@babel/plugin-syntax-import-assertions": "7.12.1",
+    "@babel/plugin-transform-classes": "7.14.2",
+    "@babel/plugin-transform-react-constant-elements": "7.13.13",
+    "@babel/plugin-transform-react-jsx": "7.14.3",
+    "@babel/preset-env": "7.14.2",
+    "@chiragrupani/karma-chromium-edge-launcher": "2.1.1",
+    "@jest/core": "26.6.3",
+    "@jridgewell/doctrine": "3.0.2",
+    "@sinonjs/fake-timers": "7.1.1",
+    "@types/chai": "4.2.18",
+    "@types/eslint": "7.2.12",
+    "@types/minimist": "1.2.1",
+    "@types/mocha": "8.2.2",
+    "@types/node": "14.17.1",
     "acorn-globals": "6.0.0",
-    "amphtml-validator": "1.0.31",
-    "ansi-colors": "4.1.1",
+    "amphtml-validator": "1.0.35",
     "ast-replace": "1.1.3",
     "atob": "2.1.2",
-    "autoprefixer": "9.8.0",
-    "babel-eslint": "10.1.0",
-    "babel-plugin-filter-imports": "4.0.0",
+    "autoprefixer": "10.2.6",
+    "ava": "3.15.0",
     "babel-plugin-istanbul": "6.0.0",
     "babel-plugin-minify-replace": "0.5.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
-    "babelify": "10.0.0",
+    "babel-plugin-optimize-objstr": "1.0.0",
     "baconipsum": "0.1.2",
     "base62": "2.0.1",
     "body-parser": "1.19.0",
-    "browserify": "16.5.1",
-    "browserify-persist-fs": "1.2.2",
-    "chai": "4.2.0",
+    "chai": "4.3.4",
     "chai-as-promised": "7.1.1",
-    "cli-highlight": "2.1.4",
-    "codecov": "3.7.0",
-    "commander": "5.1.0",
+    "check-dependencies": "1.1.0",
+    "chokidar": "3.5.1",
+    "cli-highlight": "2.1.11",
+    "codecov": "3.8.2",
+    "commander": "7.2.0",
     "connect-header": "0.0.5",
-    "cssnano": "4.1.10",
-    "debounce": "1.2.0",
-    "del": "5.1.0",
-    "derequire": "2.1.1",
-    "doctrine": "3.0.0",
-    "envify": "4.1.0",
+    "css-what": "5.0.0",
+    "cssnano": "5.0.4",
+    "debounce": "1.2.1",
+    "del": "6.0.0",
     "enzyme": "3.11.0",
-    "enzyme-adapter-preact-pure": "2.2.0",
-    "escodegen": "1.14.2",
-    "eslint": "7.0.0",
-    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-chai-expect": "2.1.0",
-    "eslint-plugin-eslint-plugin": "2.2.2",
+    "enzyme-adapter-preact-pure": "3.1.0",
+    "esbuild": "0.12.4",
+    "escodegen": "2.0.0",
+    "eslint": "7.27.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-chai-expect": "2.2.0",
+    "eslint-plugin-eslint-plugin": "3.0.3",
     "eslint-plugin-google-camelcase": "0.0.2",
-    "eslint-plugin-jasmine": "4.1.1",
-    "eslint-plugin-jsdoc": "25.2.1",
+    "eslint-plugin-import": "2.23.3",
+    "eslint-plugin-jasmine": "4.1.2",
+    "eslint-plugin-jsdoc": "35.0.0",
     "eslint-plugin-local": "1.0.0",
     "eslint-plugin-notice": "0.9.10",
-    "eslint-plugin-prettier": "3.1.3",
-    "eslint-plugin-react": "7.20.0",
-    "eslint-plugin-react-hooks": "4.0.4",
-    "eslint-plugin-sort-imports-es6-autofix": "0.5.0",
+    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-sort-destructure-keys": "1.3.5",
+    "eslint-plugin-sort-imports-es6-autofix": "0.6.0",
     "eslint-plugin-sort-requires": "2.1.0",
     "event-stream": "4.0.1",
+    "events": "3.3.0",
     "express": "4.17.1",
-    "fancy-log": "1.3.3",
-    "fetch-mock": "9.10.1",
+    "fetch-mock": "9.11.0",
     "formidable": "1.2.2",
-    "fs-extra": "9.0.1",
-    "fuse.js": "6.0.4",
-    "globby": "11.0.1",
-    "google-closure-compiler": "20200517.0.0",
-    "gulp": "4.0.2",
-    "gulp-append-prepend": "1.0.8",
-    "gulp-ava": "3.0.0",
-    "gulp-babel": "8.0.0",
+    "fs-extra": "10.0.0",
+    "fuse.js": "6.4.6",
+    "globby": "11.0.3",
     "gulp-connect": "5.7.0",
-    "gulp-debounce": "1.0.2",
-    "gulp-eslint": "6.0.0",
-    "gulp-eslint-if-fixed": "1.0.0",
-    "gulp-file": "0.4.0",
-    "gulp-help": "chmontgomery/gulp-help#gulp4",
-    "gulp-if": "3.0.0",
-    "gulp-istanbul": "1.1.3",
-    "gulp-jsonlint": "1.3.2",
-    "gulp-jsonminify": "1.1.0",
-    "gulp-nop": "0.0.3",
-    "gulp-prettier": "3.0.0",
-    "gulp-regexp-sourcemaps": "1.0.1",
-    "gulp-rename": "2.0.0",
-    "gulp-sourcemaps": "2.6.5",
-    "gulp-watch": "5.0.1",
-    "gzip-size": "5.1.1",
     "html-minifier": "4.0.0",
-    "jest-dot-reporter": "1.0.12",
-    "jest-silent-reporter": "0.2.1",
+    "ignore": "5.1.8",
+    "istanbul-middleware": "0.2.2",
+    "jest-progress-bar-reporter": "1.0.21",
+    "jest-silent-reporter": "0.5.0",
     "jison": "0.4.18",
-    "jsdom": "16.2.2",
+    "jscodeshift": "0.12.0",
+    "jsdom": "16.6.0",
     "json-stable-stringify": "1.0.1",
-    "json5": "2.1.3",
-    "karma": "5.0.9",
-    "karma-browserify": "7.0.0",
-    "karma-chai": "0.1.0",
+    "json5": "2.2.0",
+    "jsonminify": "0.4.1",
+    "karma": "6.3.2",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
-    "karma-edge-launcher": "0.4.2",
-    "karma-firefox-launcher": "1.3.0",
+    "karma-esbuild": "2.2.0",
+    "karma-firefox-launcher": "2.1.0",
     "karma-fixture": "0.2.6",
     "karma-html2js-preprocessor": "1.1.0",
     "karma-ie-launcher": "1.0.0",
+    "karma-junit-reporter": "2.0.1",
     "karma-mocha": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
-    "karma-safari-launcher": "1.0.0",
-    "karma-sauce-launcher": "2.0.2",
-    "karma-simple-reporter": "2.0.0",
-    "karma-sinon-chai": "2.0.2",
+    "karma-safarinative-launcher": "1.1.0",
     "karma-source-map-support": "1.4.0",
+    "karma-spec-reporter": "0.0.32",
+    "karma-structured-json-reporter": "1.0.1",
     "karma-super-dots-reporter": "0.2.0",
-    "lazypipe": "1.0.2",
+    "klaw": "3.0.0",
+    "kleur": "4.1.4",
     "list-imports-exports": "0.1.2",
-    "lolex": "5.1.2",
-    "markdown-link-check": "3.8.1",
+    "magic-string": "0.25.7",
+    "markdown-link-check": "3.8.7",
+    "markdown-toc": "1.2.0",
     "minimatch": "3.0.4",
     "minimist": "1.2.5",
-    "mocha": "8.0.1",
+    "mocha": "8.4.0",
+    "mocha-junit-reporter": "2.0.0",
     "mocha-silent-reporter": "1.0.0",
     "morgan": "1.10.0",
     "multer": "1.4.2",
-    "npm-exact-versions": "0.0.5",
-    "opn": "5.5.0",
+    "node-fetch": "2.6.1",
+    "open": "8.2.0",
     "plugin-error": "1.0.1",
-    "postcss": "7.0.32",
-    "postcss-import": "12.0.1",
-    "posthtml": "0.13.0",
-    "prettier": "2.0.5",
-    "pretty-bytes": "5.3.0",
-    "pumpify": "2.0.1",
-    "react": "16.13.1",
-    "react-addons-shallow-compare": "15.6.2",
-    "react-dom": "16.13.1",
-    "react-externs": "0.13.6",
-    "react-with-direction": "1.3.1",
-    "regexp.escape": "1.1.0",
-    "renovate": "21.6.3",
-    "request": "2.88.2",
-    "request-promise": "4.2.5",
-    "require-hijack": "1.2.1",
+    "postcss": "8.3.0",
+    "postcss-import": "14.0.2",
+    "posthtml": "0.15.2",
+    "prettier": "2.3.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "rocambole": "0.7.0",
-    "sinon": "9.0.2",
-    "sinon-chai": "3.5.0",
-    "sleep-promise": "8.0.1",
+    "semver": "7.3.5",
+    "sinon": "10.0.0",
+    "sinon-chai": "3.7.0",
     "sourcemap-codec": "1.4.8",
-    "tcp-port-used": "1.0.1",
-    "tempy": "0.5.0",
-    "terser": "4.7.0",
+    "stream-browserify": "3.0.0",
+    "sync-rpc": "1.3.6",
+    "tar": "6.1.0",
+    "tempy": "1.0.1",
+    "terser": "5.7.0",
     "text-table": "0.2.0",
-    "through2": "3.0.1",
-    "topological-sort": "0.3.0",
     "traverse": "0.6.6",
-    "tsickle": "0.38.1",
-    "typescript": "3.9.5",
-    "uglifyify": "5.0.2",
-    "vinyl-buffer": "1.0.1",
-    "vinyl-source-stream": "2.0.0",
-    "vinyl-sourcemaps-apply": "0.2.1",
-    "watchify": "3.11.1"
+    "typescript": "4.3.2",
+    "util": "0.12.3",
+    "vinyl-fs": "3.0.3"
   }
 }
diff --git a/spec/amp-3p-video.md b/spec/amp-3p-video.md
deleted file mode 100644
index e50cffb0ec541..0000000000000
--- a/spec/amp-3p-video.md
+++ /dev/null
@@ -1,85 +0,0 @@
-# Vendor-specific (3p) video player components
-
-The generic [`amp-video`](https://go.amp.dev/c/amp-video) component plays videos directly on a page, much like a `<video>` tag.
-
-Unfortunately, not all videos can be embedded this way. For these specialized cases, AMP provides vendor-optimized components like [`amp-youtube`](https://go.amp.dev/c/amp-youtube), [`amp-ima-video`](https://go.amp.dev/c/amp-ima-video), and [others](./amp-video-interface.md).
-Internally these players load an iframe whose page communicates with the outer document to coordinate playback.
-
-**We would prefer to not have additional custom video implementations.** Instead we believe, [`amp-video-iframe`](https://go.amp.dev/c/amp-video-iframe) should be used instead, since it is a generic component that can load any video document to coordinate playback. Instead, new integrations should come in the form of [`amp-video-iframe` configurations](https://go.amp.dev/c/amp-video-iframe#vendors). _If you believe you're unable to integrate with `amp-video-iframe`, please [file an issue](https://github.com/ampproject/amphtml/issues/new/choose) mentioning `@alanorozco` and `@wassgha`._
-
-## I want to contribute my vendor-specific player
-
-You probaby do **_not_** need to build your own player.
-
-The `amp-video-iframe` playback interface supports the following methods, which we believe cover the vast majority of cases AMP documents necessitate:
-
-- `play`
-- `pause`
-- `mute`
-- `unmute`
-- `showcontrols`
-- `hidecontrols`
-- `fullscreenenter`
-- `fullscreenexit`
-
-`amp-video-iframe` can also [send custom namespaced analytics signals](<https://amp.dev/documentation/components/amp-video-iframe/#postanalyticsevent(eventtype[,-vars])>).
-
-(If there is a feature missing from this list that a custom player requires, we are happy to work on extending it as necessary.)
-
-If this is enough for your use case, you'd only need to build a playback document hosted on your server that's able to communicate with `amp-video-iframe`.
-For guidance on accomplishing this, [refer to the component documentation.](https://go.amp.dev/c/amp-video-iframe#vendors)
-
-(If you _cannot_ support these playback methods, it's likely that a simple [`amp-iframe`](https://go.amp.dev/c/amp-iframe)
-can embed a separate video document just fine.)
-
-Once you host your integration document, you may provide a code sample for document authors to find your service [in the AMP documentation.](https://github.com/ampproject/amphtml/blob/master/extensions/amp-video-iframe/amp-video-iframe.md)
-
-### When _should_ I build a vendor-specific player?
-
-If the API you require for communication includes methods that are **_not_** part of the `amp-video-iframe` playback interface, you might want to build your own player. (Please note that most custom analytics signals are not considered in this case,
-since `amp-video-iframe` [also has plumbing for that.](<https://amp.dev/documentation/components/amp-video-iframe/#postanalyticsevent(eventtype[,-vars])>))
-
-For example, these are some of the features that justify specific players:
-
-- **`amp-youtube`** loads initial-frame placeholder images based on a URL scheme for perceived performance.
-  Its underlying implementation also loads with lower-than-default priority, since it's rather large in binary size.
-
-- **`amp-ima-video`** embeds a generic host-less page that ships with the IMA SDK in order to transparently include standard IMA interface videos.
-
-(Please note that most other 3p players historically exist before `amp-video-iframe` could fulfill their use case.)
-
-## How can I build a player component?
-
-### Understand the contribution process
-
-You'll need to go through [the standard AMP contribution process](../CONTRIBUTING.md) when creating and submitting your component. For large features, such as a video player, you need to file an [I2I (intent-to-implement) issue](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=INTENT+TO+IMPLEMENT&template=intent-to-implement--i2i-.md&title=I2I:%20%3Cyour%20change/update%3E) that describes the overall workings of your component.
-
-Your player component is also shipped as an extension, so you should [become familiar with the process of building one.](https://github.com/ampproject/amphtml/blob/master/contributing/building-an-amp-extension.md)
-
-### Write your implementation
-
-#### The `VideoManager`
-
-Every player component talks to a single [`VideoManager`](../src/service/video-manager-impl.js) via standard methods (`VideoInterface`) and events (`VideoEvents`) defined in the [AMP video interface](../src/video-interface.js).
-
-This manager performs standard responsibilities for all videos, regardless of type:
-
-- accessible, managed autoplay
-- analytics tracking for playback
-- coordination with [`amp-story`](https://go.amp.dev/c/amp-story)
-- [docked video](https://amp.dev/documentation/components/amp-video-docking/)
-- rotate-to-fullscreen
-
-#### Interface support
-
-Component classes should implement the [`VideoInterface`](../src/video-interface.js).
-You can implement this interface entirely or partially, depending on [the video integration features you'd like to support](./amp-video-interface.md).
-
-At the very least, you should implement `play()` and `pause()`. Likewise, playback
-[actions](https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/) (like `my-element.play`) will not work when unimplemented.
-
-Read through [the `VideoInterface` code to understand the individual effects of leaving each method unimplemented.](../src/video-interface.js)
-
-#### Reference
-
-Existing implementations for [`amp-youtube.js`](../extensions/amp-youtube/0.1/amp-youtube.js) and [`amp-video-iframe.js`](../extensions/amp-video-iframe/0.1/amp-video-iframe.js) are good starter examples for implementation details. They use several standard utilities for creating the video frame and communicating with the `VideoManager`.
diff --git a/spec/amp-cache-guidelines.md b/spec/amp-cache-guidelines.md
deleted file mode 100644
index 4197b8d7bd2f7..0000000000000
--- a/spec/amp-cache-guidelines.md
+++ /dev/null
@@ -1,119 +0,0 @@
-# AMP Cache Guidelines
-
-## Purpose
-
-Provide guidelines to external parties for implementing their own AMP Caches.
-
-## Preamble
-
-In the AMP ecosystem, the platform that links to content may freely choose which AMP Cache (if any) to use. It is an inversion of the typical model where content delivery is the responsibility of the publisher.
-
-This allows platforms to provide their users with predictable load performance and among other things allows them to ensure required security and privacy invariants during AMP’s pre-rendering phase.
-
-AMP is an open ecosystem and actively encourages the development of more AMP Caches.
-
-## Guidelines: Core
-
-1. An AMP Cache only serves [valid AMP input documents](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
-
-2. It participates in the [AMP validator release cycle](https://github.com/ampproject/amphtml/tree/master/validator).
-
-3. It participates in the AMP JS library release cycle and makes every effort to serve the latest version. It does not allow sites to perform version locking.
-
-4. It serves each site from a subdomain of the cache domain.
-
-   1. See for example: the [Google AMP Cache URL format](https://developers.google.com/amp/cache/overview#amp-cache-url-format).
-
-5. Pledges to maintain URL space forever (even beyond the lifetime of the cache itself):
-
-   1. This can be achieved by donating the URL space to a trustworthy third party entity such as [archive.org](http://archive.org).
-
-   2. This means that, should a cache decide to no longer operate, URLs should redirect to the origin URL or be served by another cache.
-
-6. Uses HTTPS serving only.
-
-7. Serves a strong [Content Security Policy](https://w3c.github.io/webappsec-csp/) ([CSP](https://developer.chrome.com/extensions/contentSecurityPolicy)) - a CSP defines a mechanism by which web developers can control the resources which a particular page can fetch or execute, as well as a number of security-relevant policy decisions.
-
-   1. Implements separately documented security rewrites on served content.
-
-   2. The CSP should be equivalent or stronger to what is being served on `cdn.ampproject.org`.
-
-   3. Caches must update their CSP in a timely fashion (within 7 days) at the request of the AMP.
-
-8. Supports a public Update Cache mechanism for document publishers to notify the AMP cache about new, updated or deleted documents:
-
-   1. Equivalent to the [Google AMP Update Cache API](https://developers.google.com/amp/cache/update-cache)
-
-9. Supports a public AMP Cache URL API:
-
-   1. Equivalent to the [Google AMP Cache URL API](https://developers.google.com/amp/cache/overview#amp-cache-url-format)
-
-10. Provides a faithful visual and UX reproduction of source document. E.g. changes in image resolution or compression rate may be acceptable if they provide strong benefits in terms of bandwidth usage and load time.
-
-11. No obstruction of the contents, branding or attribution of the original AMP document.
-
-12. No changes to ads, monetization, access (paywall monetization and similar), analytics, or similar.
-
-13. Respects all resource deletions within a reasonable timeframe.
-
-14. Uses a stale-while-revalidate caching model and reasonable min cache time (such as in the order of single digit minutes) is allowed. For example, as per [Google AMP Cache updates](https://developers.google.com/amp/cache/overview#google-amp-cache-updates), "[the cache] uses the origin's caching headers, such as Max-Age, as hints in deciding whether a particular document or resource is stale. When a user makes a request for something that is stale, that request causes a new copy to be fetched, so that the next user gets fresh content":
-
-    1. The cache is allowed to serve stale content independent of HTTP caching headers. It must make reasonable efforts to keep the cache contents fresh and must revalidate content after serving stale responses.
-
-15. Follows [AMP cache modifications best practices](../spec/amp-cache-modifications.md).
-
-## Guidelines: Crawling
-
-- [robots.txt](https://cdn.ampproject.org/robots.txt): Content should be served from the Cache with either the same robot rules as the origin content or stricter rules. See [https://cdn.ampproject.org/robots.txt](https://cdn.ampproject.org/robots.txt) for an example.
-
-## Guidelines: Optional Extensions
-
-- Participation in [AMP Ads For AMP Pages ("A4A")](https://github.com/ampproject/amphtml/issues/3133) advertisement signing.
-
-## Guidelines: Accepted MIME types
-
-### MIME types for images
-
-Accepted MIME types for images include all `image/` subtypes (e.g. `image/gif`).
-
-### MIME types for fonts
-
-Accepted MIME types for fonts include the following prefixes:
-
-| Media type / subtype          |
-| ----------------------------- |
-| font/ (e.g. `font/opentype`)  |
-| application/font              |
-| application/x-font            |
-| application/x-woff            |
-| image/svg+xml                 |
-| application/octet-stream      |
-| application/vnd.ms-fontobject |
-| binary/octet-stream           |
-| text/plain (not recommended)  |
-
-## Guidelines: Resource size limits
-
-For resources (i.e., HTML, images, fonts) that are larger than 12 MB, you may not fetch the resource, and you may return a 404 error.
-
-## Guidelines: Adding a new cache to the AMP ecosystem
-
-- Add the details of your cache to [caches.json](../build-system/global-configs/caches.json).
-  - Some tools use the deployed version of this file (<https://cdn.ampproject.org/caches.json>) to automatically generate appropriate CORS headers as described at [CORS Security in AMP Guidelines](https://github.com/ampproject/amphtml/blob/master/spec/amp-cors-requests.md#cors-security-in-amp).
-- Handle dynamically generated components:
-  - [`<amp-geo>`](../extensions/amp-geo/amp-geo.md) — at delivery time, the string `{{AMP_ISO_COUNTRY_HOTPATCH}}` in [`amp-geo.js`](../extensions/amp-geo/0.1/amp-geo.js) is replaced by a string consisting of the user's ISO country code followed by exactly 26 spaces (to avoid breaking map files).
-
-## References
-
-- [Bing AMP Cache](https://www.bing.com/webmaster/help/bing-amp-cache-bc1c884c)
-  - [Bing AMP Cache announcement](https://blogs.bing.com/Webmaster-Blog/September-2018/Introducing-Bing-AMP-viewer-and-Bing-AMP-cache)
-- [Google AMP Cache](https://developers.google.com/amp/cache/)
-  - [Google AMP Cache Overview](https://developers.google.com/amp/cache/overview)
-  - The [Google AMP Cache](https://developers.google.com/amp/cache/) is a proxy-based content delivery network for delivering all valid AMP documents.
-  - It fetches AMP HTML pages, caches them, and improves page performance automatically.
-  - When using the Google AMP Cache, the document, all JS files and all images load from the same origin, which is using [HTTP 2.0](https://http2.github.io/) for maximum efficiency.
-  - The cache also comes with a built-in [validation system](https://github.com/ampproject/amphtml/tree/master/validator) which confirms that the page works, and that it doesn’t depend on external resources.
-  - The validation system runs a series of assertions confirming that the page’s markup meets the AMP HTML specification.
-  - [Google AMP Cache FAQ](https://developers.google.com/amp/cache/faq)
-  - [Google AMP Cache updates](https://developers.google.com/amp/cache/overview#google-amp-cache-updates)
-  - [Crawling Google AMP Cache URLs - How-to for search engines](https://docs.google.com/document/d/1V_uLHoa48IlbFl7_3KWT_1JmCf6BnFtt3S_oR4UsasQ/edit?usp=sharing)
diff --git a/spec/amp-errors.md b/spec/amp-errors.md
deleted file mode 100644
index 269d18ffdc7e7..0000000000000
--- a/spec/amp-errors.md
+++ /dev/null
@@ -1,61 +0,0 @@
-<!---
-Copyright 2016 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.
--->
-
-# Error reporting in AMP
-
-AMP reports 90% of errors to the endpoint specified by the `errorReportingUrl`
-config property, with the remaining 10% reporting to the endpoint specified by
-the `betaErrorReportingUrl` config. E.g. for `cdn.ampproject.org`
-
-- 90%: `https://us-central1-amp-error-reporting.cloudfunctions.net/r`
-- 10%: `https://us-central1-amp-error-reporting.cloudfunctions.net/r-beta`
-
-The following fields are reported:
-
-- `v=string` - AMP version
-- `m=string` - the error message
-- `a=1` - whether the error is labeled as "user" error (as opposed to a "dev" error).
-- `ex=1` - whether the error is labeled as "expected".
-- `3p=1` - whether the error occured in the 3p context.
-- `ca=1` - whether this is a canary version of AMP.
-- `or=string` - the ancestor origin if available.
-- `iem=1` - whether this document is iframed.
-- `rvu=string` - the viewer URL, provided by the viewer.
-- `mso=string` - the messaging origin for viewer communication.
-- `el=string` - the identifier/information on the associated DOM element.
-- `s=string` - the error stack.
-- `f=string` - the error's file name.
-- `l=number` - the error's line number.
-- `c=number` - the error's column number.
-- `r=string` - the document's referrer.
-- `ae=string` - accumulated/correlated error messages.
-- `fr=string` - the document's location fragment.
-
-## "Expected" errors
-
-The "expected" errors are marked with `&ex=1`.
-
-An expected error is identified by the `.expected` property on the `Error` object being `true`.
-You can use the `Log.prototype.expectedError` method to create an error that is marked
-as expected.
-
-An "expected" error is still an error, i.e. some features are disabled or not
-functioning fully because of it. However, it's an expected error. E.g. as is the
-case with some browser API missing (storage).
-
-Thus, the error can be classified differently by log aggregators. The main goal
-is to monitor that an "expected" error doesn't deteriorate over time. It's
-impossible to completely eliminate it.
diff --git a/spec/amp-framework-hosting.md b/spec/amp-framework-hosting.md
deleted file mode 100644
index 740100eb84eab..0000000000000
--- a/spec/amp-framework-hosting.md
+++ /dev/null
@@ -1,324 +0,0 @@
-# Hosting the AMP framework
-
-You can host the AMP framework and components from your own server or CDN. This feature has a number of applications. For example, you can...
-
-- set a release cadence that matches your development cycle.
-- deliver the AMP framework in regions where `cdn.ampproject.org` may not be available.
-- serve AMP pages and the framework from the same host, potentially improving content delivery times.
-- test and demonstrate changes to the framework or components.
-
-The AMP Project is looking into options for [validation](https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp/) of AMP pages that use an AMP framework hosted outside of `cdn.ampproject.org` ([#27546](https://github.com/ampproject/amphtml/issues/27546)). As of April 2020, these AMP pages do not pass validation.
-
-## Versioning
-
-This document makes frequent use of the terms "version" and "runtime version (rtv)". These two versions are slightly different. When the AMP framework is built, it is assigned a 13-digit _version_. When the AMP framework is served, a config number prefixes the version, resulting in a 15-digit _runtime version_. The build system and runtime enforce these version formats.
-
-Note: The _version_ (sometimes referred to as the "AMP version number") and _runtime version_ are often confused with each other. When it matters, be explicit about the version to which you're referring by indicating 13- or 15-digits.
-
-When the AMP framework is built (either by you or by the AMP Project), a 13-digit date-based version is automatically assigned. You can find this version in `version.txt` at the root of the AMP framework distribution. Then, the easiest route to hosting the AMP framework is to prefix this version with `01` to create a 15-digit runtime version, where `01` indicates a stable release.
-
-A more complete picture of the conventions adopted by the AMP Project for the version and runtime version is below. This is more than you need to get started with hosting the AMP framework, but serves as a good reference in case you want to expand your hosting capabilities.
-
-- Version ([#16631](https://github.com/ampproject/amphtml/pull/16631) and [#27848](https://github.com/ampproject/amphtml/pull/27848)): the commit time of the last commit in the active branch
-
-  ```
-  TZ=UTC git log -1 --pretty="%cd" --date=format-local:%y%m%d%H%M
-  ```
-
-  with three trailing digits indicating the number of cherry-picks included in the release. This version corresponds to the release versions found on [github.com/ampproject/amphtml/releases](https://github.com/ampproject/amphtml/releases).
-
-  Note: Prior to 2020-04-25, the version was based on date/time format `%y%m%d%H%M%S` with a single trailing digit – typically `0`, but could be change arbitrarily.
-
-- Runtime version (rtv): the version prefixed by a 2-digit config code:
-
-  - Experimental: `00`
-  - Stable: `01`
-  - Control: `02`
-  - Beta: `03`
-  - Nightly: `04`
-  - Nightly-Control: `05`
-  - AMP Experiments: `10`, `11`, `12`
-  - INABOX Control and Experiments: `20`, `21`, `22`, `23`, `24`, `25`
-
-The runtime version is found in URLs and is reported in the console of browser inspectors when an AMP page loads. For example, runtime version `012004041903580` is stable version `2004041903580`.
-
-## Acquire the AMP framework
-
-The AMP framework can be built from source or downloaded pre-built. Building the framework yourself gives you the flexibility of modifying the framework for your needs and deploying changes on your own release cycle. Downloading a pre-built framework means you'll be using an unmodified release, vetted by the AMP Project for distribution.
-
-### Option 1: Build the framework yourself
-
-Refer to the [Developing in AMP](https://github.com/ampproject/amphtml/blob/master/contributing/DEVELOPING.md) guide to familiarize yourself with building and testing the AMP framework. Once you are comfortable with the build system, a few small changes will customize the framework to run from your host.
-
-#### Update URLs config
-
-When AMP is built, several scripts are prepended with an `AMP_CONFIG` environment variable (object) containing basic information like: runtime version, config type, experiment enable/disable status, etc. This object can be customized at build time to inform the runtime where the framework is hosted. See [build-system/global-configs/README.md](https://github.com/ampproject/amphtml/tree/master/build-system/global-configs#custom-configjson) for information about the `custom-config.json` overlay.
-
-Create JSON file `build-system/global-configs/custom-config.json` with the following contents:
-
-```
-{
-  "cdnUrl": "https://example.com/amp-framework",
-  "geoApiUrl": "https://example.com/geo-api"
-}
-```
-
-where
-
-- `cdnUrl` is the base URL to your AMP framework. Defaults to `https://cdn.ampproject.org`.
-- `geoApiUrl` (optional) is your amp-geo fallback API URL. This API is described in section [amp-geo hotpatching](#amp-geo-hotpatching). Defaults to `null`.
-
-Important: `build-system/global-configs/custom-config.json` is not part of checked-in source. If it exists, it _always_ applies at build time, overlaying the active config. Don't forget about it! You can verify the overlay applies by looking for log line `Overlaid config with custom-config.json` during the build process.
-
-#### Build the framework
-
-Build an AMP release with
-
-```
-gulp dist
-```
-
-The built framework can be found in directory `dist`. The version assigned to the build is in `dist/version.txt` and a listing of all files included in build is in `dist/files.txt`. The framework is ready to be moved to and served from your host.
-
-If you have advanced hosting capabilities or would like to manually assign a version, `gulp dist` accepts these flags (among others):
-
-- `--config`: Indicate the release type, production (`prod`) or canary (`canary`). Defaults to `prod`.
-- `--version_override`: Assign a version to the distribution. The version must consist of 13-digits. Defaults to the latest git commit time of the active branch.
-- `--sourcemap_url`: Provide the base URL for JavaScript source map links. This URL should contain placeholder `{version}` that will be replaced with the actual version when the AMP framework is built, for example `https://raw.githubusercontent.com/<github-username>/amphtml/{version}/`. Defaults to `https://raw.githubusercontent.com/ampproject/amphtml/{version}/`.
-
-### Option 2: Download the framework with an AMP Toolbox tool
-
-[AMP Toolbox](https://github.com/ampproject/amp-toolbox) has both a Node.js module and a command line tool that will fetch a complete AMP framework from `cdn.ampproject.org`. Pick the tool best suited to your release workflow.
-
-- [@ampproject/toolbox-runtime-fetch](https://github.com/ampproject/amp-toolbox/tree/master/packages/runtime-fetch) - Node.js module
-- [@ampproject/toolbox-cli](https://github.com/ampproject/amp-toolbox/tree/master/packages/cli) - command line interface
-
-### Option 3: Manually copy the framework from cdn.ampproject.org
-
-The AMP framework can be copied from `cdn.ampproject.org`. The latest weekly release is always served from the root of `cdn.ampproject.org`. All [non-deprecated releases](https://github.com/ampproject/amphtml/blob/master/spec/amp-versioning-policy.md#version-deprecations) can be found in versioned URLs: `cdn.ampproject.org/rtv/<rtv>`, where `<rtv>` is the runtime version.
-
-Note: The AMP Project is looking into options for packaging releases ([#27726](https://github.com/ampproject/amphtml/issues/27726)).
-
-#### Copy files
-
-A listing of files in each release can be found in `files.txt` at the root of the framework distribution. For example, the files included in the current weekly release are listed in [cdn.ampproject.org/files.txt](https://cdn.ampproject.org/files.txt). Use your favorite HTTP client to download all of the files in `files.txt`, retaining path structures.
-
-#### Undo amp-geo dynamic modification
-
-When you request `amp-geo-0.1.js` from `cdn.ampproject.org` using an HTTP client, the CDN detects the country where the request originated and patches `amp-geo-0.1.js` on-the-fly. This patch needs to be reversed to ensure users are not all assigned the same country when amp-geo loads.
-
-When `cdn.ampproject.org` serves `amp-geo-0.1.js`, it replaces string `{{AMP_ISO_COUNTRY_HOTPATCH}}` with an ISO 3166-1 country code or an ISO 3166-2 country-subdivision code, followed by enough spaces to maintain the length of the string being replaced. Reversal of this patch can be accomplished by a RegEx replacement: search for `/ {28}|[a-z]{2} {26}|[a-z]{2} [a-z]{2}-[a-z0-9]{1,3} {19,21}/i` and replace with `{{AMP_ISO_COUNTRY_HOTPATCH}}`.
-
-In addition to `amp-geo-0.1.js`, you may find module JS (`.mjs`) and unversioned (`amp-geo-latest.js`) variants of the same file. The same RegEx replacement should be performed in these files as well.
-
-## Modify AMP pages
-
-AMP pages should be updated to fetch all scripts from your host. For example,
-
-```
-<script async src="https://cdn.ampproject.org/v0.js"></script>
-<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
-```
-
-becomes
-
-```
-<script async src="https://example.com/amp/v0.js"></script>
-<script async custom-element="amp-carousel" src="https://example.com/amp/v0/amp-carousel-0.1.js"></script>
-```
-
-Versioned URLs are also possible and discussed in section [Serve the AMP framework](#serve-the-amp-framework).
-
-Important: All scripts must come from the same origin. Fetching scripts from multiple origins is not supported and can lead to unpredictable end user experiences.
-
-### Meta tags
-
-If you opted to download the AMP framework, then it was built under the assumption that it would be hosted from its default location, `cdn.ampproject.org`. While `<script>` tags included in the `<head>` of your AMP pages will download from the URLs specified in their `src` attributes, dynamically loaded components like `amp-loader-0.1.js` will download from `cdn.ampproject.org`. Mixing a self-hosted AMP runtime with AMP components from `cdn.ampproject.org` is not supported and can lead to unpredictable end user experiences.
-
-The default host used by the AMP runtime can be updated by including the following `<meta>` tag in the `<head>` of your AMP pages:
-
-```
-<meta name="runtime-host" content="...">
-```
-
-where the `content` attribute should contain a URL to your hosted AMP framework. Similarly, an amp-geo fallback API URL (described in section [amp-geo hotpatching](#amp-geo-hotpatching)) can be defined with the following `<meta>` tag:
-
-```
-<meta name="amp-geo-api" content="...">
-```
-
-In each case, the value of the `content` attribute should be an absolute, HTTPS URL. Importantly, **these meta tags must appear before the first `<script>` tag**. For example, if your AMP framework is hosted at `https://example.com/amp`, then your `<head>` should look similar to the following:
-
-```
-<head>
-  ...
-  <!-- This instructs the AMP runtime to update its default host -->
-  <meta name="runtime-host" content="https://example.com/amp">
-
-  <!-- (Optional) This provides a fallback API for amp-geo -->
-  <meta name="amp-geo-api" content="https://example.com/geo/get-country">
-
-  <!-- All scripts appear after the above meta tags -->
-  <script async src="https://example.com/amp/v0.js"></script>
-  <script async custom-element="amp-geo" src="https://example.com/amp/v0/amp-geo-0.1.js"></script>
-</head>
-```
-
-## Serve the AMP framework
-
-Depending on your hosting capabilities and goals, there are several options to consider when serving the AMP framework.
-
-### URLs
-
-When the AMP runtime is initialized, all components are verified to belong to the same AMP framework version as the runtime itself. This affects components that have already downloaded as well as components that are downloaded dynamically, like amp-loader. Dynamic components and components with incorrect versions are (re-)downloaded from an rtv-specific path. This has consequences on how you choose to host the runtime.
-
-#### Versioned URLs
-
-The simplest option for hosting the AMP framework is to host it from an rtv-specific path. For example, consider AMP framework host `https://example.com/amp`. Stable version `2002290616360` corresponds to runtime version `012002290616360` and should be hosted from `https://example.com/amp/rtv/012002290616360`. In this case, AMP meta and script URLs would look like the following:
-
-```
-<meta name="runtime-host" content="https://example.com/amp"> <!-- not rtv-specific -->
-<script async src="https://example.com/amp/rtv/012002290616360/v0.js"></script>
-<script async custom-element="amp-geo" src="https://example.com/amp/rtv/012002290616360/v0/amp-geo-0.1.js"></script>
-```
-
-If hosting a single AMP framework version is your end goal, then you can update your AMP pages to download the runtime and components from your host and skip to section [amp-geo hotpatching](#amp-geo-hotpatching). If you expect to update the AMP framework regularly, then updating rtv-specific URLs in AMP pages could be cumbersome. See the next section, [Versionless URLs](#versionless-urls), for a solution.
-
-#### Versionless URLs
-
-The AMP Project has a [weekly release channel](https://amp.dev/documentation/guides-and-tutorials/learn/spec/release-schedule/#weekly), sometimes referred to as the "evergreen" release channel. AMP pages utilize this channel by including versionless URLs to AMP scripts and styles. This is relatively easy to accomplish when hosting the AMP framework yourself. The key is to ensure that the AMP framework hosted from versionless URLs is _also_ available from rtv-specific URLs. This suggests an update strategy: first make a new AMP framework version available from rtv-specific URLs and _then_ update the AMP framework available from versionless URLs. For example, if stable AMP framework version `2002290616360` is available from `https://example.com/amp`, then it must also be available from `https://example.com/amp/rtv/012002290616360`. In this case, AMP meta and script URLs would look like the following:
-
-```
-<meta name="runtime-host" content="https://example.com/amp">
-<script async src="https://example.com/amp/v0.js"></script>
-<script async custom-element="amp-geo" src="https://example.com/amp/v0/amp-geo-0.1.js"></script>
-```
-
-If you inspect the DOM after an AMP page loads, you'll notice additional components are dynamically loaded by the runtime and use versioned URLs, for example
-
-```
-<script async custom-element="amp-auto-lightbox" data-script="amp-auto-lightbox" i-amphtml-inserted crossorigin="anonymous" src="https://example.com/amp/rtv/012002290616360/v0/amp-auto-lightbox-0.1.js"></script>
-```
-
-### Metadata
-
-The AMP Project hosts a metadata endpoint at [cdn.ampproject.org/rtv/metadata](https://cdn.ampproject.org/rtv/metadata) that returns information on current releases. Hosting this endpoint yourself is optional, but may be useful if you use [AMP Toolbox](https://github.com/ampproject/amp-toolbox):
-
-- [@ampproject/toolbox-runtime-version](https://github.com/ampproject/amp-toolbox/tree/master/packages/runtime-version) uses the data to determine the latest AMP framework version available.
-- [@ampproject/toolbox-optimizer](https://github.com/ampproject/amp-toolbox/tree/master/packages/optimizer) uses the data to identify the boilerplate CSS that should be included in optimized AMP pages.
-- [@ampproject/toolbox-runtime-fetch](https://github.com/ampproject/amp-toolbox/tree/master/packages/runtime-fetch) uses the data to identify an rtv-specific path from which the framework should be downloaded.
-
-Consider the following sample from [cdn.ampproject.org/rtv/metadata](https://cdn.ampproject.org/rtv/metadata), most JSON properties are optional:
-
-```
-{
-  "ampRuntimeVersion": "012002192257490",
-  "ampCssUrl": "https://cdn.ampproject.org/rtv/012002192257490/v0.css",
-  "canaryPercentage": "0.005",
-  "diversions": ["002002251816300", "032002251816300", "022002192257490"],
-  "ltsRuntimeVersion": "012002191527100",
-  "ltsCssUrl": "https://cdn.ampproject.org/rtv/012002191527100/v0.css"
-}
-```
-
-The properties are defined as follows:
-
-- `ampRuntimeVersion` (required) is the current stable runtime version of the AMP framework.
-- `ampCssUrl` (optional) is a URL to the boilerplate CSS for the current stable runtime version.
-- `canaryPercentage` (optional) indicates the fraction of users who receive the experimental runtime version of the AMP framework instead of the current stable runtime version.
-- `diversions` (optional) lists active non-stable runtime versions.
-- `ltsRuntimeVersion` (optional) is the current [long-term stable](https://github.com/ampproject/amphtml/blob/master/contributing/lts-release.md) runtime version.
-- `ltsCssUrl` (optional) is a URL to the boilerplate CSS for the current long-term stable runtime version.
-
-### amp-geo hotpatching
-
-[amp-geo](https://amp.dev/documentation/components/amp-geo/) requires special attention when hosting the AMP framework. When `cdn.ampproject.org` serves any of `amp-geo-0.1.js`, `amp-geo-0.1.mjs`, `amp-geo-latest.js`, or `amp-geo-latest.mjs`, it detects the country and subdivision where the request originated and replaces string `{{AMP_ISO_COUNTRY_HOTPATCH}}` with region data and enough trailing spaces to maintain the original string length. Ideally, when hosting the AMP framework, your content distribution platform would perform the same manipulation. The logic is as follows:
-
-- If country could not be determined, substitute 28 spaces:
-  ```
-  Before: "{{AMP_ISO_COUNTRY_HOTPATCH}}"
-  After:  "                            "
-  ```
-- If country could be determined, substitute the ISO 3166-1 alpha-2 country code followed by 26 spaces:
-  ```
-  Before: "{{AMP_ISO_COUNTRY_HOTPATCH}}"
-  After:  "xx                          "
-  ```
-  where `xx` is the country code (e.g. `de` for Germany).
-- If country and subdivision could be determined and are exactly `us` (United States) and `ca` (California), respectively (this is the only subdivision supported by amp-geo as of this writing), substitute the ISO 3166-1 alpha-2 country code _and_ the ISO 3166-2 country-subdivision code followed by 20 spaces:
-  ```
-  Before: "{{AMP_ISO_COUNTRY_HOTPATCH}}"
-  After:  "us us-ca                    "
-  ```
-
-#### amp-geo fallback API
-
-If location detection and file modification at time of delivery are not possible, amp-geo supports use of an API to fetch the user's country at run time. Be aware that usage of an API for this feature increases the chances of visible content or style shifts due to the delay of an additional network request. The AMP Project does not provide this API service; you need to supply your own API. Two example providers (not a comprehensive list) that offer IP-to-country databases from which an API could be created include [MaxMind](https://www.maxmind.com) and [IP2Location](https://www.ip2location.com/).
-
-The API must meet the following requirements:
-
-- Satisfy [CORS security in AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-cors-requests.md)
-- Be secure (HTTPS)
-- Return `application/json` content conforming to the following schema:
-  ```
-  {
-    "$schema": "http://json-schema.org/draft-07/schema#",
-    "type": "object",
-    "properties": {
-      "country": {
-        "type": "string",
-        "title": "ISO 3166-1 alpha-2 (case insensitive) country code of client request",
-        "default": "",
-        "pattern": "^[a-zA-Z]{2}$"
-      },
-      "subdivision": {
-        "type": "string",
-        "title": "Subdivision part of ISO 3166-2 (case insensitive) country-subdivision code of client request",
-        "default": "",
-        "pattern": "^[a-zA-Z0-9]{1,3}$"
-      }
-    },
-    "required": [
-      "country"
-    ]
-  }
-  ```
-
-A sample response for a user in Germany looks like:
-
-```
-{
-  "country": "de"
-}
-```
-
-A sample response for a user in California, US looks like:
-
-```
-{
-  "country": "us",
-  "subdivision": "ca"
-}
-```
-
-Note: As of April 2020, `us-ca` is the only subdivision supported by amp-geo.
-
-There are trade-offs in accuracy and performance when you set the client cache time for this API. Longer cache times are better for performance on subsequent page loads but can lead to incorrect country detection. For reference, `https://cdn.ampproject.org/v0/amp-geo-0.1.js` has a client cache time of 30 minutes.
-
-### HTTP response headers
-
-In addition to following [TLS best practices](https://infosec.mozilla.org/guidelines/web_security), consider the following headers when hosting the AMP framework:
-
-- `content-security-policy`: If your pages implement [AMP's CSP](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/secure-pages/), apply a matching content security policy to your hosted framework responses. Inspect the headers on `https://cdn.ampproject.org/v0.js` for a base policy that should be expanded to include resources served from your host.
-- `access-control-allow-origin`: Some runtime components are fetched via XHR. If your AMP pages will be served from a different host than your framework, be sure to include CORS headers (see also [CORS Requests in AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-cors-requests.md)).
-- `content-type`: There are a few resources served without file extensions, or with extensions that may not be recognized by all web servers. In addition to [common types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types), you may want to include special handling for the following:
-
-  - `/rtv/metadata` - `application/json`
-  - `/amp_preconnect_polyfill_404_or_other_error_expected._Do_not_worry_about_it` - `text/html`
-
-  A complete list of files in each AMP release can be found in `files.txt`, for example `https://cdn.ampproject.org/files.txt`.
-
-- `cache-control`: The AMP framework hosted from versioned URLs should be "immutable"; users should expect to find the same content from these URLs for as long as the URLs are active (amp-geo is an exception, see below). Long cache times are appropriate. On the other hand, the AMP framework hosted from versionless URLs should be served with relatively short cache times so that minimal time is required for your latest update to reach all users.
-  - Versioned URL example: `cdn.ampproject.org` sets a 1 year client cache time on resources served under `cdn.ampproject.org/rtv/<rtv>`: `cache-control: public, max-age=31536000`.
-  - Versionless URL example: `cdn.ampproject.org` sets a 50 minute client cache time for resources served from versionless URLs, but also allows a long 2 week stale-while-revalidate time in the event that versionless URLs experience an outage: `cache-control: private, max-age=3000, stale-while-revalidate=1206600`.
-  - `amp-geo-*.(m)js`: If amp-geo hotpatching is utilized, there is a trade-off in accuracy and performance when you set this cache time. Longer cache times are better for performance on subsequent page loads but can lead to incorrect country detection. Both `cdn.ampproject.org/v0/amp-geo-0.1.js` and `cdn.ampproject.org/rtv/<rtv>/v0/amp-geo-0.1.js` set the client cache time to 30 minutes.
diff --git a/spec/amp-story-player.md b/spec/amp-story-player.md
deleted file mode 100644
index cb02f1e7d5b4b..0000000000000
--- a/spec/amp-story-player.md
+++ /dev/null
@@ -1,128 +0,0 @@
----
-$category@: presentation
-formats:
-  - stories
-teaser:
-  text: A player for embedding and playing your favorite stories in your own website.
----
-
-<!--
-Copyright 2020 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.
--->
-
-# <a name="`amp-story-player`"></a> `amp-story-player`
-
-<figure class="centered-fig">
-  <amp-anim alt="amp-story-player example" width="300" height="533" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/spec/img/amp-story-player.gif">
-    <noscript>
-    <img alt="amp-story-player example" src="https://github.com/ampproject/amphtml/raw/master/spec/img/amp-story-player.gif" />
-  </noscript>
-  </amp-anim>
-</figure>
-
-<table>
-  <tr>
-    <td width="40%"><strong>Description</strong></td>
-    <td>Embed and play stories in a non-AMP website.</td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>Required Scripts</strong></td>
-    <td>
-    <code>&lt;script async src="https://cdn.ampproject.org/amp-story-player-v0.js">&lt;/script></code>
-    <code>&lt;link href="https://cdn.ampproject.org/amp-story-player-v0.css" rel='stylesheet' type='text/css'></code>
-    </td>
-  </tr>
-  <tr>
-    <td width="40%"><strong>Examples</strong></td>
-    <td>
-      <li>See <a href="https://github.com/ampproject/amphtml/blob/master/examples/amp-story/player.html">code snippet</a>.</li>
-    </td>
-  </tr>
-</table>
-
-[TOC]
-
-## Usage
-
-Use `amp-story-player` to embed and play stories within a webpage.
-
-### Embed in a non-AMP page
-
-The code snippet below demonstrates an embed of `<amp-story-player>` in a non-AMP webpage.
-
-[example preview="top-frame" playground="true"]
-
-```html
-<head>
-  <script
-    async
-    src="https://cdn.ampproject.org/amp-story-player-v0.js"
-  ></script>
-  <link
-    href="https://cdn.ampproject.org/amp-story-player-v0.css"
-    rel="stylesheet"
-    type="text/css"
-  />
-</head>
-<body>
-  <amp-story-player style="width: 360px; height: 600px;">
-    <a
-      href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp/"
-      style="--story-player-poster: url('https://amp.dev/static/samples/img/story_dog2_portrait.jpg')"
-    >
-      Stories in AMP - Hello World
-    </a>
-  </amp-story-player>
-</body>
-```
-
-[/example]
-
-### Attributes
-
-The inline width and height ensures that the player will not cause any jumps in your website while the script is being loaded. Feel free to modify the values, but we recommend maintaining a 3:5 aspect ratio.
-
-#### style [recommended]
-
-Inline CSS properties for the width and height of the player. e.g. `style="width: 360px; height: 600px;"`
-
-## Specify embedded story
-
-The `<amp-story-player>` component contains one `<a>` tag. Point the href attribute to the story URL.
-
-Place the story's title within the `<a>` tag. This provides a better user experience and allows search engines to crawl embedded stories.
-
-Use a poster image as a placeholder to display to users while the story loads. Add the `--story-player-poster` CSS variable as an inline style of the `<a>` tag and point to the poster image URL.
-
-### Attributes
-
-#### href
-
-URL pointing to the story.
-
-#### style="--story-player-poster: url('...');" [recommended]
-
-CSS variable with the URL pointing to the poster image of the story.
-
-```html
-<amp-story-player style="width: 360px; height: 600px;">
-  <a
-    href="https://www.example.com/story.html"
-    style="--story-player-poster: url('https://www.example.com/assets/cover1.html');"
-  >
-    A title that describes this story.
-  </a>
-</amp-story-player>
-```
diff --git a/spec/amp-var-substitutions.md b/spec/amp-var-substitutions.md
deleted file mode 100644
index ed97b351176f2..0000000000000
--- a/spec/amp-var-substitutions.md
+++ /dev/null
@@ -1,1294 +0,0 @@
-<!---
-Copyright 2015 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.
--->
-
-# AMP HTML URL Variable Substitutions
-
-## Overview
-
-Various AMP features allow variables to be used inside of strings and substituted with the corresponding actual values. For example, `amp-pixel` allows expressions like this:
-
-```html
-<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
-```
-
-`RANDOM` gets resolved to a randomly generated value and AMP replaces it in the request string:
-
-```http
-https://foo.com/pixel?0.8390278471201
-```
-
-The following table lists the features that enable variable substitutions, as well as several properties that govern usage:
-
-<table>
-  <tr>
-    <th width="25%"><strong>AMP Feature</strong></th>
-    <th width="25%"><strong>URL limitations</strong></th>
-    <th width="25%"><strong>Requires <a href="#per-use-opt-in">per-use opt-in</a>?</strong></th>
-    <th width="25%"><strong>Restrictions</strong></th>
-  </tr>
-  <tr>
-    <td width="25%"><code>amp-analytics</code><br><a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md#vars">Detailed documentation</a></td>
-    <td width="25%">Requests must be HTTPS URLs (not a requirement specific to variable substitutions)</td>
-    <td width="25%">No</td>
-    <td width="25%">None</td>
-  </tr>
-  <tr>
-    <td width="25%"><code>amp-list</code><br><a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-list/amp-list.md#substitutions">Detailed documentation</a></td>
-    <td width="25%">Requests must be HTTPS URLs (not a requirement specific to variable substitutions)</td>
-    <td width="25%">Yes, if fetching cross-origin resources via <code>[src]</code> <a href="https://amp.dev/documentation/components/amp-bind#element-specific-attributes">attribute binding</a>. Otherwise, no. Read more about <a href="#per-use-opt-in">per-use opt-in</a></td>
-    <td width="25%">None</td>
-  </tr>
-  <tr>
-    <td width="25%"><code>amp-pixel</code><br><a href="https://github.com/ampproject/amphtml/blob/master/builtins/amp-pixel.md#substitutions">Detailed documentation</a></td>
-    <td width="25%">Requests must be HTTPS URLs (not a requirement specific to variable substitutions)</td>
-    <td width="25%">No</td>
-    <td width="25%">None</td>
-  </tr>
-  <tr>
-    <td width="25%"><code>amp-state</code><br><a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-bind/amp-bind.md#attributes">Detailed documentation</a></td>
-    <td width="25%">Requests must be HTTPS URLs (not a requirement specific to variable substitutions)</td>
-    <td width="25%">Yes, if fetching cross-origin resources via <code>[src]</code> <a href="https://amp.dev/documentation/components/amp-bind#element-specific-attributes">attribute binding</a>. Otherwise, no. Read more about <a href="#per-use-opt-in">per-use opt-in</a></td>
-    <td width="25%">None</td>
-  </tr>
-  <tr>
-    <td width="25%">Links (<code>&lt;a&gt;</code>)</td>
-    <td width="25%">
-      HTTPS URL and URL matching either:
-      <ul>
-        <li>Page’s source origin</li>
-        <li>Page’s canonical origin</li>
-        <li>An origin white listed via the <code>amp-link-variable-allowed-origin</code> <code>meta</code> tag</li>
-      </ul>
-    </td>
-    <td width="25%">Yes, via space-delimited attribute <code>data-amp-replace</code>. Read more about <a href="#per-use-opt-in">per-use opt-in</a></td>
-    <td width="25%">Only these variables are supported: <code>CLIENT_ID</code> and <code>QUERY_PARAM</code>.<br>See the section on <a href="#substitution-timing">"substitution timing"</a> for further notes</td>
-  </tr>
-  <tr>
-    <td width="25%">Form inputs<br><a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-form/amp-form.md#variable-substitutions">Detailed documentation</a></td>
-    <td width="25%">Requests must be HTTPS URLs (not a requirement specific to variable substitutions)</td>
-    <td width="25%">Yes, via space-delimited attribute <code>data-amp-replace</code>. Read more about <a href="#per-use-opt-in">per-use opt-in</a></td>
-    <td width="25%">See the section on <a href="#substitution-timing">"substitution timing"</a> for further notes</td>
-  </tr>
-</table>
-
-### Substitution timing
-
-Variable substitutions that are dependent on a user action like links and form inputs may not occur if the value has not yet been computed.
-
-Please take note of the following scenarios:
-
-- `CLIENT_ID` is available once it has been computed. This can be accomplished through use by another feature such as `amp-analytics` or `amp-pixel`. Note that `CLIENT_ID` may also be blocked on an `amp-user-notification` that is pending acceptance.
-- Asynchronously resolved variables are not available
-
-### Restrictions
-
-The `host` string of an URL does not accept variables. It fails on AMP cache.
-
-## Variable substitution in links
-
-Variable substitution is available in links, i.e. `<a href="..."></a>`.
-
-Only these variables are supported:
-
-- `CLIENT_ID`
-- `QUERY_PARAM(argument)`
-
-### Per-use opt-in
-
-Link substitution requires per-use opt-in as an added security measure and to affirm the intention to use variable substitution. This is done by specifying an additional attribute called `data-amp-replace` with a string value containing a space-delimited listing of the desired variables to substitute. An example is below.
-
-```html
-<a
-  href="https://example.com?client_id=CLIENT_ID(bar)&abc=QUERY_PARAM(abc)"
-  data-amp-replace="CLIENT_ID QUERY_PARAM"
-  >Go to my site</a
->
-```
-
-#### Appending parameters to the href
-
-If you need to append dynamic parameters to the href, specify the parameters by using the `data-amp-addparams` attribute. Any substitution parameters that you specify in `data-amp-addparams` must also be specified in `data-amp-replace`, as in the following example
-
-```html
-<a
-  href="https://example.com?abc=QUERY_PARAM(abc)"
-  data-amp-replace="CLIENT_ID QUERY_PARAM"
-  data-amp-addparams="client_id=CLIENT_ID(bar)&linkid=l123"
-  >Go to my site</a
->
-```
-
-### White listed domains for link substitution
-
-Link substitutions are restricted and will only be fulfilled for URLs matching:
-
-- The page’s source origin
-- The page’s canonical origin
-- A white listed origin
-
-To allowlist an origin, include a `amp-link-variable-allowed-origin` `meta` tag in the `head` of your document. To specify multiple domains, separate each domain with a space.
-
-```html
-<meta
-  name="amp-link-variable-allowed-origin"
-  content="https://example.com https://example.org"
-/>
-```
-
-## Variables
-
-The tables below list the available URL variables grouped by type of usage. Further down in this document, are [descriptions](#variable-descriptions) of each of the variables, along with example usages.
-
-- [Page and Content](#page-and-content)
-- [Performance](#performance)
-- [Device and Browser](#device-and-browser)
-- [Interaction](#interaction)
-- [Visibility](#visibility)
-- [AMP Components](#amp-components)
-- [Miscellaneous](#miscellaneous)
-
-### Page and Content
-
-| Variable Name                                   | Platform Variable    | amp-analytics Variable |
-| ----------------------------------------------- | -------------------- | ---------------------- |
-| [AMP Document Host](#amp-document-host)         | `AMPDOC_HOST`        | `${ampdocHost}`        |
-| [AMP Document Hostname](#amp-document-hostname) | `AMPDOC_HOSTNAME`    | `${ampdocHostname}`    |
-| [AMP Document URL](#amp-document-url)           | `AMPDOC_URL`         | `${ampdocUrl}`         |
-| [Canonical Host](#canonical-host)               | `CANONICAL_HOST`     | `${canonicalHost}`     |
-| [Canonical Hostname](#canonical-hostname)       | `CANONICAL_HOSTNAME` | `${canonicalHostname}` |
-| [Canonical Path](#canonical-path)               | `CANONICAL_PATH`     | `${canonicalPath}`     |
-| [Canonical URL](#canonical-url)                 | `CANONICAL_URL`      | `${canonicalUrl}`      |
-| [Counter](#counter)                             | `COUNTER`            | `${counter}`           |
-| [Document Charset](#document-charset)           | `DOCUMENT_CHARSET`   | `${documentCharset}`   |
-| [Document Referrer](#document-referrer)         | `DOCUMENT_REFERRER`  | `${documentReferrer}`  |
-| [External Referrer](#external-referrer)         | `EXTERNAL_REFERRER`  | `${externalReferrer}`  |
-| [HTML Attributes](#html-attributes)             | `HTML_ATTR`          | `${htmlAttr}`          |
-| [Source URL](#source-url)                       | `SOURCE_URL`         | `${sourceUrl}`         |
-| [Source Host](#source-host)                     | `SOURCE_HOST`        | `${sourceHost}`        |
-| [Source Hostname](#source-hostname)             | `SOURCE_HOSTNAME`    | `${sourceHostname}`    |
-| [Source Path](#source-path)                     | `SOURCE_PATH`        | `${sourcePath}`        |
-| [Title](#title)                                 | `TITLE`              | `${title}`             |
-| [Viewer](#viewer)                               | `VIEWER`             | `${viewer}`            |
-
-### Performance
-
-| Variable Name                                           | Platform Variable      | amp-analytics Variable      |
-| ------------------------------------------------------- | ---------------------- | --------------------------- |
-| [Content Load Time](#content-load-time)                 | `CONTENT_LOAD_TIME`    | `${contentLoadTime}`        |
-| [Cumulative Layout Shift](#cumulative-layout-shift)     | N/A                    | `${cumulativeLayoutShift}`  |
-| [Domain Lookup Time](#domain-lookup-time)               | `DOMAIN_LOOKUP_TIME`   | `${domainLookupTime}`       |
-| [DOM Interactive Time](#dom-interactive-time)           | `DOM_INTERACTIVE_TIME` | `${domInteractiveTime}`     |
-| [First Contentful Paint](#first-contentful-paint)       | N/A                    | `${firstContentfulPaint}`   |
-| [First Input Delay](#first-input-delay)                 | N/A                    | `${firstInputDelay}`        |
-| [Largest Contentful Paint](#largest-contentful-paint)   | N/A                    | `${largestContentfulPaint}` |
-| [Navigation Redirect Count](#navigation-redirect-count) | `NAV_REDIRECT_COUNT`   | `${navRedirectCount}`       |
-| [Navigation Timing ](#navigation-timing)                | `NAV_TIMING`           | `${navTiming}`              |
-| [Navigation Type](#navigation-type)                     | `NAV_TYPE`             | `${navType}`                |
-| [Page Download Time](#page-download-time)               | `PAGE_DOWNLOAD_TIME`   | `${pageDownloadTime}`       |
-| [Page Load Time](#page-load-time)                       | `PAGE_LOAD_TIME`       | `${pageLoadTime}`           |
-| [Redirect Time](#redirect-time)                         | `REDIRECT_TIME`        | `${redirectTime}`           |
-| [Server Response Time](#server-response-time)           | `SERVER_RESPONSE_TIME` | `${serverResponseTime}`     |
-| [TCP Connection Time](#tcp-connection-time)             | `TCP_CONNECT_TIME`     | `${tcpConnectTime}`         |
-
-### Device and Browser
-
-| Variable Name                                       | Platform Variable         | amp-analytics Variable     |
-| --------------------------------------------------- | ------------------------- | -------------------------- |
-| [Available Screen Height](#available-screen-height) | `AVAILABLE_SCREEN_HEIGHT` | `${availableScreenHeight}` |
-| [Available Screen Width](#available-screen-width)   | `AVAILABLE_SCREEN_WIDTH`  | `${availableScreenWidth}`  |
-| [Browser Language](#browser-language)               | `BROWSER_LANGUAGE`        | `${browserLanguage}`       |
-| [Screen Color Depth](#screen-color-depth)           | `SCREEN_COLOR_DEPTH`      | `${screenColorDepth}`      |
-| [Screen Height](#screen-heigth)                     | `SCREEN_HEIGHT`           | `${screenHeight}`          |
-| [Screen Width](#screen-width)                       | `SCREEN_WIDTH`            | `${screenWidth}`           |
-| [Scroll Height](#scroll-height)                     | `SCROLL_HEIGHT`           | `${scrollHeight}`          |
-| [Scroll Width](#scroll-width)                       | `SCROLL_WIDTH`            | `${scrollWidth}`           |
-| [Scroll Left](#scroll-left)                         | N/A                       | `${scrollLeft}`            |
-| [Scroll Top](#scroll-top)                           | N/A                       | `${scrollTop}`             |
-| [Timezone](#timezone)                               | `TIMEZONE`                | `${timezone}`              |
-| [Timezone Code](#timezone-code)                     | N/A                       | `${timezoneCode}`          |
-| [User Agent](#user-agent)                           | `USER_AGENT`              | `${userAgent}`             |
-| [Viewport Height](#viewport-height)                 | `VIEWPORT_HEIGHT`         | `${viewportHeight}`        |
-| [Viewport Width](#viewport-width)                   | `VIEWPORT_WIDTH`          | `${viewportWidth}`         |
-
-### Interaction
-
-| Variable Name                                             | Platform Variable          | amp-analytics Variable        |
-| --------------------------------------------------------- | -------------------------- | ----------------------------- |
-| [Horizontal Scroll Boundary](#horizontal-scroll-boundary) | N/A                        | `${horizontalScrollBoundary}` |
-| [Total Engaged Time](#total-engaged-time)                 | `TOTAL_ENGAGED_TIME`       | `${totalEngagedTime}`         |
-| [Incremental Engaged Time](#incremental-engaged-time)     | `INCREMENTAL_ENGAGED_TIME` | `${incrementalEngagedTime}`   |
-| [Vertical Scroll Boundary](#vertical-scroll-boundary)     | N/A                        | `${verticalScrollBoundary}`   |
-
-### Visibility
-
-| Variable Name                                               | Platform Variable | amp-analytics Variable        |
-| ----------------------------------------------------------- | ----------------- | ----------------------------- |
-| [Backgrounded](#backgrounded)                               | N/A               | `${backgrounded}`             |
-| [Backgrounded At Start](#backgrounded-at-start)             | N/A               | `${backgroundedAtStart}`      |
-| [Carousel From Slide](#carousel-from-slide)                 | N/A               | `${fromSlide}`                |
-| [Carousel To Slide](#carousel-to-slide)                     | N/A               | `${toSlide}`                  |
-| [Element Id](#element-id)                                   | N/A               | `${elementId}`                |
-| [Element Height](#element-height)                           | N/A               | `${elementHeight}`            |
-| [Element Width](#element-width)                             | N/A               | `${elementWidth}`             |
-| [Element X](#element-x)                                     | N/A               | `${elementX}`                 |
-| [Element Y](#element-y)                                     | N/A               | `${elementY}`                 |
-| [First Seen Time](#first-seen-time)                         | N/A               | `${firstSeenTime}`            |
-| [First Visible Time](#first-visible-time)                   | N/A               | `${firstVisibleTime}`         |
-| [Initial Scroll Depth](#initial-scroll-depth)               | N/A               | `${initialScrollDepth}`       |
-| [Intersection Ratio](#intersection-ratio)                   | N/A               | `${intersectionRatio}`        |
-| [Intersection Rect](#intersection-rect)                     | N/A               | `${intersectionRect}`         |
-| [Last Seen Time](#last-seen-time)                           | N/A               | `${lastSeenTime}`             |
-| [Last Visible Time](#last-visible-time)                     | N/A               | `${lastVisibleTime}`          |
-| [Load Time Visibility](#load-time-visibility)               | N/A               | `${loadTimeVisibility}`       |
-| [Max Continuous Visible Time](#max-continuous-visible-time) | N/A               | `${maxContinuousVisibleTime}` |
-| [Max Scroll Depth](#max-scroll-depth)                       | N/A               | `${maxScrollDepth}`           |
-| [Max Visible Percentage](#max-visible-percentage)           | N/A               | `${maxVisiblePercentage}`     |
-| [Min Visible Percentage](#min-visible-percentage)           | N/A               | `${minVisiblePercentage}`     |
-| [Total Time](#total-time)                                   | N/A               | `${totalTime}`                |
-| [Total Visible Time](#total-visible-time)                   | N/A               | `${totalVisibleTime}`         |
-
-### Timers
-
-| Variable Name                     | Platform Variable | amp-analytics Variable |
-| --------------------------------- | ----------------- | ---------------------- |
-| [Timer Duration](#timer-duration) | N/A               | `${timerDuration}`     |
-| [Timer Start Time](#timer-start)  | N/A               | `${timerStart}`        |
-
-### AMP Components
-
-| Variable Name                    | Platform Variable | amp-analytics Variable | Required AMP Components                                                                                             |
-| -------------------------------- | ----------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- |
-| [Variant](#experiment-variant)   | `VARIANT`         | N/A                    | [`<amp-experiment>`](https://github.com/ampproject/amphtml/blob/master/extensions/amp-experiment/amp-experiment.md) |
-| [Variants](#experiment-variants) | `VARIANTS`        | N/A                    | [`<amp-experiment>`](https://github.com/ampproject/amphtml/blob/master/extensions/amp-experiment/amp-experiment.md) |
-| [Geolocation](#geolocation)      | `AMP_GEO`         | `${ampGeo}`            | [`<amp-geo>`](https://github.com/ampproject/amphtml/blob/master/extensions/amp-geo/amp-geo.md)                      |
-
-### Miscellaneous
-
-| Variable Name                                 | Platform Variable  | amp-analytics Variable |
-| --------------------------------------------- | ------------------ | ---------------------- |
-| [AMP Version](#amp-version)                   | `AMP_VERSION`      | `${ampVersion}`        |
-| [AMP State](#amp-state)                       | `AMP_STATE`        | `${ampState}`          |
-| [Background State](#background-state)         | `BACKGROUND_STATE` | `${backgroundState}`   |
-| [Client ID](#client-id)                       | `CLIENT_ID`        | `${clientId}`          |
-| [Extra URL Parameters](#extra-url-parameters) | N/A                | `${extraUrlParams}`    |
-| [Page View ID](#page-view-id)                 | `PAGE_VIEW_ID`     | `${pageViewId}`        |
-| [Page View ID 64](#page-view-id-64)           | `PAGE_VIEW_ID_64`  | `${pageViewId64}`      |
-| [Query Parameter](#query-parameter)           | `QUERY_PARAM`      | `${queryParam}`        |
-| [Random](#random)                             | `RANDOM`           | `${random}`            |
-| [Request Count](#request-count)               | N/A                | `${requestCount}`      |
-| [Timestamp](#timestamp)                       | `TIMESTAMP`        | `${timestamp}`         |
-| [Error Name](#error-name)                     | N/A                | `${errorName}`         |
-| [Error Message](#error-message)               | N/A                | `${errorMessage}`      |
-
-### Variable Descriptions
-
-#### AMP Document Host
-
-Provides the AMP document's URL host.
-
-- **platform variable**: `AMPDOC_HOST`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?host=AMPDOC_HOST"></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?host=example.com:8080`.
-- **amp-analytics variable**: `${ampdocHost}`
-  - Example value: `example.com`
-
-#### AMP Document Hostname
-
-Provides the AMP document's URL hostname.
-
-- **platform variable**: `AMPDOC_HOSTNAME`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?hostname=AMPDOC_HOSTNAME"></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?hostname=example.com`.
-- **amp-analytics variable**: `${ampdocHostname}`
-  - Example value: `example.com`
-
-#### AMP Document URL
-
-Provides the AMP document's URL. The URL contains the scheme, domain, port and full path. It does not contain the fragment part of the URL.
-
-- **platform variable**: `AMPDOC_URL`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?ref=AMPDOC_URL"></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?ref=https%3A%2F%2Fexample.com%2F`.
-- **amp-analytics variable**: `${ampdocUrl}`
-  - Example value: `http://example.com:8000/examples/analytics.amp.html`
-
-#### AMP State
-
-Pulls a value from the provided AMP state key.
-
-- **platform variable**: `AMP_STATE`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?bar=AMP_STATE(foo.bar)"></amp-pixel>
-  ```
-  If `foo.bar` exists in the AMP state, the corresponding value is inserted into the pixel src.
-- **amp-analytics variable**: `${ampState}`
-  - Example value: `${ampState(foo.bar)}`: If `foo.bar` is available, its associated value is returned; otherwise, null is returned.
-
-#### AMP Version
-
-Provides a string with the AMP release version.
-
-- **platform variable**: `AMP_VERSION`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?v=AMP_VERSION"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${ampVersion}`
-  - Example value: `1460655576651`
-
-#### Available Screen Height
-
-Provides the screen height in pixels available for the page rendering. This value can be slightly more or less than the actual viewport size because of various browser quirks.
-
-- **platform variable**: `AVAILABLE_SCREEN_HEIGHT`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?availScreenHeight=AVAILABLE_SCREEN_HEIGHT"
-  ></amp-pixel>
-  ```
-- **amp-analytics variable**: `${availableScreenHeight}`
-  - Example value: `1480`
-
-#### Available Screen Width
-
-Provides the screen width in pixels available for the page rendering. This value can be slightly more or less than the actual viewport height due to various browser quirks.
-
-- **platform variable**: `AVAILABLE_SCREEN_WIDTH`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?availScreenWidth=AVAILABLE_SCREEN_WIDTH"
-  ></amp-pixel>
-  ```
-- **amp-analytics variable**: `${availableScreenWidth}`
-  - Example value: `2500`
-
-#### Backgrounded
-
-A binary variable with possible values of 1 and 0 to indicate that the page/tab was sent to background at any point before the hit was sent. 1 indicates that the page was backgrounded while 0 indicates that the page has always been in the foreground. This variable does not count prerender as a backgrounded state.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${backgrounded}`
-
-#### Backgrounded At Start
-
-A binary variable with possible values of 1 and 0 to indicate that the page/tab was backgrounded at the time when the page was loaded. 1 indicates that the page was loaded in the background while 0 indicates otherwise. This variable does not count prerender as a backgrounded state.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${backgroundedAtStart}`
-
-#### Background State
-
-Provides the current background state of the page. Possible values are `0`, the page is visible, or `1`, the page is backgrounded.
-
-- **platform variable**: `BACKGROUND_STATE`
-- **amp-analytics variable**: `${backgroundState}`
-
-#### Browser Language
-
-Provides a string representing the preferred language of the user, usually the language of the browser UI.
-
-- **platform variable**: `BROWSER_LANGUAGE`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?lang=BROWSER_LANGUAGE"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${browserLanguage}`
-  - Example value: `en-us`
-
-#### Canonical Host
-
-Provides the canonical document's URL host.
-
-- **platform variable**: `CANONICAL_HOST`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?host=CANONICAL_HOST"></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?host=pinterest.com:9000`.
-- **amp-analytics variable**: `${canonicalHost}`
-  - Example value: `http://pinterest.com:9000`
-
-#### Canonical Hostname
-
-Provides the canonical document's URL hostname.
-
-- **platform variable**: `CANONICAL_HOSTNAME`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?hostname=CANONICAL_HOSTNAME"
-  ></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?host=pinterest.com`.
-- **amp-analytics variable**: `${canonicalHostname}`
-  - Example value: `pinterest.com`
-
-#### Canonical Path
-
-Provides the canonical document's URL path.
-
-- **platform variable**: `CANONICAL_PATH`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?path=CANONICAL_PATH"></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?path=%2Fpage1.html`.
-- **amp-analytics variable**: `${canonicalPath}`
-  - Example value: `%2Fanalytics.html`
-
-#### Canonical URL
-
-Provides the canonical document's URL.
-
-- **platform variable**: `CANONICAL_URL`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?href=CANONICAL_URL"></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?href=https%3A%2F%2Fpinterest.com%2F`.
-- **amp-analytics variable**: `${canonicalUrl}`
-  - Example value: `http%3A%2F%2Fexample.com%3A8000%2Fanalytics.html`
-
-#### Carousel From Slide
-
-Provides the `amp-carousel` slide from which the traversal happens. The value is either taken from the `data-slide-id` attribute of the slide when present, else it represents the index of the slide (starting from 0).
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${fromSlide}`
-
-For more information on analytics for `amp-carousel`, see [AMP Carousel and Analytics](../extensions/amp-carousel/amp-carousel-analytics.md).
-
-#### Carousel To Slide
-
-Provides the `amp-carousel` slide to which the traversal happens. The value is either taken from the `data-slide-id` attribute of the slide when present, else it represents the index of the slide (starting from 0).
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${toSlide}`
-
-For more information on analytics for `amp-carousel`, see [AMP Carousel and Analytics](../extensions/amp-carousel/amp-carousel-analytics.md).
-
-#### Client ID
-
-Provides a per document-source-origin (the origin of the website where you publish your AMP doc) and user identifier. The client ID will be the same for the same user if they visit again within one year. The client ID should behave roughly similar to a cookie storing a session ID for one year. If the AMP document is not served through the Google AMP Cache, the client ID is replaced with a cookie of the name of the `cid scope` argument (see below). If it is not present, a cookie will be set with the same name. These cookies will always have the prefix "amp-" followed by a random base64 encoded string.
-
-- **platform variable**: `CLIENT_ID`
-
-  - Example: <br>
-
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?cid=CLIENT_ID(cid-scope-cookie-fallback-name)"
-  ></amp-pixel>
-
-  <amp-user-notification
-    layout="nodisplay"
-    id="user-consent"
-    data-show-if-href="https://foo.com/api/show"
-    data-dismiss-href="https://foo.com/api/dismissed"
-  >
-    This site uses cookies to personalize content.
-    <a href="">Learn more.</a>
-    <button on="tap:user-consent.dismiss">I accept</button>
-  </amp-user-notification>
-
-  <!-- Client ID is not provided until `user-consent` is dismissed -->
-  <amp-pixel
-    src="https://foo.com/pixel?cid=CLIENT_ID(cid-scope-cookie-fallback-name,user-consent)"
-  ></amp-pixel>
-  ```
-
-- **amp-analytics variable**: `${clientId}`
-  - Example usage: `${clientId(foo)}`
-  - Example value: `U6XEpUs3yaeQyR2DKATQH1pTZ6kg140fvuLbtl5nynbUWtIodJxP5TEIYBic4qcV`
-
-##### Client ID arguments
-
-You can pass the following arguments into the Client ID variable like a function. Spaces between arguments and values are not allowed.
-
-- `cid scope` (Required): The namespace for the Client ID.
-- `amp-user-notification id` (Optional): Use this argument to make the Client ID substitution dependent on the dismissal of a user notification shown to the visitor of the page. In amp-analytics, this is the same as using the [`data-consent-notification-id`](../extensions/amp-analytics/amp-analytics.md) attribute -- you may choose to use either one for the amp-analytics component.
-- `cookie name` (Optional): The name of the fallback cookie when the document is not served by an AMP proxy. If not provided, `cid scope` will be used as the cookie name.
-
-#### Content Load Time
-
-Provides the time the page takes to fire the `DOMContentLoaded` event from the time the previous page is unloaded. The value is in milliseconds.
-
-- **platform variable**: `CONTENT_LOAD_TIME`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?contentLoadTime=CONTENT_LOAD_TIME"
-  ></amp-pixel>
-  ```
-- **amp-analytics variable**: `${contentLoadTime}`
-  - Example value: `40`
-
-#### Counter
-
-Use `COUNTER(name)` to generate an index for the given request. Counts start at 1 and are per given `name`.
-
-- **platform variable**: `COUNTER`
-- **amp-analytics variable**: `${counter}`
-
-#### Document Charset
-
-Provides the character encoding of the current document.
-
-- **platform variable**: `DOCUMENT_CHARSET`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?charSet=DOCUMENT_CHARSET"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${documentCharset}`
-  - Example value: `UTF-8`
-
-#### Document Referrer
-
-Provides the referrer where the user came from, which is read from `document.referrer`. The value is empty for direct visitors.
-
-- **platform variable**: `DOCUMENT_REFERRER`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?referrer=DOCUMENT_REFERRER"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${documentReferrer}`
-  - Example value: `https://www.google.com`
-
-#### Domain Lookup Time
-
-Provides the time it took to perform the DNS lookup for the current page. The value is in milliseconds.
-
-- **platform variable**: `DOMAIN_LOOKUP_TIME`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?domainLookupTime=DOMAIN_LOOKUP_TIME"
-  ></amp-pixel>
-  ```
-- **amp-analytics variable**: `${domainLookupTime}`
-  - Example value: `1`
-
-#### DOM Interactive Time
-
-Provides the time the page to become interactive from the time the previous page is unloaded. The value is in milliseconds.
-
-- **platform variable**: `DOM_INTERACTIVE_TIME`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?domInteractiveTime=DOM_INTERACTIVE_TIME"
-  ></amp-pixel>
-  ```
-- **amp-analytics variable**: `${domInteractiveTime}`
-  - Example value: `40`
-
-#### Element Height
-
-Provides the height of the element specified by `visibilitySpec`.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${elementHeight}`
-
-#### Element Width
-
-Provides the width of the element specified by `visibilitySpec`.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${elementWidth}`
-
-#### Element X
-
-Provides the absolute X coordinate of the left edge of the element specified by `visibilitySpec`.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${elementX}`
-
-#### Element Y
-
-Provides the absolute Y coordinate of the top edge of the element specified by `visibilitySpec`.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${elementY}`
-
-#### Error Message
-
-Provides the message of the error that triggered an user error event. This variable is only available in a `trigger` of type `user-error`
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${errorMessage}`
-  - Example value: `Invalid multi-size data format`
-
-#### Experiment Variant
-
-Provide the allocated variant information from the `<amp-experiment>` component. The allocated variant name is returned. The variable resolves to string `none` if no variant is allocated.
-
-- **platform variable**: `VARIANT(experiment)`
-- **amp-analytics variable**: N/A
-
-#### Experiment Variants
-
-Provide the all variants information from the `<amp-experiment>` component. The variable will be serialized in the following format.
-
-- **platform variable**: `VARIANT(experiment)`
-- **amp-analytics variable**: N/A
-  - Example value: `{experiment1}.{variant}!{experiment2}.{variant}...`
-
-#### Error Name
-
-Provides the name of the error that triggered an user error event. This variable is only available in a `trigger` of type `user-error`
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${errorName}`
-  - Example value: `AMP-AD`
-
-#### External Referrer
-
-Provides the referrer where the user came from. Similar to [Document Referrer](#document_referrer), but the value is empty if user is navigated from same domain or the corresponding CDN proxy domain.
-Analytics vendor might prefer this value to Document Referrer for better session stitching, depending on the server side implementation.
-
-- **platform variable**: `EXTERNAL_REFERRER`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?referrer=EXTERNAL_REFERRER"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${externalReferrer}`
-  - Example value: `https://www.google.com`
-
-#### Extra URL Parameters
-
-Provides all the parameters that are defined in the [`extraUrlParams`](../extensions/amp-analytics/amp-analytics.md#extra-url-params) block of the amp-analytics config as a variable. If you use the `extraUrlParams` variable, the parameters are not appended to the end of the URL.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${extraUrlParams}`
-  - Example value: `foo=bar&baz=something`
-
-#### First Seen Time
-
-Provides the time when at least 1px of the element is on the screen for the first time since the page has become visible.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${firstSeenTime}`
-
-#### First Visible Time
-
-Provides the time when the element met visibility conditions for the first time since the page has become visible.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${firstVisibleTime}`
-
-#### Geolocation
-
-Provides the approximate, country level, location of the user provided by the [`amp-geo`](../extensions/amp-geo/amp-geo.md#variable-substitution) extension.
-
-- **platform variable**: AMP_GEO
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?domInteractiveTime=AMP_GEO"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${ampGeo}`
-  - Example value: `ca`
-
-#### Horizontal Scroll Boundary
-
-Provides the horizontal scroll boundary that triggered a scroll event. This variable is only available in a `trigger` of type `scroll`. The value of the boundary may be rounded based on the precision supported by the extension. For example, a boundary with value `1` and precision of `5` will result in value of var to be 0.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${horizontalScrollBoundary}`
-
-#### HTML Attributes
-
-Provides values of attributes of HTML elements inside of an amp-ad tag which match a given CSS selector.
-This only allows an amp-analytics tag to query attributes of HTML elements loaded by that amp-analytics tag's parent
-amp-ad tag. It will not allow a publisher to obtain information about the content of an ad, nor will it allow metrics
-of one ad to be seen by the provider of another ad on the page.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${htmlAttr}`
-
-Example:
-
-```json
-"requests": {
-    "sample_visibility_request": "//somewhere/imgData=${htmlAttr(img,src,decoding)}"
-},
-```
-
-This will return the "src" and "decoding" attributes of img tags in the ad.
-
-Caveats:
-
-- If the CSS selector matches 20 or more elements, an empty array will be returned. This is because traversing a
-  large list of elements is inefficient.
-- Attributes of at most 10 elements will be returned.
-- If an element matches the CSS selector but has none of the requested attributes, that element will not be
-  represented in the returned array.
-- The returned values will be in the form of a URL encoded JSON array of objects wherein the object keys are the
-  requested attribute names and the object values are the elements' values for those attributes.
-- The CSS selector may contain only letters (upper- and/or lower-case), numbers, hyphens, underscores, and periods.
-  [Issue #14252](https://github.com/ampproject/amphtml/issues/14252) has been created to address potential future demand for more complex CSS selectors.
-
-#### Initial Scroll Depth
-
-Provides the scroll depth at the time the element was loaded, relative to the target. The value returned will be top/inside/bottom, indicating whether the target was scrolled inside the viewport, was offscreen above the top of the viewport, or was offscreen below the bottom of the viewport.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${initialScrollDepth}`
-
-#### Intersection Ratio
-
-Provides the fraction of the target that is visible. The value will be between 0.0 and 1.0, inclusive. For more information, please see the [IntersectionObserverEntry.intersectionRatio](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/intersectionRatio) API documentation.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${intersectionRatio}`
-
-#### Intersection Rect
-
-Provides the bounds of the rectangle defining the portion of the selected element that is visible. For more information, please see the [IntersectionObserverEntry.intersectionRect](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/intersectionRect) API documentation.
-
-Example value:
-
-```javascript
-{"left":0,"top":74,"width":256,"height":226,"bottom":300,"right":256,"x":0,"y":74}
-```
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${intersectionRect}`
-
-#### Last Seen Time
-
-Provides the time when at least 1px of the element is on the screen for the last time since the page has become visible.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${lastSeenTime}`
-
-#### Last Visible Time
-
-Provides the time when the element met visibility conditions for the last time since the page has become visible.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${lastVisibleTime}`
-
-#### Load Time Visibility
-
-Provides the percentage of element visible in the viewport when the page has first become visible. This variable assumes that the page is scrolled to top.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${loadTimeVisibility}`
-
-#### Max Continuous Visible Time
-
-Provides the maximum amount of continuous time an element has met the `visibilitySpec` conditions at the time this ping is sent. Note that a ping with a `continuousTimeMin=1000` and `totalTimeMin=5000` that is visible for 1000ms, then not visible, then visible for 2000ms, then not, then visible for 1000ms, then not, then visible for 1020ms will report 2000 for this number as that is the max continuous visible time, even if it is not the current continuous visible time (1020 in this example).
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${maxContinuousVisibleTime}`
-
-#### Max Scroll Depth
-
-Provides the maximum amount that the user has scrolled down the page, relative to the target. The value returned will be top/inside/bottom, indicating whether the target was scrolled inside the viewport, was offscreen above the top of the viewport, or was offscreen below the bottom of the viewport.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${maxScrollDepth}`
-
-#### Max Visible Percentage
-
-Provides the maximum visible percentage over the time that `visibilitySpec` conditions were met. For example, a ping where the element was 100%, then off the page, then 100% will report this value as 100. A ping with `visiblePercentageMax=50` undergoing the same transitions would report somewhere between 0 and 50 since any time when the element was 100% on the page would not be counted.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${maxVisiblePercentage}`
-
-#### Min Visible Percentage
-
-Provides the minimum visible percentage over the time that `visibilitySpec` conditions were met. For example, a ping where the element was 100%, then off the page, then 100% will report this value as 0. A ping with `visiblePercentageMin=50` condition undergoing the same transitions would report somewhere between 50 and 100 since any time when the element was 0% to 50% on the page would not be counted.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${minVisiblePercentage}`
-
-#### Navigation Redirect Count
-
-Provides the number of redirects since the last non-redirect navigation.
-For more information, see the W3C Navigation Timing API [PerformanceNavigation interface](https://www.w3.org/TR/navigation-timing/#performancenavigation).
-
-- **platform variable**: `NAV_REDIRECT_COUNT`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?nrc=NAV_REDIRECT_COUNT"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${navRedirectCount}`
-  - Example value: `0`
-
-#### Navigation Timing
-
-Provides access to metrics from the browser's PerformanceTiming interface. See the W3C Navigation Timing API [PerformanceTiming interface](https://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface) documentation for attribute names and definitions.
-
-- **platform variable**: `NAV_TIMING`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?navStart=NAV_TIMING(navigationStart)&amp;pageLoadTime=NAV_TIMING(navigationStart,loadEventStart)"
-  ></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?navStart=1451606400000&pageLoadTime=100`.
-- **amp-analytics variable**: `${navTiming}`
-  - Example 1: `${navTiming(navigationStart)}` results in value: `1451606400000`
-  - Example 2: `${navTiming(navigationStart,responseStart)}` results in value: `10`
-
-##### Navigation Timing arguments
-
-You can pass the following arguments into the Navigation Timing variable like a function. Spaces between arguments and values are not allowed.
-
-- `startEvent` (Required): The name of the [PerformanceTiming interface](https://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface) attribute that corresponds to the start event.
-- `endEvent` (Optional): The name of the [PerformanceTiming interface](https://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface) attribute that corresponds to the end event. If `endEvent` is passed, the value will be the time difference between the start and end events.
-
-If both `startEvent` and `endEvent` arguments are passed, the value will be the time elapsed between the two events. Otherwise, if only `startEvent` argument is passed, the value will be the timestamp of the given event.
-The value is in milliseconds.
-
-#### Navigation Type
-
-Provides the type of the last non-redirect navigation in the current browsing context. See the W3C Navigation Timing API [PerformanceNavigation interface](https://www.w3.org/TR/navigation-timing/#performancenavigation) for more information.
-
-- **platform variable**: `NAV_TYPE`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?nt=NAV_TYPE"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${navType}`
-  - Example value: `1`
-
-#### Page Download Time
-
-Provides the time between receiving the first and the last byte of response. The value is in milliseconds.
-
-- **platform variable**: `PAGE_DOWNLOAD_TIME`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?pageDownloadTime=PAGE_DOWNLOAD_TIME"
-  ></amp-pixel>
-  ```
-- **amp-analytics variable**: `${pageDownloadTime}`
-  - Example value: `100`
-
-#### Page Load Time
-
-Provides the time taken to load the whole page. The value is calculated from the time `unload` event handler on previous page ends to the time `load` event for the current page is fired. If there is no previous page, the duration starts from the time the user agent is ready to fetch the document using an HTTP request. The value is in milliseconds.
-
-- **platform variable**: `PAGE_LOAD_TIME`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?pageLoadTime=PAGE_LOAD_TIME"
-  ></amp-pixel>
-  ```
-- **amp-analytics variable**: `${pageLoadTime}`
-  - Example value: `220`
-
-#### Page View ID
-
-Provides a string that is intended to be random and likely to be unique per URL, user and day.
-
-- **platform variable**: `PAGE_VIEW_ID`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?pid=PAGE_VIEW_ID"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${pageViewId}`
-  - Example value: `978`
-
-#### Page View ID 64
-
-Provides a string that is intended to be random with a high entropy and likely to be unique per URL, user and day.
-
-- **platform variable**: `PAGE_VIEW_ID_64`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?pid=PAGE_VIEW_ID_64"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${pageViewId64}`
-  - Example value: `U6XEpUs3yaeQyR2DKATQH1pTZ6kg140fvuLbtl5nynb`
-
-#### Query Parameter
-
-Pulls a value from the provided query string parameter.
-
-- **platform variable**: `QUERY_PARAM`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?bar=QUERY_PARAM(baz,biz)"></amp-pixel>
-  ```
-  If a `baz` query string parameter is provided, the corresponding value is inserted into the pixel src; otherwise, the default `biz` is used.
-- **amp-analytics variable**: `${queryParam}`
-  - Example 1: `${queryParam(foo)}`: If `foo` is available, its associated value is returned; otherwise, an empty string is returned.
-  - Example 2: `${queryParam(foo,bar)}`: if `foo` is available, its associated value is returned, otherwise `bar` is returned.
-
-##### Query Parameter arguments
-
-You can pass the following arguments into the Query Parameter variable like a function. Spaces between arguments and values are not allowed.
-
-- `param` (Required): The key for the query string parameter to be inserted.
-- `defaultValue` (Optional): The value to use if the provided key is not present on the query string. Defaults to an empty value ("").
-
-#### Random
-
-Provides a random value each time a request is constructed.
-
-- **platform variable**: `RANDOM`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?0.8390278471201` where the \$RANDOM value is randomly generated upon each impression.
-- **amp-analytics variable**: `${random}`
-  - Example value: `0.12345632345`
-
-#### Redirect Time
-
-Provides the time taken to complete all the redirects before the request for the current page is made. The value is in milliseconds.
-
-- **platform variable**: `REDIRECT_TIME`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?redirectTime=REDIRECT_TIME"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${redirectTime}`
-  - Example value: `0`
-
-#### Request Count
-
-Provides the number of requests sent out from a particular `amp-analytics` tag. This value can be used to reconstruct the sequence in which requests were sent from a tag. The value starts from 1 and increases monotonically. Note that there may be a gap in `requestCount` numbers if the request sending fails due to network issues.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${requestCount}`
-  - Example value: `6`
-
-#### Screen Color Depth
-
-Provides the screen color depth provided by the browser.
-
-- **platform variable**: `SCREEN_COLOR_DEPTH`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?colorDepth=SCREEN_COLOR_DEPTH"
-  ></amp-pixel>
-  ```
-- **amp-analytics variable**: `${screenColorDepth}`
-  - Example value: `24`
-
-#### Screen Height
-
-Provides the screen height in pixels. The value is retrieved from `window.screen.height`.
-
-- **platform variable**: `SCREEN_HEIGHT`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?sh=SCREEN_HEIGHT"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${screenHeight}`
-  - Example value: `1600`
-
-#### Screen Width
-
-Provides the screen width in pixels. The value is retrieved from `window.screen.width`.
-
-- **platform variable**: `SCREEN_WIDTH`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?sw=SCREEN_WIDTH"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${screenWidth}`
-  - Example value: `2560`
-
-#### Scroll Height
-
-Provides the total height of the page in pixels.
-
-- **platform variable**: `SCROLL_HEIGHT`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?scrollHeight=SCROLL_HEIGHT"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${scrollHeight}`
-  - Example value: `400`
-
-#### Scroll Left
-
-Provides the number of pixels that the user has scrolled from left.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${scrollLeft}`
-  - Example value: `100`
-
-#### Scroll Top
-
-Provides the number of pixels that the user has scrolled from top.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${scrollTop}`
-  - Example value: `0`
-
-#### Scroll Width
-
-Provides the total width of the page in pixels.
-
-- **platform variable**: `SCROLL_WIDTH`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?scrollWidth=SCROLL_WIDTH"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${scrollWidth}`
-  - Example value: `600`
-
-#### Server Response Time
-
-Provides the time taken by the server to start sending the response after it starts receiving the request. The value is in milliseconds.
-
-- **platform variable**: `SERVER_RESPONSE_TIME`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?serverResponseTime=SERVER_RESPONSE_TIME"
-  ></amp-pixel>
-  ```
-- **amp-analytics variable**: `${serverResponseTime}`
-  - Example value: `10`
-
-#### Source URL
-
-Parses and provides the source URL of the current document to the URL.
-
-The source URL is extracted from the proxy URL if the document is being served from a _known_ proxy. Otherwise, the original document URL is returned. For example, if the URL is served via the proxy `https://cdn.ampproject.org` from the URL `https://cdn.ampproject.org/c/s/example.com/page.html`, then `SOURCE_URL` would return `https://example.com/page.html`.
-
-- **platform variable**: `SOURCE_URL`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?href=SOURCE_URL"></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?href=https%3A%2F%2Fpinterest.com%2F`.
-- **amp-analytics variable**: `${sourceUrl}`
-  - Example value: `https%3A%2F%2Fpinterest.com%2F`
-
-#### Source Host
-
-Parses and provides the source URL's host. See the description of [Source URL](#source-url) for more details.
-
-- **platform variable**: `SOURCE_HOST`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?host=SOURCE_HOST"></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?host=pinterest.com:9000`.
-- **amp-analytics variable**: `${sourceHost}`
-  - Example value: `example.com`
-
-#### Source Hostname
-
-Parses and provides the source URL's hostname. See the description of [Source URL](#source-url) for more details.
-
-- **platform variable**: `SOURCE_HOSTNAME`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?host=SOURCE_HOSTNAME"></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?host=pinterest.com`.
-- **amp-analytics variable**: `${sourceHostname}`
-  - Example value: `example.com`
-
-#### Source Path
-
-Parses and provides the source URL's path. See the description of [Source URL](#source-url) for more details.
-
-- **platform variable**: `SOURCE_PATH`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?path=SOURCE_PATH"></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?path=%2Fpage2.html`.
-- **amp-analytics variable**: `${sourcePath}`
-  - Example value: `%2Fpage2.html`
-
-#### TCP Connection Time
-
-Provides the time it took for HTTP connection to be setup. The duration includes connection handshake time and SOCKS authentication. The value is in milliseconds.
-
-- **platform variable**: `TCP_CONNECT_TIME`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?tcpConnectTime=TCP_CONNECT_TIME"
-  ></amp-pixel>
-  ```
-- **amp-analytics variable**: `${tcpConnectTime}`
-  - Example value: `10`
-
-#### Title
-
-Provides the title of the current document.
-
-- **platform variable**: `TITLE`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?title=TITLE"></amp-pixel>
-  ```
-  Makes a request to something like `https://foo.com/pixel?title=Breaking%20News`.
-- **amp-analytics variable**: `${title}`
-  - Example value: `The New York Times - Breaking News, World News...`
-
-#### Timestamp
-
-Provides the number of milliseconds that have elapsed since 1970. (Epoch time)
-
-- **platform variable**: `TIMESTAMP`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?timestamp=TIMESTAMP"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${timestamp}`
-  - Example value: `10`
-
-#### Timezone
-
-Provides the user's time-zone offset from UTC, in minutes.
-
-- **platform variable**: `TIMEZONE`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?tz=TIMEZONE"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${timezone}`
-  - Example value: `480` for [Pacific Standard Time](https://en.wikipedia.org/wiki/Pacific_Time_Zone).
-
-#### Timezone Code
-
-Provides the user's IANA time-zone code (if available).
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${timezoneCode}`
-  - Example value: `Europe/Rome`.
-
-#### Total Engaged Time
-
-Provides the total time (in seconds) the user has been engaged with the page since the page first became visible in the viewport. Total engaged time will be 0 until the page first becomes visible. This variable requires the [amp-analytics](../extensions/amp-analytics/amp-analytics.md) extension to be present on the page.
-
-- **platform variable**: `TOTAL_ENGAGED_TIME`
-- **amp-analytics variable**: `${totalEngagedTime}`
-  - Example value: `36`
-
-#### Incremental Engaged Time
-
-Provides the time (in seconds) the user has been engaged with the page since the last time it was reset. It takes two arguments. The first is the name of the timer, the second is whether or not to reset it (it is optional and defaults to true). Incremental engaged time will be 0 until the page first becomes visible. This variable requires the [amp-analytics](../extensions/amp-analytics/amp-analytics.md) extension to be present on the page.
-
-- **platform variable**: `INCREMENTAL_ENGAGED_TIME`
-- **amp-analytics variable**: `${incrementalEngagedTime(foo,false)}`
-  - Example value: `36`
-
-#### Total Time
-
-Provides the total time from the time page has become visible to the time a ping was sent out. Only applicable to visible trigger events.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${totalTime}`
-
-#### Total Visible Time
-
-Provides the total time for which the element has met the `visiblitySpec`conditions at time this ping is sent.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${totalVisibleTime}`
-
-#### Timer Duration
-
-Provides the duration of the triggered timer since last start or interval in milliseconds. For timers stopped before a full interval completes, this will report the partial time.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${timerDuration}`
-
-#### Timer Start Time
-
-Provides the start time of the triggered timer in milliseconds from epoch. Resets only on timer start.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${timerStart}`
-
-#### User Agent
-
-Provides a string representing the user agent of the requesting software, usually tells about user's browser operating system.
-
-- **platform variable**: `USER_AGENT`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?sh=USER_AGENT"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${userAgent}`
-  - Example value: `Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0`
-
-#### Vertical Scroll Boundary
-
-Provides the vertical scroll boundary that triggered a scroll event. This variable is only available in a `trigger` of type `scroll`. The value of the boundary may be rounded based on the precision supported by the extension. For example, a boundary with value `1` and precision of `5` will result in value of var to be 0.
-
-- **platform variable**: N/A
-- **amp-analytics variable**: `${verticalScrollBoundary}`
-
-#### Viewer
-
-Provides an identifier for the viewer that contains the AMP document. An empty string is provided when the document is loaded directly in the browser or if the id is not found.
-
-- **platform variable**: `VIEWER`
-  - Example: <br>
-  ```html
-  <amp-pixel src="https://foo.com/pixel?viewer=VIEWER"></amp-pixel>
-  ```
-- **amp-analytics variable**: `${viewer}`
-  - Example value: `www.google.com`
-
-#### Viewport Height
-
-Provides the viewport height in pixels available for the page rendering. In contrast to `AVAILABLE_SCREEN_HEIGHT`, this value takes window size and zooming into account.
-
-- **platform variable**: `VIEWPORT_HEIGHT`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?viewportHeight=VIEWPORT_HEIGHT"
-  ></amp-pixel>
-  ```
-- **amp-analytics variable**: `${viewportHeight}`
-  - Example value: `1600`
-
-#### Viewport Width
-
-Provides the viewport width in pixels available for the page rendering. In contrast to `AVAILABLE_SCREEN_WIDTH`, this value takes window size and zooming into account.
-
-- **platform variable**: `VIEWPORT_WIDTH`
-  - Example: <br>
-  ```html
-  <amp-pixel
-    src="https://foo.com/pixel?viewportHeight=VIEWPORT_HEIGHT"
-  ></amp-pixel>
-  ```
-- **amp-analytics variable**: `${viewportWidth}`
-  - Example value: `2560`
diff --git a/spec/amp-versioning-policy.md b/spec/amp-versioning-policy.md
deleted file mode 100644
index 8fff261f2ea5b..0000000000000
--- a/spec/amp-versioning-policy.md
+++ /dev/null
@@ -1,82 +0,0 @@
-# AMP versioning and deprecations policy
-
-## Goals
-
-- Reduce overall JS URL entropy. AMP aims to provide as few versions of the JS library and extensions as possible to improve cache hit rates for these requests.
-- Avoid breaking existing pages.
-- Keep all users of AMP on secure and updated versions of the library.
-- Enable all AMP developers to keep their AMP pages up-to-date.
-
-## Versioning
-
-- The AMP JS library and its extensions are versioned. There is also an **[AMP release](https://github.com/ampproject/amphtml/releases/)** that corresponds to the precise code. Each major and minor version may correspond to many AMP releases.
-- AMP is **released** about once per week and each release has a unique version number. With each release, AMP pages are rendered with the latest code for the respective major/minor versions of the AMP JS library and extensions.
-
-### AMP JS library
-
-The AMP JS library is distributed via its major version only. The major version is expected to change rarely if ever (on the order of less than once per year).
-
-### AMP extensions
-
-Each AMP extension is versioned independently. Publishers of AMP documents can choose the major and minor version of an extension; they cannot choose the patch version.
-
-- Extension minor versions may be changed for breaking behavior changes _without_ breaking API changes.
-- Extension major versions _must_ be changed for any breaking API changes.
-
-## Breaking changes
-
-Breaking changes must be implemented in a new major or minor version of an extension or (more rarely) the AMP JS library, except in rare cases<sup>1</sup>.
-
-Breaking changes are defined as:
-
-- Changes to exposed API semantics, e.g. supported attributes in an AMP extension.
-- Changes to CSS included in AMP that are not backward compatible.
-- Changes to the DOM structure (elements, attributes and attribute values) generated by AMP extensions that are not backward compatible.
-- Changes to AMP validation rules that are not backward compatible.
-
-The following are **not** considered breaking changes:
-
-- Changes to elements and their children including their CSS if the element name starts with `i-`.
-- Changes to attribute and class names starting with `i-` (but this doesn't mean that CSS backward compatibility may be broken with this mechanism, which would be considered a breaking change).
-
-<sup>1</sup>The following exceptions may be implemented without a new version:
-
-- Changes required to maintain the security of AMP pages.
-- Changes that affect fewer than 0.1% of crawler-accessible AMP pages.
-- Changes that follow the deprecations process below.
-
-## Deprecations
-
-In rare cases, it may be necessary to remove an existing feature or API. Such breaking changes must follow the following AMP deprecation process prior to removal.
-
-Deprecations must be publicly discussed and provide significant user benefit that justifies additional work for page developers.
-
-The process for deprecations is similar to the [process for significant changes](https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#process-for-significant-changes), but has some unique requirements:
-
-- [File](https://github.com/ampproject/amphtml/issues/new/choose) an [Intent-to-Deprecate (I2D) issue](https://github.com/ampproject/amphtml/labels/INTENT%20TO%20DEPRECATE) describing the feature that is being deprecated, the motivation for deprecating it, and the plan for deprecating/removing the feature.
-  - If you intend to remove the feature immediately after the warning period described below you may make your Intent-to-Deprecate issue an Intent-to-Deprecate-and-Remove issue (by modifying the title and adding the [INTENT TO REMOVE label](https://github.com/ampproject/amphtml/labels/INTENT%20TO%20REMOVE) to it).
-  - Otherwise if you do not have a concrete timeline for removal you may file a separate [Intent-to-Remove (I2R) issue](https://github.com/ampproject/amphtml/labels/INTENT%20TO%20REMOVE) to track removal of the feature.
-- Allow at least 2 weeks of open discussion after the I2D is created before proceeding with the deprecation of the feature.
-- The deprecation and removal requires approval from at least 3 members of the [Approvers Working Group](https://github.com/ampproject/wg-approvers).
-- Apply new behavior to old content in a way that minimizes breakage.
-- [Announce](#announcements) the deprecation on the mailing list and on [Slack](https://amphtml.slack.com)
-- Start warning for pages that might break via the developer console.
-- Give developers at least 6 weeks after your deprecation warning is in production to apply changes before removing the feature.
-- If you did not include removal in your I2D, file a separate Intent-to-Remove (I2R) when you are ready to remove the deprecated feature.
-
-If an underlying backend service has itself been turned down, then the given component or integration may be neutered immediately without breaking the validation.
-
-### Version deprecations
-
-Old versions of the AMP JS library and extensions may eventually be declared invalid by the AMP Validator. Such changes are breaking and must follow the deprecations process above. Additional rules also constrain the timelines of version deprecations:
-
-- A version must not be deprecated until a new version is released and stable for at least 1 month.
-- A version must not be invalidated until it has been deprecated for at least 1 year.
-
-The binaries of old versions must not be removed except in the case of security issues.
-
-## Announcements
-
-Changes that may break existing pages (including those where the number of broken pages is assumed to be very small) should be announced via the [amphtml-announce@googlegroups.com](https://groups.google.com/forum/#!forum/amphtml-announce) mailing list and on [Slack](https://amphtml.slack.com).
-
-Fixes that address security or privacy concerns may in some cases only be announced after the change was rolled out.
diff --git a/spec/amp-video-interface.md b/spec/amp-video-interface.md
deleted file mode 100644
index e13b658485548..0000000000000
--- a/spec/amp-video-interface.md
+++ /dev/null
@@ -1,104 +0,0 @@
-# Video in AMP
-
-Most video player components in AMP implement the [`VideoInterface`](https://github.com/ampproject/amphtml/blob/master/src/video-interface.js) API. This means
-that a set of features is available in all of these components, either completely
-or partially.
-
-This document describes all the features (**work in progress, incomplete**) that
-these players implement.
-
-## Players
-
-### Generic
-
-- [amp-video](https://amp.dev/documentation/components/amp-video)
-- [amp-video-iframe](https://amp.dev/documentation/components/amp-video-iframe)
-
-### For 3rd party services
-
-- [amp-3q-player](https://amp.dev/documentation/components/amp-3q-player)
-- [amp-brid-player](https://amp.dev/documentation/components/amp-brid-player)
-- [amp-brightcove](https://amp.dev/documentation/components/amp-brightcove)
-- [amp-dailymotion](https://amp.dev/documentation/components/amp-dailymotion)
-- [amp-delight-player](https://amp.dev/documentation/components/amp-delight-player)
-- [amp-gfycat](https://amp.dev/documentation/components/amp-gfycat)
-- [amp-ima-video](https://amp.dev/documentation/components/amp-ima-video)
-- [amp-minute-media-player](https://amp.dev/documentation/components/amp-minute-media-player)
-- [amp-mowplayer](https://amp.dev/documentation/components/amp-mowplayer)
-- [amp-nexxtv-player](https://amp.dev/documentation/components/amp-nexxtv-player)
-- [amp-ooyala-player](https://amp.dev/documentation/components/amp-ooyala-player)
-- [amp-powr-player](https://amp.dev/documentation/components/amp-powr-player)
-- [amp-vimeo](https://amp.dev/documentation/components/amp-vimeo)
-- [amp-viqeo-player](https://amp.dev/documentation/components/amp-viqeo-player)
-- [amp-wistia-player](https://amp.dev/documentation/components/amp-wistia-player)
-- [amp-youtube](https://amp.dev/documentation/components/amp-youtube)
-
-<a id="analytics"></a>
-
-## Analytics
-
-See [video analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-video-analytics.md).
-
-<a id="autoplay"></a>
-
-## Autoplay
-
-attribute: **`autoplay`**
-
-If this attribute is present, and the browser supports autoplay:
-
-- the video is automatically muted before autoplay starts
-- when the video is scrolled out of view, the video is paused
-- when the video is scrolled into view, the video resumes playback
-- when the user taps the video, the video is unmuted
-- if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.
-
-For an example, visit [AMP By Example](https://amp.dev/documentation/examples/components/amp-video/#autoplay).
-
-<a id="docking"></a>
-
-## Docking (minimize to corner)
-
-attribute: **`dock`**
-
-This attribute is currently only supported for `amp-brightcove`, `amp-dailymotion`, `amp-delight-player`, `amp-ima-video`, `amp-video`, `amp-video-iframe` and `amp-youtube`.
-
-If this attribute is present and the video is playing manually, the video will
-be "minimized" and fixed to a corner when the user scrolls out of the video
-component's visual area.
-
-- The video can be dragged and repositioned by the user on a different corner.
-- Multiple videos on the same page can be docked.
-
-In order to use this attribute, the [`amp-video-docking`](https://amp.dev/documentation/components/amp-video-docking)
-extension script must be present:
-
-```html
-<script
-  async
-  custom-element="amp-video-docking"
-  src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"
-></script>
-```
-
-For more details, see [documentation on the docking extension itself.](https://amp.dev/documentation/components/amp-video-docking)
-
-<a id="rotate-to-fullscreen"></a>
-
-## Rotate-to-fullscreen
-
-attribute: **`rotate-to-fullscreen`**
-
-This attribute is currently only supported for `amp-video`, `amp-ima-video` and `amp-dailymotion`.
-
-If this attribute is present and a video is playing manually (i.e. user initiated playback, or tapped on the video after autoplay), the video displays fullscreen after the user rotates their device into landscape mode, provided that the video is visible.
-
-When multiple videos with the `rotate-to-fullscreen` attribute set are visible
-at the same time, heuristics are employed to select which video to display in
-fullscreen. These heuristics are applied as follows, in descending priority:
-
-1. If a video is playing manually (i.e. user initiated playback, or tapped on the video after autoplay)
-2. If the visible percentage of the video is higher.
-3. If a video is closer to the center of the viewport.
-4. Everything else failing, select the video that is closest to the top of the
-   viewport.
diff --git a/spec/auto-lightbox.md b/spec/auto-lightbox.md
deleted file mode 100644
index 9a8145dd000c3..0000000000000
--- a/spec/auto-lightbox.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# Auto-lightbox
-
-The standard AMP runtime finds elligible [`amp-img`](https://amp.dev/documentation/components/amp-img)
-elements and automatically makes them clickable in order to open an [`amp-lightbox-gallery`](https://amp.dev/documentation/components/amp-lightbox-gallery)
-for enhanced user experience that includes panning and pinch-to-zoom.
-
-Including the [`amp-lightbox-gallery` extension script](https://amp.dev/documentation/components/amp-lightbox-gallery/) and [using it explicitly](https://amp.dev/documentation/components/amp-lightbox-gallery/#usage) (by setting the `lightbox` attribute on a valid element) disables the auto-lightbox treatment on a document.
-
-Otherwise, it's applied only on documents that contain either of the following:
-
-- **a.** an [OpenGraph](http://ogp.me/) `<meta property="og:type" content="article">` tag
-- **b.** ...or a `@type` field declared in [JSON+LD schema](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/discovery#use-schema.org-for-most-search-engines)
-  that's any of the following:
-  - `Article`
-  - `NewsArticle`
-  - `BlogPosting`
-  - `LiveBlogPosting`
-  - `DiscussionForumPosting`
-
-## Excluded images
-
-Images are clickable by default and should not be automatically lightboxed in any of the following cases:
-
-- the image or any of its ancestors has an [`on="tap: ..."` action](./amp-actions-and-events.md)
-- any of its ancestors is `a[href]`, `amp-selector [option]` or `button`
-
-They're also excluded when they're inside any of the following:
-
-- `amp-script`
-- `amp-story`
-- `amp-lightbox`
-- `amp-carousel` will likely be treated specially in the future, but as of now, it's excluded.
-
-## Disabling treatment explicitly
-
-The runtime uses certain criteria to determine whether an `amp-img` can be lightboxed. By default, some
-sizing constraints have to be met, and the `amp-img` should not already be clickable.
-
-However, if you find this treatment undesirable, you can disable it on any element from `<body>` down by setting
-the `data-amp-auto-lightbox-disable` attribute.
-
-For example, if you'd like to disable it on a particular image, you can do:
-
-```html
-<amp-img src="my-image.png" ... data-amp-auto-lightbox-disable> </amp-img>
-```
-
-To disable it on a particular document section:
-
-```html
-<section data-amp-auto-lightbox-disable>
-  <!-- No elements inside this tree will be automatically lightboxed -->
-</section>
-```
-
-Or to disable it for your entire document altogether:
-
-```html
-<body data-amp-auto-lightbox-disable>
-  <!-- No elements in the document will be automatically lightboxed -->
-</body>
-```
-
-If you'd like manual tuning of disabled/enabled images and/or grouping, please use
-[`amp-lightbox-gallery`](https://amp.dev/documentation/components/amp-lightbox-gallery)
-directly.
diff --git a/spec/email/OWNERS b/spec/email/OWNERS
deleted file mode 100644
index ed83f39cedae4..0000000000000
--- a/spec/email/OWNERS
+++ /dev/null
@@ -1,10 +0,0 @@
-// For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
-
-{
-  rules: [
-    {
-      owners: [{name: 'ampproject/wg-amp4email'}],
-    },
-  ],
-}
diff --git a/spec/email/amp-email-css.md b/spec/email/amp-email-css.md
deleted file mode 100644
index 2c13680cc8e88..0000000000000
--- a/spec/email/amp-email-css.md
+++ /dev/null
@@ -1,346 +0,0 @@
-<!---
-Copyright 2018 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.
--->
-
-# Supported CSS in AMP for Email
-
-This document outlines the CSS features currently supported inside AMP emails.
-
-## Applying CSS
-
-### Internal stylesheet
-
-When using an internal stylesheet, the CSS is specified inside a single
-`<style amp-custom>` tag located in the `<head>` tag of the email.
-
-### Inline styles
-
-In addition to an internal stylesheet, inline styles can be specified on any
-element using the [`style` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-style).
-
-### External stylesheet
-
-External stylesheets are **not** supported in AMP for Email.
-
-Using `<link rel="stylesheet" href="...">` is not allowed anywhere in the email.
-
-## Supported CSS selectors
-
-### Simple selectors
-
-- [Type selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) `elementname`
-- [Class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) `.classname`
-- [ID selector](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors) `#idname`
-- [Universal selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) `*`
-
-Warning: [Attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
-`[attr=value]` are not currently supported by all email providers.
-
-### Combinators
-
-- [Adjacent sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator) `A + B`
-- [General sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) `A ~ B`
-- [Child combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) `A > B`
-- [Descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) `A B`
-
-### Pseudo-classes
-
-- [`:active`](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)
-- [`:checked`](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked)
-- [`:default`](https://developer.mozilla.org/en-US/docs/Web/CSS/:default)
-- [`:disabled`](https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled)
-- [`:empty`](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty)
-- [`:enabled`](https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled)
-- [`:first-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child)
-- [`:first-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type)
-- [`:focus`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
-- [`:focus-within`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)
-- [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover)
-- [`:in-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range)
-- [`:indeterminate`](https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate)
-- [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid)
-- [`:last-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child)
-- [`:last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type)
-- [`:last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type)
-- [`:not`](https://developer.mozilla.org/en-US/docs/Web/CSS/:not)
-- [`:nth-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)
-- [`:nth-last-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child)
-- [`:nth-last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type)
-- [`:nth-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type)
-- [`:only-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child)
-- [`:only-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type)
-- [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/:optional)
-- [`:out-of-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range)
-- [`:read-only`](https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only)
-- [`:read-write`](https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write)
-- [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required)
-- [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid)
-
-## Supported CSS properties
-
-- [`align-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
-- [`align-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)
-- [`azimuth`](https://developer.mozilla.org/en-US/docs/Web/CSS/azimuth)
-- [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
-- [`background-attachment`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment)
-- [`background-blend-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode)
-- [`background-clip`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip)
-- [`background-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
-- [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)
-- [`background-origin`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin)
-- [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)
-- [`background-repeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat)
-- [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)
-- [`border`](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
-- [`border-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom)
-- [`border-bottom-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color)
-- [`border-bottom-left-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius)
-- [`border-bottom-right-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius)
-- [`border-bottom-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style)
-- [`border-bottom-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width)
-- [`border-collapse`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse)
-- [`border-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)
-- [`border-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left)
-- [`border-left-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color)
-- [`border-left-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style)
-- [`border-left-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width)
-- [`border-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
-- [`border-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right)
-- [`border-right-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color)
-- [`border-right-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style)
-- [`border-right-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width)
-- [`border-spacing`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing)
-- [`border-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style)
-- [`border-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top)
-- [`border-top-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color)
-- [`border-top-left-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius)
-- [`border-top-right-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius)
-- [`border-top-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style)
-- [`border-top-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width)
-- [`border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width)
-- [`bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom)
-- [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
-- [`box-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)
-- [`break-after`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-after)
-- [`break-before`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-before)
-- [`break-inside`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside)
-- [`caption-side`](https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side)
-- [`caret-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color)
-- [`clear`](https://developer.mozilla.org/en-US/docs/Web/CSS/clear)
-- [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
-- [`color-adjust`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-adjust)
-- [`column-count`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-count)
-- [`column-fill`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill)
-- [`column-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
-- [`column-rule`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule)
-- [`column-rule-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color)
-- [`column-rule-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style)
-- [`column-rule-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width)
-- [`column-span`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span)
-- [`column-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-width)
-- [`columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/columns)
-- [`counter-increment`](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment)
-- [`counter-reset`](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset)
-- [`cursor`](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)
-- [`direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/direction)
-- [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
-- `elevation`
-- [`empty-cells`](https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells)
-- [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
-- [`flex`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
-- [`flex-basis`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis)
-- [`flex-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)
-- [`flex-flow`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow)
-- [`flex-grow`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)
-- [`flex-shrink`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
-- [`flex-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)
-- [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float)
-- [`font`](https://developer.mozilla.org/en-US/docs/Web/CSS/font)
-- [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)
-- [`font-feature-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings)
-- [`font-kerning`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning)
-- [`font-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
-- [`font-size-adjust`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust)
-- [`font-stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch)
-- [`font-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style)
-- [`font-synthesis`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis)
-- [`font-variant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant)
-- [`font-variant-alternates`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates)
-- [`font-variant-caps`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps)
-- [`font-variant-east-asian`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian)
-- [`font-variant-ligatures`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)
-- [`font-variant-numeric`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)
-- [`font-variation-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings)
-- [`font-weight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
-- [`grid`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid)
-- [`grid-area`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)
-- [`grid-auto-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)
-- [`grid-auto-flow`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)
-- [`grid-auto-rows`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)
-- [`grid-column`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)
-- [`grid-column-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)
-- [`grid-column-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)
-- [`grid-row`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)
-- [`grid-row-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)
-- [`grid-row-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)
-- [`grid-template`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template)
-- [`grid-template-areas`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
-- [`grid-template-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
-- [`grid-template-rows`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)
-- [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height)
-- [`hyphens`](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)
-- [`image-orientation`](https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation)
-- `image-resolution`
-- [`inline-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size)
-- [`isolation`](https://developer.mozilla.org/en-US/docs/Web/CSS/isolation)
-- [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
-- [`justify-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)
-- [`justify-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)
-- [`left`](https://developer.mozilla.org/en-US/docs/Web/CSS/left)
-- [`letter-spacing`](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing)
-- [`line-break`](https://developer.mozilla.org/en-US/docs/Web/CSS/line-break)
-- [`line-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
-- [`list-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style)
-- [`list-style-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position)
-- [`list-style-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type)
-- [`margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)
-- [`margin-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom)
-- [`margin-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left)
-- [`margin-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right)
-- [`margin-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top)
-- [`max-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)
-- [`max-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)
-- [`min-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)
-- [`min-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width)
-- [`mix-blend-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)
-- [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)
-- [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)
-- [`offset-distance`](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance)
-- [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
-- [`order`](https://developer.mozilla.org/en-US/docs/Web/CSS/order)
-- [`outline`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)
-- [`outline-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color)
-- [`outline-offset`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset)
-- [`outline-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style)
-- [`outline-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width)
-- [`overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)
-- [`overflow-x`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x)
-- [`overflow-y`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y)
-- [`overflow-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap)
-- [`padding`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)
-- [`padding-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom)
-- [`padding-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left)
-- [`padding-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right)
-- [`padding-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top)
-- `pause`
-- `pause-after`
-- `pause-before`
-- [`perspective`](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective)
-- [`perspective-origin`](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin)
-- `pitch`
-- `pitch-range`
-- [`place-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items)
-- [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
-- [`quotes`](https://developer.mozilla.org/en-US/docs/Web/CSS/quotes)
-- [`resize`](https://developer.mozilla.org/en-US/docs/Web/CSS/resize)
-- `richness`
-- [`right`](https://developer.mozilla.org/en-US/docs/Web/CSS/right)
-- `speak`
-- `speak-header`
-- `speak-numeral`
-- `speak-punctuation`
-- `speech-rate`
-- `stress`
-- [`table-layout`](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)
-- [`text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
-- [`text-align-last`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last)
-- [`text-combine-upright`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright)
-- [`text-decoration`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)
-- [`text-decoration-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color)
-- [`text-decoration-line`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line)
-- [`text-decoration-skip`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip)
-- [`text-decoration-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style)
-- [`text-emphasis`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis)
-- [`text-emphasis-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color)
-- [`text-emphasis-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position)
-- [`text-emphasis-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style)
-- [`text-indent`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)
-- [`text-justify`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-justify)
-- [`text-orientation`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation)
-- [`text-overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)
-- [`text-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow)
-- [`text-transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)
-- [`text-underline-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position)
-- [`top`](https://developer.mozilla.org/en-US/docs/Web/CSS/top)
-- [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
-- [`transform-box`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box)
-- [`transform-origin`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)
-- [`transform-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style)
-- [`transition`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)
-- [`transition-delay`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay)
-- [`transition-duration`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration)
-- [`transition-property`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property)
-- [`transition-timing-function`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)
-- [`unicode-bidi`](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi)
-- [`vertical-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)
-- [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
-- `voice-family`
-- [`white-space`](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
-- [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width)
-- [`word-break`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)
-- [`word-spacing`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing)
-- [`word-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap)
-- [`writing-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode)
-- [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)
-
-### Additional restrictions
-
-The following CSS properties have additional restrictions:
-
-| Property                                                                    | Restrictions                                                                     |
-| --------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
-| [`cursor`](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)         | The only allowed values are `pointer` and `initial`.                             |
-| [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)         | `url()` is not allowed.                                                          |
-| [`transition`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) | Only `opacity`, `transform`, `visibility` and `offset-distance` can be animated. |
-| [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) | The only allowed values are `hidden`, `visible` and `initial`.                   |
-| [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)       | Only values between -100 and 100 are allowed.                                    |
-
-## At-rules
-
-The only [at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule)
-currently supported is `@media`. See [Media features](#media-features) for more
-information.
-
-### Custom fonts (`@font-face`)
-
-Custom fonts are **not** supported in AMP for Email.
-
-## Media features
-
-List of [media features](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features)
-supported for conditionally applying rules via `@media` queries.
-
-- [`device-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width)
-  - `max-device-width`
-  - `min-device-width`
-- [`hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover)
-- [`orientation`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation)
-- [`pointer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer)
-- [`resolution`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution)
-  - `max-resolution`
-  - `min-resolution`
-- [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width)
-  - `max-width`
-  - `min-width`
diff --git a/spec/email/amp-email-format.md b/spec/email/amp-email-format.md
deleted file mode 100644
index 84ad45387d24d..0000000000000
--- a/spec/email/amp-email-format.md
+++ /dev/null
@@ -1,137 +0,0 @@
-<!---
-Copyright 2018 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.
--->
-
-AMP is a technology known for developing super fast web pages on mobile clients. AMP is a set of HTML tags backed by JavaScript that easily enables functionality with an added focus on performance and security. There are [AMP components](https://amp.dev/documentation/components/) for everything from carousels, to responsive form elements, to retrieving fresh content from remote endpoints.
-
-The AMP for Email format provides [a subset of AMP components](amp-email-components.md) that you can use in email messages. Recipients of AMP emails can view and interact with the AMP components directly in the email.
-
-# The AMP for Email Format
-
-## Required markup
-
-The following code represents the minimum amount of markup that makes up a valid AMP email message:
-
-```html
-<!DOCTYPE html>
-<html ⚡4email>
-  <head>
-    <meta charset="utf-8" />
-    <style amp4email-boilerplate>
-      body {
-        visibility: hidden;
-      }
-    </style>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-  </head>
-  <body>
-    Hello, world.
-  </body>
-</html>
-```
-
-An AMP email message MUST
-
-- <a name="dctp"></a>start with the doctype `<!doctype html>`. [🔗](#dctp)
-- <a name="ampd"></a>contain a top-level `<html ⚡4email>` tag (`<html amp4email>` is accepted as well). [🔗](#ampd)
-- <a name="crps"></a>contain `<head>` and `<body>` tags (They are optional in HTML). [🔗](#crps)
-- <a name="chrs"></a>contain a `<meta charset="utf-8">` tag as the first child of their head tag. [🔗](#chrs)
-- <a name="scrpt"></a>contain a `<script async src="https://cdn.ampproject.org/v0.js"></script>` tag inside their head tag. [🔗](#scrpt)
-- <a name="boilerplate"></a>contain amp4email boilerplate (`<style amp4email-boilerplate>body{visibility:hidden}</style>`) inside their head tag to initially hide the content until AMP JS is loaded. [🔗](#boilerplate)
-
-The entire AMPHTML markup must not exceed 102,400 bytes.
-
-## Structure and rendering
-
-AMP for Email relies on the standard `multipart/alternative` [MIME](https://en.wikipedia.org/wiki/MIME) subtype, as defined in
-[RFC 1521, section 7.2.3](https://tools.ietf.org/html/rfc1521#section-7.2.3).
-
-_For more information, see [Structure and rendering of AMP emails](amp-email-structure.md)._
-
-## Supported AMP components
-
-_See [AMP for Email Supported Components](amp-email-components.md)._
-
-## HTML requirements
-
-_See [Supported HTML in AMP for Email](amp-email-html.md)._
-
-## CSS requirements
-
-### Supported selectors and properties
-
-_See [Supported CSS in AMP for Email](amp-email-css.md)._
-
-### Specifying CSS in an AMP document
-
-All CSS in any AMP document must be included in a `<style amp-custom>` tag within the header or as inline `style` attributes.
-
-```html
-...
-<style amp-custom>
-  /* any custom styles go here. */
-  body {
-    background-color: white;
-  }
-  amp-img {
-    border: 5px solid black;
-  }
-  amp-img.grey-placeholder {
-    background-color: grey;
-  }
-</style>
-...
-</head>
-```
-
-Note: The entire `<style>` tag cannot exceed 50,000 bytes. The validator will check for this.
-
-## Document dimensions
-
-- **Optimal width**: 800px or less (any wider and content may be unexpectedly truncated on some clients).
-
-- **Height**: variable, the client allows the user to scroll through the content.
-
-## Validation
-
-To ensure your email messages meet the strict criteria for the AMP for Email format, you can use AMP's existing validation tools.
-
-See [Validate AMP Email](https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_emails/) for more information.
-
-## Privacy and Security
-
-### Tracking email opens and interaction
-
-AMPHTML allows tracking email opens with pixel tracking techniques, same as regular HTML emails. Any user-initiated requests for data from external services will also indicate the user is interacting with the message. Email clients may offer their users the ability to disable loading remote images, and other external requests.
-
-### AMP-specific analytics
-
-The following AMP-specific analytic techniques are not supported:
-
-- [AMP `CLIENT_ID`](https://amp.dev/documentation/guides-and-tutorials/optimize-measure/configure-analytics/analytics_basics#user-identification)
-- [`amp-analytics`](https://amp.dev/documentation/components/amp-analytics)
-- [`amp-pixel`](https://amp.dev/documentation/components/amp-pixel)
-- [AMP Variable Substitution](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics_basics/#variable-substitution)
-
-### Component-specific considerations
-
-Requests for images inside [`<amp-carousel>`](https://amp.dev/documentation/components/amp-carousel) or [`<amp-accordion>`](https://amp.dev/documentation/components/amp-accordion)
-can indicate to the sender that the user is interacting with the message.
-
-Redirects in [`<amp-form>`](https://amp.dev/documentation/components/amp-form) are disallowed at runtime.
-
-## Feedback & Support
-
-For support and feedback on AMP for Email, please use the following channel: [ongoing-participation](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#ongoing-participation)
diff --git a/spec/email/amp-email-html.md b/spec/email/amp-email-html.md
deleted file mode 100644
index f1cf9cd47fd04..0000000000000
--- a/spec/email/amp-email-html.md
+++ /dev/null
@@ -1,117 +0,0 @@
-<!---
-Copyright 2018 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.
--->
-
-# Supported HTML in AMP for Email
-
-Note: This list is non-normative and is for reference purposes only. The AMP Validator rules are authoritative
-on the supported HTML tags and attributes.
-
-In addition to the [supported AMP components](amp-email-components.md), the following HTML tags are
-allowed in AMP for Email.
-
-## Supported tags
-
-- [`a`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
-- [`abbr`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr)
-- [`address`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address)
-- [`article`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article)
-- [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
-- [`b`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b)
-- [`bdo`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo)
-- [`blockquote`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)
-- [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)
-- [`br`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)
-- [`button`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)
-- [`caption`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption)
-- [`cite`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite)
-- [`code`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code)
-- [`col`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col)
-- [`colgroup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup)
-- [`data`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data)
-- [`datalist`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist)
-- [`dd`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd)
-- [`del`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del)
-- [`details`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
-- [`dfn`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn)
-- [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div)
-- [`dl`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)
-- [`dt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt)
-- [`em`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em)
-- [`fieldset`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)
-- [`figcaption`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption)
-- [`figure`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)
-- [`footer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer)
-- [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
-- [`h1`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1)
-- [`h2`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2)
-- [`h3`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3)
-- [`h4`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4)
-- [`h5`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h5)
-- [`h6`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h6)
-- [`head`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
-- [`header`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header)
-- [`hr`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)
-- [`html`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html)
-- [`i`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i)
-- [`input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
-- [`ins`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins)
-- [`kbd`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd)
-- [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
-- [`legend`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)
-- [`li`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)
-- [`main`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main)
-- [`mark`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark)
-- [`meta`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
-- [`meter`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter)
-- [`nav`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav)
-- [`ol`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)
-- [`optgroup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup)
-- [`option`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option)
-- [`output`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output)
-- [`p`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)
-- [`pre`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre)
-- [`progress`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)
-- [`q`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q)
-- [`rb`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rb)
-- [`rp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp)
-- [`rt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt)
-- [`ruby`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby)
-- [`s`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s)
-- [`samp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp)
-- [`script`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
-- [`section`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section)
-- [`select`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
-- [`small`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small)
-- [`span`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)
-- [`strong`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong)
-- [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style)
-- [`sub`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub)
-- [`summary`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
-- [`sup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup)
-- [`table`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
-- [`tbody`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody)
-- [`td`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td)
-- [`template`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)
-- [`textarea`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
-- [`tfoot`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot)
-- [`th`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th)
-- [`thead`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead)
-- [`time`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time)
-- [`tr`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr)
-- [`u`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u)
-- [`ul`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)
-- [`var`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var)
-- [`wbr`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr)
diff --git a/src/.eslintrc.js b/src/.eslintrc.js
index c952863b398f0..21f797646e494 100644
--- a/src/.eslintrc.js
+++ b/src/.eslintrc.js
@@ -13,9 +13,74 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const {isCiBuild} = require('../build-system/common/ci');
 
 module.exports = {
   'rules': {
     'local/no-global': 2,
+
+    'import/no-restricted-paths': [
+      'error',
+      {
+        'zones': [
+          {
+            // Disallow importing AMP dependencies into core
+            'target': 'src/core',
+            'from': 'src',
+            'except': ['./core'],
+          },
+          {
+            // Disallow importing AMP dependencies into preact/Bento
+            'target': 'src/preact',
+            'from': 'src',
+            'except': ['./core', './context', './preact'],
+          },
+          {
+            // Disallow importing AMP dependencies into context module
+            // TODO(rcebulko): Try to migrate src/context into src/preact
+            'target': 'src/context',
+            'from': 'src',
+            'except': ['./core', './context'],
+          },
+          {
+            // Disallow importing non-core dependencies into polyfills
+            'target': 'src/polyfills',
+            'from': 'src',
+            'except': ['./core', './polyfills'],
+          },
+        ],
+      },
+    ],
   },
+  // Exclusions where imports are necessary or have not yet been migrated;
+  // Do not add to this list
+  'overrides': [
+    {
+      'files': [
+        './preact/base-element.js',
+        './preact/slot.js',
+        './context/node.js',
+        './polyfills/fetch.js',
+        './polyfills/get-bounding-client-rect.js',
+        // TEMPORARY, follow tracking issue #33631
+        './preact/component/3p-frame.js',
+      ],
+      'rules': {'import/no-restricted-paths': isCiBuild() ? 0 : 1},
+    },
+    {
+      'files': [
+        './core/window.extern.js',
+        './polyfills/custom-elements.extern.js',
+        './experiments/experiments.extern.js',
+        './experiments/shame.extern.js',
+      ],
+      'rules': {'local/no-global': 0},
+    },
+    {
+      'files': ['./base-element.js'],
+      'rules': {
+        'local/no-private-props': 2,
+      },
+    },
+  ],
 };
diff --git a/src/3p-frame-messaging.js b/src/3p-frame-messaging.js
index bb46beb1ff114..aeda16ac05287 100644
--- a/src/3p-frame-messaging.js
+++ b/src/3p-frame-messaging.js
@@ -15,9 +15,9 @@
  */
 
 import {dev, devAssert} from './log';
-import {dict} from './utils/object';
+import {dict} from './core/types/object';
 import {internalListenImplementation} from './event-helper-listen';
-import {parseJson} from './json';
+import {tryParseJson} from './core/types/object/json';
 
 /** @const */
 const AMP_MESSAGE_PREFIX = 'amp-';
@@ -43,6 +43,7 @@ export const MessageType = {
   NO_CONTENT: 'no-content',
   GET_HTML: 'get-html',
   GET_CONSENT_STATE: 'get-consent-state',
+  SIGNAL_INTERACTIVE: 'signal-interactive',
 
   // For the frame to be placed in full overlay mode for lightboxes
   FULL_OVERLAY_FRAME: 'full-overlay-frame',
@@ -61,6 +62,10 @@ export const MessageType = {
 
   // For user-error-in-iframe
   USER_ERROR_IN_IFRAME: 'user-error-in-iframe',
+
+  // For amp-iframe
+  SEND_CONSENT_DATA: 'send-consent-data',
+  CONSENT_DATA: 'consent-data',
 };
 
 /**
@@ -115,12 +120,9 @@ export function deserializeMessage(message) {
   }
   const startPos = message.indexOf('{');
   devAssert(startPos != -1, 'JSON missing in %s', message);
-  try {
-    return parseJson(message.substr(startPos));
-  } catch (e) {
-    dev().error('MESSAGING', 'Failed to parse message: ' + message, e);
-    return null;
-  }
+  return tryParseJson(message.substr(startPos), (e) =>
+    dev().error('MESSAGING', 'Failed to parse message: ' + message, e)
+  );
 }
 
 /**
diff --git a/src/3p-frame.js b/src/3p-frame.js
index c03e91a38016d..1ca708afcc631 100644
--- a/src/3p-frame.js
+++ b/src/3p-frame.js
@@ -16,13 +16,17 @@
 
 import {assertHttpsUrl, parseUrlDeprecated} from './url';
 import {dev, devAssert, user, userAssert} from './log';
-import {dict} from './utils/object';
+import {dict} from './core/types/object';
 import {getContextMetadata} from '../src/iframe-attributes';
 import {getMode} from './mode';
+import {
+  getOptionalSandboxFlags,
+  getRequiredSandboxFlags,
+} from './core/3p-frame';
 import {internalRuntimeVersion} from './internal-version';
+import {isExperimentOn} from './experiments';
 import {setStyle} from './style';
-import {startsWith} from './string';
-import {tryParseJson} from './json';
+import {tryParseJson} from './core/types/object/json';
 import {urls} from './config';
 
 /** @type {!Object<string,number>} Number of 3p frames on the for that type. */
@@ -66,10 +70,10 @@ function getFrameAttributes(parentWindow, element, opt_type, opt_context) {
  * @param {!AmpElement} parentElement
  * @param {string=} opt_type
  * @param {Object=} opt_context
- * @param {!{
- *   disallowCustom,
- *   allowFullscreen,
- * }=} opt_options Options for the created iframe.
+ * @param {{
+ *   allowFullscreen: (boolean|undefined),
+ *   initialIntersection: (IntersectionObserverEntry|undefined),
+ * }=} options Options for the created iframe.
  * @return {!HTMLIFrameElement} The iframe.
  */
 export function getIframe(
@@ -77,8 +81,9 @@ export function getIframe(
   parentElement,
   opt_type,
   opt_context,
-  {disallowCustom, allowFullscreen} = {}
+  options = {}
 ) {
+  const {allowFullscreen = false, initialIntersection} = options;
   // Check that the parentElement is already in DOM. This code uses a new and
   // fast `isConnected` API and thus only used when it's available.
   devAssert(
@@ -92,9 +97,13 @@ export function getIframe(
     opt_type,
     opt_context
   );
-  const iframe = /** @type {!HTMLIFrameElement} */ (parentWindow.document.createElement(
-    'iframe'
-  ));
+  if (initialIntersection) {
+    attributes['_context']['initialIntersection'] = initialIntersection;
+  }
+
+  const iframe = /** @type {!HTMLIFrameElement} */ (
+    parentWindow.document.createElement('iframe')
+  );
 
   if (!count[attributes['type']]) {
     count[attributes['type']] = 0;
@@ -102,20 +111,16 @@ export function getIframe(
   count[attributes['type']] += 1;
 
   const ampdoc = parentElement.getAmpDoc();
-  const baseUrl = getBootstrapBaseUrl(
-    parentWindow,
-    ampdoc,
-    undefined,
-    disallowCustom
-  );
+  const baseUrl = getBootstrapBaseUrl(parentWindow, ampdoc);
   const host = parseUrlDeprecated(baseUrl).hostname;
   // This name attribute may be overwritten if this frame is chosen to
   // be the master frame. That is ok, as we will read the name off
   // for our uses before that would occur.
-  // @see https://github.com/ampproject/amphtml/blob/master/3p/integration.js
+  // @see https://github.com/ampproject/amphtml/blob/main/3p/integration.js
   const name = JSON.stringify(
     dict({
       'host': host,
+      'bootstrap': getBootstrapUrl(attributes['type'], parentWindow),
       'type': attributes['type'],
       // https://github.com/ampproject/amphtml/pull/2955
       'count': count[attributes['type']],
@@ -174,8 +179,8 @@ export function addDataAndJsonAttributes_(element, attributes) {
   const {dataset} = element;
   for (const name in dataset) {
     // data-vars- is reserved for amp-analytics
-    // see https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md#variables-as-data-attribute
-    if (!startsWith(name, 'vars')) {
+    // see https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/analytics-vars.md#variables-as-data-attribute
+    if (!name.startsWith('vars')) {
       attributes[name] = dataset[name];
     }
   }
@@ -194,23 +199,41 @@ export function addDataAndJsonAttributes_(element, attributes) {
   }
 }
 
+/**
+ * Get the bootstrap script URL for iframe.
+ * @param {string} type
+ * @param {!Window} win
+ * @return {string}
+ */
+export function getBootstrapUrl(type, win) {
+  if (getMode().localDev || getMode().test) {
+    const filename = getMode().minified
+      ? `./vendor/${type}.`
+      : `./vendor/${type}.max.`;
+    return IS_ESM ? filename + 'mjs' : filename + 'js';
+  }
+  if (isExperimentOn(win, '3p-vendor-split')) {
+    return IS_ESM
+      ? `${urls.thirdParty}/${internalRuntimeVersion()}/vendor/${type}.mjs`
+      : `${urls.thirdParty}/${internalRuntimeVersion()}/vendor/${type}.js`;
+  }
+  return `${urls.thirdParty}/${internalRuntimeVersion()}/f.js`;
+}
+
 /**
  * Preloads URLs related to the bootstrap iframe.
  * @param {!Window} win
+ * @param {string} type
  * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
  * @param {!./preconnect.PreconnectService} preconnect
- * @param {boolean=} opt_disallowCustom whether 3p url should not use meta tag.
  */
-export function preloadBootstrap(win, ampdoc, preconnect, opt_disallowCustom) {
-  const url = getBootstrapBaseUrl(win, ampdoc, undefined, opt_disallowCustom);
+export function preloadBootstrap(win, type, ampdoc, preconnect) {
+  const url = getBootstrapBaseUrl(win, ampdoc);
   preconnect.preload(ampdoc, url, 'document');
 
   // While the URL may point to a custom domain, this URL will always be
   // fetched by it.
-  const scriptUrl = getMode().localDev
-    ? getAdsLocalhost(win) + '/dist.3p/current/integration.js'
-    : `${urls.thirdParty}/${internalRuntimeVersion()}/f.js`;
-  preconnect.preload(ampdoc, scriptUrl, 'script');
+  preconnect.preload(ampdoc, getBootstrapUrl(type, win), 'script');
 }
 
 /**
@@ -218,20 +241,18 @@ export function preloadBootstrap(win, ampdoc, preconnect, opt_disallowCustom) {
  * @param {!Window} parentWindow
  * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
  * @param {boolean=} opt_strictForUnitTest
- * @param {boolean=} opt_disallowCustom whether 3p url should not use meta tag.
  * @return {string}
  * @visibleForTesting
  */
 export function getBootstrapBaseUrl(
   parentWindow,
   ampdoc,
-  opt_strictForUnitTest,
-  opt_disallowCustom
+  opt_strictForUnitTest
 ) {
-  const customBootstrapBaseUrl = opt_disallowCustom
-    ? null
-    : getCustomBootstrapBaseUrl(parentWindow, ampdoc, opt_strictForUnitTest);
-  return customBootstrapBaseUrl || getDefaultBootstrapBaseUrl(parentWindow);
+  return (
+    getCustomBootstrapBaseUrl(parentWindow, ampdoc, opt_strictForUnitTest) ||
+    getDefaultBootstrapBaseUrl(parentWindow)
+  );
 }
 
 /**
@@ -365,7 +386,7 @@ function getCustomBootstrapBaseUrl(
       parsed.origin != parseUrlDeprecated(parentWindow.location.href).origin,
     '3p iframe url must not be on the same origin as the current document ' +
       '%s (%s) in element %s. See https://github.com/ampproject/amphtml' +
-      '/blob/master/spec/amp-iframe-origin-policy.md for details.',
+      '/blob/main/docs/spec/amp-iframe-origin-policy.md for details.',
     url,
     parsed.origin,
     meta
@@ -384,35 +405,7 @@ export function applySandbox(iframe) {
   }
   // If these flags are not supported by the UA we don't apply any
   // sandbox.
-  const requiredFlags = [
-    // This only allows navigation when user interacts and thus prevents
-    // ads from auto navigating the user.
-    'allow-top-navigation-by-user-activation',
-    // Crucial because otherwise even target=_blank opened links are
-    // still sandboxed which they may not expect.
-    'allow-popups-to-escape-sandbox',
-  ];
-  // These flags are not feature detected. Put stuff here where either
-  // they have always been supported or support is not crucial.
-  const otherFlags = [
-    'allow-forms',
-    // We should consider turning this off! But since the top navigation
-    // issue is the big one, we'll leave this allowed for now.
-    'allow-modals',
-    // Give access to raw mouse movements.
-    'allow-pointer-lock',
-    // This remains subject to popup blocking, it just makes it supported
-    // at all.
-    'allow-popups',
-    // This applies inside the iframe and is crucial to not break the web.
-    'allow-same-origin',
-    'allow-scripts',
-  ];
-  // Not allowed
-  // - allow-top-navigation
-  // - allow-orientation-lock
-  // - allow-pointer-lock
-  // - allow-presentation
+  const requiredFlags = getRequiredSandboxFlags();
   for (let i = 0; i < requiredFlags.length; i++) {
     const flag = requiredFlags[i];
     if (!iframe.sandbox.supports(flag)) {
@@ -420,7 +413,8 @@ export function applySandbox(iframe) {
       return;
     }
   }
-  iframe.sandbox = requiredFlags.join(' ') + ' ' + otherFlags.join(' ');
+  iframe.sandbox =
+    requiredFlags.join(' ') + ' ' + getOptionalSandboxFlags().join(' ');
 }
 
 /**
diff --git a/src/OWNERS b/src/OWNERS
index 1f25172586e74..8f61c47f7b24c 100644
--- a/src/OWNERS
+++ b/src/OWNERS
@@ -1,22 +1,22 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'dvoytenko'}, {name: 'ampproject/wg-runtime'}],
+      owners: [{name: 'dvoytenko'}, {name: 'ampproject/wg-performance'}],
     },
     {
       pattern: '{iframe-video,mediasession-helper,video-*}.js',
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
     {
       pattern: '{cid-*,*-cid-*,*-cid,extension-analytics,analytics}.js',
-      owners: [{name: 'ampproject/wg-analytics'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
     {
       pattern: '{consent,consent-state}.js',
-      owners: [{name: 'ampproject/wg-analytics'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
     {
       pattern: 'amp-story-*.js',
@@ -26,5 +26,38 @@
       pattern: 'friendly-iframe-embed.js',
       owners: [{name: 'ampproject/wg-ads-reviewers'}],
     },
+    {
+      pattern: '{3p-frame, 3p-frame-*}.js',
+      owners: [
+        {name: 'ampproject/wg-ads-reviewers'},
+        {name: 'ampproject/wg-components'},
+      ],
+    },
+    {
+      pattern: 'localized-strings.js',
+      owners: [
+        {
+          name: 'gmajoulet',
+          notify: true,
+        },
+        {
+          name: 'newmuis',
+          notify: true,
+        },
+        {
+          name: 'enriqe',
+          notify: true,
+        },
+        {
+          name: 'processprocess',
+        },
+        {
+          name: 'mszylkowski',
+        },
+        {
+          name: 'raxsha',
+        },
+      ],
+    },
   ],
 }
diff --git a/src/amp-shadow.js b/src/amp-shadow.js
index af5779576fa0d..ccca2d82e1312 100644
--- a/src/amp-shadow.js
+++ b/src/amp-shadow.js
@@ -20,7 +20,7 @@
  */
 
 // src/polyfills.js must be the first import.
-import './polyfills'; // eslint-disable-line sort-imports-es6-autofix/sort-imports-es6
+import './polyfills';
 
 import {adoptShadowMode} from './runtime';
 import {bodyAlwaysVisible} from './style-installer';
diff --git a/src/amp-story-player/OWNERS b/src/amp-story-player/OWNERS
index 8a3fdf2be5e52..61cce39d63196 100644
--- a/src/amp-story-player/OWNERS
+++ b/src/amp-story-player/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/src/amp-story-player/README.md b/src/amp-story-player/README.md
new file mode 100644
index 0000000000000..7b84a75574384
--- /dev/null
+++ b/src/amp-story-player/README.md
@@ -0,0 +1,459 @@
+# Web Story Player November 2020 Update
+
+<table>
+  <tr>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/carousel-cards-entry-point.png?raw=true"></td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/player-in-recipe.png?raw=true"></td>
+<td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/lightbox-close-button.png?raw=true"></td>
+  </tr>
+</table>
+
+## Summary
+
+The player is fully available and the functionalities here (unless otherwise specified) are ready to use. The goal of this issue is to polish documentation, provide more examples of the player, and showcase new functionalities. To learn how to try out the new features (marked in (**Beta**)), refer to the [FAQs](#faqs-please-feel-free-to-reach-out-with-other-questions--thoughts).
+
+This update contains guidance on using the Web Story Player to support:
+
+<!--
+  (Do not remove or edit this comment.)
+
+  This table-of-contents is automatically generated. To generate it, run:
+    amp markdown-toc --fix
+-->
+
+<!-- {"maxdepth": 1} -->
+
+-   [Summary](#summary)
+-   [Player setup](#player-setup)
+-   [Navigating between stories](#navigating-between-stories)
+-   [Integrating web stories into your website (entrypoints)](#integrating-web-stories-into-your-website-entrypoints)
+-   [Programmatically fetching more stories](#programmatically-fetching-more-stories)
+-   [Circular Wrapping](#circular-wrapping)
+-   [Customizing position & visibility of story UI controls](#customizing-position--visibility-of-story-ui-controls)
+-   [Custom Events](#custom-events)
+-   [Upcoming API Change: Poster Image](#upcoming-api-change-poster-image)
+-   [Additional use case demos](#additional-use-case-demos)
+-   [Additional explorations and roadmap](#additional-explorations-and-roadmap)
+-   [FAQs (please feel free to reach out with other questions & thoughts)](#faqs-please-feel-free-to-reach-out-with-other-questions--thoughts)
+
+Beyond this, you’ll also find:
+
+-   [Additional use case demos](#Additional-use-case-demos)
+-   [Additional explorations and roadmap](#Additional-explorations-and-roadmap)
+-   [FAQs](#faqs-please-feel-free-to-reach-out-with-other-questions--thoughts)
+
+## Player setup
+
+If you need a refresher on how to set up the amp-story-player, including what scripts to import and how to add stories, visit the [documentation](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-story-player.md).
+
+## Navigating between stories
+
+Navigating between stories inside of the player works out of the box for mobile. Simply swipe horizontally to go from one story to the other. [Full screen demo](https://web-player-cards-carousel.web.app/examples/amp-story/player-full-screen.html).
+
+To navigate between stories on desktop, there are a couple of options:
+
+<table>
+  <tr>
+    <td>1. Opt-in to the “skip-to-next button” using the “controls” API (more on that below on the “Customizing position & visibility of story UI controls” section).</td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/skip-next-desktop.png?raw=true"></td>
+  </tr>
+  <tr>
+    <td>2. Use the Javascript APIs to implement your own navigational buttons.  If you want to use the Javascript APIs, you can use the <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-story-player.md#go">go() method</a> (see documentation for more details) as shown in the following example:</td>
+    <td>
+
+```javascript
+const player = document.querySelector("amp-story-player");
+
+// Waits for when player API is ready to be used.
+player.addEventListener("ready", () => {
+  initializeNavigationalButtons();
+});
+
+// Synchronous check to avoid race conditions where event was dispatched before // we started listening.
+if (player.isReady) {
+    initializeNavigationalButtons();
+}
+
+function initializeNavigationalButtons() {
+  const nextButton = document.body.querySelector(".my-next-button");
+
+  nextButton.addEventListener('click', () => {
+    // Advances one story when ".my-next-button" is clicked.
+    player.go(1);
+  });
+}
+
+```
+
+</td>
+
+  </tr>
+</table>
+
+## Integrating web stories into your website (entrypoints)
+
+There are many ways in which you can use the player on your own surfaces. Below we provide a few samples of common patterns. We are evaluating putting together more detailed examples and patterns for entry points, let us know if that would be helpful for you.
+
+<table>
+<tbody>
+  <tr>
+    <td><strong>Carousel with circle avatars</strong> <br>In this codepen, we provide an example of how to create a carousel entry point and how to link it to your player. <br> <a href="https://codepen.io/maenrique/pen/wvWjNYr" target="_blank" rel="noopener noreferrer">https://codepen.io/maenrique/pen/wvWjNYr</a><br><br><strong>Demo</strong>  <br>This demo showcases a more complex implementation with a horizontally scrollable carousel and the player being opened in a lightbox. <br><a href="https://web-player-cards-carousel.web.app/examples/amp-story/player-entry-point-circular.html" target="_blank" rel="noopener noreferrer">https://web-player-cards-carousel.web.app/examples/amp-story/player-entry-point-circular.html</a><br></td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/carousel-circuclar-entry-point.png?raw=true"></td>
+  </tr>
+  <tr>
+    <td><strong>Carousel with cards</strong><br>In this codepen, we provide an example of how to create a simple card carousel entry point and how to link it to your player.<br><a href="https://codepen.io/maenrique/pen/MWeGxqY" target="_blank" rel="noopener noreferrer">https://codepen.io/maenrique/pen/MWeGxqY</a><br><br><strong>Demo</strong> <br>This demo showcases a more complex implementation with a horizontally scrollable carousel and the player being opened in a lightbox. <br> <a href="https://web-player-cards-carousel.web.app/examples/amp-story/player-entry-point-cards.html" target="_blank" rel="noopener noreferrer">https://web-player-cards-carousel.web.app/examples/amp-story/player-entry-point-cards.html</a><br><br></td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/carousel-cards-entry-point.png?raw=true"></td>
+  </tr>
+  <tr>
+    <td>Embedding directly into some text<br>The simplest way to use the player is to directly embed the player in your platform.<br><a href="https://web-player-cards-carousel.web.app/examples/amp-story/player-blog.html" target="_blank" rel="noopener noreferrer">Demo</a><br></td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/embed-in-blog.png?raw=true"></td>
+  </tr>
+</tbody>
+</table>
+
+## Programmatically fetching more stories
+
+You can now create an “infinite scroll” experience by fetching more stories as the user navigates through them in your player. Simply use the new JSON configuration to specify an endpoint, and the player will automatically fetch more stories as it gets closer to the last story in the player.
+
+### JSON Configuration
+
+Here’s an example of how the configuration looks:
+
+```html
+<amp-story-player>
+ <script type="application/json">
+   {
+     "behavior": {
+       "on": "end",
+       "action": "fetch",
+       "endpoint": "https://example.com/my-endpoint.json?offset=${offset}"
+     }
+   }
+ </script>
+ <a href="./story1.html"> ... </a>
+ <a href="./story2.html"> ... </a>
+  ...
+```
+
+</amp-story-player>
+
+The configuration must be a direct child of the <amp-story-player> element, with the `type=”application/json”` attribute.
+
+The `endpoint` property of the url takes in an optional variable `${offset}` that you can add as a parameter, which you can use for pagination.
+
+### Response
+
+The expected response payload coming from the endpoint should be a JSON containing an array of Story objects, the structure is described below.
+
+#### href
+
+The URL where your story is located.
+
+#### title (optional)
+
+The title of your story.
+
+#### posterImage (optional)
+
+The poster image of your story.
+
+Example:
+
+```json
+[
+  {
+    "href": "https://example.com/story3.html",
+    "title": "My third cool story", // optional
+    "posterImage": "https://example.com/assets/story3.png" // optional
+  },
+  {
+    "href": "https://example.com/story4.html",
+    "title": "My fourth cool story", // optional
+    "posterImage": "https://example.com/assets/story4.png" // optional
+  }
+]
+```
+
+## Circular Wrapping
+
+You can now create a circular consumption of stories. This enables users to go back to the first story when they finish the last one. To do this, use the JSON configuration with the `circular-wrapping` action.
+
+### JSON Configuration
+
+Here’s an example of how the configuration looks:
+
+```html
+<amp-story-player>
+ <script type="application/json">
+   {
+     "behavior": {
+       "on": "end",
+       "action": "circular-wrapping"
+     }
+   }
+ </script>
+ <a href="./story1.html"> ... </a>
+ <a href="./story2.html"> ... </a>
+  ...
+</amp-story-player>
+```
+
+The configuration must be a direct child of the <amp-story-player> element, with the `type=”application/json”` attribute.
+
+## Customizing position & visibility of story UI controls
+
+You can now customize controls of the story UI with a variety of options. These include new buttons, changing the position (start or end), among others.
+
+See [examples](#Example-#1---Close-button-on-the-start-position) below to get an idea of what you can do.
+
+<table>
+  <tr>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/close-button-left.png?raw=true"></td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/close-and-skip-next.png?raw=true"></td>
+<td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/close-button-custom-background.png?raw=true"></td>
+  </tr>
+</table>
+
+To configure them, specify a JSON configuration with the `type=”application/json”` attribute as a child of the `<amp-story-player>` element.
+
+Inside the configuration, specify an array of “controls”. The “controls” structure is described below.
+
+The configuration will end up looking like the following:
+
+```html
+<amp-story-player>
+
+ <script type="application/json">
+   {
+     "controls": [
+       {
+         "name": "close",
+         "position": "start"
+       },
+       {
+         "name": "skip-to-next"
+       }
+     ]
+   }
+ </script>
+
+<a href="./story1.html"> ... </a>
+<a href="./story2.html"> ... </a>
+</amp-story-player>
+```
+
+### Close
+
+Specify a control object with the “close” name to get the close icon.
+
+-   `event`: The close button dispatches the `amp-story-player-close` event.
+
+The “close” control supports the following customizable properties:
+
+-   `position`: “start” or “end”.
+    -   Places the icon either on the left or right on LTR languages.
+-   `visibility`: “hidden” or “visible” (default).
+    -   Toggles the control’s visibility. If omitted, the default is visible.
+    -   See [Example #2 - Showing skip-to-next story on desktop.](#Example-#2---Showing-skip-to-next-story-on-desktop)
+-   `backgroundImageUrl`: string with url or data string (escaped).
+    -   Changes the icon image to the provided url or data string (for inline svgs).
+
+### Skip-to-next
+
+Skips to the next story inside the player (only available on desktop).
+
+The “skip-to-next” control supports the following customizable properties:
+
+-   `position`: “start” or “end”.
+    -   Places the icon either on the left or right on LTR languages.
+-   `visibility`: “hidden” or “visible” (default).
+    -   Toggles the control’s visibility. If omitted, the default is visible.
+-   `backgroundImageUrl`: string with url or data string (escaped).
+    -   Changes the icon image to the provided url or data string (for inline svgs).
+
+### Custom control
+
+You can add a custom control to the stories inside the player with a custom control. Simply specify a “name” and an “backgroundImageUrl”, and any optional properties:
+
+-   `name` (**required**): a string with the name of the control. e.g. “lightbox”. **The dispatched event will depend on this name.** The custom event will be the name of the control prefixed with `amp-story-player-*`. E.g. `amp-story-player-lightbox`:
+
+```javascript
+const player = document.body.querySelector("amp-story-player");
+
+// Listen to when the specified control was clicked.
+player.addEventListener("amp-story-player-lightbox", () => {
+  // This will trigger when the control with the "lightbox" name is clicked.
+  performCustomAction();
+});
+```
+
+-   `backgroundImageUrl` (**required**): Accepts URLs, as well as svgs and `data` paths (note that strings must be JSON escaped). See [example 3](#Example-#3---Changing-the-icon-of-the-close-button).
+    -   Changes the control icon.
+-   `position`: “start” or “end”.
+    -   Places the icon either on the left or right on LTR languages.
+-   `visibility`: “hidden” or “visible” (default).
+    -   Toggles the control’s visibility. If omitted, the default is visible.
+
+### Example #1 - Close button on the start position
+
+Since by default the close button will be placed to the end, all we have to do is move the close button to the start.
+
+<table>
+  <tr>
+    <td>
+      <pre lang="html">
+<amp-story-player>
+ <script type="application/json">
+   {
+     "controls": [
+       {
+         "name": "close",
+         "position": "start"
+       }
+     ],
+   }
+ </script>
+ ...
+</amp-story-player>
+      </pre>
+    </td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/lightbox-close-button.png?raw=true"></td>
+  </tr>
+</table>
+
+### Example #2 - Showing skip-to-next story on desktop
+
+On desktop, you can now display a button that navigates from the current story to the next one. It will also automatically be disabled once the user reaches the end of the stories in the player.
+
+<table>
+  <tr>
+    <td>
+      <pre lang="html">
+<amp-story-player>
+ <script type="application/json">
+   {
+     "controls": [
+       {
+         "name": "skip-to-next"
+       }
+     ],
+   }
+ </script>
+ ...
+</amp-story-player>
+      </pre>
+    </td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/skip-next-desktop.png?raw=true"></td>
+  </tr>
+</table>
+
+### Example #3 - Changing the icon of the close button
+
+<table>
+  <tr>
+    <td>
+      <pre lang="html">
+<amp-story-player>
+ <script type="application/json">
+   {
+     "controls": [
+       {
+         "name": "close",
+         "backgroundImageUrl": "data:image\/svg+xml;charset=utf-8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.77778 9.33333H4V4H9.33333V5.77778H5.77778V9.33333ZM4 14.6667H5.77778V18.2222H9.33333V20H4V14.6667ZM18.2222 18.2222H14.6667V20H20V14.6667H18.2222V18.2222ZM14.6667 5.77778V4H20V9.33333H18.2222V5.77778H14.6667Z\" fill=\"white\"\/><\/svg>",
+         "position": "start"
+       }
+     ]
+   }
+ </script>
+ ...
+</amp-story-player>
+      </pre>
+    </td>
+    <td><img src="https://github.com/ampproject/amphtml/blob/main/src/amp-story-player/img/close-button-custom-background.png?raw=true"></td>
+  </tr>
+</table>
+
+## Custom Events
+
+We’ve recently introduced some new events that the player will dispatch and that you can listen to. To see the existing events, refer to the documentation of [Custom Events](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-story-player.md#custom-events).
+
+### noNextStory
+
+Dispatched when there is no next story. Note that this will not be dispatched when using [Circular wrapping](#Circular-wrapping).
+
+```javascript
+player.addEventListener('noNextStory', (event) => {
+  console.log('User is tapping on the last page and there are no more stories.');
+});
+```
+
+### noPreviousStory
+
+Dispatched when there is no next story. Note that this will not be dispatched when using [Circular wrapping](#Circular-wrapping).
+
+```javascript
+player.addEventListener('noPreviousStory', (event) => {
+  console.log('User is tapping back on the first page and there are no more stories.');
+});
+```
+
+### amp-story-close
+
+Dispatched when the “close” button is clicked. Read the “Customize story UI elements (system UI controls)” section for more information
+
+```javascript
+player.addEventListener('amp-story-close', (event) => {
+  console.log('User clicked the close button of the story.');
+});
+```
+
+## Upcoming API Change: Poster Image
+
+In the interest of performance and specifically metrics like [Largest Contentful Paint (LPS) & Cumulative Layout Shift (CLS)](https://web.dev/vitals/), the player provides the option to specify a poster image while the player loads.
+
+Before, we recommended using a CSS variable style="--story-player-poster: url('’);” as an inline style of the `<a>` tag to specify the poster image.
+
+This has some drawbacks -- mainly that we have to wait for the player CSS to be applied so that the image is displayed. This costs some precious milliseconds for the performance metrics. It also doesn’t really follow general HTML semantics.
+
+We will now recommend developers to use an `<img loading=”lazy”>` tag under the first `<a>` tag in their player. In doing so, the placeholder poster image will render without needing any CSS and it will render in other contexts like when the HTML is sanitized for email.
+
+Using the `<img>` tag also ensures that we're just using HTML so it should be interpreted correctly by browsers when it comes to computing LCP. Plus it's AMP/non-AMP consistent.
+
+This new API is still a work in progress, and will send more information when it becomes available. Please follow this [Github issue](https://github.com/ampproject/amphtml/issues/30512) for more information.
+
+## Additional use case demos
+
+<a href="https://codepen.io/maenrique/pen/rNLyqXg" target="_blank" rel="noopener noreferrer">Circle entry point + scrolling + lightbox</a>
+
+<a href="https://codepen.io/maenrique/pen/WNxpPqJ" target="_blank" rel="noopener noreferrer">Card entry point + scrolling + lightbox</a>
+
+## Additional explorations and roadmap
+
+Follow feature requests & bugs in the [Github project](https://github.com/ampproject/amphtml/projects/109).
+
+## FAQs (please feel free to reach out with other questions & thoughts)
+
+### The Web Player supports more features on non-AMP pages than on AMP pages currently. What features are missing for AMP-pages?
+
+Good question. While the basic functionality of the player is in the [AMP version](https://amp.dev/documentation/components/amp-story-player/), including embedding multiple stories and swiping through them, we are still working on porting over some of the features from the non-AMP version to the AMP version. These include:
+
+-   Circular wrapping
+-   Programmatically fetching more stories from an endpoint
+-   Customizable UI controls
+-   Custom events
+
+Follow our [roadmap on Github](https://github.com/ampproject/amphtml/projects/109) and the wg-stories updates for the [latest status updates](https://github.com/ampproject/wg-stories/issues).
+
+### Is the player ready to use? When will these features be ready?
+
+Yes! These features have been merged to the main repository, but since there is currently a [release freeze](https://github.com/ampproject/meta-tsc/issues/51) for AMP (October 26 - November 8, 2020), we recommend you to opt-in to the nightly release to try out the latest features. More information on that below.
+
+### I want the bleeding-edge and latest features, how can I get them?
+
+AMP provides some channels that you can opt-in to get the latest changes. To opt-in, visit the [AMP Project Experiments page](https://cdn.ampproject.org/experiments.html) and select a channel. More information about the [AMP Release Channels](https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md#amp-experimental-and-beta-channels).
+
+### I have found a bug or have questions / comments / issues, how do I contact you?
+
+If you have found a bug or have an issue request, file a [Github issue](https://github.com/ampproject/amphtml/issues?q=is%3Aissue+is%3Aopen+label%3A%22WG%3A+stories%22+) and tag the @ampproject/wg-stories working group.
+
+For questions / disscusion, join the [amp-story slack channel](https://github.com/ampproject/amphtml/blob/main/docs/contributing.md#discussion-channels) and ping us!.
diff --git a/src/amp-story-player/amp-story-component-manager.js b/src/amp-story-player/amp-story-component-manager.js
new file mode 100644
index 0000000000000..a276038d644b9
--- /dev/null
+++ b/src/amp-story-player/amp-story-component-manager.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {AmpStoryEntryPoint} from './amp-story-entry-point/amp-story-entry-point-impl';
+import {AmpStoryPlayer} from './amp-story-player-impl';
+import {AmpStoryPlayerViewportObserver} from './amp-story-player-viewport-observer';
+import {initLogConstructor} from '../log';
+
+export class AmpStoryComponentManager {
+  /**
+   * @param {!Window} win
+   * @constructor
+   */
+  constructor(win) {
+    /** @private {!Window} */
+    this.win_ = win;
+  }
+
+  /**
+   * Calls layoutPlayer on the element when it is close to the viewport.
+   * @param {!Element} element
+   * @private
+   */
+  layoutEl_(element) {
+    new AmpStoryPlayerViewportObserver(this.win_, element, () =>
+      element.layoutPlayer()
+    );
+
+    const scrollHandler = () => {
+      element.layoutPlayer();
+      this.win_.removeEventListener('scroll', scrollHandler);
+    };
+
+    this.win_.addEventListener('scroll', scrollHandler);
+  }
+
+  /**
+   * Builds and layouts the players when appropiate.
+   * @public
+   */
+  loadPlayers() {
+    const doc = this.win_.document;
+    const players = doc.getElementsByTagName('amp-story-player');
+    initLogConstructor();
+    for (let i = 0; i < players.length; i++) {
+      const playerEl = players[i];
+      const player = new AmpStoryPlayer(this.win_, playerEl);
+      player.buildPlayer();
+      this.layoutEl_(player);
+    }
+  }
+
+  /**
+   * Builds and layouts entry points.
+   * @public
+   */
+  loadEntryPoints() {
+    const doc = this.win_.document;
+    const entryPoints = doc.getElementsByTagName('amp-story-entry-point');
+    initLogConstructor();
+
+    for (let i = 0; i < entryPoints.length; i++) {
+      const entryPointEl = entryPoints[i];
+      const entryPoint = new AmpStoryEntryPoint(this.win_, entryPointEl);
+      entryPoint.buildCallback();
+      this.layoutEl_(entryPoint);
+    }
+  }
+}
diff --git a/src/amp-story-player/amp-story-entry-point/amp-story-entry-point-impl.js b/src/amp-story-player/amp-story-entry-point/amp-story-entry-point-impl.js
new file mode 100644
index 0000000000000..e94d2d84012a7
--- /dev/null
+++ b/src/amp-story-player/amp-story-entry-point/amp-story-entry-point-impl.js
@@ -0,0 +1,94 @@
+/**
+ * Copyright 2020 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.
+ */
+
+// Source for this constant is css/amp-story-entry-point.css
+import {cssText} from '../../../build/amp-story-entry-point.css';
+
+/**
+ * <amp-story-entry-point> component for embedding stories and launching them in
+ * the <amp-story-player>.
+ *
+ * Note that this is a vanilla JavaScript class and should not depend on AMP
+ * services, as v0.js is not expected to be loaded in this context.
+ */
+export class AmpStoryEntryPoint {
+  /**
+   * @param {!Window} win
+   * @param {!Element} element
+   * @constructor
+   */
+  constructor(win, element) {
+    /** @private {!Window} */
+    this.win_ = win;
+
+    /** @private {!Element} */
+    this.element_ = element;
+
+    /** @private {!Document} */
+    this.doc_ = this.win_.document;
+
+    /** @private {boolean} */
+    this.isBuilt_ = false;
+
+    /** @private {boolean} */
+    this.isLaidOut_ = false;
+
+    /** @private {?Element} */
+    this.rootEl_ = null;
+  }
+
+  /** @public */
+  buildCallback() {
+    if (this.isBuilt_) {
+      return;
+    }
+
+    this.initializeShadowRoot_();
+
+    this.isBuilt_ = true;
+  }
+
+  /** @public */
+  layoutCallback() {
+    if (this.isLaidOut_) {
+      return;
+    }
+
+    this.isLaidOut_ = true;
+  }
+
+  /** @private */
+  initializeShadowRoot_() {
+    this.rootEl_ = this.doc_.createElement('main');
+
+    // Create shadow root
+    const shadowRoot = this.element_.attachShadow({mode: 'open'});
+
+    // Inject default styles
+    const styleEl = this.doc_.createElement('style');
+    styleEl.textContent = cssText;
+    shadowRoot.appendChild(styleEl);
+    shadowRoot.appendChild(this.rootEl_);
+  }
+
+  /**
+   * @public
+   * @return {!Element}
+   */
+  getElement() {
+    return this.element_;
+  }
+}
diff --git a/src/amp-story-player/amp-story-entry-point/amp-story-entry-point.js b/src/amp-story-player/amp-story-entry-point/amp-story-entry-point.js
new file mode 100644
index 0000000000000..fd4784f002f8b
--- /dev/null
+++ b/src/amp-story-player/amp-story-entry-point/amp-story-entry-point.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {AmpStoryComponentManager} from '../amp-story-component-manager';
+
+self.onload = () => {
+  const manager = new AmpStoryComponentManager(self);
+  manager.loadEntryPoints();
+};
diff --git a/src/amp-story-player/amp-story-player-iframe-pool.js b/src/amp-story-player/amp-story-player-iframe-pool.js
deleted file mode 100644
index c8832dce193bf..0000000000000
--- a/src/amp-story-player/amp-story-player-iframe-pool.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-/**
- * Manages the iframes used to host the stories inside the player. It keeps
- * track of the iframes hosting stories, and what stories have an iframe.
- */
-export class IframePool {
-  /** @public */
-  constructor() {
-    /** @private @const {!Array<number>} */
-    this.iframePool_ = [];
-
-    /** @private @const {!Array<number>} */
-    this.storyIdsWithIframe_ = [];
-  }
-
-  /**
-   * @param {number} idx
-   * @public
-   */
-  addIframeIdx(idx) {
-    this.iframePool_.push(idx);
-  }
-
-  /**
-   * @param {number} idx
-   * @public
-   */
-  addStoryIdx(idx) {
-    this.storyIdsWithIframe_.push(idx);
-  }
-
-  /**
-   * Takes the first iframe in the array and allocates it to the next story
-   * without an iframe. It also updates the storyIdsWithIframe by removing the
-   * reference to the detached story and adds the new one.
-   * @param {number} nextStoryIdx
-   * @return {number} Index of the detached story.
-   * @public
-   */
-  rotateFirst(nextStoryIdx) {
-    const detachedStoryIdx = this.storyIdsWithIframe_.shift();
-    this.storyIdsWithIframe_.push(nextStoryIdx);
-
-    this.iframePool_.push(this.iframePool_.shift());
-
-    return detachedStoryIdx;
-  }
-
-  /**
-   * Takes the last iframe in the array and allocates it to the next incoming
-   * story without an iframe. It also updates the storyIdsWithIframe by removing
-   * the reference to the detached story and adds the new one.
-   * @param {number} nextStoryIdx
-   * @return {number} Index of the detached story.
-   * @public
-   */
-  rotateLast(nextStoryIdx) {
-    const detachedStoryIdx = this.storyIdsWithIframe_.pop();
-    this.storyIdsWithIframe_.unshift(nextStoryIdx);
-
-    this.iframePool_.unshift(this.iframePool_.pop());
-
-    return detachedStoryIdx;
-  }
-}
diff --git a/src/amp-story-player/amp-story-player-impl.js b/src/amp-story-player/amp-story-player-impl.js
index 90b965094fcc3..5fefe8b81ca3c 100644
--- a/src/amp-story-player/amp-story-player-impl.js
+++ b/src/amp-story-player/amp-story-player-impl.js
@@ -15,23 +15,33 @@
  */
 
 import * as ampToolboxCacheUrl from '@ampproject/toolbox-cache-url';
-import {IframePool} from './amp-story-player-iframe-pool';
+import {AmpStoryPlayerViewportObserver} from './amp-story-player-viewport-observer';
+import {Deferred} from '../core/data-structures/promise';
 import {Messaging} from '@ampproject/viewer-messaging';
-import {VisibilityState} from '../visibility-state';
+import {PageScroller} from './page-scroller';
+import {VisibilityState} from '../core/constants/visibility-state';
 import {
   addParamsToUrl,
   getFragment,
   isProxyOrigin,
   parseUrlWithA,
   removeFragment,
+  removeSearch,
+  serializeQueryString,
 } from '../url';
 import {applySandbox} from '../3p-frame';
-import {createCustomEvent} from '../event-helper';
-import {dict, map} from '../utils/object';
+import {createCustomEvent, listenOnce} from '../event-helper';
+import {dict} from '../core/types/object';
+import {isJsonScriptTag, tryFocus} from '../dom';
+import {parseQueryString} from '../core/types/string/url';
 // Source for this constant is css/amp-story-player-iframe.css
 import {cssText} from '../../build/amp-story-player-iframe.css';
+import {devAssertElement} from '../core/assert';
+import {findIndex, toArray} from '../core/types/array';
+import {getMode} from '../../src/mode';
+import {parseJson} from '../core/types/object/json';
 import {resetStyles, setStyle, setStyles} from '../style';
-import {toArray} from '../types';
+import {urls} from '../config';
 
 /** @enum {string} */
 const LoadStateClass = {
@@ -41,7 +51,7 @@ const LoadStateClass = {
 };
 
 /** @enum {number} */
-const IframePosition = {
+const StoryPosition = {
   PREVIOUS: -1,
   CURRENT: 0,
   NEXT: 1,
@@ -53,9 +63,7 @@ const SUPPORTED_CACHES = ['cdn.ampproject.org', 'www.bing-amp.com'];
 /** @const @type {!Array<string>} */
 const SANDBOX_MIN_LIST = ['allow-top-navigation'];
 
-/**
- * @enum {number}
- */
+/** @enum {number} */
 const SwipingState = {
   NOT_SWIPING: 0,
   SWIPING_TO_LEFT: 1,
@@ -65,11 +73,116 @@ const SwipingState = {
 /** @const {number} */
 const TOGGLE_THRESHOLD_PX = 50;
 
-/** @const {number} */
-const MAX_IFRAMES = 3;
+/**
+ * Fetches more stories when reaching the threshold.
+ * @const {number}
+ */
+const FETCH_STORIES_THRESHOLD = 2;
+
+/** @enum {string} */
+const DEPRECATED_BUTTON_TYPES = {
+  BACK: 'back-button',
+  CLOSE: 'close-button',
+};
+
+/** @enum {string} */
+const DEPRECATED_BUTTON_CLASSES = {
+  BASE: 'amp-story-player-exit-control-button',
+  HIDDEN: 'amp-story-player-hide-button',
+  [DEPRECATED_BUTTON_TYPES.BACK]: 'amp-story-player-back-button',
+  [DEPRECATED_BUTTON_TYPES.CLOSE]: 'amp-story-player-close-button',
+};
+
+/** @enum {string} */
+const DEPRECATED_EVENT_NAMES = {
+  [DEPRECATED_BUTTON_TYPES.BACK]: 'amp-story-player-back',
+  [DEPRECATED_BUTTON_TYPES.CLOSE]: 'amp-story-player-close',
+};
+
+/** @enum {string} */
+const STORY_STATE_TYPE = {
+  PAGE_ATTACHMENT_STATE: 'page-attachment',
+};
+
+/** @enum {string} */
+const STORY_MESSAGE_STATE_TYPE = {
+  PAGE_ATTACHMENT_STATE: 'PAGE_ATTACHMENT_STATE',
+  MUTED_STATE: 'MUTED_STATE',
+  CURRENT_PAGE_ID: 'CURRENT_PAGE_ID',
+  STORY_PROGRESS: 'STORY_PROGRESS',
+};
+
+/** @const {string} */
+export const AMP_STORY_PLAYER_EVENT = 'AMP_STORY_PLAYER_EVENT';
 
 /** @const {string} */
-export const IFRAME_IDX = '__AMP_IFRAME_IDX__';
+const CLASS_NO_NAVIGATION_TRANSITION =
+  'i-amphtml-story-player-no-navigation-transition';
+
+/** @typedef {{ state:string, value:(boolean|string) }} */
+let DocumentStateTypeDef;
+
+/**
+ * @typedef {{
+ *   href: string,
+ *   idx: number,
+ *   distance: number,
+ *   iframe: ?Element,
+ *   messagingPromise: ?Promise,
+ *   title: (?string),
+ *   posterImage: (?string),
+ *   storyContentLoaded: ?boolean,
+ *   connectedDeferred: !Deferred
+ * }}
+ */
+let StoryDef;
+
+/**
+ * @typedef {{
+ *   on: ?string,
+ *   action: ?string,
+ *   endpoint: ?string,
+ *   pageScroll: ?boolean,
+ *   autoplay: ?boolean,
+ * }}
+ */
+let BehaviorDef;
+
+/**
+ * @typedef {{
+ *   attribution: ?string,
+ * }}
+ */
+let DisplayDef;
+
+/**
+ * @typedef {{
+ *   controls: ?Array<!ViewerControlDef>,
+ *   behavior: ?BehaviorDef,
+ *   display: ?DisplayDef,
+ * }}
+ */
+let ConfigDef;
+
+/**
+ * @typedef {{
+ *   name: string,
+ *   state: (?string),
+ *   event: (?string),
+ *   visibility: (?string),
+ *   position: (?string),
+ *   backgroundImageUrl: (?string)
+ * }}
+ */
+export let ViewerControlDef;
+
+/** @type {string} */
+const TAG = 'amp-story-player';
+
+/** @enum {string} */
+const LOG_TYPE = {
+  DEV: 'amp-story-player-dev',
+};
 
 /**
  * Note that this is a vanilla JavaScript class and should not depend on AMP
@@ -79,20 +192,11 @@ export class AmpStoryPlayer {
   /**
    * @param {!Window} win
    * @param {!Element} element
-   * @constructor
    */
   constructor(win, element) {
-    console./*OK*/ assert(
-      element.childElementCount > 0,
-      'Missing configuration.'
-    );
-
     /** @private {!Window} */
     this.win_ = win;
 
-    /** @private {!Array<!Element>} */
-    this.iframes_ = [];
-
     /** @private {!Element} */
     this.element_ = element;
 
@@ -102,30 +206,27 @@ export class AmpStoryPlayer {
     /** @private {!Element} */
     this.cachedA_ = this.doc_.createElement('a');
 
-    /** @private {!Array<!HTMLAnchorElement>} */
+    /** @private {!Array<!StoryDef>} */
     this.stories_ = [];
 
     /** @private {?Element} */
     this.rootEl_ = null;
 
-    /** @private {boolean} */
-    this.isLaidOut_ = false;
-
-    /** @private {boolean} */
-    this.isBuilt_ = false;
-
-    /** @private {!IframePool} */
-    this.iframePool_ = new IframePool();
-
-    /** @private {!Object<string, !Promise>} */
-    this.messagingPromises_ = map();
-
     /** @private {number} */
     this.currentIdx_ = 0;
 
     /** @private {!SwipingState} */
     this.swipingState_ = SwipingState.NOT_SWIPING;
 
+    /** @private {?ConfigDef} */
+    this.playerConfig_ = null;
+
+    /** @private {?boolean} */
+    this.isFetchingStoriesEnabled_ = null;
+
+    /** @private {?boolean} */
+    this.isCircularWrappingEnabled_ = null;
+
     /** @private {!Object} */
     this.touchEventState_ = {
       startX: 0,
@@ -134,7 +235,24 @@ export class AmpStoryPlayer {
       isSwipeX: null,
     };
 
+    /** @private {?Deferred} */
+    this.currentStoryLoadDeferred_ = null;
+
+    /** @private {!Deferred} */
+    this.visibleDeferred_ = new Deferred();
+
     this.attachCallbacksToElement_();
+
+    /** @private {?PageScroller} */
+    this.pageScroller_ = new PageScroller(win);
+
+    /** @private {boolean} */
+    this.playing_ = true;
+
+    /** @private {?string} */
+    this.attribution_ = null;
+
+    return this.element_;
   }
 
   /**
@@ -142,7 +260,20 @@ export class AmpStoryPlayer {
    * @private
    */
   attachCallbacksToElement_() {
+    this.element_.buildPlayer = this.buildPlayer.bind(this);
+    this.element_.layoutPlayer = this.layoutPlayer.bind(this);
+    this.element_.getElement = this.getElement.bind(this);
+    this.element_.getStories = this.getStories.bind(this);
     this.element_.load = this.load.bind(this);
+    this.element_.show = this.show.bind(this);
+    this.element_.add = this.add.bind(this);
+    this.element_.play = this.play.bind(this);
+    this.element_.pause = this.pause.bind(this);
+    this.element_.go = this.go.bind(this);
+    this.element_.mute = this.mute.bind(this);
+    this.element_.unmute = this.unmute.bind(this);
+    this.element_.getStoryState = this.getStoryState.bind(this);
+    this.element_.rewind = this.rewind.bind(this);
   }
 
   /**
@@ -150,11 +281,94 @@ export class AmpStoryPlayer {
    * @public
    */
   load() {
-    this.buildCallback();
-    this.layoutCallback();
+    if (!this.element_.isConnected) {
+      throw new Error(
+        `[${TAG}] element must be connected to the DOM before calling load().`
+      );
+    }
+    if (!!this.element_.isBuilt_) {
+      throw new Error(`[${TAG}] calling load() on an already loaded element.`);
+    }
+    this.buildPlayer();
+    this.layoutPlayer();
+  }
+
+  /**
+   * Initializes story with properties used in this class and adds it to the
+   * stories array.
+   * @param {!StoryDef} story
+   * @private
+   */
+  initializeAndAddStory_(story) {
+    story.idx = this.stories_.length;
+    story.distance = story.idx - this.currentIdx_;
+    story.connectedDeferred = new Deferred();
+    this.stories_.push(story);
+  }
+
+  /**
+   * Adds stories to the player. Additionally, creates or assigns
+   * iframes to those that are close to the current playing story.
+   * @param {!Array<!{href: string, title: ?string, posterImage: ?string}>} newStories
+   * @public
+   */
+  add(newStories) {
+    if (newStories.length <= 0) {
+      return;
+    }
+
+    const isStoryDef = (story) => story && story.href;
+    if (!Array.isArray(newStories) || !newStories.every(isStoryDef)) {
+      throw new Error('"stories" parameter has the wrong structure');
+    }
+
+    const renderStartingIdx = this.stories_.length;
+
+    for (let i = 0; i < newStories.length; i++) {
+      const story = newStories[i];
+      this.initializeAndAddStory_(story);
+      this.buildIframeFor_(story);
+    }
+
+    this.render_(renderStartingIdx);
+  }
+
+  /**
+   * Makes the current story play its content/auto-advance
+   * @public
+   */
+  play() {
+    if (!this.element_.isLaidOut_) {
+      this.layoutPlayer();
+    }
+    this.togglePaused_(false);
+  }
+
+  /**
+   * Makes the current story pause its content/auto-advance
+   * @public
+   */
+  pause() {
+    this.togglePaused_(true);
   }
 
   /**
+   * Makes the current story play or pause its content/auto-advance
+   * @param {boolean} paused If true, the story will be paused, and it will be played otherwise
+   * @private
+   */
+  togglePaused_(paused) {
+    this.playing_ = !paused;
+    const currentStory = this.stories_[this.currentIdx_];
+
+    this.updateVisibilityState_(
+      currentStory,
+      paused ? VisibilityState.PAUSED : VisibilityState.VISIBLE
+    );
+  }
+
+  /**
+   *
    * @public
    * @return {!Element}
    */
@@ -162,72 +376,180 @@ export class AmpStoryPlayer {
     return this.element_;
   }
 
+  /**
+   * @return {!Array<!StoryDef>}
+   * @public
+   */
+  getStories() {
+    return this.stories_;
+  }
+
   /** @public */
-  buildCallback() {
-    if (this.isBuilt_) {
+  buildPlayer() {
+    if (!!this.element_.isBuilt_) {
       return;
     }
 
-    this.stories_ = toArray(this.element_.querySelectorAll('a'));
-
+    this.initializeAnchorElStories_();
     this.initializeShadowRoot_();
-    this.initializeIframes_();
+    this.buildStories_();
+    this.initializeButton_();
+    this.readPlayerConfig_();
+    this.maybeFetchMoreStories_(this.stories_.length - this.currentIdx_ - 1);
+    this.initializeAutoplay_();
+    this.initializeAttribution_();
+    this.initializePageScroll_();
+    this.initializeCircularWrapping_();
     this.signalReady_();
-    this.isBuilt_ = true;
+    this.element_.isBuilt_ = true;
+  }
+
+  /**
+   * Initializes stories declared inline as <a> elements.
+   * @private
+   */
+  initializeAnchorElStories_() {
+    const anchorEls = toArray(this.element_.querySelectorAll('a'));
+    anchorEls.forEach((element) => {
+      const posterImgEl = element.querySelector(
+        'img[data-amp-story-player-poster-img]'
+      );
+      const posterImgSrc = posterImgEl && posterImgEl.getAttribute('src');
+
+      const story = /** @type {!StoryDef} */ ({
+        href: element.href,
+        title: (element.textContent && element.textContent.trim()) || null,
+        posterImage:
+          element.getAttribute('data-poster-portrait-src') || posterImgSrc,
+      });
+
+      this.initializeAndAddStory_(story);
+    });
   }
 
   /** @private */
   signalReady_() {
-    this.element_.dispatchEvent(createCustomEvent(this.win_, 'ready', {}));
+    this.element_.dispatchEvent(
+      createCustomEvent(this.win_, 'ready', dict({}))
+    );
     this.element_.isReady = true;
   }
 
   /** @private */
-  initializeIframes_() {
-    for (let idx = 0; idx < MAX_IFRAMES && idx < this.stories_.length; idx++) {
-      const story = this.stories_[idx];
-      this.buildIframe_(story);
-
-      story[IFRAME_IDX] = idx;
-      this.setUpMessagingForIframe_(story, this.iframes_[idx]);
-
-      this.iframePool_.addIframeIdx(idx);
-      this.iframePool_.addStoryIdx(idx);
-    }
+  buildStories_() {
+    this.stories_.forEach((story) => {
+      this.buildIframeFor_(story);
+    });
   }
 
   /** @private */
   initializeShadowRoot_() {
-    this.rootEl_ = this.doc_.createElement('main');
+    this.rootEl_ = this.doc_.createElement('div');
+    this.rootEl_.classList.add('i-amphtml-story-player-main-container');
+
+    const shadowContainer = this.doc_.createElement('div');
+
+    // For AMP version.
+    shadowContainer.classList.add(
+      'i-amphtml-fill-content',
+      'i-amphtml-story-player-shadow-root-intermediary'
+    );
 
-    // Create shadow root
-    const shadowRoot = this.element_.attachShadow({mode: 'open'});
+    this.element_.appendChild(shadowContainer);
+
+    const containerToUse =
+      getMode().test || !this.element_.attachShadow
+        ? shadowContainer
+        : shadowContainer.attachShadow({mode: 'open'});
 
     // Inject default styles
     const styleEl = this.doc_.createElement('style');
     styleEl.textContent = cssText;
-    shadowRoot.appendChild(styleEl);
-    shadowRoot.appendChild(this.rootEl_);
+    containerToUse.appendChild(styleEl);
+    containerToUse.insertBefore(this.rootEl_, containerToUse.firstElementChild);
+  }
+
+  /**
+   * Helper to create a button.
+   * TODO(#30031): delete this once new custom UI API is ready.
+   * @private
+   */
+  initializeButton_() {
+    const option = this.element_.getAttribute('exit-control');
+    if (!Object.values(DEPRECATED_BUTTON_TYPES).includes(option)) {
+      return;
+    }
+
+    const button = this.doc_.createElement('button');
+    this.rootEl_.appendChild(button);
+
+    button.classList.add(DEPRECATED_BUTTON_CLASSES[option]);
+    button.classList.add(DEPRECATED_BUTTON_CLASSES.BASE);
+
+    button.addEventListener('click', () => {
+      this.element_.dispatchEvent(
+        createCustomEvent(this.win_, DEPRECATED_EVENT_NAMES[option], dict({}))
+      );
+    });
+  }
+
+  /**
+   * Gets publisher configuration for the player
+   * @private
+   * @return {?ConfigDef}
+   */
+  readPlayerConfig_() {
+    if (this.playerConfig_) {
+      return this.playerConfig_;
+    }
+
+    const ampCache = this.element_.getAttribute('amp-cache');
+    if (ampCache && !SUPPORTED_CACHES.includes(ampCache)) {
+      console /*OK*/
+        .error(
+          `[${TAG}]`,
+          `Unsupported cache specified, use one of following: ${SUPPORTED_CACHES}`
+        );
+    }
+
+    const scriptTag = this.element_.querySelector('script');
+    if (!scriptTag) {
+      return null;
+    }
+
+    if (!isJsonScriptTag(scriptTag)) {
+      throw new Error('<script> child must have type="application/json"');
+    }
+
+    try {
+      this.playerConfig_ = /** @type {!ConfigDef} */ (
+        parseJson(scriptTag.textContent)
+      );
+    } catch (reason) {
+      console /*OK*/
+        .error(`[${TAG}] `, reason);
+    }
+
+    return this.playerConfig_;
   }
 
   /**
-   * @param {!Element} story
+   * @param {!StoryDef} story
    * @private
    */
-  buildIframe_(story) {
+  buildIframeFor_(story) {
     const iframeEl = this.doc_.createElement('iframe');
-    setStyle(
-      iframeEl,
-      'backgroundImage',
-      story.getAttribute('data-poster-portrait-src')
-    );
+    if (story.posterImage) {
+      setStyle(iframeEl, 'backgroundImage', story.posterImage);
+    }
     iframeEl.classList.add('story-player-iframe');
-    this.iframes_.push(iframeEl);
+    iframeEl.setAttribute('allow', 'autoplay');
 
     applySandbox(iframeEl);
     this.addSandboxFlags_(iframeEl);
     this.initializeLoadingListeners_(iframeEl);
-    this.rootEl_.appendChild(iframeEl);
+
+    story.iframe = iframeEl;
   }
 
   /**
@@ -235,7 +557,11 @@ export class AmpStoryPlayer {
    * @private
    */
   addSandboxFlags_(iframe) {
-    if (!iframe.sandbox || !iframe.sandbox.supports) {
+    if (
+      !iframe.sandbox ||
+      !iframe.sandbox.supports ||
+      iframe.sandbox.length <= 0
+    ) {
       return; // Can't feature detect support.
     }
 
@@ -252,56 +578,112 @@ export class AmpStoryPlayer {
 
   /**
    * Sets up messaging for a story inside an iframe.
-   * @param {!Element} story
-   * @param {!Element} iframeEl
+   * @param {!StoryDef} story
    * @private
    */
-  setUpMessagingForIframe_(story, iframeEl) {
-    const iframeIdx = story[IFRAME_IDX];
+  setUpMessagingForStory_(story) {
+    const {iframe} = story;
 
-    this.messagingPromises_[iframeIdx] = new Promise((resolve) => {
-      this.initializeHandshake_(story, iframeEl).then(
+    story.messagingPromise = new Promise((resolve) => {
+      this.initializeHandshake_(story, iframe).then(
         (messaging) => {
           messaging.setDefaultHandler(() => Promise.resolve());
           messaging.registerHandler('touchstart', (event, data) => {
-            this.onTouchStart_(data);
+            this.onTouchStart_(/** @type {!Event} */ (data));
           });
 
           messaging.registerHandler('touchmove', (event, data) => {
-            this.onTouchMove_(data);
+            this.onTouchMove_(/** @type {!Event} */ (data));
           });
 
-          messaging.registerHandler('touchend', () => {
-            this.onTouchEnd_();
+          messaging.registerHandler('touchend', (event, data) => {
+            this.onTouchEnd_(/** @type {!Event} */ (data));
           });
 
           messaging.registerHandler('selectDocument', (event, data) => {
-            this.onSelectDocument_(data);
+            this.onSelectDocument_(/** @type {!Object} */ (data));
+          });
+
+          messaging.sendRequest(
+            'onDocumentState',
+            dict({'state': STORY_MESSAGE_STATE_TYPE.PAGE_ATTACHMENT_STATE}),
+            false
+          );
+
+          messaging.sendRequest(
+            'onDocumentState',
+            dict({'state': STORY_MESSAGE_STATE_TYPE.CURRENT_PAGE_ID}),
+            false
+          );
+
+          messaging.sendRequest(
+            'onDocumentState',
+            dict({'state': STORY_MESSAGE_STATE_TYPE.MUTED_STATE})
+          );
+
+          messaging.registerHandler('documentStateUpdate', (event, data) => {
+            this.onDocumentStateUpdate_(
+              /** @type {!DocumentStateTypeDef} */ (data),
+              messaging
+            );
           });
+
+          if (this.playerConfig_ && this.playerConfig_.controls) {
+            this.updateControlsStateForAllStories_(story.idx);
+
+            messaging.sendRequest(
+              'customDocumentUI',
+              dict({'controls': this.playerConfig_.controls}),
+              false
+            );
+          }
+
           resolve(messaging);
         },
         (err) => {
           console /*OK*/
-            .log({err});
+            .error(`[${TAG}]`, err);
         }
       );
     });
   }
 
   /**
-   * @param {!Element} story
+   * Updates the controls config for a given story.
+   * @param {number} storyIdx
+   * @private
+   */
+  updateControlsStateForAllStories_(storyIdx) {
+    // Disables skip-to-next button when story is the last one in the player.
+    if (storyIdx === this.stories_.length - 1) {
+      const skipButtonIdx = findIndex(
+        this.playerConfig_.controls,
+        (control) =>
+          control.name === 'skip-next' || control.name === 'skip-to-next'
+      );
+
+      if (skipButtonIdx >= 0) {
+        this.playerConfig_.controls[skipButtonIdx].state = 'disabled';
+      }
+    }
+  }
+
+  /**
+   * @param {!StoryDef} story
    * @param {!Element} iframeEl
    * @return {!Promise<!Messaging>}
    * @private
    */
   initializeHandshake_(story, iframeEl) {
-    return this.maybeGetCacheUrl_(story.href).then((url) => {
-      return Messaging.waitForHandshakeFromDocument(
+    return this.maybeGetCacheUrl_(story.href).then((url) =>
+      Messaging.waitForHandshakeFromDocument(
         this.win_,
         iframeEl.contentWindow,
-        this.getEncodedLocation_(url).origin
-      );
-    });
+        this.getEncodedLocation_(url).origin,
+        /*opt_token*/ null,
+        urls.cdnProxyRegex
+      )
+    );
   }
 
   /**
@@ -326,181 +708,502 @@ export class AmpStoryPlayer {
   /**
    * @public
    */
-  layoutCallback() {
-    if (this.isLaidOut_) {
+  layoutPlayer() {
+    if (!!this.element_.isLaidOut_) {
       return;
     }
 
-    for (let idx = 0; idx < this.stories_.length && idx < MAX_IFRAMES; idx++) {
-      const story = this.stories_[idx];
-      const iframeIdx = story[IFRAME_IDX];
-      const iframe = this.iframes_[iframeIdx];
-      this.layoutIframe_(
-        story,
-        iframe,
-        idx === 0 ? VisibilityState.VISIBLE : VisibilityState.PRERENDER
-      );
-    }
+    new AmpStoryPlayerViewportObserver(this.win_, this.element_, () =>
+      this.visibleDeferred_.resolve()
+    );
+
+    this.render_();
 
-    this.isLaidOut_ = true;
+    this.element_.isLaidOut_ = true;
   }
 
   /**
-   * Navigates to the next story in the player.
+   * Fetches more stories from the publisher's endpoint.
+   * @return {!Promise}
    * @private
    */
-  next_() {
-    if (this.currentIdx_ + 1 >= this.stories_.length) {
-      return;
+  fetchStories_() {
+    let {endpoint} = this.playerConfig_.behavior;
+    if (!endpoint) {
+      this.isFetchingStoriesEnabled_ = false;
+      return Promise.resolve();
     }
 
-    this.currentIdx_++;
-
-    const previousStory = this.stories_[this.currentIdx_ - 1];
-    this.updatePreviousIframe_(
-      previousStory[IFRAME_IDX],
-      IframePosition.PREVIOUS
-    );
+    const init = {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+      },
+    };
 
-    const currentStory = this.stories_[this.currentIdx_];
-    this.updateCurrentIframe_(currentStory[IFRAME_IDX]);
+    endpoint = endpoint.replace(/\${offset}/, this.stories_.length.toString());
 
-    const nextStoryIdx = this.currentIdx_ + 1;
-    if (
-      nextStoryIdx < this.stories_.length &&
-      this.stories_[nextStoryIdx][IFRAME_IDX] === undefined
-    ) {
-      this.allocateIframeForStory_(nextStoryIdx);
-    }
+    return fetch(endpoint, init)
+      .then((response) => response.json())
+      .catch((reason) => {
+        console /*OK*/
+          .error(`[${TAG}]`, reason);
+      });
   }
 
   /**
-   * Navigates to the previous story in the player.
+   * Resolves currentStoryLoadDeferred_ when given story's content is finished
+   * loading.
+   * @param {!StoryDef} story
    * @private
    */
-  previous_() {
-    if (this.currentIdx_ - 1 < 0) {
-      return;
-    }
+  initStoryContentLoadedPromise_(story) {
+    this.currentStoryLoadDeferred_ = new Deferred();
+
+    story.messagingPromise.then((messaging) =>
+      messaging.registerHandler('storyContentLoaded', () => {
+        // Stories that already loaded won't dispatch a `storyContentLoaded`
+        // event anymore, which is why we need this sync property.
+        story.storyContentLoaded = true;
+        this.currentStoryLoadDeferred_.resolve();
+      })
+    );
+  }
 
-    this.currentIdx_--;
+  /**
+   * Shows the story provided by the URL in the player and go to the page if provided.
+   * @param {?string} storyUrl
+   * @param {string=} pageId
+   * @param {{animate: boolean?}} options
+   * @return {!Promise}
+   */
+  show(storyUrl, pageId = null, options = {}) {
+    const story = this.getStoryFromUrl_(storyUrl);
 
-    const previousStory = this.stories_[this.currentIdx_ + 1];
-    this.updatePreviousIframe_(previousStory[IFRAME_IDX], IframePosition.NEXT);
+    let renderPromise = Promise.resolve();
+    if (story.idx !== this.currentIdx_) {
+      this.currentIdx_ = story.idx;
 
-    const currentStory = this.stories_[this.currentIdx_];
-    this.updateCurrentIframe_(currentStory[IFRAME_IDX]);
+      renderPromise = this.render_();
 
-    const nextStoryIdx = this.currentIdx_ - 1;
-    if (
-      nextStoryIdx >= 0 &&
-      this.stories_[nextStoryIdx][IFRAME_IDX] === undefined
-    ) {
-      this.allocateIframeForStory_(nextStoryIdx, true /** reverse */);
+      if (options.animate === false) {
+        this.rootEl_.classList.toggle(CLASS_NO_NAVIGATION_TRANSITION, true);
+        listenOnce(story.iframe, 'transitionend', () => {
+          this.rootEl_.classList.remove(CLASS_NO_NAVIGATION_TRANSITION);
+        });
+      }
+      this.onNavigation_();
+    }
+
+    if (pageId != null) {
+      return renderPromise.then(() => this.goToPageId_(pageId));
     }
+
+    return renderPromise;
+  }
+
+  /** Sends a message muting the current story. */
+  mute() {
+    const story = this.stories_[this.currentIdx_];
+    this.updateMutedState_(story, true);
+  }
+
+  /** Sends a message unmuting the current story. */
+  unmute() {
+    const story = this.stories_[this.currentIdx_];
+    this.updateMutedState_(story, false);
   }
 
   /**
-   * Updates an iframe to the `inactive` state.
-   * @param {number} iframeIdx
-   * @param {!IframePosition} position
-   * @private
+   * Sends a message asking for the current story's state and dispatches the appropriate event.
+   * @param {string} storyStateType
+   * @public
    */
-  updatePreviousIframe_(iframeIdx, position) {
-    this.updateVisibilityState_(iframeIdx, VisibilityState.INACTIVE);
-    this.updateIframePosition_(iframeIdx, position);
+  getStoryState(storyStateType) {
+    switch (storyStateType) {
+      case STORY_STATE_TYPE.PAGE_ATTACHMENT_STATE:
+        this.getPageAttachmentState_();
+        break;
+      default:
+        break;
+    }
   }
 
   /**
-   * Updates an iframe to the `current` state.
-   * @param {number} iframeIdx
+   * Indicates the player changed story.
+   * @param {!Object} data
    * @private
    */
-  updateCurrentIframe_(iframeIdx) {
-    this.updateVisibilityState_(iframeIdx, VisibilityState.VISIBLE);
-    this.updateIframePosition_(iframeIdx, IframePosition.CURRENT);
+  signalNavigation_(data) {
+    const event = createCustomEvent(
+      this.win_,
+      'navigation',
+      /** @type {!JsonObject} */ (data)
+    );
+    this.element_.dispatchEvent(event);
   }
 
   /**
-   * Updates iframe position.
-   * @param {number} iframeIdx
-   * @param {!IframePosition} position
+   * Triggers when swithing from one story to another.
    * @private
    */
-  updateIframePosition_(iframeIdx, position) {
-    requestAnimationFrame(() => {
-      const iframe = this.iframes_[iframeIdx];
-      resetStyles(iframe, ['transform', 'transition']);
-      iframe.setAttribute('i-amphtml-iframe-position', position);
-    });
+  onNavigation_() {
+    const index = this.currentIdx_;
+    const remaining = this.stories_.length - this.currentIdx_ - 1;
+    const navigation = {
+      'index': index,
+      'remaining': remaining,
+    };
+
+    this.signalNavigation_(navigation);
+    this.maybeFetchMoreStories_(remaining);
   }
 
   /**
-   * Detaches iframe from a story and gives it to the next story. It detaches
-   * the iframe from the story furthest away; depending where the user is
-   * navigating and allocates it to a story that the user is close to seeing.
-   * @param {number} nextStoryIdx
-   * @param {boolean} reverse
+   * Fetches more stories if appropiate.
+   * @param {number} remaining Number of stories remaining in the player.
    * @private
    */
-  allocateIframeForStory_(nextStoryIdx, reverse = false) {
-    const detachedStoryIdx = reverse
-      ? this.iframePool_.rotateLast(nextStoryIdx)
-      : this.iframePool_.rotateFirst(nextStoryIdx);
-
-    const detachedStory = this.stories_[detachedStoryIdx];
-    const nextStory = this.stories_[nextStoryIdx];
-
-    this.messagingPromises_[detachedStory[IFRAME_IDX]].then((messaging) => {
-      messaging.unregisterHandler('selectDocument');
-    });
-
-    nextStory[IFRAME_IDX] = detachedStory[IFRAME_IDX];
-    detachedStory[IFRAME_IDX] = undefined;
-
-    const nextIframe = this.iframes_[nextStory[IFRAME_IDX]];
-    this.layoutIframe_(nextStory, nextIframe, VisibilityState.PRERENDER);
-    this.updateIframePosition_(
-      nextStory[IFRAME_IDX],
-      reverse ? IframePosition.PREVIOUS : IframePosition.NEXT
-    );
-    this.setUpMessagingForIframe_(nextStory, nextIframe);
+  maybeFetchMoreStories_(remaining) {
+    if (
+      this.playerConfig_ &&
+      this.playerConfig_.behavior &&
+      this.shouldFetchMoreStories_() &&
+      remaining <= FETCH_STORIES_THRESHOLD
+    ) {
+      this.fetchStories_()
+        .then((stories) => {
+          if (!stories) {
+            return;
+          }
+          this.add(stories);
+        })
+        .catch((reason) => {
+          console /*OK*/
+            .error(`[${TAG}]`, reason);
+        });
+    }
   }
 
   /**
-   * @param {!Element} story
-   * @param {!Element} iframe
-   * @param {!VisibilityState} visibilityState
+   * @param {!Object} behavior
+   * @return {boolean}
    * @private
    */
-  layoutIframe_(story, iframe, visibilityState) {
-    this.maybeGetCacheUrl_(story.href).then((url) => {
-      const {href} = this.getEncodedLocation_(url, visibilityState);
-      iframe.setAttribute('src', href);
-    });
+  validateBehaviorDef_(behavior) {
+    return behavior && behavior.on && behavior.action;
   }
 
   /**
-   * Gets cache url, unless amp-cache is not defined.
-   * @param {string} url
-   * @return {!Promise<string>}
+   * Checks if fetching more stories is enabled and validates the configuration.
+   * @return {boolean}
    * @private
    */
-  maybeGetCacheUrl_(url) {
-    const ampCache = this.element_.getAttribute('amp-cache');
-
-    if (!ampCache || isProxyOrigin(url)) {
-      return Promise.resolve(url);
+  shouldFetchMoreStories_() {
+    if (this.isFetchingStoriesEnabled_ !== null) {
+      return this.isFetchingStoriesEnabled_;
     }
 
-    if (!SUPPORTED_CACHES.includes(ampCache)) {
-      throw new Error(
-        `Unsupported cache, use one of following: ${SUPPORTED_CACHES}`
-      );
-    }
+    const {behavior} = this.playerConfig_;
 
-    return ampToolboxCacheUrl
-      .createCacheUrl(ampCache, url, 'viewer' /** servingType */)
+    const hasEndFetchBehavior = (behavior) =>
+      behavior.on === 'end' && behavior.action === 'fetch' && behavior.endpoint;
+
+    this.isFetchingStoriesEnabled_ =
+      this.validateBehaviorDef_(behavior) && hasEndFetchBehavior(behavior);
+
+    return this.isFetchingStoriesEnabled_;
+  }
+
+  /**
+   * Navigates to the next story in the player.
+   * @private
+   */
+  next_() {
+    if (
+      !this.isCircularWrappingEnabled_ &&
+      this.isIndexOutofBounds_(this.currentIdx_ + 1)
+    ) {
+      return;
+    }
+
+    if (
+      this.isCircularWrappingEnabled_ &&
+      this.isIndexOutofBounds_(this.currentIdx_ + 1)
+    ) {
+      this.go(1);
+      return;
+    }
+
+    this.currentIdx_++;
+    this.render_();
+
+    this.onNavigation_();
+  }
+
+  /**
+   * Navigates to the previous story in the player.
+   * @private
+   */
+  previous_() {
+    if (
+      !this.isCircularWrappingEnabled_ &&
+      this.isIndexOutofBounds_(this.currentIdx_ - 1)
+    ) {
+      return;
+    }
+
+    if (
+      this.isCircularWrappingEnabled_ &&
+      this.isIndexOutofBounds_(this.currentIdx_ - 1)
+    ) {
+      this.go(-1);
+      return;
+    }
+
+    this.currentIdx_--;
+    this.render_();
+
+    this.onNavigation_();
+  }
+
+  /**
+   * Navigates stories given a number.
+   * @param {number} storyDelta
+   * @param {number=} pageDelta
+   * @param {{animate: boolean?}} options
+   */
+  go(storyDelta, pageDelta = 0, options = {}) {
+    if (storyDelta === 0 && pageDelta === 0) {
+      return;
+    }
+
+    if (
+      !this.isCircularWrappingEnabled_ &&
+      this.isIndexOutofBounds_(this.currentIdx_ + storyDelta)
+    ) {
+      throw new Error('Out of Story range.');
+    }
+
+    const newStoryIdx = this.currentIdx_ + storyDelta;
+    const newStory =
+      storyDelta > 0
+        ? this.stories_[newStoryIdx % this.stories_.length]
+        : this.stories_[
+            ((newStoryIdx % this.stories_.length) + this.stories_.length) %
+              this.stories_.length
+          ];
+
+    let showPromise = Promise.resolve();
+    if (this.currentIdx_ !== newStory.idx) {
+      showPromise = this.show(newStory.href, /* pageId */ null, options);
+    }
+
+    showPromise.then(() => {
+      this.selectPage_(pageDelta);
+    });
+  }
+
+  /**
+   * Updates story position.
+   * @param {!StoryDef} story
+   * @return {!Promise}
+   * @private
+   */
+  updatePosition_(story) {
+    const position =
+      story.distance === 0
+        ? StoryPosition.CURRENT
+        : story.idx > this.currentIdx_
+        ? StoryPosition.NEXT
+        : StoryPosition.PREVIOUS;
+
+    requestAnimationFrame(() => {
+      const {iframe} = story;
+      resetStyles(iframe, ['transform', 'transition']);
+      iframe.setAttribute('i-amphtml-iframe-position', position);
+    });
+  }
+
+  /**
+   * Returns a promise that makes sure current story gets loaded first before
+   * others.
+   * @param {!StoryDef} story
+   * @return {!Promise}
+   * @private
+   */
+  currentStoryPromise_(story) {
+    if (this.stories_[this.currentIdx_].storyContentLoaded) {
+      return Promise.resolve();
+    }
+
+    if (story.distance !== 0) {
+      return this.currentStoryLoadDeferred_.promise;
+    }
+
+    if (this.currentStoryLoadDeferred_) {
+      // Cancel previous story load promise.
+      this.currentStoryLoadDeferred_.reject(
+        `[${LOG_TYPE.DEV}] Cancelling previous story load promise.`
+      );
+    }
+
+    this.initStoryContentLoadedPromise_(story);
+    return Promise.resolve();
+  }
+
+  /**
+   * - Updates distances of the stories.
+   * - Appends / removes from the DOM depending on distances.
+   * - Sets visibility state.
+   * - Loads story N+1 when N is ready.
+   * - Positions iframes depending on distance.
+   * @param {number=} startingIdx
+   * @return {!Promise}
+   * @private
+   */
+  render_(startingIdx = this.currentIdx_) {
+    const renderPromises = [];
+
+    for (let i = 0; i < this.stories_.length; i++) {
+      const story = this.stories_[(i + startingIdx) % this.stories_.length];
+
+      const oldDistance = story.distance;
+      story.distance = Math.abs(this.currentIdx_ - story.idx);
+
+      // 1. Determine whether iframe should be in DOM tree or not.
+      if (oldDistance <= 1 && story.distance > 1) {
+        this.removeFromDom_(story);
+      }
+
+      if (story.distance <= 1 && !story.iframe.isConnected) {
+        this.appendToDom_(story);
+      }
+
+      // Only create renderPromises for neighbor stories.
+      if (story.distance > 1) {
+        continue;
+      }
+
+      renderPromises.push(
+        // 1. Wait for current story to load before evaluating neighbor stories.
+        this.currentStoryPromise_(story)
+          .then(() => this.maybeGetCacheUrl_(story.href))
+          // 2. Set iframe src when appropiate
+          .then((storyUrl) => {
+            if (!this.sanitizedUrlsAreEquals_(storyUrl, story.iframe.src)) {
+              this.setSrc_(story, storyUrl);
+            }
+          })
+          // 3. Waits for player to be visible before updating visibility
+          // state.
+          .then(() => this.visibleDeferred_.promise)
+          // 4. Update the visibility state of the story.
+          .then(() => {
+            if (story.distance === 0 && this.playing_) {
+              this.updateVisibilityState_(story, VisibilityState.VISIBLE);
+            }
+
+            if (oldDistance === 0 && story.distance === 1) {
+              this.updateVisibilityState_(story, VisibilityState.INACTIVE);
+            }
+          })
+          // 5. Finally update the story position.
+          .then(() => {
+            this.updatePosition_(story);
+
+            if (story.distance === 0) {
+              tryFocus(story.iframe);
+            }
+          })
+          .catch((err) => {
+            if (err.includes(LOG_TYPE.DEV)) {
+              return;
+            }
+            console /*OK*/
+              .error(`[${TAG}]`, err);
+          })
+      );
+    }
+
+    return Promise.all(renderPromises);
+  }
+
+  /**
+   * @param {!StoryDef} story
+   * @private
+   */
+  appendToDom_(story) {
+    this.rootEl_.appendChild(story.iframe);
+    this.setUpMessagingForStory_(story);
+    story.connectedDeferred.resolve();
+  }
+
+  /**
+   * @param {!StoryDef} story
+   * @private
+   */
+  removeFromDom_(story) {
+    story.storyContentLoaded = false;
+    story.connectedDeferred = new Deferred();
+    story.iframe.setAttribute('src', '');
+    story.iframe.remove();
+  }
+
+  /**
+   * Sets the story src to the iframe.
+   * @param {!StoryDef} story
+   * @param {string} url
+   * @return {!Promise}
+   * @private
+   */
+  setSrc_(story, url) {
+    const {iframe} = story;
+    const {href} = this.getEncodedLocation_(url, VisibilityState.PRERENDER);
+
+    iframe.setAttribute('src', href);
+    if (story.title) {
+      iframe.setAttribute('title', story.title);
+    }
+  }
+
+  /**
+   * Compares href from the story with the href in the iframe.
+   * @param {string} storyHref
+   * @param {string} iframeHref
+   * @return {boolean}
+   * @private
+   */
+  sanitizedUrlsAreEquals_(storyHref, iframeHref) {
+    if (iframeHref.length <= 0) {
+      return false;
+    }
+
+    const sanitizedIframeHref = removeFragment(removeSearch(iframeHref));
+    const sanitizedStoryHref = removeFragment(removeSearch(storyHref));
+
+    return sanitizedIframeHref === sanitizedStoryHref;
+  }
+
+  /**
+   * Gets cache url, unless amp-cache is not defined.
+   * @param {string} url
+   * @return {!Promise<string>}
+   * @private
+   */
+  maybeGetCacheUrl_(url) {
+    const ampCache = this.element_.getAttribute('amp-cache');
+
+    if (
+      !ampCache ||
+      isProxyOrigin(url) ||
+      !SUPPORTED_CACHES.includes(ampCache)
+    ) {
+      return Promise.resolve(url);
+    }
+
+    return ampToolboxCacheUrl
+      .createCacheUrl(ampCache, url, 'viewer' /** servingType */)
       .then((cacheUrl) => {
         return cacheUrl;
       });
@@ -514,47 +1217,315 @@ export class AmpStoryPlayer {
    * @private
    */
   getEncodedLocation_(href, visibilityState = VisibilityState.INACTIVE) {
-    const params = dict({
-      'amp_js_v': '0.1',
+    const playerFragmentParams = {
       'visibilityState': visibilityState,
       'origin': this.win_.origin,
       'showStoryUrlInfo': '0',
       'storyPlayer': 'v0',
       'cap': 'swipe',
-    });
+    };
+
+    if (this.attribution_ === 'auto') {
+      playerFragmentParams['attribution'] = 'auto';
+    }
 
-    const fragmentParam = getFragment(href);
-    const noFragmentUrl = removeFragment(href);
-    let inputUrl = addParamsToUrl(noFragmentUrl, params);
+    const originalFragmentString = getFragment(href);
+    const originalFragments = parseQueryString(originalFragmentString);
 
-    // Prepend fragment of original url.
-    const prependFragment = (match) => {
-      // Remove the last '&' after amp_js_v=0.1 and replace with a '#'.
-      return fragmentParam + match.slice(0, -1) + '#';
-    };
-    inputUrl = inputUrl.replace(/[?&]amp_js_v=0.1&/, prependFragment);
+    const fragmentParams = /** @type {!JsonObject} */ ({
+      ...originalFragments,
+      ...playerFragmentParams,
+    });
 
-    return parseUrlWithA(this.cachedA_, inputUrl);
+    let noFragmentUrl = removeFragment(href);
+    if (isProxyOrigin(href)) {
+      const ampJsQueryParam = dict({
+        'amp_js_v': '0.1',
+      });
+      noFragmentUrl = addParamsToUrl(noFragmentUrl, ampJsQueryParam);
+    }
+    const inputUrl = noFragmentUrl + '#' + serializeQueryString(fragmentParams);
+
+    return parseUrlWithA(
+      /** @type {!HTMLAnchorElement} */ (this.cachedA_),
+      inputUrl
+    );
   }
 
   /**
    * Updates the visibility state of the story inside the iframe.
-   * @param {number} iframeIdx
+   * @param {!StoryDef} story
    * @param {!VisibilityState} visibilityState
    * @private
    */
-  updateVisibilityState_(iframeIdx, visibilityState) {
-    this.messagingPromises_[iframeIdx].then((messaging) => {
-      messaging.sendRequest('visibilitychange', {state: visibilityState}, true);
+  updateVisibilityState_(story, visibilityState) {
+    story.messagingPromise.then((messaging) =>
+      messaging.sendRequest('visibilitychange', {state: visibilityState}, true)
+    );
+  }
+
+  /**
+   * Updates the specified iframe's story state with given value.
+   * @param {!StoryDef} story
+   * @param {string} state
+   * @param {boolean} value
+   * @private
+   */
+  updateStoryState_(story, state, value) {
+    story.messagingPromise.then((messaging) => {
+      messaging.sendRequest('setDocumentState', {state, value});
+    });
+  }
+
+  /**
+   * Update the muted state of the story inside the iframe.
+   * @param {!StoryDef} story
+   * @param {boolean} mutedValue
+   * @private
+   */
+  updateMutedState_(story, mutedValue) {
+    this.updateStoryState_(
+      story,
+      STORY_MESSAGE_STATE_TYPE.MUTED_STATE,
+      mutedValue
+    );
+  }
+
+  /**
+   * Send message to story asking for page attachment state.
+   * @private
+   */
+  getPageAttachmentState_() {
+    const story = this.stories_[this.currentIdx_];
+
+    story.messagingPromise.then((messaging) => {
+      messaging
+        .sendRequest(
+          'getDocumentState',
+          {state: STORY_MESSAGE_STATE_TYPE.PAGE_ATTACHMENT_STATE},
+          true
+        )
+        .then((event) => this.dispatchPageAttachmentEvent_(event.value));
     });
   }
 
+  /**
+   * @param {string} pageId
+   * @private
+   */
+  goToPageId_(pageId) {
+    const story = this.stories_[this.currentIdx_];
+
+    story.messagingPromise.then((messaging) =>
+      messaging.sendRequest('selectPage', {'id': pageId})
+    );
+  }
+
+  /**
+   * Returns the story given a URL.
+   * @param {string} storyUrl
+   * @return {!StoryDef}
+   * @private
+   */
+  getStoryFromUrl_(storyUrl) {
+    // TODO(enriqe): sanitize URLs for matching.
+    const storyIdx = storyUrl
+      ? findIndex(this.stories_, ({href}) => href === storyUrl)
+      : this.currentIdx_;
+
+    if (!this.stories_[storyIdx]) {
+      throw new Error(`Story URL not found in the player: ${storyUrl}`);
+    }
+
+    return this.stories_[storyIdx];
+  }
+
+  /**
+   * Rewinds the given story.
+   * @param {string} storyUrl
+   */
+  rewind(storyUrl) {
+    const story = this.getStoryFromUrl_(storyUrl);
+
+    this.whenConnected_(story)
+      .then(() => story.messagingPromise)
+      .then((messaging) => messaging.sendRequest('rewind', {}));
+  }
+
+  /**
+   * Returns a promise that resolves when the story is connected to the DOM.
+   * @param {!StoryDef} story
+   * @return {!Promise}
+   * @private
+   */
+  whenConnected_(story) {
+    if (story.iframe.isConnected) {
+      return Promise.resolve();
+    }
+    return story.connectedDeferred.promise;
+  }
+
+  /**
+   * Sends a message to the current story to navigate delta pages.
+   * @param {number} delta
+   * @private
+   */
+  selectPage_(delta) {
+    if (delta === 0) {
+      return;
+    }
+
+    this.sendSelectPageDelta_(delta);
+  }
+
+  /**
+   * @param {number} delta
+   * @private
+   */
+  sendSelectPageDelta_(delta) {
+    const story = this.stories_[this.currentIdx_];
+
+    story.messagingPromise.then((messaging) =>
+      messaging.sendRequest('selectPage', {delta})
+    );
+  }
+
+  /**
+   * React to documentStateUpdate events.
+   * @param {!DocumentStateTypeDef} data
+   * @param {Messaging} messaging
+   * @private
+   */
+  onDocumentStateUpdate_(data, messaging) {
+    switch (data.state) {
+      case STORY_MESSAGE_STATE_TYPE.PAGE_ATTACHMENT_STATE:
+        this.onPageAttachmentStateUpdate_(/** @type {boolean} */ (data.value));
+        break;
+      case STORY_MESSAGE_STATE_TYPE.CURRENT_PAGE_ID:
+        this.onCurrentPageIdUpdate_(
+          /** @type {string} */ (data.value),
+          messaging
+        );
+        break;
+      case STORY_MESSAGE_STATE_TYPE.MUTED_STATE:
+        this.onMutedStateUpdate_(/** @type {string} */ (data.value));
+        break;
+      case AMP_STORY_PLAYER_EVENT:
+        this.onPlayerEvent_(/** @type {string} */ (data.value));
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * Reacts to events coming from the story.
+   * @private
+   * @param {string} value
+   */
+  onPlayerEvent_(value) {
+    switch (value) {
+      case 'amp-story-player-skip-next':
+      case 'amp-story-player-skip-to-next':
+        this.next_();
+        break;
+      default:
+        this.element_.dispatchEvent(
+          createCustomEvent(this.win_, value, dict({}))
+        );
+        break;
+    }
+  }
+
+  /**
+   * Reacts to mute/unmute events coming from the story.
+   * @param {string} muted
+   * @private
+   */
+  onMutedStateUpdate_(muted) {
+    this.element_.dispatchEvent(
+      createCustomEvent(this.win_, 'amp-story-muted-state', {muted})
+    );
+  }
+
+  /**
+   * Reacts to page id update events inside the story.
+   * @param {string} pageId
+   * @param {Messaging} messaging
+   * @private
+   */
+  onCurrentPageIdUpdate_(pageId, messaging) {
+    messaging
+      .sendRequest(
+        'getDocumentState',
+        dict({'state': STORY_MESSAGE_STATE_TYPE.STORY_PROGRESS}),
+        true
+      )
+      .then((progress) => {
+        this.element_.dispatchEvent(
+          createCustomEvent(
+            this.win_,
+            'storyNavigation',
+            dict({
+              'pageId': pageId,
+              'progress': progress.value,
+            })
+          )
+        );
+      });
+  }
+
+  /**
+   * React to page attachment update events.
+   * @param {boolean} pageAttachmentOpen
+   * @private
+   */
+  onPageAttachmentStateUpdate_(pageAttachmentOpen) {
+    this.updateButtonVisibility_(!pageAttachmentOpen);
+    this.dispatchPageAttachmentEvent_(pageAttachmentOpen);
+  }
+
+  /**
+   * Updates the visbility state of the exit control button.
+   * TODO(#30031): delete this once new custom UI API is ready.
+   * @param {boolean} isVisible
+   * @private
+   */
+  updateButtonVisibility_(isVisible) {
+    const button = this.rootEl_.querySelector(
+      'button.amp-story-player-exit-control-button'
+    );
+    if (!button) {
+      return;
+    }
+
+    isVisible
+      ? button.classList.remove(DEPRECATED_BUTTON_CLASSES.HIDDEN)
+      : button.classList.add(DEPRECATED_BUTTON_CLASSES.HIDDEN);
+  }
+
+  /**
+   * Dispatch a page attachment event.
+   * @param {boolean} isPageAttachmentOpen
+   * @private
+   */
+  dispatchPageAttachmentEvent_(isPageAttachmentOpen) {
+    this.element_.dispatchEvent(
+      createCustomEvent(
+        this.win_,
+        isPageAttachmentOpen ? 'page-attachment-open' : 'page-attachment-close',
+        dict({})
+      )
+    );
+  }
+
   /**
    * React to selectDocument events.
    * @param {!Object} data
    * @private
    */
   onSelectDocument_(data) {
+    this.dispatchEndOfStoriesEvent_(data);
     if (data.next) {
       this.next_();
     } else if (data.previous) {
@@ -562,6 +1533,30 @@ export class AmpStoryPlayer {
     }
   }
 
+  /**
+   * Dispatches end of stories event when appropiate.
+   * @param {!Object} data
+   * @private
+   */
+  dispatchEndOfStoriesEvent_(data) {
+    if (this.isCircularWrappingEnabled_ || (!data.next && !data.previous)) {
+      return;
+    }
+
+    let endOfStories, name;
+    if (data.next) {
+      endOfStories = this.currentIdx_ + 1 === this.stories_.length;
+      name = 'noNextStory';
+    } else {
+      endOfStories = this.currentIdx_ === 0;
+      name = 'noPreviousStory';
+    }
+
+    if (endOfStories) {
+      this.element_.dispatchEvent(createCustomEvent(this.win_, name, dict({})));
+    }
+  }
+
   /**
    * Reacts to touchstart events and caches its coordinates.
    * @param {!Event} event
@@ -573,53 +1568,93 @@ export class AmpStoryPlayer {
       return;
     }
 
-    this.touchEventState_.startX = coordinates.x;
-    this.touchEventState_.startY = coordinates.y;
+    this.touchEventState_.startX = coordinates.screenX;
+    this.touchEventState_.startY = coordinates.screenY;
+
+    this.pageScroller_ &&
+      this.pageScroller_.onTouchStart(event.timeStamp, coordinates.clientY);
+
+    this.element_.dispatchEvent(
+      createCustomEvent(
+        this.win_,
+        'amp-story-player-touchstart',
+        dict({
+          'touches': event.touches,
+        })
+      )
+    );
   }
 
   /**
-   * Reacts to touchmove events and handles horizontal swipes.
+   * Reacts to touchmove events.
    * @param {!Event} event
    * @private
    */
   onTouchMove_(event) {
-    if (this.touchEventState_.isSwipeX === false) {
+    const coordinates = this.getClientTouchCoordinates_(event);
+    if (!coordinates) {
       return;
     }
 
-    const coordinates = this.getClientTouchCoordinates_(event);
-    if (!coordinates) {
+    this.element_.dispatchEvent(
+      createCustomEvent(
+        this.win_,
+        'amp-story-player-touchmove',
+        dict({
+          'touches': event.touches,
+          'isNavigationalSwipe': this.touchEventState_.isSwipeX,
+        })
+      )
+    );
+
+    if (this.touchEventState_.isSwipeX === false) {
+      this.pageScroller_ &&
+        this.pageScroller_.onTouchMove(event.timeStamp, coordinates.clientY);
       return;
     }
 
-    const {x, y} = coordinates;
-    this.touchEventState_.lastX = x;
+    const {screenX, screenY} = coordinates;
+    this.touchEventState_.lastX = screenX;
 
     if (this.touchEventState_.isSwipeX === null) {
       this.touchEventState_.isSwipeX =
-        Math.abs(this.touchEventState_.startX - x) >
-        Math.abs(this.touchEventState_.startY - y);
+        Math.abs(this.touchEventState_.startX - screenX) >
+        Math.abs(this.touchEventState_.startY - screenY);
       if (!this.touchEventState_.isSwipeX) {
         return;
       }
     }
 
     this.onSwipeX_({
-      deltaX: x - this.touchEventState_.startX,
+      deltaX: screenX - this.touchEventState_.startX,
       last: false,
     });
   }
 
   /**
    * Reacts to touchend events. Resets cached touch event states.
+   * @param {!Event} event
    * @private
    */
-  onTouchEnd_() {
+  onTouchEnd_(event) {
+    this.element_.dispatchEvent(
+      createCustomEvent(
+        this.win_,
+        'amp-story-player-touchend',
+        dict({
+          'touches': event.touches,
+          'isNavigationalSwipe': this.touchEventState_.isSwipeX,
+        })
+      )
+    );
+
     if (this.touchEventState_.isSwipeX === true) {
       this.onSwipeX_({
         deltaX: this.touchEventState_.lastX - this.touchEventState_.startX,
         last: true,
       });
+    } else {
+      this.pageScroller_ && this.pageScroller_.onTouchEnd(event.timeStamp);
     }
 
     this.touchEventState_.startX = 0;
@@ -634,21 +1669,27 @@ export class AmpStoryPlayer {
    * @param {!Object} gesture
    */
   onSwipeX_(gesture) {
+    if (this.stories_.length <= 1) {
+      return;
+    }
+
     const {deltaX} = gesture;
 
     if (gesture.last === true) {
       const delta = Math.abs(deltaX);
 
       if (this.swipingState_ === SwipingState.SWIPING_TO_LEFT) {
-        delta > TOGGLE_THRESHOLD_PX && this.getSecondaryIframe_()
+        delta > TOGGLE_THRESHOLD_PX &&
+        (this.getSecondaryStory_() || this.isCircularWrappingEnabled_)
           ? this.next_()
-          : this.resetIframeStyles_();
+          : this.resetStoryStyles_();
       }
 
       if (this.swipingState_ === SwipingState.SWIPING_TO_RIGHT) {
-        delta > TOGGLE_THRESHOLD_PX && this.getSecondaryIframe_()
+        delta > TOGGLE_THRESHOLD_PX &&
+        (this.getSecondaryStory_() || this.isCircularWrappingEnabled_)
           ? this.previous_()
-          : this.resetIframeStyles_();
+          : this.resetStoryStyles_();
       }
 
       return;
@@ -658,42 +1699,118 @@ export class AmpStoryPlayer {
   }
 
   /**
-   * Resets styles for the currently swiped iframes.
+   * Resets styles for the currently swiped story.
    * @private
    */
-  resetIframeStyles_() {
-    const currentIframe = this.iframes_[
-      this.stories_[this.currentIdx_][IFRAME_IDX]
-    ];
+  resetStoryStyles_() {
+    const currentIframe = this.stories_[this.currentIdx_].iframe;
 
     requestAnimationFrame(() => {
-      resetStyles(currentIframe, ['transform', 'transition']);
+      resetStyles(devAssertElement(currentIframe), ['transform', 'transition']);
     });
 
-    const secondaryIframe = this.getSecondaryIframe_();
-    if (secondaryIframe) {
+    const secondaryStory = this.getSecondaryStory_();
+    if (secondaryStory) {
       requestAnimationFrame(() => {
-        resetStyles(secondaryIframe, ['transform', 'transition']);
+        resetStyles(devAssertElement(secondaryStory.iframe), [
+          'transform',
+          'transition',
+        ]);
       });
     }
   }
 
   /**
-   * Gets accompanying iframe for the currently swiped iframe if any.
+   * Gets accompanying story for the currently swiped story if any.
    * @private
-   * @return {?IframeElement}
+   * @return {?StoryDef}
    */
-  getSecondaryIframe_() {
+  getSecondaryStory_() {
     const nextStoryIdx =
       this.swipingState_ === SwipingState.SWIPING_TO_LEFT
         ? this.currentIdx_ + 1
         : this.currentIdx_ - 1;
 
-    if (nextStoryIdx < 0 || nextStoryIdx >= this.stories_.length) {
+    if (this.isIndexOutofBounds_(nextStoryIdx)) {
+      return null;
+    }
+
+    return this.stories_[nextStoryIdx];
+  }
+
+  /**
+   * Checks if index is out of bounds.
+   * @private
+   * @param {number} index
+   * @return {boolean}
+   */
+  isIndexOutofBounds_(index) {
+    return index >= this.stories_.length || index < 0;
+  }
+
+  /** @private */
+  initializeAutoplay_() {
+    if (!this.playerConfig_) {
       return;
     }
 
-    return this.iframes_[this.stories_[nextStoryIdx][IFRAME_IDX]];
+    const {behavior} = this.playerConfig_;
+
+    if (behavior && typeof behavior.autoplay === 'boolean') {
+      this.playing_ = behavior.autoplay;
+    }
+  }
+
+  /** @private */
+  initializeAttribution_() {
+    if (!this.playerConfig_) {
+      return;
+    }
+
+    const {display} = this.playerConfig_;
+
+    if (display && display.attribution === 'auto') {
+      this.attribution_ = 'auto';
+    }
+  }
+
+  /** @private */
+  initializePageScroll_() {
+    if (!this.playerConfig_) {
+      return;
+    }
+
+    const {behavior} = this.playerConfig_;
+
+    if (behavior && behavior.pageScroll === false) {
+      this.pageScroller_ = null;
+    }
+  }
+
+  /**
+   * @private
+   * @return {boolean}
+   */
+  initializeCircularWrapping_() {
+    if (this.isCircularWrappingEnabled_ !== null) {
+      return this.isCircularWrappingEnabled_;
+    }
+
+    if (!this.playerConfig_) {
+      this.isCircularWrappingEnabled_ = false;
+      return false;
+    }
+
+    const {behavior} = this.playerConfig_;
+
+    const hasCircularWrappingEnabled = (behavior) =>
+      behavior.on === 'end' && behavior.action === 'circular-wrapping';
+
+    this.isCircularWrappingEnabled_ =
+      this.validateBehaviorDef_(behavior) &&
+      hasCircularWrappingEnabled(behavior);
+
+    return this.isCircularWrappingEnabled_;
   }
 
   /**
@@ -713,23 +1830,23 @@ export class AmpStoryPlayer {
     }
 
     const story = this.stories_[this.currentIdx_];
-    const iframe = this.iframes_[story[IFRAME_IDX]];
+    const {iframe} = story;
     const translate = `translate3d(${deltaX}px, 0, 0)`;
 
     requestAnimationFrame(() => {
-      setStyles(iframe, {
+      setStyles(devAssertElement(iframe), {
         transform: translate,
         transition: 'none',
       });
     });
 
-    const secondaryIframe = this.getSecondaryIframe_();
-    if (!secondaryIframe) {
+    const secondaryStory = this.getSecondaryStory_();
+    if (!secondaryStory) {
       return;
     }
 
     requestAnimationFrame(() => {
-      setStyles(secondaryIframe, {
+      setStyles(devAssertElement(secondaryStory.iframe), {
         transform: secondaryTranslate,
         transition: 'none',
       });
@@ -748,7 +1865,7 @@ export class AmpStoryPlayer {
       return null;
     }
 
-    const {screenX: x, screenY: y} = touches[0];
-    return {x, y};
+    const {clientX, clientY, screenX, screenY} = touches[0];
+    return {screenX, screenY, clientX, clientY};
   }
 }
diff --git a/src/amp-story-player/amp-story-player-manager.js b/src/amp-story-player/amp-story-player-manager.js
deleted file mode 100644
index a80a0232d7264..0000000000000
--- a/src/amp-story-player/amp-story-player-manager.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {AmpStoryPlayer} from './amp-story-player-impl';
-import {initLogConstructor} from '../log';
-import {throttle} from '../utils/rate-limit';
-
-/** @const {string} */
-const SCROLL_THROTTLE_MS = 500;
-
-export class AmpStoryPlayerManager {
-  /**
-   * @param {!Window} win
-   * @constructor
-   */
-  constructor(win) {
-    /** @private {!Window} */
-    this.win_ = win;
-  }
-
-  /**
-   * Calls layoutCallback on the player when it is close to the viewport.
-   * @param {!AmpStoryPlayer} playerImpl
-   * @private
-   */
-  layoutPlayer_(playerImpl) {
-    if (!this.win_.IntersectionObserver || this.win_ !== this.win_.parent) {
-      this.layoutFallback_(playerImpl);
-      return;
-    }
-
-    const intersectingCallback = (entries) => {
-      entries.forEach((entry) => {
-        if (!entry.isIntersecting) {
-          return;
-        }
-        playerImpl.layoutCallback();
-      });
-    };
-
-    const observer = new IntersectionObserver(intersectingCallback, {
-      rootMargin: '100%',
-    });
-    observer.observe(playerImpl.getElement());
-  }
-
-  /**
-   * Fallback for when IntersectionObserver is not supported. Calls
-   * layoutCallback on the player when it is close to the viewport.
-   * @param {!AmpStoryPlayer} playerImpl
-   * @private
-   */
-  layoutFallback_(playerImpl) {
-    // TODO(Enriqe): pause players when scrolling away from viewport.
-    this.win_.addEventListener(
-      'scroll',
-      throttle(
-        this.win_,
-        this.layoutIfVisible_.bind(this, playerImpl),
-        SCROLL_THROTTLE_MS
-      )
-    );
-
-    // Calls it once it in case scroll event never fires.
-    this.layoutIfVisible_(playerImpl);
-  }
-
-  /**
-   * Checks if player is close to the viewport and calls layoutCallback when it
-   * is.
-   * @param {!AmpStoryPlayer} playerImpl
-   * @private
-   */
-  layoutIfVisible_(playerImpl) {
-    const playerTop = playerImpl.getElement()./*OK*/ getBoundingClientRect()
-      .top;
-    if (this.win_./*OK*/ innerHeight * 2 > playerTop) {
-      playerImpl.layoutCallback();
-    }
-  }
-
-  /**
-   * Builds and layouts the players when appropiate.
-   * @public
-   */
-  loadPlayers() {
-    const doc = this.win_.document;
-    const players = doc.getElementsByTagName('amp-story-player');
-    initLogConstructor();
-    for (let i = 0; i < players.length; i++) {
-      const playerEl = players[i];
-      const player = new AmpStoryPlayer(this.win_, playerEl);
-      player.buildCallback();
-      this.layoutPlayer_(player);
-    }
-  }
-}
diff --git a/src/amp-story-player/amp-story-player-viewport-observer.js b/src/amp-story-player/amp-story-player-viewport-observer.js
new file mode 100644
index 0000000000000..4713a733ff526
--- /dev/null
+++ b/src/amp-story-player/amp-story-player-viewport-observer.js
@@ -0,0 +1,109 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {throttle} from '../core/types/function';
+
+/** @const {number} */
+const SCROLL_THROTTLE_MS = 500;
+
+/**
+ * Creates an IntersectionObserver or fallback using scroll events.
+ * Fires viewportCb when criteria is met and unobserves immediately after.
+ */
+export class AmpStoryPlayerViewportObserver {
+  /**
+   * @param {!Window} win
+   * @param {!Element} element
+   * @param {function():void} viewportCb
+   */
+  constructor(win, element, viewportCb) {
+    /** @private {!Window} */
+    this.win_ = win;
+
+    /** @private {!Element} */
+    this.element_ = element;
+
+    /** @private {function():void} */
+    this.cb_ = viewportCb;
+
+    /** @private {?function():void} */
+    this.scrollHandler_ = null;
+
+    this.initializeInObOrFallback_();
+  }
+
+  /** @private */
+  initializeInObOrFallback_() {
+    if (!this.win_.IntersectionObserver || this.win_ !== this.win_.parent) {
+      this.createInObFallback_();
+      return;
+    }
+
+    this.createInOb_();
+  }
+
+  /**
+   * Creates an IntersectionObserver.
+   * @private
+   */
+  createInOb_() {
+    const inObCallback = (entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) {
+          return;
+        }
+        this.cb_();
+        observer.unobserve(this.element_);
+      });
+    };
+
+    const observer = new this.win_.IntersectionObserver(inObCallback);
+
+    observer.observe(this.element_);
+  }
+
+  /**
+   * Fallback for when IntersectionObserver is not supported. Calls
+   * layoutPlayer on the element when it is close to the viewport.
+   * @private
+   */
+  createInObFallback_() {
+    this.scrollHandler_ = throttle(
+      this.win_,
+      this.checkIfVisibleFallback_.bind(this),
+      SCROLL_THROTTLE_MS
+    );
+
+    this.win_.addEventListener('scroll', this.scrollHandler_);
+
+    this.checkIfVisibleFallback_(this.element_);
+  }
+
+  /**
+   * Checks if element is close to the viewport and calls the callback when it
+   * is.
+   * @private
+   */
+  checkIfVisibleFallback_() {
+    const elTop = this.element_./*OK*/ getBoundingClientRect().top;
+    const winInnerHeight = this.win_./*OK*/ innerHeight;
+
+    if (winInnerHeight > elTop) {
+      this.cb_();
+      this.win_.removeEventListener('scroll', this.scrollHandler_);
+    }
+  }
+}
diff --git a/src/amp-story-player/amp-story-player.js b/src/amp-story-player/amp-story-player.js
index ff975df7ba108..28b22b9648a6a 100644
--- a/src/amp-story-player/amp-story-player.js
+++ b/src/amp-story-player/amp-story-player.js
@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
+import {AmpStoryComponentManager} from './amp-story-component-manager';
 import {AmpStoryPlayer} from './amp-story-player-impl';
-import {AmpStoryPlayerManager} from './amp-story-player-manager';
+import {onDocumentReady} from '../core/document-ready';
 
-self.onload = () => {
-  const manager = new AmpStoryPlayerManager(self);
+onDocumentReady(self.document, () => {
+  const manager = new AmpStoryComponentManager(self);
   manager.loadPlayers();
-};
+});
 
 globalThis.AmpStoryPlayer = AmpStoryPlayer;
diff --git a/src/amp-story-player/img/carousel-cards-entry-point.png b/src/amp-story-player/img/carousel-cards-entry-point.png
new file mode 100644
index 0000000000000..6018c95115049
Binary files /dev/null and b/src/amp-story-player/img/carousel-cards-entry-point.png differ
diff --git a/src/amp-story-player/img/carousel-circuclar-entry-point.png b/src/amp-story-player/img/carousel-circuclar-entry-point.png
new file mode 100644
index 0000000000000..fffae1bb92973
Binary files /dev/null and b/src/amp-story-player/img/carousel-circuclar-entry-point.png differ
diff --git a/src/amp-story-player/img/close-and-skip-next.png b/src/amp-story-player/img/close-and-skip-next.png
new file mode 100644
index 0000000000000..d5b6a56213430
Binary files /dev/null and b/src/amp-story-player/img/close-and-skip-next.png differ
diff --git a/src/amp-story-player/img/close-button-custom-background.png b/src/amp-story-player/img/close-button-custom-background.png
new file mode 100644
index 0000000000000..b8feff2e0867a
Binary files /dev/null and b/src/amp-story-player/img/close-button-custom-background.png differ
diff --git a/src/amp-story-player/img/close-button-left.png b/src/amp-story-player/img/close-button-left.png
new file mode 100644
index 0000000000000..ddcbcd69434d1
Binary files /dev/null and b/src/amp-story-player/img/close-button-left.png differ
diff --git a/src/amp-story-player/img/embed-in-blog.png b/src/amp-story-player/img/embed-in-blog.png
new file mode 100644
index 0000000000000..a93b30e118369
Binary files /dev/null and b/src/amp-story-player/img/embed-in-blog.png differ
diff --git a/src/amp-story-player/img/lightbox-close-button.png b/src/amp-story-player/img/lightbox-close-button.png
new file mode 100644
index 0000000000000..bfd76c9754e2a
Binary files /dev/null and b/src/amp-story-player/img/lightbox-close-button.png differ
diff --git a/src/amp-story-player/img/player-in-recipe.png b/src/amp-story-player/img/player-in-recipe.png
new file mode 100644
index 0000000000000..42ed0a463c1d2
Binary files /dev/null and b/src/amp-story-player/img/player-in-recipe.png differ
diff --git a/src/amp-story-player/img/skip-next-desktop.png b/src/amp-story-player/img/skip-next-desktop.png
new file mode 100644
index 0000000000000..167e575a1cfd5
Binary files /dev/null and b/src/amp-story-player/img/skip-next-desktop.png differ
diff --git a/src/amp-story-player/img/story-attribution.png b/src/amp-story-player/img/story-attribution.png
new file mode 100644
index 0000000000000..7093c70e6605d
Binary files /dev/null and b/src/amp-story-player/img/story-attribution.png differ
diff --git a/src/amp-story-player/page-scroller.js b/src/amp-story-player/page-scroller.js
new file mode 100644
index 0000000000000..b4f1bca986a7d
--- /dev/null
+++ b/src/amp-story-player/page-scroller.js
@@ -0,0 +1,229 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {throttle} from '../core/types/function';
+
+/**
+ * Applies scroll and momentum to window by using touch events.
+ *
+ * It works using the following principles:
+ *
+ * On touchstart: (Re)set coordinates and timer. If user swiped while still
+ *                scrolling, increase multiplier for scrolling offset.
+ * On touchmove: Scroll 1:1 and calculate distance (deltaY) and acceleration of
+ *               the touch movement.
+ * On touchend: If meeting the momentum threshold, scroll by extra pixels
+ *              (scrolling offset) by a pre-set duration using an easing fn.
+ */
+export class PageScroller {
+  /**
+   * @param {!Window} win
+   */
+  constructor(win) {
+    /** @private {!Window} */
+    this.win_ = win;
+
+    /** @private {!Object} */
+    this.touchEventState_ = {
+      startY: 0,
+      lastDelta: 0,
+      touchStartTimeMs: null,
+      touchEndTimeMs: null,
+      touchMoveTimeMs: null,
+    };
+
+    /** @private {!Object} */
+    this.scrollState_ = {
+      startY: 0,
+      isRunning: false,
+      acceleration: 1,
+      speedLimit: 0.3,
+      startTimeMs: null,
+      maxTimeBetweenSwipesMs: 250,
+      moveTimeThresholdMs: 100,
+      durationMs: null,
+      meetsDeltaYThreshold: false,
+      deltaYThresholdPx: 5,
+      deltaY: null,
+      offsetThresholdPx: 30,
+      offsetPx: null,
+      multiplier: 1,
+    };
+  }
+
+  /**
+   * Reacts to onTouchStart events. (Re)sets coordinates and timer.
+   * Applies multiplier if criteria is met or resets it.
+   * @param {number} timeStamp
+   * @param {number} startY
+   */
+  onTouchStart(timeStamp, startY) {
+    this.touchEventState_.startY = startY;
+    this.touchEventState_.touchStartTimeMs = timeStamp;
+    this.scrollState_.startY = this.win_./*OK*/ scrollY;
+
+    if (
+      this.scrollState_.isRunning &&
+      this.touchEventState_.touchEndTimeMs -
+        this.touchEventState_.touchStartTimeMs <
+        this.scrollState_.maxTimeBetweenSwipesMs
+    ) {
+      // User swiped while still scrolling, increase the multiplier for the
+      // offset.
+      this.scrollState_.multiplier += this.scrollState_.acceleration;
+    } else {
+      this.scrollState_.multiplier = 1;
+    }
+
+    this.scrollState_.isRunning = false;
+  }
+
+  /**
+   * Reacts to onTouchMove events. Scrolls 1:1 if criteria is met. Calculates
+   * distance (deltaY) and acceleration.
+   * @param {number} timeStamp
+   * @param {number} currentY
+   */
+  onTouchMove(timeStamp, currentY) {
+    this.scrollState_.acceleration = Math.abs(
+      this.scrollState_.deltaY /
+        (timeStamp - this.touchEventState_.touchMoveTimeMs)
+    );
+    this.touchEventState_.touchMoveTimeMs = timeStamp;
+
+    throttle(this.win_, this.thottledScroll_.bind(this, currentY), 50)();
+  }
+
+  /**
+   * @param {number} currentY
+   * @private
+   */
+  thottledScroll_(currentY) {
+    this.scrollState_.deltaY = currentY - this.touchEventState_.startY;
+
+    this.scrollState_.meetsDeltaYThreshold =
+      Math.abs(this.scrollState_.deltaY) > this.scrollState_.deltaYThresholdPx;
+
+    if (!this.scrollState_.meetsDeltaYThreshold) {
+      return;
+    }
+
+    this.win_./*OK*/ scrollBy(0, -this.scrollState_.deltaY);
+  }
+
+  /**
+   * Reacts to touchEnd events. Applies momentum scrolling if criteria is met.
+   * @param {number} timeStamp
+   */
+  onTouchEnd(timeStamp) {
+    this.touchEventState_.touchEndTimeMs = timeStamp;
+
+    if (!this.scrollState_.meetsDeltaYThreshold) {
+      return;
+    }
+
+    const timeFromLastTouchMove =
+      this.touchEventState_.touchEndTimeMs -
+      this.touchEventState_.touchMoveTimeMs;
+
+    this.scrollState_.offsetPx = this.calculateOffset_();
+
+    if (
+      timeFromLastTouchMove < this.scrollState_.moveTimeThresholdMs &&
+      Math.abs(this.scrollState_.offsetPx) > this.scrollState_.offsetThresholdPx
+    ) {
+      // If timefromLastTouchMove is low enough and the offset is above the
+      // threshold, (re)set the scroll parameters to include momentum.
+      this.scrollState_.durationMs = this.win_./*OK*/ innerHeight * 1.2;
+      this.scrollState_.isRunning = true;
+
+      requestAnimationFrame((timestamp) => {
+        this.scrollState_.startTimeMs = timestamp;
+        this.scrollState_.startY = this.win_./*OK*/ scrollY;
+        this.scrollOnNextTick_(timestamp);
+      });
+    }
+
+    this.scrollState_.multiplier = 1;
+    this.touchEventState_.startY = 0;
+    this.scrollState_.deltaY = 0;
+  }
+
+  /**
+   * Calculates pixel offset and direction to be scrolled by getting current
+   * acceleration and preset limits.
+   * @private
+   * @return {number}
+   */
+  calculateOffset_() {
+    const maxOffset =
+      this.win_./*OK*/ innerHeight * this.scrollState_.speedLimit;
+
+    let offset =
+      Math.pow(this.scrollState_.acceleration, 2) *
+      this.win_./*OK*/ innerHeight;
+
+    offset = Math.min(maxOffset, offset);
+
+    offset *=
+      this.scrollState_.deltaY > 0
+        ? -this.scrollState_.multiplier
+        : this.scrollState_.multiplier;
+
+    return offset;
+  }
+
+  /**
+   * Calculates scrolling position at each frame. Stops once durationMs is met
+   * or scrollState stops running.
+   * @param {number} timeStamp
+   * @private
+   */
+  scrollOnNextTick_(timeStamp) {
+    const runTime = timeStamp - this.scrollState_.startTimeMs;
+
+    if (runTime > this.scrollState_.durationMs) {
+      return;
+    }
+
+    const progress = this.easeOutQuartFn_(
+      runTime / this.scrollState_.durationMs
+    );
+
+    const scrollDelta = progress * this.scrollState_.offsetPx;
+
+    const scrollForThisTick = this.scrollState_.startY + scrollDelta;
+
+    if (!this.scrollState_.isRunning) {
+      cancelAnimationFrame(
+        requestAnimationFrame(this.scrollOnNextTick_.bind(this))
+      );
+    } else {
+      this.win_.scroll(0, scrollForThisTick);
+      requestAnimationFrame(this.scrollOnNextTick_.bind(this));
+    }
+  }
+
+  /**
+   * Ease out quart function.
+   * @param {number} pTimeElapsed Percentage of time elapsed.
+   * @return {number} Percentage progress, value between 0 and 1.
+   * @private
+   */
+  easeOutQuartFn_(pTimeElapsed) {
+    return 1 - --pTimeElapsed * pTimeElapsed * pTimeElapsed * pTimeElapsed;
+  }
+}
diff --git a/src/amp.js b/src/amp.js
index 46210ea8432ec..136e3e94facf0 100644
--- a/src/amp.js
+++ b/src/amp.js
@@ -19,10 +19,10 @@
  */
 
 // src/polyfills.js must be the first import.
-import './polyfills'; // eslint-disable-line sort-imports-es6-autofix/sort-imports-es6
+import './polyfills';
 
 import {Services} from './services';
-import {TickLabel} from './enums';
+import {TickLabel} from './core/constants/enums';
 import {adoptWithMultidocDeps} from './runtime';
 import {cssText as ampDocCss} from '../build/ampdoc.css';
 import {cssText as ampSharedCss} from '../build/ampshared.css';
@@ -35,7 +35,7 @@ import {
 } from './service/core-services';
 import {installAutoLightboxExtension} from './auto-lightbox';
 import {installDocService} from './service/ampdoc-impl';
-import {installErrorReporting} from './error';
+import {installErrorReporting} from './error-reporting';
 import {installPerformanceService} from './service/performance-impl';
 import {installPlatformService} from './service/platform-impl';
 import {installPullToRefreshBlocker} from './pull-to-refresh';
@@ -52,19 +52,6 @@ import {preconnectToOrigin} from './preconnect';
 import {startupChunk} from './chunk';
 import {stubElementsForDoc} from './service/custom-element-registry';
 
-/**
- * self.IS_AMP_ALT (is AMP alternative binary) is undefined by default in the
- * main v0.js since it is the "main" js.
- * This global boolean is set by alternative binaries like amp-inabox and
- * amp-shadow which has their own bootstrapping sequence.
- * With how single pass works these alternative binaries cannot be generated
- * easily because we can only do a "single pass" so we treat these alternative
- * main binaries as "extensions" and we concatenate their code with the main
- * v0.js code.
- * @type {boolean|undefined}
- */
-const shouldMainBootstrapRun = !self.IS_AMP_ALT;
-
 /**
  * Execute the bootstrap
  * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
@@ -93,7 +80,9 @@ function bootstrap(ampdoc, perf) {
   startupChunk(
     self.document,
     function final() {
-      installPullToRefreshBlocker(self);
+      if (!IS_SXG) {
+        installPullToRefreshBlocker(self);
+      }
       installAutoLightboxExtension(ampdoc);
       installStandaloneExtension(ampdoc);
       maybeValidate(self);
@@ -111,73 +100,73 @@ function bootstrap(ampdoc, perf) {
   });
 }
 
-if (shouldMainBootstrapRun) {
-  // Store the originalHash as early as possible. Trying to debug:
-  // https://github.com/ampproject/amphtml/issues/6070
-  if (self.location) {
-    self.location.originalHash = self.location.hash;
-  }
+// Store the originalHash as early as possible. Trying to debug:
+// https://github.com/ampproject/amphtml/issues/6070
+if (self.location) {
+  self.location['originalHash'] = self.location.hash;
+}
 
-  /** @type {!./service/ampdoc-impl.AmpDocService} */
-  let ampdocService;
-  // We must under all circumstances call makeBodyVisible.
-  // It is much better to have AMP tags not rendered than having
-  // a completely blank page.
-  try {
-    // Should happen first.
-    installErrorReporting(self); // Also calls makeBodyVisibleRecovery on errors.
+/** @type {!./service/ampdoc-impl.AmpDocService} */
+let ampdocService;
+// We must under all circumstances call makeBodyVisible.
+// It is much better to have AMP tags not rendered than having
+// a completely blank page.
+try {
+  // Should happen first.
+  installErrorReporting(self); // Also calls makeBodyVisibleRecovery on errors.
 
-    // Declare that this runtime will support a single root doc. Should happen
-    // as early as possible.
-    installDocService(self, /* isSingleDoc */ true);
-    ampdocService = Services.ampdocServiceFor(self);
-  } catch (e) {
-    // In case of an error call this.
-    makeBodyVisibleRecovery(self.document);
-    throw e;
+  // Declare that this runtime will support a single root doc. Should happen
+  // as early as possible.
+  installDocService(self, /* isSingleDoc */ true);
+  ampdocService = Services.ampdocServiceFor(self);
+} catch (e) {
+  // In case of an error call this.
+  makeBodyVisibleRecovery(self.document);
+  throw e;
+}
+startupChunk(self.document, function initial() {
+  /** @const {!./service/ampdoc-impl.AmpDoc} */
+  const ampdoc = ampdocService.getAmpDoc(self.document);
+  installPlatformService(self);
+  installPerformanceService(self);
+  /** @const {!./service/performance-impl.Performance} */
+  const perf = Services.performanceFor(self);
+  if (self.document.documentElement.hasAttribute('i-amphtml-no-boilerplate')) {
+    perf.addEnabledExperiment('no-boilerplate');
   }
-  startupChunk(self.document, function initial() {
-    /** @const {!./service/ampdoc-impl.AmpDoc} */
-    const ampdoc = ampdocService.getAmpDoc(self.document);
-    installPlatformService(self);
-    installPerformanceService(self);
-    /** @const {!./service/performance-impl.Performance} */
-    const perf = Services.performanceFor(self);
-    if (
-      self.document.documentElement.hasAttribute('i-amphtml-no-boilerplate')
-    ) {
-      perf.addEnabledExperiment('no-boilerplate');
-    }
-    if (getMode().esm) {
-      perf.addEnabledExperiment('esm');
-    }
-    fontStylesheetTimeout(self);
-    perf.tick(TickLabel.INSTALL_STYLES);
-    if (IS_ESM) {
-      bootstrap(ampdoc, perf);
-    } else {
-      installStylesForDoc(
-        ampdoc,
-        ampDocCss + ampSharedCss,
-        () => bootstrap(ampdoc, perf),
-        /* opt_isRuntimeCss */ true,
-        /* opt_ext */ 'amp-runtime'
-      );
-    }
-  });
-
-  // Output a message to the console and add an attribute to the <html>
-  // tag to give some information that can be used in error reports.
-  // (At least by sophisticated users).
-  if (self.console) {
-    (console.info || console.log).call(
-      console,
-      `Powered by AMP ⚡ HTML – Version ${internalRuntimeVersion()}`,
-      self.location.href
+  if (IS_ESM) {
+    perf.addEnabledExperiment('esm');
+  }
+  fontStylesheetTimeout(self);
+  perf.tick(TickLabel.INSTALL_STYLES);
+  if (IS_ESM) {
+    bootstrap(ampdoc, perf);
+  } else {
+    installStylesForDoc(
+      ampdoc,
+      ampDocCss + ampSharedCss,
+      () => bootstrap(ampdoc, perf),
+      /* opt_isRuntimeCss */ true,
+      /* opt_ext */ 'amp-runtime'
     );
   }
-  self.document.documentElement.setAttribute(
-    'amp-version',
-    internalRuntimeVersion()
+});
+
+// Output a message to the console and add an attribute to the <html>
+// tag to give some information that can be used in error reports.
+// (At least by sophisticated users).
+if (self.console) {
+  (console.info || console.log).call(
+    console,
+    `Powered by AMP ⚡ HTML – Version ${internalRuntimeVersion()}`,
+    self.location.href
   );
 }
+// This code is eleminated in prod build through a babel transformer.
+if (getMode().localDev) {
+  self.document.documentElement.setAttribute('esm', IS_ESM ? 1 : 0);
+}
+self.document.documentElement.setAttribute(
+  'amp-version',
+  internalRuntimeVersion()
+);
diff --git a/src/ampdoc-fie.js b/src/ampdoc-fie.js
deleted file mode 100644
index 0c7280caa4c9a..0000000000000
--- a/src/ampdoc-fie.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * 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.
- */
-
-import {
-  forceExperimentBranch,
-  getExperimentBranch,
-  isExperimentOn,
-  randomlySelectUnsetExperiments,
-} from './experiments';
-
-// TODO(#22733): Remove this file once "ampdoc-fie" is cleaned up.
-
-const EXPERIMENT_ID = 'ampdoc-fie';
-
-/**
- * @const {{experiment: string, control: string, branch: string}}
- */
-const EXPERIMENT = {
-  branch: EXPERIMENT_ID,
-  control: '21065001',
-  experiment: '21065002',
-};
-
-/**
- * @const {!Object<string, !./experiments.ExperimentInfo>}
- */
-export const EXPERIMENT_INFO_MAP = {
-  [EXPERIMENT_ID]: {
-    isTrafficEligible: () => true,
-    branches: [[EXPERIMENT.control], [EXPERIMENT.experiment]],
-  },
-};
-
-/**
- * @param {!Window} win
- * @param {boolean} on
- * @visibleForTesting
- */
-export function toggleAmpdocFieForTesting(win, on) {
-  forceExperimentBranch(win, EXPERIMENT_ID, on ? EXPERIMENT.experiment : null);
-}
-
-/**
- * @param {!Window} win
- * @return {boolean}
- */
-export function isInAmpdocFieExperiment(win) {
-  if (!isExperimentOn(win, 'ampdoc-fie')) {
-    return false;
-  }
-  randomlySelectUnsetExperiments(win, EXPERIMENT_INFO_MAP);
-  return getExperimentBranch(win, EXPERIMENT_ID) === EXPERIMENT.experiment;
-}
diff --git a/src/analytics.js b/src/analytics.js
index 98e04f21f80ae..3540ba431b7ce 100644
--- a/src/analytics.js
+++ b/src/analytics.js
@@ -15,19 +15,27 @@
  */
 
 import {Services} from './services';
+import {dict} from './core/types/object';
 
 /**
  * Helper method to trigger analytics event if amp-analytics is available.
  * TODO: Do not expose this function
  * @param {!Element} target
  * @param {string} eventType
- * @param {!JsonObject=} opt_vars A map of vars and their values.
+ * @param {!JsonObject} vars A map of vars and their values.
+ * @param {boolean} enableDataVars A boolean to indicate if data-vars-*
+ * attribute value from target element should be included.
  */
-export function triggerAnalyticsEvent(target, eventType, opt_vars) {
+export function triggerAnalyticsEvent(
+  target,
+  eventType,
+  vars = dict(),
+  enableDataVars = true
+) {
   Services.analyticsForDocOrNull(target).then((analytics) => {
     if (!analytics) {
       return;
     }
-    analytics.triggerEventForTarget(target, eventType, opt_vars);
+    analytics.triggerEventForTarget(target, eventType, vars, enableDataVars);
   });
 }
diff --git a/src/animation.js b/src/animation.js
index 0d5334d056357..ecc8391eb1f57 100644
--- a/src/animation.js
+++ b/src/animation.js
@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
-import {Deferred} from './utils/promise';
+import {Deferred} from './core/data-structures/promise';
+import {NormTimeDef, getCurve} from './core/data-structures/curve';
 import {Services} from './services';
+import {TimestampDef} from './core/types/date';
 import {dev} from './log';
-import {getCurve} from './curve';
 
 const TAG_ = 'Animation';
 
@@ -37,8 +38,8 @@ export class Animation {
    *
    * @param {!Node} contextNode The context node.
    * @param {!TransitionDef<?>} transition Transition to animate.
-   * @param {./time.timeDef} duration Duration in milliseconds.
-   * @param {(!./curve.CurveDef|string)=} opt_curve Optional curve to use for
+   * @param {TimestampDef} duration Duration in milliseconds.
+   * @param {(!./core/data-structures/curve.CurveDef|string)=} opt_curve Optional curve to use for
    *   animation. Default is the linear animation.
    * @return {!AnimationPlayer}
    */
@@ -60,7 +61,7 @@ export class Animation {
     /** @private @const {!./service/vsync-impl.Vsync} */
     this.vsync_ = opt_vsync || Services.vsyncFor(self);
 
-    /** @private {?./curve.CurveDef} */
+    /** @private {?./core/data-structures/curve.CurveDef} */
     this.curve_ = null;
 
     /**
@@ -73,7 +74,7 @@ export class Animation {
    * Sets the default curve for the animation. Each segment is allowed to have
    * its own curve, but this curve will be used if a segment doesn't specify
    * its own.
-   * @param {!./curve.CurveDef|string|undefined} curve
+   * @param {!./core/data-structures/curve.CurveDef|string|undefined} curve
    * @return {!Animation}
    */
   setCurve(curve) {
@@ -86,15 +87,15 @@ export class Animation {
   /**
    * Adds a segment to the animation. Each segment starts at offset (delay) and
    * runs for a portion of the overall animation (duration). Note that both
-   * delay and duration and normtimeDef types which accept values from 0 to 1.
+   * delay and duration and NormTimeDef types which accept values from 0 to 1.
    * Optionally, the time is pushed through a curve. If curve is not specified,
    * the default animation curve will be used. The specified transition is
    * animated over the specified duration from 0 to 1.
    *
-   * @param {./time.normtimeDef} delay
+   * @param {!NormTimeDef} delay
    * @param {!TransitionDef<?>} transition
-   * @param {./time.normtimeDef} duration
-   * @param {(!./curve.CurveDef|string)=} opt_curve
+   * @param {!NormTimeDef} duration
+   * @param {(!./core/data-structures/curve.CurveDef|string)=} opt_curve
    * @return {!Animation}
    */
   add(delay, transition, duration, opt_curve) {
@@ -111,7 +112,7 @@ export class Animation {
    * Starts the animation and returns the AnimationPlayer object that can be
    * used to monitor and control the animation.
    *
-   * @param {./time.timeDef} duration Absolute time in milliseconds.
+   * @param {!TimestampDef} duration Absolute time in milliseconds.
    * @return {!AnimationPlayer}
    */
   start(duration) {
@@ -140,8 +141,8 @@ class AnimationPlayer {
    * @param {!./service/vsync-impl.Vsync} vsync
    * @param {!Node} contextNode
    * @param {!Array<!SegmentDef>} segments
-   * @param {?./curve.CurveDef} defaultCurve
-   * @param {./time.timeDef} duration
+   * @param {?./core/data-structures/curve.CurveDef} defaultCurve
+   * @param {!TimestampDef} duration
    */
   constructor(vsync, contextNode, segments, defaultCurve, duration) {
     /** @private @const {!./service/vsync-impl.Vsync} */
@@ -167,13 +168,13 @@ class AnimationPlayer {
     /** @private @const */
     this.duration_ = duration;
 
-    /** @private {./time.timeDef} */
+    /** @private {!TimestampDef} */
     this.startTime_ = Date.now();
 
-    /** @private {./time.normtimeDef} */
+    /** @private {!NormTimeDef} */
     // this.normLinearTime_ = 0;
 
-    /** @private {./time.normtimeDef} */
+    /** @private {!NormTimeDef} */
     // this.normTime_ = 0;
 
     /** @private {boolean} */
@@ -370,20 +371,20 @@ class AnimationPlayer {
 
 /**
  * @typedef {{
- *   delay: ./time.normtimeDef,
+ *   delay: NormTimeDef,
  *   func: !TransitionDef,
- *   duration: ./time.normtimeDef,
- *   curve: ?./curve.CurveDef
+ *   duration: NormTimeDef,
+ *   curve: ?./core/data-structures/curve.CurveDef
  * }}
  */
 let SegmentDef;
 
 /**
  * @typedef {{
- *   delay: ./time.normtimeDef,
+ *   delay: NormTimeDef,
  *   func: !TransitionDef,
- *   duration: ./time.normtimeDef,
- *   curve: ?./curve.CurveDef,
+ *   duration: NormTimeDef,
+ *   curve: ?./core/data-structures/curve.CurveDef,
  *   started: boolean,
  *   completed: boolean
  * }}
diff --git a/src/base-element.js b/src/base-element.js
index a250f0086726a..44eca66dc87e7 100644
--- a/src/base-element.js
+++ b/src/base-element.js
@@ -14,13 +14,15 @@
  * limitations under the License.
  */
 
-import {ActionTrust, DEFAULT_ACTION} from './action-constants';
+import {ActionTrust, DEFAULT_ACTION} from './core/constants/action-constants';
 import {Layout, LayoutPriority} from './layout';
 import {Services} from './services';
 import {devAssert, user, userAssert} from './log';
+import {dispatchCustomEvent} from './dom';
 import {getData, listen, loadPromise} from './event-helper';
 import {getMode} from './mode';
-import {isArray, toWin} from './types';
+import {isArray} from './core/types';
+import {toWin} from './types';
 
 /**
  * Base class for all custom element implementations. Instead of inheriting
@@ -36,20 +38,11 @@ import {isArray, toWin} from './types';
  *
  * The complete lifecycle of a custom DOM element is:
  *
- *           ||
- *           || createdCallback
- *           ||
- *           \/
- *    State: <NOT BUILT> <NOT UPGRADED> <NOT ATTACHED>
+ *    State: <NOT BUILT> <NOT UPGRADED>
  *           ||
  *           || upgrade
  *           ||
  *           \/
- *    State: <NOT BUILT> <NOT ATTACHED>
- *           ||
- *           || firstAttachedCallback
- *           ||
- *           \/
  *    State: <NOT BUILT>
  *           ||
  *           || buildCallback
@@ -70,7 +63,6 @@ import {isArray, toWin} from './types';
  *           ||                         ||
  *           ||                 =========
  *           ||
- *           || viewportCallback
  *           || unlayoutCallback may be called N times after this.
  *           ||
  *           \/
@@ -106,19 +98,141 @@ import {isArray, toWin} from './types';
  * element instance. This can be used to do additional style calculations
  * without triggering style recalculations.
  *
- * When the dimensions of an element has changed, the 'onMeasureChanged'
- * callback is called.
- *
  * For more details, see {@link custom-element.js}.
  *
  * Each method is called exactly once and overriding them in subclasses
  * is optional.
+ * @implements {BaseElementInterface}
  */
 export class BaseElement {
+  /**
+   * Whether this element supports R1 protocol, which includes:
+   * 1. Layout/unlayout are not managed by the runtime, but instead are
+   *    implemented by the element as needed.
+   * 2. The element can defer its build until later. See `deferredMount`.
+   * 3. The construction of the element is delayed until mount.
+   *
+   * Notice, in this mode `layoutCallback`, `pauseCallback`, `onLayoutMeasure`,
+   * `getLayoutSize`, and other methods are deprecated. The element must
+   * independently handle each of these states internally.
+   *
+   * @return {boolean}
+   * @nocollapse
+   */
+  static R1() {
+    return false;
+  }
+
+  /**
+   * Whether this element supports deferred-build mode. In this mode, the
+   * element's build will be deferred roughly based on the
+   * `content-visibility: auto` rules.
+   *
+   * Only used for R1 elements.
+   *
+   * @param {!AmpElement} unusedElement
+   * @return {boolean}
+   * @nocollapse
+   */
+  static deferredMount(unusedElement) {
+    return true;
+  }
+
+  /**
+   * Subclasses can override this method to opt-in into being called to
+   * prerender when document itself is not yet visible (pre-render mode).
+   *
+   * The return value of this function is used to determine whether or not the
+   * element will be built _and_ laid out during prerender mode. Therefore, any
+   * changes to the return value _after_ buildCallback() will have no affect.
+   *
+   * @param {!AmpElement} unusedElement
+   * @return {boolean}
+   * @nocollapse
+   */
+  static prerenderAllowed(unusedElement) {
+    return false;
+  }
+
+  /**
+   * Subclasses can override this method to indicate that an element can load
+   * network resources.
+   *
+   * Such elements can have their `ensureLoaded` method called.
+   *
+   * @param {!AmpElement} unusedElement
+   * @return {boolean}
+   * @nocollapse
+   */
+  static usesLoading(unusedElement) {
+    return false;
+  }
+
+  /**
+   * Subclasses can override this method to provide a svg logo that will be
+   * displayed as the loader.
+   *
+   * @param {!AmpElement} unusedElement
+   * @return {{
+   *  content: (!Element|undefined),
+   *  color: (string|undefined),
+   * }}
+   * @nocollapse
+   */
+  static createLoaderLogoCallback(unusedElement) {
+    return {};
+  }
+
+  /**
+   * This is the element's build priority.
+   *
+   * The lower the number, the higher the priority.
+   *
+   * The default priority for base elements is LayoutPriority.CONTENT.
+   *
+   * @param {!AmpElement} unusedElement
+   * @return {number}
+   * @nocollapse
+   */
+  static getBuildPriority(unusedElement) {
+    return LayoutPriority.CONTENT;
+  }
+
+  /**
+   * Called by the framework to give the element a chance to preconnect to
+   * hosts and prefetch resources it is likely to need. May be called
+   * multiple times because connections can time out.
+   *
+   * Returns an array of URLs to be preconnected.
+   *
+   * @param {!AmpElement} unusedElement
+   * @return {?Array<string>}
+   * @nocollapse
+   */
+  static getPreconnects(unusedElement) {
+    return null;
+  }
+
+  /**
+   * Subclasses can override this method to indicate that instances need to
+   * use Shadow DOM. The Runtime will ensure that the Shadow DOM polyfill is
+   * installed before upgrading and building this class.
+   *
+   * @return {boolean}
+   * @nocollapse
+   */
+  static requiresShadowDom() {
+    return false;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     /** @public @const {!Element} */
     this.element = element;
+
+    /** @public @const {!Window} */
+    this.win = toWin(element.ownerDocument.defaultView);
+
     /*
     \   \  /  \  /   / /   \     |   _  \     |  \ |  | |  | |  \ |  |  /  ____|
      \   \/    \/   / /  ^  \    |  |_)  |    |   \|  | |  | |   \|  | |  |  __
@@ -126,22 +240,12 @@ export class BaseElement {
        \    /\    / /  _____  \  |  |\  \----.|  |\   | |  | |  |\   | |  |__| |
         \__/  \__/ /__/     \__\ | _| `._____||__| \__| |__| |__| \__|  \______|
 
-    Any private property for BaseElement should be declared in
-    build-system/externs/amp.multipass.extern.js. This is so closure compiler
-    doesn't reuse the same symbol it would use in the core compilation unit for
-    the private property in the extensions compilation unit's private
-    properties.
+    Any private property for BaseElement MUST be wrapped with quotes. We cannot
+    allow Closure Compiler to mangle privates in this class, because it can
+    reuse the same mangled name for a different property in, i.e., amp-youtube's
+    BaseElement subclass (which lives in a different binary).
     */
 
-    /** @package {!Layout} */
-    this.layout_ = Layout.NODISPLAY;
-
-    /** @package {boolean} */
-    this.inViewport_ = false;
-
-    /** @public @const {!Window} */
-    this.win = toWin(element.ownerDocument.defaultView);
-
     /**
      * Maps action name to struct containing the action handler and minimum
      * trust required to invoke the handler.
@@ -149,10 +253,10 @@ export class BaseElement {
      *   handler: function(!./service/action-impl.ActionInvocation),
      *   minTrust: ActionTrust,
      * }>} */
-    this.actionMap_ = null;
+    this['actionMap_'] = null;
 
     /** @private {?string} */
-    this.defaultActionAlias_ = null;
+    this['defaultActionAlias_'] = null;
   }
 
   /**
@@ -168,7 +272,7 @@ export class BaseElement {
    * @return {?string}
    */
   getDefaultActionAlias() {
-    return this.defaultActionAlias_;
+    return this['defaultActionAlias_'];
   }
 
   /**
@@ -180,6 +284,7 @@ export class BaseElement {
    *
    * The default priority for base elements is LayoutPriority.CONTENT.
    * @return {number}
+   * TODO(#31915): remove once R1 migration is complete.
    */
   getLayoutPriority() {
     return LayoutPriority.CONTENT;
@@ -204,7 +309,7 @@ export class BaseElement {
 
   /** @return {!Layout} */
   getLayout() {
-    return this.layout_;
+    return this.element.getLayout();
   }
 
   /**
@@ -212,18 +317,19 @@ export class BaseElement {
    * mainly affects fixed-position elements that are adjusted to be always
    * relative to the document position in the viewport.
    * @return {!./layout-rect.LayoutRectDef}
+   * TODO(#31915): remove once R1 migration is complete.
    */
   getLayoutBox() {
     return this.element.getLayoutBox();
   }
 
   /**
-   * Returns a previously measured layout box relative to the page. The
-   * fixed-position elements are relative to the top of the document.
-   * @return {!./layout-rect.LayoutRectDef}
+   * Returns a previously measured layout size.
+   * @return {!./layout-rect.LayoutSizeDef}
+   * TODO(#31915): remove once R1 migration is complete.
    */
-  getPageLayoutBox() {
-    return this.element.getPageLayoutBox();
+  getLayoutSize() {
+    return this.element.getLayoutSize();
   }
 
   /**
@@ -290,13 +396,6 @@ export class BaseElement {
     return false;
   }
 
-  /**
-   * @return {boolean}
-   */
-  isInViewport() {
-    return this.inViewport_;
-  }
-
   /**
    * This method is called when the element is added to DOM for the first time
    * and before `buildCallback` to give the element a chance to redirect its
@@ -315,23 +414,6 @@ export class BaseElement {
     return null;
   }
 
-  /**
-   * Called when the element is first created. Note that for element created
-   * using createElement this may be before any children are added.
-   */
-  createdCallback() {
-    // Subclasses may override.
-  }
-
-  /**
-   * Override in subclass to adjust the element when it is being added to the
-   * DOM. Could e.g. be used to insert a fallback. Should not typically start
-   * loading a resource.
-   */
-  firstAttachedCallback() {
-    // Subclasses may override.
-  }
-
   /**
    * Override in subclass if the element needs to rebuilt its DOM content.
    * Until the element has been rebuilt its content are not shown with an only
@@ -355,11 +437,22 @@ export class BaseElement {
    * hosts and prefetch resources it is likely to need. May be called
    * multiple times because connections can time out.
    * @param {boolean=} opt_onLayout
+   * TODO(#31915): remove once R1 migration is complete.
    */
   preconnectCallback(opt_onLayout) {
     // Subclasses may override.
   }
 
+  /**
+   * Override in subclass to adjust the element when it is being added to
+   * the DOM. Could e.g. be used to add a listener. Notice, that this
+   * callback is called immediately after `buildCallback()` if the element
+   * is attached to the DOM.
+   */
+  attachedCallback() {
+    // Subclasses may override.
+  }
+
   /**
    * Override in subclass to adjust the element when it is being removed from
    * the DOM. Could e.g. be used to remove a listener.
@@ -369,16 +462,25 @@ export class BaseElement {
   }
 
   /**
-   * Subclasses can override this method to opt-in into being called to
-   * prerender when document itself is not yet visible (pre-render mode).
+   * Set itself as a container element that can be monitored by the scheduler
+   * for auto-mounting. Scheduler is used for R1 elements. A container is
+   * usually a top-level scrollable overlay such as a lightbox or a sidebar.
+   * The main scheduler (`IntersectionObserver`) cannot properly handle elements
+   * inside a non-document scroller and this method instructs the scheduler
+   * to also use the `IntersectionObserver` corresponding to the container.
    *
-   * The return value of this function is used to determine whether or not the
-   * element will be built _and_ laid out during prerender mode. Therefore, any
-   * changes to the return value _after_ buildCallback() will have no affect.
-   * @return {boolean}
+   * @param {!Element=} opt_scroller A child of the container that should be
+   * monitored. Typically a scrollable element.
    */
-  prerenderAllowed() {
-    return false;
+  setAsContainer(opt_scroller) {
+    this.element.setAsContainerInternal(opt_scroller);
+  }
+
+  /**
+   * Removes itself as a container. See `setAsContainer`.
+   */
+  removeAsContainer() {
+    this.element.removeAsContainerInternal();
   }
 
   /**
@@ -403,18 +505,6 @@ export class BaseElement {
     return null;
   }
 
-  /**
-   * Subclasses can override this method to provide a svg logo that will be
-   * displayed as the loader.
-   * @return {{
-   *  content: (!Element|undefined),
-   *  color: (string|undefined),
-   * }}
-   */
-  createLoaderLogoCallback() {
-    return {};
-  }
-
   /**
    * Subclasses can override this method to opt-out of rendering the element
    * when it is not currently visible.
@@ -440,6 +530,45 @@ export class BaseElement {
     return false;
   }
 
+  /**
+   * Ensure that the element is being eagerly loaded.
+   *
+   * Only used for R1 elements.
+   */
+  ensureLoaded() {}
+
+  /**
+   * Update the current `readyState`.
+   *
+   * Only used for R1 elements.
+   *
+   * @param {!./ready-state.ReadyState} state
+   * @param {*=} opt_failure
+   * @final
+   */
+  setReadyState(state, opt_failure) {
+    this.element.setReadyStateInternal(state, opt_failure);
+  }
+
+  /**
+   * Load heavy elements, perform expensive operations, add global
+   * listeners/observers, etc. The mount and unmount can be called multiple
+   * times for resource management. The unmount should reverse the changes
+   * made by the mount. See `unmountCallback` for more info.
+   *
+   * If this callback returns a promise, the `readyState` becomes "complete"
+   * after the promise is resolved.
+   *
+   * @param {!AbortSignal=} opt_abortSignal
+   * @return {?Promise|undefined}
+   */
+  mountCallback(opt_abortSignal) {}
+
+  /**
+   * Unload heavy elements, remove global listeners, etc.
+   */
+  unmountCallback() {}
+
   /**
    * Subclasses can override this method to opt-in into receiving additional
    * {@link layoutCallback} calls. Note that this method is not consulted for
@@ -461,6 +590,7 @@ export class BaseElement {
    * {@link isRelayoutNeeded} method.
    *
    * @return {!Promise}
+   * TODO(#31915): remove once R1 migration is complete.
    */
   layoutCallback() {
     return Promise.resolve();
@@ -479,17 +609,11 @@ export class BaseElement {
     this.togglePlaceholder(false);
   }
 
-  /**
-   * Instructs the resource that it has either entered or exited the visible
-   * viewport. Intended to be implemented by actual components.
-   * @param {boolean} unusedInViewport
-   */
-  viewportCallback(unusedInViewport) {}
-
   /**
    * Requests the element to stop its activity when the document goes into
    * inactive state. The scope is up to the actual component. Among other
    * things the active playback of video or audio content must be stopped.
+   * TODO(#31915): remove once R1 migration is complete.
    */
   pauseCallback() {}
 
@@ -497,6 +621,7 @@ export class BaseElement {
    * Requests the element to resume its activity when the document returns from
    * an inactive state. The scope is up to the actual component. Among other
    * things the active playback of video or audio content may be resumed.
+   * TODO(#31915): remove once R1 migration is complete.
    */
   resumeCallback() {}
 
@@ -507,6 +632,7 @@ export class BaseElement {
    * {@link layoutCallback} in case document becomes active again.
    *
    * @return {boolean}
+   * TODO(#31915): remove once R1 migration is complete.
    */
   unlayoutCallback() {
     return false;
@@ -516,6 +642,7 @@ export class BaseElement {
    * Subclasses can override this method to opt-in into calling
    * {@link unlayoutCallback} when paused.
    * @return {boolean}
+   * TODO(#31915): remove once R1 migration is complete.
    */
   unlayoutOnPause() {
     return false;
@@ -551,13 +678,6 @@ export class BaseElement {
     return loadPromise(element);
   }
 
-  /** @private */
-  initActionMap_() {
-    if (!this.actionMap_) {
-      this.actionMap_ = this.win.Object.create(null);
-    }
-  }
-
   /**
    * Registers the action handler for the method with the specified name.
    *
@@ -570,8 +690,8 @@ export class BaseElement {
    * @public
    */
   registerAction(alias, handler, minTrust = ActionTrust.DEFAULT) {
-    this.initActionMap_();
-    this.actionMap_[alias] = {handler, minTrust};
+    initActionMap(this);
+    this['actionMap_'][alias] = {handler, minTrust};
   }
 
   /**
@@ -587,12 +707,12 @@ export class BaseElement {
     minTrust = ActionTrust.DEFAULT
   ) {
     devAssert(
-      !this.defaultActionAlias_,
+      !this['defaultActionAlias_'],
       'Default action "%s" already registered.',
-      this.defaultActionAlias_
+      this['defaultActionAlias_']
     );
     this.registerAction(alias, handler, minTrust);
-    this.defaultActionAlias_ = alias;
+    this['defaultActionAlias_'] = alias;
   }
 
   /**
@@ -610,10 +730,10 @@ export class BaseElement {
     let {method} = invocation;
     // If the default action has an alias, the handler will be stored under it.
     if (method === DEFAULT_ACTION) {
-      method = this.defaultActionAlias_ || method;
+      method = this['defaultActionAlias_'] || method;
     }
-    this.initActionMap_();
-    const holder = this.actionMap_[method];
+    initActionMap(this);
+    const holder = this['actionMap_'][method];
     const {tagName} = this.element;
     userAssert(holder, `Method not found: ${method} in ${tagName}`);
     const {handler, minTrust} = holder;
@@ -645,27 +765,6 @@ export class BaseElement {
     }
   }
 
-  /**
-   * Utility method to propagate all data attributes from this element
-   * to the target element. (For use with arbitrary data attributes.)
-   * Removes any data attributes that are missing on this element from
-   * the target element.
-   * @param {!Element} targetElement
-   */
-  propagateDataset(targetElement) {
-    for (const key in targetElement.dataset) {
-      if (!(key in this.element.dataset)) {
-        delete targetElement.dataset[key];
-      }
-    }
-
-    for (const key in this.element.dataset) {
-      if (targetElement.dataset[key] !== this.element.dataset[key]) {
-        targetElement.dataset[key] = this.element.dataset[key];
-      }
-    }
-  }
-
   /**
    * Utility method that forwards the given list of non-bubbling events
    * from the given element to this element as custom events with the same name.
@@ -677,7 +776,7 @@ export class BaseElement {
   forwardEvents(events, element) {
     const unlisteners = (isArray(events) ? events : [events]).map((eventType) =>
       listen(element, eventType, (event) => {
-        this.element.dispatchCustomEvent(eventType, getData(event) || {});
+        dispatchCustomEvent(this.element, eventType, getData(event) || {});
       })
     );
 
@@ -724,20 +823,11 @@ export class BaseElement {
   /**
    * Hides or shows the loading indicator.
    * @param {boolean} state
+   * @param {boolean=} force
    * @public @final
    */
-  toggleLoading(state) {
-    this.element.toggleLoading(state);
-  }
-
-  /**
-   * Returns whether the loading indicator is reused again after the first
-   * render.
-   * @return {boolean}
-   * @public
-   */
-  isLoadingReused() {
-    return false;
+  toggleLoading(state, force = false) {
+    this.element.toggleLoading(state, force);
   }
 
   /**
@@ -982,15 +1072,6 @@ export class BaseElement {
     Services.mutatorForDoc(this.getAmpDoc()).expandElement(this.element);
   }
 
-  /**
-   * Called every time an owned AmpElement expands itself.
-   * See {@link expand}.
-   * @param {!AmpElement} unusedElement Child element that was expanded.
-   */
-  expandedCallback(unusedElement) {
-    // Subclasses may override.
-  }
-
   /**
    * Called when one or more attributes are mutated.
    * Note:
@@ -1011,20 +1092,37 @@ export class BaseElement {
    * This may currently not work with extended elements. Please file
    * an issue if that is required.
    * @public
+   * TODO(#31915): remove once R1 migration is complete.
    */
   onLayoutMeasure() {}
 
-  /**
-   * Called only when the measurements of an amp-element changes. This
-   * would not trigger for every measurement invalidation caused by a mutation.
-   * @public
-   */
-  onMeasureChanged() {}
-
   /**
    * @return {./log.Log}
    */
   user() {
     return user(this.element);
   }
+
+  /**
+   * Returns this BaseElement instance. This is equivalent to Bento's
+   * imperative API object, since this is where we define the element's custom
+   * APIs.
+   *
+   * @return {!Promise<!Object>}
+   */
+  getApi() {
+    return this;
+  }
+}
+
+/**
+ * This would usually be a private method on BaseElement class, but we cannot
+ * use privates here. So, it's manually devirtualized into a regular function.
+ *
+ * @param {typeof BaseElement} baseElement
+ */
+function initActionMap(baseElement) {
+  if (!baseElement['actionMap_']) {
+    baseElement['actionMap_'] = baseElement.win.Object.create(null);
+  }
 }
diff --git a/src/base-template.js b/src/base-template.js
new file mode 100644
index 0000000000000..ec92dfbfebb2c
--- /dev/null
+++ b/src/base-template.js
@@ -0,0 +1,144 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Services} from './services';
+import {dev} from './log';
+import {isElement} from './core/types';
+
+/**
+ * The interface that is implemented by all templates.
+ * @abstract
+ */
+export class BaseTemplate {
+  /**
+   * @param {!Element} element
+   * @param {!Window} win
+   */
+  constructor(element, win) {
+    /** @public @const */
+    this.element = element;
+
+    /** @public @const {!Window} */
+    this.win = element.ownerDocument.defaultView || win;
+
+    /** @private @const */
+    this.viewer_ = Services.viewerForDoc(this.element);
+
+    this.compileCallback();
+  }
+
+  /**
+   * Override in subclass if the element needs to compile the template.
+   * @protected
+   */
+  compileCallback() {
+    // Subclasses may override.
+  }
+
+  /**
+   * Bypasses template rendering and directly sets HTML. Should only be used
+   * for server-side rendering case. To be implemented by subclasses.
+   * @param {string} unusedData
+   * @return {!Element|!Array<Element>}
+   * @abstract
+   */
+  setHtml(unusedData) {}
+
+  /**
+   * To be implemented by subclasses.
+   * @param {!JsonObject|string} unusedData
+   * @return {!Element}
+   * @abstract
+   */
+  render(unusedData) {}
+
+  /**
+   * To be implemented by subclasses.
+   * @param {!JsonObject|string} unusedData
+   * @return {string}
+   * @abstract
+   */
+  renderAsString(unusedData) {}
+
+  /**
+   * Iterate through the child nodes of the given root, applying the
+   * given callback to non-empty text nodes and elements.
+   * @param {!Element} root
+   * @param {function((!Element|string))} callback
+   */
+  visitChildren_(root, callback) {
+    for (let n = root.firstChild; n != null; n = n.nextSibling) {
+      if (n.nodeType == /* TEXT */ 3) {
+        const text = n.textContent.trim();
+        if (text) {
+          callback(text);
+        }
+      } else if (n.nodeType == /* COMMENT */ 8) {
+        // Ignore comments.
+      } else if (isElement(n)) {
+        callback(dev().assertElement(n));
+      }
+    }
+  }
+
+  /**
+   * Unwraps the root element. If root has a single element child,
+   * returns the child. Otherwise, returns root.
+   * @param {!Element} root
+   * @return {!Element}
+   * @protected @final
+   */
+  tryUnwrap(root) {
+    let onlyChild;
+    this.visitChildren_(root, (c) => {
+      if (onlyChild === undefined && c.nodeType) {
+        onlyChild = c;
+      } else {
+        onlyChild = null;
+      }
+    });
+    return onlyChild || root;
+  }
+
+  /**
+   * Unwraps the root element and returns any children in an array.
+   * Text node children are normalized inside a <div>.
+   * @param {!Element} root
+   * @return {!Array<!Element>}
+   * @protected @final
+   */
+  unwrapChildren(root) {
+    const children = [];
+    this.visitChildren_(root, (c) => {
+      if (typeof c == 'string') {
+        const element = this.win.document.createElement('div');
+        element.textContent = c;
+        children.push(element);
+      } else {
+        children.push(c);
+      }
+    });
+    return children;
+  }
+
+  /**
+   * @protected @final
+   * @return {boolean}
+   */
+  viewerCanRenderTemplates() {
+    return this.viewer_.hasCapability('viewerRenderTemplate');
+  }
+}
diff --git a/src/batched-json.js b/src/batched-json.js
index e4d4b0f5cf06e..cd19914f414f4 100644
--- a/src/batched-json.js
+++ b/src/batched-json.js
@@ -16,9 +16,27 @@
 
 import {Services} from './services';
 import {assertHttpsUrl} from './url';
-import {getValueForExpr} from './json';
+import {getValueForExpr} from './core/types/object';
 import {user} from './log';
 
+/**
+ * Detail of each `options` property:
+ * expr - Dot-syntax reference to subdata of JSON result to return. If not specified,
+ *     entire JSON result is returned.
+ * urlReplacement - If ALL, replaces all URL vars. If OPT_IN, replaces allowlisted
+ *     URL vars. Otherwise, don't expand.
+ * refresh - Forces refresh of browser cache.
+ * xssiPrefix - Prefix to optionally strip from the response before calling parseJson.
+ *
+ * @typedef {{
+ *  expr:(string|undefined),
+ *  urlReplacement: (UrlReplacementPolicy|undefined),
+ *  refresh: (boolean|undefined),
+ *  xssiPrefix: (string|undefined),
+ * }}
+ */
+export let BatchFetchOptionsDef;
+
 /**
  * @enum {number}
  */
@@ -35,42 +53,21 @@ export const UrlReplacementPolicy = {
  *
  * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
  * @param {!Element} element
- * @param {!Object} options options bag for modifying the request.
- * @param {string|undefined} options.expr Dot-syntax reference to subdata of JSON result.
- *     to return. If not specified, entire JSON result is returned.
- * @param {UrlReplacementPolicy|undefined} options.urlReplacement If ALL, replaces all URL
- *     vars. If OPT_IN, replaces allowlisted URL vars. Otherwise, don't expand.
- * @param {boolean|undefined} options.refresh Forces refresh of browser cache.
- * @param {string|undefined} options.token Auth token that forces a POST request.
- * @param {string|undefined} options.xssiPrefix Prefix to optionally
- *     strip from the response before calling parseJson.
+ * @param {!BatchFetchOptionsDef} options options bag for modifying the request.
  * @return {!Promise<!JsonObject|!Array<JsonObject>>} Resolved with JSON
  *     result or rejected if response is invalid.
  */
-export function batchFetchJsonFor(
-  ampdoc,
-  element,
-  {
+export function batchFetchJsonFor(ampdoc, element, options = {}) {
+  const {
     expr = '.',
     urlReplacement = UrlReplacementPolicy.NONE,
     refresh = false,
-    token = undefined,
     xssiPrefix = undefined,
-  } = {}
-) {
+  } = options;
   assertHttpsUrl(element.getAttribute('src'), element);
   const xhr = Services.batchedXhrFor(ampdoc.win);
   return requestForBatchFetch(element, urlReplacement, refresh)
     .then((data) => {
-      if (token !== undefined) {
-        data.fetchOpt['method'] = 'POST';
-        data.fetchOpt['headers'] = {
-          'Content-Type': 'application/x-www-form-urlencoded',
-        };
-        data.fetchOpt['body'] = {
-          'ampViewerAuthToken': token,
-        };
-      }
       return xhr.fetchJson(data.xhrUrl, data.fetchOpt);
     })
     .then((res) => Services.xhrFor(ampdoc.win).xssiJson(res, xssiPrefix))
diff --git a/src/chunk.js b/src/chunk.js
index ea43ba054ce19..372f1cc48ddfb 100644
--- a/src/chunk.js
+++ b/src/chunk.js
@@ -19,7 +19,7 @@ import {dev} from './log';
 import {getData} from './event-helper';
 import {getServiceForDoc, registerServiceBuilderForDoc} from './service';
 import {makeBodyVisibleRecovery} from './style-installer';
-import PriorityQueue from './utils/priority-queue';
+import PriorityQueue from './core/data-structures/priority-queue';
 
 /**
  * @const {string}
@@ -308,6 +308,11 @@ class Chunks {
     this.boundExecute_ = this.execute_.bind(this);
     /** @private {number} */
     this.durationOfLastExecution_ = 0;
+    /** @private @const {boolean} */
+    this.supportsInputPending_ = !!(
+      this.win_.navigator.scheduling &&
+      this.win_.navigator.scheduling.isInputPending
+    );
 
     /**
      * Set to true if we scheduled a macro or micro task to execute the next
@@ -449,13 +454,18 @@ class Chunks {
    * @private
    */
   executeAsap_(idleDeadline) {
-    // If we've spent over 5 millseconds executing the
-    // last instruction yeild back to the main thread.
+    // If the user-agent supports isInputPending, use it to break to a macro task as necessary.
+    // Otherwise If we've spent over 5 millseconds executing the
+    // last instruction yield back to the main thread.
     // 5 milliseconds is a magic number.
     if (
       !allowLongTasks &&
       this.bodyIsVisible_ &&
-      this.durationOfLastExecution_ > 5
+      (this.supportsInputPending_
+        ? /** @type {!{scheduling: {isInputPending: Function}}} */ (
+            this.win_.navigator
+          ).scheduling.isInputPending()
+        : this.durationOfLastExecution_ > 5)
     ) {
       this.durationOfLastExecution_ = 0;
       this.requestMacroTask_();
diff --git a/src/config.js b/src/config.js
index 5fec8a5773d73..3d9fd9a32984e 100644
--- a/src/config.js
+++ b/src/config.js
@@ -61,7 +61,21 @@ function getMetaUrl(name) {
   return (metaEl && metaEl.getAttribute('content')) || null;
 }
 
-/** @type {!Object<string, string|boolean|RegExp|Array<RegExp>>} */
+/**
+ * @typedef {{
+ *   thirdParty: string,
+ *   thirdPartyFrameHost: string,
+ *   thirdPartyFrameRegex: !RegExp,
+ *   cdn: string,
+ *   cdnProxyRegex: !RegExp,
+ *   localhostRegex: !RegExp,
+ *   errorReporting: string,
+ *   betaErrorReporting: string,
+ *   localDev: boolean,
+ *   trustedViewerHosts: !Array<!RegExp>,
+ *   geoApi: ?string,
+ * }}
+ */
 export const urls = {
   thirdParty: env['thirdPartyUrl'] || 'https://3p.ampproject.net',
   thirdPartyFrameHost: env['thirdPartyFrameHost'] || 'ampproject.net',
@@ -85,7 +99,7 @@ export const urls = {
    * propagating the referrer. If you believe your domain should be here,
    * file the issue on GitHub to discuss. The process will be similar
    * (but somewhat more stringent) to the one described in the [3p/README.md](
-   * https://github.com/ampproject/amphtml/blob/master/3p/README.md)
+   * https://github.com/ampproject/amphtml/blob/main/3p/README.md)
    *
    * {!Array<!RegExp>}
    */
diff --git a/src/consent.js b/src/consent.js
index 188cf38b60137..d8e591944176c 100644
--- a/src/consent.js
+++ b/src/consent.js
@@ -16,8 +16,9 @@
 
 import {
   CONSENT_POLICY_STATE, // eslint-disable-line no-unused-vars
-} from './consent-state';
+} from './core/constants/consent-state';
 import {Services} from './services';
+import {dict} from './core/types/object';
 
 /**
  * Returns a promise that resolve when all consent state the policy wait
@@ -58,14 +59,11 @@ export function getConsentPolicySharedData(element, policyId) {
 }
 
 /**
- * TODO(micajuine-ho): Combine with getConsentPolicyGdprApplies
- * and (getConsentType in future) getGdprAppliesInfo to return
- * a consentInfo object.
  * @param {!Element|!ShadowRoot} element
- * @param {string} policyId
+ * @param {string=} policyId
  * @return {!Promise<string>}
  */
-export function getConsentPolicyInfo(element, policyId) {
+export function getConsentPolicyInfo(element, policyId = 'default') {
   // Return the stored consent string.
   return Services.consentPolicyServiceForDocOrNull(element).then(
     (consentPolicy) => {
@@ -80,14 +78,11 @@ export function getConsentPolicyInfo(element, policyId) {
 }
 
 /**
- * TODO(micajuine-ho): Combine with getConsentPolicyGdprApplies
- * (and getConsentType in future) to return a consentMetadata
- * object.
  * @param {!Element|!ShadowRoot} element
- * @param {string} policyId
+ * @param {string=} policyId
  * @return {!Promise<?Object|undefined>}
  */
-export function getConsentMetadata(element, policyId) {
+export function getConsentMetadata(element, policyId = 'default') {
   // Return the stored consent metadata.
   return Services.consentPolicyServiceForDocOrNull(element).then(
     (consentPolicy) => {
@@ -102,20 +97,37 @@ export function getConsentMetadata(element, policyId) {
 }
 
 /**
- * @param {!Element|!ShadowRoot} element
- * @param {string} policyId
- * @return {!Promise<?boolean>}
+ * Returns a set of consent values to forward to a 3rd party (like an iframe).
+ * @param {!Element} element
+ * @param {?string=} opt_policyId
+ * @return {!Promise<!JsonObject>}
+ *   See extensions/amp-consent/customizing-extension-behaviors-on-consent.md:
+ *    - consentMetadata
+ *    - consentString
+ *    - consentPolicyState
+ *    - consentPolicySharedData
  */
-export function getConsentPolicyGdprApplies(element, policyId) {
-  // Return the stored gdpr applies value.
-  return Services.consentPolicyServiceForDocOrNull(element).then(
-    (consentPolicy) => {
-      if (!consentPolicy) {
-        return null;
-      }
-      return consentPolicy.getGdprApplies(/** @type {string} */ (policyId));
+export function getConsentDataToForward(element, opt_policyId) {
+  return Services.consentPolicyServiceForDocOrNull(element).then((policy) => {
+    const gettersOrNull = dict({
+      'consentMetadata': policy && policy.getConsentMetadataInfo,
+      'consentString': policy && policy.getConsentStringInfo,
+      'consentPolicyState': policy && policy.whenPolicyResolved,
+      'consentPolicySharedData': policy && policy.getMergedSharedData,
+    });
+    if (!policy) {
+      return gettersOrNull;
     }
-  );
+    return /** @type {!JsonObject} */ (
+      Promise.all(
+        Object.keys(gettersOrNull).map((key) =>
+          gettersOrNull[key]
+            .call(policy, opt_policyId || 'default')
+            .then((value) => ({[key]: value}))
+        )
+      ).then((objs) => Object.assign.apply({}, objs))
+    );
+  });
 }
 
 /**
diff --git a/src/context/contextprops.js b/src/context/contextprops.js
new file mode 100644
index 0000000000000..cca7204d90464
--- /dev/null
+++ b/src/context/contextprops.js
@@ -0,0 +1,89 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Loading, reducer as loadingReducer} from '../core/loading-instructions';
+import {contextProp} from './prop';
+
+// typedef imports
+import {ContextPropDef} from './prop.type';
+
+/**
+ * Defines whether a DOM subtree can be currently seen by the user. A subtree
+ * can be not renderable due `display: none`, or `hidden` attribute, unslotted
+ * in shadow DOM, or because a parent component knows for certain that this
+ * subtree cannot be seen by the user without some active interaction.
+ *
+ * Default is `true`.
+ *
+ * @const {!ContextPropDef<boolean>}
+ */
+const CanRender = contextProp('CanRender', {
+  defaultValue: true,
+  recursive: (inputs) => inputs.reduce(andReducer),
+  compute: (contextNode, inputs, parentValue) =>
+    (parentValue && inputs.reduce(andReducer, true)) || false,
+});
+
+/**
+ * Defines whether a DOM subtree can be currently played or animated. If a
+ * a subtree not renderable (`canRender == false`), it also cannot be played.
+ * But even if a subtree is renderable, a parent component may decide that
+ * playback should not be possible.
+ *
+ * Default is `true`.
+ *
+ * @const {!ContextPropDef<boolean, boolean>}
+ */
+const CanPlay = contextProp('CanPlay', {
+  defaultValue: true,
+  recursive: (inputs) => inputs.reduce(andReducer),
+  deps: [CanRender],
+  compute: (contextNode, inputs, parentValue, canRender) =>
+    (canRender && parentValue && inputs.reduce(andReducer, true)) || false,
+});
+
+/**
+ * The default `Loading` instruction for a subtree. See `Loading` for the set
+ * of possible values. Non-renderable subtrees automatically get a value of
+ * "lazy".
+ *
+ * Default is "auto".
+ *
+ * @const {!ContextPropDef<!Loading, boolean>}
+ */
+const LoadingProp = contextProp('Loading', {
+  defaultValue: Loading.AUTO,
+  recursive: true,
+  deps: [CanRender],
+  compute: (contextNode, inputs, parentValue, canRender) =>
+    loadingReducer(
+      canRender ? Loading.AUTO : Loading.LAZY,
+      loadingReducer(
+        parentValue || Loading.AUTO,
+        inputs.reduce(loadingReducer, Loading.AUTO)
+      )
+    ),
+});
+
+/**
+ * @param {T} acc
+ * @param {T} value
+ * @return {T}
+ * @template T
+ */
+const andReducer = (acc, value) => acc && value;
+
+export {CanRender, CanPlay, LoadingProp};
diff --git a/src/context/index.js b/src/context/index.js
new file mode 100644
index 0000000000000..8353f40ab92c2
--- /dev/null
+++ b/src/context/index.js
@@ -0,0 +1,155 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {ContextNode} from './node';
+export {contextProp} from './prop';
+export {subscribe, unsubscribe} from './subscriber';
+
+// typedef imports
+import {ContextPropDef} from './prop.type';
+
+/**
+ * Direct slot assignment. Works the same way as shadow slots, but does not
+ * require a shadow root. Automatically starts the discovery phase for the
+ * affected nodes.
+ *
+ * See `Element.assignedSlot` API.
+ *
+ * @param {!Node} node The target node.
+ * @param {!Node} slot The slot to which the target node is assigned.
+ */
+export function assignSlot(node, slot) {
+  ContextNode.assignSlot(node, slot);
+}
+
+/**
+ * Unassigns the direct slot previously done by the `assignSlot` call.
+ * Automatically starts the discovery phase for the affected nodes.
+ *
+ * @param {!Node} node The target node.
+ * @param {!Node} slot The slot from which the target node is assigned.
+ */
+export function unassignSlot(node, slot) {
+  ContextNode.unassignSlot(node, slot);
+}
+
+/**
+ * Sets (or unsets) the direct parent. If the parent is set, the node will no
+ * longer try to discover itself.
+ *
+ * @param {!Node} node
+ * @param {?Node} parent
+ */
+export function setParent(node, parent) {
+  ContextNode.get(node).setParent(parent);
+}
+
+/**
+ * @param {!Node} node
+ */
+export function discover(node) {
+  ContextNode.get(node).discover();
+}
+
+/**
+ * Designates (or undesignates) the node as a root node. If the node is
+ * designated as a root, it will no longer discover itself.
+ *
+ * @param {!Node} node
+ * @param {boolean} isRoot
+ */
+export function setIsRoot(node, isRoot) {
+  ContextNode.get(node).setIsRoot(isRoot);
+}
+
+/**
+ * Reruns discovery on the children of the specified node, if any.
+ *
+ * @param {!Node} node
+ */
+export function rediscoverChildren(node) {
+  ContextNode.rediscoverChildren(node);
+}
+
+/**
+ * Sets the property's input value. This is analagous to a CSS specified
+ * value. Several values for the same property can be set on a node - one
+ * per each setter. A repeated call for the same setter overwrites a
+ * previously set input. This is similar to how the same CSS property can be
+ * set in a stylesheet using different classes. The property computation
+ * decides how to treat several values. For instance:
+ * - A property can pick the first set input value (e.g. `font-size`).
+ * - A property can pick the min/max set input value (e.g. `priority`).
+ * - A property can reduce all values using `AND` (e.g. `renderable`).
+ *
+ * Once the input is set, the recalculation is rescheduled asynchronously.
+ * All dependent properties are also recalculated.
+ *
+ * @param {!Node} node The target node.
+ * @param {!ContextPropDef<T>} prop
+ * @param {function(T)} setter
+ * @param {T} value
+ * @template T
+ */
+export function setProp(node, prop, setter, value) {
+  ContextNode.get(node).values.set(prop, setter, value);
+}
+
+/**
+ * Unsets the input value for the specified property and setter.
+ * See `setProp()` for more info.
+ *
+ * @param {!Node} node The target node.
+ * @param {!ContextPropDef<T>} prop
+ * @param {function(T)} setter
+ * @template T
+ */
+export function removeProp(node, prop, setter) {
+  ContextNode.get(node).values.remove(prop, setter);
+}
+
+/**
+ * @param {!Node} node
+ * @param {string} name
+ * @param {function(!Node):boolean} match
+ * @param {number=} weight
+ */
+export function addGroup(node, name, match, weight = 0) {
+  ContextNode.get(node).addGroup(name, match, weight);
+}
+
+/**
+ * @param {!Node} node
+ * @param {string} groupName
+ * @param {!ContextPropDef<T>} prop
+ * @param {function(T)} setter
+ * @param {T} value
+ * @template T
+ */
+export function setGroupProp(node, groupName, prop, setter, value) {
+  ContextNode.get(node).group(groupName).values.set(prop, setter, value);
+}
+
+/**
+ * @param {!Node} node
+ * @param {string} groupName
+ * @param {!ContextPropDef<T>} prop
+ * @param {function(T)} setter
+ * @template T
+ */
+export function removeGroupProp(node, groupName, prop, setter) {
+  ContextNode.get(node).group(groupName).values.remove(prop, setter);
+}
diff --git a/src/context/node.js b/src/context/node.js
new file mode 100644
index 0000000000000..db83e07ebeec9
--- /dev/null
+++ b/src/context/node.js
@@ -0,0 +1,505 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Values} from './values';
+import {devAssert, devAssertElement} from '../core/assert';
+import {getMode} from '../mode';
+import {pushIfNotExist, removeItem} from '../core/types/array';
+import {throttleTail} from './scheduler';
+
+// typedef imports
+import {ContextPropDef} from './prop.type';
+
+// Properties set on the DOM nodes to track the context state.
+const NODE_PROP = '__AMP_NODE';
+const ASSIGNED_SLOT_PROP = '__AMP_ASSIGNED_SLOT';
+const AMP_PREFIX = 'AMP-';
+
+// Relevant node types.
+// See https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType.
+const ELEMENT_NODE = 1;
+const DOCUMENT_NODE = 9;
+// Includes shadow root, template, etc.
+const FRAGMENT_NODE = 11;
+
+/**
+ * The structure for a group of nodes.
+ *
+ * @typedef {{
+ *   cn: !ContextNode,
+ *   match: function(!Node, !Node):boolean,
+ *   weight: number,
+ * }}
+ */
+let GroupDef;
+
+/**
+ * The context node is a sparse tree over the DOM tree. Any node that needs
+ * to manage and compute state can be attached to the context node tree. The
+ * tree (mostly) automatically self-manages: the new nodes and DOM mutations
+ * are auto-discovered or prompted.
+ *
+ * @package
+ * @template SID subscriber ID type(s)
+ */
+export class ContextNode {
+  /**
+   * Returns the existing context node or creates a new one.
+   *
+   * @param {!Node} node
+   * @return {!ContextNode}
+   */
+  static get(node) {
+    let contextNode = /** @type {!ContextNode|undefined} */ (node[NODE_PROP]);
+    if (!contextNode) {
+      contextNode = new ContextNode(node, null);
+      if (getMode().localDev || getMode().test) {
+        // The `Object.defineProperty({enumerable: false})` helps tests, but
+        // hurts performance. So this is only done in a dev/test modes.
+        Object.defineProperty(node, NODE_PROP, {
+          value: contextNode,
+          writable: false,
+          enumerable: false,
+          configurable: false,
+        });
+      } else {
+        node[NODE_PROP] = contextNode;
+      }
+    }
+    return contextNode;
+  }
+
+  /**
+   * Returns the closest available context node to the one specified. If the
+   * `node` has the context node, it's returned unless `includeSelf` is set as
+   * `false`.
+   *
+   * The DOM traversal goes at most as far as the root node (document,
+   * shadow root, document fragment) or as far as the DOM tree allows. The
+   * traversal follows the assigned shadow slots.
+   *
+   * Root nodes (document or shadow root) and AMP elements are auto-created
+   * during the traversal.
+   *
+   * @param {!Node} node The node from which to perform the search.
+   * @param {boolean=} includeSelf Whether the specified node itself should
+   * be included in the search. Defaults to `true`.
+   * @return {?ContextNode}
+   */
+  static closest(node, includeSelf = true) {
+    let n = node;
+    while (n) {
+      // Check if a node is a candidate to be returned.
+      if (n != node || includeSelf) {
+        if (n[NODE_PROP]) {
+          // Already a discovered node.
+          return /** @type {!ContextNode} */ (n[NODE_PROP]);
+        }
+        const {nodeType} = n;
+        if (
+          // A context node is always created for a root. Due to this, a
+          // non-root element is always at least attached to a root. This
+          // allows for quick discovery and reattachment when new information
+          // becomes available.
+          nodeType == DOCUMENT_NODE ||
+          nodeType == FRAGMENT_NODE ||
+          // An AMP node will always have a context node backing it at some
+          // point.
+          (nodeType == ELEMENT_NODE &&
+            devAssertElement(n).tagName.startsWith(AMP_PREFIX))
+        ) {
+          return ContextNode.get(n);
+        }
+      }
+      // Navigate up the DOM tree. Notice that we do not automatically go over
+      // a root node boundary.
+      const assignedSlot =
+        /** @type {?Node|undefined} */ (n[ASSIGNED_SLOT_PROP]) ||
+        n.assignedSlot;
+      if (assignedSlot) {
+        n = assignedSlot;
+      } else {
+        n = n.parentNode;
+      }
+    }
+    // Only disconnected nodes will return `null` here.
+    return null;
+  }
+
+  /**
+   * Direct slot assignment. Works the same way as shadow slots, but does not
+   * require a shadow root. Automatically starts the discovery phase for the
+   * affected nodes.
+   *
+   * See `Element.assignedSlot` API.
+   *
+   * @param {!Node} node The target node.
+   * @param {!Node} slot The slot to which the target node is assigned.
+   */
+  static assignSlot(node, slot) {
+    if (node[ASSIGNED_SLOT_PROP] == slot) {
+      return;
+    }
+    node[ASSIGNED_SLOT_PROP] = slot;
+    discoverContained(node);
+  }
+
+  /**
+   * Unassigns the direct slot previously done by the `assignSlot` call.
+   * Automatically starts the discovery phase for the affected nodes.
+   *
+   * @param {!Node} node The target node.
+   * @param {!Node} slot The slot from which the target node is assigned.
+   */
+  static unassignSlot(node, slot) {
+    if (node[ASSIGNED_SLOT_PROP] != slot) {
+      return;
+    }
+    node[ASSIGNED_SLOT_PROP] = undefined;
+    discoverContained(node);
+  }
+
+  /**
+   * Reruns discovery on the children of the specified node, if any.
+   *
+   * @param {!Node} node
+   */
+  static rediscoverChildren(node) {
+    const contextNode = /** @type {!ContextNode|undefined} */ (node[NODE_PROP]);
+    contextNode?.children?.forEach(discoverContextNode);
+  }
+
+  /**
+   * Creates the context node and automatically starts the discovery process.
+   *
+   * @param {!Node} node
+   * @param {?string} name
+   */
+  constructor(node, name) {
+    /** @const {!Node} */
+    this.node = node;
+
+    /** @const @package {?string} */
+    this.name = name;
+
+    /**
+     * Whether this node is a root. The Document DOM nodes are automatically
+     * considered as roots. But other nodes can become roots as well
+     * (e.g. shadow roots) via `setIsRoot()` API.
+     *
+     * @package {boolean}
+     */
+    this.isRoot = node.nodeType == DOCUMENT_NODE;
+
+    /**
+     * The root context node. Always available for a DOM node connected to a
+     * root node after the discovery phase.
+     *
+     * @package {?ContextNode}
+     */
+    this.root = this.isRoot ? this : null;
+
+    /**
+     * Parent should be mostly meaningless to most API clients, because
+     * it's an async concept: a parent context node can can be instantiated at
+     * any time and it doesn't mean that this node has to change. This is
+     * why the API is declared as package-private. However, it needs to be
+     * unobfuscated to avoid cross-binary issues.
+     *
+     * @package {?ContextNode}
+     */
+    this.parent = null;
+
+    /**
+     * See `parent` description.
+     *
+     * @package {?Array<!ContextNode>}
+     */
+    this.children = null;
+
+    /** @package {?Map<string, !GroupDef>} */
+    this.groups = null;
+
+    /** @package {!Values} */
+    this.values = new Values(this);
+
+    /** @private {?Map<!SID, !./subscriber.Subscriber>} */
+    this.subscribers_ = null;
+
+    /** @private {boolean} */
+    this.parentOverridden_ = false;
+
+    /** @const @private {function()} */
+    this.scheduleDiscover_ = throttleTail(
+      this.discover_.bind(this),
+      setTimeout
+    );
+
+    // Shadow root: track slot changes.
+    if (node.nodeType == FRAGMENT_NODE) {
+      node.addEventListener('slotchange', (e) => {
+        const slot = /** @type {!HTMLSlotElement} */ (e.target);
+        // Rediscover newly assigned nodes.
+        slot.assignedNodes().forEach(discoverContained);
+        // Rediscover unassigned nodes.
+        ContextNode.closest(slot)?.children?.forEach(discoverContextNode);
+      });
+    }
+
+    this.discover();
+  }
+
+  /**
+   * Requests the discovery phase. Asynchronously finds the nearest parent for
+   * this node and its root. Roots and parents set directly via `setParent()`
+   * API are not discoverable.
+   */
+  discover() {
+    if (this.isDiscoverable()) {
+      this.scheduleDiscover_();
+    } else if (this.name && this.children) {
+      // Recursively discover the group's children.
+      this.children.forEach(discoverContextNode);
+    }
+  }
+
+  /**
+   * @return {boolean}
+   * @protected Used cross-binary.
+   */
+  isDiscoverable() {
+    return !this.isRoot && !this.parentOverridden_;
+  }
+
+  /**
+   * Sets (or unsets) the direct parent. If the parent is set, the node will no
+   * longer try to discover itself.
+   *
+   * @param {!ContextNode|!Node|null} parent
+   */
+  setParent(parent) {
+    const parentContext = parent?.nodeType
+      ? ContextNode.get(/** @type {!Node} */ (parent))
+      : /** @type {?ContextNode} */ (parent);
+    this.updateTree_(parentContext, /* parentOverridden */ parent != null);
+  }
+
+  /**
+   * Designates (or undesignates) the node as a root node. If the node is
+   * designated as a root, it will no longer discover itself.
+   *
+   * @param {boolean} isRoot
+   */
+  setIsRoot(isRoot) {
+    this.isRoot = isRoot;
+    const newRoot = isRoot ? this : this.parent?.root ?? null;
+    this.updateRoot(newRoot);
+  }
+
+  /**
+   * @param {?ContextNode} root
+   * @protected Used cross-binary.
+   */
+  updateRoot(root) {
+    devAssert(!root || root.isRoot);
+    const oldRoot = this.root;
+    if (root != oldRoot) {
+      // The root has changed.
+      this.root = root;
+
+      // Make sure the tree changes have been reflected for values.
+      this.values.rootUpdated();
+
+      // Make sure the tree changes have been reflected for subscribers.
+      this.subscribers_?.forEach((comp) => comp.rootUpdated());
+
+      // Propagate the root to the subtree.
+      this.children?.forEach((child) => child.updateRoot(root));
+    }
+  }
+
+  /**
+   * @param {string} name
+   * @param {function(!Node):boolean} match
+   * @param {number} weight
+   * @return {!ContextNode}
+   */
+  addGroup(name, match, weight) {
+    const groups = this.groups || (this.groups = new Map());
+    const {children, node} = this;
+    const cn = new ContextNode(node, name);
+    groups.set(name, {cn, match, weight});
+    cn.setParent(this);
+    children?.forEach(discoverContextNode);
+    return cn;
+  }
+
+  /**
+   * @param {string} name
+   * @return {?ContextNode}
+   */
+  group(name) {
+    return this.groups?.get(name)?.cn || null;
+  }
+
+  /**
+   * @param {!Node} node
+   * @return {?ContextNode}
+   * @protected
+   */
+  findGroup(node) {
+    const {groups} = this;
+    if (!groups) {
+      return null;
+    }
+    let found = null;
+    let maxWeight = Number.NEGATIVE_INFINITY;
+    groups.forEach(({cn, match, weight}) => {
+      if (match(node, this.node) && weight > maxWeight) {
+        found = cn;
+        maxWeight = weight;
+      }
+    });
+    return found;
+  }
+
+  /**
+   * Add or update a subscriber with a specified ID. If subscriber doesn't
+   * yet exist, it will be created using the specified factory. The use
+   * of factory is important to reduce bundling costs for context node.
+   *
+   * @param {!SID} id
+   * @param {typeof ./subscriber.Subscriber} Ctor
+   * @param {!Function} func
+   * @param {!Array<!ContextPropDef>} deps
+   */
+  subscribe(id, Ctor, func, deps) {
+    const subscribers = this.subscribers_ || (this.subscribers_ = new Map());
+    let subscriber = subscribers.get(id);
+    if (!subscriber) {
+      subscriber = new Ctor(this, func, deps);
+      subscribers.set(id, subscriber);
+    }
+  }
+
+  /**
+   * Removes the subscriber previously set with `subscribe`.
+   *
+   * @param {!SID} id
+   */
+  unsubscribe(id) {
+    const subscribers = this.subscribers_;
+    const subscriber = subscribers?.get(id);
+    if (subscriber) {
+      subscriber.dispose();
+      subscribers.delete(id);
+    }
+  }
+
+  /**
+   * Discovers the parent and the root. Runs asynchronously via scheduler.
+   * @private
+   */
+  discover_() {
+    if (!this.isDiscoverable()) {
+      // The discoverability might have changed while this task was in the
+      // queue.
+      return;
+    }
+    const closestNode = ContextNode.closest(this.node, /* includeSelf */ false);
+    const parent = closestNode?.findGroup(this.node) || closestNode;
+    this.updateTree_(parent, /* parentOverridden */ false);
+  }
+
+  /**
+   * @param {?ContextNode} parent
+   * @param {boolean} parentOverridden
+   * @private
+   */
+  updateTree_(parent, parentOverridden) {
+    this.parentOverridden_ = parentOverridden;
+
+    const oldParent = this.parent;
+    if (parent != oldParent) {
+      // The parent has changed.
+      this.parent = parent;
+
+      // Remove from the old parent.
+      if (oldParent?.children) {
+        removeItem(devAssert(oldParent.children), this);
+      }
+
+      // Add to the new parent.
+      if (parent) {
+        const parentChildren = parent.children || (parent.children = []);
+        pushIfNotExist(parentChildren, this);
+
+        // Check if this node has been inserted in between the parent and
+        // it's other children.
+        // Since the new parent (`this`) is already known, this is a very
+        // fast operation.
+        for (const child of parentChildren) {
+          if (child != this && child.isDiscoverable()) {
+            child.discover();
+          }
+        }
+      }
+
+      this.values.parentUpdated();
+    }
+
+    // Check the root.
+    this.updateRoot(parent?.root ?? null);
+  }
+}
+
+/**
+ * Iterates over all context nodes that are contained within the specified
+ * `node`. Only iterates over known context nodes.
+ *
+ * @param {!Node} node
+ * @param {function(!ContextNode)} callback
+ * @param {boolean=} includeSelf
+ */
+function forEachContained(node, callback, includeSelf = true) {
+  const closest = ContextNode.closest(node, includeSelf);
+  if (!closest) {
+    return;
+  }
+  if (closest.node == node) {
+    callback(closest);
+  } else if (closest.children) {
+    for (const child of closest.children) {
+      if (node.contains(child.node)) {
+        callback(child);
+      }
+    }
+  }
+}
+
+/**
+ * @param {!Node} node
+ */
+function discoverContained(node) {
+  forEachContained(node, discoverContextNode);
+}
+
+/**
+ * @param {!ContextNode} cn
+ */
+function discoverContextNode(cn) {
+  cn.discover();
+}
diff --git a/src/context/prop.js b/src/context/prop.js
new file mode 100644
index 0000000000000..ab5aad1a20c98
--- /dev/null
+++ b/src/context/prop.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {devAssert} from '../core/assert';
+
+// typedef imports
+import {ContextPropDef} from './prop.type';
+
+const EMPTY_DEPS = [];
+
+/**
+ * Creates the `ContextPropDef` type.
+ *
+ * @param {string} key
+ * @param {{
+ *   type: (!Object|undefined),
+ *   deps: (!Array<!ContextPropDef<DEP>>|undefined),
+ *   recursive: (boolean|(function(!Array<T>):boolean)|undefined),
+ *   compute: (function(!Node, !Array<T>, ...DEP):(T|undefined)),
+ *   defaultValue: (T|undefined),
+ * }=} opt_spec
+ * @return {!ContextPropDef<T, DEP>}
+ * @template T
+ * @template DEP
+ */
+export function contextProp(key, opt_spec) {
+  const prop = /** @type {!ContextPropDef<T, DEP>} */ ({
+    key,
+    // Default values.
+    type: null,
+    deps: EMPTY_DEPS,
+    recursive: false,
+    compute: null,
+    defaultValue: undefined,
+    // Overrides.
+    ...opt_spec,
+  });
+  devAssert(prop.deps.length == 0 || prop.compute);
+  return prop;
+}
diff --git a/src/context/prop.type.js b/src/context/prop.type.js
new file mode 100644
index 0000000000000..3d7eb3b8a9532
--- /dev/null
+++ b/src/context/prop.type.js
@@ -0,0 +1,87 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * A context property.
+ *
+ * @interface
+ * @template T
+ * @template DEP
+ */
+export function ContextPropDef() {}
+
+/**
+ * A globally unique key. Extensions must use a fully qualified name such
+ * as "amp-extension:key" or "amp-extension:version:key".
+ *
+ * @type {string}
+ */
+ContextPropDef.prototype.key;
+
+/**
+ * An optional type object that can be used for a using system. E.g.
+ * this could be a Preact's Context object.
+ *
+ * @type {?Object}
+ */
+ContextPropDef.prototype.type;
+
+/**
+ * An array of dependencies that are required for the `compute` callback.
+ *
+ * @type {!Array<!ContextPropDef<DEP>>}
+ */
+ContextPropDef.prototype.deps;
+
+/**
+ * Whether the value needs a recursive resolution of the parent value. The
+ * following values are allowed:
+ * - `false`: the parent value is never needed. It's a non-recursive
+ * property, such as `Loaded`.
+ * - `true`: the parent value is always needed. It's a recursive property.
+ * It could be a simple "find first" recursive property. Or it could be a
+ * computable property, such as `score` where all values of the score are
+ * compounded.
+ * - a function: the parent value may or may not be needed. This function
+ * will be called with all of the property inputs. It should return `true`
+ * if the parent value is needed for the provided inputs. For instance,
+ * a recursive property based on AND (e.g. `renderable`), can immediately
+ * determine that the resulting value will be `false` because some inputs
+ * are `false` and thus a more resource-sensitive parent resolution is not
+ * necessary.
+ *
+ * @type {boolean|function(!Array<T>):boolean}
+ */
+ContextPropDef.prototype.recursive;
+
+/**
+ * Computes the property value. This callback is passed the following
+ * arguments:
+ * 1. The DOM Node.
+ * 2. An array of all inputs set on this DOM node for this property.
+ * 3. If it's a recursive property, the parent value.
+ * 4. If `deps` are specified - the dep values.
+ *
+ * @type {function(!Node, !Array<T>, ...DEP):(T|undefined)}
+ */
+ContextPropDef.prototype.compute;
+
+/**
+ * The default value of a recursive property.
+ *
+ * @type {T|undefined}
+ */
+ContextPropDef.prototype.defaultValue;
diff --git a/src/context/scan.js b/src/context/scan.js
new file mode 100644
index 0000000000000..0d5c16bd8163a
--- /dev/null
+++ b/src/context/scan.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * Performs the `closest()` scan through context nodes to find the one that
+ * matches the predicate with an optional argument.
+ *
+ * @param {!./node.ContextNode} startNode
+ * @param {function(!./node.ContextNode, T):boolean} predicate
+ * @param {T=} arg
+ * @param {boolean=} includeSelf
+ * @return {?./node.ContextNode}
+ * @template T
+ */
+export function findParent(
+  startNode,
+  predicate,
+  arg = undefined,
+  includeSelf = true
+) {
+  for (let n = includeSelf ? startNode : startNode.parent; n; n = n.parent) {
+    if (predicate(n, arg)) {
+      return n;
+    }
+  }
+  return null;
+}
+
+/**
+ * Performs the deep scan through context nodes and calls the specified
+ * callback with the optional argument. A node can stop the deep scan into its
+ * subtree by returning a falsy result. Otherwise, the subtree will be scanned
+ * and the result value will be passed to the children callbacks.
+ *
+ * @param {!./node.ContextNode} startNode
+ * @param {function(!./node.ContextNode, T, S):S} callback
+ * @param {T=} arg
+ * @param {S=} state
+ * @param {boolean=} includeSelf
+ * @template T
+ * @template S
+ */
+export function deepScan(
+  startNode,
+  callback,
+  arg = undefined,
+  state = true,
+  includeSelf = true
+) {
+  if (includeSelf) {
+    const newState = callback(startNode, arg, state);
+    if (newState) {
+      deepScan(startNode, callback, arg, newState, false);
+    }
+  } else if (startNode.children) {
+    for (const node of startNode.children) {
+      deepScan(node, callback, arg, state, true);
+    }
+  }
+}
diff --git a/src/context/scheduler.js b/src/context/scheduler.js
new file mode 100644
index 0000000000000..d369d7a35ae89
--- /dev/null
+++ b/src/context/scheduler.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @typedef {function(function())} */
+let SchedulerDef;
+/**
+ * Creates a scheduling function that executes the callback based on the
+ * scheduler, but only one task at a time.
+ *
+ * @param {function()} handler
+ * @param {?SchedulerDef} defaultScheduler
+ * @return {function(!SchedulerDef=)}
+ */
+export function throttleTail(handler, defaultScheduler = null) {
+  let scheduled = false;
+  const handleAndUnschedule = () => {
+    scheduled = false;
+    handler();
+  };
+  /** @param {!SchedulerDef=} opt_scheduler */
+  const scheduleIfNotScheduled = (opt_scheduler) => {
+    if (!scheduled) {
+      scheduled = true;
+      const scheduler = opt_scheduler || defaultScheduler;
+      scheduler(handleAndUnschedule);
+    }
+  };
+  return scheduleIfNotScheduled;
+}
diff --git a/src/context/shame.extern.js b/src/context/shame.extern.js
new file mode 100644
index 0000000000000..3dd2326f3e662
--- /dev/null
+++ b/src/context/shame.extern.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview The junk-drawer of externs that haven't yet been sorted well.
+ * Shame! Shame! Shame! Avoid adding to this.
+ *
+ * It's okay for some things to start off here, since moving them doesn't
+ * require any other file changes (unlike real code, which requires updating)
+ * imports throughout the repo).
+ *
+ * @externs
+ */
+
+// This definition is exported by src/mode.js, but currently has dependencies on
+// non-core modules that aren't yet type-checked.
+//
+// Planned destination: this should be removed when mode flags are make
+// core-accessible
+/** @type {function(!Window=):{localDev: boolean, test: boolean}} */
+let getMode$$module$src$mode;
diff --git a/src/context/subscriber.js b/src/context/subscriber.js
new file mode 100644
index 0000000000000..fa8f4065ba817
--- /dev/null
+++ b/src/context/subscriber.js
@@ -0,0 +1,234 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {ContextNode} from './node';
+import {arrayOrSingleItemToArray} from '../core/types/array';
+import {throttleTail} from './scheduler';
+import {tryCallback} from '../core/error';
+
+// typedef imports
+import {ContextPropDef} from './prop.type';
+
+const EMPTY_ARRAY = [];
+const EMPTY_FUNC = () => {};
+
+/**
+ * Subscribes to the specified dependencies. The key API points:
+ * - The subscriber is only called when all its dependencies are satisfied.
+ * - If all its dependencies are satisfied at the time the subscriber is added,
+ *   it's called right away.
+ * - The subscriber is called whenever any of its dependencies change.
+ * - A subscriber can optionally return a cleanup function.
+ *
+ * @param {!Node} node
+ * @param {!ContextPropDef<DEP>|!Array<!ContextPropDef<DEP>>} deps
+ * @param {function(...DEP)} callback
+ * @template DEP
+ */
+export function subscribe(node, deps, callback) {
+  deps = arrayOrSingleItemToArray(deps);
+  const id = callback;
+  const contextNode = ContextNode.get(node);
+  contextNode.subscribe(id, Subscriber, callback, deps);
+}
+
+/**
+ * Removes the subscriber prevoiously registered with `subscribe` API.
+ *
+ * @param {!Node} node
+ * @param {function(...DEP)} callback
+ * @template DEP
+ */
+export function unsubscribe(node, callback) {
+  const id = callback;
+  const contextNode = ContextNode.get(node);
+  contextNode.unsubscribe(id);
+}
+
+/**
+ * The subscriber holder. It encapsulates the subscriber's dependencies,
+ * internal state, and cleanup functions.
+ *
+ * @package
+ * @template DEP
+ */
+export class Subscriber {
+  /**
+   * @param {!ContextNode} contextNode
+   * @param {function(...DEP)} func
+   * @param {!Array<!ContextPropDef<DEP>>} deps
+   */
+  constructor(contextNode, func, deps) {
+    /** @package @const {!ContextNode} */
+    this.contextNode = contextNode;
+
+    /** @private @const {function(DEP)} */
+    this.func_ = func;
+
+    /** @private @const {!Array<!ContextPropDef<DEP>>} */
+    this.deps_ = deps;
+
+    /**
+     * @private @const {!Array<DEP|undefined>}
+     *
+     * Start with a pre-allocated array filled with `undefined`. The filling
+     * is important to ensure the correct `Array.every` execution.
+     */
+    this.depValues_ = deps.length > 0 ? deps.map(EMPTY_FUNC) : EMPTY_ARRAY;
+
+    /** @private @const {!Array<function(DEP)>} */
+    this.depSubscribers_ =
+      deps.length > 0
+        ? deps.map((unusedDep, index) => (value) => {
+            this.depValues_[index] = value;
+            this.update_();
+          })
+        : EMPTY_ARRAY;
+
+    /** @private {boolean} */
+    this.running_ = false;
+
+    /** @private {?function()} */
+    this.runCleanup_ = null;
+
+    // Schedulers.
+    /** @private @const {function()} */
+    this.update_ = throttleTail(this.update_.bind(this), setTimeout);
+
+    // Subscribe to all dependencies.
+    if (deps.length > 0) {
+      const {values} = this.contextNode;
+      deps.forEach((dep, index) =>
+        values.subscribe(dep, this.depSubscribers_[index])
+      );
+    }
+
+    // Run the first time.
+    if (this.isConnected_()) {
+      this.update_();
+    }
+  }
+
+  /**
+   * Called when the subscriber is completely discarded, for instance via
+   * `ubsubscribe` API.
+   */
+  dispose() {
+    // Unsubscribe from all dependencies.
+    if (this.deps_.length > 0) {
+      const {values} = this.contextNode;
+      this.deps_.forEach((dep, index) =>
+        values.unsubscribe(dep, this.depSubscribers_[index])
+      );
+    }
+
+    this.cleanup_();
+  }
+
+  /**
+   * Called when the node's root has changed. It can be a different root or
+   * the node can be disconnected entirely.
+   */
+  rootUpdated() {
+    const isConnected = this.isConnected_();
+    this.cleanup_();
+    if (isConnected) {
+      this.update_();
+    }
+  }
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  isConnected_() {
+    return !!this.contextNode.root;
+  }
+
+  /** @private */
+  update_() {
+    if (!this.isConnected_()) {
+      // The node was disconnected at some point.
+      return;
+    }
+    const running = this.depValues_.every(isDefined);
+    if (running) {
+      this.running_ = true;
+      this.run_();
+    } else if (this.running_) {
+      this.running_ = false;
+      this.cleanup_();
+    }
+  }
+
+  /** @private */
+  run_() {
+    // Cleanup the previous run.
+    if (this.runCleanup_) {
+      tryCallback(this.runCleanup_);
+      this.runCleanup_ = null;
+    }
+
+    // Run the subscriber.
+    const func = this.func_;
+    this.runCleanup_ = callHandler(func, this.depValues_);
+  }
+
+  /** @private */
+  cleanup_() {
+    // The last run's cleanup.
+    if (this.runCleanup_) {
+      tryCallback(this.runCleanup_);
+      this.runCleanup_ = null;
+    }
+  }
+}
+
+/**
+ * Whether the value is defined.
+ *
+ * This function only exists to avoid function allocation when calling
+ * `Array.every()` and `Array.some()`.
+ *
+ * @param {*} v
+ * @return {boolean}
+ */
+function isDefined(v) {
+  return v !== undefined;
+}
+
+/**
+ * Creates a subscriber.
+ *
+ * @param {function(...DEP)} callback
+ * @param {!Array<DEP>} deps
+ * @return {?function()}
+ * @template DEP
+ */
+function callHandler(callback, deps) {
+  switch (deps.length) {
+    case 0:
+      return callback();
+    case 1:
+      return callback(deps[0]);
+    case 2:
+      return callback(deps[0], deps[1]);
+    case 3:
+      return callback(deps[0], deps[1], deps[2]);
+    default:
+      return callback.apply(null, deps);
+  }
+}
diff --git a/src/context/values.js b/src/context/values.js
new file mode 100644
index 0000000000000..3919e87cda7ee
--- /dev/null
+++ b/src/context/values.js
@@ -0,0 +1,795 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {deepScan, findParent} from './scan';
+import {devAssert} from '../core/assert';
+import {pushIfNotExist, removeItem} from '../core/types/array';
+import {rethrowAsync} from '../core/error';
+import {throttleTail} from './scheduler';
+
+// typedef imports
+import {ContextPropDef} from './prop.type';
+
+const EMPTY_ARRAY = [];
+const EMPTY_FUNC = () => {};
+
+/** @enum {number} */
+const Pending = {
+  NOT_PENDING: 0,
+  PENDING: 1,
+  PENDING_REFRESH_PARENT: 2,
+};
+
+/**
+ * The structure for a property's inputs. It's important that `values` are
+ * easily available as an array to pass them to the `recursive` and
+ * `compute` callbacks without reallocation.
+ *
+ * @interface
+ * @template T
+ */
+function InputDef() {}
+/** @type {!Array<T>} */
+InputDef.prototype.values;
+/** @type {!Array<function(T)>} */
+InputDef.prototype.setters;
+
+/**
+ * The structure for a property's computed values and subscribers.
+ * @interface
+ * @template T
+ * @template DEP
+ */
+function UsedDef() {}
+/** @type {!ContextPropDef<T, DEP>} */
+UsedDef.prototype.prop;
+/** @type {!Array<function(!T)>} */
+UsedDef.prototype.subscribers;
+/** @type {T} */
+UsedDef.prototype.value;
+/** @type {!Pending} */
+UsedDef.prototype.pending;
+/** @type {number} */
+UsedDef.prototype.counter;
+/** @type {!Array<DEP>} */
+UsedDef.prototype.depValues;
+/** @type {!T} */
+UsedDef.prototype.parentValue;
+/** @type {?./node.ContextNode} */
+UsedDef.prototype.parentContextNode;
+/** @type {function(boolean)} */
+UsedDef.prototype.ping;
+/** @type {!Array<function(DEP)>} */
+UsedDef.prototype.pingDep;
+/** @type {?function(T)} */
+UsedDef.prototype.pingParent;
+
+/**
+ * Propagates context property values in the context tree. The key APIs are
+ * `set()` and `subscribe()`. See `ContextPropDef` type for details on how
+ * values are declared and propagated.
+ */
+export class Values {
+  /**
+   * @param {!./node.ContextNode} contextNode
+   */
+  constructor(contextNode) {
+    /** @private @const {!./node.ContextNode} */
+    this.contextNode_ = contextNode;
+
+    /** @private {?Map<string, !InputDef>} */
+    this.inputsByKey_ = null;
+
+    /** @private {?Map<string, !UsedDef>} */
+    this.usedByKey_ = null;
+
+    // Schedulers.
+    /** @private @const {function()} */
+    this.checkUpdates_ = throttleTail(
+      this.checkUpdates_.bind(this),
+      setTimeout
+    );
+  }
+
+  /**
+   * Sets the property's input value. This is analagous to a CSS specified
+   * value. Several values for the same property can be set on a node - one
+   * per each setter. A repeated call for the same setter overwrites a
+   * previously set input. This is similar to how the same CSS property can be
+   * set in a stylesheet using different classes. The property computation
+   * decides how to treat several values. For instance:
+   * - A property can pick the first set input value (e.g. `font-size`).
+   * - A property can pick the min/max set input value (e.g. `priority`).
+   * - A property can reduce all values using `AND` (e.g. `renderable`).
+   *
+   * Once the input is set, the recalculation is rescheduled asynchronously.
+   * All dependent properties are also recalculated.
+   *
+   * @param {!ContextPropDef<T>} prop
+   * @param {function(T)} setter
+   * @param {T} value
+   * @template T
+   */
+  set(prop, setter, value) {
+    devAssert(setter);
+    devAssert(value !== undefined);
+
+    const {key} = prop;
+
+    const inputsByKey = this.inputsByKey_ || (this.inputsByKey_ = new Map());
+    let inputs = inputsByKey.get(key);
+    if (!inputs) {
+      inputs = {
+        values: [],
+        setters: [],
+      };
+      inputsByKey.set(key, inputs);
+    }
+    const index = inputs.setters.indexOf(setter);
+    const changed = index == -1 || inputs.values[index] !== value;
+    if (index == -1) {
+      inputs.setters.push(setter);
+      inputs.values.push(value);
+    } else if (changed) {
+      inputs.values[index] = value;
+    }
+
+    if (changed) {
+      // An input has been added to a node for a first time. This might
+      // affect all values in this and child nodes. The simplest algorithm
+      // here is to deep scan all descendants and refresh them.
+      // Optimization opportunity: in simple but common manipulations the
+      // deepscan can be avoided.
+      this.ping(prop, false);
+      if (isRecursive(prop)) {
+        deepScan(
+          this.contextNode_,
+          scan,
+          prop,
+          /*state=*/ true,
+          /*includeSelf=*/ false
+        );
+      }
+    }
+  }
+
+  /**
+   * Unsets the input value for the specified property and setter.
+   * See `set()` for more info.
+   * @param {!ContextPropDef<T>} prop
+   * @param {function(T)} setter
+   * @template T
+   */
+  remove(prop, setter) {
+    devAssert(setter);
+
+    const {key} = prop;
+    const inputsByKey = this.inputsByKey_;
+    const inputs = inputsByKey?.get(key);
+    if (inputs) {
+      const index = inputs.setters.indexOf(setter);
+      if (index != -1) {
+        inputs.setters.splice(index, 1);
+        inputs.values.splice(index, 1);
+        if (inputs.setters.length == 0) {
+          inputsByKey.delete(key);
+        }
+        deepScan(this.contextNode_, scan, prop);
+      }
+    }
+  }
+
+  /**
+   * Whether this node has inputs for the specified property.
+   *
+   * @param {!ContextPropDef} prop
+   * @return {boolean}
+   */
+  has(prop) {
+    return !!this.inputsByKey_?.has(prop.key);
+  }
+
+  /**
+   * Adds a subscriber for the specified property. If the property has not
+   * yet been tracked, the tracking is started. If the used value is
+   * already available, the handler is called immediately. The handler is
+   * only called if a valid used value is available and only if this value
+   * has changed since the last handler call.
+   *
+   * @param {!ContextPropDef<T>} prop
+   * @param {function(T)} handler
+   * @template T
+   */
+  subscribe(prop, handler) {
+    const used = this.startUsed_(prop);
+
+    if (!pushIfNotExist(used.subscribers, handler)) {
+      // Already a subscriber.
+      return;
+    }
+
+    // The handler is notified right away if the value is available.
+    const existingValue = used.value;
+    if (isDefined(existingValue) && this.isConnected_()) {
+      handler(existingValue);
+    }
+  }
+
+  /**
+   * Unsubscribes a previously added handler. If there are no other subscribers
+   * the property tracking is stopped and the used value is removed.
+   *
+   * @param {!ContextPropDef<T>} prop
+   * @param {function(T)} handler
+   * @template T
+   */
+  unsubscribe(prop, handler) {
+    const used = this.usedByKey_?.get(prop.key);
+    if (!used || !removeItem(used.subscribers, handler)) {
+      // Not a subscriber.
+      return;
+    }
+
+    // If no other subscribers, stop tracking the used value.
+    this.stopUsed_(used);
+  }
+
+  /**
+   * Schedules a recalculation of the specified property, but only if this
+   * property is tracked by this node.
+   *
+   * @param {!ContextPropDef} prop
+   * @param {boolean} refreshParent Whether the parent node needs to be looked
+   * up again.
+   * @protected
+   */
+  ping(prop, refreshParent) {
+    this.usedByKey_?.get(prop.key)?.ping(refreshParent);
+  }
+
+  /**
+   * The callback called by the `ContextNode` to notify values of the context
+   * tree changes. This callback schedules recalculations if necessary.
+   *
+   * @package
+   */
+  parentUpdated() {
+    if (this.isConnected_()) {
+      // Optimization opportunity: in simpler cases, we may only need to refresh
+      // a few specific props or even only specific nodes. E.g. when a single
+      // intermediary parent is inserted between a parent and a child, the amount
+      // of refreshes only depends on the inputs already set on this parent.
+      deepScan(
+        this.contextNode_,
+        scanAll,
+        /*arg=*/ undefined,
+        /*state=*/ EMPTY_ARRAY
+      );
+    }
+  }
+
+  /**
+   * The callback called by the `ContextNode` to notify values of the context
+   * root changes. It's possible that a context node is connected, disconnected,
+   * or moved to another root. This callback schedules recalculations if
+   * necessary.
+   *
+   * @package
+   */
+  rootUpdated() {
+    const usedByKey = this.usedByKey_;
+    if (!usedByKey) {
+      return;
+    }
+    if (this.isConnected_()) {
+      // Ping all properties for recalculation when the tree is connected.
+      usedByKey.forEach((used) => {
+        const {prop} = used;
+        this.ping(prop, true);
+      });
+    } else {
+      // On disconnect, only do minimal possible work: disconnect recursive
+      // subscribers to ensure that they are not leaked.
+      usedByKey.forEach((used) => {
+        const {prop} = used;
+        if (isRecursive(prop)) {
+          this.updateParentContextNode_(used, null);
+        }
+      });
+    }
+  }
+
+  /**
+   * Used for `deepScan` scanner to notify the subtree that the specified
+   * property has changed and needs to be recalculated.
+   *
+   * Scans are relatively common and this method exists (as opposed to be
+   * inlined) only to avoid frequent function allocation.
+   *
+   * @param {!ContextPropDef} prop
+   * @return {boolean}
+   * @protected Necessary for cross-binary access.
+   */
+  scan(prop) {
+    this.ping(prop, true);
+    if (!isRecursive(prop)) {
+      // Stop the deepscan. The prop doesn't propagate.
+      return false;
+    }
+    if (this.has(prop)) {
+      // Stop the deepscan. The node will propagate changes downstream.
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Used for `deepScan` scanner to notify the subtree to recalculate all
+   * properties.
+   *
+   * Scans are relatively common and this method exists (as opposed to be
+   * inlined) only to avoid frequent function allocation.
+   *
+   * @param {!Array<string>} scheduled The already scheduled props.
+   * @return {!Array<string>} The new scheduled props.
+   * @protected
+   */
+  scanAll(scheduled) {
+    let newScheduled = null;
+    const usedByKey = this.usedByKey_;
+    if (usedByKey) {
+      usedByKey.forEach((used) => {
+        const {prop} = used;
+        const {key} = prop;
+        // Only ping unhandled props.
+        if ((newScheduled || scheduled).indexOf(key) == -1) {
+          this.ping(prop, true);
+
+          if (this.contextNode_.children && this.has(prop)) {
+            if (!newScheduled) {
+              newScheduled = scheduled.slice(0);
+            }
+            // Stop the deepscan for this value. It will be propagated
+            // by the responsible node.
+            newScheduled.push(key);
+          }
+        }
+      });
+    }
+    return newScheduled || scheduled;
+  }
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  isConnected_() {
+    return !!this.contextNode_.root;
+  }
+
+  /**
+   * Start the used value tracker if it hasn't started yet.
+   *
+   * @param {!ContextPropDef<T, DEF>} prop
+   * @return {!UsedDef<T, DEF>}
+   * @private
+   * @template T
+   * @template DEF
+   */
+  startUsed_(prop) {
+    const {deps, key} = prop;
+    const usedByKey = this.usedByKey_ || (this.usedByKey_ = new Map());
+    let used = usedByKey.get(key);
+    if (!used) {
+      used = {
+        prop,
+        subscribers: [],
+        value: undefined,
+        pending: Pending.NOT_PENDING,
+        counter: 0,
+        depValues: deps.length > 0 ? deps.map(EMPTY_FUNC) : EMPTY_ARRAY,
+        parentValue: undefined,
+        parentContextNode: null,
+        // Schedule the value recalculation, optionally with the parent
+        // refresh.
+        ping: (refreshParent) => {
+          if (this.isConnected_()) {
+            const pending = refreshParent
+              ? Pending.PENDING_REFRESH_PARENT
+              : Pending.PENDING;
+            used.pending = Math.max(used.pending, pending);
+            this.checkUpdates_();
+          }
+        },
+        // Schedule the value recalculation due to the dependency change.
+        pingDep:
+          deps.length > 0
+            ? deps.map((dep, index) => (value) => {
+                used.depValues[index] = value;
+                used.ping();
+              })
+            : EMPTY_ARRAY,
+        // Schedule the value recalculation due to the parent value change.
+        pingParent: isRecursive(prop)
+          ? (parentValue) => {
+              used.parentValue = parentValue;
+              used.ping();
+            }
+          : null,
+      };
+      usedByKey.set(key, used);
+
+      // Subscribe to all deps.
+      deps.forEach((dep, index) => this.subscribe(dep, used.pingDep[index]));
+
+      // Schedule the first refresh.
+      used.ping(false);
+    }
+    return used;
+  }
+
+  /**
+   * Stop calculating the used value if there are no more subscribers left.
+   *
+   * @param {!UsedDef} used
+   * @private
+   */
+  stopUsed_(used) {
+    if (used.subscribers.length > 0) {
+      return;
+    }
+
+    const {pingDep, prop} = used;
+    const {deps, key} = prop;
+
+    this.usedByKey_.delete(key);
+
+    // Unsubscribe itself.
+    this.updateParentContextNode_(used, null);
+    if (deps.length > 0) {
+      deps.forEach((dep, index) => {
+        this.unsubscribe(dep, pingDep[index]);
+      });
+    }
+  }
+
+  /**
+   * Check if any properties awaiting recalculation. This method is always
+   * scheduled asynchronously and throttled.
+   *
+   * @private
+   */
+  checkUpdates_() {
+    if (!this.isConnected_()) {
+      // The node got disconnected between scheduling and handling.
+      return;
+    }
+
+    const usedByKey = this.usedByKey_;
+    if (!usedByKey) {
+      return;
+    }
+
+    usedByKey.forEach((used) => {
+      used.counter = 0;
+    });
+
+    // Recompute all "pinged" values for this node. It checks if dependencies
+    // are satisfied and recomputes values accordingly.
+    let updated;
+    do {
+      updated = 0;
+      usedByKey.forEach((used) => {
+        if (used.pending != Pending.NOT_PENDING) {
+          const {key} = used.prop;
+          used.counter++;
+          if (used.counter > 5) {
+            // A simple protection from infinte loops.
+            rethrowAsync(`cyclical prop: ${key}`);
+            used.pending = Pending.NOT_PENDING;
+            return;
+          }
+          updated++;
+          this.tryUpdate_(used);
+        }
+      });
+    } while (updated > 0);
+  }
+
+  /**
+   * @param {!UsedDef} used
+   * @private
+   */
+  tryUpdate_(used) {
+    // The value is not pending anymore. If any of the dependencies will remain
+    // unresolved, we will simply need to recomputed it.
+    const refreshParent = used.pending == Pending.PENDING_REFRESH_PARENT;
+
+    let newValue;
+    try {
+      newValue = this.calc_(used, refreshParent);
+    } catch (e) {
+      // This is the narrowest catch to avoid unrelated values breaking each
+      // other. The only exposure to the user-code are `recursive` and
+      // `compute` methods in the `ContextPropDef`.
+      rethrowAsync(e);
+    }
+
+    // Reset pending flag. It's good to reset it after the calculation to
+    // ensure that deps are automatically covered.
+    used.pending = Pending.NOT_PENDING;
+
+    // Check if the value has been updated.
+    this.maybeUpdated_(used, newValue);
+  }
+
+  /**
+   * @param {!UsedDef<T>} used
+   * @param {T} value
+   * @private
+   * @template T
+   */
+  maybeUpdated_(used, value) {
+    const {prop, value: oldValue} = used;
+    const {key} = prop;
+    const usedByKey = this.usedByKey_;
+    if (
+      oldValue === value ||
+      used !== usedByKey?.get(key) ||
+      !this.isConnected_()
+    ) {
+      // Either the value didn't change, or no one needs this value anymore.
+      return;
+    }
+
+    used.value = value;
+
+    // Notify subscribers.
+    const {subscribers} = used;
+    for (const handler of subscribers) {
+      handler(value);
+    }
+  }
+
+  /**
+   * The used value calculation algorithm.
+   *
+   * @param {!UsedDef<T>} used
+   * @param {boolean} refreshParent
+   * @return {T|undefined} The used value.
+   * @private
+   * @template T
+   */
+  calc_(used, refreshParent) {
+    devAssert(this.isConnected_());
+
+    const {depValues, prop} = used;
+    const {compute, defaultValue, key} = prop;
+
+    const inputValues = this.inputsByKey_?.get(key)?.values;
+
+    // Calculate parent value.
+    const recursive = calcRecursive(prop, inputValues);
+
+    // Refresh parent if requested.
+    if (refreshParent || recursive != Boolean(used.parentContextNode)) {
+      const newParentContextNode = recursive
+        ? findParent(this.contextNode_, hasInput, prop, /* includeSelf */ false)
+        : null;
+      this.updateParentContextNode_(used, newParentContextNode);
+    }
+
+    // If no parent node is found, use the default value.
+    const parentValue = isDefined(used.parentValue)
+      ? used.parentValue
+      : recursive && !used.parentContextNode
+      ? defaultValue
+      : undefined;
+
+    // Calculate the "used" value.
+    let newValue = undefined;
+    const ready =
+      depValues.every(isDefined) && (!recursive || isDefined(parentValue));
+    if (ready) {
+      const {node} = this.contextNode_;
+      if (inputValues && !compute) {
+        newValue = inputValues[0];
+      } else if (isRecursive(prop)) {
+        if (inputValues || depValues.length > 0) {
+          // The node specifies its own input values and they need to be
+          // recomputed with parent and dep values.
+          newValue = callRecursiveCompute(
+            compute,
+            node,
+            inputValues || EMPTY_ARRAY,
+            parentValue,
+            depValues
+          );
+        } else if (isDefined(parentValue)) {
+          // The node doesn't specify its own value, but parent is available.
+          // Since parent is available, it means that the node is recursive.
+          newValue = parentValue;
+        }
+      } else if (compute) {
+        newValue = callCompute(
+          compute,
+          node,
+          inputValues || EMPTY_ARRAY,
+          depValues
+        );
+      }
+    }
+
+    return newValue;
+  }
+
+  /**
+   * Update the node from which the parent value is used.
+   *
+   * @param {!UsedDef} used
+   * @param {?./node.ContextNode} newParentContextNode
+   * @private
+   */
+  updateParentContextNode_(used, newParentContextNode) {
+    const {parentContextNode: oldParentContextNode, pingParent, prop} = used;
+    if (newParentContextNode != oldParentContextNode) {
+      used.parentContextNode = newParentContextNode;
+      used.parentValue = undefined;
+
+      if (oldParentContextNode) {
+        oldParentContextNode.values.unsubscribe(prop, devAssert(pingParent));
+      }
+
+      if (newParentContextNode) {
+        newParentContextNode.values.subscribe(prop, devAssert(pingParent));
+      }
+    }
+  }
+}
+
+/**
+ * See `Values.scan()` method.
+ *
+ * @param {!./node.ContextNode} contextNode
+ * @param {!ContextPropDef} prop
+ * @return {boolean}
+ */
+function scan(contextNode, prop) {
+  return contextNode.values.scan(prop);
+}
+
+/**
+ * See `Values.scanAll()` method.
+ *
+ * @param {!./node.ContextNode} contextNode
+ * @param {?} unusedArg
+ * @param {!Array<string>} state
+ * @return {!Array<string>}
+ */
+function scanAll(contextNode, unusedArg, state) {
+  return contextNode.values.scanAll(state);
+}
+
+/**
+ * See `Values.has()` method.
+ *
+ * @param {!./node.ContextNode} contextNode
+ * @param {!ContextPropDef} prop
+ * @return {boolean}
+ */
+function hasInput(contextNode, prop) {
+  return contextNode.values.has(prop);
+}
+
+/**
+ * Whether the property is recursive.
+ *
+ * @param {!ContextPropDef} prop
+ * @return {boolean}
+ */
+function isRecursive(prop) {
+  // Only `false` values make a value non-recursive. `true` and
+  // `function` values are considered recursive.
+  return !!prop.recursive;
+}
+
+/**
+ * Whether the parent value is required to calculate the used value.
+ *
+ * @param {!ContextPropDef<T>} prop
+ * @param {?Array<T>} inputs
+ * @return {boolean}
+ * @template T
+ */
+function calcRecursive(prop, inputs) {
+  const {compute, recursive} = prop;
+  if (typeof recursive == 'function') {
+    return inputs ? recursive(inputs) : true;
+  }
+  if (recursive && inputs && !compute) {
+    // The default `compute` function is to pick the input value when available
+    // and to fallback to the parent. Thus, when inputs are specified,
+    // there's no longer a need for the parent.
+    return false;
+  }
+  return recursive;
+}
+
+/**
+ * A substitute for `compute(...deps)`, but faster.
+ *
+ * @param {function(!Node, !Array<T>, ...DEP):T} compute See `ContextPropDef.compute()`.
+ * @param {!Node} node
+ * @param {!Array<T>} inputValues
+ * @param {!Array<DEP>} deps
+ * @return {T}
+ * @template T
+ * @template DEP
+ */
+function callCompute(compute, node, inputValues, deps) {
+  switch (deps.length) {
+    case 0:
+      return compute(node, inputValues);
+    case 1:
+      return compute(node, inputValues, deps[0]);
+    case 2:
+      return compute(node, inputValues, deps[0], deps[1]);
+    case 3:
+      return compute(node, inputValues, deps[0], deps[1], deps[2]);
+    default:
+      return compute.apply(null, [node, inputValues].concat(deps));
+  }
+}
+
+/**
+ * A substitute for `compute(parentValue, ...deps)`, but faster.
+ *
+ * @param {function(!Node, !Array<T>, ...DEP):T} compute See `ContextPropDef.compute()`.
+ * @param {!Node} node
+ * @param {!Array<T>} inputValues
+ * @param {T} parentValue
+ * @param {!Array<DEP>} deps
+ * @return {T}
+ * @template T
+ * @template DEP
+ */
+function callRecursiveCompute(compute, node, inputValues, parentValue, deps) {
+  switch (deps.length) {
+    case 0:
+      return compute(node, inputValues, parentValue);
+    case 1:
+      return compute(node, inputValues, parentValue, deps[0]);
+    case 2:
+      return compute(node, inputValues, parentValue, deps[0], deps[1]);
+    case 3:
+      return compute(node, inputValues, parentValue, deps[0], deps[1], deps[2]);
+    default:
+      return compute.apply(null, [node, inputValues, parentValue].concat(deps));
+  }
+}
+
+/**
+ * Whether the value is defined.
+ *
+ * This function only exists to avoid function allocation when calling
+ * `Array.every()` and `Array.some()`.
+ *
+ * @param {*} v
+ * @return {boolean}
+ */
+function isDefined(v) {
+  return v !== undefined;
+}
diff --git a/src/cookies.js b/src/cookies.js
index 6746485c6ee5a..b3a968a689368 100644
--- a/src/cookies.js
+++ b/src/cookies.js
@@ -14,13 +14,9 @@
  * limitations under the License.
  */
 
-import {endsWith} from './string';
-import {
-  getSourceOrigin,
-  isProxyOrigin,
-  parseUrlDeprecated,
-  tryDecodeUriComponent,
-} from './url';
+import {endsWith} from './core/types/string';
+import {getSourceOrigin, isProxyOrigin, parseUrlDeprecated} from './url';
+import {tryDecodeUriComponent} from './core/types/string/url';
 import {urls} from './config';
 import {userAssert} from './log';
 
@@ -68,7 +64,6 @@ export function getCookie(win, name) {
  * This method should not be inlined to prevent TryCatch deoptimization.
  * @param {!Window} win
  * @return {string}
- * @noinline
  */
 function tryGetDocumentCookie_(win) {
   try {
diff --git a/src/core/3p-frame.js b/src/core/3p-frame.js
new file mode 100644
index 0000000000000..ad64abea6be1f
--- /dev/null
+++ b/src/core/3p-frame.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * Required flags to apply to the sandbox iframe.
+ * @return {Array<string>}
+ */
+export const getRequiredSandboxFlags = () => [
+  // This only allows navigation when user interacts and thus prevents
+  // ads from auto navigating the user.
+  'allow-top-navigation-by-user-activation',
+  // Crucial because otherwise even target=_blank opened links are
+  // still sandboxed which they may not expect.
+  'allow-popups-to-escape-sandbox',
+];
+
+/**
+ * These flags are not feature detected. Put stuff here where either
+ * they have always been supported or support is not crucial.
+ * @return {Array<string>}
+ */
+export const getOptionalSandboxFlags = () => [
+  'allow-forms',
+  // We should consider turning this off! But since the top navigation
+  // issue is the big one, we'll leave this allowed for now.
+  'allow-modals',
+  // Give access to raw mouse movements.
+  'allow-pointer-lock',
+  // This remains subject to popup blocking, it just makes it supported
+  // at all.
+  'allow-popups',
+  // This applies inside the iframe and is crucial to not break the web.
+  'allow-same-origin',
+  'allow-scripts',
+  // Not allowed
+  // - allow-top-navigation
+  // - allow-orientation-lock
+  // - allow-pointer-lock
+  // - allow-presentation
+];
diff --git a/src/core/OWNERS b/src/core/OWNERS
new file mode 100644
index 0000000000000..5d04df0630d26
--- /dev/null
+++ b/src/core/OWNERS
@@ -0,0 +1,14 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {name: 'dvoytenko'},
+        {name: 'jridgewell', notify: true},
+        {name: 'ampproject/wg-performance'},
+      ],
+    },
+  ],
+}
diff --git a/src/core/assert/base.js b/src/core/assert/base.js
new file mode 100644
index 0000000000000..5017ecd7dcb83
--- /dev/null
+++ b/src/core/assert/base.js
@@ -0,0 +1,279 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {elementStringOrPassThru} from '../error/message-helpers';
+import {includes} from '../types/string';
+import {isArray, isElement, isEnumValue, isString} from '../types';
+import {remove} from '../types/array';
+
+/**
+ * @fileoverview This file provides the base implementation for assertion
+ * functions. Most files should never import from this; instead, import from
+ * `dev` or `user`. It is also used by the Log class for its assertions.
+ */
+
+/**
+ * A base assertion function, provided to various assertion helpers.
+ * @typedef {function(?, string=, ...*):?|function(?, !Array<*>)}
+ */
+export let AssertionFunctionDef;
+
+/**
+ * Throws an error if the second argument isn't trueish.
+ *
+ * Supports argument substitution into the message via %s placeholders.
+ *
+ * Throws an error object that has two extra properties:
+ * - messageArray: The elements of the substituted message as non-stringified
+ *   elements in an array. When e.g. passed to console.error this yields
+ *   native displays of things like HTML elements.
+ * @param {?string} sentinel
+ * @param {T} shouldBeTruthy
+ * @param {string} opt_message
+ * @param {...*} var_args Arguments substituted into %s in the message
+ * @return {T}
+ * @template T
+ * @throws {Error} when shouldBeTruthy is not truthy.
+ */
+export function assert(
+  sentinel,
+  shouldBeTruthy,
+  opt_message = 'Assertion failed',
+  var_args
+) {
+  if (shouldBeTruthy) {
+    return shouldBeTruthy;
+  }
+
+  // Include the sentinel string if provided and not already present
+  if (sentinel && !includes(opt_message, sentinel)) {
+    opt_message += sentinel;
+  }
+
+  // Skip the first 3 arguments to isolate format params
+  // const messageArgs = Array.prototype.slice.call(arguments, 3);
+  // Index at which message args start
+  let i = 3;
+
+  // Substitute provided values into format string in message
+  const splitMessage = opt_message.split('%s');
+  let message = splitMessage.shift();
+  const messageArray = [message];
+
+  while (splitMessage.length) {
+    const subValue = arguments[i++];
+    const nextConstant = splitMessage.shift();
+
+    message += elementStringOrPassThru(subValue) + nextConstant;
+    messageArray.push(subValue, nextConstant.trim());
+  }
+
+  const error = new Error(message);
+  error.messageArray = remove(messageArray, (x) => x !== '');
+  // __AMP_REPORT_ERROR is installed globally per window in the entry point in
+  // AMP documents. It may not be present for Bento/Preact elements on non-AMP
+  // pages.
+  if (self.__AMP_REPORT_ERROR) {
+    self.__AMP_REPORT_ERROR(error);
+  }
+  throw error;
+}
+
+/**
+ * Asserts types, backbone of `assertNumber`, `assertString`, etc.
+ *
+ * It understands array-based "id"-contracted messages.
+ *
+ * Otherwise creates a sprintf syntax string containing the optional message or the
+ * default. The `subject` of the assertion is added at the end.
+ *
+ * @param {!AssertionFunctionDef} assertFn underlying assertion function to call
+ * @param {T} subject
+ * @param {*} shouldBeTruthy
+ * @param {string} defaultMessage
+ * @param {!Array<*>|string=} opt_message
+ * @return {T}
+ * @template T
+ * @private
+ */
+function assertType_(
+  assertFn,
+  subject,
+  shouldBeTruthy,
+  defaultMessage,
+  opt_message
+) {
+  if (isArray(opt_message)) {
+    assertFn(
+      shouldBeTruthy,
+      /** @type {!Array} */ (opt_message).concat([subject])
+    );
+  } else {
+    assertFn(shouldBeTruthy, `${opt_message || defaultMessage}: %s`, subject);
+  }
+
+  return subject;
+}
+
+/**
+ * Throws an error if the first argument isn't an Element.
+ *
+ * For more details see `assert`.
+ *
+ * @param {!AssertionFunctionDef} assertFn underlying assertion function to call
+ * @param {*} shouldBeElement
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {!Element} The value of shouldBeTrueish.
+ * @throws {Error} when shouldBeElement is not an Element
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function assertElement(assertFn, shouldBeElement, opt_message) {
+  return /** @type {!Element} */ (
+    assertType_(
+      assertFn,
+      shouldBeElement,
+      isElement(shouldBeElement),
+      'Element expected',
+      opt_message
+    )
+  );
+}
+
+/**
+ * Throws an error if the first argument isn't a string. The string can
+ * be empty.
+ *
+ * For more details see `assert`.
+ *
+ * @param {!AssertionFunctionDef} assertFn underlying assertion function to call
+ * @param {*} shouldBeString
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {string} The string value. Can be an empty string.
+ * @throws {Error} when shouldBeString is not an String
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function assertString(assertFn, shouldBeString, opt_message) {
+  return /** @type {string} */ (
+    assertType_(
+      assertFn,
+      shouldBeString,
+      isString(shouldBeString),
+      'String expected',
+      opt_message
+    )
+  );
+}
+
+/**
+ * Throws an error if the first argument isn't a number. The allowed values
+ * include `0` and `NaN`.
+ *
+ * For more details see `assert`.
+ *
+ * @param {!AssertionFunctionDef} assertFn underlying assertion function to call
+ * @param {*} shouldBeNumber
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {number} The number value. The allowed values include `0`
+ *   and `NaN`.
+ * @throws {Error} when shouldBeNumber is not an Number
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function assertNumber(assertFn, shouldBeNumber, opt_message) {
+  return /** @type {number} */ (
+    assertType_(
+      assertFn,
+      shouldBeNumber,
+      typeof shouldBeNumber == 'number',
+      'Number expected',
+      opt_message
+    )
+  );
+}
+
+/**
+ * Throws an error if the first argument is not an array.
+ * The array can be empty.
+ *
+ * For more details see `assert`.
+ *
+ * @param {!AssertionFunctionDef} assertFn underlying assertion function to call
+ * @param {*} shouldBeArray
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {!Array} The array value
+ * @throws {Error} when shouldBeArray is not an Array
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function assertArray(assertFn, shouldBeArray, opt_message) {
+  return /** @type {!Array} */ (
+    assertType_(
+      assertFn,
+      shouldBeArray,
+      isArray(shouldBeArray),
+      'Array expected',
+      opt_message
+    )
+  );
+}
+
+/**
+ * Throws an error if the first argument isn't a boolean.
+ *
+ * For more details see `assert`.
+ *
+ * @param {!AssertionFunctionDef} assertFn underlying assertion function to call
+ * @param {*} shouldBeBoolean
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {boolean} The boolean value.
+ * @throws {Error} when shouldBeBoolean is not an Boolean
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function assertBoolean(assertFn, shouldBeBoolean, opt_message) {
+  return /** @type {boolean} */ (
+    assertType_(
+      assertFn,
+      shouldBeBoolean,
+      !!shouldBeBoolean === shouldBeBoolean,
+      'Boolean expected',
+      opt_message
+    )
+  );
+}
+
+/**
+ * Asserts and returns the enum value. If the enum doesn't contain such a
+ * value, the error is thrown.
+ *
+ * @param {!AssertionFunctionDef} assertFn underlying assertion function to call
+ * @param {!Object<T>} enumObj
+ * @param {*} shouldBeEnum
+ * @param {string=} opt_enumName
+ * @return {T}
+ * @template T
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function assertEnumValue(
+  assertFn,
+  enumObj,
+  shouldBeEnum,
+  opt_enumName = 'enum'
+) {
+  return assertType_(
+    assertFn,
+    shouldBeEnum,
+    isEnumValue(enumObj, shouldBeEnum),
+    `Unknown ${opt_enumName} value: "${shouldBeEnum}"`
+  );
+}
diff --git a/src/core/assert/dev.js b/src/core/assert/dev.js
new file mode 100644
index 0000000000000..a5f7600d2836c
--- /dev/null
+++ b/src/core/assert/dev.js
@@ -0,0 +1,238 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as assertions from './base';
+import {isMinifiedMode} from '../minified-mode';
+
+/**
+ * @fileoverview This file provides the entrypoint for dev assertions. It's
+ * designed so all functions are pure function calls to improve inlining. All
+ * functions in this file get DCE'd away during compilation.
+ */
+
+/**
+ * This will never execute regardless, but will be included on unminified builds
+ * builds. It will be DCE'd away from minified builds, and so can be used to
+ * validate that Babel is properly removing dev assertions in minified builds.
+ */
+function devAssertDceCheck() {
+  if (self.__AMP_ASSERTION_CHECK) {
+    console /*OK*/
+      .log('__devAssert_sentinel__');
+  }
+}
+
+/**
+ * Throws an error if the first argument isn't trueish. Mirrors devAssert in
+ * src/log.js.
+ * @param {T} shouldBeTruthy
+ * @param {string=} opt_message
+ * @param {*=} opt_1 Optional argument (var arg as individual params for better
+ * @param {*=} opt_2 Optional argument inlining)
+ * @param {*=} opt_3 Optional argument
+ * @param {*=} opt_4 Optional argument
+ * @param {*=} opt_5 Optional argument
+ * @param {*=} opt_6 Optional argument
+ * @param {*=} opt_7 Optional argument
+ * @param {*=} opt_8 Optional argument
+ * @param {*=} opt_9 Optional argument
+ * @return {T}
+ * @template T
+ * @throws {Error} when shouldBeTruthy is not truthy.
+ * @closurePrimitive {asserts.truthy}
+ */
+export function devAssert(
+  shouldBeTruthy,
+  opt_message,
+  opt_1,
+  opt_2,
+  opt_3,
+  opt_4,
+  opt_5,
+  opt_6,
+  opt_7,
+  opt_8,
+  opt_9
+) {
+  if (isMinifiedMode()) {
+    return shouldBeTruthy;
+  }
+  devAssertDceCheck();
+
+  return assertions.assert(
+    '',
+    shouldBeTruthy,
+    opt_message,
+    opt_1,
+    opt_2,
+    opt_3,
+    opt_4,
+    opt_5,
+    opt_6,
+    opt_7,
+    opt_8,
+    opt_9
+  );
+}
+
+/**
+ * Throws an error if the first argument isn't an Element.
+ *
+ * For more details see `assert`.
+ *
+ * @param {*} shouldBeElement
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {!Element} The value of shouldBeTrueish.
+ * @throws {Error} when shouldBeElement is not an Element
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function devAssertElement(shouldBeElement, opt_message) {
+  if (isMinifiedMode()) {
+    return /** @type {!Element} */ (shouldBeElement);
+  }
+  devAssertDceCheck();
+
+  return assertions.assertElement(
+    /** @type {!assertions.AssertionFunctionDef} */ (devAssert),
+    shouldBeElement,
+    opt_message
+  );
+}
+
+/**
+ * Throws an error if the first argument isn't a string. The string can
+ * be empty.
+ *
+ * For more details see `assert`.
+ *
+ * @param {*} shouldBeString
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {string} The string value. Can be an empty string.
+ * @throws {Error} when shouldBeString is not an String
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function devAssertString(shouldBeString, opt_message) {
+  if (isMinifiedMode()) {
+    return /** @type {string} */ (shouldBeString);
+  }
+  devAssertDceCheck();
+
+  return assertions.assertString(
+    /** @type {!assertions.AssertionFunctionDef} */ (devAssert),
+    shouldBeString,
+    opt_message
+  );
+}
+
+/**
+ * Throws an error if the first argument isn't a number. The allowed values
+ * include `0` and `NaN`.
+ *
+ * For more details see `assert`.
+ *
+ * @param {*} shouldBeNumber
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {number} The number value. The allowed values include `0`
+ *   and `NaN`.
+ * @throws {Error} when shouldBeNumber is not an Number
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function devAssertNumber(shouldBeNumber, opt_message) {
+  if (isMinifiedMode()) {
+    return /** @type {number} */ (shouldBeNumber);
+  }
+  devAssertDceCheck();
+
+  return assertions.assertNumber(
+    /** @type {!assertions.AssertionFunctionDef} */ (devAssert),
+    shouldBeNumber,
+    opt_message
+  );
+}
+
+/**
+ * Throws an error if the first argument is not an array.
+ * The array can be empty.
+ *
+ * For more details see `assert`.
+ *
+ * @param {*} shouldBeArray
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {!Array} The array value
+ * @throws {Error} when shouldBeArray is not an Array
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function devAssertArray(shouldBeArray, opt_message) {
+  if (isMinifiedMode()) {
+    return /** @type {!Array} */ (shouldBeArray);
+  }
+  devAssertDceCheck();
+
+  return assertions.assertArray(
+    /** @type {!assertions.AssertionFunctionDef} */ (devAssert),
+    shouldBeArray,
+    opt_message
+  );
+}
+
+/**
+ * Throws an error if the first argument isn't a boolean.
+ *
+ * For more details see `assert`.
+ *
+ * @param {*} shouldBeBoolean
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {boolean} The boolean value.
+ * @throws {Error} when shouldBeBoolean is not an Boolean
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function devAssertBoolean(shouldBeBoolean, opt_message) {
+  if (isMinifiedMode()) {
+    return /** @type {boolean} */ (shouldBeBoolean);
+  }
+  devAssertDceCheck();
+
+  return assertions.assertBoolean(
+    /** @type {!assertions.AssertionFunctionDef} */ (devAssert),
+    shouldBeBoolean,
+    opt_message
+  );
+}
+
+/**
+ * Asserts and returns the enum value. If the enum doesn't contain such a
+ * value, the error is thrown.
+ *
+ * @param {!Object<T>} enumObj
+ * @param {*} shouldBeEnum
+ * @param {string=} opt_enumName
+ * @return {T}
+ * @template T
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function devAssertEnumValue(enumObj, shouldBeEnum, opt_enumName) {
+  if (isMinifiedMode()) {
+    return shouldBeEnum;
+  }
+  devAssertDceCheck();
+
+  return assertions.assertEnumValue(
+    /** @type {!assertions.AssertionFunctionDef} */ (devAssert),
+    enumObj,
+    shouldBeEnum,
+    opt_enumName
+  );
+}
diff --git a/src/core/assert/index.js b/src/core/assert/index.js
new file mode 100644
index 0000000000000..3800e6aa8b4d3
--- /dev/null
+++ b/src/core/assert/index.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright 2021 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.
+ */
+
+export * from './dev';
+export * from './user';
diff --git a/src/core/assert/user.js b/src/core/assert/user.js
new file mode 100644
index 0000000000000..5a1e7c6c5cb0a
--- /dev/null
+++ b/src/core/assert/user.js
@@ -0,0 +1,205 @@
+/**
+ * Copyright 2021 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.
+ */
+/**
+ * Copyright 2021 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.
+ */
+
+import * as assertions from './base';
+import {USER_ERROR_SENTINEL} from '../error/message-helpers';
+
+/**
+ * @fileoverview This file provides the entrypoint for user assertions. It's
+ * designed so all functions are pure function calls to improve inlining.
+ */
+
+/**
+ * Throws a user error if the first argument isn't trueish. Mirrors userAssert
+ * in src/log.js.
+ * @param {T} shouldBeTruthy
+ * @param {string} opt_message
+ * @param {*=} opt_1 Optional argument (var arg as individual params for better
+ * @param {*=} opt_2 Optional argument inlining)
+ * @param {*=} opt_3 Optional argument
+ * @param {*=} opt_4 Optional argument
+ * @param {*=} opt_5 Optional argument
+ * @param {*=} opt_6 Optional argument
+ * @param {*=} opt_7 Optional argument
+ * @param {*=} opt_8 Optional argument
+ * @param {*=} opt_9 Optional argument
+ * @return {T}
+ * @template T
+ * @throws {UserError} when shouldBeTruthy is not truthy.
+ * @closurePrimitive {asserts.truthy}
+ */
+export function userAssert(
+  shouldBeTruthy,
+  opt_message,
+  opt_1,
+  opt_2,
+  opt_3,
+  opt_4,
+  opt_5,
+  opt_6,
+  opt_7,
+  opt_8,
+  opt_9
+) {
+  return assertions.assert(
+    USER_ERROR_SENTINEL,
+    shouldBeTruthy,
+    opt_message,
+    opt_1,
+    opt_2,
+    opt_3,
+    opt_4,
+    opt_5,
+    opt_6,
+    opt_7,
+    opt_8,
+    opt_9
+  );
+}
+
+/**
+ * Throws an error if the first argument isn't an Element.
+ *
+ * For more details see `assert`.
+ *
+ * @param {*} shouldBeElement
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {!Element} The value of shouldBeTrueish.
+ * @throws {Error} when shouldBeElement is not an Element
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function userAssertElement(shouldBeElement, opt_message) {
+  return assertions.assertElement(
+    /** @type {!assertions.AssertionFunctionDef} */ (userAssert),
+    shouldBeElement,
+    opt_message
+  );
+}
+
+/**
+ * Throws an error if the first argument isn't a string. The string can
+ * be empty.
+ *
+ * For more details see `assert`.
+ *
+ * @param {*} shouldBeString
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {string} The string value. Can be an empty string.
+ * @throws {Error} when shouldBeString is not an String
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function userAssertString(shouldBeString, opt_message) {
+  return assertions.assertString(
+    /** @type {!assertions.AssertionFunctionDef} */ (userAssert),
+    shouldBeString,
+    opt_message
+  );
+}
+
+/**
+ * Throws an error if the first argument isn't a number. The allowed values
+ * include `0` and `NaN`.
+ *
+ * For more details see `assert`.
+ *
+ * @param {*} shouldBeNumber
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {number} The number value. The allowed values include `0`
+ *   and `NaN`.
+ * @throws {Error} when shouldBeNumber is not an Number
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function userAssertNumber(shouldBeNumber, opt_message) {
+  return assertions.assertNumber(
+    /** @type {!assertions.AssertionFunctionDef} */ (userAssert),
+    shouldBeNumber,
+    opt_message
+  );
+}
+
+/**
+ * Throws an error if the first argument is not an array.
+ * The array can be empty.
+ *
+ * For more details see `assert`.
+ *
+ * @param {*} shouldBeArray
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {!Array} The array value
+ * @throws {Error} when shouldBeArray is not an Array
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function userAssertArray(shouldBeArray, opt_message) {
+  return assertions.assertArray(
+    /** @type {!assertions.AssertionFunctionDef} */ (userAssert),
+    shouldBeArray,
+    opt_message
+  );
+}
+
+/**
+ * Throws an error if the first argument isn't a boolean.
+ *
+ * For more details see `assert`.
+ *
+ * @param {*} shouldBeBoolean
+ * @param {!Array<*>|string=} opt_message The assertion message
+ * @return {boolean} The boolean value.
+ * @throws {Error} when shouldBeBoolean is not an Boolean
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function userAssertBoolean(shouldBeBoolean, opt_message) {
+  return assertions.assertBoolean(
+    /** @type {!assertions.AssertionFunctionDef} */ (userAssert),
+    shouldBeBoolean,
+    opt_message
+  );
+}
+
+/**
+ * Asserts and returns the enum value. If the enum doesn't contain such a
+ * value, the error is thrown.
+ *
+ * @param {!Object<T>} enumObj
+ * @param {*} shouldBeEnum
+ * @param {string=} opt_enumName
+ * @return {T}
+ * @template T
+ * @closurePrimitive {asserts.matchesReturn}
+ */
+export function userAssertEnumValue(enumObj, shouldBeEnum, opt_enumName) {
+  return assertions.assertEnumValue(
+    /** @type {!assertions.AssertionFunctionDef} */ (userAssert),
+    enumObj,
+    shouldBeEnum,
+    opt_enumName
+  );
+}
diff --git a/src/action-constants.js b/src/core/constants/action-constants.js
similarity index 98%
rename from src/action-constants.js
rename to src/core/constants/action-constants.js
index e9ce3cfb0e792..c93d0a3a611e6 100644
--- a/src/action-constants.js
+++ b/src/core/constants/action-constants.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {devAssert} from './log';
+import {devAssert} from '../assert';
 
 /**
  * Key string in an action arguments map for an unparsed object literal string.
diff --git a/src/amp-events.js b/src/core/constants/amp-events.js
similarity index 95%
rename from src/amp-events.js
rename to src/core/constants/amp-events.js
index 7613e4423e1b6..7dfbb21f45e59 100644
--- a/src/amp-events.js
+++ b/src/core/constants/amp-events.js
@@ -22,7 +22,7 @@ export const AmpEvents = {
   DOM_UPDATE: 'amp:dom-update',
   FORM_DIRTINESS_CHANGE: 'amp:form-dirtiness-change',
   FORM_VALUE_CHANGE: 'amp:form-value-change',
-  VISIBILITY_CHANGE: 'amp:visibilitychange', // https://github.com/ampproject/amphtml/blob/master/ads/README.md#page-visibility
+  VISIBILITY_CHANGE: 'amp:visibilitychange', // https://github.com/ampproject/amphtml/blob/main/ads/README.md#page-visibility
   // The following codes are only used for testing.
   // TODO(choumx): Move these to a separate enum so they can be DCE'd.
   ATTACHED: 'amp:attached',
diff --git a/src/common-signals.js b/src/core/constants/common-signals.js
similarity index 92%
rename from src/common-signals.js
rename to src/core/constants/common-signals.js
index 455891dfc379a..0f85a63e9ad4e 100644
--- a/src/common-signals.js
+++ b/src/core/constants/common-signals.js
@@ -19,6 +19,11 @@
  * @enum {string}
  */
 export const CommonSignals = {
+  /**
+   * The element's implementation has been registered and ready for upgrade.
+   */
+  READY_TO_UPGRADE: 'ready-upgrade',
+
   /**
    * The element has been upgraded from ElementStub to its real implementation.
    */
@@ -29,6 +34,11 @@ export const CommonSignals = {
    */
   BUILT: 'built',
 
+  /**
+   * The element has been mounted.
+   */
+  MOUNTED: 'mounted',
+
   /**
    * The element has started loading.
    * LOAD_START triggers at the start of the layoutCallback.
diff --git a/src/consent-state.js b/src/core/constants/consent-state.js
similarity index 100%
rename from src/consent-state.js
rename to src/core/constants/consent-state.js
diff --git a/src/enums.js b/src/core/constants/enums.js
similarity index 91%
rename from src/enums.js
rename to src/core/constants/enums.js
index 58b716105ecb6..bd55a70f67030 100644
--- a/src/enums.js
+++ b/src/core/constants/enums.js
@@ -36,6 +36,9 @@ export const TickLabel = {
   CONTENT_LAYOUT_DELAY: 'cld',
   CUMULATIVE_LAYOUT_SHIFT: 'cls',
   CUMULATIVE_LAYOUT_SHIFT_2: 'cls-2',
+  // TODO(#33207): Remove after data collection
+  CUMULATIVE_LAYOUT_SHIFT_BEFORE_FCP: 'cls-fcp',
+  CUMULATIVE_LAYOUT_SHIFT_BEFORE_VISIBLE: 'cls-ofv',
   DOCUMENT_READY: 'dr',
   END_INSTALL_STYLES: 'e_is',
   FIRST_CONTENTFUL_PAINT: 'fcp',
@@ -43,7 +46,6 @@ export const TickLabel = {
   FIRST_PAINT: 'fp',
   FIRST_INPUT_DELAY: 'fid',
   FIRST_INPUT_DELAY_POLYFILL: 'fid-polyfill',
-  FIRST_INPUT_DELAY_VISIBLE: 'fidv',
   FIRST_VIEWPORT_READY: 'pc',
   GOOD_FRAME_PROBABILITY: 'gfp',
   INSTALL_STYLES: 'is',
@@ -56,10 +58,10 @@ export const TickLabel = {
   MESSAGING_READY: 'msr',
   ON_FIRST_VISIBLE: 'ofv',
   ON_LOAD: 'ol',
-  SLOW_ELEMENT_RATIO: 'ser',
   TIME_ORIGIN: 'timeOrigin',
   VIDEO_CACHE_STATE: 'vcs',
   VIDEO_ERROR: 'verr',
+  VIDEO_ON_FIRST_PAGE: 'vofp',
   VIDEO_JOINT_LATENCY: 'vjl',
   VIDEO_MEAN_TIME_BETWEEN_REBUFFER: 'vmtbrb',
   VIDEO_REBUFFERS: 'vrb',
diff --git a/src/utils/key-codes.js b/src/core/constants/key-codes.js
similarity index 100%
rename from src/utils/key-codes.js
rename to src/core/constants/key-codes.js
diff --git a/src/core/constants/ready-state.js b/src/core/constants/ready-state.js
new file mode 100644
index 0000000000000..b8e0f4cd37da8
--- /dev/null
+++ b/src/core/constants/ready-state.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * An AMP element's ready state.
+ *
+ * @enum {string}
+ */
+export const ReadyState = {
+  /**
+   * The element has not been upgraded yet.
+   */
+  UPGRADING: 'upgrading',
+
+  /**
+   * The element has been upgraded and waiting to be built.
+   */
+  BUILDING: 'building',
+
+  /**
+   * The element has been built and waiting to be mounted.
+   */
+  MOUNTING: 'mounting',
+
+  /**
+   * The element has been built and waiting to be loaded.
+   */
+  LOADING: 'loading',
+
+  /**
+   * The element has been built and loaded.
+   */
+  COMPLETE: 'complete',
+
+  /**
+   * The element is in an error state.
+   */
+  ERROR: 'error',
+};
diff --git a/src/visibility-state.js b/src/core/constants/visibility-state.js
similarity index 100%
rename from src/visibility-state.js
rename to src/core/constants/visibility-state.js
diff --git a/src/core/data-structures/curve.js b/src/core/data-structures/curve.js
new file mode 100644
index 0000000000000..cb4734ff78d3d
--- /dev/null
+++ b/src/core/data-structures/curve.js
@@ -0,0 +1,307 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {isString} from '../types';
+
+/**
+ * Number between 0 and 1 that designates normalized time, as in "from start to
+ * end".
+ * @typedef {number}
+ */
+export let NormTimeDef;
+
+/**
+ * A CurveDef is a function that returns a normtime value (0 to 1) for another
+ * normtime value.
+ * @typedef {function(NormTimeDef): NormTimeDef}
+ */
+export let CurveDef;
+
+/**
+ * Returns a cubic bezier curve.
+ * @param {number} x1 X coordinate of the first control point.
+ * @param {number} y1 Y coordinate of the first control point.
+ * @param {number} x2 X coordinate of the second control point.
+ * @param {number} y2 Y coordinate of the second control point.
+ * @return {!CurveDef}
+ */
+export function bezierCurve(x1, y1, x2, y2) {
+  return (xVal) =>
+    Bezier.solveYValueFromXValue(xVal, 0, 0, x1, y1, x2, y2, 1, 1);
+}
+
+/**
+ * Thanks to
+ * https://closure-library.googlecode.com/git-history/docs/local_closure_goog_math_bezier.js.source.html
+ */
+class Bezier {
+  /**
+   * Computes the y coordinate of a point on the curve given its x coordinate.
+   * @param {number} xVal The x coordinate of the point on the curve.
+   * @param {number} x0 X coordinate of the start point.
+   * @param {number} y0 Y coordinate of the start point.
+   * @param {number} x1 X coordinate of the first control point.
+   * @param {number} y1 Y coordinate of the first control point.
+   * @param {number} x2 X coordinate of the second control point.
+   * @param {number} y2 Y coordinate of the second control point.
+   * @param {number} x3 X coordinate of the end point.
+   * @param {number} y3 Y coordinate of the end point.
+   * @return {number} The y coordinate of the point on the curve.
+   */
+  static solveYValueFromXValue(xVal, x0, y0, x1, y1, x2, y2, x3, y3) {
+    return Bezier.getPointY_(
+      Bezier.solvePositionFromXValue_(xVal, x0, x1, x2, x3),
+      y0,
+      y1,
+      y2,
+      y3
+    );
+  }
+
+  /**
+   * Computes the position t of a point on the curve given its x coordinate.
+   * That is, for an input xVal, finds t s.t. getPointX(t) = xVal.
+   * As such, the following should always be true up to some small epsilon:
+   * t ~ solvePositionFromXValue(getPointX(t)) for t in [0, 1].
+   * @param {number} xVal The x coordinate of the point to find on the curve.
+   * @param {number} x0 X coordinate of the start point.
+   * @param {number} x1 X coordinate of the first control point.
+   * @param {number} x2 X coordinate of the second control point.
+   * @param {number} x3 X coordinate of the end point.
+   * @return {number} The position t.
+   * @private
+   */
+  static solvePositionFromXValue_(xVal, x0, x1, x2, x3) {
+    // Desired precision on the computation.
+    const epsilon = 1e-6;
+
+    // Initial estimate of t using linear interpolation.
+    let t = (xVal - x0) / (x3 - x0);
+    if (t <= 0) {
+      return 0;
+    } else if (t >= 1) {
+      return 1;
+    }
+
+    // Try gradient descent to solve for t. If it works, it is very fast.
+    let tMin = 0;
+    let tMax = 1;
+    let value = 0;
+    for (let i = 0; i < 8; i++) {
+      value = Bezier.getPointX_(t, x0, x1, x2, x3);
+      const derivative =
+        (Bezier.getPointX_(t + epsilon, x0, x1, x2, x3) - value) / epsilon;
+      if (Math.abs(value - xVal) < epsilon) {
+        return t;
+      } else if (Math.abs(derivative) < epsilon) {
+        break;
+      } else {
+        if (value < xVal) {
+          tMin = t;
+        } else {
+          tMax = t;
+        }
+        t -= (value - xVal) / derivative;
+      }
+    }
+
+    // If the gradient descent got stuck in a local minimum, e.g. because
+    // the derivative was close to 0, use a Dichotomy refinement instead.
+    // We limit the number of iterations to 8.
+    for (let i = 0; Math.abs(value - xVal) > epsilon && i < 8; i++) {
+      if (value < xVal) {
+        tMin = t;
+        t = (t + tMax) / 2;
+      } else {
+        tMax = t;
+        t = (t + tMin) / 2;
+      }
+      value = Bezier.getPointX_(t, x0, x1, x2, x3);
+    }
+    return t;
+  }
+
+  /**
+   * Computes the curve's X coordinate at a point between 0 and 1.
+   * @param {number} t The point on the curve to find.
+   * @param {number} x0 X coordinate of the start point.
+   * @param {number} x1 X coordinate of the first control point.
+   * @param {number} x2 X coordinate of the second control point.
+   * @param {number} x3 X coordinate of the end point.
+   * @return {number} The computed coordinate.
+   * @private
+   */
+  static getPointX_(t, x0, x1, x2, x3) {
+    // Special case start and end.
+    if (t == 0) {
+      return x0;
+    } else if (t == 1) {
+      return x3;
+    }
+
+    // Step one - from 4 points to 3
+    let ix0 = Bezier.lerp_(x0, x1, t);
+    let ix1 = Bezier.lerp_(x1, x2, t);
+    const ix2 = Bezier.lerp_(x2, x3, t);
+
+    // Step two - from 3 points to 2
+    ix0 = Bezier.lerp_(ix0, ix1, t);
+    ix1 = Bezier.lerp_(ix1, ix2, t);
+
+    // Final step - last point
+    return Bezier.lerp_(ix0, ix1, t);
+  }
+
+  /**
+   * Computes the curve's Y coordinate at a point between 0 and 1.
+   * @param {number} t The point on the curve to find.
+   * @param {number} y0 Y coordinate of the start point.
+   * @param {number} y1 Y coordinate of the first control point.
+   * @param {number} y2 Y coordinate of the second control point.
+   * @param {number} y3 Y coordinate of the end point.
+   * @return {number} The computed coordinate.
+   * @private
+   */
+  static getPointY_(t, y0, y1, y2, y3) {
+    // Special case start and end.
+    if (t == 0) {
+      return y0;
+    } else if (t == 1) {
+      return y3;
+    }
+
+    // Step one - from 4 points to 3
+    let iy0 = Bezier.lerp_(y0, y1, t);
+    let iy1 = Bezier.lerp_(y1, y2, t);
+    const iy2 = Bezier.lerp_(y2, y3, t);
+
+    // Step two - from 3 points to 2
+    iy0 = Bezier.lerp_(iy0, iy1, t);
+    iy1 = Bezier.lerp_(iy1, iy2, t);
+
+    // Final step - last point
+    return Bezier.lerp_(iy0, iy1, t);
+  }
+
+  /**
+   * Performs linear interpolation between values a and b. Returns the value
+   * between a and b proportional to x (when x is between 0 and 1. When x is
+   * outside this range, the return value is a linear extrapolation).
+   * @param {number} a A number.
+   * @param {number} b A number.
+   * @param {number} x The proportion between a and b.
+   * @return {number} The interpolated value between a and b.
+   * @private
+   */
+  static lerp_(a, b, x) {
+    return a + x * (b - a);
+  }
+}
+
+/**
+ * A collection of common curves.
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
+ * @enum {!CurveDef}
+ */
+export const Curves = {
+  /**
+   * linear
+   * @param {!NormTimeDef} xVal
+   * @return {!NormTimeDef}
+   */
+  LINEAR(xVal) {
+    return xVal;
+  },
+
+  /**
+   * ease
+   * @param {!NormTimeDef} xVal
+   * @return {!NormTimeDef}
+   */
+  EASE(xVal) {
+    return Bezier.solveYValueFromXValue(xVal, 0, 0, 0.25, 0.1, 0.25, 1.0, 1, 1);
+  },
+
+  /**
+   * ease-in: slow out, fast in
+   * @param {!NormTimeDef} xVal
+   * @return {!NormTimeDef}
+   */
+  EASE_IN(xVal) {
+    return Bezier.solveYValueFromXValue(xVal, 0, 0, 0.42, 0.0, 1.0, 1.0, 1, 1);
+  },
+
+  /**
+   * ease-out: fast out, slow in
+   * @param {!NormTimeDef} xVal
+   * @return {!NormTimeDef}
+   */
+  EASE_OUT(xVal) {
+    return Bezier.solveYValueFromXValue(xVal, 0, 0, 0.0, 0.0, 0.58, 1.0, 1, 1);
+  },
+
+  /**
+   * ease-in-out
+   * @param {!NormTimeDef} xVal
+   * @return {!NormTimeDef}
+   */
+  EASE_IN_OUT(xVal) {
+    return Bezier.solveYValueFromXValue(xVal, 0, 0, 0.42, 0.0, 0.58, 1.0, 1, 1);
+  },
+};
+
+/**
+ * @const {!Object<string, !CurveDef>}
+ */
+const NAME_MAP = {
+  'linear': Curves.LINEAR,
+  'ease': Curves.EASE,
+  'ease-in': Curves.EASE_IN,
+  'ease-out': Curves.EASE_OUT,
+  'ease-in-out': Curves.EASE_IN_OUT,
+};
+
+/**
+ * If the argument is a string, this methods matches an existing curve by name.
+ * @param {?CurveDef|string|undefined} curve
+ * @return {?CurveDef}
+ */
+export function getCurve(curve) {
+  if (!curve) {
+    return null;
+  }
+  if (isString(curve)) {
+    curve = /** @type {string} */ (curve);
+    // If the curve is a custom cubic-bezier curve
+    if (curve.indexOf('cubic-bezier') != -1) {
+      const match = curve.match(/cubic-bezier\((.+)\)/);
+      if (match) {
+        const values = match[1].split(',').map(parseFloat);
+        if (values.length == 4) {
+          for (let i = 0; i < 4; i++) {
+            if (isNaN(values[i])) {
+              return null;
+            }
+          }
+          return bezierCurve(values[0], values[1], values[2], values[3]);
+        }
+      }
+      return null;
+    }
+    return NAME_MAP[curve];
+  }
+  return /** @type {!CurveDef} */ (curve);
+}
diff --git a/src/finite-state-machine.js b/src/core/data-structures/finite-state-machine.js
similarity index 93%
rename from src/finite-state-machine.js
rename to src/core/data-structures/finite-state-machine.js
index c79ac03e66c73..8d679b1ef9f8f 100644
--- a/src/finite-state-machine.js
+++ b/src/core/data-structures/finite-state-machine.js
@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-import {devAssert} from './log';
+import {devAssert} from '../assert';
+import {map} from '../types/object';
 
-/**
- * @template STATE
- */
+/** @template STATE */
 export class FiniteStateMachine {
   /**
    * Constructs a FSM using the bits defined in initialState as changeable
@@ -37,7 +36,7 @@ export class FiniteStateMachine {
      * to the new.
      * @private {Object<string, function()>}
      */
-    this.transitions_ = Object.create(null);
+    this.transitions_ = map();
   }
 
   /**
@@ -67,10 +66,7 @@ export class FiniteStateMachine {
 
     const transition = this.statesToTransition_(oldState, newState);
     const callback = this.transitions_[transition];
-
-    if (callback) {
-      callback();
-    }
+    callback?.();
   }
 
   /**
diff --git a/src/utils/lru-cache.js b/src/core/data-structures/lru-cache.js
similarity index 93%
rename from src/utils/lru-cache.js
rename to src/core/data-structures/lru-cache.js
index bf856875124cd..02b64f8104093 100644
--- a/src/utils/lru-cache.js
+++ b/src/core/data-structures/lru-cache.js
@@ -14,10 +14,7 @@
  * limitations under the License.
  */
 
-import {dev} from '../log';
-
-/** @const {string} */
-const TAG = 'lru-cache';
+import {map} from '../types/object';
 
 /**
  * @template T
@@ -40,7 +37,7 @@ export class LruCache {
     this.access_ = 0;
 
     /** @private {!Object<(number|string), {payload: T, access: number}>} */
-    this.cache_ = Object.create(null);
+    this.cache_ = map();
   }
 
   /**
@@ -86,7 +83,6 @@ export class LruCache {
       return;
     }
 
-    dev().warn(TAG, 'Trimming LRU cache');
     const cache = this.cache_;
     let oldest = this.access_ + 1;
     let oldestKey;
diff --git a/src/observable.js b/src/core/data-structures/observable.js
similarity index 85%
rename from src/observable.js
rename to src/core/data-structures/observable.js
index 8f8b16bf5a987..6c63bcf1e7b9e 100644
--- a/src/observable.js
+++ b/src/core/data-structures/observable.js
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import {removeItem} from '../types/array';
+
 /**
  * This class helps to manage observers. Observers can be added, removed or
  * fired through and instance of this class.
@@ -51,10 +53,7 @@ export class Observable {
     if (!this.handlers_) {
       return;
     }
-    const index = this.handlers_.indexOf(handler);
-    if (index > -1) {
-      this.handlers_.splice(index, 1);
-    }
+    removeItem(this.handlers_, handler);
   }
 
   /**
@@ -75,9 +74,7 @@ export class Observable {
     if (!this.handlers_) {
       return;
     }
-    const handlers = this.handlers_;
-    for (let i = 0; i < handlers.length; i++) {
-      const handler = handlers[i];
+    for (const handler of this.handlers_) {
       handler(opt_event);
     }
   }
@@ -87,9 +84,6 @@ export class Observable {
    * @return {number}
    */
   getHandlerCount() {
-    if (!this.handlers_) {
-      return 0;
-    }
-    return this.handlers_.length;
+    return this.handlers_?.length ?? 0;
   }
 }
diff --git a/src/utils/priority-queue.js b/src/core/data-structures/priority-queue.js
similarity index 93%
rename from src/utils/priority-queue.js
rename to src/core/data-structures/priority-queue.js
index bc61dafef5495..d9d10a3e81ec0 100644
--- a/src/utils/priority-queue.js
+++ b/src/core/data-structures/priority-queue.js
@@ -32,7 +32,7 @@ export default class PriorityQueue {
    * @return {T}
    */
   peek() {
-    const l = this.queue_.length;
+    const l = this.length;
     if (!l) {
       return null;
     }
@@ -61,11 +61,11 @@ export default class PriorityQueue {
   binarySearch_(target) {
     let i = -1;
     let lo = 0;
-    let hi = this.queue_.length;
+    let hi = this.length;
     while (lo <= hi) {
       i = Math.floor((lo + hi) / 2);
       // This means `target` is the new max priority in the queue.
-      if (i === this.queue_.length) {
+      if (i === this.length) {
         break;
       }
       // Stop searching once p[i] >= target AND p[i-1] < target.
@@ -86,7 +86,7 @@ export default class PriorityQueue {
    * @param {function(T)} callback
    */
   forEach(callback) {
-    let index = this.queue_.length;
+    let index = this.length;
     while (index--) {
       callback(this.queue_[index].item);
     }
@@ -98,7 +98,7 @@ export default class PriorityQueue {
    * @return {T}
    */
   dequeue() {
-    if (!this.queue_.length) {
+    if (!this.length) {
       return null;
     }
     return this.queue_.pop().item;
diff --git a/src/core/data-structures/promise.js b/src/core/data-structures/promise.js
new file mode 100644
index 0000000000000..5b88e35b9f0e6
--- /dev/null
+++ b/src/core/data-structures/promise.js
@@ -0,0 +1,136 @@
+/**
+ * Copyright 2016 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.
+ */
+
+let resolved;
+
+/**
+ * Returns a cached resolved promise.
+ * Babel converts direct calls to Promise.resolve() (with no arguments) into
+ * calls to this.
+ *
+ * @return {!Promise<undefined>}
+ */
+export function resolvedPromise() {
+  if (resolved) {
+    return resolved;
+  }
+
+  // It's important that we call with `undefined` here, to prevent a transform
+  // recursion. If we didn't pass an arg, then the transformer would replace
+  // this callsite with a call to `resolvedPromise()`.
+  resolved = Promise.resolve(undefined);
+  return resolved;
+}
+
+/**
+ * Returns a Deferred struct, which holds a pending promise and its associated
+ * resolve and reject functions.
+ *
+ * This is preferred instead of creating a Promise instance to extract the
+ * resolve/reject functions yourself:
+ *
+ * ```
+ * // Avoid doing
+ * let resolve;
+ * const promise = new Promise(res => {
+ *   resolve = res;
+ * });
+ *
+ * // Good
+ * const deferred = new Deferred();
+ * const { promise, resolve } = deferred;
+ * ```
+ *
+ * @template T
+ */
+export class Deferred {
+  /** Constructor. */
+  constructor() {
+    /** @const {!Promise<T>} */
+    this.promise = new /*OK*/ Promise((res, rej) => {
+      /** @const {function(T=)} */
+      this.resolve = res;
+      /** @const {function(*=)} */
+      this.reject = rej;
+    });
+  }
+}
+
+/**
+ * Creates a promise resolved to the return value of fn.
+ * If fn sync throws, it will cause the promise to reject.
+ *
+ * @param {function():T} fn
+ * @return {!Promise<T>}
+ * @template T
+ */
+export function tryResolve(fn) {
+  return new Promise((resolve) => {
+    resolve(fn());
+  });
+}
+
+/**
+ * Resolves with the result of the last promise added.
+ * @implements {IThenable}
+ */
+export class LastAddedResolver {
+  /**
+   * @param {!Array<!IThenable>=} opt_promises
+   */
+  constructor(opt_promises) {
+    /** @private @const {!Deferred} */
+    this.deferred_ = new Deferred();
+
+    /** @private */
+    this.count_ = 0;
+
+    if (opt_promises) {
+      for (const promise of opt_promises) {
+        this.add(promise);
+      }
+    }
+  }
+
+  /**
+   * Add a promise to possibly be resolved.
+   * @param {!IThenable} promise
+   * @return {!Promise}
+   */
+  add(promise) {
+    const countAtAdd = ++this.count_;
+    promise.then(
+      (result) => {
+        if (this.count_ === countAtAdd) {
+          this.deferred_.resolve(result);
+        }
+      },
+      (error) => {
+        // Don't follow behavior of Promise.all and Promise.race error so that
+        // this will only reject when most recently added promise fails.
+        if (this.count_ === countAtAdd) {
+          this.deferred_.reject(error);
+        }
+      }
+    );
+    return this.deferred_.promise;
+  }
+
+  /** @override */
+  then(opt_resolve, opt_reject) {
+    return this.deferred_.promise.then(opt_resolve, opt_reject);
+  }
+}
diff --git a/src/utils/signals.js b/src/core/data-structures/signals.js
similarity index 81%
rename from src/utils/signals.js
rename to src/core/data-structures/signals.js
index ab1546949281d..3779bf7ae5b29 100644
--- a/src/utils/signals.js
+++ b/src/core/data-structures/signals.js
@@ -15,7 +15,10 @@
  */
 
 import {Deferred} from './promise';
-import {map} from './object';
+import {map} from '../types/object';
+
+// typedef imports
+import {TimestampDef} from '../types/date';
 
 /**
  * This object tracts signals and allows blocking until a signal has been
@@ -29,7 +32,7 @@ export class Signals {
     /**
      * A mapping from a signal name to the signal response: either time or
      * an error.
-     * @private @const {!Object<string, (time|!Error)>}
+     * @private @const {!Object<string, (!TimestampDef|!Error)>}
      */
     this.map_ = map();
 
@@ -38,7 +41,7 @@ export class Signals {
      * Only allocated when promise has been requested.
      * @private {?Object<string, {
      *   promise: !Promise,
-     *   resolve: (function(time)|undefined),
+     *   resolve: (function(!TimestampDef)|undefined),
      *   reject: (function(!Error)|undefined)
      * }>}
      */
@@ -60,10 +63,10 @@ export class Signals {
    * Returns the promise that's resolved when the signal is triggered. The
    * resolved value is the time of the signal.
    * @param {string} name
-   * @return {!Promise<time>}
+   * @return {!Promise<!TimestampDef>}
    */
   whenSignal(name) {
-    let promiseStruct = this.promiseMap_ && this.promiseMap_[name];
+    let promiseStruct = this.promiseMap_?.[name];
     if (!promiseStruct) {
       const result = this.map_[name];
       if (result != null) {
@@ -76,10 +79,7 @@ export class Signals {
       } else {
         // Allocate the promise/resolver for when the signal arrives in the
         // future.
-        const deferred = new Deferred();
-        const {promise, resolve, reject} = deferred;
-
-        promiseStruct = {promise, resolve, reject};
+        promiseStruct = new Deferred();
       }
       if (!this.promiseMap_) {
         this.promiseMap_ = map();
@@ -92,19 +92,19 @@ export class Signals {
   /**
    * Triggers the signal with the specified name on the element. The time is
    * optional; if not provided, the current time is used. The associated
-   * promise is resolved with the resulting time.
+   * promise is resolved with the resulting TimestampDef.
    * @param {string} name
-   * @param {time=} opt_time
+   * @param {!TimestampDef=} opt_time
    */
   signal(name, opt_time) {
     if (this.map_[name] != null) {
       // Do not duplicate signals.
       return;
     }
-    const time = opt_time || Date.now();
+    const time = opt_time ?? Date.now();
     this.map_[name] = time;
-    const promiseStruct = this.promiseMap_ && this.promiseMap_[name];
-    if (promiseStruct && promiseStruct.resolve) {
+    const promiseStruct = this.promiseMap_?.[name];
+    if (promiseStruct?.resolve) {
       promiseStruct.resolve(time);
       promiseStruct.resolve = undefined;
       promiseStruct.reject = undefined;
@@ -123,9 +123,10 @@ export class Signals {
       return;
     }
     this.map_[name] = error;
-    const promiseStruct = this.promiseMap_ && this.promiseMap_[name];
-    if (promiseStruct && promiseStruct.reject) {
+    const promiseStruct = this.promiseMap_?.[name];
+    if (promiseStruct?.reject) {
       promiseStruct.reject(error);
+      promiseStruct.promise.catch(() => {});
       promiseStruct.resolve = undefined;
       promiseStruct.reject = undefined;
     }
@@ -140,7 +141,7 @@ export class Signals {
       delete this.map_[name];
     }
     // Reset promise it has already been resolved.
-    const promiseStruct = this.promiseMap_ && this.promiseMap_[name];
+    const promiseStruct = this.promiseMap_?.[name];
     if (promiseStruct && !promiseStruct.resolve) {
       delete this.promiseMap_[name];
     }
diff --git a/src/document-ready.js b/src/core/document-ready.js
similarity index 100%
rename from src/document-ready.js
rename to src/core/document-ready.js
diff --git a/src/core/dom/css.js b/src/core/dom/css.js
new file mode 100644
index 0000000000000..3c5cf5ad1acd7
--- /dev/null
+++ b/src/core/dom/css.js
@@ -0,0 +1,118 @@
+/**
+ * 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.
+ */
+
+import {cssEscape} from '../../../third_party/css-escape/css-escape';
+import {devAssert} from '../assert';
+
+/**
+ * @type {boolean|undefined}
+ */
+let scopeSelectorSupported;
+
+/**
+ * @param {boolean|undefined} val
+ * @visibleForTesting
+ */
+export function setScopeSelectorSupportedForTesting(val) {
+  scopeSelectorSupported = val;
+}
+
+/**
+ * Test that the :scope selector is supported and behaves correctly.
+ * @param {!Element|!ShadowRoot} el
+ * @return {boolean}
+ */
+export function isScopeSelectorSupported(el) {
+  if (scopeSelectorSupported !== undefined) {
+    return scopeSelectorSupported;
+  }
+
+  return (scopeSelectorSupported = testScopeSelector(el));
+}
+
+/**
+ * Test that the :scope selector is supported and behaves correctly.
+ * @param {!Element|!ShadowRoot} el
+ * @return {boolean}
+ */
+function testScopeSelector(el) {
+  try {
+    const doc = el.ownerDocument;
+    const testElement = doc.createElement('div');
+    const testChild = doc.createElement('div');
+    testElement.appendChild(testChild);
+    // NOTE(cvializ, #12383): Firefox's implementation is incomplete,
+    // therefore we test actual functionality of`:scope` as well.
+    return testElement./*OK*/ querySelector(':scope div') === testChild;
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * Prefixes a selector for ancestor selection. Splits in subselectors and
+ * applies prefix to each.
+ *
+ * e.g.
+ * ```
+ *   prependSelectorsWith('div', '.i-amphtml-scoped');
+ *   // => '.i-amphtml-scoped div'
+ *   prependSelectorsWith('div, ul', ':scope');
+ *   // => ':scope div, :scope ul'
+ *   prependSelectorsWith('div, ul', 'article >');
+ *   // => 'article > div, article > ul'
+ * ```
+ *
+ * @param {string} selector
+ * @param {string} distribute
+ * @return {string}
+ */
+export function prependSelectorsWith(selector, distribute) {
+  return selector.replace(/^|,/g, `$&${distribute} `);
+}
+
+/**
+ * Escapes an ident (ID or a class name) to be used as a CSS selector.
+ *
+ * See https://drafts.csswg.org/cssom/#serialize-an-identifier.
+ *
+ * @param {string} ident
+ * @return {string}
+ * @suppress {uselessCode}
+ */
+export function escapeCssSelectorIdent(ident) {
+  // This gets rewritten to true/false during compilation. It will trigger an
+  // JSC_UNREACHABLE_CODE warning, but that's intentional for DCE.
+  if (IS_ESM) {
+    return CSS.escape(ident);
+  }
+  return cssEscape(ident);
+}
+
+/**
+ * Escapes an ident in a way that can be used by :nth-child() psuedo-class.
+ *
+ * See https://github.com/w3c/csswg-drafts/issues/2306.
+ *
+ * @param {string|number} ident
+ * @return {string}
+ */
+export function escapeCssSelectorNth(ident) {
+  const escaped = String(ident);
+  // Ensure it doesn't close the nth-child psuedo class.
+  devAssert(escaped.indexOf(')') === -1);
+  return escaped;
+}
diff --git a/src/core/dom/fingerprint.js b/src/core/dom/fingerprint.js
new file mode 100644
index 0000000000000..a3cd3efe5b378
--- /dev/null
+++ b/src/core/dom/fingerprint.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {isElement} from '../types';
+import {stringHash32} from '../types/string';
+
+/**
+ * Gets a string of concatenated element names and relative positions
+ * of the DOM element and its parentElement's (up to 25).  Relative position
+ * is the index of nodes with this tag within the parent's children.
+ * The order is from the inner to outer nodes in DOM hierarchy.
+ *
+ * If a DOM hierarchy is the following:
+ *
+ * <div id='id1' ...>
+ *   <div id='id2' ...>
+ *     <table ...>       // table:0
+ *       <tr>            // tr:0
+ *         <td>...</td>  // td:0
+ *         <td>          // td:1
+ *           <amp-ad ...></amp-ad>
+ *         </td>
+ *       </tr>
+ *       <tr>...</tr>    // tr:1
+ *     </table>
+ *   </div>
+ * </div>
+ *
+ * With the amp-ad element passed in:
+ * 'amp-ad.0,td.1,tr.0,table.0,div/id2.0,div/id1.0'
+ *
+ * Note: 25 is chosen arbitrarily.
+ *
+ * @param {?Element} element DOM node from which to get fingerprint.
+ * @return {string} Concatenated element ids.
+ */
+export function domFingerprintPlain(element) {
+  const ids = [];
+  let level = 0;
+  while (isElement(element) && level < 25) {
+    let id = '';
+    if (element.id) {
+      id = `/${element.id}`;
+    }
+    const nodeName = element.nodeName.toLowerCase();
+    ids.push(`${nodeName}${id}${indexWithinParent(element)}`);
+    level++;
+    element = element.parentElement;
+  }
+  return ids.join();
+}
+
+export class DomFingerprint {
+  /**
+   * Calculates ad slot DOM fingerprint.  This key is intended to
+   * identify "same" ad unit across many page views. This is
+   * based on where the ad appears within the page's DOM structure.
+   *
+   * @param {?Element} element The DOM element from which to collect
+   *     the DOM chain element IDs.  If null, DOM chain element IDs are not
+   *     included in the hash.
+   * @return {string} The ad unit hash key string.
+   */
+  static generate(element) {
+    return stringHash32(domFingerprintPlain(element));
+  }
+}
+
+/**
+ * Gets a string showing the index of an element within
+ * the children of its parent, counting only nodes with the same tag.
+ * Stop at 25, just to have a limit.
+ * @param {!Element} element DOM node to get index of.
+ * @return {string} '.<index>' or ''.
+ */
+function indexWithinParent(element) {
+  const {nodeName} = element;
+  // Find my index within my parent's children
+  let i = 0;
+  let count = 0;
+  let sibling = element.previousElementSibling;
+  // Different browsers have different children.
+  // So count only nodes with the same tag.
+  // Use a limit for the tags, so that different browsers get the same
+  // count. So 25 and higher all return no index.
+  while (sibling && count < 25 && i < 100) {
+    if (sibling.nodeName == nodeName) {
+      count++;
+    }
+    i++;
+    sibling = sibling.previousElementSibling;
+  }
+  // If we got to the end, then the count is accurate; otherwise skip count.
+  return count < 25 && i < 100 ? `.${count}` : '';
+}
diff --git a/src/get-html.js b/src/core/dom/get-html.js
similarity index 87%
rename from src/get-html.js
rename to src/core/dom/get-html.js
index f5a0f2c3bd6bb..84392f26437c5 100644
--- a/src/get-html.js
+++ b/src/core/dom/get-html.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {startsWith} from './string';
+import {isElement, isString} from '../types';
 
 /** @type {!Array<string>} */
 const excludedTags = ['script', 'style'];
@@ -76,18 +76,16 @@ export function getHtml(win, selector, attrs) {
  */
 function appendToResult(node, attrs, result) {
   const stack = [node];
-  const allowedAttrs = attrs.filter((attr) => {
-    return allowedAttributes.includes(attr);
-  });
+  const allowedAttrs = attrs.filter((attr) => allowedAttributes.includes(attr));
 
   while (stack.length > 0) {
     node = stack.pop();
 
-    if (typeof node === 'string') {
+    if (isString(node)) {
       result.push(node);
     } else if (node.nodeType === Node.TEXT_NODE) {
       result.push(node.textContent);
-    } else if (node.nodeType === Node.ELEMENT_NODE && isApplicableNode(node)) {
+    } else if (isElement(node) && isApplicableNode(node)) {
       appendOpenTag(node, allowedAttrs, result);
       stack.push(`</${node.tagName.toLowerCase()}>`);
 
@@ -99,14 +97,14 @@ function appendToResult(node, attrs, result) {
 }
 
 /**
- *
+ * Returns true for allowed AMP tags and non-AMP tags except <script>/<style>
  * @param {!Element} node
  * @return {boolean}
  */
 function isApplicableNode(node) {
   const tagName = node.tagName.toLowerCase();
 
-  if (startsWith(tagName, 'amp-')) {
+  if (tagName.startsWith('amp-')) {
     return !!(allowedAmpTags.includes(tagName) && node.textContent);
   } else {
     return !!(!excludedTags.includes(tagName) && node.textContent);
@@ -114,7 +112,7 @@ function isApplicableNode(node) {
 }
 
 /**
- *
+ * Constructs an open-tag with the provided attributes.
  * @param {!Element} node
  * @param {!Array<string>} attrs
  * @param {Array<string>} result
@@ -122,7 +120,7 @@ function isApplicableNode(node) {
 function appendOpenTag(node, attrs, result) {
   result.push(`<${node.tagName.toLowerCase()}`);
 
-  attrs.forEach(function (attr) {
+  attrs.forEach((attr) => {
     if (node.hasAttribute(attr)) {
       result.push(` ${attr}="${node.getAttribute(attr)}"`);
     }
diff --git a/src/core/dom/parse-date-attributes.js b/src/core/dom/parse-date-attributes.js
new file mode 100644
index 0000000000000..0a716e47a59ca
--- /dev/null
+++ b/src/core/dom/parse-date-attributes.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {TimestampDef, parseDate} from '../types/date';
+import {devAssert, userAssert} from '../assert';
+
+/** @typedef {function(string):!TimestampDef} */
+let DateParserDef;
+
+/**
+ * Map from attribute names to their parsers.
+ * @type {Object<string, !DateParserDef>}
+ */
+const dateAttrParsers = {
+  'datetime': (datetime) =>
+    userAssert(parseDate(datetime), 'Invalid date: %s', datetime),
+  'end-date': (datetime) =>
+    userAssert(parseDate(datetime), 'Invalid date: %s', datetime),
+  'timeleft-ms': (timeleftMs) => Date.now() + Number(timeleftMs),
+  'timestamp-ms': (ms) => Number(ms),
+  'timestamp-seconds': (timestampSeconds) => 1000 * Number(timestampSeconds),
+};
+
+/**
+ * @param {!Element} element
+ * @param {!Array<string>} dateAttrs list of attribute names
+ * @return {?TimestampDef}
+ */
+export function parseDateAttrs(element, dateAttrs) {
+  const epoch = userAssert(
+    parseEpoch(element, dateAttrs),
+    'One of attributes [%s] is required',
+    dateAttrs.join(', ')
+  );
+
+  const offsetSeconds =
+    (Number(element.getAttribute('offset-seconds')) || 0) * 1000;
+  return epoch + offsetSeconds;
+}
+
+/**
+ * Parse epoch from list of possible element attributes, returning the first one
+ * that is truthy.
+ * @param {!Element} element
+ * @param {!Array<string>} dateAttrs list of attribute names
+ * @return {?TimestampDef}
+ */
+function parseEpoch(element, dateAttrs) {
+  // Validate provided dateAttrs outside the loop so it will fail when an
+  // invalid attr is provided, even if that attribute isn't present on the
+  // element.
+  /** @type {!Array<!DateParserDef>} */
+  const parsers = dateAttrs.map((attrName) =>
+    devAssert(
+      dateAttrParsers[attrName],
+      'Invalid date attribute "%s"',
+      attrName
+    )
+  );
+
+  for (let i = 0; i < dateAttrs.length; ++i) {
+    const attrVal = element.getAttribute(dateAttrs[i]);
+    if (attrVal) {
+      return parsers[i](attrVal);
+    }
+  }
+
+  return null;
+}
diff --git a/src/core/dom/stream/detached.js b/src/core/dom/stream/detached.js
new file mode 100644
index 0000000000000..4960bd6c85433
--- /dev/null
+++ b/src/core/dom/stream/detached.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {devAssert} from '../../assert';
+
+export class DetachedDomStream {
+  /**
+   * @param {!Window} win
+   * @param {function(!Document):void} onChunk
+   * @param {function(!Document):void} onEnd
+   */
+  constructor(win, onChunk, onEnd) {
+    /** @const @private {function(!Document):void} */
+    this.onChunk_ = onChunk;
+
+    /** @const @private {function(!Document):void} */
+    this.onEnd_ = onEnd;
+
+    /** @const @private {!Document} */
+    this.detachedDoc_ = win.document.implementation.createHTMLDocument('');
+    this.detachedDoc_.open();
+
+    /** @private {boolean} */
+    this.eof_ = false;
+  }
+
+  /**
+   * Write chunk into detached doc, and call given chunk cb.
+   * @public
+   * @param {string} chunk
+   */
+  write(chunk) {
+    devAssert(!this.eof_, 'Detached doc already closed.');
+
+    if (chunk) {
+      this.detachedDoc_.write(chunk);
+    }
+    this.onChunk_(this.detachedDoc_);
+  }
+
+  /**
+   * Called when stream is finished. Close the detached doc, and call cb.
+   * @public
+   */
+  close() {
+    this.eof_ = true;
+    this.detachedDoc_.close();
+    this.onEnd_(this.detachedDoc_);
+  }
+}
diff --git a/src/core/dom/stream/index.js b/src/core/dom/stream/index.js
new file mode 100644
index 0000000000000..6c83a0b9a2d5f
--- /dev/null
+++ b/src/core/dom/stream/index.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2021 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.
+ */
+
+export {DetachedDomStream} from './detached';
+export {streamResponseToWriter} from './response';
+// TODO(#32693): Migrate DomTransformStream into core to finish the trio
diff --git a/src/core/dom/stream/response.js b/src/core/dom/stream/response.js
new file mode 100644
index 0000000000000..7568ba662d3ed
--- /dev/null
+++ b/src/core/dom/stream/response.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Deferred} from '../../data-structures/promise';
+
+/**
+ * Decodes readable stream from response and writes to given writeable stream.
+ * Returns a promise that resolves when first bytes are received from the
+ * response, or we learn that the response is empty.
+ * This function should be replaced with transform stream when well supported.
+ * @param {!Window} win
+ * @param {!Response} response
+ * @param {!./detached.DetachedDomStream} writer
+ * @return {!Promise<boolean>} true if response has content, false if
+ * the response is empty.
+ */
+export function streamResponseToWriter(win, response, writer) {
+  const hasContentDeferred = new Deferred();
+  // Try native streaming first.
+  if (win.TextDecoder && win.ReadableStream) {
+    let firstRead = true;
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+
+    reader.read().then(function handleChunk({done, value}) {
+      if (firstRead) {
+        hasContentDeferred.resolve(!done);
+        firstRead = false;
+      }
+
+      // We need to close and flush the decoder on the last chunk even if
+      // we have no more bytes and `decode` will throw if not given an
+      // array buffer.
+      value = value || new Uint8Array(0);
+      const text = decoder.decode(value, {stream: !done});
+
+      if (text) {
+        writer.write(text);
+      }
+
+      if (!done) {
+        return reader.read().then(handleChunk);
+      }
+
+      writer.close();
+    });
+  } else {
+    // Fallback case waits for the complete response before writing.
+    response.text().then((text) => {
+      hasContentDeferred.resolve(!!text);
+      writer.write(text);
+      writer.close();
+    });
+  }
+
+  return hasContentDeferred.promise;
+}
diff --git a/src/core/dom/weakref.js b/src/core/dom/weakref.js
new file mode 100644
index 0000000000000..213ef27c09169
--- /dev/null
+++ b/src/core/dom/weakref.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * A `WeakRef` polyfill that works for DOM Elements only.
+ *
+ * NOTE, and this is a big NOTE, that the fallback implementation fails to
+ * `deref` an element if it is no longer in the respective document.
+ * Technically it could still be around, but for the purpose of this class
+ * we assume that the element is not longer reachable.
+ */
+export class DomBasedWeakRef {
+  /**
+   * @param {!Window} win
+   * @param {string} id
+   * @package
+   */
+  constructor(win, id) {
+    this.win = win;
+    /** @private @const */
+    this.id_ = id;
+  }
+
+  /**
+   * Returns a WeakRef. Uses this implementation if the real WeakRef class
+   * is not available.
+   * @param {!Window} win
+   * @param {!Element} element
+   * @return {!WeakRef<!Element>|!DomBasedWeakRef<!Element>}
+   */
+  static make(win, element) {
+    if (win.WeakRef) {
+      return new win.WeakRef(element);
+    }
+    if (!element.id) {
+      const index = (win.__AMP_WEAKREF_ID = (win.__AMP_WEAKREF_ID || 0) + 1);
+      element.id = 'weakref-id-' + index;
+    }
+    return new DomBasedWeakRef(win, element.id);
+  }
+
+  /** @return {!Element|undefined} */
+  deref() {
+    return this.win.document.getElementById(this.id_) || undefined;
+  }
+}
diff --git a/src/core/dom/web-components.extern.js b/src/core/dom/web-components.extern.js
new file mode 100644
index 0000000000000..c4d427439337e
--- /dev/null
+++ b/src/core/dom/web-components.extern.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview Externs for values expected to be on elements when Shadow DOM
+ * is supported
+ * @externs
+ */
+
+Element.prototype.attachShadow;
+Element.prototype.createShadowRoot;
diff --git a/src/web-components.js b/src/core/dom/web-components.js
similarity index 91%
rename from src/web-components.js
rename to src/core/dom/web-components.js
index 6bc0a62b058f4..13f2688f035ed 100644
--- a/src/web-components.js
+++ b/src/core/dom/web-components.js
@@ -16,7 +16,6 @@
 
 /**
  * Possible versions of Shadow DOM spec
- * @const
  * @enum {string}
  */
 export const ShadowDomVersion = {
@@ -26,7 +25,7 @@ export const ShadowDomVersion = {
 };
 
 /**
- * @type {ShadowDomVersion|undefined}
+ * @type {!ShadowDomVersion|undefined}
  * @visibleForTesting
  */
 let shadowDomSupportedVersion;
@@ -38,7 +37,7 @@ let shadowDomSupportedVersion;
 let shadowCssSupported;
 
 /**
- * @param {ShadowDomVersion|undefined} val
+ * @param {!ShadowDomVersion|undefined} val
  * @visibleForTesting
  */
 export function setShadowDomSupportedVersionForTesting(val) {
@@ -88,8 +87,8 @@ function isNative(func) {
 
 /**
  * Returns the supported version of Shadow DOM spec.
- * @param {?typeof Element=} opt_elementClass optional for testing
- * @return {ShadowDomVersion}
+ * @param {typeof Element=} opt_elementClass optional for testing
+ * @return {!ShadowDomVersion}
  */
 export function getShadowDomSupportedVersion(opt_elementClass) {
   if (shadowDomSupportedVersion === undefined) {
@@ -103,8 +102,8 @@ export function getShadowDomSupportedVersion(opt_elementClass) {
 /**
  * Returns shadow dom version.
  *
- * @param {?typeof Element=} element
- * @return {ShadowDomVersion}
+ * @param {!typeof Element} element
+ * @return {!ShadowDomVersion}
  */
 function getShadowDomVersion(element) {
   if (!!element.prototype.attachShadow) {
diff --git a/src/core/error.extern.js b/src/core/error.extern.js
new file mode 100644
index 0000000000000..252c4169f819a
--- /dev/null
+++ b/src/core/error.extern.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview Externs for extra properties expected on errors.
+ * @externs
+ */
+
+/** @type {undefined|Array<*>} */
+Error.prototype.messageArray;
diff --git a/src/core/error/index.js b/src/core/error/index.js
new file mode 100644
index 0000000000000..bbc4a93b9808a
--- /dev/null
+++ b/src/core/error/index.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * Some exceptions (DOMException, namely) have read-only message.
+ * @param {!Error} error
+ * @return {!Error};
+ */
+export function duplicateErrorIfNecessary(error) {
+  const messageProperty = Object.getOwnPropertyDescriptor(error, 'message');
+  if (messageProperty?.writable) {
+    return error;
+  }
+
+  const {message, stack} = error;
+  const e = new Error(message);
+  // Copy all the extraneous things we attach.
+  for (const prop in error) {
+    e[prop] = error[prop];
+  }
+  // Ensure these are copied.
+  e.stack = stack;
+  return e;
+}
+
+/**
+ * @param {...*} var_args
+ * @return {!Error}
+ * @visibleForTesting
+ */
+export function createErrorVargs(var_args) {
+  let error = null;
+  let message = '';
+  for (const arg of arguments) {
+    if (arg instanceof Error && !error) {
+      error = duplicateErrorIfNecessary(arg);
+    } else {
+      if (message) {
+        message += ' ';
+      }
+      message += arg;
+    }
+  }
+
+  if (!error) {
+    error = new Error(message);
+  } else if (message) {
+    error.message = message + ': ' + error.message;
+  }
+  return error;
+}
+
+/**
+ * Rethrows the error without terminating the current context. This preserves
+ * whether the original error designation is a user error or a dev error.
+ * @param {...*} var_args
+ */
+export function rethrowAsync(var_args) {
+  const error = createErrorVargs.apply(null, arguments);
+  setTimeout(() => {
+    // __AMP_REPORT_ERROR is installed globally per window in the entry point.
+    // It may not exist for Bento components without the runtime.
+    self.__AMP_REPORT_ERROR?.(error);
+    throw error;
+  });
+}
+
+/**
+ * Executes the provided callback in a try/catch and rethrows any errors
+ * asynchronously.
+ *
+ * @param {function(...*):T} callback
+ * @param {...*} args
+ * @return {T}
+ * @template T
+ */
+export function tryCallback(callback, ...args) {
+  try {
+    return callback.apply(null, args);
+  } catch (e) {
+    rethrowAsync(e);
+  }
+}
diff --git a/src/core/error/message-helpers.js b/src/core/error/message-helpers.js
new file mode 100644
index 0000000000000..145409f06fa96
--- /dev/null
+++ b/src/core/error/message-helpers.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {isElement} from '../types';
+
+/**
+ * Triple zero width space.
+ *
+ * This is added to user error messages, so that we can later identify
+ * them, when the only thing that we have is the message. This is the
+ * case in many browsers when the global exception handler is invoked.
+ *
+ * @const {string}
+ */
+export const USER_ERROR_SENTINEL = '\u200B\u200B\u200B';
+
+/**
+ * Converts an element to a readable string; all other types are unchanged.
+ * TODO(rcebulko): Unify with log.js
+ * @param {*} val
+ * @return {*}
+ */
+export function elementStringOrPassThru(val) {
+  // Do check equivalent to `val instanceof Element` without cross-window bug
+  if (isElement(val)) {
+    val = /** @type {Element} */ (val);
+    return val.tagName.toLowerCase() + (val.id ? `#${val.id}` : '');
+  }
+  return val;
+}
+
+/**
+ * Tests if an error message contains the user sentinel.
+ * @param {string} message
+ * @return {boolean} Whether this message was a user error.
+ */
+export function isUserErrorMessage(message) {
+  return message.indexOf(USER_ERROR_SENTINEL) >= 0;
+}
+
+/**
+ * Strips the user error sentinel from an error message.
+ * @param {string} message
+ * @return {string} The new message without USER_ERROR_SENTINEL
+ */
+export function stripUserError(message) {
+  return message.replace(USER_ERROR_SENTINEL, '');
+}
diff --git a/src/core/loading-instructions.js b/src/core/loading-instructions.js
new file mode 100644
index 0000000000000..9715d80127d04
--- /dev/null
+++ b/src/core/loading-instructions.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * An expanded set of loading instructions based on
+ * https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading.
+ *
+ * Only `UNLOAD` is not defined by the "Lazy loading" spec at this time. It's
+ * added here because it supersedes all other loading instructions in AMP.
+ *
+ * @enum {string}
+ */
+export const Loading = {
+  /**
+   * If parent is available, fallback to its loading strategy (e.g. based on
+   * whether the document is visible or not).
+   * If parent is not available, proceed with loading at your own discretion.
+   */
+  AUTO: 'auto',
+
+  /**
+   * Do not load independently. Wait for the caller to start loading manually.
+   */
+  LAZY: 'lazy',
+
+  /**
+   * Proceed with loading at the earliest convenience.
+   */
+  EAGER: 'eager',
+
+  /**
+   * Force unload if possible.
+   */
+  UNLOAD: 'unload',
+};
+
+/** @const {!Array<!Loading>} */
+const ORDER = [Loading.AUTO, Loading.LAZY, Loading.EAGER, Loading.UNLOAD];
+
+/** @const {!Object<string, number>} */
+const MAP = {
+  [Loading.AUTO]: 0,
+  [Loading.LAZY]: 1,
+  [Loading.EAGER]: 2,
+  [Loading.UNLOAD]: 3,
+};
+
+/**
+ * Returns the loading instruction with a higher priority. The priority
+ * order is auto -> lazy -> eager -> unload.
+ *
+ * @param {!Loading|string} v1
+ * @param {!Loading|string} v2
+ * @return {!Loading}
+ */
+export function reducer(v1, v2) {
+  const ordinal1 = MAP[v1] || 0;
+  const ordinal2 = MAP[v2] || 0;
+  const ordinal = Math.max(ordinal1, ordinal2);
+  return ORDER[ordinal];
+}
diff --git a/src/core/math/id-generator.js b/src/core/math/id-generator.js
new file mode 100644
index 0000000000000..123ecf614e7d7
--- /dev/null
+++ b/src/core/math/id-generator.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * Returns the "next" function that generates a new sequential ID on each call.
+ * @return {function():string}
+ */
+export function sequentialIdGenerator() {
+  let counter = 0;
+  return () => String(++counter);
+}
+
+/**
+ * Returns a function that generates a random id in string format.  The random
+ * id will be an integer from 0 to maxValue (non-inclusive).
+ * @param {number} maxValue
+ * @return {function():string}
+ */
+export function randomIdGenerator(maxValue) {
+  return () => String(Math.floor(Math.random() * maxValue));
+}
diff --git a/src/core/math/index.js b/src/core/math/index.js
new file mode 100644
index 0000000000000..2e2d6497ba4f1
--- /dev/null
+++ b/src/core/math/index.js
@@ -0,0 +1,166 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {devAssert} from '../assert';
+
+/**
+ * Maps a value in a first range to its equivalent in a second range
+ * Ex.: 5 in the range [0,10] gives 60 in the range[40,80]
+ *
+ * NOTE: lower/upper bounds on the source range are detected automatically,
+ * however the bounds on the target range are not altered (thus the target
+ * range could be decreasing).
+ * Ex1: 8 in the range [0, 10] gives 2 in the range [10, 0]
+ * Ex2: also, 8 in the range [10, 0] gives 2 in the range [10, 0]
+ *
+ * NOTE: Input value is enforced to be bounded inside the source range
+ * Ex1: -2 in the range [0, 10] is interpreted as 0 and thus gives 40 in [40,80]
+ * Ex2: 19 in the range [0, 5] is interpreted as 5 and thus gives 80 in [40,80]
+ *
+ * @param {number} val the value in the source range
+ * @param {number} min1 the lower bound of the source range
+ * @param {number} max1 the upper bound of the source range
+ * @param {number} min2 the lower bound of the target range
+ * @param {number} max2 the upper bound of the target range
+ * @return {number} the equivalent value in the target range
+ */
+export function mapRange(val, min1, max1, min2, max2) {
+  let max1Bound = max1;
+  let min1Bound = min1;
+  if (min1 > max1) {
+    max1Bound = min1;
+    min1Bound = max1;
+  }
+
+  if (val < min1Bound) {
+    val = min1Bound;
+  } else if (val > max1Bound) {
+    val = max1Bound;
+  }
+
+  return ((val - min1) * (max2 - min2)) / (max1 - min1) + min2;
+}
+
+/**
+ * Computes the modulus of values `a` and `b`.
+ *
+ * This is needed because the % operator in JavaScript doesn't implement
+ * modulus behavior as can be seen by the spec here:
+ * http://www.ecma-international.org/ecma-262/5.1/#sec-11.5.3.
+ * It instead is used to obtain the remainder of a division.
+ * This function uses the remainder (%) operator to determine the modulus.
+ * Derived from here:
+ * https://stackoverflow.com/questions/25726760/javascript-modular-arithmetic/47354356#47354356
+ *
+ * @param {number} a
+ * @param {number} b
+ * @return {number} returns the modulus of the two numbers.
+ * @example
+ *
+ * _.min(10, 5);
+ * // => 0
+ *
+ * _.mod(-1, 5);
+ * // => 4
+ */
+export function mod(a, b) {
+  return a > 0 && b > 0 ? a % b : ((a % b) + b) % b;
+}
+
+/**
+ * Restricts a number to be in the given min/max range. The minimum value must
+ * be less than or equal to the maximum value.
+ *
+ * Examples:
+ * clamp(0.5, 0, 1) -> 0.5
+ * clamp(1.5, 0, 1) -> 1
+ * clamp(-0.5, 0, 1) -> 0
+ *
+ * @param {number} val the value to clamp.
+ * @param {number} min the lower bound.
+ * @param {number} max the upper bound.
+ * @return {number} the clamped value.
+ */
+export function clamp(val, min, max) {
+  devAssert(min <= max, 'Minimum value is greater than the maximum.');
+  return Math.min(Math.max(val, min), max);
+}
+
+/**
+ * Returns value bound to min and max values +/- extent. The lower bound must
+ * be less than or equal to the upper bound.
+ * @param {number} val the value to bound.
+ * @param {number} min the lower bound.
+ * @param {number} max the upper bound
+ * @param {number} extent the allowed extent beyond the bounds.
+ * @return {number} the bounded value.
+ */
+export function boundValue(val, min, max, extent) {
+  devAssert(min <= max, 'Lower bound is greater than the upper bound.');
+  return clamp(val, min - extent, max + extent);
+}
+
+/**
+ * Returns the length of a vector given in X- and Y-coordinates.
+ * @param {number} deltaX distance in the X direction.
+ * @param {number} deltaY distance in the Y direction.
+ * @return {number} the magnitude of the vector.
+ */
+export function magnitude(deltaX, deltaY) {
+  return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+}
+
+/**
+ * Returns the distance between two points.
+ * @param {number} x1 X-coordinate of the first point.
+ * @param {number} y1 Y-coordinate of the first point.
+ * @param {number} x2 X-coordinate of the second point.
+ * @param {number} y2 Y-coordinate of the second point.
+ * @return {number} the distance between the two points.
+ */
+export function distance(x1, y1, x2, y2) {
+  return magnitude(x2 - x1, y2 - y1);
+}
+
+/**
+ * @param {number} centerX
+ * @param {number} centerY
+ * @param {number} radius
+ * @param {number} angleInDegrees
+ * @return {{
+ *  x: number,
+ *  y: number,
+ * }}
+ */
+export function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+
+  return {
+    x: centerX + radius * Math.cos(angleInRadians),
+    y: centerY + radius * Math.sin(angleInRadians),
+  };
+}
+
+/**
+ * Sums up the values of the given array and returns the result
+ * @param {Array<number>} values
+ * @return {number}
+ */
+export function sum(values) {
+  return values.reduce(function (a, b) {
+    return a + b;
+  });
+}
diff --git a/src/layout-rect.js b/src/core/math/layout-rect.js
similarity index 90%
rename from src/layout-rect.js
rename to src/core/math/layout-rect.js
index 522fd7f929f1c..ebc1fe4636ff4 100644
--- a/src/layout-rect.js
+++ b/src/core/math/layout-rect.js
@@ -14,6 +14,15 @@
  * limitations under the License.
  */
 
+/**
+ * TODO(rcebulko): Migrate the actual ViewportInterface into core or an extern.
+ * @typedef {{
+ *   getHeight: function(this:ViewportInterfaceDef):number,
+ *   getWidth: function(this:ViewportInterfaceDef):number,
+ * }}
+ */
+let ViewportInterfaceDef;
+
 /**
  * The structure that combines position and size for an element. The exact
  * interpretation of position and size depends on the use case.
@@ -31,6 +40,17 @@
  */
 export let LayoutRectDef;
 
+/**
+ * The structure that contains the size for an element. The exact
+ * interpretation of the size depends on the use case.
+ *
+ * @typedef {{
+ *   width: number,
+ *   height: number,
+ * }}
+ */
+export let LayoutSizeDef;
+
 /**
  * The structure that represents the margins of an Element.
  *
@@ -155,7 +175,7 @@ export function rectIntersection(var_args) {
  * Returns the position of r2 relative to r1
  * @param {!LayoutRectDef} r1
  * @param {!LayoutRectDef} r2
- * @return {RelativePositions}
+ * @return {!RelativePositions}
  */
 export function layoutRectsRelativePos(r1, r2) {
   if (r1.top < r2.top) {
@@ -171,9 +191,9 @@ export function layoutRectsRelativePos(r1, r2) {
  * Determines if any portion of a layoutBox would be onscreen in the given
  * viewport, when scrolled to the specified position.
  * @param {!LayoutRectDef} layoutBox
- * @param {!./service/viewport/viewport-interface.ViewportInterface} viewport
+ * @param {!ViewportInterfaceDef} viewport
  * @param {number} scrollPos
- * @return {RelativePositions}
+ * @return {!RelativePositions}
  */
 export function layoutPositionRelativeToScrolledViewport(
   layoutBox,
@@ -280,3 +300,12 @@ export function cloneLayoutMarginsChangeDef(marginsChange) {
     right: marginsChange.right,
   };
 }
+
+/**
+ * @param {!LayoutRectDef|!ClientRect|!DOMRect} rect
+ * @return {!LayoutSizeDef}
+ */
+export function layoutSizeFromRect(rect) {
+  const {height, width} = rect;
+  return {width, height};
+}
diff --git a/src/core/minified-mode.js b/src/core/minified-mode.js
new file mode 100644
index 0000000000000..dc76afc2e4a7d
--- /dev/null
+++ b/src/core/minified-mode.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// Magic constant that is replaced by babel.
+// IS_MINIFIED is always replaced with true when closure compiler is used
+const IS_MINIFIED = false;
+
+/**
+ * Returns true whenever closure compiler is used.
+ * @return {boolean}
+ */
+export function isMinifiedMode() {
+  return IS_MINIFIED;
+}
diff --git a/src/core/types/array.js b/src/core/types/array.js
new file mode 100644
index 0000000000000..faba24f7978ba
--- /dev/null
+++ b/src/core/types/array.js
@@ -0,0 +1,178 @@
+/**
+ * Copyright 2016 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.
+ */
+
+/**
+ * Converts an array-like object to an array.
+ * @param {?IArrayLike<T>|string} arrayLike
+ * @return {!Array<T>}
+ * @template T
+ */
+export function toArray(arrayLike) {
+  return arrayLike ? Array.prototype.slice.call(arrayLike) : [];
+}
+
+/**
+ * Determines if value is actually an Array.
+ * @param {*} value
+ * @return {boolean}
+ */
+export const {isArray} = Array;
+
+/**
+ * If the specified argument is an array, it's returned as is. If it's a
+ * single item, the array containing this item is created and returned.
+ *
+ * The double-template pattern here solves a bug where CC can be passed a value
+ * with declared type {string|!Array<string>} and return a value with a type of
+ * {!Array<string|Array<string>>}.
+ *
+ * @param {!Array<T>|S} arrayOrSingleItem
+ * @return {!Array<T>|!Array<S>}
+ * @template S
+ * @template T
+ */
+export function arrayOrSingleItemToArray(arrayOrSingleItem) {
+  return isArray(arrayOrSingleItem)
+    ? /** @type {!Array<T>} */ (arrayOrSingleItem)
+    : [/** @type {!S} */ (arrayOrSingleItem)];
+}
+
+/**
+ * Compares if two arrays contains exactly same elements of same number
+ * of same order. Note that it does NOT handle NaN case as expected.
+ *
+ * @param {!Array<T>} arr1
+ * @param {!Array<T>} arr2
+ * @return {boolean}
+ * @template T
+ */
+export function areEqualOrdered(arr1, arr2) {
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+  for (let i = 0; i < arr1.length; i++) {
+    if (arr1[i] !== arr2[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Removes elements that shouldRemove returns true for from the array.
+ *
+ * @param {!Array<T>} array
+ * @param {function(T, number, !Array<T>):boolean} shouldRemove
+ * @return {!Array<T>}
+ * @template T
+ */
+export function remove(array, shouldRemove) {
+  const removed = [];
+  let index = 0;
+  for (let i = 0; i < array.length; i++) {
+    const item = array[i];
+    if (shouldRemove(item, i, array)) {
+      removed.push(item);
+    } else {
+      if (index < i) {
+        array[index] = item;
+      }
+      index++;
+    }
+  }
+  if (index < array.length) {
+    array.length = index;
+  }
+  return removed;
+}
+
+/**
+ * Returns the index of the first element matching the predicate.
+ * Like Array#findIndex.
+ *
+ * @param {!Array<T>} array
+ * @param {function(T, number, !Array<T>):boolean} predicate
+ * @return {number}
+ * @template T
+ */
+export function findIndex(array, predicate) {
+  for (let i = 0; i < array.length; i++) {
+    if (predicate(array[i], i, array)) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+/**
+ * Converts the given iterator to an array.
+ *
+ * @param {!Iterator<T>} iterator
+ * @return {Array<T>}
+ * @template T
+ */
+export function fromIterator(iterator) {
+  const array = [];
+  for (let e = iterator.next(); !e.done; e = iterator.next()) {
+    array.push(e.value);
+  }
+  return array;
+}
+
+/**
+ * Adds item to array if it is not already present.
+ *
+ * @param {Array<T>} array
+ * @param {T} item
+ * @return {boolean}
+ * @template T
+ */
+export function pushIfNotExist(array, item) {
+  if (array.indexOf(item) < 0) {
+    array.push(item);
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Removes the first matching item in the array. Returns `true` if the array
+ * has changed.
+ *
+ * @param {!Array<T>} array
+ * @param {T} item
+ * @return {boolean}
+ * @template T
+ */
+export function removeItem(array, item) {
+  const index = array.indexOf(item);
+  if (index == -1) {
+    return false;
+  }
+  array.splice(index, 1);
+  return true;
+}
+
+/**
+ * Returns the last item in an array.
+ *
+ * @param {Array<T>} array
+ * @template T
+ * @return {?T}
+ */
+export function lastItem(array) {
+  return array[array.length - 1];
+}
diff --git a/src/core/types/date.js b/src/core/types/date.js
new file mode 100644
index 0000000000000..da41bfc958aec
--- /dev/null
+++ b/src/core/types/date.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {isString} from './string';
+
+/** @fileoverview helpers for dealing with dates and times. */
+
+/**
+ * Absolute time in milliseconds.
+ * @typedef {number}
+ */
+export let TimestampDef;
+
+/**
+ * Parses the date using the `Date.parse()` rules. Additionally supports the
+ * keyword "now" that indicates the "current date/time". Returns either a
+ * valid epoch value or null.
+ *
+ * @param {?string|undefined} s
+ * @return {?TimestampDef}
+ */
+export function parseDate(s) {
+  if (!s) {
+    return null;
+  }
+  if (s.toLowerCase() === 'now') {
+    return Date.now();
+  }
+  const parsed = Date.parse(s);
+  return isNaN(parsed) ? null : parsed;
+}
+
+/**
+ * Converts various date formats into a timestamp in ms.
+ * @param {!Date|number|string} value
+ * @return {?TimestampDef}
+ */
+export function getDate(value) {
+  if (!value) {
+    return null;
+  }
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isString(value)) {
+    return parseDate(/** @type {string} */ (value));
+  }
+  value = /** @type {!Date} */ (value);
+  return value.getTime();
+}
diff --git a/src/core/types/enum.js b/src/core/types/enum.js
new file mode 100644
index 0000000000000..a01ad8af9589d
--- /dev/null
+++ b/src/core/types/enum.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * Checks whether `val` is a valid value of `enumObj`.
+ *
+ * @param {!Object<T>} enumObj
+ * @param {T} val
+ * @return {boolean}
+ * @template T
+ */
+export function isEnumValue(enumObj, val) {
+  for (const k in enumObj) {
+    if (enumObj[k] === val) {
+      return true;
+    }
+  }
+  return false;
+}
diff --git a/src/core/types/function.extern.js b/src/core/types/function.extern.js
new file mode 100644
index 0000000000000..0a85bb51e3303
--- /dev/null
+++ b/src/core/types/function.extern.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview Global type definitions related to functions.
+ * @externs
+ */
+
+/**
+ * This type signifies a callback that can be called to remove a listener.
+ * @typedef {function()}
+ */
+let UnlistenDef;
diff --git a/src/exponential-backoff.js b/src/core/types/function/exponential-backoff.js
similarity index 100%
rename from src/exponential-backoff.js
rename to src/core/types/function/exponential-backoff.js
diff --git a/src/core/types/function/index.js b/src/core/types/function/index.js
new file mode 100644
index 0000000000000..a8f4b46c6f0ff
--- /dev/null
+++ b/src/core/types/function/index.js
@@ -0,0 +1,137 @@
+/**
+ * Copyright 2017 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.
+ */
+
+/** @fileoverview Helpers to wrap functions. */
+
+/**
+ * Creates a function that is evaluated only once and returns the cached result
+ * subsequently.
+ *
+ * Please note that `once` only takes the function definition into account,
+ * so it will return the same cached value even when the arguments are
+ * different.
+ *
+ * @param {function(...):T} fn
+ * @return {function(...):T}
+ * @template T
+ */
+export function once(fn) {
+  let evaluated = false;
+  let retValue = null;
+  let callback = fn;
+  return (...args) => {
+    if (!evaluated) {
+      retValue = callback.apply(self, args);
+      evaluated = true;
+      callback = null; // GC
+    }
+    return retValue;
+  };
+}
+
+/**
+ * Wraps a given callback and applies a rate limit.
+ * It throttles the calls so that no consequent calls have time interval
+ * smaller than the given minimal interval.
+ *
+ * @param {!Window} win
+ * @param {function(...T):R} callback
+ * @param {number} minInterval the minimum time interval in millisecond
+ * @return {function(...T)}
+ * @template T
+ * @template R
+ */
+export function throttle(win, callback, minInterval) {
+  let locker = 0;
+  let nextCallArgs = null;
+
+  /**
+   * @param {!Object} args
+   */
+  function fire(args) {
+    nextCallArgs = null;
+    // Lock the fire for minInterval milliseconds
+    locker = win.setTimeout(waiter, minInterval);
+
+    callback.apply(null, args);
+  }
+
+  /**
+   * Waiter function
+   */
+  function waiter() {
+    locker = 0;
+    // If during the period there're invocations queued up, fire once.
+    if (nextCallArgs) {
+      fire(nextCallArgs);
+    }
+  }
+
+  return function (...args) {
+    if (locker) {
+      nextCallArgs = args;
+    } else {
+      fire(args);
+    }
+  };
+}
+
+/**
+ * Wraps a given callback and applies a wait timer, so that minInterval
+ * milliseconds must pass since the last call before the callback is actually
+ * invoked.
+ *
+ * @param {!Window} win
+ * @param {function(...T):R} callback
+ * @param {number} minInterval the minimum time interval in millisecond
+ * @return {function(...T)}
+ * @template T
+ * @template R
+ */
+export function debounce(win, callback, minInterval) {
+  let locker = 0;
+  let timestamp = 0;
+  let nextCallArgs = null;
+
+  /**
+   * @param {?Array} args
+   */
+  function fire(args) {
+    nextCallArgs = null;
+    callback.apply(null, args);
+  }
+
+  /**
+   * Wait function for debounce
+   */
+  function waiter() {
+    locker = 0;
+    const remaining = minInterval - (win.Date.now() - timestamp);
+    if (remaining > 0) {
+      locker = win.setTimeout(waiter, remaining);
+    } else {
+      fire(nextCallArgs);
+    }
+  }
+
+  return function (...args) {
+    timestamp = win.Date.now();
+    nextCallArgs = args;
+    if (!locker) {
+      locker = win.setTimeout(waiter, minInterval);
+    }
+  };
+}
diff --git a/src/core/types/index.js b/src/core/types/index.js
new file mode 100644
index 0000000000000..7062d28c67daf
--- /dev/null
+++ b/src/core/types/index.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// Export all type-checking helpers for convenience
+export {isArray} from './array';
+export {isEnumValue} from './enum';
+export {isString} from './string';
+export {isObject} from './object';
+
+/**
+ * Determines if value is an ELement
+ * @param {*} value
+ * @return {boolean}
+ */
+export function isElement(value) {
+  return value?.nodeType == /* Node.ELEMENT_NODE */ 1;
+}
+
+/**
+ * Determines if value is of number type and finite.
+ * NaN and Infinity are not considered a finite number.
+ * String numbers are not considered numbers.
+ * @param {*} value
+ * @return {boolean}
+ */
+export function isFiniteNumber(value) {
+  return typeof value === 'number' && isFinite(value);
+}
diff --git a/src/core/types/object/index.js b/src/core/types/object/index.js
new file mode 100644
index 0000000000000..fd8177272ef9c
--- /dev/null
+++ b/src/core/types/object/index.js
@@ -0,0 +1,245 @@
+/**
+ * Copyright 2015 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.
+ */
+
+/* @const */
+const {hasOwnProperty: hasOwn_, toString: toString_} = Object.prototype;
+
+/**
+ * Determines if value is actually an Object.
+ * @param {*} value
+ * @return {boolean}
+ */
+export function isObject(value) {
+  return toString_.call(value) === '[object Object]';
+}
+
+/**
+ * Returns a map-like object.
+ * If opt_initial is provided, copies its own properties into the
+ * newly created object.
+ * @param {T=} opt_initial This should typically be an object literal.
+ * @return {T}
+ * @template T
+ */
+export function map(opt_initial) {
+  const obj = Object.create(null);
+  if (opt_initial) {
+    Object.assign(obj, opt_initial);
+  }
+  return obj;
+}
+
+/**
+ * Return an empty JsonObject or makes the passed in object literal
+ * an JsonObject.
+ * The JsonObject type is just a simple object that is at-dict.
+ * See
+ * https://github.com/google/closure-compiler/wiki/@struct-and-@dict-Annotations
+ * for what a dict is type-wise.
+ * The linter enforces that the argument is, in fact, at-dict like.
+ * @param {!Object=} opt_initial
+ * @return {!JsonObject}
+ */
+export function dict(opt_initial) {
+  // We do not copy. The linter enforces that the passed in object is a literal
+  // and thus the caller cannot have a reference to it.
+  return /** @type {!JsonObject} */ (opt_initial || {});
+}
+
+/**
+ * Checks if the given key is a property in the map.
+ *
+ * @param {T}  obj a map like property.
+ * @param {string}  key
+ * @return {boolean}
+ * @template T
+ */
+export function hasOwn(obj, key) {
+  return hasOwn_.call(obj, key);
+}
+
+/**
+ * Returns obj[key] iff key is obj's own property (is not inherited).
+ * Otherwise, returns undefined.
+ *
+ * @param {Object} obj
+ * @param {string} key
+ * @return {*}
+ */
+export function ownProperty(obj, key) {
+  if (hasOwn(obj, key)) {
+    return obj[key];
+  } else {
+    return undefined;
+  }
+}
+
+/**
+ * Deep merges source into target.
+ *
+ * @param {!Object} target
+ * @param {!Object} source
+ * @param {number} depth The maximum merge depth. If exceeded, Object.assign
+ *                       will be used instead.
+ * @return {!Object}
+ * @throws {Error} If source contains a circular reference.
+ * Note: Only nested objects are deep-merged, primitives and arrays are not.
+ */
+export function deepMerge(target, source, depth = 10) {
+  // Keep track of seen objects to detect recursive references.
+  const seen = [];
+
+  /** @type {!Array<{t: !Object, s: !Object, d: number}>} */
+  const queue = [];
+  queue.push({t: target, s: source, d: 0});
+
+  // BFS to ensure objects don't have recursive references at shallower depths.
+  while (queue.length > 0) {
+    const {d, s, t} = queue.shift();
+    if (seen.includes(s)) {
+      throw new Error('Source object has a circular reference.');
+    }
+    seen.push(s);
+    if (t === s) {
+      continue;
+    }
+    if (d > depth) {
+      Object.assign(t, s);
+      continue;
+    }
+    for (const key of Object.keys(s)) {
+      const newValue = s[key];
+      // Perform a deep merge IFF both target and source have the same key
+      // whose corresponding values are objects.
+      if (hasOwn(t, key)) {
+        const oldValue = t[key];
+        if (isObject(newValue) && isObject(oldValue)) {
+          queue.push({t: oldValue, s: newValue, d: d + 1});
+          continue;
+        }
+      }
+      t[key] = newValue;
+    }
+  }
+  return target;
+}
+
+/**
+ * @param {!Object} o An object to remove properties from
+ * @param {!Array<string>} props A list of properties to remove from the Object
+ * @return {!Object} An object with the given properties removed
+ */
+export function omit(o, props) {
+  return Object.keys(o).reduce((acc, key) => {
+    if (!props.includes(key)) {
+      acc[key] = o[key];
+    }
+    return acc;
+  }, {});
+}
+
+/**
+ * @param {!Object|null|undefined} o1
+ * @param {!Object|null|undefined} o2
+ * @return {boolean}
+ */
+export function objectsEqualShallow(o1, o2) {
+  if (o1 == null || o2 == null) {
+    // Null is only equal to null, and undefined to undefined.
+    return o1 === o2;
+  }
+
+  for (const k in o1) {
+    if (o1[k] !== o2[k]) {
+      return false;
+    }
+  }
+  for (const k in o2) {
+    if (o2[k] !== o1[k]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * @param {T} obj
+ * @param {string} prop
+ * @param {function(T, string):R} factory
+ * @return {R}
+ * @template T,R
+ */
+export function memo(obj, prop, factory) {
+  let result = /** @type {?R} */ (obj[prop]);
+  if (result === undefined) {
+    result = factory(obj, prop);
+    obj[prop] = result;
+  }
+  return result;
+}
+
+/**
+ * Recreates objects with prototype-less copies.
+ * @param {!JsonObject} obj
+ * @return {!JsonObject}
+ */
+export function recreateNonProtoObject(obj) {
+  const copy = map();
+  for (const k in obj) {
+    if (!hasOwn(obj, k)) {
+      continue;
+    }
+    const v = obj[k];
+    copy[k] = isObject(v) ? recreateNonProtoObject(v) : v;
+  }
+  return /** @type {!JsonObject} */ (copy);
+}
+
+/**
+ * Returns a value from an object for a field-based expression. The expression
+ * is a simple nested dot-notation of fields, such as `field1.field2`. If any
+ * field in a chain does not exist or is not an object or array, the returned
+ * value will be `undefined`.
+ *
+ * @param {!JsonObject} obj
+ * @param {string} expr
+ * @return {*}
+ */
+export function getValueForExpr(obj, expr) {
+  // The `.` indicates "the object itself".
+  if (expr == '.') {
+    return obj;
+  }
+  // Otherwise, navigate via properties.
+  const parts = expr.split('.');
+  let value = obj;
+  for (const part of parts) {
+    if (
+      part &&
+      value &&
+      value[part] !== undefined &&
+      typeof value == 'object' &&
+      hasOwn(value, part)
+    ) {
+      value = value[part];
+      continue;
+    }
+    value = undefined;
+    break;
+  }
+  return value;
+}
diff --git a/src/core/types/object/json.extern.js b/src/core/types/object/json.extern.js
new file mode 100644
index 0000000000000..a66e76385630d
--- /dev/null
+++ b/src/core/types/object/json.extern.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview Externs for JSON types and helpers
+ * @externs
+ */
+
+/**
+ * A type for Objects that can be JSON serialized or that come from
+ * JSON serialization. Requires the objects fields to be accessed with
+ * bracket notation object['name'] to make sure the fields do not get
+ * obfuscated.
+ *
+ * Marking this as a constructor allows other types to extend it.
+ * Marking this as a dict tells the compiler to check that properties are only
+ * accessed using bracket notation.
+ * @constructor
+ * @dict
+ */
+let JsonObject;
diff --git a/src/core/types/object/json.js b/src/core/types/object/json.js
new file mode 100644
index 0000000000000..c90b886cff106
--- /dev/null
+++ b/src/core/types/object/json.js
@@ -0,0 +1,176 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {isArray} from '../array';
+
+/**
+ * @fileoverview This module declares JSON types as defined in the
+ * {@link http://json.org/}.
+ */
+
+// NOTE Type are changed to {*} because of
+// https://github.com/google/closure-compiler/issues/1999
+
+/**
+ * JSON scalar. It's either string, number or boolean.
+ * @typedef {string|number|boolean|null}
+ */
+let JSONScalarDef;
+
+/**
+ * JSON object. It's a map with string keys and JSON values.
+ * @typedef {!Object<string, ?*>} (* should be JSONValueDef)
+ */
+let JSONObjectDef;
+
+/**
+ * JSON array. It's an array with JSON values.
+ * @typedef {!Array<?*>} (* should be JSONValueDef)
+ */
+let JSONArrayDef;
+
+/**
+ * JSON value. It's either a scalar, an object or an array.
+ * @typedef {!JSONScalarDef|!JSONObjectDef|!JSONArrayDef}
+ */
+let JSONValueDef;
+
+/**
+ * @typedef {{
+ *   YOU_MUST_USE: string,
+ *   jsonLiteral: function(),
+ *   TO_MAKE_THIS_TYPE: string,
+ * }}
+ */
+let InternalJsonLiteralTypeDef;
+
+/**
+ * Simple wrapper around JSON.parse that casts the return value
+ * to JsonObject.
+ * Create a new wrapper if an array return value is desired.
+ * @param {string} json JSON string to parse
+ * @return {?JsonObject} May be extend to parse arrays.
+ */
+export function parseJson(json) {
+  return /** @type {?JsonObject} */ (JSON.parse(json));
+}
+
+/**
+ * Parses the given `json` string without throwing an exception if not valid.
+ * Returns `undefined` if parsing fails.
+ * Returns the `Object` corresponding to the JSON string when parsing succeeds.
+ * @param {string} json JSON string to parse
+ * @param {function(!Error)=} opt_onFailed Optional function that will be called
+ *     with the error if parsing fails.
+ * @return {?JsonObject} May be extend to parse arrays.
+ */
+export function tryParseJson(json, opt_onFailed) {
+  try {
+    return parseJson(json);
+  } catch (e) {
+    opt_onFailed?.(e);
+    return null;
+  }
+}
+
+/**
+ * Deeply checks strict equality of items in nested arrays and objects.
+ *
+ * @param {JSONValueDef} a
+ * @param {JSONValueDef} b
+ * @param {number} depth The maximum depth. Must be finite.
+ * @return {boolean}
+ * @throws {Error} If depth argument is not finite.
+ */
+export function deepEquals(a, b, depth = 5) {
+  if (!isFinite(depth) || depth < 0) {
+    throw new Error('Invalid depth: ' + depth);
+  }
+  if (a === b) {
+    return true;
+  }
+  /** @type {!Array<{a: JSONValueDef, b: JSONValueDef, depth: number}>} */
+  const queue = [{a, b, depth}];
+  while (queue.length > 0) {
+    const {a, b, depth} = queue.shift();
+    // Only check deep equality if depth > 0.
+    if (depth > 0) {
+      if (typeof a !== typeof b) {
+        return false;
+      } else if (isArray(a) && isArray(b)) {
+        if (a.length !== b.length) {
+          return false;
+        }
+        for (let i = 0; i < a.length; i++) {
+          queue.push({a: a[i], b: b[i], depth: depth - 1});
+        }
+        continue;
+      } else if (a && b && typeof a === 'object' && typeof b === 'object') {
+        const keysA = Object.keys(a);
+        const keysB = Object.keys(b);
+        if (keysA.length !== keysB.length) {
+          return false;
+        }
+        for (const k of keysA) {
+          queue.push({a: a[k], b: b[k], depth: depth - 1});
+        }
+        continue;
+      }
+    }
+    // If we get here, then depth == 0 or (a, b) are primitives.
+    if (a !== b) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * This helper function handles configurations specified in a JSON format.
+ *
+ * It allows the configuration is to be written in plain JS (which has better
+ * dev ergonomics like comments and trailing commas), and allows the
+ * configuration to be transformed into an efficient JSON-parsed representation
+ * in the dist build. See https://v8.dev/blog/cost-of-javascript-2019#json
+ *
+ * @param {!Object} obj
+ * @return {!JsonObject}
+ */
+export function jsonConfiguration(obj) {
+  return /** @type {!JsonObject} */ (obj);
+}
+
+/**
+ * This converts an Object into a suitable type to be used in `includeJsonLiteral`.
+ * This doesn't actually do any conversion, it only changes the closure type.
+ *
+ * @param {?JSONValueDef} value
+ * @return {!InternalJsonLiteralTypeDef}
+ */
+export function jsonLiteral(value) {
+  return /** @type {!InternalJsonLiteralTypeDef} */ (value);
+}
+
+/**
+ * Allows inclusion of a variable (that's wrapped in a jsonLiteral
+ * call) to be included inside a jsonConfiguration.
+ *
+ * @param {!InternalJsonLiteralTypeDef} value
+ * @return {*}
+ */
+export function includeJsonLiteral(value) {
+  return value;
+}
diff --git a/src/utils/base64.js b/src/core/types/string/base64.js
similarity index 100%
rename from src/utils/base64.js
rename to src/core/types/string/base64.js
diff --git a/src/utils/bytes.js b/src/core/types/string/bytes.js
similarity index 91%
rename from src/utils/bytes.js
rename to src/core/types/string/bytes.js
index 5d10ceae64aa3..b51007bdeaabe 100644
--- a/src/utils/bytes.js
+++ b/src/core/types/string/bytes.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {devAssert} from '../log';
+import {devAssert} from '../../assert';
 
 /**
  * Interpret a byte array as a UTF-8 string.
@@ -100,16 +100,21 @@ export function bytesToUInt32(bytes) {
  * @return {?Uint8Array}
  */
 export function getCryptoRandomBytesArray(win, length) {
+  let {crypto} = win;
+
   // Support IE 11
-  const cryptoLib = /** @type {!webCrypto.Crypto|undefined} */ (win.crypto ||
-    win.msCrypto);
-  if (!cryptoLib || !cryptoLib.getRandomValues) {
-    return null;
+  if (!IS_ESM) {
+    crypto = /** @type {!webCrypto.Crypto|undefined} */ (
+      crypto || win.msCrypto
+    );
+    if (!crypto || !crypto.getRandomValues) {
+      return null;
+    }
   }
 
   // Widely available in browsers we support:
   // http://caniuse.com/#search=getRandomValues
   const uint8array = new Uint8Array(length);
-  cryptoLib.getRandomValues(uint8array);
+  crypto.getRandomValues(uint8array);
   return uint8array;
 }
diff --git a/src/core/types/string/index.js b/src/core/types/string/index.js
new file mode 100644
index 0000000000000..5ba222884d35f
--- /dev/null
+++ b/src/core/types/string/index.js
@@ -0,0 +1,221 @@
+/**
+ * Copyright 2015 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.
+ */
+
+/**
+ * @param {string} _match
+ * @param {string} character
+ * @return {string}
+ */
+function toUpperCase(_match, character) {
+  return character.toUpperCase();
+}
+
+/**
+ * @param {string} match
+ * @return {string}
+ */
+function prependDashAndToLowerCase(match) {
+  return '-' + match.toLowerCase();
+}
+
+/**
+ * @param {string} name Attribute name containing dashes.
+ * @return {string} Dashes removed and successive character sent to upper case.
+ * visibleForTesting
+ */
+export function dashToCamelCase(name) {
+  return name.replace(/-([a-z])/g, toUpperCase);
+}
+
+/**
+ * Converts a string that is in camelCase to one that is in dash-case.
+ *
+ * @param {string} string The string to convert.
+ * @return {string} The string in dash-case.
+ */
+export function camelCaseToDash(string) {
+  return string.replace(/(?!^)[A-Z]/g, prependDashAndToLowerCase);
+}
+
+/**
+ * @param {string} name Attribute name with dashes
+ * @return {string} Dashes replaced by underlines.
+ */
+export function dashToUnderline(name) {
+  return name.replace('-', '_');
+}
+
+/**
+ * Polyfill for String.prototype.endsWith.
+ * @param {string} string
+ * @param {string} suffix
+ * @return {boolean}
+ */
+export function endsWith(string, suffix) {
+  const index = string.length - suffix.length;
+  return index >= 0 && string.indexOf(suffix, index) == index;
+}
+
+/**
+ * Polyfill for String.prototype.includes.
+ * @param {string} string
+ * @param {string} substring
+ * @param {number=} start
+ * @return {boolean}
+ */
+export function includes(string, substring, start) {
+  if (typeof start !== 'number') {
+    start = 0;
+  }
+  if (start + substring.length > string.length) {
+    return false;
+  }
+  return string.indexOf(substring, start) !== -1;
+}
+
+/**
+ * Expands placeholders in a given template string with values.
+ *
+ * Placeholders use ${key-name} syntax and are replaced with the value
+ * returned from the given getter function.
+ *
+ * @param {string} template The template string to expand.
+ * @param {function(string):*} getter Function used to retrieve a value for a
+ *   placeholder. Returns values will be coerced into strings.
+ * @param {number=} opt_maxIterations Number of times to expand the template.
+ *   Defaults to 1, but should be set to a larger value your placeholder tokens
+ *   can be expanded to other placeholder tokens. Take caution with large values
+ *   as recursively expanding a string can be exponentially expensive.
+ * @return {string}
+ */
+export function expandTemplate(template, getter, opt_maxIterations) {
+  const maxIterations = opt_maxIterations || 1;
+  for (let i = 0; i < maxIterations; i++) {
+    let matches = 0;
+    template = template.replace(/\${([^}]*)}/g, (_a, b) => {
+      matches++;
+      return getter(b);
+    });
+    if (!matches) {
+      break;
+    }
+  }
+  return template;
+}
+
+/**
+ * Hash function djb2a
+ * This is intended to be a simple, fast hashing function using minimal code.
+ * It does *not* have good cryptographic properties.
+ * @param {string} str
+ * @return {string} 32-bit unsigned hash of the string
+ */
+export function stringHash32(str) {
+  const {length} = str;
+  let hash = 5381;
+  for (let i = 0; i < length; i++) {
+    hash = (hash * 33) ^ str.charCodeAt(i);
+  }
+  // Convert from 32-bit signed to unsigned.
+  return String(hash >>> 0);
+}
+
+/**
+ * Trims a string on the end, removing whitespace characters.
+ * @param {string} str  A string to trim.
+ * @return {string} The string, with trailing whitespace removed.
+ */
+export function trimEnd(str) {
+  // TODO(sparhami) Does this get inlined for an ES2019 build?
+  if (str.trimEnd) {
+    return str.trimEnd();
+  }
+
+  return ('_' + str).trim().slice(1);
+}
+
+/**
+ * Trims any leading whitespace from a string.
+ * @param {string} str  A string to trim.
+ * @return {string} The string, with leading whitespace removed.
+ */
+export function trimStart(str) {
+  if (str.trimStart) {
+    return str.trimStart();
+  }
+
+  return (str + '_').trim().slice(0, -1);
+}
+
+/**
+ * Wrapper around String.replace that handles asynchronous resolution.
+ * @param {string} str
+ * @param {RegExp} regex
+ * @param {Function|string} replacer
+ * @return {!Promise<string>}
+ */
+export function asyncStringReplace(str, regex, replacer) {
+  if (isString(replacer)) {
+    return Promise.resolve(str.replace(regex, replacer));
+  }
+  const stringBuilder = [];
+  let lastIndex = 0;
+
+  str.replace(regex, function (match) {
+    // String.prototype.replace will pass 3 to n number of arguments to the
+    // callback function based on how many capture groups the regex may or may
+    // not contain. We know that the match will always be first, and the
+    // index will always be second to last.
+    const matchIndex = arguments[arguments.length - 2];
+    stringBuilder.push(str.slice(lastIndex, matchIndex));
+    lastIndex = matchIndex + match.length;
+
+    // Store the promise in it's eventual string position.
+    const replacementPromise = replacer.apply(null, arguments);
+    stringBuilder.push(replacementPromise);
+  });
+  stringBuilder.push(str.slice(lastIndex));
+
+  return Promise.all(stringBuilder).then((resolved) => resolved.join(''));
+}
+
+/**
+ * Pads the beginning of a string with a substring to a target length.
+ * @param {string} s
+ * @param {number} targetLength
+ * @param {string} padString
+ * @return {string}
+ */
+export function padStart(s, targetLength, padString) {
+  if (s.length >= targetLength) {
+    return s;
+  }
+  targetLength = targetLength - s.length;
+  let padding = padString;
+  while (targetLength > padding.length) {
+    padding += padString;
+  }
+  return padding.slice(0, targetLength) + s;
+}
+
+/**
+ * Tests if a value is a string.
+ * @param {?} s
+ * @return {boolean}
+ */
+export function isString(s) {
+  return typeof s == 'string';
+}
diff --git a/src/core/types/string/url.js b/src/core/types/string/url.js
new file mode 100644
index 0000000000000..d6b980cf1e4ef
--- /dev/null
+++ b/src/core/types/string/url.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright 2017 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.
+ */
+
+import {map} from '../object';
+
+const QUERY_STRING_REGEX = /(?:^[#?]?|&)([^=&]+)(?:=([^&]*))?/g;
+
+/**
+ * Tries to decode a URI component, falling back to opt_fallback (or an empty
+ * string)
+ *
+ * @param {string} component
+ * @param {string=} fallback
+ * @return {string}
+ */
+export function tryDecodeUriComponent(component, fallback = '') {
+  try {
+    return decodeURIComponent(component);
+  } catch (e) {
+    return fallback;
+  }
+}
+
+/**
+ * Parses the query string of an URL. This method returns a simple key/value
+ * map. If there are duplicate keys the latest value is returned.
+ *
+ * @param {string} queryString
+ * @return {!JsonObject}
+ */
+export function parseQueryString(queryString) {
+  const params = map();
+  if (!queryString) {
+    return params;
+  }
+
+  let match;
+  while ((match = QUERY_STRING_REGEX.exec(queryString))) {
+    const name = tryDecodeUriComponent(match[1], match[1]);
+    const value = match[2]
+      ? tryDecodeUriComponent(match[2].replace(/\+/g, ' '), match[2])
+      : '';
+    params[name] = value;
+  }
+  return params;
+}
diff --git a/src/core/window.extern.js b/src/core/window.extern.js
new file mode 100644
index 0000000000000..f122a4a859342
--- /dev/null
+++ b/src/core/window.extern.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview Externs for values expected to be on global self/window.
+ * @externs
+ */
+
+/**
+ * Never exists; used as part of post-compilation checks to verify DCE.
+ * @type {undefined}
+ */
+window.__AMP_ASSERTION_CHECK;
+
+/**
+ * Global error reporting handler; only present in AMP pages
+ * @type {undefined|function(this:Window,!Error,Element=)}
+ */
+window.__AMP_REPORT_ERROR;
+
+/**
+ * Counter for the DomBaseWeakRef polyfill.
+ * @type {undefined|number}
+ */
+window.__AMP_WEAKREF_ID;
diff --git a/src/css.js b/src/css.js
deleted file mode 100644
index 82d2256015b04..0000000000000
--- a/src/css.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * 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.
- */
-
-import {cssEscape} from '../third_party/css-escape/css-escape';
-import {devAssert} from './log';
-
-/**
- * Asserts that name is just an alphanumeric word, and does not contain
- * advanced CSS selector features like attributes, psuedo-classes, class names,
- * nor ids.
- * @param {string} name
- */
-export function assertIsName(name) {
-  devAssert(/^[\w-]+$/.test(name));
-}
-
-/**
- * @type {boolean|undefined}
- */
-let scopeSelectorSupported;
-
-/**
- * @param {boolean|undefined} val
- * @visibleForTesting
- */
-export function setScopeSelectorSupportedForTesting(val) {
-  scopeSelectorSupported = val;
-}
-
-/**
- * Test that the :scope selector is supported and behaves correctly.
- * @param {!Element} el
- * @return {boolean}
- */
-export function isScopeSelectorSupported(el) {
-  if (scopeSelectorSupported !== undefined) {
-    return scopeSelectorSupported;
-  }
-
-  return (scopeSelectorSupported = testScopeSelector(el));
-}
-
-/**
- * Test that the :scope selector is supported and behaves correctly.
- * @param {!Element} el
- * @return {boolean}
- */
-function testScopeSelector(el) {
-  try {
-    const doc = el.ownerDocument;
-    const testElement = doc.createElement('div');
-    const testChild = doc.createElement('div');
-    testElement.appendChild(testChild);
-    // NOTE(cvializ, #12383): Firefox's implementation is incomplete,
-    // therefore we test actual functionality of`:scope` as well.
-    return testElement./*OK*/ querySelector(':scope div') === testChild;
-  } catch (e) {
-    return false;
-  }
-}
-
-/**
- * Prefixes a selector for ancestor selection. Splits in subselectors and
- * applies prefix to each.
- *
- * e.g.
- * ```
- *   prependSelectorsWith('div', '.i-amphtml-scoped');
- *   // => '.i-amphtml-scoped div'
- *   prependSelectorsWith('div, ul', ':scope');
- *   // => ':scope div, :scope ul'
- *   prependSelectorsWith('div, ul', 'article >');
- *   // => 'article > div, article > ul'
- * ```
- *
- * @param {string} selector
- * @param {string} distribute
- * @return {string}
- */
-export function prependSelectorsWith(selector, distribute) {
-  return selector.replace(/^|,/g, `$&${distribute} `);
-}
-
-/**
- * Escapes an ident (ID or a class name) to be used as a CSS selector.
- *
- * See https://drafts.csswg.org/cssom/#serialize-an-identifier.
- *
- * @param {string} ident
- * @return {string}
- */
-export function escapeCssSelectorIdent(ident) {
-  if (IS_ESM) {
-    return CSS.escape(ident);
-  } else {
-    return cssEscape(ident);
-  }
-}
-
-/**
- * Escapes an ident in a way that can be used by :nth-child() psuedo-class.
- *
- * See https://github.com/w3c/csswg-drafts/issues/2306.
- *
- * @param {string|number} ident
- * @return {string}
- */
-export function escapeCssSelectorNth(ident) {
-  const escaped = String(ident);
-  // Ensure it doesn't close the nth-child psuedo class.
-  devAssert(escaped.indexOf(')') === -1);
-  return escaped;
-}
diff --git a/src/curve.js b/src/curve.js
deleted file mode 100644
index 95b86ecd6421f..0000000000000
--- a/src/curve.js
+++ /dev/null
@@ -1,314 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-// Imported just for the side effect of getting the `types` it exports into
-// the type system during compile time.
-import './time';
-
-/**
- * A CurveDef is a function that returns a normtime value (0 to 1) for another
- * normtime value.
- * @typedef {function(./time.normtimeDef): ./time.normtimeDef}
- */
-export let CurveDef;
-
-/**
- * Returns a cubic bezier curve.
- * @param {number} x1 X coordinate of the first control point.
- * @param {number} y1 Y coordinate of the first control point.
- * @param {number} x2 X coordinate of the second control point.
- * @param {number} y2 Y coordinate of the second control point.
- * @return {!CurveDef}
- */
-export function bezierCurve(x1, y1, x2, y2) {
-  const bezier = new Bezier(0, 0, x1, y1, x2, y2, 1, 1);
-  return bezier.solveYValueFromXValue.bind(bezier);
-}
-
-/**
- * Thanks to
- * https://closure-library.googlecode.com/git-history/docs/local_closure_goog_math_bezier.js.source.html
- */
-class Bezier {
-  /**
-   * @param {number} x0 X coordinate of the start point.
-   * @param {number} y0 Y coordinate of the start point.
-   * @param {number} x1 X coordinate of the first control point.
-   * @param {number} y1 Y coordinate of the first control point.
-   * @param {number} x2 X coordinate of the second control point.
-   * @param {number} y2 Y coordinate of the second control point.
-   * @param {number} x3 X coordinate of the end point.
-   * @param {number} y3 Y coordinate of the end point.
-   */
-  constructor(x0, y0, x1, y1, x2, y2, x3, y3) {
-    /**
-     * X coordinate of the first point.
-     * @type {number}
-     */
-    this.x0 = x0;
-
-    /**
-     * Y coordinate of the first point.
-     * @type {number}
-     */
-    this.y0 = y0;
-
-    /**
-     * X coordinate of the first control point.
-     * @type {number}
-     */
-    this.x1 = x1;
-
-    /**
-     * Y coordinate of the first control point.
-     * @type {number}
-     */
-    this.y1 = y1;
-
-    /**
-     * X coordinate of the second control point.
-     * @type {number}
-     */
-    this.x2 = x2;
-
-    /**
-     * Y coordinate of the second control point.
-     * @type {number}
-     */
-    this.y2 = y2;
-
-    /**
-     * X coordinate of the end point.
-     * @type {number}
-     */
-    this.x3 = x3;
-
-    /**
-     * Y coordinate of the end point.
-     * @type {number}
-     */
-    this.y3 = y3;
-  }
-
-  /**
-   * Computes the y coordinate of a point on the curve given its x coordinate.
-   * @param {number} xVal The x coordinate of the point on the curve.
-   * @return {number} The y coordinate of the point on the curve.
-   */
-  solveYValueFromXValue(xVal) {
-    return this.getPointY(this.solvePositionFromXValue(xVal));
-  }
-
-  /**
-   * Computes the position t of a point on the curve given its x coordinate.
-   * That is, for an input xVal, finds t s.t. getPointX(t) = xVal.
-   * As such, the following should always be true up to some small epsilon:
-   * t ~ solvePositionFromXValue(getPointX(t)) for t in [0, 1].
-   * @param {number} xVal The x coordinate of the point to find on the curve.
-   * @return {number} The position t.
-   */
-  solvePositionFromXValue(xVal) {
-    // Desired precision on the computation.
-    const epsilon = 1e-6;
-
-    // Initial estimate of t using linear interpolation.
-    let t = (xVal - this.x0) / (this.x3 - this.x0);
-    if (t <= 0) {
-      return 0;
-    } else if (t >= 1) {
-      return 1;
-    }
-
-    // Try gradient descent to solve for t. If it works, it is very fast.
-    let tMin = 0;
-    let tMax = 1;
-    let value = 0;
-    for (let i = 0; i < 8; i++) {
-      value = this.getPointX(t);
-      const derivative = (this.getPointX(t + epsilon) - value) / epsilon;
-      if (Math.abs(value - xVal) < epsilon) {
-        return t;
-      } else if (Math.abs(derivative) < epsilon) {
-        break;
-      } else {
-        if (value < xVal) {
-          tMin = t;
-        } else {
-          tMax = t;
-        }
-        t -= (value - xVal) / derivative;
-      }
-    }
-
-    // If the gradient descent got stuck in a local minimum, e.g. because
-    // the derivative was close to 0, use a Dichotomy refinement instead.
-    // We limit the number of iterations to 8.
-    for (let i = 0; Math.abs(value - xVal) > epsilon && i < 8; i++) {
-      if (value < xVal) {
-        tMin = t;
-        t = (t + tMax) / 2;
-      } else {
-        tMax = t;
-        t = (t + tMin) / 2;
-      }
-      value = this.getPointX(t);
-    }
-    return t;
-  }
-
-  /**
-   * Computes the curve's X coordinate at a point between 0 and 1.
-   * @param {number} t The point on the curve to find.
-   * @return {number} The computed coordinate.
-   */
-  getPointX(t) {
-    // Special case start and end.
-    if (t == 0) {
-      return this.x0;
-    } else if (t == 1) {
-      return this.x3;
-    }
-
-    // Step one - from 4 points to 3
-    let ix0 = this.lerp(this.x0, this.x1, t);
-    let ix1 = this.lerp(this.x1, this.x2, t);
-    const ix2 = this.lerp(this.x2, this.x3, t);
-
-    // Step two - from 3 points to 2
-    ix0 = this.lerp(ix0, ix1, t);
-    ix1 = this.lerp(ix1, ix2, t);
-
-    // Final step - last point
-    return this.lerp(ix0, ix1, t);
-  }
-
-  /**
-   * Computes the curve's Y coordinate at a point between 0 and 1.
-   * @param {number} t The point on the curve to find.
-   * @return {number} The computed coordinate.
-   */
-  getPointY(t) {
-    // Special case start and end.
-    if (t == 0) {
-      return this.y0;
-    } else if (t == 1) {
-      return this.y3;
-    }
-
-    // Step one - from 4 points to 3
-    let iy0 = this.lerp(this.y0, this.y1, t);
-    let iy1 = this.lerp(this.y1, this.y2, t);
-    const iy2 = this.lerp(this.y2, this.y3, t);
-
-    // Step two - from 3 points to 2
-    iy0 = this.lerp(iy0, iy1, t);
-    iy1 = this.lerp(iy1, iy2, t);
-
-    // Final step - last point
-    return this.lerp(iy0, iy1, t);
-  }
-
-  /**
-   * Performs linear interpolation between values a and b. Returns the value
-   * between a and b proportional to x (when x is between 0 and 1. When x is
-   * outside this range, the return value is a linear extrapolation).
-   * @param {number} a A number.
-   * @param {number} b A number.
-   * @param {number} x The proportion between a and b.
-   * @return {number} The interpolated value between a and b.
-   */
-  lerp(a, b, x) {
-    return a + x * (b - a);
-  }
-}
-
-/**
- * A collection of common curves.
- * See https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
- * @enum {!CurveDef}
- */
-export const Curves = {
-  /**
-   * linear
-   * @param {number} n
-   * @return {number}
-   */
-  LINEAR(n) {
-    return n;
-  },
-
-  /**
-   * ease
-   */
-  EASE: bezierCurve(0.25, 0.1, 0.25, 1.0),
-
-  /**
-   * ease-in: slow out, fast in
-   */
-  EASE_IN: bezierCurve(0.42, 0.0, 1.0, 1.0),
-
-  /**
-   * ease-out: fast out, slow in
-   */
-  EASE_OUT: bezierCurve(0.0, 0.0, 0.58, 1.0),
-
-  /**
-   * ease-in-out
-   */
-  EASE_IN_OUT: bezierCurve(0.42, 0.0, 0.58, 1.0),
-};
-
-/**
- * @const {!Object<string, !CurveDef>}
- */
-const NAME_MAP = {
-  'linear': Curves.LINEAR,
-  'ease': Curves.EASE,
-  'ease-in': Curves.EASE_IN,
-  'ease-out': Curves.EASE_OUT,
-  'ease-in-out': Curves.EASE_IN_OUT,
-};
-
-/**
- * If the argument is a string, this methods matches an existing curve by name.
- * @param {?CurveDef|string|undefined} curve
- * @return {?CurveDef}
- */
-export function getCurve(curve) {
-  if (!curve) {
-    return null;
-  }
-  if (typeof curve == 'string') {
-    // If the curve is a custom cubic-bezier curve
-    if (curve.indexOf('cubic-bezier') != -1) {
-      const match = curve.match(/cubic-bezier\((.+)\)/);
-      if (match) {
-        const values = match[1].split(',').map(parseFloat);
-        if (values.length == 4) {
-          for (let i = 0; i < 4; i++) {
-            if (isNaN(values[i])) {
-              return null;
-            }
-          }
-          return bezierCurve(values[0], values[1], values[2], values[3]);
-        }
-      }
-      return null;
-    }
-    return NAME_MAP[curve];
-  }
-  return curve;
-}
diff --git a/src/custom-element.js b/src/custom-element.js
index 3069496f546d2..18a3e5b604ccc 100644
--- a/src/custom-element.js
+++ b/src/custom-element.js
@@ -15,32 +15,39 @@
  */
 
 import * as dom from './dom';
-import {AmpEvents} from './amp-events';
-import {CommonSignals} from './common-signals';
+import {AmpEvents} from './core/constants/amp-events';
+import {CommonSignals} from './core/constants/common-signals';
 import {ElementStub} from './element-stub';
 import {
   Layout,
+  LayoutPriority,
   applyStaticLayout,
   isInternalElement,
-  isLayoutSizeDefined,
   isLoadingAllowed,
 } from './layout';
-import {LayoutDelayMeter} from './layout-delay-meter';
+import {MediaQueryProps} from './utils/media-query-props';
+import {ReadyState} from './core/constants/ready-state';
 import {ResourceState} from './service/resource';
 import {Services} from './services';
-import {Signals} from './utils/signals';
-import {blockedByConsentError, isBlockedByConsent, reportError} from './error';
-import {createLoaderElement} from '../src/loader.js';
-import {dev, devAssert, rethrowAsync, user, userAssert} from './log';
-import {getIntersectionChangeEntry} from '../src/utils/intersection-observer-polyfill';
+import {Signals} from './core/data-structures/signals';
+import {
+  blockedByConsentError,
+  cancellation,
+  isBlockedByConsent,
+  isCancellation,
+  reportError,
+} from './error-reporting';
+import {dev, devAssert, user, userAssert} from './log';
+import {getIntersectionChangeEntry} from './utils/intersection-observer-3p-host';
 import {getMode} from './mode';
-import {htmlFor} from './static-template';
-import {parseSizeList} from './size-list';
+import {getSchedulerForDoc} from './service/scheduler';
+import {isExperimentOn} from './experiments';
+import {rethrowAsync} from './core/error';
 import {setStyle} from './style';
-import {shouldBlockOnConsentByMeta} from '../src/consent';
+import {shouldBlockOnConsentByMeta} from './consent';
 import {startupChunk} from './chunk';
 import {toWin} from './types';
-import {tryResolve} from '../src/utils/promise';
+import {tryResolve} from './core/data-structures/promise';
 
 const TAG = 'CustomElement';
 
@@ -54,12 +61,18 @@ const UpgradeState = {
   UPGRADE_IN_PROGRESS: 4,
 };
 
+const NO_BUBBLES = {bubbles: false};
+const RETURN_TRUE = () => true;
+
 /**
  * Caches whether the template tag is supported to avoid memory allocations.
  * @type {boolean|undefined}
  */
 let templateTagSupported;
 
+/** @type {!Array} */
+export const stubbedElements = [];
+
 /**
  * Whether this platform supports template tags.
  * @return {boolean}
@@ -76,15 +89,29 @@ function isTemplateTagSupported() {
  * Creates a named custom element class.
  *
  * @param {!Window} win The window in which to register the custom element.
+ * @param {function(!./service/ampdoc-impl.AmpDoc, !AmpElement, ?(typeof BaseElement))} elementConnectedCallback
  * @return {typeof AmpElement} The custom element class.
  */
-export function createCustomElementClass(win) {
-  const BaseCustomElement = /** @type {typeof HTMLElement} */ (createBaseCustomElementClass(
-    win
-  ));
+export function createCustomElementClass(win, elementConnectedCallback) {
+  const BaseCustomElement = /** @type {typeof HTMLElement} */ (
+    createBaseCustomElementClass(win, elementConnectedCallback)
+  );
   // It's necessary to create a subclass, because the same "base" class cannot
   // be registered to multiple custom elements.
-  class CustomAmpElement extends BaseCustomElement {}
+  class CustomAmpElement extends BaseCustomElement {
+    /**
+     * adoptedCallback is only called when using a Native implementation of Custom Elements V1.
+     * Our polyfill does not call this method.
+     */
+    adoptedCallback() {
+      // Work around an issue with Firefox changing the prototype of our
+      // already constructed element to the new document's HTMLElement.
+      if (Object.getPrototypeOf(this) !== customAmpElementProto) {
+        Object.setPrototypeOf(this, customAmpElementProto);
+      }
+    }
+  }
+  const customAmpElementProto = CustomAmpElement.prototype;
   return /** @type {typeof AmpElement} */ (CustomAmpElement);
 }
 
@@ -92,9 +119,10 @@ export function createCustomElementClass(win) {
  * Creates a base custom element class.
  *
  * @param {!Window} win The window in which to register the custom element.
+ * @param {function(!./service/ampdoc-impl.AmpDoc, !AmpElement, ?(typeof BaseElement))} elementConnectedCallback
  * @return {typeof HTMLElement}
  */
-function createBaseCustomElementClass(win) {
+function createBaseCustomElementClass(win, elementConnectedCallback) {
   if (win.__AMP_BASE_CE_CLASS) {
     return win.__AMP_BASE_CE_CLASS;
   }
@@ -133,8 +161,21 @@ function createBaseCustomElementClass(win) {
       /** @private {?Promise} */
       this.buildingPromise_ = null;
 
-      /** @type {string} */
-      this.readyState = 'loading';
+      /**
+       * Indicates that the `mountCallback()` has been called and it hasn't
+       * been reversed with an `unmountCallback()` call.
+       * @private {boolean}
+       */
+      this.mounted_ = false;
+
+      /** @private {?Promise} */
+      this.mountPromise_ = null;
+
+      /** @private {?AbortController} */
+      this.mountAbortController_ = null;
+
+      /** @private {!ReadyState} */
+      this.readyState_ = ReadyState.UPGRADING;
 
       /** @type {boolean} */
       this.everAttached = false;
@@ -154,33 +195,12 @@ function createBaseCustomElementClass(win) {
       /** @private {!Layout} */
       this.layout_ = Layout.NODISPLAY;
 
-      /** @private {number} */
-      this.layoutWidth_ = -1;
-
-      /** @private {number} */
-      this.layoutHeight_ = -1;
-
       /** @private {number} */
       this.layoutCount_ = 0;
 
       /** @private {boolean} */
       this.isFirstLayoutCompleted_ = false;
 
-      /** @private {boolean} */
-      this.isInViewport_ = false;
-
-      /** @private {boolean} */
-      this.paused_ = false;
-
-      /** @private {string|null|undefined} */
-      this.mediaQuery_ = undefined;
-
-      /** @private {!./size-list.SizeList|null|undefined} */
-      this.sizeList_ = undefined;
-
-      /** @private {!./size-list.SizeList|null|undefined} */
-      this.heightsList_ = undefined;
-
       /** @public {boolean} */
       this.warnOnMissingOverflow = true;
 
@@ -191,18 +211,6 @@ function createBaseCustomElementClass(win) {
        */
       this.sizerElement = undefined;
 
-      /** @private {boolean|undefined} */
-      this.loadingDisabled_ = undefined;
-
-      /** @private {boolean|undefined} */
-      this.loadingState_ = undefined;
-
-      /** @private {?Element} */
-      this.loadingContainer_ = null;
-
-      /** @private {?Element} */
-      this.loadingElement_ = null;
-
       /** @private {?Element|undefined} */
       this.overflowElement_ = undefined;
 
@@ -221,15 +229,23 @@ function createBaseCustomElementClass(win) {
       const nonStructThis = /** @type {!Object} */ (this);
 
       // `opt_implementationClass` is only used for tests.
+      /** @type {?(typeof ../base-element.BaseElement)} */
       let Ctor =
         win.__AMP_EXTENDED_ELEMENTS &&
         win.__AMP_EXTENDED_ELEMENTS[this.localName];
       if (getMode().test && nonStructThis['implementationClassForTesting']) {
         Ctor = nonStructThis['implementationClassForTesting'];
       }
-      devAssert(Ctor);
-      /** @private {!./base-element.BaseElement} */
-      this.implementation_ = new Ctor(this);
+
+      /** @private {?(typeof ../base-element.BaseElement)} */
+      this.implClass_ = Ctor === ElementStub ? null : Ctor || null;
+
+      if (!this.implClass_) {
+        stubbedElements.push(this);
+      }
+
+      /** @private {?./base-element.BaseElement} */
+      this.impl_ = null;
 
       /**
        * An element always starts in a unupgraded state until it's added to DOM
@@ -265,12 +281,16 @@ function createBaseCustomElementClass(win) {
       /** @private @const */
       this.signals_ = new Signals();
 
+      if (this.implClass_) {
+        this.signals_.signal(CommonSignals.READY_TO_UPGRADE);
+      }
+
       const perf = Services.performanceForOrNull(win);
       /** @private {boolean} */
       this.perfOn_ = perf && perf.isPerformanceTrackingOn();
 
-      /** @private {?./layout-delay-meter.LayoutDelayMeter} */
-      this.layoutDelayMeter_ = null;
+      /** @private {?MediaQueryProps} */
+      this.mediaQueryProps_ = null;
 
       if (nonStructThis[dom.UPGRADE_TO_CUSTOMELEMENT_RESOLVER]) {
         nonStructThis[dom.UPGRADE_TO_CUSTOMELEMENT_RESOLVER](nonStructThis);
@@ -279,6 +299,11 @@ function createBaseCustomElementClass(win) {
       }
     }
 
+    /** @return {!ReadyState} */
+    get readyState() {
+      return this.readyState_;
+    }
+
     /** @return {!Signals} */
     signals() {
       return this.signals_;
@@ -308,8 +333,9 @@ function createBaseCustomElementClass(win) {
         this.resources_,
         'no resources yet, since element is not attached'
       );
-      return /** @type {!./service/resources-interface.ResourcesInterface} */ (this
-        .resources_);
+      return /** @type {!./service/resources-interface.ResourcesInterface} */ (
+        this.resources_
+      );
     }
 
     /**
@@ -344,13 +370,15 @@ function createBaseCustomElementClass(win) {
         // Already upgraded or in progress or failed.
         return;
       }
-      this.implementation_ = new newImplClass(this);
+
+      this.implClass_ = newImplClass;
+      this.signals_.signal(CommonSignals.READY_TO_UPGRADE);
       if (this.everAttached) {
         // Usually, we do an implementation upgrade when the element is
         // attached to the DOM. But, if it hadn't yet upgraded from
         // ElementStub, we couldn't. Now that it's upgraded from a stub, go
         // ahead and do the full upgrade.
-        this.tryUpgrade_();
+        this.upgradeOrSchedule_();
       }
     }
 
@@ -370,18 +398,17 @@ function createBaseCustomElementClass(win) {
      * @final @private
      */
     completeUpgrade_(newImpl, upgradeStartTime) {
+      this.impl_ = newImpl;
       this.upgradeDelayMs_ = win.Date.now() - upgradeStartTime;
       this.upgradeState_ = UpgradeState.UPGRADED;
-      this.implementation_ = newImpl;
+      this.setReadyStateInternal(ReadyState.BUILDING);
       this.classList.remove('amp-unresolved');
       this.classList.remove('i-amphtml-unresolved');
-      this.implementation_.createdCallback();
       this.assertLayout_();
-      // TODO(wg-runtime): Don't set BaseElement ivars externally.
-      this.implementation_.layout_ = this.layout_;
-      this.implementation_.firstAttachedCallback();
       this.dispatchCustomEventForTesting(AmpEvents.ATTACHED);
-      this.getResources().upgraded(this);
+      if (!this.R1()) {
+        this.getResources().upgraded(this);
+      }
       this.signals_.signal(CommonSignals.UPGRADED);
     }
 
@@ -389,7 +416,8 @@ function createBaseCustomElementClass(win) {
     assertLayout_() {
       if (
         this.layout_ != Layout.NODISPLAY &&
-        !this.implementation_.isLayoutSupported(this.layout_)
+        this.impl_ &&
+        !this.impl_.isLayoutSupported(this.layout_)
       ) {
         userAssert(
           this.getAttribute('layout'),
@@ -403,40 +431,24 @@ function createBaseCustomElementClass(win) {
     }
 
     /**
-     * Whether the element has been built. A built element had its
-     * {@link buildCallback} method successfully invoked.
-     * @return {boolean}
-     * @final
-     */
-    isBuilt() {
-      return this.built_;
-    }
-
-    /**
-     * Returns the promise that's resolved when the element has been built. If
-     * the build fails, the resulting promise is rejected.
-     * @return {!Promise}
+     * Get the priority to build the element.
+     * @return {number}
      */
-    whenBuilt() {
-      return this.signals_.whenSignal(CommonSignals.BUILT);
+    getBuildPriority() {
+      return this.implClass_
+        ? this.implClass_.getBuildPriority(this)
+        : LayoutPriority.BACKGROUND;
     }
 
     /**
      * Get the priority to load the element.
      * @return {number}
+     * TODO(#31915): remove once R1 migration is complete.
      */
     getLayoutPriority() {
-      devAssert(this.isUpgraded(), 'Cannot get priority of unupgraded element');
-      return this.implementation_.getLayoutPriority();
-    }
-
-    /**
-     * TODO(wg-runtime, #25824): Make Resource.getLayoutBox() the source of truth.
-     * @return {number}
-     * @deprecated
-     */
-    getLayoutWidth() {
-      return this.layoutWidth_;
+      return this.impl_
+        ? this.impl_.getLayoutPriority()
+        : LayoutPriority.BACKGROUND;
     }
 
     /**
@@ -448,7 +460,7 @@ function createBaseCustomElementClass(win) {
         this.isUpgraded(),
         'Cannot get default action alias of unupgraded element'
       );
-      return this.implementation_.getDefaultActionAlias();
+      return this.impl_.getDefaultActionAlias();
     }
 
     /** @return {boolean} */
@@ -456,6 +468,25 @@ function createBaseCustomElementClass(win) {
       return !!this.buildingPromise_;
     }
 
+    /**
+     * Whether the element has been built. A built element had its
+     * {@link buildCallback} method successfully invoked.
+     * @return {boolean}
+     * @final
+     */
+    isBuilt() {
+      return this.built_;
+    }
+
+    /**
+     * Returns the promise that's resolved when the element has been built. If
+     * the build fails, the resulting promise is rejected.
+     * @return {!Promise}
+     */
+    whenBuilt() {
+      return this.signals_.whenSignal(CommonSignals.BUILT);
+    }
+
     /**
      * Requests or requires the element to be built. The build is done by
      * invoking {@link BaseElement.buildCallback} method.
@@ -465,43 +496,81 @@ function createBaseCustomElementClass(win) {
      *
      * @return {?Promise}
      * @final
+     * @restricted
      */
-    build() {
+    buildInternal() {
       assertNotTemplate(this);
-      devAssert(this.isUpgraded(), 'Cannot build unupgraded element');
+      devAssert(this.implClass_, 'Cannot build unupgraded element');
       if (this.buildingPromise_) {
         return this.buildingPromise_;
       }
-      return (this.buildingPromise_ = new Promise((resolve, reject) => {
+
+      this.setReadyStateInternal(ReadyState.BUILDING);
+
+      // Create the instance.
+      const implPromise = this.createImpl_();
+
+      // Wait for consent.
+      const consentPromise = implPromise.then(() => {
         const policyId = this.getConsentPolicy_();
-        if (!policyId) {
-          resolve(this.implementation_.buildCallback());
-        } else {
-          Services.consentPolicyServiceForDocOrNull(this)
-            .then((policy) => {
-              if (!policy) {
-                return true;
-              }
-              return policy.whenPolicyUnblock(/** @type {string} */ (policyId));
-            })
-            .then((shouldUnblock) => {
-              if (shouldUnblock) {
-                resolve(this.implementation_.buildCallback());
-              } else {
-                reject(blockedByConsentError());
-              }
-            });
+        const isGranularConsentExperimentOn = isExperimentOn(
+          win,
+          'amp-consent-granular-consent'
+        );
+        const purposeConsents =
+          isGranularConsentExperimentOn && !policyId
+            ? this.getPurposesConsent_()
+            : null;
+
+        if (!policyId && !(isGranularConsentExperimentOn && purposeConsents)) {
+          return;
         }
-      }).then(
+        // Must have policyId or granularExp w/ purposeConsents
+        return Services.consentPolicyServiceForDocOrNull(this)
+          .then((policy) => {
+            if (!policy) {
+              return true;
+            }
+            return policyId
+              ? policy.whenPolicyUnblock(policyId)
+              : policy.whenPurposesUnblock(purposeConsents);
+          })
+          .then((shouldUnblock) => {
+            if (!shouldUnblock) {
+              throw blockedByConsentError();
+            }
+          });
+      });
+
+      // Build callback.
+      const buildPromise = consentPromise.then(() =>
+        devAssert(this.impl_).buildCallback()
+      );
+
+      // Build the element.
+      return (this.buildingPromise_ = buildPromise.then(
         () => {
-          this.preconnect(/* onLayout */ false);
           this.built_ = true;
+          this.classList.add('i-amphtml-built');
           this.classList.remove('i-amphtml-notbuilt');
           this.classList.remove('amp-notbuilt');
           this.signals_.signal(CommonSignals.BUILT);
-          if (this.isInViewport_) {
-            this.updateInViewport_(true);
+
+          if (this.R1()) {
+            this.setReadyStateInternal(
+              this.readyState_ != ReadyState.BUILDING
+                ? this.readyState_
+                : ReadyState.MOUNTING
+            );
+          } else {
+            this.setReadyStateInternal(ReadyState.LOADING);
+            this.preconnect(/* onLayout */ false);
+          }
+
+          if (this.isConnected_) {
+            this.connected_();
           }
+
           if (this.actionQueue_) {
             // Only schedule when the queue is not empty, which should be
             // the case 99% of the time.
@@ -522,6 +591,11 @@ function createBaseCustomElementClass(win) {
             CommonSignals.BUILT,
             /** @type {!Error} */ (reason)
           );
+
+          if (this.R1()) {
+            this.setReadyStateInternal(ReadyState.ERROR, reason);
+          }
+
           if (!isBlockedByConsent(reason)) {
             reportError(reason, this);
           }
@@ -530,38 +604,348 @@ function createBaseCustomElementClass(win) {
       ));
     }
 
+    /**
+     * @return {!Promise}
+     */
+    build() {
+      if (this.buildingPromise_) {
+        return this.buildingPromise_;
+      }
+
+      const readyPromise = this.signals_.whenSignal(
+        CommonSignals.READY_TO_UPGRADE
+      );
+      return readyPromise.then(() => {
+        if (this.R1()) {
+          const scheduler = getSchedulerForDoc(this.getAmpDoc());
+          scheduler.scheduleAsap(this);
+        }
+        return this.whenBuilt();
+      });
+    }
+
+    /**
+     * Mounts the element by calling the `BaseElement.mountCallback` method.
+     *
+     * Can only be called on a upgraded element. May only be called from
+     * scheduler.js.
+     *
+     * @return {!Promise}
+     * @final
+     * @restricted
+     */
+    mountInternal() {
+      if (this.mountPromise_) {
+        return this.mountPromise_;
+      }
+      this.mountAbortController_ =
+        this.mountAbortController_ || new AbortController();
+      const {signal} = this.mountAbortController_;
+      return (this.mountPromise_ = this.buildInternal()
+        .then(() => {
+          devAssert(this.R1());
+          if (signal.aborted) {
+            // Mounting has been canceled.
+            return;
+          }
+          this.setReadyStateInternal(
+            this.readyState_ != ReadyState.MOUNTING
+              ? this.readyState_
+              : this.implClass_.usesLoading(this)
+              ? ReadyState.LOADING
+              : ReadyState.MOUNTING
+          );
+          this.mounted_ = true;
+          const result = this.impl_.mountCallback(signal);
+          // The promise supports the V0 format for easy migration. If the
+          // `mountCallback` returns a promise, the assumption is that the
+          // element has finished loading when the promise completes.
+          return result ? result.then(RETURN_TRUE) : false;
+        })
+        .then((hasLoaded) => {
+          this.mountAbortController_ = null;
+          if (signal.aborted) {
+            throw cancellation();
+          }
+          this.signals_.signal(CommonSignals.MOUNTED);
+          if (!this.implClass_.usesLoading(this) || hasLoaded) {
+            this.setReadyStateInternal(ReadyState.COMPLETE);
+          }
+        })
+        .catch((reason) => {
+          this.mountAbortController_ = null;
+          if (isCancellation(reason)) {
+            this.mountPromise_ = null;
+          } else {
+            this.signals_.rejectSignal(
+              CommonSignals.MOUNTED,
+              /** @type {!Error} */ (reason)
+            );
+            this.setReadyStateInternal(ReadyState.ERROR, reason);
+          }
+          throw reason;
+        }));
+    }
+
+    /**
+     * Requests the element to be mounted as soon as possible.
+     * @return {!Promise}
+     * @final
+     */
+    mount() {
+      if (this.mountPromise_) {
+        return this.mountPromise_;
+      }
+
+      // Create the abort controller right away to ensure that we the unmount
+      // will properly cancel this operation.
+      this.mountAbortController_ =
+        this.mountAbortController_ || new AbortController();
+      const {signal} = this.mountAbortController_;
+
+      const readyPromise = this.signals_.whenSignal(
+        CommonSignals.READY_TO_UPGRADE
+      );
+      return readyPromise.then(() => {
+        if (!this.R1()) {
+          return this.whenBuilt();
+        }
+        if (signal.aborted) {
+          throw cancellation();
+        }
+        const scheduler = getSchedulerForDoc(this.getAmpDoc());
+        scheduler.scheduleAsap(this);
+        return this.whenMounted();
+      });
+    }
+
+    /**
+     * Unmounts the element and makes it ready for the next mounting
+     * operation.
+     * @final
+     */
+    unmount() {
+      // Ensure that the element is paused.
+      if (this.isConnected_) {
+        this.pause();
+      }
+
+      // Legacy R0 elements simply unlayout.
+      if (!this.R1()) {
+        this.unlayout_();
+        return;
+      }
+
+      // Cancel the currently mounting operation.
+      if (this.mountAbortController_) {
+        this.mountAbortController_.abort();
+        this.mountAbortController_ = null;
+      }
+
+      // Unschedule a currently pending mount request.
+      const scheduler = getSchedulerForDoc(this.getAmpDoc());
+      scheduler.unschedule(this);
+
+      // Try to unmount if the element has been built already.
+      if (this.mounted_) {
+        this.impl_.unmountCallback();
+      }
+
+      // Complete unmount and reset the state.
+      this.mounted_ = false;
+      this.mountPromise_ = null;
+      this.reset_();
+
+      // Prepare for the next mount if the element is connected.
+      if (this.isConnected_) {
+        this.upgradeOrSchedule_(/* opt_disablePreload */ true);
+      }
+    }
+
+    /**
+     * Returns the promise that's resolved when the element has been mounted. If
+     * the mount fails, the resulting promise is rejected.
+     * @return {!Promise}
+     */
+    whenMounted() {
+      return this.signals_.whenSignal(CommonSignals.MOUNTED);
+    }
+
+    /**
+     * @return {!Promise}
+     * @final
+     */
+    whenLoaded() {
+      return this.signals_.whenSignal(CommonSignals.LOAD_END);
+    }
+
+    /**
+     * Ensure that the element is eagerly loaded.
+     *
+     * @param {number=} opt_parentPriority
+     * @return {!Promise}
+     * @final
+     */
+    ensureLoaded(opt_parentPriority) {
+      return this.mount().then(() => {
+        if (this.R1()) {
+          if (this.implClass_.usesLoading(this)) {
+            this.impl_.ensureLoaded();
+          }
+          return this.whenLoaded();
+        }
+
+        // Very ugly! The "built" signal must be resolved from the Resource
+        // and not the element itself because the Resource has not correctly
+        // set its state for the downstream to process it correctly.
+        const resource = this.getResource_();
+        return resource.whenBuilt().then(() => {
+          if (resource.getState() == ResourceState.LAYOUT_COMPLETE) {
+            return;
+          }
+          if (
+            resource.getState() != ResourceState.LAYOUT_SCHEDULED ||
+            resource.isMeasureRequested()
+          ) {
+            resource.measure();
+          }
+          if (!resource.isDisplayed()) {
+            return;
+          }
+          this.getResources().scheduleLayoutOrPreload(
+            resource,
+            /* layout */ true,
+            opt_parentPriority,
+            /* forceOutsideViewport */ true
+          );
+          return this.whenLoaded();
+        });
+      });
+    }
+
+    /**
+     * See `BaseElement.setAsContainer`.
+     *
+     * @param {!Element=} opt_scroller A child of the container that should be
+     * monitored. Typically a scrollable element.
+     * @restricted
+     * @final
+     */
+    setAsContainerInternal(opt_scroller) {
+      const builder = getSchedulerForDoc(this.getAmpDoc());
+      builder.setContainer(this, opt_scroller);
+    }
+
+    /**
+     * See `BaseElement.removeAsContainer`.
+     * @restricted
+     * @final
+     */
+    removeAsContainerInternal() {
+      const builder = getSchedulerForDoc(this.getAmpDoc());
+      builder.removeContainer(this);
+    }
+
+    /**
+     * Update the internal ready state.
+     *
+     * @param {!ReadyState} state
+     * @param {*=} opt_failure
+     * @protected
+     * @final
+     */
+    setReadyStateInternal(state, opt_failure) {
+      if (state === this.readyState_) {
+        return;
+      }
+
+      this.readyState_ = state;
+
+      if (!this.R1()) {
+        return;
+      }
+
+      switch (state) {
+        case ReadyState.LOADING:
+          this.signals_.signal(CommonSignals.LOAD_START);
+          this.signals_.reset(CommonSignals.UNLOAD);
+          this.signals_.reset(CommonSignals.LOAD_END);
+          this.classList.add('i-amphtml-layout');
+          // Potentially start the loading indicator.
+          this.toggleLoading(true);
+          this.dispatchCustomEventForTesting(AmpEvents.LOAD_START);
+          return;
+        case ReadyState.COMPLETE:
+          // LOAD_START is set just in case. It won't be overwritten if
+          // it had been set before.
+          this.signals_.signal(CommonSignals.LOAD_START);
+          this.signals_.signal(CommonSignals.LOAD_END);
+          this.signals_.reset(CommonSignals.UNLOAD);
+          this.classList.add('i-amphtml-layout');
+          this.toggleLoading(false);
+          dom.dispatchCustomEvent(this, 'load', null, NO_BUBBLES);
+          this.dispatchCustomEventForTesting(AmpEvents.LOAD_END);
+          return;
+        case ReadyState.ERROR:
+          this.signals_.rejectSignal(
+            CommonSignals.LOAD_END,
+            /** @type {!Error} */ (opt_failure)
+          );
+          this.toggleLoading(false);
+          dom.dispatchCustomEvent(this, 'error', opt_failure, NO_BUBBLES);
+          return;
+      }
+    }
+
     /**
      * Called to instruct the element to preconnect to hosts it uses during
      * layout.
      * @param {boolean} onLayout Whether this was called after a layout.
+     * TODO(#31915): remove once R1 migration is complete.
      */
     preconnect(onLayout) {
+      devAssert(this.isUpgraded());
       if (onLayout) {
-        this.implementation_.preconnectCallback(onLayout);
+        this.impl_.preconnectCallback(onLayout);
       } else {
         // If we do early preconnects we delay them a bit. This is kind of
         // an unfortunate trade off, but it seems faster, because the DOM
         // operations themselves are not free and might delay
         startupChunk(this.getAmpDoc(), () => {
-          const TAG = this.tagName;
-          if (!this.ownerDocument) {
-            dev().error(TAG, 'preconnect without ownerDocument');
-            return;
-          } else if (!this.ownerDocument.defaultView) {
-            dev().error(TAG, 'preconnect without defaultView');
+          if (!this.ownerDocument || !this.ownerDocument.defaultView) {
             return;
           }
-          this.implementation_.preconnectCallback(onLayout);
+          this.impl_.preconnectCallback(onLayout);
         });
       }
     }
 
+    /**
+     * See `BaseElement.R1()`.
+     *
+     * @return {boolean}
+     * @final
+     */
+    R1() {
+      return this.implClass_ ? this.implClass_.R1() : false;
+    }
+
+    /**
+     * See `BaseElement.deferredMount()`.
+     *
+     * @return {boolean}
+     * @final
+     */
+    deferredMount() {
+      return this.implClass_ ? this.implClass_.deferredMount(this) : false;
+    }
+
     /**
      * Whether the custom element declares that it has to be fixed.
      * @return {boolean}
      */
     isAlwaysFixed() {
-      return this.implementation_.isAlwaysFixed();
+      return this.impl_ ? this.impl_.isAlwaysFixed() : false;
     }
 
     /**
@@ -571,26 +955,19 @@ function createBaseCustomElementClass(win) {
      * @param {boolean} sizeChanged
      */
     updateLayoutBox(layoutBox, sizeChanged = false) {
-      this.layoutWidth_ = layoutBox.width;
-      this.layoutHeight_ = layoutBox.height;
       if (this.isBuilt()) {
         this.onMeasure(sizeChanged);
       }
     }
 
     /**
-     * Calls onLayoutMeasure() (and onMeasureChanged() if size changed)
-     * on the BaseElement implementation.
+     * Calls onLayoutMeasure() on the BaseElement implementation.
      * Should only be called by Resources.
-     * @param {boolean} sizeChanged
      */
-    onMeasure(sizeChanged = false) {
+    onMeasure() {
       devAssert(this.isBuilt());
       try {
-        this.implementation_.onLayoutMeasure();
-        if (sizeChanged) {
-          this.implementation_.onMeasureChanged();
-        }
+        this.impl_.onLayoutMeasure();
       } catch (e) {
         reportError(e, this);
       }
@@ -633,68 +1010,73 @@ function createBaseCustomElementClass(win) {
       }
     }
 
-    /**
-     * If the element has a media attribute, evaluates the value as a media
-     * query and based on the result adds or removes the class
-     * `i-amphtml-hidden-by-media-query`. The class adds display:none to the
-     * element which in turn prevents any of the resource loading to happen for
-     * the element.
-     *
-     * This method is called by Resources and shouldn't be called by anyone
-     * else.
-     *
-     * @final
-     * @package
-     */
-    applySizesAndMediaQuery() {
-      assertNotTemplate(this);
+    /** @private */
+    initMediaAttrs_() {
+      const hasMediaAttrs =
+        this.hasAttribute('media') ||
+        (this.hasAttribute('sizes') &&
+          !this.hasAttribute('disable-inline-width')) ||
+        this.hasAttribute('heights');
+      const hadMediaAttrs = !!this.mediaQueryProps_;
+      const win = this.ownerDocument.defaultView;
+      if (hasMediaAttrs != hadMediaAttrs && win) {
+        if (hasMediaAttrs) {
+          this.mediaQueryProps_ = new MediaQueryProps(win, () =>
+            this.applyMediaAttrs_()
+          );
+          this.applyMediaAttrs_();
+        } else {
+          this.disposeMediaAttrs_();
+        }
+      }
+    }
 
-      // Media query.
-      if (this.mediaQuery_ === undefined) {
-        this.mediaQuery_ = this.getAttribute('media') || null;
-      }
-      if (this.mediaQuery_) {
-        const {defaultView} = this.ownerDocument;
-        this.classList.toggle(
-          'i-amphtml-hidden-by-media-query',
-          !defaultView.matchMedia(this.mediaQuery_).matches
-        );
+    /** @private */
+    disposeMediaAttrs_() {
+      if (this.mediaQueryProps_) {
+        this.mediaQueryProps_.dispose();
+        this.mediaQueryProps_ = null;
+      }
+    }
+
+    /** @private */
+    applyMediaAttrs_() {
+      const props = this.mediaQueryProps_;
+      if (!props) {
+        return;
       }
 
+      props.start();
+
+      // Media query.
+      const mediaAttr = this.getAttribute('media') || null;
+      const matchesMedia = mediaAttr
+        ? props.resolveMatchQuery(mediaAttr)
+        : true;
+      this.classList.toggle('i-amphtml-hidden-by-media-query', !matchesMedia);
+
       // Sizes.
-      if (this.sizeList_ === undefined) {
-        const sizesAttr = this.getAttribute('sizes');
-        const isDisabled = this.hasAttribute('disable-inline-width');
-        this.sizeList_ =
-          !isDisabled && sizesAttr ? parseSizeList(sizesAttr) : null;
-      }
-      if (this.sizeList_) {
-        setStyle(
-          this,
-          'width',
-          this.sizeList_.select(toWin(this.ownerDocument.defaultView))
-        );
+      const sizesAttr = this.hasAttribute('disable-inline-width')
+        ? null
+        : this.getAttribute('sizes');
+      if (sizesAttr) {
+        setStyle(this, 'width', props.resolveListQuery(sizesAttr));
       }
+
       // Heights.
-      if (
-        this.heightsList_ === undefined &&
+      const heightsAttr =
         this.layout_ === Layout.RESPONSIVE
-      ) {
-        const heightsAttr = this.getAttribute('heights');
-        this.heightsList_ = heightsAttr
-          ? parseSizeList(heightsAttr, /* allowPercent */ true)
+          ? this.getAttribute('heights')
           : null;
-      }
-      if (this.heightsList_) {
+      if (heightsAttr) {
         const sizer = this.getSizer_();
         if (sizer) {
-          setStyle(
-            sizer,
-            'paddingTop',
-            this.heightsList_.select(toWin(this.ownerDocument.defaultView))
-          );
+          setStyle(sizer, 'paddingTop', props.resolveListQuery(heightsAttr));
         }
       }
+
+      props.complete();
+      this.getResource_().requestMeasure();
     }
 
     /**
@@ -746,12 +1128,11 @@ function createBaseCustomElementClass(win) {
       if (this.isAwaitingSize_()) {
         this.sizeProvided_();
       }
-      this.dispatchCustomEvent(AmpEvents.SIZE_CHANGED);
+      dom.dispatchCustomEvent(this, AmpEvents.SIZE_CHANGED);
     }
 
     /**
-     * Called when the element is first connected to the DOM. Calls
-     * {@link firstAttachedCallback} if this is the first attachment.
+     * Called when the element is first connected to the DOM.
      *
      * This callback is guarded by checks to see if the element is still
      * connected.  Chrome and Safari can trigger connectedCallback even when
@@ -790,17 +1171,7 @@ function createBaseCustomElementClass(win) {
         const ampdocService = Services.ampdocServiceFor(win);
         const ampdoc = ampdocService.getAmpDoc(this);
         this.ampdoc_ = ampdoc;
-        // Load the pre-stubbed extension if needed.
-        const extensionId = this.tagName.toLowerCase();
-        if (
-          isStub(this.implementation_) &&
-          !ampdoc.declaresExtension(extensionId)
-        ) {
-          Services.extensionsFor(win).installExtensionForDoc(
-            ampdoc,
-            extensionId
-          );
-        }
+        elementConnectedCallback(ampdoc, this, this.implClass_);
       }
       if (!this.resources_) {
         // Resources can now be initialized since the ampdoc is now available.
@@ -814,37 +1185,38 @@ function createBaseCustomElementClass(win) {
           this.reset_();
         }
         if (this.isUpgraded()) {
-          if (reconstruct) {
+          if (reconstruct && !this.R1()) {
             this.getResources().upgraded(this);
           }
+          this.connected_();
           this.dispatchCustomEventForTesting(AmpEvents.ATTACHED);
         }
+        if (this.implClass_ && this.R1()) {
+          this.upgradeOrSchedule_();
+        }
       } else {
         this.everAttached = true;
 
         try {
-          this.layout_ = applyStaticLayout(this);
+          this.layout_ = applyStaticLayout(
+            this,
+            Services.platformFor(toWin(this.ownerDocument.defaultView)).isIe()
+          );
+          this.initMediaAttrs_();
         } catch (e) {
           reportError(e, this);
         }
-        if (!isStub(this.implementation_)) {
-          this.tryUpgrade_();
+        if (this.implClass_) {
+          this.upgradeOrSchedule_();
         }
         if (!this.isUpgraded()) {
           this.classList.add('amp-unresolved');
           this.classList.add('i-amphtml-unresolved');
-          // amp:attached is dispatched from the ElementStub class when it
-          // replayed the firstAttachedCallback call.
           this.dispatchCustomEventForTesting(AmpEvents.STUBBED);
         }
-        // Classically, sizes/media queries are applied just before
-        // Resource.measure. With IntersectionObserver, observe() is the
-        // equivalent which happens above in Resources.add(). Applying here
-        // also avoids unnecessary reinvocation during reparenting.
-        if (this.getResources().isIntersectionExperimentOn()) {
-          this.applySizesAndMediaQuery();
-        }
       }
+
+      this.toggleLoading(true);
     }
 
     /**
@@ -862,23 +1234,81 @@ function createBaseCustomElementClass(win) {
       this.classList.remove('i-amphtml-layout-awaiting-size');
     }
 
-    /** The Custom Elements V0 sibling to `connectedCallback`. */
-    attachedCallback() {
-      this.connectedCallback();
+    /**
+     * Upgrade or schedule element based on R1.
+     * @param {boolean=} opt_disablePreload
+     * @private @final
+     */
+    upgradeOrSchedule_(opt_disablePreload) {
+      if (!this.R1()) {
+        this.tryUpgrade_();
+        return;
+      }
+
+      if (this.mountPromise_) {
+        // Already mounting.
+        return;
+      }
+
+      // Schedule build and mount.
+      const scheduler = getSchedulerForDoc(this.getAmpDoc());
+      scheduler.schedule(this);
+
+      if (this.buildingPromise_) {
+        // Already built or building: just needs to be mounted.
+        this.setReadyStateInternal(
+          this.implClass_ && this.implClass_.usesLoading(this)
+            ? ReadyState.LOADING
+            : ReadyState.MOUNTING
+        );
+      } else {
+        // Not built yet: execute prebuild steps.
+        this.setReadyStateInternal(ReadyState.BUILDING);
+
+        // Schedule preconnects.
+        if (!opt_disablePreload) {
+          const urls = this.implClass_.getPreconnects(this);
+          if (urls && urls.length > 0) {
+            // If we do early preconnects we delay them a bit. This is kind of
+            // an unfortunate trade off, but it seems faster, because the DOM
+            // operations themselves are not free and might delay
+            const ampdoc = this.getAmpDoc();
+            startupChunk(ampdoc, () => {
+              const {win} = ampdoc;
+              if (!win) {
+                return;
+              }
+              const preconnect = Services.preconnectFor(win);
+              urls.forEach((url) =>
+                preconnect.url(ampdoc, url, /* alsoConnecting */ false)
+              );
+            });
+          }
+        }
+      }
     }
 
     /**
      * Try to upgrade the element with the provided implementation.
+     * @return {!Promise|undefined}
      * @private @final
      */
     tryUpgrade_() {
-      const impl = this.implementation_;
-      devAssert(!isStub(impl), 'Implementation must not be a stub');
+      if (this.isInTemplate_) {
+        return;
+      }
       if (this.upgradeState_ != UpgradeState.NOT_UPGRADED) {
         // Already upgraded or in progress or failed.
         return;
       }
 
+      const Ctor = devAssert(
+        this.implClass_,
+        'Implementation must not be a stub'
+      );
+
+      const impl = new Ctor(this);
+
       // The `upgradeCallback` only allows redirect once for the top-level
       // non-stub class. We may allow nested upgrades later, but they will
       // certainly be bad for performance.
@@ -890,7 +1320,7 @@ function createBaseCustomElementClass(win) {
         this.completeUpgrade_(impl, startTime);
       } else if (typeof res.then == 'function') {
         // It's a promise: wait until it's done.
-        res
+        return res
           .then((upgrade) => {
             this.completeUpgrade_(upgrade || impl, startTime);
           })
@@ -916,9 +1346,11 @@ function createBaseCustomElementClass(win) {
       this.disconnect(/* pretendDisconnected */ false);
     }
 
-    /** The Custom Elements V0 sibling to `disconnectedCallback`. */
-    detachedCallback() {
-      this.disconnectedCallback();
+    /** @private */
+    connected_() {
+      if (this.built_) {
+        this.impl_.attachedCallback();
+      }
     }
 
     /**
@@ -952,23 +1384,14 @@ function createBaseCustomElementClass(win) {
 
       this.isConnected_ = false;
       this.getResources().remove(this);
-      this.implementation_.detachedCallback();
-    }
-
-    /**
-     * Dispatches a custom event.
-     *
-     * @param {string} name
-     * @param {!Object=} opt_data Event data.
-     * @final
-     */
-    dispatchCustomEvent(name, opt_data) {
-      const data = opt_data || {};
-      // Constructors of events need to come from the correct window. Sigh.
-      const event = this.ownerDocument.createEvent('Event');
-      event.data = data;
-      event.initEvent(name, /* bubbles */ true, /* cancelable */ true);
-      this.dispatchEvent(event);
+      if (this.impl_) {
+        this.impl_.detachedCallback();
+      }
+      if (this.R1()) {
+        this.unmount();
+      }
+      this.toggleLoading(false);
+      this.disposeMediaAttrs_();
     }
 
     /**
@@ -982,7 +1405,7 @@ function createBaseCustomElementClass(win) {
       if (!getMode().test) {
         return;
       }
-      this.dispatchCustomEvent(name, opt_data);
+      dom.dispatchCustomEvent(this, name, opt_data);
     }
 
     /**
@@ -991,7 +1414,10 @@ function createBaseCustomElementClass(win) {
      * @final
      */
     prerenderAllowed() {
-      return this.implementation_.prerenderAllowed();
+      if (this.hasAttribute('noprerender')) {
+        return false;
+      }
+      return this.implClass_ ? this.implClass_.prerenderAllowed(this) : false;
     }
 
     /**
@@ -1000,7 +1426,7 @@ function createBaseCustomElementClass(win) {
      * @final
      */
     isBuildRenderBlocking() {
-      return this.implementation_.isBuildRenderBlocking();
+      return this.impl_ ? this.impl_.isBuildRenderBlocking() : false;
     }
 
     /**
@@ -1009,7 +1435,7 @@ function createBaseCustomElementClass(win) {
      * @final
      */
     createPlaceholder() {
-      return this.implementation_.createPlaceholderCallback();
+      return this.impl_ ? this.impl_.createPlaceholderCallback() : null;
     }
 
     /**
@@ -1021,7 +1447,9 @@ function createBaseCustomElementClass(win) {
      * @final
      */
     createLoaderLogo() {
-      return this.implementation_.createLoaderLogoCallback();
+      return this.implClass_
+        ? this.implClass_.createLoaderLogoCallback(this)
+        : {};
     }
 
     /**
@@ -1030,7 +1458,7 @@ function createBaseCustomElementClass(win) {
      * @final
      */
     renderOutsideViewport() {
-      return this.implementation_.renderOutsideViewport();
+      return this.impl_ ? this.impl_.renderOutsideViewport() : false;
     }
 
     /**
@@ -1040,7 +1468,7 @@ function createBaseCustomElementClass(win) {
      * @final
      */
     idleRenderOutsideViewport() {
-      return this.implementation_.idleRenderOutsideViewport();
+      return this.impl_ ? this.impl_.idleRenderOutsideViewport() : false;
     }
 
     /**
@@ -1055,13 +1483,12 @@ function createBaseCustomElementClass(win) {
     }
 
     /**
-     * Returns a previously measured layout box relative to the page. The
-     * fixed-position elements are relative to the top of the document.
-     * @return {!./layout-rect.LayoutRectDef}
+     * Returns a previously measured layout size.
+     * @return {!./layout-rect.LayoutSizeDef}
      * @final
      */
-    getPageLayoutBox() {
-      return this.getResource_().getPageLayoutBox();
+    getLayoutSize() {
+      return this.getResource_().getLayoutSize();
     }
 
     /**
@@ -1075,13 +1502,16 @@ function createBaseCustomElementClass(win) {
     /**
      * Returns a change entry for that should be compatible with
      * IntersectionObserverEntry.
-     * @return {!IntersectionObserverEntry} A change entry.
+     * @return {?IntersectionObserverEntry} A change entry.
      * @final
      */
     getIntersectionChangeEntry() {
-      const box = this.implementation_.getIntersectionElementLayoutBox();
+      const box = this.impl_
+        ? this.impl_.getIntersectionElementLayoutBox()
+        : this.getLayoutBox();
       const owner = this.getOwner();
-      const viewportBox = this.implementation_.getViewport().getRect();
+      const viewport = Services.viewportForDoc(this.getAmpDoc());
+      const viewportBox = viewport.getRect();
       // TODO(jridgewell, #4826): We may need to make this recursive.
       const ownerBox = owner && owner.getLayoutBox();
       return getIntersectionChangeEntry(box, ownerBox, viewportBox);
@@ -1109,9 +1539,10 @@ function createBaseCustomElementClass(win) {
      * should be called again when layout changes.
      * @return {boolean}
      * @package @final
+     * TODO(#31915): remove once R1 migration is complete.
      */
     isRelayoutNeeded() {
-      return this.implementation_.isRelayoutNeeded();
+      return this.impl_ ? this.impl_.isRelayoutNeeded() : false;
     }
 
     /**
@@ -1121,8 +1552,32 @@ function createBaseCustomElementClass(win) {
      * @return {!Promise<!./base-element.BaseElement>}
      */
     getImpl(waitForBuild = true) {
-      const waitFor = waitForBuild ? this.whenBuilt() : this.whenUpgraded();
-      return waitFor.then(() => this.implementation_);
+      const waitFor = waitForBuild ? this.build() : this.createImpl_();
+      return waitFor.then(() => this.impl_);
+    }
+
+    /**
+     * @return {!Promise<!./base-element.BaseElement>}
+     * @private
+     */
+    createImpl_() {
+      return this.signals_
+        .whenSignal(CommonSignals.READY_TO_UPGRADE)
+        .then(() => {
+          this.tryUpgrade_();
+          return this.whenUpgraded();
+        });
+    }
+
+    /**
+     * Returns the object which holds the API surface (the thing we add the
+     * custom methods/properties onto). In Bento, this is the imperative API
+     * object. In AMP, this is the BaseElement instance.
+     *
+     * @return {!Promise<!Object>}
+     */
+    getApi() {
+      return this.getImpl().then((impl) => impl.getApi());
     }
 
     /**
@@ -1144,43 +1599,56 @@ function createBaseCustomElementClass(win) {
      *
      * Can only be called on a upgraded and built element.
      *
+     * @param {!AbortSignal} signal
      * @return {!Promise}
      * @package @final
+     * TODO(#31915): remove once R1 migration is complete.
      */
-    layoutCallback() {
+    layoutCallback(signal) {
       assertNotTemplate(this);
       devAssert(this.isBuilt(), 'Must be built to receive viewport events');
+      // A lot of tests call layoutCallback manually, and don't pass a signal.
+      if ((!getMode().test || signal) && signal.aborted) {
+        return Promise.reject(cancellation());
+      }
+
       this.dispatchCustomEventForTesting(AmpEvents.LOAD_START);
       const isLoadEvent = this.layoutCount_ == 0; // First layout is "load".
       this.signals_.reset(CommonSignals.UNLOAD);
       if (isLoadEvent) {
         this.signals_.signal(CommonSignals.LOAD_START);
       }
-      if (this.perfOn_) {
-        this.getLayoutDelayMeter_().startLayout();
-      }
 
-      const promise = tryResolve(() => this.implementation_.layoutCallback());
+      // Potentially start the loading indicator.
+      this.toggleLoading(true);
+
+      const promise = tryResolve(() => this.impl_.layoutCallback());
       this.preconnect(/* onLayout */ true);
       this.classList.add('i-amphtml-layout');
 
       return promise.then(
         () => {
+          if ((!getMode().test || signal) && signal.aborted) {
+            throw cancellation();
+          }
           if (isLoadEvent) {
             this.signals_.signal(CommonSignals.LOAD_END);
           }
-          this.readyState = 'complete';
+          this.setReadyStateInternal(ReadyState.COMPLETE);
           this.layoutCount_++;
-          this.toggleLoading(false, {cleanup: true});
+          this.toggleLoading(false);
           // Check if this is the first success layout that needs
           // to call firstLayoutCompleted.
           if (!this.isFirstLayoutCompleted_) {
-            this.implementation_.firstLayoutCompleted();
+            this.impl_.firstLayoutCompleted();
             this.isFirstLayoutCompleted_ = true;
             this.dispatchCustomEventForTesting(AmpEvents.LOAD_END);
           }
         },
         (reason) => {
+          if ((!getMode().test || signal) && signal.aborted) {
+            throw cancellation();
+          }
           // add layoutCount_ by 1 despite load fails or not
           if (isLoadEvent) {
             this.signals_.rejectSignal(
@@ -1188,106 +1656,30 @@ function createBaseCustomElementClass(win) {
               /** @type {!Error} */ (reason)
             );
           }
+          this.setReadyStateInternal(ReadyState.ERROR, reason);
           this.layoutCount_++;
-          this.toggleLoading(false, {cleanup: true});
+          this.toggleLoading(false);
           throw reason;
         }
       );
     }
 
     /**
-     * Whether the resource is currently visible in the viewport.
-     * @return {boolean}
-     * @final @package
-     */
-    isInViewport() {
-      return this.isInViewport_;
-    }
-
-    /**
-     * Instructs the resource that it entered or exited the visible viewport.
+     * Pauses the element.
      *
-     * Can only be called on a upgraded and built element.
-     *
-     * @param {boolean} inViewport Whether the element has entered or exited
-     *   the visible viewport.
-     * @final @package
+     * @package @final
      */
-    viewportCallback(inViewport) {
-      assertNotTemplate(this);
-      if (inViewport == this.isInViewport_) {
-        return;
-      }
-      // TODO(dvoytenko, #9177): investigate/cleanup viewport signals for
-      // elements in dead iframes.
-      if (!this.ownerDocument || !this.ownerDocument.defaultView) {
+    pause() {
+      if (!this.isBuilt()) {
+        // Not built yet.
         return;
       }
-      this.isInViewport_ = inViewport;
-      if (this.layoutCount_ == 0) {
-        if (!inViewport) {
-          this.toggleLoading(false);
-        } else {
-          // Set a minimum delay in case the element loads very fast or if it
-          // leaves the viewport.
-          const loadingStartTime = win.Date.now();
-          Services.timerFor(toWin(this.ownerDocument.defaultView)).delay(() => {
-            // TODO(dvoytenko, #9177): cleanup `this.ownerDocument.defaultView`
-            // once investigation is complete. It appears that we get a lot of
-            // errors here once the iframe is destroyed due to timer.
-            if (
-              this.isInViewport_ &&
-              this.ownerDocument &&
-              this.ownerDocument.defaultView &&
-              this.layoutCount_ === 0 // Ensures that layoutCallback hasn't completed in this 100ms window.
-            ) {
-              this.toggleLoading(true, {startTime: loadingStartTime});
-            }
-          }, 100);
-        }
-      }
-      if (this.isBuilt()) {
-        this.updateInViewport_(inViewport);
-      }
-    }
 
-    /**
-     * @param {boolean} inViewport
-     * @private
-     */
-    updateInViewport_(inViewport) {
-      this.implementation_.inViewport_ = inViewport;
-      this.implementation_.viewportCallback(inViewport);
-      if (inViewport && this.perfOn_) {
-        this.getLayoutDelayMeter_().enterViewport();
-      }
-    }
+      this.impl_.pauseCallback();
 
-    /**
-     * Whether the resource is currently paused.
-     * @return {boolean}
-     * @final @package
-     */
-    isPaused() {
-      return this.paused_;
-    }
-
-    /**
-     * Requests the resource to stop its activity when the document goes into
-     * inactive state. The scope is up to the actual component. Among other
-     * things the active playback of video or audio content must be stopped.
-     *
-     * @package @final
-     */
-    pauseCallback() {
-      assertNotTemplate(this);
-      if (this.paused_) {
-        return;
-      }
-      this.paused_ = true;
-      this.viewportCallback(false);
-      if (this.isBuilt()) {
-        this.implementation_.pauseCallback();
+      // Legacy unlayoutOnPause support.
+      if (!this.R1() && this.impl_.unlayoutOnPause()) {
+        this.unlayout_();
       }
     }
 
@@ -1299,15 +1691,11 @@ function createBaseCustomElementClass(win) {
      *
      * @package @final
      */
-    resumeCallback() {
-      assertNotTemplate(this);
-      if (!this.paused_) {
+    resume() {
+      if (!this.isBuilt()) {
         return;
       }
-      this.paused_ = false;
-      if (this.isBuilt()) {
-        this.implementation_.resumeCallback();
-      }
+      this.impl_.resumeCallback();
     }
 
     /**
@@ -1318,6 +1706,7 @@ function createBaseCustomElementClass(win) {
      *
      * @return {boolean}
      * @package @final
+     * TODO(#31915): remove once R1 migration is complete.
      */
     unlayoutCallback() {
       assertNotTemplate(this);
@@ -1325,7 +1714,7 @@ function createBaseCustomElementClass(win) {
         return false;
       }
       this.signals_.signal(CommonSignals.UNLOAD);
-      const isReLayoutNeeded = this.implementation_.unlayoutCallback();
+      const isReLayoutNeeded = this.impl_.unlayoutCallback();
       if (isReLayoutNeeded) {
         this.reset_();
       }
@@ -1333,28 +1722,25 @@ function createBaseCustomElementClass(win) {
       return isReLayoutNeeded;
     }
 
+    /** @private */
+    unlayout_() {
+      this.getResource_().unlayout();
+      if (this.isConnected_ && this.resources_) {
+        this.resources_./*OK*/ schedulePass();
+      }
+    }
+
     /** @private */
     reset_() {
       this.layoutCount_ = 0;
       this.isFirstLayoutCompleted_ = false;
+      this.signals_.reset(CommonSignals.MOUNTED);
       this.signals_.reset(CommonSignals.RENDER_START);
       this.signals_.reset(CommonSignals.LOAD_START);
       this.signals_.reset(CommonSignals.LOAD_END);
       this.signals_.reset(CommonSignals.INI_LOAD);
     }
 
-    /**
-     * Whether to call {@link unlayoutCallback} when pausing the element.
-     * Certain elements cannot properly pause (like amp-iframes with unknown
-     * video content), and so we must unlayout to stop playback.
-     *
-     * @return {boolean}
-     * @package @final
-     */
-    unlayoutOnPause() {
-      return this.implementation_.unlayoutOnPause();
-    }
-
     /**
      * Whether the element needs to be reconstructed after it has been
      * re-parented. Many elements cannot survive fully the reparenting and
@@ -1364,7 +1750,7 @@ function createBaseCustomElementClass(win) {
      * @package @final
      */
     reconstructWhenReparented() {
-      return this.implementation_.reconstructWhenReparented();
+      return this.impl_ ? this.impl_.reconstructWhenReparented() : false;
     }
 
     /**
@@ -1372,7 +1758,9 @@ function createBaseCustomElementClass(win) {
      * element is no longer present.
      */
     collapse() {
-      this.implementation_./*OK*/ collapse();
+      if (this.impl_) {
+        this.impl_./*OK*/ collapse();
+      }
     }
 
     /**
@@ -1380,7 +1768,9 @@ function createBaseCustomElementClass(win) {
      * @param {!AmpElement} element
      */
     collapsedCallback(element) {
-      this.implementation_.collapsedCallback(element);
+      if (this.impl_) {
+        this.impl_.collapsedCallback(element);
+      }
     }
 
     /**
@@ -1388,15 +1778,9 @@ function createBaseCustomElementClass(win) {
      * element is now present.
      */
     expand() {
-      this.implementation_./*OK*/ expand();
-    }
-
-    /**
-     * Called every time an owned AmpElement expands itself.
-     * @param {!AmpElement} element
-     */
-    expandedCallback(element) {
-      this.implementation_.expandedCallback(element);
+      if (this.impl_) {
+        this.impl_./*OK*/ expand();
+      }
     }
 
     /**
@@ -1407,7 +1791,9 @@ function createBaseCustomElementClass(win) {
      * @param {!JsonObject<string, (null|boolean|string|number|Array|Object)>} mutations
      */
     mutatedAttributesCallback(mutations) {
-      this.implementation_.mutatedAttributesCallback(mutations);
+      if (this.impl_) {
+        this.impl_.mutatedAttributesCallback(mutations);
+      }
     }
 
     /**
@@ -1425,6 +1811,8 @@ function createBaseCustomElementClass(win) {
           this.actionQueue_ = [];
         }
         devAssert(this.actionQueue_).push(invocation);
+        // Schedule build sooner.
+        this.build();
       } else {
         this.executionAction_(invocation, false);
       }
@@ -1458,7 +1846,7 @@ function createBaseCustomElementClass(win) {
      */
     executionAction_(invocation, deferred) {
       try {
-        this.implementation_.executeAction(invocation, deferred);
+        this.impl_.executeAction(invocation, deferred);
       } catch (e) {
         rethrowAsync(
           'Action execution failed:',
@@ -1488,11 +1876,21 @@ function createBaseCustomElementClass(win) {
         // data-block-on-consent value not set, up to individual element
         // Note: data-block-on-consent and data-block-on-consent='default' is
         // treated exactly the same
-        return this.implementation_.getConsentPolicy();
+        return devAssert(this.impl_).getConsentPolicy();
       }
       return policyId;
     }
 
+    /**
+     * Get the purpose consents that should be granted.
+     * @return {Array<string>|undefined}
+     */
+    getPurposesConsent_() {
+      const purposes =
+        this.getAttribute('data-block-on-consent-purposes') || null;
+      return purposes?.replace(/\s+/g, '')?.split(',');
+    }
+
     /**
      * Returns the original nodes of the custom element without any service
      * nodes that could have been added for markup. These nodes can include
@@ -1579,6 +1977,7 @@ function createBaseCustomElementClass(win) {
       const resourceState = this.getResource_().getState();
       // Do not show fallback before layout
       if (
+        !this.R1() &&
         show &&
         (resourceState == ResourceState.NOT_BUILT ||
           resourceState == ResourceState.NOT_LAID_OUT ||
@@ -1615,10 +2014,11 @@ function createBaseCustomElementClass(win) {
 
     /**
      * Whether the loading can be shown for this element.
+     * @param {boolean} force
      * @return {boolean}
      * @private
      */
-    isLoadingEnabled_() {
+    isLoadingEnabled_(force) {
       // No loading indicator will be shown if either one of these conditions
       // true:
       // 1. The document is A4A.
@@ -1628,23 +2028,16 @@ function createBaseCustomElementClass(win) {
       // 4. The element is too small or has not yet been measured;
       // 5. The element has not been allowlisted;
       // 6. The element is an internal node (e.g. `placeholder` or `fallback`);
-      // 7. The element's layout is not a size-defining layout.
-      if (this.isInA4A()) {
-        return false;
-      }
-      if (this.loadingDisabled_ === undefined) {
-        this.loadingDisabled_ = this.hasAttribute('noloading');
-      }
+      // 7. The element's layout is not nodisplay.
 
       const laidOut =
         this.layoutCount_ > 0 || this.signals_.get(CommonSignals.RENDER_START);
       if (
-        this.loadingDisabled_ ||
-        (laidOut && !this.implementation_.isLoadingReused()) ||
-        this.layoutWidth_ <= 0 || // Layout is not ready or invisible
+        this.layout_ == Layout.NODISPLAY ||
+        this.hasAttribute('noloading') ||
+        (laidOut && !force) ||
         !isLoadingAllowed(this) ||
-        isInternalOrServiceNode(this) ||
-        !isLayoutSizeDefined(this.layout_)
+        isInternalOrServiceNode(this)
       ) {
         return false;
       }
@@ -1652,126 +2045,31 @@ function createBaseCustomElementClass(win) {
       return true;
     }
 
-    /**
-     * @return {boolean}
-     */
-    isInA4A() {
-      return (
-        // in FIE
-        (this.ampdoc_ && this.ampdoc_.win != this.ownerDocument.defaultView) ||
-        // in inabox
-        getMode().runtime == 'inabox'
-      );
-    }
-
-    /**
-     * Creates a loading object. The caller must ensure that loading can
-     * actually be shown. This method must also be called in the mutate
-     * context.
-     * @private
-     * @param {number=} startTime
-     */
-    prepareLoading_(startTime) {
-      if (!this.isLoadingEnabled_()) {
-        return;
-      }
-      if (!this.loadingContainer_) {
-        const doc = this.ownerDocument;
-        devAssert(doc);
-
-        const container = htmlFor(/** @type {!Document} */ (doc))`
-            <div class="i-amphtml-loading-container i-amphtml-fill-content
-              amp-hidden"></div>`;
-        const loadingElement = createLoaderElement(
-          this.getAmpDoc(),
-          this,
-          this.layoutWidth_,
-          this.layoutHeight_,
-          startTime
-        );
-
-        container.appendChild(loadingElement);
-
-        this.appendChild(container);
-        this.loadingContainer_ = container;
-        this.loadingElement_ = loadingElement;
-      }
-    }
-
     /**
      * Turns the loading indicator on or off.
      * @param {boolean} state
-     * @param {{cleanup:(boolean|undefined), startTime:(number|undefined)}=} opt_options
+     * @param {boolean=} force
      * @public @final
      */
-    toggleLoading(state, opt_options) {
-      const cleanup = opt_options && opt_options.cleanup;
-      const startTime = opt_options && opt_options.startTime;
-      assertNotTemplate(this);
-
-      if (state === this.loadingState_ && !opt_options) {
-        // Loading state is the same.
-        return;
-      }
-      this.loadingState_ = state;
-      if (!state && !this.loadingContainer_) {
-        return;
-      }
-
-      // Check if loading should be shown.
-      if (state && !this.isLoadingEnabled_()) {
-        this.loadingState_ = false;
+    toggleLoading(state, force = false) {
+      // TODO(dvoytenko, #9177): cleanup `this.ownerDocument.defaultView`
+      // once investigation is complete. It appears that we get a lot of
+      // errors here once the iframe is destroyed due to timer.
+      if (!this.ownerDocument || !this.ownerDocument.defaultView) {
         return;
       }
 
-      this.mutateOrInvoke_(
-        () => {
-          let state = this.loadingState_;
-          // Repeat "loading enabled" check because it could have changed while
-          // waiting for vsync.
-          if (state && !this.isLoadingEnabled_()) {
-            state = false;
-          }
-          if (state) {
-            this.prepareLoading_(startTime);
-          }
-          if (!this.loadingContainer_) {
-            return;
-          }
-
-          this.loadingContainer_.classList.toggle('amp-hidden', !state);
-          this.loadingElement_.classList.toggle('amp-active', state);
-
-          if (!state && cleanup && !this.implementation_.isLoadingReused()) {
-            const loadingContainer = this.loadingContainer_;
-            this.loadingContainer_ = null;
-            this.loadingElement_ = null;
-            this.mutateOrInvoke_(
-              () => {
-                dom.removeElement(loadingContainer);
-              },
-              undefined,
-              true
-            );
-          }
-        },
-        undefined,
-        /* skipRemeasure */ true
+      const loadingIndicator = Services.loadingIndicatorOrNull(
+        this.getAmpDoc()
       );
-    }
-
-    /**
-     * Returns an optional overflow element for this custom element.
-     * @return {!./layout-delay-meter.LayoutDelayMeter}
-     */
-    getLayoutDelayMeter_() {
-      if (!this.layoutDelayMeter_) {
-        this.layoutDelayMeter_ = new LayoutDelayMeter(
-          toWin(this.ownerDocument.defaultView),
-          this.getLayoutPriority()
-        );
+      if (loadingIndicator) {
+        state = state && this.isLoadingEnabled_(force);
+        if (state) {
+          loadingIndicator.track(this);
+        } else {
+          loadingIndicator.untrack(this);
+        }
       }
-      return this.layoutDelayMeter_;
     }
 
     /**
@@ -1868,15 +2166,6 @@ function assertNotTemplate(element) {
   devAssert(!element.isInTemplate_, 'Must never be called in template');
 }
 
-/**
- * Whether the implementation is a stub.
- * @param {?./base-element.BaseElement} impl
- * @return {boolean}
- */
-function isStub(impl) {
-  return impl instanceof ElementStub;
-}
-
 /**
  * Returns "true" for internal AMP nodes or for placeholder elements.
  * @param {!Node} node
@@ -1902,12 +2191,55 @@ function isInternalOrServiceNode(node) {
  *
  * @param {!Window} win The window in which to register the custom element.
  * @param {(typeof ./base-element.BaseElement)=} opt_implementationClass For testing only.
+ * @param {function(!./service/ampdoc-impl.AmpDoc, !AmpElement, ?(typeof BaseElement))=} opt_elementConnectedCallback
  * @return {!Object} Prototype of element.
+ * @visibleForTesting
  */
-export function createAmpElementForTesting(win, opt_implementationClass) {
-  const Element = createCustomElementClass(win);
+export function createAmpElementForTesting(
+  win,
+  opt_implementationClass,
+  opt_elementConnectedCallback
+) {
+  const Element = createCustomElementClass(
+    win,
+    opt_elementConnectedCallback || (() => {})
+  );
   if (getMode().test && opt_implementationClass) {
     Element.prototype.implementationClassForTesting = opt_implementationClass;
   }
   return Element;
 }
+
+/**
+ * @visibleForTesting
+ */
+export function resetStubsForTesting() {
+  stubbedElements.length = 0;
+}
+
+/**
+ * @param {!AmpElement} element
+ * @return {?(typeof BaseElement)}
+ * @visibleForTesting
+ */
+export function getImplClassSyncForTesting(element) {
+  return element.implClass_;
+}
+
+/**
+ * @param {!AmpElement} element
+ * @return {!BaseElement}
+ * @visibleForTesting
+ */
+export function getImplSyncForTesting(element) {
+  return element.impl_;
+}
+
+/**
+ * @param {!AmpElement} element
+ * @return {?Array<!./service/action-impl.ActionInvocation>|undefined}
+ * @visibleForTesting
+ */
+export function getActionQueueForTesting(element) {
+  return element.actionQueue_;
+}
diff --git a/src/document-fetcher.js b/src/document-fetcher.js
index d0287d08a6491..e5a6e928ba3be 100644
--- a/src/document-fetcher.js
+++ b/src/document-fetcher.js
@@ -21,7 +21,7 @@ import {
   setupInit,
   setupInput,
 } from './utils/xhr-utils';
-import {dict} from './utils/object';
+import {dict} from './core/types/object';
 import {user} from './log';
 
 /**
diff --git a/src/document-submit.js b/src/document-submit.js
index 57fb05d87bf5b..e38b542f5fbce 100644
--- a/src/document-submit.js
+++ b/src/document-submit.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from './action-constants';
+import {ActionTrust} from './core/constants/action-constants';
 import {
   SOURCE_ORIGIN_PARAM,
   assertHttpsUrl,
@@ -23,7 +23,6 @@ import {
 } from './url';
 import {Services} from './services';
 import {dev, user, userAssert} from './log';
-import {isExtensionScriptInNode} from './element-service';
 
 /**
  * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
@@ -32,15 +31,13 @@ import {isExtensionScriptInNode} from './element-service';
 export function installGlobalSubmitListenerForDoc(ampdoc) {
   // Register global submit event listener only if the amp-form
   // extension is used. Allowing the usage of native forms, otherwise.
-  return isExtensionScriptInNode(ampdoc, 'amp-form').then(
-    (ampFormInstalled) => {
-      if (ampFormInstalled) {
-        ampdoc
-          .getRootNode()
-          .addEventListener('submit', onDocumentFormSubmit_, true);
-      }
+  return ampdoc.whenExtensionsKnown().then(() => {
+    if (ampdoc.declaresExtension('amp-form')) {
+      ampdoc
+        .getRootNode()
+        .addEventListener('submit', onDocumentFormSubmit_, true);
     }
-  );
+  });
 }
 
 /**
diff --git a/src/dom.js b/src/dom.js
index 7fb70b126d8a1..20c81fde69ef5 100644
--- a/src/dom.js
+++ b/src/dom.js
@@ -14,15 +14,11 @@
  * limitations under the License.
  */
 
-import {Deferred} from './utils/promise';
-import {
-  assertIsName,
-  isScopeSelectorSupported,
-  prependSelectorsWith,
-} from './css';
+import {Deferred} from './core/data-structures/promise';
 import {dev, devAssert} from './log';
-import {dict} from './utils/object';
-import {includes, startsWith} from './string';
+import {dict} from './core/types/object';
+import {includes} from './core/types/string';
+import {isScopeSelectorSupported, prependSelectorsWith} from './core/dom/css';
 import {toWin} from './types';
 
 const HTML_ESCAPE_CHARS = {
@@ -41,12 +37,34 @@ export const UPGRADE_TO_CUSTOMELEMENT_PROMISE = '__AMP_UPG_PRM';
 /** @const {string} */
 export const UPGRADE_TO_CUSTOMELEMENT_RESOLVER = '__AMP_UPG_RES';
 
+/**
+ * @typedef {{
+ *   bubbles: (boolean|undefined),
+ *   cancelable: (boolean|undefined),
+ * }}
+ */
+export let CustomEventOptionsDef;
+
+/** @const {!CustomEventOptionsDef} */
+const DEFAULT_CUSTOM_EVENT_OPTIONS = {bubbles: true, cancelable: true};
+
+/**
+ * Asserts that name is just an alphanumeric word, and does not contain
+ * advanced CSS selector features like attributes, psuedo-classes, class names,
+ * nor ids.
+ * @param {string} name
+ */
+function assertIsName(name) {
+  devAssert(/^[\w-]+$/.test(name));
+}
+
 /**
  * Waits until the child element is constructed. Once the child is found, the
  * callback is executed.
  * @param {!Element} parent
  * @param {function(!Element):boolean} checkFunc
  * @param {function()} callback
+ * @suppress {suspiciousCode}
  */
 export function waitForChild(parent, checkFunc, callback) {
   if (checkFunc(parent)) {
@@ -55,7 +73,7 @@ export function waitForChild(parent, checkFunc, callback) {
   }
   /** @const {!Window} */
   const win = toWin(parent.ownerDocument.defaultView);
-  if (win.MutationObserver) {
+  if (IS_ESM || win.MutationObserver) {
     /** @const {MutationObserver} */
     const observer = new win.MutationObserver(() => {
       if (checkFunc(parent)) {
@@ -118,7 +136,7 @@ export function removeElement(element) {
 
 /**
  * Removes all child nodes of the specified element.
- * @param {!Element} parent
+ * @param {!Element|!DocumentFragment} parent
  */
 export function removeChildren(parent) {
   while (parent.firstChild) {
@@ -229,17 +247,20 @@ export function rootNodeFor(node) {
   }
   let n;
   // Check isShadowRoot() is only needed for the polyfill case.
-  for (n = node; !!n.parentNode && !isShadowRoot(n); n = n.parentNode) {}
+  for (
+    n = node;
+    !!n.parentNode && !isShadowRoot(/** @type {HTMLElement} */ (n));
+    n = n.parentNode
+  ) {}
   return n;
 }
 
 /**
  * Determines if value is actually a `ShadowRoot` node.
- * @param {*} value
+ * @param {HTMLElement} value
  * @return {boolean}
  */
 export function isShadowRoot(value) {
-  // TODO(#22733): remove in preference to dom's `rootNodeFor`.
   if (!value) {
     return false;
   }
@@ -415,7 +436,7 @@ export function childNodes(parent, callback) {
 
 /**
  * Finds the first child element that has the specified attribute.
- * @param {!Element} parent
+ * @param {!Element|!ShadowRoot} parent
  * @param {string} attr
  * @return {?Element}
  */
@@ -439,7 +460,7 @@ export function lastChildElementByAttr(parent, attr) {
 
 /**
  * Finds all child elements that has the specified attribute.
- * @param {!Element} parent
+ * @param {!Element|!ShadowRoot} parent
  * @param {string} attr
  * @return {!NodeList<!Element>}
  */
@@ -450,7 +471,7 @@ export function childElementsByAttr(parent, attr) {
 
 /**
  * Finds the first child element that has the specified tag name.
- * @param {!Element} parent
+ * @param {!Element|!ShadowRoot} parent
  * @param {string} tagName
  * @return {?Element}
  */
@@ -461,7 +482,7 @@ export function childElementByTag(parent, tagName) {
 
 /**
  * Finds all child elements with the specified tag name.
- * @param {!Element} parent
+ * @param {!Element|!ShadowRoot} parent
  * @param {string} tagName
  * @return {!NodeList<!Element>}
  */
@@ -506,7 +527,7 @@ export function elementByTag(element, tagName) {
  *
  * This method isn't required for modern builds, can be removed.
  *
- * @param {!Element} root
+ * @param {!Element|!ShadowRoot} root
  * @param {string} selector
  * @return {!NodeList<!Element>}
  */
@@ -522,12 +543,14 @@ function scopedQuerySelectionFallback(root, selector) {
 /**
  * Finds the first element that matches `selector`, scoped inside `root`.
  * Note: in IE, this causes a quick mutation of the element's class list.
- * @param {!Element} root
+ * @param {!Element|!ShadowRoot} root
  * @param {string} selector
  * @return {?Element}
+ *
+ * @suppress {suspiciousCode}
  */
 export function scopedQuerySelector(root, selector) {
-  if (isScopeSelectorSupported(root)) {
+  if (IS_ESM || isScopeSelectorSupported(root)) {
     return root./*OK*/ querySelector(prependSelectorsWith(selector, ':scope'));
   }
 
@@ -539,12 +562,14 @@ export function scopedQuerySelector(root, selector) {
 /**
  * Finds every element that matches `selector`, scoped inside `root`.
  * Note: in IE, this causes a quick mutation of the element's class list.
- * @param {!Element} root
+ * @param {!Element|!ShadowRoot} root
  * @param {string} selector
  * @return {!NodeList<!Element>}
+ *
+ * @suppress {suspiciousCode}
  */
 export function scopedQuerySelectorAll(root, selector) {
-  if (isScopeSelectorSupported(root)) {
+  if (IS_ESM || isScopeSelectorSupported(root)) {
     return root./*OK*/ querySelectorAll(
       prependSelectorsWith(selector, ':scope')
     );
@@ -557,7 +582,7 @@ export function scopedQuerySelectorAll(root, selector) {
 /**
  * Returns element data-param- attributes as url parameters key-value pairs.
  * e.g. data-param-some-attr=value -> {someAttr: value}.
- * @param {!Element} element
+ * @param {!HTMLElement} element
  * @param {function(string):string=} opt_computeParamNameFunc to compute the
  *    parameter name, get passed the camel-case parameter name.
  * @param {!RegExp=} opt_paramPattern Regex pattern to match data attributes.
@@ -758,7 +783,7 @@ export function isAmpElement(element) {
   // Use prefix to recognize AMP element. This is necessary because stub
   // may not be attached yet.
   return (
-    startsWith(tag, 'AMP-') &&
+    tag.startsWith('AMP-') &&
     // Some "amp-*" elements are not really AMP elements. :smh:
     !(tag == 'AMP-STICKY-AD-TOP-PADDING' || tag == 'AMP-BODY')
   );
@@ -767,14 +792,14 @@ export function isAmpElement(element) {
 /**
  * Return a promise that resolve when an AMP element upgrade from HTMLElement
  * to CustomElement
- * @param {!Element} element
- * @return {!Promise<!Element>}
+ * @param {!HTMLElement} element
+ * @return {!Promise<!AmpElement>}
  */
 export function whenUpgradedToCustomElement(element) {
   devAssert(isAmpElement(element), 'element is not AmpElement');
   if (element.createdCallback) {
     // Element already is CustomElement;
-    return Promise.resolve(element);
+    return Promise.resolve(/**@type {!AmpElement} */ (element));
   }
   // If Element is still HTMLElement, wait for it to upgrade to customElement
   // Note: use pure string to avoid obfuscation between versions.
@@ -865,7 +890,7 @@ export function isFullscreenElement(element) {
  * Returns true if node is not disabled.
  *
  * IE8 can return false positives, see {@link matches}.
- * @param {!Element} element
+ * @param {!HTMLInputElement} element
  * @return {boolean}
  * @see https://www.w3.org/TR/html5/forms.html#concept-fe-disabled
  */
@@ -927,6 +952,21 @@ export function toggleAttribute(element, name, forced) {
   return enabled;
 }
 
+/**
+ * Parses a string as a boolean value using the expanded rules for DOM boolean
+ * attributes:
+ * - a `null` or `undefined` returns `null`;
+ * - an empty string returns `true`;
+ * - a "false" string returns `false`;
+ * - otherwise, `true` is returned.
+ *
+ * @param {?string|undefined} s
+ * @return {boolean|undefined}
+ */
+export function parseBooleanAttribute(s) {
+  return s == null ? undefined : s !== 'false';
+}
+
 /**
  * @param {!Window} win
  * @return {number} The width of the vertical scrollbar, in pixels.
@@ -937,3 +977,35 @@ export function getVerticalScrollbarWidth(win) {
   const documentWidth = documentElement./*OK*/ clientWidth;
   return windowWidth - documentWidth;
 }
+
+/**
+ * Dispatches a custom event.
+ *
+ * @param {!Node} node
+ * @param {string} name
+ * @param {!Object=} opt_data Event data.
+ * @param {!CustomEventOptionsDef=} opt_options
+ */
+export function dispatchCustomEvent(node, name, opt_data, opt_options) {
+  const data = opt_data || {};
+  // Constructors of events need to come from the correct window. Sigh.
+  const event = node.ownerDocument.createEvent('Event');
+
+  // Technically .data is not a property of Event.
+  /**@type {?}*/ (event).data = data;
+
+  const {bubbles, cancelable} = opt_options || DEFAULT_CUSTOM_EVENT_OPTIONS;
+  event.initEvent(name, bubbles, cancelable);
+  node.dispatchEvent(event);
+}
+
+/**
+ * Ensures the child is contained by the parent, but not the parent itself.
+ *
+ * @param {!Node} parent
+ * @param {!Node} child
+ * @return {boolean}
+ */
+export function containsNotSelf(parent, child) {
+  return child !== parent && parent.contains(child);
+}
diff --git a/src/element-service.js b/src/element-service.js
index 870f8b9c381d7..41a54be6792cf 100644
--- a/src/element-service.js
+++ b/src/element-service.js
@@ -15,42 +15,18 @@
  */
 
 import * as dom from './dom';
+import {extensionScriptInNode} from './service/extension-script';
 import {
   getAmpdoc,
-  getExistingServiceForDocInEmbedScope,
   getService,
+  getServiceForDocOrNull,
   getServicePromise,
   getServicePromiseForDoc,
   getServicePromiseOrNull,
   getServicePromiseOrNullForDoc,
-  getTopWindow,
 } from './service';
-import {toWin} from './types';
 import {userAssert} from './log';
 
-/**
- * Returns a promise for a service for the given id and window. Also expects an
- * element that has the actual implementation. The promise resolves when the
- * implementation loaded. Users should typically wrap this as a special purpose
- * function (e.g. Services.viewportForDoc(...)) for type safety and because the
- * factory should not be passed around.
- * @param {!Window} win
- * @param {string} id of the service.
- * @param {string} extension Name of the custom extension that provides the
- *     implementation of this service.
- * @param {boolean=} opt_element Whether this service is provided by an element,
- *     not the extension.
- * @return {!Promise<*>}
- */
-export function getElementService(win, id, extension, opt_element) {
-  return getElementServiceIfAvailable(
-    win,
-    id,
-    extension,
-    opt_element
-  ).then((service) => assertService(service, id, extension));
-}
-
 /**
  * Same as getElementService but produces null if the given element is not
  * actually available on the current page.
@@ -58,29 +34,29 @@ export function getElementService(win, id, extension, opt_element) {
  * @param {string} id of the service.
  * @param {string} extension Name of the custom extension that provides the
  *     implementation of this service.
+ * @param {string} version The extension version.
  * @param {boolean=} opt_element Whether this service is provided by an
  *     element, not the extension.
  * @return {!Promise<?Object>}
  */
-export function getElementServiceIfAvailable(win, id, extension, opt_element) {
+export function getElementServiceIfAvailable(
+  win,
+  id,
+  extension,
+  version,
+  opt_element
+) {
   const s = getServicePromiseOrNull(win, id);
   if (s) {
     return /** @type {!Promise<?Object>} */ (s);
   }
-  return getElementServicePromiseOrNull(win, id, extension, opt_element);
-}
-
-/**
- * @param {!Window} win
- * @param {string} elementName Name of an extended custom element.
- * @return {boolean} Whether this element is scheduled to be loaded.
- */
-function isElementScheduled(win, elementName) {
-  // Set in custom-element.js
-  if (!win.__AMP_EXTENDED_ELEMENTS) {
-    return false;
-  }
-  return !!win.__AMP_EXTENDED_ELEMENTS[elementName];
+  return getElementServicePromiseOrNull(
+    win,
+    id,
+    extension,
+    version,
+    opt_element
+  );
 }
 
 /**
@@ -129,19 +105,25 @@ export function getElementServiceIfAvailableForDoc(
   }
   const ampdoc = getAmpdoc(element);
   return ampdoc
-    .waitForBodyOpen()
-    .then(() =>
-      waitForExtensionIfPresent(ampdoc.win, extension, ampdoc.win.document.head)
-    )
+    .whenExtensionsKnown()
     .then(() => {
+      const version = ampdoc.getExtensionVersion(extension);
+      if (!version) {
+        return null;
+      }
+      const extensions = getService(ampdoc.win, 'extensions');
+      return extensions.waitForExtension(extension, version);
+    })
+    .then((ext) => {
+      if (!ext) {
+        return null;
+      }
       // If this service is provided by an element, then we can't depend on
       // the service (they may not use the element).
       if (opt_element) {
         return getServicePromiseOrNullForDoc(element, id);
-      } else if (isElementScheduled(ampdoc.win, extension)) {
-        return getServicePromiseForDoc(element, id);
       }
-      return null;
+      return getServicePromiseForDoc(element, id);
     });
 }
 
@@ -161,19 +143,11 @@ export function getElementServiceIfAvailableForDocInEmbedScope(
   id,
   extension
 ) {
-  const s = getExistingServiceForDocInEmbedScope(element, id);
+  const s = getServiceForDocOrNull(element, id);
   if (s) {
     return /** @type {!Promise<?Object>} */ (Promise.resolve(s));
   }
-  const win = toWin(element.ownerDocument.defaultView);
-  const topWin = getTopWindow(win);
-  // In embeds, doc services are stored on the embed window.
-  if (win !== topWin) {
-    return getElementServicePromiseOrNull(win, id, extension);
-  } else {
-    // Only fallback to element's ampdoc (top-level) if not embedded.
-    return getElementServiceIfAvailableForDoc(element, id, extension);
-  }
+  return getElementServiceIfAvailableForDoc(element, id, extension);
 }
 
 /**
@@ -186,97 +160,18 @@ export function getElementServiceIfAvailableForDocInEmbedScope(
  * @closurePrimitive {asserts.matchesReturn}
  */
 function assertService(service, id, extension) {
-  return /** @type {!Object} */ (userAssert(
-    service,
-    'Service %s was requested to be provided through %s, ' +
-      'but %s is not loaded in the current page. To fix this ' +
-      'problem load the JavaScript file for %s in this page.',
-    id,
-    extension,
-    extension,
-    extension
-  ));
-}
-
-/**
- * Get list of all the extension JS files.
- * @param {HTMLHeadElement|Element|ShadowRoot} head
- * @return {!Array<string>}
- */
-export function extensionScriptsInNode(head) {
-  // ampdoc.getHeadNode() can return null.
-  if (!head) {
-    return [];
-  }
-  const scripts = {};
-  // Note: Some extensions don't have [custom-element] or [custom-template]
-  // e.g. amp-viewer-integration.
-  const list = head.querySelectorAll(
-    'script[custom-element],script[custom-template]'
+  return /** @type {!Object} */ (
+    userAssert(
+      service,
+      'Service %s was requested to be provided through %s, ' +
+        'but %s is not loaded in the current page. To fix this ' +
+        'problem load the JavaScript file for %s in this page.',
+      id,
+      extension,
+      extension,
+      extension
+    )
   );
-  for (let i = 0; i < list.length; i++) {
-    const script = list[i];
-    const name =
-      script.getAttribute('custom-element') ||
-      script.getAttribute('custom-template');
-    scripts[name] = true;
-  }
-  return Object.keys(scripts);
-}
-
-/**
- * Waits for body to be present then verifies that an extension script is
- * present in head for installation.
- * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
- * @param {string} extensionId
- * @return {!Promise<boolean>}
- */
-export function isExtensionScriptInNode(ampdoc, extensionId) {
-  return ampdoc.waitForBodyOpen().then(() => {
-    return extensionScriptInNode(ampdoc.getHeadNode(), extensionId);
-  });
-}
-
-/**
- * Verifies that an extension script is present in head for
- * installation.
- * @param {HTMLHeadElement|Element|ShadowRoot} head
- * @param {string} extensionId
- * @return {boolean}
- * @private
- */
-function extensionScriptInNode(head, extensionId) {
-  return extensionScriptsInNode(head).includes(extensionId);
-}
-
-/**
- * Waits for an extension if its script is present
- * @param {!Window} win
- * @param {string} extension
- * @param {HTMLHeadElement|Element|ShadowRoot} head
- * @return {!Promise}
- * @private
- */
-function waitForExtensionIfPresent(win, extension, head) {
-  /**
-   * If there is an extension script wait for it to load before trying
-   * to get the service. Prevents a race condition when everything but
-   * the extensions is in cache. If there is no script then it's either
-   * not present, or the service was defined by a test. In those cases
-   * we don't wait around for an extension that does not exist.
-   */
-
-  // TODO(jpettitt) investigate registerExtension to short circuit
-  // the dom call in extensionScriptsInNode()
-  if (!extensionScriptInNode(head, extension)) {
-    return Promise.resolve();
-  }
-
-  const extensions = getService(win, 'extensions');
-  return /** @type {!Promise<?Object>} */ (extensions.waitForExtension(
-    win,
-    extension
-  ));
 }
 
 /**
@@ -285,22 +180,44 @@ function waitForExtensionIfPresent(win, extension, head) {
  * @param {!Window} win
  * @param {string} id
  * @param {string} extension
+ * @param {string} version
  * @param {boolean=} opt_element
  * @return {!Promise<Object>}
  * @private
  */
-function getElementServicePromiseOrNull(win, id, extension, opt_element) {
+function getElementServicePromiseOrNull(
+  win,
+  id,
+  extension,
+  version,
+  opt_element
+) {
   return dom
     .waitForBodyOpenPromise(win.document)
-    .then(() => waitForExtensionIfPresent(win, extension, win.document.head))
     .then(() => {
+      // If there is an extension script wait for it to load before trying
+      // to get the service. Prevents a race condition when everything but
+      // the extensions is in cache. If there is no script then it's either
+      // not present, or the service was defined by a test. In those cases
+      // we don't wait around for an extension that does not exist.
+      const extensions = getService(win, 'extensions');
+
+      // TODO(jpettitt) investigate registerExtension to short circuit
+      // the dom call in extensionScriptsInNode()
+      if (!extensionScriptInNode(extensions.win, extension, version)) {
+        return null;
+      }
+      return extensions.waitForExtension(extension, version);
+    })
+    .then((ext) => {
+      if (!ext) {
+        return null;
+      }
       // If this service is provided by an element, then we can't depend on
       // the service (they may not use the element).
       if (opt_element) {
         return getServicePromiseOrNull(win, id);
-      } else if (isElementScheduled(win, extension)) {
-        return getServicePromise(win, id);
       }
-      return null;
+      return getServicePromise(win, id);
     });
 }
diff --git a/src/element-stub.js b/src/element-stub.js
index 47fe9516db41f..bc5c4d0be270f 100644
--- a/src/element-stub.js
+++ b/src/element-stub.js
@@ -15,33 +15,6 @@
  */
 
 import {BaseElement} from './base-element';
-import {devAssert} from './log';
 
-/** @type {!Array} */
-export const stubbedElements = [];
-
-export class ElementStub extends BaseElement {
-  /** @param {!AmpElement} element */
-  constructor(element) {
-    super(element);
-    stubbedElements.push(this);
-  }
-
-  /** @override */
-  getLayoutPriority() {
-    return devAssert(0, 'Cannot get priority of stubbed element');
-  }
-
-  /** @override */
-  isLayoutSupported(unusedLayout) {
-    // Always returns true and will eventually call this method on the actual
-    // element.
-    return true;
-  }
-
-  /** @override */
-  reconstructWhenReparented() {
-    // No real state so no reason to reconstruct.
-    return false;
-  }
-}
+// TODO(#31915): completely eliminate this class.
+export class ElementStub extends BaseElement {}
diff --git a/src/error-reporting.js b/src/error-reporting.js
new file mode 100644
index 0000000000000..0f9333b427395
--- /dev/null
+++ b/src/error-reporting.js
@@ -0,0 +1,704 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {AmpEvents} from './core/constants/amp-events';
+import {Services} from './services';
+import {
+  USER_ERROR_SENTINEL,
+  dev,
+  isUserErrorEmbed,
+  isUserErrorMessage,
+} from './log';
+import {dict} from './core/types/object';
+import {duplicateErrorIfNecessary} from './core/error';
+import {experimentTogglesOrNull, getBinaryType, isCanary} from './experiments';
+import {exponentialBackoff} from './core/types/function/exponential-backoff';
+import {findIndex} from './core/types/array';
+import {getMode} from './mode';
+import {isLoadErrorMessage} from './event-helper';
+import {isProxyOrigin} from './url';
+import {makeBodyVisibleRecovery} from './style-installer';
+import {triggerAnalyticsEvent} from './analytics';
+import {urls} from './config';
+
+/**
+ * @const {string}
+ */
+const CANCELLED = 'CANCELLED';
+
+/**
+ * @const {string}
+ */
+const BLOCK_BY_CONSENT = 'BLOCK_BY_CONSENT';
+
+/**
+ * @const {string}
+ */
+const ABORTED = 'AbortError';
+
+/**
+ * The threshold for errors throttled because nothing can be done about
+ * them, but we'd still like to report the rough number.
+ * @const {number}
+ */
+const NON_ACTIONABLE_ERROR_THROTTLE_THRESHOLD = 0.001;
+
+/**
+ * The threshold for errors throttled because nothing can be done about
+ * them, but we'd still like to report the rough number.
+ * @const {number}
+ */
+const USER_ERROR_THROTTLE_THRESHOLD = 0.1;
+
+/**
+ * Chance to post to the new error reporting endpoint.
+ * @const {number}
+ */
+const BETA_ERROR_REPORT_URL_FREQ = 0.1;
+
+/**
+ * Collects error messages, so they can be included in subsequent reports.
+ * That allows identifying errors that might be caused by previous errors.
+ */
+let accumulatedErrorMessages = self.__AMP_ERRORS || [];
+// Use a true global, to avoid multi-module inclusion issues.
+self.__AMP_ERRORS = accumulatedErrorMessages;
+
+/**
+ * Pushes element into array, keeping at most the most recent limit elements
+ *
+ * @param {!Array<T>} array
+ * @param {T} element
+ * @param {number} limit
+ * @template T
+ */
+function pushLimit(array, element, limit) {
+  if (array.length >= limit) {
+    array.splice(0, array.length - limit + 1);
+  }
+  array.push(element);
+}
+
+/**
+ * A wrapper around our exponentialBackoff, to lazy initialize it to avoid an
+ * un-DCE'able side-effect.
+ * @param {function()} work the function to execute after backoff
+ * @return {number} the setTimeout id
+ */
+let reportingBackoff = function (work) {
+  // Set reportingBackoff as the lazy-created function. JS Vooodoooo.
+  reportingBackoff = exponentialBackoff(1.5);
+  return reportingBackoff(work);
+};
+
+/**
+ * Attempts to stringify a value, falling back to String.
+ * @param {*} value
+ * @return {string}
+ */
+function tryJsonStringify(value) {
+  try {
+    // Cast is fine, because we really don't care here. Just trying.
+    return JSON.stringify(/** @type {!JsonObject} */ (value));
+  } catch (e) {
+    return String(value);
+  }
+}
+
+/**
+ * @param {!Window} win
+ * @param {*} error
+ * @param {!Element=} opt_associatedElement
+ */
+export function reportErrorForWin(win, error, opt_associatedElement) {
+  reportError(error, opt_associatedElement);
+  if (
+    error &&
+    !!win &&
+    isUserErrorMessage(error.message) &&
+    !isUserErrorEmbed(error.message)
+  ) {
+    reportErrorToAnalytics(/** @type {!Error} */ (error), win);
+  }
+}
+
+/**
+ * Reports an error. If the error has an "associatedElement" property
+ * the element is marked with the `i-amphtml-element-error` and displays
+ * the message itself. The message is always send to the console.
+ * If the error has a "messageArray" property, that array is logged.
+ * This way one gets the native fidelity of the console for things like
+ * elements instead of stringification.
+ * @param {*} error
+ * @param {!Element=} opt_associatedElement
+ * @return {!Error}
+ */
+export function reportError(error, opt_associatedElement) {
+  try {
+    // Convert error to the expected type.
+    let isValidError;
+    if (error) {
+      if (error.message !== undefined) {
+        error = duplicateErrorIfNecessary(/** @type {!Error} */ (error));
+        isValidError = true;
+      } else {
+        const origError = error;
+        error = new Error(tryJsonStringify(origError));
+        error.origError = origError;
+      }
+    } else {
+      error = new Error('Unknown error');
+    }
+    // Report if error is not an expected type.
+    if (!isValidError && getMode().localDev && !getMode().test) {
+      setTimeout(function () {
+        const rethrow = new Error(
+          '_reported_ Error reported incorrectly: ' + error
+        );
+        throw rethrow;
+      });
+    }
+
+    if (error.reported) {
+      return /** @type {!Error} */ (error);
+    }
+    error.reported = true;
+
+    // `associatedElement` is used to add the i-amphtml-error class; in
+    // `#development=1` mode, it also adds `i-amphtml-element-error` to the
+    // element and sets the `error-message` attribute.
+    if (error.messageArray) {
+      const elIndex = findIndex(error.messageArray, (item) => item?.tagName);
+      if (elIndex > -1) {
+        error.associatedElement = error.messageArray[elIndex];
+      }
+    }
+    // Update element.
+    const element = opt_associatedElement || error.associatedElement;
+    if (element && element.classList) {
+      element.classList.add('i-amphtml-error');
+      if (getMode().development) {
+        element.classList.add('i-amphtml-element-error');
+        element.setAttribute('error-message', error.message);
+      }
+    }
+
+    // Report to console.
+    if (
+      self.console &&
+      (isUserErrorMessage(error.message) ||
+        !error.expected ||
+        getMode().localDev)
+    ) {
+      const output = console.error || console.log;
+      if (error.messageArray) {
+        output.apply(console, error.messageArray);
+      } else {
+        if (element) {
+          output.call(console, error.message, element);
+        } else if (!getMode().minified) {
+          output.call(console, error.stack);
+        } else {
+          output.call(console, error.message);
+        }
+      }
+    }
+    if (element && element.dispatchCustomEventForTesting) {
+      element.dispatchCustomEventForTesting(AmpEvents.ERROR, error.message);
+    }
+
+    // 'call' to make linter happy. And .call to make compiler happy
+    // that expects some @this.
+    onError['call'](self, undefined, undefined, undefined, undefined, error);
+  } catch (errorReportingError) {
+    setTimeout(function () {
+      throw errorReportingError;
+    });
+  }
+  return /** @type {!Error} */ (error);
+}
+
+/**
+ * Returns an error for a cancellation of a promise.
+ * @return {!Error}
+ */
+export function cancellation() {
+  return new Error(CANCELLED);
+}
+
+/**
+ * @param {*} errorOrMessage
+ * @return {boolean}
+ */
+export function isCancellation(errorOrMessage) {
+  if (!errorOrMessage) {
+    return false;
+  }
+  if (typeof errorOrMessage == 'string') {
+    return errorOrMessage.startsWith(CANCELLED);
+  }
+  if (typeof errorOrMessage.message == 'string') {
+    return errorOrMessage.message.startsWith(CANCELLED);
+  }
+  return false;
+}
+
+/**
+ * Returns an error for component blocked by consent
+ * @return {!Error}
+ */
+export function blockedByConsentError() {
+  return new Error(BLOCK_BY_CONSENT);
+}
+
+/**
+ * @param {*} errorOrMessage
+ * @return {boolean}
+ */
+export function isBlockedByConsent(errorOrMessage) {
+  if (!errorOrMessage) {
+    return false;
+  }
+  if (typeof errorOrMessage == 'string') {
+    return errorOrMessage.startsWith(BLOCK_BY_CONSENT);
+  }
+  if (typeof errorOrMessage.message == 'string') {
+    return errorOrMessage.message.startsWith(BLOCK_BY_CONSENT);
+  }
+  return false;
+}
+
+/**
+ * Install handling of global unhandled exceptions.
+ * @param {!Window} win
+ */
+export function installErrorReporting(win) {
+  win.onerror = /** @type {!Function} */ (onError);
+  win.addEventListener('unhandledrejection', (event) => {
+    if (
+      event.reason &&
+      (event.reason.message === CANCELLED ||
+        event.reason.message === BLOCK_BY_CONSENT ||
+        event.reason.message === ABORTED)
+    ) {
+      event.preventDefault();
+      return;
+    }
+    reportError(event.reason || new Error('rejected promise ' + event));
+  });
+}
+
+/**
+ * Signature designed, so it can work with window.onerror
+ * @param {string|undefined} message
+ * @param {string|undefined} filename
+ * @param {string|undefined} line
+ * @param {string|undefined} col
+ * @param {*|undefined} error
+ * @this {!Window|undefined}
+ */
+function onError(message, filename, line, col, error) {
+  // Make an attempt to unhide the body but don't if the error is actually expected.
+  // eslint-disable-next-line local/no-invalid-this
+  if (this && this.document && (!error || !error.expected)) {
+    // eslint-disable-next-line local/no-invalid-this
+    makeBodyVisibleRecovery(this.document);
+  }
+  if (getMode().localDev || getMode().development || getMode().test) {
+    return;
+  }
+  let hasNonAmpJs = false;
+  try {
+    hasNonAmpJs = detectNonAmpJs(self);
+  } catch (ignore) {
+    // Ignore errors during error report generation.
+  }
+  if (hasNonAmpJs && Math.random() > 0.01) {
+    // Only report 1% of errors on pages with non-AMP JS.
+    // These errors can almost never be acted upon, but spikes such as
+    // due to buggy browser extensions may be helpful to notify authors.
+    return;
+  }
+  const data = getErrorReportData(
+    message,
+    filename,
+    line,
+    col,
+    error,
+    hasNonAmpJs
+  );
+  if (data) {
+    reportingBackoff(() => {
+      try {
+        return reportErrorToServerOrViewer(
+          // eslint-disable-next-line local/no-invalid-this
+          this,
+          /** @type {!JsonObject} */
+          (data)
+        ).catch(() => {
+          // catch async errors to avoid recursive errors.
+        });
+      } catch (e) {
+        // catch async errors to avoid recursive errors.
+      }
+    });
+  }
+}
+
+/**
+ * Determines the error reporting endpoint which should be used.
+ * If changing this URL, keep `docs/spec/amp-errors.md` in sync.
+ * @return {string} error reporting endpoint URL.
+ */
+function chooseReportingUrl_() {
+  return Math.random() < BETA_ERROR_REPORT_URL_FREQ
+    ? urls.betaErrorReporting
+    : urls.errorReporting;
+}
+
+/**
+ * Passes the given error data to either server or viewer.
+ * @param {!Window} win
+ * @param {!JsonObject} data Data from `getErrorReportData`.
+ * @return {Promise<undefined>}
+ */
+export function reportErrorToServerOrViewer(win, data) {
+  // Report the error to viewer if it has the capability. The data passed
+  // to the viewer is exactly the same as the data passed to the server
+  // below.
+
+  // Throttle reports from Stable by 90%.
+  if (data['pt'] && Math.random() < 0.9) {
+    return Promise.resolve();
+  }
+
+  return maybeReportErrorToViewer(win, data).then((reportedErrorToViewer) => {
+    if (!reportedErrorToViewer) {
+      const xhr = new XMLHttpRequest();
+      xhr.open('POST', chooseReportingUrl_(), true);
+      xhr.send(JSON.stringify(data));
+    }
+  });
+}
+
+/**
+ * Passes the given error data to the viewer if the following criteria is met:
+ * - The viewer is a trusted viewer
+ * - The viewer has the `errorReporter` capability
+ * - The AMP doc is in single doc mode
+ * - The AMP doc is opted-in for error interception (`<html>` tag has the
+ *   `report-errors-to-viewer` attribute)
+ *
+ * @param {!Window} win
+ * @param {!JsonObject} data Data from `getErrorReportData`.
+ * @return {!Promise<boolean>} `Promise<True>` if the error was sent to the
+ *     viewer, `Promise<False>` otherwise.
+ * @visibleForTesting
+ */
+export function maybeReportErrorToViewer(win, data) {
+  const ampdocService = Services.ampdocServiceFor(win);
+  if (!ampdocService.isSingleDoc()) {
+    return Promise.resolve(false);
+  }
+  const ampdocSingle = ampdocService.getSingleDoc();
+  const htmlElement = ampdocSingle.getRootNode().documentElement;
+  const docOptedIn = htmlElement.hasAttribute('report-errors-to-viewer');
+  if (!docOptedIn) {
+    return Promise.resolve(false);
+  }
+  const viewer = Services.viewerForDoc(ampdocSingle);
+  if (!viewer.hasCapability('errorReporter')) {
+    return Promise.resolve(false);
+  }
+  return viewer.isTrustedViewer().then((viewerTrusted) => {
+    if (!viewerTrusted) {
+      return false;
+    }
+    viewer.sendMessage('error', errorReportingDataForViewer(data));
+    return true;
+  });
+}
+
+/**
+ * Strips down the error reporting data to a minimal set
+ * to be sent to the viewer.
+ * @param {!JsonObject} errorReportData
+ * @return {!JsonObject}
+ * @visibleForTesting
+ */
+export function errorReportingDataForViewer(errorReportData) {
+  return dict({
+    'm': errorReportData['m'], // message
+    'a': errorReportData['a'], // isUserError
+    's': errorReportData['s'], // error stack
+    'el': errorReportData['el'], // tagName
+    'ex': errorReportData['ex'], // expected error?
+    'v': errorReportData['v'], // runtime
+    'pt': errorReportData['pt'], // is pre-throttled
+  });
+}
+
+/**
+ * @param {string|undefined}  message
+ * @param {*|undefined} error
+ * @return {string}
+ */
+function buildErrorMessage_(message, error) {
+  if (error) {
+    if (error.message) {
+      message = error.message;
+    } else {
+      // This should never be a string, but sometimes it is.
+      message = String(error);
+    }
+  }
+  if (!message) {
+    message = 'Unknown error';
+  }
+
+  return message;
+}
+
+/**
+ * Signature designed, so it can work with window.onerror
+ * @param {string|undefined} message
+ * @param {string|undefined} filename
+ * @param {string|undefined} line
+ * @param {string|undefined} col
+ * @param {*|undefined} error
+ * @param {boolean} hasNonAmpJs
+ * @return {!JsonObject|undefined} The data to post
+ * visibleForTesting
+ */
+export function getErrorReportData(
+  message,
+  filename,
+  line,
+  col,
+  error,
+  hasNonAmpJs
+) {
+  message = buildErrorMessage_(message, error);
+  // An "expected" error is still an error, i.e. some features are disabled
+  // or not functioning fully because of it. However, it's an expected
+  // error. E.g. as is the case with some browser API missing (storage).
+  // Thus, the error can be classified differently by log aggregators.
+  // The main goal is to monitor that an "expected" error doesn't deteriorate
+  // over time. It's impossible to completely eliminate it.
+  let expected = !!(error && error.expected);
+  if (/_reported_/.test(message)) {
+    return;
+  }
+  if (message == CANCELLED) {
+    return;
+  }
+
+  const detachedWindow = !(self && self.window);
+  const throttleBase = Math.random();
+
+  // We throttle load errors and generic "Script error." errors
+  // that have no information and thus cannot be acted upon.
+  if (
+    isLoadErrorMessage(message) ||
+    // See https://github.com/ampproject/amphtml/issues/7353
+    // for context.
+    message == 'Script error.' ||
+    // Window has become detached, really anything can happen
+    // at this point.
+    detachedWindow
+  ) {
+    expected = true;
+
+    if (throttleBase > NON_ACTIONABLE_ERROR_THROTTLE_THRESHOLD) {
+      return;
+    }
+  }
+
+  const isUserError = isUserErrorMessage(message);
+
+  // Only report a subset of user errors.
+  if (isUserError && throttleBase > USER_ERROR_THROTTLE_THRESHOLD) {
+    return;
+  }
+
+  // This is the App Engine app in
+  // https://github.com/ampproject/error-tracker
+  // It stores error reports via https://cloud.google.com/error-reporting/
+  // for analyzing production issues.
+  const data = /** @type {!JsonObject} */ (Object.create(null));
+  data['v'] = getMode().rtvVersion;
+  data['noAmp'] = hasNonAmpJs ? '1' : '0';
+  data['m'] = message.replace(USER_ERROR_SENTINEL, '');
+  data['a'] = isUserError ? '1' : '0';
+
+  // Errors are tagged with "ex" ("expected") label to allow loggers to
+  // classify these errors as benchmarks and not exceptions.
+  data['ex'] = expected ? '1' : '0';
+  data['dw'] = detachedWindow ? '1' : '0';
+
+  let runtime = '1p';
+  if (IS_SXG) {
+    runtime = 'sxg';
+    data['sxg'] = '1';
+  } else if (IS_ESM) {
+    runtime = 'esm';
+    data['esm'] = '1';
+  } else if (self.context && self.context.location) {
+    data['3p'] = '1';
+    runtime = '3p';
+  } else if (getMode().runtime) {
+    runtime = getMode().runtime;
+  }
+
+  data['rt'] = runtime;
+
+  // Add our a4a id if we are inabox
+  if (runtime === 'inabox') {
+    data['adid'] = getMode().a4aId;
+  }
+
+  // TODO(erwinm): Remove ca when all systems read `bt` instead of `ca` to
+  // identify js binary type.
+  data['ca'] = isCanary(self) ? '1' : '0';
+
+  // Pass binary type.
+  data['bt'] = getBinaryType(self);
+
+  if (self.location.ancestorOrigins && self.location.ancestorOrigins[0]) {
+    data['or'] = self.location.ancestorOrigins[0];
+  }
+  if (self.viewerState) {
+    data['vs'] = self.viewerState;
+  }
+  // Is embedded?
+  if (self.parent && self.parent != self) {
+    data['iem'] = '1';
+  }
+
+  if (self.AMP && self.AMP.viewer) {
+    const resolvedViewerUrl = self.AMP.viewer.getResolvedViewerUrl();
+    const messagingOrigin = self.AMP.viewer.maybeGetMessagingOrigin();
+    if (resolvedViewerUrl) {
+      data['rvu'] = resolvedViewerUrl;
+    }
+    if (messagingOrigin) {
+      data['mso'] = messagingOrigin;
+    }
+  }
+
+  const exps = [];
+  const experiments = experimentTogglesOrNull(self);
+  for (const exp in experiments) {
+    const on = experiments[exp];
+    exps.push(`${exp}=${on ? '1' : '0'}`);
+  }
+  data['exps'] = exps.join(',');
+
+  if (error) {
+    data['el'] = error.associatedElement?.tagName || 'u'; // Unknown
+
+    if (error.args) {
+      data['args'] = JSON.stringify(error.args);
+    }
+
+    if (!isUserError && !error.ignoreStack && error.stack) {
+      data['s'] = error.stack;
+    }
+
+    // TODO(jridgewell, #18574); Make sure error is always an object.
+    if (error.message) {
+      error.message += ' _reported_';
+    }
+  } else {
+    data['f'] = filename || '';
+    data['l'] = line || '';
+    data['c'] = col || '';
+  }
+  data['r'] = self.document ? self.document.referrer : '';
+  data['ae'] = accumulatedErrorMessages.join(',');
+  data['fr'] = self.location['originalHash'] || self.location.hash;
+
+  // TODO(https://github.com/ampproject/error-tracker/issues/129): Remove once
+  // all clients are serving a version with pre-throttling.
+  if (data['bt'] === 'production') {
+    // Setting this field allows the error reporting service to know that this
+    // error has already been pre-throttled for Stable, so it doesn't need to
+    // throttle again.
+    data['pt'] = '1';
+  }
+
+  pushLimit(accumulatedErrorMessages, message, 25);
+
+  return data;
+}
+
+/**
+ * Returns true if it appears like there is non-AMP JS on the
+ * current page.
+ * @param {!Window} win
+ * @return {boolean}
+ * @visibleForTesting
+ */
+export function detectNonAmpJs(win) {
+  if (!win.document) {
+    return false;
+  }
+  const scripts = win.document.querySelectorAll('script[src]');
+  for (let i = 0; i < scripts.length; i++) {
+    if (!isProxyOrigin(scripts[i].src.toLowerCase())) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Resets accumulated error messages for testing
+ */
+export function resetAccumulatedErrorMessagesForTesting() {
+  accumulatedErrorMessages = [];
+}
+
+/**
+ * @param {!Error} error
+ * @param {!Window} win
+ */
+export function reportErrorToAnalytics(error, win) {
+  // Currently this can only be executed in a single-doc mode. Otherwise,
+  // it's not clear which ampdoc the event would belong too.
+  if (Services.ampdocServiceFor(win).isSingleDoc()) {
+    const vars = dict({
+      'errorName': error.name,
+      'errorMessage': error.message,
+    });
+    triggerAnalyticsEvent(
+      getRootElement_(win),
+      'user-error',
+      vars,
+      /** enableDataVars */ false
+    );
+  }
+}
+
+/**
+ * @param {!Window} win
+ * @return {!Element}
+ * @private
+ */
+function getRootElement_(win) {
+  const root = Services.ampdocServiceFor(win).getSingleDoc().getRootNode();
+  return dev().assertElement(root.documentElement || root.body || root);
+}
diff --git a/src/error.js b/src/error.js
deleted file mode 100644
index 830ebd25303c3..0000000000000
--- a/src/error.js
+++ /dev/null
@@ -1,752 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {AmpEvents} from './amp-events';
-import {Services} from './services';
-import {
-  USER_ERROR_SENTINEL,
-  dev,
-  duplicateErrorIfNecessary,
-  isUserErrorEmbed,
-  isUserErrorMessage,
-} from './log';
-import {dict} from './utils/object';
-import {experimentTogglesOrNull, getBinaryType, isCanary} from './experiments';
-import {exponentialBackoff} from './exponential-backoff';
-import {getMode} from './mode';
-import {isLoadErrorMessage} from './event-helper';
-import {isProxyOrigin} from './url';
-import {makeBodyVisibleRecovery} from './style-installer';
-import {startsWith} from './string';
-import {triggerAnalyticsEvent} from './analytics';
-import {urls} from './config';
-
-/**
- * @const {string}
- */
-const CANCELLED = 'CANCELLED';
-
-/**
- * @const {string}
- */
-const BLOCK_BY_CONSENT = 'BLOCK_BY_CONSENT';
-
-/**
- * @const {string}
- */
-const ABORTED = 'AbortError';
-
-/**
- * The threshold for errors throttled because nothing can be done about
- * them, but we'd still like to report the rough number.
- * @const {number}
- */
-const NON_ACTIONABLE_ERROR_THROTTLE_THRESHOLD = 0.001;
-
-/**
- * The threshold for errors throttled because nothing can be done about
- * them, but we'd still like to report the rough number.
- * @const {number}
- */
-const USER_ERROR_THROTTLE_THRESHOLD = 0.1;
-
-/**
- * Chance to post to the new error reporting endpoint.
- * @const {number}
- */
-const BETA_ERROR_REPORT_URL_FREQ = 0.1;
-
-/**
- * Collects error messages, so they can be included in subsequent reports.
- * That allows identifying errors that might be caused by previous errors.
- */
-let accumulatedErrorMessages = self.__AMP_ERRORS || [];
-// Use a true global, to avoid multi-module inclusion issues.
-self.__AMP_ERRORS = accumulatedErrorMessages;
-
-/**
- * Pushes element into array, keeping at most the most recent limit elements
- *
- * @param {!Array<T>} array
- * @param {T} element
- * @param {number} limit
- * @template T
- */
-function pushLimit(array, element, limit) {
-  if (array.length >= limit) {
-    array.splice(0, array.length - limit + 1);
-  }
-  array.push(element);
-}
-
-/**
- * A wrapper around our exponentialBackoff, to lazy initialize it to avoid an
- * un-DCE'able side-effect.
- * @param {function()} work the function to execute after backoff
- * @return {number} the setTimeout id
- */
-let reportingBackoff = function (work) {
-  // Set reportingBackoff as the lazy-created function. JS Vooodoooo.
-  reportingBackoff = exponentialBackoff(1.5);
-  return reportingBackoff(work);
-};
-
-/**
- * Attempts to stringify a value, falling back to String.
- * @param {*} value
- * @return {string}
- */
-function tryJsonStringify(value) {
-  try {
-    // Cast is fine, because we really don't care here. Just trying.
-    return JSON.stringify(/** @type {!JsonObject} */ (value));
-  } catch (e) {
-    return String(value);
-  }
-}
-
-/**
- * The true JS engine, as detected by inspecting an Error stack. This should be
- * used with the userAgent to tell definitely. I.e., Chrome on iOS is really a
- * Safari JS engine.
- */
-let detectedJsEngine;
-
-/**
- * @param {!Window} win
- * @param {*} error
- * @param {!Element=} opt_associatedElement
- */
-export function reportErrorForWin(win, error, opt_associatedElement) {
-  reportError(error, opt_associatedElement);
-  if (
-    error &&
-    !!win &&
-    isUserErrorMessage(error.message) &&
-    !isUserErrorEmbed(error.message)
-  ) {
-    reportErrorToAnalytics(/** @type {!Error} */ (error), win);
-  }
-}
-
-/**
- * Reports an error. If the error has an "associatedElement" property
- * the element is marked with the `i-amphtml-element-error` and displays
- * the message itself. The message is always send to the console.
- * If the error has a "messageArray" property, that array is logged.
- * This way one gets the native fidelity of the console for things like
- * elements instead of stringification.
- * @param {*} error
- * @param {!Element=} opt_associatedElement
- * @return {!Error}
- */
-export function reportError(error, opt_associatedElement) {
-  try {
-    // Convert error to the expected type.
-    let isValidError;
-    if (error) {
-      if (error.message !== undefined) {
-        error = duplicateErrorIfNecessary(/** @type {!Error} */ (error));
-        isValidError = true;
-      } else {
-        const origError = error;
-        error = new Error(tryJsonStringify(origError));
-        error.origError = origError;
-      }
-    } else {
-      error = new Error('Unknown error');
-    }
-    // Report if error is not an expected type.
-    if (!isValidError && getMode().localDev && !getMode().test) {
-      setTimeout(function () {
-        const rethrow = new Error(
-          '_reported_ Error reported incorrectly: ' + error
-        );
-        throw rethrow;
-      });
-    }
-
-    if (error.reported) {
-      return /** @type {!Error} */ (error);
-    }
-    error.reported = true;
-
-    // Update element.
-    const element = opt_associatedElement || error.associatedElement;
-    if (element && element.classList) {
-      element.classList.add('i-amphtml-error');
-      if (getMode().development) {
-        element.classList.add('i-amphtml-element-error');
-        element.setAttribute('error-message', error.message);
-      }
-    }
-
-    // Report to console.
-    if (self.console) {
-      const output = console.error || console.log;
-      if (error.messageArray) {
-        output.apply(console, error.messageArray);
-      } else {
-        if (element) {
-          output.call(console, error.message, element);
-        } else if (!getMode().minified) {
-          output.call(console, error.stack);
-        } else {
-          output.call(console, error.message);
-        }
-      }
-    }
-    if (element && element.dispatchCustomEventForTesting) {
-      element.dispatchCustomEventForTesting(AmpEvents.ERROR, error.message);
-    }
-
-    // 'call' to make linter happy. And .call to make compiler happy
-    // that expects some @this.
-    onError['call'](
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      error
-    );
-  } catch (errorReportingError) {
-    setTimeout(function () {
-      throw errorReportingError;
-    });
-  }
-  return /** @type {!Error} */ (error);
-}
-
-/**
- * Returns an error for a cancellation of a promise.
- * @return {!Error}
- */
-export function cancellation() {
-  return new Error(CANCELLED);
-}
-
-/**
- * @param {*} errorOrMessage
- * @return {boolean}
- */
-export function isCancellation(errorOrMessage) {
-  if (!errorOrMessage) {
-    return false;
-  }
-  if (typeof errorOrMessage == 'string') {
-    return startsWith(errorOrMessage, CANCELLED);
-  }
-  if (typeof errorOrMessage.message == 'string') {
-    return startsWith(errorOrMessage.message, CANCELLED);
-  }
-  return false;
-}
-
-/**
- * Returns an error for component blocked by consent
- * @return {!Error}
- */
-export function blockedByConsentError() {
-  return new Error(BLOCK_BY_CONSENT);
-}
-
-/**
- * @param {*} errorOrMessage
- * @return {boolean}
- */
-export function isBlockedByConsent(errorOrMessage) {
-  if (!errorOrMessage) {
-    return false;
-  }
-  if (typeof errorOrMessage == 'string') {
-    return startsWith(errorOrMessage, BLOCK_BY_CONSENT);
-  }
-  if (typeof errorOrMessage.message == 'string') {
-    return startsWith(errorOrMessage.message, BLOCK_BY_CONSENT);
-  }
-  return false;
-}
-
-/**
- * Install handling of global unhandled exceptions.
- * @param {!Window} win
- */
-export function installErrorReporting(win) {
-  win.onerror = /** @type {!Function} */ (onError);
-  win.addEventListener('unhandledrejection', (event) => {
-    if (
-      event.reason &&
-      (event.reason.message === CANCELLED ||
-        event.reason.message === BLOCK_BY_CONSENT ||
-        event.reason.message === ABORTED)
-    ) {
-      event.preventDefault();
-      return;
-    }
-    reportError(event.reason || new Error('rejected promise ' + event));
-  });
-}
-
-/**
- * Signature designed, so it can work with window.onerror
- * @param {string|undefined} message
- * @param {string|undefined} filename
- * @param {string|undefined} line
- * @param {string|undefined} col
- * @param {*|undefined} error
- * @this {!Window|undefined}
- */
-function onError(message, filename, line, col, error) {
-  // Make an attempt to unhide the body but don't if the error is actually expected.
-  if (this && this.document && (!error || !error.expected)) {
-    makeBodyVisibleRecovery(this.document);
-  }
-  if (getMode().localDev || getMode().development || getMode().test) {
-    return;
-  }
-  let hasNonAmpJs = false;
-  try {
-    hasNonAmpJs = detectNonAmpJs(self);
-  } catch (ignore) {
-    // Ignore errors during error report generation.
-  }
-  if (hasNonAmpJs && Math.random() > 0.01) {
-    // Only report 1% of errors on pages with non-AMP JS.
-    // These errors can almost never be acted upon, but spikes such as
-    // due to buggy browser extensions may be helpful to notify authors.
-    return;
-  }
-  const data = getErrorReportData(
-    message,
-    filename,
-    line,
-    col,
-    error,
-    hasNonAmpJs
-  );
-  if (data) {
-    reportingBackoff(() => {
-      try {
-        return reportErrorToServerOrViewer(
-          this,
-          /** @type {!JsonObject} */
-          (data)
-        ).catch(() => {
-          // catch async errors to avoid recursive errors.
-        });
-      } catch (e) {
-        // catch async errors to avoid recursive errors.
-      }
-    });
-  }
-}
-
-/**
- * Determines the error reporting endpoint which should be used.
- * If changing this URL, keep `/spec/amp-errors.md` in sync.
- * @return {string} error reporting endpoint URL.
- */
-function chooseReportingUrl_() {
-  return Math.random() < BETA_ERROR_REPORT_URL_FREQ
-    ? urls.betaErrorReporting
-    : urls.errorReporting;
-}
-
-/**
- * Passes the given error data to either server or viewer.
- * @param {!Window} win
- * @param {!JsonObject} data Data from `getErrorReportData`.
- * @return {Promise<undefined>}
- */
-export function reportErrorToServerOrViewer(win, data) {
-  // Report the error to viewer if it has the capability. The data passed
-  // to the viewer is exactly the same as the data passed to the server
-  // below.
-
-  // Throttle reports from Stable by 90%.
-  if (data['pt'] && Math.random() < 0.9) {
-    return Promise.resolve();
-  }
-
-  return maybeReportErrorToViewer(win, data).then((reportedErrorToViewer) => {
-    if (!reportedErrorToViewer) {
-      const xhr = new XMLHttpRequest();
-      xhr.open('POST', chooseReportingUrl_(), true);
-      xhr.send(JSON.stringify(data));
-    }
-  });
-}
-
-/**
- * Passes the given error data to the viewer if the following criteria is met:
- * - The viewer is a trusted viewer
- * - The viewer has the `errorReporter` capability
- * - The AMP doc is in single doc mode
- * - The AMP doc is opted-in for error interception (`<html>` tag has the
- *   `report-errors-to-viewer` attribute)
- *
- * @param {!Window} win
- * @param {!JsonObject} data Data from `getErrorReportData`.
- * @return {!Promise<boolean>} `Promise<True>` if the error was sent to the
- *     viewer, `Promise<False>` otherwise.
- * @visibleForTesting
- */
-export function maybeReportErrorToViewer(win, data) {
-  const ampdocService = Services.ampdocServiceFor(win);
-  if (!ampdocService.isSingleDoc()) {
-    return Promise.resolve(false);
-  }
-  const ampdocSingle = ampdocService.getSingleDoc();
-  const htmlElement = ampdocSingle.getRootNode().documentElement;
-  const docOptedIn = htmlElement.hasAttribute('report-errors-to-viewer');
-  if (!docOptedIn) {
-    return Promise.resolve(false);
-  }
-  const viewer = Services.viewerForDoc(ampdocSingle);
-  if (!viewer.hasCapability('errorReporter')) {
-    return Promise.resolve(false);
-  }
-  return viewer.isTrustedViewer().then((viewerTrusted) => {
-    if (!viewerTrusted) {
-      return false;
-    }
-    viewer.sendMessage('error', errorReportingDataForViewer(data));
-    return true;
-  });
-}
-
-/**
- * Strips down the error reporting data to a minimal set
- * to be sent to the viewer.
- * @param {!JsonObject} errorReportData
- * @return {!JsonObject}
- * @visibleForTesting
- */
-export function errorReportingDataForViewer(errorReportData) {
-  return dict({
-    'm': errorReportData['m'], // message
-    'a': errorReportData['a'], // isUserError
-    's': errorReportData['s'], // error stack
-    'el': errorReportData['el'], // tagName
-    'ex': errorReportData['ex'], // expected error?
-    'v': errorReportData['v'], // runtime
-    'pt': errorReportData['pt'], // is pre-throttled
-    'jse': errorReportData['jse'], // detectedJsEngine
-  });
-}
-
-/**
- * @param {string|undefined}  message
- * @param {*|undefined} error
- * @return {string}
- */
-function buildErrorMessage_(message, error) {
-  if (error) {
-    if (error.message) {
-      message = error.message;
-    } else {
-      // This should never be a string, but sometimes it is.
-      message = String(error);
-    }
-  }
-  if (!message) {
-    message = 'Unknown error';
-  }
-
-  return message;
-}
-
-/**
- * Signature designed, so it can work with window.onerror
- * @param {string|undefined} message
- * @param {string|undefined} filename
- * @param {string|undefined} line
- * @param {string|undefined} col
- * @param {*|undefined} error
- * @param {boolean} hasNonAmpJs
- * @return {!JsonObject|undefined} The data to post
- * visibleForTesting
- */
-export function getErrorReportData(
-  message,
-  filename,
-  line,
-  col,
-  error,
-  hasNonAmpJs
-) {
-  message = buildErrorMessage_(message, error);
-  // An "expected" error is still an error, i.e. some features are disabled
-  // or not functioning fully because of it. However, it's an expected
-  // error. E.g. as is the case with some browser API missing (storage).
-  // Thus, the error can be classified differently by log aggregators.
-  // The main goal is to monitor that an "expected" error doesn't deteriorate
-  // over time. It's impossible to completely eliminate it.
-  let expected = !!(error && error.expected);
-  if (/_reported_/.test(message)) {
-    return;
-  }
-  if (message == CANCELLED) {
-    return;
-  }
-
-  const detachedWindow = !(self && self.window);
-  const throttleBase = Math.random();
-
-  // We throttle load errors and generic "Script error." errors
-  // that have no information and thus cannot be acted upon.
-  if (
-    isLoadErrorMessage(message) ||
-    // See https://github.com/ampproject/amphtml/issues/7353
-    // for context.
-    message == 'Script error.' ||
-    // Window has become detached, really anything can happen
-    // at this point.
-    detachedWindow
-  ) {
-    expected = true;
-
-    if (throttleBase > NON_ACTIONABLE_ERROR_THROTTLE_THRESHOLD) {
-      return;
-    }
-  }
-
-  const isUserError = isUserErrorMessage(message);
-
-  // Only report a subset of user errors.
-  if (isUserError && throttleBase > USER_ERROR_THROTTLE_THRESHOLD) {
-    return;
-  }
-
-  // This is the App Engine app in
-  // https://github.com/ampproject/error-tracker
-  // It stores error reports via https://cloud.google.com/error-reporting/
-  // for analyzing production issues.
-  const data = /** @type {!JsonObject} */ (Object.create(null));
-  data['v'] = getMode().rtvVersion;
-  data['noAmp'] = hasNonAmpJs ? '1' : '0';
-  data['m'] = message.replace(USER_ERROR_SENTINEL, '');
-  data['a'] = isUserError ? '1' : '0';
-
-  // Errors are tagged with "ex" ("expected") label to allow loggers to
-  // classify these errors as benchmarks and not exceptions.
-  data['ex'] = expected ? '1' : '0';
-  data['dw'] = detachedWindow ? '1' : '0';
-
-  let runtime = '1p';
-  if (IS_ESM) {
-    runtime = 'esm';
-    data['esm'] = '1';
-  } else if (self.context && self.context.location) {
-    data['3p'] = '1';
-    runtime = '3p';
-  } else if (getMode().runtime) {
-    runtime = getMode().runtime;
-  }
-
-  data['rt'] = runtime;
-
-  // Add our a4a id if we are inabox
-  if (runtime === 'inabox') {
-    data['adid'] = getMode().a4aId;
-  }
-
-  // TODO(erwinm): Remove ca when all systems read `bt` instead of `ca` to
-  // identify js binary type.
-  data['ca'] = isCanary(self) ? '1' : '0';
-
-  // Pass binary type.
-  data['bt'] = getBinaryType(self);
-
-  if (self.location.ancestorOrigins && self.location.ancestorOrigins[0]) {
-    data['or'] = self.location.ancestorOrigins[0];
-  }
-  if (self.viewerState) {
-    data['vs'] = self.viewerState;
-  }
-  // Is embedded?
-  if (self.parent && self.parent != self) {
-    data['iem'] = '1';
-  }
-
-  if (self.AMP && self.AMP.viewer) {
-    const resolvedViewerUrl = self.AMP.viewer.getResolvedViewerUrl();
-    const messagingOrigin = self.AMP.viewer.maybeGetMessagingOrigin();
-    if (resolvedViewerUrl) {
-      data['rvu'] = resolvedViewerUrl;
-    }
-    if (messagingOrigin) {
-      data['mso'] = messagingOrigin;
-    }
-  }
-
-  if (!detectedJsEngine) {
-    detectedJsEngine = detectJsEngineFromStack();
-  }
-  data['jse'] = detectedJsEngine;
-
-  const exps = [];
-  const experiments = experimentTogglesOrNull(self);
-  for (const exp in experiments) {
-    const on = experiments[exp];
-    exps.push(`${exp}=${on ? '1' : '0'}`);
-  }
-  data['exps'] = exps.join(',');
-
-  if (error) {
-    const tagName = error.associatedElement
-      ? error.associatedElement.tagName
-      : 'u'; // Unknown
-    data['el'] = tagName;
-
-    if (error.args) {
-      data['args'] = JSON.stringify(error.args);
-    }
-
-    if (!isUserError && !error.ignoreStack && error.stack) {
-      data['s'] = error.stack;
-    }
-
-    // TODO(jridgewell, #18574); Make sure error is always an object.
-    if (error.message) {
-      error.message += ' _reported_';
-    }
-  } else {
-    data['f'] = filename || '';
-    data['l'] = line || '';
-    data['c'] = col || '';
-  }
-  data['r'] = self.document ? self.document.referrer : '';
-  data['ae'] = accumulatedErrorMessages.join(',');
-  data['fr'] = self.location.originalHash || self.location.hash;
-
-  // TODO(https://github.com/ampproject/error-tracker/issues/129): Remove once
-  // all clients are serving a version with pre-throttling.
-  if (data['bt'] === 'production') {
-    // Setting this field allows the error reporting service to know that this
-    // error has already been pre-throttled for Stable, so it doesn't need to
-    // throttle again.
-    data['pt'] = '1';
-  }
-
-  pushLimit(accumulatedErrorMessages, message, 25);
-
-  return data;
-}
-
-/**
- * Returns true if it appears like there is non-AMP JS on the
- * current page.
- * @param {!Window} win
- * @return {boolean}
- * @visibleForTesting
- */
-export function detectNonAmpJs(win) {
-  if (!win.document) {
-    return false;
-  }
-  const scripts = win.document.querySelectorAll('script[src]');
-  for (let i = 0; i < scripts.length; i++) {
-    if (!isProxyOrigin(scripts[i].src.toLowerCase())) {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * Resets accumulated error messages for testing
- */
-export function resetAccumulatedErrorMessagesForTesting() {
-  accumulatedErrorMessages = [];
-}
-
-/**
- * Does a series of checks on the stack of an thrown error to determine the
- * JS engine that is currently running. This gives a bit more information than
- * just the UserAgent, since browsers often allow overriding it to "emulate"
- * mobile.
- * @return {string}
- * @visibleForTesting
- */
-export function detectJsEngineFromStack() {
-  /** @constructor */
-  function Fn() {}
-  Fn.prototype.t = function () {
-    throw new Error('message');
-  };
-  const object = new Fn();
-  try {
-    object.t();
-  } catch (e) {
-    const {stack} = e;
-
-    // Safari only mentions the method name.
-    if (startsWith(stack, 't@')) {
-      return 'Safari';
-    }
-
-    // Firefox mentions "prototype".
-    if (stack.indexOf('.prototype.t@') > -1) {
-      return 'Firefox';
-    }
-
-    // IE looks like Chrome, but includes a context for the base stack line.
-    // Explicitly, we're looking for something like:
-    // "    at Global code (https://example.com/app.js:1:200)" or
-    // "    at Anonymous function (https://example.com/app.js:1:200)"
-    // vs Chrome which has:
-    // "    at https://example.com/app.js:1:200"
-    const last = stack.split('\n').pop();
-    if (/\bat .* \(/i.test(last)) {
-      return 'IE';
-    }
-
-    // Finally, chrome includes the error message in the stack.
-    if (startsWith(stack, 'Error: message')) {
-      return 'Chrome';
-    }
-  }
-
-  return 'unknown';
-}
-
-/**
- * @param {!Error} error
- * @param {!Window} win
- */
-export function reportErrorToAnalytics(error, win) {
-  // Currently this can only be executed in a single-doc mode. Otherwise,
-  // it's not clear which ampdoc the event would belong too.
-  if (Services.ampdocServiceFor(win).isSingleDoc()) {
-    const vars = dict({
-      'errorName': error.name,
-      'errorMessage': error.message,
-    });
-    triggerAnalyticsEvent(getRootElement_(win), 'user-error', vars);
-  }
-}
-
-/**
- * @param {!Window} win
- * @return {!Element}
- * @private
- */
-function getRootElement_(win) {
-  const root = Services.ampdocServiceFor(win).getSingleDoc().getRootNode();
-  return dev().assertElement(root.documentElement || root.body || root);
-}
diff --git a/src/event-helper.js b/src/event-helper.js
index d72ac6aa4794b..8a924dd7c06cc 100644
--- a/src/event-helper.js
+++ b/src/event-helper.js
@@ -37,7 +37,7 @@ export function createCustomEvent(win, type, detail, opt_eventInit) {
   Object.assign(eventInit, opt_eventInit);
   // win.CustomEvent is a function on Edge, Chrome, FF, Safari but
   // is an object on IE 11.
-  if (typeof win.CustomEvent == 'function') {
+  if (IS_ESM || typeof win.CustomEvent == 'function') {
     return new win.CustomEvent(type, eventInit);
   } else {
     // Deprecated fallback for IE.
diff --git a/src/examiner/examiner.js b/src/examiner/examiner.js
index 38b1cbe23ee93..139e981d24c77 100644
--- a/src/examiner/examiner.js
+++ b/src/examiner/examiner.js
@@ -18,21 +18,20 @@
  * @param {!Window} win
  */
 function detectLongTasks(win) {
-  const observer = new win.PerformanceObserver(function (entryList) {
+  const observer = new win.PerformanceObserver((entryList) => {
+    /** @type {!Array<!PerformanceLongTaskTiming>} */
     const entries = entryList.getEntries();
-    for (let i = 0; i < entries.length; i++) {
-      if (
-        entries[i].entryType != 'longtask' ||
-        entries[i].name != 'cross-origin-descendant'
-      ) {
+    for (const entry of entries) {
+      const {attribution, duration, entryType, name} = entry;
+
+      if (entryType != 'longtask' || name != 'cross-origin-descendant') {
         continue;
       }
-      const attr = entries[i].attribution[0];
-      if (!attr || !attr.containerSrc) {
+      const attr = attribution[0];
+      if (!attr?.containerSrc) {
         continue;
       }
 
-      const {duration} = entries[i];
       let culprit = attr.containerSrc;
       if (attr.containerName) {
         const match = attr.containerName.match(/"type":"([^\"]*)"/);
diff --git a/src/experiments.js b/src/experiments.js
deleted file mode 100644
index 0dd946fb437f2..0000000000000
--- a/src/experiments.js
+++ /dev/null
@@ -1,387 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-/**
- * @fileoverview Experiments system allows a developer to opt-in to test
- * features that are not yet fully tested.
- *
- * Experiments page: https://cdn.ampproject.org/experiments.html *
- */
-
-import {dev, user} from './log';
-import {getMode} from './mode';
-import {hasOwn} from './utils/object';
-import {parseQueryString} from './url';
-
-/** @const {string} */
-const TAG = 'EXPERIMENTS';
-
-/** @const {string} */
-const LOCAL_STORAGE_KEY = 'amp-experiment-toggles';
-
-/** @const {string} */
-const TOGGLES_WINDOW_PROPERTY = '__AMP__EXPERIMENT_TOGGLES';
-
-/**
- * @typedef {{
- *   isTrafficEligible: function(!Window):boolean,
- *   branches: !Array<string>
- * }}
- */
-export let ExperimentInfo;
-
-/**
- * Whether we are in canary.
- * @param {!Window} win
- * @return {boolean}
- */
-export function isCanary(win) {
-  return !!(win.AMP_CONFIG && win.AMP_CONFIG.canary);
-}
-
-/**
- * Returns binary type, e.g., canary, production, control, or rc.
- * @param {!Window} win
- * @return {string}
- */
-export function getBinaryType(win) {
-  return win.AMP_CONFIG && win.AMP_CONFIG.type
-    ? win.AMP_CONFIG.type
-    : 'unknown';
-}
-
-/**
- * Whether the specified experiment is on or off.
- * @param {!Window} win
- * @param {string} experimentId
- * @return {boolean}
- */
-export function isExperimentOn(win, experimentId) {
-  const toggles = experimentToggles(win);
-  return !!toggles[experimentId];
-}
-
-/**
- * Toggles the experiment on or off. Returns the actual value of the experiment
- * after toggling is done.
- * @param {!Window} win
- * @param {string} experimentId
- * @param {boolean=} opt_on
- * @param {boolean=} opt_transientExperiment  Whether to toggle the
- *     experiment state "transiently" (i.e., for this page load only) or
- *     durably (by saving the experiment IDs after toggling).
- *     Default: false (save durably).
- * @return {boolean} New state for experimentId.
- */
-export function toggleExperiment(
-  win,
-  experimentId,
-  opt_on,
-  opt_transientExperiment
-) {
-  const currentlyOn = isExperimentOn(win, /*OK*/ experimentId);
-  const on = !!(opt_on !== undefined ? opt_on : !currentlyOn);
-  if (on != currentlyOn) {
-    const toggles = experimentToggles(win);
-    toggles[experimentId] = on;
-
-    if (!opt_transientExperiment) {
-      const storedToggles = getExperimentToggles(win);
-      storedToggles[experimentId] = on;
-      saveExperimentToggles(win, storedToggles);
-      // Avoid affecting tests that spy/stub warn().
-      if (!getMode().test) {
-        user().warn(
-          TAG,
-          '"%s" experiment %s for the domain "%s". See: https://amp.dev/documentation/guides-and-tutorials/learn/experimental',
-          experimentId,
-          on ? 'enabled' : 'disabled',
-          win.location.hostname
-        );
-      }
-    }
-  }
-  return on;
-}
-
-/**
- * Calculate whether the experiment is on or off based off of its default value,
- * stored overriden value, or the global config frequency given.
- * @param {!Window} win
- * @return {!Object<string, boolean>}
- */
-export function experimentToggles(win) {
-  if (win[TOGGLES_WINDOW_PROPERTY]) {
-    return win[TOGGLES_WINDOW_PROPERTY];
-  }
-  win[TOGGLES_WINDOW_PROPERTY] = Object.create(null);
-  const toggles = win[TOGGLES_WINDOW_PROPERTY];
-
-  // Read the default config of this build.
-  if (win.AMP_CONFIG) {
-    for (const experimentId in win.AMP_CONFIG) {
-      const frequency = win.AMP_CONFIG[experimentId];
-      if (typeof frequency === 'number' && frequency >= 0 && frequency <= 1) {
-        toggles[experimentId] = Math.random() < frequency;
-      }
-    }
-  }
-  // Read document level override from meta tag.
-  if (
-    win.AMP_CONFIG &&
-    Array.isArray(win.AMP_CONFIG['allow-doc-opt-in']) &&
-    win.AMP_CONFIG['allow-doc-opt-in'].length > 0
-  ) {
-    const allowed = win.AMP_CONFIG['allow-doc-opt-in'];
-    const meta = win.document.head.querySelector(
-      'meta[name="amp-experiments-opt-in"]'
-    );
-    if (meta) {
-      const optedInExperiments = meta.getAttribute('content').split(',');
-      for (let i = 0; i < optedInExperiments.length; i++) {
-        if (allowed.indexOf(optedInExperiments[i]) != -1) {
-          toggles[optedInExperiments[i]] = true;
-        }
-      }
-    }
-  }
-
-  Object.assign(toggles, getExperimentToggles(win));
-
-  if (
-    win.AMP_CONFIG &&
-    Array.isArray(win.AMP_CONFIG['allow-url-opt-in']) &&
-    win.AMP_CONFIG['allow-url-opt-in'].length > 0
-  ) {
-    const allowed = win.AMP_CONFIG['allow-url-opt-in'];
-    const hash = win.location.originalHash || win.location.hash;
-    const params = parseQueryString(hash);
-    for (let i = 0; i < allowed.length; i++) {
-      const param = params[`e-${allowed[i]}`];
-      if (param == '1') {
-        toggles[allowed[i]] = true;
-      }
-      if (param == '0') {
-        toggles[allowed[i]] = false;
-      }
-    }
-  }
-  return toggles;
-}
-
-/**
- * Returns the cached experiments toggles, or null if they have not been
- * computed yet.
- * @param {!Window} win
- * @return {Object<string, boolean>}
- */
-export function experimentTogglesOrNull(win) {
-  return win[TOGGLES_WINDOW_PROPERTY] || null;
-}
-
-/**
- * Returns a set of experiment IDs currently on.
- * @param {!Window} win
- * @return {!Object<string, boolean>}
- */
-function getExperimentToggles(win) {
-  let experimentsString = '';
-  try {
-    if ('localStorage' in win) {
-      experimentsString = win.localStorage.getItem(LOCAL_STORAGE_KEY);
-    }
-  } catch (e) {
-    dev().warn(TAG, 'Failed to retrieve experiments from localStorage.');
-  }
-  const tokens = experimentsString ? experimentsString.split(/\s*,\s*/g) : [];
-
-  const toggles = Object.create(null);
-  for (let i = 0; i < tokens.length; i++) {
-    if (tokens[i].length == 0) {
-      continue;
-    }
-    if (tokens[i][0] == '-') {
-      toggles[tokens[i].substr(1)] = false;
-    } else {
-      toggles[tokens[i]] = true;
-    }
-  }
-  return toggles;
-}
-
-/**
- * Saves a set of experiment IDs currently on.
- * @param {!Window} win
- * @param {!Object<string, boolean>} toggles
- */
-function saveExperimentToggles(win, toggles) {
-  const experimentIds = [];
-  for (const experiment in toggles) {
-    experimentIds.push((toggles[experiment] === false ? '-' : '') + experiment);
-  }
-  try {
-    if ('localStorage' in win) {
-      win.localStorage.setItem(LOCAL_STORAGE_KEY, experimentIds.join(','));
-    }
-  } catch (e) {
-    user().error(TAG, 'Failed to save experiments to localStorage.');
-  }
-}
-
-/**
- * See getExperimentToggles().
- * @param {!Window} win
- * @return {!Object<string, boolean>}
- * @visibleForTesting
- */
-export function getExperimentTogglesForTesting(win) {
-  return getExperimentToggles(win);
-}
-
-/**
- * Resets the experimentsToggle cache for testing purposes.
- * @param {!Window} win
- * @visibleForTesting
- */
-export function resetExperimentTogglesForTesting(win) {
-  saveExperimentToggles(win, {});
-  win[TOGGLES_WINDOW_PROPERTY] = null;
-}
-
-/**
- * In some browser implementations of Math.random(), sequential calls of
- * Math.random() are correlated and can cause a bias.  In particular,
- * if the previous random() call was < 0.001 (as it will be if we select
- * into an experiment), the next value could be less than 0.5 more than
- * 50.7% of the time.  This provides an implementation that roots down into
- * the crypto API, when available, to produce less biased samples.
- *
- * @return {number} Pseudo-random floating-point value on the range [0, 1).
- */
-function slowButAccuratePrng() {
-  // TODO(tdrl): Implement.
-  return Math.random();
-}
-
-/**
- * Container for alternate random number generator implementations.  This
- * allows us to set an "accurate" PRNG for branch selection, but to mock it
- * out easily in tests.
- *
- * @visibleForTesting
- * @const {!{accuratePrng: function():number}}
- */
-export const RANDOM_NUMBER_GENERATORS = {
-  accuratePrng: slowButAccuratePrng,
-};
-
-/**
- * Selects, uniformly at random, a single item from the array.
- * @param {!Array<string>} arr Object to select from.
- * @return {?string} Single item from arr or null if arr was empty.
- */
-function selectRandomItem(arr) {
-  const rn = RANDOM_NUMBER_GENERATORS.accuratePrng();
-  return arr[Math.floor(rn * arr.length)] || null;
-}
-
-/**
- * Selects which page-level experiment branches are enabled. If a given
- * experiment name is already set (including to the null / no branches selected
- * state), this won't alter its state.
- *
- * Check whether a given experiment is set using isExperimentOn(win,
- * experimentName) and, if it is on, look for which branch is selected in
- * win.__AMP_EXPERIMENT_BRANCHES[experimentName].
- *
- * @param {!Window} win Window context on which to save experiment
- *     selection state.
- * @param {!Object<string, !ExperimentInfo>} experiments  Set of experiments to
- *     configure for this page load.
- * @return {!Object<string, string>} Map of experiment names to selected
- *     branches.
- */
-export function randomlySelectUnsetExperiments(win, experiments) {
-  win.__AMP_EXPERIMENT_BRANCHES = win.__AMP_EXPERIMENT_BRANCHES || {};
-  const selectedExperiments = {};
-  for (const experimentName in experiments) {
-    // Skip experimentName if it is not a key of experiments object or if it
-    // has already been populated by some other property.
-    if (!hasOwn(experiments, experimentName)) {
-      continue;
-    }
-    if (hasOwn(win.__AMP_EXPERIMENT_BRANCHES, experimentName)) {
-      selectedExperiments[experimentName] =
-        win.__AMP_EXPERIMENT_BRANCHES[experimentName];
-      continue;
-    }
-
-    if (
-      !experiments[experimentName].isTrafficEligible ||
-      !experiments[experimentName].isTrafficEligible(win)
-    ) {
-      win.__AMP_EXPERIMENT_BRANCHES[experimentName] = null;
-      continue;
-    }
-
-    // If we're in the experiment, but we haven't already forced a specific
-    // experiment branch (e.g., via a test setup), then randomize the branch
-    // choice.
-    if (
-      !win.__AMP_EXPERIMENT_BRANCHES[experimentName] &&
-      isExperimentOn(win, /*OK*/ experimentName)
-    ) {
-      const {branches} = experiments[experimentName];
-      win.__AMP_EXPERIMENT_BRANCHES[experimentName] = selectRandomItem(
-        branches
-      );
-      selectedExperiments[experimentName] =
-        win.__AMP_EXPERIMENT_BRANCHES[experimentName];
-    }
-  }
-  return selectedExperiments;
-}
-
-/**
- * Returns the experiment branch enabled for the given experiment ID.
- * For example, 'control' or 'experiment'.
- *
- * @param {!Window} win Window context to check for experiment state.
- * @param {string} experimentName Name of the experiment to check.
- * @return {?string} Active experiment branch ID for experimentName (possibly
- *     null if experimentName has been tested but no branch was enabled).
- */
-export function getExperimentBranch(win, experimentName) {
-  return win.__AMP_EXPERIMENT_BRANCHES
-    ? win.__AMP_EXPERIMENT_BRANCHES[experimentName]
-    : null;
-}
-
-/**
- * Force enable (or disable) a specific branch of a given experiment name.
- * Disables the experiment name altogether if branchId is falseish.
- *
- * @param {!Window} win Window context to check for experiment state.
- * @param {string} experimentName Name of the experiment to check.
- * @param {?string} branchId ID of branch to force or null to disable
- *     altogether.
- * @visibleForTesting
- */
-export function forceExperimentBranch(win, experimentName, branchId) {
-  win.__AMP_EXPERIMENT_BRANCHES = win.__AMP_EXPERIMENT_BRANCHES || {};
-  toggleExperiment(win, experimentName, !!branchId, true);
-  win.__AMP_EXPERIMENT_BRANCHES[experimentName] = branchId;
-}
diff --git a/src/experiments/OWNERS b/src/experiments/OWNERS
new file mode 100644
index 0000000000000..7d9baead276f9
--- /dev/null
+++ b/src/experiments/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'calebcordry'}],
+    },
+  ],
+}
diff --git a/src/experiments/ads-initial-intersection-exp.js b/src/experiments/ads-initial-intersection-exp.js
new file mode 100644
index 0000000000000..7af3d0d9afc53
--- /dev/null
+++ b/src/experiments/ads-initial-intersection-exp.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/** @const */
+export const ADS_INITIAL_INTERSECTION_EXP = {
+  id: 'ads-initialIntersection',
+  control: '31060065',
+  experiment: '31060066',
+};
diff --git a/src/experiments/experiments.extern.js b/src/experiments/experiments.extern.js
new file mode 100644
index 0000000000000..6edcd0ce212a4
--- /dev/null
+++ b/src/experiments/experiments.extern.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview global externs for the experiment system.
+ * @externs
+ */
+
+/** @type {undefined|Object<string, ?string>} */
+window.__AMP_EXPERIMENT_BRANCHES;
diff --git a/src/experiments/experiments.type.js b/src/experiments/experiments.type.js
new file mode 100644
index 0000000000000..18e29f86461b4
--- /dev/null
+++ b/src/experiments/experiments.type.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @typedef {{
+ *   experimentId: string,
+ *   isTrafficEligible: function(!Window):boolean,
+ *   branches: !Array<string>
+ * }}
+ */
+export let ExperimentInfoDef;
diff --git a/src/experiments/index.js b/src/experiments/index.js
new file mode 100644
index 0000000000000..28af2e1b92ae1
--- /dev/null
+++ b/src/experiments/index.js
@@ -0,0 +1,379 @@
+/**
+ * Copyright 2015 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.
+ */
+
+/**
+ * @fileoverview Experiments system allows a developer to opt-in to test
+ * features that are not yet fully tested.
+ *
+ * Experiments page: https://cdn.ampproject.org/experiments.html *
+ */
+
+import {dev, user} from '../log';
+import {getMode} from '../mode';
+import {getTopWindow} from '../service';
+import {hasOwn, map} from '../core/types/object';
+import {isArray} from '../core/types';
+import {parseQueryString} from '../core/types/string/url';
+
+// typedef imports
+import {ExperimentInfoDef} from './experiments.type';
+
+/** @const {string} */
+const TAG = 'EXPERIMENTS';
+
+/** @const {string} */
+const LOCAL_STORAGE_KEY = 'amp-experiment-toggles';
+
+/** @const {string} */
+const TOGGLES_WINDOW_PROPERTY = '__AMP__EXPERIMENT_TOGGLES';
+
+/**
+ * Whether we are in canary.
+ * @param {!Window} win
+ * @return {boolean}
+ */
+export function isCanary(win) {
+  return !!win.AMP_CONFIG?.canary;
+}
+
+/**
+ * Returns binary type, e.g., canary, production, control, or rc.
+ * @param {!Window} win
+ * @return {string}
+ */
+export function getBinaryType(win) {
+  return win.AMP_CONFIG?.type || 'unknown';
+}
+
+/**
+ * Whether the specified experiment is on or off.
+ * @param {!Window} win
+ * @param {string} experimentId
+ * @return {boolean}
+ */
+export function isExperimentOn(win, experimentId) {
+  const toggles = experimentToggles(win);
+  return !!toggles[experimentId];
+}
+
+/**
+ * Toggles the experiment on or off. Returns the actual value of the experiment
+ * after toggling is done.
+ * @param {!Window} win
+ * @param {string} experimentId
+ * @param {boolean=} opt_on
+ * @param {boolean=} opt_transientExperiment  Whether to toggle the
+ *     experiment state "transiently" (i.e., for this page load only) or
+ *     durably (by saving the experiment IDs after toggling).
+ *     Default: false (save durably).
+ * @return {boolean} New state for experimentId.
+ */
+export function toggleExperiment(
+  win,
+  experimentId,
+  opt_on,
+  opt_transientExperiment
+) {
+  const currentlyOn = isExperimentOn(win, /*OK*/ experimentId);
+  const on = opt_on ?? !currentlyOn;
+  if (on != currentlyOn) {
+    const toggles = experimentToggles(win);
+    toggles[experimentId] = on;
+
+    if (!opt_transientExperiment) {
+      const storedToggles = getExperimentToggles(win);
+      storedToggles[experimentId] = on;
+      saveExperimentToggles(win, storedToggles);
+      // Avoid affecting tests that spy/stub warn().
+      if (!getMode().test) {
+        user().warn(
+          TAG,
+          '"%s" experiment %s for the domain "%s". See: https://amp.dev/documentation/guides-and-tutorials/learn/experimental',
+          experimentId,
+          on ? 'enabled' : 'disabled',
+          win.location.hostname
+        );
+      }
+    }
+  }
+  return on;
+}
+
+/**
+ * Calculate whether the experiment is on or off based off of its default value,
+ * stored overriden value, or the global config frequency given.
+ * @param {!Window} win
+ * @return {!Object<string, boolean>}
+ */
+export function experimentToggles(win) {
+  if (win[TOGGLES_WINDOW_PROPERTY]) {
+    return win[TOGGLES_WINDOW_PROPERTY];
+  }
+  win[TOGGLES_WINDOW_PROPERTY] = map();
+  const toggles = win[TOGGLES_WINDOW_PROPERTY];
+
+  // Read the default config of this build.
+  if (win.AMP_CONFIG) {
+    for (const experimentId in win.AMP_CONFIG) {
+      const frequency = win.AMP_CONFIG[experimentId];
+      if (typeof frequency === 'number' && frequency >= 0 && frequency <= 1) {
+        toggles[experimentId] = Math.random() < frequency;
+      }
+    }
+  }
+  // Read document level override from meta tag.
+  const allowedDocOptIn = win.AMP_CONFIG?.['allow-doc-opt-in'];
+  if (isArray(allowedDocOptIn) && allowedDocOptIn.length) {
+    const meta = win.document.head.querySelector(
+      'meta[name="amp-experiments-opt-in"]'
+    );
+    if (meta) {
+      const optedInExperiments = meta.getAttribute('content').split(',');
+      for (const experiment of optedInExperiments) {
+        if (dev().assertArray(allowedDocOptIn).includes(experiment)) {
+          toggles[experiment] = true;
+        }
+      }
+    }
+  }
+
+  Object.assign(toggles, getExperimentToggles(win));
+
+  const allowedUrlOptIn = win.AMP_CONFIG?.['allow-url-opt-in'];
+  if (isArray(allowedUrlOptIn) && allowedUrlOptIn.length) {
+    const hash = win.location['originalHash'] || win.location.hash;
+    const params = parseQueryString(hash);
+    for (const experiment of allowedUrlOptIn) {
+      const param = params[`e-${experiment}`];
+      if (param == '1') {
+        toggles[experiment] = true;
+      }
+      if (param == '0') {
+        toggles[experiment] = false;
+      }
+    }
+  }
+  return toggles;
+}
+
+/**
+ * Returns the cached experiments toggles, or null if they have not been
+ * computed yet.
+ * @param {!Window} win
+ * @return {?Object<string, boolean>}
+ */
+export function experimentTogglesOrNull(win) {
+  return win[TOGGLES_WINDOW_PROPERTY] || null;
+}
+
+/**
+ * Returns a set of experiment IDs currently on.
+ * @param {!Window} win
+ * @return {!Object<string, boolean>}
+ */
+function getExperimentToggles(win) {
+  let experimentsString = '';
+  try {
+    if ('localStorage' in win) {
+      experimentsString = win.localStorage.getItem(LOCAL_STORAGE_KEY);
+    }
+  } catch {
+    dev().warn(TAG, 'Failed to retrieve experiments from localStorage.');
+  }
+  const tokens = experimentsString?.split(/\s*,\s*/g) || [];
+
+  const toggles = map();
+  for (const token of tokens) {
+    if (!token) {
+      continue;
+    }
+    if (token[0] == '-') {
+      toggles[token.substr(1)] = false;
+    } else {
+      toggles[token] = true;
+    }
+  }
+  return toggles;
+}
+
+/**
+ * Saves a set of experiment IDs currently on.
+ * @param {!Window} win
+ * @param {!Object<string, boolean>} toggles
+ */
+function saveExperimentToggles(win, toggles) {
+  const experimentIds = [];
+  for (const experiment in toggles) {
+    experimentIds.push((toggles[experiment] === false ? '-' : '') + experiment);
+  }
+  try {
+    win.localStorage?.setItem(LOCAL_STORAGE_KEY, experimentIds.join(','));
+  } catch (e) {
+    user().error(TAG, 'Failed to save experiments to localStorage.');
+  }
+}
+
+/**
+ * See getExperimentToggles().
+ * @param {!Window} win
+ * @return {!Object<string, boolean>}
+ * @visibleForTesting
+ */
+export function getExperimentTogglesForTesting(win) {
+  return getExperimentToggles(win);
+}
+
+/**
+ * Resets the experimentsToggle cache for testing purposes.
+ * @param {!Window} win
+ * @visibleForTesting
+ */
+export function resetExperimentTogglesForTesting(win) {
+  saveExperimentToggles(win, {});
+  win[TOGGLES_WINDOW_PROPERTY] = null;
+}
+
+/**
+ * In some browser implementations of Math.random(), sequential calls of
+ * Math.random() are correlated and can cause a bias.  In particular,
+ * if the previous random() call was < 0.001 (as it will be if we select
+ * into an experiment), the next value could be less than 0.5 more than
+ * 50.7% of the time.  This provides an implementation that roots down into
+ * the crypto API, when available, to produce less biased samples.
+ *
+ * @return {number} Pseudo-random floating-point value on the range [0, 1).
+ */
+function slowButAccuratePrng() {
+  // TODO(tdrl): Implement.
+  return Math.random();
+}
+
+/**
+ * Container for alternate random number generator implementations.  This
+ * allows us to set an "accurate" PRNG for branch selection, but to mock it
+ * out easily in tests.
+ *
+ * @visibleForTesting
+ * @const {!{accuratePrng: function():number}}
+ */
+export const RANDOM_NUMBER_GENERATORS = {
+  accuratePrng: slowButAccuratePrng,
+};
+
+/**
+ * Selects, uniformly at random, a single item from the array.
+ * @param {!Array<string>} arr Object to select from.
+ * @return {?string} Single item from arr or null if arr was empty.
+ */
+function selectRandomItem(arr) {
+  const rn = RANDOM_NUMBER_GENERATORS.accuratePrng();
+  return dev().assertString(arr[Math.floor(rn * arr.length)]) || null;
+}
+
+/**
+ * Selects which page-level experiment branches are enabled. If a given
+ * experiment name is already set (including to the null / no branches selected
+ * state), this won't alter its state.
+ *
+ * Check whether a given experiment is set using isExperimentOn(win,
+ * experimentName) and, if it is on, look for which branch is selected in
+ * win.__AMP_EXPERIMENT_BRANCHES[experimentName].
+ *
+ * @param {!Window} win Window context on which to save experiment
+ *     selection state.
+ * @param {!Array<!ExperimentInfoDef>} experiments  Set of experiments to
+ *     configure for this page load.
+ * @return {!Object<string, string>} Map of experiment names to selected
+ *     branches.
+ */
+export function randomlySelectUnsetExperiments(win, experiments) {
+  win.__AMP_EXPERIMENT_BRANCHES = win.__AMP_EXPERIMENT_BRANCHES || {};
+  const selectedExperiments = {};
+  for (const experiment of experiments) {
+    const experimentName = experiment.experimentId;
+    if (hasOwn(win.__AMP_EXPERIMENT_BRANCHES, experimentName)) {
+      selectedExperiments[experimentName] =
+        win.__AMP_EXPERIMENT_BRANCHES[experimentName];
+      continue;
+    }
+
+    if (!experiment.isTrafficEligible?.(win)) {
+      win.__AMP_EXPERIMENT_BRANCHES[experimentName] = null;
+      continue;
+    }
+
+    // If we're in the experiment, but we haven't already forced a specific
+    // experiment branch (e.g., via a test setup), then randomize the branch
+    // choice.
+    if (
+      !win.__AMP_EXPERIMENT_BRANCHES[experimentName] &&
+      isExperimentOn(win, /*OK*/ experimentName)
+    ) {
+      win.__AMP_EXPERIMENT_BRANCHES[experimentName] = selectRandomItem(
+        experiment.branches
+      );
+      selectedExperiments[experimentName] =
+        win.__AMP_EXPERIMENT_BRANCHES[experimentName];
+    }
+  }
+  return selectedExperiments;
+}
+
+/**
+ * Returns the experiment branch enabled for the given experiment ID.
+ * For example, 'control' or 'experiment'.
+ *
+ * @param {!Window} win Window context to check for experiment state.
+ * @param {string} experimentName Name of the experiment to check.
+ * @return {?string} Active experiment branch ID for experimentName (possibly
+ *     null if experimentName has been tested but no branch was enabled).
+ */
+export function getExperimentBranch(win, experimentName) {
+  return win.__AMP_EXPERIMENT_BRANCHES
+    ? win.__AMP_EXPERIMENT_BRANCHES[experimentName]
+    : null;
+}
+
+/**
+ * Returns an object containing all active experiment branches on the
+ * top Window.
+ *
+ * @param {!Window} win Window context to check for experiment state.
+ * @return {!Object} contains all experiment branches and their ids.
+ */
+export function getActiveExperimentBranches(win) {
+  const topWin = getTopWindow(win);
+  if (!topWin.__AMP_EXPERIMENT_BRANCHES) {
+    topWin.__AMP_EXPERIMENT_BRANCHES = {};
+  }
+  return {...topWin.__AMP_EXPERIMENT_BRANCHES};
+}
+
+/**
+ * Force enable (or disable) a specific branch of a given experiment name.
+ * Disables the experiment name altogether if branchId is falseish.
+ *
+ * @param {!Window} win Window context to check for experiment state.
+ * @param {string} experimentName Name of the experiment to check.
+ * @param {?string} branchId ID of branch to force or null to disable
+ *     altogether.
+ * @visibleForTesting
+ */
+export function forceExperimentBranch(win, experimentName, branchId) {
+  win.__AMP_EXPERIMENT_BRANCHES = win.__AMP_EXPERIMENT_BRANCHES || {};
+  toggleExperiment(win, experimentName, !!branchId, true);
+  win.__AMP_EXPERIMENT_BRANCHES[experimentName] = branchId;
+}
diff --git a/src/experiments/shame.extern.js b/src/experiments/shame.extern.js
new file mode 100644
index 0000000000000..d022e5fd140db
--- /dev/null
+++ b/src/experiments/shame.extern.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview The junk-drawer of externs that haven't yet been sorted well.
+ * Shame! Shame! Shame! Avoid adding to this.
+ *
+ * It's okay for some things to start off here, since moving them doesn't
+ * require any other file changes (unlike real code, which requires updating)
+ * imports throughout the repo).
+ *
+ * @externs
+ */
+
+/** @interface */
+function Logger() {}
+/** @type {function(...?)} */
+Logger.prototype.warn;
+/** @type {function(...?)} */
+Logger.prototype.error;
+/** @type {function(...?)} */
+Logger.prototype.assertString;
+/** @type {function():!Logger} */
+let user$$module$src$log;
+/** @type {function():!Logger} */
+let dev$$module$src$log;
+
+/** @type {function():!{test:boolean}} */
+let getMode$$module$src$mode;
+
+/** @type {function(!Window):!Window} */
+let getTopWindow$$module$src$service;
+
+/** @type {function(string):!JsonObject} */
+let parseQueryString$$module$src$url;
+
+/** @type {?} */
+window.AMP_CONFIG;
+/** @type {boolean|undefined} */
+window.AMP_CONFIG.canary;
+/** @type {string|undefined} */
+window.AMP_CONFIG.type;
diff --git a/src/experiments/story-ad-auto-advance.js b/src/experiments/story-ad-auto-advance.js
new file mode 100644
index 0000000000000..00cf5b345b50e
--- /dev/null
+++ b/src/experiments/story-ad-auto-advance.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {randomlySelectUnsetExperiments} from '../experiments';
+
+// typedef imports
+import {ExperimentInfoDef} from './experiments.type';
+
+/** @const {!Object<string, string>} */
+export const AdvanceExpToTime = {
+  '31060905': '6s',
+  '31060906': '8s',
+  '31060907': '10s',
+};
+
+/** @const */
+export const StoryAdAutoAdvance = {
+  ID: 'story-ad-auto-advance',
+  CONTROL: '31060904',
+  SIX_SECONDS: '31060905',
+  EIGHT_SECONDS: '31060906',
+  TEN_SECONDS: '31060907',
+};
+
+/**
+ * Choose what time value to auto advance story ads.
+ * @param {!Window} win
+ */
+export function divertStoryAdAutoAdvance(win) {
+  /** @type {!ExperimentInfoDef} */
+  const experimentInfo = {
+    experimentId: StoryAdAutoAdvance.ID,
+    isTrafficEligible: () => true,
+    branches: [
+      StoryAdAutoAdvance.CONTROL,
+      StoryAdAutoAdvance.SIX_SECONDS,
+      StoryAdAutoAdvance.EIGHT_SECONDS,
+      StoryAdAutoAdvance.TEN_SECONDS,
+    ],
+  };
+  randomlySelectUnsetExperiments(win, [experimentInfo]);
+}
diff --git a/src/experiments/story-ad-placements.js b/src/experiments/story-ad-placements.js
new file mode 100644
index 0000000000000..045d78cbe45a3
--- /dev/null
+++ b/src/experiments/story-ad-placements.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {randomlySelectUnsetExperiments} from '../experiments';
+
+// typedef imports
+import {ExperimentInfoDef} from './experiments.type';
+
+/** @const */
+export const StoryAdPlacements = {
+  ID: 'story-ad-placements',
+  CONTROL: '31060567',
+  PREDETERMINED_EIGHT: '31060568',
+  PREDETERMINED_TEN: '31060817',
+  PREDETERMINED_TWELVE: '31060569',
+};
+
+/**
+ * Choose which placement algorithm and density for given win.
+ * @param {!Window} win
+ */
+export function divertStoryAdPlacements(win) {
+  /** @type {!ExperimentInfoDef} */
+  const experimentInfo = {
+    experimentId: StoryAdPlacements.ID,
+    isTrafficEligible: () => true,
+    branches: [
+      StoryAdPlacements.CONTROL,
+      StoryAdPlacements.PREDETERMINED_EIGHT,
+      StoryAdPlacements.PREDETERMINED_TEN,
+      StoryAdPlacements.PREDETERMINED_TWELVE,
+    ],
+  };
+  randomlySelectUnsetExperiments(win, [experimentInfo]);
+}
diff --git a/src/extension-analytics.js b/src/extension-analytics.js
index 2fdb278057ca9..4c5290378e72a 100644
--- a/src/extension-analytics.js
+++ b/src/extension-analytics.js
@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import {CommonSignals} from './common-signals';
+import {CommonSignals} from './core/constants/common-signals';
 import {Services} from './services';
 import {createElementWithAttributes, removeElement} from './dom';
 import {devAssert} from './log';
-import {dict} from './utils/object';
-import {isArray, toWin} from './types';
+import {dict} from './core/types/object';
+import {isArray} from './core/types';
+import {toWin} from './types';
 import {triggerAnalyticsEvent} from './analytics';
 
 /**
@@ -126,7 +127,8 @@ class CustomEventReporter {
     triggerAnalyticsEvent(
       this.parent_,
       this.getEventTypeInSandbox_(eventType),
-      opt_vars
+      opt_vars,
+      /** enableDataVars */ false
     );
   }
   /**
diff --git a/src/focus-history.js b/src/focus-history.js
index 10d3e2e570ae2..aba54ffc94031 100644
--- a/src/focus-history.js
+++ b/src/focus-history.js
@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-import {Observable} from './observable';
+import {Observable} from './core/data-structures/observable';
 import {Services} from './services';
 import {dev} from './log';
+import {isElement} from './core/types';
 
 /**
  * FocusHistory keeps track of recent focused elements. This history can be
@@ -46,7 +47,7 @@ export class FocusHistory {
      */
     this.captureFocus_ = (e) => {
       // Hack (#15079) due to Firefox firing focus events on the entire page
-      if (e.target && e.target.nodeType == 1) {
+      if (isElement(e.target)) {
         this.pushFocus_(dev().assertElement(e.target));
       }
     };
@@ -60,7 +61,9 @@ export class FocusHistory {
       // implemented here. We wait for a blur to arrive on the main window
       // and after a short time check which element is active.
       Services.timerFor(win).delay(() => {
-        this.pushFocus_(dev().assertElement(this.win.document.activeElement));
+        if (this.win.document.activeElement) {
+          this.pushFocus_(this.win.document.activeElement);
+        }
       }, 500);
     };
     this.win.document.addEventListener('focus', this.captureFocus_, true);
diff --git a/src/font-stylesheet-timeout.js b/src/font-stylesheet-timeout.js
index 5bee8d10862ed..7e9237bb80c1c 100644
--- a/src/font-stylesheet-timeout.js
+++ b/src/font-stylesheet-timeout.js
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import {escapeCssSelectorIdent} from './css';
-import {onDocumentReady} from './document-ready';
+import {escapeCssSelectorIdent} from './core/dom/css';
+import {onDocumentReady} from './core/document-ready';
 import {urls} from './config';
 
 /**
diff --git a/src/form-data-wrapper.js b/src/form-data-wrapper.js
index e47ebbfc62ceb..34d4a88605339 100644
--- a/src/form-data-wrapper.js
+++ b/src/form-data-wrapper.js
@@ -17,7 +17,7 @@
 import {Services} from './services';
 import {getFormAsObject, getSubmitButtonUsed} from './form';
 import {iterateCursor} from './dom';
-import {map} from './utils/object';
+import {map} from './core/types/object';
 
 /**
  * Create a form data wrapper. The wrapper is necessary to provide a common
diff --git a/src/form.js b/src/form.js
index 4d1bb251eca47..a9f755eb53c01 100644
--- a/src/form.js
+++ b/src/form.js
@@ -52,7 +52,7 @@ export function getFormAsObject(form) {
 
   for (let i = 0; i < elements.length; i++) {
     const input = elements[i];
-    const {checked, name, multiple, options, tagName, type, value} = input;
+    const {checked, multiple, name, options, tagName, type, value} = input;
     if (
       !name ||
       isDisabled(input) ||
diff --git a/src/friendly-iframe-embed.js b/src/friendly-iframe-embed.js
index ca0d49b867583..d8b25a3319c41 100644
--- a/src/friendly-iframe-embed.js
+++ b/src/friendly-iframe-embed.js
@@ -14,39 +14,32 @@
  * limitations under the License.
  */
 
-import {CommonSignals} from './common-signals';
+import {CommonSignals} from './core/constants/common-signals';
+import {Deferred} from './core/data-structures/promise';
 import {FIE_EMBED_PROP} from './iframe-helper';
-import {LEGACY_ELEMENTS, stubLegacyElements} from './service/extensions-impl';
-import {Observable} from './observable';
 import {Services} from './services';
-import {Signals} from './utils/signals';
+import {Signals} from './core/data-structures/signals';
+import {VisibilityState} from './core/constants/visibility-state';
 import {cssText as ampSharedCss} from '../build/ampshared.css';
-import {
-  copyElementToChildWindow,
-  stubElementIfNotKnown,
-  upgradeOrRegisterElement,
-} from './service/custom-element-registry';
-import {dev, rethrowAsync, userAssert} from './log';
+import {dev, devAssert, userAssert} from './log';
 import {
   disposeServicesForEmbed,
-  getAmpdoc,
   getTopWindow,
-  installServiceInEmbedIfEmbeddable,
   setParentWindow,
 } from './service';
 import {escapeHtml} from './dom';
-import {getExperimentBranch, isExperimentOn} from './experiments';
 import {getMode} from './mode';
-import {installAmpdocServices} from './service/core-services';
+import {install as installAbortController} from './polyfills/abort-controller';
+import {installAmpdocServicesForEmbed} from './service/core-services';
 import {install as installCustomElements} from './polyfills/custom-elements';
 import {install as installDOMTokenList} from './polyfills/domtokenlist';
 import {install as installDocContains} from './polyfills/document-contains';
 import {installForChildWin as installIntersectionObserver} from './polyfills/intersection-observer';
-import {installStylesForDoc, installStylesLegacy} from './style-installer';
+import {installForChildWin as installResizeObserver} from './polyfills/resize-observer';
+import {installStylesForDoc} from './style-installer';
 import {installTimerInEmbedWindow} from './service/timer-impl';
-import {isDocumentReady} from './document-ready';
-import {isInAmpdocFieExperiment} from './ampdoc-fie';
-import {layoutRectLtwh, moveLayoutRect} from './layout-rect';
+import {isDocumentReady} from './core/document-ready';
+import {layoutRectLtwh, moveLayoutRect} from './core/math/layout-rect';
 import {loadPromise} from './event-helper';
 import {
   px,
@@ -55,7 +48,9 @@ import {
   setStyle,
   setStyles,
 } from './style';
+import {rethrowAsync} from './core/error';
 import {toWin} from './types';
+import {urls} from './config';
 import {whenContentIniLoad} from './ini-load';
 
 /**
@@ -63,16 +58,19 @@ import {whenContentIniLoad} from './ini-load';
  * - html: The complete content of an AMP embed, which is itself an AMP
  *   document. Can include whatever is normally allowed in an AMP document,
  *   except for AMP `<script>` declarations. Those should be passed as an
- *   array of `extensionIds`.
- * - extensionsIds: An optional array of AMP extension IDs used in this embed.
+ *   array of `extensions`.
+ * - extensions: An optional array of AMP extension IDs/versions used in
+ *   this embed.
  * - fonts: An optional array of fonts used in this embed.
  *
+ *
  * @typedef {{
  *   host: (?AmpElement|undefined),
  *   url: string,
- *   html: string,
- *   extensionIds: (?Array<string>|undefined),
+ *   html: ?string,
+ *   extensions: (?Array<{extensionId: string, extensionVersion: string}>|undefined),
  *   fonts: (?Array<string>|undefined),
+ *   skipHtmlMerge: (boolean|undefined),
  * }}
  */
 export let FriendlyIframeSpec;
@@ -83,13 +81,6 @@ export let FriendlyIframeSpec;
  */
 let srcdocSupported;
 
-/** @const {!{id: string, control: string, experiment: string}} */
-export const FIE_INIT_CHUNKING_EXP = {
-  id: 'fie-init-chunking',
-  control: '21065820',
-  experiment: '21065821',
-};
-
 /**
  * @param {boolean|undefined} val
  * @visibleForTesting
@@ -99,29 +90,20 @@ export function setSrcdocSupportedForTesting(val) {
 }
 
 /**
- * @param {!Window} win
  * @return {function(*): !Promise<*>}
  */
-function getDelayPromiseProducer(win) {
-  if (
-    isExperimentOn(win, 'fie-init-chunking') &&
-    getExperimentBranch(win, FIE_INIT_CHUNKING_EXP.id) ===
-      FIE_INIT_CHUNKING_EXP.experiment
-  ) {
-    return (val) =>
-      new Promise((resolve) => {
-        setTimeout(() => resolve(val), 1);
-      });
-  } else {
-    return (val) => Promise.resolve(val);
-  }
+function getDelayPromiseProducer() {
+  return (val) =>
+    new Promise((resolve) => {
+      setTimeout(() => resolve(val), 1);
+    });
 }
 
 /**
  * Returns `true` if the Friendly Iframes are supported.
  * @return {boolean}
  */
-function isSrcdocSupported() {
+export function isSrcdocSupported() {
   if (srcdocSupported === undefined) {
     srcdocSupported = 'srcdoc' in HTMLIFrameElement.prototype;
   }
@@ -129,15 +111,26 @@ function isSrcdocSupported() {
 }
 
 /**
- * Sets whether the embed is currently visible. The interpretation of visibility
- * is up to the embed parent. However, most of typical cases would rely on
- * whether the embed is currently in the viewport.
- * @param {!FriendlyIframeEmbed} embed
- * @param {boolean} visible
- * TODO(dvoytenko): Re-evaluate and probably drop once layers are ready.
+ * Get trusted urls enabled for polyfills.
+ * @return {string}
  */
-export function setFriendlyIframeEmbedVisible(embed, visible) {
-  embed.setVisible_(visible);
+export function getFieSafeScriptSrcs() {
+  const cdnBase = getMode().localDev ? 'http://localhost:8000/dist' : urls.cdn;
+  return `${cdnBase}/lts/ ${cdnBase}/rtv/ ${cdnBase}/sw/`;
+}
+
+/**
+ * @param {!Window} win
+ * @param {!Array<{extensionId: string, extensionVersion: string}>} extensions
+ */
+export function preloadFriendlyIframeEmbedExtensions(win, extensions) {
+  const extensionsService = Services.extensionsFor(win);
+
+  // Load any extensions; do not wait on their promises as this
+  // is just to prefetch.
+  extensions.forEach(({extensionId, extensionVersion}) =>
+    extensionsService.preloadExtension(extensionId, extensionVersion)
+  );
 }
 
 /**
@@ -160,27 +153,21 @@ export function installFriendlyIframeEmbed(
   /** @const {!Window} */
   const win = getTopWindow(toWin(iframe.ownerDocument.defaultView));
   /** @const {!./service/extensions-impl.Extensions} */
-  const extensions = Services.extensionsFor(win);
-  const ampdocFieExperimentOn = isInAmpdocFieExperiment(win);
-  /** @const {?./service/ampdoc-impl.AmpDocService} */
-  const ampdocService = ampdocFieExperimentOn
-    ? Services.ampdocServiceFor(win)
-    : null;
+  const extensionsService = Services.extensionsFor(win);
+  /** @const {!./service/ampdoc-impl.AmpDocService} */
+  const ampdocService = Services.ampdocServiceFor(win);
 
   setStyle(iframe, 'visibility', 'hidden');
   iframe.setAttribute('referrerpolicy', 'unsafe-url');
   iframe.setAttribute('marginheight', '0');
   iframe.setAttribute('marginwidth', '0');
 
-  // Pre-load extensions.
-  if (spec.extensionIds) {
-    spec.extensionIds.forEach((extensionId) =>
-      extensions.preloadExtension(extensionId)
-    );
-  }
+  const extensions = spec.extensions || [];
 
-  const html = mergeHtml(spec);
+  // Pre-load extensions.
+  preloadFriendlyIframeEmbedExtensions(win, extensions);
 
+  const html = spec.skipHtmlMerge ? spec.html : mergeHtml(spec);
   // Receive the signal when iframe is ready: it's document is formed.
   iframe.onload = () => {
     // Chrome does not reflect the iframe readystate.
@@ -204,9 +191,9 @@ export function installFriendlyIframeEmbed(
     iframe.src = 'about:blank';
     container.appendChild(iframe);
     const childDoc = iframe.contentWindow.document;
-    childDoc.open();
     registerViolationListener();
-    childDoc.write(html);
+    childDoc.open();
+    childDoc.write(devAssert(html));
     // With document.write, `iframe.onload` arrives almost immediately, thus
     // we need to wait for child's `window.onload`.
     loadedPromise = loadPromise(iframe.contentWindow);
@@ -220,7 +207,6 @@ export function installFriendlyIframeEmbed(
   // no other reliable signal for `readyState` in a child window and thus
   // we have to fallback to polling.
   let readyPromise;
-  const maybeGetDelayPromise = getDelayPromiseProducer(win);
   if (isIframeReady(iframe)) {
     readyPromise = Promise.resolve();
   } else {
@@ -249,57 +235,28 @@ export function installFriendlyIframeEmbed(
   return readyPromise.then(() => {
     const childWin = /** @type {!Window} */ (iframe.contentWindow);
     const signals = spec.host && spec.host.signals();
-    const ampdoc =
-      ampdocFieExperimentOn && ampdocService
-        ? ampdocService.installFieDoc(spec.url, childWin, {signals})
-        : null;
+    const ampdoc = ampdocService.installFieDoc(spec.url, childWin, {signals});
     const embed = new FriendlyIframeEmbed(iframe, spec, loadedPromise, ampdoc);
     iframe[FIE_EMBED_PROP] = embed;
 
-    // Add extensions.
-    const extensionIds = spec.extensionIds || [];
-    if (ampdoc && ampdocFieExperimentOn) {
-      embed.installExtensionsInFie(
-        extensions,
-        ampdoc,
-        extensionIds,
-        opt_preinstallCallback
-      );
+    // Window might have been destroyed.
+    if (!childWin.frameElement) {
+      return null;
+    }
 
-      // Ready to be shown.
-      embed.startRender_();
-      return embed;
-    } else {
-      // Window might have been destroyed.
+    // Add extensions.
+    return Installers.installExtensionsInEmbed(
+      embed,
+      extensionsService,
+      ampdoc,
+      extensions,
+      opt_preinstallCallback
+    ).then(() => {
       if (!childWin.frameElement) {
         return null;
       }
-      return maybeGetDelayPromise(undefined)
-        .then(() =>
-          embed.preInstallExtensionsInChildWindow(
-            extensions,
-            childWin,
-            extensionIds,
-            opt_preinstallCallback
-          )
-        )
-        .then(() => {
-          // Ready to be shown.
-          embed.startRender_();
-        })
-        .then(() => {
-          if (!childWin.frameElement) {
-            return null;
-          }
-          embed.doInstallExtensionsInChildWindow(
-            extensions,
-            childWin,
-            extensionIds
-          );
-          return embed;
-        })
-        .then(maybeGetDelayPromise);
-    }
+      return embed;
+    });
   });
 }
 
@@ -366,10 +323,12 @@ function mergeHtml(spec) {
     });
   }
 
+  const cspScriptSrc = getFieSafeScriptSrcs();
+
   // Load CSP
   result.push(
     '<meta http-equiv=Content-Security-Policy ' +
-      "content=\"script-src 'none';object-src 'none';child-src 'none'\">"
+      `content="script-src ${cspScriptSrc};object-src 'none';child-src 'none'">`
   );
 
   // Postambule.
@@ -430,16 +389,6 @@ export class FriendlyIframeEmbed {
     /** @const @private {time} */
     this.startTime_ = Date.now();
 
-    /**
-     * Starts out as invisible. The interpretation of this flag is up to
-     * the emded parent.
-     * @private {boolean}
-     */
-    this.visible_ = false;
-
-    /** @private {!Observable<boolean>} */
-    this.visibilityObservable_ = new Observable();
-
     /** @private @const */
     this.signals_ = this.ampdoc
       ? this.ampdoc.signals()
@@ -447,18 +396,25 @@ export class FriendlyIframeEmbed {
       ? this.host.signals()
       : new Signals();
 
+    /** @private @const {!Deferred} */
+    this.renderComplete_ = new Deferred();
+
     /** @private @const {!Promise} */
-    this.winLoadedPromise_ = Promise.all([loadedPromise, this.whenReady()]);
+    this.winLoadedPromise_ = Promise.all([
+      loadedPromise,
+      this.whenRenderStarted(),
+    ]);
     if (this.ampdoc) {
-      this.whenReady().then(() => this.ampdoc.setReady());
+      this.whenRenderComplete().then(() => this.ampdoc.setReady());
     }
+
+    this.win.addEventListener('resize', () => this.handleResize_());
   }
 
   /**
    * Ensures that all resources from this iframe have been released.
    */
   destroy() {
-    this.removeResources_();
     disposeServicesForEmbed(this.win);
     if (this.ampdoc) {
       this.ampdoc.dispose();
@@ -490,7 +446,7 @@ export class FriendlyIframeEmbed {
    * Notice that this signal coincides with the embed's `render-start`.
    * @return {!Promise}
    */
-  whenReady() {
+  whenRenderStarted() {
     return this.signals_.whenSignal(CommonSignals.RENDER_START);
   }
 
@@ -513,6 +469,41 @@ export class FriendlyIframeEmbed {
     return this.signals_.whenSignal(CommonSignals.INI_LOAD);
   }
 
+  /**
+   * Returns a promise that will resolve when all elements have been
+   * transferred into live embed DOM.
+   * @return {!Promise}
+   */
+  whenRenderComplete() {
+    return this.renderComplete_.promise;
+  }
+
+  /**
+   * Signal that indicates that all DOM elements have been tranferred to live
+   * embed DOM.
+   */
+  renderCompleted() {
+    this.renderComplete_.resolve();
+  }
+
+  /**
+   * Pause the embed.
+   */
+  pause() {
+    if (this.ampdoc) {
+      this.ampdoc.overrideVisibilityState(VisibilityState.PAUSED);
+    }
+  }
+
+  /**
+   * Resume the embed.
+   */
+  resume() {
+    if (this.ampdoc) {
+      this.ampdoc.overrideVisibilityState(VisibilityState.VISIBLE);
+    }
+  }
+
   /**
    * @private
    * @restricted
@@ -523,6 +514,13 @@ export class FriendlyIframeEmbed {
     } else {
       this.signals_.signal(CommonSignals.RENDER_START);
     }
+
+    // TODO(ccordry): remove when no-signing launched.
+    if (!this.spec.skipHtmlMerge) {
+      // When not streaming renderStart signal is good enough.
+      this.renderComplete_.resolve();
+    }
+
     // Common signal RENDER_START indicates time to toggle visibility
     setStyle(this.iframe, 'visibility', '');
     if (this.win.document && this.win.document.body) {
@@ -547,61 +545,32 @@ export class FriendlyIframeEmbed {
       );
     }
     Promise.all([
-      this.whenReady(),
-      whenContentIniLoad(this.iframe, this.win, rect),
+      this.whenRenderComplete(),
+      whenContentIniLoad(this.ampdoc, this.win, rect),
     ]).then(() => {
       this.signals_.signal(CommonSignals.INI_LOAD);
     });
   }
 
-  /**
-   * Whether the embed is currently visible. The interpretation of visibility
-   * is up to the embed parent. However, most of typical cases would rely on
-   * whether the embed is currently in the viewport.
-   * @return {boolean}
-   * TODO(dvoytenko): Re-evaluate and probably drop once layers are ready.
-   */
-  isVisible() {
-    return this.visible_;
-  }
-
-  /**
-   * See `isVisible` for more info.
-   * @param {function(boolean)} handler
-   * @return {!UnlistenDef}
-   */
-  onVisibilityChanged(handler) {
-    return this.visibilityObservable_.add(handler);
-  }
-
-  /**
-   * @param {boolean} visible
-   * @private
-   * @restricted
-   */
-  setVisible_(visible) {
-    if (this.visible_ != visible) {
-      this.visible_ = visible;
-      this.visibilityObservable_.fire(this.visible_);
-    }
-  }
-
   /**
    * @return {!HTMLBodyElement}
    * @visibleForTesting
    */
   getBodyElement() {
-    return /** @type {!HTMLBodyElement} */ ((
-      this.iframe.contentDocument || this.iframe.contentWindow.document
-    ).body);
+    return /** @type {!HTMLBodyElement} */ (
+      (this.iframe.contentDocument || this.iframe.contentWindow.document).body
+    );
   }
 
   /**
-   * @return {!./service/resources-interface.ResourcesInterface}
+   * Force remeasure inside FIE doc when iframe is resized.
    * @private
    */
-  getResources_() {
-    return Services.resourcesForDoc(this.iframe);
+  handleResize_() {
+    this.getMutator_().mutateElement(
+      this.win.document.documentElement,
+      () => {} // NOOP.
+    );
   }
 
   /**
@@ -627,21 +596,6 @@ export class FriendlyIframeEmbed {
     );
   }
 
-  /**
-   * Removes all resources belonging to the FIE window.
-   * @private
-   */
-  removeResources_() {
-    const resources = this.getResources_();
-    const toRemove = resources
-      .get()
-      .filter((resource) => resource.hostWin == this.win);
-    toRemove.forEach((resource) => {
-      resources.remove(resource.element);
-      resource.disconnect();
-    });
-  }
-
   /**
    * @return {!Promise}
    */
@@ -664,7 +618,7 @@ export class FriendlyIframeEmbed {
 
         // Offset by scroll top as iframe will be position: fixed.
         const dy = -Services.viewportForDoc(this.iframe).getScrollTop();
-        const {top, left, width, height} = moveLayoutRect(rect, /* dx */ 0, dy);
+        const {height, left, top, width} = moveLayoutRect(rect, /* dx */ 0, dy);
 
         // Offset body by header height to prevent visual jump.
         bodyStyle = {
@@ -733,258 +687,144 @@ export class FriendlyIframeEmbed {
       },
     });
   }
+}
 
+/**
+ * Install polyfills in the child window (friendly iframe).
+ * @param {!Window} parentWin
+ * @param {!Window} childWin
+ */
+function installPolyfillsInChildWindow(parentWin, childWin) {
+  if (!IS_ESM) {
+    installDocContains(childWin);
+    installDOMTokenList(childWin);
+  }
+  // The anonymous class parameter allows us to detect native classes vs
+  // transpiled classes.
+  if (!IS_SXG) {
+    installCustomElements(childWin, class {});
+    installIntersectionObserver(parentWin, childWin);
+    installResizeObserver(parentWin, childWin);
+    installAbortController(childWin);
+  }
+}
+
+/**
+ * Static installers that can be easily stubbed for tests.
+ * @visibleForTesting
+ */
+export class Installers {
   /**
    * Install extensions in the child window (friendly iframe). The pre-install
    * callback, if specified, is executed after polyfills have been configured
    * but before the first extension is installed.
-   * @param {!./service/extensions-impl.Extensions} extensions
+   * @param {!FriendlyIframeEmbed} embed
+   * @param {!./service/extensions-impl.Extensions} extensionsService
    * @param {!./service/ampdoc-impl.AmpDocFie} ampdoc
-   * @param {!Array<string>} extensionIds
-   * @param {function(!Window, ?./service/ampdoc-impl.AmpDoc=)=} opt_preinstallCallback
+   * @param {!Array<{extensionId: string, extensionVersion: string}>} extensions
+   * @param {function(!Window, ?./service/ampdoc-impl.AmpDoc=)|undefined} preinstallCallback
+   * @param {function(!Promise)=} opt_installComplete
    * @return {!Promise}
-   * @visibleForTesting
    */
-  installExtensionsInFie(
-    extensions,
+  static installExtensionsInEmbed(
+    embed,
+    extensionsService,
     ampdoc,
-    extensionIds,
-    opt_preinstallCallback
-  ) {
-    const topWin = extensions.win;
-    const childWin = ampdoc.win;
-    const parentWin = toWin(childWin.frameElement.ownerDocument.defaultView);
-    setParentWindow(childWin, parentWin);
-
-    // Install necessary polyfills.
-    installPolyfillsInChildWindow(parentWin, childWin);
-
-    // Install runtime styles.
-    installStylesForDoc(
-      ampdoc,
-      ampSharedCss,
-      /* callback */ null,
-      /* opt_isRuntimeCss */ true,
-      /* opt_ext */ 'amp-runtime'
-    );
-
-    // Run pre-install callback.
-    if (opt_preinstallCallback) {
-      opt_preinstallCallback(ampdoc.win, ampdoc);
-    }
-
-    // Install embeddable standard services.
-    installStandardServicesInEmbeddedDoc(ampdoc);
-
-    // Install built-ins and legacy elements.
-    copyBuiltinElementsToChildWindow(topWin, childWin);
-    stubLegacyElements(childWin);
-
-    return Promise.all(
-      extensionIds.map((extensionId) => {
-        // This will extend automatic upgrade of custom elements from top
-        // window to the child window.
-        if (!LEGACY_ELEMENTS.includes(extensionId)) {
-          stubElementIfNotKnown(childWin, extensionId);
-        }
-        return extensions.installExtensionInDoc(ampdoc, extensionId);
-      })
-    );
-  }
-  /**
-   * Prepare for installing extensions in the child window (friendly iframe).
-   * It injects polyfills, CSS for AMP runtime, standard services, built-in
-   * elements and stubs all other elements.
-   * The pre-install callback, if specified, is executed after polyfills have been configured.
-   * @param {!./service/extensions-impl.Extensions} extensions
-   * @param {!Window} childWin
-   * @param {!Array<string>} extensionIds
-   * @param {function(!Window, ?./service/ampdoc-impl.AmpDoc=)=} opt_preinstallCallback
-   * @return {!Promise}
-   * @visibleForTesting
-   */
-  preInstallExtensionsInChildWindow(
     extensions,
-    childWin,
-    extensionIds,
-    opt_preinstallCallback
+    preinstallCallback,
+    opt_installComplete
   ) {
-    const topWin = extensions.win;
+    const childWin = ampdoc.win;
     const parentWin = toWin(childWin.frameElement.ownerDocument.defaultView);
     setParentWindow(childWin, parentWin);
-    const maybeGetDelayPromise = getDelayPromiseProducer(parentWin);
+    const getDelayPromise = getDelayPromiseProducer();
 
-    return maybeGetDelayPromise(undefined)
+    return getDelayPromise(undefined)
       .then(() => {
         // Install necessary polyfills.
         installPolyfillsInChildWindow(parentWin, childWin);
       })
-      .then(maybeGetDelayPromise)
+      .then(getDelayPromise)
       .then(() => {
-        // Install runtime styles.
-        installStylesLegacy(
-          childWin.document,
-          ampSharedCss,
-          /* callback */ null,
-          /* opt_isRuntimeCss */ true,
-          /* opt_ext */ 'amp-runtime'
-        );
+        if (IS_ESM) {
+          // TODO: This is combined (ampdoc + shared), not just shared
+          // const css = parentWin.document.querySelector('style[amp-runtime]')
+          // .textContent;
+          installStylesForDoc(
+            ampdoc,
+            ampSharedCss,
+            /* callback */ null,
+            /* opt_isRuntimeCss */ true,
+            /* opt_ext */ 'amp-runtime'
+          );
+        } else {
+          // Install runtime styles.
+          installStylesForDoc(
+            ampdoc,
+            ampSharedCss,
+            /* callback */ null,
+            /* opt_isRuntimeCss */ true,
+            /* opt_ext */ 'amp-runtime'
+          );
+        }
       })
-      .then(maybeGetDelayPromise)
+      .then(getDelayPromise)
       .then(() => {
+        if (!childWin.frameElement) {
+          return;
+        }
         // Run pre-install callback.
-        if (opt_preinstallCallback) {
-          opt_preinstallCallback(childWin);
+        if (preinstallCallback) {
+          preinstallCallback(ampdoc.win, ampdoc);
         }
       })
-      .then(maybeGetDelayPromise)
+      .then(getDelayPromise)
       .then(() => {
+        if (!childWin.frameElement) {
+          return;
+        }
         // Install embeddable standard services.
-        installStandardServicesInEmbed(childWin);
+        Installers.installStandardServicesInEmbed(ampdoc);
       })
-      .then(maybeGetDelayPromise)
+      .then(getDelayPromise)
       .then(() => {
-        // Install built-ins elements.
-        copyBuiltinElementsToChildWindow(topWin, childWin);
-        stubLegacyElements(childWin);
+        if (!childWin.frameElement) {
+          return;
+        }
+        extensionsService.preinstallEmbed(ampdoc, extensions);
       })
-      .then(maybeGetDelayPromise)
+      .then(getDelayPromise)
       .then(() => {
-        extensionIds.forEach((extensionId) => {
-          // This will extend automatic upgrade of custom elements from top
-          // window to the child window.
-          if (!LEGACY_ELEMENTS.includes(extensionId)) {
-            stubElementIfNotKnown(childWin, extensionId);
-          }
-        });
+        if (!childWin.frameElement) {
+          return;
+        }
+        // Ready to be shown.
+        embed.startRender_();
       })
-      .then(maybeGetDelayPromise);
+      .then(getDelayPromise)
+      .then(() => {
+        if (!childWin.frameElement) {
+          return;
+        }
+        // Intentionally do not wait for the full installation to complete.
+        // It's enough of initialization done to return the embed.
+        const promise = extensionsService.installExtensionsInDoc(
+          ampdoc,
+          extensions
+        );
+        ampdoc.setExtensionsKnown();
+        if (opt_installComplete) {
+          opt_installComplete(promise);
+        }
+      });
   }
 
   /**
-   * Install non-built-in extensions in the child window (friendly iframe).
-   * @param {!./service/extensions-impl.Extensions} extensions
-   * @param {!Window} childWin
-   * @param {!Array<string>} extensionIds
-   * @return {!Promise}
-   * @visibleForTesting
+   * Adopt predefined core services for the embedded ampdoc (friendly iframe).
+   * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
    */
-  doInstallExtensionsInChildWindow(extensions, childWin, extensionIds) {
-    const parentWin = toWin(childWin.frameElement.ownerDocument.defaultView);
-    const maybeGetDelayPromise = getDelayPromiseProducer(parentWin);
-
-    const promises = [];
-    extensionIds.forEach((extensionId) => {
-      const promise = maybeGetDelayPromise(undefined)
-        .then(() => extensions.preloadExtension(extensionId))
-        .then((extension) => {
-          // Adopt embeddable extension services.
-          /** @type {!Array} */ (extension.services).forEach((service) => {
-            installServiceInEmbedIfEmbeddable(childWin, service.serviceClass);
-          });
-
-          // Adopt the custom elements.
-          let elementPromises = null;
-          for (const elementName in extension.elements) {
-            const elementDef = extension.elements[elementName];
-            const elementPromise = new Promise((resolve) => {
-              if (elementDef.css) {
-                installStylesLegacy(
-                  childWin.document,
-                  elementDef.css,
-                  /* completeCallback */ resolve,
-                  /* isRuntime */ false,
-                  extensionId
-                );
-              } else {
-                resolve();
-              }
-            }).then(() => {
-              upgradeOrRegisterElement(
-                childWin,
-                elementName,
-                elementDef.implementationClass
-              );
-            });
-            if (elementPromises) {
-              elementPromises.push(elementPromise);
-            } else {
-              elementPromises = [elementPromise];
-            }
-          }
-          if (elementPromises) {
-            return Promise.all(elementPromises).then(() => extension);
-          }
-          return extension;
-        });
-      promises.push(promise);
-    });
-    return Promise.all(promises);
+  static installStandardServicesInEmbed(ampdoc) {
+    installTimerInEmbedWindow(ampdoc.win);
+    installAmpdocServicesForEmbed(ampdoc);
   }
 }
-
-/**
- * Install polyfills in the child window (friendly iframe).
- * @param {!Window} parentWin
- * @param {!Window} childWin
- */
-function installPolyfillsInChildWindow(parentWin, childWin) {
-  installDocContains(childWin);
-  installDOMTokenList(childWin);
-  // The anonymous class parameter allows us to detect native classes vs
-  // transpiled classes.
-  installCustomElements(childWin, class {});
-  if (
-    // eslint-disable-next-line no-undef
-    INTERSECTION_OBSERVER_POLYFILL ||
-    getMode().localDev ||
-    getMode().test
-  ) {
-    installIntersectionObserver(parentWin, childWin);
-  }
-}
-
-/**
- * Copy builtins to a child window.
- * @param {!Window} parentWin
- * @param {!Window} childWin
- */
-function copyBuiltinElementsToChildWindow(parentWin, childWin) {
-  copyElementToChildWindow(parentWin, childWin, 'amp-img');
-  copyElementToChildWindow(parentWin, childWin, 'amp-pixel');
-}
-
-/**
- * Adopt predefined core services for the embedded ampdoc (friendly iframe).
- * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
- */
-function installStandardServicesInEmbeddedDoc(ampdoc) {
-  installAmpdocServices(ampdoc);
-  installTimerInEmbedWindow(ampdoc.win);
-}
-
-/**
- * Adopt predefined core services for the child window (friendly iframe).
- * @param {!Window} childWin
- * @visibleForTesting
- */
-export function installStandardServicesInEmbed(childWin) {
-  // TODO(#22733): remove when ampdoc-fie is launched.
-  const frameElement = dev().assertElement(
-    childWin.frameElement,
-    'frameElement not found for embed'
-  );
-  const standardServices = [
-    // The order of service adoptations is important.
-    Services.urlForDoc(frameElement),
-    Services.actionServiceForDoc(frameElement),
-    Services.standardActionsForDoc(frameElement),
-    Services.navigationForDoc(frameElement),
-  ];
-  const ampdoc = getAmpdoc(frameElement);
-  standardServices.forEach((service) => {
-    // Static functions must be invoked on the class, not the instance.
-    service.constructor.installInEmbedWindow(childWin, ampdoc);
-  });
-  installTimerInEmbedWindow(childWin);
-}
diff --git a/src/gesture.js b/src/gesture.js
index d1e8d0604d6b7..cadc8feaab7b4 100644
--- a/src/gesture.js
+++ b/src/gesture.js
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import {Observable} from './observable';
+import {Observable} from './core/data-structures/observable';
 import {Pass} from './pass';
 import {devAssert} from './log';
-import {findIndex} from './utils/array';
+import {findIndex} from './core/types/array';
 import {supportsPassiveEventListener} from './event-helper-listen';
 import {toWin} from './types';
 
diff --git a/src/iframe-attributes.js b/src/iframe-attributes.js
index 31ff329f20f11..92221499d4111 100644
--- a/src/iframe-attributes.js
+++ b/src/iframe-attributes.js
@@ -13,12 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {DomFingerprint} from './utils/dom-fingerprint';
+import {DomFingerprint} from './core/dom/fingerprint';
 import {Services} from './services';
-import {dict} from './utils/object.js';
+import {dict} from './core/types/object';
 import {experimentToggles, isCanary} from './experiments';
 import {getLengthNumeral} from './layout';
 import {getModeObject} from './mode-object';
+import {getPageLayoutBoxBlocking} from './utils/page-layout-box';
 import {internalRuntimeVersion} from './internal-version';
 import {urls} from './config';
 
@@ -58,9 +59,7 @@ export function getContextMetadata(
   const viewer = Services.viewerForDoc(element);
   const referrer = viewer.getUnconfirmedReferrerUrl();
 
-  // TODO(alanorozco): Redesign data structure so that fields not exposed by
-  // AmpContext are not part of this object.
-  const layoutRect = element.getPageLayoutBox();
+  const layoutRect = getPageLayoutBoxBlocking(element);
 
   // Use JsonObject to preserve field names so that ampContext can access
   // values with name
@@ -95,7 +94,6 @@ export function getContextMetadata(
           'height': layoutRect.height,
         }
       : null,
-    'initialIntersection': element.getIntersectionChangeEntry(),
     'domFingerprint': DomFingerprint.generate(element),
     'experimentToggles': experimentToggles(parentWindow),
     'sentinel': sentinel,
diff --git a/src/iframe-helper.js b/src/iframe-helper.js
index eb638f2f24c5c..7029e9bce781b 100644
--- a/src/iframe-helper.js
+++ b/src/iframe-helper.js
@@ -17,12 +17,12 @@
 import {addAttributesToElement, closestAncestorElementBySelector} from './dom';
 import {deserializeMessage, isAmpMessage} from './3p-frame-messaging';
 import {dev, devAssert} from './log';
-import {dict} from './utils/object';
+import {dict} from './core/types/object';
 import {getData} from './event-helper';
 import {parseUrlDeprecated} from './url';
-import {remove} from './utils/array';
-import {setStyle, toggle} from './style';
-import {tryParseJson} from './json';
+import {remove} from './core/types/array';
+import {setStyle} from './style';
+import {tryParseJson} from './core/types/object/json';
 
 /**
  * Sentinel used to force unlistening after a iframe is detached.
@@ -30,13 +30,6 @@ import {tryParseJson} from './json';
  */
 const UNLISTEN_SENTINEL = 'unlisten';
 
-/**
- * The iframe feature policy that forces the iframe to pause when it's not
- * display.
- * See https://github.com/dtapuska/iframe-freeze.
- */
-const EXECUTION_WHILE_NOT_RENDERED = 'execution-while-not-rendered';
-
 /**
  * @typedef {{
  *   frame: !Element,
@@ -518,9 +511,9 @@ export class SubscriptionApi {
  * @return {boolean}
  */
 export function looksLikeTrackingIframe(element) {
-  const box = element.getLayoutBox();
+  const {height, width} = element.getLayoutSize();
   // This heuristic is subject to change.
-  if (box.width > 10 || box.height > 10) {
+  if (width > 10 || height > 10) {
     return false;
   }
   // Iframe is not tracking iframe if open with user interaction
@@ -543,8 +536,7 @@ const adSizes = [
  * @visibleForTesting
  */
 export function isAdLike(element) {
-  const box = element.getLayoutBox();
-  const {height, width} = box;
+  const {height, width} = element.getLayoutSize();
   for (let i = 0; i < adSizes.length; i++) {
     const refWidth = adSizes[i][0];
     const refHeight = adSizes[i][1];
@@ -593,7 +585,6 @@ export function canInspectWindow(win) {
     // to optimize this check away.
     return !!win.location.href && (win['test'] || true);
   } catch (unusedErr) {
-    // eslint-disable-line no-unused-vars
     return false;
   }
 }
@@ -610,9 +601,9 @@ export const FIE_EMBED_PROP = '__AMP_EMBED__';
  * @return {?./friendly-iframe-embed.FriendlyIframeEmbed}
  */
 export function getFriendlyIframeEmbedOptional(iframe) {
-  return /** @type {?./friendly-iframe-embed.FriendlyIframeEmbed} */ (iframe[
-    FIE_EMBED_PROP
-  ]);
+  return /** @type {?./friendly-iframe-embed.FriendlyIframeEmbed} */ (
+    iframe[FIE_EMBED_PROP]
+  );
 }
 
 /**
@@ -625,35 +616,3 @@ export function isInFie(element) {
     !!closestAncestorElementBySelector(element, '.i-amphtml-fie')
   );
 }
-
-/**
- * @param {!HTMLIFrameElement} iframe
- */
-export function makePausable(iframe) {
-  const oldAllow = (iframe.getAttribute('allow') || '').trim();
-  iframe.setAttribute(
-    'allow',
-    `${EXECUTION_WHILE_NOT_RENDERED} 'none';` + oldAllow
-  );
-}
-
-/**
- * @param {!HTMLIFrameElement} iframe
- * @return {boolean}
- */
-export function isPausable(iframe) {
-  return (
-    !!iframe.featurePolicy &&
-    iframe.featurePolicy.features().indexOf(EXECUTION_WHILE_NOT_RENDERED) !=
-      -1 &&
-    !iframe.featurePolicy.allowsFeature(EXECUTION_WHILE_NOT_RENDERED)
-  );
-}
-
-/**
- * @param {!HTMLIFrameElement} iframe
- * @param {boolean} paused
- */
-export function setPaused(iframe, paused) {
-  toggle(iframe, !paused);
-}
diff --git a/src/iframe-video.js b/src/iframe-video.js
index 60b029497eb92..b7ae5e1be0a5d 100644
--- a/src/iframe-video.js
+++ b/src/iframe-video.js
@@ -16,10 +16,10 @@
 import {Services} from './services';
 import {VideoEvents} from './video-interface';
 import {dev} from './log';
+import {dispatchCustomEvent} from './dom';
 import {htmlFor} from './static-template';
-import {isArray, isObject} from './types';
-import {startsWith} from './string';
-import {tryParseJson} from './json';
+import {isArray, isObject} from './core/types';
+import {tryParseJson} from './core/types/object/json';
 
 /** @enum {string} */
 export const SandboxOptions = {
@@ -62,7 +62,7 @@ export function redispatch(element, event, events) {
   }
   const dispatchEvent = events[event];
   (isArray(dispatchEvent) ? dispatchEvent : [dispatchEvent]).forEach((e) => {
-    element.dispatchCustomEvent(dev().assertString(e));
+    dispatchCustomEvent(element, dev().assertString(e));
   });
   return true;
 }
@@ -108,9 +108,7 @@ export function isJsonOrObj(anything) {
   if (!anything) {
     return false;
   }
-  return (
-    isObject(anything) || startsWith(/** @type {string} */ (anything), '{')
-  );
+  return isObject(anything) || /** @type {string} */ (anything).startsWith('{');
 }
 
 /**
@@ -145,3 +143,11 @@ export function addUnsafeAllowAutoplay(iframe) {
   val += 'autoplay;';
   iframe.setAttribute('allow', val);
 }
+
+/**
+ * @param {?HTMLIFrameElement=} iframe
+ * @param {*} message
+ */
+export function postMessageWhenAvailable(iframe, message) {
+  iframe?.contentWindow?./*OK*/ postMessage(message, '*');
+}
diff --git a/src/impression.js b/src/impression.js
index 6c9afd7a04bac..5446b1851611e 100644
--- a/src/impression.js
+++ b/src/impression.js
@@ -14,17 +14,14 @@
  * limitations under the License.
  */
 
-import {Deferred} from './utils/promise';
+import {Deferred} from './core/data-structures/promise';
 import {Services} from './services';
-import {
-  addParamsToUrl,
-  isProxyOrigin,
-  parseQueryString,
-  parseUrlDeprecated,
-} from './url';
+import {WindowInterface} from './window-interface';
+import {addParamsToUrl, isProxyOrigin, parseUrlDeprecated} from './url';
 import {dev, user, userAssert} from './log';
 import {getMode} from './mode';
 import {isExperimentOn} from './experiments';
+import {parseQueryString} from './core/types/string/url';
 
 const TIMEOUT_VALUE = 8000;
 
@@ -37,9 +34,9 @@ const DEFAULT_APPEND_URL_PARAM = ['gclid', 'gclsrc'];
  * sending impression requests. If you believe your domain should be here,
  * file the issue on GitHub to discuss. The process will be similar
  * (but somewhat more stringent) to the one described in the [3p/README.md](
- * https://github.com/ampproject/amphtml/blob/master/3p/README.md)
+ * https://github.com/ampproject/amphtml/blob/main/3p/README.md)
  *
- * @export {!Array<!RegExp>}
+ * @type {!Array<!RegExp>}
  */
 const TRUSTED_REFERRER_HOSTS = [
   /**
@@ -204,11 +201,11 @@ function handleClickUrl(win) {
     return Promise.resolve();
   }
 
-  if (win.location.hash) {
+  if (WindowInterface.getLocation(win).hash) {
     // This is typically done using replaceState inside the viewer.
     // If for some reason it failed, get rid of the fragment here to
     // avoid duplicate tracking.
-    win.location.hash = '';
+    WindowInterface.getLocation(win).hash = '';
   }
 
   // TODO(@zhouyx) need test with a real response.
@@ -278,7 +275,7 @@ function applyResponse(win, response) {
     }
 
     const viewer = Services.viewerForDoc(win.document.documentElement);
-    const currentHref = win.location.href;
+    const currentHref = WindowInterface.getLocation(win).href;
     const url = parseUrlDeprecated(adLocation);
     const params = parseQueryString(url.search);
     const newHref = addParamsToUrl(currentHref, params);
@@ -310,7 +307,7 @@ export function shouldAppendExtraParams(ampdoc) {
  */
 export function getExtraParamsUrl(win, target) {
   // Get an array with extra params that needs to append.
-  const url = parseUrlDeprecated(win.location.href);
+  const url = parseUrlDeprecated(WindowInterface.getLocation(win).href);
   const params = parseQueryString(url.search);
   const appendParams = [];
   for (let i = 0; i < DEFAULT_APPEND_URL_PARAM.length; i++) {
diff --git a/src/inabox/OWNERS b/src/inabox/OWNERS
index 94b65ebe76929..1b8c3b93f6d99 100644
--- a/src/inabox/OWNERS
+++ b/src/inabox/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/src/inabox/amp-inabox.js b/src/inabox/amp-inabox.js
index f4daaed025c39..7fbc35708167b 100644
--- a/src/inabox/amp-inabox.js
+++ b/src/inabox/amp-inabox.js
@@ -21,7 +21,7 @@
 import '../polyfills';
 import {Navigation} from '../service/navigation';
 import {Services} from '../services';
-import {TickLabel} from '../enums';
+import {TickLabel} from '../core/constants/enums';
 import {adopt} from '../runtime';
 import {allowLongTasksInChunking, startupChunk} from '../chunk';
 import {cssText as ampSharedCss} from '../../build/ampshared.css';
@@ -35,7 +35,7 @@ import {
   installRuntimeServices,
 } from '../service/core-services';
 import {installDocService} from '../service/ampdoc-impl';
-import {installErrorReporting} from '../error';
+import {installErrorReporting} from '../error-reporting';
 import {installPerformanceService} from '../service/performance-impl';
 import {installPlatformService} from '../service/platform-impl';
 import {
@@ -44,6 +44,7 @@ import {
   makeBodyVisibleRecovery,
 } from '../style-installer';
 import {internalRuntimeVersion} from '../internal-version';
+import {maybeRenderInaboxAsStoryAd} from './inabox-story-ad';
 import {maybeValidate} from '../validator-integration';
 import {stubElementsForDoc} from '../service/custom-element-registry';
 
@@ -83,6 +84,7 @@ startupChunk(self.document, function initial() {
   self.document.documentElement.classList.add('i-amphtml-inabox');
   installStylesForDoc(
     ampdoc,
+    // TODO: Can this be eliminated in ESM mode?
     ampSharedCss +
       'html.i-amphtml-inabox{width:100%!important;height:100%!important}',
     () => {
@@ -111,6 +113,7 @@ startupChunk(self.document, function initial() {
         self.document,
         function final() {
           Navigation.installAnchorClickInterceptor(ampdoc, self);
+          maybeRenderInaboxAsStoryAd(ampdoc);
           maybeValidate(self);
           makeBodyVisible(self.document);
         },
diff --git a/src/inabox/host-services.js b/src/inabox/host-services.js
index e733f4825e79b..1fc2a68d0c697 100644
--- a/src/inabox/host-services.js
+++ b/src/inabox/host-services.js
@@ -69,10 +69,9 @@ export class HostServices {
    * @return {!Promise<!VisibilityInterface>}
    */
   static visibilityForDoc(elementOrAmpDoc) {
-    return /** @type {!Promise<!VisibilityInterface>} */ (getServicePromiseForDoc(
-      elementOrAmpDoc,
-      ServiceNames.VISIBILITY
-    ));
+    return /** @type {!Promise<!VisibilityInterface>} */ (
+      getServicePromiseForDoc(elementOrAmpDoc, ServiceNames.VISIBILITY)
+    );
   }
 
   /**
@@ -101,10 +100,9 @@ export class HostServices {
    * @return {!Promise<!FullscreenInterface>}
    */
   static fullscreenForDoc(elementOrAmpDoc) {
-    return /** @type {!Promise<!FullscreenInterface>} */ (getServicePromiseForDoc(
-      elementOrAmpDoc,
-      ServiceNames.FULLSCREEN
-    ));
+    return /** @type {!Promise<!FullscreenInterface>} */ (
+      getServicePromiseForDoc(elementOrAmpDoc, ServiceNames.FULLSCREEN)
+    );
   }
 
   /**
@@ -133,10 +131,9 @@ export class HostServices {
    * @return {!Promise<!ExitInterface>}
    */
   static exitForDoc(elementOrAmpDoc) {
-    return /** @type {!Promise<!ExitInterface>} */ (getServicePromiseForDoc(
-      elementOrAmpDoc,
-      ServiceNames.EXIT
-    ));
+    return /** @type {!Promise<!ExitInterface>} */ (
+      getServicePromiseForDoc(elementOrAmpDoc, ServiceNames.EXIT)
+    );
   }
 
   /**
diff --git a/src/inabox/inabox-iframe-messaging-client.js b/src/inabox/inabox-iframe-messaging-client.js
index f444249f3055f..a048b0f32087c 100644
--- a/src/inabox/inabox-iframe-messaging-client.js
+++ b/src/inabox/inabox-iframe-messaging-client.js
@@ -17,17 +17,16 @@
 import {IframeMessagingClient} from '../../3p/iframe-messaging-client';
 import {canInspectWindow} from '../iframe-helper';
 import {getExistingServiceOrNull, registerServiceBuilder} from '../service';
-import {tryParseJson} from '../json';
+import {tryParseJson} from '../core/types/object/json';
 
 /**
  * @param {!Window} win
  * @return {?../../3p/iframe-messaging-client.IframeMessagingClient}
  */
 export function iframeMessagingClientFor(win) {
-  return /** @type {?../../3p/iframe-messaging-client.IframeMessagingClient} */ (getExistingServiceOrNull(
-    win,
-    'iframeMessagingClient'
-  ));
+  return /** @type {?../../3p/iframe-messaging-client.IframeMessagingClient} */ (
+    getExistingServiceOrNull(win, 'iframeMessagingClient')
+  );
 }
 
 /**
diff --git a/src/inabox/inabox-mutator.js b/src/inabox/inabox-mutator.js
index ff53fe5b028f6..8c6cd05845bb1 100644
--- a/src/inabox/inabox-mutator.js
+++ b/src/inabox/inabox-mutator.js
@@ -56,10 +56,6 @@ export class InaboxMutator {
   expandElement(element) {
     const resource = this.resources_.getResourceForElement(element);
     resource.completeExpand();
-    const owner = resource.getOwner();
-    if (owner) {
-      owner.expandedCallback(element);
-    }
     this.resources_./*OK*/ schedulePass();
   }
 
diff --git a/src/inabox/inabox-resources.js b/src/inabox/inabox-resources.js
index f8ed47e1e5b5f..c95166fd8ff65 100644
--- a/src/inabox/inabox-resources.js
+++ b/src/inabox/inabox-resources.js
@@ -14,34 +14,21 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../utils/promise';
-import {Observable} from '../observable';
+import {Deferred} from '../core/data-structures/promise';
+import {Observable} from '../core/data-structures/observable';
 import {Pass} from '../pass';
 import {READY_SCAN_SIGNAL} from '../service/resources-interface';
 import {Resource, ResourceState} from '../service/resource';
 import {Services} from '../services';
+import {VisibilityState} from '../core/constants/visibility-state';
 import {dev} from '../log';
+import {getMode} from '../mode';
+import {hasNextNodeInDocumentOrder} from '../dom';
 import {registerServiceBuilderForDoc} from '../service';
 
 const TAG = 'inabox-resources';
 const FOUR_FRAME_DELAY = 70;
 
-/**
- * Only a few components require viewportCallback.
- * Allow them to observe intersections explicitly.
- * @private @const {!Array<string>}
- */
-const receivesViewportCallback = ['AMP-CAROUSEL'];
-
-/** @param {!IntersectionObserverEntry} entry */
-function triggerViewportCallbackFromIntersection(entry) {
-  const {target, isIntersecting} = entry;
-  if (!target.viewportCallback) {
-    return;
-  }
-  target.viewportCallback(isIntersecting);
-}
-
 /**
  * @implements {../service/resources-interface.ResourcesInterface}
  * @implements {../service.Disposable}
@@ -78,10 +65,39 @@ export class InaboxResources {
 
     const input = Services.inputFor(this.win);
     input.setupInputModeClasses(ampdoc);
+
+    // TODO(#31246): launch the visibility logic in inabox as well.
+    if (getMode(this.win).runtime != 'inabox') {
+      ampdoc.onVisibilityChanged(() => {
+        switch (ampdoc.getVisibilityState()) {
+          case VisibilityState.PAUSED:
+            this.resources_.forEach((r) => r.pause());
+            break;
+          case VisibilityState.VISIBLE:
+            this.resources_.forEach((r) => r.resume());
+            this./*OK*/ schedulePass();
+            break;
+        }
+      });
+    }
+
+    /** @private {!Array<Resource>} */
+    this.pendingBuildResources_ = [];
+
+    /** @private {boolean} */
+    this.documentReady_ = false;
+
+    this.ampdoc_.whenReady().then(() => {
+      this.documentReady_ = true;
+      this.buildReadyResources_();
+      this./*OK*/ schedulePass(1);
+    });
   }
 
   /** @override */
   dispose() {
+    this.resources_.forEach((r) => r.unload());
+    this.resources_.length = 0;
     if (this.inViewportObserver_) {
       this.inViewportObserver_.disconnect();
       this.inViewportObserver_ = null;
@@ -117,18 +133,14 @@ export class InaboxResources {
   add(element) {
     const resource = new Resource(++this.resourceIdCounter_, element, this);
     this.resources_.push(resource);
-    this.maybeObserveInViewport_(element);
     dev().fine(TAG, 'resource added:', resource.debugid);
   }
 
   /** @override */
   upgraded(element) {
     const resource = Resource.forElement(element);
-    this.ampdoc_
-      .whenReady()
-      .then(resource.build.bind(resource))
-      .then(this.schedulePass.bind(this));
-    dev().fine(TAG, 'resource upgraded:', resource.debugid);
+    this.pendingBuildResources_.push(resource);
+    this.buildReadyResources_();
   }
 
   /** @override */
@@ -189,19 +201,15 @@ export class InaboxResources {
     return this.firstPassDone_.promise;
   }
 
-  /** @override */
-  isIntersectionExperimentOn() {
-    return false;
-  }
-
   /**
    * @private
    */
   doPass_() {
+    const now = Date.now();
     dev().fine(TAG, 'doPass');
     // measure in a batch
     this.resources_.forEach((resource) => {
-      if (!resource.isLayoutPending()) {
+      if (!resource.isLayoutPending() || resource.element.R1()) {
         return;
       }
       resource.measure();
@@ -209,9 +217,11 @@ export class InaboxResources {
     // mutation in a batch
     this.resources_.forEach((resource) => {
       if (
+        !resource.element.R1() &&
         resource.getState() === ResourceState.READY_FOR_LAYOUT &&
         resource.isDisplayed()
       ) {
+        resource.layoutScheduled(now);
         resource.startLayout();
       }
     });
@@ -222,43 +232,23 @@ export class InaboxResources {
   }
 
   /**
-   * Instantiates an IntersectionObserver (if available) that triggers
-   * viewportCallbacks.
-   * @return {?IntersectionObserver}
+   * Builds any pending resouces if document is ready, or next element has been
+   * added to DOM.
    * @private
    */
-  maybeInitInViewportObserver_() {
-    const {IntersectionObserver} = this.win;
-    if (!IntersectionObserver) {
-      return null;
-    }
-    if (this.inViewportObserver_ === null) {
-      this.inViewportObserver_ = new IntersectionObserver((entries) =>
-        entries.forEach(triggerViewportCallbackFromIntersection)
-      );
-    }
-    return this.inViewportObserver_;
-  }
-
-  /**
-   * Observes an element so it will receive viewportCallbacks when allowed.
-   * @param {!Element} element
-   * @private
-   */
-  maybeObserveInViewport_(element) {
-    if (!receivesViewportCallback.includes(element.tagName)) {
-      return;
-    }
-    const observer = this.maybeInitInViewportObserver_();
-    if (observer) {
-      observer.observe(element);
+  buildReadyResources_() {
+    for (let i = this.pendingBuildResources_.length - 1; i >= 0; i--) {
+      const resource = this.pendingBuildResources_[i];
+      if (
+        this.documentReady_ ||
+        hasNextNodeInDocumentOrder(resource.element, this.ampdoc_.getRootNode())
+      ) {
+        this.pendingBuildResources_.splice(i, 1);
+        resource.build().then(() => this./*OK*/ schedulePass());
+        dev().fine(TAG, 'resource upgraded:', resource.debugid);
+      }
     }
   }
-
-  /** @override */
-  getSlowElementRatio() {
-    return 0;
-  }
 }
 
 /**
diff --git a/src/inabox/inabox-services.js b/src/inabox/inabox-services.js
index f3846fdcee8bd..434dc3d332a8d 100644
--- a/src/inabox/inabox-services.js
+++ b/src/inabox/inabox-services.js
@@ -28,6 +28,7 @@ import {installInaboxViewerServiceForDoc} from './inabox-viewer';
 import {installInaboxViewportService} from './inabox-viewport';
 import {installOwnersServiceForDoc} from '../service/owners-impl';
 import {installStandardActionsForDoc} from '../service/standard-actions-impl';
+import {installTemplatesServiceForDoc} from '../service/template-impl';
 import {installUrlForDoc} from '../service/url-impl';
 import {installUrlReplacementsServiceForDoc} from '../service/url-replacements-impl';
 import {rejectServicePromiseForDoc} from '../service';
@@ -40,6 +41,7 @@ export function installAmpdocServicesForInabox(ampdoc) {
   // Order is important!
   installIframeMessagingClient(ampdoc.win); // this is an inabox-only service
   installUrlForDoc(ampdoc);
+  installTemplatesServiceForDoc(ampdoc);
   installDocumentInfoServiceForDoc(ampdoc);
   installInaboxCidService(ampdoc);
   installInaboxViewerServiceForDoc(ampdoc);
diff --git a/src/inabox/inabox-story-ad.js b/src/inabox/inabox-story-ad.js
new file mode 100644
index 0000000000000..4729a3e336748
--- /dev/null
+++ b/src/inabox/inabox-story-ad.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {ButtonTextFitter} from '../../extensions/amp-story-auto-ads/0.1/story-ad-button-text-fitter';
+import {
+  START_CTA_ANIMATION_ATTR,
+  createCta,
+  getStoryAdMetadataFromDoc,
+  maybeCreateAttribution,
+  validateCtaMetadata,
+} from '../../extensions/amp-story-auto-ads/0.1/story-ad-ui';
+import {CSS as inaboxCSS} from '../../build/amp-story-auto-ads-inabox-0.1.css';
+import {installStylesForDoc} from '../style-installer';
+import {CSS as sharedCSS} from '../../build/amp-story-auto-ads-shared-0.1.css';
+
+/**
+ * If story ad metatags exist, render this creative as a story ad.
+ * @param {!../service/ampdoc-impl.AmpDoc} ampdoc
+ */
+export function maybeRenderInaboxAsStoryAd(ampdoc) {
+  const {win} = ampdoc;
+  const doc = win.document;
+  const storyAdMetadata = getStoryAdMetadataFromDoc(doc);
+  if (!validateCtaMetadata(storyAdMetadata, true /* opt_inabox */)) {
+    return;
+  }
+  installStylesForDoc(ampdoc, sharedCSS + inaboxCSS, () => {});
+  maybeCreateAttribution(win, storyAdMetadata, doc.body);
+
+  const buttonFitter = new ButtonTextFitter(ampdoc);
+  const ctaContainer = doc.createElement('div');
+
+  // TODO(ccordry): maybe use inOb for visible signal to fire animation
+  // across amp & inabox environments.
+  createCta(doc, buttonFitter, ctaContainer, storyAdMetadata).then(
+    (ctaAnchor) =>
+      ctaAnchor && ctaAnchor.setAttribute(START_CTA_ANIMATION_ATTR, '')
+  );
+
+  doc.body.appendChild(ctaContainer);
+
+  if (win.parent) {
+    win.parent./*OK*/ postMessage('amp-story-ad-load', '*');
+  }
+}
diff --git a/src/inabox/inabox-viewer.js b/src/inabox/inabox-viewer.js
index e7642d655b837..bbcc6d772c59a 100644
--- a/src/inabox/inabox-viewer.js
+++ b/src/inabox/inabox-viewer.js
@@ -89,11 +89,6 @@ class InaboxViewer {
     return false;
   }
 
-  /** @override */
-  getPrerenderSize() {
-    return 0;
-  }
-
   /** @override */
   getResolvedViewerUrl() {
     return this.ampdoc_.win.location.href;
diff --git a/src/inabox/inabox-viewport.js b/src/inabox/inabox-viewport.js
index 2507f1730a1e6..04acd0208184f 100644
--- a/src/inabox/inabox-viewport.js
+++ b/src/inabox/inabox-viewport.js
@@ -15,12 +15,13 @@
  */
 
 import {MessageType} from '../../src/3p-frame-messaging';
-import {Observable} from '../observable';
+import {Observable} from '../core/data-structures/observable';
 import {Services} from '../services';
 import {ViewportBindingDef} from '../service/viewport/viewport-binding-def';
 import {ViewportInterface} from '../service/viewport/viewport-interface';
 import {canInspectWindow} from '../iframe-helper';
-import {dev, devAssert} from '../log';
+import {dev} from '../log';
+import {devAssert, devAssertElement} from '../core/assert';
 import {getFrameOverlayManager} from '../../ads/inabox/frame-overlay-manager.js';
 import {getPositionObserver} from '../../ads/inabox/position-observer';
 import {iframeMessagingClientFor} from './inabox-iframe-messaging-client';
@@ -29,10 +30,10 @@ import {
   layoutRectFromDomRect,
   layoutRectLtwh,
   moveLayoutRect,
-} from '../layout-rect';
+} from '../core/math/layout-rect';
 import {px, resetStyles, setImportantStyles} from '../style';
 import {registerServiceBuilderForDoc} from '../service';
-import {throttle} from '../utils/rate-limit';
+import {throttle} from '../core/types/function';
 
 /** @const {string} */
 const TAG = 'inabox-viewport';
@@ -798,7 +799,7 @@ export class ViewportBindingInabox {
 
   /** @visibleForTesting */
   getBodyElement() {
-    return dev().assertElement(this.win.document.body);
+    return devAssertElement(this.win.document.body);
   }
 
   /** @override */
diff --git a/src/ini-load.js b/src/ini-load.js
index c76636b3b7fb1..208f5555462eb 100644
--- a/src/ini-load.js
+++ b/src/ini-load.js
@@ -16,6 +16,7 @@
 
 import {READY_SCAN_SIGNAL} from './service/resources-interface';
 import {Services} from './services';
+import {isIframed} from './dom';
 
 /** @const {!Array<string>} */
 const EXCLUDE_INI_LOAD = [
@@ -31,14 +32,42 @@ const EXCLUDE_INI_LOAD = [
  * @param {!Element|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
  * @param {!Window} hostWin
  * @param {!./layout-rect.LayoutRectDef} rect
- * @param {boolean=} opt_isInPrerender signifies if we are in prerender mode.
+ * @param {boolean=} opt_prerenderableOnly signifies if we are in prerender mode.
  * @return {!Promise}
  */
 export function whenContentIniLoad(
   elementOrAmpDoc,
   hostWin,
   rect,
-  opt_isInPrerender
+  opt_prerenderableOnly
+) {
+  if (INI_LOAD_INOB) {
+    return whenContentIniLoadInOb(elementOrAmpDoc, opt_prerenderableOnly);
+  }
+  return whenContentIniLoadMeasure(
+    elementOrAmpDoc,
+    hostWin,
+    rect,
+    opt_prerenderableOnly
+  );
+}
+
+/**
+ * A legacy way using direct measurement.
+ *
+ * @param {!Element|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
+ * @param {!Window} hostWin
+ * @param {!./layout-rect.LayoutRectDef} rect
+ * @param {boolean=} opt_prerenderableOnly signifies if we are in prerender mode.
+ * @return {!Promise}
+ * @visibleForTesting
+ * TODO(#31915): remove, once launched.
+ */
+export function whenContentIniLoadMeasure(
+  elementOrAmpDoc,
+  hostWin,
+  rect,
+  opt_prerenderableOnly
 ) {
   const ampdoc = Services.ampdoc(elementOrAmpDoc);
   return getMeasuredResources(ampdoc, hostWin, (r) => {
@@ -47,7 +76,7 @@ export function whenContentIniLoad(
     if (
       !r.isDisplayed() ||
       (!r.overlaps(rect) && !r.isFixed()) ||
-      (opt_isInPrerender && !r.prerenderAllowed())
+      (opt_prerenderableOnly && !r.prerenderAllowed())
     ) {
       return false;
     }
@@ -63,6 +92,71 @@ export function whenContentIniLoad(
   });
 }
 
+/**
+ * A new way using direct measurement.
+ *
+ * @param {!Element|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
+ * @param {boolean=} opt_prerenderableOnly signifies if we are in prerender mode.
+ * @return {!Promise}
+ * @visibleForTesting
+ * TODO(#31915): remove visibility
+ */
+export function whenContentIniLoadInOb(elementOrAmpDoc, opt_prerenderableOnly) {
+  const ampdoc = Services.ampdoc(elementOrAmpDoc);
+  // First, wait for the `ready-scan` signal. Waiting for each element
+  // individually is too expensive and `ready-scan` will cover most of
+  // the initially parsed elements.
+  const whenReady = ampdoc.signals().whenSignal(READY_SCAN_SIGNAL);
+  return whenReady.then(() => {
+    // Filter elements.
+    const resources = Services.resourcesForDoc(ampdoc);
+    const elements = resources
+      .get()
+      .filter((r) => {
+        if (opt_prerenderableOnly && !r.prerenderAllowed()) {
+          return false;
+        }
+        return !EXCLUDE_INI_LOAD.includes(r.element.tagName);
+      })
+      .map((r) => r.element);
+
+    if (elements.length === 0) {
+      return Promise.resolve([]);
+    }
+
+    // Find intersecting elements.
+    return new Promise((resolve) => {
+      const {win} = ampdoc;
+      const io = new win.IntersectionObserver(
+        (entries) => {
+          io.disconnect();
+          const intersecting = [];
+          for (let i = 0; i < entries.length; i++) {
+            const {isIntersecting, target} = entries[i];
+            if (isIntersecting) {
+              intersecting.push(target);
+            }
+          }
+          resolve(intersecting);
+        },
+        {
+          // We generally always want `root: document` here. However, in
+          // many browsers this is still polyfilled and `{root: null}` is
+          // a lot faster.
+          root: isIframed(win) ? /** @type {?} */ (win.document) : null,
+          threshold: 0.01,
+        }
+      );
+      // Limit check to the first 100 elements.
+      for (let i = 0; i < Math.min(elements.length, 100); i++) {
+        io.observe(elements[i]);
+      }
+    }).then((elements) => {
+      return Promise.all(elements.map((element) => element.whenLoaded()));
+    });
+  });
+}
+
 /**
  * Returns a subset of resources which are (1) belong to the specified host
  * window, and (2) meet the filterFn given.
@@ -85,7 +179,7 @@ export function getMeasuredResources(ampdoc, hostWin, filterFn) {
       const resources = Services.resourcesForDoc(ampdoc);
       resources.get().forEach((r) => {
         if (!r.hasBeenMeasured() && r.hostWin == hostWin && !r.hasOwner()) {
-          measurePromiseArray.push(r.getPageLayoutBoxAsync());
+          measurePromiseArray.push(r.ensureMeasured());
         }
       });
       return Promise.all(measurePromiseArray);
diff --git a/src/input.js b/src/input.js
index 17c2185765e87..5c53d4fd604c1 100644
--- a/src/input.js
+++ b/src/input.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Observable} from './observable';
+import {Observable} from './core/data-structures/observable';
 import {Services} from './services';
 import {dev} from './log';
 import {listenOnce, listenOncePromise} from './event-helper';
@@ -84,15 +84,15 @@ export class Input {
     // mouse events.
     if (this.hasTouch_) {
       this.hasMouse_ = !this.hasTouch_;
-      this.boundOnMouseMove_ = /** @type {function(!Event)} */ (this.onMouseMove_.bind(
-        this
-      ));
+      this.boundOnMouseMove_ = /** @type {function(!Event)} */ (
+        this.onMouseMove_.bind(this)
+      );
       listenOnce(win.document, 'mousemove', this.boundOnMouseMove_);
     }
   }
 
   /**
-   * See https://github.com/ampproject/amphtml/blob/master/spec/amp-css-classes.md#input-mode-classes
+   * See https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-css-classes.md#input-mode-classes
    * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
    */
   setupInputModeClasses(ampdoc) {
diff --git a/src/json.js b/src/json.js
index 9f82a2587b6af..1d6ad0e333f36 100644
--- a/src/json.js
+++ b/src/json.js
@@ -1,5 +1,5 @@
 /**
- * Copyright 2015 The AMP HTML Authors. All Rights Reserved.
+ * Copyright 2021 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.
@@ -14,123 +14,8 @@
  * limitations under the License.
  */
 
-/**
- * @fileoverview This module declares JSON types as defined in the
- * {@link http://json.org/}.
- */
-
 import {childElementsByTag, isJsonScriptTag} from './dom';
-import {isObject} from './types';
-
-// NOTE Type are changed to {*} because of
-// https://github.com/google/closure-compiler/issues/1999
-
-/**
- * JSON scalar. It's either string, number or boolean.
- * @typedef {*} should be string|number|boolean|null
- */
-let JSONScalarDef;
-
-/**
- * JSON object. It's a map with string keys and JSON values.
- * @typedef {*} should be !Object<string, ?JSONValueDef>
- */
-let JSONObjectDef;
-
-/**
- * JSON array. It's an array with JSON values.
- * @typedef {*} should be !Array<?JSONValueDef>
- */
-let JSONArrayDef;
-
-/**
- * JSON value. It's either a scalar, an object or an array.
- * @typedef {*} should be !JSONScalarDef|!JSONObjectDef|!JSONArrayDef
- */
-let JSONValueDef;
-
-/**
- * Recreates objects with prototype-less copies.
- * @param {!JsonObject} obj
- * @return {!JsonObject}
- */
-export function recreateNonProtoObject(obj) {
-  const copy = Object.create(null);
-  for (const k in obj) {
-    if (!hasOwnProperty(obj, k)) {
-      continue;
-    }
-    const v = obj[k];
-    copy[k] = isObject(v) ? recreateNonProtoObject(v) : v;
-  }
-  return /** @type {!JsonObject} */ (copy);
-}
-
-/**
- * Returns a value from an object for a field-based expression. The expression
- * is a simple nested dot-notation of fields, such as `field1.field2`. If any
- * field in a chain does not exist or is not an object or array, the returned
- * value will be `undefined`.
- *
- * @param {!JsonObject} obj
- * @param {string} expr
- * @return {*}
- */
-export function getValueForExpr(obj, expr) {
-  // The `.` indicates "the object itself".
-  if (expr == '.') {
-    return obj;
-  }
-  // Otherwise, navigate via properties.
-  const parts = expr.split('.');
-  let value = obj;
-  for (let i = 0; i < parts.length; i++) {
-    const part = parts[i];
-    if (
-      part &&
-      value &&
-      value[part] !== undefined &&
-      hasOwnProperty(value, part)
-    ) {
-      value = value[part];
-      continue;
-    }
-    value = undefined;
-    break;
-  }
-  return value;
-}
-
-/**
- * Simple wrapper around JSON.parse that casts the return value
- * to JsonObject.
- * Create a new wrapper if an array return value is desired.
- * @param {*} json JSON string to parse
- * @return {?JsonObject} May be extend to parse arrays.
- */
-export function parseJson(json) {
-  return /** @type {?JsonObject} */ (JSON.parse(/** @type {string} */ (json)));
-}
-
-/**
- * Parses the given `json` string without throwing an exception if not valid.
- * Returns `undefined` if parsing fails.
- * Returns the `Object` corresponding to the JSON string when parsing succeeds.
- * @param {*} json JSON string to parse
- * @param {function(!Error)=} opt_onFailed Optional function that will be called
- *     with the error if parsing fails.
- * @return {?JsonObject} May be extend to parse arrays.
- */
-export function tryParseJson(json, opt_onFailed) {
-  try {
-    return parseJson(json);
-  } catch (e) {
-    if (opt_onFailed) {
-      opt_onFailed(e);
-    }
-    return null;
-  }
-}
+import {parseJson} from './core/types/object/json';
 
 /**
  * Helper method to get the json config from an element <script> tag
@@ -155,108 +40,3 @@ export function getChildJsonConfig(element) {
     throw new Error('Failed to parse <script> contents. Is it valid JSON?');
   }
 }
-
-/**
- * Deeply checks strict equality of items in nested arrays and objects.
- *
- * @param {JSONValueDef} a
- * @param {JSONValueDef} b
- * @param {number} depth The maximum depth. Must be finite.
- * @return {boolean}
- * @throws {Error} If depth argument is not finite.
- */
-export function deepEquals(a, b, depth = 5) {
-  if (!isFinite(depth) || depth < 0) {
-    throw new Error('Invalid depth: ' + depth);
-  }
-  if (a === b) {
-    return true;
-  }
-  /** @type {!Array<{a: JSONValueDef, b: JSONValueDef, depth: number}>} */
-  const queue = [{a, b, depth}];
-  while (queue.length > 0) {
-    const {a, b, depth} = queue.shift();
-    // Only check deep equality if depth > 0.
-    if (depth > 0) {
-      if (typeof a !== typeof b) {
-        return false;
-      } else if (Array.isArray(a) && Array.isArray(b)) {
-        if (a.length !== b.length) {
-          return false;
-        }
-        for (let i = 0; i < a.length; i++) {
-          queue.push({a: a[i], b: b[i], depth: depth - 1});
-        }
-        continue;
-      } else if (a && b && typeof a === 'object' && typeof b === 'object') {
-        const keysA = Object.keys(/** @type {!Object} */ (a));
-        const keysB = Object.keys(/** @type {!Object} */ (b));
-        if (keysA.length !== keysB.length) {
-          return false;
-        }
-        for (let i = 0; i < keysA.length; i++) {
-          const k = keysA[i];
-          queue.push({a: a[k], b: b[k], depth: depth - 1});
-        }
-        continue;
-      }
-    }
-    // If we get here, then depth == 0 or (a, b) are primitives.
-    if (a !== b) {
-      return false;
-    }
-  }
-  return true;
-}
-
-/**
- * @param {*} obj
- * @param {string} key
- * @return {boolean}
- */
-function hasOwnProperty(obj, key) {
-  if (obj == null || typeof obj != 'object') {
-    return false;
-  }
-  return Object.prototype.hasOwnProperty.call(
-    /** @type {!Object} */ (obj),
-    key
-  );
-}
-
-/**
- * This helper function handles configurations specified in a JSON format.
- *
- * It allows the configuration is to be written in plain JS (which has better
- * dev ergonomics like comments and trailing commas), and allows the
- * configuration to be transformed into an efficient JSON-parsed representation
- * in the dist build. See https://v8.dev/blog/cost-of-javascript-2019#json
- *
- * @param {!Object} obj
- * @return {!JsonObject}
- */
-export function jsonConfiguration(obj) {
-  return /** @type {!JsonObject} */ (obj);
-}
-
-/**
- * This converts an Object into a suitable type to be used in `includeJsonLiteral`.
- * This doesn't actually do any conversion, it only changes the closure type.
- *
- * @param {!Object|!Array|string|number|boolean|null} value
- * @return {!InternalJsonLiteralTypeDef}
- */
-export function jsonLiteral(value) {
-  return /** @type {!InternalJsonLiteralTypeDef} */ (value);
-}
-
-/**
- * Allows inclusion of a variable (that's wrapped in a jsonLiteral
- * call) to be included inside a jsonConfiguration.
- *
- * @param {!InternalJsonLiteralTypeDef} value
- * @return {*}
- */
-export function includeJsonLiteral(value) {
-  return value;
-}
diff --git a/src/layout-delay-meter.js b/src/layout-delay-meter.js
deleted file mode 100644
index 718b4c1356468..0000000000000
--- a/src/layout-delay-meter.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {Services} from './services';
-import {TickLabel} from './enums';
-
-const LABEL_MAP = {
-  0: TickLabel.CONTENT_LAYOUT_DELAY,
-  2: TickLabel.ADS_LAYOUT_DELAY,
-};
-
-/**
- * Measures the time latency between "first time in viewport" and
- * "start to layout" of an element.
- */
-export class LayoutDelayMeter {
-  /**
-   * @param {!Window} win
-   * @param {number} priority
-   */
-  constructor(win, priority) {
-    /** @private {!Window} */
-    this.win_ = win;
-    /** @private {?./service/performance-impl.Performance} */
-    this.performance_ = Services.performanceForOrNull(win);
-    /** @private {?number} */
-    this.firstInViewportTime_ = null;
-    /** @private {?number} */
-    this.firstLayoutTime_ = null;
-    /** @private {boolean} */
-    this.done_ = false;
-    /** @private {?TickLabel} */
-    this.label_ = LABEL_MAP[priority];
-  }
-
-  /**
-   *
-   */
-  enterViewport() {
-    if (!this.label_ || this.firstInViewportTime_) {
-      return;
-    }
-    this.firstInViewportTime_ = this.win_.Date.now();
-    this.tryMeasureDelay_();
-  }
-
-  /**
-   * starts layout
-   */
-  startLayout() {
-    if (!this.label_ || this.firstLayoutTime_) {
-      return;
-    }
-    this.firstLayoutTime_ = this.win_.Date.now();
-    this.tryMeasureDelay_();
-  }
-
-  /**
-   * Tries to measure delay
-   */
-  tryMeasureDelay_() {
-    if (!this.performance_ || !this.performance_.isPerformanceTrackingOn()) {
-      return;
-    }
-    if (this.done_) {
-      // Already measured.
-      return;
-    }
-    if (!this.firstInViewportTime_ || !this.firstLayoutTime_) {
-      // Not ready yet.
-      return;
-    }
-    const delay = this.win_.Math.max(
-      this.firstLayoutTime_ - this.firstInViewportTime_,
-      0
-    );
-    if (this.label_) {
-      this.performance_.tickDelta(this.label_, delay);
-    }
-    this.performance_.throttledFlush();
-    this.done_ = true;
-  }
-}
diff --git a/src/layout.js b/src/layout.js
index aee3985b1eceb..073f3e38be656 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -21,9 +21,12 @@
 
 import {dev, devAssert, userAssert} from './log';
 import {htmlFor} from './static-template';
-import {isFiniteNumber} from './types';
+import {isExperimentOn} from './experiments';
+import {isFiniteNumber} from './core/types';
 import {setStyle, setStyles, toggle} from './style';
-import {startsWith} from './string';
+import {toWin} from './types';
+
+import {transparentPng} from './utils/img';
 
 /**
  * @enum {string}
@@ -105,6 +108,7 @@ export const LOADING_ELEMENTS_ = {
   'AMP-LIST': true,
   'AMP-PINTEREST': true,
   'AMP-PLAYBUZZ': true,
+  'AMP-RENDER': true,
   'AMP-TWITTER': true,
 };
 /**
@@ -113,7 +117,14 @@ export const LOADING_ELEMENTS_ = {
  * reasons, so they are listed individually.
  * @private @const {!RegExp}
  */
-const videoPlayerTagNameRe = /^amp\-(video|.+player)|AMP-BRIGHTCOVE|AMP-DAILYMOTION|AMP-YOUTUBE|AMP-VIMEO|AMP-IMA-VIDEO/i;
+const videoPlayerTagNameRe =
+  /^amp\-(video|.+player)|AMP-BRIGHTCOVE|AMP-DAILYMOTION|AMP-YOUTUBE|AMP-VIMEO|AMP-IMA-VIDEO/i;
+
+/**
+ * Whether aspect-ratio CSS can be used to implement responsive layouts.
+ * @type {?boolean}
+ */
+let aspectRatioCssCache = null;
 
 /**
  * @param {string} s
@@ -170,7 +181,7 @@ export function isLayoutSizeFixed(layout) {
  */
 export function isInternalElement(tag) {
   const tagName = typeof tag == 'string' ? tag : tag.tagName;
-  return tagName && startsWith(tagName.toLowerCase(), 'i-');
+  return tagName && tagName.toLowerCase().startsWith('i-');
 }
 
 /**
@@ -333,18 +344,19 @@ export function isIframeVideoPlayerComponent(tagName) {
  * implement SSR. For more information on SSR see bit.ly/amp-ssr.
  *
  * @param {!Element} element
+ * @param {boolean} fixIeIntrinsic
  * @return {!Layout}
  */
-export function applyStaticLayout(element) {
+export function applyStaticLayout(element, fixIeIntrinsic = false) {
   // Check if the layout has already been done by server-side rendering or
   // client-side rendering and the element was cloned. The document may be
   // visible to the user if the boilerplate was removed so please take care in
   // making changes here.
   const completedLayoutAttr = element.getAttribute('i-amphtml-layout');
   if (completedLayoutAttr) {
-    const layout = /** @type {!Layout} */ (devAssert(
-      parseLayout(completedLayoutAttr)
-    ));
+    const layout = /** @type {!Layout} */ (
+      devAssert(parseLayout(completedLayoutAttr))
+    );
     if (
       (layout == Layout.RESPONSIVE || layout == Layout.INTRINSIC) &&
       element.firstElementChild
@@ -507,14 +519,22 @@ export function applyStaticLayout(element) {
   } else if (layout == Layout.FIXED_HEIGHT) {
     setStyle(element, 'height', dev().assertString(height));
   } else if (layout == Layout.RESPONSIVE) {
-    const sizer = element.ownerDocument.createElement('i-amphtml-sizer');
-    sizer.setAttribute('slot', 'i-amphtml-svc');
-    setStyles(sizer, {
-      paddingTop:
-        (getLengthNumeral(height) / getLengthNumeral(width)) * 100 + '%',
-    });
-    element.insertBefore(sizer, element.firstChild);
-    element.sizerElement = sizer;
+    if (shouldUseAspectRatioCss(toWin(element.ownerDocument.defaultView))) {
+      setStyle(
+        element,
+        'aspect-ratio',
+        `${getLengthNumeral(width)}/${getLengthNumeral(height)}`
+      );
+    } else {
+      const sizer = element.ownerDocument.createElement('i-amphtml-sizer');
+      sizer.setAttribute('slot', 'i-amphtml-svc');
+      setStyles(sizer, {
+        paddingTop:
+          (getLengthNumeral(height) / getLengthNumeral(width)) * 100 + '%',
+      });
+      element.insertBefore(sizer, element.firstChild);
+      element.sizerElement = sizer;
+    }
   } else if (layout == Layout.INTRINSIC) {
     // Intrinsic uses an svg inside the sizer element rather than the padding
     // trick Note a naked svg won't work becasue other thing expect the
@@ -527,7 +547,13 @@ export function applyStaticLayout(element) {
     const intrinsicSizer = sizer.firstElementChild;
     intrinsicSizer.setAttribute(
       'src',
-      `data:image/svg+xml;charset=utf-8,<svg height="${height}" width="${width}" xmlns="http://www.w3.org/2000/svg" version="1.1"/>`
+      !IS_ESM && fixIeIntrinsic && element.ownerDocument
+        ? transparentPng(
+            element.ownerDocument,
+            dev().assertNumber(getLengthNumeral(width)),
+            dev().assertNumber(getLengthNumeral(height))
+          )
+        : `data:image/svg+xml;charset=utf-8,<svg height="${height}" width="${width}" xmlns="http://www.w3.org/2000/svg" version="1.1"/>`
     );
     element.insertBefore(sizer, element.firstChild);
     element.sizerElement = sizer;
@@ -558,3 +584,26 @@ export function applyStaticLayout(element) {
   element.setAttribute('i-amphtml-layout', layout);
   return layout;
 }
+
+/**
+ * Whether aspect-ratio CSS can be used to implement responsive layouts.
+ *
+ * @param {!Window} win
+ * @return {boolean}
+ */
+function shouldUseAspectRatioCss(win) {
+  if (aspectRatioCssCache == null) {
+    aspectRatioCssCache =
+      (isExperimentOn(win, 'layout-aspect-ratio-css') &&
+        win.CSS &&
+        win.CSS.supports &&
+        win.CSS.supports('aspect-ratio: 1/1')) ||
+      false;
+  }
+  return aspectRatioCssCache;
+}
+
+/** @visibleForTesting */
+export function resetShouldUseAspectRatioCssForTesting() {
+  aspectRatioCssCache = null;
+}
diff --git a/src/loader.js b/src/loader.js
deleted file mode 100644
index 5512eed62a90c..0000000000000
--- a/src/loader.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {Services} from './services';
-
-/**
- * Gets a Promise for the LoaderService, initiating a request to download the
- * code.
- * @param {!./service/ampdoc-impl.AmpDoc} ampDoc
- * @param {!Element} element
- * @return {!Promise<!../extensions/amp-loader/0.1/amp-loader.LoaderService>}
- */
-function getLoaderServicePromise(ampDoc, element) {
-  return Services.extensionsFor(ampDoc.win)
-    .installExtensionForDoc(ampDoc, 'amp-loader')
-    .then(() => Services.loaderServiceForDoc(element));
-}
-
-/**
- * Creates a default "loading indicator" element based on the new design.
- *
- * Please see https://github.com/ampproject/amphtml/issues/20237 for details,
- * screenshots and various states of the new loader design.
- * @param {!./service/ampdoc-impl.AmpDoc} ampDoc
- * @param {!AmpElement} element
- * @param {number} elementWidth
- * @param {number} elementHeight
- * @param {number=} startTime
- * @return {!Element} The loader root element.
- */
-export function createLoaderElement(
-  ampDoc,
-  element,
-  elementWidth,
-  elementHeight,
-  startTime = ampDoc.win.Date.now()
-) {
-  // We create the loader root element up front, since it is needed
-  // synchronously. We create the actual element with animations when the
-  // service is ready.
-  const loaderRoot = element.ownerDocument.createElement('div');
-
-  getLoaderServicePromise(ampDoc, element).then((loaderService) => {
-    const endTime = ampDoc.win.Date.now();
-    const initDelay = endTime - startTime;
-    loaderService.initializeLoader(
-      element,
-      loaderRoot,
-      initDelay,
-      elementWidth,
-      elementHeight
-    );
-  });
-
-  return loaderRoot;
-}
diff --git a/src/localized-strings.js b/src/localized-strings.js
index 476bc391fb970..73d9dea5ce9d3 100644
--- a/src/localized-strings.js
+++ b/src/localized-strings.js
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {parseJson} from './json';
+import {parseJson} from './core/types/object/json';
 
 /**
  * A unique identifier for each localized string.  Localized string IDs should:
@@ -24,23 +24,23 @@ import {parseJson} from './json';
  *   - NOT be reused; to deprecate an ID, comment it out and prefix its key with
  *     the string "DEPRECATED_"
  *
- * Next ID: 82
+ * Next ID: 98
  *
  * @const @enum {string}
  */
 export const LocalizedStringId = {
   // amp-story
+  AMP_STORY_ACTIVATE_BUTTON_TEXT: '83',
   AMP_STORY_AUDIO_MUTE_BUTTON_LABEL: '66',
   AMP_STORY_AUDIO_MUTE_BUTTON_TEXT: '31',
   AMP_STORY_AUDIO_UNMUTE_BUTTON_LABEL: '67',
   AMP_STORY_AUDIO_UNMUTE_NO_SOUND_TEXT: '33',
   AMP_STORY_AUDIO_UNMUTE_SOUND_TEXT: '32',
-  AMP_STORY_BOOKEND_MORE_TO_READ_LABEL: '30',
-  AMP_STORY_BOOKEND_PRIVACY_SETTINGS_TITLE: '29',
-  AMP_STORY_BOOKEND_PRIVACY_SETTINGS_BUTTON_LABEL: '28',
+  AMP_STORY_CLOSE_BUTTON_LABEL: '87',
   AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL: '22',
   AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL: '23',
   AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL: '27',
+  AMP_STORY_DISCOVERY_DIALOG_TEXT: '96',
   AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL: '25',
   AMP_STORY_DOMAIN_DIALOG_HEADING_LINK: '26',
   AMP_STORY_EDUCATION_NAVIGATION_SWIPE_PROGRESS: '78',
@@ -54,13 +54,17 @@ export const LocalizedStringId = {
   AMP_STORY_HINT_UI_NEXT_LABEL: '2',
   AMP_STORY_HINT_UI_PREVIOUS_LABEL: '3',
   AMP_STORY_INFO_BUTTON_LABEL: '68',
+  AMP_STORY_NEXT_PAGE: '91',
+  AMP_STORY_NEXT_STORY: '90',
+  AMP_STORY_OPEN_OUTLINK_TEXT: '97',
   AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL: '35',
+  AMP_STORY_PAGINATION_BUTTON_PREVIOUS_PAGE_LABEL: '82',
   AMP_STORY_PAGE_ERROR_VIDEO: '65',
   AMP_STORY_PAGE_PLAY_VIDEO: '34',
-  AMP_STORY_QUIZ_ANSWER_CHOICE_A: '71',
-  AMP_STORY_QUIZ_ANSWER_CHOICE_B: '72',
-  AMP_STORY_QUIZ_ANSWER_CHOICE_C: '73',
-  AMP_STORY_QUIZ_ANSWER_CHOICE_D: '74',
+  AMP_STORY_PAUSE_BUTTON_LABEL: '85',
+  AMP_STORY_PLAY_BUTTON_LABEL: '86',
+  AMP_STORY_PREVIOUS_PAGE: '93',
+  AMP_STORY_REPLAY: '92',
   AMP_STORY_SHARE_BUTTON_LABEL: '69',
   AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT: '4',
   AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT: '5',
@@ -78,6 +82,7 @@ export const LocalizedStringId = {
   AMP_STORY_SHARING_PROVIDER_NAME_TWITTER: '15',
   AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP: '16',
   AMP_STORY_SIDEBAR_BUTTON_LABEL: '70',
+  AMP_STORY_SKIP_TO_NEXT_BUTTON_LABEL: '88',
   AMP_STORY_TOOLTIP_EXPAND_TWEET: '36',
   AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT: '37',
   AMP_STORY_WARNING_DESKTOP_SIZE_TEXT: '18',
@@ -111,12 +116,18 @@ export const LocalizedStringId = {
   AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH: '60',
   AMP_STORY_AUTO_ADS_BUTTON_LABEL_WATCH_EPISODE: '61',
 
-  // TODO(#14357): Comment these out once amp-story:0.1 no longer depends on
-  // them.
-  DEPRECATED_AMP_STORY_EXPERIMENT_ENABLE_BUTTON_LABEL: '0',
-  DEPRECATED_AMP_STORY_EXPERIMENT_ENABLED_TEXT: '1',
-  DEPRECATED_AMP_STORY_CONSENT_DISMISS_DIALOG_BUTTON_LABEL: '24',
-  DEPRECATED_AMP_STORY_SYSTEM_LAYER_SHARE_WIDGET_LABEL: '17',
+  // amp-story-interactive
+  AMP_STORY_INTERACTIVE_DISCLAIMER_NOTE: '89',
+  AMP_STORY_INTERACTIVE_RESULTS_SCORE: '84',
+  AMP_STORY_INTERACTIVE_QUIZ_ANSWER_CHOICE_A: '71',
+  AMP_STORY_INTERACTIVE_QUIZ_ANSWER_CHOICE_B: '72',
+  AMP_STORY_INTERACTIVE_QUIZ_ANSWER_CHOICE_C: '73',
+  AMP_STORY_INTERACTIVE_QUIZ_ANSWER_CHOICE_D: '74',
+
+  // DEPRECATED_AMP_STORY_EXPERIMENT_ENABLE_BUTTON_LABEL: '0',
+  // DEPRECATED_AMP_STORY_EXPERIMENT_ENABLED_TEXT: '1',
+  // DEPRECATED_AMP_STORY_CONSENT_DISMISS_DIALOG_BUTTON_LABEL: '24',
+  // DEPRECATED_AMP_STORY_SYSTEM_LAYER_SHARE_WIDGET_LABEL: '17',
 };
 
 /**
@@ -138,9 +149,11 @@ export let LocalizedStringBundleDef;
  * @return {!LocalizedStringBundleDef}
  */
 function cloneLocalizedStringBundle(localizedStringBundle) {
-  return /** @type {!LocalizedStringBundleDef} */ (parseJson(
-    JSON.stringify(/** @type {!JsonObject} */ (localizedStringBundle))
-  ));
+  return /** @type {!LocalizedStringBundleDef} */ (
+    parseJson(
+      JSON.stringify(/** @type {!JsonObject} */ (localizedStringBundle))
+    )
+  );
 }
 
 /**
@@ -159,7 +172,9 @@ export function createPseudoLocale(localizedStringBundle, localizationFn) {
   );
 
   Object.keys(pseudoLocaleStringBundle).forEach((localizedStringIdAsStr) => {
-    const localizedStringId = /** @type {!LocalizedStringId} */ (localizedStringIdAsStr);
+    const localizedStringId = /** @type {!LocalizedStringId} */ (
+      localizedStringIdAsStr
+    );
     pseudoLocaleStringBundle[localizedStringId].string = localizationFn(
       localizedStringBundle[localizedStringId].string
     );
diff --git a/src/log.js b/src/log.js
index 98b87930ef9fa..46e8d5ce3021c 100644
--- a/src/log.js
+++ b/src/log.js
@@ -14,24 +14,25 @@
  * limitations under the License.
  */
 
+import * as assertions from './core/assert/base';
+import {
+  USER_ERROR_SENTINEL,
+  elementStringOrPassThru,
+  isUserErrorMessage,
+  stripUserError,
+} from './core/error/message-helpers';
+import {createErrorVargs, duplicateErrorIfNecessary} from './core/error';
 import {getMode} from './mode';
 import {internalRuntimeVersion} from './internal-version';
-import {isArray, isEnumValue} from './types';
-import {once} from './utils/function';
+import {isArray} from './core/types';
+import {once} from './core/types/function';
 import {urls} from './config';
 
 const noop = () => {};
 
-/**
- * Triple zero width space.
- *
- * This is added to user error messages, so that we can later identify
- * them, when the only thing that we have is the message. This is the
- * case in many browsers when the global exception handler is invoked.
- *
- * @const {string}
- */
-export const USER_ERROR_SENTINEL = '\u200B\u200B\u200B';
+// These are exported here despite being defined in core to avoid updating
+// imports for now.
+export {USER_ERROR_SENTINEL, isUserErrorMessage, stripUserError};
 
 /**
  * Four zero width space.
@@ -40,22 +41,6 @@ export const USER_ERROR_SENTINEL = '\u200B\u200B\u200B';
  */
 export const USER_ERROR_EMBED_SENTINEL = '\u200B\u200B\u200B\u200B';
 
-/**
- * @param {string} message
- * @return {boolean} Whether this message was a user error.
- */
-export function isUserErrorMessage(message) {
-  return message.indexOf(USER_ERROR_SENTINEL) >= 0;
-}
-
-/**
- * @param {string} message
- * @return {string} The new message without USER_ERROR_SENTINEL
- */
-export function stripUserError(message) {
-  return message.replace(USER_ERROR_SENTINEL, '');
-}
-
 /**
  * @param {string} message
  * @return {boolean} Whether this message was a a user error from an iframe embed.
@@ -76,9 +61,9 @@ export const LogLevel = {
 };
 
 /**
- * Sets reportError function. Called from error.js to break cyclic
+ * Sets reportError function. Called from error-reporting.js to break cyclic
  * dependency.
- * @param {function(*, !Element=)|undefined} fn
+ * @param {function(this:Window, Error, (?Element)=): ?|undefined} fn
  */
 export function setReportError(fn) {
   self.__AMP_REPORT_ERROR = fn;
@@ -130,7 +115,7 @@ const externalMessagesSimpleTableUrl = () =>
  * @return {string}
  */
 const messageArgToEncodedComponent = (arg) =>
-  encodeURIComponent(String(elementStringOrPassthru(arg)));
+  encodeURIComponent(String(elementStringOrPassThru(arg)));
 
 /**
  * Logging class. Use of sentinel string instead of a boolean to check user/dev
@@ -184,6 +169,15 @@ export class Log {
           }
         });
     });
+
+    // This bound assertion function is capable of handling the format used when
+    // error/assertion messages are extracted. This logic hasn't yet been
+    // migrated to an AMP-independent form for use in core. This binding allows
+    // Log assertion helpers to maintain message-extraction capabilities until
+    // that logic can be moved to core.
+    this.boundAssertFn_ = /** @type {!assertions.AssertionFunctionDef} */ (
+      this.assert.bind(this)
+    );
   }
 
   /**
@@ -233,30 +227,33 @@ export class Log {
 
   /**
    * @param {string} tag
-   * @param {string} level
+   * @param {!LogLevel} level
    * @param {!Array} messages
+   * @return {boolean} true if a message was logged
    */
   msg_(tag, level, messages) {
-    if (this.getLevel_() != LogLevel.OFF) {
-      let fn = this.win.console.log;
-      if (level == 'ERROR') {
-        fn = this.win.console.error || fn;
-      } else if (level == 'INFO') {
-        fn = this.win.console.info || fn;
-      } else if (level == 'WARN') {
-        fn = this.win.console.warn || fn;
-      }
-      const args = this.maybeExpandMessageArgs_(messages);
-      // Prefix console message with "[tag]".
-      const prefix = `[${tag}]`;
-      if (typeof args[0] === 'string') {
-        // Prepend string to avoid breaking string substitutions e.g. %s.
-        args[0] = prefix + ' ' + args[0];
-      } else {
-        args.unshift(prefix);
-      }
-      fn.apply(this.win.console, args);
+    if (this.getLevel_() < level) {
+      return false;
+    }
+    let fn = this.win.console.log;
+    if (level == LogLevel.ERROR) {
+      fn = this.win.console.error || fn;
+    } else if (level == LogLevel.INFO) {
+      fn = this.win.console.info || fn;
+    } else if (level == LogLevel.WARN) {
+      fn = this.win.console.warn || fn;
     }
+    const args = this.maybeExpandMessageArgs_(messages);
+    // Prefix console message with "[tag]".
+    const prefix = `[${tag}]`;
+    if (typeof args[0] === 'string') {
+      // Prepend string to avoid breaking string substitutions e.g. %s.
+      args[0] = prefix + ' ' + args[0];
+    } else {
+      args.unshift(prefix);
+    }
+    fn.apply(this.win.console, args);
+    return true;
   }
 
   /**
@@ -270,54 +267,41 @@ export class Log {
   /**
    * Reports a fine-grained message.
    * @param {string} tag
-   * @param {...*} var_args
+   * @param {...*} args
    */
-  fine(tag, var_args) {
-    if (this.getLevel_() >= LogLevel.FINE) {
-      this.msg_(tag, 'FINE', Array.prototype.slice.call(arguments, 1));
-    }
+  fine(tag, ...args) {
+    this.msg_(tag, LogLevel.FINE, args);
   }
 
   /**
    * Reports a informational message.
    * @param {string} tag
-   * @param {...*} var_args
+   * @param {...*} args
    */
-  info(tag, var_args) {
-    if (this.getLevel_() >= LogLevel.INFO) {
-      this.msg_(tag, 'INFO', Array.prototype.slice.call(arguments, 1));
-    }
+  info(tag, ...args) {
+    this.msg_(tag, LogLevel.INFO, args);
   }
 
   /**
    * Reports a warning message.
    * @param {string} tag
-   * @param {...*} var_args
+   * @param {...*} args
    */
-  warn(tag, var_args) {
-    if (this.getLevel_() >= LogLevel.WARN) {
-      this.msg_(tag, 'WARN', Array.prototype.slice.call(arguments, 1));
-    }
+  warn(tag, ...args) {
+    this.msg_(tag, LogLevel.WARN, args);
   }
 
   /**
    * Reports an error message. If the logging is disabled, the error is rethrown
    * asynchronously.
    * @param {string} tag
-   * @param {...*} var_args
+   * @param {...*} args
    * @return {!Error|undefined}
    * @private
    */
-  error_(tag, var_args) {
-    if (this.getLevel_() >= LogLevel.ERROR) {
-      this.msg_(tag, 'ERROR', Array.prototype.slice.call(arguments, 1));
-    } else {
-      const error = createErrorVargs.apply(
-        null,
-        Array.prototype.slice.call(arguments, 1)
-      );
-      this.prepareError_(error);
-      return error;
+  error_(tag, ...args) {
+    if (!this.msg_(tag, LogLevel.ERROR, args)) {
+      return this.createError.apply(this, args);
     }
   }
 
@@ -329,6 +313,7 @@ export class Log {
   error(tag, var_args) {
     const error = this.error_.apply(this, arguments);
     if (error) {
+      // TODO(rcebulko): Determine if/how this Error#name property is used.
       error.name = tag || error.name;
       // __AMP_REPORT_ERROR is installed globally per window in the entry point.
       self.__AMP_REPORT_ERROR(error);
@@ -395,7 +380,6 @@ export class Log {
    * @closurePrimitive {asserts.truthy}
    */
   assert(shouldBeTrueish, opt_message, var_args) {
-    let firstElement;
     if (isArray(opt_message)) {
       return this.assert.apply(
         this,
@@ -404,34 +388,11 @@ export class Log {
         )
       );
     }
-    if (!shouldBeTrueish) {
-      const message = opt_message || 'Assertion failed';
-      const splitMessage = message.split('%s');
-      const first = splitMessage.shift();
-      let formatted = first;
-      const messageArray = [];
-      let i = 2;
-      pushIfNonEmpty(messageArray, first);
-      while (splitMessage.length > 0) {
-        const nextConstant = splitMessage.shift();
-        const val = arguments[i++];
-        if (val && val.tagName) {
-          firstElement = val;
-        }
-        messageArray.push(val);
-        pushIfNonEmpty(messageArray, nextConstant.trim());
-        formatted += stringOrElementString(val) + nextConstant;
-      }
-      const e = new Error(formatted);
-      e.fromAssert = true;
-      e.associatedElement = firstElement;
-      e.messageArray = messageArray;
-      this.prepareError_(e);
-      // __AMP_REPORT_ERROR is installed globally per window in the entry point.
-      self.__AMP_REPORT_ERROR(e);
-      throw e;
-    }
-    return shouldBeTrueish;
+
+    return assertions.assert.apply(
+      null,
+      [this.suffix_].concat(Array.prototype.slice.call(arguments))
+    );
   }
 
   /**
@@ -442,18 +403,14 @@ export class Log {
    * @param {*} shouldBeElement
    * @param {!Array|string=} opt_message The assertion message
    * @return {!Element} The value of shouldBeTrueish.
-   * @template T
    * @closurePrimitive {asserts.matchesReturn}
    */
   assertElement(shouldBeElement, opt_message) {
-    const shouldBeTrueish = shouldBeElement && shouldBeElement.nodeType == 1;
-    this.assertType_(
+    return assertions.assertElement(
+      this.boundAssertFn_,
       shouldBeElement,
-      shouldBeTrueish,
-      'Element expected',
       opt_message
     );
-    return /** @type {!Element} */ (shouldBeElement);
   }
 
   /**
@@ -468,13 +425,11 @@ export class Log {
    * @closurePrimitive {asserts.matchesReturn}
    */
   assertString(shouldBeString, opt_message) {
-    this.assertType_(
+    return assertions.assertString(
+      this.boundAssertFn_,
       shouldBeString,
-      typeof shouldBeString == 'string',
-      'String expected',
       opt_message
     );
-    return /** @type {string} */ (shouldBeString);
   }
 
   /**
@@ -490,13 +445,11 @@ export class Log {
    * @closurePrimitive {asserts.matchesReturn}
    */
   assertNumber(shouldBeNumber, opt_message) {
-    this.assertType_(
+    return assertions.assertNumber(
+      this.boundAssertFn_,
       shouldBeNumber,
-      typeof shouldBeNumber == 'number',
-      'Number expected',
       opt_message
     );
-    return /** @type {number} */ (shouldBeNumber);
   }
 
   /**
@@ -509,13 +462,11 @@ export class Log {
    * @closurePrimitive {asserts.matchesReturn}
    */
   assertArray(shouldBeArray, opt_message) {
-    this.assertType_(
+    return assertions.assertArray(
+      this.boundAssertFn_,
       shouldBeArray,
-      isArray(shouldBeArray),
-      'Array expected',
       opt_message
     );
-    return /** @type {!Array} */ (shouldBeArray);
   }
 
   /**
@@ -529,13 +480,11 @@ export class Log {
    * @closurePrimitive {asserts.matchesReturn}
    */
   assertBoolean(shouldBeBoolean, opt_message) {
-    this.assertType_(
+    return assertions.assertBoolean(
+      this.boundAssertFn_,
       shouldBeBoolean,
-      !!shouldBeBoolean === shouldBeBoolean,
-      'Boolean expected',
       opt_message
     );
-    return /** @type {boolean} */ (shouldBeBoolean);
   }
 
   /**
@@ -550,10 +499,12 @@ export class Log {
    * @closurePrimitive {asserts.matchesReturn}
    */
   assertEnumValue(enumObj, s, opt_enumName) {
-    if (isEnumValue(enumObj, s)) {
-      return s;
-    }
-    this.assert(false, 'Unknown %s value: "%s"', opt_enumName || 'enum', s);
+    return assertions.assertEnumValue(
+      this.boundAssertFn_,
+      enumObj,
+      s,
+      opt_enumName
+    );
   }
 
   /**
@@ -562,6 +513,7 @@ export class Log {
    */
   prepareError_(error) {
     error = duplicateErrorIfNecessary(error);
+
     if (this.suffix_) {
       if (!error.message) {
         error.message = this.suffix_;
@@ -612,120 +564,6 @@ export class Log {
     }
     return [`More info at ${externalMessageUrl(id, parts)}`];
   }
-
-  /**
-   * Asserts types, backbone of `assertNumber`, `assertString`, etc.
-   *
-   * It understands array-based "id"-contracted messages.
-   *
-   * Otherwise creates a sprintf syntax string containing the optional message or the
-   * default. An interpolation token is added at the end to include the `subject`.
-   * @param {*} subject
-   * @param {*} assertion
-   * @param {string} defaultMessage
-   * @param {!Array|string=} opt_message
-   * @private
-   */
-  assertType_(subject, assertion, defaultMessage, opt_message) {
-    if (isArray(opt_message)) {
-      this.assert(assertion, opt_message.concat(subject));
-    } else {
-      this.assert(assertion, `${opt_message || defaultMessage}: %s`, subject);
-    }
-  }
-}
-
-/**
- * @param {string|!Element} val
- * @return {string}
- */
-const stringOrElementString = (val) =>
-  /** @type {string} */ (elementStringOrPassthru(val));
-
-/**
- * @param {*} val
- * @return {*}
- */
-function elementStringOrPassthru(val) {
-  // Do check equivalent to `val instanceof Element` without cross-window bug
-  if (val && val.nodeType == 1) {
-    return val.tagName.toLowerCase() + (val.id ? '#' + val.id : '');
-  }
-  return val;
-}
-
-/**
- * @param {!Array} array
- * @param {*} val
- */
-function pushIfNonEmpty(array, val) {
-  if (val != '') {
-    array.push(val);
-  }
-}
-
-/**
- * Some exceptions (DOMException, namely) have read-only message.
- * @param {!Error} error
- * @return {!Error};
- */
-export function duplicateErrorIfNecessary(error) {
-  const messageProperty = Object.getOwnPropertyDescriptor(error, 'message');
-  if (messageProperty && messageProperty.writable) {
-    return error;
-  }
-
-  const {message, stack} = error;
-  const e = new Error(message);
-  // Copy all the extraneous things we attach.
-  for (const prop in error) {
-    e[prop] = error[prop];
-  }
-  // Ensure these are copied.
-  e.stack = stack;
-  return e;
-}
-
-/**
- * @param {...*} var_args
- * @return {!Error}
- * @visibleForTesting
- */
-export function createErrorVargs(var_args) {
-  let error = null;
-  let message = '';
-  for (let i = 0; i < arguments.length; i++) {
-    const arg = arguments[i];
-    if (arg instanceof Error && !error) {
-      error = duplicateErrorIfNecessary(arg);
-    } else {
-      if (message) {
-        message += ' ';
-      }
-      message += arg;
-    }
-  }
-
-  if (!error) {
-    error = new Error(message);
-  } else if (message) {
-    error.message = message + ': ' + error.message;
-  }
-  return error;
-}
-
-/**
- * Rethrows the error without terminating the current context. This preserves
- * whether the original error designation is a user error or a dev error.
- * @param {...*} var_args
- */
-export function rethrowAsync(var_args) {
-  const error = createErrorVargs.apply(null, arguments);
-  setTimeout(() => {
-    // reportError is installed globally per window in the entry point.
-    self.__AMP_REPORT_ERROR(error);
-    throw error;
-  });
 }
 
 /**
@@ -907,6 +745,15 @@ export function devAssert(
   if (getMode().minified) {
     return shouldBeTrueish;
   }
+  if (self.__AMP_ASSERTION_CHECK) {
+    // This will never execute regardless, but will be included on unminified
+    // builds. It will be DCE'd away from minified builds, and so can be used to
+    // validate that Babel is properly removing dev assertions in minified
+    // builds.
+    console /*OK*/
+      .log('__devAssert_sentinel__');
+  }
+
   return dev()./*Orig call*/ assert(
     shouldBeTrueish,
     opt_message,
diff --git a/src/mediasession-helper.js b/src/mediasession-helper.js
index a10df4387b993..420754ac3964f 100644
--- a/src/mediasession-helper.js
+++ b/src/mediasession-helper.js
@@ -15,8 +15,8 @@
  */
 import {Services} from './services';
 import {devAssert, userAssert} from './log';
-import {isArray, isObject} from './types';
-import {tryParseJson} from './json';
+import {isArray, isObject} from './core/types';
+import {tryParseJson} from './core/types/object/json';
 
 /**
  * @typedef {{
@@ -38,27 +38,18 @@ export const EMPTY_METADATA = {
 
 /**
  * Updates the Media Session API's metadata
- * @param {!Element} element
  * @param {!Window} win
  * @param {!MetadataDef} metadata
  * @param {function()=} playHandler
  * @param {function()=} pauseHandler
  */
-export function setMediaSession(
-  element,
-  win,
-  metadata,
-  playHandler,
-  pauseHandler
-) {
+export function setMediaSession(win, metadata, playHandler, pauseHandler) {
   const {navigator} = win;
   if ('mediaSession' in navigator && win.MediaMetadata) {
     // Clear mediaSession (required to fix a bug when switching between two
     // videos)
     navigator.mediaSession.metadata = new win.MediaMetadata(EMPTY_METADATA);
 
-    // Add metadata
-    validateMetadata(element, metadata);
     navigator.mediaSession.metadata = new win.MediaMetadata(metadata);
 
     navigator.mediaSession.setActionHandler('play', playHandler);
@@ -140,9 +131,8 @@ export function parseFavicon(doc) {
 /**
  * @param {!Element} element
  * @param {!MetadataDef} metadata
- * @private
  */
-function validateMetadata(element, metadata) {
+export function validateMediaMetadata(element, metadata) {
   const urlService = Services.urlForDoc(element);
   // Ensure src of artwork has valid protocol
   if (metadata && metadata.artwork) {
diff --git a/src/modal.js b/src/modal.js
index c2dbcd581f1aa..90557969c657c 100644
--- a/src/modal.js
+++ b/src/modal.js
@@ -1,6 +1,7 @@
 import {devAssert} from './log';
 import {isConnectedNode, rootNodeFor} from './dom';
-import {toArray} from './types';
+import {isElement} from './core/types';
+import {toArray} from './core/types/array';
 
 /**
  * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
@@ -172,9 +173,7 @@ export function setModalAsOpen(element) {
   devAssert(isConnectedNode(element));
 
   const elements = getElementsToAriaHide(element);
-  const ancestry = getAncestors(element).filter(
-    (n) => n.nodeType == Node.ELEMENT_NODE
-  );
+  const ancestry = getAncestors(element).filter(isElement);
   const focusableElements = getPotentiallyFocusableElements(element);
   // Get the elements that are internally focusable, and have been made
   // non-focusable; we want to unhide these.
@@ -225,9 +224,9 @@ export function setModalAsOpen(element) {
 export function setModalAsClosed(element) {
   const {
     element: topModalElement,
-    hiddenElementInfos,
     focusableExternalElements,
     focusableInternalElements,
+    hiddenElementInfos,
   } = modalEntryStack.pop();
 
   devAssert(isConnectedNode(element));
diff --git a/src/mode-object.js b/src/mode-object.js
index ca37f93fc73b2..db5ea9beaf751 100644
--- a/src/mode-object.js
+++ b/src/mode-object.js
@@ -28,7 +28,6 @@ export function getModeObject(opt_win) {
     development: getMode(opt_win).development,
     esm: IS_ESM,
     minified: getMode(opt_win).minified,
-    lite: getMode(opt_win).lite,
     test: getMode(opt_win).test,
     log: getMode(opt_win).log,
     version: getMode(opt_win).version,
diff --git a/src/mode.js b/src/mode.js
index bb81385e740ba..c0f911b80e564 100644
--- a/src/mode.js
+++ b/src/mode.js
@@ -15,21 +15,21 @@
  */
 
 import {internalRuntimeVersion} from './internal-version';
-import {parseQueryString_} from './url-parse-query-string';
+import {parseQueryString} from './core/types/string/url';
 
 /**
  * @typedef {{
  *   localDev: boolean,
  *   development: boolean,
  *   minified: boolean,
- *   lite: boolean,
  *   test: boolean,
+ *   examiner: boolean,
  *   log: (string|undefined),
  *   version: string,
  *   rtvVersion: string,
  *   runtime: (null|string|undefined),
  *   a4aId: (null|string|undefined),
- *   esm: (boolean|undefined)
+ *   esm: (boolean|undefined),
  * }}
  */
 export let ModeDef;
@@ -65,49 +65,36 @@ function getMode_(win) {
 
   // Magic constants that are replaced by closure compiler.
   // IS_MINIFIED is always replaced with true when closure compiler is used
-  // while IS_DEV is only replaced when `gulp dist` is called without the
+  // while IS_FORTESTING is only replaced when `amp dist` is called without the
   // --fortesting flag.
-  const IS_DEV = true;
+  const IS_FORTESTING = true;
   const IS_MINIFIED = false;
 
   const runningTests =
-    IS_DEV && !!(AMP_CONFIG.test || win.__AMP_TEST || win.__karma__);
-  const isLocalDev = IS_DEV && (!!AMP_CONFIG.localDev || runningTests);
-  const hashQuery = parseQueryString_(
+    IS_FORTESTING && !!(AMP_CONFIG.test || win.__AMP_TEST || win['__karma__']);
+  const isLocalDev = IS_FORTESTING && (!!AMP_CONFIG.localDev || runningTests);
+  const hashQuery = parseQueryString(
     // location.originalHash is set by the viewer when it removes the fragment
     // from the URL.
-    win.location.originalHash || win.location.hash
+    win.location['originalHash'] || win.location.hash
   );
 
-  const searchQuery = parseQueryString_(win.location.search);
-
   if (!rtvVersion) {
     rtvVersion = getRtvVersion(win);
   }
 
   // The `minified`, `test` and `localDev` properties are replaced
-  // as boolean literals when we run `gulp dist` without the `--fortesting`
+  // as boolean literals when we run `amp dist` without the `--fortesting`
   // flags. This improved DCE on the production file we deploy as the code
   // paths for localhost/testing/development are eliminated.
   return {
     localDev: isLocalDev,
-    // Triggers validation or enable pub level logging. Validation can be
-    // bypassed via #validate=0.
-    // Note that AMP_DEV_MODE flag is used for testing purposes.
-    // Use Array.indexOf instead of Array.includes because of #24219
-    development: !!(
-      ['1', 'actions', 'amp', 'amp4ads', 'amp4email'].indexOf(
-        hashQuery['development']
-      ) >= 0 || win.AMP_DEV_MODE
-    ),
+    development: isModeDevelopment(win),
     examiner: hashQuery['development'] == '2',
     esm: IS_ESM,
     // amp-geo override
     geoOverride: hashQuery['amp-geo'],
     minified: IS_MINIFIED,
-    // Whether document is in an amp-lite viewer. It signal that the user
-    // would prefer to use less bandwidth.
-    lite: searchQuery['amp_lite'] != undefined,
     test: runningTests,
     log: hashQuery['log'],
     version: internalRuntimeVersion(),
@@ -135,6 +122,24 @@ function getRtvVersion(win) {
   return `01${internalRuntimeVersion()}`;
 }
 
+/**
+ * Triggers validation or enable pub level logging. Validation can be
+ * bypassed via #validate=0.
+ * Note that AMP_DEV_MODE flag is used for testing purposes.
+ * @param {!Window} win
+ * @return {boolean}
+ */
+export function isModeDevelopment(win) {
+  const hashQuery = parseQueryString(
+    win.location['originalHash'] || win.location.hash
+  );
+  return !!(
+    ['1', 'actions', 'amp', 'amp4ads', 'amp4email'].includes(
+      hashQuery['development']
+    ) || win.AMP_DEV_MODE
+  );
+}
+
 /**
  * @param {!Window} win
  * @return {string}
diff --git a/src/motion.js b/src/motion.js
index f32f4a16f229a..658ffa04b6733 100644
--- a/src/motion.js
+++ b/src/motion.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Deferred} from './utils/promise';
+import {Deferred} from './core/data-structures/promise';
 import {Services} from './services';
 
 /** @const {function()} */
diff --git a/src/multidoc-manager.js b/src/multidoc-manager.js
index f5713675dd780..2cdf015752734 100644
--- a/src/multidoc-manager.js
+++ b/src/multidoc-manager.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import {CommonSignals} from './common-signals';
+import {CommonSignals} from './core/constants/common-signals';
 import {Services} from './services';
-import {VisibilityState} from './visibility-state';
+import {VisibilityState} from './core/constants/visibility-state';
 import {childElementsByTag, isConnectedNode} from './dom';
 import {
   createShadowDomWriter,
@@ -27,8 +27,9 @@ import {dev, user} from './log';
 import {disposeServicesForDoc, getServicePromiseOrNullForDoc} from './service';
 import {getMode} from './mode';
 import {installStylesForDoc} from './style-installer';
-import {isArray, isObject} from './types';
-import {parseExtensionUrl} from './service/extension-location';
+import {isArray, isObject} from './core/types';
+
+import {parseExtensionUrl} from './service/extension-script';
 import {parseUrlDeprecated} from './url';
 import {setStyle} from './style';
 
@@ -238,8 +239,7 @@ export class MultidocManager {
       opt_initParams,
       (amp, shadowRoot, ampdoc) => {
         // Install extensions.
-        const extensionIds = this.mergeShadowHead_(ampdoc, shadowRoot, doc);
-        this.extensions_.installExtensionsInDoc(ampdoc, extensionIds);
+        this.mergeShadowHead_(ampdoc, shadowRoot, doc);
 
         // Append body.
         if (doc.body) {
@@ -284,9 +284,7 @@ export class MultidocManager {
         amp['writer'] = writer;
         writer.onBody((doc) => {
           // Install extensions.
-          const extensionIds = this.mergeShadowHead_(ampdoc, shadowRoot, doc);
-          // Apply all doc extensions.
-          this.extensions_.installExtensionsInDoc(ampdoc, extensionIds);
+          this.mergeShadowHead_(ampdoc, shadowRoot, doc);
 
           // Append shallow body.
           const body = importShadowBody(
@@ -326,11 +324,9 @@ export class MultidocManager {
    * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
    * @param {!ShadowRoot} shadowRoot
    * @param {!Document} doc
-   * @return {!Array<string>}
    * @private
    */
   mergeShadowHead_(ampdoc, shadowRoot, doc) {
-    const extensionIds = [];
     if (doc.head) {
       shadowRoot.AMP.head = doc.head;
       const parentLinks = {};
@@ -377,6 +373,17 @@ export class MultidocManager {
               // Must be a font definition: no other stylesheets are allowed.
               if (parentLinks[href]) {
                 dev().fine(TAG, '- stylesheet already included: ', href);
+                // To accomodate icon fonts whose stylesheets include
+                // the class definitions in addition to the font definition,
+                // we re-import the stylesheet into the shadow document.
+                // Note: <link> in shadow mode is not yet fully supported on
+                // all browsers, so we use <style>@import "url"</style> instead
+                installStylesForDoc(
+                  ampdoc,
+                  `@import "${href}"`,
+                  /* callback */ null,
+                  /* isRuntimeCss */ false
+                );
               } else {
                 parentLinks[href] = true;
                 const el = this.win.document.createElement('link');
@@ -419,30 +426,20 @@ export class MultidocManager {
               dev().fine(TAG, '- src script: ', n);
               const src = n.getAttribute('src');
               const urlParts = parseExtensionUrl(src);
-              const isRuntime = !urlParts.extensionId;
               // Note: Some extensions don't have [custom-element] or
               // [custom-template] e.g. amp-viewer-integration.
               const customElement = n.getAttribute('custom-element');
               const customTemplate = n.getAttribute('custom-template');
-              if (isRuntime) {
+              const extensionId = customElement || customTemplate;
+              if (!urlParts) {
                 dev().fine(TAG, '- ignore runtime script: ', src);
-              } else if (customElement || customTemplate) {
+              } else if (extensionId) {
                 // This is an extension.
                 this.extensions_.installExtensionForDoc(
                   ampdoc,
-                  customElement || customTemplate,
+                  extensionId,
                   urlParts.extensionVersion
                 );
-                dev().fine(
-                  TAG,
-                  '- load extension: ',
-                  customElement || customTemplate,
-                  ' ',
-                  urlParts.extensionVersion
-                );
-                if (customElement) {
-                  extensionIds.push(customElement);
-                }
               } else if (!n.hasAttribute('data-amp-report-test')) {
                 user().error(TAG, '- unknown script: ', n, src);
               }
@@ -452,7 +449,8 @@ export class MultidocManager {
               if (type.indexOf('javascript') == -1) {
                 shadowRoot.appendChild(this.win.document.importNode(n, true));
                 dev().fine(TAG, '- non-src script: ', n);
-              } else {
+              } else if (!n.hasAttribute('amp-onerror')) {
+                // Don't error on amp-onerror script (https://github.com/ampproject/amphtml/issues/31966)
                 user().error(TAG, '- unallowed inline javascript: ', n);
               }
             }
@@ -466,7 +464,7 @@ export class MultidocManager {
         }
       }
     }
-    return extensionIds;
+    ampdoc.setExtensionsKnown();
   }
 
   /**
diff --git a/src/pixel.js b/src/pixel.js
index 477454f6936af..4a0fe50ad7b0a 100644
--- a/src/pixel.js
+++ b/src/pixel.js
@@ -16,7 +16,7 @@
 
 import {WindowInterface} from '../src/window-interface';
 import {createElementWithAttributes} from '../src/dom';
-import {dict} from '../src/utils/object';
+import {dict} from '../src/core/types/object';
 import {user} from '../src/log';
 
 /** @const {string} */
diff --git a/src/polyfills.js b/src/polyfills.js
deleted file mode 100644
index dd084edfa7072..0000000000000
--- a/src/polyfills.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-/** @fileoverview */
-
-import {getMode} from './mode';
-import {install as installArrayIncludes} from './polyfills/array-includes';
-import {install as installCustomElements} from './polyfills/custom-elements';
-import {install as installDOMTokenList} from './polyfills/domtokenlist';
-import {install as installDocContains} from './polyfills/document-contains';
-import {install as installFetch} from './polyfills/fetch';
-import {install as installGetBoundingClientRect} from './get-bounding-client-rect';
-import {install as installIntersectionObserver} from './polyfills/intersection-observer';
-import {install as installMathSign} from './polyfills/math-sign';
-import {install as installObjectAssign} from './polyfills/object-assign';
-import {install as installObjectValues} from './polyfills/object-values';
-import {install as installPromise} from './polyfills/promise';
-
-installFetch(self);
-installMathSign(self);
-installObjectAssign(self);
-installObjectValues(self);
-installPromise(self);
-installArrayIncludes(self);
-
-// Polyfills that depend on DOM availability
-if (self.document) {
-  installDOMTokenList(self);
-  installDocContains(self);
-  installGetBoundingClientRect(self);
-  // The anonymous class parameter allows us to detect native classes vs
-  // transpiled classes.
-  installCustomElements(self, class {});
-  // The AMP and Inabox are launched separately and so there are two
-  // experiment constants.
-  if (
-    // eslint-disable-next-line no-undef
-    INTERSECTION_OBSERVER_POLYFILL ||
-    // eslint-disable-next-line no-undef
-    INTERSECTION_OBSERVER_POLYFILL_INABOX ||
-    getMode().localDev ||
-    getMode().test
-  ) {
-    installIntersectionObserver(self);
-  }
-}
diff --git a/src/polyfills/abort-controller.js b/src/polyfills/abort-controller.js
new file mode 100644
index 0000000000000..4f0e6f54278f5
--- /dev/null
+++ b/src/polyfills/abort-controller.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** Polyfill for the public AbortController. */
+class AbortController {
+  /** Constructor. */
+  constructor() {
+    /** @const {!AbortSignal} */
+    this.signal_ = new AbortSignal();
+  }
+
+  /** Triggers an abort signal. */
+  abort() {
+    if (this.signal_.isAborted_) {
+      // Already aborted.
+      return;
+    }
+    this.signal_.isAborted_ = true;
+    if (this.signal_.onabort_) {
+      const event = /** @type {!Event} */ ({
+        'type': 'abort',
+        'bubbles': false,
+        'cancelable': false,
+        'target': this.signal_,
+        'currentTarget': this.signal_,
+      });
+      this.signal_.onabort_(event);
+    }
+  }
+
+  /** @return {!AbortSignal} */
+  get signal() {
+    return this.signal_;
+  }
+}
+
+/** Polyfill for the public AbortSignal. */
+class AbortSignal {
+  /** */
+  constructor() {
+    /** @private {boolean} */
+    this.isAborted_ = false;
+    /** @private {?function(!Event)} */
+    this.onabort_ = null;
+  }
+
+  /** @return {boolean} */
+  get aborted() {
+    return this.isAborted_;
+  }
+
+  /** @return {?function(!Event)} */
+  get onabort() {
+    return this.onabort_;
+  }
+
+  /** @param {?function(!Event)} value */
+  set onabort(value) {
+    this.onabort_ = value;
+  }
+}
+
+/**
+ * Sets the AbortController and AbortSignal polyfills if not defined.
+ * @param {!Window} win
+ */
+export function install(win) {
+  if (win.AbortController) {
+    return;
+  }
+  Object.defineProperty(win, 'AbortController', {
+    configurable: true,
+    enumerable: false,
+    writable: true,
+    value: AbortController,
+  });
+  Object.defineProperty(win, 'AbortSignal', {
+    configurable: true,
+    enumerable: false,
+    writable: true,
+    value: AbortSignal,
+  });
+}
diff --git a/src/polyfills/array-includes.js b/src/polyfills/array-includes.js
index 508b2e4982cce..2672874571fee 100644
--- a/src/polyfills/array-includes.js
+++ b/src/polyfills/array-includes.js
@@ -24,9 +24,11 @@
  */
 function includes(value, opt_fromIndex) {
   const fromIndex = opt_fromIndex || 0;
+  // eslint-disable-next-line local/no-invalid-this
   const len = this.length;
   let i = fromIndex >= 0 ? fromIndex : Math.max(len + fromIndex, 0);
   for (; i < len; i++) {
+    // eslint-disable-next-line local/no-invalid-this
     const other = this[i];
     // If value has been found OR (value is NaN AND other is NaN)
     /*eslint "no-self-compare": 0*/
@@ -43,7 +45,7 @@ function includes(value, opt_fromIndex) {
  */
 export function install(win) {
   if (!win.Array.prototype.includes) {
-    win.Object.defineProperty(Array.prototype, 'includes', {
+    win.Object.defineProperty(win.Array.prototype, 'includes', {
       enumerable: false,
       configurable: true,
       writable: true,
diff --git a/src/polyfills/custom-elements.extern.js b/src/polyfills/custom-elements.extern.js
new file mode 100644
index 0000000000000..d05302e616fbf
--- /dev/null
+++ b/src/polyfills/custom-elements.extern.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright 2021 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.
+ */
+
+// This is needed only by custom elements, so it doesn't need to be in the core
+// window externs file.
+/** @type {!typeof HTMLElement} */
+window.HTMLElementOrig;
diff --git a/src/polyfills/custom-elements.js b/src/polyfills/custom-elements.js
index 90b4cb566a44e..496a034107030 100644
--- a/src/polyfills/custom-elements.js
+++ b/src/polyfills/custom-elements.js
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-/**
- * @typedef {{
- *   promise: !Promise<undefined>,
- *   resolve: function(),
- * }}
- */
-let DeferredDef;
+import {Deferred} from '../core/data-structures/promise';
+import {map} from '../core/types/object';
+import {rethrowAsync} from '../core/error';
 
 /**
- * @typedef {!typeof HTMLElement}
+ * For type anotations where Element is a local variable.
+ * @typedef {!Element}
  */
+let ElementOrigDef;
+
+/** @typedef {!typeof HTMLElement} */
 let CustomElementConstructorDef;
 
 /**
@@ -100,18 +100,6 @@ function isPatched(win) {
   return tag.indexOf('[native code]') === -1;
 }
 
-/**
- * Throws the error outside the current event loop.
- *
- * @param {!Error} error
- */
-function rethrowAsync(error) {
-  setTimeout(() => {
-    self.__AMP_REPORT_ERROR(error);
-    throw error;
-  });
-}
-
 /**
  * The public Custom Elements API.
  */
@@ -121,22 +109,14 @@ class CustomElementRegistry {
    * @param {!Registry} registry
    */
   constructor(win, registry) {
-    /**
-     * @const @private
-     */
+    /** @const @private */
     this.win_ = win;
 
-    /**
-     * @const @private
-     */
+    /** @const @private */
     this.registry_ = registry;
 
-    /**
-     * @type {!Object<string, DeferredDef>}
-     * @private
-     * @const
-     */
-    this.pendingDefines_ = Object.create(null);
+    /** @private @const @type {!Object<string, !Deferred>} */
+    this.pendingDefines_ = map();
   }
 
   /**
@@ -188,19 +168,13 @@ class CustomElementRegistry {
     }
 
     const pending = this.pendingDefines_;
-    const deferred = pending[name];
-    if (deferred) {
-      return deferred.promise;
+    let deferred = pending[name];
+    if (!deferred) {
+      deferred = new Deferred();
+      pending[name] = deferred;
     }
 
-    let resolve;
-    const promise = new /*OK*/ Promise((res) => (resolve = res));
-    pending[name] = {
-      promise,
-      resolve,
-    };
-
-    return promise;
+    return deferred.promise;
   }
 
   /**
@@ -223,17 +197,11 @@ class Registry {
    * @param {!Window} win
    */
   constructor(win) {
-    /**
-     * @private @const
-     */
+    /** @private @const */
     this.win_ = win;
 
-    /**
-     * @type {!Object<string, !CustomElementDef>}
-     * @private
-     * @const
-     */
-    this.definitions_ = Object.create(null);
+    /** @private @const @type {!Object<string, !CustomElementDef>} */
+    this.definitions_ = map();
 
     /**
      * A up-to-date DOM selector for all custom elements.
@@ -243,7 +211,7 @@ class Registry {
 
     /**
      * The currently upgrading element.
-     * @private {Element}
+     * @private {?Element}
      */
     this.current_ = null;
 
@@ -251,7 +219,7 @@ class Registry {
      * Once started (after the first Custom Element definition), this tracks
      * DOM append and removals.
      *
-     * @private {MutationObserver}
+     * @private {?MutationObserver}
      */
     this.mutationObserver_ = null;
 
@@ -273,7 +241,7 @@ class Registry {
    * constructor while returning this current node in the HTMLElement
    * class constructor (the base class of all custom elements).
    *
-   * @return {Element}
+   * @return {?Element}
    */
   current() {
     const current = this.current_;
@@ -285,7 +253,7 @@ class Registry {
    * Finds the custom element definition by name.
    *
    * @param {string} name
-   * @return {CustomElementDef|undefined}
+   * @return {!CustomElementDef|undefined}
    */
   getByName(name) {
     const definition = this.definitions_[name];
@@ -297,8 +265,8 @@ class Registry {
   /**
    * Finds the custom element definition by constructor instance.
    *
-   * @param {CustomElementConstructorDef} ctor
-   * @return {CustomElementDef|undefined}
+   * @param {!CustomElementConstructorDef} ctor
+   * @return {!CustomElementDef|undefined}
    */
   getByConstructor(ctor) {
     const definitions = this.definitions_;
@@ -341,9 +309,9 @@ class Registry {
     };
 
     this.observe_(name);
-    this.roots_.forEach((tree) => {
+    for (const tree of this.roots_) {
       this.upgrade(tree, name);
-    });
+    }
   }
 
   /**
@@ -363,8 +331,7 @@ class Registry {
     const query = opt_query || this.query_;
     const upgradeCandidates = this.queryAll_(root, query);
 
-    for (let i = 0; i < upgradeCandidates.length; i++) {
-      const candidate = upgradeCandidates[i];
+    for (const candidate of upgradeCandidates) {
       if (newlyDefined) {
         this.connectedCallback_(candidate);
       } else {
@@ -445,7 +412,8 @@ class Registry {
     if (!def) {
       return;
     }
-    this.upgradeSelf_(/** @type {!Element} */ (node), def);
+    node = /** @type {!HTMLElement} */ (node);
+    this.upgradeSelf_(node, def);
     // TODO(jridgewell): It may be appropriate to adoptCallback, if the node
     // used to be in another doc.
     // TODO(jridgewell): I should be calling the definitions connectedCallback
@@ -467,6 +435,7 @@ class Registry {
   disconnectedCallback_(node) {
     // TODO(jridgewell): I should be calling the definitions connectedCallback
     // with node as the context.
+    node = /** @type {!HTMLElement} */ (node);
     if (node.disconnectedCallback) {
       try {
         node.disconnectedCallback();
@@ -510,9 +479,9 @@ class Registry {
     // I would love to not have to hold onto all of the roots, since it's a
     // memory leak. Unfortunately, there's no way to iterate a list and hold
     // onto its contents weakly.
-    this.roots_.forEach((tree) => {
+    for (const tree of this.roots_) {
       mo.observe(tree, TRACK_SUBTREE);
-    });
+    }
 
     installPatches(this.win_, this);
   }
@@ -549,28 +518,25 @@ class Registry {
    * @param {!Array<!MutationRecord>} records
    */
   handleRecords_(records) {
-    for (let i = 0; i < records.length; i++) {
-      const record = records[i];
+    for (const record of records) {
       if (!record) {
         continue;
       }
 
       const {addedNodes, removedNodes} = record;
-      for (let i = 0; i < addedNodes.length; i++) {
-        const node = addedNodes[i];
+      for (const node of addedNodes) {
         const connectedCandidates = this.queryAll_(node, this.query_);
         this.connectedCallback_(node);
-        for (let i = 0; i < connectedCandidates.length; i++) {
-          this.connectedCallback_(connectedCandidates[i]);
+        for (const candidate of connectedCandidates) {
+          this.connectedCallback_(candidate);
         }
       }
 
-      for (let i = 0; i < removedNodes.length; i++) {
-        const node = removedNodes[i];
+      for (const node of removedNodes) {
         const disconnectedCandidates = this.queryAll_(node, this.query_);
         this.disconnectedCallback_(node);
-        for (let i = 0; i < disconnectedCandidates.length; i++) {
-          this.disconnectedCallback_(disconnectedCandidates[i]);
+        for (const candidate of disconnectedCandidates) {
+          this.disconnectedCallback_(candidate);
         }
       }
     }
@@ -588,13 +554,8 @@ function installPatches(win, registry) {
   const elProto = Element.prototype;
   const nodeProto = Node.prototype;
   const {createElement, importNode} = docProto;
-  const {
-    appendChild,
-    cloneNode,
-    insertBefore,
-    removeChild,
-    replaceChild,
-  } = nodeProto;
+  const {appendChild, cloneNode, insertBefore, removeChild, replaceChild} =
+    nodeProto;
 
   // Patch createElement to immediately upgrade the custom element.
   // This has the added benefit that it avoids the "already created but needs
@@ -684,7 +645,7 @@ function installPatches(win, registry) {
       'innerHTML'
     );
   }
-  if (innerHTMLDesc && innerHTMLDesc.configurable) {
+  if (innerHTMLDesc?.configurable) {
     const innerHTMLSetter = innerHTMLDesc.set;
     innerHTMLDesc.set = function (html) {
       innerHTMLSetter.call(this, html);
@@ -725,7 +686,7 @@ function polyfill(win) {
   const {attachShadow, createShadowRoot} = elProto;
   if (attachShadow) {
     /**
-     * @param {!{mode: string}} unused
+     * @param {{mode: string}} unused
      * @return {!ShadowRoot}
      */
     elProto.attachShadow = function (unused) {
@@ -739,9 +700,7 @@ function polyfill(win) {
     };
   }
   if (createShadowRoot) {
-    /**
-     * @return {!ShadowRoot}
-     */
+    /** @return {!ShadowRoot} */
     elProto.createShadowRoot = function () {
       const shadow = createShadowRoot.apply(this, arguments);
       registry.observe(shadow);
@@ -757,7 +716,7 @@ function polyfill(win) {
    * You can't use the real HTMLElement constructor, because you can't subclass
    * it without using native classes. So, mock its approximation using
    * createElement.
-   * @return {*} TODO(#23582): Specify return type
+   * @return {!ElementOrigDef}
    */
   function HTMLElementPolyfill() {
     const {constructor} = this;
@@ -797,6 +756,7 @@ function polyfill(win) {
   subClass(HTMLElement, HTMLElementPolyfill);
 
   // Expose the polyfilled HTMLElement constructor for everyone to extend from.
+  win.HTMLElementOrig = win.HTMLElement;
   win.HTMLElement = HTMLElementPolyfill;
 
   // When we transpile `super` in Custom Element subclasses, we change it to
@@ -824,9 +784,7 @@ function polyfill(win) {
  */
 function wrapHTMLElement(win) {
   const {HTMLElement, Reflect} = win;
-  /**
-   * @return {!Element}
-   */
+  /** @return {!Element} */
   function HTMLElementWrapper() {
     const ctor = /** @type {function(...?):?|undefined} */ (this.constructor);
 
@@ -838,14 +796,15 @@ function wrapHTMLElement(win) {
   subClass(HTMLElement, HTMLElementWrapper);
 
   // Expose the wrapped HTMLElement constructor for everyone to extend from.
+  win.HTMLElementOrig = win.HTMLElement;
   win.HTMLElement = HTMLElementWrapper;
 }
 
 /**
  * Setups up prototype inheritance
  *
- * @param {!typeof SUPER} superClass
- * @param {!typeof SUB} subClass
+ * @param {!SUPER} superClass
+ * @param {!SUB} subClass
  * @template SUPER
  * @template SUB
  */
@@ -880,9 +839,10 @@ function supportsUnderProto() {
  * old IE.
  * @param {!Object} obj
  * @param {!Object} prototype
+ * @suppress {suspiciousCode} due to IS_ESM inlining
  */
 function setPrototypeOf(obj, prototype) {
-  if (Object.setPrototypeOf) {
+  if (IS_ESM || Object.setPrototypeOf) {
     // Every decent browser.
     Object.setPrototypeOf(obj, prototype);
   } else if (supportsUnderProto()) {
@@ -909,17 +869,14 @@ export function copyProperties(obj, prototype) {
       break;
     }
 
-    const props = Object.getOwnPropertyNames(current);
-    for (let i = 0; i < props.length; i++) {
-      const prop = props[i];
+    for (const prop of Object.getOwnPropertyNames(current)) {
       if (Object.hasOwnProperty.call(obj, prop)) {
         continue;
       }
 
-      const desc = /** @type {!ObjectPropertyDescriptor<Object>} */ (Object.getOwnPropertyDescriptor(
-        current,
-        prop
-      ));
+      const desc = /** @type {!ObjectPropertyDescriptor<Object>} */ (
+        Object.getOwnPropertyDescriptor(current, prop)
+      );
       Object.defineProperty(obj, prop, desc);
     }
 
@@ -975,7 +932,7 @@ export function install(win, ctor) {
 
       // If that didn't throw, we're transpiled.
       // Let's find out if we can wrap HTMLElement and avoid a full patch.
-      installWrapper = !!(Reflect && Reflect.construct);
+      installWrapper = !!Reflect?.construct;
     } catch (e) {
       // The ctor threw when we constructed it via ES5, so it's a real class.
       // We're ok to not install the polyfill.
diff --git a/src/polyfills/document-contains.js b/src/polyfills/document-contains.js
index b6efb6e2ca68b..5d5d2781b41cf 100644
--- a/src/polyfills/document-contains.js
+++ b/src/polyfills/document-contains.js
@@ -20,12 +20,13 @@
  * See https://developer.mozilla.org/en-US/docs/Web/API/Node/contains
  * @param {?Node} node
  * @return {boolean}
- * @this {Node}
+ * @this {Document}
  */
 function documentContainsPolyfill(node) {
   // Per spec, "contains" method is inclusionary
   // i.e. `node.contains(node) == true`. However, we still need to test
   // equality to the document itself.
+  // eslint-disable-next-line local/no-invalid-this
   return node == this || this.documentElement.contains(node);
 }
 
diff --git a/src/polyfills/domtokenlist.js b/src/polyfills/domtokenlist.js
index d09bf2a350529..c19838433484b 100644
--- a/src/polyfills/domtokenlist.js
+++ b/src/polyfills/domtokenlist.js
@@ -24,11 +24,14 @@
  * @return {boolean}
  */
 function domTokenListTogglePolyfill(token, opt_force) {
+  // eslint-disable-next-line local/no-invalid-this
   const remove = opt_force === undefined ? this.contains(token) : !opt_force;
   if (remove) {
+    // eslint-disable-next-line local/no-invalid-this
     this.remove(token);
     return false;
   } else {
+    // eslint-disable-next-line local/no-invalid-this
     this.add(token);
     return true;
   }
diff --git a/src/polyfills/fetch.js b/src/polyfills/fetch.js
index acf234750b34e..c36e5874e8e8d 100644
--- a/src/polyfills/fetch.js
+++ b/src/polyfills/fetch.js
@@ -13,11 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {dev, devAssert, user} from '../log';
-import {hasOwn, map} from '../utils/object';
-import {isArray, isObject} from '../types';
-import {parseJson} from '../json';
-import {utf8Encode} from '../utils/bytes';
+import {dev, user} from '../log';
+import {devAssert} from '../core/assert';
+import {hasOwn, map} from '../core/types/object';
+import {isArray, isObject} from '../core/types';
+import {parseJson} from '../core/types/object/json';
+import {utf8Encode} from '../core/types/string/bytes';
 
 /** @enum {number} Allowed fetch responses. */
 const allowedFetchTypes = {
@@ -150,7 +151,7 @@ class FetchResponse {
     /** @type {?ReadableStream} */
     this.body = null;
 
-    /** @type {string|null} */
+    /** @type {?string} */
     this.url = xhr.responseURL;
   }
 
@@ -188,9 +189,9 @@ class FetchResponse {
    * @return {!Promise<!JsonObject>}
    */
   json() {
-    return /** @type {!Promise<!JsonObject>} */ (this.drainText_().then(
-      parseJson
-    ));
+    return /** @type {!Promise<!JsonObject>} */ (
+      this.drainText_().then(parseJson)
+    );
   }
 
   /**
@@ -199,9 +200,9 @@ class FetchResponse {
    * @return {!Promise<!ArrayBuffer>}
    */
   arrayBuffer() {
-    return /** @type {!Promise<!ArrayBuffer>} */ (this.drainText_().then(
-      utf8Encode
-    ));
+    return /** @type {!Promise<!ArrayBuffer>} */ (
+      this.drainText_().then(utf8Encode)
+    );
   }
 }
 
@@ -282,9 +283,8 @@ export class Response extends FetchResponse {
       /** @type {!Array} */ (init.headers).forEach((entry) => {
         const headerName = entry[0];
         const headerValue = entry[1];
-        lowercasedHeaders[String(headerName).toLowerCase()] = String(
-          headerValue
-        );
+        lowercasedHeaders[String(headerName).toLowerCase()] =
+          String(headerValue);
       });
     } else if (isObject(init.headers)) {
       for (const key in init.headers) {
@@ -304,8 +304,6 @@ export class Response extends FetchResponse {
 
 /**
  * Installs fetch and Response polyfill
- *
- * @export
  * @param {Window} win
  */
 export function install(win) {
diff --git a/src/get-bounding-client-rect.js b/src/polyfills/get-bounding-client-rect.js
similarity index 85%
rename from src/get-bounding-client-rect.js
rename to src/polyfills/get-bounding-client-rect.js
index c8d86c7558508..324a24179822c 100644
--- a/src/get-bounding-client-rect.js
+++ b/src/polyfills/get-bounding-client-rect.js
@@ -21,8 +21,8 @@
  * @see https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/106812/
  */
 
-import {LayoutRectDef, layoutRectLtwh} from './layout-rect';
-import {isConnectedNode} from './dom';
+import {LayoutRectDef, layoutRectLtwh} from '../core/math/layout-rect';
+import {isConnectedNode} from '../dom';
 
 /**
  * Stores the native getBoundingClientRect before we patch it, so that the
@@ -34,9 +34,11 @@ let nativeClientRect;
  * Polyfill for Node.getBoundingClientRect API.
  * @this {!Element}
  * @return {!ClientRect|!LayoutRectDef}
+ * @suppress {suspiciousCode} due to IS_ESM inlining
  */
 function getBoundingClientRect() {
-  if (isConnectedNode(this)) {
+  // eslint-disable-next-line local/no-invalid-this
+  if (IS_ESM || isConnectedNode(this)) {
     return nativeClientRect.call(this);
   }
 
@@ -47,8 +49,13 @@ function getBoundingClientRect() {
  * Determines if this polyfill should be installed.
  * @param {!Window} win
  * @return {boolean}
+ * @suppress {uselessCode} due to IS_ESM inlining
  */
 function shouldInstall(win) {
+  if (IS_ESM) {
+    return false;
+  }
+
   // Don't install in no-DOM environments e.g. worker.
   if (!win.document) {
     return false;
diff --git a/src/polyfills/index.js b/src/polyfills/index.js
new file mode 100644
index 0000000000000..e903bac80204b
--- /dev/null
+++ b/src/polyfills/index.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright 2015 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.
+ */
+
+/** @fileoverview Installs polyfills depending on build environment. */
+
+import {install as installAbortController} from './abort-controller';
+import {install as installArrayIncludes} from './array-includes';
+import {install as installCustomElements} from './custom-elements';
+import {install as installDOMTokenList} from './domtokenlist';
+import {install as installDocContains} from './document-contains';
+import {install as installFetch} from './fetch';
+import {install as installGetBoundingClientRect} from './get-bounding-client-rect';
+import {install as installIntersectionObserver} from './intersection-observer';
+import {install as installMapSet} from './map-set';
+import {install as installMathSign} from './math-sign';
+import {install as installObjectAssign} from './object-assign';
+import {install as installObjectValues} from './object-values';
+import {install as installPromise} from './promise';
+import {install as installResizeObserver} from './resize-observer';
+import {install as installSetAdd} from './set-add';
+import {install as installStringStartsWith} from './string-starts-with';
+import {install as installWeakMapSet} from './weakmap-set';
+
+if (!IS_ESM) {
+  installFetch(self);
+  installMathSign(self);
+  installObjectAssign(self);
+  installObjectValues(self);
+  installPromise(self);
+  installArrayIncludes(self);
+  installMapSet(self);
+  installWeakMapSet(self);
+  installSetAdd(self);
+  installStringStartsWith(self);
+}
+
+// Polyfills that depend on DOM availability
+if (self.document) {
+  if (!IS_ESM) {
+    installDOMTokenList(self);
+    installDocContains(self);
+    installGetBoundingClientRect(self);
+  }
+  // The anonymous class parameter allows us to detect native classes vs
+  // transpiled classes.
+  if (!IS_SXG) {
+    installCustomElements(self, class {});
+    installIntersectionObserver(self);
+    installResizeObserver(self);
+    installAbortController(self);
+  }
+}
diff --git a/src/polyfills/intersection-observer.js b/src/polyfills/intersection-observer.js
index 0bbb4e1a0f888..6268ac8b0c8e0 100644
--- a/src/polyfills/intersection-observer.js
+++ b/src/polyfills/intersection-observer.js
@@ -19,14 +19,22 @@
  * See https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver.
  */
 
-import {IntersectionObserverStub} from '../polyfillstub/intersection-observer-stub';
+import {
+  installStub,
+  shouldLoadPolyfill,
+} from './stubs/intersection-observer-stub';
 
 /**
+ * Installs the IntersectionObserver polyfill. There are a few different modes of operation.
+ * - No native support: immediately register a Stub and upgrade lazily once the full polyfill loads.
+ * - Partial InOb support: choose between the lazily upgrading Stub and the native InOb on a per-instance basis.
+ * - Full InOb support: Don't install anything.
+ *
  * @param {!Window} win
  */
 export function install(win) {
-  if (!win.IntersectionObserver) {
-    win.IntersectionObserver = /** @type {typeof IntersectionObserver} */ (IntersectionObserverStub);
+  if (shouldLoadPolyfill(win)) {
+    installStub(win);
   }
   fixEntry(win);
 }
@@ -36,15 +44,15 @@ export function install(win) {
  * @param {!Window} childWin
  */
 export function installForChildWin(parentWin, childWin) {
-  if (childWin.IntersectionObserver) {
-    fixEntry(childWin);
-  } else if (parentWin.IntersectionObserver) {
+  if (shouldLoadPolyfill(childWin)) {
     Object.defineProperties(childWin, {
       IntersectionObserver: {get: () => parentWin.IntersectionObserver},
       IntersectionObserverEntry: {
         get: () => parentWin.IntersectionObserverEntry,
       },
     });
+  } else {
+    fixEntry(childWin);
   }
 }
 
diff --git a/src/polyfills/map-set.js b/src/polyfills/map-set.js
new file mode 100644
index 0000000000000..5924fc9274b8b
--- /dev/null
+++ b/src/polyfills/map-set.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * Forces the return value from Map.prototype.set to always be the map
+ * instance. IE11 returns undefined.
+ *
+ * @param {!Window} win
+ */
+export function install(win) {
+  const {Map} = win;
+  const m = new Map();
+  if (m.set(0, 0) !== m) {
+    const {set} = m;
+
+    win.Object.defineProperty(Map.prototype, 'set', {
+      enumerable: false,
+      configurable: true,
+      writable: true,
+      value: function () {
+        set.apply(this, arguments);
+        return this;
+      },
+    });
+  }
+}
diff --git a/src/polyfills/promise.extern.js b/src/polyfills/promise.extern.js
new file mode 100644
index 0000000000000..82d7de4b6a176
--- /dev/null
+++ b/src/polyfills/promise.extern.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview Provide extern for promise-pjs polyfill.
+ * @externs
+ */
+
+/** type {!Promise} */
+let default$$module$promise_pjs;
diff --git a/src/polyfills/promise.js b/src/polyfills/promise.js
index 8cb9e918db48d..37ed4f1ab6a12 100644
--- a/src/polyfills/promise.js
+++ b/src/polyfills/promise.js
@@ -19,11 +19,10 @@ import Promise from 'promise-pjs';
 /**
  * Sets the Promise polyfill if it does not exist.
  * @param {!Window} win
- * @suppress {checkTypes}
  */
 export function install(win) {
   if (!win.Promise) {
-    win.Promise = /** @type {?} */ (Promise);
+    win.Promise = Promise;
     // In babel the * export is an Object with a default property.
     // In closure compiler it is the Promise function itself.
     if (Promise.default) {
diff --git a/src/polyfills/resize-observer.js b/src/polyfills/resize-observer.js
new file mode 100644
index 0000000000000..795b68b9b5344
--- /dev/null
+++ b/src/polyfills/resize-observer.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * @fileoverview
+ * See https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+ */
+
+import {installStub, shouldLoadPolyfill} from './stubs/resize-observer-stub';
+
+/**
+ * Installs the ResizeObserver polyfill. There are a few different modes of
+ * operation.
+ *
+ * @param {!Window} win
+ */
+export function install(win) {
+  if (shouldLoadPolyfill(win)) {
+    installStub(win);
+  }
+}
+
+/**
+ * @param {!Window} parentWin
+ * @param {!Window} childWin
+ */
+export function installForChildWin(parentWin, childWin) {
+  if (!childWin.ResizeObserver && parentWin.ResizeObserver) {
+    Object.defineProperties(childWin, {
+      ResizeObserver: {get: () => parentWin.ResizeObserver},
+      ResizeObserverEntry: {get: () => parentWin.ResizeObserverEntry},
+    });
+  }
+}
diff --git a/src/polyfills/set-add.js b/src/polyfills/set-add.js
new file mode 100644
index 0000000000000..2f27f0e946e84
--- /dev/null
+++ b/src/polyfills/set-add.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * Forces the return value from Set.prototype.add to always be the set
+ * instance. IE11 returns undefined.
+ *
+ * @param {!Window} win
+ */
+export function install(win) {
+  const {Set} = win;
+  const s = new Set();
+  if (s.add(0) !== s) {
+    const {add} = s;
+
+    win.Object.defineProperty(Set.prototype, 'add', {
+      enumerable: false,
+      configurable: true,
+      writable: true,
+      value: function () {
+        add.apply(this, arguments);
+        return this;
+      },
+    });
+  }
+}
diff --git a/src/polyfills/shame.extern.js b/src/polyfills/shame.extern.js
new file mode 100644
index 0000000000000..63c08376c1889
--- /dev/null
+++ b/src/polyfills/shame.extern.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview The junk-drawer of externs that haven't yet been sorted well.
+ * Shame! Shame! Shame! Avoid adding to this.
+ *
+ * It's okay for some things to start off here, since moving them doesn't
+ * require any other file changes (unlike real code, which requires updating)
+ * imports throughout the repo).
+ *
+ * @externs
+ */
+
+// This definition is exported by the fetch polyfill implementation, but
+// currently has dependencies on non-core modules that aren't yet type-checked.
+//
+// Planned destination: this should be removed when fetch is re-included in the
+// polyfills type-check target.
+/** @type {function(!Window)} */
+let install$$module$src$polyfills$fetch;
+
+// This definition lives in non-core files but is consumed by
+// get-bounding-client-rect. Is should be removed once dom.js is moved to core.
+/** @type {function(!Element):boolean} */
+let isConnectedNode$$module$src$dom;
diff --git a/src/polyfills/string-starts-with.js b/src/polyfills/string-starts-with.js
new file mode 100644
index 0000000000000..5f071417f7e2a
--- /dev/null
+++ b/src/polyfills/string-starts-with.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * Return true if string begins with the characters of the specified string.
+ * Polyfill copied from MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string/startsWith
+ *
+ * @param {string} search
+ * @param {number=} rawPos
+ * @return {boolean}
+ * @this {string}
+ */
+function startsWith(search, rawPos) {
+  const pos = rawPos > 0 ? rawPos | 0 : 0;
+  // eslint-disable-next-line local/no-invalid-this
+  return this.substr(pos, search.length) === search;
+}
+
+/**
+ * Sets the String.startsWith polyfill if it does not exist.
+ * @param {!Window} win
+ */
+export function install(win) {
+  if (!win.String.prototype.startsWith) {
+    win.Object.defineProperty(win.String.prototype, 'startsWith', {
+      enumerable: false,
+      configurable: true,
+      writable: true,
+      value: startsWith,
+    });
+  }
+}
diff --git a/src/polyfills/stubs/intersection-observer-stub.js b/src/polyfills/stubs/intersection-observer-stub.js
new file mode 100644
index 0000000000000..2d859ca623d18
--- /dev/null
+++ b/src/polyfills/stubs/intersection-observer-stub.js
@@ -0,0 +1,284 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * @fileoverview
+ * See https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver.
+ *
+ * This is the stub to support IntersectionObserver. It's installed from
+ * polyfills/intersection-observer.js and upgraded from the
+ * amp-intersection-observer-polyfill extension.
+ */
+
+/** @typedef {function(!typeof IntersectionObserver)} */
+let InObUpgraderDef;
+
+const UPGRADERS = '_upgraders';
+const NATIVE = '_native';
+const STUB = '_stub';
+
+/**
+ * @param {!Window} win
+ * @return {boolean}
+ * @visibleForTesting
+ */
+export function shouldLoadPolyfill(win) {
+  return (
+    !win.IntersectionObserver ||
+    !win.IntersectionObserverEntry ||
+    !!win.IntersectionObserver[STUB] ||
+    !supportsDocumentRoot(win) ||
+    isWebkit(win)
+  );
+}
+
+/**
+ * All current WebKit (as of Safari 14.x) {root:document} IntersectionObservers
+ * will report incorrect rootBounds, intersectionRect, and intersectionRatios
+ * and therefore we force the polyfill in this case.
+ * See: https://bugs.webkit.org/show_bug.cgi?id=219495.
+ *
+ * @param {!Window} win
+ * @return {boolean}
+ */
+function isWebkit(win) {
+  // navigator.vendor is always "Apple Computer, Inc." for all iOS browsers and
+  // Mac OS Safari.
+  return /apple/i.test(win.navigator.vendor);
+}
+
+/**
+ * @param {!typeof IntersectionObserver} Native
+ * @param {!typeof IntersectionObserver} Polyfill
+ * @return {!typeof IntersectionObserver}
+ */
+function getIntersectionObserverDispatcher(Native, Polyfill) {
+  /**
+   * @param {!IntersectionObserverCallback} ioCallback
+   * @param {IntersectionObserverInit=} opts
+   * @return {!IntersectionObserver}
+   */
+  function Ctor(ioCallback, opts) {
+    if (opts?.root?.nodeType === /* Node.DOCUMENT_NODE */ 9) {
+      return new Polyfill(ioCallback, opts);
+    } else {
+      return new Native(ioCallback, opts);
+    }
+  }
+  return Ctor;
+}
+
+/**
+ * Installs the InOb stubs. This should only be called in two cases:
+ * 1. No native InOb exists.
+ * 2. Native InOb is present, but lacks document root support.
+ *
+ * @param {!Window} win
+ */
+export function installStub(win) {
+  if (!win.IntersectionObserver) {
+    win.IntersectionObserver = IntersectionObserverStub;
+    win.IntersectionObserver[STUB] = IntersectionObserverStub;
+    return;
+  }
+
+  const Native = win.IntersectionObserver;
+  win.IntersectionObserver = getIntersectionObserverDispatcher(
+    win.IntersectionObserver,
+    IntersectionObserverStub
+  );
+  win.IntersectionObserver[STUB] = IntersectionObserverStub;
+  win.IntersectionObserver[NATIVE] = Native;
+}
+
+/**
+ * Returns true if IntersectionObserver supports a document root.
+ * @param {!Window} win
+ * @return {boolean}
+ */
+export function supportsDocumentRoot(win) {
+  try {
+    new win.IntersectionObserver(() => {}, {
+      // TODO(rcebulko): Update when CC updates their externs
+      // See https://github.com/google/closure-compiler/pull/3804
+      root: /** @type {?} */ (win.document),
+    });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * @param {!Window} win
+ * @param {function()} installer
+ */
+export function upgradePolyfill(win, installer) {
+  // Can't use the IntersectionObserverStub here directly since it's a separate
+  // instance deployed in v0.js vs the polyfill extension.
+  const Stub = win.IntersectionObserver[STUB];
+  if (Stub) {
+    const Native = win.IntersectionObserver[NATIVE];
+    delete win.IntersectionObserver;
+    delete win.IntersectionObserverEntry;
+    installer();
+    const Polyfill = win.IntersectionObserver;
+    if (Native) {
+      win.IntersectionObserver = getIntersectionObserverDispatcher(
+        Native,
+        Polyfill
+      );
+    }
+
+    /** @type {!Array<!InObUpgraderDef>} */
+    const upgraders = Stub[UPGRADERS].slice(0);
+    const microtask = Promise.resolve();
+    const upgrade = (upgrader) => {
+      microtask.then(() => upgrader(Polyfill));
+    };
+    upgraders.forEach(upgrade);
+    Stub[UPGRADERS] = {'push': upgrade};
+  } else {
+    // Even if this is not the stub, we still may need to polyfill
+    // `isIntersecting`. See `shouldLoadPolyfill` for more info.
+    installer();
+  }
+}
+
+/**
+ * The stub for `IntersectionObserver`. Implements the same interface, but
+ * keeps the tracked elements in memory until the actual polyfill arives.
+ * This stub is necessary because the polyfill itself is significantly bigger.
+ *
+ * It doesn't technically extend IntersectionObserver, but this allows the stub
+ * to be seen as equivalent when typechecking calls expecting an
+ * IntersectionObserver.
+ * @extends IntersectionObserver
+ */
+export class IntersectionObserverStub {
+  /**
+   * @param {!IntersectionObserverCallback} callback
+   * @param {!IntersectionObserverInit=} options
+   */
+  constructor(callback, options) {
+    /** @private @const */
+    this.callback_ = callback;
+
+    /** @private @const {!IntersectionObserverInit} */
+    this.options_ = {
+      root: null,
+      rootMargin: '0px 0px 0px 0px',
+      ...options,
+    };
+
+    /** @private {!Array<!Element>} */
+    this.elements_ = [];
+
+    /** @private {?IntersectionObserver} */
+    this.inst_ = null;
+
+    // Wait for the upgrade.
+    IntersectionObserverStub[UPGRADERS].push(this.upgrade_.bind(this));
+  }
+
+  /** @return {?Element} */
+  get root() {
+    if (this.inst_) {
+      return this.inst_.root;
+    }
+    return this.options_.root || null;
+  }
+
+  /** @return {string} */
+  get rootMargin() {
+    if (this.inst_) {
+      return this.inst_.rootMargin;
+    }
+    // The CC-provided IntersectionObserverInit type allows for rootMargin to be
+    // undefined, but we provide a default, so it's guaranteed to be a string
+    // here.
+    return /** @type {string} */ (this.options_.rootMargin);
+  }
+
+  /** @return {!Array<number>} */
+  get thresholds() {
+    if (this.inst_) {
+      return this.inst_.thresholds;
+    }
+    return [].concat(this.options_.threshold || 0);
+  }
+
+  /** @return {undefined} */
+  disconnect() {
+    if (this.inst_) {
+      this.inst_.disconnect();
+    } else {
+      this.elements_.length = 0;
+    }
+  }
+
+  /** @return {!Array<!IntersectionObserverEntry>} */
+  takeRecords() {
+    if (this.inst_) {
+      return this.inst_.takeRecords();
+    }
+    return [];
+  }
+
+  /** @param {!Element} target */
+  observe(target) {
+    if (this.inst_) {
+      this.inst_.observe(target);
+    } else {
+      if (this.elements_.indexOf(target) == -1) {
+        this.elements_.push(target);
+      }
+    }
+  }
+
+  /** @param {!Element} target */
+  unobserve(target) {
+    if (this.inst_) {
+      this.inst_.unobserve(target);
+    } else {
+      const index = this.elements_.indexOf(target);
+      if (index != -1) {
+        this.elements_.splice(index, 1);
+      }
+    }
+  }
+
+  /**
+   * @param {!typeof IntersectionObserver} Ctor
+   * @private
+   */
+  upgrade_(Ctor) {
+    const inst = new Ctor(this.callback_, this.options_);
+    this.inst_ = inst;
+    for (const e of this.elements_) {
+      inst.observe(e);
+    }
+    this.elements_.length = 0;
+  }
+}
+
+/** @type {!Array<!InObUpgraderDef>} */
+IntersectionObserverStub[UPGRADERS] = [];
+
+/** @visibleForTesting */
+export function resetStubsForTesting() {
+  IntersectionObserverStub[UPGRADERS] = [];
+}
diff --git a/src/polyfills/stubs/resize-observer-stub.js b/src/polyfills/stubs/resize-observer-stub.js
new file mode 100644
index 0000000000000..98c8defb10e42
--- /dev/null
+++ b/src/polyfills/stubs/resize-observer-stub.js
@@ -0,0 +1,162 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * @fileoverview
+ * See https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+ *
+ * This is the stub to support ResizeObserver. It's installed from
+ * polyfills/resize-observer.js and upgraded from the
+ * amp-resize-observer-polyfill extension.
+ */
+
+/** @typedef {function(!typeof ResizeObserver)} */
+let ResObsUpgraderDef;
+
+const UPGRADERS = '_upgraders';
+const STUB = '_stub';
+
+/**
+ * @param {!Window} win
+ * @return {boolean}
+ * @visibleForTesting
+ */
+export function shouldLoadPolyfill(win) {
+  return !win.ResizeObserver || !!win.ResizeObserver[STUB];
+}
+
+/**
+ * Installs the ResOb stubs.
+ *
+ * @param {!Window} win
+ */
+export function installStub(win) {
+  if (win.ResizeObserver) {
+    return;
+  }
+
+  win.ResizeObserver = ResizeObserverStub;
+  win.ResizeObserver[STUB] = ResizeObserverStub;
+}
+
+/**
+ * @param {!Window} win
+ * @param {function()} installer
+ */
+export function upgradePolyfill(win, installer) {
+  // Can't use the ResizeObserverStub here directly since it's a separate
+  // instance deployed in v0.js vs the polyfill extension.
+  const Stub = win.ResizeObserver[STUB];
+  if (Stub) {
+    delete win.ResizeObserver;
+    delete win.ResizeObserverEntry;
+    installer();
+
+    const Polyfill = win.ResizeObserver;
+    /** @type {!Array<ResObsUpgraderDef>} */
+    const upgraders = Stub[UPGRADERS].slice(0);
+    const microtask = Promise.resolve();
+    const upgrade = (upgrader) => {
+      microtask.then(() => upgrader(Polyfill));
+    };
+    for (const upgrader of upgraders) {
+      upgrade(upgrader);
+    }
+    Stub[UPGRADERS] = {'push': upgrade};
+  } else {
+    // Even if this is not the stub, we still may need to install the polyfill.
+    // See `shouldLoadPolyfill` for more info.
+    installer();
+  }
+}
+
+/**
+ * The stub for `ResizeObserver`. Implements the same interface, but
+ * keeps the tracked elements in memory until the actual polyfill arives.
+ * This stub is necessary because the polyfill itself is significantly bigger.
+ * It doesn't technically extend ResizeObserver, but this allows the stub
+ * to be seen as equivalent when typechecking calls expecting a ResizeObserver.
+ * @extends ResizeObserver
+ */
+export class ResizeObserverStub {
+  /** @param {!ResizeObserverCallback} callback */
+  constructor(callback) {
+    /** @private @const {!ResizeObserverCallback} */
+    this.callback_ = callback;
+
+    /** @private {!Array<!Element>} */
+    this.elements_ = [];
+
+    /** @private {?ResizeObserver} */
+    this.inst_ = null;
+
+    // Wait for the upgrade.
+    ResizeObserverStub[UPGRADERS].push(this.upgrade_.bind(this));
+  }
+
+  /** @return {undefined} */
+  disconnect() {
+    if (this.inst_) {
+      this.inst_.disconnect();
+    } else {
+      this.elements_.length = 0;
+    }
+  }
+
+  /** @param {!Element} target */
+  observe(target) {
+    if (this.inst_) {
+      this.inst_.observe(target);
+    } else {
+      if (this.elements_.indexOf(target) == -1) {
+        this.elements_.push(target);
+      }
+    }
+  }
+
+  /** @param {!Element} target */
+  unobserve(target) {
+    if (this.inst_) {
+      this.inst_.unobserve(target);
+    } else {
+      const index = this.elements_.indexOf(target);
+      if (index != -1) {
+        this.elements_.splice(index, 1);
+      }
+    }
+  }
+
+  /**
+   * @param {!typeof ResizeObserver} Ctor
+   * @private
+   */
+  upgrade_(Ctor) {
+    const inst = new Ctor(this.callback_);
+    this.inst_ = inst;
+    for (const e of this.elements_) {
+      inst.observe(e);
+    }
+    this.elements_.length = 0;
+  }
+}
+
+/** @type {!Array<!ResObsUpgraderDef>} */
+ResizeObserverStub[UPGRADERS] = [];
+
+/** @visibleForTesting */
+export function resetStubsForTesting() {
+  ResizeObserverStub[UPGRADERS] = [];
+}
diff --git a/src/polyfills/weakmap-set.js b/src/polyfills/weakmap-set.js
new file mode 100644
index 0000000000000..6fc5d4b260701
--- /dev/null
+++ b/src/polyfills/weakmap-set.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/**
+ * Forces the return value from WeakMap.prototype.set to always be the map
+ * instance. IE11 returns undefined.
+ *
+ * @param {!Window} win
+ */
+export function install(win) {
+  const {WeakMap} = win;
+  const m = new WeakMap();
+  if (m.set({}, 0) !== m) {
+    const {set} = m;
+
+    win.Object.defineProperty(WeakMap.prototype, 'set', {
+      enumerable: false,
+      configurable: true,
+      writable: true,
+      value: function () {
+        set.apply(this, arguments);
+        return this;
+      },
+    });
+  }
+}
diff --git a/src/polyfillstub/intersection-observer-stub.js b/src/polyfillstub/intersection-observer-stub.js
deleted file mode 100644
index 79329f7aa9a02..0000000000000
--- a/src/polyfillstub/intersection-observer-stub.js
+++ /dev/null
@@ -1,229 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-/**
- * @fileoverview
- * See https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver.
- *
- * This is the stub to support IntersectionObserver. It's installed from
- * polyfills/intersection-observer.js and upgraded from the
- * amp-intersection-observer-polyfill extension.
- */
-
-import {Services} from '../services';
-
-const UPGRADERS = '_upgraders';
-
-/**
- * @param {!Window} win
- * @return {boolean}
- * @visibleForTesting
- */
-export function shouldLoadPolyfill(win) {
-  return (
-    !win.IntersectionObserver ||
-    win.IntersectionObserver === IntersectionObserverStub ||
-    !win.IntersectionObserverEntry
-  );
-}
-
-/**
- * @param {!Window} win
- */
-export function scheduleUpgradeIfNeeded(win) {
-  if (shouldLoadPolyfill(win)) {
-    Services.extensionsFor(win).preloadExtension(
-      'amp-intersection-observer-polyfill'
-    );
-  }
-}
-
-/**
- * @param {!Window} win
- * @param {function()} installer
- */
-export function upgradePolyfill(win, installer) {
-  // Can't use the IntersectionObserverStub here directly since it's a separate
-  // instance deployed in v0.js vs the polyfill extension.
-  const Stub = /** @type {typeof IntersectionObserverStub} */ (win.IntersectionObserver);
-  if (Stub && UPGRADERS in Stub) {
-    delete win.IntersectionObserver;
-    delete win.IntersectionObserverEntry;
-    installer();
-    const Impl = win.IntersectionObserver;
-    const upgraders = Stub[UPGRADERS].slice(0);
-    const microtask = Promise.resolve();
-    const upgrade = (upgrader) => {
-      microtask.then(() => upgrader(Impl));
-    };
-    if (upgraders.length > 0) {
-      /** @type {!Array} */ (upgraders).forEach(upgrade);
-    }
-    Stub[
-      UPGRADERS
-    ] = /** @type {!Array<function(typeof IntersectionObserver)>} */ ({
-      'push': upgrade,
-    });
-  } else {
-    // Even if this is not the stub, we still may need to polyfill
-    // `isIntersecting`. See `shouldLoadPolyfill` for more info.
-    installer();
-  }
-}
-
-/**
- * The stub for `IntersectionObserver`. Implements the same interface, but
- * keeps the tracked elements in memory until the actual polyfill arives.
- * This stub is necessary because the polyfill itself is significantly bigger.
- */
-export class IntersectionObserverStub {
-  /**
-   * @param {!IntersectionObserverCallback} callback
-   * @param {!IntersectionObserverInit=} options
-   */
-  constructor(callback, options) {
-    /** @private @const */
-    this.callback_ = callback;
-
-    /** @private @const {!IntersectionObserverInit} */
-    this.options_ = {
-      root: null,
-      rootMargin: '0px 0px 0px 0px',
-      ...options,
-    };
-
-    // Must fail on any non-element root. This is critical because this
-    // failure is used as a feature-detection for document root support.
-    const {root} = this.options_;
-    if (root && root.nodeType !== /* ELEMENT */ 1) {
-      throw new Error('root must be an Element');
-    }
-
-    /** @private {?Array<!Element>} */
-    this.elements_ = [];
-
-    /** @private {?IntersectionObserver} */
-    this.inst_ = null;
-
-    // Wait for the upgrade.
-    IntersectionObserverStub[UPGRADERS].push(this.upgrade_.bind(this));
-  }
-
-  /**
-   * @export
-   * @return {?Element}
-   */
-  get root() {
-    if (this.inst_) {
-      return this.inst_.root;
-    }
-    return this.options_.root || null;
-  }
-
-  /**
-   * @export
-   * @return {*}
-   */
-  get rootMargin() {
-    if (this.inst_) {
-      return this.inst_.rootMargin;
-    }
-    return this.options_.rootMargin;
-  }
-
-  /**
-   * @export
-   * @return {*}
-   */
-  get thresholds() {
-    if (this.inst_) {
-      return this.inst_.thresholds;
-    }
-    return [].concat(this.options_.threshold || 0);
-  }
-
-  /**
-   * @export
-   */
-  disconnect() {
-    if (this.inst_) {
-      this.inst_.disconnect();
-    } else {
-      this.elements_.length = 0;
-    }
-  }
-
-  /**
-   * @export
-   * @return {!Array}
-   */
-  takeRecords() {
-    if (this.inst_) {
-      return this.inst_.takeRecords();
-    }
-    return [];
-  }
-
-  /**
-   * @export
-   * @param {!Element} target
-   */
-  observe(target) {
-    if (this.inst_) {
-      this.inst_.observe(target);
-    } else {
-      if (this.elements_.indexOf(target) == -1) {
-        this.elements_.push(target);
-      }
-    }
-  }
-
-  /**
-   * @export
-   * @param {!Element} target
-   */
-  unobserve(target) {
-    if (this.inst_) {
-      this.inst_.unobserve(target);
-    } else {
-      const index = this.elements_.indexOf(target);
-      if (index != -1) {
-        this.elements_.splice(index, 1);
-      }
-    }
-  }
-
-  /**
-   * @param {typeof IntersectionObserver} constr
-   * @private
-   */
-  upgrade_(constr) {
-    const inst = new constr(this.callback_, this.options_);
-    this.inst_ = inst;
-    this.elements_.forEach((e) => inst.observe(e));
-    this.elements_ = null;
-  }
-}
-
-/**
- * @type {!Array<function(typeof IntersectionObserver)>}
- */
-IntersectionObserverStub[UPGRADERS] = [];
-
-/** @visibleForTesting */
-export function resetSubsForTesting() {
-  IntersectionObserverStub[UPGRADERS] = [];
-}
diff --git a/src/preact/OWNERS b/src/preact/OWNERS
new file mode 100644
index 0000000000000..a5875f7b09a13
--- /dev/null
+++ b/src/preact/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'alanorozco'}, {name: 'caroqliu'}, {name: 'jridgewell'}],
+    },
+  ],
+}
diff --git a/src/preact/base-element.js b/src/preact/base-element.js
index 049fb705c815d..588f40fa8d237 100644
--- a/src/preact/base-element.js
+++ b/src/preact/base-element.js
@@ -15,20 +15,70 @@
  */
 
 import * as Preact from './index';
-import {Deferred} from '../utils/promise';
+import {ActionTrust} from '../core/constants/action-constants';
+import {AmpEvents} from '../core/constants/amp-events';
+import {CanPlay, CanRender, LoadingProp} from '../context/contextprops';
+import {Deferred} from '../core/data-structures/promise';
+import {Layout, isLayoutSizeDefined} from '../layout';
+import {Loading} from '../core/loading-instructions';
+import {MediaQueryProps} from '../utils/media-query-props';
+import {PauseHelper} from '../utils/pause-helper';
+import {ReadyState} from '../core/constants/ready-state';
 import {Slot, createSlot} from './slot';
 import {WithAmpContext} from './context';
-import {devAssert} from '../log';
-import {hasOwn} from '../utils/object';
-import {matches} from '../dom';
-import {render} from './index';
+import {
+  addGroup,
+  discover,
+  setGroupProp,
+  setParent,
+  subscribe,
+} from '../context';
+import {
+  childElementByAttr,
+  childElementByTag,
+  createElementWithAttributes,
+  dispatchCustomEvent,
+  matches,
+  parseBooleanAttribute,
+} from '../dom';
+import {dashToCamelCase} from '../core/types/string';
+import {devAssert} from '../core/assert';
+import {dict, hasOwn, map} from '../core/types/object';
+import {getDate} from '../core/types/date';
+import {getMode} from '../mode';
+import {hydrate, render} from './index';
+import {installShadowStyle} from '../shadow-embed';
+import {isElement} from '../core/types';
+import {sequentialIdGenerator} from '../core/math/id-generator';
+import {toArray} from '../core/types/array';
 
 /**
+ * The following combinations are allowed.
+ * - `attr`, (optionally) `type`, and (optionally) `media` can be specified when
+ *   an attribute maps to a component prop 1:1.
+ * - `attrs` and `parseAttrs` can be specified when multiple attributes map
+ *   to a single prop.
+ * - `attrPrefix` can be specified when multiple attributes with the same prefix
+ *   map to a single prop object. The prefix cannot equal the attribute name.
+ * - `selector` can be specified for children of a certain shape and structure
+ *   according to ChildDef.
+ * - `passthrough` can be specified to slot children using a single
+ *   `<slot>` element for all children. This is in contrast to selector mode,
+ *   which creates a new named `<slot>` for every selector.
+ * - `passthroughNonEmpty` is similar to passthrough mode except that when there
+ *   are no children elements, the returned value will be null instead of the
+ *   unnamed `<slot>`. This allows the Preact environment to have conditional
+ *   behavior depending on whether or not there are children.
+ *
  * @typedef {{
- *   attr: string,
+ *   attr: (string|undefined),
  *   type: (string|undefined),
+ *   attrPrefix: (string|undefined),
+ *   attrs: (!Array<string>|undefined),
+ *   parseAttrs: ((function(!Element):*)|undefined),
+ *   media: (boolean|undefined),
  *   default: *,
- * }}
+ * }|string}
  */
 let AmpElementPropDef;
 
@@ -37,11 +87,110 @@ let AmpElementPropDef;
  *   name: string,
  *   selector: string,
  *   single: (boolean|undefined),
+ *   clone: (boolean|undefined),
  *   props: (!JsonObject|undefined),
  * }}
  */
 let ChildDef;
 
+/** @const {!MutationObserverInit} */
+const CHILDREN_MUTATION_INIT = {
+  childList: true,
+};
+
+/** @const {!MutationObserverInit} */
+const PASSTHROUGH_MUTATION_INIT = {
+  childList: true,
+  characterData: true,
+};
+
+/** @const {!MutationObserverInit} */
+const TEMPLATES_MUTATION_INIT = {
+  childList: true,
+};
+
+/** @const {!JsonObject<string, string>} */
+const SHADOW_CONTAINER_ATTRS = dict({
+  'style': 'display: contents; background: inherit;',
+  'part': 'c',
+});
+
+/** @const {string} */
+const SERVICE_SLOT_NAME = 'i-amphtml-svc';
+
+/** @const {!JsonObject<string, string>} */
+const SERVICE_SLOT_ATTRS = dict({'name': SERVICE_SLOT_NAME});
+
+/** @const {string} */
+const RENDERED_ATTR = 'i-amphtml-rendered';
+
+/** @const {!JsonObject<string, string>} */
+const RENDERED_ATTRS = dict({'i-amphtml-rendered': ''});
+
+/**
+ * The same as `applyFillContent`, but inside the shadow.
+ * @const {!Object}
+ */
+const SIZE_DEFINED_STYLE = {
+  'position': 'absolute',
+  'top': '0',
+  'left': '0',
+  'width': '100%',
+  'height': '100%',
+};
+
+/**
+ * This is an internal property that marks light DOM nodes that were rendered
+ * by AMP/Preact bridge and thus must be ignored by the mutation observer to
+ * avoid mutate->rerender->mutate loops.
+ */
+const RENDERED_PROP = '__AMP_RENDERED';
+
+const UNSLOTTED_GROUP = 'unslotted';
+
+/** @return {boolean} */
+const MATCH_ANY = () => true;
+
+const childIdGenerator = sequentialIdGenerator();
+
+const ONE_OF_ERROR_MESSAGE =
+  'Only one of "attr", "attrs", "attrPrefix", "passthrough", ' +
+  '"passthroughNonEmpty", or "selector" must be given';
+
+/**
+ * @param {!Object<string, !AmpElementPropDef>} propDefs
+ * @param {function(!AmpElementPropDef):boolean} cb
+ * @return {boolean}
+ */
+function checkPropsFor(propDefs, cb) {
+  return Object.values(propDefs).some(cb);
+}
+
+/**
+ * @param {!AmpElementPropDef} def
+ * @return {boolean}
+ */
+const HAS_MEDIA = (def) => !!def.media;
+
+/**
+ * @param {!AmpElementPropDef} def
+ * @return {boolean}
+ */
+const HAS_SELECTOR = (def) => typeof def === 'string' || !!def.selector;
+
+/**
+ * @param {!AmpElementPropDef} def
+ * @return {boolean}
+ */
+const HAS_PASSTHROUGH = (def) => !!(def.passthrough || def.passthroughNonEmpty);
+
+/**
+ * @param {Node} node
+ * @return {boolean}
+ */
+const IS_EMPTY_TEXT_NODE = (node) =>
+  node.nodeType === /* TEXT_NODE */ 3 && node.nodeValue.trim().length === 0;
+
 /**
  * Wraps a Preact Component in a BaseElement class.
  *
@@ -49,38 +198,112 @@ let ChildDef;
  * subclass on purpose, you're not meant to do work in the subclass! There will
  * be very few exceptions, which is why we allow options to configure the
  * class.
+ *
+ * @template API_TYPE
  */
 export class PreactBaseElement extends AMP.BaseElement {
+  /** @override @nocollapse */
+  static R1() {
+    return true;
+  }
+
+  /** @override @nocollapse */
+  static requiresShadowDom() {
+    // eslint-disable-next-line local/no-static-this
+    return this['usesShadowDom'];
+  }
+
+  /** @override @nocollapse */
+  static usesLoading() {
+    // eslint-disable-next-line local/no-static-this
+    const Ctor = this;
+    return Ctor['loadable'];
+  }
+
+  /** @override @nocollapse */
+  static prerenderAllowed() {
+    // eslint-disable-next-line local/no-static-this
+    const Ctor = this;
+    return !Ctor.usesLoading();
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
 
+    /** @private {!JsonObject} */
+    this.defaultProps_ = dict({
+      'loading': Loading.AUTO,
+      'onReadyState': this.onReadyState_.bind(this),
+      'onPlayingState': this.updateIsPlaying_.bind(this),
+    });
+
+    /** @private {!AmpContextDef.ContextType} */
+    this.context_ = {
+      renderable: false,
+      playable: true,
+      loading: Loading.AUTO,
+      notify: () => this.mutateElement(() => {}),
+    };
+
+    /** @private {boolean} */
+    this.resetLoading_ = false;
+
+    /** @private {?API_TYPE} */
+    this.apiWrapper_ = null;
+
+    /** @private {?API_TYPE} */
+    this.currentRef_ = null;
+
+    /** @param {?API_TYPE|null} current */
+    this.refSetter_ = (current) => {
+      // The API shape **must** be consistent.
+      if (current !== null) {
+        if (this.apiWrapper_) {
+          this.checkApiWrapper_(current);
+        } else {
+          this.initApiWrapper_(current);
+        }
+      }
+      this.currentRef_ = current;
+      this.maybeUpdateReadyState_();
+    };
+
+    /** @type {?Deferred<!API_TYPE>} */
+    this.deferredApi_ = null;
+
+    /** @private {?Array} */
+    this.contextValues_ = null;
+
     /** @private {?Node} */
     this.container_ = null;
 
     /** @private {boolean} */
     this.scheduledRender_ = false;
 
-    /** @private {!Object} */
-    this.context_ = {
-      renderable: false,
-      playable: false,
-      notify: () => this.mutateElement(() => {}),
-    };
+    /** @private {?Deferred} */
+    this.renderDeferred_ = null;
 
+    /** @private @const {function()} */
     this.boundRerender_ = () => {
       this.scheduledRender_ = false;
       this.rerender_();
     };
 
-    /** @private {!Deferred|null} */
-    this.scheduledRenderDeferred_ = null;
-
-    /** @private {!JsonObject|null|undefined} */
-    this.defaultProps_ = null;
+    /** @private {boolean} */
+    this.hydrationPending_ = false;
 
     /** @private {boolean} */
-    this.mounted_ = true;
+    this.mounted_ = false;
+
+    /** @protected {?MutationObserver} */
+    this.observer = null;
+
+    /** @private {!PauseHelper} */
+    this.pauseHelper_ = new PauseHelper(element);
+
+    /** @protected {?MediaQueryProps} */
+    this.mediaQueryProps_ = null;
   }
 
   /**
@@ -91,37 +314,138 @@ export class PreactBaseElement extends AMP.BaseElement {
   init() {}
 
   /** @override */
-  buildCallback() {
-    this.defaultProps_ = this.init() || null;
+  isLayoutSupported(layout) {
+    const Ctor = this.constructor;
+    if (Ctor['layoutSizeDefined']) {
+      return (
+        isLayoutSizeDefined(layout) ||
+        // This allows a developer to specify the component's size using the
+        // user stylesheet without the help of AMP's static layout rules.
+        // Bento components use `ContainWrapper` with `contain:strict`, thus
+        // if a user stylesheet doesn't provide for the appropriate size, the
+        // element's size will be 0. The user stylesheet CSS can use
+        // fixed `width`/`height`, `aspect-ratio`, `flex`, `grid`, or any
+        // other CSS layouts coupled with `@media` queries and other CSS tools.
+        // Besides normal benefits of using plain CSS, an important feature of
+        // using this layout is that AMP does not add "sizer" elements thus
+        // keeping the user DOM clean.
+        layout == Layout.CONTAINER
+      );
+    }
+    return super.isLayoutSupported(layout);
+  }
 
-    this.scheduleRender_();
+  /** @override */
+  buildCallback() {
+    const Ctor = this.constructor;
 
-    // context-changed is fired on each child element to notify it that the
-    // parent has changed the wrapping context. This is equivalent to
-    // updating the Context.Provider with new data and having it propagate.
-    this.element.addEventListener('i-amphtml-context-changed', (e) => {
-      e.stopPropagation();
-      this.scheduleRender_();
+    this.observer = new MutationObserver(this.checkMutations_.bind(this));
+    const props = Ctor['props'];
+    const childrenInit = checkPropsFor(props, HAS_SELECTOR)
+      ? CHILDREN_MUTATION_INIT
+      : null;
+    const passthroughInit = checkPropsFor(props, HAS_PASSTHROUGH)
+      ? PASSTHROUGH_MUTATION_INIT
+      : null;
+    const templatesInit = Ctor['usesTemplate'] ? TEMPLATES_MUTATION_INIT : null;
+    this.observer.observe(this.element, {
+      attributes: true,
+      ...childrenInit,
+      ...passthroughInit,
+      ...templatesInit,
     });
 
-    // unmounted is fired on each child element to notify it that the parent
-    // has removed the element from the DOM tree. This is equivalent to React
-    // recursively calling componentWillUnmount.
-    this.element.addEventListener('i-amphtml-unmounted', (e) => {
-      e.stopPropagation();
-      this.unmount_();
+    this.mediaQueryProps_ = checkPropsFor(props, HAS_MEDIA)
+      ? new MediaQueryProps(this.win, () => this.scheduleRender_())
+      : null;
+
+    const staticProps = Ctor['staticProps'];
+    const initProps = this.init();
+    Object.assign(
+      /** @type {!Object} */ (this.defaultProps_),
+      staticProps,
+      initProps
+    );
+
+    this.checkPropsPostMutations();
+
+    // Unmount callback.
+    subscribe(this.element, [], () => {
+      return () => {
+        this.mounted_ = false;
+        if (this.container_) {
+          // We have to unmount the component to run all cleanup functions and
+          // release handlers. The only way to unmount right now is by
+          // unrendering the DOM. If the new `unmount` API becomes available, this
+          // code can be changed to `unmount` and the follow up render would
+          // have to execute the fast `hydrate` API.
+          render(null, this.container_);
+        }
+      };
     });
+
+    // Unblock rendering on first `CanRender` response. And keep the context
+    // in-sync.
+    subscribe(
+      this.element,
+      [CanRender, CanPlay, LoadingProp],
+      (canRender, canPlay, loading) => {
+        this.context_.renderable = canRender;
+        this.context_.playable = canPlay;
+        this.context_.loading = loading;
+        this.mounted_ = true;
+        this.scheduleRender_();
+      }
+    );
+
+    const useContexts = Ctor['useContexts'];
+    if (useContexts.length != 0) {
+      subscribe(this.element, useContexts, (...contexts) => {
+        this.contextValues_ = contexts;
+        this.scheduleRender_();
+      });
+    }
+
+    this.renderDeferred_ = new Deferred();
+    this.scheduleRender_();
+
+    if (Ctor['loadable']) {
+      this.setReadyState(ReadyState.LOADING);
+    }
+    this.maybeUpdateReadyState_();
+
+    return this.renderDeferred_.promise;
   }
 
   /** @override */
-  layoutCallback() {
-    const deferred =
-      this.scheduledRenderDeferred_ ||
-      (this.scheduledRenderDeferred_ = new Deferred());
-    this.context_.renderable = true;
-    this.context_.playable = true;
-    this.scheduleRender_();
-    return deferred.promise;
+  ensureLoaded() {
+    const Ctor = this.constructor;
+    if (!Ctor['loadable']) {
+      return;
+    }
+    this.mutateProps(dict({'loading': Loading.EAGER}));
+    this.resetLoading_ = true;
+  }
+
+  /** @override */
+  mountCallback() {
+    discover(this.element);
+    const Ctor = this.constructor;
+    if (Ctor['loadable'] && this.getProp('loading') != Loading.AUTO) {
+      this.mutateProps({'loading': Loading.AUTO});
+      this.resetLoading_ = false;
+    }
+  }
+
+  /** @override */
+  unmountCallback() {
+    discover(this.element);
+    const Ctor = this.constructor;
+    if (Ctor['loadable']) {
+      this.mutateProps({'loading': Loading.UNLOAD});
+    }
+    this.updateIsPlaying_(false);
+    this.mediaQueryProps_?.dispose();
   }
 
   /** @override */
@@ -136,13 +460,82 @@ export class PreactBaseElement extends AMP.BaseElement {
    * @param {!JsonObject} props
    */
   mutateProps(props) {
-    this.defaultProps_ = /** @type {!JsonObject} */ ({
-      ...this.defaultProps_,
-      ...props,
-    });
+    Object.assign(/** @type {!Object} */ (this.defaultProps_), props);
     this.scheduleRender_();
   }
 
+  /**
+   * @return {!API_TYPE}
+   * @protected
+   */
+  api() {
+    return devAssert(this.currentRef_);
+  }
+
+  /**
+   * @param {string} alias
+   * @param {function(!API_TYPE, !../service/action-impl.ActionInvocation)} handler
+   * @param {../action-constants.ActionTrust} minTrust
+   * @protected
+   */
+  registerApiAction(alias, handler, minTrust = ActionTrust.DEFAULT) {
+    this.registerAction(
+      alias,
+      (invocation) => handler(this.api(), invocation),
+      minTrust
+    );
+  }
+
+  /**
+   * A callback called immediately after mutations have been observed on a
+   * component. This differs from `checkPropsPostMutations` in that it is
+   * called in all cases of mutation.
+   * @param {!Array<MutationRecord>} unusedRecords
+   * @protected
+   */
+  mutationObserverCallback(unusedRecords) {}
+
+  /**
+   * A callback called immediately after mutations have been observed on a
+   * component's defined props. The implementation can verify if any
+   * additional properties need to be mutated via `mutateProps()` API.
+   * @protected
+   */
+  checkPropsPostMutations() {}
+
+  /**
+   * A callback called to compute props before rendering is run. The properties
+   * computed here and ephemeral and thus should not be persisted via a
+   * `mutateProps()` method.
+   * @param {!JsonObject} unusedProps
+   * @protected
+   */
+  updatePropsForRendering(unusedProps) {}
+
+  /**
+   * A callback called to check whether the element is ready for rendering.
+   * @param {!JsonObject} unusedProps
+   * @return {boolean}
+   * @protected
+   */
+  isReady(unusedProps) {
+    return true;
+  }
+
+  /**
+   * @param {!Array<!MutationRecord>} records
+   * @private
+   */
+  checkMutations_(records) {
+    const Ctor = this.constructor;
+    this.mutationObserverCallback(records);
+    const rerender = records.some((m) => shouldMutationBeRerendered(Ctor, m));
+    if (rerender) {
+      this.checkPropsPostMutations();
+      this.scheduleRender_();
+    }
+  }
+
   /** @private */
   scheduleRender_() {
     if (!this.scheduledRender_) {
@@ -152,10 +545,35 @@ export class PreactBaseElement extends AMP.BaseElement {
   }
 
   /** @private */
-  unmount_() {
-    this.mounted_ = false;
-    if (this.container_) {
-      render(<></>, this.container_);
+  maybeUpdateReadyState_() {
+    const {currentRef_: api} = this;
+
+    const apiReadyState = api?.['readyState'];
+    if (apiReadyState && apiReadyState !== this.element.readyState) {
+      this.onReadyState_(apiReadyState);
+    }
+  }
+
+  /**
+   * @param {!ReadyState} state
+   * @param {*=} opt_failure
+   * @private
+   */
+  onReadyState_(state, opt_failure) {
+    this.setReadyState(state, opt_failure);
+
+    const Ctor = this.constructor;
+    if (Ctor['unloadOnPause']) {
+      // These are typically iframe-based elements where we don't know
+      // whether a media is currently playing. So we have to assume that
+      // it is whenever the element is loaded.
+      this.updateIsPlaying_(state == ReadyState.COMPLETE);
+    }
+
+    // Reset "loading" property back to "auto".
+    if (this.resetLoading_) {
+      this.resetLoading_ = false;
+      this.mutateProps({'loading': Loading.AUTO});
     }
   }
 
@@ -168,47 +586,151 @@ export class PreactBaseElement extends AMP.BaseElement {
     }
 
     const Ctor = this.constructor;
+    const isShadow = Ctor['usesShadowDom'];
+    const lightDomTag = isShadow ? null : Ctor['lightDomTag'];
+    const isDetached = Ctor['detached'];
 
     if (!this.container_) {
-      if (Ctor['children'] || Ctor['passthrough']) {
+      const doc = this.win.document;
+      if (isShadow) {
         devAssert(
-          !Ctor['detached'],
+          !isDetached,
           'The AMP element cannot be rendered in detached mode ' +
-            'when configured with "children" or "passthrough" properties.'
+            'when "props" are configured with "children" property.'
         );
-        this.container_ = this.element.attachShadow({mode: 'open'});
+        // Check if there's a pre-constructed shadow DOM.
+        let {shadowRoot} = this.element;
+        let container = shadowRoot && childElementByTag(shadowRoot, 'c');
+        if (container) {
+          this.hydrationPending_ = true;
+        } else {
+          // Create new shadow root.
+          shadowRoot = this.element.attachShadow({
+            mode: 'open',
+            delegatesFocus: Ctor['delegatesFocus'],
+          });
+
+          // The pre-constructed shadow root is required to have the stylesheet
+          // inline. Thus, only the new shadow roots share the stylesheets.
+          const shadowCss = Ctor['shadowCss'];
+          if (shadowCss) {
+            installShadowStyle(shadowRoot, this.element.tagName, shadowCss);
+          }
 
-        // Create a slot for internal service elements i.e. "i-amphtml-sizer"
-        const serviceSlot = this.win.document.createElement('slot');
-        serviceSlot.setAttribute('name', 'i-amphtml-svc');
-        this.container_.appendChild(serviceSlot);
+          // Create container.
+          // The pre-constructed shadow root is required to have this container.
+          container = createElementWithAttributes(
+            doc,
+            'c',
+            SHADOW_CONTAINER_ATTRS
+          );
+          shadowRoot.appendChild(container);
+
+          // Create a slot for internal service elements i.e. "i-amphtml-sizer".
+          // The pre-constructed shadow root is required to have this slot.
+          const serviceSlot = createElementWithAttributes(
+            doc,
+            'slot',
+            SERVICE_SLOT_ATTRS
+          );
+          shadowRoot.appendChild(serviceSlot);
+          this.getPlaceholder()?.setAttribute('slot', SERVICE_SLOT_NAME);
+          this.getFallback()?.setAttribute('slot', SERVICE_SLOT_NAME);
+        }
+        this.container_ = container;
+
+        // Connect shadow root to the element's context.
+        setParent(shadowRoot, this.element);
+        // In Shadow DOM, only the children distributed in
+        // slots are displayed. All other children are undisplayed. We need
+        // to create a simple mechanism that would automatically compute
+        // `CanRender = false` on undistributed children.
+        addGroup(this.element, UNSLOTTED_GROUP, MATCH_ANY, /* weight */ -1);
+        setGroupProp(this.element, UNSLOTTED_GROUP, CanRender, this, false);
+      } else if (lightDomTag) {
+        this.container_ = this.element;
+        const replacement =
+          childElementByAttr(this.container_, RENDERED_ATTR) ||
+          createElementWithAttributes(doc, lightDomTag, RENDERED_ATTRS);
+        replacement[RENDERED_PROP] = true;
+        if (Ctor['layoutSizeDefined']) {
+          replacement.classList.add('i-amphtml-fill-content');
+        }
+        this.container_.appendChild(replacement);
       } else {
-        const container = this.win.document.createElement('i-amphtml-c');
+        const container = doc.createElement('i-amphtml-c');
         this.container_ = container;
         this.applyFillContent(container);
-        if (!Ctor['detached']) {
+        if (!isDetached) {
           this.element.appendChild(container);
         }
       }
     }
 
-    const props = collectProps(Ctor, this.element, this.defaultProps_);
+    // Exit early if contexts are not ready. Optional contexts will yield
+    // right away, even when `null`. The required contexts will block the
+    // `contextValues` until available.
+    const useContexts = Ctor['useContexts'];
+    const contextValues = this.contextValues_;
+    const isContextReady = useContexts.length == 0 || contextValues != null;
+    if (!isContextReady) {
+      return;
+    }
+
+    // Process attributes and children.
+    const props = collectProps(
+      Ctor,
+      this.element,
+      this.refSetter_,
+      this.defaultProps_,
+      this.mediaQueryProps_
+    );
+    this.updatePropsForRendering(props);
+
+    if (!this.isReady(props)) {
+      return;
+    }
 
     // While this "creates" a new element, diffing will not create a second
     // instance of Component. Instead, the existing one already rendered into
     // this element will be reused.
-    const v = (
-      <WithAmpContext {...this.context_}>
-        {Preact.createElement(Ctor['Component'], props)}
-      </WithAmpContext>
-    );
+    let comp = Preact.createElement(Ctor['Component'], props);
+
+    // Add contexts.
+    for (let i = 0; i < useContexts.length; i++) {
+      const Context = useContexts[i].type;
+      const value = contextValues[i];
+      if (value) {
+        comp = <Context.Provider value={value}>{comp}</Context.Provider>;
+      }
+    }
+
+    // Add AmpContext with renderable/playable proeprties.
+    const v = <WithAmpContext {...this.context_}>{comp}</WithAmpContext>;
+
+    if (this.hydrationPending_) {
+      this.hydrationPending_ = false;
+      hydrate(v, this.container_);
+    } else {
+      const replacement = lightDomTag
+        ? childElementByAttr(this.container_, RENDERED_ATTR)
+        : null;
+      if (replacement) {
+        replacement[RENDERED_PROP] = true;
+      }
+      render(v, this.container_, replacement);
+    }
 
-    render(v, this.container_);
+    // Dispatch the DOM_UPDATE event when rendered in the light DOM.
+    if (!isShadow && !isDetached) {
+      this.mutateElement(() =>
+        dispatchCustomEvent(this.element, AmpEvents.DOM_UPDATE, null)
+      );
+    }
 
-    const deferred = this.scheduledRenderDeferred_;
-    if (deferred) {
-      deferred.resolve();
-      this.scheduledRenderDeferred_ = null;
+    if (this.renderDeferred_) {
+      this.renderDeferred_.resolve();
+      this.renderDeferred_ = null;
     }
   }
 
@@ -224,6 +746,155 @@ export class PreactBaseElement extends AMP.BaseElement {
     }
     return this.defaultProps_[prop];
   }
+
+  /**
+   * Returns reference to upgraded imperative API object, as in React's
+   * useImperativeHandle.
+   *
+   * @return {!Promise<!API_TYPE>}
+   * @override
+   */
+  getApi() {
+    const api = this.apiWrapper_;
+    if (api) {
+      return Promise.resolve(api);
+    }
+    if (!this.deferredApi_) {
+      this.deferredApi_ = new Deferred();
+    }
+    return this.deferredApi_.promise;
+  }
+
+  /**
+   * Creates a wrapper around a Preact ref. The API surface exposed by this ref
+   * **must** be consistent accross all rerenders.
+   *
+   * This wrapper is necessary because every time React rerenders, it creates
+   * (depending on deps checking) a new imperative handle and sets that to
+   * `ref.current`. So if we ever returned `ref.current` directly, it could go
+   * stale by the time its actually used.
+   *
+   * @param {!API_TYPE} current
+   * @private
+   */
+  initApiWrapper_(current) {
+    const api = map();
+    const keys = Object.keys(current);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      wrapRefProperty(this, api, key);
+    }
+    this.apiWrapper_ = api;
+    if (this.deferredApi_) {
+      this.deferredApi_.resolve(api);
+      this.deferredApi_ = null;
+    }
+  }
+
+  /**
+   * Verifies that every Preact render exposes the same API surface as the previous render.
+   * If it does not, the API wrapper is syncrhonized.
+   *
+   * @param {!API_TYPE} current
+   * @private
+   */
+  checkApiWrapper_(current) {
+    if (!getMode().localDev) {
+      return;
+    }
+    // Hack around https://github.com/preactjs/preact/issues/3084
+    if (current.constructor && current.constructor.name !== 'Object') {
+      return;
+    }
+    const api = this.apiWrapper_;
+    const newKeys = Object.keys(current);
+    for (let i = 0; i < newKeys.length; i++) {
+      const key = newKeys[i];
+      devAssert(
+        hasOwn(api, key),
+        'Inconsistent Bento API shape: imperative API gained a "%s" key for %s',
+        key,
+        this.element
+      );
+    }
+    const oldKeys = Object.keys(api);
+    for (let i = 0; i < oldKeys.length; i++) {
+      const key = oldKeys[i];
+      devAssert(
+        hasOwn(current, key),
+        'Inconsistent Bento API shape: imperative API lost a "%s" key for %s',
+        key,
+        this.element
+      );
+    }
+  }
+
+  /**
+   * Dispatches an error event. Provided as a method so Preact components can
+   * call into it, while AMP components can override to trigger action services.
+   * @param {!Element} element
+   * @param {string} eventName
+   * @param {!JSONObject|string|undefined|null} detail
+   * @return {!Object}
+   */
+  triggerEvent(element, eventName, detail) {
+    dispatchCustomEvent(element, eventName, detail);
+  }
+
+  /** @override */
+  pauseCallback() {
+    const Ctor = this.constructor;
+    if (Ctor['unloadOnPause']) {
+      this.mutateProps(dict({'loading': Loading.UNLOAD}));
+      this.resetLoading_ = true;
+    } else {
+      const {currentRef_: api} = this;
+      api?.['pause']?.();
+    }
+  }
+
+  /**
+   * @param {boolean} isPlaying
+   * @private
+   */
+  updateIsPlaying_(isPlaying) {
+    this.pauseHelper_.updatePlaying(isPlaying);
+  }
+}
+
+/**
+ * @param {typeof PreactBaseElement} baseElement
+ * @param {!Object} api
+ * @param {string} key
+ */
+function wrapRefProperty(baseElement, api, key) {
+  Object.defineProperty(api, key, {
+    configurable: true,
+
+    get() {
+      return baseElement.currentRef_[key];
+    },
+
+    set(v) {
+      baseElement.currentRef_[key] = v;
+    },
+  });
+}
+
+/**
+ * Returns the upgraded imperative API object, once Preact has actually mounted.
+ *
+ * This technically works with both Bento and Legacy components, returning the
+ * BaseElement instance in the later case.
+ *
+ * @param {!Element} el
+ * @return {!Promise<!Object>}
+ */
+export function whenUpgraded(el) {
+  return el.ownerDocument.defaultView.customElements
+    .whenDefined(el.localName)
+    .then(() => el.getImpl())
+    .then((impl) => impl.getApi());
 }
 
 // Ideally, these would be Static Class Fields. But Closure can't even.
@@ -237,6 +908,51 @@ PreactBaseElement['Component'] = function () {
   devAssert(false, 'Must provide Component');
 };
 
+/**
+ * If default props are static, this can be used instead of init().
+ * @protected {!JsonObject|undefined}
+ */
+PreactBaseElement['staticProps'] = undefined;
+
+/**
+ * @protected {!Array<!ContextProp>}
+ */
+PreactBaseElement['useContexts'] = getMode().localDev ? Object.freeze([]) : [];
+
+/**
+ * Whether the component implements a loading protocol.
+ *
+ * @protected {boolean}
+ */
+PreactBaseElement['loadable'] = false;
+
+/**
+ * Whether a component should be unloaded for `pauseCallback`.
+ *
+ * @protected {boolean}
+ */
+PreactBaseElement['unloadOnPause'] = false;
+
+/**
+ * An override to specify that the component requires `layoutSizeDefined`.
+ * This typically means that the element's `isLayoutSupported()` is
+ * implemented via `isLayoutSizeDefined()`, and this is how the default
+ * `isLayoutSupported()` is implemented when this flag is set.
+ *
+ * @protected {string}
+ */
+PreactBaseElement['layoutSizeDefined'] = false;
+
+/**
+ * The tag name, e.g. "div", "span", time" that should be used as a replacement
+ * node for Preact rendering. This is the node that Preact will diff with
+ * with specified, instead of rendering a new node. Only applicable to light-DOM
+ * mapping styles.
+ *
+ * @protected {string}
+ */
+PreactBaseElement['lightDomTag'] = '';
+
 /**
  * An override to specify an exact className prop to Preact.
  *
@@ -245,13 +961,25 @@ PreactBaseElement['Component'] = function () {
 PreactBaseElement['className'] = '';
 
 /**
- * Enabling passthrough mode alters the children slotting to use a single
- * `<slot>` element for all children. This is in contrast to children mode,
- * which creates a new named `<slot>` for every child.
+ * Whether this element uses "templates" system.
+ *
+ * @protected {boolean}
+ */
+PreactBaseElement['usesTemplate'] = false;
+
+/**
+ * The CSS for shadow stylesheets.
+ *
+ * @protected {?string}
+ */
+PreactBaseElement['shadowCss'] = null;
+
+/**
+ * Whether this element uses Shadow DOM.
  *
  * @protected {boolean}
  */
-PreactBaseElement['passthrough'] = false;
+PreactBaseElement['usesShadowDom'] = false;
 
 /**
  * Enabling detached mode alters the children to be rendered in an
@@ -261,6 +989,14 @@ PreactBaseElement['passthrough'] = false;
  */
 PreactBaseElement['detached'] = false;
 
+/**
+ * This enables the 'delegatesFocus' option when creating the shadow DOM for
+ * this component.  A key feature of 'delegatesFocus' set to true is that
+ * when elements within the shadow DOM gain focus, the focus is also applied
+ * to the host element.
+ */
+PreactBaseElement['delegatesFocus'] = false;
+
 /**
  * Provides a mapping of Preact prop to AmpElement DOM attributes.
  *
@@ -269,96 +1005,225 @@ PreactBaseElement['detached'] = false;
 PreactBaseElement['props'] = {};
 
 /**
- * @protected {!Object<string, !ChildDef>|null}
+ * @param {null|string} attributeName
+ * @param {string|undefined} attributePrefix
+ * @return {boolean}
  */
-PreactBaseElement['children'] = null;
+function matchesAttrPrefix(attributeName, attributePrefix) {
+  return (
+    attributeName !== null &&
+    attributePrefix !== undefined &&
+    attributeName.startsWith(attributePrefix) &&
+    attributeName !== attributePrefix
+  );
+}
 
 /**
  * @param {typeof PreactBaseElement} Ctor
  * @param {!AmpElement} element
+ * @param {{current: ?}} ref
  * @param {!JsonObject|null|undefined} defaultProps
+ * @param {?MediaQueryProps} mediaQueryProps
  * @return {!JsonObject}
  */
-function collectProps(Ctor, element, defaultProps) {
-  const props = /** @type {!JsonObject} */ ({...defaultProps});
-
+function collectProps(Ctor, element, ref, defaultProps, mediaQueryProps) {
   const {
     'className': className,
+    'layoutSizeDefined': layoutSizeDefined,
+    'lightDomTag': lightDomTag,
     'props': propDefs,
-    'passthrough': passthrough,
-    'children': childrenDefs,
   } = Ctor;
 
+  if (mediaQueryProps) {
+    mediaQueryProps.start();
+  }
+
+  const props = /** @type {!JsonObject} */ ({...defaultProps, ref});
+
+  // Light DOM.
+  if (lightDomTag) {
+    props[RENDERED_ATTR] = true;
+    props[RENDERED_PROP] = true;
+    props['as'] = lightDomTag;
+  }
+
   // Class.
   if (className) {
     props['className'] = className;
   }
 
-  // Props.
-  for (const name in propDefs) {
-    const def = propDefs[name];
-    const value =
-      def.type == 'boolean'
-        ? element.hasAttribute(def.attr)
-        : element.getAttribute(def.attr);
-    if (value == null) {
-      props[name] = def.default;
+  // Common styles.
+  if (layoutSizeDefined) {
+    if (Ctor['usesShadowDom']) {
+      props['style'] = SIZE_DEFINED_STYLE;
     } else {
-      const v =
-        def.type == 'number'
-          ? Number(value)
-          : def.type == 'Element'
-          ? // TBD: what's the best way for element referencing compat between
-            // React and AMP? Currently modeled as a Ref.
-            {current: element.getRootNode().getElementById(value)}
-          : value;
-      props[name] = v;
+      props['className'] =
+        `i-amphtml-fill-content ${className || ''}`.trim() || null;
     }
   }
 
-  // Children.
-  // There are plain "children" and there're slotted children assigned
-  // as separate properties. Thus in a carousel the plain "children" are
-  // slides, and the "arrowNext" children are passed via a "arrowNext"
-  // property.
-  if (passthrough) {
-    devAssert(
-      !childrenDefs,
-      'only one of "passthrough" or "children" may be given'
-    );
-    props['children'] = [<Slot />];
-  } else if (childrenDefs) {
-    const children = [];
-    props['children'] = children;
+  // Props.
+  parsePropDefs(Ctor, props, propDefs, element, mediaQueryProps);
+  if (mediaQueryProps) {
+    mediaQueryProps.complete();
+  }
 
-    const nodes = element.getRealChildNodes();
+  return props;
+}
+
+/**
+ * @param {typeof PreactBaseElement} Ctor
+ * @param {!Object} props
+ * @param {!Object} propDefs
+ * @param {!Element} element
+ * @param {?MediaQueryProps} mediaQueryProps
+ */
+function parsePropDefs(Ctor, props, propDefs, element, mediaQueryProps) {
+  // Match all children defined with "selector".
+  if (checkPropsFor(propDefs, HAS_SELECTOR)) {
+    // There are plain "children" and there're slotted children assigned
+    // as separate properties. Thus in a carousel the plain "children" are
+    // slides, and the "arrowNext" children are passed via a "arrowNext"
+    // property.
+    const nodes = element.getRealChildNodes
+      ? element.getRealChildNodes()
+      : toArray(element.childNodes);
     for (let i = 0; i < nodes.length; i++) {
       const childElement = nodes[i];
-      const def = matchChild(childElement, childrenDefs);
-      if (!def) {
+      const match = matchChild(childElement, propDefs);
+      if (!match) {
         continue;
       }
-
-      const {single, name, props: slotProps = {}} = def;
+      const def = propDefs[match];
+      const {
+        as = false,
+        single,
+        name = match,
+        clone,
+        props: slotProps = {},
+      } = def;
+      devAssert(clone || Ctor['usesShadowDom']);
+      const parsedSlotProps = {};
+      parsePropDefs(
+        Ctor,
+        parsedSlotProps,
+        slotProps,
+        childElement,
+        mediaQueryProps
+      );
 
       // TBD: assign keys, reuse slots, etc.
       if (single) {
-        props[name] = createSlot(childElement, `i-amphtml-${name}`, slotProps);
+        props[name] = createSlot(
+          childElement,
+          childElement.getAttribute('slot') || `i-amphtml-${name}`,
+          parsedSlotProps,
+          as
+        );
       } else {
-        const list =
-          name == 'children' ? children : props[name] || (props[name] = []);
+        const list = props[name] || (props[name] = []);
+        devAssert(!as);
         list.push(
-          createSlot(
-            childElement,
-            `i-amphtml-${name}-${list.length}`,
-            slotProps
-          )
+          clone
+            ? createShallowVNodeCopy(childElement)
+            : createSlot(
+                childElement,
+                childElement.getAttribute('slot') ||
+                  `i-amphtml-${name}-${childIdGenerator()}`,
+                parsedSlotProps
+              )
         );
       }
     }
   }
 
-  return props;
+  for (const name in propDefs) {
+    const def = /** @type {!AmpElementPropDef} */ (propDefs[name]);
+    devAssert(
+      !!def.attr +
+        !!def.attrs +
+        !!def.attrPrefix +
+        !!def.selector +
+        !!def.passthrough +
+        !!def.passthroughNonEmpty <=
+        1,
+      ONE_OF_ERROR_MESSAGE
+    );
+    let value;
+    if (def.passthrough) {
+      devAssert(Ctor['usesShadowDom']);
+      // Use lazy loading inside the passthrough by default due to too many
+      // elements.
+      value = [<Slot loading={Loading.LAZY} />];
+    } else if (def.passthroughNonEmpty) {
+      devAssert(Ctor['usesShadowDom']);
+      // Use lazy loading inside the passthrough by default due to too many
+      // elements.
+      value = element.getRealChildNodes().every(IS_EMPTY_TEXT_NODE)
+        ? null
+        : [<Slot loading={Loading.LAZY} />];
+    } else if (def.attr) {
+      value = element.getAttribute(def.attr);
+      if (def.media && value != null) {
+        value = mediaQueryProps.resolveListQuery(String(value));
+      }
+    } else if (def.parseAttrs) {
+      devAssert(def.attrs);
+      value = def.parseAttrs(element);
+    } else if (def.attrPrefix) {
+      const currObj = {};
+      let objContains = false;
+      const attrs = element.attributes;
+      for (let i = 0; i < attrs.length; i++) {
+        const attrib = attrs[i];
+        if (matchesAttrPrefix(attrib.name, def.attrPrefix)) {
+          currObj[dashToCamelCase(attrib.name.slice(def.attrPrefix.length))] =
+            attrib.value;
+          objContains = true;
+        }
+      }
+      if (objContains) {
+        value = currObj;
+      }
+    }
+    if (value == null) {
+      if (def.default != null) {
+        props[name] = def.default;
+      }
+    } else {
+      const v =
+        def.type == 'number'
+          ? parseFloat(value)
+          : def.type == 'boolean'
+          ? parseBooleanAttribute(/** @type {string} */ (value))
+          : def.type == 'date'
+          ? getDate(value)
+          : value;
+      props[name] = v;
+    }
+  }
+}
+
+/**
+ * Copies an Element into a VNode representation.
+ * (Interpretation into VNode is not recursive, so it excludes children.)
+ * @param {!Element} element
+ * @return {!PreactDef.Renderable}
+ */
+function createShallowVNodeCopy(element) {
+  const props = {
+    // Setting `key` to an object is fine in Preact, but not React.
+    'key': element,
+  };
+  // We need to read element.attributes and element.attributes.length only once,
+  // since reading a live NamedNodeMap repeatedly is expensive.
+  const {attributes, localName} = element;
+  const {length} = attributes;
+  for (let i = 0; i < length; i++) {
+    const {name, value} = attributes[i];
+    props[name] = value;
+  }
+  return Preact.createElement(localName, props);
 }
 
 /**
@@ -372,8 +1237,69 @@ function matchChild(element, defs) {
     const def = defs[match];
     const selector = typeof def == 'string' ? def : def.selector;
     if (matches(element, selector)) {
-      return def;
+      return match;
     }
   }
   return null;
 }
+
+/**
+ * @param {!NodeList} nodeList
+ * @return {boolean}
+ */
+function shouldMutationForNodeListBeRerendered(nodeList) {
+  for (let i = 0; i < nodeList.length; i++) {
+    const node = nodeList[i];
+    if (isElement(node)) {
+      // Ignore service elements, e.g. `<i-amphtml-svc>` or
+      // `<x slot="i-amphtml-svc">`.
+      if (
+        node[RENDERED_PROP] ||
+        node.tagName.startsWith('I-') ||
+        node.getAttribute('slot') == 'i-amphtml-svc'
+      ) {
+        continue;
+      }
+      return true;
+    }
+    if (node.nodeType == /* TEXT */ 3) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * @param {typeof PreactBaseElement} Ctor
+ * @param {!MutationRecord} m
+ * @return {boolean}
+ */
+function shouldMutationBeRerendered(Ctor, m) {
+  const {type} = m;
+  if (type == 'attributes') {
+    // Check whether this is a templates attribute.
+    if (Ctor['usesTemplate'] && m.attributeName == 'template') {
+      return true;
+    }
+    // Check if the attribute is mapped to one of the properties.
+    const props = Ctor['props'];
+    for (const name in props) {
+      const def = /** @type {!AmpElementPropDef} */ (props[name]);
+      if (
+        m.attributeName == def.attr ||
+        (def.attrs && def.attrs.includes(devAssert(m.attributeName))) ||
+        matchesAttrPrefix(m.attributeName, def.attrPrefix)
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }
+  if (type == 'childList') {
+    return (
+      shouldMutationForNodeListBeRerendered(m.addedNodes) ||
+      shouldMutationForNodeListBeRerendered(m.removedNodes)
+    );
+  }
+  return false;
+}
diff --git a/src/preact/compat.js b/src/preact/compat.js
new file mode 100644
index 0000000000000..3da118400e6f2
--- /dev/null
+++ b/src/preact/compat.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as compat from /*OK*/ 'preact/compat';
+
+/**
+ * @param {function(T, {current: (R|null)}):PreactDef.Renderable} fn
+ * @return {function(T):PreactDef.Renderable}
+ * @template T, R
+ */
+export function forwardRef(fn) {
+  return compat.forwardRef(fn);
+}
+
+/**
+ * @param {PreactDef.VNode} vnode
+ * @param {HTMLElement} container
+ * @return {PreactDef.VNode}
+ */
+export function createPortal(vnode, container) {
+  return compat.createPortal(vnode, container);
+}
+
+/**
+ * @param {...PreactDef.Renderable} unusedChildren
+ * @return {!Array<PreactDef.Renderable>}
+ */
+export function toChildArray(unusedChildren) {
+  return compat.Children.toArray.apply(undefined, arguments);
+}
diff --git a/src/preact/component/3p-frame.js b/src/preact/component/3p-frame.js
new file mode 100644
index 0000000000000..fc149a3c7868b
--- /dev/null
+++ b/src/preact/component/3p-frame.js
@@ -0,0 +1,197 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {IframeEmbed} from './iframe';
+import {dict} from '../../core/types/object';
+import {forwardRef} from '../compat';
+import {
+  generateSentinel,
+  getBootstrapUrl,
+  getDefaultBootstrapBaseUrl,
+} from '../../3p-frame';
+import {
+  getOptionalSandboxFlags,
+  getRequiredSandboxFlags,
+} from '../../core/3p-frame';
+import {includes} from '../../core/types/string';
+import {parseUrlDeprecated} from '../../url';
+import {sequentialIdGenerator} from '../../core/math/id-generator';
+import {
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from '../../../src/preact';
+
+/** @type {!Object<string,function():void>} 3p frames for that type. */
+export const countGenerators = {};
+
+/** @enum {string} */
+export const MessageType = {
+  // TODO(wg-bento): Add more types as they become needed.
+  EMBED_SIZE: 'embed-size',
+};
+
+// Block synchronous XHR in ad. These are very rare, but super bad for UX
+// as they block the UI thread for the arbitrary amount of time until the
+// request completes.
+const BLOCK_SYNC_XHR = "sync-xhr 'none'";
+
+// TODO(wg-bento): UA check for required flags without iframe element
+const DEFAULT_SANDBOX =
+  getRequiredSandboxFlags().join(' ') +
+  ' ' +
+  getOptionalSandboxFlags().join(' ');
+
+/**
+ * Creates the iframe for the embed. Applies correct size and passes the embed
+ * attributes to the frame via JSON inside the fragment.
+ * @param {!IframeEmbedDef.Props} props
+ * @param {{current: (!IframeEmbedDef.Api|null)}} ref
+ * @return {PreactDef.Renderable}
+ */
+function ProxyIframeEmbedWithRef(
+  {
+    allow = BLOCK_SYNC_XHR,
+    bootstrap,
+    contextOptions,
+    excludeSandbox,
+    name: nameProp,
+    messageHandler,
+    options,
+    sandbox = DEFAULT_SANDBOX,
+    src: srcProp,
+    type,
+    title = type,
+    ...rest
+  },
+  ref
+) {
+  if (!includes(allow, BLOCK_SYNC_XHR)) {
+    throw new Error(
+      `'allow' prop must contain "${BLOCK_SYNC_XHR}". Found "${allow}".`
+    );
+  }
+
+  const contentRef = useRef(null);
+  const iframeRef = useRef(null);
+  const count = useMemo(() => {
+    if (!countGenerators[type]) {
+      countGenerators[type] = sequentialIdGenerator();
+    }
+    return countGenerators[type]();
+  }, [type]);
+
+  const [{name, src}, setNameAndSrc] = useState({name: nameProp, src: srcProp});
+  useLayoutEffect(() => {
+    const win = contentRef.current?.ownerDocument?.defaultView;
+    const src =
+      srcProp ?? (win ? getDefaultBootstrapBaseUrl(win) : 'about:blank');
+    if (nameProp) {
+      setNameAndSrc({name: nameProp, src});
+      return;
+    }
+    if (!win) {
+      return;
+    }
+    const context = Object.assign(
+      dict({
+        'location': {
+          'href': win.location.href,
+        },
+        'sentinel': generateSentinel(win),
+      }),
+      contextOptions
+    );
+    const attrs = Object.assign(
+      dict({
+        'title': title,
+        'type': type,
+        '_context': context,
+      }),
+      options
+    );
+    setNameAndSrc({
+      name: JSON.stringify(
+        dict({
+          'host': parseUrlDeprecated(src).hostname,
+          'bootstrap': bootstrap ?? getBootstrapUrl(type, win),
+          'type': type,
+          // "name" must be unique across iframes, so we add a count.
+          // See: https://github.com/ampproject/amphtml/pull/2955
+          'count': count,
+          'attributes': attrs,
+        })
+      ),
+      src,
+    });
+  }, [
+    bootstrap,
+    contextOptions,
+    count,
+    nameProp,
+    options,
+    srcProp,
+    title,
+    type,
+  ]);
+
+  useEffect(() => {
+    const iframe = iframeRef.current?.node;
+    if (!iframe) {
+      return;
+    }
+    const parent = iframe.parentNode;
+    parent.insertBefore(iframe, iframe.nextSibling);
+  }, [name]);
+
+  // Component API: IframeEmbedDef.Api.
+  useImperativeHandle(
+    ref,
+    () => ({
+      // Standard Bento
+      get readyState() {
+        return iframeRef.current?.readyState;
+      },
+      get node() {
+        return iframeRef.current?.node;
+      },
+    }),
+    []
+  );
+
+  return (
+    <IframeEmbed
+      allow={allow}
+      contentRef={contentRef}
+      messageHandler={messageHandler}
+      name={name}
+      ref={iframeRef}
+      ready={!!name}
+      sandbox={excludeSandbox ? undefined : sandbox}
+      src={src}
+      title={title}
+      {...rest}
+    />
+  );
+}
+
+const ProxyIframeEmbed = forwardRef(ProxyIframeEmbedWithRef);
+ProxyIframeEmbed.displayName = 'ProxyIframeEmbed'; // Make findable for tests.
+export {ProxyIframeEmbed};
diff --git a/src/preact/component/component.type.js b/src/preact/component/component.type.js
new file mode 100644
index 0000000000000..df5d673390984
--- /dev/null
+++ b/src/preact/component/component.type.js
@@ -0,0 +1,81 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/**
+ * @typedef {{
+ *   as: (string|!Function|undefined),
+ *   wrapperClassName: (?string|undefined),
+ *   wrapperStyle: (?Object|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+var WrapperComponentProps;
+
+/**
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/contain
+ *
+ * @typedef {{
+ *   as: (string|!Function|undefined),
+ *   size: (boolean|undefined),
+ *   layout: (boolean|undefined),
+ *   paint: (boolean|undefined),
+ *   wrapperClassName: (?string|undefined),
+ *   wrapperStyle: (?Object|undefined),
+ *   contentRef: ({current: ?}|function(!Element)|undefined),
+ *   contentClassName: (?string|undefined),
+ *   contentStyle: (?Object|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+var ContainWrapperComponentProps;
+
+/**
+ * @typedef {!PreactDef.Renderable|!PreactDef.InnerHTML|null}
+ */
+var RendererFunctionResponseType;
+
+/**
+ * @typedef {function(!JsonObject):(?RendererFunctionResponseType|!Promise<?RendererFunctionResponseType>)}
+ */
+var RendererFunctionType;
+
+/** @const */
+var IframeEmbedDef = {};
+
+/**
+ * @typedef {{
+ *   allow: (string|undefined),
+ *   allowFullScreen: (boolean|undefined),
+ *   allowTransparency: (boolean|undefined),
+ *   loading: (string),
+ *   manageMessageHandler: (function({current: HTMLIFrameElement}, function():void):function():void|undefined),
+ *   name: (string|undefined),
+ *   onReadyState: (function(string)|undefined),
+ *   ready: (boolean|undefined),
+ *   sandbox: (string|undefined),
+ *   src: (string|undefined),
+ *   title: (string|undefined),
+ * }}
+ */
+IframeEmbedDef.Props;
+
+/** @constructor */
+IframeEmbedDef.Api = function () {};
+
+/** @type {string} */
+IframeEmbedDef.Api.prototype.readyState;
diff --git a/src/preact/component/contain.js b/src/preact/component/contain.js
new file mode 100644
index 0000000000000..e17856e3313e4
--- /dev/null
+++ b/src/preact/component/contain.js
@@ -0,0 +1,104 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../';
+import {forwardRef} from '../compat';
+
+const CONTAIN = [
+  null, // 0: none
+  'paint', // 1: paint
+  'layout', // 2: layout
+  'content', // 3: content = layout + paint
+  'size', // 4: size
+  'size paint', // 5: size + paint
+  'size layout', // 6: size + layout
+  'strict', // 7: strict = size + layout + paint
+];
+
+const SIZE_CONTENT_STYLE = {
+  'position': 'relative',
+  'width': '100%',
+  'height': '100%',
+};
+
+/**
+ * The wrapper component that implements different "contain" parameters. This
+ * most often indicates that the element's size doesn't depend on its children
+ * (e.g. `contain:size`), but there might be other variances as well.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/contain
+ *
+ * Contain parameters:
+ * - size: the element's size does not depend on its content.
+ * - layout: nothing outside the element may affect its internal layout and
+ * vice versa.
+ * - paint: the element's content doesn't display outside the element's bounds.
+ * @param {!ContainWrapperComponentProps} props
+ * @param {{current: ?Element}} ref
+ * @return {PreactDef.Renderable}
+ */
+function ContainWrapperWithRef(
+  {
+    as: Comp = 'div',
+    children,
+    'className': className,
+    contentAs: ContentComp = 'div',
+    contentClassName,
+    contentProps,
+    contentRef,
+    contentStyle,
+    layout = false,
+    paint = false,
+    size = false,
+    'style': style,
+    wrapperClassName,
+    wrapperStyle,
+    ...rest
+  },
+  ref
+) {
+  // The formula: `size << 2 | layout << 1 | paint`.
+  const containIndex = (size ? 4 : 0) + (layout ? 2 : 0) + (paint ? 1 : 0);
+  return (
+    <Comp
+      {...rest}
+      ref={ref}
+      className={`${className || ''} ${wrapperClassName || ''}`.trim() || null}
+      style={{
+        ...style,
+        ...wrapperStyle,
+        contain: CONTAIN[containIndex],
+      }}
+    >
+      <ContentComp
+        {...contentProps}
+        ref={contentRef}
+        className={contentClassName}
+        style={{
+          ...(size && SIZE_CONTENT_STYLE),
+          'overflow': paint ? 'hidden' : 'visible',
+          ...contentStyle,
+        }}
+      >
+        {children}
+      </ContentComp>
+    </Comp>
+  );
+}
+
+const ContainWrapper = forwardRef(ContainWrapperWithRef);
+
+export {ContainWrapper};
diff --git a/src/preact/component/dom-handle.js b/src/preact/component/dom-handle.js
new file mode 100644
index 0000000000000..cd9dae62d628a
--- /dev/null
+++ b/src/preact/component/dom-handle.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {useImperativeHandle} from '../';
+
+/**
+ * @param {{current: ?T}} ref
+ * @param {T} node
+ * @template T
+ */
+export function useDOMHandle(ref, node) {
+  useImperativeHandle(ref, () => node, [node]);
+}
diff --git a/src/preact/component/iframe.js b/src/preact/component/iframe.js
new file mode 100644
index 0000000000000..6dc397207f8bc
--- /dev/null
+++ b/src/preact/component/iframe.js
@@ -0,0 +1,184 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact';
+import {ContainWrapper, useValueRef} from '../../../src/preact/component';
+import {Loading} from '../../../src/core/loading-instructions';
+import {ReadyState} from '../../../src/core/constants/ready-state';
+import {forwardRef} from '../../../src/preact/compat';
+import {useAmpContext, useLoading} from '../../../src/preact/context';
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+} from '../../../src/preact';
+
+const DEFAULT_MATCHES_MESSAGING_ORIGIN = () => false;
+const ABOUT_BLANK = 'about:blank';
+
+/**
+ * iframe.src = iframe.src forces an iframe reload,
+ * EXCEPT when the iframe.src contains a fragment.
+ * With a fragment it just thinks it's a hash change.
+ * @param {string} src
+ * @return {boolean}
+ * */
+const canResetSrc = (src) => src && src != ABOUT_BLANK && !src.includes('#');
+
+/**
+ * @param {!IframeEmbedDef.Props} props
+ * @param {{current: ?IframeEmbedDef.Api}} ref
+ * @return {PreactDef.Renderable}
+ */
+export function IframeEmbedWithRef(
+  {
+    allow,
+    allowFullScreen,
+    allowTransparency,
+    iframeStyle,
+    name,
+    title,
+    matchesMessagingOrigin = DEFAULT_MATCHES_MESSAGING_ORIGIN,
+    messageHandler,
+    ready = true,
+    loading: loadingProp,
+    onReadyState,
+    sandbox,
+    src,
+    ...rest
+  },
+  ref
+) {
+  const {playable} = useAmpContext();
+  const loading = useLoading(loadingProp);
+  const mount = loading !== Loading.UNLOAD;
+
+  const loadedRef = useRef(false);
+  // The `onReadyStateRef` is passed via a ref to avoid the changed values
+  // of `onReadyState` re-triggering the side effects.
+  const onReadyStateRef = useValueRef(onReadyState);
+  const setLoaded = useCallback(
+    (value) => {
+      if (value !== loadedRef.current) {
+        loadedRef.current = value;
+        const onReadyState = onReadyStateRef.current;
+        onReadyState?.(value ? ReadyState.COMPLETE : ReadyState.LOADING);
+      }
+    },
+    [onReadyStateRef]
+  );
+
+  const iframeRef = useRef(null);
+
+  // Component API: IframeEmbedDef.Api.
+  useImperativeHandle(
+    ref,
+    () => ({
+      // Standard Bento
+      get readyState() {
+        return loadedRef.current ? ReadyState.COMPLETE : ReadyState.LOADING;
+      },
+      get node() {
+        return iframeRef.current;
+      },
+    }),
+    []
+  );
+
+  // Reset readyState to "loading" when an iframe is unloaded. Has to be
+  // a `useLayoutEffect` to avoid race condition with a future "load" event.
+  // A race condition can happen when a `useEffect` would be executed
+  // after a future "load" is dispatched.
+  useLayoutEffect(() => {
+    if (!mount) {
+      setLoaded(false);
+    }
+  }, [mount, setLoaded]);
+
+  // Pause if the post goes into a "paused" context.
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!playable && iframe) {
+      const {src} = iframe;
+      // Resetting the `src` will reset the iframe and pause it. It will force
+      // the reload of the whole iframe. But it's the only reliable option
+      // to force pause.
+      if (canResetSrc(src)) {
+        iframe.src = iframe.src;
+      } else {
+        const parent = iframe.parentNode;
+        parent.insertBefore(iframe, iframe.nextSibling);
+      }
+    }
+  }, [playable]);
+
+  useLayoutEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe || !mount) {
+      return;
+    }
+
+    const handler = (event) => {
+      const iframe = iframeRef.current;
+      if (
+        !iframe ||
+        event.source != iframe.contentWindow ||
+        !matchesMessagingOrigin(event.origin)
+      ) {
+        return;
+      }
+      messageHandler(event);
+    };
+
+    const {defaultView} = iframe.ownerDocument;
+    defaultView.addEventListener('message', handler);
+    return () => defaultView.removeEventListener('message', handler);
+  }, [matchesMessagingOrigin, messageHandler, mount, ready]);
+
+  return (
+    <ContainWrapper {...rest} layout size paint>
+      {mount && ready && (
+        <iframe
+          allow={allow}
+          allowFullScreen={allowFullScreen}
+          allowTransparency={allowTransparency}
+          frameborder="0"
+          loading={loading}
+          name={name}
+          onLoad={() => setLoaded(true)}
+          part="iframe"
+          ref={iframeRef}
+          sandbox={sandbox}
+          scrolling="no"
+          src={src}
+          style={{
+            ...iframeStyle,
+            width: '100%',
+            height: '100%',
+            contentVisibility: 'auto',
+          }}
+          title={title}
+        />
+      )}
+    </ContainWrapper>
+  );
+}
+
+const IframeEmbed = forwardRef(IframeEmbedWithRef);
+IframeEmbed.displayName = 'IframeEmbed'; // Make findable for tests.
+export {IframeEmbed};
diff --git a/src/preact/component/index.js b/src/preact/component/index.js
new file mode 100644
index 0000000000000..c749a3b35564f
--- /dev/null
+++ b/src/preact/component/index.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2020 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.
+ */
+
+export {ContainWrapper} from './contain';
+export {Wrapper} from './wrapper';
+export {useRenderer} from './renderer';
+export {useValueRef} from './value-ref';
+export {useDOMHandle} from './dom-handle';
diff --git a/src/preact/component/renderer.js b/src/preact/component/renderer.js
new file mode 100644
index 0000000000000..d391d06f1a801
--- /dev/null
+++ b/src/preact/component/renderer.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {useLayoutEffect, useState} from '../';
+
+/**
+ * Runs the renderer. It's critical that the `data` argument is stable - it
+ * only changes when the actual data changes. The renderer itself is resolved
+ * in a layout effect and allows the result to be a promise.
+ *
+ * @param {?RendererFunctionType|undefined} renderer
+ * @param {!JsonObject} data
+ * @return {?RendererFunctionResponseType}
+ */
+export function useRenderer(renderer, data) {
+  const [value, setValue] = useState(
+    /** @type {?RendererFunctionResponseType} */ (null)
+  );
+
+  useLayoutEffect(() => {
+    const rendered = (renderer && renderer(data)) || null;
+    if (rendered && typeof rendered['then'] == 'function') {
+      let canceled = false;
+      rendered.then((result) => {
+        if (!canceled) {
+          setValue(result);
+        }
+      });
+      return () => {
+        canceled = true;
+      };
+    } else {
+      setValue(/** @type {?RendererFunctionResponseType} */ (rendered));
+    }
+  }, [renderer, data]);
+
+  return value;
+}
diff --git a/src/preact/component/value-ref.js b/src/preact/component/value-ref.js
new file mode 100644
index 0000000000000..d1d39f9bf1fa6
--- /dev/null
+++ b/src/preact/component/value-ref.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {useRef} from '../';
+
+/**
+ * @param {T} current
+ * @return {{current: T}}
+ * @template T
+ */
+export function useValueRef(current) {
+  const valueRef = useRef(null);
+  valueRef.current = current;
+  return valueRef;
+}
diff --git a/src/preact/component/wrapper.js b/src/preact/component/wrapper.js
new file mode 100644
index 0000000000000..e125ec8ac26be
--- /dev/null
+++ b/src/preact/component/wrapper.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../';
+import {forwardRef} from '../compat';
+
+/**
+ * The wrapper component provides the canonical wrapper for components whose
+ * size depends on the children. This is often the opposite of the
+ * `ContainWrapper`.
+ * @param {!WrapperComponentProps} props
+ * @param {{current: ?Element}} ref
+ * @return {PreactDef.Renderable}
+ */
+function WrapperWithRef(
+  {
+    as: Comp = 'div',
+    children,
+    'className': className,
+    'style': style,
+    wrapperClassName,
+    wrapperStyle,
+    ...rest
+  },
+  ref
+) {
+  return (
+    <Comp
+      {...rest}
+      ref={ref}
+      className={`${className || ''} ${wrapperClassName || ''}`.trim() || null}
+      style={{...style, ...wrapperStyle}}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+const Wrapper = forwardRef(WrapperWithRef);
+
+export {Wrapper};
diff --git a/src/preact/context.js b/src/preact/context.js
index e1c2ac63fe313..de810325990bb 100644
--- a/src/preact/context.js
+++ b/src/preact/context.js
@@ -15,7 +15,8 @@
  */
 
 import * as Preact from './index';
-import {createContext, useContext} from './index';
+import {Loading, reducer as loadingReducer} from '../core/loading-instructions';
+import {createContext, useContext, useMemo} from './index';
 
 /** @type {PreactDef.Context} */
 let context;
@@ -29,14 +30,15 @@ let context;
  * - playable: whether the playback is allowed in this vDOM area. If playback
  *   is not allow, the component must immediately stop the playback.
  *
- * @return {!PreactDef.Context}
+ * @return {!PreactDef.Context<AmpContextDef.ContextType>}
  */
-export function getAmpContext() {
+function getAmpContext() {
   return (
     context ||
     (context = createContext({
-      'renderable': true,
-      'playable': true,
+      renderable: true,
+      playable: true,
+      loading: Loading.AUTO,
     }))
   );
 }
@@ -44,18 +46,53 @@ export function getAmpContext() {
 /**
  * A wrapper-component that recalculates and propagates AmpContext properties.
  *
- * @param {!JsonObject} props
+ * @param {!AmpContextDef.ProviderProps} props
  * @return {!PreactDef.VNode}
  */
-export function WithAmpContext(props) {
+export function WithAmpContext({
+  children,
+  loading: loadingProp = 'auto',
+  notify: notifyProp,
+  playable: playableProp = true,
+  renderable: renderableProp = true,
+}) {
+  const parent = useAmpContext();
+  const renderable = renderableProp && parent.renderable;
+  const playable = renderable && playableProp && parent.playable;
+  const loading = loadingReducer(
+    renderable ? Loading.AUTO : Loading.LAZY,
+    loadingReducer(loadingProp, parent.loading)
+  );
+  const notify = notifyProp || parent.notify;
+  const current = useMemo(
+    () =>
+      /** @type {!AmpContextDef.ContextType} */ ({
+        renderable,
+        playable,
+        loading,
+        notify,
+      }),
+    [renderable, playable, loading, notify]
+  );
   const AmpContext = getAmpContext();
-  const parent = useContext(AmpContext);
-  const current = {
-    ...props,
-    'renderable': parent['renderable'] && props['renderable'],
-    'playable': parent['playable'] && props['playable'],
-    'children': undefined,
-  };
+  return <AmpContext.Provider children={children} value={current} />;
+}
 
-  return <AmpContext.Provider children={props['children']} value={current} />;
+/**
+ * @return {!AmpContextDef.ContextType}
+ */
+export function useAmpContext() {
+  const AmpContext = getAmpContext();
+  return useContext(AmpContext);
+}
+
+/**
+ * Whether the calling component should currently be in the loaded state.
+ *
+ * @param {!Loading|string} loadingProp
+ * @return {boolean}
+ */
+export function useLoading(loadingProp) {
+  const {loading: loadingContext} = useAmpContext();
+  return loadingReducer(loadingProp, loadingContext);
 }
diff --git a/src/preact/context.type.js b/src/preact/context.type.js
new file mode 100644
index 0000000000000..60502f4ac7e7e
--- /dev/null
+++ b/src/preact/context.type.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2020 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.
+ */
+
+/** @externs */
+
+/** @const */
+var AmpContextDef = {};
+
+/**
+ * @typedef {{
+ *   renderable: boolean,
+ *   playable: boolean,
+ *   loading: string,
+ *   notify: (function()|undefined),
+ * }}
+ */
+AmpContextDef.ContextType;
+
+/**
+ * @typedef {{
+ *   renderable: (boolean|undefined),
+ *   playable: (boolean|undefined),
+ *   loading: (string|undefined),
+ *   notify: (function()|undefined),
+ *   children: (?PreactDef.Renderable|undefined),
+ * }}
+ */
+AmpContextDef.ProviderProps;
diff --git a/src/preact/index.js b/src/preact/index.js
index a64a41ace67e5..b4ae55833b45d 100644
--- a/src/preact/index.js
+++ b/src/preact/index.js
@@ -16,13 +16,15 @@
 
 import * as hooks from /*OK*/ 'preact/hooks';
 import * as preact from /*OK*/ 'preact';
+// The preactDOM name is explicit, so we can remap to react-dom.
+import * as preactDOM from /*OK*/ 'preact/dom';
 
 // Defines the type interfaces for the approved Preact APIs.
-// TODO: hydrate, isValidElement, Component, cloneElement, toChildArray
+// TODO: isValidElement, Component
 
 /**
  * @param {!PreactDef.FunctionalComponent|string} unusedType
- * @param {(!Object|null)=} unusedProps
+ * @param {?Object=} unusedProps
  * @param {...*} var_args
  * @return {!PreactDef.VNode}
  */
@@ -30,16 +32,35 @@ export function createElement(unusedType, unusedProps, var_args) {
   return preact.createElement.apply(undefined, arguments);
 }
 
+/**
+ * @param {!PreactDef.VNode} unusedElement
+ * @param {?Object=} unusedProps
+ * @param {...PreactDef.Renderable} unusedChildren
+ * @return {!PreactDef.VNode}
+ */
+export function cloneElement(unusedElement, unusedProps, unusedChildren) {
+  return preact.cloneElement.apply(undefined, arguments);
+}
+
+/**
+ * @param {?PreactDef.VNode} vnode
+ * @param {Node} container
+ * @param {?Node=} opt_replaceNode
+ */
+export function render(vnode, container, opt_replaceNode) {
+  preactDOM.render(vnode, container, opt_replaceNode);
+}
+
 /**
  * @param {!PreactDef.VNode} vnode
  * @param {Node} container
  */
-export function render(vnode, container) {
-  preact.render(vnode, container, undefined);
+export function hydrate(vnode, container) {
+  preactDOM.hydrate(vnode, container);
 }
 
 /**
- * @param {!JsonObject} props
+ * @param {?Object=} props
  * @return {PreactDef.Renderable}
  */
 export function Fragment(props) {
@@ -47,7 +68,7 @@ export function Fragment(props) {
 }
 
 /**
- * @return {{current: (T|null)}}
+ * @return {{current: ?T}}
  * @template T
  */
 export function createRef() {
@@ -55,15 +76,17 @@ export function createRef() {
 }
 
 /**
- * @param {!Object} value
- * @return {!PreactDef.Context}
+ * @param {T} value
+ * @return {!PreactDef.Context<T>}
+ * @template T
  */
 export function createContext(value) {
-  return preact.createContext(value);
+  // TODO(preactjs/preact#2736): Remove once Preact's API is fixed.
+  return preact.createContext(value, undefined);
 }
 
 // Defines the type interfaces for the approved Preact Hooks APIs.
-// TODO: useReducer, useImperativeHandle, useDebugValue, useErrorBoundary
+// TODO: useReducer, useDebugValue, useErrorBoundary
 
 /**
  * @param {S|function():S} initial
@@ -75,8 +98,8 @@ export function useState(initial) {
 }
 
 /**
- * @param {T|null} initial
- * @return {{current: (T|null)}}
+ * @param {?T} initial
+ * @return {{current: ?T}}
  * @template T
  */
 export function useRef(initial) {
@@ -100,8 +123,9 @@ export function useLayoutEffect(effect, opt_deps) {
 }
 
 /**
- * @param {PreactDef.Context} context
- * @return {!JsonObject}
+ * @param {PreactDef.Context<T>} context
+ * @return {T}
+ * @template T
  */
 export function useContext(context) {
   return hooks.useContext(context);
@@ -118,11 +142,22 @@ export function useMemo(cb, opt_deps) {
 }
 
 /**
- * @param {function(...*):T|undefined} cb
+ * @param {T} cb
  * @param {!Array<*>=} opt_deps
- * @return {function(...*):T|undefined}
+ * @return {T}
  * @template T
  */
 export function useCallback(cb, opt_deps) {
   return hooks.useCallback(cb, opt_deps);
 }
+
+/**
+ * @param {{current: ?T}} ref
+ * @param {function():T} create
+ * @param {!Array<*>=} opt_deps
+ * @return {undefined}
+ * @template T
+ */
+export function useImperativeHandle(ref, create, opt_deps) {
+  return hooks.useImperativeHandle(ref, create, opt_deps);
+}
diff --git a/src/preact/slot.js b/src/preact/slot.js
index 4f88f3375c22a..82fbdf08e2b8e 100644
--- a/src/preact/slot.js
+++ b/src/preact/slot.js
@@ -15,23 +15,53 @@
  */
 
 import * as Preact from './index';
-import {dev} from '../log';
-import {getAmpContext} from './context';
-import {matches, toggleAttribute} from '../dom';
-import {objectsEqualShallow} from '../utils/object';
-import {toArray} from '../types';
-import {useContext, useEffect, useRef} from './index';
-import {useMountEffect} from './utils';
+import {CanPlay, CanRender, LoadingProp} from '../context/contextprops';
+import {Loading} from '../core/loading-instructions';
+import {devAssert} from '../core/assert';
+import {isElement} from '../core/types';
+import {
+  loadAll,
+  pauseAll,
+  unmountAll,
+} from '../utils/resource-container-helper';
+import {objectsEqualShallow} from '../core/types/object';
+import {rediscoverChildren, removeProp, setProp} from '../context';
+import {useAmpContext} from './context';
+import {useEffect, useLayoutEffect, useRef} from './index';
+
+const EMPTY = {};
+
+/** @const {WeakMap<Element, {oldDefauls: (!Object|undefined), component: Component}>} */
+const cache = new WeakMap();
 
 /**
  * @param {!Element} element
  * @param {string} name
- * @param {!Object|undefined} props
- * @return {!PreactDef.VNode}
+ * @param {!Object|undefined} defaultProps
+ * @param {boolean|undefined} as
+ * @return {!PreactDef.VNode|!PreactDef.FunctionalComponent}
  */
-export function createSlot(element, name, props) {
+export function createSlot(element, name, defaultProps, as = false) {
   element.setAttribute('slot', name);
-  return <Slot {...(props || {})} name={name} />;
+  if (!as) {
+    return <Slot {...(defaultProps || EMPTY)} name={name} />;
+  }
+
+  const cached = cache.get(element);
+  if (cached && objectsEqualShallow(cached.oldProps, defaultProps)) {
+    return cached.component;
+  }
+
+  /**
+   * @param {!Object|undefined} props
+   * @return {!PreactDef.VNode}
+   */
+  function SlotWithProps(props) {
+    return <Slot {...(defaultProps || EMPTY)} name={name} {...props} />;
+  }
+  cache.set(element, {oldProps: defaultProps, component: SlotWithProps});
+
+  return SlotWithProps;
 }
 
 /**
@@ -41,138 +71,92 @@ export function createSlot(element, name, props) {
  * @return {!PreactDef.VNode}
  */
 export function Slot(props) {
-  const context = useContext(getAmpContext());
   const ref = useRef(/** @type {?Element} */ (null));
-  const slotProps = {...props, ref};
-  useEffect(() => {
-    const slot = dev().assertElement(ref.current);
-    const assignedElements = getAssignedElements(props, slot);
-    slot.__assignedElements = assignedElements;
-
-    // TBD: Just for debug for now. but maybe can also be used for hydration?
-    slot.setAttribute('i-amphtml-context', JSON.stringify(context));
-    // TODO: remove debug info.
-    assignedElements.forEach((node) => {
-      node.__assignedSlot = slot;
-      node.setAttribute('i-amphtml-context', JSON.stringify(context));
-    });
-
-    // Retarget slots and content.
-    if (props['retarget']) {
-      // TBD: retargetting here is for:
-      // 1. `disabled` doesn't apply inside subtrees. This makes it more like
-      //    `hidden`. Similarly do other attributes.
-      // 2. Re-propagate click events to slots since React stops propagation.
-      //    See https://github.com/facebook/react/issues/9242.
-      assignedElements.forEach((node) => {
-        // Basic attributes:
-        const {attributes} = slot;
-        for (let i = 0, l = attributes.length; i < l; i++) {
-          const {name, value} = attributes[i];
-          if (
-            name == 'name' ||
-            name == 'class' ||
-            name == 'style' ||
-            name == 'i-amphtml-context'
-          ) {
-            // This is the slot's name or other internal attributes.
-          } else {
-            // TBD: switch to explicit definition of "supported" attributes.
-            node.setAttribute(name, value);
-          }
-        }
-        // Boolean attributes:
-        node.disabled = slot.hasAttribute('disabled');
-        node.hidden = slot.hasAttribute('hidden');
-        toggleAttribute(node, 'selected', slot.hasAttribute('selected'));
-        toggleAttribute(node, 'expanded', slot.hasAttribute('expanded'));
-        if (!node['i-amphtml-event-distr']) {
-          node['i-amphtml-event-distr'] = true;
-          node.addEventListener('click', (e) => {
-            // Stop propagation on the original event to avoid deliving this
-            // event twice with frameworks that correctly work with composed
-            // boundaries.
-            e.stopPropagation();
-            e.preventDefault();
-            const event = new Event('click', {
-              bubbles: true,
-              cancelable: true,
-              composed: false,
-            });
-            slot.dispatchEvent(event);
-          });
-        }
-      });
-    }
 
-    const oldContext = slot['i-amphtml-context'];
-    if (!objectsEqualShallow(oldContext, context)) {
-      slot['i-amphtml-context'] = context;
-      // TODO: Switch to fast child-node discover. See Revamp for the algo.
-      const affectedNodes = [];
-      assignedElements.forEach((node) => {
-        node['i-amphtml-context'] = context;
-        affectedNodes.push.apply(affectedNodes, getAmpElements(node));
-      });
-      affectedNodes.forEach((node) => {
-        const event = new Event('i-amphtml-context-changed', {
-          bubbles: false,
-          cancelable: true,
-          composed: true,
-        });
-        event.data = context;
-        node.dispatchEvent(event);
-      });
-    }
+  useSlotContext(ref, props);
 
+  useEffect(() => {
     // Post-rendering cleanup, if any.
     if (props['postRender']) {
       props['postRender']();
     }
   });
 
-  // Register an unmount listener. This can't be joined with the previous
-  // useEffect, because it must only be run once while the previous needs to
-  // run every render.
-  useMountEffect(() => {
-    const slot = dev().assertElement(ref.current);
+  return <slot {...props} ref={ref} />;
+}
+
+/**
+ * @param {{current:?}} ref
+ * @param {!JsonObject=} opt_props
+ */
+export function useSlotContext(ref, opt_props) {
+  const {'loading': loading} = opt_props || EMPTY;
+  const context = useAmpContext();
+
+  // Context changes.
+  useLayoutEffect(() => {
+    const slot = ref.current;
+    devAssert(isElement(slot), 'Element expected');
+
+    setProp(slot, CanRender, Slot, context.renderable);
+    setProp(slot, CanPlay, Slot, context.playable);
+    setProp(
+      slot,
+      LoadingProp,
+      Slot,
+      /** @type {!./core/loading-instructions.Loading} */ (context.loading)
+    );
+
+    if (!context.playable) {
+      execute(slot, pauseAll);
+    }
 
     return () => {
-      const affectedNodes = [];
-      getAssignedElements(props, slot).forEach((node) => {
-        affectedNodes.push.apply(affectedNodes, getAmpElements(node));
-      });
-      affectedNodes.forEach((node) => {
-        const event = new Event('i-amphtml-unmounted', {
-          bubbles: false,
-          cancelable: true,
-          composed: true,
-        });
-        node.dispatchEvent(event);
-      });
+      removeProp(slot, CanRender, Slot);
+      removeProp(slot, CanPlay, Slot);
+      removeProp(slot, LoadingProp, Slot);
+      rediscoverChildren(slot);
     };
-  });
+  }, [ref, context]);
+
+  // Mount and unmount. Keep it at the bottom because it's much better to
+  // execute `pause` before `unmount` in this case.
+  // This has to be a layout-effect to capture the old `Slot.assignedElements`
+  // before the browser undistributes them.
+  useLayoutEffect(() => {
+    const slot = ref.current;
+    devAssert(isElement(slot), 'Element expected');
+
+    // Mount children, unless lazy loading requested. If so the element should
+    // use `BaseElement.setAsContainer`.
+    if (loading != Loading.LAZY) {
+      // TODO(#31915): switch to `mount`.
+      execute(slot, loadAll);
+    }
 
-  return <slot {...slotProps} />;
+    return () => {
+      execute(slot, unmountAll);
+    };
+  }, [ref, loading]);
 }
 
 /**
- * @param {!Element} root
- * @return {!Array<!Node>}
+ * @param {!Element} slot
+ * @param {function(!AmpElement):void|function(!Array<!AmpElement>):void} action
  */
-function getAmpElements(root) {
-  const elements = toArray(root.querySelectorAll('.i-amphtml-element'));
-  if (matches(root, '.i-amphtml-element')) {
-    elements.unshift(root);
+function execute(slot, action) {
+  const assignedElements = slot.assignedElements
+    ? slot.assignedElements()
+    : slot;
+  if (Array.isArray(assignedElements) && assignedElements.length == 0) {
+    return;
   }
-  return elements;
-}
 
-/**
- * @param {!Object} props
- * @param {!Element} slotElement
- * @return {!Array<!Element>}
- */
-function getAssignedElements(props, slotElement) {
-  return props.assignedElements || toArray(slotElement.assignedElements());
+  const win = slot.ownerDocument.defaultView;
+  if (!win) {
+    return;
+  }
+
+  const scheduler = win.requestIdleCallback || win.setTimeout;
+  scheduler(() => action(assignedElements));
 }
diff --git a/src/preact/storybook/Context.js b/src/preact/storybook/Context.js
new file mode 100644
index 0000000000000..2d1f3925b22ba
--- /dev/null
+++ b/src/preact/storybook/Context.js
@@ -0,0 +1,95 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../';
+import {WithAmpContext, useAmpContext, useLoading} from '../context';
+import {boolean, select, withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: '0/Context',
+  decorators: [withKnobs],
+};
+
+const IMG_SRC =
+  "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E";
+
+const LOADING_OPTIONS = ['auto', 'lazy', 'eager', 'unload'];
+
+export const _default = () => {
+  const renderable = boolean('top renderable', true);
+  const playable = boolean('top playable', true);
+  const loading = select('top loading', LOADING_OPTIONS, LOADING_OPTIONS[0]);
+  return (
+    <WithAmpContext
+      renderable={renderable}
+      playable={playable}
+      loading={loading}
+    >
+      <Composite />
+    </WithAmpContext>
+  );
+};
+
+/**
+ * @return {PreactDef.Renderable}
+ */
+function Composite() {
+  return (
+    <div class="composite">
+      <Info title="Default" />
+      <WithAmpContext renderable={false}>
+        <Info title="Context: non-renderable" />
+      </WithAmpContext>
+      <WithAmpContext playable={false}>
+        <Info title="Context: non-playable" />
+      </WithAmpContext>
+      <Info title="Prop: loading = lazy" loading="lazy" />
+    </div>
+  );
+}
+
+/**
+ * @param {{title: string, loading: string}} props
+ * @return {PreactDef.Renderable}
+ */
+function Info({loading: loadingProp, title, ...rest}) {
+  const {loading: loadingContext, playable, renderable} = useAmpContext();
+  const loading = useLoading(loadingProp);
+  const load = loading != 'unload';
+  const infoStyle = {border: '1px dotted gray', margin: 8};
+  const imgStyle = {
+    marginLeft: 8,
+    width: 20,
+    height: 20,
+    verticalAlign: 'bottom',
+  };
+  return (
+    <section {...rest} style={infoStyle}>
+      <h3>{title}:</h3>
+      <div>
+        <div>context.renderable: {String(renderable)}</div>
+        <div>context.playable: {String(playable)}</div>
+        <div>context.loading: {String(loadingContext)}</div>
+        <div>useLoading.loading: {String(loading)}</div>
+        <div>load: {String(load)}</div>
+        <div>
+          img: {String(load)}
+          <img src={load ? IMG_SRC : undefined} style={imgStyle} />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/preact/storybook/Wrappers.js b/src/preact/storybook/Wrappers.js
new file mode 100644
index 0000000000000..e3f219321d76e
--- /dev/null
+++ b/src/preact/storybook/Wrappers.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../';
+import {ContainWrapper, Wrapper} from '../component';
+import {boolean, object, text, withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: '0/Wrappers',
+  decorators: [withKnobs],
+};
+
+export const wrapper = () => {
+  const asProp = text('As', 'span');
+  const className = text('className', '');
+  const style = object('style', {border: '1px solid'});
+  const wrapperClassName = text('wrapperClassName', '');
+  const wrapperStyle = object('wrapperStyle', {});
+  const ariaLabel = text('ariaLabel', 'aria label');
+  return (
+    <Wrapper
+      as={asProp}
+      className={className}
+      style={style}
+      wrapperClassName={wrapperClassName}
+      wrapperStyle={wrapperStyle}
+      aria-label={ariaLabel}
+    >
+      content
+    </Wrapper>
+  );
+};
+
+export const containWrapper = () => {
+  const asProp = text('As', 'div');
+  const className = text('className', '');
+  const style = object('style', {border: '1px solid', width: 200, height: 50});
+  const wrapperClassName = text('wrapperClassName', '');
+  const wrapperStyle = object('wrapperStyle', {padding: 4});
+  const contentClassName = text('contentClassName', 'content');
+  const contentStyle = object('contentStyle', {border: '1px dotted'});
+  const size = boolean('size', true);
+  const layout = boolean('layout', true);
+  const paint = boolean('paint', true);
+  const ariaLabel = text('ariaLabel', 'aria label');
+  return (
+    <ContainWrapper
+      as={asProp}
+      className={className}
+      style={style}
+      wrapperClassName={wrapperClassName}
+      wrapperStyle={wrapperStyle}
+      contentClassName={contentClassName}
+      contentStyle={contentStyle}
+      size={size}
+      layout={layout}
+      paint={paint}
+      aria-label={ariaLabel}
+    >
+      content
+    </ContainWrapper>
+  );
+};
diff --git a/src/preact/utils.js b/src/preact/utils.js
index 80a6334dee646..c0e7a68000c7d 100644
--- a/src/preact/utils.js
+++ b/src/preact/utils.js
@@ -14,35 +14,15 @@
  * limitations under the License.
  */
 
-import {getAmpContext} from './context';
-import {useContext, useEffect, useLayoutEffect} from './index';
-
-/**
- * @param {function()} callback
- */
-export function useMountEffect(callback) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(callback, [
-    /* mount-only effect*/
-  ]);
-}
-
-/**
- * @param {function()} callback
- */
-export function useMountLayoutEffect(callback) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useLayoutEffect(callback, [
-    /* mount-only effect*/
-  ]);
-}
+import {useAmpContext} from './context';
+import {useLayoutEffect} from './index';
 
 /**
  * Notifies Resources (if present) of a rerender in the component.
  * Every functional component **must** use this helper.
  */
 export function useResourcesNotify() {
-  const {'notify': notify} = useContext(getAmpContext());
+  const {notify} = useAmpContext();
   useLayoutEffect(() => {
     if (notify) {
       notify();
diff --git a/src/preconnect.js b/src/preconnect.js
index 2a50b0d673067..5cd8bc1abef0b 100644
--- a/src/preconnect.js
+++ b/src/preconnect.js
@@ -24,8 +24,7 @@ import {dev} from './log';
 import {htmlFor} from './static-template';
 import {parseUrlDeprecated} from './url';
 import {registerServiceBuilder} from './service';
-import {startsWith} from './string';
-import {whenDocumentComplete} from './document-ready';
+import {whenDocumentComplete} from './core/document-ready';
 
 const ACTIVE_CONNECTION_TIMEOUT_MS = 180 * 1000;
 const PRECONNECT_TIMEOUT_MS = 10 * 1000;
@@ -267,7 +266,7 @@ export class PreconnectService {
    * @return {boolean}
    */
   isInterestingUrl_(url) {
-    if (startsWith(url, 'https:') || startsWith(url, 'http:')) {
+    if (url.startsWith('https:') || url.startsWith('http:')) {
       return true;
     }
     return false;
diff --git a/src/purifier/README.md b/src/purifier/README.md
index 19914268639e8..013738bceb314 100644
--- a/src/purifier/README.md
+++ b/src/purifier/README.md
@@ -1,24 +1,14 @@
 # AMP Purifier
 
-[![npm package](https://img.shields.io/npm/v/@ampproject/purifier)](https://www.npmjs.com/package/@ampproject/purifier)
-
 The AMP Purifier library contains an AMP-specific configuration for [DOMPurify](https://github.com/cure53/DOMPurify).
 
 This library is internally used by [`amp-mustache`](https://amp.dev/documentation/components/amp-mustache/)
 to sanitize rendered Mustache.js templates before displaying them.
 
-## Installation
-
-Install via:
-
-```sh
-npm i @ampproject/purifier
-```
-
 ## Usage
 
 ```js
-import {Purifier} from '@ampproject/purifier';
+import {Purifier} from './src/purifier/purifier';
 
 const purifier = new Purifier(document);
 purifier.purifyHtml('a<script>b</script>c'); // "ac"
@@ -28,7 +18,7 @@ purifier.purifyHtml('a<script>b</script>c'); // "ac"
 
 ```js
 import Mustache from 'mustache';
-import {Purifier} from '@ampproject/purifier';
+import {Purifier} from '../../../src/purifier/purifier';
 
 const purifier = new Purifier(document);
 const _unescapedValue = Mustache.Writer.prototype.unescapedValue;
@@ -70,9 +60,9 @@ _Optional_
 A function that, if provided, will be called for every sanitized attribute in
 the output to change its value. It accepts the following attributes:
 
-- `tagName` - name of tag containing the attribute
-- `attrName` - name of attribute
-- `attrValue` - current attribute value
+-   `tagName` - name of tag containing the attribute
+-   `attrName` - name of attribute
+-   `attrValue` - current attribute value
 
 The returned value of this function is used as the new attribute value.
 
diff --git a/src/purifier/noop.js b/src/purifier/noop.js
index 7f1bb9979c8da..84edf84eb2059 100644
--- a/src/purifier/noop.js
+++ b/src/purifier/noop.js
@@ -14,10 +14,12 @@
  * limitations under the License.
  */
 
+import {isElement} from '../core/types';
+
 export function dev() {
   return {
     assertElement: element => {
-      console.assert(element && element.nodeType == 1, 'Element expected');
+      console.assert(isElement(element), 'Element expected');
       return element;
     },
   };
diff --git a/src/purifier/package.json b/src/purifier/package.json
deleted file mode 100644
index cfe7338be5db1..0000000000000
--- a/src/purifier/package.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "name": "@ampproject/purifier",
-  "version": "1.0.2",
-  "description": "AMP-specific sanitization library",
-  "author": "The AMP HTML Authors",
-  "license": "Apache-2.0",
-  "main": "dist/purifier.js",
-  "module": "dist/purifier.mjs",
-  "types": "purifier.d.ts",
-  "files": ["dist/*", "purifier.d.ts"],
-  "scripts": {
-    "build": "rollup -c rollup.config.js"
-  },
-  "keywords": ["amp", "sanitizer", "sanitize", "purify"],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ampproject/amphtml.git",
-    "directory": "src/purifier"
-  },
-  "homepage": "https://github.com/ampproject/amphtml/tree/master/src/purifier",
-  "devDependencies": {
-    "@rollup/plugin-alias": "3.1.0",
-    "rollup": "2.10.0"
-  },
-  "dependencies": {
-    "dompurify": "2.0.7"
-  },
-  "optionalDependencies": {
-    "@types/dompurify": "2.0.2"
-  }
-}
diff --git a/src/purifier/purifier.js b/src/purifier/purifier.js
index ffc3f6351793d..1dd0d46dcd6de 100644
--- a/src/purifier/purifier.js
+++ b/src/purifier/purifier.js
@@ -25,10 +25,10 @@ import {
   isValidAttr,
   markElementForDiffing,
 } from './sanitation';
-import {dev, user} from '../log';
+import {devAssertElement} from '../core/assert';
 import {isAmp4Email} from '../format';
 import {removeElement} from '../dom';
-import {startsWith} from '../string';
+import {user} from '../log';
 import purify from 'dompurify';
 
 /** @private @const {string} */
@@ -156,7 +156,7 @@ export class Purifier {
    *
    * @param {!Node} node
    * @param {string} attr Lower-case attribute name.
-   * @param {string|null} value
+   * @param {?string} value
    * @return {boolean}
    */
   validateAttributeChange(node, attr, value) {
@@ -199,7 +199,7 @@ export class Purifier {
       // This is OK but we ought to contribute new hooks and remove this.
       const attrsByTags = ALLOWLISTED_ATTRS_BY_TAGS[tag];
       const allowlistedForTag = attrsByTags && attrsByTags.includes(attr);
-      if (!allowlistedForTag && !startsWith(tag, 'amp-')) {
+      if (!allowlistedForTag && !tag.startsWith('amp-')) {
         return false;
       }
     }
@@ -239,13 +239,13 @@ export class Purifier {
       allowedTags = data.allowedTags;
 
       // Allow all AMP elements.
-      if (startsWith(tagName, 'amp-')) {
+      if (tagName.startsWith('amp-')) {
         // Enforce AMP4EMAIL tag allowlist at runtime.
         allowedTags[tagName] = !isEmail || EMAIL_ALLOWLISTED_AMP_TAGS[tagName];
       }
       // Set `target` attribute for <a> tags if necessary.
       if (tagName === 'a') {
-        const element = dev().assertElement(node);
+        const element = devAssertElement(node);
         if (element.hasAttribute('href') && !element.hasAttribute('target')) {
           element.setAttribute('target', '_top');
         }
@@ -254,7 +254,7 @@ export class Purifier {
       const allowlist = ALLOWLISTED_TAGS_BY_ATTRS[tagName];
       if (allowlist) {
         const {attribute, values} = allowlist;
-        const element = dev().assertElement(node);
+        const element = devAssertElement(node);
         if (
           element.hasAttribute(attribute) &&
           values.includes(element.getAttribute(attribute))
@@ -305,7 +305,7 @@ export class Purifier {
 
       // Allow all attributes for AMP elements. This avoids the need to allowlist
       // nonstandard attributes for every component e.g. amp-lightbox[scrollable].
-      const isAmpElement = startsWith(tagName, 'amp-');
+      const isAmpElement = tagName.startsWith('amp-');
       if (isAmpElement) {
         allowAttribute();
       } else {
@@ -353,7 +353,7 @@ export class Purifier {
           /* opt_purify */ true
         )
       ) {
-        if (attrRewrite && attrValue && !startsWith(attrName, BIND_PREFIX)) {
+        if (attrRewrite && attrValue && !attrName.startsWith(BIND_PREFIX)) {
           attrValue = attrRewrite(tagName, attrName, attrValue);
         }
       } else {
@@ -392,7 +392,7 @@ export class Purifier {
         ['href', 'xlink:href'].forEach((attr) => {
           if (
             element.hasAttribute(attr) &&
-            !startsWith(element.getAttribute(attr), '#')
+            !element.getAttribute(attr).startsWith('#')
           ) {
             removeElement(element);
             user().error(
@@ -483,7 +483,7 @@ function bindingTypeForAttr(attrName) {
   if (attrName[0] == '[' && attrName[attrName.length - 1] == ']') {
     return BindingType.CLASSIC;
   }
-  if (startsWith(attrName, BIND_PREFIX)) {
+  if (attrName.startsWith(BIND_PREFIX)) {
     return BindingType.ALTERNATIVE;
   }
   return BindingType.NONE;
diff --git a/src/purifier/sanitation.js b/src/purifier/sanitation.js
index 8fb9c06da0e6c..49448264271c3 100644
--- a/src/purifier/sanitation.js
+++ b/src/purifier/sanitation.js
@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-import {dict, map} from '../utils/object';
+import {dict, map} from '../core/types/object';
 import {isAmp4Email} from '../format';
 import {isUrlAttribute} from '../url-rewrite';
-import {startsWith} from '../string';
 
 /** @const {string} */
 export const BIND_PREFIX = 'data-amp-bind-';
@@ -48,7 +47,7 @@ export const DIFFABLE_AMP_ELEMENTS = {
  * @param {function(): string} generateKey
  */
 export function markElementForDiffing(element, generateKey) {
-  const isAmpElement = startsWith(element.tagName, 'AMP-');
+  const isAmpElement = element.tagName.startsWith('AMP-');
   // Don't DOM diff nodes with bindings because amp-bind scans newly rendered
   // elements and discards _all_ old elements _before_ diffing, so preserving
   // old elements would cause loss of functionality.
@@ -73,7 +72,7 @@ export function markElementForDiffing(element, generateKey) {
 
 /**
  * @const {!Object<string, boolean>}
- * @see https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md
+ * @see https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md
  */
 export const DENYLISTED_TAGS = {
   'applet': true,
@@ -96,7 +95,7 @@ export const DENYLISTED_TAGS = {
  * - amp-list and amp-state, which cannot be nested.
  * - amp-lightbox and amp-image-lightbox, which are deprecated.
  * @const {!Object<string, boolean>}
- * @see https://github.com/ampproject/amphtml/blob/master/spec/email/amp-email-components.md
+ * @see https://github.com/ampproject/amphtml/blob/main/docs/spec/email/amp-email-components.md
  */
 export const EMAIL_ALLOWLISTED_AMP_TAGS = {
   'amp-accordion': true,
@@ -119,7 +118,11 @@ export const EMAIL_ALLOWLISTED_AMP_TAGS = {
  */
 export const TRIPLE_MUSTACHE_ALLOWLISTED_TAGS = [
   'a',
+  'amp-img',
+  'article',
+  'aside',
   'b',
+  'blockquote',
   'br',
   'caption',
   'code',
@@ -127,23 +130,36 @@ export const TRIPLE_MUSTACHE_ALLOWLISTED_TAGS = [
   'colgroup',
   'dd',
   'del',
+  'details',
   'div',
   'dl',
   'dt',
   'em',
+  'figcaption',
+  'figure',
+  'footer',
+  'h1',
+  'h2',
+  'h3',
+  'header',
   'hr',
   'i',
   'ins',
   'li',
+  'main',
   'mark',
+  'nav',
   'ol',
   'p',
+  'pre',
   'q',
   's',
+  'section',
   'small',
   'span',
   'strong',
   'sub',
+  'summary',
   'sup',
   'table',
   'tbody',
@@ -192,6 +208,8 @@ export const ALLOWLISTED_ATTRS = [
   'subscriptions-display',
   'subscriptions-section',
   'subscriptions-service',
+  // Attributes for amp-subscriptions-google.
+  'subscriptions-google-rtc',
   // Attributes for amp-nested-menu.
   'amp-nested-submenu',
   'amp-nested-submenu-open',
@@ -224,7 +242,8 @@ const DENYLISTED_PROTOCOLS = /^(?:\w+script|data|blob):/i;
 const EXTENDED_DENYLISTED_PROTOCOLS = /^(?:blob):/i;
 
 // From https://github.com/cure53/DOMPurify/blob/master/src/regexp.js.
-const ATTR_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205f\u3000]/g;
+const ATTR_WHITESPACE =
+  /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205f\u3000]/g;
 
 /** @const {!Object<string, !Object<string, !RegExp>>} */
 const DENYLISTED_TAG_SPECIFIC_ATTR_VALUES = Object.freeze(
@@ -287,7 +306,8 @@ const EMAIL_DENYLISTED_TAG_SPECIFIC_ATTRS = Object.freeze(
  *
  * @const {!RegExp}
  */
-const INVALID_INLINE_STYLE_REGEX = /!important|position\s*:\s*fixed|position\s*:\s*sticky/i;
+const INVALID_INLINE_STYLE_REGEX =
+  /!important|position\s*:\s*fixed|position\s*:\s*sticky/i;
 
 /**
  * Whether the attribute/value is valid.
@@ -312,7 +332,7 @@ export function isValidAttr(
 
   if (!opt_purify) {
     // "on*" attributes are not allowed.
-    if (startsWith(attrName, 'on') && attrName != 'on') {
+    if (attrName.startsWith('on') && attrName != 'on') {
       return false;
     }
 
diff --git a/src/render-delaying-services.js b/src/render-delaying-services.js
index 84c8da4058bcf..2c1c91ba3fd08 100644
--- a/src/render-delaying-services.js
+++ b/src/render-delaying-services.js
@@ -112,7 +112,9 @@ export function hasRenderDelayingServices(win) {
  * @return {boolean}
  */
 export function isRenderDelayingService(service) {
-  const maybeRenderDelayingService = /** @type {!RenderDelayingService}*/ (service);
+  const maybeRenderDelayingService = /** @type {!RenderDelayingService}*/ (
+    service
+  );
   return typeof maybeRenderDelayingService.whenReady == 'function';
 }
 
diff --git a/src/resolved-promise.js b/src/resolved-promise.js
deleted file mode 100644
index ee0cb1f6328fd..0000000000000
--- a/src/resolved-promise.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-let resolved;
-
-/**
- * Returns a cached resolved promise.
- * Use this instead of directly calling Promise.resolve().
- * @return {!Promise<undefined>}
- */
-export function resolvedPromise() {
-  if (resolved) {
-    return resolved;
-  }
-
-  // It's important that we call with `undefined` here, to prevent a transform
-  // recursion. If we didn't pass an arg, then the transformer would replace
-  // this callsite with a call to `resolvedPromise()`.
-  resolved = Promise.resolve(undefined);
-  return resolved;
-}
diff --git a/src/runtime.js b/src/runtime.js
index 6331f094580e7..409c4919701ca 100644
--- a/src/runtime.js
+++ b/src/runtime.js
@@ -15,7 +15,6 @@
  */
 
 import {BaseElement} from './base-element';
-import {BaseTemplate, registerExtendedTemplate} from './service/template-impl';
 import {
   LogLevel, // eslint-disable-line no-unused-vars
   dev,
@@ -40,9 +39,10 @@ import {
 } from './service/extensions-impl';
 import {internalRuntimeVersion} from './internal-version';
 import {isExperimentOn, toggleExperiment} from './experiments';
-import {reportErrorForWin} from './error';
-import {scheduleUpgradeIfNeeded as scheduleInObUpgradeIfNeeded} from './polyfillstub/intersection-observer-stub';
+import {reportErrorForWin} from './error-reporting';
 import {setStyle} from './style';
+import {shouldLoadPolyfill as shouldLoadInObPolyfill} from './polyfills/stubs/intersection-observer-stub';
+import {shouldLoadPolyfill as shouldLoadResObPolyfill} from './polyfills/stubs/resize-observer-stub';
 import {startupChunk} from './chunk';
 import {stubElementsForDoc} from './service/custom-element-registry';
 import {waitForBodyOpenPromise} from './dom';
@@ -122,8 +122,6 @@ function adoptShared(global, callback) {
 
   global.AMP.BaseElement = BaseElement;
 
-  global.AMP.BaseTemplate = BaseTemplate;
-
   /**
    * Registers an extended element and installs its styles.
    * @param {string} name
@@ -135,11 +133,9 @@ function adoptShared(global, callback) {
   /**
    * Registers an extended template.
    * @param {string} name
-   * @param {typeof BaseTemplate} implementationClass
+   * @param {typeof ./base-template.BaseTemplate} implementationClass
    */
-  global.AMP.registerTemplate = function (name, implementationClass) {
-    registerExtendedTemplate(global, name, implementationClass);
-  };
+  global.AMP.registerTemplate = extensions.addTemplate.bind(extensions);
 
   /**
    * Registers an ampdoc service.
@@ -172,7 +168,6 @@ function adoptShared(global, callback) {
    * @param {function(string,?string=,number=)} unusedFn
    * @param {function()=} opt_flush
    * @deprecated
-   * @export
    */
   global.AMP.setTickFunction = (unusedFn, opt_flush) => {};
 
@@ -188,21 +183,18 @@ function adoptShared(global, callback) {
         if (typeof fnOrStruct == 'function') {
           fnOrStruct(global.AMP, global.AMP._);
         } else {
-          extensions.registerExtension(fnOrStruct.n, fnOrStruct.f, global.AMP);
+          extensions.registerExtension(
+            fnOrStruct.n,
+            fnOrStruct.ev,
+            fnOrStruct.l,
+            fnOrStruct.f,
+            global.AMP
+          );
         }
       });
     };
 
-    // We support extension declarations which declare they have an
-    // "intermediate" dependency that needs to be loaded before they
-    // can execute.
-    if (!(typeof fnOrStruct == 'function') && fnOrStruct.i) {
-      preloadDeps(extensions, fnOrStruct).then(function () {
-        return startRegisterOrChunk(global, fnOrStruct, register);
-      });
-    } else {
-      startRegisterOrChunk(global, fnOrStruct, register);
-    }
+    startRegisterOrChunk(global, fnOrStruct, register);
   }
 
   // Handle high priority extensions now, and if necessary issue
@@ -258,9 +250,10 @@ function adoptShared(global, callback) {
   // If the closure passed to maybePumpEarlyFrame didn't execute
   // immediately we need to keep pushing onto preregisteredExtensions
   if (!global.AMP.push) {
-    global.AMP.push = /** @type {function((ExtensionPayload|function(!Object, !Object): ?))} */ (preregisteredExtensions.push.bind(
-      preregisteredExtensions
-    ));
+    global.AMP.push =
+      /** @type {function((ExtensionPayload|function(!Object, !Object): ?))} */ (
+        preregisteredExtensions.push.bind(preregisteredExtensions)
+      );
   }
 
   // For iOS we need to set `cursor:pointer` to ensure that click events are
@@ -270,45 +263,17 @@ function adoptShared(global, callback) {
   }
 
   // Some deferred polyfills.
-  if (
-    // eslint-disable-next-line no-undef
-    INTERSECTION_OBSERVER_POLYFILL ||
-    // eslint-disable-next-line no-undef
-    INTERSECTION_OBSERVER_POLYFILL_INABOX ||
-    getMode().localDev ||
-    getMode().test
-  ) {
-    scheduleInObUpgradeIfNeeded(global);
+  const extensionsFor = Services.extensionsFor(global);
+  if (shouldLoadResObPolyfill(global)) {
+    extensionsFor.preloadExtension('amp-resize-observer-polyfill');
+  }
+  if (shouldLoadInObPolyfill(global)) {
+    extensionsFor.preloadExtension('amp-intersection-observer-polyfill');
   }
 
   return iniPromise;
 }
 
-/**
- * @param {!./service/extensions-impl.Extensions} extensions
- * @param {function(!Object, !Object)|!ExtensionPayload} fnOrStruct
- * @return {!Promise}
- */
-function preloadDeps(extensions, fnOrStruct) {
-  // Allow a single string as the intermediate dependency OR allow
-  // for an array if intermediate dependencies that needs to be
-  // resolved first before executing this current extension.
-  if (Array.isArray(fnOrStruct.i)) {
-    const promises = fnOrStruct.i.map((dep) => {
-      return extensions.preloadExtension(dep);
-    });
-    return Promise.all(promises);
-  } else if (typeof fnOrStruct.i == 'string') {
-    return extensions.preloadExtension(fnOrStruct.i);
-  }
-  dev().error(
-    'RUNTIME',
-    'dependency is neither an array or a string',
-    fnOrStruct.i
-  );
-  return Promise.resolve();
-}
-
 /**
  * @param {!Window} global Global scope to adopt.
  * @param {function(!Object, !Object)|!ExtensionPayload} fnOrStruct
@@ -403,7 +368,12 @@ function adoptServicesAndResources(global) {
  */
 function adoptMultiDocDeps(global) {
   global.AMP.installAmpdocServices = installAmpdocServices.bind(null);
-  global.AMP.combinedCss = ampDocCss + ampSharedCss;
+  if (IS_ESM) {
+    const style = global.document.querySelector('style[amp-runtime]');
+    global.AMP.combinedCss = style ? style.textContent : '';
+  } else {
+    global.AMP.combinedCss = ampDocCss + ampSharedCss;
+  }
 }
 
 /**
@@ -445,9 +415,8 @@ export function adoptShadowMode(global) {
      * @param {!Object<string, string>=} opt_initParams
      * @return {!Object}
      */
-    global.AMP.attachShadowDocAsStream = manager.attachShadowDocAsStream.bind(
-      manager
-    );
+    global.AMP.attachShadowDocAsStream =
+      manager.attachShadowDocAsStream.bind(manager);
 
     return waitForBodyOpenPromise(global.document);
   });
@@ -460,21 +429,32 @@ export function adoptShadowMode(global) {
  * If they are different, returns false, and initiates a load
  * of the respective extension via a versioned URL.
  *
- * This is currently guarded by the 'version-locking' experiment.
- * With this active, all scripts in a given page are guaranteed
- * to have the same AMP release version.
- *
  * @param {!Window} win
  * @param {function(!Object, !Object)|!ExtensionPayload} fnOrStruct
  * @return {boolean}
  */
 function maybeLoadCorrectVersion(win, fnOrStruct) {
-  if (!isExperimentOn(win, 'version-locking')) {
+  if (getMode().localDev && isExperimentOn(win, 'disable-version-locking')) {
     return false;
   }
   if (typeof fnOrStruct == 'function') {
     return false;
   }
+
+  if (IS_ESM) {
+    // If we're in a module runtime, trying to execute a nomodule extension
+    // simply remove the nomodule extension so that it is not executed.
+    if (!fnOrStruct.m) {
+      return true;
+    }
+  } else {
+    // If we're in a nomodule runtime, trying to execute a module extension
+    // simply remove the module extension so that it is not executed.
+    if (fnOrStruct.m) {
+      return true;
+    }
+  }
+
   const {v} = fnOrStruct;
   // This is non-obvious, but we only care about the release version,
   // not about the full rtv version, because these only differ
@@ -482,7 +462,11 @@ function maybeLoadCorrectVersion(win, fnOrStruct) {
   if (internalRuntimeVersion() == v) {
     return false;
   }
-  Services.extensionsFor(win).reloadExtension(fnOrStruct.n);
+  Services.extensionsFor(win).reloadExtension(
+    fnOrStruct.n,
+    fnOrStruct.ev,
+    fnOrStruct.l
+  );
   return true;
 }
 
@@ -494,10 +478,6 @@ function maybeLoadCorrectVersion(win, fnOrStruct) {
  *     pumped.
  */
 function maybePumpEarlyFrame(win, cb) {
-  if (!isExperimentOn(win, 'pump-early-frame')) {
-    cb();
-    return;
-  }
   // There is definitely nothing to draw yet, so we might as well
   // proceed.
   if (!win.document.body) {
diff --git a/src/sanitizer.js b/src/sanitizer.js
index 02835d50cc391..cd7b5d178582d 100644
--- a/src/sanitizer.js
+++ b/src/sanitizer.js
@@ -24,11 +24,10 @@ import {
   TRIPLE_MUSTACHE_ALLOWLISTED_TAGS,
   isValidAttr,
 } from './purifier/sanitation';
-import {dict} from './utils/object';
+import {dict} from './core/types/object';
 import {htmlSanitizer} from '../third_party/caja/html-sanitizer';
 import {isAmp4Email} from './format';
 import {rewriteAttributeValue} from './url-rewrite';
-import {startsWith} from './string';
 import {user} from './log';
 
 /** @private @const {string} */
@@ -105,7 +104,7 @@ export function sanitizeHtml(html, doc) {
         }
         return;
       }
-      const isAmpElement = startsWith(tagName, 'amp-');
+      const isAmpElement = tagName.startsWith('amp-');
       // Preprocess "binding" attributes, e.g. [attr], by stripping enclosing
       // brackets before custom validation and restoring them afterwards.
       const bindingAttribs = [];
@@ -115,7 +114,7 @@ export function sanitizeHtml(html, doc) {
           continue;
         }
         const classicBinding = attr[0] == '[' && attr[attr.length - 1] == ']';
-        const alternativeBinding = startsWith(attr, BIND_PREFIX);
+        const alternativeBinding = attr.startsWith(BIND_PREFIX);
         if (classicBinding) {
           attribs[i] = attr.slice(1, -1);
         }
@@ -135,10 +134,9 @@ export function sanitizeHtml(html, doc) {
         // Ask Caja to validate the element as well.
         // Use the resulting properties.
         const savedAttribs = attribs.slice(0);
-        const scrubbed = /** @type {!JsonObject} */ (tagPolicy(
-          tagName,
-          attribs
-        ));
+        const scrubbed = /** @type {!JsonObject} */ (
+          tagPolicy(tagName, attribs)
+        );
         if (!scrubbed) {
           ignore++;
         } else {
@@ -214,7 +212,7 @@ export function sanitizeHtml(html, doc) {
           continue;
         }
         emit(' ');
-        if (bindingAttribs.includes(i) && !startsWith(attrName, BIND_PREFIX)) {
+        if (bindingAttribs.includes(i) && !attrName.startsWith(BIND_PREFIX)) {
           emit(`[${attrName}]`);
         } else {
           emit(attrName);
diff --git a/src/service.js b/src/service.js
index d87037baf2795..81d72e0d446d0 100644
--- a/src/service.js
+++ b/src/service.js
@@ -20,9 +20,8 @@
  * Invariant: Service getters never return null for registered services.
  */
 
-import {Deferred} from './utils/promise';
+import {Deferred} from './core/data-structures/promise';
 import {dev, devAssert} from './log';
-import {isInAmpdocFieExperiment} from './ampdoc-fie';
 import {toWin} from './types';
 
 /**
@@ -38,8 +37,8 @@ import {toWin} from './types';
  *   resolve: (?function(!Object)),
  *   reject: (?function((*))),
  *   context: (?Window|?./service/ampdoc-impl.AmpDoc),
- *   ctor: (?function(new:Object, !Window)|
- *          ?function(new:Object, !./service/ampdoc-impl.AmpDoc)),
+ *   ctor: (function(new:Object, !Window)|
+ *          function(new:Object, !./service/ampdoc-impl.AmpDoc)),
  * }}
  */
 let ServiceHolderDef;
@@ -58,82 +57,37 @@ export class Disposable {
 }
 
 /**
- * Services must implement this interface to be embeddable in FIEs.
- * @interface
- */
-export class EmbeddableService {
-  /**
-   * Installs a new instance of the service in the given FIE window.
-   * @param {!Window} unusedEmbedWin
-   * @param {!./service/ampdoc-impl.AmpDoc} unusedAmpDoc
-   */
-  static installInEmbedWindow(unusedEmbedWin, unusedAmpDoc) {}
-}
-
-/**
- * Returns a service with the given id. Assumes that it has been constructed
- * already.
- *
- * @param {!Element|!ShadowRoot} element
+ * Installs a service override on amp-doc level.
+ * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
  * @param {string} id
- * @return {?Object}
+ * @param {!Object} service The service.
  */
-export function getExistingServiceForDocInEmbedScope(element, id) {
-  // TODO(#22733): completely remove this method once ampdoc-fie launches.
-  const document = element.ownerDocument;
-  const win = toWin(document.defaultView);
-  const topWin = getTopWindow(win);
-  // First, try to resolve via local embed window (if applicable).
-  const isEmbed = win != topWin;
-  const ampdocFieExperimentOn = isInAmpdocFieExperiment(topWin);
-  if (isEmbed && !ampdocFieExperimentOn) {
-    if (isServiceRegistered(win, id)) {
-      return getServiceInternal(win, id);
-    }
-    // Fallback from FIE to parent is intentionally unsupported for safety.
-    return null;
-  } else {
-    // Resolve via the element's ampdoc.
-    return getServiceForDocOrNullInternal(element, id);
-  }
+export function installServiceInEmbedDoc(ampdoc, id, service) {
+  registerServiceInternal(
+    getAmpdocServiceHolder(ampdoc),
+    ampdoc,
+    id,
+    function () {
+      return service;
+    },
+    /* override */ true
+  );
 }
 
 /**
- * Installs a service override on amp-doc level.
+ * Installs a service override in the scope of an embedded window.
  * @param {!Window} embedWin
  * @param {string} id
- * @param {!Object} service The service.
+ * @param {function(new:Object, !Window)} constructor
  */
-export function installServiceInEmbedScope(embedWin, id, service) {
-  const topWin = getTopWindow(embedWin);
-  devAssert(
-    embedWin != topWin,
-    'Service override can only be installed in embed window: %s',
-    id
-  );
-  devAssert(
-    !isServiceRegistered(embedWin, id),
-    'Service override has already been installed: %s',
-    id
+export function registerServiceBuilderInEmbedWin(embedWin, id, constructor) {
+  registerServiceInternal(
+    embedWin,
+    embedWin,
+    id,
+    constructor,
+    /* override */ true
   );
-  const ampdocFieExperimentOn = isInAmpdocFieExperiment(topWin);
-  if (ampdocFieExperimentOn) {
-    const ampdoc = getAmpdoc(embedWin.document);
-    registerServiceInternal(
-      getAmpdocServiceHolder(ampdoc),
-      ampdoc,
-      id,
-      function () {
-        return service;
-      },
-      /* override */ true
-    );
-  } else {
-    registerServiceInternal(embedWin, embedWin, id, function () {
-      return service;
-    });
-    getServiceInternal(embedWin, id); // Force service to build.
-  }
 }
 
 /**
@@ -200,6 +154,18 @@ export function getService(win, id) {
   return getServiceInternal(win, id);
 }
 
+/**
+ * Returns a service for the given id and window (a per-window singleton). But
+ * it looks in the immediate window scope, not the top-level window.
+ * @param {!Window} win
+ * @param {string} id of the service.
+ * @template T
+ * @return {T}
+ */
+export function getServiceInEmbedWin(win, id) {
+  return getServiceInternal(win, id);
+}
+
 /**
  * Returns a promise for a service for the given id and window. Also expects an
  * element that has the actual implementation. The promise resolves when the
@@ -256,12 +222,12 @@ export function getServiceForDoc(elementOrAmpDoc, id) {
 /**
  * Returns a service for the given id and ampdoc (a per-ampdoc singleton).
  * If service `id` is not registered, returns null.
- * @param {!Element|!ShadowRoot} element
+ * @param {!Element|!ShadowRoot|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
  * @param {string} id
  * @return {?Object}
  */
-function getServiceForDocOrNullInternal(element, id) {
-  const ampdoc = getAmpdoc(element);
+export function getServiceForDocOrNull(elementOrAmpDoc, id) {
+  const ampdoc = getAmpdoc(elementOrAmpDoc);
   const holder = getAmpdocServiceHolder(ampdoc);
   if (isServiceRegistered(holder, id)) {
     return getServiceInternal(holder, id);
@@ -375,10 +341,9 @@ function getAmpdocServiceHolder(nodeOrDoc) {
  * @return {!./service/ampdoc-impl.AmpDocService}
  */
 function getAmpdocService(win) {
-  return /** @type {!./service/ampdoc-impl.AmpDocService} */ (getService(
-    win,
-    'ampdoc'
-  ));
+  return /** @type {!./service/ampdoc-impl.AmpDocService} */ (
+    getService(win, 'ampdoc')
+  );
 }
 
 /**
@@ -387,7 +352,6 @@ function getAmpdocService(win) {
  * @param {!Object} holder Object holding the service instance.
  * @param {string} id of the service.
  * @return {Object}
- * @template T
  */
 function getServiceInternal(holder, id) {
   devAssert(
@@ -401,7 +365,6 @@ function getServiceInternal(holder, id) {
     devAssert(s.context, `Service ${id} registered without context.`);
     s.obj = new s.ctor(s.context);
     devAssert(s.obj, `Service ${id} constructed to null.`);
-    s.ctor = null;
     s.context = null;
     // The service may have been requested already, in which case we have a
     // pending promise we need to fulfill.
@@ -418,8 +381,16 @@ function getServiceInternal(holder, id) {
  * @param {string} id of the service.
  * @param {?function(new:Object, !Window)|?function(new:Object, !./service/ampdoc-impl.AmpDoc)} ctor Constructor function to new the service. Called with context.
  * @param {boolean=} opt_override
+ * @param {boolean=} opt_sharedInstance
  */
-function registerServiceInternal(holder, context, id, ctor, opt_override) {
+function registerServiceInternal(
+  holder,
+  context,
+  id,
+  ctor,
+  opt_override,
+  opt_sharedInstance
+) {
   const services = getServices(holder);
   let s = services[id];
 
@@ -431,16 +402,18 @@ function registerServiceInternal(holder, context, id, ctor, opt_override) {
       reject: null,
       context: null,
       ctor: null,
+      sharedInstance: opt_sharedInstance || false,
     };
   }
 
-  if (!opt_override && (s.ctor || s.obj)) {
+  if (!opt_override && s.ctor) {
     // Service already registered.
     return;
   }
 
   s.ctor = ctor;
   s.context = context;
+  s.sharedInstance = opt_sharedInstance || false;
 
   // The service may have been requested already, in which case there is a
   // pending promise that needs to fulfilled.
@@ -565,14 +538,15 @@ export function disposeServicesForEmbed(embedWin) {
  * @param {!Object} holder Object holding the service instances.
  */
 function disposeServicesInternal(holder) {
-  // TODO(dvoytenko): Consider marking holder as destroyed for later-arriving
-  // service to be canceled automatically.
   const services = getServices(holder);
   for (const id in services) {
     if (!Object.prototype.hasOwnProperty.call(services, id)) {
       continue;
     }
     const serviceHolder = services[id];
+    if (serviceHolder.sharedInstance) {
+      continue;
+    }
     if (serviceHolder.obj) {
       disposeServiceInternal(id, serviceHolder.obj);
     } else if (serviceHolder.promise) {
@@ -601,29 +575,11 @@ function disposeServiceInternal(id, service) {
 }
 
 /**
- * Adopts an embeddable (implements `EmbeddableService` interface) service
- * in embed scope.
- * @param {!Window} embedWin
- * @param {function(new:Object, !./service/ampdoc-impl.AmpDoc)} serviceClass
- * @suppress {missingProperties}
- * @return {boolean}
- */
-export function installServiceInEmbedIfEmbeddable(embedWin, serviceClass) {
-  const isEmbeddableService =
-    typeof serviceClass.installInEmbedWindow === 'function';
-  if (!isEmbeddableService) {
-    return false;
-  }
-  const frameElement = dev().assertElement(
-    embedWin.frameElement,
-    'frameElement not found for embed'
-  );
-  const ampdoc = getAmpdoc(frameElement);
-  serviceClass.installInEmbedWindow(embedWin, ampdoc);
-  return true;
-}
-
-/**
+ * This adopts the service **instance** from the parent.
+ *
+ * This function is dangerous! Sharing an instance means data can leak to and
+ * from a child ampdoc.
+ *
  * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
  * @param {string} id
  */
@@ -638,7 +594,35 @@ export function adoptServiceForEmbedDoc(ampdoc, id) {
     id,
     function () {
       return service;
-    }
+    },
+    /* override */ false,
+    /* sharedInstance */ true
+  );
+}
+
+/**
+ * This adopts the service **factory** from the parent.
+ *
+ * This function is safer than sharing the service instance, since each ampdoc
+ * will create its own instance of the factory (and each instance will have its
+ * own instance data). Note that static data is still shared, so it's not 100%
+ * foolproof.
+ *
+ * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
+ * @param {string} id
+ */
+export function adoptServiceFactoryForEmbedDoc(ampdoc, id) {
+  const parentHolder = getAmpdocServiceHolder(devAssert(ampdoc.getParent()));
+  devAssert(
+    isServiceRegistered(parentHolder, id),
+    `Expected service ${id} to be registered`
+  );
+  const service = getServices(parentHolder)[id];
+  registerServiceInternal(
+    getAmpdocServiceHolder(ampdoc),
+    ampdoc,
+    id,
+    devAssert(service.ctor)
   );
 }
 
@@ -660,14 +644,14 @@ export function resetServiceForTesting(holder, id) {
  */
 function isServiceRegistered(holder, id) {
   const service = holder.__AMP_SERVICES && holder.__AMP_SERVICES[id];
-  // All registered services must have an implementation or a constructor.
-  return !!(service && (service.ctor || service.obj));
+  // All registered services must have a constructor.
+  return !!(service && service.ctor);
 }
 
 /** @return {!ServiceHolderDef} */
 function emptyServiceHolderWithPromise() {
   const deferred = new Deferred();
-  const {promise, resolve, reject} = deferred;
+  const {promise, reject, resolve} = deferred;
   promise.catch(() => {}); // avoid uncaught exception when service gets rejected
   return {
     obj: null,
diff --git a/src/service/OWNERS b/src/service/OWNERS
index 07b1ae52cfcee..e6781098d3410 100644
--- a/src/service/OWNERS
+++ b/src/service/OWNERS
@@ -1,15 +1,15 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       pattern: 'video-*.js',
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
     {
-      pattern: '{cid-*,*-cid-*,*-cid,url-replacements-impl}.js',
-      owners: [{name: 'ampproject/wg-analytics'}],
+      pattern: '{cid-*,*-cid-*,*-cid,url-replacements-impl,storage-impl}.js',
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/src/service/action-impl.js b/src/service/action-impl.js
index 62d41a5744a85..34deb71b5271a 100644
--- a/src/service/action-impl.js
+++ b/src/service/action-impl.js
@@ -19,23 +19,21 @@ import {
   DEFAULT_ACTION,
   RAW_OBJECT_ARGS_KEY,
   actionTrustToString,
-} from '../action-constants';
-import {Keys} from '../utils/key-codes';
+} from '../core/constants/action-constants';
+import {Keys} from '../core/constants/key-codes';
 import {Services} from '../services';
-import {debounce, throttle} from '../utils/rate-limit';
+import {debounce, throttle} from '../core/types/function';
 import {dev, devAssert, user, userAssert} from '../log';
-import {dict, hasOwn, map} from '../utils/object';
+import {dict, getValueForExpr, hasOwn, map} from '../core/types/object';
 import {getDetail} from '../event-helper';
 import {getMode} from '../mode';
-import {getValueForExpr} from '../json';
-import {
-  installServiceInEmbedScope,
-  registerServiceBuilderForDoc,
-} from '../service';
 import {isAmp4Email} from '../format';
-import {isArray, isFiniteNumber, toArray, toWin} from '../types';
+import {isArray, toArray} from '../core/types/array';
 import {isEnabled} from '../dom';
-import {reportError} from '../error';
+import {isFiniteNumber} from '../core/types';
+import {registerServiceBuilderForDoc} from '../service';
+import {reportError} from '../error-reporting';
+import {toWin} from '../types';
 
 /** @const {string} */
 const TAG_ = 'Action';
@@ -242,7 +240,6 @@ export class ActionInvocation {
  *    simply can search target in DOM and trigger methods on it.
  * 2. A class that configures event recognizers and rules and then
  *    simply calls action.trigger.
- * @implements {../service.EmbeddableService}
  */
 export class ActionService {
   /**
@@ -297,19 +294,6 @@ export class ActionService {
     this.addEvent('invalid');
   }
 
-  /**
-   * @param {!Window} embedWin
-   * @param {!./ampdoc-impl.AmpDoc} ampdoc
-   * @nocollapse
-   */
-  static installInEmbedWindow(embedWin, ampdoc) {
-    installServiceInEmbedScope(
-      embedWin,
-      'action',
-      new ActionService(ampdoc, embedWin.document)
-    );
-  }
-
   /**
    * @param {string} name
    * TODO(dvoytenko): switch to a system where the event recognizers are
@@ -598,7 +582,7 @@ export class ActionService {
    * @param {Array<string>=} opt_forFormat
    */
   addToAllowlist(tagOrTarget, methods, opt_forFormat) {
-    // TODO(wg-runtime): When it becomes possible to getFormat(),
+    // TODO(wg-performance): When it becomes possible to getFormat(),
     // we can store `format_` instead of `isEmail_` and check
     // (opt_forFormat && !opt_forFormat.includes(this.format_))
     if (opt_forFormat && opt_forFormat.includes('email') !== this.isEmail_) {
@@ -644,7 +628,7 @@ export class ActionService {
     /** @type {?Promise} */
     let currentPromise = null;
     action.actionInfos.forEach((actionInfo) => {
-      const {target, args, method, str} = actionInfo;
+      const {args, method, str, target} = actionInfo;
       const dereferencedArgs = dereferenceArgsVariables(args, event, opt_args);
       const invokeAction = () => {
         const node = this.getActionNode_(target);
@@ -834,8 +818,9 @@ export class ActionService {
   }
 
   /**
-   * Given a browser 'change' or 'input' event, add `details` property to it
-   * containing allowlisted properties of the target element.
+   * Given a browser 'change' or 'input' event, add `detail` property to it
+   * containing allowlisted properties of the target element. Noop if `detail`
+   * is readonly.
    * @param {!ActionEventDef} event
    * @private
    */
@@ -871,7 +856,9 @@ export class ActionService {
     }
 
     if (Object.keys(detail).length > 0) {
-      event.detail = detail;
+      try {
+        event.detail = detail;
+      } catch {} // event.detail is readonly
     }
   }
 }
diff --git a/src/service/ampdoc-impl.js b/src/service/ampdoc-impl.js
index 6ac07f97ad9f9..e2137a393db21 100644
--- a/src/service/ampdoc-impl.js
+++ b/src/service/ampdoc-impl.js
@@ -14,23 +14,26 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../utils/promise';
-import {Observable} from '../observable';
-import {Signals} from '../utils/signals';
-import {VisibilityState} from '../visibility-state';
+import {Deferred} from '../core/data-structures/promise';
+import {Observable} from '../core/data-structures/observable';
+import {Signals} from '../core/data-structures/signals';
+import {VisibilityState} from '../core/constants/visibility-state';
+import {WindowInterface} from '../window-interface';
 import {
   addDocumentVisibilityChangeListener,
   getDocumentVisibilityState,
   removeDocumentVisibilityChangeListener,
 } from '../utils/document-visibility';
 import {dev, devAssert} from '../log';
-import {getParentWindowFrameElement, registerServiceBuilder} from '../service';
-import {getShadowRootNode} from '../shadow-embed';
-import {isDocumentReady, whenDocumentReady} from '../document-ready';
-import {isInAmpdocFieExperiment} from '../ampdoc-fie';
+import {
+  disposeServicesForDoc,
+  getParentWindowFrameElement,
+  registerServiceBuilder,
+} from '../service';
+import {isDocumentReady, whenDocumentReady} from '../core/document-ready';
 import {iterateCursor, rootNodeFor, waitForBodyOpenPromise} from '../dom';
-import {map} from '../utils/object';
-import {parseQueryString} from '../url';
+import {map} from '../core/types/object';
+import {parseQueryString} from '../core/types/string/url';
 
 /** @const {string} */
 const AMPDOC_PROP = '__AMPDOC';
@@ -52,6 +55,8 @@ export let AmpDocOptions;
  * @enum {string}
  */
 const AmpDocSignals = {
+  // A complete preinstalled list of extensions is known.
+  EXTENSIONS_KNOWN: '-ampdoc-ext-known',
   // Signals the document has become visible for the first time.
   FIRST_VISIBLE: '-ampdoc-first-visible',
   // Signals when the document becomes visible the next time.
@@ -86,12 +91,6 @@ export class AmpDocService {
       });
       win.document[AMPDOC_PROP] = this.singleDoc_;
     }
-
-    /** @private {boolean} */
-    this.ampdocFieExperimentOn_ = isInAmpdocFieExperiment(win);
-
-    /** @private {boolean} */
-    this.mightHaveShadowRoots_ = !isSingleDoc;
   }
 
   /**
@@ -133,93 +132,45 @@ export class AmpDocService {
 
   /**
    * Returns the instance of the ampdoc (`AmpDoc`) that contains the specified
-   * node. If the runtime is in the single-doc mode, the one global `AmpDoc`
-   * instance is returned, unless specfically looking for a closer `AmpDoc`.
-   * Otherwise, this method locates the `AmpDoc` that contains the specified
-   * node and, if necessary, initializes it.
-   *
-   * TODO(#22733): rewrite docs once the ampdoc-fie is launched.
+   * node.
    *
    * @param {!Node} node
    * @return {?AmpDoc}
    */
   getAmpDocIfAvailable(node) {
-    if (this.ampdocFieExperimentOn_) {
-      let n = node;
-      while (n) {
-        // A custom element may already have the reference. If we are looking
-        // for the closest AmpDoc, the element might have a reference to the
-        // global AmpDoc, which we do not want. This occurs when using
-        // <amp-next-page>.
-
-        const cachedAmpDoc = this.getCustomElementAmpDocReference_(node);
-        if (cachedAmpDoc) {
-          return cachedAmpDoc;
-        }
-
-        // Root note: it's either a document, or a shadow document.
-        const rootNode = rootNodeFor(n);
-        if (!rootNode) {
-          break;
-        }
-        const ampdoc = rootNode[AMPDOC_PROP];
-        if (ampdoc) {
-          return ampdoc;
-        }
-
-        // Try to iterate to the host of the current root node.
-        // First try the shadow root's host.
-        if (rootNode.host) {
-          n = rootNode.host;
-        } else {
-          // Then, traverse the boundary of a friendly iframe.
-          n = getParentWindowFrameElement(rootNode, this.win);
-        }
-      }
-
-      return null;
-    }
-
-    // Otherwise discover and possibly create the ampdoc.
     let n = node;
     while (n) {
       // A custom element may already have the reference. If we are looking
       // for the closest AmpDoc, the element might have a reference to the
       // global AmpDoc, which we do not want. This occurs when using
       // <amp-next-page>.
+
       const cachedAmpDoc = this.getCustomElementAmpDocReference_(node);
       if (cachedAmpDoc) {
         return cachedAmpDoc;
       }
 
-      // Traverse the boundary of a friendly iframe.
-      const frameElement = getParentWindowFrameElement(n, this.win);
-      if (frameElement) {
-        n = frameElement;
-        continue;
-      }
-
-      if (!this.mightHaveShadowRoots_) {
-        break;
-      }
-
-      // Shadow doc.
-      const shadowRoot =
-        n.nodeType == /* DOCUMENT */ 9 ? n : getShadowRootNode(n);
-      if (!shadowRoot) {
+      // Root note: it's either a document, or a shadow document.
+      const rootNode = rootNodeFor(n);
+      if (!rootNode) {
         break;
       }
-
-      const ampdoc = shadowRoot[AMPDOC_PROP];
+      const ampdoc = rootNode[AMPDOC_PROP];
       if (ampdoc) {
         return ampdoc;
       }
-      n = shadowRoot.host;
+
+      // Try to iterate to the host of the current root node.
+      // First try the shadow root's host.
+      if (rootNode.host) {
+        n = rootNode.host;
+      } else {
+        // Then, traverse the boundary of a friendly iframe.
+        n = getParentWindowFrameElement(rootNode, this.win);
+      }
     }
 
-    // If we were looking for the closest AmpDoc, then fall back to the single
-    // doc if there is no other AmpDoc that is closer.
-    return this.singleDoc_;
+    return null;
   }
 
   /**
@@ -234,14 +185,6 @@ export class AmpDocService {
    * @return {!AmpDoc}
    */
   getAmpDoc(node) {
-    // Ensure that node is attached if specified. This check uses a new and
-    // fast `isConnected` API and thus only checked on platforms that have it.
-    // See https://www.chromestatus.com/feature/5676110549352448.
-    devAssert(
-      node['isConnected'] === undefined || node['isConnected'] === true,
-      'The node must be attached to request ampdoc.'
-    );
-
     const ampdoc = this.getAmpDocIfAvailable(node);
     if (!ampdoc) {
       throw dev().createError('No ampdoc found for', node);
@@ -258,7 +201,6 @@ export class AmpDocService {
    * @restricted
    */
   installShadowDoc(url, shadowRoot, opt_options) {
-    this.mightHaveShadowRoots_ = true;
     devAssert(
       !shadowRoot[AMPDOC_PROP],
       'The shadow root already contains ampdoc'
@@ -323,8 +265,8 @@ export class AmpDoc {
     /** @protected {?Object<string, string>} */
     this.meta_ = null;
 
-    /** @private @const {!Array<string>} */
-    this.declaredExtensions_ = [];
+    /** @private @const {!Object<string, string>} */
+    this.declaredExtensions_ = {};
 
     /** @private {?VisibilityState} */
     this.visibilityStateOverride_ =
@@ -375,6 +317,7 @@ export class AmpDoc {
    * Dispose the document.
    */
   dispose() {
+    disposeServicesForDoc(this);
     this.unsubsribes_.forEach((unsubsribe) => unsubsribe());
   }
 
@@ -481,21 +424,55 @@ export class AmpDoc {
   /**
    * Returns whether the specified extension has been declared on this ampdoc.
    * @param {string} extensionId
+   * @param {string=} opt_version
    * @return {boolean}
    */
-  declaresExtension(extensionId) {
-    return this.declaredExtensions_.indexOf(extensionId) != -1;
+  declaresExtension(extensionId, opt_version) {
+    const declared = this.declaredExtensions_[extensionId];
+    if (!declared) {
+      return false;
+    }
+    return !opt_version || declared === opt_version;
   }
 
   /**
    * Adds a declared extension to an ampdoc.
    * @param {string} extensionId
+   * @param {string} version
    * @restricted
    */
-  declareExtension(extensionId) {
-    if (!this.declaresExtension(extensionId)) {
-      this.declaredExtensions_.push(extensionId);
-    }
+  declareExtension(extensionId, version) {
+    devAssert(
+      !this.declaredExtensions_[extensionId] ||
+        this.declaredExtensions_[extensionId] === version,
+      'extension already declared %s',
+      extensionId
+    );
+    this.declaredExtensions_[extensionId] = version;
+  }
+
+  /**
+   * @param {string} extensionId
+   * @return {?string}
+   */
+  getExtensionVersion(extensionId) {
+    return this.declaredExtensions_[extensionId] || null;
+  }
+
+  /**
+   * Signal that the initial document set of extensions is known.
+   * @restricted
+   */
+  setExtensionsKnown() {
+    this.signals_.signal(AmpDocSignals.EXTENSIONS_KNOWN);
+  }
+
+  /**
+   * Resolved when the initial document set of extension is known.
+   * @return {!Promise}
+   */
+  whenExtensionsKnown() {
+    return this.signals_.whenSignal(AmpDocSignals.EXTENSIONS_KNOWN);
   }
 
   /**
@@ -698,9 +675,9 @@ export class AmpDoc {
    * @return {?time}
    */
   getFirstVisibleTime() {
-    return /** @type {?number} */ (this.signals_.get(
-      AmpDocSignals.FIRST_VISIBLE
-    ));
+    return /** @type {?number} */ (
+      this.signals_.get(AmpDocSignals.FIRST_VISIBLE)
+    );
   }
 
   /**
@@ -802,7 +779,7 @@ export class AmpDocSingle extends AmpDoc {
 
   /** @override */
   getUrl() {
-    return this.win.location.href;
+    return WindowInterface.getLocation(this.win).href;
   }
 
   /** @override */
@@ -1088,13 +1065,3 @@ export function installDocService(win, isSingleDoc, opt_initParams) {
     return new AmpDocService(win, isSingleDoc, opt_initParams);
   });
 }
-
-/**
- * @param {AmpDocService} ampdocService
- * @param {boolean} value
- * @visibleForTesting
- */
-export function updateFieModeForTesting(ampdocService, value) {
-  // TODO(#22733): remove this method once ampdoc-fie is launched.
-  ampdocService.ampdocFieExperimentOn_ = value;
-}
diff --git a/src/service/batched-xhr-impl.js b/src/service/batched-xhr-impl.js
index 0e5b688322f24..b96768267a44e 100644
--- a/src/service/batched-xhr-impl.js
+++ b/src/service/batched-xhr-impl.js
@@ -17,7 +17,7 @@
 import {Xhr} from './xhr-impl';
 import {getService, registerServiceBuilder} from '../service';
 import {getSourceOrigin, removeFragment, resolveRelativeUrl} from '../url';
-import {map} from '../utils/object';
+import {map} from '../core/types/object';
 
 /**
  * A wrapper around the Xhr service which batches the result of GET requests
diff --git a/src/service/cache-cid-api.js b/src/service/cache-cid-api.js
index 79bdcacb98b51..6e2017130e852 100644
--- a/src/service/cache-cid-api.js
+++ b/src/service/cache-cid-api.js
@@ -16,7 +16,7 @@
 
 import {Services} from '../services';
 import {dev} from '../log';
-import {dict} from '../utils/object';
+import {dict} from '../core/types/object';
 import {getSourceOrigin} from '../url';
 
 /**
diff --git a/src/service/cid-api.js b/src/service/cid-api.js
index 8a5076f063891..1b8420d789b29 100644
--- a/src/service/cid-api.js
+++ b/src/service/cid-api.js
@@ -17,7 +17,7 @@
 import {Services} from '../services';
 import {WindowInterface} from '../window-interface';
 import {dev} from '../log';
-import {dict} from '../utils/object';
+import {dict} from '../core/types/object';
 import {getCookie, setCookie} from '../cookies';
 import {isProxyOrigin, parseUrlDeprecated} from '../url';
 
diff --git a/src/service/cid-impl.js b/src/service/cid-impl.js
index 474b1d4e7a77a..8b31363c92136 100644
--- a/src/service/cid-impl.js
+++ b/src/service/cid-impl.js
@@ -22,21 +22,22 @@
  * For details, see https://goo.gl/Mwaacs
  */
 
+import {CacheCidApi} from './cache-cid-api';
 import {GoogleCidApi, TokenStatus} from './cid-api';
-import {dev, rethrowAsync, user, userAssert} from '../log';
+import {Services} from '../services';
+import {ViewerCidApi} from './viewer-cid-api';
+import {base64UrlEncodeFromBytes} from '../core/types/string/base64';
+import {dev, user, userAssert} from '../log';
+import {dict} from '../core/types/object';
 import {getCookie, setCookie} from '../cookies';
+import {getCryptoRandomBytesArray} from '../core/types/string/bytes';
 import {getServiceForDoc, registerServiceBuilderForDoc} from '../service';
 import {getSourceOrigin, isProxyOrigin, parseUrlDeprecated} from '../url';
-import {parseJson, tryParseJson} from '../json';
-
-import {CacheCidApi} from './cache-cid-api';
-import {Services} from '../services';
-import {ViewerCidApi} from './viewer-cid-api';
-import {base64UrlEncodeFromBytes} from '../utils/base64';
-import {dict} from '../utils/object';
-import {getCryptoRandomBytesArray} from '../utils/bytes';
+import {isExperimentOn} from '../../src/experiments';
 import {isIframed} from '../dom';
-import {tryResolve} from '../utils/promise';
+import {parseJson, tryParseJson} from '../core/types/object/json';
+import {rethrowAsync} from '../core/error';
+import {tryResolve} from '../core/data-structures/promise';
 
 const ONE_DAY_MILLIS = 24 * 3600 * 1000;
 
@@ -51,6 +52,8 @@ const CID_OPTOUT_STORAGE_KEY = 'amp-cid-optout';
 
 const CID_OPTOUT_VIEWER_MESSAGE = 'cidOptOut';
 
+const CID_BACKUP_STORAGE_KEY = 'amp-cid:';
+
 /**
  * Tag for debug logging.
  * @const @private {string}
@@ -89,10 +92,14 @@ let BaseCidInfoDef;
  * The "get CID" parameters.
  * - createCookieIfNotPresent: Whether CID is allowed to create a cookie when.
  *   Default value is `false`.
+ * - cookieName: Name of the cookie to be used if defined for non-proxy case.
+ * - disableBackup: Whether CID should not be backed up in Storage.
+ *   Default value is `false`.
  * @typedef {{
  *   scope: string,
  *   createCookieIfNotPresent: (boolean|undefined),
  *   cookieName: (string|undefined),
+ *   disableBackup: (boolean|undefined),
  * }}
  */
 let GetCidDef;
@@ -173,6 +180,9 @@ class Cid {
 
     /** @private {?Object<string, string>} */
     this.apiKeyMap_ = null;
+
+    /** @const {boolean} */
+    this.isBackupCidExpOn = isExperimentOn(this.ampdoc.win, 'amp-cid-backup');
   }
 
   /** @override */
@@ -382,53 +392,121 @@ function setCidCookie(win, scope, cookie) {
   });
 }
 
+/**
+ * Sets a new CID backup in Storage
+ * @param {!./ampdoc-impl.AmpDoc} ampdoc
+ * @param {string} cookieName
+ * @param {string} cookie
+ */
+function setCidBackup(ampdoc, cookieName, cookie) {
+  Services.storageForDoc(ampdoc).then((storage) => {
+    const isViewerStorage = storage.isViewerStorage();
+    if (!isViewerStorage) {
+      const key = getStorageKey(cookieName);
+      storage.setNonBoolean(key, cookie);
+    }
+  });
+}
+
+/**
+ * @param {string} cookieName
+ * @return {string}
+ */
+function getStorageKey(cookieName) {
+  return CID_BACKUP_STORAGE_KEY + cookieName;
+}
+
+/**
+ * Maybe gets the CID from cookie or, if allowed, gets backup CID
+ * from Storage.
+ * @param {!Cid} cid
+ * @param {!GetCidDef} getCidStruct
+ * @return {!Promise<?string>}
+ */
+function maybeGetCidFromCookieOrBackup(cid, getCidStruct) {
+  const {ampdoc, isBackupCidExpOn} = cid;
+  const {win} = ampdoc;
+  const {disableBackup, scope} = getCidStruct;
+  const cookieName = getCidStruct.cookieName || scope;
+  const existingCookie = getCookie(win, cookieName);
+
+  if (existingCookie) {
+    return Promise.resolve(existingCookie);
+  }
+  if (isBackupCidExpOn && !disableBackup) {
+    return Services.storageForDoc(ampdoc)
+      .then((storage) => {
+        const key = getStorageKey(cookieName);
+        return storage.get(key, BASE_CID_MAX_AGE_MILLIS);
+      })
+      .then((backupCid) => {
+        if (!backupCid || typeof backupCid != 'string') {
+          return null;
+        }
+        return backupCid;
+      });
+  }
+  return Promise.resolve(null);
+}
+
 /**
  * If cookie exists it's returned immediately. Otherwise, if instructed, the
  * new cookie is created.
- *
  * @param {!Cid} cid
  * @param {!GetCidDef} getCidStruct
  * @param {!Promise} persistenceConsent
  * @return {!Promise<?string>}
  */
 function getOrCreateCookie(cid, getCidStruct, persistenceConsent) {
-  const {win} = cid.ampdoc;
-  const {scope} = getCidStruct;
+  const {ampdoc, isBackupCidExpOn} = cid;
+  const {win} = ampdoc;
+  const {disableBackup, scope} = getCidStruct;
   const cookieName = getCidStruct.cookieName || scope;
-  const existingCookie = getCookie(win, cookieName);
 
-  if (!existingCookie && !getCidStruct.createCookieIfNotPresent) {
-    return /** @type {!Promise<?string>} */ (Promise.resolve(null));
-  }
+  return maybeGetCidFromCookieOrBackup(cid, getCidStruct).then(
+    (existingCookie) => {
+      if (!existingCookie && !getCidStruct.createCookieIfNotPresent) {
+        return /** @type {!Promise<?string>} */ (Promise.resolve(null));
+      }
 
-  if (existingCookie) {
-    // If we created the cookie, update it's expiration time.
-    if (/^amp-/.test(existingCookie)) {
-      setCidCookie(win, cookieName, existingCookie);
-    }
-    return /** @type {!Promise<?string>} */ (Promise.resolve(existingCookie));
-  }
+      if (existingCookie) {
+        // If we created the cookie, update it's expiration time.
+        if (/^amp-/.test(existingCookie)) {
+          setCidCookie(win, cookieName, existingCookie);
+          if (isBackupCidExpOn && !disableBackup) {
+            setCidBackup(ampdoc, cookieName, existingCookie);
+          }
+        }
+        return /** @type {!Promise<?string>} */ (
+          Promise.resolve(existingCookie)
+        );
+      }
 
-  if (cid.externalCidCache_[scope]) {
-    return /** @type {!Promise<?string>} */ (cid.externalCidCache_[scope]);
-  }
+      if (cid.externalCidCache_[scope]) {
+        return /** @type {!Promise<?string>} */ (cid.externalCidCache_[scope]);
+      }
 
-  const newCookiePromise = getRandomString64(win)
-    // Create new cookie, always prefixed with "amp-", so that we can see from
-    // the value whether we created it.
-    .then((randomStr) => 'amp-' + randomStr);
-
-  // Store it as a cookie based on the persistence consent.
-  Promise.all([newCookiePromise, persistenceConsent]).then((results) => {
-    // The initial CID generation is inherently racy. First one that gets
-    // consent wins.
-    const newCookie = results[0];
-    const relookup = getCookie(win, cookieName);
-    if (!relookup) {
-      setCidCookie(win, cookieName, newCookie);
+      const newCookiePromise = getRandomString64(win)
+        // Create new cookie, always prefixed with "amp-", so that we can see from
+        // the value whether we created it.
+        .then((randomStr) => 'amp-' + randomStr);
+
+      // Store it as a cookie based on the persistence consent.
+      Promise.all([newCookiePromise, persistenceConsent]).then((results) => {
+        // The initial CID generation is inherently racy. First one that gets
+        // consent wins.
+        const newCookie = results[0];
+        const relookup = getCookie(win, cookieName);
+        if (!relookup) {
+          setCidCookie(win, cookieName, newCookie);
+          if (isBackupCidExpOn && !disableBackup) {
+            setCidBackup(ampdoc, cookieName, newCookie);
+          }
+        }
+      });
+      return (cid.externalCidCache_[scope] = newCookiePromise);
     }
-  });
-  return (cid.externalCidCache_[scope] = newCookiePromise);
+  );
 }
 
 /**
diff --git a/src/service/core-services.js b/src/service/core-services.js
index e2a42b10b4337..4f94a6fdcecaf 100644
--- a/src/service/core-services.js
+++ b/src/service/core-services.js
@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-import {adoptServiceForEmbedDoc} from '../service';
+import {
+  adoptServiceFactoryForEmbedDoc,
+  adoptServiceForEmbedDoc,
+} from '../service';
+import {devAssert} from '../log';
 import {installActionServiceForDoc} from './action-impl';
 import {installBatchedXhrService} from './batched-xhr-impl';
 import {installCidService} from './cid-impl';
@@ -24,18 +28,20 @@ import {installGlobalNavigationHandlerForDoc} from './navigation';
 import {installGlobalSubmitListenerForDoc} from '../document-submit';
 import {installHiddenObserverForDoc} from './hidden-observer-impl';
 import {installHistoryServiceForDoc} from './history-impl';
-import {installImg} from '../../builtins/amp-img';
+import {installImg} from '../../builtins/amp-img/amp-img';
+import {installInaboxResourcesServiceForDoc} from '../inabox/inabox-resources';
 import {installInputService} from '../input';
-import {installLayout} from '../../builtins/amp-layout';
+import {installLayout} from '../../builtins/amp-layout/amp-layout';
+import {installLoadingIndicatorForDoc} from './loading-indicator';
 import {installMutatorServiceForDoc} from './mutator-impl';
 import {installOwnersServiceForDoc} from './owners-impl';
-import {installPixel} from '../../builtins/amp-pixel';
+import {installPixel} from '../../builtins/amp-pixel/amp-pixel';
 import {installPlatformService} from './platform-impl';
 import {installPreconnectService} from '../preconnect';
 import {installResourcesServiceForDoc} from './resources-impl';
 import {installStandardActionsForDoc} from './standard-actions-impl';
 import {installStorageServiceForDoc} from './storage-impl';
-import {installTemplatesService} from './template-impl';
+import {installTemplatesServiceForDoc} from './template-impl';
 import {installTimerService} from './timer-impl';
 import {installUrlForDoc} from './url-impl';
 import {installUrlReplacementsServiceForDoc} from './url-replacements-impl';
@@ -64,7 +70,6 @@ export function installRuntimeServices(global) {
   installCryptoService(global);
   installBatchedXhrService(global);
   installPlatformService(global);
-  installTemplatesService(global);
   installTimerService(global);
   installVsyncService(global);
   installXhrService(global);
@@ -78,12 +83,35 @@ export function installRuntimeServices(global) {
  * @restricted
  */
 export function installAmpdocServices(ampdoc) {
-  const isEmbedded = !!ampdoc.getParent();
+  devAssert(!ampdoc.getParent());
+  installAmpdocServicesInternal(ampdoc, /* isEmbedded */ false);
+}
+
+/**
+ * Install ampdoc-level services for an embedded doc.
+ * @param {!./ampdoc-impl.AmpDoc} ampdoc
+ * @restricted
+ */
+export function installAmpdocServicesForEmbed(ampdoc) {
+  devAssert(!!ampdoc.getParent());
+  installAmpdocServicesInternal(ampdoc, /* isEmbedded */ true);
+}
+
+/**
+ * @param {!./ampdoc-impl.AmpDoc} ampdoc
+ * @param {boolean} isEmbedded
+ */
+function installAmpdocServicesInternal(ampdoc, isEmbedded) {
+  // This function is constructed to DCE embedded-vs-non-embedded path when
+  // a constant value passed in the `isEmbedded` arg.
 
   // When making changes to this method:
   // 1. Order is important!
   // 2. Consider to install same services to amp-inabox.js
   installUrlForDoc(ampdoc);
+  isEmbedded
+    ? adoptServiceFactoryForEmbedDoc(ampdoc, 'templates')
+    : installTemplatesServiceForDoc(ampdoc);
   isEmbedded
     ? adoptServiceForEmbedDoc(ampdoc, 'documentInfo')
     : installDocumentInfoServiceForDoc(ampdoc);
@@ -101,15 +129,13 @@ export function installAmpdocServices(ampdoc) {
   isEmbedded
     ? adoptServiceForEmbedDoc(ampdoc, 'history')
     : installHistoryServiceForDoc(ampdoc);
+
   isEmbedded
-    ? adoptServiceForEmbedDoc(ampdoc, 'resources')
+    ? installInaboxResourcesServiceForDoc(ampdoc)
     : installResourcesServiceForDoc(ampdoc);
-  isEmbedded
-    ? adoptServiceForEmbedDoc(ampdoc, 'owners')
-    : installOwnersServiceForDoc(ampdoc);
-  isEmbedded
-    ? adoptServiceForEmbedDoc(ampdoc, 'mutator')
-    : installMutatorServiceForDoc(ampdoc);
+  installOwnersServiceForDoc(ampdoc);
+  installMutatorServiceForDoc(ampdoc);
+
   isEmbedded
     ? adoptServiceForEmbedDoc(ampdoc, 'url-replace')
     : installUrlReplacementsServiceForDoc(ampdoc);
@@ -120,4 +146,9 @@ export function installAmpdocServices(ampdoc) {
     : installStorageServiceForDoc(ampdoc);
   installGlobalNavigationHandlerForDoc(ampdoc);
   installGlobalSubmitListenerForDoc(ampdoc);
+  if (!isEmbedded) {
+    // Embeds do not show loading indicators, since the whole embed is
+    // usually behind a parent loading indicator.
+    installLoadingIndicatorForDoc(ampdoc);
+  }
 }
diff --git a/src/service/crypto-impl.js b/src/service/crypto-impl.js
index 35dd6602cbd8b..cb95e0ef01811 100644
--- a/src/service/crypto-impl.js
+++ b/src/service/crypto-impl.js
@@ -15,10 +15,10 @@
  */
 
 import {Services} from '../services';
-import {base64UrlEncodeFromBytes} from '../utils/base64';
+import {base64UrlEncodeFromBytes} from '../core/types/string/base64';
 import {dev, devAssert, user} from '../log';
 import {getService, registerServiceBuilder} from '../service';
-import {stringToBytes, utf8Encode} from '../utils/bytes';
+import {stringToBytes, utf8Encode} from '../core/types/string/bytes';
 
 /** @const {string} */
 const TAG = 'Crypto';
@@ -78,9 +78,9 @@ export class Crypto {
 
     if (!this.subtle || this.polyfillPromise_) {
       // means native Crypto API is not available or failed before.
-      return (
-        this.polyfillPromise_ || this.loadPolyfill_()
-      ).then((polyfillSha384) => polyfillSha384(input));
+      return (this.polyfillPromise_ || this.loadPolyfill_()).then(
+        (polyfillSha384) => polyfillSha384(input)
+      );
     }
 
     try {
@@ -187,13 +187,9 @@ export class Crypto {
     const keyData = this.isLegacyWebkit_
       ? utf8Encode(JSON.stringify(/** @type {!JsonObject} */ (jwk)))
       : /** @type {!webCrypto.JsonWebKey} */ (jwk);
-    return /** @type {!Promise<!webCrypto.CryptoKey>} */ (this.subtle.importKey(
-      'jwk',
-      keyData,
-      this.pkcsAlgo,
-      true,
-      ['verify']
-    ));
+    return /** @type {!Promise<!webCrypto.CryptoKey>} */ (
+      this.subtle.importKey('jwk', keyData, this.pkcsAlgo, true, ['verify'])
+    );
   }
 
   /**
@@ -208,12 +204,9 @@ export class Crypto {
    */
   verifyPkcs(key, signature, data) {
     devAssert(this.isPkcsAvailable());
-    return /** @type {!Promise<boolean>} */ (this.subtle.verify(
-      this.pkcsAlgo,
-      key,
-      signature,
-      data
-    ));
+    return /** @type {!Promise<boolean>} */ (
+      this.subtle.verify(this.pkcsAlgo, key, signature, data)
+    );
   }
 }
 
diff --git a/src/service/custom-element-registry.js b/src/service/custom-element-registry.js
index 0b8da06cd1aa3..a2571e59369d7 100644
--- a/src/service/custom-element-registry.js
+++ b/src/service/custom-element-registry.js
@@ -14,12 +14,16 @@
  * limitations under the License.
  */
 
-import {ElementStub, stubbedElements} from '../element-stub';
-import {createCustomElementClass} from '../custom-element';
-import {extensionScriptsInNode} from '../element-service';
-import {reportError} from '../error';
+import {ElementStub} from '../element-stub';
+import {Services} from '../services';
+import {createCustomElementClass, stubbedElements} from '../custom-element';
+import {extensionScriptsInNode} from './extension-script';
+import {reportError} from '../error-reporting';
 import {userAssert} from '../log';
 
+/** @type {!WeakMap<!./service/ampdoc-impl.AmpDoc, boolean>} */
+const docInitializedMap = new WeakMap();
+
 /**
  * @param {!Window} win
  * @return {!Object<string, typeof ../base-element.BaseElement>}
@@ -38,6 +42,21 @@ function getExtendedElements(win) {
  * @param {typeof ../base-element.BaseElement} toClass
  */
 export function upgradeOrRegisterElement(win, name, toClass) {
+  const waitPromise = waitReadyForUpgrade(win, toClass);
+  if (waitPromise) {
+    waitPromise.then(() => upgradeOrRegisterElementReady(win, name, toClass));
+  } else {
+    upgradeOrRegisterElementReady(win, name, toClass);
+  }
+}
+
+/**
+ * Registers an element. Upgrades it if has previously been stubbed.
+ * @param {!Window} win
+ * @param {string} name
+ * @param {typeof ../base-element.BaseElement} toClass
+ */
+function upgradeOrRegisterElementReady(win, name, toClass) {
   const knownElements = getExtendedElements(win);
   if (!knownElements[name]) {
     registerElement(win, name, toClass);
@@ -56,7 +75,7 @@ export function upgradeOrRegisterElement(win, name, toClass) {
   );
   knownElements[name] = toClass;
   for (let i = 0; i < stubbedElements.length; i++) {
-    const stub = stubbedElements[i];
+    const element = stubbedElements[i];
     // There are 3 possible states here:
     // 1. We never made the stub because the extended impl. loaded first.
     //    In that case the element won't be in the array.
@@ -65,12 +84,11 @@ export function upgradeOrRegisterElement(win, name, toClass) {
     //    implementation.
     // 3. A stub was attached. We upgrade which means we replay the
     //    implementation.
-    const {element} = stub;
     if (
       element.tagName.toLowerCase() == name &&
       element.ownerDocument.defaultView == win
     ) {
-      tryUpgradeElement_(element, toClass);
+      tryUpgradeElement(element, toClass);
       // Remove element from array.
       stubbedElements.splice(i--, 1);
     }
@@ -82,9 +100,8 @@ export function upgradeOrRegisterElement(win, name, toClass) {
  * @param {Element} element
  * @param {typeof ../base-element.BaseElement} toClass
  * @private
- * @noinline
  */
-function tryUpgradeElement_(element, toClass) {
+function tryUpgradeElement(element, toClass) {
   try {
     element.upgrade(toClass);
   } catch (e) {
@@ -92,6 +109,23 @@ function tryUpgradeElement_(element, toClass) {
   }
 }
 
+/**
+ * Ensures that the element is ready for upgrade. Either returns immediately
+ * with `undefined` indicating that no waiting is necessary, or returns a
+ * promise that will resolve when the upgrade can proceed.
+ *
+ * @param {!Window} win
+ * @param {typeof ../base-element.BaseElement} elementClass
+ * @return {!Promise|undefind}
+ */
+function waitReadyForUpgrade(win, elementClass) {
+  // Make sure the polyfill is installed for Shadow DOM if element needs it.
+  if (elementClass.requiresShadowDom() && !win.Element.prototype.attachShadow) {
+    const extensions = Services.extensionsFor(win);
+    return extensions.importUnwrapped(win, 'amp-shadow-dom-polyfill');
+  }
+}
+
 /**
  * Stub extended elements missing an implementation. It can be called multiple
  * times and on partial document in order to start stubbing as early as
@@ -100,10 +134,13 @@ function tryUpgradeElement_(element, toClass) {
  */
 export function stubElementsForDoc(ampdoc) {
   const extensions = extensionScriptsInNode(ampdoc.getHeadNode());
-  extensions.forEach((name) => {
-    ampdoc.declareExtension(name);
-    stubElementIfNotKnown(ampdoc.win, name);
+  extensions.forEach(({extensionId, extensionVersion}) => {
+    ampdoc.declareExtension(extensionId, extensionVersion);
+    stubElementIfNotKnown(ampdoc.win, extensionId);
   });
+  if (ampdoc.isBodyAvailable()) {
+    ampdoc.setExtensionsKnown();
+  }
 }
 
 /**
@@ -140,10 +177,35 @@ export function copyElementToChildWindow(parentWin, childWin, name) {
 export function registerElement(win, name, implementationClass) {
   const knownElements = getExtendedElements(win);
   knownElements[name] = implementationClass;
-  const klass = createCustomElementClass(win);
+  const klass = createCustomElementClass(win, elementConnectedCallback);
   win['customElements'].define(name, klass);
 }
 
+/**
+ * @param {!./ampdoc-impl.AmpDoc} ampdoc
+ * @param {!AmpElement} element
+ * @param {?(typeof BaseElement)} implementationClass
+ * @visibleForTesting
+ */
+export function elementConnectedCallback(ampdoc, element, implementationClass) {
+  // Make sure that the ampdoc has already been stubbed.
+  if (!docInitializedMap.has(ampdoc)) {
+    docInitializedMap.set(ampdoc, true);
+    stubElementsForDoc(ampdoc);
+  }
+
+  // Load the pre-stubbed legacy extension if needed.
+  const extensionId = element.localName;
+  if (!implementationClass && !ampdoc.declaresExtension(extensionId)) {
+    Services.extensionsFor(ampdoc.win).installExtensionForDoc(
+      ampdoc,
+      extensionId,
+      // The legacy auto-extensions are always 0.1.
+      '0.1'
+    );
+  }
+}
+
 /**
  * In order to provide better error messages we only allow to retrieve
  * services from other elements if those elements are loaded in the page.
diff --git a/src/service/document-info-impl.js b/src/service/document-info-impl.js
index 98317232c9840..36be0e6cd4e15 100644
--- a/src/service/document-info-impl.js
+++ b/src/service/document-info-impl.js
@@ -14,16 +14,11 @@
  * limitations under the License.
  */
 
-import {
-  getProxyServingType,
-  getSourceUrl,
-  parseQueryString,
-  parseUrlDeprecated,
-} from '../url';
-
+import {getProxyServingType, getSourceUrl, parseUrlDeprecated} from '../url';
 import {getRandomString64} from './cid-impl';
-import {isArray} from '../types';
-import {map} from '../utils/object';
+import {isArray} from '../core/types';
+import {map} from '../core/types/object';
+import {parseQueryString} from '../core/types/string/url';
 import {registerServiceBuilderForDoc} from '../service';
 
 /** @private @const {!Array<string>} */
diff --git a/src/service/extension-location.js b/src/service/extension-location.js
deleted file mode 100644
index 7342fdff2370a..0000000000000
--- a/src/service/extension-location.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {getMode} from '../mode';
-import {urls} from '../config';
-
-/**
- * Internal structure that maintains the state of an extension through loading.
- *
- * @typedef {{
- *   extensionId: (string|undefined),
- *   extensionVersion: (string|undefined),
- * }}
- * @private
- */
-let ExtensionInfoDef;
-
-/**
- * Calculate the base url for any scripts.
- * @param {!Location} location The window's location
- * @param {boolean=} opt_isLocalDev
- * @return {string}
- */
-export function calculateScriptBaseUrl(location, opt_isLocalDev) {
-  if (opt_isLocalDev) {
-    let prefix = `${location.protocol}//${location.host}`;
-    if (location.protocol == 'about:') {
-      prefix = '';
-    }
-    return `${prefix}/dist`;
-  }
-  return urls.cdn;
-}
-
-/**
- * Calculate script url for an extension.
- * @param {!Location} location The window's location
- * @param {string} extensionId
- * @param {string=} opt_extensionVersion
- * @param {boolean=} opt_isLocalDev
- * @return {string}
- */
-export function calculateExtensionScriptUrl(
-  location,
-  extensionId,
-  opt_extensionVersion,
-  opt_isLocalDev
-) {
-  const fileExtension = getMode().esm ? '.mjs' : '.js';
-  const base = calculateScriptBaseUrl(location, opt_isLocalDev);
-  const rtv = getMode().rtvVersion;
-  if (opt_extensionVersion == null) {
-    opt_extensionVersion = '0.1';
-  }
-  const extensionVersion = opt_extensionVersion
-    ? '-' + opt_extensionVersion
-    : '';
-  return `${base}/rtv/${rtv}/v0/${extensionId}${extensionVersion}${fileExtension}`;
-}
-
-/**
- * Calculate script url for an entry point.
- * If `opt_rtv` is true, returns the URL matching the current RTV.
- * @param {!Location} location The window's location
- * @param {string} entryPoint
- * @param {boolean=} isLocalDev
- * @param {boolean=} opt_rtv
- * @return {string}
- */
-export function calculateEntryPointScriptUrl(
-  location,
-  entryPoint,
-  isLocalDev,
-  opt_rtv
-) {
-  const fileExtension = getMode().esm ? '.mjs' : '.js';
-  const base = calculateScriptBaseUrl(location, isLocalDev);
-  if (isLocalDev) {
-    return `${base}/${entryPoint}${fileExtension}`;
-  }
-  if (opt_rtv) {
-    return `${base}/rtv/${getMode().rtvVersion}/${entryPoint}${fileExtension}`;
-  }
-  return `${base}/${entryPoint}${fileExtension}`;
-}
-
-/**
- * Parse the extension version from a given script URL.
- * @param {string} scriptUrl
- * @return {!ExtensionInfoDef}
- */
-export function parseExtensionUrl(scriptUrl) {
-  // Note that the "(\.max)?" group only applies to local dev.
-  const matches = scriptUrl.match(
-    /^(.*)\/(.*)-([0-9.]+|latest)(\.max)?\.(?:js|mjs)$/i
-  );
-  return {
-    extensionId: matches ? matches[2] : undefined,
-    extensionVersion: matches ? matches[3] : undefined,
-  };
-}
diff --git a/src/service/extension-script.js b/src/service/extension-script.js
new file mode 100644
index 0000000000000..820eb2a3e7cb2
--- /dev/null
+++ b/src/service/extension-script.js
@@ -0,0 +1,261 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {getMode} from '../mode';
+import {urls} from '../config';
+
+const CUSTOM_TEMPLATES = ['amp-mustache'];
+const LATEST_VERSION = 'latest';
+
+/**
+ * Calculate the base url for any scripts.
+ * @param {!Location} location The window's location
+ * @param {boolean=} opt_isLocalDev
+ * @return {string}
+ */
+export function calculateScriptBaseUrl(location, opt_isLocalDev) {
+  if (opt_isLocalDev) {
+    let prefix = `${location.protocol}//${location.host}`;
+    if (
+      location.protocol == 'about:' ||
+      location.protocol == 'blob:' ||
+      location.protocol == 'data:'
+    ) {
+      prefix = '';
+    }
+    return `${prefix}/dist`;
+  }
+  return urls.cdn;
+}
+
+/**
+ * Calculate script url for an extension.
+ * @param {!Location} location The window's location
+ * @param {string} extensionId
+ * @param {string} version
+ * @param {boolean=} opt_isLocalDev
+ * @return {string}
+ */
+export function calculateExtensionScriptUrl(
+  location,
+  extensionId,
+  version,
+  opt_isLocalDev
+) {
+  const fileExtension = getMode().esm ? '.mjs' : '.js';
+  const base = calculateScriptBaseUrl(location, opt_isLocalDev);
+  const rtv = getMode().rtvVersion;
+  const extensionVersion = version ? '-' + version : '';
+  return `${base}/rtv/${rtv}/v0/${extensionId}${extensionVersion}${fileExtension}`;
+}
+
+/**
+ * Calculate script url for an entry point.
+ * If `opt_rtv` is true, returns the URL matching the current RTV.
+ * @param {!Location} location The window's location
+ * @param {string} entryPoint
+ * @param {boolean=} isLocalDev
+ * @param {boolean=} opt_rtv
+ * @return {string}
+ */
+export function calculateEntryPointScriptUrl(
+  location,
+  entryPoint,
+  isLocalDev,
+  opt_rtv
+) {
+  const fileExtension = getMode().esm ? '.mjs' : '.js';
+  const base = calculateScriptBaseUrl(location, isLocalDev);
+  if (isLocalDev) {
+    return `${base}/${entryPoint}${fileExtension}`;
+  }
+  if (opt_rtv) {
+    return `${base}/rtv/${getMode().rtvVersion}/${entryPoint}${fileExtension}`;
+  }
+  return `${base}/${entryPoint}${fileExtension}`;
+}
+
+/**
+ * Parse the extension version from a given script URL.
+ * @param {string} scriptUrl
+ * @return {?{extensionId: string, extensionVersion: string}}
+ */
+export function parseExtensionUrl(scriptUrl) {
+  if (!scriptUrl) {
+    return null;
+  }
+  // Note that the "(\.max)?" group only applies to local dev.
+  const matches = scriptUrl.match(
+    /^(.*)\/(.*)-([0-9.]+|latest)(\.max)?\.(?:js|mjs)$/i
+  );
+  const extensionId = matches ? matches[2] : undefined;
+  const extensionVersion = matches ? matches[3] : undefined;
+  if (!extensionId || !extensionVersion) {
+    return null;
+  }
+  return {extensionId, extensionVersion};
+}
+
+/**
+ * Create the missing amp extension HTML script element.
+ * @param {!Window} win
+ * @param {string} extensionId
+ * @param {string} version
+ * @return {!Element} Script object
+ */
+export function createExtensionScript(win, extensionId, version) {
+  const scriptElement = win.document.createElement('script');
+  scriptElement.async = true;
+  if (isIntermediateExtension(extensionId)) {
+    version = '';
+  } else {
+    scriptElement.setAttribute(
+      CUSTOM_TEMPLATES.indexOf(extensionId) >= 0
+        ? 'custom-template'
+        : 'custom-element',
+      extensionId
+    );
+  }
+  scriptElement.setAttribute('data-script', extensionId);
+  scriptElement.setAttribute('i-amphtml-inserted', '');
+  if (getMode().esm) {
+    scriptElement.setAttribute('type', 'module');
+  }
+
+  // Propagate nonce to all generated script tags.
+  const currentScript = win.document.head.querySelector('script[nonce]');
+  if (currentScript) {
+    scriptElement.setAttribute('nonce', currentScript.getAttribute('nonce'));
+  }
+
+  // Allow error information to be collected
+  // https://github.com/ampproject/amphtml/issues/7353
+  scriptElement.setAttribute('crossorigin', 'anonymous');
+  let loc = win.location;
+  if (getMode(win).test && win.testLocation) {
+    loc = win.testLocation;
+  }
+  const scriptSrc = calculateExtensionScriptUrl(
+    loc,
+    extensionId,
+    version,
+    getMode(win).localDev
+  );
+  scriptElement.src = scriptSrc;
+  return scriptElement;
+}
+
+/**
+ * Returns the extension <script> element and attribute for the given
+ * extension ID, if it exists. Otherwise, returns null.
+ * @param {!Window} win
+ * @param {string} extensionId
+ * @param {string} version
+ * @param {boolean} latest
+ * @param {boolean=} includeInserted If true, includes script elements that
+ *   are inserted by the runtime dynamically. Default is true.
+ * @return {!Array<!Element>}
+ */
+export function getExtensionScripts(
+  win,
+  extensionId,
+  version,
+  latest,
+  includeInserted = true
+) {
+  // Always ignore <script> elements that have a mismatched RTV.
+  const modifier =
+    ':not([i-amphtml-loaded-new-version])' +
+    (includeInserted ? '' : ':not([i-amphtml-inserted])');
+  // We have to match against "src" because a few extensions, such as
+  // "amp-viewer-integration", do not have "custom-element" attribute.
+  const matches = win.document.head./*OK*/ querySelectorAll(
+    `script[src*="/${extensionId}-"]${modifier}`
+  );
+  const filtered = [];
+  for (let i = 0; i < matches.length; i++) {
+    const match = matches[i];
+    const urlParts = parseExtensionUrl(match.src);
+    if (!urlParts) {
+      continue;
+    }
+    const {
+      extensionId: scriptExtensionId,
+      extensionVersion: scriptExtensionVersion,
+    } = urlParts;
+    if (
+      scriptExtensionId == extensionId &&
+      (isIntermediateExtension(extensionId) ||
+        scriptExtensionVersion == version ||
+        (scriptExtensionVersion == LATEST_VERSION && latest))
+    ) {
+      filtered.push(match);
+    }
+  }
+  return filtered;
+}
+
+/**
+ * Get list of all the extension JS files.
+ * @param {HTMLHeadElement|Element|ShadowRoot|Document} head
+ * @return {!Array<{extensionId: string, extensionVersion: string}>}
+ */
+export function extensionScriptsInNode(head) {
+  // ampdoc.getHeadNode() can return null.
+  if (!head) {
+    return [];
+  }
+  // Note: Some extensions don't have [custom-element] or [custom-template]
+  // e.g. amp-viewer-integration.
+  const list = head.querySelectorAll(
+    'script[custom-element],script[custom-template]'
+  );
+  const scripts = [];
+  for (let i = 0; i < list.length; i++) {
+    const script = list[i];
+    const extensionId =
+      script.getAttribute('custom-element') ||
+      script.getAttribute('custom-template');
+    const urlParts = parseExtensionUrl(script.src);
+    if (extensionId && urlParts) {
+      scripts.push({extensionId, extensionVersion: urlParts.extensionVersion});
+    }
+  }
+  return scripts;
+}
+
+/**
+ * Verifies that an extension script is present in head for
+ * installation.
+ * @param {!Window} win
+ * @param {string} id
+ * @param {string} version
+ * @return {boolean}
+ */
+export function extensionScriptInNode(win, id, version) {
+  return extensionScriptsInNode(win.document.head).some(
+    ({extensionId, extensionVersion}) =>
+      id == extensionId && version == extensionVersion
+  );
+}
+
+/**
+ * @param {string} extensionId
+ * @return {boolean}
+ */
+function isIntermediateExtension(extensionId) {
+  return extensionId.startsWith('_');
+}
diff --git a/src/service/extensions-impl.js b/src/service/extensions-impl.js
index 12f1f26b9d496..e48d12ed4811e 100644
--- a/src/service/extensions-impl.js
+++ b/src/service/extensions-impl.js
@@ -14,35 +14,29 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../utils/promise';
+import {Deferred} from '../core/data-structures/promise';
 import {Services} from '../services';
 import {
-  calculateExtensionScriptUrl,
-  parseExtensionUrl,
-} from './extension-location';
-import {dev, devAssert, rethrowAsync} from '../log';
-import {getMode} from '../mode';
-import {installStylesForDoc} from '../style-installer';
-import {map} from '../utils/object';
-import {registerServiceBuilder, registerServiceBuilderForDoc} from '../service';
-import {startsWith} from '../string';
-import {
+  copyElementToChildWindow,
   stubElementIfNotKnown,
   upgradeOrRegisterElement,
 } from './custom-element-registry';
+import {createExtensionScript, getExtensionScripts} from './extension-script';
+import {dev, devAssert, user} from '../log';
+import {getMode} from '../mode';
+import {installStylesForDoc} from '../style-installer';
+import {map} from '../core/types/object';
+import {registerExtendedTemplateForDoc} from './template-impl';
+import {registerServiceBuilder, registerServiceBuilderForDoc} from '../service';
+import {rethrowAsync} from '../core/error';
 
 export const LEGACY_ELEMENTS = ['amp-ad', 'amp-embed', 'amp-video'];
 const TAG = 'extensions';
+const DEFAULT_VERSION = '0.1';
+const LATEST_VERSION = 'latest';
 const UNKNOWN_EXTENSION = '_UNKNOWN_';
-const CUSTOM_TEMPLATES = ['amp-mustache'];
 const LOADER_PROP = '__AMP_EXT_LDR';
-
-/**
- * Default milliseconds to wait for all extensions to load before erroring.
- * (8 seconds is the same as the CSS boilerplate timoeout)
- * @const
- */
-const LOAD_TIMEOUT = 16000;
+const SCRIPT_LOADED_PROP = '__AMP_SCR_LOADED';
 
 /**
  * Contains data for the declaration of a custom element.
@@ -76,6 +70,8 @@ let ExtensionDef;
  * Internal structure that maintains the state of an extension through loading.
  *
  * @typedef {{
+ *   version: string,
+ *   latest: boolean,
  *   extension: !ExtensionDef,
  *   auto: boolean,
  *   docFactories: !Array<function(!./ampdoc-impl.AmpDoc)>,
@@ -90,22 +86,6 @@ let ExtensionDef;
  */
 let ExtensionHolderDef;
 
-/**
- * @param {string} extensionId
- * @return {boolean}
- */
-export function isTemplateExtension(extensionId) {
-  return CUSTOM_TEMPLATES.indexOf(extensionId) >= 0;
-}
-
-/**
- * @param {string} extensionId
- * @return {boolean}
- */
-function isIntermediateExtension(extensionId) {
-  return startsWith(extensionId, '_');
-}
-
 /**
  * Install extensions service.
  * @param {!Window} window
@@ -135,6 +115,12 @@ export class Extensions {
 
     /** @private {?string} */
     this.currentExtensionId_ = null;
+
+    /** @private {?string} */
+    this.currentExtensionVersion_ = null;
+
+    /** @private {?boolean} */
+    this.currentExtensionLatest_ = null;
   }
 
   /**
@@ -143,14 +129,45 @@ export class Extensions {
    * services and document factories. This method is called by the extension's
    * script itself when it's loaded using the regular `AMP.push()` callback.
    * @param {string} extensionId
+   * @param {string} version
+   * @param {boolean} latest
    * @param {function(!Object, !Object)} factory
    * @param {!Object} arg
    * @restricted
    */
-  registerExtension(extensionId, factory, arg) {
-    const holder = this.getExtensionHolder_(extensionId, /* auto */ true);
+  registerExtension(extensionId, version, latest, factory, arg) {
+    const latestHolder = latest
+      ? this.extensions_[extensionKey(extensionId, LATEST_VERSION)]
+      : null;
+    const holder = this.getExtensionHolder_(
+      extensionId,
+      version,
+      // Inherit the `auto` (auto-install) flag from the "latest" version
+      // when available. If the "latest" has been added as a non-auto-install
+      // then this registration should not auto-install either. If the numeric
+      // version was independently added to the document, then it's auto-install
+      // will be preserved.
+      latestHolder?.auto ?? true
+    );
+    holder.latest = latest;
+
+    if (holder.loaded) {
+      // This extension has already been registered. This could be a
+      // a "latest" script requested for a previously loaded numeric
+      // version or vice versa.
+      return;
+    }
+
+    // Replace the "latest": both numerical and "latest" will be pointing to
+    // the same record.
+    if (latest) {
+      this.extensions_[extensionKey(extensionId, LATEST_VERSION)] = holder;
+    }
+
     try {
       this.currentExtensionId_ = extensionId;
+      this.currentExtensionVersion_ = version;
+      this.currentExtensionLatest_ = latest;
       factory(arg, arg['_']);
       if (getMode(this.win).localDev || getMode(this.win).test) {
         if (Object.freeze) {
@@ -160,55 +177,55 @@ export class Extensions {
         }
       }
       holder.loaded = true;
-      if (holder.resolve) {
-        holder.resolve(holder.extension);
-      }
+      holder.resolve?.(holder.extension);
+      latestHolder?.resolve?.(holder.extension);
     } catch (e) {
       holder.error = e;
-      if (holder.reject) {
-        holder.reject(e);
-      }
+      holder.reject?.(e);
+      latestHolder?.reject?.(e);
       throw e;
     } finally {
       this.currentExtensionId_ = null;
+      this.currentExtensionVersion_ = null;
+      this.currentExtensionLatest_ = null;
     }
   }
 
   /**
    * Waits for the previously included extension to complete
    * loading/registration.
-   * @param {!Window} win
    * @param {string} extensionId
-   * @param {number=} opt_timeout
+   * @param {string} version
    * @return {!Promise<?ExtensionDef>}
    */
-  waitForExtension(win, extensionId, opt_timeout) {
-    return /** @type {!Promise<?ExtensionDef>} */ (Services.timerFor(
-      win
-    ).timeoutPromise(
-      opt_timeout || LOAD_TIMEOUT,
-      this.waitFor_(this.getExtensionHolder_(extensionId, /* auto */ false)),
-      `Render timeout waiting for extension ${extensionId} to be load.`
-    ));
+  waitForExtension(extensionId, version) {
+    const wait = this.waitFor_(this.getExtensionHolder_(extensionId, version));
+
+    return Services.timerFor(this.win)
+      .timeoutPromise(16000, wait)
+      .catch((err) => {
+        if (!err.message.includes('timeout')) {
+          throw err;
+        }
+
+        user().error(TAG, `Waited over 16s to load extension ${extensionId}.`);
+        return wait;
+      });
   }
 
   /**
    * Returns the promise that will be resolved when the extension has been
    * loaded. If necessary, adds the extension script to the page.
    * @param {string} extensionId
-   * @param {string=} opt_extensionVersion
+   * @param {string=} version
    * @return {!Promise<!ExtensionDef>}
    */
-  preloadExtension(extensionId, opt_extensionVersion) {
+  preloadExtension(extensionId, version = DEFAULT_VERSION) {
     if (extensionId == 'amp-embed') {
       extensionId = 'amp-ad';
     }
-    const holder = this.getExtensionHolder_(extensionId, /* auto */ false);
-    this.insertExtensionScriptIfNeeded_(
-      extensionId,
-      holder,
-      opt_extensionVersion
-    );
+    const holder = this.getExtensionHolder_(extensionId, version);
+    this.insertExtensionScriptIfNeeded_(extensionId, version, holder);
     return this.waitFor_(holder);
   }
 
@@ -217,10 +234,10 @@ export class Extensions {
    * loaded. If necessary, adds the extension script to the page.
    * @param {!./ampdoc-impl.AmpDoc} ampdoc
    * @param {string} extensionId
-   * @param {string=} opt_extensionVersion
+   * @param {string=} version
    * @return {!Promise<!ExtensionDef>}
    */
-  installExtensionForDoc(ampdoc, extensionId, opt_extensionVersion) {
+  installExtensionForDoc(ampdoc, extensionId, version = DEFAULT_VERSION) {
     const rootNode = ampdoc.getRootNode();
     let extLoaders = rootNode[LOADER_PROP];
     if (!extLoaders) {
@@ -229,32 +246,33 @@ export class Extensions {
     if (extLoaders[extensionId]) {
       return extLoaders[extensionId];
     }
+    ampdoc.declareExtension(extensionId, version);
     stubElementIfNotKnown(ampdoc.win, extensionId);
     return (extLoaders[extensionId] = this.preloadExtension(
       extensionId,
-      opt_extensionVersion
-    ).then(() => this.installExtensionInDoc(ampdoc, extensionId)));
+      version
+    ).then(() => this.installExtensionInDoc(ampdoc, extensionId, version)));
   }
 
   /**
    * Reloads the new version of the extension.
    * @param {string} extensionId
+   * @param {string} version
+   * @param {boolean} latest
    * @return {!Promise<!ExtensionDef>}
    */
-  reloadExtension(extensionId) {
+  reloadExtension(extensionId, version, latest) {
     // Ignore inserted script elements to prevent recursion.
-    const els = this.getExtensionScripts_(
+    const els = getExtensionScripts(
+      this.win,
       extensionId,
+      version,
+      latest,
       /* includeInserted */ false
     );
-    devAssert(
-      els.length > 0,
-      'Cannot find script for extension: %s',
-      extensionId
-    );
     // The previously awaited extension loader must not have finished or
     // failed.
-    const holder = this.extensions_[extensionId];
+    const holder = this.extensions_[extensionKey(extensionId, version)];
     if (holder) {
       devAssert(!holder.loaded && !holder.error);
       holder.scriptPresent = false;
@@ -262,38 +280,38 @@ export class Extensions {
     els.forEach((el) =>
       el.setAttribute('i-amphtml-loaded-new-version', extensionId)
     );
-    const urlParts = parseExtensionUrl(els[0].src);
-    return this.preloadExtension(extensionId, urlParts.extensionVersion);
+    return this.preloadExtension(extensionId, version);
   }
 
   /**
-   * Returns the extension <script> element and attribute for the given
-   * extension ID, if it exists. Otherwise, returns null.
+   * @param {!Window} win
    * @param {string} extensionId
-   * @param {boolean=} includeInserted If true, includes script elements that
-   *   are inserted by the runtime dynamically. Default is true.
-   * @return {!Array<!Element>}
-   * @private
+   * @param {string=} version
+   * @param {boolean=} latest
+   * @return {!Promise}
    */
-  getExtensionScripts_(extensionId, includeInserted = true) {
-    // Always ignore <script> elements that have a mismatched RTV.
-    const modifier =
-      ':not([i-amphtml-loaded-new-version])' +
-      (includeInserted ? '' : ':not([i-amphtml-inserted])');
-    // We have to match against "src" because a few extensions, such as
-    // "amp-viewer-integration", do not have "custom-element" attribute.
-    const matches = this.win.document.head./*OK*/ querySelectorAll(
-      `script[src*="/${extensionId}-"]` + modifier
+  importUnwrapped(win, extensionId, version = DEFAULT_VERSION, latest = true) {
+    const scriptsInHead = getExtensionScripts(
+      win,
+      extensionId,
+      version,
+      latest
     );
-    const filtered = [];
-    for (let i = 0; i < matches.length; i++) {
-      const match = matches[i];
-      const urlParts = parseExtensionUrl(match.src);
-      if (urlParts.extensionId === extensionId) {
-        filtered.push(match);
-      }
+    let scriptElement = scriptsInHead.length > 0 ? scriptsInHead[0] : null;
+    let promise;
+    if (scriptElement) {
+      promise = scriptElement[SCRIPT_LOADED_PROP];
+    } else {
+      scriptElement = createExtensionScript(this.win, extensionId, version);
+      promise = scriptElement[SCRIPT_LOADED_PROP] = new Promise(
+        (resolve, reject) => {
+          scriptElement.onload = resolve;
+          scriptElement.onerror = reject;
+        }
+      );
+      win.document.head.appendChild(scriptElement);
     }
-    return filtered;
+    return promise;
   }
 
   /**
@@ -301,10 +319,11 @@ export class Extensions {
    * class when the extension has been loaded. If necessary, adds the extension
    * script to the page.
    * @param {string} elementName
+   * @param {string} version
    * @return {!Promise<typeof ../base-element.BaseElement>}
    */
-  loadElementClass(elementName) {
-    return this.preloadExtension(elementName).then((extension) => {
+  loadElementClass(elementName, version = DEFAULT_VERSION) {
+    return this.preloadExtension(elementName, version).then((extension) => {
       const element = devAssert(
         extension.elements[elementName],
         'Element not found: %s',
@@ -331,6 +350,20 @@ export class Extensions {
     });
   }
 
+  /**
+   * Add a template type to the extension currently being registered. This is a
+   * restricted method and it's allowed to be called only during the overall
+   * extension registration.
+   * @param {string} name
+   * @param {typeof ../base-template.BaseTemplate} implementationClass
+   * @restricted
+   */
+  addTemplate(name, implementationClass) {
+    this.addDocFactory((ampdoc) => {
+      registerExtendedTemplateForDoc(ampdoc, name, implementationClass);
+    });
+  }
+
   /**
    * Installs the specified element implementation in the ampdoc.
    * @param {!./ampdoc-impl.AmpDoc} ampdoc
@@ -376,7 +409,7 @@ export class Extensions {
    * @param {function(new:Object, !./ampdoc-impl.AmpDoc)} implementationClass
    */
   addService(name, implementationClass) {
-    const holder = this.getCurrentExtensionHolder_();
+    const holder = this.getCurrentExtensionHolder_(name);
     holder.extension.services.push(
       /** @type {!ExtensionServiceDef} */ ({
         serviceName: name,
@@ -409,67 +442,110 @@ export class Extensions {
     if (this.currentExtensionId_ && this.ampdocService_.isSingleDoc()) {
       const ampdoc = this.ampdocService_.getAmpDoc(this.win.document);
       const extensionId = dev().assertString(this.currentExtensionId_);
+      const version = dev().assertString(this.currentExtensionVersion_);
+      const latest = this.currentExtensionLatest_ || false;
       // Note that this won't trigger for FIE extensions that are not present
       // in the parent doc.
-      if (ampdoc.declaresExtension(extensionId) || holder.auto) {
+      if (
+        ampdoc.declaresExtension(extensionId, version) ||
+        (latest && ampdoc.declaresExtension(extensionId, LATEST_VERSION)) ||
+        holder.auto
+      ) {
         factory(ampdoc);
       }
     }
   }
 
+  /**
+   * Preinstalls built-ins and legacy elements in the emebedded ampdoc.
+   * @param {!./ampdoc-impl.AmpDoc} ampdoc
+   * @param {!Array<{extensionId: string, extensionVersion: string}>} extensions
+   * @restricted
+   */
+  preinstallEmbed(ampdoc, extensions) {
+    const topWin = this.win;
+    const childWin = ampdoc.win;
+
+    // Install built-ins and legacy elements.
+    copyBuiltinElementsToChildWindow(topWin, childWin);
+    stubLegacyElements(childWin);
+
+    // Stub extensions.
+    extensions.forEach(({extensionId, extensionVersion}) => {
+      // Declare the extension version on ampdoc so it doesn't request the
+      // extension again.
+      ampdoc.declareExtension(extensionId, extensionVersion);
+
+      // This will extend automatic upgrade of custom elements from top
+      // window to the child window.
+      if (!LEGACY_ELEMENTS.includes(extensionId)) {
+        stubElementIfNotKnown(childWin, extensionId);
+      }
+    });
+  }
+
   /**
    * Installs all ampdoc factories previously registered with
    * `addDocFactory`.
    * @param {!./ampdoc-impl.AmpDoc} ampdoc
-   * @param {!Array<string>} extensionIds
+   * @param {!Array<{extensionId: string, extensionVersion: string}>} extensions
    * @return {!Promise}
    * @restricted
    */
-  installExtensionsInDoc(ampdoc, extensionIds) {
-    const promises = [];
-    extensionIds.forEach((extensionId) => {
-      promises.push(this.installExtensionInDoc(ampdoc, extensionId));
-    });
-    return Promise.all(promises);
+  installExtensionsInDoc(ampdoc, extensions) {
+    return Promise.all(
+      extensions.map(({extensionId, extensionVersion}) =>
+        this.installExtensionInDoc(ampdoc, extensionId, extensionVersion)
+      )
+    );
   }
 
   /**
    * Installs all ampdoc factories for the specified extension.
    * @param {!./ampdoc-impl.AmpDoc} ampdoc
    * @param {string} extensionId
+   * @param {string=} version
    * @return {!Promise}
    */
-  installExtensionInDoc(ampdoc, extensionId) {
-    const holder = this.getExtensionHolder_(extensionId, /* auto */ false);
-    return this.waitFor_(holder).then(() => {
-      ampdoc.declareExtension(extensionId);
-      holder.docFactories.forEach((factory) => {
-        try {
-          factory(ampdoc);
-        } catch (e) {
-          rethrowAsync('Doc factory failed: ', e, extensionId);
-        }
-      });
-    });
+  installExtensionInDoc(ampdoc, extensionId, version = DEFAULT_VERSION) {
+    ampdoc.declareExtension(extensionId, version);
+    return this.waitFor_(this.getExtensionHolder_(extensionId, version)).then(
+      () => {
+        const holder = this.getExtensionHolder_(extensionId, version);
+        holder.docFactories.forEach((factory) => {
+          try {
+            factory(ampdoc);
+          } catch (e) {
+            rethrowAsync('Doc factory failed: ', e, extensionId);
+          }
+        });
+      }
+    );
   }
 
   /**
    * Creates or returns an existing extension holder.
    * @param {string} extensionId
-   * @param {boolean} auto
+   * @param {string} version
+   * @param {boolean=} opt_auto
    * @return {!ExtensionHolderDef}
    * @private
    */
-  getExtensionHolder_(extensionId, auto) {
-    let holder = this.extensions_[extensionId];
+  getExtensionHolder_(extensionId, version, opt_auto) {
+    const key = extensionKey(extensionId, version);
+    let holder = this.extensions_[key];
     if (!holder) {
       const extension = /** @type {ExtensionDef} */ ({
         elements: {},
         services: [],
       });
       holder = /** @type {ExtensionHolderDef} */ ({
+        version,
+        // Usually a version starts "unknown" and the latest becomes known
+        // when it has been loaded.
+        latest: version == LATEST_VERSION,
         extension,
-        auto,
+        auto: opt_auto || false,
         docFactories: [],
         promise: undefined,
         resolve: undefined,
@@ -478,7 +554,7 @@ export class Extensions {
         error: undefined,
         scriptPresent: undefined,
       });
-      this.extensions_[extensionId] = holder;
+      this.extensions_[key] = holder;
     }
     return holder;
   }
@@ -495,7 +571,7 @@ export class Extensions {
     }
     return this.getExtensionHolder_(
       this.currentExtensionId_ || UNKNOWN_EXTENSION,
-      /* auto */ true
+      this.currentExtensionVersion_ || ''
     );
   }
 
@@ -525,15 +601,16 @@ export class Extensions {
   /**
    * Ensures that the script has already been injected in the page.
    * @param {string} extensionId
+   * @param {string} version
    * @param {!ExtensionHolderDef} holder
-   * @param {string=} opt_extensionVersion
    * @private
    */
-  insertExtensionScriptIfNeeded_(extensionId, holder, opt_extensionVersion) {
-    if (this.isExtensionScriptRequired_(extensionId, holder)) {
-      const scriptElement = this.createExtensionScript_(
+  insertExtensionScriptIfNeeded_(extensionId, version, holder) {
+    if (this.isExtensionScriptRequired_(extensionId, version, holder)) {
+      const scriptElement = createExtensionScript(
+        this.win,
         extensionId,
-        opt_extensionVersion
+        version
       );
       this.win.document.head.appendChild(scriptElement);
       holder.scriptPresent = true;
@@ -543,75 +620,26 @@ export class Extensions {
   /**
    * Determine the need to add amp extension script to document.
    * @param {string} extensionId
+   * @param {string} version
    * @param {!ExtensionHolderDef} holder
    * @return {boolean}
    * @private
    */
-  isExtensionScriptRequired_(extensionId, holder) {
+  isExtensionScriptRequired_(extensionId, version, holder) {
     if (holder.loaded || holder.error) {
       return false;
     }
     if (holder.scriptPresent === undefined) {
-      const scriptsInHead = this.getExtensionScripts_(extensionId);
+      const scriptsInHead = getExtensionScripts(
+        this.win,
+        extensionId,
+        version,
+        holder.latest
+      );
       holder.scriptPresent = scriptsInHead.length > 0;
     }
     return !holder.scriptPresent;
   }
-
-  /**
-   * Create the missing amp extension HTML script element.
-   * @param {string} extensionId
-   * @param {string=} opt_extensionVersion
-   * @return {!Element} Script object
-   * @private
-   */
-  createExtensionScript_(extensionId, opt_extensionVersion) {
-    const scriptElement = this.win.document.createElement('script');
-    scriptElement.async = true;
-    if (isIntermediateExtension(extensionId)) {
-      opt_extensionVersion = '';
-    } else {
-      scriptElement.setAttribute(
-        this.attributeForExtension_(extensionId),
-        extensionId
-      );
-    }
-    scriptElement.setAttribute('data-script', extensionId);
-    scriptElement.setAttribute('i-amphtml-inserted', '');
-
-    // Propagate nonce to all generated script tags.
-    const currentScript = this.win.document.head.querySelector('script[nonce]');
-    if (currentScript) {
-      scriptElement.setAttribute('nonce', currentScript.getAttribute('nonce'));
-    }
-
-    // Allow error information to be collected
-    // https://github.com/ampproject/amphtml/issues/7353
-    scriptElement.setAttribute('crossorigin', 'anonymous');
-    let loc = this.win.location;
-    if (getMode(this.win).test && this.win.testLocation) {
-      loc = this.win.testLocation;
-    }
-    const scriptSrc = calculateExtensionScriptUrl(
-      loc,
-      extensionId,
-      opt_extensionVersion,
-      getMode(this.win).localDev
-    );
-    scriptElement.src = scriptSrc;
-    return scriptElement;
-  }
-
-  /**
-   * @param {string} extensionId
-   * @return {string}
-   * @private
-   */
-  attributeForExtension_(extensionId) {
-    return isTemplateExtension(extensionId)
-      ? 'custom-template'
-      : 'custom-element';
-  }
 }
 
 /**
@@ -623,6 +651,16 @@ export function stubLegacyElements(win) {
   });
 }
 
+/**
+ * Copy builtins to a child window.
+ * @param {!Window} parentWin
+ * @param {!Window} childWin
+ */
+function copyBuiltinElementsToChildWindow(parentWin, childWin) {
+  copyElementToChildWindow(parentWin, childWin, 'amp-img');
+  copyElementToChildWindow(parentWin, childWin, 'amp-pixel');
+}
+
 /**
  * @return {!Object}
  */
@@ -630,3 +668,12 @@ function emptyService() {
   // All services need to resolve to an object.
   return {};
 }
+
+/**
+ * @param {string} extensionId
+ * @param {string} version
+ * @return {string}
+ */
+function extensionKey(extensionId, version) {
+  return `${extensionId}:${version}`;
+}
diff --git a/src/service/fixed-layer.js b/src/service/fixed-layer.js
index 6d6558059cc46..acbb1c181a381 100644
--- a/src/service/fixed-layer.js
+++ b/src/service/fixed-layer.js
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import {Animation} from '../animation';
 import {Pass} from '../pass';
 import {Services} from '../services';
 import {
@@ -29,10 +30,9 @@ import {
 } from '../style';
 import {closest, domOrderComparator, matches} from '../dom';
 import {dev, user} from '../log';
-import {endsWith} from '../string';
+import {endsWith} from '../core/types/string';
 import {getMode} from '../mode';
-import {isExperimentOn} from '../experiments';
-import {remove} from '../utils/array';
+import {remove} from '../core/types/array';
 
 const TAG = 'FixedLayer';
 
@@ -236,9 +236,6 @@ export class FixedLayer {
    * @visibleForTesting
    */
   observeHiddenMutations() {
-    if (!isExperimentOn(this.ampdoc.win, 'hidden-mutation-observer')) {
-      return;
-    }
     this.initHiddenObserver_();
   }
 
@@ -466,8 +463,8 @@ export class FixedLayer {
               const {element, forceTransfer} = fe;
               const style = computedStyle(win, element);
 
-              const {offsetWidth, offsetHeight, offsetTop} = element;
-              const {position = '', display = '', bottom, zIndex} = style;
+              const {offsetHeight, offsetTop, offsetWidth} = element;
+              const {bottom, display = '', position = '', zIndex} = style;
               const opacity = parseFloat(style.opacity);
               const transform =
                 style[getVendorJsPropertyName(style, 'transform')];
@@ -577,7 +574,6 @@ export class FixedLayer {
    * @param {!Node} root
    * @param {boolean=} opt_lightboxMode
    * @private
-   * @noinline
    */
   trySetupSelectors_(root, opt_lightboxMode) {
     try {
@@ -888,6 +884,36 @@ export class FixedLayer {
       }
     }
   }
+
+  /**
+   * @param {number} paddingTop
+   * @param {number} lastPaddingTop
+   * @param {number} duration
+   * @param {string} curve
+   * @param {boolean} transient
+   * @return {!Promise}
+   */
+  animateFixedElements(paddingTop, lastPaddingTop, duration, curve, transient) {
+    this.updatePaddingTop(paddingTop, transient);
+    if (duration <= 0) {
+      return Promise.resolve();
+    }
+    // Add transit effect on position fixed element
+    const tr = (time) => {
+      return lastPaddingTop - paddingTop + (paddingTop - lastPaddingTop) * time;
+    };
+    return Animation.animate(
+      this.ampdoc.getRootNode(),
+      (time) => {
+        const p = tr(time);
+        this.transformMutate(`translateY(${p}px)`);
+      },
+      duration,
+      curve
+    ).thenAlways(() => {
+      this.transformMutate(null);
+    });
+  }
 }
 
 /**
@@ -1071,9 +1097,8 @@ class TransferLayerBody {
     if (!fe.placeholder) {
       // Never been transfered before: ensure that it's properly configured.
       setStyle(element, 'pointer-events', 'initial');
-      const placeholder = (fe.placeholder = this.doc_.createElement(
-        'i-amphtml-fpa'
-      ));
+      const placeholder = (fe.placeholder =
+        this.doc_.createElement('i-amphtml-fpa'));
       toggle(placeholder, false);
       placeholder.setAttribute('i-amphtml-fixedid', fe.id);
     }
diff --git a/src/service/hidden-observer-impl.js b/src/service/hidden-observer-impl.js
index 67c09697736c1..5fd527df6ec36 100644
--- a/src/service/hidden-observer-impl.js
+++ b/src/service/hidden-observer-impl.js
@@ -14,12 +14,9 @@
  * limitations under the License.
  */
 
-import {Observable} from '../observable';
+import {Observable} from '../core/data-structures/observable';
 import {devAssert} from '../log';
-import {
-  installServiceInEmbedScope,
-  registerServiceBuilderForDoc,
-} from '../service';
+import {registerServiceBuilderForDoc} from '../service';
 
 /**
  * MutationObserverInit options to listen for mutations to the `hidden`
@@ -35,19 +32,15 @@ const OBSERVER_OPTIONS = {
  * A document level service that will listen for mutations on the `hidden`
  * attribute and notify listeners. The `hidden` attribute is used to toggle
  * `display: none` on elements.
- * @implements {../service.EmbeddableService}
  * @implements {../service.Disposable}
  */
 export class HiddenObserver {
   /**
    * @param {!./ampdoc-impl.AmpDoc} ampdoc
-   * @param {(!Document|!ShadowRoot)=} opt_root
    */
-  constructor(ampdoc, opt_root) {
-    // TODO(#22733): remove subroooting once ampdoc-fie is launched.
-
+  constructor(ampdoc) {
     /** @const {!Document|!ShadowRoot} */
-    this.root_ = opt_root || ampdoc.getRootNode();
+    this.root_ = ampdoc.getRootNode();
     const doc = this.root_.ownerDocument || this.root_;
 
     /** @const {!Window} */
@@ -60,19 +53,6 @@ export class HiddenObserver {
     this.observable_ = null;
   }
 
-  /**
-   * @param {!Window} embedWin
-   * @param {!./ampdoc-impl.AmpDoc} ampdoc
-   * @nocollapse
-   */
-  static installInEmbedWindow(embedWin, ampdoc) {
-    installServiceInEmbedScope(
-      embedWin,
-      'hidden-observer',
-      new HiddenObserver(ampdoc, embedWin.document)
-    );
-  }
-
   /**
    * Adds the observer to this instance.
    * @param {function(!Array<!MutationRecord>)} handler Observer's handler.
diff --git a/src/service/history-impl.js b/src/service/history-impl.js
index 48bc0a9b721b6..5300dab79f469 100644
--- a/src/service/history-impl.js
+++ b/src/service/history-impl.js
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import {Deferred, tryResolve} from '../utils/promise';
+import {Deferred, tryResolve} from '../core/data-structures/promise';
 import {Services} from '../services';
 import {dev, devAssert} from '../log';
-import {dict, map} from '../utils/object';
+import {dict, map} from '../core/types/object';
 import {getMode} from '../mode';
 import {
   getService,
@@ -143,17 +143,18 @@ export class History {
   }
 
   /**
-   * Requests navigation one step back. This request is only satisifed
-   * when the history has at least one step to go back in the context
-   * of this document.
+   * Requests navigation one step back. This first attempts to go back within
+   * the context of this document.
+   *
+   * @param {boolean=} navigate
    * @return {!Promise}
    */
-  goBack() {
+  goBack(navigate) {
     return this.enque_(() => {
-      if (this.stackIndex_ <= 0) {
-        // Nothing left to pop.
+      if (this.stackIndex_ <= 0 && !navigate) {
         return Promise.resolve();
       }
+
       // Pop the current state. The binding will ignore the request if
       // it cannot satisfy it.
       return this.binding_.pop(this.stackIndex_).then((historyState) => {
@@ -246,7 +247,7 @@ export class History {
    */
   enque_(callback, name) {
     const deferred = new Deferred();
-    const {promise, resolve, reject} = deferred;
+    const {promise, reject, resolve} = deferred;
 
     // TODO(dvoytenko, #8785): cleanup after tracing.
     const trace = new Error('history trace for ' + name + ': ');
@@ -683,7 +684,7 @@ export class HistoryBindingNatural_ {
   wait_() {
     this.assertReady_();
     const deferred = new Deferred();
-    const {resolve, reject} = deferred;
+    const {reject, resolve} = deferred;
     const promise = this.timer_.timeoutPromise(500, deferred.promise);
     this.waitingState_ = {promise, resolve, reject};
     return promise;
@@ -964,9 +965,11 @@ export class HistoryBindingVirtual_ {
     return this.viewer_
       .sendMessageAwaitResponse(pop, message)
       .then((response) => {
-        const fallbackState = /** @type {!HistoryStateDef} */ (dict({
-          'stackIndex': this.stackIndex_ - 1,
-        }));
+        const fallbackState = /** @type {!HistoryStateDef} */ (
+          dict({
+            'stackIndex': this.stackIndex_ - 1,
+          })
+        );
         const newState = this.toHistoryState_(response, fallbackState, pop);
         this.updateHistoryState_(newState);
         return newState;
@@ -986,9 +989,11 @@ export class HistoryBindingVirtual_ {
       if (!this.viewer_.hasCapability('fullReplaceHistory')) {
         // Full URL replacement requested, but not supported by the viewer.
         // Don't update, and return the current state.
-        const curState = /** @type {!HistoryStateDef} */ (dict({
-          'stackIndex': this.stackIndex_,
-        }));
+        const curState = /** @type {!HistoryStateDef} */ (
+          dict({
+            'stackIndex': this.stackIndex_,
+          })
+        );
         return Promise.resolve(curState);
       }
 
@@ -1106,11 +1111,13 @@ export class HistoryBindingVirtual_ {
     if (!this.viewer_.hasCapability('fragment')) {
       return Promise.resolve();
     }
-    return /** @type {!Promise} */ (this.viewer_.sendMessageAwaitResponse(
-      'replaceHistory',
-      dict({'fragment': fragment}),
-      /* cancelUnsent */ true
-    ));
+    return /** @type {!Promise} */ (
+      this.viewer_.sendMessageAwaitResponse(
+        'replaceHistory',
+        dict({'fragment': fragment}),
+        /* cancelUnsent */ true
+      )
+    );
   }
 }
 
diff --git a/src/service/ie-intrinsic-bug.js b/src/service/ie-intrinsic-bug.js
new file mode 100644
index 0000000000000..3d19f4181a0bf
--- /dev/null
+++ b/src/service/ie-intrinsic-bug.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Services} from '../services';
+import {closestAncestorElementBySelector} from '../dom';
+import {getLengthNumeral} from '../layout';
+import {transparentPng} from '../utils/img';
+
+/**
+ * IE can't handle auto-scaling SVG images used for intrinsic layout. Generate
+ * a transparent PNG for SSR rendered sizers instead.
+ * @param {!Window} win
+ * @param {!../service/platform-impl.Platform=} opt_platform
+ * @package
+ */
+export function ieIntrinsicCheckAndFix(win, opt_platform) {
+  const platform = opt_platform || Services.platformFor(win);
+  if (!platform.isIe()) {
+    return;
+  }
+
+  const {document} = win;
+  const intrinsics = document.querySelectorAll(
+    '.i-amphtml-intrinsic-sizer[src^="data:image/svg"]'
+  );
+  for (let i = 0; i < intrinsics.length; i++) {
+    const intrinsic = intrinsics[i];
+    const element = closestAncestorElementBySelector(
+      intrinsic,
+      '.i-amphtml-element'
+    );
+    if (!element) {
+      continue;
+    }
+    const width = getLengthNumeral(element.getAttribute('width'));
+    const height = getLengthNumeral(element.getAttribute('height'));
+    if (width && height) {
+      intrinsic.src = transparentPng(document, width, height);
+    }
+  }
+}
diff --git a/src/service/ie-media-bug.js b/src/service/ie-media-bug.js
index 6243d6f3b494e..f1485b9ca03ce 100644
--- a/src/service/ie-media-bug.js
+++ b/src/service/ie-media-bug.js
@@ -28,7 +28,7 @@ const TAG = 'ie-media-bug';
  * @return {?Promise}
  * @package
  */
-export function checkAndFix(win, opt_platform) {
+export function ieMediaCheckAndFix(win, opt_platform) {
   const platform = opt_platform || Services.platformFor(win);
   if (!platform.isIe() || matchMediaIeQuite(win)) {
     return null;
diff --git a/src/service/jank-meter.js b/src/service/jank-meter.js
deleted file mode 100644
index cba02f81319f2..0000000000000
--- a/src/service/jank-meter.js
+++ /dev/null
@@ -1,224 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {Services} from '../services';
-import {TickLabel} from '../enums';
-import {dev, user} from '../log';
-import {htmlFor} from '../static-template';
-import {isExperimentOn} from '../experiments';
-
-/** @const {number} */
-const NTH_FRAME = 200;
-
-export class JankMeter {
-  /**
-   * @param {!Window} win
-   */
-  constructor(win) {
-    /** @private {!Window} */
-    this.win_ = win;
-    /** @private {number} */
-    this.badFrameCnt_ = 0;
-    /** @private {number} */
-    this.totalFrameCnt_ = 0;
-    /** @private {number} */
-    this.longTaskChild_ = 0;
-    /** @private {number} */
-    this.longTaskSelf_ = 0;
-    /** @private {?number} */
-    this.scheduledTime_ = null;
-    /** @private {?./performance-impl.Performance} */
-    this.perf_ = Services.performanceForOrNull(win);
-
-    /** @private {?BatteryManager} */
-    this.batteryManager_ = null;
-    /** @private {?number} */
-    this.batteryLevelStart_ = null;
-    this.initializeBatteryManager_();
-
-    /** @private {?PerformanceObserver} */
-    this.longTaskObserver_ = null;
-    this.initializeLongTaskObserver_();
-  }
-
-  /**
-   * Callback for scheduled.
-   */
-  onScheduled() {
-    if (!this.isEnabled_()) {
-      return;
-    }
-    // only take the first schedule for the current frame.
-    if (this.scheduledTime_ == null) {
-      this.scheduledTime_ = this.win_.Date.now();
-    }
-  }
-
-  /**
-   * Callback for run.
-   */
-  onRun() {
-    if (!this.isEnabled_() || this.scheduledTime_ == null) {
-      return;
-    }
-    const paintLatency = this.win_.Date.now() - this.scheduledTime_;
-    this.scheduledTime_ = null;
-    this.totalFrameCnt_++;
-    if (paintLatency > 16) {
-      this.badFrameCnt_++;
-      dev().info('JANK', 'Paint latency: ' + paintLatency + 'ms');
-    }
-
-    // Report metrics on Nth frame, so we have sort of normalized numbers.
-    if (this.perf_ && this.totalFrameCnt_ == NTH_FRAME) {
-      const gfp = this.calculateGfp_();
-      this.perf_.tickDelta(TickLabel.GOOD_FRAME_PROBABILITY, gfp);
-      this.perf_.tickDelta(TickLabel.BAD_FRAMES, this.badFrameCnt_);
-      if (this.longTaskObserver_) {
-        // lts: Long Tasks of Self frame
-        this.perf_.tickDelta(TickLabel.LONG_TASKS_SELF, this.longTaskSelf_);
-        // ltc: Long Tasks of Child frames
-        this.perf_.tickDelta(TickLabel.LONG_TASKS_CHILD, this.longTaskChild_);
-        this.longTaskObserver_.disconnect();
-        this.longTaskObserver_ = null;
-      }
-      let batteryDrop = 0;
-      if (this.batteryManager_ && this.batteryLevelStart_ != null) {
-        batteryDrop = this.win_.Math.max(
-          0,
-          this.win_.Math.floor(
-            this.batteryManager_.level * 100 - this.batteryLevelStart_
-          )
-        );
-        this.perf_.tickDelta(TickLabel.BATTERY_DROP, batteryDrop);
-      }
-      this.perf_.flush();
-      if (isJankMeterEnabled(this.win_)) {
-        this.displayMeterDisplay_(batteryDrop);
-      }
-    }
-  }
-
-  /**
-   * Returns if is enabled
-   *
-   * @return {?boolean}
-   */
-  isEnabled_() {
-    return (
-      isJankMeterEnabled(this.win_) ||
-      (this.perf_ &&
-        this.perf_.isPerformanceTrackingOn() &&
-        this.totalFrameCnt_ < NTH_FRAME)
-    );
-  }
-
-  /**
-   * @param {number} batteryDrop
-   * @private
-   */
-  displayMeterDisplay_(batteryDrop) {
-    const doc = this.win_.document;
-    const display = htmlFor(doc)`
-      <div class="i-amphtml-jank-meter"></div>`;
-    display.textContent =
-      `bf:${this.badFrameCnt_}, lts: ${this.longTaskSelf_}, ` +
-      `ltc:${this.longTaskChild_}, bd:${batteryDrop}`;
-    doc.body.appendChild(display);
-  }
-
-  /**
-   * Calculate Good Frame Probability, which is a value range from 0 to 100.
-   * @return {number}
-   * @private
-   */
-  calculateGfp_() {
-    return this.win_.Math.floor(
-      ((this.totalFrameCnt_ - this.badFrameCnt_) / this.totalFrameCnt_) * 100
-    );
-  }
-
-  /**
-   * Initializes long task observer.
-   */
-  initializeLongTaskObserver_() {
-    if (!this.isEnabled_() || !isLongTaskApiSupported(this.win_)) {
-      return;
-    }
-    this.longTaskObserver_ = new this.win_.PerformanceObserver((entryList) => {
-      const entries = entryList.getEntries();
-      for (let i = 0; i < entries.length; i++) {
-        if (entries[i].entryType == 'longtask') {
-          // longtask is any task with duration of bigger than 50ms
-          // we sum up the number of 50ms a task spans.
-          const span = this.win_.Math.floor(entries[i].duration / 50);
-          if (entries[i].name == 'cross-origin-descendant') {
-            this.longTaskChild_ += span;
-            user().info(
-              'LONGTASK',
-              `from child frame ${entries[i].duration}ms`
-            );
-          } else {
-            this.longTaskSelf_ += span;
-            dev().info('LONGTASK', `from self frame ${entries[i].duration}ms`);
-          }
-        }
-      }
-    });
-    this.longTaskObserver_.observe({entryTypes: ['longtask']});
-  }
-
-  /**
-   * Initializes battery manager.
-   */
-  initializeBatteryManager_() {
-    if (isBatteryApiSupported(this.win_)) {
-      this.win_.navigator.getBattery().then((battery) => {
-        this.batteryManager_ = battery;
-        this.batteryLevelStart_ = battery.level * 100;
-      });
-    }
-  }
-}
-
-/**
- * @param {!Window} win
- * @return {boolean}
- */
-function isJankMeterEnabled(win) {
-  return isExperimentOn(win, 'jank-meter');
-}
-
-/**
- * @param {!Window} win
- * @return {boolean}
- */
-export function isLongTaskApiSupported(win) {
-  return (
-    !!win.PerformanceObserver &&
-    !!win['TaskAttributionTiming'] &&
-    'containerName' in win['TaskAttributionTiming'].prototype
-  );
-}
-
-/**
- * @param {!Window} unusedWin
- * @return {boolean}
- */
-function isBatteryApiSupported(unusedWin) {
-  // TODO: (@lannka, #9749)
-  return false;
-}
diff --git a/src/service/loader-element.js b/src/service/loader-element.js
new file mode 100644
index 0000000000000..fb129a1cb6a1b
--- /dev/null
+++ b/src/service/loader-element.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {Services} from '../services';
+
+/**
+ * Gets a Promise for the LoaderService, initiating a request to download the
+ * code.
+ * @param {!./ampdoc-impl.AmpDoc} ampDoc
+ * @param {!Element} element
+ * @return {!Promise<!../../extensions/amp-loader/0.1/amp-loader.LoaderService>}
+ */
+function getLoaderServicePromise(ampDoc, element) {
+  return Services.extensionsFor(ampDoc.win)
+    .installExtensionForDoc(ampDoc, 'amp-loader')
+    .then(() => Services.loaderServiceForDoc(element));
+}
+
+/**
+ * Creates a default "loading indicator" element based on the new design.
+ *
+ * Please see https://github.com/ampproject/amphtml/issues/20237 for details,
+ * screenshots and various states of the new loader design.
+ * @param {!./ampdoc-impl.AmpDoc} ampDoc
+ * @param {!AmpElement} element
+ * @param {number} elementWidth
+ * @param {number} elementHeight
+ * @param {number=} startTime
+ * @return {!Element} The loader root element.
+ */
+export function createLoaderElement(
+  ampDoc,
+  element,
+  elementWidth,
+  elementHeight,
+  startTime = ampDoc.win.Date.now()
+) {
+  // We create the loader root element up front, since it is needed
+  // synchronously. We create the actual element with animations when the
+  // service is ready.
+  const loaderRoot = element.ownerDocument.createElement('div');
+
+  getLoaderServicePromise(ampDoc, element).then((loaderService) => {
+    const endTime = ampDoc.win.Date.now();
+    const initDelay = endTime - startTime;
+    loaderService.initializeLoader(
+      element,
+      loaderRoot,
+      initDelay,
+      elementWidth,
+      elementHeight
+    );
+  });
+
+  return loaderRoot;
+}
diff --git a/src/service/loading-indicator.js b/src/service/loading-indicator.js
new file mode 100644
index 0000000000000..3fb9a10841849
--- /dev/null
+++ b/src/service/loading-indicator.js
@@ -0,0 +1,163 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {createLoaderElement} from './loader-element';
+import {createViewportObserver} from '../viewport-observer';
+import {htmlFor} from '../static-template';
+import {registerServiceBuilderForDoc} from '../service';
+import {removeElement} from '../dom';
+
+const MIN_SIZE = 20;
+
+/**
+ * @typedef {{
+ *   shown: boolean,
+ *   loader: !Element,
+ *   container: !Element,
+ * }}
+ */
+let LoadingIndicatorStateDef;
+
+/**
+ * @param {!Node|!./ampdoc-impl.AmpDoc} nodeOrDoc
+ */
+export function installLoadingIndicatorForDoc(nodeOrDoc) {
+  registerServiceBuilderForDoc(
+    nodeOrDoc,
+    'loadingIndicator',
+    LoadingIndicatorImpl
+  );
+}
+
+/**
+ * @implements {../service.Disposable}
+ */
+export class LoadingIndicatorImpl {
+  /**
+   * @param {!./ampdoc-impl.AmpDoc} ampdoc
+   */
+  constructor(ampdoc) {
+    /** @private @const */
+    this.ampdoc_ = ampdoc;
+
+    const {win} = ampdoc;
+    const inViewport = this.inViewport_.bind(this);
+    const ioCallback = (records) =>
+      /** @type {!Array<!IntersectionObserverEntry>} */ (records).forEach(
+        inViewport
+      );
+    /** @private @const {!IntersectionObserver} */
+    this.io_ = createViewportObserver(ioCallback, win);
+
+    /** @private @const {!WeakMap<!AmpElement, !LoadingIndicatorStateDef>} */
+    this.states_ = new WeakMap();
+  }
+
+  /** @override */
+  dispose() {
+    this.io_.disconnect();
+  }
+
+  /**
+   * @param {!AmpElement} element
+   */
+  track(element) {
+    this.io_.observe(element);
+  }
+
+  /**
+   * @param {!AmpElement} element
+   */
+  untrack(element) {
+    this.io_.unobserve(element);
+    this.cleanup_(element);
+  }
+
+  /**
+   * @param {!IntersectionObserverEntry} record
+   * @private
+   */
+  inViewport_(record) {
+    const {boundingClientRect, isIntersecting, target} = record;
+    const {height, width} = boundingClientRect;
+    const element = /** @type {!AmpElement} */ (target);
+
+    const show = isIntersecting && width > MIN_SIZE && height > MIN_SIZE;
+
+    let state = this.states_.get(element);
+    const isCurrentlyShown = (state && state.shown) || false;
+    if (show === isCurrentlyShown) {
+      // Loading state is the same.
+      return;
+    }
+
+    if (show && !state) {
+      state = this.createLoaderState_(element, width, height);
+      this.states_.set(element, state);
+    }
+    if (state) {
+      state.shown = show;
+      state.container.classList.toggle('amp-hidden', !show);
+      state.loader.classList.toggle('amp-active', show);
+    }
+  }
+
+  /**
+   * @param {!AmpElement} element
+   * @param {number} width
+   * @param {number} height
+   * @return {!LoadingIndicatorStateDef}
+   * @private
+   */
+  createLoaderState_(element, width, height) {
+    const startTime = Date.now();
+
+    const loader = createLoaderElement(
+      this.ampdoc_,
+      element,
+      width,
+      height,
+      startTime
+    );
+
+    const container = htmlFor(this.ampdoc_.win.document)`
+        <div slot="i-amphtml-svc" class="i-amphtml-svc i-amphtml-loading-container i-amphtml-fill-content
+            amp-hidden"></div>
+      `;
+    container.appendChild(loader);
+    element.appendChild(container);
+
+    return /** @type {!LoadingIndicatorStateDef} */ ({
+      shown: false,
+      loader,
+      container,
+    });
+  }
+
+  /**
+   * @param {!AmpElement} element
+   * @private
+   */
+  cleanup_(element) {
+    const state = this.states_.get(element);
+    if (!state) {
+      return;
+    }
+
+    this.states_.delete(element);
+    removeElement(state.container);
+  }
+}
diff --git a/src/service/localization.js b/src/service/localization.js
index 48e153d906782..8fe0ee2ce7f4d 100644
--- a/src/service/localization.js
+++ b/src/service/localization.js
@@ -38,7 +38,7 @@ const LANGUAGE_CODE_CHUNK_REGEX = /\w+/gi;
  * @param {!Object<string, !../localized-strings.LocalizedStringBundleDef>} localizedStringBundles
  * @param {!Array<string>} languageCodes
  * @param {!LocalizedStringId} localizedStringId
- * @return {string|null}
+ * @return {?string}
  */
 function findLocalizedString(
   localizedStringBundles,
@@ -150,7 +150,7 @@ export class LocalizationService {
    *     used.  The language is based on the language at that part of the
    *     document.  If unspecified, will use the document-level language, if
    *     one exists, or the default otherwise.
-   * @return {string|null}
+   * @return {?string}
    */
   getLocalizedString(localizedStringId, elementToUse = this.element_) {
     const languageCodes = this.getLanguageCodesForElement_(elementToUse);
diff --git a/src/service/mutator-impl.js b/src/service/mutator-impl.js
index 8d873b695259f..aa2a34ab019cb 100644
--- a/src/service/mutator-impl.js
+++ b/src/service/mutator-impl.js
@@ -18,10 +18,10 @@ import {FocusHistory} from '../focus-history';
 import {MutatorInterface} from './mutator-interface';
 import {Resource} from './resource';
 import {Services} from '../services';
-import {areMarginsChanged} from '../layout-rect';
+import {areMarginsChanged} from '../core/math/layout-rect';
 import {closest} from '../dom';
 import {computedStyle} from '../style';
-import {dev, devAssert} from '../log';
+import {dev} from '../log';
 import {isExperimentOn} from '../experiments';
 import {registerServiceBuilderForDoc} from '../service';
 
@@ -58,9 +58,6 @@ export class MutatorImpl {
     this.activeHistory_.onFocus((element) => {
       this.checkPendingChangeSize_(element);
     });
-
-    /** @private @const {boolean} */
-    this.intersect_ = this.resources_.isIntersectionExperimentOn();
   }
 
   /** @override */
@@ -101,12 +98,6 @@ export class MutatorImpl {
   expandElement(element) {
     const resource = Resource.forElement(element);
     resource.completeExpand();
-
-    const owner = resource.getOwner();
-    if (owner) {
-      owner.expandedCallback(element);
-    }
-
     this.resources_.schedulePass(FOUR_FRAME_DELAY_);
   }
 
@@ -135,16 +126,12 @@ export class MutatorImpl {
 
   /** @override */
   collapseElement(element) {
-    // With IntersectionObserver, no need to relayout or remeasure
-    // due to a single element collapse (similar to "relayout top").
-    if (!this.intersect_) {
-      const box = this.viewport_.getLayoutRect(element);
-      if (box.width != 0 && box.height != 0) {
-        if (isExperimentOn(this.win, 'dirty-collapse-element')) {
-          this.dirtyElement(element);
-        } else {
-          this.resources_.setRelayoutTop(box.top);
-        }
+    const box = this.viewport_.getLayoutRect(element);
+    if (box.width != 0 && box.height != 0) {
+      if (isExperimentOn(this.win, 'dirty-collapse-element')) {
+        this.dirtyElement(element);
+      } else {
+        this.resources_.setRelayoutTop(box.top);
       }
     }
 
@@ -153,9 +140,7 @@ export class MutatorImpl {
 
     // Unlike completeExpand(), there's no requestMeasure() call here that
     // requires another pass (with IntersectionObserver).
-    if (!this.intersect_) {
-      this.resources_.schedulePass(FOUR_FRAME_DELAY_);
-    }
+    this.resources_.schedulePass(FOUR_FRAME_DELAY_);
   }
 
   /** @override */
@@ -223,9 +208,8 @@ export class MutatorImpl {
         if (measurer) {
           measurer();
         }
-        // With IntersectionObserver, "relayout top" is no longer needed since
-        // relative positional changes won't affect correctness.
-        if (!this.intersect_ && !skipRemeasure) {
+
+        if (!skipRemeasure) {
           relayoutTop = calcRelayoutTop();
         }
       },
@@ -249,12 +233,6 @@ export class MutatorImpl {
         }
         this.resources_.schedulePass(FOUR_FRAME_DELAY_);
 
-        // With IntersectionObserver, no need to set relayout top.
-        if (this.intersect_) {
-          this.resources_.maybeHeightChanged();
-          return;
-        }
-
         if (relayoutTop != -1) {
           this.resources_.setRelayoutTop(relayoutTop);
         }
@@ -285,7 +263,6 @@ export class MutatorImpl {
    * @param {!Element} element
    */
   dirtyElement(element) {
-    devAssert(!this.intersect_);
     let relayoutAll = false;
     const isAmpElement = element.classList.contains('i-amphtml-element');
     if (isAmpElement) {
@@ -403,10 +380,10 @@ export class MutatorImpl {
     opt_callback
   ) {
     resource.resetPendingChangeSize();
-    const layoutBox = resource.getPageLayoutBox();
+    const layoutSize = resource.getLayoutSize();
     if (
-      (newHeight === undefined || newHeight == layoutBox.height) &&
-      (newWidth === undefined || newWidth == layoutBox.width) &&
+      (newHeight === undefined || newHeight == layoutSize.height) &&
+      (newWidth === undefined || newWidth == layoutSize.width) &&
       (marginChange === undefined ||
         !areMarginsChanged(
           marginChange.currentMargins,
diff --git a/src/service/navigation.js b/src/service/navigation.js
index 161599ff4c9f9..5b5615abd3803 100644
--- a/src/service/navigation.js
+++ b/src/service/navigation.js
@@ -22,17 +22,14 @@ import {
   tryFocus,
 } from '../dom';
 import {dev, user, userAssert} from '../log';
-import {dict} from '../utils/object';
-import {escapeCssSelectorIdent} from '../css';
+import {dict} from '../core/types/object';
+import {escapeCssSelectorIdent} from '../core/dom/css';
 import {getExtraParamsUrl, shouldAppendExtraParams} from '../impression';
 import {getMode} from '../mode';
-import {
-  installServiceInEmbedScope,
-  registerServiceBuilderForDoc,
-} from '../service';
 import {isLocalhostOrigin} from '../url';
+import {registerServiceBuilderForDoc} from '../service';
 import {toWin} from '../types';
-import PriorityQueue from '../utils/priority-queue';
+import PriorityQueue from '../core/data-structures/priority-queue';
 
 const TAG = 'navigation';
 
@@ -91,22 +88,18 @@ export function maybeExpandUrlParamsForTesting(ampdoc, e) {
 /**
  * Intercept any click on the current document and prevent any
  * linking to an identifier from pushing into the history stack.
- * @implements {../service.EmbeddableService}
  * @visibleForTesting
  */
 export class Navigation {
   /**
    * @param {!./ampdoc-impl.AmpDoc} ampdoc
-   * @param {(!Document|!ShadowRoot)=} opt_rootNode
    */
-  constructor(ampdoc, opt_rootNode) {
-    // TODO(#22733): remove subroooting once ampdoc-fie is launched.
-
+  constructor(ampdoc) {
     /** @const {!./ampdoc-impl.AmpDoc} */
     this.ampdoc = ampdoc;
 
     /** @private @const {!Document|!ShadowRoot} */
-    this.rootNode_ = opt_rootNode || ampdoc.getRootNode();
+    this.rootNode_ = ampdoc.getRootNode();
 
     /** @private @const {!./viewport/viewport-interface.ViewportInterface} */
     this.viewport_ = Services.viewportForDoc(this.ampdoc);
@@ -138,10 +131,11 @@ export class Navigation {
      * Must use URL parsing scoped to `rootNode_` for correct FIE behavior.
      * @private @const {!Element|!ShadowRoot}
      */
-    this.serviceContext_ = /** @type {!Element|!ShadowRoot} */ (this.rootNode_
-      .nodeType == Node.DOCUMENT_NODE
-      ? this.rootNode_.documentElement
-      : this.rootNode_);
+    this.serviceContext_ = /** @type {!Element|!ShadowRoot} */ (
+      this.rootNode_.nodeType == Node.DOCUMENT_NODE
+        ? this.rootNode_.documentElement
+        : this.rootNode_
+    );
 
     /** @private @const {!function(!Event)|undefined} */
     this.boundHandle_ = this.handle_.bind(this);
@@ -200,19 +194,6 @@ export class Navigation {
     );
   }
 
-  /**
-   * @param {!Window} embedWin
-   * @param {!./ampdoc-impl.AmpDoc} ampdoc
-   * @nocollapse
-   */
-  static installInEmbedWindow(embedWin, ampdoc) {
-    installServiceInEmbedScope(
-      embedWin,
-      TAG,
-      new Navigation(ampdoc, embedWin.document)
-    );
-  }
-
   /**
    * Removes all event listeners.
    */
@@ -265,14 +246,10 @@ export class Navigation {
    * @param {!{
    *   target: (string|undefined),
    *   opener: (boolean|undefined),
-   * }=} opt_options
+   * }=} options
    */
-  navigateTo(
-    win,
-    url,
-    opt_requestedBy,
-    {target = '_top', opener = false} = {}
-  ) {
+  navigateTo(win, url, opt_requestedBy, options = {}) {
+    const {opener = false, target = '_top'} = options;
     url = this.applyNavigateToMutators_(url);
     const urlService = Services.urlForDoc(this.serviceContext_);
     if (!urlService.isProtocolValid(url)) {
@@ -285,8 +262,9 @@ export class Navigation {
       `Target '${target}' not supported.`
     );
 
-    // Resolve navigateTos relative to the source URL, not the proxy URL.
-    url = urlService.getSourceUrl(url);
+    // If we're on cache, resolve relative URLs to the publisher (non-cache) origin.
+    const sourceUrl = urlService.getSourceUrl(win.location);
+    url = urlService.resolveRelativeUrl(url, sourceUrl);
 
     // If we have a target of "_blank", we will want to open a new window. A
     // target of "_top" should behave like it would on an anchor tag and
@@ -423,7 +401,7 @@ export class Navigation {
    * @private
    */
   handleContextMenuClick_(element, e) {
-    // TODO(wg-runtime): Handle A2A, custom link protocols, and ITP 2.3 mitigation.
+    // TODO(wg-performance): Handle A2A, custom link protocols, and ITP 2.3 mitigation.
     this.expandVarsForAnchor_(element);
     this.applyAnchorMutators_(element, e);
   }
@@ -641,7 +619,7 @@ export class Navigation {
     // confusing behavior e.g. when pressing "tab" button.
     // @see https://humanwhocodes.com/blog/2013/01/15/fixing-skip-to-content-links/
     // @see https://github.com/ampproject/amphtml/issues/18671
-    if (Services.platformFor(this.ampdoc.win).isIe()) {
+    if (!IS_ESM && Services.platformFor(this.ampdoc.win).isIe()) {
       const id = toLocation.hash.substring(1);
       const elementWithId = this.ampdoc.getElementById(id);
       if (elementWithId) {
@@ -775,9 +753,11 @@ export class Navigation {
     const viewerHasCapability = this.viewer_.hasCapability(
       'interceptNavigation'
     );
-    const docOptedIn = this.ampdoc
-      .getRootNode()
-      .documentElement.hasAttribute('allow-navigation-interception');
+    const docOptedIn =
+      this.ampdoc.isSingleDoc() &&
+      this.ampdoc
+        .getRootNode()
+        .documentElement.hasAttribute('allow-navigation-interception');
 
     if (
       !viewerHasCapability ||
diff --git a/src/service/origin-experiments-impl.js b/src/service/origin-experiments-impl.js
index a8f467c369a3d..ecd7fcb91074b 100644
--- a/src/service/origin-experiments-impl.js
+++ b/src/service/origin-experiments-impl.js
@@ -15,10 +15,10 @@
  */
 
 import {Services} from '../services';
-import {bytesToString, stringToBytes} from '../utils/bytes';
+import {bytesToString, stringToBytes} from '../core/types/string/bytes';
 import {getServiceForDoc, registerServiceBuilderForDoc} from '../service';
 import {getSourceOrigin} from '../url';
-import {parseJson} from '../json';
+import {parseJson} from '../core/types/object/json';
 import {user} from '../log';
 
 /** @const {string} */
@@ -31,8 +31,7 @@ const PUBLIC_JWK = /** @type {!webCrypto.JsonWebKey} */ ({
   'ext': true,
   'key_ops': ['verify'],
   'kty': 'RSA',
-  'n':
-    'uAGSMYKze8Fit508UaGHz1eZowfX4YsA0lmyi-65xQfjF7nMo61c4Iz4erdqgRp-ov662yVPquhPmTxgB-nzNcTPrj15Jo05Js78Q9hS2hrPIjKMlzcKSYQN_08QieWKOSmVbLSv_-4n9Ms5ta8nRs4pwc_2nX5n7m5B5GH4VerGbqIWIn9FRNYMShBRQ9TCHpb6BIUTwUn6iwmJLenq0A1xhGrQ9rswGC1QJhjotkeReKXZDLLWaFr0uRw-IyvRa5RiiEGntgOvcbvamM5TnbKavc2rxvg2TWTCNQnb7lWSAzldJA_yAOYet_MjnHMyj2srUdbQSDCk8kPWWuafiQ', // eslint-disable-line max-len
+  'n': 'uAGSMYKze8Fit508UaGHz1eZowfX4YsA0lmyi-65xQfjF7nMo61c4Iz4erdqgRp-ov662yVPquhPmTxgB-nzNcTPrj15Jo05Js78Q9hS2hrPIjKMlzcKSYQN_08QieWKOSmVbLSv_-4n9Ms5ta8nRs4pwc_2nX5n7m5B5GH4VerGbqIWIn9FRNYMShBRQ9TCHpb6BIUTwUn6iwmJLenq0A1xhGrQ9rswGC1QJhjotkeReKXZDLLWaFr0uRw-IyvRa5RiiEGntgOvcbvamM5TnbKavc2rxvg2TWTCNQnb7lWSAzldJA_yAOYet_MjnHMyj2srUdbQSDCk8kPWWuafiQ',
 });
 
 /**
@@ -297,8 +296,7 @@ export function installOriginExperimentsForDoc(ampdoc) {
  * @return {!OriginExperiments}
  */
 export function originExperimentsForDoc(element) {
-  return /** @type {!OriginExperiments} */ (getServiceForDoc(
-    element,
-    'origin-experiments'
-  ));
+  return /** @type {!OriginExperiments} */ (
+    getServiceForDoc(element, 'origin-experiments')
+  );
 }
diff --git a/src/service/owners-impl.js b/src/service/owners-impl.js
index f0b58b051d219..f29c3c165da5e 100644
--- a/src/service/owners-impl.js
+++ b/src/service/owners-impl.js
@@ -14,14 +14,11 @@
  * limitations under the License.
  */
 
-// TODO(powerivq)
-// Resource.setOwner, Resource.getOwner should be moved here.
-// ResourceState.NOT_BUILT might not be needed here.
 import {OwnersInterface} from './owners-interface';
-import {Resource, ResourceState} from './resource';
+import {Resource} from './resource';
 import {Services} from '../services';
 import {devAssert} from '../log';
-import {isArray} from '../types';
+import {isArray} from '../core/types';
 import {registerServiceBuilderForDoc} from '../service';
 
 /**
@@ -29,9 +26,9 @@ import {registerServiceBuilderForDoc} from '../service';
  * @return {!Array<!Element>}
  */
 function elements(elements) {
-  return /** @type {!Array<!Element>} */ (isArray(elements)
-    ? elements
-    : [elements]);
+  return /** @type {!Array<!Element>} */ (
+    isArray(elements) ? elements : [elements]
+  );
 }
 
 /**
@@ -100,41 +97,11 @@ export class OwnersImpl {
     });
   }
 
-  /** @override */
-  updateInViewport(parentElement, subElements, inLocalViewport) {
-    this.updateInViewportForSubresources_(
-      this.resources_.getResourceForElement(parentElement),
-      elements(subElements),
-      inLocalViewport
-    );
-  }
-
   /** @override */
   requireLayout(element, opt_parentPriority) {
     const promises = [];
     this.discoverResourcesForElement_(element, (resource) => {
-      if (resource.getState() == ResourceState.LAYOUT_COMPLETE) {
-        return;
-      }
-      if (resource.getState() != ResourceState.LAYOUT_SCHEDULED) {
-        promises.push(
-          resource.whenBuilt().then(() => {
-            resource.measure();
-            if (!resource.isDisplayed()) {
-              return;
-            }
-            this.resources_.scheduleLayoutOrPreload(
-              resource,
-              /* layout */ true,
-              opt_parentPriority,
-              /* forceOutsideViewport */ true
-            );
-            return resource.loadedOnce();
-          })
-        );
-      } else if (resource.isDisplayed()) {
-        promises.push(resource.loadedOnce());
-      }
+      promises.push(resource.element.ensureLoaded());
     });
     return Promise.all(promises);
   }
@@ -147,10 +114,10 @@ export class OwnersImpl {
    * @private
    */
   findResourcesInElements_(parentResource, elements, callback) {
-    elements.forEach((element) => {
+    for (const element of elements) {
       devAssert(parentResource.element.contains(element));
       this.discoverResourcesForElement_(element, callback);
-    });
+    }
   }
 
   /**
@@ -196,59 +163,7 @@ export class OwnersImpl {
    */
   scheduleLayoutOrPreloadForSubresources_(parentResource, layout, subElements) {
     this.findResourcesInElements_(parentResource, subElements, (resource) => {
-      if (resource.getState() === ResourceState.NOT_BUILT) {
-        resource.whenBuilt().then(() => {
-          this.measureAndTryScheduleLayout_(
-            resource,
-            /* isPreload */ !layout,
-            parentResource.getLayoutPriority()
-          );
-        });
-      } else {
-        this.measureAndTryScheduleLayout_(
-          resource,
-          /* isPreload */ !layout,
-          parentResource.getLayoutPriority()
-        );
-      }
-    });
-  }
-
-  /**
-   * @param {!Resource} resource
-   * @param {boolean} isPreload
-   * @param {number=} opt_parentPriority
-   * @private
-   */
-  measureAndTryScheduleLayout_(resource, isPreload, opt_parentPriority) {
-    resource.measure();
-    if (
-      resource.getState() === ResourceState.READY_FOR_LAYOUT &&
-      resource.isDisplayed()
-    ) {
-      this.resources_.scheduleLayoutOrPreload(
-        resource,
-        /* layout */ !isPreload,
-        opt_parentPriority
-      );
-    }
-  }
-
-  /**
-   * Updates inViewport state for the specified sub-resources of a resource.
-   * @param {!Resource} parentResource
-   * @param {!Array<!Element>} subElements
-   * @param {boolean} inLocalViewport
-   * @private
-   */
-  updateInViewportForSubresources_(
-    parentResource,
-    subElements,
-    inLocalViewport
-  ) {
-    const inViewport = parentResource.isInViewport() && inLocalViewport;
-    this.findResourcesInElements_(parentResource, subElements, (resource) => {
-      resource.setInViewport(inViewport);
+      resource.element.ensureLoaded(parentResource.getLayoutPriority());
     });
   }
 }
diff --git a/src/service/owners-interface.js b/src/service/owners-interface.js
index b870ceb1e38e1..a5b4a41564c13 100644
--- a/src/service/owners-interface.js
+++ b/src/service/owners-interface.js
@@ -76,17 +76,6 @@ export class OwnersInterface {
    */
   scheduleUnlayout(parentElement, subElements) {}
 
-  /**
-   * A parent resource, especially in when it's an owner (see {@link setOwner}),
-   * may request the Resources manager to update children's inViewport state.
-   * A child's inViewport state is a logical AND between inLocalViewport
-   * specified here and parent's own inViewport state.
-   * @param {!Element} parentElement
-   * @param {!Element|!Array<!Element>} subElements
-   * @param {boolean} inLocalViewport
-   */
-  updateInViewport(parentElement, subElements, inLocalViewport) {}
-
   /**
    * Requires the layout of the specified element or top-level sub-elements
    * within.
diff --git a/src/service/performance-impl.js b/src/service/performance-impl.js
index 6f683e8e46033..26095702b72eb 100644
--- a/src/service/performance-impl.js
+++ b/src/service/performance-impl.js
@@ -15,18 +15,19 @@
  */
 
 import {Services} from '../services';
-import {Signals} from '../utils/signals';
-import {TickLabel} from '../enums';
-import {VisibilityState} from '../visibility-state';
+import {Signals} from '../core/data-structures/signals';
+import {TickLabel} from '../core/constants/enums';
+import {VisibilityState} from '../core/constants/visibility-state';
+import {createCustomEvent} from '../event-helper';
 import {dev, devAssert} from '../log';
-import {dict, map} from '../utils/object';
+import {dict, map} from '../core/types/object';
 import {getMode} from '../mode';
 import {getService, registerServiceBuilder} from '../service';
 import {isStoryDocument} from '../utils/story';
-import {layoutRectLtwh} from '../layout-rect';
-import {throttle} from '../utils/rate-limit';
+import {layoutRectLtwh} from '../core/math/layout-rect';
+import {throttle} from '../core/types/function';
 import {whenContentIniLoad} from '../ini-load';
-import {whenDocumentComplete, whenDocumentReady} from '../document-ready';
+import {whenDocumentComplete, whenDocumentReady} from '../core/document-ready';
 
 /**
  * Maximum number of tick events we allow to accumulate in the performance
@@ -35,8 +36,7 @@ import {whenDocumentComplete, whenDocumentReady} from '../document-ready';
  */
 const QUEUE_LIMIT = 50;
 
-/** @const {string} */
-const VISIBILITY_CHANGE_EVENT = 'visibilitychange';
+const TAG = 'Performance';
 
 /**
  * Fields:
@@ -78,6 +78,9 @@ export class Performance {
     /** @private {?./resources-interface.ResourcesInterface} */
     this.resources_ = null;
 
+    /** @private {?./document-info-impl.DocumentInfoDef} */
+    this.documentInfo_ = null;
+
     /** @private {boolean} */
     this.isMessagingReady_ = false;
 
@@ -86,8 +89,9 @@ export class Performance {
 
     /** @private {!Object<string,boolean>} */
     this.enabledExperiments_ = map();
-    /** @private {string} */
-    this.ampexp_ = '';
+
+    /** @private {string|undefined} */
+    this.ampexp_ = undefined;
 
     /** @private {Signals} */
     this.metrics_ = new Signals();
@@ -100,18 +104,10 @@ export class Performance {
     this.shiftScoresTicked_ = 0;
 
     /**
-     * The sum of all layout shift fractions triggered on the page from the
-     * Layout Instability API.
-     *
-     * @private {number}
+     * The collection of layout shift events from the Layout Instability API.
+     * @private {Array<LayoutShift>}
      */
-    this.aggregateShiftScore_ = 0;
-
-    /**
-     * True if the ratios have already been ticked.
-     * @private {boolean}
-     */
-    this.slowElementRatioTicked_ = false;
+    this.layoutShifts_ = [];
 
     const supportedEntryTypes =
       (this.win.PerformanceObserver &&
@@ -122,7 +118,7 @@ export class Performance {
     if (!supportedEntryTypes.includes('paint')) {
       this.metrics_.rejectSignal(
         TickLabel.FIRST_CONTENTFUL_PAINT,
-        new Error('First Contentful Paint not supported')
+        dev().createExpectedError('First Contentful Paint not supported')
       );
     }
 
@@ -137,7 +133,7 @@ export class Performance {
     if (!this.supportsLayoutShift_) {
       this.metrics_.rejectSignal(
         TickLabel.CUMULATIVE_LAYOUT_SHIFT,
-        new Error('Cumulative Layout Shift not supported')
+        dev().createExpectedError('Cumulative Layout Shift not supported')
       );
     }
 
@@ -152,7 +148,7 @@ export class Performance {
     if (!this.supportsEventTiming_) {
       this.metrics_.rejectSignal(
         TickLabel.FIRST_INPUT_DELAY,
-        new Error('First Input Delay not supported')
+        dev().createExpectedError('First Input Delay not supported')
       );
     }
 
@@ -168,7 +164,7 @@ export class Performance {
     if (!this.supportsLargestContentfulPaint_) {
       this.metrics_.rejectSignal(
         TickLabel.LARGEST_CONTENTFUL_PAINT_VISIBLE,
-        new Error('Largest Contentful Paint not supported')
+        dev().createExpectedError('Largest Contentful Paint not supported')
       );
     }
 
@@ -183,7 +179,7 @@ export class Performance {
      * The latest reported largest contentful paint time, where the loadTime
      * is specified.
      *
-     * @private {number|null}
+     * @private {?number}
      */
     this.largestContentfulPaintLoadTime_ = null;
 
@@ -191,11 +187,10 @@ export class Performance {
      * The latest reported largest contentful paint time, where the renderTime
      * is specified.
      *
-     * @private {number|null}
+     * @private {?number}
      */
     this.largestContentfulPaintRenderTime_ = null;
 
-    this.boundOnVisibilityChange_ = this.onVisibilityChange_.bind(this);
     this.onAmpDocVisibilityChange_ = this.onAmpDocVisibilityChange_.bind(this);
 
     // Add RTV version as experiment ID, so we can slice the data by version.
@@ -222,6 +217,7 @@ export class Performance {
     this.ampdoc_ = Services.ampdoc(documentElement);
     this.viewer_ = Services.viewerForDoc(documentElement);
     this.resources_ = Services.resourcesForDoc(documentElement);
+    this.documentInfo_ = Services.documentInfoForDoc(this.ampdoc_);
 
     this.isPerformanceTrackingOn_ =
       this.viewer_.isEmbedded() && this.viewer_.getParam('csi') === '1';
@@ -247,12 +243,6 @@ export class Performance {
     // Register a handler to record metrics when the page enters the hidden
     // lifecycle state.
     if (registerVisibilityChangeListener) {
-      this.win.addEventListener(
-        VISIBILITY_CHANGE_EVENT,
-        this.boundOnVisibilityChange_,
-        {capture: true}
-      );
-
       this.ampdoc_.onVisibilityChanged(this.onAmpDocVisibilityChange_);
     }
 
@@ -272,6 +262,13 @@ export class Performance {
         // Tick timeOrigin so that epoch time can be calculated by consumers.
         this.tick(TickLabel.TIME_ORIGIN, undefined, this.timeOrigin_);
 
+        const usqp = this.ampdoc_.getMetaByName('amp-usqp');
+        if (usqp) {
+          usqp.split(',').forEach((exp) => {
+            this.addEnabledExperiment('ssr-' + exp);
+          });
+        }
+
         return this.maybeAddStoryExperimentId_();
       })
       .then(() => {
@@ -347,13 +344,13 @@ export class Performance {
       ) {
         const value = entry.processingStart - entry.startTime;
         this.tickDelta(TickLabel.FIRST_INPUT_DELAY, value);
-        this.tickSinceVisible(TickLabel.FIRST_INPUT_DELAY_VISIBLE, value);
         recordedFirstInputDelay = true;
       } else if (entry.entryType === 'layout-shift') {
         // Ignore layout shift that occurs within 500ms of user input, as it is
         // likely in response to the user's action.
-        if (!entry.hadRecentInput) {
-          this.aggregateShiftScore_ += entry.value;
+        // 1000 here is a magic number to prevent unbounded growth. We don't expect it to be reached.
+        if (!entry.hadRecentInput && this.layoutShifts_.length < 1000) {
+          this.layoutShifts_.push(entry);
         }
       } else if (entry.entryType === 'largest-contentful-paint') {
         if (entry.loadTime) {
@@ -387,54 +384,59 @@ export class Performance {
     }
 
     if (this.supportsEventTiming_) {
-      const firstInputObserver = this.createPerformanceObserver_(processEntry);
-      firstInputObserver.observe({type: 'first-input', buffered: true});
+      this.createPerformanceObserver_(processEntry, {
+        type: 'first-input',
+        buffered: true,
+      });
     }
 
     if (this.supportsLayoutShift_) {
-      const layoutInstabilityObserver = this.createPerformanceObserver_(
-        processEntry
-      );
-      layoutInstabilityObserver.observe({type: 'layout-shift', buffered: true});
+      this.createPerformanceObserver_(processEntry, {
+        type: 'layout-shift',
+        buffered: true,
+      });
     }
 
     if (this.supportsLargestContentfulPaint_) {
-      const lcpObserver = this.createPerformanceObserver_(processEntry);
-      lcpObserver.observe({type: 'largest-contentful-paint', buffered: true});
+      // lcpObserver
+      this.createPerformanceObserver_(processEntry, {
+        type: 'largest-contentful-paint',
+        buffered: true,
+      });
     }
 
     if (this.supportsNavigation_) {
-      const navigationObserver = this.createPerformanceObserver_(processEntry);
-      navigationObserver.observe({type: 'navigation', buffered: true});
-    }
-
-    if (entryTypesToObserve.length === 0) {
-      return;
+      // Wrap in a try statement as there are some browsers (ex. chrome 73)
+      // that will say it supports navigation but throws.
+      this.createPerformanceObserver_(processEntry, {
+        type: 'navigation',
+        buffered: true,
+      });
     }
 
-    const observer = this.createPerformanceObserver_(processEntry);
-
-    // Wrap observer.observe() in a try statement for testing, because
-    // Webkit throws an error if the entry types to observe are not natively
-    // supported.
-    try {
-      observer.observe({entryTypes: entryTypesToObserve});
-    } catch (err) {
-      dev() /*OK*/
-        .warn(err);
+    if (entryTypesToObserve.length > 0) {
+      this.createPerformanceObserver_(processEntry, {
+        entryTypes: entryTypesToObserve,
+      });
     }
   }
 
   /**
    * @param {function(!PerformanceEntry)} processEntry
+   * @param {!PerformanceObserverInit} init
    * @return {!PerformanceObserver}
    * @private
    */
-  createPerformanceObserver_(processEntry) {
-    return new this.win.PerformanceObserver((list) => {
-      list.getEntries().forEach(processEntry);
-      this.flush();
-    });
+  createPerformanceObserver_(processEntry, init) {
+    try {
+      const obs = new this.win.PerformanceObserver((list) => {
+        list.getEntries().forEach(processEntry);
+        this.flush();
+      });
+      obs.observe(init);
+    } catch (err) {
+      dev().warn(TAG, err);
+    }
   }
 
   /**
@@ -452,36 +454,30 @@ export class Performance {
   }
 
   /**
-   * When the visibility state of the document changes to hidden,
-   * send the layout scores.
+   * When the viewer visibility state of the document changes to inactive or hidden,
+   * send the layout score.
    * @private
    */
-  onVisibilityChange_() {
-    if (this.win.document.visibilityState === 'hidden') {
-      if (this.supportsLayoutShift_) {
-        this.tickLayoutShiftScore_();
-      }
-      if (this.supportsLargestContentfulPaint_) {
-        this.tickLargestContentfulPaint_();
-      }
-      this.tickSlowElementRatio_();
+  onAmpDocVisibilityChange_() {
+    const state = this.ampdoc_.getVisibilityState();
+    if (
+      state === VisibilityState.INACTIVE ||
+      state === VisibilityState.HIDDEN
+    ) {
+      this.tickCumulativeMetrics_();
     }
   }
 
   /**
-   * When the viewer visibility state of the document changes to inactive,
-   * send the layout score.
+   * Tick the metrics whose values change over time.
    * @private
    */
-  onAmpDocVisibilityChange_() {
-    if (this.ampdoc_.getVisibilityState() === VisibilityState.INACTIVE) {
-      if (this.supportsLayoutShift_) {
-        this.tickLayoutShiftScore_();
-      }
-      if (this.supportsLargestContentfulPaint_) {
-        this.tickLargestContentfulPaint_();
-      }
-      this.tickSlowElementRatio_();
+  tickCumulativeMetrics_() {
+    if (this.supportsLayoutShift_) {
+      this.tickLayoutShiftScore_();
+    }
+    if (this.supportsLargestContentfulPaint_) {
+      this.tickLargestContentfulPaint_();
     }
   }
 
@@ -498,51 +494,40 @@ export class Performance {
    * amount of visibility into this metric.
    */
   tickLayoutShiftScore_() {
+    const cls = this.layoutShifts_.reduce((sum, entry) => sum + entry.value, 0);
+    const fcp = this.metrics_.get(TickLabel.FIRST_CONTENTFUL_PAINT) ?? 0; // fallback to 0, so that we never overcount.
+    const ofv = this.metrics_.get(TickLabel.ON_FIRST_VISIBLE) ?? 0;
+
+    // TODO(#33207): Remove after data collection
+    const clsBeforeFCP = this.layoutShifts_.reduce((sum, entry) => {
+      if (entry.startTime < fcp) {
+        return sum + entry.value;
+      }
+      return sum;
+    }, 0);
+    const clsBeforeOFV = this.layoutShifts_.reduce((sum, entry) => {
+      if (entry.startTime < ofv) {
+        return sum + entry.value;
+      }
+      return sum;
+    }, 0);
+
     if (this.shiftScoresTicked_ === 0) {
+      this.tick(TickLabel.CUMULATIVE_LAYOUT_SHIFT_BEFORE_VISIBLE, clsBeforeOFV);
       this.tickDelta(
-        TickLabel.CUMULATIVE_LAYOUT_SHIFT,
-        this.aggregateShiftScore_
+        TickLabel.CUMULATIVE_LAYOUT_SHIFT_BEFORE_FCP,
+        clsBeforeFCP
       );
+      this.tickDelta(TickLabel.CUMULATIVE_LAYOUT_SHIFT, cls);
       this.flush();
       this.shiftScoresTicked_ = 1;
     } else if (this.shiftScoresTicked_ === 1) {
-      this.tickDelta(
-        TickLabel.CUMULATIVE_LAYOUT_SHIFT_2,
-        this.aggregateShiftScore_
-      );
+      this.tickDelta(TickLabel.CUMULATIVE_LAYOUT_SHIFT_2, cls);
       this.flush();
       this.shiftScoresTicked_ = 2;
-
-      // No more work to do, so clean up event listeners.
-      this.win.removeEventListener(
-        VISIBILITY_CHANGE_EVENT,
-        this.boundOnVisibilityChange_,
-        {capture: true}
-      );
     }
   }
 
-  /**
-   * Tick the slow element ratio.
-   */
-  tickSlowElementRatio_() {
-    if (this.slowElementRatioTicked_) {
-      return;
-    }
-    if (!this.resources_) {
-      const TAG = 'Performance';
-      dev().error(TAG, 'Failed to tick ser due to null resources');
-      return;
-    }
-
-    this.slowElementRatioTicked_ = true;
-    this.tickDelta(
-      TickLabel.SLOW_ELEMENT_RATIO,
-      this.resources_.getSlowElementRatio()
-    );
-    this.flush();
-  }
-
   /**
    * Tick fp time based on Chromium's legacy paint timing API when
    * appropriate.
@@ -574,7 +559,7 @@ export class Performance {
    * Tick the largest contentful paint metrics.
    */
   tickLargestContentfulPaint_() {
-    /** @type {number|null} */ let end;
+    /** @type {?number} */ let end;
     if (this.largestContentfulPaintLoadTime_ !== null) {
       this.tickDelta(
         TickLabel.LARGEST_CONTENTFUL_PAINT_LOAD,
@@ -691,6 +676,15 @@ export class Performance {
       data['value'] = this.timeOrigin_ + delta;
     }
 
+    // Emit events. Used by `amp performance`.
+    this.win.dispatchEvent(
+      createCustomEvent(
+        this.win,
+        'perf',
+        /** @type {JsonObject} */ ({label, delta})
+      )
+    );
+
     if (this.isMessagingReady_ && this.isPerformanceTrackingOn_) {
       this.viewer_.sendMessage('tick', data);
     } else {
@@ -729,11 +723,15 @@ export class Performance {
   /**
    * Tick time delta since the document has become visible.
    * @param {TickLabel} label The variable name as it will be reported.
-   * @param {number=} opt_end If present, use this value for end time instead of now()
+   * @param {number=} opt_delta The optional delta value in milliseconds.
    */
-  tickSinceVisible(label, opt_end) {
-    const end = opt_end || this.timeOrigin_ + this.win.performance.now();
-    const visibleTime = this.ampdoc_ ? this.ampdoc_.getFirstVisibleTime() : 0;
+  tickSinceVisible(label, opt_delta) {
+    const delta =
+      opt_delta == undefined ? this.win.performance.now() : opt_delta;
+    const end = this.timeOrigin_ + delta;
+
+    // Order is timeOrigin -> firstVisibleTime -> end.
+    const visibleTime = this.ampdoc_ && this.ampdoc_.getFirstVisibleTime();
     const v = visibleTime ? Math.max(end - visibleTime, 0) : 0;
     this.tickDelta(label, v);
   }
@@ -743,10 +741,14 @@ export class Performance {
    */
   flush() {
     if (this.isMessagingReady_ && this.isPerformanceTrackingOn_) {
+      if (this.ampexp_ == null) {
+        this.ampexp_ = Object.keys(this.enabledExperiments_).join(',');
+      }
       this.viewer_.sendMessage(
         'sendCsi',
         dict({
           'ampexp': this.ampexp_,
+          'canonicalUrl': this.documentInfo_.canonicalUrl,
         }),
         /* cancelUnsent */ true
       );
@@ -769,7 +771,7 @@ export class Performance {
    */
   addEnabledExperiment(experimentId) {
     this.enabledExperiments_[experimentId] = true;
-    this.ampexp_ = Object.keys(this.enabledExperiments_).join(',');
+    this.ampexp_ = undefined;
   }
 
   /**
diff --git a/src/service/position-observer/position-observer-impl.js b/src/service/position-observer/position-observer-impl.js
index 2857ba3c02aef..bb41dba67e964 100644
--- a/src/service/position-observer/position-observer-impl.js
+++ b/src/service/position-observer/position-observer-impl.js
@@ -16,10 +16,10 @@
 
 import {
   PositionObserverFidelity, // eslint-disable-line no-unused-vars
-  PositionObserverWorker, // eslint-disable-line no-unused-vars
+  PositionObserverWorker,
 } from './position-observer-worker';
 import {Services} from '../../services';
-import {debounce} from '../../utils/rate-limit';
+import {debounce} from '../../core/types/function';
 import {dev} from '../../log';
 import {registerServiceBuilderForDoc} from '../../service';
 
diff --git a/src/service/position-observer/position-observer-worker.js b/src/service/position-observer/position-observer-worker.js
index 727e0de0ed17b..ce5f5e310b641 100644
--- a/src/service/position-observer/position-observer-worker.js
+++ b/src/service/position-observer/position-observer-worker.js
@@ -21,7 +21,7 @@ import {
   layoutRectLtwh,
   layoutRectsRelativePos,
   rectsOverlap,
-} from '../../layout-rect';
+} from '../../core/math/layout-rect';
 
 /** @enum {number} */
 export const PositionObserverFidelity = {
@@ -95,7 +95,9 @@ export class PositionObserverWorker {
       position.positionRect,
       'PositionObserver should always trigger entry with clientRect'
     );
-    const positionRect = /** @type {!../../layout-rect.LayoutRectDef} */ (position.positionRect);
+    const positionRect = /** @type {!../../layout-rect.LayoutRectDef} */ (
+      position.positionRect
+    );
     // Add the relative position of the element to its viewport
     position.relativePos = layoutRectsRelativePos(
       positionRect,
diff --git a/src/service/real-time-config/OWNERS b/src/service/real-time-config/OWNERS
new file mode 100644
index 0000000000000..1b8c3b93f6d99
--- /dev/null
+++ b/src/service/real-time-config/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'ampproject/wg-ads-reviewers'}],
+    },
+  ],
+}
diff --git a/src/service/real-time-config/callout-vendors.js b/src/service/real-time-config/callout-vendors.js
new file mode 100644
index 0000000000000..33b138585ff3e
--- /dev/null
+++ b/src/service/real-time-config/callout-vendors.js
@@ -0,0 +1,266 @@
+/**
+ * Copyright 2017 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.
+ */
+import {getMode} from '../../mode';
+import {jsonConfiguration} from '../../core/types/object/json';
+
+//////////////////////////////////////////////////////////////////
+//                                                              //
+//     IMPORTANT: All keys in RTC_VENDORS must be lowercase     //
+//       otherwise the vendor endpoint will not be used.        //
+//                                                              //
+//////////////////////////////////////////////////////////////////
+
+// Note: disableKeyAppend is an option specifically for DoubleClick's
+// implementation of RTC. It prevents the vendor ID from being
+// appended onto each key of the RTC response, for each vendor.
+// This appending is done to prevent a collision case during merge
+// that would cause one RTC response to overwrite another if they
+// share key names.
+/** @typedef {{
+    url: string,
+    macros: Array<string>,
+    errorReportingUrl: (string|undefined),
+    disableKeyAppend: boolean}} */
+let RtcVendorDef;
+
+/** @const {!Object<string, RtcVendorDef>} */
+const RTC_VENDORS = jsonConfiguration({
+  ////////////////////////////////////////////////////////////////////
+  //                                                                //
+  //              !!!      IMPORTANT NOTE     !!!                   //
+  //                                                                //
+  //  If you are adding a new vendor config object to this object,  //
+  //  make sure to also update the RTC documentation in these two   //
+  //  files under "supported vendors".                              //
+  // https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/rtc-documentation.md
+  // https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/rtc-publisher-implementation-guide.md
+  ////////////////////////////////////////////////////////////////////
+
+  // Add vendors here
+  newspassid: {
+    url: 'https://bidder.newspassid.com/openrtb2/amp?tag_id=TAG_ID&placement_id=PLACEMENT_ID&gdpr_consent=CONSENT_STRING&ad_unit_code=AD_UNIT_CODE&site_id=SITE_ID&publisher_id=PUBLISHER_ID&custom_data=TGT&pubcid=PUBCID&adcid=ADCID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&curl=CANONICAL_URL&timeout=TIMEOUT&purl=HREF',
+    macros: [
+      'TAG_ID',
+      'PLACEMENT_ID',
+      'SITE_ID',
+      'PUBLISHER_ID',
+      'AD_UNIT_CODE',
+      'PUBCID',
+    ],
+    errorReportingUrl:
+      'https://bidder.newspassid.com/amp_error?err=ERROR_TYPE&url=HREF',
+    disableKeyAppend: true,
+  },
+  ozone: {
+    url: 'https://elb.the-ozone-project.com/openrtb2/amp?tag_id=TAG_ID&placement_id=PLACEMENT_ID&gdpr_consent=CONSENT_STRING&ad_unit_code=AD_UNIT_CODE&site_id=SITE_ID&publisher_id=PUBLISHER_ID&custom_data=TGT&pubcid=PUBCID&adcid=ADCID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&curl=CANONICAL_URL&timeout=TIMEOUT&purl=HREF',
+    macros: [
+      'TAG_ID',
+      'PLACEMENT_ID',
+      'SITE_ID',
+      'PUBLISHER_ID',
+      'AD_UNIT_CODE',
+      'PUBCID',
+    ],
+    errorReportingUrl:
+      'https://elb.the-ozone-project.com/amp_error?err=ERROR_TYPE&url=HREF',
+    disableKeyAppend: true,
+  },
+  medianet: {
+    url: 'https://amprtc.media.net/rtb/getrtc?cid=CID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&tgt=TGT&curl=CANONICAL_URL&to=TIMEOUT&purl=HREF&cste=CONSENT_STATE&cstr=CONSENT_STRING&adcid=ADCID&dmsv=ATTR(data-multi-size-validation)&ep=ELEMENT_POS&st=SCROLL_TOP&ph=PAGE_HEIGHT&bks=BKG_STATE&ref=REFERRER&dj=ATTR(data-json)',
+    macros: ['CID'],
+    errorReportingUrl:
+      'https://qsearch-a.akamaihd.net/log?logid=kfk&evtid=projectevents&project=amprtc_error&error=ERROR_TYPE&rd=HREF',
+    disableKeyAppend: true,
+  },
+  prebidappnexus: {
+    url: 'https://prebid.adnxs.com/pbs/v1/openrtb2/amp?tag_id=PLACEMENT_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adcid=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING&account=ACCOUNT_ID',
+    macros: ['PLACEMENT_ID', 'CONSENT_STRING', 'ACCOUNT_ID'],
+    disableKeyAppend: true,
+  },
+  prebidappnexuspsp: {
+    url: 'https://ib.adnxs.com/prebid/amp?tag_id=PLACEMENT_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adcid=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING&account=ACCOUNT_ID',
+    macros: ['PLACEMENT_ID', 'CONSENT_STRING', 'ACCOUNT_ID'],
+    disableKeyAppend: true,
+  },
+  prebidrubicon: {
+    url: 'https://prebid-server.rubiconproject.com/openrtb2/amp?tag_id=REQUEST_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adc=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING&account=ACCOUNT_ID',
+    macros: ['REQUEST_ID', 'CONSENT_STRING', 'ACCOUNT_ID'],
+    disableKeyAppend: true,
+  },
+  indexexchange: {
+    url: 'https://amp.casalemedia.com/amprtc?v=1&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&s=SITE_ID&p=CANONICAL_URL&consent_state=CONSENT_STATE&consent_string=CONSENT_STRING',
+    macros: ['SITE_ID', 'CONSENT_STATE', 'CONSENT_STRING'],
+    disableKeyAppend: true,
+  },
+  lotame: {
+    url: 'https://ad.crwdcntrl.net/5/pe=y/c=CLIENT_ID/an=AD_NETWORK/ma=MAX_AUDIENCES',
+    macros: ['CLIENT_ID', 'AD_NETWORK', 'MAX_AUDIENCES'],
+    disableKeyAppend: true,
+  },
+  yieldbot: {
+    url: 'https://i.yldbt.com/m/YB_PSN/v1/amp/init?curl=CANONICAL_URL&sn=YB_SLOT&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&aup=ATTR(data-slot)&pvi=PAGEVIEWID&tgt=TGT&adcid=ADCID&href=HREF',
+    macros: ['YB_PSN', 'YB_SLOT'],
+    disableKeyAppend: true,
+  },
+  salesforcedmp: {
+    url: 'https://cdn.krxd.net/userdata/v2/amp/ORGANIZATION_ID?segments_key=SEGMENTS_KEY&kuid_key=USER_KEY',
+    macros: ['ORGANIZATION_ID', 'SEGMENTS_KEY', 'USER_KEY'],
+    disableKeyAppend: true,
+  },
+  purch: {
+    url: 'https://ads.servebom.com/tmntag.js?v=1.2&fmt=amp&o={%22p%22%3APLACEMENT_ID}&div_id=DIV_ID',
+    macros: ['PLACEMENT_ID', 'DIV_ID'],
+    disableKeyAppend: true,
+  },
+  future: {
+    url: 'https://ads.servebom.com/amp?adunit=ADUNIT&gdpr_consent=CONSENT_STRING',
+    macros: ['ADUNIT', 'CONSENT_STRING'],
+    disableKeyAppend: true,
+  },
+  glxm: {
+    url: 'https://pbserver.galaxiemedia.fr/openrtb2/amp?tag_id=REQUEST_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adc=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING&account=ACCOUNT_ID',
+    macros: ['REQUEST_ID', 'CONSENT_STRING', 'ACCOUNT_ID'],
+    disableKeyAppend: true,
+  },
+  aps: {
+    url: 'https://aax.amazon-adsystem.com/e/dtb/bid?src=PUB_ID&pubid=PUB_UUID&amp=1&u=CANONICAL_URL&slots=%5B%7B%22sd%22%3A%22ATTR(data-slot)%22%2C%22s%22%3A%5B%22ATTR(width)xATTR(height)%22%5D%2C%22ms%22%3A%22ATTR(data-multi-size)%22%7D%5D&pj=PARAMS&gdprc=CONSENT_STRING',
+    macros: ['PUB_ID', 'PARAMS', 'PUB_UUID', 'CONSENT_STRING'],
+    disableKeyAppend: true,
+  },
+  openwrap: {
+    // PubMatic OpenWrap
+    url: 'https://ow.pubmatic.com/amp?v=1&w=ATTR(width)&h=ATTR(height)&ms=ATTR(data-multi-size)&auId=ATTR(data-slot)&purl=HREF&pubId=PUB_ID&profId=PROFILE_ID&consent_string=CONSENT_STRING&gdpr_applies=CONSENT_METADATA(gdprApplies)&addtl_consent=CONSENT_METADATA(additionalConsent)&consent_type=CONSENT_METADATA(consentStringType)',
+    macros: ['PUB_ID', 'PROFILE_ID', 'CONSENT_STRING'],
+    errorReportingUrl: 'https://ow.pubmatic.com/amp_error?e=ERROR_TYPE&h=HREF',
+    disableKeyAppend: true,
+  },
+  criteo: {
+    url: 'https://bidder.criteo.com/amp/rtc?zid=ZONE_ID&nid=NETWORK_ID&psubid=PUBLISHER_SUB_ID&lir=LINE_ITEM_RANGES&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&timeout=TIMEOUT&curl=CANONICAL_URL&href=HREF&cst=CONSENT_STATE&cst_str=CONSENT_STRING&cst_type=CONSENT_METADATA(consentStringType)',
+    macros: [
+      'ZONE_ID',
+      'NETWORK_ID',
+      'PUBLISHER_SUB_ID',
+      'LINE_ITEM_RANGES',
+      'CONSENT_STATE',
+      'CONSENT_STRING',
+    ],
+    disableKeyAppend: true,
+  },
+  navegg: {
+    url: 'https://usr.navdmp.com/usr?acc=NVG_ACC&wst=0&v=10',
+    macros: ['NVG_ACC'],
+    disableKeyAppend: true,
+  },
+  sonobi: {
+    url: 'https://apex.go.sonobi.com/trinity.json?key_maker=%7B%22_DIVIDER_ATTR(data-slot)%7C1%22%3A%22PLACEMENT_ID_DIVIDER_ATTR(width)xATTR(height)%2CATTR(data-multi-size)%22%7D&ref=CANONICAL_URL&lib_name=amp&lib_v=0.1&pv=PAGEVIEWID&amp=1',
+    disableKeyAppend: true,
+    macros: ['PLACEMENT_ID', '_DIVIDER_'],
+  },
+  kargo: {
+    url: 'https://krk.kargo.com/api/v1/amprtc?slot=SLOT_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&pslot=ATTR(data-slot)&pvid=PAGEVIEWID&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&acid=ADCID&purl=HREF',
+    macros: ['SLOT_ID'],
+    errorReportingUrl:
+      'https://krk.kargo.com/api/v1/event/amprtc-error?error_type=ERROR_TYPE&url=HREF',
+    disableKeyAppend: true,
+  },
+  yieldlab: {
+    url: 'https://ad.yieldlab.net/yp/ADSLOT_ID?content=amp&consent=CONSENT_STRING&t=amp%3D1',
+    macros: ['ADSLOT_ID', 'CONSENT_STRING'],
+    disableKeyAppend: true,
+  },
+  automatad: {
+    url: 'https://pbs01.automatad.com/openrtb2/amp?tag_id=TAG_ID',
+    macros: ['TAG_ID'],
+    disableKeyAppend: true,
+  },
+  prebidflux: {
+    url: 'https://prebid-server.flux-adserver.com/openrtb2/amp?tag_id=TAG_ID',
+    macros: ['TAG_ID'],
+    disableKeyAppend: true,
+  },
+  browsi: {
+    url: 'https://amp.browsiprod.com/predict?pvid=PAGEVIEWID_64&ot=ELEMENT_POS&ul=SCROLL_TOP&pl=PAGE_HEIGHT&bks=BKG_STATE&pk=PUB_KEY&sk=SITE_KEY&h=ATTR(height)&adix=ATTR(data-amp-slot-index)&ref=REFERRER&url=HREF',
+    macros: ['PUB_KEY', 'SITE_KEY'],
+    errorReportingUrl:
+      'https://events.browsiprod.com/events/amp?e=ERROR_TYPE&h=HREF&et=predict_error',
+    disableKeyAppend: true,
+  },
+  freestar: {
+    url: 'https://prebid-amp.pub.network/openrtb2/amp?tag_id=TAG_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adc=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING&account=ACCOUNT_ID',
+    macros: ['TAG_ID', 'CONSENT_STRING', 'ACCOUNT_ID'],
+    disableKeyAppend: true,
+  },
+  hubvisor: {
+    url: 'https://pbs.hubvisor.io/openrtb2/amp?tag_id=PLACEMENT_ID&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adcid=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING',
+    macros: ['PLACEMENT_ID', 'CONSENT_STRING'],
+    disableKeyAppend: true,
+  },
+  t13: {
+    url: 'https://s2s.t13.io/openrtb2/amp?tag_id=TAG_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adc=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING&account=ACCOUNT_ID',
+    macros: ['TAG_ID', 'CONSENT_STRING', 'ACCOUNT_ID'],
+    disableKeyAppend: true,
+  },
+  andbeyond: {
+    url: 'https://prebid.andbeyond.media/amp.php?tag_id=TAG_ID',
+    macros: ['TAG_ID'],
+    disableKeyAppend: true,
+  },
+  adpushup: {
+    url: 'https://amp.adpushup.com/prebidserver/openrtb2/amp?tag_id=TAG_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&curl=CANONICAL_URL&gdpr_consent=CONSENT_STRING&adc=ADCID&purl=HREF',
+    macros: ['TAG_ID', 'CONSENT_STRING'],
+    disableKeyAppend: true,
+  },
+  admax: {
+    url: 'https://prebid.admaxmedia.io/openrtb2/amp?tag_id=PLACEMENT_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adcid=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING&account=ACCOUNT_ID',
+    macros: ['PLACEMENT_ID', 'CONSENT_STRING', 'ACCOUNT_ID'],
+    disableKeyAppend: true,
+  },
+  nexx360: {
+    url: 'https://pbs.nexx360.io/openrtb2/amp?tag_id=TAG_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adc=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING&account=ACCOUNT_ID',
+    macros: ['TAG_ID', 'CONSENT_STRING', 'ACCOUNT_ID'],
+    disableKeyAppend: true,
+  },
+  prebidopenx: {
+    url: 'https://prebid.openx.net/openrtb2/amp?tag_id=REQUEST_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adc=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING&account=ACCOUNT_ID',
+    macros: ['REQUEST_ID', 'CONSENT_STRING', 'ACCOUNT_ID'],
+    disableKeyAppend: true,
+  },
+  highfivve: {
+    url: 'https://prebid-server.h5v.eu/openrtb2/amp?tag_id=TAG_ID&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adc=ADCID&purl=HREF&gdpr_consent=CONSENT_STRING&account=ACCOUNT_ID',
+    macros: ['TAG_ID', 'CONSENT_STRING', 'ACCOUNT_ID'],
+    disableKeyAppend: true,
+  },
+  tail: {
+    url: 'https://ACCOUNT_ID.seg.t.tailtarget.com/amp',
+    macros: ['ACCOUNT_ID'],
+    disableKeyAppend: true,
+  },
+});
+
+// DO NOT MODIFY: Setup for tests
+if (getMode().localDev || getMode().test) {
+  RTC_VENDORS['fakevendor'] = /** @type {RtcVendorDef} */ ({
+    url: 'https://localhost:8000/examples/rtcE1.json?slot_id=SLOT_ID&page_id=PAGE_ID&foo_id=FOO_ID',
+    macros: ['SLOT_ID', 'PAGE_ID', 'FOO_ID'],
+  });
+  RTC_VENDORS['fakevendor2'] = /** @type {RtcVendorDef} */ ({
+    url: 'https://localhost:8000/examples/rtcE1.json?slot_id=SLOT_ID&page_id=PAGE_ID&foo_id=FOO_ID',
+    errorReportingUrl: 'https://localhost:8000/examples/ERROR_TYPE',
+    disableKeyAppend: true,
+  });
+}
+
+export {RTC_VENDORS};
diff --git a/src/service/real-time-config/real-time-config-impl.js b/src/service/real-time-config/real-time-config-impl.js
new file mode 100644
index 0000000000000..ff3fff1e0c0bf
--- /dev/null
+++ b/src/service/real-time-config/real-time-config-impl.js
@@ -0,0 +1,727 @@
+/**
+ * Copyright 2017 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.
+ */
+import {CONSENT_POLICY_STATE} from '../../core/constants/consent-state';
+import {RTC_VENDORS} from './callout-vendors';
+import {Services} from '../../services';
+import {dev, user, userAssert} from '../../log';
+import {getMode} from '../../mode';
+import {isAmpScriptUri} from '../../../src/url';
+import {isArray, isObject} from '../../core/types';
+import {isCancellation} from '../../error-reporting';
+import {registerServiceBuilderForDoc} from '../../service';
+import {tryParseJson} from '../../core/types/object/json';
+
+/** @type {string} */
+const TAG = 'real-time-config';
+
+/** @type {number} */
+const MAX_RTC_CALLOUTS = 5;
+
+/** @type {number} */
+const MAX_URL_LENGTH = 16384;
+
+/** @typedef {{
+    urls: (undefined|Array<string>|
+      Array<{url:string, errorReportingUrl:string,
+        sendRegardlessOfConsentState:(undefined|boolean|Array<string>)}>),
+    vendors: (undefined|Object),
+    timeoutMillis: number,
+    errorReportingUrl: (undefined|string),
+    sendRegardlessOfConsentState: (undefined|boolean|Array<string>)
+}} */
+let RtcConfigDef;
+
+/**
+ * Enum starts at 4 because 1-3 reserved as:
+ *  1 = custom remote.html in use.
+ *  2 = RTC succeeded.
+ *  3 = deprecated generic RTC failures.
+ * @enum {string}
+ */
+export const RTC_ERROR_ENUM = {
+  // Occurs when response is unparseable as JSON
+  MALFORMED_JSON_RESPONSE: '4',
+  // Occurs when a publisher has specified the same url
+  // or vendor url (after macros are substituted) to call out to more than once.
+  DUPLICATE_URL: '5',
+  // Occurs when a URL fails isSecureUrl check.
+  INSECURE_URL: '6',
+  // Occurs when 5 valid callout urls have already been built, and additional
+  // urls are still specified.
+  MAX_CALLOUTS_EXCEEDED: '7',
+  // Occurs due to XHR failure.
+  NETWORK_FAILURE: '8',
+  // Occurs when a specified vendor does not exist in RTC_VENDORS.
+  UNKNOWN_VENDOR: '9',
+  // Occurs when request took longer than timeout
+  TIMEOUT: '10',
+  // Occurs when URL expansion time exceeded allowed timeout, request never
+  // sent.
+  MACRO_EXPAND_TIMEOUT: '11',
+};
+
+/** @const {!Object<string, boolean>} */
+const GLOBAL_MACRO_ALLOWLIST = {CLIENT_ID: true};
+
+export class RealTimeConfigService {
+  /**
+   * @param {!../ampdoc-impl.AmpDoc} ampDoc
+   */
+  constructor(ampDoc) {
+    /** @protected {!../ampdoc-impl.AmpDoc} */
+    this.ampDoc_ = ampDoc;
+  }
+
+  /**
+   * For a given A4A Element, sends out Real Time Config requests to
+   * any urls or vendors specified by the publisher.
+   * @param {!Element} element
+   * @param {!Object<string, !../../../src/service/variable-source.AsyncResolverDef>} customMacros The ad-network specified macro
+   *   substitutions available to use.
+   * @param {?CONSENT_POLICY_STATE} consentState
+   * @param {?string} consentString
+   * @param {?Object<string, string|number|boolean|undefined>} consentMetadata
+   * @param {!Function} checkStillCurrent
+   * @return {Promise<!Array<!rtcResponseDef>>|undefined}
+   * @visibleForTesting
+   */
+  maybeExecuteRealTimeConfig(
+    element,
+    customMacros,
+    consentState,
+    consentString,
+    consentMetadata,
+    checkStillCurrent
+  ) {
+    return new RealTimeConfigManager(this.ampDoc_).execute(
+      element,
+      customMacros,
+      consentState,
+      consentString,
+      consentMetadata,
+      checkStillCurrent
+    );
+  }
+}
+
+export class RealTimeConfigManager {
+  /**
+   * @param {!../ampdoc-impl.AmpDoc} ampDoc
+   */
+  constructor(ampDoc) {
+    /** @protected {!../ampdoc-impl.AmpDoc} */
+    this.ampDoc_ = ampDoc;
+
+    /** @private {!Window} */
+    this.win_ = ampDoc.win;
+
+    /** @private {!Object<string, boolean>} */
+    this.seenUrls_ = {};
+
+    /** @private {?number} */
+    this.rtcStartTime_ = null;
+
+    /** @private {!Array<!Promise<!rtcResponseDef>>} */
+    this.promiseArray_ = [];
+
+    /** @private {?RtcConfigDef} */
+    this.rtcConfig_ = null;
+
+    /** @private {?CONSENT_POLICY_STATE} */
+    this.consentState_ = null;
+
+    /** @private {?string} */
+    this.consentString_ = null;
+
+    /** @private {?Object<string, string|number|boolean|undefined>} */
+    this.consentMetadata_ = null;
+  }
+
+  /**
+   * @param {string} error
+   * @param {string} callout
+   * @param {string} errorReportingUrl
+   * @param {number=} opt_rtcTime
+   * @return {!Promise<!rtcResponseDef>}
+   * @private
+   */
+  buildErrorResponse_(error, callout, errorReportingUrl, opt_rtcTime) {
+    dev().warn(TAG, `RTC callout to ${callout} caused ${error}`);
+    if (errorReportingUrl) {
+      this.sendErrorMessage(error, errorReportingUrl);
+    }
+    return Promise.resolve(
+      /**@type {rtcResponseDef} */ ({error, callout, rtcTime: opt_rtcTime || 0})
+    );
+  }
+
+  /**
+   * @param {string} errorType Uses the RTC_ERROR_ENUM above.
+   * @param {string} errorReportingUrl
+   */
+  sendErrorMessage(errorType, errorReportingUrl) {
+    if (
+      !getMode(this.win_).localDev &&
+      !getMode(this.win_).test &&
+      Math.random() >= 0.01
+    ) {
+      return;
+    }
+    const allowlist = {ERROR_TYPE: true, HREF: true};
+    const macros = {
+      ERROR_TYPE: errorType,
+      HREF: this.win_.location.href,
+    };
+    const service = Services.urlReplacementsForDoc(this.ampDoc_);
+    const url = service.expandUrlSync(errorReportingUrl, macros, allowlist);
+    new this.win_.Image().src = url;
+  }
+
+  /**
+   * Converts a URL into its corresponding shortened callout string.
+   * We also truncate to a maximum length of 50 characters.
+   * For instance, if we are passed
+   * "https://example.test/example.php?foo=a&bar=b, then we return
+   * example.test/example.php
+   * @param {string} url
+   * @return {string}
+   */
+  getCalloutParam_(url) {
+    const urlService = Services.urlForDoc(this.ampDoc_);
+    const parsedUrl = urlService.parse(url);
+    return (parsedUrl.hostname + parsedUrl.pathname).substr(0, 50);
+  }
+
+  /**
+   * Returns whether a given callout object is valid to send an RTC request
+   * to, for the given consentState.
+   * @param {Object|string} calloutConfig
+   * @param {boolean=} optIsGloballyValid
+   * @return {boolean}
+   * @visibleForTesting
+   */
+  isValidCalloutForConsentState(calloutConfig, optIsGloballyValid) {
+    const {sendRegardlessOfConsentState} = calloutConfig;
+    if (!isObject(calloutConfig) || !sendRegardlessOfConsentState) {
+      return !!optIsGloballyValid;
+    }
+
+    if (typeof sendRegardlessOfConsentState == 'boolean') {
+      return sendRegardlessOfConsentState;
+    }
+
+    if (isArray(sendRegardlessOfConsentState)) {
+      for (let i = 0; i < sendRegardlessOfConsentState.length; i++) {
+        if (
+          this.consentState_ ==
+          CONSENT_POLICY_STATE[sendRegardlessOfConsentState[i]]
+        ) {
+          return true;
+        } else if (!CONSENT_POLICY_STATE[sendRegardlessOfConsentState[i]]) {
+          dev().warn(
+            TAG,
+            'Invalid RTC consent state given: ' +
+              `${sendRegardlessOfConsentState[i]}`
+          );
+        }
+      }
+      return false;
+    }
+    user().warn(
+      TAG,
+      'Invalid value for sendRegardlessOfConsentState:' +
+        `${sendRegardlessOfConsentState}`
+    );
+    return !!optIsGloballyValid;
+  }
+
+  /**
+   * Goes through the RTC config, and for any URL that we should not callout
+   * as per the current consent state, deletes it from the RTC config.
+   * For example, if the RTC config looked like:
+   *    {vendors: {vendorA: {'sendRegardlessOfConsentState': true}
+   *               vendorB: {'macros': {'SLOT_ID': 1}}},
+   *     urls: ['https://www.rtc.example/example',
+   *            {url: 'https://www.rtcSite2.example/example',
+   *             sendRegardlessOfConsentState: ['UNKNOWN']}]
+   *    }
+   * and the consentState is CONSENT_POLICY_STATE.UNKNOWN,
+   * then this method call would clear the callouts to vendorB, and to the first
+   * custom URL.
+   */
+  modifyRtcConfigForConsentStateSettings() {
+    if (
+      this.consentState_ == undefined ||
+      this.consentState_ == CONSENT_POLICY_STATE.SUFFICIENT ||
+      this.consentState_ == CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED
+    ) {
+      return;
+    }
+
+    const isGloballyValid = this.isValidCalloutForConsentState(this.rtcConfig_);
+    this.rtcConfig_.urls = (this.rtcConfig_.urls || []).filter((url) =>
+      this.isValidCalloutForConsentState(url, isGloballyValid)
+    );
+
+    Object.keys(this.rtcConfig_.vendors || {}).forEach((vendor) => {
+      if (
+        !this.isValidCalloutForConsentState(
+          this.rtcConfig_.vendors[vendor],
+          isGloballyValid
+        )
+      ) {
+        delete this.rtcConfig_.vendors[vendor];
+      }
+    });
+  }
+
+  /**
+   * Assigns constant macros that should exist for all RTC to object of custom
+   * per-network macros.
+   * @param {!Object<string, !../../../src/service/variable-source.AsyncResolverDef>} macros
+   * @return {!Object<string, !../../../src/service/variable-source.AsyncResolverDef>}
+   */
+  assignMacros(macros) {
+    macros['TIMEOUT'] = () => this.rtcConfig_.timeoutMillis;
+    macros['CONSENT_STATE'] = () => this.consentState_;
+    macros['CONSENT_STRING'] = () => this.consentString_;
+    macros['CONSENT_METADATA'] =
+      /** @type {!../../../src/service/variable-source.AsyncResolverDef} */ (
+        (key) => {
+          userAssert(key, 'CONSENT_METADATA macro must contian a key');
+          return this.consentMetadata_ ? this.consentMetadata_[key] : null;
+        }
+      );
+    return macros;
+  }
+
+  /**
+   * Manages sending the RTC callouts for the Custom URLs.
+   * @param {!Object<string, !../../../src/service/variable-source.AsyncResolverDef>} customMacros The ad-network specified macro
+   * @param {!Function} checkStillCurrent
+   * @param {!Element} element
+   */
+  handleRtcForCustomUrls(customMacros, checkStillCurrent, element) {
+    // For each publisher defined URL, inflate the url using the macros,
+    // and send the RTC request.
+    (this.rtcConfig_.urls || []).forEach((urlObj) => {
+      let url, errorReportingUrl;
+      if (isObject(urlObj)) {
+        url = urlObj.url;
+        errorReportingUrl = urlObj.errorReportingUrl;
+      } else if (typeof urlObj == 'string') {
+        url = urlObj;
+      } else {
+        dev().warn(TAG, `Invalid url: ${urlObj}`);
+      }
+      this.inflateAndSendRtc_(
+        url,
+        customMacros,
+        errorReportingUrl,
+        checkStillCurrent,
+        /* opt_vendor */ undefined,
+        element
+      );
+    });
+  }
+
+  /**
+   * Manages sending the RTC callouts for all specified vendors.
+   * @param {!Object<string, !../../../src/service/variable-source.AsyncResolverDef>} customMacros The ad-network specified macro
+   * @param {!Function} checkStillCurrent
+   */
+  handleRtcForVendorUrls(customMacros, checkStillCurrent) {
+    // For each vendor the publisher has specified, inflate the vendor
+    // url if it exists, and send the RTC request.
+    Object.keys(this.rtcConfig_.vendors || []).forEach((vendor) => {
+      const vendorObject = RTC_VENDORS[vendor.toLowerCase()];
+      const url = vendorObject ? vendorObject.url : '';
+      const errorReportingUrl =
+        vendorObject && vendorObject.errorReportingUrl
+          ? vendorObject.errorReportingUrl
+          : '';
+      if (!url) {
+        return this.promiseArray_.push(
+          this.buildErrorResponse_(
+            RTC_ERROR_ENUM.UNKNOWN_VENDOR,
+            vendor,
+            errorReportingUrl
+          )
+        );
+      }
+      // There are two valid configurations of the vendor object.
+      // It can either be an object of macros mapping string to string,
+      // or it can be an object with sub-objects, one of which can be
+      // 'macros'. This is for backwards compatability.
+      const vendorMacros = isObject(this.rtcConfig_.vendors[vendor]['macros'])
+        ? this.rtcConfig_.vendors[vendor]['macros']
+        : this.rtcConfig_.vendors[vendor];
+      const validVendorMacros = {};
+      Object.keys(vendorMacros).forEach((macro) => {
+        if (!(vendorObject.macros && vendorObject.macros.includes(macro))) {
+          user().error(TAG, `Unknown macro: ${macro} for vendor: ${vendor}`);
+        } else {
+          const value = vendorMacros[macro];
+          validVendorMacros[macro] =
+            isObject(value) || isArray(value) ? JSON.stringify(value) : value;
+        }
+      });
+      // The ad network defined macros override vendor defined/pub specifed.
+      const macros = Object.assign(validVendorMacros, customMacros);
+      this.inflateAndSendRtc_(
+        url,
+        macros,
+        errorReportingUrl,
+        checkStillCurrent,
+        vendor.toLowerCase()
+      );
+    });
+  }
+
+  /**
+   * @param {string} url
+   * @param {!Object<string, !../../../src/service/variable-source.AsyncResolverDef>} macros
+   * @param {string} errorReportingUrl
+   * @param {!Function} checkStillCurrent
+   * @param {string=} opt_vendor
+   * @param {!Element=} opt_element
+   * @private
+   */
+  inflateAndSendRtc_(
+    url,
+    macros,
+    errorReportingUrl,
+    checkStillCurrent,
+    opt_vendor,
+    opt_element
+  ) {
+    let {timeoutMillis} = this.rtcConfig_;
+    const callout = opt_vendor || this.getCalloutParam_(url);
+    /**
+     * The time that it takes to substitute the macros into the URL can vary
+     * depending on what the url requires to be substituted, i.e. a long
+     * async call. Thus, however long the URL replacement took is treated as a
+     * time penalty.
+     * @param {string} url
+     * @return {*} TODO(#23582): Specify return type
+     */
+    const send = (url) => {
+      if (Object.keys(this.seenUrls_).length == MAX_RTC_CALLOUTS) {
+        return this.buildErrorResponse_(
+          RTC_ERROR_ENUM.MAX_CALLOUTS_EXCEEDED,
+          callout,
+          errorReportingUrl
+        );
+      }
+      if (
+        !Services.urlForDoc(this.ampDoc_).isSecure(url) &&
+        !isAmpScriptUri(url)
+      ) {
+        return this.buildErrorResponse_(
+          RTC_ERROR_ENUM.INSECURE_URL,
+          callout,
+          errorReportingUrl
+        );
+      }
+      if (this.seenUrls_[url]) {
+        return this.buildErrorResponse_(
+          RTC_ERROR_ENUM.DUPLICATE_URL,
+          callout,
+          errorReportingUrl
+        );
+      }
+      this.seenUrls_[url] = true;
+      if (url.length > MAX_URL_LENGTH) {
+        url = this.truncUrl_(url);
+      }
+
+      return this.sendRtcCallout_(
+        url,
+        timeoutMillis,
+        callout,
+        checkStillCurrent,
+        errorReportingUrl,
+        opt_element
+      );
+    };
+
+    const allowlist = {...GLOBAL_MACRO_ALLOWLIST};
+    Object.keys(macros).forEach((key) => (allowlist[key] = true));
+    const urlReplacementStartTime = Date.now();
+    this.promiseArray_.push(
+      Services.timerFor(this.win_)
+        .timeoutPromise(
+          timeoutMillis,
+          Services.urlReplacementsForDoc(this.ampDoc_).expandUrlAsync(
+            url,
+            macros,
+            allowlist
+          )
+        )
+        .then((url) => {
+          checkStillCurrent();
+          timeoutMillis -= urlReplacementStartTime - Date.now();
+          return send(url);
+        })
+        .catch((error) => {
+          return isCancellation(error)
+            ? undefined
+            : this.buildErrorResponse_(
+                RTC_ERROR_ENUM.MACRO_EXPAND_TIMEOUT,
+                callout,
+                errorReportingUrl
+              );
+        })
+    );
+  }
+
+  /**
+   * @param {string} url
+   * @return {string}
+   */
+  truncUrl_(url) {
+    url = url.substr(0, MAX_URL_LENGTH - 12).replace(/%\w?$/, '');
+    return url + '&__trunc__=1';
+  }
+
+  /**
+   * @param {string} url
+   * @param {number} timeoutMillis
+   * @param {string} callout
+   * @param {!Function} checkStillCurrent
+   * @param {string} errorReportingUrl
+   * @param {!Element=} opt_element
+   * @return {!Promise<!rtcResponseDef>}
+   * @private
+   */
+  sendRtcCallout_(
+    url,
+    timeoutMillis,
+    callout,
+    checkStillCurrent,
+    errorReportingUrl,
+    opt_element
+  ) {
+    let rtcFetch;
+    if (isAmpScriptUri(url)) {
+      rtcFetch = Services.scriptForDocOrNull(opt_element)
+        .then((service) => {
+          userAssert(service, 'AMP-SCRIPT is not installed.');
+          return service.fetch(url);
+        })
+        .then((json) => {
+          checkStillCurrent();
+          const rtcTime = Date.now() - this.rtcStartTime_;
+          if (typeof json !== 'object') {
+            return this.buildErrorResponse_(
+              RTC_ERROR_ENUM.MALFORMED_JSON_RESPONSE,
+              callout,
+              errorReportingUrl,
+              rtcTime
+            );
+          }
+          return {response: json, rtcTime, callout};
+        });
+    } else {
+      rtcFetch = Services.xhrFor(this.win_)
+        .fetchJson(
+          // NOTE(bradfrizzell): we could include ampCors:false allowing
+          // the request to be cached across sites but for now assume that
+          // is not a required feature.
+          url,
+          {credentials: 'include'}
+        )
+        .then((res) => {
+          checkStillCurrent();
+          return res.text().then((text) => {
+            checkStillCurrent();
+            const rtcTime = Date.now() - this.rtcStartTime_;
+            // An empty text response is allowed, not an error.
+            if (!text) {
+              return {rtcTime, callout};
+            }
+            const response = tryParseJson(text);
+            return response
+              ? {response, rtcTime, callout}
+              : this.buildErrorResponse_(
+                  RTC_ERROR_ENUM.MALFORMED_JSON_RESPONSE,
+                  callout,
+                  errorReportingUrl,
+                  rtcTime
+                );
+          });
+        });
+    }
+
+    /**
+     * Note: Timeout is enforced by timerFor, not the value of
+     *   rtcTime. There are situations where rtcTime could thus
+     *   end up being greater than timeoutMillis.
+     */
+    return Services.timerFor(this.win_)
+      .timeoutPromise(timeoutMillis, rtcFetch)
+      .catch((error) => {
+        return isCancellation(error)
+          ? undefined
+          : this.buildErrorResponse_(
+              // The relevant error message for timeout looks like it is
+              // just 'message' but is in fact 'messageXXX' where the
+              // X's are hidden special characters. That's why we use
+              // match here.
+              /^timeout/.test(error.message)
+                ? RTC_ERROR_ENUM.TIMEOUT
+                : RTC_ERROR_ENUM.NETWORK_FAILURE,
+              callout,
+              errorReportingUrl,
+              Date.now() - this.rtcStartTime_
+            );
+      });
+  }
+
+  /**
+   * For a given A4A Element, sends out Real Time Config requests to
+   * any urls or vendors specified by the publisher.
+   * @param {!Element} element
+   * @param {!Object<string, !../../../src/service/variable-source.AsyncResolverDef>} customMacros The ad-network specified macro
+   *   substitutions available to use.
+   * @param {?CONSENT_POLICY_STATE} consentState
+   * @param {?string} consentString
+   * @param {?Object<string, string|number|boolean|undefined>} consentMetadata
+   * @param {!Function} checkStillCurrent
+   * @return {Promise<!Array<!rtcResponseDef>>|undefined}
+   * @visibleForTesting
+   */
+  execute(
+    element,
+    customMacros,
+    consentState,
+    consentString,
+    consentMetadata,
+    checkStillCurrent
+  ) {
+    if (!this.validateRtcConfig_(element)) {
+      return;
+    }
+    this.consentState_ = consentState;
+    this.consentString_ = consentString;
+    this.consentMetadata_ = consentMetadata;
+    this.modifyRtcConfigForConsentStateSettings();
+    customMacros = this.assignMacros(customMacros);
+    this.rtcStartTime_ = Date.now();
+    this.handleRtcForCustomUrls(customMacros, checkStillCurrent, element);
+    this.handleRtcForVendorUrls(customMacros, checkStillCurrent);
+    return Promise.all(this.promiseArray_);
+  }
+
+  /**
+   * Attempts to parse the publisher-defined RTC config off the amp-ad
+   * element, then validates that the rtcConfig exists, and contains
+   * an entry for either vendor URLs, or publisher-defined URLs. If the
+   * config contains an entry for timeoutMillis, validates that it is a
+   * number, or converts to a number if number-like, otherwise overwrites
+   * with the default.
+   * IMPORTANT: If the rtcConfig is invalid, RTC is aborted, and the ad
+   *   request continues without RTC.
+   * @param {!Element} element
+   * @return {boolean}
+   */
+  validateRtcConfig_(element) {
+    const defaultTimeoutMillis = 1000;
+    const unparsedRtcConfig = element.getAttribute('rtc-config');
+    if (!unparsedRtcConfig) {
+      return false;
+    }
+    const rtcConfig = tryParseJson(unparsedRtcConfig);
+    if (!rtcConfig) {
+      user().warn(TAG, 'Could not JSON parse rtc-config attribute');
+      return false;
+    }
+
+    let timeout;
+    try {
+      userAssert(
+        rtcConfig['vendors'] || rtcConfig['urls'],
+        'RTC Config must specify vendors or urls'
+      );
+      Object.keys(rtcConfig).forEach((key) => {
+        switch (key) {
+          case 'vendors':
+            userAssert(isObject(rtcConfig[key]), 'RTC invalid vendors');
+            break;
+          case 'urls':
+            userAssert(isArray(rtcConfig[key]), 'RTC invalid urls');
+            break;
+          case 'timeoutMillis':
+            timeout = parseInt(rtcConfig[key], 10);
+            if (isNaN(timeout)) {
+              user().warn(
+                TAG,
+                'Invalid RTC timeout is NaN, ' +
+                  `using default timeout ${defaultTimeoutMillis}ms`
+              );
+              timeout = undefined;
+            } else if (timeout > defaultTimeoutMillis || timeout < 0) {
+              user().warn(
+                TAG,
+                `Invalid RTC timeout: ${timeout}ms, ` +
+                  `using default timeout ${defaultTimeoutMillis}ms`
+              );
+              timeout = undefined;
+            }
+            break;
+          default:
+            user().warn(TAG, `Unknown RTC Config key: ${key}`);
+            break;
+        }
+      });
+      if (
+        !Object.keys(rtcConfig['vendors'] || {}).length &&
+        !(rtcConfig['urls'] || []).length
+      ) {
+        return false;
+      }
+      const validateErrorReportingUrl = (urlObj) => {
+        const errorUrl = urlObj['errorReportingUrl'];
+        if (errorUrl && !Services.urlForDoc(this.ampDoc_).isSecure(errorUrl)) {
+          dev().warn(TAG, `Insecure RTC errorReportingUrl: ${errorUrl}`);
+          urlObj['errorReportingUrl'] = undefined;
+        }
+      };
+      /** @type {!Array} */ (rtcConfig['urls'] || []).forEach((urlObj) => {
+        if (isObject(urlObj)) {
+          validateErrorReportingUrl(urlObj);
+        }
+      });
+      validateErrorReportingUrl(rtcConfig);
+    } catch (unusedErr) {
+      // This error would be due to the asserts above.
+      return false;
+    }
+    rtcConfig['timeoutMillis'] =
+      timeout !== undefined ? timeout : defaultTimeoutMillis;
+    this.rtcConfig_ = /** @type {RtcConfigDef} */ (rtcConfig);
+    return true;
+  }
+}
+
+/**
+ * @param {!../ampdoc-impl.AmpDoc} ampdoc
+ */
+export function installRealTimeConfigServiceForDoc(ampdoc) {
+  registerServiceBuilderForDoc(ampdoc, 'real-time-config', function (doc) {
+    return new RealTimeConfigService(doc);
+  });
+}
diff --git a/src/service/resource.js b/src/service/resource.js
index 030268e1c3dae..77ffade0102e1 100644
--- a/src/service/resource.js
+++ b/src/service/resource.js
@@ -14,19 +14,23 @@
  * limitations under the License.
  */
 
-import {Deferred, tryResolve} from '../utils/promise';
+import {Deferred} from '../core/data-structures/promise';
 import {Layout} from '../layout';
 import {Services} from '../services';
+import {
+  cancellation,
+  isBlockedByConsent,
+  reportError,
+} from '../error-reporting';
 import {computedStyle, toggle} from '../style';
 import {dev, devAssert} from '../log';
-import {isBlockedByConsent} from '../error';
 import {
   layoutRectLtwh,
   layoutRectSizeEquals,
+  layoutSizeFromRect,
   moveLayoutRect,
   rectsOverlap,
-} from '../layout-rect';
-import {startsWith} from '../string';
+} from '../core/math/layout-rect';
 import {toWin} from '../types';
 
 const TAG = 'Resource';
@@ -88,11 +92,13 @@ export class Resource {
    * @return {!Resource}
    */
   static forElement(element) {
-    return /** @type {!Resource} */ (devAssert(
-      Resource.forElementOptional(element),
-      'Missing resource prop on %s',
-      element
-    ));
+    return /** @type {!Resource} */ (
+      devAssert(
+        Resource.forElementOptional(element),
+        'Missing resource prop on %s',
+        element
+      )
+    );
   }
 
   /**
@@ -137,10 +143,10 @@ export class Resource {
     /** @private {number} */
     this.id_ = id;
 
-    /** @export @const {!AmpElement} */
+    /** @const {!AmpElement} */
     this.element = element;
 
-    /** @export @const {string} */
+    /** @const {string} */
     this.debugid = element.tagName.toLowerCase() + '#' + id;
 
     /** @const {!Window} */
@@ -176,6 +182,13 @@ export class Resource {
     /** @private {number} */
     this.layoutCount_ = 0;
 
+    /**
+     * Used to signal that the current layoutCallback has been aborted by an
+     * unlayoutCallback.
+     * @private {?AbortController}
+     */
+    this.abortController_ = null;
+
     /** @private {*} */
     this.lastLayoutError_ = null;
 
@@ -207,9 +220,6 @@ export class Resource {
      */
     this.pendingChangeSize_ = undefined;
 
-    /** @private {boolean} */
-    this.loadedOnce_ = false;
-
     const deferred = new Deferred();
 
     /** @private @const {!Promise} */
@@ -218,14 +228,9 @@ export class Resource {
     /** @private {?Function} */
     this.loadPromiseResolve_ = deferred.resolve;
 
+    // TODO(#30620): remove isInViewport_ and whenWithinViewport.
     /** @const @private {boolean} */
-    this.intersect_ = resources.isIntersectionExperimentOn();
-
-    /**
-     * A client rect that was "premeasured" by an IntersectionObserver.
-     * @private {?ClientRect}
-     */
-    this.premeasuredRect_ = null;
+    this.isInViewport_ = false;
   }
 
   /**
@@ -333,17 +338,10 @@ export class Resource {
       return null;
     }
     this.isBuilding_ = true;
-    return this.element.build().then(
+    return this.element.buildInternal().then(
       () => {
         this.isBuilding_ = false;
-        // With IntersectionObserver, measure can happen before build
-        // so check if we're "ready for layout" (measured and built) here.
-        if (this.intersect_ && this.hasBeenMeasured()) {
-          this.state_ = ResourceState.READY_FOR_LAYOUT;
-          this.element.onMeasure(/* sizeChanged */ true);
-        } else {
-          this.state_ = ResourceState.NOT_LAID_OUT;
-        }
+        this.state_ = ResourceState.NOT_LAID_OUT;
         // TODO(dvoytenko): merge with the standard BUILT signal.
         this.element.signals().signal('res-built');
       },
@@ -366,13 +364,6 @@ export class Resource {
     }
   }
 
-  /**
-   * Optionally hides or shows the element depending on the media query.
-   */
-  applySizesAndMediaQuery() {
-    this.element.applySizesAndMediaQuery();
-  }
-
   /**
    * Instructs the element to change its size and transitions to the state
    * awaiting the measure and possibly layout.
@@ -436,23 +427,11 @@ export class Resource {
     return this.element.getUpgradeDelayMs();
   }
 
-  /**
-   * Stores a client rect that was "premeasured" by an IntersectionObserver.
-   * Should only be used in IntersectionObserver mode.
-   * @param {!ClientRect} clientRect
-   */
-  premeasure(clientRect) {
-    devAssert(this.intersect_);
-    this.premeasuredRect_ = clientRect;
-  }
-
   /**
    * Measures the resource's boundaries. An upgraded element will be
    * transitioned to the "ready for layout" state.
-   * @param {boolean} usePremeasuredRect If true, consumes the previously
-   *    premeasured ClientRect instead of calling getBoundingClientRect().
    */
-  measure(usePremeasuredRect = false) {
+  measure() {
     // Check if the element is ready to be measured.
     // Placeholders are special. They are technically "owned" by parent AMP
     // elements, sized by parents, but laid out independently. This means
@@ -464,7 +443,7 @@ export class Resource {
       this.element.parentElement &&
       // Use prefix to recognize AMP element. This is necessary because stub
       // may not be attached yet.
-      startsWith(this.element.parentElement.tagName, 'AMP-') &&
+      this.element.parentElement.tagName.startsWith('AMP-') &&
       !(RESOURCE_PROP_ in this.element.parentElement)
     ) {
       return;
@@ -483,12 +462,7 @@ export class Resource {
     this.isMeasureRequested_ = false;
 
     const oldBox = this.layoutBox_;
-    if (usePremeasuredRect) {
-      this.computeMeasurements_(devAssert(this.premeasuredRect_));
-      this.premeasuredRect_ = null;
-    } else {
-      this.computeMeasurements_();
-    }
+    this.computeMeasurements_();
     const newBox = this.layoutBox_;
 
     // Note that "left" doesn't affect readiness for the layout.
@@ -498,13 +472,19 @@ export class Resource {
       oldBox.top != newBox.top ||
       sizeChanges
     ) {
-      if (
-        this.element.isUpgraded() &&
-        this.state_ != ResourceState.NOT_BUILT &&
-        (this.state_ == ResourceState.NOT_LAID_OUT ||
-          this.element.isRelayoutNeeded())
-      ) {
-        this.state_ = ResourceState.READY_FOR_LAYOUT;
+      if (this.element.isUpgraded()) {
+        if (this.state_ == ResourceState.NOT_LAID_OUT) {
+          // If the element isn't laid out yet, then we're now ready for layout.
+          this.state_ = ResourceState.READY_FOR_LAYOUT;
+        } else if (
+          (this.state_ == ResourceState.LAYOUT_COMPLETE ||
+            this.state_ == ResourceState.LAYOUT_FAILED) &&
+          this.element.isRelayoutNeeded()
+        ) {
+          // If the element was already laid out and we need to relayout, then
+          // go back to ready for layout.
+          this.state_ = ResourceState.READY_FOR_LAYOUT;
+        }
       }
     }
 
@@ -515,14 +495,24 @@ export class Resource {
     this.element.updateLayoutBox(newBox, sizeChanges);
   }
 
+  /**
+   * Yields when the resource has been measured.
+   * @return {!Promise}
+   */
+  ensureMeasured() {
+    if (this.hasBeenMeasured()) {
+      return Promise.resolve();
+    }
+    return Services.vsyncFor(this.hostWin).measure(() => this.measure());
+  }
+
   /**
    * Computes the current layout box and position-fixed state of the element.
-   * @param {!ClientRect=} opt_premeasuredRect
    * @private
    */
-  computeMeasurements_(opt_premeasuredRect) {
+  computeMeasurements_() {
     const viewport = Services.viewportForDoc(this.element);
-    this.layoutBox_ = viewport.getLayoutRect(this.element, opt_premeasuredRect);
+    this.layoutBox_ = viewport.getLayoutRect(this.element);
 
     // Calculate whether the element is currently is or in `position:fixed`.
     let isFixed = false;
@@ -602,24 +592,28 @@ export class Resource {
   }
 
   /**
-   * @return {boolean}
+   * Requests the element to be remeasured on the next pass.
    */
-  hasBeenPremeasured() {
-    devAssert(this.intersect_);
-    return !!this.premeasuredRect_;
+  requestMeasure() {
+    this.isMeasureRequested_ = true;
   }
 
   /**
-   * Requests the element to be remeasured on the next pass.
+   * Returns a previously measured layout size.
+   * @return {!../layout-rect.LayoutSizeDef}
    */
-  requestMeasure() {
-    this.isMeasureRequested_ = true;
+  getLayoutSize() {
+    return layoutSizeFromRect(this.layoutBox_);
   }
 
   /**
    * Returns a previously measured layout box adjusted to the viewport. This
    * mainly affects fixed-position elements that are adjusted to be always
    * relative to the document position in the viewport.
+   * The returned layoutBox is:
+   * - relative to the top of the document for non fixed element,
+   * - relative to the top of the document at current scroll position
+   *   for fixed element.
    * @return {!../layout-rect.LayoutRectDef}
    */
   getLayoutBox() {
@@ -634,31 +628,6 @@ export class Resource {
     );
   }
 
-  /**
-   * Returns a previously measured layout box relative to the page. The
-   * fixed-position elements are relative to the top of the document.
-   * @return {!../layout-rect.LayoutRectDef}
-   */
-  getPageLayoutBox() {
-    return this.layoutBox_;
-  }
-
-  /**
-   * Returns the resource's layout box relative to the page. It will be
-   * measured if the resource hasn't ever be measured.
-   *
-   * @return {!Promise<!../layout-rect.LayoutRectDef>}
-   */
-  getPageLayoutBoxAsync() {
-    if (this.hasBeenMeasured()) {
-      return tryResolve(() => this.getPageLayoutBox());
-    }
-    return Services.vsyncFor(this.hostWin).measurePromise(() => {
-      this.measure();
-      return this.getPageLayoutBox();
-    });
-  }
-
   /**
    * Returns the first measured layout box.
    * @return {!../layout-rect.LayoutRectDef}
@@ -672,22 +641,18 @@ export class Resource {
   /**
    * Whether the resource is displayed, i.e. if it has non-zero width and
    * height.
-   * @param {boolean} usePremeasuredRect If true and a premeasured rect is
-   *     available, use it. Otherwise, use the cached layout box.
    * @return {boolean}
    */
-  isDisplayed(usePremeasuredRect = false) {
-    devAssert(!usePremeasuredRect || this.intersect_);
+  isDisplayed() {
+    const isConnected =
+      this.element.ownerDocument && this.element.ownerDocument.defaultView;
+    if (!isConnected) {
+      return false;
+    }
     const isFluid = this.element.getLayout() == Layout.FLUID;
-    const box = usePremeasuredRect
-      ? devAssert(this.premeasuredRect_)
-      : this.getLayoutBox();
+    const box = this.getLayoutBox();
     const hasNonZeroSize = box.height > 0 && box.width > 0;
-    return (
-      (isFluid || hasNonZeroSize) &&
-      !!this.element.ownerDocument &&
-      !!this.element.ownerDocument.defaultView
-    );
+    return isFluid || hasNonZeroSize;
   }
 
   /**
@@ -729,6 +694,8 @@ export class Resource {
    *    viewport range given.
    */
   whenWithinViewport(viewport) {
+    // TODO(#30620): remove this method once IntersectionObserver{root:doc} is
+    // polyfilled.
     devAssert(viewport !== false);
     // Resolve is already laid out or viewport is true.
     if (!this.isLayoutPending() || viewport === true) {
@@ -895,6 +862,16 @@ export class Resource {
     );
     devAssert(this.isDisplayed(), 'Not displayed for layout: %s', this.debugid);
 
+    if (this.state_ != ResourceState.LAYOUT_SCHEDULED) {
+      const err = dev().createError(
+        'startLayout called but not LAYOUT_SCHEDULED',
+        'currently: ',
+        this.state_
+      );
+      reportError(err, this.element);
+      return Promise.reject(err);
+    }
+
     // Unwanted re-layouts are ignored.
     if (this.layoutCount_ > 0 && !this.element.isRelayoutNeeded()) {
       dev().fine(
@@ -910,36 +887,50 @@ export class Resource {
     dev().fine(TAG, 'start layout:', this.debugid, 'count:', this.layoutCount_);
     this.layoutCount_++;
     this.state_ = ResourceState.LAYOUT_SCHEDULED;
+    this.abortController_ = new AbortController();
+    const {signal} = this.abortController_;
 
     const promise = new Promise((resolve, reject) => {
       Services.vsyncFor(this.hostWin).mutate(() => {
+        let callbackResult;
         try {
-          resolve(this.element.layoutCallback());
+          callbackResult = this.element.layoutCallback(signal);
         } catch (e) {
           reject(e);
         }
+        Promise.resolve(callbackResult).then(resolve, reject);
       });
-    });
-
-    this.layoutPromise_ = promise.then(
-      () => this.layoutComplete_(true),
-      (reason) => this.layoutComplete_(false, reason)
+      signal.onabort = () => reject(cancellation());
+    }).then(
+      () => this.layoutComplete_(true, signal),
+      (reason) => this.layoutComplete_(false, signal, reason)
     );
-    return this.layoutPromise_;
+
+    return (this.layoutPromise_ = promise);
   }
 
   /**
    * @param {boolean} success
+   * @param {!AbortSignal} signal
    * @param {*=} opt_reason
    * @return {!Promise|undefined}
    */
-  layoutComplete_(success, opt_reason) {
+  layoutComplete_(success, signal, opt_reason) {
+    this.abortController_ = null;
+    if (signal.aborted) {
+      // We hit a race condition, where `layoutCallback` -> `unlayoutCallback`
+      // was called in quick succession. Since the unlayout was called before
+      // the layout completed, we want to remain in the unlayout state.
+      const err = dev().createError('layoutComplete race');
+      err.associatedElement = this.element;
+      dev().expectedError(TAG, err);
+      throw cancellation();
+    }
     if (this.loadPromiseResolve_) {
       this.loadPromiseResolve_();
       this.loadPromiseResolve_ = null;
     }
     this.layoutPromise_ = null;
-    this.loadedOnce_ = true;
     this.state_ = success
       ? ResourceState.LAYOUT_COMPLETE
       : ResourceState.LAYOUT_FAILED;
@@ -955,7 +946,7 @@ export class Resource {
   /**
    * Returns true if the resource layout has not completed or failed.
    * @return {boolean}
-   * */
+   */
   isLayoutPending() {
     return (
       this.state_ != ResourceState.LAYOUT_COMPLETE &&
@@ -971,26 +962,21 @@ export class Resource {
    * @return {!Promise}
    */
   loadedOnce() {
+    if (this.element.R1()) {
+      return this.element.whenLoaded();
+    }
     return this.loadPromise_;
   }
 
-  /**
-   * @return {boolean} true if the resource has been loaded at least once.
-   */
-  hasLoadedOnce() {
-    return this.loadedOnce_;
-  }
-
   /**
    * Whether the resource is currently visible in the viewport.
    * @return {boolean}
    */
   isInViewport() {
-    const isInViewport = this.element.isInViewport();
-    if (isInViewport) {
+    if (this.isInViewport_) {
       this.resolveDeferredsWhenWithinViewports_();
     }
-    return isInViewport;
+    return this.isInViewport_;
   }
 
   /**
@@ -998,7 +984,7 @@ export class Resource {
    * @param {boolean} inViewport
    */
   setInViewport(inViewport) {
-    this.element.viewportCallback(inViewport);
+    this.isInViewport_ = inViewport;
   }
 
   /**
@@ -1008,10 +994,15 @@ export class Resource {
   unlayout() {
     if (
       this.state_ == ResourceState.NOT_BUILT ||
-      this.state_ == ResourceState.NOT_LAID_OUT
+      this.state_ == ResourceState.NOT_LAID_OUT ||
+      this.state_ == ResourceState.READY_FOR_LAYOUT
     ) {
       return;
     }
+    if (this.abortController_) {
+      this.abortController_.abort();
+      this.abortController_ = null;
+    }
     this.setInViewport(false);
     if (this.element.unlayoutCallback()) {
       this.element.togglePlaceholder(true);
@@ -1034,32 +1025,28 @@ export class Resource {
    * Calls element's pauseCallback callback.
    */
   pause() {
-    this.element.pauseCallback();
-    if (this.element.unlayoutOnPause()) {
-      this.unlayout();
-    }
+    this.element.pause();
   }
 
   /**
    * Calls element's pauseCallback callback.
    */
   pauseOnRemove() {
-    this.element.pauseCallback();
+    this.element.pause();
   }
 
   /**
    * Calls element's resumeCallback callback.
    */
   resume() {
-    this.element.resumeCallback();
+    this.element.resume();
   }
 
   /**
    * Called when a previously visible element is no longer displayed.
    */
   unload() {
-    this.pause();
-    this.unlayout();
+    this.element.unmount();
   }
 
   /**
diff --git a/src/service/resources-impl.js b/src/service/resources-impl.js
index da7ccccbf1349..7ff6a455eb499 100644
--- a/src/service/resources-impl.js
+++ b/src/service/resources-impl.js
@@ -14,33 +14,29 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../utils/promise';
-import {FiniteStateMachine} from '../finite-state-machine';
+import {Deferred} from '../core/data-structures/promise';
+import {FiniteStateMachine} from '../core/data-structures/finite-state-machine';
 import {FocusHistory} from '../focus-history';
 import {Pass} from '../pass';
 import {READY_SCAN_SIGNAL, ResourcesInterface} from './resources-interface';
+
 import {Resource, ResourceState} from './resource';
 import {Services} from '../services';
 import {TaskQueue} from './task-queue';
-import {VisibilityState} from '../visibility-state';
+import {VisibilityState} from '../core/constants/visibility-state';
 import {dev, devAssert} from '../log';
-import {dict} from '../utils/object';
-import {expandLayoutRect} from '../layout-rect';
-import {
-  getExperimentBranch,
-  isExperimentOn,
-  randomlySelectUnsetExperiments,
-} from '../experiments';
-import {getMode} from '../mode';
+import {dict} from '../core/types/object';
+import {expandLayoutRect} from '../core/math/layout-rect';
 import {getSourceUrl} from '../url';
-import {hasNextNodeInDocumentOrder, isIframed} from '../dom';
-import {checkAndFix as ieMediaCheckAndFix} from './ie-media-bug';
-import {isBlockedByConsent, reportError} from '../error';
+import {hasNextNodeInDocumentOrder} from '../dom';
+import {ieIntrinsicCheckAndFix} from './ie-intrinsic-bug';
+import {ieMediaCheckAndFix} from './ie-media-bug';
+import {isBlockedByConsent, reportError} from '../error-reporting';
 import {listen, loadPromise} from '../event-helper';
 import {registerServiceBuilderForDoc} from '../service';
-import {remove} from '../utils/array';
+import {remove} from '../core/types/array';
 import {startupChunk} from '../chunk';
-import {throttle} from '../utils/rate-limit';
+import {throttle} from '../core/types/function';
 
 const TAG_ = 'Resources';
 const LAYOUT_TASK_ID_ = 'L';
@@ -53,14 +49,6 @@ const POST_TASK_PASS_DELAY_ = 1000;
 const MUTATE_DEFER_DELAY_ = 500;
 const FOCUS_HISTORY_TIMEOUT_ = 1000 * 60; // 1min
 const FOUR_FRAME_DELAY_ = 70;
-const MAX_BUILD_CHUNK_SIZE = 10;
-
-/** @const {!{id: string, control: string, experiment: string}} */
-const RENDER_ON_IDLE_FIX_EXP = {
-  id: 'render-on-idle-fix',
-  control: '21066311',
-  experiment: '21066312',
-};
 
 /**
  * @implements {ResourcesInterface}
@@ -106,9 +94,6 @@ export class ResourcesImpl {
     /** @private {boolean} */
     this.visible_ = this.ampdoc.isVisible();
 
-    /** @private {number} */
-    this.prerenderSize_ = this.viewer_.getPrerenderSize();
-
     /** @private {boolean} */
     this.documentReady_ = false;
 
@@ -150,9 +135,6 @@ export class ResourcesImpl {
 
     /** @const @private {!Pass} */
     this.remeasurePass_ = new Pass(this.win, () => {
-      // With IntersectionObserver, "remeasuring" hack no longer needed.
-      devAssert(!this.intersectionObserver_);
-
       this.relayoutAll_ = true;
       this.schedulePass();
     });
@@ -163,7 +145,7 @@ export class ResourcesImpl {
     /** @const {!TaskQueue} */
     this.queue_ = new TaskQueue();
 
-    /** @const {!function(./task-queue.TaskDef):number} */
+    /** @const {function(./task-queue.TaskDef):number} */
     this.boundTaskScorer_ = this.calcTaskScore_.bind(this);
 
     /**
@@ -201,21 +183,6 @@ export class ResourcesImpl {
     /** @const @private {!Array<!Element>} */
     this.elementsThatScrolled_ = [];
 
-    /** @const @private {boolean} */
-    this.onlyBuildWhenCloseToViewport_ = isExperimentOn(
-      this.win,
-      'build-close-to-viewport'
-    );
-
-    /** @const @private {boolean} */
-    this.buildInChunks_ = isExperimentOn(this.win, 'build-in-chunks');
-
-    /** @const @private {boolean} */
-    this.renderOnIdleFix_ = isExperimentOn(this.win, 'render-on-idle-fix');
-
-    /** @private {boolean} */
-    this.divertedRenderOnIdleFixExperiment_ = false;
-
     /** @const @private {!Deferred} */
     this.firstPassDone_ = new Deferred();
 
@@ -224,73 +191,27 @@ export class ResourcesImpl {
       this.ampdoc.getVisibilityState()
     );
 
-    /**
-     * Number of resources that were laid out after entering viewport.
-     * @private {number}
-     */
-    this.slowLayoutCount_ = 0;
-
-    /**
-     * Total number of laid out resources.
-     * @private {number}
-     */
-    this.totalLayoutCount_ = 0;
-
-    /** @private {?IntersectionObserver} */
-    this.intersectionObserver_ = null;
-
-    /**
-     * True if the callback for intersectionObserver_ has fired at least once.
-     * @private {boolean}
-     */
-    this.intersectionObserverCallbackFired_ = false;
-
-    if (isExperimentOn(this.win, 'intersect-resources')) {
-      const iframed = isIframed(this.win);
-
-      // Classic IntersectionObserver doesn't support viewport tracking and
-      // rootMargin in x-origin iframes (#25428). As of 1/2020, only Chrome 81+
-      // supports it via {root: document}, which throws on other browsers.
-      const root = /** @type {?Element} */ (this.ampdoc.isSingleDoc() && iframed
-        ? /** @type {*} */ (this.win.document)
-        : null);
-      try {
-        this.intersectionObserver_ = new IntersectionObserver(
-          (e) => this.intersects_(e),
-          {root, rootMargin: '200% 25%'}
-        );
-
-        // Wait for intersection callback instead of measuring all elements
-        // during the first pass.
-        this.relayoutAll_ = false;
-      } catch (e) {
-        dev().warn(TAG_, 'Falling back to classic Resources:', e);
-      }
-    }
-
     // When user scrolling stops, run pass to check newly in-viewport elements.
     // When viewport is resized, we have to re-measure everything.
     this.viewport_.onChanged((event) => {
-      this.lastScrollTime_ = Date.now();
+      this.lastScrollTime_ = this.win.Date.now();
       this.lastVelocity_ = event.velocity;
       if (event.relayoutAll) {
         this.relayoutAll_ = true;
         this.maybeChangeHeight_ = true;
       }
-      // With IntersectionObserver, we only need to handle viewport resize.
-      if (this.relayoutAll_ || !this.intersectionObserver_) {
-        this.schedulePass();
-      }
+
+      this.schedulePass();
     });
     this.viewport_.onScroll(() => {
-      this.lastScrollTime_ = Date.now();
+      this.lastScrollTime_ = this.win.Date.now();
     });
 
     // When document becomes visible, e.g. from "prerender" mode, do a
     // simple pass.
     this.ampdoc.onVisibilityChanged(() => {
       if (this.firstVisibleTime_ == -1 && this.ampdoc.isVisible()) {
-        this.firstVisibleTime_ = Date.now();
+        this.firstVisibleTime_ = this.win.Date.now();
       }
       this.schedulePass();
     });
@@ -310,57 +231,13 @@ export class ResourcesImpl {
 
     this.rebuildDomWhenReady_();
 
-    if (
-      !this.intersectionObserver_ &&
-      isExperimentOn(this.win, 'layoutbox-invalidate-on-scroll')
-    ) {
-      /** @private @const */
-      this.throttledScroll_ = throttle(this.win, (e) => this.scrolled_(e), 250);
-
-      listen(this.win.document, 'scroll', this.throttledScroll_, {
-        capture: true,
-        passive: true,
-      });
-    }
-  }
+    /** @private @const */
+    this.throttledScroll_ = throttle(this.win, (e) => this.scrolled_(e), 250);
 
-  /** @override */
-  isIntersectionExperimentOn() {
-    return !!this.intersectionObserver_;
-  }
-
-  /**
-   * @param {!Array<!IntersectionObserverEntry>} entries
-   * @private
-   */
-  intersects_(entries) {
-    devAssert(this.intersectionObserver_);
-
-    // TODO(willchou): Remove assert once #27167 is fixed.
-    devAssert(this.prerenderSize_ == 1);
-
-    if (getMode().localDev) {
-      const inside = [];
-      const outside = [];
-      entries.forEach((e) => {
-        const r = Resource.forElement(e.target);
-        (e.isIntersecting ? inside : outside).push({e, id: r.debugid});
-      });
-      dev().fine(TAG_, 'intersection', inside, outside);
-    }
-
-    this.intersectionObserverCallbackFired_ = true;
-
-    entries.forEach((entry) => {
-      const {boundingClientRect, target} = entry;
-
-      const r = Resource.forElement(target);
-      // Strangely, JSC is missing x/y from typedefs of boundingClientRect
-      // despite it being a DOMRectReadOnly (ClientRect) by spec.
-      r.premeasure(/** @type {!ClientRect} */ (boundingClientRect));
+    listen(this.win.document, 'scroll', this.throttledScroll_, {
+      capture: true,
+      passive: true,
     });
-
-    this.schedulePass();
   }
 
   /** @private */
@@ -374,37 +251,40 @@ export class ResourcesImpl {
       const input = Services.inputFor(this.win);
       input.setupInputModeClasses(this.ampdoc);
 
-      // With IntersectionObserver, no need for remeasuring hacks.
-      if (!this.intersectionObserver_) {
-        const fixPromise = ieMediaCheckAndFix(this.win);
-        const remeasure = () => this.remeasurePass_.schedule();
-        if (fixPromise) {
-          fixPromise.then(remeasure);
-        } else {
-          // No promise means that there's no problem.
-          remeasure();
-        }
+      if (IS_ESM) {
+        return;
+      }
 
-        // Safari 10 and under incorrectly estimates font spacing for
-        // `@font-face` fonts. This leads to wild measurement errors. The best
-        // course of action is to remeasure everything on window.onload or font
-        // timeout (3s), whichever is earlier. This has to be done on the global
-        // window because this is where the fonts are always added.
-        // Unfortunately, `document.fonts.ready` cannot be used here due to
-        // https://bugs.webkit.org/show_bug.cgi?id=174030.
-        // See https://bugs.webkit.org/show_bug.cgi?id=174031 for more details.
-        Promise.race([
-          loadPromise(this.win),
-          Services.timerFor(this.win).promise(3100),
-        ]).then(remeasure);
-
-        // Remeasure the document when all fonts loaded.
-        if (
-          this.win.document.fonts &&
-          this.win.document.fonts.status != 'loaded'
-        ) {
-          this.win.document.fonts.ready.then(remeasure);
-        }
+      ieIntrinsicCheckAndFix(this.win);
+
+      const fixPromise = ieMediaCheckAndFix(this.win);
+      const remeasure = () => this.remeasurePass_.schedule();
+      if (fixPromise) {
+        fixPromise.then(remeasure);
+      } else {
+        // No promise means that there's no problem.
+        remeasure();
+      }
+
+      // Safari 10 and under incorrectly estimates font spacing for
+      // `@font-face` fonts. This leads to wild measurement errors. The best
+      // course of action is to remeasure everything on window.onload or font
+      // timeout (3s), whichever is earlier. This has to be done on the global
+      // window because this is where the fonts are always added.
+      // Unfortunately, `document.fonts.ready` cannot be used here due to
+      // https://bugs.webkit.org/show_bug.cgi?id=174030.
+      // See https://bugs.webkit.org/show_bug.cgi?id=174031 for more details.
+      Promise.race([
+        loadPromise(this.win),
+        Services.timerFor(this.win).promise(3100),
+      ]).then(remeasure);
+
+      // Remeasure the document when all fonts loaded.
+      if (
+        this.win.document.fonts &&
+        this.win.document.fonts.status != 'loaded'
+      ) {
+        this.win.document.fonts.ready.then(remeasure);
       }
     });
   }
@@ -450,11 +330,7 @@ export class ResourcesImpl {
       resource.getState() != ResourceState.NOT_BUILT &&
       !element.reconstructWhenReparented()
     ) {
-      // With IntersectionObserver, no need to request remeasure
-      // on reuse since initial intersection callback will trigger soon.
-      if (!this.intersectionObserver_) {
-        resource.requestMeasure();
-      }
+      resource.requestMeasure();
       dev().fine(TAG_, 'resource reused:', resource.debugid);
     } else {
       // Create and add a new resource.
@@ -462,13 +338,7 @@ export class ResourcesImpl {
       dev().fine(TAG_, 'resource added:', resource.debugid);
     }
     this.resources_.push(resource);
-
-    if (this.intersectionObserver_) {
-      // The observer callback will schedule a pass to process this element.
-      this.intersectionObserver_.observe(element);
-    } else {
-      this.remeasurePass_.schedule(1000);
-    }
+    this.remeasurePass_.schedule(1000);
   }
 
   /**
@@ -477,9 +347,6 @@ export class ResourcesImpl {
    * @return {boolean}
    */
   isUnderBuildQuota_() {
-    if (this.buildInChunks_ && this.buildsThisPass_ >= MAX_BUILD_CHUNK_SIZE) {
-      return false;
-    }
     // For pre-render we want to limit the amount of CPU used, so we limit
     // the number of elements build. For pre-render to "seem complete"
     // we only need to build elements in the first viewport. We can't know
@@ -519,17 +386,6 @@ export class ResourcesImpl {
       return;
     }
 
-    if (this.onlyBuildWhenCloseToViewport_) {
-      const isCloseEnoughToViewport =
-        ignoreQuota ||
-        resource.isBuildRenderBlocking() ||
-        resource.renderOutsideViewport() ||
-        (this.isIdle_() && resource.idleRenderOutsideViewport());
-      if (!isCloseEnoughToViewport) {
-        return;
-      }
-    }
-
     if (this.documentReady_) {
       // Build resource immediately, the document has already been parsed.
       this.buildResourceUnsafe_(resource, ignoreQuota);
@@ -638,9 +494,9 @@ export class ResourcesImpl {
     if (resource.isBuilt()) {
       resource.pauseOnRemove();
     }
-    if (this.intersectionObserver_) {
-      // TODO(willchou): Fix observe/unobserve churn due to reparenting.
-      this.intersectionObserver_.unobserve(resource.element);
+
+    if (resource.getState() === ResourceState.LAYOUT_SCHEDULED) {
+      resource.layoutCanceled();
     }
     this.cleanupTasks_(resource, /* opt_removePending */ true);
     dev().fine(TAG_, 'resource removed:', resource.debugid);
@@ -649,8 +505,6 @@ export class ResourcesImpl {
   /** @override */
   upgraded(element) {
     const resource = Resource.forElement(element);
-    // TODO(willchou): Delay this until after 1vp loads. This should improve
-    // LCP and be safe since we already do something similar in prerender mode.
     this.buildOrScheduleBuildForResource_(resource);
     dev().fine(TAG_, 'resource upgraded:', resource.debugid);
   }
@@ -744,7 +598,6 @@ export class ResourcesImpl {
     }
 
     this.visible_ = this.ampdoc.isVisible();
-    this.prerenderSize_ = this.viewer_.getPrerenderSize();
     this.buildsThisPass_ = 0;
 
     const firstPassAfterDocumentReady =
@@ -763,6 +616,7 @@ export class ResourcesImpl {
         dict({
           'title': doc.title,
           'sourceUrl': getSourceUrl(this.ampdoc.getUrl()),
+          'isStory': doc.body.firstElementChild?.tagName === 'AMP-STORY',
           'serverLayout': doc.documentElement.hasAttribute('i-amphtml-element'),
           'linkRels': documentInfo.linkRels,
           'metaTags': {'viewport': documentInfo.viewport} /* deprecated */,
@@ -780,6 +634,18 @@ export class ResourcesImpl {
       dev().fine(TAG_, 'document height on load: %s', this.contentHeight_);
     }
 
+    // Once we know the document is fully parsed, we check to see if every AMP Element has been built
+    const firstPassAfterAllBuilt =
+      !this.firstPassAfterDocumentReady_ &&
+      this.firstPassAfterAllBuilt_ &&
+      this.resources_.every(
+        (r) => r.getState() != Resource.NOT_BUILT || r.element.R1()
+      );
+    if (firstPassAfterAllBuilt) {
+      this.firstPassAfterAllBuilt_ = false;
+      this.maybeChangeHeight_ = true;
+    }
+
     const viewportSize = this.viewport_.getSize();
     dev().fine(
       TAG_,
@@ -791,9 +657,7 @@ export class ResourcesImpl {
       this.relayoutTop_,
       ', viewportSize=',
       viewportSize.width,
-      viewportSize.height,
-      ', prerenderSize=',
-      this.prerenderSize_
+      viewportSize.height
     );
     this.pass_.cancel();
     this.vsyncScheduled_ = false;
@@ -836,10 +700,6 @@ export class ResourcesImpl {
     if (
       this.documentReady_ &&
       this.ampInitialized_ &&
-      // With IntersectionObserver, elements are not measured until the first
-      // intersection callback.
-      (!this.intersectionObserver_ ||
-        this.intersectionObserverCallbackFired_) &&
       !this.ampdoc.signals().get(READY_SCAN_SIGNAL)
     ) {
       // This signal mainly signifies that most of elements have been measured
@@ -850,14 +710,6 @@ export class ResourcesImpl {
     }
   }
 
-  /** @override */
-  getSlowElementRatio() {
-    if (this.totalLayoutCount_ === 0) {
-      return 0;
-    }
-    return this.slowLayoutCount_ / this.totalLayoutCount_;
-  }
-
   /**
    * Returns `true` when there's mutate work currently batched.
    * @return {boolean}
@@ -884,7 +736,7 @@ export class ResourcesImpl {
     // scroll adjustment to avoid active viewport changing without user's
     // action. The elements in the active viewport are not resized and instead
     // the overflow callbacks are called.
-    const now = Date.now();
+    const now = this.win.Date.now();
     const viewportRect = this.viewport_.getRect();
     const topOffset = viewportRect.height / 10;
     const bottomOffset = viewportRect.height / 10;
@@ -908,17 +760,15 @@ export class ResourcesImpl {
       let aboveVpHeightChange = 0;
       for (let i = 0; i < requestsChangeSize.length; i++) {
         const request = requestsChangeSize[i];
-        const {
-          resource,
-          event,
-        } = /** @type {!./resources-interface.ChangeSizeRequestDef} */ (request);
+        const {event, resource} =
+          /** @type {!./resources-interface.ChangeSizeRequestDef} */ (request);
         const box = resource.getLayoutBox();
 
         let topMarginDiff = 0;
         let bottomMarginDiff = 0;
         let leftMarginDiff = 0;
         let rightMarginDiff = 0;
-        let {top: topUnchangedBoundary, bottom: bottomDisplacedBoundary} = box;
+        let {bottom: bottomDisplacedBoundary, top: topUnchangedBoundary} = box;
         let newMargins = undefined;
         if (request.marginChange) {
           newMargins = request.marginChange.newMargins;
@@ -1037,7 +887,7 @@ export class ResourcesImpl {
                 // If the element has siblings, it's possible that a width-expansion will
                 // cause some of them to be pushed down.
                 const parentWidth =
-                  (parent.getLayoutWidth && parent.getLayoutWidth()) ||
+                  (parent.getLayoutSize && parent.getLayoutSize().width) ||
                   parent./*OK*/ offsetWidth;
                 let cumulativeWidth = widthDiff;
                 for (let i = 0; i < parent.childElementCount; i++) {
@@ -1109,7 +959,8 @@ export class ResourcesImpl {
         this.vsync_.run(
           {
             measure: (state) => {
-              state./*OK*/ scrollHeight = this.viewport_./*OK*/ getScrollHeight();
+              state./*OK*/ scrollHeight =
+                this.viewport_./*OK*/ getScrollHeight();
               state./*OK*/ scrollTop = this.viewport_./*OK*/ getScrollTop();
             },
             mutate: (state) => {
@@ -1170,13 +1021,12 @@ export class ResourcesImpl {
    * Always returns true unless the resource was previously displayed but is
    * not displayed now (i.e. the resource should be unloaded).
    * @param {!Resource} r
-   * @param {boolean} usePremeasuredRect
    * @return {boolean}
    * @private
    */
-  measureResource_(r, usePremeasuredRect = false) {
+  measureResource_(r) {
     const wasDisplayed = r.isDisplayed();
-    r.measure(usePremeasuredRect);
+    r.measure();
     return !(wasDisplayed && !r.isDisplayed());
   }
 
@@ -1197,25 +1047,6 @@ export class ResourcesImpl {
     }
   }
 
-  /**
-   * Selects into an experiment for render-on-idle-fix.
-   * @private
-   */
-  divertRenderOnIdleFixExperiment_() {
-    if (this.divertedRenderOnIdleFixExperiment_) {
-      return;
-    }
-    this.divertedRenderOnIdleFixExperiment_ = true;
-    const experimentInfoMap = /** @type {!Object<string,
-        !../experiments.ExperimentInfo>} */ ({
-      [RENDER_ON_IDLE_FIX_EXP.experiment]: {
-        isTrafficEligible: () => true,
-        branches: [RENDER_ON_IDLE_FIX_EXP.control, RENDER_ON_IDLE_FIX_EXP],
-      },
-    });
-    randomlySelectUnsetExperiments(this.win, experimentInfoMap);
-  }
-
   /**
    * Discovers work that needs to be done since the last pass. If viewport
    * has changed, it will try to build new elements, measure changed elements,
@@ -1231,14 +1062,14 @@ export class ResourcesImpl {
   discoverWork_() {
     // TODO(dvoytenko): vsync separation may be needed for different phases
 
-    const now = Date.now();
+    const now = this.win.Date.now();
 
     // Ensure all resources layout phase complete; when relayoutAll is requested
     // force re-layout.
     const {
+      elementsThatScrolled_: elementsThatScrolled,
       relayoutAll_: relayoutAll,
       relayoutTop_: relayoutTop,
-      elementsThatScrolled_: elementsThatScrolled,
     } = this;
     this.relayoutAll_ = false;
     this.relayoutTop_ = -1;
@@ -1248,27 +1079,20 @@ export class ResourcesImpl {
     let remeasureCount = 0;
     for (let i = 0; i < this.resources_.length; i++) {
       const r = this.resources_[i];
-      if (r.getState() == ResourceState.NOT_BUILT && !r.isBuilding()) {
+      if (
+        r.getState() == ResourceState.NOT_BUILT &&
+        !r.isBuilding() &&
+        !r.element.R1()
+      ) {
         this.buildOrScheduleBuildForResource_(r, /* checkForDupes */ true);
       }
-      if (this.intersectionObserver_) {
-        // With IntersectionObserver, we call applySizesAndMediaQuery() early
-        // in connectedCallback(), so we only need to re-apply on relayout.
-        // relayoutCount is also irrelevant and doesn't need an increment.
-        if (relayoutAll) {
-          r.applySizesAndMediaQuery();
-          dev().fine(TAG_, 'apply sizes/media query:', r.debugid);
-        }
-      } else if (
+
+      if (
         relayoutAll ||
         !r.hasBeenMeasured() ||
         // NOT_LAID_OUT is the state after build() but before measure().
         r.getState() == ResourceState.NOT_LAID_OUT
       ) {
-        // TODO(willchou): We sometimes call this needlessly/repeatedly.
-        // All elements outside of the loading rect are NOT_LAID_OUT!
-        r.applySizesAndMediaQuery();
-        dev().fine(TAG_, 'apply sizes/media query:', r.debugid);
         relayoutCount++;
       }
       if (r.isMeasureRequested()) {
@@ -1279,40 +1103,7 @@ export class ResourcesImpl {
     // Phase 2: Remeasure if there were any relayouts. Unfortunately, currently
     // there's no way to optimize this. All reads happen here.
     let toUnload;
-    if (this.intersectionObserver_) {
-      // The IntersectionObserver variant for phase 2 is just a simplification
-      // that ignores `relayoutTop` and `elementsThatScrolled`.
-      for (let i = 0; i < this.resources_.length; i++) {
-        const r = this.resources_[i];
-        if (r.hasOwner()) {
-          continue;
-        }
-        // Difference: if we have a "premeasured" client rect, consume it
-        // as the element's new measurements even if the element isn't built.
-        const requested = r.isMeasureRequested();
-        if (requested) {
-          dev().fine(TAG_, 'force remeasure:', r.debugid);
-        }
-        const premeasured = r.hasBeenPremeasured();
-        const needsMeasure = premeasured || requested || this.relayoutAll_;
-        if (needsMeasure) {
-          const isDisplayed = this.measureResource_(
-            r,
-            /* usePremeasuredRect */ premeasured
-          );
-          if (!isDisplayed) {
-            devAssert(
-              r.getState() != ResourceState.NOT_BUILT,
-              'Should not unload unbuilt elements.'
-            );
-            if (!toUnload) {
-              toUnload = [];
-            }
-            toUnload.push(r);
-          }
-        }
-      }
-    } else if (
+    if (
       relayoutCount > 0 ||
       remeasureCount > 0 ||
       relayoutAll ||
@@ -1321,7 +1112,7 @@ export class ResourcesImpl {
     ) {
       for (let i = 0; i < this.resources_.length; i++) {
         const r = this.resources_[i];
-        if (r.hasOwner() && !r.isMeasureRequested()) {
+        if ((r.hasOwner() && !r.isMeasureRequested()) || r.element.R1()) {
           // If element has owner, and measure is not requested, do nothing.
           continue;
         }
@@ -1364,15 +1155,12 @@ export class ResourcesImpl {
     }
 
     const viewportRect = this.viewport_.getRect();
-    // Load viewport = viewport + 3x up/down when document is visible or
-    // depending on prerenderSize in pre-render mode.
+    // Load viewport = viewport + 3x up/down when document is visible.
     let loadRect;
     if (this.visible_) {
       loadRect = expandLayoutRect(viewportRect, 0.25, 2);
-    } else if (this.prerenderSize_ > 0) {
-      loadRect = expandLayoutRect(viewportRect, 0, this.prerenderSize_ - 1);
     } else {
-      loadRect = null;
+      loadRect = viewportRect;
     }
 
     const visibleRect = this.visible_
@@ -1382,10 +1170,14 @@ export class ResourcesImpl {
         expandLayoutRect(viewportRect, 0.25, 0.25)
       : viewportRect;
 
-    // Phase 3: Trigger "viewport enter/exit" events.
+    // Phase 3: Set inViewport status for resources.
     for (let i = 0; i < this.resources_.length; i++) {
       const r = this.resources_[i];
-      if (r.getState() == ResourceState.NOT_BUILT || r.hasOwner()) {
+      if (
+        r.getState() == ResourceState.NOT_BUILT ||
+        r.hasOwner() ||
+        r.element.R1()
+      ) {
         continue;
       }
       // Note that when the document is not visible, neither are any of its
@@ -1410,6 +1202,7 @@ export class ResourcesImpl {
           !r.isBuilt() &&
           !r.isBuilding() &&
           !r.hasOwner() &&
+          !r.element.R1() &&
           r.hasBeenMeasured() &&
           r.isDisplayed() &&
           r.overlaps(loadRect)
@@ -1445,6 +1238,7 @@ export class ResourcesImpl {
         if (
           r.getState() == ResourceState.READY_FOR_LAYOUT &&
           !r.hasOwner() &&
+          !r.element.R1() &&
           r.isDisplayed() &&
           r.idleRenderOutsideViewport()
         ) {
@@ -1464,6 +1258,7 @@ export class ResourcesImpl {
         if (
           r.getState() == ResourceState.READY_FOR_LAYOUT &&
           !r.hasOwner() &&
+          !r.element.R1() &&
           r.isDisplayed()
         ) {
           dev().fine(TAG_, 'idle layout:', r.debugid);
@@ -1483,17 +1278,12 @@ export class ResourcesImpl {
    * @private
    */
   isIdle_(now = Date.now()) {
-    this.divertRenderOnIdleFixExperiment_();
     const lastDequeueTime = this.exec_.getLastDequeueTime();
     return (
       this.exec_.getSize() == 0 &&
       this.queue_.getSize() == 0 &&
       now > lastDequeueTime + 5000 &&
-      (lastDequeueTime > 0 ||
-        // TODO(powerivq): add tests for this fix once ready to launch
-        !this.renderOnIdleFix_ ||
-        getExperimentBranch(this.win, RENDER_ON_IDLE_FIX_EXP.id) ===
-          RENDER_ON_IDLE_FIX_EXP.control)
+      lastDequeueTime > 0
     );
   }
 
@@ -1510,7 +1300,7 @@ export class ResourcesImpl {
    * @private
    */
   work_() {
-    const now = Date.now();
+    const now = this.win.Date.now();
 
     let timeout = -1;
     let task = this.queue_.peek(this.boundTaskScorer_);
@@ -1543,20 +1333,10 @@ export class ResourcesImpl {
       } else {
         const {resource} = task;
 
-        let stillDisplayed = true;
-        if (this.intersectionObserver_) {
-          // With IntersectionObserver, peek at the premeasured rect to see
-          // if the resource is still displayed (has a non-zero size).
-          // The premeasured rect is most analogous to an immediate measure.
-          if (resource.hasBeenPremeasured()) {
-            stillDisplayed = resource.isDisplayed(
-              /* usePremeasuredRect */ true
-            );
-          }
-        } else {
-          // Remeasure can only update isDisplayed(), not in-viewport state.
-          resource.measure();
-        }
+        const stillDisplayed = true;
+        // Remeasure can only update isDisplayed(), not in-viewport state.
+        resource.measure();
+
         // Check if the element has exited the viewport or the page has changed
         // visibility since the layout was scheduled.
         if (
@@ -1657,7 +1437,7 @@ export class ResourcesImpl {
    * @private
    */
   calcTaskTimeout_(task) {
-    const now = Date.now();
+    const now = this.win.Date.now();
 
     if (this.exec_.getSize() == 0) {
       // If we've never been visible, return 0. This follows the previous
@@ -1706,11 +1486,6 @@ export class ResourcesImpl {
    * @private
    */
   taskComplete_(task, success, opt_reason) {
-    this.totalLayoutCount_++;
-    if (task.resource.isInViewport() && this.firstVisibleTime_ >= 0) {
-      this.slowLayoutCount_++;
-    }
-
     this.exec_.dequeue(task);
     this.schedulePass(POST_TASK_PASS_DELAY_);
     if (!success) {
@@ -1773,6 +1548,9 @@ export class ResourcesImpl {
     opt_parentPriority,
     opt_forceOutsideViewport
   ) {
+    if (resource.element.R1()) {
+      return;
+    }
     const isBuilt = resource.getState() != ResourceState.NOT_BUILT;
     const isDisplayed = resource.isDisplayed();
     if (!isBuilt || !isDisplayed) {
@@ -1836,7 +1614,7 @@ export class ResourcesImpl {
         Math.max(resource.getLayoutPriority(), parentPriority) + priorityOffset,
       forceOutsideViewport,
       callback,
-      scheduleTime: Date.now(),
+      scheduleTime: this.win.Date.now(),
       startTime: 0,
       promise: null,
     };
@@ -1868,11 +1646,11 @@ export class ResourcesImpl {
    */
   setupVisibilityStateMachine_(vsm) {
     const {
-      PRERENDER: prerender,
-      VISIBLE: visible,
       HIDDEN: hidden,
-      PAUSED: paused,
       INACTIVE: inactive,
+      PAUSED: paused,
+      PRERENDER: prerender,
+      VISIBLE: visible,
     } = VisibilityState;
     const doWork = () => {
       // If viewport size is 0, the manager will wait for the resize event.
@@ -1966,7 +1744,10 @@ export class ResourcesImpl {
    * @private
    */
   cleanupTasks_(resource, opt_removePending) {
-    if (resource.getState() == ResourceState.NOT_LAID_OUT) {
+    if (
+      resource.getState() == ResourceState.NOT_LAID_OUT ||
+      resource.getState() == ResourceState.READY_FOR_LAYOUT
+    ) {
       // If the layout promise for this resource has not resolved yet, remove
       // it from the task queues to make sure this resource can be rescheduled
       // for layout again later on.
diff --git a/src/service/resources-interface.js b/src/service/resources-interface.js
index 00bf25ac00d1e..3002507165067 100644
--- a/src/service/resources-interface.js
+++ b/src/service/resources-interface.js
@@ -48,7 +48,6 @@ export class ResourcesInterface {
   /**
    * Returns a list of resources.
    * @return {!Array<!./resource.Resource>}
-   * @export
    */
   get() {}
 
@@ -110,7 +109,6 @@ export class ResourcesInterface {
    * @param {boolean} layout
    * @param {number=} opt_parentPriority
    * @param {boolean=} opt_forceOutsideViewport
-   * @package
    */
   scheduleLayoutOrPreload(
     resource,
@@ -177,17 +175,5 @@ export class ResourcesInterface {
    * @param {number} newLayoutPriority
    */
   updateLayoutPriority(element, newLayoutPriority) {}
-
-  /**
-   * https://github.com/ampproject/amphtml/issues/25428
-   * @return {boolean}
-   */
-  isIntersectionExperimentOn() {}
-
-  /**
-   * Returns the percent of resources that were laid out after entering viewport.
-   * @return {number}
-   */
-  getSlowElementRatio() {}
 }
 /* eslint-enable no-unused-vars */
diff --git a/src/service/scheduler.js b/src/service/scheduler.js
new file mode 100644
index 0000000000000..4084c4559ab8e
--- /dev/null
+++ b/src/service/scheduler.js
@@ -0,0 +1,309 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {LayoutPriority} from '../layout';
+import {READY_SCAN_SIGNAL} from './resources-interface';
+import {VisibilityState} from '../core/constants/visibility-state';
+import {containsNotSelf, hasNextNodeInDocumentOrder, isIframed} from '../dom';
+import {getServiceForDoc, registerServiceBuilderForDoc} from '../service';
+import {removeItem} from '../core/types/array';
+
+const ID = 'scheduler';
+
+const ROOT_MARGIN = '250% 31.25%';
+
+/** @implements {../service.Disposable} */
+export class Scheduler {
+  /** @param {!./ampdoc-impl.AmpDoc} ampdoc  */
+  constructor(ampdoc) {
+    /** @private @const */
+    this.ampdoc_ = ampdoc;
+
+    const {win} = ampdoc;
+
+    /** @private @const {!IntersectionObserver} */
+    this.observer_ = new win.IntersectionObserver((e) => this.observed_(e), {
+      // Root bounds are not important, so we can use the `root:null` for a
+      // top-level window.
+      root: isIframed(win) ? /** @type {?} */ (win.document) : null,
+      rootMargin: ROOT_MARGIN,
+    });
+
+    /** @private @const {!Map<!Element, !IntersectionObserver>} */
+    this.containerMap_ = new Map();
+
+    /** @private @const {!Map<!AmpElement, {asap: boolean, isIntersecting: boolean}>} */
+    this.targets_ = new Map();
+
+    /** @private {?Array<!AmpElement>} */
+    this.parsingTargets_ = [];
+
+    /** @private {boolean} */
+    this.scheduledReady_ = false;
+
+    ampdoc.whenReady().then(() => this.checkParsing_());
+
+    /** @private {?UnlistenDef} */
+    this.visibilityUnlisten_ = ampdoc.onVisibilityChanged(() =>
+      this.docVisibilityChanged_()
+    );
+  }
+
+  /** @override */
+  dispose() {
+    this.observer_.disconnect();
+    this.targets_.clear();
+    if (this.visibilityUnlisten_) {
+      this.visibilityUnlisten_();
+      this.visibilityUnlisten_ = null;
+    }
+  }
+
+  /**
+   * @param {!AmpElement} target
+   */
+  scheduleAsap(target) {
+    this.targets_.set(target, {asap: true, isIntersecting: false});
+    this.waitParsing_(target);
+  }
+
+  /**
+   * @param {!AmpElement} target
+   */
+  schedule(target) {
+    if (this.targets_.has(target)) {
+      return;
+    }
+
+    if (target.deferredMount()) {
+      this.targets_.set(target, {asap: false, isIntersecting: false});
+      this.observer_.observe(target);
+      if (this.containerMap_.size > 0) {
+        this.containerMap_.forEach((observer, container) => {
+          if (containsNotSelf(container, target)) {
+            observer.observe(target);
+          }
+        });
+      }
+    } else {
+      this.targets_.set(target, {asap: false, isIntersecting: true});
+    }
+
+    this.waitParsing_(target);
+  }
+
+  /**
+   * @param {!AmpElement} target
+   */
+  unschedule(target) {
+    if (!this.targets_.has(target)) {
+      return;
+    }
+
+    this.targets_.delete(target);
+
+    this.observer_.unobserve(target);
+    if (this.containerMap_.size > 0) {
+      this.containerMap_.forEach((observer) => {
+        observer.unobserve(target);
+      });
+    }
+
+    if (this.parsingTargets_) {
+      removeItem(this.parsingTargets_, target);
+      this.checkParsing_();
+    }
+  }
+
+  /**
+   * Adds the observer for the specified container. The first observer to
+   * find an intersection will trigger the element's mount.
+   *
+   * @param {!Element} container
+   * @param {!Element=} opt_scroller
+   */
+  setContainer(container, opt_scroller) {
+    if (this.containerMap_.has(container)) {
+      return;
+    }
+
+    // Create observer.
+    const {win} = this.ampdoc_;
+    const observer = new win.IntersectionObserver((e) => this.observed_(e), {
+      root: opt_scroller || container,
+      rootMargin: ROOT_MARGIN,
+    });
+    this.containerMap_.set(container, observer);
+
+    // Subscribe all pending children. Ignore `asap` targets since they
+    // will be scheduled immediately and do not need an intersection
+    // observer input.
+    this.targets_.forEach(({asap}, target) => {
+      if (!asap && containsNotSelf(container, target)) {
+        observer.observe(target);
+      }
+    });
+  }
+
+  /**
+   * Removes the container and its observer that were set by the `setContainer`.
+   *
+   * @param {!Element} container
+   */
+  removeContainer(container) {
+    const observer = this.containerMap_.get(container);
+    if (!observer) {
+      return;
+    }
+
+    // Disconnect. All children will be unobserved automatically.
+    observer.disconnect();
+    this.containerMap_.delete(container);
+  }
+
+  /** @private*/
+  signalScanReady_() {
+    if (this.ampdoc_.isReady() && !this.scheduledReady_) {
+      this.scheduledReady_ = true;
+      const {win} = this.ampdoc_;
+      win.setTimeout(() => {
+        // This signal mainly signifies that some of the elements have been
+        // discovered and scheduled.
+        this.ampdoc_.signals().signal(READY_SCAN_SIGNAL);
+      }, 50);
+    }
+  }
+
+  /** @private */
+  docVisibilityChanged_() {
+    const vs = this.ampdoc_.getVisibilityState();
+    if (
+      vs == VisibilityState.VISIBLE ||
+      vs == VisibilityState.HIDDEN ||
+      vs == VisibilityState.PRERENDER
+    ) {
+      this.targets_.forEach((_, target) => this.maybeBuild_(target));
+    }
+  }
+
+  /**
+   * @param {!AmpElement} target
+   * @private
+   */
+  waitParsing_(target) {
+    const parsingTargets = this.parsingTargets_;
+    if (parsingTargets) {
+      if (!parsingTargets.includes(target)) {
+        parsingTargets.push(target);
+      }
+      this.checkParsing_();
+    } else {
+      this.maybeBuild_(target);
+    }
+  }
+
+  /** @private */
+  checkParsing_() {
+    const documentReady = this.ampdoc_.isReady();
+    const parsingTargets = this.parsingTargets_;
+    if (parsingTargets) {
+      for (let i = 0; i < parsingTargets.length; i++) {
+        const target = parsingTargets[i];
+        if (
+          documentReady ||
+          hasNextNodeInDocumentOrder(target, this.ampdoc_.getRootNode())
+        ) {
+          parsingTargets.splice(i--, 1);
+
+          this.maybeBuild_(target);
+        }
+      }
+    }
+    if (documentReady) {
+      this.parsingTargets_ = null;
+      this.signalScanReady_();
+    }
+  }
+
+  /**
+   * @param {!Array<!IntersectionObserverEntry>} entries
+   * @private
+   */
+  observed_(entries) {
+    for (let i = 0; i < entries.length; i++) {
+      const {isIntersecting: isThisIntersecting, target} = entries[i];
+      const ampTarget = /** @type {!AmpElement} */ (target);
+
+      const current = this.targets_.get(ampTarget);
+      if (!current) {
+        continue;
+      }
+
+      const isIntersecting = isThisIntersecting || current.isIntersecting;
+      if (isIntersecting !== current.isIntersecting) {
+        this.targets_.set(ampTarget, {asap: current.asap, isIntersecting});
+      }
+      if (isIntersecting) {
+        this.maybeBuild_(ampTarget);
+      }
+    }
+  }
+
+  /**
+   * @param {!AmpElement} target
+   * @private
+   */
+  maybeBuild_(target) {
+    const parsingTargets = this.parsingTargets_;
+    const parsed = !(parsingTargets && parsingTargets.includes(target));
+    const {asap, isIntersecting} = this.targets_.get(target) || {
+      asap: false,
+      isIntersecting: false,
+    };
+    const vs = this.ampdoc_.getVisibilityState();
+    const toBuild =
+      parsed &&
+      (asap || isIntersecting) &&
+      (vs == VisibilityState.VISIBLE ||
+        // Hidden (hidden tab) allows full build.
+        vs == VisibilityState.HIDDEN ||
+        // Prerender can only proceed when allowed.
+        (vs == VisibilityState.PRERENDER && target.prerenderAllowed()));
+    if (!toBuild) {
+      return;
+    }
+
+    this.unschedule(target);
+
+    // The high-priority elements are scheduled via `setTimeout`. All other
+    // elements are scheduled via the `requestIdleCallback`.
+    const {win} = this.ampdoc_;
+    const scheduler =
+      asap || target.getBuildPriority() <= LayoutPriority.CONTENT
+        ? win.setTimeout
+        : win.requestIdleCallback || win.setTimeout;
+    scheduler(() => target.mountInternal());
+  }
+}
+
+/**
+ * @param {!./ampdoc-impl.AmpDoc} ampdoc
+ * @return {!Scheduler}
+ */
+export function getSchedulerForDoc(ampdoc) {
+  registerServiceBuilderForDoc(ampdoc, ID, Scheduler);
+  return /** @type {!Scheduler} */ (getServiceForDoc(ampdoc, ID));
+}
diff --git a/src/service/standard-actions-impl.js b/src/service/standard-actions-impl.js
index f8ef807a25aee..472d4cbc37fbf 100644
--- a/src/service/standard-actions-impl.js
+++ b/src/service/standard-actions-impl.js
@@ -14,18 +14,14 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../action-constants';
+import {ActionTrust} from '../core/constants/action-constants';
 import {Layout, getLayoutClass} from '../layout';
 import {Services} from '../services';
 import {computedStyle, toggle} from '../style';
 import {dev, user, userAssert} from '../log';
-import {
-  getAmpdoc,
-  installServiceInEmbedScope,
-  registerServiceBuilderForDoc,
-} from '../service';
-import {isFiniteNumber, toWin} from '../types';
-import {startsWith} from '../string';
+import {getAmpdoc, registerServiceBuilderForDoc} from '../service';
+import {isFiniteNumber} from '../core/types';
+import {toWin} from '../types';
 import {tryFocus} from '../dom';
 
 /**
@@ -60,23 +56,17 @@ const AMP_CSS_RE = /^i-amphtml-/;
 /**
  * This service contains implementations of some of the most typical actions,
  * such as hiding DOM elements.
- * @implements {../service.EmbeddableService}
- * @private Visible for testing.
+ * @visibleForTesting
  */
 export class StandardActions {
   /**
    * @param {!./ampdoc-impl.AmpDoc} ampdoc
-   * @param {!Window=} opt_win
    */
-  constructor(ampdoc, opt_win) {
-    // TODO(#22733): remove subroooting once ampdoc-fie is launched.
-
+  constructor(ampdoc) {
     /** @const {!./ampdoc-impl.AmpDoc} */
     this.ampdoc = ampdoc;
 
-    const context = opt_win
-      ? opt_win.document.documentElement
-      : ampdoc.getHeadNode();
+    const context = ampdoc.getHeadNode();
 
     /** @const @private {!./mutator-interface.MutatorInterface} */
     this.mutator_ = Services.mutatorForDoc(ampdoc);
@@ -89,19 +79,6 @@ export class StandardActions {
     this.installActions_(Services.actionServiceForDoc(context));
   }
 
-  /**
-   * @param {!Window} embedWin
-   * @param {!./ampdoc-impl.AmpDoc} ampdoc
-   * @nocollapse
-   */
-  static installInEmbedWindow(embedWin, ampdoc) {
-    installServiceInEmbedScope(
-      embedWin,
-      'standard-actions',
-      new StandardActions(ampdoc, embedWin)
-    );
-  }
-
   /**
    * @param {!./action-impl.ActionService} actionService
    * @private
@@ -147,13 +124,15 @@ export class StandardActions {
     if (!invocation.satisfiesTrust(ActionTrust.DEFAULT)) {
       return null;
     }
-    const {node, method, args} = invocation;
-    const win = (node.ownerDocument || node).defaultView;
+    const {args, method, node} = invocation;
+    const win = getWin(node);
     switch (method) {
       case 'pushState':
       case 'setState':
         const element =
-          node.nodeType === Node.DOCUMENT_NODE ? node.documentElement : node;
+          node.nodeType === Node.DOCUMENT_NODE
+            ? /** @type {!Document} */ (node).documentElement
+            : dev().assertElement(node);
         return Services.bindForDocOrNull(element).then((bind) => {
           userAssert(bind, 'AMP-BIND is not installed.');
           return bind.invoke(invocation);
@@ -174,7 +153,9 @@ export class StandardActions {
         return this.handleScrollTo_(invocation);
 
       case 'goBack':
-        Services.historyForDoc(this.ampdoc).goBack();
+        Services.historyForDoc(this.ampdoc).goBack(
+          /* navigate */ !!(args && args['navigate'] === true)
+        );
         return null;
 
       case 'print':
@@ -198,12 +179,13 @@ export class StandardActions {
    * @private Visible to tests only.
    */
   handleNavigateTo_(invocation) {
-    const {node, caller, method, args} = invocation;
-    const win = (node.ownerDocument || node).defaultView;
+    const {args, caller, method, node} = invocation;
+    const win = getWin(node);
     // Some components have additional constraints on allowing navigation.
     let permission = Promise.resolve();
-    if (startsWith(caller.tagName, 'AMP-')) {
-      permission = caller.getImpl().then((impl) => {
+    if (caller.tagName.startsWith('AMP-')) {
+      const ampElement = /** @type {!AmpElement} */ (caller);
+      permission = ampElement.getImpl().then((impl) => {
         if (typeof impl.throwIfCannotNavigate == 'function') {
           impl.throwIfCannotNavigate();
         }
@@ -219,7 +201,7 @@ export class StandardActions {
         );
       },
       /* onrejected */ (e) => {
-        user().error(TAG, e.message);
+        user().error(TAG, e);
       }
     );
   }
@@ -237,7 +219,7 @@ export class StandardActions {
    */
   handleCloseOrNavigateTo_(invocation) {
     const {node} = invocation;
-    const win = (node.ownerDocument || node).defaultView;
+    const win = getWin(node);
 
     // Don't allow closing if embedded in iframe or does not have an opener or
     // embedded in a multi-doc shadowDOM case.
@@ -320,9 +302,10 @@ export class StandardActions {
     const target = dev().assertElement(invocation.node);
 
     if (target.classList.contains('i-amphtml-element')) {
+      const ampElement = /** @type {!AmpElement} */ (target);
       this.mutator_.mutateElement(
-        target,
-        () => target./*OK*/ collapse(),
+        ampElement,
+        () => ampElement./*OK*/ collapse(),
         // It is safe to skip measuring, because `mutator-impl.collapseElement`
         // will set the size of the element as well as trigger a remeasure of
         // everything below the collapsed element.
@@ -392,7 +375,8 @@ export class StandardActions {
    */
   handleShowSync_(target, autofocusElOrNull) {
     if (target.classList.contains('i-amphtml-element')) {
-      target./*OK*/ expand();
+      const ampElement = /** @type {!AmpElement} */ (target);
+      ampElement./*OK*/ expand();
     } else {
       toggle(target, true);
     }
@@ -449,6 +433,16 @@ export class StandardActions {
   }
 }
 
+/**
+ * @param {!Node} node
+ * @return {!Window}
+ */
+function getWin(node) {
+  return toWin(
+    (node.ownerDocument || /** @type {!Document} */ (node)).defaultView
+  );
+}
+
 /**
  * @param {!./ampdoc-impl.AmpDoc} ampdoc
  */
diff --git a/src/service/storage-impl.js b/src/service/storage-impl.js
index 6bb34554b8900..a4943183c5f91 100644
--- a/src/service/storage-impl.js
+++ b/src/service/storage-impl.js
@@ -16,9 +16,9 @@
 
 import {Services} from '../services';
 import {dev, devAssert} from '../log';
-import {dict} from '../utils/object';
+import {dict, recreateNonProtoObject} from '../core/types/object';
 import {getSourceOrigin} from '../url';
-import {parseJson, recreateNonProtoObject} from '../json';
+import {parseJson} from '../core/types/object/json';
 import {registerServiceBuilderForDoc} from '../service';
 
 /** @const */
@@ -53,6 +53,9 @@ export class Storage {
     /** @private @const {!StorageBindingDef} */
     this.binding_ = binding;
 
+    /** @private @const {boolean} */
+    this.isViewerStorage_ = binding instanceof ViewerStorageBinding;
+
     /** @const @private {string} */
     this.origin_ = getSourceOrigin(this.ampdoc.win.location);
 
@@ -73,10 +76,11 @@ export class Storage {
    * Returns the promise that yields the value of the property for the specified
    * key.
    * @param {string} name
+   * @param {number=} opt_duration
    * @return {!Promise<*>}
    */
-  get(name) {
-    return this.getStore_().then((store) => store.get(name));
+  get(name, opt_duration) {
+    return this.getStore_().then((store) => store.get(name, opt_duration));
   }
 
   /**
@@ -115,6 +119,14 @@ export class Storage {
     return this.saveStore_((store) => store.remove(name));
   }
 
+  /**
+   * Returns if this.binding is an instance of ViewerStorageBinding
+   * @return {boolean}
+   */
+  isViewerStorage() {
+    return this.isViewerStorage_;
+  }
+
   /**
    * @return {!Promise<!Store>}
    * @private
@@ -212,12 +224,19 @@ export class Store {
 
   /**
    * @param {string} name
+   * @param {number|undefined} opt_duration
    * @return {*|undefined}
    */
-  get(name) {
+  get(name, opt_duration) {
     // The structure is {key: {v: *, t: time}}
     const item = this.values_[name];
-    return item ? item['v'] : undefined;
+    const timestamp = item ? item['t'] : undefined;
+    const isNotExpired =
+      opt_duration && timestamp != undefined
+        ? timestamp + opt_duration > Date.now()
+        : true;
+    const value = item && isNotExpired ? item['v'] : undefined;
+    return value;
   }
 
   /**
@@ -400,14 +419,20 @@ export class ViewerStorageBinding {
 
   /** @override */
   saveBlob(origin, blob) {
-    return /** @type {!Promise} */ (this.viewer_
-      .sendMessageAwaitResponse(
-        'saveStore',
-        dict({'origin': origin, 'blob': blob})
-      )
-      .catch((reason) => {
-        throw dev().createExpectedError(TAG, 'Failed to save store: ', reason);
-      }));
+    return /** @type {!Promise} */ (
+      this.viewer_
+        .sendMessageAwaitResponse(
+          'saveStore',
+          dict({'origin': origin, 'blob': blob})
+        )
+        .catch((reason) => {
+          throw dev().createExpectedError(
+            TAG,
+            'Failed to save store: ',
+            reason
+          );
+        })
+    );
   }
 }
 
diff --git a/src/service/template-impl.js b/src/service/template-impl.js
index 9bafc0a177055..75d1c975439d8 100644
--- a/src/service/template-impl.js
+++ b/src/service/template-impl.js
@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../utils/promise';
-import {Services} from '../services';
-import {dev, userAssert} from '../log';
-import {getService, registerServiceBuilder} from '../service';
+import {Deferred} from '../core/data-structures/promise';
+import {getServiceForDoc, registerServiceBuilderForDoc} from '../service';
 import {rootNodeFor, scopedQuerySelector} from '../dom';
+import {userAssert} from '../log';
 
 /**
  * @fileoverview
@@ -26,135 +25,51 @@ import {rootNodeFor, scopedQuerySelector} from '../dom';
  * {@link https://docs.google.com/document/d/1q-5MPQHnOHLF_uL7lQsGZdzuBgrPTkCy2PdRP-YCbOw/edit#}
  */
 
-/**
- * @typedef {typeof BaseTemplate}
- */
-let TemplateClassDef;
-
 /** @private @const {string} */
 const PROP_ = '__AMP_IMPL_';
 
 /** @private @const {string} */
 const PROP_PROMISE_ = '__AMP_WAIT_';
 
-/**
- * The interface that is implemented by all templates.
- */
-export class BaseTemplate {
-  /**
-   * @param {!Element} element
-   * @param {!Window} win
-   */
-  constructor(element, win) {
-    /** @public @const */
-    this.element = element;
-
-    /** @public @const {!Window} */
-    this.win = element.ownerDocument.defaultView || win;
-
-    /** @private @const */
-    this.viewer_ = Services.viewerForDoc(this.element);
-
-    this.compileCallback();
-  }
-
-  /**
-   * Override in subclass if the element needs to compile the template.
-   * @protected
-   */
-  compileCallback() {
-    // Subclasses may override.
-  }
-
-  /**
-   * Bypasses template rendering and directly sets HTML. Should only be used
-   * for server-side rendering case. To be implemented by subclasses.
-   * @param {string} unusedData
-   * @return {!Element}
-   */
-  setHtml(unusedData) {
-    throw new Error('Not implemented');
-  }
-
-  /**
-   * To be implemented by subclasses.
-   * @param {!JsonObject|string} unusedData
-   * @return {!Element}
-   */
-  render(unusedData) {
-    throw new Error('Not implemented');
-  }
-
-  /**
-   * Helps the template implementation to unwrap the root element. The root
-   * element can be unwrapped only when it contains a single element or a
-   * single element surrounded by empty text nodes.
-   * @param {!Element} root
-   * @return {!Element}
-   * @protected @final
-   */
-  unwrap(root) {
-    let singleElement = null;
-    for (let n = root.firstChild; n != null; n = n.nextSibling) {
-      if (n.nodeType == /* TEXT */ 3) {
-        if (n.textContent.trim()) {
-          // Non-empty text node - can't unwrap.
-          singleElement = null;
-          break;
-        }
-      } else if (n.nodeType == /* COMMENT */ 8) {
-        // Ignore comments.
-      } else if (n.nodeType == /* ELEMENT */ 1) {
-        if (!singleElement) {
-          singleElement = dev().assertElement(n);
-        } else {
-          // This is not the first element - can't unwrap.
-          singleElement = null;
-          break;
-        }
-      } else {
-        singleElement = null;
-      }
-    }
-    return singleElement || root;
-  }
-
-  /**
-   * @protected @final
-   * @return {boolean}
-   */
-  viewerCanRenderTemplates() {
-    return this.viewer_.hasCapability('viewerRenderTemplate');
-  }
-}
+/** @private @const {function()} */
+const EMPTY_FUNC = () => {};
 
 /**
  */
 export class Templates {
-  /** @param {!Window} win */
-  constructor(win) {
-    /** @private @const {!Window} */
-    this.win_ = win;
+  /** @param {!./ampdoc-impl.AmpDoc} ampdoc */
+  constructor(ampdoc) {
+    /** @private @const */
+    this.ampdoc_ = ampdoc;
 
     /**
      * A map from template type to template's class promise.
-     * @private @const {!Object<string, !Promise<!TemplateClassDef>>}
+     * @private @const {!Object<string, !Promise<typeof ../base-template.BaseTemplate>>}
      */
     this.templateClassMap_ = {};
 
     /**
      * A map from template type to template's class promise. This is a transient
      * storage. As soon as the template class loaded, the entry is removed.
-     * @private @const {!Object<string, function(!TemplateClassDef)>}
+     * @private @const {!Object<string, function(typeof ../base-template.BaseTemplate)>}
      */
     this.templateClassResolvers_ = {};
   }
 
+  /**
+   * Waits for template to be fully initialized.
+   * @param {!Element} templateElement
+   * @return {!Promise}
+   */
+  whenReady(templateElement) {
+    return this.getImplementation_(templateElement).then(EMPTY_FUNC);
+  }
+
   /**
    * Inserts the specified template element.
    * @param {!Element} templateElement
    * @param {string} html
-   * @return {!Promise<!Element>}
+   * @return {!Promise<(!Element|!Array<!Element>)>}
    */
   setHtmlForTemplate(templateElement, html) {
     return this.getImplementation_(templateElement).then((impl) => {
@@ -174,6 +89,18 @@ export class Templates {
     });
   }
 
+  /**
+   * Renders the specified template element using the supplied data.
+   * @param {!Element} templateElement
+   * @param {!JsonObject} data
+   * @return {!Promise<!Element>}
+   */
+  renderTemplateAsString(templateElement, data) {
+    return this.getImplementation_(templateElement).then((impl) => {
+      return impl.renderAsString(data);
+    });
+  }
+
   /**
    * Renders the specified template element using the supplied array of data
    * and returns an array of resulting elements.
@@ -217,7 +144,7 @@ export class Templates {
    * @param {!Element} parent
    * @param {string} html
    * @param {string=} opt_querySelector
-   * @return {!Promise<!Element>}
+   * @return {!Promise<(!Element|!Array<!Element>)>}
    */
   findAndSetHtmlForTemplate(parent, html, opt_querySelector) {
     return this.setHtmlForTemplate(
@@ -288,11 +215,14 @@ export class Templates {
   maybeFindTemplate(parent, opt_querySelector) {
     const templateId = parent.getAttribute('template');
     if (templateId) {
-      return rootNodeFor(parent).getElementById(templateId);
+      const rootNode = /** @type {!Document|!ShadowRoot} */ (
+        rootNodeFor(parent)
+      );
+      return rootNode.getElementById(templateId);
     } else if (opt_querySelector) {
       return scopedQuerySelector(parent, opt_querySelector);
     } else {
-      return parent.querySelector('template, script[type="text/plain"]');
+      return parent.querySelector('template[type], script[type="text/plain"]');
     }
   }
 
@@ -300,11 +230,11 @@ export class Templates {
    * Returns the promise that will eventually yield the template implementation
    * for the specified template element.
    * @param {!Element} element
-   * @return {!Promise<!BaseTemplate>}
+   * @return {!Promise<!../base-template.BaseTemplate>}
    * @private
    */
   getImplementation_(element) {
-    /** @const {!BaseTemplate} */
+    /** @const {!../base-template.BaseTemplate} */
     const impl = element[PROP_];
     if (impl) {
       return Promise.resolve(impl);
@@ -326,7 +256,11 @@ export class Templates {
 
     promise = this.waitForTemplateClass_(element, type).then(
       (templateClass) => {
-        const impl = (element[PROP_] = new templateClass(element, this.win_));
+        // This is ugly workaround for https://github.com/google/closure-compiler/issues/2630.
+        const Constr = /** @type {function(new:Object, !Element, !Window)} */ (
+          templateClass
+        );
+        const impl = (element[PROP_] = new Constr(element, this.ampdoc_.win));
         delete element[PROP_PROMISE_];
         return impl;
       }
@@ -340,7 +274,7 @@ export class Templates {
    * will wait until the actual template script has been downloaded and parsed.
    * @param {!Element} element
    * @param {string} type
-   * @return {!Promise<!TemplateClassDef>}
+   * @return {!Promise<typeof ../base-template.BaseTemplate>}
    * @private
    */
   waitForTemplateClass_(element, type) {
@@ -360,7 +294,7 @@ export class Templates {
    * Registers an extended template. This function should typically be called
    * through the registerTemplate method on the AMP runtime.
    * @param {string} type
-   * @param {!TemplateClassDef} templateClass
+   * @param {typeof ../base-template.BaseTemplate} templateClass
    * @private
    * @restricted
    */
@@ -376,7 +310,7 @@ export class Templates {
   }
 
   /**
-   * @param {!BaseTemplate} impl
+   * @param {!../base-template.BaseTemplate} impl
    * @param {!JsonObject} data
    * @return {!Element}
    * @private
@@ -386,9 +320,9 @@ export class Templates {
   }
 
   /**
-   * @param {!BaseTemplate} impl
+   * @param {!../base-template.BaseTemplate} impl
    * @param {string} html
-   * @return {!Element}
+   * @return {!Element|!Array<!Element>}
    * @private
    */
   setHtml_(impl, html) {
@@ -397,21 +331,31 @@ export class Templates {
 }
 
 /**
- * @param {!Window} win
+ * @param {!./ampdoc-impl.AmpDoc} ampdoc
  */
-export function installTemplatesService(win) {
-  registerServiceBuilder(win, 'templates', Templates);
+export function installTemplatesServiceForDoc(ampdoc) {
+  registerServiceBuilderForDoc(ampdoc, 'templates', Templates);
 }
 
 /**
  * Registers an extended template. This function should typically be called
  * through the registerTemplate method on the AMP runtime.
- * @param {!Window} win
+ * @param {!./ampdoc-impl.AmpDoc} ampdoc
  * @param {string} type
- * @param {!TemplateClassDef} templateClass
+ * @param {typeof ../base-template.BaseTemplate} templateClass
  * @return {undefined}
  */
-export function registerExtendedTemplate(win, type, templateClass) {
-  const templatesService = getService(win, 'templates');
+export function registerExtendedTemplateForDoc(ampdoc, type, templateClass) {
+  const templatesService = getServiceForDoc(ampdoc, 'templates');
   return templatesService.registerTemplate_(type, templateClass);
 }
+
+/**
+ * @param {!Templates} templates
+ * @param {string} type
+ * @return {!Promise<typeof ../base-template.BaseTemplate>|undefined}
+ * @visibleForTesting
+ */
+export function getTemplateClassForTesting(templates, type) {
+  return templates.templateClassMap_[type];
+}
diff --git a/src/service/timer-impl.js b/src/service/timer-impl.js
index 7034d876bc83a..2a5c556a2a164 100644
--- a/src/service/timer-impl.js
+++ b/src/service/timer-impl.js
@@ -15,8 +15,11 @@
  */
 
 import {getMode} from '../mode';
-import {installServiceInEmbedScope, registerServiceBuilder} from '../service';
-import {reportError} from '../error';
+import {
+  registerServiceBuilder,
+  registerServiceBuilderInEmbedWin,
+} from '../service';
+import {reportError} from '../error-reporting';
 import {user} from '../log';
 
 const TAG = 'timer';
@@ -186,7 +189,7 @@ export function installTimerService(window) {
  * @param {!Window} embedWin
  */
 export function installTimerInEmbedWindow(embedWin) {
-  installServiceInEmbedScope(embedWin, TAG, new Timer(embedWin));
+  registerServiceBuilderInEmbedWin(embedWin, TAG, Timer);
 }
 
 /**
diff --git a/src/service/url-expander/OWNERS b/src/service/url-expander/OWNERS
index f3fc2a2f602ff..699fa98eaf1c0 100644
--- a/src/service/url-expander/OWNERS
+++ b/src/service/url-expander/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/src/service/url-expander/expander.js b/src/service/url-expander/expander.js
index a4068d3b41f10..5e4d79c3f9773 100644
--- a/src/service/url-expander/expander.js
+++ b/src/service/url-expander/expander.js
@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
-import {hasOwn} from '../../utils/object';
-import {rethrowAsync, user} from '../../log';
-import {trimStart} from '../../string';
-import {tryResolve} from '../../utils/promise';
+import {hasOwn} from '../../core/types/object';
+import {rethrowAsync} from '../../core/error';
+import {trimStart} from '../../core/types/string';
+import {tryResolve} from '../../core/data-structures/promise';
+import {user} from '../../log';
 
 /** @private @const {string} */
 const PARSER_IGNORE_FLAG = '`';
@@ -25,6 +26,27 @@ const PARSER_IGNORE_FLAG = '`';
 /** @private @const {string} */
 const TAG = 'Expander';
 
+/**
+ * @typedef {{
+ *   name: string,
+ *   prioritized: (!BindingInfoDef|undefined),
+ *   encode: boolean,
+ *   sync: ../variable-source.SyncResolverDef,
+ *   async: ../variable-source.AsyncResolverDef,
+ * }}
+ */
+let BindingInfoDef;
+
+/**
+ * @typedef {{
+ *   start: number,
+ *   stop: number,
+ *   name: string,
+ *   length: number,
+ * }}
+ */
+let MatchDef;
+
 /** Rudamentary parser to handle nested Url replacement. */
 export class Expander {
   /**
@@ -34,7 +56,7 @@ export class Expander {
    * @param {!Object<string, *>=} opt_collectVars Object passed in to collect
    *   variable resolutions.
    * @param {boolean=} opt_sync If the method should resolve syncronously.
-   * @param {!Object<string, boolean>=} opt_allowlist Optional white list of names
+   * @param {!Object<string, boolean>=} opt_allowlist Optional allowlist of names
    *   that can be substituted.
    * @param {boolean=} opt_noEncode Should not urlEncode macro resolution.
    */
@@ -103,11 +125,10 @@ export class Expander {
    * Structures the regex matching into the desired format
    * @param {string} url url to be substituted
    * @param {RegExp} expression regex containing all keywords
-   * @return {Array<Object<string, string|number>>} array of objects representing
-   *  matching keywords
+   * @return {!Array<!MatchDef>} array of matching keywords.
    */
   findMatches_(url, expression) {
-    const matches = [];
+    const matches = /** @type {!Array<!MatchDef>} */ ([]);
     url.replace(expression, (match, name, startPosition) => {
       const {length} = match;
       const stopPosition = length + startPosition - 1;
@@ -124,8 +145,7 @@ export class Expander {
 
   /**
    * @param {string} url
-   * @param {!Array<Object<string, string|number>>} matches Array of objects
-   *   representing matching keywords.
+   * @param {!Array<!MatchDef>} matches Array of matching keywords.
    * @return {!Promise<string>|string}
    */
   parseUrlRecursively_(url, matches) {
@@ -157,20 +177,20 @@ export class Expander {
           // in optional bindings, or the global variable source.
           if (this.bindings_ && hasOwn(this.bindings_, match.name)) {
             // Macro is from optional bindings.
-            binding = {
+            binding = /** @type {!BindingInfoDef} */ ({
               // This construction helps us save the match name and determine
               // precedence of resolution choices in #expandBinding_ later.
               name: match.name,
               prioritized: this.bindings_[match.name],
               encode,
-            };
+            });
           } else {
             // Macro is from the global source.
-            binding = {
+            binding = /** @type {!BindingInfoDef} */ ({
               ...this.variableSource_.get(match.name),
               name: match.name,
               encode,
-            };
+            });
           }
 
           urlIndex = match.stop + 1;
@@ -278,7 +298,7 @@ export class Expander {
   /**
    * Called when a binding is ready to be resolved. Determines which version of
    * binding to use and if syncronous or asyncronous version should be called.
-   * @param {Object<string, *>} bindingInfo An object containing the name of
+   * @param {!BindingInfoDef} bindingInfo An object containing the name of
    *    macro and value to be resolved.
    * @param {Array=} opt_args Arguments passed to the macro. Arguments come as
    *    an array of arrays that will be eventually passed to a function.apply
@@ -313,11 +333,9 @@ export class Expander {
       const result = this.evaluateBindingSync_(binding, name, opt_args);
       return encode ? encodeURIComponent(result) : result;
     } else {
-      return this.evaluateBindingAsync_(
-        binding,
-        name,
-        opt_args
-      ).then((result) => (encode ? encodeURIComponent(result) : result));
+      return this.evaluateBindingAsync_(binding, name, opt_args).then(
+        (result) => (encode ? encodeURIComponent(result) : result)
+      );
     }
   }
 
@@ -332,12 +350,13 @@ export class Expander {
     let value;
     try {
       if (typeof binding === 'function') {
+        const bindingFunc = binding;
         if (opt_args) {
           value = this.processArgsAsync_(opt_args).then((args) =>
-            binding.apply(null, args)
+            bindingFunc.apply(null, args)
           );
         } else {
-          value = tryResolve(binding);
+          value = tryResolve(bindingFunc);
         }
       } else {
         value = Promise.resolve(binding);
@@ -401,7 +420,7 @@ export class Expander {
 
       let result;
 
-      if (value && value.then) {
+      if (value && typeof value.then == 'function') {
         // If binding is passed in as opt_binding we try to resolve it and it
         // may return a promise. NOTE: We do not collect this discarded value,
         // even if collectVars exists.
diff --git a/src/service/url-impl.js b/src/service/url-impl.js
index 70e23bdda84db..6c3933afc2374 100644
--- a/src/service/url-impl.js
+++ b/src/service/url-impl.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {LruCache} from '../utils/lru-cache';
+import {LruCache} from '../core/data-structures/lru-cache';
 import {
   assertAbsoluteHttpOrHttpsUrl,
   assertHttpsUrl,
@@ -24,47 +24,28 @@ import {
   isProxyOrigin,
   isSecureUrlDeprecated,
   parseUrlWithA,
+  resolveRelativeUrl,
 } from '../url';
-import {
-  installServiceInEmbedScope,
-  registerServiceBuilderForDoc,
-} from '../service';
+import {registerServiceBuilderForDoc} from '../service';
 import {urls} from '../config';
 
 const SERVICE = 'url';
 
 /**
- * @implements {../service.EmbeddableService}
  */
 export class Url {
   /**
    * @param {!./ampdoc-impl.AmpDoc} ampdoc
-   * @param {(!Document|!ShadowRoot)=} opt_rootNode
    */
-  constructor(ampdoc, opt_rootNode) {
-    // TODO(#22733): remove subroooting once ampdoc-fie is launched.
-
-    const root = opt_rootNode || ampdoc.getRootNode();
+  constructor(ampdoc) {
+    const root = ampdoc.getRootNode();
     const doc = root.ownerDocument || root;
 
     /** @private @const {!HTMLAnchorElement} */
     this.anchor_ = /** @type {!HTMLAnchorElement} */ (doc.createElement('a'));
 
-    /** @private @const {!LruCache} */
-    this.cache_ = new LruCache(100);
-  }
-
-  /**
-   * @param {!Window} embedWin
-   * @param {!./ampdoc-impl.AmpDoc} ampdoc
-   * @nocollapse
-   */
-  static installInEmbedWindow(embedWin, ampdoc) {
-    installServiceInEmbedScope(
-      embedWin,
-      SERVICE,
-      new Url(ampdoc, embedWin.document)
-    );
+    /** @private @const {?LruCache} */
+    this.cache_ = IS_ESM ? null : new LruCache(100);
   }
 
   /**
@@ -72,10 +53,15 @@ export class Url {
    *
    * @param {string} url
    * @param {boolean=} opt_nocache
+   *   Cache is always ignored on ESM builds, see https://go.amp.dev/pr/31594
    * @return {!Location}
    */
   parse(url, opt_nocache) {
-    return parseUrlWithA(this.anchor_, url, opt_nocache ? null : this.cache_);
+    return parseUrlWithA(
+      this.anchor_,
+      url,
+      IS_ESM || opt_nocache ? null : this.cache_
+    );
   }
 
   /**
@@ -120,6 +106,16 @@ export class Url {
     return getSourceUrl(this.parse_(url));
   }
 
+  /**
+   * Returns absolute URL resolved based on the relative URL and the base.
+   * @param {string} relativeUrlString
+   * @param {string|!Location} baseUrl
+   * @return {string}
+   */
+  resolveRelativeUrl(relativeUrlString, baseUrl) {
+    return resolveRelativeUrl(relativeUrlString, this.parse_(baseUrl));
+  }
+
   /**
    * Asserts that a given url is HTTPS or protocol relative. It's a user-level
    * assert.
@@ -183,7 +179,7 @@ export class Url {
       return resourceUrl;
     }
 
-    const {host, hash, pathname, search} = this.parse_(resourceUrl);
+    const {hash, host, pathname, search} = this.parse_(resourceUrl);
     const encodedHost = encodeURIComponent(host);
     return `${urls.cdn}/c/${encodedHost}${pathname}${search}${hash}`;
   }
diff --git a/src/service/url-replacements-impl.js b/src/service/url-replacements-impl.js
index 8dd159c94c2f7..de9748b2aed31 100644
--- a/src/service/url-replacements-impl.js
+++ b/src/service/url-replacements-impl.js
@@ -23,28 +23,27 @@ import {
   getTimingDataAsync,
   getTimingDataSync,
 } from './variable-source';
+import {Expander} from './url-expander/expander';
+import {Services} from '../services';
+import {WindowInterface} from '../window-interface';
 import {
   addMissingParamsToUrl,
   addParamsToUrl,
   getSourceUrl,
   isProtocolValid,
-  parseQueryString,
   parseUrlDeprecated,
   removeAmpJsParamsFromUrl,
   removeFragment,
 } from '../url';
 import {dev, devAssert, user, userAssert} from '../log';
+import {getTrackImpressionPromise} from '../impression.js';
+import {hasOwn} from '../core/types/object';
 import {
-  installServiceInEmbedScope,
+  installServiceInEmbedDoc,
   registerServiceBuilderForDoc,
 } from '../service';
-
-import {Expander} from './url-expander/expander';
-import {Services} from '../services';
-import {WindowInterface} from '../window-interface';
-import {getTrackImpressionPromise} from '../impression.js';
-import {hasOwn} from '../utils/object';
 import {internalRuntimeVersion} from '../internal-version';
+import {parseQueryString} from '../core/types/string/url';
 
 /** @private @const {string} */
 const TAG = 'UrlReplacements';
@@ -81,16 +80,6 @@ function screenProperty(screen, property) {
  * Class to provide variables that pertain to top level AMP window.
  */
 export class GlobalVariableSource extends VariableSource {
-  /**
-   * @param {!./ampdoc-impl.AmpDoc} ampdoc
-   */
-  constructor(ampdoc) {
-    super(ampdoc);
-
-    /** @private {?Promise<?ShareTrackingFragmentsDef>} */
-    this.shareTrackingFragments_ = null;
-  }
-
   /**
    * Utility function for setting resolver for timing data that supports
    * sync and async.
@@ -153,28 +142,33 @@ export class GlobalVariableSource extends VariableSource {
     // Returns the referrer URL.
     this.setAsync(
       'DOCUMENT_REFERRER',
-      /** @type {AsyncResolverDef} */ (() => {
-        return Services.viewerForDoc(this.ampdoc).getReferrerUrl();
-      })
+      /** @type {AsyncResolverDef} */ (
+        () => {
+          return Services.viewerForDoc(this.ampdoc).getReferrerUrl();
+        }
+      )
     );
 
     // Like DOCUMENT_REFERRER, but returns null if the referrer is of
     // same domain or the corresponding CDN proxy.
     this.setAsync(
       'EXTERNAL_REFERRER',
-      /** @type {AsyncResolverDef} */ (() => {
-        return Services.viewerForDoc(this.ampdoc)
-          .getReferrerUrl()
-          .then((referrer) => {
-            if (!referrer) {
-              return null;
-            }
-            const referrerHostname = parseUrlDeprecated(getSourceUrl(referrer))
-              .hostname;
-            const currentHostname = WindowInterface.getHostname(win);
-            return referrerHostname === currentHostname ? null : referrer;
-          });
-      })
+      /** @type {AsyncResolverDef} */ (
+        () => {
+          return Services.viewerForDoc(this.ampdoc)
+            .getReferrerUrl()
+            .then((referrer) => {
+              if (!referrer) {
+                return null;
+              }
+              const referrerHostname = parseUrlDeprecated(
+                getSourceUrl(referrer)
+              ).hostname;
+              const currentHostname = WindowInterface.getHostname(win);
+              return referrerHostname === currentHostname ? null : referrer;
+            });
+        }
+      )
     );
 
     // Returns the title of this AMP document.
@@ -277,7 +271,7 @@ export class GlobalVariableSource extends VariableSource {
         }
         return clientIds[scope];
       },
-      (scope, opt_userNotificationId, opt_cookieName) => {
+      (scope, opt_userNotificationId, opt_cookieName, opt_disableBackup) => {
         userAssert(
           scope,
           'The first argument to CLIENT_ID, the fallback' +
@@ -297,11 +291,13 @@ export class GlobalVariableSource extends VariableSource {
         }
         return Services.cidForDoc(this.ampdoc)
           .then((cid) => {
+            opt_disableBackup = opt_disableBackup == 'true' ? true : false;
             return cid.get(
               {
                 /** @type {string} */ scope,
                 createCookieIfNotPresent: true,
-                cookieName: opt_cookieName,
+                cookieName: opt_cookieName || undefined,
+                disableBackup: opt_disableBackup,
               },
               consent
             );
@@ -337,74 +333,60 @@ export class GlobalVariableSource extends VariableSource {
     // Returns assigned variant name for the given experiment.
     this.setAsync(
       'VARIANT',
-      /** @type {AsyncResolverDef} */ ((experiment) => {
-        return this.getVariantsValue_((variants) => {
-          const variant = variants[/** @type {string} */ (experiment)];
-          userAssert(
-            variant !== undefined,
-            'The value passed to VARIANT() is not a valid experiment in <amp-experiment>:' +
-              experiment
-          );
-          // When no variant assigned, use reserved keyword 'none'.
-          return variant === null ? 'none' : /** @type {string} */ (variant);
-        }, 'VARIANT');
-      })
+      /** @type {AsyncResolverDef} */ (
+        (experiment) => {
+          return this.getVariantsValue_((variants) => {
+            const variant = variants[/** @type {string} */ (experiment)];
+            userAssert(
+              variant !== undefined,
+              'The value passed to VARIANT() is not a valid experiment in <amp-experiment>:' +
+                experiment
+            );
+            // When no variant assigned, use reserved keyword 'none'.
+            return variant === null ? 'none' : /** @type {string} */ (variant);
+          }, 'VARIANT');
+        }
+      )
     );
 
     // Returns all assigned experiment variants in a serialized form.
     this.setAsync(
       'VARIANTS',
-      /** @type {AsyncResolverDef} */ (() => {
-        return this.getVariantsValue_((variants) => {
-          const experiments = [];
-          for (const experiment in variants) {
-            const variant = variants[experiment];
-            experiments.push(
-              experiment + VARIANT_DELIMITER + (variant || 'none')
-            );
-          }
-          return experiments.join(EXPERIMENT_DELIMITER);
-        }, 'VARIANTS');
-      })
+      /** @type {AsyncResolverDef} */ (
+        () => {
+          return this.getVariantsValue_((variants) => {
+            const experiments = [];
+            for (const experiment in variants) {
+              const variant = variants[experiment];
+              experiments.push(
+                experiment + VARIANT_DELIMITER + (variant || 'none')
+              );
+            }
+            return experiments.join(EXPERIMENT_DELIMITER);
+          }, 'VARIANTS');
+        }
+      )
     );
 
     // Returns assigned geo value for geoType or all groups.
     this.setAsync(
       'AMP_GEO',
-      /** @type {AsyncResolverDef} */ ((geoType) => {
-        return this.getGeo_((geos) => {
-          if (geoType) {
-            userAssert(
-              geoType === 'ISOCountry',
-              'The value passed to AMP_GEO() is not valid name:' + geoType
+      /** @type {AsyncResolverDef} */ (
+        (geoType) => {
+          return this.getGeo_((geos) => {
+            if (geoType) {
+              userAssert(
+                geoType === 'ISOCountry',
+                'The value passed to AMP_GEO() is not valid name:' + geoType
+              );
+              return /** @type {string} */ (geos[geoType] || 'unknown');
+            }
+            return /** @type {string} */ (
+              geos.matchedISOCountryGroups.join(GEO_DELIM)
             );
-            return /** @type {string} */ (geos[geoType] || 'unknown');
-          }
-          return /** @type {string} */ (geos.matchedISOCountryGroups.join(
-            GEO_DELIM
-          ));
-        }, 'AMP_GEO');
-      })
-    );
-
-    // Returns incoming share tracking fragment.
-    this.setAsync(
-      'SHARE_TRACKING_INCOMING',
-      /** @type {AsyncResolverDef} */ (() => {
-        return this.getShareTrackingValue_((fragments) => {
-          return fragments.incomingFragment;
-        }, 'SHARE_TRACKING_INCOMING');
-      })
-    );
-
-    // Returns outgoing share tracking fragment.
-    this.setAsync(
-      'SHARE_TRACKING_OUTGOING',
-      /** @type {AsyncResolverDef} */ (() => {
-        return this.getShareTrackingValue_((fragments) => {
-          return fragments.outgoingFragment;
-        }, 'SHARE_TRACKING_OUTGOING');
-      })
+          }, 'AMP_GEO');
+        }
+      )
     );
 
     // Returns the number of milliseconds since 1 Jan 1970 00:00:00 UTC.
@@ -456,7 +438,8 @@ export class GlobalVariableSource extends VariableSource {
       const nav = win.navigator;
       return (
         nav.language ||
-        nav.userLanguage ||
+        // Only used on IE.
+        nav['userLanguage'] ||
         nav.browserLanguage ||
         ''
       ).toLowerCase();
@@ -520,25 +503,29 @@ export class GlobalVariableSource extends VariableSource {
     // Access: Reader ID.
     this.setAsync(
       'ACCESS_READER_ID',
-      /** @type {AsyncResolverDef} */ (() => {
-        return this.getAccessValue_((accessService) => {
-          return accessService.getAccessReaderId();
-        }, 'ACCESS_READER_ID');
-      })
+      /** @type {AsyncResolverDef} */ (
+        () => {
+          return this.getAccessValue_((accessService) => {
+            return accessService.getAccessReaderId();
+          }, 'ACCESS_READER_ID');
+        }
+      )
     );
 
     // Access: data from the authorization response.
     this.setAsync(
       'AUTHDATA',
-      /** @type {AsyncResolverDef} */ ((field) => {
-        userAssert(
-          field,
-          'The first argument to AUTHDATA, the field, is required'
-        );
-        return this.getAccessValue_((accessService) => {
-          return accessService.getAuthdataField(field);
-        }, 'AUTHDATA');
-      })
+      /** @type {AsyncResolverDef} */ (
+        (field) => {
+          userAssert(
+            field,
+            'The first argument to AUTHDATA, the field, is required'
+          );
+          return this.getAccessValue_((accessService) => {
+            return accessService.getAuthdataField(field);
+          }, 'AUTHDATA');
+        }
+      )
     );
 
     // Returns an identifier for the viewer.
@@ -618,8 +605,9 @@ export class GlobalVariableSource extends VariableSource {
     this.setAsync('AMP_STATE', (key) => {
       // This is safe since AMP_STATE is not an A4A allowlisted variable.
       const root = this.ampdoc.getRootNode();
-      const element = /** @type {!Element|!ShadowRoot} */ (root.documentElement ||
-        root);
+      const element = /** @type {!Element|!ShadowRoot} */ (
+        root.documentElement || root
+      );
       return Services.bindForDocOrNull(element).then((bind) => {
         if (!bind) {
           return '';
@@ -637,11 +625,14 @@ export class GlobalVariableSource extends VariableSource {
    * @private
    */
   addReplaceParamsIfMissing_(orig) {
-    const {replaceParams} = /** @type {!Object} */ (this.getDocInfo_());
+    const {replaceParams} = this.getDocInfo_();
     if (!replaceParams) {
       return orig;
     }
-    return addMissingParamsToUrl(removeAmpJsParamsFromUrl(orig), replaceParams);
+    return addMissingParamsToUrl(
+      removeAmpJsParamsFromUrl(orig),
+      /** @type {!JsonObject} */ (replaceParams)
+    );
   }
 
   /**
@@ -657,7 +648,7 @@ export class GlobalVariableSource extends VariableSource {
    * the resulting value is `null`.
    * @param {function(!../../extensions/amp-access/0.1/access-vars.AccessVars):(T|!Promise<T>)} getter
    * @param {string} expr
-   * @return {T|null}
+   * @return {?T}
    * @template T
    * @private
    */
@@ -667,8 +658,15 @@ export class GlobalVariableSource extends VariableSource {
       Services.accessServiceForDocOrNull(element),
       Services.subscriptionsServiceForDocOrNull(element),
     ]).then((services) => {
-      const service = /** @type {?../../extensions/amp-access/0.1/access-vars.AccessVars} */ (services[0] ||
-        services[1]);
+      const accessService =
+        /** @type {?../../extensions/amp-access/0.1/access-vars.AccessVars} */ (
+          services[0]
+        );
+      const subscriptionService =
+        /** @type {?../../extensions/amp-access/0.1/access-vars.AccessVars} */ (
+          services[1]
+        );
+      const service = accessService || subscriptionService;
       if (!service) {
         // Access/subscriptions service is not installed.
         user().error(
@@ -678,6 +676,13 @@ export class GlobalVariableSource extends VariableSource {
         );
         return null;
       }
+
+      // If both an access and subscription service are present, prefer
+      // subscription then fall back to access because access can be namespaced.
+      if (accessService && subscriptionService) {
+        return getter(subscriptionService) || getter(accessService);
+      }
+
       return getter(service);
     });
   }
@@ -723,7 +728,7 @@ export class GlobalVariableSource extends VariableSource {
         'param is required'
     );
     userAssert(typeof param == 'string', 'param should be a string');
-    const hash = this.ampdoc.win.location.originalHash;
+    const hash = this.ampdoc.win.location['originalHash'];
     const params = parseQueryString(hash);
     return params[param] === undefined ? defaultValue : params[param];
   }
@@ -751,7 +756,7 @@ export class GlobalVariableSource extends VariableSource {
 
   /**
    * Resolves the value via geo service.
-   * @param {function(Object<string, string>)} getter
+   * @param {function(!../../extensions/amp-geo/0.1/amp-geo.GeoDef)} getter
    * @param {string} expr
    * @return {!Promise<Object<string,(string|Array<string>)>>}
    * @template T
@@ -764,35 +769,11 @@ export class GlobalVariableSource extends VariableSource {
       return getter(geo);
     });
   }
-
-  /**
-   * Resolves the value via amp-share-tracking's service.
-   * @param {function(!ShareTrackingFragmentsDef):T} getter
-   * @param {string} expr
-   * @return {!Promise<T>}
-   * @template T
-   * @private
-   */
-  getShareTrackingValue_(getter, expr) {
-    if (!this.shareTrackingFragments_) {
-      this.shareTrackingFragments_ = Services.shareTrackingForOrNull(
-        this.ampdoc.win
-      );
-    }
-    return this.shareTrackingFragments_.then((fragments) => {
-      userAssert(
-        fragments,
-        'To use variable %s, amp-share-tracking should be configured',
-        expr
-      );
-      return getter(/** @type {!ShareTrackingFragmentsDef} */ (fragments));
-    });
-  }
 }
 
 /**
  * This class replaces substitution variables with their values.
- * Document new values in ../spec/amp-var-substitutions.md
+ * Document new values in ../docs/spec/amp-var-substitutions.md
  * @package For export
  */
 export class UrlReplacements {
@@ -814,19 +795,21 @@ export class UrlReplacements {
    * variables or override existing ones.  Any async bindings are ignored.
    * @param {string} source
    * @param {!Object<string, (ResolverReturnDef|!SyncResolverDef)>=} opt_bindings
-   * @param {!Object<string, boolean>=} opt_allowlist Optional white list of
+   * @param {!Object<string, boolean>=} opt_allowlist Optional allowlist of
    *     names that can be substituted.
    * @return {string}
    */
   expandStringSync(source, opt_bindings, opt_allowlist) {
-    return /** @type {string} */ (new Expander(
-      this.variableSource_,
-      opt_bindings,
-      /* opt_collectVars */ undefined,
-      /* opt_sync */ true,
-      opt_allowlist,
-      /* opt_noEncode */ true
-    )./*OK*/ expand(source));
+    return /** @type {string} */ (
+      new Expander(
+        this.variableSource_,
+        opt_bindings,
+        /* opt_collectVars */ undefined,
+        /* opt_sync */ true,
+        opt_allowlist,
+        /* opt_noEncode */ true
+      )./*OK*/ expand(source)
+    );
   }
 
   /**
@@ -839,14 +822,16 @@ export class UrlReplacements {
    * @return {!Promise<string>}
    */
   expandStringAsync(source, opt_bindings, opt_allowlist) {
-    return /** @type {!Promise<string>} */ (new Expander(
-      this.variableSource_,
-      opt_bindings,
-      /* opt_collectVars */ undefined,
-      /* opt_sync */ undefined,
-      opt_allowlist,
-      /* opt_noEncode */ true
-    )./*OK*/ expand(source));
+    return /** @type {!Promise<string>} */ (
+      new Expander(
+        this.variableSource_,
+        opt_bindings,
+        /* opt_collectVars */ undefined,
+        /* opt_sync */ undefined,
+        opt_allowlist,
+        /* opt_noEncode */ true
+      )./*OK*/ expand(source)
+    );
   }
 
   /**
@@ -855,20 +840,22 @@ export class UrlReplacements {
    * variables or override existing ones.  Any async bindings are ignored.
    * @param {string} url
    * @param {!Object<string, (ResolverReturnDef|!SyncResolverDef)>=} opt_bindings
-   * @param {!Object<string, boolean>=} opt_allowlist Optional white list of
+   * @param {!Object<string, boolean>=} opt_allowlist Optional allowlist of
    *     names that can be substituted.
    * @return {string}
    */
   expandUrlSync(url, opt_bindings, opt_allowlist) {
     return this.ensureProtocolMatches_(
       url,
-      /** @type {string} */ (new Expander(
-        this.variableSource_,
-        opt_bindings,
-        /* opt_collectVars */ undefined,
-        /* opt_sync */ true,
-        opt_allowlist
-      )./*OK*/ expand(url))
+      /** @type {string} */ (
+        new Expander(
+          this.variableSource_,
+          opt_bindings,
+          /* opt_collectVars */ undefined,
+          /* opt_sync */ true,
+          opt_allowlist
+        )./*OK*/ expand(url)
+      )
     );
   }
 
@@ -878,22 +865,24 @@ export class UrlReplacements {
    * or override existing ones.
    * @param {string} url
    * @param {!Object<string, *>=} opt_bindings
-   * @param {!Object<string, boolean>=} opt_allowlist Optional white list of names
+   * @param {!Object<string, boolean>=} opt_allowlist Optional allowlist of names
    *     that can be substituted.
    * @param {boolean=} opt_noEncode should not encode URL
    * @return {!Promise<string>}
    */
   expandUrlAsync(url, opt_bindings, opt_allowlist, opt_noEncode) {
-    return /** @type {!Promise<string>} */ (new Expander(
-      this.variableSource_,
-      opt_bindings,
-      /* opt_collectVars */ undefined,
-      /* opt_sync */ undefined,
-      opt_allowlist,
-      opt_noEncode
-    )
-      ./*OK*/ expand(url)
-      .then((replacement) => this.ensureProtocolMatches_(url, replacement)));
+    return /** @type {!Promise<string>} */ (
+      new Expander(
+        this.variableSource_,
+        opt_bindings,
+        /* opt_collectVars */ undefined,
+        /* opt_sync */ undefined,
+        opt_allowlist,
+        opt_noEncode
+      )
+        ./*OK*/ expand(url)
+        .then((replacement) => this.ensureProtocolMatches_(url, replacement))
+    );
   }
 
   /**
@@ -902,10 +891,9 @@ export class UrlReplacements {
    * @return {!Promise<string>}
    */
   expandInputValueAsync(element) {
-    return /** @type {!Promise<string>} */ (this.expandInputValue_(
-      element,
-      /*opt_sync*/ false
-    ));
+    return /** @type {!Promise<string>} */ (
+      this.expandInputValue_(element, /*opt_sync*/ false)
+    );
   }
 
   /**
@@ -914,10 +902,9 @@ export class UrlReplacements {
    * @return {string} Replaced string for testing
    */
   expandInputValueSync(element) {
-    return /** @type {string} */ (this.expandInputValue_(
-      element,
-      /*opt_sync*/ true
-    ));
+    return /** @type {string} */ (
+      this.expandInputValue_(element, /*opt_sync*/ true)
+    );
   }
 
   /**
@@ -1024,6 +1011,7 @@ export class UrlReplacements {
    */
   maybeExpandLink(element, defaultUrlParams) {
     devAssert(element.tagName == 'A');
+    const aElement = /** @type {!HTMLAnchorElement} */ (element);
     const supportedReplacements = {
       'CLIENT_ID': true,
       'QUERY_PARAM': true,
@@ -1032,9 +1020,9 @@ export class UrlReplacements {
       'NAV_TIMING': true,
     };
     let additionalUrlParameters =
-      element.getAttribute('data-amp-addparams') || '';
+      aElement.getAttribute('data-amp-addparams') || '';
     const allowlist = this.getAllowlistForElement_(
-      element,
+      aElement,
       supportedReplacements
     );
 
@@ -1045,11 +1033,11 @@ export class UrlReplacements {
     // We set this to the original value before doing any work and use it
     // on subsequent replacements, so that each run gets a fresh value.
     let href = dev().assertString(
-      element[ORIGINAL_HREF_PROPERTY] || element.getAttribute('href')
+      aElement[ORIGINAL_HREF_PROPERTY] || aElement.getAttribute('href')
     );
     const url = parseUrlDeprecated(href);
-    if (element[ORIGINAL_HREF_PROPERTY] == null) {
-      element[ORIGINAL_HREF_PROPERTY] = href;
+    if (aElement[ORIGINAL_HREF_PROPERTY] == null) {
+      aElement[ORIGINAL_HREF_PROPERTY] = href;
     }
 
     const isAllowedOrigin = this.isAllowedOrigin_(url);
@@ -1070,7 +1058,7 @@ export class UrlReplacements {
           href
         );
       }
-      return (element.href = href);
+      return (aElement.href = href);
     }
 
     // Note that defaultUrlParams is treated differently than
@@ -1095,7 +1083,7 @@ export class UrlReplacements {
 
     href = this.expandSyncIfAllowedList_(href, allowlist);
 
-    return (element.href = href);
+    return (aElement.href = href);
   }
 
   /**
@@ -1155,10 +1143,14 @@ export class UrlReplacements {
    * @return {string}
    */
   ensureProtocolMatches_(url, replacement) {
-    const newProtocol = parseUrlDeprecated(replacement, /* opt_nocache */ true)
-      .protocol;
-    const oldProtocol = parseUrlDeprecated(url, /* opt_nocache */ true)
-      .protocol;
+    const newProtocol = parseUrlDeprecated(
+      replacement,
+      /* opt_nocache */ true
+    ).protocol;
+    const oldProtocol = parseUrlDeprecated(
+      url,
+      /* opt_nocache */ true
+    ).protocol;
     if (newProtocol != oldProtocol) {
       user().error(TAG, 'Illegal replacement of the protocol: ', url);
       return url;
@@ -1201,12 +1193,11 @@ export function installUrlReplacementsServiceForDoc(ampdoc) {
 
 /**
  * @param {!./ampdoc-impl.AmpDoc} ampdoc
- * @param {!Window} embedWin
  * @param {!VariableSource} varSource
  */
-export function installUrlReplacementsForEmbed(ampdoc, embedWin, varSource) {
-  installServiceInEmbedScope(
-    embedWin,
+export function installUrlReplacementsForEmbed(ampdoc, varSource) {
+  installServiceInEmbedDoc(
+    ampdoc,
     'url-replace',
     new UrlReplacements(ampdoc, varSource)
   );
diff --git a/src/service/variable-source.js b/src/service/variable-source.js
index 8ae01a1294396..50fa100115fb5 100644
--- a/src/service/variable-source.js
+++ b/src/service/variable-source.js
@@ -16,9 +16,9 @@
 import {Services} from '../services';
 import {devAssert} from '../log';
 import {isAmp4Email} from '../format';
-import {isFiniteNumber} from '../types';
+import {isFiniteNumber} from '../core/types';
 import {loadPromise} from '../event-helper';
-import {whenDocumentComplete} from '../document-ready';
+import {whenDocumentComplete} from '../core/document-ready';
 
 /** @typedef {string|number|boolean|undefined|null} */
 export let ResolverReturnDef;
@@ -271,7 +271,7 @@ export class VariableSource {
    * Returns a Regular expression that can be used to detect all the variables
    * in a template.
    * @param {!Object<string, *>=} opt_bindings
-   * @param {!Object<string, boolean>=} opt_allowlist Optional white list of names
+   * @param {!Object<string, boolean>=} opt_allowlist Optional allowlist of names
    *   that can be substituted.
    * @return {!RegExp}
    */
@@ -285,7 +285,7 @@ export class VariableSource {
 
   /**
    * @param {!Array<string>} keys
-   * @param {!Object<string, boolean>=} opt_allowlist Optional white list of names
+   * @param {!Object<string, boolean>=} opt_allowlist Optional allowlist of names
    *   that can be substituted.
    * @return {!RegExp}
    * @private
diff --git a/src/service/video-manager-impl.js b/src/service/video-manager-impl.js
index 6cc4a425d3c25..a4f5105939831 100644
--- a/src/service/video-manager-impl.js
+++ b/src/service/video-manager-impl.js
@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
-import {ActionTrust} from '../action-constants';
+import {ActionTrust} from '../core/constants/action-constants';
 import {
   EMPTY_METADATA,
   parseFavicon,
   parseOgImage,
   parseSchemaImage,
   setMediaSession,
+  validateMediaMetadata,
 } from '../mediasession-helper';
 import {
   MIN_VISIBILITY_RATIO_FOR_AUTOPLAY,
@@ -35,25 +36,19 @@ import {
 } from '../video-interface';
 import {Services} from '../services';
 import {VideoSessionManager} from './video-session-manager';
-import {VideoUtils, getInternalVideoElementFor} from '../utils/video';
-import {clamp} from '../utils/math';
-import {
-  createCustomEvent,
-  getData,
-  listen,
-  listenOnce,
-  listenOncePromise,
-} from '../event-helper';
+import {clamp} from '../core/math';
+import {createCustomEvent, getData, listen, listenOnce} from '../event-helper';
+import {createViewportObserver} from '../viewport-observer';
 import {dev, devAssert, user, userAssert} from '../log';
-import {dict, map} from '../utils/object';
-import {getMode} from '../mode';
+import {dict, map} from '../core/types/object';
+import {dispatchCustomEvent, removeElement} from '../dom';
+import {getInternalVideoElementFor, isAutoplaySupported} from '../utils/video';
 import {installAutoplayStylesForDoc} from './video/install-autoplay-styles';
-import {isFiniteNumber} from '../types';
-import {once} from '../utils/function';
+import {isFiniteNumber} from '../core/types';
+import {measureIntersection} from '../utils/intersection';
+import {once} from '../core/types/function';
 import {registerServiceBuilderForDoc} from '../service';
-import {removeElement} from '../dom';
 import {renderIcon, renderInteractionOverlay} from './video/autoplay';
-import {startsWith} from '../string';
 import {toggle} from '../style';
 
 /** @private @const {string} */
@@ -87,12 +82,12 @@ export class VideoManager {
       installAutoplayStylesForDoc(this.ampdoc)
     );
 
-    /** @private {!../service/viewport/viewport-interface.ViewportInterface} */
-    this.viewport_ = Services.viewportForDoc(this.ampdoc);
-
     /** @private {?Array<!VideoEntry>} */
     this.entries_ = null;
 
+    /** @private {IntersectionObserver} */
+    this.viewportObserver_ = null;
+
     /**
      * Keeps last found entry as a small optimization for multiple state calls
      * during one task.
@@ -100,9 +95,6 @@ export class VideoManager {
      */
     this.lastFoundEntry_ = null;
 
-    /** @private {boolean} */
-    this.scrollListenerInstalled_ = false;
-
     /** @private @const */
     this.timer_ = Services.timerFor(ampdoc.win);
 
@@ -130,6 +122,8 @@ export class VideoManager {
   /** @override */
   dispose() {
     this.getAutoFullscreenManager_().dispose();
+    this.viewportObserver_.disconnect();
+    this.viewportObserver_ = null;
 
     if (!this.entries_) {
       return;
@@ -182,9 +176,11 @@ export class VideoManager {
     }
   }
 
+  // TODO(#30723): create unregister() for cleanup.
   /** @param {!../video-interface.VideoInterface} video */
   register(video) {
     devAssert(video);
+    const videoBE = /** @type {!AMP.BaseElement} */ (video);
 
     this.registerCommonActions_(video);
 
@@ -192,20 +188,44 @@ export class VideoManager {
       return;
     }
 
+    if (this.getEntryOrNull_(video)) {
+      // already registered
+      return;
+    }
+
+    if (!this.viewportObserver_) {
+      const viewportCallback = (
+        /** @type {!Array<!IntersectionObserverEntry>} */ records
+      ) =>
+        records.forEach(({isIntersecting, target}) => {
+          this.getEntry_(target).updateVisibility(
+            /* isVisible */ isIntersecting
+          );
+        });
+      this.viewportObserver_ = createViewportObserver(
+        viewportCallback,
+        this.ampdoc.win,
+        {threshold: MIN_VISIBILITY_RATIO_FOR_AUTOPLAY}
+      );
+    }
+    this.viewportObserver_.observe(videoBE.element);
+    listen(videoBE.element, VideoEvents.RELOAD, () => entry.videoLoaded());
+
     this.entries_ = this.entries_ || [];
     const entry = new VideoEntry(this, video);
-    this.maybeInstallVisibilityObserver_(entry);
     this.entries_.push(entry);
 
     const {element} = entry.video;
-    element.dispatchCustomEvent(VideoEvents.REGISTERED);
+    dispatchCustomEvent(element, VideoEvents.REGISTERED);
 
     setIsMediaComponent(element);
 
     // Unlike events, signals are permanent. We can wait for `REGISTERED` at any
     // moment in the element's lifecycle and the promise will resolve
     // appropriately each time.
-    const signals = /** @type {!../base-element.BaseElement} */ (video).signals();
+    const signals = /** @type {!../base-element.BaseElement} */ (
+      video
+    ).signals();
 
     signals.signal(VideoEvents.REGISTERED);
 
@@ -244,7 +264,8 @@ export class VideoManager {
      * @param {function()} fn
      */
     function registerAction(action, fn) {
-      video.registerAction(
+      const videoBE = /** @type {!AMP.BaseElement} */ (video);
+      videoBE.registerAction(
         action,
         () => {
           userInteractedWith(video);
@@ -255,57 +276,18 @@ export class VideoManager {
     }
   }
 
-  /**
-   * Install the necessary listeners to be notified when a video becomes visible
-   * in the viewport.
-   *
-   * Visibility of a video is defined by being in the viewport AND having
-   * {@link MIN_VISIBILITY_RATIO_FOR_AUTOPLAY} of the video element visible.
-   *
-   * @param {VideoEntry} entry
-   * @private
-   */
-  maybeInstallVisibilityObserver_(entry) {
-    const {element} = entry.video;
-
-    listen(element, VideoEvents.VISIBILITY, (details) => {
-      const data = getData(details);
-      if (data && data['visible'] == true) {
-        entry.updateVisibility(/* opt_forceVisible */ true);
-      } else {
-        entry.updateVisibility();
-      }
-    });
-
-    listen(element, VideoEvents.RELOAD, () => {
-      entry.videoLoaded();
-    });
-
-    // TODO(aghassemi, #6425): Use IntersectionObserver
-    if (!this.scrollListenerInstalled_) {
-      const scrollListener = () => {
-        for (let i = 0; i < this.entries_.length; i++) {
-          this.entries_[i].updateVisibility();
-        }
-      };
-      this.viewport_.onScroll(scrollListener);
-      this.viewport_.onChanged(scrollListener);
-      this.scrollListenerInstalled_ = true;
-    }
-  }
-
   /**
    * Returns the entry in the video manager corresponding to the video or
-   * element provided
+   * element provided, or null if unavailable.
    * @param {!../video-interface.VideoOrBaseElementDef|!Element} videoOrElement
-   * @return {VideoEntry} entry
+   * @return {?VideoEntry} entry
    */
-  getEntry_(videoOrElement) {
+  getEntryOrNull_(videoOrElement) {
     if (isEntryFor(this.lastFoundEntry_, videoOrElement)) {
       return this.lastFoundEntry_;
     }
 
-    for (let i = 0; i < this.entries_.length; i++) {
+    for (let i = 0; this.entries_ && i < this.entries_.length; i++) {
       const entry = this.entries_[i];
       if (isEntryFor(entry, videoOrElement)) {
         this.lastFoundEntry_ = entry;
@@ -313,8 +295,18 @@ export class VideoManager {
       }
     }
 
+    return null;
+  }
+
+  /**
+   * Returns the entry in the video manager corresponding to the video or
+   * element provided
+   * @param {!../video-interface.VideoOrBaseElementDef|!Element} videoOrElement
+   * @return {VideoEntry} entry
+   */
+  getEntry_(videoOrElement) {
     return devAssert(
-      null,
+      this.getEntryOrNull_(videoOrElement),
       '%s not registered to VideoManager',
       videoOrElement.element || videoOrElement
     );
@@ -347,10 +339,9 @@ export class VideoManager {
       `Could not find an element with id="${id}" for VIDEO_STATE`
     );
     const entry = this.getEntry_(videoElement);
-    return (entry
-      ? entry.getAnalyticsDetails()
-      : Promise.resolve()
-    ).then((details) => (details ? details[property] : ''));
+    return (entry ? entry.getAnalyticsDetails() : Promise.resolve()).then(
+      (details) => (details ? details[property] : '')
+    );
   }
 
   // TODO(go.amp.dev/issue/27010): For getters below, let's expose VideoEntry
@@ -393,6 +384,21 @@ export class VideoManager {
   isRollingAd(videoOrElement) {
     return this.getEntry_(videoOrElement).isRollingAd();
   }
+
+  /**
+   * @param {!VideoEntry} entryBeingPlayed
+   */
+  pauseOtherVideos(entryBeingPlayed) {
+    this.entries_.forEach((entry) => {
+      if (
+        entry.isPlaybackManaged() &&
+        entry !== entryBeingPlayed &&
+        entry.getPlayingState() == PlayingStates.PLAYING_MANUAL
+      ) {
+        entry.video.pause();
+      }
+    });
+  }
 }
 
 /**
@@ -423,7 +429,7 @@ class VideoEntry {
     this.video = video;
 
     /** @private {boolean} */
-    this.allowAutoplay_ = true;
+    this.managePlayback_ = true;
 
     /** @private {boolean} */
     this.loaded_ = false;
@@ -451,13 +457,6 @@ class VideoEntry {
       analyticsEvent(this, VideoAnalyticsEvents.SESSION_VISIBLE)
     );
 
-    // eslint-disable-next-line jsdoc/require-returns
-    /** @private @const {function(): !Promise<boolean>} */
-    this.supportsAutoplay_ = () => {
-      const {win} = this.ampdoc_;
-      return VideoUtils.isAutoplaySupported(win, getMode(win).lite);
-    };
-
     /** @private @const {function(): !AnalyticsPercentageTracker} */
     this.getAnalyticsPercentageTracker_ = once(
       () => new AnalyticsPercentageTracker(this.ampdoc_.win, this)
@@ -477,6 +476,9 @@ class VideoEntry {
     /** @private {boolean} */
     this.muted_ = false;
 
+    /** @private {boolean} */
+    this.hasSeenPlayEvent_ = false;
+
     this.hasAutoplay = video.element.hasAttribute(VideoAttributes.AUTOPLAY);
 
     if (this.hasAutoplay) {
@@ -498,13 +500,18 @@ class VideoEntry {
       this.video.pause();
     };
 
-    listenOncePromise(video.element, VideoEvents.LOAD).then(() =>
-      this.videoLoaded()
-    );
+    listen(video.element, VideoEvents.LOAD, () => this.videoLoaded());
     listen(video.element, VideoEvents.PAUSE, () => this.videoPaused_());
+    listen(video.element, VideoEvents.PLAY, () => {
+      this.hasSeenPlayEvent_ = true;
+      analyticsEvent(this, VideoAnalyticsEvents.PLAY);
+    });
     listen(video.element, VideoEvents.PLAYING, () => this.videoPlayed_());
     listen(video.element, VideoEvents.MUTED, () => (this.muted_ = true));
-    listen(video.element, VideoEvents.UNMUTED, () => (this.muted_ = false));
+    listen(video.element, VideoEvents.UNMUTED, () => {
+      this.muted_ = false;
+      this.manager_.pauseOtherVideos(this);
+    });
 
     listen(video.element, VideoEvents.CUSTOM_TICK, (e) => {
       const data = getData(e);
@@ -555,7 +562,7 @@ class VideoEntry {
       actions.trigger(element, firstPlay, event, trust);
     });
 
-    this.listenForAutoplayDelegation_();
+    this.listenForPlaybackDelegation_();
   }
 
   /** @public */
@@ -577,11 +584,11 @@ class VideoEntry {
     analyticsEvent(this, VideoAnalyticsEvents.CUSTOM, prefixedVars);
   }
 
-  /** Listens for signals to delegate autoplay to a different module. */
-  listenForAutoplayDelegation_() {
+  /** Listens for signals to delegate playback to a different module. */
+  listenForPlaybackDelegation_() {
     const signals = this.video.signals();
-    signals.whenSignal(VideoServiceSignals.AUTOPLAY_DELEGATED).then(() => {
-      this.allowAutoplay_ = false;
+    signals.whenSignal(VideoServiceSignals.PLAYBACK_DELEGATED).then(() => {
+      this.managePlayback_ = false;
 
       if (this.isPlaying_) {
         this.video.pause();
@@ -594,13 +601,17 @@ class VideoEntry {
     return this.muted_;
   }
 
+  /** @return {boolean} */
+  isPlaybackManaged() {
+    return this.managePlayback_;
+  }
+
   /** @private */
   onRegister_() {
     if (this.requiresAutoFullscreen_()) {
       this.manager_.registerForAutoFullscreen(this);
     }
 
-    this.updateVisibility();
     if (this.hasAutoplay) {
       this.autoplayVideoBuilt_();
     }
@@ -635,6 +646,7 @@ class VideoEntry {
 
     if (this.getPlayingState() == PlayingStates.PLAYING_MANUAL) {
       this.firstPlayEventOrNoop_();
+      this.manager_.pauseOtherVideos(this);
     }
 
     const {video} = this;
@@ -644,8 +656,8 @@ class VideoEntry {
       !video.preimplementsMediaSessionAPI() &&
       !element.classList.contains('i-amphtml-disable-mediasession')
     ) {
+      validateMediaMetadata(element, this.metadata_);
       setMediaSession(
-        element,
         this.ampdoc_.win,
         this.metadata_,
         this.boundMediasessionPlay_,
@@ -657,7 +669,14 @@ class VideoEntry {
     if (this.isVisible_) {
       this.visibilitySessionManager_.beginSession();
     }
-    analyticsEvent(this, VideoAnalyticsEvents.PLAY);
+
+    // The PLAY event was omitted from the original VideoInterface. Thus
+    // not every implementation emits it. It should always happen before
+    // PLAYING. Hence we treat the PLAYING as an indication to emit the
+    // Analytics PLAY event if we haven't seen PLAY.
+    if (!this.hasSeenPlayEvent_) {
+      analyticsEvent(this, VideoAnalyticsEvents.PLAY);
+    }
   }
 
   /**
@@ -689,7 +708,6 @@ class VideoEntry {
 
     this.getAnalyticsPercentageTracker_().start();
 
-    this.updateVisibility();
     if (this.isVisible_) {
       // Handles the case when the video becomes visible before loading
       this.loadedVideoVisibilityChanged_();
@@ -758,10 +776,10 @@ class VideoEntry {
     if (!this.ampdoc_.isVisible()) {
       return;
     }
-    this.supportsAutoplay_().then((supportsAutoplay) => {
+    isAutoplaySupported(this.ampdoc_.win).then((isAutoplaySupported) => {
       const canAutoplay = this.hasAutoplay && !this.userInteracted();
 
-      if (canAutoplay && supportsAutoplay) {
+      if (canAutoplay && isAutoplaySupported) {
         this.autoplayLoadedVideoVisibilityChanged_();
       } else {
         this.nonAutoplayLoadedVideoVisibilityChanged_();
@@ -783,8 +801,8 @@ class VideoEntry {
       this.video.hideControls();
     }
 
-    this.supportsAutoplay_().then((supportsAutoplay) => {
-      if (!supportsAutoplay && this.video.isInteractive()) {
+    isAutoplaySupported(this.ampdoc_.win).then((isAutoplaySupported) => {
+      if (!isAutoplaySupported && this.video.isInteractive()) {
         // Autoplay is not supported, show the controls so user can manually
         // initiate playback.
         this.video.showControls();
@@ -846,7 +864,7 @@ class VideoEntry {
           unlistener();
         });
         const animation = element.querySelector('.amp-video-eq');
-        const mask = element.querySelector('i-amphtml-video-mask');
+        const mask = element.querySelector('.i-amphtml-video-mask');
         if (animation) {
           removeElement(animation);
         }
@@ -859,7 +877,7 @@ class VideoEntry {
       return;
     }
 
-    const mask = renderInteractionOverlay(element);
+    const mask = renderInteractionOverlay(element, this.metadata_);
 
     /** @param {boolean} display */
     const setMaskDisplay = (display) => {
@@ -889,7 +907,7 @@ class VideoEntry {
    * @private
    */
   autoplayLoadedVideoVisibilityChanged_() {
-    if (!this.allowAutoplay_) {
+    if (!this.managePlayback_) {
       return;
     }
     if (this.isVisible_) {
@@ -918,25 +936,14 @@ class VideoEntry {
   }
 
   /**
-   * Called by all possible events that might change the visibility of the video
-   * such as scrolling or {@link ../video-interface.VideoEvents#VISIBILITY}.
-   * @param {?boolean=} opt_forceVisible
+   * Called by an IntersectionObserver.
+   * @param {boolean} isVisible
    * @package
    */
-  updateVisibility(opt_forceVisible) {
+  updateVisibility(isVisible) {
     const wasVisible = this.isVisible_;
-
-    if (opt_forceVisible) {
-      this.isVisible_ = true;
-    } else {
-      const {element} = this.video;
-      const ratio = element.getIntersectionChangeEntry().intersectionRatio;
-      this.isVisible_ =
-        (!isFiniteNumber(ratio) ? 0 : ratio) >=
-        MIN_VISIBILITY_RATIO_FOR_AUTOPLAY;
-    }
-
-    if (this.isVisible_ != wasVisible) {
+    this.isVisible_ = isVisible;
+    if (isVisible != wasVisible) {
       this.videoVisibilityChanged_();
     }
   }
@@ -983,9 +990,16 @@ class VideoEntry {
    */
   getAnalyticsDetails() {
     const {video} = this;
-    return this.supportsAutoplay_().then((supportsAutoplay) => {
-      const {width, height} = video.element.getLayoutBox();
-      const autoplay = this.hasAutoplay && supportsAutoplay;
+    return Promise.all([
+      isAutoplaySupported(this.ampdoc_.win),
+      measureIntersection(video.element),
+    ]).then((responses) => {
+      const isAutoplaySupported = /** @type {boolean} */ (responses[0]);
+      const intersection = /** @type {!IntersectionObserverEntry} */ (
+        responses[1]
+      );
+      const {height, width} = intersection.boundingClientRect;
+      const autoplay = this.hasAutoplay && isAutoplaySupported;
       const playedRanges = video.getPlayedRanges();
       const playedTotal = playedRanges.reduce(
         (acc, range) => acc + range[1] - range[0],
@@ -1062,8 +1076,8 @@ export class AutoFullscreenManager {
       this.getPlayingState_(video) == PlayingStates.PLAYING_MANUAL;
 
     /**
-     * @param {!../video-interface.VideoOrBaseElementDef} a
-     * @param {!../video-interface.VideoOrBaseElementDef} b
+     * @param {!IntersectionObserverEntry} a
+     * @param {!IntersectionObserverEntry} b
      * @return {number}
      */
     this.boundCompareEntries_ = (a, b) => this.compareEntries_(a, b);
@@ -1218,33 +1232,34 @@ export class AutoFullscreenManager {
    * Scrolls to a video if it's not in view.
    * @param {!../video-interface.VideoOrBaseElementDef} video
    * @param {?string=} optPos
-   * @return {*} TODO(#23582): Specify return type
+   * @return {!Promise}
    * @private
    */
   scrollIntoIfNotVisible_(video, optPos = null) {
     const {element} = video;
     const viewport = this.getViewport_();
 
-    return this.onceOrientationChanges_().then(() => {
-      const {boundingClientRect} = element.getIntersectionChangeEntry();
-      const {top, bottom} = boundingClientRect;
-      const vh = viewport.getSize().height;
-      const fullyVisible = top >= 0 && bottom <= vh;
-      if (fullyVisible) {
-        return Promise.resolve();
-      }
-      const pos = optPos
-        ? dev().assertString(optPos)
-        : bottom > vh
-        ? 'bottom'
-        : 'top';
-      return viewport.animateScrollIntoView(element, pos);
-    });
+    return this.onceOrientationChanges_()
+      .then(() => measureIntersection(element))
+      .then(({boundingClientRect}) => {
+        const {bottom, top} = boundingClientRect;
+        const vh = viewport.getSize().height;
+        const fullyVisible = top >= 0 && bottom <= vh;
+        if (fullyVisible) {
+          return Promise.resolve();
+        }
+        const pos = optPos
+          ? dev().assertString(optPos)
+          : bottom > vh
+          ? 'bottom'
+          : 'top';
+        return viewport.animateScrollIntoView(element, pos);
+      });
   }
 
   /**
    * @private
-   * @return {*} TODO(#23582): Specify return type
+   * @return {./viewport/viewport-interface.ViewportInterface}
    */
   getViewport_() {
     return Services.viewportForDoc(this.ampdoc_);
@@ -1261,44 +1276,44 @@ export class AutoFullscreenManager {
 
   /**
    * @private
-   * @return {*} TODO(#23582): Specify return type
+   * @return {!Promise<?../video-interface.VideoOrBaseElementDef>}
    */
   selectBestCenteredInPortrait_() {
     if (this.isInLandscape()) {
-      return this.currentlyCentered_;
+      return Promise.resolve(this.currentlyCentered_);
     }
 
     this.currentlyCentered_ = null;
 
-    const selected = this.entries_
+    const intersectionsPromise = this.entries_
       .filter(this.boundIncludeOnlyPlaying_)
-      .sort(this.boundCompareEntries_)[0];
-
-    if (selected) {
-      const {intersectionRatio} = selected.element.getIntersectionChangeEntry();
-      if (intersectionRatio >= MIN_VISIBILITY_RATIO_FOR_AUTOPLAY) {
-        this.currentlyCentered_ = selected;
+      .map((e) => measureIntersection(e.element));
+
+    return Promise.all(intersectionsPromise).then((intersections) => {
+      const selected = intersections.sort(this.boundCompareEntries_)[0];
+
+      if (
+        selected &&
+        selected.intersectionRatio > MIN_VISIBILITY_RATIO_FOR_AUTOPLAY
+      ) {
+        return selected.target
+          .getImpl()
+          .then((video) => (this.currentlyCentered_ = video));
       }
-    }
 
-    return this.currentlyCentered_;
+      return this.currentlyCentered_;
+    });
   }
 
   /**
    * Compares two videos in order to sort them by "best centered".
-   * @param {!../video-interface.VideoOrBaseElementDef} a
-   * @param {!../video-interface.VideoOrBaseElementDef} b
+   * @param {!IntersectionObserverEntry} a
+   * @param {!IntersectionObserverEntry} b
    * @return {number}
    */
   compareEntries_(a, b) {
-    const {
-      intersectionRatio: ratioA,
-      boundingClientRect: rectA,
-    } = a.element.getIntersectionChangeEntry();
-    const {
-      intersectionRatio: ratioB,
-      boundingClientRect: rectB,
-    } = b.element.getIntersectionChangeEntry();
+    const {boundingClientRect: rectA, intersectionRatio: ratioA} = a;
+    const {boundingClientRect: rectB, intersectionRatio: ratioB} = b;
 
     // Prioritize by how visible they are, with a tolerance of 10%
     const ratioTolerance = 0.1;
@@ -1348,7 +1363,7 @@ function centerDist(viewport, rect) {
  */
 function isLandscape(win) {
   if (win.screen && 'orientation' in win.screen) {
-    return startsWith(win.screen.orientation.type, 'landscape');
+    return win.screen.orientation.type.startsWith('landscape');
   }
   return Math.abs(win.orientation) == 90;
 }
@@ -1407,7 +1422,7 @@ export class AnalyticsPercentageTracker {
   constructor(win, entry) {
     // This is destructured in `calculate_()`, but the linter thinks it's unused
     /** @private @const {!./timer-impl.Timer} */
-    this.timer_ = Services.timerFor(win); // eslint-disable-line
+    this.timer_ = Services.timerFor(win);
 
     /** @private @const {!VideoEntry} */
     this.entry_ = entry;
@@ -1464,7 +1479,7 @@ export class AnalyticsPercentageTracker {
       return;
     }
     while (this.unlisteners_.length > 0) {
-      this.unlisteners_.pop().call();
+      this.unlisteners_.pop()();
     }
     this.triggerId_++;
   }
@@ -1591,7 +1606,7 @@ function analyticsEvent(entry, eventType, opt_vars) {
     if (opt_vars) {
       Object.assign(details, opt_vars);
     }
-    video.element.dispatchCustomEvent(eventType, details);
+    dispatchCustomEvent(video.element, eventType, details);
   });
 }
 
diff --git a/src/service/video-session-manager.js b/src/service/video-session-manager.js
index eb7c8c6ea02ca..2a8dd7811198e 100644
--- a/src/service/video-session-manager.js
+++ b/src/service/video-session-manager.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Observable} from '../observable';
+import {Observable} from '../core/data-structures/observable';
 
 export class VideoSessionManager {
   /**
diff --git a/src/service/video/OWNERS b/src/service/video/OWNERS
index 6b1d001d15c8c..77a55ee52b285 100644
--- a/src/service/video/OWNERS
+++ b/src/service/video/OWNERS
@@ -1,10 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-ui-and-a11y'}],
+      owners: [{name: 'ampproject/wg-components'}],
     },
   ],
 }
diff --git a/src/service/video/autoplay.js b/src/service/video/autoplay.js
index 34fd47b72000e..000bb9cfd770d 100644
--- a/src/service/video/autoplay.js
+++ b/src/service/video/autoplay.js
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import {Services} from '../../services';
 import {dev} from '../../log';
 import {htmlFor} from '../../static-template';
 import {removeElement} from '../../dom';
@@ -29,14 +28,22 @@ function cloneDeep(node) {
 
 /**
  * @param {!Element|!Document} elOrDoc
+ * @param {?{title: (string|undefined)}=} metadata
  * @return {!Element}
  */
-export function renderInteractionOverlay(elOrDoc) {
+export function renderInteractionOverlay(elOrDoc, metadata) {
   const html = htmlFor(elOrDoc);
-  return html`
-    <i-amphtml-video-mask class="i-amphtml-fill-content" role="button">
-    </i-amphtml-video-mask>
+  const element = html`
+    <button
+      aria-label="Unmute video"
+      class="i-amphtml-video-mask i-amphtml-fill-content"
+      tabindex="0"
+    ></button>
   `;
+  if (metadata && metadata.title) {
+    element.setAttribute('aria-label', metadata.title);
+  }
+  return element;
 }
 
 /**
@@ -70,10 +77,5 @@ export function renderIcon(win, elOrDoc) {
   // Remove seed column.
   removeElement(firstCol);
 
-  if (Services.platformFor(win).isIos()) {
-    // iOS is unable to pause hardware accelerated animations.
-    icon.setAttribute('unpausable', '');
-  }
-
   return icon;
 }
diff --git a/src/service/viewer-cid-api.js b/src/service/viewer-cid-api.js
index 8a94e66016254..378126c57065c 100644
--- a/src/service/viewer-cid-api.js
+++ b/src/service/viewer-cid-api.js
@@ -15,7 +15,7 @@
  */
 
 import {Services} from '../services';
-import {dict} from '../utils/object';
+import {dict} from '../core/types/object';
 import {parseUrlDeprecated} from '../url';
 
 /**
diff --git a/src/service/viewer-impl.js b/src/service/viewer-impl.js
index 6904b8f92d3aa..8bb22516fd302 100644
--- a/src/service/viewer-impl.js
+++ b/src/service/viewer-impl.js
@@ -14,33 +14,31 @@
  * limitations under the License.
  */
 
-import {Deferred, tryResolve} from '../utils/promise';
-import {Observable} from '../observable';
+import {Deferred, tryResolve} from '../core/data-structures/promise';
+import {Observable} from '../core/data-structures/observable';
 import {Services} from '../services';
-import {ViewerInterface} from './viewer-interface';
-import {VisibilityState} from '../visibility-state';
-import {
-  dev,
-  devAssert,
-  duplicateErrorIfNecessary,
-  stripUserError,
-} from '../log';
-import {endsWith, startsWith} from '../string';
-import {findIndex} from '../utils/array';
+import {VisibilityState} from '../core/constants/visibility-state';
+import {dev, devAssert, stripUserError} from '../log';
+import {duplicateErrorIfNecessary} from '../core/error';
+import {endsWith} from '../core/types/string';
+import {findIndex} from '../core/types/array';
 import {
   getSourceOrigin,
   isProxyOrigin,
-  parseQueryString,
   parseUrlDeprecated,
   removeFragment,
   serializeQueryString,
 } from '../url';
 import {isIframed} from '../dom';
-import {map} from '../utils/object';
+import {listen} from '../event-helper';
+import {map} from '../core/types/object';
+import {parseQueryString} from '../core/types/string/url';
 import {registerServiceBuilderForDoc} from '../service';
-import {reportError} from '../error';
+import {reportError} from '../error-reporting';
 import {urls} from '../config';
 
+import {ViewerInterface} from './viewer-interface';
+
 const TAG_ = 'Viewer';
 
 /** @enum {string} */
@@ -48,6 +46,12 @@ export const Capability = {
   VIEWER_RENDER_TEMPLATE: 'viewerRenderTemplate',
 };
 
+/**
+ * Max length for each array of the received message queue.
+ * @const @private {number}
+ */
+const RECEIVED_MESSAGE_QUEUE_MAX_LENGTH = 50;
+
 /**
  * Duration in milliseconds to wait for viewerOrigin to be set before an empty
  * string is returned.
@@ -61,7 +65,8 @@ const VIEWER_ORIGIN_TIMEOUT_ = 1000;
  * @const
  * @private {!RegExp}
  */
-const TRIM_ORIGIN_PATTERN_ = /^(https?:\/\/)((www[0-9]*|web|ftp|wap|home|mobile|amp|m)\.)+/i;
+const TRIM_ORIGIN_PATTERN_ =
+  /^(https?:\/\/)((www[0-9]*|web|ftp|wap|home|mobile|amp|m)\.)+/i;
 
 /**
  * An AMP representation of the Viewer. This class doesn't do any work itself
@@ -91,9 +96,6 @@ export class ViewerImpl {
     /** @private {boolean} */
     this.overtakeHistory_ = false;
 
-    /** @private {number} */
-    this.prerenderSize_ = 1;
-
     /** @private {!Object<string, !Observable<!JsonObject>>} */
     this.messageObservables_ = map();
 
@@ -126,6 +128,14 @@ export class ViewerImpl {
      */
     this.messageQueue_ = [];
 
+    /**
+     * @private {!Object<string, !Array<!{
+     *   data: !JsonObject,
+     *   deferred: !Deferred
+     * }>>}
+     */
+    this.receivedMessageQueue_ = map();
+
     /**
      * Subset of this.params_ that only contains parameters in the URL hash,
      * e.g. "#foo=bar".
@@ -147,11 +157,6 @@ export class ViewerImpl {
 
     dev().fine(TAG_, '- visibilityState:', this.ampdoc.getVisibilityState());
 
-    this.prerenderSize_ =
-      parseInt(ampdoc.getParam('prerenderSize'), 10) || this.prerenderSize_;
-    dev().fine(TAG_, '- prerenderSize:', this.prerenderSize_);
-    this.prerenderSizeDeprecation_();
-
     /**
      * Whether the AMP document is embedded in a Chrome Custom Tab.
      * @private {?boolean}
@@ -252,8 +257,8 @@ export class ViewerImpl {
       if (newUrl != this.win.location.href && this.win.history.replaceState) {
         // Persist the hash that we removed has location.originalHash.
         // This is currently used by mode.js to infer development mode.
-        if (!this.win.location.originalHash) {
-          this.win.location.originalHash = this.win.location.hash;
+        if (!this.win.location['originalHash']) {
+          this.win.location['originalHash'] = this.win.location.hash;
         }
         this.win.history.replaceState({}, '', newUrl);
         delete this.hashParams_['click'];
@@ -266,15 +271,9 @@ export class ViewerImpl {
     this.ampdoc.whenFirstVisible().then(() => {
       this.maybeUpdateFragmentForCct();
     });
-  }
 
-  /** @private */
-  prerenderSizeDeprecation_() {
-    if (this.prerenderSize_ !== 1) {
-      dev().expectedError(
-        TAG_,
-        `prerenderSize (${this.prerenderSize_}) is deprecated (#27167)`
-      );
+    if (this.ampdoc.isSingleDoc()) {
+      this.visibleOnUserAction_();
     }
   }
 
@@ -368,7 +367,7 @@ export class ViewerImpl {
       const queryParams = parseQueryString(this.win.location.search);
       this.isCctEmbedded_ =
         queryParams['amp_gsa'] === '1' &&
-        startsWith(queryParams['amp_js_v'] || '', 'a');
+        (queryParams['amp_js_v'] || '').startsWith('a');
     }
     return this.isCctEmbedded_;
   }
@@ -551,11 +550,6 @@ export class ViewerImpl {
     );
   }
 
-  /** @override */
-  getPrerenderSize() {
-    return this.prerenderSize_;
-  }
-
   /** @override */
   getResolvedViewerUrl() {
     return this.resolvedViewerUrl_;
@@ -678,12 +672,26 @@ export class ViewerImpl {
       observable = new Observable();
       this.messageObservables_[eventType] = observable;
     }
-    return observable.add(handler);
+    const unlistenFn = observable.add(handler);
+    if (this.receivedMessageQueue_[eventType]) {
+      this.receivedMessageQueue_[eventType].forEach((message) => {
+        observable.fire(message.data);
+        message.deferred.resolve();
+      });
+      this.receivedMessageQueue_[eventType] = [];
+    }
+    return unlistenFn;
   }
 
   /** @override */
   onMessageRespond(eventType, responder) {
     this.messageResponders_[eventType] = responder;
+    if (this.receivedMessageQueue_[eventType]) {
+      this.receivedMessageQueue_[eventType].forEach((message) => {
+        message.deferred.resolve(responder(message.data));
+      });
+      this.receivedMessageQueue_[eventType] = [];
+    }
     return () => {
       if (this.messageResponders_[eventType] === responder) {
         delete this.messageResponders_[eventType];
@@ -694,11 +702,6 @@ export class ViewerImpl {
   /** @override */
   receiveMessage(eventType, data, unusedAwaitResponse) {
     if (eventType == 'visibilitychange') {
-      if (data['prerenderSize'] !== undefined) {
-        this.prerenderSize_ = data['prerenderSize'];
-        dev().fine(TAG_, '- prerenderSize change:', this.prerenderSize_);
-        this.prerenderSizeDeprecation_();
-      }
       this.setVisibilityState_(data['state']);
       return Promise.resolve();
     }
@@ -709,17 +712,31 @@ export class ViewerImpl {
       return Promise.resolve();
     }
     const observable = this.messageObservables_[eventType];
+    const responder = this.messageResponders_[eventType];
+
+    // Queue the message if there are no handlers. Returns a pending promise to
+    // be resolved once a handler/responder is registered.
+    if (!observable && !responder) {
+      this.receivedMessageQueue_[eventType] =
+        this.receivedMessageQueue_[eventType] || [];
+      if (
+        this.receivedMessageQueue_[eventType].length >=
+        RECEIVED_MESSAGE_QUEUE_MAX_LENGTH
+      ) {
+        return undefined;
+      }
+      const deferred = new Deferred();
+      this.receivedMessageQueue_[eventType].push({data, deferred});
+      return deferred.promise;
+    }
     if (observable) {
       observable.fire(data);
     }
-    const responder = this.messageResponders_[eventType];
     if (responder) {
       return responder(data);
     } else if (observable) {
       return Promise.resolve();
     }
-    dev().fine(TAG_, 'unknown message:', eventType);
-    return undefined;
   }
 
   /** @override */
@@ -776,14 +793,15 @@ export class ViewerImpl {
       // Certain message deliverers return fake "Promise" instances called
       // "Thenables". Convert from these values into trusted Promise instances,
       // assimilating with the resolved (or rejected) internal value.
-      return /** @type {!Promise<?JsonObject|string|undefined>} */ (tryResolve(
-        () =>
+      return /** @type {!Promise<?JsonObject|string|undefined>} */ (
+        tryResolve(() =>
           this.messageDeliverer_(
             eventType,
             /** @type {?JsonObject|string|undefined} */ (data),
             awaitResponse
           )
-      ));
+        )
+      );
     }
 
     if (!this.messagingReadyPromise_) {
@@ -870,13 +888,41 @@ export class ViewerImpl {
         getSourceOrigin(url) == getSourceOrigin(replaceUrl)
       ) {
         this.win.history.replaceState({}, '', replaceUrl.href);
-        this.win.location.originalHref = url.href;
+        this.win.location['originalHref'] = url.href;
         dev().fine(TAG_, 'replace url:' + replaceUrl.href);
       }
     } catch (e) {
       dev().error(TAG_, 'replaceUrl failed', e);
     }
   }
+
+  /**
+   * Defense in-depth against viewer communication issues: Will make the
+   * document visible if it receives a user action without having been
+   * made visible by the viewer.
+   */
+  visibleOnUserAction_() {
+    if (this.ampdoc.getVisibilityState() == VisibilityState.VISIBLE) {
+      return;
+    }
+    const unlisten = [];
+    const doUnlisten = () => unlisten.forEach((fn) => fn());
+    const makeVisible = () => {
+      this.setVisibilityState_(VisibilityState.VISIBLE);
+      doUnlisten();
+      dev().expectedError(TAG_, 'Received user action in non-visible doc');
+    };
+    const options = {
+      capture: true,
+      passive: true,
+    };
+    unlisten.push(
+      listen(this.win, 'keydown', makeVisible, options),
+      listen(this.win, 'touchstart', makeVisible, options),
+      listen(this.win, 'mousedown', makeVisible, options)
+    );
+    this.whenFirstVisible().then(doUnlisten);
+  }
 }
 
 /**
diff --git a/src/service/viewer-interface.js b/src/service/viewer-interface.js
index a2242af0617a4..bbfb937a48194 100644
--- a/src/service/viewer-interface.js
+++ b/src/service/viewer-interface.js
@@ -36,7 +36,6 @@ export class ViewerInterface {
    * exported. Need to make sure it's not used externally.
    * @param {string} name
    * @return {?string}
-   * @export
    */
   getParam(name) {}
 
@@ -101,13 +100,6 @@ export class ViewerInterface {
    */
   isOvertakeHistory() {}
 
-  /**
-   * How much the viewer has requested the runtime to prerender the document.
-   * The values are in number of screens.
-   * @return {number}
-   */
-  getPrerenderSize() {}
-
   /**
    * Returns the resolved viewer URL value. It's by default the current page's
    * URL. The trusted viewers are allowed to override this value.
@@ -175,17 +167,14 @@ export class ViewerInterface {
    * @param {!JsonObject} data
    * @param {boolean} unusedAwaitResponse
    * @return {(!Promise<*>|undefined)}
-   * @export
    */
   receiveMessage(eventType, data, unusedAwaitResponse) {}
 
   /**
    * Provides a message delivery mechanism by which AMP document can send
    * messages to the viewer.
-   * @param {function(string, (?JsonObject|string|undefined), boolean):
-   *     (!Promise<*>|undefined)} deliverer
+   * @param {function(string, (?JsonObject|string|undefined), boolean):(!Promise<*>|undefined)} deliverer
    * @param {string} origin
-   * @export
    */
   setMessageDeliverer(deliverer, origin) {}
 
diff --git a/src/service/viewport/viewport-binding-def.js b/src/service/viewport/viewport-binding-def.js
index c5113de02d806..16a90d1eabdfc 100644
--- a/src/service/viewport/viewport-binding-def.js
+++ b/src/service/viewport/viewport-binding-def.js
@@ -179,15 +179,9 @@ export class ViewportBindingDef {
    *     pass in, if they cached these values and would like to avoid
    *     remeasure. Requires appropriate updating the values on scroll.
    * @param {number=} unusedScrollTop Same comment as above.
-   * @param {!ClientRect=} unusedPremeasuredRect
    * @return {!../../layout-rect.LayoutRectDef}
    */
-  getLayoutRect(
-    unusedEl,
-    unusedScrollLeft,
-    unusedScrollTop,
-    unusedPremeasuredRect
-  ) {}
+  getLayoutRect(unusedEl, unusedScrollLeft, unusedScrollTop) {}
 
   /**
    * Returns the client rect of the current window.
diff --git a/src/service/viewport/viewport-binding-ios-embed-wrapper.js b/src/service/viewport/viewport-binding-ios-embed-wrapper.js
index f72debd520cdd..f394ec8df58ff 100644
--- a/src/service/viewport/viewport-binding-ios-embed-wrapper.js
+++ b/src/service/viewport/viewport-binding-ios-embed-wrapper.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Observable} from '../../observable';
+import {Observable} from '../../core/data-structures/observable';
 import {Services} from '../../services';
 import {
   ViewportBindingDef,
@@ -23,9 +23,9 @@ import {
 import {computedStyle, px, setImportantStyles} from '../../style';
 import {dev} from '../../log';
 import {isExperimentOn} from '../../experiments';
-import {layoutRectLtwh} from '../../layout-rect';
+import {layoutRectLtwh} from '../../core/math/layout-rect';
 import {waitForBodyOpen} from '../../dom';
-import {whenDocumentReady} from '../../document-ready';
+import {whenDocumentReady} from '../../core/document-ready';
 
 const TAG_ = 'Viewport';
 
@@ -69,7 +69,6 @@ export class ViewportBindingIosEmbedWrapper_ {
     /** @const {function()} */
     this.boundScrollEventListener_ = this.onScrolled_.bind(this);
 
-    // eslint-disable-next-line jsdoc/require-returns
     /** @const {function()} */
     this.boundResizeEventListener_ = () => this.resizeObservable_.fire();
 
@@ -273,8 +272,8 @@ export class ViewportBindingIosEmbedWrapper_ {
   contentHeightChanged() {}
 
   /** @override */
-  getLayoutRect(el, opt_scrollLeft, opt_scrollTop, opt_premeasuredRect) {
-    const b = opt_premeasuredRect || el./*OK*/ getBoundingClientRect();
+  getLayoutRect(el, opt_scrollLeft, opt_scrollTop) {
+    const b = el./*OK*/ getBoundingClientRect();
     const scrollTop =
       opt_scrollTop != undefined ? opt_scrollTop : this.getScrollTop();
     const scrollLeft =
diff --git a/src/service/viewport/viewport-binding-natural.js b/src/service/viewport/viewport-binding-natural.js
index 2e34e4675e0e7..b739b95609bc7 100644
--- a/src/service/viewport/viewport-binding-natural.js
+++ b/src/service/viewport/viewport-binding-natural.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Observable} from '../../observable';
+import {Observable} from '../../core/data-structures/observable';
 import {Services} from '../../services';
 import {
   ViewportBindingDef,
@@ -22,7 +22,7 @@ import {
 } from './viewport-binding-def';
 import {computedStyle, px, setImportantStyles} from '../../style';
 import {dev} from '../../log';
-import {layoutRectLtwh} from '../../layout-rect';
+import {layoutRectLtwh} from '../../core/math/layout-rect';
 
 const TAG_ = 'Viewport';
 
@@ -59,7 +59,6 @@ export class ViewportBindingNatural_ {
     /** @const {function()} */
     this.boundScrollEventListener_ = this.handleScrollEvent_.bind(this);
 
-    // eslint-disable-next-line jsdoc/require-returns
     /** @const {function()} */
     this.boundResizeEventListener_ = () => this.resizeObservable_.fire();
 
@@ -182,7 +181,9 @@ export class ViewportBindingNatural_ {
       this.getScrollingElement()./*OK*/ scrollTop ||
       this.win./*OK*/ pageYOffset;
     const {host} = this.ampdoc.getRootNode();
-    return host ? pageScrollTop - host./*OK*/ offsetTop : pageScrollTop;
+    return host
+      ? pageScrollTop - /** @type {!HTMLElement} */ (host)./*OK*/ offsetTop
+      : pageScrollTop;
   }
 
   /** @override */
@@ -240,8 +241,8 @@ export class ViewportBindingNatural_ {
   }
 
   /** @override */
-  getLayoutRect(el, opt_scrollLeft, opt_scrollTop, opt_premeasuredRect) {
-    const b = opt_premeasuredRect || el./*OK*/ getBoundingClientRect();
+  getLayoutRect(el, opt_scrollLeft, opt_scrollTop) {
+    const b = el./*OK*/ getBoundingClientRect();
     const scrollTop =
       opt_scrollTop != undefined ? opt_scrollTop : this.getScrollTop();
     const scrollLeft =
diff --git a/src/service/viewport/viewport-impl.js b/src/service/viewport/viewport-impl.js
index 4c534f2fff101..207c2651d16f8 100644
--- a/src/service/viewport/viewport-impl.js
+++ b/src/service/viewport/viewport-impl.js
@@ -15,15 +15,14 @@
  */
 
 import {Animation} from '../../animation';
-import {FixedLayer} from './../fixed-layer';
-import {Observable} from '../../observable';
+import {Observable} from '../../core/data-structures/observable';
 import {Services} from '../../services';
 import {ViewportBindingDef} from './viewport-binding-def';
 import {ViewportBindingIosEmbedWrapper_} from './viewport-binding-ios-embed-wrapper';
 import {ViewportBindingNatural_} from './viewport-binding-natural';
 import {ViewportInterface} from './viewport-interface';
-import {VisibilityState} from '../../visibility-state';
-import {clamp} from '../../utils/math';
+import {VisibilityState} from '../../core/constants/visibility-state';
+import {clamp} from '../../core/math';
 import {
   closestAncestorElementBySelector,
   getVerticalScrollbarWidth,
@@ -31,7 +30,7 @@ import {
 } from '../../dom';
 import {computedStyle, setStyle} from '../../style';
 import {dev, devAssert} from '../../log';
-import {dict} from '../../utils/object';
+import {dict} from '../../core/types/object';
 import {getFriendlyIframeEmbedOptional} from '../../iframe-helper';
 import {getMode} from '../../mode';
 import {
@@ -43,11 +42,17 @@ import {
   layoutRectFromDomRect,
   layoutRectLtwh,
   moveLayoutRect,
-} from '../../layout-rect';
+} from '../../core/math/layout-rect';
 import {numeric} from '../../transition';
-import {tryResolve} from '../../utils/promise';
+import {tryResolve} from '../../core/data-structures/promise';
 
 const TAG_ = 'Viewport';
+const SCROLL_POS_TO_BLOCK = {
+  'top': 'start',
+  'center': 'center',
+  'bottom': 'end',
+};
+const SMOOTH_SCROLL_DELAY_ = 300;
 
 /**
  * This object represents the viewport. It tracks scroll position, resize
@@ -133,19 +138,15 @@ export class ViewportImpl {
     /** @private @const {!Observable<!./viewport-interface.ViewportResizedEventDef>} */
     this.resizeObservable_ = new Observable();
 
-    /** @private {?Element|undefined} */
+    /** @private {?HTMLMetaElement|undefined} */
     this.viewportMeta_ = undefined;
 
     /** @private {string|undefined} */
     this.originalViewportMetaString_ = undefined;
 
-    /** @private {?FixedLayer} */
+    /** @private {?../fixed-layer.FixedLayer} */
     this.fixedLayer_ = null;
 
-    if (!MOVE_FIXED_LAYER) {
-      this.createFixedLayer(FixedLayer);
-    }
-
     this.viewer_.onMessage('viewport', this.updateOnViewportEvent_.bind(this));
     this.viewer_.onMessage('scroll', this.viewerSetScrollTop_.bind(this));
     this.viewer_.onMessage(
@@ -203,6 +204,19 @@ export class ViewportImpl {
         // Ignore errors.
       }
     }
+
+    // BF-cache navigation sometimes breaks clicks in an iframe on iOS. See
+    // https://github.com/ampproject/amphtml/issues/30838 for more details.
+    // The solution is to make a "fake" scrolling API call.
+    const isIframedIos = Services.platformFor(win).isIos() && isIframed(win);
+    // We dont want to scroll if we're in a shadow doc, so check that we're
+    // in a single doc. Fix for
+    // https://github.com/ampproject/amphtml/issues/32165.
+    if (isIframedIos && this.ampdoc.isSingleDoc()) {
+      this.ampdoc.whenReady().then(() => {
+        win./*OK*/ scrollTo(-0.1, 0);
+      });
+    }
   }
 
   /** @override */
@@ -340,14 +354,14 @@ export class ViewportImpl {
   }
 
   /** @override */
-  getLayoutRect(el, opt_premeasuredRect) {
+  getLayoutRect(el) {
     const scrollLeft = this.getScrollLeft();
     const scrollTop = this.getScrollTop();
 
     // Go up the window hierarchy through friendly iframes.
     const frameElement = getParentWindowFrameElement(el, this.ampdoc.win);
     if (frameElement) {
-      const b = this.binding_.getLayoutRect(el, 0, 0, opt_premeasuredRect);
+      const b = this.binding_.getLayoutRect(el, 0, 0);
       const c = this.binding_.getLayoutRect(
         frameElement,
         scrollLeft,
@@ -361,12 +375,7 @@ export class ViewportImpl {
       );
     }
 
-    return this.binding_.getLayoutRect(
-      el,
-      scrollLeft,
-      scrollTop,
-      opt_premeasuredRect
-    );
+    return this.binding_.getLayoutRect(el, scrollLeft, scrollTop);
   }
 
   /** @override */
@@ -408,9 +417,14 @@ export class ViewportImpl {
 
   /** @override */
   scrollIntoView(element) {
-    return this.getScrollingContainerFor_(element).then((parent) =>
-      this.scrollIntoViewInternal_(element, parent)
-    );
+    if (IS_SXG) {
+      element./* OK */ scrollIntoView();
+      return Promise.resolve();
+    } else {
+      return this.getScrollingContainerFor_(element).then((parent) =>
+        this.scrollIntoViewInternal_(element, parent)
+      );
+    }
   }
 
   /**
@@ -430,20 +444,30 @@ export class ViewportImpl {
 
   /** @override */
   animateScrollIntoView(element, pos = 'top', opt_duration, opt_curve) {
-    devAssert(
-      !opt_curve || opt_duration !== undefined,
-      "Curve without duration doesn't make sense."
-    );
+    if (IS_SXG) {
+      return new Promise((resolve, opt_) => {
+        element./* OK */ scrollIntoView({
+          block: SCROLL_POS_TO_BLOCK[pos],
+          behavior: 'smooth',
+        });
+        setTimeout(resolve, SMOOTH_SCROLL_DELAY_);
+      });
+    } else {
+      devAssert(
+        !opt_curve || opt_duration !== undefined,
+        "Curve without duration doesn't make sense."
+      );
 
-    return this.getScrollingContainerFor_(element).then((parent) =>
-      this.animateScrollWithinParent(
-        element,
-        parent,
-        dev().assertString(pos),
-        opt_duration,
-        opt_curve
-      )
-    );
+      return this.getScrollingContainerFor_(element).then((parent) =>
+        this.animateScrollWithinParent(
+          element,
+          parent,
+          dev().assertString(pos),
+          opt_duration,
+          opt_curve
+        )
+      );
+    }
   }
 
   /** @override */
@@ -834,7 +858,7 @@ export class ViewportImpl {
   }
 
   /**
-   * @return {?Element}
+   * @return {?HTMLMetaElement}
    * @private
    */
   getViewportMeta_() {
@@ -843,9 +867,9 @@ export class ViewportImpl {
       return null;
     }
     if (this.viewportMeta_ === undefined) {
-      this.viewportMeta_ = /** @type {?HTMLMetaElement} */ (this.globalDoc_.querySelector(
-        'meta[name=viewport]'
-      ));
+      this.viewportMeta_ = /** @type {?HTMLMetaElement} */ (
+        this.globalDoc_.querySelector('meta[name=viewport]')
+      );
       if (this.viewportMeta_) {
         this.originalViewportMetaString_ = this.viewportMeta_.content;
       }
@@ -880,14 +904,22 @@ export class ViewportImpl {
     this.lastPaddingTop_ = this.paddingTop_;
     this.paddingTop_ = paddingTop;
 
-    const animPromise = this.animateFixedElements_(duration, curve, transient);
-    if (paddingTop < this.lastPaddingTop_) {
-      this.binding_.hideViewerHeader(transient, this.lastPaddingTop_);
-      return;
+    if (this.fixedLayer_) {
+      const animPromise = this.fixedLayer_.animateFixedElements(
+        this.paddingTop_,
+        this.lastPaddingTop_,
+        duration,
+        curve,
+        transient
+      );
+      if (paddingTop < this.lastPaddingTop_) {
+        this.binding_.hideViewerHeader(transient, this.lastPaddingTop_);
+      } else {
+        animPromise.then(() => {
+          this.binding_.showViewerHeader(transient, paddingTop);
+        });
+      }
     }
-    animPromise.then(() => {
-      this.binding_.showViewerHeader(transient, paddingTop);
-    });
   }
 
   /**
@@ -902,33 +934,6 @@ export class ViewportImpl {
     }
   }
 
-  /**
-   * @param {number} duration
-   * @param {string} curve
-   * @param {boolean} transient
-   * @return {!Promise}
-   * @private
-   */
-  animateFixedElements_(duration, curve, transient) {
-    this.fixedLayer_.updatePaddingTop(this.paddingTop_, transient);
-    if (duration <= 0) {
-      return Promise.resolve();
-    }
-    // Add transit effect on position fixed element
-    const tr = numeric(this.lastPaddingTop_ - this.paddingTop_, 0);
-    return Animation.animate(
-      this.ampdoc.getRootNode(),
-      (time) => {
-        const p = tr(time);
-        this.fixedLayer_.transformMutate(`translateY(${p}px)`);
-      },
-      duration,
-      curve
-    ).thenAlways(() => {
-      this.fixedLayer_.transformMutate(null);
-    });
-  }
-
   /**
    * @param {boolean} relayoutAll
    * @param {number} velocity
@@ -1169,7 +1174,8 @@ function createViewport(ampdoc) {
   let binding;
   if (
     ampdoc.isSingleDoc() &&
-    getViewportType(win, viewer) == ViewportType.NATURAL_IOS_EMBED
+    getViewportType(win, viewer) == ViewportType.NATURAL_IOS_EMBED &&
+    !IS_SXG
   ) {
     binding = new ViewportBindingIosEmbedWrapper_(win);
   } else {
@@ -1193,7 +1199,7 @@ const ViewportType = {
    * that AMP sets when Viewer has requested "natural" viewport on a iOS
    * device.
    * See:
-   * https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md
+   * https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md
    */
   NATURAL_IOS_EMBED: 'natural-ios-embed',
 };
diff --git a/src/service/viewport/viewport-interface.js b/src/service/viewport/viewport-interface.js
index 618fe17098819..f0067dd29cfb9 100644
--- a/src/service/viewport/viewport-interface.js
+++ b/src/service/viewport/viewport-interface.js
@@ -144,11 +144,9 @@ export class ViewportInterface extends Disposable {
    * Note that this function should be called in vsync measure. Please consider
    * using `getClientRectAsync` instead.
    * @param {!Element} el
-   * @param {!ClientRect=} opt_premeasuredRect If provided, use this
-   *    premeasured ClientRect instead of calling getBoundingClientRect.
    * @return {!../../layout-rect.LayoutRectDef}
    */
-  getLayoutRect(el, opt_premeasuredRect) {}
+  getLayoutRect(el) {}
 
   /**
    * Returns the clientRect of the element.
diff --git a/src/service/vsync-impl.js b/src/service/vsync-impl.js
index 951e7d0079358..25724fea58f9b 100644
--- a/src/service/vsync-impl.js
+++ b/src/service/vsync-impl.js
@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-import {Deferred} from '../utils/promise';
-import {JankMeter} from './jank-meter';
+import {Deferred} from '../core/data-structures/promise';
 import {Pass} from '../pass';
 import {Services} from '../services';
 import {
@@ -23,10 +22,11 @@ import {
   isDocumentHidden,
   removeDocumentVisibilityChangeListener,
 } from '../utils/document-visibility';
-import {cancellation} from '../error';
-import {dev, devAssert, rethrowAsync} from '../log';
+import {cancellation} from '../error-reporting';
+import {dev, devAssert} from '../log';
 import {getService, registerServiceBuilder} from '../service';
 import {installTimerService} from './timer-impl';
+import {rethrowAsync} from '../core/error';
 
 /** @const {time} */
 const FRAME_TIME = 16;
@@ -153,9 +153,6 @@ export class Vsync {
         this.boundOnVisibilityChanged_
       );
     }
-
-    /** @private {!JankMeter} */
-    this.jankMeter_ = new JankMeter(this.win);
   }
 
   /** @override */
@@ -215,9 +212,11 @@ export class Vsync {
    * @return {function(!VsyncStateDef=)}
    */
   createTask(task) {
-    return /** @type {function(!VsyncStateDef=)} */ ((opt_state) => {
-      this.run(task, opt_state);
-    });
+    return /** @type {function(!VsyncStateDef=)} */ (
+      (opt_state) => {
+        this.run(task, opt_state);
+      }
+    );
   }
 
   /**
@@ -331,9 +330,11 @@ export class Vsync {
    * @return {function(!VsyncStateDef=):boolean}
    */
   createAnimTask(contextNode, task) {
-    return /** @type {function(!VsyncStateDef=):boolean} */ ((opt_state) => {
-      return this.runAnim(contextNode, task, opt_state);
-    });
+    return /** @type {function(!VsyncStateDef=):boolean} */ (
+      (opt_state) => {
+        return this.runAnim(contextNode, task, opt_state);
+      }
+    );
   }
 
   /**
@@ -382,7 +383,6 @@ export class Vsync {
     }
     // Schedule actual animation frame and then run tasks.
     this.scheduled_ = true;
-    this.jankMeter_.onScheduled();
     this.forceSchedule_();
   }
 
@@ -405,9 +405,8 @@ export class Vsync {
   runScheduledTasks_() {
     this.backupPass_.cancel();
     this.scheduled_ = false;
-    this.jankMeter_.onRun();
 
-    const {tasks_: tasks, states_: states, nextFrameResolver_: resolver} = this;
+    const {nextFrameResolver_: resolver, states_: states, tasks_: tasks} = this;
     this.nextFrameResolver_ = null;
     this.nextFramePromise_ = null;
     // Double buffering
@@ -462,7 +461,6 @@ export class Vsync {
  * @param {function(!VsyncStateDef):undefined|undefined} callback
  * @param {!VsyncStateDef} state
  * @return {boolean}
- * @noinline
  */
 function callTask_(callback, state) {
   devAssert(callback);
diff --git a/src/service/xhr-impl.js b/src/service/xhr-impl.js
index 5a68e69aee9cc..6845ea1b9a162 100644
--- a/src/service/xhr-impl.js
+++ b/src/service/xhr-impl.js
@@ -27,8 +27,7 @@ import {dev, user} from '../log';
 import {getCorsUrl, parseUrlDeprecated} from '../url';
 import {getService, registerServiceBuilder} from '../service';
 import {isFormDataWrapper} from '../form-data-wrapper';
-import {parseJson} from '../json';
-import {startsWith} from '../string';
+import {parseJson} from '../core/types/object/json';
 
 /**
  * A service that polyfills Fetch API for use within AMP.
@@ -81,7 +80,9 @@ export class Xhr {
       // will expect a native `FormData` object in the `body` property, so
       // the native `FormData` object needs to be unwrapped.
       if (isFormDataWrapper(init.body)) {
-        const formDataWrapper = /** @type {!FormDataWrapperInterface} */ (init.body);
+        const formDataWrapper = /** @type {!FormDataWrapperInterface} */ (
+          init.body
+        );
         init.body = formDataWrapper.getFormData();
       }
       return this.win.fetch.apply(null, arguments);
@@ -110,7 +111,7 @@ export class Xhr {
         throw user().createExpectedError(
           'XHR',
           `Failed fetching (${targetOrigin}/...):`,
-          reason && reason.message
+          reason && /** @type {!Error} */ (reason).message
         );
       }
     );
@@ -161,7 +162,7 @@ export class Xhr {
     }
 
     return res.text().then((txt) => {
-      if (!startsWith(txt, dev().assertString(prefix))) {
+      if (!txt.startsWith(dev().assertString(prefix))) {
         user().warn(
           'XHR',
           `Failed to strip missing prefix "${prefix}" in fetch response.`
diff --git a/src/services.js b/src/services.js
index bc978685ac51c..24447ffc51eec 100644
--- a/src/services.js
+++ b/src/services.js
@@ -16,10 +16,11 @@
 
 import {
   getAmpdoc,
-  getExistingServiceForDocInEmbedScope,
   getExistingServiceOrNull,
   getService,
   getServiceForDoc,
+  getServiceForDocOrNull,
+  getServiceInEmbedWin,
   getServicePromiseForDoc,
 } from './service';
 import {
@@ -44,11 +45,9 @@ export class Services {
    * @return {!Promise<!../extensions/amp-access/0.1/amp-access.AccessService>}
    */
   static accessServiceForDoc(element) {
-    return /** @type {!Promise<!../extensions/amp-access/0.1/amp-access.AccessService>} */ (getElementServiceForDoc(
-      element,
-      'access',
-      'amp-access'
-    ));
+    return /** @type {!Promise<!../extensions/amp-access/0.1/amp-access.AccessService>} */ (
+      getElementServiceForDoc(element, 'access', 'amp-access')
+    );
   }
 
   /**
@@ -58,11 +57,9 @@ export class Services {
    * @return {!Promise<?../extensions/amp-access/0.1/amp-access.AccessService>}
    */
   static accessServiceForDocOrNull(element) {
-    return /** @type {!Promise<?../extensions/amp-access/0.1/amp-access.AccessService>} */ (getElementServiceIfAvailableForDoc(
-      element,
-      'access',
-      'amp-access'
-    ));
+    return /** @type {!Promise<?../extensions/amp-access/0.1/amp-access.AccessService>} */ (
+      getElementServiceIfAvailableForDoc(element, 'access', 'amp-access')
+    );
   }
 
   /**
@@ -71,11 +68,9 @@ export class Services {
    * @return {!Promise<!SubscriptionService>}
    */
   static subscriptionsServiceForDoc(element) {
-    return /** @type {!Promise<!SubscriptionService>} */ (getElementServiceForDoc(
-      element,
-      'subscriptions',
-      'amp-subscriptions'
-    ));
+    return /** @type {!Promise<!SubscriptionService>} */ (
+      getElementServiceForDoc(element, 'subscriptions', 'amp-subscriptions')
+    );
   }
 
   /**
@@ -84,11 +79,13 @@ export class Services {
    * @return {!Promise<?SubscriptionService>}
    */
   static subscriptionsServiceForDocOrNull(element) {
-    return /** @type {!Promise<?SubscriptionService>} */ (getElementServiceIfAvailableForDoc(
-      element,
-      'subscriptions',
-      'amp-subscriptions'
-    ));
+    return /** @type {!Promise<?SubscriptionService>} */ (
+      getElementServiceIfAvailableForDoc(
+        element,
+        'subscriptions',
+        'amp-subscriptions'
+      )
+    );
   }
 
   /**
@@ -96,10 +93,9 @@ export class Services {
    * @return {!./service/action-impl.ActionService}
    */
   static actionServiceForDoc(element) {
-    return /** @type {!./service/action-impl.ActionService} */ (getExistingServiceForDocInEmbedScope(
-      element,
-      'action'
-    ));
+    return /** @type {!./service/action-impl.ActionService} */ (
+      getServiceForDocOrNull(element, 'action')
+    );
   }
 
   /**
@@ -107,10 +103,9 @@ export class Services {
    * @return {!./service/standard-actions-impl.StandardActions}
    */
   static standardActionsForDoc(element) {
-    return /** @type {!./service/standard-actions-impl.StandardActions} */ (getExistingServiceForDocInEmbedScope(
-      element,
-      'standard-actions'
-    ));
+    return /** @type {!./service/standard-actions-impl.StandardActions} */ (
+      getServiceForDocOrNull(element, 'standard-actions')
+    );
   }
 
   /**
@@ -118,11 +113,9 @@ export class Services {
    * @return {!Promise<!../extensions/amp-analytics/0.1/activity-impl.Activity>}
    */
   static activityForDoc(element) {
-    return /** @type {!Promise<!../extensions/amp-analytics/0.1/activity-impl.Activity>} */ (getElementServiceForDoc(
-      element,
-      'activity',
-      'amp-analytics'
-    ));
+    return /** @type {!Promise<!../extensions/amp-analytics/0.1/activity-impl.Activity>} */ (
+      getElementServiceForDoc(element, 'activity', 'amp-analytics')
+    );
   }
 
   /**
@@ -133,10 +126,9 @@ export class Services {
    * @return {!./service/ampdoc-impl.AmpDocService}
    */
   static ampdocServiceFor(window) {
-    return /** @type {!./service/ampdoc-impl.AmpDocService} */ (getService(
-      window,
-      'ampdoc'
-    ));
+    return /** @type {!./service/ampdoc-impl.AmpDocService} */ (
+      getService(window, 'ampdoc')
+    );
   }
 
   /**
@@ -162,11 +154,13 @@ export class Services {
         'amp-analytics'
       );
     }
-    return /** @type {!Promise<!../extensions/amp-analytics/0.1/instrumentation.InstrumentationService>} */ (getElementServiceForDoc(
-      element,
-      'amp-analytics-instrumentation',
-      'amp-analytics'
-    ));
+    return /** @type {!Promise<!../extensions/amp-analytics/0.1/instrumentation.InstrumentationService>} */ (
+      getElementServiceForDoc(
+        element,
+        'amp-analytics-instrumentation',
+        'amp-analytics'
+      )
+    );
   }
 
   /**
@@ -174,11 +168,13 @@ export class Services {
    * @return {!Promise<?../extensions/amp-analytics/0.1/instrumentation.InstrumentationService>}
    */
   static analyticsForDocOrNull(element) {
-    return /** @type {!Promise<?../extensions/amp-analytics/0.1/instrumentation.InstrumentationService>} */ (getElementServiceIfAvailableForDoc(
-      element,
-      'amp-analytics-instrumentation',
-      'amp-analytics'
-    ));
+    return /** @type {!Promise<?../extensions/amp-analytics/0.1/instrumentation.InstrumentationService>} */ (
+      getElementServiceIfAvailableForDoc(
+        element,
+        'amp-analytics-instrumentation',
+        'amp-analytics'
+      )
+    );
   }
 
   /**
@@ -186,10 +182,9 @@ export class Services {
    * @return {!./service/batched-xhr-impl.BatchedXhr}
    */
   static batchedXhrFor(window) {
-    return /** @type {!./service/batched-xhr-impl.BatchedXhr} */ (getService(
-      window,
-      'batched-xhr'
-    ));
+    return /** @type {!./service/batched-xhr-impl.BatchedXhr} */ (
+      getService(window, 'batched-xhr')
+    );
   }
 
   /**
@@ -197,22 +192,37 @@ export class Services {
    * @return {!Promise<?../extensions/amp-bind/0.1/bind-impl.Bind>}
    */
   static bindForDocOrNull(element) {
-    return /** @type {!Promise<?../extensions/amp-bind/0.1/bind-impl.Bind>} */ (getElementServiceIfAvailableForDocInEmbedScope(
-      element,
-      'bind',
-      'amp-bind'
-    ));
+    return /** @type {!Promise<?../extensions/amp-bind/0.1/bind-impl.Bind>} */ (
+      getElementServiceIfAvailableForDocInEmbedScope(
+        element,
+        'bind',
+        'amp-bind'
+      )
+    );
   }
 
   /**
-   * @param {!Element|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
+   * @param {!Element|!ShadowRoot} element
+   * @return {!Promise<?../extensions/amp-script/0.1/amp-script.AmpScriptService>}
+   */
+  static scriptForDocOrNull(element) {
+    return /** @type {!Promise<?../extensions/amp-script/0.1/amp-script.AmpScriptService>} */ (
+      getElementServiceIfAvailableForDocInEmbedScope(
+        element,
+        'amp-script',
+        'amp-script'
+      )
+    );
+  }
+
+  /**
+   * @param {!Element|!ShadowRoot|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
    * @return {!Promise<!./service/cid-impl.CidDef>}
    */
   static cidForDoc(elementOrAmpDoc) {
-    return /** @type {!Promise<!./service/cid-impl.CidDef>} */ (getServicePromiseForDoc(
-      elementOrAmpDoc,
-      'cid'
-    ));
+    return /** @type {!Promise<!./service/cid-impl.CidDef>} */ (
+      getServicePromiseForDoc(elementOrAmpDoc, 'cid')
+    );
   }
 
   /**
@@ -220,10 +230,9 @@ export class Services {
    * @return {!./service/navigation.Navigation}
    */
   static navigationForDoc(elementOrAmpDoc) {
-    return /** @type {!./service/navigation.Navigation} */ (getServiceForDoc(
-      elementOrAmpDoc,
-      'navigation'
-    ));
+    return /** @type {!./service/navigation.Navigation} */ (
+      getServiceForDoc(elementOrAmpDoc, 'navigation')
+    );
   }
 
   /**
@@ -231,11 +240,9 @@ export class Services {
    * @return {!Promise<!../extensions/amp-loader/0.1/amp-loader.LoaderService>}
    */
   static loaderServiceForDoc(element) {
-    return /** @type {!Promise<!../extensions/amp-loader/0.1/amp-loader.LoaderService>} */ (getElementServiceForDoc(
-      element,
-      'loader',
-      'amp-loader'
-    ));
+    return /** @type {!Promise<!../extensions/amp-loader/0.1/amp-loader.LoaderService>} */ (
+      getElementServiceForDoc(element, 'loader', 'amp-loader')
+    );
   }
 
   /**
@@ -243,11 +250,9 @@ export class Services {
    * @return {!Promise<!../extensions/amp-standalone/0.1/amp-standalone.StandaloneService>}
    */
   static standaloneServiceForDoc(element) {
-    return /** @type {!Promise<!../extensions/amp-standalone/0.1/amp-standalone.StandaloneService>} */ (getElementServiceForDoc(
-      element,
-      'standalone',
-      'amp-standalone'
-    ));
+    return /** @type {!Promise<!../extensions/amp-standalone/0.1/amp-standalone.StandaloneService>} */ (
+      getElementServiceForDoc(element, 'standalone', 'amp-standalone')
+    );
   }
 
   /**
@@ -255,10 +260,9 @@ export class Services {
    * @return {!./service/crypto-impl.Crypto}
    */
   static cryptoFor(window) {
-    return /** @type {!./service/crypto-impl.Crypto} */ (getService(
-      window,
-      'crypto'
-    ));
+    return /** @type {!./service/crypto-impl.Crypto} */ (
+      getService(window, 'crypto')
+    );
   }
 
   /**
@@ -266,10 +270,9 @@ export class Services {
    * @return {!./service/document-info-impl.DocumentInfoDef} Info about the doc
    */
   static documentInfoForDoc(elementOrAmpDoc) {
-    return /** @type {!./service/document-info-impl.DocInfo} */ (getServiceForDoc(
-      elementOrAmpDoc,
-      'documentInfo'
-    )).get();
+    return /** @type {!./service/document-info-impl.DocInfo} */ (
+      getServiceForDoc(elementOrAmpDoc, 'documentInfo')
+    ).get();
   }
 
   /**
@@ -277,10 +280,9 @@ export class Services {
    * @return {!./service/extensions-impl.Extensions}
    */
   static extensionsFor(window) {
-    return /** @type {!./service/extensions-impl.Extensions} */ (getService(
-      window,
-      'extensions'
-    ));
+    return /** @type {!./service/extensions-impl.Extensions} */ (
+      getService(window, 'extensions')
+    );
   }
 
   /**
@@ -290,10 +292,9 @@ export class Services {
    * @return {!Promise<../extensions/amp-form/0.1/form-submit-service.FormSubmitService>}
    */
   static formSubmitForDoc(elementOrAmpDoc) {
-    return /** @type {!Promise<../extensions/amp-form/0.1/form-submit-service.FormSubmitService>} */ (getServicePromiseForDoc(
-      elementOrAmpDoc,
-      'form-submit-service'
-    ));
+    return /** @type {!Promise<../extensions/amp-form/0.1/form-submit-service.FormSubmitService>} */ (
+      getServicePromiseForDoc(elementOrAmpDoc, 'form-submit-service')
+    );
   }
 
   /**
@@ -302,10 +303,9 @@ export class Services {
    * @return {!./service/hidden-observer-impl.HiddenObserver}
    */
   static hiddenObserverForDoc(element) {
-    return /** @type {!./service/hidden-observer-impl.HiddenObserver} */ (getExistingServiceForDocInEmbedScope(
-      element,
-      'hidden-observer'
-    ));
+    return /** @type {!./service/hidden-observer-impl.HiddenObserver} */ (
+      getServiceForDocOrNull(element, 'hidden-observer')
+    );
   }
 
   /**
@@ -314,10 +314,9 @@ export class Services {
    * @return {!./service/history-impl.History}
    */
   static historyForDoc(elementOrAmpDoc) {
-    return /** @type {!./service/history-impl.History} */ (getServiceForDoc(
-      elementOrAmpDoc,
-      'history'
-    ));
+    return /** @type {!./service/history-impl.History} */ (
+      getServiceForDoc(elementOrAmpDoc, 'history')
+    );
   }
 
   /**
@@ -334,11 +333,19 @@ export class Services {
    * @return {!Promise<?../extensions/amp-inputmask/0.1/amp-inputmask.AmpInputmaskService>}
    */
   static inputmaskServiceForDocOrNull(element) {
-    return /** @type {!Promise<?../extensions/amp-inputmask/0.1/amp-inputmask.AmpInputmaskService>} */ (getElementServiceIfAvailableForDoc(
-      element,
-      'inputmask',
-      'amp-inputmask'
-    ));
+    return /** @type {!Promise<?../extensions/amp-inputmask/0.1/amp-inputmask.AmpInputmaskService>} */ (
+      getElementServiceIfAvailableForDoc(element, 'inputmask', 'amp-inputmask')
+    );
+  }
+
+  /**
+   * @param {!Element|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
+   * @return {?./service/loading-indicator.LoadingIndicatorImpl}
+   */
+  static loadingIndicatorOrNull(elementOrAmpDoc) {
+    return /** @type {?./service/loading-indicator.LoadingIndicatorImpl} */ (
+      getServiceForDocOrNull(elementOrAmpDoc, 'loadingIndicator')
+    );
   }
 
   /**
@@ -346,10 +353,9 @@ export class Services {
    * @return {!../extensions/amp-next-page/1.0/service.NextPageService}
    */
   static nextPageServiceForDoc(elementOrAmpDoc) {
-    return /** @type {!../extensions/amp-next-page/1.0/service.NextPageService} */ (getServiceForDoc(
-      elementOrAmpDoc,
-      'next-page'
-    ));
+    return /** @type {!../extensions/amp-next-page/1.0/service.NextPageService} */ (
+      getServiceForDoc(elementOrAmpDoc, 'next-page')
+    );
   }
 
   /**
@@ -357,10 +363,9 @@ export class Services {
    * @return {!./service/mutator-interface.MutatorInterface}
    */
   static mutatorForDoc(elementOrAmpDoc) {
-    return /** @type {!./service/mutator-interface.MutatorInterface} */ (getServiceForDoc(
-      elementOrAmpDoc,
-      'mutator'
-    ));
+    return /** @type {!./service/mutator-interface.MutatorInterface} */ (
+      getServiceForDoc(elementOrAmpDoc, 'mutator')
+    );
   }
 
   /**
@@ -368,10 +373,9 @@ export class Services {
    * @return {!./service/owners-interface.OwnersInterface}
    */
   static ownersForDoc(elementOrAmpDoc) {
-    return /** @type {!./service/owners-interface.OwnersInterface} */ (getServiceForDoc(
-      elementOrAmpDoc,
-      'owners'
-    ));
+    return /** @type {!./service/owners-interface.OwnersInterface} */ (
+      getServiceForDoc(elementOrAmpDoc, 'owners')
+    );
   }
 
   /**
@@ -379,10 +383,9 @@ export class Services {
    * @return {!./service/performance-impl.Performance}
    */
   static performanceFor(window) {
-    return /** @type {!./service/performance-impl.Performance}*/ (getService(
-      window,
-      'performance'
-    ));
+    return /** @type {!./service/performance-impl.Performance}*/ (
+      getService(window, 'performance')
+    );
   }
 
   /**
@@ -390,10 +393,9 @@ export class Services {
    * @return {!./service/performance-impl.Performance}
    */
   static performanceForOrNull(window) {
-    return /** @type {!./service/performance-impl.Performance}*/ (getExistingServiceOrNull(
-      window,
-      'performance'
-    ));
+    return /** @type {!./service/performance-impl.Performance}*/ (
+      getExistingServiceOrNull(window, 'performance')
+    );
   }
 
   /**
@@ -401,10 +403,9 @@ export class Services {
    * @return {!./service/platform-impl.Platform}
    */
   static platformFor(window) {
-    return /** @type {!./service/platform-impl.Platform} */ (getService(
-      window,
-      'platform'
-    ));
+    return /** @type {!./service/platform-impl.Platform} */ (
+      getService(window, 'platform')
+    );
   }
 
   /**
@@ -414,10 +415,9 @@ export class Services {
    * @throws If the service is not installed.
    */
   static positionObserverForDoc(element) {
-    return /** @type {!./service/position-observer/position-observer-impl.PositionObserver} */ (getServiceForDoc(
-      element,
-      'position-observer'
-    ));
+    return /** @type {!./service/position-observer/position-observer-impl.PositionObserver} */ (
+      getServiceForDoc(element, 'position-observer')
+    );
   }
 
   /**
@@ -433,10 +433,9 @@ export class Services {
    * @return {!./service/resources-interface.ResourcesInterface}
    */
   static resourcesForDoc(elementOrAmpDoc) {
-    return /** @type {!./service/resources-interface.ResourcesInterface} */ (getServiceForDoc(
-      elementOrAmpDoc,
-      'resources'
-    ));
+    return /** @type {!./service/resources-interface.ResourcesInterface} */ (
+      getServiceForDoc(elementOrAmpDoc, 'resources')
+    );
   }
 
   /**
@@ -444,34 +443,19 @@ export class Services {
    * @return {!Promise<!./service/resources-interface.ResourcesInterface>}
    */
   static resourcesPromiseForDoc(elementOrAmpDoc) {
-    return /** @type {!Promise<!./service/resources-interface.ResourcesInterface>} */ (getServicePromiseForDoc(
-      elementOrAmpDoc,
-      'resources'
-    ));
-  }
-
-  /**
-   * @param {!Window} win
-   * @return {?Promise<?{incomingFragment: string, outgoingFragment: string}>}
-   */
-  static shareTrackingForOrNull(win) {
-    return /** @type {!Promise<?{incomingFragment: string, outgoingFragment: string}>} */ (getElementServiceIfAvailable(
-      win,
-      'share-tracking',
-      'amp-share-tracking',
-      true
-    ));
+    return /** @type {!Promise<!./service/resources-interface.ResourcesInterface>} */ (
+      getServicePromiseForDoc(elementOrAmpDoc, 'resources')
+    );
   }
 
   /**
-   * TODO(#14357): Remove this when amp-story:0.1 is deprecated.
    * @param {!Window} win
-   * @return {?Promise<?../extensions/amp-story/1.0/variable-service.StoryVariableDef>}
+   * @return {?Promise<?../extensions/amp-story/1.0/variable-service.AmpStoryVariableService>}
    */
   static storyVariableServiceForOrNull(win) {
     return (
-      /** @type {!Promise<?../extensions/amp-story/1.0/variable-service.StoryVariableDef>} */
-      (getElementServiceIfAvailable(win, 'story-variable', 'amp-story', true))
+      /** @type {!Promise<?../extensions/amp-story/1.0/variable-service.AmpStoryVariableService>} */
+      (getElementServiceIfAvailable(win, 'story-variable', 'amp-story', '1.0'))
     );
   }
 
@@ -490,12 +474,12 @@ export class Services {
    * Version of the story store service depends on which version of amp-story
    * the publisher is loading. They all have the same implementation.
    * @param {!Window} win
-   * @return {?Promise<?../extensions/amp-story/1.0/amp-story-store-service.AmpStoryStoreService|?../extensions/amp-story/0.1/amp-story-store-service.AmpStoryStoreService>}
+   * @return {?Promise<?../extensions/amp-story/1.0/amp-story-store-service.AmpStoryStoreService>}
    */
   static storyStoreServiceForOrNull(win) {
     return (
-      /** @type {!Promise<?../extensions/amp-story/1.0/amp-story-store-service.AmpStoryStoreService|?../extensions/amp-story/0.1/amp-story-store-service.AmpStoryStoreService>} */
-      (getElementServiceIfAvailable(win, 'story-store', 'amp-story'))
+      /** @type {!Promise<?../extensions/amp-story/1.0/amp-story-store-service.AmpStoryStoreService>} */
+      (getElementServiceIfAvailable(win, 'story-store', 'amp-story', '1.0'))
     );
   }
 
@@ -521,6 +505,18 @@ export class Services {
     );
   }
 
+  /**
+   * Get promise with story request service
+   * @param {!Window} win
+   * @return {?Promise<?../extensions/amp-story/1.0/amp-story-request-service.AmpStoryRequestService>}
+   */
+  static storyRequestServiceForOrNull(win) {
+    return (
+      /** @type {!Promise<?../extensions/amp-story/1.0/amp-story-request-service.AmpStoryRequestService>} */
+      (getElementServiceIfAvailable(win, 'story-request', 'amp-story', '1.0'))
+    );
+  }
+
   /**
    * @param {!Window} win
    * @return {?../extensions/amp-story/1.0/amp-story-request-service.AmpStoryRequestService}
@@ -543,15 +539,24 @@ export class Services {
     );
   }
 
+  /**
+   * @param {!Element} el
+   * @return {!Promise<./service/localization.LocalizationService>}
+   */
+  static localizationServiceForOrNull(el) {
+    return /** @type {!Promise<?./service/localization.LocalizationService>} */ (
+      getServicePromiseForDoc(el, 'localization')
+    );
+  }
+
   /**
    * @param {!Element} element
    * @return {?./service/localization.LocalizationService}
    */
   static localizationForDoc(element) {
-    return /** @type {?./service/localization.LocalizationService} */ (getExistingServiceForDocInEmbedScope(
-      element,
-      'localization'
-    ));
+    return /** @type {?./service/localization.LocalizationService} */ (
+      getServiceForDocOrNull(element, 'localization')
+    );
   }
 
   /**
@@ -562,7 +567,15 @@ export class Services {
   static storyAnalyticsServiceForOrNull(win) {
     return (
       /** @type {!Promise<?../extensions/amp-story/1.0/story-analytics.StoryAnalyticsService>} */
-      (getElementServiceIfAvailable(win, 'story-analytics', 'amp-story', true))
+      (
+        getElementServiceIfAvailable(
+          win,
+          'story-analytics',
+          'amp-story',
+          '1.0',
+          true
+        )
+      )
     );
   }
 
@@ -577,24 +590,6 @@ export class Services {
     );
   }
 
-  /**
-   * TODO(#14357): Remove this when amp-story:0.1 is deprecated.
-   * @param {!Window} win
-   * @return {!../extensions/amp-story/0.1/amp-story-store-service.AmpStoryStoreService}
-   */
-  static storyStoreServiceV01(win) {
-    return getService(win, 'story-store');
-  }
-
-  /**
-   * TODO(#14357): Remove this when amp-story:0.1 is deprecated.
-   * @param {!Window} win
-   * @return {!../extensions/amp-story/0.1/amp-story-request-service.AmpStoryRequestService}
-   */
-  static storyRequestServiceV01(win) {
-    return getService(win, 'story-request-v01');
-  }
-
   /**
    * @param {!Element|!ShadowRoot} element
    * @return {!Promise<!../extensions/amp-animation/0.1/web-animation-service.WebAnimationService>}
@@ -606,26 +601,54 @@ export class Services {
     );
   }
 
+  /**
+   * @param {!Element|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
+   * @return {!Promise<!./service/real-time-config/real-time-config-impl.RealTimeConfigManager>}
+   */
+  static realTimeConfigForDoc(elementOrAmpDoc) {
+    return /** @type {!Promise<!./service/real-time-config/real-time-config-impl.RealTimeConfigManager>} */ (
+      getServicePromiseForDoc(elementOrAmpDoc, 'real-time-config')
+    );
+  }
+
   /**
    * @param {!Element|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
    * @return {!Promise<!./service/storage-impl.Storage>}
    */
   static storageForDoc(elementOrAmpDoc) {
-    return /** @type {!Promise<!./service/storage-impl.Storage>} */ (getServicePromiseForDoc(
-      elementOrAmpDoc,
-      'storage'
-    ));
+    return /** @type {!Promise<!./service/storage-impl.Storage>} */ (
+      getServicePromiseForDoc(elementOrAmpDoc, 'storage')
+    );
   }
 
   /**
-   * @param {!Window} window
+   * @param {!Element|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
+   * @return {!Promise<!./service/storage-impl.Storage>}
+   * TODO(dmanek): Add tests for this method.
+   */
+  static storageForTopLevelDoc(elementOrAmpDoc) {
+    const thisAmpdoc = Services.ampdoc(elementOrAmpDoc);
+    const ampdocService = Services.ampdocServiceFor(thisAmpdoc.win);
+    const topAmpdoc = ampdocService.isSingleDoc()
+      ? ampdocService.getSingleDoc()
+      : null;
+    // We need to verify that ampdocs are on the same origin, therefore
+    // we compare the windows of both.
+    const ampdoc =
+      topAmpdoc && topAmpdoc.win == thisAmpdoc.win ? topAmpdoc : thisAmpdoc;
+    return /** @type {!Promise<!./service/storage-impl.Storage>} */ (
+      getServicePromiseForDoc(ampdoc, 'storage')
+    );
+  }
+
+  /**
+   * @param {!Element|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
    * @return {!./service/template-impl.Templates}
    */
-  static templatesFor(window) {
-    return /** @type {!./service/template-impl.Templates} */ (getService(
-      window,
-      'templates'
-    ));
+  static templatesForDoc(elementOrAmpDoc) {
+    return /** @type {!./service/template-impl.Templates} */ (
+      getServiceForDoc(elementOrAmpDoc, 'templates')
+    );
   }
 
   /**
@@ -634,10 +657,9 @@ export class Services {
    */
   static timerFor(window) {
     // TODO(alabiaga): This will always return the top window's Timer service.
-    return /** @type {!./service/timer-impl.Timer} */ (getService(
-      window,
-      'timer'
-    ));
+    return /** @type {!./service/timer-impl.Timer} */ (
+      getServiceInEmbedWin(window, 'timer')
+    );
   }
 
   /**
@@ -645,10 +667,9 @@ export class Services {
    * @return {!./service/url-replacements-impl.UrlReplacements}
    */
   static urlReplacementsForDoc(element) {
-    return /** @type {!./service/url-replacements-impl.UrlReplacements} */ (getExistingServiceForDocInEmbedScope(
-      element,
-      'url-replace'
-    ));
+    return /** @type {!./service/url-replacements-impl.UrlReplacements} */ (
+      getServiceForDocOrNull(element, 'url-replace')
+    );
   }
 
   /**
@@ -658,11 +679,13 @@ export class Services {
   static userNotificationManagerForDoc(element) {
     return (
       /** @type {!Promise<!../extensions/amp-user-notification/0.1/amp-user-notification.UserNotificationManager>} */
-      (getElementServiceForDoc(
-        element,
-        'userNotificationManager',
-        'amp-user-notification'
-      ))
+      (
+        getElementServiceForDoc(
+          element,
+          'userNotificationManager',
+          'amp-user-notification'
+        )
+      )
     );
   }
 
@@ -675,11 +698,13 @@ export class Services {
   static consentPolicyServiceForDocOrNull(element) {
     return (
       /** @type {!Promise<?../extensions/amp-consent/0.1/consent-policy-manager.ConsentPolicyManager>} */
-      (getElementServiceIfAvailableForDoc(
-        element,
-        'consentPolicyManager',
-        'amp-consent'
-      ))
+      (
+        getElementServiceIfAvailableForDoc(
+          element,
+          'consentPolicyManager',
+          'amp-consent'
+        )
+      )
     );
   }
 
@@ -690,12 +715,9 @@ export class Services {
    * @return {!Promise<?../extensions/amp-geo/0.1/amp-geo.GeoDef>}
    */
   static geoForDocOrNull(element) {
-    return /** @type {!Promise<?../extensions/amp-geo/0.1/amp-geo.GeoDef>} */ (getElementServiceIfAvailableForDoc(
-      element,
-      'geo',
-      'amp-geo',
-      true
-    ));
+    return /** @type {!Promise<?../extensions/amp-geo/0.1/amp-geo.GeoDef>} */ (
+      getElementServiceIfAvailableForDoc(element, 'geo', 'amp-geo', true)
+    );
   }
 
   /**
@@ -705,10 +727,9 @@ export class Services {
    * @return {!./service/url-impl.Url}
    */
   static urlForDoc(element) {
-    return /** @type {!./service/url-impl.Url} */ (getExistingServiceForDocInEmbedScope(
-      element,
-      'url'
-    ));
+    return /** @type {!./service/url-impl.Url} */ (
+      getServiceForDocOrNull(element, 'url')
+    );
   }
 
   /**
@@ -718,12 +739,14 @@ export class Services {
    * @return {!Promise<?../extensions/amp-experiment/0.1/variant.Variants>}
    */
   static variantsForDocOrNull(element) {
-    return /** @type {!Promise<?../extensions/amp-experiment/0.1/variant.Variants>} */ (getElementServiceIfAvailableForDoc(
-      element,
-      'variant',
-      'amp-experiment',
-      true
-    ));
+    return /** @type {!Promise<?../extensions/amp-experiment/0.1/variant.Variants>} */ (
+      getElementServiceIfAvailableForDoc(
+        element,
+        'variant',
+        'amp-experiment',
+        true
+      )
+    );
   }
 
   /**
@@ -731,24 +754,8 @@ export class Services {
    * @return {!./service/video-manager-impl.VideoManager}
    */
   static videoManagerForDoc(elementOrAmpDoc) {
-    return /** @type {!./service/video-manager-impl.VideoManager} */ (getServiceForDoc(
-      elementOrAmpDoc,
-      'video-manager'
-    ));
-  }
-
-  /**
-   * @param {!Element|!ShadowRoot} element
-   * @return {!Promise<?../extensions/amp-viewer-assistance/0.1/amp-viewer-assistance.AmpViewerAssistance>}
-   */
-  static viewerAssistanceForDocOrNull(element) {
-    return (
-      /** @type {!Promise<?../extensions/amp-viewer-assistance/0.1/amp-viewer-assistance.AmpViewerAssistance>} */
-      (getElementServiceIfAvailableForDoc(
-        element,
-        'amp-viewer-assistance',
-        'amp-viewer-assistance'
-      ))
+    return /** @type {!./service/video-manager-impl.VideoManager} */ (
+      getServiceForDoc(elementOrAmpDoc, 'video-manager')
     );
   }
 
@@ -757,10 +764,9 @@ export class Services {
    * @return {!./service/viewer-interface.ViewerInterface}
    */
   static viewerForDoc(elementOrAmpDoc) {
-    return /** @type {!./service/viewer-interface.ViewerInterface} */ (getServiceForDoc(
-      elementOrAmpDoc,
-      'viewer'
-    ));
+    return /** @type {!./service/viewer-interface.ViewerInterface} */ (
+      getServiceForDoc(elementOrAmpDoc, 'viewer')
+    );
   }
 
   /**
@@ -771,10 +777,9 @@ export class Services {
    * @return {!Promise<!./service/viewer-interface.ViewerInterface>}
    */
   static viewerPromiseForDoc(elementOrAmpDoc) {
-    return /** @type {!Promise<!./service/viewer-interface.ViewerInterface>} */ (getServicePromiseForDoc(
-      elementOrAmpDoc,
-      'viewer'
-    ));
+    return /** @type {!Promise<!./service/viewer-interface.ViewerInterface>} */ (
+      getServicePromiseForDoc(elementOrAmpDoc, 'viewer')
+    );
   }
 
   /**
@@ -782,10 +787,9 @@ export class Services {
    * @return {!./service/vsync-impl.Vsync}
    */
   static vsyncFor(window) {
-    return /** @type {!./service/vsync-impl.Vsync} */ (getService(
-      window,
-      'vsync'
-    ));
+    return /** @type {!./service/vsync-impl.Vsync} */ (
+      getService(window, 'vsync')
+    );
   }
 
   /**
@@ -793,10 +797,9 @@ export class Services {
    * @return {!./service/viewport/viewport-interface.ViewportInterface}
    */
   static viewportForDoc(elementOrAmpDoc) {
-    return /** @type {!./service/viewport/viewport-interface.ViewportInterface} */ (getServiceForDoc(
-      elementOrAmpDoc,
-      'viewport'
-    ));
+    return /** @type {!./service/viewport/viewport-interface.ViewportInterface} */ (
+      getServiceForDoc(elementOrAmpDoc, 'viewport')
+    );
   }
 
   /**
@@ -806,4 +809,34 @@ export class Services {
   static xhrFor(window) {
     return /** @type {!./service/xhr-impl.Xhr} */ (getService(window, 'xhr'));
   }
+
+  /**
+   * @param {!Element|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
+   * @return {!../extensions/amp-google-assistant-assistjs/0.1/assistjs-frame-service.AssistjsFrameService}
+   */
+  static assistjsFrameServiceForDoc(elementOrAmpDoc) {
+    return /** @type {!../extensions/amp-google-assistant-assistjs/0.1/assistjs-frame-service.AssistjsFrameService} */ (
+      getServiceForDoc(elementOrAmpDoc, 'assistjs-frame-service')
+    );
+  }
+
+  /**
+   * @param {!Element|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
+   * @return {!../extensions/amp-google-assistant-assistjs/0.1/assistjs-config-service.AssistjsConfigService}
+   */
+  static assistjsConfigServiceForDoc(elementOrAmpDoc) {
+    return /** @type {!../extensions/amp-google-assistant-assistjs/0.1/assistjs-config-service.AssistjsConfigService} */ (
+      getServiceForDoc(elementOrAmpDoc, 'assistjs-config-service')
+    );
+  }
+
+  /**
+   * @param {!Element|!./service/ampdoc-impl.AmpDoc} elementOrAmpDoc
+   * @return {!Promise<../amp-cache-url/amp-cache-url.AmpCacheUrlService>}
+   */
+  static cacheUrlServicePromiseForDoc(elementOrAmpDoc) {
+    return /** @type {!Promise<?../amp-cache-url/amp-cache-url.AmpCacheUrlService>} */ (
+      getServicePromiseForDoc(elementOrAmpDoc, 'cache-url')
+    );
+  }
 }
diff --git a/src/shadow-embed.js b/src/shadow-embed.js
index 582f21d55d168..c88d4b64251d3 100644
--- a/src/shadow-embed.js
+++ b/src/shadow-embed.js
@@ -21,20 +21,14 @@ import {
   ShadowDomVersion,
   getShadowDomSupportedVersion,
   isShadowCssSupported,
-  isShadowDomSupported,
-} from './web-components';
-import {closestNode, isShadowRoot, iterateCursor} from './dom';
+} from './core/dom/web-components';
 import {dev, devAssert} from './log';
-import {escapeCssSelectorIdent} from './css';
+import {escapeCssSelectorIdent} from './core/dom/css';
 import {installCssTransformer} from './style-installer';
+import {iterateCursor} from './dom';
 import {setInitialDisplay, setStyle} from './style';
-import {toArray, toWin} from './types';
-
-/**
- * Used for non-composed root-node search. See `getRootNode`.
- * @const {!GetRootNodeOptions}
- */
-const UNCOMPOSED_SEARCH = {composed: false};
+import {toArray} from './core/types/array';
+import {toWin} from './types';
 
 /** @const {!RegExp} */
 const CSS_SELECTOR_BEG_REGEX = /[^\.\-\_0-9a-zA-Z]/;
@@ -42,6 +36,8 @@ const CSS_SELECTOR_BEG_REGEX = /[^\.\-\_0-9a-zA-Z]/;
 /** @const {!RegExp} */
 const CSS_SELECTOR_END_REGEX = /[^\-\_0-9a-zA-Z]/;
 
+const SHADOW_CSS_CACHE = '__AMP_SHADOW_CSS';
+
 /**
  * @type {boolean|undefined}
  */
@@ -87,7 +83,7 @@ export function createShadowRoot(hostElement) {
 
   if (!isShadowCssSupported()) {
     const rootId = `i-amphtml-sd-${win.Math.floor(win.Math.random() * 10000)}`;
-    shadowRoot.id = rootId;
+    shadowRoot['id'] = rootId;
     shadowRoot.host.classList.add(rootId);
 
     // CSS isolation.
@@ -135,9 +131,9 @@ function createShadowRootPolyfill(hostElement) {
   // `getElementById` is resolved via `querySelector('#id')`.
   shadowRoot.getElementById = function (id) {
     const escapedId = escapeCssSelectorIdent(id);
-    return /** @type {HTMLElement|null} */ (shadowRoot./*OK*/ querySelector(
-      `#${escapedId}`
-    ));
+    return /** @type {?HTMLElement} */ (
+      shadowRoot./*OK*/ querySelector(`#${escapedId}`)
+    );
   };
 
   // The styleSheets property should have a list of local styles.
@@ -155,20 +151,6 @@ function createShadowRootPolyfill(hostElement) {
   return shadowRoot;
 }
 
-/**
- * Return shadow root for the specified node.
- * @param {!Node} node
- * @return {?ShadowRoot}
- */
-export function getShadowRootNode(node) {
-  // TODO(#22733): remove in preference to dom's `rootNodeFor`.
-  if (isShadowDomSupported() && Node.prototype.getRootNode) {
-    return /** @type {?ShadowRoot} */ (node.getRootNode(UNCOMPOSED_SEARCH));
-  }
-  // Polyfill shadow root lookup.
-  return /** @type {?ShadowRoot} */ (closestNode(node, (n) => isShadowRoot(n)));
-}
-
 /**
  * Imports a body into a shadow root with the workaround for a polyfill case.
  * @param {!ShadowRoot} shadowRoot
@@ -197,8 +179,15 @@ export function importShadowBody(shadowRoot, body, deep) {
     }
   }
   setStyle(resultBody, 'position', 'relative');
+  const oldBody = shadowRoot['body'];
+  if (oldBody) {
+    shadowRoot.removeChild(oldBody);
+  }
   shadowRoot.appendChild(resultBody);
-  Object.defineProperty(shadowRoot, 'body', {value: resultBody});
+  Object.defineProperty(shadowRoot, 'body', {
+    configurable: true,
+    value: resultBody,
+  });
   return resultBody;
 }
 
@@ -225,7 +214,7 @@ export function transformShadowCss(shadowRoot, css) {
  * @visibleForTesting
  */
 export function scopeShadowCss(shadowRoot, css) {
-  const id = devAssert(shadowRoot.id);
+  const id = devAssert(shadowRoot['id']);
   const doc = shadowRoot.ownerDocument;
   let rules = null;
   // Try to use a separate document.
@@ -292,12 +281,12 @@ function rootSelectorPrefixer(match, name, pos, selector) {
  * @return {?CSSRuleList}
  */
 function getStylesheetRules(doc, css) {
-  const style = doc.createElement('style');
+  const style = /** @type {!HTMLStyleElement} */ (doc.createElement('style'));
   style./*OK*/ textContent = css;
   try {
     (doc.head || doc.documentElement).appendChild(style);
     if (style.sheet) {
-      return style.sheet.cssRules;
+      return /** @type {!CSSStyleSheet} */ (style.sheet).cssRules;
     }
     return null;
   } finally {
@@ -307,6 +296,43 @@ function getStylesheetRules(doc, css) {
   }
 }
 
+/**
+ * @param {!ShadowRoot} shadowRoot
+ * @param {string} name
+ * @param {string} cssText
+ */
+export function installShadowStyle(shadowRoot, name, cssText) {
+  const doc = shadowRoot.ownerDocument;
+  const win = toWin(doc.defaultView);
+  if (
+    shadowRoot.adoptedStyleSheets !== undefined &&
+    win.CSSStyleSheet.prototype.replaceSync !== undefined
+  ) {
+    const cache = win[SHADOW_CSS_CACHE] || (win[SHADOW_CSS_CACHE] = {});
+    let styleSheet = cache[name];
+    if (!styleSheet) {
+      styleSheet = new win.CSSStyleSheet();
+      styleSheet.replaceSync(cssText);
+      cache[name] = styleSheet;
+    }
+    shadowRoot.adoptedStyleSheets =
+      shadowRoot.adoptedStyleSheets.concat(styleSheet);
+  } else {
+    const styleEl = doc.createElement('style');
+    styleEl.setAttribute('data-name', name);
+    styleEl.textContent = cssText;
+    shadowRoot.appendChild(styleEl);
+  }
+}
+
+/**
+ * @param {!Window} win
+ * @visibleForTesting
+ */
+export function resetShadowStyleCacheForTesting(win) {
+  win[SHADOW_CSS_CACHE] = null;
+}
+
 /**
  * @param {boolean|undefined} val
  * @visibleForTesting
diff --git a/src/size-list.js b/src/size-list.js
deleted file mode 100644
index 53045eab44793..0000000000000
--- a/src/size-list.js
+++ /dev/null
@@ -1,201 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {assertLength, assertLengthOrPercent} from './layout';
-import {userAssert} from './log';
-
-/**
- * A single option within a SizeList.
- * @typedef {{
- *   mediaQuery: (string|undefined),
- *   size: (!./layout.LengthDef)
- * }}
- */
-let SizeListOptionDef;
-
-/**
- * Parses the text representation of "sizes" into SizeList object.
- *
- * There could be any number of size options within the SizeList. They are tried
- * in the order they were defined. The final size option must not have "media"
- * condition specified. All other size options must have "media" condition
- * specified.
- *
- * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes
- * See http://www.w3.org/html/wg/drafts/html/master/semantics.html#attr-img-sizes
- * @param {string} s
- * @param {boolean=} opt_allowPercentAsLength when parsing heights
- * @return {!SizeList}
- */
-export function parseSizeList(s, opt_allowPercentAsLength) {
-  const sSizes = s.split(',');
-  userAssert(sSizes.length > 0, 'sizes has to have at least one size');
-  const sizes = [];
-  sSizes.forEach((sSize) => {
-    sSize = sSize.replace(/\s+/g, ' ').trim();
-    if (sSize.length == 0) {
-      return;
-    }
-
-    let mediaStr;
-    let sizeStr;
-
-    // Process the expression from the end.
-    const lastChar = sSize.charAt(sSize.length - 1);
-    let div;
-    let func = false;
-    if (lastChar == ')') {
-      // Value is the CSS function, e.g. `calc(50vw + 10px)`.
-      func = true;
-
-      // First, skip to the opening paren.
-      let parens = 1;
-      div = sSize.length - 2;
-      for (; div >= 0; div--) {
-        const c = sSize.charAt(div);
-        if (c == '(') {
-          parens--;
-        } else if (c == ')') {
-          parens++;
-        }
-        if (parens == 0) {
-          break;
-        }
-      }
-
-      // Then, skip to the begining to the function's name.
-      const funcEnd = div - 1;
-      if (div > 0) {
-        div--;
-        for (; div >= 0; div--) {
-          const c = sSize.charAt(div);
-          if (
-            !(
-              c == '%' ||
-              c == '-' ||
-              c == '_' ||
-              (c >= 'a' && c <= 'z') ||
-              (c >= 'A' && c <= 'Z') ||
-              (c >= '0' && c <= '9')
-            )
-          ) {
-            break;
-          }
-        }
-      }
-      userAssert(div < funcEnd, 'Invalid CSS function in "%s"', sSize);
-    } else {
-      // Value is the length or a percent: accept a wide range of values,
-      // including invalid values - they will be later asserted to conform
-      // to exact CSS length or percent value.
-      div = sSize.length - 2;
-      for (; div >= 0; div--) {
-        const c = sSize.charAt(div);
-        if (
-          !(
-            c == '%' ||
-            c == '.' ||
-            (c >= 'a' && c <= 'z') ||
-            (c >= 'A' && c <= 'Z') ||
-            (c >= '0' && c <= '9')
-          )
-        ) {
-          break;
-        }
-      }
-    }
-    if (div >= 0) {
-      mediaStr = sSize.substring(0, div + 1).trim();
-      sizeStr = sSize.substring(div + 1).trim();
-    } else {
-      sizeStr = sSize;
-      mediaStr = undefined;
-    }
-    sizes.push({
-      mediaQuery: mediaStr,
-      size: func
-        ? sizeStr
-        : opt_allowPercentAsLength
-        ? assertLengthOrPercent(sizeStr)
-        : assertLength(sizeStr),
-    });
-  });
-  return new SizeList(sizes);
-}
-
-/**
- * A SizeList object contains one or more sizes as typically seen in "sizes"
- * attribute.
- *
- * See "select" method for details on how the size selection is performed.
- *
- * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes
- * See http://www.w3.org/html/wg/drafts/html/master/semantics.html#attr-img-sizes
- */
-export class SizeList {
-  /**
-   * @param {!Array<!SizeListOptionDef>} sizes
-   */
-  constructor(sizes) {
-    userAssert(sizes.length > 0, 'SizeList must have at least one option');
-    /** @private @const {!Array<!SizeListOptionDef>} */
-    this.sizes_ = sizes;
-
-    // All sources except for last must have a media query. The last one must
-    // not.
-    for (let i = 0; i < sizes.length; i++) {
-      const option = sizes[i];
-      if (i < sizes.length - 1) {
-        userAssert(
-          option.mediaQuery,
-          'All options except for the last must have a media condition'
-        );
-      } else {
-        userAssert(
-          !option.mediaQuery,
-          'The last option must not have a media condition'
-        );
-      }
-    }
-  }
-
-  /**
-   * Selects the first size that matches media conditions. If no options match,
-   * the last option is returned.
-   *
-   * See http://www.w3.org/html/wg/drafts/html/master/semantics.html#attr-img-sizes
-   * @param {!Window} win
-   * @return {!./layout.LengthDef|string}
-   */
-  select(win) {
-    const sizes = this.sizes_;
-    const length = sizes.length - 1;
-
-    // Iterate all but the last size
-    for (let i = 0; i < length; i++) {
-      const option = sizes[i];
-      // Only the last item (which we don't iterate) has an undefined
-      // mediaQuery.
-      const query = /** @type {string} */ (option.mediaQuery);
-      if (win.matchMedia(query).matches) {
-        return option.size;
-      }
-    }
-
-    // Returns the last size in the SizeList, which is the default.
-    return sizes[length].size;
-  }
-}
diff --git a/src/srcset.js b/src/srcset.js
index c35fcff044e7a..04507b3be5c5d 100644
--- a/src/srcset.js
+++ b/src/srcset.js
@@ -263,8 +263,8 @@ export class Srcset {
 /**
  * Sorts by width
  *
- * @param {number} s1
- * @param {number} s2
+ * @param {!SrcsetSourceDef} s1
+ * @param {!SrcsetSourceDef} s2
  * @return {number}
  */
 function sortByWidth(s1, s2) {
@@ -275,8 +275,8 @@ function sortByWidth(s1, s2) {
 /**
  * Sorts by dpr
  *
- * @param {!Object} s1
- * @param {!Object} s2
+ * @param {!SrcsetSourceDef} s1
+ * @param {!SrcsetSourceDef} s2
  * @return {number}
  */
 function sortByDpr(s1, s2) {
diff --git a/src/ssr-template-helper.js b/src/ssr-template-helper.js
index 61b1f8928127f..4639272daa845 100644
--- a/src/ssr-template-helper.js
+++ b/src/ssr-template-helper.js
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import {dict} from './utils/object';
-import {isArray} from './types';
+import {dict} from './core/types/object';
+import {isArray} from './core/types';
 import {toStructuredCloneable} from './utils/xhr-utils';
 import {userAssert} from './log';
 
@@ -114,7 +114,7 @@ export class SsrTemplateHelper {
    * If SSR is supported, data is assumed to be from ssr() above.
    * @param {!Element} element
    * @param {(?JsonObject|string|undefined|!Array)} data
-   * @return {!Promise<!Element>}
+   * @return {!Promise<(!Element|!Array<!Element>)>}
    */
   applySsrOrCsrTemplate(element, data) {
     let renderTemplatePromise;
diff --git a/src/static-template.js b/src/static-template.js
index 7bd952dc8ddff..ee1a89fd546d9 100644
--- a/src/static-template.js
+++ b/src/static-template.js
@@ -15,7 +15,7 @@
  */
 
 import {devAssert} from './log';
-import {map} from './utils/object.js';
+import {map} from './core/types/object';
 
 let htmlContainer;
 let svgContainer;
diff --git a/src/string.js b/src/string.js
deleted file mode 100644
index a8a8c41f29842..0000000000000
--- a/src/string.js
+++ /dev/null
@@ -1,225 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-/**
- * @param {string} _match
- * @param {string} character
- * @return {string}
- */
-function toUpperCase(_match, character) {
-  return character.toUpperCase();
-}
-
-/**
- * @param {string} match
- * @return {string}
- */
-function prependDashAndToLowerCase(match) {
-  return '-' + match.toLowerCase();
-}
-
-/**
- * @param {string} name Attribute name containing dashes.
- * @return {string} Dashes removed and successive character sent to upper case.
- * visibleForTesting
- */
-export function dashToCamelCase(name) {
-  return name.replace(/-([a-z])/g, toUpperCase);
-}
-
-/**
- * Converts a string that is in camelCase to one that is in dash-case.
- *
- * @param {string} string The string to convert.
- * @return {string} The string in dash-case.
- */
-export function camelCaseToDash(string) {
-  return string.replace(/(?!^)[A-Z]/g, prependDashAndToLowerCase);
-}
-
-/**
- * @param {string} name Attribute name with dashes
- * @return {string} Dashes replaced by underlines.
- */
-export function dashToUnderline(name) {
-  return name.replace('-', '_');
-}
-
-/**
- * Polyfill for String.prototype.endsWith.
- * @param {string} string
- * @param {string} suffix
- * @return {boolean}
- */
-export function endsWith(string, suffix) {
-  const index = string.length - suffix.length;
-  return index >= 0 && string.indexOf(suffix, index) == index;
-}
-
-/**
- * Polyfill for String.prototype.startsWith.
- * @param {string} string
- * @param {string} prefix
- * @return {boolean}
- */
-export function startsWith(string, prefix) {
-  if (prefix.length > string.length) {
-    return false;
-  }
-  return string.lastIndexOf(prefix, 0) == 0;
-}
-
-/**
- * Polyfill for String.prototype.includes.
- * @param {string} string
- * @param {string} substring
- * @param {number=} start
- * @return {boolean}
- */
-export function includes(string, substring, start) {
-  if (typeof start !== 'number') {
-    start = 0;
-  }
-  if (start + substring.length > string.length) {
-    return false;
-  }
-  return string.indexOf(substring, start) !== -1;
-}
-
-/**
- * Expands placeholders in a given template string with values.
- *
- * Placeholders use ${key-name} syntax and are replaced with the value
- * returned from the given getter function.
- *
- * @param {string} template The template string to expand.
- * @param {function(string):*} getter Function used to retrieve a value for a
- *   placeholder. Returns values will be coerced into strings.
- * @param {number=} opt_maxIterations Number of times to expand the template.
- *   Defaults to 1, but should be set to a larger value your placeholder tokens
- *   can be expanded to other placeholder tokens. Take caution with large values
- *   as recursively expanding a string can be exponentially expensive.
- * @return {string}
- */
-export function expandTemplate(template, getter, opt_maxIterations) {
-  const maxIterations = opt_maxIterations || 1;
-  for (let i = 0; i < maxIterations; i++) {
-    let matches = 0;
-    template = template.replace(/\${([^}]*)}/g, (_a, b) => {
-      matches++;
-      return getter(b);
-    });
-    if (!matches) {
-      break;
-    }
-  }
-  return template;
-}
-
-/**
- * Hash function djb2a
- * This is intended to be a simple, fast hashing function using minimal code.
- * It does *not* have good cryptographic properties.
- * @param {string} str
- * @return {string} 32-bit unsigned hash of the string
- */
-export function stringHash32(str) {
-  const {length} = str;
-  let hash = 5381;
-  for (let i = 0; i < length; i++) {
-    hash = (hash * 33) ^ str.charCodeAt(i);
-  }
-  // Convert from 32-bit signed to unsigned.
-  return String(hash >>> 0);
-}
-
-/**
- * Trims a string on the end, removing whitespace characters.
- * @param {string} str  A string to trim.
- * @return {string} The string, with trailing whitespace removed.
- */
-export function trimEnd(str) {
-  // TODO(sparhami) Does this get inlined for an ES2019 build?
-  if (str.trimEnd) {
-    return str.trimEnd();
-  }
-
-  return ('_' + str).trim().slice(1);
-}
-
-/**
- * Trims any leading whitespace from a string.
- * @param {string} str  A string to trim.
- * @return {string} The string, with leading whitespace removed.
- */
-export function trimStart(str) {
-  if (str.trimStart) {
-    return str.trimStart();
-  }
-
-  return (str + '_').trim().slice(0, -1);
-}
-
-/**
- * Wrapper around String.replace that handles asynchronous resolution.
- * @param {string} str
- * @param {RegExp} regex
- * @param {Function|string} replacer
- * @return {!Promise<string>}
- */
-export function asyncStringReplace(str, regex, replacer) {
-  if (typeof replacer === 'string') {
-    return Promise.resolve(str.replace(regex, replacer));
-  }
-  const stringBuilder = [];
-  let lastIndex = 0;
-
-  str.replace(regex, function (match) {
-    // String.prototype.replace will pass 3 to n number of arguments to the
-    // callback function based on how many capture groups the regex may or may
-    // not contain. We know that the match will always be first, and the
-    // index will always be second to last.
-    const matchIndex = arguments[arguments.length - 2];
-    stringBuilder.push(str.slice(lastIndex, matchIndex));
-    lastIndex = matchIndex + match.length;
-
-    // Store the promise in it's eventual string position.
-    const replacementPromise = replacer.apply(null, arguments);
-    stringBuilder.push(replacementPromise);
-  });
-  stringBuilder.push(str.slice(lastIndex));
-
-  return Promise.all(stringBuilder).then((resolved) => resolved.join(''));
-}
-
-/**
- * Pads the beginning of a string with a substring to a target length.
- * @param {string} s
- * @param {number} targetLength
- * @param {string} padString
- * @return {*} TODO(#23582): Specify return type
- */
-export function padStart(s, targetLength, padString) {
-  if (s.length >= targetLength) {
-    return s;
-  }
-  targetLength = targetLength - s.length;
-  let padding = padString;
-  while (targetLength > padding.length) {
-    padding += padString;
-  }
-  return padding.slice(0, targetLength) + s;
-}
diff --git a/src/style-installer.js b/src/style-installer.js
index 5de51327b1418..1ee354efe1ef1 100644
--- a/src/style-installer.js
+++ b/src/style-installer.js
@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
-import {CommonSignals} from './common-signals';
+import {CommonSignals} from './core/constants/common-signals';
 import {Services} from './services';
-import {TickLabel} from './enums';
-import {dev, devAssert, rethrowAsync} from './log';
+import {TickLabel} from './core/constants/enums';
+import {dev, devAssert} from './log';
 import {getAmpdoc} from './service';
 import {insertAfterOrAtStart, waitForBodyOpenPromise} from './dom';
-import {map} from './utils/object';
+import {map} from './core/types/object';
+import {rethrowAsync} from './core/error';
 import {setStyles} from './style';
 import {waitForServices} from './render-delaying-services';
 
@@ -82,57 +83,6 @@ export function installStylesForDoc(
   return style;
 }
 
-/**
- * Adds the given css text to the given document.
- * TODO(dvoytenko, #22733): Remove this method once FIE/ampdoc migration is
- * done.
- *
- * @param {!Document} doc The document that should get the new styles.
- * @param {string} cssText
- * @param {?function(!Element)|undefined} cb Called when the new styles are
- *     available. Not using a promise, because this is synchronous when
- *     possible. for better performance.
- * @param {boolean=} opt_isRuntimeCss If true, this style tag will be inserted
- *     as the first element in head and all style elements will be positioned
- *     after.
- * @param {string=} opt_ext
- * @return {!Element}
- */
-export function installStylesLegacy(
-  doc,
-  cssText,
-  cb,
-  opt_isRuntimeCss,
-  opt_ext
-) {
-  const style = insertStyleElement(
-    dev().assertElement(doc.head),
-    cssText,
-    opt_isRuntimeCss || false,
-    opt_ext || null
-  );
-
-  if (cb) {
-    // Styles aren't always available synchronously. E.g. if there is a
-    // pending style download, it will have to finish before the new
-    // style is visible.
-    // For this reason we poll until the style becomes available.
-    // Sync case.
-    if (styleLoaded(doc, style)) {
-      cb(style);
-      return style;
-    }
-    // Poll until styles are available.
-    const interval = setInterval(() => {
-      if (styleLoaded(doc, style)) {
-        clearInterval(interval);
-        cb(style);
-      }
-    }, 4);
-  }
-  return style;
-}
-
 /**
  * Creates the properly configured style element.
  * @param {!Element|!ShadowRoot} cssRoot
@@ -264,6 +214,12 @@ export function makeBodyVisible(doc) {
     })
     .then((services) => {
       bodyMadeVisible = true;
+      if (INI_LOAD_INOB) {
+        // Force sync measurement to ensure that style recalc is complete
+        // before showing body, which would trigger FCP. This should reduce
+        // make it less likely that a CLS would be triggered after FCP.
+        doc.body./*OK*/ getBoundingClientRect();
+      }
       setBodyVisibleStyles(doc);
       const ampdoc = getAmpdoc(doc);
       ampdoc.signals().signal(CommonSignals.RENDER_START);
diff --git a/src/style.js b/src/style.js
index fbf92c4a38628..18b4d7cf12109 100644
--- a/src/style.js
+++ b/src/style.js
@@ -16,8 +16,7 @@
 
 // Note: loaded by 3p system. Cannot rely on babel polyfills.
 import {dev, devAssert} from './log';
-import {map} from './utils/object.js';
-import {startsWith} from './string';
+import {map} from './core/types/object';
 
 /** @type {Object<string, string>} */
 let propertyNameCache;
@@ -25,8 +24,12 @@ let propertyNameCache;
 /** @const {!Array<string>} */
 const vendorPrefixes = ['Webkit', 'webkit', 'Moz', 'moz', 'ms', 'O', 'o'];
 
+const EMPTY_CSS_DECLARATION = /** @type {!CSSStyleDeclaration} */ ({
+  'getPropertyPriority': () => '',
+  'getPropertyValue': () => '',
+});
+
 /**
- * @export
  * @param {string} camelCase camel cased string
  * @return {string} title cased string
  */
@@ -56,7 +59,6 @@ function getVendorJsPropertyName_(style, titleCase) {
  * Returns the possibly prefixed JavaScript property name of a style property
  * (ex. WebkitTransitionDuration) given a camelCase'd version of the property
  * (ex. transitionDuration).
- * @export
  * @param {!Object} style
  * @param {string} camelCase the camel cased version of a css property name
  * @param {boolean=} opt_bypassCache bypass the memoized cache of property
@@ -100,7 +102,7 @@ export function setImportantStyles(element, styles) {
   for (const k in styles) {
     style.setProperty(
       getVendorJsPropertyName(style, k),
-      styles[k].toString(),
+      String(styles[k]),
       'important'
     );
   }
@@ -123,9 +125,9 @@ export function setStyle(element, property, value, opt_units, opt_bypassCache) {
   if (!propertyName) {
     return;
   }
-  const styleValue = /** @type {string} */ (opt_units
-    ? value + opt_units
-    : value);
+  const styleValue = /** @type {string} */ (
+    opt_units ? value + opt_units : value
+  );
   if (isVar(propertyName)) {
     element.style.setProperty(propertyName, styleValue);
   } else {
@@ -337,11 +339,11 @@ export function removeAlphaFromColor(rgbaColor) {
  *
  * @param {!Window} win
  * @param {!Element} el
- * @return {!Object<string, string>}
+ * @return {!CSSStyleDeclaration}
  */
 export function computedStyle(win, el) {
   const style = /** @type {?CSSStyleDeclaration} */ (win.getComputedStyle(el));
-  return /** @type {!Object<string, string>} */ (style) || map();
+  return style || EMPTY_CSS_DECLARATION;
 }
 
 /**
@@ -375,5 +377,5 @@ export function propagateObjectFitStyles(fromEl, toEl) {
  * @return {boolean}
  */
 function isVar(property) {
-  return startsWith(property, '--');
+  return property.startsWith('--');
 }
diff --git a/src/time.js b/src/time.js
deleted file mode 100644
index 00938bb56e4fc..0000000000000
--- a/src/time.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-/**
- * Absolute time in milliseconds.
- * @typedef {number}
- */
-export let timeDef;
-
-/**
- * Number between 0 and 1 that designates normalized time, as in "from start to
- * end".
- * @typedef {number}
- */
-export let normtimeDef;
diff --git a/src/transition.js b/src/transition.js
index 2d342246b4891..6fd0e64f9f49b 100644
--- a/src/transition.js
+++ b/src/transition.js
@@ -16,7 +16,7 @@
 
 import * as st from './style';
 import {assertNotDisplay, setStyle} from './style';
-import {getCurve} from './curve';
+import {getCurve} from './core/data-structures/curve';
 
 export const NOOP = function (unusedTime) {
   return null;
@@ -62,12 +62,12 @@ export function concat(transitions, opt_delimiter = ' ') {
  * Returns the specified transition with the time curved via specified curve
  * function.
  * @param {!TransitionDef<RESULT>} transition
- * @param {!./curve.CurveDef|string} curve
+ * @param {!./core/data-structures/curve.CurveDef|string} curve
  * @return {!TransitionDef<RESULT>}
  * @template RESULT
  */
 export function withCurve(transition, curve) {
-  /** @const {?./curve.CurveDef} */
+  /** @const {?./core/data-structures/curve.CurveDef} */
   const curveFn = getCurve(curve);
   return (time, complete) => {
     return transition(complete ? 1 : curveFn(time), complete);
diff --git a/src/types.js b/src/types.js
index 06e9f58ccad07..a8644d9d20473 100644
--- a/src/types.js
+++ b/src/types.js
@@ -14,74 +14,6 @@
  * limitations under the License.
  */
 
-/* @const */
-const toString_ = Object.prototype.toString;
-
-/**
- * Returns the ECMA [[Class]] of a value
- * @param {*} value
- * @return {string}
- */
-function toString(value) {
-  return toString_.call(value);
-}
-
-/**
- * Determines if value is actually an Array.
- * @param {*} value
- * @return {boolean}
- */
-export function isArray(value) {
-  return Array.isArray(value);
-}
-
-/**
- * Converts an array-like object to an array.
- * @param {?IArrayLike<T>|string} arrayLike
- * @return {!Array<T>}
- * @template T
- */
-export function toArray(arrayLike) {
-  return arrayLike ? Array.prototype.slice.call(arrayLike) : [];
-}
-
-/**
- * Determines if value is actually an Object.
- * @param {*} value
- * @return {boolean}
- */
-export function isObject(value) {
-  return toString(value) === '[object Object]';
-}
-
-/**
- * Determines if value is of number type and finite.
- * NaN and Infinity are not considered a finite number.
- * String numbers are not considered numbers.
- * @param {*} value
- * @return {boolean}
- */
-export function isFiniteNumber(value) {
-  return typeof value === 'number' && isFinite(value);
-}
-
-/**
- * Checks whether `s` is a valid value of `enumObj`.
- *
- * @param {!Object<T>} enumObj
- * @param {T} s
- * @return {boolean}
- * @template T
- */
-export function isEnumValue(enumObj, s) {
-  for (const k in enumObj) {
-    if (enumObj[k] === s) {
-      return true;
-    }
-  }
-  return false;
-}
-
 /**
  * Externs declare that access `defaultView` from `document` or
  * `ownerDocument` is of type `(Window|null)` but most of our parameter types
@@ -89,7 +21,7 @@ export function isEnumValue(enumObj, s) {
  * null on disconnected documents or old IE.
  * This helper function casts it into just a simple Window return type.
  *
- * @param {!Window|null} winOrNull
+ * @param {?Window} winOrNull
  * @return {!Window}
  */
 export function toWin(winOrNull) {
diff --git a/src/url-parse-query-string.js b/src/url-parse-query-string.js
deleted file mode 100644
index dacb8958171fe..0000000000000
--- a/src/url-parse-query-string.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import {tryDecodeUriComponent_} from './url-try-decode-uri-component';
-
-const regex = /(?:^[#?]?|&)([^=&]+)(?:=([^&]*))?/g;
-
-/**
- * Parses the query string of an URL. This method returns a simple key/value
- * map. If there are duplicate keys the latest value is returned.
- *
- * DO NOT import the function from this file. Instead, import parseQueryString
- * from `src/url.js`.
- *
- * @param {string} queryString
- * @return {!JsonObject}
- */
-export function parseQueryString_(queryString) {
-  const params = /** @type {!JsonObject} */ (Object.create(null));
-  if (!queryString) {
-    return params;
-  }
-
-  let match;
-  while ((match = regex.exec(queryString))) {
-    const name = tryDecodeUriComponent_(match[1], match[1]);
-    const value = match[2]
-      ? tryDecodeUriComponent_(match[2].replace(/\+/g, ' '), match[2])
-      : '';
-    params[name] = value;
-  }
-  return params;
-}
diff --git a/src/url-rewrite.js b/src/url-rewrite.js
index 8c9688c071213..5decd9a355f39 100644
--- a/src/url-rewrite.js
+++ b/src/url-rewrite.js
@@ -22,7 +22,6 @@ import {
   resolveRelativeUrl,
 } from './url';
 import {parseSrcset} from './srcset';
-import {startsWith} from './string';
 import {urls} from './config';
 import {user} from './log';
 
@@ -130,7 +129,7 @@ export function resolveUrlAttr(tagName, attrName, attrValue, windowLocation) {
   const isProxyHost = isProxyOrigin(windowLocation);
   const baseUrl = parseUrlDeprecated(getSourceUrl(windowLocation));
 
-  if (attrName == 'href' && !startsWith(attrValue, '#')) {
+  if (attrName == 'href' && !attrValue.startsWith('#')) {
     return resolveRelativeUrl(attrValue, baseUrl);
   }
 
diff --git a/src/url-try-decode-uri-component.js b/src/url-try-decode-uri-component.js
deleted file mode 100644
index 63c1ded399888..0000000000000
--- a/src/url-try-decode-uri-component.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-/**
- * Tries to decode a URI component, falling back to opt_fallback (or an empty
- * string)
- *
- * DO NOT import the function from this file. Instead, import
- * tryDecodeUriComponent from `src/url.js`.
- *
- * @param {string} component
- * @param {string=} fallback
- * @return {string}
- */
-export function tryDecodeUriComponent_(component, fallback = '') {
-  try {
-    return decodeURIComponent(component);
-  } catch (e) {
-    return fallback;
-  }
-}
diff --git a/src/url.js b/src/url.js
index 9aeb2c301dd6c..e2b84d227dbf8 100644
--- a/src/url.js
+++ b/src/url.js
@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import {LruCache} from './utils/lru-cache';
-import {dict, hasOwn} from './utils/object';
-import {endsWith, startsWith} from './string';
+import {LruCache} from './core/data-structures/lru-cache';
+import {dict, hasOwn} from './core/types/object';
+import {endsWith} from './core/types/string';
 import {getMode} from './mode';
-import {isArray} from './types';
-import {parseQueryString_} from './url-parse-query-string';
-import {tryDecodeUriComponent_} from './url-try-decode-uri-component';
+import {isArray} from './core/types';
+import {parseQueryString} from './core/types/string/url';
 import {urls} from './config';
 import {userAssert} from './log';
 
@@ -36,8 +35,6 @@ const SERVING_TYPE_PREFIX = dict({
   'a': true,
   // Ad
   'ad': true,
-  // Actions viewer
-  'action': true,
 });
 
 /**
@@ -94,15 +91,18 @@ export function getWinOrigin(win) {
  * testing by freezing the object.
  * @param {string} url
  * @param {boolean=} opt_nocache
+ *   Cache is always ignored on ESM builds, see https://go.amp.dev/pr/31594
  * @return {!Location}
  */
 export function parseUrlDeprecated(url, opt_nocache) {
   if (!a) {
     a = /** @type {!HTMLAnchorElement} */ (self.document.createElement('a'));
-    cache = self.__AMP_URL_CACHE || (self.__AMP_URL_CACHE = new LruCache(100));
+    cache = IS_ESM
+      ? null
+      : self.__AMP_URL_CACHE || (self.__AMP_URL_CACHE = new LruCache(100));
   }
 
-  return parseUrlWithA(a, url, opt_nocache ? null : cache);
+  return parseUrlWithA(a, url, IS_ESM || opt_nocache ? null : cache);
 }
 
 /**
@@ -113,10 +113,16 @@ export function parseUrlDeprecated(url, opt_nocache) {
  * @param {!HTMLAnchorElement} a
  * @param {string} url
  * @param {LruCache=} opt_cache
+ *   Cache is always ignored on ESM builds, see https://go.amp.dev/pr/31594
  * @return {!Location}
  * @restricted
  */
 export function parseUrlWithA(a, url, opt_cache) {
+  if (IS_ESM) {
+    a.href = '';
+    return /** @type {?} */ (new URL(url, a.href));
+  }
+
   if (opt_cache && opt_cache.has(url)) {
     return opt_cache.get(url);
   }
@@ -345,20 +351,6 @@ export function assertAbsoluteHttpOrHttpsUrl(urlString) {
   return parseUrlDeprecated(urlString).href;
 }
 
-/**
- * Parses the query string of an URL. This method returns a simple key/value
- * map. If there are duplicate keys the latest value is returned.
- *
- * This function is implemented in a separate file to avoid a circular
- * dependency.
- *
- * @param {string} queryString
- * @return {!JsonObject}
- */
-export function parseQueryString(queryString) {
-  return parseQueryString_(queryString);
-}
-
 /**
  * Returns the URL without fragment. If URL doesn't contain fragment, the same
  * string is returned.
@@ -399,6 +391,14 @@ export function isProxyOrigin(url) {
   return urls.cdnProxyRegex.test(url.origin);
 }
 
+/**
+ * @param {string} uri
+ * @return {boolean}
+ */
+export function isAmpScriptUri(uri) {
+  return uri.startsWith('amp-script:');
+}
+
 /**
  * For proxy-origin URLs, returns the serving type. Otherwise, returns null.
  * E.g., 'https://amp-com.cdn.ampproject.org/a/s/amp.com/amp_document.html'
@@ -570,7 +570,7 @@ export function resolveRelativeUrl(relativeUrlString, baseUrl) {
   if (typeof baseUrl == 'string') {
     baseUrl = parseUrlDeprecated(baseUrl);
   }
-  if (typeof URL == 'function') {
+  if (IS_ESM || typeof URL == 'function') {
     return new URL(relativeUrlString, baseUrl.href).toString();
   }
   return resolveRelativeUrlFallback_(relativeUrlString, baseUrl);
@@ -581,7 +581,7 @@ export function resolveRelativeUrl(relativeUrlString, baseUrl) {
  * @param {string} relativeUrlString
  * @param {string|!Location} baseUrl
  * @return {string}
- * @private Visible for testing.
+ * @private @visibleForTesting
  */
 export function resolveRelativeUrlFallback_(relativeUrlString, baseUrl) {
   if (typeof baseUrl == 'string') {
@@ -591,17 +591,17 @@ export function resolveRelativeUrlFallback_(relativeUrlString, baseUrl) {
   const relativeUrl = parseUrlDeprecated(relativeUrlString);
 
   // Absolute URL.
-  if (startsWith(relativeUrlString.toLowerCase(), relativeUrl.protocol)) {
+  if (relativeUrlString.toLowerCase().startsWith(relativeUrl.protocol)) {
     return relativeUrl.href;
   }
 
   // Protocol-relative URL.
-  if (startsWith(relativeUrlString, '//')) {
+  if (relativeUrlString.startsWith('//')) {
     return baseUrl.protocol + relativeUrlString;
   }
 
   // Absolute path.
-  if (startsWith(relativeUrlString, '/')) {
+  if (relativeUrlString.startsWith('/')) {
     return baseUrl.origin + relativeUrlString;
   }
 
@@ -639,18 +639,6 @@ export function checkCorsUrl(url) {
   );
 }
 
-/**
- * Tries to decode a URI component, falling back to opt_fallback (or an empty
- * string)
- *
- * @param {string} component
- * @param {string=} opt_fallback
- * @return {string}
- */
-export function tryDecodeUriComponent(component, opt_fallback) {
-  return tryDecodeUriComponent_(component, opt_fallback);
-}
-
 /**
  * Adds the path to the given url.
  *
diff --git a/src/utils/array.js b/src/utils/array.js
deleted file mode 100644
index 4f9d44317591a..0000000000000
--- a/src/utils/array.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-/**
- * Compares if two arrays contains exactly same elements of same number
- * of same order. Note that it does NOT handle NaN case as expected.
- *
- * @param {!Array<T>} arr1
- * @param {!Array<T>} arr2
- * @return {boolean}
- * @template T
- */
-export function areEqualOrdered(arr1, arr2) {
-  if (arr1.length !== arr2.length) {
-    return false;
-  }
-  for (let i = 0; i < arr1.length; i++) {
-    if (arr1[i] !== arr2[i]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-/**
- * Removes elements that shouldRemove returns true for from the array.
- *
- * @param {!Array<T>} array
- * @param {function(T, number, !Array<T>):boolean} shouldRemove
- * @return {!Array<T>}
- * @template T
- */
-export function remove(array, shouldRemove) {
-  const removed = [];
-  let index = 0;
-  for (let i = 0; i < array.length; i++) {
-    const item = array[i];
-    if (shouldRemove(item, i, array)) {
-      removed.push(item);
-    } else {
-      if (index < i) {
-        array[index] = item;
-      }
-      index++;
-    }
-  }
-  if (index < array.length) {
-    array.length = index;
-  }
-  return removed;
-}
-
-/**
- * Returns the index of the first element matching the predicate.
- * Like Array#findIndex.
- *
- * @param {!Array<T>} array
- * @param {function(T, number, !Array<T>):boolean} predicate
- * @return {number}
- * @template T
- */
-export function findIndex(array, predicate) {
-  for (let i = 0; i < array.length; i++) {
-    if (predicate(array[i], i, array)) {
-      return i;
-    }
-  }
-  return -1;
-}
-
-/**
- * Converts the given iterator to an array.
- *
- * @param {!Iterator<T>} iterator
- * @return {Array<T>}
- * @template T
- */
-export function fromIterator(iterator) {
-  const array = [];
-  for (let e = iterator.next(); !e.done; e = iterator.next()) {
-    array.push(e.value);
-  }
-  return array;
-}
-
-/**
- * Adds item to array if it is not already present.
- *
- * @param {Array<T>} array
- * @param {T} item
- * @template T
- */
-export function pushIfNotExist(array, item) {
-  if (array.indexOf(item) < 0) {
-    array.push(item);
-  }
-}
-
-/**
- * Returns the last item in an array.
- *
- * @param {Array<T>} array
- * @template T
- * @return {?T}
- */
-export function lastItem(array) {
-  return array[array.length - 1];
-}
diff --git a/src/utils/detached-dom-stream.js b/src/utils/detached-dom-stream.js
deleted file mode 100644
index 63a46cc155c0e..0000000000000
--- a/src/utils/detached-dom-stream.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {devAssert} from '../log';
-
-export class DetachedDomStream {
-  /**
-   * @param {!Window} win
-   * @param {function(!Document):void} onChunk
-   * @param {function(!Document):void} onEnd
-   */
-  constructor(win, onChunk, onEnd) {
-    /** @const @private {function(!Document):void} */
-    this.onChunk_ = onChunk;
-
-    /** @const @private {function(!Document):void} */
-    this.onEnd_ = onEnd;
-
-    /** @const @private {!Document} */
-    this.detachedDoc_ = win.document.implementation.createHTMLDocument('');
-    this.detachedDoc_.open();
-
-    /** @private {boolean} */
-    this.eof_ = false;
-  }
-
-  /**
-   * Write chunk into detached doc, and call given chunk cb.
-   * @public
-   * @param {string} chunk
-   */
-  write(chunk) {
-    devAssert(!this.eof_, 'Detached doc already closed.');
-
-    if (chunk) {
-      this.detachedDoc_.write(chunk);
-    }
-    this.onChunk_(this.detachedDoc_);
-  }
-
-  /**
-   * Called when stream is finished. Close the detached doc, and call cb.
-   * @public
-   */
-  close() {
-    this.eof_ = true;
-    this.detachedDoc_.close();
-    this.onEnd_(this.detachedDoc_);
-  }
-}
diff --git a/src/utils/display-observer.js b/src/utils/display-observer.js
new file mode 100644
index 0000000000000..7a2da1f1841f5
--- /dev/null
+++ b/src/utils/display-observer.js
@@ -0,0 +1,522 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {VisibilityState} from '../core/constants/visibility-state';
+import {containsNotSelf} from '../dom';
+import {getServiceForDoc, registerServiceBuilderForDoc} from '../service';
+import {pushIfNotExist, removeItem} from '../core/types/array';
+import {rethrowAsync} from '../core/error';
+
+const SERVICE_ID = 'DisplayObserver';
+
+const DISPLAY_THRESHOLD = 0.51;
+
+const CUSTOM_CONTAINER_OFFSET = 2;
+
+/**
+ * @typedef {function(boolean, !Element)}
+ */
+let ObserverCallbackDef;
+
+/**
+ * @typedef {{
+ *   container: ?Element,
+ *   root: ?Element,
+ *   contains: function(!Element):boolean,
+ *   io: ?IntersectionObserver,
+ * }}
+ */
+let ObserverDef;
+
+/**
+ * Observes whether the specified target is displayable. The initial observation
+ * is returned shortly after observing, and subsequent observations are
+ * returned when the target's displayable state changes.
+ *
+ * The element is displayable if:
+ * 1. It doesn't have `display: none` style or `hidden` attribute.
+ * 2. It intersects with the main document's scroller by at least 51%. This
+ *    means if the element is offset from the main scroller using
+ *    `translateX(-1000px)`, it's not displayable. Another example, if the
+ *    element is nested inside another scroller and scrolled off the screen.
+ *    However, if an element is inside the main document's scroller, but simply
+ *    not in the viewport, it's considered to be "displayable".
+ *
+ * @param {!Element} target
+ * @param {!ObserverCallbackDef} callback
+ */
+export function observeDisplay(target, callback) {
+  getObserver(target).observe(target, callback);
+}
+
+/**
+ * @param {!Element} target
+ * @param {!ObserverCallbackDef} callback
+ */
+export function unobserveDisplay(target, callback) {
+  getObserver(target).unobserve(target, callback);
+}
+
+/**
+ * @param {!Element} target
+ * @return {!Promise<boolean>}
+ */
+export function measureDisplay(target) {
+  const observer = getObserver(target);
+  return new Promise((resolve) => {
+    const onDisplay = (display) => {
+      resolve(display);
+      observer.unobserve(target, onDisplay);
+    };
+    observer.observe(target, onDisplay);
+  });
+}
+
+/**
+ * Registers the container to provide additional display intersection info
+ * for other targets. Mainly aimed for fixed and/or scrollable containers
+ * that can provide display information in addition to the document flow.
+ *
+ * @param {!Element} container
+ * @param {?Element=} opt_root The subelement inside the container to be
+ * used as an intersection root. If not specified, the container will be
+ * used as an intersection root.
+ */
+export function registerContainer(container, opt_root) {
+  getObserver(container).registerContainer(container, opt_root);
+}
+
+/**
+ * @param {!Element} container
+ */
+export function unregisterContainer(container) {
+  getObserver(container).unregisterContainer(container);
+}
+
+/**
+ * @implements {Disposable}
+ * @visibleForTesting
+ * @package
+ */
+export class DisplayObserver {
+  /**
+   * @param {!AmpDoc} ampdoc
+   */
+  constructor(ampdoc) {
+    /** @private @const */
+    this.ampdoc_ = ampdoc;
+
+    const {win} = ampdoc;
+    const body = ampdoc.getBody();
+
+    this.observed_ = this.observed_.bind(this);
+    this.containerObserved_ = this.containerObserved_.bind(this);
+
+    /** @private @const {!Array<!ObserverDef>} */
+    this.observers_ = [];
+
+    // Viewport observer is only needed because `postion:fixed` elements
+    // are not observable by a documentElement or body's root.
+    this.observers_.push({
+      container: null,
+      root: null,
+      contains: () => true,
+      io: new win.IntersectionObserver(this.observed_, {
+        threshold: DISPLAY_THRESHOLD,
+      }),
+    });
+
+    // Body observer: very close to `display:none` observer.
+    this.observers_.push({
+      container: body,
+      root: body,
+      contains: () => true,
+      io: new win.IntersectionObserver(this.observed_, {
+        root: body,
+        threshold: DISPLAY_THRESHOLD,
+      }),
+    });
+
+    /** @private {boolean} */
+    this.isDocDisplay_ = computeDocIsDisplayed(ampdoc.getVisibilityState());
+
+    /** @private {?UnlistenDef} */
+    this.visibilityUnlisten_ = ampdoc.onVisibilityChanged(() => {
+      const display = computeDocIsDisplayed(ampdoc.getVisibilityState());
+      if (display !== this.isDocDisplay_) {
+        this.isDocDisplay_ = display;
+        this.docVisibilityChanged_();
+      }
+    });
+
+    /** @private @const {!Map<!Element, !Array<!ObserverCallbackDef>>} */
+    this.targetObserverCallbacks_ = new Map();
+
+    /** @private @const {!Map<!Element, !Array<boolean>>} */
+    this.targetObservations_ = new Map();
+  }
+
+  /** @override */
+  dispose() {
+    this.observers_.forEach((observer) => {
+      if (observer.io) {
+        observer.io.disconnect();
+      }
+    });
+    this.observers_.length = 0;
+    this.visibilityUnlisten_();
+    this.visibilityUnlisten_ = null;
+    this.targetObserverCallbacks_.clear();
+    this.targetObservations_.clear();
+  }
+
+  /**
+   * @param {!Element} container
+   * @param {?Element=} opt_root
+   */
+  registerContainer(container, opt_root) {
+    const existing = findObserverByContainer(this.observers_, container);
+    if (existing != -1) {
+      return;
+    }
+
+    /** @type {!ObserverDef} */
+    const observer = {
+      container,
+      root: opt_root || container,
+      contains: (target) => containsNotSelf(container, target),
+      // Start with null as IntersectionObserver. Will be initialized when
+      // the container itself becomes displayed.
+      io: null,
+    };
+    const index = this.observers_.length;
+    this.observers_.push(observer);
+    this.observe(container, this.containerObserved_);
+
+    this.targetObserverCallbacks_.forEach((_, target) => {
+      // Reset observation to `null` and wait for the actual measurement.
+      const value = observer.contains(target) ? null : false;
+      this.setObservation_(target, index, value, /* callbacks */ null);
+    });
+  }
+
+  /**
+   * @param {!Element} container
+   */
+  unregisterContainer(container) {
+    const index = findObserverByContainer(this.observers_, container);
+    if (index < CUSTOM_CONTAINER_OFFSET) {
+      // The container has been unregistered already.
+      return;
+    }
+
+    // Remove observer.
+    const observer = this.observers_[index];
+    this.observers_.splice(index, 1);
+    if (observer.io) {
+      observer.io.disconnect();
+    }
+
+    // Unobserve the container itself.
+    this.unobserve(container, this.containerObserved_);
+
+    // Remove observations.
+    this.targetObserverCallbacks_.forEach((callbacks, target) => {
+      const observations = this.targetObservations_.get(target);
+      if (!observations || observations.length <= index) {
+        return;
+      }
+      const oldDisplay = computeDisplay(observations, this.isDocDisplay_);
+      observations.splice(index, 1);
+      const newDisplay = computeDisplay(observations, this.isDocDisplay_);
+      notifyIfChanged(callbacks, target, newDisplay, oldDisplay);
+    });
+  }
+
+  /**
+   * @param {!Element} target
+   * @param {!ObserverCallbackDef} callback
+   */
+  observe(target, callback) {
+    let callbacks = this.targetObserverCallbacks_.get(target);
+    if (!callbacks) {
+      callbacks = [];
+      this.targetObserverCallbacks_.set(target, callbacks);
+
+      // Subscribe observers.
+      for (let i = 0; i < this.observers_.length; i++) {
+        const observer = this.observers_[i];
+        if (observer.io && observer.contains(target)) {
+          // Reset observation to `null` and wait for the actual measurement.
+          this.setObservation_(target, i, null, /* callbacks */ null);
+          observer.io.observe(target);
+        } else {
+          // The `false` value will essentially ignore this observe when
+          // computing the display value.
+          this.setObservation_(target, i, false, /* callbacks */ null);
+        }
+      }
+    }
+    if (pushIfNotExist(callbacks, callback)) {
+      if (this.targetObservations_.has(target)) {
+        // Notify the existing observation immediately.
+        setTimeout(() => {
+          const display = computeDisplay(
+            this.targetObservations_.get(target),
+            this.isDocDisplay_
+          );
+          if (display != null) {
+            callCallbackNoInline(callback, target, display);
+          }
+        });
+      }
+    }
+  }
+
+  /**
+   * @param {!Element} target
+   * @param {!ObserverCallbackDef} callback
+   */
+  unobserve(target, callback) {
+    const callbacks = this.targetObserverCallbacks_.get(target);
+    if (!callbacks) {
+      return;
+    }
+    removeItem(callbacks, callback);
+    if (callbacks.length == 0) {
+      this.targetObserverCallbacks_.delete(target);
+      this.targetObservations_.delete(target);
+      for (let i = 0; i < this.observers_.length; i++) {
+        const observer = this.observers_[i];
+        if (observer.io) {
+          observer.io.unobserve(target);
+        }
+      }
+    }
+  }
+
+  /** @private */
+  docVisibilityChanged_() {
+    this.targetObserverCallbacks_.forEach((callbacks, target) => {
+      const observations = this.targetObservations_.get(target);
+      const oldDisplay = computeDisplay(observations, !this.isDocDisplay_);
+      const newDisplay = computeDisplay(observations, this.isDocDisplay_);
+      notifyIfChanged(callbacks, target, newDisplay, oldDisplay);
+    });
+  }
+
+  /**
+   * @param {boolean} isDisplayed
+   * @param {!Element} container
+   * @private
+   */
+  containerObserved_(isDisplayed, container) {
+    const index = findObserverByContainer(this.observers_, container);
+    if (index < CUSTOM_CONTAINER_OFFSET) {
+      // The container has been unregistered already.
+      return;
+    }
+
+    const observer = this.observers_[index];
+    if (isDisplayed && observer.io) {
+      // Has already been initialized.
+      return;
+    }
+
+    if (isDisplayed) {
+      const {win} = this.ampdoc_;
+      observer.io = new win.IntersectionObserver(this.observed_, {
+        root: observer.root,
+        threshold: DISPLAY_THRESHOLD,
+      });
+    } else if (observer.io) {
+      observer.io.disconnect();
+      observer.io = null;
+    }
+
+    this.targetObserverCallbacks_.forEach((callbacks, target) => {
+      if (observer.io && observer.contains(target)) {
+        // Reset observation to `null` and wait for the actual measurement.
+        this.setObservation_(target, index, null, callbacks);
+        observer.io.observe(target);
+      } else {
+        this.setObservation_(target, index, false, callbacks);
+      }
+    });
+  }
+
+  /**
+   * @param {!Array<!IntersectionObserverEntry>} entries
+   * @param {!IntersectionObserver} io
+   * @private
+   */
+  observed_(entries, io) {
+    const seen = new Set();
+    for (let i = entries.length - 1; i >= 0; i--) {
+      const {isIntersecting, target} = entries[i];
+      if (seen.has(target)) {
+        continue;
+      }
+      seen.add(target);
+      const callbacks = this.targetObserverCallbacks_.get(target);
+      const index = findObserverByIo(this.observers_, io);
+      if (!callbacks || index == -1) {
+        continue;
+      }
+      this.setObservation_(target, index, isIntersecting, callbacks);
+    }
+  }
+
+  /**
+   * @param {!Element} target
+   * @param {number} index
+   * @param {?boolean} value
+   * @param {?Array<!ObserverCallbackDef>} callbacks
+   * @private
+   */
+  setObservation_(target, index, value, callbacks) {
+    let observations = this.targetObservations_.get(target);
+    if (!observations) {
+      const observers = this.observers_;
+      observations = new Array(observers.length);
+      for (let i = 0; i < observers.length; i++) {
+        observations[i] = observers[i].io ? null : false;
+      }
+      this.targetObservations_.set(target, observations);
+    }
+
+    if (callbacks) {
+      const oldDisplay = computeDisplay(observations, this.isDocDisplay_);
+      observations[index] = value;
+      const newDisplay = computeDisplay(observations, this.isDocDisplay_);
+      notifyIfChanged(callbacks, target, newDisplay, oldDisplay);
+    } else {
+      observations[index] = value;
+    }
+  }
+}
+
+/**
+ * @param {!Element} target
+ * @return {!DisplayObserver}
+ */
+function getObserver(target) {
+  registerServiceBuilderForDoc(target, SERVICE_ID, DisplayObserver);
+  return /** @type {!DisplayObserver} */ (getServiceForDoc(target, SERVICE_ID));
+}
+
+/**
+ * @param {?Array<boolean>} observations
+ * @param {boolean} isDocDisplay
+ * @return {?boolean}
+ */
+function computeDisplay(observations, isDocDisplay) {
+  if (!isDocDisplay) {
+    return false;
+  }
+  if (!observations || observations.length == 0) {
+    // Unknown yet.
+    return null;
+  }
+  return observations.reduce(displayReducer);
+}
+
+/**
+ * @param {!VisibilityState} visibilityState
+ * @return {boolean}
+ */
+function computeDocIsDisplayed(visibilityState) {
+  return (
+    visibilityState == VisibilityState.VISIBLE ||
+    // The document is still considered "displayed" or at least "displayable"
+    // when it's hidden (tab is switched). Only prerender/paused/inactive
+    // states require pause of resources.
+    visibilityState == VisibilityState.HIDDEN
+  );
+}
+
+/**
+ * @param {?boolean} acc
+ * @param {?boolean|undefined} value
+ * @return {?boolean}
+ */
+function displayReducer(acc, value) {
+  if (acc || value) {
+    // OR condition: one true - the result is true.
+    return true;
+  }
+  if (acc === false && value === false) {
+    // Reverse of OR: both must be false for the result to be false.
+    return false;
+  }
+  // Unknown.
+  return null;
+}
+
+/**
+ * @param {!Array<!ObserverDef>} observers
+ * @param {!IntersectionObserver} io
+ * @return {number}
+ */
+function findObserverByIo(observers, io) {
+  for (let i = 0; i < observers.length; i++) {
+    if (observers[i].io === io) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+/**
+ * @param {!Array<!ObserverDef>} observers
+ * @param {!Element} container
+ * @return {number}
+ */
+function findObserverByContainer(observers, container) {
+  for (let i = 0; i < observers.length; i++) {
+    if (observers[i].container === container) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+/**
+ * @param {!Array<function(boolean)>} callbacks
+ * @param {!Element} target
+ * @param {boolean} newDisplay
+ * @param {boolean} oldDisplay
+ */
+function notifyIfChanged(callbacks, target, newDisplay, oldDisplay) {
+  if (newDisplay != null && newDisplay !== oldDisplay) {
+    for (let i = 0; i < callbacks.length; i++) {
+      callCallbackNoInline(callbacks[i], target, newDisplay);
+    }
+  }
+}
+
+/**
+ * @param {!ObserverCallbackDef} callback
+ * @param {!Element} target
+ * @param {boolean} isDisplayed
+ */
+function callCallbackNoInline(callback, target, isDisplayed) {
+  try {
+    callback(isDisplayed, target);
+  } catch (e) {
+    rethrowAsync(e);
+  }
+}
diff --git a/src/utils/document-visibility.js b/src/utils/document-visibility.js
index 75af13fbe0d22..0b356543d3dfa 100644
--- a/src/utils/document-visibility.js
+++ b/src/utils/document-visibility.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {VisibilityState} from '../visibility-state';
+import {VisibilityState} from '../core/constants/visibility-state';
 import {getVendorJsPropertyName} from '../style';
 
 /**
diff --git a/src/utils/dom-ancestor-visitor.js b/src/utils/dom-ancestor-visitor.js
index 5ed27bef95555..48a245c9e0631 100644
--- a/src/utils/dom-ancestor-visitor.js
+++ b/src/utils/dom-ancestor-visitor.js
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 import {computedStyle} from '../style';
-import {dev, devAssert} from '../log';
+import {dev} from '../log';
+import {devAssert, devAssertElement} from '../core/assert/dev';
 
 /** @typedef {
  *    function(!Element, !Object<string, string>): *
@@ -79,7 +80,7 @@ export class DomAncestorVisitor {
     while (el && (visitors = this.getActiveVisitors_()).length) {
       const style = computedStyle(this.win_, el);
       visitors.forEach((visitor) =>
-        visitor.callback(dev().assertElement(el), style)
+        visitor.callback(devAssertElement(el), style)
       );
       el = el.parentElement;
     }
diff --git a/src/utils/dom-fingerprint.js b/src/utils/dom-fingerprint.js
deleted file mode 100644
index 03eeab0fd56cd..0000000000000
--- a/src/utils/dom-fingerprint.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {stringHash32} from '../string';
-
-/**
- * Gets a string of concatenated element names and relative positions
- * of the DOM element and its parentElement's (up to 25).  Relative position
- * is the index of nodes with this tag within the parent's children.
- * The order is from the inner to outer nodes in DOM hierarchy.
- *
- * If a DOM hierarchy is the following:
- *
- * <div id='id1' ...>
- *   <div id='id2' ...>
- *     <table ...>       // table:0
- *       <tr>            // tr:0
- *         <td>...</td>  // td:0
- *         <td>          // td:1
- *           <amp-ad ...></amp-ad>
- *         </td>
- *       </tr>
- *       <tr>...</tr>    // tr:1
- *     </table>
- *   </div>
- * </div>
- *
- * With the amp-ad element passed in:
- * 'amp-ad.0,td.1,tr.0,table.0,div/id2.0,div/id1.0'
- *
- * Note: 25 is chosen arbitrarily.
- *
- * @param {?Element} element DOM node from which to get fingerprint.
- * @return {string} Concatenated element ids.
- */
-export function domFingerprintPlain(element) {
-  const ids = [];
-  let level = 0;
-  while (element && element.nodeType == /* element */ 1 && level < 25) {
-    let id = '';
-    if (element.id) {
-      id = `/${element.id}`;
-    }
-    const nodeName = element.nodeName.toLowerCase();
-    ids.push(`${nodeName}${id}${indexWithinParent(element)}`);
-    level++;
-    element = element.parentElement;
-  }
-  return ids.join();
-}
-
-export class DomFingerprint {
-  /**
-   * Calculates ad slot DOM fingerprint.  This key is intended to
-   * identify "same" ad unit across many page views. This is
-   * based on where the ad appears within the page's DOM structure.
-   *
-   * @param {?Element} element The DOM element from which to collect
-   *     the DOM chain element IDs.  If null, DOM chain element IDs are not
-   *     included in the hash.
-   * @return {string} The ad unit hash key string.
-   */
-  static generate(element) {
-    return stringHash32(domFingerprintPlain(element));
-  }
-}
-
-/**
- * Gets a string showing the index of an element within
- * the children of its parent, counting only nodes with the same tag.
- * Stop at 25, just to have a limit.
- * @param {!Element} element DOM node to get index of.
- * @return {string} '.<index>' or ''.
- */
-function indexWithinParent(element) {
-  const {nodeName} = element;
-  // Find my index within my parent's children
-  let i = 0;
-  let count = 0;
-  let sibling = element.previousElementSibling;
-  // Different browsers have different children.
-  // So count only nodes with the same tag.
-  // Use a limit for the tags, so that different browsers get the same
-  // count. So 25 and higher all return no index.
-  while (sibling && count < 25 && i < 100) {
-    if (sibling.nodeName == nodeName) {
-      count++;
-    }
-    i++;
-    sibling = sibling.previousElementSibling;
-  }
-  // If we got to the end, then the count is accurate; otherwise skip count.
-  return count < 25 && i < 100 ? `.${count}` : '';
-}
diff --git a/src/utils/dom-tranform-stream.js b/src/utils/dom-tranform-stream.js
index db2f6d011fe77..e398a97349135 100644
--- a/src/utils/dom-tranform-stream.js
+++ b/src/utils/dom-tranform-stream.js
@@ -14,35 +14,55 @@
  * limitations under the License.
  */
 
-import {Deferred} from './promise';
-import {Services} from '../services';
-import {dev, devAssert} from '../log';
+import {Deferred} from '../core/data-structures/promise';
+import {devAssert, devAssertElement} from '../core/assert/dev';
 import {removeNoScriptElements} from './dom-writer';
 
+/**
+ * @param {!Function} cb
+ * @return {!Promise}
+ */
+const DEFAULT_TRANSFER_THROTTLE_FUNC = (cb) => Promise.resolve(cb());
+
 export class DomTransformStream {
   /**
    * @param {!Window} win
+   * @param {(function(!Function):!Promise)=} opt_transferThrottleFunc
    */
-  constructor(win) {
+  constructor(win, opt_transferThrottleFunc) {
     const headDefer = new Deferred();
-    /** @const @private {!Promise<!Element>} */
+    /**
+     * Resolves when head has been written to in memory document.
+     * @const @private {!Promise<!Element>}
+     */
     this.headPromise_ = headDefer.promise;
 
-    /** @const @private {!function()} */
+    /** @const @private {!function(!Element)} */
     this.headResolver_ = headDefer.resolve;
 
     const transferDefer = new Deferred();
-    /** @const @private {!Promise} */
+    /**
+     * Resovles when complete doc has been transfered to the target
+     * body.
+     * @const @private {!Promise}
+     */
     this.bodyTransferPromise_ = transferDefer.promise;
 
-    /** @const @private {!function()} */
+    /** @const @private {!function(!Promise)} */
     this.bodyTransferResolver_ = transferDefer.resolve;
 
     /** @private {?Element} */
     this.detachedBody_ = null;
 
-    /** @private {?Element} */
-    this.targetBody_ = null;
+    const targetBodyDefer = new Deferred();
+    /**
+     * Resolves when target body is ready to receive elements.
+     * @private {!Promise<!Element>}
+     */
+    this.targetBodyPromise_ = targetBodyDefer.promise;
+
+    /** @const @private {!function(!Element)} */
+    this.targetBodyResolver_ = targetBodyDefer.resolve;
 
     /** @private {?Promise} */
     this.currentChunkTransferPromise_ = null;
@@ -50,8 +70,9 @@ export class DomTransformStream {
     /** @private {boolean} */
     this.shouldTransfer_ = false;
 
-    /** @const @private */
-    this.vsync_ = Services.vsyncFor(win);
+    /** @private @const */
+    this.transferThrottle_ =
+      opt_transferThrottleFunc || DEFAULT_TRANSFER_THROTTLE_FUNC;
   }
 
   /**
@@ -65,7 +86,7 @@ export class DomTransformStream {
     // <body> is newly formed.
     if (!this.detachedBody_ && detachedDoc.body) {
       this.detachedBody_ = detachedDoc.body;
-      this.headResolver_(detachedDoc.head);
+      this.headResolver_(devAssertElement(detachedDoc.head));
     }
 
     // If bodyTransfer has already been called, keep transferring on new chunks.
@@ -98,7 +119,7 @@ export class DomTransformStream {
    * @return {!Promise} resolves when doc has been fully transferred.
    */
   transferBody(targetBody) {
-    dev().assertElement(
+    devAssertElement(
       targetBody,
       'No target body given to DomTransformStream.transferBody'
     );
@@ -109,7 +130,15 @@ export class DomTransformStream {
     );
 
     this.shouldTransfer_ = true;
-    this.targetBody_ = targetBody;
+    this.targetBodyResolver_(targetBody);
+
+    this.headPromise_.then(() => {
+      const attrs = this.detachedBody_.attributes;
+      for (let i = 0; i < attrs.length; i++) {
+        const {name, value} = attrs[i];
+        targetBody.setAttribute(name, value);
+      }
+    });
 
     this.transferBodyChunk_();
 
@@ -125,15 +154,20 @@ export class DomTransformStream {
       return this.currentChunkTransferPromise_;
     }
 
-    this.currentChunkTransferPromise_ = this.headPromise_.then(() =>
-      this.vsync_.mutatePromise(() => {
+    this.currentChunkTransferPromise_ = Promise.all([
+      this.targetBodyPromise_,
+      this.headPromise_,
+    ]).then((resolvedElements) => {
+      const transferThrottle = this.transferThrottle_;
+      return transferThrottle(() => {
         this.currentChunkTransferPromise_ = null;
-        removeNoScriptElements(this.detachedBody_);
+        const targetBody = resolvedElements[0];
+        removeNoScriptElements(devAssertElement(this.detachedBody_));
         while (this.detachedBody_.firstChild) {
-          this.targetBody_.appendChild(this.detachedBody_.firstChild);
+          targetBody.appendChild(this.detachedBody_.firstChild);
         }
-      })
-    );
+      });
+    });
 
     return this.currentChunkTransferPromise_;
   }
diff --git a/src/utils/dom-writer.js b/src/utils/dom-writer.js
index 41a78dcd646b4..acbb35604cf47 100644
--- a/src/utils/dom-writer.js
+++ b/src/utils/dom-writer.js
@@ -16,7 +16,8 @@
 
 import {Services} from '../services';
 import {childElementsByTag, iterateCursor, removeElement} from '../dom';
-import {dev, devAssert} from '../log';
+import {dev} from '../log';
+import {devAssert} from '../core/assert';
 
 /**
  * Takes as an input a text stream, parses it and incrementally reconstructs
diff --git a/src/utils/function.js b/src/utils/function.js
deleted file mode 100644
index ee1b28ab9a6ee..0000000000000
--- a/src/utils/function.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-// TODO(rsimha, #15334): Enable this rule.
-/* eslint jsdoc/check-types: 0 */
-
-/**
- * Creates a function that is evaluated only once and returns the cached result
- * subsequently.
- *
- * Please note that `once` only takes the function definition into account,
- * so it will return the same cached value even when the arguments are
- * different.
- *
- * @param {function(...):T} fn
- * @return {function(...):T}
- * @template T
- */
-export function once(fn) {
-  let evaluated = false;
-  let retValue = null;
-  let callback = fn;
-  return (...args) => {
-    if (!evaluated) {
-      retValue = callback.apply(self, args);
-      evaluated = true;
-      callback = null; // GC
-    }
-    return retValue;
-  };
-}
diff --git a/src/utils/img.js b/src/utils/img.js
index 2148ee08ce8ea..67020bb036e4f 100644
--- a/src/utils/img.js
+++ b/src/utils/img.js
@@ -31,3 +31,24 @@ export function guaranteeSrcForSrcsetUnsupportedBrowsers(img) {
     img.setAttribute('src', srcseturl);
   }
 }
+
+/**
+ * Generates a transparent PNG of a given width/height.
+ *
+ * @param {!Document} doc
+ * @param {number} width
+ * @param {number} height
+ * @return {string}
+ */
+export function transparentPng(doc, width, height) {
+  const canvas = /** @type {!HTMLCanvasElement} */ (
+    doc.createElement('canvas')
+  );
+  canvas.width = width;
+  canvas.height = height;
+
+  // Canvases are fully transparent by default, so we don't actually need to
+  // draw anything.
+
+  return canvas.toDataURL();
+}
diff --git a/src/utils/intersection-no-root.js b/src/utils/intersection-no-root.js
new file mode 100644
index 0000000000000..4ec6b0cd27b6b
--- /dev/null
+++ b/src/utils/intersection-no-root.js
@@ -0,0 +1,91 @@
+/**
+ * Copyright 2020 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.
+ */
+import {Deferred} from '../core/data-structures/promise';
+import {createViewportObserver} from '../viewport-observer';
+import {toWin} from '../types';
+
+/**
+ * @fileoverview
+ * This utility is similar to the `src/utils/intersection`, but it doesn't
+ * require the `rootBounds` and thus can use a simpler version of the
+ * intersection observer that's supported natively on more platforms.
+ *
+ * TODO(#33678): Dedupe intersection measurement utils once the native
+ * support is better.
+ */
+
+/** @type {WeakMap<!Element, Deferred>} */
+let intersectionDeferreds;
+
+/** @type {WeakMap<!Window, IntersectionObserver>} */
+let intersectionObservers;
+
+/**
+ * @param {!Window} win
+ * @return {!IntersectionObserver}
+ */
+function getInOb(win) {
+  if (!intersectionDeferreds) {
+    intersectionDeferreds = new WeakMap();
+    intersectionObservers = new WeakMap();
+  }
+
+  let observer = intersectionObservers.get(win);
+  if (!observer) {
+    observer = createViewportObserver(
+      (entries) => {
+        const seen = new Set();
+        for (let i = entries.length - 1; i >= 0; i--) {
+          const {target} = entries[i];
+          if (seen.has(target)) {
+            continue;
+          }
+          seen.add(target);
+
+          observer.unobserve(target);
+          intersectionDeferreds.get(target).resolve(entries[i]);
+          intersectionDeferreds.delete(target);
+        }
+      },
+      win,
+      {needsRootBounds: false}
+    );
+    intersectionObservers.set(win, observer);
+  }
+  return observer;
+}
+
+/**
+ * Returns a promise that resolves with the intersection entry for the given element.
+ *
+ * If multiple measures for the same element occur very quickly, they will
+ * dedupe to the same promise.
+ *
+ * @param {!Element} el
+ * @return {!Promise<IntersectionObserverEntry>}
+ */
+export function measureIntersectionNoRoot(el) {
+  if (intersectionDeferreds && intersectionDeferreds.has(el)) {
+    return intersectionDeferreds.get(el).promise;
+  }
+
+  const inOb = getInOb(toWin(el.ownerDocument.defaultView));
+  inOb.observe(el);
+
+  const deferred = new Deferred();
+  intersectionDeferreds.set(el, deferred);
+  return deferred.promise;
+}
diff --git a/src/utils/intersection-observer-3p-host.js b/src/utils/intersection-observer-3p-host.js
new file mode 100644
index 0000000000000..a86e550c7a42d
--- /dev/null
+++ b/src/utils/intersection-observer-3p-host.js
@@ -0,0 +1,212 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {MessageType} from '../3p-frame-messaging';
+import {SubscriptionApi} from '../iframe-helper';
+import {dict} from '../core/types/object';
+import {
+  layoutRectLtwh,
+  moveLayoutRect,
+  rectIntersection,
+} from '../core/math/layout-rect';
+
+/**
+ * The structure that defines the rectangle used in intersection observers.
+ *
+ * @typedef {{
+ *   top: number,
+ *   bottom: number,
+ *   left: number,
+ *   right: number,
+ *   width: number,
+ *   height: number,
+ *   x: number,
+ *   y: number,
+ * }}
+ */
+export let DOMRect;
+
+export const DEFAULT_THRESHOLD = [
+  0, 0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65,
+  0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1,
+];
+
+/** @typedef {{
+ *    element: !Element,
+ *    currentThresholdSlot: number,
+ *  }}
+ */
+let ElementIntersectionStateDef;
+
+/** @const @private */
+const INIT_TIME = Date.now();
+
+/**
+ * A function to get the element's current IntersectionObserverEntry
+ * regardless of the intersetion ratio. Only available when element is not
+ * nested in a container iframe.
+ * @param {!../layout-rect.LayoutRectDef} element element's rect
+ * @param {?../layout-rect.LayoutRectDef} owner element's owner rect
+ * @param {!../layout-rect.LayoutRectDef} hostViewport hostViewport's rect
+ * @return {!IntersectionObserverEntry} A change entry.
+ */
+export function getIntersectionChangeEntry(element, owner, hostViewport) {
+  const intersection =
+    rectIntersection(element, owner, hostViewport) ||
+    layoutRectLtwh(0, 0, 0, 0);
+  const ratio = intersectionRatio(intersection, element);
+  return calculateChangeEntry(element, hostViewport, intersection, ratio);
+}
+
+/**
+ * A class to help amp-iframe and amp-ad nested iframe listen to intersection
+ * change.
+ */
+export class IntersectionObserver3pHost {
+  /**
+   * @param {!AMP.BaseElement} baseElement
+   * @param {!Element} iframe
+   */
+  constructor(baseElement, iframe) {
+    /** @private @const {!AMP.BaseElement} */
+    this.baseElement_ = baseElement;
+
+    /** @private {?IntersectionObserver} */
+    this.intersectionObserver_ = null;
+
+    /** @private {?SubscriptionApi} */
+    this.subscriptionApi_ = new SubscriptionApi(
+      iframe,
+      MessageType.SEND_INTERSECTIONS,
+      false, // is3P
+      () => {
+        this.startSendingIntersection_();
+      }
+    );
+
+    this.intersectionObserver_ = new IntersectionObserver(
+      (entries) => {
+        this.subscriptionApi_.send(
+          MessageType.INTERSECTION,
+          dict({'changes': entries.map(cloneEntryForCrossOrigin)})
+        );
+      },
+      {threshold: DEFAULT_THRESHOLD}
+    );
+  }
+
+  /**
+   * Function to start listening to viewport event. and observer intersection
+   * change on the element.
+   */
+  startSendingIntersection_() {
+    this.intersectionObserver_.observe(this.baseElement_.element);
+  }
+
+  /**
+   * Clean all listenrs
+   */
+  destroy() {
+    this.intersectionObserver_.disconnect();
+    this.intersectionObserver_ = null;
+    this.subscriptionApi_.destroy();
+    this.subscriptionApi_ = null;
+  }
+}
+
+/**
+ * Returns the ratio of the smaller box's area to the larger box's area.
+ * @param {!../layout-rect.LayoutRectDef} smaller
+ * @param {!../layout-rect.LayoutRectDef} larger
+ * @return {number}
+ * @visibleForTesting
+ */
+export function intersectionRatio(smaller, larger) {
+  const smallerBoxArea = smaller.width * smaller.height;
+  const largerBoxArea = larger.width * larger.height;
+
+  // Check for a divide by zero
+  return largerBoxArea === 0 ? 0 : smallerBoxArea / largerBoxArea;
+}
+
+/**
+ * Helper function to calculate the IntersectionObserver change entry.
+ * @param {!../layout-rect.LayoutRectDef} element element's rect
+ * @param {?../layout-rect.LayoutRectDef} hostViewport hostViewport's rect
+ * @param {!../layout-rect.LayoutRectDef} intersection
+ * @param {number} ratio
+ * @return {!IntersectionObserverEntry}}
+ */
+function calculateChangeEntry(element, hostViewport, intersection, ratio) {
+  // If element not in an iframe.
+  // adjust all LayoutRect to hostViewport Origin.
+  let boundingClientRect = element;
+  let rootBounds = hostViewport;
+  // If no hostViewport is provided, element is inside an non-scrollable iframe.
+  // Every Layoutrect has already adjust their origin according to iframe
+  // rect origin. LayoutRect position is relative to iframe origin,
+  // thus relative to iframe's viewport origin because the viewport is at the
+  // iframe origin. No need to adjust position here.
+
+  if (hostViewport) {
+    // If element not in an iframe.
+    // adjust all LayoutRect to hostViewport Origin.
+    rootBounds = /** @type {!../layout-rect.LayoutRectDef} */ (rootBounds);
+    intersection = moveLayoutRect(
+      intersection,
+      -hostViewport.left,
+      -hostViewport.top
+    );
+    // The element is relative to (0, 0), while the viewport moves. So, we must
+    // adjust.
+    boundingClientRect = moveLayoutRect(
+      boundingClientRect,
+      -hostViewport.left,
+      -hostViewport.top
+    );
+    // Now, move the viewport to (0, 0)
+    rootBounds = moveLayoutRect(
+      rootBounds,
+      -hostViewport.left,
+      -hostViewport.top
+    );
+  }
+
+  return /** @type {!IntersectionObserverEntry} */ ({
+    time:
+      typeof performance !== 'undefined' && performance.now
+        ? performance.now()
+        : Date.now() - INIT_TIME,
+    rootBounds,
+    boundingClientRect,
+    intersectionRect: intersection,
+    intersectionRatio: ratio,
+  });
+}
+
+/**
+ * @param {!IntersectionObserverEntry} entry
+ * @return {!IntersectionObserverEntry}
+ */
+function cloneEntryForCrossOrigin(entry) {
+  return /** @type {!IntersectionObserverEntry} */ ({
+    'time': entry.time,
+    'rootBounds': entry.rootBounds,
+    'boundingClientRect': entry.boundingClientRect,
+    'intersectionRect': entry.intersectionRect,
+    'intersectionRatio': entry.intersectionRatio,
+  });
+}
diff --git a/src/utils/intersection-observer-polyfill.js b/src/utils/intersection-observer-polyfill.js
deleted file mode 100644
index 6113a5333daef..0000000000000
--- a/src/utils/intersection-observer-polyfill.js
+++ /dev/null
@@ -1,584 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-// TODO(#27807): Remove polyfill part InOb polyfill has been launched. But the
-// host part has to stay.
-
-import {Pass} from '../pass';
-import {Services} from '../services';
-import {SubscriptionApi} from '../iframe-helper';
-import {dev, devAssert} from '../log';
-import {dict} from './object';
-import {getMode} from '../mode';
-import {isArray, isFiniteNumber} from '../types';
-import {layoutRectLtwh, moveLayoutRect, rectIntersection} from '../layout-rect';
-
-/**
- * The structure that defines the rectangle used in intersection observers.
- *
- * @typedef {{
- *   top: number,
- *   bottom: number,
- *   left: number,
- *   right: number,
- *   width: number,
- *   height: number,
- *   x: number,
- *   y: number,
- * }}
- */
-export let DOMRect;
-
-export const DEFAULT_THRESHOLD = [
-  0,
-  0.05,
-  0.1,
-  0.15,
-  0.2,
-  0.25,
-  0.3,
-  0.35,
-  0.4,
-  0.45,
-  0.5,
-  0.55,
-  0.6,
-  0.65,
-  0.7,
-  0.75,
-  0.8,
-  0.85,
-  0.9,
-  0.95,
-  1,
-];
-
-/** @typedef {{
- *    element: !Element,
- *    currentThresholdSlot: number,
- *  }}
- */
-let ElementIntersectionStateDef;
-
-/** @const @private */
-const TAG = 'INTERSECTION-OBSERVER';
-
-/** @const @private */
-const INIT_TIME = Date.now();
-
-/**
- * A function to get the element's current IntersectionObserverEntry
- * regardless of the intersetion ratio. Only available when element is not
- * nested in a container iframe.
- * @param {!../layout-rect.LayoutRectDef} element element's rect
- * @param {?../layout-rect.LayoutRectDef} owner element's owner rect
- * @param {!../layout-rect.LayoutRectDef} hostViewport hostViewport's rect
- * @return {!IntersectionObserverEntry} A change entry.
- */
-export function getIntersectionChangeEntry(element, owner, hostViewport) {
-  const intersection =
-    rectIntersection(element, owner, hostViewport) ||
-    layoutRectLtwh(0, 0, 0, 0);
-  const ratio = intersectionRatio(intersection, element);
-  return calculateChangeEntry(element, hostViewport, intersection, ratio);
-}
-
-/**
- * @param {!Window} win
- * @return {boolean}
- */
-export function nativeIntersectionObserverSupported(win) {
-  if (!('IntersectionObserver' in win)) {
-    return false;
-  }
-  if (
-    // The polyfill experiment is launched on inabox separately. This class
-    // is not used anywhere except inabox and thus only one experiment
-    // constant is used to avoid an accidental launch when we ramp it up
-    // in AMP-mode.
-    // eslint-disable-next-line no-undef
-    INTERSECTION_OBSERVER_POLYFILL_INABOX ||
-    getMode().localDev ||
-    getMode().test
-  ) {
-    // For the new stub polyfill it's enough to have a stub to be functional.
-    return true;
-  }
-  return (
-    'IntersectionObserverEntry' in win &&
-    'intersectionRatio' in win.IntersectionObserverEntry.prototype
-  );
-}
-
-/**
- * A class to help amp-iframe and amp-ad nested iframe listen to intersection
- * change.
- */
-export class IntersectionObserverHostApi {
-  /**
-   * @param {!AMP.BaseElement} baseElement
-   * @param {!Element} iframe
-   * @param {boolean=} opt_is3p
-   */
-  constructor(baseElement, iframe, opt_is3p) {
-    /** @private @const {!AMP.BaseElement} */
-    this.baseElement_ = baseElement;
-
-    /** @private {?IntersectionObserverPolyfill} */
-    this.intersectionObserver_ = null;
-
-    /** @private {boolean} */
-    this.shouldObserve_ = false;
-
-    /** @private {boolean} */
-    this.isInViewport_ = false;
-
-    /** @private {?function()} */
-    this.unlistenOnDestroy_ = null;
-
-    /** @private {!../service/viewport/viewport-interface.ViewportInterface} */
-    this.viewport_ = baseElement.getViewport();
-
-    /** @private {?SubscriptionApi} */
-    this.subscriptionApi_ = new SubscriptionApi(
-      iframe,
-      'send-intersections',
-      opt_is3p || false,
-      () => {
-        this.startSendingIntersection_();
-      }
-    );
-
-    this.intersectionObserver_ = new IntersectionObserverPolyfill(
-      (entries) => {
-        // Remove target info from cross origin iframe.
-        for (let i = 0; i < entries.length; i++) {
-          delete entries[i]['target'];
-        }
-        this.subscriptionApi_.send('intersection', dict({'changes': entries}));
-      },
-      {threshold: DEFAULT_THRESHOLD}
-    );
-    this.intersectionObserver_.tick(this.viewport_.getRect());
-
-    /** @const {function()} */
-    this.fire = () => {
-      if (!this.shouldObserve_ || !this.isInViewport_) {
-        return;
-      }
-      this.intersectionObserver_.tick(this.viewport_.getRect());
-    };
-  }
-
-  /**
-   * Function to start listening to viewport event. and observer intersection
-   * change on the element.
-   */
-  startSendingIntersection_() {
-    this.shouldObserve_ = true;
-    this.intersectionObserver_.observe(this.baseElement_.element);
-    this.baseElement_.getVsync().measure(() => {
-      this.isInViewport_ = this.baseElement_.isInViewport();
-      this.fire();
-    });
-
-    const unlistenViewportScroll = this.viewport_.onScroll(this.fire);
-    const unlistenViewportChange = this.viewport_.onChanged(this.fire);
-    this.unlistenOnDestroy_ = () => {
-      unlistenViewportScroll();
-      unlistenViewportChange();
-    };
-  }
-
-  /**
-   * Enable to the PositionObserver to listen to viewport events
-   * @param {boolean} inViewport
-   */
-  onViewportCallback(inViewport) {
-    this.isInViewport_ = inViewport;
-  }
-
-  /**
-   * Clean all listenrs
-   */
-  destroy() {
-    this.shouldObserve_ = false;
-    this.intersectionObserver_.disconnect();
-    this.intersectionObserver_ = null;
-    if (this.unlistenOnDestroy_) {
-      this.unlistenOnDestroy_();
-      this.unlistenOnDestroy_ = null;
-    }
-    this.subscriptionApi_.destroy();
-    this.subscriptionApi_ = null;
-  }
-}
-
-/**
- * The IntersectionObserverPolyfill class lets any element receive its
- * intersection data with the viewport. It acts like native browser supported
- * IntersectionObserver.
- * The IntersectionObserver receives a callback function and an optional option
- * as params. Whenever the element intersection ratio cross a threshold value,
- * IntersectionObserverPolyfill will call the provided callback function with
- * the change entry. Only Works with one document for now.
- * @visibleForTesting
- */
-export class IntersectionObserverPolyfill {
-  /**
-   * @param {function(!Array<!IntersectionObserverEntry>)} callback
-   * @param {Object=} opt_option
-   */
-  constructor(callback, opt_option) {
-    /** @private @const {function(!Array<!IntersectionObserverEntry>)} */
-    this.callback_ = callback;
-
-    // The input threshold can be a number or an array of numbers.
-    let threshold = opt_option && opt_option.threshold;
-    if (threshold) {
-      threshold = isArray(threshold) ? threshold : [threshold];
-    } else {
-      threshold = [0];
-    }
-
-    for (let i = 0; i < threshold.length; i++) {
-      devAssert(
-        isFiniteNumber(threshold[i]),
-        'Threshold should be a finite number or an array of finite numbers'
-      );
-    }
-
-    /**
-     * A list of threshold, sorted in increasing numeric order
-     * @private @const {!Array}
-     */
-    this.threshold_ = threshold.sort();
-    devAssert(
-      this.threshold_[0] >= 0 &&
-        this.threshold_[this.threshold_.length - 1] <= 1,
-      'Threshold should be in the range from "[0, 1]"'
-    );
-
-    /** @private {?../layout-rect.LayoutRectDef} */
-    this.lastViewportRect_ = null;
-
-    /**
-     * Store a list of observed elements and their current threshold slot which
-     * their intersection ratio fills, range from [0, this.threshold_.length]
-     * @private {Array<!ElementIntersectionStateDef>}
-     */
-    this.observeEntries_ = [];
-
-    /**
-     * Mutation observer to fire off on visibility changes
-     * @private {?function()}
-     */
-    this.hiddenObserverUnlistener_ = null;
-
-    /** @private {Pass} */
-    this.mutationPass_ = null;
-  }
-
-  /**
-   * Function to unobserve all elements.
-   * and clean up the polyfill.
-   */
-  disconnect() {
-    this.observeEntries_.length = 0;
-    this.disconnectMutationObserver_();
-  }
-
-  /**
-   * Provide a way to observe the intersection change for a specific element
-   * Please note IntersectionObserverPolyfill only support AMP element now
-   * TODO: Support non AMP element
-   * @param {!Element} element
-   */
-  observe(element) {
-    // Check the element is an AMP element.
-    devAssert(element.getLayoutBox);
-
-    // If the element already exists in current observeEntries, do nothing
-    for (let i = 0; i < this.observeEntries_.length; i++) {
-      if (this.observeEntries_[i].element === element) {
-        dev().warn(TAG, 'should observe same element once');
-        return;
-      }
-    }
-
-    const newState = {
-      element,
-      currentThresholdSlot: 0,
-    };
-
-    // Get the new observed element's first changeEntry based on last viewport
-    if (this.lastViewportRect_) {
-      const change = this.getValidIntersectionChangeEntry_(
-        newState,
-        this.lastViewportRect_
-      );
-      if (change) {
-        this.callback_([change]);
-      }
-    }
-
-    // Add a mutation observer to tick ourself
-    // TODO (@torch2424): Allow this to observe elements,
-    // from multiple documents.
-    const ampdoc = Services.ampdoc(element);
-    if (ampdoc.win.MutationObserver && !this.hiddenObserverUnlistener_) {
-      this.mutationPass_ = new Pass(
-        ampdoc.win,
-        this.handleMutationObserverPass_.bind(this, element)
-      );
-      const hiddenObserver = Services.hiddenObserverForDoc(element);
-      this.hiddenObserverUnlistener_ = hiddenObserver.add(
-        this.handleMutationObserverNotification_.bind(this)
-      );
-    }
-
-    // push new observed element
-    this.observeEntries_.push(newState);
-  }
-
-  /**
-   * Provide a way to unobserve intersection change for a specified element
-   * @param {!Element} element
-   */
-  unobserve(element) {
-    // find the unobserved element in observeEntries
-    for (let i = 0; i < this.observeEntries_.length; i++) {
-      if (this.observeEntries_[i].element === element) {
-        this.observeEntries_.splice(i, 1);
-        if (this.observeEntries_.length <= 0) {
-          this.disconnectMutationObserver_();
-        }
-        return;
-      }
-    }
-    dev().warn(TAG, 'unobserve non-observed element');
-  }
-
-  /**
-   * Tick function that update the DOMRect of the root of observed elements.
-   * Caller needs to make sure to pass in the correct container.
-   * @param {!../layout-rect.LayoutRectDef} hostViewport
-   */
-  tick(hostViewport) {
-    this.lastViewportRect_ = hostViewport;
-
-    const changes = [];
-
-    for (let i = 0; i < this.observeEntries_.length; i++) {
-      const change = this.getValidIntersectionChangeEntry_(
-        this.observeEntries_[i],
-        hostViewport
-      );
-      if (change) {
-        changes.push(change);
-      }
-    }
-
-    if (changes.length) {
-      this.callback_(changes);
-    }
-  }
-
-  /**
-   * Return a change entry for one element that should be compatible with
-   * IntersectionObserverEntry if it's valid with current config.
-   * When the new intersection ratio doesn't cross one of a threshold value,
-   * the function will return null.
-   *
-   * @param {!ElementIntersectionStateDef} state
-   * @param {!../layout-rect.LayoutRectDef} hostViewport hostViewport's rect
-   * @return {?IntersectionObserverEntry} A valid change entry or null if ratio
-   * @private
-   */
-  getValidIntersectionChangeEntry_(state, hostViewport) {
-    const {element} = state;
-
-    const elementRect = element.getLayoutBox();
-    const owner = element.getOwner();
-    const ownerRect = owner && owner.getLayoutBox();
-
-    // calculate intersectionRect. that the element intersects with hostViewport
-    // and intersects with owner element and container iframe if exists.
-    const intersectionRect =
-      rectIntersection(elementRect, ownerRect, hostViewport) ||
-      layoutRectLtwh(0, 0, 0, 0);
-    // calculate ratio, call callback based on new ratio value.
-    const ratio = intersectionRatio(intersectionRect, elementRect);
-    const newThresholdSlot = getThresholdSlot(this.threshold_, ratio);
-
-    if (newThresholdSlot == state.currentThresholdSlot) {
-      return null;
-    }
-    state.currentThresholdSlot = newThresholdSlot;
-
-    // To get same behavior as native IntersectionObserver set hostViewport null
-    // if inside an iframe
-    const changeEntry = calculateChangeEntry(
-      elementRect,
-      hostViewport,
-      intersectionRect,
-      ratio
-    );
-    changeEntry.target = element;
-    return changeEntry;
-  }
-
-  /**
-   * Handle Mutation Oberserver events
-   * @private
-   */
-  handleMutationObserverNotification_() {
-    if (this.mutationPass_.isPending()) {
-      return;
-    }
-
-    // Wait one animation frame so that other mutations may arrive.
-    this.mutationPass_.schedule(16);
-  }
-
-  /**
-   * Handle Mutation Observer Pass
-   * This performas the tick, and is wrapped in a paas
-   * To handle throttling of the observer
-   * @param {!Element} element
-   * @private
-   */
-  handleMutationObserverPass_(element) {
-    const viewport = Services.viewportForDoc(element);
-    const resources = Services.resourcesForDoc(element);
-    resources.onNextPass(() => {
-      this.tick(viewport.getRect());
-    });
-  }
-
-  /**
-   * Clean up the mutation observer
-   * @private
-   */
-  disconnectMutationObserver_() {
-    if (this.hiddenObserverUnlistener_) {
-      this.hiddenObserverUnlistener_();
-    }
-    this.hiddenObserverUnlistener_ = null;
-    if (this.mutationPass_) {
-      this.mutationPass_.cancel();
-    }
-    this.mutationPass_ = null;
-  }
-}
-
-/**
- * Returns the ratio of the smaller box's area to the larger box's area.
- * @param {!../layout-rect.LayoutRectDef} smaller
- * @param {!../layout-rect.LayoutRectDef} larger
- * @return {number}
- * @visibleForTesting
- */
-export function intersectionRatio(smaller, larger) {
-  const smallerBoxArea = smaller.width * smaller.height;
-  const largerBoxArea = larger.width * larger.height;
-
-  // Check for a divide by zero
-  return largerBoxArea === 0 ? 0 : smallerBoxArea / largerBoxArea;
-}
-
-/**
- * Returns the slot number that the current ratio fills in.
- * @param {!Array} sortedThreshold valid sorted IoB threshold
- * @param {number} ratio Range from [0, 1]
- * @return {number} Range from [0, threshold.length]
- * @visibleForTesting
- */
-export function getThresholdSlot(sortedThreshold, ratio) {
-  let startIdx = 0;
-  let endIdx = sortedThreshold.length;
-  // 0 is a special case that does not fit into [small, large) range
-  if (ratio == 0) {
-    return 0;
-  }
-  let mid = ((startIdx + endIdx) / 2) | 0;
-  while (startIdx < mid) {
-    const midValue = sortedThreshold[mid];
-    // In the range of [small, large)
-    if (ratio < midValue) {
-      endIdx = mid;
-    } else {
-      startIdx = mid;
-    }
-    mid = ((startIdx + endIdx) / 2) | 0;
-  }
-  return endIdx;
-}
-
-/**
- * Helper function to calculate the IntersectionObserver change entry.
- * @param {!../layout-rect.LayoutRectDef} element element's rect
- * @param {?../layout-rect.LayoutRectDef} hostViewport hostViewport's rect
- * @param {!../layout-rect.LayoutRectDef} intersection
- * @param {number} ratio
- * @return {!IntersectionObserverEntry}}
- */
-function calculateChangeEntry(element, hostViewport, intersection, ratio) {
-  // If element not in an iframe.
-  // adjust all LayoutRect to hostViewport Origin.
-  let boundingClientRect = element;
-  let rootBounds = hostViewport;
-  // If no hostViewport is provided, element is inside an non-scrollable iframe.
-  // Every Layoutrect has already adjust their origin according to iframe
-  // rect origin. LayoutRect position is relative to iframe origin,
-  // thus relative to iframe's viewport origin because the viewport is at the
-  // iframe origin. No need to adjust position here.
-
-  if (hostViewport) {
-    // If element not in an iframe.
-    // adjust all LayoutRect to hostViewport Origin.
-    rootBounds = /** @type {!../layout-rect.LayoutRectDef} */ (rootBounds);
-    intersection = moveLayoutRect(
-      intersection,
-      -hostViewport.left,
-      -hostViewport.top
-    );
-    // The element is relative to (0, 0), while the viewport moves. So, we must
-    // adjust.
-    boundingClientRect = moveLayoutRect(
-      boundingClientRect,
-      -hostViewport.left,
-      -hostViewport.top
-    );
-    // Now, move the viewport to (0, 0)
-    rootBounds = moveLayoutRect(
-      rootBounds,
-      -hostViewport.left,
-      -hostViewport.top
-    );
-  }
-
-  return /** @type {!IntersectionObserverEntry} */ ({
-    time:
-      typeof performance !== 'undefined' && performance.now
-        ? performance.now()
-        : Date.now() - INIT_TIME,
-    rootBounds,
-    boundingClientRect,
-    intersectionRect: intersection,
-    intersectionRatio: ratio,
-  });
-}
diff --git a/src/utils/intersection.js b/src/utils/intersection.js
new file mode 100644
index 0000000000000..e4205748f9465
--- /dev/null
+++ b/src/utils/intersection.js
@@ -0,0 +1,110 @@
+/**
+ * Copyright 2020 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.
+ */
+import {Deferred} from '../core/data-structures/promise';
+import {createViewportObserver} from '../viewport-observer';
+import {dict} from '../core/types/object';
+import {layoutRectFromDomRect} from '../core/math/layout-rect';
+import {toWin} from '../types';
+
+/** @type {!WeakMap<!Element, !Deferred>|undefined} */
+let intersectionDeferreds;
+
+/** @type {!WeakMap<!Window, !IntersectionObserver>|undefined} */
+let intersectionObservers;
+
+/**
+ * @param {!Window} win
+ * @return {!IntersectionObserver}
+ */
+function getInOb(win) {
+  if (!intersectionDeferreds) {
+    intersectionDeferreds = new WeakMap();
+    intersectionObservers = new WeakMap();
+  }
+
+  let observer = intersectionObservers.get(win);
+  if (!observer) {
+    observer = createViewportObserver(
+      (entries) => {
+        const seen = new Set();
+        for (let i = entries.length - 1; i >= 0; i--) {
+          const {target} = entries[i];
+          if (seen.has(target)) {
+            continue;
+          }
+          seen.add(target);
+
+          observer.unobserve(target);
+          intersectionDeferreds.get(target).resolve(entries[i]);
+          intersectionDeferreds.delete(target);
+        }
+      },
+      win,
+      {needsRootBounds: true}
+    );
+    intersectionObservers.set(win, observer);
+  }
+  return observer;
+}
+
+/**
+ * Returns a promise that resolves with the intersection entry for the given element.
+ *
+ * If multiple measures for the same element occur very quickly, they will
+ * dedupe to the same promise.
+ *
+ * @param {!Element} el
+ * @return {!Promise<!IntersectionObserverEntry>}
+ */
+export function measureIntersection(el) {
+  if (intersectionDeferreds && intersectionDeferreds.has(el)) {
+    return intersectionDeferreds.get(el).promise;
+  }
+
+  const inOb = getInOb(toWin(el.ownerDocument.defaultView));
+  inOb.observe(el);
+
+  const deferred = new Deferred();
+  intersectionDeferreds.set(el, deferred);
+  return deferred.promise;
+}
+
+/**
+ * Convert an IntersectionObserverEntry to a regular object to make it serializable.
+ *
+ * @param {!IntersectionObserverEntry} entry
+ * @return {!JsonObject}
+ */
+export function intersectionEntryToJson(entry) {
+  return dict({
+    'time': entry.time,
+    'rootBounds': safeLayoutRectFromDomRect(entry.rootBounds),
+    'boundingClientRect': safeLayoutRectFromDomRect(entry.boundingClientRect),
+    'intersectionRect': safeLayoutRectFromDomRect(entry.intersectionRect),
+    'intersectionRatio': entry.intersectionRatio,
+  });
+}
+
+/**
+ * @param {?} rect
+ * @return {?../layout-rect.LayoutRectDef}
+ */
+function safeLayoutRectFromDomRect(rect) {
+  if (rect === null) {
+    return null;
+  }
+  return layoutRectFromDomRect(/** @type {!ClientRect} */ (rect));
+}
diff --git a/src/utils/math.js b/src/utils/math.js
deleted file mode 100644
index dd3682d211e8c..0000000000000
--- a/src/utils/math.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {devAssert} from '../log';
-
-/**
- * Maps a value in a first range to its equivalent in a second range
- * Ex.: 5 in the range [0,10] gives 60 in the range[40,80]
- *
- * NOTE: lower/upper bounds on the source range are detected automatically,
- * however the bounds on the target range are not altered (thus the target
- * range could be decreasing).
- * Ex1: 8 in the range [0, 10] gives 2 in the range [10, 0]
- * Ex2: also, 8 in the range [10, 0] gives 2 in the range [10, 0]
- *
- * NOTE: Input value is enforced to be bounded inside the source range
- * Ex1: -2 in the range [0, 10] is interpreted as 0 and thus gives 40 in [40,80]
- * Ex2: 19 in the range [0, 5] is interpreted as 5 and thus gives 80 in [40,80]
- *
- * @param {number} val the value in the source range
- * @param {number} min1 the lower bound of the source range
- * @param {number} max1 the upper bound of the source range
- * @param {number} min2 the lower bound of the target range
- * @param {number} max2 the upper bound of the target range
- * @return {number} the equivalent value in the target range
- */
-export function mapRange(val, min1, max1, min2, max2) {
-  let max1Bound = max1;
-  let min1Bound = min1;
-  if (min1 > max1) {
-    max1Bound = min1;
-    min1Bound = max1;
-  }
-
-  if (val < min1Bound) {
-    val = min1Bound;
-  } else if (val > max1Bound) {
-    val = max1Bound;
-  }
-
-  return ((val - min1) * (max2 - min2)) / (max1 - min1) + min2;
-}
-
-/**
- * Computes the modulus of values `a` and `b`.
- *
- * This is needed because the % operator in JavaScript doesn't implement
- * modulus behavior as can be seen by the spec here:
- * http://www.ecma-international.org/ecma-262/5.1/#sec-11.5.3.
- * It instead is used to obtain the remainder of a division.
- * This function uses the remainder (%) operator to determine the modulus.
- * Derived from here:
- * https://stackoverflow.com/questions/25726760/javascript-modular-arithmetic/47354356#47354356
- *
- * @param {number} a
- * @param {number} b
- * @return {number} returns the modulus of the two numbers.
- * @example
- *
- * _.min(10, 5);
- * // => 0
- *
- * _.mod(-1, 5);
- * // => 4
- */
-export function mod(a, b) {
-  return a > 0 && b > 0 ? a % b : ((a % b) + b) % b;
-}
-
-/**
- * Restricts a number to be in the given min/max range. The minimum value must
- * be less than or equal to the maximum value.
- *
- * Examples:
- * clamp(0.5, 0, 1) -> 0.5
- * clamp(1.5, 0, 1) -> 1
- * clamp(-0.5, 0, 1) -> 0
- *
- * @param {number} val the value to clamp.
- * @param {number} min the lower bound.
- * @param {number} max the upper bound.
- * @return {number} the clamped value.
- */
-export function clamp(val, min, max) {
-  devAssert(min <= max, 'Minimum value is greater than the maximum.');
-  return Math.min(Math.max(val, min), max);
-}
-
-/**
- * Returns value bound to min and max values +/- extent. The lower bound must
- * be less than or equal to the upper bound.
- * @param {number} val the value to bound.
- * @param {number} min the lower bound.
- * @param {number} max the upper bound
- * @param {number} extent the allowed extent beyond the bounds.
- * @return {number} the bounded value.
- */
-export function boundValue(val, min, max, extent) {
-  devAssert(min <= max, 'Lower bound is greater than the upper bound.');
-  return clamp(val, min - extent, max + extent);
-}
-
-/**
- * Returns the length of a vector given in X- and Y-coordinates.
- * @param {number} deltaX distance in the X direction.
- * @param {number} deltaY distance in the Y direction.
- * @return {number} the magnitude of the vector.
- */
-export function magnitude(deltaX, deltaY) {
-  return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-}
-
-/**
- * Returns the distance between two points.
- * @param {number} x1 X-coordinate of the first point.
- * @param {number} y1 Y-coordinate of the first point.
- * @param {number} x2 X-coordinate of the second point.
- * @param {number} y2 Y-coordinate of the second point.
- * @return {number} the distance between the two points.
- */
-export function distance(x1, y1, x2, y2) {
-  return magnitude(x2 - x1, y2 - y1);
-}
-
-/**
- * @param {number} centerX
- * @param {number} centerY
- * @param {number} radius
- * @param {number} angleInDegrees
- * @return {{
- *  x: number,
- *  y: number,
- * }}
- */
-export function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
-  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
-
-  return {
-    x: centerX + radius * Math.cos(angleInRadians),
-    y: centerY + radius * Math.sin(angleInRadians),
-  };
-}
-
-/**
- * Sums up the values of the given array and returns the result
- * @param {Array<number>} values
- * @return {number}
- */
-export function sum(values) {
-  return values.reduce(function (a, b) {
-    return a + b;
-  });
-}
diff --git a/src/utils/media-query-props.js b/src/utils/media-query-props.js
new file mode 100644
index 0000000000000..4ae1504309876
--- /dev/null
+++ b/src/utils/media-query-props.js
@@ -0,0 +1,279 @@
+/**
+ * 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.
+ */
+
+/** @typedef {!Array<{query: ?MediaQueryList, value: string}>} */
+let ExprDef;
+
+const TRUE_VALUE = '1';
+
+export class MediaQueryProps {
+  /**
+   * @param {!Window} win
+   * @param {function()} callback
+   */
+  constructor(win, callback) {
+    /** @private @const */
+    this.win_ = win;
+
+    /** @private @const */
+    this.callback_ = callback;
+
+    /** @private {!Object<string, !ExprDef>} */
+    this.exprMap_ = {};
+
+    /** @private {?Object<string, !ExprDef>} */
+    this.prevExprMap_ = null;
+  }
+
+  /**
+   * Starts the resolution pass. After the pass is complete the new queries
+   * will be tracked and the old queries will be untracked.
+   */
+  start() {
+    this.prevExprMap_ = this.exprMap_;
+    this.exprMap_ = {};
+  }
+
+  /**
+   * @param {string} queryString
+   * @return {boolean} value
+   */
+  resolveMatchQuery(queryString) {
+    // This will create a list query like this:
+    // `[{query: matchMedia(queryString), value: true}, {query: null, value: false}]`
+    return (
+      this.resolve_(queryString, parseMediaQueryMatchExpr, TRUE_VALUE) ===
+      TRUE_VALUE
+    );
+  }
+
+  /**
+   * @param {string} exprString
+   * @return {string} value
+   */
+  resolveListQuery(exprString) {
+    return this.resolve_(exprString, parseMediaQueryListExpr, '');
+  }
+
+  /**
+   * Completes the resolution pass. The new queries are tracked for changes
+   * and the old queries are untracked.
+   */
+  complete() {
+    for (const k in this.prevExprMap_) {
+      if (!(k in this.exprMap_)) {
+        toggleOnChange(this.prevExprMap_[k], this.callback_, false);
+      }
+    }
+    this.prevExprMap_ = null;
+  }
+
+  /**
+   * Stops tracking of all queries.
+   */
+  dispose() {
+    for (const k in this.exprMap_) {
+      toggleOnChange(this.exprMap_[k], this.callback_, false);
+    }
+    this.exprMap_ = {};
+  }
+
+  /**
+   * @param {string} exprString
+   * @param {function(!Window, string):!ExprDef} parser
+   * @param {string} emptyExprValue
+   * @return {string} value
+   */
+  resolve_(exprString, parser, emptyExprValue) {
+    if (!exprString || !exprString.trim()) {
+      return emptyExprValue;
+    }
+    let expr = this.exprMap_[exprString] || this.prevExprMap_[exprString];
+    if (!expr) {
+      expr = parser(this.win_, exprString);
+      toggleOnChange(expr, this.callback_, true);
+    }
+    this.exprMap_[exprString] = expr;
+    return resolveMediaQueryListExpr(expr);
+  }
+}
+
+/**
+ * @param {!Window} win
+ * @param {string} queryString
+ * @return {!ExprDef}
+ */
+function parseMediaQueryMatchExpr(win, queryString) {
+  const query = win.matchMedia(queryString);
+  return [
+    {query, value: TRUE_VALUE},
+    {query: null, value: ''},
+  ];
+}
+
+/**
+ * @param {!Window} win
+ * @param {string} exprString
+ * @return {!ExprDef}
+ */
+function parseMediaQueryListExpr(win, exprString) {
+  return (
+    exprString
+      .split(',')
+      .map((part) => {
+        part = part.replace(/\s+/g, ' ').trim();
+        if (part.length == 0) {
+          return;
+        }
+
+        let queryString;
+        let value;
+
+        // Process the expression from the end.
+        const lastChar = part.charAt(part.length - 1);
+        let div;
+        if (lastChar == ')') {
+          // Value is the CSS function, e.g. `calc(50vw + 10px)`.
+
+          // First, skip to the opening paren.
+          let parens = 1;
+          div = part.length - 2;
+          for (; div >= 0; div--) {
+            const c = part.charAt(div);
+            if (c == '(') {
+              parens--;
+            } else if (c == ')') {
+              parens++;
+            }
+            if (parens == 0) {
+              break;
+            }
+          }
+
+          // Then, skip to the begining to the function's name.
+          const funcEnd = div - 1;
+          if (div > 0) {
+            div--;
+            for (; div >= 0; div--) {
+              const c = part.charAt(div);
+              if (
+                !(
+                  c == '%' ||
+                  c == '-' ||
+                  c == '_' ||
+                  (c >= 'a' && c <= 'z') ||
+                  (c >= 'A' && c <= 'Z') ||
+                  (c >= '0' && c <= '9')
+                )
+              ) {
+                break;
+              }
+            }
+          }
+          if (div >= funcEnd) {
+            // Invalid condition.
+            return null;
+          }
+        } else {
+          // Value is the length or a percent: accept a wide range of values,
+          // including invalid values - they will be later asserted to conform
+          // to exact CSS length or percent value.
+          div = part.length - 2;
+          for (; div >= 0; div--) {
+            const c = part.charAt(div);
+            if (
+              !(
+                c == '%' ||
+                c == '.' ||
+                (c >= 'a' && c <= 'z') ||
+                (c >= 'A' && c <= 'Z') ||
+                (c >= '0' && c <= '9')
+              )
+            ) {
+              break;
+            }
+          }
+        }
+        if (div >= 0) {
+          queryString = part.substring(0, div + 1).trim();
+          value = part.substring(div + 1).trim();
+        } else {
+          value = part;
+          queryString = undefined;
+        }
+
+        if (!value) {
+          return null;
+        }
+
+        const query = queryString ? win.matchMedia(queryString) : null;
+        return {query, value};
+      })
+      // Remove any items that did not match the regex above and are
+      // undefined as a result.
+      .filter(Boolean)
+  );
+}
+
+/**
+ * @param {!ExprDef} expr
+ * @return {string} value
+ */
+function resolveMediaQueryListExpr(expr) {
+  for (let i = 0; i < expr.length; i++) {
+    const {query, value} = expr[i];
+    if (!query || query.matches) {
+      return value;
+    }
+  }
+  return '';
+}
+
+/**
+ * @param {!ExprDef} expr
+ * @param {function()} callback
+ * @param {boolean} on
+ */
+function toggleOnChange(expr, callback, on) {
+  for (let i = 0; i < expr.length; i++) {
+    const {query} = expr[i];
+    if (query) {
+      // The `onchange` API is preferred, but the IE only supports
+      // the `addListener/removeListener` APIs.
+      if (query.onchange !== undefined) {
+        query.onchange = on ? callback : null;
+      } else {
+        if (on) {
+          query.addListener(callback);
+        } else {
+          query.removeListener(callback);
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Detect prefers-reduced-motion.
+ * Native animations will not run when a device is set up to reduced motion.
+ * In that case, we need to disable all animation treatment, and whatever
+ * setup changes that depend on an animation running later on.
+ * @param {!Window} win
+ * @return {boolean}
+ */
+export function prefersReducedMotion(win) {
+  return !!win.matchMedia('(prefers-reduced-motion: reduce)')?.matches;
+}
diff --git a/src/utils/object.js b/src/utils/object.js
deleted file mode 100644
index 560ebeffe1b04..0000000000000
--- a/src/utils/object.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {isObject} from '../types';
-
-/* @const */
-const hasOwn_ = Object.prototype.hasOwnProperty;
-
-/**
- * Returns a map-like object.
- * If opt_initial is provided, copies its own properties into the
- * newly created object.
- * @param {T=} opt_initial This should typically be an object literal.
- * @return {T}
- * @template T
- */
-export function map(opt_initial) {
-  const obj = Object.create(null);
-  if (opt_initial) {
-    Object.assign(obj, opt_initial);
-  }
-  return obj;
-}
-
-/**
- * Return an empty JsonObject or makes the passed in object literal
- * an JsonObject.
- * The JsonObject type is just a simple object that is at-dict.
- * See
- * https://github.com/google/closure-compiler/wiki/@struct-and-@dict-Annotations
- * for what a dict is type-wise.
- * The linter enforces that the argument is, in fact, at-dict like.
- * @param {!Object=} opt_initial
- * @return {!JsonObject}
- */
-export function dict(opt_initial) {
-  // We do not copy. The linter enforces that the passed in object is a literal
-  // and thus the caller cannot have a reference to it.
-  return /** @type {!JsonObject} */ (opt_initial || {});
-}
-
-/**
- * Checks if the given key is a property in the map.
- *
- * @param {T}  obj a map like property.
- * @param {string}  key
- * @return {boolean}
- * @template T
- */
-export function hasOwn(obj, key) {
-  return hasOwn_.call(obj, key);
-}
-
-/**
- * Returns obj[key] iff key is obj's own property (is not inherited).
- * Otherwise, returns undefined.
- *
- * @param {Object} obj
- * @param {string} key
- * @return {*}
- */
-export function ownProperty(obj, key) {
-  if (hasOwn(obj, key)) {
-    return obj[key];
-  } else {
-    return undefined;
-  }
-}
-
-/**
- * Deep merges source into target.
- *
- * @param {!Object} target
- * @param {!Object} source
- * @param {number} depth The maximum merge depth. If exceeded, Object.assign
- *                       will be used instead.
- * @return {!Object}
- * @throws {Error} If source contains a circular reference.
- * Note: Only nested objects are deep-merged, primitives and arrays are not.
- */
-export function deepMerge(target, source, depth = 10) {
-  // Keep track of seen objects to detect recursive references.
-  const seen = [];
-
-  /** @type {!Array<{t: !Object, s: !Object, d: number}>} */
-  const queue = [];
-  queue.push({t: target, s: source, d: 0});
-
-  // BFS to ensure objects don't have recursive references at shallower depths.
-  while (queue.length > 0) {
-    const {t, s, d} = queue.shift();
-    if (seen.includes(s)) {
-      throw new Error('Source object has a circular reference.');
-    }
-    seen.push(s);
-    if (t === s) {
-      continue;
-    }
-    if (d > depth) {
-      Object.assign(t, s);
-      continue;
-    }
-    Object.keys(s).forEach((key) => {
-      const newValue = s[key];
-      // Perform a deep merge IFF both target and source have the same key
-      // whose corresponding values are objects.
-      if (hasOwn(t, key)) {
-        const oldValue = t[key];
-        if (isObject(newValue) && isObject(oldValue)) {
-          queue.push({t: oldValue, s: newValue, d: d + 1});
-          return;
-        }
-      }
-      t[key] = newValue;
-    });
-  }
-  return target;
-}
-
-/**
- * @param {!Object} o An object to remove properties from
- * @param {!Array<string>} props A list of properties to remove from the Object
- * @return {!Object} An object with the given properties removed
- */
-export function omit(o, props) {
-  return Object.keys(o).reduce((acc, key) => {
-    if (!props.includes(key)) {
-      acc[key] = o[key];
-    }
-    return acc;
-  }, {});
-}
-
-/**
- * @param {!Object|null|undefined} o1
- * @param {!Object|null|undefined} o2
- * @return {boolean}
- */
-export function objectsEqualShallow(o1, o2) {
-  if (o1 == null || o2 == null) {
-    // Null is only equal to null, and undefined to undefined.
-    return o1 === o2;
-  }
-
-  for (const k in o1) {
-    if (o1[k] !== o2[k]) {
-      return false;
-    }
-  }
-  for (const k in o2) {
-    if (o2[k] !== o1[k]) {
-      return false;
-    }
-  }
-
-  return true;
-}
diff --git a/src/utils/page-layout-box.js b/src/utils/page-layout-box.js
new file mode 100644
index 0000000000000..fc70bc0ba08b6
--- /dev/null
+++ b/src/utils/page-layout-box.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Services} from '../services';
+import {layoutRectLtwh} from '../core/math/layout-rect';
+import {toWin} from '../types';
+
+/**
+ * @param {!Element} element
+ * @return {!../layout-rect.LayoutRectDef}
+ */
+export function getPageLayoutBoxBlocking(element) {
+  const stop = element.ownerDocument.body;
+  let left = 0;
+  let top = 0;
+  for (let n = element; n && n != stop; n = n./*OK*/ offsetParent) {
+    left += n./*OK*/ offsetLeft;
+    top += n./*OK*/ offsetTop;
+  }
+  const {offsetHeight, offsetWidth} = /** @type {!HTMLElement} */ (element);
+  return layoutRectLtwh(left, top, offsetWidth, offsetHeight);
+}
+
+/**
+ * @param {!Element} element
+ * @return {!Promise<!../layout-rect.LayoutRectDef>}
+ */
+export function measurePageLayoutBox(element) {
+  const vsync = Services.vsyncFor(toWin(element.ownerDocument.defaultView));
+  return vsync.measurePromise(() => getPageLayoutBoxBlocking(element));
+}
diff --git a/src/utils/pause-helper.js b/src/utils/pause-helper.js
new file mode 100644
index 0000000000000..f2b7cd0f6875f
--- /dev/null
+++ b/src/utils/pause-helper.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {observeBorderBoxSize, unobserveBorderBoxSize} from './size-observer';
+
+export class PauseHelper {
+  /**
+   * @param {!AmpElement} element
+   */
+  constructor(element) {
+    /** @private @const */
+    this.element_ = element;
+
+    /** @private {boolean} */
+    this.isPlaying_ = false;
+
+    /** @private {boolean} */
+    this.hasSize_ = false;
+
+    this.pauseWhenNoSize_ = this.pauseWhenNoSize_.bind(this);
+  }
+
+  /**
+   * @param {boolean} isPlaying
+   */
+  updatePlaying(isPlaying) {
+    if (isPlaying === this.isPlaying_) {
+      return;
+    }
+    this.isPlaying_ = isPlaying;
+    if (isPlaying) {
+      // Pause will not be called until transitioning from "has size" to
+      // "no size". Which means a measurement must first be received that
+      // has size, then a measurement that does not have size.
+      this.hasSize_ = false;
+      observeBorderBoxSize(this.element_, this.pauseWhenNoSize_);
+    } else {
+      unobserveBorderBoxSize(this.element_, this.pauseWhenNoSize_);
+    }
+  }
+
+  /**
+   * @param {!ResizeObserverSize} size
+   * @private
+   */
+  pauseWhenNoSize_({blockSize, inlineSize}) {
+    const hasSize = inlineSize > 0 && blockSize > 0;
+    if (hasSize === this.hasSize_) {
+      return;
+    }
+    this.hasSize_ = hasSize;
+    if (!hasSize) {
+      this.element_.pause();
+    }
+  }
+}
diff --git a/src/utils/pem.js b/src/utils/pem.js
deleted file mode 100644
index 44fa4b5f7fa73..0000000000000
--- a/src/utils/pem.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {base64DecodeToBytes} from './base64';
-
-/**
- * Converts a text in PEM format into a binary array buffer.
- * @param {string} pem
- * @return {!Uint8Array}
- * @visibleForTesting
- */
-export function pemToBytes(pem) {
-  pem = pem.trim();
-
-  // Remove pem prefix, e.g. "----BEGIN PUBLIC KEY----".
-  pem = pem.replace(/^\-+BEGIN[^-]*\-+/, '');
-
-  // Remove pem suffix, e.g. "----END PUBLIC KEY----".
-  pem = pem.replace(/\-+END[^-]*\-+$/, '');
-
-  // Remove line breaks.
-  pem = pem.replace(/[\r\n]/g, '').trim();
-
-  return base64DecodeToBytes(pem);
-}
diff --git a/src/utils/promise.js b/src/utils/promise.js
deleted file mode 100644
index ca5cff0dbd5c3..0000000000000
--- a/src/utils/promise.js
+++ /dev/null
@@ -1,183 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-/**
- * Returns a Deferred struct, which holds a pending promise and its associated
- * resolve and reject functions.
- *
- * This is preferred instead of creating a Promise instance to extract the
- * resolve/reject functions yourself:
- *
- * ```
- * // Avoid doing
- * let resolve;
- * const promise = new Promise(res => {
- *   resolve = res;
- * });
- *
- * // Good
- * const deferred = new Deferred();
- * const { promise, resolve } = deferred;
- * ```
- *
- * @template T
- */
-export class Deferred {
-  /**
-   * Creates an instance of Deferred.
-   */
-  constructor() {
-    let resolve, reject;
-
-    /**
-     * @const {!Promise<T>}
-     */
-    this.promise = new /*OK*/ Promise((res, rej) => {
-      resolve = res;
-      reject = rej;
-    });
-
-    /**
-     * @const {function(T=)}
-     */
-    this.resolve = resolve;
-
-    /**
-     * @const {function(*=)}
-     */
-    this.reject = reject;
-  }
-}
-
-/**
- * Creates a promise resolved to the return value of fn.
- * If fn sync throws, it will cause the promise to reject.
- *
- * @param {function():T} fn
- * @return {!Promise<T>}
- * @template T
- */
-export function tryResolve(fn) {
-  return new Promise((resolve) => {
-    resolve(fn());
-  });
-}
-
-/**
- * Returns a promise which resolves if a threshold amount of the given promises
- * resolve, and rejects otherwise.
- * @param {!Array<!Promise>} promises The array of promises to test.
- * @param {number} count The number of promises that must resolve for the
- *     returned promise to resolve.
- * @return {!Promise} A promise that resolves if any of the given promises
- *     resolve, and which rejects otherwise.
- */
-export function some(promises, count = 1) {
-  return new Promise((resolve, reject) => {
-    count = Math.max(count, 0);
-    const extra = promises.length - count;
-    if (extra < 0) {
-      reject(new Error('not enough promises to resolve'));
-    }
-    if (promises.length == 0) {
-      resolve([]);
-    }
-    const values = [];
-    const reasons = [];
-
-    const onFulfilled = (value) => {
-      if (values.length < count) {
-        values.push(value);
-      }
-      if (values.length == count) {
-        resolve(values);
-      }
-    };
-    const onRejected = (reason) => {
-      if (reasons.length <= extra) {
-        reasons.push(reason);
-      }
-      if (reasons.length > extra) {
-        reject(reasons);
-      }
-    };
-    for (let i = 0; i < promises.length; i++) {
-      Promise.resolve(promises[i]).then(onFulfilled, onRejected);
-    }
-  });
-}
-
-/**
- * Resolves with the result of the last promise added.
- * @implements {IThenable}
- */
-export class LastAddedResolver {
-  /**
-   * @param {!Array<!Promise>=} opt_promises
-   */
-  constructor(opt_promises) {
-    let resolve_, reject_;
-    /** @private @const {!Promise} */
-    this.promise_ = new Promise((resolve, reject) => {
-      resolve_ = resolve;
-      reject_ = reject;
-    });
-
-    /** @private */
-    this.resolve_ = resolve_;
-
-    /** @private */
-    this.reject_ = reject_;
-
-    /** @private */
-    this.count_ = 0;
-
-    if (opt_promises) {
-      for (let i = 0; i < opt_promises.length; i++) {
-        this.add(opt_promises[i]);
-      }
-    }
-  }
-
-  /**
-   * Add a promise to possibly be resolved.
-   * @param {!Promise} promise
-   * @return {!Promise}
-   */
-  add(promise) {
-    const countAtAdd = ++this.count_;
-    Promise.resolve(promise).then(
-      (result) => {
-        if (this.count_ === countAtAdd) {
-          this.resolve_(result);
-        }
-      },
-      (error) => {
-        // Don't follow behavior of Promise.all and Promise.race error so that
-        // this will only reject when most recently added promise fails.
-        if (this.count_ === countAtAdd) {
-          this.reject_(error);
-        }
-      }
-    );
-    return this.promise_;
-  }
-
-  /** @override */
-  then(opt_resolve, opt_reject) {
-    return this.promise_.then(opt_resolve, opt_reject);
-  }
-}
diff --git a/src/utils/rate-limit.js b/src/utils/rate-limit.js
deleted file mode 100644
index 02e1e101dc36b..0000000000000
--- a/src/utils/rate-limit.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-/**
- * Wraps a given callback and applies a rate limit.
- * It throttles the calls so that no consequent calls have time interval
- * smaller than the given minimal interval.
- *
- * @param {!Window} win
- * @param {function(...T):R} callback
- * @param {number} minInterval the minimum time interval in millisecond
- * @return {function(...T)}
- * @template T
- * @template R
- */
-export function throttle(win, callback, minInterval) {
-  let locker = 0;
-  let nextCallArgs = null;
-
-  /**
-   * @param {!Object} args
-   */
-  function fire(args) {
-    nextCallArgs = null;
-    // Lock the fire for minInterval milliseconds
-    locker = win.setTimeout(waiter, minInterval);
-
-    callback.apply(null, args);
-  }
-
-  /**
-   * Waiter function
-   */
-  function waiter() {
-    locker = 0;
-    // If during the period there're invocations queued up, fire once.
-    if (nextCallArgs) {
-      fire(nextCallArgs);
-    }
-  }
-
-  return function (...args) {
-    if (locker) {
-      nextCallArgs = args;
-    } else {
-      fire(args);
-    }
-  };
-}
-
-/**
- * Wraps a given callback and applies a wait timer, so that minInterval
- * milliseconds must pass since the last call before the callback is actually
- * invoked.
- *
- * @param {!Window} win
- * @param {function(...T):R} callback
- * @param {number} minInterval the minimum time interval in millisecond
- * @return {function(...T)}
- * @template T
- * @template R
- */
-export function debounce(win, callback, minInterval) {
-  let locker = 0;
-  let timestamp = 0;
-  let nextCallArgs = null;
-
-  /**
-   * @param {?Array} args
-   */
-  function fire(args) {
-    nextCallArgs = null;
-    callback.apply(null, args);
-  }
-
-  /**
-   * Wait function for debounce
-   */
-  function waiter() {
-    locker = 0;
-    const remaining = minInterval - (win.Date.now() - timestamp);
-    if (remaining > 0) {
-      locker = win.setTimeout(waiter, remaining);
-    } else {
-      fire(nextCallArgs);
-    }
-  }
-
-  return function (...args) {
-    timestamp = win.Date.now();
-    nextCallArgs = args;
-    if (!locker) {
-      locker = win.setTimeout(waiter, minInterval);
-    }
-  };
-}
diff --git a/src/utils/resource-container-helper.js b/src/utils/resource-container-helper.js
new file mode 100644
index 0000000000000..306ef7f09262b
--- /dev/null
+++ b/src/utils/resource-container-helper.js
@@ -0,0 +1,135 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {tryCallback} from '../core/error';
+
+const AMP_CLASS = 'i-amphtml-element';
+const DEEP = true;
+
+const ensureLoaded = (element) => element.ensureLoaded();
+const pause = (element) => element.pause();
+const unmount = (element) => element.unmount();
+
+/**
+ * Ensure all elements within this container are scheduled to load.
+ *
+ * @param {!Element|!Array<!Element>} containerOrContainers
+ * @param {boolean=} includeSelf
+ */
+export function loadAll(containerOrContainers, includeSelf = true) {
+  forAllWithin(containerOrContainers, includeSelf, !DEEP, ensureLoaded);
+}
+
+/**
+ * Pause all elements within this container.
+ *
+ * @param {!Element|!Array<!Element>} containerOrContainers
+ * @param {boolean=} includeSelf
+ */
+export function pauseAll(containerOrContainers, includeSelf = true) {
+  forAllWithin(containerOrContainers, includeSelf, DEEP, pause);
+}
+
+/**
+ * Unmount all elements within this container.
+ *
+ * @param {!Element|!Array<!Element>} containerOrContainers
+ * @param {boolean=} includeSelf
+ */
+export function unmountAll(containerOrContainers, includeSelf = true) {
+  forAllWithin(containerOrContainers, includeSelf, DEEP, unmount);
+}
+
+/**
+ * Execute a callback for all elements within the container.
+ *
+ * @param {!Element|!Array<!Element>} containerOrContainers
+ * @param {boolean} includeSelf
+ * @param {boolean} deep
+ * @param {function(!AmpElement)} callback
+ */
+export function forAllWithin(
+  containerOrContainers,
+  includeSelf,
+  deep,
+  callback
+) {
+  if (Array.isArray(containerOrContainers)) {
+    for (let i = 0; i < containerOrContainers.length; i++) {
+      forAllWithinInternal(
+        containerOrContainers[i],
+        includeSelf,
+        deep,
+        callback
+      );
+    }
+  } else {
+    forAllWithinInternal(containerOrContainers, includeSelf, deep, callback);
+  }
+}
+
+/**
+ * Execute a callback for all elements within the container.
+ *
+ * @param {!Element} container
+ * @param {boolean} includeSelf
+ * @param {boolean} deep
+ * @param {function(!AmpElement)} callback
+ */
+function forAllWithinInternal(container, includeSelf, deep, callback) {
+  if (includeSelf && container.classList.contains(AMP_CLASS)) {
+    const ampContainer = /** @type {!AmpElement} */ (container);
+    tryCallback(callback, ampContainer);
+    if (!deep) {
+      // Also schedule amp-element that is a placeholder for the element.
+      const placeholder = ampContainer.getPlaceholder();
+      if (placeholder) {
+        forAllWithinInternal(
+          placeholder,
+          /* includeSelf */ true,
+          !DEEP,
+          callback
+        );
+      }
+      return;
+    }
+  }
+
+  const descendants = container.getElementsByClassName(AMP_CLASS);
+  let seen = null;
+  for (let i = 0; i < descendants.length; i++) {
+    const descendant = /** @type {!AmpElement} */ (descendants[i]);
+    if (deep) {
+      // In deep search all elements will be covered.
+      tryCallback(callback, descendant);
+    } else {
+      // Breadth-first search. Rely on the `getElementsByClassName` DOM order
+      // to ignore DOM subtrees already covered.
+      seen = seen || [];
+      let covered = false;
+      for (let j = 0; j < seen.length; j++) {
+        if (seen[j].contains(descendant)) {
+          covered = true;
+          break;
+        }
+      }
+      if (!covered) {
+        seen.push(descendant);
+        tryCallback(callback, descendant);
+      }
+    }
+  }
+}
diff --git a/src/utils/size-observer.js b/src/utils/size-observer.js
new file mode 100644
index 0000000000000..fa5931a07dd9e
--- /dev/null
+++ b/src/utils/size-observer.js
@@ -0,0 +1,246 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {computedStyle} from '../style';
+import {remove} from '../core/types/array';
+import {toWin} from '../types';
+import {tryCallback} from '../core/error';
+
+/** @enum {number} */
+const Type = {
+  /**
+   * Mapped to the `ResizeObserverEntry.contentRect` and returns a
+   * `LayoutSizeDef` value.
+   */
+  CONTENT: 0,
+  /**
+   * Mapped to the `ResizeObserverEntry.borderBoxSize` and returns a
+   * `ResizeObserverSize` value.
+   */
+  BORDER_BOX: 1,
+};
+
+const VERTICAL_RE = /vertical/;
+
+/** @const {!WeakMap<!Window, !ResizeObserver>} */
+const observers = new WeakMap();
+
+/** @const {!WeakMap<!Element, !Array<{type: Type, callback: function(?)}>>} */
+const targetObserverMultimap = new WeakMap();
+
+/** @const {!WeakMap<!Element, !ResizeObserverEntry>} */
+const targetEntryMap = new WeakMap();
+
+/**
+ * @param {!Element} element
+ * @param {function(!../layout-rect.LayoutSizeDef)} callback
+ */
+export function observeContentSize(element, callback) {
+  observeSize(element, Type.CONTENT, callback);
+}
+
+/**
+ * @param {!Element} element
+ * @param {!Function} callback
+ */
+export function unobserveContentSize(element, callback) {
+  unobserveSize(element, Type.CONTENT, callback);
+}
+
+/**
+ * @param {!Element} element
+ * @return {!Promise<!../layout-rect.LayoutSizeDef>}
+ */
+export function measureContentSize(element) {
+  return new Promise((resolve) => {
+    const onSize = (size) => {
+      resolve(size);
+      unobserveContentSize(element, onSize);
+    };
+    observeContentSize(element, onSize);
+  });
+}
+
+/**
+ * Note: this method doesn't support multi-fragment border boxes.
+ * @param {!Element} element
+ * @param {function(!ResizeObserverSize)} callback
+ */
+export function observeBorderBoxSize(element, callback) {
+  observeSize(element, Type.BORDER_BOX, callback);
+}
+
+/**
+ * Note: this method doesn't support multi-fragment border boxes.
+ * @param {!Element} element
+ * @param {!Function} callback
+ */
+export function unobserveBorderBoxSize(element, callback) {
+  unobserveSize(element, Type.BORDER_BOX, callback);
+}
+
+/**
+ * Note: this method doesn't support multi-fragment border boxes.
+ * @param {!Element} element
+ * @return {!Promise<!ResizeObserverSize>}
+ */
+export function measureBorderBoxSize(element) {
+  return new Promise((resolve) => {
+    const onSize = (size) => {
+      resolve(size);
+      unobserveBorderBoxSize(element, onSize);
+    };
+    observeBorderBoxSize(element, onSize);
+  });
+}
+
+/**
+ * @param {!Element} element
+ * @param {Type} type
+ * @param {function(?)} callback
+ */
+function observeSize(element, type, callback) {
+  const win = element.ownerDocument.defaultView;
+  if (!win) {
+    return;
+  }
+  let callbacks = targetObserverMultimap.get(element);
+  if (!callbacks) {
+    callbacks = [];
+    targetObserverMultimap.set(element, callbacks);
+    getObserver(win).observe(element);
+  }
+  const exists = callbacks.some(
+    (cb) => cb.callback === callback && cb.type === type
+  );
+  if (!exists) {
+    callbacks.push({type, callback});
+    const entry = targetEntryMap.get(element);
+    if (entry) {
+      setTimeout(() => computeAndCall(type, callback, entry));
+    }
+  }
+}
+
+/**
+ * @param {!Element} element
+ * @param {Type} type
+ * @param {function(?)} callback
+ */
+function unobserveSize(element, type, callback) {
+  const callbacks = targetObserverMultimap.get(element);
+  if (!callbacks) {
+    return;
+  }
+  remove(callbacks, (cb) => cb.callback === callback && cb.type === type);
+  if (callbacks.length == 0) {
+    targetObserverMultimap.delete(element);
+    targetEntryMap.delete(element);
+    const win = element.ownerDocument.defaultView;
+    if (win) {
+      getObserver(win).unobserve(element);
+    }
+  }
+}
+
+/**
+ * @param {!Window} win
+ * @return {!ResizeObserver}
+ */
+function getObserver(win) {
+  let observer = observers.get(win);
+  if (!observer) {
+    observer = new win.ResizeObserver(processEntries);
+    observers.set(win, observer);
+  }
+  return observer;
+}
+
+/**
+ * @param {!Array<!ResizeObserverEntry>} entries
+ */
+function processEntries(entries) {
+  const seen = new Set();
+  for (let i = entries.length - 1; i >= 0; i--) {
+    const entry = entries[i];
+    const {target} = entry;
+    if (seen.has(target)) {
+      continue;
+    }
+    seen.add(target);
+    const callbacks = targetObserverMultimap.get(target);
+    if (!callbacks) {
+      continue;
+    }
+    targetEntryMap.set(target, entry);
+    for (let k = 0; k < callbacks.length; k++) {
+      const {callback, type} = callbacks[k];
+      computeAndCall(type, callback, entry);
+    }
+  }
+}
+
+/**
+ * @param {Type} type
+ * @param {function(?)} callback
+ * @param {!ResizeObserverEntry} entry
+ */
+function computeAndCall(type, callback, entry) {
+  if (type == Type.CONTENT) {
+    const {contentRect} = entry;
+    const {height, width} = contentRect;
+    /** @type {!../layout-rect.LayoutSizeDef} */
+    const size = {width, height};
+    tryCallback(callback, size);
+  } else if (type == Type.BORDER_BOX) {
+    const {borderBoxSize: borderBoxSizeArray} = entry;
+    /** @type {!ResizeObserverSize} */
+    let borderBoxSize;
+    if (borderBoxSizeArray) {
+      // `borderBoxSize` is supported. Only single-fragment border boxes are
+      // supported here (`borderBoxSize[0]`).
+      if (borderBoxSizeArray.length > 0) {
+        borderBoxSize = borderBoxSizeArray[0];
+      } else {
+        borderBoxSize = /** @type {!ResizeObserverSize} */ ({
+          inlineSize: 0,
+          blockSize: 0,
+        });
+      }
+    } else {
+      // `borderBoxSize` is not supported: polyfill it via blocking measures.
+      const {target} = entry;
+      const win = toWin(target.ownerDocument.defaultView);
+      const isVertical = VERTICAL_RE.test(
+        computedStyle(win, target)['writing-mode']
+      );
+      const {offsetHeight, offsetWidth} = /** @type {!HTMLElement} */ (target);
+      let inlineSize, blockSize;
+      if (isVertical) {
+        blockSize = offsetWidth;
+        inlineSize = offsetHeight;
+      } else {
+        inlineSize = offsetWidth;
+        blockSize = offsetHeight;
+      }
+      borderBoxSize = /** @type {!ResizeObserverSize} */ ({
+        inlineSize,
+        blockSize,
+      });
+    }
+    tryCallback(callback, borderBoxSize);
+  }
+}
diff --git a/src/utils/video.js b/src/utils/video.js
index 12ef2667f35d3..d3936649e68da 100644
--- a/src/utils/video.js
+++ b/src/utils/video.js
@@ -14,25 +14,20 @@
  * limitations under the License.
  */
 import {dev} from '../log';
-import {once} from './function';
 import {setStyles} from '../style';
 
 /**
  * @param {!Window} win
- * @param {boolean} isLiteViewer
  * @return {!Promise<boolean>}
  */
-function isAutoplaySupportedImpl(win, isLiteViewer) {
-  // We do not support autoplay in amp-lite viewer regardless of platform.
-  if (isLiteViewer) {
-    return Promise.resolve(false);
-  }
-
+export function detectIsAutoplaySupported(win) {
   // To detect autoplay, we create a video element and call play on it, if
   // `paused` is true after `play()` call, autoplay is supported. Although
   // this is unintuitive, it works across browsers and is currently the lightest
   // way to detect autoplay without using a data source.
-  const detectionElement = win.document.createElement('video');
+  const detectionElement = /** @type {!HTMLVideoElement} */ (
+    win.document.createElement('video')
+  );
 
   // NOTE(aghassemi): We need both attributes and properties due to Chrome and
   // Safari differences when dealing with non-attached elements.
@@ -43,8 +38,9 @@ function isAutoplaySupportedImpl(win, isLiteViewer) {
   detectionElement.setAttribute('width', '0');
 
   detectionElement.muted = true;
-  detectionElement.playsinline = true;
-  detectionElement.webkitPlaysinline = true;
+  detectionElement.playsInline = true;
+  detectionElement['playsinline'] = true;
+  detectionElement['webkitPlaysinline'] = true;
 
   setStyles(detectionElement, {
     position: 'fixed',
@@ -63,51 +59,36 @@ function isAutoplaySupportedImpl(win, isLiteViewer) {
   return Promise.resolve(!detectionElement.paused);
 }
 
-/** @private {?(function(Window, boolean):!Promise<boolean>)} */
-let isAutoplaySupported = null;
+const AUTOPLAY_SUPPORTED_WIN_PROP = '__AMP_AUTOPLAY';
 
 /**
- * Sets if autoplay is supported.
+ * Determines autoplay support.
+ *
+ * Note that even if platfrom supports autoplay, users or browsers can disable
+ * autoplay to save data / battery. This detects both platfrom support and
+ * when autoplay has been disabled by the user.
+ *
+ * @param {!Window} win
+ * @return {!Promise<boolean>}
  */
-function setIsAutoplaySupported() {
-  isAutoplaySupported = /** @type {function(Window, boolean):!Promise<boolean>} */ (once(
-    isAutoplaySupportedImpl
-  ));
+export function isAutoplaySupported(win) {
+  if (win[AUTOPLAY_SUPPORTED_WIN_PROP] == null) {
+    win[AUTOPLAY_SUPPORTED_WIN_PROP] = detectIsAutoplaySupported(win);
+  }
+  return win[AUTOPLAY_SUPPORTED_WIN_PROP];
 }
 
 /**
- * Wrapper around static utilities for testability.
+ * @param {!Window} win
+ * @visibleForTesting
  */
-export class VideoUtils {
-  /**
-   * Determines autoplay support.
-   *
-   * Note that even if platfrom supports autoplay, users or browsers can disable
-   * autoplay to save data / battery. This detects both platfrom support and
-   * when autoplay has been disabled by the user.
-   *
-   * @param {!Window} win
-   * @param {boolean} isLiteViewer
-   * @return {!Promise<boolean>}
-   */
-  static isAutoplaySupported(win, isLiteViewer) {
-    if (!isAutoplaySupported) {
-      setIsAutoplaySupported();
-    }
-    return isAutoplaySupported(win, isLiteViewer);
-  }
-
-  /** @visibleForTesting */
-  static resetIsAutoplaySupported() {
-    setIsAutoplaySupported();
-  }
+export function resetIsAutoplaySupported(win) {
+  delete win[AUTOPLAY_SUPPORTED_WIN_PROP];
 }
 
 /**
  * @param {!Element} element
  * @return {!Element}
- * Note: Not included in `VideoUtils` as we don't need to test a
- * static selector.
  */
 export function getInternalVideoElementFor(element) {
   return dev().assertElement(element.querySelector('video, iframe'));
diff --git a/src/utils/xhr-utils.js b/src/utils/xhr-utils.js
index d157a23004552..d413eda2fd866 100644
--- a/src/utils/xhr-utils.js
+++ b/src/utils/xhr-utils.js
@@ -15,9 +15,9 @@
  */
 
 import {Services} from '../services';
-import {devAssert, user, userAssert} from '../log';
-import {dict, map} from './object';
-import {fromIterator} from './array';
+import {devAssert, userAssert} from '../core/assert';
+import {dict, isObject, map} from '../core/types/object';
+import {fromIterator, isArray} from '../core/types/array';
 import {
   getCorsUrl,
   getWinOrigin,
@@ -26,7 +26,8 @@ import {
   serializeQueryString,
 } from '../url';
 import {getMode} from '../mode';
-import {isArray, isObject} from '../types';
+import {user} from '../log';
+
 import {isExperimentOn} from '../experiments';
 import {isFormDataWrapper} from '../form-data-wrapper';
 
@@ -79,7 +80,7 @@ const allowedJsonBodyTypes_ = [isArray, isObject];
  *     cloneable request.
  */
 export function toStructuredCloneable(input, init) {
-  const newInit = {...init};
+  const newInit = /** @type {!FetchInitDef} */ ({...init});
   if (isFormDataWrapper(init.body)) {
     const wrapper = /** @type {!FormDataWrapperInterface} */ (init.body);
     newInit.headers['Content-Type'] = 'multipart/form-data;charset=utf-8';
@@ -157,9 +158,8 @@ export function fromStructuredCloneable(response, responseType) {
       /** @type {!Array} */ (init.headers).forEach((entry) => {
         const headerName = entry[0];
         const headerValue = entry[1];
-        lowercasedHeaders[String(headerName).toLowerCase()] = String(
-          headerValue
-        );
+        lowercasedHeaders[String(headerName).toLowerCase()] =
+          String(headerValue);
       });
     }
     if (init.status) {
@@ -382,42 +382,10 @@ export function assertSuccess(response) {
 
     const {status} = response;
     const err = user().createError(`HTTP error ${status}`);
-    err.retriable = isRetriable(status);
+    err['retriable'] = isRetriable(status);
     // TODO(@jridgewell, #9448): Callers who need the response should
     // skip processing.
-    err.response = response;
+    err['response'] = response;
     throw err;
   });
 }
-
-/**
- * Returns a promise resolving to a string identity token if the element
- * contains the 'crossorigin' attribute and the amp-viewer-assistance extension
- * is present. Resolves to undefined otherwise.
- * @param {!Element} element
- * @return {!Promise<undefined>}
- */
-export function getViewerAuthTokenIfAvailable(element) {
-  const crossOriginAttr = element.getAttribute('crossorigin');
-  if (
-    crossOriginAttr &&
-    crossOriginAttr.trim() === 'amp-viewer-auth-token-via-post'
-  ) {
-    return (
-      Services.viewerAssistanceForDocOrNull(element)
-        .then((va) => {
-          userAssert(
-            va,
-            'crossorigin="amp-viewer-auth-token-post" ' +
-              'requires amp-viewer-assistance extension.'
-          );
-          return va.getIdTokenPromise();
-        })
-        // If crossorigin attr is present, resolve with token or empty string.
-        .then((token) => token || '')
-        .catch(() => '')
-    );
-  }
-  // If crossorigin attribute is missing, always resolve with undefined.
-  return Promise.resolve(undefined);
-}
diff --git a/src/validator-integration.js b/src/validator-integration.js
index 8525988d50b19..d5e838a817c68 100644
--- a/src/validator-integration.js
+++ b/src/validator-integration.js
@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-import {getMode} from './mode';
+import {getMode, isModeDevelopment} from './mode';
 import {loadPromise} from './event-helper';
-import {parseQueryString} from './url';
-import {startsWith} from './string';
+import {parseQueryString} from './core/types/string/url';
 import {urls} from './config';
 
 /**
@@ -29,20 +28,20 @@ import {urls} from './config';
  */
 export function maybeValidate(win) {
   const filename = win.location.href;
-  if (startsWith(filename, 'about:')) {
+  if (filename.startsWith('about:')) {
     // Should only happen in tests.
     return;
   }
   let validator = false;
-  if (getMode().development) {
+  if (isModeDevelopment(win)) {
     const hash = parseQueryString(
-      win.location.originalHash || win.location.hash
+      win.location['originalHash'] || win.location.hash
     );
     validator = hash['validate'] !== '0';
   }
 
   if (validator) {
-    loadScript(win.document, `${urls.cdn}/v0/validator.js`).then(() => {
+    loadScript(win.document, `${urls.cdn}/v0/validator_wasm.js`).then(() => {
       /* global amp: false */
       amp.validator.validateUrlAndLog(filename, win.document);
     });
@@ -59,7 +58,9 @@ export function maybeValidate(win) {
  * @return {!Promise}
  */
 export function loadScript(doc, url) {
-  const script = doc.createElement('script');
+  const script = /** @type {!HTMLScriptElement} */ (
+    doc.createElement('script')
+  );
   script.src = url;
 
   // Propagate nonce to all generated script tags.
diff --git a/src/video-iframe-integration.js b/src/video-iframe-integration.js
index 9805863594589..3fec0ced7e99f 100644
--- a/src/video-iframe-integration.js
+++ b/src/video-iframe-integration.js
@@ -15,13 +15,13 @@
  */
 /* eslint-disable local/window-property-name */
 
-import {dict} from '../src/utils/object';
+import {dict} from '../src/core/types/object';
 import {getData, listen} from '../src/event-helper';
 import {getMode} from '../src/mode';
-import {isFiniteNumber} from '../src/types';
-import {once} from '../src/utils/function';
-import {tryParseJson} from '../src/json';
-import {tryResolve} from '../src/utils/promise';
+import {isFiniteNumber} from '../src/core/types';
+import {once} from '../src/core/types/function';
+import {tryParseJson} from '../src/core/types/object/json';
+import {tryResolve} from '../src/core/data-structures/promise';
 
 /** @fileoverview Entry point for documents inside an <amp-video-iframe>. */
 
@@ -29,14 +29,6 @@ const TAG = '<amp-video-iframe>';
 const DOCS_URL = 'https://go.amp.dev/c/amp-video-iframe';
 const __AMP__ = '__AMP__VIDEO_IFRAME__';
 
-/**
- * @typedef {{
- *   sourceUrl: string,
- *   canonicalUrl: string,
- * }}
- */
-let DocMetadataDef;
-
 /**
  * @typedef {{
  *   on: function(string, function()),
@@ -120,16 +112,13 @@ export class AmpVideoIntegration {
     this.usedListenToHelper_ = false;
 
     /**
-     * @return {!DocMetadataDef}
+     * @return {!JsonObject}
      * @private
      */
-    this.getMetadataOnce_ = once(() => {
-      const {canonicalUrl, sourceUrl} = tryParseJson(this.win_.name);
-      return {canonicalUrl, sourceUrl};
-    });
+    this.getMetadataOnce_ = once(() => tryParseJson(this.win_.name));
   }
 
-  /** @return {!DocMetadataDef} */
+  /** @return {!JsonObject} */
   getMetadata() {
     return this.getMetadataOnce_();
   }
@@ -185,7 +174,7 @@ export class AmpVideoIntegration {
     if (!(method in this.methods_)) {
       return;
     }
-    this.methods_[method].call();
+    this.methods_[method]();
   }
 
   /**
@@ -342,7 +331,7 @@ export class AmpVideoIntegration {
 
   /**
    * @param {function()} callback
-   * @return {*} TODO(#23582): Specify return type
+   * @return {!Promise}
    * @private
    */
   safePlayOrPause_(callback) {
@@ -383,7 +372,7 @@ export class AmpVideoIntegration {
   /**
    * @param {!JsonObject} data
    * @param {function()=} opt_callback
-   * @return {*} TODO(#23582): Specify return type
+   * @return {number}
    * @private
    */
   postToParent_(data, opt_callback) {
@@ -405,19 +394,28 @@ export class AmpVideoIntegration {
    * @param {function(!JsonObject)} callback
    */
   getIntersection(callback) {
-    this.listenToOnce_();
-    this.getIntersectionForTesting_(callback);
+    this.getFromHostForTesting_('getIntersection', callback);
+  }
+
+  /**
+   * Gets the host document's user consent data.
+   * @param {function(!JsonObject)} callback
+   */
+  getConsentData(callback) {
+    this.getFromHostForTesting_('getConsentData', callback);
   }
 
   /**
    * Returns message id for testing. Private as message id is an implementation
    * detail that others should not rely on.
+   * @param {string} method
    * @param {function(!JsonObject)} callback
-   * @return {*} TODO(#23582): Specify return type
+   * @return {number}
    * @private
    */
-  getIntersectionForTesting_(callback) {
-    return this.postToParent_(dict({'method': 'getIntersection'}), callback);
+  getFromHostForTesting_(method, callback) {
+    this.listenToOnce_();
+    return this.postToParent_(dict({'method': method}), callback);
   }
 }
 
diff --git a/src/video-interface.js b/src/video-interface.js
index 693fab0abeced..749219c125119 100644
--- a/src/video-interface.js
+++ b/src/video-interface.js
@@ -34,6 +34,19 @@ export const MIN_VISIBILITY_RATIO_FOR_AUTOPLAY = 0.5;
  * @interface
  */
 export class VideoInterface {
+  /**
+   * See `BaseElement`.
+   * @return {!./utils/signals.Signals}
+   */
+  signals() {}
+
+  /**
+   * See `BaseElement`.
+   * @param {function()} unusedMutator
+   * @return {!Promise}
+   */
+  mutateElementSkipRemeasure(unusedMutator) {}
+
   /**
    * Whether the component supports video playback in the current platform.
    * If false, component will be not treated as a video component.
@@ -185,13 +198,19 @@ export class VideoInterface {
   seekTo(unusedTimeSeconds) {}
 }
 
+/** @type {!AmpElement} */
+VideoInterface.prototype.element;
+
+/** @type {!Window} */
+VideoInterface.prototype.win;
+
 /**
  * Attributes
  *
  * Components implementing the VideoInterface are expected to support
  * the following attributes.
  *
- * @const {!Object<string, string>}
+ * @enum {string}
  */
 export const VideoAttributes = {
   /**
@@ -249,7 +268,7 @@ export const VideoAttributes = {
  * Components implementing the VideoInterface are expected to dispatch
  * the following DOM events.
  *
- * @const {!Object<string, string>}
+ * @enum {string}
  */
 export const VideoEvents = {
   /**
@@ -281,6 +300,27 @@ export const VideoEvents = {
    */
   LOADEDMETADATA: 'loadedmetadata',
 
+  /**
+   * loadeddata
+   *
+   * Fired when the user agent can render the media for the first time.
+   *
+   * @event loadeddata
+   */
+  LOADEDDATA: 'loadeddata',
+
+  /**
+   * play
+   *
+   * Fired when the video plays (either because of autoplay or the play method).
+   *
+   * Note: Because this event was not originally present in this interface, we
+   * cannot rely on all all implementations to emit it.
+   *
+   * @event play
+   */
+  PLAY: 'play',
+
   /**
    * playing
    *
@@ -331,8 +371,7 @@ export const VideoEvents = {
   /**
    * amp:video:visibility
    *
-   * Fired when the video's visibility changes. Normally fired
-   * from `viewportCallback`.
+   * Fired when the video's visibility changes.
    *
    * @event amp:video:visibility
    * @property {boolean} visible Whether the video player is visible or not.
@@ -391,7 +430,7 @@ export let PlayingStateDef;
  * Internal playing states used to distinguish between video playing on user's
  * command and videos playing automatically
  *
- * @const {!Object<string, PlayingStateDef>}
+ * @enum {string}
  */
 export const PlayingStates = {
   /**
@@ -546,13 +585,13 @@ export function isDockable(element) {
 /** @enum {string} */
 export const VideoServiceSignals = {
   USER_INTERACTED: 'user-interacted',
-  AUTOPLAY_DELEGATED: 'autoplay-delegated',
+  PLAYBACK_DELEGATED: 'playback-delegated',
 };
 
 /** @param {!AmpElement|!VideoOrBaseElementDef} video */
 export function delegateAutoplay(video) {
   whenUpgradedToCustomElement(dev().assertElement(video)).then((el) => {
-    el.signals().signal(VideoServiceSignals.AUTOPLAY_DELEGATED);
+    el.signals().signal(VideoServiceSignals.PLAYBACK_DELEGATED);
   });
 }
 
diff --git a/src/viewport-observer.js b/src/viewport-observer.js
new file mode 100644
index 0000000000000..b0a14d18f0eee
--- /dev/null
+++ b/src/viewport-observer.js
@@ -0,0 +1,107 @@
+/**
+ * Copyright 2020 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.
+ */
+import {devAssert} from '../src/log';
+import {getMode} from './mode';
+import {isIframed} from './dom';
+import {toWin} from './types';
+
+/**
+ * Returns an IntersectionObserver tracking the Viewport.
+ *
+ * @param {function(!Array<!IntersectionObserverEntry>)} ioCallback
+ * @param {!Window} win
+ * @param {{
+ *   threshold: (number|!Array<number>|undefined),
+ *   needsRootBounds: (boolean|undefined),
+ * }=} opts
+ * @return {!IntersectionObserver}
+ */
+export function createViewportObserver(ioCallback, win, opts = {}) {
+  const {needsRootBounds, threshold} = opts;
+  // The Document -> Element type conversion is necessary to satisfy the
+  // `IntersectionObserver` constructor extern that only accepts `Element`.
+  const root =
+    isIframed(win) && needsRootBounds
+      ? /** @type {?} */ (win.document)
+      : undefined;
+  return new win.IntersectionObserver(ioCallback, {
+    threshold,
+    root,
+  });
+}
+
+/** @type {!WeakMap<!Window, !IntersectionObserver>} */
+const viewportObservers = new WeakMap();
+
+/** @type {!WeakMap<!Element, function(boolean)>} */
+const viewportCallbacks = new WeakMap();
+
+/**
+ * Lazily creates an IntersectionObserver per Window to track when elements
+ * enter and exit the viewport. Fires viewportCallback when this happens.
+ *
+ * @param {!Element} element
+ * @param {function(boolean)} viewportCallback
+ */
+export function observeWithSharedInOb(element, viewportCallback) {
+  // There should never be two unique observers of the same element.
+  if (getMode().localDev) {
+    devAssert(
+      !viewportCallbacks.has(element) ||
+        viewportCallbacks.get(element) === viewportCallback
+    );
+  }
+
+  const win = toWin(element.ownerDocument.defaultView);
+  let viewportObserver = viewportObservers.get(win);
+  if (!viewportObserver) {
+    viewportObservers.set(
+      win,
+      (viewportObserver = createViewportObserver(ioCallback, win))
+    );
+  }
+  viewportCallbacks.set(element, viewportCallback);
+  viewportObserver.observe(element);
+}
+
+/**
+ * Unobserve an element.
+ * @param {!Element} element
+ */
+export function unobserveWithSharedInOb(element) {
+  const win = toWin(element.ownerDocument.defaultView);
+  const viewportObserver = viewportObservers.get(win);
+  if (viewportObserver) {
+    viewportObserver.unobserve(element);
+  }
+  viewportCallbacks.delete(element);
+}
+
+/**
+ * Call the registered callbacks for each element that has crossed the
+ * viewport boundary.
+ *
+ * @param {!Array<!IntersectionObserverEntry>} entries
+ */
+function ioCallback(entries) {
+  for (let i = 0; i < entries.length; i++) {
+    const {isIntersecting, target} = entries[i];
+    const viewportCallback = viewportCallbacks.get(target);
+    if (viewportCallback) {
+      viewportCallback(isIntersecting);
+    }
+  }
+}
diff --git a/src/web-worker/amp-worker.js b/src/web-worker/amp-worker.js
index 74197e68a8b6e..8f3fb89e76948 100644
--- a/src/web-worker/amp-worker.js
+++ b/src/web-worker/amp-worker.js
@@ -16,8 +16,9 @@
 
 import {ModeDef, getMode} from '../mode';
 import {Services} from '../services';
-import {calculateEntryPointScriptUrl} from '../service/extension-location';
-import {dev, devAssert} from '../log';
+import {calculateEntryPointScriptUrl} from '../service/extension-script';
+import {dev} from '../log';
+import {devAssert} from '../core/assert';
 import {getService, registerServiceBuilder} from '../service';
 
 const TAG = 'web-worker';
@@ -103,6 +104,13 @@ class AmpWorker {
       })
       .then((res) => res.text())
       .then((text) => {
+        // Replace sourceMappingUrl with the absolute URL
+        const sourceMappingUrl = `${url}.map`;
+        text = text.replace(
+          /^\/\/# sourceMappingURL=.*/,
+          `//# sourceMappingURL=${sourceMappingUrl}`
+        );
+
         // Workaround since Worker constructor only accepts same origin URLs.
         const blob = new win.Blob([text + '\n//# sourceurl=' + url], {
           type: 'text/javascript',
@@ -168,11 +176,9 @@ class AmpWorker {
    * @private
    */
   receiveMessage_(event) {
-    const {
-      method,
-      returnValue,
-      id,
-    } = /** @type {FromWorkerMessageDef} */ (event.data);
+    const {id, method, returnValue} = /** @type {FromWorkerMessageDef} */ (
+      event.data
+    );
 
     const message = this.messages_[id];
     if (!message) {
diff --git a/src/web-worker/web-worker-polyfills.js b/src/web-worker/web-worker-polyfills.js
index c56f389a30fd2..450a007ce7582 100644
--- a/src/web-worker/web-worker-polyfills.js
+++ b/src/web-worker/web-worker-polyfills.js
@@ -23,8 +23,12 @@ import {install as installArrayIncludes} from '../polyfills/array-includes';
 import {install as installMathSign} from '../polyfills/math-sign';
 import {install as installObjectAssign} from '../polyfills/object-assign';
 import {install as installObjectValues} from '../polyfills/object-values';
+import {install as installStringStartsWith} from '../polyfills/string-starts-with';
 
-installArrayIncludes(self);
-installObjectAssign(self);
-installObjectValues(self);
-installMathSign(self);
+if (!IS_ESM) {
+  installArrayIncludes(self);
+  installObjectAssign(self);
+  installObjectValues(self);
+  installMathSign(self);
+  installStringStartsWith(self);
+}
diff --git a/src/web-worker/web-worker.js b/src/web-worker/web-worker.js
index c2b1cfa5ef3d4..a0f7f7a2fad6b 100644
--- a/src/web-worker/web-worker.js
+++ b/src/web-worker/web-worker.js
@@ -24,8 +24,8 @@
 import './web-worker-polyfills';
 import {BindEvaluator} from '../../extensions/amp-bind/0.1/bind-evaluator';
 import {dev, initLogConstructor, setReportError} from '../log';
-import {exponentialBackoff} from '../exponential-backoff';
-import {reportError} from '../error';
+import {exponentialBackoff} from '../core/types/function/exponential-backoff';
+import {reportError} from '../error-reporting';
 import {urls} from '../config';
 
 initLogConstructor();
@@ -60,12 +60,10 @@ self.addEventListener('unhandledrejection', errorHandler_);
 self.addEventListener('error', errorHandler_);
 
 self.addEventListener('message', function (event) {
-  const {
-    method,
-    args,
-    id,
-    scope,
-  } = /** @type {ToWorkerMessageDef} */ (event.data);
+  const messageEvent = /** @type {!MessageEvent} */ (event);
+  const {args, id, method, scope} = /** @type {ToWorkerMessageDef} */ (
+    messageEvent.data
+  );
   let returnValue;
 
   // TODO(choumx): Remove this fallback when we confirm there are no errors.
diff --git a/src/window-interface.js b/src/window-interface.js
index 5ccba640d1bd7..5f5cf79d1814c 100644
--- a/src/window-interface.js
+++ b/src/window-interface.js
@@ -71,7 +71,9 @@ export class WindowInterface {
    * @return {string}
    */
   static getUserLanguage(win) {
-    return win.navigator.userLanguage || win.navigator.language;
+    // The `navigator.userLanguage` is only supported by IE. The standard is
+    // the `navigator.language`.
+    return win.navigator['userLanguage'] || win.navigator.language;
   }
 
   /**
diff --git a/test.sh b/test.sh
index c29e2546a5c1a..5460d670ff91d 100755
--- a/test.sh
+++ b/test.sh
@@ -24,7 +24,7 @@ chmod g+s .
 # currently the result is not pushed because it will trigger the same job, infinite ci loop
 git remote add upstream git@github.com:ampproject/amphtml.git || echo 'upstream already present'
 git fetch upstream
-git rebase upstream/master
+git rebase upstream/main
 
 git submodule init
 git submodule update
diff --git a/test/OWNERS b/test/OWNERS
index 66f01bd6d028e..55a36524d91d2 100644
--- a/test/OWNERS
+++ b/test/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/test/SIZE.md b/test/SIZE.md
deleted file mode 100644
index f6fa6ca66d488..0000000000000
--- a/test/SIZE.md
+++ /dev/null
@@ -1,3 +0,0 @@
-The size.txt and size.csv files are updated weekly by a cron job with the
-binary sizes of the files we serve off of the cache. We have this to be able to
-plot and catch large delta changes in sizes and to make improvement in the size.
diff --git a/test/_init_tests.js b/test/_init_tests.js
deleted file mode 100644
index c5bfc7f4a52c5..0000000000000
--- a/test/_init_tests.js
+++ /dev/null
@@ -1,582 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-// This must load before all other tests.
-import '../src/polyfills';
-import * as describes from '../testing/describes';
-import * as log from '../src/log';
-import {Services} from '../src/services';
-import {activateChunkingForTesting} from '../src/chunk';
-import {adoptWithMultidocDeps} from '../src/runtime';
-import {cancelTimersForTesting} from '../src/service/timer-impl';
-import {configure as configureEnzyme} from 'enzyme';
-import {
-  installAmpdocServices,
-  installRuntimeServices,
-} from '../src/service/core-services';
-import {installDocService} from '../src/service/ampdoc-impl';
-import {installYieldIt} from '../testing/yield';
-import {removeElement} from '../src/dom';
-import {
-  reportError,
-  resetAccumulatedErrorMessagesForTesting,
-} from '../src/error';
-import {resetEvtListenerOptsSupportForTesting} from '../src/event-helper-listen';
-import {resetExperimentTogglesForTesting} from '../src/experiments';
-import {setDefaultBootstrapBaseUrlForTesting} from '../src/3p-frame';
-import {setReportError} from '../src/log';
-import PreactEnzyme from 'enzyme-adapter-preact-pure';
-import sinon from /*OK*/ 'sinon';
-import stringify from 'json-stable-stringify';
-
-// Used to print warnings for unexpected console errors.
-let that;
-let consoleErrorSandbox;
-let testName;
-let expectedAsyncErrors;
-let rethrowAsyncSandbox;
-let consoleInfoLogWarnSandbox;
-const originalConsoleError = console /*OK*/.error;
-
-// Used to clean up global state between tests.
-let initialGlobalState;
-let initialWindowState;
-
-// All exposed describes.
-global.describes = describes;
-
-// Increase the before/after each timeout since certain times they have timedout
-// during the normal 2000 allowance.
-const BEFORE_AFTER_TIMEOUT = 5000;
-
-// Needs to be called before the custom elements are first made.
-beforeTest();
-adoptWithMultidocDeps(window);
-configureEnzyme({adapter: new PreactEnzyme()});
-
-// Override AMP.extension to buffer extension installers.
-/**
- * @param {string} name
- * @param {string} version
- * @param {function(!Object)} installer
- * @const
- */
-global.AMP.extension = function (name, version, installer) {
-  describes.bufferExtension(`${name}:${version}`, installer);
-};
-
-// Make amp section in karma config readable by tests.
-window.ampTestRuntimeConfig = parent.karma ? parent.karma.config.amp : {};
-
-/**
- * Helper class to skip or retry tests under specific environment.
- * Should be instantiated via describe.configure() or it.configure().
- * Get permission before use!
- *
- * Example usages:
- * describe.configure().skipFirefox().skipSafari().run('Bla bla ...', ... );
- * it.configure().skipEdge().run('Should ...', ...);
- */
-class TestConfig {
-  constructor(runner) {
-    this.runner = runner;
-    /**
-     * List of predicate functions that are called before running each test
-     * suite to check whether the suite should be skipped or not.
-     * If any of the functions return 'true', the suite will be skipped.
-     * @type {!Array<function():boolean>}
-     */
-    this.skipMatchers = [];
-
-    /**
-     * List of predicate functions that are called before running each test
-     * suite to check whether the suite should be skipped or not.
-     * If any of the functions return 'false', the suite will be skipped.
-     * @type {!Array<function():boolean>}
-     */
-    this.ifMatchers = [];
-
-    /**
-     * Called for each test suite (things created by `describe`).
-     * @type {!Array<function(!TestSuite)>}
-     */
-    this.configTasks = [];
-
-    this.platform = Services.platformFor(window);
-
-    /**
-     * Predicate functions that determine whether to run tests on a platform.
-     */
-    this.runOnChrome = this.platform.isChrome.bind(this.platform);
-    this.runOnEdge = this.platform.isEdge.bind(this.platform);
-    this.runOnFirefox = this.platform.isFirefox.bind(this.platform);
-    this.runOnSafari = this.platform.isSafari.bind(this.platform);
-    this.runOnIos = this.platform.isIos.bind(this.platform);
-    this.runOnIe = this.platform.isIe.bind(this.platform);
-
-    /**
-     * By default, IE is skipped. Individual tests may opt in.
-     */
-    this.skip(this.runOnIe);
-  }
-
-  skipChrome() {
-    return this.skip(this.runOnChrome);
-  }
-
-  skipEdge() {
-    return this.skip(this.runOnEdge);
-  }
-
-  skipFirefox() {
-    return this.skip(this.runOnFirefox);
-  }
-
-  skipSafari() {
-    return this.skip(this.runOnSafari);
-  }
-
-  skipIos() {
-    return this.skip(this.runOnIos);
-  }
-
-  skipIfPropertiesObfuscated() {
-    return this.skip(function () {
-      return window.__karma__.config.amp.propertiesObfuscated;
-    });
-  }
-
-  enableIe() {
-    this.skipMatchers.splice(this.skipMatchers.indexOf(this.runOnIe), 1);
-    return this;
-  }
-
-  /**
-   * @param {function():boolean} fn
-   */
-  skip(fn) {
-    this.skipMatchers.push(fn);
-    return this;
-  }
-
-  ifChrome() {
-    return this.if(this.runOnChrome);
-  }
-
-  ifEdge() {
-    return this.if(this.runOnEdge);
-  }
-
-  ifFirefox() {
-    return this.if(this.runOnFirefox);
-  }
-
-  ifSafari() {
-    return this.if(this.runOnSafari);
-  }
-
-  ifIos() {
-    return this.if(this.runOnIos);
-  }
-
-  ifIe() {
-    // It's necessary to first enable IE because we skip it by default.
-    return this.enableIe().if(this.runOnIe);
-  }
-
-  /**
-   * @param {function():boolean} fn
-   */
-  if(fn) {
-    this.ifMatchers.push(fn);
-    return this;
-  }
-
-  retryOnSaucelabs(times = 4) {
-    if (!window.ampTestRuntimeConfig.saucelabs) {
-      return this;
-    }
-    this.configTasks.push((mocha) => {
-      mocha.retries(times);
-    });
-    return this;
-  }
-
-  /**
-   * @param {string} desc
-   * @param {function()} fn
-   */
-  run(desc, fn) {
-    for (let i = 0; i < this.skipMatchers.length; i++) {
-      if (this.skipMatchers[i].call(this)) {
-        this.runner.skip(desc, fn);
-        return;
-      }
-    }
-
-    for (let i = 0; i < this.ifMatchers.length; i++) {
-      if (!this.ifMatchers[i].call(this)) {
-        this.runner.skip(desc, fn);
-        return;
-      }
-    }
-
-    const tasks = this.configTasks;
-    this.runner(desc, function () {
-      tasks.forEach((task) => {
-        task(this);
-      });
-      return fn.apply(this, arguments);
-    });
-  }
-}
-
-describe.configure = function () {
-  return new TestConfig(describe);
-};
-
-installYieldIt(it);
-
-it.configure = function () {
-  return new TestConfig(it);
-};
-
-/**
- * Prints a warning when a console error is detected during a test.
- * @param {*} messages One or more error messages
- */
-function printWarning(...messages) {
-  const message = messages.join(' ');
-
-  // Match equal strings.
-  if (expectedAsyncErrors.includes(message)) {
-    expectedAsyncErrors.splice(expectedAsyncErrors.indexOf(message), 1);
-    return;
-  }
-
-  // Match regex.
-  for (let i = 0; i < expectedAsyncErrors.length; i++) {
-    const expectedError = expectedAsyncErrors[i];
-    if (typeof expectedError != 'string') {
-      if (expectedError.test(message)) {
-        expectedAsyncErrors.splice(i, 1);
-        return;
-      }
-    }
-  }
-
-  const errorMessage = message.split('\n', 1)[0]; // First line.
-  const helpMessage =
-    '    The test "' +
-    testName +
-    '"' +
-    ' resulted in a call to console.error. (See above line.)\n' +
-    '    ⤷ If the error is not expected, fix the code that generated ' +
-    'the error.\n' +
-    '    ⤷ If the error is expected (and synchronous), use the following ' +
-    'pattern to wrap the test code that generated the error:\n' +
-    "        'allowConsoleError(() => { <code that generated the " +
-    "error> });'\n" +
-    '    ⤷ If the error is expected (and asynchronous), use the ' +
-    'following pattern at the top of the test:\n' +
-    "        'expectAsyncConsoleError(<string or regex>[, <number of" +
-    ' times the error message repeats>]);';
-  originalConsoleError(errorMessage + "'\n" + helpMessage);
-}
-
-/**
- * Used during normal test execution, to detect unexpected console errors.
- */
-function warnForConsoleError() {
-  expectedAsyncErrors = [];
-  consoleErrorSandbox = sinon.createSandbox();
-  const consoleErrorStub = consoleErrorSandbox
-    .stub(console, 'error')
-    .callsFake(printWarning);
-
-  self.expectAsyncConsoleError = function (message, repeat = 1) {
-    expectedAsyncErrors.push.apply(
-      expectedAsyncErrors,
-      Array(repeat).fill(message)
-    );
-  };
-  self.allowConsoleError = function (func) {
-    consoleErrorStub.reset();
-    consoleErrorStub.callsFake(() => {});
-    const result = func();
-    try {
-      expect(consoleErrorStub).to.have.been.called;
-    } catch (e) {
-      const helpMessage =
-        'The test "' +
-        testName +
-        '" contains an "allowConsoleError" block ' +
-        "that didn't result in a call to console.error.";
-      originalConsoleError(helpMessage);
-    } finally {
-      consoleErrorStub.callsFake(printWarning);
-    }
-    return result;
-  };
-}
-
-/**
- * Used to restore error level logging after each test.
- */
-function restoreConsoleError() {
-  consoleErrorSandbox.restore();
-  if (expectedAsyncErrors.length > 0) {
-    const helpMessage =
-      'The test "' +
-      testName +
-      '" called "expectAsyncConsoleError", ' +
-      'but there were no call(s) to console.error with these message(s): ' +
-      '"' +
-      expectedAsyncErrors.join('", "') +
-      '"';
-    that.test.error(new Error(helpMessage));
-  }
-  expectedAsyncErrors = [];
-}
-
-/**
- * Used to silence info, log, and warn level logging during each test, unless
- * verbose mode is enabled.
- */
-function maybeStubConsoleInfoLogWarn() {
-  const {verboseLogging} = window.__karma__.config;
-  if (!verboseLogging) {
-    consoleInfoLogWarnSandbox = sinon.createSandbox();
-    consoleInfoLogWarnSandbox.stub(console, 'info').callsFake(() => {});
-    consoleInfoLogWarnSandbox.stub(console, 'log').callsFake(() => {});
-    consoleInfoLogWarnSandbox.stub(console, 'warn').callsFake(() => {});
-  }
-}
-
-/**
- * Used to precent asynchronous throwing of errors during each test.
- */
-function preventAsyncErrorThrows() {
-  self.stubAsyncErrorThrows = function () {
-    rethrowAsyncSandbox = sinon.createSandbox();
-    rethrowAsyncSandbox.stub(log, 'rethrowAsync').callsFake((...args) => {
-      const error = log.createErrorVargs.apply(null, args);
-      self.__AMP_REPORT_ERROR(error);
-      throw error;
-    });
-  };
-  self.restoreAsyncErrorThrows = function () {
-    rethrowAsyncSandbox.restore();
-  };
-  setReportError(reportError);
-  stubAsyncErrorThrows();
-}
-
-before(function () {
-  // This is a more robust version of `this.skip()`. See #17245.
-  this.skipTest = function () {
-    if (this._runnable.title != '"before all" hook') {
-      throw new Error('skipTest() can only be called from within before()');
-    }
-    this.test.parent.pending = true; // Workaround for mochajs/mocha#2683.
-    this.skip();
-  };
-});
-
-beforeEach(function () {
-  this.timeout(BEFORE_AFTER_TIMEOUT);
-  beforeTest();
-  testName = this.currentTest.fullTitle();
-  window.sandbox = sinon.createSandbox();
-  maybeStubConsoleInfoLogWarn();
-  preventAsyncErrorThrows();
-  warnForConsoleError();
-  initialGlobalState = Object.keys(global);
-  initialWindowState = Object.keys(window);
-});
-
-function beforeTest() {
-  activateChunkingForTesting();
-  window.__AMP_MODE = undefined;
-  window.context = undefined;
-  window.AMP_CONFIG = {
-    canary: 'testSentinel',
-  };
-  window.__AMP_TEST = true;
-  installDocService(window, /* isSingleDoc */ true);
-  const ampdoc = Services.ampdocServiceFor(window).getSingleDoc();
-  installRuntimeServices(window);
-  installAmpdocServices(ampdoc);
-  Services.resourcesForDoc(ampdoc).ampInitComplete();
-}
-
-/**
- * Global cleanup of tags added during tests. Cool to add more to selector.
- */
-afterEach(function () {
-  that = this;
-  const globalState = Object.keys(global);
-  const windowState = Object.keys(window);
-  if (consoleInfoLogWarnSandbox) {
-    consoleInfoLogWarnSandbox.restore();
-  }
-  window.sandbox.restore();
-  restoreConsoleError();
-  restoreAsyncErrorThrows();
-  this.timeout(BEFORE_AFTER_TIMEOUT);
-  const cleanupTagNames = ['link', 'meta'];
-  if (!Services.platformFor(window).isSafari()) {
-    cleanupTagNames.push('iframe');
-  }
-  const cleanup = document.querySelectorAll(cleanupTagNames.join(','));
-  for (let i = 0; i < cleanup.length; i++) {
-    try {
-      const element = cleanup[i];
-      removeElement(element);
-    } catch (e) {
-      // This sometimes fails for unknown reasons.
-      console./*OK*/ log(e);
-    }
-  }
-  window.localStorage.clear();
-  window.ENABLE_LOG = false;
-  window.AMP_DEV_MODE = false;
-  window.context = undefined;
-  window.__AMP_MODE = undefined;
-  delete window.document['__AMPDOC'];
-
-  if (windowState.length != initialWindowState.length) {
-    for (let i = initialWindowState.length; i < windowState.length; ++i) {
-      if (window[windowState[i]]) {
-        delete window[windowState[i]];
-      }
-    }
-  }
-
-  if (initialGlobalState.length != globalState.length) {
-    for (let i = initialGlobalState.length; i < globalState.length; ++i) {
-      if (global[globalState[i]]) {
-        delete global[globalState[i]];
-      }
-    }
-  }
-  if (!/native/.test(window.setTimeout)) {
-    throw new Error(
-      'You likely forgot to restore sinon timers ' +
-        '(installed via sandbox.useFakeTimers).'
-    );
-  }
-  setDefaultBootstrapBaseUrlForTesting(null);
-  resetAccumulatedErrorMessagesForTesting();
-  resetExperimentTogglesForTesting(window);
-  resetEvtListenerOptsSupportForTesting();
-  cancelTimersForTesting();
-});
-
-chai.use(require('chai-as-promised')); // eslint-disable-line 
-
-chai.Assertion.addMethod('attribute', function (attr) {
-  const obj = this._obj;
-  const tagName = obj.tagName.toLowerCase();
-  this.assert(
-    obj.hasAttribute(attr),
-    "expected element '" + tagName + "' to have attribute #{exp}",
-    "expected element '" + tagName + "' to not have attribute #{act}",
-    attr,
-    attr
-  );
-});
-
-chai.Assertion.addMethod('class', function (className) {
-  const obj = this._obj;
-  const tagName = obj.tagName.toLowerCase();
-  this.assert(
-    obj.classList.contains(className),
-    "expected element '" + tagName + "' to have class #{exp}",
-    "expected element '" + tagName + "' to not have class #{act}",
-    className,
-    className
-  );
-});
-
-chai.Assertion.addProperty('visible', function () {
-  const obj = this._obj;
-  const computedStyle = window.getComputedStyle(obj);
-  const visibility = computedStyle.getPropertyValue('visibility');
-  const opacity = computedStyle.getPropertyValue('opacity');
-  const isOpaque = parseInt(opacity, 10) > 0;
-  const tagName = obj.tagName.toLowerCase();
-  this.assert(
-    visibility === 'visible' && isOpaque,
-    "expected element '" +
-      tagName +
-      "' to be #{exp}, got #{act}. with classes: " +
-      obj.className,
-    "expected element '" +
-      tagName +
-      "' not to be #{exp}, got #{act}. with classes: " +
-      obj.className,
-    'visible and opaque',
-    `visibility = ${visibility} and opacity = ${opacity}`
-  );
-});
-
-chai.Assertion.addProperty('hidden', function () {
-  const obj = this._obj;
-  const computedStyle = window.getComputedStyle(obj);
-  const visibility = computedStyle.getPropertyValue('visibility');
-  const opacity = computedStyle.getPropertyValue('opacity');
-  const tagName = obj.tagName.toLowerCase();
-  this.assert(
-    visibility === 'hidden' || parseInt(opacity, 10) == 0,
-    "expected element '" +
-      tagName +
-      "' to be #{exp}, got #{act}. with classes: " +
-      obj.className,
-    "expected element '" +
-      tagName +
-      "' not to be #{act}. with classes: " +
-      obj.className,
-    'hidden',
-    visibility
-  );
-});
-
-chai.Assertion.addMethod('display', function (display) {
-  const obj = this._obj;
-  const value = window.getComputedStyle(obj).getPropertyValue('display');
-  const tagName = obj.tagName.toLowerCase();
-  this.assert(
-    value === display,
-    "expected element '" + tagName + "' to be display #{exp}, got #{act}.",
-    "expected element '" + tagName + "' not to be display #{act}.",
-    display,
-    value
-  );
-});
-
-chai.Assertion.addMethod('jsonEqual', function (compare) {
-  const obj = this._obj;
-  const a = stringify(compare);
-  const b = stringify(obj);
-  this.assert(
-    a == b,
-    'expected JSON to be equal.\nExp: #{exp}\nAct: #{act}',
-    'expected JSON to not be equal.\nExp: #{exp}\nAct: #{act}',
-    a,
-    b
-  );
-});
diff --git a/test/e2e/test-adchoices.js b/test/e2e/test-adchoices.js
index 7c6259f4314a0..16001505932f3 100644
--- a/test/e2e/test-adchoices.js
+++ b/test/e2e/test-adchoices.js
@@ -17,7 +17,7 @@
 describes.endtoend(
   'ad choices',
   {
-    testUrl: 'http://localhost:8000/test/fixtures/e2e/amphtml-ads/text.html',
+    fixture: 'amphtml-ads/text.html',
     environments: 'amp4ads-preset',
   },
   (env) => {
diff --git a/test/e2e/test-amp-bind-brightcove.js b/test/e2e/test-amp-bind-brightcove.js
index ed371847f9b4d..f26a4f34b75d0 100644
--- a/test/e2e/test-amp-bind-brightcove.js
+++ b/test/e2e/test-amp-bind-brightcove.js
@@ -17,9 +17,7 @@
 describes.endtoend(
   'amp-bind',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-bind/' +
-      'bind-brightcove.html',
+    fixture: 'amp-bind/bind-brightcove.html',
   },
   async (env) => {
     let controller;
diff --git a/test/e2e/test-amp-bind-email.js b/test/e2e/test-amp-bind-email.js
index 0acc43cb198a6..bd27c9b4ad8bc 100644
--- a/test/e2e/test-amp-bind-email.js
+++ b/test/e2e/test-amp-bind-email.js
@@ -17,9 +17,7 @@
 describes.endtoend(
   'amp-bind',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-bind/' +
-      'bind-amp4email.html',
+    fixture: 'amp-bind/bind-amp4email.html',
   },
   async (env) => {
     let controller;
diff --git a/test/e2e/test-amp-bind-form.js b/test/e2e/test-amp-bind-form.js
index 454f8d3e01690..4efe8244f4c1d 100644
--- a/test/e2e/test-amp-bind-form.js
+++ b/test/e2e/test-amp-bind-form.js
@@ -17,7 +17,7 @@
 describes.endtoend(
   'amp-bind',
   {
-    testUrl: 'http://localhost:8000/test/fixtures/e2e/amp-bind/bind-form.html',
+    fixture: 'amp-bind/bind-form.html',
   },
   async (env) => {
     let controller;
diff --git a/test/e2e/test-amp-bind-iframe.js b/test/e2e/test-amp-bind-iframe.js
index 646c2d2d40bf2..732844d66120f 100644
--- a/test/e2e/test-amp-bind-iframe.js
+++ b/test/e2e/test-amp-bind-iframe.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'amp-bind',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-bind/bind-iframe.html',
+    fixture: 'amp-bind/bind-iframe.html',
   },
   async (env) => {
     let controller;
diff --git a/test/e2e/test-amp-bind-live-list.js b/test/e2e/test-amp-bind-live-list.js
index 8a0344a07e792..934742edaf1c8 100644
--- a/test/e2e/test-amp-bind-live-list.js
+++ b/test/e2e/test-amp-bind-live-list.js
@@ -17,9 +17,7 @@
 describes.endtoend(
   'amp-bind',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-bind/' +
-      'bind-live-list.html',
+    fixture: 'amp-bind/bind-live-list.html',
   },
   async (env) => {
     let controller;
@@ -67,7 +65,7 @@ describes.endtoend(
         );
 
         // The test server should handle this
-        // const impl = liveList.implementation_;
+        // const impl = await liveList.getImpl(false);
         // const update = document.createElement('div');
         // update.innerHTML =
         //     '<div items>' +
diff --git a/test/e2e/test-amp-bind-state.js b/test/e2e/test-amp-bind-state.js
index 9b7eb8af908f9..22bfc06e5fc01 100644
--- a/test/e2e/test-amp-bind-state.js
+++ b/test/e2e/test-amp-bind-state.js
@@ -17,7 +17,7 @@
 describes.endtoend(
   'amp-bind',
   {
-    testUrl: 'http://localhost:8000/test/fixtures/e2e/amp-bind/bind-basic.html',
+    fixture: 'amp-bind/bind-basic.html',
     environments: 'ampdoc-amp4ads-preset',
   },
   async (env) => {
diff --git a/test/e2e/test-amp-bind-video.js b/test/e2e/test-amp-bind-video.js
index 006acb14aac85..7c71118e7cdfc 100644
--- a/test/e2e/test-amp-bind-video.js
+++ b/test/e2e/test-amp-bind-video.js
@@ -17,7 +17,7 @@
 describes.endtoend(
   'amp-bind with <amp-video>',
   {
-    testUrl: 'http://localhost:8000/test/fixtures/e2e/amp-bind/bind-video.html',
+    fixture: 'amp-bind/bind-video.html',
     environments: 'ampdoc-amp4ads-preset',
   },
   async (env) => {
diff --git a/test/e2e/test-amp-bind-youtube.js b/test/e2e/test-amp-bind-youtube.js
index 33c88148f343d..6d6710760392a 100644
--- a/test/e2e/test-amp-bind-youtube.js
+++ b/test/e2e/test-amp-bind-youtube.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'amp-bind',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-bind/bind-youtube.html',
+    fixture: 'amp-bind/bind-youtube.html',
   },
   async (env) => {
     let controller;
diff --git a/test/e2e/test-amp-email.js b/test/e2e/test-amp-email.js
new file mode 100644
index 0000000000000..1e61eec8d6c09
--- /dev/null
+++ b/test/e2e/test-amp-email.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright 2020 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.
+ */
+
+describes.endtoend(
+  'layoutCallback depends on updated viewport size after documentHeight change.',
+  {
+    fixture: 'amp4email/viewport-size-race.html',
+    environments: ['email-demo'],
+  },
+  async (env) => {
+    it('Should call amp-img layoutCallback', async () => {
+      const {controller} = env;
+      const imgEl = await controller.findElement('img');
+      await expect(imgEl).ok;
+    });
+  }
+);
+
+describes.endtoend(
+  'layoutCallback depending on element remeasurement after documentHeight change.',
+  {
+    fixture: 'amp4email/element-size-race.html',
+    environments: ['email-demo'],
+  },
+  async (env) => {
+    it('Should call amp-list layoutCallback', async () => {
+      const {controller} = env;
+      const ampListChild = await controller.findElement('.fruit');
+      await expect(ampListChild).ok;
+    });
+  }
+);
diff --git a/test/e2e/test-amp-story-player-navigation.js b/test/e2e/test-amp-story-player-navigation.js
new file mode 100644
index 0000000000000..13d44f1e55a6e
--- /dev/null
+++ b/test/e2e/test-amp-story-player-navigation.js
@@ -0,0 +1,99 @@
+/**
+ * Copyright 2020 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.
+ */
+
+const VIEWPORT = {
+  HEIGHT: 768,
+  WIDTH: 1024,
+};
+
+/**
+ * @param {number} ms
+ * @return {!Promise}
+ */
+function timeout(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+describes.endtoend(
+  'story player navigation',
+  {
+    fixture: 'amp-story-player/navigation.html',
+    initialRect: {width: VIEWPORT.WIDTH, height: VIEWPORT.HEIGHT},
+    environments: ['single'],
+  },
+  (env) => {
+    let player;
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+
+      await timeout(500);
+
+      player = await controller.findElement(
+        'amp-story-player.i-amphtml-story-player-loaded'
+      );
+      await expect(player);
+    });
+
+    it('first story should be playing video', async () => {
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await controller.switchToShadowRoot(shadowHost);
+
+      const iframe = await controller.findElement('iframe.story-player-iframe');
+
+      await controller.switchToShadowRoot(iframe);
+      await controller.switchToFrame(iframe);
+
+      const firstStoryVideo = await controller.findElement('#story1 video');
+      const isVideoPaused = await controller.getElementProperty(
+        firstStoryVideo,
+        'paused'
+      );
+
+      await timeout(800);
+      await expect(isVideoPaused).to.eql(false);
+    });
+
+    it('navigating to next story pauses the previous one', async () => {
+      // Navigate to next story.
+      await controller.click(player);
+
+      await timeout(800);
+
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+      await controller.switchToShadowRoot(shadowHost);
+
+      const iframe = await controller.findElement('iframe.story-player-iframe');
+      await controller.switchToShadowRoot(iframe);
+      await controller.switchToFrame(iframe);
+
+      const firstStoryVideo = await controller.findElement('#story1 video');
+      const isVideoPaused = await controller.getElementProperty(
+        firstStoryVideo,
+        'paused'
+      );
+
+      await timeout(800);
+      await expect(isVideoPaused).to.eql(true);
+    });
+  }
+);
diff --git a/test/e2e/test-amp-story-player-prerender.js b/test/e2e/test-amp-story-player-prerender.js
new file mode 100644
index 0000000000000..1b1ea82bd3a91
--- /dev/null
+++ b/test/e2e/test-amp-story-player-prerender.js
@@ -0,0 +1,156 @@
+/**
+ * Copyright 2020 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.
+ */
+
+const VIEWPORT = {
+  HEIGHT: 768,
+  WIDTH: 1024,
+};
+
+/**
+ * @param {number} ms
+ * @return {!Promise}
+ */
+function timeout(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+describes.endtoend(
+  'player prerendering',
+  {
+    fixture: 'amp-story-player/pre-rendering.html',
+    initialRect: {width: VIEWPORT.WIDTH, height: VIEWPORT.HEIGHT},
+    environments: ['single'],
+  },
+  (env) => {
+    let player;
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+      player = await controller.findElement('amp-story-player');
+      await expect(player);
+    });
+
+    it('when player is not visible in first viewport, it builds the shadow DOM container', async () => {
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await expect(shadowHost);
+    });
+
+    it('when player is not visible in first viewport, no stories are loaded or prerendered', async () => {
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await controller.switchToShadowRoot(shadowHost);
+      const iframeContainer = await controller.findElement(
+        '.i-amphtml-story-player-main-container'
+      );
+
+      const count = await controller.getElementProperty(
+        iframeContainer,
+        'childElementCount'
+      );
+
+      await expect(count).to.eql(0);
+    });
+
+    it('when player is not visible in first viewport and on first user scroll, iframe loads first story in prerender', async () => {
+      const doc = await controller.getDocumentElement();
+
+      await controller./*OK*/ scrollTo(doc, {top: 1});
+
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await controller.switchToShadowRoot(shadowHost);
+
+      const iframe = await controller.findElement('iframe');
+      const iframeSrc = await controller.getElementAttribute(iframe, 'src');
+
+      await expect(iframeSrc).to.eql(
+        'http://localhost:8000/examples/amp-story/ampconf.html#visibilityState=prerender&origin=http%3A%2F%2Flocalhost%3A8000&showStoryUrlInfo=0&storyPlayer=v0&cap=swipe'
+      );
+    });
+
+    it('when player is not visible in first viewport and on first user scroll, only one story in iframe is loaded', async () => {
+      const doc = await controller.getDocumentElement();
+
+      await controller./*OK*/ scrollTo(doc, {top: 1});
+
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await controller.switchToShadowRoot(shadowHost);
+
+      const iframes = await controller.findElements('iframe');
+      const iframeSrc = await controller.getElementAttribute(iframes[1], 'src');
+
+      await expect(iframeSrc).to.not.exist;
+    });
+
+    it('when player becomes visible in viewport, first story starts playing', async () => {
+      const doc = await controller.getDocumentElement();
+      const playerRect = await controller.getElementRect(player);
+
+      await controller./*OK*/ scrollTo(doc, {top: playerRect.top});
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await controller.switchToShadowRoot(shadowHost);
+
+      const iframe = await controller.findElement('iframe.story-player-iframe');
+
+      await controller.switchToShadowRoot(iframe);
+      await controller.switchToFrame(iframe);
+
+      const storyEl = await controller.findElement(
+        'amp-story.i-amphtml-story-loaded'
+      );
+
+      await expect(storyEl).to.exist;
+    });
+
+    it('when player becomes visible in viewport and first story finishes loading, second story starts preloading', async () => {
+      const doc = await controller.getDocumentElement();
+      const playerRect = await controller.getElementRect(player);
+
+      await controller./*OK*/ scrollTo(doc, {top: playerRect.top});
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await controller.switchToShadowRoot(shadowHost);
+
+      // Wait for first story iframe to load.
+      await timeout(5000);
+
+      const iframes = await controller.findElements(
+        'iframe.story-player-iframe'
+      );
+      const iframeSrc = await controller.getElementAttribute(iframes[1], 'src');
+
+      await expect(iframeSrc).to.eql(
+        'http://localhost:8000/examples/amp-story/amp-story-animation.html#visibilityState=prerender&origin=http%3A%2F%2Flocalhost%3A8000&showStoryUrlInfo=0&storyPlayer=v0&cap=swipe'
+      );
+    });
+  }
+);
diff --git a/test/e2e/test-amp-story-player.js b/test/e2e/test-amp-story-player.js
new file mode 100644
index 0000000000000..29dde67baf954
--- /dev/null
+++ b/test/e2e/test-amp-story-player.js
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2020 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.
+ */
+
+const VIEWPORT = {
+  HEIGHT: 768,
+  WIDTH: 1024,
+};
+
+describes.endtoend(
+  'player prerendering',
+  {
+    fixture: 'amp-story-player/basic.html',
+    initialRect: {width: VIEWPORT.WIDTH, height: VIEWPORT.HEIGHT},
+    environments: ['single'],
+  },
+  (env) => {
+    let player;
+    let controller;
+
+    beforeEach(async () => {
+      controller = env.controller;
+      player = await controller.findElement(
+        'amp-story-player.i-amphtml-story-player-loaded'
+      );
+      await expect(player);
+    });
+
+    it('loads and displays first story on page load when player is visible in viewport', async () => {
+      const shadowHost = await controller.findElement(
+        'div.i-amphtml-story-player-shadow-root-intermediary'
+      );
+
+      await controller.switchToShadowRoot(shadowHost);
+
+      const iframes = await controller.findElement('iframe');
+      const iframeSrc = await controller.getElementAttribute(iframes, 'src');
+
+      await expect(iframeSrc).to.eql(
+        'http://localhost:8000/examples/amp-story/ampconf.html#visibilityState=prerender&origin=http%3A%2F%2Flocalhost%3A8000&showStoryUrlInfo=0&storyPlayer=v0&cap=swipe'
+      );
+    });
+  }
+);
diff --git a/test/e2e/test-controller-promise.js b/test/e2e/test-controller-promise.js
index 0bb713c972c11..52e9848748157 100644
--- a/test/e2e/test-controller-promise.js
+++ b/test/e2e/test-controller-promise.js
@@ -280,8 +280,7 @@ describe('ControllerPromise', () => {
         opt_mutate = opt_mutate || ((x) => x);
         return new Promise((resolve, reject) => {
           /**
-           * Poll for the new value. This simulates behavior in the concrete
-           * implementations of the `FunctionalTestController` implementations.
+           * Poll for the new value.
            * See {@link ../../build-system/tasks/e2e/selenium-webdriver-controller.js#getWaitFn_}
            */
           const id = setInterval(async () => {
diff --git a/test/e2e/test-document-height.js b/test/e2e/test-document-height.js
index 710a323a92707..b6320fee0c509 100644
--- a/test/e2e/test-document-height.js
+++ b/test/e2e/test-document-height.js
@@ -17,8 +17,7 @@
 describes.endtoend(
   'documentHeight',
   {
-    testUrl:
-      'http://localhost:8000/test/fixtures/e2e/amp-carousel/0.1/document-height.html',
+    fixture: 'amp-carousel/0.1/document-height.html',
     environments: ['viewer-demo'],
   },
   async (env) => {
diff --git a/test/e2e/test-expect.js b/test/e2e/test-expect.js
index becc890e3d8db..6bf841e623845 100644
--- a/test/e2e/test-expect.js
+++ b/test/e2e/test-expect.js
@@ -1632,8 +1632,7 @@ function getWaitFunction(valueFunctionGetter) {
     opt_mutate = opt_mutate || ((x) => x);
     return new Promise((resolve, reject) => {
       /**
-       * Poll for the new value. This simulates behavior in the concrete
-       * implementations of the `FunctionalTestController` implementations.
+       * Poll for the new value.
        * See {@link ../../build-system/tasks/e2e/selenium-webdriver-controller.js#getWaitFn_}
        */
       const id = setInterval(async () => {
diff --git a/test/fixtures/3p-ad.html b/test/fixtures/3p-ad.html
index 1178fd953c08f..e6fe8ebf2f0bc 100644
--- a/test/fixtures/3p-ad.html
+++ b/test/fixtures/3p-ad.html
@@ -10,11 +10,16 @@
       min-height: 1000px;
       display: block;
     }
+    .fill-5000 {
+      width: 100px;
+      min-height: 5000px;
+      display: block;
+    }
   </style>
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
-  <script async src="/dist/amp.js"></script>
-  <script async custom-element="amp-ad" src="/dist/v0/amp-ad-0.1.max.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
   <!-- use custom url to force same origin -->
   <meta name="amp-3p-iframe-src" content="http://localhost:9876/dist.3p/current/frame.max.html">
 </head>
@@ -33,6 +38,7 @@
     </amp-ad>
   </amp-lightbox>
   <a href="http://test.com/test">Test link</a>
+  <!-- A 5000px div to make the document scrollable -->
+  <div class='fill-5000'></div>
 </body>
-<div class='fill'></div>
 </html>
diff --git a/test/fixtures/actions.html b/test/fixtures/actions.html
index b41f824f23257..09f34cbf7c722 100644
--- a/test/fixtures/actions.html
+++ b/test/fixtures/actions.html
@@ -6,7 +6,7 @@
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
-  <script async src="/dist/amp.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
   <span id="spanToHide">This text will be hidden by #hideBtn</span>
diff --git a/test/fixtures/amp-cupcake-ad.html b/test/fixtures/amp-cupcake-ad.html
index d273ce4ee6ec8..6255b073c424d 100644
--- a/test/fixtures/amp-cupcake-ad.html
+++ b/test/fixtures/amp-cupcake-ad.html
@@ -1,38 +1,1014 @@
-<html amp4ads="" class="i-amphtml-inabox i-amphtml-singledoc i-amphtml-standalone i-amphtml-iframed" i-amphtml-layout="" i-amphtml-no-boilerplate="" amp-version="1811091519050"><head><meta charset="utf-8"><style amp-runtime="" i-amphtml-version="011811091519050">html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}amp-list[load-more]>[load-more-button],amp-list[load-more]>[load-more-button]>.i-amphtml-loader,amp-list[load-more]>[load-more-failed],amp-list[load-more]>[load-more-loading]{visibility:hidden}amp-list[load-more]>[load-more-button].amp-visible,amp-list[load-more]>[load-more-failed].amp-visible,amp-list[load-more]>[load-more-loading].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],amp-share-tracking,form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}
-/*# sourceURL=/css/amp.css*/html.i-amphtml-inabox{width:100%!important;height:100%!important}</style><style amp-extension="amp-social-share">.amp-social-share-facebook{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M211.9 197.4h-36.7v59.9h36.7v175.8h70.5V256.5h49.2l5.2-59.1h-54.4v-33.7c0-13.9 2.8-19.5 16.3-19.5h38.2V82.9h-48.8c-52.5 0-76.1 23.1-76.1 67.3-.1 38.6-.1 47.2-.1 47.2z'/%3E%3C/svg%3E")}.amp-social-share-pinterest{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M266.6 76.5c-100.2 0-150.7 71.8-150.7 131.7 0 36.3 13.7 68.5 43.2 80.6 4.8 2 9.2.1 10.6-5.3 1-3.7 3.3-13 4.3-16.9 1.4-5.3.9-7.1-3-11.8-8.5-10-13.9-23-13.9-41.3 0-53.3 39.9-101 103.8-101 56.6 0 87.7 34.6 87.7 80.8 0 60.8-26.9 112.1-66.8 112.1-22.1 0-38.6-18.2-33.3-40.6 6.3-26.7 18.6-55.5 18.6-74.8 0-17.3-9.3-31.7-28.4-31.7-22.5 0-40.7 23.3-40.7 54.6 0 19.9 6.7 33.4 6.7 33.4s-23.1 97.8-27.1 114.9c-8.1 34.1-1.2 75.9-.6 80.1.3 2.5 3.6 3.1 5 1.2 2.1-2.7 28.9-35.9 38.1-69 2.6-9.4 14.8-58 14.8-58 7.3 14 28.7 26.3 51.5 26.3 67.8 0 113.8-61.8 113.8-144.5-.1-62.6-53.1-120.8-133.6-120.8z'/%3E%3C/svg%3E")}.amp-social-share-linkedin{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M186.4 142.4c0 19-15.3 34.5-34.2 34.5-18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5 18.9 0 34.2 15.5 34.2 34.5zm-5 58.9h-57.8v186.8h57.8V201.3zm92.4 0h-55.4v186.8h55.4v-98c0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9v98H398V269.8c0-50-28.3-74.2-68-74.2-39.6 0-56.3 30.9-56.3 30.9v-25.2h.1z'/%3E%3C/svg%3E")}.amp-social-share-gplus{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M179.7 237.6v46.6h77c-3.1 20-23.3 58.7-77 58.7-46.3 0-84.1-38.5-84.1-85.9 0-47.4 37.8-85.9 84.1-85.9 26.4 0 44 11.3 54.1 21l36.8-35.5C247 134.4 216.4 121 179.7 121 104.7 121 44 181.8 44 257s60.7 136 135.7 136C258 393 310 337.8 310 260.1c0-8.9-1-15.7-2.1-22.5H179.7zm288.3-.9h-38.7V198h-38.6v38.7H352v38.6h38.7V314h38.6v-38.7H468'/%3E%3C/svg%3E")}.amp-social-share-email{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M101.3 141.6v228.9h309.5V141.6H101.3zm274.4 26.2L256 259.3l-119.6-91.5h239.3zm-248.1 26.3l64.1 49.1-64.1 64.1V194.1zm.2 150.1l84.9-84.9 43.2 33.1 43-32.9 84.7 84.7H127.8zm256.6-36.4L320 243.4l64.4-49.3v113.7z'/%3E%3C/svg%3E")}.amp-social-share-twitter{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h400v400H0z'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M153.62 301.59c94.34 0 145.94-78.16 145.94-145.94 0-2.22 0-4.43-.15-6.63A104.36 104.36 0 0 0 325 122.47a102.38 102.38 0 0 1-29.46 8.07 51.47 51.47 0 0 0 22.55-28.37 102.79 102.79 0 0 1-32.57 12.45c-15.9-16.906-41.163-21.044-61.625-10.093-20.461 10.95-31.032 34.266-25.785 56.873A145.62 145.62 0 0 1 92.4 107.81c-13.614 23.436-6.66 53.419 15.88 68.47A50.91 50.91 0 0 1 85 169.86v.65c.007 24.416 17.218 45.445 41.15 50.28a51.21 51.21 0 0 1-23.16.88c6.72 20.894 25.976 35.208 47.92 35.62a102.92 102.92 0 0 1-63.7 22 104.41 104.41 0 0 1-12.21-.74 145.21 145.21 0 0 0 78.62 23'/%3E%3C/g%3E%3C/svg%3E")}.amp-social-share-tumblr{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M210.8 80.3c-2.3 18.3-6.4 33.4-12.4 45.2-6 11.9-13.9 22-23.9 30.5-9.9 8.5-21.8 14.9-35.7 19.5v50.6h38.9v124.5c0 16.2 1.7 28.6 5.1 37.1 3.4 8.5 9.5 16.6 18.3 24.2 8.8 7.6 19.4 13.4 31.9 17.5s26.8 6.1 43 6.1c14.3 0 27.6-1.4 39.9-4.3 12.3-2.9 26-7.9 41.2-15v-55.9c-17.8 11.7-35.7 17.5-53.7 17.5-10.1 0-19.1-2.4-27-7.1-5.9-3.5-10-8.2-12.2-14-2.2-5.8-3.3-19.1-3.3-39.7v-91.1h84.6v-55.8h-84.4v-90h-50.3z'/%3E%3C/svg%3E")}.amp-social-share-whatsapp{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath fill='%23FFF' d='M35.4 10.4C32 6.9 27.3 5 22.5 5 12.3 5 4.1 13.3 4.2 23.4c0 3.2.9 6.3 2.4 9.1L4 42l9.7-2.5c2.7 1.5 5.7 2.2 8.7 2.2 10.1 0 18.3-8.3 18.3-18.4 0-4.9-1.9-9.5-5.3-12.9zM22.5 38.6c-2.7 0-5.4-.7-7.7-2.1l-.6-.3-5.8 1.5L9.9 32l-.4-.6c-4.4-7.1-2.3-16.5 4.9-20.9 7.2-4.4 16.5-2.3 20.9 4.9 4.4 7.2 2.3 16.5-4.9 20.9-2.3 1.5-5.1 2.3-7.9 2.3zm8.8-11.1l-1.1-.5s-1.6-.7-2.6-1.2c-.1 0-.2-.1-.3-.1-.3 0-.5.1-.7.2 0 0-.1.1-1.5 1.7-.1.2-.3.3-.5.3h-.1c-.1 0-.3-.1-.4-.2l-.5-.2c-1.1-.5-2.1-1.1-2.9-1.9-.2-.2-.5-.4-.7-.6-.7-.7-1.4-1.5-1.9-2.4l-.1-.2c-.1-.1-.1-.2-.2-.4 0-.2 0-.4.1-.5 0 0 .4-.5.7-.8.2-.2.3-.5.5-.7.2-.3.3-.7.2-1-.1-.5-1.3-3.2-1.6-3.8-.2-.3-.4-.4-.7-.5h-1.1c-.2 0-.4.1-.6.1l-.1.1c-.2.1-.4.3-.6.4-.2.2-.3.4-.5.6-.7.9-1.1 2-1.1 3.1 0 .8.2 1.6.5 2.3l.1.3c.9 1.9 2.1 3.6 3.7 5.1l.4.4c.3.3.6.5.8.8 2.1 1.8 4.5 3.1 7.2 3.8.3.1.7.1 1 .2h1c.5 0 1.1-.2 1.5-.4.3-.2.5-.2.7-.4l.2-.2c.2-.2.4-.3.6-.5.2-.2.4-.4.5-.6.2-.4.3-.9.4-1.4v-.7s-.1-.1-.3-.2z'/%3E%3C/svg%3E")}.amp-social-share-line{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 511.99'%3E%3Cpath d='M443.2 233.29c0-84.14-84.35-152.6-188-152.6s-188 68.46-188 152.6c0 75.43 66.9 138.61 157.26 150.55 6.13 1.32 14.46 4 16.57 9.27 1.89 4.76 1.24 12.2.61 17 0 0-2.21 13.26-2.69 16.09-.82 4.75-3.78 18.6 16.29 10.14s108.21-63.76 147.66-109.16c27.25-29.89 40.3-60.18 40.3-93.89zm-254.38 44.92a3.67 3.67 0 0 1-3.66 3.67h-52.69a3.6 3.6 0 0 1-2.53-1l-.06-.05v-.05a3.65 3.65 0 0 1-1-2.53v-81.96a3.66 3.66 0 0 1 3.66-3.66h13.19a3.66 3.66 0 0 1 3.66 3.66v65.07h35.84a3.66 3.66 0 0 1 3.66 3.66zm31.8 0a3.65 3.65 0 0 1-3.66 3.65h-13.2a3.65 3.65 0 0 1-3.66-3.65v-81.92a3.66 3.66 0 0 1 3.66-3.66H217a3.66 3.66 0 0 1 3.66 3.66zm90.78 0a3.65 3.65 0 0 1-3.66 3.65h-13.19a3.67 3.67 0 0 1-.94-.12h-.05l-.25-.08h-.11l-.18-.08-.17-.08-.11-.06-.22-.14a3.45 3.45 0 0 1-.93-.9L254 229.56v48.66a3.66 3.66 0 0 1-3.67 3.65H237.1a3.65 3.65 0 0 1-3.66-3.65v-81.93a3.66 3.66 0 0 1 3.66-3.66h13.86l.21.05h.13l.21.07h.12a1.31 1.31 0 0 1 .21.08l.12.06.19.11a.41.41 0 0 1 .11.07l.19.13.1.07.19.16.07.07a2.28 2.28 0 0 1 .22.22 3.58 3.58 0 0 1 .28.37L290.89 245v-48.71a3.66 3.66 0 0 1 3.66-3.66h13.19a3.66 3.66 0 0 1 3.66 3.66zm72.83-68.74a3.66 3.66 0 0 1-3.65 3.67h-35.84V227h35.84a3.66 3.66 0 0 1 3.65 3.67v13.19a3.65 3.65 0 0 1-3.65 3.66h-35.84v13.85h35.84a3.65 3.65 0 0 1 3.65 3.66v13.19a3.66 3.66 0 0 1-3.65 3.67h-52.7a3.66 3.66 0 0 1-2.53-1l-.05-.05a.12.12 0 0 1-.05-.05 3.65 3.65 0 0 1-1-2.53V196.3a3.6 3.6 0 0 1 1-2.52l.06-.07a3.63 3.63 0 0 1 2.54-1h52.7a3.66 3.66 0 0 1 3.65 3.67z' fill='%23fff' data-name='レイヤー 1'/%3E%3C/svg%3E")}.amp-social-share-sms{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='29' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23FFF' stroke-width='3' d='M8.73 26v-5.658H2V2h25.97L28 20.355l-12.062.042z' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E")}.amp-social-share-system{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E")}amp-social-share{background-repeat:no-repeat;background-position:50%;background-size:contain;text-decoration:none;cursor:pointer;position:relative}.amp-social-share-twitter{background-color:#1da1f2}.amp-social-share-facebook{background-color:#3b5998}.amp-social-share-pinterest{background-color:#bd081c}.amp-social-share-linkedin{background-color:#0077b5}.amp-social-share-gplus{background-color:#dc4e41}.amp-social-share-tumblr{background-color:#3c5a77}.amp-social-share-email{background-color:#000}.amp-social-share-whatsapp{background-color:#25d366}.amp-social-share-line{background-color:#52b448}.amp-social-share-sms{background-color:#ca2b63}.amp-social-share-system{background-color:#000}
-/*# sourceURL=/extensions/amp-social-share/0.1/amp-social-share.css*/</style><style amp-extension="amp-form">form.amp-form-submit-error [submit-error],form.amp-form-submit-success [submit-success],form.amp-form-submitting [submitting]{display:block}.i-amphtml-validation-bubble{-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%);background-color:#fff;box-shadow:0 5px 15px 0 rgba(0,0,0,0.5);max-width:200px;position:absolute;display:block;box-sizing:border-box;padding:10px;border-radius:5px}.i-amphtml-validation-bubble:after{content:" ";position:absolute;bottom:-8px;left:30px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff}[visible-when-invalid]{color:red}
-/*# sourceURL=/extensions/amp-form/0.1/amp-form.css*/</style><style amp-extension="amp-fit-text">.i-amphtml-fit-text-content,.i-amphtml-fit-text-content.i-amphtml-fill-content{display:block;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.i-amphtml-fit-text-content-overflown{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
-/*# sourceURL=/extensions/amp-fit-text/0.1/amp-fit-text.css*/</style><style amp-extension="amp-carousel">.amp-carousel-slide>.i-amphtml-replaced-content{-o-object-fit:contain;object-fit:contain}.amp-carousel-button{position:absolute;box-sizing:border-box;top:50%;height:34px;width:34px;border-radius:2px;opacity:0;pointer-events:all;background-color:rgba(0,0,0,0.5);background-position:50% 50%;background-repeat:no-repeat;-webkit-transform:translateY(-50%);transform:translateY(-50%);visibility:hidden;z-index:10}.amp-mode-mouse .amp-carousel-button,amp-carousel[controls] .amp-carousel-button{opacity:1;visibility:visible}.amp-carousel-button-prev{left:16px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23fff'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E");background-size:18px 18px}.amp-carousel-button-next{right:16px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23fff'%3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E");background-size:18px 18px}.i-amphtml-carousel-button-start-hint .amp-carousel-button:not(.amp-disabled){-webkit-animation:i-amphtml-carousel-hint 1s ease-in 3s 1 normal both;animation:i-amphtml-carousel-hint 1s ease-in 3s 1 normal both}.amp-mode-mouse .i-amphtml-carousel-button-start-hint .amp-carousel-button:not(.amp-disabled){-webkit-animation:none;animation:none}@-webkit-keyframes i-amphtml-carousel-hint{0%{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}@keyframes i-amphtml-carousel-hint{0%{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}amp-carousel .amp-carousel-button.amp-disabled{-webkit-animation:none;animation:none;opacity:0;visibility:hidden}.i-amphtml-slides-container{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:100%!important;left:0;overflow-x:auto!important;overflow-y:hidden!important;position:absolute!important;top:0;width:100%!important;-webkit-scroll-snap-type:x mandatory!important;scroll-snap-type:x mandatory!important;padding-bottom:20px!important;box-sizing:content-box!important;-webkit-overflow-scrolling:touch!important}.i-amphtml-slides-container.i-amphtml-no-scroll{overflow-x:hidden!important}.i-amphtml-slide-item{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important;display:none!important;-webkit-box-flex:0!important;-ms-flex:0 0 100%!important;flex:0 0 100%!important;height:100%!important;-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important;position:relative!important;scroll-snap-align:start!important;width:100%!important}.i-amphtml-slide-item>*{height:100%;width:100%;overflow:hidden!important}.i-amphtml-slide-item-show{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.i-amphtml-carousel-end-marker,.i-amphtml-carousel-start-marker{background-color:transparent!important;display:block!important;-webkit-box-flex:0!important;-ms-flex:0 0 1px!important;flex:0 0 1px!important;height:100%!important;position:relative!important;scroll-snap-align:start!important;width:1px!important}.i-amphtml-carousel-start-marker{-webkit-box-ordinal-group:0!important;-ms-flex-order:-1!important;order:-1!important;margin-left:-1px!important}.i-amphtml-carousel-end-marker{-webkit-box-ordinal-group:100000001!important;-ms-flex-order:100000000!important;order:100000000!important;margin-right:-1px!important}.i-amphtml-slidescroll-no-snap.i-amphtml-slides-container{-webkit-scroll-snap-type:none!important;scroll-snap-type:none!important}.i-amphtml-slidescroll-no-snap .i-amphtml-slide-item{scroll-snap-align:none!important}.i-amphtml-slidescroll-no-snap.i-amphtml-slides-container.i-amphtml-no-scroll{-webkit-overflow-scrolling:auto!important}.amp-scrollable-carousel-slide{display:inline-block!important;margin-left:8px}.amp-scrollable-carousel-slide:first-child{margin-left:0px}.i-amphtml-scrollable-carousel-container{white-space:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important}
-/*# sourceURL=/extensions/amp-carousel/0.1/amp-carousel.css*/</style><meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport"><meta content="vendor=doubleclick,type=impression-id,value=CM6Vy-Xl_N4CFcJgwQods48FUA" name="amp4ads-id"><meta content="noindex" name="robots"><link as="script" href="http://localhost:__TEST_SERVER_PORT__/dist/amp-inabox.js" rel="preload"><script async="" src="http://localhost:__TEST_SERVER_PORT__/dist/amp-inabox.js"></script><script async="" custom-element="amp-accordion" src="http://localhost:__TEST_SERVER_PORT__/dist/v0/amp-accordion-0.1.max.js"></script><script async="" custom-element="amp-analytics" src="http://localhost:__TEST_SERVER_PORT__/dist/v0/amp-analytics-0.1.max.js"></script><script async="" custom-element="amp-anim" src="http://localhost:__TEST_SERVER_PORT__/dist/v0/amp-anim-0.1.max.js"></script><script async="" custom-element="amp-audio" src="http://localhost:__TEST_SERVER_PORT__/dist/v0/amp-audio-0.1.max.js"></script><script async="" custom-element="amp-carousel" src="http://localhost:__TEST_SERVER_PORT__/dist/v0/amp-carousel-0.1.max.js"></script><script async="" custom-element="amp-fit-text" src="http://localhost:__TEST_SERVER_PORT__/dist/v0/amp-fit-text-0.1.max.js"></script><script async="" custom-element="amp-font" src="http://localhost:__TEST_SERVER_PORT__/dist/v0/amp-font-0.1.max.js"></script><script async="" custom-element="amp-form" src="http://localhost:__TEST_SERVER_PORT__/dist/v0/amp-form-0.1.max.js"></script><script async="" custom-element="amp-social-share" src="http://localhost:__TEST_SERVER_PORT__/dist/v0/amp-social-share-0.1.max.js"></script><style amp-custom="">.body {}
-</style></head><body marginwidth="0" marginheight="0" class="amp-mode-mouse" style="opacity: 1; visibility: visible; animation: none 0s ease 0s 1 normal none running;"><amp-pixel allow-ssr-img="" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-element" i-amphtml-layout="fixed" i-amphtml-ssr="" src="http:__VIEW_URL__" style="width:1px;height:1px;" aria-hidden="true"><img src="http:__VIEW_URL__"></amp-pixel><a href="https://google.com/" target="_blank">
-    <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-element i-amphtml-layout" height="200" i-amphtml-layout="fixed" i-amphtml-ssr="" src="http://localhost:__TEST_SERVER_PORT__/test/fixtures/served/cupcake.jpg" style="width:300px;height:200px;" width="300">
-    <img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" src="http://localhost:__TEST_SERVER_PORT__/test/fixtures/served/cupcake.jpg"></amp-img>
-  </a>
-  <amp-analytics class="i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-element" i-amphtml-layout="fixed" style="width:1px;height:1px;" trigger="immediate" aria-hidden="true" hidden="">
-    <script type="application/json">
-      {
-        "transport": {"beacon": false, "xhrpost": false},
-        "requests": {
-          "visibility": "http:__VISIBLE_URL__"
-        },
-        "triggers": {
-          "pageVisible": {
-            "on": "visible",
-            "request": "visibility",
-            "vars": { "type": "pageVisible" }
+<html
+  amp4ads=""
+  class="i-amphtml-inabox i-amphtml-singledoc i-amphtml-standalone i-amphtml-iframed"
+  i-amphtml-layout=""
+  i-amphtml-no-boilerplate=""
+  amp-version="1811091519050"
+>
+  <head>
+    <meta charset="utf-8" />
+    <style amp-runtime="" i-amphtml-version="011811091519050">
+      html {
+        overflow-x: hidden !important;
+      }
+      body,
+      html {
+        height: auto !important;
+      }
+      html.i-amphtml-fie {
+        height: 100% !important;
+        width: 100% !important;
+      }
+      body {
+        margin: 0 !important;
+        -webkit-text-size-adjust: 100%;
+        -moz-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+        text-size-adjust: 100%;
+      }
+      [hidden] {
+        display: none !important;
+      }
+      html.i-amphtml-singledoc.i-amphtml-embedded {
+        -ms-touch-action: pan-y;
+        touch-action: pan-y;
+      }
+      html.i-amphtml-fie > body,
+      html.i-amphtml-singledoc > body {
+        overflow: visible !important;
+      }
+      html.i-amphtml-fie:not(.i-amphtml-inabox) > body,
+      html.i-amphtml-singledoc:not(.i-amphtml-inabox) > body {
+        position: relative !important;
+      }
+      html.i-amphtml-webview > body {
+        overflow-x: hidden !important;
+        overflow-y: visible !important;
+        min-height: 100vh !important;
+      }
+      html.i-amphtml-ios-embed-legacy > body {
+        overflow-x: hidden !important;
+        overflow-y: auto !important;
+        position: absolute !important;
+      }
+      html.i-amphtml-ios-embed {
+        overflow-y: auto !important;
+        position: static;
+      }
+      #i-amphtml-wrapper {
+        overflow-x: hidden !important;
+        overflow-y: auto !important;
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        margin: 0 !important;
+        display: block !important;
+      }
+      html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,
+      html.i-amphtml-ios-embed.i-amphtml-ios-overscroll > #i-amphtml-wrapper {
+        -webkit-overflow-scrolling: touch !important;
+      }
+      #i-amphtml-wrapper > body {
+        position: relative !important;
+        border-top: 1px solid transparent !important;
+      }
+      html.i-amphtml-ios-embed-sd {
+        overflow: hidden !important;
+        position: static !important;
+      }
+      html.i-amphtml-ios-embed-sd > body,
+      html.i-amphtml-singledoc.i-amphtml-ios-embed-sd > body {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        overflow: hidden !important;
+      }
+      .i-amphtml-body-minheight > body {
+        min-height: calc(100vh + 1px);
+      }
+      .i-amphtml-element {
+        display: inline-block;
+      }
+      .i-amphtml-blurry-placeholder {
+        -webkit-transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1) !important;
+        transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1) !important;
+      }
+      [layout='nodisplay']:not(.i-amphtml-element) {
+        display: none !important;
+      }
+      .i-amphtml-layout-fixed,
+      [layout='fixed'][width][height]:not(.i-amphtml-layout-fixed) {
+        display: inline-block;
+        position: relative;
+      }
+      .i-amphtml-layout-responsive,
+      [layout='responsive'][width][height]:not(.i-amphtml-layout-responsive),
+      [width][height][sizes]:not(.i-amphtml-layout-responsive) {
+        display: block;
+        position: relative;
+      }
+      .i-amphtml-layout-intrinsic {
+        display: inline-block;
+        position: relative;
+        max-width: 100%;
+      }
+      .i-amphtml-intrinsic-sizer {
+        max-width: 100%;
+        display: block !important;
+      }
+      .i-amphtml-layout-container,
+      .i-amphtml-layout-fixed-height,
+      [layout='container'],
+      [layout='fixed-height'][height] {
+        display: block;
+        position: relative;
+      }
+      .i-amphtml-layout-fill,
+      [layout='fill']:not(.i-amphtml-layout-fill) {
+        display: block;
+        overflow: hidden !important;
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+      }
+      .i-amphtml-layout-flex-item,
+      [layout='flex-item']:not(.i-amphtml-layout-flex-item) {
+        display: block;
+        position: relative;
+        -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+        flex: 1 1 auto;
+      }
+      .i-amphtml-layout-fluid {
+        position: relative;
+      }
+      .i-amphtml-layout-size-defined {
+        overflow: hidden !important;
+      }
+      .i-amphtml-layout-awaiting-size {
+        position: absolute !important;
+        top: auto !important;
+        bottom: auto !important;
+      }
+      i-amphtml-sizer {
+        display: block !important;
+      }
+      .i-amphtml-blurry-placeholder,
+      .i-amphtml-fill-content {
+        display: block;
+        height: 0;
+        max-height: 100%;
+        max-width: 100%;
+        min-height: 100%;
+        min-width: 100%;
+        width: 0;
+        margin: auto;
+      }
+      .i-amphtml-layout-size-defined .i-amphtml-fill-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+      }
+      .i-amphtml-layout-intrinsic .i-amphtml-sizer {
+        max-width: 100%;
+      }
+      .i-amphtml-replaced-content,
+      .i-amphtml-screen-reader {
+        padding: 0 !important;
+        border: none !important;
+      }
+      .i-amphtml-screen-reader {
+        position: fixed !important;
+        top: 0px !important;
+        left: 0px !important;
+        width: 4px !important;
+        height: 4px !important;
+        opacity: 0 !important;
+        overflow: hidden !important;
+        margin: 0 !important;
+        display: block !important;
+        visibility: visible !important;
+      }
+      .i-amphtml-screen-reader ~ .i-amphtml-screen-reader {
+        left: 8px !important;
+      }
+      .i-amphtml-screen-reader
+        ~ .i-amphtml-screen-reader
+        ~ .i-amphtml-screen-reader {
+        left: 12px !important;
+      }
+      .i-amphtml-screen-reader
+        ~ .i-amphtml-screen-reader
+        ~ .i-amphtml-screen-reader
+        ~ .i-amphtml-screen-reader {
+        left: 16px !important;
+      }
+      .i-amphtml-unresolved {
+        position: relative;
+        overflow: hidden !important;
+      }
+      #i-amphtml-wrapper.i-amphtml-scroll-disabled,
+      .i-amphtml-scroll-disabled {
+        overflow-x: hidden !important;
+        overflow-y: hidden !important;
+      }
+      .i-amphtml-select-disabled {
+        -webkit-user-select: none !important;
+        -moz-user-select: none !important;
+        -ms-user-select: none !important;
+        user-select: none !important;
+      }
+      .i-amphtml-notbuilt,
+      [layout]:not(.i-amphtml-element) {
+        position: relative;
+        overflow: hidden !important;
+        color: transparent !important;
+      }
+      .i-amphtml-notbuilt:not(.i-amphtml-layout-container) > *,
+      [layout]:not([layout='container']):not(.i-amphtml-element) > * {
+        display: none;
+      }
+      .i-amphtml-ghost {
+        visibility: hidden !important;
+      }
+      .i-amphtml-element > [placeholder],
+      [layout]:not(.i-amphtml-element) > [placeholder] {
+        display: block;
+      }
+      .i-amphtml-element > [placeholder].amp-hidden,
+      .i-amphtml-element > [placeholder].hidden {
+        visibility: hidden;
+      }
+      .i-amphtml-element:not(.amp-notsupported) > [fallback],
+      .i-amphtml-layout-container > [placeholder].amp-hidden,
+      .i-amphtml-layout-container > [placeholder].hidden {
+        display: none;
+      }
+      .i-amphtml-layout-size-defined > [fallback],
+      .i-amphtml-layout-size-defined > [placeholder] {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        z-index: 1;
+      }
+      .i-amphtml-notbuilt > [placeholder] {
+        display: block !important;
+      }
+      .i-amphtml-hidden-by-media-query {
+        display: none !important;
+      }
+      .i-amphtml-element-error {
+        background: red !important;
+        color: #fff !important;
+        position: relative !important;
+      }
+      .i-amphtml-element-error:before {
+        content: attr(error-message);
+      }
+      i-amp-scroll-container,
+      i-amphtml-scroll-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: block;
+      }
+      i-amp-scroll-container.amp-active,
+      i-amphtml-scroll-container.amp-active {
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+      .i-amphtml-loading-container {
+        display: block !important;
+        z-index: 1;
+      }
+      .i-amphtml-notbuilt > .i-amphtml-loading-container {
+        display: block !important;
+      }
+      .i-amphtml-loading-container.amp-hidden {
+        visibility: hidden;
+      }
+      amp-list[resizable-children] > .i-amphtml-loading-container.amp-hidden {
+        display: none !important;
+      }
+      .i-amphtml-loader-line {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        overflow: hidden !important;
+        background-color: hsla(0, 0%, 59.2%, 0.2);
+        display: block;
+      }
+      .i-amphtml-loader-moving-line {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100% !important;
+        background-color: hsla(0, 0%, 59.2%, 0.65);
+        z-index: 2;
+      }
+      @-webkit-keyframes i-amphtml-loader-line-moving {
+        0% {
+          -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+        }
+        to {
+          -webkit-transform: translateX(100%);
+          transform: translateX(100%);
+        }
+      }
+      @keyframes i-amphtml-loader-line-moving {
+        0% {
+          -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+        }
+        to {
+          -webkit-transform: translateX(100%);
+          transform: translateX(100%);
+        }
+      }
+      .i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line {
+        -webkit-animation: i-amphtml-loader-line-moving 4s ease infinite;
+        animation: i-amphtml-loader-line-moving 4s ease infinite;
+      }
+      .i-amphtml-loader {
+        position: absolute;
+        display: block;
+        height: 10px;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translateX(-50%) translateY(-50%);
+        transform: translateX(-50%) translateY(-50%);
+        -webkit-transform-origin: 50% 50%;
+        transform-origin: 50% 50%;
+        white-space: nowrap;
+      }
+      .i-amphtml-loader.amp-active .i-amphtml-loader-dot {
+        -webkit-animation: i-amphtml-loader-dots 2s infinite;
+        animation: i-amphtml-loader-dots 2s infinite;
+      }
+      .i-amphtml-loader-dot {
+        position: relative;
+        display: inline-block;
+        height: 10px;
+        width: 10px;
+        margin: 2px;
+        border-radius: 100%;
+        background-color: rgba(0, 0, 0, 0.3);
+        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+        will-change: transform;
+      }
+      .i-amphtml-loader .i-amphtml-loader-dot:first-child {
+        -webkit-animation-delay: 0s;
+        animation-delay: 0s;
+      }
+      .i-amphtml-loader .i-amphtml-loader-dot:nth-child(2) {
+        -webkit-animation-delay: 0.1s;
+        animation-delay: 0.1s;
+      }
+      .i-amphtml-loader .i-amphtml-loader-dot:nth-child(3) {
+        -webkit-animation-delay: 0.2s;
+        animation-delay: 0.2s;
+      }
+      @-webkit-keyframes i-amphtml-loader-dots {
+        0%,
+        to {
+          -webkit-transform: scale(0.7);
+          transform: scale(0.7);
+          background-color: rgba(0, 0, 0, 0.3);
+        }
+        50% {
+          -webkit-transform: scale(0.8);
+          transform: scale(0.8);
+          background-color: rgba(0, 0, 0, 0.5);
+        }
+      }
+      @keyframes i-amphtml-loader-dots {
+        0%,
+        to {
+          -webkit-transform: scale(0.7);
+          transform: scale(0.7);
+          background-color: rgba(0, 0, 0, 0.3);
+        }
+        50% {
+          -webkit-transform: scale(0.8);
+          transform: scale(0.8);
+          background-color: rgba(0, 0, 0, 0.5);
+        }
+      }
+      .i-amphtml-element > [overflow] {
+        cursor: pointer;
+        position: relative;
+        z-index: 2;
+        visibility: hidden;
+      }
+      .i-amphtml-element > [overflow].amp-visible {
+        visibility: visible;
+      }
+      amp-list[load-more] > [load-more-button],
+      amp-list[load-more] > [load-more-button] > .i-amphtml-loader,
+      amp-list[load-more] > [load-more-failed],
+      amp-list[load-more] > [load-more-loading] {
+        visibility: hidden;
+      }
+      amp-list[load-more] > [load-more-button].amp-visible,
+      amp-list[load-more] > [load-more-failed].amp-visible,
+      amp-list[load-more] > [load-more-loading].amp-visible {
+        visibility: visible;
+      }
+      template {
+        display: none !important;
+      }
+      .amp-border-box,
+      .amp-border-box *,
+      .amp-border-box :after,
+      .amp-border-box :before {
+        box-sizing: border-box;
+      }
+      amp-pixel {
+        display: none !important;
+      }
+      amp-instagram {
+        padding: 64px 0px 0px !important;
+        background-color: #fff;
+      }
+      amp-analytics,
+      amp-story-auto-ads {
+        position: fixed !important;
+        top: 0 !important;
+        width: 1px !important;
+        height: 1px !important;
+        overflow: hidden !important;
+        visibility: hidden;
+      }
+      amp-iframe iframe {
+        box-sizing: border-box !important;
+      }
+      [amp-access][amp-access-hide] {
+        display: none;
+      }
+      [subscriptions-dialog],
+      body:not(.i-amphtml-subs-ready) [subscriptions-action],
+      body:not(.i-amphtml-subs-ready) [subscriptions-section] {
+        display: none !important;
+      }
+      [visible-when-invalid]:not(.visible),
+      amp-experiment,
+      amp-live-list > [update],
+      form [submit-error],
+      form [submit-success],
+      form [submitting] {
+        display: none;
+      }
+      .i-amphtml-jank-meter {
+        position: fixed;
+        background-color: rgba(232, 72, 95, 0.5);
+        bottom: 0;
+        right: 0;
+        color: #fff;
+        font-size: 16px;
+        z-index: 1000;
+        padding: 5px;
+      }
+      amp-accordion {
+        display: block !important;
+      }
+      amp-accordion > section {
+        float: none !important;
+      }
+      amp-accordion > section > * {
+        float: none !important;
+        display: block !important;
+        overflow: hidden !important;
+        position: relative !important;
+      }
+      .i-amphtml-accordion-content,
+      .i-amphtml-accordion-header,
+      amp-accordion,
+      amp-accordion > section {
+        margin: 0;
+      }
+      .i-amphtml-accordion-header {
+        cursor: pointer;
+        background-color: #efefef;
+        padding-right: 20px;
+        border: 1px solid #dfdfdf;
+      }
+      amp-accordion > section > :last-child {
+        display: none !important;
+      }
+      amp-accordion > section[expanded] > :last-child {
+        display: block !important;
+      }
+      amp-story-page,
+      amp-story[standalone] {
+        display: block !important;
+        height: 100% !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        overflow: hidden !important;
+        width: 100% !important;
+      }
+      amp-story[standalone] {
+        background-color: #fff !important;
+        position: relative !important;
+      }
+      amp-story-page {
+        background-color: #757575;
+      }
+      amp-story .i-amphtml-loader {
+        display: none !important;
+      }
+      [amp-fx^='fly-in'] {
+        visibility: hidden;
+      }
+      /*# sourceURL=/css/amp.css*/
+      html.i-amphtml-inabox {
+        width: 100% !important;
+        height: 100% !important;
+      }
+    </style>
+    <style amp-extension="amp-social-share">
+      .amp-social-share-facebook {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M211.9 197.4h-36.7v59.9h36.7v175.8h70.5V256.5h49.2l5.2-59.1h-54.4v-33.7c0-13.9 2.8-19.5 16.3-19.5h38.2V82.9h-48.8c-52.5 0-76.1 23.1-76.1 67.3-.1 38.6-.1 47.2-.1 47.2z'/%3E%3C/svg%3E");
+      }
+      .amp-social-share-pinterest {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M266.6 76.5c-100.2 0-150.7 71.8-150.7 131.7 0 36.3 13.7 68.5 43.2 80.6 4.8 2 9.2.1 10.6-5.3 1-3.7 3.3-13 4.3-16.9 1.4-5.3.9-7.1-3-11.8-8.5-10-13.9-23-13.9-41.3 0-53.3 39.9-101 103.8-101 56.6 0 87.7 34.6 87.7 80.8 0 60.8-26.9 112.1-66.8 112.1-22.1 0-38.6-18.2-33.3-40.6 6.3-26.7 18.6-55.5 18.6-74.8 0-17.3-9.3-31.7-28.4-31.7-22.5 0-40.7 23.3-40.7 54.6 0 19.9 6.7 33.4 6.7 33.4s-23.1 97.8-27.1 114.9c-8.1 34.1-1.2 75.9-.6 80.1.3 2.5 3.6 3.1 5 1.2 2.1-2.7 28.9-35.9 38.1-69 2.6-9.4 14.8-58 14.8-58 7.3 14 28.7 26.3 51.5 26.3 67.8 0 113.8-61.8 113.8-144.5-.1-62.6-53.1-120.8-133.6-120.8z'/%3E%3C/svg%3E");
+      }
+      .amp-social-share-linkedin {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M186.4 142.4c0 19-15.3 34.5-34.2 34.5-18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5 18.9 0 34.2 15.5 34.2 34.5zm-5 58.9h-57.8v186.8h57.8V201.3zm92.4 0h-55.4v186.8h55.4v-98c0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9v98H398V269.8c0-50-28.3-74.2-68-74.2-39.6 0-56.3 30.9-56.3 30.9v-25.2h.1z'/%3E%3C/svg%3E");
+      }
+      .amp-social-share-gplus {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M179.7 237.6v46.6h77c-3.1 20-23.3 58.7-77 58.7-46.3 0-84.1-38.5-84.1-85.9 0-47.4 37.8-85.9 84.1-85.9 26.4 0 44 11.3 54.1 21l36.8-35.5C247 134.4 216.4 121 179.7 121 104.7 121 44 181.8 44 257s60.7 136 135.7 136C258 393 310 337.8 310 260.1c0-8.9-1-15.7-2.1-22.5H179.7zm288.3-.9h-38.7V198h-38.6v38.7H352v38.6h38.7V314h38.6v-38.7H468'/%3E%3C/svg%3E");
+      }
+      .amp-social-share-email {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M101.3 141.6v228.9h309.5V141.6H101.3zm274.4 26.2L256 259.3l-119.6-91.5h239.3zm-248.1 26.3l64.1 49.1-64.1 64.1V194.1zm.2 150.1l84.9-84.9 43.2 33.1 43-32.9 84.7 84.7H127.8zm256.6-36.4L320 243.4l64.4-49.3v113.7z'/%3E%3C/svg%3E");
+      }
+      .amp-social-share-twitter {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h400v400H0z'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M153.62 301.59c94.34 0 145.94-78.16 145.94-145.94 0-2.22 0-4.43-.15-6.63A104.36 104.36 0 0 0 325 122.47a102.38 102.38 0 0 1-29.46 8.07 51.47 51.47 0 0 0 22.55-28.37 102.79 102.79 0 0 1-32.57 12.45c-15.9-16.906-41.163-21.044-61.625-10.093-20.461 10.95-31.032 34.266-25.785 56.873A145.62 145.62 0 0 1 92.4 107.81c-13.614 23.436-6.66 53.419 15.88 68.47A50.91 50.91 0 0 1 85 169.86v.65c.007 24.416 17.218 45.445 41.15 50.28a51.21 51.21 0 0 1-23.16.88c6.72 20.894 25.976 35.208 47.92 35.62a102.92 102.92 0 0 1-63.7 22 104.41 104.41 0 0 1-12.21-.74 145.21 145.21 0 0 0 78.62 23'/%3E%3C/g%3E%3C/svg%3E");
+      }
+      .amp-social-share-tumblr {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M210.8 80.3c-2.3 18.3-6.4 33.4-12.4 45.2-6 11.9-13.9 22-23.9 30.5-9.9 8.5-21.8 14.9-35.7 19.5v50.6h38.9v124.5c0 16.2 1.7 28.6 5.1 37.1 3.4 8.5 9.5 16.6 18.3 24.2 8.8 7.6 19.4 13.4 31.9 17.5s26.8 6.1 43 6.1c14.3 0 27.6-1.4 39.9-4.3 12.3-2.9 26-7.9 41.2-15v-55.9c-17.8 11.7-35.7 17.5-53.7 17.5-10.1 0-19.1-2.4-27-7.1-5.9-3.5-10-8.2-12.2-14-2.2-5.8-3.3-19.1-3.3-39.7v-91.1h84.6v-55.8h-84.4v-90h-50.3z'/%3E%3C/svg%3E");
+      }
+      .amp-social-share-whatsapp {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath fill='%23FFF' d='M35.4 10.4C32 6.9 27.3 5 22.5 5 12.3 5 4.1 13.3 4.2 23.4c0 3.2.9 6.3 2.4 9.1L4 42l9.7-2.5c2.7 1.5 5.7 2.2 8.7 2.2 10.1 0 18.3-8.3 18.3-18.4 0-4.9-1.9-9.5-5.3-12.9zM22.5 38.6c-2.7 0-5.4-.7-7.7-2.1l-.6-.3-5.8 1.5L9.9 32l-.4-.6c-4.4-7.1-2.3-16.5 4.9-20.9 7.2-4.4 16.5-2.3 20.9 4.9 4.4 7.2 2.3 16.5-4.9 20.9-2.3 1.5-5.1 2.3-7.9 2.3zm8.8-11.1l-1.1-.5s-1.6-.7-2.6-1.2c-.1 0-.2-.1-.3-.1-.3 0-.5.1-.7.2 0 0-.1.1-1.5 1.7-.1.2-.3.3-.5.3h-.1c-.1 0-.3-.1-.4-.2l-.5-.2c-1.1-.5-2.1-1.1-2.9-1.9-.2-.2-.5-.4-.7-.6-.7-.7-1.4-1.5-1.9-2.4l-.1-.2c-.1-.1-.1-.2-.2-.4 0-.2 0-.4.1-.5 0 0 .4-.5.7-.8.2-.2.3-.5.5-.7.2-.3.3-.7.2-1-.1-.5-1.3-3.2-1.6-3.8-.2-.3-.4-.4-.7-.5h-1.1c-.2 0-.4.1-.6.1l-.1.1c-.2.1-.4.3-.6.4-.2.2-.3.4-.5.6-.7.9-1.1 2-1.1 3.1 0 .8.2 1.6.5 2.3l.1.3c.9 1.9 2.1 3.6 3.7 5.1l.4.4c.3.3.6.5.8.8 2.1 1.8 4.5 3.1 7.2 3.8.3.1.7.1 1 .2h1c.5 0 1.1-.2 1.5-.4.3-.2.5-.2.7-.4l.2-.2c.2-.2.4-.3.6-.5.2-.2.4-.4.5-.6.2-.4.3-.9.4-1.4v-.7s-.1-.1-.3-.2z'/%3E%3C/svg%3E");
+      }
+      .amp-social-share-line {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 511.99'%3E%3Cpath d='M443.2 233.29c0-84.14-84.35-152.6-188-152.6s-188 68.46-188 152.6c0 75.43 66.9 138.61 157.26 150.55 6.13 1.32 14.46 4 16.57 9.27 1.89 4.76 1.24 12.2.61 17 0 0-2.21 13.26-2.69 16.09-.82 4.75-3.78 18.6 16.29 10.14s108.21-63.76 147.66-109.16c27.25-29.89 40.3-60.18 40.3-93.89zm-254.38 44.92a3.67 3.67 0 0 1-3.66 3.67h-52.69a3.6 3.6 0 0 1-2.53-1l-.06-.05v-.05a3.65 3.65 0 0 1-1-2.53v-81.96a3.66 3.66 0 0 1 3.66-3.66h13.19a3.66 3.66 0 0 1 3.66 3.66v65.07h35.84a3.66 3.66 0 0 1 3.66 3.66zm31.8 0a3.65 3.65 0 0 1-3.66 3.65h-13.2a3.65 3.65 0 0 1-3.66-3.65v-81.92a3.66 3.66 0 0 1 3.66-3.66H217a3.66 3.66 0 0 1 3.66 3.66zm90.78 0a3.65 3.65 0 0 1-3.66 3.65h-13.19a3.67 3.67 0 0 1-.94-.12h-.05l-.25-.08h-.11l-.18-.08-.17-.08-.11-.06-.22-.14a3.45 3.45 0 0 1-.93-.9L254 229.56v48.66a3.66 3.66 0 0 1-3.67 3.65H237.1a3.65 3.65 0 0 1-3.66-3.65v-81.93a3.66 3.66 0 0 1 3.66-3.66h13.86l.21.05h.13l.21.07h.12a1.31 1.31 0 0 1 .21.08l.12.06.19.11a.41.41 0 0 1 .11.07l.19.13.1.07.19.16.07.07a2.28 2.28 0 0 1 .22.22 3.58 3.58 0 0 1 .28.37L290.89 245v-48.71a3.66 3.66 0 0 1 3.66-3.66h13.19a3.66 3.66 0 0 1 3.66 3.66zm72.83-68.74a3.66 3.66 0 0 1-3.65 3.67h-35.84V227h35.84a3.66 3.66 0 0 1 3.65 3.67v13.19a3.65 3.65 0 0 1-3.65 3.66h-35.84v13.85h35.84a3.65 3.65 0 0 1 3.65 3.66v13.19a3.66 3.66 0 0 1-3.65 3.67h-52.7a3.66 3.66 0 0 1-2.53-1l-.05-.05a.12.12 0 0 1-.05-.05 3.65 3.65 0 0 1-1-2.53V196.3a3.6 3.6 0 0 1 1-2.52l.06-.07a3.63 3.63 0 0 1 2.54-1h52.7a3.66 3.66 0 0 1 3.65 3.67z' fill='%23fff' data-name='レイヤー 1'/%3E%3C/svg%3E");
+      }
+      .amp-social-share-sms {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='29' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23FFF' stroke-width='3' d='M8.73 26v-5.658H2V2h25.97L28 20.355l-12.062.042z' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
+      }
+      .amp-social-share-system {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
+      }
+      amp-social-share {
+        background-repeat: no-repeat;
+        background-position: 50%;
+        background-size: contain;
+        text-decoration: none;
+        cursor: pointer;
+        position: relative;
+      }
+      .amp-social-share-twitter {
+        background-color: #1da1f2;
+      }
+      .amp-social-share-facebook {
+        background-color: #3b5998;
+      }
+      .amp-social-share-pinterest {
+        background-color: #bd081c;
+      }
+      .amp-social-share-linkedin {
+        background-color: #0077b5;
+      }
+      .amp-social-share-gplus {
+        background-color: #dc4e41;
+      }
+      .amp-social-share-tumblr {
+        background-color: #3c5a77;
+      }
+      .amp-social-share-email {
+        background-color: #000;
+      }
+      .amp-social-share-whatsapp {
+        background-color: #25d366;
+      }
+      .amp-social-share-line {
+        background-color: #52b448;
+      }
+      .amp-social-share-sms {
+        background-color: #ca2b63;
+      }
+      .amp-social-share-system {
+        background-color: #000;
+      }
+      /*# sourceURL=/extensions/amp-social-share/0.1/amp-social-share.css*/
+    </style>
+    <style amp-extension="amp-form">
+      form.amp-form-submit-error [submit-error],
+      form.amp-form-submit-success [submit-success],
+      form.amp-form-submitting [submitting] {
+        display: block;
+      }
+      .i-amphtml-validation-bubble {
+        -webkit-transform: translate(-50%, -100%);
+        transform: translate(-50%, -100%);
+        background-color: #fff;
+        box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
+        max-width: 200px;
+        position: absolute;
+        display: block;
+        box-sizing: border-box;
+        padding: 10px;
+        border-radius: 5px;
+      }
+      .i-amphtml-validation-bubble:after {
+        content: ' ';
+        position: absolute;
+        bottom: -8px;
+        left: 30px;
+        width: 0;
+        height: 0;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-top: 8px solid #fff;
+      }
+      [visible-when-invalid] {
+        color: red;
+      }
+      /*# sourceURL=/extensions/amp-form/0.1/amp-form.css*/
+    </style>
+    <style amp-extension="amp-fit-text">
+      .i-amphtml-fit-text-content,
+      .i-amphtml-fit-text-content.i-amphtml-fill-content {
+        display: block;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction: column;
+        -ms-flex-wrap: nowrap;
+        flex-wrap: nowrap;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+      }
+      .i-amphtml-fit-text-content-overflown {
+        display: block;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+      /*# sourceURL=/extensions/amp-fit-text/0.1/amp-fit-text.css*/
+    </style>
+    <style amp-extension="amp-carousel">
+      .amp-carousel-slide > .i-amphtml-replaced-content {
+        -o-object-fit: contain;
+        object-fit: contain;
+      }
+      .amp-carousel-button {
+        position: absolute;
+        box-sizing: border-box;
+        top: 50%;
+        height: 34px;
+        width: 34px;
+        border-radius: 2px;
+        opacity: 0;
+        pointer-events: all;
+        background-color: rgba(0, 0, 0, 0.5);
+        background-position: 50% 50%;
+        background-repeat: no-repeat;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        visibility: hidden;
+        z-index: 10;
+      }
+      .amp-mode-mouse .amp-carousel-button,
+      amp-carousel[controls] .amp-carousel-button {
+        opacity: 1;
+        visibility: visible;
+      }
+      .amp-carousel-button-prev {
+        left: 16px;
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23fff'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E");
+        background-size: 18px 18px;
+      }
+      .amp-carousel-button-next {
+        right: 16px;
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23fff'%3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E");
+        background-size: 18px 18px;
+      }
+      .i-amphtml-carousel-button-start-hint
+        .amp-carousel-button:not(.amp-disabled) {
+        -webkit-animation: i-amphtml-carousel-hint 1s ease-in 3s 1 normal both;
+        animation: i-amphtml-carousel-hint 1s ease-in 3s 1 normal both;
+      }
+      .amp-mode-mouse
+        .i-amphtml-carousel-button-start-hint
+        .amp-carousel-button:not(.amp-disabled) {
+        -webkit-animation: none;
+        animation: none;
+      }
+      @-webkit-keyframes i-amphtml-carousel-hint {
+        0% {
+          opacity: 1;
+          visibility: visible;
+        }
+        to {
+          opacity: 0;
+          visibility: hidden;
+        }
+      }
+      @keyframes i-amphtml-carousel-hint {
+        0% {
+          opacity: 1;
+          visibility: visible;
+        }
+        to {
+          opacity: 0;
+          visibility: hidden;
+        }
+      }
+      amp-carousel .amp-carousel-button.amp-disabled {
+        -webkit-animation: none;
+        animation: none;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .i-amphtml-slides-container {
+        display: -webkit-box !important;
+        display: -ms-flexbox !important;
+        display: flex !important;
+        -ms-flex-wrap: nowrap;
+        flex-wrap: nowrap;
+        height: 100% !important;
+        left: 0;
+        overflow-x: auto !important;
+        overflow-y: hidden !important;
+        position: absolute !important;
+        top: 0;
+        width: 100% !important;
+        -webkit-scroll-snap-type: x mandatory !important;
+        scroll-snap-type: x mandatory !important;
+        padding-bottom: 20px !important;
+        box-sizing: content-box !important;
+        -webkit-overflow-scrolling: touch !important;
+      }
+      .i-amphtml-slides-container.i-amphtml-no-scroll {
+        overflow-x: hidden !important;
+      }
+      .i-amphtml-slide-item {
+        -webkit-box-align: center !important;
+        -ms-flex-align: center !important;
+        align-items: center !important;
+        display: none !important;
+        -webkit-box-flex: 0 !important;
+        -ms-flex: 0 0 100% !important;
+        flex: 0 0 100% !important;
+        height: 100% !important;
+        -webkit-box-pack: center !important;
+        -ms-flex-pack: center !important;
+        justify-content: center !important;
+        position: relative !important;
+        scroll-snap-align: start !important;
+        width: 100% !important;
+      }
+      .i-amphtml-slide-item > * {
+        height: 100%;
+        width: 100%;
+        overflow: hidden !important;
+      }
+      .i-amphtml-slide-item-show {
+        display: -webkit-box !important;
+        display: -ms-flexbox !important;
+        display: flex !important;
+      }
+      .i-amphtml-carousel-end-marker,
+      .i-amphtml-carousel-start-marker {
+        background-color: transparent !important;
+        display: block !important;
+        -webkit-box-flex: 0 !important;
+        -ms-flex: 0 0 1px !important;
+        flex: 0 0 1px !important;
+        height: 100% !important;
+        position: relative !important;
+        scroll-snap-align: start !important;
+        width: 1px !important;
+      }
+      .i-amphtml-carousel-start-marker {
+        -webkit-box-ordinal-group: 0 !important;
+        -ms-flex-order: -1 !important;
+        order: -1 !important;
+        margin-left: -1px !important;
+      }
+      .i-amphtml-carousel-end-marker {
+        -webkit-box-ordinal-group: 100000001 !important;
+        -ms-flex-order: 100000000 !important;
+        order: 100000000 !important;
+        margin-right: -1px !important;
+      }
+      .i-amphtml-slidescroll-no-snap.i-amphtml-slides-container {
+        -webkit-scroll-snap-type: none !important;
+        scroll-snap-type: none !important;
+      }
+      .i-amphtml-slidescroll-no-snap .i-amphtml-slide-item {
+        scroll-snap-align: none !important;
+      }
+      .i-amphtml-slidescroll-no-snap.i-amphtml-slides-container.i-amphtml-no-scroll {
+        -webkit-overflow-scrolling: auto !important;
+      }
+      .amp-scrollable-carousel-slide {
+        display: inline-block !important;
+        margin-left: 8px;
+      }
+      .amp-scrollable-carousel-slide:first-child {
+        margin-left: 0px;
+      }
+      .i-amphtml-scrollable-carousel-container {
+        white-space: nowrap !important;
+        overflow-x: auto !important;
+        overflow-y: hidden !important;
+        -webkit-overflow-scrolling: touch !important;
+      }
+      /*# sourceURL=/extensions/amp-carousel/0.1/amp-carousel.css*/
+    </style>
+    <meta
+      content="width=device-width,minimum-scale=1,initial-scale=1"
+      name="viewport"
+    />
+    <meta
+      content="vendor=doubleclick,type=impression-id,value=CM6Vy-Xl_N4CFcJgwQods48FUA"
+      name="amp4ads-id"
+    />
+    <meta content="noindex" name="robots" />
+    <link
+      as="script"
+      href="https://cdn.ampproject.org/amp4ads-v0.js"
+      rel="preload"
+    />
+    <script
+      async=""
+      src="https://cdn.ampproject.org/amp4ads-v0.js"
+    ></script>
+    <script
+      async=""
+      custom-element="amp-accordion"
+      src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"
+    ></script>
+    <script
+      async=""
+      custom-element="amp-analytics"
+      src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
+    ></script>
+    <script
+      async=""
+      custom-element="amp-anim"
+      src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"
+    ></script>
+    <script
+      async=""
+      custom-element="amp-audio"
+      src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"
+    ></script>
+    <script
+      async=""
+      custom-element="amp-carousel"
+      src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
+    ></script>
+    <script
+      async=""
+      custom-element="amp-fit-text"
+      src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"
+    ></script>
+    <script
+      async=""
+      custom-element="amp-font"
+      src="https://cdn.ampproject.org/v0/amp-font-0.1.js"
+    ></script>
+    <script
+      async=""
+      custom-element="amp-form"
+      src="https://cdn.ampproject.org/v0/amp-form-0.1.js"
+    ></script>
+    <script
+      async=""
+      custom-element="amp-social-share"
+      src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"
+    ></script>
+    <style amp-custom="">
+      .body {
+      }
+    </style>
+  </head>
+  <body
+    marginwidth="0"
+    marginheight="0"
+    class="amp-mode-mouse"
+    style="
+      opacity: 1;
+      visibility: visible;
+      animation: none 0s ease 0s 1 normal none running;
+    "
+  >
+    <amp-pixel
+      allow-ssr-img=""
+      class="i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-element"
+      i-amphtml-layout="fixed"
+      i-amphtml-ssr=""
+      src="http:__VIEW_URL__"
+      style="width: 1px; height: 1px;"
+      aria-hidden="true"
+      ><img src="http:__VIEW_URL__" /></amp-pixel
+    ><a href="https://google.com/" target="_blank">
+      <amp-img
+        class="i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-element i-amphtml-layout"
+        height="200"
+        i-amphtml-layout="fixed"
+        i-amphtml-ssr=""
+        src="http://localhost:9876/test/fixtures/served/cupcake.jpg"
+        style="width: 300px; height: 200px;"
+        width="300"
+      >
+        <img
+          class="i-amphtml-fill-content i-amphtml-replaced-content"
+          decoding="async"
+          src="http://localhost:9876/test/fixtures/served/cupcake.jpg"
+      /></amp-img>
+    </a>
+    <amp-analytics
+      class="i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-element"
+      i-amphtml-layout="fixed"
+      style="width: 1px; height: 1px;"
+      trigger="immediate"
+      aria-hidden="true"
+      hidden=""
+    >
+      <script type="application/json">
+        {
+          "transport": {"beacon": false, "xhrpost": false},
+          "requests": {
+            "visibility": "http:__VISIBLE_URL__"
           },
-          "imgVisible": {
-            "on": "visible",
-            "request": "visibility",
-            "visibilitySpec": {
-              "selector": "amp-img",
-              "selectionMethod": "scope",
-              "visiblePercentageMin": 10
+          "triggers": {
+            "pageVisible": {
+              "on": "visible",
+              "request": "visibility",
+              "vars": {"type": "pageVisible"}
             },
-            "vars": { "type": "imgVisible" }
+            "imgVisible": {
+              "on": "visible",
+              "request": "visibility",
+              "visibilitySpec": {
+                "selector": "amp-img",
+                "selectionMethod": "scope",
+                "visiblePercentageMin": 10
+              },
+              "vars": {"type": "imgVisible"}
+            }
           }
         }
-      }
-    </script>
-  </amp-analytics>
-<amp-analytics class="i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-element" i-amphtml-layout="fixed" style="width:1px;height:1px;" trigger="immediate" aria-hidden="true" hidden=""><script type="application/json">{"transport": {"beacon": false, "xhrpost": false},"requests": {"visibility1": "http:__ACTIVE_VIEW_URL__"},"triggers": {"continuousVisible": {"on": "visible","request": ["visibility1"],"visibilitySpec": {"selector": ":root","visiblePercentageMin": 40,"continuousTimeMin": 1000}}}}</script></amp-analytics></body></html>
+      </script>
+    </amp-analytics>
+    <amp-analytics
+      class="i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-element"
+      i-amphtml-layout="fixed"
+      style="width: 1px; height: 1px;"
+      trigger="immediate"
+      aria-hidden="true"
+      hidden=""
+      ><script type="application/json">
+        {
+          "transport": {"beacon": false, "xhrpost": false},
+          "requests": {"visibility1": "http:__ACTIVE_VIEW_URL__"},
+          "triggers": {
+            "continuousVisible": {
+              "on": "visible",
+              "request": ["visibility1"],
+              "visibilitySpec": {
+                "selector": ":root",
+                "visiblePercentageMin": 40,
+                "continuousTimeMin": 1000
+              }
+            }
+          }
+        }
+      </script></amp-analytics
+    >
+  </body>
+</html>
diff --git a/test/fixtures/amp-pan-zoom.html b/test/fixtures/amp-pan-zoom.html
index 075b17facb194..065ea71549689 100644
--- a/test/fixtures/amp-pan-zoom.html
+++ b/test/fixtures/amp-pan-zoom.html
@@ -5,9 +5,8 @@
   <title>AMP Pan Zoom Demo</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-pan-zoom" src="/dist/v0/amp-pan-zoom-0.1.max.js"></script>
-  <script async src="/dist/amp.js"></script>
+  <script async custom-element="amp-pan-zoom" src="https://cdn.ampproject.org/v0/amp-pan-zoom-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
   <amp-pan-zoom id="amp-pan-zoom-1" layout="fixed" width="300" height="241">
@@ -30,4 +29,3 @@
 
 </body>
 </html>
-
diff --git a/test/fixtures/boilerplate-new-visibility.html b/test/fixtures/boilerplate-new-visibility.html
index a1740e02676de..c4dd06b7993e4 100644
--- a/test/fixtures/boilerplate-new-visibility.html
+++ b/test/fixtures/boilerplate-new-visibility.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 
   <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>
-  <script async src="/dist/amp.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
   <h1>AMP boilerplate</h1>
diff --git a/test/fixtures/boilerplate-old-opacity.html b/test/fixtures/boilerplate-old-opacity.html
index bf8abf5241e3d..ee8b6f3eb93d3 100644
--- a/test/fixtures/boilerplate-old-opacity.html
+++ b/test/fixtures/boilerplate-old-opacity.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 
   <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript></noscript>
-  <script async src="/dist/amp.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
   <h1>AMP boilerplate</h1>
diff --git a/test/fixtures/configuration.html b/test/fixtures/configuration.html
index 1d00fbd9f5933..42b00a612da27 100644
--- a/test/fixtures/configuration.html
+++ b/test/fixtures/configuration.html
@@ -6,7 +6,7 @@
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
-  <script async src="/dist/amp.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
   <p>
diff --git a/test/fixtures/datepicker.html b/test/fixtures/datepicker.html
new file mode 100644
index 0000000000000..d4a25ae430cf3
--- /dev/null
+++ b/test/fixtures/datepicker.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>AMP Date Picker Example</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <style amp-custom></style>
+  <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>
+  <!-- NOTE: we explicitly control load order by not using async to prove the AMP.require bug is fixed -->
+  <script custom-element="amp-date-picker" src="/dist/v0/amp-date-picker-0.1.mjs"></script>
+  <script src="/dist/v0.mjs"></script>
+</head>
+<body>
+  <amp-date-picker layout="fixed-height" height="360"> </amp-date-picker>
+</body>
+</html>
diff --git a/test/fixtures/doubleclick.html b/test/fixtures/doubleclick.html
index d94904e450de4..3e5d6db380cf5 100644
--- a/test/fixtures/doubleclick.html
+++ b/test/fixtures/doubleclick.html
@@ -6,7 +6,7 @@
   <link rel="canonical" href="https://www.example.com/doubleclick.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
-  <script async src="/dist/amp.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
   <!-- use custom url to force same origin -->
   <meta name="amp-3p-iframe-src" content="http://localhost:9876/dist.3p/current/frame.max.html">
 </head>
diff --git a/test/fixtures/doubleload-module.html b/test/fixtures/doubleload-module.html
new file mode 100644
index 0000000000000..2ec4b260aa417
--- /dev/null
+++ b/test/fixtures/doubleload-module.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>AMP #0</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style amp-runtime="">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#202125!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,0.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}
+/*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-for-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important}
+/*# sourceURL=/css/ampshared.css*/</style>
+  <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>
+  <!-- IMPORTANT: The order of these script tags matter to tests this properly -->
+  <!-- we use the local versions of the amp library and its extensions so we can forcefully control load ordering -->
+  <script custom-element="amp-carousel" src="/dist/v0/amp-carousel-0.2.mjs"></script>
+  <script custom-element="amp-carousel" src="/dist/v0/amp-carousel-0.2.js"></script>
+  <script src="/dist/v0.mjs"></script>
+  <script src="/dist/v0.js"></script>
+</head>
+<body class="comic-amp-font-loading">
+<amp-carousel
+  width="450"
+  height="300"
+  layout="responsive"
+  type="slides"
+  role="region"
+  aria-label="Basic carousel"
+>
+  <amp-img
+    src="/examples/img/sample.jpg"
+    width="450"
+    height="300"
+  ></amp-img>
+  <amp-img
+    src="/examples/img/sea@1x.jpg"
+    width="450"
+    height="300"
+  ></amp-img>
+  <amp-img
+    src="/examples/img/clock.jpg"
+    width="450"
+    width="450"
+    height="300"
+  ></amp-img>
+</amp-carousel>
+</body>
+</html>
diff --git a/test/fixtures/doubleload-nomodule.html b/test/fixtures/doubleload-nomodule.html
new file mode 100644
index 0000000000000..8a805a2235735
--- /dev/null
+++ b/test/fixtures/doubleload-nomodule.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>AMP #0</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <!-- IMPORTANT: The order of these script tags matter to tests this properly -->
+  <!-- we use the local versions of the amp library and its extensions so we can forcefully control load ordering -->
+  <script custom-element="amp-carousel" src="/dist/v0/amp-carousel-0.2.js"></script>
+  <script custom-element="amp-carousel" src="/dist/v0/amp-carousel-0.2.mjs"></script>
+  <script src="/dist/v0.js"></script>
+  <script src="/dist/v0.mjs"></script>
+</head>
+<body class="comic-amp-font-loading">
+<amp-carousel
+  width="450"
+  height="300"
+  layout="responsive"
+  type="slides"
+  role="region"
+  aria-label="Basic carousel"
+>
+  <amp-img
+    src="/examples/img/sample.jpg"
+    width="450"
+    height="300"
+  ></amp-img>
+  <amp-img
+    src="/examples/img/sea@1x.jpg"
+    width="450"
+    height="300"
+  ></amp-img>
+  <amp-img
+    src="/examples/img/clock.jpg"
+    width="450"
+    width="450"
+    height="300"
+  ></amp-img>
+</amp-carousel>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-accordion/amp-accordion.html b/test/fixtures/e2e/amp-accordion/amp-accordion.html
new file mode 100644
index 0000000000000..e1966ba244971
--- /dev/null
+++ b/test/fixtures/e2e/amp-accordion/amp-accordion.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html ⚡>
+<head>
+    <meta charset="utf-8">
+    <title>amp-accordion</title>
+    <link rel="canonical" href="//example.com" >
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-latest.js"></script>
+    <style amp-custom>
+        section div {
+            height: 25px;
+        }
+    </style>
+</head>
+
+<body>
+    <amp-accordion
+        id="accordion"
+        animate="true"
+      >
+        <section id="section1">
+            <h2 id="header1">Section 1</h2>
+            <div id="content1">Puppies are cute.</div>
+        </section>
+        <section id="section2">
+            <h2 id="header2">Section 2</h2>
+            <div id="content2">Kittens are furry.</div>
+        </section>
+        <section id="section3" expanded>
+            <h2 id="header3">Section 3</h2>
+            <div id="content3">Elephants have great memory.</div>
+        </section>
+    </amp-accordion>
+
+    <div class="buttons">
+        <button id="button1" on="tap:accordion.toggle(section='section1')">
+            toggle(section1)
+        </button>
+        <button id="button2" on="tap:accordion.collapse()">
+            collapse all
+        </button>
+    </div>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-accordion/single-expand.html b/test/fixtures/e2e/amp-accordion/single-expand.html
new file mode 100644
index 0000000000000..1a2620129105b
--- /dev/null
+++ b/test/fixtures/e2e/amp-accordion/single-expand.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html ⚡>
+<head>
+    <meta charset="utf-8">
+    <title>amp-accordion</title>
+    <link rel="canonical" href="//example.com" >
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-latest.js"></script>
+    <style amp-custom>
+        section div {
+            height: 25px;
+        }
+    </style>
+</head>
+
+<body>
+    <amp-accordion
+        id="accordion2"
+        animate="true"
+        expand-single-section="true"
+      >
+        <section id="section2-1">
+            <h2 id="header2-1">Section 1</h2>
+            <div id="content2-1">Puppies are cute.</div>
+        </section>
+        <section id="section2-2">
+            <h2 id="header2-2">Section 2</h2>
+            <div id="content2-2">Kittens are furry.</div>
+        </section>
+        <section id="section2-3" expanded>
+            <h2 id="header2-3">Section 3</h2>
+            <div id="content2-3">Elephants have great memory.</div>
+        </section>
+    </amp-accordion>
+</body>
+</html>
diff --git a/test/manual/amp-autocomplete/amp-autocomplete-inline.amp.html b/test/fixtures/e2e/amp-autocomplete/amp-autocomplete-inline.amp.html
similarity index 95%
rename from test/manual/amp-autocomplete/amp-autocomplete-inline.amp.html
rename to test/fixtures/e2e/amp-autocomplete/amp-autocomplete-inline.amp.html
index 82b90b83250ca..b8ac0d012745b 100644
--- a/test/manual/amp-autocomplete/amp-autocomplete-inline.amp.html
+++ b/test/fixtures/e2e/amp-autocomplete/amp-autocomplete-inline.amp.html
@@ -5,7 +5,6 @@
     <title>amp-autocomplete examples</title>
     <link rel="canonical" href="amps.html" />
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css" />
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
diff --git a/test/manual/amp-autocomplete/amp-autocomplete.amp.html b/test/fixtures/e2e/amp-autocomplete/amp-autocomplete.amp.html
similarity index 95%
rename from test/manual/amp-autocomplete/amp-autocomplete.amp.html
rename to test/fixtures/e2e/amp-autocomplete/amp-autocomplete.amp.html
index 10828c8f7aa7d..c373e27a1bebc 100644
--- a/test/manual/amp-autocomplete/amp-autocomplete.amp.html
+++ b/test/fixtures/e2e/amp-autocomplete/amp-autocomplete.amp.html
@@ -5,7 +5,6 @@
     <title>amp-autocomplete examples</title>
     <link rel="canonical" href="amps.html" >
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
diff --git a/test/fixtures/e2e/amp-base-carousel/1.0/autoadvance.amp.html b/test/fixtures/e2e/amp-base-carousel/1.0/autoadvance.amp.html
new file mode 100644
index 0000000000000..9c2663d18c912
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/1.0/autoadvance.amp.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Basic Carousel</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <style amp-custom>
+    amp-base-carousel img {
+      object-fit: cover;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>An Auto Advancing Carousel</h1>
+  <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="false" auto-advance="true" auto-advance-loops="2">
+    <amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
+  </amp-base-carousel>
+  <button id="next" on="tap:carousel-1.next()">Go to next slide</button>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-base-carousel/1.0/basic.amp.html b/test/fixtures/e2e/amp-base-carousel/1.0/basic.amp.html
new file mode 100644
index 0000000000000..c6aa104e6a5be
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/1.0/basic.amp.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Basic Carousel</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <style amp-custom>
+    amp-base-carousel img {
+      object-fit: cover;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>A Basic carousel, with looping</h1>
+  <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true">
+    <amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/orangegradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/tealgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/lilacgradient.png" layout="flex-item"></amp-img>
+  </amp-base-carousel>
+  <button on="tap:carousel-1.prev()">Prev</button>
+  <button on="tap:carousel-1.next()">Next</button>
+  <button on="tap:carousel-1.goToSlide(index = 1)">Slide 2 (1 indexed)</button>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-base-carousel/1.0/grouping-move-by-2.amp.html b/test/fixtures/e2e/amp-base-carousel/1.0/grouping-move-by-2.amp.html
new file mode 100644
index 0000000000000..73db7c9a1dc1f
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/1.0/grouping-move-by-2.amp.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Basic Carousel</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <style amp-custom>
+    amp-base-carousel img {
+      object-fit: cover;
+    }
+
+    .slide {
+      padding: 4px;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>Move by two slides</h1>
+  <!--
+    Using aspect ratio of 3:2 for images, showing 2 at a time, so carousel
+    should have an aspect ratio of 6:2.
+  -->
+  <amp-base-carousel id="carousel-1" width="6" height="2" layout="responsive" loop visible-count="2" advance-count="2">
+    <amp-img class="slide" src="./img/redgradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/greengradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/bluegradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/orangegradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/tealgradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/lilacgradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/orangegradient.png" layout="flex-item"></amp-img>
+  </amp-base-carousel>
+  <button on="tap:carousel-1.prev()">Prev</button>
+  <button on="tap:carousel-1.next()">Next</button>
+  <button on="tap:carousel-1.goToSlide(index = 1)">Slide 2 (1 indexed)</button>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-base-carousel/1.0/img/bluegradient.png b/test/fixtures/e2e/amp-base-carousel/1.0/img/bluegradient.png
new file mode 100644
index 0000000000000..569390db9dfb0
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/1.0/img/bluegradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/1.0/img/greengradient.png b/test/fixtures/e2e/amp-base-carousel/1.0/img/greengradient.png
new file mode 100644
index 0000000000000..bfb18d62370aa
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/1.0/img/greengradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/1.0/img/lemonyellowgradient.png b/test/fixtures/e2e/amp-base-carousel/1.0/img/lemonyellowgradient.png
new file mode 100644
index 0000000000000..39352b9db480b
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/1.0/img/lemonyellowgradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/1.0/img/lilacgradient.png b/test/fixtures/e2e/amp-base-carousel/1.0/img/lilacgradient.png
new file mode 100644
index 0000000000000..44fc95abab50c
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/1.0/img/lilacgradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/1.0/img/orangegradient.png b/test/fixtures/e2e/amp-base-carousel/1.0/img/orangegradient.png
new file mode 100644
index 0000000000000..9d0b8349340a8
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/1.0/img/orangegradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/1.0/img/redgradient.png b/test/fixtures/e2e/amp-base-carousel/1.0/img/redgradient.png
new file mode 100644
index 0000000000000..3580295fa1d62
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/1.0/img/redgradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/1.0/img/tealgradient.png b/test/fixtures/e2e/amp-base-carousel/1.0/img/tealgradient.png
new file mode 100644
index 0000000000000..024f1eca51bd7
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/1.0/img/tealgradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/1.0/mixed-lengths-no-snap.amp.html b/test/fixtures/e2e/amp-base-carousel/1.0/mixed-lengths-no-snap.amp.html
new file mode 100644
index 0000000000000..de556d2b4cf62
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/1.0/mixed-lengths-no-snap.amp.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Mixed lengths carousel, looping</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <style amp-custom>
+    body {
+      font-family: 'Questrial', Arial;
+    }
+
+    amp-base-carousel .slide.slide img{
+      object-fit: cover;
+    }
+
+    .slide {
+      width: 100%;
+      padding: 4px;
+    }
+
+    amp-base-carousel::part(slide) {
+      width: 75%;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>Mixed lengths carousel, looping</h1>
+  <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" mixed-length="true" snap="false">
+    <amp-img class="slide" src="./img/redgradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide" src="./img/bluegradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide" src="./img/orangegradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide" src="./img/greengradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide" src="./img/tealgradient.png" height="200" layout="fixed-height"></amp-img>
+  </amp-base-carousel>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-base-carousel/1.0/mixed-lengths.amp.html b/test/fixtures/e2e/amp-base-carousel/1.0/mixed-lengths.amp.html
new file mode 100644
index 0000000000000..66493cd3715a0
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/1.0/mixed-lengths.amp.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Mixed lengths carousel, looping</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <style amp-custom>
+    body {
+      font-family: 'Questrial', Arial;
+    }
+
+    amp-base-carousel .slide.slide img{
+      object-fit: cover;
+    }
+
+    .slide {
+      width: 100%;
+      padding: 4px;
+    }
+
+    amp-base-carousel::part(slide) {
+      width: 75%;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>Mixed lengths carousel, looping</h1>
+  <amp-base-carousel snap-align="center" id="carousel-1" width="300" height="200" layout="responsive" loop="true" mixed-length="true">
+    <amp-img class="slide" src="./img/redgradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide" src="./img/bluegradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide" src="./img/orangegradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide" src="./img/greengradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide" src="./img/tealgradient.png" height="200" layout="fixed-height"></amp-img>
+  </amp-base-carousel>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-base-carousel/1.0/vertical.amp.html b/test/fixtures/e2e/amp-base-carousel/1.0/vertical.amp.html
new file mode 100644
index 0000000000000..7362f32f374c2
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/1.0/vertical.amp.html
@@ -0,0 +1,147 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Vertical Carousel</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <style amp-custom>
+    amp-base-carousel img {
+      object-fit: cover;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>A vertical carousel</h1>
+  <amp-base-carousel id="carousel-1" width="300" height="200" loop="true" layout="responsive" orientation="vertical" lightbox>
+    <amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/orangegradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/tealgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/lilacgradient.png" layout="flex-item"></amp-img>
+  </amp-base-carousel>
+  <button on="tap:carousel-1.prev()">Prev</button>
+  <button on="tap:carousel-1.next()">Next</button>
+  <button on="tap:carousel-1.goToSlide(index = 1)">Slide 2 (1 indexed)</button>
+  <h2>The below text tests overscroll-behavior: contain</h2>
+  <p>
+    Dessert tootsie roll marzipan pastry. Powder powder jelly beans chocolate
+    bar candy sugar plum. Jelly-o gummi bears jelly icing cotton candy. Toffee
+    carrot cake ice cream sesame snaps sugar plum gummies. Gummies marshmallow
+    candy chocolate bar ice cream ice cream gummies chocolate cake. Candy ice
+    cream pie danish ice cream cake gingerbread. Muffin cookie marzipan
+    marzipan jelly beans gummies candy muffin dessert. Soufflé chocolate tart
+    tootsie roll tootsie roll gingerbread icing powder. Dessert croissant
+    macaroon candy liquorice. Gingerbread gummi bears croissant wafer cookie
+    cookie bonbon. Marshmallow fruitcake lollipop sweet roll danish dragée
+    cupcake. Tootsie roll cotton candy dragée chocolate bar tootsie roll
+    cheesecake cookie muffin. Toffee sesame snaps gingerbread wafer cotton
+    candy bonbon gingerbread toffee.
+  </p>
+
+  <p>
+    Danish cupcake chocolate candy chocolate bar. Topping brownie toffee oat
+    cake liquorice marzipan cheesecake chupa chups. Pastry carrot cake jelly
+    beans chocolate cake liquorice sesame snaps caramels. Apple pie
+    marshmallow chupa chups lemon drops pudding cotton candy pie apple pie oat
+    cake. Sugar plum halvah cotton candy tiramisu sweet dragée cookie pastry.
+    Macaroon bonbon jujubes. Halvah tiramisu brownie topping donut cookie
+    tart. Jelly lemon drops soufflé pie chocolate bar donut tootsie roll bear
+    claw cake. Chocolate cake powder dessert. Pudding wafer danish chupa chups
+    donut chocolate sweet carrot cake. Sugar plum cheesecake brownie chocolate
+    sweet tart marzipan oat cake dessert. Gummi bears sugar plum bonbon
+    chocolate cake. Croissant marzipan brownie dessert donut cotton candy
+    croissant powder. Chocolate cake tootsie roll sweet roll gummi bears donut
+    fruitcake jelly beans carrot cake.
+  </p>
+
+  <p>
+    Brownie gummies danish lollipop caramels wafer gingerbread macaroon carrot
+    cake. Brownie powder donut gummi bears pudding cupcake. Lemon drops
+    croissant apple pie sesame snaps marzipan. Biscuit chocolate cake jelly-o
+    pie caramels gingerbread caramels chupa chups donut. Sweet roll oat cake
+    cake. Cheesecake candy canes candy canes candy canes topping pastry sweet
+    cheesecake. Jelly-o gummies topping marshmallow dessert tiramisu cake
+    bonbon chupa chups. Chocolate biscuit danish tart bear claw. Tiramisu
+    carrot cake jelly-o pie sweet cake. Sesame snaps lollipop cookie chocolate
+    cake wafer dragée. Powder brownie danish. Pastry chocolate cake sweet roll
+    halvah cupcake dragée.
+  </p>
+
+  <p>
+    Cake carrot cake icing danish biscuit carrot cake marzipan croissant. Cake
+    cake gummi bears fruitcake sweet dessert toffee chocolate cake. Ice cream
+    carrot cake donut jelly beans. Jelly wafer sugar plum sweet icing candy
+    canes. Bonbon marshmallow donut pudding jelly-o tiramisu pastry cake
+    bonbon. Jelly candy canes liquorice cupcake liquorice dessert halvah
+    toffee. Jelly chocolate macaroon topping cupcake tootsie roll liquorice
+    brownie lollipop. Chupa chups wafer cupcake candy cookie oat cake cookie
+    bear claw. Carrot cake pudding biscuit tiramisu ice cream sugar plum.
+    Topping lemon drops dragée cake liquorice apple pie ice cream. Cotton
+    candy lollipop lemon drops apple pie tootsie roll pie marshmallow
+    chocolate jelly-o. Pastry bonbon cupcake dragée candy.
+  </p>
+
+  <p>
+    Ice cream dragée pudding pastry biscuit tart cookie. Oat cake ice cream
+    apple pie oat cake dessert soufflé caramels apple pie. Gummies bear claw
+    powder cake icing jelly beans jelly beans marzipan lollipop. Lollipop
+    brownie jelly beans pudding. Ice cream jelly biscuit pie tiramisu tootsie
+    roll gummies biscuit. Cupcake biscuit biscuit chocolate bar liquorice
+    caramels powder cotton candy muffin. Sesame snaps tiramisu croissant.
+    Soufflé chocolate jelly-o topping. Lemon drops candy canes sweet carrot
+    cake chocolate cake tootsie roll wafer marshmallow. Jelly beans bear claw
+    jelly-o sesame snaps carrot cake. Pudding jelly candy carrot cake
+    fruitcake carrot cake candy canes sesame snaps. Marzipan icing caramels
+    chocolate tart powder cookie halvah. Fruitcake dragée muffin tart. Jelly-o
+    cupcake marshmallow pudding gummies muffin topping caramels.
+  </p>
+
+  <p>
+    Liquorice bear claw marshmallow dessert. Bear claw toffee pastry tiramisu
+    apple pie oat cake. Tiramisu jelly gingerbread cake cake sweet roll
+    cupcake ice cream jelly. Fruitcake jelly beans macaroon soufflé jelly
+    beans marzipan caramels candy. Cheesecake candy canes pudding icing icing.
+    Dragée chocolate bar bear claw dragée donut brownie cake sweet roll. Wafer
+    bear claw dragée icing sesame snaps topping. Cake marzipan bear claw
+    dessert bear claw lollipop halvah wafer halvah. Icing sweet roll toffee
+    sweet powder sesame snaps gummies tart danish. Ice cream toffee caramels
+    danish. Jelly-o lollipop lollipop dessert sesame snaps bear claw gummi
+    bears. Donut sweet roll marzipan fruitcake oat cake cake icing cotton
+    candy oat cake. Gingerbread carrot cake sesame snaps gummies candy dragée
+    lollipop soufflé biscuit. Pudding jujubes chocolate halvah sesame snaps
+    tiramisu sweet marshmallow chocolate bar.
+  </p>
+
+  <p>
+    Donut carrot cake apple pie powder marshmallow sesame snaps tiramisu.
+    Sweet roll powder cookie. Lollipop sugar plum oat cake. Marshmallow wafer
+    danish wafer gingerbread cake muffin candy dragée. Candy cotton candy
+    topping cake cotton candy carrot cake fruitcake brownie. Toffee candy
+    candy canes jelly-o cotton candy gummies. Bonbon bonbon pie sugar plum.
+    Oat cake sesame snaps pudding candy canes gummi bears macaroon jelly beans
+    brownie. Sesame snaps halvah halvah jelly-o dessert. Jelly-o chocolate
+    sweet roll donut candy. Cotton candy halvah macaroon tiramisu tart. Jelly
+    toffee candy pie toffee.
+  </p>
+
+  <p>
+    Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll sweet roll
+    brownie pastry tootsie roll. Topping cheesecake pie jelly. Donut wafer
+    wafer cake candy canes. Topping chocolate bar cheesecake topping ice cream
+    tiramisu toffee ice cream. Bonbon halvah marshmallow. Marzipan topping
+    chupa chups dessert chocolate chocolate cake gummi bears. Gummi bears
+    caramels sugar plum. Pie donut jelly beans tiramisu soufflé pie powder.
+    Cupcake cookie topping. Tootsie roll candy canes jujubes croissant
+    liquorice ice cream brownie. Topping cookie apple pie gummi bears bear
+    claw jelly-o brownie tart. Marzipan cotton candy gummi bears. Dragée ice
+    cream gummi bears jelly-o carrot cake chocolate bar tiramisu jelly cotton
+    candy.
+  </p>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-base-carousel/advance.amp.html b/test/fixtures/e2e/amp-base-carousel/advance.amp.html
new file mode 100644
index 0000000000000..b2a500204ce28
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/advance.amp.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html ⚡>
+
+<head>
+  <meta charset="utf-8">
+  <title>My AMP Page</title>
+  <link rel="canonical" href="self.html" />
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <style amp-custom>
+    amp-base-carousel .item {
+      padding: 40px;
+      border: 1px solid black;
+    }
+    #wrapper {
+      width: 400px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="wrapper">
+  <amp-base-carousel class="gallery" layout="responsive" width="33" height="10" visible-count="3.3" advance-count="1" loop="false">
+    <div class="item">1</div>
+    <div class="item">2</div>
+    <div class="item">3</div>
+    <div class="item">4</div>
+    <div class="item">5</div>
+    <div class="item">6</div>
+    <div class="item">7</div>
+    <div class="item">8</div>
+    <div class="item">9</div>
+    <div class="item">10</div>
+    <div class="item">11</div>
+    <div class="item">12</div>
+    <div class="item">13</div>
+  </amp-base-carousel>
+  </div>
+</body>
+
+</html>
diff --git a/test/fixtures/e2e/amp-base-carousel/arrows-in-lightbox.amp.html b/test/fixtures/e2e/amp-base-carousel/arrows-in-lightbox.amp.html
new file mode 100644
index 0000000000000..b99f90ace578b
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/arrows-in-lightbox.amp.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>AMP Lightbox Carousel With AMP Selector</title>
+    <link rel="canonical" href="self.html" />
+    <meta name="viewport" content="width=device-width" />
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
+    <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
+    <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+    <style amp-custom>
+      body {
+        padding: 10px;
+      }
+      .inner {
+        display: flex;
+        gap: 10px;
+      }
+      .image {
+        width: 300px;
+      }
+      .image + .image {
+        margin-left: 10px;
+      }
+      .lightbox {
+        background-color: black;
+      }
+      .close-button {
+        position: absolute;
+        z-index: 1;
+      }
+    </style>
+  </head>
+  <body>
+  <amp-selector id="selector1" on="select:carousel1.goToSlide(index=event.targetOption), lightbox1">
+    <div class="inner">
+        <amp-img id="first" class="image" src="./img/lemonyellowgradient.png" option="0" layout="responsive" width="450" height="300"></amp-img>
+        <amp-img id="second" class="image" src="./img/bluegradient.png" layout="responsive" option="1" width="450" height="300"></amp-img>
+        <amp-img id="third" class="image" src="./img/greengradient.png" layout="responsive" option="2" width="450" height="300"></amp-img>
+        <amp-img id="fourth" class="image" src="./img/orangegradient.png" layout="responsive" option="3" width="450" height="300"></amp-img>
+    </div>
+  </amp-selector>
+  <amp-lightbox id="lightbox1" class="lightbox" layout="nodisplay">
+    <button class="close-button" on="tap:lightbox1.close">close</button>
+    <amp-base-carousel id="carousel1" width="900" height="600" layout="fill" on="slideChange:selector1.toggle(index=event.index, value=true)">
+        <amp-img src="./img/lemonyellowgradient.png" layout="responsive" width="900" height="600"></amp-img>
+        <amp-img src="./img/bluegradient.png" layout="responsive" width="900" height="600"></amp-img>
+        <amp-img src="./img/greengradient.png" layout="responsive" width="900" height="600"></amp-img>
+        <amp-img src="./img/orangegradient.png" layout="responsive" width="900" height="600"></amp-img>
+    </amp-base-carousel>
+  </amp-lightbox>
+</body>
+</html>
diff --git a/test/manual/amp-base-carousel/autoadvance-rtl.amp.html b/test/fixtures/e2e/amp-base-carousel/autoadvance-rtl.amp.html
similarity index 92%
rename from test/manual/amp-base-carousel/autoadvance-rtl.amp.html
rename to test/fixtures/e2e/amp-base-carousel/autoadvance-rtl.amp.html
index ee262430a1e9b..b0faec8d03e0f 100644
--- a/test/manual/amp-base-carousel/autoadvance-rtl.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/autoadvance-rtl.amp.html
@@ -5,8 +5,7 @@
   <title>Basic Carousel</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     amp-base-carousel img {
       object-fit: cover;
diff --git a/test/fixtures/e2e/amp-base-carousel/autoadvance.amp.html b/test/fixtures/e2e/amp-base-carousel/autoadvance.amp.html
new file mode 100644
index 0000000000000..45dfe9d4218a6
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/autoadvance.amp.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Basic Carousel</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <style amp-custom>
+    amp-base-carousel img {
+      object-fit: cover;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>An Auto Advancing Carousel</h1>
+  <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" auto-advance="true">
+    <amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
+  </amp-base-carousel>
+  <button on="tap:carousel-1.prev()">Prev</button>
+  <button on="tap:carousel-1.next()">Next</button>
+  <button on="tap:carousel-1.goToSlide(index = 1)">Slide 2 (1 indexed)</button>
+</body>
+</html>
diff --git a/test/manual/amp-base-carousel/basic-rtl.amp.html b/test/fixtures/e2e/amp-base-carousel/basic-rtl.amp.html
similarity index 93%
rename from test/manual/amp-base-carousel/basic-rtl.amp.html
rename to test/fixtures/e2e/amp-base-carousel/basic-rtl.amp.html
index d6bf726006818..8b72b2df95ca6 100644
--- a/test/manual/amp-base-carousel/basic-rtl.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/basic-rtl.amp.html
@@ -5,8 +5,7 @@
   <title>Basic Carousel</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     amp-base-carousel img {
       object-fit: cover;
diff --git a/test/fixtures/e2e/amp-base-carousel/basic.amp.html b/test/fixtures/e2e/amp-base-carousel/basic.amp.html
new file mode 100644
index 0000000000000..3e4e9552e86e1
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/basic.amp.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Basic Carousel</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
+  <style amp-custom>
+    amp-base-carousel img {
+      object-fit: cover;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>A Basic carousel, with looping</h1>
+  <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" lightbox>
+    <amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/orangegradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/tealgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/lilacgradient.png" layout="flex-item"></amp-img>
+  </amp-base-carousel>
+  <button on="tap:carousel-1.prev()">Prev</button>
+  <button on="tap:carousel-1.next()">Next</button>
+  <button on="tap:carousel-1.goToSlide(index = 0)">Slide 1 (0 indexed)</button>
+</body>
+</html>
diff --git a/test/manual/amp-base-carousel/bind-slide.amp.html b/test/fixtures/e2e/amp-base-carousel/bind-slide.amp.html
similarity index 94%
rename from test/manual/amp-base-carousel/bind-slide.amp.html
rename to test/fixtures/e2e/amp-base-carousel/bind-slide.amp.html
index a9810c2a2ae33..9dcd6d90dd8a0 100644
--- a/test/manual/amp-base-carousel/bind-slide.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/bind-slide.amp.html
@@ -5,9 +5,8 @@
   <title>Carousel with bound slide</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     amp-base-carousel img {
       object-fit: cover;
diff --git a/test/fixtures/e2e/amp-base-carousel/captions.amp.html b/test/fixtures/e2e/amp-base-carousel/captions.amp.html
new file mode 100644
index 0000000000000..b0d22ed2d52eb
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/captions.amp.html
@@ -0,0 +1,56 @@
+
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Basic Carousel</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <style amp-custom>
+    amp-base-carousel img {
+      object-fit: cover;
+    }
+    .figure {
+      width: 50%;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>A Basic carousel, with looping</h1>
+  <amp-base-carousel id="carousel-1" width="1280" height="1000" layout="responsive" loop="true">
+    <figure class="figure">
+      <amp-img
+        src="https://amp.dev/static/samples/img/landscape_lake_1280x857.jpg"
+        width="1280"
+        height="857"
+        layout="responsive"
+      ></amp-img>
+      <figcaption>Each image has a different caption.</figcaption>
+    </figure>
+    <figure class="figure">
+      <amp-img
+        src="https://amp.dev/static/samples/img/landscape_village_1280x853.jpg"
+        width="1280"
+        height="853"
+        layout="responsive"
+      ></amp-img>
+      <figcaption>This caption is different.</figcaption>
+    </figure>
+    <figure class="figure">
+      <amp-img
+        src="https://amp.dev/static/samples/img/landscape_desert_1280x853.jpg"
+        width="1280"
+        height="853"
+        layout="responsive"
+      ></amp-img>
+      <figcaption>The third image has its caption.</figcaption>
+    </figure>
+  </amp-base-carousel>
+  <button on="tap:carousel-1.prev()">Prev</button>
+  <button on="tap:carousel-1.next()">Next</button>
+  <button on="tap:carousel-1.goToSlide(index = 1)">Slide 2 (1 indexed)</button>
+</body>
+</html>
diff --git a/test/manual/amp-base-carousel/custom-arrows.amp.html b/test/fixtures/e2e/amp-base-carousel/custom-arrows.amp.html
similarity index 93%
rename from test/manual/amp-base-carousel/custom-arrows.amp.html
rename to test/fixtures/e2e/amp-base-carousel/custom-arrows.amp.html
index 2c620a0ae7bdd..cd370ab3c7704 100644
--- a/test/manual/amp-base-carousel/custom-arrows.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/custom-arrows.amp.html
@@ -5,8 +5,7 @@
   <title>Basic Carousel</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     amp-base-carousel img {
       object-fit: cover;
diff --git a/test/fixtures/e2e/amp-base-carousel/default-attributes.amp.html b/test/fixtures/e2e/amp-base-carousel/default-attributes.amp.html
new file mode 100644
index 0000000000000..816cbc48c7c99
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/default-attributes.amp.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
+    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js" />
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+    <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>
+    <link rel="canonical" href="." />
+    <title>My AMP Page</title>
+    <style amp-custom>
+      body {
+        max-width: 527px;
+      }
+
+      amp-base-carousel img {
+        object-fit: cover;
+      }
+
+      .slide {
+        padding: 4px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- Default loop to false -->
+    <amp-base-carousel id="carousel-1" class="carousel" height="440" width="1000" layout="responsive">
+      <amp-img  height="440" width="1000" class="slide" src="../img/redgradient.png" layout="responsive">Slide 1</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/greengradient.png" layout="responsive">Slide 2</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/bluegradient.png" layout="responsive">Slide 3</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/orangegradient.png" layout="responsive">Slide 4</amp-img>
+    </amp-base-carousel>
+
+    <!-- Valid loop=true -->
+    <amp-base-carousel id="carousel-2" class="carousel" loop="true" visible-count="2" height="440" width="1000" layout="responsive">
+      <amp-img  height="440" width="1000" class="slide" src="../img/redgradient.png" layout="responsive">Slide 1</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/greengradient.png" layout="responsive">Slide 2</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/bluegradient.png" layout="responsive">Slide 3</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/orangegradient.png" layout="responsive">Slide 4</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/tealgradient.png" layout="responsive">Slide 5</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/lilacgradient.png" layout="responsive">Slide 6</amp-img>
+    </amp-base-carousel>
+
+    <!-- Invalid loop=true turned to false (visible-count * 3 < number of slides) -->
+    <amp-base-carousel id="carousel-3" loop="true" class="carousel" visible-count="2" height="440" width="1000" layout="responsive">
+      <amp-img  height="440" width="1000" class="slide" src="../img/redgradient.png" layout="responsive">Slide 1</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/greengradient.png" layout="responsive">Slide 2</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/bluegradient.png" layout="responsive">Slide 3</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/orangegradient.png" layout="responsive">Slide 4</amp-img>
+    </amp-base-carousel>
+
+    <!-- Responsive loop carousel -->
+    <amp-base-carousel id="carousel-4" loop="(min-width: 1000px) true, false" class="carousel" height="440" width="1000" layout="responsive">
+      <amp-img  height="440" width="1000" class="slide" src="../img/redgradient.png" layout="responsive">Slide 1</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/greengradient.png" layout="responsive">Slide 2</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/bluegradient.png" layout="responsive">Slide 3</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/orangegradient.png" layout="responsive">Slide 4</amp-img>
+    </amp-base-carousel>
+  </body>
+</html>
diff --git a/test/manual/amp-base-carousel/disable-layers.html b/test/fixtures/e2e/amp-base-carousel/disable-layers.html
similarity index 100%
rename from test/manual/amp-base-carousel/disable-layers.html
rename to test/fixtures/e2e/amp-base-carousel/disable-layers.html
diff --git a/test/manual/amp-base-carousel/enable-experiment.html b/test/fixtures/e2e/amp-base-carousel/enable-experiment.html
similarity index 100%
rename from test/manual/amp-base-carousel/enable-experiment.html
rename to test/fixtures/e2e/amp-base-carousel/enable-experiment.html
diff --git a/test/manual/amp-base-carousel/fixed-children.amp.html b/test/fixtures/e2e/amp-base-carousel/fixed-children.amp.html
similarity index 97%
rename from test/manual/amp-base-carousel/fixed-children.amp.html
rename to test/fixtures/e2e/amp-base-carousel/fixed-children.amp.html
index 8aeb29d2eae2d..49da5539f7d5d 100644
--- a/test/manual/amp-base-carousel/fixed-children.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/fixed-children.amp.html
@@ -6,7 +6,7 @@
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
   <style amp-custom>
     body {
@@ -32,7 +32,7 @@ <h1>Fixed size children, centered using wrapping divs</h1>
   <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" snap-align="center" lightbox>
     <div class="slide">
       <amp-img src="./img/redgradient.png" width=150 height=100 layout="fixed"></amp-img>
-    </div> 
+    </div>
     <div class="slide">
       <amp-img src="./img/greengradient.png" width=150 height=100 layout="fixed"></amp-img>
     </div>
diff --git a/test/manual/amp-base-carousel/grouping-autoadvance.amp.html b/test/fixtures/e2e/amp-base-carousel/grouping-autoadvance.amp.html
similarity index 93%
rename from test/manual/amp-base-carousel/grouping-autoadvance.amp.html
rename to test/fixtures/e2e/amp-base-carousel/grouping-autoadvance.amp.html
index 3b77d4dcb853a..8b161772c0175 100644
--- a/test/manual/amp-base-carousel/grouping-autoadvance.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/grouping-autoadvance.amp.html
@@ -5,8 +5,7 @@
   <title>Auto advance with grouping</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     body {
       max-width: 527px;
@@ -32,7 +31,7 @@ <h1>Auto advance with grouping</h1>
   <amp-base-carousel id="carousel-1" width="6" height="2" layout="responsive"
       loop="false"
       visible-count="2"
-      snap-by="2" 
+      snap-by="2"
       auto-advance="true"
       auto-advance-interval="3000"
       auto-advance-count="2">
@@ -50,6 +49,6 @@ <h1>Auto advance with grouping</h1>
   <p>
     Note: if the number of slides is not evenly divisible by the group count,
     the last advancement will show some from the previous group.
-  </p> 
+  </p>
 </body>
 </html>
diff --git a/test/manual/amp-base-carousel/grouping-looping.amp.html b/test/fixtures/e2e/amp-base-carousel/grouping-looping.amp.html
similarity index 93%
rename from test/manual/amp-base-carousel/grouping-looping.amp.html
rename to test/fixtures/e2e/amp-base-carousel/grouping-looping.amp.html
index f1fc7a54a7f82..4d150f79df965 100644
--- a/test/manual/amp-base-carousel/grouping-looping.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/grouping-looping.amp.html
@@ -5,8 +5,7 @@
   <title>Basic Carousel</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     body {
       max-width: 527px;
diff --git a/test/fixtures/e2e/amp-base-carousel/grouping-move-by-2.amp.html b/test/fixtures/e2e/amp-base-carousel/grouping-move-by-2.amp.html
new file mode 100644
index 0000000000000..34f0fa293cc40
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/grouping-move-by-2.amp.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Basic Carousel</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <style amp-custom>
+    amp-base-carousel img {
+      object-fit: cover;
+    }
+
+    .slide {
+      padding: 4px;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>Move by two slides, no looping</h1>
+  <!--
+    Using aspect ratio of 3:2 for images, showing 2 at a time, so carousel
+    should have an aspect ratio of 6:2.
+  -->
+  <amp-base-carousel id="carousel-1" width="6" height="2" layout="responsive" loop="false" visible-count="2" advance-count="2" snap-by="2">
+    <amp-img class="slide" src="./img/redgradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/greengradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/bluegradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/orangegradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/tealgradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
+  </amp-base-carousel>
+  <button on="tap:carousel-1.prev()">Prev</button>
+  <button on="tap:carousel-1.next()">Next</button>
+  <button on="tap:carousel-1.goToSlide(index = 1)">Slide 2 (1 indexed)</button>
+</body>
+</html>
diff --git a/test/manual/amp-base-carousel/grouping.amp.html b/test/fixtures/e2e/amp-base-carousel/grouping.amp.html
similarity index 93%
rename from test/manual/amp-base-carousel/grouping.amp.html
rename to test/fixtures/e2e/amp-base-carousel/grouping.amp.html
index 4cc68264543c0..c527e34c2ac92 100644
--- a/test/manual/amp-base-carousel/grouping.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/grouping.amp.html
@@ -5,8 +5,7 @@
   <title>Basic Carousel</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     body {
       max-width: 527px;
diff --git a/test/fixtures/e2e/amp-base-carousel/hidden-controls.amp.html b/test/fixtures/e2e/amp-base-carousel/hidden-controls.amp.html
new file mode 100644
index 0000000000000..9232ead22114d
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/hidden-controls.amp.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Basic Carousel</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
+  <style amp-custom>
+    amp-base-carousel img {
+      object-fit: cover;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>Hidden controls</h1>
+  <amp-base-carousel  width="300" height="200" layout="responsive" controls="never" loop="true">
+    <amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/orangegradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/tealgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/lilacgradient.png" layout="flex-item"></amp-img>
+  </amp-base-carousel>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-base-carousel/img/bluegradient.png b/test/fixtures/e2e/amp-base-carousel/img/bluegradient.png
new file mode 100644
index 0000000000000..569390db9dfb0
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/img/bluegradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/img/greengradient.png b/test/fixtures/e2e/amp-base-carousel/img/greengradient.png
new file mode 100644
index 0000000000000..bfb18d62370aa
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/img/greengradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/img/lemonyellowgradient.png b/test/fixtures/e2e/amp-base-carousel/img/lemonyellowgradient.png
new file mode 100644
index 0000000000000..39352b9db480b
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/img/lemonyellowgradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/img/lilacgradient.png b/test/fixtures/e2e/amp-base-carousel/img/lilacgradient.png
new file mode 100644
index 0000000000000..44fc95abab50c
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/img/lilacgradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/img/orangegradient.png b/test/fixtures/e2e/amp-base-carousel/img/orangegradient.png
new file mode 100644
index 0000000000000..9d0b8349340a8
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/img/orangegradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/img/redgradient.png b/test/fixtures/e2e/amp-base-carousel/img/redgradient.png
new file mode 100644
index 0000000000000..3580295fa1d62
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/img/redgradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/img/tealgradient.png b/test/fixtures/e2e/amp-base-carousel/img/tealgradient.png
new file mode 100644
index 0000000000000..024f1eca51bd7
Binary files /dev/null and b/test/fixtures/e2e/amp-base-carousel/img/tealgradient.png differ
diff --git a/test/fixtures/e2e/amp-base-carousel/index.html b/test/fixtures/e2e/amp-base-carousel/index.html
new file mode 100644
index 0000000000000..b651fa65227e2
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <title>amp-base-carousel 0.2</title>
+    <style>
+      li {
+        padding: 8px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h2>Experiments</h2>
+
+    <ul>
+      <li>
+        <a href="./enable-experiment.html">enable experiments</a>
+      </li>
+      <li>
+        <a href="./disable-layers.html">disable layers</a>
+      </li>
+    </ul>
+
+    <h2>Tests</h2>
+
+    <ul>
+      <li>
+        <a href="./basic.amp.html">basic</a>
+      </li>
+      <li>
+        <a href="./max-swipe-one.amp.html">maximum swipe of one slide, looping</a>
+      </li>
+      <li>
+        <a href="./max-swipe-one-no-loop.amp.html">maximum swipe of one slide, no loop</a>
+      </li>
+      <li>
+        <a href="./fixed-children.amp.html">Fixed size children</a>
+      </li>
+      <li>
+        <a href="./grouping.amp.html">grouping</a>
+      </li>
+      <li>
+        <a href="./grouping-autoadvance.amp.html">grouping w/ autoadvance</a>
+      </li>
+      <li>
+        <a href="./grouping-looping.amp.html">grouping and looping</a>
+      </li>
+      <li>
+        <a href="./grouping-move-by-2.amp.html">grouping, snap by 2</a>
+      </li>
+      <li>
+        <a href="./mixed-lengths.amp.html">mixed lengths</a>
+      </li>
+      <li>
+        <a href="./mixed-lengths-no-snap.amp.html">mixed lengths no snap</a>
+      </li>
+      <li>
+        <a href="./non-looping.amp.html">no looping</a>
+      </li>
+      <li>
+        <a href="./peeking-sides-centered.amp.html">peeking sides (centered)</a>
+      </li>
+      <li>
+        <a href="./peeking-sides-start-aligned.amp.html">peeking sides</a>
+      </li>
+      <li>
+        <a href="./tweets.amp.html">tweets</a>
+      </li>
+    </ul>
+  </body>
+</html>
diff --git a/test/manual/amp-base-carousel/initial-slide.amp.html b/test/fixtures/e2e/amp-base-carousel/initial-slide.amp.html
similarity index 93%
rename from test/manual/amp-base-carousel/initial-slide.amp.html
rename to test/fixtures/e2e/amp-base-carousel/initial-slide.amp.html
index 75b70851c64c9..cf00dd4e49859 100644
--- a/test/manual/amp-base-carousel/initial-slide.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/initial-slide.amp.html
@@ -5,8 +5,7 @@
   <title>Initial index carousel</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     amp-base-carousel img {
       object-fit: cover;
diff --git a/test/fixtures/e2e/amp-base-carousel/mixed-lengths-no-snap.amp.html b/test/fixtures/e2e/amp-base-carousel/mixed-lengths-no-snap.amp.html
new file mode 100644
index 0000000000000..6bb2c114afe39
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/mixed-lengths-no-snap.amp.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Mixed lengths carousel, looping</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
+  <style amp-custom>
+    body {
+      font-family: 'Questrial', Arial;
+    }
+
+    amp-base-carousel .slide.slide img{
+      object-fit: cover;
+    }
+
+    .slide {
+      padding: 4px;
+    }
+
+    .narrow {
+      width: 50%;
+    }
+
+    .wide {
+      width: 75%;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>Mixed lengths carousel, looping</h1>
+  <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" mixed-length="true" snap="false" lightbox>
+    <amp-img class="slide wide" src="./img/redgradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide narrow" src="./img/bluegradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide wide" src="./img/orangegradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide narrow" src="./img/greengradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide wide" src="./img/tealgradient.png" height="200" layout="fixed-height"></amp-img>
+  </amp-base-carousel>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-base-carousel/mixed-lengths.amp.html b/test/fixtures/e2e/amp-base-carousel/mixed-lengths.amp.html
new file mode 100644
index 0000000000000..1395804ddf009
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/mixed-lengths.amp.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Mixed lengths carousel, looping</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
+  <style amp-custom>
+    body {
+      font-family: 'Questrial', Arial;
+    }
+
+    amp-base-carousel .slide.slide img{
+      object-fit: cover;
+    }
+
+    .slide {
+      padding: 4px;
+    }
+
+    .narrow {
+      width: 50%;
+    }
+
+    .wide {
+      width: 75%;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>Mixed lengths carousel, looping</h1>
+  <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" mixed-length="true" snap-align="center" lightbox>
+    <amp-img class="slide wide" src="./img/redgradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide narrow" src="./img/bluegradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide wide" src="./img/orangegradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide narrow" src="./img/greengradient.png" height="200" layout="fixed-height"></amp-img>
+    <amp-img class="slide wide" src="./img/tealgradient.png" height="200" layout="fixed-height"></amp-img>
+  </amp-base-carousel>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-base-carousel/multi-visible-single-advance.amp.html b/test/fixtures/e2e/amp-base-carousel/multi-visible-single-advance.amp.html
new file mode 100644
index 0000000000000..83c24007c66d1
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/multi-visible-single-advance.amp.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
+    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js" />
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+    <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>
+    <link rel="canonical" href="." />
+    <title>My AMP Page</title>
+    <style amp-custom>
+      body {
+        max-width: 527px;
+      }
+
+      amp-base-carousel img {
+        object-fit: cover;
+      }
+
+      .slide {
+        padding: 4px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <amp-base-carousel class="carousel" visible-count="3" height="440" width="1000" layout="responsive">
+      <amp-img  height="440" width="1000" class="slide" src="../img/redgradient.png" layout="responsive">Slide 1</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/greengradient.png" layout="responsive">Slide 2</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/bluegradient.png" layout="responsive">Slide 3</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/orangegradient.png" layout="responsive">Slide 4</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/tealgradient.png" layout="responsive">Slide 5</amp-img>
+      <amp-img  height="440" width="1000"class="slide" src="../img/lemonyellowgradient.png" layout="responsive">Slide 6</amp-img>
+      <amp-img  height="440" width="1000" class="slide" src="../img/lilacgradient.png" layout="responsive">Slide 7</amp-img>
+    </amp-base-carousel>
+  </body>
+</html>
diff --git a/test/fixtures/e2e/amp-base-carousel/no-arrows.amp.html b/test/fixtures/e2e/amp-base-carousel/no-arrows.amp.html
new file mode 100644
index 0000000000000..d9d1883602691
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/no-arrows.amp.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>No arrows for mixed length</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <style amp-custom>
+    body {
+      max-width: 527px;
+    }
+    amp-base-carousel {
+      border: 1px solid #555;
+    }
+    amp-base-carousel img {
+      object-fit: cover;
+    }
+    .slide {
+      width: 30%;
+      padding: 4px;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-base-carousel
+    id="carousel-1"
+    height="200"
+    layout="fixed-height"
+    loop="false"
+    mixed-length="true"
+  >
+    <amp-img class="slide" src="./img/redgradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/bluegradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/greengradient.png" layout="flex-item"></amp-img>
+    <amp-img class="slide" src="./img/orangegradient.png" layout="flex-item"></amp-img>
+ </amp-base-carousel>
+</body>
+</html>
diff --git a/test/manual/amp-base-carousel/non-looping-rtl.amp.html b/test/fixtures/e2e/amp-base-carousel/non-looping-rtl.amp.html
similarity index 93%
rename from test/manual/amp-base-carousel/non-looping-rtl.amp.html
rename to test/fixtures/e2e/amp-base-carousel/non-looping-rtl.amp.html
index bb1b6ecb37ce2..e8ab33d2f8077 100644
--- a/test/manual/amp-base-carousel/non-looping-rtl.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/non-looping-rtl.amp.html
@@ -5,8 +5,7 @@
   <title>Non-Looping Carousel</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     amp-base-carousel img {
       object-fit: cover;
diff --git a/test/manual/amp-base-carousel/non-looping.amp.html b/test/fixtures/e2e/amp-base-carousel/non-looping.amp.html
similarity index 92%
rename from test/manual/amp-base-carousel/non-looping.amp.html
rename to test/fixtures/e2e/amp-base-carousel/non-looping.amp.html
index 5ec840a119538..4d63f489a4206 100644
--- a/test/manual/amp-base-carousel/non-looping.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/non-looping.amp.html
@@ -5,8 +5,7 @@
   <title>Non-Looping Carousel</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     amp-base-carousel img {
       object-fit: cover;
diff --git a/test/manual/amp-base-carousel/peeking-sides-centered.amp.html b/test/fixtures/e2e/amp-base-carousel/peeking-sides-centered.amp.html
similarity index 97%
rename from test/manual/amp-base-carousel/peeking-sides-centered.amp.html
rename to test/fixtures/e2e/amp-base-carousel/peeking-sides-centered.amp.html
index 9ddd54ba997e4..c6ff756e693a2 100644
--- a/test/manual/amp-base-carousel/peeking-sides-centered.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/peeking-sides-centered.amp.html
@@ -6,7 +6,7 @@
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     body {
       max-width: 527px;
diff --git a/test/manual/amp-base-carousel/peeking-sides-start-aligned.amp.html b/test/fixtures/e2e/amp-base-carousel/peeking-sides-start-aligned.amp.html
similarity index 97%
rename from test/manual/amp-base-carousel/peeking-sides-start-aligned.amp.html
rename to test/fixtures/e2e/amp-base-carousel/peeking-sides-start-aligned.amp.html
index a9141f5d4c7be..36c18575d8638 100644
--- a/test/manual/amp-base-carousel/peeking-sides-start-aligned.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/peeking-sides-start-aligned.amp.html
@@ -6,7 +6,7 @@
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     body {
       max-width: 527px;
diff --git a/test/manual/amp-base-carousel/related-items.amp.html b/test/fixtures/e2e/amp-base-carousel/related-items.amp.html
similarity index 94%
rename from test/manual/amp-base-carousel/related-items.amp.html
rename to test/fixtures/e2e/amp-base-carousel/related-items.amp.html
index fbb3807aab857..19e4a9ac7fe0f 100644
--- a/test/manual/amp-base-carousel/related-items.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/related-items.amp.html
@@ -5,8 +5,7 @@
   <title>Related items config</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     body {
       max-width: 527px;
diff --git a/test/manual/amp-base-carousel/responsive.amp.html b/test/fixtures/e2e/amp-base-carousel/responsive.amp.html
similarity index 94%
rename from test/manual/amp-base-carousel/responsive.amp.html
rename to test/fixtures/e2e/amp-base-carousel/responsive.amp.html
index 056f67384418d..970b6d4897b61 100644
--- a/test/manual/amp-base-carousel/responsive.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/responsive.amp.html
@@ -5,9 +5,8 @@
   <title>Basic Carousel</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     amp-base-carousel img {
       object-fit: cover;
diff --git a/test/fixtures/e2e/amp-base-carousel/snap-property.amp.html b/test/fixtures/e2e/amp-base-carousel/snap-property.amp.html
new file mode 100644
index 0000000000000..112a18a9584f6
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/snap-property.amp.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
+    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js" />
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+    <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>
+    <link rel="canonical" href="." />
+    <title>My AMP Page</title>
+    <style amp-custom>
+      body {
+        max-width: 527px;
+      }
+
+      amp-base-carousel img {
+        object-fit: cover;
+      }
+
+      .slide {
+        padding: 4px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- Has snap on spacers-->
+    <amp-base-carousel id="snap-spacers" width="300" height="200"  class="carousel" visible-count="2" loop="true">
+        <amp-img  height="440" width="1000" class="snap" src="../img/redgradient.png" >Slide 1</amp-img>
+        <amp-img  height="440" width="1000" class="slide" src="../img/tealgradient.png" >Slide 2</amp-img>
+        <div>Hello</div>
+        <amp-img  height="440" width="1000"class="slide" src="../img/lemonyellowgradient.png" >Slide 4</amp-img>
+        <p>Goodbye</p>
+        <amp-img  height="440" width="1000" class="slide" src="../img/lilacgradient.png" >Slide 6</amp-img>
+    </amp-base-carousel>
+
+    <!-- Has snap on slides-->
+    <amp-base-carousel id="snap-slides" width="300" height="200"  class="carousel" visible-count="2" loop="false">
+        <amp-img  height="440" width="1000" class="slide" src="../img/redgradient.png" >Slide 1</amp-img>
+        <amp-img  height="440" width="1000" class="slide" src="../img/tealgradient.png" >Slide 2</amp-img>
+        <div>Hello</div>
+        <amp-img  height="440" width="1000"class="slide" src="../img/lemonyellowgradient.png" >Slide 4</amp-img>
+        <p>Goodbye</p>
+        <amp-img  height="440" width="1000" class="slide" src="../img/lilacgradient.png" >Slide 6</amp-img>
+    </amp-base-carousel>
+  </body>
+</html>
diff --git a/test/manual/amp-base-carousel/three-slides-rtl.amp.html b/test/fixtures/e2e/amp-base-carousel/three-slides-rtl.amp.html
similarity index 91%
rename from test/manual/amp-base-carousel/three-slides-rtl.amp.html
rename to test/fixtures/e2e/amp-base-carousel/three-slides-rtl.amp.html
index 554cc1ba178be..1e98c38739ccb 100644
--- a/test/manual/amp-base-carousel/three-slides-rtl.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/three-slides-rtl.amp.html
@@ -5,8 +5,7 @@
   <title>Three slides</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     body {
       max-width: 527px;
diff --git a/test/manual/amp-base-carousel/three-slides.amp.html b/test/fixtures/e2e/amp-base-carousel/three-slides.amp.html
similarity index 91%
rename from test/manual/amp-base-carousel/three-slides.amp.html
rename to test/fixtures/e2e/amp-base-carousel/three-slides.amp.html
index ef435e6cef451..bfe226adf297e 100644
--- a/test/manual/amp-base-carousel/three-slides.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/three-slides.amp.html
@@ -5,8 +5,7 @@
   <title>Three slides</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     body {
       max-width: 527px;
diff --git a/test/manual/amp-base-carousel/tweets.amp.html b/test/fixtures/e2e/amp-base-carousel/tweets.amp.html
similarity index 93%
rename from test/manual/amp-base-carousel/tweets.amp.html
rename to test/fixtures/e2e/amp-base-carousel/tweets.amp.html
index 6ea988290e2cc..4fec1e9760e2e 100644
--- a/test/manual/amp-base-carousel/tweets.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/tweets.amp.html
@@ -5,9 +5,8 @@
   <title>Tweets Carousel</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     body {
       min-height: 100%;
@@ -60,7 +59,7 @@ <h1>Tweets</h1>
         layout="flex-item"
         data-theme="dark"
         data-tweetid="1060354223290941440">
-    </amp-twitter>   
+    </amp-twitter>
   </amp-base-carousel>
 </body>
 </html>
diff --git a/test/manual/amp-base-carousel/two-slides.amp.html b/test/fixtures/e2e/amp-base-carousel/two-slides.amp.html
similarity index 91%
rename from test/manual/amp-base-carousel/two-slides.amp.html
rename to test/fixtures/e2e/amp-base-carousel/two-slides.amp.html
index 699b26ce843ad..57235f0529499 100644
--- a/test/manual/amp-base-carousel/two-slides.amp.html
+++ b/test/fixtures/e2e/amp-base-carousel/two-slides.amp.html
@@ -5,8 +5,7 @@
   <title>Two slides</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
   <style amp-custom>
     body {
       max-width: 527px;
diff --git a/test/fixtures/e2e/amp-base-carousel/vertical.amp.html b/test/fixtures/e2e/amp-base-carousel/vertical.amp.html
new file mode 100644
index 0000000000000..f57921ee4c5d8
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/vertical.amp.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Vertical Carousel</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
+  <style amp-custom>
+    amp-base-carousel img {
+      object-fit: cover;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <h1>A vertical carousel</h1>
+  <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" horizontal="false" lightbox>
+    <amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/orangegradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/tealgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
+    <amp-img src="./img/lilacgradient.png" layout="flex-item"></amp-img>
+  </amp-base-carousel>
+  <button on="tap:carousel-1.prev()">Prev</button>
+  <button on="tap:carousel-1.next()">Next</button>
+  <button on="tap:carousel-1.goToSlide(index = 1)">Slide 2 (1 indexed)</button>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-base-carousel/zero-index-slide.amp.html b/test/fixtures/e2e/amp-base-carousel/zero-index-slide.amp.html
new file mode 100644
index 0000000000000..af3361fec5760
--- /dev/null
+++ b/test/fixtures/e2e/amp-base-carousel/zero-index-slide.amp.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8">
+    <title>amp-bind</title>
+    <link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-bind/index.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-latest.js"></script>
+  </head>
+
+  <body>
+    <amp-base-carousel
+        id="carousel"
+        auto-advance="true"
+        auto-advance-interval="3000"
+        height="120"
+        snap-align="center"
+        layout="fixed-height"
+        loop="true"
+        visible-count="1"
+        amp-fx="fade-in">
+        <div style="text-align:center;">
+          <h5>Slide Title 1</h5>
+          <h6>Content Text 1</h6>
+        </div>
+        <div style="text-align:center;">
+          <h5>Slide Title 2</h5>
+          <h6>Content Text 2</h6>
+        </div>
+        <div style="text-align:center;">
+          <h5>Slide Title 3</h5>
+          <h6>Content Text 3</h6>
+        </div>
+    </amp-base-carousel>
+    <div style="text-align:center; cursor:pointer">
+      <i on="tap:carousel.goToSlide(index=0)">0</i>
+      <i on="tap:carousel.goToSlide(index=1)">1</i>
+      <i on="tap:carousel.goToSlide(index=2)">2</i>
+    </div>
+  </body>
+</html>
diff --git a/test/fixtures/e2e/amp-carousel/0.1/document-height.html b/test/fixtures/e2e/amp-carousel/0.1/document-height.html
index 334892aca9766..4c001bada3cf5 100644
--- a/test/fixtures/e2e/amp-carousel/0.1/document-height.html
+++ b/test/fixtures/e2e/amp-carousel/0.1/document-height.html
@@ -18,7 +18,6 @@ <h1>amp carousel</h1>
     <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no" layout=fill></amp-img>
     <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no" width=400 height=300></amp-img>
     <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w300-h300-no" width=400 height=300></amp-img>
-  </amp-carousel> 
+  </amp-carousel>
 </body>
 </html>
-
diff --git a/test/fixtures/e2e/amp-carousel/0.1/hidden-controls.amp.html b/test/fixtures/e2e/amp-carousel/0.1/hidden-controls.amp.html
new file mode 100644
index 0000000000000..432c2f9995131
--- /dev/null
+++ b/test/fixtures/e2e/amp-carousel/0.1/hidden-controls.amp.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Carousel 0.1</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <style amp-custom>
+    rect.red {
+      fill: red;
+    }
+    rect.blue {
+      fill: blue;
+    }
+    rect.green {
+      fill: green;
+    }
+    /*
+     * Mimics [i-amphtml-carousel-hide-buttons] CSS rules.
+     * This is necessary because the component normally only applies these styles
+     * when a `touch` gesture is detected on the AMP doc. Because e2e test environments
+     * run with `mouse` gesture, the correct styles are not automatically applied in
+     * the test fixture. This simulates the CSS that *would* be applied so we can test
+     * behaviors specific to the `touch` amp-carousel experience.
+     * TODO(wg-infra): This can be removed once a `touch` e2e environment is supported.
+     */
+    .amp-carousel-button-next{
+      opacity: 0;
+      pointer-events: none;
+      visibility: visible !important;
+    }
+  </style>
+</head>
+<body>
+  <h1>Hidden controls</h1>
+  <amp-carousel
+  id="scrollable-carousel"
+  width="400"
+  height="225"
+  layout="fixed"
+  type="slides">
+  <amp-layout layout="responsive" width="440" height="225">
+    <svg viewBox="0 0 440 225">
+      <rect class="red" width="440" height="225" />
+      Sorry, your browser does not support inline SVG.
+    </svg>
+  </amp-layout>
+  <amp-layout layout="responsive" width="440" height="225">
+    <svg viewBox="0 0 440 225">
+      <rect class="blue" width="440" height="225" />
+      Sorry, your browser does not support inline SVG.
+    </svg>
+  </amp-layout>
+  <amp-layout layout="responsive" width="440" height="225">
+    <svg viewBox="0 0 440 225">
+      <rect class="green" width="440" height="225"/>
+      Sorry, your browser does not support inline SVG.
+    </svg>
+  </amp-layout>
+</amp-carousel>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-carousel/0.1/slidescroll-autoplay.html b/test/fixtures/e2e/amp-carousel/0.1/slidescroll-autoplay.html
index f158a39966b89..f119b60d46e21 100644
--- a/test/fixtures/e2e/amp-carousel/0.1/slidescroll-autoplay.html
+++ b/test/fixtures/e2e/amp-carousel/0.1/slidescroll-autoplay.html
@@ -8,11 +8,6 @@
       name="viewport"
       content="width=device-width,minimum-scale=1,initial-scale=1"
     />
-    <link
-      href="https://fonts.googleapis.com/css?family=Questrial"
-      rel="stylesheet"
-      type="text/css"
-    />
     <script
       async
       custom-element="amp-carousel"
@@ -44,7 +39,8 @@ <h1>Autoplay slides</h1>
       height="225"
       layout="fixed"
       type="slides"
-      autoplay="3000"
+      autoplay
+      delay="1000"
     >
       <amp-layout id="slide1" layout="responsive" width="440" height="225">
         <svg viewBox="0 0 440 225">
diff --git a/test/fixtures/e2e/amp-carousel/0.2/amp-lightbox-carousel-selector.amp.html b/test/fixtures/e2e/amp-carousel/0.2/amp-lightbox-carousel-selector.amp.html
new file mode 100644
index 0000000000000..f7cf4f1db6a6f
--- /dev/null
+++ b/test/fixtures/e2e/amp-carousel/0.2/amp-lightbox-carousel-selector.amp.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>AMP Lightbox Carousel With AMP Selector</title>
+    <link rel="canonical" href="self.html" />
+    <meta name="viewport" content="width=device-width" />
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
+    <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
+    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
+    <style amp-custom>
+      body {
+        padding: 10px;
+      }
+      .inner {
+        display: flex;
+        gap: 10px;
+      }
+      .image {
+        width: 300px;
+      }
+      .image + .image {
+        margin-left: 10px;
+      }
+      .lightbox {
+        background-color: black;
+      }
+      .close-button {
+        position: absolute;
+        z-index: 1;
+      }
+    </style>
+  </head>
+  <body>
+  <amp-selector id="selector1" on="select:carousel1.goToSlide(index=event.targetOption), lightbox1">
+    <div class="inner">
+        <amp-img id="first" class="image" src="../img/lemonyellowgradient.png" option="0" layout="responsive" width="450" height="300"></amp-img>
+        <amp-img id="second" class="image" src="../img/bluegradient.png" layout="responsive" option="1" width="450" height="300"></amp-img>
+        <amp-img id="third" class="image" src="../img/greengradient.png" layout="responsive" option="2" width="450" height="300"></amp-img>
+        <amp-img id="fourth" class="image" src="../img/orangegradient.png" layout="responsive" option="3" width="450" height="300"></amp-img>
+    </div>
+  </amp-selector>
+  <amp-lightbox id="lightbox1" class="lightbox" layout="nodisplay">
+    <button class="close-button" on="tap:lightbox1.close">close</button>
+    <amp-carousel id="carousel1" width="900" height="600" layout="fill" type="slides" on="slideChange:selector1.toggle(index=event.index, value=true)">
+        <amp-img src="../img/lemonyellowgradient.png" layout="responsive" width="900" height="600"></amp-img>
+        <amp-img src="../img/bluegradient.png" layout="responsive" width="900" height="600"></amp-img>
+        <amp-img src="../img/greengradient.png" layout="responsive" width="900" height="600"></amp-img>
+        <amp-img src="../img/orangegradient.png" layout="responsive" width="900" height="600"></amp-img>
+    </amp-carousel>
+  </amp-lightbox>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-carousel/0.2/responsive-slides.amp.html b/test/fixtures/e2e/amp-carousel/0.2/responsive-slides.amp.html
new file mode 100644
index 0000000000000..175bba22b93a3
--- /dev/null
+++ b/test/fixtures/e2e/amp-carousel/0.2/responsive-slides.amp.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Responsive Carousel</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <main>
+    <amp-carousel width="412" height="309" type="carousel">
+      <amp-img width="412" height="309" layout="responsive" src="../img/bluegradient.png">
+      </amp-img>
+      <amp-img width="412" height="309" layout="responsive" src="../img/redgradient.png">
+      </amp-img>
+      <amp-img width="412" height="309" layout="responsive" src="../img/greengradient.png">
+      </amp-img>
+    </amp-carousel>
+  </main>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-carousel/img/bluegradient.png b/test/fixtures/e2e/amp-carousel/img/bluegradient.png
new file mode 100644
index 0000000000000..569390db9dfb0
Binary files /dev/null and b/test/fixtures/e2e/amp-carousel/img/bluegradient.png differ
diff --git a/test/fixtures/e2e/amp-carousel/img/greengradient.png b/test/fixtures/e2e/amp-carousel/img/greengradient.png
new file mode 100644
index 0000000000000..bfb18d62370aa
Binary files /dev/null and b/test/fixtures/e2e/amp-carousel/img/greengradient.png differ
diff --git a/test/fixtures/e2e/amp-carousel/img/lemonyellowgradient.png b/test/fixtures/e2e/amp-carousel/img/lemonyellowgradient.png
new file mode 100644
index 0000000000000..39352b9db480b
Binary files /dev/null and b/test/fixtures/e2e/amp-carousel/img/lemonyellowgradient.png differ
diff --git a/test/fixtures/e2e/amp-carousel/img/lilacgradient.png b/test/fixtures/e2e/amp-carousel/img/lilacgradient.png
new file mode 100644
index 0000000000000..44fc95abab50c
Binary files /dev/null and b/test/fixtures/e2e/amp-carousel/img/lilacgradient.png differ
diff --git a/test/fixtures/e2e/amp-carousel/img/orangegradient.png b/test/fixtures/e2e/amp-carousel/img/orangegradient.png
new file mode 100644
index 0000000000000..9d0b8349340a8
Binary files /dev/null and b/test/fixtures/e2e/amp-carousel/img/orangegradient.png differ
diff --git a/test/fixtures/e2e/amp-carousel/img/redgradient.png b/test/fixtures/e2e/amp-carousel/img/redgradient.png
new file mode 100644
index 0000000000000..3580295fa1d62
Binary files /dev/null and b/test/fixtures/e2e/amp-carousel/img/redgradient.png differ
diff --git a/test/fixtures/e2e/amp-carousel/img/tealgradient.png b/test/fixtures/e2e/amp-carousel/img/tealgradient.png
new file mode 100644
index 0000000000000..024f1eca51bd7
Binary files /dev/null and b/test/fixtures/e2e/amp-carousel/img/tealgradient.png differ
diff --git a/test/manual/amp-consent/amp-consent-basic-uses.amp.html b/test/fixtures/e2e/amp-consent/amp-consent-basic-uses.amp.html
similarity index 92%
rename from test/manual/amp-consent/amp-consent-basic-uses.amp.html
rename to test/fixtures/e2e/amp-consent/amp-consent-basic-uses.amp.html
index ec41e6b9deb0a..be1b4ccca4de7 100644
--- a/test/manual/amp-consent/amp-consent-basic-uses.amp.html
+++ b/test/fixtures/e2e/amp-consent/amp-consent-basic-uses.amp.html
@@ -152,7 +152,7 @@ <h3>Image that is blocked by 'default' consent</h3>
   <h3>Image that is NOT blocked by consent</h3>
   <amp-img
     src="/examples/img/ima-poster.png" width=300 height=200></amp-img>
-    
+
     <amp-analytics>
       <script type="application/json">
       {
@@ -213,25 +213,25 @@ <h3>Image that is NOT blocked by consent</h3>
         }
       }
     }</script>
-    
+
     <div id="ui1">
         NA: Can I load the image??
-        <button on="tap:ABC.accept" role="button">Accept</button>
-        <button on="tap:ABC.reject" role="button">Reject</button>
-        <button on="tap:ABC.dismiss" role="button">Dismiss</button>
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
       </div>
     <div id="ui2">
         EU: Can I load the image??
-        <button id="accept" on="tap:ABC.accept" role="button">Accept</button>
-        <button id="reject" on="tap:ABC.reject" role="button">Reject</button>
-        <button id="dismiss" on="tap:ABC.dismiss" role="button">Dismiss</button>
+        <button id="accept" on="tap:ABC.accept">Accept</button>
+        <button id="reject" on="tap:ABC.reject">Reject</button>
+        <button id="dismiss" on="tap:ABC.dismiss">Dismiss</button>
       </div>
       <div id="postPromptUI">
         Post Prompt UI
-        <button on="tap:ABC.prompt" role="button">Manage</button>
+        <button on="tap:ABC.prompt">Manage</button>
       </div>
   </amp-consent>
-  
+
   <article>
     <div class="content-container">
       <header>
@@ -245,7 +245,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
       <div>
         Revoke consent
-        <button class="button" on="tap:ABC.prompt" role="button">Manage</button>
+        <button class="button" on="tap:ABC.prompt">Manage</button>
       </div>
 
       <div class="author">
@@ -272,7 +272,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
         </p>
       </div>
     </div>
-    <button on="tap:ABC.prompt" role="button">Manage Consent</button>
+    <button on="tap:ABC.prompt">Manage Consent</button>
   </article>
 
   <amp-twitter
diff --git a/test/fixtures/e2e/amp-consent/cmp-interaction.html b/test/fixtures/e2e/amp-consent/cmp-interaction.html
new file mode 100644
index 0000000000000..1228fa029cb9d
--- /dev/null
+++ b/test/fixtures/e2e/amp-consent/cmp-interaction.html
@@ -0,0 +1,233 @@
+<!doctype html>
+<html ⚡>
+
+<head>
+  <meta charset="utf-8">
+  <title>AMP Consent E2E Test</title>
+  <link rel="canonical" href="amps.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
+
+  <style amp-custom>
+    body {
+      margin: 0;
+      font-family: 'Georgia', Serif;
+    }
+
+    .brand-logo {
+      font-family: 'Open Sans';
+    }
+
+    .ad-container {
+      display: flex;
+      justify-content: center;
+    }
+
+    .content-container p {
+      line-height: 24px;
+    }
+
+    header,
+    .article-body {
+      padding: 15px;
+    }
+
+    .full-bleed {
+      margin: 0 -15px;
+    }
+
+    figure {
+      margin: 0;
+    }
+
+    figcaption {
+      color: #6f757a;
+      padding: 15px 0;
+      font-size: .9em;
+    }
+
+    .author {
+      display: flex;
+      align-items: center;
+
+      background: #f4f4f4;
+      padding: 0 15px;
+
+      font-size: .8em;
+
+      border: solid #dcdcdc;
+      border-width: 1px 0;
+    }
+
+    .header-time {
+      color: #a8a3ae;
+      font-family: 'Roboto';
+      font-size: 12px;
+    }
+
+    .author p {
+      margin: 5px;
+    }
+
+    .byline {
+      font-family: 'Roboto';
+      display: inline-block;
+    }
+
+    .byline p {
+      line-height: normal;
+    }
+
+    .byline .brand {
+      color: #6f757a;
+    }
+
+    .standfirst {
+      color: #6f757a;
+    }
+
+    .mailto {
+      text-decoration: none;
+    }
+
+    #author-avatar {
+      margin: 10px;
+      border: 5px solid #fff;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+    }
+
+    h1 {
+      margin: 5px 0;
+      font-weight: normal;
+    }
+
+    footer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 226px;
+      background: #f4f4f4;
+    }
+
+    amp-consent {
+      min-height: 30px;
+      font-family: 'Roboto';
+      font-weight: 500;
+      line-height: 30px;
+      padding: 8px;
+      background: #46b6ac;
+    }
+
+    amp-consent button {
+      border: none;
+      border-radius: 2px;
+
+      color: #fafafa;
+      height: 26px;
+      min-width: 32px;
+      padding: 0 16px;
+      margin: 0 16px;
+      text-transform: uppercase;
+      letter-spacing: 0;
+      cursor: pointer;
+      vertical-align: middle;
+      line-height: 26px;
+      text-align: center;
+      background: #3f51b5;
+    }
+
+    #ui1 {
+      height: 100vh;
+    }
+
+    hr {
+      margin: 0;
+    }
+  </style>
+  <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
+  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+
+<body>
+  <header>
+    <div class="brand-logo">
+      PublisherLogo
+    </div>
+  </header>
+  <main role="main">
+    <h3>Image that is blocked by both consent</h3>
+    <amp-img data-block-on-consent src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n"
+      width=300 height=200></amp-img>
+
+    <h3>Image that is NOT blocked by consent</h3>
+    <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n" width=300 height=200></amp-img>
+
+    <!-- Override promptUISrc from _ping_ -->
+    <amp-consent id='ConsentPrompt' layout='nodisplay' type="_ping_">
+      <script type="application/json">
+        {
+            "consentInstanceId": "ConsentPrompt",
+            "promptUISrc": "/test/fixtures/served/cmp-iframe.html",
+            "postPromptUI": "postPromptUI"
+        }
+      </script>
+      <div id="ui1">
+        Please Accept to load image.
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
+      </div>
+      <div id="ui2">
+        Please Accept to load image.
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
+      </div>
+      <div id="postPromptUI">
+        Post Prompt UI
+        <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
+      </div>
+    </amp-consent>
+    <article>
+
+      <div class="content-container">
+        <header>
+          <h1 itemprop="headline">Lorem Ipsum</h1>
+          <time class="header-time" itemprop="datePublished" datetime="2015-09-14 13:00">September 14, 2015</time>
+          <p class="standfirst">
+            Fusce pretium tempor justo, vitae consequat dolor maximus eget.
+          </p>
+        </header>
+
+        <div>
+          Revoke consent ABC and DEF
+          <button class="button" on="tap:ABC.prompt(consent=ABC),ABC.prompt(consent=DEF)">Manage</button>
+        </div>
+        <div>
+          Revoke error consent doesn't exsit
+          <button class="button" on="tap:ABC.prompt(consent=ABCd)">Manage</button>
+        </div>
+        <div>
+          Only revoke DEF
+          <button class="button" on="tap:ABC.prompt(consent=DEF)">Manage</button>
+        </div>
+
+        <div class="author">
+          <div class="byline">
+            <p>
+              by <span itemscope itemtype="http://schema.org/Person" itemprop="author"><b>Lorem Ipsum</b>
+          <a class="mailto" href="mailto:lorem.ipsum@">
+          lorem.ipsum@</a></span>
+            </p>
+            <p class="brand">PublisherName News Reporter
+              <p>
+          </div>
+        </div>
+      </div>
+    </article>
+  </main>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-date-countdown/amp-date-countdown.html b/test/fixtures/e2e/amp-date-countdown/amp-date-countdown.html
new file mode 100644
index 0000000000000..edec5f2c135a8
--- /dev/null
+++ b/test/fixtures/e2e/amp-date-countdown/amp-date-countdown.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html ⚡>
+<head>
+    <meta charset="utf-8">
+    <title>amp-date-countdown</title>
+    <link rel="canonical" href="//example.com" >
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-latest.js"></script>
+    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
+</head>
+
+<body>
+    <amp-date-countdown
+      id="one"
+      timeleft-ms="0"
+      layout="fixed-height"
+      height="100"
+    >
+      <template type="amp-mustache">
+        {"years":"{{years}}","months":"{{months}}","days":"{{days}}","hours":"{{hours}}","minutes":"{{minutes}}","seconds":"{{seconds}}","d":"{{d}}","dd":"{{dd}}","h":"{{h}}","hh":"{{hh}}","m":"{{m}}","mm":"{{mm}}","s":"{{s}}","ss":"{{ss}}"}
+      </template>
+    </amp-date-countdown>
+
+    <amp-date-countdown
+      id="two"
+      timeleft-ms="-1"
+      layout="fixed-height"
+      height="100"
+    ></amp-date-countdown>
+
+    <amp-date-countdown
+      id="three"
+      locale="de"
+      biggest-unit="HOURS"
+      timeleft-ms="100000000"
+      layout="fixed-height"
+      height="100"
+    >
+      <template type="amp-mustache">
+        {"years":"{{years}}","months":"{{months}}","days":"{{days}}","hours":"{{hours}}","minutes":"{{minutes}}","seconds":"{{seconds}}","d":"{{d}}","dd":"{{dd}}","h":"{{h}}","hh":"{{hh}}","m":"{{m}}","mm":"{{mm}}","s":"{{s}}","ss":"{{ss}}"}
+      </template>
+    </amp-date-countdown>
+
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-date-picker/blocked-dates.html b/test/fixtures/e2e/amp-date-picker/blocked-dates.html
index 6713a76559ecc..3e4b23513c22c 100644
--- a/test/fixtures/e2e/amp-date-picker/blocked-dates.html
+++ b/test/fixtures/e2e/amp-date-picker/blocked-dates.html
@@ -27,5 +27,12 @@ <h2>blocked dates</h2>
       number-of-months="2"
       src="http://localhost:__TEST_SERVER_PORT__/test/date-picker/config.json">
   </amp-date-picker>
+  <amp-date-picker
+      id="rrule"
+      layout="fixed-height" height="360"
+      number-of-months="2"
+      highlighted="FREQ=WEEKLY;WKST=SU;BYDAY=TH"
+      blocked="FREQ=WEEKLY;WKST=SU;BYDAY=SA,SU">
+  </amp-date-picker>
 </body>
 </html>
diff --git a/test/fixtures/e2e/amp-fit-text/0.1/amp-fit-text.html b/test/fixtures/e2e/amp-fit-text/0.1/amp-fit-text.html
index d888dece740df..8d226322f4f62 100644
--- a/test/fixtures/e2e/amp-fit-text/0.1/amp-fit-text.html
+++ b/test/fixtures/e2e/amp-fit-text/0.1/amp-fit-text.html
@@ -63,4 +63,3 @@ <h3>Scale down</h3>
 </article>
 </body>
 </html>
-
diff --git a/test/fixtures/e2e/amp-fit-text/1.0/amp-fit-text.html b/test/fixtures/e2e/amp-fit-text/1.0/amp-fit-text.html
index 021f9276de9d1..8e2b57cd6df0a 100644
--- a/test/fixtures/e2e/amp-fit-text/1.0/amp-fit-text.html
+++ b/test/fixtures/e2e/amp-fit-text/1.0/amp-fit-text.html
@@ -63,4 +63,3 @@ <h3>Scale down</h3>
 </article>
 </body>
 </html>
-
diff --git a/test/fixtures/e2e/amp-lightbox/amp-lightbox-autocomplete.html b/test/fixtures/e2e/amp-lightbox/amp-lightbox-autocomplete.html
new file mode 100644
index 0000000000000..c60c8e1adbe11
--- /dev/null
+++ b/test/fixtures/e2e/amp-lightbox/amp-lightbox-autocomplete.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html ⚡>
+<head>
+    <meta charset="utf-8">
+    <title>amp-lightbox</title>
+    <link rel="canonical" href="//example.com" >
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
+    <script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
+    <style amp-custom>
+    amp-lightbox {
+      background-color: rgba(0, 0, 0, 0.9);
+    }
+    </style>
+</head>
+
+<body>
+  <amp-lightbox id="lightbox" layout="nodisplay" on="lightboxOpen:autocomplete-input.focus">
+
+    <button id="close" on="tap:lightbox.close">
+      Close Lightbox
+    </button>
+    <amp-autocomplete min-characters="0" filter="substring">
+        <input id="autocomplete-input">
+        <script type="application/json">
+            {
+                "items": ["apple", "orange", "banana"]
+            }
+        </script>
+    </amp-autocomplete>
+
+  </amp-lightbox>
+
+  <button id="open" on="tap:lightbox.open">
+    Open Lightbox
+  </button>
+</body>
+</html>
diff --git a/test/manual/amp-lightbox-gallery-launch.amp.html b/test/fixtures/e2e/amp-lightbox/amp-lightbox-gallery-launch.amp.html
similarity index 87%
rename from test/manual/amp-lightbox-gallery-launch.amp.html
rename to test/fixtures/e2e/amp-lightbox/amp-lightbox-gallery-launch.amp.html
index 414a557c397bb..947b0f46a6dfd 100644
--- a/test/manual/amp-lightbox-gallery-launch.amp.html
+++ b/test/fixtures/e2e/amp-lightbox/amp-lightbox-gallery-launch.amp.html
@@ -17,9 +17,6 @@
   <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
   <!-- Optionally import the amp-carousel component in the header if you are using lightbox with carousel. -->
   <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
-  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
-  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
-  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
 
   <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>
@@ -64,11 +61,11 @@
   This is a basic example that demonstrates lightboxed `<amp-img>`s. You have one or more `<amp-img>` elements on the page. Just add the "lightbox" attribute to each image that you wish to view in a lightbox.
   -->
   <div class="container">
-    <amp-img lightbox src="./img/bluegradient.png" width="300" height="200" layout="responsive"></amp-img>
+    <amp-img lightbox src="../amp-base-carousel/img/bluegradient.png" width="300" height="200" layout="responsive"></amp-img>
     <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-    <amp-img lightbox src="./img/redgradient.png" width="300" height="200" layout="responsive"></amp-img>
+    <amp-img lightbox src="../amp-base-carousel/img/redgradient.png" width="300" height="200" layout="responsive"></amp-img>
     <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-    <amp-img lightbox src="./img/lemonyellowgradient.png" width="300" height="200" layout="responsive"></amp-img>
+    <amp-img lightbox src="../amp-base-carousel/img/lemonyellowgradient.png" width="300" height="200" layout="responsive"></amp-img>
     <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
 
@@ -78,9 +75,9 @@
   -->
   <div>
     <amp-carousel lightbox width="400" height="300" layout="responsive" type="slides">
-      <amp-img src="./img/lilacgradient.png" width="400" height="300" layout="responsive"></amp-img>
-      <amp-img src="./img/tealgradient.png" width="400" height="300" layout="responsive"></amp-img>
-      <amp-img src="./img/orangegradient.png" width="400" height="300" layout="responsive"></amp-img>
+      <amp-img src="../amp-base-carousel/img/lilacgradient.png" width="400" height="300" layout="responsive"></amp-img>
+      <amp-img src="../amp-base-carousel/img/tealgradient.png" width="400" height="300" layout="responsive"></amp-img>
+      <amp-img src="../amp-base-carousel/img/orangegradient.png" width="400" height="300" layout="responsive"></amp-img>
     </amp-carousel>
   </div>
 
@@ -89,7 +86,7 @@
 
     <div>
       <amp-img lightbox="hero"
-        src="./img/lilacgradient.png"
+        src="../amp-base-carousel/img/lilacgradient.png"
         width="400"
         height="300"
         layout="responsive">
@@ -97,12 +94,12 @@
       </amp-img>
     <div hidden>
       <amp-img lightbox="hero"
-        src="./img/orangegradient.png"
+        src="../amp-base-carousel/img/orangegradient.png"
         layout="responsive"
         width="400"
         height="300"></amp-img>
       <amp-img lightbox="hero"
-        src="./img/tealgradient.png"
+        src="../amp-base-carousel/img/tealgradient.png"
         width="400"
         height="300"
         layout="responsive" ></amp-img>
@@ -120,7 +117,7 @@
 
     <amp-img
       lightbox="caption"
-      src="./img/lemonyellowgradient.png"
+      src="../amp-base-carousel/img/lemonyellowgradient.png"
       width="300"
       height="200"
       layout="responsive"></amp-img>
@@ -129,7 +126,7 @@
     <figure>
       <amp-img
         lightbox="caption"
-        src="./img/redgradient.png"
+        src="../amp-base-carousel/img/redgradient.png"
         width="300"
         height="200"
         layout="responsive"></amp-img>
@@ -141,7 +138,7 @@
 
     <amp-img
       lightbox="caption"
-      src="./img/greengradient.png"
+      src="../amp-base-carousel/img/greengradient.png"
       layout="responsive"
       width="300"
       height="200"
diff --git a/test/fixtures/e2e/amp-lightbox/amp-lightbox-with-carousel-0.2.amp.html b/test/fixtures/e2e/amp-lightbox/amp-lightbox-with-carousel-0.2.amp.html
new file mode 100644
index 0000000000000..cb88067952e99
--- /dev/null
+++ b/test/fixtures/e2e/amp-lightbox/amp-lightbox-with-carousel-0.2.amp.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="/components/amp-lightbox-gallery/">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>amp-lightbox-gallery with amp-carousel 0.2</title>
+  <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
+  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
+
+  <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>
+    .overlay-text {
+      position: absolute;
+      bottom: 16px;
+      left: 16px;
+      z-index: 1;
+      pointer-events: none;
+      background-color: #494A4D;
+      color: white;
+      padding: 2px 6px 2px 6px;
+      border-radius: 2px;
+      opacity: 0.7;
+      font-family: Roboto, sans-serif;
+      font-size: 1em;
+    }
+
+    figure {
+      margin: 0;
+    }
+
+    amp-img[lightbox] {
+      cursor: pointer;
+    }
+
+    .container {
+      margin: 0 6% 0 6%;
+    }
+
+    .paragraph {
+      padding: 10px 0 10px 0;
+    }
+
+  </style>
+</head>
+<body>
+  <div class="container">
+    <amp-img lightbox src="../../../fixtures/e2e/amp-base-carousel/img/bluegradient.png" width="300" height="200" layout="responsive"></amp-img>
+    <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <amp-img lightbox src="../../../fixtures/e2e/amp-base-carousel/img/redgradient.png" width="300" height="200" layout="responsive"></amp-img>
+    <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <amp-img lightbox src="../../../fixtures/e2e/amp-base-carousel/img/lemonyellowgradient.png" width="300" height="200" layout="responsive"></amp-img>
+    <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </div>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-lightbox/amp-lightbox.html b/test/fixtures/e2e/amp-lightbox/amp-lightbox.html
index 76ee6f1b415a3..b9d45cfa8544b 100644
--- a/test/fixtures/e2e/amp-lightbox/amp-lightbox.html
+++ b/test/fixtures/e2e/amp-lightbox/amp-lightbox.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
+    <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-latest.js"></script>
     <style amp-custom>
     amp-lightbox {
       background-color: rgba(0, 0, 0, 0.9);
diff --git a/test/fixtures/e2e/amp-lightbox/custom-close-button.amp.html b/test/fixtures/e2e/amp-lightbox/custom-close-button.amp.html
new file mode 100644
index 0000000000000..f741512b44213
--- /dev/null
+++ b/test/fixtures/e2e/amp-lightbox/custom-close-button.amp.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html ⚡>
+<head>
+    <meta charset="utf-8">
+    <title>amp-lightbox</title>
+    <link rel="canonical" href="//example.com" >
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-latest.js"></script>
+    <style amp-custom>
+    amp-lightbox {
+      background-color: rgba(0, 0, 0, 0.9);
+    }
+    </style>
+</head>
+
+<body>
+  <amp-lightbox id="lightbox" layout="nodisplay">
+    <button id="close" slot="close-button" on="tap:lightbox.close">
+      Close Lightbox
+    </button>
+    <amp-img
+        id="image"
+        src="/examples/img/sample.jpg"
+        width="641" height="481"
+    ></amp-img>
+  </amp-lightbox>
+
+  <button id="open" on="tap:lightbox.open">
+    Open Lightbox
+  </button>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-list/amp-list-function-load-more.html b/test/fixtures/e2e/amp-list/amp-list-function-load-more.html
new file mode 100644
index 0000000000000..e701a0a1eb90a
--- /dev/null
+++ b/test/fixtures/e2e/amp-list/amp-list-function-load-more.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html ⚡>
+<head>
+    <meta charset="utf-8">
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
+    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
+    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
+    <style amp4email-boilerplate>body{visibility:hidden}</style>
+</head>
+<body>
+    <amp-script id="fns" script="local-script" nodom data-ampdevmode ></amp-script>
+    <script type="text/plain" target="amp-script" id="local-script">
+      let count = 0;
+      function fetchData() {
+        if (count >= 5) {
+          return {items: []};
+        }
+        count++;
+        const items = [{name: 'apple'}, {name: 'banana'}, {name: 'pear'}];
+        return Promise.resolve({items, "load-more-src": "amp-script:fns.fetchData"});
+      }
+
+      exportFunction('fetchData', fetchData);
+    </script>
+    <amp-list
+      id="list1"
+      width="auto"
+      height="100"
+      layout="fixed-height"
+      src="amp-script:fns.fetchData"
+      load-more="auto"
+    >
+      <template type="amp-mustache" id="amp-template-id">
+        <div>{{name}}</div>
+      </template>
+    </amp-list>
+  </body>
+
+</html>
diff --git a/test/fixtures/e2e/amp-list/amp-list-function-src.html b/test/fixtures/e2e/amp-list/amp-list-function-src.html
new file mode 100644
index 0000000000000..36a22f01808b0
--- /dev/null
+++ b/test/fixtures/e2e/amp-list/amp-list-function-src.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html ⚡>
+<head>
+    <meta charset="utf-8">
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
+    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
+    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
+    <style amp4email-boilerplate>body{visibility:hidden}</style>
+</head>
+<body>
+
+  <amp-script id="fns" script="fruit-script" nodom data-ampdevmode></amp-script>
+  <script id="fruit-script" type="text/plain" target="amp-script">
+    exportFunction('getFruit', () => ({items: [{name: 'Pineapple'}, {name: 'Mango'}]}));
+  </script>
+
+  <amp-list id="amp-list" width="auto" height="100" layout="fixed-height"
+      src="amp-script:fns.getFruit">
+      <template type="amp-mustache">
+          <div class="fruit">{{name}}</div>
+      </template>
+  </amp-list>
+
+</body>
+</html>
diff --git a/test/manual/amp-list/load-more-auto.amp.html b/test/fixtures/e2e/amp-list/load-more-auto.amp.html
similarity index 95%
rename from test/manual/amp-list/load-more-auto.amp.html
rename to test/fixtures/e2e/amp-list/load-more-auto.amp.html
index 603fcab501c3b..af679d94aa080 100644
--- a/test/manual/amp-list/load-more-auto.amp.html
+++ b/test/fixtures/e2e/amp-list/load-more-auto.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <style amp-custom>
     .footer {
       width: 100%;
diff --git a/test/manual/amp-list/load-more-manual.amp.html b/test/fixtures/e2e/amp-list/load-more-manual.amp.html
similarity index 95%
rename from test/manual/amp-list/load-more-manual.amp.html
rename to test/fixtures/e2e/amp-list/load-more-manual.amp.html
index febf0d7e00de9..337f78aac406a 100644
--- a/test/manual/amp-list/load-more-manual.amp.html
+++ b/test/fixtures/e2e/amp-list/load-more-manual.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <style amp-custom>
 
   </style>
diff --git a/test/fixtures/e2e/amp-script/basic.amp.html b/test/fixtures/e2e/amp-script/basic.amp.html
index cb39f3cb043f3..44d93c754ca7a 100644
--- a/test/fixtures/e2e/amp-script/basic.amp.html
+++ b/test/fixtures/e2e/amp-script/basic.amp.html
@@ -4,7 +4,10 @@
   <meta charset="utf-8">
   <link rel="canonical" href="self.html" />
   <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <meta name="amp-script-src" content="sha384-bW-_HMkVMBmO47rFOYGO7-P-VXShwCOrZ25J2lRfcMyh5YoMYIGMBshG0pm6GlWW sha384-DP5URoE0rQ4CsfiB7KeMTr4ePLGDIEYK04htqx2_VzA0Glzf0VQ9otDwkTyeWACf">
+  <meta name="amp-script-src" content="
+    sha384-bW-_HMkVMBmO47rFOYGO7-P-VXShwCOrZ25J2lRfcMyh5YoMYIGMBshG0pm6GlWW
+    sha384-DP5URoE0rQ4CsfiB7KeMTr4ePLGDIEYK04htqx2_VzA0Glzf0VQ9otDwkTyeWACf
+  ">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-template="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
diff --git a/test/fixtures/e2e/amp-selector/amp-selector-tabs.html b/test/fixtures/e2e/amp-selector/amp-selector-tabs.html
index 524f7ca9da491..ab80017e553e0 100644
--- a/test/fixtures/e2e/amp-selector/amp-selector-tabs.html
+++ b/test/fixtures/e2e/amp-selector/amp-selector-tabs.html
@@ -2,13 +2,13 @@
 <html ⚡>
   <head>
     <meta charset="utf-8">
-    
+
     <title>amp-selector</title>
     <link rel="canonical" href="//example.com" >
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
+    <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-latest.js"></script>
     <style amp-custom>
         :root {
           --color-primary: #005AF0;
@@ -69,4 +69,4 @@
         </amp-selector>
       </div>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/test/fixtures/e2e/amp-sidebar/amp-sidebar-toolbar.html b/test/fixtures/e2e/amp-sidebar/amp-sidebar-toolbar.html
new file mode 100644
index 0000000000000..0a50439075ba6
--- /dev/null
+++ b/test/fixtures/e2e/amp-sidebar/amp-sidebar-toolbar.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html ⚡>
+<head>
+    <meta charset="utf-8">
+    <title>amp-sidebar</title>
+    <link rel="canonical" href="//example.com" >
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
+    <style amp-custom>
+    amp-sidebar {
+      width: 300px;
+    }
+    </style>
+</head>
+
+<body>
+    <amp-sidebar id="sidebar" layout="nodisplay">
+        <nav toolbar="(min-width: 800px)" toolbar-target="nav-target-element">
+            <ul class="sw-nav">
+                <li>Item 1</li>
+                <li>Item 2</li>
+                <li>Item 3</li>
+                <li>Item 4</li>
+            </ul>
+        </nav>
+    </amp-sidebar>
+
+    <button id="open" on="tap:sidebar.open">
+        Open Sidebar
+    </button>
+
+    <div id="nav-target-element"></div>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-sidebar/amp-sidebar.html b/test/fixtures/e2e/amp-sidebar/amp-sidebar.html
index 4de0f3b3dc580..7aeb65bb2beeb 100644
--- a/test/fixtures/e2e/amp-sidebar/amp-sidebar.html
+++ b/test/fixtures/e2e/amp-sidebar/amp-sidebar.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
+    <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-latest.js"></script>
     <style amp-custom>
     amp-sidebar {
       width: 300px;
@@ -27,6 +27,7 @@
         layout="responsive"
         width="13" height="10"
     ></amp-img>
+    <div id='checkWidth'></div>
     <button id="close" on="tap: sidebar.close">Close sidebar</button>
   </amp-sidebar>
 
diff --git a/test/fixtures/e2e/amp-social-share/amp-social-share.html b/test/fixtures/e2e/amp-social-share/amp-social-share.html
new file mode 100644
index 0000000000000..e718f5a16dc53
--- /dev/null
+++ b/test/fixtures/e2e/amp-social-share/amp-social-share.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html ⚡>
+<head>
+    <meta charset="utf-8">
+    <title>amp-social-share</title>
+    <link rel="canonical" href="//example.com" >
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-latest.js"></script>
+</head>
+
+<body>
+    <amp-social-share id="one" type="email"></amp-social-share>
+    <amp-social-share id="two" type="twitter" ><div id='twoChild'>Child</div></amp-social-share>
+    <amp-social-share id="three" height='400' width='400' type="tumblr"></amp-social-share>
+    <amp-social-share id="four" type="meow" data-share-endpoint="endpoint" ></amp-social-share>
+    <amp-social-share id="five" type="meow" ><div id='fiveChild'>Child</div></amp-social-share>
+    <amp-social-share id="six"><div id='sixChild'>Child</div></amp-social-share>
+</body>
+</html>
diff --git a/test/fixtures/e2e/amp-story-auto-ads/basic.html b/test/fixtures/e2e/amp-story-auto-ads/basic.html
index 21d5d029d8362..545fb81e2aa95 100644
--- a/test/fixtures/e2e/amp-story-auto-ads/basic.html
+++ b/test/fixtures/e2e/amp-story-auto-ads/basic.html
@@ -157,9 +157,6 @@ <h1>page nineteen</h1>
           <h1>page twenty</h1>
         </amp-story-grid-layer>
       </amp-story-page>
-
-      <amp-story-bookend src="../../examples/amp-story/bookendv1.json" layout="nodisplay">
-      </amp-story-bookend>
     </amp-story>
   </body>
 </html>
diff --git a/test/fixtures/e2e/amp-story-auto-ads/dv3-request.html b/test/fixtures/e2e/amp-story-auto-ads/dv3-request.html
index e4481fdd00a58..cd41709620bc7 100644
--- a/test/fixtures/e2e/amp-story-auto-ads/dv3-request.html
+++ b/test/fixtures/e2e/amp-story-auto-ads/dv3-request.html
@@ -152,9 +152,6 @@ <h1>page nineteen</h1>
           <h1>page twenty</h1>
         </amp-story-grid-layer>
       </amp-story-page>
-
-      <amp-story-bookend src="../../examples/amp-story/bookendv1.json" layout="nodisplay">
-      </amp-story-bookend>
     </amp-story>
   </body>
 </html>
diff --git a/test/fixtures/e2e/amp-story-player/basic.amp.html b/test/fixtures/e2e/amp-story-player/basic.amp.html
new file mode 100644
index 0000000000000..40f5f0253751f
--- /dev/null
+++ b/test/fixtures/e2e/amp-story-player/basic.amp.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html ⚡>
+  <head>
+    <title>Story Player (AMP version)</title>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <link rel="canonical" href="player-amp.html">
+    <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+    <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>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <meta charset="utf-8">
+    <style amp-custom>
+      body {
+        font-family: sans-serif;
+      }
+
+      .story-player-iframe {
+        background-size: cover;
+        display: block;
+        position: relative;
+        height: 100%;
+        width: 100%;
+        flex: 0 0 100%;
+      }
+
+      .title {
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        color: #fff;
+        font-size: 40px;
+        padding: 88px 32px 32px 32px;
+        line-height: 1.25;
+        text-shadow: 3px 3px #000;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>This is an AMP page that embeds a story below:</h1>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
+    <amp-story-player layout="responsive" width="360" height="600">
+        <a href="http://localhost:8000/examples/amp-story/ampconf.html"
+            class="story">
+          <span class="title">A local’s guide to what to eat and do in New York City</span>
+        </a>
+    </amp-story-player>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
+  </body>
+</html>
diff --git a/test/fixtures/e2e/amp-story-player/basic.html b/test/fixtures/e2e/amp-story-player/basic.html
new file mode 100644
index 0000000000000..5a2320a6f5443
--- /dev/null
+++ b/test/fixtures/e2e/amp-story-player/basic.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Story Player (Non-AMP)</title>
+    <link href="../../../../build/css/amp-story-player-v0.css" rel='stylesheet' type='text/css'>
+    <script async src="../../../../dist/amp-story-player-v0.js"></script>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+
+      .story-player-iframe {
+        background-size: cover;
+        display: block;
+        position: relative;
+        height: 100%;
+        width: 100%;
+        flex: 0 0 100%;
+      }
+
+      .title {
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        color: #fff;
+        font-size: 40px;
+        padding: 88px 32px 32px 32px;
+        line-height: 1.25;
+        text-shadow: 3px 3px #000;
+      }
+    </style>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  </head>
+  <body>
+    <h1>This is a NON-AMP page that embeds a story below:</h1>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
+    <amp-story-player style="width: 360px; height: 600px;">
+        <a href="http://localhost:8000/examples/amp-story/ampconf.html"
+            class="story">
+          <span class="title">A local’s guide to what to eat and do in New York City</span>
+        </a>
+    </amp-story-player>
+    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
+  </body>
+</html>
diff --git a/test/fixtures/e2e/amp-story-player/navigation.amp.html b/test/fixtures/e2e/amp-story-player/navigation.amp.html
new file mode 100644
index 0000000000000..89c4bf40ef43f
--- /dev/null
+++ b/test/fixtures/e2e/amp-story-player/navigation.amp.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html ⚡>
+  <head>
+    <title>Story Player (AMP version)</title>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <link rel="canonical" href="player-amp.html">
+    <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+    <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>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <meta charset="utf-8">
+    <style amp-custom>
+      body {
+        font-family: sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>This is an AMP page that embeds a story below:</h1>
+
+    <amp-story-player layout="responsive" width="360" height="600">
+        <a href="http://localhost:8000/examples/amp-story/video-one-page.html"></a>
+        <a href="http://localhost:8000/examples/amp-story/video-one-page2.html"></a>
+    </amp-story-player>
+  </body>
+</html>
diff --git a/test/fixtures/e2e/amp-story-player/navigation.html b/test/fixtures/e2e/amp-story-player/navigation.html
new file mode 100644
index 0000000000000..e53647521d72f
--- /dev/null
+++ b/test/fixtures/e2e/amp-story-player/navigation.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Story Player (Non-AMP)</title>
+    <link href="../../../../build/css/amp-story-player-v0.css" rel='stylesheet' type='text/css'>
+    <script async src="../../../../dist/amp-story-player-v0.js"></script>
+    <style page>
+      body {
+        font-family: sans-serif;
+      }
+    </style>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  </head>
+  <body>
+    <h1>This is a NON-AMP page that embeds a story below:</h1>
+
+    <amp-story-player style="width: 360px; height: 600px;">
+        <a href="http://localhost:8000/examples/amp-story/video-one-page.html"></a>
+        <a href="http://localhost:8000/examples/amp-story/video-one-page2.html"></a>
+    </amp-story-player>
+  </body>
+</html>
diff --git a/test/fixtures/e2e/amp-story-player/pre-rendering.amp.html b/test/fixtures/e2e/amp-story-player/pre-rendering.amp.html
new file mode 100644
index 0000000000000..de9c28ed50541
--- /dev/null
+++ b/test/fixtures/e2e/amp-story-player/pre-rendering.amp.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html ⚡>
+  <head>
+    <title>Story Player (AMP version)</title>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <link rel="canonical" href="player-amp.html">
+    <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
+    <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>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <meta charset="utf-8">
+    <style amp-custom>
+      body {
+        font-family: sans-serif;
+      }
+
+      .fake-content {
+        position: relative;
+        height: 10000px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>This is an AMP page that embeds a story below:</h1>
+
+  <div class="fake-content"> This div is 3 vh high. </div>
+
+    <amp-story-player layout="responsive" width="360" height="600">
+        <a href="http://localhost:8000/examples/amp-story/ampconf.html"></a>
+        <a href="http://localhost:8000/examples/amp-story/amp-story-animation.html"></a>
+        <a href="http://localhost:8000/examples/amp-story/attachment.html"></a>
+    </amp-story-player>
+  </body>
+</html>
diff --git a/test/fixtures/e2e/amp-story-player/pre-rendering.html b/test/fixtures/e2e/amp-story-player/pre-rendering.html
new file mode 100644
index 0000000000000..5ca4d87aea15c
--- /dev/null
+++ b/test/fixtures/e2e/amp-story-player/pre-rendering.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Story Player (Non-AMP)</title>
+    <link href="../../../../build/css/amp-story-player-v0.css" rel='stylesheet' type='text/css'>
+    <script async src="../../../../dist/amp-story-player-v0.js"></script>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+
+      .fake-content {
+        position: relative;
+        height: 10000px;
+      }
+    </style>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  </head>
+  <body>
+    <h1>This is a NON-AMP page that embeds a story below:</h1>
+
+  <div class="fake-content"> This div is 3 vh high. </div>
+
+    <amp-story-player style="width: 360px; height: 600px;">
+        <a href="http://localhost:8000/examples/amp-story/ampconf.html"></a>
+        <a href="http://localhost:8000/examples/amp-story/amp-story-animation.html"></a>
+        <a href="http://localhost:8000/examples/amp-story/attachment.html"></a>
+    </amp-story-player>
+  </body>
+</html>
diff --git a/test/manual/amp-story/amp-story.amp.html b/test/fixtures/e2e/amp-story/amp-story.amp.html
similarity index 95%
rename from test/manual/amp-story/amp-story.amp.html
rename to test/fixtures/e2e/amp-story/amp-story.amp.html
index f2523d8eb78be..5dd11dcaf99de 100644
--- a/test/manual/amp-story/amp-story.amp.html
+++ b/test/fixtures/e2e/amp-story/amp-story.amp.html
@@ -53,10 +53,6 @@ <h1>Second Page</h1>
       </amp-story-grid-layer>
     </amp-story-page>
 
-    <amp-story-bookend layout=nodisplay>
-      <script type="application/json"></script>
-    </amp-story-bookend>
-
   </amp-story>
 </body>
 
diff --git a/test/fixtures/e2e/amp-subscriptions-google/swg.amp.html b/test/fixtures/e2e/amp-subscriptions-google/swg.amp.html
index 8a5228edb3f68..15057cb5a1d73 100644
--- a/test/fixtures/e2e/amp-subscriptions-google/swg.amp.html
+++ b/test/fixtures/e2e/amp-subscriptions-google/swg.amp.html
@@ -36,7 +36,7 @@
       "isPartOf": {
         "@type": ["CreativeWork", "Product"],
         "name" : "Scenic News",
-        "productID": "scenic-2017.appspot.com:news"
+        "productID": "scenic.2017.e2e:e2e"
       }
     }
     </script>
diff --git a/test/fixtures/e2e/amp-video/analytics-triggers.html b/test/fixtures/e2e/amp-video/analytics-triggers.html
new file mode 100644
index 0000000000000..24b01d148737a
--- /dev/null
+++ b/test/fixtures/e2e/amp-video/analytics-triggers.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html ⚡>
+  <head>
+    <title>amp-video</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,minimum-scale=1" />
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+  </head>
+  <body>
+    <amp-analytics>
+      <script type="application/json">
+        {
+          "requests": {
+            "event": "http://localhost:8000/amp4test/request-bank/e2e/deposit/tracking&id=${id}"
+          },
+          "transport": {
+            "image": true,
+            "beacon": false,
+            "xhrpost": false
+          },
+          "triggers": {
+            "trackVideoQuartileCompleted2": {
+              "on": "video-percentage-played",
+              "request": "event",
+              "selector": "#myVideo2",
+              "videoSpec": {
+                "percentages": [5]
+              },
+              "vars": {
+                  "id": "myVideo"
+              }
+            },
+            "trackVideoQuartileCompleted": {
+              "on": "video-percentage-played",
+              "request": "event",
+              "selector": "#myVideo",
+              "videoSpec": {
+                "percentages": [5]
+              },
+              "vars": {
+                  "id": "myVideo2"
+              }
+            }
+          }
+        }
+      </script>
+    </amp-analytics>
+    <amp-video id="myVideo" src="/examples/av/ForBiggerJoyrides-short.mp4" width="358" height="204" layout="responsive">
+      <div placeholder>This is a placeholder</div>
+      <div fallback>This is a fallback</div>
+    </amp-video>
+
+    <amp-video id="myVideo2" src="/examples/av/ForBiggerJoyrides-short.mp4" width="358" height="204" layout="responsive">
+      <div placeholder>This is a placeholder</div>
+      <div fallback>This is a fallback</div>
+    </amp-video>
+    <button id="playBtn1" on="tap:myVideo.play">Play First Video</button>
+    <button id="playBtn2" on="tap:myVideo2.play">Play Second Video</button>
+  </body>
+</html>
diff --git a/test/fixtures/e2e/amp-video/videos-cdn.html b/test/fixtures/e2e/amp-video/videos-cdn.html
new file mode 100644
index 0000000000000..c8f21d05fb5f9
--- /dev/null
+++ b/test/fixtures/e2e/amp-video/videos-cdn.html
@@ -0,0 +1,151 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="https://amp.dev">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>10 videos with flexible bitrate</title>
+
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async custom-element="amp-cache-url" src="https://cdn.ampproject.org/v0/amp-cache-url-0.1.js"></script>
+
+	<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>
+    input#flexible-bitrate-debug {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+    </style>
+  <script>
+    (self.AMP = self.AMP || []).push(function(AMP) {
+      AMP.toggleExperiment('flexible-bitrate', true);
+    });
+    const IS_VIDEO_FULLY_LOADED_OVERRIDE_FOR_TESTING =
+      'i-amphtml-is-video-fully-loaded-override-for-testing';
+
+    window.onload = () => {
+      const debugField = document.querySelector('input#flexible-bitrate-debug');
+      debugField.addEventListener('keyup', (e) => {
+        const number = debugField.value.slice(0, -1);
+        const videoEl = document.querySelector(`amp-video#video${number} video`);
+        if (!videoEl) {
+          return;
+        }
+        if (e.key === 'd') {
+          videoEl.dispatchEvent(new Event('downgrade'));
+        } else if (e.key === 'l') {
+          videoEl.setAttribute(IS_VIDEO_FULLY_LOADED_OVERRIDE_FOR_TESTING, 'true');
+        } else if (e.key === 'u') {
+          videoEl.setAttribute(IS_VIDEO_FULLY_LOADED_OVERRIDE_FOR_TESTING, 'false');
+        } else {
+          return;
+        }
+        // If key was command, clean field.
+        debugField.value = '';
+      });
+      document.body.appendChild(debugField);
+    }
+    Object.defineProperty(window.navigator.connection, 'effectiveType', {
+      get: () => '4g'
+    });
+</script>
+</head>
+  <body>
+    <input id="flexible-bitrate-debug">
+    <amp-story standalone id="cats" supports-landscape
+        title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
+        poster-portrait-src="logo.png"
+        publisher-logo-src="logo.png">
+
+      <amp-story-page id="page-1">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+						id="video1"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#1"
+            layout="fill">
+            <source src="/examples/av/ForBiggerJoyrides-short.mp4#med1" type="video/mp4" data-bitrate="720">
+            <source src="/examples/av/ForBiggerJoyrides-short.mp4#low1" type="video/mp4" data-bitrate="400">
+            <source src="/examples/av/ForBiggerJoyrides-short.mp4#high1" type="video/mp4" data-bitrate="2000">
+          </amp-video>
+				</amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-2">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video2"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#2"
+            layout="fill">
+            <source src="/examples/av/ForBiggerJoyrides.mp4#med2" type="video/mp4" data-bitrate="720">
+            <source src="/examples/av/ForBiggerJoyrides.mp4#low2" type="video/mp4" data-bitrate="400">
+            <source src="/examples/av/ForBiggerJoyrides.mp4#high2" type="video/mp4" data-bitrate="2000">
+          </amp-video>
+				</amp-story-grid-layer>
+			</amp-story-page>
+
+			<amp-story-page id="page-3">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video3"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#3"
+            layout="fill">
+            <source src="https://amp-dev.cdn.ampproject.org/c/s/amp.dev/static/samples/video/tokyo.mp4"
+                amp-orig-src="https://amp.dev/static/samples/video/tokyo.mp4" type="video/mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+			</amp-story-page>
+
+			<amp-story-page id="page-4">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video4"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#4"
+            layout="fill">
+            <source src="/examples/av/ForBiggerJoyrides.mp4#low4" type="video/mp4" data-bitrate="400">
+            <source src="/examples/av/ForBiggerJoyrides.mp4#med4" type="video/mp4" data-bitrate="720">
+            <source src="/examples/av/ForBiggerJoyrides.mp4#high4" type="video/mp4" data-bitrate="2000">
+          </amp-video>
+				</amp-story-grid-layer>
+			</amp-story-page>
+
+      <amp-story-page id="page-5">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video5"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#5"
+            layout="fill"
+            cache="google">
+            <source src="https://amp.dev/static/samples/video/tokyo.mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+			</amp-story-page>
+
+      <amp-story-page id="page-6">
+        <amp-story-grid-layer template="fill">
+					<amp-video autoplay loop
+					id="video6"
+            width="400"
+            height="750"
+            poster="img-city1.jpeg#6"
+            layout="fill"
+            src="https://amp-dev.cdn.ampproject.org/c/s/amp.dev/static/samples/video/tokyo.mp4"
+            amp-orig-src="https://amp.dev/static/samples/video/tokyo.mp4">
+          </amp-video>
+				</amp-story-grid-layer>
+			</amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/test/fixtures/e2e/amp-viewer-integration/viewer.html b/test/fixtures/e2e/amp-viewer-integration/viewer.html
index c7b476bf472f4..8638472be6f14 100644
--- a/test/fixtures/e2e/amp-viewer-integration/viewer.html
+++ b/test/fixtures/e2e/amp-viewer-integration/viewer.html
@@ -9,85 +9,31 @@
     />
     <script src="/dist/v0/examples/amp-viewer-host.max.js"></script>
     <style>
-      html,
-      body {
-        overflow: hidden;
-      }
-      body,
-      viewer {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        overflow: hidden;
+      body, #viewer {
         margin: 0;
-        padding: 0;
-      }
-
-      viewer {
-        background: #eee;
-      }
-
-      header {
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 50px;
-        background: #4285f4;
-        opacity: 0.7;
-        color: #fff;
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: center;
-        padding: 0 8px;
-      }
-      header h1 {
-        font-size: 22px;
-      }
-
-      container {
-        position: absolute;
-        top: 50px;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-
-      container iframe {
         border: 0;
-        margin: 0;
         padding: 0;
-        width: 100%;
-        height: 100%;
       }
-
-      .wait {
+      body,.fill {
         position: absolute;
-        z-index: 3;
-        top: 100px;
-        left: 20px;
-        font-size: 12px;
+        height: 100%;
+        width: 100%;
       }
     </style>
     <script>
       var viewer = null;
-      function Viewer(containerId, id, url, opt_caps) {
-        this.id = id;
+      function Viewer(url, opt_caps, simulateEmail = false) {
+        this.id = 'viewer';
         this.url = url;
-        this.alreadyLoaded_ = false;
         this.stackIndex_ = 0;
         this.prerenderSize_ = 1;
         this.csi_ = 1;
         this.caps_ =
           opt_caps || 'a2a,focus-rect,foo,keyboard,swipe,iframeScroll';
         this.receivedMessages = [];
+        this.simulateEmail = simulateEmail;
 
-        this.viewer = document.querySelector('viewer');
-        this.container = document.getElementById(containerId);
+        this.container = document.body;
         this.iframe = document.createElement('iframe');
         this.iframe.setAttribute('id', this.id);
         this.iframe.setAttribute(
@@ -96,9 +42,13 @@
             ' allow-popups-to-escape-sandbox allow-same-origin'
         );
         this.iframe.setAttribute('scrolling', 'yes');
-        this.iframe.setAttribute('height', '800');
-        this.iframe.setAttribute('width', '1200');
-        this.viewer.classList.add('natural');
+
+        if (simulateEmail) {
+          this.iframe.setAttribute('height', '0');
+          this.iframe.setAttribute('width', '0');
+        } else {
+          this.iframe.classList.add('fill');
+        }
 
         window.addEventListener('resize', this.onResize_.bind(this));
         window.addEventListener('popstate', this.onPopState_.bind(this));
@@ -143,18 +93,9 @@
         );
       };
 
-      Viewer.prototype.loaded_ = function () {
-        if (this.alreadyLoaded_) {
-          return;
-        }
-        log('AMP Loaded');
-        this.iframe.dataset['loaded'] = '';
-        this.alreadyLoaded_ = true;
-      };
-
       Viewer.prototype.documentReady_ = function () {
         log('AMP document ready');
-        this.loaded_();
+        this.iframe.dataset['loaded'] = '';
         return Promise.resolve();
       };
 
@@ -229,7 +170,7 @@
       };
 
       Viewer.prototype.processRequest_ = function (name, data, awaitResponse) {
-        log(this.id + ': Viewer.prototype.processRequest_', name);
+        log('Viewer.prototype.processRequest_', name);
         this.receivedMessages.push({name, data});
         switch (name) {
           case 'documentLoaded':
@@ -238,6 +179,13 @@
             return this.pushHistory_(data.stackIndex);
           case 'popHistory':
             return this.popHistory_(data.stackIndex);
+          case 'documentHeight':
+            if (this.simulateEmail) {
+              const {height} = data;
+              this.iframe.style.height = height + 'px';
+              this.iframe.removeAttribute('width');
+            }
+            return Promise.resolve();
           case 'broadcast':
           case 'bindReady':
           case 'focusin':
@@ -250,7 +198,6 @@
           case 'touchstart':
           case 'touchmove':
           case 'touchend':
-          case 'documentHeight':
           case 'setFlushParams':
           case 'prerenderComplete':
           case 'scroll':
@@ -362,27 +309,16 @@
         const hashParams = parseQueryString(hash);
         const href = hashParams['href'];
         const caps = hashParams['caps'];
+        const isEmail = 'true' === hashParams['isEmail'];
 
         viewer = new Viewer(
-          'viewer-container',
-          'viewer',
           addQueryParam(href, 'amp_js_v', '0.1'),
-          caps
+          caps,
+          isEmail
         );
       }
       window.onload = loadAmpDoc;
     </script>
   </head>
-  <body>
-    <viewer>
-      <header>
-        <h1>Viewer</h1>
-      </header>
-      <container id="viewer-container">
-        <div class="wait">
-          Please wait, the AMP doc will appear here...
-        </div>
-      </container>
-    </viewer>
-  </body>
+  <body></body>
 </html>
diff --git a/test/fixtures/e2e/amp4email/element-size-race.html b/test/fixtures/e2e/amp4email/element-size-race.html
new file mode 100644
index 0000000000000..d756f3949b9e3
--- /dev/null
+++ b/test/fixtures/e2e/amp4email/element-size-race.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html amp4email>
+<head>
+  <meta charset="utf-8">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <style amp4email-boilerplate>body{visibility:hidden}</style>
+  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
+  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
+  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+</head>
+<body>
+  <amp-state id="fruit">
+    <script type="application/json">{"items": ["apple"] }</script>
+  </amp-state>
+  <amp-list layout="fixed-height" src="amp-state:fruit" height="100px">
+    <template type="amp-mustache">
+      <span class="fruit">{{.}}</span>
+    </template>
+  </amp-list>
+</amp-img>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/fixtures/e2e/amp4email/viewport-size-race.html b/test/fixtures/e2e/amp4email/viewport-size-race.html
new file mode 100644
index 0000000000000..b988d5e20feff
--- /dev/null
+++ b/test/fixtures/e2e/amp4email/viewport-size-race.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html amp4email data-css-strict>
+<head>
+  <meta charset="utf-8">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <style amp4email-boilerplate>body{visibility:hidden}</style>
+  <style amp-custom>
+    amp-img {
+      margin: 30px; /* remove this line to stop the issue */
+    }
+  </style>
+</head>
+<body>
+  <amp-img
+    width="40px" height="40px"
+    src="https://fonts.gstatic.com/s/i/googlematerialicons/notifications_off/v6/googblue-48dp/2x/gm_notifications_off_googblue_48dp.png"
+  >
+</amp-img>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/fixtures/e2e/amphtml-ads/amp-ad-exit.amp.html b/test/fixtures/e2e/amphtml-ads/amp-ad-exit.amp.html
index dcae880207fd2..1bd0709340974 100644
--- a/test/fixtures/e2e/amphtml-ads/amp-ad-exit.amp.html
+++ b/test/fixtures/e2e/amphtml-ads/amp-ad-exit.amp.html
@@ -93,8 +93,8 @@ <h1 on="tap:exit-api.exit(variable='current', default='target1')" role="button"
   </div>
 </div>
 <div class="ad">
-  <button id="prev-btn" role="button" tabindex="1" on="tap:exit-selector.selectUp">Previous product</button>
-  <button id="next-btn" role="button" tabindex="1" on="tap:exit-selector.selectDown">Next product</button>
+  <button id="prev-btn" tabindex="1" on="tap:exit-selector.selectUp">Previous product</button>
+  <button id="next-btn" tabindex="1" on="tap:exit-selector.selectDown">Next product</button>
   <amp-selector id="exit-selector"
       on="select:exit-api.setVariable(name='current', target=event.targetOption)">
     <option option="target1" selected>product 1</option>
diff --git a/test/fixtures/e2e/amphtml-ads/carousel-ad.a4a.html b/test/fixtures/e2e/amphtml-ads/carousel-ad.a4a.html
index 81addb7fdbf0b..13a780f656013 100644
--- a/test/fixtures/e2e/amphtml-ads/carousel-ad.a4a.html
+++ b/test/fixtures/e2e/amphtml-ads/carousel-ad.a4a.html
@@ -131,7 +131,7 @@
 
     All elements with the `carousel-item` class-name have essentially the same markup: one container that activates the lightbox, an image, and a button.
 
-    AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/master/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we set the `on` attribute so the lightbox will activate when a carousel item is tapped. Each button will also toggle the visibility of specific items in the lightbox (see `show` and `hide`).
+    AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we set the `on` attribute so the lightbox will activate when a carousel item is tapped. Each button will also toggle the visibility of specific items in the lightbox (see `show` and `hide`).
     -->
     <amp-carousel
         height="132"
diff --git a/test/fixtures/e2e/amphtml-ads/lightbox-ad.a4a.html b/test/fixtures/e2e/amphtml-ads/lightbox-ad.a4a.html
index 7cfe1826b9866..c92f78454d9bc 100644
--- a/test/fixtures/e2e/amphtml-ads/lightbox-ad.a4a.html
+++ b/test/fixtures/e2e/amphtml-ads/lightbox-ad.a4a.html
@@ -196,7 +196,7 @@
 <div class="root-container" layout="container">
   <!-- ## Cards -->
   <!--
-  AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/master/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we set the `on` attribute so the lightbox will activate when a card button is tapped.
+  AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we set the `on` attribute so the lightbox will activate when a card button is tapped.
 
   Each button opens the lightbox related to the card that triggers it.
   -->
diff --git a/test/fixtures/e2e/amphtml-ads/slides-ad.a4a.html b/test/fixtures/e2e/amphtml-ads/slides-ad.a4a.html
index 70019d5f8a9a4..e0e32010a837f 100644
--- a/test/fixtures/e2e/amphtml-ads/slides-ad.a4a.html
+++ b/test/fixtures/e2e/amphtml-ads/slides-ad.a4a.html
@@ -119,7 +119,7 @@ <h1>The all-new Howdy WX-S Series</h1>
 
     All elements with the `carousel-item` class-name have essentially the same markup.
 
-    AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/master/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we use the actions system in combination with `amp-bind` to keep a state variable of the current selected slide.
+    AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we use the actions system in combination with `amp-bind` to keep a state variable of the current selected slide.
 
     This is only used for transitions that are activated when the selected item slides into view. If the transition is not desired, `amp-bind` is no longer a requisite for this example.
     -->
diff --git a/test/fixtures/errors.html b/test/fixtures/errors.html
index 71eb9351fed1e..08041d7571122 100644
--- a/test/fixtures/errors.html
+++ b/test/fixtures/errors.html
@@ -5,10 +5,10 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <script async custom-element="amp-iframe" src="/dist/v0/amp-iframe-0.1.max.js"></script>
-  <script async custom-element="amp-youtube" src="/dist/v0/amp-youtube-0.1.max.js"></script>
+  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
+  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
   <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>
-  <script async src="/dist/amp.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
 
diff --git a/test/fixtures/images-ie.html b/test/fixtures/images-ie.html
index e12df73583df3..d30502702d12c 100644
--- a/test/fixtures/images-ie.html
+++ b/test/fixtures/images-ie.html
@@ -20,7 +20,10 @@
 </head>
 <body>
   <h1>AMP #0</h1>
-  <p>IE Edge Case</p>  
-  <amp-img id="img4" srcset="/examples/img/hero@1x.jpg 641w, /examples/img/hero@2x.jpg 1282w" width=641 height=480 layout="responsive"></amp-img>  
+  <p>Srcset</p>
+  <amp-img id="srcset" srcset="/examples/img/hero@1x.jpg 641w, /examples/img/hero@2x.jpg 1282w" width=641 height=480 layout="responsive"></amp-img>
+
+  <p>Intrinsic</p>
+  <amp-img id="intrinsic" src="/examples/img/sample.jpg" width=300 height=200 layout="intrinsic"></amp-img>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/test/fixtures/images.html b/test/fixtures/images.html
index 731d8ed17a1b7..9d49483623726 100644
--- a/test/fixtures/images.html
+++ b/test/fixtures/images.html
@@ -16,7 +16,7 @@
     }
   </style>
   <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>
-  <script async src="/dist/amp.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
 <h1>AMP #0</h1>
@@ -40,7 +40,7 @@ <h1>AMP #0</h1>
   <p>
     Lorem ipsum dolor sit amet
   </p>
-  <amp-ad width=300 height=250
+  <amp-ad id="ad1" width=300 height=250
       type="a9"
       data-aax_size="300x250"
       data-aax_pubname="test123"
@@ -84,28 +84,28 @@ <h1>AMP #0</h1>
     <amp-img id="img7" src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
   </p>
   <p>
-    <amp-img src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
+    <amp-img id="img8_2" src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
   </p>
   <p>
-    <amp-img src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
+    <amp-img id="img9" src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
   </p>
   <p>
-    <amp-img src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
+    <amp-img id="img10" src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
   </p>
   <p>
     Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
   </p>
   <p>
-    <amp-img src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
+    <amp-img id="img11" src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
   </p>
   <p>
-    <amp-img src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
+    <amp-img id="img12" src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
   </p>
   <p>
-    <amp-img src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
+    <amp-img id="img13" src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
   </p>
   <p>
-    <amp-img src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
+    <amp-img id="img14" src="/examples/img/sample.jpg" width=527 height=193 layout="responsive" ></amp-img>
   </p>
   <p>
     Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
@@ -116,7 +116,7 @@ <h1>AMP #0</h1>
       <img src="/examples/img/sample.jpg" width=527 height=193/>
     </amp-img>
   </p>
-  <amp-ad width=300 height=250
+  <amp-ad id="ad2" width=300 height=250
       type="a9"
       data-aax_size="300x250"
       data-aax_pubname="test123"
diff --git a/test/fixtures/overflow.html b/test/fixtures/overflow.html
index 079c93359e8cb..3789727356632 100644
--- a/test/fixtures/overflow.html
+++ b/test/fixtures/overflow.html
@@ -5,8 +5,8 @@
   <title>amp-iframe</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <script async src="/dist/amp.js"></script>
-  <script async custom-element="amp-iframe" src="intentionally_wrong"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-iframe" src="intentionally_wrong-0.1.js"></script>
   <style amp-custom>
     div[overflow] {
       height: 33px;
diff --git a/test/fixtures/placeholder.html b/test/fixtures/placeholder.html
new file mode 100644
index 0000000000000..9f264f6a259a6
--- /dev/null
+++ b/test/fixtures/placeholder.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-video-iframe</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-video-iframe" src="intentionally_wrong"></script>
+  <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>
+</head>
+<body>
+  <amp-video-iframe width=100 height=100 layout=responsive src="https://amp.dev/static/samples/files/amp-video-iframe-videojs.html">
+      <div placeholder>Placeholder text</div>
+  </amp-video-iframe>
+</body>
+</html>
diff --git a/test/fixtures/released.html b/test/fixtures/released.html
index dd932e7d15c8e..498509a684c4e 100644
--- a/test/fixtures/released.html
+++ b/test/fixtures/released.html
@@ -5,22 +5,22 @@
   <title>Released AMP components</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <script async custom-element="amp-ad" src="/dist/v0/amp-ad-0.1.max.js"></script>
-  <script async custom-element="amp-video" src="/dist/v0/amp-video-0.1.max.js"></script>
-  <script async custom-element="amp-audio" src="/dist/v0/amp-audio-0.1.max.js"></script>
-  <script async custom-element="amp-anim" src="/dist/v0/amp-anim-0.1.max.js"></script>
-  <script async custom-element="amp-iframe" src="/dist/v0/amp-iframe-0.1.max.js"></script>
-  <script async custom-element="amp-instagram" src="/dist/v0/amp-instagram-0.1.max.js"></script>
-  <script async custom-element="amp-twitter" src="/dist/v0/amp-twitter-0.1.max.js"></script>
-  <script async custom-element="amp-youtube" src="/dist/v0/amp-youtube-0.1.max.js"></script>
+  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
+  <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
+  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
+  <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
+  <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
+  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
   <style amp-custom>
     body {
       max-width: 527px;
-      font-family: 'Questrial', Arial;
+      font-family: Arial;
     }
   </style>
   <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>
-  <script async src="/dist/amp.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
   <h1>Released AMP components</h1>
diff --git a/test/fixtures/script-load-extension-footer-v0-footer.html b/test/fixtures/script-load-extension-footer-v0-footer.html
index ccf6c70e7c0f9..fc8008d916145 100644
--- a/test/fixtures/script-load-extension-footer-v0-footer.html
+++ b/test/fixtures/script-load-extension-footer-v0-footer.html
@@ -15,7 +15,7 @@
 </amp-fit-text>
 </body>
 <footer>
-  <script custom-element="amp-fit-text" src="/dist/v0/amp-fit-text-0.1.max.js"></script>
-  <script src="/dist/amp.js"></script>
+  <script custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
+  <script src="https://cdn.ampproject.org/v0.js"></script>
 </footer>
 </html>
diff --git a/test/fixtures/script-load-extension-head-v0-head.html b/test/fixtures/script-load-extension-head-v0-head.html
index bbcbd179c1cdf..a078ca31223a6 100644
--- a/test/fixtures/script-load-extension-head-v0-head.html
+++ b/test/fixtures/script-load-extension-head-v0-head.html
@@ -7,8 +7,8 @@
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
-  <script custom-element="amp-fit-text" src="/dist/v0/amp-fit-text-0.1.max.js"></script>
-  <script src="/dist/amp.js"></script>
+  <script custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
+  <script src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
 <amp-fit-text id="fortesting" width="300" height="200" layout="responsive" max-font-size="52">
diff --git a/test/fixtures/script-load-extensions.html b/test/fixtures/script-load-extensions.html
index b2ecdb8c6fbb0..501389d1bd711 100644
--- a/test/fixtures/script-load-extensions.html
+++ b/test/fixtures/script-load-extensions.html
@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
   <script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
-  <script src="/dist/amp.js"></script>
+  <script src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
 <amp-fit-text id="fortesting" width="300" height="200" layout="responsive" max-font-size="52">
@@ -23,6 +23,6 @@
 </amp-iframe>
 </body>
 <footer>
-  <script custom-element="amp-fit-text" src="/dist/v0/amp-fit-text-0.1.max.js"></script>
+  <script custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
 </footer>
 </html>
diff --git a/test/fixtures/script-load-v0-footer-extension-footer.html b/test/fixtures/script-load-v0-footer-extension-footer.html
index 118c22df9acd7..c89a1d3f6a7d6 100644
--- a/test/fixtures/script-load-v0-footer-extension-footer.html
+++ b/test/fixtures/script-load-v0-footer-extension-footer.html
@@ -15,7 +15,7 @@
 </amp-fit-text>
 </body>
 <footer>
-  <script src="/dist/amp.js"></script>
-  <script custom-element="amp-fit-text" src="/dist/v0/amp-fit-text-0.1.max.js"></script>
+  <script src="https://cdn.ampproject.org/v0.js"></script>
+  <script custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
 </footer>
 </html>
diff --git a/test/fixtures/script-load-v0-head-extension-footer.html b/test/fixtures/script-load-v0-head-extension-footer.html
index 02b8437714641..69b6e39c33b21 100644
--- a/test/fixtures/script-load-v0-head-extension-footer.html
+++ b/test/fixtures/script-load-v0-head-extension-footer.html
@@ -7,7 +7,7 @@
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
-  <script src="/dist/amp.js"></script>
+  <script src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
 <amp-fit-text id="fortesting" width="300" height="200" layout="responsive" max-font-size="52">
@@ -16,6 +16,6 @@
 </amp-fit-text>
 </body>
 <footer>
-  <script custom-element="amp-fit-text" src="/dist/v0/amp-fit-text-0.1.max.js"></script>
+  <script custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
 </footer>
 </html>
diff --git a/test/fixtures/script-load-v0-head-extension-head.html b/test/fixtures/script-load-v0-head-extension-head.html
index a1fcccdb9c27f..32bf4ef43a5d3 100644
--- a/test/fixtures/script-load-v0-head-extension-head.html
+++ b/test/fixtures/script-load-v0-head-extension-head.html
@@ -7,8 +7,8 @@
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
-  <script src="/dist/amp.js"></script>
-  <script custom-element="amp-fit-text" src="/dist/v0/amp-fit-text-0.1.max.js"></script>
+  <script src="https://cdn.ampproject.org/v0.js"></script>
+  <script custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
 </head>
 <body>
 <amp-fit-text id="fortesting" width="300" height="200" layout="responsive" max-font-size="52">
diff --git a/validator/java/TODO b/test/fixtures/served/blank.html
similarity index 100%
rename from validator/java/TODO
rename to test/fixtures/served/blank.html
diff --git a/test/fixtures/served/cmp-iframe.html b/test/fixtures/served/cmp-iframe.html
new file mode 100644
index 0000000000000..9d53aeb0948ea
--- /dev/null
+++ b/test/fixtures/served/cmp-iframe.html
@@ -0,0 +1,293 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="https://raw.githack.com/ganapativs/bttn.css/master/dist/bttn.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+    <style>
+html {
+  width: 100%;
+  background-color: #fff;
+  padding: 0px !important;
+
+  height: 1500px;
+}
+
+body {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 800px;
+  background-color: #fff;
+  line-height: initial;
+  margin: 0;
+  padding: 10px;
+}
+
+.bttn-primary {
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.decision-text {
+  font-size: 0.85em;
+  word-wrap: break-word;
+}
+
+h1 {
+  font-size: 1.15em;
+}
+
+h2 {
+  font-size: 1em;
+}
+
+
+#decision-buttons {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+#always-show {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.close {
+  transition: all 0.5s;
+  color: red;
+  font-size: 1em;
+  background-color: transparent;
+  border: 1px solid #000;
+  padding-left: 5px;
+  padding-right: 5px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.close:hover {
+  color: red;
+  font-size: 1.25em;
+  background-color: transparent;
+  border: 1px solid #000;
+}
+    </style>
+  </head>
+
+  <body>
+
+    <div id="consent-wrapper">
+      <div id="decision-state">
+
+        <h1 class="animated fadeIn">Cookies, and Privacy</h1>
+        <h2 class="animated fadeIn">I am scrollable</h2>
+        <div class="decision-text animated fadeIn">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
+        </div>
+        <h1 class="animated fadeIn">Additional consent information</h1>
+        <div id='clientState' class="decision-text animated fadeIn"></div>
+
+      </div>
+      <div id="learn-more-state">
+
+        <h1 class="animated fadeIn">More Information</h1>
+        <h2 class="animated fadeIn">I am scrollable</h2>
+        <div class="animated fadeIn">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+
+        <div class="animated fadeIn">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+
+      </div>
+      <div id="decision-buttons" class="animated fadeInUp">
+        <button id='a' class="bttn-primary bttn-jelly bttn-xs">Accept All</button>
+        <button id='r' class="bttn-primary bttn-jelly bttn-xs">Reject All</button>
+        <button id='f' class="bttn-primary bttn-jelly bttn-xs">Learn More</button>
+      </div>
+      <div id="always-show">
+        <button id='d' class="close">X</button>
+      </div>
+    </div>
+    <div id="confirmation-wrapper">
+      <h1>Thank you!</h1>
+    </div>
+
+<script type="text/javascript">
+
+    // Default values for non-3P iframe.
+    var sentinel = 'amp';
+    var ampWindow = parent;
+
+    // Write passed in stored state and client config
+    var clientInfo;
+    var consentStr;
+    var consentState;
+    if (window && window.name) {
+        try {
+            clientInfo = JSON.parse(window.name);
+            consentStr = clientInfo['consentString'];
+            consentState = clientInfo['consentState'];
+        } catch(e) {
+            console.log('Caught error when parsing window.name,', e)
+        }
+    }
+
+
+    // Add event listener for focus for a11y
+    window.addEventListener('focus', () => {
+        const headerElement = document.querySelector('h1');
+        console.log('I am focused after you clicked on me!', headerElement);
+        if (headerElement) {
+            headerElement.focus();
+        }
+    });
+
+    var text = `Previously stored consent string is` +
+    ` '${consentStr}', consent state is '${consentState}'`;
+
+    document.getElementById('clientState').textContent = text;
+
+    // Detect 3P sentinel in the location.hash.
+    var hashMatch = location.hash.match(/amp-3p-sentinel=((\d+)-\d+)/);
+    if (hashMatch) {
+        sentinel = hashMatch[1];
+        // Depth is measured from window.top.
+        var depth = Number(hashMatch[2]);
+        var ancestors = [];
+        for (var win = window; win && win != win.parent; win = win.parent) {
+            // Add window keeping the top-most one at the front.
+            ancestors.unshift(win.parent);
+        }
+        ampWindow = ancestors[depth];
+    }
+
+    // Send our ready event
+    setTimeout(() => {
+
+        // Our ready object
+        const readyObject = {
+            type: 'consent-ui',
+            action: 'ready',
+            initialHeight: '60vh',
+            border: true,
+        };
+        console.log('cmp-iframe: Sending Ready Message!', readyObject);
+        parent.postMessage(readyObject, '*');
+    }, 500);
+
+    // Send fullscreen every .5 seconds (for ./../fullscreen-cmp.html e2e test)
+    setInterval(() => {
+
+        // Our ready object
+        const readyObject = {
+            type: 'consent-ui',
+            action: 'enter-fullscreen'
+        };
+
+        parent.postMessage(readyObject, '*');
+    }, 500);
+
+    function registerClickConsentMessage(querySelector, type, action, info, consentMetadata, timeout) {
+        document.querySelector(querySelector).onclick = function () {
+            // parent.postMessage("message to be sent", "http://the-website-that-will-receive-the-msg.com")
+            setTimeout(() => {
+            parent.postMessage({
+                type,
+                action,
+                info,
+                consentMetadata,
+            }, '*');
+            }, timeout);
+        };
+    }
+
+    function showDecisionState() {
+        document.querySelector('#decision-state').style = 'display: block';
+        document.querySelector('#learn-more-state').style = 'display: none';
+        document.querySelector('#f').style = 'display: inline-block';
+    }
+
+    function showLearnMoreState() {
+        document.querySelector('#decision-state').style = 'display: none';
+        document.querySelector('#learn-more-state').style = 'display: block';
+        document.querySelector('#f').style = 'display: none';
+    }
+
+    function showConsent() {
+        document.querySelector('#consent-wrapper').style = 'display: block';
+        document.querySelector('#confirmation-wrapper').style = 'display: none';
+    }
+
+
+    function showConfirmation() {
+        document.querySelector('#consent-wrapper').style = 'display: none';
+        document.querySelector('#confirmation-wrapper').style = 'display: block';
+    }
+
+    const consentObjects = [
+        {
+            querySelector: '#a',
+            type: 'consent-response',
+            action: 'accept',
+            info: 'accept-str',
+            consentMetadata: {'consentStringType': 2, 'additionalConsent': '1~1.35.41.101', 'gdprApplies': true},
+            timeout: 1000,
+            onclick: () => {
+            showConfirmation();
+            }
+        },
+        {
+            querySelector: '#r',
+            type: 'consent-response',
+            action: 'reject',
+            timeout: 1000,
+            onclick: () => {
+            showConfirmation();
+            }
+        },
+        {
+            querySelector: '#d',
+            type: 'consent-response',
+            action: 'dismiss',
+            timeout: 1000,
+            onclick: () => {
+            showConfirmation();
+            }
+        },
+        {
+            querySelector: '#f',
+            type: 'consent-ui',
+            action: 'enter-fullscreen',
+            timeout: 0,
+            onclick: () => {
+            showLearnMoreState();
+            }
+        }
+    ]
+    consentObjects.forEach(consentObject => {
+        registerClickConsentMessage(
+            consentObject.querySelector,
+            consentObject.type,
+            consentObject.action,
+            consentObject.info,
+            consentObject.consentMetadata,
+            consentObject.timeout || 0
+        );
+
+        if (consentObject.onclick) {
+            document
+            .querySelector(consentObject.querySelector)
+            .addEventListener('click', () => {
+                consentObject.onclick();
+            });
+        }
+    });
+
+    showConsent();
+    showDecisionState();
+</script>
+</body>
+</html>
diff --git a/test/fixtures/served/iframe-safeframe.html b/test/fixtures/served/iframe-safeframe.html
index 5f987b2c41fa9..a07231c692b71 100644
--- a/test/fixtures/served/iframe-safeframe.html
+++ b/test/fixtures/served/iframe-safeframe.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <!-- saved from url=(0069)http://tpc.googlesyndication.com/safeframe/1-0-32/html/container.html -->
 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    
+
     <title>SafeFrame Container</title>
     <script>
 (function(){var aa="function"==typeof Object.create?Object.create:function(a){var b=function(){};b.prototype=a;return new b},l;if("function"==typeof Object.setPrototypeOf)l=Object.setPrototypeOf;else{var n;a:{var ba={h:!0},q={};try{q.__proto__=ba;n=q.h;break a}catch(a){}n=!1}l=n?function(a,b){a.__proto__=b;if(a.__proto__!==b)throw new TypeError(a+" is not extensible");return a}:null}var r=l,t=this;var v=String.prototype.trim?function(a){return a.trim()}:function(a){return/^[\s\xa0]*([\s\S]*?)[\s\xa0]*$/.exec(a)[1]},w=function(a,b){return a<b?-1:a>b?1:0};var x;a:{var y=t.navigator;if(y){var z=y.userAgent;if(z){x=z;break a}}x=""};var B=function(a){B[" "](a);return a};B[" "]=function(){};var da=function(a,b){var c=ca;return Object.prototype.hasOwnProperty.call(c,a)?c[a]:c[a]=b(a)};var ea=-1!=x.indexOf("Opera"),C=-1!=x.indexOf("Trident")||-1!=x.indexOf("MSIE"),D=-1!=x.indexOf("Edge"),E=-1!=x.indexOf("Gecko")&&!(-1!=x.toLowerCase().indexOf("webkit")&&-1==x.indexOf("Edge"))&&!(-1!=x.indexOf("Trident")||-1!=x.indexOf("MSIE"))&&-1==x.indexOf("Edge"),F=-1!=x.toLowerCase().indexOf("webkit")&&-1==x.indexOf("Edge"),G;a:{var H="",I=function(){var a=x;if(E)return/rv:([^\);]+)(\)|;)/.exec(a);if(D)return/Edge\/([\d\.]+)/.exec(a);if(C)return/\b(?:MSIE|rv)[: ]([^\);]+)(\)|;)/.exec(a);if(F)return/WebKit\/(\S+)/.exec(a);if(ea)return/(?:Version)[ \/]?(\S+)/.exec(a)}();I&&(H=I?I[1]:"");if(C){var K,M=t.document;K=M?M.documentMode:void 0;if(null!=K&&K>parseFloat(H)){G=String(K);break a}}G=H}var fa=G,ca={},N=function(a){return da(a,function(){for(var b=0,c=v(String(fa)).split("."),e=v(String(a)).split("."),d=Math.max(c.length,e.length),f=0;0==b&&f<d;f++){var h=c[f]||"",g=e[f]||"";do{h=/(\d*)(\D*)(.*)/.exec(h)||["","","",""];g=/(\d*)(\D*)(.*)/.exec(g)||["","","",""];if(0==h[0].length&&0==g[0].length)break;b=w(0==h[1].length?0:parseInt(h[1],10),0==g[1].length?0:parseInt(g[1],10))||w(0==h[2].length,0==g[2].length)||w(h[2],g[2]);h=h[3];g=g[3]}while(0==b)}return 0<=b})};var O=null,P=null,ia=function(a){var b=a.length,c=0;"="===a[b-2]?c=2:"="===a[b-1]&&(c=1);var e=new Uint8Array(Math.ceil(3*b/4)-c),d=0;ha(a,function(a){e[d++]=a});return e.subarray(0,d)},ha=function(a,b){function c(b){for(;e<a.length;){var c=a.charAt(e++),f=P[c];if(null!=f)return f;if(!/^[\s\xa0]*$/.test(c))throw Error("Unknown base64 encoding at char: "+c);}return b}ja();for(var e=0;;){var d=c(-1),f=c(0),h=c(64),g=c(64);if(64===g&&-1===d)break;b(d<<2|f>>4);64!=h&&(b(f<<4&240|h>>2),64!=g&&b(h<<6&192|g))}},ja=function(){if(!O){O={};P={};for(var a=0;65>a;a++)O[a]="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".charAt(a),P[O[a]]=a,62<=a&&(P["ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_.".charAt(a)]=a)}};var Q=function(a,b){if(a)for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&b.call(void 0,a[c],c,a)};var R=function(a,b,c){c=void 0===c?{}:c;this.error=a;this.context=b.context;this.line=b.line||-1;this.msg=b.message||"";this.file=b.file||"";this.id=b.id||"jserror";this.meta=c};var ka=/^https?:\/\/(\w|-)+\.cdn\.ampproject\.(net|org)(\?|\/|$)/,la=function(a,b){this.a=a;this.b=b},S=function(a,b){this.url=a;this.g=!!b;this.depth=null};var ma=function(a){t.google_image_requests||(t.google_image_requests=[]);var b=t.document.createElement("img");b.src=a;t.google_image_requests.push(b)};var T=function(){this.c="&";this.f=!1;this.b={};this.j=0;this.a=[]},U=function(a,b){var c={};c[a]=b;return[c]},W=function(a,b,c,e,d){var f=[];Q(a,function(a,g){(a=V(a,b,c,e,d))&&f.push(g+"="+a)});return f.join(b)},V=function(a,b,c,e,d){if(null==a)return"";b=b||"&";c=c||",$";"string"==typeof c&&(c=c.split(""));if(a instanceof Array){if(e=e||0,e<c.length){for(var f=[],h=0;h<a.length;h++)f.push(V(a[h],b,c,e+1,d));return f.join(c[e])}}else if("object"==typeof a)return d=d||0,2>d?encodeURIComponent(W(a,b,c,e,d+1)):"...";return encodeURIComponent(String(a))},X=function(a,b,c,e){a.a.push(b);a.b[b]=U(c,e)},oa=function(a){var b="https://pagead2.googlesyndication.com/pagead/gen_204?id=jserror&",c=na(a)-27;if(0>c)return"";a.a.sort(function(a,b){return a-b});for(var e=null,d="",f=0;f<a.a.length;f++)for(var h=a.a[f],g=a.b[h],m=0;m<g.length;m++){if(!c){e=null==e?h:e;break}var k=W(g[m],a.c,",$");if(k){k=d+k;if(c>=k.length){c-=k.length;b+=k;d=a.c;break}else a.f&&(d=c,k[d-1]==a.c&&--d,b+=k.substr(0,d),d=a.c,c=0);e=null==e?h:e}}a="";null!=e&&(a=d+"trn="+e);return b+a+""},na=function(a){var b=1,c;for(c in a.b)b=c.length>b?c.length:b;return 3997-b-a.c.length-1};var pa=function(a){if(.01>Math.random())try{if(a instanceof T)var b=a;else b=new T,Q(a,function(a,c){var f=b,e=f.j++;a=U(c,a);f.a.push(e);f.b[e]=a});var c=oa(b);c&&ma(c)}catch(e){}};var sa=function(a){try{var b=new T;b.f=!0;X(b,1,"context",507);if(!(a.error&&a.meta&&a.id)){var c=a;a=new qa(ra(c),c.fileName,c.lineNumber)}a.msg&&X(b,2,"msg",a.msg.substring(0,512));a.file&&X(b,3,"file",a.file);0<a.line&&X(b,4,"line",a.line);var e=[a.meta||{}];b.a.push(5);b.b[5]=e;c=t;a=[];e=null;do{var d=c;try{var f;if(f=!!d&&null!=d.location.href)b:{try{B(d.foo);f=!0;break b}catch(A){}f=!1}var h=f}catch(A){h=!1}if(h){var g=d.location.href;e=d.document&&d.document.referrer||null}else g=e,e=null;a.push(new S(g||""));try{c=d.parent}catch(A){c=null}}while(c&&d!=c);g=0;for(var m=a.length-1;g<=m;++g)a[g].depth=m-g;d=t;if(d.location&&d.location.ancestorOrigins&&d.location.ancestorOrigins.length==a.length-1)for(m=1;m<a.length;++m){var k=a[m];k.url||(k.url=d.location.ancestorOrigins[m-1]||"",k.g=!0)}var J=new S(t.location.href,!1);d=null;var L=a.length-1;for(k=L;0<=k;--k){var p=a[k];!d&&ka.test(p.url)&&(d=p);if(p.url&&!p.g){J=p;break}}p=null;var va=a.length&&a[L].url;0!=J.depth&&va&&(p=a[L]);var u=new la(J,p);u.b&&X(b,6,"top",u.b.url||"");X(b,7,"url",u.a.url||"");pa(b)}catch(A){try{pa({context:"ecmserr",rctx:507,msg:ra(A),url:u&&u.a.url})}catch(za){}}},ra=function(a){var b=a.toString();a.name&&-1==b.indexOf(a.name)&&(b+=": "+a.name);a.message&&-1==b.indexOf(a.message)&&(b+=": "+a.message);if(a.stack){a=a.stack;var c=b;try{-1==a.indexOf(c)&&(a=c+"\n"+a);for(var e;a!=e;)e=a,a=a.replace(/((https?:\/..*\/)[^\/:]*:\d+(?:.|\n)*)\2/,"$1");b=a.replace(/\n */g,"\n")}catch(d){b=c}}return b},qa=function(a,b,c){R.call(this,Error(a),{message:a,file:void 0===b?"":b,line:void 0===c?-1:c})},Y=qa;Y.prototype=aa(R.prototype);Y.prototype.constructor=Y;if(r)r(Y,R);else for(var Z in R)if("prototype"!=Z)if(Object.defineProperties){var ta=Object.getOwnPropertyDescriptor(R,Z);ta&&Object.defineProperty(Y,Z,ta)}else Y[Z]=R[Z];Y.m=R.prototype;var ua=E||F||C&&N(11)||D;var wa=/^([^;]+);(\d+);([\s\S]*)$/,xa=function(){var a=wa.exec(window.name);if(null===a)throw Error("Cannot parse serialized data");var b=+a[2],c=a[3];if(b>c.length)throw Error("Cannot parse serialized data");return{l:a[1],content:c.substr(0,b),i:c.substr(b)}};var ya=function(){var a=window.location.hash;return a?(a=a.match(/[&#]eid=([\d,]+)/))?a[1].split(","):[]:[]};(function(a){try{var b=xa(),c=ya(),e=JSON.parse(b.i),d=e.encryptionMode;a(b.content,void 0===d?null:d,function(a){ua&&(window.name="");e.goog_safeframe_hlt&&(t.goog_safeframe_hlt=e.goog_safeframe_hlt);e._context&&(t.AMP_CONTEXT_DATA=e._context);t.sf_={v:b.l,exp:c,cfg:e};var d=window;if(ua)d=d.document,d.open("text/html","replace"),d.write(a),d.close();else{var g;if(g=C&&N(7)&&!N(10))g=navigator.userAgent.match(/Trident\/([0-9]+.[0-9]+)/),g=6>(g?parseFloat(g[1]):0);if(g)a:{for(g=0;g<a.length;++g)if(127<a.charCodeAt(g)){g=!0;break a}g=!1}if(g){a=unescape(encodeURIComponent(a));g=Math.floor(a.length/2);for(var f=[],k=0;k<g;++k)f[k]=String.fromCharCode(256*a.charCodeAt(2*k+1)+a.charCodeAt(2*k));1==a.length%2&&(f[g]=a.charAt(a.length-1));a=f.join("")}d.goog_content=a;d.location.replace("javascript:window.goog_content")}},function(a){sa(a)})}catch(f){sa(f)}})(function(a,b,c){if(2===b){a=ia(a);b=[];for(var e=0,d=0;e<a.length;){var f=a[e++];if(128>f)b[d++]=String.fromCharCode(f);else if(191<f&&224>f){var h=a[e++];b[d++]=String.fromCharCode((f&31)<<6|h&63)}else if(239<f&&365>f){h=a[e++];var g=a[e++],m=a[e++];f=((f&7)<<18|(h&63)<<12|(g&63)<<6|m&63)-65536;b[d++]=String.fromCharCode(55296+(f>>10));b[d++]=String.fromCharCode(56320+(f&1023))}else h=a[e++],g=a[e++],b[d++]=String.fromCharCode((f&15)<<12|(h&63)<<6|g&63)}a=b.join("");a&&(b=a.toLowerCase(),a=-1<b.indexOf("<!doctype")||-1<b.indexOf("<html")?a:"<html><head></head><body>"+a+"</body></html>")}c(a)});}).call(this);
     </script>
   </head>
   <body>
-  
+
 
 </body></html>
\ No newline at end of file
diff --git a/test/fixtures/served/iframe.html b/test/fixtures/served/iframe.html
index 787035b51f909..b0a44b6700dfd 100644
--- a/test/fixtures/served/iframe.html
+++ b/test/fixtures/served/iframe.html
@@ -51,6 +51,12 @@
             sentinel: sentinel,
             type: 'send-embed-state',
           }, '*');
+    }  else if (event.data.type === 'requestSendConsentState') {
+      sentinel = 'amp';
+      getAmpWindow(sentinel)./*OK*/postMessage( {
+        sentinel,
+        type: 'send-consent-data',
+      }, '*');
     } else if (event.data.type === 'requestPymjsHeight') {
       msg = [ 'pym', 'example', 'height', event.data.height ].join( 'xPYMx' );
       if (event.data.is3p) {
diff --git a/test/fixtures/shadow-dom-element-polyfill.html b/test/fixtures/shadow-dom-element-polyfill.html
new file mode 100644
index 0000000000000..903976388fa69
--- /dev/null
+++ b/test/fixtures/shadow-dom-element-polyfill.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>We can render a shadow dom element</title>
+  <link rel="canonical" href="https://www.example.com/shadow-dom-element.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <script>
+    if (Element.prototype.attachShadow) {
+      delete Element.prototype.attachShadow;
+    }
+  </script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js"></script>
+</head>
+<body>
+  <amp-base-carousel id="carousel-1" width="400" height="300" layout="responsive">
+    <amp-img id="slide1" src="/examples/img/hero@1x.jpg" layout="fill"></amp-img>
+    <amp-img id="slide2" src="/examples/img/sea@1x.jpg" layout="fill"></amp-img>
+  </amp-base-carousel>
+</body>
+</html>
diff --git a/test/fixtures/shadow-dom-element.html b/test/fixtures/shadow-dom-element.html
new file mode 100644
index 0000000000000..80179708b5f07
--- /dev/null
+++ b/test/fixtures/shadow-dom-element.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>We can render a shadow dom element</title>
+  <link rel="canonical" href="https://www.example.com/shadow-dom-element.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js"></script>
+</head>
+<body>
+  <amp-base-carousel id="carousel-1" width="400" height="300" layout="responsive">
+    <amp-img id="slide1" src="/examples/img/hero@1x.jpg" layout="fill"></amp-img>
+    <amp-img id="slide2" src="/examples/img/sea@1x.jpg" layout="fill"></amp-img>
+  </amp-base-carousel>
+</body>
+</html>
diff --git a/test/fixtures/video-players.html b/test/fixtures/video-players.html
index 27f4243dd3e2d..036a4b8654547 100644
--- a/test/fixtures/video-players.html
+++ b/test/fixtures/video-players.html
@@ -7,18 +7,18 @@
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 
   <!-- (1) Include your video player component here -->
-  <script async custom-element="amp-dailymotion" src="/dist/v0/amp-dailymotion-0.1.max.js"></script>
-  <script async custom-element="amp-3q-player" src="/dist/v0/amp-3q-player-0.1.max.js"></script>
-  <script async custom-element="amp-youtube" src="/dist/v0/amp-youtube-0.1.max.js"></script>
-  <script async custom-element="amp-ima-video" src="/dist/v0/amp-ima-video-0.1.max.js"></script>
-  <script async custom-element="amp-video" src="/dist/v0/amp-video-0.1.max.js"></script>
-  <script async custom-element="amp-nexxtv-player" src="/dist/v0/amp-nexxtv-player-0.1.max.js"></script>
-  <script async custom-element="amp-brid-player" src="/dist/v0/amp-brid-player-0.1.max.js"></script>
-  <script async custom-element="amp-delight-player" src="/dist/v0/amp-delight-player-0.1.max.js"></script>
-  <script async custom-element="amp-brightcove" src="/dist/v0/amp-brightcove-0.1.max.js"></script>
-  <script async custom-element="amp-video-iframe" src="/dist/v0/amp-video-iframe-0.1.max.js"></script>
+  <script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script>
+  <script async custom-element="amp-3q-player" src="https://cdn.ampproject.org/v0/amp-3q-player-0.1.js"></script>
+  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
+  <script async custom-element="amp-ima-video" src="https://cdn.ampproject.org/v0/amp-ima-video-0.1.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async custom-element="amp-nexxtv-player" src="https://cdn.ampproject.org/v0/amp-nexxtv-player-0.1.js"></script>
+  <script async custom-element="amp-brid-player" src="https://cdn.ampproject.org/v0/amp-brid-player-0.1.js"></script>
+  <script async custom-element="amp-delight-player" src="https://cdn.ampproject.org/v0/amp-delight-player-0.1.js"></script>
+  <script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>
+  <script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
   <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>
-  <script async src="/dist/amp.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
   <h1>AMP Video Players Tests</h1>
diff --git a/test/fixtures/visibility-state.html b/test/fixtures/visibility-state.html
index ae66ed17770b3..e7a94a418f2ae 100644
--- a/test/fixtures/visibility-state.html
+++ b/test/fixtures/visibility-state.html
@@ -6,7 +6,7 @@
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
-  <script async src="/dist/amp.js"></script>
+  <script async src="https://www.ampproject.org/v0.js"></script>
 </head>
 <body>
     <amp-test width=100 height=100></amp-test>
diff --git a/test/golden-files/main.css b/test/golden-files/main.css
deleted file mode 100644
index c9d6bf7656864..0000000000000
--- a/test/golden-files/main.css
+++ /dev/null
@@ -1,907 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-/**
- * NOTE: This file exists to compare outputs of css file transformation
- * that passes through postcss from version to version.
- *
- * built from sha: 0ca74e671
- */
-
-/**
- * Horizontal scrolling interferes with embedded scenarios and predominantly
- * the result of the non-responsive design.
- *
- * Notice that it's critical that `overflow-x: hidden` is only set on `html`
- * and not `body`. Otherwise, adding `overflow-x: hidden` forces `overflow-y`
- * to be computed to `auto` on both the `body` and `html` elements so they both
- * potentially get a scrolling box. See #3108 for more details.
- */
-
-html {
-  overflow-x: hidden !important;
-}
-
-body,html {
-  height: auto !important;
-}
-
-html.i-amphtml-fie {
-  height: 100% !important;
-  width: 100% !important;
-}
-
-/**
- * Margin:0 is currently needed for iOS viewer embeds.
- * See:
- * https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md
- */
-
-body {
-  margin: 0 !important;
-  /* Text adjust is set to 100% to avoid iOS Safari bugs where the font-size is
-     sometimes not restored during orientation. See #449. */
-  -webkit-text-size-adjust: 100%;
-     -moz-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
-          text-size-adjust: 100%;
-}
-
-/** These properties can be overriden by user stylesheets. */
-
-[hidden] {
-  display: none !important;
-}
-
-/**
- * The enables passive touch handlers, e.g. for document swipe, since they
- * no will longer need to try to cancel vertical scrolls during swipes.
- * This is only done in the embedded mode because (a) the document swipe
- * is only possible in this case, and (b) we'd like to preserve pinch-zoom.
- */
-
-html.i-amphtml-singledoc.i-amphtml-embedded {
-  -ms-touch-action: pan-y;
-      touch-action: pan-y;
-}
-
-/**
- * Override a user-supplied `body{overflow: visible; position:relative}`. This
- * style is set in runtime vs css to avoid conflicts with ios-embedded mode
- * and fixed transfer layer.
- */
-
-html.i-amphtml-fie>body,html.i-amphtml-singledoc>body {
-  overflow: visible !important;
-  position: relative !important;
-}
-
-/**
- * Set `body {overflow-x: hidden}` for iOS WebView. This is b/c iOS WebView
- * does NOT respect `html {overflow-x: hidden}`.
- * Note! For all other natural cases body's style is `body {overflow: visible}`
- * to avoid visibility issues with iframes.
- */
-
-html.i-amphtml-webview>body {
-  overflow-x: hidden !important;
-  overflow-y: visible !important;
-}
-
-/**
- * iOS-Embed mode (iOS <= 8). The `body` itself is scrollable.
- */
-
-html.i-amphtml-ios-embed-legacy>body {
-  overflow-x: hidden !important;
-  overflow-y: auto !important;
-  position: absolute !important;
-}
-
-/**
- * iOS-Embed Wrapper mode. The `body` is wrapped into `#i-amphtml-wrapper`
- * element.
- */
-
-html.i-amphtml-ios-embed {
-  overflow-y: auto !important;
-  position: static;
-}
-
-/** Wrapper for iOS Embed Wrapper mode. */
-
-#i-amphtml-wrapper {
-  overflow-x: hidden !important;
-  overflow-y: auto !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  margin: 0 !important;
-  display: block !important;
-}
-
-/**
- * Overflow scrolling is set separately on iOS, after DOMReady due to various
- * rendering bugs. See #8798 for details.
- */
-
-html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper {
-  -webkit-overflow-scrolling: touch !important;
-}
-
-#i-amphtml-wrapper>body {
-  /* Make sure position:absolute elements are positioned relative to the body,
-     not i-amphtml-wrapper */
-  position: relative !important;
-  /* `body` must have a 1px transparent border for two purposes:
-      (1) to cancel out margin collapse in body's children so that position
-          absolute element is positioned correctly
-      (2) to offset scroll adjustment to 1 to avoid scroll freeze problem. */
-  border-top: 1px solid transparent !important;
-}
-
-.i-amphtml-element {
-  display: inline-block;
-}
-
-.i-amphtml-layout-nodisplay,[layout=nodisplay]:not(.i-amphtml-layout-nodisplay)
-{
-  /* Display is set/reset in JS */
-}
-
-.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed)
-{
-  display: inline-block;
-  position: relative;
-}
-
-.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,.i-amphtml-layout-responsive,[layout=container],[layout=fixed-height][height],[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive)
-{
-  display: block;
-  position: relative;
-}
-
-.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill)
-{
-  display: block;
-  overflow: hidden !important;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item)
-{
-  display: block;
-  position: relative;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
-}
-
-.i-amphtml-layout-size-defined {
-  overflow: hidden !important;
-}
-
-.i-amphtml-layout-awaiting-size {
-  position: absolute !important;
-  top: auto !important;
-  bottom: auto !important;
-}
-
-i-amphtml-sizer {
-  display: block !important;
-}
-
-.i-amphtml-fill-content {
-  display: block;
-  /* These lines are a work around to this issue in iOS:     */
-  /* https://bugs.webkit.org/show_bug.cgi?id=155198          */
-  /* And: https://github.com/ampproject/amphtml/issues/11133 */
-  height: 0;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 100%;
-  min-width: 100%;
-  width: 0;
-  margin: auto;
-}
-
-.i-amphtml-layout-size-defined .i-amphtml-fill-content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.i-amphtml-replaced-content {
-  padding: 0 !important;
-  border: none !important;
-  /* TODO(dvoytenko): explore adding here object-fit. */
-}
-
-/**
- * Makes elements visually invisible but still accessible to screen-readers.
- *
- * This Css has been carefully tested to ensure screen-readers can read and
- * activate (in case of links and buttons) the elements with this class. Please
- * use caution when changing anything, even seemingly safe ones. For example
- * changing width from 1 to 0 would prevent TalkBack from activating (clicking)
- * buttons despite TalkBack reading them just fine. This is because
- * element needs to have a defined size and be on viewport otherwise TalkBack
- * does not allow activation of buttons.
- */
-
-.i-amphtml-screen-reader {
-  position: fixed !important;
-  /* keep it on viewport */
-  top: 0px !important;
-  left: 0px !important;
-  /* give it non-zero size, VoiceOver on Safari requires at least 2 pixels
-     before allowing buttons to be activated. */
-  width: 2px !important;
-  height: 2px !important;
-  /* visually hide it with overflow and opacity */
-  opacity: 0 !important;
-  overflow: hidden !important;
-  /* remove any margin or padding */
-  border: none !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  /* ensure no other style sets display to none */
-  display: block !important;
-  visibility: visible !important;
-}
-
-/* For author styling. */
-
-.i-amphtml-unresolved {
-  position: relative;
-  overflow: hidden !important;
-}
-
-#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled {
-  overflow-x: hidden !important;
-  overflow-y: hidden !important;
-}
-
-/* "notbuild" classes are set as soon as an element is created and removed
-   as soon as the element is built. */
-
-.amp-notbuilt {
-  /* For author styling. */
-}
-
-.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element)
-{
-  position: relative;
-  overflow: hidden !important;
-  color: transparent !important;
-}
-
-.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*
-{
-  display: none;
-}
-
-.i-amphtml-ghost {
-  visibility: hidden !important;
-}
-
-.i-amphtml-error,.i-amphtml-layout {
-  /* Just state. */
-}
-
-/* layout=nodisplay are automatically hidden until displayed directly. */
-
-[layout=nodisplay]:not(.i-amphtml-display) {
-  display: none !important;
-}
-
-.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder] {
-  display: block;
-}
-
-.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden {
-  visibility: hidden;
-}
-
-.i-amphtml-element:not(.amp-notsupported)>[fallback] {
-  display: none;
-}
-
-.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder] {
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  z-index: 1;
-}
-
-.i-amphtml-notbuilt>[placeholder] {
-  display: block !important;
-}
-
-.i-amphtml-hidden-by-media-query {
-  display: none !important;
-}
-
-.i-amphtml-element-error {
-  background: red !important;
-  color: #fff !important;
-  position: relative !important;
-}
-
-.i-amphtml-element-error:before {
-  content: attr(error-message);
-}
-
-/**
- * Wraps an element to make the contents scrollable. This is
- * used to wrap iframes which in iOS always behave as if they had the
- * seamless attribute.
- * TODO(dvoytenko, #8464): cleanup old `i-amp-scroll-container`.
- */
-
-i-amp-scroll-container,i-amphtml-scroll-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: block;
-}
-
-/**
- * Overflow:auto will be set with delay due to iOS bug where iframe is not
- * rendered.
- * TODO(dvoytenko, #8464): cleanup old `i-amp-scroll-container`.
- */
-
-i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active {
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.i-amphtml-loading-container {
-  display: block !important;
-  z-index: 1;
-}
-
-.i-amphtml-notbuilt>.i-amphtml-loading-container {
-  display: block !important;
-}
-
-/**
- * `i-amphtml-loading-container`, `i-amphtml-loader` and `i-amphtml-loader-dot` all support
- * a "loading indicator" usecase. `i-amphtml-loading-container` is mostly responsible
- * for alighning the loading indicator, while `i-amphtml-loader` and
- * `i-amphtml-loader-dot` are an implementation for a default loading indicator. The
- * default implementation includes the three-dot layout and animation.
- */
-
-.i-amphtml-loading-container.amp-hidden {
-  visibility: hidden;
-}
-
-.i-amphtml-loader-line {
-  position: absolute;
-  top:0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  overflow: hidden !important;
-  background-color:hsla(0, 0%, 59%, 0.2);
-  display: block;
-}
-
-.i-amphtml-loader-moving-line {
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100% !important;
-  background-color: hsla(0, 0%, 59%, 0.65);
-  z-index: 2;
-}
-
-@-webkit-keyframes i-amphtml-loader-line-moving {
-  0% {-webkit-transform: translateX(-100%);transform: translateX(-100%);}
-  to {-webkit-transform: translateX(100%);transform: translateX(100%);}
-}
-
-@keyframes i-amphtml-loader-line-moving {
-  0% {-webkit-transform: translateX(-100%);transform: translateX(-100%);}
-  to {-webkit-transform: translateX(100%);transform: translateX(100%);}
-}
-
-.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line {
-  -webkit-animation: i-amphtml-loader-line-moving 4s ease infinite;
-          animation: i-amphtml-loader-line-moving 4s ease infinite;
-}
-
-.i-amphtml-loader {
-  position: absolute;
-  display: block;
-  height: 10px;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translateX(-50%) translateY(-50%);
-          transform: translateX(-50%) translateY(-50%);
-  -webkit-transform-origin: 50% 50%;
-          transform-origin: 50% 50%;
-  white-space: nowrap;
-}
-
-.i-amphtml-loader.amp-active .i-amphtml-loader-dot {
-  -webkit-animation: i-amphtml-loader-dots 2s infinite;
-          animation: i-amphtml-loader-dots 2s infinite;
-}
-
-.i-amphtml-loader-dot {
-  position: relative;
-  display: inline-block;
-
-  height: 10px;
-  width: 10px;
-  margin: 2px;
-  border-radius: 100%;
-  background-color: rgba(0, 0, 0, 0.3);
-
-  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
-  will-change: transform;
-}
-
-.i-amphtml-loader .i-amphtml-loader-dot:first-child {
-  -webkit-animation-delay: 0s;
-          animation-delay: 0s;
-}
-
-.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2) {
-  -webkit-animation-delay: .1s;
-          animation-delay: .1s;
-}
-
-.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3) {
-  -webkit-animation-delay: .2s;
-          animation-delay: .2s;
-}
-
-@-webkit-keyframes i-amphtml-loader-dots {
-  0%,to {
-    -webkit-transform: scale(.7);
-            transform: scale(.7);
-    background-color: rgba(0, 0, 0, 0.3);
-  }
-
-  50% {
-    -webkit-transform: scale(.8);
-            transform: scale(.8);
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-}
-
-@keyframes i-amphtml-loader-dots {
-  0%,to {
-    -webkit-transform: scale(.7);
-            transform: scale(.7);
-    background-color: rgba(0, 0, 0, 0.3);
-  }
-
-  50% {
-    -webkit-transform: scale(.8);
-            transform: scale(.8);
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-}
-
-/**
- * "overflow" element is an element shown when more content is available but
- * not currently visible. Typically tapping on this element shows the full
- * content.
- */
-
-.i-amphtml-element>[overflow] {
-  cursor: pointer;
-  /* position:relative is critical to ensure that [overflow] is displayed
-     above an iframe; z-index is not enough. */
-  position: relative;
-  z-index: 2;
-  visibility: hidden;
-}
-
-.i-amphtml-element>[overflow].amp-visible {
-  visibility: visible;
-}
-
-/* Polyfill for IE and any other browser that don't understand templates. */
-
-template {
-  display: none !important;
-}
-
-/**
- * Authors can set this class on their html tags to provide `border-box` box-sizing
- * to every element in their document. Individual elements can override as necessary.
- */
-
-.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before {
-  box-sizing: border-box;
-}
-
-/* amp-pixel is always non-displayed. */
-
-amp-pixel {
-  display: none !important;
-}
-
-/**
- * Instagram wraps the standard image into a fixed size container.
- * With these offsets, users can simply specify the the size of the
- * instagram images and things have the right size.
- * In particular the effect of adding padding to this container is
- * that with responsive layouts the responsiveness is based on the
- * asset while the padding stays constant.
- * This information is here instead of living with the CSS of the
- * component, so that the runtime can reserve the correct space
- * before the instagram implementation loads.
- */
-
-amp-instagram {
-  padding: 64px 0px 0px !important;
-  background-color: #fff;
-}
-
-/**
- * Analytics tags should never be visible. keep them hidden.
- */
-
-amp-analytics {
-  /* Fixed to make position independent of page other elements. */
-  position: fixed !important;
-  top: 0 !important;
-  width: 1px !important;
-  height: 1px !important;
-  overflow: hidden !important;
-  visibility: hidden;
-}
-
-/**
- * Iframe allows setting frameborder, so we need to set box-sizing to border-box
- * or otherwise the iframe will oevrflow its parent when there is a border.
- */
-
-amp-iframe iframe {
-  box-sizing: border-box !important;
-}
-
-/**
- * Minimal AMP Access CSS. This part has to be here so that the correct UI
- * can be provided before AMP Access JS has been loaded.
- */
-
-/**
- * Forms error/success messaging containers should be hidden at first.
- */
-
-/**
- * Hide the update reference point of amp-live-list by default. This is
- * reset by the `amp-live-list > .amp-active[update]` selector.
- */
-
-/**
- * Display none elements
- */
-
-[amp-access][amp-access-hide],amp-experiment,amp-live-list>[update],amp-share-tracking,form [submit-error],form [submit-success],form [submitting] {
-  display: none;
-}
-
-.i-amphtml-jank-meter {
-  position: fixed;
-  background-color: rgba(232, 72, 95, 0.5);
-  bottom: 0;
-  right: 0;
-  color: #fff;
-  font-size: 16px;
-  z-index: 1000;
-  padding: 5px;
-}
-
-/**
- * Animated equalizer icon for muted autoplaying videos.
- */
-
-i-amp-video-mask,i-amphtml-video-mask {
-  z-index: 1;
-}
-
-.amp-video-eq {
-  -webkit-box-align: end;
-      -ms-flex-align: end;
-          align-items: flex-end;
-  bottom: 7px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  height: 12px;
-  opacity: 0.8;
-  overflow: hidden;
-  position: absolute;
-  right: 7px;
-  width: 20px;
-  z-index: 1;
-}
-
-.amp-video-eq .amp-video-eq-col {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  height: 100%;
-  margin-right: 1px;
-  position: relative;
-}
-
-.amp-video-eq .amp-video-eq-col div {
-  -webkit-animation-name: amp-video-eq-animation;
-          animation-name: amp-video-eq-animation;
-  -webkit-animation-timing-function: linear;
-          animation-timing-function: linear;
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
-  -webkit-animation-direction: alternate;
-          animation-direction: alternate;
-  background-color: #fafafa;
-  height: 100%;
-  position: absolute;
-  width: 100%;
-  will-change: transform;
-  -webkit-animation-play-state: paused;
-          animation-play-state: paused;
-}
-
-.amp-video-eq[unpausable] .amp-video-eq-col div {
-  -webkit-animation-name: none;
-          animation-name: none;
-}
-
-.amp-video-eq[unpausable].amp-video-eq-play .amp-video-eq-col div {
-  -webkit-animation-name: amp-video-eq-animation;
-          animation-name: amp-video-eq-animation;
-}
-
-.amp-video-eq.amp-video-eq-play .amp-video-eq-col div {
-  -webkit-animation-play-state: running;
-          animation-play-state: running;
-}
-
-.amp-video-eq-1-1 {
-  -webkit-animation-duration: 0.3s;
-          animation-duration: 0.3s;
-}
-
-.amp-video-eq-1-1,.amp-video-eq-1-2 {
-  -webkit-transform: translateY(60%);
-          transform: translateY(60%);
-}
-
-.amp-video-eq-1-2 {
-  -webkit-animation-duration: 0.45s;
-          animation-duration: 0.45s;
-}
-
-.amp-video-eq-2-1 {
-  -webkit-animation-duration: 0.5s;
-          animation-duration: 0.5s;
-}
-
-.amp-video-eq-2-1,.amp-video-eq-2-2 {
-  -webkit-transform: translateY(30%);
-          transform: translateY(30%);
-}
-
-.amp-video-eq-2-2 {
-  -webkit-animation-duration: 0.4s;
-          animation-duration: 0.4s;
-}
-
-.amp-video-eq-3-1 {
-  -webkit-animation-duration: 0.3s;
-          animation-duration: 0.3s;
-}
-
-.amp-video-eq-3-1,.amp-video-eq-3-2 {
-  -webkit-transform: translateY(70%);
-          transform: translateY(70%);
-}
-
-.amp-video-eq-3-2 {
-  -webkit-animation-duration: 0.35s;
-          animation-duration: 0.35s;
-}
-
-.amp-video-eq-4-1 {
-  -webkit-animation-duration: 0.4s;
-          animation-duration: 0.4s;
-}
-
-.amp-video-eq-4-1,.amp-video-eq-4-2 {
-  -webkit-transform: translateY(50%);
-          transform: translateY(50%);
-}
-
-.amp-video-eq-4-2 {
-  -webkit-animation-duration: 0.25s;
-          animation-duration: 0.25s;
-}
-
-@-webkit-keyframes amp-video-eq-animation {
-  0% {-webkit-transform: translateY(100%);transform: translateY(100%);}
-  to {-webkit-transform: translateY(0);transform: translateY(0);}
-}
-
-@keyframes amp-video-eq-animation {
-  0% {-webkit-transform: translateY(100%);transform: translateY(100%);}
-  to {-webkit-transform: translateY(0);transform: translateY(0);}
-}
-
-/**
- * Video Docking
- */
-
-.i-amphtml-dockable-video {
-  padding: 0px;
-  margin:0px;
-  -webkit-transition: background-color 1s;
-  transition: background-color 1s;
-}
-
-.i-amphtml-dockable-video>iframe.i-amphtml-dockable-video-minimizing,.i-amphtml-dockable-video>video.i-amphtml-dockable-video-minimizing {
-  position: fixed;
-  height: auto;
-  overflow: hidden;
-  z-index: 16;
-  will-change: transform;
-  -webkit-transform: scale(0.6) translateX(20px) translateY(20px);
-          transform: scale(0.6) translateX(20px) translateY(20px);
-  border-radius: 6px;
-  box-shadow: 0px 3px 9px 3px rgba(0, 0, 0, 0.1);
-  -webkit-transition: box-shadow 1s,border-radius 1s;
-  transition: box-shadow 1s,border-radius 1s;
-  /* Override fill-content */
-  min-width: initial !important;
-  min-height: initial !important;
-  margin: initial !important;
-}
-
-/**
- * amp-accordion to avoid FOUC.
- */
-
-/* Non-overridable properties */
-
-amp-accordion {
-  display: block !important;
-}
-
-/* Make sections non-floatable */
-
-/*  Display the first 2 elements (heading and content) */
-
-amp-accordion>section,amp-accordion>section>* {
-  float: none !important;
-}
-
-amp-accordion>section>* {
-  display: block !important;
-  overflow: hidden !important; /* clearfix */
-  position: relative !important;
-}
-
-.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section {
-  margin: 0;
-}
-
-/* heading element*/
-
-.i-amphtml-accordion-header {
-  cursor: pointer;
-  background-color: #efefef;
-  padding-right: 20px;
-  border: 1px solid #dfdfdf;
-}
-
-/* Collapse content by default. */
-
-amp-accordion>section>:last-child {
-  display: none !important;
-}
-
-/* Expand content when needed. */
-
-amp-accordion>section[expanded]>:last-child {
-  display: block !important;
-}
-
-/**
- * amp-story
- */
-
-amp-story,amp-story-page {
-  display: block;
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  width: 100%;
-}
-
-amp-story-page {
-  background-color: #757575;
-}
-
-amp-date-picker {
-  display: block;
-}
-
-amp-date-picker:not([i-amphtml-date-picker-attached])  {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  width: 200px;
-  height: 50px;
-  border: 1px solid #dbdbdb;
-}
-
-amp-date-picker[type=range]:not([i-amphtml-date-picker-attached]) {
-  width: 400px;
-}
-
-amp-date-picker[i-amphtml-date-picker-attached] [amp-date-placeholder],amp-date-picker[type=range][i-amphtml-date-picker-attached] [amp-date-placeholder-end],amp-date-picker[type=range][i-amphtml-date-picker-attached] [amp-date-placeholder-start] {
-  display: none;
-}
-
-amp-date-picker [amp-date-placeholder],amp-date-picker[type=range] [amp-date-placeholder-end],amp-date-picker[type=range] [amp-date-placeholder-start] {
-  border: 0;
-  font-weight: 200;
-  font-size: 18px;
-  line-height: 24px;
-  color: #333;
-  font-family: serif;
-  padding: 4px 8px;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-amp-date-picker[type=range] [amp-date-placeholder-end]::-webkit-input-placeholder,amp-date-picker[type=range] [amp-date-placeholder-start]::-webkit-input-placeholder,amp-date [amp-date-placeholder]::-webkit-input-placeholder {
-  color: #757575;
-}
-
-amp-date-picker[type=range] [amp-date-placeholder-end]::-ms-input-placeholder,amp-date-picker[type=range] [amp-date-placeholder-start]::-ms-input-placeholder,amp-date [amp-date-placeholder]::-ms-input-placeholder {
-  color: #757575;
-}
-
-amp-date-picker[type=range] [amp-date-placeholder-end]::placeholder,amp-date-picker[type=range] [amp-date-placeholder-start]::placeholder,amp-date [amp-date-placeholder]::placeholder {
-  color: #757575;
-}
diff --git a/test/integration/test-3p-nameframe.js b/test/integration/test-3p-nameframe.js
index 9c245ac48145b..c17684c017904 100644
--- a/test/integration/test-3p-nameframe.js
+++ b/test/integration/test-3p-nameframe.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-describe.skip('alt nameframe', function () {
+describes.sandboxed.skip('alt nameframe', {}, function () {
   describes.sandboxed('alt nameframe', {}, () => {
     describes.realWin('nameframe', {allowExternalResources: true}, (env) => {
       let fixture;
diff --git a/test/integration/test-actions.js b/test/integration/test-actions.js
index 486f6057d39ad..f4e89b706871d 100644
--- a/test/integration/test-actions.js
+++ b/test/integration/test-actions.js
@@ -14,50 +14,63 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../src/amp-events';
-import {createFixtureIframe, poll} from '../../testing/iframe.js';
-
-describe
-  .configure()
-  .retryOnSaucelabs()
-  .run('on="..."', () => {
-    let fixture;
-
-    beforeEach(() => {
-      return createFixtureIframe('test/fixtures/actions.html', 500).then(
-        (f) => {
-          fixture = f;
-
-          // Wait for one <amp-img> element to load.
-          return fixture.awaitEvent(AmpEvents.LOAD_END, 1);
-        }
-      );
+import {BrowserController} from '../../testing/test-helper';
+import {poll} from '../../testing/iframe.js';
+
+describes.integration(
+  'on="..."',
+  {
+    body: `
+  <span id="spanToHide">This text will be hidden by #hideBtn</span>
+  <button id="hideBtn" on="tap:spanToHide.hide">Hide #spanToHide</button>
+
+  <amp-img id="imgToToggle" width=200 height=100 src="/examples/img/sample.jpg" layout=fixed></amp-img>
+  <button id="toggleBtn" on="tap:imgToToggle.toggleVisibility">Toggle visibility for #img</button>
+
+  <button id="navigateBtn" on="tap:AMP.navigateTo(url='https://google.com')">Navigate to google.com</button>
+
+  <button id="printBtn" on="tap:AMP.print">Print</button>
+  `,
+  },
+  (env) => {
+    let browser, win, doc;
+
+    beforeEach(async () => {
+      win = env.win;
+      doc = win.document;
+      browser = new BrowserController(win);
+      await browser.waitForElementLayout('amp-img');
     });
 
-    function waitForDisplay(element, display) {
-      return () => fixture.win.getComputedStyle(element)['display'] === display;
+    async function waitForDisplayChange(description, elementId, displayValue) {
+      const element = doc.getElementById(elementId);
+      await poll(
+        description,
+        () => win.getComputedStyle(element)['display'] === displayValue
+      );
     }
 
     describe('"tap" event', () => {
-      it('<non-AMP element>.toggleVisibility', function* () {
-        const span = fixture.doc.getElementById('spanToHide');
-        const button = fixture.doc.getElementById('hideBtn');
-
-        button.click();
-        yield poll('#spanToHide hidden', waitForDisplay(span, 'none'));
+      it('<non-AMP element>.toggleVisibility', async () => {
+        doc.getElementById('hideBtn').click();
+        await waitForDisplayChange('#spanToHide hidden', 'spanToHide', 'none');
       });
 
-      it('<AMP element>.toggleVisibility', function* () {
-        const img = fixture.doc.getElementById('imgToToggle');
-        const button = fixture.doc.getElementById('toggleBtn');
+      it('<AMP element>.toggleVisibility', async () => {
+        const toggleBtn = doc.getElementById('toggleBtn');
 
-        button.click();
-        yield poll('#imgToToggle hidden', waitForDisplay(img, 'none'));
+        toggleBtn.click();
+        await waitForDisplayChange(
+          '#imgToToggle hidden',
+          'imgToToggle',
+          'none'
+        );
 
-        button.click();
-        yield poll(
+        toggleBtn.click();
+        await waitForDisplayChange(
           '#imgToToggle displayed',
-          waitForDisplay(img, 'inline-block')
+          'imgToToggle',
+          'inline-block'
         );
       });
 
@@ -65,33 +78,28 @@ describe
         .configure()
         .skipIfPropertiesObfuscated()
         .run('navigate', function () {
-          it('AMP.navigateTo(url=)', function* () {
-            const button = fixture.doc.getElementById('navigateBtn');
-
+          it('AMP.navigateTo(url=)', async () => {
             // This is brittle but I don't know how else to stub
             // window navigation.
-            const navigationService = fixture.win.__AMP_SERVICES.navigation.obj;
-            const navigateTo = window.sandbox.stub(
+            const navigationService = win.__AMP_SERVICES.navigation.obj;
+            const navigateTo = env.sandbox.stub(
               navigationService,
               'navigateTo'
             );
 
-            button.click();
-            yield poll('navigateTo() called with correct args', () => {
-              return navigateTo.calledWith(fixture.win, 'https://google.com');
-            });
+            doc.getElementById('navigateBtn').click();
+            await poll('navigateTo() called with correct args', () =>
+              navigateTo.calledWith(win, 'https://google.com')
+            );
           });
         });
 
-      it('AMP.print()', function* () {
-        const button = fixture.doc.getElementById('printBtn');
+      it('AMP.print()', async () => {
+        const print = env.sandbox.stub(win, 'print');
 
-        const print = window.sandbox.stub(fixture.win, 'print');
-
-        button.click();
-        yield poll('print() called once', () => {
-          return print.calledOnce;
-        });
+        doc.getElementById('printBtn').click();
+        await poll('print() called once', () => print.calledOnce);
       });
     });
-  });
+  }
+);
diff --git a/test/integration/test-amp-ad-3p.js b/test/integration/test-amp-ad-3p.js
index b7076d2af4166..4c495eb318739 100644
--- a/test/integration/test-amp-ad-3p.js
+++ b/test/integration/test-amp-ad-3p.js
@@ -14,50 +14,54 @@
  * limitations under the License.
  */
 
+import {ADS_INITIAL_INTERSECTION_EXP} from '../../src/experiments/ads-initial-intersection-exp';
 import {Services} from '../../src/services';
+import {createCustomEvent} from '../../src/event-helper';
 import {createFixtureIframe, poll} from '../../testing/iframe';
+import {forceExperimentBranch} from '../../src/experiments';
 import {installPlatformService} from '../../src/service/platform-impl';
-import {layoutRectLtwh} from '../../src/layout-rect';
+import {layoutRectLtwh} from '../../src/core/math/layout-rect';
 
+const IFRAME_HEIGHT = 3000;
 function createFixture() {
-  return createFixtureIframe('test/fixtures/3p-ad.html', 3000, () => {});
+  return createFixtureIframe(
+    'test/fixtures/3p-ad.html',
+    IFRAME_HEIGHT,
+    () => {}
+  );
 }
 
-describe.configure().run('amp-ad 3P', () => {
+describes.sandboxed('amp-ad 3P', {}, () => {
   let fixture;
 
   beforeEach(() => {
     return createFixture().then((f) => {
       fixture = f;
       installPlatformService(fixture.win);
+      forceExperimentBranch(
+        fixture.win,
+        ADS_INITIAL_INTERSECTION_EXP.id,
+        ADS_INITIAL_INTERSECTION_EXP.experiment
+      );
     });
   });
 
-  it('create an iframe with APIs', function () {
+  it('create an iframe with APIs', async function () {
     this.timeout(20000);
     let iframe;
     let lastIO = null;
     const platform = Services.platformFor(fixture.win);
     return poll(
-      'frame to be in DOM',
+      'frame to be in DOM and context is available',
       () => {
-        return fixture.doc.querySelector('amp-ad > iframe');
+        iframe = fixture.doc.querySelector('amp-ad > iframe');
+        if (iframe) {
+          return iframe.contentWindow.context;
+        }
       },
       undefined,
       5000
     )
-      .then((iframeElement) => {
-        iframe = iframeElement;
-        return new Promise((resolve) => {
-          if (iframe.contentWindow.context) {
-            resolve(iframe.contentWindow.context);
-          }
-          iframe.onload = () => {
-            expect(iframe.contentWindow.document.getElementById('c')).to.exist;
-            resolve(iframe.contentWindow.context);
-          };
-        });
-      })
       .then((context) => {
         expect(context.canary).to.be.a('boolean');
         expect(context.canonicalUrl).to.equal(
@@ -94,19 +98,26 @@ describe.configure().run('amp-ad 3P', () => {
         });
         const {initialIntersection} = context;
         expect(initialIntersection.rootBounds).to.deep.equal(
-          layoutRectLtwh(0, 0, 500, 3000)
+          layoutRectLtwh(
+            0,
+            0,
+            Math.min(
+              iframe.ownerDocument.body.clientWidth,
+              iframe.ownerDocument.defaultView.innerWidth
+            ),
+            Math.min(
+              iframe.ownerDocument.body.clientHeight,
+              iframe.ownerDocument.defaultView.innerHeight
+            )
+          )
         );
+
         expect(initialIntersection.boundingClientRect).to.deep.equal(
           layoutRectLtwh(0, platform.isIos() ? 1001 : 1000, 300, 250)
         );
-        expect(initialIntersection.intersectionRect).to.deep.equal(
-          layoutRectLtwh(0, platform.isIos() ? 1001 : 1000, 300, 250)
-        );
-        expect(initialIntersection.intersectionRatio).to.equal(1);
-        expect(initialIntersection.time).to.be.a('number');
         expect(context.isMaster).to.exist;
         expect(context.computeInMasterFrame).to.exist;
-        expect(context.location).to.deep.equal({
+        expect(context.location).to.deep.include({
           hash: '',
           host: 'localhost:9876',
           hostname: 'localhost',
@@ -125,11 +136,11 @@ describe.configure().run('amp-ad 3P', () => {
           );
         }
         expect(context.startTime).to.be.a('number');
-        // Edge has different opinion about window.location in srcdoc iframe.
+        // Edge/IE has different opinion about window.location in srcdoc iframe.
         // Nevertheless this only happens in test. In real world AMP will not
         // in srcdoc iframe.
         expect(context.sourceUrl).to.equal(
-          platform.isEdge()
+          platform.isEdge() || platform.isIe()
             ? 'http://localhost:9876/context.html'
             : 'about:srcdoc'
         );
@@ -139,8 +150,6 @@ describe.configure().run('amp-ad 3P', () => {
         expect(context.addContextToIframe).to.be.a('function');
         expect(context.getHtml).to.be.a('function');
         expect(context.noContentAvailable).to.be.a('function');
-        expect(context.onResizeDenied).to.be.a('function');
-        expect(context.onResizeSuccess).to.be.a('function');
         expect(context.renderStart).to.be.a('function');
         expect(context.reportRenderedEntityIdentifier).to.be.a('function');
         expect(context.requestResize).to.be.a('function');
@@ -162,41 +171,95 @@ describe.configure().run('amp-ad 3P', () => {
       .then(() => {
         expect(iframe.offsetHeight).to.equal(250);
         expect(iframe.offsetWidth).to.equal(300);
-        expect(iframe.contentWindow.ping.resizeSuccess).to.be.undefined;
-        iframe.contentWindow.context.requestResize(200, 50);
-        return poll('wait for embed-size to be received', () => {
-          return !!fixture.messages.getFirstMessageEventOfType('embed-size');
-        });
+        return iframe.contentWindow.context
+          .requestResize(200, 50)
+          .catch(() => {});
       })
       .then(() => {
         // The userActivation feature is known to be available on Chrome 74+
         if (platform.isChrome() && platform.getMajorVersion() >= 74) {
-          const event = fixture.messages.getFirstMessageEventOfType(
-            'embed-size'
-          );
+          const event =
+            fixture.messages.getFirstMessageEventOfType('embed-size');
           expect(event.userActivation).to.be.ok;
           expect(event.userActivation.isActive).to.be.a('boolean');
         }
-
-        return poll(
-          'wait for attemptChangeSize',
-          () => {
-            return iframe.contentWindow.ping.resizeSuccess != undefined;
-          },
-          null,
-          5000
-        );
       })
-      .then(() => {
+      .then(async function () {
         lastIO = null;
+        // Ad is fully visible
         iframe.contentWindow.context.observeIntersection((changes) => {
           lastIO = changes[changes.length - 1];
         });
+        await poll('wait for initial IO entry', () => {
+          return lastIO != null && lastIO.boundingClientRect.top == 1000;
+        });
+        await new Promise((resolve) => {
+          setTimeout(resolve, 110);
+        });
+        lastIO = null;
+
+        // Ad is still fully visible. observeIntersection fire when
+        // ads is fully visible with position change
         fixture.win.scrollTo(0, 1000);
-        fixture.win.document.body.dispatchEvent(new Event('scroll'));
-        return poll('wait for new IO entry', () => {
-          return lastIO != null;
+        fixture.win.dispatchEvent(
+          createCustomEvent(fixture.win, 'scroll', null)
+        );
+        await poll('wait for new IO entry when ad is fully visible', () => {
+          return (
+            lastIO != null &&
+            lastIO.boundingClientRect.top == (platform.isIos() ? 1 : 0) &&
+            lastIO.intersectionRatio == 1
+          );
+        });
+        await new Promise((resolve) => {
+          setTimeout(resolve, 110);
+        });
+        lastIO = null;
+
+        // Ad is partially visible (around 50%)
+        fixture.win.scrollTo(0, 1125);
+        fixture.win.dispatchEvent(
+          createCustomEvent(fixture.win, 'scroll', null)
+        );
+        await poll(
+          'wait for new IO entry when intersectionRatio changes',
+          () => {
+            return (
+              lastIO != null &&
+              lastIO.intersectionRatio > 0 &&
+              lastIO.intersectionRatio < 1
+            );
+          }
+        );
+
+        await new Promise((resolve) => {
+          setTimeout(resolve, 110);
+        });
+        lastIO = null;
+
+        // Ad first becomes invisible
+        fixture.win.scrollTo(0, 1251);
+        fixture.win.dispatchEvent(
+          createCustomEvent(fixture.win, 'scroll', null)
+        );
+        await poll('wait for new IO entry when ad exit viewport', () => {
+          return lastIO != null && lastIO.intersectionRatio == 0;
+        });
+
+        await new Promise((resolve) => {
+          setTimeout(resolve, 110);
+        });
+        lastIO = null;
+
+        // Scroll when ad is invisible
+        fixture.win.scrollTo(0, 1451);
+        fixture.win.dispatchEvent(
+          createCustomEvent(fixture.win, 'scroll', null)
+        );
+        await new Promise((resolve) => {
+          setTimeout(resolve, 100);
         });
+        expect(lastIO).to.be.null;
       })
       .then(
         () =>
diff --git a/test/integration/test-amp-ad-doubleclick.js b/test/integration/test-amp-ad-doubleclick.js
index b6aeeae00ed15..f6e3bcc06d625 100644
--- a/test/integration/test-amp-ad-doubleclick.js
+++ b/test/integration/test-amp-ad-doubleclick.js
@@ -16,11 +16,10 @@
 
 import {createFixtureIframe, poll, pollForLayout} from '../../testing/iframe';
 
-describe
+describes.sandboxed
   .configure()
   .enableIe()
-  .retryOnSaucelabs()
-  .run('Rendering of one ad', () => {
+  .run('Rendering of one ad', {}, () => {
     let fixture;
     let beforeHref;
 
@@ -159,7 +158,7 @@ describe
           return new Promise((resolve) => {
             // Listening to the "amp:visibilitychange" string literal because it's
             // part of the public API.
-            // https://github.com/ampproject/amphtml/blob/master/ads/README.md#page-visibility
+            // https://github.com/ampproject/amphtml/blob/main/ads/README.md#page-visibility
             iframe.contentWindow.addEventListener(
               'amp:visibilitychange',
               resolve
diff --git a/test/integration/test-amp-analytics.js b/test/integration/test-amp-analytics.js
index 822c43b654204..48fe38b1c8be4 100644
--- a/test/integration/test-amp-analytics.js
+++ b/test/integration/test-amp-analytics.js
@@ -15,13 +15,18 @@
  */
 
 import {BrowserController, RequestBank} from '../../testing/test-helper';
-import {parseQueryString} from '../../src/url';
-
-describe('amp-analytics', function () {
-  describes.integration(
-    'basic pageview',
-    {
-      body: `
+import {parseQueryString} from '../../src/core/types/string/url';
+
+// TODO(wg-analytics): These tests time out on Firefox and Safari.
+describes.sandboxed
+  .configure()
+  .skipSafari()
+  .skipFirefox()
+  .run('amp-analytics', {}, function () {
+    describes.integration(
+      'basic pageview',
+      {
+        body: `
       <script>
         // initialize _cid cookie with a CLIENT_ID
         document.cookie='_cid=amp-12345';
@@ -59,44 +64,45 @@ describe('amp-analytics', function () {
         }
         </script>
       </amp-analytics>`,
-      extensions: ['amp-analytics'],
-    },
-    () => {
-      afterEach(() => {
-        // clean up written _cid cookie
-        document.cookie = '_cid=;expires=' + new Date(0).toUTCString();
-      });
+        extensions: ['amp-analytics'],
+      },
+      () => {
+        afterEach(() => {
+          // clean up written _cid cookie
+          document.cookie = '_cid=;expires=' + new Date(0).toUTCString();
+          return RequestBank.tearDown();
+        });
 
-      it('should send request', () => {
-        return RequestBank.withdraw().then((req) => {
-          const q = parseQueryString(req.url.substr(1));
-          expect(q['a']).to.equal('2');
-          expect(q['b']).to.equal('AMP TEST');
-          expect(q['cid']).to.equal('amp-12345');
-          expect(q['loadend']).to.not.equal('0');
-          expect(q['default']).to.equal('test');
-          // cookie set via http response header when requesting
-          // localhost:9876/amp4test/compose-doc
-          expect(q['cookie']).to.equal('test');
-
-          if (window.PerformancePaintTiming) {
-            expect(q['fcp']).to.not.be.null;
-          }
-          expect(q['fvr']).to.not.be.null;
-          expect(q['mbv']).to.not.be.null;
-          expect(
-            req.headers.referer,
-            'should keep referrer if no referrerpolicy specified'
-          ).to.be.ok;
+        it('should send request', () => {
+          return RequestBank.withdraw().then((req) => {
+            const q = parseQueryString(req.url.substr(1));
+            expect(q['a']).to.equal('2');
+            expect(q['b']).to.equal('AMP TEST');
+            expect(q['cid']).to.equal('amp-12345');
+            expect(q['loadend']).to.not.equal('0');
+            expect(q['default']).to.equal('test');
+            // cookie set via http response header when requesting
+            // localhost:9876/amp4test/compose-doc
+            expect(q['cookie']).to.equal('test');
+
+            if (window.PerformancePaintTiming) {
+              expect(q['fcp']).to.not.be.null;
+            }
+            expect(q['fvr']).to.not.be.null;
+            expect(q['mbv']).to.not.be.null;
+            expect(
+              req.headers.referer,
+              'should keep referrer if no referrerpolicy specified'
+            ).to.be.ok;
+          });
         });
-      });
-    }
-  );
+      }
+    );
 
-  describes.integration(
-    'basic pageview chunk',
-    {
-      body: `
+    describes.integration(
+      'basic pageview chunk',
+      {
+        body: `
       <script>
         // initialize _cid cookie with a CLIENT_ID
         document.cookie='_cid=amp-12345';
@@ -134,45 +140,46 @@ describe('amp-analytics', function () {
         }
         </script>
       </amp-analytics>`,
-      extensions: ['amp-analytics'],
-      experiments: ['analytics-chunks'],
-    },
-    () => {
-      afterEach(() => {
-        // clean up written _cid cookie
-        document.cookie = '_cid=;expires=' + new Date(0).toUTCString();
-      });
+        extensions: ['amp-analytics'],
+        experiments: ['analytics-chunks'],
+      },
+      () => {
+        afterEach(() => {
+          // clean up written _cid cookie
+          document.cookie = '_cid=;expires=' + new Date(0).toUTCString();
+          return RequestBank.tearDown();
+        });
 
-      it('should send request', () => {
-        return RequestBank.withdraw().then((req) => {
-          const q = parseQueryString(req.url.substr(1));
-          expect(q['a']).to.equal('2');
-          expect(q['b']).to.equal('AMP TEST');
-          expect(q['cid']).to.equal('amp-12345');
-          expect(q['loadend']).to.not.equal('0');
-          expect(q['default']).to.equal('test');
-          // cookie set via http response header when requesting
-          // localhost:9876/amp4test/compose-doc
-          expect(q['cookie']).to.equal('test');
-
-          if (window.PerformancePaintTiming) {
-            expect(q['fcp']).to.not.be.null;
-          }
-          expect(q['fvr']).to.not.be.null;
-          expect(q['mbv']).to.not.be.null;
-          expect(
-            req.headers.referer,
-            'should keep referrer if no referrerpolicy specified'
-          ).to.be.ok;
+        it('should send request', () => {
+          return RequestBank.withdraw().then((req) => {
+            const q = parseQueryString(req.url.substr(1));
+            expect(q['a']).to.equal('2');
+            expect(q['b']).to.equal('AMP TEST');
+            expect(q['cid']).to.equal('amp-12345');
+            expect(q['loadend']).to.not.equal('0');
+            expect(q['default']).to.equal('test');
+            // cookie set via http response header when requesting
+            // localhost:9876/amp4test/compose-doc
+            expect(q['cookie']).to.equal('test');
+
+            if (window.PerformancePaintTiming) {
+              expect(q['fcp']).to.not.be.null;
+            }
+            expect(q['fvr']).to.not.be.null;
+            expect(q['mbv']).to.not.be.null;
+            expect(
+              req.headers.referer,
+              'should keep referrer if no referrerpolicy specified'
+            ).to.be.ok;
+          });
         });
-      });
-    }
-  );
+      }
+    );
 
-  describes.integration(
-    'click trigger',
-    {
-      body: `
+    describes.integration(
+      'click trigger',
+      {
+        body: `
       <a href="javascript:;"
           data-vars-foo-bar="hello world"
           data-vars-bar-foo="2">
@@ -202,30 +209,34 @@ describe('amp-analytics', function () {
         </script>
       </amp-analytics>
       `,
-      extensions: ['amp-analytics'],
-    },
-    (env) => {
-      let browser;
-
-      beforeEach(() => {
-        browser = new BrowserController(env.win);
-        return browser.waitForElementLayout('amp-analytics');
-      });
+        extensions: ['amp-analytics'],
+      },
+      (env) => {
+        let browser;
+
+        beforeEach(() => {
+          browser = new BrowserController(env.win);
+          return browser.waitForElementLayout('amp-analytics');
+        });
 
-      it('should send request', () => {
-        const reqPromise = RequestBank.withdraw().then((req) => {
-          expect(req.url).to.equal('/?f=hello%20world&b=2');
+        afterEach(() => {
+          return RequestBank.tearDown();
         });
-        browser.click('a');
-        return reqPromise;
-      });
-    }
-  );
 
-  describes.integration(
-    'scroll trigger',
-    {
-      body: `
+        it('should send request', () => {
+          const reqPromise = RequestBank.withdraw().then((req) => {
+            expect(req.url).to.equal('/?f=hello%20world&b=2');
+          });
+          browser.click('a');
+          return reqPromise;
+        });
+      }
+    );
+
+    describes.integration(
+      'scroll trigger',
+      {
+        body: `
       <amp-analytics>
         <script type="application/json">
         {
@@ -255,33 +266,37 @@ describe('amp-analytics', function () {
         2nd viewport
       </div>
       `,
-      extensions: ['amp-analytics'],
-    },
-    (env) => {
-      let browser;
-
-      beforeEach(() => {
-        browser = new BrowserController(env.win);
-        return browser.waitForElementLayout('amp-analytics');
-      });
+        extensions: ['amp-analytics'],
+      },
+      (env) => {
+        let browser;
+
+        beforeEach(() => {
+          browser = new BrowserController(env.win);
+          return browser.waitForElementLayout('amp-analytics');
+        });
 
-      it('should trigger on scroll', () => {
-        const reqPromise = RequestBank.withdraw().then((req) => {
-          expect(req.url).to.equal('/?scrollTop=75&scrollHeight=300');
+        afterEach(() => {
+          return RequestBank.tearDown();
         });
-        // verticalBoundaries is set to 70%
-        // (windowHeight + scrollTop) / scrollHeight = (150 + 75) / 300 = 75%
-        // so scrolling 75px guarantees a triggering
-        browser.scrollTo(75);
-        return reqPromise;
-      });
-    }
-  );
 
-  describes.integration(
-    'element visible trigger',
-    {
-      body: `
+        it('should trigger on scroll', () => {
+          const reqPromise = RequestBank.withdraw().then((req) => {
+            expect(req.url).to.equal('/?scrollTop=75&scrollHeight=300');
+          });
+          // verticalBoundaries is set to 70%
+          // (windowHeight + scrollTop) / scrollHeight = (150 + 75) / 300 = 75%
+          // so scrolling 75px guarantees a triggering
+          browser.scrollTo(75);
+          return reqPromise;
+        });
+      }
+    );
+
+    describes.integration(
+      'element visible trigger',
+      {
+        body: `
       <amp-analytics>
         <script type="application/json">
         {
@@ -315,47 +330,51 @@ describe('amp-analytics', function () {
       <amp-img layout="fixed" width="300" height="150"
           src="/examples/img/bigbuckbunny.jpg"></amp-img>
       `,
-      extensions: ['amp-analytics'],
-    },
-    (env) => {
-      let browser;
-
-      beforeEach(() => {
-        browser = new BrowserController(env.win);
-        return browser.waitForElementLayout('amp-analytics');
-      });
+        extensions: ['amp-analytics'],
+      },
+      (env) => {
+        let browser;
+
+        beforeEach(() => {
+          browser = new BrowserController(env.win);
+          return browser.waitForElementLayout('amp-analytics');
+        });
+
+        afterEach(() => {
+          return RequestBank.tearDown();
+        });
 
-      it('should trigger when image being 50% visible for 0.5s', () => {
-        let scrollTime = Infinity;
-        const reqPromise = RequestBank.withdraw().then((req) => {
-          const q = parseQueryString(req.url.substr(1));
-          expect(Date.now()).to.be.not.below(scrollTime + 500);
-          expect(parseInt(q['timestamp'], 10)).to.be.not.below(
-            scrollTime + 500
-          );
-          expect(q['loadTimeVisibility']).to.equal('0');
-          expect(parseFloat(q['maxVisiblePercentage'])).to.be.above(50);
-          expect(parseFloat(q['totalVisibleTime'])).to.be.not.below(500);
-        });
-
-        browser
-          .wait(1000) // wait for amp-analytics to start so loadTimeVisibility=0
-          .then(() => browser.scrollTo(50)) // image 50/150 visible
-          .then(() => browser.wait(1000)) // wait for a 1s to make sure no trigger
-          .then(() => {
-            scrollTime = Date.now();
-            browser.scrollTo(80); // image 80/150 visible
-            // keep visible for 0.5s to fire a ping
+        it('should trigger when image being 50% visible for 0.5s', () => {
+          let scrollTime = Infinity;
+          const reqPromise = RequestBank.withdraw().then((req) => {
+            const q = parseQueryString(req.url.substr(1));
+            expect(Date.now()).to.be.not.below(scrollTime + 500);
+            expect(parseInt(q['timestamp'], 10)).to.be.not.below(
+              scrollTime + 500
+            );
+            expect(q['loadTimeVisibility']).to.equal('0');
+            expect(parseFloat(q['maxVisiblePercentage'])).to.be.above(50);
+            expect(parseFloat(q['totalVisibleTime'])).to.be.not.below(500);
           });
-        return reqPromise;
-      });
-    }
-  );
 
-  describes.integration(
-    'timer trigger',
-    {
-      body: `
+          browser
+            .wait(1000) // wait for amp-analytics to start so loadTimeVisibility=0
+            .then(() => browser.scrollTo(50)) // image 50/150 visible
+            .then(() => browser.wait(1000)) // wait for a 1s to make sure no trigger
+            .then(() => {
+              scrollTime = Date.now();
+              browser.scrollTo(80); // image 80/150 visible
+              // keep visible for 0.5s to fire a ping
+            });
+          return reqPromise;
+        });
+      }
+    );
+
+    describes.integration(
+      'timer trigger',
+      {
+        body: `
       <amp-analytics>
         <script type="application/json">
         {
@@ -382,37 +401,43 @@ describe('amp-analytics', function () {
         </script>
       </amp-analytics>
       `,
-      extensions: ['amp-analytics'],
-    },
-    (env) => {
-      beforeEach(() => {
-        const browser = new BrowserController(env.win);
-        return browser.waitForElementLayout('amp-analytics');
-      });
+        extensions: ['amp-analytics'],
+      },
+      (env) => {
+        beforeEach(() => {
+          const browser = new BrowserController(env.win);
+          return browser.waitForElementLayout('amp-analytics');
+        });
 
-      it('should trigger 1s after amp-analytics starts', () => {
-        const startTime = Date.now();
-        return RequestBank.withdraw().then((req) => {
-          const q = parseQueryString(req.url.substr(1));
-          const timerStart = parseFloat(q['timerStart']);
-          expect(timerStart + 1000).to.be.at.most(Date.now());
-          expect(timerStart + 1000).to.be.at.most(parseInt(q['timestamp'], 10));
-          // Verify that timerStart is about current time
-          expect(timerStart - startTime)
-            .to.be.above(-1000)
-            .and.below(1000);
-          expect(parseFloat(q['timerDuration']))
-            .to.be.at.least(950)
-            .below(1100);
+        afterEach(() => {
+          return RequestBank.tearDown();
         });
-      });
-    }
-  );
 
-  describes.integration(
-    'CLIENT_ID new user',
-    {
-      body: `
+        it('should trigger 1s after amp-analytics starts', () => {
+          const startTime = Date.now();
+          return RequestBank.withdraw().then((req) => {
+            const q = parseQueryString(req.url.substr(1));
+            const timerStart = parseFloat(q['timerStart']);
+            expect(timerStart + 1000).to.be.at.most(Date.now());
+            expect(timerStart + 1000).to.be.at.most(
+              parseInt(q['timestamp'], 10)
+            );
+            // Verify that timerStart is about current time
+            expect(timerStart - startTime)
+              .to.be.above(-1000)
+              .and.below(1000);
+            expect(parseFloat(q['timerDuration']))
+              .to.be.at.least(950)
+              .below(1100);
+          });
+        });
+      }
+    );
+
+    describes.integration(
+      'CLIENT_ID new user',
+      {
+        body: `
       <script>
         // expires existing _cid cookie if any
         document.cookie='_cid=;expires=' + new Date(0).toUTCString();
@@ -448,42 +473,43 @@ describe('amp-analytics', function () {
         </script>
       </amp-analytics>
       `,
-      extensions: ['amp-analytics'],
-    },
-    (env) => {
-      beforeEach(() => {
-        const browser = new BrowserController(env.win);
-        return browser.waitForElementLayout('amp-analytics');
-      });
+        extensions: ['amp-analytics'],
+      },
+      (env) => {
+        beforeEach(() => {
+          const browser = new BrowserController(env.win);
+          return browser.waitForElementLayout('amp-analytics');
+        });
 
-      afterEach(() => {
-        // clean up written _cid cookie
-        document.cookie = '_cid=;expires=' + new Date(0).toUTCString();
-      });
+        afterEach(() => {
+          // clean up written _cid cookie
+          document.cookie = '_cid=;expires=' + new Date(0).toUTCString();
+          return RequestBank.tearDown();
+        });
 
-      it('should assign new cid', () => {
-        return Promise.all([
-          RequestBank.withdraw(1),
-          RequestBank.withdraw(2),
-        ]).then((reqs) => {
-          const req1 = reqs[0];
-          const req2 = reqs[1];
-          expect(req1.url).to.match(/^\/\?cid=/);
-          expect(req2.url).to.match(/^\/\?cid=/);
-          const cid1 = req1.url.substr('/?cid='.length);
-          const cid2 = req2.url.substr('/?cid='.length);
-          expect(cid1).to.match(/^amp-/);
-          expect(cid2).to.equal(cid1);
-          expect(document.cookie).to.contain('_cid=' + cid1);
+        it('should assign new cid', () => {
+          return Promise.all([
+            RequestBank.withdraw(1),
+            RequestBank.withdraw(2),
+          ]).then((reqs) => {
+            const req1 = reqs[0];
+            const req2 = reqs[1];
+            expect(req1.url).to.match(/^\/\?cid=/);
+            expect(req2.url).to.match(/^\/\?cid=/);
+            const cid1 = req1.url.substr('/?cid='.length);
+            const cid2 = req2.url.substr('/?cid='.length);
+            expect(cid1).to.match(/^amp-/);
+            expect(cid2).to.equal(cid1);
+            expect(document.cookie).to.contain('_cid=' + cid1);
+          });
         });
-      });
-    }
-  );
+      }
+    );
 
-  describes.integration(
-    'batch',
-    {
-      body: `<amp-analytics>
+    describes.integration(
+      'batch',
+      {
+        body: `<amp-analytics>
         <script type="application/json">
         {
           "requests": {
@@ -517,26 +543,30 @@ describe('amp-analytics', function () {
         }
         </script>
       </amp-analytics>`,
-      extensions: ['amp-analytics'],
-    },
-    (env) => {
-      beforeEach(() => {
-        const browser = new BrowserController(env.win);
-        return browser.waitForElementLayout('amp-analytics');
-      });
+        extensions: ['amp-analytics'],
+      },
+      (env) => {
+        beforeEach(() => {
+          const browser = new BrowserController(env.win);
+          return browser.waitForElementLayout('amp-analytics');
+        });
 
-      it('should send request in batch', () => {
-        return RequestBank.withdraw().then((req) => {
-          expect(req.url).to.equal('/?a=1&b=AMP%20TEST&a=1&b=AMP%20TEST');
+        afterEach(() => {
+          return RequestBank.tearDown();
         });
-      });
-    }
-  );
 
-  describes.integration(
-    'useBody',
-    {
-      body: `<amp-analytics>
+        it('should send request in batch', () => {
+          return RequestBank.withdraw().then((req) => {
+            expect(req.url).to.equal('/?a=1&b=AMP%20TEST&a=1&b=AMP%20TEST');
+          });
+        });
+      }
+    );
+
+    describes.integration(
+      'useBody',
+      {
+        body: `<amp-analytics>
         <script type="application/json">
         {
           "requests": {
@@ -580,44 +610,48 @@ describe('amp-analytics', function () {
         }
         </script>
       </amp-analytics>`,
-      extensions: ['amp-analytics'],
-    },
-    (env) => {
-      beforeEach(() => {
-        const browser = new BrowserController(env.win);
-        return browser.waitForElementLayout('amp-analytics');
-      });
+        extensions: ['amp-analytics'],
+      },
+      (env) => {
+        beforeEach(() => {
+          const browser = new BrowserController(env.win);
+          return browser.waitForElementLayout('amp-analytics');
+        });
+
+        afterEach(() => {
+          return RequestBank.tearDown();
+        });
 
-      it('should send request use POST body payload', () => {
-        return RequestBank.withdraw().then((req) => {
-          expect(req.url).to.equal('/');
-          expect(JSON.parse(req.body)).to.deep.equal({
-            a: 2,
-            b: 'AMP TEST',
-            c: {
-              d: 'AMP TEST',
-              e: {
-                f: ['AMP TEST', 'AMP TEST'],
+        it('should send request use POST body payload', () => {
+          return RequestBank.withdraw().then((req) => {
+            expect(req.url).to.equal('/');
+            expect(JSON.parse(req.body)).to.deep.equal({
+              a: 2,
+              b: 'AMP TEST',
+              c: {
+                d: 'AMP TEST',
+                e: {
+                  f: ['AMP TEST', 'AMP TEST'],
+                },
               },
-            },
-            g: ['AMP TEST', 'AMP TEST'],
-            '_c_a': 1,
-            '_c_b': {
-              'context.c': 'AMP TEST',
-              'context.d': {
-                'context.e': ['AMP TEST', 'AMP TEST'],
+              g: ['AMP TEST', 'AMP TEST'],
+              '_c_a': 1,
+              '_c_b': {
+                'context.c': 'AMP TEST',
+                'context.d': {
+                  'context.e': ['AMP TEST', 'AMP TEST'],
+                },
               },
-            },
+            });
           });
         });
-      });
-    }
-  );
+      }
+    );
 
-  describes.integration(
-    'batch useBody',
-    {
-      body: `<amp-analytics>
+    describes.integration(
+      'batch useBody',
+      {
+        body: `<amp-analytics>
         <script type="application/json">
         {
           "requests": {
@@ -652,36 +686,40 @@ describe('amp-analytics', function () {
         }
         </script>
       </amp-analytics>`,
-      extensions: ['amp-analytics'],
-    },
-    (env) => {
-      beforeEach(() => {
-        const browser = new BrowserController(env.win);
-        return browser.waitForElementLayout('amp-analytics');
-      });
+        extensions: ['amp-analytics'],
+      },
+      (env) => {
+        beforeEach(() => {
+          const browser = new BrowserController(env.win);
+          return browser.waitForElementLayout('amp-analytics');
+        });
 
-      it('should send batch request use POST body payload', () => {
-        return RequestBank.withdraw().then((req) => {
-          expect(req.url).to.equal('/');
-          expect(JSON.parse(req.body)).to.deep.equal([
-            {
-              a: 1,
-              b: 'AMP TEST',
-            },
-            {
-              a: 1,
-              b: 'AMP TEST',
-            },
-          ]);
+        afterEach(() => {
+          return RequestBank.tearDown();
         });
-      });
-    }
-  );
 
-  describes.integration(
-    'referrerPolicy',
-    {
-      body: `<amp-analytics>
+        it('should send batch request use POST body payload', () => {
+          return RequestBank.withdraw().then((req) => {
+            expect(req.url).to.equal('/');
+            expect(JSON.parse(req.body)).to.deep.equal([
+              {
+                a: 1,
+                b: 'AMP TEST',
+              },
+              {
+                a: 1,
+                b: 'AMP TEST',
+              },
+            ]);
+          });
+        });
+      }
+    );
+
+    describes.integration(
+      'referrerPolicy',
+      {
+        body: `<amp-analytics>
           <script type="application/json">
           {
             "requests": {
@@ -699,27 +737,31 @@ describe('amp-analytics', function () {
           }
           </script>
       </amp-analytics>`,
-      extensions: ['amp-analytics'],
-    },
-    (env) => {
-      beforeEach(() => {
-        const browser = new BrowserController(env.win);
-        return browser.waitForElementLayout('amp-analytics');
-      });
+        extensions: ['amp-analytics'],
+      },
+      (env) => {
+        beforeEach(() => {
+          const browser = new BrowserController(env.win);
+          return browser.waitForElementLayout('amp-analytics');
+        });
 
-      it('should remove referrer if referrerpolicy=no-referrer', () => {
-        return RequestBank.withdraw().then((req) => {
-          expect(req.url).to.equal('/');
-          expect(req.headers.referer).to.not.be.ok;
+        afterEach(() => {
+          return RequestBank.tearDown();
         });
-      });
-    }
-  );
 
-  describes.integration(
-    'configRewriter',
-    {
-      body: `<amp-analytics type="_fake_">
+        it('should remove referrer if referrerpolicy=no-referrer', () => {
+          return RequestBank.withdraw().then((req) => {
+            expect(req.url).to.equal('/');
+            expect(req.headers.referer).to.not.be.ok;
+          });
+        });
+      }
+    );
+
+    describes.integration(
+      'configRewriter',
+      {
+        body: `<amp-analytics type="_fake_">
           <script type="application/json">
           {
             "vars": {
@@ -735,36 +777,40 @@ describe('amp-analytics', function () {
           }
           </script>
       </amp-analytics>`,
-      extensions: ['amp-analytics'],
-    },
-    (env) => {
-      beforeEach(() => {
-        const browser = new BrowserController(env.win);
-        return browser.waitForElementLayout('amp-analytics');
-      });
+        extensions: ['amp-analytics'],
+      },
+      (env) => {
+        beforeEach(() => {
+          const browser = new BrowserController(env.win);
+          return browser.waitForElementLayout('amp-analytics');
+        });
+
+        afterEach(() => {
+          return RequestBank.tearDown();
+        });
 
-      it('should use config from server', () => {
-        return RequestBank.withdraw().then((req) => {
-          // The config here should have been rewritten by the /analytics/rewriter
-          // endpoint. This logic is located in the file
-          // /build-system/routes/analytics.js
-          const body = JSON.parse(req.body);
-          expect(body.reqBody.configRewriter.vars).to.deep.equal({
-            name: 'cats',
-            title: 'AMP TEST',
-            title2: 'AMP TEST',
+        it('should use config from server', () => {
+          return RequestBank.withdraw().then((req) => {
+            // The config here should have been rewritten by the /analytics/rewriter
+            // endpoint. This logic is located in the file
+            // /build-system/routes/analytics.js
+            const body = JSON.parse(req.body);
+            expect(body.reqBody.configRewriter.vars).to.deep.equal({
+              name: 'cats',
+              title: 'AMP TEST',
+              title2: 'AMP TEST',
+            });
+            expect(body.rewritten).to.be.true;
+            expect(body.testId).to.equal(12358);
           });
-          expect(body.rewritten).to.be.true;
-          expect(body.testId).to.equal(12358);
         });
-      });
-    }
-  );
+      }
+    );
 
-  describes.integration(
-    'configRewriter without publisher config',
-    {
-      body: `<amp-analytics type="_fake_">
+    describes.integration(
+      'configRewriter without publisher config',
+      {
+        body: `<amp-analytics type="_fake_">
           <script type="application/json">
           {
             "vars": {
@@ -773,34 +819,38 @@ describe('amp-analytics', function () {
           }
           </script>
       </amp-analytics>`,
-      extensions: ['amp-analytics'],
-    },
-    (env) => {
-      beforeEach(() => {
-        const browser = new BrowserController(env.win);
-        return browser.waitForElementLayout('amp-analytics');
-      });
+        extensions: ['amp-analytics'],
+      },
+      (env) => {
+        beforeEach(() => {
+          const browser = new BrowserController(env.win);
+          return browser.waitForElementLayout('amp-analytics');
+        });
+
+        afterEach(() => {
+          return RequestBank.tearDown();
+        });
 
-      it('should use config from server', () => {
-        return RequestBank.withdraw().then((req) => {
-          // The config here should have been rewritten by the /analytics/rewriter
-          // endpoint. This logic is located in the file
-          // /build-system/routes/analytics.js
-          const body = JSON.parse(req.body);
-          expect(body.reqBody.configRewriter.vars).to.deep.equal({
-            title2: 'AMP TEST',
+        it('should use config from server', () => {
+          return RequestBank.withdraw().then((req) => {
+            // The config here should have been rewritten by the /analytics/rewriter
+            // endpoint. This logic is located in the file
+            // /build-system/routes/analytics.js
+            const body = JSON.parse(req.body);
+            expect(body.reqBody.configRewriter.vars).to.deep.equal({
+              title2: 'AMP TEST',
+            });
+            expect(body.rewritten).to.be.true;
+            expect(body.testId).to.equal(12358);
           });
-          expect(body.rewritten).to.be.true;
-          expect(body.testId).to.equal(12358);
         });
-      });
-    }
-  );
+      }
+    );
 
-  describes.integration(
-    'type=googleanalytics',
-    {
-      body: `
+    describes.integration(
+      'type=googleanalytics',
+      {
+        body: `
       <script>
         // initialize with a valid _ga cookie
         document.cookie='_ga=GA1.2.1427830804.1524174812';
@@ -829,63 +879,66 @@ describe('amp-analytics', function () {
         }
         </script>
       </amp-analytics>`,
-      extensions: ['amp-analytics'],
-    },
-    (env) => {
-      beforeEach(() => {
-        const browser = new BrowserController(env.win);
-        return browser.waitForElementLayout('amp-analytics');
-      });
+        extensions: ['amp-analytics'],
+      },
+      (env) => {
+        beforeEach(() => {
+          const browser = new BrowserController(env.win);
+          return browser.waitForElementLayout('amp-analytics');
+        });
 
-      afterEach(() => {
-        // clean up written _ga cookie
-        document.cookie = '_ga=;expires=' + new Date(0).toUTCString();
-      });
+        afterEach(() => {
+          // clean up written _ga cookie
+          document.cookie = '_ga=;expires=' + new Date(0).toUTCString();
+          return RequestBank.tearDown();
+        });
 
-      it('should send request', () => {
-        return RequestBank.withdraw().then((req) => {
-          expect(req.url).to.match(/^\/r\/collect\?/);
-          const queries = parseQueryString(req.url.substr('/r/collect'.length));
-          // see vendors/googleanalytics.js "pageview" request for config
-          expect(queries).to.include({
-            _v: 'a1',
-            _r: '1',
-            v: '1',
-            cid: '1427830804.1524174812',
-            dr: '',
-            ds: 'AMP',
-            dt: 'AMP TEST',
-            tid: 'UA-67833617-1',
-            t: 'pageview',
+        it('should send request', () => {
+          return RequestBank.withdraw().then((req) => {
+            expect(req.url).to.match(/^\/r\/collect\?/);
+            const queries = parseQueryString(
+              req.url.substr('/r/collect'.length)
+            );
+            // see vendors/googleanalytics.js "pageview" request for config
+            expect(queries).to.include({
+              _v: 'a1',
+              _r: '1',
+              v: '1',
+              cid: '1427830804.1524174812',
+              dr: '',
+              ds: 'AMP',
+              dt: 'AMP TEST',
+              tid: 'UA-67833617-1',
+              t: 'pageview',
+            });
+            const isNumber = /^\d+$/;
+            const isRandomNumber = /^0\.\d+$/;
+            expect(queries['dl']).to.contain('/amp4test/compose-doc?'); // ${documentLocation}
+            expect(queries['_s']).to.match(isNumber); // ${requestCount}
+            expect(queries['_utmht']).to.match(isNumber); // ${timestamp}
+            expect(queries['sr']).to.match(/^\d+x\d+$/); // ${screenWidth}x${screenHeight}
+            expect(queries['sd']).to.match(isNumber); // ${screenColorDepth}
+            expect(queries['ul']).to.be.ok; // ${browserLanguage}
+            expect(queries['de']).to.be.ok; // ${documentCharset}
+            expect(queries['jid']).to.match(isRandomNumber); // ${random}
+            expect(queries['a']).to.match(isNumber); // ${pageViewId}
+            expect(queries['z']).to.match(isRandomNumber); // ${random}
           });
-          const isNumber = /^\d+$/;
-          const isRandomNumber = /^0\.\d+$/;
-          expect(queries['dl']).to.contain('/amp4test/compose-doc?'); // ${documentLocation}
-          expect(queries['_s']).to.match(isNumber); // ${requestCount}
-          expect(queries['_utmht']).to.match(isNumber); // ${timestamp}
-          expect(queries['sr']).to.match(/^\d+x\d+$/); // ${screenWidth}x${screenHeight}
-          expect(queries['sd']).to.match(isNumber); // ${screenColorDepth}
-          expect(queries['ul']).to.be.ok; // ${browserLanguage}
-          expect(queries['de']).to.be.ok; // ${documentCharset}
-          expect(queries['jid']).to.match(isRandomNumber); // ${random}
-          expect(queries['a']).to.match(isNumber); // ${pageViewId}
-          expect(queries['z']).to.match(isRandomNumber); // ${random}
         });
-      });
-    }
-  );
-
-  // TODO: Find source of test failure on edge.
-  describe
-    .configure()
-    .skipEdge()
-    .run('amp-analytics:shadow mode', function () {
-      describes.integration(
-        'basic pageview',
-        {
-          // TODO(ccordry): Figure out how to write cookie in shadow case, so that
-          // we can verify CLIENT_ID() is reading the right value.
-          body: `
+      }
+    );
+
+    // TODO: Find source of test failure on edge.
+    describe
+      .configure()
+      .skipEdge()
+      .run('amp-analytics:shadow mode', function () {
+        describes.integration(
+          'basic pageview',
+          {
+            // TODO(ccordry): Figure out how to write cookie in shadow case, so that
+            // we can verify CLIENT_ID() is reading the right value.
+            body: `
         <!-- put amp-analytics > 3 viewports away from viewport -->
         <div style="height: 400vh"></div>
         <amp-analytics>
@@ -911,20 +964,20 @@ describe('amp-analytics', function () {
           }
           </script>
         </amp-analytics>`,
-          extensions: ['amp-analytics'],
-          ampdoc: 'shadow',
-        },
-        () => {
-          it('should send request', () => {
-            return RequestBank.withdraw().then((req) => {
-              expect(req.url).to.match(/\/?a=2&b=Shadow%20Viewer&cid=amp-.*/);
-              expect(
-                req.headers.referer,
-                'should keep referrer if no referrerpolicy specified'
-              ).to.be.ok;
+            extensions: ['amp-analytics'],
+            ampdoc: 'shadow',
+          },
+          () => {
+            it('should send request', () => {
+              return RequestBank.withdraw().then((req) => {
+                expect(req.url).to.match(/\/?a=2&b=Shadow%20Viewer&cid=amp-.*/);
+                expect(
+                  req.headers.referer,
+                  'should keep referrer if no referrerpolicy specified'
+                ).to.be.ok;
+              });
             });
-          });
-        }
-      );
-    });
-});
+          }
+        );
+      });
+  });
diff --git a/test/integration/test-amp-bind.js b/test/integration/test-amp-bind.js
index 045fa3fb5610b..d6727cde6f597 100644
--- a/test/integration/test-amp-bind.js
+++ b/test/integration/test-amp-bind.js
@@ -16,14 +16,14 @@
 import {BrowserController} from '../../testing/test-helper';
 import {poll as classicPoll} from '../../testing/iframe';
 
-const TIMEOUT = 15000;
+const TIMEOUT = 10000;
 
 // Skip Edge, which throws "Permission denied" errors when inspecting
 // element properties in the testing iframe (Edge 17, Windows 10).
-describe
+describes.sandboxed
   .configure()
   .skipEdge()
-  .run('amp-bind', function () {
+  .run('amp-bind', {}, function () {
     this.timeout(TIMEOUT);
 
     // Helper that sets the poll timeout.
@@ -34,13 +34,11 @@ describe
     describes.integration(
       'basic',
       {
-        /* eslint-disable max-len */
         body: `
       <button on="tap:AMP.setState({t: 'after_text'})" id="changeText"></button>
       <button on="tap:AMP.setState({c: 'after_class'})" id="changeClass"></button>
       <p class="before_class" [class]="c" [text]="t">before_text</p>
     `,
-        /* eslint-enable max-len */
         extensions: ['amp-bind'],
       },
       (env) => {
@@ -129,7 +127,6 @@ describe
     describes.integration(
       '+ forms',
       {
-        /* eslint-disable max-len */
         body: `
       <input type="range" min=0 max=100 value=0 on="change:AMP.setState({rangeChange: event})">
       <p id="range" [text]="rangeChange.min + ' <= ' + rangeChange.value + ' <= ' + rangeChange.max">before_range</p>
@@ -141,7 +138,6 @@ describe
       <input type="radio" on="change:AMP.setState({radioChange: event})">
       <p id="radio" [text]="'checked: ' + radioChange.checked" id="radioText">before_radio</p>
     `,
-        /* eslint-enable max-len */
         extensions: ['amp-bind'],
       },
       (env) => {
@@ -202,7 +198,6 @@ describe
     describes.integration(
       '+ amp-carousel',
       {
-        /* eslint-disable max-len */
         body: `
       <button on="tap:AMP.setState({slide: 1})" id="goToSlideOne"></button>
       <p [text]="slide">0</p>
@@ -212,7 +207,6 @@ describe
         <amp-img src="http://example.com/bar.jpg" width=10 height=10></amp-img>
       </amp-carousel>
     `,
-        /* eslint-enable max-len */
         extensions: ['amp-bind', 'amp-carousel'],
       },
       (env) => {
@@ -262,7 +256,6 @@ describe
       }
     );
 
-    /* eslint-disable max-len */
     const list = `
     <amp-state id="foo">
       <script type="application/json">
@@ -276,7 +269,6 @@ describe
       <p [text]="foo.bar"></p>
     </template>
   `;
-    /* eslint-enable max-len */
 
     const listTests = (env) => {
       let doc;
@@ -331,7 +323,6 @@ describe
     describes.integration(
       '+ amp-selector',
       {
-        /* eslint-disable max-len */
         body: `
       <button on="tap:AMP.setState({selected: 2})"></button>
       <p [text]="selected"></p>
@@ -341,7 +332,6 @@ describe
         <amp-img src="/2.jpg" width=10 height=10 option=2></amp-img>
       </amp-selector>
     `,
-        /* eslint-enable max-len */
         extensions: ['amp-bind', 'amp-selector'],
       },
       (env) => {
diff --git a/test/integration/test-amp-carousel.js b/test/integration/test-amp-carousel.js
index 5f5c626004bbd..f19b87fa9c6d9 100644
--- a/test/integration/test-amp-carousel.js
+++ b/test/integration/test-amp-carousel.js
@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
+import {CommonSignals} from '../../src/core/constants/common-signals';
 import {whenUpgradedToCustomElement} from '../../src/dom';
 
-const t = describe.configure().ifChrome(); // TODO(#19647): Flaky on Chrome 71 on Windows 10.
+const t = describes.sandboxed.configure().ifChrome();
 
-t.run('amp-carousel', function () {
+t.run('amp-carousel', {}, function () {
   this.timeout(10000);
   let document;
 
@@ -32,9 +33,9 @@ t.run('amp-carousel', function () {
 
   function waitForCarouselLayout() {
     const carousel = document.querySelector('amp-carousel');
-    return whenUpgradedToCustomElement(carousel).then(() => {
-      return carousel.whenBuilt();
-    });
+    return whenUpgradedToCustomElement(carousel).then(() =>
+      carousel.signals().whenSignal(CommonSignals.LOAD_START)
+    );
   }
 
   describes.integration(
@@ -82,8 +83,8 @@ t.run('amp-carousel', function () {
           const nextBtn = amp.querySelector('.amp-carousel-button-next');
           expect(prevBtn).to.not.be.null;
           expect(nextBtn).to.not.be.null;
-          expect(prevBtn).to.be.hidden;
-          expect(nextBtn).to.be.hidden;
+          expect(prevBtn.classList.contains('amp-disabled')).to.be.true;
+          expect(nextBtn.classList.contains('amp-disabled')).to.be.true;
         }
       );
     }
@@ -132,7 +133,7 @@ t.run('amp-carousel', function () {
         }
       );
 
-      it.skip(
+      it(
         'should have the next button visible when amp-mode-mouse ' +
           'class is not on body & `controls` specified',
         () => {
@@ -144,26 +145,26 @@ t.run('amp-carousel', function () {
           expect(document.body).to.not.have.class('amp-mode-mouse');
           expect(prevBtn).to.not.be.null;
           expect(nextBtn).to.not.be.null;
-          expect(prevBtn).to.be.hidden;
+          expect(prevBtn.classList.contains('amp-disabled')).to.be.true;
           expect(nextBtn).to.be.visible;
         }
       );
 
-      it.skip('should only have the next button enabled when on first item', () => {
+      it('should only have the next button enabled when on first item', () => {
         document.body.classList.add('amp-mode-mouse');
         const amp = document.querySelector('#carousel-1');
         const prevBtn = amp.querySelector('.amp-carousel-button-prev');
         const nextBtn = amp.querySelector('.amp-carousel-button-next');
         expect(prevBtn).to.not.be.null;
         expect(nextBtn).to.not.be.null;
-        expect(prevBtn).to.be.hidden;
+        expect(prevBtn.classList.contains('amp-disabled')).to.be.true;
         expect(nextBtn).to.be.visible;
       });
 
-      it.skip('should not be able to go past the first or last item', () => {
+      it('should not be able to go past the first or last item', async () => {
         document.body.classList.add('amp-mode-mouse');
         const amp = document.querySelector('#carousel-1');
-        const impl = amp.implementation_;
+        const impl = await amp.getImpl();
         const prevBtn = amp.querySelector('.amp-carousel-button-prev');
         const nextBtn = amp.querySelector('.amp-carousel-button-next');
         expect(prevBtn).to.have.class('amp-disabled');
@@ -180,10 +181,10 @@ t.run('amp-carousel', function () {
         expect(prevBtn).to.have.class('amp-disabled');
       });
 
-      it.skip('should only have the prev button enabled when on last item', () => {
+      it('should only have the prev button enabled when on last item', async () => {
         document.body.classList.add('amp-mode-mouse');
         const amp = document.querySelector('#carousel-1');
-        const impl = amp.implementation_;
+        const impl = await amp.getImpl();
         const prevBtn = amp.querySelector('.amp-carousel-button-prev');
         const nextBtn = amp.querySelector('.amp-carousel-button-next');
         expect(prevBtn).to.have.class('amp-disabled');
@@ -248,8 +249,8 @@ t.run('amp-carousel', function () {
           const nextBtn = amp.querySelector('.amp-carousel-button-next');
           expect(prevBtn).to.not.be.null;
           expect(nextBtn).to.not.be.null;
-          expect(prevBtn).to.be.hidden;
-          expect(nextBtn).to.be.hidden;
+          expect(prevBtn.classList.contains('amp-disabled')).to.be.true;
+          expect(nextBtn.classList.contains('amp-disabled')).to.be.true;
         }
       );
     }
@@ -310,7 +311,7 @@ t.run('amp-carousel', function () {
           expect(document.body).to.not.have.class('amp-mode-mouse');
           expect(prevBtn).to.not.be.null;
           expect(nextBtn).to.not.be.null;
-          expect(prevBtn).to.be.hidden;
+          expect(prevBtn.classList.contains('amp-disabled')).to.be.true;
           expect(nextBtn).to.be.visible;
         }
       );
@@ -322,14 +323,14 @@ t.run('amp-carousel', function () {
         const nextBtn = amp.querySelector('.amp-carousel-button-next');
         expect(prevBtn).to.not.be.null;
         expect(nextBtn).to.not.be.null;
-        expect(prevBtn).to.be.hidden;
+        expect(prevBtn.classList.contains('amp-disabled')).to.be.true;
         expect(nextBtn).to.be.visible;
       });
 
-      it.skip('should only have the prev button enabled when on last item', () => {
+      it('should only have the prev button enabled when on last item', async () => {
         document.body.classList.add('amp-mode-mouse');
         const amp = document.querySelector('#carousel-1');
-        const impl = amp.implementation_;
+        const impl = await amp.getImpl();
         const prevBtn = amp.querySelector('.amp-carousel-button-prev');
         const nextBtn = amp.querySelector('.amp-carousel-button-next');
         expect(prevBtn).to.have.class('amp-disabled');
diff --git a/test/integration/test-amp-img.js b/test/integration/test-amp-img.js
index b360fa9e8a804..ff4939b1cb66f 100644
--- a/test/integration/test-amp-img.js
+++ b/test/integration/test-amp-img.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../src/amp-events';
+import {AmpEvents} from '../../src/core/constants/amp-events';
 import {createCustomEvent} from '../../src/event-helper';
 import {
   createFixtureIframe,
@@ -22,135 +22,141 @@ import {
   poll,
 } from '../../testing/iframe.js';
 
-describe
+describes.sandboxed
   .configure()
   .enableIe()
-  .retryOnSaucelabs()
-  .run('Rendering of amp-img', () => {
+  .run('Rendering of amp-img', {}, () => {
     const timeout = window.ampTestRuntimeConfig.mochaTimeout;
 
     let fixture;
-    beforeEach(() => {
-      return createFixtureIframe('test/fixtures/images.html', 500).then((f) => {
-        fixture = f;
-      });
+    beforeEach(async () => {
+      fixture = await createFixtureIframe('test/fixtures/images.html', 500);
     });
 
-    it('should show the body in image test', () => {
-      return expectBodyToBecomeVisible(fixture.win, timeout);
+    it('should show the body in image test', async () => {
+      await expectBodyToBecomeVisible(fixture.win, timeout);
     });
 
-    it('should be present', () => {
+    it('should be present', async () => {
       expect(fixture.doc.querySelectorAll('amp-img')).to.have.length(16);
       // 5 image visible in 500 pixel height. Note that there will be no load
       // event for the inabox image.
-      return fixture.awaitEvent(AmpEvents.LOAD_START, 3).then(function () {
-        expect(fixture.doc.querySelectorAll('amp-img img[src]')).to.have.length(
-          4
-        );
-      });
+      await fixture.awaitEvent(AmpEvents.LOAD_START, 3);
+      expect(fixture.doc.querySelectorAll('amp-img img[src]')).to.have.length(
+        4
+      );
     });
 
-    it('should resize and load more elements', () => {
+    it('should resize and load more elements', async () => {
       // Note that there will be no load event for the inabox image.
-      const p = fixture.awaitEvent(AmpEvents.LOAD_START, 11).then(function () {
-        expect(fixture.doc.querySelectorAll('amp-img img[src]')).to.have.length(
-          12
-        );
-        fixture.iframe.height = 2000;
-        fixture.win.dispatchEvent(
-          createCustomEvent(fixture.win, 'resize', null)
-        );
-        return fixture.awaitEvent(AmpEvents.LOAD_START, 13).then(function () {
-          expect(
-            fixture.doc.querySelectorAll('amp-img img[src]')
-          ).to.have.length(14);
-        });
-      });
       fixture.iframe.height = 1500;
       fixture.win.dispatchEvent(createCustomEvent(fixture.win, 'resize', null));
-      return p;
+      await fixture.awaitEvent(AmpEvents.LOAD_START, 11);
+      expect(fixture.doc.querySelectorAll('amp-img img[src]')).to.have.length(
+        12
+      );
+
+      fixture.iframe.height = 2000;
+      fixture.win.dispatchEvent(createCustomEvent(fixture.win, 'resize', null));
+      await fixture.awaitEvent(AmpEvents.LOAD_START, 13);
+      expect(fixture.doc.querySelectorAll('amp-img img[src]')).to.have.length(
+        14
+      );
     });
 
-    it('should respect media queries', () => {
-      return fixture
-        .awaitEvent(AmpEvents.LOAD_START, 3)
-        .then(() => {
-          return new Promise((res) => setTimeout(res, 1));
-        })
-        .then(function () {
-          const smallScreen = fixture.doc.getElementById('img3');
-          const largeScreen = fixture.doc.getElementById('img3_1');
-          expect(smallScreen.className).to.not.match(
-            /i-amphtml-hidden-by-media-query/
-          );
-          expect(largeScreen.className).to.match(
-            /i-amphtml-hidden-by-media-query/
-          );
-          expect(smallScreen.offsetHeight).to.not.equal(0);
-          expect(largeScreen.offsetHeight).to.equal(0);
-          fixture.iframe.width = 600;
-          fixture.win.dispatchEvent(
-            createCustomEvent(fixture.win, 'resize', null)
-          );
-          return fixture
-            .awaitEvent(AmpEvents.LOAD_START, 4)
-            .then(() => fixture.awaitEvent(AmpEvents.UNLOAD, 1))
-            .then(function () {
-              expect(smallScreen.className).to.match(
-                /i-amphtml-hidden-by-media-query/
-              );
-              expect(largeScreen.className).to.not.match(
-                /i-amphtml-hidden-by-media-query/
-              );
-              expect(smallScreen.offsetHeight).to.equal(0);
-              expect(largeScreen.offsetHeight).to.not.equal(0);
-            });
-        });
+    it('should respect media queries', async () => {
+      await fixture.awaitEvent(AmpEvents.LOAD_START, 3);
+      await new Promise((res) => setTimeout(res, 1));
+
+      const smallScreen = fixture.doc.getElementById('img3');
+      const largeScreen = fixture.doc.getElementById('img3_1');
+
+      expect(smallScreen.className).to.not.match(
+        /i-amphtml-hidden-by-media-query/
+      );
+      expect(largeScreen.className).to.match(/i-amphtml-hidden-by-media-query/);
+      expect(smallScreen.offsetHeight).to.not.equal(0);
+      expect(largeScreen.offsetHeight).to.equal(0);
+      expect(smallScreen.querySelector('img')).to.exist;
+      expect(largeScreen.querySelector('img')).to.not.exist;
+
+      fixture.iframe.width = 600;
+      fixture.win.dispatchEvent(createCustomEvent(fixture.win, 'resize', null));
+
+      await largeScreen.whenLoaded();
+
+      expect(smallScreen.className).to.match(/i-amphtml-hidden-by-media-query/);
+      expect(largeScreen.className).to.not.match(
+        /i-amphtml-hidden-by-media-query/
+      );
+      expect(smallScreen.offsetHeight).to.equal(0);
+      expect(largeScreen.offsetHeight).to.not.equal(0);
+      expect(largeScreen.querySelector('img')).to.exist;
     });
 
-    it('should not load image if already present (inabox)', () => {
-      return fixture.awaitEvent(AmpEvents.LOAD_START, 3).then(function () {
-        const ampImage = fixture.doc.getElementById('img8');
-        expect(ampImage).is.ok;
-        expect(ampImage.querySelectorAll('img').length).to.equal(1);
-      });
+    it('should not load image if already present (inabox)', async () => {
+      await fixture.awaitEvent(AmpEvents.LOAD_START, 3);
+
+      const ampImage = fixture.doc.getElementById('img8');
+      expect(ampImage).is.ok;
+      expect(ampImage.querySelectorAll('img').length).to.equal(1);
     });
   });
 
 // Move IE tests into its own `describe()`
-// so that Mocha picks up its 'ifIe()' configuration
-describe
+// so that we can load a different fixture.
+describes.sandboxed
   .configure()
-  .ifIe()
-  .run('Rendering of amp-img - Internet Explorer edge cases', () => {
+  .enableIe()
+  .run('Rendering of amp-img', {}, () => {
     let fixture;
-    beforeEach(() => {
-      return createFixtureIframe('test/fixtures/images-ie.html', 500).then(
-        (f) => {
-          fixture = f;
-        }
-      );
+    beforeEach(async () => {
+      fixture = await createFixtureIframe('test/fixtures/images-ie.html', 500);
     });
 
     // IE doesn't support the srcset attribute, so if the developer
     // provides a srcset but no src to amp-img, it should set the src
     // attribute to the first entry in srcset.
-    it('should guarantee src if srcset is not supported', () => {
-      const imageLoadedPromise = waitForImageToLoad(fixture.doc);
-      return imageLoadedPromise.then(() => {
-        const ampImg = fixture.doc.getElementById('img4');
-        const img = ampImg.querySelector('img[amp-img-id="img4"]');
-        expect(img.getAttribute('src')).to.equal('/examples/img/hero@1x.jpg');
+    describe
+      .configure()
+      .ifIe()
+      .run('srcset support - Internet Explorer edge cases', () => {
+        it('should guarantee src if srcset is not supported', async () => {
+          await waitForImageToLoad(fixture.doc, 'img[amp-img-id="srcset"]');
+
+          const img = fixture.doc.querySelector(
+            '#srcset img[amp-img-id="srcset"]'
+          );
+          expect(img.getAttribute('src')).to.equal('/examples/img/hero@1x.jpg');
+        });
+      });
+
+    // IE can't scale SVG images, so intrinsic sizers use a PNG instead.
+    describe
+      .configure()
+      .enableIe()
+      .run('intrinsic layout', () => {
+        it('renders intrinsic layout with correct size', async () => {
+          await waitForImageToLoad(fixture.doc, 'img[amp-img-id="intrinsic"]');
+
+          const ampImg = fixture.doc.getElementById('intrinsic');
+          const width = parseInt(ampImg.getAttribute('width'), 10);
+          const height = parseInt(ampImg.getAttribute('height'), 10);
+          const bounds = ampImg.getBoundingClientRect();
+
+          expect(bounds.width / bounds.height).to.be.closeTo(
+            width / height,
+            0.001
+          );
+        });
       });
-    });
   });
 
-function waitForImageToLoad(document) {
+function waitForImageToLoad(document, selector) {
   return poll(
-    'wait for img4 to load',
+    'wait for img to load',
     () => {
-      const img = document.querySelector('img[amp-img-id="img4"]');
+      const img = document.querySelector(selector);
       return img !== null;
     },
     () => {},
diff --git a/test/integration/test-amp-pixel.js b/test/integration/test-amp-pixel.js
index 1e5c437600f78..ce8058def14f8 100644
--- a/test/integration/test-amp-pixel.js
+++ b/test/integration/test-amp-pixel.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import {AmpPixel} from '../../builtins/amp-pixel';
+import {AmpPixel} from '../../builtins/amp-pixel/amp-pixel';
 import {BrowserController, RequestBank} from '../../testing/test-helper';
 import {createElementWithAttributes} from '../../src/dom';
 
-describe.configure().run('amp-pixel', function () {
+describes.sandboxed('amp-pixel', {}, function () {
   describes.integration(
     'amp-pixel macro integration test',
     {
@@ -34,6 +34,10 @@ describe.configure().run('amp-pixel', function () {
         return browser.waitForElementBuild('amp-pixel');
       });
 
+      afterEach(() => {
+        return RequestBank.tearDown();
+      });
+
       it('should expand the TITLE macro', () => {
         return RequestBank.withdraw().then((req) => {
           expect(req.url).to.equal('/hello-world?title=AMP%20TEST&qp=123');
@@ -57,6 +61,10 @@ describe.configure().run('amp-pixel', function () {
         return browser.waitForElementBuild('amp-pixel');
       });
 
+      afterEach(() => {
+        return RequestBank.tearDown();
+      });
+
       it('should ignore leading spaces and resolve correctly', () => {
         return RequestBank.withdraw().then((req) => {
           expect(req.url).to.equal('/?nested=1.1234');
@@ -77,6 +85,10 @@ describe.configure().run('amp-pixel', function () {
         return browser.waitForElementBuild('amp-pixel');
       });
 
+      afterEach(() => {
+        return RequestBank.tearDown();
+      });
+
       it('should keep referrer if no referrerpolicy specified', () => {
         return RequestBank.withdraw().then((req) => {
           expect(req.url).to.equal('/');
@@ -98,6 +110,10 @@ describe.configure().run('amp-pixel', function () {
         return browser.waitForElementBuild('amp-pixel');
       });
 
+      afterEach(() => {
+        return RequestBank.tearDown();
+      });
+
       it('should remove referrer if referrerpolicy=no-referrer', () => {
         return RequestBank.withdraw().then((req) => {
           expect(req.url).to.equal('/');
diff --git a/test/integration/test-amp-recaptcha-input.js b/test/integration/test-amp-recaptcha-input.js
index 8e58b8c65429d..c8e4eea7c4634 100644
--- a/test/integration/test-amp-recaptcha-input.js
+++ b/test/integration/test-amp-recaptcha-input.js
@@ -15,19 +15,19 @@
  */
 
 import {BrowserController, RequestBank} from '../../testing/test-helper';
-import {Deferred} from '../../src/utils/promise';
+import {Deferred} from '../../src/core/data-structures/promise';
 import {poll} from '../../testing/iframe';
 
-// TODO(torch2424, #20541): These tests fail on firefox and Edge.
-describe
+// TODO(wg-components): These tests are broken on Firefox (as of v77). They
+// also fail on Safari.
+describes.sandboxed
   .configure()
   .skipFirefox()
-  .skipEdge()
-  .run('amp-recaptcha-input', function () {
+  .skipSafari()
+  .run('amp-recaptcha-input', {}, function () {
     describes.integration(
       'with form and amp-mustache',
       {
-        /* eslint-disable max-len */
         body: `
     <form
       method="POST"
@@ -112,7 +112,6 @@ describe
         display: block;
       }
     `,
-        /* eslint-enable max-len */
         extensions: ['amp-recaptcha-input', 'amp-form', 'amp-mustache:0.2'],
         experiments: ['amp-recaptcha-input'],
       },
@@ -183,7 +182,6 @@ describe
     describes.integration(
       recaptchaRequestId.GET,
       {
-        /* eslint-disable max-len */
         body: `
     <form
       method="GET"
@@ -205,7 +203,6 @@ describe
       </fieldset>
     </form>
   `,
-        /* eslint-enable max-len */
         extensions: ['amp-recaptcha-input', 'amp-form'],
         experiments: ['amp-recaptcha-input'],
       },
@@ -219,6 +216,10 @@ describe
           return browserController.waitForElementLayout('amp-recaptcha-input');
         });
 
+        afterEach(() => {
+          return RequestBank.tearDown();
+        });
+
         it('should make a request with correct parameters', function () {
           return submitForm(doc).then(() => {
             return RequestBank.withdraw(recaptchaRequestId.GET).then((req) => {
@@ -234,7 +235,6 @@ describe
     describes.integration(
       recaptchaRequestId.POST,
       {
-        /* eslint-disable max-len */
         body: `
     <form
       method="POST"
@@ -256,7 +256,6 @@ describe
       </fieldset>
     </form>
   `,
-        /* eslint-enable max-len */
         extensions: ['amp-recaptcha-input', 'amp-form'],
         experiments: ['amp-recaptcha-input'],
       },
@@ -270,6 +269,10 @@ describe
           return browserController.waitForElementLayout('amp-recaptcha-input');
         });
 
+        afterEach(() => {
+          return RequestBank.tearDown();
+        });
+
         it('should make a request with correct parameters', function () {
           return submitForm(doc).then(() => {
             return RequestBank.withdraw(recaptchaRequestId.POST).then((req) => {
diff --git a/test/integration/test-amp-skimlinks.js b/test/integration/test-amp-skimlinks.js
index 5c90e926d6e1c..cdc8d1bacb2a3 100644
--- a/test/integration/test-amp-skimlinks.js
+++ b/test/integration/test-amp-skimlinks.js
@@ -16,7 +16,7 @@
 
 import {BrowserController, RequestBank} from '../../testing/test-helper';
 import {PLATFORM_NAME} from '../../extensions/amp-skimlinks/0.1/constants';
-import {parseQueryString} from '../../src/url';
+import {parseQueryString} from '../../src/core/types/string/url';
 
 // Create fake test urls to replace skimlinks API urls.
 // RequestBank allow us to check if an API request has been made
@@ -42,7 +42,7 @@ function clickLinkAndNavigate_(doc, selector) {
 }
 
 // TODO(@slocka) Disabled due to #22154, re-enable
-describe.skip('amp-skimlinks', function () {
+describes.sandboxed.skip('amp-skimlinks', {}, function () {
   const setupBasic = {
     extensions: ['amp-skimlinks'],
     body: `
@@ -79,6 +79,10 @@ describe.skip('amp-skimlinks', function () {
       return browser.waitForElementBuild('amp-skimlinks');
     });
 
+    afterEach(() => {
+      return RequestBank.tearDown();
+    });
+
     it('Should send the page impression tracking request', () => {
       return RequestBank.withdraw('pageTrackingUrl').then((req) => {
         const regex = /^\/track\.php\?data=([^&]*)&?.*$/;
diff --git a/test/integration/test-amp-story-analytics.js b/test/integration/test-amp-story-analytics.js
index 05f5c2c4c78a9..4b62c315acc03 100644
--- a/test/integration/test-amp-story-analytics.js
+++ b/test/integration/test-amp-story-analytics.js
@@ -15,11 +15,11 @@
  */
 
 import {BrowserController, RequestBank} from '../../testing/test-helper';
-import {parseQueryString} from '../../src/url';
+import {parseQueryString} from '../../src/core/types/string/url';
 
-const config = describe.configure().skipEdge().skipSafari();
+const config = describes.sandboxed.configure().skipEdge().skipSafari();
 
-config.run('amp-story analytics', () => {
+config.run('amp-story analytics', {}, () => {
   const extensions = ['amp-story:1.0', 'amp-analytics', 'amp-social-share'];
   describes.integration(
     'amp-story analytics',
@@ -40,10 +40,9 @@ config.run('amp-story analytics', () => {
           <p id="right-2">Click me</p>
         </amp-story-grid-layer>
       </amp-story-page>
-      <amp-story-bookend layout="nodisplay">
+      <amp-story-social-share layout="nodisplay">
         <script type="application/json">
         {
-          "bookendVersion": "v1.0",
           "shareProviders": [
             {
               "provider": "facebook",
@@ -54,32 +53,10 @@ config.run('amp-story analytics', () => {
               "provider": "twitter",
               "data-param-url": "https://twitter.com/larocheposayfr?lang=fr"
             }
-          ],
-          "components": [
-            {
-              "type": "heading",
-              "text": "Learn more about our 0% formulation charter"
-            },
-            {
-              "type": "cta-link",
-              "links": [
-                {
-                  "text": "Click here",
-                  "url": "https://www.laroche-posay.fr/produits-soins/anthelios/peaux-sensibles-ou-allergiques-au-soleil-r93.aspx"
-                }
-              ]
-            },
-            {
-              "type": "landscape",
-              "title": "TRAPPIST-1 Planets May Still Be Wet Enough for Life",
-              "url": "http://example.com/article.html",
-              "category": "astronomy",
-              "image": "http://placehold.it/360x760"
-            }
           ]
         }
         </script>
-      </amp-story-bookend>
+      </amp-story-social-share>
     </amp-story>
     <amp-analytics>
       <script type="application/json">
@@ -95,20 +72,6 @@ config.run('amp-story analytics', () => {
               "pageVisible": "\${storyPageId}"
             }
           },
-          "trackBookendEnter": {
-            "on": "story-bookend-enter",
-            "request": "endpoint",
-            "extraUrlParams": {
-              "bookendEnter": true
-            }
-          },
-          "trackBookendExit": {
-            "on": "story-bookend-exit",
-            "request": "endpoint",
-            "extraUrlParams": {
-              "bookendExit": true
-            }
-          },
           "trackFocusedState": {
             "on": "story-focus",
             "request": "endpoint",
@@ -120,8 +83,6 @@ config.run('amp-story analytics', () => {
         },
         "extraUrlParams": {
           "pageVisible": "\${storyPageId}",
-          "bookendEnter": false,
-          "bookendExit": false,
           "muted": false,
           "unmuted": false,
           "focusedLink": "\${linkId}"
@@ -155,6 +116,10 @@ config.run('amp-story analytics', () => {
         return browser.waitForElementLayout('amp-story');
       });
 
+      afterEach(() => {
+        return RequestBank.tearDown();
+      });
+
       it('should send analytics event when landing on a page', async () => {
         await browser.waitForElementLayout('#page-1[active]');
 
@@ -174,35 +139,6 @@ config.run('amp-story analytics', () => {
         expect(q['pageVisible']).to.equal('page-2');
       });
 
-      it('should send analytics event when entering bookend', async () => {
-        await browser.waitForElementLayout('#page-1[active]');
-        await clickAndWait('#right-1');
-
-        await browser.waitForElementLayout('#page-2[active]');
-        await clickAndWait('#right-2');
-
-        await browser.waitForElementLayout('amp-story-bookend');
-
-        const req = await RequestBank.withdraw();
-        const q = parseQueryString(req.url.substr(1));
-        expect(q['bookendEnter']).to.equal('true');
-      });
-
-      it('should send analytics event when exiting bookend', async () => {
-        await browser.waitForElementLayout('#page-1[active]');
-        await clickAndWait('#right-1');
-
-        await browser.waitForElementLayout('#page-2[active]');
-        await clickAndWait('#right-2');
-
-        await browser.waitForElementLayout('amp-story-bookend');
-        await clickAndWait('amp-story-bookend');
-
-        const req = await RequestBank.withdraw();
-        const q = parseQueryString(req.url.substr(1));
-        expect(q['bookendExit']).to.equal('true');
-      });
-
       it('should send same event twice when repeat option is absent in storyspec', async () => {
         await browser.waitForElementLayout('#page-1[active]');
         await clickAndWait('#right-1');
@@ -296,6 +232,10 @@ config.run('amp-story analytics', () => {
         return browser.waitForElementLayout('amp-story');
       });
 
+      afterEach(() => {
+        return RequestBank.tearDown();
+      });
+
       it('should not send same analytics event twice when repeat option is present', async () => {
         await browser.waitForElementLayout('#page-1[active]');
         browser.click('#page-1');
diff --git a/test/integration/test-amphtml-ads.js b/test/integration/test-amphtml-ads.js
index 0fed096292b46..3d06093f04418 100644
--- a/test/integration/test-amphtml-ads.js
+++ b/test/integration/test-amphtml-ads.js
@@ -16,10 +16,13 @@
 
 import {RequestBank} from '../../testing/test-helper';
 import {maybeSwitchToCompiledJs} from '../../testing/iframe';
-import {parseQueryString} from '../../src/url';
+import {parseQueryString} from '../../src/core/types/string/url';
 import {xhrServiceForTesting} from '../../src/service/xhr-impl';
 
-describe('AMPHTML ad on AMP Page', () => {
+// TODO(wg-monetization, #29112): Unskip on Safari.
+const t = describes.sandboxed.configure().skipSafari();
+
+t.run('AMPHTML ad on AMP Page', {}, () => {
   describes.integration(
     'ATF',
     {
@@ -38,6 +41,10 @@ describe('AMPHTML ad on AMP Page', () => {
       `,
     },
     () => {
+      afterEach(() => {
+        return RequestBank.tearDown();
+      });
+
       it('should layout amp-img, amp-pixel, amp-analytics', () => {
         // Open http://ads.localhost:9876/amp4test/a4a/12345 to see ad content
         return testAmpComponents();
@@ -65,7 +72,11 @@ describe('AMPHTML ad on AMP Page', () => {
       `,
     },
     (env) => {
-      // TODO(#24657): Flaky on Travis.
+      afterEach(() => {
+        return RequestBank.tearDown();
+      });
+
+      // TODO(#24657): Flaky on CI.
       it.skip('should layout amp-img, amp-pixel, amp-analytics', () => {
         // Open http://ads.localhost:9876/amp4test/a4a/12345 to see ad content
         return testAmpComponentsBTF(env.win);
@@ -74,7 +85,7 @@ describe('AMPHTML ad on AMP Page', () => {
   );
 });
 
-describe('AMPHTML ad on non-AMP page (inabox)', () => {
+t.run('AMPHTML ad on non-AMP page (inabox)', {}, () => {
   describes.integration(
     'ATF',
     {
@@ -96,6 +107,7 @@ describe('AMPHTML ad on non-AMP page (inabox)', () => {
 
       afterEach(() => {
         unregisterIframe(env.win, env.win.document.getElementById('inabox'));
+        return RequestBank.tearDown();
       });
     }
   );
@@ -130,6 +142,7 @@ describe('AMPHTML ad on non-AMP page (inabox)', () => {
 
       afterEach(() => {
         unregisterIframe(env.win, env.win.document.getElementById('inabox'));
+        return RequestBank.tearDown();
       });
     }
   );
@@ -157,6 +170,7 @@ describe('AMPHTML ad on non-AMP page (inabox)', () => {
 
       afterEach(() => {
         unregisterIframe(env.win, env.win.document.getElementById('inabox'));
+        return RequestBank.tearDown();
       });
     }
   );
@@ -187,6 +201,7 @@ describe('AMPHTML ad on non-AMP page (inabox)', () => {
       afterEach(() => {
         unregisterIframe(env.win, iframe);
         env.win.document.body.removeChild(iframe);
+        return RequestBank.tearDown();
       });
 
       it(
@@ -238,6 +253,7 @@ describe('AMPHTML ad on non-AMP page (inabox)', () => {
       afterEach(() => {
         unregisterIframe(env.win, iframe);
         env.win.document.body.removeChild(iframe);
+        return RequestBank.tearDown();
       });
 
       it.skip(
@@ -261,7 +277,8 @@ describe('AMPHTML ad on non-AMP page (inabox)', () => {
   );
 });
 
-describe('A more real AMPHTML image ad', () => {
+// TODO(wg-monetization, #24421): Make this test less flaky.
+t.skip('A more real AMPHTML image ad', () => {
   const {testServerPort} = window.ampTestRuntimeConfig;
 
   // The image ad as seen in examples/inabox.gpt.html,
@@ -317,12 +334,14 @@ describe('A more real AMPHTML image ad', () => {
         Array.prototype.push.apply(env.win.ampInaboxIframes, [iframe]);
       });
 
-      it('should properly render ad in a friendly iframe with viewability pings', () => {
+      // TODO(wg-monetization, #24421): Make this test less flaky.
+      it.skip('should properly render ad in a friendly iframe with viewability pings', () => {
         writeFriendlyFrame(doc, iframe, adBody);
         return testVisibilityPings(0, 1000);
       });
 
-      it('should properly render ad in a safe frame with viewability pings', () => {
+      // TODO(wg-monetization, #24421): Make this test less flaky.
+      it.skip('should properly render ad in a safe frame with viewability pings', () => {
         writeSafeFrame(doc, iframe, adBody);
         return testVisibilityPings(0, 1000);
       });
@@ -330,6 +349,7 @@ describe('A more real AMPHTML image ad', () => {
       afterEach(() => {
         unregisterIframe(env.win, iframe);
         doc.body.removeChild(iframe);
+        return RequestBank.tearDown();
       });
     }
   );
@@ -366,6 +386,7 @@ describe('A more real AMPHTML image ad', () => {
 
       afterEach(() => {
         doc.body.removeChild(iframe);
+        return RequestBank.tearDown();
       });
     }
   );
@@ -408,6 +429,7 @@ describe('A more real AMPHTML image ad', () => {
       afterEach(() => {
         unregisterIframe(env.win, iframe);
         doc.body.removeChild(iframe);
+        return RequestBank.tearDown();
       });
     }
   );
diff --git a/test/integration/test-boilerplates.js b/test/integration/test-boilerplates.js
index 6fbad1521eaff..b2ea5444852e7 100644
--- a/test/integration/test-boilerplates.js
+++ b/test/integration/test-boilerplates.js
@@ -23,28 +23,25 @@ import {isAnimationNone} from '../../testing/test-helper';
 
 const timeout = window.ampTestRuntimeConfig.mochaTimeout;
 
-describe
-  .configure()
-  .retryOnSaucelabs()
-  .run('Old Opacity Boilerplate', () => {
-    let fixture;
-    beforeEach(() => {
-      return createFixtureIframe(
-        'test/fixtures/boilerplate-old-opacity.html',
-        1000
-      ).then((f) => {
-        fixture = f;
-      });
+describes.sandboxed('Old Opacity Boilerplate', {}, () => {
+  let fixture;
+  beforeEach(() => {
+    return createFixtureIframe(
+      'test/fixtures/boilerplate-old-opacity.html',
+      1000
+    ).then((f) => {
+      fixture = f;
     });
+  });
 
-    it('should show the body when opacity boilerplate is used', () => {
-      return expectBodyToBecomeVisible(fixture.win, timeout).then(() => {
-        expect(getStyle(fixture.win.document.body, 'opacity')).to.equal('1');
-      });
+  it('should show the body when opacity boilerplate is used', () => {
+    return expectBodyToBecomeVisible(fixture.win, timeout).then(() => {
+      expect(getStyle(fixture.win.document.body, 'opacity')).to.equal('1');
     });
   });
+});
 
-describe.configure().run('New Visibility Boilerplate', () => {
+describes.sandboxed('New Visibility Boilerplate', {}, () => {
   let fixture;
   beforeEach(() => {
     return createFixtureIframe(
diff --git a/test/integration/test-configuration.js b/test/integration/test-configuration.js
index 65855ceaa538a..746f2541dd3a0 100644
--- a/test/integration/test-configuration.js
+++ b/test/integration/test-configuration.js
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../src/amp-events';
+import {AmpEvents} from '../../src/core/constants/amp-events';
 import {createFixtureIframe} from '../../testing/iframe.js';
 
-describe.configure().run('Configuration', function () {
+describes.sandboxed('Configuration', {}, function () {
   let fixture;
   beforeEach(() => {
     return createFixtureIframe('test/fixtures/configuration.html', 500).then(
diff --git a/test/integration/test-css.js b/test/integration/test-css.js
index b32f4af862bf4..9f80e08c10aca 100644
--- a/test/integration/test-css.js
+++ b/test/integration/test-css.js
@@ -14,33 +14,47 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../src/amp-events.js';
-import {createFixtureIframe} from '../../testing/iframe.js';
+import {AmpEvents} from '../../src/core/constants/amp-events.js';
+import {computedStyle} from '../../src/style.js';
+import {
+  createFixtureIframe,
+  expectBodyToBecomeVisible,
+} from '../../testing/iframe.js';
 
-describe
-  .configure()
-  .retryOnSaucelabs()
-  .run('CSS', () => {
-    it('should include height of [overflow] child in size before build', async () => {
-      const fixture = await createFixtureIframe(
-        'test/fixtures/overflow.html',
-        500
-      );
-      // Wait until layout.js CSS is applied.
-      await fixture.awaitEvent(AmpEvents.ATTACHED, 1);
-      const {doc} = fixture;
+describes.sandboxed.configure().run('CSS', {}, () => {
+  it('should include height of [overflow] child in size before build', async () => {
+    const fixture = await createFixtureIframe(
+      'test/fixtures/overflow.html',
+      500
+    );
+    // Wait until layout.js CSS is applied.
+    await fixture.awaitEvent(AmpEvents.ATTACHED, 1);
+    const {doc} = fixture;
 
-      const iframe = doc.querySelector('amp-iframe');
-      const iframeRect = iframe.getBoundingClientRect();
+    const iframe = doc.querySelector('amp-iframe');
+    const iframeRect = iframe.getBoundingClientRect();
 
-      const overflow = doc.querySelector('[overflow]');
-      const overflowRect = overflow.getBoundingClientRect();
+    const overflow = doc.querySelector('[overflow]');
+    const overflowRect = overflow.getBoundingClientRect();
 
-      expect(overflowRect.height).to.be.greaterThan(0);
-      // The amp-iframe has a 1:1 aspect ratio, and its height should be
-      // incremented by the overflow's height.
-      expect(
-        Math.abs(iframeRect.width + overflowRect.height) - iframeRect.height
-      ).to.lessThan(2);
-    });
+    expect(overflowRect.height).to.be.greaterThan(0);
+    // The amp-iframe has a 1:1 aspect ratio, and its height should be
+    // incremented by the overflow's height.
+    expect(Math.abs(iframeRect.width - iframeRect.height)).to.lessThan(2);
   });
+
+  it('should include height of [placeholder] child in size before build', async () => {
+    const fixture = await createFixtureIframe(
+      'test/fixtures/placeholder.html',
+      500
+    );
+    // Wait until layout.js CSS is applied.
+    await expectBodyToBecomeVisible(fixture.win);
+    const {doc} = fixture;
+
+    const placeholder = doc.querySelector('[placeholder]');
+    expect(computedStyle(fixture.win, placeholder).lineHeight).to.equal(
+      'normal'
+    );
+  });
+});
diff --git a/test/integration/test-double-loading.js b/test/integration/test-double-loading.js
new file mode 100644
index 0000000000000..7afd74d1b0b7f
--- /dev/null
+++ b/test/integration/test-double-loading.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {AmpEvents} from '../../src/core/constants/amp-events.js';
+import {createFixtureIframe} from '../../testing/iframe.js';
+
+function checkElementUpgrade(element) {
+  expect(element).to.have.class('i-amphtml-element');
+  expect(element).to.have.class('i-amphtml-layout-responsive');
+  expect(element).to.have.class('i-amphtml-layout-size-defined');
+  expect(element).to.not.have.class('amp-notbuilt');
+  expect(element).to.not.have.class('i-amphtml-notbuilt');
+  expect(element).to.not.have.class('amp-unresolved');
+  expect(element).to.not.have.class('i-amphtml-unresolved');
+}
+
+describes.sandboxed
+  .configure()
+  .ifModuleBuild()
+  .run('runtime', {}, () => {
+    it('should only execute module code', async () => {
+      const testExtension = 'amp-carousel';
+      const fixture = await createFixtureIframe(
+        'test/fixtures/doubleload-module.html',
+        500
+      );
+      expect(fixture.doc.querySelectorAll(testExtension)).to.have.length(1);
+      // Wait for a the LOAD_START event which is enough of a signal that the
+      // runtime has executed.
+      await fixture.awaitEvent(AmpEvents.LOAD_START, 1);
+      expect(fixture.doc.documentElement.getAttribute('esm')).to.equal('1');
+      checkElementUpgrade(fixture.doc.querySelector(testExtension));
+    });
+
+    it('should only execute nomodule code', async () => {
+      const testExtension = 'amp-carousel';
+      const fixture = await createFixtureIframe(
+        'test/fixtures/doubleload-nomodule.html',
+        500
+      );
+      expect(fixture.doc.querySelectorAll(testExtension)).to.have.length(1);
+      // Wait for a the LOAD_START event which is enough of a signal that the
+      // runtime has executed.
+      await fixture.awaitEvent(AmpEvents.LOAD_START, 1);
+      expect(fixture.doc.documentElement.getAttribute('esm')).to.equal('0');
+      checkElementUpgrade(fixture.doc.querySelector(testExtension));
+    });
+  });
diff --git a/test/integration/test-errors.js b/test/integration/test-errors.js
index b65c2e893978f..2ace5725cc786 100644
--- a/test/integration/test-errors.js
+++ b/test/integration/test-errors.js
@@ -25,7 +25,6 @@ const TIMEOUT = window.ampTestRuntimeConfig.mochaTimeout;
 
 const t = describe
   .configure()
-  .retryOnSaucelabs()
   // TODO(@cramforce): Find out why it does not work with obfuscated props.
   .skipIfPropertiesObfuscated();
 
diff --git a/test/integration/test-extensions-loading.js b/test/integration/test-extensions-loading.js
index 5e68ac8f122f3..2462f73fa24ca 100644
--- a/test/integration/test-extensions-loading.js
+++ b/test/integration/test-extensions-loading.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../src/amp-events';
+import {AmpEvents} from '../../src/core/constants/amp-events';
 import {createFixtureIframe} from '../../testing/iframe';
 
 // Checks if an amp element gets upgraded.
@@ -35,7 +35,7 @@ function checkElementUpgrade(element) {
  */
 function testLoadOrderFixture(fixtureName, testElements) {
   let fixture;
-  return createFixtureIframe(fixtureName)
+  return createFixtureIframe(fixtureName, 500)
     .then((f) => {
       fixture = f;
       for (let i = 0; i < testElements.length; i++) {
@@ -56,51 +56,60 @@ function testLoadOrderFixture(fixtureName, testElements) {
     });
 }
 
-const t = describe.configure().retryOnSaucelabs();
-t.run('test extensions loading in multiple orders', function () {
-  this.timeout(15000);
+describes.sandboxed(
+  'test extensions loading in multiple orders',
+  {},
+  function () {
+    this.timeout(15000);
 
-  it('one extension, extension loads first, all scripts in header', () => {
-    return testLoadOrderFixture(
-      'test/fixtures/script-load-extension-head-v0-head.html',
-      ['amp-fit-text']
-    );
-  });
+    it('one extension, extension loads first, all scripts in header', () => {
+      return testLoadOrderFixture(
+        'test/fixtures/script-load-extension-head-v0-head.html',
+        ['amp-fit-text']
+      );
+    });
 
-  it('one extension, v0 loads first, all scripts in header', () => {
-    return testLoadOrderFixture(
-      'test/fixtures/script-load-v0-head-extension-head.html',
-      ['amp-fit-text']
-    );
-  });
+    it('one extension, v0 loads first, all scripts in header', () => {
+      return testLoadOrderFixture(
+        'test/fixtures/script-load-v0-head-extension-head.html',
+        ['amp-fit-text']
+      );
+    });
 
-  it('one extension, extension loads first, all scripts in footer', () => {
-    return testLoadOrderFixture(
-      'test/fixtures/script-load-extension-footer-v0-footer.html',
-      ['amp-fit-text']
-    );
-  });
+    // TODO(#30528): skip this test as it doesn't make sense. The script
+    // tags are in the footer and our posthtml transforms break on the
+    // transformation of these invalid html files.
+    it.skip('one extension, extension loads first, all scripts in footer', () => {
+      return testLoadOrderFixture(
+        'test/fixtures/script-load-extension-footer-v0-footer.html',
+        ['amp-fit-text']
+      );
+    });
 
-  it('one extension, v0 loads first, all scripts in footer', () => {
-    return testLoadOrderFixture(
-      'test/fixtures/script-load-v0-footer-extension-footer.html',
-      ['amp-fit-text']
-    );
-  });
+    // TODO(#30528): skip this test as it doesn't make sense. The script
+    // tags are in the footer and our posthtml transforms break on the
+    // transformation of these invalid html files.
+    it.skip('one extension, v0 loads first, all scripts in footer', () => {
+      return testLoadOrderFixture(
+        'test/fixtures/script-load-v0-footer-extension-footer.html',
+        ['amp-fit-text']
+      );
+    });
 
-  it('one extension, v0 in header, extension script in footer', () => {
-    return testLoadOrderFixture(
-      'test/fixtures/script-load-v0-head-extension-footer.html',
-      ['amp-fit-text']
-    );
-  });
+    it('one extension, v0 in header, extension script in footer', () => {
+      return testLoadOrderFixture(
+        'test/fixtures/script-load-v0-head-extension-footer.html',
+        ['amp-fit-text']
+      );
+    });
 
-  // TODO(choumx); This test times out when run with the prod AMP config.
-  // See #11588.
-  it.skip('two extensions, one of extension scripts and v0 in header', () => {
-    return testLoadOrderFixture('test/fixtures/script-load-extensions.html', [
-      'amp-fit-text',
-      'amp-iframe',
-    ]);
-  });
-});
+    // TODO(choumx); This test times out when run with the prod AMP config.
+    // See #11588.
+    it.skip('two extensions, one of extension scripts and v0 in header', () => {
+      return testLoadOrderFixture('test/fixtures/script-load-extensions.html', [
+        'amp-fit-text',
+        'amp-iframe',
+      ]);
+    });
+  }
+);
diff --git a/test/integration/test-position-observer.js b/test/integration/test-position-observer.js
index b51726a92274e..d1aece798f5a2 100644
--- a/test/integration/test-position-observer.js
+++ b/test/integration/test-position-observer.js
@@ -18,8 +18,8 @@ import {poll} from '../../testing/iframe';
 
 //TODO(aghassemi,#10878): Run in all platforms.
 //TODO(aghasemi, #10877): in-a-box, FIE integration tests.
-const config = describe.configure().ifChrome();
-config.run('amp-position-observer', function () {
+const config = describes.sandboxed.configure().ifChrome();
+config.run('amp-position-observer', {}, function () {
   this.timeout(100000);
 
   const css = `
diff --git a/test/integration/test-released.js b/test/integration/test-released.js
index 4112b587cd727..8a21167f72f1f 100644
--- a/test/integration/test-released.js
+++ b/test/integration/test-released.js
@@ -20,22 +20,16 @@ import {
   pollForLayout,
 } from '../../testing/iframe.js';
 
-describe
-  .configure()
-  .retryOnSaucelabs()
-  .run('released components: ', function () {
-    runTest.call(this, false);
-  });
+describes.sandboxed('released components: ', {}, function () {
+  runTest.call(this, false);
+});
 
-describe
-  .configure()
-  .retryOnSaucelabs()
-  .run('released components with polyfills: ', function () {
-    runTest.call(this, true);
-  });
+describes.sandboxed('released components with polyfills: ', {}, function () {
+  runTest.call(this, true);
+});
 
 function runTest(shouldKillPolyfillableApis) {
-  describe.configure().run('Rendering of released components', function () {
+  describe('Rendering of released components', function () {
     this.timeout(5000);
     let fixture;
     beforeEach(() => {
@@ -49,10 +43,10 @@ function runTest(shouldKillPolyfillableApis) {
       });
     });
 
-    // There is really weird behavior when running this test in FF in
-    // saucelabs.
-    // It never renders the ad, even though it appears to work when looking
-    // at the rendering. The test passes when running locally in FF.
+    // There is really weird behavior when running this test in FF during
+    // cross-browser testing. It never renders the ad, even though it appears to
+    // work when looking at the rendering. The test passes when running locally
+    // in FF.
     // TODO(lannka, #3561): unmute the test.
     it.configure()
       .skipFirefox()
diff --git a/test/integration/test-shadow-dom-element.js b/test/integration/test-shadow-dom-element.js
new file mode 100644
index 0000000000000..2771c4e9aaa05
--- /dev/null
+++ b/test/integration/test-shadow-dom-element.js
@@ -0,0 +1,94 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {createFixtureIframe} from '../../testing/iframe';
+import {toggleExperiment} from '../../src/experiments';
+import {whenUpgradedToCustomElement} from '../../src/dom';
+
+describes.sandboxed
+  .configure()
+  .enableIe()
+  .run('Render a shadow-dom based element', {}, () => {
+    let fixture;
+
+    beforeEach(async () => {
+      fixture = await createFixtureIframe(
+        'test/fixtures/shadow-dom-element.html',
+        3000
+      );
+      toggleExperiment(fixture.win, 'bento', true, true);
+    });
+
+    it('should create shadow root', async () => {
+      const carousel = fixture.doc.querySelector('amp-base-carousel');
+      await whenUpgradedToCustomElement(carousel);
+      await carousel.whenBuilt();
+      await new Promise(setTimeout);
+
+      expect(carousel.shadowRoot).to.exist;
+
+      const slides = carousel.querySelectorAll('amp-img');
+      expect(slides).to.have.length(2);
+
+      const slots = carousel.shadowRoot
+        .querySelector('c')
+        .querySelectorAll('slot');
+      expect(slots).to.have.length(2);
+
+      expect(slides[0].assignedSlot).to.equal(slots[0]);
+      expect(slides[1].assignedSlot).to.equal(slots[1]);
+      expect(slots[0].assignedNodes()[0]).to.equal(slides[0]);
+      expect(slots[1].assignedNodes()[0]).to.equal(slides[1]);
+      expect(slots[0].getRootNode()).to.equal(carousel.shadowRoot);
+    });
+  });
+
+describes.sandboxed
+  .configure()
+  .run('Render a shadow-dom based element, force polyfill', {}, () => {
+    let fixture;
+
+    beforeEach(async () => {
+      fixture = await createFixtureIframe(
+        'test/fixtures/shadow-dom-element-polyfill.html',
+        3000
+      );
+      toggleExperiment(fixture.win, 'bento', true, true);
+    });
+
+    it('should create shadow root', async () => {
+      const carousel = fixture.doc.querySelector('amp-base-carousel');
+      await whenUpgradedToCustomElement(carousel);
+      await carousel.whenBuilt();
+      await new Promise(setTimeout);
+
+      expect(carousel.shadowRoot).to.exist;
+
+      const slides = carousel.querySelectorAll('amp-img');
+      expect(slides).to.have.length(2);
+
+      const slots = carousel.shadowRoot
+        .querySelector('c')
+        .querySelectorAll('slot');
+      expect(slots).to.have.length(2);
+
+      expect(slides[0].assignedSlot).to.equal(slots[0]);
+      expect(slides[1].assignedSlot).to.equal(slots[1]);
+      expect(slots[0].assignedNodes()[0]).to.equal(slides[0]);
+      expect(slots[1].assignedNodes()[0]).to.equal(slides[1]);
+      expect(slots[0].getRootNode()).to.equal(carousel.shadowRoot);
+    });
+  });
diff --git a/test/integration/test-toggle-display.js b/test/integration/test-toggle-display.js
index 86144d72c787c..ffa186e128d00 100644
--- a/test/integration/test-toggle-display.js
+++ b/test/integration/test-toggle-display.js
@@ -14,52 +14,52 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../../src/amp-events';
-import {createFixtureIframe} from '../../testing/iframe.js';
+import {BrowserController} from '../../testing/test-helper';
 import {setInitialDisplay, toggle} from '../../src/style';
 
-describe
+describes.integration
   .configure()
-  .retryOnSaucelabs()
-  .run('toggle display helper', () => {
-    let fixture;
-    let img;
+  .enableIe()
+  .run(
+    'toggle display helper',
+    {
+      body: '<amp-img src="/examples/img/hero@1x.jpg" width="289" height="216"></amp-img>',
+    },
+    (env) => {
+      let browser, doc;
+      let img;
 
-    beforeEach(() => {
-      return createFixtureIframe('test/fixtures/images.html', 500)
-        .then((f) => {
-          fixture = f;
+      beforeEach(async () => {
+        const {win} = env;
+        doc = win.document;
+        browser = new BrowserController(win);
 
-          // Wait for one <amp-img> element to load.
-          return fixture.awaitEvent(AmpEvents.LOAD_END, 1);
-        })
-        .then(() => {
-          img = fixture.doc.querySelector('amp-img');
-        });
-    });
+        await browser.waitForElementLayout('amp-img');
+        img = doc.querySelector('amp-img');
+      });
 
-    describes.repeated(
-      'toggle',
-      {
-        'regular': () => {},
-        'inline display style': (el) => {
-          setInitialDisplay(el, 'inline-block');
-        },
-        'stylesheet display style': () => {
-          const s = fixture.doc.createElement('style');
-          s.innerText = 'amp-img { display: inline-block !important; }';
-          fixture.doc.head.appendChild(s);
-        },
-      },
-      (name, setup) => {
-        it('toggle display', () => {
-          setup(img);
-
-          toggle(img, false);
-          expect(img).to.have.display('none');
-          toggle(img, true);
-          expect(img).to.not.have.display('none');
-        });
+      function expectToggleDisplay(el) {
+        toggle(el, false);
+        expect(el).to.have.display('none');
+        toggle(el, true);
+        expect(el).to.not.have.display('none');
       }
-    );
-  });
+
+      it('toggles regular display', () => {
+        expectToggleDisplay(img);
+      });
+
+      it('toggles initial display style', () => {
+        setInitialDisplay(img, 'inline-block');
+        expectToggleDisplay(img);
+      });
+
+      it('toggles stylesheet display style', () => {
+        const style = doc.createElement('style');
+        style.innerText = 'amp-img { display: inline-block !important; }';
+        doc.head.appendChild(style);
+
+        expectToggleDisplay(img);
+      });
+    }
+  );
diff --git a/test/integration/test-user-error-reporting.js b/test/integration/test-user-error-reporting.js
index 23641843f9106..37a3492898364 100644
--- a/test/integration/test-user-error-reporting.js
+++ b/test/integration/test-user-error-reporting.js
@@ -16,12 +16,10 @@
 
 import {BrowserController, RequestBank} from '../../testing/test-helper';
 
-const t = describe
-  .configure()
-  .skipSafari() // TODO(zhouyx, #11459): Unskip the test on safari.
-  .skipEdge();
+// TODO(zhouyx, #11459): Unskip the test on Safari and Firefox.
+const t = describes.sandboxed.configure().skipSafari().skipFirefox().skipEdge();
 
-t.run('user-error', function () {
+t.run('user-error', {}, function () {
   describes.integration(
     'user-error integration test',
     {
@@ -54,6 +52,10 @@ t.run('user-error', function () {
         return browser.waitForElementLayout('amp-analytics');
       });
 
+      afterEach(() => {
+        return RequestBank.tearDown();
+      });
+
       it('should ping correct host with amp-pixel user().assert err', () => {
         return RequestBank.withdraw();
       });
@@ -94,6 +96,10 @@ t.run('user-error', function () {
         return browser.waitForElementLayout('amp-analytics, amp-img');
       });
 
+      afterEach(() => {
+        return RequestBank.tearDown();
+      });
+
       it('should ping correct host with amp-img user().error err', () => {
         return RequestBank.withdraw();
       });
@@ -135,6 +141,10 @@ t.run('user-error', function () {
         return browser.waitForElementLayout('amp-analytics, amp-ad');
       });
 
+      afterEach(() => {
+        return RequestBank.tearDown();
+      });
+
       it('should ping correct host with 3p error message', () => {
         return RequestBank.withdraw();
       });
diff --git a/test/integration/test-video-manager.js b/test/integration/test-video-manager.js
index 7f198822ddaf9..97ef03c07ea9d 100644
--- a/test/integration/test-video-manager.js
+++ b/test/integration/test-video-manager.js
@@ -16,38 +16,44 @@
 
 import {PlayingStates, VideoEvents} from '../../src/video-interface';
 import {Services} from '../../src/services';
-import {VideoUtils} from '../../src/utils/video';
+import {dispatchCustomEvent} from '../../src/dom';
 import {installVideoManagerForDoc} from '../../src/service/video-manager-impl';
+import {
+  isAutoplaySupported,
+  resetIsAutoplaySupported,
+} from '../../src/utils/video';
 import {isLayoutSizeDefined} from '../../src/layout';
 import {listenOncePromise} from '../../src/event-helper';
 import {runVideoPlayerIntegrationTests} from './test-video-players-helper';
-import {toArray} from '../../src/types';
+import {toArray} from '../../src/core/types/array';
 
 // TODO(dvoytenko): These tests time out when run with the prod AMP config.
 // See #11588.
-describe.configure().skip('Fake Video PlayerIntegration Tests', () => {
-  // We run the video player integration tests on a fake video player as part
-  // of functional testing. Same tests run on real video players such as
-  // `amp-video` and `amp-youtube` as part of integration testing.
-  runVideoPlayerIntegrationTests((fixture) => {
-    fixture.win.AMP.push({
-      n: 'amp-test-fake-videoplayer',
-      f: function (AMP) {
-        AMP.registerElement(
-          'amp-test-fake-videoplayer',
-          createFakeVideoPlayerClass(fixture.win)
-        );
-      },
+describes.sandboxed
+  .configure()
+  .skip('Fake Video PlayerIntegration Tests', {}, (env) => {
+    // We run the video player integration tests on a fake video player as part
+    // of functional testing. Same tests run on real video players such as
+    // `amp-video` and `amp-youtube` as part of integration testing.
+    runVideoPlayerIntegrationTests(env, (fixture) => {
+      fixture.win.AMP.push({
+        n: 'amp-test-fake-videoplayer',
+        f: function (AMP) {
+          AMP.registerElement(
+            'amp-test-fake-videoplayer',
+            createFakeVideoPlayerClass(fixture.win)
+          );
+        },
+      });
+      return fixture.doc.createElement('amp-test-fake-videoplayer');
     });
-    return fixture.doc.createElement('amp-test-fake-videoplayer');
   });
-});
 
-describe
+describes.sandboxed
   .configure()
   .ifChrome()
-  .run('VideoManager', function () {
-    describes.fakeWin(
+  .run('VideoManager', {}, function () {
+    describes.realWin(
       'VideoManager',
       {
         amp: {
@@ -60,6 +66,26 @@ describe
         let video;
         let impl;
 
+        beforeEach(async () => {
+          klass = createFakeVideoPlayerClass(env.win);
+          video = env.createAmpElement('amp-test-fake-videoplayer', klass);
+          video.setAttribute('layout', 'fixed');
+          video.setAttribute('width', '400');
+          video.setAttribute('height', '300');
+          env.win.document.body.appendChild(video);
+          video.connectedCallback();
+          impl = await video.getImpl(false);
+          installVideoManagerForDoc(env.ampdoc);
+          videoManager = Services.videoManagerForDoc(env.ampdoc);
+        });
+
+        it('should not duplicate entries if laid out twice', async () => {
+          videoManager.register(impl);
+          expect(videoManager.entries_).to.have.length(1);
+          videoManager.register(impl);
+          expect(videoManager.entries_).to.have.length(1);
+        });
+
         it('should receive i-amphtml-video-interface class when registered', () => {
           const expectedClass = 'i-amphtml-video-interface';
           expect(toArray(video.classList)).to.not.contain(expectedClass);
@@ -203,8 +229,8 @@ describe
               expect(videoManager.userInteracted(impl)).to.be.true;
             });
 
-            video.dispatchCustomEvent(VideoEvents.AD_START);
-            video.dispatchCustomEvent(VideoEvents.UNMUTED);
+            dispatchCustomEvent(video, VideoEvents.AD_START);
+            dispatchCustomEvent(video, VideoEvents.UNMUTED);
           });
         });
 
@@ -253,27 +279,16 @@ describe
             expect(curState).to.equal(PlayingStates.PLAYING_MANUAL);
           });
         });
-
-        beforeEach(() => {
-          klass = createFakeVideoPlayerClass(env.win);
-          video = env.createAmpElement('amp-test-fake-videoplayer', klass);
-          env.win.document.body.appendChild(video);
-          impl = video.implementation_;
-          installVideoManagerForDoc(env.ampdoc);
-          videoManager = Services.videoManagerForDoc(env.ampdoc);
-        });
       }
     );
   });
 
-describe
+describes.sandboxed
   .configure()
   .ifChrome()
-  .run('Autoplay support', () => {
-    const supportsAutoplay = VideoUtils.isAutoplaySupported; // for line length
+  .run('Autoplay support', {}, (env) => {
     let win;
     let video;
-    let isLite;
     let createElementSpy;
     let setAttributeSpy;
     let playStub;
@@ -301,25 +316,21 @@ describe
         },
       };
 
-      win = {
-        document: doc,
-      };
-
-      isLite = false;
+      win = {document: doc};
 
-      createElementSpy = window.sandbox.spy(doc, 'createElement');
-      setAttributeSpy = window.sandbox.spy(video, 'setAttribute');
-      playStub = window.sandbox.stub(video, 'play');
+      createElementSpy = env.sandbox.spy(doc, 'createElement');
+      setAttributeSpy = env.sandbox.spy(video, 'setAttribute');
+      playStub = env.sandbox.stub(video, 'play');
 
-      VideoUtils.resetIsAutoplaySupported();
+      resetIsAutoplaySupported(win);
     });
 
     afterEach(() => {
-      VideoUtils.resetIsAutoplaySupported();
+      resetIsAutoplaySupported(win);
     });
 
     it('should create an invisible test video element', () => {
-      return supportsAutoplay(win, isLite).then(() => {
+      return isAutoplaySupported(win).then(() => {
         expect(video.style.position).to.equal('fixed');
         expect(video.style.top).to.equal('0');
         expect(video.style.width).to.equal('0');
@@ -345,7 +356,7 @@ describe
 
     it('should return false if `paused` is true after `play()` call', () => {
       video.paused = true;
-      return supportsAutoplay(win, isLite).then((supportsAutoplay) => {
+      return isAutoplaySupported(win).then((supportsAutoplay) => {
         expect(supportsAutoplay).to.be.false;
         expect(playStub.called).to.be.true;
         expect(createElementSpy.called).to.be.true;
@@ -354,7 +365,7 @@ describe
 
     it('should return true if `paused` is false after `play()` call', () => {
       video.paused = false;
-      return supportsAutoplay(win, isLite).then((supportsAutoplay) => {
+      return isAutoplaySupported(win).then((supportsAutoplay) => {
         expect(supportsAutoplay).to.be.true;
         expect(playStub.called).to.be.true;
         expect(createElementSpy.called).to.be.true;
@@ -364,7 +375,7 @@ describe
     it('should suppress errors if detection play call throws', () => {
       playStub.throws();
       video.paused = true;
-      return supportsAutoplay(win, isLite).then((supportsAutoplay) => {
+      return isAutoplaySupported(win).then((supportsAutoplay) => {
         expect(supportsAutoplay).to.be.false;
         expect(playStub.called).to.be.true;
         expect(createElementSpy.called).to.be.true;
@@ -377,19 +388,12 @@ describe
       );
       playStub.returns(p);
       video.paused = true;
-      return supportsAutoplay(win, isLite).then((supportsAutoplay) => {
+      return isAutoplaySupported(win).then((supportsAutoplay) => {
         expect(supportsAutoplay).to.be.false;
         expect(playStub.called).to.be.true;
         expect(createElementSpy.called).to.be.true;
       });
     });
-
-    it('should be false when in amp-lite mode', () => {
-      isLite = true;
-      return supportsAutoplay(win, isLite).then((supportsAutoplay) => {
-        expect(supportsAutoplay).to.be.false;
-      });
-    });
   });
 
 function createFakeVideoPlayerClass(win) {
@@ -435,15 +439,10 @@ function createFakeVideoPlayerClass(win) {
       this.element.appendChild(iframe);
 
       return Promise.resolve().then(() => {
-        this.element.dispatchCustomEvent(VideoEvents.LOAD);
+        dispatchCustomEvent(this.element, VideoEvents.LOAD);
       });
     }
 
-    /** @override */
-    viewportCallback(visible) {
-      this.element.dispatchCustomEvent(VideoEvents.VISIBILITY, {visible});
-    }
-
     // VideoInterface Implementation. See ../src/video-interface.VideoInterface
 
     /**
@@ -465,10 +464,10 @@ function createFakeVideoPlayerClass(win) {
      */
     play(unusedIsAutoplay) {
       Promise.resolve().then(() => {
-        this.element.dispatchCustomEvent(VideoEvents.PLAYING);
+        dispatchCustomEvent(this.element, VideoEvents.PLAYING);
         this.timeoutId_ = this.timer_.delay(() => {
           this.currentTime_ = this.duration_;
-          this.element.dispatchCustomEvent(VideoEvents.PAUSE);
+          dispatchCustomEvent(this.element, VideoEvents.PAUSE);
         }, this.length_);
       });
     }
@@ -478,7 +477,7 @@ function createFakeVideoPlayerClass(win) {
      */
     pause() {
       Promise.resolve().then(() => {
-        this.element.dispatchCustomEvent(VideoEvents.PAUSE);
+        dispatchCustomEvent(this.element, VideoEvents.PAUSE);
         this.timer_.cancel(this.timeoutId_);
       });
     }
@@ -488,7 +487,7 @@ function createFakeVideoPlayerClass(win) {
      */
     mute() {
       Promise.resolve().then(() => {
-        this.element.dispatchCustomEvent(VideoEvents.MUTED);
+        dispatchCustomEvent(this.element, VideoEvents.MUTED);
       });
     }
 
@@ -497,7 +496,7 @@ function createFakeVideoPlayerClass(win) {
      */
     unmute() {
       Promise.resolve().then(() => {
-        this.element.dispatchCustomEvent(VideoEvents.UNMUTED);
+        dispatchCustomEvent(this.element, VideoEvents.UNMUTED);
       });
     }
 
diff --git a/test/integration/test-video-players-helper.js b/test/integration/test-video-players-helper.js
index 1ce6bd69f63d5..1bcd43bec506e 100644
--- a/test/integration/test-video-players-helper.js
+++ b/test/integration/test-video-players-helper.js
@@ -20,38 +20,35 @@ import {
   VideoEvents,
   VideoInterface,
 } from '../../src/video-interface';
-import {VideoUtils} from '../../src/utils/video';
 import {
   createFixtureIframe,
   expectBodyToBecomeVisible,
   poll,
 } from '../../testing/iframe';
+import {detectIsAutoplaySupported} from '../../src/utils/video';
 import {getData, listenOncePromise} from '../../src/event-helper';
 import {removeElement} from '../../src/dom';
 import {toggleExperiment} from '../../src/experiments';
 
 function skipIfAutoplayUnsupported(win) {
-  VideoUtils.resetIsAutoplaySupported();
-
-  return VideoUtils.isAutoplaySupported(win, false).then((isSupported) => {
-    if (isSupported) {
-      return;
+  return detectIsAutoplaySupported(win).then((isSupported) => {
+    if (!isSupported) {
+      this.skipTest();
     }
-    this.skipTest();
   });
 }
 
 export function runVideoPlayerIntegrationTests(
+  env,
   createVideoElementFunc,
-  opt_experiment
+  opt_experiment,
+  timeout = 2000
 ) {
   /**
    * @const {number} Height of the fixture iframe
    */
   const FRAME_HEIGHT = 1000;
 
-  const TIMEOUT = 20000;
-
   let fixtureGlobal;
   let videoGlobal;
 
@@ -67,13 +64,15 @@ export function runVideoPlayerIntegrationTests(
     .skipIfPropertiesObfuscated()
     .ifChrome()
     .run('Video Interface', function () {
-      this.timeout(TIMEOUT);
+      this.timeout(timeout);
 
       it('should override the video interface methods', function () {
-        this.timeout(TIMEOUT);
-        return getVideoPlayer({outsideView: false, autoplay: true}).then(
-          (r) => {
-            const impl = r.video.implementation_;
+        this.timeout(timeout);
+        return getVideoPlayer({outsideView: false, autoplay: true})
+          .then((r) => {
+            return r.video.getImpl(false);
+          })
+          .then((impl) => {
             const methods = Object.getOwnPropertyNames(
               Object.getPrototypeOf(new VideoInterface())
             );
@@ -83,8 +82,7 @@ export function runVideoPlayerIntegrationTests(
               const methodName = methods[i];
               expect(impl[methodName]).to.exist;
             }
-          }
-        );
+          });
       });
 
       afterEach(cleanUp);
@@ -94,7 +92,7 @@ export function runVideoPlayerIntegrationTests(
     .configure()
     .ifChrome()
     .run('Actions', function () {
-      this.timeout(TIMEOUT);
+      this.timeout(timeout);
 
       // TODO(cvializ, #14827): Fails on Chrome 66.
       it.skip('should support mute, play, pause, unmute actions', function () {
@@ -138,7 +136,7 @@ export function runVideoPlayerIntegrationTests(
       // would be considered a user-initiated action, but no way to do that in a
       // scripted test environment.
       before(function () {
-        this.timeout(TIMEOUT);
+        this.timeout(timeout);
         return skipIfAutoplayUnsupported.call(this, window);
       });
 
@@ -150,7 +148,7 @@ export function runVideoPlayerIntegrationTests(
     .skipIfPropertiesObfuscated()
     .ifChrome()
     .run('Analytics Triggers', function () {
-      this.timeout(TIMEOUT);
+      this.timeout(timeout);
       let video;
 
       // TODO(cvializ, #14827): Fails on Chrome 66.
@@ -161,10 +159,11 @@ export function runVideoPlayerIntegrationTests(
           outsideView: true,
           autoplay: false,
         })
-          .then((r) => {
+          .then(async (r) => {
             video = r.video;
             playButton = createButton(r, 'play');
-            const viewport = video.implementation_.getViewport();
+            const impl = await video.getImpl(false);
+            const viewport = impl.getViewport();
             const promise = listenOncePromise(video, VideoEvents.LOAD);
             viewport.scrollIntoView(video);
             return promise;
@@ -228,9 +227,10 @@ export function runVideoPlayerIntegrationTests(
           outsideView: true,
           autoplay: true,
         })
-          .then((r) => {
+          .then(async (r) => {
             video = r.video;
-            viewport = video.implementation_.getViewport();
+            const impl = await video.getImpl(false);
+            viewport = impl.getViewport();
             // scroll to the bottom, make video fully visible
             viewport.scrollIntoView(video);
             return listenOncePromise(video, VideoEvents.PLAYING);
@@ -321,7 +321,7 @@ export function runVideoPlayerIntegrationTests(
           autoplay: true,
         })
           .then((r) => {
-            timer = Services.timerFor(r.video.implementation_.win);
+            timer = Services.timerFor(r.video.ownerDocument.defaultView);
             video = r.video;
             pauseButton = createButton(r, 'pause');
             playButton = createButton(r, 'play');
@@ -333,8 +333,9 @@ export function runVideoPlayerIntegrationTests(
               timer.promise(2000),
             ]);
           })
-          .then(() => {
-            const viewport = video.implementation_.getViewport();
+          .then(async () => {
+            const impl = await video.getImpl(false);
+            const viewport = impl.getViewport();
             viewport.scrollIntoView(video);
             return listenOncePromise(
               video,
@@ -371,7 +372,7 @@ export function runVideoPlayerIntegrationTests(
 
   const t = describe.configure().ifChrome().skipIfPropertiesObfuscated();
   t.run('Autoplay', function () {
-    this.timeout(TIMEOUT);
+    this.timeout(timeout);
 
     describe('play/pause', () => {
       it('should play when in view port initially', () => {
@@ -382,9 +383,9 @@ export function runVideoPlayerIntegrationTests(
         );
       });
 
-      it('should not play when not in view port initially', () => {
+      it('should not play when initially outside viewport', () => {
         return getVideoPlayer({outsideView: true, autoplay: true}).then((r) => {
-          const timer = Services.timerFor(r.video.implementation_.win);
+          const timer = Services.timerFor(r.video.ownerDocument.defaultView);
           const p = listenOncePromise(r.video, VideoEvents.PLAYING).then(() => {
             return Promise.reject('should not have autoplayed');
           });
@@ -399,9 +400,10 @@ export function runVideoPlayerIntegrationTests(
         let video;
         let viewport;
         return getVideoPlayer({outsideView: true, autoplay: true})
-          .then((r) => {
+          .then(async (r) => {
             video = r.video;
-            viewport = video.implementation_.getViewport();
+            const impl = await video.getImpl(false);
+            viewport = impl.getViewport();
 
             // scroll to the bottom, make video fully visible
             const p = listenOncePromise(video, VideoEvents.PLAYING);
@@ -430,13 +432,14 @@ export function runVideoPlayerIntegrationTests(
               return !!video.querySelector('i-amphtml-video-eq');
             });
           })
-          .then(() => {
+          .then(async () => {
             icon = video.querySelector('i-amphtml-video-eq');
             expect(icon).to.exist;
             // animation should be paused since video is not played yet
             expect(isAnimationPaused(icon)).to.be.true;
 
-            viewport = video.implementation_.getViewport();
+            const impl = await video.getImpl(false);
+            viewport = impl.getViewport();
             // scroll to the bottom, make video fully visible so it autoplays
             viewport.scrollIntoView(video);
 
@@ -464,14 +467,14 @@ export function runVideoPlayerIntegrationTests(
               return iconElement.classList.contains('amp-video-eq-play');
             },
             undefined,
-            TIMEOUT
+            timeout
           );
         }
       });
     });
 
     before(function () {
-      this.timeout(TIMEOUT);
+      this.timeout(timeout);
       // Skip autoplay tests if browser does not support autoplay.
       return skipIfAutoplayUnsupported.call(this, window);
     });
@@ -483,7 +486,7 @@ export function runVideoPlayerIntegrationTests(
     .configure()
     .ifChrome()
     .run('Rotate-to-fullscreen', function () {
-      this.timeout(TIMEOUT);
+      this.timeout(timeout);
 
       let video;
       let playButton;
@@ -498,7 +501,7 @@ export function runVideoPlayerIntegrationTests(
             autoFullscreen = manager.getAutoFullscreenManagerForTesting_();
           }
           if (!isInLandscapeStub) {
-            isInLandscapeStub = window.sandbox.stub(
+            isInLandscapeStub = env.sandbox.stub(
               autoFullscreen,
               'isInLandscape'
             );
@@ -511,12 +514,13 @@ export function runVideoPlayerIntegrationTests(
           outsideView: true,
           'rotate-to-fullscreen': true,
         })
-          .then((r) => {
+          .then(async (r) => {
             video = r.video;
             playButton = createButton(r, 'play');
             mockLandscape(false);
             const whenLoaded = listenOncePromise(video, VideoEvents.LOAD);
-            const viewport = video.implementation_.getViewport();
+            const impl = await video.getImpl(false);
+            const viewport = impl.getViewport();
             viewport.scrollIntoView(video);
             return whenLoaded;
           })
@@ -525,11 +529,9 @@ export function runVideoPlayerIntegrationTests(
             playButton.click();
             return whenPlaying;
           })
-          .then(() => {
-            const enter = window.sandbox.stub(
-              video.implementation_,
-              'fullscreenEnter'
-            );
+          .then(async () => {
+            const impl = await video.getImpl(false);
+            const enter = env.sandbox.stub(impl, 'fullscreenEnter');
             mockLandscape(true);
             autoFullscreen.onRotation_();
             return poll('fullscreen enter', () => enter.called);
@@ -543,7 +545,7 @@ export function runVideoPlayerIntegrationTests(
       // would be considered a user-initiated action, but no way to do that in a
       // scripted test environment.
       before(function () {
-        this.timeout(TIMEOUT);
+        this.timeout(timeout);
         // Skip autoplay tests if browser does not support autoplay.
         return skipIfAutoplayUnsupported.call(this, window);
       });
@@ -551,7 +553,7 @@ export function runVideoPlayerIntegrationTests(
 
   function getVideoPlayer(options) {
     options = options || {};
-    const top = options.outsideView ? '100vh' : '0';
+    const top = options.outsideView ? '126vh' : '0';
     let fixture;
     return createFixtureIframe('test/fixtures/video-players.html', FRAME_HEIGHT)
       .then((f) => {
@@ -559,7 +561,7 @@ export function runVideoPlayerIntegrationTests(
         if (opt_experiment) {
           toggleExperiment(fixture.win, opt_experiment, true);
         }
-        return expectBodyToBecomeVisible(fixture.win, TIMEOUT);
+        return expectBodyToBecomeVisible(fixture.win, timeout);
       })
       .then(() => {
         const video = createVideoElementFunc(fixture);
@@ -581,7 +583,6 @@ export function runVideoPlayerIntegrationTests(
         video.setAttribute('layout', 'fixed');
         video.setAttribute('width', '300px');
         video.setAttribute('height', '50vh');
-        video.setAttribute('i-amphtml-integration-test', '');
 
         video.style.position = 'absolute';
         video.style.top = top;
@@ -600,8 +601,6 @@ export function runVideoPlayerIntegrationTests(
   }
 
   function cleanUp() {
-    VideoUtils.resetIsAutoplaySupported();
-
     try {
       if (fixtureGlobal) {
         if (opt_experiment) {
diff --git a/test/integration/test-video-players.js b/test/integration/test-video-players.js
index 1c9d136677be2..10ac6e13c228d 100644
--- a/test/integration/test-video-players.js
+++ b/test/integration/test-video-players.js
@@ -28,109 +28,152 @@
 
 import {runVideoPlayerIntegrationTests} from './test-video-players-helper';
 
-//TODO(aghassemi,#7822): We have to skip iOS for video tests since videos
-// can't play SauceLab's iOS simulator. We need real devices instead.
-
-describe
+// TODO(aghassemi,#7822): Videos may not be playable on an iOS simulator.
+describes.sandboxed
   .configure()
   .skipIos()
-  .run('amp-video', () => {
-    runVideoPlayerIntegrationTests((fixture) => {
+  .run('amp-video', {}, (env) => {
+    runVideoPlayerIntegrationTests(env, (fixture) => {
       const video = fixture.doc.createElement('amp-video');
-      video.setAttribute('src', '/examples/av/ForBiggerJoyrides.mp4');
+      video.setAttribute('src', '/examples/av/ForBiggerJoyrides-tiny.mp4');
       return video;
     });
   });
 
 // TODO(alanorozco): unskip
-describe.skip('amp-video-iframe', () => {
-  runVideoPlayerIntegrationTests((fixture) => {
-    const video = fixture.doc.createElement('amp-video-iframe');
-    video.setAttribute('src', '/examples/amp-video-iframe/frame.html');
-    video.setAttribute('poster', 'https://placekitten.com/800/450');
-    return video;
-  });
+describes.sandboxed.skip('amp-video-iframe', {}, (env) => {
+  runVideoPlayerIntegrationTests(
+    env,
+    (fixture) => {
+      const video = fixture.doc.createElement('amp-video-iframe');
+      video.setAttribute('src', '/examples/amp-video-iframe/frame.html');
+      video.setAttribute('poster', 'https://placekitten.com/800/450');
+      return video;
+    },
+    null,
+    20000
+  );
 });
 
 //TODO(aghassemi, #9379): unskip
-describe.skip('amp-youtube', () => {
-  runVideoPlayerIntegrationTests((fixture) => {
-    const video = fixture.doc.createElement('amp-youtube');
-    video.setAttribute('data-videoid', 'O0QDEXZhow4');
-    return video;
-  });
+describes.sandboxed.skip('amp-youtube', {}, (env) => {
+  runVideoPlayerIntegrationTests(
+    env,
+    (fixture) => {
+      const video = fixture.doc.createElement('amp-youtube');
+      video.setAttribute('data-videoid', 'O0QDEXZhow4');
+      return video;
+    },
+    null,
+    20000
+  );
 });
 
 //TODO(aghassemi, #9379): unskip
-describe.skip('amp-dailymotion', () => {
-  runVideoPlayerIntegrationTests((fixture) => {
-    const video = fixture.doc.createElement('amp-dailymotion');
-    video.setAttribute('data-videoid', 'x3rdtfy');
-    return video;
-  });
+describes.sandboxed.skip('amp-dailymotion', {}, (env) => {
+  runVideoPlayerIntegrationTests(
+    env,
+    (fixture) => {
+      const video = fixture.doc.createElement('amp-dailymotion');
+      video.setAttribute('data-videoid', 'x3rdtfy');
+      return video;
+    },
+    null,
+    20000
+  );
 });
 
-describe.configure().skip('amp-3q-player', () => {
-  runVideoPlayerIntegrationTests((fixture) => {
-    const video = fixture.doc.createElement('amp-3q-player');
-    video.setAttribute('data-id', 'c8dbe7f4-7f7f-11e6-a407-0cc47a188158');
-    return video;
-  });
+describes.sandboxed.configure().skip('amp-3q-player', {}, (env) => {
+  runVideoPlayerIntegrationTests(
+    env,
+    (fixture) => {
+      const video = fixture.doc.createElement('amp-3q-player');
+      video.setAttribute('data-id', 'c8dbe7f4-7f7f-11e6-a407-0cc47a188158');
+      return video;
+    },
+    null,
+    20000
+  );
 });
 
 //TODO(aghassemi,#8264): Unskip when integration is fixed.
-describe.skip('amp-nexxtv-player', () => {
-  runVideoPlayerIntegrationTests((fixture) => {
-    const video = fixture.doc.createElement('amp-nexxtv-player');
-    video.setAttribute('data-mediaid', 'PTPFEC4U184674');
-    video.setAttribute('data-client', '583');
-    return video;
-  });
+describes.sandboxed.skip('amp-nexxtv-player', {}, (env) => {
+  runVideoPlayerIntegrationTests(
+    env,
+    (fixture) => {
+      const video = fixture.doc.createElement('amp-nexxtv-player');
+      video.setAttribute('data-mediaid', 'PTPFEC4U184674');
+      video.setAttribute('data-client', '583');
+      return video;
+    },
+    null,
+    20000
+  );
 });
 
 //TODO(aghassemi, #9379): unskip
-describe.skip('amp-ima-video', () => {
-  runVideoPlayerIntegrationTests((fixture) => {
-    const video = fixture.doc.createElement('amp-ima-video');
-    video.setAttribute('width', 640);
-    video.setAttribute('height', 360);
-    video.setAttribute('data-width', '640');
-    video.setAttribute('data-height', '360');
-    video.setAttribute('data-src', '/examples/av/ForBiggerJoyrides.mp4');
-    video.setAttribute(
-      'data-tag',
-      'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator='
-    );
-    video.setAttribute('data-poster', '/examples/img/ima-poster.png');
-    return video;
-  }, 'amp-ima-video');
+describes.sandboxed.skip('amp-ima-video', {}, (env) => {
+  runVideoPlayerIntegrationTests(
+    env,
+    (fixture) => {
+      const video = fixture.doc.createElement('amp-ima-video');
+      video.setAttribute('width', 640);
+      video.setAttribute('height', 360);
+      video.setAttribute('data-width', '640');
+      video.setAttribute('data-height', '360');
+      video.setAttribute('data-src', '/examples/av/ForBiggerJoyrides-tiny.mp4');
+      video.setAttribute(
+        'data-tag',
+        'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator='
+      );
+      video.setAttribute('data-poster', '/examples/img/ima-poster.png');
+      return video;
+    },
+    'amp-ima-video',
+    20000
+  );
 });
 
 //TODO(cvializ, #14833): unskip after brid player is fixed
-describe.skip('amp-brid-player', () => {
-  runVideoPlayerIntegrationTests((fixture) => {
-    const video = fixture.doc.createElement('amp-brid-player');
-    video.setAttribute('data-partner', '264');
-    video.setAttribute('data-player', '4144');
-    video.setAttribute('data-video', '13663');
-    return video;
-  });
+describes.sandboxed.skip('amp-brid-player', {}, (env) => {
+  runVideoPlayerIntegrationTests(
+    env,
+    (fixture) => {
+      const video = fixture.doc.createElement('amp-brid-player');
+      video.setAttribute('data-partner', '264');
+      video.setAttribute('data-player', '4144');
+      video.setAttribute('data-video', '13663');
+      return video;
+    },
+    null,
+    20000
+  );
 });
 
-describe.skip('amp-brightcove', () => {
-  runVideoPlayerIntegrationTests((fixture) => {
-    const video = fixture.doc.createElement('amp-brightcove');
-    video.setAttribute('data-account-id', '1290862519001');
-    video.setAttribute('data-player-id', 'SyIOV8yWM');
-    video.setAttribute('data-video-id', 'amp-test-video');
-    return video;
-  });
+describes.sandboxed.skip('amp-brightcove', {}, (env) => {
+  runVideoPlayerIntegrationTests(
+    env,
+    (fixture) => {
+      const video = fixture.doc.createElement('amp-brightcove');
+      video.setAttribute('data-account-id', '1290862519001');
+      video.setAttribute('data-player-id', 'SyIOV8yWM');
+      video.setAttribute('data-video-id', 'amp-test-video');
+      return video;
+    },
+    null,
+    20000
+  );
 });
 
-describe.skip('amp-delight-player', () => {
-  runVideoPlayerIntegrationTests((fixture) => {
-    const video = fixture.doc.createElement('amp-delight-player');
-    video.setAttribute('data-content-id', '-LLoCCZqWi18O73b6M0w');
-    return video;
-  });
+describes.sandboxed.skip('amp-delight-player', {}, (env) => {
+  runVideoPlayerIntegrationTests(
+    env,
+    (fixture) => {
+      const video = fixture.doc.createElement('amp-delight-player');
+      video.setAttribute('data-content-id', '-LLoCCZqWi18O73b6M0w');
+      return video;
+    },
+    null,
+    20000
+  );
 });
diff --git a/test/integration/test-visibility-states.js b/test/integration/test-visibility-states.js
index c2e6651fa794c..0dd5bb5647168 100644
--- a/test/integration/test-visibility-states.js
+++ b/test/integration/test-visibility-states.js
@@ -15,14 +15,17 @@
  */
 
 import {Services} from '../../src/services';
-import {VisibilityState} from '../../src/visibility-state';
+import {VisibilityState} from '../../src/core/constants/visibility-state';
 import {createCustomEvent} from '../../src/event-helper';
 import {getVendorJsPropertyName} from '../../src/style';
 import {whenUpgradedToCustomElement} from '../../src/dom';
 
-const t = describe.configure().skipIfPropertiesObfuscated().ifChrome();
+const t = describes.sandboxed
+  .configure()
+  .skipIfPropertiesObfuscated()
+  .ifChrome();
 
-t.run('Viewer Visibility State', () => {
+t.run('Viewer Visibility State', {}, () => {
   function noop() {}
 
   describes.integration(
@@ -42,7 +45,6 @@ t.run('Viewer Visibility State', () => {
       let resumeCallback;
       let docHidden;
       let docVisibilityState;
-      //let unselect;
       let prerenderAllowed;
 
       function visChangeEventName() {
@@ -82,9 +84,13 @@ t.run('Viewer Visibility State', () => {
 
       function waitForNextPass() {
         return new Promise((resolve) => {
-          shouldPass = true;
           notifyPass = resolve;
+          shouldPass = true;
           resources.schedulePass();
+        }).then(() => {
+          if (R1_IMG_DEFERRED_BUILD) {
+            return new Promise((resolve) => setTimeout(resolve, 20));
+          }
         });
       }
 
@@ -93,7 +99,6 @@ t.run('Viewer Visibility State', () => {
         unlayoutCallback.reset();
         pauseCallback.reset();
         resumeCallback.reset();
-        //unselect.reset();
       }
 
       beforeEach(() => {
@@ -120,48 +125,41 @@ t.run('Viewer Visibility State', () => {
             resources = Services.resourcesForDoc(win.document);
             doPass_ = resources.doPass;
             env.sandbox.stub(resources, 'doPass').callsFake(doPass);
-            // TODO(jridgewell@): Do not stub private method
-            //unselect = env.sandbox.stub(resources, 'unselectText_');
 
             const img = win.document.createElement('amp-img');
             img.setAttribute('width', 100);
             img.setAttribute('height', 100);
             img.setAttribute('layout', 'fixed');
-            win.document.body.appendChild(img);
+            // TODO(#31915): Cleanup when R1_IMG_DEFERRED_BUILD is complete.
+            if (!R1_IMG_DEFERRED_BUILD) {
+              win.document.body.appendChild(img);
+            }
 
             return whenUpgradedToCustomElement(img);
           })
           .then((img) => {
-            layoutCallback = env.sandbox.stub(
-              img.implementation_,
-              'layoutCallback'
-            );
-            unlayoutCallback = env.sandbox.stub(
-              img.implementation_,
-              'unlayoutCallback'
-            );
-            pauseCallback = env.sandbox.stub(
-              img.implementation_,
-              'pauseCallback'
-            );
-            resumeCallback = env.sandbox.stub(
-              img.implementation_,
-              'resumeCallback'
-            );
-            prerenderAllowed = env.sandbox.stub(
-              img.implementation_,
-              'prerenderAllowed'
-            );
-            env.sandbox
-              .stub(img.implementation_, 'isRelayoutNeeded')
-              .callsFake(() => true);
-            env.sandbox
-              .stub(img.implementation_, 'isLayoutSupported')
-              .callsFake(() => true);
+            prerenderAllowed = env.sandbox.stub(img, 'prerenderAllowed');
+            prerenderAllowed.returns(false);
+
+            if (R1_IMG_DEFERRED_BUILD) {
+              win.document.body.appendChild(img);
+            }
+            return img.getImpl(false);
+          })
+          .then((impl) => {
+            layoutCallback = R1_IMG_DEFERRED_BUILD
+              ? env.sandbox.stub(impl, 'mountCallback')
+              : env.sandbox.stub(impl, 'layoutCallback');
+            unlayoutCallback = R1_IMG_DEFERRED_BUILD
+              ? env.sandbox.stub(impl, 'unmountCallback')
+              : env.sandbox.stub(impl, 'unlayoutCallback');
+            pauseCallback = env.sandbox.stub(impl, 'pauseCallback');
+            resumeCallback = env.sandbox.stub(impl, 'resumeCallback');
+            env.sandbox.stub(impl, 'isRelayoutNeeded').callsFake(() => true);
+            env.sandbox.stub(impl, 'isLayoutSupported').callsFake(() => true);
 
             layoutCallback.returns(Promise.resolve());
             unlayoutCallback.returns(true);
-            prerenderAllowed.returns(false);
           });
       });
 
@@ -172,42 +170,43 @@ t.run('Viewer Visibility State', () => {
             setupSpys();
           });
 
-          it('does layout when going to PRERENDER', () => {
-            return waitForNextPass().then(() => {
-              expect(layoutCallback).to.have.been.called;
-              expect(unlayoutCallback).not.to.have.been.called;
-              expect(pauseCallback).not.to.have.been.called;
-              expect(resumeCallback).not.to.have.been.called;
+          it('does layout when going to PRERENDER', async () => {
+            viewer.receiveMessage('visibilitychange', {
+              state: VisibilityState.PAUSED,
             });
+            viewer.receiveMessage('visibilitychange', {
+              state: VisibilityState.PRERENDER,
+            });
+            await waitForNextPass();
+            expect(layoutCallback).to.have.been.called;
+            expect(unlayoutCallback).not.to.have.been.called;
+            expect(pauseCallback).not.to.have.been.called;
+            expect(resumeCallback).not.to.have.been.called;
           });
 
-          it('calls layout when going to VISIBLE', () => {
+          it('calls layout when going to VISIBLE', async () => {
             viewer.receiveMessage('visibilitychange', {
               state: VisibilityState.VISIBLE,
             });
-            return waitForNextPass().then(() => {
-              expect(layoutCallback).to.have.been.called;
-              expect(unlayoutCallback).not.to.have.been.called;
-              expect(pauseCallback).not.to.have.been.called;
-              expect(resumeCallback).not.to.have.been.called;
-            });
+            await waitForNextPass();
+            expect(layoutCallback).to.have.been.called;
+            expect(unlayoutCallback).not.to.have.been.called;
+            expect(pauseCallback).not.to.have.been.called;
+            expect(resumeCallback).not.to.have.been.called;
           });
 
-          it('does not call callbacks when going to HIDDEN', () => {
+          it('calls callbacks when going to HIDDEN', async () => {
             viewer.receiveMessage('visibilitychange', {
               state: VisibilityState.VISIBLE,
             });
             changeVisibility('hidden');
-            return waitForNextPass().then(() => {
-              expect(layoutCallback).not.to.have.been.called;
-              expect(unlayoutCallback).not.to.have.been.called;
-              expect(pauseCallback).not.to.have.been.called;
-              expect(resumeCallback).not.to.have.been.called;
-            });
+            await waitForNextPass();
+            expect(unlayoutCallback).not.to.have.been.called;
+            expect(pauseCallback).not.to.have.been.called;
+            expect(resumeCallback).not.to.have.been.called;
           });
 
-          // TODO(aghassemi): Investigate failure. #10974.
-          it.skip('does not call callbacks when going to INACTIVE', () => {
+          it('does not call callbacks when going to INACTIVE', () => {
             viewer.receiveMessage('visibilitychange', {
               state: VisibilityState.INACTIVE,
             });
@@ -258,21 +257,24 @@ t.run('Viewer Visibility State', () => {
             });
           });
 
-          it('does not call callbacks when going to HIDDEN', () => {
+          it('calls callbacks when going to HIDDEN', () => {
             viewer.receiveMessage('visibilitychange', {
               state: VisibilityState.VISIBLE,
             });
             changeVisibility('hidden');
             return waitForNextPass().then(() => {
-              expect(layoutCallback).not.to.have.been.called;
+              if (R1_IMG_DEFERRED_BUILD) {
+                expect(layoutCallback).to.have.been.called;
+              } else {
+                expect(layoutCallback).not.to.have.been.called;
+              }
               expect(unlayoutCallback).not.to.have.been.called;
               expect(pauseCallback).not.to.have.been.called;
               expect(resumeCallback).not.to.have.been.called;
             });
           });
 
-          // TODO(aghassemi): Investigate failure. #10974.
-          it.skip('does not call callbacks when going to INACTIVE', () => {
+          it('does not call callbacks when going to INACTIVE', () => {
             viewer.receiveMessage('visibilitychange', {
               state: VisibilityState.INACTIVE,
             });
@@ -330,11 +332,9 @@ t.run('Viewer Visibility State', () => {
             state: VisibilityState.INACTIVE,
           });
           return waitForNextPass().then(() => {
-            expect(layoutCallback).not.to.have.been.called;
             expect(unlayoutCallback).to.have.been.called;
             expect(pauseCallback).to.have.been.called;
             expect(resumeCallback).not.to.have.been.called;
-            //expect(unselect).to.have.been.called;
           });
         });
 
@@ -392,7 +392,6 @@ t.run('Viewer Visibility State', () => {
             expect(unlayoutCallback).to.have.been.called;
             expect(pauseCallback).to.have.been.called;
             expect(resumeCallback).not.to.have.been.called;
-            //expect(unselect).to.have.been.called;
           });
         });
 
@@ -443,23 +442,17 @@ t.run('Viewer Visibility State', () => {
           });
           changeVisibility('hidden');
           return waitForNextPass().then(() => {
-            expect(layoutCallback).not.to.have.been.called;
+            if (R1_IMG_DEFERRED_BUILD) {
+              expect(layoutCallback).to.have.been.called;
+            } else {
+              expect(layoutCallback).not.to.have.been.called;
+            }
             expect(unlayoutCallback).not.to.have.been.called;
             expect(pauseCallback).not.to.have.been.called;
             expect(resumeCallback).to.have.been.called;
           });
         });
 
-        // TODO(aghassemi): Investigate failure. #10974.
-        it.skip('does not call callbacks when going to INACTIVE', () => {
-          return waitForNextPass().then(() => {
-            expect(layoutCallback).not.to.have.been.called;
-            expect(unlayoutCallback).not.to.have.been.called;
-            expect(pauseCallback).not.to.have.been.called;
-            expect(resumeCallback).not.to.have.been.called;
-          });
-        });
-
         it('does not call callbacks when going to PAUSED', () => {
           viewer.receiveMessage('visibilitychange', {
             state: VisibilityState.PAUSED,
@@ -517,9 +510,8 @@ t.run('Viewer Visibility State', () => {
           return waitForNextPass().then(() => {
             expect(layoutCallback).not.to.have.been.called;
             expect(unlayoutCallback).to.have.been.called;
-            expect(pauseCallback).not.to.have.been.called;
+            expect(pauseCallback).to.have.been.called;
             expect(resumeCallback).not.to.have.been.called;
-            //expect(unselect).to.have.been.called;
           });
         });
 
diff --git a/test/manual/always-serve-npa.amp.html b/test/manual/always-serve-npa.amp.html
new file mode 100644
index 0000000000000..c997631f4941d
--- /dev/null
+++ b/test/manual/always-serve-npa.amp.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Always Serve NPA Example</title>
+  <link rel="canonical" href="http://nonblocking.io/" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <style amp-custom>
+    amp-ad {
+      border: 1px solid #ccc;
+      max-width: 500px;
+    }
+  </style>
+  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+  <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
+  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-geo layout="nodisplay">
+    <script type="application/json">
+      {
+        "AmpBind": true,
+        "ISOCountryGroups": {
+          "gdpr": [ "preset-eea", "unknown" ],
+          "usca": [ "preset-us-ca" ]
+        }
+      }
+    </script>
+  </amp-geo>
+
+  <p>
+      Can test with: http://localhost:8000/test/manual/always-serve-npa.amp.html#amp-geo=at
+  </p>
+  <button on="tap:AMP.setState({myCountry: ampGeo.ISOCountry})">Where am I?</button>
+  <p [text]="'The country code is: ' + myCountry "></p>
+  <p [text]="'Matched country groups: ' + ampGeo.ISOCountryGroups.join(', ') "></p>
+
+  <h2> NOTE: Must disable check that isSecureUrl for testing </h2>
+  <h2>Doubleclick with RTC</h2>
+    <amp-ad width="320" height="50"
+            always-serve-npa="gdpr,usca"
+            block-rtc="gdpr,usca"
+            type="doubleclick"
+            data-slot="/4119129/mobile_ad_banner"
+            rtc-config='{"vendors": {"fakeVendor": {"SLOT_ID": "1", "PAGE_ID": "1"}, "nonexistent-vendor": {"SLOT_ID": "1"}, "fakeVendor2": {"SLOT_ID": "1"}}, "urls": ["https://localhost:4443/posts?slot_id=1", "https://localhost:4443/abc?timeout=true", "https://broken.zzzzzz", "https://localhost:4443/zqq?slot_id=1"], "timeoutMillis": 500}'
+            json='{"targeting":{"food":["burgers","chicken"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":0}'>
+    </amp-ad>
+    <amp-ad width=300 height=200
+        type="adsense"
+        always-serve-npa="gdpr,usca"
+        data-ad-client="ca-pub-9350112648257122">
+    </amp-ad>
+
+
+    <amp-ad width="320" height="50"
+            type="doubleclick"
+            data-slot="/4119129/mobile_ad_banner"
+            rtc-config='{"urls": ["https://www.example.biz/?pvi=PAGEVIEWID&href=HREF&ds=ATTR(data-slot)&h=ATTR(height)&w=ATTR(width)&ovw=ATTR(data-override-width)&json=ATTR(data-json)&ovh=ATTR(data-override-height)"], "timeoutMillis": 500}'
+            json='{"targeting":{"food":["burgers","chicken"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":0}'>
+    </amp-ad>
+
+    <amp-ad width=300 height=200
+        type="adsense"
+        data-ad-client="ca-pub-9350112648257122">
+    </amp-ad>
+</body>
+</html>
diff --git a/test/manual/amp-accordion-integration.amp.html b/test/manual/amp-accordion-integration.amp.html
index 88740ac10a8e6..d48b1d003fa55 100644
--- a/test/manual/amp-accordion-integration.amp.html
+++ b/test/manual/amp-accordion-integration.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <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 type="text/css" media="screen">
   section[expanded] .show-on-collapse {
diff --git a/test/manual/amp-accordion.amp.html b/test/manual/amp-accordion.amp.html
index cc1d78e4e5686..b3814e70b7893 100644
--- a/test/manual/amp-accordion.amp.html
+++ b/test/manual/amp-accordion.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <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 type="text/css" media="screen">
   section[expanded] .show-on-collapse {
diff --git a/test/manual/amp-analytics/amp-analytics-multi-selector.html b/test/manual/amp-analytics/amp-analytics-multi-selector.html
index e82445342b4da..a6a51cd32fe6a 100644
--- a/test/manual/amp-analytics/amp-analytics-multi-selector.html
+++ b/test/manual/amp-analytics/amp-analytics-multi-selector.html
@@ -1,333 +1,554 @@
-<!doctype html>
+<!DOCTYPE html>
 <html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Ad visible repeat examples</title>
-  <link rel="canonical" href="http://nonblocking.io/" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <style amp-custom>
-    amp-ad {
-      border: 2px solid red;
-      padding: 0;
-      margin: 0;
-    }
-    /* Included here to make sure it does not render. */
-    .fixed {
-      position: fixed;
-      bottom: 0;
-      right: 0;
-      background-color: #eee;
-      opacity: .8;
-    }
+  <head>
+    <meta charset="utf-8" />
+    <title>Ad visible repeat examples</title>
+    <link rel="canonical" href="http://nonblocking.io/" />
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
+    <style amp-custom>
+      amp-ad {
+        border: 2px solid red;
+        padding: 0;
+        margin: 0;
+      }
+      /* Included here to make sure it does not render. */
+      .fixed {
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        background-color: #eee;
+        opacity: 0.8;
+      }
 
-    .fill {
-      height: 750px;
-      width: 10px;
-      background-color: yellow;
-      opacity: 0.2;
-    }
-  </style>
-  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
-  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
+      .fill {
+        height: 750px;
+        width: 10px;
+        background-color: yellow;
+        opacity: 0.2;
+      }
+    </style>
+    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+  </head>
 
-</head>
-
-<body>
+  <body>
     <amp-analytics>
-        <script type="application/json">
-          {
-            "transport": {"beacon": false, "xhrpost": false},
-            "requests": {
-              "base": "fake.com/ad?multiVisible=true&adId=${id}",
-              "queryAll": "fake.com/ad?queryAll=true",
-              "restrictDataVars": "fake.com/ad?restrictDataVars=true&adId=${id}"
+      <script type="application/json">
+        {
+          "transport": { "beacon": false, "xhrpost": false },
+          "requests": {
+            "base": "fake.com/ad?multiVisible=true&adId=${id}",
+            "queryAll": "fake.com/ad?queryAll=true",
+            "restrictDataVars": "fake.com/ad?restrictDataVars=true&adId=${id}",
+            "nonAmpElements": "fake.com/paragraph?nonAmpElement=true&paragraphId=${id}"
+          },
+          "triggers": {
+            "multiVisible": {
+              "on": "visible",
+              "request": "base",
+              "selector": ["#ad1", "#ad2"]
+            },
+            "querySelectorAll": {
+              "on": "visible",
+              "request": "queryAll",
+              "selector": [".myClass"]
             },
-            "triggers": {
-              "multiVisible": {
-                "on": "visible",
-                "request": "base",
-                "selector": ["#ad1","#ad2"]
-              },
-              "querySelectorAll": {
-                "on": "visible",
-                "request": "queryAll",
-                "selector": [".myClass"]
-              },
-              "restrictDataVars": {
-                "on": "visible",
-                "request": "restrictDataVars",
-                "selector": [".restrictDataVars"]
+            "restrictDataVars": {
+              "on": "visible",
+              "request": "restrictDataVars",
+              "selector": [".restrictDataVars"]
+            },
+            "nonAmpElements": {
+              "on": "visible",
+              "request": "nonAmpElements",
+              "selector": ["#paragraph"],
+              "visibilitySpec": {
+                "visiblePercentageMin": 20,
+                "visiblePercentageMax": 80,
+                "totalTimeMin": 5000,
+                "continuousTimeMin": 2000
               }
             }
           }
-        </script>
-      </amp-analytics>
-  <div class='fill'></div>
-  <div>
-    <amp-ad id='ad1' width=300 height=250
+        }
+      </script>
+    </amp-analytics>
+    <div class="fill"></div>
+    <div>
+      <amp-ad
+        id="ad1"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad1'
-        data-ad-width=300
-        data-ad-height=250>
-    </amp-ad>
-
-    <amp-ad id='ad2' width=300 height=250
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad1"
+        data-ad-width="300"
+        data-ad-height="250"
+      >
+      </amp-ad>
+      <p id="paragraph" data-vars-id="paragraph1">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed vehicula justo, quis blandit tortor. Curabitur in mollis elit. Sed sed lorem vel mi elementum eleifend ut vel sapien. Suspendisse sed blandit nulla. Sed dignissim
+        eros nec felis malesuada consectetur. Etiam quis nunc quis sapien tempus euismod in eget velit.
+      </p>
+      <amp-ad
+        id="ad2"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad2'
-        data-ad-width=300
-        data-ad-height=250>
-    </amp-ad>
-
-    <amp-ad id='ad3' width=300 height=250
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad2"
+        data-ad-width="300"
+        data-ad-height="250"
+      >
+      </amp-ad>
+      <p id="paragraph" data-vars-id="paragraph2">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed vehicula justo, quis blandit tortor. Curabitur in mollis elit. Sed sed lorem vel mi elementum eleifend ut vel sapien. Suspendisse sed blandit nulla. Sed dignissim
+        eros nec felis malesuada consectetur. Etiam quis nunc quis sapien tempus euismod in eget velit.
+      </p>
+      <amp-ad
+        id="ad3"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad3'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad3"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad4' width=300 height=250
+      <p id="paragraph" data-vars-id="paragraph3">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed vehicula justo, quis blandit tortor. Curabitur in mollis elit. Sed sed lorem vel mi elementum eleifend ut vel sapien. Suspendisse sed blandit nulla. Sed dignissim
+        eros nec felis malesuada consectetur. Etiam quis nunc quis sapien tempus euismod in eget velit.
+      </p>
+      <amp-ad
+        id="ad4"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad4'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad4"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad5' width=300 height=250
+      <p id="paragraph" data-vars-id="paragraph4">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed vehicula justo, quis blandit tortor. Curabitur in mollis elit. Sed sed lorem vel mi elementum eleifend ut vel sapien. Suspendisse sed blandit nulla. Sed dignissim
+        eros nec felis malesuada consectetur. Etiam quis nunc quis sapien tempus euismod in eget velit.
+      </p>
+      <amp-ad
+        id="ad5"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad5'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad5"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad6' width=300 height=250
+      <p id="paragraph" data-vars-id="paragraph5">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed vehicula justo, quis blandit tortor. Curabitur in mollis elit. Sed sed lorem vel mi elementum eleifend ut vel sapien. Suspendisse sed blandit nulla. Sed dignissim
+        eros nec felis malesuada consectetur. Etiam quis nunc quis sapien tempus euismod in eget velit.
+      </p>
+      <amp-ad
+        id="ad6"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad6'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad6"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad7' width=300 height=250
+      <p id="paragraph" data-vars-id="paragraph6">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed vehicula justo, quis blandit tortor. Curabitur in mollis elit. Sed sed lorem vel mi elementum eleifend ut vel sapien. Suspendisse sed blandit nulla. Sed dignissim
+        eros nec felis malesuada consectetur. Etiam quis nunc quis sapien tempus euismod in eget velit.
+      </p>
+      <amp-ad
+        id="ad7"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad7'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad7"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad8' width=300 height=250
+      <p id="paragraph" data-vars-id="paragraph7">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed vehicula justo, quis blandit tortor. Curabitur in mollis elit. Sed sed lorem vel mi elementum eleifend ut vel sapien. Suspendisse sed blandit nulla. Sed dignissim
+        eros nec felis malesuada consectetur. Etiam quis nunc quis sapien tempus euismod in eget velit.
+      </p>
+      <amp-ad
+        id="ad8"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad8'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad8"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad9' width=300 height=250
+      <p id="paragraph" data-vars-id="paragraph8">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed vehicula justo, quis blandit tortor. Curabitur in mollis elit. Sed sed lorem vel mi elementum eleifend ut vel sapien. Suspendisse sed blandit nulla. Sed dignissim
+        eros nec felis malesuada consectetur. Etiam quis nunc quis sapien tempus euismod in eget velit.
+      </p>
+      <amp-ad
+        id="ad9"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad9'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad9"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad10' width=300 height=250
+      <p id="paragraph" data-vars-id="paragraph9">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed vehicula justo, quis blandit tortor. Curabitur in mollis elit. Sed sed lorem vel mi elementum eleifend ut vel sapien. Suspendisse sed blandit nulla. Sed dignissim
+        eros nec felis malesuada consectetur. Etiam quis nunc quis sapien tempus euismod in eget velit.
+      </p>
+      <amp-ad
+        id="ad10"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad10'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad10"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad11' width=300 height=250
+      <p id="paragraph" data-vars-id="paragraph10">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed vehicula justo, quis blandit tortor. Curabitur in mollis elit. Sed sed lorem vel mi elementum eleifend ut vel sapien. Suspendisse sed blandit nulla. Sed dignissim
+        eros nec felis malesuada consectetur. Etiam quis nunc quis sapien tempus euismod in eget velit.
+      </p>
+      <amp-ad
+        id="ad11"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad11'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad11"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad12' width=300 height=250
+      <amp-ad
+        id="ad12"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad12'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad12"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad13' width=300 height=250
+      <amp-ad
+        id="ad13"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad13'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad13"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad14' width=300 height=250
+      <amp-ad
+        id="ad14"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad14'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad14"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad15' width=300 height=250
+      <amp-ad
+        id="ad15"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad15'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad15"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad16' width=300 height=250
+      <amp-ad
+        id="ad16"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad16'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad16"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad17' width=300 height=250
+      <amp-ad
+        id="ad17"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad17'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad17"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad18' width=300 height=250
+      <amp-ad
+        id="ad18"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad18'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad18"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad19' width=300 height=250
+      <amp-ad
+        id="ad19"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad19'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad19"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass"
+      >
       </amp-ad>
-    <amp-ad id='ad20' width=300 height=250
+      <amp-ad
+        id="ad20"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad20'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass restrictDataVars">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad20"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass restrictDataVars"
+      >
       </amp-ad>
-    <amp-ad id='ad21' width=300 height=250
+      <amp-ad
+        id="ad21"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad21'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass restrictDataVars">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad21"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass restrictDataVars"
+      >
       </amp-ad>
-    <amp-ad id='ad22' width=300 height=250
+      <amp-ad
+        id="ad22"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad22'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass restrictDataVars">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad22"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass restrictDataVars"
+      >
       </amp-ad>
-    <amp-ad id='ad23' width=300 height=250
+      <amp-ad
+        id="ad23"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad23'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass restrictDataVars">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad23"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass restrictDataVars"
+      >
       </amp-ad>
-    <amp-ad id='ad24' width=300 height=250
+      <amp-ad
+        id="ad24"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-vars-id='ad24'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass restrictDataVars">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-vars-id="ad24"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass restrictDataVars"
+      >
       </amp-ad>
-    <amp-ad id='ad25' width=300 height=250
+      <amp-ad
+        id="ad25"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass restrictDataVars">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass restrictDataVars"
+      >
       </amp-ad>
-    <amp-ad id='ad26' width=300 height=250
+      <amp-ad
+        id="ad26"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass restrictDataVars">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass restrictDataVars"
+      >
       </amp-ad>
-    <amp-ad id='ad27' width=300 height=250
+      <amp-ad
+        id="ad27"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass restrictDataVars">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass restrictDataVars"
+      >
       </amp-ad>
-    <amp-ad id='ad28' width=300 height=250
+      <amp-ad
+        id="ad28"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass restrictDataVars">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass restrictDataVars"
+      >
       </amp-ad>
-    <amp-ad id='ad29' width=300 height=250
+      <amp-ad
+        id="ad29"
+        width="300"
+        height="250"
         type="_ping_"
-        data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
-        data-valid='true'
-        data-ad-width=300
-        data-ad-height=250
-        class="myClass restrictDataVars">
+        data-url="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n"
+        data-valid="true"
+        data-ad-width="300"
+        data-ad-height="250"
+        class="myClass restrictDataVars"
+      >
       </amp-ad>
-
-  </div>
-  <script>
-    setTimeout(() => {
-      AMP.toggleExperiment('visibility-trigger-improvements', true);
-    }, 500);
-  </script>
-</body>
+    </div>
+    <script>
+      setTimeout(() => {
+        AMP.toggleExperiment("visibility-trigger-improvements", true);
+      }, 500);
+    </script>
+  </body>
 </html>
diff --git a/test/manual/amp-analytics/analytics-nested.html b/test/manual/amp-analytics/analytics-nested.html
index 49e3d1e7e2c8c..db26135cad998 100644
--- a/test/manual/amp-analytics/analytics-nested.html
+++ b/test/manual/amp-analytics/analytics-nested.html
@@ -11,8 +11,8 @@
   <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
 </head>
 <body>
-  <!-- 
-    Macros in `vars` are now resolved asynchronously before macros in `requests`. As a result 
+  <!--
+    Macros in `vars` are now resolved asynchronously before macros in `requests`. As a result
     it is possible to have expensive macros in `vars` that will delay macro resolution in requests
     by a meaningful amount of time. In the example below `ts2` will be resolved slightly ahead of `ts1`.
     This would be further delayed if there were more complicated nested macros inside of the `vars` config.
@@ -49,7 +49,7 @@
           "adjacent": "${ts2}sometext${ts2}"
         }
       }
-    </script> 
+    </script>
   </amp-analytics>
   <h1>Nested macros in analytics</h1>
 </body>
diff --git a/test/manual/amp-analytics/core-web-vitals.html b/test/manual/amp-analytics/core-web-vitals.html
new file mode 100644
index 0000000000000..d0ac9bbbd54b3
--- /dev/null
+++ b/test/manual/amp-analytics/core-web-vitals.html
@@ -0,0 +1,474 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>AMP #0</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+  <style amp-custom>
+    body {
+      font-family: 'Questrial', Arial;
+    }
+    article {
+      display: block;
+      max-width: 736px;
+      margin: 8px;
+    }
+
+    amp-lightbox {
+      background-color: rgba(0, 0, 0, 0.9);
+    }
+
+    .bordered {
+      border: 1px solid black;
+    }
+
+    .box1 {
+      border: 1px solid black;
+      margin: 8px 0;
+    }
+
+    .logo {
+      background: yellow;
+      border: 5px solid black;
+      border-radius: 50%;
+      opacity: 0.7;
+      position: fixed;
+      z-index: 1000;
+      top: 0px;
+      right: 10px;
+      width: 40px;
+      height: 40px;
+    }
+
+    .ear {
+      background: lime;
+      border: 5px solid black;
+      opacity: 0.7;
+      position: absolute;
+      z-index: 999;
+      top: 0;
+      right: 0;
+      width: 20px;
+      height: 20px;
+    }
+
+    @media screen and (min-width: 380px) {
+      .logo {
+        top: auto;
+      }
+    }
+
+    @media screen and (min-width: 420px) {
+      .logo {
+        position: static;
+        top: auto;
+      }
+    }
+
+    .goto {
+      display: block;
+      margin: 16px;
+    }
+    @font-face {
+      font-family: 'Comic AMP';
+      font-style: bold;
+      font-weight: 700;
+      src: url(fonts/ComicAMP.ttf) format('truetype');
+    }
+    .comic-amp-font-loaded .comic-amp {
+      font-family: 'Comic AMP', serif, sans-serif;
+    }
+
+    .comic-amp-font-loading .comic-amp {
+      color: #0ff;
+    }
+
+    .comic-amp-font-missing .comic-amp {
+      color: #f00;
+    }
+
+    .lightbox-close-button {
+      background: white;
+    }
+
+    .lightbox-text {
+      color: white;
+    }
+
+    #amp-iframe:target {
+      border: 1px solid green;
+    }
+
+    #breaker {
+      height: 100px;
+      background: green;
+    }
+
+    #breaking {
+      height: 200px;
+      width: 200vw;
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+
+  </style>
+  <script async custom-element="amp-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"></script>
+  <script async custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"></script>
+  <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
+  <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
+  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
+  <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
+  <script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
+  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
+  <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
+  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
+  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body class="comic-amp-font-loading">
+<div class="logo"></div>
+<div class="ear"></div>
+
+<article>
+
+<h1 id="top">AMP #0</h1>
+<a href="#amp-iframe">Go to iframe</a>
+  <p class="comic-amp">
+    Quisque ultricies id augue a convallis. Vivamus euismod est quis tellus laoreet lacinia. In quam tellus, mollis nec porta eget, volutpat sit amet nibh. Duis ac odio sem. Sed consequat, ante gravida fringilla suscipit, libero libero ullamcorper metus, nec porta est elit at est. Curabitur vel diam ligula. Nulla bibendum malesuada odio.
+  </p>
+  <amp-analytics>
+      <script type="application/json">
+      {
+        "requests": {
+          "event": "https://fake.com/webvital?pid=PAGE_VIEW_ID_64&host=AMPDOC_HOSTNAME"
+        },
+        "triggers": {
+          "webVitals-lcp": {
+            "on":"visible",
+             "request":"event",
+             "extraUrlParams":{
+                "lcp":"${largestContentfulPaint}"
+             }
+          },
+          "webVitals-fid": {
+            "on":"visible",
+             "request":"event",
+             "extraUrlParams":{
+                "fid":"${firstInputDelay}"
+             }
+          },
+          "webVitals-cls": {
+            "on":"visible",
+             "request":"event",
+             "extraUrlParams":{
+                "cls":"${cumulativeLayoutShift}"
+             }
+          }
+        }
+      }
+      </script>
+    </amp-analytics>
+  <p>
+    <amp-fit-text width="300" height="200" layout="responsive" class="box1">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
+    </amp-fit-text>
+  </p>
+  <p>
+    <div class="box1">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
+    </div>
+  </p>
+
+  <p>
+    <a class="goto" href="#top">Top</a>
+    <a class="goto" href="#img0">Image0</a>
+    <a class="goto" href="#footer">Footer</a>
+  </p>
+
+  <p>
+    <div style="width:400px; height:300px; overflow-x: scroll !important;">
+      <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n" width=400 height=300 layout=intrinsic style="float: left"></amp-img>
+      <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n" width=400 height=300 layout=intrinsic style="float: left"></amp-img>
+      <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no-n" width=400 height=300 layout=intrinsic style="float: left"></amp-img>
+      <amp-anim
+          src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h300-no"
+          width="400" height="300" style="float: left">
+        <amp-img placeholder
+            src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h300-no-k"
+            width="400" height="300" style="float: left"></amp-img>
+      </amp-anim>
+    </div>
+  </p>
+  <p>
+    <amp-carousel width=400 height=300 layout=responsive type=slides>
+      <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n" layout=fill></amp-img>
+      <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n" width=400 height=300 layout=responsive></amp-img>
+      <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no-n" width=400 height=300 layout=responsive></amp-img>
+      <amp-anim
+          src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h300-no"
+          width="400" height="300">
+        <amp-img placeholder
+            src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h300-no-k"
+            width="400" height="300"></amp-img>
+      </amp-anim>
+    </amp-carousel>
+  </p>
+  <p>
+    <amp-carousel width=auto height=200>
+      <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n" width=300 height=200></amp-img>
+      <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no-n" width=300 height=200></amp-img>
+      <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w300-h200-no-n" width=300 height=200></amp-img>
+      <amp-anim
+          src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w300-h200-no"
+          width="300" height="200">
+        <amp-img placeholder
+            src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w300-h200-no-k"
+            width="300" height="200"></amp-img>
+      </amp-anim>
+    </amp-carousel>
+  </p>
+  <p>
+    <amp-anim
+        src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h225-no"
+        width="400" height="225" layout="responsive">
+      <amp-img placeholder
+          src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h225-no-k"
+          width="400" height="225" layout="responsive"></amp-img>
+    </amp-anim>
+  </p>
+
+  <h2>Video</h2>
+  <amp-video
+      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
+      width="358"
+      height="204"
+      layout="responsive"
+      controls></amp-video>
+
+  <h2>Youtube</h2>
+  <amp-youtube
+      data-videoid="mGENRKrdoGY"
+      width="480" height="270"></amp-youtube>
+
+  <amp-youtube
+      data-videoid="mGENRKrdoGY"
+      layout="responsive"
+      width="480" height="270"></amp-youtube>
+
+
+  <h2>Audio</h2>
+    <amp-audio src="/examples/av/audio.mp3"></amp-audio>
+
+  <h2>Lightbox</h2>
+  <amp-lightbox id="lightbox" layout="nodisplay">
+    <p>
+      <button on="tap:lightbox.close" class="lightbox-close-button">
+          Close Lightbox
+      </button>
+    </p>
+    <p>
+      <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no" width=300 height=200></amp-img>
+    </p>
+    <p class="lightbox-text">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+    </p>
+  </amp-lightbox>
+
+  <button on="tap:lightbox">
+      Open Lightbox
+  </button>
+
+  <h2>Scrollable Lightbox</h2>
+  <amp-lightbox scrollable id="lightbox-scrollable" layout="nodisplay">
+    <button on="tap:lightbox-scrollable.close" class="lightbox-close-button">
+      Close Scrollable Lightbox
+    </button>
+    <p>
+      <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no" width=300 height=200></amp-img>
+    </p>
+    <p class="lightbox-text">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+    </p>
+    <p>
+      <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w300-h200-no" width=300 height=200></amp-img>
+    </p>
+    <p class="lightbox-text">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+    </p>
+    <p>
+      <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w300-h200-no" width=300 height=200></amp-img>
+    </p>
+    <p class="lightbox-text">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+    </p>
+    <amp-twitter width=486 height=657
+                 media="(min-width: 401px)"
+                 layout="responsive"
+                 data-tweetID="585110598171631616"></amp-twitter>
+    <amp-youtube
+        data-videoid="mGENRKrdoGY"
+        layout="responsive"
+        width="480" height="270"></amp-youtube>
+    <p class="lightbox-text">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+    </p>
+  </amp-lightbox>
+
+  <button on="tap:lightbox-scrollable">
+    Open Scrollable Lightbox
+  </button>
+
+  <h2>Images</h2>
+  <p>
+  Responsive (w/srcset, w/image-lightbox)
+  <p>
+    <amp-image-lightbox id="imagelightbox1" layout="nodisplay"></amp-image-lightbox>
+    <amp-img id="img0"
+        srcset="
+            https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg 2004w,
+            https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w1002-h367-no/PANO_20150726_171347%257E2.jpg 1002w"
+        width=527 height=193 layout="responsive"
+        on="tap:imagelightbox1" role="button" tabindex="0"></amp-img>
+  </p>
+
+  <p>
+  Fixed
+  <p>
+    <amp-img id="img1" src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=264 height=96></amp-img>
+  </p>
+
+  <p>
+  None
+  <p class="bordered">
+    <amp-img id="img2" src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=527 height=193 layout="nodisplay"></amp-img>
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+  </p>
+
+  <p>
+    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+  </p>
+  <p>
+    <amp-img id="img3" src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=527 height=193 layout="responsive" ></amp-img>
+  </p>
+  <p>
+    <amp-img id="img4" src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=527 height=193 layout="responsive" ></amp-img>
+  </p>
+  <p>
+    <amp-img id="img5" src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=527 height=193 layout="responsive" ></amp-img>
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+  </p>
+  <section>
+    <h1>Media query selection<h1>
+    <amp-img
+        media="(min-width: 650px)"
+        id="img6" src="https://lh5.googleusercontent.com/-vmSp-YN10lA/VcH6S35gAWI/AAAAAAABYqk/6wuA5T3ApSk/w1832-h1376-no/IMG_20150805_131745-ANIMATION.gif"
+        width=466
+        height=355 layout="responsive" ></amp-img>
+    <amp-img
+        media="(max-width: 649px)"
+        id="img7" src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg"
+        width=527
+        height=193 layout="responsive" ></amp-img>
+  </section>
+  <p>
+    <amp-img src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=527 height=193 layout="responsive" ></amp-img>
+  </p>
+  <p>
+    <amp-img src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=527 height=193 layout="responsive" ></amp-img>
+  </p>
+  <p>
+    <amp-img src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=527 height=193 layout="responsive" ></amp-img>
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+  </p>
+  <p>
+    <amp-img src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=527 height=193 layout="responsive" ></amp-img>
+  </p>
+  <p>
+    <amp-img src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=527 height=193 layout="responsive" ></amp-img>
+  </p>
+  <p>
+    <amp-img src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=527 height=193 layout="responsive" ></amp-img>
+  </p>
+  <p>
+    <amp-img src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h734-no/PANO_20150726_171347%257E2.jpg" width=527 height=193 layout="responsive" ></amp-img>
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti apeirian et. Omnium legendos tractatos cu mea. Vix in stet dolorem accusamus. Iisque rationibus consetetur in cum, quo unum nulla legere ut. Simul numquam saperet no sit.
+  </p>
+  <h2>AddThis</h2>
+  <amp-addthis
+    width="320"
+    height="192"
+    data-pub-id="ra-59c2c366435ef478"
+    data-widget-id="0fyg">
+  </amp-addthis>
+  <h2 id="amp-iframe">IFrame</h2>
+  <amp-iframe width=300 height=300
+      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+      layout="responsive"
+      frameborder="0"
+      src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
+  </amp-iframe>
+  <div>
+    <a on="tap:AMP.goBack">Go back</a>
+  </div>
+  </p>
+
+  <h2>SVG</h2>
+  <svg width="400" height="296" viewBox="1400 500 3000 2500">
+    <path d="m 3766.9354,1578.1181 c 58.2769,-756.81944 -408.1876,-717.21057 -510.4769,-701.02201 -79.902,12.64545 -239.2559,90.53098 -313.8601,318.92831 -82.3686,252.1683 143.3895,461.6098 259.4436,801.3231 172.8182,640.8523 -882.0196,923.1062 -1227.7959,798.7381 -69.3048,-30.0286 -182.3973,-108.7232 -158.8806,-186.5382 8.5153,-72.4218 -105.5719,-107.3077 -82.4098,-11.1024 95.373,379.694 618.3608,323.5968 1066.1849,144.2115 250.0432,-100.16 489.5859,-347.2474 489.7608,-633.164 -50.7024,-386.8592 -391.2774,-599.5297 -282.7825,-917.5279 173.2946,-330.57664 355.7612,-318.24308 596.6594,-169.4657 82.8022,96.8444 115.4521,181.225 119.5309,313.0092 2.5525,82.4609 -36.2889,260.8703 44.6262,242.61 z" fill="#669900"/>
+    <path d="m 4416.0026,1455.3672 c 77.2745,23.6811 73.5053,107.3467 75.9575,166.8979 15.3869,149.8221 -6.2292,300.1828 4.2896,450.1688 -8.5601,219.3654 0.7438,438.9849 -1.682,658.4723 -9.842,56.6077 34.5512,148.3936 -55.7836,165.4604 -81.0177,12.4369 -163.7234,-0.9781 -245.5127,3.3739 -248.997,-1.7285 -498.1326,1.9053 -747.01,-2.3009 -86.3231,6.2887 -77.5196,-71.1333 -75.8856,-133.0733 43.1106,-461.6582 -55.107,-895.0067 58.8105,-1302.5316 173.2754,-4.339 702.7558,-6.7657 986.8163,-6.4675 z" fill="#6699ff"/>
+    <path d="m 3534.2772,1717.8648 c 221.2517,21.2119 572.0499,-17.0571 851.7094,28.1009 -21.0892,135.2035 -26.2108,343.7127 -18.8464,481.1314 0.6629,160.8137 -8.6026,320.1194 -0.3032,497.6322 -118.3583,29.6629 -269.1727,23.1546 -403.9033,17.3782 -156.4796,-6.7087 -363.7832,20.958 -488.8767,-22.9287 16.6915,-141.6537 14.7827,-372.2907 21.3755,-514.5289 7.5082,-162.6119 26.4066,-324.4933 38.8447,-486.7851 z" fill="#3366cc"/>
+    <path d="m 3889.2766,1650.5266 c 27.7364,23.6886 72.1445,20.4506 101.2331,1.0458 22.3604,-17.6131 19.1236,-56.6446 -8.0767,-68.5575 -51.3171,-39.4426 -125.0811,27.5752 -93.1564,67.5117 z" fill="#ff6600"/>
+    <path d="m 3985.4115,1806.5993 c -54.1134,86.3413 -120.9065,155.5988 -208.7186,279.6705 -98.9752,111.8484 -122.1792,163.717 136.357,69.2462 175.8375,-36.4294 35.4891,130.704 -15.9848,267.0009 -45.1026,119.4263 -83.2501,196.2986 -92.2725,256.8308 139.8358,-155.934 233.9965,-339.5471 357.0405,-505.614 167.1182,-233.0853 -225.0018,-15.3832 -266.0121,-102.9119 38.3338,-115.9788 97.6167,-173.7877 89.7826,-252.6178 l -0.1926,-11.6047 0,0 z" fill="#ffcc00"/>
+    <path d="m 4099.9162,1659.9255 c 27.7366,23.6887 72.1447,20.4507 101.2333,1.046 22.3604,-17.6133 19.1235,-56.6446 -8.0768,-68.5575 -51.3168,-39.4426 -125.0812,27.5752 -93.1565,67.5115 z" fill="#ff6600"/>
+    <path d="m 3681.6605,1651.4038 c 27.7364,23.6888 72.1445,20.4506 101.2332,1.046 22.3603,-17.6132 19.1234,-56.6448 -8.0769,-68.5575 -51.3169,-39.4428 -125.0811,27.5751 -93.1563,67.5115 z" fill="#ff6600"/>
+    <path d="m 2575.0536,1072.0944 c -41.7949,-215.28999 -198.1073,64.4153 -379.7157,193.092 -133.7465,94.7647 -234.5954,11.3165 -570.0903,133.4228 -401.8972,146.2742 -388.2427,684.9442 -224.4598,986.8548 366.0107,674.6879 1103.0419,131.271 1216.6407,-55.3662 104.6211,-171.8874 330.8926,-138.9279 453.9675,-237.6837 59.7216,-47.9209 -5.9599,-359.9096 -105.7909,-337.7945 -648.2816,143.6118 -380.3137,-629.7889 -390.5515,-682.5252 z" fill="#ffcc00"/>
+    <path d="m 2058.3207,1381.3517 c -555.3851,-61.9665 -825.72,463.8013 -645.5204,442.4364 185.0637,-21.9416 158.9799,-504.669 310.9149,49.8713 57.2299,208.8816 401.8092,439.7925 494.821,638.6355 11.6767,57.5407 75.9987,46.3975 104.7889,25.124 31.5505,-23.313 18.9107,-80.0105 6.3288,-117.0635 -83.6721,-143.0048 -274.9312,-272.5734 -377.898,-377.9464 -120.8368,-136.4516 -208.1109,-334.9469 -151.0128,-495.0356 34.8137,-61.4683 63.3834,-80.7131 124.7882,-78.1048 55.22,9.7787 202.4079,237.5436 211.6533,157.296 6.1561,-44.3048 11.1555,-235.1689 -78.8639,-245.2129 z" fill="#ff6600"/>
+    <path d="m 4005.3105,689.39563 c -132.1157,120.32132 -1412.0359,816.95107 -1555.1646,911.30147 160.4961,184.2922 15.234,-12.8488 95.6898,137.9579 550.1675,-329.2476 954.2058,-586.1938 1528.6046,-873.93017 75.1515,-104.89315 -12.1136,-113.30773 -69.1298,-175.3292 z" fill="#3366cc"/>
+    <path d="m 2194.3681,1352.5268 c 9.2935,-33.3595 115.3351,-96.1488 116.2957,-60.9354 14.1803,519.7676 226.8596,740.1443 346.5092,899.2496 -9.1403,53.8137 -95.4967,108.843 -112.5912,76.6163 -104.516,-105.815 -172.0892,-466.006 -263.1765,-522.0611 -35.4594,-21.8216 12.7645,157.4396 -44.8138,184.0385 -77.4149,35.7627 -124.043,-138.0522 -229.1002,-113.7727 -18.3195,211.0153 555.9431,443.0665 505.2979,529.8185 -23.9237,43.5892 -81.9643,131.8588 -116.5557,78.0317 -146.1854,-207.6808 -213.2253,-245.8824 -420.072,-434.4752 -155.6003,-141.8688 -136.5394,-403.4861 -68.1091,-424.1442 116.1363,-27.4812 191.9444,245.9541 275.2956,188.1784 65.7711,-140.9662 -10.6629,-310.5452 11.0201,-400.5444 z" fill="#669900"/>
+    <path d="m 1640.1413,1783.8678 c -1.2739,288.86 586.9469,664.0874 521.3165,807.9936 -69.3201,51.7542 -264.7475,48.6232 -223.0496,-59.7663 40.7522,-117.7527 -130.0456,-272.4627 -303.3394,-291.2684 -296.5803,-32.1851 105.9828,212.4171 191.594,291.2294 36.2581,33.3788 125.7201,137.2209 -60.6765,119.5389 -142.0502,-35.061 -243.6721,-174.3502 -325.3694,-295.8032 -78.4159,-116.5746 -186.0507,-483.4195 -48.246,-480.286 125.3372,6.1146 22.5452,202.8366 86.2367,275.034 41.4944,47.0359 443.4581,128.9297 80.3823,-189.183 -157.9532,-138.3924 81.516,-260.2092 81.1514,-177.489 z" fill="#3366cc"/>
+    <path d="m 4079.5806,868.74488 c -18.4503,-3.3062 -24.5591,-6.34261 -33.5316,-16.66736 -4.696,-5.40376 -13.8197,-14.12548 -20.2749,-19.38163 -15.4956,-12.61776 -67.3382,-71.44012 -79.5473,-90.25706 -5.3049,-8.17621 -11.2871,-16.48111 -13.2935,-18.45531 -3.2617,-3.20909 -2.0572,-6.35995 11.3672,-29.73174 8.2588,-14.37823 17.879,-28.42525 21.3781,-31.21559 5.1887,-4.13699 12.0245,-5.80701 37.0394,-9.04885 16.8723,-2.18653 54.8305,-8.80671 84.352,-14.71151 29.5216,-5.90476 65.0265,-12.78154 78.8997,-15.28165 l 25.2242,-4.54567 23.7713,9.77618 c 62.8275,25.83824 111.7721,65.33019 111.7721,90.18546 1e-4,5.06675 -4.6709,12.80857 -17.366,28.78381 -52.1377,65.60993 -108.3882,110.96089 -146.1569,117.83656 -19.9034,3.62333 -69.5666,5.23515 -83.6338,2.71436 z" fill="#ff6600"/>
+    <path d="m 2377.3238,1269.2624 c -26.787,279.7212 111.0044,672.201 309.1165,843.6212 80.8729,69.9767 240.8138,-4.026 318.9086,-41.6454 45.2094,-35.9724 35.0313,-101.296 26.1997,-150.9873 -17.4339,-69.7557 -49.832,-121.797 -100.685,-116.1204 -45.4057,5.0682 -68.5356,8.8251 -64.9322,120.9642 1.3601,42.327 -40.4759,93.1741 -89.0657,90.4079 -52.9357,4.327 -75.8994,-38.881 -101.1012,-69.9814 -212.4085,-262.1247 -233.2146,-599.5762 -162.849,-813.093 10.758,-32.6441 5.6189,-86.0919 -34.34,-65.3213 -75.6217,39.3078 -93.8408,124.7689 -101.2517,202.1555 z" fill="#ff6600"/>
+  </svg>
+
+  <div id="footer">The end. <a href="#top">Back to top.</a></div>
+
+  <amp-pixel src="https://pubads.g.doubleclick.net/activity;dc_iu=/12344/pixel;ord=$RANDOM?"></amp-pixel>
+
+  <amp-font
+    layout="nodisplay"
+    font-family="Comic Amp"
+    timeout="3000"
+    on-load-remove-class="comic-amp-font-loading"
+    on-error-remove-class="comic-amp-font-loading"
+    on-error-add-class="comic-amp-font-missing"
+    on-load-add-class="comic-amp-font-loaded">
+  </amp-font>
+
+  <div id="breaker">
+    <div id="breaking"></div>
+  </div>
+</article>
+</body>
+</html>
diff --git a/test/manual/amp-analytics/default-data-vars.html b/test/manual/amp-analytics/default-data-vars.html
new file mode 100644
index 0000000000000..02cfbb23733e8
--- /dev/null
+++ b/test/manual/amp-analytics/default-data-vars.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html ⚡>
+
+<head>
+	<meta charset="utf-8">
+	<title>My AMP Page</title>
+	<link rel="canonical" href="self.html" />
+	<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+	<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+	<meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+</head>
+
+<body>
+<h2>Testing feature</h2>
+<p>data-vars should be passed to analytics and can be used as a filter</p>
+<ul>
+  <li>
+  Add to cart should send a ping to exampl.test
+  </li>
+  <li>
+  View cart should NOT send an analytics ping
+  </li>
+</ul>
+  <form data-vars-add-to-cart-form=true method="post"
+    action-xhr="https://example.com/subscribe"  target="_top">
+    <button type="submit">Add to cart</button>
+  </form>
+  <form data-vars-add-to-cart-form=false method="post"
+    action-xhr="https://example.com/subscribe"  target="_top">
+    <button type="submit">View Cart</button>
+  </form>
+	<amp-analytics>
+		<script type="application/json">
+			{
+        "requests": {
+          "test": "https://example.test?test-form"
+        },
+        "triggers":{
+          "trackForm":{
+            "on":"amp-form-submit",
+            "enabled": "${addToCartForm}",
+            "request":"test"
+          }
+        }
+      }
+		</script>
+	</amp-analytics>
+</body>
+
+</html>
diff --git a/test/manual/amp-analytics/performance-test-pages/visible-basic.html b/test/manual/amp-analytics/performance-test-pages/visible-basic.html
index 6836fb78cd4fb..c8dd8c8e8b155 100644
--- a/test/manual/amp-analytics/performance-test-pages/visible-basic.html
+++ b/test/manual/amp-analytics/performance-test-pages/visible-basic.html
@@ -16,7 +16,7 @@
             -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
@@ -25,7 +25,7 @@
                 visibility: visible
             }
         }
-        
+
         @-moz-keyframes -amp-start {
             from {
                 visibility: hidden
@@ -34,7 +34,7 @@
                 visibility: visible
             }
         }
-        
+
         @-ms-keyframes -amp-start {
             from {
                 visibility: hidden
@@ -43,7 +43,7 @@
                 visibility: visible
             }
         }
-        
+
         @-o-keyframes -amp-start {
             from {
                 visibility: hidden
@@ -52,7 +52,7 @@
                 visibility: visible
             }
         }
-        
+
         @keyframes -amp-start {
             from {
                 visibility: hidden
diff --git a/test/manual/amp-analytics/performance-test-pages/visible-multiple.html b/test/manual/amp-analytics/performance-test-pages/visible-multiple.html
index a6287dd2b9e12..4ce5e6e73e870 100644
--- a/test/manual/amp-analytics/performance-test-pages/visible-multiple.html
+++ b/test/manual/amp-analytics/performance-test-pages/visible-multiple.html
@@ -1,4 +1,4 @@
-<!-- This testing page is meant to imitate a longer page with multiple sets of 
+<!-- This testing page is meant to imitate a longer page with multiple sets of
 text, images, links, and ads.
 TODO(micajuineho) add back ads when serving compiled js -->
 <!DOCTYPE html>
@@ -16,7 +16,7 @@
             -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
@@ -25,7 +25,7 @@
                 visibility: visible
             }
         }
-        
+
         @-moz-keyframes -amp-start {
             from {
                 visibility: hidden
@@ -34,7 +34,7 @@
                 visibility: visible
             }
         }
-        
+
         @-ms-keyframes -amp-start {
             from {
                 visibility: hidden
@@ -43,7 +43,7 @@
                 visibility: visible
             }
         }
-        
+
         @-o-keyframes -amp-start {
             from {
                 visibility: hidden
@@ -52,7 +52,7 @@
                 visibility: visible
             }
         }
-        
+
         @keyframes -amp-start {
             from {
                 visibility: hidden
diff --git a/test/manual/amp-analytics/variable-request-examples.html b/test/manual/amp-analytics/variable-request-examples.html
index 9ab3ee3ee93f3..a78bb8e99df63 100644
--- a/test/manual/amp-analytics/variable-request-examples.html
+++ b/test/manual/amp-analytics/variable-request-examples.html
@@ -13,7 +13,7 @@
             -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
@@ -22,7 +22,7 @@
                 visibility: visible
             }
         }
-        
+
         @-moz-keyframes -amp-start {
             from {
                 visibility: hidden
@@ -31,7 +31,7 @@
                 visibility: visible
             }
         }
-        
+
         @-ms-keyframes -amp-start {
             from {
                 visibility: hidden
@@ -40,7 +40,7 @@
                 visibility: visible
             }
         }
-        
+
         @-o-keyframes -amp-start {
             from {
                 visibility: hidden
@@ -49,7 +49,7 @@
                 visibility: visible
             }
         }
-        
+
         @keyframes -amp-start {
             from {
                 visibility: hidden
@@ -75,7 +75,7 @@
         border-collapse: collapse;
         border-spacing: 0;
     }
-    
+
     .tg td {
         font-family: Arial, sans-serif;
         font-size: 14px;
@@ -86,7 +86,7 @@
         word-break: normal;
         border-color: black;
     }
-    
+
     .tg th {
         font-family: Arial, sans-serif;
         font-size: 14px;
@@ -98,13 +98,13 @@
         word-break: normal;
         border-color: black;
     }
-    
+
     .tg .tg-1wig {
         font-weight: bold;
         text-align: left;
         vertical-align: top
     }
-    
+
     .tg .tg-0lax {
         text-align: left;
         vertical-align: top
@@ -294,7 +294,7 @@ <h2>Known Caveats</h2>
             </tr>
         </table>
     </p>
-   
+
     <p>
         Analytics var substitution for args of macro
         <table class="tg">
@@ -371,7 +371,7 @@ <h2>Known Caveats</h2>
     </p>
 
     <p>
-        Nested arguments substitution with parenthesis 
+        Nested arguments substitution with parenthesis
         <table class="tg">
             <tr>
               <th class="tg-1wig">vars:</th>
diff --git a/test/manual/amp-analytics/variable-request-tester.html b/test/manual/amp-analytics/variable-request-tester.html
index 562f9b705205b..e334ed359ae0a 100644
--- a/test/manual/amp-analytics/variable-request-tester.html
+++ b/test/manual/amp-analytics/variable-request-tester.html
@@ -17,7 +17,7 @@
             -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
@@ -26,7 +26,7 @@
                 visibility: visible
             }
         }
-        
+
         @-moz-keyframes -amp-start {
             from {
                 visibility: hidden
@@ -35,7 +35,7 @@
                 visibility: visible
             }
         }
-        
+
         @-ms-keyframes -amp-start {
             from {
                 visibility: hidden
@@ -44,7 +44,7 @@
                 visibility: visible
             }
         }
-        
+
         @-o-keyframes -amp-start {
             from {
                 visibility: hidden
@@ -53,7 +53,7 @@
                 visibility: visible
             }
         }
-        
+
         @keyframes -amp-start {
             from {
                 visibility: hidden
diff --git a/test/manual/amp-animation/embeds/scrollbound/clock.a4a.html b/test/manual/amp-animation/embeds/scrollbound/clock.a4a.html
index ed224afa3adfd..4210cef90c1d6 100644
--- a/test/manual/amp-animation/embeds/scrollbound/clock.a4a.html
+++ b/test/manual/amp-animation/embeds/scrollbound/clock.a4a.html
@@ -61,7 +61,7 @@
       on="scroll:clockAnim.seekTo(percent=event.percent)"
       layout="nodisplay"></amp-position-observer>
     <amp-img id="clock-bg" layout="fill"
-      src="https://raw.githubusercontent.com/ampproject/amphtml/master/examples/img/clock.jpg">
+      src="https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/clock.jpg">
     </amp-img>
     <div id="clockHand" class="clock-hand"></div>
   </div>
diff --git a/test/manual/amp-base-carousel/autoadvance.amp.html b/test/manual/amp-base-carousel/autoadvance.amp.html
deleted file mode 100644
index e8b70432aafd8..0000000000000
--- a/test/manual/amp-base-carousel/autoadvance.amp.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Basic Carousel</title>
-  <link rel="canonical" href="amps.html" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
-  <style amp-custom>
-    amp-base-carousel img {
-      object-fit: cover;
-    }
-  </style>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <h1>An Auto Advancing Carousel</h1>
-  <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" auto-advance="true">
-    <amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
-  </amp-base-carousel>
-  <button on="tap:carousel-1.prev()">Prev</button>
-  <button on="tap:carousel-1.next()">Next</button>
-  <button on="tap:carousel-1.goToSlide(index = 1)">Slide 2 (1 indexed)</button>
-</body>
-</html>
diff --git a/test/manual/amp-base-carousel/basic.amp.html b/test/manual/amp-base-carousel/basic.amp.html
deleted file mode 100644
index d73bef2e8cd84..0000000000000
--- a/test/manual/amp-base-carousel/basic.amp.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Basic Carousel</title>
-  <link rel="canonical" href="amps.html" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
-  <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
-  <style amp-custom>
-    amp-base-carousel img {
-      object-fit: cover;
-    }
-  </style>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <h1>A Basic carousel, with looping</h1>
-  <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" lightbox>
-    <amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/orangegradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/tealgradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/lilacgradient.png" layout="flex-item"></amp-img>
-  </amp-base-carousel>
-  <button on="tap:carousel-1.prev()">Prev</button>
-  <button on="tap:carousel-1.next()">Next</button>
-  <button on="tap:carousel-1.goToSlide(index = 1)">Slide 2 (1 indexed)</button>
-</body>
-</html>
diff --git a/test/manual/amp-base-carousel/grouping-move-by-2.amp.html b/test/manual/amp-base-carousel/grouping-move-by-2.amp.html
deleted file mode 100644
index 19044df7f0cdc..0000000000000
--- a/test/manual/amp-base-carousel/grouping-move-by-2.amp.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Basic Carousel</title>
-  <link rel="canonical" href="amps.html" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
-  <style amp-custom>
-    amp-base-carousel img {
-      object-fit: cover;
-    }
-
-    .slide {
-      padding: 4px;
-    }
-  </style>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <h1>Move by two slides, no looping</h1>
-  <!--
-    Using aspect ratio of 3:2 for images, showing 2 at a time, so carousel
-    should have an aspect ratio of 6:2.
-  -->
-  <amp-base-carousel id="carousel-1" width="6" height="2" layout="responsive" loop="false" visible-count="2" advance-count="2" snap-by="2">
-    <amp-img class="slide" src="./img/redgradient.png" layout="flex-item"></amp-img>
-    <amp-img class="slide" src="./img/greengradient.png" layout="flex-item"></amp-img>
-    <amp-img class="slide" src="./img/bluegradient.png" layout="flex-item"></amp-img>
-    <amp-img class="slide" src="./img/orangegradient.png" layout="flex-item"></amp-img>
-    <amp-img class="slide" src="./img/tealgradient.png" layout="flex-item"></amp-img>
-    <amp-img class="slide" src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
-  </amp-base-carousel>
-  <button on="tap:carousel-1.prev()">Prev</button>
-  <button on="tap:carousel-1.next()">Next</button>
-  <button on="tap:carousel-1.goToSlide(index = 1)">Slide 2 (1 indexed)</button>
-</body>
-</html>
diff --git a/test/manual/amp-base-carousel/hidden-controls.amp.html b/test/manual/amp-base-carousel/hidden-controls.amp.html
deleted file mode 100644
index b9a1bd8e46824..0000000000000
--- a/test/manual/amp-base-carousel/hidden-controls.amp.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Basic Carousel</title>
-  <link rel="canonical" href="amps.html" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
-  <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
-  <style amp-custom>
-    amp-base-carousel img {
-      object-fit: cover;
-    }
-  </style>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <h1>Hidden controls</h1>
-  <amp-base-carousel  width="300" height="200" layout="responsive" controls="never" loop="true">
-    <amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/orangegradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/tealgradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/lilacgradient.png" layout="flex-item"></amp-img>
-  </amp-base-carousel>
-</body>
-</html>
diff --git a/test/manual/amp-base-carousel/index.html b/test/manual/amp-base-carousel/index.html
deleted file mode 100644
index ecf81d48d4cd6..0000000000000
--- a/test/manual/amp-base-carousel/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <title>amp-base-carousel 0.2</title>
-    <style>
-      li {
-        padding: 8px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h2>Experiments</h2>
-
-    <ul>
-      <li>
-        <a href="./enable-experiment.html">enable experiments</a>
-      </li>
-      <li>
-        <a href="./disable-layers.html">disable layers</a>
-      </li>
-    </ul>
-
-    <h2>Tests</h2>
-    
-    <ul>
-      <li>
-        <a href="./basic.amp.html">basic</a>
-      </li>
-      <li>
-        <a href="./max-swipe-one.amp.html">maximum swipe of one slide, looping</a>
-      </li>
-      <li>
-        <a href="./max-swipe-one-no-loop.amp.html">maximum swipe of one slide, no loop</a>
-      </li>
-      <li>
-        <a href="./fixed-children.amp.html">Fixed size children</a>
-      </li>
-      <li>
-        <a href="./grouping.amp.html">grouping</a>
-      </li>
-      <li>
-        <a href="./grouping-autoadvance.amp.html">grouping w/ autoadvance</a>
-      </li>
-      <li>
-        <a href="./grouping-looping.amp.html">grouping and looping</a> 
-      </li>
-      <li>
-        <a href="./grouping-move-by-2.amp.html">grouping, snap by 2</a>
-      </li>
-      <li>
-        <a href="./mixed-lengths.amp.html">mixed lengths</a>
-      </li>
-      <li>
-        <a href="./mixed-lengths-no-snap.amp.html">mixed lengths no snap</a>
-      </li>
-      <li>
-        <a href="./non-looping.amp.html">no looping</a>
-      </li>
-      <li>
-        <a href="./peeking-sides-centered.amp.html">peeking sides (centered)</a>
-      </li>
-      <li>
-        <a href="./peeking-sides-start-aligned.amp.html">peeking sides</a>
-      </li>
-      <li>
-        <a href="./tweets.amp.html">tweets</a>
-      </li>
-    </ul>
-  </body>
-</html>
-
diff --git a/test/manual/amp-base-carousel/mixed-lengths-no-snap.amp.html b/test/manual/amp-base-carousel/mixed-lengths-no-snap.amp.html
deleted file mode 100644
index 751fec55ed349..0000000000000
--- a/test/manual/amp-base-carousel/mixed-lengths-no-snap.amp.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Mixed lengths carousel, looping</title>
-  <link rel="canonical" href="amps.html" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
-<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
-  <style amp-custom>
-    body {
-      font-family: 'Questrial', Arial;
-    }
-
-    amp-base-carousel .slide.slide img{
-      object-fit: cover;
-    }
-
-    .slide {
-      padding: 4px;
-    }
-
-    .narrow {
-      width: 50%;
-    }
-
-    .wide {
-      width: 75%;
-    }
-  </style>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <h1>Mixed lengths carousel, looping</h1>
-  <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" mixed-length="true" snap="false" lightbox>
-    <amp-img class="slide wide" src="./img/redgradient.png" height="200" layout="fixed-height"></amp-img>
-    <amp-img class="slide narrow" src="./img/bluegradient.png" height="200" layout="fixed-height"></amp-img>
-    <amp-img class="slide wide" src="./img/orangegradient.png" height="200" layout="fixed-height"></amp-img>
-    <amp-img class="slide narrow" src="./img/greengradient.png" height="200" layout="fixed-height"></amp-img>
-    <amp-img class="slide wide" src="./img/tealgradient.png" height="200" layout="fixed-height"></amp-img>
-  </amp-base-carousel>
-</body>
-</html>
diff --git a/test/manual/amp-base-carousel/mixed-lengths.amp.html b/test/manual/amp-base-carousel/mixed-lengths.amp.html
deleted file mode 100644
index b408e6747a71d..0000000000000
--- a/test/manual/amp-base-carousel/mixed-lengths.amp.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Mixed lengths carousel, looping</title>
-  <link rel="canonical" href="amps.html" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
-  <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
-  <style amp-custom>
-    body {
-      font-family: 'Questrial', Arial;
-    }
-
-    amp-base-carousel .slide.slide img{
-      object-fit: cover;
-    }
-
-    .slide {
-      padding: 4px;
-    }
-
-    .narrow {
-      width: 50%;
-    }
-
-    .wide {
-      width: 75%;
-    }
-  </style>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <h1>Mixed lengths carousel, looping</h1>
-  <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" mixed-length="true" snap-align="center" lightbox>
-    <amp-img class="slide wide" src="./img/redgradient.png" height="200" layout="fixed-height"></amp-img>
-    <amp-img class="slide narrow" src="./img/bluegradient.png" height="200" layout="fixed-height"></amp-img>
-    <amp-img class="slide wide" src="./img/orangegradient.png" height="200" layout="fixed-height"></amp-img>
-    <amp-img class="slide narrow" src="./img/greengradient.png" height="200" layout="fixed-height"></amp-img>
-    <amp-img class="slide wide" src="./img/tealgradient.png" height="200" layout="fixed-height"></amp-img>
-  </amp-base-carousel>
-</body>
-</html>
diff --git a/test/manual/amp-base-carousel/vertical.amp.html b/test/manual/amp-base-carousel/vertical.amp.html
deleted file mode 100644
index 111a8583af6bf..0000000000000
--- a/test/manual/amp-base-carousel/vertical.amp.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Vertical Carousel</title>
-  <link rel="canonical" href="amps.html" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
-  <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
-  <style amp-custom>
-    amp-base-carousel img {
-      object-fit: cover;
-    }
-  </style>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-  <h1>A vertical carousel</h1>
-  <amp-base-carousel id="carousel-1" width="300" height="200" layout="responsive" loop="true" horizontal="false" lightbox>
-    <amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/orangegradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/tealgradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
-    <amp-img src="./img/lilacgradient.png" layout="flex-item"></amp-img>
-  </amp-base-carousel>
-  <button on="tap:carousel-1.prev()">Prev</button>
-  <button on="tap:carousel-1.next()">Next</button>
-  <button on="tap:carousel-1.goToSlide(index = 1)">Slide 2 (1 indexed)</button>
-</body>
-</html>
diff --git a/test/manual/amp-bind-intersection-observer-polyfill.html b/test/manual/amp-bind-intersection-observer-polyfill.html
index cf00d5be92564..ee11239059b37 100644
--- a/test/manual/amp-bind-intersection-observer-polyfill.html
+++ b/test/manual/amp-bind-intersection-observer-polyfill.html
@@ -5,7 +5,6 @@
     <title>amp-bind: Basic</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <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>
       <script async src="https://cdn.ampproject.org/v0.js"></script>
       <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
@@ -21,7 +20,7 @@
   </head>
 
   <body>
-    
+
     <amp-analytics>
       <script type="application/json">
         {
@@ -46,7 +45,7 @@
         }
       </script>
     </amp-analytics>
-    
+
 
     <h2>Basic example</h2>
     <p [text]="foo">After clicking the button below, this will read 'foo'<p>
diff --git a/test/manual/amp-carousel-scroll-regression.amp.html b/test/manual/amp-carousel-scroll-regression.amp.html
index d1d0a57eeefd6..179193083ac7e 100644
--- a/test/manual/amp-carousel-scroll-regression.amp.html
+++ b/test/manual/amp-carousel-scroll-regression.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
 <script async src="https://cdn.ampproject.org/v0.js"></script>
 <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
 </head>
diff --git a/test/manual/amp-carousel-scroll-test.amp.html b/test/manual/amp-carousel-scroll-test.amp.html
index 11c74341ede85..09b1c53a6df68 100644
--- a/test/manual/amp-carousel-scroll-test.amp.html
+++ b/test/manual/amp-carousel-scroll-test.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
   <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
   <style amp-custom>
@@ -18,7 +17,7 @@
   /**
    * Margin:0 is currently needed for iOS viewer embeds.
    * See:
-   * https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md
+   * https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md
    */
   body {
     margin: 0 !important;
diff --git a/test/manual/amp-carousel.amp.html b/test/manual/amp-carousel.amp.html
index 8d85068eb8ad5..2534ca3496383 100644
--- a/test/manual/amp-carousel.amp.html
+++ b/test/manual/amp-carousel.amp.html
@@ -89,5 +89,10 @@ <h1>amp #0</h1>
     <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no" width=400 height=300></amp-img>
     <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no" width=400 height=300></amp-img>
   </amp-carousel>
+
+  <amp-carousel width=360 height=360 type="slides" autoplay controls loop delay="6000" id="slider-with-preview" layout="responsive">
+    <amp-img src="/examples/img/bigbuckbunny copy.jpg" width=360 height=360 layout="responsive" alt="aa" lightbox></amp-img>
+    <amp-img src="/examples/img/bigbuckbunny.jpg" width=360 height=360 layout="responsive" alt="aa" lightbox></amp-img>
+  </amp-carousel>
 </body>
 </html>
diff --git a/test/manual/amp-carousel/0.1/hidden-controls.amp.html b/test/manual/amp-carousel/0.1/hidden-controls.amp.html
deleted file mode 100644
index 6bf803a603354..0000000000000
--- a/test/manual/amp-carousel/0.1/hidden-controls.amp.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Carousel 0.1</title>
-  <link rel="canonical" href="amps.html" >
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
-  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <style amp-custom>
-    rect.red {
-      fill: red;
-    }
-    rect.blue {
-      fill: blue;
-    }
-    rect.green {
-      fill: green;
-    }
-    /* 
-     * Mimics [i-amphtml-carousel-hide-buttons] CSS rules. 
-     * This is necessary because the component normally only applies these styles
-     * when a `touch` gesture is detected on the AMP doc. Because e2e test environments
-     * run with `mouse` gesture, the correct styles are not automatically applied in
-     * the test fixture. This simulates the CSS that *would* be applied so we can test
-     * behaviors specific to the `touch` amp-carousel experience.
-     * TODO(wg-infra): This can be removed once a `touch` e2e environment is supported.
-     */
-    .amp-carousel-button-next{
-      opacity: 0;
-      pointer-events: none;
-      visibility: visible !important;
-    }
-  </style>
-</head>
-<body>
-  <h1>Hidden controls</h1>
-  <amp-carousel
-  id="scrollable-carousel"
-  width="400"
-  height="225"
-  layout="fixed"
-  type="slides">
-  <amp-layout layout="responsive" width="440" height="225">
-    <svg viewBox="0 0 440 225">
-      <rect class="red" width="440" height="225" />
-      Sorry, your browser does not support inline SVG.
-    </svg>
-  </amp-layout>
-  <amp-layout layout="responsive" width="440" height="225">
-    <svg viewBox="0 0 440 225">
-      <rect class="blue" width="440" height="225" />
-      Sorry, your browser does not support inline SVG.
-    </svg>
-  </amp-layout>
-  <amp-layout layout="responsive" width="440" height="225">
-    <svg viewBox="0 0 440 225">
-      <rect class="green" width="440" height="225"/>
-      Sorry, your browser does not support inline SVG.
-    </svg>
-  </amp-layout>
-</amp-carousel>
-</body>
-</html>
diff --git a/test/manual/amp-carousel/img/bluegradient.png b/test/manual/amp-carousel/img/bluegradient.png
new file mode 100644
index 0000000000000..569390db9dfb0
Binary files /dev/null and b/test/manual/amp-carousel/img/bluegradient.png differ
diff --git a/test/manual/amp-carousel/img/greengradient.png b/test/manual/amp-carousel/img/greengradient.png
new file mode 100644
index 0000000000000..bfb18d62370aa
Binary files /dev/null and b/test/manual/amp-carousel/img/greengradient.png differ
diff --git a/test/manual/amp-carousel/img/lemonyellowgradient.png b/test/manual/amp-carousel/img/lemonyellowgradient.png
new file mode 100644
index 0000000000000..39352b9db480b
Binary files /dev/null and b/test/manual/amp-carousel/img/lemonyellowgradient.png differ
diff --git a/test/manual/amp-carousel/img/lilacgradient.png b/test/manual/amp-carousel/img/lilacgradient.png
new file mode 100644
index 0000000000000..44fc95abab50c
Binary files /dev/null and b/test/manual/amp-carousel/img/lilacgradient.png differ
diff --git a/test/manual/amp-carousel/img/orangegradient.png b/test/manual/amp-carousel/img/orangegradient.png
new file mode 100644
index 0000000000000..9d0b8349340a8
Binary files /dev/null and b/test/manual/amp-carousel/img/orangegradient.png differ
diff --git a/test/manual/amp-carousel/img/redgradient.png b/test/manual/amp-carousel/img/redgradient.png
new file mode 100644
index 0000000000000..3580295fa1d62
Binary files /dev/null and b/test/manual/amp-carousel/img/redgradient.png differ
diff --git a/test/manual/amp-carousel/img/tealgradient.png b/test/manual/amp-carousel/img/tealgradient.png
new file mode 100644
index 0000000000000..024f1eca51bd7
Binary files /dev/null and b/test/manual/amp-carousel/img/tealgradient.png differ
diff --git a/test/manual/amp-close-or-navigate-target.amp.html b/test/manual/amp-close-or-navigate-target.amp.html
index 073cffb1b63aa..222d6e40d461f 100644
--- a/test/manual/amp-close-or-navigate-target.amp.html
+++ b/test/manual/amp-close-or-navigate-target.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
diff --git a/test/manual/amp-close-or-navigate.amp.html b/test/manual/amp-close-or-navigate.amp.html
index 4117866534771..8dde39b65c129 100644
--- a/test/manual/amp-close-or-navigate.amp.html
+++ b/test/manual/amp-close-or-navigate.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <style amp-custom>
diff --git a/test/manual/amp-consent/amp-consent-actions.html b/test/manual/amp-consent/amp-consent-actions.html
new file mode 100644
index 0000000000000..953e9e02dae63
--- /dev/null
+++ b/test/manual/amp-consent/amp-consent-actions.html
@@ -0,0 +1,218 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>AMP Consent GEO Test</title>
+  <link rel="canonical" href="amp-consent.amp.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <meta name="amp-consent-blocking" content="amp-twitter">
+
+  <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
+
+  <style amp-custom>
+    body {
+      margin: 0;
+      font-family: 'Georgia', Serif;
+    }
+    .brand-logo {
+      font-family: 'Open Sans';
+    }
+    .content-container p {
+      line-height: 24px;
+    }
+    header,
+    .article-body {
+      padding: 15px;
+    }
+    figure {
+      margin: 0;
+    }
+    figcaption {
+      color: #6f757a;
+      padding: 15px 0;
+      font-size: .9em;
+    }
+    .author {
+      display: flex;
+      align-items: center;
+      background: #f4f4f4;
+      padding: 0 15px;
+      font-size: .8em;
+      border: solid #dcdcdc;
+      border-width: 1px 0;
+    }
+    .header-time {
+      color: #a8a3ae;
+      font-family: 'Roboto';
+      font-size: 12px;
+    }
+    .author p {
+      margin: 5px;
+    }
+    .byline {
+      font-family: 'Roboto';
+      display: inline-block;
+    }
+    .byline p {
+      line-height: normal;
+    }
+    .byline .brand {
+      color: #6f757a;
+    }
+    .standfirst {
+      color: #6f757a;
+    }
+    .mailto {
+      text-decoration: none;
+    }
+    /* defaults */
+    .unknown:after {
+    content: 'in unknown geo group';
+    }
+    /* override */
+    .amp-geo-group-na .unknown:after {
+    content: 'in na geogroup';
+    }
+    h1 {
+      margin: 5px 0;
+      font-weight: normal;
+    }
+    footer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 226px;
+      background: #f4f4f4;
+    }
+    amp-consent {
+      min-height: 30px;
+      font-family: 'Roboto';
+      font-weight: 500;
+      line-height: 30px;
+      padding: 8px;
+      background: #46b6ac;
+    }
+    amp-consent button {
+      border: none;
+      border-radius: 2px;
+      color: #fafafa;
+      height: 26px;
+      min-width: 32px;
+      padding: 0 16px;
+      margin: 0 16px;
+      text-transform: uppercase;
+      letter-spacing: 0;
+      cursor: pointer;
+      vertical-align: middle;
+      line-height: 26px;
+      text-align: center;
+      background: #3f51b5;
+    }
+    hr {
+      margin: 0;
+    }
+  </style>
+  <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
+  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+<header>
+  <div class="brand-logo">
+    PublisherLogo
+  </div>
+</header>
+<main role="main">
+
+
+  <h3>Image that is blocked by '_till_responded' consent</h3>
+
+  <amp-img
+    data-block-on-consent='_till_responded'
+    src="/examples/img/bigbuckbunny.jpg" width=300 height=200></amp-img>
+
+  <h3>Image that is blocked by '_till_accepted' consent</h3>
+  <amp-img
+    data-block-on-consent='_till_accepted'
+    src="/examples/img/bigbuckbunny.jpg" width=300 height=200></amp-img>
+
+  <h3>Image that is blocked by '_auto_reject' consent</h3>
+  <amp-img
+    data-block-on-consent='_auto_reject'
+    src="/examples/img/bigbuckbunny.jpg" width=300 height=200></amp-img>
+
+  <h3>Image that is blocked by 'default' consent</h3>
+  <amp-img
+    data-block-on-consent='default'
+    src="/examples/img/bigbuckbunny.jpg" width=300 height=200></amp-img>
+
+  <h3>Image that is NOT blocked by consent</h3>
+  <amp-img
+    src="/examples/img/ima-poster.png" width=300 height=200></amp-img>
+
+  <amp-consent id='ABC' layout='nodisplay'>
+    <script type="application/json">{
+      "consentInstanceId": "consent-clinet",
+      "consentRequired": true,
+      "postPromptUI": "postPromptUI",
+      "checkConsentHref": "/check-consent?consentRequired=true",
+      "promptUI": "ui1"
+    }</script>
+
+    <div id="ui1">
+      NA: Can I load the image??
+      <button on="tap:ABC.accept">Accept</button>
+      <button on="tap:ABC.reject">Reject</button>
+      <button on="tap:ABC.dismiss">Dismiss</button>
+    </div>
+
+    <div id="postPromptUI">
+      <button on="tap:ABC.prompt()">Manage Consent</button>
+      <button on="tap:ABC.prompt(expireCache=true)">Revoke & Manage Consent</button>
+    </div>
+  </amp-consent>
+
+  <article>
+    <div class="content-container">
+      <header>
+        <h1 itemprop="headline">Lorem Ipsum</h1>
+        <time class="header-time" itemprop="datePublished"
+              datetime="2015-09-14 13:00">September 14, 2015</time>
+        <p class="standfirst">
+          Fusce pretium tempor justo, vitae consequat dolor maximus eget.
+        </p>
+      </header>
+
+      <div class="author">
+        <div class="byline">
+          <p>
+            by <span itemscope itemtype="http://schema.org/Person"
+                     itemprop="author"><b>Lorem Ipsum</b>
+              <a class="mailto" href="mailto:lorem.ipsum@">
+              lorem.ipsum@</a></span>
+          </p>
+          <p class="brand">PublisherName News Reporter<p>
+        </div>
+      </div>
+      <div class="article-body" itemprop="articleBody">
+        <p>
+          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.
+        </p>
+      </div>
+    </div>
+  </article>
+</main>
+
+<footer>
+  <div class="brand-logo">PublisherLogo</div>
+</footer>
+</body>
+</html>
diff --git a/test/manual/amp-consent/amp-consent-cmp-overlay.html b/test/manual/amp-consent/amp-consent-cmp-overlay.html
index c149800963a8a..1287a7af2c30c 100644
--- a/test/manual/amp-consent/amp-consent-cmp-overlay.html
+++ b/test/manual/amp-consent/amp-consent-cmp-overlay.html
@@ -147,6 +147,7 @@
     }
   </style>
   <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
+  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
   <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
   <style amp-boilerplate>
     body {
@@ -227,7 +228,26 @@ <h3>Image that is blocked by both consent</h3>
 
     <h3>Image that is NOT blocked by consent</h3>
     <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n" width=300 height=200></amp-img>
-
+    <amp-analytics>
+      <script type="application/json">
+        {
+          "requests": {
+            "old": "https://fake.com/analytics?consent=CONSENT_STATE&p1=CONSENT_METADATA(purposeOne)"
+          },
+          "triggers": {
+            "onetime": {
+              "on": "visible",
+              "request": "old"
+            }
+          },
+          "transport": {
+            "beacon": false,
+            "xhrpost": false,
+            "image": true
+          }
+        }
+      </script>
+    </amp-analytics>
     <amp-consent id='ABC' layout='nodisplay' type='_ping_'>
       <script type="application/json">
         {
@@ -247,19 +267,19 @@ <h3>Image that is NOT blocked by consent</h3>
       </script>
       <div id="ui1">
         Please Accept to load image.
-        <button on="tap:ABC.accept" role="button">Accept</button>
-        <button on="tap:ABC.reject" role="button">Reject</button>
-        <button on="tap:ABC.dismiss" role="button">Dismiss</button>
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
       </div>
       <div id="ui2">
         Please Accept to load image.
-        <button on="tap:ABC.accept" role="button">Accept</button>
-        <button on="tap:ABC.reject" role="button">Reject</button>
-        <button on="tap:ABC.dismiss" role="button">Dismiss</button>
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
       </div>
       <div id="postPromptUI">
         Post Prompt UI
-        <button on="tap:ABC.prompt(consent=_ping_)" role="button">Manage</button>
+        <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
       </div>
     </amp-consent>
     <article>
@@ -275,15 +295,15 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
         <div>
           Revoke consent ABC and DEF
-          <button class="button" on="tap:ABC.prompt(consent=ABC),ABC.prompt(consent=DEF)" role="button">Manage</button>
+          <button class="button" on="tap:ABC.prompt(consent=ABC),ABC.prompt(consent=DEF)">Manage</button>
         </div>
         <div>
           Revoke error consent doesn't exsit
-          <button class="button" on="tap:ABC.prompt(consent=ABCd)" role="button">Manage</button>
+          <button class="button" on="tap:ABC.prompt(consent=ABCd)">Manage</button>
         </div>
         <div>
           Only revoke DEF
-          <button class="button" on="tap:ABC.prompt(consent=DEF)" role="button">Manage</button>
+          <button class="button" on="tap:ABC.prompt(consent=DEF)">Manage</button>
         </div>
 
         <div class="author">
@@ -361,11 +381,5 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
   <footer>
     <div class="brand-logo">PublisherLogo</div>
   </footer>
-  <script>
-    (self.AMP = self.AMP || []).push(function(AMP) {
-      AMP.toggleExperiment('amp-consent-restrict-fullscreen', true);
-    });
-  </script>
 </body>
-
 </html>
diff --git a/test/manual/amp-consent/amp-consent-granular-consent.html b/test/manual/amp-consent/amp-consent-granular-consent.html
new file mode 100644
index 0000000000000..ea0eff9f69300
--- /dev/null
+++ b/test/manual/amp-consent/amp-consent-granular-consent.html
@@ -0,0 +1,244 @@
+<!doctype html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8" />
+    <title>AMP Consent Granular Consent</title>
+    <link rel="canonical" href="self.html" />
+    <meta name="viewport" content="width=device-width" />
+    <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>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
+    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+    <script>
+      (self.AMP = self.AMP || []).push(function(AMP) {
+        AMP.toggleExperiment('amp-consent-granular-consent', true);
+      });
+  </script>
+
+<style amp-custom>
+  amp-consent {
+    min-height: 30px;
+    font-family: 'Roboto';
+    font-weight: 500;
+    line-height: 30px;
+    padding: 8px;
+    background: #46b6ac;
+  }
+
+  amp-consent button {
+    border: none;
+    border-radius: 2px;
+
+    color: #fafafa;
+    height: 26px;
+    min-width: 32px;
+    padding: 0 16px;
+    margin: 0 16px;
+    text-transform: uppercase;
+    letter-spacing: 0;
+    cursor: pointer;
+    vertical-align: middle;
+    line-height: 26px;
+    text-align: center;
+    background: #3f51b5;
+  }
+</style>
+  </head>
+
+<body>
+  <header>
+    <div class="brand-logo">
+      PublisherLogo
+    </div>
+  </header>
+  <main role="main">
+    <h3>Image that is blocked by both consent</h3>
+    <amp-img data-block-on-consent-purposes="purpose-foo,purpose-bar" src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n"
+      width=300 height=200></amp-img>
+
+    <h3>Image that is only blocked by only 'purpose-foo'</h3>
+    <amp-img data-block-on-consent-purposes="purpose-foo" src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n" width=300 height=200></amp-img>
+
+    <h3>Image that is blocked by global consent</h3>
+    <amp-img data-block-on-consent src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n"
+      width=300 height=200></amp-img>
+
+    <h3>Image that is NOT blocked by consent</h3>
+    <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n" width=300 height=200></amp-img>
+
+    <!-- INLINE EXAMPLE -->
+    <amp-consent id='ABC' layout='nodisplay'>
+      <script type="application/json">{
+        "consentInstanceId": "consent-clinet",
+        "promptUI": "ui1",
+        "postPromptUI": "postPromptUI",
+        "consentRequired": true,
+        "purposeConsentRequired": ["purpose-foo", "purpose-bar", "purpose-xyz"],
+        "checkConsentHref": "/check-consent?consentRequired=true&expireCache=false"
+      }</script>
+      <div id="ui1">
+          Explictly set `purpose-foo`:
+          <button on="tap:ABC.setPurpose(purpose-foo=true)">ACCEPT FOO</button>
+          <br>
+          Explictly set multiple purposes:
+          <button on="tap:ABC.setPurpose(purpose-foo=true,purpose-bar=true)">ACCEPT FOO & BAR</button>
+          <br>
+          Toggle `purpose-bar`:
+          <label for="consent-purpose-xyz">
+            <input
+              type="checkbox"
+              on="change:ABC.setPurpose(purpose-xyz=event.checked)"
+              id="consent-purpose-xyz"
+            >
+            Toggle Bar Consent
+          </label>
+
+          <br>
+          CA: Can I load the image??
+          <button on="tap:ABC.accept">Accept</button>
+          <button on="tap:ABC.reject(purposeConsentDefault=true)">Reject</button>
+          <button on="tap:ABC.dismiss">Dismiss</button>
+        </div>
+        <div id="postPromptUI">
+          Post Prompt UI
+          <button on="tap:ABC.prompt">Manage</button>
+        </div>
+    </amp-consent>
+
+
+    <!-- CMP EXAMPLE -->
+    <!-- <amp-consent id='ABC' layout='nodisplay' type='_ping_'>
+      <script type="application/json">
+        {
+          "postPromptUI": "postPromptUI",
+          "clientConfig": {
+            "CMP_id": "asdf",
+            "other_info": "ahhhh"
+          },
+          "uiConfig": {
+            "overlay": true
+          },
+          "captions": {
+            "consentPromptCaption": "Ping Consent Dialog",
+            "buttonActionCaption": "CLICK ME TO FOCUS"
+          }
+        }
+      </script>
+      <div id="ui1">
+        Please Accept to load image.
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
+      </div>
+      <div id="ui2">
+        Please Accept to load image.
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
+      </div>
+      <div id="postPromptUI">
+        Post Prompt UI
+        <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
+      </div>
+    </amp-consent> -->
+    <article>
+
+      <div class="content-container">
+        <header>
+          <h1 itemprop="headline">Lorem Ipsum</h1>
+          <time class="header-time" itemprop="datePublished" datetime="2015-09-14 13:00">September 14, 2015</time>
+          <p class="standfirst">
+            Fusce pretium tempor justo, vitae consequat dolor maximus eget.
+          </p>
+        </header>
+
+        <div>
+          Revoke consent ABC and DEF
+          <button class="button" on="tap:ABC.prompt(consent=ABC),ABC.prompt(consent=DEF)">Manage</button>
+        </div>
+        <div>
+          Revoke error consent doesn't exsit
+          <button class="button" on="tap:ABC.prompt(consent=ABCd)">Manage</button>
+        </div>
+        <div>
+          Only revoke DEF
+          <button class="button" on="tap:ABC.prompt(consent=DEF)">Manage</button>
+        </div>
+
+        <div class="author">
+          <div class="byline">
+            <p>
+              by <span itemscope itemtype="http://schema.org/Person" itemprop="author"><b>Lorem Ipsum</b>
+          <a class="mailto" href="mailto:lorem.ipsum@">
+          lorem.ipsum@</a></span>
+            </p>
+            <p class="brand">PublisherName News Reporter
+              <p>
+          </div>
+        </div>
+        <div class="article-body" itemprop="articleBody">
+          <p>
+            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.
+          </p>
+          <p>
+            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.
+          </p>
+
+          <p>
+            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.
+          </p>
+          <p>
+            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.
+          </p>
+
+          <figure>
+            <figcaption>
+              Fusce pretium tempor justo, vitae consequat dolor maximus eget.
+            </figcaption>
+          </figure>
+          <hr>
+
+          <p>
+            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.
+          </p>
+
+          <p>
+            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.
+          </p>
+        </div>
+      </div>
+    </article>
+  </main>
+
+  <footer>
+    <div class="brand-logo">PublisherLogo</div>
+  </footer>
+</body>
+</html>
diff --git a/test/manual/amp-consent/amp-consent-inline-postPromptUI.html b/test/manual/amp-consent/amp-consent-inline-postPromptUI.html
new file mode 100644
index 0000000000000..93142b54dab62
--- /dev/null
+++ b/test/manual/amp-consent/amp-consent-inline-postPromptUI.html
@@ -0,0 +1,214 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>AMP Consent GEO Test</title>
+  <link rel="canonical" href="amp-consent.amp.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <meta name="amp-consent-blocking" content="amp-twitter">
+
+  <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
+
+  <style amp-custom>
+    body {
+      margin: 0;
+      font-family: 'Georgia', Serif;
+    }
+    .brand-logo {
+      font-family: 'Open Sans';
+    }
+    .content-container p {
+      line-height: 24px;
+    }
+    header,
+    .article-body {
+      padding: 15px;
+    }
+    figure {
+      margin: 0;
+    }
+    figcaption {
+      color: #6f757a;
+      padding: 15px 0;
+      font-size: .9em;
+    }
+    .author {
+      display: flex;
+      align-items: center;
+      background: #f4f4f4;
+      padding: 0 15px;
+      font-size: .8em;
+      border: solid #dcdcdc;
+      border-width: 1px 0;
+    }
+    .header-time {
+      color: #a8a3ae;
+      font-family: 'Roboto';
+      font-size: 12px;
+    }
+    .author p {
+      margin: 5px;
+    }
+    .byline {
+      font-family: 'Roboto';
+      display: inline-block;
+    }
+    .byline p {
+      line-height: normal;
+    }
+    .byline .brand {
+      color: #6f757a;
+    }
+    .standfirst {
+      color: #6f757a;
+    }
+    .mailto {
+      text-decoration: none;
+    }
+    /* defaults */
+    .unknown:after {
+    content: 'in unknown geo group';
+    }
+    /* override */
+    .amp-geo-group-na .unknown:after {
+    content: 'in na geogroup';
+    }
+    h1 {
+      margin: 5px 0;
+      font-weight: normal;
+    }
+    footer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 226px;
+      background: #f4f4f4;
+    }
+    amp-consent {
+      min-height: 30px;
+      font-family: 'Roboto';
+      font-weight: 500;
+      line-height: 30px;
+      padding: 8px;
+    }
+    amp-consent button {
+      border: none;
+      border-radius: 2px;
+      color: #fafafa;
+      height: 26px;
+      min-width: 32px;
+      padding: 0 16px;
+      margin: 0 16px;
+      text-transform: uppercase;
+      letter-spacing: 0;
+      cursor: pointer;
+      vertical-align: middle;
+      line-height: 26px;
+      text-align: center;
+      background: #3f51b5;
+    }
+    hr {
+      margin: 0;
+    }
+  </style>
+  <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+<header>
+  <div class="brand-logo">
+    PublisherLogo
+  </div>
+</header>
+<main role="main">
+
+
+  <h3>Image that is blocked by '_till_responded' consent</h3>
+
+  <amp-img
+    data-block-on-consent='_till_responded'
+    src="/examples/img/bigbuckbunny.jpg" width=300 height=200></amp-img>
+
+  <h3>Image that is blocked by '_till_accepted' consent</h3>
+  <amp-img
+    data-block-on-consent='_till_accepted'
+    src="/examples/img/bigbuckbunny.jpg" width=300 height=200></amp-img>
+
+  <h3>Image that is blocked by '_auto_reject' consent</h3>
+  <amp-img
+    data-block-on-consent='_auto_reject'
+    src="/examples/img/bigbuckbunny.jpg" width=300 height=200></amp-img>
+
+  <h3>Image that is blocked by 'default' consent</h3>
+  <amp-img
+    data-block-on-consent='default'
+    src="/examples/img/bigbuckbunny.jpg" width=300 height=200></amp-img>
+
+  <h3>Image that is NOT blocked by consent</h3>
+  <amp-img
+    src="/examples/img/ima-poster.png" width=300 height=200></amp-img>
+
+  <amp-consent id='ABC' layout='nodisplay'>
+    <script type="application/json">{
+      "consentInstanceId": "consent-clinet",
+      "consentRequired": true,
+      "promptUI": "ui2",
+      "postPromptUI": "postPromptUI"
+    }</script>
+
+    <div id="ui2">
+        EU: Can I load the image??
+        <button id="accept" on="tap:ABC.accept">Accept</button>
+        <button id="reject" on="tap:ABC.reject">Reject</button>
+        <button id="dismiss" on="tap:ABC.dismiss">Dismiss</button>
+      </div>
+  </amp-consent>
+
+  <article>
+    <div class="content-container">
+      <header>
+        <h1 itemprop="headline">Lorem Ipsum</h1>
+        <time class="header-time" itemprop="datePublished"
+              datetime="2015-09-14 13:00">September 14, 2015</time>
+        <p class="standfirst">
+          Fusce pretium tempor justo, vitae consequat dolor maximus eget.
+        </p>
+      </header>
+
+      <div class="author">
+        <div class="byline">
+          <p>
+            by <span itemscope itemtype="http://schema.org/Person"
+                     itemprop="author"><b>Lorem Ipsum</b>
+              <a class="mailto" href="mailto:lorem.ipsum@">
+              lorem.ipsum@</a></span>
+          </p>
+          <p class="brand">PublisherName News Reporter<p>
+        </div>
+      </div>
+      <div class="article-body" itemprop="articleBody">
+        <p>
+          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.
+        </p>
+      </div>
+    </div>
+    <div id="postPromptUI">
+      Post Prompt UI
+      <button on="tap:ABC.prompt">Manage</button>
+    </div>
+  </article>
+</main>
+
+<footer>
+  <div class="brand-logo">PublisherLogo</div>
+</footer>
+</body>
+</html>
diff --git a/test/manual/amp-consent/amp-consent-syncing-cid-forwarding.amp.html b/test/manual/amp-consent/amp-consent-syncing-cid-forwarding.amp.html
new file mode 100644
index 0000000000000..81ec37153365d
--- /dev/null
+++ b/test/manual/amp-consent/amp-consent-syncing-cid-forwarding.amp.html
@@ -0,0 +1,145 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>AMP Linker</title>
+  <link rel="canonical" href="analytics.amp.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+  <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
+</head>
+<body>
+  <amp-analytics>
+    <script type="application/json">
+    {
+      "vars": {
+        "linkerVar": "LINKER_PARAM(ga, foo)"
+      },
+      "requests": {
+        "endpoint": "/analytics/foo?b=${encoded}",
+        "click": "${endpoint}&gclid=LINKER_PARAM(ga, gclid)"
+      },
+      "triggers": {
+        "pageview": {
+          "on": "visible",
+          "request": "endpoint"
+        },
+        "click": {
+          "on": "click",
+          "request": "click",
+          "selector": "#btn"
+        }
+      },
+      "linkers" : {
+        "authId": {
+          "destinationDomains": ["localhost"],
+          "enabled": true,
+          "proxyOnly": false,
+          "ids": {
+            "_a": "CLIENT_ID(AMP-CONSENT)"
+          }
+        },
+        "analyticsAuthId": {
+          "destinationDomains": ["localhost"],
+          "enabled": true,
+          "proxyOnly": false,
+          "ids": {
+            "_g": "CLIENT_ID(test)"
+          }
+        }
+      }
+    }
+    </script>
+  </amp-analytics>
+
+  <h1 id="top">AMP Analytics</h1>
+  <div><a href="https://www.example.com">example.com #1</a></div>
+  <div><a href="https://www.example.com">example.com #2</a></div>
+  <div><a href="https://www.google.com">google.com</a></div>
+  <div><a href="https://www.ampproject.com">ampproject.com</a></div>
+  <button id="btn">Button</button>
+  <a href="./amp-consent-syncing-cid-receiving.amp.html">LINK TO NON-PROXY ORIGIN SHOULD PASS THE CID AS A LINKER PARAM</a>
+
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque augue quis elementum tempus. Pellentesque sit amet
+    neque bibendum, sagittis purus vitae, pellentesque magna. Vestibulum non viverra metus, eget feugiat lacus. Nulla in
+    maximus orci. Maecenas id turpis vel ipsum vestibulum bibendum ut sit amet magna. Nullam hendrerit ex at est eleifend,
+    nec dignissim nibh rutrum. Aliquam quis tellus et nibh faucibus laoreet in eget turpis. Nam quam nisl, porttitor vel
+    ex eget, dapibus placerat dui. Mauris commodo pellentesque leo, eu tempus quam. In hac habitasse platea dictumst. Suspendisse
+    non ante finibus, luctus augue non, luctus orci. Vestibulum ornare lacinia aliquam. In sollicitudin vehicula vulputate.
+    Sed mi elit, commodo nec sapien nec, pretium bibendum leo. Donec id justo tortor. Ut in mauris dapibus, laoreet metus
+    vitae, dictum nisi.
+  </p>
+  <p>
+    Integer dapibus egestas arcu. Nunc vitae velit congue, placerat augue quis, suscipit nisi. Donec suscipit imperdiet turpis
+    pharetra feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus
+    aliquam eleifend dolor, at lacinia orci semper vel. Nunc semper sem vel tincidunt posuere. Nunc lobortis velit vitae
+    condimentum mollis. Morbi eu ullamcorper mauris. Pellentesque ac eros maximus, pulvinar sapien vitae, semper nisi. Curabitur
+    imperdiet non mauris vitae sollicitudin.
+  </p>
+  <p>
+    Nam posuere velit euismod risus pulvinar, in sollicitudin sapien consectetur. Vestibulum nec ex odio. Quisque at elit nec
+    nunc ultricies lacinia nec non lorem. Maecenas porttitor consequat mauris, vitae porttitor ligula pellentesque ut. Pellentesque
+    rhoncus diam vel lacus lobortis imperdiet. Sed maximus dictum hendrerit. Vivamus ornare, purus in laoreet sagittis, est
+    ante pretium mauris, vel vulputate arcu erat eget mauris. Suspendisse eu lorem metus. Aliquam tempus aliquet urna, vitae
+    mollis lacus pretium vitae. Etiam semper gravida commodo. Maecenas at pulvinar quam. Nullam dolor ipsum, ornare a sollicitudin
+    et, sodales porttitor neque.
+  </p>
+  <p>
+    Integer in felis at lacus mattis facilisis. Curabitur tincidunt, felis porttitor mollis finibus, tortor elit elementum dolor,
+    vel vulputate lorem dui id ante. Vivamus in velit at lectus blandit gravida vitae quis arcu. Nam et magna magna. Fusce
+    condimentum diam lacus, ac ullamcorper purus malesuada eu. Mauris ullamcorper elit et venenatis faucibus. Nullam lobortis
+    molestie purus quis pellentesque. Sed at libero id nisi rhoncus tincidunt. Praesent vestibulum vehicula tristique. Etiam
+    rutrum, nunc id porta interdum, nulla nisi molestie leo, at fermentum justo dolor at lorem. Duis in egestas sapien.
+  </p>
+  <p>
+    Donec pharetra molestie sollicitudin. Duis mattis eleifend rutrum. Quisque luctus tincidunt lacus, vitae lobortis nisi malesuada
+    ac. Aliquam mattis leo vel elit rutrum, nec consequat massa vestibulum. Maecenas bibendum metus nec ante feugiat, eu
+    faucibus orci mattis. Cras tristique sem non elit congue malesuada. Proin ornare, lacus et porttitor consequat, sapien
+    urna rutrum diam, ac pellentesque ligula est eget nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+    Donec ultrices sollicitudin eros a placerat. Proin eget pulvinar est. Donec posuere ultrices odio at ultrices. Suspendisse
+    potenti. Phasellus id orci id purus porttitor consectetur a at erat. Nullam volutpat ultricies nisl id maximus. Morbi
+    porta ex ante, et egestas odio ultricies consequat.
+  </p>
+  <p>
+    <ul>
+      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+      <li>Aliquam in ex porta, imperdiet elit sit amet, condimentum diam.</li>
+      <li>Etiam fermentum nisi at porta pulvinar.</li>
+    </ul>
+  </p>
+  <p>
+    <ul>
+      <li>Proin mattis neque vel elit posuere molestie.</li>
+      <li>Integer tincidunt sem sed nunc auctor elementum.</li>
+      <li>Integer a felis in ipsum aliquet auctor sit amet a neque.</li>
+    </ul>
+  </p>
+  <p>
+    <ul>
+      <li>Sed suscipit dolor molestie, rhoncus quam ac, lacinia ex.</li>
+      <li>Curabitur et tellus vel justo ultrices aliquet sed id turpis.</li>
+      <li>Nam finibus risus at justo elementum bibendum.</li>
+      <li>In non lacus non urna congue feugiat at vel diam.</li>
+    </ul>
+  </p>
+  <p>
+    <ul>
+      <li>Integer hendrerit augue interdum dui venenatis, sit amet tristique mauris cursus.</li>
+      <li>Etiam quis eros viverra, tincidunt justo in, facilisis nunc.</li>
+      <li>Aliquam at lacus faucibus, congue lorem interdum, semper mauris.</li>
+      <li>Ut vulputate erat vel feugiat pharetra.</li>
+      <li>Morbi id augue id orci sagittis tempus.</li>
+      <li>Vestibulum varius libero ac dignissim sodales.</li>
+    </ul>
+  </p>
+  <p>
+    <ul>
+      <li>Aenean ac sem eget libero varius viverra sit amet vitae nunc.</li>
+    </ul>
+  </p>
+</div>
+</body>
+</html>
diff --git a/test/manual/amp-consent/amp-consent-syncing-cid-receiving.amp.html b/test/manual/amp-consent/amp-consent-syncing-cid-receiving.amp.html
new file mode 100644
index 0000000000000..684c195303bd9
--- /dev/null
+++ b/test/manual/amp-consent/amp-consent-syncing-cid-receiving.amp.html
@@ -0,0 +1,154 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>AMP Analytics</title>
+  <link rel="canonical" href="analytics.amp.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <meta name="amp-consent-blocking" content="amp-video">
+  <style amp-custom>
+    .box {
+      background: #ccc;
+      border: 1px solid #aaa;
+      padding: 10px;
+      margin: 10px;
+    }
+    #container {
+      position: absolute;
+      top: 10000px;
+      height: 10px;
+    }
+  </style>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
+  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+</head>
+<body>
+<p>Scroll down to see content</p>
+<div id="container">
+Container for analytics tags. Positioned far away from top to make sure that doesn't matter.
+
+<div class="logo"></div>
+<h1 id="top">AMP Analytics</h1>
+<span id="test1" class="box" data-vars-title="Example request with element level overrides">
+  Click here to generate an event
+</span>
+<p>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque augue quis elementum tempus. Pellentesque sit amet neque bibendum, sagittis purus vitae, pellentesque magna. Vestibulum non viverra metus, eget feugiat lacus. Nulla in maximus orci. Maecenas id turpis vel ipsum vestibulum bibendum ut sit amet magna. Nullam hendrerit ex at est eleifend, nec dignissim nibh rutrum. Aliquam quis tellus et nibh faucibus laoreet in eget turpis. Nam quam nisl, porttitor vel ex eget, dapibus placerat dui. Mauris commodo pellentesque leo, eu tempus quam. In hac habitasse platea dictumst. Suspendisse non ante finibus, luctus augue non, luctus orci. Vestibulum ornare lacinia aliquam. In sollicitudin vehicula vulputate. Sed mi elit, commodo nec sapien nec, pretium bibendum leo. Donec id justo tortor. Ut in mauris dapibus, laoreet metus vitae, dictum nisi.
+</p>
+<p>
+Integer dapibus egestas arcu. Nunc vitae velit congue, placerat augue quis, suscipit nisi. Donec suscipit imperdiet turpis pharetra feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus aliquam eleifend dolor, at lacinia orci semper vel. Nunc semper sem vel tincidunt posuere. Nunc lobortis velit vitae condimentum mollis. Morbi eu ullamcorper mauris. Pellentesque ac eros maximus, pulvinar sapien vitae, semper nisi. Curabitur imperdiet non mauris vitae sollicitudin.
+</p>
+<p>
+Nam posuere velit euismod risus pulvinar, in sollicitudin sapien consectetur. Vestibulum nec ex odio. Quisque at elit nec nunc ultricies lacinia nec non lorem. Maecenas porttitor consequat mauris, vitae porttitor ligula pellentesque ut. Pellentesque rhoncus diam vel lacus lobortis imperdiet. Sed maximus dictum hendrerit. Vivamus ornare, purus in laoreet sagittis, est ante pretium mauris, vel vulputate arcu erat eget mauris. Suspendisse eu lorem metus. Aliquam tempus aliquet urna, vitae mollis lacus pretium vitae. Etiam semper gravida commodo. Maecenas at pulvinar quam. Nullam dolor ipsum, ornare a sollicitudin et, sodales porttitor neque.
+</p>
+<p>
+Integer in felis at lacus mattis facilisis. Curabitur tincidunt, felis porttitor mollis finibus, tortor elit elementum dolor, vel vulputate lorem dui id ante. Vivamus in velit at lectus blandit gravida vitae quis arcu. Nam et magna magna. Fusce condimentum diam lacus, ac ullamcorper purus malesuada eu. Mauris ullamcorper elit et venenatis faucibus. Nullam lobortis molestie purus quis pellentesque. Sed at libero id nisi rhoncus tincidunt. Praesent vestibulum vehicula tristique. Etiam rutrum, nunc id porta interdum, nulla nisi molestie leo, at fermentum justo dolor at lorem. Duis in egestas sapien.
+</p>
+
+<p>
+Donec pharetra molestie sollicitudin. Duis mattis eleifend rutrum. Quisque luctus tincidunt lacus, vitae lobortis nisi malesuada ac. Aliquam mattis leo vel elit rutrum, nec consequat massa vestibulum. Maecenas bibendum metus nec ante feugiat, eu faucibus orci mattis. Cras tristique sem non elit congue malesuada. Proin ornare, lacus et porttitor consequat, sapien urna rutrum diam, ac pellentesque ligula est eget nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ultrices sollicitudin eros a placerat. Proin eget pulvinar est. Donec posuere ultrices odio at ultrices. Suspendisse potenti. Phasellus id orci id purus porttitor consectetur a at erat. Nullam volutpat ultricies nisl id maximus. Morbi porta ex ante, et egestas odio ultricies consequat.
+</p>
+<p>
+<ul>
+<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+<li>Aliquam in ex porta, imperdiet elit sit amet, condimentum diam.</li>
+<li>Etiam fermentum nisi at porta pulvinar.</li>
+</ul>
+</p>
+<p>
+<ul>
+<li>Proin mattis neque vel elit posuere molestie.</li>
+<li>Integer tincidunt sem sed nunc auctor elementum.</li>
+<li>Integer a felis in ipsum aliquet auctor sit amet a neque.</li>
+</ul>
+</p>
+<p>
+<ul>
+<li>Sed suscipit dolor molestie, rhoncus quam ac, lacinia ex.</li>
+<li>Curabitur et tellus vel justo ultrices aliquet sed id turpis.</li>
+<li>Nam finibus risus at justo elementum bibendum.</li>
+<li>In non lacus non urna congue feugiat at vel diam.</li>
+</ul>
+</p>
+<p>
+<ul>
+<li>Integer hendrerit augue interdum dui venenatis, sit amet tristique mauris cursus.</li>
+<li>Etiam quis eros viverra, tincidunt justo in, facilisis nunc.</li>
+<li>Aliquam at lacus faucibus, congue lorem interdum, semper mauris.</li>
+<li>Ut vulputate erat vel feugiat pharetra.</li>
+<li>Morbi id augue id orci sagittis tempus.</li>
+<li>Vestibulum varius libero ac dignissim sodales.</li>
+</ul>
+</p>
+<p>
+<ul>
+<li>Aenean ac sem eget libero varius viverra sit amet vitae nunc.</li>
+</ul>
+</p>
+
+<amp-video id="myVideo" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" width="720"
+        height="405" layout="intrinsic" controls>
+        <div placeholder>
+          This is a placeholder
+        </div>
+        <div fallback>
+          This is a fallback
+        </div>
+      </amp-video>
+
+      <amp-analytics type="googleanalytics">
+        <script type="application/json">
+        {
+          "requests": {
+            "endpoint": "/analytics/foo?b=goog"
+          },
+          "triggers": {
+            "pageview": {
+              "on": "visible",
+              "request": "endpoint"
+            }
+          },
+          "linkers" : {
+            "proxyOnly": false,
+            "enabled": true
+          },
+          "cookies": {
+            "enabled": true,
+            "test": {
+              "value": "LINKER_PARAM(analyticsAuthId, _g)"
+            },
+            "AMP-CONSENT": {
+              "value": "LINKER_PARAM(authId, _a)"
+            }
+          }
+        }
+        </script>
+      </amp-analytics>
+
+<amp-consent id='ABC' layout='nodisplay' type='_ping_'>
+  <script type="application/json">
+    {
+      "postPromptUI": "postPromptUI",
+      "cookies": {
+        "enabled": true,
+        "AMP-CONSENT": {
+          "value": "LINKER_PARAM(authId, _a)"
+        },
+        "AMP-CONSENT-2": {
+          "value": "LINKER_PARAM(authId, _a)"
+        }
+      }
+    }
+  </script>
+  <div id="postPromptUI">
+    Post Prompt UI
+    <button on="tap:ABC.prompt(consent=_ping_)" role="button">Manage</button>
+  </div>
+</amp-consent>
+
+</div>
+</body>
+</html>
diff --git a/test/manual/amp-consent/legacy_config_support/amp-consent-cmp.html b/test/manual/amp-consent/legacy_config_support/amp-consent-cmp.html
index 392d99724beb0..3181fa760d196 100644
--- a/test/manual/amp-consent/legacy_config_support/amp-consent-cmp.html
+++ b/test/manual/amp-consent/legacy_config_support/amp-consent-cmp.html
@@ -270,7 +270,7 @@ <h3>Image that is NOT blocked by consent</h3>
       </script>
       <div id="postPromptUI">
         Post Prompt UI
-        <button on="tap:ABC.prompt(consent=_ping_)" role="button">Manage</button>
+        <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
       </div>
     </amp-consent>
     <article>
@@ -286,15 +286,15 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
         <div>
           Revoke consent ABC and DEF
-          <button class="button" on="tap:ABC.prompt(consent=ABC),ABC.prompt(consent=DEF)" role="button">Manage</button>
+          <button class="button" on="tap:ABC.prompt(consent=ABC),ABC.prompt(consent=DEF)">Manage</button>
         </div>
         <div>
           Revoke error consent doesn't exsit
-          <button class="button" on="tap:ABC.prompt(consent=ABCd)" role="button">Manage</button>
+          <button class="button" on="tap:ABC.prompt(consent=ABCd)">Manage</button>
         </div>
         <div>
           Only revoke DEF
-          <button class="button" on="tap:ABC.prompt(consent=DEF)" role="button">Manage</button>
+          <button class="button" on="tap:ABC.prompt(consent=DEF)">Manage</button>
         </div>
 
         <div class="author">
@@ -372,12 +372,5 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
   <footer>
     <div class="brand-logo">PublisherLogo</div>
   </footer>
-
-  <script>
-    setTimeout(() => {
-      AMP.toggleExperiment('amp-consent-restrict-fullscreen', true);
-    }, 500);
-  </script>
 </body>
-
 </html>
diff --git a/test/manual/amp-consent/legacy_config_support/amp-consent-geo.html b/test/manual/amp-consent/legacy_config_support/amp-consent-geo.html
index 64fb9d8afe696..0d2d949327983 100644
--- a/test/manual/amp-consent/legacy_config_support/amp-consent-geo.html
+++ b/test/manual/amp-consent/legacy_config_support/amp-consent-geo.html
@@ -176,13 +176,13 @@ <h3>Image that is NOT blocked by consent</h3>
       }</script>
       <div id="ui1">
         Can I load the image??
-        <button on="tap:ABC.accept" role="button">Accept</button>
-        <button on="tap:ABC.reject" role="button">Reject</button>
-        <button on="tap:ABC.dismiss" role="button">Dismiss</button>
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
       </div>
       <div id="postPromptUI">
         Post Prompt UI
-        <button on="tap:ABC.prompt" role="button">Manage</button>
+        <button on="tap:ABC.prompt">Manage</button>
       </div>
     </amp-consent>
 
@@ -236,7 +236,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
         <div>
         Revoke consent
-        <button class="button" on="tap:ABC.prompt" role="button">Manage</button>
+        <button class="button" on="tap:ABC.prompt">Manage</button>
       </div>
 
         <div class="author">
diff --git a/test/manual/amp-consent/legacy_config_support/amp-consent-iframe.amp.html b/test/manual/amp-consent/legacy_config_support/amp-consent-iframe.amp.html
index 963472eb4eeec..1b4aa1b40e570 100644
--- a/test/manual/amp-consent/legacy_config_support/amp-consent-iframe.amp.html
+++ b/test/manual/amp-consent/legacy_config_support/amp-consent-iframe.amp.html
@@ -220,7 +220,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
         <div>
         Revoke consent
-        <button class="button" on="tap:ABC.prompt" role="button">Manage</button>
+        <button class="button" on="tap:ABC.prompt">Manage</button>
       </div>
 
         <div class="author">
@@ -356,7 +356,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
       </div>
       <div id="postPromptUI">
         Post Prompt UI
-        <button on="tap:ABC.prompt" role="button">Manage</button>
+        <button on="tap:ABC.prompt">Manage</button>
       </div>
     </amp-consent>
     </article>
diff --git a/test/manual/amp-consent/legacy_config_support/amp-consent.amp.html b/test/manual/amp-consent/legacy_config_support/amp-consent.amp.html
index 164d2a942ff1f..75dc5a7c2692d 100644
--- a/test/manual/amp-consent/legacy_config_support/amp-consent.amp.html
+++ b/test/manual/amp-consent/legacy_config_support/amp-consent.amp.html
@@ -233,13 +233,13 @@ <h3>Image that is NOT blocked by consent</h3>
       }</script>
       <div id="ui1">
         Can I load the image??
-        <button on="tap:ABC.accept" role="button">Accept</button>
-        <button on="tap:ABC.reject" role="button">Reject</button>
-        <button on="tap:ABC.dismiss" role="button">Dismiss</button>
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
       </div>
       <div id="postPromptUI">
         Post Prompt UI
-        <button on="tap:ABC.prompt" role="button">Manage</button>
+        <button on="tap:ABC.prompt">Manage</button>
       </div>
     </amp-consent>
     <article>
@@ -257,7 +257,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
         <div>
         Revoke consent
-        <button class="button" on="tap:ABC.prompt" role="button">Manage</button>
+        <button class="button" on="tap:ABC.prompt">Manage</button>
       </div>
 
         <div class="author">
diff --git a/test/manual/amp-iframe-animate-container.html b/test/manual/amp-iframe-animate-container.html
index e6bd3a1b01a1e..2eb3db62608b2 100644
--- a/test/manual/amp-iframe-animate-container.html
+++ b/test/manual/amp-iframe-animate-container.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <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>
     body {
diff --git a/test/manual/amp-ima-video.html b/test/manual/amp-ima-video.html
index ecca876b03e60..43907e49d970e 100644
--- a/test/manual/amp-ima-video.html
+++ b/test/manual/amp-ima-video.html
@@ -5,7 +5,6 @@
     <title>IMA examples</title>
     <link rel="canonical" href="amps.html" >
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
     <script async custom-element="amp-ima-video" src="https://cdn.ampproject.org/v0/amp-ima-video-0.1.js"></script>
     <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
     <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
diff --git a/test/manual/amp-image-lightbox.amp.html b/test/manual/amp-image-lightbox.amp.html
index b59aaad5c5c36..d10d1612c787a 100644
--- a/test/manual/amp-image-lightbox.amp.html
+++ b/test/manual/amp-image-lightbox.amp.html
@@ -162,4 +162,3 @@ <h1>Image Lightbox</h1>
 </article>
 </body>
 </html>
-
diff --git a/test/manual/amp-img-sizes.amp.html b/test/manual/amp-img-sizes.amp.html
index 133f9ea579fcd..50e11ec847121 100644
--- a/test/manual/amp-img-sizes.amp.html
+++ b/test/manual/amp-img-sizes.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <style amp-custom>
     .large {
       width: 600px;
diff --git a/test/manual/amp-img.amp.html b/test/manual/amp-img.amp.html
index 503c799382df7..b8d83fc2c410d 100644
--- a/test/manual/amp-img.amp.html
+++ b/test/manual/amp-img.amp.html
@@ -40,6 +40,8 @@ <h1>amp-image</h1>
   <div placeholder>Waiting for the image!</div>
   </amp-img>
 
+  <amp-img src="/examples/img/bigbuckbunny copy.jpg" width="626" height="417" layout="responsive" alt="aa"></amp-img>
+
   <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n" width=400 height=300 layout=responsive
       heights="(min-width:760px)  33%, (min-width:500px) 75%, 125%" ></amp-img>
 
diff --git a/test/manual/amp-inline-gallery/captions.html b/test/manual/amp-inline-gallery/captions.html
new file mode 100644
index 0000000000000..d452b17db7973
--- /dev/null
+++ b/test/manual/amp-inline-gallery/captions.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>A Basic inline gallery</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+
+  <script>
+    (self.AMP=self.AMP||[]).push(function(AMP){
+      AMP.toggleExperiment('amp-truncate-text', true);
+    });
+  </script>
+  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
+  <script async custom-element="amp-truncate-text" src="https://cdn.ampproject.org/v0/amp-truncate-text-0.1.js"></script>
+  <script async custom-element="amp-inline-gallery" src="https://cdn.ampproject.org/v0/amp-inline-gallery-0.1.js"></script>
+  <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <style amp-custom>
+    .gallery .slide img {
+      object-fit: cover;
+    }
+
+    .caption {
+      font-size: 1em;
+      line-height: 1.25;
+    }
+
+    .attribution {
+      font-size: 0.9em;
+      opacity: 0.8;
+    }
+
+    amp-inline-gallery {
+      --caption-margin-top: 4px;
+    }
+
+    amp-inline-gallery-captions {
+      padding: 3px 0;
+    }
+  </style>
+</head>
+<body>
+  <h1></h1>
+  <amp-inline-gallery layout="container">
+    <amp-base-carousel
+        class="gallery"
+        layout="responsive"
+        width="3" height="2"
+        snap-align="center"
+        loop="false"
+        controls="always"
+        lightbox>
+      <amp-inline-gallery-slide class="slide" layout="flex-item">
+        <amp-img src="./img/ivars-krutainis-jTJ9-4ESzU4-unsplash-small.jpg" layout="flex-item"></amp-img>
+        <span class="caption" slot="caption">
+          The first slide's caption. This is a desert with a single tree in the frame and a mountain in the backdrop. This is some extra text such that it is truncated. Since we have an attribution, that should still show up.
+        </span>
+        <span class="attribution" slot="attribution">This is an attribution (not truncated).</span>
+      </amp-inline-gallery-slide>
+
+      <amp-inline-gallery-slide class="slide" layout="flex-item">
+        <amp-img src="./img/ola-gronlund--MuvLw5G6x8-unsplash-small.jpg" layout="flex-item"></amp-img>
+        <span class="caption" slot="caption">
+          This is the second slide's caption. It is a close up shot of a blossoming flower.
+        </span>
+        <span class="attribution" slot="attribution">This is an attribution (not truncated).</span>
+      </amp-inline-gallery-slide>
+
+      <amp-inline-gallery-slide class="slide" layout="flex-item">
+        <amp-img src="./img/sander-dewerte--jcP3xbN88w-unsplash-small.jpg" layout="flex-item"></amp-img>
+        <span class="caption" slot="caption">
+          The third slide's caption. This is a moon in a cloudy night sky. The arrow buttons should be visible against the background. This is some extra text to force truncation on smaller viewport sizes so that the truncation logic can be tested.
+        </span>
+      </amp-inline-gallery-slide>
+
+      <amp-inline-gallery-slide class="slide" layout="flex-item">
+        <amp-img src="./img/alan-jones-OQsxdghBKrU-unsplash-small.jpg" layout="flex-item"></amp-img>
+        <span class="caption" slot="caption">
+          The fourth slide's caption. A sky at sunset.
+        </span>
+      </amp-inline-gallery-slide>
+
+    </amp-base-carousel>
+    <amp-inline-gallery-captions layout="fixed-height" height="3.75em">
+    </amp-inline-gallery-captions>
+    <amp-inline-gallery-pagination layout="nodisplay" inset>
+    </amp-inline-gallery-pagination>
+  </amp-inline-gallery>
+  <h2>Config</h2>
+  <ul>
+
+  </ul>
+</body>
+</html>
diff --git a/test/manual/amp-inline-gallery/rtl.amp.html b/test/manual/amp-inline-gallery/rtl.amp.html
index 09ea3bb2c7fd9..f7cb94430c75b 100644
--- a/test/manual/amp-inline-gallery/rtl.amp.html
+++ b/test/manual/amp-inline-gallery/rtl.amp.html
@@ -16,6 +16,8 @@
 
     .flex {
       display: flex;
+      width: 100%;
+      height: 100%;
     }
 
     .white {
@@ -37,7 +39,8 @@
           linear-gradient(45deg, transparent 75%, #666 75%),
           linear-gradient(-45deg, transparent 75%, #666 75%);
       background-size: 20px 20px;
-      background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+      width: 100%;
+      height: 100%;
     }
   </style>
 </head>
diff --git a/test/manual/amp-install-serviceworker.amp.html b/test/manual/amp-install-serviceworker.amp.html
index 8a3e18e148367..6553647cbf6d3 100644
--- a/test/manual/amp-install-serviceworker.amp.html
+++ b/test/manual/amp-install-serviceworker.amp.html
@@ -9,7 +9,7 @@
   <style amp-custom>
     body {
       max-width: 527px;
-      font-family: 'Questrial', Arial;
+      font-family: Arial;
     }
   </style>
   <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>
diff --git a/test/manual/amp-lightbox-carousel.amp.html b/test/manual/amp-lightbox-carousel.amp.html
index e05c7685a8411..eb080aeefffb7 100644
--- a/test/manual/amp-lightbox-carousel.amp.html
+++ b/test/manual/amp-lightbox-carousel.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
   <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
 
@@ -91,4 +90,3 @@ <h1>amp #0</h1>
 
 </body>
 </html>
-
diff --git a/test/manual/amp-lightbox-focus.amp.html b/test/manual/amp-lightbox-focus.amp.html
index 571cdad882b75..43b3da0ba08c6 100644
--- a/test/manual/amp-lightbox-focus.amp.html
+++ b/test/manual/amp-lightbox-focus.amp.html
@@ -18,7 +18,7 @@
       align-items: center;
       justify-content: center;
     }
-    
+
     #close-button {
       position: fixed;
       top: 20px;
@@ -30,7 +30,7 @@
       height: 120px;
       font-size: 24px;
     }
-    
+
     html,
     body {
       width: 100%;
@@ -39,20 +39,20 @@
       justify-content: center;
       align-items: center;
     }
-    
+
   </style>
 </head>
 <body>
   <amp-lightbox id="my-lightbox" layout="nodisplay">
     <div class="lightbox" role="button" tabindex="0">
-      <button id="close-button" on="tap:my-lightbox.close" role="button" tabindex="0">
+      <button id="close-button" on="tap:my-lightbox.close" tabindex="0">
         Close lightbox
       </button>
       <input id="input" type="text" autofocus>
-      
+
     </div>
   </amp-lightbox>
-    <button id="button" on="tap:my-lightbox" role="button" tabindex="0">
+    <button id="button" on="tap:my-lightbox" tabindex="0">
       Open lightbox
     </button>
 
diff --git a/test/manual/amp-lightbox-gallery-launch-captions.amp.html b/test/manual/amp-lightbox-gallery-launch-captions.amp.html
index 7e44d7aba53d1..e97bebc601452 100644
--- a/test/manual/amp-lightbox-gallery-launch-captions.amp.html
+++ b/test/manual/amp-lightbox-gallery-launch-captions.amp.html
@@ -96,6 +96,6 @@ <h2>Open with expanded caption</h2>
       </figcaption>
     </figure>
   </div>
-  
+
 </body>
 </html>
\ No newline at end of file
diff --git a/test/manual/amp-lightbox-gallery.amp.html b/test/manual/amp-lightbox-gallery.amp.html
index 9002a3a2beaa2..76339ac6fc540 100644
--- a/test/manual/amp-lightbox-gallery.amp.html
+++ b/test/manual/amp-lightbox-gallery.amp.html
@@ -66,7 +66,7 @@ <h3>Test with a scale, causing a crop</h3>
     lightbox
     src="https://ampbyexample-com.cdn.ampproject.org/i/s/ampbyexample.com/img/clean-2.jpg">
   </amp-img>
-  
+
 
   <h3>Expand horizontally</h3>
   <amp-img width=120 height=200
@@ -74,7 +74,7 @@ <h3>Expand horizontally</h3>
     lightbox
     src="https://ampbyexample-com.cdn.ampproject.org/i/s/ampbyexample.com/img/clean-2.jpg">
   </amp-img>
-  
+
   <h3>Expand vertically</h3>
   <amp-img width=200 height=120
     class="object-fit-cover"
diff --git a/test/manual/amp-lightbox.amp.html b/test/manual/amp-lightbox.amp.html
index 73b6ef7fa61ed..3ab6933a24b0f 100644
--- a/test/manual/amp-lightbox.amp.html
+++ b/test/manual/amp-lightbox.amp.html
@@ -95,4 +95,3 @@ <h1>amp #0</h1>
 
 </body>
 </html>
-
diff --git a/test/manual/amp-list/infinite-scroll-1.amp.html b/test/manual/amp-list/infinite-scroll-1.amp.html
index 646c46ce7e4e5..7f5eb3dad5d52 100644
--- a/test/manual/amp-list/infinite-scroll-1.amp.html
+++ b/test/manual/amp-list/infinite-scroll-1.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <style amp-custom>
 
     body {
diff --git a/test/manual/amp-list/load-more-refresh.amp.html b/test/manual/amp-list/load-more-refresh.amp.html
index 4ef8868413ad7..714549fc64681 100644
--- a/test/manual/amp-list/load-more-refresh.amp.html
+++ b/test/manual/amp-list/load-more-refresh.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <style amp-custom>
 
     body {
diff --git a/test/manual/amp-list/load-more-state.amp.html b/test/manual/amp-list/load-more-state.amp.html
index 29c19ba890019..318bc91688c92 100644
--- a/test/manual/amp-list/load-more-state.amp.html
+++ b/test/manual/amp-list/load-more-state.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <style amp-custom>
 
     body {
diff --git a/test/manual/amp-mega-menu/amp-mega-menu-with-list.amp.html b/test/manual/amp-mega-menu/amp-mega-menu-with-list.amp.html
index f20449bdba0f4..4000c492d4e36 100644
--- a/test/manual/amp-mega-menu/amp-mega-menu-with-list.amp.html
+++ b/test/manual/amp-mega-menu/amp-mega-menu-with-list.amp.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>amp-mega-menu</title>
   <link rel="canonical" href="amps.html">
-  <meta name="amp-experiments-opt-in" content="amp-mega-menu">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
diff --git a/test/manual/amp-mega-menu/amp-mega-menu.amp.html b/test/manual/amp-mega-menu/amp-mega-menu.amp.html
index 5c0054277302e..4e3f5905fac5b 100644
--- a/test/manual/amp-mega-menu/amp-mega-menu.amp.html
+++ b/test/manual/amp-mega-menu/amp-mega-menu.amp.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>amp-mega-menu</title>
   <link rel="canonical" href="amps.html">
-  <meta name="amp-experiments-opt-in" content="amp-mega-menu">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
diff --git a/test/manual/amp-megaphone.amp.html b/test/manual/amp-megaphone.amp.html
index 476071f2deaa4..12f1c1facfd23 100644
--- a/test/manual/amp-megaphone.amp.html
+++ b/test/manual/amp-megaphone.amp.html
@@ -24,7 +24,7 @@ <h2>Minimum Viable Episode</h2>
   <amp-megaphone height=166
     layout="fixed-height"
     data-episode="OSC7749686951"></amp-megaphone>
-  
+
   <h2>Minimum Playlist</h2>
 
   <amp-megaphone height=455
@@ -32,5 +32,3 @@ <h2>Minimum Playlist</h2>
     data-playlist="DEM6640968282"></amp-megaphone>
   </body>
 </html>
-
-
diff --git a/test/manual/amp-next-page/1.0/amp-next-page-v1.element-visibility.html b/test/manual/amp-next-page/1.0/amp-next-page-v1.element-visibility.html
index 46da3553f2b42..9b99216d09727 100644
--- a/test/manual/amp-next-page/1.0/amp-next-page-v1.element-visibility.html
+++ b/test/manual/amp-next-page/1.0/amp-next-page-v1.element-visibility.html
@@ -6,7 +6,6 @@
     <link rel="canonical" href="amps.html">
     <meta name="amp-experiments-opt-in" content="amp-next-page">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-0.1.js"></script>
@@ -15,7 +14,7 @@
       (self.AMP=self.AMP||[]).push(function(AMP){
           AMP.toggleExperiment('amp-next-page', true);
       });
-    </script>    
+    </script>
     <style amp-custom>
       .content {
         padding: 20px;
@@ -311,7 +310,7 @@ <h2>Content discovery</h2>
       </div>
       <div more-box>
           Here are a few more articles ...
-      </div>  
+      </div>
     </amp-next-page>
   </body>
 </html>
diff --git a/test/manual/amp-next-page/1.0/amp-next-page.amp.html b/test/manual/amp-next-page/1.0/amp-next-page.amp.html
index 07e9c5637f2a0..1a486c9b45270 100644
--- a/test/manual/amp-next-page/1.0/amp-next-page.amp.html
+++ b/test/manual/amp-next-page/1.0/amp-next-page.amp.html
@@ -5,7 +5,6 @@
     <title>AMP next page examples</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
@@ -70,11 +69,11 @@
               "visiblePercentageMin": "0",
               "repeat": true
             }
-          }  
+          }
         }
       }
       </script>
-    </amp-analytics>          
+    </amp-analytics>
     <div class="content">
       <h2>Host page</h2>
       <p>
@@ -314,7 +313,7 @@ <h2>Host page</h2>
         quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit
         rhoncus. Fusce commodo risus id sapien ultrices vehicula.
       </p>
-    </div>    
+    </div>
     <!-- amp-next-page configuration -->
     <amp-next-page>
       <script type="application/json">
diff --git a/test/manual/amp-next-page/1.0/amp-next-page.element-visibility.html b/test/manual/amp-next-page/1.0/amp-next-page.element-visibility.html
index c1fb23104d583..b0032a6aa4329 100644
--- a/test/manual/amp-next-page/1.0/amp-next-page.element-visibility.html
+++ b/test/manual/amp-next-page/1.0/amp-next-page.element-visibility.html
@@ -5,7 +5,6 @@
     <title>AMP next page element visibility examples</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
@@ -300,7 +299,7 @@ <h2>Content discovery</h2>
       </div>
       <div more-box>
           Here are a few more articles ...
-      </div>  
+      </div>
     </amp-next-page>
   </body>
 </html>
diff --git a/test/manual/amp-next-page/1.0/amp-next-page.script-templated-separator.amp.html b/test/manual/amp-next-page/1.0/amp-next-page.script-templated-separator.amp.html
index 7209c85279c82..32b9dcb56f7e0 100644
--- a/test/manual/amp-next-page/1.0/amp-next-page.script-templated-separator.amp.html
+++ b/test/manual/amp-next-page/1.0/amp-next-page.script-templated-separator.amp.html
@@ -5,7 +5,6 @@
     <title>AMP next page examples</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>
@@ -269,7 +268,7 @@ <h2>Host page</h2>
         quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit
         rhoncus. Fusce commodo risus id sapien ultrices vehicula.
       </p>
-    </div>    
+    </div>
     <!-- amp-next-page configuration -->
     <amp-next-page>
       <script type="application/json">
@@ -301,7 +300,7 @@ <h2>Host page</h2>
       </div>
       <div more-box>
           Here are a few more articles ...
-      </div>  
+      </div>
     </amp-next-page>
   </body>
 </html>
diff --git a/test/manual/amp-next-page/1.0/articles/article-long.html b/test/manual/amp-next-page/1.0/articles/article-long.html
index 5aa2f3354c127..79711e3b246a2 100644
--- a/test/manual/amp-next-page/1.0/articles/article-long.html
+++ b/test/manual/amp-next-page/1.0/articles/article-long.html
@@ -117,7 +117,7 @@
               "visiblePercentageMin": "0",
               "repeat": true
             }
-          }    
+          }
         }
       }
     </script>
diff --git a/test/manual/amp-next-page/1.0/articles/element-visibility-1.html b/test/manual/amp-next-page/1.0/articles/element-visibility-1.html
index e1bc7ea29a7e1..6e800d3c8e397 100644
--- a/test/manual/amp-next-page/1.0/articles/element-visibility-1.html
+++ b/test/manual/amp-next-page/1.0/articles/element-visibility-1.html
@@ -5,7 +5,6 @@
     <title>AMP next page element visibility examples</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
@@ -36,7 +35,7 @@
             left: 0;
             background-color: #27ae60;
         }
-    </style>  
+    </style>
 </head>
   <body>
     <div class="content">
diff --git a/test/manual/amp-next-page/1.0/articles/element-visibility-2.html b/test/manual/amp-next-page/1.0/articles/element-visibility-2.html
index e9180fa9b83d1..9c7c39f0c78b6 100644
--- a/test/manual/amp-next-page/1.0/articles/element-visibility-2.html
+++ b/test/manual/amp-next-page/1.0/articles/element-visibility-2.html
@@ -5,7 +5,6 @@
     <title>AMP next page element visibility examples</title>
     <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
diff --git a/test/manual/amp-pan-zoom/amp-pan-zoom-carousel.amp.html b/test/manual/amp-pan-zoom/amp-pan-zoom-carousel.amp.html
index 01c69e9c054d0..81afef0108199 100644
--- a/test/manual/amp-pan-zoom/amp-pan-zoom-carousel.amp.html
+++ b/test/manual/amp-pan-zoom/amp-pan-zoom-carousel.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
   <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
   <style amp-custom>
diff --git a/test/manual/amp-pan-zoom/amp-pan-zoom-initial.amp.html b/test/manual/amp-pan-zoom/amp-pan-zoom-initial.amp.html
index 600021e0cbe0b..329080b98e49e 100644
--- a/test/manual/amp-pan-zoom/amp-pan-zoom-initial.amp.html
+++ b/test/manual/amp-pan-zoom/amp-pan-zoom-initial.amp.html
@@ -5,7 +5,6 @@
   <title>AMP Pan Zoom Demo</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-pan-zoom" src="https://cdn.ampproject.org/v0/amp-pan-zoom-0.1.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
   <script>
@@ -310,4 +309,3 @@ <h1>AMP Pan-Zoom Right Aligned (Layout Fill)</h1>
 </article>
 </body>
 </html>
-
diff --git a/test/manual/amp-pan-zoom/amp-pan-zoom-integration.amp.html b/test/manual/amp-pan-zoom/amp-pan-zoom-integration.amp.html
index a8d1ad199a033..2abb8b080cd6c 100644
--- a/test/manual/amp-pan-zoom/amp-pan-zoom-integration.amp.html
+++ b/test/manual/amp-pan-zoom/amp-pan-zoom-integration.amp.html
@@ -5,7 +5,6 @@
   <title>AMP Pan Zoom Demo</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-pan-zoom" src="https://cdn.ampproject.org/v0/amp-pan-zoom-0.1.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
   <script>
@@ -150,4 +149,3 @@ <h1>AMP Pan-Zoom with other content on page</h1>
 </article>
 </body>
 </html>
-
diff --git a/test/manual/amp-pan-zoom/amp-pan-zoom-positioning.amp.html b/test/manual/amp-pan-zoom/amp-pan-zoom-positioning.amp.html
index 6795f74de5836..9b85e5c299eba 100644
--- a/test/manual/amp-pan-zoom/amp-pan-zoom-positioning.amp.html
+++ b/test/manual/amp-pan-zoom/amp-pan-zoom-positioning.amp.html
@@ -5,7 +5,6 @@
   <title>AMP Pan Zoom Demo</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-pan-zoom" src="https://cdn.ampproject.org/v0/amp-pan-zoom-0.1.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
 
@@ -194,4 +193,3 @@ <h1>AMP Pan-Zoom Layout Fixed Height</h1>
 </article>
 </body>
 </html>
-
diff --git a/test/manual/amp-pan-zoom/amp-pan-zoom.amp.html b/test/manual/amp-pan-zoom/amp-pan-zoom.amp.html
index c2c7c27001e1a..b4ae689abc4bc 100644
--- a/test/manual/amp-pan-zoom/amp-pan-zoom.amp.html
+++ b/test/manual/amp-pan-zoom/amp-pan-zoom.amp.html
@@ -5,7 +5,6 @@
   <title>AMP Pan Zoom Demo</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-pan-zoom" src="https://cdn.ampproject.org/v0/amp-pan-zoom-0.1.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
   <script>
@@ -368,4 +367,3 @@ <h2>AMP Pan Zoom Disable Doubletap Example</h2>
 </article>
 </body>
 </html>
-
diff --git a/test/manual/amp-pinterest.amp.html b/test/manual/amp-pinterest.amp.html
index fba23a9beb088..e21e0ac7f8c5a 100644
--- a/test/manual/amp-pinterest.amp.html
+++ b/test/manual/amp-pinterest.amp.html
@@ -5,7 +5,6 @@
   <title>Pinterest examples</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5,minimal-ui">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js" async></script>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/test/manual/amp-selector.amp.html b/test/manual/amp-selector.amp.html
index 84800b4a1dc0b..8dd2468f93dff 100644
--- a/test/manual/amp-selector.amp.html
+++ b/test/manual/amp-selector.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
   <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
   <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
@@ -15,7 +14,7 @@
     display: inline-block;
     position: relative !important;
   }
-    
+
   amp-selector[disabled],
   amp-selector [disabled] {
     opacity: .20;
diff --git a/test/manual/amp-sidebar.amp.html b/test/manual/amp-sidebar.amp.html
index fecd1280b52a2..b67d5cc4e912e 100644
--- a/test/manual/amp-sidebar.amp.html
+++ b/test/manual/amp-sidebar.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <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>
     body {
diff --git a/test/manual/amp-single-pass-compilation.html b/test/manual/amp-single-pass-compilation.html
index 180b890e4752d..24c7d9e530525 100644
--- a/test/manual/amp-single-pass-compilation.html
+++ b/test/manual/amp-single-pass-compilation.html
@@ -8,7 +8,7 @@
   <style amp-custom>
     body {
       max-width: 527px;
-      font-family: 'Questrial', Arial;
+      font-family: Arial;
     }
 
     amp-youtube iframe {
@@ -36,5 +36,3 @@ <h1>amp #0</h1>
       width="480" height="270"></amp-youtube>
 </body>
 </html>
-
-
diff --git a/test/manual/amp-slidescroll.amp.html b/test/manual/amp-slidescroll.amp.html
index 40fd98e5e329f..6f9bcb76ddc58 100644
--- a/test/manual/amp-slidescroll.amp.html
+++ b/test/manual/amp-slidescroll.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
   <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
   <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
@@ -23,7 +22,7 @@
   /**
    * Margin:0 is currently needed for iOS viewer embeds.
    * See:
-   * https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md
+   * https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md
    */
   body {
     margin: 0 !important;
@@ -196,4 +195,3 @@ <h1>Alter window size to less than 500px and more than 500px to change image vis
 
 </body>
 </html>
-
diff --git a/test/manual/amp-soundcloud.amp.html b/test/manual/amp-soundcloud.amp.html
index b74bf11552c6a..3e3888b65bd7b 100644
--- a/test/manual/amp-soundcloud.amp.html
+++ b/test/manual/amp-soundcloud.amp.html
@@ -41,5 +41,3 @@ <h2>Minimum Viable Clip</h2>
     data-trackid="243169232"></amp-soundcloud>
 </body>
 </html>
-
-
diff --git a/test/manual/amp-stream-gallery/basic.amp.html b/test/manual/amp-stream-gallery/basic.amp.html
index df144f69a20ba..15c8c3a93aeea 100644
--- a/test/manual/amp-stream-gallery/basic.amp.html
+++ b/test/manual/amp-stream-gallery/basic.amp.html
@@ -5,7 +5,6 @@
   <title>Stream Gallery</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-stream-gallery" src="https://cdn.ampproject.org/v0/amp-stream-gallery-0.1.js"></script>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/test/manual/amp-stream-gallery/custom-arrows.amp.html b/test/manual/amp-stream-gallery/custom-arrows.amp.html
index 316dae4c2e0eb..f7e5d7491c299 100644
--- a/test/manual/amp-stream-gallery/custom-arrows.amp.html
+++ b/test/manual/amp-stream-gallery/custom-arrows.amp.html
@@ -5,7 +5,6 @@
   <title>Stream Gallery</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-stream-gallery" src="https://cdn.ampproject.org/v0/amp-stream-gallery-0.1.js"></script>
   <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>
diff --git a/test/manual/amp-stream-gallery/enable-experiment.html b/test/manual/amp-stream-gallery/enable-experiment.html
index a43c415e0ca75..94456dfe0b032 100644
--- a/test/manual/amp-stream-gallery/enable-experiment.html
+++ b/test/manual/amp-stream-gallery/enable-experiment.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>Enable stream gallery experiments</title>
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <script src="https://cdn.ampproject.org/v0.js""></script>
+  <script src="https://cdn.ampproject.org/v0.js"></script>
   <script>
     AMP.toggleExperiment('layers', true);
     AMP.toggleExperiment('amp-stream-gallery', true);
diff --git a/test/manual/amp-stream-gallery/outset-arrows-partial-count-approximate.amp.html b/test/manual/amp-stream-gallery/outset-arrows-partial-count-approximate.amp.html
index 2d3e181f8ec4d..29c746f0bd06b 100644
--- a/test/manual/amp-stream-gallery/outset-arrows-partial-count-approximate.amp.html
+++ b/test/manual/amp-stream-gallery/outset-arrows-partial-count-approximate.amp.html
@@ -5,7 +5,6 @@
   <title>Stream Gallery</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-stream-gallery" src="https://cdn.ampproject.org/v0/amp-stream-gallery-0.1.js"></script>
   <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>
diff --git a/test/manual/amp-stream-gallery/outset-arrows-partial-count.amp.html b/test/manual/amp-stream-gallery/outset-arrows-partial-count.amp.html
index b58a8c67e9687..458fc8adb10c1 100644
--- a/test/manual/amp-stream-gallery/outset-arrows-partial-count.amp.html
+++ b/test/manual/amp-stream-gallery/outset-arrows-partial-count.amp.html
@@ -5,7 +5,6 @@
   <title>Stream Gallery</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-stream-gallery" src="https://cdn.ampproject.org/v0/amp-stream-gallery-0.1.js"></script>
   <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>
@@ -13,7 +12,7 @@
       display: flex;
       padding: 0 5px
     }
-    
+
     .item img {
       object-fit: contain;
     }
diff --git a/test/manual/amp-stream-gallery/outset-arrows.amp.html b/test/manual/amp-stream-gallery/outset-arrows.amp.html
index 50a4d9fc93fcc..3ee723f5826d4 100644
--- a/test/manual/amp-stream-gallery/outset-arrows.amp.html
+++ b/test/manual/amp-stream-gallery/outset-arrows.amp.html
@@ -5,7 +5,6 @@
   <title>Stream Gallery</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-stream-gallery" src="https://cdn.ampproject.org/v0/amp-stream-gallery-0.1.js"></script>
   <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>
@@ -13,7 +12,7 @@
       display: flex;
       padding: 0 5px
     }
-    
+
     .item img {
       object-fit: contain;
     }
diff --git a/test/manual/amp-stream-gallery/responsive.amp.html b/test/manual/amp-stream-gallery/responsive.amp.html
index 2c940a961abbe..cdf7802489a00 100644
--- a/test/manual/amp-stream-gallery/responsive.amp.html
+++ b/test/manual/amp-stream-gallery/responsive.amp.html
@@ -5,7 +5,6 @@
   <title>Stream Gallery</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-stream-gallery" src="https://cdn.ampproject.org/v0/amp-stream-gallery-0.1.js"></script>
   <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>
diff --git a/test/manual/amp-stream-gallery/rtl.amp.html b/test/manual/amp-stream-gallery/rtl.amp.html
index 11dd9edc7098c..0b2277baeda12 100644
--- a/test/manual/amp-stream-gallery/rtl.amp.html
+++ b/test/manual/amp-stream-gallery/rtl.amp.html
@@ -5,13 +5,14 @@
   <title>Stream Gallery</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-stream-gallery" src="https://cdn.ampproject.org/v0/amp-stream-gallery-0.1.js"></script>
   <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>
     .item {
       display: flex;
-      padding: 0 5px
+      padding: 0 5px;
+      width: 100%;
+      height: 100%;
     }
 
     .item img {
diff --git a/test/manual/amp-stream-gallery/spacing.amp.html b/test/manual/amp-stream-gallery/spacing.amp.html
index 19d4deaeb3d5c..7a4dafc4c6a98 100644
--- a/test/manual/amp-stream-gallery/spacing.amp.html
+++ b/test/manual/amp-stream-gallery/spacing.amp.html
@@ -5,7 +5,6 @@
   <title>Stream Gallery</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-stream-gallery" src="https://cdn.ampproject.org/v0/amp-stream-gallery-0.1.js"></script>
   <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>
diff --git a/test/manual/amp-twitter-resize.amp.html b/test/manual/amp-twitter-resize.amp.html
index 039e63d93719b..f30aa4042d665 100644
--- a/test/manual/amp-twitter-resize.amp.html
+++ b/test/manual/amp-twitter-resize.amp.html
@@ -5,7 +5,6 @@
   <title>Twitter examples</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/test/manual/amp-twitter.amp.html b/test/manual/amp-twitter.amp.html
index fb34c9aff023e..6f7d9d9d7d394 100644
--- a/test/manual/amp-twitter.amp.html
+++ b/test/manual/amp-twitter.amp.html
@@ -50,5 +50,3 @@ <h2>Twitter Moment</h2>
   </amp-twitter>
 </body>
 </html>
-
-
diff --git a/test/manual/amp-video.amp.html b/test/manual/amp-video.amp.html
index a6b85cd035caf..efd5beb65620e 100644
--- a/test/manual/amp-video.amp.html
+++ b/test/manual/amp-video.amp.html
@@ -9,7 +9,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <style amp-custom>
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
diff --git a/test/manual/amp-videoplayers-autoplay.html b/test/manual/amp-videoplayers-autoplay.html
index 29ef2cba920ec..180fcb62332a9 100644
--- a/test/manual/amp-videoplayers-autoplay.html
+++ b/test/manual/amp-videoplayers-autoplay.html
@@ -5,7 +5,6 @@
   <title>Video Autoplay</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
diff --git a/test/manual/amp-youtube-carousel.amp.html b/test/manual/amp-youtube-carousel.amp.html
index ad0fcfbc91d85..69e860732b15a 100644
--- a/test/manual/amp-youtube-carousel.amp.html
+++ b/test/manual/amp-youtube-carousel.amp.html
@@ -82,5 +82,3 @@ <h1>amp-youtube in carousel</h1>
   </amp-carousel>
 </body>
 </html>
-
-
diff --git a/test/manual/amp-youtube.amp.html b/test/manual/amp-youtube.amp.html
index 3c6cdd2db5d3c..a929e9b8f602b 100644
--- a/test/manual/amp-youtube.amp.html
+++ b/test/manual/amp-youtube.amp.html
@@ -29,5 +29,3 @@ <h1>amp #0</h1>
       width="480" height="270"></amp-youtube>
 </body>
 </html>
-
-
diff --git a/test/manual/ampUserNotification-ampConsent.html b/test/manual/ampUserNotification-ampConsent.html
index 5a08680424158..b96daef23b25d 100644
--- a/test/manual/ampUserNotification-ampConsent.html
+++ b/test/manual/ampUserNotification-ampConsent.html
@@ -240,17 +240,17 @@
     }</script>
     <div id="ui2">
       Learn more V2.
-      <button on="tap:ABC.accept" role="button">Accept</button>
-      <button on="tap:ABC.reject" role="button">Reject</button>
-      <button on="tap:ABC.dismiss" role="button">Dismiss</button>
+      <button on="tap:ABC.accept">Accept</button>
+      <button on="tap:ABC.reject">Reject</button>
+      <button on="tap:ABC.dismiss">Dismiss</button>
     </div>
     <div id="revoke">
       Revoke.
-      <button role="button">Ahahaha</button>
+      <button>Ahahaha</button>
     </div>
     <div id="postPromptUI">
       Post Prompt UI
-      <button on="tap:ABC.prompt(consent=_config_)" role="button">Manage</button>
+      <button on="tap:ABC.prompt(consent=_config_)">Manage</button>
     </div>
   </amp-consent>
 
@@ -262,7 +262,7 @@
       data-dismiss-href="https://example.com/api/echo/post">
       notify 2
       <a href="#learn-more">Learn more.</a>
-     <button on="tap:amp-user-notification2.dismiss" role="button" tabindex="1">I accept</button>
+     <button on="tap:amp-user-notification2.dismiss" tabindex="1">I accept</button>
   </amp-user-notification>
 
   <amp-user-notification
@@ -270,7 +270,7 @@
       data-persist-dismissal="false"
       id="amp-user-notification3">
       This notification doesn't need remote endpoints.
-     <button on="tap:amp-user-notification3.dismiss" role="button" tabindex="2">I accept</button>
+     <button on="tap:amp-user-notification3.dismiss" tabindex="2">I accept</button>
   </amp-user-notification>
 
   <amp-user-notification
@@ -279,7 +279,7 @@
           data-persist-dismissal="false"
     This notification should ALWAYS show.
     <a href="#learn-more">user notification Learn more.</a>
-    <button on="tap:amp-user-notification4.dismiss" role="button" tabindex="3">Dismiss</button>
+    <button on="tap:amp-user-notification4.dismiss" tabindex="3">Dismiss</button>
   </amp-user-notification>
 
   <amp-user-notification
@@ -288,7 +288,7 @@
           data-persist-dismissal="false">
     This notification should ALSO ALWAYS show.
     <a href="#learn-more">Learn more.</a>
-    <button on="tap:amp-user-notification6.dismiss" role="button" tabindex="5">Dismiss</button>
+    <button on="tap:amp-user-notification6.dismiss" tabindex="5">Dismiss</button>
   </amp-user-notification>
 
   <header>
diff --git a/test/manual/analytics-resource-timing.html b/test/manual/analytics-resource-timing.html
index 879945fd5585a..0c629fe95eb7a 100644
--- a/test/manual/analytics-resource-timing.html
+++ b/test/manual/analytics-resource-timing.html
@@ -17,7 +17,7 @@
 {
   "transport": {"beacon": false, "xhrpost": false},
   "requests": {
-    "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/master/examples/img/ampicon.png"
+    "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png"
   },
   "triggers": {
     "defaultPageview": {
diff --git a/test/manual/analytics-script-target.html b/test/manual/analytics-script-target.html
new file mode 100644
index 0000000000000..b32e1057bf3d7
--- /dev/null
+++ b/test/manual/analytics-script-target.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>AMP Analytics: amp-script target</title>
+  <link rel="canonical" href="analytics.amp.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
+</head>
+<body>
+<p>Hi there! Open devtools to inspect the amp-analytics pings.</p>
+<div id="container">
+<amp-analytics id="analytics1">
+<script type="application/json">
+{
+  "transport": {"amp-script": true},
+  "requests": {
+    "endpoint": "amp-script:analytics-script.receive"
+  },
+  "triggers": {
+    "trackPageview": {
+      "on": "visible",
+      "request": "endpoint"
+    }
+  }
+}
+</script>
+</amp-analytics>
+<amp-script id="analytics-script" script="analytics-script-txt" nodom data-ampdevmode></amp-script>
+<script id="analytics-script-txt" type="text/plain" target="amp-script">
+  function receive(msg) {
+    console.log(`amp-script received: ${msg}`);
+  }
+  exportFunction('receive', receive)
+</script>
+
+</div>
+</body>
+</html>
diff --git a/test/manual/cache-sw.html b/test/manual/cache-sw.html
deleted file mode 100644
index 6dc9ab72deefd..0000000000000
--- a/test/manual/cache-sw.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <title>Cache SW Manual Testing</title>
-  <link rel="canonical" href="http://nonblocking.io/">
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <script>
-    window.AMP_CONFIG = {
-      'cache-service-worker': 1
-    };
-  </script>
-  <script async src="../../dist/v0.js"></script>
-  <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>
-  <script async src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
-  <script async src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
-  <script async src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
-</head>
-<body>
-  <h1>Special Instructions</h1>
-  <p>To test the Cache Service Worker locally, must go to:
-    <ul>
-      <li><a href="http://localhost:8000/dist/cache-sw.html">http://localhost:8000/dist/cache-sw.html</a></li>
-    </ul>
-  </p>
-  <p>This is because the SW only activates for pages that are under its scope (`/dist`, in this case).</p>
-  <hr />
-  <p>Every 5 minutes, the RTV will be updated. You'll need to "skipWaiting" the SW, and your next request will stale-while-revalidate serve.
-  <p>1% of page requests will get the canary. You may use the `?canary=FLOAT` to force a canary FLOAT percent of the time.</p>
-  <hr />
-  <p>Shit's gonna get funky if you have an active breakpoint in the SW and request anything in `/dist`.</p>
-  <hr />
-  <h1>Current RTV: CURRENT_RTV</h1>
-  <h1>Loaded JS:</h1>
-  <ul id="loaded">
-  </ul>
-</body>
-</html>
diff --git a/test/manual/gallery.amp.html b/test/manual/gallery.amp.html
index 337bd6aa126c4..9aee756a9b4af 100644
--- a/test/manual/gallery.amp.html
+++ b/test/manual/gallery.amp.html
@@ -5,7 +5,6 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
   <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
   <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
@@ -19,7 +18,7 @@
   /**
    * Margin:0 is currently needed for iOS viewer embeds.
    * See:
-   * https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md
+   * https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md
    */
   body {
     margin: 0 !important;
@@ -64,4 +63,3 @@ <h1>Selectable carousel</h1>
 
 </body>
 </html>
-
diff --git a/test/manual/pre-render-load.html b/test/manual/pre-render-load.html
index e76198a963023..fe39b84ec99c0 100644
--- a/test/manual/pre-render-load.html
+++ b/test/manual/pre-render-load.html
@@ -1 +1 @@
-<iframe src="/examples/article.amp.html#prerenderSize=1&visibilityState=prerender&viewerorigin=http://localhost:8000&log=4" width="100%" height=100%></iframe>
\ No newline at end of file
+<iframe src="/examples/article.amp.html#visibilityState=prerender&viewerorigin=http://localhost:8000&log=4" width="100%" height=100%></iframe>
\ No newline at end of file
diff --git a/test/manual/video-caching.amp.html b/test/manual/video-caching.amp.html
index ba9913a89b174..17c89e92e297d 100644
--- a/test/manual/video-caching.amp.html
+++ b/test/manual/video-caching.amp.html
@@ -5,7 +5,7 @@
     <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-0.1.js"></script>
+        src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
     <script async custom-element="amp-video"
         src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
     <title>Hello, amp-story</title>
diff --git a/test/size.csv b/test/size.csv
deleted file mode 100644
index 70dbfd51169c5..0000000000000
--- a/test/size.csv
+++ /dev/null
@@ -1,101 +0,0 @@
-"datetime","a4a-host.js","alp.js","amp4ads-host-v0.js / amp-inabox-host.js","amp4ads-v0.js / amp-inabox.js","current-min/ampcontext-lib.js / current/ampcontext-lib.js","current-min/ampcontext-v0.js / current/ampcontext-lib.js","f.js","integration-check-types.js","shadow-v0.js / amp-shadow.js","sw-kill.js","sw.js","v0.js","v0/amp-a4a-0.1.js","v0/amp-access-0.1.js","v0/amp-access-laterpay-0.1.js","v0/amp-accordion-0.1.js","v0/amp-ad-0.1.js","v0/amp-ad-network-adsense-impl-0.1.js","v0/amp-ad-network-doubleclick-impl-0.1.js","v0/amp-ad-network-fake-impl-0.1.js","v0/amp-analytics-0.1.js","v0/amp-anim-0.1.js","v0/amp-animation-0.1.js","v0/amp-apester-media-0.1.js","v0/amp-app-banner-0.1.js","v0/amp-audio-0.1.js","v0/amp-auto-ads-0.1.js","v0/amp-bind-0.1.js","v0/amp-brid-player-0.1.js","v0/amp-brightcove-0.1.js","v0/amp-carousel-0.1.js","v0/amp-dailymotion-0.1.js","v0/amp-dynamic-css-classes-0.1.js","v0/amp-experiment-0.1.js","v0/amp-facebook-0.1.js","v0/amp-fit-text-0.1.js","v0/amp-font-0.1.js","v0/amp-form-0.1.js","v0/amp-fresh-0.1.js","v0/amp-fx-flying-carpet-0.1.js","v0/amp-gfycat-0.1.js","v0/amp-google-vrview-image-0.1.js","v0/amp-hulu-0.1.js","v0/amp-iframe-0.1.js","v0/amp-image-lightbox-0.1.js","v0/amp-instagram-0.1.js","v0/amp-install-serviceworker-0.1.js","v0/amp-jwplayer-0.1.js","v0/amp-kaltura-player-0.1.js","v0/amp-lightbox-0.1.js","v0/amp-lightbox-viewer-0.1.js","v0/amp-list-0.1.js","v0/amp-live-list-0.1.js","v0/amp-mustache-0.1.js","v0/amp-o2-player-0.1.js","v0/amp-ooyala-player-0.1.js","v0/amp-pinterest-0.1.js","v0/amp-playbuzz-0.1.js","v0/amp-reach-player-0.1.js","v0/amp-reddit-0.1.js","v0/amp-selector-0.1.js","v0/amp-share-tracking-0.1.js","v0/amp-sidebar-0.1.js","v0/amp-slides-0.1.js","v0/amp-social-share-0.1.js","v0/amp-soundcloud-0.1.js","v0/amp-springboard-player-0.1.js","v0/amp-sticky-ad-0.1.js","v0/amp-sticky-ad-1.0.js","v0/amp-twitter-0.1.js","v0/amp-user-notification-0.1.js","v0/amp-video-0.1.js","v0/amp-viewer-integration-0.1.js","v0/amp-vimeo-0.1.js","v0/amp-vine-0.1.js","v0/amp-viz-vega-0.1.js","v0/amp-youtube-0.1.js","v0/cache-service-worker-0.1.js"
-"2015-10-03 23:45:35 -0700","","","","","","","50360.000","","","","","136790.000","","","","","","","","","","9770.000","","","","7000.000","","","","","44270.000","","","","","6780.000","","","","","","","","8310.000","66830.000","5860.000","","","","44150.000","","","","","","","","","","","","","","18330.000","","","","","","10380.000","","","","","","","5840.000",""
-"2015-10-13 17:09:16 -0700","","","","","","","50430.000","","","","","143220.000","","","","","","","","","","10080.000","","","","7130.000","","","","","44920.000","","","","","6800.000","","","","","","","","8350.000","67900.000","5870.000","","","","44820.000","","","","","","","","","","","","","","18450.000","","","","","","10460.000","","","","","","","6090.000",""
-"2015-10-18 11:30:34 -0700","","","","","","","21280.000","","","","","133710.000","","","","","","","","","","10280.000","","","","7390.000","","","","","48960.000","","","","","6990.000","","","","","","","","8620.000","71470.000","6090.000","","","","48010.000","","","","","","","18070.000","","","","","","","18720.000","","","","","","10730.000","","","","","","","6320.000",""
-"2015-10-20 20:20:27 -0700","","","","","","","21290.000","","","","","134660.000","","","","","","","","","","10290.000","","","","7490.000","","","","","48980.000","","","","","7000.000","","","","","","","","8630.000","71480.000","6150.000","","","","48020.000","","","","","","","19360.000","","","","","","","18730.000","","","","","","10740.000","","","","","","","6370.000",""
-"2015-10-22 07:35:35 -0700","","","","","","","21290.000","","","","","135200.000","","","","","","","","","","10290.000","","","","7490.000","","","","","48980.000","","","","","7000.000","","","","","","","","8630.000","71480.000","6150.000","","","","48020.000","","","","","","","19360.000","","","","","","","18730.000","","","","","","10740.000","","","","","","","6370.000",""
-"2015-11-03 11:09:39 -0800","","","","","","","10730.000","","","","","139560.000","","","","","","","","","","10180.000","","","","7460.000","","","","","60060.000","","","","","6950.000","","","","","","","","14390.000","73150.000","6070.000","","","","49800.000","","","","","","","19340.000","","","","","","","30510.000","","","","","","14900.000","","","","","","","6290.000",""
-"2015-11-11 15:48:16 -0800","","","","","","","10730.000","","","","","139560.000","","","","","","","","","","10180.000","","","","7460.000","","","","","60060.000","","","","","6950.000","","","","","","","","14390.000","73150.000","6070.000","","","","49800.000","","","","35050.000","","","19340.000","","","","","","","30510.000","","","","","","14900.000","","","","","","","6290.000",""
-"2015-12-08 16:25:23 -0800","","","","","","","11590.000","","","","","152610.000","","","","","","","","","30040.000","10420.000","","","","7710.000","","","","7000.000","62040.000","","","","","7040.000","27860.000","","","","","","","14390.000","68150.000","6320.000","6960.000","","","44210.000","","18300.000","","42860.000","","","19600.000","","","","","","","33270.000","","","","","","16290.000","","","","","6420.000","","6590.000",""
-"2015-12-22 21:44:42 -0800","","","","","","","11800.000","","","","","149940.000","","","","","","","","","65510.000","9990.000","","","","7370.000","","","","6730.000","59620.000","","","","","6800.000","27150.000","","","","","","","14450.000","65760.000","6050.000","6710.000","","","42490.000","","48500.000","","42880.000","","","23990.000","","","","","","","32370.000","","","","","","15960.000","","","","","6150.000","","6320.000",""
-"2015-12-22 21:55:24 -0800","","","","","","","11800.000","","","","","150650.000","","","","","","","","","41920.000","9990.000","","","","7370.000","","","","6730.000","50690.000","","","","","6800.000","17700.000","","","","","","","14450.000","56820.000","6050.000","6710.000","","","33560.000","","24380.000","","42880.000","","","23990.000","","","","","","","22920.000","","","","","","15960.000","","","","","6150.000","","6320.000",""
-"2015-12-22 22:32:57 -0800","","","","","","","11800.000","","","","","150870.000","","","","","","","","","38960.000","9990.000","","","","7370.000","","","","6730.000","48300.000","","","","","6800.000","10540.000","","","","","","","14450.000","54430.000","6050.000","6710.000","","","27090.000","","19980.000","","42880.000","","","23990.000","","","","","","","19830.000","","","","","","15960.000","","","","","6150.000","","6320.000",""
-"2016-01-11 20:08:21 -0800","","","","","","","11280.000","","","","","153900.000","","48740.000","","","","","","","38550.000","10240.000","","","","7910.000","","","","6980.000","48720.000","","9890.000","","","6910.000","10640.000","","","","","","","15020.000","55020.000","6300.000","5280.000","","","27140.000","","21160.000","","34630.000","","","24560.000","","","","","","","20320.000","","","","","","16610.000","25410.000","","","","6410.000","","6570.000",""
-"2016-01-11 20:06:51 -0800","","","","","","","7830.000","","","","","133850.000","","42700.000","","","","","","","34670.000","10130.000","","","","7980.000","","","","7220.000","37030.000","","7220.000","","","7190.000","10380.000","","","","","","","13630.000","46970.000","6550.000","4710.000","","","18740.000","","18620.000","","34020.000","","","23730.000","","","","","","","18340.000","","","","","","14650.000","21720.000","","","","6650.000","","6810.000",""
-"2016-01-29 09:53:57 -0800","","","","","","","13030.000","","","","","148770.000","","90330.000","","","","","","","86230.000","25790.000","","","","24960.000","","","","22850.000","53700.000","","24570.000","","31920.000","7240.000","25630.000","","","","","","","33500.000","63670.000","22180.000","6100.000","","","34050.000","","65620.000","","34060.000","","","24810.000","","","","","","","34970.000","","","","","","31930.000","69660.000","","","","22280.000","","22440.000",""
-"2016-01-29 11:24:54 -0800","","","","","","","","","","","","148770.000","","74640.000","","","","","","","70510.000","10210.000","","","","9380.000","","","","7300.000","38000.000","","8970.000","","16270.000","7240.000","10070.000","","","","","","","17850.000","47950.000","6630.000","6100.000","","","18430.000","","49930.000","","34060.000","","","24810.000","","","","","","","19310.000","","","","","","16280.000","53960.000","","","","6730.000","","6890.000",""
-"2016-02-17 16:48:19 -0800","","","","","","","18010.000","","","","","157840.000","","81740.000","","12660.000","","","","","84320.000","10700.000","","","","9710.000","","","","10960.000","38360.000","7430.000","9180.000","","17090.000","7420.000","10060.000","","","","","","","19470.000","48650.000","6860.000","6320.000","","","18580.000","","54810.000","","40380.000","","","25940.000","","","","","","","19320.000","","7180.000","","","","17100.000","57200.000","","","7100.000","6960.000","","9010.000",""
-"2016-03-11 02:00:16 -0800","","","","","","","26210.000","","","","","166910.000","","82750.000","","13750.000","","","","","92250.000","11090.000","","","","10230.000","","","","11200.000","40380.000","7560.000","9880.000","","17900.000","7610.000","10610.000","","","","","","","20830.000","49880.000","10520.000","6900.000","","","18820.000","","57390.000","","41200.000","","","26520.000","","","","","","","19850.000","16680.000","7310.000","","","","18020.000","58040.000","","","7230.000","7090.000","","10110.000",""
-"2016-03-17 11:04:50 -0700","","","","","","","29950.000","","","","","169890.000","","84860.000","","15630.000","","","","","94830.000","11170.000","","","","10450.000","","","9650.000","11420.000","42720.000","7560.000","11770.000","","18130.000","7610.000","17480.000","","","","","","","22720.000","51860.000","10520.000","9990.000","","13040.000","18820.000","","59440.000","","44930.000","","","26790.000","","","","","","","21740.000","","7310.000","9800.000","","","18250.000","60250.000","","","7230.000","7090.000","","10110.000",""
-"2016-03-17 11:30:24 -0700","","","","","","","29950.000","","","","","169890.000","","84860.000","","15630.000","","","","","94830.000","11170.000","","","","10450.000","","","9650.000","11420.000","42720.000","7560.000","11770.000","","18130.000","7610.000","17480.000","","","","","","","22720.000","51860.000","10520.000","9990.000","","13040.000","18820.000","","59440.000","","44930.000","","","26790.000","","","","","","","21740.000","16900.000","7310.000","9800.000","","","18250.000","60250.000","","","7230.000","7090.000","","10110.000",""
-"2016-03-24 11:03:17 -0700","","","","","","","31930.000","","","","","174260.000","","86690.000","","15890.000","","","","","97110.000","18090.000","","","","13820.000","","","16500.000","16740.000","42750.000","14410.000","12010.000","","20980.000","14470.000","17930.000","","","","","","","23320.000","52370.000","18050.000","9990.000","","16420.000","25740.000","","61270.000","","44970.000","","","30200.000","","13970.000","","","","","21770.000","21610.000","14160.000","16650.000","","","21100.000","62050.000","","","14070.000","13940.000","","16970.000",""
-"2016-03-31 11:03:00 -0700","","","","","","","33100.000","","","","","176050.000","","87070.000","","13160.000","","","","","98310.000","18160.000","","","","13890.000","","","16590.000","16810.000","42800.000","14480.000","9300.000","","21050.000","14520.000","17980.000","","","","","","","23440.000","52440.000","18120.000","10040.000","16010.000","16490.000","25790.000","","61650.000","","45020.000","","","30270.000","","14040.000","","","","","21810.000","25390.000","14230.000","16740.000","","","21170.000","62430.000","","","14140.000","14010.000","","17040.000",""
-"2016-04-07 11:22:43 -0700","","","","","","","33410.000","","","","","177710.000","","87370.000","","9220.000","","","","","98720.000","14190.000","","","","13520.000","","","12650.000","16520.000","38870.000","10550.000","10730.000","","20710.000","10630.000","14010.000","","","","","","","23090.000","48650.000","14190.000","12680.000","12070.000","16120.000","21830.000","","61990.000","","44620.000","","","31160.000","","10110.000","","","","14030.000","17870.000","25030.000","10300.000","12800.000","","","20830.000","62800.000","","","10210.000","10080.000","","13100.000",""
-"2016-04-14 18:55:22 -0700","","","","","","","36050.000","","","","","177690.000","","88430.000","","9220.000","","","","","101440.000","14190.000","","","","13520.000","","","12650.000","16520.000","38870.000","10550.000","10730.000","","24300.000","10630.000","14010.000","","","","","","","23250.000","48650.000","14190.000","12680.000","12070.000","16120.000","21830.000","","62590.000","","44620.000","","","31160.000","","10110.000","","","","17050.000","17870.000","24900.000","10300.000","12800.000","","","24420.000","63400.000","","","10210.000","10080.000","","13100.000",""
-"2016-04-18 18:29:17 -0700","","","","","","","36890.000","","","","","178040.000","","88660.000","","9380.000","","","","","101860.000","14340.000","","","","13690.000","","","12800.000","16690.000","39030.000","10710.000","10900.000","","24460.000","10790.000","14170.000","","","","","","","23420.000","48810.000","14350.000","12850.000","12230.000","16290.000","21990.000","","62820.000","","44790.000","","","31390.000","","10270.000","","","","17250.000","18030.000","25100.000","10460.000","12950.000","","","24590.000","63630.000","","","10370.000","10230.000","","13260.000",""
-"2016-04-21 11:19:11 -0700","","","","","","","36890.000","","","","","178050.000","","88660.000","","9380.000","","","","","103810.000","14340.000","","","","13690.000","","","12800.000","16690.000","39050.000","10710.000","10900.000","","24490.000","10790.000","14170.000","","","","","","","23420.000","48810.000","14350.000","12850.000","12230.000","16290.000","21990.000","","62820.000","","44790.000","","","31390.000","","10270.000","","","","17250.000","18030.000","25100.000","10460.000","12950.000","","","24610.000","63630.000","","","10370.000","10230.000","","13260.000",""
-"2016-04-22 11:56:04 -0700","","","","","","","36850.000","","","","","173350.000","","86940.000","","9350.000","","","","","104410.000","14260.000","","","","13660.000","","","12770.000","16660.000","38880.000","10680.000","10840.000","","24340.000","10760.000","14110.000","","","","","","","23330.000","48580.000","14320.000","12780.000","12200.000","16260.000","21810.000","","62360.000","","44740.000","","","30890.000","","10240.000","","","","17160.000","17940.000","25010.000","10430.000","12930.000","","","24460.000","63140.000","","","10340.000","10210.000","","13230.000",""
-"2016-04-22 17:45:17 -0700","","","","","","","30410.000","","","","","157730.000","","49260.000","","5960.000","","","","","65790.000","9490.000","","","","7220.000","","","8330.000","7980.000","33170.000","6960.000","5280.000","","14450.000","6720.000","9660.000","","","","","","","14600.000","40040.000","8120.000","8630.000","7790.000","8660.000","15350.000","","24920.000","","40500.000","","","24950.000","","6520.000","","","","11600.000","12750.000","16110.000","6670.000","8510.000","","","14570.000","26000.000","","","6620.000","6490.000","","8800.000",""
-"2016-04-24 21:37:52 -0700","","","","","","","30410.000","","","","","157780.000","","41210.000","","5960.000","","","","","58330.000","9490.000","","","","7220.000","","","8330.000","7980.000","33170.000","6960.000","5280.000","","14450.000","6720.000","9660.000","","","","","","","14600.000","40040.000","8120.000","8630.000","7790.000","8660.000","15350.000","","13520.000","","40500.000","","","24950.000","","6520.000","","","","11600.000","12750.000","16110.000","6670.000","8510.000","","","14570.000","17860.000","","","6620.000","6490.000","","8800.000",""
-"2016-04-25 08:36:01 -0700","","","","","","","30410.000","","","","","161320.000","","37760.000","","5960.000","","","","","54630.000","9490.000","","","","7220.000","","","8330.000","7980.000","33170.000","6960.000","5280.000","","14450.000","6720.000","9660.000","","","","","","","14600.000","40040.000","8120.000","8630.000","7790.000","8660.000","15350.000","","9040.000","","40500.000","","","20460.000","","6520.000","","","","11600.000","12750.000","16110.000","6670.000","8510.000","","","14570.000","13430.000","","","6620.000","6490.000","","8800.000",""
-"2016-04-25 14:27:17 -0700","","","","","","","30860.000","","","","","161400.000","","37720.000","","5960.000","","","","","54030.000","9490.000","","","","7220.000","","","8330.000","7980.000","33170.000","6960.000","5280.000","","14450.000","6720.000","9660.000","","","","","","","14600.000","40040.000","8120.000","8630.000","7790.000","8660.000","15350.000","","9040.000","","40500.000","","","20460.000","","6520.000","","","","11600.000","12750.000","16110.000","6670.000","8510.000","","","14570.000","11310.000","","","6620.000","6490.000","","8800.000",""
-"2016-04-25 19:06:05 -0700","","5500.000","","","","","30870.000","","","","","161790.000","","37730.000","","5970.000","","","","","54050.000","9510.000","","","","7240.000","","","8350.000","8000.000","33180.000","6980.000","5300.000","","14470.000","6730.000","9680.000","","","","","","","14620.000","40050.000","8130.000","8640.000","7810.000","8680.000","15370.000","","9050.000","","40510.000","","","20480.000","","6540.000","","","","11620.000","12760.000","16130.000","6690.000","8520.000","","","14590.000","11330.000","","","6640.000","6500.000","","8810.000",""
-"2016-05-08 04:01:19 -0700","","2190.000","","","","","33680.000","","","","","166150.000","","38540.000","","6070.000","","","","","57030.000","9530.000","","","","7240.000","","","8360.000","8070.000","33200.000","6990.000","5300.000","","15320.000","6750.000","9680.000","","","","","","","15460.000","40050.000","7770.000","8640.000","7820.000","8780.000","15370.000","","9070.000","","40510.000","","","20490.000","","6560.000","","","","11320.000","12780.000","13240.000","6690.000","8540.000","","","15440.000","11330.000","","","6660.000","6520.000","","8870.000",""
-"2016-05-08 04:11:47 -0700","","5500.000","","","","","33680.000","","","","","166190.000","","38540.000","","6070.000","","","","","57030.000","9530.000","","","","7240.000","","","8360.000","8070.000","33200.000","6990.000","5300.000","","15320.000","6750.000","9680.000","","","","","","","15460.000","40050.000","7770.000","8640.000","7820.000","8780.000","15370.000","","9070.000","","40510.000","","","20490.000","","6560.000","","","","11320.000","12780.000","13240.000","6690.000","8540.000","","","15440.000","11330.000","","","6660.000","6520.000","","8870.000",""
-"2016-05-12 11:16:59 -0700","","5530.000","","","","","34140.000","","","","","166760.000","","38540.000","","6070.000","","","","","58250.000","9530.000","","","","7240.000","","","8360.000","8100.000","33200.000","6990.000","5300.000","","15320.000","6750.000","9680.000","","","","","","","15460.000","40050.000","7770.000","8640.000","7820.000","8800.000","15450.000","","9070.000","13140.000","40510.000","","","20490.000","","6560.000","","","","11320.000","12780.000","13260.000","6690.000","8540.000","5800.000","","15440.000","11360.000","","","6660.000","6520.000","","9540.000",""
-"2016-05-14 20:18:50 -0700","","5530.000","","","","","34350.000","","","","","167370.000","","41490.000","","6070.000","","","","","58250.000","9530.000","","","","7240.000","","","8360.000","8100.000","33200.000","6990.000","5300.000","","15320.000","6750.000","9680.000","","","","","","","15460.000","40050.000","7770.000","8640.000","7820.000","8800.000","15450.000","","9070.000","14130.000","40510.000","","","20490.000","","6560.000","","","","11570.000","12780.000","13260.000","6690.000","8540.000","5800.000","","15440.000","11360.000","","","6660.000","6520.000","","9540.000",""
-"2016-05-15 12:47:06 -0700","","5530.000","","","","","34350.000","","","","","167410.000","","41490.000","","6070.000","","","","","58250.000","9530.000","","","","7240.000","","","8360.000","8100.000","33200.000","6990.000","5300.000","","15320.000","6750.000","9680.000","","","","","","","15460.000","40050.000","7770.000","8640.000","7820.000","8800.000","15450.000","","9070.000","14130.000","40510.000","","","20490.000","","6560.000","","","","11570.000","12780.000","13260.000","6690.000","8540.000","5800.000","","15440.000","11360.000","","","6660.000","6520.000","","9540.000",""
-"2016-05-16 16:43:03 -0700","","5530.000","","","","","34280.000","","","","","153470.000","","41490.000","","6090.000","27000.000","","","","58250.000","9530.000","","","","7240.000","","","8360.000","8100.000","33200.000","6990.000","5300.000","","15320.000","6750.000","9680.000","","","","","","","15460.000","40050.000","7770.000","8640.000","7820.000","8800.000","15450.000","","9070.000","14180.000","40510.000","","","20490.000","","6560.000","","","","11570.000","12780.000","13260.000","6690.000","8540.000","5800.000","","15440.000","11360.000","","","6660.000","6520.000","","9540.000",""
-"2016-06-02 14:39:05 -0700","","5650.000","","","","","34480.000","","","","","155470.000","","41780.000","","6090.000","28000.000","","","","60670.000","9530.000","","","","7240.000","","","8360.000","8100.000","34810.000","6990.000","5300.000","","15720.000","6750.000","9740.000","","","7450.000","","","","15790.000","39920.000","7770.000","8640.000","7820.000","8800.000","15370.000","","9070.000","16630.000","40510.000","","","20640.000","","6560.000","","","","10970.000","12780.000","11740.000","6690.000","8540.000","7490.000","","15850.000","11360.000","","","6660.000","6520.000","","9540.000",""
-"2016-06-06 07:15:50 -0700","","5460.000","","","","","33970.000","","","","","144680.000","","39180.000","","5880.000","26870.000","","","","58080.000","8910.000","","","","6970.000","","","7980.000","7740.000","31860.000","6630.000","5080.000","","15240.000","6420.000","8860.000","","","7160.000","","","","14990.000","36910.000","7430.000","8320.000","7440.000","8420.000","14060.000","","8520.000","14700.000","40860.000","","","20410.000","","6290.000","","","","10290.000","11880.000","11480.000","6420.000","8150.000","7040.000","","15370.000","10700.000","","","6390.000","6250.000","","8970.000",""
-"2016-06-08 05:59:14 -0700","","5410.000","","","","","33810.000","","","","","145520.000","","38990.000","","5840.000","26680.000","","","","58230.000","8820.000","","","","6930.000","","","7920.000","7680.000","31750.000","6570.000","5060.000","","15180.000","6370.000","8890.000","","","7120.000","","","","14900.000","36780.000","7380.000","8300.000","7390.000","8370.000","14010.000","","8520.000","14620.000","40810.000","","","20370.000","","6230.000","","","","10270.000","11820.000","11440.000","6360.000","8100.000","7000.000","","15300.000","10680.000","","","6330.000","6190.000","","8910.000",""
-"2016-06-10 16:25:13 -0400","","5300.000","","","","","33840.000","","","","","129320.000","","36180.000","","5690.000","25050.000","","","","54860.000","8380.000","","","","6720.000","","","7620.000","7430.000","27320.000","6350.000","4950.000","","14810.000","6030.000","7950.000","","","6910.000","","","","13570.000","31160.000","7090.000","8040.000","7090.000","8140.000","11770.000","","8020.000","13420.000","39520.000","","","20260.000","","6010.000","","","","9560.000","11010.000","11270.000","6140.000","7780.000","6670.000","","14930.000","9870.000","","","6110.000","5970.000","","8500.000",""
-"2016-06-15 19:46:24 -0700","","5580.000","","","","","34300.000","","","","","136750.000","","37970.000","","6630.000","26530.000","","","","55950.000","9040.000","","","","7220.000","","","8210.000","8070.000","31590.000","6800.000","5290.000","","15930.000","6470.000","8400.000","7970.000","","8070.000","","","","14470.000","33530.000","7860.000","8580.000","7680.000","8730.000","13080.000","","8490.000","14100.000","40140.000","","","20820.000","","6460.000","","","","10840.000","11810.000","11550.000","6580.000","8370.000","7400.000","","16020.000","10410.000","","","6550.000","6420.000","","9120.000",""
-"2016-06-16 11:47:48 -0700","","5580.000","","","","","34300.000","","","","","136750.000","","37970.000","","6630.000","26540.000","","","","55950.000","9040.000","","","","7220.000","","","8210.000","8070.000","31590.000","6800.000","5290.000","","15930.000","6470.000","8400.000","7970.000","","8070.000","","","","14470.000","33530.000","7860.000","8580.000","7680.000","8730.000","13080.000","","8490.000","14100.000","40140.000","","","20820.000","","6460.000","","","","10840.000","11810.000","11550.000","6580.000","8370.000","7400.000","","16060.000","10410.000","","","6550.000","6420.000","","9120.000",""
-"2016-06-23 13:46:07 -0700","","5640.000","","","","","34820.000","","16590.000","","","142900.000","","35330.000","","6340.000","27610.000","","","","56620.000","8660.000","","","","6930.000","","","7920.000","7780.000","33130.000","6510.000","5000.000","","15590.000","6090.000","8110.000","10790.000","","7720.000","","","","14220.000","33210.000","7570.000","8270.000","7390.000","8440.000","12730.000","","6020.000","13600.000","39860.000","","","20530.000","","6170.000","","","","10490.000","11430.000","11260.000","6300.000","8080.000","7110.000","","15710.000","10130.000","","","6260.000","6130.000","","8830.000",""
-"2016-06-27 00:32:56 -0700","","5940.000","","","","","35740.000","","128960.000","","","143870.000","","35990.000","","6630.000","28160.000","","","","57150.000","8950.000","","","","7250.000","","","8220.000","8080.000","33630.000","6800.000","5380.000","5830.000","15980.000","6390.000","8470.000","11180.000","","8020.000","","","","14540.000","33690.000","7870.000","8650.000","7690.000","8740.000","13100.000","","6410.000","14160.000","40170.000","","","20910.000","","6460.000","","","6070.000","10860.000","11870.000","11620.000","6590.000","8380.000","7410.000","","16100.000","10510.000","","","6560.000","6430.000","","9120.000",""
-"2016-06-27 11:48:54 -0700","","5920.000","","","","","35640.000","","128390.000","","","143250.000","","35760.000","","6610.000","27900.000","","","","57050.000","8930.000","","","","7160.000","","","8200.000","8060.000","33610.000","6780.000","5290.000","5810.000","15710.000","6370.000","8450.000","11080.000","","8000.000","","","","14440.000","33670.000","7840.000","8580.000","7670.000","8720.000","13080.000","","6320.000","13940.000","40080.000","","","20820.000","","6440.000","","","6050.000","10840.000","11850.000","11600.000","6570.000","8360.000","7390.000","","15840.000","10420.000","","","6540.000","6410.000","","9100.000",""
-"2016-07-01 13:22:31 -0700","","6010.000","","","","","35700.000","","129250.000","","","144270.000","25520.000","35780.000","","6640.000","30420.000","","","","58380.000","8960.000","","","","7180.000","","","8230.000","8090.000","34250.000","6810.000","5320.000","7550.000","15890.000","6390.000","8480.000","13270.000","","8020.000","","","","14470.000","33700.000","7870.000","8590.000","7700.000","8740.000","13110.000","","6340.000","14000.000","40110.000","","","20850.000","","6470.000","","","6080.000","10860.000","11880.000","11630.000","6600.000","8380.000","9070.000","","16010.000","10560.000","","","6570.000","6430.000","","9230.000",""
-"2016-07-01 16:21:12 -0700","","5760.000","","","","","35460.000","","120800.000","","","135380.000","24390.000","34780.000","","6400.000","29340.000","","","","57400.000","8360.000","","","","6770.000","","","7670.000","7480.000","31420.000","6400.000","5080.000","7140.000","15270.000","6010.000","8070.000","12640.000","","7470.000","","","","13680.000","31440.000","7250.000","8180.000","7140.000","8190.000","11900.000","","6100.000","13350.000","39870.000","","","20440.000","","6060.000","","","5670.000","10070.000","11130.000","11390.000","6190.000","7830.000","8500.000","","15390.000","10080.000","","","6160.000","6020.000","","8650.000",""
-"2016-07-17 22:01:17 -0700","","5770.000","","","","","38590.000","","131230.000","","","137020.000","7190.000","34690.000","","6430.000","31320.000","32800.000","31530.000","","58270.000","8540.000","","","","7010.000","","","7910.000","7710.000","32300.000","6590.000","5030.000","8850.000","15380.000","6000.000","8050.000","12710.000","","8150.000","","8490.000","","14560.000","31520.000","7480.000","8220.000","7380.000","8460.000","11960.000","","6030.000","13440.000","39920.000","6760.000","","20380.000","","6250.000","","","5720.000","10160.000","11070.000","11320.000","6380.000","8070.000","7990.000","","15510.000","10280.000","","","6350.000","6210.000","","8920.000",""
-"2016-07-19 13:42:56 -0700","","5470.000","","","","","38290.000","","130940.000","","","136740.000","6890.000","34390.000","","6130.000","31010.000","32500.000","31230.000","","57980.000","8250.000","","","","6710.000","","","7610.000","7420.000","32000.000","6300.000","4730.000","8550.000","15080.000","5710.000","7760.000","12410.000","","7860.000","","8200.000","","14260.000","31210.000","7180.000","7920.000","7080.000","8170.000","11660.000","","5730.000","13140.000","39620.000","6470.000","","20080.000","","5960.000","","","5420.000","9860.000","10770.000","11020.000","6080.000","7780.000","7910.000","","15200.000","9980.000","","","6050.000","5910.000","","8630.000",""
-"2016-07-19 21:16:39 -0700","","5470.000","","","","","38290.000","","131360.000","","","137150.000","6890.000","34460.000","","6130.000","31060.000","32500.000","31230.000","","58090.000","8250.000","","","","6710.000","","","7610.000","7420.000","32020.000","6300.000","4730.000","8650.000","15150.000","5710.000","7760.000","12430.000","","7880.000","","8220.000","","14260.000","31210.000","7180.000","7920.000","7080.000","8170.000","11660.000","","5730.000","13160.000","39620.000","6470.000","","20080.000","","5960.000","","","5440.000","9860.000","10770.000","11020.000","6080.000","7780.000","7910.000","","15230.000","9980.000","","","6050.000","5910.000","","8620.000",""
-"2016-07-20 20:45:32 -0700","","5470.000","","","","","38290.000","","131190.000","","","137000.000","6890.000","34550.000","","6130.000","31060.000","32460.000","31190.000","","58120.000","8250.000","","","","6710.000","","","7610.000","7420.000","31950.000","6300.000","4780.000","8630.000","15130.000","5710.000","7660.000","12460.000","","7870.000","","8210.000","","14250.000","31130.000","7170.000","7910.000","7080.000","8170.000","11570.000","","5550.000","13080.000","39610.000","6470.000","","19920.000","","5960.000","","","5440.000","9820.000","10730.000","10820.000","6080.000","7780.000","7910.000","","15250.000","9940.000","","","6050.000","5910.000","","8620.000",""
-"2016-07-25 15:10:35 -0700","","5360.000","","","","","39200.000","","134050.000","","","137610.000","6890.000","34580.000","","6120.000","31580.000","33340.000","32060.000","","58190.000","8250.000","","","","6710.000","","","7610.000","7420.000","32380.000","6300.000","4780.000","8740.000","15240.000","5710.000","7660.000","12510.000","","7870.000","","8210.000","","14600.000","31150.000","7170.000","7950.000","7080.000","8170.000","11590.000","","5550.000","13060.000","39630.000","6470.000","","19920.000","","5960.000","","","5440.000","9810.000","10730.000","10820.000","6180.000","7780.000","7910.000","","15360.000","9950.000","","","6050.000","5910.000","","8620.000",""
-"2016-07-27 08:49:53 -0700","","5490.000","","","","","39340.000","","134680.000","","","138240.000","7020.000","34710.000","","6250.000","31620.000","33350.000","32060.000","","58310.000","8380.000","","","","6840.000","","","7750.000","7550.000","32590.000","6430.000","4910.000","8870.000","15400.000","5840.000","7790.000","12640.000","","8020.000","","8340.000","","14750.000","31290.000","7300.000","8080.000","7210.000","8300.000","11800.000","","5680.000","13190.000","39760.000","6600.000","","20050.000","","6090.000","","","5570.000","9940.000","10860.000","10960.000","6310.000","7910.000","8040.000","","15520.000","10080.000","","","6180.000","6040.000","7260.000","8870.000",""
-"2016-08-03 00:11:33 -0700","","5490.000","","","","","39150.000","","135000.000","","","138530.000","7020.000","36170.000","","6250.000","31670.000","32650.000","31360.000","","58350.000","8380.000","","","","6840.000","","","7750.000","7550.000","35630.000","6430.000","4910.000","8900.000","15390.000","5840.000","7790.000","13760.000","","8020.000","","8340.000","","14780.000","31290.000","7300.000","8080.000","7210.000","8300.000","11800.000","","5700.000","13330.000","39760.000","6600.000","","20050.000","","6090.000","","","6120.000","9940.000","10860.000","10960.000","6310.000","7910.000","8060.000","","15510.000","10080.000","","","6180.000","6040.000","7260.000","8870.000",""
-"2016-08-10 00:08:41 -0700","","5410.000","","","","","39110.000","","136190.000","","","139760.000","2000.000","39530.000","","6300.000","32280.000","31690.000","30430.000","","58840.000","8300.000","","","","6750.000","","","7660.000","7370.000","35450.000","6330.000","2100.000","7960.000","15370.000","3060.000","7720.000","11600.000","","6970.000","","8350.000","","14840.000","31400.000","7210.000","8010.000","7120.000","8130.000","11720.000","","5660.000","13250.000","39730.000","6500.000","","20110.000","","5990.000","","","5220.000","9810.000","9670.000","10930.000","6220.000","7820.000","7980.000","","15490.000","10140.000","","","6080.000","5950.000","6110.000","8720.000",""
-"2016-08-12 10:20:39 -0700","","5320.000","","","","","40210.000","","136190.000","","","139750.000","1670.000","39320.000","","6210.000","32680.000","31570.000","30280.000","24320.000","58910.000","8280.000","","","","6760.000","","","7670.000","7280.000","35520.000","6330.000","2100.000","7950.000","15380.000","3110.000","7740.000","11630.000","","6990.000","","8370.000","","14850.000","31410.000","7220.000","8020.000","7130.000","8050.000","11740.000","","5670.000","13170.000","39740.000","6500.000","","20120.000","","5990.000","","","5230.000","9820.000","9680.000","10840.000","6220.000","7830.000","7960.000","","15510.000","10150.000","","","6080.000","5950.000","466480.000","8640.000",""
-"2016-08-17 00:10:13 -0700","","5310.000","","","","","40390.000","","136200.000","","","139750.000","1670.000","39400.000","","6210.000","32810.000","31550.000","30270.000","24310.000","58870.000","8310.000","","","15900.000","6750.000","","","7700.000","7170.000","35510.000","6330.000","2100.000","7990.000","15480.000","3150.000","7730.000","11620.000","","6990.000","","8400.000","","14880.000","31400.000","7210.000","8010.000","7160.000","8020.000","11730.000","","5660.000","13170.000","39730.000","6500.000","","20110.000","","5990.000","","","5330.000","9880.000","9670.000","12870.000","6210.000","7830.000","7960.000","","15600.000","10050.000","","","6080.000","5940.000","466470.000","8650.000",""
-"2016-09-12 13:29:41 -0700","","5620.000","","","","","45930.000","","144410.000","428.000","1950.000","145930.000","47910.000","41860.000","","6410.000","75080.000","76890.000","75260.000","69710.000","62780.000","8230.000","","9340.000","17060.000","6930.000","","","7560.000","7380.000","36570.000","6310.000","2250.000","9590.000","15500.000","3070.000","7920.000","15490.000","4330.000","7080.000","6070.000","8380.000","","15210.000","32160.000","7240.000","8500.000","7030.000","8210.000","12510.000","13620.000","5910.000","14210.000","40330.000","6700.000","","20360.000","","5970.000","","","5830.000","10040.000","9810.000","14250.000","6290.000","7760.000","8050.000","","15620.000","10410.000","","","6070.000","5930.000","514290.000","8740.000","3580.000"
-"2016-09-12 18:43:11 -0700","","5520.000","","","","","45830.000","","143880.000","428.000","1950.000","145450.000","3480.000","41750.000","","6300.000","34890.000","36630.000","35010.000","28690.000","62680.000","8130.000","","9240.000","16960.000","6830.000","","","7460.000","7280.000","36470.000","6210.000","2250.000","9490.000","15380.000","3070.000","7820.000","15390.000","4230.000","6980.000","5960.000","8280.000","","15110.000","32020.000","7110.000","8390.000","6920.000","8110.000","12410.000","13520.000","5800.000","14100.000","40220.000","6600.000","","20250.000","","5870.000","","","5720.000","9930.000","9700.000","14150.000","6190.000","7660.000","7950.000","","15500.000","10310.000","","","5960.000","5830.000","514190.000","8610.000","3580.000"
-"2016-09-12 19:54:40 -0700","","5620.000","","","","","45930.000","","143970.000","278.000","382.000","145550.000","2070.000","40400.000","","6300.000","33550.000","35290.000","33670.000","27350.000","61040.000","8230.000","","9340.000","16300.000","6830.000","","","7560.000","7280.000","35920.000","6310.000","2140.000","8170.000","15370.000","3070.000","7920.000","13930.000","4330.000","7080.000","6070.000","8280.000","","15100.000","31510.000","7240.000","8390.000","7030.000","8110.000","11860.000","13620.000","5800.000","12770.000","40220.000","6700.000","","20250.000","","5970.000","","","5830.000","10040.000","9810.000","13510.000","6290.000","7760.000","8050.000","","15490.000","10310.000","","","6070.000","5930.000","514190.000","8640.000",""
-"2016-09-13 10:47:22 -0700","","5620.000","","","","","45930.000","","144000.000","278.000","382.000","145580.000","2070.000","39460.000","","6300.000","32670.000","34410.000","32770.000","26320.000","60150.000","7240.000","","8290.000","15400.000","5840.000","","","6570.000","6290.000","34900.000","5320.000","2140.000","8170.000","14490.000","3070.000","6870.000","13930.000","4330.000","7080.000","5080.000","7280.000","","14110.000","30450.000","6250.000","7480.000","6040.000","7120.000","7820.000","12700.000","5800.000","11900.000","40220.000","5710.000","","20250.000","","4980.000","","","5830.000","6200.000","9810.000","13510.000","5300.000","6770.000","7060.000","","14610.000","10310.000","","","5070.000","4940.000","514190.000","7650.000",""
-"2016-09-13 11:20:32 -0700","","5620.000","","","","","45930.000","","144020.000","278.000","382.000","145600.000","2070.000","39460.000","","6300.000","32680.000","34410.000","32770.000","26320.000","60150.000","6570.000","","7680.000","15400.000","5180.000","","","5950.000","5630.000","34900.000","4660.000","2140.000","8170.000","13880.000","3070.000","6870.000","13930.000","4330.000","7080.000","4400.000","6620.000","","13510.000","29860.000","5590.000","7480.000","5390.000","6480.000","7820.000","12700.000","5800.000","11990.000","40220.000","5040.000","","20250.000","","1350.000","","","5830.000","6200.000","9810.000","13510.000","4640.000","6140.000","7060.000","","14000.000","10310.000","","","4410.000","4280.000","514190.000","7060.000",""
-"2016-09-13 12:42:05 -0700","","5770.000","","","","","46090.000","","144250.000","278.000","405.000","145830.000","2120.000","37270.000","","3450.000","30590.000","31520.000","29900.000","23450.000","57260.000","3740.000","","4830.000","12710.000","2340.000","","","3150.000","2790.000","31980.000","1810.000","2180.000","5300.000","11790.000","3110.000","4030.000","11260.000","1480.000","4220.000","1550.000","3800.000","","10630.000","26960.000","2750.000","5300.000","2580.000","3680.000","7860.000","9870.000","2960.000","9140.000","37360.000","2240.000","","17430.000","","1390.000","","","2990.000","6240.000","7000.000","10660.000","1790.000","3330.000","4220.000","","11910.000","7630.000","","","1560.000","1430.000","511350.000","4260.000",""
-"2016-09-13 14:53:34 -0700","","5770.000","","","","","46060.000","","146540.000","278.000","400.000","148120.000","2110.000","37240.000","","3450.000","30450.000","25160.000","23550.000","16500.000","54840.000","3740.000","","4830.000","11840.000","2310.000","","","3150.000","2790.000","31980.000","1810.000","2180.000","5300.000","11680.000","3110.000","4030.000","11230.000","1480.000","4220.000","1550.000","3780.000","","10610.000","26960.000","2750.000","5270.000","2580.000","3670.000","7860.000","9870.000","2930.000","9140.000","37360.000","2240.000","","17400.000","","1390.000","","","2990.000","6240.000","7000.000","10660.000","1790.000","3330.000","4220.000","","11800.000","7610.000","","","1560.000","1430.000","511320.000","4260.000",""
-"2016-09-14 10:19:40 -0700","","5770.000","","","","","46060.000","","149510.000","428.000","577.000","151080.000","2110.000","37240.000","","3450.000","30450.000","25160.000","23550.000","16500.000","54830.000","3740.000","","4830.000","11840.000","2310.000","","","3150.000","2790.000","31980.000","1810.000","2180.000","5300.000","11680.000","3110.000","4030.000","11230.000","1480.000","4220.000","1550.000","3780.000","","10690.000","26960.000","2750.000","5250.000","2580.000","3670.000","7860.000","9870.000","2930.000","9140.000","37360.000","2240.000","","17400.000","","1390.000","","","3000.000","6240.000","7000.000","10660.000","1790.000","3330.000","4220.000","","11800.000","7610.000","","","1560.000","1430.000","511320.000","4260.000","1550.000"
-"2016-09-14 21:27:11 -0700","","5770.000","","","","","46040.000","","149460.000","278.000","400.000","151030.000","2110.000","37240.000","","3450.000","29320.000","25160.000","23550.000","16500.000","54840.000","3740.000","","4830.000","10680.000","2310.000","","","3150.000","2790.000","31990.000","1810.000","2180.000","5300.000","10550.000","3110.000","4030.000","11240.000","1480.000","4220.000","1550.000","3780.000","","10690.000","26960.000","2750.000","5250.000","2580.000","3670.000","7860.000","12430.000","2930.000","9140.000","37360.000","2240.000","","17400.000","","1390.000","","","3000.000","4960.000","7000.000","9330.000","1790.000","3330.000","4220.000","","10670.000","7610.000","","","1560.000","1430.000","511320.000","4260.000",""
-"2016-09-18 12:49:25 -0700","","5870.000","","","","","46270.000","","155490.000","428.000","681.000","156780.000","","37280.000","","3450.000","29440.000","25260.000","23630.000","16570.000","54920.000","3740.000","","4840.000","10910.000","2310.000","","","3150.000","2790.000","32460.000","1810.000","2220.000","5340.000","10550.000","3110.000","4050.000","11280.000","3490.000","4220.000","1550.000","3780.000","","10700.000","27250.000","2750.000","5290.000","2580.000","3670.000","7890.000","12470.000","2950.000","9180.000","37360.000","2240.000","","17420.000","","1390.000","","","3030.000","4980.000","7270.000","9340.000","1790.000","3330.000","4670.000","","10670.000","7640.000","","","1560.000","1430.000","511380.000","4290.000","1550.000"
-"2016-09-20 12:48:36 -0700","","5870.000","","","","","46650.000","","156000.000","428.000","681.000","157310.000","","37330.000","","3450.000","29830.000","28650.000","26740.000","19720.000","54950.000","3740.000","","4840.000","10910.000","2310.000","","","3150.000","2790.000","32470.000","1810.000","3920.000","5340.000","10550.000","3110.000","4050.000","14250.000","3490.000","4220.000","1550.000","3780.000","","10700.000","27260.000","2750.000","5290.000","2580.000","3670.000","7900.000","12470.000","2950.000","9180.000","37360.000","2240.000","","17420.000","","1390.000","","","3030.000","4980.000","7270.000","9340.000","1790.000","3330.000","4670.000","","10670.000","7640.000","","","1560.000","1430.000","511380.000","4290.000","1550.000"
-"2016-09-20 14:20:50 -0700","","5870.000","","","","","46120.000","","156000.000","428.000","681.000","157310.000","","37330.000","","3450.000","29820.000","28630.000","26730.000","19710.000","54950.000","3740.000","","4840.000","10910.000","2310.000","","","3150.000","2790.000","32470.000","1810.000","3920.000","5340.000","10550.000","3110.000","4050.000","14250.000","3490.000","4220.000","1550.000","3780.000","","10700.000","27260.000","2750.000","5290.000","2580.000","3670.000","7900.000","12470.000","2950.000","9180.000","37360.000","2240.000","","17420.000","","1390.000","","","3030.000","4980.000","7270.000","9340.000","1790.000","3330.000","4670.000","","10670.000","7640.000","","","1560.000","1430.000","511380.000","4290.000","1550.000"
-"2016-09-21 00:19:10 -0700","","5870.000","","","","","46120.000","","156580.000","428.000","681.000","158970.000","","37350.000","","3450.000","29820.000","28630.000","26730.000","19710.000","54970.000","3740.000","","4840.000","10910.000","2310.000","","","3150.000","2790.000","32550.000","1810.000","3920.000","5340.000","10550.000","3110.000","4050.000","14250.000","3490.000","4220.000","1550.000","3780.000","","10700.000","27260.000","2750.000","5290.000","2580.000","3670.000","7900.000","12470.000","2960.000","9180.000","37360.000","2240.000","","17420.000","","1390.000","","","3030.000","4980.000","7270.000","9350.000","1790.000","3330.000","4670.000","","10670.000","7650.000","","","1560.000","1430.000","511380.000","4290.000","1550.000"
-"2016-09-21 23:27:38 -0700","","5870.000","","","","","46660.000","","163260.000","428.000","681.000","165680.000","","37390.000","","3450.000","30070.000","28890.000","26990.000","19960.000","54970.000","3740.000","","4840.000","10910.000","2310.000","","","3150.000","2790.000","32550.000","1810.000","3920.000","5340.000","10550.000","3110.000","4050.000","14280.000","3490.000","4220.000","1550.000","3780.000","","10790.000","27570.000","2750.000","5290.000","2580.000","3670.000","8210.000","12480.000","2960.000","9190.000","37360.000","2240.000","","17420.000","","1390.000","","","3030.000","5350.000","7270.000","9350.000","1790.000","3330.000","4680.000","","10670.000","7660.000","","","1560.000","1430.000","511380.000","4290.000","1550.000"
-"2016-09-22 10:23:47 -0700","","5870.000","","","","","46660.000","","163440.000","428.000","681.000","165850.000","","37390.000","","3450.000","30070.000","28890.000","26990.000","19960.000","54970.000","3740.000","","4840.000","10910.000","2310.000","","","3150.000","2790.000","32550.000","1810.000","3920.000","5340.000","10550.000","3110.000","4050.000","14280.000","3490.000","4220.000","1550.000","3780.000","","10790.000","27590.000","2750.000","5290.000","2580.000","3670.000","8210.000","12480.000","2960.000","9190.000","37360.000","2240.000","","17420.000","","1390.000","","","3030.000","5350.000","7270.000","9350.000","1790.000","3330.000","4680.000","","10670.000","7660.000","","","1560.000","1430.000","511380.000","4290.000","1550.000"
-"2016-09-22 18:44:49 -0700","","6070.000","","","","","46900.000","","163620.000","428.000","13030.000","166030.000","","37420.000","","3450.000","30100.000","28910.000","27010.000","19990.000","54970.000","3740.000","","4840.000","10830.000","2310.000","","","3150.000","2790.000","32550.000","1810.000","3920.000","5340.000","10550.000","3110.000","4050.000","14310.000","3490.000","4220.000","1550.000","3780.000","","10790.000","27590.000","2750.000","5290.000","2580.000","3670.000","8210.000","12510.000","2960.000","9220.000","37360.000","2240.000","","17420.000","","1390.000","","","3030.000","5350.000","7270.000","9350.000","1790.000","3330.000","4610.000","","10670.000","7690.000","","","1560.000","1430.000","511380.000","4290.000","1550.000"
-"2016-09-23 09:09:29 -0700","","6070.000","","","","","46900.000","","163620.000","428.000","681.000","166030.000","","37420.000","","3450.000","30100.000","28910.000","27010.000","19990.000","54970.000","3740.000","","4840.000","10830.000","2310.000","","","3150.000","2790.000","32550.000","1810.000","3920.000","5340.000","10550.000","3110.000","4050.000","14310.000","3490.000","4220.000","1550.000","3780.000","","10790.000","27590.000","2750.000","5290.000","2580.000","3670.000","8210.000","12510.000","2960.000","9220.000","37360.000","2240.000","","17420.000","","1390.000","","","3030.000","5350.000","7270.000","9350.000","1790.000","3330.000","4610.000","","10670.000","7690.000","","","1560.000","1430.000","511380.000","4290.000","1550.000"
-"2016-09-27 15:13:18 -0700","","6180.000","","","","","47280.000","","166280.000","428.000","681.000","165940.000","","37490.000","","3450.000","30410.000","30840.000","28940.000","21900.000","56580.000","3740.000","","4840.000","10880.000","2310.000","","","3150.000","2790.000","32560.000","1810.000","3920.000","5340.000","10670.000","3110.000","4050.000","14360.000","3490.000","4220.000","1550.000","3780.000","","10810.000","27590.000","2750.000","5400.000","2580.000","3670.000","8210.000","12510.000","2960.000","9210.000","37370.000","2240.000","","17420.000","","1390.000","","","3030.000","5350.000","7270.000","9370.000","1790.000","3330.000","4620.000","","10790.000","7690.000","","","1560.000","1430.000","511380.000","4290.000","1550.000"
-"2016-09-28 09:17:06 -0700","","6180.000","","","","","47280.000","","166280.000","428.000","681.000","165940.000","","37490.000","","3450.000","30410.000","30840.000","28940.000","21900.000","56580.000","3740.000","","4840.000","10880.000","2310.000","","","3150.000","2790.000","32560.000","1810.000","3920.000","5340.000","10670.000","3110.000","4050.000","14360.000","3490.000","4220.000","1550.000","3780.000","","10810.000","27590.000","2750.000","5400.000","2580.000","3670.000","8210.000","12510.000","2960.000","9210.000","37370.000","2240.000","","17420.000","","1390.000","","","3030.000","5350.000","7270.000","9370.000","1790.000","3330.000","4620.000","","10790.000","7690.000","","","1560.000","1430.000","511380.000","4290.000","1550.000"
-"2016-09-29 14:56:26 -0700","","6180.000","","","","","47280.000","","168040.000","428.000","681.000","167710.000","","37500.000","","3450.000","30410.000","30840.000","28940.000","21900.000","56610.000","3740.000","","4840.000","10920.000","2310.000","","","3150.000","2790.000","32560.000","1810.000","3920.000","5340.000","10670.000","3110.000","4050.000","14360.000","3490.000","4220.000","1550.000","3780.000","","10810.000","27630.000","2750.000","5400.000","2580.000","3670.000","8210.000","13570.000","3310.000","9210.000","37370.000","2240.000","","17420.000","","1390.000","","","3030.000","5350.000","7270.000","9740.000","1790.000","3330.000","4620.000","","10790.000","7950.000","","","1560.000","1430.000","511380.000","4290.000","1550.000"
-"2016-10-06 23:04:11 -0700","","6180.000","","","","","47300.000","19030.000","169500.000","428.000","681.000","169180.000","","37580.000","","3450.000","31050.000","32330.000","30450.000","24170.000","56830.000","3740.000","","4840.000","11120.000","2310.000","","","2900.000","2790.000","30040.000","1810.000","2080.000","5520.000","9230.000","3110.000","4050.000","14420.000","3490.000","4220.000","1550.000","3780.000","","10840.000","27640.000","2750.000","5500.000","2250.000","3120.000","8210.000","13570.000","3310.000","9470.000","37380.000","2270.000","","17420.000","","1390.000","","","3230.000","5200.000","7270.000","9740.000","1790.000","2930.000","11200.000","","9350.000","7990.000","","","1560.000","1430.000","511380.000","4290.000","1890.000"
-"2016-10-07 15:30:41 -0700","","6210.000","","","","","47430.000","","169600.000","428.000","681.000","169280.000","","37590.000","","3460.000","31140.000","34450.000","32580.000","26360.000","56890.000","3750.000","","4850.000","11130.000","2320.000","","","2910.000","2790.000","30050.000","1820.000","2080.000","5530.000","9240.000","3110.000","4060.000","14430.000","3500.000","4220.000","1560.000","3790.000","","10850.000","27650.000","2750.000","5510.000","2260.000","3130.000","8210.000","13570.000","3310.000","9470.000","37380.000","2280.000","","17430.000","","1390.000","","","3240.000","5200.000","7280.000","9750.000","1800.000","2940.000","11300.000","","9360.000","7990.000","","","1570.000","1430.000","511390.000","4300.000","1890.000"
-"2016-10-12 09:13:45 -0700","","6210.000","","","","","47580.000","","170600.000","428.000","681.000","170270.000","","37590.000","","3460.000","31520.000","35150.000","33270.000","27060.000","56910.000","3750.000","","4850.000","11130.000","2320.000","","","2910.000","2790.000","30110.000","1820.000","2080.000","5530.000","9240.000","3110.000","4060.000","14430.000","3500.000","4220.000","1560.000","3790.000","","11110.000","27650.000","2750.000","5510.000","2260.000","3130.000","8210.000","13570.000","3310.000","9470.000","37430.000","2280.000","","17430.000","","1390.000","","","3290.000","5200.000","7280.000","9750.000","1800.000","2940.000","11410.000","","9360.000","7990.000","","","1570.000","1430.000","511390.000","4300.000","1890.000"
-"2016-10-19 00:22:41 -0700","","6190.000","","","","","49050.000","","177590.000","428.000","1380.000","176510.000","","37590.000","","3470.000","31930.000","35480.000","33600.000","27390.000","56910.000","4060.000","","4850.000","11130.000","2370.000","","","2910.000","2790.000","30190.000","1820.000","2080.000","5530.000","9240.000","3110.000","4060.000","14410.000","3500.000","4220.000","1560.000","3790.000","","11110.000","28110.000","2750.000","5560.000","2260.000","3130.000","8220.000","13570.000","3310.000","9470.000","37780.000","2280.000","","17430.000","","1390.000","","","3290.000","5400.000","7280.000","9740.000","1800.000","2940.000","4780.000","","9360.000","7990.000","","","1570.000","1430.000","511390.000","4300.000","1890.000"
-"2016-10-24 11:10:17 -0700","","6190.000","","","","","49230.000","","183270.000","428.000","1380.000","182160.000","","37590.000","","3500.000","32510.000","36640.000","34770.000","28550.000","57290.000","4060.000","","4850.000","11150.000","2370.000","","","2910.000","2790.000","30220.000","1820.000","2080.000","5530.000","9240.000","3110.000","4060.000","14510.000","3500.000","4270.000","1560.000","3790.000","","11110.000","28140.000","2750.000","5560.000","2260.000","3130.000","8310.000","13570.000","3300.000","9510.000","38020.000","2280.000","","17430.000","","1390.000","","","3290.000","5540.000","7280.000","9740.000","1800.000","2940.000","4780.000","","9360.000","8030.000","","","1570.000","1430.000","511380.000","4300.000","1940.000"
-"2016-10-25 10:41:32 -0700","","6190.000","","","","","49650.000","","183200.000","428.000","1380.000","182090.000","","38490.000","2470.000","3500.000","33150.000","37480.000","35600.000","29380.000","57390.000","4060.000","","4850.000","11150.000","2370.000","","","2910.000","2790.000","30220.000","1820.000","2080.000","5530.000","9240.000","3110.000","4060.000","14510.000","3500.000","4270.000","1560.000","3790.000","","11110.000","28140.000","2750.000","5560.000","2260.000","3130.000","8310.000","13570.000","3300.000","9510.000","38020.000","2280.000","","17430.000","","1390.000","","","3290.000","5540.000","7280.000","9740.000","1800.000","2940.000","4780.000","","9360.000","8030.000","","","1570.000","1430.000","511380.000","4300.000","1940.000"
-"2016-10-25 16:34:44 -0700","","6140.000","","","","","50250.000","","183160.000","386.000","1340.000","182050.000","","38450.000","2420.000","3460.000","33240.000","37530.000","35660.000","29440.000","57420.000","4020.000","","4810.000","11110.000","2330.000","","","2870.000","2750.000","30180.000","1780.000","2040.000","5490.000","9200.000","3060.000","4020.000","14460.000","3460.000","4230.000","1510.000","3750.000","","11070.000","28100.000","2710.000","5520.000","2220.000","3080.000","8260.000","13530.000","3260.000","9460.000","37980.000","2240.000","","17390.000","","1340.000","","","3240.000","5500.000","7240.000","9700.000","1760.000","2900.000","4740.000","","9320.000","7990.000","","","1530.000","1390.000","511340.000","4260.000","1900.000"
-"2016-10-27 11:29:28 -0700","","6040.000","","","","","49120.000","","181520.000","386.000","1340.000","180410.000","","38450.000","2420.000","3460.000","33240.000","37530.000","35660.000","29440.000","57420.000","4020.000","","4810.000","11110.000","2330.000","","","2870.000","2750.000","30180.000","1780.000","2040.000","5490.000","9200.000","3060.000","4020.000","14460.000","3460.000","4230.000","1510.000","3750.000","","11070.000","28100.000","2710.000","5520.000","2220.000","3080.000","8260.000","13530.000","3260.000","9460.000","37980.000","2240.000","","17390.000","","1340.000","","","3430.000","5500.000","7240.000","9700.000","1760.000","2900.000","4740.000","","9320.000","7990.000","","","1530.000","1390.000","511340.000","4260.000","1900.000"
-"2016-10-28 14:52:55 -0700","","6030.000","","","","","49490.000","","181720.000","386.000","1330.000","180600.000","","38440.000","2410.000","3450.000","32420.000","36800.000","34890.000","29710.000","57410.000","4010.000","","4800.000","10140.000","2320.000","","","2860.000","2740.000","30170.000","1770.000","2030.000","5480.000","8080.000","3060.000","4010.000","14450.000","3450.000","4220.000","1500.000","3730.000","","11090.000","28090.000","2700.000","4570.000","2210.000","3070.000","8250.000","13520.000","3250.000","9460.000","37970.000","2230.000","","17380.000","","1330.000","","","3420.000","5490.000","7230.000","9690.000","1750.000","2890.000","6080.000","","8200.000","7980.000","","","1520.000","1380.000","511330.000","4250.000","1900.000"
-"2016-11-02 00:34:43 -0700","","6090.000","","","","","50500.000","","182780.000","386.000","1360.000","182980.000","","38690.000","2410.000","3450.000","32780.000","38410.000","36820.000","28640.000","57660.000","4010.000","1320.000","4800.000","10850.000","2320.000","","","2860.000","2740.000","30370.000","1770.000","2030.000","4540.000","8130.000","3060.000","4010.000","14490.000","3450.000","4220.000","1500.000","3730.000","","11100.000","28700.000","2700.000","4600.000","2210.000","3070.000","8200.000","13520.000","3470.000","9480.000","37970.000","2230.000","","17380.000","","1330.000","6780.000","","3420.000","5490.000","7230.000","9870.000","1750.000","2890.000","6080.000","","8250.000","8290.000","","","1520.000","1380.000","511330.000","5550.000","1770.000"
-"2016-11-14 11:15:25 -0800","","6090.000","4040.000","183440.000","","","53530.000","","183360.000","386.000","1390.000","183480.000","","39030.000","2410.000","3270.000","34320.000","40850.000","39300.000","32120.000","59130.000","4390.000","1310.000","4790.000","10880.000","2350.000","","","2850.000","2740.000","19760.000","1760.000","2030.000","4540.000","8910.000","3060.000","4010.000","15660.000","3460.000","4340.000","1500.000","3760.000","1520.000","11670.000","28750.000","2700.000","7080.000","2200.000","3070.000","8170.000","13900.000","3500.000","9470.000","37970.000","2230.000","","17410.000","","1330.000","7530.000","","3400.000","5650.000","7160.000","10790.000","1740.000","2890.000","6190.000","6100.000","9030.000","8620.000","","143.000","1510.000","1380.000","511350.000","5570.000","1770.000"
-"2016-11-21 13:53:57 -0800","","6090.000","4040.000","185030.000","","","54010.000","","184880.000","386.000","1390.000","185110.000","","39030.000","2410.000","3270.000","36400.000","46220.000","44690.000","37480.000","59700.000","4390.000","50660.000","4790.000","10090.000","2350.000","2500.000","","2850.000","2740.000","19760.000","1760.000","2030.000","4540.000","8910.000","3060.000","4010.000","15750.000","3460.000","4340.000","1500.000","3760.000","1520.000","11670.000","28750.000","2700.000","7080.000","2200.000","3070.000","8170.000","13900.000","3500.000","9470.000","37970.000","2230.000","","17410.000","","1330.000","7530.000","","3400.000","5940.000","7160.000","10790.000","1740.000","2890.000","6190.000","6110.000","9030.000","8620.000","","143.000","1510.000","1380.000","511350.000","5570.000","1770.000"
-"2016-11-21 14:25:19 -0800","","6090.000","4040.000","185400.000","","","54010.000","","185250.000","386.000","1390.000","185480.000","","39030.000","2410.000","3270.000","36400.000","46220.000","44690.000","37480.000","59700.000","4390.000","50660.000","4790.000","10090.000","2350.000","2500.000","","2850.000","2740.000","19830.000","1760.000","2030.000","4540.000","8910.000","3060.000","4010.000","15750.000","3460.000","4340.000","1500.000","3760.000","1520.000","11670.000","28750.000","2700.000","7080.000","2200.000","3070.000","8170.000","13900.000","3500.000","9660.000","37970.000","2230.000","","17410.000","","1330.000","7530.000","","3400.000","5940.000","7160.000","10790.000","1740.000","2890.000","6190.000","6110.000","9030.000","8620.000","","143.000","1510.000","1380.000","511350.000","5570.000","1770.000"
-"2016-11-28 12:55:38 -0800","","6940.000","4040.000","185530.000","","","54130.000","","185290.000","386.000","1400.000","185600.000","","39000.000","2410.000","3270.000","37450.000","46480.000","44950.000","37740.000","59180.000","4390.000","50660.000","4790.000","9990.000","2350.000","2500.000","","2850.000","2740.000","19950.000","1760.000","2030.000","4540.000","8910.000","3060.000","4010.000","15820.000","3460.000","4340.000","1500.000","3760.000","1520.000","12630.000","28760.000","2700.000","7000.000","2200.000","3070.000","8170.000","13900.000","3500.000","9660.000","37940.000","2230.000","","17410.000","","1330.000","7530.000","3110.000","3400.000","5920.000","7160.000","10790.000","1740.000","2890.000","5090.000","6110.000","9030.000","8620.000","","143.000","1510.000","1380.000","511350.000","5500.000","1770.000"
-"2016-11-30 11:54:58 -0800","","6960.000","4070.000","186850.000","","","54160.000","","186560.000","386.000","1400.000","186930.000","","39000.000","2410.000","4040.000","37600.000","46340.000","46230.000","39030.000","60320.000","4390.000","50660.000","4790.000","9990.000","2350.000","2500.000","","2850.000","2740.000","19950.000","1760.000","2030.000","4540.000","8950.000","3060.000","4010.000","15820.000","3460.000","3330.000","1500.000","3760.000","1520.000","12650.000","28760.000","2700.000","7470.000","2200.000","3070.000","8170.000","13900.000","3500.000","9660.000","37940.000","2230.000","","17410.000","","1330.000","7570.000","3110.000","3400.000","5920.000","7160.000","10790.000","1740.000","2890.000","5090.000","6110.000","9070.000","8620.000","","143.000","1510.000","1380.000","511350.000","5500.000","1770.000"
-"2016-12-07 12:26:43 -0800","","6960.000","6110.000","187690.000","131840.000","","55130.000","","187290.000","386.000","1400.000","187640.000","","39340.000","2410.000","4040.000","38150.000","46810.000","46700.000","39890.000","61050.000","4360.000","50660.000","4790.000","9990.000","2350.000","2500.000","","2850.000","2740.000","19960.000","1760.000","2030.000","4540.000","8950.000","3060.000","4010.000","16240.000","3460.000","3330.000","1500.000","3760.000","1520.000","13300.000","28760.000","2700.000","7470.000","2330.000","3070.000","9290.000","13900.000","3500.000","9660.000","37940.000","2230.000","","17410.000","","1330.000","7570.000","3110.000","3400.000","5920.000","7160.000","10790.000","1740.000","2890.000","5090.000","6110.000","9070.000","8620.000","","143.000","1510.000","1380.000","511350.000","5500.000","2060.000"
-"2016-12-15 17:21:12 -0800","","6960.000","6190.000","191410.000","223680.000","","56880.000","","188940.000","386.000","2080.000","189310.000","","39350.000","2410.000","4040.000","40030.000","48430.000","48330.000","41520.000","61250.000","4360.000","54790.000","4790.000","9950.000","2350.000","2520.000","","2850.000","2740.000","19960.000","1760.000","2030.000","4540.000","8950.000","3060.000","4010.000","16240.000","3460.000","3330.000","1500.000","3760.000","1520.000","13300.000","28760.000","2700.000","7470.000","2290.000","3070.000","9290.000","13900.000","3500.000","9660.000","37940.000","2230.000","3950.000","17410.000","10200.000","1330.000","7570.000","3110.000","3420.000","6650.000","7160.000","10790.000","1740.000","2890.000","5100.000","6160.000","9070.000","8620.000","4740.000","2860.000","1510.000","1380.000","511350.000","5500.000","2020.000"
-"2016-12-20 13:25:19 -0800","8050.000","6960.000","6510.000","187930.000","224540.000","","57590.000","","185170.000","386.000","2080.000","185560.000","","39440.000","2490.000","4130.000","40160.000","50070.000","49960.000","44070.000","61340.000","4360.000","54870.000","5360.000","10190.000","2350.000","4900.000","25960.000","2850.000","2740.000","19960.000","1760.000","2030.000","4540.000","8950.000","3060.000","4010.000","16170.000","3540.000","3330.000","1500.000","3840.000","1520.000","13300.000","28760.000","2700.000","7470.000","2290.000","3070.000","9290.000","13990.000","3500.000","9660.000","37940.000","2230.000","8710.000","17410.000","10390.000","1330.000","7570.000","3190.000","3500.000","6660.000","7160.000","10800.000","1740.000","2890.000","5100.000","6160.000","9070.000","8620.000","8760.000","2860.000","1510.000","1380.000","511430.000","9800.000","2020.000"
-"2016-12-22 11:17:53 -0800","","7250.000","6800.000","189250.000","226500.000","","57890.000","","186490.000","386.000","2080.000","186880.000","","39580.000","2520.000","4160.000","40100.000","49970.000","49860.000","43970.000","61370.000","4340.000","54900.000","5420.000","10230.000","2350.000","4930.000","25990.000","2850.000","2740.000","19960.000","1760.000","2030.000","4540.000","8950.000","3060.000","4010.000","16190.000","3600.000","3440.000","1500.000","3870.000","1520.000","13300.000","28740.000","2700.000","7470.000","2290.000","3070.000","9290.000","14020.000","3850.000","9700.000","37920.000","2230.000","8710.000","17480.000","10420.000","1330.000","7570.000","3220.000","3530.000","6660.000","7160.000","10800.000","1740.000","2890.000","5100.000","6160.000","9070.000","8690.000","8760.000","2860.000","1510.000","1380.000","511500.000","9800.000","2020.000"
-"2016-12-28 11:43:04 -0800","","7250.000","7460.000","190510.000","227160.000","","61260.000","","187560.000","386.000","2080.000","187940.000","","39550.000","2490.000","4120.000","40260.000","50040.000","49930.000","44040.000","61760.000","4340.000","54910.000","5390.000","10220.000","2340.000","4900.000","26000.000","2850.000","2730.000","20000.000","1760.000","2020.000","4540.000","9710.000","3100.000","4000.000","17040.000","3570.000","3430.000","1500.000","3840.000","1510.000","13300.000","28730.000","2690.000","7460.000","2280.000","3060.000","9280.000","13980.000","3850.000","9690.000","37910.000","2220.000","8750.000","17530.000","10380.000","1320.000","8330.000","3190.000","3500.000","6650.000","7150.000","10790.000","1740.000","2880.000","5100.000","6150.000","9830.000","8680.000","8800.000","2860.000","1510.000","1370.000","511460.000","9840.000","2030.000"
-"2017-01-05 10:47:24 -0800","","7250.000","7460.000","190500.000","227210.000","","61260.000","","187560.000","386.000","2080.000","187940.000","","39550.000","2490.000","4120.000","40260.000","50040.000","49930.000","44040.000","61780.000","4340.000","55000.000","5390.000","10220.000","2340.000","4900.000","26000.000","2850.000","2730.000","20000.000","1760.000","2020.000","4540.000","9710.000","3100.000","4030.000","17040.000","3570.000","3430.000","1500.000","3840.000","1510.000","13300.000","28730.000","2690.000","7460.000","2280.000","3060.000","9280.000","13980.000","3850.000","9690.000","37910.000","2220.000","8750.000","17530.000","10380.000","1320.000","8330.000","3190.000","3500.000","6650.000","7150.000","10790.000","1740.000","2880.000","5100.000","6150.000","9830.000","8680.000","8800.000","2860.000","1510.000","1370.000","511460.000","9840.000","2030.000"
-"2017-01-11 22:03:29 -0800","","7250.000","7850.000","191450.000","","7720.000","61350.000","","188540.000","386.000","2080.000","188890.000","","39770.000","2800.000","4430.000","41200.000","52950.000","52310.000","45110.000","64770.000","4340.000","55380.000","5710.000","9780.000","2340.000","5210.000","32240.000","2850.000","2730.000","20070.000","1760.000","2020.000","4540.000","10070.000","3100.000","4030.000","19300.000","3890.000","3430.000","1500.000","4150.000","1510.000","13300.000","28790.000","2690.000","7460.000","2280.000","3060.000","9340.000","14410.000","3850.000","9690.000","37910.000","2220.000","8750.000","17530.000","10700.000","1320.000","8690.000","3670.000","3780.000","6660.000","7150.000","14170.000","1740.000","2880.000","4960.000","5670.000","10190.000","8680.000","9020.000","2860.000","1510.000","1370.000","511780.000","9780.000","2030.000"
diff --git a/test/size.txt b/test/size.txt
deleted file mode 100644
index 0fc0ef29409b7..0000000000000
--- a/test/size.txt
+++ /dev/null
@@ -1,117 +0,0 @@
-    max   |       min   |      gzip   |   file
-    ---   |       ---   |       ---   |   ---
- 335 kB   |   31.5 kB   |   12.3 kB   |   alp.js / alp.max.js
- 418 kB   |   18.8 kB   |   7.33 kB   |   amp4ads-host-v0.js / amp-inabox-host.js
-2.06 MB   |    254 kB   |   80.4 kB   |   amp4ads-v0.js / amp-inabox.js
-2.32 kB   |     790 B   |     469 B   |   examiner.js / examiner.max.js
-2.01 MB   |    255 kB   |   80.8 kB   |   shadow-v0.js / amp-shadow.js
-2.03 MB   |    249 kB   |   78.9 kB   |   v0.js / amp.js
- 217 kB   |   37.8 kB   |   11.8 kB   |   ww.js / ww.max.js
- 397 kB   |     14 kB   |   6.08 kB   |   v0/amp-3d-gltf-0.1.js
- 607 kB   |   49.3 kB   |   15.4 kB   |   v0/amp-3q-player-0.1.js
- 603 kB   |   48.8 kB   |   16.2 kB   |   v0/amp-access-0.1.js
- 284 kB   |   11.5 kB   |   4.53 kB   |   v0/amp-access-laterpay-0.1.js
- 285 kB   |   11.9 kB   |   4.61 kB   |   v0/amp-access-laterpay-0.2.js
- 307 kB   |   9.82 kB   |   4.17 kB   |   v0/amp-access-scroll-0.1.js
- 370 kB   |   10.6 kB   |   4.05 kB   |   v0/amp-accordion-0.1.js
-1.01 MB   |   59.9 kB   |   20.1 kB   |   v0/amp-ad-0.1.js
- 367 kB   |   12.1 kB   |   4.88 kB   |   v0/amp-ad-exit-0.1.js
- 926 kB   |   70.9 kB   |   24.8 kB   |   v0/amp-ad-network-adsense-impl-0.1.js
- 848 kB   |   52.6 kB   |   18.5 kB   |   v0/amp-ad-network-adzerk-impl-0.1.js
-1.12 MB   |    102 kB   |   34.8 kB   |   v0/amp-ad-network-doubleclick-impl-0.1.js
- 832 kB   |   51.6 kB   |   18.3 kB   |   v0/amp-ad-network-fake-impl-0.1.js
- 433 kB   |   18.2 kB   |   7.32 kB   |   v0/amp-addthis-0.1.js
- 969 kB   |    107 kB   |   33.4 kB   |   v0/amp-analytics-0.1.js
- 112 kB   |   4.08 kB   |   1.99 kB   |   v0/amp-anim-0.1.js
- 594 kB   |   99.8 kB   |   31.3 kB   |   v0/amp-animation-0.1.js
- 399 kB   |   19.6 kB   |   6.76 kB   |   v0/amp-apester-media-0.1.js
- 249 kB   |   9.05 kB   |   3.51 kB   |   v0/amp-app-banner-0.1.js
- 322 kB   |   6.22 kB   |   2.67 kB   |   v0/amp-audio-0.1.js
- 370 kB   |   13.2 kB   |   5.29 kB   |   v0/amp-auto-ads-0.1.js
- 393 kB   |   12.2 kB   |   5.36 kB   |   v0/amp-beopinion-0.1.js
- 804 kB   |   96.3 kB   |   33.8 kB   |   v0/amp-bind-0.1.js
- 375 kB   |   13.3 kB   |   5.74 kB   |   v0/amp-bodymovin-animation-0.1.js
- 611 kB   |   52.3 kB   |   16.4 kB   |   v0/amp-brid-player-0.1.js
- 612 kB   |   51.5 kB   |   16.2 kB   |   v0/amp-brightcove-0.1.js
- 361 kB   |   13.6 kB   |   4.91 kB   |   v0/amp-byside-content-0.1.js
- 294 kB   |   3.73 kB   |   1.78 kB   |   v0/amp-call-tracking-0.1.js
- 462 kB   |   25.5 kB   |   8.35 kB   |   v0/amp-carousel-0.1.js
-90.8 kB   |     809 B   |     478 B   |   v0/amp-compare-slider-0.1.js
- 372 kB   |   18.6 kB   |   6.73 kB   |   v0/amp-consent-0.1.js
- 152 kB   |   9.77 kB   |   4.49 kB   |   v0/amp-crypto-polyfill-0.1.js
- 613 kB   |   51.2 kB   |     16 kB   |   v0/amp-dailymotion-0.1.js
-1.24 MB   |    650 kB   |    146 kB   |   v0/amp-date-picker-0.1.js
- 227 kB   |   1.73 kB   |     895 B   |   v0/amp-dynamic-css-classes-0.1.js
- 280 kB   |   5.23 kB   |   2.27 kB   |   v0/amp-experiment-0.1.js
- 395 kB   |   12.9 kB   |   5.66 kB   |   v0/amp-facebook-0.1.js
- 394 kB   |   12.9 kB   |   5.64 kB   |   v0/amp-facebook-comments-0.1.js
- 394 kB   |   12.9 kB   |   5.65 kB   |   v0/amp-facebook-like-0.1.js
- 394 kB   |   12.9 kB   |   5.65 kB   |   v0/amp-facebook-page-0.1.js
-95.6 kB   |   3.14 kB   |   1.42 kB   |   v0/amp-fit-text-0.1.js
- 255 kB   |   4.31 kB   |      2 kB   |   v0/amp-font-0.1.js
- 421 kB   |   25.8 kB   |   9.05 kB   |   v0/amp-form-0.1.js
- 385 kB   |   17.5 kB   |   5.27 kB   |   v0/amp-fx-collection-0.1.js
- 109 kB   |   4.29 kB   |   1.79 kB   |   v0/amp-fx-flying-carpet-0.1.js
- 301 kB   |   5.13 kB   |   2.42 kB   |   v0/amp-geo-0.1.js
- 603 kB   |   49.2 kB   |   15.4 kB   |   v0/amp-gfycat-0.1.js
- 393 kB   |   11.6 kB   |   5.15 kB   |   v0/amp-gist-0.1.js
- 177 kB   |    3.7 kB   |   1.75 kB   |   v0/amp-google-document-embed-0.1.js
- 141 kB   |   5.36 kB   |   2.37 kB   |   v0/amp-google-vrview-image-0.1.js
- 287 kB   |   6.71 kB   |   2.64 kB   |   v0/amp-gwd-animation-0.1.js
- 127 kB   |   1.67 kB   |     869 B   |   v0/amp-hulu-0.1.js
- 431 kB   |     19 kB   |   7.75 kB   |   v0/amp-iframe-0.1.js
- 641 kB   |   56.1 kB   |   18.3 kB   |   v0/amp-ima-video-0.1.js
- 456 kB   |   29.2 kB   |    9.6 kB   |   v0/amp-image-lightbox-0.1.js
- 456 kB   |   24.3 kB   |   8.22 kB   |   v0/amp-image-viewer-0.1.js
- 148 kB   |   2.48 kB   |   1.23 kB   |   v0/amp-imgur-0.1.js
- 152 kB   |   4.29 kB   |   1.94 kB   |   v0/amp-instagram-0.1.js
- 290 kB   |   6.36 kB   |   2.73 kB   |   v0/amp-install-serviceworker-0.1.js
- 158 kB   |   2.34 kB   |   1.21 kB   |   v0/amp-izlesene-0.1.js
- 129 kB   |   2.62 kB   |   1.13 kB   |   v0/amp-jwplayer-0.1.js
- 159 kB   |   3.43 kB   |   1.51 kB   |   v0/amp-kaltura-player-0.1.js
- 368 kB   |     13 kB   |    5.1 kB   |   v0/amp-lightbox-0.1.js
- 516 kB   |   44.2 kB   |   13.6 kB   |   v0/amp-lightbox-gallery-0.1.js
- 362 kB   |   12.1 kB   |   4.96 kB   |   v0/amp-list-0.1.js
- 378 kB   |   12.7 kB   |   4.88 kB   |   v0/amp-live-list-0.1.js
- 393 kB   |     12 kB   |   5.29 kB   |   v0/amp-mathml-0.1.js
- 322 kB   |   55.4 kB   |   20.8 kB   |   v0/amp-mustache-0.1.js
-2.02 MB   |    173 kB   |   54.7 kB   |   v0/amp-next-page-0.1.js
- 609 kB   |   51.2 kB   |   16.1 kB   |   v0/amp-nexxtv-player-0.1.js
-93.1 kB   |   2.34 kB   |   1.01 kB   |   v0/amp-o2-player-0.1.js
- 608 kB   |   49.8 kB   |   15.5 kB   |   v0/amp-ooyala-player-0.1.js
- 494 kB   |   21.9 kB   |   7.71 kB   |   v0/amp-pan-zoom-0.1.js
- 350 kB   |   19.1 kB   |   5.58 kB   |   v0/amp-pinterest-0.1.js
- 354 kB   |   13.1 kB   |   6.72 kB   |   v0/amp-playbuzz-0.1.js
- 326 kB   |   7.06 kB   |   3.01 kB   |   v0/amp-position-observer-0.1.js
-91.5 kB   |   1.46 kB   |     730 B   |   v0/amp-reach-player-0.1.js
- 393 kB   |   12.3 kB   |   5.34 kB   |   v0/amp-reddit-0.1.js
- 138 kB   |   2.45 kB   |   1.21 kB   |   v0/amp-riddle-quiz-0.1.js
- 265 kB   |   6.47 kB   |   2.61 kB   |   v0/amp-selector-0.1.js
- 323 kB   |   4.79 kB   |    2.2 kB   |   v0/amp-share-tracking-0.1.js
- 313 kB   |   8.95 kB   |   3.54 kB   |   v0/amp-sidebar-0.1.js
-  51 kB   |     745 B   |     463 B   |   v0/amp-slides-0.1.js
- 311 kB   |   14.4 kB   |    5.8 kB   |   v0/amp-social-share-0.1.js
-92.7 kB   |   1.91 kB   |     897 B   |   v0/amp-soundcloud-0.1.js
-94.1 kB   |   3.15 kB   |   1.12 kB   |   v0/amp-springboard-player-0.1.js
- 115 kB   |   6.27 kB   |   2.62 kB   |   v0/amp-sticky-ad-1.0.js
-1.46 MB   |    261 kB   |   72.1 kB   |   v0/amp-story-0.1.js
-1.81 MB   |    304 kB   |   78.8 kB   |   v0/amp-story-1.0.js
- 327 kB   |   9.46 kB   |   3.58 kB   |   v0/amp-story-auto-ads-0.1.js
- 663 kB   |   51.6 kB   |   17.2 kB   |   v0/amp-subscriptions-0.1.js
- 567 kB   |   93.8 kB   |     25 kB   |   v0/amp-subscriptions-google-0.1.js
- 128 kB   |     40 kB   |   7.42 kB   |   v0/amp-timeago-0.1.js
- 394 kB   |   12.3 kB   |   5.41 kB   |   v0/amp-twitter-0.1.js
- 294 kB   |   10.2 kB   |   4.01 kB   |   v0/amp-user-notification-0.1.js
- 616 kB   |     53 kB   |   16.4 kB   |   v0/amp-video-0.1.js
- 275 kB   |   3.99 kB   |   1.78 kB   |   v0/amp-video-service-0.1.js
- 381 kB   |   13.9 kB   |   5.96 kB   |   v0/amp-viewer-integration-0.1.js
- 610 kB   |     49 kB   |   15.5 kB   |   v0/amp-vimeo-0.1.js
-84.5 kB   |   1.45 kB   |     766 B   |   v0/amp-vine-0.1.js
- 834 kB   |    513 kB   |    168 kB   |   v0/amp-viz-vega-0.1.js
- 302 kB   |   4.73 kB   |   2.01 kB   |   v0/amp-vk-0.1.js
- 420 kB   |     19 kB   |   6.74 kB   |   v0/amp-web-push-0.1.js
- 609 kB   |   49.7 kB   |   15.5 kB   |   v0/amp-wistia-player-0.1.js
- 618 kB   |   52.3 kB   |   16.5 kB   |   v0/amp-youtube-0.1.js
- 165 kB   |   11.4 kB   |   4.35 kB   |   current-min/ampcontext-v0.js / current/ampcontext-lib.js
- 670 kB   |    136 kB   |   44.1 kB   |   current-min/f.js / current/integration.js
- 112 kB   |   7.97 kB   |   3.13 kB   |   current-min/iframe-transport-client-v0.js / current/iframe-transport-client-lib.js
diff --git a/test/unit/3p/test-3p-frame.js b/test/unit/3p/test-3p-frame.js
index d30212edbdf20..346db3e664030 100644
--- a/test/unit/3p/test-3p-frame.js
+++ b/test/unit/3p/test-3p-frame.js
@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
-import {DomFingerprint} from '../../../src/utils/dom-fingerprint';
+import {DomFingerprint} from '../../../src/core/dom/fingerprint';
 import {Services} from '../../../src/services';
+import {WindowInterface} from '../../../src/window-interface';
 import {
   addDataAndJsonAttributes_,
   applySandbox,
@@ -34,623 +35,594 @@ import {
 import {dev} from '../../../src/log';
 import {toggleExperiment} from '../../../src/experiments';
 
-describe
-  .configure()
-  .ifChrome()
-  .run('3p-frame', () => {
-    let clock;
-    let container;
-    let preconnect;
-
-    beforeEach(() => {
-      clock = window.sandbox.useFakeTimers();
-      container = document.createElement('div');
-      document.body.appendChild(container);
-      preconnect = Services.preconnectFor(window);
-    });
+describes.realWin('3p-frame', {amp: true}, (env) => {
+  let window, document;
+
+  beforeEach(() => {
+    window = env.win;
+    document = window.document;
+  });
+
+  function mockMode(mode) {
+    env.sandbox.stub(window.parent, '__AMP_MODE').value(mode);
+  }
+
+  describe
+    .configure()
+    .ifChrome()
+    .run('3p-frame', () => {
+      let clock;
+      let container;
+      let preconnect;
+
+      beforeEach(() => {
+        clock = env.sandbox.useFakeTimers();
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        preconnect = Services.preconnectFor(window);
+      });
 
-    afterEach(() => {
-      resetBootstrapBaseUrlForTesting(window);
-      resetCountForTesting();
-      const m = document.querySelector('[name="amp-3p-iframe-src"]');
-      if (m) {
-        m.parentElement.removeChild(m);
+      afterEach(() => {
+        resetBootstrapBaseUrlForTesting(window);
+        resetCountForTesting();
+        const m = document.querySelector('[name="amp-3p-iframe-src"]');
+        if (m) {
+          m.parentElement.removeChild(m);
+        }
+        document.body.removeChild(container);
+        Services.ampdoc(window.document).meta_ = null;
+      });
+
+      function addCustomBootstrap(url) {
+        const meta = document.createElement('meta');
+        meta.setAttribute('name', 'amp-3p-iframe-src');
+        meta.setAttribute('content', url);
+        document.head.appendChild(meta);
       }
-      document.body.removeChild(container);
-      Services.ampdoc(window.document).meta_ = null;
-    });
 
-    function addCustomBootstrap(url) {
-      const meta = document.createElement('meta');
-      meta.setAttribute('name', 'amp-3p-iframe-src');
-      meta.setAttribute('content', url);
-      document.head.appendChild(meta);
-    }
-
-    function setupElementFunctions(div) {
-      const {innerWidth: width, innerHeight: height} = window;
-      div.getIntersectionChangeEntry = function () {
-        return {
-          time: 1234567888,
-          rootBounds: {
-            left: 0,
-            top: 0,
-            width,
-            height,
-            bottom: height,
-            right: width,
-            x: 0,
-            y: 0,
-          },
-          boundingClientRect: {
-            width: 100,
-            height: 200,
-          },
-          intersectionRect: {
-            left: 0,
-            top: 0,
-            width: 0,
-            height: 0,
-            bottom: 0,
-            right: 0,
-            x: 0,
-            y: 0,
-          },
+      function setupElementFunctions(div) {
+        div.getAmpDoc = function () {
+          return Services.ampdoc(window.document);
         };
-      };
-      div.getPageLayoutBox = function () {
-        return {
-          left: 0,
-          top: 0,
-          width: 100,
-          height: 200,
+
+        const {innerHeight: height, innerWidth: width} = window;
+        div.getIntersectionChangeEntry = function () {
+          return {
+            time: 1234567888,
+            rootBounds: {
+              left: 0,
+              top: 0,
+              width,
+              height,
+              bottom: height,
+              right: width,
+              x: 0,
+              y: 0,
+            },
+            boundingClientRect: {
+              width: 100,
+              height: 200,
+            },
+            intersectionRect: {
+              left: 0,
+              top: 0,
+              width: 0,
+              height: 0,
+              bottom: 0,
+              right: 0,
+              x: 0,
+              y: 0,
+            },
+          };
         };
-      };
-      div.getAmpDoc = function () {
-        return Services.ampdoc(window.document);
-      };
-    }
-
-    it('add attributes', () => {
-      const div = document.createElement('div');
-      div.setAttribute('data-foo-bar', 'foobar');
-      div.setAttribute('data-hello', 'world');
-      div.setAttribute('foo-bar', 'nope');
-      div.setAttribute('data-vars-hello', 'nope');
-      let obj = {};
-      addDataAndJsonAttributes_(div, obj);
-      expect(obj).to.deep.equal({
-        'fooBar': 'foobar',
-        'hello': 'world',
-      });
+        env.sandbox.stub(div, 'offsetParent').value(null);
+        env.sandbox.stub(div, 'offsetTop').value(0);
+        env.sandbox.stub(div, 'offsetLeft').value(0);
+        env.sandbox.stub(div, 'offsetWidth').value(100);
+        env.sandbox.stub(div, 'offsetHeight').value(200);
+      }
 
-      div.setAttribute('json', '{"abc": [1,2,3]}');
+      it('add attributes', () => {
+        const div = document.createElement('div');
+        div.setAttribute('data-foo-bar', 'foobar');
+        div.setAttribute('data-hello', 'world');
+        div.setAttribute('foo-bar', 'nope');
+        div.setAttribute('data-vars-hello', 'nope');
+        let obj = {};
+        addDataAndJsonAttributes_(div, obj);
+        expect(obj).to.deep.equal({
+          'fooBar': 'foobar',
+          'hello': 'world',
+        });
 
-      obj = {};
-      addDataAndJsonAttributes_(div, obj);
-      expect(obj).to.deep.equal({
-        'fooBar': 'foobar',
-        'hello': 'world',
-        'abc': [1, 2, 3],
+        div.setAttribute('json', '{"abc": [1,2,3]}');
+
+        obj = {};
+        addDataAndJsonAttributes_(div, obj);
+        expect(obj).to.deep.equal({
+          'fooBar': 'foobar',
+          'hello': 'world',
+          'abc': [1, 2, 3],
+        });
       });
-    });
 
-    // TODO(bradfrizzell) break this out into a test-iframe-attributes
-    it('should create an iframe', () => {
-      window.__AMP_MODE = {
-        localDev: true,
-        development: false,
-        minified: false,
-        test: false,
-        version: '$internalRuntimeVersion$',
-      };
-      toggleExperiment(window, 'exp-a', true);
-      toggleExperiment(window, 'exp-b', true);
-      clock.tick(1234567888);
-      const link = document.createElement('link');
-      link.setAttribute('rel', 'canonical');
-      link.setAttribute('href', 'https://foo.bar/baz');
-      document.head.appendChild(link);
-
-      const div = document.createElement('my-element');
-      div.setAttribute('data-test-attr', 'value');
-      div.setAttribute('data-ping', 'pong');
-      div.setAttribute('width', '50');
-      div.setAttribute('height', '100');
-
-      const {innerWidth: width, innerHeight: height} = window;
-      setupElementFunctions(div);
-
-      const viewer = Services.viewerForDoc(window.document);
-      const viewerMock = window.sandbox.mock(viewer);
-      viewerMock
-        .expects('getUnconfirmedReferrerUrl')
-        .returns('http://acme.org/')
-        .once();
-
-      container.appendChild(div);
-
-      window.sandbox
-        .stub(DomFingerprint, 'generate')
-        .callsFake(() => 'MY-MOCK-FINGERPRINT');
-
-      const iframe = getIframe(window, div, '_ping_', {clientId: 'cidValue'});
-      const {src} = iframe;
-      const locationHref = location.href;
-      expect(locationHref).to.not.be.empty;
-      const docInfo = Services.documentInfoForDoc(window.document);
-      expect(docInfo.pageViewId).to.not.be.empty;
-      const name = JSON.parse(iframe.name);
-      const sentinel = name.attributes._context['sentinel'];
-      const fragment = {
-        'testAttr': 'value',
-        'ping': 'pong',
-        'width': 50,
-        'height': 100,
-        'type': '_ping_',
-        '_context': {
-          'referrer': 'http://acme.org/',
-          'ampcontextVersion': '$internalRuntimeVersion$',
-          'ampcontextFilepath':
-            'https://3p.ampproject.net/$internalRuntimeVersion$/ampcontext-v0.js',
-          'canonicalUrl': docInfo.canonicalUrl,
-          'sourceUrl': locationHref,
-          'pageViewId': docInfo.pageViewId,
-          'clientId': 'cidValue',
-          'initialLayoutRect': div.getPageLayoutBox(),
-          'location': {'href': locationHref},
-          'tagName': 'MY-ELEMENT',
-          'mode': {
-            'localDev': true,
-            'development': false,
-            'minified': false,
-            'test': false,
-            'version': '$internalRuntimeVersion$',
-            'esm': false,
-          },
-          'canary': true,
-          'hidden': false,
-          // Note that DOM fingerprint will change if the document DOM changes
-          // Note also that running it using --files uses different DOM.
-          'domFingerprint': '1725030182',
-          'startTime': 1234567888,
-          'experimentToggles': {'exp-a': true, 'exp-b': true},
-          'sentinel': sentinel,
-          'initialIntersection': {
-            'time': 1234567888,
-            'rootBounds': {
-              'left': 0,
-              'top': 0,
-              'width': width,
-              'height': height,
-              'bottom': height,
-              'right': width,
-              'x': 0,
-              'y': 0,
-            },
-            'boundingClientRect': {'width': 100, 'height': 200},
-            'intersectionRect': {
-              'left': 0,
-              'top': 0,
-              'width': 0,
-              'height': 0,
-              'bottom': 0,
-              'right': 0,
-              'x': 0,
-              'y': 0,
+      it('should create an iframe', () => {
+        mockMode({
+          localDev: true,
+          development: false,
+          minified: false,
+          test: false,
+          version: '$internalRuntimeVersion$',
+        });
+        toggleExperiment(window, 'exp-a', true);
+        toggleExperiment(window, 'exp-b', true);
+        clock.tick(1234567888);
+        const link = document.createElement('link');
+        link.setAttribute('rel', 'canonical');
+        link.setAttribute('href', 'https://foo.bar/baz');
+        document.head.appendChild(link);
+
+        const div = document.createElement('my-element');
+        div.setAttribute('data-test-attr', 'value');
+        div.setAttribute('data-ping', 'pong');
+        div.setAttribute('width', '50');
+        div.setAttribute('height', '100');
+
+        setupElementFunctions(div);
+
+        const viewer = Services.viewerForDoc(window.document);
+        const viewerMock = env.sandbox.mock(viewer);
+        viewerMock
+          .expects('getUnconfirmedReferrerUrl')
+          .returns('http://acme.org/')
+          .once();
+
+        container.appendChild(div);
+
+        env.sandbox
+          .stub(DomFingerprint, 'generate')
+          .callsFake(() => 'MY-MOCK-FINGERPRINT');
+
+        const locationHref = location.href;
+        expect(locationHref).to.not.be.empty;
+        env.sandbox
+          .stub(WindowInterface, 'getLocation')
+          .returns({href: locationHref});
+
+        const initialIntersection = {test: 'testIntersection'};
+        const iframe = getIframe(
+          window,
+          div,
+          '_ping_',
+          {clientId: 'cidValue'},
+          {
+            initialIntersection,
+          }
+        );
+        const {src} = iframe;
+        const docInfo = Services.documentInfoForDoc(window.document);
+        expect(docInfo.pageViewId).to.not.be.empty;
+        const name = JSON.parse(iframe.name);
+        const sentinel = name.attributes._context['sentinel'];
+        const fragment = {
+          'testAttr': 'value',
+          'ping': 'pong',
+          'width': 50,
+          'height': 100,
+          'type': '_ping_',
+          '_context': {
+            'referrer': 'http://acme.org/',
+            'ampcontextVersion': '$internalRuntimeVersion$',
+            'ampcontextFilepath':
+              'https://3p.ampproject.net/$internalRuntimeVersion$/ampcontext-v0.js',
+            'canonicalUrl': docInfo.canonicalUrl,
+            'sourceUrl': locationHref,
+            'pageViewId': docInfo.pageViewId,
+            'clientId': 'cidValue',
+            'initialLayoutRect': {height: 200, left: 0, top: 0, width: 100},
+            'location': {'href': locationHref},
+            'tagName': 'MY-ELEMENT',
+            'mode': {
+              'localDev': true,
+              'development': false,
+              'minified': false,
+              'test': false,
+              'version': '$internalRuntimeVersion$',
+              'esm': false,
             },
+            'canary': false,
+            'hidden': false,
+            // Note that DOM fingerprint will change if the document DOM changes
+            // Note also that running it using --files uses different DOM.
+            'domFingerprint': '1725030182',
+            'startTime': 1234567888,
+            'experimentToggles': {'exp-a': true, 'exp-b': true},
+            'sentinel': sentinel,
+            initialIntersection,
           },
-        },
-      };
-      expect(src).to.equal(
-        'http://ads.localhost:9876/dist.3p/current/frame.max.html'
-      );
-      // Since DOM fingerprint changes between browsers and documents, to have
-      // stable tests, we can only verify its existence.
-      expect(name.attributes._context.domFingerprint).to.exist;
-      delete name.attributes._context.domFingerprint;
-      delete fragment._context.domFingerprint;
-      // Value changes between tests.
-      // TODO: Switch test to isolated window.
-      expect(name.attributes._context.experimentToggles).to.exist;
-      delete name.attributes._context.experimentToggles;
-      delete fragment._context.experimentToggles;
-      expect(name.attributes).to.deep.jsonEqual(fragment);
-    });
-
-    it('should copy attributes to iframe', () => {
-      const div = document.createElement('my-element');
-      div.setAttribute('width', '50');
-      div.setAttribute('height', '100');
-      div.setAttribute('title', 'a_title');
-      div.setAttribute('not_allowlisted', 'shouldnt_be_in_iframe');
-      setupElementFunctions(div);
-
-      container.appendChild(div);
+        };
+        expect(src).to.equal(
+          'http://ads.localhost:9876/dist.3p/current/frame.max.html'
+        );
+        // Since DOM fingerprint changes between browsers and documents, to have
+        // stable tests, we can only verify its existence.
+        expect(name.attributes._context.domFingerprint).to.exist;
+        delete name.attributes._context.domFingerprint;
+        delete fragment._context.domFingerprint;
+        // Value changes between tests.
+        // TODO: Switch test to isolated window.
+        expect(name.attributes._context.experimentToggles).to.exist;
+        delete name.attributes._context.experimentToggles;
+        delete fragment._context.experimentToggles;
+        expect(name.attributes).to.deep.jsonEqual(fragment);
+      });
 
-      const iframe = getIframe(window, div, 'none');
+      it('should copy attributes to iframe', () => {
+        const div = document.createElement('my-element');
+        div.setAttribute('width', '50');
+        div.setAttribute('height', '100');
+        div.setAttribute('title', 'a_title');
+        div.setAttribute('not_allowlisted', 'shouldnt_be_in_iframe');
+        setupElementFunctions(div);
 
-      expect(iframe.width).to.equal('50');
-      expect(iframe.height).to.equal('100');
-      expect(iframe.title).to.equal('a_title');
-      expect(iframe.not_allowlisted).to.equal(undefined);
-    });
+        container.appendChild(div);
 
-    it('should set feature policy for sync-xhr', () => {
-      const div = document.createElement('my-element');
-      setupElementFunctions(div);
-      container.appendChild(div);
-      const iframe = getIframe(window, div, 'none');
-      expect(iframe.getAttribute('allow')).to.equal("sync-xhr 'none';");
-    });
+        const iframe = getIframe(window, div, 'none');
 
-    it('should set sandbox', () => {
-      const div = document.createElement('my-element');
-      setupElementFunctions(div);
-      container.appendChild(div);
-      const iframe = getIframe(window, div, 'none');
-      expect(iframe.getAttribute('sandbox')).to.equal(
-        'allow-top-navigation-by-user-activation ' +
-          'allow-popups-to-escape-sandbox allow-forms ' +
-          'allow-modals allow-pointer-lock allow-popups allow-same-origin ' +
-          'allow-scripts'
-      );
-    });
+        expect(iframe.width).to.equal('50');
+        expect(iframe.height).to.equal('100');
+        expect(iframe.title).to.equal('a_title');
+        expect(iframe.not_allowlisted).to.equal(undefined);
+      });
 
-    it('should set sandbox (direct call)', () => {
-      const iframe = document.createElement('iframe');
-      applySandbox(iframe);
-      expect(iframe.getAttribute('sandbox')).to.equal(
-        'allow-top-navigation-by-user-activation ' +
-          'allow-popups-to-escape-sandbox allow-forms ' +
-          'allow-modals allow-pointer-lock allow-popups allow-same-origin ' +
-          'allow-scripts'
-      );
-    });
+      it('should set feature policy for sync-xhr', () => {
+        const div = document.createElement('my-element');
+        setupElementFunctions(div);
+        container.appendChild(div);
+        const iframe = getIframe(window, div, 'none');
+        expect(iframe.getAttribute('allow')).to.equal("sync-xhr 'none';");
+      });
 
-    it('should not set sandbox without feature detection', () => {
-      const iframe = document.createElement('iframe');
-      iframe.sandbox.supports = null;
-      applySandbox(iframe);
-      expect(iframe.getAttribute('sandbox')).to.equal(null);
-    });
+      it('should set sandbox', () => {
+        const div = document.createElement('my-element');
+        setupElementFunctions(div);
+        container.appendChild(div);
+        const iframe = getIframe(window, div, 'none');
+        expect(iframe.getAttribute('sandbox')).to.equal(
+          'allow-top-navigation-by-user-activation ' +
+            'allow-popups-to-escape-sandbox allow-forms ' +
+            'allow-modals allow-pointer-lock allow-popups allow-same-origin ' +
+            'allow-scripts'
+        );
+      });
 
-    it('should not set sandbox with failing feature detection', () => {
-      const iframe = document.createElement('iframe');
-      iframe.sandbox.supports = function (flag) {
-        return flag != 'allow-top-navigation-by-user-activation';
-      };
-      applySandbox(iframe);
-      expect(iframe.getAttribute('sandbox')).to.equal(null);
-    });
+      it('should set sandbox (direct call)', () => {
+        const iframe = document.createElement('iframe');
+        applySandbox(iframe);
+        expect(iframe.getAttribute('sandbox')).to.equal(
+          'allow-top-navigation-by-user-activation ' +
+            'allow-popups-to-escape-sandbox allow-forms ' +
+            'allow-modals allow-pointer-lock allow-popups allow-same-origin ' +
+            'allow-scripts'
+        );
+      });
 
-    it('should pick the right bootstrap url for local-dev mode', () => {
-      window.__AMP_MODE = {localDev: true};
-      const ampdoc = Services.ampdoc(window.document);
-      expect(getBootstrapBaseUrl(window, ampdoc)).to.equal(
-        'http://ads.localhost:9876/dist.3p/current/frame.max.html'
-      );
-    });
+      it('should not set sandbox without feature detection', () => {
+        const iframe = document.createElement('iframe');
+        iframe.sandbox.supports = null;
+        applySandbox(iframe);
+        expect(iframe.getAttribute('sandbox')).to.equal(null);
+      });
 
-    it('should pick the right bootstrap url for testing mode', () => {
-      window.__AMP_MODE = {test: true};
-      const ampdoc = Services.ampdoc(window.document);
-      expect(getBootstrapBaseUrl(window, ampdoc)).to.equal(
-        'http://ads.localhost:9876/dist.3p/current/frame.max.html'
-      );
-    });
+      it('should not set sandbox with failing feature detection', () => {
+        const iframe = document.createElement('iframe');
+        iframe.sandbox.supports = function (flag) {
+          return flag != 'allow-top-navigation-by-user-activation';
+        };
+        applySandbox(iframe);
+        expect(iframe.getAttribute('sandbox')).to.equal(null);
+      });
 
-    it('should pick the right bootstrap unique url (prod)', () => {
-      window.__AMP_MODE = {};
-      const ampdoc = Services.ampdoc(window.document);
-      expect(getBootstrapBaseUrl(window, ampdoc)).to.match(
-        /^https:\/\/d-\d+\.ampproject\.net\/\$\internal\w+\$\/frame\.html$/
-      );
-    });
+      it('should pick the right bootstrap url for local-dev mode', () => {
+        mockMode({localDev: true});
+        const ampdoc = Services.ampdoc(window.document);
+        expect(getBootstrapBaseUrl(window, ampdoc)).to.equal(
+          'http://ads.localhost:9876/dist.3p/current/frame.max.html'
+        );
+      });
 
-    it('should return a stable URL in getBootstrapBaseUrl', () => {
-      window.__AMP_MODE = {};
-      const ampdoc = Services.ampdoc(window.document);
-      expect(getBootstrapBaseUrl(window, ampdoc)).to.equal(
-        getBootstrapBaseUrl(window, ampdoc)
-      );
-    });
+      it('should pick the right bootstrap url for testing mode', () => {
+        mockMode({test: true});
+        const ampdoc = Services.ampdoc(window.document);
+        expect(getBootstrapBaseUrl(window, ampdoc)).to.equal(
+          'http://ads.localhost:9876/dist.3p/current/frame.max.html'
+        );
+      });
 
-    it('should return a stable URL in getDefaultBootstrapBaseUrl', () => {
-      window.__AMP_MODE = {};
-      expect(getDefaultBootstrapBaseUrl(window)).to.equal(
-        getDefaultBootstrapBaseUrl(window)
-      );
-    });
+      it('should pick the right bootstrap unique url (prod)', () => {
+        mockMode({});
+        const ampdoc = Services.ampdoc(window.document);
+        expect(getBootstrapBaseUrl(window, ampdoc)).to.match(
+          /^https:\/\/d-\d+\.ampproject\.net\/\$\internal\w+\$\/frame\.html$/
+        );
+      });
 
-    it('should pick the right bootstrap url (custom)', () => {
-      addCustomBootstrap('https://example.com/boot/remote.html');
-      const ampdoc = Services.ampdoc(window.document);
-      expect(getBootstrapBaseUrl(window, ampdoc)).to.equal(
-        'https://example.com/boot/remote.html?$internalRuntimeVersion$'
-      );
-    });
+      it('should return a stable URL in getBootstrapBaseUrl', () => {
+        mockMode({});
+        const ampdoc = Services.ampdoc(window.document);
+        expect(getBootstrapBaseUrl(window, ampdoc)).to.equal(
+          getBootstrapBaseUrl(window, ampdoc)
+        );
+      });
 
-    it('should return different values for different file names', () => {
-      window.__AMP_MODE = {};
-      let match = /^https:\/\/(d-\d+\.ampproject\.net)\/\$\internal\w+\$\/frame\.html$/.exec(
-        getDefaultBootstrapBaseUrl(window)
-      );
-      const domain = match && match[1];
-      expect(domain).to.be.ok;
-      match = /^https:\/\/(d-\d+\.ampproject\.net)\/\$\internal\w+\$\/frame2\.html$/.exec(
-        getDefaultBootstrapBaseUrl(window, 'frame2')
-      );
-      expect(match && match[1]).to.equal(domain);
-    });
+      it('should return a stable URL in getDefaultBootstrapBaseUrl', () => {
+        mockMode({});
+        expect(getDefaultBootstrapBaseUrl(window)).to.equal(
+          getDefaultBootstrapBaseUrl(window)
+        );
+      });
 
-    it('should pick the right bootstrap url (custom)', () => {
-      addCustomBootstrap('http://example.com/boot/remote.html');
-      const ampdoc = Services.ampdoc(window.document);
-      allowConsoleError(() => {
-        expect(() => {
-          getBootstrapBaseUrl(window, ampdoc);
-        }).to.throw(
-          /meta\[name="amp-3p-iframe-src"\] source must start with "https/
+      it('should pick the right bootstrap url (custom)', () => {
+        addCustomBootstrap('https://example.com/boot/remote.html');
+        const ampdoc = Services.ampdoc(window.document);
+        expect(getBootstrapBaseUrl(window, ampdoc)).to.equal(
+          'https://example.com/boot/remote.html?$internalRuntimeVersion$'
         );
       });
-    });
 
-    it('should pick the right bootstrap url (custom)', () => {
-      addCustomBootstrap('http://localhost:9876/boot/remote.html');
-      const ampdoc = Services.ampdoc(window.document);
-      allowConsoleError(() => {
-        expect(() => {
-          getBootstrapBaseUrl(window, ampdoc, true);
-        }).to.throw(/must not be on the same origin as the/);
+      it('should return different values for different file names', () => {
+        mockMode({});
+        let match =
+          /^https:\/\/(d-\d+\.ampproject\.net)\/\$\internal\w+\$\/frame\.html$/.exec(
+            getDefaultBootstrapBaseUrl(window)
+          );
+        const domain = match && match[1];
+        expect(domain).to.be.ok;
+        match =
+          /^https:\/\/(d-\d+\.ampproject\.net)\/\$\internal\w+\$\/frame2\.html$/.exec(
+            getDefaultBootstrapBaseUrl(window, 'frame2')
+          );
+        expect(match && match[1]).to.equal(domain);
       });
-    });
 
-    it('should pick default url if custom disabled', () => {
-      addCustomBootstrap('http://localhost:9876/boot/remote.html');
-      const ampdoc = Services.ampdoc(window.document);
-      expect(getBootstrapBaseUrl(window, ampdoc, true, true)).to.equal(
-        'http://ads.localhost:9876/dist.3p/current/frame.max.html'
-      );
-    });
+      it('should pick the right bootstrap url (custom)', () => {
+        addCustomBootstrap('http://example.com/boot/remote.html');
+        const ampdoc = Services.ampdoc(window.document);
+        allowConsoleError(() => {
+          expect(() => {
+            getBootstrapBaseUrl(window, ampdoc);
+          }).to.throw(
+            /meta\[name="amp-3p-iframe-src"\] source must start with "https/
+          );
+        });
+      });
 
-    it('should create frame with default url if custom disabled', () => {
-      setupElementFunctions(container);
-      const iframe = getIframe(window, container, '_ping_', {
-        clientId: 'cidValue',
+      it('should pick the right bootstrap url (custom)', () => {
+        addCustomBootstrap('http://localhost:9876/boot/remote.html');
+        const ampdoc = Services.ampdoc(window.document);
+        allowConsoleError(() => {
+          expect(() => {
+            getBootstrapBaseUrl(window.parent, ampdoc, true);
+          }).to.throw(/must not be on the same origin as the/);
+        });
       });
-      expect(iframe.src).to.equal(
-        'http://ads.localhost:9876/dist.3p/current/frame.max.html'
-      );
-    });
 
-    it('should prefetch bootstrap frame and JS', () => {
-      window.__AMP_MODE = {localDev: true};
-      const ampdoc = Services.ampdoc(window.document);
-      preloadBootstrap(window, ampdoc, preconnect);
-      // Wait for visible promise.
-      return ampdoc.whenFirstVisible().then(() => {
-        const fetches = document.querySelectorAll('link[rel=preload]');
-        expect(fetches).to.have.length(2);
-        expect(fetches[0]).to.have.property(
-          'href',
+      it('should create frame with default url if custom disabled', () => {
+        setupElementFunctions(container);
+        const iframe = getIframe(window, container, '_ping_', {
+          clientId: 'cidValue',
+        });
+        expect(iframe.src).to.equal(
           'http://ads.localhost:9876/dist.3p/current/frame.max.html'
         );
-        expect(fetches[1]).to.have.property(
-          'href',
-          'http://ads.localhost:9876/dist.3p/current/integration.js'
-        );
       });
-    });
 
-    it('should prefetch default bootstrap frame if custom disabled', () => {
-      window.__AMP_MODE = {localDev: true};
-      addCustomBootstrap('http://localhost:9876/boot/remote.html');
-      const ampdoc = Services.ampdoc(window.document);
-      preloadBootstrap(window, ampdoc, preconnect, true);
-      // Wait for visible promise.
-      return ampdoc.whenFirstVisible().then(() => {
-        expect(
-          document.querySelectorAll(
-            'link[rel=preload]' +
-              '[href="http://ads.localhost:9876/dist.3p/current/frame.max.html"]'
-          )
-        ).to.be.ok;
+      it('should prefetch bootstrap frame and JS', () => {
+        mockMode({});
+        toggleExperiment(window, '3p-vendor-split', true);
+        const ampdoc = Services.ampdoc(window.document);
+        preloadBootstrap(window, 'avendor', ampdoc, preconnect);
+        // Wait for visible promise.
+        return ampdoc.whenFirstVisible().then(() => {
+          const fetches = document.querySelectorAll('link[rel=preload]');
+          expect(fetches).to.have.length(2);
+          expect(fetches[0].href).to.match(
+            /^https:\/\/d-\d+\.ampproject\.net\/\$internalRuntimeVersion\$\/frame\.html$/
+          );
+          expect(fetches[1]).to.have.property(
+            'href',
+            'https://3p.ampproject.net/$internalRuntimeVersion$/vendor/avendor.js'
+          );
+        });
       });
-    });
 
-    it('should make sub domains (unique)', () => {
-      expect(getSubDomain(window)).to.match(/^d-\d+$/);
-      expect(getSubDomain(window)).to.not.equal('d-00');
-    });
+      it('should make sub domains (unique)', () => {
+        expect(getSubDomain(window)).to.match(/^d-\d+$/);
+        expect(getSubDomain(window)).to.not.equal('d-00');
+      });
 
-    it('should make sub domains (Math)', () => {
-      const fakeWin = {document, Math};
-      expect(getSubDomain(fakeWin)).to.match(/^d-\d+$/);
-    });
+      it('should make sub domains (Math)', () => {
+        const fakeWin = {document, Math};
+        expect(getSubDomain(fakeWin)).to.match(/^d-\d+$/);
+      });
 
-    it('should make sub domains (crypto)', () => {
-      const fakeWin = {
-        document,
-        crypto: {
-          getRandomValues(arg) {
-            arg[0] = 123;
-            arg[1] = 987;
+      it('should make sub domains (crypto)', () => {
+        const fakeWin = {
+          document,
+          crypto: {
+            getRandomValues(arg) {
+              arg[0] = 123;
+              arg[1] = 987;
+            },
           },
-        },
-      };
-      expect(getSubDomain(fakeWin)).to.equal('d-123987');
-    });
+        };
+        expect(getSubDomain(fakeWin)).to.equal('d-123987');
+      });
 
-    it('should make sub domains (fallback)', () => {
-      const fakeWin = {
-        document,
-        Math: {
-          random() {
-            return 0.567;
+      it('should make sub domains (fallback)', () => {
+        const fakeWin = {
+          document,
+          Math: {
+            random() {
+              return 0.567;
+            },
           },
-        },
-      };
-      expect(getSubDomain(fakeWin)).to.equal('d-5670');
-    });
+        };
+        expect(getSubDomain(fakeWin)).to.equal('d-5670');
+      });
 
-    it('uses a unique name based on domain', () => {
-      const viewerMock = window.sandbox.mock(
-        Services.viewerForDoc(window.document)
-      );
-      viewerMock
-        .expects('getUnconfirmedReferrerUrl')
-        .returns('http://acme.org/')
-        .twice();
-
-      window.__AMP_MODE = {};
-      const link = document.createElement('link');
-      link.setAttribute('rel', 'canonical');
-      link.setAttribute('href', 'https://foo.bar/baz');
-      document.head.appendChild(link);
-
-      const div = document.createElement('div');
-      div.setAttribute('type', '_ping_');
-      div.setAttribute('width', 100);
-      div.setAttribute('height', 200);
-      div.getIntersectionChangeEntry = function () {
-        return {
-          left: 0,
-          top: 0,
-          width: 0,
-          height: 0,
-          bottom: 0,
-          right: 0,
-          x: 0,
-          y: 0,
+      it('uses a unique name based on domain', () => {
+        const viewerMock = env.sandbox.mock(
+          Services.viewerForDoc(window.document)
+        );
+        viewerMock
+          .expects('getUnconfirmedReferrerUrl')
+          .returns('http://acme.org/')
+          .twice();
+
+        mockMode({});
+        const link = document.createElement('link');
+        link.setAttribute('rel', 'canonical');
+        link.setAttribute('href', 'https://foo.bar/baz');
+        document.head.appendChild(link);
+
+        const div = document.createElement('div');
+        div.setAttribute('type', '_ping_');
+        div.setAttribute('width', 100);
+        div.setAttribute('height', 200);
+        div.getIntersectionChangeEntry = function () {
+          return {
+            left: 0,
+            top: 0,
+            width: 0,
+            height: 0,
+            bottom: 0,
+            right: 0,
+            x: 0,
+            y: 0,
+          };
         };
-      };
-      div.getPageLayoutBox = function () {
-        return {
-          left: 0,
-          top: 0,
-          width: 100,
-          height: 200,
+        div.getAmpDoc = function () {
+          return Services.ampdoc(window.document);
         };
-      };
-      div.getAmpDoc = function () {
-        return Services.ampdoc(window.document);
-      };
-
-      container.appendChild(div);
-      const name = JSON.parse(getIframe(window, div).name);
-      resetBootstrapBaseUrlForTesting(window);
-      resetCountForTesting();
-      const newName = JSON.parse(getIframe(window, div).name);
-      expect(name.host).to.match(/d-\d+.ampproject.net/);
-      expect(name.type).to.match(/ping/);
-      expect(name.count).to.match(/1/);
-      expect(newName.host).to.match(/d-\d+.ampproject.net/);
-      expect(newName.type).to.match(/ping/);
-      expect(newName.count).to.match(/1/);
-      expect(newName).not.to.equal(name);
-    });
 
-    describe('serializeMessage', () => {
-      it('should work without payload', () => {
-        const message = serializeMessage('msgtype', 'msgsentinel');
-        expect(message.indexOf('amp-')).to.equal(0);
-        expect(deserializeMessage(message)).to.deep.equal({
-          type: 'msgtype',
-          sentinel: 'msgsentinel',
-        });
+        container.appendChild(div);
+        const name = JSON.parse(getIframe(window, div).name);
+        resetBootstrapBaseUrlForTesting(window);
+        resetCountForTesting();
+        const newName = JSON.parse(getIframe(window, div).name);
+        expect(name.host).to.match(/d-\d+.ampproject.net/);
+        expect(name.type).to.match(/ping/);
+        expect(name.count).to.match(/1/);
+        expect(newName.host).to.match(/d-\d+.ampproject.net/);
+        expect(newName.type).to.match(/ping/);
+        expect(newName.count).to.match(/1/);
+        expect(newName).not.to.equal(name);
       });
 
-      it('should work with payload', () => {
-        const message = serializeMessage('msgtype', 'msgsentinel', {
-          type: 'type_override', // override should be ignored
-          sentinel: 'sentinel_override', // override should be ignored
-          x: 1,
-          y: 'abc',
+      describe('serializeMessage', () => {
+        it('should work without payload', () => {
+          const message = serializeMessage('msgtype', 'msgsentinel');
+          expect(message.indexOf('amp-')).to.equal(0);
+          expect(deserializeMessage(message)).to.deep.equal({
+            type: 'msgtype',
+            sentinel: 'msgsentinel',
+          });
         });
-        expect(deserializeMessage(message)).to.deep.equal({
-          type: 'msgtype',
-          sentinel: 'msgsentinel',
-          x: 1,
-          y: 'abc',
-        });
-      });
 
-      it('should work with rtvVersion', () => {
-        const message = serializeMessage(
-          'msgtype',
-          'msgsentinel',
-          {
+        it('should work with payload', () => {
+          const message = serializeMessage('msgtype', 'msgsentinel', {
             type: 'type_override', // override should be ignored
             sentinel: 'sentinel_override', // override should be ignored
             x: 1,
             y: 'abc',
-          },
-          'rtv123'
-        );
-        expect(deserializeMessage(message)).to.deep.equal({
-          type: 'msgtype',
-          sentinel: 'msgsentinel',
-          x: 1,
-          y: 'abc',
+          });
+          expect(deserializeMessage(message)).to.deep.equal({
+            type: 'msgtype',
+            sentinel: 'msgsentinel',
+            x: 1,
+            y: 'abc',
+          });
         });
-      });
-    });
 
-    describe('deserializeMessage', () => {
-      it('should deserialize valid message', () => {
-        const message = deserializeMessage(
-          'amp-{"type":"msgtype","sentinel":"msgsentinel","x":1,"y":"abc"}'
-        );
-        expect(message).to.deep.equal({
-          type: 'msgtype',
-          sentinel: 'msgsentinel',
-          x: 1,
-          y: 'abc',
+        it('should work with rtvVersion', () => {
+          const message = serializeMessage(
+            'msgtype',
+            'msgsentinel',
+            {
+              type: 'type_override', // override should be ignored
+              sentinel: 'sentinel_override', // override should be ignored
+              x: 1,
+              y: 'abc',
+            },
+            'rtv123'
+          );
+          expect(deserializeMessage(message)).to.deep.equal({
+            type: 'msgtype',
+            sentinel: 'msgsentinel',
+            x: 1,
+            y: 'abc',
+          });
         });
       });
 
-      it('should deserialize valid message with rtv version', () => {
-        const message = deserializeMessage(
-          'amp-rtv123{"type":"msgtype","sentinel":"msgsentinel",' +
-            '"x":1,"y":"abc"}'
-        );
-        expect(message).to.deep.equal({
-          type: 'msgtype',
-          sentinel: 'msgsentinel',
-          x: 1,
-          y: 'abc',
+      describe('deserializeMessage', () => {
+        it('should deserialize valid message', () => {
+          const message = deserializeMessage(
+            'amp-{"type":"msgtype","sentinel":"msgsentinel","x":1,"y":"abc"}'
+          );
+          expect(message).to.deep.equal({
+            type: 'msgtype',
+            sentinel: 'msgsentinel',
+            x: 1,
+            y: 'abc',
+          });
         });
-      });
 
-      it('should return null if the input not a string', () => {
-        expect(deserializeMessage({x: 1, y: 'abc'})).to.be.null;
-      });
+        it('should deserialize valid message with rtv version', () => {
+          const message = deserializeMessage(
+            'amp-rtv123{"type":"msgtype","sentinel":"msgsentinel",' +
+              '"x":1,"y":"abc"}'
+          );
+          expect(message).to.deep.equal({
+            type: 'msgtype',
+            sentinel: 'msgsentinel',
+            x: 1,
+            y: 'abc',
+          });
+        });
 
-      it('should return null if the input does not start with amp-', () => {
-        expect(
-          deserializeMessage(
-            'noamp-{"type":"msgtype","sentinel":"msgsentinel"}'
-          )
-        ).to.be.null;
-      });
+        it('should return null if the input not a string', () => {
+          expect(deserializeMessage({x: 1, y: 'abc'})).to.be.null;
+        });
 
-      it('should return null if the input is not a json', () => {
-        const errorStub = window.sandbox.stub(dev(), 'error');
-        expect(deserializeMessage('amp-other')).to.be.null;
-        expect(errorStub).to.not.be.called;
-      });
+        it('should return null if the input does not start with amp-', () => {
+          expect(
+            deserializeMessage(
+              'noamp-{"type":"msgtype","sentinel":"msgsentinel"}'
+            )
+          ).to.be.null;
+        });
 
-      it('should return null if failed to parse the input', () => {
-        const errorStub = window.sandbox.stub(dev(), 'error');
-        expect(deserializeMessage('amp-{"type","sentinel":"msgsentinel"}')).to
-          .be.null;
-        expect(errorStub).to.be.calledOnce;
+        it('should return null if the input is not a json', () => {
+          const errorStub = env.sandbox.stub(dev(), 'error');
+          expect(deserializeMessage('amp-other')).to.be.null;
+          expect(errorStub).to.not.be.called;
+        });
 
-        expect(
-          deserializeMessage('amp-{"type":"msgtype"|"sentinel":"msgsentinel"}')
-        ).to.be.null;
-        expect(errorStub).to.be.calledTwice;
+        it('should return null if failed to parse the input', () => {
+          const errorStub = env.sandbox.stub(dev(), 'error');
+          expect(deserializeMessage('amp-{"type","sentinel":"msgsentinel"}')).to
+            .be.null;
+          expect(errorStub).to.be.calledOnce;
+
+          expect(
+            deserializeMessage(
+              'amp-{"type":"msgtype"|"sentinel":"msgsentinel"}'
+            )
+          ).to.be.null;
+          expect(errorStub).to.be.calledTwice;
+        });
       });
     });
-  });
+});
diff --git a/test/unit/3p/test-3p-messaging.js b/test/unit/3p/test-3p-messaging.js
index a9b24a0334da8..9f269c48a93d5 100644
--- a/test/unit/3p/test-3p-messaging.js
+++ b/test/unit/3p/test-3p-messaging.js
@@ -19,7 +19,7 @@ import {createIframePromise} from '../../../testing/iframe';
 import {listenParent} from '../../../3p/messaging';
 import {postMessage} from '../../../src/iframe-helper';
 
-describe('3p messaging', () => {
+describes.sandboxed('3p messaging', {}, () => {
   let testWin;
   let iframe;
   const timer = Services.timerFor(window);
diff --git a/test/unit/3p/test-recaptcha.js b/test/unit/3p/test-recaptcha.js
index 4e6c4dd95672e..dfa3f7c5afe8c 100644
--- a/test/unit/3p/test-recaptcha.js
+++ b/test/unit/3p/test-recaptcha.js
@@ -21,7 +21,7 @@ import {
 import {parseUrlDeprecated} from '../../../src/url';
 import {urls} from '../../../src/config';
 
-describe('3p recaptcha.js', () => {
+describes.sandboxed('3p recaptcha.js', {}, () => {
   it('should require a window.name', () => {
     window.name = undefined;
     expect(initRecaptcha).to.throw('window');
diff --git a/test/unit/ads/test-adplugg.js b/test/unit/ads/test-adplugg.js
index 9c486b5c25e08..e153ce3b7e13d 100644
--- a/test/unit/ads/test-adplugg.js
+++ b/test/unit/ads/test-adplugg.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {adplugg} from '../../../ads/adplugg';
+import {adplugg} from '../../../ads/vendors/adplugg';
 import {createIframePromise} from '../../../testing/iframe';
 
 describes.fakeWin('amp-ad-adplugg-impl', {}, (env) => {
@@ -36,8 +36,6 @@ describes.fakeWin('amp-ad-adplugg-impl', {}, (env) => {
           },
         },
         requestResize() {},
-        onResizeSuccess() {},
-        onResizeDenied() {},
         renderStart() {},
         noContentAvailable() {},
         referrer: null,
diff --git a/test/unit/ads/test-aduptech.js b/test/unit/ads/test-aduptech.js
new file mode 100644
index 0000000000000..e12219c87c8e3
--- /dev/null
+++ b/test/unit/ads/test-aduptech.js
@@ -0,0 +1,191 @@
+/**
+ * Copyright 2020 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.
+ */
+import * as _3p from '../../../3p/3p';
+import {
+  ADUPTECH_API_URL,
+  ADUPTECH_ELEMENT_ID,
+  aduptech,
+} from '../../../ads/vendors/aduptech';
+import {createIframePromise} from '../../../testing/iframe';
+
+describes.fakeWin('amp-ad-aduptech-impl', {}, (env) => {
+  let win;
+  let loadScriptSpy;
+
+  beforeEach(() => {
+    return createIframePromise(true).then((iframe) => {
+      win = iframe.win;
+      win.context = {
+        initialIntersection: {
+          boundingClientRect: {
+            height: 0,
+          },
+        },
+        requestResize() {},
+        noContentAvailable() {},
+        referrer: null,
+      };
+      const div = win.document.createElement('div');
+      div.id = 'c';
+      win.document.body.appendChild(div);
+
+      // create and spy on fake aduptech api
+      win.uAd = {
+        embed: env.sandbox.spy(),
+      };
+
+      // spy on stub for loadScript
+      loadScriptSpy = env.sandbox
+        .stub(_3p, 'loadScript')
+        .callsFake((_, __, callback) => {
+          callback();
+        });
+
+      // just to be sure
+      expect(win.document.getElementById(ADUPTECH_ELEMENT_ID)).to.be.null;
+      expect(loadScriptSpy).not.to.have.been.called;
+      expect(win.uAd.embed).not.to.have.been.called;
+    });
+  });
+
+  it('should validate missing placementkey', () => {
+    expect(() => aduptech(win, {})).to.throw(/Missing attribute/);
+  });
+
+  it('should add id to html container', () => {
+    aduptech(win, {placementkey: 'crazyPlacementKey'});
+
+    expect(win.document.getElementById(ADUPTECH_ELEMENT_ID)).not.to.be.null;
+  });
+
+  it('should load api', () => {
+    aduptech(win, {placementkey: 'crazyPlacementKey'});
+
+    expect(loadScriptSpy).to.have.been.calledOnceWith(
+      win,
+      ADUPTECH_API_URL,
+      env.sandbox.match.func
+    );
+  });
+
+  it('should call api with minimum attributes', () => {
+    aduptech(win, {placementkey: 'crazyPlacementKey'});
+
+    expect(win.uAd.embed).to.have.been.calledOnceWith(ADUPTECH_ELEMENT_ID, {
+      amp: true,
+      onAds: env.sandbox.match.func,
+      onNoAds: env.sandbox.match.func,
+      placementkey: 'crazyPlacementKey',
+      responsive: true,
+    });
+  });
+
+  it('should call api with all attributes', () => {
+    aduptech(win, {
+      placementkey: 'crazyPlacementKey',
+      mincpc: '0.33',
+      query: 'foo;bar',
+      pageurl: 'http://www.adup-tech.com',
+      gdpr: '0',
+      // eslint-disable-next-line google-camelcase/google-camelcase
+      gdpr_consent: 'crazyConsentString',
+      adtest: '1',
+    });
+
+    expect(win.uAd.embed).to.have.been.calledOnceWith(ADUPTECH_ELEMENT_ID, {
+      adtest: '1',
+      amp: true,
+      gdpr: '0',
+      // eslint-disable-next-line google-camelcase/google-camelcase
+      gdpr_consent: 'crazyConsentString',
+      mincpc: '0.33',
+      onAds: env.sandbox.match.func,
+      onNoAds: env.sandbox.match.func,
+      pageurl: 'http://www.adup-tech.com',
+      placementkey: 'crazyPlacementKey',
+      query: 'foo;bar',
+      responsive: true,
+    });
+  });
+
+  it('should call api with "context.sourceUrl" as fallback for "pageurl"', () => {
+    win.context.sourceUrl = 'http://www.source.url';
+
+    aduptech(win, {placementkey: 'crazyPlacementKey'});
+
+    expect(win.uAd.embed).to.have.been.calledOnce;
+    expect(win.uAd.embed.getCall(0).args[1].pageurl).to.equal(
+      win.context.sourceUrl
+    );
+  });
+
+  it('should call api with "context.location.href" as fallback for "pageurl"', () => {
+    win.context.sourceUrl = null;
+    win.context.location = {href: 'http://www.win.location.href'};
+
+    aduptech(win, {placementkey: 'crazyPlacementKey'});
+
+    expect(win.uAd.embed).to.have.been.calledOnce;
+    expect(win.uAd.embed.getCall(0).args[1].pageurl).to.equal(
+      win.context.location.href
+    );
+  });
+
+  it('should call api with prefered "context.consentSharedData.consentString" as "gdpr_consent"', () => {
+    win.context.consentSharedData = {
+      consentString: 'realConsentString',
+    };
+
+    aduptech(win, {
+      placementkey: 'crazyPlacementKey',
+      gdpr: true,
+      // eslint-disable-next-line google-camelcase/google-camelcase
+      gdpr_consent: 'customConsentString',
+    });
+
+    expect(win.uAd.embed).to.have.been.calledOnce;
+    expect(win.uAd.embed.getCall(0).args[1].gdpr).to.be.true;
+    expect(win.uAd.embed.getCall(0).args[1].gdpr_consent).to.equal(
+      'realConsentString'
+    );
+  });
+
+  it('should call "context.renderStart()" on "onAds" callback', () => {
+    win.context.renderStart = env.sandbox.spy();
+    win.context.noContentAvailable = env.sandbox.spy();
+
+    aduptech(win, {placementkey: 'crazyPlacementKey'});
+
+    expect(win.uAd.embed).to.have.been.calledOnce;
+    win.uAd.embed.getCall(0).args[1].onAds();
+
+    expect(win.context.renderStart).to.have.been.calledOnce;
+    expect(win.context.noContentAvailable).not.to.have.been.called;
+  });
+
+  it('should call "context.noContentAvailable()" on "onNoAds" callback', () => {
+    win.context.renderStart = env.sandbox.spy();
+    win.context.noContentAvailable = env.sandbox.spy();
+
+    aduptech(win, {placementkey: 'crazyPlacementKey'});
+
+    expect(win.uAd.embed).to.have.been.calledOnce;
+    win.uAd.embed.getCall(0).args[1].onNoAds();
+
+    expect(win.context.renderStart).not.to.have.been.called;
+    expect(win.context.noContentAvailable).to.have.been.calledOnce;
+  });
+});
diff --git a/test/unit/ads/test-csa.js b/test/unit/ads/test-csa.js
index 9e942fc8f5704..0ab4f5b7b3c5f 100644
--- a/test/unit/ads/test-csa.js
+++ b/test/unit/ads/test-csa.js
@@ -20,10 +20,8 @@ import {
   callbackWithBackfill,
   callbackWithNoBackfill,
   csa,
-  resizeDeniedHandler,
   resizeIframe,
-  resizeSuccessHandler,
-} from '../../../ads/google/csa';
+} from '../../../ads/vendors/csa';
 import {createIframePromise} from '../../../testing/iframe';
 
 function getAds(type) {
@@ -61,8 +59,6 @@ describes.fakeWin('amp-ad-csa-impl', {}, (env) => {
           },
         },
         requestResize() {},
-        onResizeSuccess() {},
-        onResizeDenied() {},
         noContentAvailable() {},
         referrer: null,
       };
@@ -128,9 +124,9 @@ describes.fakeWin('amp-ad-csa-impl', {}, (env) => {
             height: 0,
           },
         },
-        requestResize() {},
-        onResizeSuccess() {},
-        onResizeDenied() {},
+        requestResize() {
+          return Promise.resolve();
+        },
         noContentAvailable() {},
         referrer: null,
       };
@@ -167,25 +163,26 @@ describes.fakeWin('amp-ad-csa-impl', {}, (env) => {
       setContainerHeight('300px');
       setContextHeight(100);
 
-      const requestResizeSpy = env.sandbox.stub(win.context, 'requestResize');
+      const requestResizeSpy = env.sandbox
+        .stub(win.context, 'requestResize')
+        .returns(Promise.reject());
 
       // Try to resize when ads are loaded
       resizeIframe(win, 'csacontainer');
 
-      const overflow = win.document.getElementById('overflow');
-      const container = win.document.getElementById('csacontainer');
-      const requestedHeight = requestResizeSpy.args[0][1];
-
-      // Resize requests above the fold will be denied
-      resizeDeniedHandler(win, container, requestedHeight);
-
-      // Overflow should exist and be displayed
-      expect(overflow).to.not.be.null;
-      expect(overflow).not.to.have.display('none');
-      // We should have tried to resize to 300 px
-      expect(requestedHeight).to.equal(300);
-      // Container should be set to AMP height (100) - overflow height (40)
-      expect(container.style.height).to.equal('60px');
+      return Promise.resolve().then(() => {
+        const overflow = win.document.getElementById('overflow');
+        const container = win.document.getElementById('csacontainer');
+        const requestedHeight = requestResizeSpy.args[0][1];
+
+        // Overflow should exist and be displayed
+        expect(overflow).to.not.be.null;
+        expect(overflow).not.to.have.display('none');
+        // We should have tried to resize to 300 px
+        expect(requestedHeight).to.equal(300);
+        // Container should be set to AMP height (100) - overflow height (40)
+        expect(container.style.height).to.equal('60px');
+      });
     });
 
     it('when ads are ATF and CSA container < AMP container', () => {
@@ -194,23 +191,24 @@ describes.fakeWin('amp-ad-csa-impl', {}, (env) => {
       setContextHeight(400);
 
       // Set up
-      const requestResizeSpy = env.sandbox.stub(win.context, 'requestResize');
+      const requestResizeSpy = env.sandbox
+        .stub(win.context, 'requestResize')
+        .returns(Promise.reject());
       // Try to resize when ads are loaded
       resizeIframe(win, 'csacontainer');
 
-      const overflow = win.document.getElementById('overflow');
-      const container = win.document.getElementById('csacontainer');
-      const requestedHeight = requestResizeSpy.args[0][1];
-
-      // Resize requests above the fold will be denied
-      resizeDeniedHandler(win, container, requestedHeight);
-
-      // Overflow should NOT be present
-      expect(overflow).to.be.null;
-      // We should have tried to resize to 300 px
-      expect(requestedHeight).to.equal(300);
-      // Container should not have been changed
-      expect(container.style.height).to.equal('300px');
+      return Promise.resolve().then(() => {
+        const overflow = win.document.getElementById('overflow');
+        const container = win.document.getElementById('csacontainer');
+        const requestedHeight = requestResizeSpy.args[0][1];
+
+        // Overflow should NOT be present
+        expect(overflow).to.be.null;
+        // We should have tried to resize to 300 px
+        expect(requestedHeight).to.equal(300);
+        // Container should not have been changed
+        expect(container.style.height).to.equal('300px');
+      });
     });
 
     it('when ads are BTF and CSA container > AMP container', () => {
@@ -219,23 +217,26 @@ describes.fakeWin('amp-ad-csa-impl', {}, (env) => {
       setContextHeight(100);
 
       // Set up
-      const requestResizeSpy = env.sandbox.stub(win.context, 'requestResize');
+      const requestResizeSpy = env.sandbox
+        .stub(win.context, 'requestResize')
+        .returns(Promise.resolve());
       // Try to resize when ads are loaded
       resizeIframe(win, 'csacontainer');
-      // Resize requests below the fold succeeed
-      const requestedHeight = requestResizeSpy.args[0][1];
 
-      const overflow = win.document.getElementById('overflow');
-      const container = win.document.getElementById('csacontainer');
+      return Promise.resolve().then(() => {
+        // Resize requests below the fold succeeed
+        const requestedHeight = requestResizeSpy.args[0][1];
 
-      resizeSuccessHandler(win, container, requestedHeight);
+        const overflow = win.document.getElementById('overflow');
+        const container = win.document.getElementById('csacontainer');
 
-      // Overflow should be present, but hidden
-      expect(overflow).to.have.display('none');
-      // We should have tried to resize to 300 px
-      expect(requestedHeight).to.equal(300);
-      // Container should be set to full CSA height
-      expect(container.style.height).to.equal('300px');
+        // Overflow should be present, but hidden
+        expect(overflow).to.have.display('none');
+        // We should have tried to resize to 300 px
+        expect(requestedHeight).to.equal(300);
+        // Container should be set to full CSA height
+        expect(container.style.height).to.equal('300px');
+      });
     });
 
     it('when ads are BTF and CSA container < AMP container', () => {
@@ -244,22 +245,26 @@ describes.fakeWin('amp-ad-csa-impl', {}, (env) => {
       setContextHeight(400);
 
       // Set up
-      const requestResizeSpy = env.sandbox.stub(win.context, 'requestResize');
+      const requestResizeSpy = env.sandbox
+        .stub(win.context, 'requestResize')
+        .returns(Promise.resolve());
       // Try to resize when ads are loaded
       resizeIframe(win, 'csacontainer');
-      // Resize requests below the fold succeed
-      const requestedHeight = requestResizeSpy.args[0][1];
-      resizeSuccessHandler(win, container, requestedHeight);
 
-      const overflow = win.document.getElementById('overflow');
-      const container = win.document.getElementById('csacontainer');
+      return Promise.resolve().then(() => {
+        // Resize requests below the fold succeed
+        const requestedHeight = requestResizeSpy.args[0][1];
 
-      // Overflow should not exist
-      expect(overflow).to.be.null;
-      // We should have tried to resize to 300 px
-      expect(requestedHeight).to.equal(300);
-      // Container should be set to full CSA height
-      expect(container.style.height).to.equal('300px');
+        const overflow = win.document.getElementById('overflow');
+        const container = win.document.getElementById('csacontainer');
+
+        // Overflow should not exist
+        expect(overflow).to.be.null;
+        // We should have tried to resize to 300 px
+        expect(requestedHeight).to.equal(300);
+        // Container should be set to full CSA height
+        expect(container.style.height).to.equal('300px');
+      });
     });
 
     it('when ads do not load', () => {
diff --git a/test/unit/ads/test-pubmine.js b/test/unit/ads/test-pubmine.js
index bb4b107ee0f14..d0569bbc5edfb 100644
--- a/test/unit/ads/test-pubmine.js
+++ b/test/unit/ads/test-pubmine.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {pubmine} from '../../../ads/pubmine';
+import {pubmine} from '../../../ads/vendors/pubmine';
 
 describes.fakeWin('pubmine', {}, (env) => {
   let win;
diff --git a/test/unit/ads/test-ssp.js b/test/unit/ads/test-ssp.js
index b520b68966594..2ed132359313a 100644
--- a/test/unit/ads/test-ssp.js
+++ b/test/unit/ads/test-ssp.js
@@ -16,9 +16,16 @@
 
 import * as _3p from '../../../3p/3p';
 import {createIframePromise} from '../../../testing/iframe';
-import {ssp} from '../../../ads/ssp';
-
-describes.fakeWin('amp-ad-ssp', {}, () => {
+import {
+  handlePosition,
+  handlePositionResponsive,
+  keyBy,
+  runWhenFetchingSettled,
+  sizeAgainstWindow,
+  ssp,
+} from '../../../ads/vendors/ssp';
+
+describes.fakeWin('amp-ad-ssp', {}, (env) => {
   let sandbox;
   let win;
   let commonData;
@@ -28,7 +35,7 @@ describes.fakeWin('amp-ad-ssp', {}, () => {
    * Set up our test environment.
    */
   beforeEach(() => {
-    sandbox = window.sandbox;
+    sandbox = env.sandbox;
 
     commonData = {
       width: '200',
@@ -244,8 +251,101 @@ describes.fakeWin('amp-ad-ssp', {}, () => {
     ssp(win, commonData);
 
     expect(sssp.getAds).to.have.been.calledOnce;
-    expect(sssp.getAds).to.have.been.calledWith([
-      {id: 'id-1', width: '200', height: '200', zoneId: '1234'},
-    ]);
+    expect(sssp.getAds).to.have.been.calledWith(
+      [{id: 'id-1', width: '200', height: '200', zoneId: '1234'}],
+      {AMPcallback: sandbox.match.func}
+    );
+  });
+
+  it('sizeAgainstWindow() should generate sizing object', () => {
+    const sizing = sizeAgainstWindow(100, {
+      width: 200,
+      height: 100,
+    });
+
+    expect(sizing).to.eql({width: 100, height: 50});
+  });
+
+  it('sizeAgainstWindow() should not generate sizing object', () => {
+    const sizing = sizeAgainstWindow(100, {
+      width: 100,
+      height: 100,
+    });
+
+    expect(sizing).to.be.undefined;
+  });
+
+  it('handlePosition() should center and size element', () => {
+    const div = win.document.createElement('div');
+    win.document.body.appendChild(div);
+    handlePosition(div, true, {width: '100%', height: '100%'});
+
+    const divStyles = {
+      width: div.style.width,
+      height: div.style.height,
+      position: div.style.position,
+      top: div.style.top,
+      left: div.style.left,
+      transform: div.style.transform,
+      maxWidth: div.style.maxWidth,
+    };
+    expect(divStyles).to.eql({
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      maxWidth: '100%',
+    });
+  });
+
+  it('handlePositionResponsive() should center element', () => {
+    const div = win.document.createElement('div');
+    win.document.body.appendChild(div);
+    const e = {data: JSON.stringify({height: 200})};
+    handlePositionResponsive(e, div);
+
+    const divStyles = {
+      height: div.style.height,
+      position: div.style.position,
+      top: div.style.top,
+      left: div.style.left,
+      transform: div.style.transform,
+      maxWidth: div.style.maxWidth,
+    };
+    expect(divStyles).to.eql({
+      height: '200px',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      maxWidth: '100%',
+    });
+  });
+
+  it('keyBy() should return object from array with specified keys', () => {
+    const data = [{id: 'id-1', key1: 'value1', key2: 'value2'}];
+    const dataById = keyBy(data, (item) => item.id);
+
+    expect(dataById['id-1']).to.eql(data[0]);
+  });
+
+  it('runWhenFetchingSettled() should run callbeck only if no registered XHR running', () => {
+    win.fetchingSSPs = {xhr1: true, xhr2: true};
+    const cbSpy = sandbox.spy();
+    const clock = sandbox.useFakeTimers();
+    runWhenFetchingSettled(win.fetchingSSPs, cbSpy);
+
+    clock.tick(100);
+
+    expect(cbSpy).to.not.have.been.called;
+
+    delete win.fetchingSSPs.xhr1;
+    delete win.fetchingSSPs.xhr2;
+
+    clock.tick(200);
+
+    expect(cbSpy).to.have.been.calledOnce;
   });
 });
diff --git a/test/unit/ads/test-unruly.js b/test/unit/ads/test-unruly.js
index e31343bc257ca..0d8b4f18f031a 100644
--- a/test/unit/ads/test-unruly.js
+++ b/test/unit/ads/test-unruly.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import {unruly} from '../../../ads/unruly';
+import {unruly} from '../../../ads/vendors/unruly';
 
-describe('unruly', () => {
+describes.sandboxed('unruly', {}, () => {
   it('should set unruly publisher config on global', () => {
     const mockGlobal = {};
     const mockData = {
diff --git a/test/unit/context/test-contextprops.js b/test/unit/context/test-contextprops.js
new file mode 100644
index 0000000000000..21fe452b4aa18
--- /dev/null
+++ b/test/unit/context/test-contextprops.js
@@ -0,0 +1,155 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  CanPlay,
+  CanRender,
+  LoadingProp,
+} from '../../../src/context/contextprops';
+
+describes.sandboxed('contextprops - common props', {}, () => {
+  describe('CanRender', () => {
+    it('check config', () => {
+      expect(CanRender.defaultValue).to.be.true;
+      expect(CanRender.deps).to.have.lengthOf(0);
+    });
+
+    it('should calc recursive', () => {
+      expect(CanRender.recursive([true])).to.be.true;
+      expect(CanRender.recursive([false])).to.be.false;
+
+      expect(CanRender.recursive([true, true])).to.be.true;
+      expect(CanRender.recursive([true, false])).to.be.false;
+      expect(CanRender.recursive([false, false])).to.be.false;
+    });
+
+    it('should compute from the parent value', () => {
+      expect(CanRender.compute(null, [true], /* parentValue */ true)).to.be
+        .true;
+      expect(CanRender.compute(null, [true], /* parentValue */ false)).to.be
+        .false;
+    });
+
+    it('should compute from the onput', () => {
+      const parentValue = true;
+      expect(CanRender.compute(null, [], parentValue)).to.be.true;
+      expect(CanRender.compute(null, [true], parentValue)).to.be.true;
+      expect(CanRender.compute(null, [true, true], parentValue)).to.be.true;
+      expect(CanRender.compute(null, [false], parentValue)).to.be.false;
+      expect(CanRender.compute(null, [true, false], parentValue)).to.be.false;
+    });
+  });
+
+  describe('CanPlay', () => {
+    it('check config', () => {
+      expect(CanPlay.defaultValue).to.be.true;
+      expect(CanPlay.deps).to.deep.equal([CanRender]);
+    });
+
+    it('should calc recursive', () => {
+      expect(CanPlay.recursive([true])).to.be.true;
+      expect(CanPlay.recursive([false])).to.be.false;
+
+      expect(CanPlay.recursive([true, true])).to.be.true;
+      expect(CanPlay.recursive([true, false])).to.be.false;
+      expect(CanPlay.recursive([false, false])).to.be.false;
+    });
+
+    it('should compute from the parent value', () => {
+      const canRender = true;
+      expect(CanPlay.compute(null, [true], /* parentValue */ true, canRender))
+        .to.be.true;
+      expect(CanPlay.compute(null, [true], /* parentValue */ false, canRender))
+        .to.be.false;
+    });
+
+    it('should compute from the canRender dep', () => {
+      const parentValue = true;
+      expect(CanPlay.compute(null, [true], parentValue, /* canRender */ true))
+        .to.be.true;
+      expect(CanPlay.compute(null, [true], parentValue, /* canRender */ false))
+        .to.be.false;
+    });
+
+    it('should compute from the onput', () => {
+      const parentValue = true;
+      const canRender = true;
+      expect(CanPlay.compute(null, [], parentValue, canRender)).to.be.true;
+      expect(CanPlay.compute(null, [true], parentValue, canRender)).to.be.true;
+      expect(CanPlay.compute(null, [true, true], parentValue, canRender)).to.be
+        .true;
+      expect(CanPlay.compute(null, [false], parentValue, canRender)).to.be
+        .false;
+      expect(CanPlay.compute(null, [true, false], parentValue, canRender)).to.be
+        .false;
+    });
+  });
+
+  describe('LoadingProp', () => {
+    it('check config', () => {
+      expect(LoadingProp.defaultValue).to.equal('auto');
+      expect(LoadingProp.deps).to.deep.equal([CanRender]);
+    });
+
+    it('should be always recursive', () => {
+      expect(LoadingProp.recursive).to.be.true;
+    });
+
+    it('should compute from the parent value', () => {
+      const canRender = true;
+      const parentValue = 'lazy';
+      expect(
+        LoadingProp.compute(null, ['auto'], parentValue, canRender)
+      ).to.equal('lazy');
+      expect(
+        LoadingProp.compute(null, ['eager'], parentValue, canRender)
+      ).to.equal('eager');
+    });
+
+    it('should compute from the canRender dep', () => {
+      const parentValue = 'auto';
+      expect(
+        LoadingProp.compute(null, ['auto'], parentValue, /* canRender */ true)
+      ).to.equal('auto');
+      expect(
+        LoadingProp.compute(null, ['auto'], parentValue, /* canRender */ false)
+      ).to.equal('lazy');
+    });
+
+    it('should compute from the onput', () => {
+      const parentValue = 'auto';
+      const canRender = true;
+      expect(LoadingProp.compute(null, [], parentValue, canRender)).to.equal(
+        'auto'
+      );
+      expect(
+        LoadingProp.compute(null, ['auto'], parentValue, canRender)
+      ).to.equal('auto');
+      expect(
+        LoadingProp.compute(null, ['lazy'], parentValue, canRender)
+      ).to.equal('lazy');
+      expect(
+        LoadingProp.compute(null, ['auto', 'lazy'], parentValue, canRender)
+      ).to.equal('lazy');
+      expect(
+        LoadingProp.compute(null, ['eager', 'lazy'], parentValue, canRender)
+      ).to.equal('eager');
+      expect(
+        LoadingProp.compute(null, ['eager', 'unload'], parentValue, canRender)
+      ).to.equal('unload');
+    });
+  });
+});
diff --git a/test/unit/context/test-node-discover.js b/test/unit/context/test-node-discover.js
new file mode 100644
index 0000000000000..6d48f6efd948e
--- /dev/null
+++ b/test/unit/context/test-node-discover.js
@@ -0,0 +1,1148 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {ContextNode} from '../../../src/context/node';
+import {deepScan, findParent} from '../../../src/context/scan';
+import {domOrderComparator} from '../../../src/dom';
+
+describes.realWin('ContextNode', {}, (env) => {
+  let win, doc;
+  let tree;
+  let clock;
+  let discoverWrapper;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    clock = env.sandbox.useFakeTimers();
+
+    tree = (() => {
+      function createSubtree(id, children, depth) {
+        const el = doc.createElement('div');
+        el.id = id;
+        el.textContent = id;
+        if (depth > 1) {
+          for (let i = 0; i < children; i++) {
+            const child = createSubtree(`${id}-${i + 1}`, children, depth - 1);
+            el.appendChild(child);
+          }
+        }
+        return el;
+      }
+      return createSubtree('T', 4, 4);
+    })();
+
+    discoverWrapper = wrapper(ContextNode.prototype, 'discover_');
+
+    // Customize output of the ContextNode for easy debug.
+    ContextNode.prototype.inspect = function () {
+      const contextNode = this;
+      return `ContextNode(${contextNode.node.id || contextNode.node.nodeName})`;
+    };
+  });
+
+  afterEach(() => {
+    delete ContextNode.prototype.inspect;
+  });
+
+  function el(id) {
+    if (id == 'T') {
+      return tree;
+    }
+    const found = tree.querySelector(`#${id}`);
+    if (!found) {
+      throw new Error(`element not found ${id}`);
+    }
+    return found;
+  }
+
+  /**
+   * @param {Object} obj
+   * @param {string} name
+   */
+  function wrapper(obj, name) {
+    const original = obj[name];
+    const stub = env.sandbox.stub(ContextNode.prototype, name);
+    const wrapperName = `__wrapper_${name}`;
+    stub.callsFake(function (...args) {
+      const obj = this;
+      const resolvers = obj[wrapperName] ?? (obj[wrapperName] = []);
+      const result = original.apply(this, args);
+      const current = resolvers.slice(0);
+      resolvers.length = 0;
+      current.forEach((resolver) => resolver(result));
+      return result;
+    });
+    return {
+      spy: stub,
+      waitFor: (obj) => {
+        const resolvers = obj[wrapperName] ?? (obj[wrapperName] = []);
+        return new Promise((resolve) => {
+          resolvers.push(resolve);
+        });
+      },
+    };
+  }
+
+  function waitForDiscover(...nodesOrContextNodes) {
+    const contextNodes = nodesOrContextNodes.map((arg) =>
+      arg.nodeType ? ContextNode.get(arg) : arg
+    );
+    const promises = contextNodes.map((contextNode) =>
+      discoverWrapper.waitFor(contextNode)
+    );
+    clock.tick(1);
+    return Promise.all(promises);
+  }
+
+  function rediscover(...nodesOrContextNodes) {
+    const contextNodes = nodesOrContextNodes.map((arg) =>
+      arg.nodeType ? ContextNode.get(arg) : arg
+    );
+    contextNodes.forEach((cn) => cn.discover());
+    return waitForDiscover.apply(null, contextNodes);
+  }
+
+  function expectContext(nodeOrContext, spec) {
+    const contextNode = nodeOrContext.nodeType
+      ? ContextNode.get(nodeOrContext)
+      : nodeOrContext;
+    if (spec.isRoot !== undefined) {
+      expect(contextNode.isRoot, 'isRoot').to.equal(spec.isRoot);
+    }
+    if (spec.root !== undefined) {
+      const {root} = contextNode;
+      expect((root && root.node) ?? null, 'root').to.equal(spec.root);
+    }
+    if (spec.discoverable !== undefined) {
+      expect(contextNode.isDiscoverable(), 'discoverable').to.equal(
+        spec.discoverable
+      );
+    }
+    if (spec.parent !== undefined) {
+      const {parent} = contextNode;
+      const parentNode = (parent && parent.node) ?? null;
+      const specNode =
+        ((spec.parent && spec.parent.node) || spec.parent) ?? null;
+      expect(parentNode, 'parent').to.equal(specNode);
+    }
+    if (spec.children !== undefined) {
+      const children = (contextNode.children || []).map((cn) => cn.node || cn);
+      children.sort(domOrderComparator);
+      const specChildren = spec.children.slice(0);
+      specChildren.sort(domOrderComparator);
+      expect(children, 'children').to.deep.equal(specChildren);
+    }
+  }
+
+  describe('ContextNode.get', () => {
+    it('should create an element node', () => {
+      const el = doc.createElement('div');
+      const cn = ContextNode.get(el);
+      expect(cn.node).to.equal(el);
+      // Parent always starts as null.
+      expectContext(cn, {
+        parent: null,
+        isRoot: false,
+        root: null,
+        children: [],
+        discoverable: true,
+      });
+    });
+
+    it('should create a fragment node', () => {
+      const frag = doc.createDocumentFragment();
+      const cn = ContextNode.get(frag);
+      expect(cn.node).to.equal(frag);
+      // Parent always starts as null.
+      expectContext(cn, {
+        parent: null,
+        isRoot: false,
+        root: null,
+        children: [],
+        discoverable: true,
+      });
+    });
+
+    it('should create a document node', () => {
+      const cn = ContextNode.get(doc);
+      expect(cn.node).to.equal(doc);
+      // Parent always starts as null.
+      expectContext(cn, {
+        parent: null,
+        isRoot: true,
+        root: doc,
+        children: [],
+        discoverable: false,
+      });
+    });
+
+    it('should create a node only once', () => {
+      const el = doc.createElement('div');
+      const frag = doc.createDocumentFragment();
+      const cn1 = ContextNode.get(el);
+      const cn2 = ContextNode.get(frag);
+      const cn3 = ContextNode.get(doc);
+      expect(cn1).to.equal(ContextNode.get(el));
+      expect(cn2).to.equal(ContextNode.get(frag));
+      expect(cn3).to.equal(ContextNode.get(doc));
+    });
+  });
+
+  describe('ContextNode.closest', () => {
+    let element;
+    let grandparent;
+
+    beforeEach(() => {
+      element = el('T-1-1-1');
+      grandparent = el('T-1');
+    });
+
+    it('should find itself', () => {
+      const elementContext = ContextNode.get(element);
+      expect(ContextNode.closest(element)).to.equal(elementContext);
+    });
+
+    it('should skip itself', () => {
+      ContextNode.get(element);
+      const grandparentContext = ContextNode.get(grandparent);
+      expect(ContextNode.closest(element, false)).to.equal(grandparentContext);
+      expect(ContextNode.closest(grandparent, false)).to.be.null;
+    });
+
+    it('should go up DOM tree', () => {
+      const grandparentContext = ContextNode.get(grandparent);
+      expect(ContextNode.closest(element)).to.equal(grandparentContext);
+    });
+
+    it('should auto-create root when connected', () => {
+      doc.body.appendChild(tree);
+      expect(ContextNode.closest(element)).to.equal(ContextNode.get(doc));
+      expectContext(ContextNode.get(doc), {isRoot: true});
+    });
+
+    it('should auto-create root on a fragment', () => {
+      const frag = doc.createDocumentFragment();
+      frag.appendChild(tree);
+      expect(ContextNode.closest(element)).to.equal(ContextNode.get(frag));
+      expectContext(ContextNode.get(frag), {
+        isRoot: false,
+        root: null,
+        parent: null,
+      });
+    });
+
+    it('should auto-create a custom AMP element', () => {
+      const ampElement = doc.createElement('amp-element');
+      ampElement.appendChild(tree);
+      expect(ContextNode.closest(element)).to.equal(
+        ContextNode.get(ampElement)
+      );
+      expectContext(ContextNode.get(ampElement), {
+        isRoot: false,
+        root: null,
+        parent: null,
+      });
+    });
+  });
+
+  describe('discover', () => {
+    let sibling1;
+    let sibling2;
+    let cousin1;
+    let parent;
+    let grandparent;
+
+    beforeEach(() => {
+      sibling1 = el('T-1-1-1');
+      sibling2 = el('T-1-1-2');
+      cousin1 = el('T-1-2-1');
+      parent = el('T-1-1');
+      grandparent = el('T-1');
+    });
+
+    it('should be created in an undiscovered mode', () => {
+      expectContext(sibling1, {parent: null, discoverable: true});
+      expectContext(sibling2, {parent: null, discoverable: true});
+      expectContext(cousin1, {parent: null, discoverable: true});
+    });
+
+    describe('disconnected tree', () => {
+      beforeEach(async () => {
+        await waitForDiscover(sibling1, sibling2, cousin1);
+      });
+
+      it('should not auto-discover an orphan', async () => {
+        expectContext(sibling1, {
+          parent: null,
+          children: [],
+          root: null,
+          isRoot: false,
+          discoverable: true,
+        });
+        expectContext(sibling2, {
+          parent: null,
+          children: [],
+          root: null,
+          isRoot: false,
+          discoverable: true,
+        });
+        expectContext(cousin1, {
+          parent: null,
+          children: [],
+          root: null,
+          isRoot: false,
+          discoverable: true,
+        });
+      });
+
+      it('should auto-discover the grandparent', async () => {
+        await waitForDiscover(grandparent);
+        await rediscover(sibling1, sibling2, cousin1);
+
+        expectContext(sibling1, {
+          isRoot: false,
+          root: null,
+          parent: grandparent,
+          children: [],
+          discoverable: true,
+        });
+        expectContext(sibling2, {
+          isRoot: false,
+          root: null,
+          parent: grandparent,
+          children: [],
+          discoverable: true,
+        });
+        expectContext(cousin1, {
+          isRoot: false,
+          root: null,
+          parent: grandparent,
+          children: [],
+          discoverable: true,
+        });
+        expectContext(grandparent, {
+          isRoot: false,
+          root: null,
+          parent: null,
+          children: [sibling1, sibling2, cousin1],
+          discoverable: true,
+        });
+
+        const element3 = el('T-1-1-3');
+        await waitForDiscover(element3);
+        expectContext(element3, {
+          isRoot: false,
+          root: null,
+          parent: grandparent,
+          children: [],
+          discoverable: true,
+        });
+        expectContext(grandparent, {
+          isRoot: false,
+          root: null,
+          parent: null,
+          children: [sibling1, sibling2, cousin1, element3],
+          discoverable: true,
+        });
+      });
+
+      it('should insert an intermediary parent', async () => {
+        await waitForDiscover(grandparent);
+        await rediscover(sibling1, sibling2, cousin1);
+        expectContext(sibling1, {parent: grandparent});
+        expectContext(sibling2, {parent: grandparent});
+        expectContext(cousin1, {parent: grandparent});
+
+        await waitForDiscover(parent);
+        expectContext(sibling1, {
+          parent,
+          children: [],
+          isRoot: false,
+          root: null,
+          discoverable: true,
+        });
+        expectContext(sibling2, {
+          parent,
+          children: [],
+          isRoot: false,
+          root: null,
+          discoverable: true,
+        });
+        expectContext(parent, {
+          parent: grandparent,
+          children: [sibling1, sibling2],
+          isRoot: false,
+          root: null,
+          discoverable: true,
+        });
+        expectContext(grandparent, {
+          parent: null,
+          children: [parent, cousin1],
+          isRoot: false,
+          root: null,
+          discoverable: true,
+        });
+      });
+
+      it('should assign/unassign a slot', async () => {
+        await waitForDiscover(grandparent, parent);
+        await rediscover(sibling1, sibling2, cousin1);
+        expectContext(sibling1, {parent});
+        expectContext(sibling2, {parent});
+        expectContext(cousin1, {grandparent});
+        expectContext(grandparent, {children: [parent, cousin1]});
+        expectContext(parent, {children: [sibling1, sibling2]});
+
+        // Slot cousin1 under parent.
+        ContextNode.assignSlot(cousin1, el('T-1-1-3'));
+        await rediscover(cousin1);
+        expectContext(cousin1, {parent});
+        expectContext(grandparent, {children: [parent]});
+        expectContext(parent, {children: [sibling1, sibling2, cousin1]});
+
+        // Unslot cousin1.
+        ContextNode.unassignSlot(cousin1, el('T-1-1-3'));
+        await rediscover(cousin1);
+        expectContext(cousin1, {parent: grandparent});
+        expectContext(grandparent, {children: [parent, cousin1]});
+        expectContext(parent, {children: [sibling1, sibling2]});
+      });
+
+      it('should assign/unassign a slot in Shadow DOM', async () => {
+        if (Element.prototype.attachShadow) {
+          return;
+        }
+
+        await waitForDiscover(grandparent, parent);
+
+        const grandchild = doc.createElement('div');
+        sibling1.appendChild(grandchild);
+
+        await waitForDiscover(grandchild);
+
+        const shadowRoot = sibling1.attachShadow({mode: 'open'});
+        await waitForDiscover(shadowRoot);
+        expectContext(grandchild, {parent: sibling1});
+        expectContext(sibling1, {children: [grandchild, shadowRoot]});
+        expectContext(shadowRoot, {children: [], parent: sibling1});
+
+        // Slot.
+        const slot = doc.createElement('slot');
+        shadowRoot.appendChild(slot);
+        await rediscover(grandchild);
+        expectContext(grandchild, {parent: shadowRoot});
+        expectContext(sibling1, {children: [shadowRoot]});
+        expectContext(shadowRoot, {children: [grandchild], parent: sibling1});
+
+        // Unslot.
+        shadowRoot.removeChild(slot);
+        await rediscover(grandchild);
+        expectContext(grandchild, {parent: sibling1});
+        expectContext(sibling1, {children: [grandchild, shadowRoot]});
+        expectContext(shadowRoot, {children: [], parent: sibling1});
+      });
+
+      it('should override the root', async () => {
+        await waitForDiscover(grandparent, parent);
+        await rediscover(sibling1, sibling2, cousin1);
+
+        ContextNode.get(grandparent).setIsRoot(true);
+
+        expectContext(grandparent, {
+          parent: null,
+          children: [parent, cousin1],
+          isRoot: true,
+          root: grandparent,
+          discoverable: false,
+        });
+        expectContext(parent, {
+          parent: grandparent,
+          children: [sibling1, sibling2],
+          isRoot: false,
+          root: grandparent,
+          discoverable: true,
+        });
+        expectContext(sibling1, {
+          parent,
+          children: [],
+          isRoot: false,
+          root: grandparent,
+          discoverable: true,
+        });
+        expectContext(sibling2, {
+          parent,
+          children: [],
+          isRoot: false,
+          root: grandparent,
+          discoverable: true,
+        });
+        expectContext(cousin1, {
+          parent: grandparent,
+          children: [],
+          isRoot: false,
+          root: grandparent,
+          discoverable: true,
+        });
+      });
+
+      it('should override the parent', async () => {
+        await waitForDiscover(grandparent);
+        await rediscover(sibling1, sibling2, cousin1);
+        expectContext(sibling1, {parent: grandparent});
+        expectContext(sibling2, {parent: grandparent});
+        expectContext(cousin1, {parent: grandparent});
+
+        ContextNode.get(sibling2).setParent(sibling1);
+        expectContext(sibling2, {
+          parent: sibling1,
+          children: [],
+          discoverable: false,
+        });
+        expectContext(sibling1, {
+          parent: grandparent,
+          children: [sibling2],
+          discoverable: true,
+        });
+        expectContext(grandparent, {
+          children: [sibling1, cousin1],
+          discoverable: true,
+        });
+      });
+    });
+
+    describe('tree connected later', () => {
+      beforeEach(async () => {
+        await waitForDiscover(sibling1, sibling2, cousin1);
+      });
+
+      function connectTree() {
+        doc.body.appendChild(tree);
+        return ContextNode.get(doc);
+      }
+
+      it('should configure the root', async () => {
+        expectContext(connectTree(), {
+          discoverable: false,
+          isRoot: true,
+          root: doc,
+          parent: null,
+          children: [],
+        });
+      });
+
+      it('should auto-discover an orphan', async () => {
+        expectContext(sibling1, {parent: null, root: null});
+        expectContext(sibling2, {parent: null, root: null});
+        expectContext(cousin1, {parent: null, root: null});
+
+        connectTree();
+        await rediscover(sibling1, sibling2, cousin1);
+        expectContext(sibling1, {
+          parent: doc,
+          root: doc,
+          children: [],
+          isRoot: false,
+          discoverable: true,
+        });
+        expectContext(sibling2, {
+          parent: doc,
+          root: doc,
+          children: [],
+          isRoot: false,
+          discoverable: true,
+        });
+        expectContext(cousin1, {
+          parent: doc,
+          root: doc,
+          children: [],
+          isRoot: false,
+          discoverable: true,
+        });
+        expectContext(doc, {
+          isRoot: true,
+          root: doc,
+          parent: null,
+          children: [sibling1, sibling2, cousin1],
+        });
+      });
+
+      it('should auto-discover the grandparent', async () => {
+        await waitForDiscover(grandparent);
+        await rediscover(sibling1, sibling2, cousin1);
+
+        connectTree();
+        await rediscover(grandparent);
+
+        expectContext(doc, {
+          isRoot: true,
+          root: doc,
+          parent: null,
+          children: [grandparent],
+          discoverable: false,
+        });
+        expectContext(grandparent, {
+          isRoot: false,
+          root: doc,
+          parent: doc,
+          children: [sibling1, sibling2, cousin1],
+          discoverable: true,
+        });
+        expectContext(sibling1, {
+          isRoot: false,
+          root: doc,
+          parent: grandparent,
+          children: [],
+          discoverable: true,
+        });
+        expectContext(sibling2, {
+          isRoot: false,
+          root: doc,
+          parent: grandparent,
+          children: [],
+          discoverable: true,
+        });
+        expectContext(cousin1, {
+          isRoot: false,
+          root: doc,
+          parent: grandparent,
+          children: [],
+          discoverable: true,
+        });
+      });
+
+      it('should insert an intermediary parent', async () => {
+        await waitForDiscover(grandparent, parent);
+        await rediscover(sibling1, sibling2, cousin1);
+
+        connectTree();
+        await rediscover(grandparent);
+
+        expectContext(doc, {
+          parent: null,
+          children: [grandparent],
+          isRoot: true,
+          root: doc,
+          discoverable: false,
+        });
+        expectContext(grandparent, {
+          parent: doc,
+          children: [parent, cousin1],
+          isRoot: false,
+          root: doc,
+          discoverable: true,
+        });
+        expectContext(parent, {
+          parent: grandparent,
+          children: [sibling1, sibling2],
+          isRoot: false,
+          root: doc,
+          discoverable: true,
+        });
+        expectContext(sibling1, {
+          parent,
+          children: [],
+          isRoot: false,
+          root: doc,
+          discoverable: true,
+        });
+        expectContext(sibling2, {
+          parent,
+          children: [],
+          isRoot: false,
+          root: doc,
+          discoverable: true,
+        });
+        expectContext(cousin1, {
+          parent: grandparent,
+          children: [],
+          isRoot: false,
+          root: doc,
+          discoverable: true,
+        });
+      });
+    });
+
+    describe('tree connected earlier', () => {
+      beforeEach(async () => {
+        doc.body.appendChild(tree);
+        await waitForDiscover(sibling1, sibling2, cousin1);
+      });
+
+      it('should configure root', () => {
+        expectContext(doc, {
+          root: doc,
+          isRoot: true,
+          parent: null,
+          children: [sibling1, sibling2, cousin1],
+          discoverable: false,
+        });
+      });
+
+      it('should auto-discover an orphan', async () => {
+        expectContext(sibling1, {
+          parent: doc,
+          root: doc,
+          isRoot: false,
+          children: [],
+          discoverable: true,
+        });
+        expectContext(sibling2, {
+          parent: doc,
+          root: doc,
+          isRoot: false,
+          children: [],
+          discoverable: true,
+        });
+        expectContext(cousin1, {
+          parent: doc,
+          root: doc,
+          isRoot: false,
+          children: [],
+          discoverable: true,
+        });
+      });
+
+      it('should auto-discover the grandparent', async () => {
+        await waitForDiscover(grandparent);
+
+        expectContext(doc, {
+          isRoot: true,
+          root: doc,
+          parent: null,
+          children: [grandparent],
+          discoverable: false,
+        });
+        expectContext(grandparent, {
+          isRoot: false,
+          root: doc,
+          parent: doc,
+          children: [sibling1, sibling2, cousin1],
+          discoverable: true,
+        });
+        expectContext(sibling1, {
+          isRoot: false,
+          root: doc,
+          parent: grandparent,
+          children: [],
+          discoverable: true,
+        });
+        expectContext(sibling2, {
+          isRoot: false,
+          root: doc,
+          parent: grandparent,
+          children: [],
+          discoverable: true,
+        });
+        expectContext(cousin1, {
+          isRoot: false,
+          root: doc,
+          parent: grandparent,
+          children: [],
+          discoverable: true,
+        });
+      });
+
+      it('should insert an intermediary parent', async () => {
+        await waitForDiscover(grandparent, parent);
+
+        expectContext(doc, {
+          isRoot: true,
+          root: doc,
+          parent: null,
+          children: [grandparent],
+          discoverable: false,
+        });
+        expectContext(grandparent, {
+          parent: doc,
+          children: [parent, cousin1],
+          isRoot: false,
+          root: doc,
+          discoverable: true,
+        });
+        expectContext(parent, {
+          parent: grandparent,
+          children: [sibling1, sibling2],
+          isRoot: false,
+          root: doc,
+          discoverable: true,
+        });
+        expectContext(sibling1, {
+          parent,
+          children: [],
+          isRoot: false,
+          root: doc,
+          discoverable: true,
+        });
+        expectContext(sibling2, {
+          parent,
+          children: [],
+          isRoot: false,
+          root: doc,
+          discoverable: true,
+        });
+        expectContext(cousin1, {
+          parent: grandparent,
+          children: [],
+          isRoot: false,
+          root: doc,
+          discoverable: true,
+        });
+      });
+
+      it('should move to new root', async () => {
+        await waitForDiscover(grandparent, parent);
+
+        const doc2 = document.implementation.createHTMLDocument('');
+        ContextNode.get(doc2);
+        doc2.body.appendChild(tree);
+        await rediscover(grandparent);
+
+        expectContext(doc, {
+          parent: null,
+          children: [],
+          isRoot: true,
+          root: doc,
+          discoverable: false,
+        });
+        expectContext(doc2, {
+          parent: null,
+          children: [grandparent],
+          isRoot: true,
+          root: doc2,
+          discoverable: false,
+        });
+        expectContext(grandparent, {
+          parent: doc2,
+          children: [parent, cousin1],
+          root: doc2,
+        });
+        expectContext(parent, {
+          parent: grandparent,
+          children: [sibling1, sibling2],
+          root: doc2,
+        });
+        expectContext(sibling1, {
+          parent,
+          children: [],
+          root: doc2,
+        });
+        expectContext(sibling2, {
+          parent,
+          children: [],
+          root: doc2,
+        });
+        expectContext(cousin1, {
+          parent: grandparent,
+          children: [],
+          root: doc2,
+        });
+      });
+
+      it('should override the root', async () => {
+        await waitForDiscover(grandparent, parent);
+
+        ContextNode.get(grandparent).setIsRoot(true);
+
+        expectContext(grandparent, {
+          parent: doc,
+          children: [parent, cousin1],
+          isRoot: true,
+          root: grandparent,
+          discoverable: false,
+        });
+        expectContext(parent, {
+          parent: grandparent,
+          children: [sibling1, sibling2],
+          isRoot: false,
+          root: grandparent,
+          discoverable: true,
+        });
+        expectContext(sibling1, {
+          parent,
+          children: [],
+          isRoot: false,
+          root: grandparent,
+          discoverable: true,
+        });
+        expectContext(sibling2, {
+          parent,
+          children: [],
+          isRoot: false,
+          root: grandparent,
+          discoverable: true,
+        });
+        expectContext(cousin1, {
+          parent: grandparent,
+          children: [],
+          isRoot: false,
+          root: grandparent,
+          discoverable: true,
+        });
+      });
+    });
+  });
+
+  describe('discover shadow DOM', () => {
+    let sibling1;
+    let sibling2;
+    let parent;
+
+    beforeEach(() => {
+      sibling1 = el('T-1-1-1');
+      sibling2 = el('T-1-1-2');
+      parent = el('T-1-1');
+    });
+
+    it('should rediscover slots when shadow root is added', async () => {
+      doc.body.appendChild(tree);
+      await waitForDiscover(parent, sibling1, sibling2);
+
+      const shadowRoot = parent.attachShadow({mode: 'open'});
+      ContextNode.get(shadowRoot).setParent(parent);
+
+      const slot1 = doc.createElement('slot');
+      slot1.name = 'slot1';
+      sibling1.setAttribute('slot', 'slot1');
+      shadowRoot.appendChild(slot1);
+      await waitForDiscover(shadowRoot, sibling1);
+
+      // sibling1's parent is shadow root because it matches the slot.
+      expectContext(sibling1, {parent: shadowRoot});
+      // sibling2's parent stays with "parent" because it's unslotted.
+      expectContext(sibling2, {parent});
+    });
+
+    describe('shadow DOM exists from the start', () => {
+      let shadowRoot;
+      let slot1, slot1Parent;
+
+      beforeEach(async () => {
+        shadowRoot = parent.attachShadow({mode: 'open'});
+        ContextNode.get(shadowRoot).setParent(parent);
+
+        slot1Parent = doc.createElement('div');
+        slot1Parent.id = 'slot1-parent';
+        shadowRoot.appendChild(slot1Parent);
+
+        slot1 = doc.createElement('slot');
+        slot1.id = slot1.name = 'slot1';
+        sibling1.setAttribute('slot', 'slot1');
+        slot1Parent.appendChild(slot1);
+
+        doc.body.appendChild(tree);
+        await waitForDiscover(parent, shadowRoot, sibling1, sibling2);
+      });
+
+      function awaitSlotChange() {
+        return new Promise((resolve) => {
+          shadowRoot.addEventListener('slotchange', resolve);
+        });
+      }
+
+      it('should assign shadow root as a parent via slot', () => {
+        // sibling1's parent is shadow root because it matches the slot.
+        expectContext(sibling1, {parent: shadowRoot});
+        // sibling2's parent stays with "parent" because it's unslotted.
+        expectContext(sibling2, {parent});
+      });
+
+      it('should reassign when slots change', async () => {
+        sibling1.removeAttribute('slot');
+        sibling2.setAttribute('slot', 'slot1');
+        await awaitSlotChange();
+        clock.runAll();
+
+        // sibling1's parent stays with "parent" because it's unslotted.
+        expectContext(sibling1, {parent});
+        // sibling2's parent is shadow root because it matches the slot.
+        expectContext(sibling2, {parent: shadowRoot});
+      });
+
+      it('should reassign when slots are removed', async () => {
+        slot1Parent.removeChild(slot1);
+        await waitForDiscover(sibling1);
+        // Returns to parent.
+        expectContext(sibling1, {parent});
+      });
+
+      it('should reassign to slot if it becomes a context node', async () => {
+        const sibling1Wait = waitForDiscover(sibling1);
+        await rediscover(slot1);
+        await sibling1Wait;
+        // slot belongs to the shadow root.
+        expectContext(slot1, {parent: shadowRoot});
+        // sibling1's parent is slot now.
+        expectContext(sibling1, {parent: slot1});
+        // Not changed: unslotted.
+        expectContext(sibling2, {parent});
+      });
+
+      it('should reassign to slot parent becomes a context node', async () => {
+        const sibling1Wait = waitForDiscover(sibling1);
+        await rediscover(slot1Parent);
+        await sibling1Wait;
+        // slot belongs to the shadow root.
+        expectContext(slot1Parent, {parent: shadowRoot});
+        // sibling1's parent is slot now.
+        expectContext(sibling1, {parent: slot1Parent});
+        // Not changed: unslotted.
+        expectContext(sibling2, {parent});
+      });
+    });
+  });
+
+  describe('discover groups', () => {
+    let sibling1;
+    let sibling2;
+    let cousin1;
+    let parent;
+    let grandparent;
+
+    beforeEach(async () => {
+      sibling1 = el('T-1-1-1');
+      sibling2 = el('T-1-1-2');
+      cousin1 = el('T-1-2-1');
+      parent = el('T-1-1');
+      grandparent = el('T-1');
+      await waitForDiscover(grandparent, parent, sibling1, sibling2, cousin1);
+    });
+
+    it('should rediscover children when a new group is added', async () => {
+      const group1 = ContextNode.get(parent).addGroup(
+        'group1',
+        (node) => node == sibling1,
+        0
+      );
+      await waitForDiscover(group1, sibling1);
+      clock.runAll();
+
+      expect(group1.node).to.equal(parent);
+      expectContext(group1, {parent, children: [sibling1]});
+
+      // sibling1 is reassigned to the group.
+      expectContext(sibling1, {parent: group1});
+
+      // sibling2 stays stays unchanged.
+      expectContext(sibling2, {parent});
+    });
+
+    it('should discover a new child', async () => {
+      const sibling3 = el('T-1-1-3');
+      const group1 = ContextNode.get(parent).addGroup(
+        'group1',
+        (node) => node == sibling3,
+        0
+      );
+      await waitForDiscover(group1);
+
+      // Discover the new node.
+      await rediscover(sibling3);
+      expectContext(sibling3, {parent: group1});
+    });
+
+    it('should handle weight', async () => {
+      const group1 = ContextNode.get(parent).addGroup(
+        'group1',
+        (node) => node == sibling1,
+        0
+      );
+      await waitForDiscover(group1, sibling1);
+      expectContext(sibling1, {parent: group1});
+
+      // A lower weight.
+      const group2 = ContextNode.get(parent).addGroup(
+        'group1',
+        (node) => node == sibling1,
+        -1
+      );
+      await waitForDiscover(group2, sibling1);
+      expectContext(sibling1, {parent: group1});
+
+      // A higher weight.
+      const group3 = ContextNode.get(parent).addGroup(
+        'group1',
+        (node) => node == sibling1,
+        1
+      );
+      await waitForDiscover(group3, sibling1);
+      expectContext(sibling1, {parent: group3});
+    });
+  });
+
+  describe('scanners', () => {
+    const EXCLUDE_SELF = false;
+
+    let parent;
+    let grandparent;
+    let sibling1;
+    let sibling2;
+    let cousin1;
+
+    beforeEach(async () => {
+      grandparent = ContextNode.get(el('T-1'));
+      parent = ContextNode.get(el('T-1-1'));
+      sibling1 = ContextNode.get(el('T-1-1-1'));
+      sibling2 = ContextNode.get(el('T-1-1-2'));
+      cousin1 = ContextNode.get(el('T-1-2-1'));
+      await waitForDiscover(grandparent, parent, sibling1, sibling2, cousin1);
+    });
+
+    it('should find closest', () => {
+      const any = () => true;
+      expect(findParent(sibling1, any)).to.equal(sibling1);
+      expect(findParent(sibling1, any, null, EXCLUDE_SELF)).to.equal(parent);
+
+      const eq = (cn, arg) => cn === arg;
+      expect(findParent(sibling1, eq, sibling1)).to.equal(sibling1);
+      expect(findParent(sibling1, eq, sibling1, EXCLUDE_SELF)).to.be.null;
+      expect(findParent(sibling1, eq, parent)).to.equal(parent);
+    });
+
+    it('should scan the subtree completely', () => {
+      const scanned = [];
+
+      const scan = (cn, exclude) => {
+        scanned.push(cn);
+        if (exclude && exclude.indexOf(cn) != -1) {
+          return false;
+        }
+        return true;
+      };
+
+      // Scan all.
+      scanned.length = 0;
+      deepScan(grandparent, scan);
+      expect(scanned).to.deep.equal([
+        grandparent,
+        parent,
+        sibling1,
+        sibling2,
+        cousin1,
+      ]);
+
+      // Scan subtree.
+      scanned.length = 0;
+      deepScan(grandparent, scan, null, true, EXCLUDE_SELF);
+      expect(scanned).to.deep.equal([parent, sibling1, sibling2, cousin1]);
+
+      // Scan some.
+      scanned.length = 0;
+      deepScan(grandparent, scan, [parent]);
+      expect(scanned).to.deep.equal([grandparent, parent, cousin1]);
+    });
+  });
+});
diff --git a/test/unit/context/test-node-subscribers.js b/test/unit/context/test-node-subscribers.js
new file mode 100644
index 0000000000000..6e9e97b1abb7f
--- /dev/null
+++ b/test/unit/context/test-node-subscribers.js
@@ -0,0 +1,259 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {ContextNode} from '../../../src/context/node';
+import {contextProp} from '../../../src/context/prop';
+import {subscribe, unsubscribe} from '../../../src/context/subscriber';
+
+const NonRecursive = contextProp('NonRecursive');
+
+const Concat = contextProp('Concat', {
+  recursive: true,
+  compute: (contextNode, inputs, parentValue) =>
+    `${parentValue}${inputs.join('|')}`,
+  defaultValue: '',
+});
+
+describes.realWin('ContextNode - subscribers', {}, (env) => {
+  let sandbox;
+  let win, doc;
+  let tree;
+  let clock;
+  let discoverWrapper;
+
+  beforeEach(() => {
+    sandbox = env.sandbox;
+    win = env.win;
+    doc = win.document;
+    clock = sandbox.useFakeTimers();
+
+    tree = createSubtree('T', 4, 4);
+
+    discoverWrapper = wrapper(ContextNode.prototype, 'discover_');
+
+    // Customize output of the ContextNode for easy debug.
+    ContextNode.prototype.inspect = function () {
+      const contextNode = this;
+      return `ContextNode(${contextNode.node.id || contextNode.node.nodeName})`;
+    };
+  });
+
+  afterEach(() => {
+    delete ContextNode.prototype.inspect;
+  });
+
+  function createSubtree(id, children, depth) {
+    const el = doc.createElement('div');
+    el.id = id;
+    el.textContent = id;
+    if (depth > 1) {
+      for (let i = 0; i < children; i++) {
+        const child = createSubtree(`${id}-${i + 1}`, children, depth - 1);
+        el.appendChild(child);
+      }
+    }
+    return el;
+  }
+
+  function el(id) {
+    if (id == 'T') {
+      return tree;
+    }
+    const found = tree.querySelector(`#${id}`);
+    if (!found) {
+      throw new Error(`element not found ${id}`);
+    }
+    return found;
+  }
+
+  /**
+   * @param {Object} obj
+   * @param {string} name
+   */
+  function wrapper(obj, name) {
+    const original = obj[name];
+    const stub = env.sandbox.stub(ContextNode.prototype, name);
+    const wrapperName = `__wrapper_${name}`;
+    stub.callsFake(function (...args) {
+      const obj = this;
+      const resolvers = obj[wrapperName] ?? (obj[wrapperName] = []);
+      const result = original.apply(this, args);
+      const current = resolvers.slice(0);
+      resolvers.length = 0;
+      current.forEach((resolver) => resolver(result));
+      return result;
+    });
+    return {
+      spy: stub,
+      waitFor: (obj) => {
+        const resolvers = obj[wrapperName] ?? (obj[wrapperName] = []);
+        return new Promise((resolve) => {
+          resolvers.push(resolve);
+        });
+      },
+    };
+  }
+
+  function waitForDiscover(...nodesOrContextNodes) {
+    const contextNodes = nodesOrContextNodes.map((arg) =>
+      arg.nodeType ? ContextNode.get(arg) : arg
+    );
+    const promises = contextNodes.map((contextNode) =>
+      discoverWrapper.waitFor(contextNode)
+    );
+    clock.tick(1);
+    return Promise.all(promises);
+  }
+
+  function rediscover(...nodesOrContextNodes) {
+    const contextNodes = nodesOrContextNodes.map((arg) =>
+      arg.nodeType ? ContextNode.get(arg) : arg
+    );
+    contextNodes.forEach((cn) => cn.discover());
+    return waitForDiscover.apply(null, contextNodes);
+  }
+
+  describe('connected', () => {
+    let sibling1;
+    let sibling2;
+    let cousin1;
+    let parent;
+    let grandparent;
+
+    beforeEach(async () => {
+      doc.body.appendChild(tree);
+      sibling1 = ContextNode.get(el('T-1-1-1'));
+      sibling2 = ContextNode.get(el('T-1-1-2'));
+      cousin1 = ContextNode.get(el('T-1-2-1'));
+      parent = ContextNode.get(el('T-1-1'));
+      grandparent = ContextNode.get(el('T-1'));
+      await waitForDiscover(grandparent, parent, sibling1, sibling2, cousin1);
+    });
+
+    describe('subscriber', () => {
+      let spy;
+      let cleanupSpy;
+      let subscriber;
+
+      beforeEach(() => {
+        spy = sandbox.spy();
+        cleanupSpy = sandbox.spy();
+        subscriber = (...args) => {
+          spy.apply(null, args);
+          return cleanupSpy;
+        };
+      });
+
+      it('should subscribe with a single dep', () => {
+        subscribe(parent.node, NonRecursive, subscriber);
+        clock.runAll();
+        expect(spy).to.not.be.called;
+        expect(cleanupSpy).to.not.be.called;
+
+        parent.values.set(NonRecursive, 'OWNER1', 'NR');
+        clock.runAll();
+        expect(spy).to.be.calledOnce.calledWith('NR');
+        expect(cleanupSpy).to.not.be.called;
+
+        // Repeat: no changes.
+        parent.values.set(NonRecursive, 'OWNER1', 'NR');
+        clock.runAll();
+        expect(spy).to.be.calledOnce.calledWith('NR');
+        expect(cleanupSpy).to.not.be.called;
+
+        // Change value.
+        parent.values.set(NonRecursive, 'OWNER1', 'NR2');
+        clock.runAll();
+        expect(spy).to.be.calledTwice.calledWith('NR2');
+        expect(cleanupSpy).to.be.calledOnce;
+
+        // Remove value.
+        parent.values.remove(NonRecursive, 'OWNER1');
+        clock.runAll();
+        expect(spy).to.be.calledTwice; // no change.
+        expect(cleanupSpy).to.be.calledTwice;
+      });
+
+      it('should subscribe with multiple deps', () => {
+        subscribe(parent.node, [NonRecursive, Concat], subscriber);
+        clock.runAll();
+        expect(spy).to.not.be.called;
+        expect(cleanupSpy).to.not.be.called;
+
+        grandparent.values.set(Concat, 'OWNER1', 'A');
+        clock.runAll();
+        expect(spy).to.not.be.called;
+        expect(cleanupSpy).to.not.be.called;
+
+        parent.values.set(NonRecursive, 'OWNER1', 'NR');
+        clock.runAll();
+        expect(spy).to.be.calledOnce.calledWith('NR', 'A');
+        expect(cleanupSpy).to.not.be.called;
+
+        // Change value.
+        parent.values.set(Concat, 'OWNER1', 'B');
+        clock.runAll();
+        expect(spy).to.be.calledTwice.calledWith('NR', 'AB');
+        expect(cleanupSpy).to.be.calledOnce;
+
+        // Remove value.
+        parent.values.remove(NonRecursive, 'OWNER1');
+        clock.runAll();
+        expect(spy).to.be.calledTwice; // no change.
+        expect(cleanupSpy).to.be.calledTwice;
+      });
+
+      it('should unsubscribe', () => {
+        subscribe(parent.node, [NonRecursive], subscriber);
+        parent.values.set(NonRecursive, 'OWNER1', 'NR');
+        clock.runAll();
+        expect(spy).to.be.calledOnce;
+        expect(cleanupSpy).to.not.be.called;
+
+        unsubscribe(parent.node, subscriber);
+        clock.runAll();
+        expect(spy).to.be.calledOnce; // no change.
+        expect(cleanupSpy).to.be.calledOnce;
+
+        // Change value.
+        parent.values.set(NonRecursive, 'OWNER1', 'NR2');
+        clock.runAll();
+        expect(spy).to.be.calledOnce; // no change.
+        expect(cleanupSpy).to.be.calledOnce; // no change.
+      });
+
+      it('should reconnect the subscriber when the node is reconnected', async () => {
+        subscribe(parent.node, [NonRecursive], subscriber);
+        parent.values.set(NonRecursive, 'OWNER1', 'NR');
+        clock.runAll();
+        expect(spy).to.be.calledOnce;
+        expect(cleanupSpy).to.not.be.called;
+
+        parent.node.remove();
+        await rediscover(parent);
+        clock.runAll();
+        expect(spy).to.be.calledOnce; // no change.
+        expect(cleanupSpy).to.be.calledOnce;
+
+        grandparent.node.appendChild(parent.node);
+        await rediscover(parent);
+        clock.runAll();
+        expect(spy).to.be.calledTwice;
+        expect(cleanupSpy).to.be.calledOnce; // no change.
+      });
+    });
+  });
+});
diff --git a/test/unit/context/test-node-values.js b/test/unit/context/test-node-values.js
new file mode 100644
index 0000000000000..375210787f22e
--- /dev/null
+++ b/test/unit/context/test-node-values.js
@@ -0,0 +1,1010 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {ContextNode} from '../../../src/context/node';
+import {Values} from '../../../src/context/values';
+import {contextProp} from '../../../src/context/prop';
+
+const NonRecursive = contextProp('NonRecursive');
+
+const Recursive = contextProp('Recursive', {recursive: true});
+
+const Concat = contextProp('Concat', {
+  recursive: true,
+  compute: (contextNode, inputs, parentValue) =>
+    `${parentValue}${inputs.length > 1 ? `(${inputs.join('|')})` : inputs[0]}`,
+  defaultValue: '',
+});
+
+const Computed = contextProp('Computed', {
+  deps: [NonRecursive, Recursive, Concat],
+  compute: (contextNode, inputs, nonRecursive, recursive, concat) =>
+    `${inputs[0] ?? 'no-input'}/${nonRecursive}/${recursive}/${concat}`,
+});
+
+const ComputedRecursiveWithDeps = contextProp('Computed', {
+  deps: [Recursive],
+  recursive: true,
+  defaultValue: 'DEF',
+  compute: (contextNode, inputs, parentValue, recursive) =>
+    `${inputs[0] ?? 'no-input'}/${parentValue}/${recursive}`,
+});
+
+describes.realWin('ContextNode - values', {}, (env) => {
+  let sandbox;
+  let win, doc;
+  let tree;
+  let clock;
+  let discoverWrapper;
+  let calcSpy;
+
+  beforeEach(() => {
+    sandbox = env.sandbox;
+    win = env.win;
+    doc = win.document;
+    clock = sandbox.useFakeTimers();
+
+    tree = (() => {
+      function createSubtree(id, children, depth) {
+        const el = doc.createElement('div');
+        el.id = id;
+        el.textContent = id;
+        if (depth > 1) {
+          for (let i = 0; i < children; i++) {
+            const child = createSubtree(`${id}-${i + 1}`, children, depth - 1);
+            el.appendChild(child);
+          }
+        }
+        return el;
+      }
+      return createSubtree('T', 4, 4);
+    })();
+
+    discoverWrapper = wrapper(ContextNode.prototype, 'discover_');
+
+    calcSpy = env.sandbox.spy(Values.prototype, 'calc_');
+
+    // Customize output of the ContextNode for easy debug.
+    ContextNode.prototype.inspect = function () {
+      const contextNode = this;
+      return `ContextNode(${contextNode.node.id || contextNode.node.nodeName})`;
+    };
+  });
+
+  afterEach(() => {
+    delete ContextNode.prototype.inspect;
+  });
+
+  function el(id) {
+    if (id == 'T') {
+      return tree;
+    }
+    const found = tree.querySelector(`#${id}`);
+    if (!found) {
+      throw new Error(`element not found ${id}`);
+    }
+    return found;
+  }
+
+  /**
+   * @param {Object} obj
+   * @param {string} name
+   */
+  function wrapper(obj, name) {
+    const original = obj[name];
+    const stub = env.sandbox.stub(ContextNode.prototype, name);
+    const wrapperName = `__wrapper_${name}`;
+    stub.callsFake(function (...args) {
+      const obj = this;
+      const resolvers = obj[wrapperName] ?? (obj[wrapperName] = []);
+      const result = original.apply(this, args);
+      const current = resolvers.slice(0);
+      resolvers.length = 0;
+      current.forEach((resolver) => resolver(result));
+      return result;
+    });
+    return {
+      spy: stub,
+      waitFor: (obj) => {
+        const resolvers = obj[wrapperName] ?? (obj[wrapperName] = []);
+        return new Promise((resolve) => {
+          resolvers.push(resolve);
+        });
+      },
+    };
+  }
+
+  function waitForDiscover(...nodesOrContextNodes) {
+    const contextNodes = nodesOrContextNodes.map((arg) =>
+      arg.nodeType ? ContextNode.get(arg) : arg
+    );
+    const promises = contextNodes.map((contextNode) =>
+      discoverWrapper.waitFor(contextNode)
+    );
+    clock.tick(1);
+    return Promise.all(promises);
+  }
+
+  function rediscover(...nodesOrContextNodes) {
+    const contextNodes = nodesOrContextNodes.map((arg) =>
+      arg.nodeType ? ContextNode.get(arg) : arg
+    );
+    contextNodes.forEach((cn) => cn.discover());
+    return waitForDiscover.apply(null, contextNodes);
+  }
+
+  describe('connected, non-recursive', () => {
+    let sibling1, sibling1Stub;
+    let sibling2, sibling2Stub;
+    let cousin1, cousin1Stub;
+    let parent, parentStub;
+    let grandparent, grandparentStub;
+
+    beforeEach(async () => {
+      doc.body.appendChild(tree);
+      sibling1 = ContextNode.get(el('T-1-1-1'));
+      sibling2 = ContextNode.get(el('T-1-1-2'));
+      cousin1 = ContextNode.get(el('T-1-2-1'));
+      parent = ContextNode.get(el('T-1-1'));
+      grandparent = ContextNode.get(el('T-1'));
+
+      sibling1Stub = sandbox.stub();
+      sibling2Stub = sandbox.stub();
+      cousin1Stub = sandbox.stub();
+      parentStub = sandbox.stub();
+      grandparentStub = sandbox.stub();
+
+      await waitForDiscover(grandparent, parent, sibling1, sibling2, cousin1);
+
+      sibling1.values.subscribe(NonRecursive, sibling1Stub);
+      sibling2.values.subscribe(NonRecursive, sibling2Stub);
+      cousin1.values.subscribe(NonRecursive, cousin1Stub);
+      parent.values.subscribe(NonRecursive, parentStub);
+      grandparent.values.subscribe(NonRecursive, grandparentStub);
+      clock.runAll();
+      calcSpy.resetHistory();
+    });
+
+    it('should resolve with an existing value immediately', async () => {
+      grandparent.values.set(NonRecursive, 'OWNER1', 'A');
+      clock.runAll();
+
+      const spy = sandbox.stub();
+      grandparent.values.subscribe(NonRecursive, spy);
+      clock.runAll();
+
+      expect(spy).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(1);
+    });
+
+    it('should read a non-recursive value on the node', async () => {
+      grandparent.values.set(NonRecursive, 'OWNER1', 'A');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.not.be.called;
+      expect(sibling1Stub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+      expect(calcSpy).to.have.callCount(1);
+
+      calcSpy.resetHistory();
+      grandparent.values.set(NonRecursive, 'OWNER1', 'Z');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledTwice.calledWith('Z');
+      expect(parentStub).to.not.be.called;
+      expect(sibling1Stub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+      expect(calcSpy).to.have.callCount(1);
+    });
+
+    it('should not update the same value twice', async () => {
+      grandparent.values.set(NonRecursive, 'OWNER1', 'A');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(1);
+
+      grandparent.values.set(NonRecursive, 'OWNER1', 'A');
+      clock.runAll();
+      expect(grandparentStub).to.be.calledOnce; // no change.
+      expect(calcSpy).to.have.callCount(1); // no change.
+    });
+  });
+
+  describe('connected, recursive', () => {
+    let sibling1, sibling1Stub;
+    let sibling2, sibling2Stub;
+    let cousin1, cousin1Stub;
+    let parent, parentStub;
+    let grandparent, grandparentStub;
+
+    beforeEach(async () => {
+      doc.body.appendChild(tree);
+      sibling1 = ContextNode.get(el('T-1-1-1'));
+      sibling2 = ContextNode.get(el('T-1-1-2'));
+      cousin1 = ContextNode.get(el('T-1-2-1'));
+      parent = ContextNode.get(el('T-1-1'));
+      grandparent = ContextNode.get(el('T-1'));
+
+      sibling1Stub = sandbox.stub();
+      sibling2Stub = sandbox.stub();
+      cousin1Stub = sandbox.stub();
+      parentStub = sandbox.stub();
+      grandparentStub = sandbox.stub();
+
+      await waitForDiscover(grandparent, parent, sibling1, sibling2, cousin1);
+
+      sibling1.values.subscribe(Recursive, sibling1Stub);
+      sibling2.values.subscribe(Recursive, sibling2Stub);
+      cousin1.values.subscribe(Recursive, cousin1Stub);
+      parent.values.subscribe(Recursive, parentStub);
+      grandparent.values.subscribe(Recursive, grandparentStub);
+      clock.runAll();
+      calcSpy.resetHistory();
+    });
+
+    it('should read a recursive value on the node', async () => {
+      grandparent.values.set(Recursive, 'OWNER1', 'A');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('A');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('A');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('A');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+
+      calcSpy.resetHistory();
+      grandparent.values.set(Recursive, 'OWNER1', 'B');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledTwice.calledWith('B');
+      expect(parentStub).to.be.calledTwice.calledWith('B');
+      expect(sibling1Stub).to.be.calledTwice.calledWith('B');
+      expect(sibling2Stub).to.be.calledTwice.calledWith('B');
+      expect(cousin1Stub).to.be.calledTwice.calledWith('B');
+      expect(calcSpy).to.have.callCount(5);
+    });
+
+    it('should override a recursive value on the node', async () => {
+      grandparent.values.set(Recursive, 'OWNER1', 'A');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('A');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('A');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('A');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+
+      calcSpy.resetHistory();
+      parent.values.set(Recursive, 'OWNER1', 'B');
+      clock.runAll();
+
+      expect(parentStub).to.be.calledTwice.calledWith('B');
+      expect(sibling1Stub).to.be.calledTwice.calledWith('B');
+      expect(sibling2Stub).to.be.calledTwice.calledWith('B');
+      expect(grandparentStub).to.be.calledOnce; // no change.
+      expect(cousin1Stub).to.be.calledOnce; // no change.
+      expect(calcSpy).to.have.callCount(3);
+    });
+
+    it('should stop recompute a value when a node is removed', async () => {
+      grandparent.values.set(Recursive, 'OWNER1', 'A');
+      parent.values.set(Recursive, 'OWNER1', 'B');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('B');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('B');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('B');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+
+      calcSpy.resetHistory();
+      parent.node.remove();
+      await rediscover(parent);
+      clock.runAll();
+      expect(calcSpy).to.have.callCount(0);
+    });
+
+    it('should recompute a value when a node is reparented', async () => {
+      grandparent.values.set(Recursive, 'OWNER1', 'A');
+      parent.values.set(Recursive, 'OWNER1', 'B');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('B');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('B');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('B');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+
+      calcSpy.resetHistory();
+      grandparent.node.appendChild(sibling1.node);
+      await rediscover(sibling1);
+      clock.runAll();
+
+      expect(sibling1Stub).to.be.calledTwice.calledWith('A');
+      expect(grandparentStub).to.be.calledOnce; // no changes.
+      expect(parentStub).to.be.calledOnce; // no changes.
+      expect(sibling2Stub).to.be.calledOnce; // no changes.
+      expect(cousin1Stub).to.be.calledOnce; // no changes.
+      expect(calcSpy).to.have.callCount(1);
+    });
+  });
+
+  describe('connected, computable recursive', () => {
+    let sibling1, sibling1Stub;
+    let sibling2, sibling2Stub;
+    let cousin1, cousin1Stub;
+    let parent, parentStub;
+    let grandparent, grandparentStub;
+
+    beforeEach(async () => {
+      doc.body.appendChild(tree);
+      sibling1 = ContextNode.get(el('T-1-1-1'));
+      sibling2 = ContextNode.get(el('T-1-1-2'));
+      cousin1 = ContextNode.get(el('T-1-2-1'));
+      parent = ContextNode.get(el('T-1-1'));
+      grandparent = ContextNode.get(el('T-1'));
+
+      sibling1Stub = sandbox.stub();
+      sibling2Stub = sandbox.stub();
+      cousin1Stub = sandbox.stub();
+      parentStub = sandbox.stub();
+      grandparentStub = sandbox.stub();
+
+      await waitForDiscover(grandparent, parent, sibling1, sibling2, cousin1);
+
+      sibling1.values.subscribe(Concat, sibling1Stub);
+      sibling2.values.subscribe(Concat, sibling2Stub);
+      cousin1.values.subscribe(Concat, cousin1Stub);
+      parent.values.subscribe(Concat, parentStub);
+      grandparent.values.subscribe(Concat, grandparentStub);
+      clock.runAll();
+      calcSpy.resetHistory();
+      sibling1Stub.resetHistory();
+      sibling2Stub.resetHistory();
+      cousin1Stub.resetHistory();
+      parentStub.resetHistory();
+      grandparentStub.resetHistory();
+    });
+
+    it('should override a computed value on the node', async () => {
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('A');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('A');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('A');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+
+      calcSpy.resetHistory();
+      parent.values.set(Concat, 'OWNER1', 'B');
+      clock.runAll();
+
+      expect(parentStub).to.be.calledTwice.calledWith('AB');
+      expect(sibling1Stub).to.be.calledTwice.calledWith('AB');
+      expect(sibling2Stub).to.be.calledTwice.calledWith('AB');
+      expect(grandparentStub).to.be.calledOnce; // no change.
+      expect(cousin1Stub).to.be.calledOnce; // no change.
+      expect(calcSpy).to.have.callCount(3);
+
+      calcSpy.resetHistory();
+      sibling1.values.set(Concat, 'OWNER1', 'C');
+      clock.runAll();
+
+      expect(sibling1Stub).to.be.calledThrice.calledWith('ABC');
+      expect(grandparentStub).to.be.calledOnce; // no change.
+      expect(parentStub).to.be.calledTwice; // no change.
+      expect(sibling2Stub).to.be.calledTwice; // no change.
+      expect(cousin1Stub).to.be.calledOnce; // no change.
+      expect(calcSpy).to.have.callCount(1);
+    });
+
+    it('should override a computed value in reverse', async () => {
+      sibling1.values.set(Concat, 'OWNER1', 'C');
+      clock.runAll();
+
+      expect(sibling1Stub).to.be.calledOnce.calledWith('C');
+      expect(grandparentStub).to.not.be.called;
+      expect(parentStub).to.be.not.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+      expect(calcSpy).to.have.callCount(1);
+
+      calcSpy.resetHistory();
+      parent.values.set(Concat, 'OWNER1', 'B');
+      clock.runAll();
+
+      expect(sibling1Stub).to.be.calledTwice.calledWith('BC');
+      expect(parentStub).to.be.calledOnce.calledWith('B');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('B');
+      expect(grandparentStub).to.not.be.called;
+      expect(cousin1Stub).to.be.not.called;
+      expect(calcSpy).to.have.callCount(3);
+
+      calcSpy.resetHistory();
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      clock.runAll();
+
+      expect(sibling1Stub).to.be.calledThrice.calledWith('ABC');
+      expect(parentStub).to.be.calledTwice.calledWith('AB');
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(sibling2Stub).to.be.calledTwice.calledWith('AB');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+    });
+
+    it('should override a computed value in between', async () => {
+      sibling1.values.set(Concat, 'OWNER1', 'C');
+      clock.runAll();
+
+      expect(sibling1Stub).to.be.calledOnce.calledWith('C');
+      expect(grandparentStub).to.not.be.called;
+      expect(parentStub).to.be.not.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+      expect(calcSpy).to.have.callCount(1);
+
+      calcSpy.resetHistory();
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      clock.runAll();
+
+      expect(sibling1Stub).to.be.calledTwice.calledWith('AC');
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('A');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('A');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+
+      calcSpy.resetHistory();
+      parent.values.set(Concat, 'OWNER1', 'B');
+      clock.runAll();
+
+      expect(sibling1Stub).to.be.calledThrice.calledWith('ABC');
+      expect(parentStub).to.be.calledTwice.calledWith('AB');
+      expect(sibling2Stub).to.be.calledTwice.calledWith('AB');
+      expect(grandparentStub).to.be.calledOnce; // no change.
+      expect(cousin1Stub).to.be.calledOnce; // no change.
+      expect(calcSpy).to.have.callCount(3);
+    });
+
+    it('should recompute the value on new input', async () => {
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      parent.values.set(Concat, 'OWNER1', 'B');
+      sibling1.values.set(Concat, 'OWNER1', 'C');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('AB');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('ABC');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('AB');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+
+      calcSpy.resetHistory();
+      grandparent.values.set(Concat, 'OWNER1', 'Z');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledTwice.calledWith('Z');
+      expect(parentStub).to.be.calledTwice.calledWith('ZB');
+      expect(sibling1Stub).to.be.calledTwice.calledWith('ZBC');
+      expect(sibling2Stub).to.be.calledTwice.calledWith('ZB');
+      expect(cousin1Stub).to.be.calledTwice.calledWith('Z');
+      expect(calcSpy).to.have.callCount(5);
+    });
+
+    it('should recompute value when input is removed', async () => {
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      parent.values.set(Concat, 'OWNER1', 'B');
+      parent.values.set(Concat, 'OWNER2', 'Y');
+      sibling1.values.set(Concat, 'OWNER1', 'C');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('A(B|Y)');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('A(B|Y)C');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('A(B|Y)');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+
+      calcSpy.resetHistory();
+      parent.values.remove(Concat, 'OWNER2');
+      clock.runAll();
+
+      expect(parentStub).to.be.calledTwice.calledWith('AB');
+      expect(sibling1Stub).to.be.calledTwice.calledWith('ABC');
+      expect(sibling2Stub).to.be.calledTwice.calledWith('AB');
+      expect(grandparentStub).to.be.calledOnce;
+      expect(cousin1Stub).to.be.calledOnce;
+      expect(calcSpy).to.have.callCount(3);
+
+      calcSpy.resetHistory();
+      parent.values.remove(Concat, 'OWNER1');
+      clock.runAll();
+
+      expect(parentStub).to.be.calledThrice.calledWith('A');
+      expect(sibling1Stub).to.be.calledThrice.calledWith('AC');
+      expect(sibling2Stub).to.be.calledThrice.calledWith('A');
+      expect(grandparentStub).to.be.calledOnce; // no change.
+      expect(cousin1Stub).to.be.calledOnce; // no change.
+      expect(calcSpy).to.have.callCount(3);
+    });
+
+    it('should recompute the value on parent change', async () => {
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      parent.values.set(Concat, 'OWNER1', 'B');
+      sibling1.values.set(Concat, 'OWNER1', 'C');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('AB');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('ABC');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('AB');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+
+      calcSpy.resetHistory();
+      tree.appendChild(parent.node);
+      rediscover(parent);
+      clock.runAll();
+
+      expect(parentStub).to.be.calledTwice.calledWith('B');
+      expect(sibling1Stub).to.be.calledTwice.calledWith('BC');
+      expect(sibling2Stub).to.be.calledTwice.calledWith('B');
+      expect(grandparentStub).to.be.calledOnce; // no change.
+      expect(cousin1Stub).to.be.calledOnce; // no change.
+      expect(calcSpy).to.have.callCount(3);
+    });
+
+    it('should stop/resume when disconnected/reconnected', async () => {
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      parent.values.set(Concat, 'OWNER1', 'B');
+      sibling1.values.set(Concat, 'OWNER1', 'C');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('AB');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('ABC');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('AB');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+
+      calcSpy.resetHistory();
+      parent.node.remove();
+      await rediscover(parent);
+      clock.runAll();
+      expect(calcSpy).to.have.callCount(0);
+
+      calcSpy.resetHistory();
+      grandparent.values.set(Concat, 'OWNER1', 'Z');
+      parent.values.set(Concat, 'OWNER1', 'Y');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledTwice.calledWith('Z');
+      expect(cousin1Stub).to.be.calledTwice.calledWith('Z');
+      expect(parentStub).to.be.calledOnce; // no change.
+      expect(sibling1Stub).to.be.calledOnce; // no change.
+      expect(sibling2Stub).to.be.calledOnce; // no change.
+      expect(calcSpy).to.have.callCount(2);
+
+      calcSpy.resetHistory();
+      grandparent.node.appendChild(parent.node);
+      await rediscover(parent);
+      clock.runAll();
+
+      expect(parentStub).to.be.calledTwice.calledWith('ZY');
+      expect(sibling1Stub).to.be.calledTwice.calledWith('ZYC');
+      expect(sibling2Stub).to.be.calledTwice.calledWith('ZY');
+      expect(grandparentStub).to.be.calledTwice; // no change.
+      expect(cousin1Stub).to.be.calledTwice; // no change.
+      expect(calcSpy).to.have.callCount(3);
+    });
+
+    it('should recompute when reparented', async () => {
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      parent.values.set(Concat, 'OWNER1', 'B');
+      sibling1.values.set(Concat, 'OWNER1', 'C');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('AB');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('ABC');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('AB');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+
+      calcSpy.resetHistory();
+      grandparent.node.appendChild(sibling1.node);
+      await rediscover(sibling1);
+      clock.runAll();
+
+      expect(sibling1Stub).to.be.calledTwice.calledWith('AC');
+      expect(grandparentStub).to.be.calledOnce; // no change.
+      expect(cousin1Stub).to.be.calledOnce; // no change.
+      expect(parentStub).to.be.calledOnce; // no change.
+      expect(sibling2Stub).to.be.calledOnce; // no change.
+      expect(calcSpy).to.have.callCount(1);
+    });
+
+    it('should accept multiple inputs', async () => {
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      sibling1.values.set(Concat, 'OWNER1', 'C');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('A');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('AC');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('A');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+
+      calcSpy.resetHistory();
+      grandparent.values.set(Concat, 'OWNER2', 'Z');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledTwice.calledWith('(A|Z)');
+      expect(parentStub).to.be.calledTwice.calledWith('(A|Z)');
+      expect(sibling1Stub).to.be.calledTwice.calledWith('(A|Z)C');
+      expect(sibling2Stub).to.be.calledTwice.calledWith('(A|Z)');
+      expect(cousin1Stub).to.be.calledTwice.calledWith('(A|Z)');
+      expect(calcSpy).to.have.callCount(5);
+    });
+  });
+
+  describe('connected, with deps', () => {
+    let sibling1, sibling1Stub;
+    let sibling2, sibling2Stub;
+    let cousin1, cousin1Stub;
+    let parent, parentStub;
+    let grandparent, grandparentStub;
+
+    beforeEach(async () => {
+      doc.body.appendChild(tree);
+      sibling1 = ContextNode.get(el('T-1-1-1'));
+      sibling2 = ContextNode.get(el('T-1-1-2'));
+      cousin1 = ContextNode.get(el('T-1-2-1'));
+      parent = ContextNode.get(el('T-1-1'));
+      grandparent = ContextNode.get(el('T-1'));
+
+      sibling1Stub = sandbox.stub();
+      sibling2Stub = sandbox.stub();
+      cousin1Stub = sandbox.stub();
+      parentStub = sandbox.stub();
+      grandparentStub = sandbox.stub();
+
+      await waitForDiscover(grandparent, parent, sibling1, sibling2, cousin1);
+
+      sibling1.values.subscribe(Computed, sibling1Stub);
+      sibling2.values.subscribe(Computed, sibling2Stub);
+      cousin1.values.subscribe(Computed, cousin1Stub);
+      parent.values.subscribe(Computed, parentStub);
+      grandparent.values.subscribe(Computed, grandparentStub);
+      clock.runAll();
+      calcSpy.resetHistory();
+    });
+
+    it('should compute with all dependencies only', () => {
+      expect(grandparentStub).to.not.be.called;
+      expect(parentStub).to.not.be.called;
+      expect(sibling1Stub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+
+      // Add a computed recursive dependency.
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      clock.runAll();
+      expect(grandparentStub).to.not.be.called;
+      expect(parentStub).to.not.be.called;
+      expect(sibling1Stub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+
+      // Add a recursive dependency.
+      grandparent.values.set(Recursive, 'OWNER1', 'recursive');
+      clock.runAll();
+      expect(grandparentStub).to.not.be.called;
+      expect(parentStub).to.not.be.called;
+      expect(sibling1Stub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+
+      // Add a non-recursive dependency.
+      calcSpy.resetHistory();
+      parent.values.set(NonRecursive, 'OWNER1', 'non-recursive');
+      clock.runAll();
+      expect(parentStub).to.be.calledOnce.calledWith(
+        'no-input/non-recursive/recursive/A'
+      );
+      expect(grandparentStub).to.not.be.called;
+      expect(sibling1Stub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+      // One computation for `NonRecursive` and one for `Computed`.
+      expect(calcSpy).to.have.callCount(2);
+
+      // Set input.
+      calcSpy.resetHistory();
+      parent.values.set(Computed, 'OWNER1', 'computed');
+      clock.runAll();
+      expect(parentStub).to.be.calledTwice.calledWith(
+        'computed/non-recursive/recursive/A'
+      );
+      expect(grandparentStub).to.not.be.called;
+      expect(sibling1Stub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+      expect(calcSpy).to.have.callCount(1);
+    });
+
+    it('should recompute on a recursive changes', () => {
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      grandparent.values.set(Recursive, 'OWNER1', 'recursive');
+      parent.values.set(NonRecursive, 'OWNER1', 'non-recursive1');
+      sibling1.values.set(NonRecursive, 'OWNER1', 'non-recursive2');
+      clock.runAll();
+
+      expect(parentStub).to.be.calledOnce.calledWith(
+        'no-input/non-recursive1/recursive/A'
+      );
+      expect(sibling1Stub).to.be.calledOnce.calledWith(
+        'no-input/non-recursive2/recursive/A'
+      );
+      expect(grandparentStub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+
+      calcSpy.resetHistory();
+      grandparent.values.set(Concat, 'OWNER1', 'Z');
+      clock.runAll();
+      expect(parentStub).to.be.calledTwice.calledWith(
+        'no-input/non-recursive1/recursive/Z'
+      );
+      expect(sibling1Stub).to.be.calledTwice.calledWith(
+        'no-input/non-recursive2/recursive/Z'
+      );
+      expect(grandparentStub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+      // 5x `Concat` + 5x `Computed`
+      expect(calcSpy).to.have.callCount(10);
+    });
+
+    it('should recompute on a non-recursive changes', () => {
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      grandparent.values.set(Recursive, 'OWNER1', 'recursive');
+      parent.values.set(NonRecursive, 'OWNER1', 'non-recursive1');
+      sibling1.values.set(NonRecursive, 'OWNER1', 'non-recursive2');
+      clock.runAll();
+
+      expect(parentStub).to.be.calledOnce.calledWith(
+        'no-input/non-recursive1/recursive/A'
+      );
+      expect(sibling1Stub).to.be.calledOnce.calledWith(
+        'no-input/non-recursive2/recursive/A'
+      );
+      expect(grandparentStub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+
+      calcSpy.resetHistory();
+      parent.values.set(NonRecursive, 'OWNER1', 'non-recursiveZ');
+      clock.runAll();
+      expect(parentStub).to.be.calledTwice.calledWith(
+        'no-input/non-recursiveZ/recursive/A'
+      );
+      expect(sibling1Stub).to.be.calledOnce; // no change.
+      expect(grandparentStub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+      // 1x `NonRecursive` + 1x `Computed`
+      expect(calcSpy).to.have.callCount(2);
+    });
+  });
+
+  describe('connected, recursive, with deps', () => {
+    let sibling1, sibling1Stub;
+    let sibling2, sibling2Stub;
+    let cousin1, cousin1Stub;
+    let parent, parentStub;
+    let grandparent, grandparentStub;
+
+    beforeEach(async () => {
+      doc.body.appendChild(tree);
+      sibling1 = ContextNode.get(el('T-1-1-1'));
+      sibling2 = ContextNode.get(el('T-1-1-2'));
+      cousin1 = ContextNode.get(el('T-1-2-1'));
+      parent = ContextNode.get(el('T-1-1'));
+      grandparent = ContextNode.get(el('T-1'));
+
+      sibling1Stub = sandbox.stub();
+      sibling2Stub = sandbox.stub();
+      cousin1Stub = sandbox.stub();
+      parentStub = sandbox.stub();
+      grandparentStub = sandbox.stub();
+
+      await waitForDiscover(grandparent, parent, sibling1, sibling2, cousin1);
+
+      sibling1.values.subscribe(ComputedRecursiveWithDeps, sibling1Stub);
+      sibling2.values.subscribe(ComputedRecursiveWithDeps, sibling2Stub);
+      cousin1.values.subscribe(ComputedRecursiveWithDeps, cousin1Stub);
+      parent.values.subscribe(ComputedRecursiveWithDeps, parentStub);
+      grandparent.values.subscribe(ComputedRecursiveWithDeps, grandparentStub);
+      clock.runAll();
+      calcSpy.resetHistory();
+    });
+
+    it('should compute without input', () => {
+      expect(grandparentStub).to.not.be.called;
+      expect(parentStub).to.not.be.called;
+      expect(sibling1Stub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+
+      grandparent.values.set(Recursive, 'OWNER1', 'A');
+      clock.runAll();
+      expect(sibling1Stub).to.be.calledOnce.calledWith('no-input/DEF/A');
+    });
+  });
+
+  describe('connected, discovered later', () => {
+    let sibling1, sibling1Stub;
+    let sibling2, sibling2Stub;
+    let cousin1, cousin1Stub;
+    let grandparent, grandparentStub;
+
+    beforeEach(async () => {
+      doc.body.appendChild(tree);
+      sibling1 = ContextNode.get(el('T-1-1-1'));
+      sibling2 = ContextNode.get(el('T-1-1-2'));
+      cousin1 = ContextNode.get(el('T-1-2-1'));
+      grandparent = ContextNode.get(el('T-1'));
+
+      sibling1Stub = sandbox.stub();
+      sibling2Stub = sandbox.stub();
+      cousin1Stub = sandbox.stub();
+      grandparentStub = sandbox.stub();
+
+      await waitForDiscover(grandparent, sibling1, sibling2, cousin1);
+
+      sibling1.values.subscribe(Concat, sibling1Stub);
+      sibling2.values.subscribe(Concat, sibling2Stub);
+      cousin1.values.subscribe(Concat, cousin1Stub);
+      grandparent.values.subscribe(Concat, grandparentStub);
+      clock.runAll();
+      calcSpy.resetHistory();
+      sibling1Stub.resetHistory();
+      sibling2Stub.resetHistory();
+      cousin1Stub.resetHistory();
+      grandparentStub.resetHistory();
+    });
+
+    it('should override a computed value on a new node', async () => {
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      sibling1.values.set(Concat, 'OWNER1', 'C');
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('AC');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('A');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(4);
+
+      calcSpy.resetHistory();
+      const parent = ContextNode.get(el('T-1-1'));
+      const parentStub = sandbox.stub();
+      parent.values.subscribe(Concat, parentStub);
+      parent.values.set(Concat, 'OWNER1', 'B');
+      await waitForDiscover(parent);
+      clock.runAll();
+
+      expect(parentStub).to.be.calledOnce.calledWith('AB');
+      expect(sibling1Stub).to.be.calledTwice.calledWith('ABC');
+      expect(sibling2Stub).to.be.calledTwice.calledWith('AB');
+      expect(grandparentStub).to.be.calledOnce; // no change.
+      expect(cousin1Stub).to.be.calledOnce; // no change.
+      expect(calcSpy).to.have.callCount(3);
+    });
+  });
+
+  describe('not connected', () => {
+    let sibling1, sibling1Stub;
+    let sibling2, sibling2Stub;
+    let cousin1, cousin1Stub;
+    let parent, parentStub;
+    let grandparent, grandparentStub;
+
+    beforeEach(async () => {
+      sibling1 = ContextNode.get(el('T-1-1-1'));
+      sibling2 = ContextNode.get(el('T-1-1-2'));
+      cousin1 = ContextNode.get(el('T-1-2-1'));
+      parent = ContextNode.get(el('T-1-1'));
+      grandparent = ContextNode.get(el('T-1'));
+
+      sibling1Stub = sandbox.stub();
+      sibling2Stub = sandbox.stub();
+      cousin1Stub = sandbox.stub();
+      parentStub = sandbox.stub();
+      grandparentStub = sandbox.stub();
+
+      await waitForDiscover(grandparent, parent, sibling1, sibling2, cousin1);
+
+      sibling1.values.subscribe(Concat, sibling1Stub);
+      sibling2.values.subscribe(Concat, sibling2Stub);
+      cousin1.values.subscribe(Concat, cousin1Stub);
+      parent.values.subscribe(Concat, parentStub);
+      grandparent.values.subscribe(Concat, grandparentStub);
+      clock.runAll();
+      calcSpy.resetHistory();
+    });
+
+    it('should compute when connected', async () => {
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      parent.values.set(Concat, 'OWNER1', 'B');
+      sibling1.values.set(Concat, 'OWNER1', 'C');
+      clock.runAll();
+
+      expect(grandparentStub).to.not.be.called;
+      expect(sibling1Stub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+      expect(calcSpy).to.not.be.called;
+
+      calcSpy.resetHistory();
+      doc.body.appendChild(tree);
+      await rediscover(grandparent);
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('AB');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('ABC');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('AB');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+    });
+
+    it('should compute when made a root', async () => {
+      grandparent.values.set(Concat, 'OWNER1', 'A');
+      parent.values.set(Concat, 'OWNER1', 'B');
+      sibling1.values.set(Concat, 'OWNER1', 'C');
+      clock.runAll();
+
+      expect(grandparentStub).to.not.be.called;
+      expect(sibling1Stub).to.not.be.called;
+      expect(sibling2Stub).to.not.be.called;
+      expect(cousin1Stub).to.not.be.called;
+      expect(calcSpy).to.not.be.called;
+
+      calcSpy.resetHistory();
+      grandparent.setIsRoot(true);
+      clock.runAll();
+
+      expect(grandparentStub).to.be.calledOnce.calledWith('A');
+      expect(parentStub).to.be.calledOnce.calledWith('AB');
+      expect(sibling1Stub).to.be.calledOnce.calledWith('ABC');
+      expect(sibling2Stub).to.be.calledOnce.calledWith('AB');
+      expect(cousin1Stub).to.be.calledOnce.calledWith('A');
+      expect(calcSpy).to.have.callCount(5);
+    });
+  });
+});
diff --git a/test/unit/test-curve.js b/test/unit/core/data-structures/test-curve.js
similarity index 93%
rename from test/unit/test-curve.js
rename to test/unit/core/data-structures/test-curve.js
index 0fe09799732d5..fe109f1dc44f3 100644
--- a/test/unit/test-curve.js
+++ b/test/unit/core/data-structures/test-curve.js
@@ -14,9 +14,13 @@
  * limitations under the License.
  */
 
-import {Curves, bezierCurve, getCurve} from '../../src/curve';
+import {
+  Curves,
+  bezierCurve,
+  getCurve,
+} from '../../../../src/core/data-structures/curve';
 
-describe('Curve', () => {
+describes.sandboxed('data structures - Curve', {}, () => {
   it('bezierCurve', () => {
     let curve = bezierCurve(0.75, 0, 0.75, 0.9);
     expect(curve(0.2)).to.be.closeTo(0.024374631, 1e-6);
diff --git a/test/unit/core/data-structures/test-finite-state-machine.js b/test/unit/core/data-structures/test-finite-state-machine.js
new file mode 100644
index 0000000000000..a62c36ac79a55
--- /dev/null
+++ b/test/unit/core/data-structures/test-finite-state-machine.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {FiniteStateMachine} from '../../../../src/core/data-structures/finite-state-machine';
+
+describes.sandboxed('data structures - Finite State Machine', {}, (env) => {
+  let fsm;
+  let spy;
+  let other;
+
+  beforeEach(() => {
+    fsm = new FiniteStateMachine('init');
+    spy = env.sandbox.spy();
+    other = env.sandbox.spy();
+
+    fsm.addTransition('init', 'start', spy);
+    fsm.addTransition('init', 'other', other);
+  });
+
+  it('invokes callbacks on transition', () => {
+    fsm.setState('start');
+
+    expect(spy).to.have.been.called;
+  });
+
+  it('ignores other transition callbacks', () => {
+    fsm.setState('other');
+
+    expect(spy).not.to.have.been.called;
+    expect(other).to.have.been.called;
+  });
+
+  it('handles unregistered transitions', () => {
+    fsm.setState('unknown');
+
+    expect(spy).not.to.have.been.called;
+    expect(other).not.to.have.been.called;
+  });
+});
diff --git a/test/unit/utils/test-lru-cache.js b/test/unit/core/data-structures/test-lru-cache.js
similarity index 92%
rename from test/unit/utils/test-lru-cache.js
rename to test/unit/core/data-structures/test-lru-cache.js
index a2a65d040a368..e04842f42bf44 100644
--- a/test/unit/utils/test-lru-cache.js
+++ b/test/unit/core/data-structures/test-lru-cache.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import {LruCache} from '../../../src/utils/lru-cache';
+import {LruCache} from '../../../../src/core/data-structures/lru-cache';
 
-describe('LruCache', () => {
+describes.sandboxed('data structures - LruCache', {}, () => {
   let cache;
 
   beforeEach(() => {
diff --git a/test/unit/test-observable.js b/test/unit/core/data-structures/test-observable.js
similarity index 92%
rename from test/unit/test-observable.js
rename to test/unit/core/data-structures/test-observable.js
index 592d7604da04f..ea1a699aa6dd0 100644
--- a/test/unit/test-observable.js
+++ b/test/unit/core/data-structures/test-observable.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import {Observable} from '../../src/observable';
+import {Observable} from '../../../../src/core/data-structures/observable';
 
-describe('Observable', () => {
+describes.sandboxed('data structures - Observable', {}, () => {
   let observable;
 
   beforeEach(() => {
diff --git a/test/unit/utils/test-priority-queue.js b/test/unit/core/data-structures/test-priority-queue.js
similarity index 93%
rename from test/unit/utils/test-priority-queue.js
rename to test/unit/core/data-structures/test-priority-queue.js
index 3688becb07ff0..c869b44fc0c8f 100644
--- a/test/unit/utils/test-priority-queue.js
+++ b/test/unit/core/data-structures/test-priority-queue.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import PriorityQueue from '../../../src/utils/priority-queue';
+import PriorityQueue from '../../../../src/core/data-structures/priority-queue';
 
-describe('PriorityQueue', function () {
+describes.sandboxed('data structures - PriorityQueue', {}, (env) => {
   let pq;
 
   beforeEach(() => {
@@ -91,7 +91,7 @@ describe('PriorityQueue', function () {
   });
 
   it('should iterate through queue', () => {
-    const spy = window.sandbox.spy();
+    const spy = env.sandbox.spy();
     pq.enqueue('p', 1);
     pq.enqueue('m', 2);
     pq.enqueue('a', 3);
diff --git a/test/unit/utils/test-promise.js b/test/unit/core/data-structures/test-promise.js
similarity index 82%
rename from test/unit/utils/test-promise.js
rename to test/unit/core/data-structures/test-promise.js
index 6e449fa8a4b92..58de3ca18eacb 100644
--- a/test/unit/utils/test-promise.js
+++ b/test/unit/core/data-structures/test-promise.js
@@ -14,23 +14,18 @@
  * limitations under the License.
  */
 
-import * as PromiseUtils from '../../../src/utils/promise';
-
-describes.sandboxed('PromiseUtils', {}, () => {
-  function getPromiseObject() {
-    let resolve, reject;
-    const promise = new Promise((resolve_, reject_) => {
-      resolve = resolve_;
-      reject = reject_;
-    });
+import {
+  Deferred,
+  LastAddedResolver,
+} from '../../../../src/core/data-structures/promise';
 
-    return {promise, resolve, reject};
-  }
+describes.sandboxed('data structures - PromiseUtils', {}, () => {
+  const getPromiseObject = () => new Deferred();
 
   describe('LastAddedResolver', () => {
     it('should resolve when its only promise resolves', () => {
       const one = getPromiseObject();
-      const resolver = new PromiseUtils.LastAddedResolver();
+      const resolver = new LastAddedResolver();
       resolver.add(one.promise);
 
       setTimeout(() => one.resolve('one'), 0);
@@ -43,7 +38,7 @@ describes.sandboxed('PromiseUtils', {}, () => {
     it('should resolve when its last promise added resolves', () => {
       const one = getPromiseObject();
       const two = getPromiseObject();
-      const firstResolver = new PromiseUtils.LastAddedResolver();
+      const firstResolver = new LastAddedResolver();
       firstResolver.add(one.promise);
       firstResolver.add(two.promise);
 
@@ -53,7 +48,7 @@ describes.sandboxed('PromiseUtils', {}, () => {
       const three = getPromiseObject();
       const four = getPromiseObject();
       const five = getPromiseObject();
-      const secondResolver = new PromiseUtils.LastAddedResolver();
+      const secondResolver = new LastAddedResolver();
       secondResolver.add(three.promise);
       secondResolver.add(four.promise);
       secondResolver.add(five.promise);
@@ -75,10 +70,7 @@ describes.sandboxed('PromiseUtils', {}, () => {
     it('should support adding initial promises in the constructor', () => {
       const one = getPromiseObject();
       const two = getPromiseObject();
-      const resolver = new PromiseUtils.LastAddedResolver([
-        one.promise,
-        two.promise,
-      ]);
+      const resolver = new LastAddedResolver([one.promise, two.promise]);
 
       setTimeout(() => one.resolve('one'), 0);
       setTimeout(() => two.resolve('two'), 10);
@@ -91,7 +83,7 @@ describes.sandboxed('PromiseUtils', {}, () => {
     it('should reject only when the last promise rejects', () => {
       const one = getPromiseObject();
       const two = getPromiseObject();
-      const firstResolver = new PromiseUtils.LastAddedResolver();
+      const firstResolver = new LastAddedResolver();
       firstResolver.add(one.promise);
       firstResolver.add(two.promise);
 
@@ -102,7 +94,7 @@ describes.sandboxed('PromiseUtils', {}, () => {
       const four = getPromiseObject();
       const five = getPromiseObject();
       const six = getPromiseObject();
-      const secondResolver = new PromiseUtils.LastAddedResolver();
+      const secondResolver = new LastAddedResolver();
       secondResolver.add(four.promise);
       secondResolver.add(five.promise);
       secondResolver.add(six.promise);
diff --git a/test/unit/utils/test-signals.js b/test/unit/core/data-structures/test-signals.js
similarity index 95%
rename from test/unit/utils/test-signals.js
rename to test/unit/core/data-structures/test-signals.js
index 6137e3f76c0dd..530c683025902 100644
--- a/test/unit/utils/test-signals.js
+++ b/test/unit/core/data-structures/test-signals.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import {Signals} from '../../../src/utils/signals';
+import {Signals} from '../../../../src/core/data-structures/signals';
 
-describes.sandboxed('Signals', {}, (env) => {
+describes.sandboxed('data structures - Signals', {}, (env) => {
   let clock;
   let signals;
 
@@ -53,6 +53,13 @@ describes.sandboxed('Signals', {}, (env) => {
   it('should override signal time', () => {
     signals.signal('sig', 11);
     expect(signals.map_['sig']).to.equal(11);
+
+    signals.signal('sig-1');
+    expect(signals.map_['sig-1']).to.equal(1);
+
+    // zero is respected
+    signals.signal('sig-2', 0);
+    expect(signals.map_['sig-2']).to.equal(0);
     expect(signals.promiseMap_).to.be.null;
   });
 
diff --git a/test/unit/core/dom/stream/test-detached.js b/test/unit/core/dom/stream/test-detached.js
new file mode 100644
index 0000000000000..3b6a814cd862a
--- /dev/null
+++ b/test/unit/core/dom/stream/test-detached.js
@@ -0,0 +1,99 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {DetachedDomStream} from '../../../../../src/core/dom/stream';
+
+describes.fakeWin('DOM - stream - DetachedDomStream', {amp: true}, (env) => {
+  let win;
+  let chunkSpy;
+  let endSpy;
+  let stream;
+
+  beforeEach(() => {
+    win = env.win;
+    chunkSpy = env.sandbox.spy();
+    endSpy = env.sandbox.spy();
+    stream = new DetachedDomStream(win, chunkSpy, endSpy);
+  });
+
+  describe('#write', () => {
+    it('calls the chunk cb on every write', () => {
+      stream.write(`
+        <head>
+          <script async src="https://cdn.ampproject.org/v0.js"></script>
+        </head>
+      `);
+
+      expect(chunkSpy).calledOnce;
+      const firstChunkDoc = chunkSpy.firstCall.firstArg;
+      const script = firstChunkDoc.querySelector('script');
+      expect(script).to.exist;
+      expect(script.src).to.equal('https://cdn.ampproject.org/v0.js');
+
+      stream.write(`
+        <body class="foo">
+          <child-one></child-one>
+        </body>
+      `);
+
+      expect(chunkSpy).calledTwice;
+      const secondChunkDoc = chunkSpy.firstCall.firstArg;
+      expect(secondChunkDoc.body).to.have.class('foo');
+      expect(firstChunkDoc.querySelector('child-one')).to.exist;
+
+      expect(endSpy).not.called;
+    });
+  });
+
+  describe('#close', () => {
+    it('calls the onEnd cb with full doc when complete', () => {
+      stream.write(`
+        <head>
+          <script async src="https://cdn.ampproject.org/v0.js"></script>
+        </head>
+      `);
+
+      expect(endSpy).not.called;
+
+      stream.write(`
+        <body class="foo">
+          <child-one></child-one>
+        </body>
+      `);
+
+      expect(endSpy).not.called;
+
+      stream.close();
+
+      expect(endSpy).calledOnce;
+      const finalDoc = endSpy.firstCall.firstArg;
+      const script = finalDoc.querySelector('script');
+      expect(script).to.exist;
+      expect(script.src).to.equal('https://cdn.ampproject.org/v0.js');
+      expect(finalDoc.body).to.have.class('foo');
+      expect(finalDoc.querySelector('child-one')).to.exist;
+    });
+
+    it('throws if write() called after close()', () => {
+      stream.close();
+      allowConsoleError(() => {
+        expect(() => stream.write('<child-one></child-one>')).to.throw(
+          'Detached doc already closed.'
+        );
+      });
+    });
+  });
+});
diff --git a/test/unit/core/dom/stream/test-response.js b/test/unit/core/dom/stream/test-response.js
new file mode 100644
index 0000000000000..9484d4a08b55b
--- /dev/null
+++ b/test/unit/core/dom/stream/test-response.js
@@ -0,0 +1,199 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {macroTask} from '../../../../../testing/yield';
+import {streamResponseToWriter} from '../../../../../src/core/dom/stream';
+
+const chunk1 = `
+ <!doctype html>
+ <html ⚡4ads>
+ <head>
+   <meta charset="utf-8">
+   <meta name="viewport" content="width=device-width,minimum-scale=1">
+`;
+
+const chunk2 = `
+   <style amp4ads-boilerplate>body{visibility:hidden}</style>
+   <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
+ </head>
+ <body>Hello, AMP4ADS world.</body>
+ </html>
+`;
+
+describes.fakeWin('DOM - stream - streamResponseToWriter', {}, (env) => {
+  let writeSpy;
+  let closeSpy;
+  let mockWriter;
+
+  beforeEach(() => {
+    env.win.TextDecoder = TextDecoder;
+    env.win.ReadableStream = ReadableStream;
+    writeSpy = env.sandbox.spy();
+    closeSpy = env.sandbox.spy();
+    mockWriter = {
+      write: writeSpy,
+      close: closeSpy,
+    };
+  });
+
+  it('decodes response and writes to writer', async () => {
+    let streamController;
+    const encoder = new TextEncoder();
+
+    const bodyStream = new ReadableStream({
+      start(controller) {
+        streamController = controller;
+        controller.enqueue(encoder.encode(chunk1));
+      },
+    });
+
+    const mockRes = new Response(bodyStream);
+
+    streamResponseToWriter(env.win, mockRes, mockWriter);
+    await macroTask();
+    expect(writeSpy).calledOnce;
+    expect(writeSpy).calledWith(chunk1);
+
+    streamController.enqueue(encoder.encode(chunk2));
+    await macroTask();
+    expect(writeSpy).calledTwice;
+    expect(writeSpy.secondCall).calledWith(chunk2);
+
+    expect(closeSpy).not.called;
+    streamController.close();
+    expect(closeSpy).not.calledOnce;
+  });
+
+  it('resolves and writes a single chunk when no textEncoder', async () => {
+    let streamController;
+    const encoder = new TextEncoder();
+
+    const bodyStream = new ReadableStream({
+      start(controller) {
+        streamController = controller;
+        controller.enqueue(encoder.encode(chunk1));
+      },
+    });
+
+    const mockRes = new Response(bodyStream);
+
+    env.win.TextDecoder = undefined;
+
+    streamResponseToWriter(env.win, mockRes, mockWriter);
+    await macroTask();
+    expect(writeSpy).not.called;
+
+    streamController.enqueue(encoder.encode(chunk2));
+    await macroTask();
+    expect(writeSpy).not.called;
+
+    expect(closeSpy).not.called;
+    streamController.close();
+    await macroTask();
+
+    expect(writeSpy).calledWith(chunk1 + chunk2);
+    expect(closeSpy).calledOnce;
+  });
+
+  it('resolves and writes a single chunk when no ReadableStream', async () => {
+    let streamController;
+    const encoder = new TextEncoder();
+
+    const bodyStream = new ReadableStream({
+      start(controller) {
+        streamController = controller;
+        controller.enqueue(encoder.encode(chunk1));
+      },
+    });
+
+    const mockRes = new Response(bodyStream);
+
+    env.win.ReadableStream = undefined;
+
+    streamResponseToWriter(env.win, mockRes, mockWriter);
+    await macroTask();
+    expect(writeSpy).not.called;
+
+    streamController.enqueue(encoder.encode(chunk2));
+    await macroTask();
+    expect(writeSpy).not.called;
+
+    expect(closeSpy).not.called;
+    streamController.close();
+    await macroTask();
+
+    expect(writeSpy).calledWith(chunk1 + chunk2);
+    expect(closeSpy).calledOnce;
+  });
+
+  it('handles empty response', async () => {
+    const bodyStream = new ReadableStream({
+      start(controller) {
+        controller.close();
+      },
+    });
+    const mockRes = new Response(bodyStream);
+
+    streamResponseToWriter(env.win, mockRes, mockWriter);
+    await macroTask();
+    expect(writeSpy).not.called;
+    expect(closeSpy).calledOnce;
+  });
+
+  it('resolves to true when response has content', async () => {
+    const mockRes = new Response(chunk1);
+    const hasContent = await streamResponseToWriter(
+      env.win,
+      mockRes,
+      mockWriter
+    );
+    expect(hasContent).to.be.true;
+  });
+
+  it('resolves to false when response has no content', async () => {
+    const mockRes = new Response('');
+    const hasContent = await streamResponseToWriter(
+      env.win,
+      mockRes,
+      mockWriter
+    );
+    expect(hasContent).to.be.false;
+  });
+
+  it('resolves to true when response has content [fallback]', async () => {
+    env.win.TextDecoder = undefined;
+    env.win.ReadableStream = undefined;
+    const mockRes = new Response(chunk1);
+    const hasContent = await streamResponseToWriter(
+      env.win,
+      mockRes,
+      mockWriter
+    );
+    expect(hasContent).to.be.true;
+  });
+
+  it('resolves to false when response has no content [fallback]', async () => {
+    env.win.TextDecoder = undefined;
+    env.win.ReadableStream = undefined;
+    const mockRes = new Response('');
+    const hasContent = await streamResponseToWriter(
+      env.win,
+      mockRes,
+      mockWriter
+    );
+    expect(hasContent).to.be.false;
+  });
+});
diff --git a/test/unit/test-css.js b/test/unit/core/dom/test-css.js
similarity index 89%
rename from test/unit/test-css.js
rename to test/unit/core/dom/test-css.js
index 9e84994b50105..92d08b8d61079 100644
--- a/test/unit/test-css.js
+++ b/test/unit/core/dom/test-css.js
@@ -14,9 +14,12 @@
  * limitations under the License.
  */
 
-import {escapeCssSelectorIdent, prependSelectorsWith} from '../../src/css';
+import {
+  escapeCssSelectorIdent,
+  prependSelectorsWith,
+} from '../../../../src/core/dom/css';
 
-describe('CSS', () => {
+describes.sandboxed('DOM - CSS selectors', {}, () => {
   describe('escapeCssSelectorIdent', () => {
     it('should escape', () => {
       expect(escapeCssSelectorIdent('a b')).to.equal('a\\ b');
diff --git a/test/unit/core/dom/test-fingerprint.js b/test/unit/core/dom/test-fingerprint.js
new file mode 100644
index 0000000000000..f4a135e08e6e8
--- /dev/null
+++ b/test/unit/core/dom/test-fingerprint.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {
+  DomFingerprint,
+  domFingerprintPlain,
+} from '../../../../src/core/dom/fingerprint';
+
+describes.realWin('DOM - fingerprint', {}, (env) => {
+  let body;
+  let div1;
+  let ampAd;
+
+  beforeEach(() => {
+    const doc = env.win.document;
+    // Start with empty body.
+    body = doc.body;
+    body.textContent = '';
+    div1 = doc.createElement('div');
+    div1.id = 'id1';
+    div1.innerHTML = `<div id='id2'>
+         <table>                <!-- table:0 -->
+           <tr>                 <!-- tr:0 -->
+             <td></td>          <!-- td:0 -->
+             <td>               <!-- td:1 -->
+               <amp-ad type="adsense"></amp-ad>
+             </td>
+           </tr>
+           <tr></tr>            <!-- tr:1 -->
+         </table>
+      </div>`;
+
+    body.appendChild(div1);
+    ampAd = doc.getElementsByTagName('amp-ad')[0];
+  });
+
+  it('should map a sample DOM structure to the right string', () => {
+    expect(domFingerprintPlain(ampAd)).to.equal(
+      'amp-ad.0,td.1,tr.0,tbody.0,table.0,div/id2.0,div/id1.0,body.0,html.0'
+    );
+  });
+
+  it('should map a sample DOM structure to the right hashed value', () => {
+    expect(DomFingerprint.generate(ampAd)).to.equal('2437661740');
+  });
+});
diff --git a/test/unit/test-get-html.js b/test/unit/core/dom/test-get-html.js
similarity index 95%
rename from test/unit/test-get-html.js
rename to test/unit/core/dom/test-get-html.js
index 9a27afc4092ab..0e58741593d76 100644
--- a/test/unit/test-get-html.js
+++ b/test/unit/core/dom/test-get-html.js
@@ -26,9 +26,9 @@ const template = `<div id="wrapper">
 </div>
 `;
 
-import {getHtml} from '../../src/get-html';
+import {getHtml} from '../../../../src/core/dom/get-html';
 
-describe('getHtml', () => {
+describes.sandboxed('DOM - getHtml', {}, () => {
   let element;
 
   beforeEach(() => {
diff --git a/test/unit/core/dom/test-parse-date-attributes.js b/test/unit/core/dom/test-parse-date-attributes.js
new file mode 100644
index 0000000000000..0d79dc2fdd51b
--- /dev/null
+++ b/test/unit/core/dom/test-parse-date-attributes.js
@@ -0,0 +1,150 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {parseDateAttrs as parseDateAttrsBase} from '../../../../src/core/dom/parse-date-attributes';
+
+describes.sandboxed('DOM - parse date attributes', {}, (env) => {
+  describe('parseDateAttrs', () => {
+    const DATE = new Date(1514793600000);
+    const DATE_STRING = DATE.toISOString();
+
+    function parseDateAttrs(element) {
+      return parseDateAttrsBase(element, [
+        'datetime',
+        'end-date',
+        'timestamp-ms',
+        'timeleft-ms',
+        'timestamp-seconds',
+      ]);
+    }
+
+    let element;
+
+    beforeEach(() => {
+      element = document.createElement('amp-date-display');
+    });
+
+    it('should throw when no date is specified', () => {
+      expect(() => parseDateAttrs(element)).to.throw(/required/);
+    });
+
+    /* datetime attribute */
+    it('should throw when invalid date is specified', () => {
+      element.setAttribute('datetime', 'invalid');
+      expect(() => parseDateAttrs(element)).to.throw(/Invalid date/);
+    });
+
+    it('should parse the "datetime" attribute', () => {
+      element.setAttribute('datetime', DATE_STRING);
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime());
+
+      // With offset.
+      element.setAttribute('offset-seconds', '1');
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime() + 1000);
+    });
+
+    it('should accept "datetime=now"', () => {
+      env.sandbox.useFakeTimers(DATE);
+      element.setAttribute('datetime', 'now');
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime());
+
+      // With offset.
+      element.setAttribute('offset-seconds', '1');
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime() + 1000);
+    });
+
+    /* end-date attribute */
+    it('should parse the "end-date" attribute', () => {
+      element.setAttribute('end-date', DATE_STRING);
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime());
+
+      // With offset.
+      element.setAttribute('offset-seconds', '1');
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime() + 1000);
+    });
+
+    it('should accept "end-date=now"', () => {
+      env.sandbox.useFakeTimers(DATE);
+      element.setAttribute('end-date', 'now');
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime());
+
+      // With offset.
+      element.setAttribute('offset-seconds', '1');
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime() + 1000);
+    });
+
+    /* timeleft-ms attribute */
+    it('should parse the "timeleft-ms" attribute', () => {
+      // Mock Date.now()
+      const originalDateNow = Date.now;
+      const mockedDateNow = () => DATE.getTime();
+      Date.now = mockedDateNow;
+
+      element.setAttribute('timeleft-ms', 10000);
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime() + 10000);
+
+      // With offset.
+      element.setAttribute('offset-seconds', '1');
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime() + 10000 + 1000);
+
+      // Replace Date.now with its original native function
+      Date.now = originalDateNow;
+    });
+
+    it('should throw when invalid "timeleft-ms" is specified', () => {
+      element.setAttribute('timeleft-ms', 'invalid');
+      allowConsoleError(() => {
+        expect(() => parseDateAttrs(element)).to.throw(/required/);
+      });
+    });
+
+    /* timestamp-ms attribute */
+    it('should parse the "timestamp-ms" attribute', () => {
+      element.setAttribute('timestamp-ms', DATE.getTime());
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime());
+
+      // With offset.
+      element.setAttribute('offset-seconds', '1');
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime() + 1000);
+    });
+
+    it('should throw when invalid "timestamp-ms" is specified', () => {
+      element.setAttribute('timestamp-ms', 'invalid');
+      expect(() => parseDateAttrs(element)).to.throw(/required/);
+    });
+
+    /* timestamp-seconds attribute */
+    it('should parse the "timestamp-seconds" attribute', () => {
+      element.setAttribute('timestamp-seconds', DATE.getTime() / 1000);
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime());
+
+      // With offset.
+      element.setAttribute('offset-seconds', '1');
+      expect(parseDateAttrs(element)).to.equal(DATE.getTime() + 1000);
+    });
+
+    it('should throw when invalid "timestamp-seconds" is specified', () => {
+      element.setAttribute('timestamp-seconds', 'invalid');
+      expect(() => parseDateAttrs(element)).to.throw(/required/);
+    });
+
+    it('should throw when an invalid attribute is specified', () => {
+      expect(() => parseDateAttrsBase(element, ['unknown-attr'])).to.throw(
+        'Invalid date attribute'
+      );
+    });
+  });
+});
diff --git a/test/unit/core/dom/test-weakref.js b/test/unit/core/dom/test-weakref.js
new file mode 100644
index 0000000000000..f8ace1af1cdf3
--- /dev/null
+++ b/test/unit/core/dom/test-weakref.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright 2020 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.
+ */
+import {DomBasedWeakRef} from '../../../../src/core/dom/weakref';
+
+describes.realWin('DOM - DOM-based weakref', {}, (env) => {
+  let element;
+  beforeEach(() => {
+    element = document.createElement('div');
+    env.win.document.body.appendChild(element);
+  });
+
+  it('should use a real WeakRef if available', () => {
+    if (!window.WeakRef) {
+      return;
+    }
+    const weakref = DomBasedWeakRef.make(env.win, element);
+    expect(weakref).to.be.instanceof(env.win.WeakRef);
+    expect(weakref.deref()).to.equal(element);
+  });
+
+  describe('fallback', () => {
+    beforeEach(() => {
+      delete env.win.WeakRef;
+    });
+
+    it('should use the fallback when WeakRef is NOT available', () => {
+      const weakref = DomBasedWeakRef.make(env.win, element);
+      expect(weakref.deref()).to.equal(element);
+    });
+
+    it('it should use the id of the element if available', () => {
+      element.id = 'some-id';
+      const weakref = DomBasedWeakRef.make(env.win, element);
+      expect(weakref.deref()).to.equal(element);
+      expect(element.id).to.equal('some-id');
+    });
+
+    it('should fail to deref if the element has been removed from the DOM', () => {
+      const weakref = DomBasedWeakRef.make(env.win, element);
+      env.win.document.body.removeChild(element);
+      expect(weakref.deref()).to.equal(undefined);
+    });
+  });
+});
diff --git a/test/unit/test-web-components.js b/test/unit/core/dom/test-web-components.js
similarity index 95%
rename from test/unit/test-web-components.js
rename to test/unit/core/dom/test-web-components.js
index 6c24268c4ee58..144e965d7aa3d 100644
--- a/test/unit/test-web-components.js
+++ b/test/unit/core/dom/test-web-components.js
@@ -19,9 +19,9 @@ import {
   getShadowDomSupportedVersion,
   isShadowDomSupported,
   setShadowDomSupportedVersionForTesting,
-} from '../../src/web-components';
+} from '../../../../src/core/dom/web-components';
 
-describe('web components', () => {
+describes.sandboxed('DOM - web components', {}, () => {
   beforeEach(() => {
     setShadowDomSupportedVersionForTesting(undefined);
   });
diff --git a/test/unit/core/math/test-layout-rect.js b/test/unit/core/math/test-layout-rect.js
new file mode 100644
index 0000000000000..c7c00312e8f1c
--- /dev/null
+++ b/test/unit/core/math/test-layout-rect.js
@@ -0,0 +1,231 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import * as lr from '../../../../src/core/math/layout-rect';
+
+describes.sandboxed('math - LayoutRect', {}, () => {
+  it('layoutRectLtwh', () => {
+    const rect = lr.layoutRectLtwh(1, 2, 3, 4);
+    expect(rect.left).to.equal(1);
+    expect(rect.top).to.equal(2);
+    expect(rect.width).to.equal(3);
+    expect(rect.height).to.equal(4);
+    expect(rect.bottom).to.equal(6);
+    expect(rect.right).to.equal(4);
+  });
+
+  it('rectsOverlap', () => {
+    const rect1 = lr.layoutRectLtwh(10, 20, 30, 40);
+    const rect2 = lr.layoutRectLtwh(40, 60, 10, 10);
+    const rect3 = lr.layoutRectLtwh(41, 60, 10, 10);
+    expect(lr.rectsOverlap(rect1, rect2)).to.equal(true);
+    expect(lr.rectsOverlap(rect1, rect3)).to.equal(false);
+    expect(lr.rectsOverlap(rect2, rect3)).to.equal(true);
+  });
+
+  it('expandLayoutRect', () => {
+    const rect1 = lr.layoutRectLtwh(10, 20, 30, 40);
+    const rect2 = lr.expandLayoutRect(rect1, 2, 3);
+    expect(rect2.left).to.equal(10 - 30 * 2);
+    expect(rect2.right).to.equal(40 + 30 * 2);
+    expect(rect2.width).to.equal(30 + 30 * 4);
+    expect(rect2.top).to.equal(20 - 40 * 3);
+    expect(rect2.bottom).to.equal(60 + 40 * 3);
+    expect(rect2.height).to.equal(40 + 40 * 6);
+  });
+
+  it('moveLayoutRect', () => {
+    const rect1 = lr.layoutRectLtwh(10, 20, 30, 40);
+    const rect2 = lr.moveLayoutRect(rect1, 2, 3);
+    expect(rect2.left).to.equal(rect1.left + 2);
+    expect(rect2.right).to.equal(rect1.right + 2);
+    expect(rect2.width).to.equal(rect1.width);
+    expect(rect2.top).to.equal(rect1.top + 3);
+    expect(rect2.bottom).to.equal(rect1.bottom + 3);
+    expect(rect2.height).to.equal(rect1.height);
+  });
+
+  it('layoutRectFromDomRect', () => {
+    const rect = lr.layoutRectFromDomRect({
+      top: 11,
+      left: 12,
+      width: 111,
+      height: 222,
+    });
+    expect(rect.top).to.equal(11);
+    expect(rect.left).to.equal(12);
+    expect(rect.width).to.equal(111);
+    expect(rect.height).to.equal(222);
+    expect(rect.bottom).to.equal(11 + 222);
+    expect(rect.right).to.equal(12 + 111);
+  });
+
+  it('rectIntersection', () => {
+    const rect1 = lr.layoutRectLtwh(10, 20, 40, 50);
+    const rect2 = lr.layoutRectLtwh(40, 60, 10, 10);
+    const rect3 = lr.layoutRectLtwh(1000, 60, 10, 10);
+    const rect4 = lr.layoutRectLtwh(45, 65, 10, 10);
+    // the LayoutRect array can deal with speical array
+    expect(lr.rectIntersection(null, undefined)).to.be.null;
+    expect(lr.rectIntersection()).to.be.null;
+    expect(lr.rectIntersection(rect1)).to.jsonEqual(rect1);
+    expect(lr.rectIntersection(rect1, rect2)).to.jsonEqual({
+      'left': 40,
+      'top': 60,
+      'width': 10,
+      'height': 10,
+      'bottom': 70,
+      'right': 50,
+      'x': 40,
+      'y': 60,
+    });
+    // the layoutRect array can deal with null/undefined input
+    expect(lr.rectIntersection(null, rect1, undefined, rect2)).to.jsonEqual({
+      'left': 40,
+      'top': 60,
+      'width': 10,
+      'height': 10,
+      'bottom': 70,
+      'right': 50,
+      'x': 40,
+      'y': 60,
+    });
+    expect(lr.rectIntersection(rect1, rect3)).to.be.null;
+    expect(lr.rectIntersection(rect2, rect3)).to.be.null;
+    expect(lr.rectIntersection(rect1, rect2, rect4)).to.jsonEqual({
+      'left': 45,
+      'top': 65,
+      'width': 5,
+      'height': 5,
+      'bottom': 70,
+      'right': 50,
+      'x': 45,
+      'y': 65,
+    });
+    expect(lr.rectIntersection(rect1, rect2, rect3, rect4)).to.be.null;
+  });
+
+  describe('cloneLayoutMarginsChangeDef', {}, () => {
+    it('should clone margins change correctly into new object', () => {
+      const marginsChange = {
+        top: 1,
+        bottom: 5,
+        left: 4,
+      };
+      const marginsChangeClone = lr.cloneLayoutMarginsChangeDef(marginsChange);
+      expect(marginsChangeClone).to.not.equal(marginsChange);
+      expect(marginsChangeClone.top).to.equal(1);
+      expect(marginsChangeClone.bottom).to.equal(5);
+      expect(marginsChangeClone.left).to.equal(4);
+      expect(marginsChangeClone.right).to.be.undefined;
+    });
+  });
+
+  describe('layoutRectSizeEquals', {}, () => {
+    it('should detect changes', () => {
+      const from = lr.layoutRectLtwh(10, 20, 1, 1);
+      const to = lr.layoutRectLtwh(10, 20, 40, 50);
+      expect(lr.layoutRectSizeEquals(from, to)).to.be.false;
+    });
+
+    it('should detect no changes', () => {
+      const from = lr.layoutRectLtwh(10, 20, 1, 1);
+      const to = lr.layoutRectLtwh(10, 20, 1, 1);
+      expect(lr.layoutRectSizeEquals(from, to)).to.be.true;
+    });
+  });
+
+  describe('areMarginsChanged', {}, () => {
+    it('should find margins are not changed when values the same', () => {
+      const margins = {
+        top: 1,
+        right: 2,
+        bottom: 3,
+        left: 4,
+      };
+      const changes = {
+        top: 1,
+        right: 2,
+        bottom: 3,
+        left: 4,
+      };
+      expect(lr.areMarginsChanged(margins, changes)).to.be.false;
+    });
+
+    it('should find margins are not changed when all changes undefined', () => {
+      const margins = {
+        top: 1,
+        right: 2,
+        bottom: 3,
+        left: 4,
+      };
+      const changes = {};
+      expect(lr.areMarginsChanged(margins, changes)).to.be.false;
+    });
+
+    it('should find margins to be changed when top different', () => {
+      const margins = {
+        top: 1,
+        right: 2,
+        bottom: 3,
+        left: 4,
+      };
+      const changes = {
+        top: 5,
+      };
+      expect(lr.areMarginsChanged(margins, changes)).to.be.true;
+    });
+
+    it('should find margins to be changed when right different', () => {
+      const margins = {
+        top: 1,
+        right: 2,
+        bottom: 3,
+        left: 4,
+      };
+      const changes = {
+        right: 5,
+      };
+      expect(lr.areMarginsChanged(margins, changes)).to.be.true;
+    });
+
+    it('should find margins to be changed when bottom different', () => {
+      const margins = {
+        top: 1,
+        right: 2,
+        bottom: 3,
+        left: 4,
+      };
+      const changes = {
+        bottom: 5,
+      };
+      expect(lr.areMarginsChanged(margins, changes)).to.be.true;
+    });
+
+    it('should find margins to be changed when left different', () => {
+      const margins = {
+        top: 1,
+        right: 2,
+        bottom: 3,
+        left: 4,
+      };
+      const changes = {
+        left: 5,
+      };
+      expect(lr.areMarginsChanged(margins, changes)).to.be.true;
+    });
+  });
+});
diff --git a/test/unit/utils/test-math.js b/test/unit/core/math/test-math.js
similarity index 99%
rename from test/unit/utils/test-math.js
rename to test/unit/core/math/test-math.js
index a30b9931a84a3..2cc39239febba 100644
--- a/test/unit/utils/test-math.js
+++ b/test/unit/core/math/test-math.js
@@ -22,9 +22,9 @@ import {
   mapRange,
   mod,
   sum,
-} from '../../../src/utils/math';
+} from '../../../../src/core/math';
 
-describes.sandboxed('utils/math', {}, () => {
+describes.sandboxed('math', {}, () => {
   describe('mapRange', () => {
     it('should map a number to the current value', () => {
       expect(mapRange(5, 0, 10, 40, 80)).to.equal(60);
diff --git a/test/unit/core/test-assert.js b/test/unit/core/test-assert.js
new file mode 100644
index 0000000000000..d348ed0d1f78a
--- /dev/null
+++ b/test/unit/core/test-assert.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {USER_ERROR_SENTINEL} from '../../../src/core/error/message-helpers';
+import {devAssert, userAssert} from '../../../src/core/assert';
+
+describes.sandboxed('assertions', {}, () => {
+  describe('devAssert', () => {
+    it('should not fail for truthy values', () => {
+      devAssert(true, 'True!');
+      devAssert(1, '1');
+      devAssert('abc', 'abc');
+    });
+
+    it('should fail for falsey values dev', () => {
+      expect(() => devAssert(false, 'xyz')).to.throw('xyz');
+      expect(() => userAssert(false, '123')).to.throw(
+        `123${USER_ERROR_SENTINEL}`
+      );
+    });
+  });
+
+  describe('userAssert', () => {
+    it('should not fail for truthy values', () => {
+      userAssert(true, 'True!');
+      userAssert(1, '1');
+      userAssert('abc', 'abc');
+    });
+
+    it('should fail for falsey values dev', () => {
+      expect(() => userAssert(false, 'xyz')).to.throw(
+        `xyz${USER_ERROR_SENTINEL}`
+      );
+    });
+  });
+
+  it('should substitute', () => {
+    expect(() => devAssert(false, 'should fail %s', 'XYZ')).to.throw(
+      'should fail XYZ'
+    );
+    expect(() => devAssert(false, 'should fail %s %s', 'XYZ', 'YYY')).to.throw(
+      'should fail XYZ YYY'
+    );
+    expect(() => userAssert(false, '%s a %s b %s', 1, 2, 3)).to.throw(
+      `1 a 2 b 3${USER_ERROR_SENTINEL}`
+    );
+  });
+
+  it('should add element and message info', () => {
+    const div = document.createElement('div');
+    div.id = 'testId';
+    let error;
+    try {
+      devAssert(false, '%s a %s b %s', div, 2, 3);
+    } catch (e) {
+      error = e;
+    }
+
+    expect(error.toString()).to.match(/div#testId a 2 b 3/);
+    expect(error.messageArray).to.deep.equal([div, 'a', 2, 'b', 3]);
+  });
+});
diff --git a/test/unit/test-document-ready.js b/test/unit/core/test-document-ready.js
similarity index 90%
rename from test/unit/test-document-ready.js
rename to test/unit/core/test-document-ready.js
index 8212e620f4687..fc36c3f6a8124 100644
--- a/test/unit/test-document-ready.js
+++ b/test/unit/core/test-document-ready.js
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import {Services} from '../../src/services';
+import {Services} from '../../../src/services';
 import {
   isDocumentReady,
   onDocumentReady,
   whenDocumentComplete,
   whenDocumentReady,
-} from '../../src/document-ready';
+} from '../../../src/core/document-ready';
 
-describe('documentReady', () => {
+describes.sandboxed('documentReady', {}, (env) => {
   let testDoc;
   let eventListeners;
   const timer = Services.timerFor(window);
@@ -57,7 +57,7 @@ describe('documentReady', () => {
 
   it('should call callback immediately when ready', () => {
     testDoc.readyState = 'complete';
-    const callback = window.sandbox.spy();
+    const callback = env.sandbox.spy();
     onDocumentReady(testDoc, callback);
     expect(callback).to.be.calledOnce;
     expect(callback.getCall(0).args).to.deep.equal([testDoc]);
@@ -65,7 +65,7 @@ describe('documentReady', () => {
 
   it('should wait to call callback until ready', () => {
     testDoc.readyState = 'loading';
-    const callback = window.sandbox.spy();
+    const callback = env.sandbox.spy();
     onDocumentReady(testDoc, callback);
     expect(callback).to.have.not.been.called;
     expect(eventListeners['readystatechange']).to.not.equal(undefined);
@@ -80,7 +80,7 @@ describe('documentReady', () => {
 
   it('should wait to call callback for several loading events', () => {
     testDoc.readyState = 'loading';
-    const callback = window.sandbox.spy();
+    const callback = env.sandbox.spy();
     onDocumentReady(testDoc, callback);
     expect(callback).to.have.not.been.called;
     expect(eventListeners['readystatechange']).to.not.equal(undefined);
@@ -101,9 +101,9 @@ describe('documentReady', () => {
   describe('whenDocumentReady', () => {
     it('should call callback immediately when ready', () => {
       testDoc.readyState = 'complete';
-      const spy = window.sandbox.spy();
-      const spy2 = window.sandbox.spy();
-      const spy3 = window.sandbox.spy();
+      const spy = env.sandbox.spy();
+      const spy2 = env.sandbox.spy();
+      const spy3 = env.sandbox.spy();
 
       whenDocumentReady(testDoc).then(spy).then(spy2);
 
@@ -122,7 +122,7 @@ describe('documentReady', () => {
     });
 
     it('should not call callback', () => {
-      const spy = window.sandbox.spy();
+      const spy = env.sandbox.spy();
       whenDocumentReady(testDoc).then(spy);
       expect(spy).to.have.not.been.called;
       return timer.promise().then(() => {
@@ -132,7 +132,7 @@ describe('documentReady', () => {
 
     it('should wait to call callback until ready', () => {
       testDoc.readyState = 'loading';
-      const callback = window.sandbox.spy();
+      const callback = env.sandbox.spy();
       whenDocumentReady(testDoc).then(callback);
 
       return timer.promise().then(() => {
@@ -155,9 +155,9 @@ describe('documentReady', () => {
   describe('whenDocumentComplete', () => {
     it('should call callback immediately when complete', () => {
       testDoc.readyState = 'complete';
-      const spy = window.sandbox.spy();
-      const spy2 = window.sandbox.spy();
-      const spy3 = window.sandbox.spy();
+      const spy = env.sandbox.spy();
+      const spy2 = env.sandbox.spy();
+      const spy3 = env.sandbox.spy();
 
       whenDocumentComplete(testDoc).then(spy).then(spy2);
 
@@ -176,7 +176,7 @@ describe('documentReady', () => {
     });
 
     it('should not call callback', () => {
-      const spy = window.sandbox.spy();
+      const spy = env.sandbox.spy();
       whenDocumentComplete(testDoc).then(spy);
       expect(spy).to.have.not.been.called;
       return timer.promise().then(() => {
@@ -186,7 +186,7 @@ describe('documentReady', () => {
 
     it('should wait to call callback until ready', () => {
       testDoc.readyState = 'loading';
-      const callback = window.sandbox.spy();
+      const callback = env.sandbox.spy();
       whenDocumentComplete(testDoc).then(callback);
 
       return timer.promise().then(() => {
diff --git a/test/unit/core/test-error.js b/test/unit/core/test-error.js
new file mode 100644
index 0000000000000..1ba9da313879d
--- /dev/null
+++ b/test/unit/core/test-error.js
@@ -0,0 +1,127 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {duplicateErrorIfNecessary, rethrowAsync} from '../../../src/core/error';
+import {isUserErrorMessage, user} from '../../../src/log';
+
+describes.sandboxed('errors', {}, (env) => {
+  describe('rethrowAsync', () => {
+    let clock;
+
+    beforeEach(() => {
+      clock = env.sandbox.useFakeTimers();
+      restoreAsyncErrorThrows();
+    });
+
+    afterEach(() => {
+      stubAsyncErrorThrows();
+    });
+
+    it('should rethrow error with single message', () => {
+      rethrowAsync('intended');
+      expect(() => {
+        clock.tick(1);
+      }).to.throw(Error, /^intended/);
+    });
+
+    it('should rethrow a single error', () => {
+      const orig = new Error('intended');
+      rethrowAsync(orig);
+      let error;
+      try {
+        clock.tick(1);
+      } catch (e) {
+        error = e;
+      }
+      expect(error).to.equal(orig);
+      expect(error.message).to.match(/^intended/);
+    });
+
+    it('should rethrow error with many messages', () => {
+      rethrowAsync('first', 'second', 'third');
+      let error;
+      try {
+        clock.tick(1);
+      } catch (e) {
+        error = e;
+      }
+      expect(error.message).to.match(/^first second third/);
+    });
+
+    it('should rethrow error with original error and messages', () => {
+      const orig = new Error('intended');
+      rethrowAsync('first', orig, 'second', 'third');
+      let error;
+      try {
+        clock.tick(1);
+      } catch (e) {
+        error = e;
+      }
+      expect(error).to.equal(orig);
+      expect(error.message).to.match(/^first second third: intended/);
+    });
+
+    it('should preserve error suffix', () => {
+      const orig = user().createError('intended');
+      expect(isUserErrorMessage(orig.message)).to.be.true;
+      rethrowAsync('first', orig, 'second');
+      let error;
+      try {
+        clock.tick(1);
+      } catch (e) {
+        error = e;
+      }
+      expect(error).to.equal(orig);
+      expect(isUserErrorMessage(error.message)).to.be.true;
+    });
+  });
+
+  describe('duplicateErrorIfNecessary', () => {
+    it('should not duplicate if message is writeable', () => {
+      const error = {message: 'test'};
+
+      expect(duplicateErrorIfNecessary(error)).to.equal(error);
+    });
+
+    it('should duplicate if message is non-writable', () => {
+      const error = {};
+      Object.defineProperty(error, 'message', {
+        value: 'test',
+        writable: false,
+      });
+
+      expect(duplicateErrorIfNecessary(error)).to.not.equal(error);
+    });
+
+    it('copies all the tidbits', () => {
+      const error = {
+        stack: 'stack',
+        args: [1, 2, 3],
+        associatedElement: error,
+      };
+
+      Object.defineProperty(error, 'message', {
+        value: 'test',
+        writable: false,
+      });
+
+      const duplicate = duplicateErrorIfNecessary(error);
+      expect(duplicate.stack).to.equal(error.stack);
+      expect(duplicate.args).to.equal(error.args);
+      expect(duplicate.associatedElement).to.equal(error.associatedElement);
+    });
+  });
+});
diff --git a/test/unit/core/types/function/test-exponential-backoff.js b/test/unit/core/types/function/test-exponential-backoff.js
new file mode 100644
index 0000000000000..077dc81dbe1c3
--- /dev/null
+++ b/test/unit/core/types/function/test-exponential-backoff.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {
+  exponentialBackoff,
+  exponentialBackoffClock,
+} from '../../../../../src/core/types/function/exponential-backoff';
+
+describes.integration(
+  'type helpers - functions - exponentialBackoff',
+  {},
+  (env) => {
+    let clock;
+
+    beforeEach(() => {
+      clock = env.sandbox.useFakeTimers();
+      env.sandbox.stub(Math, 'random').callsFake(() => 1);
+    });
+
+    it('should backoff exponentially', () => {
+      let count = 0;
+      const backoff = exponentialBackoff();
+      const backoff2 = exponentialBackoff();
+      const increment = () => {
+        count++;
+      };
+
+      backoff(increment);
+      expect(count).to.equal(0);
+      clock.tick(600);
+      expect(count).to.equal(0);
+      // Account for jitter
+      clock.tick(701);
+      expect(count).to.equal(1);
+
+      // Round 2
+      backoff(increment);
+      expect(count).to.equal(1);
+      clock.tick(1200);
+      expect(count).to.equal(1);
+      clock.tick(1800);
+      expect(count).to.equal(2);
+
+      // Round 3
+      backoff(increment);
+      expect(count).to.equal(2);
+      clock.tick(2200);
+      expect(count).to.equal(2);
+      clock.tick(3200);
+      expect(count).to.equal(3);
+
+      // 2nd independent backoff
+      backoff2(increment);
+      expect(count).to.equal(3);
+      clock.tick(600);
+      expect(count).to.equal(3);
+      clock.tick(701);
+      expect(count).to.equal(4);
+    });
+
+    it('should exponentiate correctly', () => {
+      const backoff = exponentialBackoffClock();
+      const backoff2 = exponentialBackoffClock();
+
+      // base of 2 = 1000 - 300 (30% jitter) = 700
+      expect(backoff()).to.equal(700);
+      expect(backoff()).to.equal(1400);
+      // tick backoff2
+      expect(backoff2()).to.equal(700);
+      // back to backoff
+      expect(backoff()).to.equal(2800);
+      expect(backoff()).to.equal(5600);
+      expect(backoff()).to.equal(11200);
+      expect(backoff()).to.equal(22400);
+
+      expect(backoff2()).to.equal(1400);
+      expect(backoff2()).to.equal(2800);
+    });
+  }
+);
diff --git a/test/unit/core/types/function/test-function.js b/test/unit/core/types/function/test-function.js
new file mode 100644
index 0000000000000..57820b3402c89
--- /dev/null
+++ b/test/unit/core/types/function/test-function.js
@@ -0,0 +1,136 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {debounce, throttle} from '../../../../../src/core/types/function';
+
+describes.sandboxed('type helpers - functions', {}, (env) => {
+  describe('throttle', () => {
+    let clock;
+
+    beforeEach(() => {
+      clock = env.sandbox.useFakeTimers();
+    });
+
+    it('should work', () => {
+      const callback = env.sandbox.spy();
+      const throttledCallback = throttle(window, callback, 100);
+
+      throttledCallback(1);
+      expect(callback).to.be.calledWith(1); // let 1st call through immediately
+      callback.resetHistory();
+
+      clock.tick(20);
+      throttledCallback(2);
+      clock.tick(20);
+      throttledCallback(3);
+      clock.tick(20);
+      throttledCallback(4);
+      clock.tick(20);
+      throttledCallback(5);
+      clock.tick(19);
+      expect(callback).not.to.be.called; // not 100ms yet
+
+      clock.tick(1);
+      expect(callback).to.be.calledOnce;
+      expect(callback).to.be.calledWith(5);
+      callback.resetHistory();
+
+      clock.tick(10);
+      throttledCallback(6);
+      expect(callback).not.to.be.called;
+      clock.tick(89);
+      throttledCallback(7, 'another param');
+      expect(callback).not.to.be.called;
+      clock.tick(1);
+      expect(callback).to.be.calledOnce;
+      expect(callback).to.be.calledWith(7, 'another param');
+    });
+
+    it('should throttle recursive callback', () => {
+      let totalCalls = 0;
+      function recursive(countdown) {
+        totalCalls++;
+        if (countdown > 0) {
+          throttledCallback(countdown - 1);
+        }
+      }
+      const throttledCallback = throttle(window, recursive, 100);
+
+      // recursive 3 times
+      throttledCallback(3);
+      // should immediately invoke callback only once.
+      expect(totalCalls).to.equal(1);
+      // 2nd invocation happen after the min interval
+      clock.tick(100);
+      expect(totalCalls).to.equal(2);
+      // 3rd invocation
+      clock.tick(100);
+      expect(totalCalls).to.equal(3);
+    });
+  });
+
+  describe('debounce', () => {
+    let clock;
+
+    beforeEach(() => {
+      clock = env.sandbox.useFakeTimers();
+    });
+
+    it('should wait before calling', () => {
+      const callback = env.sandbox.spy();
+      const debounced = debounce(window, callback, 100);
+
+      debounced(1);
+      expect(callback).to.not.have.been.called;
+      clock.tick(100);
+      expect(callback).to.have.been.calledWith(1);
+
+      callback.resetHistory();
+      debounced(1);
+      expect(callback).to.not.have.been.called;
+      debounced(2);
+      expect(callback).to.not.have.been.called;
+      clock.tick(10);
+      debounced(3);
+      expect(callback).to.not.have.been.called;
+      clock.tick(99);
+      expect(callback).to.not.have.been.called;
+      clock.tick(1);
+      expect(callback).to.have.been.calledWith(3);
+    });
+
+    it('should debounce recursive callback', () => {
+      let totalCalls = 0;
+      function recursive(countdown) {
+        totalCalls++;
+        if (countdown > 0) {
+          debounced(countdown - 1);
+        }
+      }
+      const debounced = debounce(window, recursive, 100);
+
+      // recursive 3 times
+      debounced(2);
+      expect(totalCalls).to.equal(0);
+      // 1st invocation happen after the min interval
+      clock.tick(100);
+      expect(totalCalls).to.equal(1);
+      // 2nd invocation
+      clock.tick(100);
+      expect(totalCalls).to.equal(2);
+    });
+  });
+});
diff --git a/test/unit/core/types/object/test-json.js b/test/unit/core/types/object/test-json.js
new file mode 100644
index 0000000000000..658d4b72a12ce
--- /dev/null
+++ b/test/unit/core/types/object/test-json.js
@@ -0,0 +1,133 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {
+  deepEquals,
+  tryParseJson,
+} from '../../../../../src/core/types/object/json';
+
+describes.sandboxed('type helpers - objects - json', {}, () => {
+  describe('tryParseJson', () => {
+    it('should return object for valid json', () => {
+      const json = '{"key": "value"}';
+      const result = tryParseJson(json);
+      expect(result.key).to.equal('value');
+    });
+
+    it('should not throw and return null for invalid json', () => {
+      const json = '{"key": "val';
+      expect(tryParseJson.bind(null, json)).to.not.throw();
+      const result = tryParseJson(json);
+      expect(result).to.be.null;
+    });
+
+    it('should call onFailed for invalid and not call for valid json', () => {
+      let onFailedCalled = false;
+      const validJson = '{"key": "value"}';
+      tryParseJson(validJson, () => {
+        onFailedCalled = true;
+      });
+      expect(onFailedCalled).to.be.false;
+
+      const invalidJson = '{"key": "val';
+      tryParseJson(invalidJson, (err) => {
+        onFailedCalled = true;
+        expect(err).to.exist;
+      });
+      expect(onFailedCalled).to.be.true;
+    });
+  });
+
+  describe('deepEquals', () => {
+    it('should throw on non-finite depth arg', () => {
+      expect(() => {
+        deepEquals({}, {}, Number.POSITIVE_INFINITY);
+      }).to.throw(/Invalid depth/);
+    });
+
+    it('should handle null and empty objects', () => {
+      expect(deepEquals(null, null)).to.be.true;
+
+      expect(deepEquals({}, {})).to.be.true;
+      expect(deepEquals({}, null)).to.be.false;
+
+      expect(deepEquals([], [])).to.be.true;
+      expect(deepEquals([], null)).to.be.false;
+    });
+
+    it('should check strict equality', () => {
+      expect(deepEquals({x: 1}, {x: 1})).to.be.true;
+      expect(deepEquals({x: false}, {x: false})).to.be.true;
+      expect(deepEquals({x: 'abc'}, {x: 'abc'})).to.be.true;
+
+      expect(deepEquals({x: ''}, {x: false})).to.be.false;
+      expect(deepEquals({x: false}, {x: ''})).to.be.false;
+
+      expect(deepEquals({x: ''}, {x: 0})).to.be.false;
+      expect(deepEquals({x: 0}, {x: ''})).to.be.false;
+
+      expect(deepEquals({x: 1}, {x: true})).to.be.false;
+      expect(deepEquals({x: true}, {x: 1})).to.be.false;
+
+      expect(deepEquals({x: 1}, {x: '1'})).to.be.false;
+      expect(deepEquals({x: '1'}, {x: 1})).to.be.false;
+
+      expect(deepEquals({x: undefined}, {x: null})).to.be.false;
+      expect(deepEquals({x: null}, {x: undefined})).to.be.false;
+
+      expect(deepEquals({x: {}}, {x: '[object Object]'})).to.be.false;
+      expect(deepEquals({x: '[object Object]'}, {x: {}})).to.be.false;
+    });
+
+    it('should check deep equality in nested arrays and objects', () => {
+      expect(deepEquals({x: {y: 1}}, {x: {y: 1}})).to.be.true;
+      expect(deepEquals({x: {y: 1}}, {x: {}})).to.be.false;
+      expect(deepEquals({x: {y: 1}}, {x: {y: 0}})).to.be.false;
+      expect(deepEquals({x: {y: 1}}, {x: {y: 1, z: 2}})).to.be.false;
+
+      expect(deepEquals({x: [1, 2, 3]}, {x: [1, 2, 3]})).to.be.true;
+      expect(deepEquals({x: [1, 2, 3]}, {x: []})).to.be.false;
+      expect(deepEquals({x: [1, 2, 3]}, {x: [1, 2, 3, 4]})).to.be.false;
+
+      expect(deepEquals([1, 2, [3, 4]], [1, 2, [3, 4]])).to.be.true;
+      expect(deepEquals([1, 2, []], [1, 2, []])).to.be.true;
+      expect(deepEquals([1, 2, [3, 4]], [1, 2, [3, 4, 5]])).to.be.false;
+    });
+
+    it('should check array order', () => {
+      expect(deepEquals([1, 2], [2, 1])).to.be.false;
+      expect(deepEquals([1, 2, [3, 4]], [1, 2, [4, 3]])).to.be.false;
+    });
+
+    it('should not check object key order', () => {
+      expect(deepEquals({x: 1, y: 2, z: 3}, {y: 2, z: 3, x: 1})).to.be.true;
+    });
+
+    it('should stop diving once depth arg is exceeded', () => {
+      let depth = 0;
+      expect(deepEquals(1, 1, depth)).to.be.true;
+      expect(deepEquals('a', 'a', depth)).to.be.true;
+      expect(deepEquals([], [], depth)).to.be.false;
+      expect(deepEquals({}, {}, depth)).to.be.false;
+
+      depth = 1;
+      expect(deepEquals({x: 1}, {x: 1}, depth)).to.be.true;
+      expect(deepEquals([1, 2], [1, 2], depth)).to.be.true;
+      expect(deepEquals({x: {y: 1}}, {x: {y: 1}}, depth)).to.be.false;
+      expect(deepEquals({x: []}, {x: []}, depth)).to.be.false;
+    });
+  });
+});
diff --git a/test/unit/core/types/object/test-object.js b/test/unit/core/types/object/test-object.js
new file mode 100644
index 0000000000000..9c1b9e5b823d1
--- /dev/null
+++ b/test/unit/core/types/object/test-object.js
@@ -0,0 +1,351 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {
+  deepMerge,
+  getValueForExpr,
+  hasOwn,
+  map,
+  memo,
+  ownProperty,
+  recreateNonProtoObject,
+} from '../../../../../src/core/types/object';
+
+describes.sandboxed('type helpers - objects', {}, () => {
+  it('hasOwn', () => {
+    expect(hasOwn(map(), 'a')).to.be.false;
+    expect(hasOwn(map({'a': 'b'}), 'b')).to.be.false;
+    expect(hasOwn(map({'a': {}}), 'a')).to.be.true;
+  });
+
+  it('ownProperty', () => {
+    expect(ownProperty({}, '__proto__')).to.be.undefined;
+    expect(ownProperty({}, 'constructor')).to.be.undefined;
+    expect(ownProperty({foo: 'bar'}, 'foo')).to.equal('bar');
+  });
+
+  describe('map', () => {
+    it('should make map like objects', () => {
+      expect(map().prototype).to.be.undefined;
+      expect(map().__proto__).to.be.undefined;
+      expect(map().toString).to.be.undefined;
+    });
+
+    it('should make map like objects from objects', () => {
+      expect(map({}).prototype).to.be.undefined;
+      expect(map({}).__proto__).to.be.undefined;
+      expect(map({}).toString).to.be.undefined;
+      expect(map({foo: 'bar'}).foo).to.equal('bar');
+      const obj = {foo: 'bar', test: 1};
+      expect(map(obj).test).to.equal(1);
+      expect(map(obj)).to.not.equal(obj);
+    });
+  });
+
+  describe('deepMerge', () => {
+    it('should deep merge objects', () => {
+      const destObject = {
+        a: 'hello world',
+        b: 'goodbye world',
+        c: {
+          d: 'foo',
+          e: {
+            f: 'bar',
+          },
+        },
+      };
+      const fromObject = {
+        b: 'hello world',
+        c: {
+          d: 'bah',
+          e: {
+            g: 'baz',
+          },
+        },
+      };
+      expect(deepMerge(destObject, fromObject)).to.deep.equal({
+        a: 'hello world',
+        b: 'hello world',
+        c: {
+          d: 'bah',
+          e: {
+            f: 'bar',
+            g: 'baz',
+          },
+        },
+      });
+    });
+
+    it('should NOT deep merge arrays', () => {
+      const destObject = {
+        a: [1, 2, 3, 4, 5],
+        b: {
+          c: [9, 8, 7, 6, 5],
+        },
+      };
+      const fromObject = {
+        b: {
+          c: ['h', 'i'],
+        },
+      };
+      expect(deepMerge(destObject, fromObject)).to.deep.equal({
+        a: [1, 2, 3, 4, 5],
+        b: {
+          c: ['h', 'i'],
+        },
+      });
+    });
+
+    it('should use Object.assign if merged object exceeds max depth', () => {
+      const destObject = {
+        a: {
+          b: {
+            c: {
+              d: 'e',
+              f: 'g',
+            },
+          },
+        },
+      };
+      const fromObject = {
+        a: {
+          b: {
+            c: {
+              d: 'z',
+              h: 'i',
+            },
+          },
+        },
+      };
+      expect(deepMerge(destObject, fromObject, 1)).to.deep.equal({
+        a: {
+          b: {
+            c: {
+              d: 'z',
+              h: 'i',
+            },
+          },
+        },
+      });
+    });
+
+    it('should handle destination objects with circular references', () => {
+      const destObject = {};
+      destObject.a = destObject;
+      const fromObject = {};
+      fromObject.a = {};
+      expect(deepMerge(destObject, fromObject)).to.deep.equal({
+        a: destObject,
+      });
+    });
+
+    it('should throw on source objects with circular references', () => {
+      const destObject = {};
+      destObject.a = {};
+      const fromObject = {};
+      fromObject.a = fromObject;
+      expect(() => deepMerge(destObject, fromObject)).to.throw(
+        /Source object has a circular reference./
+      );
+    });
+
+    it('should merge null and undefined correctly', () => {
+      const destObject = {
+        a: null,
+        b: {
+          c: 'd',
+        },
+        e: undefined,
+        f: {
+          g: 'h',
+        },
+      };
+      const fromObject = {
+        a: {
+          i: 'j',
+        },
+        b: null,
+        e: {
+          k: 'm',
+        },
+        f: undefined,
+      };
+      expect(deepMerge(destObject, fromObject)).to.deep.equal({
+        a: {
+          i: 'j',
+        },
+        b: null,
+        e: {
+          k: 'm',
+        },
+        f: undefined,
+      });
+    });
+
+    it('should short circuit when merging the same object', () => {
+      const destObject = {
+        set a(val) {
+          throw new Error('deep merge tried to merge object with itself');
+        },
+      };
+      expect(() => deepMerge(destObject, destObject)).to.not.throw();
+    });
+  });
+
+  describe('memo', () => {
+    const PROP = '_a';
+
+    let counter;
+    let obj;
+
+    beforeEach(() => {
+      counter = 0;
+      obj = {
+        name: 'OBJ',
+      };
+    });
+
+    function factory(obj) {
+      const id = ++counter;
+      return `${obj.name}:${id}`;
+    }
+
+    it('should allocate object on first and first use only', () => {
+      // First access: allocate and reuse.
+      expect(memo(obj, PROP, factory)).to.equal('OBJ:1');
+      expect(memo(obj, PROP, factory)).to.equal('OBJ:1');
+
+      // Same object, different property: allocate again.
+      expect(memo(obj, PROP + '2', factory)).to.equal('OBJ:2');
+      expect(memo(obj, PROP + '2', factory)).to.equal('OBJ:2');
+
+      // A new object: allocate again.
+      expect(memo({name: 'OBJ'}, PROP, factory)).to.equal('OBJ:3');
+    });
+  });
+
+  describe('getValueForExpr', () => {
+    it('should return self for "."', () => {
+      const obj = {str: 'A', num: 1, bool: true, val: null};
+      expect(getValueForExpr(obj, '.')).to.equal(obj);
+    });
+
+    it('should return a simple value', () => {
+      const obj = {str: 'A', num: 1, bool: true, val: null};
+      expect(getValueForExpr(obj, 'str')).to.equal('A');
+      expect(getValueForExpr(obj, 'num')).to.equal(1);
+      expect(getValueForExpr(obj, 'bool')).to.equal(true);
+      expect(getValueForExpr(obj, 'val')).to.be.null;
+      expect(getValueForExpr(obj, 'other')).to.be.undefined;
+    });
+
+    it('should return a nested value', () => {
+      const child = {str: 'A', num: 1, bool: true, val: null};
+      const obj = {child};
+      expect(getValueForExpr(obj, 'child')).to.deep.equal(child);
+      expect(getValueForExpr(obj, 'child.str')).to.equal('A');
+      expect(getValueForExpr(obj, 'child.num')).to.equal(1);
+      expect(getValueForExpr(obj, 'child.bool')).to.equal(true);
+      expect(getValueForExpr(obj, 'child.val')).to.be.null;
+      expect(getValueForExpr(obj, 'child.other')).to.be.undefined;
+    });
+
+    it('should return a nested value without proto', () => {
+      const child = {str: 'A', num: 1, bool: true, val: null};
+      const obj = recreateNonProtoObject({child});
+      expect(getValueForExpr(obj, 'child')).to.deep.equal(child);
+      expect(getValueForExpr(obj, 'child.str')).to.equal('A');
+      expect(getValueForExpr(obj, 'child.num')).to.equal(1);
+      expect(getValueForExpr(obj, 'child.bool')).to.equal(true);
+      expect(getValueForExpr(obj, 'child.val')).to.be.null;
+      expect(getValueForExpr(obj, 'child.other')).to.be.undefined;
+    });
+
+    it('should shortcircuit if a parent in chain missing', () => {
+      const child = {str: 'A'};
+      const obj = {child};
+      expect(getValueForExpr(obj, 'child.str')).to.equal('A');
+      expect(getValueForExpr(obj, 'unknown.str')).to.be.undefined;
+      expect(getValueForExpr(obj, 'unknown.chain.str')).to.be.undefined;
+    });
+
+    it('should shortcircuit if a parent in chain is not an object', () => {
+      const child = {str: 'A'};
+      const obj = {child, nonobj: 'B'};
+      expect(getValueForExpr(obj, 'child.str')).to.equal('A');
+      expect(getValueForExpr(obj, 'nonobj')).to.equal('B');
+      expect(getValueForExpr(obj, 'nonobj.str')).to.be.undefined;
+    });
+
+    it('should only search in own properties', () => {
+      const ancestor = {num: 1};
+      const obj = Object.create(ancestor);
+      obj.str = 'A';
+      expect(getValueForExpr(obj, 'str')).to.equal('A');
+      expect(getValueForExpr(ancestor, 'num')).to.equal(1);
+      expect(getValueForExpr(obj, 'num')).to.be.undefined;
+      expect(getValueForExpr(obj, '__proto__')).to.be.undefined;
+    });
+
+    it('should support array index', () => {
+      const child = {num: 1, str: 'A'};
+      const obj = {foo: [child]};
+      expect(getValueForExpr(obj, 'foo.0.num')).to.equal(1);
+      expect(getValueForExpr(obj, 'foo.0.str')).to.equal('A');
+      expect(getValueForExpr(obj, 'foo.0a.str')).to.be.undefined;
+      expect(getValueForExpr(obj, 'foo.1.num')).to.be.undefined;
+      expect(getValueForExpr(obj, 'foo.1.str')).to.be.undefined;
+    });
+
+    it('should only search in own properties of arrays', () => {
+      const arr = ['A'];
+      expect(getValueForExpr(arr, '0')).to.equal('A');
+      expect(getValueForExpr(arr, '1')).to.be.undefined;
+      expect(getValueForExpr(arr, 'concat')).to.be.undefined;
+      expect(getValueForExpr(arr, '__proto__')).to.be.undefined;
+    });
+  });
+
+  describe('recreateNonProtoObject', () => {
+    it('should recreate an empty object', () => {
+      const original = {};
+      const copy = recreateNonProtoObject(original);
+      expect(copy).to.deep.equal(original);
+      expect(copy).to.not.equal(original);
+      expect(copy.__proto__).to.be.undefined;
+    });
+
+    it('should recreate an object', () => {
+      const original = {str: 'A', num: 1, bool: true, val: null};
+      const copy = recreateNonProtoObject(original);
+      expect(copy).to.deep.equal(original);
+      expect(copy).to.not.equal(original);
+      expect(copy.__proto__).to.be.undefined;
+      expect(copy.val).to.be.null;
+    });
+
+    it('should recreate a nested object', () => {
+      const original = {child: {str: 'A', num: 1, bool: true, val: null}};
+      const copy = recreateNonProtoObject(original);
+      expect(copy).to.deep.equal(original);
+      expect(copy).to.not.equal(original);
+      expect(copy.__proto__).to.be.undefined;
+      expect(copy.child).to.deep.equal(original.child);
+      expect(copy.child).to.not.equal(original.child);
+      expect(copy.child.__proto__).to.be.undefined;
+    });
+  });
+});
diff --git a/test/unit/utils/test-base64.js b/test/unit/core/types/string/test-base64.js
similarity index 94%
rename from test/unit/utils/test-base64.js
rename to test/unit/core/types/string/test-base64.js
index fff80275a382d..8ea240cac26b0 100644
--- a/test/unit/utils/test-base64.js
+++ b/test/unit/core/types/string/test-base64.js
@@ -21,14 +21,17 @@ import {
   base64UrlDecodeToBytes,
   base64UrlEncodeFromBytes,
   base64UrlEncodeFromString,
-} from '../../../src/utils/base64';
-import {stringToBytes, utf8Decode, utf8Encode} from '../../../src/utils/bytes';
-
-// TODO(amphtml, #25621): Cannot find atob / btoa on Safari on Sauce Labs.
-describe
-  .configure()
-  .skipSafari()
-  .run('base64', () => {
+} from '../../../../../src/core/types/string/base64';
+import {
+  stringToBytes,
+  utf8Decode,
+  utf8Encode,
+} from '../../../../../src/core/types/string/bytes';
+
+describes.sandboxed('type helpers - strings - base64', {}, () => {
+  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari.
+  const config = describe.configure().skipSafari();
+  config.run('base64', () => {
     describe('base64 <> utf-8 encode/decode', () => {
       const testCases = [
         'SimplyFoo',
@@ -39,10 +42,8 @@ describe
 
       scenarios.forEach((scenario) => {
         describe(scenario, () => {
-          const {
-            TextEncoder: oldTextEncoder,
-            TextDecoder: oldTextDecoder,
-          } = window;
+          const {TextDecoder: oldTextDecoder, TextEncoder: oldTextEncoder} =
+            window;
           beforeEach(() => {
             // Forces use of the TextEncoding polyfill
             if (scenario == 'PolyfillTextEncoding') {
@@ -223,3 +224,4 @@ describe
       });
     });
   });
+});
diff --git a/test/unit/core/types/string/test-bytes.js b/test/unit/core/types/string/test-bytes.js
new file mode 100644
index 0000000000000..d9bbb4dc0a467
--- /dev/null
+++ b/test/unit/core/types/string/test-bytes.js
@@ -0,0 +1,172 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {
+  bytesToString,
+  bytesToUInt32,
+  getCryptoRandomBytesArray,
+  stringToBytes,
+  utf8Decode,
+  utf8Encode,
+} from '../../../../../src/core/types/string/bytes';
+
+describes.sandboxed('type helpers - strings - bytes', {}, () => {
+  describe('stringToBytes', function () {
+    let fakeWin;
+
+    beforeEach(() => {
+      fakeWin = {
+        crypto: {
+          getRandomValues: (array) => {
+            for (let i = 0; i < array.length; i++) {
+              array[i] = i + 1;
+            }
+          },
+        },
+      };
+    });
+
+    it('should map a sample string appropriately', () => {
+      const bytes = stringToBytes('abÿ');
+      expect(bytes.length).to.equal(3);
+      expect(bytes[0]).to.equal(97);
+      expect(bytes[1]).to.equal(98);
+      expect(bytes[2]).to.equal(255);
+    });
+
+    it('should signal an error with a character >255', () => {
+      allowConsoleError(() => {
+        expect(() => {
+          return stringToBytes('ab☺');
+        }).to.throw();
+      });
+    });
+
+    it('should convert bytes array to string', () => {
+      const str = bytesToString(new Uint8Array([102, 111, 111]));
+      expect(str).to.equal('foo');
+    });
+
+    it('should generate random bytes array when win.crypto is availble', () => {
+      expect(getCryptoRandomBytesArray(fakeWin, 1)).to.deep.equal(
+        new Uint8Array([1])
+      );
+      expect(getCryptoRandomBytesArray(fakeWin, 2)).to.deep.equal(
+        new Uint8Array([1, 2])
+      );
+      expect(getCryptoRandomBytesArray(fakeWin, 3)).to.deep.equal(
+        new Uint8Array([1, 2, 3])
+      );
+    });
+
+    it(
+      'should return null when trying to generate random bytes array if ' +
+        'win.crypto is not availble',
+      () => {
+        fakeWin.crypto = undefined;
+        expect(getCryptoRandomBytesArray(fakeWin, 1)).to.be.null;
+      }
+    );
+  });
+
+  describe('utf8', function () {
+    // Examples here courtesy of StackOverflow:
+    // http://stackoverflow.com/questions/478201/how-to-test-an-application-for
+    // -correct-encoding-e-g-utf-8
+
+    const strings = [
+      'ユーザー別サイト',
+      '简体中文',
+      '크로스플랫폼으로',
+      'מדוריםמבוקשים',
+      'أفضلالبحوث',
+      'Σὲγνωρίζωἀπὸ',
+      'ДесятуюМеждународную',
+      'แผ่นดินฮั่นเสื่อมโทรมแสนสังเวช',
+    ];
+
+    const bytes = [
+      [
+        0xe3, 0x83, 0xa6, 0xe3, 0x83, 0xbc, 0xe3, 0x82, 0xb6, 0xe3, 0x83, 0xbc,
+        0xe5, 0x88, 0xa5, 0xe3, 0x82, 0xb5, 0xe3, 0x82, 0xa4, 0xe3, 0x83, 0x88,
+      ],
+      [0xe7, 0xae, 0x80, 0xe4, 0xbd, 0x93, 0xe4, 0xb8, 0xad, 0xe6, 0x96, 0x87],
+      [
+        0xed, 0x81, 0xac, 0xeb, 0xa1, 0x9c, 0xec, 0x8a, 0xa4, 0xed, 0x94, 0x8c,
+        0xeb, 0x9e, 0xab, 0xed, 0x8f, 0xbc, 0xec, 0x9c, 0xbc, 0xeb, 0xa1, 0x9c,
+      ],
+      [
+        0xd7, 0x9e, 0xd7, 0x93, 0xd7, 0x95, 0xd7, 0xa8, 0xd7, 0x99, 0xd7, 0x9d,
+        0xd7, 0x9e, 0xd7, 0x91, 0xd7, 0x95, 0xd7, 0xa7, 0xd7, 0xa9, 0xd7, 0x99,
+        0xd7, 0x9d,
+      ],
+      [
+        0xd8, 0xa3, 0xd9, 0x81, 0xd8, 0xb6, 0xd9, 0x84, 0xd8, 0xa7, 0xd9, 0x84,
+        0xd8, 0xa8, 0xd8, 0xad, 0xd9, 0x88, 0xd8, 0xab,
+      ],
+      [
+        0xce, 0xa3, 0xe1, 0xbd, 0xb2, 0xce, 0xb3, 0xce, 0xbd, 0xcf, 0x89, 0xcf,
+        0x81, 0xce, 0xaf, 0xce, 0xb6, 0xcf, 0x89, 0xe1, 0xbc, 0x80, 0xcf, 0x80,
+        0xe1, 0xbd, 0xb8,
+      ],
+      [
+        0xd0, 0x94, 0xd0, 0xb5, 0xd1, 0x81, 0xd1, 0x8f, 0xd1, 0x82, 0xd1, 0x83,
+        0xd1, 0x8e, 0xd0, 0x9c, 0xd0, 0xb5, 0xd0, 0xb6, 0xd0, 0xb4, 0xd1, 0x83,
+        0xd0, 0xbd, 0xd0, 0xb0, 0xd1, 0x80, 0xd0, 0xbe, 0xd0, 0xb4, 0xd0, 0xbd,
+        0xd1, 0x83, 0xd1, 0x8e,
+      ],
+      [
+        0xe0, 0xb9, 0x81, 0xe0, 0xb8, 0x9c, 0xe0, 0xb9, 0x88, 0xe0, 0xb8, 0x99,
+        0xe0, 0xb8, 0x94, 0xe0, 0xb8, 0xb4, 0xe0, 0xb8, 0x99, 0xe0, 0xb8, 0xae,
+        0xe0, 0xb8, 0xb1, 0xe0, 0xb9, 0x88, 0xe0, 0xb8, 0x99, 0xe0, 0xb9, 0x80,
+        0xe0, 0xb8, 0xaa, 0xe0, 0xb8, 0xb7, 0xe0, 0xb9, 0x88, 0xe0, 0xb8, 0xad,
+        0xe0, 0xb8, 0xa1, 0xe0, 0xb9, 0x82, 0xe0, 0xb8, 0x97, 0xe0, 0xb8, 0xa3,
+        0xe0, 0xb8, 0xa1, 0xe0, 0xb9, 0x81, 0xe0, 0xb8, 0xaa, 0xe0, 0xb8, 0x99,
+        0xe0, 0xb8, 0xaa, 0xe0, 0xb8, 0xb1, 0xe0, 0xb8, 0x87, 0xe0, 0xb9, 0x80,
+        0xe0, 0xb8, 0xa7, 0xe0, 0xb8, 0x8a,
+      ],
+    ];
+
+    it('should encode given string into utf-8 byte array', () => {
+      for (let i = 0; i < strings.length; i++) {
+        expect(utf8Encode(strings[i])).to.deep.equal(new Uint8Array(bytes[i]));
+      }
+    });
+
+    it('should decode given utf-8 bytes into string', () => {
+      for (let i = 0; i < bytes.length; i++) {
+        expect(utf8Decode(new Uint8Array(bytes[i]))).to.equal(strings[i]);
+      }
+    });
+  });
+
+  describe('bytesToUInt32', function () {
+    it('should convert Uint8Arrays into unsigned 32-bit integers', () => {
+      expect(bytesToUInt32(new Uint8Array([0xff, 0xff, 0xff, 0xff]))).to.equal(
+        0xffffffff
+      );
+      expect(bytesToUInt32(new Uint8Array([0xde, 0xad, 0xbe, 0xef]))).to.equal(
+        0xdeadbeef
+      );
+      expect(bytesToUInt32(new Uint8Array([0x47, 0x47, 0x47, 0x47]))).to.equal(
+        0x47474747
+      );
+      expect(bytesToUInt32(new Uint8Array([0x00, 0x00, 0x00, 0x00]))).to.equal(
+        0x00000000
+      );
+    });
+  });
+});
diff --git a/test/unit/core/types/string/test-string.js b/test/unit/core/types/string/test-string.js
new file mode 100644
index 0000000000000..5740f744352c4
--- /dev/null
+++ b/test/unit/core/types/string/test-string.js
@@ -0,0 +1,265 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import {
+  asyncStringReplace,
+  camelCaseToDash,
+  dashToCamelCase,
+  endsWith,
+  expandTemplate,
+  includes,
+  isString,
+  padStart,
+  trimEnd,
+} from '../../../../../src/core/types/string';
+
+describes.sandboxed('type helpers - strings', {}, () => {
+  describe('dashToCamelCase', () => {
+    it('should transform dashes to camel case.', () => {
+      expect(dashToCamelCase('foo')).to.equal('foo');
+      expect(dashToCamelCase('foo-bar')).to.equal('fooBar');
+      expect(dashToCamelCase('foo-bar-baz')).to.equal('fooBarBaz');
+      expect(dashToCamelCase('-foo')).to.equal('Foo');
+    });
+  });
+
+  describe('endsWith', () => {
+    it('should determine whether string ends with.', () => {
+      expect(endsWith('a', 'a')).to.be.true;
+      expect(endsWith('b', 'a')).to.be.false;
+      expect(endsWith('ab', 'a')).to.be.false;
+      expect(endsWith('aba', 'a')).to.be.true;
+      expect(endsWith('aba', 'aba')).to.be.true;
+      expect(endsWith('Xaba', 'aba')).to.be.true;
+      expect(endsWith('Xaba', '')).to.be.true;
+      expect(endsWith('', 'a')).to.be.false;
+      expect(endsWith('aa', 'aaa')).to.be.false;
+      expect(endsWith('aa', 'aaaa')).to.be.false;
+      expect(endsWith('', '')).to.be.true;
+    });
+  });
+
+  describe('includes', () => {
+    it('should determine whether string includes.', () => {
+      expect(includes('a', 'a')).to.be.true;
+      expect(includes('a', 'a', 0)).to.be.true;
+      expect(includes('a', 'a', 1)).to.be.false;
+      expect(includes('b', 'a')).to.be.false;
+      expect(includes('ab', 'a')).to.be.true;
+      expect(includes('aba', 'a')).to.be.true;
+      expect(includes('aba', 'aba')).to.be.true;
+      expect(includes('Xaba', 'aba')).to.be.true;
+      expect(includes('Xaba', '')).to.be.true;
+      expect(includes('', 'a')).to.be.false;
+      expect(includes('aa', 'aaa')).to.be.false;
+      expect(includes('aa', 'aaaa')).to.be.false;
+      expect(includes('', '')).to.be.true;
+    });
+  });
+
+  describe('expandTemplate', () => {
+    const data = {
+      'x': 'Test 1',
+      'y': 'Test 2',
+      'test': 'test value',
+      'test2': 'another test value',
+      'tox': '${x}',
+      'toy': '${y}',
+      'toxy': '${x}${y}',
+      'totoxy': '${toxy}',
+      'loop1': '${loop2}',
+      'loop2': '${loop1}',
+      'loop': '${loop}',
+    };
+
+    function testGetter(key) {
+      return data[key] || 'not found';
+    }
+
+    it('should replace place holders with values.', () => {
+      expect(expandTemplate('${x}', testGetter)).to.equal('Test 1');
+      expect(expandTemplate('${y}', testGetter)).to.equal('Test 2');
+      expect(expandTemplate('${x} ${y}', testGetter)).to.equal('Test 1 Test 2');
+      expect(expandTemplate('a${x}', testGetter)).to.equal('aTest 1');
+      expect(expandTemplate('${x}a', testGetter)).to.equal('Test 1a');
+      expect(expandTemplate('a${x}a', testGetter)).to.equal('aTest 1a');
+      expect(expandTemplate('${unknown}', testGetter)).to.equal('not found');
+    });
+
+    it('should handle malformed place holders.', () => {
+      expect(expandTemplate('${x', testGetter)).to.equal('${x');
+      expect(expandTemplate('${', testGetter)).to.equal('${');
+      expect(expandTemplate('$x}', testGetter)).to.equal('$x}');
+      expect(expandTemplate('$x', testGetter)).to.equal('$x');
+      expect(expandTemplate('{x}', testGetter)).to.equal('{x}');
+      expect(expandTemplate('${{x}', testGetter)).to.equal('not found');
+    });
+
+    it('should default to one iteration.', () => {
+      expect(expandTemplate('${tox}', testGetter)).to.equal('${x}');
+      expect(expandTemplate('${toxy}', testGetter)).to.equal('${x}${y}');
+    });
+
+    it('should handle multiple iterations when asked to.', () => {
+      expect(expandTemplate('${tox}', testGetter, 2)).to.equal('Test 1');
+      expect(expandTemplate('${toxy}', testGetter, 2)).to.equal('Test 1Test 2');
+      expect(expandTemplate('${totoxy}', testGetter, 2)).to.equal('${x}${y}');
+      expect(expandTemplate('${totoxy}', testGetter, 3)).to.equal(
+        'Test 1Test 2'
+      );
+      expect(expandTemplate('${totoxy}', testGetter, 10)).to.equal(
+        'Test 1Test 2'
+      );
+    });
+
+    it('should handle circular expansions without hanging', () => {
+      expect(expandTemplate('${loop}', testGetter)).to.equal('${loop}');
+      expect(expandTemplate('${loop}', testGetter), 10).to.equal('${loop}');
+      expect(expandTemplate('${loop1}', testGetter), 10).to.equal('${loop2}');
+    });
+  });
+
+  describe('camelCaseToDash', () => {
+    it('should convert camelCase strings to dash-case strings', () => {
+      expect(camelCaseToDash('foo')).to.equal('foo');
+      expect(camelCaseToDash('fooBar')).to.equal('foo-bar');
+      expect(camelCaseToDash('fooBarBaz')).to.equal('foo-bar-baz');
+      // Not really valid camel case
+      expect(camelCaseToDash('FooBarBaz')).to.equal('Foo-bar-baz');
+      expect(camelCaseToDash('f00B4rB4z')).to.equal('f00-b4r-b4z');
+      expect(camelCaseToDash('f00b4rb4z')).to.equal('f00b4rb4z');
+      expect(camelCaseToDash('ABC')).to.equal('A-b-c');
+      expect(camelCaseToDash('aBC')).to.equal('a-b-c');
+    });
+  });
+
+  describe('trimEnd', () => {
+    it('remove trailing spaces', () => {
+      expect(trimEnd('abc ')).to.equal('abc');
+    });
+
+    it('remove trailing whitespace characters', () => {
+      expect(trimEnd('abc\n\t')).to.equal('abc');
+    });
+
+    it('should keep leading spaces', () => {
+      expect(trimEnd(' abc')).to.equal(' abc');
+    });
+
+    it('should keep leading whitespace characters', () => {
+      expect(trimEnd('\n\tabc')).to.equal('\n\tabc');
+    });
+  });
+
+  describe('asyncStringReplace', () => {
+    it('should not replace with no match', () => {
+      const result = asyncStringReplace('the quick silver fox', /brown/, 'red');
+      return expect(result).to.eventually.equal('the quick silver fox');
+    });
+
+    it('should replace with string as callback', () => {
+      const result = asyncStringReplace('the quick brown fox', /brown/, 'red');
+      return expect(result).to.eventually.equal('the quick red fox');
+    });
+
+    it('should use replacer with special pattern', async () => {
+      await expect(
+        asyncStringReplace('the quick brown fox', /brown/, '$$')
+      ).to.eventually.equal('the quick $ fox');
+      await expect(
+        asyncStringReplace('the quick brown fox', /brown/, 'purple $& grey')
+      ).to.eventually.equal('the quick purple brown grey fox');
+      await expect(
+        asyncStringReplace('the quick brown fox', /brown/, "sweet $'")
+      ).to.eventually.equal('the quick sweet  fox fox');
+      await expect(
+        asyncStringReplace('the quick brown fox', /brown/, '$`empathetic')
+      ).to.eventually.equal('the quick the quick empathetic fox');
+    });
+
+    it('should replace with sync function as callback', () => {
+      const result = asyncStringReplace(
+        'the quick brown fox',
+        /brown/,
+        () => 'red'
+      );
+      return expect(result).to.eventually.equal('the quick red fox');
+    });
+
+    it('should replace with no capture groups', () => {
+      const result = asyncStringReplace('the quick brown fox', /brown/, () =>
+        Promise.resolve('red')
+      );
+      return expect(result).to.eventually.equal('the quick red fox');
+    });
+
+    it('should replace with one capture group', () => {
+      const result = asyncStringReplace('item 798', /item (\d*)/, (match, p1) =>
+        Promise.resolve(p1)
+      );
+      return expect(result).to.eventually.equal('798');
+    });
+
+    it('should replace with two capture groups', () => {
+      const result = asyncStringReplace(
+        'John Smith',
+        /(\w+)\s(\w+)/,
+        (match, p1, p2) => Promise.resolve(`${p2}, ${p1}`)
+      );
+      return expect(result).to.eventually.equal('Smith, John');
+    });
+
+    it('should replace twice', () => {
+      const result = asyncStringReplace(
+        'John 123 Smith 456 III',
+        /(\d+)/g,
+        () => Promise.resolve('**')
+      );
+      return expect(result).to.eventually.equal('John ** Smith ** III');
+    });
+  });
+
+  describe('padStart', () => {
+    it('should pad string to target length', () => {
+      expect(padStart('abc', 4, ' ')).to.equal(' abc');
+      expect(padStart('abc', 8, ' ')).to.equal('     abc');
+    });
+
+    it('should trim padString if necessary to fit target length', () => {
+      expect(padStart('abc', 4, 'xy')).to.equal('xabc');
+      expect(padStart('abc', 6, 'xy')).to.equal('xyxabc');
+    });
+
+    it('should return original string if equal or greater than target length', () => {
+      expect(padStart('abc', 3, ' ')).to.equal('abc');
+      expect(padStart('abc', 0, ' ')).to.equal('abc');
+    });
+  });
+
+  describe('isString', () => {
+    it('returns true for strings', () => {
+      ['hello', '', `template ${1}`].forEach(
+        (s) => expect(isString(s)).to.be.true
+      );
+    });
+
+    it('returns true for anything else', () => {
+      [[], {}, true, -1, null, undefined, function () {}].forEach(
+        (s) => expect(isString(s)).to.be.false
+      );
+    });
+  });
+});
diff --git a/test/unit/core/types/string/test-url.js b/test/unit/core/types/string/test-url.js
new file mode 100644
index 0000000000000..173f77976c5f1
--- /dev/null
+++ b/test/unit/core/types/string/test-url.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {parseQueryString} from '../../../../../src/core/types/string/url';
+
+describes.sandboxed('type helpers - strings - urls', {}, () => {
+  describe('parseQueryString', () => {
+    it('should return empty params when query string is empty or null', () => {
+      expect(parseQueryString(null)).to.deep.equal({});
+      expect(parseQueryString('')).to.deep.equal({});
+    });
+    it('should parse single key-value', () => {
+      expect(parseQueryString('a=1')).to.deep.equal({
+        'a': '1',
+      });
+    });
+    it('should parse two key-values', () => {
+      expect(parseQueryString('a=1&b=2')).to.deep.equal({
+        'a': '1',
+        'b': '2',
+      });
+    });
+    it('should ignore leading ?', () => {
+      expect(parseQueryString('?a=1&b=2')).to.deep.equal({
+        'a': '1',
+        'b': '2',
+      });
+    });
+    it('should ignore leading #', () => {
+      expect(parseQueryString('#a=1&b=2')).to.deep.equal({
+        'a': '1',
+        'b': '2',
+      });
+    });
+    it('should parse empty value', () => {
+      expect(parseQueryString('a=&b=2')).to.deep.equal({
+        'a': '',
+        'b': '2',
+      });
+      expect(parseQueryString('a&b=2')).to.deep.equal({
+        'a': '',
+        'b': '2',
+      });
+    });
+    it('should decode names and values', () => {
+      expect(parseQueryString('a%26=1%26&b=2')).to.deep.equal({
+        'a&': '1&',
+        'b': '2',
+      });
+    });
+    it('should return last dupe', () => {
+      expect(parseQueryString('a=1&b=2&a=3')).to.deep.equal({
+        'a': '3',
+        'b': '2',
+      });
+    });
+  });
+});
diff --git a/test/unit/core/types/test-array.js b/test/unit/core/types/test-array.js
new file mode 100644
index 0000000000000..89d6f601f77ad
--- /dev/null
+++ b/test/unit/core/types/test-array.js
@@ -0,0 +1,243 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {
+  areEqualOrdered,
+  arrayOrSingleItemToArray,
+  findIndex,
+  fromIterator,
+  pushIfNotExist,
+  remove,
+  toArray,
+} from '../../../../src/core/types/array';
+
+describes.sandboxed('type helpers - arrays', {}, () => {
+  describe('toArray', () => {
+    it('should return empty array if null is passed', () => {
+      expect(toArray(null).length).to.equal(0);
+      expect(toArray(undefined).length).to.equal(0);
+    });
+
+    it('should convert NodeList to array', () => {
+      const parent = document.createElement('div');
+      parent.appendChild(document.createElement('p'));
+      parent.appendChild(document.createElement('span'));
+      parent.appendChild(document.createElement('div'));
+      const arr = toArray(parent.childNodes);
+      expect(arr[0]).to.equal(parent.childNodes[0]);
+      expect(arr.length).to.equal(3);
+      expect(Array.isArray(arr)).to.be.true;
+    });
+
+    it('should convert HTMLCollection to array', () => {
+      const parent = document.createElement('div');
+      parent.appendChild(document.createElement('form'));
+      parent.appendChild(document.createElement('form'));
+      document.body.appendChild(parent);
+      const arr = toArray(document.forms);
+      expect(arr[0]).to.equal(document.forms[0]);
+      expect(arr.length).to.equal(2);
+      expect(Array.isArray(arr)).to.be.true;
+      document.body.removeChild(parent);
+    });
+
+    it('should convert HTMLOptionsCollection to array', () => {
+      const parent = document.createElement('select');
+      parent.appendChild(document.createElement('option'));
+      parent.appendChild(document.createElement('option'));
+      parent.appendChild(document.createElement('option'));
+      parent.appendChild(document.createElement('option'));
+      const arr = toArray(parent.options);
+      expect(arr[0]).to.equal(parent.options[0]);
+      expect(arr.length).to.equal(4);
+      expect(Array.isArray(arr)).to.be.true;
+    });
+  });
+
+  describe('arrayOrSingleItemToArray', () => {
+    it('should return empty array for an empty array', () => {
+      const input = [];
+      const result = arrayOrSingleItemToArray(input);
+      expect(result).to.deep.equal([]);
+      expect(result).to.equal(input);
+    });
+
+    it('should return the array array as specified', () => {
+      const input = [1, 2, 3];
+      const result = arrayOrSingleItemToArray(input);
+      expect(result).to.deep.equal([1, 2, 3]);
+      expect(result).to.equal(input);
+    });
+
+    it('should return the item as an array', () => {
+      const result = arrayOrSingleItemToArray(1);
+      expect(result).to.deep.equal([1]);
+    });
+
+    it('should return a null as an array', () => {
+      const result = arrayOrSingleItemToArray(null);
+      expect(result).to.deep.equal([null]);
+    });
+  });
+
+  describe('areEqualOrdered', function () {
+    it('should return true on empty arrays', () => {
+      const result = areEqualOrdered([], []);
+      expect(result).to.be.true;
+    });
+
+    it('should return true on same array with primitive types of same seq', () => {
+      const result = areEqualOrdered(
+        [1, 'string', true, undefined, null],
+        [1, 'string', true, undefined, null]
+      );
+      expect(result).to.be.true;
+    });
+
+    it('should return true on same array with objects of same seq', () => {
+      const o1 = {a: 1};
+      const o2 = () => {
+        return 'arrow func';
+      };
+      const o3 = new Function('whatever');
+      const o4 = {};
+      const o5 = [];
+      const result = areEqualOrdered(
+        [o1, o2, o3, o4, o5],
+        [o1, o2, o3, o4, o5]
+      );
+      expect(result).to.be.true;
+    });
+
+    it('should return false on same array with primitive types of different seq', () => {
+      const result = areEqualOrdered(
+        [null, true, 'string', undefined, 1],
+        [1, 'string', true, undefined, null]
+      );
+      expect(result).to.be.false;
+    });
+
+    it('should return false on same array with objects of different seq', () => {
+      const o1 = {a: 1};
+      const o2 = () => {
+        return 'arrow func';
+      };
+      const o3 = new Function('whatever');
+      const o4 = {};
+      const o5 = [];
+      const result = areEqualOrdered(
+        [o4, o5, o3, o2, o1],
+        [o1, o2, o3, o4, o5]
+      );
+      expect(result).to.be.false;
+    });
+
+    it('should return false on array of different length', () => {
+      const result = areEqualOrdered([1, 2, 3], [1, 2, 3, 3]);
+      expect(result).to.be.false;
+    });
+  });
+
+  describe('remove', function () {
+    let array;
+    beforeEach(() => {
+      array = [1, 2, 3, 4, 5];
+    });
+
+    it('should remove elements that return true', () => {
+      const removed = remove(array, (i) => i > 2);
+      expect(array).to.deep.equal([1, 2]);
+      expect(removed).to.deep.equal([3, 4, 5]);
+    });
+
+    it('handles no removals', () => {
+      const removed = remove(array, () => false);
+      expect(array).to.deep.equal([1, 2, 3, 4, 5]);
+      expect(removed).to.deep.equal([]);
+    });
+
+    it('handles consecutive removals', () => {
+      const removed = remove(array, () => true);
+      expect(array).to.deep.equal([]);
+      expect(removed).to.deep.equal([1, 2, 3, 4, 5]);
+    });
+  });
+
+  describe('findIndex', function () {
+    it('should return the index of first matching element', () => {
+      const found = findIndex([4, 1, 5, 3, 4, 5], (element) => element > 4);
+      expect(found).to.equal(2);
+    });
+
+    it('should return -1 if no matching element', () => {
+      const found = findIndex([4, 1, 5, 3, 4, 5], (element) => element > 5);
+      expect(found).to.equal(-1);
+    });
+
+    it('should pass index as the 2nd param to the predicate function', () => {
+      const found = findIndex([0, 0, 0, 0, 0, 0], (element, i) => {
+        return i == 4;
+      });
+      expect(found).to.equal(4);
+    });
+
+    it('should pass the original array as the 3rd param to the predicate', () => {
+      findIndex([1, 2, 3], (element, i, array) => {
+        expect(array).to.deep.equal([1, 2, 3]);
+      });
+    });
+  });
+
+  describe('fromIterator', function () {
+    it('should return empty array for empty iterator', () => {
+      const iterator = {
+        next() {
+          return {value: undefined, done: true};
+        },
+      };
+
+      expect(fromIterator(iterator)).to.be.an('array').that.is.empty;
+    });
+
+    it('should return non-empty array for non-empty iterator', () => {
+      let index = 0;
+      const iterator = {
+        next() {
+          return index < 3
+            ? {value: index++ * 2, done: false}
+            : {value: undefined, done: true};
+        },
+      };
+
+      expect(fromIterator(iterator)).to.deep.equal([0, 2, 4]);
+    });
+  });
+
+  describe('pushIfNotExist', () => {
+    it('should push element', () => {
+      const array = [1, 2, 3, 4];
+      pushIfNotExist(array, 5);
+      expect(array).to.deep.equal([1, 2, 3, 4, 5]);
+      pushIfNotExist(array, 2.3);
+      expect(array).to.deep.equal([1, 2, 3, 4, 5, 2.3]);
+    });
+    it('should not push element', () => {
+      const array = [1, 2, 3, 4];
+      pushIfNotExist(array, 1);
+      expect(array).to.deep.equal([1, 2, 3, 4]);
+    });
+  });
+});
diff --git a/test/unit/core/types/test-date.js b/test/unit/core/types/test-date.js
new file mode 100644
index 0000000000000..58361a74c1dae
--- /dev/null
+++ b/test/unit/core/types/test-date.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {getDate, parseDate} from '../../../../src/core/types/date';
+
+describes.sandboxed('type helpers - dates', {}, (env) => {
+  describe('parseDate', () => {
+    beforeEach(() => {
+      env.sandbox.useFakeTimers(new Date('2018-01-01T08:00:00Z'));
+    });
+
+    it('should return null for empty values', () => {
+      expect(parseDate(null)).to.be.null;
+      expect(parseDate(undefined)).to.be.null;
+      expect(parseDate('')).to.be.null;
+    });
+
+    it('should return null for invalid values', () => {
+      expect(parseDate('abc')).to.be.null;
+    });
+
+    it('should return current date for "now"', () => {
+      expect(parseDate('now')).to.equal(Date.now());
+    });
+
+    it('should parse a date', () => {
+      // +1 second.
+      expect(parseDate('2018-01-01T08:00:01Z')).to.equal(Date.now() + 1000);
+    });
+  });
+
+  describe('getDate', () => {
+    let date;
+
+    beforeEach(() => {
+      date = new Date(parseDate('2018-01-01T08:00:01Z'));
+    });
+
+    it('should return null for null input', () => {
+      expect(getDate(null)).to.be.null;
+      expect(getDate(0)).to.be.null;
+      expect(getDate('')).to.be.null;
+      expect(getDate(undefined)).to.be.null;
+      expect(getDate(NaN)).to.be.null;
+    });
+
+    it('should return the value from Date and number types', () => {
+      expect(getDate(date)).to.equal(date.getTime());
+      expect(getDate(date.getTime())).to.equal(date.getTime());
+    });
+
+    it('should parse a string value', () => {
+      expect(getDate(date.toISOString())).to.equal(date.getTime());
+    });
+
+    it('should parse a "now" keywrod', () => {
+      env.sandbox.useFakeTimers(date);
+      expect(getDate('now')).to.be.equal(date.getTime());
+    });
+  });
+});
diff --git a/test/unit/core/types/test-enum.js b/test/unit/core/types/test-enum.js
new file mode 100644
index 0000000000000..731f614c9ac24
--- /dev/null
+++ b/test/unit/core/types/test-enum.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2021 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.
+ */
+import {isEnumValue} from '../../../../src/core/types/enum';
+
+describes.sandboxed('type helpers - enums', {}, () => {
+  describe('isEnumValue', () => {
+    /** @enum {string} */
+    const enumObj = {
+      X: 'x',
+      Y: 'y',
+      Z: 'z',
+    };
+
+    it('should return true for valid enum values', () => {
+      ['x', 'y', 'z'].forEach((value) => {
+        expect(isEnumValue(enumObj, value), 'enum value = ' + value).to.be.true;
+      });
+    });
+
+    it('should return false for non-enum values', () => {
+      [
+        'a',
+        'X',
+        'Z',
+        {'x': 'x'},
+        ['y'],
+        null,
+        undefined,
+        [],
+        /x/,
+        /y/,
+        42,
+      ].forEach((value) => {
+        expect(isEnumValue(enumObj, value), 'enum value = ' + value).to.be
+          .false;
+      });
+    });
+  });
+});
diff --git a/test/unit/core/types/test-types.js b/test/unit/core/types/test-types.js
new file mode 100644
index 0000000000000..8095e08f0e394
--- /dev/null
+++ b/test/unit/core/types/test-types.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {isFiniteNumber} from '../../../../src/core/types';
+
+describes.sandboxed('type helpers', {}, () => {
+  describe('isFiniteNumber', () => {
+    it('should yield false for non-numbers', () => {
+      expect(isFiniteNumber(null)).to.be.false;
+      expect(isFiniteNumber(undefined)).to.be.false;
+      expect(isFiniteNumber('')).to.be.false;
+      expect(isFiniteNumber('2')).to.be.false;
+      expect(isFiniteNumber([])).to.be.false;
+      expect(isFiniteNumber([2])).to.be.false;
+      expect(isFiniteNumber({})).to.be.false;
+      expect(isFiniteNumber({'a': 2})).to.be.false;
+      expect(isFiniteNumber(true)).to.be.false;
+      expect(isFiniteNumber(NaN)).to.be.false;
+    });
+
+    it('should yield true for numbers', () => {
+      expect(isFiniteNumber(3)).to.be.true;
+      expect(isFiniteNumber(3.2)).to.be.true;
+      expect(isFiniteNumber(123e5)).to.be.true;
+    });
+  });
+});
diff --git a/test/unit/inabox/test-inabox-messaging-host.js b/test/unit/inabox/test-inabox-messaging-host.js
index 0fe6a31031de7..4abdc6aaa49e2 100644
--- a/test/unit/inabox/test-inabox-messaging-host.js
+++ b/test/unit/inabox/test-inabox-messaging-host.js
@@ -16,7 +16,7 @@
 
 import {InaboxMessagingHost} from '../../../ads/inabox/inabox-messaging-host';
 import {deserializeMessage} from '../../../src/3p-frame-messaging';
-import {layoutRectLtwh} from '../../../src/layout-rect';
+import {layoutRectLtwh} from '../../../src/core/math/layout-rect';
 
 describes.realWin('inabox-host:messaging', {}, (env) => {
   let win;
@@ -327,7 +327,8 @@ describes.realWin('inabox-host:messaging', {}, (env) => {
     let iframePostMessageSpy;
 
     beforeEach(() => {
-      iframe1.contentWindow.postMessage = iframePostMessageSpy = env.sandbox.stub();
+      iframe1.contentWindow.postMessage = iframePostMessageSpy =
+        env.sandbox.stub();
     });
 
     it('should accept request and expand', () => {
@@ -441,7 +442,8 @@ describes.realWin('inabox-host:messaging', {}, (env) => {
     it('should return correct frame when many iframes at same level', () => {
       const {source} = createNestedIframeMocks(6, 3);
       const expectedMeasureableWin = source.parent.parent;
-      const correctFrame = expectedMeasureableWin.parent.document.querySelectorAll()[0];
+      const correctFrame =
+        expectedMeasureableWin.parent.document.querySelectorAll()[0];
       expectedMeasureableWin.parent.document.querySelectorAll = () => {
         const f1 = {};
         const f2 = {};
diff --git a/test/unit/inabox/test-inabox-resources.js b/test/unit/inabox/test-inabox-resources.js
index 6ddce9a684ab5..94f5d33a74440 100644
--- a/test/unit/inabox/test-inabox-resources.js
+++ b/test/unit/inabox/test-inabox-resources.js
@@ -13,7 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {InaboxResources} from '../../../src/inabox/inabox-resources';
+import {ResourceState} from '../../../src/service/resource';
+import {macroTask} from '../../../testing/yield';
+import {toggleExperiment} from '../../../src/experiments';
 
 describes.realWin('inabox-resources', {amp: true}, (env) => {
   let win;
@@ -73,71 +77,115 @@ describes.realWin('inabox-resources', {amp: true}, (env) => {
     await env.ampdoc.whenReady();
     expect(buildStub).to.be.calledOnce;
     await new Promise(setTimeout);
-    expect(schedulePassSpy).to.not.be.called;
+    schedulePassSpy.resetHistory();
     resolveBuild();
     await new Promise(setTimeout);
     expect(schedulePassSpy).to.be.calledOnce;
   });
 
-  it('observes element intersections for those opted in', () => {
-    const observe = env.sandbox.spy();
-    win.IntersectionObserver = () => ({observe});
+  it('eagerly builds amp elements', async () => {
+    toggleExperiment(win, 'inabox-resources-eager', true);
+    const readySignal = new Deferred();
+    env.sandbox.stub(env.ampdoc, 'whenReady').returns(readySignal.promise);
+    resources = new InaboxResources(env.ampdoc);
 
-    const element = env.createAmpElement('amp-carousel');
-    resources.add(element);
+    const element1 = env.createAmpElement('amp-one');
+    resources.add(element1);
+    const resource1 = resources.getResourceForElement(element1);
+    const build1 = env.sandbox.stub(resource1, 'build').resolves();
+    win.document.body.appendChild(element1);
 
-    expect(observe.withArgs(element)).to.have.been.calledOnce;
-  });
+    resources.upgraded(element1);
+    expect(build1).not.to.be.called;
 
-  it('unobserves element intersections when removed', () => {
-    const unobserve = env.sandbox.spy();
-    win.IntersectionObserver = () => ({observe: () => {}, unobserve});
+    const element2 = env.createAmpElement('amp-two');
+    resources.add(element2);
+    const resource2 = resources.getResourceForElement(element2);
+    const build2 = env.sandbox.stub(resource2, 'build').resolves();
+    win.document.body.appendChild(element2);
 
-    const element = env.createAmpElement('amp-carousel');
-    resources.add(element);
-    resources.remove(element);
+    resources.upgraded(element2);
+    expect(build1).to.be.called;
+    expect(build2).not.to.be.called;
 
-    expect(unobserve.withArgs(element)).to.have.been.calledOnce;
+    readySignal.resolve();
+    await macroTask();
+    expect(build2).to.be.called;
   });
 
-  it('does not observe element intersections for those not opted in', () => {
-    const observe = env.sandbox.spy();
-    win.IntersectionObserver = () => ({observe});
+  it('should pause and resume resources on doc visibility', () => {
+    const element1 = env.createAmpElement('amp-foo');
+    const element2 = env.createAmpElement('amp-bar');
+    resources.add(element1);
+    resources.add(element2);
+
+    env.sandbox.stub(element1, 'pause');
+    env.sandbox.stub(element1, 'resume');
+    env.sandbox.stub(element2, 'pause');
+    env.sandbox.stub(element2, 'resume');
 
-    const element = env.createAmpElement('amp-foo');
-    resources.add(element);
+    env.ampdoc.overrideVisibilityState('paused');
+    expect(element1.pause).to.be.calledOnce;
+    expect(element2.pause).to.be.calledOnce;
 
-    expect(observe.withArgs(element)).to.not.have.been.called;
+    env.ampdoc.overrideVisibilityState('visible');
+    expect(element1.resume).to.be.calledOnce;
+    expect(element2.resume).to.be.calledOnce;
   });
 
-  it('triggers viewportCallback on intersection for those opted in', () => {
-    let definedCallback;
-    win.IntersectionObserver = (callback, unusedOptions) => {
-      definedCallback = callback;
-      return {observe: () => {}};
-    };
+  it('should unload all resources on dispose', async () => {
+    const element1 = env.createAmpElement('amp-foo');
+    const element2 = env.createAmpElement('amp-bar');
+    resources.add(element1);
+    resources.add(element2);
 
-    const element1 = env.createAmpElement('amp-carousel');
-    element1.viewportCallback = env.sandbox.spy();
+    const resource1 = resources.get()[0];
+    const resource2 = resources.get()[1];
+    env.sandbox.stub(resource1, 'unload');
+    env.sandbox.stub(resource2, 'unload');
 
-    const element2 = env.createAmpElement('amp-carousel');
-    element2.viewportCallback = env.sandbox.spy();
+    resources.dispose();
+    expect(resource1.unload).to.be.calledOnce;
+    expect(resource2.unload).to.be.calledOnce;
+  });
 
-    const element3 = env.createAmpElement('amp-carousel');
-    element3.viewportCallback = env.sandbox.spy();
+  it('should ignore R1 resources for layout pass', async () => {
+    const element1 = env.createAmpElement('amp-foo');
+    const element2 = env.createAmpElement('amp-bar');
+    env.sandbox.stub(element2, 'R1').returns(true);
 
+    win.document.body.appendChild(element1);
+    win.document.body.appendChild(element2);
     resources.add(element1);
     resources.add(element2);
-    resources.add(element3);
 
-    definedCallback([
-      {target: element1, isIntersecting: true},
-      {target: element2, isIntersecting: false},
-      {target: element3, isIntersecting: false},
-    ]);
+    const resource1 = resources.get()[0];
+    const resource2 = resources.get()[1];
+    env.sandbox.stub(resource1, 'measure');
+    env.sandbox.stub(resource2, 'measure');
+    env.sandbox.stub(resource1, 'startLayout');
+    env.sandbox.stub(resource2, 'startLayout');
+
+    env.sandbox.stub(resource1, 'build').resolves();
+    env.sandbox.stub(resource2, 'build').resolves();
+    env.sandbox
+      .stub(resource1, 'getState')
+      .returns(ResourceState.READY_FOR_LAYOUT);
+    env.sandbox
+      .stub(resource2, 'getState')
+      .returns(ResourceState.READY_FOR_LAYOUT);
+    env.sandbox.stub(resource1, 'isDisplayed').returns(true);
+    env.sandbox.stub(resource2, 'isDisplayed').returns(true);
+    resources.upgraded(element1);
+
+    resources.schedulePass(0);
+    await new Promise(setTimeout);
+    await new Promise(setTimeout);
+
+    expect(resource1.measure).to.be.called;
+    expect(resource2.measure).to.not.be.called;
 
-    expect(element1.viewportCallback.withArgs(true)).to.have.been.calledOnce;
-    expect(element2.viewportCallback.withArgs(false)).to.have.been.calledOnce;
-    expect(element3.viewportCallback.withArgs(false)).to.have.been.calledOnce;
+    expect(resource1.startLayout).to.be.called;
+    expect(resource2.startLayout).to.not.be.called;
   });
 });
diff --git a/test/unit/inabox/test-inabox-viewport.js b/test/unit/inabox/test-inabox-viewport.js
index b51df78489fe1..bcdc3ca8204d1 100644
--- a/test/unit/inabox/test-inabox-viewport.js
+++ b/test/unit/inabox/test-inabox-viewport.js
@@ -16,7 +16,7 @@
 
 import * as iframeHelper from '../../../src/iframe-helper';
 import {FrameOverlayManager} from '../../../ads/inabox/frame-overlay-manager';
-import {Observable} from '../../../src/observable';
+import {Observable} from '../../../src/core/data-structures/observable';
 import {PositionObserver} from '../../../ads/inabox/position-observer';
 import {Services} from '../../../src/services';
 import {
@@ -26,7 +26,7 @@ import {
 } from '../../../src/inabox/inabox-viewport';
 import {installIframeMessagingClient} from '../../../src/inabox/inabox-iframe-messaging-client';
 import {installPlatformService} from '../../../src/service/platform-impl';
-import {layoutRectLtwh} from '../../../src/layout-rect';
+import {layoutRectLtwh} from '../../../src/core/math/layout-rect';
 
 const NOOP = () => {};
 
diff --git a/test/unit/inabox/test-position-observer.js b/test/unit/inabox/test-position-observer.js
index 3889c1c4339bc..48368e68c8a91 100644
--- a/test/unit/inabox/test-position-observer.js
+++ b/test/unit/inabox/test-position-observer.js
@@ -18,7 +18,7 @@ import {
   PositionObserver,
   getPositionObserver,
 } from '../../../ads/inabox/position-observer';
-import {layoutRectLtwh} from '../../../src/layout-rect';
+import {layoutRectLtwh} from '../../../src/core/math/layout-rect';
 
 describes.realWin('inabox-host:position-observer', {}, (env) => {
   let win;
diff --git a/test/unit/inabox/test-utils.js b/test/unit/inabox/test-utils.js
index 2214ceaa72d7c..a9b18a10704d4 100644
--- a/test/unit/inabox/test-utils.js
+++ b/test/unit/inabox/test-utils.js
@@ -15,7 +15,7 @@
  */
 
 import * as IniLoad from '../../../src/ini-load';
-import {Deferred} from '../../../src/utils/promise';
+import {Deferred} from '../../../src/core/data-structures/promise';
 import {Services} from '../../../src/services';
 import {createElementWithAttributes} from '../../../src/dom.js';
 import {getA4AId, registerIniLoadListener} from '../../../src/inabox/utils';
diff --git a/test/unit/polyfills/test-abort-controller.js b/test/unit/polyfills/test-abort-controller.js
new file mode 100644
index 0000000000000..79502fde1aa66
--- /dev/null
+++ b/test/unit/polyfills/test-abort-controller.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {install} from '../../../src/polyfills/abort-controller';
+
+describes.realWin('AbortController', {}, (env) => {
+  let win;
+  let controller, signal;
+
+  beforeEach(() => {
+    win = env.win;
+
+    delete win.AbortController;
+    delete win.AbortSignal;
+    install(win);
+
+    controller = new win.AbortController();
+    signal = controller.signal;
+  });
+
+  it('should create AbortController and signal', () => {
+    expect(signal).to.exist;
+    expect(signal.aborted).to.be.false;
+    expect(signal.onabort).to.be.null;
+  });
+
+  it('should abort signal without listener', () => {
+    controller.abort();
+    expect(signal.aborted).to.be.true;
+  });
+
+  it('should abort signal with listener', () => {
+    const spy = env.sandbox.spy();
+    signal.onabort = spy;
+    expect(signal.onabort).to.equal(spy);
+
+    controller.abort();
+    expect(signal.aborted).to.be.true;
+    expect(spy).to.be.calledOnce;
+    const event = spy.firstCall.firstArg;
+    expect(event).to.contain({
+      type: 'abort',
+      bubbles: false,
+      cancelable: false,
+      target: signal,
+      currentTarget: signal,
+    });
+  });
+
+  it('should only call listener once', () => {
+    const spy = env.sandbox.spy();
+    signal.onabort = spy;
+    expect(signal.onabort).to.equal(spy);
+
+    controller.abort();
+    expect(spy).to.be.calledOnce;
+
+    controller.abort();
+    expect(spy).to.be.calledOnce;
+  });
+});
diff --git a/test/unit/polyfills/test-array-includes.js b/test/unit/polyfills/test-array-includes.js
new file mode 100644
index 0000000000000..1e10b98f90b62
--- /dev/null
+++ b/test/unit/polyfills/test-array-includes.js
@@ -0,0 +1,89 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {install} from '../../../src/polyfills/array-includes';
+
+describes.fakeWin('Array.includes', {}, (env) => {
+  beforeEach(() => {
+    env.win.Array = Array;
+    install(env.win);
+  });
+
+  it('finds primitives when they are present', () => {
+    const arrayWithPrimitives = [false, 17, 'hello world'];
+    expect(arrayWithPrimitives.includes(17)).to.be.true;
+    expect(arrayWithPrimitives.includes(28)).to.be.false;
+    expect(arrayWithPrimitives.includes(false)).to.be.true;
+    expect(arrayWithPrimitives.includes(true)).to.be.false;
+    expect(arrayWithPrimitives.includes('hello world')).to.be.true;
+    expect(arrayWithPrimitives.includes('google')).to.be.false;
+  });
+
+  it('finds objects when they are present', () => {
+    const point = {x: 47, y: 8472};
+    const arrayWithObject = [point];
+    expect(arrayWithObject.includes(point)).to.be.true;
+    // Same properties, different objects
+    expect(arrayWithObject.includes({x: 47, y: 8472})).to.be.false;
+  });
+
+  it('finds NaN when NaN is present', () => {
+    const arrayWithNaN = [NaN];
+    expect(arrayWithNaN.includes(NaN)).to.be.true;
+  });
+
+  it('should only find null when null is desired', () => {
+    const arrayWithNull = [null];
+    const arrayWithUndefined = [undefined];
+    expect(arrayWithNull.includes(null)).to.be.true;
+    expect(arrayWithUndefined.includes(null)).to.be.false;
+  });
+
+  it('should only find undefined when undefined is desired', () => {
+    const arrayWithNull = [null];
+    const arrayWithUndefined = [undefined];
+    expect(arrayWithUndefined.includes(undefined)).to.be.true;
+    expect(arrayWithNull.includes(undefined)).to.be.false;
+  });
+
+  it('should treat 0 and -0 as equal', () => {
+    const arrayWithZero = [0];
+    const arrayWithNegativeZero = [-0];
+    expect(arrayWithZero.includes(0)).to.be.true;
+    expect(arrayWithZero.includes(-0)).to.be.true;
+    expect(arrayWithNegativeZero.includes(0)).to.be.true;
+    expect(arrayWithNegativeZero.includes(-0)).to.be.true;
+  });
+
+  it('should respect the fromIndex argument', () => {
+    const arrayWithNumbers = [0, 1, 2, 3, 4, 5];
+    expect(arrayWithNumbers.includes(2, 0)).to.be.true;
+    expect(arrayWithNumbers.includes(2, 1)).to.be.true;
+    expect(arrayWithNumbers.includes(2, 2)).to.be.true;
+    expect(arrayWithNumbers.includes(2, 3)).to.be.false;
+    expect(arrayWithNumbers.includes(2, 4)).to.be.false;
+    expect(arrayWithNumbers.includes(2, 5)).to.be.false;
+    expect(arrayWithNumbers.includes(2, 6)).to.be.false;
+
+    expect(arrayWithNumbers.includes(2, -1)).to.be.false;
+    expect(arrayWithNumbers.includes(2, -2)).to.be.false;
+    expect(arrayWithNumbers.includes(2, -3)).to.be.false;
+    expect(arrayWithNumbers.includes(2, -4)).to.be.true;
+    expect(arrayWithNumbers.includes(2, -5)).to.be.true;
+    expect(arrayWithNumbers.includes(2, -6)).to.be.true;
+    expect(arrayWithNumbers.includes(2, -6)).to.be.true;
+  });
+});
diff --git a/test/unit/polyfills/test-custom-elements.js b/test/unit/polyfills/test-custom-elements.js
new file mode 100644
index 0000000000000..e19ec89db3f1c
--- /dev/null
+++ b/test/unit/polyfills/test-custom-elements.js
@@ -0,0 +1,259 @@
+/**
+ * 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.
+ */
+
+import {copyProperties, install} from '../../../src/polyfills/custom-elements';
+
+describes.realWin(
+  'install patches',
+  {skipCustomElementsPolyfill: true},
+  (env) => {
+    let win;
+    let innerHTMLProto;
+
+    function getInnerHtmlProto(win) {
+      let innerHTMLProto = win.Element.prototype;
+      if (!Object.getOwnPropertyDescriptor(innerHTMLProto, 'innerHTML')) {
+        innerHTMLProto = win.HTMLElement.prototype;
+        if (!Object.getOwnPropertyDescriptor(innerHTMLProto, 'innerHTML')) {
+          return null;
+        }
+      }
+      return innerHTMLProto;
+    }
+
+    before(function () {
+      if (!getInnerHtmlProto(window)) {
+        this.skipTest();
+      }
+    });
+
+    beforeEach(function () {
+      win = env.win;
+      innerHTMLProto = getInnerHtmlProto(win);
+
+      // We want to test the full polyfill.
+      delete win.Reflect;
+      delete win.customElements;
+    });
+
+    it('handles non-configurable innerHTML accessor (Safari 9)', () => {
+      // Use strict is important, as strict mode code will throw an error when
+      // trying to redefine a non-configurable property.
+      'use strict';
+
+      Object.defineProperty(innerHTMLProto, 'innerHTML', {configurable: false});
+      install(win, function () {});
+
+      class Test extends win.HTMLElement {}
+
+      expect(() => {
+        win.customElements.define('x-test', Test);
+      }).not.to.throw();
+
+      expect(win.HTMLElementOrig).to.exist;
+      expect(Object.getPrototypeOf(win.HTMLElement)).to.equal(
+        win.HTMLElementOrig
+      );
+    });
+
+    it('handles missing innerHTML descriptor (Yandex)', () => {
+      // Use strict is important, as strict mode code will throw an error when
+      // trying to redefine a non-configurable property.
+      'use strict';
+
+      delete innerHTMLProto.innerHTML;
+      install(win, function () {});
+
+      class Test extends win.HTMLElement {}
+
+      expect(() => {
+        win.customElements.define('x-test', Test);
+      }).not.to.throw();
+
+      expect(win.HTMLElementOrig).to.exist;
+      expect(Object.getPrototypeOf(win.HTMLElement)).to.equal(
+        win.HTMLElementOrig
+      );
+    });
+
+    it('handles innerHTML descriptor on HTMLElement (IE11)', () => {
+      // Use strict is important, as strict mode code will throw an error when
+      // trying to redefine a non-configurable property.
+      'use strict';
+
+      const desc = Object.getOwnPropertyDescriptor(innerHTMLProto, 'innerHTML');
+      delete innerHTMLProto.innerHTML;
+      Object.defineProperty(win.HTMLElement.prototype, 'innerHTML', desc);
+      install(win, function () {});
+
+      class Test extends win.HTMLElement {}
+
+      expect(() => {
+        win.customElements.define('x-test', Test);
+      }).not.to.throw();
+
+      expect(win.HTMLElementOrig).to.exist;
+      expect(Object.getPrototypeOf(win.HTMLElement)).to.equal(
+        win.HTMLElementOrig
+      );
+    });
+  }
+);
+
+describes.fakeWin('copyProperties', {}, () => {
+  it('copies own properties from proto object', () => {
+    const obj = {};
+    const proto = {test: 1};
+
+    copyProperties(obj, proto);
+
+    expect(obj).to.have.ownPropertyDescriptor('test', {
+      value: 1,
+      configurable: true,
+      enumerable: true,
+      writable: true,
+    });
+  });
+
+  it('copies own descriptor from proto object', () => {
+    const obj = {};
+    const proto = {};
+    Object.defineProperty(proto, 'test', {value: 1});
+
+    copyProperties(obj, proto);
+
+    expect(obj).to.have.ownPropertyDescriptor('test', {
+      value: 1,
+      configurable: false,
+      enumerable: false,
+      writable: false,
+    });
+  });
+
+  it('copies own getter/setter from proto object', () => {
+    const obj = {};
+    const proto = {};
+
+    let value = 1;
+    Object.defineProperty(proto, 'test', {
+      get() {
+        return value;
+      },
+      set(v) {
+        value = v;
+      },
+    });
+
+    copyProperties(obj, proto);
+
+    expect(obj).to.have.ownPropertyDescriptor('test');
+    expect(obj.test).to.equal(1);
+    obj.test = 2;
+    expect(obj.test).to.equal(2);
+    expect(value).to.equal(2);
+  });
+
+  it('does not override already defined property', () => {
+    const obj = {test: 1};
+    const proto = {test: 2};
+
+    copyProperties(obj, proto);
+
+    expect(obj.test).to.equal(1);
+  });
+
+  it('copies own properties from proto.__proto__ object', () => {
+    const obj = {};
+    const proto = Object.create({test: 1});
+
+    copyProperties(obj, proto);
+
+    expect(obj).to.have.ownPropertyDescriptor('test', {
+      value: 1,
+      configurable: true,
+      enumerable: true,
+      writable: true,
+    });
+  });
+
+  it('copies own descriptor from proto object', () => {
+    const obj = {};
+    const proto = Object.create(
+      {},
+      {
+        test: {value: 1},
+      }
+    );
+
+    copyProperties(obj, proto);
+
+    expect(obj).to.have.ownPropertyDescriptor('test', {
+      value: 1,
+      configurable: false,
+      enumerable: false,
+      writable: false,
+    });
+  });
+
+  it('copies own getter/setter from proto object', () => {
+    let value = 1;
+    const obj = {};
+    const proto = Object.create(
+      {},
+      {
+        test: {
+          get() {
+            return value;
+          },
+          set(v) {
+            value = v;
+          },
+        },
+      }
+    );
+
+    copyProperties(obj, proto);
+
+    expect(obj).to.have.ownPropertyDescriptor('test');
+    expect(obj.test).to.equal(1);
+    obj.test = 2;
+    expect(obj.test).to.equal(2);
+    expect(value).to.equal(2);
+  });
+
+  it('does not override already defined property', () => {
+    const obj = {test: 1};
+    const proto = Object.create({test: 2});
+
+    copyProperties(obj, proto);
+
+    expect(obj.test).to.equal(1);
+  });
+
+  it('does not override closer property with __proto__ property', () => {
+    const obj = {};
+    const proto = Object.create(
+      {test: 2},
+      {
+        test: {value: 1},
+      }
+    );
+
+    copyProperties(obj, proto);
+
+    expect(obj.test).to.equal(1);
+  });
+});
diff --git a/test/unit/polyfills/test-document-contains.js b/test/unit/polyfills/test-document-contains.js
new file mode 100644
index 0000000000000..2db604e042f2c
--- /dev/null
+++ b/test/unit/polyfills/test-document-contains.js
@@ -0,0 +1,95 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {install} from '../../../src/polyfills/document-contains';
+
+describes.sandboxed('HTMLDocument.contains', {}, () => {
+  let fakeWinWithContains;
+  let fakeWinWithoutContains;
+  let nativeContains;
+  let polyfillContains;
+  let connectedElement;
+  let connectedChild;
+  let disconnectedElement;
+  let disconnectedChild;
+
+  beforeEach(() => {
+    fakeWinWithContains = {
+      HTMLDocument: class {
+        contains() {}
+      },
+      Object: window.Object,
+    };
+    nativeContains = fakeWinWithContains.HTMLDocument.prototype.contains;
+
+    fakeWinWithoutContains = {
+      HTMLDocument: class {},
+      Object: window.Object,
+    };
+    install(fakeWinWithoutContains);
+    polyfillContains = fakeWinWithoutContains.HTMLDocument.prototype.contains;
+
+    connectedElement = document.createElement('div');
+    connectedChild = document.createElement('div');
+    disconnectedElement = document.createElement('div');
+    disconnectedChild = document.createElement('div');
+
+    connectedElement.appendChild(connectedChild);
+    disconnectedElement.appendChild(disconnectedChild);
+    document.body.appendChild(connectedElement);
+  });
+
+  afterEach(() => {
+    if (connectedElement.parentNode) {
+      connectedElement.parentNode.removeChild(connectedElement);
+    }
+  });
+
+  it('should NOT override an existing method', () => {
+    install(fakeWinWithContains);
+    expect(fakeWinWithContains.HTMLDocument.prototype.contains).to.equal(
+      nativeContains
+    );
+  });
+
+  it('should override a existing method', () => {
+    expect(polyfillContains).to.be.ok;
+    expect(polyfillContains).to.not.equal(nativeContains);
+  });
+
+  it('should polyfill document.contains API', () => {
+    expect(polyfillContains.call(document, connectedElement)).to.be.true;
+    expect(polyfillContains.call(document, connectedChild)).to.be.true;
+    expect(polyfillContains.call(document, disconnectedElement)).to.be.false;
+    expect(polyfillContains.call(document, disconnectedChild)).to.be.false;
+  });
+
+  it('should allow a null arg', () => {
+    expect(document.contains(null)).to.be.false;
+    expect(polyfillContains.call(document, null)).to.be.false;
+  });
+
+  it('should be inclusionary for documentElement', () => {
+    expect(document.contains(document.documentElement)).to.be.true;
+    expect(polyfillContains.call(document, document.documentElement)).to.be
+      .true;
+  });
+
+  it('should be inclusionary for document itself', () => {
+    expect(document.contains(document)).to.be.true;
+    expect(polyfillContains.call(document, document)).to.be.true;
+  });
+});
diff --git a/test/unit/polyfills/test-domtokenlist-toggle.js b/test/unit/polyfills/test-domtokenlist-toggle.js
new file mode 100644
index 0000000000000..cb58cfe21b107
--- /dev/null
+++ b/test/unit/polyfills/test-domtokenlist-toggle.js
@@ -0,0 +1,143 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {install} from '../../../src/polyfills/domtokenlist';
+import {toArray} from '../../../src/core/types/array';
+
+describes.fakeWin(
+  'DOMTokenList.toggle/add on non-IE',
+  {
+    win: {
+      navigator: {
+        userAgent: 'Chrome',
+      },
+    },
+  },
+  (env) => {
+    let originalToggle;
+    let originalAdd;
+    let element;
+
+    beforeEach(() => {
+      originalToggle = env.win.DOMTokenList.prototype.toggle;
+      originalAdd = env.win.DOMTokenList.prototype.add;
+
+      element = env.win.document.createElement('div');
+      env.win.document.body.appendChild(element);
+    });
+
+    afterEach(() => {
+      env.win.DOMTokenList.prototype.toggle = originalToggle;
+      env.win.DOMTokenList.prototype.add = originalAdd;
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    });
+
+    it('should NOT override toggle in non-IE browsers', () => {
+      env.win.DOMTokenList = window.DOMTokenList;
+      install(env.win);
+      const newToggle = env.win.DOMTokenList.prototype.toggle;
+      expect(newToggle).to.equal(originalToggle);
+    });
+
+    it('should NOT override add in non-IE browsers', () => {
+      env.win.DOMTokenList = window.DOMTokenList;
+      install(env.win);
+      const newAdd = env.win.DOMTokenList.prototype.add;
+      expect(newAdd).to.equal(originalAdd);
+    });
+  }
+);
+
+describes.fakeWin(
+  'DOMTokenList.toggle/add On IE',
+  {
+    win: {
+      navigator: {
+        userAgent: 'MSIE',
+      },
+    },
+  },
+  (env) => {
+    let originalToggle;
+    let originalAdd;
+    let element;
+
+    beforeEach(() => {
+      originalToggle = env.win.DOMTokenList.prototype.toggle;
+      originalAdd = env.win.DOMTokenList.prototype.add;
+
+      element = env.win.document.createElement('div');
+      env.win.document.body.appendChild(element);
+    });
+
+    afterEach(() => {
+      env.win.DOMTokenList.prototype.toggle = originalToggle;
+      env.win.DOMTokenList.prototype.add = originalAdd;
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    });
+
+    it('should polyfill DOMTokenList.toggle API', () => {
+      env.win.DOMTokenList = window.DOMTokenList;
+      install(env.win);
+      const polyfillToggle = env.win.DOMTokenList.prototype.toggle;
+
+      expect(polyfillToggle).to.be.ok;
+      expect(polyfillToggle).to.not.equal(originalToggle);
+
+      expect(toArray(element.classList)).to.not.contain('first');
+      expect(polyfillToggle.call(element.classList, 'first')).to.be.true;
+      expect(toArray(element.classList)).to.contain('first');
+      expect(polyfillToggle.call(element.classList, 'first')).to.be.false;
+      expect(toArray(element.classList)).to.not.contain('first');
+      expect(polyfillToggle.call(element.classList, 'first')).to.be.true;
+      expect(toArray(element.classList)).to.contain('first');
+      expect(polyfillToggle.call(element.classList, 'first', true)).to.be.true;
+      expect(toArray(element.classList)).to.contain('first');
+      expect(polyfillToggle.call(element.classList, 'first', true)).to.be.true;
+      expect(toArray(element.classList)).to.contain('first');
+      expect(polyfillToggle.call(element.classList, 'first', false)).to.be
+        .false;
+      expect(toArray(element.classList)).to.not.contain('first');
+      expect(polyfillToggle.call(element.classList, 'first', false)).to.be
+        .false;
+      expect(toArray(element.classList)).to.not.contain('first');
+      expect(polyfillToggle.call(element.classList, 'first', false)).to.be
+        .false;
+      expect(toArray(element.classList)).to.not.contain('first');
+    });
+
+    it('should polyfill DOMTokenList.add API', () => {
+      env.win.DOMTokenList = window.DOMTokenList;
+      install(env.win);
+      const polyfillAdd = env.win.DOMTokenList.prototype.add;
+
+      expect(polyfillAdd).to.be.ok;
+      expect(polyfillAdd).to.not.equal(originalToggle);
+
+      element.classList.add('foo');
+      expect(toArray(element.classList)).to.contain('foo');
+      element.classList.add('one', 'two', 'three');
+      expect(toArray(element.classList)).to.contain('foo');
+      expect(toArray(element.classList)).to.contain('one');
+      expect(toArray(element.classList)).to.contain('two');
+      expect(toArray(element.classList)).to.contain('three');
+    });
+  }
+);
diff --git a/test/unit/polyfills/test-intersection-observer.js b/test/unit/polyfills/test-intersection-observer.js
index f5554abb1e349..4a0637cf8b429 100644
--- a/test/unit/polyfills/test-intersection-observer.js
+++ b/test/unit/polyfills/test-intersection-observer.js
@@ -16,10 +16,12 @@
 
 import {
   IntersectionObserverStub,
-  resetSubsForTesting,
+  installStub,
+  resetStubsForTesting,
   shouldLoadPolyfill,
   upgradePolyfill,
-} from '../../../src/polyfillstub/intersection-observer-stub';
+} from '../../../src/polyfills/stubs/intersection-observer-stub';
+import {Services} from '../../../src/services';
 import {
   install,
   installForChildWin,
@@ -58,13 +60,55 @@ class NativeIntersectionObserverEntry {
   get isIntersecting() {}
 }
 
-describes.sandboxed('shouldLoadPolyfill', {}, () => {
+const APPLE_NAVIGATOR = {vendor: 'Apple Computer, Inc.'};
+const CHROME_NAVIGATOR = {vendor: 'Google Inc.'};
+
+describes.sandboxed('shouldLoadPolyfill', {}, (env) => {
+  let isIos;
+  let isSafari;
+  beforeEach(() => {
+    isIos = false;
+    isSafari = false;
+    const platform = {isIos: () => isIos, isSafari: () => isSafari};
+    env.sandbox.stub(Services, 'platformFor').returns(platform);
+  });
+
   it('should not load with native', () => {
     const win = {
       IntersectionObserver: NativeIntersectionObserver,
       IntersectionObserverEntry: NativeIntersectionObserverEntry,
+      navigator: CHROME_NAVIGATOR,
+    };
+    expect(shouldLoadPolyfill(win)).to.be.false;
+  });
+
+  it('should always load in WebKit/Safari', () => {
+    const win = {
+      IntersectionObserver: NativeIntersectionObserver,
+      IntersectionObserverEntry: NativeIntersectionObserverEntry,
+      navigator: CHROME_NAVIGATOR,
     };
     expect(shouldLoadPolyfill(win)).to.be.false;
+
+    win.navigator = APPLE_NAVIGATOR;
+    expect(shouldLoadPolyfill(win)).to.be.true;
+  });
+
+  it('should load when native does not support {root: document}', () => {
+    class NativeNoDocumentRoot {
+      constructor(_unused, opts) {
+        if (opts && opts.root && opts.root.nodeType !== 1) {
+          throw new TypeError('Root must be an Element');
+        }
+      }
+    }
+    const win = {
+      IntersectionObserver: NativeNoDocumentRoot,
+      IntersectionObserverEntry: NativeIntersectionObserverEntry,
+      document: {nodeType: 9},
+      navigator: CHROME_NAVIGATOR,
+    };
+    expect(shouldLoadPolyfill(win)).to.be.true;
   });
 
   it('should load when no native', () => {
@@ -76,25 +120,19 @@ describes.sandboxed('shouldLoadPolyfill', {}, () => {
     const win = {
       IntersectionObserver: IntersectionObserverStub,
       IntersectionObserverEntry: NativeIntersectionObserverEntry,
+      navigator: CHROME_NAVIGATOR,
     };
+    installStub(win);
     expect(shouldLoadPolyfill(win)).to.be.true;
   });
 
   it('should load when no native entry', () => {
     const win = {
       IntersectionObserver: NativeIntersectionObserver,
+      navigator: CHROME_NAVIGATOR,
     };
     expect(shouldLoadPolyfill(win)).to.be.true;
   });
-
-  it('should not load even if entry doesn not have isIntersecting', () => {
-    class IntersectionObserverEntryWithMissingIsIntersecting {}
-    const win = {
-      IntersectionObserver: NativeIntersectionObserver,
-      IntersectionObserverEntry: IntersectionObserverEntryWithMissingIsIntersecting,
-    };
-    expect(shouldLoadPolyfill(win)).to.be.false;
-  });
 });
 
 describes.fakeWin('install', {}, (env) => {
@@ -105,12 +143,36 @@ describes.fakeWin('install', {}, (env) => {
     expect(win.IntersectionObserver).to.equal(IntersectionObserverStub);
   });
 
-  it('should keep native when available', () => {
+  it('Unsupported root:document: should return native when non-document root requested', () => {
     const {win} = env;
     const native = function () {};
     win.IntersectionObserver = native;
     install(win);
-    expect(win.IntersectionObserver).to.equal(native);
+    expect(new win.IntersectionObserver(() => {})).instanceOf(native);
+    expect(
+      new win.IntersectionObserver(() => {
+        root: null;
+      })
+    ).instanceOf(native);
+    expect(
+      new win.IntersectionObserver(() => {
+        root: {
+          nodeType: 1;
+        }
+      })
+    ).instanceOf(native);
+  });
+
+  it('should return stub when {root:document} requested', () => {
+    const {win} = env;
+    const native = function () {
+      return 'native';
+    };
+    win.IntersectionObserver = native;
+    install(win);
+    expect(
+      new win.IntersectionObserver(() => {}, {root: document})
+    ).to.be.instanceOf(IntersectionObserverStub);
   });
 
   it('should polyfill isIntersecting when absent in native', () => {
@@ -122,7 +184,6 @@ describes.fakeWin('install', {}, (env) => {
     expect('isIntersecting' in win.IntersectionObserverEntry.prototype).to.be
       .false;
     install(win);
-    expect(win.IntersectionObserver).to.equal(native);
     expect(win.IntersectionObserverEntry).to.equal(nativeEntry);
     expect('isIntersecting' in win.IntersectionObserverEntry.prototype).to.be
       .true;
@@ -181,6 +242,28 @@ describes.fakeWin('installForChildWin', {}, (env) => {
     expect(win.IntersectionObserverEntry).to.equal(IntersectionObserverEntry2);
   });
 
+  it('should install IntersectionObserverStub when native does not support document root', () => {
+    const {win} = env;
+    win.IntersectionObserver = function (callback, opts) {
+      if (opts && opts.root && opts.root.nodeType !== 1) {
+        throw new TypeError('Root must be an Element');
+      }
+    };
+    const parentWin = {
+      IntersectionObserver: IntersectionObserver1,
+      IntersectionObserverEntry: IntersectionObserverEntry1,
+    };
+    installForChildWin(parentWin, win);
+    expect(win.IntersectionObserver).to.equal(IntersectionObserver1);
+    expect(win.IntersectionObserverEntry).to.equal(IntersectionObserverEntry1);
+
+    // Change parent.
+    parentWin.IntersectionObserver = IntersectionObserver2;
+    parentWin.IntersectionObserverEntry = IntersectionObserverEntry2;
+    expect(win.IntersectionObserver).to.equal(IntersectionObserver2);
+    expect(win.IntersectionObserverEntry).to.equal(IntersectionObserverEntry2);
+  });
+
   it('should keep native when available', () => {
     const {win} = env;
     const native = function () {};
@@ -204,7 +287,7 @@ describes.fakeWin('upgradePolyfill', {}, (env) => {
   });
 
   afterEach(() => {
-    resetSubsForTesting();
+    resetStubsForTesting();
   });
 
   function nextMicroTask() {
@@ -281,16 +364,44 @@ describes.fakeWin('upgradePolyfill', {}, (env) => {
     );
   });
 
+  it('should choose best InOb possible before and after upgrade, as well as upgrade rootdoc stubs.', async () => {
+    const {win} = env;
+    function NativeInOb(_ioCallback, opts) {
+      if (opts && opts.root && opts.root.nodeType === 9) {
+        throw new Error('May not have root:document');
+      }
+    }
+    win.IntersectionObserver = NativeInOb;
+    const docRoot = {root: {nodeType: 9}};
+
+    install(win);
+    expect(new win.IntersectionObserver(() => {})).instanceOf(NativeInOb);
+    expect(new win.IntersectionObserver(() => {}, docRoot)).instanceOf(
+      IntersectionObserverStub
+    );
+    upgradePolyfill(win, function () {
+      win.IntersectionObserver = NativeIntersectionObserver; // Native is the wrong name, its really Polyfilled.
+      win.IntersectionObserverEntry = NativeIntersectionObserverEntry;
+    });
+
+    const el = win.document.createElement('div');
+    const io = new IntersectionObserverStub(() => {}, docRoot);
+    io.observe(el);
+    await nextMicroTask();
+
+    expect(NativeIntersectionObserver.prototype.observe).to.be.calledOnce;
+    expect(NativeIntersectionObserver.prototype.observe).to.be.calledWith(el);
+    expect(new win.IntersectionObserver(() => {})).instanceOf(NativeInOb);
+  });
+
   it('should run installer even when native is available', () => {
     const {win} = env;
     win.IntersectionObserver = NativeIntersectionObserver;
     win.IntersectionObserverEntry = NativeIntersectionObserverEntry;
+    installStub(win);
+
     const upgradeCall = env.sandbox.spy();
     upgradePolyfill(win, function () {
-      expect(win.IntersectionObserver).to.equal(NativeIntersectionObserver);
-      expect(win.IntersectionObserverEntry).to.equal(
-        NativeIntersectionObserverEntry
-      );
       upgradeCall();
     });
     expect(upgradeCall).to.be.calledOnce;
@@ -311,12 +422,11 @@ describes.fakeWin('IntersectionObserverStub', {}, (env) => {
   });
 
   describe('constructor', () => {
-    it('should disallow non-element root', () => {
-      // Must fail on any non-element root. This is critical because this
-      // failure is used as a feature-detection for document root support.
-      expect(
-        () => new IntersectionObserverStub(callback, {root: win.document})
-      ).to.throw(/root must be an Element/);
+    it('should allow Document root', () => {
+      const io = new IntersectionObserverStub(callback, {root: win.document});
+      expect(io.root).to.eql(win.document);
+      expect(io.rootMargin).to.equal('0px 0px 0px 0px');
+      expect(io.thresholds).to.deep.equal([0]);
     });
 
     it('should allow default options', () => {
@@ -446,16 +556,16 @@ describes.fakeWin('IntersectionObserverStub', {}, (env) => {
       expect(io.takeRecords()).to.equal('native.takeRecords');
     });
 
-    it('should not re-queue if nothing is currently observed', () => {
+    it('should not re-observe if nothing is currently observed', () => {
       const io = new IntersectionObserverStub(callback);
       io.observe(element1);
       io.unobserve(element1);
       const native = upgrade(io);
       expect(native.observe).to.not.be.called;
-      expect(io.elements_).to.be.null;
+      expect(io.elements_.length).to.equal(0);
     });
 
-    it('should re-queue previously observed elements', () => {
+    it('should re-observe previously observed elements', () => {
       const io = new IntersectionObserverStub(callback);
       io.observe(element1);
       io.observe(element2);
@@ -463,7 +573,7 @@ describes.fakeWin('IntersectionObserverStub', {}, (env) => {
       expect(native.observe).to.be.calledTwice;
       expect(native.observe).to.be.calledWith(element1);
       expect(native.observe).to.be.calledWith(element2);
-      expect(io.elements_).to.be.null;
+      expect(io.elements_.length).to.equal(0);
     });
 
     it('should observe new elements only on native', () => {
diff --git a/test/unit/polyfills/test-math-sign.js b/test/unit/polyfills/test-math-sign.js
new file mode 100644
index 0000000000000..596fa2253d9f5
--- /dev/null
+++ b/test/unit/polyfills/test-math-sign.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {sign} from '../../../src/polyfills/math-sign';
+
+describes.sandboxed('Math.sign', {}, () => {
+  it('returns 1 for positive x', () => {
+    expect(sign(1)).to.equal(1);
+    expect(sign(10)).to.equal(1);
+    expect(sign(100)).to.equal(1);
+    expect(sign(Infinity)).to.equal(1);
+  });
+
+  it('returns -1 for negative x', () => {
+    expect(sign(-1)).to.equal(-1);
+    expect(sign(-10)).to.equal(-1);
+    expect(sign(-100)).to.equal(-1);
+    expect(sign(-Infinity)).to.equal(-1);
+  });
+
+  it('returns 0 for 0', () => {
+    expect(sign(0)).to.deep.equal(0);
+  });
+
+  it('returns -0 for -0', () => {
+    expect(sign(-0)).to.deep.equal(-0);
+  });
+
+  it('returns NaN for NaN', () => {
+    expect(sign(NaN)).to.deep.equal(NaN);
+  });
+
+  it('returns NaN for non-numbers', () => {
+    expect(sign({})).to.deep.equal(NaN);
+    expect(sign(function () {})).to.deep.equal(NaN);
+    expect(sign('test1')).to.deep.equal(NaN);
+    expect(sign('1test')).to.deep.equal(NaN);
+  });
+});
diff --git a/test/unit/polyfills/test-object-assign.js b/test/unit/polyfills/test-object-assign.js
new file mode 100644
index 0000000000000..ff50f4fe9344a
--- /dev/null
+++ b/test/unit/polyfills/test-object-assign.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {assign} from '../../../src/polyfills/object-assign';
+
+describes.sandboxed('Object.assign', {}, () => {
+  it('should throw an error if target is null or undefined', () => {
+    expect(() => assign(null, {a: 1})).to.throw(
+      /Cannot convert undefined or null to object/
+    );
+    expect(() => assign(undefined, {a: 1})).to.throw(
+      /Cannot convert undefined or null to object/
+    );
+  });
+
+  it('should ignore null or undefined sources', () => {
+    expect(assign({}, null, undefined)).to.deep.equal({});
+    expect(assign({a: 1}, null, undefined)).to.deep.equal({a: 1});
+  });
+
+  it('should copy and override keys from source to target', () => {
+    expect(assign({a: 1}, {a: 2, b: 3})).to.deep.equal({a: 2, b: 3});
+    expect(assign({a: 1}, {b: 3})).to.deep.equal({a: 1, b: 3});
+    expect(assign({a: 1}, {b: 3}, {a: 2}, {a: 4})).to.deep.equal({a: 4, b: 3});
+
+    const target = {a: 1, d: 3};
+    const source = {a: 2, c: 5};
+    assign(target, source);
+    expect(target).to.deep.equal({a: 2, c: 5, d: 3});
+    expect(source).to.deep.equal({a: 2, c: 5});
+  });
+});
diff --git a/test/unit/polyfills/test-object-values.js b/test/unit/polyfills/test-object-values.js
new file mode 100644
index 0000000000000..622b6a91228e6
--- /dev/null
+++ b/test/unit/polyfills/test-object-values.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright 2018 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.
+ */
+
+import {values} from '../../../src/polyfills/object-values';
+
+describes.sandboxed('Object.values', {}, () => {
+  it('should disallow null and undefined', () => {
+    expect(() => values(null)).to.throw();
+    expect(() => values(undefined)).to.throw();
+  });
+
+  it('should allow primitives', () => {
+    expect(values(1)).to.deep.equal([]);
+    expect(values('A')).to.deep.equal(['A']);
+    expect(values(true)).to.deep.equal([]);
+    expect(values(false)).to.deep.equal([]);
+  });
+
+  it('should return values of objects', () => {
+    expect(values({a: 1, b: 2, c: 1})).to.deep.equal([1, 2, 1]);
+  });
+});
diff --git a/test/unit/polyfills/test-resize-observer.js b/test/unit/polyfills/test-resize-observer.js
new file mode 100644
index 0000000000000..d5c0ee7ca9763
--- /dev/null
+++ b/test/unit/polyfills/test-resize-observer.js
@@ -0,0 +1,330 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  ResizeObserverStub,
+  installStub,
+  resetStubsForTesting,
+  shouldLoadPolyfill,
+  upgradePolyfill,
+} from '../../../src/polyfills/stubs/resize-observer-stub';
+import {
+  install,
+  installForChildWin,
+} from '../../../src/polyfills/resize-observer';
+
+class NativeResizeObserver {
+  constructor(callback) {
+    this.callback = callback;
+  }
+
+  observe() {}
+
+  unobserve() {}
+
+  disconnect() {}
+}
+
+class NativeResizeObserverEntry {
+  get clientRect() {}
+}
+
+describes.sandboxed('shouldLoadPolyfill', {}, () => {
+  it('should not load with native', () => {
+    const win = {
+      ResizeObserver: NativeResizeObserver,
+      ResizeObserverEntry: NativeResizeObserverEntry,
+    };
+    expect(shouldLoadPolyfill(win)).to.be.false;
+  });
+
+  it('should load when no native', () => {
+    const win = {};
+    expect(shouldLoadPolyfill(win)).to.be.true;
+  });
+
+  it('should load with the stub', () => {
+    const win = {};
+    installStub(win);
+    expect(shouldLoadPolyfill(win)).to.be.true;
+  });
+});
+
+describes.fakeWin('install', {}, (env) => {
+  it('should install ResizeObserverStub when no native', () => {
+    const {win} = env;
+    delete win.ResizeObserver;
+    install(win);
+    expect(win.ResizeObserver).to.equal(ResizeObserverStub);
+  });
+
+  it('should keep native when available', () => {
+    const {win} = env;
+    win.ResizeObserver = NativeResizeObserver;
+    win.ResizeObserverEntry = NativeResizeObserverEntry;
+    install(win);
+
+    expect(win.ResizeObserver).to.equal(NativeResizeObserver);
+    expect(win.ResizeObserverEntry).to.equal(NativeResizeObserverEntry);
+  });
+});
+
+describes.fakeWin('installForChildWin', {}, (env) => {
+  const ResizeObserver1 = function () {};
+  const ResizeObserverEntry1 = function () {};
+  const ResizeObserver2 = function () {};
+  const ResizeObserverEntry2 = function () {};
+
+  it('should install ResizeObserverStub when no native', () => {
+    const {win} = env;
+    delete win.ResizeObserver;
+    const parentWin = {
+      ResizeObserver: ResizeObserver1,
+      ResizeObserverEntry: ResizeObserverEntry1,
+    };
+    installForChildWin(parentWin, win);
+    expect(win.ResizeObserver).to.equal(ResizeObserver1);
+    expect(win.ResizeObserverEntry).to.equal(ResizeObserverEntry1);
+
+    // Change parent.
+    parentWin.ResizeObserver = ResizeObserver2;
+    parentWin.ResizeObserverEntry = ResizeObserverEntry2;
+    expect(win.ResizeObserver).to.equal(ResizeObserver2);
+    expect(win.ResizeObserverEntry).to.equal(ResizeObserverEntry2);
+  });
+
+  it('should keep native when available', () => {
+    const {win} = env;
+    win.ResizeObserver = NativeResizeObserver;
+    win.ResizeObserverEntry = NativeResizeObserverEntry;
+    const parentWin = {
+      ResizeObserver: ResizeObserver1,
+      ResizeObserverEntry: ResizeObserverEntry1,
+    };
+    installForChildWin(parentWin, win);
+    expect(win.ResizeObserver).to.equal(NativeResizeObserver);
+    expect(win.ResizeObserverEntry).to.equal(NativeResizeObserverEntry);
+  });
+});
+
+describes.fakeWin('upgradePolyfill', {}, (env) => {
+  beforeEach(() => {
+    env.sandbox.stub(NativeResizeObserver.prototype, 'observe');
+    env.sandbox.stub(NativeResizeObserver.prototype, 'disconnect');
+  });
+
+  afterEach(() => {
+    resetStubsForTesting();
+  });
+
+  function nextMicroTask() {
+    return Promise.resolve().then(() => Promise.resolve());
+  }
+
+  it('should reset stub before running the installer', () => {
+    const {win} = env;
+    delete win.ResizeObserver;
+    install(win);
+    expect(win.ResizeObserver).to.equal(ResizeObserverStub);
+
+    upgradePolyfill(win, function () {
+      expect(win.ResizeObserver).to.not.be.ok;
+      expect(win.ResizeObserverEntry).to.not.be.ok;
+    });
+  });
+
+  it('should upgrade all stubs', async () => {
+    const {win} = env;
+    delete win.ResizeObserver;
+    install(win);
+
+    const callback = function () {};
+    const element1 = win.document.createElement('div');
+
+    const ro1 = new win.ResizeObserver(callback);
+    const ro2 = new win.ResizeObserver(callback);
+    expect(ro1).to.be.instanceOf(ResizeObserverStub);
+    expect(ro2).to.be.instanceOf(ResizeObserverStub);
+
+    ro1.observe(element1);
+    ro2.observe(element1);
+
+    expect(NativeResizeObserver.prototype.observe).to.not.be.called;
+    upgradePolyfill(win, function () {
+      win.ResizeObserver = NativeResizeObserver;
+      win.ResizeObserverEntry = NativeResizeObserverEntry;
+    });
+
+    await nextMicroTask();
+    expect(NativeResizeObserver.prototype.observe).to.be.calledTwice;
+    expect(NativeResizeObserver.prototype.observe).to.be.calledWith(element1);
+
+    expect(NativeResizeObserver.prototype.disconnect).to.not.be.called;
+    ro1.disconnect();
+    ro2.disconnect();
+    expect(NativeResizeObserver.prototype.disconnect).to.be.calledTwice;
+  });
+
+  it('should auto-upgrade any stub post upgrade', async () => {
+    const {win} = env;
+    delete win.ResizeObserver;
+    install(win);
+    expect(win.ResizeObserver).to.equal(ResizeObserverStub);
+
+    upgradePolyfill(win, function () {
+      win.ResizeObserver = NativeResizeObserver;
+      win.ResizeObserverEntry = NativeResizeObserverEntry;
+    });
+
+    const callback = function () {};
+    const element1 = win.document.createElement('div');
+
+    const ro = new ResizeObserverStub(callback);
+
+    await nextMicroTask();
+    ro.observe(element1);
+    expect(NativeResizeObserver.prototype.observe).to.be.calledOnce;
+    expect(NativeResizeObserver.prototype.observe).to.be.calledWith(element1);
+  });
+
+  it('should run installer even when native is available', () => {
+    const {win} = env;
+    win.ResizeObserver = NativeResizeObserver;
+    win.ResizeObserverEntry = NativeResizeObserverEntry;
+    installStub(win);
+
+    const upgradeCall = env.sandbox.spy();
+    upgradePolyfill(win, function () {
+      upgradeCall();
+    });
+    expect(upgradeCall).to.be.calledOnce;
+  });
+});
+
+describes.fakeWin('ResizeObserverStub', {}, (env) => {
+  let win;
+  let callback;
+  let element1;
+  let element2;
+
+  beforeEach(() => {
+    win = env.win;
+    callback = env.sandbox.spy();
+    element1 = win.document.createElement('div');
+    element2 = win.document.createElement('div');
+  });
+
+  it('should allow default constructor', () => {
+    expect(() => new ResizeObserverStub(callback)).to.not.throw();
+  });
+
+  describe('observe/unobserve/disconnect', () => {
+    it('should queue up elements when observed, but only once', () => {
+      const ro = new ResizeObserverStub(callback);
+      ro.observe(element1);
+      expect(ro.elements_).to.deep.equal([element1]);
+      ro.observe(element1);
+      expect(ro.elements_).to.deep.equal([element1]);
+      ro.observe(element2);
+      expect(ro.elements_).to.deep.equal([element1, element2]);
+    });
+
+    it('should dequeue elements when observed', () => {
+      const ro = new ResizeObserverStub(callback);
+      ro.observe(element1);
+      ro.observe(element2);
+      expect(ro.elements_).to.deep.equal([element1, element2]);
+      ro.unobserve(element1);
+      expect(ro.elements_).to.deep.equal([element2]);
+      ro.unobserve(element2);
+      expect(ro.elements_).to.deep.equal([]);
+      ro.unobserve(element1);
+      ro.unobserve(element2);
+      expect(ro.elements_).to.deep.equal([]);
+    });
+
+    it('should dequeue elements when disconnected', () => {
+      const ro = new ResizeObserverStub(callback);
+      ro.observe(element1);
+      ro.observe(element2);
+      expect(ro.elements_).to.deep.equal([element1, element2]);
+      ro.disconnect();
+      expect(ro.elements_).to.deep.equal([]);
+      ro.disconnect();
+      expect(ro.elements_).to.deep.equal([]);
+    });
+  });
+
+  describe('upgrade', () => {
+    beforeEach(() => {
+      env.sandbox.stub(NativeResizeObserver.prototype, 'observe');
+      env.sandbox.stub(NativeResizeObserver.prototype, 'unobserve');
+      env.sandbox.stub(NativeResizeObserver.prototype, 'disconnect');
+    });
+
+    function upgrade(io) {
+      io.upgrade_(NativeResizeObserver);
+      return io.inst_;
+    }
+
+    it('should forward callback', () => {
+      const ro = new ResizeObserverStub(callback);
+      const native = upgrade(ro);
+      expect(native.callback).to.equal(callback);
+    });
+
+    it('should not re-observe if nothing is currently observed', () => {
+      const ro = new ResizeObserverStub(callback);
+      ro.observe(element1);
+      ro.unobserve(element1);
+      const native = upgrade(ro);
+      expect(native.observe).to.not.be.called;
+      expect(ro.elements_.length).to.equal(0);
+    });
+
+    it('should re-observe previously observed elements', () => {
+      const ro = new ResizeObserverStub(callback);
+      ro.observe(element1);
+      ro.observe(element2);
+      const native = upgrade(ro);
+      expect(native.observe).to.be.calledTwice;
+      expect(native.observe).to.be.calledWith(element1);
+      expect(native.observe).to.be.calledWith(element2);
+      expect(ro.elements_.length).to.equal(0);
+    });
+
+    it('should observe new elements only on native', () => {
+      const ro = new ResizeObserverStub(callback);
+      const native = upgrade(ro);
+      ro.observe(element1);
+      expect(native.observe).to.be.calledOnce.calledWith(element1);
+    });
+
+    it('should unobserve new elements only on native', () => {
+      const ro = new ResizeObserverStub(callback);
+      const native = upgrade(ro);
+      ro.unobserve(element1);
+      expect(native.unobserve).to.be.calledOnce.calledWith(element1);
+    });
+
+    it('should disconnect on native', () => {
+      const ro = new ResizeObserverStub(callback);
+      const native = upgrade(ro);
+      ro.disconnect();
+      expect(native.disconnect).to.be.calledOnce;
+    });
+  });
+});
diff --git a/test/unit/preact/component/test-renderer.js b/test/unit/preact/component/test-renderer.js
new file mode 100644
index 0000000000000..c7176d80f0845
--- /dev/null
+++ b/test/unit/preact/component/test-renderer.js
@@ -0,0 +1,125 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../../src/preact/index';
+import {mount} from 'enzyme';
+import {useRenderer} from '../../../../src/preact/component';
+
+describes.sandboxed('useRenderer', {}, (env) => {
+  function Component({data, render}) {
+    const value = useRenderer(render, data);
+    return <div>{value}</div>;
+  }
+
+  it('should render a sync renderer', () => {
+    const render = env.sandbox.stub().callsFake((data) => data.value);
+    const data = {value: 'one'};
+    const props = {data, render};
+
+    const wrapper = mount(<Component {...props} />);
+    expect(wrapper.html()).to.equal('<div>one</div>');
+    expect(render).to.be.calledOnce.calledWith(data);
+
+    // Empty re-render with old data.
+    wrapper.setProps({...props, inc: 1});
+    expect(wrapper.html()).to.equal('<div>one</div>'); // no change.
+    expect(render).to.be.calledOnce; // no change.
+
+    // Re-render with new data.
+    wrapper.setProps({...props, data: {value: 'two'}});
+    expect(wrapper.html()).to.equal('<div>two</div>');
+    expect(render).to.be.calledTwice;
+  });
+
+  it('should render an async renderer', () => {
+    let renderCallback;
+    const render = env.sandbox.stub().callsFake((data) => ({
+      then(callback) {
+        renderCallback = () => callback(data.value);
+      },
+    }));
+    function resolve() {
+      renderCallback();
+      renderCallback = null;
+      wrapper.update();
+    }
+
+    const data = {value: 'one'};
+    const props = {data, render};
+
+    // First render: start.
+    const wrapper = mount(<Component {...props} />);
+    expect(wrapper.html()).to.equal('<div></div>');
+    expect(render).to.be.calledOnce.calledWith(data);
+
+    // First render: complete.
+    resolve();
+    expect(wrapper.html()).to.equal('<div>one</div>');
+    expect(render).to.be.calledOnce; // no change.
+
+    // Empty re-render with old data.
+    wrapper.setProps({...props, inc: 1});
+    expect(wrapper.html()).to.equal('<div>one</div>'); // no change.
+    expect(render).to.be.calledOnce; // no change.
+
+    // Re-render: start.
+    wrapper.setProps({...props, data: {value: 'two'}});
+    expect(wrapper.html()).to.equal('<div>one</div>'); // no change.
+    expect(render).to.be.calledTwice;
+
+    // Re-render: end.
+    resolve();
+    expect(wrapper.html()).to.equal('<div>two</div>');
+    expect(render).to.be.calledTwice;
+  });
+
+  it('should supersede an async renderer', () => {
+    const renderCallbacks = [];
+    const render = env.sandbox.stub().callsFake((data) => ({
+      then(callback) {
+        renderCallbacks.push(() => callback(data.value));
+      },
+    }));
+    function resolve(renderCallback) {
+      renderCallback();
+      renderCallback = null;
+      wrapper.update();
+    }
+
+    const data = {value: 'one'};
+    const props = {data, render};
+
+    // First render: start.
+    const wrapper = mount(<Component {...props} />);
+    expect(wrapper.html()).to.equal('<div></div>');
+    expect(render).to.be.calledOnce;
+
+    // Re-render: start.
+    wrapper.setProps({...props, data: {value: 'two'}});
+    expect(wrapper.html()).to.equal('<div></div>'); // no change.
+    expect(render).to.be.calledTwice;
+
+    // Re-render: end.
+    resolve(renderCallbacks[1]);
+    expect(wrapper.html()).to.equal('<div>two</div>');
+    expect(render).to.be.calledTwice;
+
+    // First render: end.
+    resolve(renderCallbacks[0]);
+    expect(wrapper.html()).to.equal('<div>two</div>');
+    expect(render).to.be.calledTwice; // no change.
+  });
+});
diff --git a/test/unit/preact/test-base-element-mapping.js b/test/unit/preact/test-base-element-mapping.js
new file mode 100644
index 0000000000000..55bf1b1ab28b4
--- /dev/null
+++ b/test/unit/preact/test-base-element-mapping.js
@@ -0,0 +1,1405 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact/index';
+import {PreactBaseElement} from '../../../src/preact/base-element';
+import {Slot} from '../../../src/preact/slot';
+import {createElementWithAttributes} from '../../../src/dom';
+import {htmlFor} from '../../../src/static-template';
+import {omit} from '../../../src/core/types/object';
+import {testElementR1} from '../../../testing/element-v1';
+import {upgradeOrRegisterElement} from '../../../src/service/custom-element-registry';
+import {waitFor} from '../../../testing/test-helper';
+
+const spec = {amp: true, frameStyle: {width: '300px'}};
+
+describes.realWin('PreactBaseElement', spec, (env) => {
+  let win, doc, html;
+  let Impl, component, lastProps;
+  let isLayoutSupportedOverride;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    html = htmlFor(doc);
+
+    isLayoutSupportedOverride = () => true;
+    Impl = class extends PreactBaseElement {
+      isLayoutSupported(layout) {
+        if (isLayoutSupportedOverride !== undefined) {
+          return isLayoutSupportedOverride(layout);
+        }
+        return super.isLayoutSupported(layout);
+      }
+    };
+    component = env.sandbox.stub().callsFake((props) => {
+      lastProps = props;
+      return Preact.createElement('div', {
+        id: 'component',
+        'data-name': props.name,
+      });
+    });
+    Impl['Component'] = component;
+    upgradeOrRegisterElement(win, 'amp-preact', Impl);
+  });
+
+  function waitForMutation(element, callback) {
+    return new Promise((resolve) => {
+      const mo = new MutationObserver(() => {
+        resolve();
+        mo.disconnect();
+      });
+      mo.observe(element, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+        characterData: true,
+      });
+      callback();
+    }).then(() => {
+      // Skip couple more animation frames.
+      return new Promise((resolve) => setTimeout(resolve, 32));
+    });
+  }
+
+  describe('R1', () => {
+    it('testElementR1', () => {
+      testElementR1(PreactBaseElement);
+    });
+
+    it('by default prerenderAllowed is tied to the "loadable" flag', () => {
+      Impl['loadable'] = false;
+      expect(Impl.prerenderAllowed()).to.be.true;
+
+      Impl['loadable'] = true;
+      expect(Impl.prerenderAllowed()).to.be.false;
+    });
+  });
+
+  describe('layout mapping', () => {
+    let element;
+
+    beforeEach(() => {
+      element = doc.createElement('amp-preact');
+      isLayoutSupportedOverride = undefined;
+    });
+
+    it('should allow container for layoutSizeDefined', async () => {
+      Impl['layoutSizeDefined'] = true;
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      const impl = await element.getImpl();
+      expect(impl.isLayoutSupported('fixed')).to.be.true;
+      expect(impl.isLayoutSupported('container')).to.be.true;
+    });
+  });
+
+  describe('attribute mapping', () => {
+    const DATE_STRING = '2018-01-01T08:00:00Z';
+    const DATE = Date.parse(DATE_STRING);
+
+    let element;
+
+    beforeEach(async () => {
+      Impl['props'] = {
+        'noValue': {attr: 'no-value'},
+        'valueWithDef': {attr: 'value-with-def', default: 'DEFAULT'},
+        'propA': {attr: 'prop-a'},
+        'minFontSize': {attr: 'min-font-size', type: 'number'},
+        'aDate': {attr: 'a-date', type: 'date'},
+        'disabled': {attr: 'disabled', type: 'boolean'},
+        'enabled': {attr: 'enabled', type: 'boolean'},
+        'boolDefTrue': {attr: 'bool-def-true', type: 'boolean', default: true},
+        'combined': {
+          attrs: ['part-a', 'part-b'],
+          parseAttrs: (e) =>
+            `${e.getAttribute('part-a')}+${e.getAttribute('part-b')}`,
+        },
+        'params': {attrPrefix: 'data-param-'},
+        'prefix': {attrPrefix: 'prefix'},
+      };
+      element = html`
+        <amp-preact
+          layout="fixed"
+          width="100"
+          height="100"
+          prop-a="A"
+          min-font-size="72"
+          disabled
+          unknown="1"
+          part-a="A"
+          part-b="B"
+          data-param-test="helloworld"
+          data-param-test-two="confirm"
+          prefix="pref"
+        >
+        </amp-preact>
+      `;
+      element.setAttribute('a-date', DATE_STRING);
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+    });
+
+    it('should render content inline', async () => {
+      expect(component).to.be.calledOnce;
+      expect(element.querySelector('#component')).to.be.ok;
+      expect(element.shadowRoot).to.not.be.ok;
+    });
+
+    it('should parse attributes on first render', async () => {
+      expect(component).to.be.calledOnce;
+      expect(lastProps).to.contain({
+        valueWithDef: 'DEFAULT',
+        propA: 'A',
+        minFontSize: 72,
+        aDate: DATE,
+        disabled: true,
+        boolDefTrue: true,
+        combined: 'A+B',
+      });
+      expect(lastProps.enabled).to.not.exist;
+      expect(lastProps.params.test).to.equal('helloworld');
+      expect(lastProps.params.testTwo).to.equal('confirm');
+      expect(lastProps).to.not.haveOwnProperty('prefix');
+    });
+
+    it('should mutate attributes', async () => {
+      element.setAttribute('prop-a', 'B');
+      element.setAttribute('min-font-size', '72.5');
+      element.setAttribute('a-date', '2018-01-01T08:00:01Z');
+      element.setAttribute('enabled', '');
+      element.removeAttribute('disabled');
+      element.setAttribute('bool-def-true', 'false');
+      element.setAttribute('part-b', 'C');
+      element.setAttribute('data-param-test', 'worldhello');
+      element.setAttribute('data-param-test-two', 'confirmAgain');
+      element.setAttribute('prefix', 'prefTwo');
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+
+      expect(component).to.be.calledTwice;
+      expect(lastProps).to.contain({
+        valueWithDef: 'DEFAULT',
+        propA: 'B',
+        minFontSize: 72.5,
+        aDate: DATE + 1000,
+        enabled: true,
+        boolDefTrue: false,
+        combined: 'A+C',
+      });
+      expect(lastProps.disabled).to.not.exist;
+      expect(lastProps.params.test).to.equal('worldhello');
+      expect(lastProps.params.testTwo).to.equal('confirmAgain');
+      expect(lastProps).to.not.haveOwnProperty('prefix');
+    });
+
+    it('should accept boolean string values', async () => {
+      element.setAttribute('enabled', 'true');
+      element.setAttribute('bool-def-true', 'true');
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+      expect(lastProps).to.contain({
+        enabled: true,
+        boolDefTrue: true,
+      });
+
+      element.setAttribute('enabled', 'false');
+      element.setAttribute('bool-def-true', 'false');
+      await waitFor(() => component.callCount > 2, 'component re-rendered');
+      expect(component).to.be.calledThrice;
+      expect(lastProps).to.contain({
+        enabled: false,
+        boolDefTrue: false,
+      });
+    });
+
+    it('should ignore non-declared attributes', async () => {
+      // Perform ignored mutations.
+      await waitForMutation(element, () => {
+        element.removeAttribute('unknown');
+        element.setAttribute('unknown2', '2');
+        element.style.background = 'red';
+        element.classList.add('class1');
+      });
+
+      // Execute a handled mutation and check that execution happened only
+      // twice.
+      element.setAttribute('prop-a', 'B');
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+      expect(lastProps).to.have.property('propA', 'B');
+      expect(lastProps).to.not.have.property('unknown2');
+    });
+  });
+
+  describe('media-query attribute mapping', () => {
+    let element;
+
+    beforeEach(async () => {
+      Impl['props'] = {
+        'propA': {attr: 'prop-a', media: true},
+        'propB': {attr: 'prop-b', media: true},
+        'minFontSize': {attr: 'min-font-size', type: 'number', media: true},
+      };
+      element = html`
+        <amp-preact
+          layout="fixed"
+          width="100"
+          height="100"
+          prop-a="(max-width: 301px) A, B"
+          min-font-size="(max-width: 301px) 72, 84"
+        >
+        </amp-preact>
+      `;
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      expect(win.innerWidth).to.equal(300);
+    });
+
+    it('should parse attributes on first render', async () => {
+      expect(component).to.be.calledOnce;
+      expect(lastProps.propA).to.equal('A');
+      expect(lastProps.minFontSize).to.equal(72);
+      // No attribute.
+      expect(lastProps.propB).to.be.undefined;
+    });
+
+    it('should rerender on media change', async () => {
+      env.iframe.style.width = '310px';
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+
+      expect(component).to.be.calledTwice;
+      expect(lastProps.propA).to.equal('B');
+      expect(lastProps.minFontSize).to.equal(84);
+      // No attribute.
+      expect(lastProps.propB).to.be.undefined;
+    });
+  });
+
+  describe('props with staticProps', () => {
+    let element;
+
+    const initProps = {x: 'x', tacos: true};
+
+    beforeEach(async () => {
+      Impl.prototype.init = () => initProps;
+      Impl['staticProps'] = {
+        a: 'a',
+        b: 123,
+      };
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100"></amp-preact>
+      `;
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+    });
+
+    it('include staticProps', () => {
+      expect(lastProps).to.include(Impl['staticProps']);
+    });
+
+    it('include init() props', () => {
+      expect(lastProps).to.include(initProps);
+    });
+  });
+
+  describe('usesTemplate', () => {
+    let element;
+
+    beforeEach(async () => {
+      Impl['usesTemplate'] = true;
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100"> </amp-preact>
+      `;
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+    });
+
+    it('should pick-up template attribute mutations', async () => {
+      element.setAttribute('template', 't1');
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+    });
+
+    it('should pick-up template child mutations', async () => {
+      element.appendChild(document.createElement('template'));
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+    });
+  });
+
+  describe('shadow container rendering', () => {
+    let element;
+
+    beforeEach(() => {
+      Impl['usesShadowDom'] = true;
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100">
+          <div id="child1"></div>
+          <div placeholder>foo</div>
+          <div fallback>bar</div>
+        </amp-preact>
+      `;
+    });
+
+    it('should return requiresShadowDom', () => {
+      expect(Impl.requiresShadowDom()).to.be.true;
+    });
+
+    it('should render from scratch', async () => {
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      expect(component).to.be.calledOnce;
+      const container = element.shadowRoot.querySelector(':scope > c');
+      expect(container).to.be.ok;
+      expect(container.style.display).to.equal('contents');
+      expect(container.querySelector(':scope > #component')).to.be.ok;
+      expect(
+        element.shadowRoot.querySelectorAll('slot[name="i-amphtml-svc"]')
+      ).to.have.lengthOf(1);
+    });
+
+    it('should pass placeholder and fallback elements to service slot', async () => {
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      const serviceSlot = element.shadowRoot.querySelectorAll(
+        'slot[name="i-amphtml-svc"]'
+      );
+      expect(serviceSlot).to.have.lengthOf(1);
+      const placeholder = element.querySelector('[placeholder]');
+      const fallback = element.querySelector('[fallback]');
+      expect(placeholder.getAttribute('slot')).to.equal('i-amphtml-svc');
+      expect(fallback.getAttribute('slot')).to.equal('i-amphtml-svc');
+      expect(serviceSlot[0].assignedElements()).to.have.lengthOf(2);
+      expect(serviceSlot[0].assignedElements()[0]).to.equal(placeholder);
+      expect(serviceSlot[0].assignedElements()[1]).to.equal(fallback);
+    });
+
+    describe('SSR', () => {
+      let shadowRoot, container;
+      let componentEl, serviceSlotEl, styleEl;
+
+      beforeEach(async () => {
+        shadowRoot = element.attachShadow({mode: 'open'});
+        container = html`<c></c>`;
+        componentEl = html`<div id="component"></div>`;
+        container.appendChild(componentEl);
+        shadowRoot.appendChild(container);
+
+        serviceSlotEl = html`<slot name="i-amphtml-svc"></slot>`;
+        shadowRoot.appendChild(serviceSlotEl);
+
+        styleEl = html`<style></style>`;
+        shadowRoot.appendChild(styleEl);
+
+        doc.body.appendChild(element);
+        await element.buildInternal();
+        await waitFor(() => component.callCount > 0, 'component hydrated');
+      });
+
+      it('should hydrate SSR shadow root', () => {
+        expect(component).to.be.calledOnce;
+        expect(element.shadowRoot.querySelector(':scope > c')).to.equal(
+          container
+        );
+        expect(
+          element.shadowRoot.querySelector(':scope > c > #component')
+        ).to.equal(componentEl);
+        expect(
+          element.shadowRoot.querySelectorAll('slot[name="i-amphtml-svc"]')
+        ).to.have.lengthOf(1);
+        expect(
+          element.shadowRoot.querySelector(
+            ':scope > slot[name="i-amphtml-svc"]'
+          )
+        ).to.equal(serviceSlotEl);
+        expect(element.shadowRoot.querySelector(':scope > style')).to.equal(
+          styleEl
+        );
+      });
+
+      it('should rerender after SSR hydration', async () => {
+        // Only rendering updates attributes.
+        const impl = await element.getImpl();
+        impl.mutateProps({name: 'A'});
+        await waitFor(() => component.callCount > 1, 'component rendered');
+        expect(component).to.be.calledTwice;
+        expect(componentEl.getAttribute('data-name')).to.equal('A');
+
+        // No changes.
+        expect(element.shadowRoot.querySelector(':scope > c')).to.equal(
+          container
+        );
+        expect(
+          element.shadowRoot.querySelector(':scope > c > #component')
+        ).to.equal(componentEl);
+        expect(
+          element.shadowRoot.querySelector(
+            ':scope > slot[name="i-amphtml-svc"]'
+          )
+        ).to.equal(serviceSlotEl);
+        expect(element.shadowRoot.querySelector(':scope > style')).to.equal(
+          styleEl
+        );
+      });
+    });
+  });
+
+  describe('lightDom mapping', () => {
+    let element;
+    let updateEventSpy;
+
+    beforeEach(() => {
+      Impl['lightDomTag'] = 'time';
+      component = env.sandbox.stub().callsFake((props) => {
+        lastProps = props;
+        return Preact.createElement(
+          'time',
+          {...props},
+          Preact.createElement('div', {
+            id: 'component',
+            'data-name': props.name,
+          })
+        );
+      });
+      Impl['Component'] = component;
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100"> </amp-preact>
+      `;
+
+      updateEventSpy = env.sandbox.stub();
+      element.addEventListener('amp:dom-update', updateEventSpy);
+    });
+
+    it('should return requiresShadowDom', () => {
+      expect(Impl.requiresShadowDom()).to.be.false;
+    });
+
+    it('should render from scratch', async () => {
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(
+        () => element.querySelector(':scope > time'),
+        'lightDom element created'
+      );
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      expect(component).to.be.calledOnce;
+      const lightDom = element.querySelector(':scope > time');
+      expect(lightDom.className).to.equal('');
+      expect(lightDom.hasAttribute('i-amphtml-rendered')).to.be.true;
+      expect(lightDom.querySelector(':scope > #component')).to.be.ok;
+      expect(lastProps.as).to.equal('time');
+      await waitFor(
+        () => updateEventSpy.callCount > 0,
+        'amp:dom-update called'
+      );
+    });
+
+    it('should add fill class', async () => {
+      Impl['layoutSizeDefined'] = true;
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(
+        () => element.querySelector(':scope > time'),
+        'lightDom element created'
+      );
+      const lightDom = element.querySelector(':scope > time');
+      expect(lightDom.querySelector(':scope > #component')).to.be.ok;
+      expect(lightDom.className).to.equal('i-amphtml-fill-content');
+      expect(lightDom.hasAttribute('i-amphtml-rendered')).to.be.true;
+      expect(lastProps.className).to.equal('i-amphtml-fill-content');
+      expect(lastProps.as).to.equal('time');
+      await waitFor(
+        () => updateEventSpy.callCount > 0,
+        'amp:dom-update called'
+      );
+    });
+
+    it('should use the existing element if exists', async () => {
+      Impl['layoutSizeDefined'] = true;
+      const existing = createElementWithAttributes(document, 'time', {
+        'i-amphtml-rendered': '',
+      });
+      element.appendChild(existing);
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      expect(element.querySelector(':scope > time')).to.equal(existing);
+      expect(existing.querySelector(':scope > #component')).to.be.ok;
+      expect(existing.className).to.equal('i-amphtml-fill-content');
+      expect(lastProps.className).to.equal('i-amphtml-fill-content');
+      expect(lastProps.as).to.equal('time');
+      await waitFor(
+        () => updateEventSpy.callCount > 0,
+        'amp:dom-update called'
+      );
+    });
+  });
+
+  describe('children mapping', () => {
+    let element;
+    const DATE_STRING = '2018-01-01T08:00:00Z';
+    const DATE = Date.parse(DATE_STRING);
+
+    beforeEach(async () => {
+      Impl['usesShadowDom'] = true;
+      Impl['props'] = {
+        'cloned': {
+          selector: '[cloned]',
+          single: false,
+          clone: true,
+        },
+        'propA': {attr: 'prop-a'},
+        'special1': {
+          props: {
+            'noValue': {attr: 'no-value'},
+            'valueWithDef': {attr: 'value-with-def', default: 'DEFAULT'},
+            'propA': {attr: 'prop-a'},
+            'minFontSize': {attr: 'min-font-size', type: 'number'},
+            'aDate': {attr: 'a-date', type: 'date'},
+            'disabled': {attr: 'disabled', type: 'boolean'},
+            'enabled': {attr: 'enabled', type: 'boolean'},
+          },
+          selector: '[special1]',
+          single: true,
+        },
+        'special2': {
+          selector: '[special2]',
+          single: true,
+        },
+        'specialAs': {
+          selector: '[special3]',
+          props: {
+            'noValue': {attr: 'no-value'},
+            'valueWithDef': {attr: 'value-with-def', default: 'DEFAULT'},
+            'propA': {attr: 'prop-a'},
+            'minFontSize': {attr: 'min-font-size', type: 'number'},
+            'disabled': {attr: 'disabled', type: 'boolean'},
+            'enabled': {attr: 'enabled', type: 'boolean'},
+          },
+          single: true,
+          as: true,
+        },
+        'children': {
+          props: {
+            'boolDefTrue': {
+              attr: 'bool-def-true',
+              type: 'boolean',
+              default: true,
+            },
+            'combined': {
+              attrs: ['part-a', 'part-b'],
+              parseAttrs: (e) =>
+                `${e.getAttribute('part-a')}+${e.getAttribute('part-b')}`,
+            },
+            'params': {attrPrefix: 'data-param-'},
+            'prefix': {attrPrefix: 'prefix'},
+          },
+          selector: '*', // This should be last as catch-all.
+          single: false,
+        },
+      };
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100">
+          <div
+            special1
+            prop-a="A"
+            min-font-size="72"
+            disabled
+            unknown="1"
+          ></div>
+          <div
+            special3
+            prop-a="A"
+            min-font-size="72"
+            disabled
+            unknown="1"
+          ></div>
+          <div
+            id="child1"
+            part-a="A"
+            part-b="B"
+            data-param-test="helloworld"
+            data-param-test-two="confirm"
+            prefix="pref"
+          ></div>
+          <div
+            id="child2"
+            part-a="C"
+            part-b="D"
+            data-param-test="helloworld2"
+            data-param-test-two="confirm2"
+            prefix="pref2"
+          ></div>
+          <div cloned id="cloned1"></div>
+          <div cloned id="cloned2"></div>
+          text (should be ignored)
+        </amp-preact>
+      `;
+      element.firstElementChild.setAttribute('a-date', DATE_STRING);
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+    });
+
+    it('should return requiresShadowDom', () => {
+      expect(Impl.requiresShadowDom()).to.be.true;
+    });
+
+    it('should render into shadow DOM', () => {
+      expect(component).to.be.calledOnce;
+      expect(element.shadowRoot).to.be.ok;
+      expect(element.shadowRoot.querySelector('#component')).to.be.ok;
+      expect(element.querySelector('#component')).to.not.be.ok;
+    });
+
+    it('should skip unavailable children', () => {
+      expect(lastProps).to.not.have.property('special2');
+    });
+
+    it('should pass children as prop slot for single-element mapping and parse attributes', () => {
+      const {special1} = lastProps;
+      expect(special1.type).to.equal(Slot);
+      expect(special1.props).to.deep.equal({
+        name: 'i-amphtml-special1',
+        valueWithDef: 'DEFAULT',
+        propA: 'A',
+        minFontSize: 72,
+        aDate: DATE,
+        disabled: true,
+      });
+
+      expect(element.querySelector('[special1]').slot).to.equal(
+        'i-amphtml-special1'
+      );
+    });
+
+    it('should pass children as functional prop slot for single-element mapping with "as" and parse attributes', () => {
+      const {specialAs: Comp} = lastProps;
+      expect(typeof Comp).to.equal('function');
+      expect(Comp.name).to.equal('SlotWithProps');
+
+      const special3 = Comp();
+      expect(special3.props).to.deep.equal({
+        valueWithDef: 'DEFAULT',
+        propA: 'A',
+        minFontSize: 72,
+        disabled: true,
+        name: 'i-amphtml-specialAs',
+      });
+
+      const special3WithProps = Comp({
+        'aria-disabled': 'false',
+        disabled: false,
+      });
+      expect(special3WithProps.props).to.deep.equal({
+        valueWithDef: 'DEFAULT',
+        propA: 'A',
+        minFontSize: 72,
+        name: 'i-amphtml-specialAs',
+        'aria-disabled': 'false',
+        disabled: false,
+      });
+
+      expect(element.querySelector('[special3]').slot).to.equal(
+        'i-amphtml-specialAs'
+      );
+    });
+
+    it('should pass new functional prop slot for "as" on mutation', async () => {
+      const {specialAs: prevComp} = lastProps;
+      const prevSpecial3 = prevComp();
+      expect(prevSpecial3.props).to.deep.equal({
+        valueWithDef: 'DEFAULT',
+        propA: 'A',
+        minFontSize: 72,
+        disabled: true,
+        name: 'i-amphtml-specialAs',
+      });
+
+      // Mutate slot prop, but this won't trigger a rerender
+      element
+        .querySelector('[special3]')
+        .setAttribute('value-with-def', 'CUSTOM');
+      // Mutate an observed attr to trigger rerender
+      element.setAttribute('prop-a', 'B');
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+
+      const {specialAs: Comp} = lastProps;
+      expect(Comp).not.to.deep.equal(prevComp);
+      const special3 = Comp();
+      expect(special3.props).to.deep.equal({
+        valueWithDef: 'CUSTOM',
+        propA: 'A',
+        minFontSize: 72,
+        disabled: true,
+        name: 'i-amphtml-specialAs',
+      });
+    });
+
+    it('should pass children as prop slot array and parse attributes', () => {
+      const {children} = lastProps;
+      expect(children).to.have.lengthOf(2);
+      const {0: child1, 1: child2} = children;
+      expect(child1.type).to.equal(Slot);
+      expect(omit(child1.props, 'name')).to.deep.equal({
+        boolDefTrue: true,
+        combined: 'A+B',
+        params: {test: 'helloworld', testTwo: 'confirm'},
+      });
+      expect(child2.type).to.equal(Slot);
+      expect(omit(child2.props, 'name')).to.deep.equal({
+        boolDefTrue: true,
+        combined: 'C+D',
+        params: {test: 'helloworld2', testTwo: 'confirm2'},
+      });
+
+      // Names are random and most importantly not equal to each other.
+      expect(child1.props.name).to.match(/i-amphtml-children-\d/);
+      expect(child2.props.name).to.match(/i-amphtml-children-\d/);
+      expect(child1.props.name).to.not.equal(child2.props.name);
+      expect(element.querySelector('#child1').slot).to.equal(child1.props.name);
+      expect(element.querySelector('#child2').slot).to.equal(child2.props.name);
+    });
+
+    it('should rerender on new children', async () => {
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      const {children: prevChildren} = lastProps;
+      expect(prevChildren).to.have.lengthOf(2);
+      const {0: prevChild1, 1: prevChild2} = prevChildren;
+
+      const newChild = createElementWithAttributes(doc, 'div', {
+        'id': 'child3',
+        'part-a': 'E',
+        'part-b': 'F',
+      });
+      element.appendChild(newChild);
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+
+      const {children} = lastProps;
+      expect(children).to.have.lengthOf(3);
+      const {0: child1, 1: child2, 2: child3} = children;
+
+      // New child.
+      expect(child3.type).to.equal(Slot);
+      expect(omit(child3.props, 'name')).to.deep.equal({
+        boolDefTrue: true,
+        combined: 'E+F',
+      });
+      expect(child3.props.name).to.match(/i-amphtml-children-\d/);
+      expect(child3.props.name).to.not.equal(prevChild1.props.name);
+      expect(child3.props.name).to.not.equal(prevChild2.props.name);
+      expect(newChild.slot).to.equal(child3.props.name);
+
+      // No changes.
+      expect(child1.type).to.equal(Slot);
+      expect(child1.props).to.deep.equal({
+        name: prevChild1.props.name,
+        boolDefTrue: true,
+        combined: 'A+B',
+        params: {test: 'helloworld', testTwo: 'confirm'},
+      });
+      expect(element.querySelector('#child1').slot).to.equal(child1.props.name);
+      expect(child2.type).to.equal(Slot);
+      expect(child2.props).to.deep.equal({
+        name: prevChild2.props.name,
+        boolDefTrue: true,
+        combined: 'C+D',
+        params: {test: 'helloworld2', testTwo: 'confirm2'},
+      });
+      expect(element.querySelector('#child2').slot).to.equal(child2.props.name);
+    });
+
+    it('should rerender when children are removed', async () => {
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      const {children: prevChildren} = lastProps;
+      expect(prevChildren).to.have.lengthOf(2);
+      const {1: prevChild2} = prevChildren;
+
+      const oldChild = element.querySelector('#child1');
+      element.removeChild(oldChild);
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+
+      const {children} = lastProps;
+      expect(children).to.have.lengthOf(1);
+      const {0: child2} = children;
+
+      // No changes.
+      expect(child2.type).to.equal(Slot);
+      expect(child2.props).to.deep.equal({
+        name: prevChild2.props.name,
+        boolDefTrue: true,
+        combined: 'C+D',
+        params: {test: 'helloworld2', testTwo: 'confirm2'},
+      });
+      expect(element.querySelector('#child2').slot).to.equal(
+        prevChild2.props.name
+      );
+    });
+
+    it('should rerender on reorder', async () => {
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      const {children: prevChildren} = lastProps;
+      expect(prevChildren).to.have.lengthOf(2);
+      const {0: prevChild1, 1: prevChild2} = prevChildren;
+
+      element.insertBefore(
+        element.querySelector('#child2'),
+        element.querySelector('#child1')
+      );
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+
+      const {children} = lastProps;
+      expect(children).to.have.lengthOf(2);
+      const {0: child2, 1: child1} = children;
+
+      // No changes, except for ordering.
+      expect(child1.type).to.equal(Slot);
+      expect(child1.props).to.deep.equal({
+        name: prevChild1.props.name,
+        boolDefTrue: true,
+        combined: 'A+B',
+        params: {test: 'helloworld', testTwo: 'confirm'},
+      });
+      expect(element.querySelector('#child1').slot).to.equal(
+        prevChild1.props.name
+      );
+      expect(child2.type).to.equal(Slot);
+      expect(child2.props).to.deep.equal({
+        name: prevChild2.props.name,
+        boolDefTrue: true,
+        combined: 'C+D',
+        params: {test: 'helloworld2', testTwo: 'confirm2'},
+      });
+      expect(element.querySelector('#child2').slot).to.equal(
+        prevChild2.props.name
+      );
+    });
+
+    it('should ignore service children mutations', async () => {
+      await waitForMutation(element, () => {
+        const newChild1 = doc.createElement('i-amphtml-size');
+        element.appendChild(newChild1);
+
+        const newChild2 = doc.createElement('div');
+        newChild2.setAttribute('slot', 'i-amphtml-svc');
+        element.appendChild(newChild2);
+      });
+
+      // Execute a handled mutation and check that execution happened only
+      // twice.
+      element.setAttribute('prop-a', 'B');
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+    });
+
+    it('clones children (without descendant) as vnodes into prop', async () => {
+      expect(
+        component.withArgs(
+          env.sandbox.match({
+            cloned: [
+              env.sandbox.match({
+                type: 'div',
+                key: element.querySelector('#cloned1'),
+                props: {
+                  cloned: '',
+                  id: 'cloned1',
+                },
+              }),
+              env.sandbox.match({
+                type: 'div',
+                key: element.querySelector('#cloned2'),
+                props: {
+                  cloned: '',
+                  id: 'cloned2',
+                },
+              }),
+            ],
+          })
+        )
+      ).to.be.calledOnce;
+    });
+  });
+
+  describe('passthrough mapping', () => {
+    let element;
+
+    beforeEach(async () => {
+      Impl['usesShadowDom'] = true;
+      Impl['props'] = {
+        'children': {passthrough: true},
+        'propA': {attr: 'prop-a'},
+      };
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100">
+          Some <b>text</b>
+        </amp-preact>
+      `;
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+    });
+
+    it('should return requiresShadowDom', () => {
+      expect(Impl.requiresShadowDom()).to.be.true;
+    });
+
+    it('should render into shadow DOM', () => {
+      expect(component).to.be.calledOnce;
+      expect(element.shadowRoot).to.be.ok;
+      expect(element.shadowRoot.querySelector('#component')).to.be.ok;
+      expect(element.querySelector('#component')).to.not.be.ok;
+    });
+
+    it('should pass children as prop slot for single-element mapping', () => {
+      const {children} = lastProps;
+      expect(children).to.have.lengthOf(1);
+      const child = children[0];
+      expect(child.type).to.equal(Slot);
+      expect(child.props).to.deep.equal({loading: 'lazy'});
+      expect(element.querySelector('b').slot).to.equal('');
+    });
+
+    it('should re-render on content changes', async () => {
+      element.textContent = 'Different content';
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+
+      // No changes.
+      const {children} = lastProps;
+      expect(children).to.have.lengthOf(1);
+      const child = children[0];
+      expect(child.type).to.equal(Slot);
+      expect(child.props).to.deep.equal({loading: 'lazy'});
+    });
+
+    it('should re-render on empty content', async () => {
+      element.textContent = '';
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+
+      // No changes.
+      const {children} = lastProps;
+      expect(children).to.have.lengthOf(1);
+      const child = children[0];
+      expect(child.type).to.equal(Slot);
+      expect(child.props).to.deep.equal({loading: 'lazy'});
+    });
+
+    it('should ignore service children mutations', async () => {
+      await waitForMutation(element, () => {
+        const newChild1 = doc.createElement('i-amphtml-size');
+        element.appendChild(newChild1);
+
+        const newChild2 = doc.createElement('div');
+        newChild2.setAttribute('slot', 'i-amphtml-svc');
+        element.appendChild(newChild2);
+      });
+
+      // Execute a handled mutation and check that execution happened only
+      // twice.
+      element.setAttribute('prop-a', 'B');
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+    });
+  });
+
+  describe('passthrough with empty mapping', () => {
+    let element;
+
+    beforeEach(async () => {
+      Impl['usesShadowDom'] = true;
+      Impl['props'] = {
+        'children': {passthroughNonEmpty: true},
+        'propA': {attr: 'prop-a'},
+      };
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100"> text </amp-preact>
+      `;
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+    });
+
+    it('should return requiresShadowDom', () => {
+      expect(Impl.requiresShadowDom()).to.be.true;
+    });
+
+    it('should render into shadow DOM', () => {
+      expect(component).to.be.calledOnce;
+      expect(element.shadowRoot).to.be.ok;
+      expect(element.shadowRoot.querySelector('#component')).to.be.ok;
+      expect(element.querySelector('#component')).to.not.be.ok;
+    });
+
+    it('should pass children when not empty', () => {
+      const {children} = lastProps;
+      expect(children).to.have.lengthOf(1);
+      const child = children[0];
+      expect(child.type).to.equal(Slot);
+      expect(child.props).to.deep.equal({loading: 'lazy'});
+    });
+
+    it('should pass children as undefined when empty', async () => {
+      element.textContent = '   ';
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+      expect(lastProps.children).to.be.undefined;
+    });
+
+    it('should re-render on content changes', async () => {
+      element.textContent = 'Different content';
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+
+      // No changes.
+      const {children} = lastProps;
+      expect(children).to.have.lengthOf(1);
+      const child = children[0];
+      expect(child.type).to.equal(Slot);
+      expect(child.props).to.deep.equal({loading: 'lazy'});
+    });
+
+    it('should ignore service children mutations', async () => {
+      await waitForMutation(element, () => {
+        const newChild1 = doc.createElement('i-amphtml-size');
+        element.appendChild(newChild1);
+
+        const newChild2 = doc.createElement('div');
+        newChild2.setAttribute('slot', 'i-amphtml-svc');
+        element.appendChild(newChild2);
+      });
+
+      // Execute a handled mutation and check that execution happened only
+      // twice.
+      element.setAttribute('prop-a', 'B');
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+    });
+  });
+
+  describe('delegatesFocus mapping', () => {
+    let element;
+
+    beforeEach(async () => {
+      Impl['delegatesFocus'] = true;
+      Impl['props'] = {'children': {passThroughNonEmpty: true}};
+      Impl['usesShadowDom'] = true;
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100"></amp-preact>
+      `;
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+    });
+
+    it('should focus on the host when an element in the shadow DOM receives focus', async () => {
+      // expect the shadowRoot to have delegatesFocus property set to true
+      expect(element.shadowRoot.delegatesFocus).to.be.true;
+
+      // initial focus is not on host
+      expect(doc.activeElement).to.not.equal(element);
+
+      // focus an element within the shadow DOM
+      const inner = element.shadowRoot.querySelector('#component');
+      // required to receive focus
+      inner.setAttribute('tabIndex', 0);
+      inner.focus();
+
+      // host receives focus and custom style for outline
+      expect(doc.activeElement).to.equal(element);
+    });
+  });
+
+  describe('children with passthrough mapping', () => {
+    let element;
+    const DATE_STRING = '2018-01-01T08:00:00Z';
+    const DATE = Date.parse(DATE_STRING);
+
+    beforeEach(async () => {
+      Impl['usesShadowDom'] = true;
+      Impl['props'] = {
+        'cloned': {
+          selector: '[cloned]',
+          single: false,
+          clone: true,
+        },
+        'propA': {attr: 'prop-a'},
+        'special1': {
+          props: {
+            'noValue': {attr: 'no-value'},
+            'valueWithDef': {attr: 'value-with-def', default: 'DEFAULT'},
+            'propA': {attr: 'prop-a'},
+            'minFontSize': {attr: 'min-font-size', type: 'number'},
+            'aDate': {attr: 'a-date', type: 'date'},
+            'disabled': {attr: 'disabled', type: 'boolean'},
+            'enabled': {attr: 'enabled', type: 'boolean'},
+          },
+          selector: '[special1]',
+          single: true,
+        },
+        'special2': {
+          selector: '[special2]',
+          single: true,
+        },
+        'children': {
+          passthrough: true,
+        },
+      };
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100">
+          <div
+            special1
+            prop-a="A"
+            min-font-size="72"
+            disabled
+            unknown="1"
+          ></div>
+          <div
+            id="child1"
+            part-a="A"
+            part-b="B"
+            data-param-test="helloworld"
+            data-param-test-two="confirm"
+            prefix="pref"
+          ></div>
+          <div
+            id="child2"
+            part-a="C"
+            part-b="D"
+            data-param-test="helloworld2"
+            data-param-test-two="confirm2"
+            prefix="pref2"
+          ></div>
+          <div cloned id="cloned1"></div>
+          <div cloned id="cloned2"></div>
+          text (should be passed through)
+        </amp-preact>
+      `;
+      element.firstElementChild.setAttribute('a-date', DATE_STRING);
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+    });
+
+    it('should render into shadow DOM', () => {
+      expect(component).to.be.calledOnce;
+      expect(element.shadowRoot).to.be.ok;
+      expect(element.shadowRoot.querySelector('#component')).to.be.ok;
+      expect(element.querySelector('#component')).to.not.be.ok;
+    });
+
+    it('should skip unavailable children', () => {
+      expect(lastProps).to.not.have.property('special2');
+    });
+
+    it('should pass children as prop slot for single-element mapping and parse attributes', () => {
+      const {special1} = lastProps;
+      expect(special1.type).to.equal(Slot);
+      expect(special1.props).to.deep.equal({
+        name: 'i-amphtml-special1',
+        valueWithDef: 'DEFAULT',
+        propA: 'A',
+        minFontSize: 72,
+        aDate: DATE,
+        disabled: true,
+      });
+
+      expect(element.querySelector('[special1]').slot).to.equal(
+        'i-amphtml-special1'
+      );
+    });
+
+    it('should pass children as prop slot array and parse attributes', () => {
+      const {children} = lastProps;
+      expect(children).to.have.lengthOf(1);
+      const child = children[0];
+      expect(child.type).to.equal(Slot);
+      expect(child.props).to.deep.equal({loading: 'lazy'});
+      expect(element.querySelector('#child1').slot).to.equal('');
+      expect(element.querySelector('#child2').slot).to.equal('');
+      expect(element.textContent).to.contain('text (should be passed through)');
+    });
+
+    it('should rerender on new children', async () => {
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      const {children: prevChildren, specialAs: prevSpecialAs} = lastProps;
+      expect(prevChildren).to.have.lengthOf(1);
+
+      const newChild = createElementWithAttributes(doc, 'div', {
+        'id': 'child3',
+        'part-a': 'E',
+        'part-b': 'F',
+      });
+      element.appendChild(newChild);
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+
+      const {children, specialAs} = lastProps;
+      expect(children).to.have.lengthOf(1);
+      const child = children[0];
+
+      // New child.
+      expect(child.type).to.equal(Slot);
+      expect(child.props).to.deep.equal({loading: 'lazy'});
+      expect(element.querySelector('#child3').slot).to.equal('');
+
+      // No changes.
+      expect(element.querySelector('#child1').slot).to.equal('');
+      expect(element.querySelector('#child2').slot).to.equal('');
+      expect(element.textContent).to.contain('text (should be passed through)');
+      expect(specialAs).to.deep.equal(prevSpecialAs);
+    });
+
+    it('should rerender on text change', async () => {
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      const {children: prevChildren} = lastProps;
+      expect(prevChildren).to.have.lengthOf(1);
+
+      const newChild = doc.createTextNode('more text');
+      element.appendChild(newChild);
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+
+      const {children} = lastProps;
+      expect(children).to.have.lengthOf(1);
+      const child = children[0];
+
+      // New child.
+      expect(child.type).to.equal(Slot);
+      expect(child.props).to.deep.equal({loading: 'lazy'});
+      expect(element.textContent).to.contain('more text');
+
+      // No changes.
+      expect(element.querySelector('#child1').slot).to.equal('');
+      expect(element.querySelector('#child2').slot).to.equal('');
+      expect(element.textContent).to.contain('text (should be passed through)');
+    });
+
+    it('should rerender when children are removed', async () => {
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      const {children: prevChildren} = lastProps;
+      expect(prevChildren).to.have.lengthOf(1);
+
+      const oldChild = element.querySelector('#child1');
+      element.removeChild(oldChild);
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+
+      const {children} = lastProps;
+      expect(children).to.have.lengthOf(1);
+      const child = children[0];
+      expect(child.type).to.equal(Slot);
+      expect(child.props).to.deep.equal({loading: 'lazy'});
+
+      // No changes.
+      expect(element.querySelector('#child2').slot).to.equal('');
+      expect(element.textContent).to.contain('text (should be passed through)');
+    });
+
+    it('should rerender on reorder', async () => {
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      const {children: prevChildren} = lastProps;
+      expect(prevChildren).to.have.lengthOf(1);
+      const child1 = element.querySelector('#child1');
+      const child2 = element.querySelector('#child2');
+      expect(child1.nextElementSibling).to.equal(child2);
+
+      element.insertBefore(
+        element.querySelector('#child2'),
+        element.querySelector('#child1')
+      );
+
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+
+      const {children} = lastProps;
+      expect(children).to.have.lengthOf(1);
+      const child = children[0];
+      expect(child.type).to.equal(Slot);
+      expect(child.props).to.deep.equal({loading: 'lazy'});
+
+      // No changes, except for ordering
+      expect(child1.slot).to.equal('');
+      expect(child2.slot).to.equal('');
+      expect(child2.nextElementSibling).to.equal(child1);
+      expect(element.textContent).to.contain('text (should be passed through)');
+    });
+
+    it('should ignore service children mutations', async () => {
+      await waitForMutation(element, () => {
+        const newChild1 = doc.createElement('i-amphtml-size');
+        element.appendChild(newChild1);
+
+        const newChild2 = doc.createElement('div');
+        newChild2.setAttribute('slot', 'i-amphtml-svc');
+        element.appendChild(newChild2);
+      });
+
+      // Execute a handled mutation and check that execution happened only
+      // twice.
+      element.setAttribute('prop-a', 'B');
+      await waitFor(() => component.callCount > 1, 'component re-rendered');
+      expect(component).to.be.calledTwice;
+    });
+
+    it('clones children (without descendant) as vnodes into prop', async () => {
+      expect(
+        component.withArgs(
+          env.sandbox.match({
+            cloned: [
+              env.sandbox.match({
+                type: 'div',
+                key: element.querySelector('#cloned1'),
+                props: {
+                  cloned: '',
+                  id: 'cloned1',
+                },
+              }),
+              env.sandbox.match({
+                type: 'div',
+                key: element.querySelector('#cloned2'),
+                props: {
+                  cloned: '',
+                  id: 'cloned2',
+                },
+              }),
+            ],
+          })
+        )
+      ).to.be.calledOnce;
+    });
+  });
+});
diff --git a/test/unit/preact/test-base-element-runtime.js b/test/unit/preact/test-base-element-runtime.js
new file mode 100644
index 0000000000000..f9f6132fa8605
--- /dev/null
+++ b/test/unit/preact/test-base-element-runtime.js
@@ -0,0 +1,574 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact/index';
+import {CanRender} from '../../../src/context/contextprops';
+import {
+  PreactBaseElement,
+  whenUpgraded,
+} from '../../../src/preact/base-element';
+import {Slot} from '../../../src/preact/slot';
+import {forwardRef} from '../../../src/preact/compat';
+import {getSchedulerForDoc} from '../../../src/service/scheduler';
+import {htmlFor} from '../../../src/static-template';
+import {installResizeObserverStub} from '../../../testing/resize-observer-stub';
+import {removeElement} from '../../../src/dom';
+import {subscribe} from '../../../src/context';
+import {upgradeOrRegisterElement} from '../../../src/service/custom-element-registry';
+import {useAmpContext, useLoading} from '../../../src/preact/context';
+import {waitFor} from '../../../testing/test-helper';
+
+describes.realWin('PreactBaseElement', {amp: true}, (env) => {
+  let win, doc, html;
+  let Impl, component, lastProps, lastContext, lastLoading;
+  let loader;
+  let api;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    html = htmlFor(doc);
+
+    Impl = class extends PreactBaseElement {
+      isLayoutSupported() {
+        return true;
+      }
+    };
+    loader = env.sandbox.stub();
+    api = null;
+    component = env.sandbox.stub().callsFake((props, ref) => {
+      lastProps = props;
+      lastContext = useAmpContext();
+      lastLoading = useLoading(props.loading);
+      loader(lastLoading, props);
+      if (props.empty) {
+        return null;
+      }
+      Preact.useImperativeHandle(ref, () => api);
+      return <Slot name="slot1" />;
+    });
+    Impl['Component'] = forwardRef(component);
+    Impl['loadable'] = true;
+    Impl['props'] = {
+      'empty': {attr: 'empty', type: 'boolean'},
+    };
+    Impl['usesShadowDom'] = true;
+    upgradeOrRegisterElement(win, 'amp-preact', Impl);
+  });
+
+  function waitForProp(element, prop, targetValue) {
+    return new Promise((resolve) => {
+      subscribe(element, [prop], (value) => {
+        if (value == targetValue) {
+          resolve();
+        }
+      });
+    });
+  }
+
+  it('preact ref passing vnode smoke test', () => {
+    function App() {
+      // Don't call useImperativeHandle.
+    }
+    const ref = env.sandbox.spy();
+    Preact.render(<App ref={ref} />, document.body);
+    // When this test fails, that means Preact has fixed their ref setting.
+    // See https://github.com/preactjs/preact/issues/3084
+    // Please remove the hack in src/preact/base-element.js inside `checkApiWrapper_`,
+    // and add a `.not` below so we don't regress again.
+    expect(ref).to.be.called;
+  });
+
+  describe('context', () => {
+    let element;
+
+    beforeEach(() => {
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100">
+          <div id="child1" slot="slot1"></div>
+          <div id="child2"></div>
+        </amp-preact>
+      `;
+      doc.body.appendChild(element);
+    });
+
+    it('should render with default context', async () => {
+      await element.mountInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      expect(lastContext).to.contain({
+        renderable: true,
+        playable: true,
+        loading: 'auto',
+      });
+      expect(lastLoading).to.equal('auto');
+      expect(loader).to.not.be.calledWith(true);
+    });
+
+    it('should propagate context to children', async () => {
+      await element.mountInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+
+      const child1 = element.querySelector('#child1');
+      const child2 = element.querySelector('#child2');
+      await waitForProp(child1, CanRender, true);
+      await waitForProp(child2, CanRender, false);
+    });
+
+    it('should rediscover children when slot is removed', async () => {
+      function getSlot() {
+        return (
+          element.shadowRoot &&
+          element.shadowRoot.querySelector('slot[name="slot1"]')
+        );
+      }
+
+      await element.mountInternal();
+      const child1 = element.querySelector('#child1');
+
+      await waitFor(() => getSlot(), 'slot rendered');
+      await waitForProp(child1, CanRender, true);
+
+      // Slot is removed and the child1 goes to the "unslotted" group.
+      element.setAttribute('empty', '');
+      await waitFor(() => !getSlot(), 'slot removed');
+      await waitForProp(child1, CanRender, false);
+    });
+
+    it('should load when requested', async () => {
+      const loadEventSpy = env.sandbox.spy();
+      const errorEventSpy = env.sandbox.spy();
+      element.addEventListener('load', loadEventSpy);
+      element.addEventListener('error', errorEventSpy);
+
+      // Build.
+      await element.mountInternal();
+      expect(element.readyState).to.equal('loading');
+      expect(loader).to.be.calledWith('auto');
+      expect(lastLoading).to.equal('auto');
+
+      // Complete.
+      const props = loader.firstCall.args[1];
+      props.onReadyState('complete');
+      expect(element.readyState).to.equal('complete');
+      expect(loadEventSpy).to.be.calledOnce;
+      expect(loadEventSpy.firstCall.firstArg).to.contain({bubbles: false});
+      expect(errorEventSpy).to.not.be.called;
+    });
+
+    it('should handle load failure', async () => {
+      const loadEventSpy = env.sandbox.spy();
+      const errorEventSpy = env.sandbox.spy();
+      element.addEventListener('load', loadEventSpy);
+      element.addEventListener('error', errorEventSpy);
+
+      // Build.
+      await element.mountInternal();
+      expect(element.readyState).to.equal('loading');
+      expect(loader).to.be.calledWith('auto');
+      expect(lastLoading).to.equal('auto');
+
+      // Complete.
+      const props = loader.firstCall.args[1];
+      props.onReadyState('error', new Error('intentional'));
+      expect(element.readyState).to.equal('error');
+      expect(errorEventSpy).to.be.calledOnce;
+      expect(errorEventSpy.firstCall.firstArg).to.contain({bubbles: false});
+      expect(loadEventSpy).to.not.be.called;
+    });
+
+    it('should update readyState=complete from the component ref API', async () => {
+      const loadEventSpy = env.sandbox.spy();
+      const errorEventSpy = env.sandbox.spy();
+      element.addEventListener('load', loadEventSpy);
+      element.addEventListener('error', errorEventSpy);
+
+      api = {readyState: 'complete'};
+
+      // Build.
+      await element.mountInternal();
+      expect(element.readyState).to.equal('complete');
+      expect(loadEventSpy).to.be.calledOnce;
+      expect(loadEventSpy.firstCall.firstArg).to.contain({bubbles: false});
+      expect(errorEventSpy).to.not.be.called;
+    });
+
+    it('should update readyState=error from the component ref API', async () => {
+      const loadEventSpy = env.sandbox.spy();
+      const errorEventSpy = env.sandbox.spy();
+      element.addEventListener('load', loadEventSpy);
+      element.addEventListener('error', errorEventSpy);
+
+      api = {readyState: 'error'};
+
+      // Build.
+      await element.mountInternal();
+      expect(element.readyState).to.equal('error');
+      expect(errorEventSpy).to.be.calledOnce;
+      expect(errorEventSpy.firstCall.firstArg).to.contain({bubbles: false});
+      expect(loadEventSpy).to.not.be.called;
+    });
+
+    it('should continue as loading from the ref API withouth readyState', async () => {
+      const loadEventSpy = env.sandbox.spy();
+      const errorEventSpy = env.sandbox.spy();
+      element.addEventListener('load', loadEventSpy);
+      element.addEventListener('error', errorEventSpy);
+
+      api = {};
+
+      // Build.
+      await element.mountInternal();
+      expect(element.readyState).to.equal('loading');
+      expect(loadEventSpy).to.not.be.called;
+      expect(errorEventSpy).to.not.be.called;
+    });
+
+    it('should load with loading=auto by default', async () => {
+      await element.mountInternal();
+      expect(lastLoading).to.equal('auto');
+    });
+
+    it('should load with loading=eager on ensureLoaded', async () => {
+      await element.mountInternal();
+      expect(lastLoading).to.equal('auto');
+
+      // Should set loading=eager.
+      component.resetHistory();
+      element.ensureLoaded();
+      await waitFor(() => component.callCount > 0, 'component rerendered');
+      expect(lastLoading).to.equal('eager');
+
+      // Should reset back to loading=auto.
+      component.resetHistory();
+      lastProps.onReadyState('complete');
+      await waitFor(() => component.callCount > 0, 'component rerendered');
+      expect(lastLoading).to.equal('auto');
+    });
+  });
+
+  describe('pause', () => {
+    let element;
+    let resizeObserverStub;
+
+    beforeEach(() => {
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100">
+          <div id="child1" slot="slot1"></div>
+          <div id="child2"></div>
+        </amp-preact>
+      `;
+      doc.body.appendChild(element);
+
+      resizeObserverStub = installResizeObserverStub(env.sandbox, win);
+    });
+
+    it('should call pause API on pauseCallback', async () => {
+      const pauseStub = env.sandbox.stub();
+      api = {pause: pauseStub};
+
+      await element.mountInternal();
+
+      element.pause();
+      expect(pauseStub).to.be.calledOnce;
+    });
+
+    it('should unload on pauseCallback with unloadOnPause', async () => {
+      Impl['unloadOnPause'] = true;
+
+      await element.mountInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+
+      element.pause();
+
+      component.resetHistory();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      expect(lastLoading).to.equal('unload');
+
+      // Reset loading after pause.
+      component.resetHistory();
+      lastProps.onReadyState('loading');
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      expect(lastLoading).to.equal('auto');
+    });
+
+    it('should NOT track size until playing', async () => {
+      await element.mountInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+
+      expect(resizeObserverStub.isObserved(element)).to.be.false;
+
+      lastProps.onPlayingState(true);
+      expect(resizeObserverStub.isObserved(element)).to.be.true;
+
+      lastProps.onPlayingState(false);
+      expect(resizeObserverStub.isObserved(element)).to.be.false;
+    });
+
+    it('should track size when unloadOnPause when loaded', async () => {
+      Impl['unloadOnPause'] = true;
+
+      await element.mountInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+
+      expect(resizeObserverStub.isObserved(element)).to.be.false;
+
+      lastProps.onReadyState('complete');
+      expect(resizeObserverStub.isObserved(element)).to.be.true;
+
+      lastProps.onReadyState('loading');
+      expect(resizeObserverStub.isObserved(element)).to.be.false;
+    });
+
+    it('should NOT track size when disconnected', async () => {
+      await element.mountInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      lastProps.onPlayingState(true);
+      expect(resizeObserverStub.isObserved(element)).to.be.true;
+
+      element.parentNode.removeChild(element);
+      expect(resizeObserverStub.isObserved(element)).to.be.false;
+    });
+
+    it('should pause element when size becomes zero', async () => {
+      const pauseStub = env.sandbox.stub();
+      api = {pause: pauseStub};
+
+      await element.mountInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      lastProps.onPlayingState(true);
+      expect(resizeObserverStub.isObserved(element)).to.be.true;
+      expect(pauseStub).to.not.be.called;
+
+      // Non-zero size.
+      resizeObserverStub.notifySync({
+        target: element,
+        borderBoxSize: [{inlineSize: 10, blockSize: 10}],
+      });
+      expect(pauseStub).to.not.be.called;
+
+      // Zero size.
+      resizeObserverStub.notifySync({
+        target: element,
+        borderBoxSize: [{inlineSize: 0, blockSize: 0}],
+      });
+      expect(pauseStub).to.be.calledOnce;
+    });
+  });
+
+  describe('connect/disconnect', () => {
+    let element;
+
+    beforeEach(() => {
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100">
+          <div id="child1" slot="slot1"></div>
+          <div id="child2"></div>
+        </amp-preact>
+      `;
+      doc.body.appendChild(element);
+    });
+
+    function getSlot() {
+      return (
+        element.shadowRoot &&
+        element.shadowRoot.querySelector('slot[name="slot1"]')
+      );
+    }
+
+    it('should unrender component on disconnect', async () => {
+      await element.mountInternal();
+      await waitFor(() => getSlot(), 'content rendered');
+
+      // Disconnect.
+      removeElement(element);
+      await waitFor(() => getSlot() === null, 'content unrendered');
+    });
+
+    it('should rerender component on reconnect', async () => {
+      await element.mountInternal();
+      await waitFor(() => getSlot(), 'content rendered');
+      removeElement(element);
+      await waitFor(() => getSlot() === null, 'content unrendered');
+
+      // Reconnect.
+      doc.body.appendChild(element);
+      await waitFor(() => getSlot(), 'content rerendered');
+    });
+  });
+
+  describe('mount/unmount', () => {
+    let element;
+
+    beforeEach(() => {
+      element = html`
+        <amp-preact layout="fixed" width="100" height="100"> </amp-preact>
+      `;
+      doc.body.appendChild(element);
+    });
+
+    it('should render with loading=auto when mounted', async () => {
+      await element.mountInternal();
+      expect(lastLoading).to.equal('auto');
+    });
+
+    it('should render with loading=unload when unmounted', async () => {
+      // Block from rescheduling.
+      const scheduler = getSchedulerForDoc(env.ampdoc);
+      env.sandbox.stub(scheduler, 'schedule');
+
+      // Mount the first time.
+      await element.mountInternal();
+
+      // Unmount.
+      component.resetHistory();
+      element.unmount();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      expect(lastLoading).to.equal('unload');
+
+      // Mount again.
+      component.resetHistory();
+      await element.mountInternal();
+      await waitFor(() => component.callCount > 0, 'component rendered');
+      expect(lastLoading).to.equal('auto');
+    });
+  });
+});
+
+describes.realWin('whenUpgraded', {amp: true}, (env) => {
+  let win;
+  let doc;
+  let Impl;
+  let Component;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+
+    Impl = class extends PreactBaseElement {
+      isLayoutSupported() {
+        return true;
+      }
+    };
+    Component = (props, ref) => {
+      Preact.useImperativeHandle(ref, () => {
+        return {key: true};
+      });
+    };
+    Impl['Component'] = forwardRef(Component);
+    Impl['usesShadowDom'] = true;
+    Impl['loadable'] = true;
+  });
+
+  it('waits for CE definition', async () => {
+    const el = doc.createElement('amp-preact');
+    doc.body.appendChild(el);
+    const p = whenUpgraded(el);
+    upgradeOrRegisterElement(win, 'amp-preact', Impl);
+    el.mountInternal();
+
+    const api = await p;
+    expect(api.key).to.be.true;
+  });
+
+  it('waits for build', async () => {
+    const el = doc.createElement('amp-preact');
+    doc.body.appendChild(el);
+    upgradeOrRegisterElement(win, 'amp-preact', Impl);
+    const p = whenUpgraded(el);
+    el.mountInternal();
+
+    const api = await p;
+    expect(api.key).to.be.true;
+  });
+
+  it('resolves after mount', async () => {
+    const el = doc.createElement('amp-preact');
+    doc.body.appendChild(el);
+    upgradeOrRegisterElement(win, 'amp-preact', Impl);
+    await el.mountInternal();
+    const p = whenUpgraded(el);
+
+    const api = await p;
+    expect(api.key).to.be.true;
+  });
+
+  it('wraps API to preserve object identity accross rerenders', async () => {
+    let imperativeApi;
+    let setState;
+    Component = env.sandbox.stub().callsFake((props, ref) => {
+      const [state, set] = Preact.useState(0);
+      setState = set;
+      Preact.useImperativeHandle(ref, () => {
+        return (imperativeApi = {state});
+      });
+    });
+    Impl['Component'] = forwardRef(Component);
+    const el = doc.createElement('amp-preact');
+    doc.body.appendChild(el);
+    upgradeOrRegisterElement(win, 'amp-preact', Impl);
+    const p = whenUpgraded(el);
+    el.mountInternal();
+
+    const api = await p;
+    expect(api).not.to.equal(imperativeApi);
+    expect(api.state).to.equal(0);
+
+    const current = Component.callCount;
+    setState(1);
+    await waitFor(
+      () => Component.callCount > current,
+      'rerender after setState'
+    );
+
+    const api2 = await whenUpgraded(el);
+    expect(api2).to.equal(api);
+    expect(api.state).to.equal(1);
+  });
+
+  it('throws when API surface changes after rerender', async () => {
+    let setState;
+    Component = env.sandbox.stub().callsFake((props, ref) => {
+      const [api, set] = Preact.useState({
+        first: true,
+      });
+      setState = set;
+      Preact.useImperativeHandle(ref, () => {
+        return api;
+      });
+    });
+    Impl['Component'] = forwardRef(Component);
+    const el = doc.createElement('amp-preact');
+    doc.body.appendChild(el);
+    upgradeOrRegisterElement(win, 'amp-preact', Impl);
+    const p = whenUpgraded(el);
+    el.mountInternal();
+
+    const api = await p;
+    expect(api.first).to.be.true;
+    expect(el).not.to.have.display('none');
+
+    const current = Component.callCount;
+    setState({
+      second: true,
+    });
+    await waitFor(
+      () => Component.callCount > current,
+      'rerender after setState'
+    );
+
+    expect(el).to.have.class('i-amphtml-error');
+  });
+});
diff --git a/test/unit/preact/test-context.js b/test/unit/preact/test-context.js
new file mode 100644
index 0000000000000..2b40dcdabe367
--- /dev/null
+++ b/test/unit/preact/test-context.js
@@ -0,0 +1,155 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact/index';
+import {
+  WithAmpContext,
+  useAmpContext,
+  useLoading,
+} from '../../../src/preact/context';
+import {mount} from 'enzyme';
+
+describes.sandboxed('preact/context', {}, () => {
+  function Component(props) {
+    const context = useAmpContext();
+    const loading = useLoading(props.loading);
+    return <ContextReader {...context} computedLoading={loading} />;
+  }
+
+  function ContextReader() {
+    return <div />;
+  }
+
+  it('should use default values', () => {
+    const wrapper = mount(
+      <WithAmpContext>
+        <Component />
+      </WithAmpContext>
+    );
+    expect(wrapper.find(ContextReader).props()).to.contain({
+      renderable: true,
+      playable: true,
+      loading: 'auto',
+      computedLoading: 'auto',
+    });
+  });
+
+  it('should override renderable', () => {
+    const wrapper = mount(
+      <WithAmpContext renderable={false}>
+        <Component />
+      </WithAmpContext>
+    );
+    expect(wrapper.find(ContextReader).props()).to.contain({
+      renderable: false,
+      playable: false,
+      loading: 'lazy',
+      computedLoading: 'lazy',
+    });
+  });
+
+  it('should override playable', () => {
+    const wrapper = mount(
+      <WithAmpContext playable={false}>
+        <Component />
+      </WithAmpContext>
+    );
+    expect(wrapper.find(ContextReader).props()).to.contain({
+      renderable: true,
+      playable: false,
+      loading: 'auto',
+      computedLoading: 'auto',
+    });
+  });
+
+  it('should override loading=lazy', () => {
+    const wrapper = mount(
+      <WithAmpContext loading={'lazy'}>
+        <Component />
+      </WithAmpContext>
+    );
+    expect(wrapper.find(ContextReader).props()).to.contain({
+      renderable: true,
+      playable: true,
+      loading: 'lazy',
+      computedLoading: 'lazy',
+    });
+  });
+
+  it('should override loading=eager', () => {
+    const wrapper = mount(
+      <WithAmpContext loading={'eager'}>
+        <Component />
+      </WithAmpContext>
+    );
+    expect(wrapper.find(ContextReader).props()).to.contain({
+      renderable: true,
+      playable: true,
+      loading: 'eager',
+      computedLoading: 'eager',
+    });
+  });
+
+  it('should override prop.loading', () => {
+    const wrapper = mount(
+      <WithAmpContext loading={'eager'}>
+        <Component loading={'unload'} />
+      </WithAmpContext>
+    );
+    expect(wrapper.find(ContextReader).props()).to.contain({
+      renderable: true,
+      playable: true,
+      loading: 'eager',
+      computedLoading: 'unload',
+    });
+  });
+
+  it('should keep in load mode when started', () => {
+    const wrapper = mount(
+      <WithAmpContext>
+        <Component />
+      </WithAmpContext>
+    );
+    expect(wrapper.find(ContextReader).props()).to.contain({
+      loading: 'auto',
+      computedLoading: 'auto',
+    });
+
+    wrapper.setProps({loading: 'lazy'});
+    expect(wrapper.find(ContextReader).props()).to.contain({
+      loading: 'lazy',
+      computedLoading: 'lazy',
+    });
+  });
+
+  it('should cancel load on unload even when started', () => {
+    const wrapper = mount(
+      <WithAmpContext>
+        <Component />
+      </WithAmpContext>
+    );
+    expect(wrapper.find(ContextReader).props()).to.contain({
+      loading: 'auto',
+      computedLoading: 'auto',
+    });
+
+    wrapper.setProps({loading: 'unload'});
+    expect(wrapper.find(ContextReader).props()).to.contain({
+      loading: 'unload',
+      computedLoading: 'unload',
+    });
+  });
+});
diff --git a/test/unit/preact/test-slot.js b/test/unit/preact/test-slot.js
new file mode 100644
index 0000000000000..1a4763f50b11a
--- /dev/null
+++ b/test/unit/preact/test-slot.js
@@ -0,0 +1,435 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import * as Preact from '../../../src/preact/index';
+import * as fakeTimers from '@sinonjs/fake-timers';
+import {
+  CanPlay,
+  CanRender,
+  LoadingProp,
+} from '../../../src/context/contextprops';
+import {Slot, createSlot, useSlotContext} from '../../../src/preact/slot';
+import {WithAmpContext} from '../../../src/preact/context';
+import {createElementWithAttributes} from '../../../src/dom';
+import {createRef, useLayoutEffect, useRef} from '../../../src/preact';
+import {forwardRef} from '../../../src/preact/compat';
+import {mount} from 'enzyme';
+import {setIsRoot, subscribe} from '../../../src/context';
+
+describes.sandboxed('Slot', {}, () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(
+      <WithAmpContext>
+        <div>
+          <Slot name="slot1" />
+        </div>
+      </WithAmpContext>
+    );
+    setIsRoot(wrapper.find('div').getDOMNode(), true);
+  });
+
+  function getProp(element, prop) {
+    return new Promise((resolve) => {
+      subscribe(element, [prop], resolve);
+    });
+  }
+
+  it('should set context props on a slot', async () => {
+    const slot = wrapper.find(Slot).getDOMNode();
+    await expect(getProp(slot, CanRender)).to.be.eventually.true;
+    await expect(getProp(slot, CanPlay)).to.be.eventually.true;
+    await expect(getProp(slot, LoadingProp)).to.be.eventually.equal('auto');
+  });
+
+  it('should update CanRender on a slot', async () => {
+    wrapper.setProps({renderable: false});
+
+    const slot = wrapper.find(Slot).getDOMNode();
+    await expect(getProp(slot, CanRender)).to.be.eventually.false;
+    await expect(getProp(slot, CanPlay)).to.be.eventually.false;
+    await expect(getProp(slot, LoadingProp)).to.be.eventually.equal('lazy');
+  });
+
+  it('should update CanPlay on a slot', async () => {
+    wrapper.setProps({playable: false});
+
+    const slot = wrapper.find(Slot).getDOMNode();
+    await expect(getProp(slot, CanRender)).to.be.eventually.true;
+    await expect(getProp(slot, CanPlay)).to.be.eventually.false;
+    await expect(getProp(slot, LoadingProp)).to.be.eventually.equal('auto');
+  });
+
+  it('should update LoadingProp on a slot', async () => {
+    wrapper.setProps({loading: 'eager'});
+
+    const slot = wrapper.find(Slot).getDOMNode();
+    await expect(getProp(slot, CanRender)).to.be.eventually.true;
+    await expect(getProp(slot, CanPlay)).to.be.eventually.true;
+    await expect(getProp(slot, LoadingProp)).to.be.eventually.equal('eager');
+  });
+
+  it('should reset props on unmount', async () => {
+    wrapper.setProps({renderable: false});
+
+    const slot = wrapper.find(Slot).getDOMNode();
+    await expect(getProp(slot, CanRender)).to.be.eventually.false;
+
+    wrapper.unmount();
+    await expect(getProp(slot, CanRender)).to.be.eventually.true;
+  });
+});
+
+describes.realWin('Slot mount/unmount', {}, (env) => {
+  let win, doc, clock;
+  let host;
+  let wrapper;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    delete win.requestIdleCallback;
+    clock = fakeTimers.withGlobal(win).install();
+
+    host = doc.createElement('div');
+    doc.body.appendChild(host);
+  });
+
+  afterEach(() => {
+    clock.uninstall();
+  });
+
+  function stubAmpElement(element) {
+    element.classList.add('i-amphtml-element');
+
+    element.ensureLoaded = env.sandbox.stub();
+    element.pause = env.sandbox.stub();
+    element.unmount = env.sandbox.stub();
+    element.getPlaceholder = () => null;
+
+    return element;
+  }
+
+  describe('with Shadow DOM', () => {
+    let shadowRoot;
+    let child1, child2;
+
+    before(function () {
+      if (!Element.prototype.attachShadow) {
+        this.skipTest();
+      }
+    });
+
+    beforeEach(() => {
+      child1 = createAmpElement({slot: 'slot1'});
+      child2 = createAmpElement({slot: 'slot1'});
+      host.append(child1, child2);
+
+      shadowRoot = host.attachShadow({mode: 'open'});
+      setIsRoot(shadowRoot, true);
+
+      wrapper = mount(
+        <WithAmpContext>
+          <div>
+            <Slot name="slot1" />
+          </div>
+        </WithAmpContext>,
+        {attachTo: shadowRoot}
+      );
+    });
+
+    function createAmpElement(attrs) {
+      const element = createElementWithAttributes(doc, 'amp-element', attrs);
+      return stubAmpElement(element);
+    }
+
+    it('should load AMP elements on mount', () => {
+      clock.runAll();
+      expect(child1.ensureLoaded).to.be.calledOnce;
+      expect(child2.ensureLoaded).to.be.calledOnce;
+      expect(child1.unmount).to.not.be.called;
+      expect(child2.unmount).to.not.be.called;
+      expect(child1.pause).to.not.be.called;
+      expect(child2.pause).to.not.be.called;
+    });
+
+    it('should unmount AMP elements on unmount', () => {
+      wrapper.unmount();
+      clock.runAll();
+      expect(child1.unmount).to.be.calledOnce;
+      expect(child2.unmount).to.be.calledOnce;
+      expect(child1.pause).to.not.be.called;
+      expect(child2.pause).to.not.be.called;
+    });
+
+    it('should pause AMP elements when playable changes', () => {
+      wrapper.setProps({playable: false});
+      clock.runAll();
+      expect(child1.pause).to.be.calledOnce;
+      expect(child2.pause).to.be.calledOnce;
+      expect(child1.unmount).to.not.be.called;
+      expect(child2.unmount).to.not.be.called;
+    });
+
+    it('should pause before mount', () => {
+      wrapper.unmount();
+      clock.runAll();
+      child1.ensureLoaded.resetHistory();
+      child1.pause.resetHistory();
+      child1.unmount.resetHistory();
+
+      const order = [];
+      child1.ensureLoaded.callsFake(() => order.push('ensureLoaded'));
+      child1.pause.callsFake(() => order.push('pause'));
+
+      // Mount in non-playable mode.
+      wrapper.setProps({playable: false});
+      wrapper.mount();
+      clock.runAll();
+      expect(child1.pause).to.be.calledOnce;
+      expect(child1.ensureLoaded).to.be.calledOnce;
+      expect(child1.unmount).to.not.be.called;
+      expect(order).to.deep.equal(['pause', 'ensureLoaded']);
+    });
+  });
+
+  describe('with Shadow DOM and loading=lazy slot', () => {
+    let shadowRoot;
+    let child1, child2;
+
+    before(function () {
+      if (!Element.prototype.attachShadow) {
+        this.skipTest();
+      }
+    });
+
+    beforeEach(() => {
+      child1 = createAmpElement({slot: 'slot1'});
+      child2 = createAmpElement({slot: 'slot1'});
+      host.append(child1, child2);
+
+      shadowRoot = host.attachShadow({mode: 'open'});
+      setIsRoot(shadowRoot, true);
+
+      wrapper = mount(
+        <WithAmpContext>
+          <div>
+            <Slot name="slot1" loading="lazy" />
+          </div>
+        </WithAmpContext>,
+        {attachTo: shadowRoot}
+      );
+    });
+
+    function createAmpElement(attrs) {
+      const element = createElementWithAttributes(doc, 'amp-element', attrs);
+      return stubAmpElement(element);
+    }
+
+    it('should load AMP elements on mount', () => {
+      clock.runAll();
+      expect(child1.ensureLoaded).to.not.be.called;
+      expect(child2.ensureLoaded).to.not.be.called;
+      expect(child1.unmount).to.not.be.called;
+      expect(child2.unmount).to.not.be.called;
+      expect(child1.pause).to.not.be.called;
+      expect(child2.pause).to.not.be.called;
+    });
+
+    it('should unmount AMP elements on unmount', () => {
+      wrapper.unmount();
+      clock.runAll();
+      expect(child1.unmount).to.be.calledOnce;
+      expect(child2.unmount).to.be.calledOnce;
+      expect(child1.pause).to.not.be.called;
+      expect(child2.pause).to.not.be.called;
+    });
+
+    it('should pause AMP elements when playable changes', () => {
+      wrapper.setProps({playable: false});
+      clock.runAll();
+      expect(child1.pause).to.be.calledOnce;
+      expect(child2.pause).to.be.calledOnce;
+      expect(child1.unmount).to.not.be.called;
+      expect(child2.unmount).to.not.be.called;
+    });
+  });
+
+  describe('with Light DOM', () => {
+    let child1Ref, child2Ref;
+
+    beforeEach(() => {
+      setIsRoot(host, true);
+
+      child1Ref = createRef();
+      child2Ref = createRef();
+      const AmpElement = forwardRef(AmpElementWithRef);
+      wrapper = mount(
+        <WithAmpContext>
+          <div>
+            <Container>
+              <AmpElement key="1" ref={child1Ref} />
+              <AmpElement key="2" ref={child2Ref} />
+            </Container>
+          </div>
+        </WithAmpContext>,
+        {attachTo: host}
+      );
+    });
+
+    function Container({children, ...rest}) {
+      const ref = useRef();
+      useSlotContext(ref);
+      return (
+        <div ref={ref} {...rest}>
+          {children}
+        </div>
+      );
+    }
+
+    function AmpElementWithRef(props, ref) {
+      useLayoutEffect(() => {
+        const element = ref.current;
+        stubAmpElement(element);
+      }, [ref]);
+      return <amp-element ref={ref} {...props} />;
+    }
+
+    it('should load AMP elements on mount', () => {
+      const child1 = child1Ref.current;
+      const child2 = child2Ref.current;
+      clock.runAll();
+      expect(child1.ensureLoaded).to.be.calledOnce;
+      expect(child2.ensureLoaded).to.be.calledOnce;
+      expect(child1.unmount).to.not.be.called;
+      expect(child2.unmount).to.not.be.called;
+      expect(child1.pause).to.not.be.called;
+      expect(child2.pause).to.not.be.called;
+    });
+
+    it('should unmount AMP elements on unmount', () => {
+      const child1 = child1Ref.current;
+      const child2 = child2Ref.current;
+      wrapper.unmount();
+      clock.runAll();
+      expect(child1.unmount).to.be.calledOnce;
+      expect(child2.unmount).to.be.calledOnce;
+      expect(child1.pause).to.not.be.called;
+      expect(child2.pause).to.not.be.called;
+    });
+
+    it('should pause AMP elements when playable changes', () => {
+      const child1 = child1Ref.current;
+      const child2 = child2Ref.current;
+      wrapper.setProps({playable: false});
+      clock.runAll();
+      expect(child1.pause).to.be.calledOnce;
+      expect(child2.pause).to.be.calledOnce;
+      expect(child1.unmount).to.not.be.called;
+      expect(child2.unmount).to.not.be.called;
+    });
+  });
+});
+
+describes.realWin('createSlot', {}, (env) => {
+  let win, doc;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+  });
+
+  it('should create slot and set corresponding slot attr', () => {
+    const element = doc.createElement('div');
+    const slot = createSlot(element, 'element');
+    expect(element.getAttribute('slot')).to.equal('element');
+    expect(slot.type).to.equal(Slot);
+    expect(slot.props).to.deep.equal({'name': 'element'});
+  });
+
+  it('should create slot with props', () => {
+    const element = doc.createElement('div');
+    const slot = createSlot(element, 'element', {'propA': true});
+    expect(element.getAttribute('slot')).to.equal('element');
+    expect(slot.type).to.equal(Slot);
+    expect(slot.props).to.deep.equal({'name': 'element', 'propA': true});
+  });
+
+  it('should create slot function and set corresponding slot attr', () => {
+    const element = doc.createElement('div');
+    const slotComp = createSlot(element, 'element', {}, /* as */ true);
+    expect(element.getAttribute('slot')).to.equal('element');
+
+    expect(typeof slotComp).to.equal('function');
+    expect(slotComp.name).to.equal('SlotWithProps');
+
+    const slot = slotComp();
+    expect(slot.type).to.equal(Slot);
+    expect(slot.props).to.deep.equal({'name': 'element'});
+  });
+
+  it('should create slot function with props', () => {
+    const element = doc.createElement('div');
+    const slotComp = createSlot(
+      element,
+      'element',
+      {'propA': true},
+      /* as */ true
+    );
+    expect(element.getAttribute('slot')).to.equal('element');
+
+    expect(typeof slotComp).to.equal('function');
+    expect(slotComp.name).to.equal('SlotWithProps');
+
+    const slot = slotComp();
+    expect(slot.type).to.equal(Slot);
+    expect(slot.props).to.deep.equal({'name': 'element', 'propA': true});
+  });
+
+  it('should return cached slot function', () => {
+    const element = doc.createElement('div');
+    const slotComp = createSlot(element, 'element', {}, /* as */ true);
+    const slotComp2 = createSlot(element, 'element', {}, /* as */ true);
+    expect(slotComp2).to.deep.equal(slotComp);
+  });
+
+  it('should update cached slot function with new defaultProps', () => {
+    const element = doc.createElement('div');
+    const slotComp = createSlot(
+      element,
+      'element',
+      {'propA': false},
+      /* as */ true
+    );
+    const slotComp2 = createSlot(
+      element,
+      'element',
+      {'propA': true},
+      /* as */ true
+    );
+    expect(slotComp2).not.to.deep.equal(slotComp);
+  });
+
+  it('should return unique slot functions for unique elements', () => {
+    const element = doc.createElement('div');
+    const slotComp = createSlot(element, 'element', {}, /* as */ true);
+
+    const element2 = doc.createElement('div');
+    const slotComp2 = createSlot(element2, 'element', {}, /* as */ true);
+    expect(slotComp2).not.to.deep.equal(slotComp);
+  });
+});
diff --git a/test/unit/test-3p-environment.js b/test/unit/test-3p-environment.js
index c3d9520889c12..6d97f518c4a61 100644
--- a/test/unit/test-3p-environment.js
+++ b/test/unit/test-3p-environment.js
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {Services} from '../../src/services';
 import {createIframePromise} from '../../testing/iframe';
 import {loadPromise} from '../../src/event-helper';
 import {manageWin, setInViewportForTesting} from '../../3p/environment';
 
-describe('3p environment', () => {
+describes.sandboxed('3p environment', {}, () => {
   let testWin;
   let iframeCount;
   const timer = Services.timerFor(window);
@@ -106,7 +106,7 @@ describe('3p environment', () => {
       progress = '';
       // testWin is created before each test and destroyed when the iframe it
       // comes from gets detached, causing bugs if we call clock.uninstall().
-      clock = lolex.install({target: testWin});
+      clock = fakeTimers.withGlobal(testWin).install();
     });
 
     function add(p) {
diff --git a/test/unit/test-3p.js b/test/unit/test-3p.js
index 6aeee4a9cf323..45c7f33b73c4c 100644
--- a/test/unit/test-3p.js
+++ b/test/unit/test-3p.js
@@ -23,11 +23,11 @@ import {
   validateSrcPrefix,
 } from '../../3p/3p';
 
-describe('3p', () => {
+describes.sandboxed('3p', {}, (env) => {
   let clock;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
   });
 
   afterEach(() => {
diff --git a/test/unit/test-action.js b/test/unit/test-action.js
index 61115feb1ba1e..198faca808609 100644
--- a/test/unit/test-action.js
+++ b/test/unit/test-action.js
@@ -25,12 +25,11 @@ import {
   ActionTrust,
   DEFAULT_ACTION,
   RAW_OBJECT_ARGS_KEY,
-} from '../../src/action-constants';
+} from '../../src/core/constants/action-constants';
 import {AmpDocSingle} from '../../src/service/ampdoc-impl';
-import {Keys} from '../../src/utils/key-codes';
+import {Keys} from '../../src/core/constants/key-codes';
 import {createCustomEvent} from '../../src/event-helper';
 import {htmlFor} from '../../src/static-template';
-import {setParentWindow} from '../../src/service';
 import {whenCalled} from '../../testing/test-helper.js';
 
 /**
@@ -47,7 +46,7 @@ function actionService() {
       },
     },
     __AMP_SERVICES: {
-      vsync: {obj: {}},
+      vsync: {obj: {}, ctor: Object},
     },
   };
   return new ActionService(new AmpDocSingle(win), document);
@@ -84,7 +83,7 @@ function assertInvocation(
   }
 }
 
-describe('ActionService parseAction', () => {
+describes.sandboxed('ActionService parseAction', {}, () => {
   function parseMultipleActions(s) {
     const actionMap = parseActionMap(s);
     if (actionMap == null) {
@@ -471,7 +470,7 @@ describe('ActionService parseAction', () => {
   });
 });
 
-describe('ActionService setActions', () => {
+describes.sandboxed('ActionService setActions', {}, () => {
   it('should set actions', () => {
     const action = actionService();
     const element = document.createElement('div');
@@ -492,7 +491,7 @@ describe('ActionService setActions', () => {
   });
 });
 
-describe('Action parseActionMap', () => {
+describes.sandboxed('Action parseActionMap', {}, () => {
   it('should parse with a single action', () => {
     const m = parseActionMap('event1:action1');
     expect(m['event1'][0].target).to.equal('action1');
@@ -518,29 +517,6 @@ describe('Action parseActionMap', () => {
   });
 });
 
-describes.sandboxed('Action adoptEmbedWindow', {}, () => {
-  let action;
-  let embedWin;
-
-  beforeEach(() => {
-    action = actionService();
-    embedWin = {
-      frameElement: document.createElement('div'),
-      document: document.implementation.createHTMLDocument(''),
-    };
-    setParentWindow(embedWin, action.ampdoc.win);
-  });
-
-  it('should create embedded action service', () => {
-    ActionService.installInEmbedWindow(embedWin, action.ampdoc);
-    const embedService =
-      embedWin.__AMP_SERVICES.action && embedWin.__AMP_SERVICES.action.obj;
-    expect(embedService).to.exist;
-    expect(embedService.ampdoc).to.equal(action.ampdoc);
-    expect(embedService.root_).to.equal(embedWin.document);
-  });
-});
-
 describes.sandboxed('Action findAction', {}, () => {
   let action;
 
@@ -868,11 +844,11 @@ describes.sandboxed('Action method', {}, (env) => {
         const {
           actionEventType,
           args,
+          caller,
+          event,
           method,
           node,
           source,
-          caller,
-          event,
           tagOrTarget,
           trust,
         } = invocation;
@@ -1507,7 +1483,7 @@ describes.fakeWin('Core events', {amp: true}, (env) => {
       element,
       'change',
       env.sandbox.match((e) => {
-        const {min, max, value, valueAsNumber} = e.detail;
+        const {max, min, value, valueAsNumber} = e.detail;
         return (
           min === '0' && max === '10' && value === '5' && valueAsNumber === 5
         );
diff --git a/test/unit/test-activity.js b/test/unit/test-activity.js
index 6364a4b3aab43..0f4a4123385a3 100644
--- a/test/unit/test-activity.js
+++ b/test/unit/test-activity.js
@@ -15,7 +15,7 @@
  */
 
 import {AmpDocSingle} from '../../src/service/ampdoc-impl';
-import {Observable} from '../../src/observable';
+import {Observable} from '../../src/core/data-structures/observable';
 import {Services} from '../../src/services';
 import {installActivityServiceForTesting} from '../../extensions/amp-analytics/0.1/activity-impl';
 import {installPlatformService} from '../../src/service/platform-impl';
@@ -25,7 +25,7 @@ import {installViewportServiceForDoc} from '../../src/service/viewport/viewport-
 import {installVsyncService} from '../../src/service/vsync-impl';
 import {markElementScheduledForTesting} from '../../src/service/custom-element-registry';
 
-describe('Activity getTotalEngagedTime', () => {
+describes.sandboxed('Activity getTotalEngagedTime', {}, (env) => {
   let clock;
   let fakeDoc;
   let fakeWin;
@@ -39,7 +39,7 @@ describe('Activity getTotalEngagedTime', () => {
   let scrollObservable;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
 
     // start at something other than 0
     clock.tick(123456);
@@ -101,6 +101,7 @@ describe('Activity getTotalEngagedTime', () => {
         isSingleDoc: () => true,
         getSingleDoc: () => ampdoc,
       },
+      ctor: Object,
     };
 
     installTimerService(fakeWin);
@@ -111,17 +112,17 @@ describe('Activity getTotalEngagedTime', () => {
     const whenFirstVisiblePromise = new Promise((resolve) => {
       whenFirstVisibleResolve = resolve;
     });
-    window.sandbox
+    env.sandbox
       .stub(ampdoc, 'whenFirstVisible')
       .returns(whenFirstVisiblePromise);
-    window.sandbox.stub(ampdoc, 'onVisibilityChanged').callsFake((handler) => {
+    env.sandbox.stub(ampdoc, 'onVisibilityChanged').callsFake((handler) => {
       return visibilityObservable.add(handler);
     });
 
     installViewportServiceForDoc(ampdoc);
     viewport = Services.viewportForDoc(ampdoc);
 
-    window.sandbox.stub(viewport, 'onScroll').callsFake((handler) => {
+    env.sandbox.stub(viewport, 'onScroll').callsFake((handler) => {
       scrollObservable.add(handler);
     });
 
@@ -176,9 +177,7 @@ describe('Activity getTotalEngagedTime', () => {
   });
 
   it('should not accumulate engaged time after inactivity', () => {
-    const isVisibleStub = window.sandbox
-      .stub(ampdoc, 'isVisible')
-      .returns(true);
+    const isVisibleStub = env.sandbox.stub(ampdoc, 'isVisible').returns(true);
     whenFirstVisibleResolve();
     return ampdoc
       .whenFirstVisible()
@@ -217,10 +216,7 @@ describe('Activity getTotalEngagedTime', () => {
     'should set event listeners on the document for' +
       ' "mousedown", "mouseup", "mousemove", "keyup", "keydown", "mouseleave"',
     () => {
-      const addEventListenerSpy = window.sandbox.spy(
-        fakeDoc,
-        'addEventListener'
-      );
+      const addEventListenerSpy = env.sandbox.spy(fakeDoc, 'addEventListener');
       expect(addEventListenerSpy).to.not.have.been.calledWith(
         'mousedown',
         activity.boundHandleActivity_
@@ -258,7 +254,7 @@ describe('Activity getTotalEngagedTime', () => {
   );
 });
 
-describe('Activity getIncrementalEngagedTime', () => {
+describes.sandboxed('Activity getIncrementalEngagedTime', {}, (env) => {
   let clock;
   let fakeDoc;
   let fakeWin;
@@ -271,7 +267,7 @@ describe('Activity getIncrementalEngagedTime', () => {
   let scrollObservable;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
 
     // start at something other than 0
     clock.tick(123456);
@@ -330,6 +326,7 @@ describe('Activity getIncrementalEngagedTime', () => {
         isSingleDoc: () => true,
         getSingleDoc: () => ampdoc,
       },
+      ctor: Object,
     };
 
     installTimerService(fakeWin);
@@ -340,17 +337,17 @@ describe('Activity getIncrementalEngagedTime', () => {
     const whenFirstVisiblePromise = new Promise((resolve) => {
       whenFirstVisibleResolve = resolve;
     });
-    window.sandbox
+    env.sandbox
       .stub(ampdoc, 'whenFirstVisible')
       .returns(whenFirstVisiblePromise);
-    window.sandbox.stub(ampdoc, 'onVisibilityChanged').callsFake((handler) => {
+    env.sandbox.stub(ampdoc, 'onVisibilityChanged').callsFake((handler) => {
       return visibilityObservable.add(handler);
     });
 
     installViewportServiceForDoc(ampdoc);
     viewport = Services.viewportForDoc(ampdoc);
 
-    window.sandbox.stub(viewport, 'onScroll').callsFake((handler) => {
+    env.sandbox.stub(viewport, 'onScroll').callsFake((handler) => {
       scrollObservable.add(handler);
     });
 
diff --git a/test/unit/test-ad-cid.js b/test/unit/test-ad-cid.js
index a467f1d555bc1..3539f40b303a2 100644
--- a/test/unit/test-ad-cid.js
+++ b/test/unit/test-ad-cid.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {Services} from '../../src/services';
 import {adConfig} from '../../ads/_config';
 import {cidServiceForDocForTesting} from '../../src/service/cid-impl';
@@ -32,8 +32,7 @@ describes.realWin('ad-cid', {amp: true}, (env) => {
 
   beforeEach(() => {
     win = env.win;
-    clock = lolex.install({
-      target: win,
+    clock = fakeTimers.withGlobal(win).install({
       toFake: ['Date', 'setTimeout', 'clearTimeout'],
     });
     element = env.win.document.createElement('amp-ad');
diff --git a/test/unit/test-ad-helper.js b/test/unit/test-ad-helper.js
index e1ab266313a75..341c45685bfb0 100644
--- a/test/unit/test-ad-helper.js
+++ b/test/unit/test-ad-helper.js
@@ -18,7 +18,7 @@ import {computedStyle} from '../../src/style';
 import {createIframePromise} from '../../testing/iframe';
 import {getAdContainer, isAdPositionAllowed} from '../../src/ad-helper';
 
-describe('ad-helper', () => {
+describes.sandboxed('ad-helper', {}, () => {
   describe('isAdPositionAllowed function', () => {
     it('should allow position fixed element that is allowlisted', () => {
       return createIframePromise().then((iframe) => {
diff --git a/test/unit/test-ads-config.js b/test/unit/test-ads-config.js
index 34a340829fc93..00f645b87c15a 100644
--- a/test/unit/test-ads-config.js
+++ b/test/unit/test-ads-config.js
@@ -15,9 +15,9 @@
  */
 
 import {adConfig} from '../../ads/_config';
-import {hasOwn} from '../../src/utils/object';
+import {hasOwn} from '../../src/core/types/object';
 
-describe('test-ads-config', () => {
+describes.sandboxed('test-ads-config', {}, () => {
   it('should have all ad networks configured', () => {
     window.ampTestRuntimeConfig.adTypes.forEach((adType) => {
       expect(adConfig, `Missing config for [${adType}]`).to.contain.key(adType);
diff --git a/test/unit/test-alp-handler.js b/test/unit/test-alp-handler.js
index 1575d70732c8d..d8ed0f74aa40e 100644
--- a/test/unit/test-alp-handler.js
+++ b/test/unit/test-alp-handler.js
@@ -17,7 +17,7 @@
 import {handleClick, warmupDynamic, warmupStatic} from '../../ads/alp/handler';
 import {parseUrlDeprecated} from '../../src/url';
 
-describe('alp-handler', () => {
+describes.sandboxed('alp-handler', {}, (env) => {
   let event;
   let anchor;
   let open;
@@ -32,32 +32,32 @@ describe('alp-handler', () => {
       Image() {
         image = this;
       },
-      postMessage: window.sandbox.stub(),
+      postMessage: env.sandbox.stub(),
       _id: 'base-win',
     };
     win.parent = {
-      postMessage: window.sandbox.stub(),
+      postMessage: env.sandbox.stub(),
       _id: 'p0',
     };
     win.parent.parent = {
-      postMessage: window.sandbox.stub(),
+      postMessage: env.sandbox.stub(),
       _id: 'p1',
     };
     win.parent.parent.parent = {
-      postMessage: window.sandbox.stub(),
+      postMessage: env.sandbox.stub(),
       _id: 'p2',
     };
     win.parent.parent.parent.parent = {
-      postMessage: window.sandbox.stub(),
+      postMessage: env.sandbox.stub(),
       _id: 'p3',
     };
-    open = window.sandbox.stub(win, 'open').callsFake(() => {
+    open = env.sandbox.stub(win, 'open').callsFake(() => {
       return {};
     });
     const doc = {
       defaultView: win,
       head: {
-        appendChild: window.sandbox.spy(),
+        appendChild: env.sandbox.spy(),
       },
     };
     win.document = doc;
@@ -70,7 +70,7 @@ describe('alp-handler', () => {
           'https://cdn.ampproject.org/c/www.example.com/amp.html'
         ),
       ownerDocument: doc,
-      getAttribute: window.sandbox.stub(),
+      getAttribute: env.sandbox.stub(),
       get search() {
         return parseUrlDeprecated(this.href).search;
       },
@@ -79,7 +79,7 @@ describe('alp-handler', () => {
       trusted: true,
       buttons: 0,
       target: anchor,
-      preventDefault: window.sandbox.spy(),
+      preventDefault: env.sandbox.spy(),
       defaultPrevented: false,
     };
   });
@@ -190,7 +190,7 @@ describe('alp-handler', () => {
   });
 
   it('should perform special navigation if specially asked for', () => {
-    const navigateSpy = window.sandbox.spy();
+    const navigateSpy = env.sandbox.spy();
     const opt_navigate = (val) => {
       navigateSpy();
       expect(val).to.equal(
diff --git a/test/unit/test-amp-context.js b/test/unit/test-amp-context.js
index a96b516129c1b..c4834d2d8d26d 100644
--- a/test/unit/test-amp-context.js
+++ b/test/unit/test-amp-context.js
@@ -19,13 +19,13 @@ import {Platform} from '../../src/service/platform-impl';
 
 const NOOP = () => {};
 
-describe('3p ampcontext.js', () => {
+describes.sandboxed('3p ampcontext.js', {}, (env) => {
   let windowPostMessageSpy;
   let windowMessageHandler;
   let win;
 
   beforeEach(() => {
-    windowPostMessageSpy = window.sandbox.spy();
+    windowPostMessageSpy = env.sandbox.spy();
     win = {
       addEventListener: (eventType, handlerFn) => {
         expect(eventType).to.equal('message');
@@ -166,7 +166,7 @@ describe('3p ampcontext.js', () => {
   it('should be able to send an intersection observer request', () => {
     win.name = generateSerializedAttributes();
     const context = new AmpContext(win);
-    const callbackSpy = window.sandbox.spy();
+    const callbackSpy = env.sandbox.spy();
 
     // Resetting since a message is sent on construction.
     windowPostMessageSpy.resetHistory();
@@ -211,7 +211,7 @@ describe('3p ampcontext.js', () => {
   it('should send a pM and set callback when onPageVisibilityChange()', () => {
     win.name = generateSerializedAttributes();
     const context = new AmpContext(win);
-    const callbackSpy = window.sandbox.spy();
+    const callbackSpy = env.sandbox.spy();
     const stopObserving = context.onPageVisibilityChange(callbackSpy);
 
     // window.context should have sent postMessage asking for visibility
@@ -251,6 +251,63 @@ describe('3p ampcontext.js', () => {
     expect(callbackSpy).to.be.calledOnce;
   });
 
+  it('should return promise for resize request', async () => {
+    win.name = generateSerializedAttributes();
+    const context = new AmpContext(win);
+
+    // Resetting since a message is sent on construction.
+    windowPostMessageSpy.resetHistory();
+
+    const successCallbackSpy = env.sandbox.spy();
+    const failureCallbackSpy = env.sandbox.spy();
+    const initialId = context.nextResizeRequestId_;
+
+    const height = 100;
+    const width = 200;
+
+    const promise = Promise.all([
+      context
+        .requestResize(height, width)
+        .then(successCallbackSpy)
+        .then(() => {
+          expect(successCallbackSpy).to.be.calledOnce;
+        }),
+      context
+        .requestResize(height, width)
+        .catch(failureCallbackSpy)
+        .then(() => {
+          expect(failureCallbackSpy).to.be.calledOnce;
+        }),
+    ]);
+
+    // send a resize success message down
+    const messagePayloadSuccess = {
+      sentinel: '1-291921',
+      type: MessageType.EMBED_SIZE_CHANGED,
+      id: initialId,
+      requestedHeight: 300,
+      requestedWidth: 200,
+    };
+    windowMessageHandler({
+      source: context.client_.hostWindow_,
+      data: 'amp-' + JSON.stringify(messagePayloadSuccess),
+    });
+
+    // send a resize failure message down
+    const messagePayloadFailure = {
+      sentinel: '1-291921',
+      type: MessageType.EMBED_SIZE_DENIED,
+      id: initialId + 1,
+      requestedHeight: 300,
+      requestedWidth: 200,
+    };
+    windowMessageHandler({
+      source: context.client_.hostWindow_,
+      data: 'amp-' + JSON.stringify(messagePayloadFailure),
+    });
+    return promise;
+  });
+
   it('should call resize success callback on resize success', () => {
     win.name = generateSerializedAttributes();
     const context = new AmpContext(win);
@@ -258,11 +315,14 @@ describe('3p ampcontext.js', () => {
     // Resetting since a message is sent on construction.
     windowPostMessageSpy.resetHistory();
 
-    const successCallbackSpy = window.sandbox.spy();
-    const deniedCallbackSpy = window.sandbox.spy();
+    context.sendDeprecationNotice_ = env.sandbox.spy();
+
+    const successCallbackSpy = env.sandbox.spy();
+    const deniedCallbackSpy = env.sandbox.spy();
 
     context.onResizeSuccess(successCallbackSpy);
     context.onResizeDenied(deniedCallbackSpy);
+    expect(context.sendDeprecationNotice_).to.be.calledTwice;
 
     const height = 100;
     const width = 200;
@@ -272,7 +332,7 @@ describe('3p ampcontext.js', () => {
     expect(windowPostMessageSpy).to.be.calledOnce;
     expect(windowPostMessageSpy).to.be.calledWith(
       'amp-01$internalRuntimeVersion$' +
-        '{"width":100,"height":200,"type":"embed-size","sentinel":"1-291921"}',
+        '{"id":0,"width":100,"height":200,"type":"embed-size","sentinel":"1-291921"}',
       '*'
     );
 
@@ -305,8 +365,8 @@ describe('3p ampcontext.js', () => {
     // Resetting since a message is sent on construction.
     windowPostMessageSpy.resetHistory();
 
-    const successCallbackSpy = window.sandbox.spy();
-    const deniedCallbackSpy = window.sandbox.spy();
+    const successCallbackSpy = env.sandbox.spy();
+    const deniedCallbackSpy = env.sandbox.spy();
 
     context.onResizeSuccess(successCallbackSpy);
     context.onResizeDenied(deniedCallbackSpy);
@@ -316,10 +376,9 @@ describe('3p ampcontext.js', () => {
     context.requestResize(height, width);
 
     // window.context should have sent resize request postMessage
-    expect(windowPostMessageSpy).to.be.calledOnce;
     expect(windowPostMessageSpy).to.be.calledWith(
       'amp-01$internalRuntimeVersion$' +
-        '{"width":100,"height":200,"type":"embed-size","sentinel":"1-291921"}',
+        '{"id":0,"width":100,"height":200,"type":"embed-size","sentinel":"1-291921"}',
       '*'
     );
 
diff --git a/test/unit/test-amp-img-intrinsic.js b/test/unit/test-amp-img-intrinsic.js
new file mode 100644
index 0000000000000..f3ae018eb468e
--- /dev/null
+++ b/test/unit/test-amp-img-intrinsic.js
@@ -0,0 +1,251 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {BrowserController} from '../../testing/test-helper';
+import {applyStaticLayout} from '../../src/layout';
+import {createElementWithAttributes} from '../../src/dom';
+import {createIframePromise} from '../../testing/iframe';
+import {installImg} from '../../builtins/amp-img/amp-img';
+import {toArray} from '../../src/core/types/array';
+
+describes.sandboxed('amp-img layout intrinsic', {}, () => {
+  let fixture;
+
+  beforeEach(() => {
+    return createIframePromise().then((iframeFixture) => {
+      fixture = iframeFixture;
+    });
+  });
+
+  function getImg(attributes, children) {
+    installImg(fixture.win);
+
+    const img = fixture.doc.createElement('amp-img');
+    for (const key in attributes) {
+      img.setAttribute(key, attributes[key]);
+    }
+
+    if (children != null) {
+      for (let i = 0; i < children.length; i++) {
+        img.appendChild(children[i]);
+      }
+    }
+    return Promise.resolve(fixture.addElement(img));
+  }
+
+  // Firefox misbehaves on Windows for this test because getBoundingClientRect
+  // returns 0x0 for width and height. Strangely Firefox on MacOS will return
+  // reasonable values for getBoundingClientRect if we add an explicit wait
+  // for laid out attributes via waitForElementLayout. If we change the test to
+  // test for client or offset values, Safari yields 0px measurements.
+  // For details, see: https://github.com/ampproject/amphtml/pull/24574
+  describe
+    .configure()
+    .skipFirefox()
+    .run('layout intrinsic', () => {
+      let browser;
+      beforeEach(() => {
+        fixture.iframe.height = 800;
+        fixture.iframe.width = 800;
+        browser = new BrowserController(fixture.win);
+      });
+      it('should not exceed given width and height even if image\
+      natural size is larger', async () => {
+        const ampImg = await getImg({
+          src: '/examples/img/sample.jpg', // 641 x 481
+          width: 100,
+          height: 100,
+          layout: 'intrinsic',
+        });
+        await browser.waitForElementLayout('amp-img');
+        expect(ampImg.getBoundingClientRect()).to.include({
+          width: 100,
+          height: 100,
+        });
+        const img = ampImg.querySelector('img');
+        expect(img.getBoundingClientRect()).to.include({
+          width: 100,
+          height: 100,
+        });
+      });
+
+      it('should reach given width and height even if image\
+      natural size is smaller', async () => {
+        const ampImg = await getImg({
+          src: '/examples/img/sample.jpg', // 641 x 481
+          width: 800,
+          height: 600,
+          layout: 'intrinsic',
+        });
+        await browser.waitForElementLayout('amp-img');
+        expect(ampImg.getBoundingClientRect()).to.include({
+          width: 800,
+          height: 600,
+        });
+        const img = ampImg.querySelector('img');
+        expect(img.getBoundingClientRect()).to.include({
+          width: 800,
+          height: 600,
+        });
+      });
+
+      it('expands a parent div with no explicit dimensions', async () => {
+        const parentDiv = fixture.doc.getElementById('parent');
+        // inline-block to force width and height to size of children
+        // font-size 0 to get rid of the 4px added by inline-block for whitespace
+        parentDiv.setAttribute('style', 'display: inline-block; font-size: 0;');
+        const ampImg = await getImg({
+          src: '/examples/img/sample.jpg', // 641 x 481
+          width: 600,
+          height: 400,
+          layout: 'intrinsic',
+        });
+        await browser.waitForElementLayout('amp-img');
+        expect(ampImg.getBoundingClientRect()).to.include({
+          width: 600,
+          height: 400,
+        });
+        expect(parentDiv.getBoundingClientRect()).to.include({
+          width: 600,
+          height: 400,
+        });
+      });
+
+      it('is bounded by explicit dimensions of a parent container', async () => {
+        const parentDiv = fixture.doc.getElementById('parent');
+        parentDiv.setAttribute('style', 'width: 80px; height: 80px');
+
+        const ampImg = await getImg({
+          src: '/examples/img/sample.jpg', // 641 x 481
+          width: 800,
+          height: 600,
+          layout: 'intrinsic',
+        });
+        await browser.waitForElementLayout('amp-img');
+        expect(ampImg.getBoundingClientRect()).to.include({
+          width: 80,
+          height: 60,
+        });
+        expect(parentDiv.getBoundingClientRect()).to.include({
+          width: 80,
+          height: 80,
+        });
+      });
+
+      it('SSR sizer does not interfere with img creation', async () => {
+        const parentDiv = fixture.doc.getElementById('parent');
+        parentDiv.setAttribute('style', 'width: 80px; height: 80px');
+
+        // Hack so we don't duplicate intrinsic's layout code here.
+        const tmp = createElementWithAttributes(fixture.doc, 'div', {
+          src: '/examples/img/sample.jpg', // 641 x 481
+          width: 800,
+          height: 600,
+          layout: 'intrinsic',
+        });
+        const serverRenderedImg = createElementWithAttributes(
+          fixture.doc,
+          'img',
+          {
+            src: '/examples/img/sample.jpg',
+          }
+        );
+        applyStaticLayout(tmp);
+        const attributes = {
+          'i-amphtml-ssr': '',
+        };
+        for (let i = 0; i < tmp.attributes.length; i++) {
+          attributes[tmp.attributes[i].name] = tmp.attributes[i].value;
+        }
+
+        const ampImg = await getImg(
+          attributes,
+          [serverRenderedImg].concat(toArray(tmp.children))
+        );
+        await browser.waitForElementLayout('amp-img');
+        expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.exist;
+        expect(ampImg.querySelector('img[src*="image/svg+xml"]')).to.exist;
+      });
+
+      it('SSR sizer does not interfere with SSR img before', async () => {
+        const parentDiv = fixture.doc.getElementById('parent');
+        parentDiv.setAttribute('style', 'width: 80px; height: 80px');
+
+        // Hack so we don't duplicate intrinsic's layout code here.
+        const tmp = createElementWithAttributes(fixture.doc, 'div', {
+          src: '/examples/img/sample.jpg', // 641 x 481
+          width: 800,
+          height: 600,
+          layout: 'intrinsic',
+        });
+        applyStaticLayout(tmp);
+        const attributes = {
+          'i-amphtml-ssr': '',
+        };
+        for (let i = 0; i < tmp.attributes.length; i++) {
+          attributes[tmp.attributes[i].name] = tmp.attributes[i].value;
+        }
+
+        const children = toArray(tmp.children);
+        children.unshift(
+          createElementWithAttributes(fixture.doc, 'img', {
+            decoding: 'async',
+            class: 'i-amphtml-fill-content i-amphtml-replaced-content',
+            src: tmp.getAttribute('src'),
+          })
+        );
+
+        const ampImg = await getImg(attributes, children);
+        await browser.waitForElementLayout('amp-img');
+        expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.exist;
+        expect(ampImg.querySelector('img[src*="image/svg+xml"]')).to.exist;
+      });
+
+      it('SSR sizer does not interfere with SSR img after', async () => {
+        const parentDiv = fixture.doc.getElementById('parent');
+        parentDiv.setAttribute('style', 'width: 80px; height: 80px');
+
+        // Hack so we don't duplicate intrinsic's layout code here.
+        const tmp = createElementWithAttributes(fixture.doc, 'div', {
+          src: '/examples/img/sample.jpg', // 641 x 481
+          width: 800,
+          height: 600,
+          layout: 'intrinsic',
+        });
+        applyStaticLayout(tmp);
+        const attributes = {
+          'i-amphtml-ssr': '',
+        };
+        for (let i = 0; i < tmp.attributes.length; i++) {
+          attributes[tmp.attributes[i].name] = tmp.attributes[i].value;
+        }
+
+        const children = toArray(tmp.children);
+        children.push(
+          createElementWithAttributes(fixture.doc, 'img', {
+            decoding: 'async',
+            class: 'i-amphtml-fill-content i-amphtml-replaced-content',
+            src: tmp.getAttribute('src'),
+          })
+        );
+
+        const ampImg = await getImg(attributes, children);
+        await browser.waitForElementLayout('amp-img');
+        expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.exist;
+        expect(ampImg.querySelector('img[src*="image/svg+xml"]')).to.exist;
+      });
+    });
+});
diff --git a/test/unit/test-amp-img-v1.js b/test/unit/test-amp-img-v1.js
new file mode 100644
index 0000000000000..35ccade99fceb
--- /dev/null
+++ b/test/unit/test-amp-img-v1.js
@@ -0,0 +1,691 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {AmpImg} from '../../builtins/amp-img/amp-img';
+import {BaseElement} from '../../src/base-element';
+import {Layout, LayoutPriority} from '../../src/layout';
+import {createElementWithAttributes, dispatchCustomEvent} from '../../src/dom';
+import {testElementR1} from '../../testing/element-v1';
+
+describes.realWin('amp-img R1', {amp: true}, (env) => {
+  let win, doc;
+  let sandbox;
+  let windowWidth;
+
+  const SRCSET_STRING = `/examples/img/hero@1x.jpg 641w,
+                        /examples/img/hero@2x.jpg 1282w`;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    sandbox = env.sandbox;
+
+    sandbox.stub(AmpImg, 'R1').returns(true);
+
+    windowWidth = 320;
+    sandbox.stub(BaseElement.prototype, 'getViewport').callsFake(() => {
+      return {
+        getWidth: () => windowWidth,
+      };
+    });
+  });
+
+  function createImg(attributes, children) {
+    const img = createElementWithAttributes(doc, 'amp-img', attributes);
+
+    if (children != null) {
+      for (let i = 0; i < children.length; i++) {
+        img.appendChild(children[i]);
+      }
+    }
+    return img;
+  }
+
+  async function getImg(attributes, children) {
+    const img = createImg(attributes, children);
+
+    img.onload = sandbox.spy();
+    img.onerror = sandbox.spy();
+
+    doc.body.appendChild(img);
+    await img.mount();
+    return img;
+  }
+
+  it('testElementR1', () => {
+    testElementR1(AmpImg, {
+      exceptions: [
+        'Must not have preconnectCallback',
+        'Must not have layoutCallback',
+        'Must not have unlayoutCallback',
+        'Must not use getLayoutSize',
+      ],
+    });
+  });
+
+  it('getBuildPriority', () => {
+    expect(AmpImg.getBuildPriority()).to.equal(LayoutPriority.CONTENT);
+  });
+
+  it('should load an img', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      width: 300,
+      height: 200,
+      alt: 'An image',
+      title: 'Image title',
+      referrerpolicy: 'origin',
+    });
+
+    const img = ampImg.querySelector('img');
+    expect(img.getAttribute('src')).to.equal('/examples/img/sample.jpg');
+    expect(img.getAttribute('alt')).to.equal('An image');
+    expect(img.getAttribute('title')).to.equal('Image title');
+    expect(img.getAttribute('referrerpolicy')).to.equal('origin');
+    expect(img.getAttribute('decoding')).to.equal('async');
+
+    const toggleFallbackSpy = sandbox.spy(ampImg, 'toggleFallback');
+    const togglePlaceholderSpy = sandbox.spy(ampImg, 'togglePlaceholder');
+
+    expect(ampImg.readyState).to.equal('loading');
+    expect(ampImg.onload).to.not.be.called;
+
+    dispatchCustomEvent(img, 'load', null, {bubbles: false});
+    expect(ampImg.readyState).to.equal('complete');
+    expect(ampImg.onload).to.be.calledOnce;
+    expect(ampImg.onerror).to.not.be.called;
+    expect(toggleFallbackSpy).to.not.be.called;
+    expect(togglePlaceholderSpy).to.be.calledOnce.calledWith(false);
+  });
+
+  it('should unload the img on unmount before loaded', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      width: 300,
+      height: 200,
+      alt: 'An image',
+      title: 'Image title',
+      referrerpolicy: 'origin',
+    });
+    const iniImg = ampImg.querySelector('img');
+    expect(iniImg).to.exist;
+
+    ampImg.unmount();
+    expect(ampImg.querySelector('img')).to.not.exist;
+    expect(iniImg.src).to.contain('data:image/gif;');
+  });
+
+  it('should NOT unload the img on unmount after loaded', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      width: 300,
+      height: 200,
+      alt: 'An image',
+      title: 'Image title',
+      referrerpolicy: 'origin',
+    });
+    const iniImg = ampImg.querySelector('img');
+    expect(iniImg).to.exist;
+
+    Object.defineProperty(iniImg, 'complete', {value: true});
+
+    ampImg.unmount();
+    expect(ampImg.querySelector('img')).to.equal(iniImg);
+    expect(iniImg.src).to.not.contain('data:image/gif;');
+  });
+
+  it('should set eager loading on ensureLoaded', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      width: 300,
+      height: 200,
+      alt: 'An image',
+      title: 'Image title',
+      referrerpolicy: 'origin',
+    });
+
+    const img = ampImg.querySelector('img');
+    expect(img.loading == 'auto' || !img.loading).to.be.true;
+
+    const promise = ampImg.ensureLoaded();
+    await new Promise(setTimeout);
+    expect(img.loading).to.equal('eager');
+
+    dispatchCustomEvent(img, 'load', null, {bubbles: false});
+    await promise;
+  });
+
+  it('should fail when img fails', async () => {
+    const ampImg = await getImg({
+      src: 'non-existent.jpg',
+      width: 300,
+      height: 200,
+    });
+
+    const img = ampImg.querySelector('img');
+    expect(img.getAttribute('src')).to.equal('non-existent.jpg');
+
+    const toggleFallbackSpy = sandbox.spy(ampImg, 'toggleFallback');
+    const togglePlaceholderSpy = sandbox.spy(ampImg, 'togglePlaceholder');
+
+    expect(ampImg.readyState).to.equal('loading');
+    expect(ampImg.onerror).to.not.be.called;
+
+    dispatchCustomEvent(img, 'error', null, {bubbles: false});
+    expect(ampImg.readyState).to.equal('error');
+    expect(ampImg.onerror).to.be.calledOnce;
+    expect(toggleFallbackSpy).to.be.calledOnce.calledWith(true);
+    expect(togglePlaceholderSpy).to.be.calledOnce.calledWith(false);
+    expect(ampImg.onload).to.not.be.called;
+  });
+
+  it('should fallback once and remove fallback once image loads', async () => {
+    const ampImg = await getImg({
+      src: 'non-existent.jpg',
+      width: 300,
+      height: 200,
+    });
+    const toggleFallbackSpy = sandbox.spy(ampImg, 'toggleFallback');
+
+    const img = ampImg.querySelector('img');
+    dispatchCustomEvent(img, 'error', null, {bubbles: false});
+    expect(ampImg.readyState).to.equal('error');
+    expect(ampImg.onerror).to.be.calledOnce;
+    expect(ampImg.onload).to.not.be.called;
+    expect(toggleFallbackSpy).to.be.calledOnce.calledWith(true);
+    expect(img).to.have.class('i-amphtml-ghost');
+
+    dispatchCustomEvent(img, 'load', null, {bubbles: false});
+    expect(ampImg.readyState).to.equal('complete');
+    expect(ampImg.onload).to.be.calledOnce;
+    expect(ampImg.onerror).to.be.calledOnce; // no change.
+    expect(toggleFallbackSpy).to.be.calledTwice.calledWith(false);
+    expect(img).to.not.have.class('i-amphtml-ghost');
+
+    // 2nd error doesn't toggle fallback.
+    dispatchCustomEvent(img, 'error', null, {bubbles: false});
+    expect(ampImg.readyState).to.equal('error');
+    expect(ampImg.onerror).to.be.calledTwice;
+    expect(toggleFallbackSpy).to.be.calledTwice; // no change.
+    expect(img).to.not.have.class('i-amphtml-ghost');
+  });
+
+  it('should not remove the fallback if fetching fails', async () => {
+    const ampImg = await getImg({
+      src: 'non-existent.jpg',
+      width: 300,
+      height: 200,
+    });
+    const toggleFallbackSpy = sandbox.spy(ampImg, 'toggleFallback');
+
+    const img = ampImg.querySelector('img');
+    expect(img).to.not.have.class('i-amphtml-ghost');
+
+    dispatchCustomEvent(img, 'error', null, {bubbles: false});
+    expect(ampImg.readyState).to.equal('error');
+    expect(ampImg.onerror).to.be.calledOnce;
+    expect(ampImg.onload).to.not.be.called;
+    expect(toggleFallbackSpy).to.be.calledOnce.calledWith(true);
+    expect(img).to.have.class('i-amphtml-ghost');
+
+    dispatchCustomEvent(img, 'error', null, {bubbles: false});
+    expect(toggleFallbackSpy).to.be.calledOnce; // no change.
+    expect(img).to.have.class('i-amphtml-ghost');
+  });
+
+  it('should preconnect the src url', () => {
+    const element = createImg({src: '/examples/img/sample.jpg'});
+    expect(AmpImg.getPreconnects(element)).to.deep.equal([
+      '/examples/img/sample.jpg',
+    ]);
+  });
+
+  it('should preconnect to the the first srcset url if src is not set', () => {
+    const element = createImg({srcset: SRCSET_STRING});
+    expect(AmpImg.getPreconnects(element)).to.deep.equal([
+      '/examples/img/hero@1x.jpg',
+    ]);
+  });
+
+  it('should allow prerender by default', () => {
+    const el = createImg({src: '/examples/img/sample.jpg'});
+    expect(AmpImg.prerenderAllowed(el)).to.equal(true);
+  });
+
+  it('should load an img with srcset', async () => {
+    const ampImg = await getImg({
+      srcset: SRCSET_STRING,
+      width: 300,
+      height: 200,
+    });
+    const img = ampImg.querySelector('img');
+    expect(img.getAttribute('srcset')).to.equal(SRCSET_STRING);
+  });
+
+  it('should handle attribute mutations', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      srcset: SRCSET_STRING,
+      width: 300,
+      height: 200,
+    });
+    const impl = await ampImg.getImpl();
+
+    const img = ampImg.querySelector('img');
+    expect(img.getAttribute('src')).to.equal('/examples/img/sample.jpg');
+    expect(img.getAttribute('srcset')).to.equal(SRCSET_STRING);
+
+    dispatchCustomEvent(img, 'load', null, {bubbles: false});
+    expect(ampImg.readyState).to.equal('complete');
+    expect(ampImg.onload).to.be.calledOnce;
+
+    ampImg.setAttribute('src', 'foo.jpg');
+    impl.mutatedAttributesCallback({src: 'foo.jpg'});
+
+    expect(img.getAttribute('src')).to.equal('foo.jpg');
+    // src mutation should override existing srcset attribute.
+    expect(img.hasAttribute('srcset')).to.be.false;
+
+    expect(ampImg.readyState).to.equal('loading');
+    expect(ampImg.onload).to.be.calledOnce; // no change.
+
+    dispatchCustomEvent(img, 'load', null, {bubbles: false});
+    expect(ampImg.readyState).to.equal('complete');
+    expect(ampImg.onload).to.be.calledTwice;
+  });
+
+  it('should propagate srcset and sizes', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      srcset: SRCSET_STRING,
+      sizes: '(max-width: 320px) 640px, 100vw',
+      width: 320,
+      height: 240,
+    });
+    const img = ampImg.querySelector('img');
+    expect(img.getAttribute('srcset')).to.equal(SRCSET_STRING);
+    expect(img.getAttribute('sizes')).to.equal(
+      '(max-width: 320px) 640px, 100vw'
+    );
+  });
+
+  it('should propagate data attributes', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      width: 320,
+      height: 240,
+      'data-foo': 'abc',
+    });
+    const img = ampImg.querySelector('img');
+    expect(img.getAttribute('data-foo')).to.equal('abc');
+  });
+
+  it('should not propagate bind attributes', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      width: 320,
+      height: 240,
+      'data-amp-bind': 'abc',
+      'data-amp-bind-foo': '123',
+    });
+    const img = ampImg.querySelector('img');
+    expect(img.getAttribute('data-amp-bind')).to.equal('abc');
+    expect(img.getAttribute('data-amp-bind-foo')).to.be.null;
+  });
+
+  it('should propagate srcset and sizes with disable-inline-width', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      srcset: SRCSET_STRING,
+      sizes: '(max-width: 320px) 640px, 100vw',
+      width: 320,
+      height: 240,
+      'disable-inline-width': null,
+    });
+    const img = ampImg.querySelector('img');
+    expect(img.getAttribute('srcset')).to.equal(SRCSET_STRING);
+    expect(img.getAttribute('sizes')).to.equal(
+      '(max-width: 320px) 640px, 100vw'
+    );
+  });
+
+  it('should propagate crossorigin attribute', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      width: 320,
+      height: 240,
+      crossorigin: 'anonymous',
+    });
+    const img = ampImg.querySelector('img');
+    expect(img.getAttribute('crossorigin')).to.equal('anonymous');
+  });
+
+  it('should propagate ARIA attributes', async () => {
+    const ampImg = await getImg({
+      src: 'test.jpg',
+      width: 100,
+      height: 100,
+      'aria-label': 'Hello',
+      'aria-labelledby': 'id2',
+      'aria-describedby': 'id3',
+    });
+    const img = ampImg.querySelector('img');
+    expect(img.getAttribute('aria-label')).to.equal('Hello');
+    expect(img.getAttribute('aria-labelledby')).to.equal('id2');
+    expect(img.getAttribute('aria-describedby')).to.equal('id3');
+  });
+
+  it('should propagate the object-fit attribute', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      width: 300,
+      height: 200,
+      'object-fit': 'cover',
+    });
+    const img = ampImg.querySelector('img');
+    expect(img.style.objectFit).to.equal('cover');
+  });
+
+  it('should not propagate the object-fit attribute if invalid', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      width: 300,
+      height: 200,
+      'object-fit': 'foo 80%',
+    });
+    const img = ampImg.querySelector('img');
+    expect(img.style.objectFit).to.be.empty;
+  });
+
+  it('should propagate the object-position attribute', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      width: 300,
+      height: 200,
+      'object-position': '20% 80%',
+    });
+    const img = ampImg.querySelector('img');
+    expect(img.style.objectPosition).to.equal('20% 80%');
+  });
+
+  it('should not propagate the object-position attribute if invalid', async () => {
+    const ampImg = await getImg({
+      src: '/examples/img/sample.jpg',
+      width: 300,
+      height: 200,
+      'object-position': 'url("example.com")',
+    });
+    const img = ampImg.querySelector('img');
+    expect(img.style.objectPosition).to.be.empty;
+  });
+
+  describe('blurred image placeholder', () => {
+    /**
+     * Creates an amp-img with an image child that could potentially be a
+     * blurry placeholder.
+     * @param {boolean} addPlaceholder Whether the child should have a
+     *     placeholder attribute.
+     * @param {boolean} addBlurClass Whether the child should have the
+     *     class that allows it to be a blurred placeholder.
+     * @param {boolean} serverRendered If the image is server rendered.
+     * @return {AmpImg} An amp-img object potentially with a blurry placeholder
+     */
+    function getImgWithBlur(
+      addPlaceholder,
+      addBlurClass,
+      serverRendered = false
+    ) {
+      const el = createImg({
+        src: '/examples/img/sample.jpg',
+        id: 'img1',
+        width: 100,
+        height: 100,
+      });
+      sandbox.stub(el, 'togglePlaceholder');
+      const img = doc.createElement('img');
+      img.setAttribute(
+        'src',
+        'data:image/svg+xml;charset=utf-8,%3Csvg%3E%3C/svg%3E'
+      );
+      if (addPlaceholder) {
+        img.setAttribute('placeholder', '');
+      }
+      if (addBlurClass) {
+        img.classList.add('i-amphtml-blurry-placeholder');
+      }
+      el.appendChild(img);
+      if (serverRendered) {
+        const serverRenderedImg = doc.createElement('img');
+        serverRenderedImg.setAttribute('src', '/examples/img/sample.jpg');
+        el.appendChild(serverRenderedImg);
+        el.setAttribute('i-amphtml-ssr', '');
+      }
+      doc.body.appendChild(el);
+      return el;
+    }
+
+    it('should set placeholder opacity to 0 on image load', async () => {
+      let el, img;
+
+      el = getImgWithBlur(true, true);
+      await el.build();
+      dispatchCustomEvent(el.querySelector('img[amp-img-id]'), 'load', null, {
+        bubbles: false,
+      });
+      img = el.firstChild;
+      expect(img.style.opacity).to.equal('0');
+      expect(el.togglePlaceholder).to.not.be.called;
+
+      el = getImgWithBlur(true, false);
+      await el.build();
+      dispatchCustomEvent(el.querySelector('img[amp-img-id]'), 'load', null, {
+        bubbles: false,
+      });
+      img = el.firstChild;
+      expect(img.style.opacity).to.be.equal('');
+      expect(el.togglePlaceholder).to.have.been.calledWith(false);
+
+      el = getImgWithBlur(false, true);
+      await el.build();
+      dispatchCustomEvent(el.querySelector('img[amp-img-id]'), 'load', null, {
+        bubbles: false,
+      });
+      img = el.firstChild;
+      expect(img.style.opacity).to.be.equal('');
+      expect(el.togglePlaceholder).to.have.been.calledWith(false);
+
+      el = getImgWithBlur(false, false);
+      await el.build();
+      dispatchCustomEvent(el.querySelector('img[amp-img-id]'), 'load', null, {
+        bubbles: false,
+      });
+      expect(el.togglePlaceholder).to.have.been.calledWith(false);
+    });
+
+    it('does not interfere with SSR img creation', async () => {
+      const ampImg = getImgWithBlur(true, true);
+      await ampImg.build();
+
+      expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.exist;
+      expect(ampImg.querySelector('img[src*="image/svg+xml"]')).to.exist;
+    });
+
+    it('does not interfere with SSR img before placeholder', async () => {
+      const ampImg = getImgWithBlur(true, true);
+      ampImg.setAttribute('i-amphtml-ssr', '');
+
+      const img = doc.createElement('img');
+      img.setAttribute('src', ampImg.getAttribute('src'));
+      ampImg.insertBefore(img, ampImg.querySelector('[placeholder]'));
+
+      await ampImg.build();
+
+      expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.exist;
+      expect(ampImg.querySelectorAll('img[src*="sample.jpg"]')).to.have.length(
+        1
+      );
+      expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.equal(img);
+      expect(ampImg.querySelector('img[src*="image/svg+xml"]')).to.exist;
+    });
+
+    it('does not interfere with SSR img after placeholder', async () => {
+      const ampImg = getImgWithBlur(true, true);
+      ampImg.setAttribute('i-amphtml-ssr', '');
+
+      const img = document.createElement('img');
+      img.setAttribute('src', ampImg.getAttribute('src'));
+      ampImg.appendChild(img);
+
+      await ampImg.build();
+
+      expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.exist;
+      expect(ampImg.querySelectorAll('img[src*="sample.jpg"]')).to.have.length(
+        1
+      );
+      expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.equal(img);
+      expect(ampImg.querySelector('img[src*="image/svg+xml"]')).to.exist;
+    });
+  });
+
+  describe('auto-generate sizes', () => {
+    async function getStubbedImg(attributes, layoutWidth) {
+      const img = createImg(attributes);
+      sandbox
+        .stub(img, 'getLayoutSize')
+        .returns({width: layoutWidth, height: 100});
+      doc.body.appendChild(img);
+      await img.build();
+      return img;
+    }
+
+    it('should not generate sizes for amp-imgs that already have sizes', async () => {
+      const ampImg = await getImg({
+        src: '/examples/img/sample.jpg',
+        srcset: SRCSET_STRING,
+        sizes: '50vw',
+        width: 300,
+        height: 200,
+      });
+      const img = ampImg.querySelector('img');
+      expect(img.getAttribute('sizes')).to.equal('50vw');
+    });
+
+    it('should not generate sizes for amp-imgs without srcset', async () => {
+      const ampImg = await getImg({
+        src: '/examples/img/sample.jpg',
+        width: 300,
+        height: 200,
+      });
+      const img = ampImg.querySelector('img');
+      expect(img.getAttribute('sizes')).to.be.null;
+    });
+
+    it('should not generate sizes for amp-imgs with x descriptors', async () => {
+      const ampImg = await getImg({
+        srcset: '/examples/img/hero@1x.jpg, /examples/img/hero@2x.jpg 2x',
+        width: 300,
+        height: 200,
+      });
+      const img = ampImg.querySelector('img');
+      expect(img.getAttribute('sizes')).to.be.null;
+    });
+
+    it('should generate correct sizes for layout fixed', async () => {
+      const ampImg = await getStubbedImg(
+        {
+          layout: Layout.FIXED,
+          src: 'test.jpg',
+          srcset: 'large.jpg 2000w, small.jpg 1000w',
+          width: 300,
+          height: 200,
+        },
+        300
+      );
+      const img = ampImg.querySelector('img');
+      expect(img.getAttribute('sizes')).to.equal(
+        '(max-width: 320px) 300px, 300px'
+      );
+    });
+
+    it('should generate correct sizes for layout responsive', async () => {
+      const ampImg = await getStubbedImg(
+        {
+          layout: Layout.RESPONSIVE,
+          src: 'test.jpg',
+          srcset: 'large.jpg 2000w, small.jpg 1000w',
+          width: 300,
+          height: 200,
+        },
+        160
+      );
+      const img = ampImg.querySelector('img');
+      expect(img.getAttribute('sizes')).to.equal(
+        '(max-width: 320px) 160px, 100vw'
+      );
+    });
+
+    it('should generate correct sizes for layout fixed-height', async () => {
+      const ampImg = await getStubbedImg(
+        {
+          layout: Layout.FIXED_HEIGHT,
+          src: 'test.jpg',
+          srcset: 'large.jpg 2000w, small.jpg 1000w',
+          width: 300,
+          height: 200,
+        },
+        160
+      );
+      const img = ampImg.querySelector('img');
+      expect(img.getAttribute('sizes')).to.equal(
+        '(max-width: 320px) 160px, 100vw'
+      );
+    });
+
+    it('should generate correct sizes for layout fill', async () => {
+      const ampImg = await getStubbedImg(
+        {
+          layout: Layout.FILL,
+          src: 'test.jpg',
+          srcset: 'large.jpg 2000w, small.jpg 1000w',
+          width: 300,
+          height: 200,
+        },
+        160
+      );
+      const img = ampImg.querySelector('img');
+      expect(img.getAttribute('sizes')).to.equal(
+        '(max-width: 320px) 160px, 100vw'
+      );
+    });
+
+    it('should generate correct sizes for layout flex-item', async () => {
+      const ampImg = await getStubbedImg(
+        {
+          layout: Layout.FLEX_ITEM,
+          src: 'test.jpg',
+          srcset: 'large.jpg 2000w, small.jpg 1000w',
+          width: 300,
+          height: 200,
+        },
+        160
+      );
+      const img = ampImg.querySelector('img');
+      expect(img.getAttribute('sizes')).to.equal(
+        '(max-width: 320px) 160px, 100vw'
+      );
+    });
+  });
+});
diff --git a/test/unit/test-amp-img.js b/test/unit/test-amp-img.js
index 6ffbbbb6475c3..6e4f78cc303a0 100644
--- a/test/unit/test-amp-img.js
+++ b/test/unit/test-amp-img.js
@@ -14,15 +14,12 @@
  * limitations under the License.
  */
 
-import {AmpImg, installImg} from '../../builtins/amp-img';
+import {AmpImg, installImg} from '../../builtins/amp-img/amp-img';
 import {BaseElement} from '../../src/base-element';
-import {BrowserController} from '../../testing/test-helper';
-import {Layout, LayoutPriority, applyStaticLayout} from '../../src/layout';
+import {Layout, LayoutPriority} from '../../src/layout';
 import {Services} from '../../src/services';
 import {createCustomEvent} from '../../src/event-helper';
-import {createElementWithAttributes} from '../../src/dom';
 import {createIframePromise} from '../../testing/iframe';
-import {toArray} from '../../src/types';
 
 describes.sandboxed('amp-img', {}, (env) => {
   let sandbox;
@@ -38,7 +35,6 @@ describes.sandboxed('amp-img', {}, (env) => {
 
     screenWidth = 320;
     windowWidth = 320;
-    sandbox.stub(BaseElement.prototype, 'isInViewport').returns(true);
     sandbox.stub(BaseElement.prototype, 'getViewport').callsFake(() => {
       return {
         getWidth: () => windowWidth,
@@ -69,60 +65,57 @@ describes.sandboxed('amp-img', {}, (env) => {
     return Promise.resolve(fixture.addElement(img));
   }
 
-  it('should load an img with more attributes', () => {
-    return getImg({
+  it('should load an img with more attributes', async () => {
+    const ampImg = await getImg({
       src: '/examples/img/sample.jpg',
       width: 300,
       height: 200,
       alt: 'An image',
       title: 'Image title',
       referrerpolicy: 'origin',
-    }).then((ampImg) => {
-      const img = ampImg.querySelector('img');
-      expect(img.tagName).to.equal('IMG');
-      expect(img.getAttribute('src')).to.equal('/examples/img/sample.jpg');
-      expect(ampImg.implementation_.getLayoutPriority()).to.equal(
-        LayoutPriority.CONTENT
-      );
-      expect(img.getAttribute('alt')).to.equal('An image');
-      expect(img.getAttribute('title')).to.equal('Image title');
-      expect(img.getAttribute('referrerpolicy')).to.equal('origin');
-      expect(img.getAttribute('decoding')).to.equal('async');
     });
+    const impl = await ampImg.getImpl(false);
+    expect(impl.getLayoutPriority()).to.equal(LayoutPriority.CONTENT);
+
+    const img = ampImg.querySelector('img');
+    expect(img.tagName).to.equal('IMG');
+    expect(img.getAttribute('src')).to.equal('/examples/img/sample.jpg');
+    expect(img.getAttribute('alt')).to.equal('An image');
+    expect(img.getAttribute('title')).to.equal('Image title');
+    expect(img.getAttribute('referrerpolicy')).to.equal('origin');
+    expect(img.getAttribute('decoding')).to.equal('async');
   });
 
-  it('should load an img', () => {
-    return getImg({
+  it('should load an img', async () => {
+    const ampImg = await getImg({
       src: '/examples/img/sample.jpg',
       width: 300,
       height: 200,
-    }).then((ampImg) => {
-      const img = ampImg.querySelector('img');
-      expect(img.tagName).to.equal('IMG');
-      expect(img.getAttribute('src')).to.equal('/examples/img/sample.jpg');
-      expect(ampImg.implementation_.getLayoutPriority()).to.equal(
-        LayoutPriority.CONTENT
-      );
     });
+    const impl = await ampImg.getImpl(false);
+    expect(impl.getLayoutPriority()).to.equal(LayoutPriority.CONTENT);
+
+    const img = ampImg.querySelector('img');
+    expect(img.tagName).to.equal('IMG');
+    expect(img.getAttribute('src')).to.equal('/examples/img/sample.jpg');
   });
 
-  it('should preconnect the src url', () => {
+  it('should preconnect the src url', async () => {
     const preconnect = {url: sandbox.stub()};
     sandbox.stub(Services, 'preconnectFor').returns(preconnect);
 
-    return getImg({
+    const ampImg = await getImg({
       src: '/examples/img/sample.jpg',
       width: 300,
       height: 200,
-    }).then((ampImg) => {
-      const impl = ampImg.implementation_;
-      impl.preconnectCallback(true);
-      expect(preconnect.url).to.be.called;
-      expect(preconnect.url).to.have.been.calledWith(
-        sandbox.match.object,
-        '/examples/img/sample.jpg'
-      );
     });
+    const impl = await ampImg.getImpl(false);
+    impl.preconnectCallback(true);
+    expect(preconnect.url).to.be.called;
+    expect(preconnect.url).to.have.been.calledWith(
+      sandbox.match.object,
+      '/examples/img/sample.jpg'
+    );
   });
 
   it('should load an img with srcset', () => {
@@ -140,23 +133,22 @@ describes.sandboxed('amp-img', {}, (env) => {
     });
   });
 
-  it('should preconnect to the the first srcset url if src is not set', () => {
+  it('should preconnect to the the first srcset url if src is not set', async () => {
     const preconnect = {url: sandbox.stub()};
     sandbox.stub(Services, 'preconnectFor').returns(preconnect);
 
-    return getImg({
+    const ampImg = await getImg({
       srcset: SRCSET_STRING,
       width: 300,
       height: 200,
-    }).then((ampImg) => {
-      const impl = ampImg.implementation_;
-      impl.preconnectCallback(true);
-      expect(preconnect.url).to.be.called;
-      expect(preconnect.url).to.have.been.calledWith(
-        sandbox.match.object,
-        '/examples/img/hero@1x.jpg'
-      );
     });
+    const impl = await ampImg.getImpl(false);
+    impl.preconnectCallback(true);
+    expect(preconnect.url).to.be.called;
+    expect(preconnect.url).to.have.been.calledWith(
+      sandbox.match.object,
+      '/examples/img/hero@1x.jpg'
+    );
   });
 
   it('should handle attribute mutations', async () => {
@@ -166,7 +158,7 @@ describes.sandboxed('amp-img', {}, (env) => {
       width: 300,
       height: 200,
     });
-    const impl = ampImg.implementation_;
+    const impl = await ampImg.getImpl(false);
 
     expect(impl.img_.hasAttribute('srcset')).to.be.true;
 
@@ -206,6 +198,20 @@ describes.sandboxed('amp-img', {}, (env) => {
     });
   });
 
+  it('should not propagate bind attributes', () => {
+    return getImg({
+      src: '/examples/img/sample.jpg',
+      width: 320,
+      height: 240,
+      'data-amp-bind': 'abc',
+      'data-amp-bind-foo': '123',
+    }).then((ampImg) => {
+      const img = ampImg.querySelector('img');
+      expect(img.getAttribute('data-amp-bind')).to.equal('abc');
+      expect(img.getAttribute('data-amp-bind-foo')).to.be.null;
+    });
+  });
+
   it('should propagate srcset and sizes with disable-inline-width', async () => {
     const ampImg = await getImg({
       src: '/examples/img/sample.jpg',
@@ -222,6 +228,18 @@ describes.sandboxed('amp-img', {}, (env) => {
     );
   });
 
+  it('should propagate crossorigin attribute', () => {
+    return getImg({
+      src: '/examples/img/sample.jpg',
+      width: 320,
+      height: 240,
+      crossorigin: 'anonymous',
+    }).then((ampImg) => {
+      const img = ampImg.querySelector('img');
+      expect(img.getAttribute('crossorigin')).to.equal('anonymous');
+    });
+  });
+
   describe('#fallback on initial load', () => {
     let el;
     let impl;
@@ -237,9 +255,8 @@ describes.sandboxed('amp-img', {}, (env) => {
       el.setAttribute('height', 100);
       el.getResources = () => Services.resourcesForDoc(document);
       el.getPlaceholder = sandbox.stub();
-      el.getLayoutWidth = () => 100;
+      el.getLayoutSize = () => ({width: 100, height: 100});
       impl = new AmpImg(el);
-      impl.createdCallback();
       el.toggleFallback = function () {};
       el.togglePlaceholder = function () {};
       toggleFallbackSpy = sandbox.spy(el, 'toggleFallback');
@@ -364,25 +381,42 @@ describes.sandboxed('amp-img', {}, (env) => {
     });
   });
 
-  it('should respect noprerender attribute', () => {
+  it('should allow prerender by default', () => {
     const el = document.createElement('amp-img');
     el.setAttribute('src', 'test.jpg');
     el.setAttribute('width', 100);
     el.setAttribute('height', 100);
-    el.setAttribute('noprerender', '');
-    const impl = new AmpImg(el);
-    impl.firstAttachedCallback();
-    expect(impl.prerenderAllowed()).to.equal(false);
+    expect(AmpImg.prerenderAllowed(el)).to.equal(true);
   });
 
-  it('should allow prerender by default', () => {
+  it('should propogate src as the final attribute when provided a srcset', () => {
+    // Providing src before srcset will cause Safari 14.4 to request two src values for the same `img`.
     const el = document.createElement('amp-img');
     el.setAttribute('src', 'test.jpg');
-    el.setAttribute('width', 100);
-    el.setAttribute('height', 100);
+    el.setAttribute('srcset', SRCSET_STRING);
+    el.setAttribute('width', 300);
+    el.setAttribute('height', 200);
+    el.getResources = () => Services.resourcesForDoc(document);
+    el.getPlaceholder = () => {
+      const img = document.createElement('img');
+      img.src = 'data:image/svg+xml;charset=utf-8,%3Csvg%3E%3C/svg%3E';
+      return img;
+    };
+    el.getLayout = () => 'responsive';
+    el.getLayoutSize = () => ({width: 300, height: 200});
+
     const impl = new AmpImg(el);
+    const propagateAttributesSpy = sandbox.spy(impl, 'propagateAttributes');
     impl.buildCallback();
-    expect(impl.prerenderAllowed()).to.equal(true);
+    impl.layoutCallback();
+
+    expect(propagateAttributesSpy).to.be.calledOnce;
+    const spiedAttributesToPropagate =
+      propagateAttributesSpy.getCall(0).args[0];
+
+    expect(
+      spiedAttributesToPropagate[spiedAttributesToPropagate.length - 1]
+    ).to.equal('src');
   });
 
   it('should propagate ARIA attributes', () => {
@@ -393,7 +427,7 @@ describes.sandboxed('amp-img', {}, (env) => {
     el.setAttribute('aria-label', 'Hello');
     el.setAttribute('aria-labelledby', 'id2');
     el.setAttribute('aria-describedby', 'id3');
-    el.getLayoutWidth = () => -1;
+    el.getLayoutSize = () => ({width: 0, height: 0});
 
     el.getPlaceholder = sandbox.stub();
     const impl = new AmpImg(el);
@@ -476,11 +510,18 @@ describes.sandboxed('amp-img', {}, (env) => {
      *     placeholder attribute.
      * @param {boolean} addBlurClass Whether the child should have the
      *     class that allows it to be a blurred placeholder.
+     * @param {boolean} serverRendered If the image is server rendered.
      * @return {AmpImg} An amp-img object potentially with a blurry placeholder
      */
-    function getImgWithBlur(addPlaceholder, addBlurClass) {
+    function getImgWithBlur(
+      addPlaceholder,
+      addBlurClass,
+      serverRendered = false
+    ) {
       const el = document.createElement('amp-img');
       const img = document.createElement('img');
+      el.setAttribute('src', '/examples/img/sample.jpg');
+      img.src = 'data:image/svg+xml;charset=utf-8,%3Csvg%3E%3C/svg%3E';
       if (addPlaceholder) {
         img.setAttribute('placeholder', '');
         el.getPlaceholder = () => img;
@@ -490,9 +531,15 @@ describes.sandboxed('amp-img', {}, (env) => {
       if (addBlurClass) {
         img.classList.add('i-amphtml-blurry-placeholder');
       }
-      el.getLayoutWidth = () => 200;
+      el.getLayoutSize = () => ({width: 200, height: 100});
       el.appendChild(img);
       el.getResources = () => Services.resourcesForDoc(document);
+      if (serverRendered) {
+        const serverRenderedImg = document.createElement('img');
+        serverRenderedImg.setAttribute('src', '/examples/img/sample.jpg');
+        el.appendChild(serverRenderedImg);
+        el.setAttribute('i-amphtml-ssr', '');
+      }
       const impl = new AmpImg(el);
       impl.togglePlaceholder = sandbox.stub();
       return impl;
@@ -534,6 +581,48 @@ describes.sandboxed('amp-img', {}, (env) => {
       img = el.firstChild;
       expect(impl.togglePlaceholder).to.have.been.calledWith(false);
     });
+
+    it('does not interfere with SSR img creation', () => {
+      const impl = getImgWithBlur(true, true, true);
+      const ampImg = impl.element;
+      impl.buildCallback();
+      impl.layoutCallback();
+
+      expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.exist;
+      expect(ampImg.querySelector('img[src*="image/svg+xml"]')).to.exist;
+    });
+
+    it('does not interfere with SSR img before placeholder', () => {
+      const impl = getImgWithBlur(true, true);
+      const ampImg = impl.element;
+      ampImg.setAttribute('i-amphtml-ssr', '');
+
+      const img = document.createElement('img');
+      img.src = ampImg.getAttribute('src');
+      ampImg.insertBefore(img, impl.getPlaceholder());
+
+      impl.buildCallback();
+      impl.layoutCallback();
+
+      expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.exist;
+      expect(ampImg.querySelector('img[src*="image/svg+xml"]')).to.exist;
+    });
+
+    it('does not interfere with SSR img after placeholder', () => {
+      const impl = getImgWithBlur(true, true);
+      const ampImg = impl.element;
+      ampImg.setAttribute('i-amphtml-ssr', '');
+
+      const img = document.createElement('img');
+      img.src = ampImg.getAttribute('src');
+      ampImg.appendChild(img);
+
+      impl.buildCallback();
+      impl.layoutCallback();
+
+      expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.exist;
+      expect(ampImg.querySelector('img[src*="image/svg+xml"]')).to.exist;
+    });
   });
 
   describe('auto-generate sizes', () => {
@@ -544,9 +633,8 @@ describes.sandboxed('amp-img', {}, (env) => {
       }
       el.getResources = () => Services.resourcesForDoc(document);
       el.getPlaceholder = sandbox.stub();
-      el.getLayoutWidth = () => layoutWidth;
+      el.getLayoutSize = () => ({width: layoutWidth, height: 100});
       const impl = new AmpImg(el);
-      impl.createdCallback();
       sandbox.stub(impl, 'getLayout').returns(attributes['layout']);
       el.toggleFallback = function () {};
       el.togglePlaceholder = function () {};
@@ -559,60 +647,88 @@ describes.sandboxed('amp-img', {}, (env) => {
       return impl;
     }
 
-    it('should not generate sizes for amp-imgs that already have sizes', () => {
-      let impl;
-      return getImg({
+    it('should not generate sizes for amp-imgs that already have sizes on their rendered image children', async () => {
+      const serverRenderedImg = document.createElement('img');
+      serverRenderedImg.setAttribute('src', '/examples/img/sample.jpg');
+      serverRenderedImg.setAttribute('srcset', SRCSET_STRING);
+      serverRenderedImg.setAttribute('sizes', '50vw');
+      const ampImg = await getImg(
+        {
+          src: '/examples/img/sample.jpg',
+          srcset: SRCSET_STRING,
+          sizes: '50vw',
+          width: 300,
+          height: 200,
+        },
+        [serverRenderedImg]
+      );
+      const impl = await ampImg.getImpl(false);
+      impl.buildCallback();
+      await impl.layoutCallback();
+      const img = impl.img_;
+      expect(img.getAttribute('sizes')).to.equal('50vw');
+    });
+
+    it('should not generate sizes for amp-imgs when rendered from the server', async () => {
+      const serverRenderedImg = document.createElement('img');
+      serverRenderedImg.setAttribute('src', '/examples/img/sample.jpg');
+      serverRenderedImg.setAttribute('srcset', SRCSET_STRING);
+      const ampImg = await getImg(
+        {
+          src: '/examples/img/sample.jpg',
+          srcset: SRCSET_STRING,
+          width: 300,
+          height: 200,
+          'i-amphtml-ssr': '',
+        },
+        [serverRenderedImg]
+      );
+      const impl = await ampImg.getImpl(false);
+      impl.buildCallback();
+      await impl.layoutCallback();
+      const img = impl.img_;
+      expect(img.hasAttribute('sizes')).to.be.false;
+    });
+
+    it('should not generate sizes for amp-imgs, rendered with sizes from the server', async () => {
+      const ampImg = await getImg({
         src: '/examples/img/sample.jpg',
         srcset: SRCSET_STRING,
         sizes: '50vw',
         width: 300,
         height: 200,
-      })
-        .then((ampImg) => {
-          impl = ampImg.implementation_;
-          impl.buildCallback();
-          return impl.layoutCallback();
-        })
-        .then(() => {
-          const img = impl.img_;
-          expect(img.getAttribute('sizes')).to.equal('50vw');
-        });
+      });
+      const impl = await ampImg.getImpl(false);
+      impl.buildCallback();
+      await impl.layoutCallback();
+      const img = impl.img_;
+      expect(img.getAttribute('sizes')).to.equal('50vw');
     });
 
-    it('should not generate sizes for amp-imgs without srcset', () => {
-      let impl;
-      return getImg({
+    it('should not generate sizes for amp-imgs without srcset', async () => {
+      const ampImg = await getImg({
         src: '/examples/img/sample.jpg',
         width: 300,
         height: 200,
-      })
-        .then((ampImg) => {
-          impl = ampImg.implementation_;
-          impl.buildCallback();
-          return impl.layoutCallback();
-        })
-        .then(() => {
-          const img = impl.img_;
-          expect(img.getAttribute('sizes')).to.be.null;
-        });
+      });
+      const impl = await ampImg.getImpl(false);
+      impl.buildCallback();
+      await impl.layoutCallback();
+      const img = impl.img_;
+      expect(img.getAttribute('sizes')).to.be.null;
     });
 
-    it('should not generate sizes for amp-imgs with x descriptors', () => {
-      let impl;
-      return getImg({
+    it('should not generate sizes for amp-imgs with x descriptors', async () => {
+      const ampImg = await getImg({
         srcset: '/examples/img/hero@1x.jpg, /examples/img/hero@2x.jpg 2x',
         width: 300,
         height: 200,
-      })
-        .then((ampImg) => {
-          impl = ampImg.implementation_;
-          impl.buildCallback();
-          return impl.layoutCallback();
-        })
-        .then(() => {
-          const img = impl.img_;
-          expect(img.getAttribute('sizes')).to.be.null;
-        });
+      });
+      const impl = await ampImg.getImpl(false);
+      impl.buildCallback();
+      await impl.layoutCallback();
+      const img = impl.img_;
+      expect(img.getAttribute('sizes')).to.be.null;
     });
 
     it('should generate correct sizes for layout fixed', () => {
@@ -715,240 +831,4 @@ describes.sandboxed('amp-img', {}, (env) => {
       );
     });
   });
-
-  // Firefox misbehaves on Windows for this test because getBoundingClientRect
-  // returns 0x0 for width and height. Strangely Firefox on MacOS will return
-  // reasonable values for getBoundingClientRect if we add an explicit wait
-  // for laid out attributes via waitForElementLayout. If we change the test to
-  // test for client or offset values, Safari yields 0px measurements.
-  // For details, see: https://github.com/ampproject/amphtml/pull/24574
-  describe
-    .configure()
-    .skipFirefox()
-    .run('layout intrinsic', () => {
-      let browser;
-      beforeEach(() => {
-        fixture.iframe.height = 800;
-        fixture.iframe.width = 800;
-        browser = new BrowserController(fixture.win);
-      });
-      it('should not exceed given width and height even if image\
-      natural size is larger', () => {
-        let ampImg;
-        return getImg({
-          src: '/examples/img/sample.jpg', // 641 x 481
-          width: 100,
-          height: 100,
-          layout: 'intrinsic',
-        })
-          .then((image) => {
-            ampImg = image;
-            return browser.waitForElementLayout('amp-img');
-          })
-          .then(() => {
-            expect(ampImg.getBoundingClientRect()).to.include({
-              width: 100,
-              height: 100,
-            });
-            const img = ampImg.querySelector('img');
-            expect(img.getBoundingClientRect()).to.include({
-              width: 100,
-              height: 100,
-            });
-          });
-      });
-
-      it('should reach given width and height even if image\
-      natural size is smaller', () => {
-        let ampImg;
-        return getImg({
-          src: '/examples/img/sample.jpg', // 641 x 481
-          width: 800,
-          height: 600,
-          layout: 'intrinsic',
-        })
-          .then((image) => {
-            ampImg = image;
-            return browser.waitForElementLayout('amp-img');
-          })
-          .then(() => {
-            expect(ampImg.getBoundingClientRect()).to.include({
-              width: 800,
-              height: 600,
-            });
-            const img = ampImg.querySelector('img');
-            expect(img.getBoundingClientRect()).to.include({
-              width: 800,
-              height: 600,
-            });
-          });
-      });
-
-      it('expands a parent div with no explicit dimensions', () => {
-        let ampImg;
-        const parentDiv = fixture.doc.getElementById('parent');
-        // inline-block to force width and height to size of children
-        // font-size 0 to get rid of the 4px added by inline-block for whitespace
-        parentDiv.setAttribute('style', 'display: inline-block; font-size: 0;');
-        return getImg({
-          src: '/examples/img/sample.jpg', // 641 x 481
-          width: 600,
-          height: 400,
-          layout: 'intrinsic',
-        })
-          .then((image) => {
-            ampImg = image;
-            return browser.waitForElementLayout('amp-img');
-          })
-          .then(() => {
-            expect(ampImg.getBoundingClientRect()).to.include({
-              width: 600,
-              height: 400,
-            });
-            const parentDiv = fixture.doc.getElementById('parent');
-            expect(parentDiv.getBoundingClientRect()).to.include({
-              width: 600,
-              height: 400,
-            });
-          });
-      });
-
-      it('is bounded by explicit dimensions of a parent container', () => {
-        let ampImg;
-        const parentDiv = fixture.doc.getElementById('parent');
-        parentDiv.setAttribute('style', 'width: 80px; height: 80px');
-        return getImg({
-          src: '/examples/img/sample.jpg', // 641 x 481
-          width: 800,
-          height: 600,
-          layout: 'intrinsic',
-        })
-          .then((image) => {
-            ampImg = image;
-            return browser.waitForElementLayout('amp-img');
-          })
-          .then(() => {
-            expect(ampImg.getBoundingClientRect()).to.include({
-              width: 80,
-              height: 60,
-            });
-            const parentDiv = fixture.doc.getElementById('parent');
-            expect(parentDiv.getBoundingClientRect()).to.include({
-              width: 80,
-              height: 80,
-            });
-          });
-      });
-
-      it('SSR sizer does not interfere with img creation', () => {
-        let ampImg;
-        const parentDiv = fixture.doc.getElementById('parent');
-        parentDiv.setAttribute('style', 'width: 80px; height: 80px');
-
-        // Hack so we don't duplicate intrinsic's layout code here.
-        const tmp = createElementWithAttributes(fixture.doc, 'div', {
-          src: '/examples/img/sample.jpg', // 641 x 481
-          width: 800,
-          height: 600,
-          layout: 'intrinsic',
-        });
-        applyStaticLayout(tmp);
-        const attributes = {
-          'i-amphtml-ssr': '',
-        };
-        for (let i = 0; i < tmp.attributes.length; i++) {
-          attributes[tmp.attributes[i].name] = tmp.attributes[i].value;
-        }
-
-        return getImg(attributes, toArray(tmp.children))
-          .then((image) => {
-            ampImg = image;
-            return browser.waitForElementLayout('amp-img');
-          })
-          .then(() => {
-            expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.exist;
-            expect(ampImg.querySelector('img[src*="image/svg+xml"]')).to.exist;
-          });
-      });
-
-      it('SSR sizer does not interfere with SSR img before', () => {
-        let ampImg;
-        const parentDiv = fixture.doc.getElementById('parent');
-        parentDiv.setAttribute('style', 'width: 80px; height: 80px');
-
-        // Hack so we don't duplicate intrinsic's layout code here.
-        const tmp = createElementWithAttributes(fixture.doc, 'div', {
-          src: '/examples/img/sample.jpg', // 641 x 481
-          width: 800,
-          height: 600,
-          layout: 'intrinsic',
-        });
-        applyStaticLayout(tmp);
-        const attributes = {
-          'i-amphtml-ssr': '',
-        };
-        for (let i = 0; i < tmp.attributes.length; i++) {
-          attributes[tmp.attributes[i].name] = tmp.attributes[i].value;
-        }
-
-        const children = toArray(tmp.children);
-        children.unshift(
-          createElementWithAttributes(fixture.doc, 'img', {
-            decoding: 'async',
-            class: 'i-amphtml-fill-content i-amphtml-replaced-content',
-            src: tmp.getAttribute('src'),
-          })
-        );
-
-        return getImg(attributes, children)
-          .then((image) => {
-            ampImg = image;
-            return browser.waitForElementLayout('amp-img');
-          })
-          .then(() => {
-            expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.exist;
-            expect(ampImg.querySelector('img[src*="image/svg+xml"]')).to.exist;
-          });
-      });
-
-      it('SSR sizer does not interfere with SSR img after', () => {
-        let ampImg;
-        const parentDiv = fixture.doc.getElementById('parent');
-        parentDiv.setAttribute('style', 'width: 80px; height: 80px');
-
-        // Hack so we don't duplicate intrinsic's layout code here.
-        const tmp = createElementWithAttributes(fixture.doc, 'div', {
-          src: '/examples/img/sample.jpg', // 641 x 481
-          width: 800,
-          height: 600,
-          layout: 'intrinsic',
-        });
-        applyStaticLayout(tmp);
-        const attributes = {
-          'i-amphtml-ssr': '',
-        };
-        for (let i = 0; i < tmp.attributes.length; i++) {
-          attributes[tmp.attributes[i].name] = tmp.attributes[i].value;
-        }
-
-        const children = toArray(tmp.children);
-        children.push(
-          createElementWithAttributes(fixture.doc, 'img', {
-            decoding: 'async',
-            class: 'i-amphtml-fill-content i-amphtml-replaced-content',
-            src: tmp.getAttribute('src'),
-          })
-        );
-
-        return getImg(attributes, children)
-          .then((image) => {
-            ampImg = image;
-            return browser.waitForElementLayout('amp-img');
-          })
-          .then(() => {
-            expect(ampImg.querySelector('img[src*="sample.jpg"]')).to.exist;
-            expect(ampImg.querySelector('img[src*="image/svg+xml"]')).to.exist;
-          });
-      });
-    });
 });
diff --git a/test/unit/test-amp-inabox.js b/test/unit/test-amp-inabox.js
index d4ea3d6aec7c9..2e300a4a9c182 100644
--- a/test/unit/test-amp-inabox.js
+++ b/test/unit/test-amp-inabox.js
@@ -18,8 +18,9 @@ import * as Service from '../../src/service';
 import {AmpDocSingle} from '../../src/service/ampdoc-impl';
 import {installAmpdocServices} from '../../src/service/core-services';
 import {installAmpdocServicesForInabox} from '../../src/inabox/inabox-services';
+import {removeItem} from '../../src/core/types/array';
 
-describe('amp-inabox', () => {
+describes.sandboxed('amp-inabox', {}, () => {
   describes.realWin('installAmpdocServicesForInabox', {amp: false}, (env) => {
     it('should install same services for inabox', () => {
       let installedServices = [];
@@ -38,6 +39,8 @@ describe('amp-inabox', () => {
       installAmpdocServices(ampdoc);
 
       const installedServicesByRegularAmp = installedServices.slice(0);
+      // The inabox mode does not need the loading indicator.
+      removeItem(installedServicesByRegularAmp, 'loadingIndicator');
       installedServices = [];
       installAmpdocServicesForInabox(ampdoc);
       expect(installedServices).to.deep.equal(installedServicesByRegularAmp);
diff --git a/test/unit/test-amp-pixel.js b/test/unit/test-amp-pixel.js
index a221afa84c01f..d22e5c7359486 100644
--- a/test/unit/test-amp-pixel.js
+++ b/test/unit/test-amp-pixel.js
@@ -23,9 +23,8 @@ describes.realWin('amp-pixel', {amp: true}, (env) => {
   let win;
   let whenFirstVisiblePromise, whenFirstVisibleResolver;
   let pixel;
-  let implementation;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     win = env.win;
     whenFirstVisiblePromise = new Promise((resolve) => {
       whenFirstVisibleResolver = resolve;
@@ -33,7 +32,9 @@ describes.realWin('amp-pixel', {amp: true}, (env) => {
     env.sandbox
       .stub(env.ampdoc, 'whenFirstVisible')
       .callsFake(() => whenFirstVisiblePromise);
-    createPixel('https://pubads.g.doubleclick.net/activity;dc_iu=1/abc;ord=1?');
+    await createPixel(
+      'https://pubads.g.doubleclick.net/activity;dc_iu=1/abc;ord=1?'
+    );
   });
 
   function createPixel(src, referrerPolicy) {
@@ -43,9 +44,7 @@ describes.realWin('amp-pixel', {amp: true}, (env) => {
       pixel.setAttribute('referrerpolicy', referrerPolicy);
     }
     win.document.body.appendChild(pixel);
-    const buildPromise = pixel.build();
-    implementation = pixel.implementation_;
-    return buildPromise;
+    return pixel.buildInternal();
   }
 
   /**
@@ -57,10 +56,14 @@ describes.realWin('amp-pixel', {amp: true}, (env) => {
       pixel.setAttribute('src', opt_src);
     }
     whenFirstVisibleResolver();
-    return whenFirstVisiblePromise.then(() => {
-      expect(implementation.triggerPromise_).to.be.not.null;
-      return implementation.triggerPromise_;
-    });
+    return whenFirstVisiblePromise
+      .then(() => {
+        return pixel.getImpl(false);
+      })
+      .then((impl) => {
+        expect(impl.triggerPromise_).to.be.not.null;
+        return impl.triggerPromise_;
+      });
   }
 
   it('should be non-displayed', () => {
@@ -70,7 +73,8 @@ describes.realWin('amp-pixel', {amp: true}, (env) => {
     expect(pixel).to.have.display('none');
   });
 
-  it('should NOT trigger when src is empty', () => {
+  it('should NOT trigger when src is empty', async () => {
+    const implementation = await pixel.getImpl(false);
     expect(pixel.children).to.have.length(0);
     expect(implementation.triggerPromise_).to.be.null;
     return trigger('').then((img) => {
@@ -79,7 +83,8 @@ describes.realWin('amp-pixel', {amp: true}, (env) => {
     });
   });
 
-  it('should trigger when doc becomes visible', () => {
+  it('should trigger when doc becomes visible', async () => {
+    const implementation = await pixel.getImpl(false);
     expect(pixel.children).to.have.length(0);
     expect(implementation.triggerPromise_).to.be.null;
     return trigger().then((img) => {
@@ -167,7 +172,7 @@ describes.realWin(
     let pixel;
     let implementation;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       win = env.win;
 
       whenFirstVisiblePromise = new Promise((resolve) => {
@@ -177,7 +182,7 @@ describes.realWin(
         .stub(env.ampdoc, 'whenFirstVisible')
         .callsFake(() => whenFirstVisiblePromise);
 
-      installUrlReplacementsForEmbed(env.ampdoc, win, new TestVariableSource());
+      installUrlReplacementsForEmbed(env.ampdoc, new TestVariableSource());
 
       pixel = win.document.createElement('amp-pixel');
       pixel.setAttribute(
@@ -185,8 +190,8 @@ describes.realWin(
         'https://pubads.g.doubleclick.net/activity;dc_iu=1/abc;ord=1?'
       );
       win.document.body.appendChild(pixel);
-      pixel.build();
-      implementation = pixel.implementation_;
+      await pixel.buildInternal();
+      implementation = await pixel.getImpl();
     });
 
     /**
diff --git a/test/unit/test-amp-story-player-viewport-observer.js b/test/unit/test-amp-story-player-viewport-observer.js
new file mode 100644
index 0000000000000..4f011d2724028
--- /dev/null
+++ b/test/unit/test-amp-story-player-viewport-observer.js
@@ -0,0 +1,115 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {AmpStoryPlayerViewportObserver} from '../../src/amp-story-player/amp-story-player-viewport-observer';
+
+describes.realWin('AmpStoryPlayerViewportObserver', {amp: false}, (env) => {
+  let win;
+  let el;
+  let doc;
+  let inOb;
+  let observing;
+
+  beforeEach(() => {
+    observing = new Set();
+    inOb = env.sandbox.stub();
+    inOb.callsFake(() => ({
+      observe: (el) => observing.add(el),
+      unobserve: (el) => observing.delete(el),
+    }));
+
+    win = {
+      document: {},
+      IntersectionObserver: inOb,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      innerHeight: 100,
+    };
+    win.parent = win;
+
+    doc = {defaultView: win};
+    const fakeRect = {top: 0};
+    el = {
+      ownerDocument: doc,
+      getBoundingClientRect: () => fakeRect,
+    };
+  });
+
+  /**
+   * Simulate an IntersectionObserver callback for an element.
+   * @param {!Element} el
+   * @param {boolean} inViewport
+   */
+  function toggleViewport(el, inViewport) {
+    const ioCallback = inOb.getCall(0).args[0];
+    ioCallback([{target: el, isIntersecting: inViewport}]);
+  }
+
+  it('initializes observer with implicit root', () => {
+    const noop = () => {};
+    new AmpStoryPlayerViewportObserver(win, el, noop);
+
+    const inObCallback = env.sandbox.match.any;
+
+    // Initializing InOb with only 1 argument defaults to implicit root.
+    expect(inOb).to.have.been.calledOnceWithExactly(inObCallback);
+  });
+
+  it('fires callback when element is visible in viewport.', () => {
+    const cbSpy = env.sandbox.spy();
+    new AmpStoryPlayerViewportObserver(win, el, cbSpy);
+
+    toggleViewport(el, true);
+
+    expect(cbSpy).to.be.calledOnce;
+  });
+
+  it('does not fire callback when element is not visible in viewport.', () => {
+    const cbSpy = env.sandbox.spy();
+    new AmpStoryPlayerViewportObserver(win, el, cbSpy);
+
+    toggleViewport(el, false);
+
+    expect(cbSpy).to.not.be.called;
+  });
+
+  it('once callback is fired, the InOb stops observing', () => {
+    const cb = env.sandbox.spy();
+    new AmpStoryPlayerViewportObserver(win, el, cb);
+
+    toggleViewport(el, true);
+
+    expect(observing.has(el)).to.be.false;
+  });
+
+  it('uses fallback if InOb is not supported', () => {
+    win.IntersectionObserver = null;
+    const scrollSpy = env.sandbox.spy(win, 'addEventListener');
+
+    new AmpStoryPlayerViewportObserver(win, el, () => {});
+
+    expect(scrollSpy).to.be.calledWith('scroll');
+  });
+
+  it('fallback removes event listener once callback is fired', () => {
+    win.IntersectionObserver = null;
+    const removeSpy = env.sandbox.spy(win, 'removeEventListener');
+
+    new AmpStoryPlayerViewportObserver(win, el, () => {});
+
+    expect(removeSpy).to.be.called;
+  });
+});
diff --git a/test/unit/test-amp-story-player.js b/test/unit/test-amp-story-player.js
index 990f9f3362888..5a2d0fc5af4f0 100644
--- a/test/unit/test-amp-story-player.js
+++ b/test/unit/test-amp-story-player.js
@@ -14,18 +14,20 @@
  * limitations under the License.
  */
 
-import {
-  AmpStoryPlayer,
-  IFRAME_IDX,
-} from '../../src/amp-story-player/amp-story-player-impl';
-import {AmpStoryPlayerManager} from '../../src/amp-story-player/amp-story-player-manager';
+import {AmpStoryComponentManager} from '../../src/amp-story-player/amp-story-component-manager';
+import {AmpStoryPlayer} from '../../src/amp-story-player/amp-story-player-impl';
 import {Messaging} from '@ampproject/viewer-messaging';
-import {toArray} from '../../src/types';
+import {PageScroller} from '../../src/amp-story-player/page-scroller';
+import {expect} from 'chai';
+import {listenOncePromise} from '../../src/event-helper';
+import {macroTask} from '../../testing/yield';
 
 describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
   let win;
   let playerEl;
   let manager;
+  let fakeResponse;
+  const TAG = 'amp-story-player';
 
   const fireHandler = [];
   const DEFAULT_CACHE_URL =
@@ -33,7 +35,6 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
   const DEFAULT_ORIGIN_URL =
     'https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/';
   let fakeMessaging;
-  let messagingMock;
 
   const nextTick = () => new Promise((resolve) => win.setTimeout(resolve, 0));
 
@@ -53,21 +54,34 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
       playerEl.appendChild(storyAnchor);
     }
     win.document.body.appendChild(playerEl);
-    manager = new AmpStoryPlayerManager(win);
+    manager = new AmpStoryComponentManager(win);
+  }
 
-    env.sandbox
-      .stub(Messaging, 'waitForHandshakeFromDocument')
-      .resolves(fakeMessaging);
+  function swipeDown() {
+    const startEvent = {touches: [{screenX: 200, screenY: 100}]};
+    fireHandler['touchstart']('touchstart', startEvent);
+
+    let moveEvent = {touches: [{screenX: 200, screenY: 200}]};
+    fireHandler['touchmove']('touchmove', moveEvent);
+
+    moveEvent = {touches: [{screenX: 200, screenY: 205}]};
+    fireHandler['touchmove']('touchmove', moveEvent);
+
+    const endEvent = {touches: [{screenX: 200, screenY: 205}]};
+    fireHandler['touchend']('touchend', endEvent);
   }
 
   function swipeLeft() {
     const touchStartEvent = {touches: [{screenX: 200, screenY: 100}]};
     fireHandler['touchstart']('touchstart', touchStartEvent);
 
-    const touchMove = {touches: [{screenX: 100, screenY: 100}]};
+    let touchMove = {touches: [{screenX: 100, screenY: 100}]};
+    fireHandler['touchmove']('touchmove', touchMove);
+
+    touchMove = {touches: [{screenX: 95, screenY: 100}]};
     fireHandler['touchmove']('touchmove', touchMove);
 
-    const touchEndEvent = {touches: [{screenX: 100, screenY: 100}]};
+    const touchEndEvent = {touches: [{screenX: 95, screenY: 100}]};
     fireHandler['touchend']('touchend', touchEndEvent);
   }
 
@@ -82,170 +96,542 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
     fireHandler['touchend']('touchend', touchEndEvent);
   }
 
+  function openPageAttachment() {
+    const openEvent = {state: 'PAGE_ATTACHMENT_STATE', value: true};
+    fireHandler['documentStateUpdate']('documentStateUpdate', openEvent);
+  }
+
+  function closePageAttachment() {
+    const closeEvent = {state: 'PAGE_ATTACHMENT_STATE', value: false};
+    fireHandler['documentStateUpdate']('documentStateUpdate', closeEvent);
+  }
+
+  function buildCircularWrappingConfig() {
+    const configEl = document.createElement('script');
+    configEl.textContent = JSON.stringify({
+      'behavior': {
+        'on': 'end',
+        'action': 'circular-wrapping',
+      },
+    });
+    configEl.setAttribute('type', 'application/json');
+    return configEl;
+  }
+
+  function buildAutoplayConfig(autoplay) {
+    const configEl = document.createElement('script');
+    configEl.textContent = JSON.stringify({
+      'behavior': {
+        'autoplay': autoplay,
+      },
+    });
+    configEl.setAttribute('type', 'application/json');
+    return configEl;
+  }
+
+  function buildPageScrollConfig(pageScroll) {
+    const configEl = document.createElement('script');
+    configEl.textContent = JSON.stringify({
+      'behavior': {
+        'pageScroll': pageScroll,
+      },
+    });
+    configEl.setAttribute('type', 'application/json');
+    return configEl;
+  }
+
   beforeEach(() => {
     win = env.win;
     fakeMessaging = {
       setDefaultHandler: () => {},
-      sendRequest: () => {},
+      sendRequest: () => Promise.resolve(fakeResponse),
       unregisterHandler: () => {},
       registerHandler: (event, handler) => {
         fireHandler[event] = handler;
       },
     };
-    messagingMock = env.sandbox.mock(fakeMessaging);
+
+    env.sandbox
+      .stub(Messaging, 'waitForHandshakeFromDocument')
+      .resolves(fakeMessaging);
   });
 
   afterEach(() => {
-    messagingMock.verify();
+    console.error.restore();
   });
 
   it('should build an iframe for each story', async () => {
     buildStoryPlayer();
     await manager.loadPlayers();
 
-    expect(playerEl.shadowRoot.querySelector('iframe')).to.exist;
+    expect(playerEl.querySelector('iframe')).to.exist;
   });
 
   it('should correctly append params at the end of the story url', async () => {
     buildStoryPlayer();
     await manager.loadPlayers();
+    await nextTick();
 
-    const storyIframe = playerEl.shadowRoot.querySelector('iframe');
+    const storyIframe = playerEl.querySelector('iframe');
 
     expect(storyIframe.getAttribute('src')).to.equals(
       DEFAULT_CACHE_URL +
-        '?amp_js_v=0.1#visibilityState=visible&origin=http%3A%2F%2Flocalhost%3A9876' +
+        '?amp_js_v=0.1#visibilityState=prerender&origin=http%3A%2F%2Flocalhost%3A9876' +
         '&showStoryUrlInfo=0&storyPlayer=v0&cap=swipe'
     );
   });
 
   it('should correctly append params at the end of a story url with existing params', async () => {
-    const existingParams = '?testParam=true#myhash=hashValue';
-    buildStoryPlayer(1, DEFAULT_CACHE_URL + existingParams);
+    const existingQuery = '?testParam=true';
+    const existingHash = '#myhash=hashValue';
+    buildStoryPlayer(1, DEFAULT_CACHE_URL + existingQuery + existingHash);
+
     await manager.loadPlayers();
+    await nextTick();
 
-    const storyIframe = playerEl.shadowRoot.querySelector('iframe');
+    const storyIframe = playerEl.querySelector('iframe');
 
     expect(storyIframe.getAttribute('src')).to.equals(
       DEFAULT_CACHE_URL +
-        existingParams +
-        '&amp_js_v=0.1#visibilityState=visible&origin=http%3A%2F%2Flocalhost%3A9876' +
+        existingQuery +
+        '&amp_js_v=0.1' +
+        existingHash +
+        '&visibilityState=prerender&origin=http%3A%2F%2Flocalhost%3A9876' +
         '&showStoryUrlInfo=0&storyPlayer=v0&cap=swipe'
     );
   });
 
   it('should set first story as visible', async () => {
+    const sendRequestSpy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+
     buildStoryPlayer(3);
     await manager.loadPlayers();
+    await nextTick();
 
-    const storyIframes = playerEl.shadowRoot.querySelectorAll('iframe');
-    expect(storyIframes[0].getAttribute('src')).to.include(
-      '#visibilityState=visible'
-    );
+    expect(sendRequestSpy).to.have.been.calledWith('visibilitychange', {
+      'state': 'visible',
+    });
   });
 
-  it('should prerender next stories', async () => {
+  it('should prerender next story after first one is loaded', async () => {
     buildStoryPlayer(3);
     await manager.loadPlayers();
+    await nextTick();
+
+    fireHandler['storyContentLoaded']('storyContentLoaded', {});
+    await nextTick();
 
-    const storyIframes = playerEl.shadowRoot.querySelectorAll('iframe');
+    const storyIframes = playerEl.querySelectorAll('iframe');
     expect(storyIframes[1].getAttribute('src')).to.include(
       '#visibilityState=prerender'
     );
   });
 
+  it('should not load next story if first one has not finished loading', async () => {
+    buildStoryPlayer(3);
+    await manager.loadPlayers();
+    await nextTick();
+
+    const storyIframes = playerEl.querySelectorAll('iframe');
+
+    expect(storyIframes[1].getAttribute('src')).to.not.exist;
+  });
+
+  it('should load new story if user navigated before first finished loading', async () => {
+    buildStoryPlayer(3);
+    await manager.loadPlayers();
+    await nextTick();
+
+    // Swiping without waiting for story loaded event.
+    swipeLeft();
+    await nextTick();
+
+    const storyIframes = playerEl.querySelectorAll('iframe');
+    expect(storyIframes[1].getAttribute('src')).to.exist;
+  });
+
   it(
-    'should remove iframe from a story with distance > 1 from current story ' +
-      'and give it to a new story that is distance <= 1 when navigating',
+    'should remove iframe from a story with distance > 1 from the DOM ' +
+      'and append a new story to the DOM that is distance <= 1 when navigating',
     async () => {
       buildStoryPlayer(4);
       await manager.loadPlayers();
       await nextTick();
 
-      const stories = toArray(playerEl.querySelectorAll('a'));
+      const stories = playerEl.getStories();
 
       swipeLeft();
-      expect(stories[0][IFRAME_IDX]).to.eql(0);
-      expect(stories[3][IFRAME_IDX]).to.eql(undefined);
+
+      expect(playerEl.contains(stories[0].iframe)).to.be.true;
+      expect(playerEl.contains(stories[3].iframe)).to.be.false;
 
       swipeLeft();
-      expect(stories[0][IFRAME_IDX]).to.eql(undefined);
-      expect(stories[3][IFRAME_IDX]).to.eql(0);
+
+      expect(playerEl.contains(stories[0].iframe)).to.be.false;
+      expect(playerEl.contains(stories[3].iframe)).to.be.true;
     }
   );
 
   it(
-    'should remove iframe from a story with distance > 1 from current story ' +
-      'and give it to a new story that is distance <= 1 when navigating backwards',
+    'should remove iframe from a story with distance > 1 from DOM ' +
+      'and append new story to the DOM which distance <= 1 when navigating backwards',
     async () => {
       buildStoryPlayer(4);
       await manager.loadPlayers();
       await nextTick();
 
-      const stories = toArray(playerEl.querySelectorAll('a'));
+      const stories = playerEl.getStories();
 
       swipeLeft();
       swipeLeft();
       swipeRight();
 
-      expect(stories[0][IFRAME_IDX]).to.eql(0);
-      expect(stories[3][IFRAME_IDX]).to.eql(undefined);
+      expect(playerEl.contains(stories[0].iframe)).to.be.true;
+      expect(playerEl.contains(stories[3].iframe)).to.be.false;
     }
   );
 
   it('should register handlers at build time', async () => {
+    const registerHandlerSpy = env.sandbox.spy(
+      fakeMessaging,
+      'registerHandler'
+    );
+
     buildStoryPlayer();
+    await manager.loadPlayers();
+    await nextTick();
 
-    messagingMock.expects('registerHandler').withArgs('selectDocument');
-    messagingMock.expects('registerHandler').withArgs('touchstart');
-    messagingMock.expects('registerHandler').withArgs('touchmove');
-    messagingMock.expects('registerHandler').withArgs('touchend');
-    messagingMock.expects('setDefaultHandler');
+    expect(registerHandlerSpy).to.have.been.calledWith('touchstart');
+    expect(registerHandlerSpy).to.have.been.calledWith('touchmove');
+    expect(registerHandlerSpy).to.have.been.calledWith('touchend');
+    expect(registerHandlerSpy).to.have.been.calledWith('selectDocument');
+    expect(registerHandlerSpy).to.have.been.calledWith('documentStateUpdate');
+  });
+
+  it('should set up onDocumentState listeners at at build time', async () => {
+    const sendRequestSpy = env.sandbox.spy(fakeMessaging, 'sendRequest');
 
+    buildStoryPlayer();
     await manager.loadPlayers();
+    await nextTick();
+
+    expect(sendRequestSpy).to.have.been.calledWith('onDocumentState', {
+      'state': 'PAGE_ATTACHMENT_STATE',
+    });
+    expect(sendRequestSpy).to.have.been.calledWith('onDocumentState', {
+      'state': 'CURRENT_PAGE_ID',
+    });
   });
 
   it('should navigate to next story when the last page of a story is tapped', async () => {
     buildStoryPlayer(2);
 
     await manager.loadPlayers();
+    await nextTick();
+
+    const navigationSpy = env.sandbox.spy();
+    playerEl.addEventListener('navigation', navigationSpy);
 
     const fakeData = {next: true};
     fireHandler['selectDocument']('selectDocument', fakeData);
 
-    win.requestAnimationFrame(() => {
-      const iframes = playerEl.shadowRoot.querySelectorAll('iframe');
-      expect(iframes[0].getAttribute('i-amphtml-iframe-position')).to.eql('-1');
-      expect(iframes[1].getAttribute('i-amphtml-iframe-position')).to.eql('0');
+    expect(navigationSpy).to.have.been.calledWithMatch({
+      type: 'navigation',
+      detail: {
+        index: 1,
+        remaining: 0,
+      },
+    });
+  });
+
+  it('should dispatch noNextStory when in last story', async () => {
+    buildStoryPlayer(1);
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    const noNextSpy = env.sandbox.spy();
+    playerEl.addEventListener('noNextStory', noNextSpy);
+
+    fireHandler['selectDocument']('selectDocument', {next: true});
+
+    expect(noNextSpy).to.have.been.called;
+  });
+
+  it('should not dispatch noNextStory when not in last story', async () => {
+    buildStoryPlayer(2);
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    const noNextSpy = env.sandbox.spy();
+    playerEl.addEventListener('noNextStory', noNextSpy);
+
+    fireHandler['selectDocument']('selectDocument', {next: true});
+
+    expect(noNextSpy).to.not.have.been.called;
+  });
+
+  it('should not dispatch noNextStory when circular wrapping is enabled', async () => {
+    buildStoryPlayer(1);
+    playerEl.appendChild(buildCircularWrappingConfig());
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    const noNextSpy = env.sandbox.spy();
+    playerEl.addEventListener('noNextStory', noNextSpy);
+
+    fireHandler['selectDocument']('selectDocument', {next: true});
+
+    expect(noNextSpy).to.not.have.been.called;
+  });
+
+  it('should scroll the page when pageScroll is enabled (default)', async () => {
+    buildStoryPlayer(1);
+
+    const touchStartSpy = env.sandbox.spy(
+      PageScroller.prototype,
+      'onTouchStart'
+    );
+    const touchMoveSpy = env.sandbox.spy(PageScroller.prototype, 'onTouchMove');
+    const touchEndSpy = env.sandbox.spy(PageScroller.prototype, 'onTouchEnd');
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    swipeDown();
+    await nextTick();
+
+    expect(touchStartSpy).to.have.been.called;
+    expect(touchMoveSpy).to.have.been.called;
+    expect(touchEndSpy).to.have.been.called;
+  });
+
+  it('should not scroll the page when pageScroll option is off', async () => {
+    buildStoryPlayer(1);
+    playerEl.appendChild(buildPageScrollConfig(/* pageScroll */ false));
+
+    const touchStartSpy = env.sandbox.spy(
+      PageScroller.prototype,
+      'onTouchStart'
+    );
+    const touchMoveSpy = env.sandbox.spy(PageScroller.prototype, 'onTouchMove');
+    const touchEndSpy = env.sandbox.spy(PageScroller.prototype, 'onTouchEnd');
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    swipeDown();
+    await nextTick();
+
+    expect(touchStartSpy).to.not.have.been.called;
+    expect(touchMoveSpy).to.not.have.been.called;
+    expect(touchEndSpy).to.not.have.been.called;
+  });
+
+  it('should not play first story when autoplay is off', async () => {
+    buildStoryPlayer(1);
+    playerEl.appendChild(buildAutoplayConfig(/* autoplay */ false));
+
+    const sendRequestSpy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    expect(sendRequestSpy).to.not.have.been.calledWith('visibilitychange', {
+      'state': 'visible',
+    });
+  });
+
+  it('should play first story when autoplay is off and play() is called', async () => {
+    const sendRequestSpy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+    buildStoryPlayer(1);
+    playerEl.appendChild(buildAutoplayConfig(/* autoplay */ false));
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    playerEl.play();
+    await nextTick();
+
+    expect(sendRequestSpy).to.have.been.calledWith('visibilitychange', {
+      'state': 'visible',
+    });
+  });
+
+  it('should ignore autoplay if it contains invalid value', async () => {
+    buildStoryPlayer(1);
+    playerEl.appendChild(buildAutoplayConfig(/* autoplay */ 'flour tortillas'));
+
+    const sendRequestSpy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    expect(sendRequestSpy).to.have.been.calledWith('visibilitychange', {
+      'state': 'visible',
+    });
+  });
+
+  it('should dispatch noPreviousStory when in first story', async () => {
+    buildStoryPlayer(1);
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    const noPreviousSpy = env.sandbox.spy();
+    playerEl.addEventListener('noPreviousStory', noPreviousSpy);
+
+    fireHandler['selectDocument']('selectDocument', {previous: true});
+
+    expect(noPreviousSpy).to.have.been.called;
+  });
+
+  it('should not dispatch noPreviousStory when not in first story', async () => {
+    buildStoryPlayer(2);
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    const noPreviousSpy = env.sandbox.spy();
+    playerEl.addEventListener('noPreviousStory', noPreviousSpy);
+
+    fireHandler['selectDocument']('selectDocument', {next: true});
+    fireHandler['selectDocument']('selectDocument', {previous: true});
+
+    expect(noPreviousSpy).to.not.have.been.called;
+  });
+
+  it('should not dispatch noPreviousStory when circular wrapping is enabled', async () => {
+    buildStoryPlayer(2);
+    playerEl.appendChild(buildCircularWrappingConfig());
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    const noPreviousSpy = env.sandbox.spy();
+    playerEl.addEventListener('noPreviousStory', noPreviousSpy);
+
+    fireHandler['selectDocument']('selectDocument', {previous: true});
+
+    expect(noPreviousSpy).to.not.have.been.called;
+  });
+
+  it('should dispatch amp-story-player-touchstart event', async () => {
+    buildStoryPlayer(1);
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    const touchSpy = env.sandbox.spy();
+    playerEl.addEventListener('amp-story-player-touchstart', touchSpy);
+
+    await swipeDown();
+    await nextTick();
+
+    expect(touchSpy).to.have.been.called;
+  });
+
+  it('should dispatch amp-story-player-touchmove event when navigating', async () => {
+    buildStoryPlayer(1);
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    const touchSpy = env.sandbox.spy();
+    playerEl.addEventListener('amp-story-player-touchmove', touchSpy);
+
+    await swipeLeft();
+    await nextTick();
+
+    expect(touchSpy).to.have.been.calledWithMatch({
+      type: 'amp-story-player-touchmove',
+      detail: {
+        touches: [
+          {
+            screenX: 95,
+            screenY: 100,
+          },
+        ],
+        isNavigationalSwipe: true,
+      },
+    });
+  });
+
+  it('should dispatch amp-story-player-touchmove event when not navigating', async () => {
+    buildStoryPlayer(1);
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    const touchSpy = env.sandbox.spy();
+    playerEl.addEventListener('amp-story-player-touchmove', touchSpy);
+
+    await swipeDown();
+    await nextTick();
+
+    expect(touchSpy).to.have.been.calledWithMatch({
+      type: 'amp-story-player-touchmove',
+      detail: {
+        touches: [
+          {
+            screenX: 200,
+            screenY: 205,
+          },
+        ],
+        isNavigationalSwipe: false,
+      },
     });
   });
 
+  it('should dispatch amp-story-player-touchend events', async () => {
+    buildStoryPlayer(1);
+
+    await manager.loadPlayers();
+    await nextTick();
+
+    const touchSpy = env.sandbox.spy();
+    playerEl.addEventListener('amp-story-player-touchend', touchSpy);
+
+    await swipeDown();
+    await nextTick();
+
+    expect(touchSpy).to.have.been.called;
+  });
+
   it('should navigate when swiping', async () => {
     buildStoryPlayer(4);
     await manager.loadPlayers();
+    await nextTick();
+
+    const navigationSpy = env.sandbox.spy();
+    playerEl.addEventListener('navigation', navigationSpy);
 
     swipeLeft();
 
-    win.requestAnimationFrame(() => {
-      const iframes = playerEl.shadowRoot.querySelectorAll('iframe');
-      expect(iframes[0].getAttribute('i-amphtml-iframe-position')).to.eql('-1');
-      expect(iframes[1].getAttribute('i-amphtml-iframe-position')).to.eql('0');
+    expect(navigationSpy).to.have.been.calledWithMatch({
+      type: 'navigation',
+      detail: {
+        index: 1,
+        remaining: 2,
+      },
     });
   });
 
   it('should not navigate when swiping last story', async () => {
     buildStoryPlayer(2);
     await manager.loadPlayers();
+    await nextTick();
+
+    const navigationSpy = env.sandbox.spy();
+    playerEl.addEventListener('navigation', navigationSpy);
 
     swipeLeft();
     swipeLeft();
     swipeLeft();
 
-    win.requestAnimationFrame(() => {
-      const iframes = playerEl.shadowRoot.querySelectorAll('iframe');
-      expect(iframes[0].getAttribute('i-amphtml-iframe-position')).to.eql('-1');
-      expect(iframes[1].getAttribute('i-amphtml-iframe-position')).to.eql('0');
-    });
+    expect(navigationSpy).to.have.been.calledOnce;
   });
 
   describe('Cache URLs', () => {
@@ -255,11 +641,11 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
 
       await nextTick();
 
-      const storyIframe = playerEl.shadowRoot.querySelector('iframe');
+      const storyIframe = playerEl.querySelector('iframe');
 
       expect(storyIframe.getAttribute('src')).to.equals(
         DEFAULT_CACHE_URL +
-          '?amp_js_v=0.1#visibilityState=visible&origin=http%3A%2F%2Flocalhost%3A9876' +
+          '?amp_js_v=0.1#visibilityState=prerender&origin=http%3A%2F%2Flocalhost%3A9876' +
           '&showStoryUrlInfo=0&storyPlayer=v0&cap=swipe'
       );
     });
@@ -270,25 +656,52 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
 
       await nextTick();
 
-      const storyIframe = playerEl.shadowRoot.querySelector('iframe');
+      const storyIframe = playerEl.querySelector('iframe');
 
       expect(storyIframe.getAttribute('src')).to.equals(
         DEFAULT_ORIGIN_URL +
-          '?amp_js_v=0.1#visibilityState=visible&origin=http%3A%2F%2Flocalhost%3A9876' +
+          '#visibilityState=prerender&origin=http%3A%2F%2Flocalhost%3A9876' +
           '&showStoryUrlInfo=0&storyPlayer=v0&cap=swipe'
       );
     });
 
     it('should throw error when invalid url is provided', async () => {
-      buildStoryPlayer(1, DEFAULT_ORIGIN_URL, 'www.invalid.org');
+      console.error.restore();
+      env.sandbox.spy(console, 'error');
+
+      buildStoryPlayer(1, DEFAULT_ORIGIN_URL, 'www.tacos.org');
+
+      await manager.loadPlayers();
+      await nextTick();
 
-      return expect(() => manager.loadPlayers()).to.throw(
-        /Unsupported cache, use one of following: cdn.ampproject.org,www.bing-amp.com/
+      expect(console.error).to.be.calledWithMatch(
+        /\[amp-story-player\]/,
+        /Unsupported cache specified, use one of following: cdn.ampproject.org,www.bing-amp.com/
       );
     });
   });
 
   describe('Player API', () => {
+    function attachPlayerWithStories(playerEl, numStories) {
+      for (let i = 0; i < numStories; i++) {
+        const story = win.document.createElement('a');
+        story.setAttribute('href', `https://example.com/story${i}.html`);
+        playerEl.appendChild(story);
+      }
+      win.document.body.appendChild(playerEl);
+    }
+
+    // Creates an array of story objects with a unique random URL.
+    function createStoryObjects(numberOfStories) {
+      const stories = [];
+      for (let i = 0; i < numberOfStories; i++) {
+        stories.push({
+          href: DEFAULT_ORIGIN_URL + Math.floor(Math.random() * 1000),
+        });
+      }
+      return stories;
+    }
+
     it('signals when its ready to be interacted with', async () => {
       buildStoryPlayer();
       const readySpy = env.sandbox.spy();
@@ -315,7 +728,7 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
       expect(playerEl.isReady).to.be.true;
     });
 
-    it('load callback builds iframe inside the player', async () => {
+    it('load callback throws if player is not appended to the DOM', async () => {
       const playerEl = win.document.createElement('amp-story-player');
       const story = win.document.createElement('a');
       story.setAttribute('href', DEFAULT_CACHE_URL);
@@ -323,9 +736,779 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
 
       const player = new AmpStoryPlayer(win, playerEl);
 
+      return expect(() => player.load()).to.throw(
+        `[${TAG}] element must be connected to the DOM before calling load().`
+      );
+    });
+
+    it('load callback builds iframe inside the player', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 1);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+
+      expect(playerEl.querySelector('iframe')).to.exist;
+    });
+
+    it('show callback builds corresponding adjacent iframes', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 5);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+
+      player.show('https://example.com/story3.html');
+      await nextTick();
+
+      fireHandler['storyContentLoaded']('storyContentLoaded', {});
+      await nextTick();
+
+      const stories = playerEl.getStories();
+
+      expect(playerEl.contains(stories[0].iframe)).to.be.false;
+      expect(playerEl.contains(stories[1].iframe)).to.be.false;
+      expect(playerEl.contains(stories[2].iframe)).to.be.true;
+      expect(playerEl.contains(stories[3].iframe)).to.be.true;
+      expect(playerEl.contains(stories[4].iframe)).to.be.true;
+    });
+
+    it('show() callback should prerender next story after current one is loaded', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 5);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+
+      player.show('https://example.com/story3.html');
+      await nextTick();
+
+      fireHandler['storyContentLoaded']('storyContentLoaded', {});
+      await nextTick();
+
+      const storyIframes = playerEl.querySelectorAll('iframe');
+
+      expect(storyIframes[0].getAttribute('src')).to.include(
+        'https://example.com/story3.html#visibilityState=prerender'
+      );
+      expect(storyIframes[1].getAttribute('src')).to.include(
+        'https://example.com/story4.html#visibilityState=prerender'
+      );
+      expect(storyIframes[2].getAttribute('src')).to.include(
+        'https://example.com/story2.html#visibilityState=prerender'
+      );
+    });
+
+    it('rewind() callback should rewind current story', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 1);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      const sendRequestSpy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+      player.rewind('https://example.com/story0.html');
+
+      await nextTick();
+
+      expect(sendRequestSpy).to.have.been.calledWith('rewind', {});
+    });
+
+    it('rewind() throws when invalid url is provided', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 1);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      return expect(() =>
+        player.rewind('https://example.com/story6.html')
+      ).to.throw(
+        'Story URL not found in the player: https://example.com/story6.html'
+      );
+    });
+
+    it('rewind() callback should eventually rewind story when it gets connected', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 3);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
       await player.load();
+      await nextTick();
+
+      const sendRequestSpy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+      player.rewind('https://example.com/story2.html');
+
+      await player.go(2);
+      await nextTick();
+
+      expect(sendRequestSpy).to.have.been.calledWith('rewind', {});
+    });
+
+    // TODO(proyectoramirez): delete once add() is implemented.
+    it('show callback should throw when story is not found', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 5);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+
+      return expect(() =>
+        player.show('https://example.com/story6.html')
+      ).to.throw(
+        'Story URL not found in the player: https://example.com/story6.html'
+      );
+    });
+
+    it('adds stories programmatically', async () => {
+      buildStoryPlayer(3);
+      await manager.loadPlayers();
+
+      const storyObjects = createStoryObjects(1);
+      playerEl.add(storyObjects);
+
+      const stories = playerEl.getStories();
+
+      expect(stories.length).to.eql(4);
+    });
+
+    it('throws an error if the add method is not passed an array', async () => {
+      buildStoryPlayer();
+      await manager.loadPlayers();
+
+      return expect(() => playerEl.add(7)).to.throw(
+        '"stories" parameter has the wrong structure'
+      );
+    });
+
+    it('throws an error if the add method is passed an array with incorrectly structured story objects', async () => {
+      buildStoryPlayer();
+      await manager.loadPlayers();
+
+      const wrongStoryObjects = [{notHref: true}];
+
+      return expect(() => playerEl.add(wrongStoryObjects)).to.throw(
+        '"stories" parameter has the wrong structure'
+      );
+    });
+
+    it('adds no stories when sending an empty array of new stories', async () => {
+      buildStoryPlayer(3);
+      await manager.loadPlayers();
+
+      const storyObjects = createStoryObjects(0);
+      playerEl.add(storyObjects);
+
+      const stories = playerEl.getStories();
+
+      expect(stories.length).to.eql(3);
+    });
+
+    it(
+      'creates and assigns iframes to added stories when they have a ' +
+        'distance of 1',
+      async () => {
+        buildStoryPlayer();
+        await manager.loadPlayers();
+
+        const storyObjects = createStoryObjects(2);
+        playerEl.add(storyObjects);
+
+        const stories = playerEl.getStories();
+
+        expect(playerEl.contains(stories[0].iframe)).to.be.true;
+        expect(playerEl.contains(stories[1].iframe)).to.be.true;
+      }
+    );
+
+    it(
+      'assigns an existing iframe to the first added story when the current ' +
+        'story is the last one, and the new story has a distance of 1',
+      async () => {
+        buildStoryPlayer(3);
+        await manager.loadPlayers();
+        await nextTick();
+
+        swipeLeft();
+        swipeLeft();
+
+        const storyObjects = createStoryObjects(2);
+        playerEl.add(storyObjects);
+
+        const stories = playerEl.getStories();
+
+        expect(playerEl.contains(stories[3].iframe)).to.be.true;
+        expect(playerEl.contains(stories[4].iframe)).to.be.false;
+      }
+    );
+
+    it('pauses programmatically', async () => {
+      const spy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+      buildStoryPlayer();
+      await manager.loadPlayers();
+
+      playerEl.pause();
+      await nextTick();
+
+      expect(spy).to.have.been.calledWith('visibilitychange', {
+        state: 'paused',
+      });
+    });
+
+    it('plays programmatically', async () => {
+      const spy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+      buildStoryPlayer();
+      await manager.loadPlayers();
+
+      playerEl.play();
+      await nextTick();
+
+      expect(spy).to.have.been.calledWith('visibilitychange', {
+        state: 'visible',
+      });
+    });
+
+    it('calling mute should set story muted state to true', async () => {
+      const spy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+      buildStoryPlayer();
+      await manager.loadPlayers();
+
+      await playerEl.mute();
+      await nextTick();
+
+      expect(spy).to.have.been.calledWith('setDocumentState', {
+        state: 'MUTED_STATE',
+        value: true,
+      });
+    });
+
+    it('calling unmute should set the story muted state to false', async () => {
+      const spy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+      buildStoryPlayer();
+      await manager.loadPlayers();
+
+      await playerEl.unmute();
+      await nextTick();
+
+      expect(spy).to.have.been.calledWith('setDocumentState', {
+        state: 'MUTED_STATE',
+        value: false,
+      });
+    });
+
+    it('back button should be created and close button should not', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      playerEl.setAttribute('exit-control', 'back-button');
+      attachPlayerWithStories(playerEl, 5);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+
+      expect(playerEl.querySelector('button.amp-story-player-back-button')).to
+        .exist;
+      expect(playerEl.querySelector('button.amp-story-player-close-button')).to
+        .not.exist;
+    });
+
+    it('close button should be created and back button should not', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      playerEl.setAttribute('exit-control', 'close-button');
+      attachPlayerWithStories(playerEl, 5);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      expect(playerEl.querySelector('button.amp-story-player-close-button')).to
+        .exist;
+      expect(playerEl.querySelector('button.amp-story-player-back-button')).to
+        .not.exist;
+    });
+
+    it('no button should be created', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      playerEl.setAttribute('exit-control', 'brokenattribute');
+      attachPlayerWithStories(playerEl, 5);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+
+      expect(playerEl.querySelector('button.amp-story-player-close-button')).to
+        .not.exist;
+      expect(playerEl.querySelector('button.amp-story-player-back-button')).to
+        .not.exist;
+    });
+
+    it('back button should fire back event once', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      playerEl.setAttribute('exit-control', 'back-button');
+      attachPlayerWithStories(playerEl, 5);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+
+      const readySpy = env.sandbox.spy();
+      playerEl.addEventListener('amp-story-player-back', readySpy);
+
+      playerEl.querySelector('button.amp-story-player-back-button').click();
+
+      expect(readySpy).to.have.been.calledOnce;
+    });
+
+    it('close button should fire close event once', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      playerEl.setAttribute('exit-control', 'close-button');
+      attachPlayerWithStories(playerEl, 5);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+      await player.load();
+
+      const readySpy = env.sandbox.spy();
+      playerEl.addEventListener('amp-story-player-close', readySpy);
+
+      playerEl.querySelector('button.amp-story-player-close-button').click();
+
+      expect(readySpy).to.have.been.calledOnce;
+    });
+
+    it('get page attachment state should send message', async () => {
+      const sendRequestSpy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+      buildStoryPlayer();
+      await manager.loadPlayers();
+
+      fakeResponse = {value: true};
+      await playerEl.getStoryState('page-attachment');
+
+      await nextTick();
+
+      expect(sendRequestSpy).to.have.been.calledWith('getDocumentState', {
+        'state': 'PAGE_ATTACHMENT_STATE',
+      });
+    });
+
+    it('should display button when page attachment is closed', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      playerEl.setAttribute('exit-control', 'back-button');
+      attachPlayerWithStories(playerEl, 1);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+      await player.load();
+
+      expect(playerEl.querySelector('button.amp-story-player-hide-button')).to
+        .not.exist;
+    });
+
+    it('should hide button when page attachment is open', async () => {
+      buildStoryPlayer();
+      playerEl.setAttribute('exit-control', 'back-button');
+      await manager.loadPlayers();
+      await nextTick();
+
+      openPageAttachment();
+
+      expect(playerEl.querySelector('button.amp-story-player-hide-button')).to
+        .exist;
+    });
+
+    it('should fire page attachment open event once', async () => {
+      buildStoryPlayer();
+      await manager.loadPlayers();
+      await nextTick();
+
+      const pageAttachmentSpy = env.sandbox.spy();
+      playerEl.addEventListener('page-attachment-open', pageAttachmentSpy);
+
+      openPageAttachment();
+
+      expect(pageAttachmentSpy).to.have.been.calledOnce;
+    });
+
+    it('should fire page attachment close event once', async () => {
+      buildStoryPlayer();
+      await manager.loadPlayers();
+      await nextTick();
+
+      const pageAttachmentSpy = env.sandbox.spy();
+      playerEl.addEventListener('page-attachment-close', pageAttachmentSpy);
+
+      closePageAttachment();
+
+      expect(pageAttachmentSpy).to.have.been.calledOnce;
+    });
+
+    it('navigate forward given a positive number in range', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 5);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      const navigationSpy = env.sandbox.spy();
+      playerEl.addEventListener('navigation', navigationSpy);
+
+      player.go(2);
+
+      expect(navigationSpy).to.have.been.calledWithMatch({
+        type: 'navigation',
+        detail: {
+          index: 2,
+          remaining: 2,
+        },
+      });
+    });
+
+    it('navigate backward given a negative number in range', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 5);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      const navigationSpy = env.sandbox.spy();
+      playerEl.addEventListener('navigation', navigationSpy);
+
+      player.go(3);
+      player.go(-1);
+
+      expect(navigationSpy).to.have.been.calledWithMatch({
+        type: 'navigation',
+        detail: {
+          index: 2,
+          remaining: 2,
+        },
+      });
+    });
+
+    it('not navigate given zero', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 5);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      const navigationSpy = env.sandbox.spy();
+      playerEl.addEventListener('navigation', navigationSpy);
+      player.go(0);
+      expect(navigationSpy).to.have.not.been.called;
+    });
+
+    it('go should throw when positive number is out of story range', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 5);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+
+      return expect(() => player.go(6)).to.throw('Out of Story range.');
+    });
+
+    it('go should throw when negative number is out of story range', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 5);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+
+      return expect(() => player.go(-1)).to.throw('Out of Story range.');
+    });
+
+    it('go with page delta should change current story page', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 1);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      const sendRequestSpy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+      player.go(0, 4);
+      await nextTick();
+
+      expect(sendRequestSpy).to.have.been.calledWith('selectPage', {
+        'delta': 4,
+      });
+    });
+
+    it('navigate to id when calling gotToPageId', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 1);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      const sendRequestSpy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+
+      player.show('', 'page-2');
+
+      await nextTick();
+
+      expect(sendRequestSpy).to.have.been.calledWith('selectPage', {
+        'id': 'page-2',
+      });
+    });
+
+    it('takes to first story when swiping on the last one with circular wrapping', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 5);
+      playerEl.appendChild(buildCircularWrappingConfig());
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      const navigationSpy = env.sandbox.spy();
+      playerEl.addEventListener('navigation', navigationSpy);
+
+      player.go(4);
+      swipeLeft();
+
+      expect(navigationSpy).to.have.been.calledWithMatch({
+        type: 'navigation',
+        detail: {
+          index: 0,
+          remaining: 4,
+        },
+      });
+    });
+
+    it('takes to last story when swiping on the first one with circular wrapping', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 5);
+      playerEl.appendChild(buildCircularWrappingConfig());
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      const navigationSpy = env.sandbox.spy();
+      playerEl.addEventListener('navigation', navigationSpy);
+
+      swipeRight();
+
+      expect(navigationSpy).to.have.been.calledWithMatch({
+        type: 'navigation',
+        detail: {
+          index: 4,
+          remaining: 0,
+        },
+      });
+    });
+
+    it('navigate to first story when last story is finished', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 5);
+      playerEl.appendChild(buildCircularWrappingConfig());
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      const navigationSpy = env.sandbox.spy();
+      playerEl.addEventListener('navigation', navigationSpy);
+
+      player.go(4);
+      player.go(1);
+
+      expect(navigationSpy).to.have.been.calledWithMatch({
+        type: 'navigation',
+        detail: {
+          index: 0,
+          remaining: 4,
+        },
+      });
+    });
+
+    it('navigate to last story when first story is requested to go back', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 5);
+      playerEl.appendChild(buildCircularWrappingConfig());
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      const navigationSpy = env.sandbox.spy();
+      playerEl.addEventListener('navigation', navigationSpy);
+
+      player.go(-1);
+
+      expect(navigationSpy).to.have.been.calledWithMatch({
+        type: 'navigation',
+        detail: {
+          index: 4,
+          remaining: 0,
+        },
+      });
+    });
+
+    it('should dispatch amp-story-muted-state when story is unmuted', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 1);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      const spy = env.sandbox.spy();
+      playerEl.addEventListener('amp-story-muted-state', spy);
+
+      const fakeData = {state: 'MUTED_STATE', value: false};
+      fireHandler['documentStateUpdate']('documentStateUpdate', fakeData);
+
+      await nextTick();
+
+      expect(spy).to.have.been.calledWithMatch({
+        type: 'amp-story-muted-state',
+        detail: {
+          muted: false,
+        },
+      });
+    });
+
+    it('should dispatch amp-story-muted-state when story is muted', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 1);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      const spy = env.sandbox.spy();
+      playerEl.addEventListener('amp-story-muted-state', spy);
+
+      const fakeData = {state: 'MUTED_STATE', value: true};
+      fireHandler['documentStateUpdate']('documentStateUpdate', fakeData);
+
+      await nextTick();
+
+      expect(spy).to.have.been.calledWithMatch({
+        type: 'amp-story-muted-state',
+        detail: {
+          muted: true,
+        },
+      });
+    });
+
+    it('should react to CURRENT_PAGE_ID events', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 1);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      const navigationSpy = env.sandbox.spy();
+      playerEl.addEventListener('storyNavigation', navigationSpy);
+
+      fakeResponse = {value: 0.12};
+      const fakeData = {state: 'CURRENT_PAGE_ID', value: 'page-2'};
+      fireHandler['documentStateUpdate']('documentStateUpdate', fakeData);
+
+      await nextTick();
+
+      expect(navigationSpy).to.have.been.calledWithMatch({
+        type: 'storyNavigation',
+        detail: {
+          pageId: 'page-2',
+          progress: 0.12,
+        },
+      });
+    });
+
+    it('supress navigation animation if called go with options.animate = false', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 2);
+      playerEl.appendChild(buildCircularWrappingConfig());
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      player.go(1, 0, {animate: false});
+
+      expect(
+        player
+          .getElement()
+          .querySelector('.i-amphtml-story-player-main-container')
+          .classList.contains('i-amphtml-story-player-no-navigation-transition')
+      ).to.be.true;
+    });
+
+    it('not supress navigation animation if called go with options.animate = true', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 2);
+      playerEl.appendChild(buildCircularWrappingConfig());
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      player.go(1, 0, {animate: true});
+
+      expect(
+        player
+          .getElement()
+          .querySelector('.i-amphtml-story-player-main-container')
+          .classList.contains('i-amphtml-story-player-no-navigation-transition')
+      ).to.be.false;
+    });
+
+    it('revert navigation animation after transition ends', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 2);
+      playerEl.appendChild(buildCircularWrappingConfig());
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await nextTick();
+
+      player.go(1, 0, {animate: false});
+
+      const rootEl = player
+        .getElement()
+        .querySelector('.i-amphtml-story-player-main-container');
+
+      // Wait for event dispatched to be listened
+      await listenOncePromise(playerEl, 'transitionend');
+      await macroTask();
 
-      expect(playerEl.shadowRoot.querySelector('iframe')).to.exist;
+      expect(
+        rootEl.classList.contains(
+          'i-amphtml-story-player-no-navigation-transition'
+        )
+      ).to.be.false;
     });
   });
 });
diff --git a/test/unit/test-ampdoc.js b/test/unit/test-ampdoc.js
index 19fa8f205d345..8b3ecec2b72a4 100644
--- a/test/unit/test-ampdoc.js
+++ b/test/unit/test-ampdoc.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as docready from '../../src/document-ready';
+import * as docready from '../../src/core/document-ready';
 import * as dom from '../../src/dom';
 import {
   AmpDocFie,
@@ -27,33 +27,25 @@ import {
   getShadowDomSupportedVersion,
   isShadowDomSupported,
   setShadowDomSupportedVersionForTesting,
-} from '../../src/web-components';
-import {Signals} from '../../src/utils/signals';
+} from '../../src/core/dom/web-components';
+import {Signals} from '../../src/core/data-structures/signals';
 import {createShadowRoot} from '../../src/shadow-embed';
-import {setParentWindow} from '../../src/service';
-import {toggleAmpdocFieForTesting} from '../../src/ampdoc-fie';
+import {
+  getServiceForDoc,
+  registerServiceBuilderForDoc,
+  setParentWindow,
+} from '../../src/service';
+import {waitFor} from '../../testing/test-helper';
+
+describes.realWin('AmpDocService', {}, (env) => {
+  let doc, win;
 
-describes.sandboxed('AmpDocService', {}, () => {
-  afterEach(() => {
-    delete window.document['__AMPDOC'];
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
   });
 
   describe('params', () => {
-    let doc, win;
-
-    beforeEach(() => {
-      doc = {
-        body: null,
-        visibilityState: 'visible',
-        addEventListener: function () {},
-        removeEventListener: function () {},
-      };
-      win = {
-        location: {},
-        document: doc,
-      };
-    });
-
     it('should read params from window name and fragment', () => {
       win.name = '__AMP__param1=value1&other=one';
       win.location.hash = '#paddingTop=17&other=two';
@@ -83,7 +75,7 @@ describes.sandboxed('AmpDocService', {}, () => {
     let service;
 
     beforeEach(() => {
-      service = new AmpDocService(window, /* isSingleDoc */ true);
+      service = new AmpDocService(win, /* isSingleDoc */ true);
     });
 
     it('should initialize as single-doc', () => {
@@ -93,7 +85,8 @@ describes.sandboxed('AmpDocService', {}, () => {
     });
 
     it('should not return a conflicting value on a form', () => {
-      const node = document.createElement('form');
+      const node = doc.createElement('form');
+      doc.body.appendChild(node);
       // Note: Instead of actually creating an input element with a name that
       // conflicts, just set this directly in case the test is ever run in
       // an compiled environment.
@@ -103,29 +96,19 @@ describes.sandboxed('AmpDocService', {}, () => {
       expect(ampDoc).to.equal(service.getSingleDoc());
     });
 
-    it('should not return a conflicting value on a document fragment', () => {
-      // This is a stand-in for testing a document, without actually modifying
-      // the document to keep the test side-effect free.
-      const frag = document.createDocumentFragment();
-      frag.getAmpDoc = 5;
-
-      const ampDoc = service.getAmpDocIfAvailable(frag);
-      expect(ampDoc).to.equal(service.getSingleDoc());
-    });
-
     it('should always yield the single document', () => {
       expect(() => service.getAmpDoc(null)).to.throw();
-      expect(service.getAmpDoc(document)).to.equal(service.getSingleDoc());
-      const div = document.createElement('div');
-      document.body.appendChild(div);
+      expect(service.getAmpDoc(doc)).to.equal(service.getSingleDoc());
+      const div = doc.createElement('div');
+      doc.body.appendChild(div);
       expect(service.getAmpDoc(div)).to.equal(service.getSingleDoc());
     });
 
     it('should return meta content values', () => {
-      const meta = document.createElement('meta');
+      const meta = doc.createElement('meta');
       meta.setAttribute('name', 'abc');
       meta.setAttribute('content', '123');
-      document.head.appendChild(meta);
+      doc.head.appendChild(meta);
       expect(service.getAmpDoc(meta).getMetaByName('abc')).to.equal('123');
     });
 
@@ -137,8 +120,8 @@ describes.sandboxed('AmpDocService', {}, () => {
       let content;
 
       beforeEach(() => {
-        content = document.createElement('span');
-        host = document.createElement('div');
+        content = doc.createElement('span');
+        host = doc.createElement('div');
         setShadowDomSupportedVersionForTesting(undefined);
         if (isShadowDomSupported()) {
           if (getShadowDomSupportedVersion() == ShadowDomVersion.V1) {
@@ -148,7 +131,7 @@ describes.sandboxed('AmpDocService', {}, () => {
           }
           shadowRoot.appendChild(content);
         }
-        document.body.appendChild(host);
+        doc.body.appendChild(host);
       });
 
       afterEach(() => {
@@ -190,9 +173,9 @@ describes.sandboxed('AmpDocService', {}, () => {
     let host, shadowRoot, content;
 
     beforeEach(() => {
-      service = new AmpDocService(window, /* isSingleDoc */ false);
-      content = document.createElement('amp-img');
-      host = document.createElement('div');
+      service = new AmpDocService(win, /* isSingleDoc */ false);
+      content = doc.createElement('amp-img');
+      host = doc.createElement('div');
       setShadowDomSupportedVersionForTesting(undefined);
       if (isShadowDomSupported()) {
         if (getShadowDomSupportedVersion() == ShadowDomVersion.V1) {
@@ -202,7 +185,7 @@ describes.sandboxed('AmpDocService', {}, () => {
         }
         shadowRoot.appendChild(content);
       }
-      document.body.appendChild(host);
+      doc.body.appendChild(host);
     });
 
     afterEach(() => {
@@ -300,8 +283,8 @@ describes.sandboxed('AmpDocService', {}, () => {
       const ampDoc = service.getAmpDoc(content);
       expect(ampDoc).to.equal(newAmpDoc);
 
-      const content2 = document.createElement('span');
-      const host2 = document.createElement('div');
+      const content2 = doc.createElement('span');
+      const host2 = doc.createElement('div');
 
       let shadowRoot2;
       if (isShadowDomSupported()) {
@@ -330,10 +313,9 @@ describes.sandboxed('AmpDocService', {}, () => {
     let host, shadowRoot, content;
 
     beforeEach(() => {
-      toggleAmpdocFieForTesting(window, true);
-      service = new AmpDocService(window, /* isSingleDoc */ true);
-      content = document.createElement('amp-img');
-      host = document.createElement('div');
+      service = new AmpDocService(win, /* isSingleDoc */ true);
+      content = doc.createElement('amp-img');
+      host = doc.createElement('div');
       setShadowDomSupportedVersionForTesting(undefined);
       if (isShadowDomSupported()) {
         if (getShadowDomSupportedVersion() == ShadowDomVersion.V1) {
@@ -343,11 +325,10 @@ describes.sandboxed('AmpDocService', {}, () => {
         }
         shadowRoot.appendChild(content);
       }
-      document.body.appendChild(host);
+      doc.body.appendChild(host);
     });
 
     afterEach(() => {
-      toggleAmpdocFieForTesting(window, false);
       if (host.parentNode) {
         host.parentNode.removeChild(host);
       }
@@ -428,8 +409,8 @@ describes.sandboxed('AmpDocService', {}, () => {
       const ampDoc = service.getAmpDoc(content);
       expect(ampDoc).to.equal(newAmpDoc);
 
-      const content2 = document.createElement('span');
-      const host2 = document.createElement('div');
+      const content2 = doc.createElement('span');
+      const host2 = doc.createElement('div');
 
       let shadowRoot2;
       if (isShadowDomSupported()) {
@@ -451,34 +432,6 @@ describes.sandboxed('AmpDocService', {}, () => {
       expect(service.getAmpDoc(content2)).to.equal(ampDoc);
       expect(service.getAmpDoc(shadowRoot2)).to.equal(ampDoc);
     });
-
-    describes.realWin('fie-doc', {}, (env) => {
-      let childWin;
-
-      beforeEach(() => {
-        childWin = env.win;
-        setParentWindow(childWin, service.win);
-      });
-
-      it('should create and cache fie-doc', () => {
-        const newAmpDoc = service.installFieDoc('https://a.org/', childWin);
-        const content = document.createElement('div');
-        childWin.document.body.appendChild(content);
-        const ampDoc = service.getAmpDoc(content);
-        expect(ampDoc).to.equal(newAmpDoc);
-        expect(ampDoc.getParent()).to.equal(service.getSingleDoc());
-        expect(childWin.document['__AMPDOC']).to.equal(ampDoc);
-      });
-
-      it('should pass fie doc params', () => {
-        const ampdoc = service.installFieDoc('https://a.org/', childWin, {
-          params: {
-            'other': 'one',
-          },
-        });
-        expect(ampdoc.getParam('other')).to.equal('one');
-      });
-    });
   });
 });
 
@@ -567,6 +520,23 @@ describes.sandboxed('AmpDoc.visibilityState', {}, (env) => {
     expect(doc.removeEventListener.callCount).to.equal(2);
   });
 
+  it('should set up and dipose services', () => {
+    const disposableFactory = function () {
+      return {
+        dispose: env.sandbox.spy(),
+      };
+    };
+
+    // Register a disposable service.
+    registerServiceBuilderForDoc(embedChild, 'a', disposableFactory);
+    const disposableService = getServiceForDoc(embedChild, 'a');
+
+    // Destroy the nested child.
+    embedChild.dispose();
+
+    expect(disposableService.dispose).to.be.calledOnce;
+  });
+
   it('should be visible by default', () => {
     expect(top.getVisibilityState()).to.equal('visible');
     expect(embedSameWindow.getVisibilityState()).to.equal('visible');
@@ -829,18 +799,6 @@ describes.sandboxed('AmpDoc.visibilityState', {}, (env) => {
     expect(embedChild.getVisibilityState()).to.equal('hidden');
   });
 
-  it('should configure visibilityState for prerender', () => {
-    top = new AmpDocSingle(win, {
-      params: {
-        'visibilityState': 'prerender',
-        'prerenderSize': '3',
-      },
-    });
-    expect(top.getVisibilityState()).to.equal('prerender');
-    expect(top.isVisible()).to.equal(false);
-    expect(top.getParam('prerenderSize')).to.equal('3');
-  });
-
   it('should be hidden when the browser document is unknown state', () => {
     updateDocumentVisibility(doc, 'what is this');
     expect(top.getVisibilityState()).to.equal('hidden');
@@ -858,40 +816,43 @@ describes.sandboxed('AmpDoc.visibilityState', {}, (env) => {
   });
 });
 
-describes.sandboxed('AmpDocSingle', {}, (env) => {
+describes.realWin('AmpDocSingle', {}, (env) => {
+  let win, doc;
   let ampdoc;
 
   beforeEach(() => {
-    ampdoc = new AmpDocSingle(window);
+    win = env.win;
+    doc = win.document;
+    ampdoc = new AmpDocSingle(win);
   });
 
   it('should return window', () => {
-    expect(ampdoc.win).to.equal(window);
-    expect(ampdoc.getUrl()).to.equal(window.location.href);
+    expect(ampdoc.win).to.equal(win);
+    expect(ampdoc.getUrl()).to.equal(win.location.href);
   });
 
   it('should return document as root', () => {
-    expect(ampdoc.getRootNode()).to.equal(window.document);
-    expect(ampdoc.getHeadNode()).to.equal(window.document.head);
+    expect(ampdoc.getRootNode()).to.equal(win.document);
+    expect(ampdoc.getHeadNode()).to.equal(win.document.head);
     expect(ampdoc.isSingleDoc()).to.be.true;
   });
 
   it('should find element by id', () => {
     const id = 'ampdoc_test_element_' + Date.now();
-    const element = document.createElement('div');
+    const element = doc.createElement('div');
     element.setAttribute('id', id);
-    document.body.appendChild(element);
+    doc.body.appendChild(element);
     expect(ampdoc.getElementById(id)).to.equal(element);
   });
 
   it('should initialize ready state and body immediately', () => {
-    expect(ampdoc.getBody()).to.equal(window.document.body);
+    expect(ampdoc.getBody()).to.equal(win.document.body);
     expect(ampdoc.isBodyAvailable()).to.be.true;
     expect(ampdoc.isReady()).to.be.true;
     return Promise.all([ampdoc.waitForBodyOpen(), ampdoc.whenReady()]).then(
       (results) => {
-        expect(results[0]).to.equal(window.document.body);
-        expect(ampdoc.getBody()).to.equal(window.document.body);
+        expect(results[0]).to.equal(win.document.body);
+        expect(ampdoc.getBody()).to.equal(win.document.body);
         expect(ampdoc.isBodyAvailable()).to.be.true;
         expect(ampdoc.isReady()).to.be.true;
       }
@@ -949,48 +910,59 @@ describes.sandboxed('AmpDocSingle', {}, (env) => {
 
   it('should declare extension', () => {
     expect(ampdoc.declaresExtension('ext1')).to.be.false;
+    expect(ampdoc.declaresExtension('ext1', '0.2')).to.be.false;
     expect(ampdoc.declaresExtension('ext2')).to.be.false;
-    ampdoc.declareExtension('ext1');
+    ampdoc.declareExtension('ext1', '0.2');
     expect(ampdoc.declaresExtension('ext1')).to.be.true;
+    expect(ampdoc.declaresExtension('ext1', '0.2')).to.be.true;
+    expect(ampdoc.declaresExtension('ext1', '0.1')).to.be.false;
     expect(ampdoc.declaresExtension('ext2')).to.be.false;
 
-    ampdoc.declareExtension('ext2');
+    ampdoc.declareExtension('ext2', '0.3');
     expect(ampdoc.declaresExtension('ext1')).to.be.true;
     expect(ampdoc.declaresExtension('ext2')).to.be.true;
+    expect(ampdoc.declaresExtension('ext2', '0.3')).to.be.true;
+    expect(ampdoc.declaresExtension('ext2', '0.1')).to.be.false;
   });
 
   it('should ignore duplicate extensions', () => {
     expect(ampdoc.declaresExtension('ext1')).to.be.false;
-    ampdoc.declareExtension('ext1');
+    ampdoc.declareExtension('ext1', '0.2');
     expect(ampdoc.declaresExtension('ext1')).to.be.true;
-    expect(ampdoc.declaredExtensions_).to.have.length(1);
+    expect(ampdoc.declaresExtension('ext1', '0.2')).to.be.true;
 
     // Repeat.
-    ampdoc.declareExtension('ext1');
-    expect(ampdoc.declaredExtensions_).to.have.length(1);
+    ampdoc.declareExtension('ext1', '0.2');
     expect(ampdoc.declaresExtension('ext1')).to.be.true;
+    expect(ampdoc.declaresExtension('ext1', '0.2')).to.be.true;
+
+    // A different version is not allowed.
+    expect(() => ampdoc.declareExtension('ext1', '0.1')).to.throw();
   });
 });
 
-describes.sandboxed('AmpDocShadow', {}, () => {
+describes.realWin('AmpDocShadow', {}, (env) => {
   const URL = 'https://example.org/document';
 
+  let win, doc;
   let content, host, shadowRoot;
   let ampdoc;
 
   beforeEach(() => {
-    content = document.createElement('div');
-    host = document.createElement('div');
+    win = env.win;
+    doc = win.document;
+    content = doc.createElement('div');
+    host = doc.createElement('div');
     shadowRoot = createShadowRoot(host);
     shadowRoot.appendChild(content);
-    ampdoc = new AmpDocShadow(window, URL, shadowRoot);
+    ampdoc = new AmpDocShadow(win, URL, shadowRoot);
   });
 
   it('should return window', () => {
     if (!ampdoc) {
       return;
     }
-    expect(ampdoc.win).to.equal(window);
+    expect(ampdoc.win).to.equal(win);
     expect(ampdoc.isSingleDoc()).to.be.false;
     expect(ampdoc.getUrl()).to.equal(URL);
   });
@@ -1008,7 +980,7 @@ describes.sandboxed('AmpDocShadow', {}, () => {
       return;
     }
     const id = 'ampdoc_test_element_' + Date.now();
-    const element = document.createElement('div');
+    const element = doc.createElement('div');
     element.setAttribute('id', id);
     content.appendChild(element);
     expect(ampdoc.getElementById(id)).to.equal(element);
@@ -1075,16 +1047,28 @@ describes.sandboxed('AmpDocShadow', {}, () => {
 describes.realWin('AmpDocFie', {}, (env) => {
   const URL = 'https://example.org/document';
 
+  let win, doc;
   let service;
+  let frame;
   let childWin;
   let parent;
   let ampdoc;
 
-  beforeEach(() => {
-    service = new AmpDocService(window, /* isSingleDoc */ true);
-    childWin = env.win;
-    setParentWindow(childWin, window);
+  beforeEach(async () => {
+    win = env.win;
+    doc = win.document;
+    service = new AmpDocService(win, /* isSingleDoc */ true);
     parent = service.getSingleDoc();
+
+    frame = doc.createElement('iframe');
+    frame.srcdoc = '<div>works</div>';
+    doc.body.appendChild(frame);
+    await waitFor(
+      () => frame.contentDocument && frame.contentDocument.querySelector('div'),
+      'child iframe initialized'
+    );
+    childWin = frame.contentWindow;
+    setParentWindow(childWin, win);
     ampdoc = new AmpDocFie(childWin, URL, parent);
   });
 
@@ -1116,7 +1100,7 @@ describes.realWin('AmpDocFie', {}, (env) => {
 
   it('should find element by id', () => {
     const id = 'ampdoc_test_element_' + Date.now();
-    const element = document.createElement('div');
+    const element = doc.createElement('div');
     element.setAttribute('id', id);
     childWin.document.body.appendChild(element);
     expect(ampdoc.getElementById(id)).to.equal(element);
diff --git a/test/unit/test-animation.js b/test/unit/test-animation.js
index 56ea7326bd13f..b8daecf774670 100644
--- a/test/unit/test-animation.js
+++ b/test/unit/test-animation.js
@@ -16,7 +16,7 @@
 
 import {Animation} from '../../src/animation';
 
-describe('Animation', () => {
+describes.sandboxed('Animation', {}, (env) => {
   let vsync;
   let vsyncTasks;
   let anim;
@@ -24,7 +24,7 @@ describe('Animation', () => {
   let contextNode;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
     vsyncTasks = [];
     vsync = {
       canAnimate: () => true,
diff --git a/test/unit/test-base-element.js b/test/unit/test-base-element.js
index d633569700afe..b00f887d4491d 100644
--- a/test/unit/test-base-element.js
+++ b/test/unit/test-base-element.js
@@ -15,12 +15,12 @@
  */
 
 import {BaseElement} from '../../src/base-element';
-import {DEFAULT_ACTION} from '../../src/action-constants';
+import {DEFAULT_ACTION} from '../../src/core/constants/action-constants';
 import {LayoutPriority} from '../../src/layout';
 import {Resource} from '../../src/service/resource';
 import {Services} from '../../src/services';
 import {createAmpElementForTesting} from '../../src/custom-element';
-import {layoutRectLtwh} from '../../src/layout-rect';
+import {layoutRectLtwh} from '../../src/core/math/layout-rect';
 import {listenOncePromise} from '../../src/event-helper';
 
 describes.realWin('BaseElement', {amp: true}, (env) => {
@@ -81,18 +81,6 @@ describes.realWin('BaseElement', {amp: true}, (env) => {
     expect(target.getAttribute('data-test3')).to.equal('123');
   });
 
-  it('propagateDataset', () => {
-    const target = doc.createElement('div');
-    target.dataset.foo = 'abc';
-
-    element.propagateDataset(target);
-    expect(target.hasAttribute('data-foo')).to.be.false;
-
-    customElement.dataset.bar = '123';
-    element.propagateDataset(target);
-    expect(target.hasAttribute('data-bar', '123')).to.be.true;
-  });
-
   it('should register action', () => {
     const handler = () => {};
     element.registerAction('method1', handler);
@@ -191,15 +179,9 @@ describes.realWin('BaseElement', {amp: true}, (env) => {
       .withArgs(customElement)
       .returns(resource);
     const layoutBox = layoutRectLtwh(0, 50, 100, 200);
-    const pageLayoutBox = layoutRectLtwh(0, 0, 100, 200);
     env.sandbox.stub(resource, 'getLayoutBox').callsFake(() => layoutBox);
-    env.sandbox
-      .stub(resource, 'getPageLayoutBox')
-      .callsFake(() => pageLayoutBox);
     expect(element.getLayoutBox()).to.eql(layoutBox);
     expect(customElement.getLayoutBox()).to.eql(layoutBox);
-    expect(element.getPageLayoutBox()).to.eql(pageLayoutBox);
-    expect(customElement.getPageLayoutBox()).to.eql(pageLayoutBox);
   });
 
   it('should return true for inabox experiment renderOutsideViewport', () => {
diff --git a/test/unit/test-batched-json.js b/test/unit/test-batched-json.js
index ecbd939feeb15..b99795a52b8c1 100644
--- a/test/unit/test-batched-json.js
+++ b/test/unit/test-batched-json.js
@@ -18,7 +18,7 @@ import {Services} from '../../src/services';
 import {UrlReplacementPolicy, batchFetchJsonFor} from '../../src/batched-json';
 import {user} from '../../src/log';
 
-describe('batchFetchJsonFor', () => {
+describes.sandboxed('batchFetchJsonFor', {}, (env) => {
   // Fakes.
   const ampdoc = {win: null};
   // Service fakes.
@@ -43,24 +43,24 @@ describe('batchFetchJsonFor', () => {
 
   beforeEach(() => {
     urlReplacements = {
-      expandUrlAsync: window.sandbox.stub(),
-      collectDisallowedVarsSync: window.sandbox.stub(),
+      expandUrlAsync: env.sandbox.stub(),
+      collectDisallowedVarsSync: env.sandbox.stub(),
     };
-    window.sandbox
+    env.sandbox
       .stub(Services, 'urlReplacementsForDoc')
       .returns(urlReplacements);
 
-    fetchJson = window.sandbox.stub().returns(
+    fetchJson = env.sandbox.stub().returns(
       Promise.resolve({
         json: () => Promise.resolve(data),
       })
     );
 
     xhr = {xssiJson: () => Promise.resolve(data)};
-    window.sandbox.stub(Services, 'xhrFor').returns(xhr);
+    env.sandbox.stub(Services, 'xhrFor').returns(xhr);
 
     batchedXhr = {fetchJson};
-    window.sandbox.stub(Services, 'batchedXhrFor').returns(batchedXhr);
+    env.sandbox.stub(Services, 'batchedXhrFor').returns(batchedXhr);
   });
 
   describe('URL replacement', () => {
@@ -86,7 +86,8 @@ describe('batchFetchJsonFor', () => {
         urlReplacements.collectDisallowedVarsSync.withArgs(el).returns(['BAR']);
 
         const optIn = UrlReplacementPolicy.OPT_IN;
-        const rejectError = /Please add data-amp-replace="BAR" to the <AMP-LIST> element./;
+        const rejectError =
+          /Please add data-amp-replace="BAR" to the <AMP-LIST> element./;
         return batchFetchJsonFor(ampdoc, el, {
           urlReplacement: optIn,
         }).should.eventually.be.rejectedWith(rejectError);
@@ -100,7 +101,7 @@ describe('batchFetchJsonFor', () => {
         .withArgs('https://data.com?x=FOO&y=BAR')
         .returns(Promise.resolve('https://data.com?x=abc&y=BAR'));
 
-      const userError = window.sandbox.stub(user(), 'error');
+      const userError = env.sandbox.stub(user(), 'error');
       const all = UrlReplacementPolicy.ALL;
       return batchFetchJsonFor(ampdoc, el, {urlReplacement: all}).then(() => {
         expect(fetchJson).to.be.calledWith('https://data.com?x=abc&y=BAR');
@@ -109,71 +110,4 @@ describe('batchFetchJsonFor', () => {
       });
     });
   });
-
-  describe('POST based identity', () => {
-    it('should send POST request with auth token is present', () => {
-      const el = element('https://data.com');
-      const all = UrlReplacementPolicy.ALL;
-
-      urlReplacements.expandUrlAsync
-        .withArgs('https://data.com')
-        .returns(Promise.resolve('https://data.com'));
-
-      const expectedRequest = {
-        'body': {'ampViewerAuthToken': 'idtoken'},
-        'headers': {
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        'method': 'POST',
-      };
-
-      return batchFetchJsonFor(ampdoc, el, {
-        urlReplacment: all,
-        token: 'idtoken',
-      }).then(() => {
-        expect(fetchJson).to.be.calledWithExactly(
-          'https://data.com',
-          expectedRequest
-        );
-      });
-    });
-
-    it('should send POST request with empty, defined identity token', () => {
-      const el = element('https://data.com');
-      const all = UrlReplacementPolicy.ALL;
-
-      urlReplacements.expandUrlAsync
-        .withArgs('https://data.com')
-        .returns(Promise.resolve('https://data.com'));
-
-      const token = '';
-      return batchFetchJsonFor(ampdoc, el, {
-        replacementUrl: all,
-        token,
-      }).then(() => {
-        const fetchOpt = fetchJson.firstCall.args[1];
-        expect(fetchOpt.body.ampViewerAuthToken).to.equal('');
-        expect(fetchOpt.method).to.equal('POST');
-      });
-    });
-
-    it('should not transform the request with an undefined token', () => {
-      const el = element('https://data.com');
-      const all = UrlReplacementPolicy.ALL;
-
-      urlReplacements.expandUrlAsync
-        .withArgs('https://data.com')
-        .returns(Promise.resolve('https://data.com'));
-
-      const expectedRequest = {};
-
-      return batchFetchJsonFor(ampdoc, el, {urlReplacement: all}).then(() => {
-        expect(fetchJson).to.be.calledWithExactly(
-          'https://data.com',
-          expectedRequest
-        );
-      });
-    });
-  });
-  // TODO(choumx): Add tests for normal fetch functionality.
 });
diff --git a/test/unit/test-cache-cid-api.js b/test/unit/test-cache-cid-api.js
index 7ac30b792cd0f..97752a61afc55 100644
--- a/test/unit/test-cache-cid-api.js
+++ b/test/unit/test-cache-cid-api.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {CacheCidApi} from '../../src/service/cache-cid-api';
 import {installTimerService} from '../../src/service/timer-impl';
 import {mockServiceForDoc, stubService} from '../../testing/test-helper';
@@ -35,8 +35,7 @@ describes.realWin('cacheCidApi', {amp: true}, (env) => {
       'isProxyOrigin',
     ]);
 
-    clock = lolex.install({
-      target: env.win,
+    clock = fakeTimers.withGlobal(env.win).install({
       toFake: ['Date', 'setTimeout', 'clearTimeout'],
     });
     installTimerService(env.win);
@@ -66,7 +65,7 @@ describes.realWin('cacheCidApi', {amp: true}, (env) => {
     });
   });
 
-  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari on Sauce Labs.
+  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari.
   describe
     .configure()
     .skipSafari()
diff --git a/extensions/amp-a4a/0.1/test/test-callout-vendors.js b/test/unit/test-callout-vendors.js
similarity index 87%
rename from extensions/amp-a4a/0.1/test/test-callout-vendors.js
rename to test/unit/test-callout-vendors.js
index 972e3bdf74ebc..5a877d963e512 100644
--- a/extensions/amp-a4a/0.1/test/test-callout-vendors.js
+++ b/test/unit/test-callout-vendors.js
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import {RTC_VENDORS} from '../callout-vendors';
-import {isSecureUrlDeprecated} from '../../../../src/url';
+import {RTC_VENDORS} from '../../src/service/real-time-config/callout-vendors';
+import {isSecureUrlDeprecated} from '../../src/url';
 
 // The keys of RTC_VENDORS are not allowed to have any capital letters.
 // This test acts as a presubmit to enforce that.
-describe('RTC_VENDORS', () => {
+describes.sandboxed('RTC_VENDORS', {}, () => {
   it('should have all lowercase keys', () =>
     Object.keys(RTC_VENDORS).forEach((key) =>
       expect(key).to.equal(key.toLowerCase())
diff --git a/test/unit/test-chunk.js b/test/unit/test-chunk.js
index d077ceb3fd635..53e33bd33c5ef 100644
--- a/test/unit/test-chunk.js
+++ b/test/unit/test-chunk.js
@@ -24,7 +24,7 @@ import {
 } from '../../src/chunk';
 import {installDocService} from '../../src/service/ampdoc-impl';
 
-describe('chunk2', () => {
+describes.sandboxed('chunk2', {}, () => {
   beforeEach(() => {
     activateChunkingForTesting();
   });
@@ -217,9 +217,8 @@ describe('chunk2', () => {
           env.sandbox.stub(ampdoc, 'isVisible').callsFake(() => {
             return false;
           });
-          env.win.requestIdleCallback = resolvingIdleCallbackWithTimeRemaining(
-            15
-          );
+          env.win.requestIdleCallback =
+            resolvingIdleCallbackWithTimeRemaining(15);
           const chunks = chunkInstanceForTesting(env.win.document);
           env.sandbox.stub(chunks, 'executeAsap_').callsFake(() => {
             throw new Error('No calls expected: executeAsap_');
@@ -252,9 +251,8 @@ describe('chunk2', () => {
           env.sandbox.stub(ampdoc, 'isVisible').callsFake(() => {
             return false;
           });
-          env.win.requestIdleCallback = resolvingIdleCallbackWithTimeRemaining(
-            15
-          );
+          env.win.requestIdleCallback =
+            resolvingIdleCallbackWithTimeRemaining(15);
           const chunks = chunkInstanceForTesting(env.win.document);
           env.sandbox.stub(chunks, 'executeAsap_').callsFake(() => {
             throw new Error('No calls expected: executeAsap_');
@@ -360,7 +358,7 @@ describe('chunk2', () => {
   );
 });
 
-describe('long tasks', () => {
+describes.sandboxed('long tasks', {}, () => {
   describes.fakeWin(
     'long chunk tasks force a macro task between work',
     {
@@ -414,7 +412,7 @@ describe('long tasks', () => {
         ).macroAfterLongTask_ = true;
       });
 
-      it('should not run macro tasks with invisible bodys', (done) => {
+      it('should not break out of microtask loop when body is invisible', (done) => {
         startupChunk(env.win.document, complete('init', true));
         startupChunk(env.win.document, complete('a', true));
         startupChunk(env.win.document, complete('b', true));
@@ -482,14 +480,121 @@ describe('long tasks', () => {
   );
 });
 
-describe('onIdle', () => {
+describes.sandboxed('isInputPending usage', {}, () => {
+  describes.fakeWin(
+    'pending input breaks microtask loop to subsequent macrotask',
+    {
+      amp: false,
+    },
+    (env) => {
+      let subscriptions;
+      let progress;
+      let postMessageCalls;
+      let pendingInput;
+
+      function complete(str, simulatePendingInputAfter) {
+        return function (unusedIdleDeadline) {
+          if (simulatePendingInputAfter) {
+            pendingInput = true;
+          }
+          progress += str;
+        };
+      }
+
+      function runSubs() {
+        subscriptions['message']
+          .slice()
+          .forEach((method) => method({data: 'amp-macro-task'}));
+      }
+
+      beforeEach(() => {
+        postMessageCalls = 0;
+        pendingInput = false;
+        subscriptions = {};
+
+        env.win.navigator.scheduling = {
+          isInputPending: function () {
+            if (pendingInput) {
+              pendingInput = false;
+              return true;
+            }
+
+            return false;
+          },
+        };
+
+        installDocService(env.win, /* isSingleDoc */ true);
+
+        env.win.addEventListener = function (type, handler) {
+          if (subscriptions[type] && !subscriptions[type].includes(handler)) {
+            subscriptions[type].push(handler);
+          } else {
+            subscriptions[type] = [handler];
+          }
+        };
+
+        env.win.postMessage = function (key) {
+          expect(key).to.equal('amp-macro-task');
+          postMessageCalls++;
+          runSubs();
+        };
+
+        progress = '';
+        chunkInstanceForTesting(
+          env.win.document.documentElement
+        ).macroAfterLongTask_ = true;
+      });
+
+      it('should not break out of microtask loop when body is invisible', (done) => {
+        startupChunk(env.win.document, complete('init', true));
+        startupChunk(env.win.document, complete('a', true));
+        startupChunk(env.win.document, complete('b', true));
+        startupChunk(env.win.document, () => {
+          expect(progress).to.equal('initab');
+          done();
+        });
+      });
+
+      it('should execute chunks after pending input in a macro task', (done) => {
+        startupChunk(env.win.document, complete('1', true));
+        startupChunk(env.win.document, complete('2', false));
+        startupChunk(
+          env.win.document,
+          function () {
+            complete('3', false)();
+            expect(progress).to.equal('123');
+            expect(postMessageCalls).to.equal(0);
+          },
+          /* make body visible */ true
+        );
+        startupChunk(env.win.document, () => {
+          expect(postMessageCalls).to.equal(1);
+          expect(progress).to.equal('123');
+          complete('4', false)();
+        });
+        startupChunk(env.win.document, () => {
+          expect(postMessageCalls).to.equal(1);
+          expect(progress).to.equal('1234');
+        });
+        startupChunk(env.win.document, complete('5', true));
+        startupChunk(env.win.document, () => {
+          expect(postMessageCalls).to.equal(2);
+          expect(progress).to.equal('12345');
+          done();
+        });
+      });
+    }
+  );
+});
+
+describes.sandboxed('onIdle', {}, (env) => {
   let win;
   let calls;
   let callbackCalled;
   let clock;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
     calls = [];
     callbackCalled = false;
     win = {
diff --git a/test/unit/test-cid.js b/test/unit/test-cid.js
index fb9767160bbab..cbf9ae5e7c165 100644
--- a/test/unit/test-cid.js
+++ b/test/unit/test-cid.js
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as cookie from '../../src/cookies';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import * as url from '../../src/url';
 import {Crypto, installCryptoService} from '../../src/service/crypto-impl';
 import {Services} from '../../src/services';
@@ -34,6 +35,10 @@ import {installTimerService} from '../../src/service/timer-impl';
 import {installViewerServiceForDoc} from '../../src/service/viewer-impl';
 import {macroTask} from '../../testing/yield';
 import {parseUrlDeprecated} from '../../src/url';
+import {
+  registerServiceBuilder,
+  resetServiceForTesting,
+} from '../../src/service';
 import {stubServiceForDoc} from '../../testing/test-helper';
 
 const DAY = 24 * 3600 * 1000;
@@ -126,6 +131,7 @@ describes.sandboxed('cid', {}, (env) => {
 
     installViewerServiceForDoc(ampdoc);
     storageGetStub = stubServiceForDoc(env.sandbox, ampdoc, 'storage', 'get');
+
     viewer = Services.viewerForDoc(ampdoc);
     env.sandbox.stub(ampdoc, 'whenFirstVisible').callsFake(function () {
       return whenFirstVisible;
@@ -159,7 +165,7 @@ describes.sandboxed('cid', {}, (env) => {
     window.localStorage.removeItem('amp-cid');
   });
 
-  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari on Sauce Labs.
+  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari.
   describe
     .configure()
     .skipSafari()
@@ -185,7 +191,7 @@ describes.sandboxed('cid', {}, (env) => {
       });
     });
 
-  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari on Sauce Labs.
+  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari.
   describe
     .configure()
     .skipSafari()
@@ -797,7 +803,7 @@ describes.sandboxed('cid', {}, (env) => {
   }
 });
 
-describe('getProxySourceOrigin', () => {
+describes.sandboxed('getProxySourceOrigin', {}, () => {
   it('should fail on non-proxy origin', () => {
     allowConsoleError(() => {
       expect(() => {
@@ -812,24 +818,44 @@ describes.realWin('cid', {amp: true}, (env) => {
   let win;
   let ampdoc;
   let clock;
+  let storage;
+  let storageMock;
+  let storageValue;
   const hasConsent = Promise.resolve();
 
   beforeEach(() => {
     win = env.win;
     ampdoc = env.ampdoc;
-    clock = lolex.install({
-      target: win,
+    clock = fakeTimers.withGlobal(win).install({
       toFake: ['Date', 'setTimeout', 'clearTimeout'],
     });
     cid = cidServiceForDocForTesting(ampdoc);
     env.sandbox.stub(cid.cacheCidApi_, 'isSupported').returns(false);
+    storageValue = {};
+    storage = {
+      setNonBoolean: (name, value) => {
+        storageValue[name] = value;
+        return Promise.resolve();
+      },
+      get: (name) => {
+        return Promise.resolve(storageValue[name]);
+      },
+      isViewerStorage: () => false,
+    };
+    storageMock = env.sandbox.mock(storage);
+
+    resetServiceForTesting(win, 'storage');
+    registerServiceBuilder(win, 'storage', function () {
+      return Promise.resolve(storage);
+    });
   });
 
   afterEach(() => {
+    storageMock.verify();
     clock.uninstall();
   });
 
-  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari on Sauce Labs.
+  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari.
   it.configure().skipSafari(
     'should store CID in cookie when not in Viewer',
     function* () {
@@ -856,6 +882,119 @@ describes.realWin('cid', {amp: true}, (env) => {
     }
   );
 
+  describe('CID backup', () => {
+    beforeEach(() => {
+      cid.isBackupCidExpOn = true;
+      env.sandbox
+        .stub(cid.viewerCidApi_, 'isSupported')
+        .returns(Promise.resolve(false));
+    });
+
+    it('generates a new CID and backup', async () => {
+      setCookie(win, 'foo', '', 0);
+      const fooCid = await cid.get(
+        {
+          scope: 'foo',
+          createCookieIfNotPresent: true,
+        },
+        hasConsent
+      );
+      expect(fooCid).to.have.string('amp-');
+      expect(storageValue['amp-cid:foo']).to.equal(fooCid);
+    });
+
+    it('should find AMP generated CID in cookie and backup', async () => {
+      const cidString = 'amp-abc123';
+      win.document.cookie = `foo=${cidString};`;
+
+      const fooCid = await cid.get(
+        {
+          scope: 'foo',
+          createCookieIfNotPresent: true,
+        },
+        hasConsent
+      );
+      expect(fooCid).to.equal(cidString);
+      expect(storageValue['amp-cid:foo']).to.equal(fooCid);
+
+      const nonAmpCidString = 'xyz987';
+      win.document.cookie = `bar=${nonAmpCidString};`;
+      expect(
+        await cid.get(
+          {
+            scope: 'bar',
+            createCookieIfNotPresent: true,
+          },
+          hasConsent
+        )
+      ).to.equal(nonAmpCidString);
+      expect(storageValue['amp-cid:bar']).to.not.equal(nonAmpCidString);
+    });
+
+    it('only use backup when necessary and update accordingly', async () => {
+      storageValue['amp-cid:foo'] = 'amp-foo-bar';
+      const cidString = 'amp-abc123';
+      win.document.cookie = `foo=${cidString};`;
+      storageMock
+        .expects('setNonBoolean')
+        .withExactArgs('amp-cid:foo', cidString)
+        .once();
+
+      const fooCid = await cid.get(
+        {
+          scope: 'foo',
+          createCookieIfNotPresent: true,
+        },
+        hasConsent
+      );
+      expect(fooCid).to.equal(cidString);
+    });
+
+    it('should use CID backup', async () => {
+      const cidString = 'amp-abc123';
+      storageMock.expects('setNonBoolean').once();
+      setCookie(win, 'foo', '', 0);
+      env.sandbox.stub(cookie, 'setCookie').callsFake((win, name, value) => {
+        win.document.cookie = `${name}=${value}`;
+      });
+      storageValue['amp-cid:foo'] = cidString;
+
+      const fooCid = await cid.get(
+        {
+          scope: 'foo',
+          createCookieIfNotPresent: true,
+        },
+        hasConsent
+      );
+
+      expect(fooCid).to.equal(cidString);
+      expect(getCookie(win, 'foo')).to.equal(cidString);
+    });
+
+    it('should not use or store CID backup if opt-out', async () => {
+      const cidString = 'amp-abc123';
+      setCookie(win, 'foo', '', 0);
+      env.sandbox.stub(cookie, 'setCookie').callsFake((win, name, value) => {
+        win.document.cookie = `${name}=${value}`;
+      });
+      storageMock.expects('setNonBoolean').never();
+      // To check amp-cid-optout
+      storageMock.expects('get').once();
+      storageValue['amp-cid:foo'] = cidString;
+
+      const fooCid = await cid.get(
+        {
+          scope: 'foo',
+          createCookieIfNotPresent: true,
+          disableBackup: true,
+        },
+        hasConsent
+      );
+
+      expect(fooCid).to.not.equal(cidString);
+    });
+  });
+
   it('get method should return CID when in Viewer ', () => {
     env.sandbox
       .stub(cid.viewerCidApi_, 'isSupported')
@@ -893,13 +1032,7 @@ describes.realWin('cid', {amp: true}, (env) => {
     stubServiceForDoc(env.sandbox, ampdoc, 'viewer', 'isTrustedViewer').returns(
       Promise.resolve(true)
     );
-    const storageGetStub = stubServiceForDoc(
-      env.sandbox,
-      ampdoc,
-      'storage',
-      'get'
-    );
-    storageGetStub.withArgs('amp-cid-optout').returns(Promise.resolve(false));
+    storage['amp-cid-optout'] = false;
     env.sandbox.stub(url, 'isProxyOrigin').returns(true);
     let scopedCid = undefined;
     let resolved = false;
@@ -915,7 +1048,7 @@ describes.realWin('cid', {amp: true}, (env) => {
     yield macroTask();
   });
 
-  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari on Sauce Labs.
+  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari.
   describe
     .configure()
     .skipSafari()
@@ -991,6 +1124,28 @@ describes.realWin('cid', {amp: true}, (env) => {
             expect(getCookie(win, '_ga')).to.be.null;
           });
       });
+
+      it(
+        'should not store CID in storage if opt-in,' +
+          ' since CID is stored on servers',
+        () => {
+          storageMock.expects('setNonBoolean').never();
+          cid.apiKeyMap_ = {'AMP_ECID_GOOGLE': 'cid-api-key'};
+          const getScopedCidStub = env.sandbox.stub(
+            cid.cidApi_,
+            'getScopedCid'
+          );
+          getScopedCidStub.returns(Promise.resolve('cid-from-api'));
+          return cid.get(
+            {
+              scope: 'AMP_ECID_GOOGLE',
+              cookieName: '_ga',
+              createCookieIfNotPresent: true,
+            },
+            hasConsent
+          );
+        }
+      );
     });
 
   describe('isScopeOptedIn', () => {
diff --git a/test/unit/test-cookies.js b/test/unit/test-cookies.js
index f86e1644e9b62..0f3bc52fc6329 100644
--- a/test/unit/test-cookies.js
+++ b/test/unit/test-cookies.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {BASE_CID_MAX_AGE_MILLIS} from '../../src/service/cid-impl';
 import {
   getCookie,
@@ -30,8 +30,7 @@ describes.fakeWin('test-cookies', {amp: true}, (env) => {
   beforeEach(() => {
     win = env.win;
     doc = win.document;
-    clock = lolex.install({
-      target: window,
+    clock = fakeTimers.withGlobal(window).install({
       now: new Date('2018-01-01T08:00:00Z'),
     });
   });
diff --git a/test/unit/test-crypto.js b/test/unit/test-crypto.js
index a77d7002f74a9..34897d06b96d9 100644
--- a/test/unit/test-crypto.js
+++ b/test/unit/test-crypto.js
@@ -38,7 +38,7 @@ describes.realWin('crypto-impl', {}, (env) => {
   }
 
   function testSuite(description, win, expectedError) {
-    // TODO(amphtml, #25621): Cannot find atob / btoa on Safari on Sauce Labs.
+    // TODO(amphtml, #25621): Cannot find atob / btoa on Safari.
     describe
       .configure()
       .skipSafari()
diff --git a/test/unit/test-custom-element-registry.js b/test/unit/test-custom-element-registry.js
index ac7eed37e0390..5c97cbadfd831 100644
--- a/test/unit/test-custom-element-registry.js
+++ b/test/unit/test-custom-element-registry.js
@@ -17,6 +17,7 @@
 import {AmpDocSingle} from '../../src/service/ampdoc-impl';
 import {BaseElement} from '../../src/base-element';
 import {ElementStub} from '../../src/element-stub';
+import {Services} from '../../src/services';
 import {
   copyElementToChildWindow,
   getElementClassForTesting,
@@ -27,10 +28,17 @@ import {
   upgradeOrRegisterElement,
 } from '../../src/service/custom-element-registry';
 import {createElementWithAttributes} from '../../src/dom';
+import {getImplSyncForTesting} from '../../src/custom-element';
 
 describes.realWin('CustomElement register', {amp: true}, (env) => {
   class ConcreteElement extends BaseElement {}
 
+  class ConcreteElementWithShadow extends BaseElement {
+    static requiresShadowDom() {
+      return true;
+    }
+  }
+
   let win, doc, ampdoc, extensions;
 
   beforeEach(() => {
@@ -38,7 +46,7 @@ describes.realWin('CustomElement register', {amp: true}, (env) => {
     doc = win.document;
     ampdoc = env.ampdoc;
     extensions = env.extensions;
-    ampdoc.declareExtension('amp-element1');
+    ampdoc.declareExtension('amp-element1', '0.2');
   });
 
   function insertElement(name) {
@@ -53,6 +61,47 @@ describes.realWin('CustomElement register', {amp: true}, (env) => {
     doc.body.appendChild(testElement);
   }
 
+  it('should register a new class immediately if no need to wait', () => {
+    upgradeOrRegisterElement(win, 'amp-element1', ConcreteElement);
+    expect(getElementClassForTesting(win, 'amp-element1')).to.equal(
+      ConcreteElement
+    );
+  });
+
+  it('should register a new class immediately for requiresShadowDom if no polyfilling needed', () => {
+    if (!win.Element.prototype.attachShadow) {
+      win.Element.prototype.attachShadow = () => {};
+    }
+    upgradeOrRegisterElement(win, 'amp-element1', ConcreteElementWithShadow);
+    expect(getElementClassForTesting(win, 'amp-element1')).to.equal(
+      ConcreteElementWithShadow
+    );
+  });
+
+  it('should wait for the shadow DOM polyfill before registering a class', async () => {
+    if (win.Element.prototype.attachShadow) {
+      delete win.Element.prototype.attachShadow;
+    }
+    const extensions = Services.extensionsFor(win);
+    const extensionsMock = env.sandbox.mock(extensions);
+    const polyfillPromise = Promise.resolve();
+    extensionsMock
+      .expects('importUnwrapped')
+      .withExactArgs(win, 'amp-shadow-dom-polyfill')
+      .returns(polyfillPromise)
+      .once();
+
+    upgradeOrRegisterElement(win, 'amp-element1', ConcreteElementWithShadow);
+    expect(getElementClassForTesting(win, 'amp-element1')).to.not.exist;
+
+    // Resolve polyfill.
+    await polyfillPromise;
+    expect(getElementClassForTesting(win, 'amp-element1')).to.equal(
+      ConcreteElementWithShadow
+    );
+    extensionsMock.verify();
+  });
+
   it('should go through stub/upgrade cycle', () => {
     registerElement(win, 'amp-element1', ElementStub);
     expect(getElementClassForTesting(win, 'amp-element1')).to.equal(
@@ -63,19 +112,46 @@ describes.realWin('CustomElement register', {amp: true}, (env) => {
     const element1 = doc.createElement('amp-element1');
     element1.setAttribute('layout', 'nodisplay');
     doc.body.appendChild(element1);
-    expect(element1.implementation_).to.be.instanceOf(ElementStub);
+    expect(getImplSyncForTesting(element1)).to.be.null;
 
     // Post-download, elements are upgraded.
     upgradeOrRegisterElement(win, 'amp-element1', ConcreteElement);
     expect(getElementClassForTesting(win, 'amp-element1')).to.equal(
       ConcreteElement
     );
-    expect(element1.implementation_).to.be.instanceOf(ConcreteElement);
+    expect(getImplSyncForTesting(element1)).to.be.instanceOf(ConcreteElement);
 
     // Elements created post-download and immediately upgraded.
     const element2 = doc.createElement('amp-element1');
-    doc.body.appendChild(element1);
-    expect(element2.implementation_).to.be.instanceOf(ConcreteElement);
+    element2.setAttribute('layout', 'nodisplay');
+    doc.body.appendChild(element2);
+    expect(getImplSyncForTesting(element2)).to.be.instanceOf(ConcreteElement);
+  });
+
+  it('should only set extensionsKnown when body is available', () => {
+    const head = document.createElement('fake-head');
+    const script = document.createElement('script');
+    script.setAttribute('custom-element', 'amp-element2');
+    Object.defineProperty(script, 'src', {
+      value: 'https://cdn.ampproject.org/v0/amp-element2-0.2.js',
+    });
+    head.appendChild(script);
+    env.sandbox.stub(ampdoc, 'getHeadNode').returns(head);
+    env.sandbox.stub(ampdoc, 'setExtensionsKnown');
+    const isBodyAvailableStub = env.sandbox.stub(ampdoc, 'isBodyAvailable');
+
+    // Body is not available.
+    isBodyAvailableStub.returns(false);
+    stubElementsForDoc(ampdoc);
+    expect(ampdoc.declaresExtension('amp-element2')).to.be.true;
+    expect(ampdoc.declaresExtension('amp-element2', '0.2')).to.be.true;
+    expect(ampdoc.setExtensionsKnown).to.not.be.called;
+
+    // Body is not available.
+    isBodyAvailableStub.returns(true);
+    stubElementsForDoc(ampdoc);
+    expect(ampdoc.declaresExtension('amp-element2')).to.be.true;
+    expect(ampdoc.setExtensionsKnown).to.be.calledOnce;
   });
 
   it('should mark stubbed element as declared', () => {
@@ -84,11 +160,15 @@ describes.realWin('CustomElement register', {amp: true}, (env) => {
     const head = document.createElement('fake-head');
     const script = document.createElement('script');
     script.setAttribute('custom-element', 'amp-element2');
+    Object.defineProperty(script, 'src', {
+      value: 'https://cdn.ampproject.org/v0/amp-element2-0.2.js',
+    });
     head.appendChild(script);
     env.sandbox.stub(ampdoc, 'getHeadNode').callsFake(() => head);
 
     stubElementsForDoc(ampdoc);
     expect(ampdoc.declaresExtension('amp-element2')).to.be.true;
+    expect(ampdoc.declaresExtension('amp-element2', '0.2')).to.be.true;
     expect(win.__AMP_EXTENDED_ELEMENTS['amp-element2']).to.equal(ElementStub);
   });
 
@@ -103,11 +183,11 @@ describes.realWin('CustomElement register', {amp: true}, (env) => {
     const element = doc.createElement('amp-element2');
     doc.body.appendChild(element);
     expect(stub).to.be.calledOnce;
-    expect(stub).to.be.calledWithExactly(ampdoc, 'amp-element2');
+    expect(stub).to.be.calledWithExactly(ampdoc, 'amp-element2', '0.1');
   });
 
   it('should not install declared pre-stubbed element extension', () => {
-    ampdoc.declareExtension('amp-element2');
+    ampdoc.declareExtension('amp-element2', '0.2');
     const stub = env.sandbox.stub(extensions, 'installExtensionForDoc');
 
     stubElementIfNotKnown(win, 'amp-element2');
@@ -188,11 +268,15 @@ describes.realWin('CustomElement register', {amp: true}, (env) => {
       };
 
       elem1 = {
-        getAttribute: (name) => {
+        getAttribute(name) {
           if (name == 'custom-element') {
             return 'amp-test1';
           }
         },
+        hasAttribute(name) {
+          return name == 'custom-element' || name == 'src';
+        },
+        src: 'https://cdn.ampproject.org/v0/amp-test1-0.2.js',
         ownerDocument: doc,
       };
       elements.push(elem1);
@@ -226,6 +310,10 @@ describes.realWin('CustomElement register', {amp: true}, (env) => {
       expect(win.__AMP_EXTENDED_ELEMENTS['amp-test2']).to.be.undefined;
       expect(win.customElements.define).to.be.calledOnce;
       expect(win.customElements.define.firstCall.args[0]).to.equal('amp-test1');
+
+      expect(ampdoc.declaresExtension('amp-test1')).to.be.true;
+      expect(ampdoc.declaresExtension('amp-test1', '0.2')).to.be.true;
+      expect(ampdoc.declaresExtension('amp-test2')).to.be.false;
     });
 
     it('should repeat stubbing when body is not available', () => {
@@ -238,14 +326,21 @@ describes.realWin('CustomElement register', {amp: true}, (env) => {
       expect(win.__AMP_EXTENDED_ELEMENTS['amp-test2']).to.be.undefined;
       expect(win.customElements.define).to.be.calledOnce;
       expect(win.customElements.define.firstCall.args[0]).to.equal('amp-test1');
+      expect(ampdoc.declaresExtension('amp-test1')).to.be.true;
+      expect(ampdoc.declaresExtension('amp-test1', '0.2')).to.be.true;
+      expect(ampdoc.declaresExtension('amp-test2')).to.be.false;
 
       // Add more elements
       const elem2 = {
-        getAttribute: (name) => {
+        getAttribute(name) {
           if (name == 'custom-element') {
             return 'amp-test2';
           }
         },
+        hasAttribute(name) {
+          return name == 'custom-element' || name == 'src';
+        },
+        src: 'https://cdn.ampproject.org/v0/amp-test2-0.3.js',
         ownerDocument: doc,
       };
       elements.push(elem2);
@@ -259,6 +354,8 @@ describes.realWin('CustomElement register', {amp: true}, (env) => {
       expect(win.customElements.define.getCall(1).args[0]).to.equal(
         'amp-test2'
       );
+      expect(ampdoc.declaresExtension('amp-test2')).to.be.true;
+      expect(ampdoc.declaresExtension('amp-test2', '0.3')).to.be.true;
     });
 
     it('should stub element when not stubbed yet', () => {
diff --git a/test/unit/test-custom-element-v1.js b/test/unit/test-custom-element-v1.js
new file mode 100644
index 0000000000000..0ab8f9a399599
--- /dev/null
+++ b/test/unit/test-custom-element-v1.js
@@ -0,0 +1,1126 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {BaseElement} from '../../src/base-element';
+import {CommonSignals} from '../../src/core/constants/common-signals';
+import {ElementStub} from '../../src/element-stub';
+import {LayoutPriority} from '../../src/layout';
+import {Services} from '../../src/services';
+import {chunkInstanceForTesting} from '../../src/chunk';
+import {
+  createAmpElementForTesting,
+  getActionQueueForTesting,
+  getImplClassSyncForTesting,
+  getImplSyncForTesting,
+} from '../../src/custom-element';
+import {getSchedulerForDoc} from '../../src/service/scheduler';
+
+describes.realWin('CustomElement V1', {amp: true}, (env) => {
+  let win, doc, ampdoc;
+  let resources, resourcesMock;
+  let builder, builderMock;
+  let ElementClass, StubElementClass;
+  let chunks;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    ampdoc = env.ampdoc;
+    chunks = chunkInstanceForTesting(ampdoc);
+
+    ElementClass = createAmpElementForTesting(win, TestElement);
+    StubElementClass = createAmpElementForTesting(win, ElementStub);
+    win.customElements.define('amp-test', ElementClass);
+    win.customElements.define('amp-stub', StubElementClass);
+    win.__AMP_EXTENDED_ELEMENTS['amp-test'] = TestElement;
+    win.__AMP_EXTENDED_ELEMENTS['amp-stub'] = ElementStub;
+    ampdoc.declareExtension('amp-stub', '0.1');
+    ElementClass.prototype.inspect = function () {
+      return this.tagName;
+    };
+    StubElementClass.prototype.inspect = function () {
+      return this.tagName;
+    };
+
+    resources = Services.resourcesForDoc(ampdoc);
+    resourcesMock = env.sandbox.mock(resources);
+    resourcesMock.expects('upgraded').never();
+
+    builder = getSchedulerForDoc(ampdoc);
+    builderMock = env.sandbox.mock(builder);
+  });
+
+  afterEach(() => {
+    resourcesMock.verify();
+    builderMock.verify();
+  });
+
+  class TestElement extends BaseElement {
+    static R1() {
+      return true;
+    }
+
+    constructor(element, source) {
+      super(element);
+      this.source = source;
+    }
+
+    isLayoutSupported() {
+      return true;
+    }
+  }
+
+  describe('upgrade', () => {
+    it('should not create impl immediately when attached', () => {
+      const element = new ElementClass();
+
+      builderMock.expects('schedule').withExactArgs(element).once();
+
+      expect(element.isUpgraded()).to.be.false;
+      expect(getImplClassSyncForTesting(element)).to.equal(TestElement);
+      expect(getImplSyncForTesting(element)).to.be.null;
+      expect(element.getBuildPriority()).equal(LayoutPriority.CONTENT);
+
+      doc.body.appendChild(element);
+
+      expect(getImplClassSyncForTesting(element)).to.equal(TestElement);
+      expect(getImplSyncForTesting(element)).to.be.null;
+      expect(element.isUpgraded()).to.be.false;
+      expect(element.readyState).to.equal('building');
+      expect(element.isBuilt()).to.be.false;
+      expect(element.getBuildPriority()).equal(LayoutPriority.CONTENT);
+    });
+
+    it('should not upgrade immediately when attached', () => {
+      const element = new StubElementClass();
+
+      builderMock.expects('schedule').withExactArgs(element).once();
+
+      expect(element.isUpgraded()).to.be.false;
+      expect(getImplClassSyncForTesting(element)).to.be.null;
+      expect(getImplSyncForTesting(element)).to.be.null;
+      expect(element.getBuildPriority()).equal(LayoutPriority.BACKGROUND);
+
+      doc.body.appendChild(element);
+      element.upgrade(TestElement);
+
+      expect(getImplClassSyncForTesting(element)).to.equal(TestElement);
+      expect(getImplSyncForTesting(element)).to.be.null;
+      expect(element.isUpgraded()).to.be.false;
+      expect(element.readyState).to.equal('building');
+      expect(element.isBuilt()).to.be.false;
+      expect(element.getBuildPriority()).equal(LayoutPriority.CONTENT);
+    });
+
+    it('should reschedule build when re-attached', () => {
+      const element = new ElementClass();
+
+      builderMock.expects('schedule').withExactArgs(element).twice();
+      builderMock.expects('unschedule').withExactArgs(element).once();
+
+      doc.body.appendChild(element);
+      expect(element.readyState).to.equal('building');
+
+      doc.body.removeChild(element);
+      expect(element.readyState).to.equal('building');
+
+      doc.body.appendChild(element);
+      expect(element.readyState).to.equal('building');
+    });
+
+    it('should reschedule build when re-attached after build', async () => {
+      const element = new ElementClass();
+
+      builderMock.expects('schedule').withExactArgs(element).twice();
+      builderMock.expects('unschedule').withExactArgs(element).once();
+
+      doc.body.appendChild(element);
+      expect(element.readyState).to.equal('building');
+
+      const promise = element.buildInternal();
+      expect(element.readyState).to.equal('building');
+
+      await promise;
+      expect(element.readyState).to.equal('mounting');
+
+      doc.body.removeChild(element);
+      expect(element.readyState).to.equal('mounting');
+
+      doc.body.appendChild(element);
+      expect(element.readyState).to.equal('mounting');
+    });
+
+    it('should reschedule build when re-attached after build with usesLoading', async () => {
+      env.sandbox.stub(TestElement, 'usesLoading').returns(true);
+      const element = new ElementClass();
+
+      builderMock.expects('schedule').withExactArgs(element).twice();
+      builderMock.expects('unschedule').withExactArgs(element).once();
+
+      doc.body.appendChild(element);
+      expect(element.readyState).to.equal('building');
+
+      const promise = element.buildInternal();
+      expect(element.readyState).to.equal('building');
+
+      await promise;
+      expect(element.readyState).to.equal('mounting');
+
+      doc.body.removeChild(element);
+      expect(element.readyState).to.equal('mounting');
+
+      doc.body.appendChild(element);
+      expect(element.readyState).to.equal('loading');
+    });
+  });
+
+  describe('preconnect', () => {
+    let preconnectMock;
+    let chunkStub;
+
+    beforeEach(() => {
+      chunkStub = env.sandbox.stub(chunks, 'runForStartup');
+      builderMock.expects('schedule').once();
+
+      const preconnect = Services.preconnectFor(win);
+      preconnectMock = env.sandbox.mock(preconnect);
+    });
+
+    afterEach(() => {
+      preconnectMock.verify();
+    });
+
+    it('should preconnect on upgrade', () => {
+      env.sandbox.stub(TestElement, 'getPreconnects').returns(['url1', 'url2']);
+      preconnectMock.expects('url').withExactArgs(ampdoc, 'url1', false).once();
+      preconnectMock.expects('url').withExactArgs(ampdoc, 'url2', false).once();
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+      expect(chunkStub).to.be.calledOnce;
+      chunkStub.firstCall.firstArg();
+    });
+
+    it('should NOT preconnect on upgrade if not urls', () => {
+      preconnectMock.expects('url').never();
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+      expect(chunkStub).to.not.be.called;
+    });
+  });
+
+  describe('buildInternal', () => {
+    let buildCallbackStub;
+    let mountCallbackStub;
+
+    beforeEach(() => {
+      buildCallbackStub = env.sandbox.stub(
+        TestElement.prototype,
+        'buildCallback'
+      );
+      mountCallbackStub = env.sandbox.stub(
+        TestElement.prototype,
+        'mountCallback'
+      );
+      builderMock.expects('schedule').atLeast(0);
+    });
+
+    it('should NOT allow build on unupgraded element', async () => {
+      expectAsyncConsoleError(/unupgraded/);
+      const element = new StubElementClass();
+      doc.body.appendChild(element);
+
+      expect(() => element.buildInternal()).to.throw(/unupgraded/);
+      expect(element.isBuilding()).to.be.false;
+      expect(getImplSyncForTesting(element)).to.be.null;
+      expect(buildCallbackStub).to.not.be.called;
+      expect(element.isUpgraded()).to.be.false;
+      expect(element.isBuilt()).to.be.false;
+      expect(element.readyState).to.equal('upgrading');
+    });
+
+    it('should build a pre-upgraded element', async () => {
+      const attachedCallbackStub = env.sandbox.stub(
+        TestElement.prototype,
+        'attachedCallback'
+      );
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      const promise = element.buildInternal();
+      expect(element.isBuilding()).to.be.true;
+      expect(getImplSyncForTesting(element)).to.be.null;
+      expect(element.isUpgraded()).to.be.false;
+      expect(element.isBuilt()).to.be.false;
+      expect(element.readyState).to.equal('building');
+      expect(element).to.have.class('i-amphtml-notbuilt');
+      expect(element).to.have.class('amp-notbuilt');
+      expect(element).to.not.have.class('i-amphtml-built');
+      expect(element.signals().get(CommonSignals.BUILT)).to.be.null;
+      expect(attachedCallbackStub).to.not.be.called;
+
+      await promise;
+      expect(getImplSyncForTesting(element)).to.be.instanceOf(TestElement);
+      expect(buildCallbackStub).to.be.calledOnce;
+      expect(element.isUpgraded()).to.be.true;
+      expect(element.isBuilt()).to.be.true;
+      expect(element.readyState).to.equal('mounting');
+      expect(element).to.not.have.class('i-amphtml-notbuilt');
+      expect(element).to.not.have.class('amp-notbuilt');
+      expect(element).to.have.class('i-amphtml-built');
+      expect(element.signals().get(CommonSignals.BUILT)).to.exist;
+      expect(attachedCallbackStub).to.be.calledOnce;
+    });
+
+    it('should mount a pre-upgraded element', async () => {
+      const attachedCallbackStub = env.sandbox.stub(
+        TestElement.prototype,
+        'attachedCallback'
+      );
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      const promise = element.mountInternal();
+      expect(element.isBuilding()).to.be.true;
+      expect(getImplSyncForTesting(element)).to.be.null;
+      expect(element.isUpgraded()).to.be.false;
+      expect(element.isBuilt()).to.be.false;
+      expect(element.readyState).to.equal('building');
+      expect(element).to.have.class('i-amphtml-notbuilt');
+      expect(element).to.have.class('amp-notbuilt');
+      expect(element).to.not.have.class('i-amphtml-built');
+      expect(element.signals().get(CommonSignals.BUILT)).to.be.null;
+      expect(attachedCallbackStub).to.not.be.called;
+
+      await promise;
+      expect(getImplSyncForTesting(element)).to.be.instanceOf(TestElement);
+      expect(buildCallbackStub).to.be.calledOnce;
+      expect(element.isUpgraded()).to.be.true;
+      expect(element.isBuilt()).to.be.true;
+      expect(element.readyState).to.equal('complete');
+      expect(element).to.not.have.class('i-amphtml-notbuilt');
+      expect(element).to.not.have.class('amp-notbuilt');
+      expect(element).to.have.class('i-amphtml-built');
+      expect(element.signals().get(CommonSignals.BUILT)).to.exist;
+      expect(attachedCallbackStub).to.be.calledOnce;
+    });
+
+    it('should build an element after upgrade', async () => {
+      const attachedCallbackStub = env.sandbox.stub(
+        TestElement.prototype,
+        'attachedCallback'
+      );
+
+      const element = new StubElementClass();
+      doc.body.appendChild(element);
+      element.upgrade(TestElement);
+
+      const promise = element.buildInternal();
+      expect(element.isBuilding()).to.be.true;
+      expect(getImplSyncForTesting(element)).to.be.null;
+      expect(element.isUpgraded()).to.be.false;
+      expect(element.isBuilt()).to.be.false;
+      expect(element.readyState).to.equal('building');
+      expect(attachedCallbackStub).to.not.be.called;
+
+      await promise;
+      expect(getImplSyncForTesting(element)).to.be.instanceOf(TestElement);
+      expect(buildCallbackStub).to.be.calledOnce;
+      expect(element.isUpgraded()).to.be.true;
+      expect(element.isBuilt()).to.be.true;
+      expect(element.readyState).to.equal('mounting');
+      expect(element).to.not.have.class('i-amphtml-notbuilt');
+      expect(element).to.not.have.class('amp-notbuilt');
+      expect(element).to.have.class('i-amphtml-built');
+      expect(element.signals().get(CommonSignals.BUILT)).to.exist;
+      expect(attachedCallbackStub).to.be.calledOnce;
+    });
+
+    it('should mount an element after upgrade', async () => {
+      const attachedCallbackStub = env.sandbox.stub(
+        TestElement.prototype,
+        'attachedCallback'
+      );
+
+      const element = new StubElementClass();
+      doc.body.appendChild(element);
+      element.upgrade(TestElement);
+
+      const promise = element.mountInternal();
+      expect(element.isBuilding()).to.be.true;
+      expect(getImplSyncForTesting(element)).to.be.null;
+      expect(element.isUpgraded()).to.be.false;
+      expect(element.isBuilt()).to.be.false;
+      expect(element.readyState).to.equal('building');
+      expect(attachedCallbackStub).to.not.be.called;
+
+      await promise;
+      expect(getImplSyncForTesting(element)).to.be.instanceOf(TestElement);
+      expect(buildCallbackStub).to.be.calledOnce;
+      expect(element.isUpgraded()).to.be.true;
+      expect(element.isBuilt()).to.be.true;
+      expect(element.readyState).to.equal('complete');
+      expect(element).to.not.have.class('i-amphtml-notbuilt');
+      expect(element).to.not.have.class('amp-notbuilt');
+      expect(element).to.have.class('i-amphtml-built');
+      expect(element.signals().get(CommonSignals.BUILT)).to.exist;
+      expect(attachedCallbackStub).to.be.calledOnce;
+    });
+
+    it('should continue in loading state for usesLoading', async () => {
+      env.sandbox.stub(TestElement, 'usesLoading').returns(true);
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      await element.mountInternal();
+      expect(buildCallbackStub).to.be.calledOnce;
+      expect(element.readyState).to.equal('loading');
+    });
+
+    it('should continue in a state if modified by buildCallback', async () => {
+      buildCallbackStub.callsFake(function () {
+        this.setReadyState('loading');
+      });
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      await element.buildInternal();
+      expect(buildCallbackStub).to.be.calledOnce;
+      expect(element.readyState).to.equal('loading');
+    });
+
+    it('should continue in a state if modified by buildCallback with usesLoading', async () => {
+      env.sandbox.stub(TestElement, 'usesLoading').returns(true);
+      buildCallbackStub.callsFake(function () {
+        this.setReadyState('complete');
+      });
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      await element.buildInternal();
+      expect(buildCallbackStub).to.be.calledOnce;
+      expect(element.readyState).to.equal('complete');
+    });
+
+    it('should continue in a state if modified by mountCallback with usesLoading', async () => {
+      env.sandbox.stub(TestElement, 'usesLoading').returns(true);
+      mountCallbackStub.callsFake(function () {
+        this.setReadyState('complete');
+      });
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      await element.mountInternal();
+      expect(buildCallbackStub).to.be.calledOnce;
+      expect(element.readyState).to.equal('complete');
+    });
+
+    it('should set the failing state if buildCallback fails', async () => {
+      expectAsyncConsoleError(/intentional/);
+      buildCallbackStub.throws(new Error('intentional'));
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      try {
+        await element.buildInternal();
+        throw new Error('must have failed');
+      } catch (e) {
+        expect(e.toString()).to.match(/intentional/);
+      }
+      expect(element.readyState).to.equal('error');
+      expect(element.signals().get(CommonSignals.BUILT)).to.exist;
+      expect(element.signals().get(CommonSignals.BUILT).toString()).to.match(
+        /intentional/
+      );
+    });
+
+    it('should set the failing state if buildCallback rejects', async () => {
+      expectAsyncConsoleError(/intentional/);
+      buildCallbackStub.rejects(new Error('intentional'));
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      try {
+        await element.buildInternal();
+        throw new Error('must have failed');
+      } catch (e) {
+        expect(e.toString()).to.match(/intentional/);
+      }
+      expect(element.readyState).to.equal('error');
+    });
+
+    it('should set the failing state if mountCallback fails', async () => {
+      expectAsyncConsoleError(/intentional/);
+      mountCallbackStub.throws(new Error('intentional'));
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      try {
+        await element.mountInternal();
+        throw new Error('must have failed');
+      } catch (e) {
+        expect(e.toString()).to.match(/intentional/);
+      }
+      expect(element.readyState).to.equal('error');
+      expect(element.signals().get(CommonSignals.MOUNTED)).to.exist;
+      expect(element.signals().get(CommonSignals.MOUNTED).toString()).to.match(
+        /intentional/
+      );
+    });
+
+    it('should only execute build once', async () => {
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      const promise = element.buildInternal();
+      const promise2 = element.buildInternal();
+      expect(promise2).to.equal(promise);
+
+      await promise;
+      await promise2;
+      const promise3 = element.buildInternal();
+      expect(promise3).to.equal(promise);
+      expect(buildCallbackStub).to.be.calledOnce;
+    });
+
+    it('should continue build with a pre-created implementation', async () => {
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      await element.getImpl(false);
+
+      await element.buildInternal();
+      expect(buildCallbackStub).to.be.calledOnce;
+      expect(element.readyState).to.equal('mounting');
+    });
+
+    describe('consent', () => {
+      it('should build on consent sufficient', async () => {
+        const element = new ElementClass();
+        env.sandbox
+          .stub(Services, 'consentPolicyServiceForDocOrNull')
+          .callsFake(() => {
+            return Promise.resolve({
+              whenPolicyUnblock: () => {
+                return Promise.resolve(true);
+              },
+            });
+          });
+        env.sandbox.stub(element, 'getConsentPolicy_').callsFake(() => {
+          return 'default';
+        });
+        doc.body.appendChild(element);
+
+        await element.buildInternal();
+        expect(buildCallbackStub).to.be.calledOnce;
+        expect(element.readyState).to.equal('mounting');
+      });
+
+      it('should not build on consent insufficient', async () => {
+        const element = new ElementClass();
+        env.sandbox
+          .stub(Services, 'consentPolicyServiceForDocOrNull')
+          .callsFake(() => {
+            return Promise.resolve({
+              whenPolicyUnblock: () => {
+                return Promise.resolve(false);
+              },
+            });
+          });
+        env.sandbox.stub(element, 'getConsentPolicy_').callsFake(() => {
+          return 'default';
+        });
+        doc.body.appendChild(element);
+
+        try {
+          await element.buildInternal();
+          throw new Error('must have failed');
+        } catch (e) {
+          expect(e.toString()).to.match(/BLOCK_BY_CONSENT/);
+        }
+      });
+
+      it('should respect user specified consent policy', async () => {
+        const element = new ElementClass();
+        doc.body.appendChild(element);
+        await element.getImpl(false);
+
+        expect(element.getConsentPolicy_()).to.equal(null);
+        element.setAttribute('data-block-on-consent', '');
+        expect(element.getConsentPolicy_()).to.equal('default');
+        element.setAttribute('data-block-on-consent', '_none');
+        expect(element.getConsentPolicy_()).to.equal('_none');
+      });
+
+      it('should repsect metaTag specified consent', async () => {
+        const meta = doc.createElement('meta');
+        meta.setAttribute('name', 'amp-consent-blocking');
+        meta.setAttribute('content', 'amp-test');
+        doc.head.appendChild(meta);
+
+        const element = new ElementClass();
+        doc.body.appendChild(element);
+        await element.getImpl(false);
+
+        expect(element.getConsentPolicy_()).to.equal('default');
+        expect(element.getAttribute('data-block-on-consent')).to.equal(
+          'default'
+        );
+      });
+    });
+  });
+
+  describe('build', () => {
+    it('should only execute build once', async () => {
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      builderMock.expects('scheduleAsap').never();
+      builderMock.expects('schedule').never();
+
+      const promise = element.buildInternal();
+      const promise2 = element.build();
+      expect(promise2).to.equal(promise);
+
+      await promise;
+      await promise2;
+      const promise3 = element.build();
+      expect(promise3).to.equal(promise);
+    });
+
+    it('should wait until the element is upgraded', async () => {
+      const element = new StubElementClass();
+
+      builderMock.expects('scheduleAsap').withExactArgs(element).once();
+
+      const promise = element.build();
+
+      doc.body.appendChild(element);
+      element.upgrade(TestElement);
+
+      await element.buildInternal();
+      await promise;
+    });
+  });
+
+  describe('mount/unmount', () => {
+    let mountCallbackStub, unmountCallbackStub;
+
+    beforeEach(() => {
+      mountCallbackStub = env.sandbox.stub(
+        TestElement.prototype,
+        'mountCallback'
+      );
+      unmountCallbackStub = env.sandbox.stub(
+        TestElement.prototype,
+        'unmountCallback'
+      );
+    });
+
+    it('should only execute mount once', async () => {
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      builderMock.expects('scheduleAsap').never();
+      builderMock.expects('schedule').never();
+
+      const promise = element.mountInternal();
+      const promise2 = element.mount();
+      expect(promise2).to.equal(promise);
+
+      await promise;
+      await promise2;
+      const promise3 = element.mount();
+      expect(promise3).to.equal(promise);
+
+      await element.whenMounted();
+    });
+
+    it('should wait until the element is upgraded', async () => {
+      const element = new StubElementClass();
+
+      builderMock.expects('scheduleAsap').withExactArgs(element).once();
+
+      const promise = element.mount();
+
+      doc.body.appendChild(element);
+      element.upgrade(TestElement);
+
+      await element.mountInternal();
+      await promise;
+      expect(mountCallbackStub).to.be.calledOnce;
+
+      await element.whenMounted();
+    });
+
+    it('should consider element loading if mountCallback has no result', async () => {
+      env.sandbox.stub(TestElement, 'usesLoading').returns(true);
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      await element.mountInternal();
+      expect(mountCallbackStub).to.be.calledOnce;
+      expect(element.readyState).to.equal('loading');
+    });
+
+    it('should consider element completed if mountCallback returns promise', async () => {
+      env.sandbox.stub(TestElement, 'usesLoading').returns(true);
+      mountCallbackStub.resolves();
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      await element.mountInternal();
+      expect(mountCallbackStub).to.be.calledOnce;
+      expect(element.readyState).to.equal('complete');
+    });
+
+    it('should mount -> unmount -> mount when connected', async () => {
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      builderMock.expects('scheduleAsap').never();
+
+      const scheduleStub = env.sandbox.stub(builder, 'schedule');
+      const unscheduleStub = env.sandbox.stub(builder, 'unschedule');
+
+      // Mount.
+      await element.mountInternal();
+      expect(mountCallbackStub).to.be.calledOnce;
+      expect(element.signals().get('mounted')).to.exist;
+      expect(element.readyState).to.equal('complete');
+
+      // Unmount.
+      element.unmount();
+      expect(unmountCallbackStub).to.be.calledOnce;
+      expect(unscheduleStub).to.be.calledOnce;
+      expect(scheduleStub).to.be.calledOnce;
+      expect(element.signals().get('mounted')).to.not.exist;
+      expect(element.readyState).to.equal('mounting');
+
+      // Remount.
+      await element.mountInternal();
+      expect(mountCallbackStub).to.be.calledTwice;
+      expect(element.signals().get('mounted')).to.exist;
+      expect(element.readyState).to.equal('complete');
+
+      await element.whenMounted();
+    });
+
+    it('should mount -> unmount -> mount with usesLoading', async () => {
+      env.sandbox.stub(TestElement, 'usesLoading').returns(true);
+      mountCallbackStub.resolves();
+
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      builderMock.expects('scheduleAsap').never();
+
+      const scheduleStub = env.sandbox.stub(builder, 'schedule');
+      const unscheduleStub = env.sandbox.stub(builder, 'unschedule');
+
+      // Mount.
+      await element.mountInternal();
+      expect(mountCallbackStub).to.be.calledOnce;
+      expect(element.signals().get('mounted')).to.exist;
+      expect(element.readyState).to.equal('complete');
+
+      // Unmount.
+      element.unmount();
+      expect(unmountCallbackStub).to.be.calledOnce;
+      expect(unscheduleStub).to.be.calledOnce;
+      expect(scheduleStub).to.be.calledOnce;
+      expect(element.signals().get('mounted')).to.not.exist;
+      expect(element.readyState).to.equal('loading');
+
+      // Remount.
+      await element.mountInternal();
+      expect(mountCallbackStub).to.be.calledTwice;
+      expect(element.signals().get('mounted')).to.exist;
+      expect(element.readyState).to.equal('complete');
+
+      await element.whenMounted();
+    });
+
+    it('should unmount on disconnect', async () => {
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      builderMock.expects('scheduleAsap').never();
+
+      const scheduleStub = env.sandbox.stub(builder, 'schedule');
+      const unscheduleStub = env.sandbox.stub(builder, 'unschedule');
+
+      // Mount.
+      await element.mountInternal();
+      expect(mountCallbackStub).to.be.calledOnce;
+      expect(element.signals().get('mounted')).to.exist;
+
+      // Disconnect
+      element.remove();
+      expect(unmountCallbackStub).to.be.calledOnce;
+      expect(unscheduleStub).to.be.calledOnce;
+
+      // Not rescheduled.
+      expect(scheduleStub).to.not.be.called;
+      expect(element.signals().get('mounted')).to.not.exist;
+    });
+
+    it('should NOT call unmountCallback if was not mounted before', async () => {
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      builderMock.expects('scheduleAsap').never();
+
+      const scheduleStub = env.sandbox.stub(builder, 'schedule');
+      const unscheduleStub = env.sandbox.stub(builder, 'unschedule');
+
+      // Unmount.
+      element.unmount();
+      expect(unmountCallbackStub).to.not.be.called;
+      expect(unscheduleStub).to.be.calledOnce;
+      expect(scheduleStub).to.be.calledOnce;
+      expect(element.signals().get('mounted')).to.not.exist;
+    });
+
+    it('should cancel mount', async () => {
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      builderMock.expects('scheduleAsap').never();
+
+      const scheduleStub = env.sandbox.stub(builder, 'schedule');
+      const unscheduleStub = env.sandbox.stub(builder, 'unschedule');
+
+      // Mount and unmount in the same task.
+      const promise = element.mountInternal();
+      element.unmount();
+      expect(unscheduleStub).to.be.calledOnce;
+      expect(scheduleStub).to.be.calledOnce;
+
+      await new Promise(setTimeout);
+      expect(mountCallbackStub).to.not.be.called;
+
+      try {
+        await promise;
+      } catch (e) {
+        expect(() => {
+          throw e;
+        }).to.throw(/CANCELLED/);
+      }
+
+      // Mount again.
+      await element.mountInternal();
+      expect(mountCallbackStub).to.be.calledOnce;
+    });
+
+    it('should pause on unmount when connected', async () => {
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      const pauseStub = env.sandbox.stub(element, 'pause');
+      element.unmount();
+      expect(pauseStub).to.be.calledOnce;
+    });
+
+    it('should NOT pause on disconnect', async () => {
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      const pauseStub = env.sandbox.stub(element, 'pause');
+      element.remove();
+      expect(pauseStub).to.not.be.called;
+    });
+  });
+
+  describe('pause', () => {
+    let pauseCallbackStub;
+
+    beforeEach(() => {
+      pauseCallbackStub = env.sandbox.stub(
+        TestElement.prototype,
+        'pauseCallback'
+      );
+    });
+
+    it('should NOT pause an unbuilt element', () => {
+      const element = new StubElementClass();
+      doc.body.appendChild(element);
+
+      element.pause();
+      expect(pauseCallbackStub).to.not.be.called;
+    });
+
+    it('should pause a built element', async () => {
+      const element = new ElementClass();
+      doc.body.appendChild(element);
+
+      await element.buildInternal();
+      element.pause();
+      expect(pauseCallbackStub).to.be.calledOnce;
+    });
+  });
+
+  describe('ensureLoaded', () => {
+    let element;
+    let usesLoadingStub;
+    let ensureLoadedStub;
+
+    beforeEach(() => {
+      element = new StubElementClass();
+      usesLoadingStub = env.sandbox.stub(TestElement, 'usesLoading');
+      usesLoadingStub.returns(true);
+      ensureLoadedStub = env.sandbox.stub(
+        TestElement.prototype,
+        'ensureLoaded'
+      );
+      builderMock.expects('schedule').atLeast(0);
+      builderMock.expects('scheduleAsap').atLeast(1);
+    });
+
+    it('should force build and wait for whenLoaded even if not marked as loading', async () => {
+      usesLoadingStub.returns(false);
+      const promise = element.ensureLoaded();
+
+      doc.body.appendChild(element);
+      element.upgrade(TestElement);
+
+      await element.mountInternal();
+      await promise;
+      expect(ensureLoadedStub).to.not.be.called;
+
+      await element.whenLoaded();
+    });
+
+    it('should force build and ensureLoaded if loading', async () => {
+      ensureLoadedStub.callsFake(function () {
+        this.setReadyState('complete');
+      });
+
+      const promise = element.ensureLoaded();
+
+      doc.body.appendChild(element);
+      element.upgrade(TestElement);
+
+      await element.mountInternal();
+      await promise;
+      expect(ensureLoadedStub).to.be.calledOnce;
+
+      await element.whenLoaded();
+    });
+  });
+
+  describe('setAsContainerInternal', () => {
+    let element, scroller, impl;
+
+    beforeEach(async () => {
+      builderMock.expects('schedule').atLeast(0);
+
+      element = new ElementClass();
+      doc.body.appendChild(element);
+      impl = await element.getImpl();
+
+      scroller = doc.createElement('div');
+      element.appendChild(scroller);
+    });
+
+    it('should propagate setAsContainerInternal without scroller', () => {
+      builderMock
+        .expects('setContainer')
+        .withExactArgs(element, undefined)
+        .once();
+      impl.setAsContainer();
+    });
+
+    it('should propagate setAsContainerInternal with scroller', () => {
+      builderMock
+        .expects('setContainer')
+        .withExactArgs(element, scroller)
+        .once();
+      impl.setAsContainer(scroller);
+    });
+
+    it('should propagate removeAsContainerInternal', () => {
+      builderMock.expects('removeContainer').withExactArgs(element).once();
+      impl.removeAsContainer();
+    });
+  });
+
+  describe('setReadyStateInternal', () => {
+    let element;
+
+    beforeEach(async () => {
+      builderMock.expects('schedule').atLeast(0);
+
+      element = new ElementClass();
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      element.reset_();
+      element.setReadyStateInternal('other');
+
+      env.sandbox.stub(element, 'toggleLoading');
+    });
+
+    it('should update loading state', () => {
+      expect(element.readyState).equal('other');
+      expect(element.toggleLoading).to.not.be.called;
+      expect(element.signals().get(CommonSignals.LOAD_START)).to.be.null;
+      element.signals().signal(CommonSignals.UNLOAD);
+      element.classList.remove('i-amphtml-layout');
+
+      element.setReadyStateInternal('loading');
+      expect(element.readyState).equal('loading');
+      expect(element.toggleLoading).to.be.calledOnce.calledWith(true);
+      expect(element.signals().get(CommonSignals.LOAD_START)).to.exist;
+      expect(element.signals().get(CommonSignals.UNLOAD)).to.be.null;
+      expect(element.signals().get(CommonSignals.LOAD_END)).to.be.null;
+      expect(element).to.have.class('i-amphtml-layout');
+    });
+
+    it('should update complete state', () => {
+      const loadEventSpy = env.sandbox.spy();
+      element.addEventListener('load', loadEventSpy);
+
+      expect(element.readyState).equal('other');
+      expect(element.toggleLoading).to.not.be.called;
+      expect(element.signals().get(CommonSignals.LOAD_END)).to.be.null;
+      element.classList.remove('i-amphtml-layout');
+
+      element.setReadyStateInternal('complete');
+      expect(element.readyState).equal('complete');
+      expect(element.toggleLoading).to.be.calledOnce.calledWith(false);
+      expect(element.signals().get(CommonSignals.LOAD_END)).to.exist;
+      expect(element.signals().get(CommonSignals.LOAD_START)).to.exist;
+      expect(element.signals().get(CommonSignals.UNLOAD)).to.not.exist;
+      expect(element).to.have.class('i-amphtml-layout');
+      expect(loadEventSpy).to.be.calledOnce;
+      expect(loadEventSpy.firstCall.firstArg.bubbles).to.be.false;
+    });
+
+    it('should update error state', () => {
+      const errorEventSpy = env.sandbox.spy();
+      element.addEventListener('error', errorEventSpy);
+
+      expect(element.readyState).equal('other');
+      expect(element.toggleLoading).to.not.be.called;
+      expect(element.signals().get(CommonSignals.LOAD_END)).to.be.null;
+
+      const error = new Error();
+      element.setReadyStateInternal('error', error);
+      expect(element.readyState).equal('error');
+      expect(element.toggleLoading).to.be.calledOnce.calledWith(false);
+      expect(element.signals().get(CommonSignals.LOAD_END)).to.equal(error);
+      expect(errorEventSpy).to.be.calledOnce;
+      expect(errorEventSpy.firstCall.firstArg.bubbles).to.be.false;
+    });
+
+    it('should not duplicate events', () => {
+      const loadEventSpy = env.sandbox.spy();
+      element.addEventListener('load', loadEventSpy);
+
+      element.setReadyStateInternal('complete');
+      expect(loadEventSpy).to.be.calledOnce;
+
+      // Repeat.
+      element.setReadyStateInternal('complete');
+      expect(loadEventSpy).to.be.calledOnce; // no change.
+    });
+
+    it('should return back to loading after complete', () => {
+      element.setReadyStateInternal('complete');
+      expect(element.readyState).equal('complete');
+      expect(element.signals().get(CommonSignals.LOAD_END)).to.exist;
+
+      element.signals().reset(CommonSignals.LOAD_START);
+      element.setReadyStateInternal('loading');
+      expect(element.readyState).equal('loading');
+      expect(element.signals().get(CommonSignals.LOAD_END)).to.be.null;
+      expect(element.signals().get(CommonSignals.LOAD_START)).to.exist;
+    });
+  });
+
+  describe('executeAction', () => {
+    beforeEach(async () => {
+      builderMock.expects('schedule').atLeast(0);
+    });
+
+    it('should enqueue actions until built and schedule build', () => {
+      const element = new ElementClass();
+      const handler = env.sandbox.stub(TestElement.prototype, 'executeAction');
+
+      builderMock.expects('scheduleAsap').withExactArgs(element).once();
+
+      doc.body.appendChild(element);
+
+      const inv = {};
+      element.enqueAction(inv);
+      const actionQueue = getActionQueueForTesting(element);
+      expect(actionQueue.length).to.equal(1);
+      expect(actionQueue[0]).to.equal(inv);
+      expect(handler).to.not.be.called;
+    });
+
+    it('should execute action immediately after built', async () => {
+      builderMock.expects('scheduleAsap').never();
+      const element = new ElementClass();
+      const handler = env.sandbox.stub(TestElement.prototype, 'executeAction');
+      doc.body.appendChild(element);
+      await element.buildInternal();
+
+      const inv = {};
+      element.enqueAction(inv);
+      expect(handler).to.be.calledOnce.calledWith(inv, false);
+      expect(getActionQueueForTesting(element)).to.not.exist;
+    });
+
+    it('should dequeue all actions after build', async () => {
+      const element = new ElementClass();
+      builderMock.expects('scheduleAsap').withExactArgs(element).atLeast(1);
+
+      const handler = env.sandbox.stub(TestElement.prototype, 'executeAction');
+
+      const inv1 = {};
+      const inv2 = {};
+      element.enqueAction(inv1);
+      element.enqueAction(inv2);
+      const actionQueue = getActionQueueForTesting(element);
+      expect(actionQueue).to.have.length(2);
+      expect(actionQueue[0]).to.equal(inv1);
+      expect(actionQueue[1]).to.equal(inv2);
+      expect(handler).to.not.be.called;
+
+      doc.body.appendChild(element);
+      await element.buildInternal();
+      await new Promise((resolve) => setTimeout(resolve, 10));
+
+      expect(getActionQueueForTesting(element)).to.not.exist;
+      expect(handler)
+        .to.be.calledTwice.calledWith(inv1, true)
+        .calledWith(inv2, true);
+    });
+  });
+});
diff --git a/test/unit/test-custom-element.js b/test/unit/test-custom-element.js
index e7f3cf89047ad..2f011a8e23fea 100644
--- a/test/unit/test-custom-element.js
+++ b/test/unit/test-custom-element.js
@@ -14,16 +14,21 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
-import {AmpEvents} from '../../src/amp-events';
+import * as fakeTimers from '@sinonjs/fake-timers';
+import {AmpEvents} from '../../src/core/constants/amp-events';
 import {BaseElement} from '../../src/base-element';
-import {CommonSignals} from '../../src/common-signals';
+import {CommonSignals} from '../../src/core/constants/common-signals';
 import {ElementStub} from '../../src/element-stub';
 import {LOADING_ELEMENTS_, Layout} from '../../src/layout';
-import {ResourceState} from '../../src/service/resource';
+import {Resource, ResourceState} from '../../src/service/resource';
 import {Services} from '../../src/services';
 import {chunkInstanceForTesting} from '../../src/chunk';
-import {createAmpElementForTesting} from '../../src/custom-element';
+import {
+  createAmpElementForTesting,
+  getImplSyncForTesting,
+} from '../../src/custom-element';
+import {elementConnectedCallback} from '../../src/service/custom-element-registry';
+import {toggleExperiment} from '../../src/experiments';
 
 describes.realWin('CustomElement', {amp: true}, (env) => {
   // TODO(dvoytenko, #11827): Make this test work on Safari.
@@ -37,33 +42,32 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
       let clock;
       let testElementGetInsersectionElementLayoutBox;
       let container;
-      let ElementClass, StubElementClass;
+      let ElementClass, StubElementClass, ElementClassWithReUpgrade;
 
-      let testElementCreatedCallback;
       let testElementPreconnectCallback;
-      let testElementFirstAttachedCallback;
       let testElementBuildCallback;
       let testElementCreatePlaceholderCallback;
       let testElementLayoutCallback;
       let testElementFirstLayoutCompleted;
-      let testElementViewportCallback;
       let testElementUnlayoutCallback;
       let testElementPauseCallback;
       let testElementResumeCallback;
+      let testElementAttachedCallback;
+      let testElementDetachedCallback;
+      let testOnLayoutMeasureCallback;
 
       class TestElement extends BaseElement {
+        constructor(element, source) {
+          super(element);
+          this.source = source;
+        }
+
         isLayoutSupported(unusedLayout) {
           return true;
         }
-        createdCallback() {
-          testElementCreatedCallback();
-        }
         preconnectCallback(onLayout) {
           testElementPreconnectCallback(onLayout);
         }
-        firstAttachedCallback() {
-          testElementFirstAttachedCallback();
-        }
         buildCallback() {
           testElementBuildCallback();
         }
@@ -77,9 +81,6 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         firstLayoutCompleted() {
           testElementFirstLayoutCompleted();
         }
-        viewportCallback(inViewport) {
-          testElementViewportCallback(inViewport);
-        }
         getIntersectionElementLayoutBox() {
           testElementGetInsersectionElementLayoutBox();
           return {top: 10, left: 10, width: 11, height: 1};
@@ -94,6 +95,15 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         resumeCallback() {
           testElementResumeCallback();
         }
+        attachedCallback() {
+          testElementAttachedCallback();
+        }
+        detachedCallback() {
+          testElementDetachedCallback();
+        }
+        onLayoutMeasure() {
+          testOnLayoutMeasureCallback();
+        }
       }
 
       class TestElementWithReUpgrade extends BaseElement {
@@ -101,7 +111,7 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
           return true;
         }
         upgradeCallback() {
-          return new TestElement(this.element);
+          return new TestElement(this.element, 're-upgrade');
         }
       }
 
@@ -109,7 +119,10 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         win = env.win;
         doc = win.document;
         ampdoc = env.ampdoc;
-        clock = lolex.install({target: win});
+        clock = fakeTimers.withGlobal(win).install();
+        delete win.requestIdleCallback;
+        delete win.cancelIdleCallback;
+        delete win.__AMP_BASE_CE_CLASS;
         resources = Services.resourcesForDoc(doc);
         resources.isBuildOn_ = true;
         resourcesMock = env.sandbox.mock(resources);
@@ -119,26 +132,36 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
 
         ElementClass = createAmpElementForTesting(win, TestElement);
         StubElementClass = createAmpElementForTesting(win, ElementStub);
+        ElementClassWithReUpgrade = createAmpElementForTesting(
+          win,
+          TestElementWithReUpgrade
+        );
 
         win.customElements.define('amp-test', ElementClass);
         win.customElements.define('amp-stub', StubElementClass);
+        win.customElements.define(
+          'amp-test-with-re-upgrade',
+          ElementClassWithReUpgrade
+        );
 
         win.__AMP_EXTENDED_ELEMENTS['amp-test'] = TestElement;
         win.__AMP_EXTENDED_ELEMENTS['amp-stub'] = ElementStub;
-        ampdoc.declareExtension('amp-stub');
+        win.__AMP_EXTENDED_ELEMENTS['amp-test-with-re-upgrade'] =
+          TestElementWithReUpgrade;
+        ampdoc.declareExtension('amp-stub', '0.1');
 
-        testElementCreatedCallback = env.sandbox.spy();
         testElementPreconnectCallback = env.sandbox.spy();
-        testElementFirstAttachedCallback = env.sandbox.spy();
         testElementBuildCallback = env.sandbox.spy();
         testElementCreatePlaceholderCallback = env.sandbox.spy();
         testElementLayoutCallback = env.sandbox.spy();
         testElementFirstLayoutCompleted = env.sandbox.spy();
-        testElementViewportCallback = env.sandbox.spy();
         testElementGetInsersectionElementLayoutBox = env.sandbox.spy();
         testElementUnlayoutCallback = env.sandbox.spy();
         testElementPauseCallback = env.sandbox.spy();
         testElementResumeCallback = env.sandbox.spy();
+        testElementAttachedCallback = env.sandbox.spy();
+        testElementDetachedCallback = env.sandbox.spy();
+        testOnLayoutMeasureCallback = env.sandbox.spy();
       });
 
       afterEach(() => {
@@ -146,6 +169,10 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         resourcesMock.verify();
       });
 
+      function skipMicroTask() {
+        return new Promise((resolve) => resolve(Promise.resolve()));
+      }
+
       it('should initialize ampdoc and resources on attach only', () => {
         const element = new ElementClass();
         expect(element.ampdoc_).to.be.null;
@@ -168,24 +195,23 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
       it('Element - createdCallback', () => {
         const element = new ElementClass();
         const build = env.sandbox
-          .stub(element, 'build')
+          .stub(element, 'buildInternal')
           .returns(Promise.resolve());
 
         expect(element.isBuilt()).to.equal(false);
         expect(element.hasAttributes()).to.equal(false);
         expect(element.isUpgraded()).to.equal(false);
         expect(element.upgradeState_).to.equal(/* NOT_UPGRADED */ 1);
-        expect(element.readyState).to.equal('loading');
+        expect(element.readyState).to.equal('upgrading');
         expect(element.everAttached).to.equal(false);
-        expect(element.layout_).to.equal(Layout.NODISPLAY);
-        expect(testElementCreatedCallback).to.have.not.been.called;
+        expect(element.getLayout()).to.equal(Layout.NODISPLAY);
 
         container.appendChild(element);
         expect(element).to.have.class('i-amphtml-element');
         expect(element).to.have.class('i-amphtml-notbuilt');
         expect(element).to.have.class('amp-notbuilt');
+        expect(element).to.not.have.class('i-amphtml-built');
         expect(element.everAttached).to.equal(true);
-        expect(testElementCreatedCallback).to.be.calledOnce;
         expect(element.isUpgraded()).to.equal(true);
         expect(build.calledOnce).to.equal(true);
 
@@ -196,39 +222,86 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
 
       it('StubElement - createdCallback', () => {
         const element = new StubElementClass();
-        env.sandbox.stub(element, 'build');
+        env.sandbox.stub(element, 'buildInternal');
 
         expect(element.isBuilt()).to.equal(false);
         expect(element.hasAttributes()).to.equal(false);
         expect(element.isUpgraded()).to.equal(false);
-        expect(element.readyState).to.equal('loading');
+        expect(element.readyState).to.equal('upgrading');
         expect(element.everAttached).to.equal(false);
-        expect(element.layout_).to.equal(Layout.NODISPLAY);
-        expect(testElementCreatedCallback).to.have.not.been.called;
+        expect(element.getLayout()).to.equal(Layout.NODISPLAY);
 
         container.appendChild(element);
         expect(element).to.have.class('i-amphtml-element');
         expect(element).to.have.class('i-amphtml-notbuilt');
         expect(element).to.have.class('amp-notbuilt');
+        expect(element).to.not.have.class('i-amphtml-built');
         expect(element.everAttached).to.equal(true);
-        expect(testElementCreatedCallback).to.have.not.been.called;
         expect(element.isUpgraded()).to.equal(false);
         // TODO(jeffkaufman, #13422): this test was silently failing.  `build` was
-        // the return value from `env.sandbox.stub(element, 'build')`.
+        // the return value from `env.sandbox.stub(element, 'buildInternal')`.
         //
         // expect(build.calledOnce).to.equal(true);
       });
 
+      it('StubElement - should try to install an unregistered legacy extensions', () => {
+        delete win.__AMP_BASE_CE_CLASS;
+        const LegacyElementClass = createAmpElementForTesting(
+          win,
+          ElementStub,
+          elementConnectedCallback
+        );
+        win.customElements.define('amp-legacy', LegacyElementClass);
+        win.__AMP_EXTENDED_ELEMENTS['amp-legacy'] = ElementStub;
+
+        const extensions = Services.extensionsFor(win);
+        env.sandbox.stub(extensions, 'installExtensionForDoc');
+
+        const element = new LegacyElementClass();
+        env.sandbox.stub(element, 'buildInternal');
+
+        container.appendChild(element);
+        expect(element.readyState).to.equal('upgrading');
+        expect(extensions.installExtensionForDoc).to.be.calledOnce.calledWith(
+          ampdoc,
+          'amp-legacy',
+          '0.1'
+        );
+      });
+
+      it('StubElement - should not try to install a pre-registered legacy extensions', () => {
+        delete win.__AMP_BASE_CE_CLASS;
+        const LegacyElementClass = createAmpElementForTesting(
+          win,
+          ElementStub,
+          elementConnectedCallback
+        );
+        win.customElements.define('amp-legacy', LegacyElementClass);
+        win.__AMP_EXTENDED_ELEMENTS['amp-legacy'] = ElementStub;
+        ampdoc.declareExtension('amp-legacy', '0.1');
+
+        const extensions = Services.extensionsFor(win);
+        env.sandbox.stub(extensions, 'installExtensionForDoc');
+
+        const element = new LegacyElementClass();
+        env.sandbox.stub(element, 'buildInternal');
+
+        container.appendChild(element);
+        expect(element.readyState).to.equal('upgrading');
+        expect(extensions.installExtensionForDoc).to.not.be.called;
+      });
+
       it('Element - should only add classes on first attachedCallback', () => {
         const element = new ElementClass();
         const buildPromise = Promise.resolve();
         const buildStub = env.sandbox
-          .stub(element, 'build')
+          .stub(element, 'buildInternal')
           .returns(buildPromise);
 
         expect(element).to.not.have.class('i-amphtml-element');
         expect(element).to.not.have.class('i-amphtml-notbuilt');
         expect(element).to.not.have.class('amp-notbuilt');
+        expect(element).to.not.have.class('i-amphtml-built');
 
         container.appendChild(element);
 
@@ -257,12 +330,14 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         expect(element).to.not.have.class('i-amphtml-element');
         expect(element).to.not.have.class('i-amphtml-notbuilt');
         expect(element).to.not.have.class('amp-notbuilt');
+        expect(element).to.not.have.class('i-amphtml-built');
 
         container.appendChild(element);
 
         expect(element).to.not.have.class('i-amphtml-element');
         expect(element).to.not.have.class('i-amphtml-notbuilt');
         expect(element).to.not.have.class('amp-notbuilt');
+        expect(element).to.not.have.class('i-amphtml-built');
       });
 
       it('Element - should reset on 2nd attachedCallback when requested', () => {
@@ -270,7 +345,7 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         const element = new ElementClass();
         const buildPromise = Promise.resolve();
         const buildStub = env.sandbox
-          .stub(element, 'build')
+          .stub(element, 'buildInternal')
           .returns(buildPromise);
         container.appendChild(element);
         container.removeChild(element);
@@ -295,7 +370,7 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
       it('Element - should NOT reset on 2nd attachedCallback w/o request', () => {
         clock.tick(1);
         const element = new ElementClass();
-        env.sandbox.stub(element, 'build').returns(Promise.resolve());
+        env.sandbox.stub(element, 'buildInternal').returns(Promise.resolve());
         container.appendChild(element);
         container.removeChild(element);
 
@@ -325,17 +400,21 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
       it('Element - updateLayoutBox', () => {
         const element = new ElementClass();
         container.appendChild(element);
-        expect(element.getLayoutWidth()).to.equal(-1);
+        expect(element.getLayoutSize()).to.deep.equal({width: 0, height: 0});
 
-        element.updateLayoutBox({top: 0, left: 0, width: 111, height: 51});
-        expect(element.getLayoutWidth()).to.equal(111);
+        const rect = {top: 0, left: 0, width: 111, height: 51};
+        element.updateLayoutBox(rect);
+        expect(testOnLayoutMeasureCallback).to.not.be.called;
+
+        env.sandbox.stub(element, 'isBuilt').returns(true);
+        element.updateLayoutBox(rect);
+        expect(testOnLayoutMeasureCallback).to.be.calledOnce;
       });
 
       it('should tolerate errors in onLayoutMeasure', () => {
-        expectAsyncConsoleError(/intentional/, 1);
         const element = new ElementClass();
         env.sandbox
-          .stub(element.implementation_, 'onLayoutMeasure')
+          .stub(TestElement.prototype, 'onLayoutMeasure')
           .callsFake(() => {
             throw new Error('intentional');
           });
@@ -347,58 +426,16 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         return element.buildingPromise_.then(() => {
           allowConsoleError(() => {
             element.updateLayoutBox({top: 0, left: 0, width: 111, height: 51});
-            expect(element.getLayoutWidth()).to.equal(111);
+            expect(element.getLayoutSize()).to.be.ok;
             expect(errorStub).to.be.calledWith(AmpEvents.ERROR, 'intentional');
           });
         });
       });
 
-      it(
-        'should not call onMeasureChanged callback when element dimensions ' +
-          'have not changed',
-        () => {
-          const element = new ElementClass();
-          const onMeasureChangeStub = env.sandbox.stub(
-            element.implementation_,
-            'onMeasureChanged'
-          );
-          container.appendChild(element);
-          return element.buildingPromise_.then(() => {
-            element.updateLayoutBox(
-              {top: 0, left: 0, width: 111, height: 51},
-              /* opt_hasMeasurementsChanged */ false
-            );
-            expect(element.getLayoutWidth()).to.equal(111);
-            expect(onMeasureChangeStub).to.have.not.been.called;
-          });
-        }
-      );
-
-      it(
-        'should call onMeasureChanged callback when element dimensions ' +
-          'have changed',
-        () => {
-          const element = new ElementClass();
-          const onMeasureChangeStub = env.sandbox.stub(
-            element.implementation_,
-            'onMeasureChanged'
-          );
-          container.appendChild(element);
-          return element.buildingPromise_.then(() => {
-            element.updateLayoutBox(
-              {top: 0, left: 0, width: 111, height: 51},
-              /* opt_hasMeasurementsChanged */ true
-            );
-            expect(element.getLayoutWidth()).to.equal(111);
-            expect(onMeasureChangeStub).to.have.been.called;
-          });
-        }
-      );
-
       it('StubElement - upgrade after attached', () => {
         const element = new StubElementClass();
         expect(element.isUpgraded()).to.equal(false);
-        expect(testElementCreatedCallback).to.have.not.been.called;
+        expect(getImplSyncForTesting(element)).to.be.null;
 
         element.setAttribute('layout', 'fill');
         element.updateLayoutBox({top: 0, left: 0, width: 111, height: 51});
@@ -408,17 +445,17 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         element.upgrade(TestElement);
 
         expect(element.isUpgraded()).to.equal(true);
-        expect(element.implementation_).to.be.instanceOf(TestElement);
-        expect(element.implementation_.layout_).to.equal(Layout.FILL);
-        expect(testElementCreatedCallback).to.be.calledOnce;
-        expect(testElementFirstAttachedCallback).to.be.calledOnce;
+        expect(element.readyState).to.equal('building');
+        const impl = getImplSyncForTesting(element);
+        expect(impl).to.be.instanceOf(TestElement);
+        expect(impl.getLayout()).to.equal(Layout.FILL);
         expect(element.isBuilt()).to.equal(false);
       });
 
-      it('StubElement - upgrade before attached', () => {
+      it('StubElement - should not upgrade before attached', () => {
         const element = new StubElementClass();
         expect(element.isUpgraded()).to.equal(false);
-        expect(testElementCreatedCallback).to.have.not.been.called;
+        expect(getImplSyncForTesting(element)).to.be.null;
 
         element.setAttribute('layout', 'fill');
         element.updateLayoutBox({top: 0, left: 0, width: 111, height: 51});
@@ -427,9 +464,30 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         element.upgrade(TestElement);
 
         expect(element.isUpgraded()).to.equal(false);
-        expect(element.implementation_).to.be.instanceOf(TestElement);
-        expect(testElementCreatedCallback).to.have.not.been.called;
-        expect(testElementFirstAttachedCallback).to.have.not.been.called;
+        expect(element.readyState).to.equal('upgrading');
+        expect(getImplSyncForTesting(element)).to.be.null;
+        expect(element.isBuilt()).to.equal(false);
+      });
+
+      it('StubElement - upgrade if ever attached', () => {
+        const element = new StubElementClass();
+        expect(element.isUpgraded()).to.equal(false);
+        expect(getImplSyncForTesting(element)).to.be.null;
+
+        element.setAttribute('layout', 'fill');
+        element.updateLayoutBox({top: 0, left: 0, width: 111, height: 51});
+
+        // Attach once and remove.
+        container.appendChild(element);
+        container.removeChild(element);
+
+        resourcesMock.expects('upgraded').withExactArgs(element).once();
+
+        element.upgrade(TestElement);
+
+        expect(element.isUpgraded()).to.equal(true);
+        expect(element.readyState).to.equal('building');
+        expect(getImplSyncForTesting(element)).to.be.instanceOf(TestElement);
         expect(element.isBuilt()).to.equal(false);
       });
 
@@ -442,142 +500,89 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
 
         element.upgrade(TestElement);
         expect(element.isUpgraded()).to.equal(false);
+        expect(element.readyState).to.equal('upgrading');
         expect(element.isBuilt()).to.equal(false);
       });
 
       it('Element - re-upgrade to new direct instance', () => {
-        const element = new ElementClass();
+        const element = new ElementClassWithReUpgrade();
         expect(element.isUpgraded()).to.equal(false);
-        const newImpl = new TestElement(element);
-        element.implementation_.upgradeCallback = () => newImpl;
 
         container.appendChild(element);
         expect(element.isUpgraded()).to.equal(true);
-        expect(element.implementation_).to.equal(newImpl);
+
+        const impl = getImplSyncForTesting(element);
+        expect(impl).to.be.instanceOf(TestElement);
+        expect(impl.source).to.equal('re-upgrade');
         expect(element.upgradeDelayMs_).to.equal(0);
       });
 
-      it('Element - re-upgrade to new promised instance', () => {
-        const element = new ElementClass();
-        expect(element.isUpgraded()).to.equal(false);
-        const oldImpl = element.implementation_;
-        const newImpl = new TestElement(element);
-        const promise = Services.timerFor(win)
-          .promise(10)
-          .then(() => newImpl);
-        oldImpl.upgradeCallback = () => promise;
-
-        container.appendChild(element);
-        expect(element.implementation_).to.equal(oldImpl);
-        expect(element.isUpgraded()).to.equal(false);
-        expect(element.upgradeState_).to.equal(/* UPGRADE_IN_PROGRESS */ 4);
-        clock.tick(10);
-        return promise
-          .then(() => {
-            // Skip a microtask.
-          })
-          .then(() => {
-            expect(element.implementation_).to.equal(newImpl);
-            expect(element.isUpgraded()).to.equal(true);
-            expect(element.upgradeState_).to.equal(/* UPGRADED */ 2);
-            expect(element.upgradeDelayMs_).to.be.equal(10);
+      it('Element - re-upgrade to new promised instance', async () => {
+        let promise;
+        env.sandbox
+          .stub(TestElementWithReUpgrade.prototype, 'upgradeCallback')
+          .callsFake(function () {
+            promise = Promise.resolve(
+              new TestElement(this.element, 're-upgrade-with-promise')
+            );
+            return promise;
           });
-      });
 
-      it('Element - re-upgrade to new promised null', () => {
-        const element = new ElementClass();
+        const element = new ElementClassWithReUpgrade();
         expect(element.isUpgraded()).to.equal(false);
-        const oldImpl = element.implementation_;
-        const promise = Promise.resolve(null);
-        oldImpl.upgradeCallback = () => promise;
-
         container.appendChild(element);
-        expect(element.implementation_).to.equal(oldImpl);
+
+        expect(getImplSyncForTesting(element)).to.be.null;
         expect(element.isUpgraded()).to.equal(false);
         expect(element.upgradeState_).to.equal(/* UPGRADE_IN_PROGRESS */ 4);
-        return promise
-          .then(() => {
-            // Skip a microtask.
-          })
-          .then(() => {
-            expect(element.implementation_).to.equal(oldImpl);
-            expect(element.isUpgraded()).to.equal(true);
-            expect(element.upgradeState_).to.equal(/* UPGRADED */ 2);
-          });
-      });
+        expect(promise).to.exist;
 
-      it('Element - re-upgrade with a failed promised', () => {
-        expectAsyncConsoleError(/upgrade failed/, 1);
-        const element = new ElementClass();
-        expect(element.isUpgraded()).to.equal(false);
-        const oldImpl = element.implementation_;
-        const promise = Promise.reject(new Error('upgrade failed'));
-        oldImpl.upgradeCallback = () => promise;
+        await promise;
+        await skipMicroTask();
+        expect(element.isUpgraded()).to.equal(true);
+        expect(element.upgradeState_).to.equal(/* UPGRADED */ 2);
 
-        container.appendChild(element);
-        expect(element.implementation_).to.equal(oldImpl);
-        expect(element.isUpgraded()).to.equal(false);
-        expect(element.upgradeState_).to.equal(/* UPGRADE_IN_PROGRESS */ 4);
-        return promise
-          .catch(() => {
-            // Ignore error.
-          })
-          .then(() => {
-            expect(element.implementation_).to.equal(oldImpl);
-            expect(element.isUpgraded()).to.equal(false);
-            expect(element.upgradeState_).to.equal(/* UPGRADE_FAILED */ 3);
-          });
+        const impl = getImplSyncForTesting(element);
+        expect(impl).to.be.instanceOf(TestElement);
+        expect(impl.source).to.equal('re-upgrade-with-promise');
       });
 
-      it('Element - can only re-upgrade once', () => {
-        const element = new ElementClass();
-        expect(element.isUpgraded()).to.equal(false);
-        const oldImpl = element.implementation_;
-        const newImpl = new TestElement(element);
-        const newImpl2 = new TestElement(element);
-        const promise = Promise.resolve(newImpl);
-        oldImpl.upgradeCallback = () => promise;
+      it('Element - re-upgrade to new promised null', async () => {
+        let promise;
+        env.sandbox
+          .stub(TestElementWithReUpgrade.prototype, 'upgradeCallback')
+          .callsFake(function () {
+            promise = Promise.resolve(null);
+            return promise;
+          });
 
-        container.appendChild(element);
-        expect(element.implementation_).to.equal(oldImpl);
+        const element = new ElementClassWithReUpgrade();
         expect(element.isUpgraded()).to.equal(false);
-        expect(element.upgradeState_).to.equal(/* UPGRADE_IN_PROGRESS */ 4);
-
-        oldImpl.upgradeCallback = () => newImpl2;
         container.appendChild(element);
-        expect(element.implementation_).to.equal(oldImpl);
+
+        expect(getImplSyncForTesting(element)).to.be.null;
         expect(element.isUpgraded()).to.equal(false);
         expect(element.upgradeState_).to.equal(/* UPGRADE_IN_PROGRESS */ 4);
-        return promise
-          .then(() => {
-            // Skip a microtask.
-          })
-          .then(() => {
-            expect(element.implementation_).to.equal(newImpl);
-            expect(element.isUpgraded()).to.equal(true);
-            expect(element.upgradeState_).to.equal(/* UPGRADED */ 2);
-          });
+        expect(promise).to.exist;
+
+        await promise;
+        await skipMicroTask();
+
+        expect(element.isUpgraded()).to.equal(true);
+        expect(element.upgradeState_).to.equal(/* UPGRADED */ 2);
+
+        const impl = getImplSyncForTesting(element);
+        expect(impl).to.be.instanceOf(TestElementWithReUpgrade);
       });
 
       it('StubElement - re-upgrade', () => {
         const element = new StubElementClass();
         expect(element.isUpgraded()).to.equal(false);
-        expect(testElementCreatedCallback).to.have.not.been.called;
         resourcesMock.expects('upgraded').withExactArgs(element).never();
 
         element.upgrade(TestElementWithReUpgrade);
 
         expect(element.isUpgraded()).to.equal(false);
-        expect(testElementCreatedCallback).to.have.not.been.called;
-      });
-
-      it('Element - build NOT allowed before attachment', () => {
-        const element = new ElementClass();
-        allowConsoleError(() => {
-          expect(() => {
-            element.build();
-          }).to.throw(/upgrade/);
-        });
       });
 
       it('Element - build allowed', () => {
@@ -593,12 +598,33 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
           expect(element.isBuilt()).to.equal(true);
           expect(element).to.not.have.class('i-amphtml-notbuilt');
           expect(element).to.not.have.class('amp-notbuilt');
+          expect(element).to.have.class('i-amphtml-built');
           expect(testElementBuildCallback).to.be.calledOnce;
           expect(element.signals().get(CommonSignals.BUILT)).to.be.ok;
           return element.whenBuilt(); // Should eventually resolve.
         });
       });
 
+      it('Element - attachedCallback is called post build and on reconnect', async () => {
+        const element = new ElementClass();
+
+        // First build.
+        clock.tick(1);
+        container.appendChild(element);
+        await element.buildingPromise_;
+        expect(testElementAttachedCallback).to.be.calledOnce;
+
+        // Detach.
+        container.removeChild(element);
+        clock.tick(1);
+        expect(testElementDetachedCallback).to.be.calledOnce;
+
+        // Reconnect.
+        container.appendChild(element);
+        clock.tick(1);
+        expect(testElementAttachedCallback).to.be.calledTwice;
+      });
+
       it('should build on consent sufficient', () => {
         const element = new ElementClass();
         env.sandbox
@@ -619,6 +645,20 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         return element.whenBuilt();
       });
 
+      it('should build on no consent policy', () => {
+        const element = new ElementClass();
+        env.sandbox
+          .stub(Services, 'consentPolicyServiceForDocOrNull')
+          .resolves(null);
+        env.sandbox.stub(element, 'getConsentPolicy_').callsFake(() => {
+          return 'default';
+        });
+
+        clock.tick(1);
+        container.appendChild(element);
+        return element.whenBuilt();
+      });
+
       it('should not build on consent insufficient', () => {
         const element = new ElementClass();
         env.sandbox
@@ -643,9 +683,7 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
 
       it('should respect user specified consent policy', () => {
         const element = new ElementClass();
-        element.getAmpDoc = () => {
-          return env.ampdoc;
-        };
+        container.appendChild(element);
         expect(element.getConsentPolicy_()).to.equal(null);
         element.setAttribute('data-block-on-consent', '');
         expect(element.getConsentPolicy_()).to.equal('default');
@@ -659,20 +697,136 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         meta.setAttribute('content', 'amp-test');
         doc.head.appendChild(meta);
         const element = new ElementClass();
-        element.getAmpDoc = () => {
-          return env.ampdoc;
-        };
+        container.appendChild(element);
         expect(element.getConsentPolicy_()).to.equal('default');
         expect(element.getAttribute('data-block-on-consent')).to.equal(
           'default'
         );
       });
 
-      it('should anticipate build errors', () => {
+      describe('granular consent experiment', () => {
+        beforeEach(() => {
+          toggleExperiment(win, 'amp-consent-granular-consent', true);
+        });
+
+        afterEach(() => {
+          toggleExperiment(win, 'amp-consent-granular-consent', false);
+        });
+
+        describe('getPurposeConsent_', () => {
+          let element;
+          beforeEach(() => {
+            element = new ElementClass();
+          });
+
+          it('should find no consent purposes w/ no attribute', () => {
+            expect(element.getPurposesConsent_()).to.be.undefined;
+          });
+
+          it('should find no consent purposes w/ no value on attribute', () => {
+            element.setAttribute('data-block-on-consent-purposes', '');
+            expect(element.getPurposesConsent_()).to.be.undefined;
+          });
+
+          it('should find correct consent purposes', () => {
+            element.setAttribute(
+              'data-block-on-consent-purposes',
+              'purpose-foo,purpose-bar'
+            );
+            expect(element.getPurposesConsent_()).to.deep.equals([
+              'purpose-foo',
+              'purpose-bar',
+            ]);
+          });
+
+          it('should find correct consent purposes w/ whitespaces', () => {
+            element.setAttribute(
+              'data-block-on-consent-purposes',
+              '     purpose-foo, purpose-bar'
+            );
+            expect(element.getPurposesConsent_()).to.deep.equals([
+              'purpose-foo',
+              'purpose-bar',
+            ]);
+          });
+        });
+
+        it('should default to policyId', () => {
+          const element = new ElementClass();
+          const purposesSpy = env.sandbox.spy();
+          env.sandbox
+            .stub(Services, 'consentPolicyServiceForDocOrNull')
+            .resolves({
+              whenPolicyUnblock: () => {
+                return Promise.resolve(true);
+              },
+              whenPurposesUnblock: () => purposesSpy,
+            });
+          element.setAttribute('data-block-on-consent', '');
+          element.setAttribute(
+            'data-block-on-consent-purposes',
+            'purpose-foo,purpose-bar'
+          );
+
+          clock.tick(1);
+          container.appendChild(element);
+          return element.whenBuilt().then(() => {
+            expect(purposesSpy).to.not.be.called;
+          });
+        });
+
+        it('should build on purpose consents', () => {
+          const element = new ElementClass();
+          const defaultPolicySpy = env.sandbox.spy();
+          env.sandbox
+            .stub(Services, 'consentPolicyServiceForDocOrNull')
+            .resolves({
+              whenPolicyUnblock: () => {
+                return defaultPolicySpy;
+              },
+              whenPurposesUnblock: () => {
+                return Promise.resolve(true);
+              },
+            });
+          element.setAttribute(
+            'data-block-on-consent-purposes',
+            'purpose-foo,purpose-bar'
+          );
+
+          clock.tick(1);
+          container.appendChild(element);
+          return element.whenBuilt().then(() => {
+            expect(defaultPolicySpy).to.not.be.called;
+          });
+        });
+
+        it('should not build on insufficient purpose consents', () => {
+          const element = new ElementClass();
+          env.sandbox
+            .stub(Services, 'consentPolicyServiceForDocOrNull')
+            .resolves({
+              whenPurposesUnblock: () => {
+                return Promise.resolve(false);
+              },
+            });
+          element.setAttribute(
+            'data-block-on-consent-purposes',
+            'purpose-foo,purpose-bar'
+          );
+
+          clock.tick(1);
+          container.appendChild(element);
+          return expect(element.whenBuilt()).to.eventually.be.rejectedWith(
+            /BLOCK_BY_CONSENT/
+          );
+        });
+      });
+
+      it('should anticipate sync build errors', () => {
         expectAsyncConsoleError(/intentional/, 2);
         const element = new ElementClass();
         env.sandbox
-          .stub(element.implementation_, 'buildCallback')
+          .stub(TestElement.prototype, 'buildCallback')
           .callsFake(() => {
             throw new Error('intentional');
           });
@@ -706,6 +860,7 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         container.appendChild(element);
         return element.buildingPromise_.then(() => {
           expect(element.isBuilt()).to.equal(true);
+          expect(element.readyState).to.equal('loading');
           expect(testElementCreatePlaceholderCallback).to.have.not.been.called;
         });
       });
@@ -722,8 +877,9 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
           expect(testElementBuildCallback).to.be.calledOnce;
 
           // Call again.
-          return element.build().then(() => {
+          return element.buildInternal().then(() => {
             expect(element.isBuilt()).to.equal(true);
+            expect(element.readyState).to.equal('loading');
             expect(testElementBuildCallback).to.be.calledOnce;
             setTimeout(() => {
               expect(testElementPreconnectCallback).to.be.calledOnce;
@@ -732,14 +888,16 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         });
       });
 
-      it('Element - build is repeatable', () => {
+      it('Element - build is repeatable', async () => {
         const element = new ElementClass();
         expect(element.isBuilt()).to.equal(false);
         expect(testElementBuildCallback).to.have.not.been.called;
 
         container.appendChild(element);
         const buildingPromise = element.buildingPromise_;
-        expect(element.build()).to.equal(buildingPromise);
+        expect(element.buildInternal()).to.equal(buildingPromise);
+        // Skip a task.
+        await new Promise(setTimeout);
         expect(testElementBuildCallback).to.be.calledOnce;
       });
 
@@ -751,7 +909,7 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         element.isInTemplate_ = true;
         allowConsoleError(() => {
           expect(() => {
-            element.build();
+            element.buildInternal();
           }).to.throw(/Must never be called in template/);
         });
 
@@ -766,7 +924,7 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
 
         allowConsoleError(() => {
           expect(() => {
-            element.build();
+            element.buildInternal();
           }).to.throw(/Cannot build unupgraded element/);
         });
 
@@ -776,6 +934,7 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
 
       it('Element - createPlaceholder', () => {
         const element = new ElementClass();
+        container.appendChild(element);
         element.createPlaceholder();
         expect(testElementCreatePlaceholderCallback).to.be.calledOnce;
       });
@@ -783,35 +942,33 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
       it('Element - attachedCallback', () => {
         const element = new ElementClass();
         element.setAttribute('layout', 'fill');
-        expect(testElementFirstAttachedCallback).to.have.not.been.called;
         expect(element.everAttached).to.equal(false);
-        expect(element.layout_).to.equal(Layout.NODISPLAY);
+        expect(element.getLayout()).to.equal(Layout.NODISPLAY);
 
         resourcesMock.expects('add').withExactArgs(element).atLeast(1);
         resourcesMock.expects('upgraded').withExactArgs(element).atLeast(1);
         container.appendChild(element);
 
         expect(element.everAttached).to.equal(true);
-        expect(element.layout_).to.equal(Layout.FILL);
-        expect(element.implementation_.layout_).to.equal(Layout.FILL);
-        expect(testElementFirstAttachedCallback).to.be.calledOnce;
+        expect(element.getLayout()).to.equal(Layout.FILL);
+        expect(element.getLayout()).to.equal(Layout.FILL);
+        expect(getImplSyncForTesting(element).getLayout()).to.equal(
+          Layout.FILL
+        );
       });
 
       it('StubElement - attachedCallback', () => {
         const element = new StubElementClass();
         element.setAttribute('layout', 'fill');
-        expect(testElementFirstAttachedCallback).to.have.not.been.called;
         expect(element.everAttached).to.equal(false);
-        expect(element.layout_).to.equal(Layout.NODISPLAY);
+        expect(element.getLayout()).to.equal(Layout.NODISPLAY);
 
         resourcesMock.expects('add').withExactArgs(element).atLeast(1);
         container.appendChild(element);
 
         expect(element.everAttached).to.equal(true);
-        expect(element.layout_).to.equal(Layout.FILL);
+        expect(element.getLayout()).to.equal(Layout.FILL);
         // Not upgraded yet!
-        expect(testElementCreatedCallback).to.have.not.been.called;
-        expect(testElementFirstAttachedCallback).to.have.not.been.called;
         expect(element).to.have.class('amp-unresolved');
         expect(element).to.have.class('i-amphtml-unresolved');
 
@@ -819,11 +976,13 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         resourcesMock.expects('upgraded').withExactArgs(element).once();
         element.upgrade(TestElement);
 
-        expect(element.layout_).to.equal(Layout.FILL);
-        expect(element.implementation_.layout_).to.equal(Layout.FILL);
+        expect(element.getLayout()).to.equal(Layout.FILL);
+        expect(element.getLayout()).to.equal(Layout.FILL);
+        expect(getImplSyncForTesting(element).getLayout()).to.equal(
+          Layout.FILL
+        );
+
         // Now it's called.
-        expect(testElementCreatedCallback).to.be.calledOnce;
-        expect(testElementFirstAttachedCallback).to.be.calledOnce;
         expect(element).to.not.have.class('amp-unresolved');
         expect(element).to.not.have.class('i-amphtml-unresolved');
       });
@@ -831,9 +990,8 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
       it('Element - detachedCallback', () => {
         const element = new ElementClass();
         element.setAttribute('layout', 'fill');
-        expect(testElementFirstAttachedCallback).to.have.not.been.called;
         expect(element.everAttached).to.equal(false);
-        expect(element.layout_).to.equal(Layout.NODISPLAY);
+        expect(element.getLayout()).to.equal(Layout.NODISPLAY);
 
         resourcesMock.expects('add').withExactArgs(element).atLeast(1);
         resourcesMock.expects('upgraded').withExactArgs(element).atLeast(1);
@@ -843,17 +1001,17 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         container.removeChild(element);
 
         expect(element.everAttached).to.equal(true);
-        expect(element.layout_).to.equal(Layout.FILL);
-        expect(element.implementation_.layout_).to.equal(Layout.FILL);
-        expect(testElementFirstAttachedCallback).to.be.calledOnce;
+        expect(element.getLayout()).to.equal(Layout.FILL);
+        expect(getImplSyncForTesting(element).getLayout()).to.equal(
+          Layout.FILL
+        );
       });
 
       it('Element - handles async detachedCallback when connected', () => {
         const element = new ElementClass();
         element.setAttribute('layout', 'fill');
-        expect(testElementFirstAttachedCallback).to.have.not.been.called;
         expect(element.everAttached).to.equal(false);
-        expect(element.layout_).to.equal(Layout.NODISPLAY);
+        expect(element.getLayout()).to.equal(Layout.NODISPLAY);
 
         resourcesMock.expects('add').withExactArgs(element).atLeast(1);
         resourcesMock.expects('upgraded').withExactArgs(element).atLeast(1);
@@ -866,9 +1024,10 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         container.removeChild(element);
 
         expect(element.everAttached).to.equal(true);
-        expect(element.layout_).to.equal(Layout.FILL);
-        expect(element.implementation_.layout_).to.equal(Layout.FILL);
-        expect(testElementFirstAttachedCallback).to.be.calledOnce;
+        expect(element.getLayout()).to.equal(Layout.FILL);
+        expect(getImplSyncForTesting(element).getLayout()).to.equal(
+          Layout.FILL
+        );
       });
 
       it('Element - layoutCallback before build', () => {
@@ -917,8 +1076,10 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         const element = new ElementClass();
         element.setAttribute('layout', 'fill');
         container.appendChild(element);
-        return element.build().then(() => {
+        expect(element.readyState).to.equal('building');
+        return element.buildInternal().then(() => {
           expect(element.isBuilt()).to.equal(true);
+          expect(element.readyState).to.equal('loading');
           expect(testElementLayoutCallback).to.have.not.been.called;
 
           const p = element.layoutCallback();
@@ -936,6 +1097,89 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         });
       });
 
+      it('Element - layoutCallback aborted waiting for mutate phase', () => {
+        const element = new ElementClass();
+        element.setAttribute('layout', 'fill');
+        container.appendChild(element);
+        return element.buildInternal().then(() => {
+          expect(element.isBuilt()).to.equal(true);
+          expect(testElementLayoutCallback).to.have.not.been.called;
+
+          const controller = new AbortController();
+          controller.abort();
+          const p = element.layoutCallback(controller.signal);
+          expect(testElementLayoutCallback).not.to.be.called;
+          expect(element.signals().get(CommonSignals.LOAD_START)).to.be.null;
+          expect(element.signals().get(CommonSignals.LOAD_END)).to.be.null;
+          setTimeout(() => {
+            expect(testElementPreconnectCallback).to.have.callCount(1);
+          }, 0);
+          return expect(p).to.be.rejected.then(() => {
+            expect(element.readyState).to.equal('loading');
+            expect(element.signals().get(CommonSignals.LOAD_END)).to.be.null;
+          });
+        });
+      });
+
+      it('Element - layoutCallback aborted before completing layout', () => {
+        const element = new ElementClass();
+        element.setAttribute('layout', 'fill');
+        container.appendChild(element);
+        return element.buildInternal().then(() => {
+          expect(element.isBuilt()).to.equal(true);
+          expect(testElementLayoutCallback).to.have.not.been.called;
+
+          const controller = new AbortController();
+          const stub = env.sandbox
+            .stub(TestElement.prototype, 'layoutCallback')
+            .callsFake(() => {
+              controller.abort();
+            });
+          const p = element.layoutCallback(controller.signal);
+          expect(testElementLayoutCallback).not.to.be.called;
+          expect(element.signals().get(CommonSignals.LOAD_START)).to.be.ok;
+          expect(element.signals().get(CommonSignals.LOAD_END)).to.be.null;
+          setTimeout(() => {
+            expect(testElementPreconnectCallback).to.have.callCount(2);
+          }, 0);
+          return expect(p).to.be.rejected.then(() => {
+            expect(stub).to.have.been.called;
+            expect(element.readyState).to.equal('loading');
+            expect(element.signals().get(CommonSignals.LOAD_END)).to.be.null;
+          });
+        });
+      });
+
+      it('Element - layoutCallback aborted before throwing in layout', () => {
+        const element = new ElementClass();
+        element.setAttribute('layout', 'fill');
+        container.appendChild(element);
+        return element.buildInternal().then(() => {
+          expect(element.isBuilt()).to.equal(true);
+          expect(testElementLayoutCallback).to.have.not.been.called;
+
+          const controller = new AbortController();
+          const stub = env.sandbox
+            .stub(TestElement.prototype, 'layoutCallback')
+            .callsFake(() => {
+              controller.abort();
+              throw new Error('throwaway');
+            });
+          const p = element.layoutCallback(controller.signal);
+          expect(testElementLayoutCallback).not.to.be.called;
+          expect(element.signals().get(CommonSignals.LOAD_START)).to.be.ok;
+          expect(element.signals().get(CommonSignals.LOAD_END)).to.be.null;
+          setTimeout(() => {
+            expect(testElementPreconnectCallback).to.have.callCount(2);
+          }, 0);
+          return expect(p).to.be.rejected.then(() => {
+            expect(stub).to.have.been.called;
+            expect(element.readyState).to.equal('loading');
+            expect(element.signals().get(CommonSignals.LOAD_END)).to.be.null;
+          });
+        });
+      });
+
       it('Element - layoutCallback should call firstLayoutCompleted only once', () => {
         const element = new ElementClass();
         element.setAttribute('layout', 'fill');
@@ -965,7 +1209,7 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         const element = new ElementClass();
         element.setAttribute('layout', 'fill');
         container.appendChild(element);
-        return element.build().then(() => {
+        return element.buildInternal().then(() => {
           expect(element.isBuilt()).to.equal(true);
           expect(testElementLayoutCallback).to.have.not.been.called;
 
@@ -978,22 +1222,7 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         });
       });
 
-      it('StubElement - layoutCallback should fail before attach', () => {
-        const element = new StubElementClass();
-        element.setAttribute('layout', 'fill');
-        resourcesMock.expects('upgraded').withExactArgs(element).never();
-        element.upgrade(TestElement);
-        allowConsoleError(() => {
-          expect(() => element.build()).to.throw(
-            /Cannot build unupgraded element/
-          );
-        });
-        expect(element.isUpgraded()).to.equal(false);
-        expect(element.isBuilt()).to.equal(false);
-        expect(testElementLayoutCallback).to.have.not.been.called;
-      });
-
-      it('StubElement - layoutCallback after attached', () => {
+      it('StubElement - layoutCallback after attached', () => {
         const element = new StubElementClass();
         element.setAttribute('layout', 'fill');
         element.everAttached = true;
@@ -1002,7 +1231,7 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         resourcesMock.expects('upgraded').withExactArgs(element).once();
         element.upgrade(TestElement);
         return element
-          .build()
+          .buildInternal()
           .then(() => {
             expect(element.isUpgraded()).to.equal(true);
             expect(element.isBuilt()).to.equal(true);
@@ -1019,8 +1248,12 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
 
       it('should enqueue actions until built', () => {
         const element = new ElementClass();
-        const handler = env.sandbox.spy();
-        element.implementation_.executeAction = handler;
+        const handler = env.sandbox.stub(
+          TestElement.prototype,
+          'executeAction'
+        );
+
+        container.appendChild(element);
         expect(element.actionQueue_).to.not.equal(null);
 
         const inv = {};
@@ -1032,10 +1265,12 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
 
       it('should execute action immediately after built', () => {
         const element = new ElementClass();
-        const handler = env.sandbox.spy();
-        element.implementation_.executeAction = handler;
+        const handler = env.sandbox.stub(
+          TestElement.prototype,
+          'executeAction'
+        );
         container.appendChild(element);
-        return element.build().then(() => {
+        return element.buildInternal().then(() => {
           const inv = {};
           element.enqueAction(inv);
           expect(handler).to.be.calledOnce;
@@ -1046,8 +1281,10 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
 
       it('should dequeue all actions after build', () => {
         const element = new ElementClass();
-        const handler = env.sandbox.spy();
-        element.implementation_.executeAction = handler;
+        const handler = env.sandbox.stub(
+          TestElement.prototype,
+          'executeAction'
+        );
 
         const inv1 = {};
         const inv2 = {};
@@ -1072,8 +1309,6 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
 
       it('should NOT enqueue actions when in template', () => {
         const element = new ElementClass();
-        const handler = env.sandbox.spy();
-        element.implementation_.executeAction = handler;
         expect(element.actionQueue_).to.not.equal(null);
 
         const inv = {};
@@ -1089,51 +1324,81 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         let element1;
         let element2;
         let matchMedia;
+        let matchMinWidth1px;
+        let requestMeasureStub;
 
         beforeEach(() => {
           element1 = new ElementClass();
 
-          // Fixes #19752. The window.matchMedia call in the code
-          // path of element.applySizesAndMediaQuery is not behaving consistently
-          // in headless mode, thus we mock the calls here. This is fine as we are
-          // not testing window behavior.
           matchMedia = env.sandbox.stub(
             element1.ownerDocument.defaultView,
             'matchMedia'
           );
-          matchMedia.withArgs('(min-width: 1px)').returns({matches: true});
+          matchMinWidth1px = {
+            matches: true,
+            onchange: null,
+          };
+          matchMedia.withArgs('(min-width: 1px)').returns(matchMinWidth1px);
           matchMedia
             .withArgs('(min-width: 1111111px)')
-            .returns({matches: false});
+            .returns({matches: false, onchange: null});
+
           element2 = new ElementClass();
           element2.ampdoc_ = env.ampdoc;
+
+          requestMeasureStub = env.sandbox.stub(
+            Resource.prototype,
+            'requestMeasure'
+          );
+        });
+
+        it('should not request remeasure when no media attributes', () => {
+          doc.body.appendChild(element1);
+          expect(requestMeasureStub).to.not.be.called;
         });
 
         it('should not apply sizes when "disable-inline-width" is present', () => {
           element1.setAttribute('disable-inline-width', null);
           element1.setAttribute('sizes', '(min-width: 1px) 200px, 50vw');
-          element1.applySizesAndMediaQuery();
+          doc.body.appendChild(element1);
           expect(element1.style.width).not.to.equal('200px');
+          expect(requestMeasureStub).to.not.be.called;
         });
 
         it('should apply media condition', () => {
           element1.setAttribute('media', '(min-width: 1px)');
-          element1.applySizesAndMediaQuery();
+          doc.body.appendChild(element1);
           expect(element1).to.not.have.class('i-amphtml-hidden-by-media-query');
+          expect(requestMeasureStub).to.be.calledOnce;
 
           element2.setAttribute('media', '(min-width: 1111111px)');
-          element2.applySizesAndMediaQuery();
+          doc.body.appendChild(element2);
           expect(element2).to.have.class('i-amphtml-hidden-by-media-query');
+          expect(requestMeasureStub).to.be.calledTwice;
+        });
+
+        it('should re-apply media condition', () => {
+          element1.setAttribute('media', '(min-width: 1px)');
+          doc.body.appendChild(element1);
+          expect(element1).to.not.have.class('i-amphtml-hidden-by-media-query');
+          expect(requestMeasureStub).to.be.calledOnce;
+
+          matchMinWidth1px.matches = false;
+          matchMinWidth1px.onchange();
+          expect(element1).to.have.class('i-amphtml-hidden-by-media-query');
+          expect(requestMeasureStub).to.be.calledTwice;
         });
 
         it('should apply sizes condition', () => {
           element1.setAttribute('sizes', '(min-width: 1px) 200px, 50vw');
-          element1.applySizesAndMediaQuery();
+          doc.body.appendChild(element1);
           expect(element1.style.width).to.equal('200px');
+          expect(requestMeasureStub).to.be.calledOnce;
 
           element2.setAttribute('sizes', '(min-width: 1111111px) 200px, 50vw');
-          element2.applySizesAndMediaQuery();
+          doc.body.appendChild(element2);
           expect(element2.style.width).to.equal('50vw');
+          expect(requestMeasureStub).to.be.calledTwice;
         });
 
         it('should apply heights condition', () => {
@@ -1143,8 +1408,9 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
           element1.setAttribute('height', '200px');
           element1.setAttribute('heights', '(min-width: 1px) 99%, 1%');
           container.appendChild(element1);
-          element1.applySizesAndMediaQuery();
+          doc.body.appendChild(element1);
           expect(element1.sizerElement.style.paddingTop).to.equal('99%');
+          expect(requestMeasureStub).to.be.calledOnce;
 
           element2.sizerElement = doc.createElement('div');
           element2.setAttribute('layout', 'responsive');
@@ -1152,40 +1418,9 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
           element2.setAttribute('height', '200px');
           element2.setAttribute('heights', '(min-width: 1111111px) 99%, 1%');
           container.appendChild(element2);
-          element2.applySizesAndMediaQuery();
+          doc.body.appendChild(element2);
           expect(element2.sizerElement.style.paddingTop).to.equal('1%');
-        });
-
-        it('should rediscover sizer to apply heights in SSR', () => {
-          element1.setAttribute('i-amphtml-layout', 'responsive');
-          element1.setAttribute('layout', 'responsive');
-          element1.setAttribute('width', '200px');
-          element1.setAttribute('height', '200px');
-          element1.setAttribute('heights', '(min-width: 1px) 99%, 1%');
-          container.appendChild(element1);
-
-          const sizer = doc.createElement('i-amphtml-sizer');
-          expect(element1.sizerElement).to.be.undefined;
-          element1.appendChild(sizer);
-          element1.applySizesAndMediaQuery();
-          expect(element1.sizerElement).to.equal(sizer);
-          expect(sizer.style.paddingTop).to.equal('99%');
-        });
-
-        it('should NOT rediscover sizer after reset in SSR', () => {
-          element1.setAttribute('i-amphtml-layout', 'responsive');
-          element1.setAttribute('layout', 'responsive');
-          element1.setAttribute('width', '200px');
-          element1.setAttribute('height', '200px');
-          element1.setAttribute('heights', '(min-width: 1px) 99%, 1%');
-          container.appendChild(element1);
-
-          const sizer = doc.createElement('i-amphtml-sizer');
-          element1.appendChild(sizer);
-          element1.sizerElement = null;
-          element1.applySizesAndMediaQuery();
-          expect(element1.sizerElement).to.be.null;
-          expect(sizer.style.paddingTop).to.equal('');
+          expect(requestMeasureStub).to.be.calledTwice;
         });
       });
 
@@ -1293,17 +1528,6 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         expect(intrinsicSizer.getAttribute('src')).to.equal('');
       });
 
-      it('should NOT apply media condition in template', () => {
-        const element1 = new ElementClass();
-        element1.setAttribute('media', '(min-width: 1px)');
-        element1.isInTemplate_ = true;
-        allowConsoleError(() => {
-          expect(() => {
-            element1.applySizesAndMediaQuery();
-          }).to.throw(/Must never be called in template/);
-        });
-      });
-
       it('should change size to zero', () => {
         const element = new ElementClass();
         element.applySize(0, 0);
@@ -1333,14 +1557,10 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
 
       it('should dispatch custom event size-changed when size changed', () => {
         const element = new ElementClass();
-        const spyDispatchEvent = env.sandbox.spy(
-          element,
-          'dispatchCustomEvent'
-        );
-
+        const spyDispatchEvent = env.sandbox.spy();
+        element.addEventListener(AmpEvents.SIZE_CHANGED, spyDispatchEvent);
         element.applySize();
-
-        expect(spyDispatchEvent).to.be.calledWith(AmpEvents.SIZE_CHANGED);
+        expect(spyDispatchEvent).to.be.calledOnce;
       });
 
       describe('unlayoutCallback', () => {
@@ -1350,16 +1570,20 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
           element.unlayoutCallback();
           expect(testElementUnlayoutCallback).to.have.not.been.called;
 
-          element.implementation_.layoutCallback = () => {
-            testElementLayoutCallback();
-            element.layoutCount_++;
-            return Promise.resolve();
-          };
+          env.sandbox
+            .stub(TestElement.prototype, 'layoutCallback')
+            .callsFake(() => {
+              testElementLayoutCallback();
+              element.layoutCount_++;
+              return Promise.resolve();
+            });
 
-          element.implementation_.unlayoutCallback = () => {
-            testElementUnlayoutCallback();
-            return true;
-          };
+          env.sandbox
+            .stub(TestElement.prototype, 'unlayoutCallback')
+            .callsFake(() => {
+              testElementUnlayoutCallback();
+              return true;
+            });
 
           // Built element receives unlayoutCallback.
           container.appendChild(element);
@@ -1372,15 +1596,22 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
 
         it('should not reset layoutCount if relayout not requested', () => {
           const element = new ElementClass();
-          element.implementation_.layoutCallback = () => {
-            testElementLayoutCallback();
-            element.layoutCount_++;
-            return Promise.resolve();
-          };
-          element.implementation_.unlayoutCallback = () => {
-            testElementUnlayoutCallback();
-            return false;
-          };
+
+          env.sandbox
+            .stub(TestElement.prototype, 'layoutCallback')
+            .callsFake(() => {
+              testElementLayoutCallback();
+              element.layoutCount_++;
+              return Promise.resolve();
+            });
+
+          env.sandbox
+            .stub(TestElement.prototype, 'unlayoutCallback')
+            .callsFake(() => {
+              testElementUnlayoutCallback();
+              return false;
+            });
+
           container.appendChild(element);
           return element.buildingPromise_.then(() => {
             element.layoutCallback();
@@ -1402,198 +1633,326 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
       describe('pauseCallback', () => {
         it('should not pause unbuilt element', () => {
           const element = new ElementClass();
-          expect(element.isPaused()).to.be.false;
-
-          // Non-built element doesn't receive pauseCallback.
-          element.pauseCallback();
-          expect(element.isPaused()).to.be.true;
+          expect(() => element.pause()).to.not.throw();
           expect(testElementPauseCallback).to.not.be.called;
         });
 
-        it('should pause upgraded element', () => {
+        it('should pause upgraded element', async () => {
           const element = new ElementClass();
-          element.viewportCallback(true);
           container.appendChild(element);
-          return element.buildingPromise_.then(() => {
-            expect(testElementViewportCallback).to.be.calledOnce;
-            expect(testElementViewportCallback).to.be.calledWith(true);
-            element.pauseCallback();
-            expect(testElementPauseCallback).to.be.calledOnce;
-            expect(testElementViewportCallback).to.be.calledTwice;
-            expect(testElementViewportCallback).to.be.calledWith(false);
-            expect(element.isPaused()).to.be.true;
-            expect(element.isInViewport()).to.be.false;
-          });
-        });
-
-        it('should only pause once', () => {
-          const element = new ElementClass();
-          container.appendChild(element);
-          return element.buildingPromise_.then(() => {
-            element.pauseCallback();
-            expect(testElementPauseCallback).to.be.calledOnce;
-            element.pauseCallback();
-            expect(testElementPauseCallback).to.be.calledOnce;
-            expect(element.isPaused()).to.be.true;
-          });
+          await element.buildInternal();
+          element.pause();
+          expect(testElementPauseCallback).to.be.calledOnce;
         });
 
         it('should pause stub element', () => {
           const element = new StubElementClass();
 
           // Unupgraded document doesn't receive pauseCallback.
-          element.pauseCallback();
+          element.pause();
           expect(testElementPauseCallback).to.have.not.been.called;
         });
+
+        it('should unload when pause with unlayoutOnPause', async () => {
+          const element = new ElementClass();
+          container.appendChild(element);
+          await element.buildInternal();
+          const impl = await element.getImpl();
+          env.sandbox.stub(impl, 'unlayoutOnPause').returns(true);
+          const resourceUnlayoutStub = env.sandbox.stub(
+            element.getResource_(),
+            'unlayout'
+          );
+
+          element.pause();
+          expect(testElementPauseCallback).to.be.calledOnce;
+          expect(resourceUnlayoutStub).to.be.calledOnce;
+        });
+
+        it('should pause and unlayout on unmount', async () => {
+          const element = new ElementClass();
+          container.appendChild(element);
+          await element.buildInternal();
+          const resourceUnlayoutStub = env.sandbox.stub(
+            element.getResource_(),
+            'unlayout'
+          );
+          const schedulePassStub = env.sandbox.stub(resources, 'schedulePass');
+
+          element.unmount();
+          expect(testElementPauseCallback).to.be.calledOnce;
+          expect(resourceUnlayoutStub).to.be.calledOnce;
+          expect(schedulePassStub).to.be.calledOnce;
+        });
+
+        it('should pause and unlayout on unmount with unlayoutOnPause', async () => {
+          const element = new ElementClass();
+          container.appendChild(element);
+          await element.buildInternal();
+          element.getResource_().layoutScheduled(Date.now());
+          const impl = await element.getImpl();
+          env.sandbox.stub(impl, 'unlayoutOnPause').returns(true);
+          const schedulePassStub = env.sandbox.stub(resources, 'schedulePass');
+
+          element.unmount();
+          expect(testElementPauseCallback).to.be.calledOnce;
+          expect(testElementUnlayoutCallback).to.be.calledOnce;
+          // `schedulePass` is triggered twice: once for pause and once for
+          // unlayout. However, it's benign because only one pass will be
+          // scheduled as a result.
+          expect(schedulePassStub).to.be.calledTwice;
+        });
+
+        it('should NOT schedule pass on unmount when disconnected', async () => {
+          const element = new ElementClass();
+          container.appendChild(element);
+          await element.buildInternal();
+          const resourceUnlayoutStub = env.sandbox.stub(
+            element.getResource_(),
+            'unlayout'
+          );
+          const schedulePassStub = env.sandbox.stub(resources, 'schedulePass');
+
+          container.removeChild(element);
+          element.unmount();
+          expect(testElementPauseCallback).to.be.calledOnce;
+          expect(resourceUnlayoutStub).to.be.calledOnce;
+          expect(schedulePassStub).to.not.be.called;
+        });
       });
 
       describe('resumeCallback', () => {
-        it('should resume upgraded element', () => {
+        it('should resume upgraded element', async () => {
           const element = new ElementClass();
-          element.pauseCallback();
+          element.pause();
 
           // Non-built element doesn't receive resumeCallback.
-          element.resumeCallback();
+          element.resume();
           expect(testElementResumeCallback).to.have.not.been.called;
 
           // Built element receives resumeCallback.
           container.appendChild(element);
-          return element.buildingPromise_.then(() => {
-            element.pauseCallback();
-            element.resumeCallback();
-            expect(testElementResumeCallback).to.be.calledOnce;
-          });
-        });
-
-        it('should resume upgraded element only once', () => {
-          const element = new ElementClass();
-          container.appendChild(element);
-          return element.buildingPromise_.then(() => {
-            element.pauseCallback();
-            element.resumeCallback();
-            expect(testElementResumeCallback).to.be.calledOnce;
-            element.resumeCallback();
-            expect(testElementResumeCallback).to.be.calledOnce;
-            expect(element.isPaused()).to.be.false;
-          });
+          await element.buildInternal();
+          element.pause();
+          element.resume();
+          expect(testElementResumeCallback).to.be.calledOnce;
         });
 
         it('should resume stub element', () => {
           const element = new StubElementClass();
 
           // Unupgraded document doesn't receive resumeCallback.
-          element.pauseCallback();
-          element.resumeCallback();
+          element.pause();
+          element.resume();
           expect(testElementResumeCallback).to.have.not.been.called;
         });
       });
 
-      describe('viewportCallback', () => {
-        it('Element should allow, but not delegate before build', () => {
-          const element = new ElementClass();
-          element.setAttribute('layout', 'fill');
-          expect(testElementViewportCallback).to.have.not.been.called;
-
-          expect(element.isBuilt()).to.equal(false);
-          element.viewportCallback(true);
-          expect(element.isInViewport()).to.equal(true);
-          expect(testElementViewportCallback).to.have.not.been.called;
+      describe('prerenderAllowed', () => {
+        it('should NOT be allowed for an upgraded element', () => {
+          const element = new StubElementClass();
+          expect(element.prerenderAllowed()).to.be.false;
         });
 
-        it('StubElement - should not delegate before build or upgrade', () => {
+        it('should be allowed base on the upgraded class', () => {
+          const stub = env.sandbox.stub(TestElement, 'prerenderAllowed');
           const element = new StubElementClass();
-          element.setAttribute('layout', 'fill');
-          expect(testElementViewportCallback).to.have.not.been.called;
+          element.upgrade(TestElement);
 
-          expect(element.isUpgraded()).to.equal(false);
-          expect(element.isBuilt()).to.equal(false);
-          element.viewportCallback(true);
-          expect(element.isInViewport()).to.equal(true);
-          expect(testElementViewportCallback).to.have.not.been.called;
+          stub.returns(false);
+          expect(element.prerenderAllowed()).to.be.false;
+
+          stub.returns(true);
+          expect(element.prerenderAllowed()).to.be.true;
+        });
 
-          resourcesMock.expects('upgraded').withExactArgs(element).never();
+        it('should NOT be allowed with noprerender attribute', () => {
+          env.sandbox.stub(TestElement, 'prerenderAllowed').returns(true);
+          const element = new StubElementClass();
           element.upgrade(TestElement);
+          expect(element.prerenderAllowed()).to.be.true;
 
-          expect(element.isUpgraded()).to.equal(false);
-          expect(element.isBuilt()).to.equal(false);
-          element.viewportCallback(false);
-          expect(element.isInViewport_).to.equal(false);
-          expect(testElementViewportCallback).to.have.not.been.called;
+          element.setAttribute('noprerender', '');
+          expect(element.prerenderAllowed()).to.be.false;
         });
+      });
 
-        it('Element - should be called once built', () => {
+      describe('ensureLoaded', () => {
+        it('should build and load', async () => {
           const element = new ElementClass();
-          element.setAttribute('layout', 'fill');
+          element.setAttribute('layout', 'fixed');
+          element.setAttribute('width', '10');
+          element.setAttribute('height', '10');
           container.appendChild(element);
-          return element.buildingPromise_.then(() => {
-            expect(element.isBuilt()).to.equal(true);
-            expect(testElementViewportCallback).to.have.not.been.called;
+          const resource = element.getResource_();
 
-            element.viewportCallback(true);
-            expect(element.implementation_.inViewport_).to.equal(true);
-            expect(testElementViewportCallback).to.be.calledOnce;
-          });
+          expect(element.isBuilt()).to.be.false;
+
+          const parentPriority = 1;
+          resourcesMock
+            .expects('scheduleLayoutOrPreload')
+            .withExactArgs(
+              resource,
+              /* layout */ true,
+              parentPriority,
+              /* forceOutsideViewport */ true
+            )
+            .once();
+
+          const promise = element.ensureLoaded(parentPriority);
+          await resource.build();
+          await resource.whenBuilt();
+          await element.layoutCallback();
+
+          await promise;
+          expect(element.isBuilt()).to.be.true;
         });
 
-        it('StubElement - should be called once upgraded', () => {
-          const element = new StubElementClass();
-          element.setAttribute('layout', 'fill');
+        it('should mount and load', async () => {
+          const element = new ElementClass();
+          element.setAttribute('layout', 'fixed');
+          element.setAttribute('width', '10');
+          element.setAttribute('height', '10');
           container.appendChild(element);
-          expect(element.isUpgraded()).to.be.false;
+          const resource = element.getResource_();
+
           expect(element.isBuilt()).to.be.false;
 
-          element.viewportCallback(true);
-          expect(element.implementation_.inViewport_).to.be.false;
-          expect(testElementViewportCallback).to.not.have.been.called;
+          const parentPriority = 1;
+          resourcesMock
+            .expects('scheduleLayoutOrPreload')
+            .withExactArgs(
+              resource,
+              /* layout */ true,
+              parentPriority,
+              /* forceOutsideViewport */ true
+            )
+            .once();
+
+          const promise = element.ensureLoaded(parentPriority);
+          await element.mount();
+          await resource.whenBuilt();
+          await element.layoutCallback();
+
+          await promise;
+          expect(element.isBuilt()).to.be.true;
+        });
 
-          element.upgrade(TestElement);
-          expect(element.implementation_.inViewport_).to.be.false;
-          return element.buildingPromise_.then(() => {
-            expect(element.implementation_.inViewport_).to.be.true;
-            expect(testElementViewportCallback).to.be.calledOnce;
-          });
+        it('should load pre-built element', async () => {
+          const element = new ElementClass();
+          element.setAttribute('layout', 'fixed');
+          element.setAttribute('width', '10');
+          element.setAttribute('height', '10');
+          container.appendChild(element);
+          const resource = element.getResource_();
+
+          await resource.build();
+          await resource.whenBuilt();
+          expect(element.isBuilt()).to.be.true;
+
+          const parentPriority = 1;
+          resourcesMock
+            .expects('scheduleLayoutOrPreload')
+            .withExactArgs(
+              resource,
+              /* layout */ true,
+              parentPriority,
+              /* forceOutsideViewport */ true
+            )
+            .once();
+
+          const promise = element.ensureLoaded(parentPriority);
+          await element.layoutCallback();
+          await promise;
         });
 
-        it('StubElement - should not upgrade before attach', () => {
-          const element = new StubElementClass();
-          element.setAttribute('layout', 'fill');
-          resourcesMock.expects('upgraded').withExactArgs(element).never();
-          element.upgrade(TestElement);
-          expect(element.isUpgraded()).to.equal(false);
-          expect(element.isBuilt()).to.equal(false);
-          expect(element.implementation_).to.be.instanceOf(TestElement);
-          expect(testElementViewportCallback).to.have.not.been.called;
+        it('should do nothing for already-loaded element', async () => {
+          const element = new ElementClass();
+          element.setAttribute('layout', 'fixed');
+          element.setAttribute('width', '10');
+          element.setAttribute('height', '10');
+          container.appendChild(element);
+          const resource = element.getResource_();
+
+          await resource.build();
+          await resource.whenBuilt();
+          resource.measure();
+          resource.layoutScheduled(Date.now());
+          await resource.startLayout();
+
+          resourcesMock.expects('scheduleLayoutOrPreload').never();
+
+          await element.ensureLoaded();
         });
 
-        it('Element - should be called on built if in viewport', () => {
+        it('should reload a previously failed element', async () => {
           const element = new ElementClass();
-          element.setAttribute('layout', 'fill');
-          element.viewportCallback(true);
-          expect(element.isInViewport_).to.equal(true);
-          expect(testElementViewportCallback).to.have.not.been.called;
+          element.setAttribute('layout', 'fixed');
+          element.setAttribute('width', '10');
+          element.setAttribute('height', '10');
+          container.appendChild(element);
+          const resource = element.getResource_();
+
+          await resource.build();
+          await resource.whenBuilt();
+          resource.measure();
+          resource.layoutScheduled(Date.now());
+          const layoutCallbackStub = env.sandbox.stub(
+            element,
+            'layoutCallback'
+          );
+          layoutCallbackStub.returns(Promise.reject(new Error('intentional')));
+          try {
+            await resource.startLayout();
+          } catch (e) {
+            // Expected.
+          }
 
+          layoutCallbackStub./*OK*/ restore();
+          resourcesMock
+            .expects('scheduleLayoutOrPreload')
+            .withExactArgs(
+              resource,
+              /* layout */ true,
+              /* parentPriority */ undefined,
+              /* forceOutsideViewport */ true
+            )
+            .once();
+
+          const promise = element.ensureLoaded();
+          await element.layoutCallback();
+          await promise;
+        });
+
+        it('should do nothing for a non-displayed element', async () => {
+          const element = new ElementClass();
+          element.setAttribute('layout', 'nodisplay');
           container.appendChild(element);
-          return element.buildingPromise_.then(() => {
-            expect(element.isInViewport_).to.equal(true);
-            expect(testElementViewportCallback).to.be.calledOnce;
-          });
+          const resource = element.getResource_();
+
+          await resource.build();
+          await resource.whenBuilt();
+
+          resourcesMock.expects('scheduleLayoutOrPreload').never();
+
+          await element.ensureLoaded();
         });
 
-        it('Element - should NOT be called in template', () => {
+        it('should remeasure if needed', async () => {
           const element = new ElementClass();
-          element.setAttribute('layout', 'fill');
+          element.setAttribute('layout', 'nodisplay');
           container.appendChild(element);
-          return element.build().then(() => {
-            expect(element.isBuilt()).to.equal(true);
-            expect(testElementViewportCallback).to.have.not.been.called;
+          const resource = element.getResource_();
 
-            element.isInTemplate_ = true;
-            allowConsoleError(() => {
-              expect(() => {
-                element.viewportCallback(true);
-              }).to.throw(/Must never be called in template/);
-            });
-          });
+          await resource.build();
+          await resource.whenBuilt();
+
+          const measureSpy = env.sandbox.spy(resource, 'measure');
+          resourcesMock.expects('scheduleLayoutOrPreload').never();
+
+          resource.requestMeasure();
+          await element.ensureLoaded();
+          expect(measureSpy).to.be.calledOnce;
         });
       });
     });
@@ -1609,7 +1968,7 @@ describes.realWin('CustomElement Service Elements', {amp: true}, (env) => {
     doc = win.document;
     StubElementClass = createAmpElementForTesting(win, ElementStub);
     win.customElements.define('amp-stub2', StubElementClass);
-    env.ampdoc.declareExtension('amp-stub2');
+    env.ampdoc.declareExtension('amp-stub2', '0.1');
     element = new StubElementClass();
   });
 
@@ -1702,6 +2061,33 @@ describes.realWin('CustomElement Service Elements', {amp: true}, (env) => {
     expect(element).to.not.have.class('amp-notsupported');
   });
 
+  it('toggleFallback should toggle unsupported class on R1 elements', () => {
+    element.resource = {
+      getState: () => {
+        return ResourceState.NOT_LAID_OUT;
+      },
+    };
+    element.resources_ = {
+      getResourceForElement: (element) => {
+        return element.resource;
+      },
+    };
+    element.R1 = () => {
+      return true;
+    };
+    element.getAmpDoc = () => doc;
+    const owners = Services.ownersForDoc(doc);
+    owners.scheduleLayout = env.sandbox.mock();
+    const fallback = element.appendChild(createWithAttr('fallback'));
+    element.toggleFallback(true);
+    expect(element).to.have.class('amp-notsupported');
+    expect(owners.scheduleLayout).to.be.calledOnce;
+    expect(owners.scheduleLayout).to.have.been.calledWith(element, fallback);
+
+    element.toggleFallback(false);
+    expect(element).to.not.have.class('amp-notsupported');
+  });
+
   it('toggleFallback should not display fallback before element layout', () => {
     let resourceState = ResourceState.NOT_LAID_OUT;
     element.resource = {
@@ -1760,14 +2146,10 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         }
       }
 
-      function stubInA4A(isInA4A) {
-        env.sandbox.stub(element, 'isInA4A').callsFake(() => isInA4A);
-      }
-
       beforeEach(() => {
         win = env.win;
         doc = win.document;
-        clock = lolex.install({target: win, now: 42});
+        clock = fakeTimers.withGlobal(win).install({now: 42});
         ElementClass = createAmpElementForTesting(win, TestElement);
         win.customElements.define('amp-test-loader', ElementClass);
         win.__AMP_EXTENDED_ELEMENTS['amp-test-loader'] = TestElement;
@@ -1798,330 +2180,162 @@ describes.realWin('CustomElement', {amp: true}, (env) => {
         resourcesMock.verify();
       });
 
-      it('should be enabled by default', () => {
-        stubInA4A(false);
-        expect(element.isLoadingEnabled_()).to.be.true;
-      });
-
-      it('should be disabled in A4A', () => {
-        stubInA4A(true);
-        expect(element.isLoadingEnabled_()).to.be.false;
-      });
-
-      it('should disable when explicitly disabled by the attribute', () => {
-        stubInA4A(false);
-        element.setAttribute('noloading', '');
-        expect(element.isLoadingEnabled_()).to.be.false;
-      });
-
-      it('should disable when element is not allowlisted', () => {
-        stubInA4A(false);
-        LOADING_ELEMENTS_['amp-test-loader'.toUpperCase()] = false;
-        expect(element.isLoadingEnabled_()).to.be.false;
-      });
-
-      it('should disable when not measured', () => {
-        stubInA4A(false);
-        element.layoutWidth_ = 0;
-        expect(element.isLoadingEnabled_()).to.be.false;
-      });
-
-      it('should disable when element has already been laid out', () => {
-        stubInA4A(false);
-        element.layoutCount_ = 1;
-        expect(element.isLoadingEnabled_()).to.be.false;
-      });
-
-      it('should disable when element is a placeholder itself', () => {
-        stubInA4A(false);
-        element.setAttribute('placeholder', '');
-        expect(element.isLoadingEnabled_()).to.be.false;
-      });
-
-      it('should disable when element is not sized', () => {
-        stubInA4A(false);
-        element.layout_ = Layout.CONTAINER;
-        expect(element.isLoadingEnabled_()).to.be.false;
-
-        element.layout_ = Layout.NODISPLAY;
-        expect(element.isLoadingEnabled_()).to.be.false;
-      });
-
-      it('should ignore loading-off if never created', () => {
-        stubInA4A(false);
-        element.toggleLoading(false);
-        expect(element.loadingElement_).to.be.null;
-      });
-
-      it('should ignore loading-on if not allowed', () => {
-        stubInA4A(false);
-        element.setAttribute('noloading', '');
-        element.toggleLoading(true);
-        expect(element.loadingElement_).to.be.null;
-      });
-
-      it('should ignore loading-on if already rendered', () => {
-        stubInA4A(false);
-        clock.tick(1);
-        element.signals().signal(CommonSignals.RENDER_START);
-        element.toggleLoading(true);
-        expect(element.loadingElement_).to.be.null;
-      });
-
-      it('should ignore loading-on if already loaded', () => {
-        stubInA4A(false);
-        element.layoutCount_ = 1;
-        element.toggleLoading(true);
-        expect(element.loadingElement_).to.be.null;
-      });
+      describe('toggleLoading', () => {
+        let loadingIndicatorServiceStub;
 
-      it('should cancel loading on render-start', () => {
-        stubInA4A(false);
-        clock.tick(1);
-        const stub = env.sandbox.stub(element, 'toggleLoading');
-        element.renderStarted();
-        expect(element.signals().get(CommonSignals.RENDER_START)).to.be.ok;
-        expect(stub).to.be.calledOnce;
-        expect(stub.args[0][0]).to.be.false;
-      });
-
-      it('should create and turn on', () => {
-        stubInA4A(false);
-        element.setAttribute('layout', 'fill');
-        container.appendChild(element);
-        element.toggleLoading(true);
-
-        expect(element.loadingContainer_).to.not.be.null;
-        expect(element.loadingContainer_).to.not.have.class('amp-hidden');
-        expect(element.loadingElement_).to.not.be.null;
-        expect(element.loadingElement_).to.have.class('amp-active');
-      });
+        beforeEach(() => {
+          loadingIndicatorServiceStub = {
+            track: env.sandbox.spy(),
+            untrack: env.sandbox.spy(),
+          };
+          env.sandbox.stub(element, 'getAmpDoc').returns({});
+          env.sandbox
+            .stub(Services, 'loadingIndicatorOrNull')
+            .returns(loadingIndicatorServiceStub);
+        });
 
-      it('should turn on already created', () => {
-        stubInA4A(false);
-        element.setAttribute('layout', 'fill');
-        container.appendChild(element);
-        element.prepareLoading_();
-        const {
-          loadingContainer_: prevLoadingContainer,
-          loadingElement_: prevLoadingElement_,
-        } = element;
-        element.toggleLoading(true);
+        it('should be enabled by default', () => {
+          element.toggleLoading(true);
+          expect(loadingIndicatorServiceStub.track).to.be.calledOnce.calledWith(
+            element
+          );
+        });
 
-        expect(element.loadingContainer_).to.equal(prevLoadingContainer);
-        expect(element.loadingContainer_).to.not.have.class('amp-hidden');
-        expect(element.loadingElement_).to.equal(prevLoadingElement_);
-        expect(element.loadingElement_).to.have.class('amp-active');
-      });
+        it('should disable when explicitly disabled by the attribute', () => {
+          element.setAttribute('noloading', '');
+          element.toggleLoading(true);
+          expect(loadingIndicatorServiceStub.track).to.not.be.called;
+        });
 
-      it('should turn off', () => {
-        stubInA4A(false);
-        element.setAttribute('layout', 'fill');
-        container.appendChild(element);
-        element.prepareLoading_();
-        element.toggleLoading(false);
+        it('should disable when element is not allowlisted', () => {
+          LOADING_ELEMENTS_['amp-test-loader'.toUpperCase()] = false;
+          element.toggleLoading(true);
+          expect(loadingIndicatorServiceStub.track).to.not.be.called;
+        });
 
-        expect(element.loadingContainer_).to.not.be.null;
-        expect(element.loadingContainer_).to.have.class('amp-hidden');
-        expect(element.loadingElement_).to.not.be.null;
-        expect(element.loadingElement_).to.not.have.class('amp-active');
-      });
+        it('should disable when element has already been laid out', () => {
+          element.layoutCount_ = 1;
+          element.toggleLoading(true);
+          expect(loadingIndicatorServiceStub.track).to.not.be.called;
+        });
 
-      it('should turn off and cleanup', () => {
-        stubInA4A(false);
-        element.setAttribute('layout', 'fill');
-        container.appendChild(element);
-        element.prepareLoading_();
-        element.toggleLoading(false, {cleanup: true});
+        it('should disable when element is a placeholder itself', () => {
+          element.setAttribute('placeholder', '');
+          element.toggleLoading(true);
+          expect(loadingIndicatorServiceStub.track).to.not.be.called;
+        });
 
-        expect(element.loadingContainer_).to.be.null;
-        expect(element.loadingElement_).to.be.null;
-      });
+        it('should disable when element is layout=nodisplay', () => {
+          element.layout_ = Layout.NODISPLAY;
+          element.toggleLoading(true);
+          expect(loadingIndicatorServiceStub.track).to.not.be.called;
+        });
 
-      it('should NOT cleanup if re-used', () => {
-        stubInA4A(false);
-        element.setAttribute('layout', 'fill');
-        container.appendChild(element);
-        element.prepareLoading_();
-        env.sandbox
-          .stub(element.implementation_, 'isLoadingReused')
-          .callsFake(() => true);
-        element.toggleLoading(false, {cleanup: true});
+        it('should enable when element is layout=container', () => {
+          element.layout_ = Layout.CONTAINER;
+          element.toggleLoading(true);
+          expect(loadingIndicatorServiceStub.track).to.be.calledOnce;
+        });
 
-        expect(element.loadingContainer_).to.not.be.null;
-        expect(element.loadingElement_).to.not.be.null;
-      });
+        it('should ignore loading-on if already rendered', () => {
+          clock.tick(1);
+          element.signals().signal(CommonSignals.RENDER_START);
+          element.toggleLoading(true);
+          expect(loadingIndicatorServiceStub.track).to.not.be.called;
+        });
 
-      it('should ignore loading-off if never created', () => {
-        stubInA4A(false);
-        element.isInTemplate_ = true;
-        allowConsoleError(() => {
-          expect(() => {
-            element.toggleLoading(false);
-          }).to.throw(/Must never be called in template/);
+        it('should ignore loading-on if already loaded', () => {
+          element.layoutCount_ = 1;
+          element.toggleLoading(true);
+          expect(loadingIndicatorServiceStub.track).to.not.be.called;
         });
-      });
 
-      it('should turn off when exits viewport', () => {
-        stubInA4A(false);
-        element.isInViewport_ = true;
-        const toggle = env.sandbox.spy(element, 'toggleLoading');
-        element.viewportCallback(false);
-        expect(toggle).to.be.calledOnce;
-        expect(toggle.firstCall.args[0]).to.equal(false);
-        expect(toggle.firstCall.args[1]).to.be.undefined;
-      });
+        it('should cancel loading on render-start', () => {
+          clock.tick(1);
+          const stub = env.sandbox.stub(element, 'toggleLoading');
+          element.renderStarted();
+          expect(element.signals().get(CommonSignals.RENDER_START)).to.be.ok;
+          expect(stub).to.be.calledOnce.calledWith(false);
+        });
 
-      it('should NOT turn off when exits viewport but already laid out', () => {
-        stubInA4A(false);
-        const toggle = env.sandbox.spy(element, 'toggleLoading');
-        element.layoutCount_ = 1;
-        element.viewportCallback(false);
-        expect(toggle).to.have.not.been.called;
+        it('should untrack when toggled off', () => {
+          element.toggleLoading(false);
+          expect(
+            loadingIndicatorServiceStub.untrack
+          ).to.be.calledOnce.calledWith(element);
+        });
       });
 
-      it('should turn on when enters viewport, after a 100ms delay', () => {
-        stubInA4A(false);
-        const toggle = env.sandbox.spy(element, 'toggleLoading');
-        element.setAttribute('layout', 'fill');
-        container.appendChild(element);
-        element.viewportCallback(true);
-        clock.tick(99);
-        expect(toggle).not.called;
-        clock.tick(100);
-        expect(toggle).calledOnceWith(true, {startTime: 42});
-      });
-
-      it('should not schedule it to turn on if already laid out when enters viewport', () => {
-        stubInA4A(false);
-        const timerDelay = env.sandbox.spy(Services.timerFor(win), 'delay');
-        const toggle = env.sandbox.spy(element, 'toggleLoading');
-        element.layoutCount_ = 1;
-        element.viewportCallback(true);
-        clock.tick(1000);
-
-        expect(timerDelay).to.have.not.been.called;
-        expect(toggle).to.have.not.been.called;
-      });
-
-      it('should NOT turn on when enters viewport but already laid out', () => {
-        stubInA4A(false);
-        const timerDelay = env.sandbox.spy(Services.timerFor(win), 'delay');
-        const toggle = env.sandbox.spy(element, 'toggleLoading');
-        element.viewportCallback(true);
-        element.layoutCount_ = 1;
-        clock.tick(1000);
-        expect(timerDelay).to.have.been.called;
-        expect(toggle).to.have.not.been.called;
-      });
-
-      it('should not start loading when measured if already in viewport', () => {
-        stubInA4A(false);
-        const toggle = env.sandbox.spy(element, 'toggleLoading');
-        element.isInViewport_ = true;
-        element.setAttribute('layout', 'fill');
-        container.appendChild(element);
-        element.updateLayoutBox({top: 0, width: 300});
-        expect(toggle).to.not.be.called;
-      });
+      describe('toggleLoading with layout', () => {
+        let toggle;
 
-      it('should toggle loading off after layout complete', () => {
-        stubInA4A(false);
-        const toggle = env.sandbox.spy(element, 'toggleLoading');
-        element.setAttribute('height', '10');
-        element.setAttribute('width', '10');
-        container.appendChild(element);
-        return element.buildingPromise_
-          .then(() => {
-            return element.layoutCallback();
-          })
-          .then(() => {
-            expect(toggle).to.be.calledOnce;
-            expect(toggle.firstCall.args[0]).to.equal(false);
-            expect(toggle.firstCall.args[1].cleanup).to.equal(true);
-          });
-      });
+        beforeEach(() => {
+          toggle = env.sandbox.spy(element, 'toggleLoading');
+        });
 
-      it('should toggle loading off after layout failed', () => {
-        stubInA4A(false);
-        const toggle = env.sandbox.spy(element, 'toggleLoading');
-        env.sandbox
-          .stub(element.implementation_, 'layoutCallback')
-          .callsFake(() => {
-            return Promise.reject();
-          });
-        element.setAttribute('height', '10');
-        element.setAttribute('width', '10');
-        container.appendChild(element);
-        return element.buildingPromise_
-          .then(() => {
-            return element.layoutCallback();
-          })
-          .then(
-            () => {
-              throw new Error('Must have failed.');
-            },
-            () => {
-              expect(toggle).to.be.calledOnce;
-              expect(toggle.firstCall.args[0]).to.equal(false);
-              expect(toggle.firstCall.args[1].cleanup).to.equal(true);
-            }
-          );
-      });
+        it('should toggle loading off after layout complete', () => {
+          element.setAttribute('height', '10');
+          element.setAttribute('width', '10');
+          container.appendChild(element);
+          return element.buildingPromise_
+            .then(() => {
+              toggle.resetHistory();
+              return element.layoutCallback();
+            })
+            .then(() => {
+              expect(toggle).to.be.calledTwice;
+              expect(toggle.firstCall).calledWith(true);
+              expect(toggle.secondCall).calledWith(false);
+            });
+        });
 
-      it('should disable toggle loading on after layout failed', () => {
-        stubInA4A(false);
-        const prepareLoading = env.sandbox.spy(element, 'prepareLoading_');
-        env.sandbox
-          .stub(element.implementation_, 'layoutCallback')
-          .callsFake(() => {
-            return Promise.reject();
-          });
-        element.setAttribute('height', '10');
-        element.setAttribute('width', '10');
-        container.appendChild(element);
-        return element.buildingPromise_
-          .then(() => {
-            expect(element.layoutCount_).to.equal(0);
-            expect(element.isLoadingEnabled_()).to.equal(true);
-            return element.layoutCallback();
-          })
-          .then(
-            () => {
-              throw new Error('Must have failed.');
-            },
-            () => {
-              expect(element.layoutCount_).to.equal(1);
-              expect(element.isLoadingEnabled_()).to.equal(false);
-              element.toggleLoading(true);
-              expect(prepareLoading).to.not.have.been.called;
-            }
-          );
-      });
+        it('should toggle loading off after layout failed', () => {
+          env.sandbox
+            .stub(TestElement.prototype, 'layoutCallback')
+            .returns(Promise.reject());
+          element.setAttribute('height', '10');
+          element.setAttribute('width', '10');
+          container.appendChild(element);
+          return element.buildingPromise_
+            .then(() => {
+              toggle.resetHistory();
+              return element.layoutCallback();
+            })
+            .then(
+              () => {
+                throw new Error('Must have failed.');
+              },
+              () => {
+                expect(toggle).to.be.calledTwice;
+                expect(toggle.firstCall).calledWith(true);
+                expect(toggle.secondCall).calledWith(false);
+              }
+            );
+        });
 
-      // TODO(jridgewell): fix this test
-      it.skip('should ignore loading "on" if layout completed before vsync', () => {
-        stubInA4A(false);
-        resourcesMock.expects('mutateElement').once();
-        container.appendChild(element);
-        element.prepareLoading_();
-        element.toggleLoading(true);
-        return element
-          .build()
-          .then(() => {
-            return element.layoutCallback();
-          })
-          .then(() => {
-            // The first mutate started by toggleLoading(true), but it must
-            // immediately proceed to switch it to off.
-            // vsyncTasks.shift()();
-            expect(element.loadingContainer_).to.have.class('amp-hidden');
-            expect(element.loadingElement_).to.not.have.class('amp-active');
-
-            // Second vsync should perform cleanup.
-            // vsyncTasks.shift()();
-            expect(element.loadingContainer_).to.be.null;
-          });
+        it('should disable toggle loading on after layout failed', () => {
+          env.sandbox
+            .stub(TestElement.prototype, 'layoutCallback')
+            .returns(Promise.reject());
+          element.setAttribute('height', '10');
+          element.setAttribute('width', '10');
+          container.appendChild(element);
+          return element.buildingPromise_
+            .then(() => {
+              expect(element.layoutCount_).to.equal(0);
+              expect(element.isLoadingEnabled_()).to.equal(true);
+              return element.layoutCallback();
+            })
+            .then(
+              () => {
+                throw new Error('Must have failed.');
+              },
+              () => {
+                expect(element.layoutCount_).to.equal(1);
+                expect(element.isLoadingEnabled_()).to.equal(false);
+              }
+            );
+        });
       });
     });
 });
diff --git a/test/unit/test-describes.js b/test/unit/test-describes.js
index e83c0b3d6b0f7..344db06293747 100644
--- a/test/unit/test-describes.js
+++ b/test/unit/test-describes.js
@@ -15,7 +15,7 @@
  */
 
 // Test `fetch-mock` integration in describes.
-describe('fetch-mock', () => {
+describes.sandboxed('fetch-mock', {}, () => {
   /** @param {!Object} env */
   function runTests(env) {
     it('should mock fetches', () => {
@@ -33,23 +33,35 @@ describe('fetch-mock', () => {
     });
   }
 
-  describes.realWin(
-    'on realWin',
-    {
-      mockFetch: true,
-    },
-    (env) => {
-      runTests(env);
-    }
-  );
-
-  describes.fakeWin(
-    'on fakeWin',
-    {
-      mockFetch: true,
-    },
-    (env) => {
-      runTests(env);
-    }
-  );
+  describes.realWin('on realWin', {mockFetch: true}, (env) => {
+    runTests(env);
+  });
+
+  describes.fakeWin('on fakeWin', {mockFetch: true}, (env) => {
+    runTests(env);
+  });
+});
+
+function runConfiguredDescribe() {
+  describe.configure().run('configure describe', () => {
+    it.configure().run('configure it', () => {
+      expect(2 + 2).to.equal(4);
+    });
+  });
+}
+
+describes.sandboxed.configure().run('configure sandboxed', {}, () => {
+  runConfiguredDescribe();
+});
+
+describes.fakeWin.configure().run('configure fakeWin', {}, () => {
+  runConfiguredDescribe();
+});
+
+describes.realWin.configure().run('configure realWin', {}, () => {
+  runConfiguredDescribe();
+});
+
+describes.integration.configure().run('configure integration', {}, () => {
+  runConfiguredDescribe();
 });
diff --git a/test/unit/test-document-info.js b/test/unit/test-document-info.js
index a0bffc556a4ec..9e184e726ef05 100644
--- a/test/unit/test-document-info.js
+++ b/test/unit/test-document-info.js
@@ -21,12 +21,12 @@ import {createIframePromise} from '../../testing/iframe';
 import {installDocService} from '../../src/service/ampdoc-impl';
 import {installDocumentInfoServiceForDoc} from '../../src/service/document-info-impl';
 
-describe
+describes.sandboxed
   .configure()
   .skipFirefox()
-  .run('document-info', () => {
+  .run('document-info', {}, (env) => {
     beforeEach(() => {
-      window.sandbox.stub(CID, 'getRandomString64').returns('abcdef');
+      env.sandbox.stub(CID, 'getRandomString64').returns('abcdef');
     });
 
     function getWin(links, metas) {
@@ -55,7 +55,7 @@ describe
         }
         const {win} = iframe;
         installDocService(win, /* isSingleDoc */ true);
-        window.sandbox.stub(win.Math, 'random').callsFake(() => 0.123456789);
+        env.sandbox.stub(win.Math, 'random').callsFake(() => 0.123456789);
         win.__AMP_SERVICES.documentInfo = null;
         installDocumentInfoServiceForDoc(win.document);
         return iframe.win;
diff --git a/test/unit/test-document-submit.js b/test/unit/test-document-submit.js
index 20d68e4880031..6f84581ff4463 100644
--- a/test/unit/test-document-submit.js
+++ b/test/unit/test-document-submit.js
@@ -31,25 +31,16 @@ describes.sandboxed('test-document-submit', {}, (env) => {
       ampdoc = {
         getHeadNode: () => headNode,
         getRootNode: () => rootNode,
-        waitForBodyOpen: () => Promise.resolve({}),
+        whenExtensionsKnown: () => Promise.resolve(),
+        declaresExtension: () => false,
       };
     });
 
-    /**
-     * @param {string} extension
-     */
-    const createScript = (extension) => {
-      const script = document.createElement('script');
-      script.setAttribute(
-        'src',
-        'https://cdn.ampproject.org/v0/' + extension + '-0.1.js'
-      );
-      script.setAttribute('custom-element', extension);
-      return script;
-    };
-
     it('should not register submit listener if amp-form is not registered.', () => {
-      ampdoc.getHeadNode().appendChild(createScript('amp-list'));
+      env.sandbox
+        .stub(ampdoc, 'declaresExtension')
+        .withArgs('amp-form')
+        .returns(false);
       env.sandbox.spy(rootNode, 'addEventListener');
       return installGlobalSubmitListenerForDoc(ampdoc).then(() => {
         expect(rootNode.addEventListener).not.to.have.been.called;
@@ -57,7 +48,10 @@ describes.sandboxed('test-document-submit', {}, (env) => {
     });
 
     it('should register submit listener if amp-form extension is registered.', () => {
-      ampdoc.getHeadNode().appendChild(createScript('amp-form'));
+      env.sandbox
+        .stub(ampdoc, 'declaresExtension')
+        .withArgs('amp-form')
+        .returns(true);
       env.sandbox.spy(rootNode, 'addEventListener');
       return installGlobalSubmitListenerForDoc(ampdoc).then(() => {
         expect(rootNode.addEventListener).called;
diff --git a/test/unit/test-dom.js b/test/unit/test-dom.js
index 441732cc0ba6c..b5140674edaef 100644
--- a/test/unit/test-dom.js
+++ b/test/unit/test-dom.js
@@ -17,10 +17,11 @@
 import * as dom from '../../src/dom';
 import {BaseElement} from '../../src/base-element';
 import {createAmpElementForTesting} from '../../src/custom-element';
+import {isElement} from '../../src/core/types';
 import {loadPromise} from '../../src/event-helper';
-import {setScopeSelectorSupportedForTesting} from '../../src/css';
-import {setShadowDomSupportedVersionForTesting} from '../../src/web-components';
-import {toArray} from '../../src/types';
+import {setScopeSelectorSupportedForTesting} from '../../src/core/dom/css';
+import {setShadowDomSupportedVersionForTesting} from '../../src/core/dom/web-components';
+import {toArray} from '../../src/core/types/array';
 
 describes.sandboxed('DOM', {}, (env) => {
   afterEach(() => {
@@ -250,7 +251,7 @@ describes.sandboxed('DOM', {}, (env) => {
     element.appendChild(text);
 
     expect(dom.closestNode(text, () => true)).to.equal(text);
-    expect(dom.closestNode(text, (n) => n.nodeType == 1)).to.equal(element);
+    expect(dom.closestNode(text, isElement)).to.equal(element);
     expect(dom.closestNode(text, (n) => n.nodeType == 11)).to.equal(fragment);
   });
 
@@ -1105,13 +1106,13 @@ describes.sandboxed('DOM', {}, (env) => {
   describe('matches', () => {
     let div, img1, iframe, ampEl;
     beforeEach(() => {
-      ampEl = document.createElement('amp-ad');
+      ampEl = document.createElement('x-ad');
       ampEl.className = 'i-amphtml-element';
       ampEl.id = 'ampEl';
       iframe = document.createElement('iframe');
       div = document.createElement('div');
       div.id = 'div';
-      img1 = document.createElement('amp-img');
+      img1 = document.createElement('x-img');
       img1.id = 'img1';
       div.appendChild(img1);
       iframe.srcdoc = div.outerHTML;
@@ -1197,6 +1198,26 @@ describes.sandboxed('DOM', {}, (env) => {
     }
   );
 
+  it('should implement containsNotSelf', () => {
+    const parent = document.createElement('div');
+    const child = document.createElement('div');
+    const uncle = document.createElement('div');
+    const grandparent = document.createElement('div');
+    grandparent.appendChild(parent);
+    grandparent.appendChild(uncle);
+    parent.appendChild(child);
+
+    expect(dom.containsNotSelf(grandparent, grandparent)).to.be.false;
+    expect(dom.containsNotSelf(grandparent, parent)).to.be.true;
+    expect(dom.containsNotSelf(grandparent, uncle)).to.be.true;
+    expect(dom.containsNotSelf(grandparent, child)).to.be.true;
+
+    expect(dom.containsNotSelf(parent, parent)).to.be.false;
+    expect(dom.containsNotSelf(parent, uncle)).to.be.false;
+    expect(dom.containsNotSelf(parent, grandparent)).to.be.false;
+    expect(dom.containsNotSelf(parent, child)).to.be.true;
+  });
+
   describe('domOrderComparator', () => {
     it('should sort elements by dom order', () => {
       //
@@ -1333,5 +1354,28 @@ describes.realWin(
         expect(el.getAttribute('foo')).to.equal('asdf');
       });
     });
+
+    describe('parseBooleanAttribute', () => {
+      it('should return null for null/undefined', () => {
+        expect(dom.parseBooleanAttribute(null)).to.be.undefined;
+        expect(dom.parseBooleanAttribute(undefined)).to.be.undefined;
+      });
+
+      it('should return true for empty string', () => {
+        expect(dom.parseBooleanAttribute('')).to.be.true;
+      });
+
+      it('should return true for "true" string', () => {
+        expect(dom.parseBooleanAttribute('true')).to.be.true;
+      });
+
+      it('should return false for "false" string', () => {
+        expect(dom.parseBooleanAttribute('false')).to.be.false;
+      });
+
+      it('should return true for a random string', () => {
+        expect(dom.parseBooleanAttribute('a')).to.be.true;
+      });
+    });
   }
 );
diff --git a/test/unit/test-element-service.js b/test/unit/test-element-service.js
index bba810f0b3f66..a6a9741cdcb91 100644
--- a/test/unit/test-element-service.js
+++ b/test/unit/test-element-service.js
@@ -14,141 +14,125 @@
  * limitations under the License.
  */
 
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {FakeWindow} from '../../testing/fake-dom';
 import {Services} from '../../src/services';
+import {createElementWithAttributes} from '../../src/dom';
 import {
-  getElementService,
   getElementServiceForDoc,
   getElementServiceIfAvailable,
   getElementServiceIfAvailableForDoc,
   getElementServiceIfAvailableForDocInEmbedScope,
-  isExtensionScriptInNode,
 } from '../../src/element-service';
 import {
-  installServiceInEmbedScope,
+  installServiceInEmbedDoc,
   registerServiceBuilder,
   registerServiceBuilderForDoc,
-  resetServiceForTesting,
   setParentWindow,
 } from '../../src/service';
-import {
-  markElementScheduledForTesting,
-  resetScheduledElementForTesting,
-} from '../../src/service/custom-element-registry';
 
-describe('getElementServiceIfAvailable()', () => {
-  let doc;
-  let win;
-  let setIntervalCallback;
+describes.realWin('getElementServiceIfAvailable()', {amp: true}, (env) => {
+  let win, doc;
+  let extensionsMock;
+  let clock;
 
   beforeEach(() => {
-    doc = {
-      head: {},
-      body: {},
-    };
-    doc.documentElement = {ownerDocument: doc};
-    doc.getHeadNode = () => doc.head;
-    doc.head.querySelectorAll = () => [];
-
-    win = {
-      document: doc,
-      setInterval: (callback) => {
-        setIntervalCallback = callback;
-      },
-      clearInterval: () => {},
-    };
-    doc.defaultView = win;
+    win = env.win;
+    doc = env.win.document;
+    clock = fakeTimers.withGlobal(win).install();
 
-    resetServiceForTesting(win, 'e1');
-    resetScheduledElementForTesting(win, 'element-1');
+    extensionsMock = env.sandbox.mock(Services.extensionsFor(win));
   });
 
   afterEach(() => {
-    setIntervalCallback = undefined;
+    clock.uninstall();
+    extensionsMock.verify();
   });
 
-  it('should wait for doc ready when not available', () => {
-    doc.body = null; // Body not available
+  it('should wait for body', async () => {
+    const {body} = doc;
+    doc.documentElement.removeChild(body);
     let resolvedService;
-    const p1 = getElementServiceIfAvailable(win, 'e1', 'element-1').then(
+    const p1 = getElementServiceIfAvailable(win, 'e1', 'element1', '0.1').then(
       (service) => {
         resolvedService = service;
         return service;
       }
     );
-    return Promise.resolve()
-      .then(() => {
-        expect(setIntervalCallback).to.exist;
-        expect(resolvedService).to.be.undefined;
-
-        // Resolve body.
-        doc.body = {};
-        setIntervalCallback();
-        return p1;
-      })
-      .then((service) => {
-        expect(resolvedService).to.be.null;
-        expect(service).to.be.null;
-      });
-  });
 
-  it('should resolve with body when not available', () => {
-    doc.body = {}; // Body is available
-    const p1 = getElementServiceIfAvailable(win, 'e1', 'element-1');
-    return Promise.resolve()
-      .then(() => {
-        expect(setIntervalCallback).to.be.undefined;
-        return p1;
-      })
-      .then((service) => {
-        expect(service).to.be.null;
-      });
+    await Promise.resolve();
+    expect(resolvedService).to.be.undefined;
+
+    // Resolve body.
+    doc.documentElement.appendChild(body);
+    expect(doc.body).to.exist;
+    clock.tick(1000);
+
+    const service = await p1;
+    expect(resolvedService).to.be.null;
+    expect(service).to.be.null;
   });
 
-  it('should wait for body when available', () => {
-    doc.body = null; // Body not available
-    let resolvedService;
-    const p1 = getElementServiceIfAvailable(win, 'e1', 'element-1').then(
-      (service) => {
-        resolvedService = service;
-        return service;
-      }
+  it('should resolve with body when not available', async () => {
+    const service = await getElementServiceIfAvailable(
+      win,
+      'e1',
+      'element1',
+      '0.1'
     );
-    return Promise.resolve()
-      .then(() => {
-        expect(setIntervalCallback).to.exist;
-        expect(resolvedService).to.be.undefined;
-
-        // Resolve body.
-        markElementScheduledForTesting(win, 'element-1');
-        registerServiceBuilder(win, 'e1', function () {
-          return {str: 'fake1'};
-        });
-        doc.body = {};
-        setIntervalCallback();
-        return p1;
-      })
-      .then((service) => {
-        expect(resolvedService).to.deep.equal({str: 'fake1'});
-        expect(service).to.deep.equal({str: 'fake1'});
-      });
+    expect(service).to.be.null;
   });
 
-  it('should resolve with body when available', () => {
-    doc.body = {}; // Body is available
-    markElementScheduledForTesting(win, 'element-1');
-    const p1 = getElementServiceIfAvailable(win, 'e1', 'element-1');
-    return Promise.resolve()
-      .then(() => {
-        expect(setIntervalCallback).to.be.undefined;
-        registerServiceBuilder(win, 'e1', function () {
-          return {str: 'fake1'};
-        });
-        return p1;
-      })
-      .then((service) => {
-        expect(service).to.deep.equal({str: 'fake1'});
-      });
+  it('should resolve when available', async () => {
+    const script = createElementWithAttributes(doc, 'script', {
+      'custom-element': 'element1',
+    });
+    env.sandbox
+      .stub(script, 'src')
+      .value('https://cdn.ampproject.org/v0/element1-0.1.js');
+    doc.head.appendChild(script);
+
+    extensionsMock
+      .expects('waitForExtension')
+      .withExactArgs('element1', '0.1')
+      .returns(Promise.resolve({}))
+      .once();
+
+    const promise = getElementServiceIfAvailable(win, 'e1', 'element1', '0.1');
+
+    registerServiceBuilder(win, 'e1', function () {
+      return {str: 'fake1'};
+    });
+
+    const service = await promise;
+    expect(service).to.deep.equal({str: 'fake1'});
+  });
+
+  it('should not wait for the element-service', async () => {
+    const script = createElementWithAttributes(doc, 'script', {
+      'custom-element': 'element1',
+    });
+    env.sandbox
+      .stub(script, 'src')
+      .value('https://cdn.ampproject.org/v0/element1-0.1.js');
+    doc.head.appendChild(script);
+
+    extensionsMock
+      .expects('waitForExtension')
+      .withExactArgs('element1', '0.1')
+      .returns(Promise.resolve({}))
+      .once();
+
+    const promise = getElementServiceIfAvailable(
+      win,
+      'e1',
+      'element1',
+      '0.1',
+      true
+    );
+
+    const service = await promise;
+    expect(service).to.deep.be.null;
   });
 });
 
@@ -160,97 +144,91 @@ describes.realWin(
     },
   },
   (env) => {
-    let ampdoc;
+    let win, doc, ampdoc;
+    let extensionsMock;
 
     beforeEach(() => {
+      win = env.win;
+      doc = win.document;
       ampdoc = env.ampdoc;
-
-      resetServiceForTesting(env.win, 'e1');
-      resetScheduledElementForTesting(env.win, 'element-1');
-      resetScheduledElementForTesting(env.win, 'element-foo');
+      extensionsMock = env.sandbox.mock(Services.extensionsFor(win));
     });
 
-    describe('getElementService()', () => {
-      it('should be provided by element', () => {
-        markElementScheduledForTesting(env.win, 'element-1');
-        const p1 = getElementService(env.win, 'e1', 'element-1');
-        const p2 = getElementService(env.win, 'e1', 'element-1');
-
-        registerServiceBuilder(env.win, 'e1', function () {
-          return {str: 'from e1'};
-        });
-
-        return p1.then((s1) => {
-          expect(s1).to.deep.equal({str: 'from e1'});
-          return p2.then((s2) => {
-            expect(s1).to.equal(s2);
-          });
-        });
-      });
-
-      it('should fail if element is not in page.', () => {
-        expectAsyncConsoleError(
-          /e1 was requested to be provided through element-bar/
-        );
-        markElementScheduledForTesting(env.win, 'element-foo');
-
-        return getElementService(env.win, 'e1', 'element-bar')
-          .then(
-            () => {
-              return 'SUCCESS';
-            },
-            (error) => {
-              return 'ERROR ' + error;
-            }
-          )
-          .then((result) => {
-            expect(result).to.match(
-              /Service e1 was requested to be provided through element-bar/
-            );
-          });
-      });
+    afterEach(() => {
+      extensionsMock.verify();
     });
 
     describe('getElementServiceIfAvailable()', () => {
-      it('should be provided by element if available', () => {
-        markElementScheduledForTesting(env.win, 'element-1');
-        const p1 = getElementServiceIfAvailable(env.win, 'e1', 'element-1');
-        const p2 = getElementServiceIfAvailable(env.win, 'e2', 'not-available');
+      it('should be provided by element if available', async () => {
+        const script = createElementWithAttributes(doc, 'script', {
+          'custom-element': 'element1',
+        });
+        env.sandbox
+          .stub(script, 'src')
+          .value('https://cdn.ampproject.org/v0/element1-0.1.js');
+        doc.head.appendChild(script);
+
+        extensionsMock
+          .expects('waitForExtension')
+          .withExactArgs('element1', '0.1')
+          .returns(Promise.resolve({}))
+          .once();
+
+        const p1 = getElementServiceIfAvailable(
+          env.win,
+          'e1',
+          'element1',
+          '0.1'
+        );
+        const p2 = getElementServiceIfAvailable(
+          env.win,
+          'e2',
+          'not-available',
+          '0.1'
+        );
         registerServiceBuilder(env.win, 'e1', function () {
           return {str: 'from e1'};
         });
-        return p1.then((s1) => {
-          expect(s1).to.deep.equal({str: 'from e1'});
-          return p2.then((s2) => {
-            expect(s2).to.be.null;
-          });
-        });
+
+        const s1 = await p1;
+        expect(s1).to.deep.equal({str: 'from e1'});
+
+        const s2 = await p2;
+        expect(s2).to.be.null;
       });
     });
 
     describe('getElementServiceForDoc()', () => {
-      it('should be provided by element', () => {
-        markElementScheduledForTesting(env.win, 'element-1');
-        const p1 = getElementServiceForDoc(ampdoc, 'e1', 'element-1');
-        const p2 = getElementServiceForDoc(ampdoc, 'e1', 'element-1');
+      it('should be provided by element', async () => {
+        // Make sure that `whenExtensionsKnown` is observerd.
+        ampdoc.signals().reset('-ampdoc-ext-known');
+        extensionsMock
+          .expects('waitForExtension')
+          .withExactArgs('element1', '0.2')
+          .returns(Promise.resolve({}))
+          .twice();
+
+        const p1 = getElementServiceForDoc(ampdoc, 'e1', 'element1');
+        const p2 = getElementServiceForDoc(ampdoc, 'e1', 'element1');
+
+        ampdoc.declareExtension('element1', '0.2');
+        ampdoc.setExtensionsKnown();
 
         registerServiceBuilder(env.win, 'e1', function () {
           return {str: 'from e1'};
         });
 
-        return p1.then((s1) => {
-          expect(s1).to.deep.equal({str: 'from e1'});
-          return p2.then((s2) => {
-            expect(s1).to.equal(s2);
-          });
-        });
+        const s1 = await p1;
+        expect(s1).to.deep.equal({str: 'from e1'});
+
+        const s2 = await p2;
+        expect(s2).to.equal(s1);
       });
 
       it('should fail if element is not in page.', () => {
         expectAsyncConsoleError(
           /e1 was requested to be provided through element-bar/
         );
-        markElementScheduledForTesting(env.win, 'element-foo');
 
         return getElementServiceForDoc(ampdoc, 'e1', 'element-bar')
           .then(
@@ -270,136 +248,65 @@ describes.realWin(
     });
 
     describe('getElementServiceIfAvailableForDoc()', () => {
-      it('should be provided by element if available', () => {
-        markElementScheduledForTesting(env.win, 'element-1');
-        const p1 = getElementServiceIfAvailableForDoc(
-          ampdoc,
-          'e1',
-          'element-1'
-        );
+      it('should be provided by element if available', async () => {
+        // Make sure that `whenExtensionsKnown` is observerd.
+        ampdoc.signals().reset('-ampdoc-ext-known');
+        extensionsMock
+          .expects('waitForExtension')
+          .withExactArgs('element1', '0.2')
+          .returns(Promise.resolve({}))
+          .once();
+
+        const p1 = getElementServiceIfAvailableForDoc(ampdoc, 'e1', 'element1');
         const p2 = getElementServiceIfAvailableForDoc(
           ampdoc,
           'e2',
           'not-available'
         );
+
+        ampdoc.declareExtension('element1', '0.2');
+        ampdoc.setExtensionsKnown();
+
         registerServiceBuilder(env.win, 'e1', function () {
           return {str: 'from e1'};
         });
-        return p1.then((s1) => {
-          expect(s1).to.deep.equal({str: 'from e1'});
-          return p2.then((s2) => {
-            expect(s2).to.be.null;
-          });
-        });
-      });
 
-      it('should wait for body when not available', () => {
-        let bodyResolver;
-        ampdoc.bodyPromise_ = new Promise((resolve) => {
-          bodyResolver = resolve;
-        });
-        let resolvedService;
-        const p1 = getElementServiceIfAvailableForDoc(
-          ampdoc,
-          'e1',
-          'element-1'
-        ).then((service) => {
-          resolvedService = service;
-          return service;
-        });
-        return Promise.resolve()
-          .then(() => {
-            expect(resolvedService).to.be.undefined;
-
-            // Resolve body.
-            bodyResolver();
-            return p1;
-          })
-          .then((service) => {
-            expect(resolvedService).to.be.null;
-            expect(service).to.be.null;
-          });
+        const s1 = await p1;
+        expect(s1).to.deep.equal({str: 'from e1'});
+
+        const s2 = await p2;
+        expect(s2).to.be.null;
       });
 
-      it('resolve w/ body when not available', () => {
-        const p1 = getElementServiceIfAvailableForDoc(
+      it('resolve w/ body when not available', async () => {
+        const service = await getElementServiceIfAvailableForDoc(
           ampdoc,
           'e1',
-          'element-1'
+          'element1'
         );
-        return Promise.resolve()
-          .then(() => {
-            return p1;
-          })
-          .then((service) => {
-            expect(service).to.be.null;
-          });
+        expect(service).to.be.null;
       });
 
-      it('should wait for body when available', () => {
-        let bodyResolver;
-        ampdoc.bodyPromise_ = new Promise((resolve) => {
-          bodyResolver = resolve;
-        });
-        let resolvedService;
-        const p1 = getElementServiceIfAvailableForDoc(
-          ampdoc,
-          'e1',
-          'element-1'
-        ).then((service) => {
-          resolvedService = service;
-          return service;
-        });
-        return Promise.resolve()
-          .then(() => {
-            expect(resolvedService).to.be.undefined;
-
-            // Resolve body.
-            markElementScheduledForTesting(env.win, 'element-1');
-            registerServiceBuilder(env.win, 'e1', function () {
-              return {str: 'fake1'};
-            });
-            bodyResolver();
-            return p1;
-          })
-          .then((service) => {
-            expect(resolvedService).to.deep.equal({str: 'fake1'});
-            expect(service).to.deep.equal({str: 'fake1'});
-          });
-      });
+      it('should resolve with body when available', async () => {
+        // Make sure that `whenExtensionsKnown` is observerd.
+        ampdoc.signals().reset('-ampdoc-ext-known');
+        extensionsMock
+          .expects('waitForExtension')
+          .withExactArgs('element1', '0.2')
+          .returns(Promise.resolve({}))
+          .once();
 
-      it('should resolve with body when available', () => {
-        markElementScheduledForTesting(env.win, 'element-1');
-        const p1 = getElementServiceIfAvailableForDoc(
-          ampdoc,
-          'e1',
-          'element-1'
-        );
-        return Promise.resolve()
-          .then(() => {
-            registerServiceBuilder(env.win, 'e1', function () {
-              return {str: 'fake1'};
-            });
-            return p1;
-          })
-          .then((service) => {
-            expect(service).to.deep.equal({str: 'fake1'});
-          });
-      });
+        const p1 = getElementServiceIfAvailableForDoc(ampdoc, 'e1', 'element1');
 
-      it('isExtensionScriptInNode', () => {
-        const extension = document.createElement('script');
-        extension.setAttribute('custom-element', 'amp-form');
-        extension.setAttribute(
-          'src',
-          'https://cdn.ampproject.org/v0/amp-form-0.1.js'
-        );
-        ampdoc.getHeadNode().appendChild(extension);
-        return isExtensionScriptInNode(ampdoc, 'amp-form').then(
-          (ampFormInstalled) => {
-            expect(ampFormInstalled).to.equal(true);
-          }
-        );
+        ampdoc.declareExtension('element1', '0.2');
+        ampdoc.setExtensionsKnown();
+
+        registerServiceBuilder(env.win, 'e1', function () {
+          return {str: 'fake1'};
+        });
+
+        const service = await p1;
+        expect(service).to.deep.equal({str: 'fake1'});
       });
     });
   }
@@ -412,9 +319,12 @@ describes.fakeWin('in embed scope', {amp: true}, (env) => {
   let nodeInTopWin;
   let frameElement;
   let service;
+  let embedAmpDoc;
+  let extensionsMock;
 
   beforeEach(() => {
     win = env.win;
+    extensionsMock = env.sandbox.mock(Services.extensionsFor(win));
 
     frameElement = win.document.createElement('div');
     win.document.body.appendChild(frameElement);
@@ -423,7 +333,7 @@ describes.fakeWin('in embed scope', {amp: true}, (env) => {
     embedWin.frameElement = frameElement;
     setParentWindow(embedWin, win);
 
-    Services.ampdocServiceFor(win).installFieDoc(
+    embedAmpDoc = env.ampdocService.installFieDoc(
       'https://example.org',
       embedWin
     );
@@ -442,8 +352,12 @@ describes.fakeWin('in embed scope', {amp: true}, (env) => {
     service = {name: 'fake-service-object'};
   });
 
+  afterEach(() => {
+    extensionsMock.verify();
+  });
+
   it('should return existing service', () => {
-    installServiceInEmbedScope(embedWin, 'foo', service);
+    installServiceInEmbedDoc(embedAmpDoc, 'foo', service);
     return getElementServiceIfAvailableForDocInEmbedScope(
       nodeInEmbedWin,
       'foo',
@@ -453,21 +367,31 @@ describes.fakeWin('in embed scope', {amp: true}, (env) => {
     });
   });
 
-  it('should return service for scheduled element', () => {
-    markElementScheduledForTesting(embedWin, 'amp-foo');
+  it('should return service for scheduled element', async () => {
+    // Make sure that `whenExtensionsKnown` is observerd.
+    embedAmpDoc.signals().reset('-ampdoc-ext-known');
+    extensionsMock
+      .expects('waitForExtension')
+      .withExactArgs('amp-foo', '0.2')
+      .returns(Promise.resolve({}))
+      .once();
+
     const promise = getElementServiceIfAvailableForDocInEmbedScope(
       nodeInEmbedWin,
       'foo',
       'amp-foo'
     );
-    installServiceInEmbedScope(embedWin, 'foo', service);
-    return promise.then((returned) => {
-      expect(returned).to.equal(service);
-    });
+
+    embedAmpDoc.declareExtension('amp-foo', '0.2');
+    embedAmpDoc.setExtensionsKnown();
+
+    installServiceInEmbedDoc(embedAmpDoc, 'foo', service);
+
+    const returned = await promise;
+    expect(returned).to.equal(service);
   });
 
-  it('should return ampdoc-scope service if node in top window', () => {
-    markElementScheduledForTesting(win, 'amp-foo');
+  it('should return ampdoc-scope service if node in top window', async () => {
     registerServiceBuilderForDoc(
       nodeInTopWin,
       'foo',
@@ -476,17 +400,16 @@ describes.fakeWin('in embed scope', {amp: true}, (env) => {
       },
       /* opt_instantiate */ true
     );
-    return getElementServiceIfAvailableForDocInEmbedScope(
+
+    const returned = await getElementServiceIfAvailableForDocInEmbedScope(
       nodeInTopWin,
       'foo',
       'amp-foo'
-    ).then((returned) => {
-      expect(returned).to.equal(service);
-    });
+    );
+    expect(returned).to.equal(service);
   });
 
-  it('should NOT return ampdoc-scope service if node in embed window', () => {
-    markElementScheduledForTesting(win, 'amp-foo');
+  it('should NOT return ampdoc-scope service if node in embed window', async () => {
     registerServiceBuilderForDoc(
       nodeInTopWin,
       'foo',
@@ -495,12 +418,14 @@ describes.fakeWin('in embed scope', {amp: true}, (env) => {
       },
       /* opt_instantiate */ true
     );
-    return getElementServiceIfAvailableForDocInEmbedScope(
+
+    embedAmpDoc.setExtensionsKnown();
+
+    const returned = await getElementServiceIfAvailableForDocInEmbedScope(
       nodeInEmbedWin,
       'foo',
       'amp-foo'
-    ).then((returned) => {
-      expect(returned).to.be.null;
-    });
+    );
+    expect(returned).to.be.null;
   });
 });
diff --git a/test/unit/test-error-reporting.js b/test/unit/test-error-reporting.js
new file mode 100644
index 0000000000000..f3a70ba1e02e8
--- /dev/null
+++ b/test/unit/test-error-reporting.js
@@ -0,0 +1,772 @@
+/**
+ * Copyright 2015 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.
+ */
+
+import * as analytics from '../../src/analytics';
+import {Services} from '../../src/services';
+import {
+  blockedByConsentError,
+  cancellation,
+  detectNonAmpJs,
+  errorReportingDataForViewer,
+  getErrorReportData,
+  installErrorReporting,
+  isCancellation,
+  reportError,
+  reportErrorToAnalytics,
+  reportErrorToServerOrViewer,
+} from '../../src/error-reporting';
+import {getRtvVersionForTesting} from '../../src/mode';
+import {
+  resetExperimentTogglesForTesting,
+  toggleExperiment,
+} from '../../src/experiments';
+import {user, userAssert} from '../../src/log';
+
+describes.fakeWin('installErrorReporting', {}, (env) => {
+  let win;
+  let rejectedPromiseError;
+  let rejectedPromiseEvent;
+  let rejectedPromiseEventCancelledSpy;
+
+  beforeEach(() => {
+    win = env.win;
+    installErrorReporting(win);
+    rejectedPromiseEventCancelledSpy = env.sandbox.spy();
+    rejectedPromiseError = new Error('error reason');
+    rejectedPromiseEvent = {
+      type: 'unhandledrejection',
+      reason: rejectedPromiseError,
+      preventDefault: rejectedPromiseEventCancelledSpy,
+    };
+  });
+
+  it('should install window.onerror handler', () => {
+    expect(win.onerror).to.not.be.null;
+  });
+
+  it('should install unhandledrejection handler', () => {
+    expect(win.eventListeners.count('unhandledrejection')).to.equal(1);
+  });
+
+  it('should report the normal promise rejection', () => {
+    expectAsyncConsoleError(/error reason/);
+    win.eventListeners.fire(rejectedPromiseEvent);
+    expect(rejectedPromiseError.reported).to.be.true;
+    expect(rejectedPromiseEventCancelledSpy).to.not.be.called;
+  });
+
+  it('should allow null errors', () => {
+    expectAsyncConsoleError(/rejected promise/);
+    rejectedPromiseEvent.reason = null;
+    win.eventListeners.fire(rejectedPromiseEvent);
+    expect(rejectedPromiseEventCancelledSpy).to.not.be.called;
+  });
+
+  it('should allow string errors', () => {
+    expectAsyncConsoleError(/string error/);
+    rejectedPromiseEvent.reason = 'string error';
+    win.eventListeners.fire(rejectedPromiseEvent);
+    expect(rejectedPromiseEventCancelledSpy).to.not.be.called;
+  });
+
+  it('should ignore cancellation', () => {
+    rejectedPromiseEvent.reason = rejectedPromiseError = cancellation();
+    win.eventListeners.fire(rejectedPromiseEvent);
+    expect(rejectedPromiseError.reported).to.be.not.be.ok;
+    expect(rejectedPromiseEventCancelledSpy).to.be.calledOnce;
+  });
+
+  it('should ignore blockByConsent', () => {
+    rejectedPromiseEvent.reason = rejectedPromiseError =
+      blockedByConsentError();
+    win.eventListeners.fire(rejectedPromiseEvent);
+    expect(rejectedPromiseError.reported).to.be.not.be.ok;
+    expect(rejectedPromiseEventCancelledSpy).to.be.calledOnce;
+  });
+});
+
+describes.sandboxed('reportErrorToServerOrViewer', {}, (env) => {
+  let win;
+  let viewer;
+  let ampdocServiceForStub;
+  let sendMessageStub;
+  let createXhr;
+
+  const data = getErrorReportData(
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    new Error('XYZ', false)
+  );
+
+  beforeEach(() => {
+    const optedInDoc = window.document.implementation.createHTMLDocument('');
+    optedInDoc.documentElement.setAttribute('report-errors-to-viewer', '');
+
+    ampdocServiceForStub = env.sandbox.stub(Services, 'ampdocServiceFor');
+    const ampdoc = {getRootNode: () => optedInDoc};
+    ampdocServiceForStub.returns({
+      isSingleDoc: () => true,
+      getAmpDoc: () => ampdoc,
+      getSingleDoc: () => ampdoc,
+    });
+
+    viewer = {
+      hasCapability: () => true,
+      isTrustedViewer: () => Promise.resolve(true),
+      sendMessage: () => true,
+    };
+    sendMessageStub = env.sandbox.stub(viewer, 'sendMessage');
+
+    env.sandbox.stub(Services, 'viewerForDoc').returns(viewer);
+
+    createXhr = env.sandbox.spy(XMLHttpRequest.prototype, 'open');
+  });
+
+  it('should report to server if AMP doc is not single', () => {
+    ampdocServiceForStub.returns({isSingleDoc: () => false});
+    return reportErrorToServerOrViewer(win, data).then(() => {
+      expect(createXhr).to.be.calledOnce;
+      expect(sendMessageStub).to.not.have.been.called;
+    });
+  });
+
+  it('should report to server if AMP doc is not opted in', () => {
+    const nonOptedInDoc = window.document.implementation.createHTMLDocument('');
+    const ampdoc = {getRootNode: () => nonOptedInDoc};
+    ampdocServiceForStub.returns({
+      isSingleDoc: () => true,
+      getAmpDoc: () => ampdoc,
+      getSingleDoc: () => ampdoc,
+    });
+    return reportErrorToServerOrViewer(win, data).then(() => {
+      expect(createXhr).to.be.calledOnce;
+      expect(sendMessageStub).to.not.have.been.called;
+    });
+  });
+
+  it('should report to server if viewer is not capable', () => {
+    env.sandbox
+      .stub(viewer, 'hasCapability')
+      .withArgs('errorReporting')
+      .returns(false);
+    return reportErrorToServerOrViewer(win, data).then(() => {
+      expect(createXhr).to.be.calledOnce;
+      expect(sendMessageStub).to.not.have.been.called;
+    });
+  });
+
+  it('should report to server if viewer is not trusted', () => {
+    env.sandbox.stub(viewer, 'isTrustedViewer').returns(Promise.resolve(false));
+    return reportErrorToServerOrViewer(win, data).then(() => {
+      expect(createXhr).to.be.calledOnce;
+      expect(sendMessageStub).to.not.have.been.called;
+    });
+  });
+
+  it(
+    'should report to viewer with message named `error` with stripped down ' +
+      'error data set',
+    () => {
+      return reportErrorToServerOrViewer(win, data).then(() => {
+        expect(createXhr).to.not.have.been.called;
+        expect(sendMessageStub).to.have.been.calledWith(
+          'error',
+          errorReportingDataForViewer(data)
+        );
+        expect(data['m']).to.not.be.undefined;
+        expect(data['a']).to.not.be.undefined;
+        expect(data['s']).to.not.be.undefined;
+        expect(data['el']).to.not.be.undefined;
+        expect(data['ex']).to.not.be.undefined;
+        expect(data['v']).to.not.be.undefined;
+      });
+    }
+  );
+});
+
+describes.sandboxed('getErrorReportData', {}, (env) => {
+  let onError;
+  let nextRandomNumber;
+
+  beforeEach(() => {
+    onError = window.onerror;
+    nextRandomNumber = 0;
+    env.sandbox.stub(Math, 'random').callsFake(() => nextRandomNumber);
+    self.__AMP_MODE = undefined;
+  });
+
+  afterEach(() => {
+    window.onerror = onError;
+    window.viewerState = undefined;
+    resetExperimentTogglesForTesting(window);
+  });
+
+  it('reportError with error object', function SHOULD_BE_IN_STACK() {
+    const e = new Error('XYZ');
+    if (!e.stack || e.stack.indexOf('SHOULD_BE_IN_STACK') == -1) {
+      e.stack = 'SHOULD_BE_IN_STACK';
+    }
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e,
+      true
+    );
+    expect(data.m).to.equal('XYZ');
+    expect(data.el).to.equal('u');
+    expect(data.a).to.equal('0');
+    expect(data.s).to.contain('SHOULD_BE_IN_STACK');
+    expect(data['3p']).to.equal(undefined);
+    expect(e.message).to.contain('_reported_');
+    if (location.ancestorOrigins) {
+      expect(data.or).to.contain('http://localhost');
+    }
+    expect(data.vs).to.be.undefined;
+    expect(data.ae).to.equal('');
+    expect(data.r).to.contain('http://localhost');
+    expect(data.noAmp).to.equal('1');
+    expect(data.args).to.be.undefined;
+  });
+
+  it('reportError with error and ignore stack', () => {
+    const e = new Error('XYZ');
+    e.ignoreStack = true;
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e,
+      true
+    );
+    expect(data.m).to.equal('XYZ');
+    expect(data.el).to.equal('u');
+    expect(data.a).to.equal('0');
+    expect(data['3p']).to.equal(undefined);
+    expect(e.message).to.contain('_reported_');
+  });
+
+  it('reportError with error object w/args', () => {
+    const e = new Error('XYZ');
+    e.args = {x: 1};
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e,
+      true
+    );
+    expect(data.args).to.equal(JSON.stringify({x: 1}));
+  });
+
+  it('reportError with a string instead of error', () => {
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      'string error',
+      true
+    );
+    expect(data.m).to.equal('string error');
+  });
+
+  it('reportError with no error', () => {
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      true
+    );
+    expect(data.m).to.equal('Unknown error');
+  });
+
+  it('reportError with associatedElement', () => {
+    const e = new Error('XYZ');
+    const el = document.createElement('foo-bar');
+    e.associatedElement = el;
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e,
+      false
+    );
+    expect(data.m).to.equal('XYZ');
+    expect(data.el).to.equal('FOO-BAR');
+    expect(data.a).to.equal('0');
+    expect(data.v).to.equal(getRtvVersionForTesting(window));
+    expect(data.noAmp).to.equal('0');
+  });
+
+  it('reportError mark asserts', () => {
+    let e = '';
+    allowConsoleError(() => {
+      try {
+        userAssert(false, 'XYZ');
+      } catch (error) {
+        e = error;
+      }
+    });
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e
+    );
+    expect(data.m).to.equal('XYZ');
+    expect(data.a).to.equal('1');
+    expect(data.v).to.equal(getRtvVersionForTesting(window));
+  });
+
+  it('reportError mark asserts without error object', () => {
+    let e = '';
+    allowConsoleError(() => {
+      try {
+        userAssert(false, 'XYZ');
+      } catch (error) {
+        e = error;
+      }
+    });
+    const data = getErrorReportData(e.message, undefined, undefined, undefined);
+    expect(data.m).to.equal('XYZ');
+    expect(data.a).to.equal('1');
+    expect(data.v).to.equal(getRtvVersionForTesting(window));
+  });
+
+  it('reportError marks 3p', () => {
+    window.context = {
+      location: {},
+    };
+    const e = new Error('XYZ');
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e
+    );
+    expect(data.m).to.equal('XYZ');
+    expect(data['3p']).to.equal('1');
+  });
+
+  it('reportError marks canary and viewerState', () => {
+    window.viewerState = 'some-state';
+    window.AMP_CONFIG = {
+      canary: true,
+    };
+    const e = new Error('XYZ');
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e
+    );
+    expect(data.m).to.equal('XYZ');
+    expect(data['ca']).to.equal('1');
+    expect(data['vs']).to.equal('some-state');
+  });
+
+  it('reportError marks binary type', () => {
+    window.AMP_CONFIG = {
+      type: 'experimental',
+    };
+    const e = new Error('XYZ');
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e
+    );
+    expect(data.m).to.equal('XYZ');
+    expect(data['bt']).to.equal('experimental');
+
+    window.AMP_CONFIG = {
+      type: 'control',
+    };
+    const e1 = new Error('XYZ');
+    const data1 = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e1
+    );
+    expect(data1.m).to.equal('XYZ');
+    expect(data1['bt']).to.equal('control');
+
+    window.AMP_CONFIG = {};
+    const e2 = new Error('ABC');
+    const data2 = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e2
+    );
+    expect(data2.m).to.equal('ABC');
+    expect(data2['bt']).to.equal('unknown');
+  });
+
+  it('reportError without error object', () => {
+    const data = getErrorReportData('foo bar', 'foo.js', '11', '22', undefined);
+    expect(data.m).to.equal('foo bar');
+    expect(data.f).to.equal('foo.js');
+    expect(data.l).to.equal('11');
+    expect(data.c).to.equal('22');
+  });
+
+  it('should accumulate errors', () => {
+    getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      new Error('1'),
+      true
+    );
+    getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      new Error('2'),
+      true
+    );
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      new Error('3'),
+      true
+    );
+    expect(data.m).to.equal('3');
+    expect(data.ae).to.equal('1,2');
+  });
+
+  it('should not double report', () => {
+    const e = new Error('something _reported_');
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e
+    );
+    expect(data).to.be.undefined;
+  });
+
+  it('should construct cancellation', () => {
+    const e = cancellation();
+    expect(isCancellation(e)).to.be.true;
+    expect(isCancellation(e.message)).to.be.true;
+
+    // Suffix is tollerated.
+    e.message += '___';
+    expect(isCancellation(e)).to.be.true;
+    expect(isCancellation(e.message)).to.be.true;
+
+    // Prefix is not tollerated.
+    e.message = '___' + e.message;
+    expect(isCancellation(e)).to.be.false;
+    expect(isCancellation(e.message)).to.be.false;
+
+    expect(isCancellation('')).to.be.false;
+    expect(isCancellation(null)).to.be.false;
+    expect(isCancellation(1)).to.be.false;
+    expect(isCancellation({})).to.be.false;
+  });
+
+  it('reportError with error object', () => {
+    const e = cancellation();
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e
+    );
+    expect(data).to.be.undefined;
+  });
+
+  it('should throttle user errors', () => {
+    nextRandomNumber = 0.2;
+    let e = '';
+    allowConsoleError(() => {
+      try {
+        userAssert(false, 'XYZ');
+      } catch (error) {
+        e = error;
+      }
+    });
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e
+    );
+    expect(data).to.be.undefined;
+  });
+
+  it('should not report load errors', () => {
+    nextRandomNumber = 1e-3 + 1e-4;
+    const e = new Error('Failed to load:');
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e
+    );
+    expect(data).to.be.undefined;
+  });
+
+  it('should report throttled load errors at threshold', () => {
+    nextRandomNumber = 1e-3;
+    const e = new Error('Failed to load:');
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e
+    );
+    expect(data).to.be.ok;
+    expect(data.ex).to.equal('1');
+  });
+
+  it('should not report Script errors', () => {
+    nextRandomNumber = 1e-3 + 1e-4;
+    const e = new Error('Script error.');
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e
+    );
+    expect(data).to.be.undefined;
+  });
+
+  it('should report throttled Script errors at threshold', () => {
+    nextRandomNumber = 1e-3;
+    const e = new Error('Script error.');
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e
+    );
+    expect(data).to.be.ok;
+    expect(data.ex).to.contain('1');
+  });
+
+  it('should report throttled load errors under threshold', () => {
+    nextRandomNumber = 1e-3 - 1e-4;
+    const e = new Error('Failed to load:');
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e
+    );
+    expect(data).to.be.ok;
+    expect(data.ex).to.contain('1');
+  });
+
+  it('should omit the error stack for user errors', () => {
+    const e = user().createError('123');
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e,
+      true
+    );
+    expect(data.s).to.be.undefined;
+  });
+
+  // TODO(#14350): unskip flaky test
+  it.skip('should report experiments', () => {
+    resetExperimentTogglesForTesting(window);
+    toggleExperiment(window, 'test-exp', true);
+    // Toggle on then off, so it's stored
+    toggleExperiment(window, 'disabled-exp', true);
+    toggleExperiment(window, 'disabled-exp', false);
+    const e = user().createError('123');
+    const data = getErrorReportData(
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      e,
+      true
+    );
+    expect(data.exps).to.equal('test-exp=1,disabled-exp=0');
+  });
+
+  describes.sandboxed('detectNonAmpJs', {}, () => {
+    let win;
+    let scripts;
+    beforeEach(() => {
+      scripts = [];
+      win = {
+        document: {
+          querySelectorAll: (selector) => {
+            expect(selector).to.equal('script[src]');
+            return scripts;
+          },
+        },
+      };
+      for (let i = 0; i < 10; i++) {
+        const s = document.createElement('script');
+        s.src = 'https://cdn.ampproject.org/' + i + '.js';
+        scripts.push(s);
+      }
+    });
+
+    it("should let AMP's JS pass", () => {
+      expect(detectNonAmpJs(win)).to.be.false;
+    });
+
+    it('should be case insensitive', () => {
+      scripts[0].src = 'https://CDN.ampproject.ORG/v0.js';
+      expect(detectNonAmpJs(win)).to.be.false;
+    });
+
+    it('should detect other JS', () => {
+      scripts[0].src = './foo.js';
+      expect(detectNonAmpJs(win)).to.be.true;
+    });
+
+    it('should detect other JS (2)', () => {
+      scripts[0].src = 'http://jquery.com/foo.js';
+      expect(detectNonAmpJs(win)).to.be.true;
+    });
+
+    it('should gracefully handle no JS', () => {
+      scripts = [];
+      expect(detectNonAmpJs(win)).to.be.false;
+    });
+
+    it('should detect non-AMP JS in karma', () => {
+      scripts = [];
+      expect(detectNonAmpJs(window)).to.be.true;
+    });
+  });
+});
+
+describes.sandboxed('reportError', {}, (env) => {
+  let clock;
+
+  beforeEach(() => {
+    clock = env.sandbox.useFakeTimers();
+  });
+
+  it('should accept Error type', () => {
+    const error = new Error('error');
+    let result;
+    allowConsoleError(() => {
+      result = reportError(error);
+    });
+    expect(result).to.equal(error);
+    expect(result.origError).to.be.undefined;
+    expect(result.reported).to.be.true;
+    clock.tick();
+  });
+
+  it('should accept string and report incorrect use', () => {
+    window.__AMP_MODE = {localDev: true, test: false};
+    let result;
+    allowConsoleError(() => {
+      result = reportError('error');
+    });
+    expect(result).to.be.instanceOf(Error);
+    expect(result.message).to.contain('error');
+    expect(result.origError).to.be.equal('error');
+    expect(result.reported).to.be.true;
+    expect(() => {
+      clock.tick();
+    }).to.throw(/_reported_ Error reported incorrectly/);
+  });
+
+  it('should accept number and report incorrect use', () => {
+    window.__AMP_MODE = {localDev: true, test: false};
+    let result;
+    allowConsoleError(() => {
+      result = reportError(101);
+    });
+    expect(result).to.be.instanceOf(Error);
+    expect(result.message).to.contain('101');
+    expect(result.origError).to.be.equal(101);
+    expect(result.reported).to.be.true;
+    expect(() => {
+      clock.tick();
+    }).to.throw(/_reported_ Error reported incorrectly/);
+  });
+
+  it('should accept null and report incorrect use', () => {
+    window.__AMP_MODE = {localDev: true, test: false};
+    let result;
+    allowConsoleError(() => {
+      result = reportError(null);
+    });
+    expect(result).to.be.instanceOf(Error);
+    expect(result.message).to.contain('Unknown error');
+    expect(result.origError).to.be.undefined;
+    expect(result.reported).to.be.true;
+    expect(() => {
+      clock.tick();
+    }).to.throw(/_reported_ Error reported incorrectly/);
+  });
+});
+
+describes.fakeWin('user error reporting', {amp: true}, (env) => {
+  let win;
+  const error = new Error('ERROR', 'user error');
+  let analyticsEventSpy;
+
+  beforeEach(() => {
+    win = env.win;
+    analyticsEventSpy = env.sandbox.spy(analytics, 'triggerAnalyticsEvent');
+  });
+
+  it('should trigger triggerAnalyticsEvent with correct arguments', () => {
+    reportErrorToAnalytics(error, win);
+    expect(analyticsEventSpy).to.have.been.called;
+    expect(analyticsEventSpy).to.have.been.calledWith(
+      env.sandbox.match.any,
+      'user-error',
+      {errorName: error.name, errorMessage: error.message}
+    );
+  });
+});
diff --git a/test/unit/test-error.js b/test/unit/test-error.js
deleted file mode 100644
index d335bc88fc9b3..0000000000000
--- a/test/unit/test-error.js
+++ /dev/null
@@ -1,834 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import * as analytics from '../../src/analytics';
-import {Services} from '../../src/services';
-import {
-  blockedByConsentError,
-  cancellation,
-  detectJsEngineFromStack,
-  detectNonAmpJs,
-  errorReportingDataForViewer,
-  getErrorReportData,
-  installErrorReporting,
-  isCancellation,
-  reportError,
-  reportErrorToAnalytics,
-  reportErrorToServerOrViewer,
-} from '../../src/error';
-import {getRtvVersionForTesting} from '../../src/mode';
-import {
-  resetExperimentTogglesForTesting,
-  toggleExperiment,
-} from '../../src/experiments';
-import {user, userAssert} from '../../src/log';
-
-describes.fakeWin('installErrorReporting', {}, (env) => {
-  let win;
-  let rejectedPromiseError;
-  let rejectedPromiseEvent;
-  let rejectedPromiseEventCancelledSpy;
-
-  beforeEach(() => {
-    win = env.win;
-    installErrorReporting(win);
-    rejectedPromiseEventCancelledSpy = env.sandbox.spy();
-    rejectedPromiseError = new Error('error reason');
-    rejectedPromiseEvent = {
-      type: 'unhandledrejection',
-      reason: rejectedPromiseError,
-      preventDefault: rejectedPromiseEventCancelledSpy,
-    };
-  });
-
-  it('should install window.onerror handler', () => {
-    expect(win.onerror).to.not.be.null;
-  });
-
-  it('should install unhandledrejection handler', () => {
-    expect(win.eventListeners.count('unhandledrejection')).to.equal(1);
-  });
-
-  it('should report the normal promise rejection', () => {
-    expectAsyncConsoleError(/error reason/);
-    win.eventListeners.fire(rejectedPromiseEvent);
-    expect(rejectedPromiseError.reported).to.be.true;
-    expect(rejectedPromiseEventCancelledSpy).to.not.be.called;
-  });
-
-  it('should allow null errors', () => {
-    expectAsyncConsoleError(/rejected promise/);
-    rejectedPromiseEvent.reason = null;
-    win.eventListeners.fire(rejectedPromiseEvent);
-    expect(rejectedPromiseEventCancelledSpy).to.not.be.called;
-  });
-
-  it('should allow string errors', () => {
-    expectAsyncConsoleError(/string error/);
-    rejectedPromiseEvent.reason = 'string error';
-    win.eventListeners.fire(rejectedPromiseEvent);
-    expect(rejectedPromiseEventCancelledSpy).to.not.be.called;
-  });
-
-  it('should ignore cancellation', () => {
-    rejectedPromiseEvent.reason = rejectedPromiseError = cancellation();
-    win.eventListeners.fire(rejectedPromiseEvent);
-    expect(rejectedPromiseError.reported).to.be.not.be.ok;
-    expect(rejectedPromiseEventCancelledSpy).to.be.calledOnce;
-  });
-
-  it('should ignore blockByConsent', () => {
-    rejectedPromiseEvent.reason = rejectedPromiseError = blockedByConsentError();
-    win.eventListeners.fire(rejectedPromiseEvent);
-    expect(rejectedPromiseError.reported).to.be.not.be.ok;
-    expect(rejectedPromiseEventCancelledSpy).to.be.calledOnce;
-  });
-});
-
-describe('reportErrorToServerOrViewer', () => {
-  let win;
-  let viewer;
-  let ampdocServiceForStub;
-  let sendMessageStub;
-  let createXhr;
-
-  const data = getErrorReportData(
-    undefined,
-    undefined,
-    undefined,
-    undefined,
-    new Error('XYZ', false)
-  );
-
-  beforeEach(() => {
-    const optedInDoc = window.document.implementation.createHTMLDocument('');
-    optedInDoc.documentElement.setAttribute('report-errors-to-viewer', '');
-
-    ampdocServiceForStub = window.sandbox.stub(Services, 'ampdocServiceFor');
-    const ampdoc = {getRootNode: () => optedInDoc};
-    ampdocServiceForStub.returns({
-      isSingleDoc: () => true,
-      getAmpDoc: () => ampdoc,
-      getSingleDoc: () => ampdoc,
-    });
-
-    viewer = {
-      hasCapability: () => true,
-      isTrustedViewer: () => Promise.resolve(true),
-      sendMessage: () => true,
-    };
-    sendMessageStub = window.sandbox.stub(viewer, 'sendMessage');
-
-    window.sandbox.stub(Services, 'viewerForDoc').returns(viewer);
-
-    createXhr = window.sandbox.spy(XMLHttpRequest.prototype, 'open');
-  });
-
-  it('should report to server if AMP doc is not single', () => {
-    ampdocServiceForStub.returns({isSingleDoc: () => false});
-    return reportErrorToServerOrViewer(win, data).then(() => {
-      expect(createXhr).to.be.calledOnce;
-      expect(sendMessageStub).to.not.have.been.called;
-    });
-  });
-
-  it('should report to server if AMP doc is not opted in', () => {
-    const nonOptedInDoc = window.document.implementation.createHTMLDocument('');
-    const ampdoc = {getRootNode: () => nonOptedInDoc};
-    ampdocServiceForStub.returns({
-      isSingleDoc: () => true,
-      getAmpDoc: () => ampdoc,
-      getSingleDoc: () => ampdoc,
-    });
-    return reportErrorToServerOrViewer(win, data).then(() => {
-      expect(createXhr).to.be.calledOnce;
-      expect(sendMessageStub).to.not.have.been.called;
-    });
-  });
-
-  it('should report to server if viewer is not capable', () => {
-    window.sandbox
-      .stub(viewer, 'hasCapability')
-      .withArgs('errorReporting')
-      .returns(false);
-    return reportErrorToServerOrViewer(win, data).then(() => {
-      expect(createXhr).to.be.calledOnce;
-      expect(sendMessageStub).to.not.have.been.called;
-    });
-  });
-
-  it('should report to server if viewer is not trusted', () => {
-    window.sandbox
-      .stub(viewer, 'isTrustedViewer')
-      .returns(Promise.resolve(false));
-    return reportErrorToServerOrViewer(win, data).then(() => {
-      expect(createXhr).to.be.calledOnce;
-      expect(sendMessageStub).to.not.have.been.called;
-    });
-  });
-
-  it(
-    'should report to viewer with message named `error` with stripped down ' +
-      'error data set',
-    () => {
-      return reportErrorToServerOrViewer(win, data).then(() => {
-        expect(createXhr).to.not.have.been.called;
-        expect(sendMessageStub).to.have.been.calledWith(
-          'error',
-          errorReportingDataForViewer(data)
-        );
-        expect(data['m']).to.not.be.undefined;
-        expect(data['a']).to.not.be.undefined;
-        expect(data['s']).to.not.be.undefined;
-        expect(data['el']).to.not.be.undefined;
-        expect(data['ex']).to.not.be.undefined;
-        expect(data['v']).to.not.be.undefined;
-        expect(data['jse']).to.not.be.undefined;
-      });
-    }
-  );
-});
-
-describe('getErrorReportData', () => {
-  let onError;
-  let nextRandomNumber;
-
-  beforeEach(() => {
-    onError = window.onerror;
-    nextRandomNumber = 0;
-    window.sandbox.stub(Math, 'random').callsFake(() => nextRandomNumber);
-    self.__AMP_MODE = undefined;
-  });
-
-  afterEach(() => {
-    window.onerror = onError;
-    window.viewerState = undefined;
-    resetExperimentTogglesForTesting(window);
-  });
-
-  it('reportError with error object', function SHOULD_BE_IN_STACK() {
-    const e = new Error('XYZ');
-    if (!e.stack || e.stack.indexOf('SHOULD_BE_IN_STACK') == -1) {
-      e.stack = 'SHOULD_BE_IN_STACK';
-    }
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e,
-      true
-    );
-    expect(data.m).to.equal('XYZ');
-    expect(data.el).to.equal('u');
-    expect(data.a).to.equal('0');
-    expect(data.s).to.contain('SHOULD_BE_IN_STACK');
-    expect(data['3p']).to.equal(undefined);
-    expect(e.message).to.contain('_reported_');
-    if (location.ancestorOrigins) {
-      expect(data.or).to.contain('http://localhost');
-    }
-    expect(data.vs).to.be.undefined;
-    expect(data.ae).to.equal('');
-    expect(data.r).to.contain('http://localhost');
-    expect(data.noAmp).to.equal('1');
-    expect(data.args).to.be.undefined;
-  });
-
-  it('reportError with error and ignore stack', () => {
-    const e = new Error('XYZ');
-    e.ignoreStack = true;
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e,
-      true
-    );
-    expect(data.m).to.equal('XYZ');
-    expect(data.el).to.equal('u');
-    expect(data.a).to.equal('0');
-    expect(data['3p']).to.equal(undefined);
-    expect(e.message).to.contain('_reported_');
-  });
-
-  it('reportError with error object w/args', () => {
-    const e = new Error('XYZ');
-    e.args = {x: 1};
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e,
-      true
-    );
-    expect(data.args).to.equal(JSON.stringify({x: 1}));
-  });
-
-  it('reportError with a string instead of error', () => {
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      'string error',
-      true
-    );
-    expect(data.m).to.equal('string error');
-  });
-
-  it('reportError with no error', () => {
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      true
-    );
-    expect(data.m).to.equal('Unknown error');
-  });
-
-  it('reportError with associatedElement', () => {
-    const e = new Error('XYZ');
-    const el = document.createElement('foo-bar');
-    e.associatedElement = el;
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e,
-      false
-    );
-    expect(data.m).to.equal('XYZ');
-    expect(data.el).to.equal('FOO-BAR');
-    expect(data.a).to.equal('0');
-    expect(data.v).to.equal(getRtvVersionForTesting(window));
-    expect(data.noAmp).to.equal('0');
-  });
-
-  it('reportError mark asserts', () => {
-    let e = '';
-    allowConsoleError(() => {
-      try {
-        userAssert(false, 'XYZ');
-      } catch (error) {
-        e = error;
-      }
-    });
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e
-    );
-    expect(data.m).to.equal('XYZ');
-    expect(data.a).to.equal('1');
-    expect(data.v).to.equal(getRtvVersionForTesting(window));
-  });
-
-  it('reportError mark asserts without error object', () => {
-    let e = '';
-    allowConsoleError(() => {
-      try {
-        userAssert(false, 'XYZ');
-      } catch (error) {
-        e = error;
-      }
-    });
-    const data = getErrorReportData(e.message, undefined, undefined, undefined);
-    expect(data.m).to.equal('XYZ');
-    expect(data.a).to.equal('1');
-    expect(data.v).to.equal(getRtvVersionForTesting(window));
-  });
-
-  it('reportError marks 3p', () => {
-    window.context = {
-      location: {},
-    };
-    const e = new Error('XYZ');
-    e.fromAssert = true;
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e
-    );
-    expect(data.m).to.equal('XYZ');
-    expect(data['3p']).to.equal('1');
-  });
-
-  it('reportError marks canary and viewerState', () => {
-    window.viewerState = 'some-state';
-    window.AMP_CONFIG = {
-      canary: true,
-    };
-    const e = new Error('XYZ');
-    e.fromAssert = true;
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e
-    );
-    expect(data.m).to.equal('XYZ');
-    expect(data['ca']).to.equal('1');
-    expect(data['vs']).to.equal('some-state');
-  });
-
-  it('reportError marks binary type', () => {
-    window.AMP_CONFIG = {
-      type: 'experimental',
-    };
-    const e = new Error('XYZ');
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e
-    );
-    expect(data.m).to.equal('XYZ');
-    expect(data['bt']).to.equal('experimental');
-
-    window.AMP_CONFIG = {
-      type: 'control',
-    };
-    const e1 = new Error('XYZ');
-    const data1 = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e1
-    );
-    expect(data1.m).to.equal('XYZ');
-    expect(data1['bt']).to.equal('control');
-
-    window.AMP_CONFIG = {};
-    const e2 = new Error('ABC');
-    const data2 = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e2
-    );
-    expect(data2.m).to.equal('ABC');
-    expect(data2['bt']).to.equal('unknown');
-  });
-
-  it('reportError without error object', () => {
-    const data = getErrorReportData('foo bar', 'foo.js', '11', '22', undefined);
-    expect(data.m).to.equal('foo bar');
-    expect(data.f).to.equal('foo.js');
-    expect(data.l).to.equal('11');
-    expect(data.c).to.equal('22');
-  });
-
-  it('should accumulate errors', () => {
-    getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      new Error('1'),
-      true
-    );
-    getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      new Error('2'),
-      true
-    );
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      new Error('3'),
-      true
-    );
-    expect(data.m).to.equal('3');
-    expect(data.ae).to.equal('1,2');
-  });
-
-  it('should not double report', () => {
-    const e = new Error('something _reported_');
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e
-    );
-    expect(data).to.be.undefined;
-  });
-
-  it('should construct cancellation', () => {
-    const e = cancellation();
-    expect(isCancellation(e)).to.be.true;
-    expect(isCancellation(e.message)).to.be.true;
-
-    // Suffix is tollerated.
-    e.message += '___';
-    expect(isCancellation(e)).to.be.true;
-    expect(isCancellation(e.message)).to.be.true;
-
-    // Prefix is not tollerated.
-    e.message = '___' + e.message;
-    expect(isCancellation(e)).to.be.false;
-    expect(isCancellation(e.message)).to.be.false;
-
-    expect(isCancellation('')).to.be.false;
-    expect(isCancellation(null)).to.be.false;
-    expect(isCancellation(1)).to.be.false;
-    expect(isCancellation({})).to.be.false;
-  });
-
-  it('reportError with error object', () => {
-    const e = cancellation();
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e
-    );
-    expect(data).to.be.undefined;
-  });
-
-  it('should throttle user errors', () => {
-    nextRandomNumber = 0.2;
-    let e = '';
-    allowConsoleError(() => {
-      try {
-        userAssert(false, 'XYZ');
-      } catch (error) {
-        e = error;
-      }
-    });
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e
-    );
-    expect(data).to.be.undefined;
-  });
-
-  it('should not report load errors', () => {
-    nextRandomNumber = 1e-3 + 1e-4;
-    const e = new Error('Failed to load:');
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e
-    );
-    expect(data).to.be.undefined;
-  });
-
-  it('should report throttled load errors at threshold', () => {
-    nextRandomNumber = 1e-3;
-    const e = new Error('Failed to load:');
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e
-    );
-    expect(data).to.be.ok;
-    expect(data.ex).to.equal('1');
-  });
-
-  it('should not report Script errors', () => {
-    nextRandomNumber = 1e-3 + 1e-4;
-    const e = new Error('Script error.');
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e
-    );
-    expect(data).to.be.undefined;
-  });
-
-  it('should report throttled Script errors at threshold', () => {
-    nextRandomNumber = 1e-3;
-    const e = new Error('Script error.');
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e
-    );
-    expect(data).to.be.ok;
-    expect(data.ex).to.contain('1');
-  });
-
-  it('should report throttled load errors under threshold', () => {
-    nextRandomNumber = 1e-3 - 1e-4;
-    const e = new Error('Failed to load:');
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e
-    );
-    expect(data).to.be.ok;
-    expect(data.ex).to.contain('1');
-  });
-
-  it('should omit the error stack for user errors', () => {
-    const e = user().createError('123');
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e,
-      true
-    );
-    expect(data.s).to.be.undefined;
-  });
-
-  // TODO(#14350): unskip flaky test
-  it.skip('should report experiments', () => {
-    resetExperimentTogglesForTesting(window);
-    toggleExperiment(window, 'test-exp', true);
-    // Toggle on then off, so it's stored
-    toggleExperiment(window, 'disabled-exp', true);
-    toggleExperiment(window, 'disabled-exp', false);
-    const e = user().createError('123');
-    const data = getErrorReportData(
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      e,
-      true
-    );
-    expect(data.exps).to.equal('test-exp=1,disabled-exp=0');
-  });
-
-  describe('detectNonAmpJs', () => {
-    let win;
-    let scripts;
-    beforeEach(() => {
-      scripts = [];
-      win = {
-        document: {
-          querySelectorAll: (selector) => {
-            expect(selector).to.equal('script[src]');
-            return scripts;
-          },
-        },
-      };
-      for (let i = 0; i < 10; i++) {
-        const s = document.createElement('script');
-        s.src = 'https://cdn.ampproject.org/' + i + '.js';
-        scripts.push(s);
-      }
-    });
-
-    it("should let AMP's JS pass", () => {
-      expect(detectNonAmpJs(win)).to.be.false;
-    });
-
-    it('should be case insensitive', () => {
-      scripts[0].src = 'https://CDN.ampproject.ORG/v0.js';
-      expect(detectNonAmpJs(win)).to.be.false;
-    });
-
-    it('should detect other JS', () => {
-      scripts[0].src = './foo.js';
-      expect(detectNonAmpJs(win)).to.be.true;
-    });
-
-    it('should detect other JS (2)', () => {
-      scripts[0].src = 'http://jquery.com/foo.js';
-      expect(detectNonAmpJs(win)).to.be.true;
-    });
-
-    it('should gracefully handle no JS', () => {
-      scripts = [];
-      expect(detectNonAmpJs(win)).to.be.false;
-    });
-
-    it('should detect non-AMP JS in karma', () => {
-      scripts = [];
-      expect(detectNonAmpJs(window)).to.be.true;
-    });
-  });
-});
-
-describes.sandboxed('reportError', {}, (env) => {
-  let clock;
-
-  beforeEach(() => {
-    clock = env.sandbox.useFakeTimers();
-  });
-
-  it('should accept Error type', () => {
-    const error = new Error('error');
-    let result;
-    allowConsoleError(() => {
-      result = reportError(error);
-    });
-    expect(result).to.equal(error);
-    expect(result.origError).to.be.undefined;
-    expect(result.reported).to.be.true;
-    clock.tick();
-  });
-
-  it('should accept string and report incorrect use', () => {
-    window.__AMP_MODE = {localDev: true, test: false};
-    let result;
-    allowConsoleError(() => {
-      result = reportError('error');
-    });
-    expect(result).to.be.instanceOf(Error);
-    expect(result.message).to.contain('error');
-    expect(result.origError).to.be.equal('error');
-    expect(result.reported).to.be.true;
-    expect(() => {
-      clock.tick();
-    }).to.throw(/_reported_ Error reported incorrectly/);
-  });
-
-  it('should accept number and report incorrect use', () => {
-    window.__AMP_MODE = {localDev: true, test: false};
-    let result;
-    allowConsoleError(() => {
-      result = reportError(101);
-    });
-    expect(result).to.be.instanceOf(Error);
-    expect(result.message).to.contain('101');
-    expect(result.origError).to.be.equal(101);
-    expect(result.reported).to.be.true;
-    expect(() => {
-      clock.tick();
-    }).to.throw(/_reported_ Error reported incorrectly/);
-  });
-
-  it('should accept null and report incorrect use', () => {
-    window.__AMP_MODE = {localDev: true, test: false};
-    let result;
-    allowConsoleError(() => {
-      result = reportError(null);
-    });
-    expect(result).to.be.instanceOf(Error);
-    expect(result.message).to.contain('Unknown error');
-    expect(result.origError).to.be.undefined;
-    expect(result.reported).to.be.true;
-    expect(() => {
-      clock.tick();
-    }).to.throw(/_reported_ Error reported incorrectly/);
-  });
-});
-
-describe.configure().run('detectJsEngineFromStack', () => {
-  // Note that these are not true of every case. You can emulate iOS Safari
-  // on Desktop Chrome and break this. These tests are explicitly for
-  // SauceLabs, which runs does not masquerade with UserAgent.
-  describe
-    .configure()
-    .ifIos()
-    .run('on iOS', () => {
-      it.configure()
-        .ifSafari()
-        .run('detects safari as safari', () => {
-          expect(detectJsEngineFromStack()).to.equal('Safari');
-        });
-
-      it.configure()
-        .ifChrome()
-        .run('detects chrome as safari', () => {
-          expect(detectJsEngineFromStack()).to.equal('Safari');
-        });
-
-      it.configure()
-        .ifFirefox()
-        .run('detects firefox as safari', () => {
-          expect(detectJsEngineFromStack()).to.equal('Safari');
-        });
-    });
-
-  describe
-    .configure()
-    .skipIos()
-    .run('on other OSs', () => {
-      it.configure()
-        .ifSafari()
-        .run('detects safari as safari', () => {
-          expect(detectJsEngineFromStack()).to.equal('Safari');
-        });
-
-      it.configure()
-        .ifChrome()
-        .run('detects chrome as chrome', () => {
-          expect(detectJsEngineFromStack()).to.equal('Chrome');
-        });
-
-      it.configure()
-        .ifFirefox()
-        .run('detects firefox as firefox', () => {
-          expect(detectJsEngineFromStack()).to.equal('Firefox');
-        });
-
-      it.configure()
-        .ifEdge()
-        .run('detects edge as IE', () => {
-          expect(detectJsEngineFromStack()).to.equal('IE');
-        });
-    });
-});
-
-describes.fakeWin('user error reporting', {amp: true}, (env) => {
-  let win;
-  const error = new Error('ERROR', 'user error');
-  let analyticsEventSpy;
-
-  beforeEach(() => {
-    win = env.win;
-    analyticsEventSpy = env.sandbox.spy(analytics, 'triggerAnalyticsEvent');
-  });
-
-  it('should trigger triggerAnalyticsEvent with correct arguments', () => {
-    reportErrorToAnalytics(error, win);
-    expect(analyticsEventSpy).to.have.been.called;
-    expect(analyticsEventSpy).to.have.been.calledWith(
-      env.sandbox.match.any,
-      'user-error',
-      {errorName: error.name, errorMessage: error.message}
-    );
-  });
-});
diff --git a/test/unit/test-event-helper.js b/test/unit/test-event-helper.js
index e162836a81b24..d0d318abd2223 100644
--- a/test/unit/test-event-helper.js
+++ b/test/unit/test-event-helper.js
@@ -23,7 +23,7 @@ import {
   listenOncePromise,
   loadPromise,
 } from '../../src/event-helper';
-import {Observable} from '../../src/observable';
+import {Observable} from '../../src/core/data-structures/observable';
 import {
   detectEvtListenerOptsSupport,
   resetEvtListenerOptsSupportForTesting,
@@ -31,7 +31,7 @@ import {
   supportsPassiveEventListener,
 } from '../../src/event-helper-listen';
 
-describe('EventHelper', () => {
+describes.sandboxed('EventHelper', {}, (env) => {
   function getEvent(name, target) {
     const event = document.createEvent('Event');
     event.initEvent(name, true, true);
@@ -295,7 +295,7 @@ describe('EventHelper', () => {
     expect(native.type).to.equal('foo');
     expect(native.detail).to.deep.equal({bar: 123});
 
-    const initCustomEventSpy = window.sandbox.spy();
+    const initCustomEventSpy = env.sandbox.spy();
     const win = {};
     win.CustomEvent = {};
     win.document = {};
@@ -318,11 +318,11 @@ describe('EventHelper', () => {
       }
     };
     // Simulate an addEventListener that accepts options
-    addEventListenerStub = window.sandbox
+    addEventListenerStub = env.sandbox
       .stub(self, 'addEventListener')
       .callsFake(eventListenerStubAcceptOpts);
     // Simulate a removeEventListener that accepts options
-    removeEventListenerStub = window.sandbox
+    removeEventListenerStub = env.sandbox
       .stub(self, 'removeEventListener')
       .callsFake(eventListenerStubAcceptOpts);
     resetEvtListenerOptsSupportForTesting();
@@ -350,11 +350,11 @@ describe('EventHelper', () => {
       }
     };
     // Simulate an addEventListener that does not accept options
-    addEventListenerStub = window.sandbox
+    addEventListenerStub = env.sandbox
       .stub(self, 'addEventListener')
       .callsFake(eventListenerStubRejectOpts);
     // Simulate a removeEventListener that does not accept options
-    removeEventListenerStub = window.sandbox
+    removeEventListenerStub = env.sandbox
       .stub(self, 'removeEventListener')
       .callsFake(eventListenerStubRejectOpts);
     resetEvtListenerOptsSupportForTesting();
diff --git a/test/unit/test-experiments.js b/test/unit/test-experiments.js
index 2ec6efc6a4221..44ce7a07f9864 100644
--- a/test/unit/test-experiments.js
+++ b/test/unit/test-experiments.js
@@ -17,6 +17,8 @@
 import {
   RANDOM_NUMBER_GENERATORS,
   experimentToggles,
+  forceExperimentBranch,
+  getActiveExperimentBranches,
   getBinaryType,
   getExperimentBranch,
   getExperimentTogglesForTesting,
@@ -36,7 +38,7 @@ function fakeLocalStorage(initial = {}) {
   };
 }
 
-describe('experimentToggles', () => {
+describes.sandboxed('experimentToggles', {}, () => {
   it('should return experiment status map', () => {
     const win = {
       localStorage: fakeLocalStorage({
@@ -104,7 +106,7 @@ describe('experimentToggles', () => {
   });
 });
 
-describe('isExperimentOn', () => {
+describes.sandboxed('isExperimentOn', {}, (env) => {
   let win;
 
   beforeEach(() => {
@@ -185,7 +187,7 @@ describe('isExperimentOn', () => {
       win.AMP_CONFIG['e2'] = 0;
       expectExperiment('', 'e2').to.be.false;
 
-      window.sandbox.stub(Math, 'random').returns(0.5);
+      env.sandbox.stub(Math, 'random').returns(0.5);
       win.AMP_CONFIG['e3'] = 0.3;
       expectExperiment('', 'e3').to.be.false;
 
@@ -200,7 +202,7 @@ describe('isExperimentOn', () => {
     });
 
     it('should cache calc value', () => {
-      window.sandbox.stub(Math, 'random').returns(0.4);
+      env.sandbox.stub(Math, 'random').returns(0.4);
       win.AMP_CONFIG['e1'] = 0.5;
       win.AMP_CONFIG['e2'] = 0.1;
 
@@ -210,11 +212,11 @@ describe('isExperimentOn', () => {
   });
 });
 
-describe('toggleExperiment', () => {
+describes.sandboxed('toggleExperiment', {}, (env) => {
   let clock;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
     clock.tick(1);
   });
 
@@ -529,7 +531,7 @@ describes.fakeWin('url override', {}, (env) => {
   });
 });
 
-describe('isCanary', () => {
+describes.sandboxed('isCanary', {}, () => {
   it('should return value based on binary version', () => {
     const win = {
       AMP_CONFIG: {
@@ -542,7 +544,7 @@ describe('isCanary', () => {
   });
 });
 
-describe('getBinaryType', () => {
+describes.sandboxed('getBinaryType', {}, () => {
   it('should return correct type', () => {
     const win = {
       AMP_CONFIG: {
@@ -564,21 +566,22 @@ describe('getBinaryType', () => {
   });
 });
 
-describe('experiment branch tests', () => {
+describes.sandboxed('experiment branch tests', {}, (env) => {
   describe('#randomlySelectUnsetExperiments', () => {
     let accurateRandomStub;
     let cachedAccuratePrng;
-    let testExperimentSet;
+    let testExperimentList;
 
     beforeEach(() => {
       const experimentFrequency = 1.0;
-      testExperimentSet = {
-        testExperimentId: {
+      testExperimentList = [
+        {
+          experimentId: 'testExperimentId',
           isTrafficEligible: () => true,
           branches: ['branch1_id', 'branch2_id'],
         },
-      };
-      window.sandbox.win = {
+      ];
+      env.sandbox.win = {
         location: {
           hostname: 'test.server.name.com',
         },
@@ -590,7 +593,7 @@ describe('experiment branch tests', () => {
           querySelector: () => {},
         },
       };
-      accurateRandomStub = window.sandbox.stub().returns(-1);
+      accurateRandomStub = env.sandbox.stub().returns(-1);
       cachedAccuratePrng = RANDOM_NUMBER_GENERATORS.accuratePrng;
       RANDOM_NUMBER_GENERATORS.accuratePrng = accurateRandomStub;
     });
@@ -601,294 +604,310 @@ describe('experiment branch tests', () => {
 
     it('handles empty experiments list', () => {
       // Opt out of experiment.
-      toggleExperiment(window.sandbox.win, 'testExperimentId', false, true);
-      randomlySelectUnsetExperiments(window.sandbox.win, {});
+      toggleExperiment(env.sandbox.win, 'testExperimentId', false, true);
+      randomlySelectUnsetExperiments(env.sandbox.win, []);
       expect(
-        isExperimentOn(window.sandbox.win, 'testExperimentId'),
+        isExperimentOn(env.sandbox.win, 'testExperimentId'),
         'experiment is on'
       ).to.be.false;
-      expect(window.sandbox.win.__AMP_EXPERIMENT_BRANCHES).to.be.empty;
+      expect(env.sandbox.win.__AMP_EXPERIMENT_BRANCHES).to.be.empty;
     });
 
     it('handles experiment not diverted path', () => {
       // Opt out of experiment.
-      toggleExperiment(window.sandbox.win, 'testExperimentId', false, true);
-      randomlySelectUnsetExperiments(window.sandbox.win, testExperimentSet);
+      toggleExperiment(env.sandbox.win, 'testExperimentId', false, true);
+      randomlySelectUnsetExperiments(env.sandbox.win, testExperimentList);
       expect(
-        isExperimentOn(window.sandbox.win, 'testExperimentId'),
+        isExperimentOn(env.sandbox.win, 'testExperimentId'),
         'experiment is on'
       ).to.be.false;
-      expect(getExperimentBranch(window.sandbox.win, 'testExperimentId')).to.not
-        .be.ok;
+      expect(getExperimentBranch(env.sandbox.win, 'testExperimentId')).to.not.be
+        .ok;
     });
 
     it('handles experiment diverted path 1', () => {
       // Force experiment on.
-      toggleExperiment(window.sandbox.win, 'testExperimentId', true, true);
+      toggleExperiment(env.sandbox.win, 'testExperimentId', true, true);
       // force the control branch to be chosen by making the accurate PRNG
       // return a value < 0.5.
       RANDOM_NUMBER_GENERATORS.accuratePrng.onFirstCall().returns(0.3);
-      randomlySelectUnsetExperiments(window.sandbox.win, testExperimentSet);
+      randomlySelectUnsetExperiments(env.sandbox.win, testExperimentList);
       expect(
-        isExperimentOn(window.sandbox.win, 'testExperimentId'),
+        isExperimentOn(env.sandbox.win, 'testExperimentId'),
         'experiment is on'
       ).to.be.true;
-      expect(
-        getExperimentBranch(window.sandbox.win, 'testExperimentId')
-      ).to.equal('branch1_id');
+      expect(getExperimentBranch(env.sandbox.win, 'testExperimentId')).to.equal(
+        'branch1_id'
+      );
     });
 
     it('handles experiment diverted path 2', () => {
       // Force experiment on.
-      toggleExperiment(window.sandbox.win, 'testExperimentId', true, true);
+      toggleExperiment(env.sandbox.win, 'testExperimentId', true, true);
       // Force the experiment branch to be chosen by making the accurate PRNG
       // return a value > 0.5.
       RANDOM_NUMBER_GENERATORS.accuratePrng.onFirstCall().returns(0.6);
-      randomlySelectUnsetExperiments(window.sandbox.win, testExperimentSet);
+      randomlySelectUnsetExperiments(env.sandbox.win, testExperimentList);
       expect(
-        isExperimentOn(window.sandbox.win, 'testExperimentId'),
+        isExperimentOn(env.sandbox.win, 'testExperimentId'),
         'experiment is on'
       ).to.be.true;
-      expect(
-        getExperimentBranch(window.sandbox.win, 'testExperimentId')
-      ).to.equal('branch2_id');
+      expect(getExperimentBranch(env.sandbox.win, 'testExperimentId')).to.equal(
+        'branch2_id'
+      );
     });
 
     it('picks a branch if traffic eligible', () => {
-      toggleExperiment(window.sandbox.win, 'expt_0', true, true);
-      window.sandbox.win.trafficEligible = true;
-      const experimentInfo = {
-        'expt_0': {
+      toggleExperiment(env.sandbox.win, 'expt_0', true, true);
+      env.sandbox.win.trafficEligible = true;
+      const experimentInfo = [
+        {
+          experimentId: 'expt_0',
           isTrafficEligible: (win) => {
             return win.trafficEligible;
           },
           branches: ['0_0', '0_1'],
         },
-      };
+      ];
       RANDOM_NUMBER_GENERATORS.accuratePrng.returns(0.3);
-      randomlySelectUnsetExperiments(window.sandbox.win, experimentInfo);
-      expect(isExperimentOn(window.sandbox.win, 'expt_0')).to.be.true;
-      expect(getExperimentBranch(window.sandbox.win, 'expt_0')).to.equal('0_0');
+      randomlySelectUnsetExperiments(env.sandbox.win, experimentInfo);
+      expect(isExperimentOn(env.sandbox.win, 'expt_0')).to.be.true;
+      expect(getExperimentBranch(env.sandbox.win, 'expt_0')).to.equal('0_0');
     });
 
     it("doesn't pick a branch if traffic ineligible", () => {
-      toggleExperiment(window.sandbox.win, 'expt_0', true, true);
-      window.sandbox.win.trafficEligible = false;
-      const experimentInfo = {
-        'expt_0': {
+      toggleExperiment(env.sandbox.win, 'expt_0', true, true);
+      env.sandbox.win.trafficEligible = false;
+      const experimentInfo = [
+        {
+          experimentId: 'expt_0',
           isTrafficEligible: (win) => {
             return win.trafficEligible;
           },
           branches: ['0_0', '0_1'],
         },
-      };
+      ];
       RANDOM_NUMBER_GENERATORS.accuratePrng.returns(0.3);
-      randomlySelectUnsetExperiments(window.sandbox.win, experimentInfo);
-      expect(isExperimentOn(window.sandbox.win, 'expt_0')).to.be.true;
-      expect(getExperimentBranch(window.sandbox.win, 'expt_0')).to.be.null;
+      randomlySelectUnsetExperiments(env.sandbox.win, experimentInfo);
+      expect(isExperimentOn(env.sandbox.win, 'expt_0')).to.be.true;
+      expect(getExperimentBranch(env.sandbox.win, 'expt_0')).to.be.null;
     });
 
     it("doesn't pick a branch if no traffic eligibility function", () => {
-      toggleExperiment(window.sandbox.win, 'expt_0', true, true);
-      const experimentInfo = {
-        'expt_0': {
+      toggleExperiment(env.sandbox.win, 'expt_0', true, true);
+      const experimentInfo = [
+        {
+          experimentId: 'expt_0',
           isTrafficEligible: undefined,
           branches: ['0_0', '0_1'],
         },
-      };
+      ];
       RANDOM_NUMBER_GENERATORS.accuratePrng.returns(0.3);
-      randomlySelectUnsetExperiments(window.sandbox.win, experimentInfo);
-      expect(isExperimentOn(window.sandbox.win, 'expt_0')).to.be.true;
-      expect(getExperimentBranch(window.sandbox.win, 'expt_0')).to.be.null;
+      randomlySelectUnsetExperiments(env.sandbox.win, experimentInfo);
+      expect(isExperimentOn(env.sandbox.win, 'expt_0')).to.be.true;
+      expect(getExperimentBranch(env.sandbox.win, 'expt_0')).to.be.null;
     });
 
     it(
       "doesn't pick a branch if traffic becomes eligible after first " +
         'diversion',
       () => {
-        toggleExperiment(window.sandbox.win, 'expt_0', true, true);
-        window.sandbox.win.trafficEligible = false;
-        const experimentInfo = {
-          'expt_0': {
+        toggleExperiment(env.sandbox.win, 'expt_0', true, true);
+        env.sandbox.win.trafficEligible = false;
+        const experimentInfo = [
+          {
+            experimentId: 'expt_0',
             isTrafficEligible: (win) => {
               return win.trafficEligible;
             },
             branches: ['0_0', '0_1'],
           },
-        };
+        ];
         RANDOM_NUMBER_GENERATORS.accuratePrng.returns(0.3);
 
-        randomlySelectUnsetExperiments(window.sandbox.win, experimentInfo);
-        expect(isExperimentOn(window.sandbox.win, 'expt_0')).to.be.true;
-        expect(getExperimentBranch(window.sandbox.win, 'expt_0')).to.be.null;
+        randomlySelectUnsetExperiments(env.sandbox.win, experimentInfo);
+        expect(isExperimentOn(env.sandbox.win, 'expt_0')).to.be.true;
+        expect(getExperimentBranch(env.sandbox.win, 'expt_0')).to.be.null;
 
-        window.sandbox.win.trafficEligible = true;
+        env.sandbox.win.trafficEligible = true;
 
-        randomlySelectUnsetExperiments(window.sandbox.win, experimentInfo);
-        expect(isExperimentOn(window.sandbox.win, 'expt_0')).to.be.true;
-        expect(getExperimentBranch(window.sandbox.win, 'expt_0')).to.be.null;
+        randomlySelectUnsetExperiments(env.sandbox.win, experimentInfo);
+        expect(isExperimentOn(env.sandbox.win, 'expt_0')).to.be.true;
+        expect(getExperimentBranch(env.sandbox.win, 'expt_0')).to.be.null;
       }
     );
 
     it('handles multiple experiments', () => {
-      toggleExperiment(window.sandbox.win, 'expt_0', true, true);
-      toggleExperiment(window.sandbox.win, 'expt_1', false, true);
-      toggleExperiment(window.sandbox.win, 'expt_2', true, true);
-      toggleExperiment(window.sandbox.win, 'expt_3', true, true);
-
-      const experimentInfo = {
-        'expt_0': {
+      toggleExperiment(env.sandbox.win, 'expt_0', true, true);
+      toggleExperiment(env.sandbox.win, 'expt_1', false, true);
+      toggleExperiment(env.sandbox.win, 'expt_2', true, true);
+      toggleExperiment(env.sandbox.win, 'expt_3', true, true);
+
+      const experimentInfo = [
+        {
+          experimentId: 'expt_0',
           isTrafficEligible: () => true,
           branches: ['0_c', '0_e'],
         },
-        'expt_1': {
+        {
+          experimentId: 'expt_1',
           isTrafficEligible: () => true,
           branches: ['1_c', '1_e'],
         },
-        'expt_2': {
+        {
+          experimentId: 'expt_2',
           isTrafficEligible: () => true,
           branches: ['2_c', '2_e'],
         },
         // expt_3 omitted.
-      };
+      ];
       RANDOM_NUMBER_GENERATORS.accuratePrng.returns(0.6);
-      randomlySelectUnsetExperiments(window.sandbox.win, experimentInfo);
-      expect(isExperimentOn(window.sandbox.win, 'expt_0'), 'expt_0 is on').to.be
+      randomlySelectUnsetExperiments(env.sandbox.win, experimentInfo);
+      expect(isExperimentOn(env.sandbox.win, 'expt_0'), 'expt_0 is on').to.be
         .true;
-      expect(isExperimentOn(window.sandbox.win, 'expt_1'), 'expt_1 is on').to.be
+      expect(isExperimentOn(env.sandbox.win, 'expt_1'), 'expt_1 is on').to.be
         .false;
-      expect(isExperimentOn(window.sandbox.win, 'expt_2'), 'expt_2 is on').to.be
+      expect(isExperimentOn(env.sandbox.win, 'expt_2'), 'expt_2 is on').to.be
         .true;
       // Note: calling isExperimentOn('expt_3') would actually evaluate the
       // frequency for expt_3, possibly enabling it.  Since we wanted it to be
       // omitted altogether, we'll evaluate it only via its branch.
-      expect(getExperimentBranch(window.sandbox.win, 'expt_0')).to.equal('0_e');
-      expect(getExperimentBranch(window.sandbox.win, 'expt_1')).to.not.be.ok;
-      expect(getExperimentBranch(window.sandbox.win, 'expt_2')).to.equal('2_e');
-      expect(getExperimentBranch(window.sandbox.win, 'expt_3')).to.not.be.ok;
+      expect(getExperimentBranch(env.sandbox.win, 'expt_0')).to.equal('0_e');
+      expect(getExperimentBranch(env.sandbox.win, 'expt_1')).to.not.be.ok;
+      expect(getExperimentBranch(env.sandbox.win, 'expt_2')).to.equal('2_e');
+      expect(getExperimentBranch(env.sandbox.win, 'expt_3')).to.not.be.ok;
     });
 
     it('handles multi-way branches', () => {
-      toggleExperiment(window.sandbox.win, 'expt_0', true, true);
-      const experimentInfo = {
-        'expt_0': {
+      toggleExperiment(env.sandbox.win, 'expt_0', true, true);
+      const experimentInfo = [
+        {
+          experimentId: 'expt_0',
           isTrafficEligible: () => true,
           branches: ['0_0', '0_1', '0_2', '0_3', '0_4'],
         },
-      };
+      ];
       RANDOM_NUMBER_GENERATORS.accuratePrng.returns(0.7);
-      randomlySelectUnsetExperiments(window.sandbox.win, experimentInfo);
-      expect(isExperimentOn(window.sandbox.win, 'expt_0'), 'expt_0 is on').to.be
+      randomlySelectUnsetExperiments(env.sandbox.win, experimentInfo);
+      expect(isExperimentOn(env.sandbox.win, 'expt_0'), 'expt_0 is on').to.be
         .true;
-      expect(getExperimentBranch(window.sandbox.win, 'expt_0')).to.equal('0_3');
+      expect(getExperimentBranch(env.sandbox.win, 'expt_0')).to.equal('0_3');
     });
 
     it('handles multiple experiments with multi-way branches', () => {
-      toggleExperiment(window.sandbox.win, 'expt_0', true, true);
-      toggleExperiment(window.sandbox.win, 'expt_1', false, true);
-      toggleExperiment(window.sandbox.win, 'expt_2', true, true);
-      toggleExperiment(window.sandbox.win, 'expt_3', true, true);
-
-      const experimentInfo = {
-        'expt_0': {
+      toggleExperiment(env.sandbox.win, 'expt_0', true, true);
+      toggleExperiment(env.sandbox.win, 'expt_1', false, true);
+      toggleExperiment(env.sandbox.win, 'expt_2', true, true);
+      toggleExperiment(env.sandbox.win, 'expt_3', true, true);
+
+      const experimentInfo = [
+        {
+          experimentId: 'expt_0',
           isTrafficEligible: () => true,
           branches: ['0_0', '0_1', '0_2', '0_3', '0_4'],
         },
-        'expt_1': {
+        {
+          experimentId: 'expt_1',
           isTrafficEligible: () => true,
           branches: ['1_0', '1_1', '1_2', '1_3', '1_4'],
         },
-        'expt_2': {
+        {
+          experimentId: 'expt_2',
           isTrafficEligible: () => true,
           branches: ['2_0', '2_1', '2_2', '2_3', '2_4'],
         },
-      };
+      ];
       RANDOM_NUMBER_GENERATORS.accuratePrng.onFirstCall().returns(0.7);
       RANDOM_NUMBER_GENERATORS.accuratePrng.onSecondCall().returns(0.3);
-      randomlySelectUnsetExperiments(window.sandbox.win, experimentInfo);
-      expect(isExperimentOn(window.sandbox.win, 'expt_0'), 'expt_0 is on').to.be
+      randomlySelectUnsetExperiments(env.sandbox.win, experimentInfo);
+      expect(isExperimentOn(env.sandbox.win, 'expt_0'), 'expt_0 is on').to.be
         .true;
-      expect(isExperimentOn(window.sandbox.win, 'expt_1'), 'expt_1 is on').to.be
+      expect(isExperimentOn(env.sandbox.win, 'expt_1'), 'expt_1 is on').to.be
         .false;
-      expect(isExperimentOn(window.sandbox.win, 'expt_2'), 'expt_2 is on').to.be
+      expect(isExperimentOn(env.sandbox.win, 'expt_2'), 'expt_2 is on').to.be
         .true;
       // Note: calling isExperimentOn('expt_3') would actually evaluate the
       // frequency for expt_3, possibly enabling it.  Since we wanted it to be
       // omitted altogether, we'll evaluate it only via its branch.
-      expect(getExperimentBranch(window.sandbox.win, 'expt_0')).to.equal('0_3');
-      expect(getExperimentBranch(window.sandbox.win, 'expt_1')).to.not.be.ok;
-      expect(getExperimentBranch(window.sandbox.win, 'expt_2')).to.equal('2_1');
-      expect(getExperimentBranch(window.sandbox.win, 'expt_3')).to.not.be.ok;
+      expect(getExperimentBranch(env.sandbox.win, 'expt_0')).to.equal('0_3');
+      expect(getExperimentBranch(env.sandbox.win, 'expt_1')).to.not.be.ok;
+      expect(getExperimentBranch(env.sandbox.win, 'expt_2')).to.equal('2_1');
+      expect(getExperimentBranch(env.sandbox.win, 'expt_3')).to.not.be.ok;
     });
 
     it('should not process the same experiment twice', () => {
-      const exptAInfo = {
-        'fooExpt': {
+      const exptAInfo = [
+        {
+          experimentId: 'fooExpt',
           isTrafficEligible: () => true,
           branches: ['012345', '987654'],
         },
-      };
-      const exptBInfo = {
-        'fooExpt': {
+      ];
+      const exptBInfo = [
+        {
+          experimentId: 'fooExpt',
           isTrafficEligible: () => true,
           branches: ['246810', '108642'],
         },
-      };
-      toggleExperiment(window.sandbox.win, 'fooExpt', false, true);
-      randomlySelectUnsetExperiments(window.sandbox.win, exptAInfo);
-      randomlySelectUnsetExperiments(window.sandbox.win, exptBInfo);
+      ];
+      toggleExperiment(env.sandbox.win, 'fooExpt', false, true);
+      randomlySelectUnsetExperiments(env.sandbox.win, exptAInfo);
+      randomlySelectUnsetExperiments(env.sandbox.win, exptBInfo);
       // Even though we tried to set up a second time, using a config
       // parameter that should ensure that the experiment was activated, the
       // experiment framework should evaluate each experiment only once per
       // page and should not enable it.
-      expect(isExperimentOn(window.sandbox.win, 'fooExpt')).to.be.false;
-      expect(getExperimentBranch(window.sandbox.win, 'fooExpt')).to.not.be.ok;
+      expect(isExperimentOn(env.sandbox.win, 'fooExpt')).to.be.false;
+      expect(getExperimentBranch(env.sandbox.win, 'fooExpt')).to.not.be.ok;
     });
 
     it('returns empty experiments map', () => {
       // Opt out of experiment.
-      toggleExperiment(window.sandbox.win, 'testExperimentId', false, true);
-      const exps = randomlySelectUnsetExperiments(window.sandbox.win, {});
+      toggleExperiment(env.sandbox.win, 'testExperimentId', false, true);
+      const exps = randomlySelectUnsetExperiments(env.sandbox.win, []);
       expect(exps).to.be.empty;
     });
 
     it('returns map with experiment diverted path 1', () => {
       // Force experiment on.
-      toggleExperiment(window.sandbox.win, 'testExperimentId', true, true);
+      toggleExperiment(env.sandbox.win, 'testExperimentId', true, true);
       // force the control branch to be chosen by making the accurate PRNG
       // return a value < 0.5.
       RANDOM_NUMBER_GENERATORS.accuratePrng.onFirstCall().returns(0.3);
       const exps = randomlySelectUnsetExperiments(
-        window.sandbox.win,
-        testExperimentSet
+        env.sandbox.win,
+        testExperimentList
       );
       expect(exps).to.deep.equal({'testExperimentId': 'branch1_id'});
     });
 
     it('returns map with multiple experiments with multi-way branches', () => {
-      toggleExperiment(window.sandbox.win, 'expt_0', true, true);
-      toggleExperiment(window.sandbox.win, 'expt_1', false, true);
-      toggleExperiment(window.sandbox.win, 'expt_2', true, true);
-      toggleExperiment(window.sandbox.win, 'expt_3', true, true);
-
-      const experimentInfo = {
-        'expt_0': {
+      toggleExperiment(env.sandbox.win, 'expt_0', true, true);
+      toggleExperiment(env.sandbox.win, 'expt_1', false, true);
+      toggleExperiment(env.sandbox.win, 'expt_2', true, true);
+      toggleExperiment(env.sandbox.win, 'expt_3', true, true);
+
+      const experimentInfo = [
+        {
+          experimentId: 'expt_0',
           isTrafficEligible: () => true,
           branches: ['0_0', '0_1', '0_2', '0_3', '0_4'],
         },
-        'expt_1': {
+        {
+          experimentId: 'expt_1',
           isTrafficEligible: () => true,
           branches: ['1_0', '1_1', '1_2', '1_3', '1_4'],
         },
-        'expt_2': {
+        {
+          experimentId: 'expt_2',
           isTrafficEligible: () => true,
           branches: ['2_0', '2_1', '2_2', '2_3', '2_4'],
         },
-      };
+      ];
       RANDOM_NUMBER_GENERATORS.accuratePrng.onFirstCall().returns(0.7);
       RANDOM_NUMBER_GENERATORS.accuratePrng.onSecondCall().returns(0.3);
       const exps = randomlySelectUnsetExperiments(
-        window.sandbox.win,
+        env.sandbox.win,
         experimentInfo
       );
 
@@ -899,3 +918,18 @@ describe('experiment branch tests', () => {
     });
   });
 });
+
+describes.fakeWin('getActiveExperimentBranches', {}, (env) => {
+  it('should return an empty object if no active branches', () => {
+    expect(getActiveExperimentBranches(env.win)).to.eql({});
+  });
+
+  it('should return obj containing all branches', () => {
+    forceExperimentBranch(env.win, 'exp1', '1234');
+    forceExperimentBranch(env.win, 'exp2', '5678');
+    expect(getActiveExperimentBranches(env.win)).to.eql({
+      exp1: '1234',
+      exp2: '5678',
+    });
+  });
+});
diff --git a/test/unit/test-exponential-backoff.js b/test/unit/test-exponential-backoff.js
deleted file mode 100644
index fa9537269e7e2..0000000000000
--- a/test/unit/test-exponential-backoff.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {
-  exponentialBackoff,
-  exponentialBackoffClock,
-} from '../../src/exponential-backoff';
-
-describe('exponentialBackoff', () => {
-  let clock;
-
-  beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
-    window.sandbox.stub(Math, 'random').callsFake(() => 1);
-  });
-
-  it('should backoff exponentially', () => {
-    let count = 0;
-    const backoff = exponentialBackoff();
-    const backoff2 = exponentialBackoff();
-    const increment = () => {
-      count++;
-    };
-
-    backoff(increment);
-    expect(count).to.equal(0);
-    clock.tick(600);
-    expect(count).to.equal(0);
-    // Account for jitter
-    clock.tick(701);
-    expect(count).to.equal(1);
-
-    // Round 2
-    backoff(increment);
-    expect(count).to.equal(1);
-    clock.tick(1200);
-    expect(count).to.equal(1);
-    clock.tick(1800);
-    expect(count).to.equal(2);
-
-    // Round 3
-    backoff(increment);
-    expect(count).to.equal(2);
-    clock.tick(2200);
-    expect(count).to.equal(2);
-    clock.tick(3200);
-    expect(count).to.equal(3);
-
-    // 2nd independent backoff
-    backoff2(increment);
-    expect(count).to.equal(3);
-    clock.tick(600);
-    expect(count).to.equal(3);
-    clock.tick(701);
-    expect(count).to.equal(4);
-  });
-
-  it('should exponentiate correctly', () => {
-    const backoff = exponentialBackoffClock();
-    const backoff2 = exponentialBackoffClock();
-
-    // base of 2 = 1000 - 300 (30% jitter) = 700
-    expect(backoff()).to.equal(700);
-    expect(backoff()).to.equal(1400);
-    // tick backoff2
-    expect(backoff2()).to.equal(700);
-    // back to backoff
-    expect(backoff()).to.equal(2800);
-    expect(backoff()).to.equal(5600);
-    expect(backoff()).to.equal(11200);
-    expect(backoff()).to.equal(22400);
-
-    expect(backoff2()).to.equal(1400);
-    expect(backoff2()).to.equal(2800);
-  });
-});
diff --git a/test/unit/test-extension-analytics.js b/test/unit/test-extension-analytics.js
index 5bdf29beaf59a..1cae45f66b8a5 100644
--- a/test/unit/test-extension-analytics.js
+++ b/test/unit/test-extension-analytics.js
@@ -86,9 +86,8 @@ describes.realWin(
               )
             ).to.be.ok;
             return timer.promise(50).then(() => {
-              const analyticsEle = baseEle.element.querySelector(
-                'amp-analytics'
-              );
+              const analyticsEle =
+                baseEle.element.querySelector('amp-analytics');
               expect(analyticsEle).to.not.be.null;
               expect(analyticsEle.getAttribute('sandbox')).to.equal('true');
               expect(analyticsEle.getAttribute('trigger')).to.equal(
@@ -265,7 +264,7 @@ describes.realWin(
         parentEle = env.win.document.createElement('amp-test');
         parentEle.setAttribute('layout', 'nodisplay');
         env.win.document.body.appendChild(parentEle);
-        const buildPromise = parentEle.build();
+        const buildPromise = parentEle.buildInternal();
         builder = new CustomEventReporterBuilder(parentEle);
         reporter = builder.track('test', 'fake.test').build();
         return buildPromise;
@@ -352,7 +351,7 @@ describes.realWin(
           parentEle = env.win.document.createElement('amp-test');
           parentEle.setAttribute('layout', 'nodisplay');
           env.win.document.body.appendChild(parentEle);
-          return parentEle.build();
+          return parentEle.buildInternal();
         });
 
         it('should insert analytics after LOAD_START', function* () {
@@ -410,7 +409,7 @@ describes.realWin(
           parentEle = env.win.document.createElement('amp-test');
           parentEle.setAttribute('layout', 'nodisplay');
           env.win.document.body.appendChild(parentEle);
-          return parentEle.build();
+          return parentEle.buildInternal();
         });
 
         it('should insert and remove analytics', function* () {
@@ -444,7 +443,7 @@ describes.realWin(
           parentEle = env.win.document.createElement('amp-test');
           parentEle.setAttribute('layout', 'nodisplay');
           env.win.document.body.appendChild(parentEle);
-          return parentEle.build();
+          return parentEle.buildInternal();
         });
 
         it('should NOT insert analytics when relayout', function* () {
@@ -491,7 +490,7 @@ describes.realWin(
           parentEle = env.win.document.createElement('amp-test');
           parentEle.setAttribute('layout', 'nodisplay');
           env.win.document.body.appendChild(parentEle);
-          return parentEle.build();
+          return parentEle.buildInternal();
         });
 
         it('should insert analytics when relayout', function* () {
diff --git a/test/unit/test-extension-location.js b/test/unit/test-extension-location.js
deleted file mode 100644
index 03d183295b047..0000000000000
--- a/test/unit/test-extension-location.js
+++ /dev/null
@@ -1,331 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {
-  calculateEntryPointScriptUrl,
-  calculateExtensionScriptUrl,
-  parseExtensionUrl,
-} from '../../src/service/extension-location';
-import {initLogConstructor, resetLogConstructorForTesting} from '../../src/log';
-
-describes.sandboxed('Extension Location', {}, () => {
-  describe('get correct script source', () => {
-    beforeEach(() => {
-      // These functions must not rely on log for cases in SW.
-      resetLogConstructorForTesting();
-    });
-
-    afterEach(() => {
-      initLogConstructor();
-      window.__AMP_MODE = {};
-    });
-
-    it('with local mode', () => {
-      window.__AMP_MODE = {rtvVersion: '123'};
-      const script = calculateExtensionScriptUrl(
-        {
-          pathname: 'examples/ads.amp.html',
-          host: 'localhost:8000',
-          protocol: 'http:',
-        },
-        'amp-ad',
-        /*opt_extensionVersion*/ undefined,
-        true
-      );
-      expect(script).to.equal(
-        'http://localhost:8000/dist/rtv/123/v0/amp-ad-0.1.js'
-      );
-    });
-
-    it('with remote mode', () => {
-      window.__AMP_MODE = {rtvVersion: '123'};
-      const script = calculateExtensionScriptUrl(
-        {
-          pathname: 'examples/ads.amp.html',
-          host: 'localhost:8000',
-          protocol: 'http:',
-        },
-        'amp-ad',
-        /*opt_extensionVersion*/ undefined,
-        false
-      );
-      expect(script).to.equal(
-        'https://cdn.ampproject.org/rtv/123/v0/amp-ad-0.1.js'
-      );
-    });
-
-    it('should allow no versions', () => {
-      window.__AMP_MODE = {rtvVersion: '123'};
-      const script = calculateExtensionScriptUrl(
-        {
-          pathname: 'examples/ads.amp.html',
-          host: 'localhost:8000',
-          protocol: 'http:',
-        },
-        'no-version',
-        /* version is empty but defined */ '',
-        true
-      );
-      expect(script).to.equal(
-        'http://localhost:8000/dist/rtv/123/v0/no-version.js'
-      );
-    });
-  });
-
-  describe('get correct entry point source', () => {
-    beforeEach(() => {
-      // These functions must not rely on log for cases in SW.
-      resetLogConstructorForTesting();
-    });
-
-    afterEach(() => {
-      initLogConstructor();
-    });
-
-    it('with local mode', () => {
-      const script = calculateEntryPointScriptUrl(
-        {
-          pathname: 'examples/ads.amp.html',
-          host: 'localhost:8000',
-          protocol: 'http:',
-        },
-        'sw',
-        true
-      );
-      expect(script).to.equal('http://localhost:8000/dist/sw.js');
-    });
-
-    it('with remote mode', () => {
-      window.__AMP_MODE = {rtvVersion: '123'};
-      const script = calculateEntryPointScriptUrl(
-        {
-          pathname: 'examples/ads.amp.html',
-          host: 'localhost:8000',
-          protocol: 'http:',
-        },
-        'sw',
-        /* isLocalDev */ false
-      );
-      expect(script).to.equal('https://cdn.ampproject.org/sw.js');
-    });
-
-    it('with remote mode & rtv', () => {
-      window.__AMP_MODE = {rtvVersion: '123'};
-      const script = calculateEntryPointScriptUrl(
-        {
-          pathname: 'examples/ads.amp.html',
-          host: 'localhost:8000',
-          protocol: 'http:',
-        },
-        'ww',
-        /* isLocalDev */ false,
-        /* opt_rtv */ true
-      );
-      expect(script).to.equal('https://cdn.ampproject.org/rtv/123/ww.js');
-    });
-  });
-
-  describe('get correct URL parts', () => {
-    it('non-RTV urls', () => {
-      const urlParts = parseExtensionUrl(
-        'https://cdn.ampproject.org/v0/amp-ad-1.0.js'
-      );
-      expect(urlParts.extensionId).to.equal('amp-ad');
-      expect(urlParts.extensionVersion).to.equal('1.0');
-    });
-
-    it('RTV urls', () => {
-      const urlParts = parseExtensionUrl(
-        'https://cdn.ampproject.org/rtv/123/v0/amp-ad-0.1.js'
-      );
-      expect(urlParts.extensionId).to.equal('amp-ad');
-      expect(urlParts.extensionVersion).to.equal('0.1');
-    });
-
-    it('extensions with "latest" version', () => {
-      const urlParts = parseExtensionUrl(
-        'https://cdn.ampproject.org/v0/amp-ad-latest.js'
-      );
-      expect(urlParts.extensionId).to.equal('amp-ad');
-      expect(urlParts.extensionVersion).to.equal('latest');
-    });
-
-    it('extensions with .max suffix', () => {
-      const urlParts = parseExtensionUrl(
-        'https://cdn.ampproject.org/v0/amp-ad-latest.max.js'
-      );
-      expect(urlParts.extensionId).to.equal('amp-ad');
-      expect(urlParts.extensionVersion).to.equal('latest');
-    });
-  });
-});
-
-describes.sandboxed('Module Extension Location', {}, () => {
-  describe('get correct script source', () => {
-    beforeEach(() => {
-      // These functions must not rely on log for cases in SW.
-      resetLogConstructorForTesting();
-    });
-
-    afterEach(() => {
-      initLogConstructor();
-      window.__AMP_MODE = {};
-    });
-
-    it('with local mode', () => {
-      window.__AMP_MODE = {rtvVersion: '123', esm: 1};
-      const script = calculateExtensionScriptUrl(
-        {
-          pathname: 'examples/ads.amp.html',
-          host: 'localhost:8000',
-          protocol: 'http:',
-        },
-        'amp-ad',
-        /*opt_extensionVersion*/ undefined,
-        true
-      );
-      expect(script).to.equal(
-        'http://localhost:8000/dist/rtv/123/v0/amp-ad-0.1.mjs'
-      );
-    });
-
-    it('with remote mode', () => {
-      window.__AMP_MODE = {rtvVersion: '123', esm: 1};
-      const script = calculateExtensionScriptUrl(
-        {
-          pathname: 'examples/ads.amp.html',
-          host: 'localhost:8000',
-          protocol: 'http:',
-        },
-        'amp-ad',
-        /*opt_extensionVersion*/ undefined,
-        false
-      );
-      expect(script).to.equal(
-        'https://cdn.ampproject.org/rtv/123/v0/amp-ad-0.1.mjs'
-      );
-    });
-
-    it('should allow no versions', () => {
-      window.__AMP_MODE = {rtvVersion: '123', esm: 1};
-      const script = calculateExtensionScriptUrl(
-        {
-          pathname: 'examples/ads.amp.html',
-          host: 'localhost:8000',
-          protocol: 'http:',
-        },
-        'no-version',
-        /* version is empty but defined */ '',
-        true
-      );
-      expect(script).to.equal(
-        'http://localhost:8000/dist/rtv/123/v0/no-version.mjs'
-      );
-    });
-  });
-
-  describe('get correct entry point source', () => {
-    beforeEach(() => {
-      // These functions must not rely on log for cases in SW.
-      resetLogConstructorForTesting();
-    });
-
-    afterEach(() => {
-      initLogConstructor();
-    });
-
-    it('with local mode', () => {
-      window.__AMP_MODE = {esm: 1};
-      const script = calculateEntryPointScriptUrl(
-        {
-          pathname: 'examples/ads.amp.html',
-          host: 'localhost:8000',
-          protocol: 'http:',
-        },
-        'sw',
-        true
-      );
-      expect(script).to.equal('http://localhost:8000/dist/sw.mjs');
-    });
-
-    it('with remote mode', () => {
-      window.__AMP_MODE = {rtvVersion: '123', esm: 1};
-      const script = calculateEntryPointScriptUrl(
-        {
-          pathname: 'examples/ads.amp.html',
-          host: 'localhost:8000',
-          protocol: 'http:',
-        },
-        'sw',
-        /* isLocalDev */ false
-      );
-      expect(script).to.equal('https://cdn.ampproject.org/sw.mjs');
-    });
-
-    it('with remote mode & rtv', () => {
-      window.__AMP_MODE = {rtvVersion: '123', esm: 1};
-      const script = calculateEntryPointScriptUrl(
-        {
-          pathname: 'examples/ads.amp.html',
-          host: 'localhost:8000',
-          protocol: 'http:',
-        },
-        'ww',
-        /* isLocalDev */ false,
-        /* opt_rtv */ true
-      );
-      expect(script).to.equal('https://cdn.ampproject.org/rtv/123/ww.mjs');
-    });
-  });
-
-  describe('get correct URL parts', () => {
-    it('non-RTV urls', () => {
-      window.__AMP_MODE = {esm: 1};
-      const urlParts = parseExtensionUrl(
-        'https://cdn.ampproject.org/v0/amp-ad-1.0.mjs'
-      );
-      expect(urlParts.extensionId).to.equal('amp-ad');
-      expect(urlParts.extensionVersion).to.equal('1.0');
-    });
-
-    it('RTV urls', () => {
-      window.__AMP_MODE = {esm: 1};
-      const urlParts = parseExtensionUrl(
-        'https://cdn.ampproject.org/rtv/123/v0/amp-ad-0.1.mjs'
-      );
-      expect(urlParts.extensionId).to.equal('amp-ad');
-      expect(urlParts.extensionVersion).to.equal('0.1');
-    });
-
-    it('extensions with "latest" version', () => {
-      window.__AMP_MODE = {esm: 1};
-      const urlParts = parseExtensionUrl(
-        'https://cdn.ampproject.org/v0/amp-ad-latest.mjs'
-      );
-      expect(urlParts.extensionId).to.equal('amp-ad');
-      expect(urlParts.extensionVersion).to.equal('latest');
-    });
-
-    it('extensions with .max suffix', () => {
-      window.__AMP_MODE = {esm: 1};
-      const urlParts = parseExtensionUrl(
-        'https://cdn.ampproject.org/v0/amp-ad-latest.max.mjs'
-      );
-      expect(urlParts.extensionId).to.equal('amp-ad');
-      expect(urlParts.extensionVersion).to.equal('latest');
-    });
-  });
-});
diff --git a/test/unit/test-extension-script.js b/test/unit/test-extension-script.js
new file mode 100644
index 0000000000000..66c3250902411
--- /dev/null
+++ b/test/unit/test-extension-script.js
@@ -0,0 +1,442 @@
+/**
+ * Copyright 2016 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.
+ */
+
+import {
+  calculateEntryPointScriptUrl,
+  calculateExtensionScriptUrl,
+  getExtensionScripts,
+  parseExtensionUrl,
+} from '../../src/service/extension-script';
+import {createElementWithAttributes} from '../../src/dom';
+import {initLogConstructor, resetLogConstructorForTesting} from '../../src/log';
+
+describes.sandboxed('Extension Location', {}, () => {
+  describe('get correct script source', () => {
+    beforeEach(() => {
+      // These functions must not rely on log for cases in SW.
+      resetLogConstructorForTesting();
+    });
+
+    afterEach(() => {
+      initLogConstructor();
+      window.__AMP_MODE = {};
+    });
+
+    it('with local mode', () => {
+      window.__AMP_MODE = {rtvVersion: '123'};
+      const script = calculateExtensionScriptUrl(
+        {
+          pathname: 'examples/ads.amp.html',
+          host: 'localhost:8000',
+          protocol: 'http:',
+        },
+        'amp-ad',
+        '0.1',
+        true
+      );
+      expect(script).to.equal(
+        'http://localhost:8000/dist/rtv/123/v0/amp-ad-0.1.js'
+      );
+    });
+
+    it('with remote mode', () => {
+      window.__AMP_MODE = {rtvVersion: '123'};
+      const script = calculateExtensionScriptUrl(
+        {
+          pathname: 'examples/ads.amp.html',
+          host: 'localhost:8000',
+          protocol: 'http:',
+        },
+        'amp-ad',
+        '1.0',
+        false
+      );
+      expect(script).to.equal(
+        'https://cdn.ampproject.org/rtv/123/v0/amp-ad-1.0.js'
+      );
+    });
+
+    it('should allow no versions', () => {
+      window.__AMP_MODE = {rtvVersion: '123'};
+      const script = calculateExtensionScriptUrl(
+        {
+          pathname: 'examples/ads.amp.html',
+          host: 'localhost:8000',
+          protocol: 'http:',
+        },
+        'no-version',
+        /* version is empty but defined */ '',
+        true
+      );
+      expect(script).to.equal(
+        'http://localhost:8000/dist/rtv/123/v0/no-version.js'
+      );
+    });
+  });
+
+  describe('get correct entry point source', () => {
+    beforeEach(() => {
+      // These functions must not rely on log for cases in SW.
+      resetLogConstructorForTesting();
+    });
+
+    afterEach(() => {
+      initLogConstructor();
+    });
+
+    it('with local mode', () => {
+      const script = calculateEntryPointScriptUrl(
+        {
+          pathname: 'examples/ads.amp.html',
+          host: 'localhost:8000',
+          protocol: 'http:',
+        },
+        'sw',
+        true
+      );
+      expect(script).to.equal('http://localhost:8000/dist/sw.js');
+    });
+
+    it('with remote mode', () => {
+      window.__AMP_MODE = {rtvVersion: '123'};
+      const script = calculateEntryPointScriptUrl(
+        {
+          pathname: 'examples/ads.amp.html',
+          host: 'localhost:8000',
+          protocol: 'http:',
+        },
+        'sw',
+        /* isLocalDev */ false
+      );
+      expect(script).to.equal('https://cdn.ampproject.org/sw.js');
+    });
+
+    it('with remote mode & rtv', () => {
+      window.__AMP_MODE = {rtvVersion: '123'};
+      const script = calculateEntryPointScriptUrl(
+        {
+          pathname: 'examples/ads.amp.html',
+          host: 'localhost:8000',
+          protocol: 'http:',
+        },
+        'ww',
+        /* isLocalDev */ false,
+        /* opt_rtv */ true
+      );
+      expect(script).to.equal('https://cdn.ampproject.org/rtv/123/ww.js');
+    });
+  });
+
+  describe('get correct URL parts', () => {
+    it('non-RTV urls', () => {
+      const urlParts = parseExtensionUrl(
+        'https://cdn.ampproject.org/v0/amp-ad-1.0.js'
+      );
+      expect(urlParts.extensionId).to.equal('amp-ad');
+      expect(urlParts.extensionVersion).to.equal('1.0');
+    });
+
+    it('RTV urls', () => {
+      const urlParts = parseExtensionUrl(
+        'https://cdn.ampproject.org/rtv/123/v0/amp-ad-0.1.js'
+      );
+      expect(urlParts.extensionId).to.equal('amp-ad');
+      expect(urlParts.extensionVersion).to.equal('0.1');
+    });
+
+    it('extensions with "latest" version', () => {
+      const urlParts = parseExtensionUrl(
+        'https://cdn.ampproject.org/v0/amp-ad-latest.js'
+      );
+      expect(urlParts.extensionId).to.equal('amp-ad');
+      expect(urlParts.extensionVersion).to.equal('latest');
+    });
+
+    it('extensions with .max suffix', () => {
+      const urlParts = parseExtensionUrl(
+        'https://cdn.ampproject.org/v0/amp-ad-latest.max.js'
+      );
+      expect(urlParts.extensionId).to.equal('amp-ad');
+      expect(urlParts.extensionVersion).to.equal('latest');
+    });
+
+    it('returns null for non-extensions', () => {
+      const urlParts = parseExtensionUrl('https://cdn.ampproject.org/v0.js');
+      expect(urlParts).to.be.null;
+    });
+  });
+});
+
+describes.sandboxed('Module Extension Location', {}, () => {
+  describe('get correct script source', () => {
+    beforeEach(() => {
+      // These functions must not rely on log for cases in SW.
+      resetLogConstructorForTesting();
+    });
+
+    afterEach(() => {
+      initLogConstructor();
+      window.__AMP_MODE = {};
+    });
+
+    it('with local mode', () => {
+      window.__AMP_MODE = {rtvVersion: '123', esm: 1};
+      const script = calculateExtensionScriptUrl(
+        {
+          pathname: 'examples/ads.amp.html',
+          host: 'localhost:8000',
+          protocol: 'http:',
+        },
+        'amp-ad',
+        '1.0',
+        true
+      );
+      expect(script).to.equal(
+        'http://localhost:8000/dist/rtv/123/v0/amp-ad-1.0.mjs'
+      );
+    });
+
+    it('with remote mode', () => {
+      window.__AMP_MODE = {rtvVersion: '123', esm: 1};
+      const script = calculateExtensionScriptUrl(
+        {
+          pathname: 'examples/ads.amp.html',
+          host: 'localhost:8000',
+          protocol: 'http:',
+        },
+        'amp-ad',
+        '0.1',
+        false
+      );
+      expect(script).to.equal(
+        'https://cdn.ampproject.org/rtv/123/v0/amp-ad-0.1.mjs'
+      );
+    });
+
+    it('should allow no versions', () => {
+      window.__AMP_MODE = {rtvVersion: '123', esm: 1};
+      const script = calculateExtensionScriptUrl(
+        {
+          pathname: 'examples/ads.amp.html',
+          host: 'localhost:8000',
+          protocol: 'http:',
+        },
+        'no-version',
+        /* version is empty but defined */ '',
+        true
+      );
+      expect(script).to.equal(
+        'http://localhost:8000/dist/rtv/123/v0/no-version.mjs'
+      );
+    });
+  });
+
+  describe('get correct entry point source', () => {
+    beforeEach(() => {
+      // These functions must not rely on log for cases in SW.
+      resetLogConstructorForTesting();
+    });
+
+    afterEach(() => {
+      initLogConstructor();
+    });
+
+    it('with local mode', () => {
+      window.__AMP_MODE = {esm: 1};
+      const script = calculateEntryPointScriptUrl(
+        {
+          pathname: 'examples/ads.amp.html',
+          host: 'localhost:8000',
+          protocol: 'http:',
+        },
+        'sw',
+        true
+      );
+      expect(script).to.equal('http://localhost:8000/dist/sw.mjs');
+    });
+
+    it('with remote mode', () => {
+      window.__AMP_MODE = {rtvVersion: '123', esm: 1};
+      const script = calculateEntryPointScriptUrl(
+        {
+          pathname: 'examples/ads.amp.html',
+          host: 'localhost:8000',
+          protocol: 'http:',
+        },
+        'sw',
+        /* isLocalDev */ false
+      );
+      expect(script).to.equal('https://cdn.ampproject.org/sw.mjs');
+    });
+
+    it('with remote mode & rtv', () => {
+      window.__AMP_MODE = {rtvVersion: '123', esm: 1};
+      const script = calculateEntryPointScriptUrl(
+        {
+          pathname: 'examples/ads.amp.html',
+          host: 'localhost:8000',
+          protocol: 'http:',
+        },
+        'ww',
+        /* isLocalDev */ false,
+        /* opt_rtv */ true
+      );
+      expect(script).to.equal('https://cdn.ampproject.org/rtv/123/ww.mjs');
+    });
+  });
+
+  describe('get correct URL parts', () => {
+    it('non-RTV urls', () => {
+      window.__AMP_MODE = {esm: 1};
+      const urlParts = parseExtensionUrl(
+        'https://cdn.ampproject.org/v0/amp-ad-1.0.mjs'
+      );
+      expect(urlParts.extensionId).to.equal('amp-ad');
+      expect(urlParts.extensionVersion).to.equal('1.0');
+    });
+
+    it('RTV urls', () => {
+      window.__AMP_MODE = {esm: 1};
+      const urlParts = parseExtensionUrl(
+        'https://cdn.ampproject.org/rtv/123/v0/amp-ad-0.1.mjs'
+      );
+      expect(urlParts.extensionId).to.equal('amp-ad');
+      expect(urlParts.extensionVersion).to.equal('0.1');
+    });
+
+    it('extensions with "latest" version', () => {
+      window.__AMP_MODE = {esm: 1};
+      const urlParts = parseExtensionUrl(
+        'https://cdn.ampproject.org/v0/amp-ad-latest.mjs'
+      );
+      expect(urlParts.extensionId).to.equal('amp-ad');
+      expect(urlParts.extensionVersion).to.equal('latest');
+    });
+
+    it('extensions with .max suffix', () => {
+      window.__AMP_MODE = {esm: 1};
+      const urlParts = parseExtensionUrl(
+        'https://cdn.ampproject.org/v0/amp-ad-latest.max.mjs'
+      );
+      expect(urlParts.extensionId).to.equal('amp-ad');
+      expect(urlParts.extensionVersion).to.equal('latest');
+    });
+  });
+});
+
+describes.fakeWin('getExtensionScripts', {}, (env) => {
+  let win, doc;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+
+    doc.head.appendChild(
+      createElementWithAttributes(doc, 'script', {
+        'id': 'amp-ext1-0_1-new-version',
+        'i-amphtml-loaded-new-version': '',
+        'custom-element': 'amp-ext1',
+        'src': 'https://cdn.ampproject.org/v0/amp-ext1-0.1.js',
+      })
+    );
+    doc.head.appendChild(
+      createElementWithAttributes(doc, 'script', {
+        'id': 'amp-ext1-0_1',
+        'custom-element': 'amp-ext1',
+        'src': 'https://cdn.ampproject.org/v0/amp-ext1-0.1.js',
+      })
+    );
+    doc.head.appendChild(
+      createElementWithAttributes(doc, 'script', {
+        'id': 'amp-ext1-latest',
+        'i-amphtml-inserted': '',
+        'custom-element': 'amp-ext1',
+        'src': 'https://cdn.ampproject.org/v0/amp-ext1-latest.js',
+      })
+    );
+
+    doc.head.appendChild(
+      createElementWithAttributes(doc, 'script', {
+        'id': 'amp-ext1-0_2',
+        'custom-element': 'amp-ext1',
+        'src': 'https://cdn.ampproject.org/v0/amp-ext1-0.2.js',
+      })
+    );
+
+    doc.head.appendChild(
+      createElementWithAttributes(doc, 'script', {
+        'id': 'amp-ext2-latest',
+        'custom-element': 'amp-ext2',
+        'src': 'https://cdn.ampproject.org/v0/amp-ext2-latest.js',
+      })
+    );
+
+    doc.head.appendChild(
+      createElementWithAttributes(doc, 'script', {
+        'id': 'intermediate1',
+        'src': 'https://cdn.ampproject.org/v0/_intermediate-latest.js',
+      })
+    );
+  });
+
+  function ids(array) {
+    return array.map((a) => a.id);
+  }
+
+  it('should find a specific version', () => {
+    expect(
+      ids(getExtensionScripts(win, 'amp-ext1', '0.1', false))
+    ).to.deep.equal(['amp-ext1-0_1']);
+    expect(
+      ids(getExtensionScripts(win, 'amp-ext1', '0.2', false))
+    ).to.deep.equal(['amp-ext1-0_2']);
+    expect(
+      ids(getExtensionScripts(win, 'amp-ext2', '0.1', false))
+    ).to.deep.equal([]);
+  });
+
+  it('should find a specific version with latest', () => {
+    expect(
+      ids(getExtensionScripts(win, 'amp-ext1', '0.1', true))
+    ).to.deep.equal(['amp-ext1-0_1', 'amp-ext1-latest']);
+    expect(
+      ids(getExtensionScripts(win, 'amp-ext1', '0.2', true))
+    ).to.deep.equal(['amp-ext1-latest', 'amp-ext1-0_2']);
+    expect(
+      ids(getExtensionScripts(win, 'amp-ext2', '0.1', true))
+    ).to.deep.equal(['amp-ext2-latest']);
+  });
+
+  it('should find an intermediate extension', () => {
+    expect(
+      ids(getExtensionScripts(win, '_intermediate', '', false))
+    ).to.deep.equal(['intermediate1']);
+  });
+
+  it('should ignore an inserted script', () => {
+    expect(
+      ids(
+        getExtensionScripts(
+          win,
+          'amp-ext1',
+          '0.1',
+          true,
+          /* includeInserted */ false
+        )
+      )
+    ).to.deep.equal(['amp-ext1-0_1']);
+  });
+});
diff --git a/test/unit/test-extensions.js b/test/unit/test-extensions.js
index e888b96a42ca9..8ba9f18f35284 100644
--- a/test/unit/test-extensions.js
+++ b/test/unit/test-extensions.js
@@ -19,7 +19,13 @@ import {BaseElement} from '../../src/base-element';
 import {ElementStub} from '../../src/element-stub';
 import {Extensions} from '../../src/service/extensions-impl';
 import {Services} from '../../src/services';
+import {dev} from '../../src/log';
+import {dispatchCustomEvent} from '../../src/dom';
 import {getServiceForDoc} from '../../src/service';
+import {
+  getTemplateClassForTesting,
+  installTemplatesServiceForDoc,
+} from '../../src/service/template-impl';
 import {installTimerService} from '../../src/service/timer-impl';
 
 class AmpTest extends BaseElement {}
@@ -55,6 +61,8 @@ describes.sandboxed('Extensions', {}, () => {
       let currentHolder;
       extensions.registerExtension(
         'amp-ext',
+        '0.1',
+        true,
         (arg) => {
           expect(factoryExecuted).to.be.false;
           expect(arg).to.equal(amp);
@@ -67,8 +75,8 @@ describes.sandboxed('Extensions', {}, () => {
       expect(factoryExecuted).to.be.true;
       expect(extensions.currentExtensionId_).to.be.null;
 
-      const holder = extensions.extensions_['amp-ext'];
-      expect(extensions.getExtensionHolder_('amp-ext')).to.equal(holder);
+      const holder = extensions.extensions_['amp-ext:0.1'];
+      expect(extensions.getExtensionHolder_('amp-ext', '0.1')).to.equal(holder);
       expect(currentHolder).to.equal(holder);
       expect(holder.loaded).to.be.true;
       expect(holder.error).to.be.undefined;
@@ -78,18 +86,35 @@ describes.sandboxed('Extensions', {}, () => {
       expect(holder.scriptPresent).to.be.undefined;
 
       // However, the promise is created lazily.
-      return extensions.waitForExtension(win, 'amp-ext').then((extension) => {
+      return extensions.waitForExtension('amp-ext', '0.1').then((extension) => {
         expect(extension).to.exist;
         expect(extension.elements).to.exist;
       });
     });
 
+    it('should register only once', () => {
+      const amp = {};
+      const factoryStub = env.sandbox.stub();
+      extensions.registerExtension('amp-ext', '0.1', true, factoryStub, amp);
+      expect(factoryStub).to.be.calledOnce;
+      const holder1 = extensions.extensions_['amp-ext:0.1'];
+      expect(extensions.getExtensionHolder_('amp-ext', '0.1')).to.equal(
+        holder1
+      );
+
+      // Try register again.
+      extensions.registerExtension('amp-ext', '0.1', true, factoryStub, amp);
+      expect(factoryStub).to.be.calledOnce; // no change.
+      const holder2 = extensions.extensions_['amp-ext:0.1'];
+      expect(holder2).to.equal(holder1);
+    });
+
     it('should register successfully with promise', () => {
-      const promise = extensions.waitForExtension(win, 'amp-ext');
-      extensions.registerExtension('amp-ext', () => {}, {});
+      const promise = extensions.waitForExtension('amp-ext', '0.1');
+      extensions.registerExtension('amp-ext', '0.1', true, () => {}, {});
       expect(extensions.currentExtensionId_).to.be.null;
 
-      const holder = extensions.extensions_['amp-ext'];
+      const holder = extensions.extensions_['amp-ext:0.1'];
       expect(holder.loaded).to.be.true;
       expect(holder.error).to.be.undefined;
       expect(holder.resolve).to.exist;
@@ -106,6 +131,8 @@ describes.sandboxed('Extensions', {}, () => {
       expect(() => {
         extensions.registerExtension(
           'amp-ext',
+          '0.1',
+          true,
           () => {
             throw new Error('intentional');
           },
@@ -114,8 +141,8 @@ describes.sandboxed('Extensions', {}, () => {
       }).to.throw(/intentional/);
       expect(extensions.currentExtensionId_).to.be.null;
 
-      const holder = extensions.extensions_['amp-ext'];
-      expect(extensions.getExtensionHolder_('amp-ext')).to.equal(holder);
+      const holder = extensions.extensions_['amp-ext:0.1'];
+      expect(extensions.getExtensionHolder_('amp-ext', '0.1')).to.equal(holder);
       expect(holder.error).to.exist;
       expect(holder.error.message).to.equal('intentional');
       expect(holder.loaded).to.be.undefined;
@@ -124,7 +151,7 @@ describes.sandboxed('Extensions', {}, () => {
       expect(holder.promise).to.be.undefined;
 
       // However, the promise is created lazily.
-      return extensions.waitForExtension(win, 'amp-ext').then(
+      return extensions.waitForExtension('amp-ext', '0.1').then(
         () => {
           throw new Error('must have been rejected');
         },
@@ -135,10 +162,12 @@ describes.sandboxed('Extensions', {}, () => {
     });
 
     it('should fail registration with promise', () => {
-      const promise = extensions.waitForExtension(win, 'amp-ext');
+      const promise = extensions.waitForExtension('amp-ext', '0.1');
       expect(() => {
         extensions.registerExtension(
           'amp-ext',
+          '0.1',
+          true,
           () => {
             throw new Error('intentional');
           },
@@ -147,7 +176,7 @@ describes.sandboxed('Extensions', {}, () => {
       }).to.throw(/intentional/);
       expect(extensions.currentExtensionId_).to.be.null;
 
-      const holder = extensions.extensions_['amp-ext'];
+      const holder = extensions.extensions_['amp-ext:0.1'];
       expect(holder.error).to.exist;
       expect(holder.error.message).to.equal('intentional');
       expect(holder.loaded).to.be.undefined;
@@ -156,7 +185,7 @@ describes.sandboxed('Extensions', {}, () => {
       expect(holder.promise).to.exist;
       expect(promise).to.eventually.equal(holder.promise);
 
-      return extensions.waitForExtension(win, 'amp-ext').then(
+      return extensions.waitForExtension('amp-ext', '0.1').then(
         () => {
           throw new Error('must have been rejected');
         },
@@ -166,32 +195,238 @@ describes.sandboxed('Extensions', {}, () => {
       );
     });
 
-    it('should fail on timeout', () => {
-      timeoutCallback = null;
-      const promise = extensions.waitForExtension(win, 'amp-ext');
-      expect(timeoutCallback).to.be.a('function');
-      timeoutCallback();
+    it('should redirect "latest" holder when exists', async () => {
+      const iniPromise = extensions.waitForExtension('amp-ext', 'latest');
+      const iniHolder = extensions.getExtensionHolder_('amp-ext', 'latest');
+      expect(iniHolder.latest).to.be.true;
+
+      const amp = {};
+      let factoryExecuted = false;
+      let currentHolder;
+      extensions.registerExtension(
+        'amp-ext',
+        '0.2',
+        true,
+        (arg) => {
+          expect(factoryExecuted).to.be.false;
+          expect(arg).to.equal(amp);
+          expect(extensions.currentExtensionId_).to.equal('amp-ext');
+          currentHolder = extensions.getCurrentExtensionHolder_();
+          factoryExecuted = true;
+        },
+        amp
+      );
+      expect(factoryExecuted).to.be.true;
+      expect(extensions.currentExtensionId_).to.be.null;
+
+      const versionHolder = extensions.getExtensionHolder_('amp-ext', '0.2');
+      const latestHolder = extensions.getExtensionHolder_('amp-ext', 'latest');
+      expect(iniHolder).to.not.equal(versionHolder);
+      expect(latestHolder).to.equal(versionHolder);
+      expect(currentHolder).to.equal(versionHolder);
+      expect(versionHolder.latest).to.be.true;
+
+      // "auto" is inherited from the "latest" holder.
+      expect(versionHolder.auto).to.be.false;
+
+      expect(versionHolder.loaded).to.be.true;
+      expect(versionHolder.error).to.be.undefined;
+
+      // However, the promise is created lazily.
+      const extension = await extensions.waitForExtension('amp-ext', '0.2');
+      expect(extension).to.exist;
+      expect(extension.elements).to.exist;
 
-      return promise.then(
+      await extensions.waitForExtension('amp-ext', 'latest');
+
+      // Initial "latest" promise has been resolved as well.
+      await iniPromise;
+    });
+
+    it('should create "latest" when does not exists', async () => {
+      const amp = {};
+      let factoryExecuted = false;
+      let currentHolder;
+      extensions.registerExtension(
+        'amp-ext',
+        '0.2',
+        true,
+        (arg) => {
+          expect(factoryExecuted).to.be.false;
+          expect(arg).to.equal(amp);
+          expect(extensions.currentExtensionId_).to.equal('amp-ext');
+          currentHolder = extensions.getCurrentExtensionHolder_();
+          factoryExecuted = true;
+        },
+        amp
+      );
+      expect(factoryExecuted).to.be.true;
+      expect(extensions.currentExtensionId_).to.be.null;
+
+      const versionHolder = extensions.getExtensionHolder_('amp-ext', '0.2');
+      const latestHolder = extensions.getExtensionHolder_('amp-ext', 'latest');
+      expect(latestHolder).to.equal(versionHolder);
+      expect(currentHolder).to.equal(versionHolder);
+      expect(versionHolder.latest).to.be.true;
+
+      // "auto" is defaulted to true.
+      expect(versionHolder.auto).to.be.true;
+
+      expect(versionHolder.loaded).to.be.true;
+      expect(versionHolder.error).to.be.undefined;
+
+      // However, the promise is created lazily.
+      const extension = await extensions.waitForExtension('amp-ext', '0.2');
+      expect(extension).to.exist;
+      expect(extension.elements).to.exist;
+
+      const latest = await extensions.waitForExtension('amp-ext', 'latest');
+      expect(latest).to.equal(extension);
+    });
+
+    it('should NOT create "latest" holder when not latest version', async () => {
+      const amp = {};
+      let factoryExecuted = false;
+      let currentHolder;
+      extensions.registerExtension(
+        'amp-ext',
+        '0.2',
+        false,
+        (arg) => {
+          expect(factoryExecuted).to.be.false;
+          expect(arg).to.equal(amp);
+          expect(extensions.currentExtensionId_).to.equal('amp-ext');
+          currentHolder = extensions.getCurrentExtensionHolder_();
+          factoryExecuted = true;
+        },
+        amp
+      );
+      expect(factoryExecuted).to.be.true;
+      expect(extensions.currentExtensionId_).to.be.null;
+
+      const versionHolder = extensions.getExtensionHolder_('amp-ext', '0.2');
+      expect(currentHolder).to.equal(versionHolder);
+      expect(versionHolder.latest).to.be.false;
+
+      // "auto" is defaulted to true.
+      expect(versionHolder.auto).to.be.true;
+
+      expect(versionHolder.loaded).to.be.true;
+      expect(versionHolder.error).to.be.undefined;
+
+      // However, the promise is created lazily.
+      const extension = await extensions.waitForExtension('amp-ext', '0.2');
+      expect(extension).to.exist;
+      expect(extension.elements).to.exist;
+
+      // "latest" was never created.
+      expect(extensions.extensions_['amp-ext:latest']).to.not.exist;
+    });
+
+    it('should NOT redirect "latest" holder when not latest version', async () => {
+      const iniHolder = extensions.getExtensionHolder_('amp-ext', 'latest');
+      expect(iniHolder.latest).to.be.true;
+
+      const amp = {};
+      let factoryExecuted = false;
+      let currentHolder;
+      extensions.registerExtension(
+        'amp-ext',
+        '0.2',
+        false,
+        (arg) => {
+          expect(factoryExecuted).to.be.false;
+          expect(arg).to.equal(amp);
+          expect(extensions.currentExtensionId_).to.equal('amp-ext');
+          currentHolder = extensions.getCurrentExtensionHolder_();
+          factoryExecuted = true;
+        },
+        amp
+      );
+      expect(factoryExecuted).to.be.true;
+      expect(extensions.currentExtensionId_).to.be.null;
+
+      const versionHolder = extensions.getExtensionHolder_('amp-ext', '0.2');
+      expect(currentHolder).to.equal(versionHolder);
+      expect(versionHolder.latest).to.be.false;
+
+      expect(versionHolder.loaded).to.be.true;
+      expect(versionHolder.error).to.be.undefined;
+
+      // "auto" is defaulted to true.
+      expect(versionHolder.auto).to.be.true;
+
+      // However, the promise is created lazily.
+      const extension = await extensions.waitForExtension('amp-ext', '0.2');
+      expect(extension).to.exist;
+      expect(extension.elements).to.exist;
+
+      // "latest" was never created.
+      expect(extensions.extensions_['amp-ext:latest']).to.equal(iniHolder);
+      expect(iniHolder).to.not.equal(versionHolder);
+      expect(iniHolder.loaded).to.be.undefined;
+    });
+
+    it('should install a doc factory from a "latest" version', async () => {
+      const shadowRoot = document.createDocumentFragment();
+      const ampdoc = new AmpDocShadow(win, 'https://a.org/', shadowRoot);
+      const promise = extensions.installExtensionInDoc(
+        ampdoc,
+        'amp-ext',
+        'latest'
+      );
+
+      const docFactoryStub = env.sandbox.stub();
+
+      const amp = {};
+      let factoryExecuted = false;
+      extensions.registerExtension(
+        'amp-ext',
+        '0.2',
+        true,
         () => {
-          throw new Error('must have been rejected');
+          extensions.addDocFactory(docFactoryStub);
+          factoryExecuted = true;
         },
-        (reason) => {
-          expect(reason.message).to.match(/^Render timeout/);
-        }
+        amp
       );
+      expect(factoryExecuted).to.be.true;
+
+      await promise;
+
+      expect(docFactoryStub).to.be.calledOnce.calledWith(ampdoc);
+    });
+
+    it('should log on timeout', async () => {
+      expectAsyncConsoleError(/Waited over/);
+
+      timeoutCallback = null;
+      let promiseCompleted = false;
+      extensions.waitForExtension('amp-ext', '0.1').then(
+        () => (promiseCompleted = true),
+        () => (promiseCompleted = true)
+      );
+
+      expect(timeoutCallback).to.be.a('function');
+      timeoutCallback();
+      await new Promise(setTimeout);
+
+      expect(promiseCompleted).to.be.false; // Still waiting for extension to load.
     });
 
     it('should add element in registration', () => {
       const ctor = function () {};
+      ctor.requiresShadowDom = () => false;
       extensions.registerExtension(
         'amp-ext',
+        '0.1',
+        true,
         () => {
           extensions.addElement('e1', ctor);
         },
         {}
       );
-      return extensions.waitForExtension(win, 'amp-ext').then((extension) => {
+      return extensions.waitForExtension('amp-ext', '0.1').then((extension) => {
         expect(extension.elements['e1']).to.exist;
         expect(extension.elements['e1'].implementationClass).to.equal(ctor);
       });
@@ -200,14 +435,82 @@ describes.sandboxed('Extensions', {}, () => {
     it('should add element out of registration', () => {
       const ctor = function () {};
       allowConsoleError(() => extensions.addElement('e1', ctor));
-      expect(Object.keys(extensions.extensions_)).to.deep.equal(['_UNKNOWN_']);
-      const unknown = extensions.extensions_['_UNKNOWN_'];
+      expect(Object.keys(extensions.extensions_)).to.deep.equal(['_UNKNOWN_:']);
+      const unknown = extensions.extensions_['_UNKNOWN_:'];
       expect(unknown.extension.elements['e1']).to.exist;
       expect(unknown.extension.elements['e1'].implementationClass).to.equal(
         ctor
       );
     });
 
+    it('should add template in registration', async () => {
+      const ampdoc = Services.ampdocServiceFor(win).getSingleDoc();
+      installTemplatesServiceForDoc(ampdoc);
+      const templates = Services.templatesForDoc(ampdoc);
+
+      const ctor = function () {};
+      extensions.registerExtension(
+        'amp-ext',
+        '0.1',
+        true,
+        () => {
+          extensions.addTemplate('e1', ctor);
+        },
+        {}
+      );
+      await extensions.waitForExtension('amp-ext', '0.1');
+
+      const holder = extensions.getExtensionHolder_('amp-ext', '0.1');
+      expect(holder.docFactories).to.have.length(1);
+
+      const implClass = await getTemplateClassForTesting(templates, 'e1');
+      expect(implClass).to.equal(ctor);
+    });
+
+    it('should add element out of registration', () => {
+      const ampdoc = Services.ampdocServiceFor(win).getSingleDoc();
+      installTemplatesServiceForDoc(ampdoc);
+
+      const ctor = function () {};
+      allowConsoleError(() => extensions.addTemplate('e1', ctor));
+      expect(Object.keys(extensions.extensions_)).to.deep.equal(['_UNKNOWN_:']);
+    });
+
+    it('should install template in shadow doc', async () => {
+      env.sandbox
+        .stub(Services.ampdocServiceFor(win), 'isSingleDoc')
+        .callsFake(() => false);
+
+      // Resolve the promise.
+      const ctor = function () {};
+      extensions.registerExtension(
+        'amp-test',
+        '0.2',
+        true,
+        () => {
+          extensions.addTemplate('amp-test', ctor);
+        },
+        {}
+      );
+
+      // Install into shadow doc.
+      const shadowRoot = document.createDocumentFragment();
+      const ampdoc = new AmpDocShadow(win, 'https://a.org/', shadowRoot);
+      installTemplatesServiceForDoc(ampdoc);
+      const promise = extensions.installExtensionsInDoc(ampdoc, [
+        {extensionId: 'amp-test', extensionVersion: '0.2'},
+      ]);
+
+      // Extension is immediately declared.
+      expect(ampdoc.declaresExtension('amp-test', '0.2')).to.be.true;
+
+      await promise;
+
+      const templates = Services.templatesForDoc(ampdoc);
+      const implClass = await getTemplateClassForTesting(templates, 'amp-test');
+      expect(implClass).to.equal(ctor);
+    });
+
     it('should install auto undeclared elements for single-doc', () => {
       const ampdoc = Services.ampdocServiceFor(win).getSingleDoc();
       expect(
@@ -222,6 +525,8 @@ describes.sandboxed('Extensions', {}, () => {
       // Resolve the promise.
       extensions.registerExtension(
         'amp-test',
+        '0.1',
+        true,
         () => {
           extensions.addElement('amp-test', AmpTest);
           extensions.addElement('amp-test-sub', AmpTestSub);
@@ -251,6 +556,8 @@ describes.sandboxed('Extensions', {}, () => {
       // Resolve the promise.
       extensions.registerExtension(
         'amp-test',
+        '0.1',
+        true,
         () => {
           extensions.addElement('amp-test', AmpTest);
           extensions.addElement('amp-test-sub', AmpTestSub);
@@ -270,7 +577,7 @@ describes.sandboxed('Extensions', {}, () => {
 
     it('should install declared elements for single-doc', () => {
       const ampdoc = Services.ampdocServiceFor(win).getSingleDoc();
-      ampdoc.declareExtension('amp-test');
+      ampdoc.declareExtension('amp-test', '0.1');
       expect(
         win.__AMP_EXTENDED_ELEMENTS && win.__AMP_EXTENDED_ELEMENTS['amp-test']
       ).to.be.undefined;
@@ -284,6 +591,8 @@ describes.sandboxed('Extensions', {}, () => {
       // Resolve the promise.
       extensions.registerExtension(
         'amp-test',
+        '0.1',
+        true,
         () => {
           extensions.addElement('amp-test', AmpTest);
           extensions.addElement('amp-test-sub', AmpTestSub);
@@ -298,7 +607,7 @@ describes.sandboxed('Extensions', {}, () => {
 
     it('should install non-auto declared elements for single-doc', () => {
       const ampdoc = Services.ampdocServiceFor(win).getSingleDoc();
-      ampdoc.declareExtension('amp-test');
+      ampdoc.declareExtension('amp-test', '0.1');
       expect(
         win.__AMP_EXTENDED_ELEMENTS && win.__AMP_EXTENDED_ELEMENTS['amp-test']
       ).to.be.undefined;
@@ -314,6 +623,8 @@ describes.sandboxed('Extensions', {}, () => {
       // Resolve the promise.
       extensions.registerExtension(
         'amp-test',
+        '0.1',
+        true,
         () => {
           extensions.addElement('amp-test', AmpTest);
           extensions.addElement('amp-test-sub', AmpTestSub);
@@ -326,7 +637,7 @@ describes.sandboxed('Extensions', {}, () => {
       expect(ampdoc.declaresExtension('amp-test')).to.be.true;
     });
 
-    it('should install elements in shadow doc', () => {
+    it('should install elements in shadow doc', async () => {
       env.sandbox
         .stub(Services.ampdocServiceFor(win), 'isSingleDoc')
         .callsFake(() => false);
@@ -342,6 +653,8 @@ describes.sandboxed('Extensions', {}, () => {
       // Resolve the promise.
       extensions.registerExtension(
         'amp-test',
+        '0.2',
+        true,
         () => {
           extensions.addElement('amp-test', AmpTest);
           extensions.addElement('amp-test-sub', AmpTestSub);
@@ -361,29 +674,33 @@ describes.sandboxed('Extensions', {}, () => {
       const shadowRoot = document.createDocumentFragment();
       installRuntimeStylesTo(shadowRoot);
       const ampdoc = new AmpDocShadow(win, 'https://a.org/', shadowRoot);
-      const promise = extensions.installExtensionsInDoc(ampdoc, ['amp-test']);
-      return promise.then(() => {
-        // Resolved later.
-        expect(win.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(AmpTest);
-        expect(win.__AMP_EXTENDED_ELEMENTS['amp-test-sub']).to.equal(
-          AmpTestSub
-        );
-        // Extension is now declared.
-        expect(ampdoc.declaresExtension('amp-test')).to.be.true;
-      });
+      const promise = extensions.installExtensionsInDoc(ampdoc, [
+        {extensionId: 'amp-test', extensionVersion: '0.2'},
+      ]);
+
+      // Extension is immediately declared.
+      expect(ampdoc.declaresExtension('amp-test', '0.2')).to.be.true;
+
+      await promise;
+
+      // Resolved later.
+      expect(win.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(AmpTest);
+      expect(win.__AMP_EXTENDED_ELEMENTS['amp-test-sub']).to.equal(AmpTestSub);
     });
 
     it('should add doc factory in registration', () => {
       const factory = function () {};
       extensions.registerExtension(
         'amp-ext',
+        '0.1',
+        true,
         () => {
           extensions.addDocFactory(factory);
         },
         {}
       );
 
-      const holder = extensions.getExtensionHolder_('amp-ext');
+      const holder = extensions.getExtensionHolder_('amp-ext', '0.1');
       expect(holder.docFactories).to.exist;
       expect(holder.docFactories).to.have.length(1);
       expect(holder.docFactories[0]).to.equal(factory);
@@ -393,14 +710,14 @@ describes.sandboxed('Extensions', {}, () => {
       const factory = function () {};
       allowConsoleError(() => extensions.addDocFactory(factory));
 
-      const holder = extensions.getExtensionHolder_('_UNKNOWN_');
+      const holder = extensions.getExtensionHolder_('_UNKNOWN_', '');
       expect(holder.docFactories).to.exist;
       expect(holder.docFactories).to.have.length(1);
       expect(holder.docFactories[0]).to.equal(factory);
     });
 
     // TODO(#16916): Make this test work with synchronous throws.
-    it.skip('should install all doc factories to shadow doc', () => {
+    it.skip('should install all doc factories to shadow doc', async () => {
       env.sandbox
         .stub(Services.ampdocServiceFor(win), 'isSingleDoc')
         .callsFake(() => false);
@@ -411,6 +728,8 @@ describes.sandboxed('Extensions', {}, () => {
       const factory3 = env.sandbox.spy();
       extensions.registerExtension(
         'amp-ext',
+        '0.2',
+        true,
         () => {
           extensions.addDocFactory(factory1);
           extensions.addDocFactory(factory2);
@@ -421,27 +740,31 @@ describes.sandboxed('Extensions', {}, () => {
 
       const shadowRoot = document.createDocumentFragment();
       const ampdoc = new AmpDocShadow(win, 'https://a.org/', shadowRoot);
-      const promise = extensions.installExtensionsInDoc(ampdoc, ['amp-ext']);
-      return promise.then(() => {
-        expect(factory1).to.be.calledOnce;
-        expect(factory1.args[0][0]).to.equal(ampdoc);
-        // Should survive errors in one factory.
-        expect(factory3).to.be.calledOnce;
-        expect(factory3.args[0][0]).to.equal(ampdoc);
-      });
+      await extensions.installExtensionsInDoc(ampdoc, [
+        {extensionId: 'amp-ext', extensionVersion: '0.2'},
+      ]);
+
+      expect(factory1).to.be.calledOnce;
+      expect(factory1.args[0][0]).to.equal(ampdoc);
+
+      // Should survive errors in one factory.
+      expect(factory3).to.be.calledOnce;
+      expect(factory3.args[0][0]).to.equal(ampdoc);
     });
 
     it('should add service factory in registration', () => {
       const factory = function () {};
       extensions.registerExtension(
         'amp-ext',
+        '0.1',
+        true,
         () => {
           extensions.addService('service1', factory);
         },
         {}
       );
 
-      const holder = extensions.getExtensionHolder_('amp-ext');
+      const holder = extensions.getExtensionHolder_('amp-ext', '0.1');
       expect(holder.extension.services).to.exist;
       expect(holder.extension.services).to.have.length(1);
       expect(holder.extension.services[0]).to.deep.equal({
@@ -454,7 +777,7 @@ describes.sandboxed('Extensions', {}, () => {
       const factory = function () {};
       allowConsoleError(() => extensions.addService('service1', factory));
 
-      const holder = extensions.getExtensionHolder_('_UNKNOWN_');
+      const holder = extensions.getExtensionHolder_('_UNKNOWN_', '');
       expect(holder.extension.services).to.exist;
       expect(holder.extension.services).to.have.length(1);
       expect(holder.extension.services[0]).to.deep.equal({
@@ -479,6 +802,8 @@ describes.sandboxed('Extensions', {}, () => {
       // Resolve the promise.
       extensions.registerExtension(
         'amp-test',
+        '0.1',
+        true,
         () => {
           extensions.addService('service1', factory1);
           extensions.addService('service2', factory2);
@@ -503,6 +828,8 @@ describes.sandboxed('Extensions', {}, () => {
       // Resolve the promise.
       extensions.registerExtension(
         'amp-test',
+        '0.1',
+        true,
         () => {
           extensions.addService('service1', factory1);
           extensions.addService('service2', factory2);
@@ -524,7 +851,7 @@ describes.sandboxed('Extensions', {}, () => {
 
     it('should install declared services for single-doc', () => {
       const ampdoc = Services.ampdocServiceFor(win).getSingleDoc();
-      ampdoc.declareExtension('amp-test');
+      ampdoc.declareExtension('amp-test', '0.1');
 
       const factory1Spy = env.sandbox.spy();
       const factory2Spy = env.sandbox.spy();
@@ -540,6 +867,8 @@ describes.sandboxed('Extensions', {}, () => {
       // Resolve the promise.
       extensions.registerExtension(
         'amp-test',
+        '0.1',
+        true,
         () => {
           extensions.addService('service1', factory1);
           extensions.addService('service2', factory2);
@@ -553,7 +882,7 @@ describes.sandboxed('Extensions', {}, () => {
     });
 
     // TODO(#16916): Make this test work with synchronous throws.
-    it.skip('should install all services to doc', () => {
+    it.skip('should install all services to doc', async () => {
       env.sandbox
         .stub(Services.ampdocServiceFor(win), 'isSingleDoc')
         .callsFake(() => false);
@@ -566,6 +895,8 @@ describes.sandboxed('Extensions', {}, () => {
       const factory3 = env.sandbox.spy();
       extensions.registerExtension(
         'amp-ext',
+        '0.2',
+        true,
         () => {
           extensions.addService('service1', factory1);
           extensions.addService('service2', factory2);
@@ -577,21 +908,26 @@ describes.sandboxed('Extensions', {}, () => {
       // Install into shadow doc.
       const shadowRoot = document.createDocumentFragment();
       const ampdoc = new AmpDocShadow(win, 'https://a.org/', shadowRoot);
-      const promise = extensions.installExtensionsInDoc(ampdoc, ['amp-ext']);
-      return promise.then(() => {
-        expect(factory1).to.be.calledOnce;
-        expect(factory1.args[0][0]).to.equal(ampdoc);
-        // Should survive errors in one factory.
-        expect(factory2Spy).to.be.calledOnce;
-        expect(factory3).to.be.calledOnce;
-        expect(factory3.args[0][0]).to.equal(ampdoc);
-      });
+      await extensions.installExtensionsInDoc(ampdoc, [
+        {extensionId: 'amp-ext', extensionVersion: '0.2'},
+      ]);
+
+      expect(factory1).to.be.calledOnce;
+      expect(factory1.args[0][0]).to.equal(ampdoc);
+
+      // Should survive errors in one factory.
+      expect(factory2Spy).to.be.calledOnce;
+      expect(factory3).to.be.calledOnce;
+      expect(factory3.args[0][0]).to.equal(ampdoc);
     });
 
     it('should load extension class via load extension', () => {
       const ctor = function () {};
+      ctor.requiresShadowDom = () => false;
       extensions.registerExtension(
         'amp-ext',
+        '0.1',
+        true,
         () => {
           extensions.addElement('amp-ext', ctor);
         },
@@ -615,10 +951,10 @@ describes.sandboxed('Extensions', {}, () => {
       const initialPromise = extensions.preloadExtension('amp-ext');
 
       // Reload the extension. E.g. due to the version mismatch.
-      const reloadPromise = extensions.reloadExtension('amp-ext');
+      const reloadPromise = extensions.reloadExtension('amp-ext', '0.1', true);
 
       // Register extension.
-      extensions.registerExtension('amp-ext', () => {}, {});
+      extensions.registerExtension('amp-ext', '0.1', true, () => {}, {});
 
       return reloadPromise.then((reloadedExtension) => {
         expect(reloadedExtension).to.exist;
@@ -643,50 +979,54 @@ describes.sandboxed('Extensions', {}, () => {
       env.sandbox.stub(Services, 'ampdocServiceFor').returns(null);
       extensions = new Extensions(win);
       env.sandbox.stub(extensions, 'preloadExtension');
+      env.sandbox.stub(dev(), 'expectedError');
     });
 
     describe('regular scripts', () => {
-      it('should devAssert if script cannot be found', () => {
-        expect(() => {
-          allowConsoleError(() => extensions.reloadExtension('amp-list'));
-        }).to.throw('Cannot find script for extension: amp-list');
-
-        expect(extensions.preloadExtension).to.not.be.called;
-      });
-
-      it('should ignore inserted scripts', () => {
+      it('should support [custom-element] script', () => {
         const list = document.createElement('script');
         list.setAttribute('custom-element', 'amp-list');
         list.setAttribute(
           'src',
-          'https://cdn.ampproject.org/v0/amp-list-0.1.js'
+          'https://cdn.ampproject.org/v0/amp-list-0.2.js'
         );
-        list.setAttribute('i-amphtml-inserted', '');
         win.document.head.appendChild(list);
 
-        expect(() => {
-          allowConsoleError(() => extensions.reloadExtension('amp-list'));
-        }).to.throw('Cannot find script for extension: amp-list');
+        extensions.reloadExtension('amp-list', '0.2', true);
 
-        expect(list.hasAttribute('i-amphtml-loaded-new-version')).to.be.false;
-        expect(extensions.preloadExtension).to.not.be.called;
+        expect(list.getAttribute('i-amphtml-loaded-new-version')).to.equal(
+          'amp-list'
+        );
+        expect(extensions.preloadExtension).to.be.calledWith('amp-list', '0.2');
       });
 
-      it('should support [custom-element] scripts', () => {
-        const list = document.createElement('script');
-        list.setAttribute('custom-element', 'amp-list');
-        list.setAttribute(
+      it('should only support [custom-element] script of the right version', () => {
+        const list1 = document.createElement('script');
+        list1.setAttribute('custom-element', 'amp-list');
+        list1.setAttribute(
+          'src',
+          'https://cdn.ampproject.org/v0/amp-list-0.2.js'
+        );
+        win.document.head.appendChild(list1);
+
+        const list2 = document.createElement('script');
+        list2.setAttribute('custom-element', 'amp-list');
+        list2.setAttribute(
           'src',
           'https://cdn.ampproject.org/v0/amp-list-0.1.js'
         );
-        win.document.head.appendChild(list);
+        win.document.head.appendChild(list2);
 
-        extensions.reloadExtension('amp-list');
+        extensions.reloadExtension('amp-list', '0.2', true);
 
-        expect(list.getAttribute('i-amphtml-loaded-new-version')).to.equal(
+        expect(list1.getAttribute('i-amphtml-loaded-new-version')).to.equal(
           'amp-list'
         );
-        expect(extensions.preloadExtension).to.be.calledWith('amp-list', '0.1');
+        expect(list2.getAttribute('i-amphtml-loaded-new-version')).to.be.null;
+        expect(extensions.preloadExtension).to.be.calledOnce.calledWith(
+          'amp-list',
+          '0.2'
+        );
       });
 
       it('should support "latest" version scripts', () => {
@@ -698,15 +1038,12 @@ describes.sandboxed('Extensions', {}, () => {
         );
         win.document.head.appendChild(list);
 
-        extensions.reloadExtension('amp-list');
+        extensions.reloadExtension('amp-list', '0.1', true);
 
         expect(list.getAttribute('i-amphtml-loaded-new-version')).to.equal(
           'amp-list'
         );
-        expect(extensions.preloadExtension).to.be.calledWith(
-          'amp-list',
-          'latest'
-        );
+        expect(extensions.preloadExtension).to.be.calledWith('amp-list', '0.1');
       });
 
       it('should support [custom-template] scripts', () => {
@@ -718,7 +1055,7 @@ describes.sandboxed('Extensions', {}, () => {
         );
         win.document.head.appendChild(mustache);
 
-        extensions.reloadExtension('amp-mustache');
+        extensions.reloadExtension('amp-mustache', '0.2', true);
 
         expect(mustache.getAttribute('i-amphtml-loaded-new-version')).to.equal(
           'amp-mustache'
@@ -737,7 +1074,7 @@ describes.sandboxed('Extensions', {}, () => {
         );
         win.document.head.appendChild(viewer);
 
-        extensions.reloadExtension('amp-viewer-integration');
+        extensions.reloadExtension('amp-viewer-integration', '0.1', true);
 
         expect(viewer.getAttribute('i-amphtml-loaded-new-version')).to.equal(
           'amp-viewer-integration'
@@ -750,44 +1087,6 @@ describes.sandboxed('Extensions', {}, () => {
     });
 
     describe('module/nomdule script pairs', () => {
-      it('should devAssert if script cannot be found', () => {
-        expect(() => {
-          allowConsoleError(() => extensions.reloadExtension('amp-list'));
-        }).to.throw('Cannot find script for extension: amp-list');
-
-        expect(extensions.preloadExtension).to.not.be.called;
-      });
-
-      it('should ignore inserted scripts', () => {
-        const mod = document.createElement('script');
-        mod.setAttribute('custom-element', 'amp-list');
-        mod.setAttribute(
-          'src',
-          'https://cdn.ampproject.org/v0/amp-list-0.1.mjs'
-        );
-        mod.setAttribute('i-amphtml-inserted', '');
-        mod.setAttribute('type', 'module');
-        win.document.head.appendChild(mod);
-
-        const nomod = document.createElement('script');
-        nomod.setAttribute('custom-element', 'amp-list');
-        nomod.setAttribute(
-          'src',
-          'https://cdn.ampproject.org/v0/amp-list-0.1.js'
-        );
-        nomod.setAttribute('i-amphtml-inserted', '');
-        nomod.setAttribute('nomodule', '');
-        win.document.head.appendChild(nomod);
-
-        expect(() => {
-          allowConsoleError(() => extensions.reloadExtension('amp-list'));
-        }).to.throw('Cannot find script for extension: amp-list');
-
-        expect(mod.hasAttribute('i-amphtml-loaded-new-version')).to.be.false;
-        expect(nomod.hasAttribute('i-amphtml-loaded-new-version')).to.be.false;
-        expect(extensions.preloadExtension).to.not.be.called;
-      });
-
       it('should support [custom-element] scripts', () => {
         const mod = document.createElement('script');
         mod.setAttribute('custom-element', 'amp-list');
@@ -807,7 +1106,7 @@ describes.sandboxed('Extensions', {}, () => {
         nomod.setAttribute('nomodule', '');
         win.document.head.appendChild(nomod);
 
-        extensions.reloadExtension('amp-list');
+        extensions.reloadExtension('amp-list', '0.1', true);
 
         expect(mod.getAttribute('i-amphtml-loaded-new-version')).to.equal(
           'amp-list'
@@ -838,7 +1137,7 @@ describes.sandboxed('Extensions', {}, () => {
         nomod.setAttribute('nomodule', '');
         win.document.head.appendChild(nomod);
 
-        extensions.reloadExtension('amp-list');
+        extensions.reloadExtension('amp-list', '0.1', true);
 
         expect(mod.getAttribute('i-amphtml-loaded-new-version')).to.equal(
           'amp-list'
@@ -847,10 +1146,7 @@ describes.sandboxed('Extensions', {}, () => {
           'amp-list'
         );
         expect(extensions.preloadExtension).to.be.calledOnce;
-        expect(extensions.preloadExtension).to.be.calledWith(
-          'amp-list',
-          'latest'
-        );
+        expect(extensions.preloadExtension).to.be.calledWith('amp-list', '0.1');
       });
 
       it('should support [custom-template] scripts', () => {
@@ -872,7 +1168,7 @@ describes.sandboxed('Extensions', {}, () => {
         nomod.setAttribute('nomodule', '');
         win.document.head.appendChild(nomod);
 
-        extensions.reloadExtension('amp-mustache');
+        extensions.reloadExtension('amp-mustache', '0.2', true);
 
         expect(mod.getAttribute('i-amphtml-loaded-new-version')).to.equal(
           'amp-mustache'
@@ -904,7 +1200,7 @@ describes.sandboxed('Extensions', {}, () => {
         nomod.setAttribute('nomodule', '');
         win.document.head.appendChild(nomod);
 
-        extensions.reloadExtension('amp-viewer-integration');
+        extensions.reloadExtension('amp-viewer-integration', '0.1', true);
 
         expect(mod.getAttribute('i-amphtml-loaded-new-version')).to.equal(
           'amp-viewer-integration'
@@ -940,12 +1236,35 @@ describes.sandboxed('Extensions', {}, () => {
         expect(
           doc.head.querySelectorAll('[custom-element="amp-test"]')
         ).to.have.length(0);
-        expect(extensions.extensions_['amp-test']).to.be.undefined;
+        expect(extensions.extensions_['amp-test:0.1']).to.be.undefined;
         extensions.preloadExtension('amp-test');
         expect(
           doc.head.querySelectorAll('[custom-element="amp-test"]')
         ).to.have.length(1);
-        expect(extensions.extensions_['amp-test'].scriptPresent).to.be.true;
+        expect(
+          doc.head
+            .querySelector('[custom-element="amp-test"]')
+            .getAttribute('src')
+        ).to.contain('-0.1');
+        expect(extensions.extensions_['amp-test:0.1'].scriptPresent).to.be.true;
+        expect(win.customElements.elements['amp-test']).to.be.undefined;
+      });
+
+      it('should insert extension script with the specified version', () => {
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"]')
+        ).to.have.length(0);
+        expect(extensions.extensions_['amp-test:0.2']).to.be.undefined;
+        extensions.preloadExtension('amp-test', '0.2');
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"]')
+        ).to.have.length(1);
+        expect(
+          doc.head
+            .querySelector('[custom-element="amp-test"]')
+            .getAttribute('src')
+        ).to.contain('-0.2');
+        expect(extensions.extensions_['amp-test:0.2'].scriptPresent).to.be.true;
         expect(win.customElements.elements['amp-test']).to.be.undefined;
       });
 
@@ -953,12 +1272,13 @@ describes.sandboxed('Extensions', {}, () => {
         expect(
           doc.head.querySelectorAll('[custom-template="amp-mustache"]')
         ).to.have.length(0);
-        expect(extensions.extensions_['amp-mustache']).to.be.undefined;
+        expect(extensions.extensions_['amp-mustache:0.1']).to.be.undefined;
         extensions.preloadExtension('amp-mustache');
         expect(
           doc.head.querySelectorAll('[custom-template="amp-mustache"]')
         ).to.have.length(1);
-        expect(extensions.extensions_['amp-mustache'].scriptPresent).to.be.true;
+        expect(extensions.extensions_['amp-mustache:0.1'].scriptPresent).to.be
+          .true;
         expect(win.customElements.elements['amp-mustache']).to.be.undefined;
       });
 
@@ -980,7 +1300,7 @@ describes.sandboxed('Extensions', {}, () => {
         expect(
           doc.head.querySelectorAll('[custom-element="amp-test"]')
         ).to.have.length(0);
-        expect(extensions.extensions_['amp-test']).to.be.undefined;
+        expect(extensions.extensions_['amp-test:1.0']).to.be.undefined;
         extensions.preloadExtension('amp-test', '1.0');
         expect(
           doc.head.querySelectorAll('[custom-element="amp-test"][src*="0.1"]')
@@ -988,7 +1308,7 @@ describes.sandboxed('Extensions', {}, () => {
         expect(
           doc.head.querySelectorAll('[custom-element="amp-test"][src*="1.0"]')
         ).to.have.length(1);
-        expect(extensions.extensions_['amp-test'].scriptPresent).to.be.true;
+        expect(extensions.extensions_['amp-test:1.0'].scriptPresent).to.be.true;
         expect(win.customElements.elements['amp-test']).to.be.undefined;
       });
 
@@ -1010,13 +1330,13 @@ describes.sandboxed('Extensions', {}, () => {
         expect(
           doc.head.querySelectorAll('[custom-element="amp-test"]')
         ).to.have.length(0);
-        expect(extensions.extensions_['amp-test']).to.be.undefined;
+        expect(extensions.extensions_['amp-test:0.1']).to.be.undefined;
 
         extensions.preloadExtension('amp-test');
         expect(
           doc.head.querySelectorAll('[custom-element="amp-test"]')
         ).to.have.length(1);
-        expect(extensions.extensions_['amp-test'].scriptPresent).to.be.true;
+        expect(extensions.extensions_['amp-test:0.1'].scriptPresent).to.be.true;
 
         extensions.preloadExtension('amp-test');
         expect(
@@ -1024,6 +1344,31 @@ describes.sandboxed('Extensions', {}, () => {
         ).to.have.length(1);
       });
 
+      it('should only insert script once with the right version', () => {
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"]')
+        ).to.have.length(0);
+        expect(extensions.extensions_['amp-test:0.1']).to.be.undefined;
+
+        extensions.preloadExtension('amp-test');
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"]')
+        ).to.have.length(1);
+        expect(
+          doc.head
+            .querySelector('[custom-element="amp-test"]')
+            .getAttribute('src')
+        ).to.contain('-0.1');
+        expect(extensions.extensions_['amp-test:0.1'].scriptPresent).to.be.true;
+
+        extensions.preloadExtension('amp-test', '0.1');
+        expect(
+          doc.head
+            .querySelector('[custom-element="amp-test"]')
+            .getAttribute('src')
+        ).to.contain('-0.1');
+      });
+
       it('should not insert when script exists in head', () => {
         const ampTestScript = doc.createElement('script');
         ampTestScript.setAttribute('custom-element', 'amp-test');
@@ -1035,7 +1380,7 @@ describes.sandboxed('Extensions', {}, () => {
         expect(
           doc.head.querySelectorAll('[custom-element="amp-test"]')
         ).to.have.length(1);
-        expect(extensions.extensions_['amp-test']).to.be.undefined;
+        expect(extensions.extensions_['amp-test:0.1']).to.be.undefined;
 
         extensions.preloadExtension('amp-test');
         expect(
@@ -1048,7 +1393,7 @@ describes.sandboxed('Extensions', {}, () => {
               '[i-amphtml-inserted]'
           )
         ).to.have.length(1);
-        expect(extensions.extensions_['amp-test'].scriptPresent).to.be.true;
+        expect(extensions.extensions_['amp-test:0.1'].scriptPresent).to.be.true;
         expect(win.customElements.elements['amp-test']).to.not.exist;
         expect(win.__AMP_EXTENDED_ELEMENTS['amp-test']).to.be.undefined;
       });
@@ -1077,13 +1422,76 @@ describes.sandboxed('Extensions', {}, () => {
         expect(
           doc.head.querySelectorAll('[custom-element="amp-ad"]')
         ).to.have.length(1);
-        expect(extensions.extensions_['amp-ad'].scriptPresent).to.be.true;
+        expect(extensions.extensions_['amp-ad:0.1'].scriptPresent).to.be.true;
 
         // The amp-embed module has never been created.
         expect(
           doc.head.querySelectorAll('[custom-element="amp-embed"]')
         ).to.have.length(0);
-        expect(extensions.extensions_['amp-embed']).to.be.undefined;
+        expect(extensions.extensions_['amp-embed:0.1']).to.be.undefined;
+      });
+    }
+  );
+
+  describes.fakeWin(
+    'importUnwrapped',
+    {
+      amp: true,
+      fakeRegisterElement: true,
+    },
+    (env) => {
+      let win, doc, extensions;
+
+      beforeEach(() => {
+        win = env.win;
+        doc = win.document;
+        extensions = env.extensions;
+      });
+
+      it('should insert extension script correctly', () => {
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"]')
+        ).to.have.length(0);
+        const promise = extensions.importUnwrapped(win, 'amp-test');
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"]')
+        ).to.have.length(1);
+
+        const script = doc.head.querySelector('[custom-element="amp-test"]');
+        dispatchCustomEvent(script, 'load', null, {bubbles: false});
+        return promise;
+      });
+
+      it('should only insert script once', () => {
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"]')
+        ).to.have.length(0);
+
+        const promise1 = extensions.importUnwrapped(win, 'amp-test');
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"]')
+        ).to.have.length(1);
+
+        const promise2 = extensions.importUnwrapped(win, 'amp-test');
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"]')
+        ).to.have.length(1);
+        expect(promise2).to.equal(promise1);
+      });
+
+      it('should give script correct attributes', () => {
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"]')
+        ).to.have.length(0);
+        extensions.importUnwrapped(win, 'amp-test');
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"]')
+        ).to.have.length(1);
+
+        const script = doc.head.querySelector('[custom-element="amp-test"]');
+        expect(script.getAttribute('data-script')).to.equal('amp-test');
+        expect(script.getAttribute('async')).to.equal('');
+        expect(script.getAttribute('crossorigin')).to.equal('anonymous');
       });
     }
   );
@@ -1109,23 +1517,76 @@ describes.sandboxed('Extensions', {}, () => {
         expect(
           doc.head.querySelectorAll('[custom-element="amp-test"]')
         ).to.have.length(0);
-        expect(extensions.extensions_['amp-test']).to.be.undefined;
+        expect(extensions.extensions_['amp-test:0.1']).to.be.undefined;
         extensions.installExtensionForDoc(ampdoc, 'amp-test');
         expect(loadSpy).to.be.calledOnce;
-        expect(loadSpy).to.be.calledWithExactly('amp-test', undefined);
+        expect(loadSpy).to.be.calledWithExactly('amp-test', '0.1');
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"][src*="-0.1"]')
+        ).to.have.length(1);
+        expect(
+          doc.head
+            .querySelector('[custom-element="amp-test"]')
+            .getAttribute('src')
+        ).to.contain('-0.1');
+        expect(extensions.extensions_['amp-test:0.1'].scriptPresent).to.be.true;
+        expect(win.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(ElementStub);
+      });
+
+      it('should insert extension script correctly for non-default version', () => {
+        const loadSpy = env.sandbox.spy(extensions, 'preloadExtension');
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"]')
+        ).to.have.length(0);
+        expect(extensions.extensions_['amp-test:0.2']).to.be.undefined;
+        extensions.installExtensionForDoc(ampdoc, 'amp-test', '0.2');
+
+        // Extension is declared immediately.
+        expect(ampdoc.declaresExtension('amp-test', '0.2')).to.be.true;
+
+        expect(loadSpy).to.be.calledOnce;
+        expect(loadSpy).to.be.calledWithExactly('amp-test', '0.2');
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"][src*="-0.2"]')
+        ).to.have.length(1);
+        expect(
+          doc.head
+            .querySelector('[custom-element="amp-test"]')
+            .getAttribute('src')
+        ).to.contain('-0.2');
+        expect(extensions.extensions_['amp-test:0.2'].scriptPresent).to.be.true;
+        expect(win.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(ElementStub);
+      });
+
+      it('should insert extension script with a specified version', () => {
+        const loadSpy = env.sandbox.spy(extensions, 'preloadExtension');
+        expect(
+          doc.head.querySelectorAll('[custom-element="amp-test"]')
+        ).to.have.length(0);
+        expect(extensions.extensions_['amp-test:0.2']).to.be.undefined;
+        extensions.installExtensionForDoc(ampdoc, 'amp-test', '0.2');
+        expect(loadSpy).to.be.calledOnce;
+        expect(loadSpy).to.be.calledWithExactly('amp-test', '0.2');
         expect(
           doc.head.querySelectorAll('[custom-element="amp-test"]')
         ).to.have.length(1);
-        expect(extensions.extensions_['amp-test'].scriptPresent).to.be.true;
+        expect(
+          doc.head
+            .querySelector('[custom-element="amp-test"]')
+            .getAttribute('src')
+        ).to.contain('-0.2');
+        expect(extensions.extensions_['amp-test:0.2'].scriptPresent).to.be.true;
         expect(win.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(ElementStub);
       });
 
       it('should stub main extension immediately', () => {
-        const extHolder = extensions.getExtensionHolder_('amp-test');
+        const extHolder = extensions.getExtensionHolder_('amp-test', '0.1');
         extHolder.scriptPresent = true;
         expect(ampdoc.declaresExtension('amp-test')).to.be.false;
         const promise = extensions.installExtensionForDoc(ampdoc, 'amp-test');
-        expect(ampdoc.declaresExtension('amp-test')).to.be.false;
+
+        // Extension is declared immediately.
+        expect(ampdoc.declaresExtension('amp-test', '0.1')).to.be.true;
 
         // Stubbed immediately.
         expect(win.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(ElementStub);
@@ -1135,6 +1596,8 @@ describes.sandboxed('Extensions', {}, () => {
         // Resolve the promise.
         extensions.registerExtension(
           'amp-test',
+          '0.1',
+          true,
           (AMP) => {
             // Main extension with CSS.
             AMP.registerElement('amp-test', AmpTest, 'a{}');
@@ -1149,14 +1612,12 @@ describes.sandboxed('Extensions', {}, () => {
           expect(win.__AMP_EXTENDED_ELEMENTS['amp-test-sub']).to.equal(
             AmpTestSub
           );
-          // Extension is now declared.
-          expect(ampdoc.declaresExtension('amp-test')).to.be.true;
         });
       });
 
       it('should reuse the load if already started', () => {
         const loadSpy = env.sandbox.spy(extensions, 'preloadExtension');
-        const extHolder = extensions.getExtensionHolder_('amp-test');
+        const extHolder = extensions.getExtensionHolder_('amp-test', '0.1');
         extHolder.scriptPresent = true;
         const promise1 = extensions.installExtensionForDoc(ampdoc, 'amp-test');
         const promise2 = extensions.installExtensionForDoc(ampdoc, 'amp-test');
@@ -1164,7 +1625,7 @@ describes.sandboxed('Extensions', {}, () => {
         expect(loadSpy).to.be.calledOnce;
 
         // Resolve.
-        extensions.registerExtension('amp-test', () => {}, {});
+        extensions.registerExtension('amp-test', '0.1', true, () => {}, {});
         return promise1.then(() => {
           const promise3 = extensions.installExtensionForDoc(
             ampdoc,
@@ -1188,11 +1649,13 @@ describes.sandboxed('Extensions', {}, () => {
           return {a: 2};
         };
 
-        const extHolder = extensions.getExtensionHolder_('amp-test');
+        const extHolder = extensions.getExtensionHolder_('amp-test', '0.1');
         extHolder.scriptPresent = true;
         expect(ampdoc.declaresExtension('amp-test')).to.be.false;
         const promise = extensions.installExtensionForDoc(ampdoc, 'amp-test');
-        expect(ampdoc.declaresExtension('amp-test')).to.be.false;
+
+        // Extension is declared immediately.
+        expect(ampdoc.declaresExtension('amp-test', '0.1')).to.be.true;
 
         // Services do not exist yet.
         allowConsoleError(() => {
@@ -1209,6 +1672,8 @@ describes.sandboxed('Extensions', {}, () => {
         // Resolve the promise.
         extensions.registerExtension(
           'amp-test',
+          '0.1',
+          true,
           (AMP) => {
             AMP.registerServiceForDoc('service1', factory1);
             AMP.registerServiceForDoc('service2', factory2);
@@ -1244,11 +1709,13 @@ describes.sandboxed('Extensions', {}, () => {
           return {a: 3};
         };
 
-        const extHolder = extensions.getExtensionHolder_('amp-test');
+        const extHolder = extensions.getExtensionHolder_('amp-test', '0.1');
         extHolder.scriptPresent = true;
         const promise = extensions.installExtensionForDoc(ampdoc, 'amp-test');
         extensions.registerExtension(
           'amp-test',
+          '0.1',
+          true,
           (AMP) => {
             AMP.registerServiceForDoc('service1', factory1);
             AMP.registerServiceForDoc('service2', factory2);
@@ -1271,4 +1738,50 @@ describes.sandboxed('Extensions', {}, () => {
       });
     }
   );
+
+  describes.realWin(
+    'preinstallEmbed',
+    {
+      amp: true,
+      fakeRegisterElement: true,
+    },
+    (env) => {
+      let win, extensions;
+      let ampdoc;
+
+      beforeEach(() => {
+        win = env.win;
+        ampdoc = env.ampdoc;
+        extensions = env.extensions;
+        win.customElements.elements = {};
+        win.__AMP_EXTENDED_ELEMENTS = {};
+
+        const shadowRoot = document.createDocumentFragment();
+        ampdoc = new AmpDocShadow(win, 'https://a.org/', shadowRoot);
+      });
+
+      it('should install builtins', () => {
+        extensions.preinstallEmbed(ampdoc, []);
+        expect(win.customElements.elements['amp-img']).to.exist;
+      });
+
+      it('should install legacy elements', () => {
+        extensions.preinstallEmbed(ampdoc, []);
+        expect(win.customElements.elements['amp-video']).to.exist;
+      });
+
+      it('should declare and stub extensions', () => {
+        extensions.preinstallEmbed(ampdoc, [
+          {extensionId: 'amp-test', extensionVersion: '0.2'},
+          {extensionId: 'amp-other', extensionVersion: '0.3'},
+        ]);
+
+        expect(ampdoc.declaresExtension('amp-test', '0.2')).to.be.true;
+        expect(win.customElements.elements['amp-test']).to.not.be.undefined;
+
+        expect(ampdoc.declaresExtension('amp-other', '0.3')).to.be.true;
+        expect(win.customElements.elements['amp-other']).to.not.be.undefined;
+      });
+    }
+  );
 });
diff --git a/test/unit/test-finite-state-machine.js b/test/unit/test-finite-state-machine.js
deleted file mode 100644
index 4869671f31b87..0000000000000
--- a/test/unit/test-finite-state-machine.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {FiniteStateMachine} from '../../src/finite-state-machine';
-
-describe('Finite State Machine', () => {
-  describe('simple machines', () => {
-    let fsm;
-    let spy;
-    let other;
-
-    beforeEach(() => {
-      fsm = new FiniteStateMachine('init');
-      spy = window.sandbox.spy();
-      other = window.sandbox.spy();
-
-      fsm.addTransition('init', 'start', spy);
-      fsm.addTransition('init', 'other', other);
-    });
-
-    it('invokes callbacks on transition', () => {
-      fsm.setState('start');
-
-      expect(spy).to.have.been.called;
-    });
-
-    it('ignores other transition callbacks', () => {
-      fsm.setState('other');
-
-      expect(spy).not.to.have.been.called;
-      expect(other).to.have.been.called;
-    });
-
-    it('handles unregistered transitions', () => {
-      fsm.setState('unknown');
-
-      expect(spy).not.to.have.been.called;
-      expect(other).not.to.have.been.called;
-    });
-  });
-});
diff --git a/test/unit/test-fixed-layer.js b/test/unit/test-fixed-layer.js
index a0a113c01c3ce..44579ec965717 100644
--- a/test/unit/test-fixed-layer.js
+++ b/test/unit/test-fixed-layer.js
@@ -15,19 +15,19 @@
  */
 
 import {AmpDocSingle, installDocService} from '../../src/service/ampdoc-impl';
+import {Animation} from '../../src/animation';
 import {FakeMutationObserver, FakeWindow} from '../../testing/fake-dom';
 import {FixedLayer} from '../../src/service/fixed-layer';
 import {Services} from '../../src/services';
-import {endsWith} from '../../src/string';
+import {endsWith} from '../../src/core/types/string';
 import {installHiddenObserverForDoc} from '../../src/service/hidden-observer-impl';
 import {installPlatformService} from '../../src/service/platform-impl';
 import {installTimerService} from '../../src/service/timer-impl';
 import {installViewerServiceForDoc} from '../../src/service/viewer-impl';
 import {toggle} from '../../src/style';
-import {toggleExperiment} from '../../src/experiments';
 import {user} from '../../src/log';
 
-describes.sandboxed('FixedLayer', {}, () => {
+describes.sandboxed('FixedLayer', {}, (env) => {
   let parentApi;
   let documentApi;
   let ampdoc;
@@ -552,7 +552,7 @@ describes.sandboxed('FixedLayer', {}, () => {
       });
 
       it('should add and remove element directly', () => {
-        const updateStub = window.sandbox.stub(fixedLayer, 'update');
+        const updateStub = env.sandbox.stub(fixedLayer, 'update');
         expect(fixedLayer.elements_).to.have.length(5);
 
         // Add.
@@ -898,7 +898,7 @@ describes.sandboxed('FixedLayer', {}, () => {
         expect(state['F0'].top).to.equal('0px');
 
         // Update to transient padding.
-        window.sandbox.stub(fixedLayer, 'update').callsFake(() => {});
+        env.sandbox.stub(fixedLayer, 'update').callsFake(() => {});
         fixedLayer.updatePaddingTop(22, /* transient */ true);
         vsyncTasks[0].measure(state);
         expect(state['F0'].fixed).to.be.true;
@@ -1168,7 +1168,7 @@ describes.sandboxed('FixedLayer', {}, () => {
         element1.setAttribute('style', 'bottom: 10px');
         element1.style.bottom = '10px';
 
-        const userError = window.sandbox.stub(user(), 'error');
+        const userError = env.sandbox.stub(user(), 'error');
         fixedLayer.setup();
         // Expect error regarding inline styles.
         expect(userError).calledWithMatch(
@@ -1180,11 +1180,6 @@ describes.sandboxed('FixedLayer', {}, () => {
       describe('hidden toggle', () => {
         let mutationObserver;
         beforeEach(() => {
-          toggleExperiment(
-            documentApi.defaultView,
-            'hidden-mutation-observer',
-            true
-          );
           fixedLayer.observeHiddenMutations();
           mutationObserver = Services.hiddenObserverForDoc(
             documentApi.documentElement
@@ -1205,7 +1200,7 @@ describes.sandboxed('FixedLayer', {}, () => {
 
           element1.computedStyle['display'] = '';
 
-          window.sandbox.stub(timer, 'delay').callsFake((callback) => {
+          env.sandbox.stub(timer, 'delay').callsFake((callback) => {
             callback();
           });
           return mutationObserver
@@ -1225,7 +1220,7 @@ describes.sandboxed('FixedLayer', {}, () => {
       });
 
       it('should ignore descendants of already-tracked elements', () => {
-        const updateStub = window.sandbox.stub(fixedLayer, 'update');
+        const updateStub = env.sandbox.stub(fixedLayer, 'update');
         expect(fixedLayer.elements_).to.have.length(5);
 
         element1.appendChild(element6);
@@ -1237,7 +1232,7 @@ describes.sandboxed('FixedLayer', {}, () => {
       });
 
       it('should replace descendants of tracked elements', () => {
-        const updateStub = window.sandbox.stub(fixedLayer, 'update');
+        const updateStub = env.sandbox.stub(fixedLayer, 'update');
         expect(fixedLayer.elements_).to.have.length(5);
 
         element6.appendChild(element1);
@@ -1579,7 +1574,7 @@ describes.sandboxed('FixedLayer', {}, () => {
       element1.setAttribute('style', 'bottom: 10px');
       element1.style.bottom = '10px';
 
-      const userError = window.sandbox.stub(user(), 'error');
+      const userError = env.sandbox.stub(user(), 'error');
       fixedLayer.setup();
       // Expect error regarding inline styles.
       expect(userError).calledWithMatch(
@@ -1591,11 +1586,6 @@ describes.sandboxed('FixedLayer', {}, () => {
     describe('hidden toggle', () => {
       let mutationObserver;
       beforeEach(() => {
-        toggleExperiment(
-          documentApi.defaultView,
-          'hidden-mutation-observer',
-          true
-        );
         fixedLayer.observeHiddenMutations();
         mutationObserver = Services.hiddenObserverForDoc(
           documentApi.documentElement
@@ -1616,7 +1606,7 @@ describes.sandboxed('FixedLayer', {}, () => {
 
         element1.computedStyle['display'] = '';
 
-        window.sandbox.stub(timer, 'delay').callsFake((callback) => {
+        env.sandbox.stub(timer, 'delay').callsFake((callback) => {
           callback();
         });
         return mutationObserver
@@ -1843,3 +1833,56 @@ describes.sandboxed(
     });
   }
 );
+
+describes.sandboxed(
+  'FixedLayer bug due to calling browser native instead of AMP implementation',
+  {},
+  (env) => {
+    let win;
+    let ampdoc;
+    let viewer;
+    let vsyncApi;
+
+    beforeEach(() => {
+      win = new FakeWindow();
+      window.__AMP_MODE = {
+        localDev: true,
+        development: false,
+        minified: false,
+        test: false,
+        version: '$internalRuntimeVersion$',
+      };
+
+      const vsyncTasks = [];
+      vsyncApi = {
+        runPromise: async (task) => {
+          vsyncTasks.push(task);
+        },
+        mutate: (mutator) => {
+          vsyncTasks.push({mutate: mutator});
+        },
+      };
+    });
+
+    it('should call Animation.animate in animateFixedElements', () => {
+      const animateSpy = env.sandbox.spy(Animation, 'animate');
+
+      ampdoc = new AmpDocSingle(win);
+      installPlatformService(win);
+      installTimerService(win);
+      installViewerServiceForDoc(ampdoc);
+      viewer = Services.viewerForDoc(ampdoc);
+      viewer.isEmbedded = () => true;
+
+      const fixedLayer = new FixedLayer(
+        ampdoc,
+        vsyncApi,
+        /* borderTop */ 0,
+        /* paddingTop */ 11,
+        /* transfer */ false
+      );
+      fixedLayer.animateFixedElements(123, 456, 789, 'ease-in', false);
+      expect(animateSpy).to.be.calledOnce;
+    });
+  }
+);
diff --git a/test/unit/test-focus-history.js b/test/unit/test-focus-history.js
index 056426c191222..b16c9cc7c52ef 100644
--- a/test/unit/test-focus-history.js
+++ b/test/unit/test-focus-history.js
@@ -17,7 +17,7 @@
 import {FocusHistory} from '../../src/focus-history';
 import {installTimerService} from '../../src/service/timer-impl';
 
-describe('FocusHistory', () => {
+describes.sandboxed('FocusHistory', {}, (env) => {
   let clock;
   let testDoc;
   let eventListeners;
@@ -26,7 +26,7 @@ describe('FocusHistory', () => {
   let focusHistory;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
 
     eventListeners = {};
     testDoc = {
diff --git a/test/unit/test-form-data-wrapper.js b/test/unit/test-form-data-wrapper.js
index a4bf8cd849db9..6d6751ce7cd40 100644
--- a/test/unit/test-form-data-wrapper.js
+++ b/test/unit/test-form-data-wrapper.js
@@ -19,7 +19,7 @@ import {
   createFormDataWrapper,
 } from '../../src/form-data-wrapper';
 import {Services} from '../../src/services';
-import {fromIterator} from '../../src/utils/array';
+import {fromIterator} from '../../src/core/types/array';
 
 describes.realWin('FormDataWrapper', {}, (env) => {
   describe('entries', () => {
diff --git a/test/unit/test-friendly-iframe-embed.js b/test/unit/test-friendly-iframe-embed.js
index 934687222bed5..6bfb2a926384a 100644
--- a/test/unit/test-friendly-iframe-embed.js
+++ b/test/unit/test-friendly-iframe-embed.js
@@ -14,32 +14,34 @@
  * limitations under the License.
  */
 
+import {AmpDocFie} from '../../src/service/ampdoc-impl';
 import {BaseElement} from '../../src/base-element';
+import {Deferred} from '../../src/core/data-structures/promise';
 import {ElementStub} from '../../src/element-stub';
+import {FakeWindow} from '../../testing/fake-dom';
 import {
   FriendlyIframeEmbed,
+  Installers,
   installFriendlyIframeEmbed,
-  installStandardServicesInEmbed,
   mergeHtmlForTesting,
-  setFriendlyIframeEmbedVisible,
+  preloadFriendlyIframeEmbedExtensions,
   setSrcdocSupportedForTesting,
 } from '../../src/friendly-iframe-embed';
 import {Services} from '../../src/services';
-import {Signals} from '../../src/utils/signals';
+import {Signals} from '../../src/core/data-structures/signals';
 import {getFriendlyIframeEmbedOptional} from '../../src/iframe-helper';
 import {
-  getService,
-  installServiceInEmbedScope,
+  getServiceInEmbedWin,
   registerServiceBuilder,
+  registerServiceBuilderInEmbedWin,
   setParentWindow,
 } from '../../src/service';
 import {installExtensionsService} from '../../src/service/extensions-impl';
 import {isAnimationNone} from '../../testing/test-helper';
-import {layoutRectLtwh} from '../../src/layout-rect';
+import {layoutRectLtwh} from '../../src/core/math/layout-rect';
 import {loadPromise} from '../../src/event-helper';
 import {resetScheduledElementForTesting} from '../../src/service/custom-element-registry';
-import {toggleAmpdocFieForTesting} from '../../src/ampdoc-fie';
-import {updateFieModeForTesting} from '../../src/service/ampdoc-impl';
+import {setStyles} from '../../src/style';
 
 describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
   let window, document;
@@ -47,18 +49,20 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
   let extensionsMock;
   let resourcesMock;
   let ampdocServiceMock;
-  let preInstallExtensionsInChildWindowStub;
-  let doInstallExtensionsInChildWindowStub;
-  let installExtensionsInFieStub;
+  let customElementsDefineStub;
+  let installServicesStub;
+  let preinstallCallback, preinstallCallbackSpy;
 
   beforeEach(() => {
     window = env.win;
     document = window.document;
 
     const extensions = Services.extensionsFor(window);
-    const resources = Services.resourcesForDoc(window.document);
+    const resources = Services.resourcesForDoc(document);
     const ampdocService = {
-      installFieDoc: () => {},
+      getAmpDoc: () => env.ampdoc,
+      installFieDoc: (url, childWin, options) =>
+        new AmpDocFie(childWin, url, env.ampdoc, options),
     };
     extensionsMock = env.sandbox.mock(extensions);
     resourcesMock = env.sandbox.mock(resources);
@@ -69,17 +73,17 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
 
     iframe = document.createElement('iframe');
 
-    preInstallExtensionsInChildWindowStub = env.sandbox
-      .stub(FriendlyIframeEmbed.prototype, 'preInstallExtensionsInChildWindow')
-      .returns(Promise.resolve());
-
-    doInstallExtensionsInChildWindowStub = env.sandbox
-      .stub(FriendlyIframeEmbed.prototype, 'doInstallExtensionsInChildWindow')
-      .returns(Promise.resolve());
+    customElementsDefineStub = null;
+    preinstallCallbackSpy = env.sandbox.spy();
+    preinstallCallback = (win, ampdoc) => {
+      preinstallCallbackSpy(win, ampdoc);
+      customElementsDefineStub = env.sandbox.stub(win.customElements, 'define');
+    };
 
-    installExtensionsInFieStub = env.sandbox
-      .stub(FriendlyIframeEmbed.prototype, 'installExtensionsInFie')
-      .returns(Promise.resolve());
+    installServicesStub = env.sandbox.stub(
+      Installers,
+      'installStandardServicesInEmbed'
+    );
   });
 
   afterEach(() => {
@@ -90,7 +94,6 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
     resourcesMock.verify();
     ampdocServiceMock.verify();
     setSrcdocSupportedForTesting(undefined);
-    toggleAmpdocFieForTesting(window, false);
   });
 
   function stubViewportScrollTop(scrollTop) {
@@ -107,6 +110,7 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
     const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
       url: 'https://acme.org/url1',
       html: '<a href="/url2"></a>',
+      extensions: [],
     });
 
     // Attributes set.
@@ -146,8 +150,10 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
           'https://acme.org/url2'
         );
 
-        return loadPromise(iframe);
+        // Check that extensions-known has been set.
+        return embed.ampdoc.whenExtensionsKnown();
       })
+      .then(() => loadPromise(iframe))
       .then(() => {
         // Iframe is marked as complete.
         expect(iframe.readyState).to.equal('complete');
@@ -176,15 +182,19 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
   });
 
   it('should create ampdoc and install extensions', () => {
-    toggleAmpdocFieForTesting(window, true);
-
     // AmpDoc is created.
     const ampdocSignals = new Signals();
+    let childWinForAmpDoc;
     const ampdoc = {
+      get win() {
+        return childWinForAmpDoc;
+      },
+      getParent: () => env.ampdoc,
       setReady: env.sandbox.spy(),
       signals: () => ampdocSignals,
+      getHeadNode: () => childWinForAmpDoc.document.head,
+      setExtensionsKnown: env.sandbox.stub(),
     };
-    let childWinForAmpDoc;
     ampdocServiceMock
       .expects('installFieDoc')
       .withExactArgs(
@@ -206,34 +216,54 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
     // Extensions preloading have been requested.
     extensionsMock
       .expects('preloadExtension')
-      .withExactArgs('amp-test')
+      .withExactArgs('amp-test', '0.2')
+      .returns(Promise.resolve())
+      .once();
+    extensionsMock
+      .expects('preinstallEmbed')
+      .withExactArgs(ampdoc, [
+        {extensionId: 'amp-test', extensionVersion: '0.2'},
+      ])
+      .once();
+    extensionsMock
+      .expects('installExtensionsInDoc')
+      .withExactArgs(ampdoc, [
+        {extensionId: 'amp-test', extensionVersion: '0.2'},
+      ])
       .returns(Promise.resolve())
       .once();
 
-    let readyResolver = null;
-    const readyPromise = new Promise((resolve) => {
-      readyResolver = resolve;
+    let renderCompleteResolver = null;
+    const renderCompletePromise = new Promise((resolve) => {
+      renderCompleteResolver = resolve;
     });
     env.sandbox
-      .stub(FriendlyIframeEmbed.prototype, 'whenReady')
-      .callsFake(() => readyPromise);
+      .stub(FriendlyIframeEmbed.prototype, 'whenRenderComplete')
+      .callsFake(() => renderCompletePromise);
 
-    const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
-      url: 'https://acme.org/url1',
-      html: '<amp-test></amp-test>',
-      extensionIds: ['amp-test'],
-    });
+    const embedPromise = installFriendlyIframeEmbed(
+      iframe,
+      document.body,
+      {
+        url: 'https://acme.org/url1',
+        html: '<amp-test></amp-test>',
+        extensions: [{extensionId: 'amp-test', extensionVersion: '0.2'}],
+      },
+      preinstallCallback
+    );
     return embedPromise
       .then((embed) => {
         expect(childWinForAmpDoc).to.equal(embed.win);
         expect(ampdoc).to.equal(embed.ampdoc);
-        expect(installExtensionsInFieStub).to.be.calledWithMatch(
-          env.sandbox.match.any,
-          env.sandbox.match.same(ampdoc)
-        );
+        expect(installServicesStub).to.be.calledOnce.calledWith(ampdoc);
         expect(ampdoc.setReady).to.not.be.called;
-        readyResolver();
-        return readyPromise;
+
+        // Check that extensions-known has been set.
+        expect(embed.ampdoc.setExtensionsKnown).to.be.calledOnce;
+
+        // Complete rendering.
+        renderCompleteResolver();
+        return renderCompletePromise;
       })
       .then(() => {
         expect(ampdoc.setReady).to.be.calledOnce;
@@ -241,8 +271,6 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
   });
 
   it('should create ampdoc and install extensions with host', () => {
-    toggleAmpdocFieForTesting(window, true);
-
     // host.
     const hostSignals = new Signals();
     const host = document.createElement('div');
@@ -253,8 +281,14 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
     // AmpDoc is created.
     let ampdocSignals = null;
     const ampdoc = {
+      get win() {
+        return childWinForAmpDoc;
+      },
+      getParent: () => env.ampdoc,
       setReady: env.sandbox.spy(),
       signals: () => ampdocSignals,
+      getHeadNode: () => childWinForAmpDoc.document.head,
+      setExtensionsKnown: env.sandbox.stub(),
     };
     let childWinForAmpDoc;
     ampdocServiceMock
@@ -279,35 +313,50 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
     // Extensions preloading have been requested.
     extensionsMock
       .expects('preloadExtension')
-      .withExactArgs('amp-test')
+      .withExactArgs('amp-test', 'latest')
+      .returns(Promise.resolve())
+      .once();
+    extensionsMock
+      .expects('preinstallEmbed')
+      .withExactArgs(ampdoc, [
+        {extensionId: 'amp-test', extensionVersion: 'latest'},
+      ])
+      .once();
+    extensionsMock
+      .expects('installExtensionsInDoc')
+      .withExactArgs(ampdoc, [
+        {extensionId: 'amp-test', extensionVersion: 'latest'},
+      ])
       .returns(Promise.resolve())
       .once();
 
-    let readyResolver = null;
-    const readyPromise = new Promise((resolve) => {
-      readyResolver = resolve;
+    let renderCompleteResolver = null;
+    const renderCompletePromise = new Promise((resolve) => {
+      renderCompleteResolver = resolve;
     });
     env.sandbox
-      .stub(FriendlyIframeEmbed.prototype, 'whenReady')
-      .callsFake(() => readyPromise);
+      .stub(FriendlyIframeEmbed.prototype, 'whenRenderComplete')
+      .callsFake(() => renderCompletePromise);
 
-    const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
-      url: 'https://acme.org/url1',
-      html: '<amp-test></amp-test>',
-      extensionIds: ['amp-test'],
-      host,
-    });
+    const embedPromise = installFriendlyIframeEmbed(
+      iframe,
+      document.body,
+      {
+        url: 'https://acme.org/url1',
+        html: '<amp-test></amp-test>',
+        extensions: [{extensionId: 'amp-test', extensionVersion: 'latest'}],
+        host,
+      },
+      preinstallCallback
+    );
     return embedPromise
       .then((embed) => {
         expect(childWinForAmpDoc).to.equal(embed.win);
         expect(ampdoc).to.equal(embed.ampdoc);
-        expect(installExtensionsInFieStub).to.be.calledWithMatch(
-          env.sandbox.match.any,
-          env.sandbox.match.same(ampdoc)
-        );
+        expect(installServicesStub).to.be.calledOnce.calledWith(ampdoc);
         expect(ampdoc.setReady).to.not.be.called;
-        readyResolver();
-        return readyPromise;
+        renderCompleteResolver();
+        return renderCompletePromise;
       })
       .then(() => {
         expect(ampdoc.setReady).to.be.calledOnce;
@@ -316,50 +365,30 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
       });
   });
 
-  it('should install extensions', () => {
+  it('should install extensions', async () => {
     // Extensions preloading have been requested.
     extensionsMock
       .expects('preloadExtension')
-      .withExactArgs('amp-test')
+      .withExactArgs('amp-test', 'latest')
       .returns(Promise.resolve())
-      .once();
-
-    const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
-      url: 'https://acme.org/url1',
-      html: '<amp-test></amp-test>',
-      extensionIds: ['amp-test'],
-    });
-    return embedPromise.then((embed) => {
-      expect(preInstallExtensionsInChildWindowStub).to.be.calledWith(
-        env.sandbox.match.any,
-        env.sandbox.match.same(embed.win)
-      );
-      expect(doInstallExtensionsInChildWindowStub).to.be.calledWith(
-        env.sandbox.match.any,
-        env.sandbox.match.same(embed.win)
-      );
-    });
-  });
+      .atLeast(1);
 
-  it('should pass pre-install callback', () => {
-    const preinstallCallback = function () {};
-
-    const embedPromise = installFriendlyIframeEmbed(
+    await installFriendlyIframeEmbed(
       iframe,
       document.body,
       {
         url: 'https://acme.org/url1',
         html: '<amp-test></amp-test>',
+        extensions: [{extensionId: 'amp-test', extensionVersion: 'latest'}],
       },
       preinstallCallback
     );
-    return embedPromise.then(() => {
-      expect(preInstallExtensionsInChildWindowStub).to.be.calledOnce;
-      expect(doInstallExtensionsInChildWindowStub).to.be.calledOnce;
-    });
+    expect(customElementsDefineStub.callCount).to.be.above(0);
+    expect(customElementsDefineStub).to.be.calledWith('amp-img');
+    expect(customElementsDefineStub).to.be.calledWith('amp-test');
   });
 
-  it.skip('should install and dispose services', () => {
+  it('should install and dispose services', () => {
     const disposeSpy = env.sandbox.spy();
     const embedService = {
       dispose: disposeSpy,
@@ -370,50 +399,177 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
       {
         url: 'https://acme.org/url1',
         html: '<amp-test></amp-test>',
+        extensions: [],
       },
       (embedWin) => {
-        installServiceInEmbedScope(embedWin, 'c', embedService);
+        registerServiceBuilderInEmbedWin(embedWin, 'c', function () {
+          return embedService;
+        });
       }
     );
     return embedPromise.then((embed) => {
-      expect(embed.win.__AMP_SERVICES['c'].obj).to.equal(embedService);
+      expect(getServiceInEmbedWin(embed.win, 'c')).to.equal(embedService);
       expect(disposeSpy).to.not.be.called;
       embed.destroy();
       expect(disposeSpy).to.be.calledOnce;
     });
   });
 
-  it('should dispose ampdoc', () => {
-    toggleAmpdocFieForTesting(window, true);
+  it('should pause and resume FIE using ampdoc visibility', async () => {
+    // AmpDoc is created.
+    const ampdocSignals = new Signals();
+    let childWinForAmpDoc;
+    const ampdoc = {
+      get win() {
+        return childWinForAmpDoc;
+      },
+      getParent: () => env.ampdoc,
+      setReady: env.sandbox.spy(),
+      signals: () => ampdocSignals,
+      getHeadNode: () => childWinForAmpDoc.document.head,
+      setExtensionsKnown: env.sandbox.stub(),
+      overrideVisibilityState: env.sandbox.spy(),
+      dispose: env.sandbox.spy(),
+    };
+    ampdocServiceMock
+      .expects('installFieDoc')
+      .withExactArgs(
+        'https://acme.org/url1',
+        env.sandbox.match((arg) => {
+          // Match childWin argument.
+          childWinForAmpDoc = arg;
+          return true;
+        }),
+        env.sandbox.match(() => true)
+      )
+      .returns(ampdoc)
+      .once();
+
+    env.sandbox
+      .stub(FriendlyIframeEmbed.prototype, 'whenRenderStarted')
+      .returns(Promise.resolve());
+
+    const embed = await installFriendlyIframeEmbed(
+      iframe,
+      document.body,
+      {
+        url: 'https://acme.org/url1',
+        html: '',
+        extensions: [],
+      },
+      preinstallCallback
+    );
+
+    embed.pause();
+    expect(ampdoc.overrideVisibilityState).to.be.calledOnce.calledWith(
+      'paused'
+    );
+
+    embed.resume();
+    expect(ampdoc.overrideVisibilityState).to.be.calledTwice.calledWith(
+      'visible'
+    );
+  });
 
+  it('should signal fie doc ready during install when not streaming', async () => {
+    const setReadySpy = env.sandbox.spy(AmpDocFie.prototype, 'setReady');
+    await installFriendlyIframeEmbed(
+      iframe,
+      document.body,
+      {
+        url: 'https://acme.test/url1',
+        html: '<amp-test></amp-test>',
+        extensions: [{extensionId: 'amp-test', extensionVersion: 'latest'}],
+      },
+      preinstallCallback
+    );
+    expect(setReadySpy).to.be.called;
+  });
+
+  it('should wait complete streaming before signaling fie doc ready', async () => {
+    const setReadySpy = env.sandbox.spy(AmpDocFie.prototype, 'setReady');
+    const fie = await installFriendlyIframeEmbed(
+      iframe,
+      document.body,
+      {
+        url: 'https://acme.test/url1',
+        html: '<amp-test></amp-test>',
+        extensions: [{extensionId: 'amp-test', extensionVersion: 'latest'}],
+        skipHtmlMerge: true,
+      },
+      preinstallCallback
+    );
+    expect(setReadySpy).not.to.be.called;
+    await fie.renderCompleted();
+    expect(setReadySpy).to.be.called;
+  });
+
+  it('should dispose ampdoc', () => {
     // AmpDoc is created.
     const ampdocSignals = new Signals();
+    let childWinForAmpDoc;
     const ampdoc = {
+      get win() {
+        return childWinForAmpDoc;
+      },
+      getParent: () => env.ampdoc,
       setReady: env.sandbox.spy(),
       signals: () => ampdocSignals,
+      getHeadNode: () => childWinForAmpDoc.document.head,
+      setExtensionsKnown: env.sandbox.stub(),
       dispose: env.sandbox.spy(),
     };
-    ampdocServiceMock.expects('installFieDoc').returns(ampdoc).once();
+    ampdocServiceMock
+      .expects('installFieDoc')
+      .withExactArgs(
+        'https://acme.org/url1',
+        env.sandbox.match((arg) => {
+          // Match childWin argument.
+          childWinForAmpDoc = arg;
+          return true;
+        }),
+        env.sandbox.match(() => true)
+      )
+      .returns(ampdoc)
+      .once();
 
     // Extensions preloading have been requested.
     extensionsMock
       .expects('preloadExtension')
-      .withExactArgs('amp-test')
+      .withExactArgs('amp-test', 'latest')
+      .returns(Promise.resolve())
+      .once();
+    extensionsMock
+      .expects('preinstallEmbed')
+      .withExactArgs(ampdoc, [
+        {extensionId: 'amp-test', extensionVersion: 'latest'},
+      ])
+      .once();
+    extensionsMock
+      .expects('installExtensionsInDoc')
+      .withExactArgs(ampdoc, [
+        {extensionId: 'amp-test', extensionVersion: 'latest'},
+      ])
       .returns(Promise.resolve())
       .once();
 
     env.sandbox
-      .stub(FriendlyIframeEmbed.prototype, 'whenReady')
+      .stub(FriendlyIframeEmbed.prototype, 'whenRenderStarted')
       .returns(Promise.resolve());
 
-    const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
-      url: 'https://acme.org/url1',
-      html: '<amp-test></amp-test>',
-      extensionIds: ['amp-test'],
-    });
+    const embedPromise = installFriendlyIframeEmbed(
+      iframe,
+      document.body,
+      {
+        url: 'https://acme.org/url1',
+        html: '<amp-test></amp-test>',
+        extensions: [{extensionId: 'amp-test', extensionVersion: 'latest'}],
+      },
+      preinstallCallback
+    );
     return embedPromise
       .then((embed) => {
-        expect(installExtensionsInFieStub).to.be.calledOnce;
+        expect(installServicesStub).to.be.calledOnce.calledWith(ampdoc);
         embed.destroy();
       })
       .then(() => {
@@ -421,30 +577,6 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
       });
   });
 
-  it('should start invisible by default and update on request', () => {
-    const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
-      url: 'https://acme.org/url1',
-      html: '',
-      extensionIds: [],
-    });
-    return embedPromise.then((embed) => {
-      expect(preInstallExtensionsInChildWindowStub).to.be.calledOnce;
-      expect(doInstallExtensionsInChildWindowStub).to.be.calledOnce;
-      expect(embed.isVisible()).to.be.false;
-      const spy = env.sandbox.spy();
-      embed.onVisibilityChanged(spy);
-
-      setFriendlyIframeEmbedVisible(embed, false);
-      expect(embed.isVisible()).to.be.false;
-      expect(spy).to.not.be.called;
-
-      setFriendlyIframeEmbedVisible(embed, true);
-      expect(embed.isVisible()).to.be.true;
-      expect(spy).to.be.calledOnce;
-      expect(spy.args[0][0]).to.equal(true);
-    });
-  });
-
   it.skip('should support host', () => {
     const host = document.createElement('amp-host');
     const hostSignals = new Signals();
@@ -534,6 +666,45 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
       });
   });
 
+  it('should call for remeasure upon resize', async () => {
+    const iframe = document.createElement('iframe');
+    const {promise, resolve} = new Deferred();
+    const mutateSpy = env.sandbox.stub(
+      Services.mutatorForDoc(env.ampdoc),
+      'mutateElement'
+    );
+
+    await installFriendlyIframeEmbed(iframe, document.body, {
+      url: 'https://acme.org/url1',
+      html: '<a id="a1"></a>',
+      extensions: [],
+    });
+
+    expect(mutateSpy).to.not.be.called;
+    setStyles(iframe, {height: '100px', width: '100px'});
+    // Need to wait for resize event.
+    iframe.contentWindow.addEventListener('resize', () => {
+      resolve();
+    });
+    await promise;
+    expect(mutateSpy).to.be.called;
+  });
+
+  it('should preload versioned extensions', () => {
+    extensionsMock
+      .expects('preloadExtension')
+      .withExactArgs('amp-ext1', '0.2')
+      .once();
+    extensionsMock
+      .expects('preloadExtension')
+      .withExactArgs('amp-ext2', '0.3')
+      .once();
+    preloadFriendlyIframeEmbedExtensions(window, [
+      {extensionId: 'amp-ext1', extensionVersion: '0.2'},
+      {extensionId: 'amp-ext2', extensionVersion: '0.3'},
+    ]);
+  });
+
   describe('mergeHtml', () => {
     let spec;
 
@@ -544,6 +715,15 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
       };
     });
 
+    function extractScriptSrc(html) {
+      const beg = html.indexOf('script-src');
+      const end = html.indexOf(';', beg + 1);
+      if (beg == -1 || end == -1) {
+        throw new Error('script-src not found');
+      }
+      return html.substring(beg + 'script-src'.length, end).trim();
+    }
+
     it('should install base', () => {
       const html = mergeHtmlForTesting(spec);
       expect(html.indexOf('<base href="https://acme.org/embed1">')).to.equal(0);
@@ -573,88 +753,119 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
 
     it('should pre-pend to html', () => {
       const html = mergeHtmlForTesting(spec);
-      expect(html).to.equal(
-        '<base href="https://acme.org/embed1">' +
-          '<meta http-equiv=Content-Security-Policy content=' +
-          "\"script-src 'none';object-src 'none';child-src 'none'\">" +
-          '<a></a>'
+      expect(html).to.contain('<base href="https://acme.org/embed1">');
+      expect(html).to.contain(
+        '<meta http-equiv=Content-Security-Policy content='
       );
+      expect(html).to.contain("object-src 'none';child-src 'none'");
+      expect(html).to.contain("child-src 'none'\"><a></a>");
     });
 
     it('should insert into head', () => {
       spec.html = '<html><head>head</head><body>body';
       const html = mergeHtmlForTesting(spec);
-      expect(html).to.equal(
+      expect(html).to.contain(
         '<html><head><base href="https://acme.org/embed1">' +
-          '<meta http-equiv=Content-Security-Policy content=' +
-          "\"script-src 'none';object-src 'none';" +
-          "child-src 'none'\">head</head><body>body"
+          '<meta http-equiv=Content-Security-Policy content='
       );
+      expect(html).to.contain("child-src 'none'\">head</head><body>body");
     });
 
     it('should insert into head w/o html', () => {
       spec.html = '<head>head</head><body>body';
       const html = mergeHtmlForTesting(spec);
-      expect(html).to.equal(
+      expect(html).to.contain(
         '<head><base href="https://acme.org/embed1">' +
-          '<meta http-equiv=Content-Security-Policy content="' +
-          "script-src 'none';object-src 'none';child-src 'none'\">head" +
-          '</head><body>body'
+          '<meta http-equiv=Content-Security-Policy content="script-src'
+      );
+      expect(html).to.contain(
+        ";object-src 'none';child-src 'none'\">head</head><body>body"
       );
     });
 
     it('should insert before body', () => {
       spec.html = '<html><body>body';
       const html = mergeHtmlForTesting(spec);
-      expect(html).to.equal(
+      expect(html).to.contain(
         '<html><base href="https://acme.org/embed1">' +
-          '<meta http-equiv=Content-Security-Policy content="script-src ' +
-          "'none';object-src 'none';child-src 'none'\"><body>body"
+          '<meta http-equiv=Content-Security-Policy content="script-src '
+      );
+      expect(html).to.contain(
+        ";object-src 'none';child-src 'none'\"><body>body"
       );
     });
 
     it('should insert before body w/o html', () => {
       spec.html = '<body>body';
       const html = mergeHtmlForTesting(spec);
-      expect(html).to.equal(
+      expect(html).to.contain(
         '<base href="https://acme.org/embed1">' +
-          '<meta http-equiv=Content-Security-Policy content="script-src ' +
-          "'none';object-src 'none';child-src 'none'\"><body>body"
+          '<meta http-equiv=Content-Security-Policy content="script-src '
+      );
+      expect(html).to.contain(
+        ";object-src 'none';child-src 'none'\"><body>body"
       );
     });
 
     it('should insert after html', () => {
       spec.html = '<html>content';
       const html = mergeHtmlForTesting(spec);
-      expect(html).to.equal(
+      expect(html).to.contain(
         '<html><base href="https://acme.org/embed1">' +
-          '<meta http-equiv=Content-Security-Policy content="script-src ' +
-          "'none';object-src 'none';child-src 'none'\">content"
+          '<meta http-equiv=Content-Security-Policy content="script-src '
       );
+      expect(html).to.contain(";object-src 'none';child-src 'none'\">content");
     });
 
     it('should insert CSP', () => {
       spec.html = '<html><head></head><body></body></html>';
-      expect(mergeHtmlForTesting(spec)).to.equal(
-        '<html><head><base href="https://acme.org/embed1">' +
-          '<meta http-equiv=Content-Security-Policy ' +
-          "content=\"script-src 'none';object-src 'none';" +
+      expect(mergeHtmlForTesting(spec)).to.contain(
+        '<meta http-equiv=Content-Security-Policy content="script-src '
+      );
+      expect(mergeHtmlForTesting(spec)).to.contain(
+        ";object-src 'none';" +
           "child-src 'none'\">" +
           '</head><body></body></html>'
       );
       spec.html = '<html>foo';
-      expect(mergeHtmlForTesting(spec)).to.equal(
+      expect(mergeHtmlForTesting(spec)).to.contain(
         '<html><base href="https://acme.org/embed1">' +
           '<meta http-equiv=Content-Security-Policy ' +
-          "content=\"script-src 'none';object-src 'none';" +
-          "child-src 'none'\">foo"
+          'content="script-src '
+      );
+      expect(mergeHtmlForTesting(spec)).to.contain(
+        ";object-src 'none';child-src 'none'\">foo"
       );
       spec.html = '<body>foo';
-      expect(mergeHtmlForTesting(spec)).to.equal(
+      expect(mergeHtmlForTesting(spec)).to.contain(
         '<base href="https://acme.org/embed1">' +
           '<meta http-equiv=Content-Security-Policy ' +
-          "content=\"script-src 'none';object-src 'none';" +
-          "child-src 'none'\"><body>foo"
+          'content="script-src '
+      );
+      expect(mergeHtmlForTesting(spec)).to.contain(
+        ";object-src 'none';child-src 'none'\"><body>foo"
+      );
+    });
+
+    it('should create the correct script-src CSP in dev mode', () => {
+      env.sandbox.stub(self, '__AMP_MODE').value({localDev: true});
+      spec.html = '<html><head></head><body></body></html>';
+      const src = extractScriptSrc(mergeHtmlForTesting(spec));
+      expect(src).to.equal(
+        'http://localhost:8000/dist/lts/' +
+          ' http://localhost:8000/dist/rtv/' +
+          ' http://localhost:8000/dist/sw/'
+      );
+    });
+
+    it('should create the correct script-src CSP in non-dev mode', () => {
+      env.sandbox.stub(self, '__AMP_MODE').value({localDev: false});
+      spec.html = '<html><head></head><body></body></html>';
+      const src = extractScriptSrc(mergeHtmlForTesting(spec));
+      expect(src).to.equal(
+        'https://cdn.ampproject.org/lts/' +
+          ' https://cdn.ampproject.org/rtv/' +
+          ' https://cdn.ampproject.org/sw/'
       );
     });
   });
@@ -664,6 +875,7 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
       const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
         url: 'https://acme.org/url1',
         html: '<a id="a1"></a>',
+        extensions: [],
       });
       return embedPromise.then(() => {
         expect(iframe.contentDocument.getElementById('a1')).to.be.ok;
@@ -675,6 +887,7 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
       const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
         url: 'https://acme.org/url1',
         html: '<a id="a1"></a>',
+        extensions: [],
       });
       return embedPromise.then(() => {
         expect(iframe.contentDocument.getElementById('a1')).to.be.ok;
@@ -685,6 +898,7 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
       const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
         url: 'https://acme.org/url1',
         html: '<a id="a1"></a>',
+        extensions: [],
       });
       return embedPromise.then((embed) => {
         return embed.whenWindowLoaded();
@@ -696,6 +910,7 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
       const embedPromise = installFriendlyIframeEmbed(iframe, document.body, {
         url: 'https://acme.org/url1',
         html: '<a id="a1"></a>',
+        extensions: [],
       });
       return embedPromise.then((embed) => {
         return embed.whenWindowLoaded();
@@ -731,9 +946,9 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
     let contentDocument;
     let contentBody;
     let container;
-    let loadListener, errorListener;
+    let loadListener;
     let polls;
-    let renderStartStub;
+    let installStub;
 
     beforeEach(() => {
       setSrcdocSupportedForTesting(true);
@@ -741,12 +956,14 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
       clock = env.sandbox.useFakeTimers();
 
       polls = [];
-      win = {
+      win = new FakeWindow();
+      Object.assign(win, {
         __AMP_SERVICES: {
           'extensions': {
             obj: {
               preloadExtension: () => {},
             },
+            ctor: Object,
           },
         },
         setInterval() {
@@ -761,7 +978,7 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
             polls.splice(index, 1);
           }
         },
-      };
+      });
 
       loadListener = undefined;
       iframe = {
@@ -773,25 +990,21 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
         addEventListener: (eventType, listener) => {
           if (eventType == 'load') {
             loadListener = listener;
-          } else if (eventType == 'error') {
-            errorListener = listener;
           }
         },
         removeEventListener: () => {},
       };
-      contentWindow = {
-        addEventListener: () => {},
-        frameElement: {},
-      };
-      contentDocument = {};
+      contentWindow = new FakeWindow();
+      contentDocument = contentWindow.document;
+      contentWindow.frameElement = iframe;
       contentBody = {nodeType: 1, style: {}};
       container = {
         appendChild: () => {},
       };
-      renderStartStub = env.sandbox.stub(
-        FriendlyIframeEmbed.prototype,
-        'startRender_'
-      );
+
+      installStub = env.sandbox
+        .stub(Installers, 'installExtensionsInEmbed')
+        .resolves();
     });
 
     afterEach(() => {
@@ -800,10 +1013,15 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
 
     it('should poll until ready', () => {
       iframe.contentWindow = contentWindow;
-      const embedPromise = installFriendlyIframeEmbed(iframe, container, {
-        url: 'https://acme.org/url1',
-        html: '<body></body>',
-      });
+      const embedPromise = installFriendlyIframeEmbed(
+        iframe,
+        container,
+        {
+          url: 'https://acme.org/url1',
+          html: '<body></body>',
+        },
+        preinstallCallback
+      );
       let ready = false;
       embedPromise.then(() => {
         ready = true;
@@ -833,7 +1051,7 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
           expect(polls).to.have.length(1);
 
           // Body is now available.
-          contentDocument.body = contentBody;
+          Object.defineProperty(contentDocument, 'body', {value: contentBody});
           clock.tick(5);
           return Promise.race([Promise.resolve(), embedPromise]);
         })
@@ -843,7 +1061,9 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
 
           // Body is now not empty.
           contentBody.firstChild = {};
-          clock.tick(5);
+          window.setInterval(() => {
+            clock.tick(5);
+          }, 5);
           return embedPromise;
         })
         .then(() => {
@@ -852,7 +1072,7 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
         });
     });
 
-    it('should stop polling when loaded', () => {
+    it('should stop polling when loaded', async () => {
       iframe.contentWindow = contentWindow;
       const embedPromise = installFriendlyIframeEmbed(iframe, container, {
         url: 'https://acme.org/url1',
@@ -860,26 +1080,14 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
       });
       expect(polls).to.have.length(1);
       iframe.contentWindow = contentWindow;
+      window.setInterval(() => {
+        clock.tick(5);
+      }, 5);
       loadListener();
-      return embedPromise.then(() => {
-        expect(polls).to.have.length(0);
-        expect(renderStartStub).to.be.calledOnce;
-      });
-    });
 
-    // TODO(#16916): Make this test work with synchronous throws.
-    it.skip('should stop polling when loading failed', () => {
-      iframe.contentWindow = contentWindow;
-      const embedPromise = installFriendlyIframeEmbed(iframe, container, {
-        url: 'https://acme.org/url1',
-        html: '<body></body>',
-      });
-      expect(polls).to.have.length(1);
-      iframe.contentWindow = contentWindow;
-      errorListener();
-      return embedPromise.then(() => {
-        expect(polls).to.have.length(0);
-      });
+      await embedPromise;
+      expect(polls).to.have.length(0);
+      expect(installStub).to.be.calledOnce;
     });
   });
 
@@ -911,6 +1119,7 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
       const parent = document.createElement(parentType);
 
       parent.appendChild(iframe);
+      document.body.appendChild(parent);
 
       env.sandbox
         ./*OK*/ stub(iframe, 'getBoundingClientRect')
@@ -1029,312 +1238,7 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
 class AmpTest extends BaseElement {}
 class AmpTestSub extends BaseElement {}
 
-// TODO(#22733): remove once ampdoc-fie is launched.
-describes.realWin('installExtensionsInChildWindow', {amp: true}, (env) => {
-  let parentWin;
-  let extensions;
-  let extensionsMock;
-  let iframe;
-  let iframeWin;
-  let fie;
-
-  beforeEach(() => {
-    parentWin = env.win;
-    resetScheduledElementForTesting(parentWin, 'amp-test');
-    installExtensionsService(parentWin);
-    extensions = Services.extensionsFor(parentWin);
-    extensionsMock = env.sandbox.mock(extensions);
-
-    [
-      'urlForDoc',
-      'actionServiceForDoc',
-      'standardActionsForDoc',
-      'navigationForDoc',
-      'timerFor',
-    ].forEach((s) => {
-      class FakeService {
-        static installInEmbedWindow() {}
-      }
-      env.sandbox.stub(FakeService, 'installInEmbedWindow');
-      env.sandbox.stub(Services, s).returns(new FakeService());
-    });
-
-    iframe = parentWin.document.createElement('iframe');
-    const promise = loadPromise(iframe);
-    const html = '<div id="one"></div>';
-    if ('srcdoc' in iframe) {
-      iframe.srcdoc = html;
-    } else {
-      iframe.src = 'about:blank';
-      const childDoc = iframe.contentWindow.document;
-      childDoc.open();
-      childDoc.write(html);
-      childDoc.close();
-    }
-    parentWin.document.body.appendChild(iframe);
-    fie = new FriendlyIframeEmbed(
-      iframe,
-      {
-        url: 'https://acme.org/url1',
-        html: '<body></body>',
-      },
-      Promise.resolve(),
-      env.ampdoc
-    );
-    return promise.then(() => {
-      iframeWin = iframe.contentWindow;
-      setParentWindow(iframeWin, parentWin);
-    });
-  });
-
-  afterEach(() => {
-    if (iframe.parentElement) {
-      iframe.parentElement.removeChild(iframe);
-    }
-    extensionsMock.verify();
-  });
-
-  it('should set window hierarchy', () => {
-    fie.preInstallExtensionsInChildWindow(extensions, iframeWin, []);
-    expect(iframeWin.__AMP_PARENT).to.equal(parentWin);
-    expect(iframeWin.__AMP_TOP).to.equal(parentWin);
-  });
-
-  it('should install runtime styles', () => {
-    return fie
-      .preInstallExtensionsInChildWindow(extensions, iframeWin, [])
-      .then(() => {
-        expect(iframeWin.document.querySelector('style[amp-runtime]')).to.exist;
-      });
-  });
-
-  it('should install built-ins', () => {
-    return fie
-      .preInstallExtensionsInChildWindow(extensions, iframeWin, [])
-      .then(() => {
-        expect(iframeWin.__AMP_EXTENDED_ELEMENTS).to.exist;
-        expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-img']).to.exist;
-        expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-img']).to.not.equal(
-          ElementStub
-        );
-        expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-pixel']).to.exist;
-        expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-pixel']).to.not.equal(
-          ElementStub
-        );
-        // Legacy elements are installed as well.
-        expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-ad']).to.equal(
-          ElementStub
-        );
-        expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-embed']).to.equal(
-          ElementStub
-        );
-        expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-video']).to.equal(
-          ElementStub
-        );
-      });
-  });
-
-  it('should adopt standard services', () => {
-    return fie
-      .preInstallExtensionsInChildWindow(extensions, iframeWin, [])
-      .then(() => {
-        const any = {}; // Input doesn't matter since services are stubbed.
-        const url = Services.urlForDoc(any);
-        const actions = Services.actionServiceForDoc(any);
-        const standardActions = Services.standardActionsForDoc(any);
-        const navigation = Services.navigationForDoc(any);
-
-        expect(url.constructor.installInEmbedWindow).to.be.called;
-        expect(actions.constructor.installInEmbedWindow).to.be.called;
-        expect(standardActions.constructor.installInEmbedWindow).to.be.called;
-        expect(navigation.constructor.installInEmbedWindow).to.be.called;
-
-        expect(getService(iframeWin, 'timer')).to.exist;
-      });
-  });
-
-  it('should install extensions in child window', () => {
-    const extHolder = extensions.getExtensionHolder_('amp-test');
-    extHolder.scriptPresent = true;
-    const promise = fie
-      .preInstallExtensionsInChildWindow(extensions, iframeWin, ['amp-test'])
-      .then(() => {
-        // Must be stubbed already.
-        expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(
-          ElementStub
-        );
-        expect(
-          iframeWin.document.createElement('amp-test').implementation_
-        ).to.be.instanceOf(ElementStub);
-        expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test-sub']).to.be
-          .undefined;
-
-        return fie.doInstallExtensionsInChildWindow(extensions, iframeWin, [
-          'amp-test',
-        ]);
-      });
-    // Resolve the promise.
-    extensions.registerExtension(
-      'amp-test',
-      (AMP) => {
-        // Main extension with CSS.
-        AMP.registerElement('amp-test', AmpTest, 'a{}');
-        // Secondary extension w/o CSS.
-        AMP.registerElement('amp-test-sub', AmpTestSub);
-      },
-      parentWin.AMP
-    );
-    return promise.then(() => {
-      // Main extension.
-      expect(parentWin.__AMP_EXTENDED_ELEMENTS['amp-test']).to.be.undefined;
-      expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(AmpTest);
-      expect(iframeWin.document.querySelector('style[amp-extension=amp-test]'))
-        .to.exist;
-      // Must be upgraded already.
-      expect(
-        iframeWin.document.createElement('amp-test').implementation_
-      ).to.be.instanceOf(AmpTest);
-
-      // Secondary extension.
-      expect(parentWin.__AMP_EXTENDED_ELEMENTS['amp-test-sub']).to.be.undefined;
-      expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test-sub']).to.equal(
-        AmpTestSub
-      );
-      expect(
-        iframeWin.document.querySelector('style[amp-extension=amp-test-sub]')
-      ).to.not.exist;
-      // Must be upgraded already.
-      expect(
-        iframeWin.document.createElement('amp-test-sub').implementation_
-      ).to.be.instanceOf(AmpTestSub);
-    });
-  });
-
-  it('should adopt extension services', () => {
-    class FooService {
-      static installInEmbedWindow() {}
-    }
-    env.sandbox.stub(FooService, 'installInEmbedWindow');
-    registerServiceBuilder(
-      parentWin,
-      'fake-service-foo',
-      FooService,
-      /* opt_instantiate */ true
-    );
-
-    class BarService {
-      static installInEmbedWindow() {}
-    }
-    env.sandbox.stub(BarService, 'installInEmbedWindow');
-    registerServiceBuilder(
-      parentWin,
-      'fake-service-bar',
-      BarService,
-      /* opt_instantiate */ true
-    );
-
-    const extHolder = extensions.getExtensionHolder_('amp-test');
-    extHolder.scriptPresent = true;
-    const install = fie
-      .preInstallExtensionsInChildWindow(extensions, iframeWin, ['amp-test'])
-      .then(() =>
-        fie.doInstallExtensionsInChildWindow(extensions, iframeWin, [
-          'amp-test',
-        ])
-      );
-
-    // Resolve the promise `install`.
-    extensions.registerExtension(
-      'amp-test',
-      (AMP) => {
-        AMP.registerServiceForDoc('fake-service-foo', FooService);
-      },
-      parentWin.AMP
-    );
-
-    return install.then(() => {
-      expect(FooService.installInEmbedWindow).calledOnce;
-      expect(BarService.installInEmbedWindow).to.not.be.called;
-    });
-  });
-
-  // TODO(#16916): Make this test work with synchronous throws.
-  it.skip('should call pre-install callback before other installs', () => {
-    let preinstallCount = 0;
-    const extHolder = extensions.getExtensionHolder_('amp-test');
-    extHolder.scriptPresent = true;
-    const promise = fie
-      .preInstallExtensionsInChildWindow(
-        extensions,
-        iframeWin,
-        ['amp-test'],
-        function () {
-          // Built-ins not installed yet.
-          expect(
-            iframeWin.__AMP_EXTENDED_ELEMENTS &&
-              iframeWin.__AMP_EXTENDED_ELEMENTS['amp-img']
-          ).to.not.exist;
-          // Extension is not loaded yet.
-          expect(
-            iframeWin.__AMP_EXTENDED_ELEMENTS &&
-              iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test']
-          ).to.not.exist;
-          preinstallCount++;
-        }
-      )
-      .then(() =>
-        fie.doInstallExtensionsInChildWindow(extensions, iframeWin, [
-          'amp-test',
-        ])
-      );
-    expect(preinstallCount).to.equal(1);
-    expect(iframeWin.__AMP_EXTENDED_ELEMENTS).to.exist;
-    expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-img']).to.exist;
-    expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-img']).to.not.equal(
-      ElementStub
-    );
-    expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(ElementStub);
-
-    // Resolve the promise.
-    extensions.registerExtension(
-      'amp-test',
-      (AMP) => {
-        AMP.registerElement('amp-test', AmpTest);
-      },
-      parentWin.AMP
-    );
-    return promise.then(() => {
-      // Extension elements are stubbed immediately, but registered only
-      // after extension is loaded.
-      expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(AmpTest);
-    });
-  });
-
-  describe('installStandardServicesInEmbed', () => {
-    it('verify order of adopted services for embed', () => {
-      installStandardServicesInEmbed(iframeWin);
-
-      const any = {}; // Input doesn't matter since services are stubbed.
-      const url = Services.urlForDoc(any);
-      const actions = Services.actionServiceForDoc(any);
-      const standardActions = Services.standardActionsForDoc(any);
-      const navigation = Services.navigationForDoc(any);
-
-      // Expected order: url, action, standard-actions, navigation, timer.
-      const one = url.constructor.installInEmbedWindow;
-      const two = actions.constructor.installInEmbedWindow;
-      const three = standardActions.constructor.installInEmbedWindow;
-      const four = navigation.constructor.installInEmbedWindow;
-
-      expect(one).to.be.calledBefore(two);
-      expect(two).to.be.calledBefore(three);
-      expect(three).to.be.calledBefore(four);
-      expect(four).to.be.called;
-    });
-  });
-});
-
-describes.realWin('installExtensionsInFie', {amp: true}, (env) => {
+describes.realWin('installExtensionsInEmbed', {amp: true}, (env) => {
   let parentWin;
   let extensions;
   let extensionsMock;
@@ -1342,16 +1246,16 @@ describes.realWin('installExtensionsInFie', {amp: true}, (env) => {
   let iframeWin, iframeDocEl;
   let ampdoc;
   let fie;
+  let startRender;
+  let installComplete, installCompletePromise;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     parentWin = env.win;
-    toggleAmpdocFieForTesting(parentWin, true);
     resetScheduledElementForTesting(parentWin, 'amp-test');
     installExtensionsService(parentWin);
     extensions = Services.extensionsFor(parentWin);
     extensionsMock = env.sandbox.mock(extensions);
     const ampdocService = Services.ampdocServiceFor(parentWin);
-    updateFieModeForTesting(ampdocService, true);
 
     iframe = parentWin.document.createElement('iframe');
     const promise = loadPromise(iframe);
@@ -1375,38 +1279,45 @@ describes.realWin('installExtensionsInFie', {amp: true}, (env) => {
       Promise.resolve(),
       env.ampdoc
     );
-    return promise.then(() => {
-      iframeWin = iframe.contentWindow;
-      iframeDocEl = iframeWin.document.documentElement;
-      setParentWindow(iframeWin, parentWin);
-      ampdoc = ampdocService.installFieDoc(
-        'https://example.test/embed',
-        iframeWin
-      );
+
+    startRender = env.sandbox.stub(fie, 'startRender_');
+    installComplete = undefined;
+    installCompletePromise = new Promise((resolve) => {
+      installComplete = resolve;
     });
+
+    // Wait for the iframe to load.
+    await promise;
+    iframeWin = iframe.contentWindow;
+    iframeDocEl = iframeWin.document.documentElement;
+    setParentWindow(iframeWin, parentWin);
+    ampdoc = ampdocService.installFieDoc(
+      'https://example.test/embed',
+      iframeWin
+    );
   });
 
   afterEach(() => {
-    toggleAmpdocFieForTesting(parentWin, false);
     if (iframe.parentElement) {
       iframe.parentElement.removeChild(iframe);
     }
     extensionsMock.verify();
   });
 
-  it('should set window hierarchy', () => {
-    fie.installExtensionsInFie(extensions, ampdoc, []);
+  it('should set window hierarchy', async () => {
+    await Installers.installExtensionsInEmbed(fie, extensions, ampdoc, []);
     expect(iframeWin.__AMP_PARENT).to.equal(parentWin);
     expect(iframeWin.__AMP_TOP).to.equal(parentWin);
+    expect(startRender).to.be.calledOnce;
   });
 
-  it('should install runtime styles', () => {
-    fie.installExtensionsInFie(extensions, ampdoc, []);
+  it('should install runtime styles', async () => {
+    await Installers.installExtensionsInEmbed(fie, extensions, ampdoc, []);
     expect(iframeWin.document.querySelector('style[amp-runtime]')).to.exist;
   });
 
-  it('should install built-ins', () => {
-    fie.installExtensionsInFie(extensions, ampdoc, []);
+  it('should install built-ins', async () => {
+    await Installers.installExtensionsInEmbed(fie, extensions, ampdoc, []);
     expect(iframeWin.__AMP_EXTENDED_ELEMENTS).to.exist;
     expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-img']).to.exist;
     expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-img']).to.not.equal(
@@ -1426,8 +1337,8 @@ describes.realWin('installExtensionsInFie', {amp: true}, (env) => {
     );
   });
 
-  it('should create new standard services', () => {
-    fie.installExtensionsInFie(extensions, ampdoc, []);
+  it('should create new standard services', async () => {
+    await Installers.installExtensionsInEmbed(fie, extensions, ampdoc, []);
 
     const url = Services.urlForDoc(iframeDocEl);
     const actions = Services.actionServiceForDoc(iframeDocEl);
@@ -1445,8 +1356,8 @@ describes.realWin('installExtensionsInFie', {amp: true}, (env) => {
     expect(url).to.not.equal(parentUrl);
   });
 
-  it('should adopt parent standard services', () => {
-    fie.installExtensionsInFie(extensions, ampdoc, []);
+  it('should adopt parent standard services', async () => {
+    await Installers.installExtensionsInEmbed(fie, extensions, ampdoc, []);
 
     const viewer = Services.urlForDoc(iframeDocEl);
     const parentViewer = Services.urlForDoc(parentWin.document.head);
@@ -1455,21 +1366,29 @@ describes.realWin('installExtensionsInFie', {amp: true}, (env) => {
     expect(viewer).to.not.equal(parentViewer);
   });
 
-  it('should install extensions in child window', () => {
-    const extHolder = extensions.getExtensionHolder_('amp-test');
+  it('should install extensions in child window', async () => {
+    const extHolder = extensions.getExtensionHolder_('amp-test', 'latest');
     extHolder.scriptPresent = true;
-    const promise = fie.installExtensionsInFie(extensions, ampdoc, [
-      'amp-test',
-    ]);
+
+    await Installers.installExtensionsInEmbed(
+      fie,
+      extensions,
+      ampdoc,
+      [{extensionId: 'amp-test', extensionVersion: 'latest'}],
+      null,
+      installComplete
+    );
+
     // Must be stubbed already.
     expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(ElementStub);
-    expect(
-      iframeWin.document.createElement('amp-test').implementation_
-    ).to.be.instanceOf(ElementStub);
+    expect(iframeWin.document.createElement('amp-test').implClass_).to.be.null;
     expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test-sub']).to.be.undefined;
+
     // Resolve the promise.
     extensions.registerExtension(
       'amp-test',
+      '0.1',
+      true,
       (AMP) => {
         // Main extension with CSS.
         AMP.registerElement('amp-test', AmpTest, 'a{}');
@@ -1478,33 +1397,34 @@ describes.realWin('installExtensionsInFie', {amp: true}, (env) => {
       },
       parentWin.AMP
     );
-    return promise.then(() => {
-      // Main extension.
-      expect(parentWin.__AMP_EXTENDED_ELEMENTS['amp-test']).to.be.undefined;
-      expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(AmpTest);
-      expect(iframeWin.document.querySelector('style[amp-extension=amp-test]'))
-        .to.exist;
-      // Must be upgraded already.
-      expect(
-        iframeWin.document.createElement('amp-test').implementation_
-      ).to.be.instanceOf(AmpTest);
 
-      // Secondary extension.
-      expect(parentWin.__AMP_EXTENDED_ELEMENTS['amp-test-sub']).to.be.undefined;
-      expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test-sub']).to.equal(
-        AmpTestSub
-      );
-      expect(
-        iframeWin.document.querySelector('style[amp-extension=amp-test-sub]')
-      ).to.not.exist;
-      // Must be upgraded already.
-      expect(
-        iframeWin.document.createElement('amp-test-sub').implementation_
-      ).to.be.instanceOf(AmpTestSub);
-    });
+    await installCompletePromise;
+
+    // Main extension.
+    expect(parentWin.__AMP_EXTENDED_ELEMENTS['amp-test']).to.be.undefined;
+    expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(AmpTest);
+    expect(iframeWin.document.querySelector('style[amp-extension=amp-test]')).to
+      .exist;
+    // Must be upgraded already.
+    expect(iframeWin.document.createElement('amp-test').implClass_).to.equal(
+      AmpTest
+    );
+
+    // Secondary extension.
+    expect(parentWin.__AMP_EXTENDED_ELEMENTS['amp-test-sub']).to.be.undefined;
+    expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test-sub']).to.equal(
+      AmpTestSub
+    );
+    expect(
+      iframeWin.document.querySelector('style[amp-extension=amp-test-sub]')
+    ).to.not.exist;
+    // Must be upgraded already.
+    expect(
+      iframeWin.document.createElement('amp-test-sub').implClass_
+    ).to.equal(AmpTestSub);
   });
 
-  it('should adopt extension services', () => {
+  it('should adopt extension services', async () => {
     const fooConstructorSpy = env.sandbox.spy();
     class FooService {
       constructor(arg) {
@@ -1531,35 +1451,45 @@ describes.realWin('installExtensionsInFie', {amp: true}, (env) => {
       /* opt_instantiate */ false
     );
 
-    const extHolder = extensions.getExtensionHolder_('amp-test');
+    const extHolder = extensions.getExtensionHolder_('amp-test', 'latest');
     extHolder.scriptPresent = true;
-    const install = fie.installExtensionsInFie(extensions, ampdoc, [
-      'amp-test',
-    ]);
+
+    await Installers.installExtensionsInEmbed(
+      fie,
+      extensions,
+      ampdoc,
+      [{extensionId: 'amp-test', extensionVersion: 'latest'}],
+      null,
+      installComplete
+    );
 
     // Resolve the promise `install`.
     extensions.registerExtension(
       'amp-test',
+      '0.1',
+      true,
       (AMP) => {
         AMP.registerServiceForDoc('fake-service-foo', FooService);
       },
       parentWin.AMP
     );
 
-    return install.then(() => {
-      expect(fooConstructorSpy).calledOnce.calledWith(ampdoc);
-      expect(barConstructorSpy).to.not.be.called;
-    });
+    await installCompletePromise;
+
+    expect(fooConstructorSpy).calledOnce.calledWith(ampdoc);
+    expect(barConstructorSpy).to.not.be.called;
   });
 
-  it('should call pre-install callback before other installs', () => {
+  it('should call pre-install callback before other installs', async () => {
     let preinstallCount = 0;
-    const extHolder = extensions.getExtensionHolder_('amp-test');
+    const extHolder = extensions.getExtensionHolder_('amp-test', 'latest');
     extHolder.scriptPresent = true;
-    const promise = fie.installExtensionsInFie(
+
+    await Installers.installExtensionsInEmbed(
+      fie,
       extensions,
       ampdoc,
-      ['amp-test'],
+      [{extensionId: 'amp-test', extensionVersion: 'latest'}],
       function (winArg, ampdocArg) {
         expect(winArg).to.equal(iframeWin);
         expect(ampdocArg).to.equal(ampdoc);
@@ -1574,8 +1504,10 @@ describes.realWin('installExtensionsInFie', {amp: true}, (env) => {
             iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test']
         ).to.not.exist;
         preinstallCount++;
-      }
+      },
+      installComplete
     );
+
     expect(preinstallCount).to.equal(1);
     expect(iframeWin.__AMP_EXTENDED_ELEMENTS).to.exist;
     expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-img']).to.exist;
@@ -1587,15 +1519,18 @@ describes.realWin('installExtensionsInFie', {amp: true}, (env) => {
     // Resolve the promise.
     extensions.registerExtension(
       'amp-test',
+      '0.1',
+      true,
       (AMP) => {
         AMP.registerElement('amp-test', AmpTest);
       },
       parentWin.AMP
     );
-    return promise.then(() => {
-      // Extension elements are stubbed immediately, but registered only
-      // after extension is loaded.
-      expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(AmpTest);
-    });
+
+    await installCompletePromise;
+
+    // Extension elements are stubbed immediately, but registered only
+    // after extension is loaded.
+    expect(iframeWin.__AMP_EXTENDED_ELEMENTS['amp-test']).to.equal(AmpTest);
   });
 });
diff --git a/test/unit/test-gesture-recognizers.js b/test/unit/test-gesture-recognizers.js
index 778c9eacdbeb8..3f6c5ac0b0142 100644
--- a/test/unit/test-gesture-recognizers.js
+++ b/test/unit/test-gesture-recognizers.js
@@ -23,7 +23,7 @@ import {
 } from '../../src/gesture-recognizers';
 import {Gestures} from '../../src/gesture';
 
-describe('TapRecognizer', () => {
+describes.sandboxed('TapRecognizer', {}, (env) => {
   let element;
   let recognizer;
   let gestures;
@@ -38,7 +38,7 @@ describe('TapRecognizer', () => {
     };
 
     gestures = new Gestures(element);
-    gesturesMock = window.sandbox.mock(gestures);
+    gesturesMock = env.sandbox.mock(gestures);
 
     recognizer = new TapRecognizer(gestures);
   });
@@ -105,7 +105,7 @@ describe('TapRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.clientX == 101 && data.clientY == 201 && data.target === target
           );
@@ -118,7 +118,7 @@ describe('TapRecognizer', () => {
   });
 });
 
-describe('DoubletapRecognizer', () => {
+describes.sandboxed('DoubletapRecognizer', {}, (env) => {
   let element;
   let recognizer;
   let gestures;
@@ -133,7 +133,7 @@ describe('DoubletapRecognizer', () => {
     };
 
     gestures = new Gestures(element);
-    gesturesMock = window.sandbox.mock(gestures);
+    gesturesMock = env.sandbox.mock(gestures);
 
     recognizer = new DoubletapRecognizer(gestures);
   });
@@ -212,7 +212,7 @@ describe('DoubletapRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return data.clientX == 101 && data.clientY == 201;
         }),
         null
@@ -224,7 +224,7 @@ describe('DoubletapRecognizer', () => {
   });
 });
 
-describe('SwipeXYRecognizer', () => {
+describes.sandboxed('SwipeXYRecognizer', {}, (env) => {
   let element;
   let clock;
   let recognizer;
@@ -232,7 +232,7 @@ describe('SwipeXYRecognizer', () => {
   let gesturesMock;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
 
     element = {
       addEventListener: (unusedEventType, unusedHandler) => {},
@@ -242,7 +242,7 @@ describe('SwipeXYRecognizer', () => {
     };
 
     gestures = new Gestures(element);
-    gesturesMock = window.sandbox.mock(gestures);
+    gesturesMock = env.sandbox.mock(gestures);
 
     recognizer = new SwipeXYRecognizer(gestures);
   });
@@ -312,7 +312,7 @@ describe('SwipeXYRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.first === true &&
             data.last === false &&
@@ -350,7 +350,7 @@ describe('SwipeXYRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.first === false &&
             data.last === false &&
@@ -386,7 +386,7 @@ describe('SwipeXYRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.first === false &&
             data.last === true &&
@@ -420,7 +420,7 @@ describe('SwipeXYRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.first === false &&
             data.last === true &&
@@ -483,7 +483,7 @@ describe('SwipeXYRecognizer', () => {
   });
 });
 
-describe('TapzoomRecognizer', () => {
+describes.sandboxed('TapzoomRecognizer', {}, (env) => {
   let element;
   let clock;
   let recognizer;
@@ -491,7 +491,7 @@ describe('TapzoomRecognizer', () => {
   let gesturesMock;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
 
     element = {
       addEventListener: (unusedEventType, unusedHandler) => {},
@@ -501,7 +501,7 @@ describe('TapzoomRecognizer', () => {
     };
 
     gestures = new Gestures(element);
-    gesturesMock = window.sandbox.mock(gestures);
+    gesturesMock = env.sandbox.mock(gestures);
 
     recognizer = new TapzoomRecognizer(gestures);
   });
@@ -604,7 +604,7 @@ describe('TapzoomRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.first === true &&
             data.last === false &&
@@ -637,7 +637,7 @@ describe('TapzoomRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.first === false &&
             data.last === false &&
@@ -673,7 +673,7 @@ describe('TapzoomRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.first === false &&
             data.last === true &&
@@ -697,7 +697,7 @@ describe('TapzoomRecognizer', () => {
   });
 });
 
-describe('PinchRecognizer', () => {
+describes.sandboxed('PinchRecognizer', {}, (env) => {
   let element;
   let clock;
   let recognizer;
@@ -705,7 +705,7 @@ describe('PinchRecognizer', () => {
   let gesturesMock;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
 
     element = {
       addEventListener: (unusedEventType, unusedHandler) => {},
@@ -715,7 +715,7 @@ describe('PinchRecognizer', () => {
     };
 
     gestures = new Gestures(element);
-    gesturesMock = window.sandbox.mock(gestures);
+    gesturesMock = env.sandbox.mock(gestures);
 
     recognizer = new PinchRecognizer(gestures);
   });
@@ -848,7 +848,7 @@ describe('PinchRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.first === true &&
             data.last === false &&
@@ -903,7 +903,7 @@ describe('PinchRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((unusedData) => true),
+        env.sandbox.match((unusedData) => true),
         null
       )
       .once();
@@ -920,7 +920,7 @@ describe('PinchRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.first === false &&
             data.last === false &&
@@ -961,7 +961,7 @@ describe('PinchRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((unusedData) => true),
+        env.sandbox.match((unusedData) => true),
         null
       )
       .once();
@@ -973,7 +973,7 @@ describe('PinchRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.first === false &&
             data.last === true &&
@@ -1012,7 +1012,7 @@ describe('PinchRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((unusedData) => true),
+        env.sandbox.match((unusedData) => true),
         null
       )
       .once();
@@ -1024,7 +1024,7 @@ describe('PinchRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.first === false &&
             data.last === true &&
@@ -1068,7 +1068,7 @@ describe('PinchRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.centerClientX == 100 &&
             data.centerClientY == 100 &&
@@ -1089,7 +1089,7 @@ describe('PinchRecognizer', () => {
       .expects('signalEmit_')
       .withExactArgs(
         recognizer,
-        window.sandbox.match((data) => {
+        env.sandbox.match((data) => {
           return (
             data.centerClientX == 100 &&
             data.centerClientY == 100 &&
diff --git a/test/unit/test-gesture.js b/test/unit/test-gesture.js
index 6036952853a9c..f3bfd86c33a32 100644
--- a/test/unit/test-gesture.js
+++ b/test/unit/test-gesture.js
@@ -16,7 +16,7 @@
 
 import {GestureRecognizer, Gestures} from '../../src/gesture';
 
-describe('Gestures', () => {
+describes.sandboxed('Gestures', {}, (env) => {
   class TestRecognizer extends GestureRecognizer {
     constructor(manager) {
       super('test', manager);
@@ -38,7 +38,7 @@ describe('Gestures', () => {
   let onGesture;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
 
     eventListeners = {};
     element = {
@@ -53,13 +53,13 @@ describe('Gestures', () => {
       },
     };
 
-    onGesture = window.sandbox.spy();
+    onGesture = env.sandbox.spy();
 
     gestures = Gestures.get(element);
     gestures.onGesture(TestRecognizer, onGesture);
     expect(gestures.recognizers_.length).to.equal(1);
     recognizer = gestures.recognizers_[0];
-    recognizerMock = window.sandbox.mock(recognizer);
+    recognizerMock = env.sandbox.mock(recognizer);
   });
 
   afterEach(() => {
@@ -73,7 +73,7 @@ describe('Gestures', () => {
   }
 
   it('onPointerDown should be called', () => {
-    const handler = window.sandbox.spy();
+    const handler = env.sandbox.spy();
     gestures.onPointerDown(handler);
     sendEvent({type: 'touchstart'});
     expect(handler).to.be.calledOnce;
@@ -257,7 +257,7 @@ describe('Gestures', () => {
 
   it('should allow youngest to start', () => {
     gestures.onGesture(Test2Recognizer, () => {});
-    const recognizer2Mock = window.sandbox.mock(gestures.recognizers_[1]);
+    const recognizer2Mock = env.sandbox.mock(gestures.recognizers_[1]);
 
     gestures.ready_[0] = 10;
     gestures.ready_[1] = 9;
@@ -272,8 +272,8 @@ describe('Gestures', () => {
   it('should allow event to propagate when nothing happening', () => {
     const event = {
       type: 'touchend',
-      preventDefault: window.sandbox.spy(),
-      stopPropagation: window.sandbox.spy(),
+      preventDefault: env.sandbox.spy(),
+      stopPropagation: env.sandbox.spy(),
     };
     eventListeners[event.type](event);
     expect(event.preventDefault).to.have.not.been.called;
@@ -284,8 +284,8 @@ describe('Gestures', () => {
     gestures.eventing_ = recognizer;
     const event = {
       type: 'touchend',
-      preventDefault: window.sandbox.spy(),
-      stopPropagation: window.sandbox.spy(),
+      preventDefault: env.sandbox.spy(),
+      stopPropagation: env.sandbox.spy(),
     };
     eventListeners[event.type](event);
     expect(event.preventDefault).to.be.calledOnce;
@@ -300,8 +300,8 @@ describe('Gestures', () => {
 
     const event = {
       type: 'touchend',
-      preventDefault: window.sandbox.spy(),
-      stopPropagation: window.sandbox.spy(),
+      preventDefault: env.sandbox.spy(),
+      stopPropagation: env.sandbox.spy(),
     };
     eventListeners[event.type](event);
     expect(event.preventDefault).to.be.calledOnce;
@@ -313,8 +313,8 @@ describe('Gestures', () => {
     gestures.ready_[0] = 1;
     const event = {
       type: 'touchend',
-      preventDefault: window.sandbox.spy(),
-      stopPropagation: window.sandbox.spy(),
+      preventDefault: env.sandbox.spy(),
+      stopPropagation: env.sandbox.spy(),
     };
     eventListeners[event.type](event);
     expect(event.preventDefault).to.be.calledOnce;
@@ -325,8 +325,8 @@ describe('Gestures', () => {
     gestures.pending_[0] = 1;
     let event = {
       type: 'touchend',
-      preventDefault: window.sandbox.spy(),
-      stopPropagation: window.sandbox.spy(),
+      preventDefault: env.sandbox.spy(),
+      stopPropagation: env.sandbox.spy(),
     };
     eventListeners[event.type](event);
     expect(event.preventDefault).to.be.calledOnce;
@@ -335,8 +335,8 @@ describe('Gestures', () => {
     clock.tick(10);
     event = {
       type: 'touchend',
-      preventDefault: window.sandbox.spy(),
-      stopPropagation: window.sandbox.spy(),
+      preventDefault: env.sandbox.spy(),
+      stopPropagation: env.sandbox.spy(),
     };
     eventListeners[event.type](event);
     expect(event.preventDefault).to.have.not.been.called;
@@ -356,7 +356,7 @@ describe('Gestures', () => {
   it('should remove listeners and shared cache instance on cleanup', () => {
     const eventNames = ['touchstart', 'touchend', 'touchmove', 'touchcancel'];
     const prop = '__AMP_Gestures';
-    const removeSpy = window.sandbox.spy(element, 'removeEventListener');
+    const removeSpy = env.sandbox.spy(element, 'removeEventListener');
 
     expect(element[prop]).to.exist;
 
@@ -378,7 +378,7 @@ describe('Gestures', () => {
     let onGesture;
 
     beforeEach(() => {
-      clock = window.sandbox.useFakeTimers();
+      clock = env.sandbox.useFakeTimers();
 
       eventListeners = {};
       element = {
@@ -390,13 +390,13 @@ describe('Gestures', () => {
         },
       };
 
-      onGesture = window.sandbox.spy();
+      onGesture = env.sandbox.spy();
 
       gestures = Gestures.get(element, /* shouldNotPreventDefault */ true);
       gestures.onGesture(TestRecognizer, onGesture);
       expect(gestures.recognizers_.length).to.equal(1);
       recognizer = gestures.recognizers_[0];
-      recognizerMock = window.sandbox.mock(recognizer);
+      recognizerMock = env.sandbox.mock(recognizer);
     });
 
     afterEach(() => {
@@ -407,8 +407,8 @@ describe('Gestures', () => {
       gestures.eventing_ = recognizer;
       const event = {
         type: 'touchend',
-        preventDefault: window.sandbox.spy(),
-        stopPropagation: window.sandbox.spy(),
+        preventDefault: env.sandbox.spy(),
+        stopPropagation: env.sandbox.spy(),
       };
       eventListeners[event.type](event);
       expect(event.preventDefault).to.have.not.been.called;
@@ -423,8 +423,8 @@ describe('Gestures', () => {
 
       const event = {
         type: 'touchend',
-        preventDefault: window.sandbox.spy(),
-        stopPropagation: window.sandbox.spy(),
+        preventDefault: env.sandbox.spy(),
+        stopPropagation: env.sandbox.spy(),
       };
       eventListeners[event.type](event);
       expect(event.preventDefault).to.have.not.been.called;
@@ -436,8 +436,8 @@ describe('Gestures', () => {
       gestures.ready_[0] = 1;
       const event = {
         type: 'touchend',
-        preventDefault: window.sandbox.spy(),
-        stopPropagation: window.sandbox.spy(),
+        preventDefault: env.sandbox.spy(),
+        stopPropagation: env.sandbox.spy(),
       };
       eventListeners[event.type](event);
       expect(event.preventDefault).to.have.not.been.called;
@@ -448,8 +448,8 @@ describe('Gestures', () => {
       gestures.pending_[0] = 1;
       let event = {
         type: 'touchend',
-        preventDefault: window.sandbox.spy(),
-        stopPropagation: window.sandbox.spy(),
+        preventDefault: env.sandbox.spy(),
+        stopPropagation: env.sandbox.spy(),
       };
       eventListeners[event.type](event);
       expect(event.preventDefault).to.have.not.been.called;
@@ -458,8 +458,8 @@ describe('Gestures', () => {
       clock.tick(10);
       event = {
         type: 'touchend',
-        preventDefault: window.sandbox.spy(),
-        stopPropagation: window.sandbox.spy(),
+        preventDefault: env.sandbox.spy(),
+        stopPropagation: env.sandbox.spy(),
       };
       eventListeners[event.type](event);
       expect(event.preventDefault).to.have.not.been.called;
@@ -486,7 +486,7 @@ describe('Gestures', () => {
         },
       };
 
-      onGesture = window.sandbox.spy();
+      onGesture = env.sandbox.spy();
 
       gestures = Gestures.get(
         element,
@@ -496,7 +496,7 @@ describe('Gestures', () => {
       gestures.onGesture(TestRecognizer, onGesture);
       expect(gestures.recognizers_.length).to.equal(1);
       recognizer = gestures.recognizers_[0];
-      recognizerMock = window.sandbox.mock(recognizer);
+      recognizerMock = env.sandbox.mock(recognizer);
     });
 
     afterEach(() => {
@@ -506,7 +506,7 @@ describe('Gestures', () => {
     it('should stop event from propagating', () => {
       const event = {
         type: 'touchend',
-        stopPropagation: window.sandbox.spy(),
+        stopPropagation: env.sandbox.spy(),
       };
       eventListeners[event.type](event);
       expect(event.stopPropagation).to.have.be.calledOnce;
diff --git a/test/unit/test-history.js b/test/unit/test-history.js
index c74f560e16ec6..5d7e323e2dadd 100644
--- a/test/unit/test-history.js
+++ b/test/unit/test-history.js
@@ -269,6 +269,22 @@ describes.fakeWin(
       });
     });
 
+    it('should call pop if stack is empty and passed true', () => {
+      bindingMock
+        .expects('pop')
+        .once()
+        .returns(Promise.resolve({stackIndex: 0}));
+
+      return history.goBack(true);
+    });
+
+    it('should not call pop() if stack is empty and passed a falsy arg', async () => {
+      bindingMock.expects('pop').never();
+
+      await history.goBack();
+      await history.goBack(false);
+    });
+
     it('should get fragment', () => {
       bindingMock
         .expects('getFragment')
@@ -305,8 +321,8 @@ describes.sandboxed('History install', {}, () => {
     installTimerService(window);
     win = {
       __AMP_SERVICES: {
-        'viewer': {obj: viewer},
-        'timer': {obj: Services.timerFor(window)},
+        'viewer': {obj: viewer, ctor: Object},
+        'timer': {obj: Services.timerFor(window), ctor: Object},
       },
       history: {
         length: 0,
@@ -621,7 +637,7 @@ describes.sandboxed('HistoryBindingNatural', {}, (env) => {
 
   it('should append the fragment parameter to the URL parameter', () => {
     const fragment = 'test';
-    const {href, hash} = document.location;
+    const {hash, href} = document.location;
     return history.replace({url: '/path?query=1', fragment}).then(() => {
       expect(document.location.hash).to.equal(`#${fragment}`);
       return history.replace({url: href, fragment: hash});
@@ -667,9 +683,10 @@ describes.sandboxed('HistoryBindingVirtual', {}, (env) => {
     it('viewer does not support responses', () => {
       return history.push().then((state) => {
         expect(viewer.sendMessageAwaitResponse).to.be.calledOnce;
-        expect(
-          viewer.sendMessageAwaitResponse
-        ).to.be.calledWithMatch('pushHistory', {stackIndex: 1});
+        expect(viewer.sendMessageAwaitResponse).to.be.calledWithMatch(
+          'pushHistory',
+          {stackIndex: 1}
+        );
 
         expect(state.stackIndex).to.equal(1);
         expect(history.stackIndex_).to.equal(1);
@@ -687,9 +704,10 @@ describes.sandboxed('HistoryBindingVirtual', {}, (env) => {
 
       return history.push({title}).then((state) => {
         expect(viewer.sendMessageAwaitResponse).to.be.calledOnce;
-        expect(
-          viewer.sendMessageAwaitResponse
-        ).to.be.calledWithMatch('pushHistory', {stackIndex: 1, title});
+        expect(viewer.sendMessageAwaitResponse).to.be.calledWithMatch(
+          'pushHistory',
+          {stackIndex: 1, title}
+        );
 
         expect(state.stackIndex).to.equal(1);
         expect(history.stackIndex_).to.equal(1);
@@ -707,9 +725,10 @@ describes.sandboxed('HistoryBindingVirtual', {}, (env) => {
 
       return history.push({title}).then((state) => {
         expect(viewer.sendMessageAwaitResponse).to.be.calledOnce;
-        expect(
-          viewer.sendMessageAwaitResponse
-        ).to.be.calledWithMatch('pushHistory', {stackIndex: 1, title});
+        expect(viewer.sendMessageAwaitResponse).to.be.calledWithMatch(
+          'pushHistory',
+          {stackIndex: 1, title}
+        );
 
         expect(state.stackIndex).to.equal(1);
         expect(history.stackIndex_).to.equal(1);
@@ -884,9 +903,10 @@ describes.sandboxed('HistoryBindingVirtual', {}, (env) => {
 
       return history.push({title}).then((state) => {
         expect(viewer.sendMessageAwaitResponse).to.be.calledOnce;
-        expect(
-          viewer.sendMessageAwaitResponse
-        ).to.be.calledWithMatch('pushHistory', {stackIndex: 1, title});
+        expect(viewer.sendMessageAwaitResponse).to.be.calledWithMatch(
+          'pushHistory',
+          {stackIndex: 1, title}
+        );
 
         expect(state).to.deep.equal({stackIndex: 1, title});
         expect(onStateUpdated).to.be.calledOnce;
diff --git a/test/unit/test-ie-media-bug.js b/test/unit/test-ie-media-bug.js
index 807a2f14de6e1..71ef6290f2f6c 100644
--- a/test/unit/test-ie-media-bug.js
+++ b/test/unit/test-ie-media-bug.js
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import {checkAndFix} from '../../src/service/ie-media-bug';
 import {dev} from '../../src/log';
+import {ieMediaCheckAndFix} from '../../src/service/ie-media-bug';
 
-describe('ie-media-bug', () => {
+describes.sandboxed('ie-media-bug', {}, (env) => {
   let clock;
   let windowApi, windowMock;
   let platform;
@@ -25,12 +25,12 @@ describe('ie-media-bug', () => {
   let devErrorStub;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
     platform = {
       isIe: () => false,
     };
-    platformMock = window.sandbox.mock(platform);
-    devErrorStub = window.sandbox.stub(dev(), 'error');
+    platformMock = env.sandbox.mock(platform);
+    devErrorStub = env.sandbox.stub(dev(), 'error');
 
     windowApi = {
       innerWidth: 320,
@@ -38,7 +38,7 @@ describe('ie-media-bug', () => {
       clearInterval: () => {},
       matchMedia: () => {},
     };
-    windowMock = window.sandbox.mock(windowApi);
+    windowMock = env.sandbox.mock(windowApi);
   });
 
   afterEach(() => {
@@ -50,7 +50,7 @@ describe('ie-media-bug', () => {
     platformMock.expects('isIe').returns(false);
     windowMock.expects('matchMedia').never();
     windowMock.expects('setInterval').never();
-    const promise = checkAndFix(windowApi, platform);
+    const promise = ieMediaCheckAndFix(windowApi, platform);
     expect(promise).to.be.null;
     expect(devErrorStub).to.have.not.been.called;
   });
@@ -63,7 +63,7 @@ describe('ie-media-bug', () => {
       .returns({matches: true})
       .once();
     windowMock.expects('setInterval').never();
-    const promise = checkAndFix(windowApi, platform);
+    const promise = ieMediaCheckAndFix(windowApi, platform);
     expect(promise).to.be.null;
     expect(devErrorStub).to.have.not.been.called;
   });
@@ -82,7 +82,7 @@ describe('ie-media-bug', () => {
     windowMock
       .expects('setInterval')
       .withExactArgs(
-        window.sandbox.match((arg) => {
+        env.sandbox.match((arg) => {
           intervalCallback = arg;
           return true;
         }),
@@ -91,7 +91,7 @@ describe('ie-media-bug', () => {
       .returns(intervalId)
       .once();
 
-    const promise = checkAndFix(windowApi, platform);
+    const promise = ieMediaCheckAndFix(windowApi, platform);
     expect(promise).to.be.not.null;
     expect(devErrorStub).to.have.not.been.called;
     expect(intervalCallback).to.exist;
@@ -100,7 +100,7 @@ describe('ie-media-bug', () => {
 
     // Second pass.
     clock.tick(10);
-    windowMock = window.sandbox.mock(windowApi);
+    windowMock = env.sandbox.mock(windowApi);
     windowMock
       .expects('matchMedia')
       .withExactArgs('(min-width: 319px) AND (max-width: 321px)')
@@ -114,7 +114,7 @@ describe('ie-media-bug', () => {
 
     // Third pass - succeed.
     clock.tick(10);
-    windowMock = window.sandbox.mock(windowApi);
+    windowMock = env.sandbox.mock(windowApi);
     windowMock
       .expects('matchMedia')
       .withExactArgs('(min-width: 319px) AND (max-width: 321px)')
@@ -144,7 +144,7 @@ describe('ie-media-bug', () => {
     windowMock
       .expects('setInterval')
       .withExactArgs(
-        window.sandbox.match((arg) => {
+        env.sandbox.match((arg) => {
           intervalCallback = arg;
           return true;
         }),
@@ -154,7 +154,7 @@ describe('ie-media-bug', () => {
       .once();
     windowMock.expects('clearInterval').withExactArgs(intervalId).once();
 
-    const promise = checkAndFix(windowApi, platform);
+    const promise = ieMediaCheckAndFix(windowApi, platform);
     expect(promise).to.be.not.null;
     expect(devErrorStub).to.have.not.been.called;
     expect(intervalCallback).to.exist;
@@ -184,7 +184,7 @@ describe('ie-media-bug', () => {
       .once();
     windowMock.expects('setInterval').never();
 
-    const promise = checkAndFix(windowApi, platform);
+    const promise = ieMediaCheckAndFix(windowApi, platform);
     expect(promise).to.be.null;
     expect(devErrorStub).to.be.calledOnce;
   });
diff --git a/test/unit/test-iframe-helper.js b/test/unit/test-iframe-helper.js
index 2ff2ae3041cc9..062f344ee8c76 100644
--- a/test/unit/test-iframe-helper.js
+++ b/test/unit/test-iframe-helper.js
@@ -15,12 +15,12 @@
  */
 import * as IframeHelper from '../../src/iframe-helper';
 import {createIframePromise} from '../../testing/iframe';
-import {generateSentinel} from '../../src/3p-frame.js';
+import {generateSentinel} from '../../src/3p-frame';
 
-describe
+describes.sandboxed
   .configure()
   .skipFirefox()
-  .run('iframe-helper', function () {
+  .run('iframe-helper', {}, function (env) {
     const iframeSrc =
       'http://iframe.localhost:' +
       location.port +
@@ -175,7 +175,7 @@ describe
     });
 
     // TODO(cvializ, #3314): Figure out why this fails. Probably have to do with
-    // removing the iframes in _init_tests.
+    // removing the iframes in init-tests.
     it.skip('should un-listen on next message when iframe is unattached', () => {
       let calls = 0;
       let otherCalls = 0;
@@ -206,10 +206,10 @@ describe
       });
     });
 
-    // TODO(wg-runtime, #25587): Results in a cross-origin frame error.
+    // TODO(wg-components, #32103): This fails regularly during CI
     it.skip('should set sentinel on postMessage data', () => {
       insert(testIframe);
-      const postMessageSpy = window.sandbox /*OK*/
+      const postMessageSpy = env.sandbox /*OK*/
         .spy(testIframe.contentWindow, 'postMessage');
       IframeHelper.postMessage(
         testIframe,
@@ -224,81 +224,4 @@ describe
       postMessageSpy /*OK*/
         .restore();
     });
-
-    describe('pausable iframes', () => {
-      let iframe, featurePolicy;
-
-      class FeaturePolicyFake {
-        constructor() {
-          this.features_ = [];
-          this.allowed_ = {};
-        }
-
-        features() {
-          return this.features_;
-        }
-
-        allowedFeatures() {
-          return Object.keys(this.allowed_);
-        }
-
-        allowsFeature(feature) {
-          return (this.allowed_[feature] || []).indexOf("'none'") == -1;
-        }
-
-        getAllowlistForFeature(feature) {
-          return this.allowed_[feature] || [];
-        }
-      }
-
-      beforeEach(() => {
-        featurePolicy = new FeaturePolicyFake();
-        featurePolicy.features_.push('execution-while-not-rendered');
-        iframe = document.createElement('div');
-        iframe.featurePolicy = featurePolicy;
-      });
-
-      it('should configure pausable with no "allow"', () => {
-        IframeHelper.makePausable(iframe);
-        expect(iframe.getAttribute('allow')).to.equal(
-          "execution-while-not-rendered 'none';"
-        );
-      });
-
-      it('should configure pausable with an existing "allow"', () => {
-        iframe.setAttribute('allow', "sync-xhr 'none'");
-        IframeHelper.makePausable(iframe);
-        expect(iframe.getAttribute('allow')).to.equal(
-          "execution-while-not-rendered 'none';sync-xhr 'none'"
-        );
-      });
-
-      it('should be pausable', () => {
-        featurePolicy.allowed_['execution-while-not-rendered'] = "'none'";
-        expect(IframeHelper.isPausable(iframe)).to.be.true;
-      });
-
-      it('should be unpausable b/c feature is allowed', () => {
-        featurePolicy.allowed_['execution-while-not-rendered'] = "'*'";
-        expect(IframeHelper.isPausable(iframe)).to.be.false;
-      });
-
-      it('should be unpausable b/c feature is not supported', () => {
-        featurePolicy.features_ = [];
-        featurePolicy.allowed_['execution-while-not-rendered'] = "'none'";
-        expect(IframeHelper.isPausable(iframe)).to.be.false;
-      });
-
-      it('should be unpausable b/c feature policies are not supported', () => {
-        iframe.featurePolicy = null;
-        expect(IframeHelper.isPausable(iframe)).to.be.false;
-      });
-
-      it('should pause/resume', () => {
-        IframeHelper.setPaused(iframe, true);
-        expect(iframe).to.have.attribute('hidden');
-        IframeHelper.setPaused(iframe, false);
-        expect(iframe).to.not.have.attribute('hidden');
-      });
-    });
   });
diff --git a/test/unit/test-iframe-stub.js b/test/unit/test-iframe-stub.js
index 2d02e6ab25cf3..6bf11f889648c 100644
--- a/test/unit/test-iframe-stub.js
+++ b/test/unit/test-iframe-stub.js
@@ -19,10 +19,10 @@ import {
   expectPostMessage,
 } from '../../testing/iframe';
 
-describe
+describes.sandboxed
   .configure()
   .skipFirefox()
-  .run('test-iframe-createIframeWithMessageStub', () => {
+  .run('test-iframe-createIframeWithMessageStub', {}, () => {
     const data1 = {
       foo: 'bar',
       test: true,
diff --git a/test/unit/test-impression.js b/test/unit/test-impression.js
index c9f2aba8a587d..b556cc732f08a 100644
--- a/test/unit/test-impression.js
+++ b/test/unit/test-impression.js
@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {Services} from '../../src/services';
+import {WindowInterface} from '../../src/window-interface';
+import {dev, user} from '../../src/log';
 import {
   getExtraParamsUrl,
   getTrackImpressionPromise,
@@ -25,9 +28,9 @@ import {
 } from '../../src/impression';
 import {macroTask} from '../../testing/yield';
 import {toggleExperiment} from '../../src/experiments';
-import {user} from '../../src/log';
 
-describe('impression', () => {
+describes.realWin('impression', {amp: true}, (env) => {
+  let window, document;
   let ampdoc;
   let viewer;
   let xhr;
@@ -36,14 +39,17 @@ describe('impression', () => {
   let warnStub;
 
   beforeEach(() => {
-    ampdoc = Services.ampdoc(window.document);
-    viewer = Services.viewerForDoc(window.document);
-    window.sandbox.stub(viewer, 'getParam');
-    window.sandbox.stub(viewer, 'hasCapability');
+    window = env.win;
+    document = window.document;
+    ampdoc = Services.ampdoc(document);
+    viewer = Services.viewerForDoc(document);
+    env.sandbox.stub(viewer, 'getParam');
+    env.sandbox.stub(viewer, 'hasCapability');
     xhr = Services.xhrFor(window);
     expect(xhr.fetchJson).to.exist;
-    const stub = window.sandbox.stub(xhr, 'fetchJson');
-    warnStub = window.sandbox.stub(user(), 'warn');
+    const stub = env.sandbox.stub(xhr, 'fetchJson');
+    warnStub = env.sandbox.stub(user(), 'warn');
+    env.sandbox.stub(dev(), 'warn');
     stub.returns(
       Promise.resolve({
         json() {
@@ -51,12 +57,12 @@ describe('impression', () => {
         },
       })
     );
-    window.sandbox.stub(ampdoc, 'whenFirstVisible').returns(Promise.resolve());
+    env.sandbox.stub(ampdoc, 'whenFirstVisible').returns(Promise.resolve());
     isTrustedViewer = false;
-    window.sandbox.stub(viewer, 'isTrustedViewer').callsFake(() => {
+    env.sandbox.stub(viewer, 'isTrustedViewer').callsFake(() => {
       return Promise.resolve(isTrustedViewer);
     });
-    window.sandbox.stub(viewer, 'getReferrerUrl').callsFake(() => {
+    env.sandbox.stub(viewer, 'getReferrerUrl').callsFake(() => {
       return Promise.resolve(referrer);
     });
     resetTrackImpressionPromiseForTesting();
@@ -69,7 +75,7 @@ describe('impression', () => {
   it('should do nothing if the experiment is off', () => {
     viewer.getParam.throws(new Error('Should not be called'));
     maybeTrackImpression(window);
-    return getTrackImpressionPromise().should.be.fulfilled;
+    return expect(getTrackImpressionPromise()).to.eventually.be.fulfilled;
   });
 
   it('should resolve if no click no replaceUrl', () => {
@@ -77,7 +83,7 @@ describe('impression', () => {
     viewer.getParam.withArgs('click').returns('');
     viewer.hasCapability.withArgs('replaceUrl').returns(false);
     maybeTrackImpression(window);
-    return getTrackImpressionPromise();
+    return expect(getTrackImpressionPromise()).to.eventually.be.fulfilled;
   });
 
   it('should resolve trackImpressionPromise after timeout', () => {
@@ -85,10 +91,16 @@ describe('impression', () => {
     viewer.hasCapability.withArgs('replaceUrl').returns(true);
     viewer.getParam.withArgs('replaceUrl').returns('https://www.example.com');
     viewer.getParam.withArgs('click').returns('https://www.example.com');
-    const clock = window.sandbox.useFakeTimers();
+    env.sandbox
+      .stub(viewer, 'sendMessageAwaitResponse')
+      .callsFake(() => new Promise(() => {}));
+
+    const clock = fakeTimers.withGlobal(window).install();
     maybeTrackImpression(window);
     clock.tick(8001);
-    return getTrackImpressionPromise();
+    const promise = getTrackImpressionPromise();
+    clock.uninstall();
+    return promise;
   });
 
   it('should resolve after clickUrl and replaceUrl', () => {
@@ -96,7 +108,7 @@ describe('impression', () => {
     viewer.hasCapability.withArgs('replaceUrl').returns(true);
     viewer.getParam.withArgs('replaceUrl').returns('https://www.example.com');
     viewer.getParam.withArgs('click').returns('https://www.example.com');
-    window.sandbox
+    env.sandbox
       .stub(viewer, 'sendMessageAwaitResponse')
       .callsFake((message) => {
         if (message == 'getReplaceUrl') {
@@ -113,7 +125,7 @@ describe('impression', () => {
       })
     );
     maybeTrackImpression(window);
-    return getTrackImpressionPromise();
+    return expect(getTrackImpressionPromise()).to.eventually.be.fulfilled;
   });
 
   describe('clickUrl', () => {
@@ -122,7 +134,7 @@ describe('impression', () => {
       viewer.getParam.withArgs('click').returns('');
       maybeTrackImpression(window);
       expect(xhr.fetchJson).to.have.not.been.called;
-      return getTrackImpressionPromise().should.be.fulfilled;
+      return expect(getTrackImpressionPromise()).to.eventually.be.fulfilled;
     });
 
     it('should do nothing if there is the click arg is http', () => {
@@ -130,11 +142,11 @@ describe('impression', () => {
       viewer.getParam.withArgs('click').returns('http://www.example.com');
       maybeTrackImpression(window);
       expect(xhr.fetchJson).to.have.not.been.called;
-      return getTrackImpressionPromise().should.be.fulfilled;
+      return expect(getTrackImpressionPromise()).to.eventually.be.fulfilled;
     });
 
     it('should invoke click URL with experiment on', function* () {
-      window.sandbox.spy(viewer, 'sendMessageAwaitResponse');
+      env.sandbox.spy(viewer, 'sendMessageAwaitResponse');
       toggleExperiment(window, 'alp', true);
       isTrustedViewer = false;
       viewer.getParam.withArgs('click').returns('https://www.example.com');
@@ -192,10 +204,12 @@ describe('impression', () => {
         })
       );
       const {href} = window.location;
-      const clock = window.sandbox.useFakeTimers();
+      const clock = fakeTimers.withGlobal(window).install();
       maybeTrackImpression(window);
       clock.tick(8001);
-      return getTrackImpressionPromise().then(() => {
+      const promise = getTrackImpressionPromise();
+      clock.uninstall();
+      return promise.then(() => {
         expect(window.location.href).to.equal(href);
       });
     });
@@ -252,7 +266,7 @@ describe('impression', () => {
         })
       );
       maybeTrackImpression(window);
-      return getTrackImpressionPromise();
+      return expect(getTrackImpressionPromise()).to.eventually.be.fulfilled;
     });
 
     it('should replace location href only with query params', () => {
@@ -268,15 +282,22 @@ describe('impression', () => {
           },
         })
       );
-      const prevHref = window.location.href;
-      window.history.replaceState(null, '', prevHref + '?bar=foo&test=4321');
+
+      const location = {
+        hash: '',
+        search: '?bar=foo&test=4321',
+        href: 'https://example.org?bar=foo&test=4321',
+      };
+      env.sandbox.stub(WindowInterface, 'getLocation').returns(location);
+      const replaceStateStub = env.sandbox.stub(window.history, 'replaceState');
+
       maybeTrackImpression(window);
       return getTrackImpressionPromise().then(() => {
-        expect(window.location.href).to.equal(
-          'http://localhost:9876/context.html' +
-            '?bar=foo&test=4321&gclid=123456&foo=bar&example=123'
+        expect(replaceStateStub).to.be.calledOnce.calledWith(
+          null,
+          '',
+          'https://example.org?bar=foo&test=4321&gclid=123456&foo=bar&example=123'
         );
-        window.history.replaceState(null, '', prevHref);
       });
     });
   });
@@ -284,12 +305,12 @@ describe('impression', () => {
   describe('replaceUrl', () => {
     it('do nothing if no init replaceUrl param', function* () {
       toggleExperiment(window, 'alp', true);
-      window.sandbox.spy(viewer, 'replaceUrl');
+      env.sandbox.spy(viewer, 'replaceUrl');
       viewer.hasCapability.withArgs('replaceUrl').returns(true);
       maybeTrackImpression(window);
       yield macroTask();
       expect(viewer.replaceUrl).to.have.not.been.called;
-      return getTrackImpressionPromise().should.be.fulfilled;
+      return expect(getTrackImpressionPromise()).to.eventually.be.fulfilled;
     });
 
     it('should use init replaceUrl parm if viewer has no capability', () => {
@@ -298,19 +319,24 @@ describe('impression', () => {
       viewer.getParam
         .withArgs('replaceUrl')
         .returns('http://localhost:9876/v/s/f.com/?gclid=1234&amp_js_v=1&init');
-      const prevHref = window.location.href;
+      const location = {
+        hash: '',
+        search: '?',
+        href: 'http://localhost:9876',
+      };
+      env.sandbox.stub(WindowInterface, 'getLocation').returns(location);
+      const replaceUrlStub = env.sandbox.stub(viewer, 'replaceUrl');
       maybeTrackImpression(window);
       return getTrackImpressionPromise().then(() => {
-        expect(window.location.href).to.equal(
+        expect(replaceUrlStub).to.be.calledOnce.calledWith(
           'http://localhost:9876/v/s/f.com/?gclid=1234&amp_js_v=1&init'
         );
-        window.history.replaceState(null, '', prevHref);
       });
     });
 
     it('should request replaceUrl if viewer signals', function* () {
       toggleExperiment(window, 'alp', true);
-      window.sandbox.spy(viewer, 'sendMessageAwaitResponse');
+      env.sandbox.spy(viewer, 'sendMessageAwaitResponse');
       viewer.getParam.withArgs('replaceUrl').returns('http://www.example.com');
       viewer.hasCapability.withArgs('replaceUrl').returns(true);
       maybeTrackImpression(window);
@@ -323,7 +349,7 @@ describe('impression', () => {
       viewer.getParam.withArgs('click').returns(undefined);
       viewer.getParam.withArgs('replaceUrl').returns('http://www.example.com');
       viewer.hasCapability.withArgs('replaceUrl').returns(true);
-      window.sandbox
+      env.sandbox
         .stub(viewer, 'sendMessageAwaitResponse')
         .callsFake((message) => {
           if (message == 'getReplaceUrl') {
@@ -331,14 +357,14 @@ describe('impression', () => {
           }
         });
       maybeTrackImpression(window);
-      return getTrackImpressionPromise();
+      return expect(getTrackImpressionPromise()).to.eventually.be.fulfilled;
     });
 
     it('should replace location href with replaceUrl from viewer', () => {
       toggleExperiment(window, 'alp', true);
       viewer.getParam.withArgs('replaceUrl').returns('http://www.example.com');
       viewer.hasCapability.withArgs('replaceUrl').returns(true);
-      window.sandbox
+      env.sandbox
         .stub(viewer, 'sendMessageAwaitResponse')
         .callsFake((message) => {
           if (message == 'getReplaceUrl') {
@@ -348,39 +374,39 @@ describe('impression', () => {
             });
           }
         });
-      const prevHref = window.location.href;
-      window.history.replaceState(
-        null,
-        '',
-        prevHref + '?bar=foo&test=4321#hash'
-      );
+      const replaceUrlStub = env.sandbox.stub(viewer, 'replaceUrl');
+      const location = {
+        hash: '#hash',
+        search: '?bar=foo&test=4321',
+        href: 'http://localhost:9876?bar=foo&test=4321#hash',
+      };
+      env.sandbox.stub(WindowInterface, 'getLocation').returns(location);
       maybeTrackImpression(window);
       return getTrackImpressionPromise().then(() => {
-        expect(window.location.href).to.equal(
-          'http://localhost:9876/v/s/f.com/?gclid=1234&amp_js_v=1#hash'
+        expect(replaceUrlStub).to.be.calledOnce.calledWith(
+          'http://localhost:9876/v/s/f.com/?gclid=1234&amp_js_v=1'
         );
-        window.history.replaceState(null, '', prevHref);
       });
     });
   });
 
   it('shouldAppendExtraParams', () => {
-    const div = window.document.createElement('amp-analytics');
+    const div = document.createElement('amp-analytics');
     div.setAttribute('type', 'fake');
     const ampdocApi = {
       whenReady: () => {
         return Promise.resolve();
       },
       getBody: () => {
-        return window.document.body;
+        return document.body;
       },
     };
-    window.document.body.appendChild(div);
+    document.body.appendChild(div);
     return shouldAppendExtraParams(ampdocApi).then((res) => {
       expect(res).to.be.false;
-      const div2 = window.document.createElement('amp-analytics');
+      const div2 = document.createElement('amp-analytics');
       div2.setAttribute('type', 'googleanalytics');
-      window.document.body.appendChild(div2);
+      document.body.appendChild(div2);
       return shouldAppendExtraParams(ampdocApi).then((res) => {
         expect(res).to.be.true;
       });
@@ -397,7 +423,7 @@ describe('impression', () => {
     });
 
     it('should append gclid and gclsrc from window href', () => {
-      const target = window.document.createElement('a');
+      const target = document.createElement('a');
       target.href = 'https://www.test.com?a=1&b=2&c=QUERY_PARAM(c)';
       windowApi.location.href = 'www.current.com?gclid=123&gclsrc=abc';
       expect(getExtraParamsUrl(windowApi, target)).to.equal(
@@ -406,7 +432,7 @@ describe('impression', () => {
     });
 
     it('should respect window location href', () => {
-      const target = window.document.createElement('a');
+      const target = document.createElement('a');
       target.href = 'https://www.test.com?a=1&b=2&c=QUERY_PARAM(c)';
       windowApi.location.href = 'www.current.com';
       expect(getExtraParamsUrl(windowApi, target)).to.equal('');
@@ -421,7 +447,7 @@ describe('impression', () => {
     });
 
     it('should respect param in url', () => {
-      const target = window.document.createElement('a');
+      const target = document.createElement('a');
       target.href = 'https://www.test.com?a=1&b=2&gclid=123';
       windowApi.location.href = 'www.current.com?gclid=123&gclsrc=abc';
       expect(getExtraParamsUrl(windowApi, target)).to.equal(
@@ -430,7 +456,7 @@ describe('impression', () => {
     });
 
     it('should respect param in data-amp-addparams', () => {
-      const target = window.document.createElement('a');
+      const target = document.createElement('a');
       target.href = 'https://www.test.com?a=1&b=2&gclid=123';
       target.setAttribute('data-amp-addparams', 'gclid=QUERY_PARAM(gclid)');
       windowApi.location.href = 'www.current.com?gclid=123&gclsrc=abc';
diff --git a/test/unit/test-ini-load.js b/test/unit/test-ini-load.js
index db00210cd94c9..77c25d2e130b0 100644
--- a/test/unit/test-ini-load.js
+++ b/test/unit/test-ini-load.js
@@ -1,7 +1,3 @@
-import {Deferred} from '../../src/utils/promise';
-import {Services} from '../../src/services';
-import {whenContentIniLoad} from '../../src/ini-load';
-
 /**
  * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
  *
@@ -18,7 +14,15 @@ import {whenContentIniLoad} from '../../src/ini-load';
  * limitations under the License.
  */
 
-describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
+import {Deferred} from '../../src/core/data-structures/promise';
+import {Services} from '../../src/services';
+import {removeItem} from '../../src/core/types/array';
+import {
+  whenContentIniLoadInOb,
+  whenContentIniLoadMeasure,
+} from '../../src/ini-load';
+
+describes.realWin('whenContentIniLoad', {amp: true}, (env) => {
   let win, doc;
   let ampdoc;
 
@@ -28,58 +32,191 @@ describes.realWin('friendly-iframe-embed', {amp: true}, (env) => {
     ampdoc = env.ampdoc;
   });
 
-  it('should find and await all visible content elements in given rect', async () => {
+  function resource(win, tagName, id, overlaps = true, displayed = true) {
+    const deferred = new Deferred();
+    return {
+      element: {
+        tagName: tagName.toUpperCase(),
+        id,
+        whenLoaded: () => deferred.promise,
+      },
+      load: () => {
+        deferred.resolve();
+      },
+      loadedOnce: () => deferred.promise,
+      isDisplayed: () => displayed,
+      overlaps: () => overlaps,
+      isFixed: () => false,
+      prerenderAllowed: () => true,
+      hasBeenMeasured: () => true,
+      hasOwner: () => false,
+      hostWin: win,
+    };
+  }
+
+  describe('whenContentIniLoadMeasure', () => {
+    it('should find and await all visible content elements in given rect', async () => {
+      let content1;
+      let content2;
+
+      const context = doc.createElement('div');
+      doc.body.appendChild(context);
+      const resources = Services.resourcesForDoc(ampdoc);
+      env.sandbox.stub(resources, 'get').returns([
+        (content1 = resource(win, 'amp-img', '1')),
+        (content2 = resource(win, 'amp-video', '2')),
+        resource(win, 'amp-img', '3', false), // resource outside rect
+        resource(win, 'amp-img', '4', true, false), // hidden resource
+        resource(win, 'amp-ad', '5'), // denylisted resource
+      ]);
+
+      let contentIniLoadComplete = false;
+      whenContentIniLoadMeasure(ampdoc, win, {}).then(() => {
+        contentIniLoadComplete = true;
+      });
+
+      ampdoc.signals().signal('ready-scan');
+      await new Promise(setTimeout);
+
+      content1.load();
+      await new Promise(setTimeout);
+      expect(contentIniLoadComplete).to.be.false;
+
+      content2.load();
+      await new Promise(setTimeout);
+      expect(contentIniLoadComplete).to.be.true;
+    });
+  });
+
+  describe('whenContentIniLoadInOb', () => {
     let content1;
     let content2;
+    let observer;
+    let getResourcesStub;
+
+    beforeEach(() => {
+      const resources = Services.resourcesForDoc(ampdoc);
+      getResourcesStub = env.sandbox.stub(resources, 'get');
+      getResourcesStub.returns([
+        (content1 = resource(win, 'amp-img', '1')),
+        (content2 = resource(win, 'amp-video', '2')),
+        resource(win, 'amp-img', '3'),
+        resource(win, 'amp-img', '4'),
+        resource(win, 'amp-ad', '5'),
+      ]);
+
+      class FakeIntersectionObserver {
+        constructor(callback, options) {
+          this.callback = callback;
+          this.options = options;
+          this.elements = [];
+          this.disconnected = false;
+        }
+
+        disconnect() {
+          this.disconnected = true;
+        }
+
+        observe(element) {
+          if (this.elements.includes(element)) {
+            throw new Error('already observed');
+          }
+          this.elements.push(element);
+        }
+
+        unobserve(element) {
+          if (!this.elements.includes(element)) {
+            throw new Error('not observed');
+          }
+          removeItem(this.elements, element);
+        }
 
-    const context = doc.createElement('div');
-    doc.body.appendChild(context);
-    const resources = Services.resourcesForDoc(ampdoc);
-    env.sandbox.stub(resources, 'get').returns([
-      (content1 = resource(win, 'amp-img')),
-      (content2 = resource(win, 'amp-video')),
-      resource(win, 'amp-img', false), // resource outside rect
-      resource(win, 'amp-img', true, false), // hidden resource
-      resource(win, 'amp-ad'), // denylisted resource
-    ]);
-
-    let contentIniLoadComplete = false;
-    whenContentIniLoad(ampdoc, win, {}).then(() => {
-      contentIniLoadComplete = true;
+        notify(entries) {
+          const {callback} = this;
+          return Promise.resolve().then(() => {
+            callback(entries, this);
+          });
+        }
+      }
+
+      observer = null;
+      env.sandbox
+        .stub(win, 'IntersectionObserver')
+        .value(function (callback, options) {
+          observer = new FakeIntersectionObserver(callback, options);
+          return observer;
+        });
     });
 
-    ampdoc.signals().signal('ready-scan');
-    await new Promise(setTimeout);
+    it('should find and await all visible content elements', async () => {
+      let contentIniLoadComplete = false;
+      whenContentIniLoadInOb(ampdoc).then(() => {
+        contentIniLoadComplete = true;
+      });
+
+      ampdoc.signals().signal('ready-scan');
+      await new Promise(setTimeout);
+
+      expect(observer).to.exist;
+      expect(observer.options.root).to.equal(doc);
+      expect(observer.options.threshold).to.equal(0.01);
+
+      await observer.notify([
+        {target: content1.element, isIntersecting: true},
+        {target: content2.element, isIntersecting: true},
+      ]);
+      await new Promise(setTimeout);
+      expect(contentIniLoadComplete).to.be.false;
+
+      content1.load();
+      await new Promise(setTimeout);
+      expect(contentIniLoadComplete).to.be.false;
+
+      content2.load();
+      await new Promise(setTimeout);
+      expect(contentIniLoadComplete).to.be.true;
+      expect(observer.disconnected).to.be.true;
+    });
+
+    it('should find and await some visible content elements', async () => {
+      let contentIniLoadComplete = false;
+      whenContentIniLoadInOb(ampdoc).then(() => {
+        contentIniLoadComplete = true;
+      });
+
+      ampdoc.signals().signal('ready-scan');
+      await new Promise(setTimeout);
 
-    content1.load();
-    await new Promise(setTimeout);
-    expect(contentIniLoadComplete).to.be.false;
+      expect(observer).to.exist;
+      expect(observer.options.root).to.equal(doc);
+      expect(observer.options.threshold).to.equal(0.01);
 
-    content2.load();
-    await new Promise(setTimeout);
-    expect(contentIniLoadComplete).to.be.true;
+      await observer.notify([
+        {target: content1.element, isIntersecting: true},
+        {target: content2.element, isIntersecting: false},
+      ]);
+      await new Promise(setTimeout);
+      expect(contentIniLoadComplete).to.be.false;
+
+      content1.load();
+      await new Promise(setTimeout);
+      expect(contentIniLoadComplete).to.be.true;
+      expect(observer.disconnected).to.be.true;
+    });
+
+    it('should complete without any elements', async () => {
+      getResourcesStub.returns([]);
+
+      let contentIniLoadComplete = false;
+      whenContentIniLoadInOb(ampdoc).then(() => {
+        contentIniLoadComplete = true;
+      });
+
+      ampdoc.signals().signal('ready-scan');
+      await new Promise(setTimeout);
+
+      expect(observer).to.not.exist;
+      expect(contentIniLoadComplete).to.be.true;
+    });
   });
 });
-
-function resource(win, tagName, overlaps = true, displayed = true) {
-  const deferred = new Deferred();
-  return {
-    element: {
-      tagName: tagName.toUpperCase(),
-    },
-    load: () => {
-      deferred.resolve();
-    },
-    loadedOnce: () => {
-      return deferred.promise;
-    },
-    isDisplayed: () => displayed,
-    overlaps: () => overlaps,
-    isFixed: () => false,
-    prerenderAllowed: () => true,
-    hasBeenMeasured: () => true,
-    hasOwner: () => false,
-    getPageLayoutBoxAsync: () => Promise.resolve(),
-    hostWin: win,
-  };
-}
diff --git a/test/unit/test-input.js b/test/unit/test-input.js
index cbfb73791480d..3e2187a83a659 100644
--- a/test/unit/test-input.js
+++ b/test/unit/test-input.js
@@ -18,7 +18,7 @@ import {Input} from '../../src/input';
 import {installTimerService} from '../../src/service/timer-impl.js';
 import {stubService} from '../../testing/test-helper';
 
-describe('Input', () => {
+describes.sandboxed('Input', {}, (env) => {
   let clock;
   let input;
   let eventListeners;
@@ -26,7 +26,7 @@ describe('Input', () => {
   let documentApi;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
 
     eventListeners = {};
 
diff --git a/test/unit/test-integration.js b/test/unit/test-integration.js
index f77d38c8e3204..1de39ab91fb5b 100644
--- a/test/unit/test-integration.js
+++ b/test/unit/test-integration.js
@@ -18,16 +18,16 @@
 // Most coverage through test-3p-frame
 
 import {
-  draw3p,
+  draw3pInternal,
   ensureFramed,
   parseFragment,
   validateAllowedEmbeddingOrigins,
   validateAllowedTypes,
   validateParentOrigin,
-} from '../../3p/integration';
+} from '../../3p/integration-lib';
 import {getRegistrations, register} from '../../3p/3p';
 
-describe('3p integration.js', () => {
+describes.sandboxed('3p integration.js', {}, () => {
   const registrations = getRegistrations();
   afterEach(() => {
     delete registrations.testAction;
@@ -154,11 +154,11 @@ describe('3p integration.js', () => {
       expect(myData).to.equal(myData);
     });
     expect(called).to.be.false;
-    draw3p(win, data);
+    draw3pInternal(win, data);
     expect(called).to.be.true;
   });
 
-  it('should support config processing in draw3p', () => {
+  it('should support config processing in draw3pInternal', () => {
     const data = {
       type: 'testAction2',
     };
@@ -180,7 +180,7 @@ describe('3p integration.js', () => {
     });
     expect(called).to.be.false;
     let finish;
-    draw3p(win, data, (_config, done) => {
+    draw3pInternal(win, data, (_config, done) => {
       finish = () => {
         done({
           custom: true,
@@ -207,7 +207,7 @@ describe('3p integration.js', () => {
     };
     allowConsoleError(() => {
       expect(() => {
-        draw3p(win, data);
+        draw3pInternal(win, data);
       }).to.throw(/Embed type testAction not allowed with tag AMP-EMBED/);
     });
   });
diff --git a/test/unit/test-intersection-observer-polyfill.js b/test/unit/test-intersection-observer-polyfill.js
index f63bed7542134..7f9f0a230817d 100644
--- a/test/unit/test-intersection-observer-polyfill.js
+++ b/test/unit/test-intersection-observer-polyfill.js
@@ -16,16 +16,12 @@
 
 import {AmpDocService} from '../../src/service/ampdoc-impl';
 import {
-  DEFAULT_THRESHOLD,
-  IntersectionObserverHostApi,
-  IntersectionObserverPolyfill,
+  IntersectionObserver3pHost,
   getIntersectionChangeEntry,
-  getThresholdSlot,
   intersectionRatio,
-} from '../../src/utils/intersection-observer-polyfill';
-import {Services} from '../../src/services';
+} from '../../src/utils/intersection-observer-3p-host';
 import {installHiddenObserverForDoc} from '../../src/service/hidden-observer-impl';
-import {layoutRectLtwh} from '../../src/layout-rect';
+import {layoutRectLtwh} from '../../src/core/math/layout-rect';
 
 const fakeAmpDoc = {
   getRootNode: () => {
@@ -38,28 +34,11 @@ const fakeAmpDoc = {
 };
 installHiddenObserverForDoc(fakeAmpDoc);
 
-describes.sandboxed('IntersectionObserverHostApi', {}, (env) => {
-  let onScrollSpy;
-  let onChangeSpy;
+describes.sandboxed('IntersectionObserver3pHost', {}, (env) => {
   let testDoc;
   let testEle;
   let baseElement;
   let ioApi;
-  let tickSpy;
-
-  const mockViewport = {
-    getRect: () => {
-      return layoutRectLtwh(50, 100, 150, 200);
-    },
-    onScroll: () => {
-      onScrollSpy();
-      return () => {};
-    },
-    onChanged: () => {
-      onChangeSpy();
-      return () => {};
-    },
-  };
 
   const iframeSrc =
     'http://iframe.localhost:' +
@@ -78,13 +57,8 @@ describes.sandboxed('IntersectionObserverHostApi', {}, (env) => {
   }
 
   beforeEach(() => {
-    onScrollSpy = env.sandbox.spy();
-    onChangeSpy = env.sandbox.spy();
     testIframe = getIframe(iframeSrc);
     env.sandbox.stub(AmpDocService.prototype, 'getAmpDoc').returns(fakeAmpDoc);
-    env.sandbox.stub(Services, 'viewportForDoc').callsFake(() => {
-      return mockViewport;
-    });
     testDoc = {defaultView: window};
     testEle = {
       isBuilt: () => {
@@ -111,16 +85,9 @@ describes.sandboxed('IntersectionObserverHostApi', {}, (env) => {
           },
         };
       },
-      getViewport: () => {
-        return mockViewport;
-      },
-      isInViewport: () => {
-        return false;
-      },
     };
-    ioApi = new IntersectionObserverHostApi(baseElement, testIframe);
+    ioApi = new IntersectionObserver3pHost(baseElement, testIframe);
     insert(testIframe);
-    tickSpy = env.sandbox.spy(ioApi.intersectionObserver_, 'tick');
   });
 
   afterEach(() => {
@@ -129,45 +96,6 @@ describes.sandboxed('IntersectionObserverHostApi', {}, (env) => {
       ioApi.destroy();
     }
     ioApi = null;
-    tickSpy = null;
-  });
-
-  it('should tick if element in viewport when start sending io', () => {
-    ioApi.startSendingIntersection_();
-    expect(tickSpy).to.not.be.called;
-    expect(onChangeSpy).to.be.calledOnce;
-    expect(onScrollSpy).to.be.calledOnce;
-    testIframe.parentNode.removeChild(testIframe);
-    ioApi.destroy();
-    baseElement.isInViewport = () => {
-      return true;
-    };
-    ioApi = new IntersectionObserverHostApi(baseElement, testIframe);
-    insert(testIframe);
-    const inViewportTickSpy = env.sandbox.spy(
-      ioApi.intersectionObserver_,
-      'tick'
-    );
-    ioApi.startSendingIntersection_();
-    expect(inViewportTickSpy).to.be.calledOnce;
-    expect(onChangeSpy).to.be.calledTwice;
-    expect(onScrollSpy).to.be.calledTwice;
-  });
-
-  it('should tick on inViewport value when element call fire', () => {
-    ioApi.startSendingIntersection_();
-    ioApi.fire();
-    expect(tickSpy).to.not.be.called;
-    ioApi.onViewportCallback(true);
-    ioApi.fire();
-    expect(tickSpy).to.be.calledOnce;
-  });
-
-  it('should not tick before start observing', () => {
-    ioApi.onViewportCallback(true);
-    expect(tickSpy).to.not.be.called;
-    ioApi.fire();
-    expect(tickSpy).to.not.be.called;
   });
 
   it('should destroy correctly', () => {
@@ -182,7 +110,6 @@ describes.sandboxed('IntersectionObserverHostApi', {}, (env) => {
     ioApi.destroy();
     expect(subscriptionApiDestroySpy).to.be.called;
     expect(polyfillDisconnectSpy).to.be.called;
-    expect(ioApi.unlistenOnDestroy_).to.be.null;
     expect(ioApi.intersectionObserver_).to.be.null;
     expect(ioApi.subscriptionApi_).to.be.null;
     ioApi = null;
@@ -240,472 +167,7 @@ describes.sandboxed('getIntersectionChangeEntry', {}, (env) => {
   });
 });
 
-describes.sandboxed('IntersectionObserverPolyfill', {}, (env) => {
-  beforeEach(() => {
-    env.sandbox.stub(performance, 'now').callsFake(() => 100);
-    env.sandbox.stub(AmpDocService.prototype, 'getAmpDoc').returns(fakeAmpDoc);
-    env.sandbox.stub(Services, 'ampdoc').callsFake(() => fakeAmpDoc);
-  });
-
-  describe('threshold', () => {
-    it('default threshold is "[0]"', () => {
-      const io = new IntersectionObserverPolyfill(() => {}, {});
-      expect(io.threshold_).to.jsonEqual([0]);
-    });
-
-    it('accept a single number threshold', () => {
-      const io = new IntersectionObserverPolyfill(() => {}, {
-        threshold: 0.3,
-      });
-      expect(io.threshold_).to.jsonEqual([0.3]);
-    });
-
-    it('threshold value must be finite number', () => {
-      const io1 = () => {
-        new IntersectionObserverPolyfill(() => {}, {
-          threshold: [0.5, '0.6'],
-        });
-      };
-      const io2 = () => {
-        new IntersectionObserverPolyfill(() => {}, {
-          threshold: Infinity,
-        });
-      };
-      allowConsoleError(() => {
-        expect(io1).to.throw(
-          'Threshold should be a ' +
-            'finite number or an array of finite numbers'
-        );
-      });
-      allowConsoleError(() => {
-        expect(io2).to.throw(
-          'Threshold should be a ' +
-            'finite number or an array of finite numbers'
-        );
-      });
-    });
-
-    it('will be sorted', () => {
-      const io = new IntersectionObserverPolyfill(() => {}, {
-        threshold: [0, 0.9, 0.3, 1, 0.02],
-      });
-      expect(io.threshold_).to.jsonEqual([0, 0.02, 0.3, 0.9, 1]);
-    });
-
-    it('should NOT contain value less than 0 or greater than 1', () => {
-      const io1 = () => {
-        new IntersectionObserverPolyfill(() => {}, {
-          threshold: [0, -2],
-        });
-      };
-      const io2 = () => {
-        new IntersectionObserverPolyfill(() => {}, {
-          threshold: [0, 1.1],
-        });
-      };
-      allowConsoleError(() => {
-        expect(io1).to.throw('Threshold should be in the range from "[0, 1]"');
-        expect(io2).to.throw('Threshold should be in the range from "[0, 1]"');
-      });
-    });
-
-    it('getThresholdSlot function', () => {
-      let threshold = DEFAULT_THRESHOLD;
-      expect(getThresholdSlot(threshold, 0)).to.equal(0);
-      expect(getThresholdSlot(threshold, 0.67)).to.equal(14);
-      expect(getThresholdSlot(threshold, 0.65)).to.equal(14);
-      expect(getThresholdSlot(threshold, 1)).to.equal(21);
-      threshold = [0.01, 0.25, 0.5, 1];
-      expect(getThresholdSlot(threshold, 0)).to.equal(0);
-      threshold = [0, 0.25, 0.5, 1];
-      expect(getThresholdSlot(threshold, 0)).to.equal(0);
-      expect(getThresholdSlot(threshold, 0.1)).to.equal(1);
-      expect(getThresholdSlot(threshold, 0.4)).to.equal(2);
-      expect(getThresholdSlot(threshold, 0.25)).to.equal(2);
-      expect(getThresholdSlot(threshold, 0.5)).to.equal(3);
-      expect(getThresholdSlot(threshold, 1)).to.equal(4);
-      threshold = [0.5];
-      expect(getThresholdSlot(threshold, 1)).to.equal(1);
-    });
-  });
-
-  describe('tick function', () => {
-    let testDoc;
-    let element;
-    let callbackSpy;
-
-    let io;
-    beforeEach(() => {
-      callbackSpy = env.sandbox.spy();
-      io = new IntersectionObserverPolyfill(callbackSpy);
-
-      env.sandbox.stub(Services, 'viewportForDoc').callsFake(() => {
-        return {
-          getRect: () => {
-            return layoutRectLtwh(50, 100, 150, 200);
-          },
-        };
-      });
-      env.sandbox.stub(Services, 'resourcesForDoc').callsFake(() => {
-        return {
-          onNextPass: (callback) => {
-            callback();
-          },
-        };
-      });
-
-      testDoc = {defaultView: window};
-      element = {
-        isBuilt: () => {
-          return true;
-        },
-        getOwner: () => {
-          return null;
-        },
-        ownerDocument: testDoc,
-        getRootNode: () => testDoc,
-        nodeType: 1,
-      };
-    });
-
-    afterEach(() => {
-      element = null;
-    });
-
-    it('should tick with right threshold', () => {
-      io = new IntersectionObserverPolyfill(callbackSpy, {
-        threshold: [0, 1],
-      });
-      element.getLayoutBox = () => {
-        return layoutRectLtwh(0, 0, 100, 100);
-      };
-      io.observe(element);
-      // 1st tick with 0 doesn't fire
-      io.tick(layoutRectLtwh(0, 100, 100, 100));
-      expect(callbackSpy).to.not.be.called;
-      // 2nd tick with 0.1 does fire
-      io.tick(layoutRectLtwh(0, 90, 100, 100));
-      expect(callbackSpy).to.be.calledOnce;
-      callbackSpy.resetHistory();
-      // 3rd tick with 0.9 doesn't fire
-      io.tick(layoutRectLtwh(0, 10, 100, 100));
-      expect(callbackSpy).to.not.be.called;
-      callbackSpy.resetHistory();
-      // 4rd tick with 1 does fire
-      io.tick(layoutRectLtwh(0, 0, 100, 100));
-      expect(callbackSpy).to.be.calledOnce;
-      callbackSpy.resetHistory();
-      // 5th tick with 1 doesn't fire
-      io.tick(layoutRectLtwh(0, 0, 100, 100));
-      expect(callbackSpy).to.not.be.called;
-      // 6th tick with 0.9 does fire
-      io.tick(layoutRectLtwh(0, 10, 100, 100));
-      expect(callbackSpy).to.be.calledOnce;
-      callbackSpy.resetHistory();
-      // 7th tick with 0.1 doesn't fire
-      io.tick(layoutRectLtwh(0, 90, 100, 100));
-      expect(callbackSpy).to.not.be.called;
-      // 8th tick with 0 does fire
-      io.tick(layoutRectLtwh(0, 100, 100, 100));
-      expect(callbackSpy).to.be.calledOnce;
-      callbackSpy.resetHistory();
-      // 9th tick with 0 doesn't fire
-      io.tick(layoutRectLtwh(0, 100, 100, 100));
-      expect(callbackSpy).to.not.be.called;
-    });
-
-    it('should trigger for new observed element', () => {
-      io = new IntersectionObserverPolyfill(callbackSpy, {
-        threshold: [0, 1],
-      });
-      element.getLayoutBox = () => {
-        return layoutRectLtwh(0, 0, 100, 100);
-      };
-      io.tick(layoutRectLtwh(0, 90, 100, 100));
-
-      // Observe after tick.
-      io.observe(element);
-      expect(callbackSpy).to.be.calledOnce;
-    });
-
-    describe('mutation observer', () => {
-      it('should create a mutation observer, on initial observer', () => {
-        io = new IntersectionObserverPolyfill(callbackSpy, {
-          threshold: [0, 1],
-        });
-        element.getLayoutBox = () => {
-          return layoutRectLtwh(0, 0, 100, 100);
-        };
-        io.observe(element);
-        expect(io.hiddenObserverUnlistener_).to.be.ok;
-      });
-
-      it('should remove mutation observer, on disconnect', () => {
-        io = new IntersectionObserverPolyfill(callbackSpy, {
-          threshold: [0, 1],
-        });
-        element.getLayoutBox = () => {
-          return layoutRectLtwh(0, 0, 100, 100);
-        };
-        io.observe(element);
-        expect(io.hiddenObserverUnlistener_).to.be.ok;
-        io.disconnect();
-        expect(io.hiddenObserverUnlistener_).to.not.be.ok;
-      });
-    });
-
-    describe('w/o container should get IntersectionChangeEntry when', () => {
-      it('completely in viewport', () => {
-        element.getLayoutBox = () => {
-          return layoutRectLtwh(0, 100, 50, 50);
-        };
-        io.observe(element);
-        const rootBounds = layoutRectLtwh(0, 100, 100, 100);
-        io.tick(rootBounds);
-        expect(callbackSpy).to.be.calledOnce;
-        expect(callbackSpy).to.be.calledWith([
-          {
-            time: 100,
-            rootBounds: layoutRectLtwh(0, 0, 100, 100),
-            boundingClientRect: layoutRectLtwh(0, 0, 50, 50),
-            intersectionRect: layoutRectLtwh(0, 0, 50, 50),
-            intersectionRatio: 1,
-            target: element,
-          },
-        ]);
-      });
-
-      it('intersects on the edge', () => {
-        element.getLayoutBox = () => {
-          return layoutRectLtwh(50, 200, 150, 200);
-        };
-        const rootBounds = layoutRectLtwh(0, 100, 100, 100);
-        io.observe(element);
-        // Tick once before to set threshold to value other than 0;
-        io.tick(layoutRectLtwh(50, 200, 100, 100));
-        io.tick(rootBounds);
-        expect(callbackSpy).to.be.calledTwice;
-        expect(callbackSpy.secondCall).to.be.calledWith([
-          {
-            time: 100,
-            rootBounds: layoutRectLtwh(0, 0, 100, 100),
-            boundingClientRect: layoutRectLtwh(50, 100, 150, 200),
-            intersectionRect: layoutRectLtwh(50, 100, 50, 0),
-            intersectionRatio: 0,
-            target: element,
-          },
-        ]);
-      });
-
-      it('intersects the viewport (bottom right)', () => {
-        element.getLayoutBox = () => {
-          return layoutRectLtwh(50, 199, 150, 200);
-        };
-        const rootBounds = layoutRectLtwh(0, 100, 100, 100);
-        io.observe(element);
-        io.tick(rootBounds);
-        expect(callbackSpy).to.be.calledOnce;
-        expect(callbackSpy).to.be.calledWith([
-          {
-            time: 100,
-            rootBounds: layoutRectLtwh(0, 0, 100, 100),
-            boundingClientRect: layoutRectLtwh(50, 99, 150, 200),
-            intersectionRect: layoutRectLtwh(50, 99, 50, 1),
-            intersectionRatio: 1 / 600,
-            target: element,
-          },
-        ]);
-      });
-
-      it('intersects the viewport (top left)', () => {
-        element.getLayoutBox = () => {
-          return layoutRectLtwh(50, 100, 150, 200);
-        };
-        const rootBounds = layoutRectLtwh(198, 299, 100, 100);
-        io.observe(element);
-        io.tick(rootBounds);
-        expect(callbackSpy).to.be.calledOnce;
-        expect(callbackSpy).to.be.calledWith([
-          {
-            time: 100,
-            rootBounds: layoutRectLtwh(0, 0, 100, 100),
-            boundingClientRect: layoutRectLtwh(-148, -199, 150, 200),
-            intersectionRect: layoutRectLtwh(0, 0, 2, 1),
-            intersectionRatio: 2 / 30000,
-            target: element,
-          },
-        ]);
-      });
-
-      it('NOT intersects when element outside (top left) viewport', () => {
-        element.getLayoutBox = () => {
-          return layoutRectLtwh(50, 100, 150, 200);
-        };
-        const rootBounds = layoutRectLtwh(202, 299, 100, 100);
-        io.observe(element);
-        // Tick once before to set threshold to value other than 0;
-        io.tick(layoutRectLtwh(50, 100, 100, 100));
-        io.tick(rootBounds);
-        expect(callbackSpy).to.be.calledTwice;
-        expect(callbackSpy.secondCall).to.be.calledWith([
-          {
-            time: 100,
-            rootBounds: layoutRectLtwh(0, 0, 100, 100),
-            boundingClientRect: layoutRectLtwh(-152, -199, 150, 200),
-            intersectionRect: layoutRectLtwh(0, 0, 0, 0),
-            intersectionRatio: 0,
-            target: element,
-          },
-        ]);
-      });
-
-      it('NOT intersects with element outside (bottom) viewport', () => {
-        element.getLayoutBox = () => {
-          return layoutRectLtwh(50, 225, 100, 100);
-        };
-        const rootBounds = layoutRectLtwh(0, 100, 100, 100);
-        io.observe(element);
-        // Tick once before to set threshold to value other than 0;
-        io.tick(layoutRectLtwh(50, 225, 100, 100));
-        io.tick(rootBounds);
-        expect(callbackSpy).to.be.calledTwice;
-        expect(callbackSpy.secondCall).to.be.calledWith([
-          {
-            time: 100,
-            rootBounds: layoutRectLtwh(0, 0, 100, 100),
-            boundingClientRect: layoutRectLtwh(50, 125, 100, 100),
-            intersectionRect: layoutRectLtwh(0, 0, 0, 0),
-            intersectionRatio: 0,
-            target: element,
-          },
-        ]);
-      });
-
-      it('element has owner', () => {
-        element.getLayoutBox = () => {
-          return layoutRectLtwh(50, 50, 150, 200);
-        };
-        element.getOwner = () => {
-          return {
-            getLayoutBox: () => {
-              return layoutRectLtwh(0, 50, 100, 100);
-            },
-          };
-        };
-        io.observe(element);
-        const rootBounds = layoutRectLtwh(0, 100, 100, 100);
-        io.tick(rootBounds);
-        expect(callbackSpy).to.be.calledOnce;
-        expect(callbackSpy).to.be.calledWith([
-          {
-            time: 100,
-            rootBounds: layoutRectLtwh(0, 0, 100, 100),
-            boundingClientRect: layoutRectLtwh(50, -50, 150, 200),
-            intersectionRect: layoutRectLtwh(50, 0, 50, 50),
-            intersectionRatio: 1 / 12,
-            target: element,
-          },
-        ]);
-      });
-    });
-
-    describe('with multiple elements', () => {
-      let element2;
-      beforeEach(() => {
-        element2 = {
-          isBuilt: () => {
-            return true;
-          },
-          getOwner: () => {
-            return null;
-          },
-          getLayoutBox: () => {
-            return layoutRectLtwh(0, 100, 50, 50);
-          },
-        };
-      });
-
-      afterEach(() => {
-        element2 = null;
-      });
-
-      it('should tick on multi elements', () => {
-        const rootBounds = layoutRectLtwh(0, 100, 100, 100);
-        element.getLayoutBox = () => {
-          return layoutRectLtwh(0, 100, 25, 25);
-        };
-        io.observe(element);
-        io.observe(element2);
-        io.tick(rootBounds);
-        expect(callbackSpy).to.be.calledOnce;
-        expect(callbackSpy).to.be.calledWith([
-          {
-            time: 100,
-            rootBounds: layoutRectLtwh(0, 0, 100, 100),
-            boundingClientRect: layoutRectLtwh(0, 0, 25, 25),
-            intersectionRect: layoutRectLtwh(0, 0, 25, 25),
-            intersectionRatio: 1,
-            target: element,
-          },
-          {
-            time: 100,
-            rootBounds: layoutRectLtwh(0, 0, 100, 100),
-            boundingClientRect: layoutRectLtwh(0, 0, 50, 50),
-            intersectionRect: layoutRectLtwh(0, 0, 50, 50),
-            intersectionRatio: 1,
-            target: element2,
-          },
-        ]);
-      });
-
-      it('should only fire for elements that crossed threshold', () => {
-        const rootBounds = layoutRectLtwh(0, 100, 100, 100);
-        element.getLayoutBox = () => {
-          return layoutRectLtwh(50, 200, 150, 200);
-        };
-        io.observe(element);
-        io.observe(element2);
-        io.tick(rootBounds);
-        expect(callbackSpy).to.be.calledOnce;
-        expect(callbackSpy).to.be.calledWith([
-          {
-            time: 100,
-            rootBounds: layoutRectLtwh(0, 0, 100, 100),
-            boundingClientRect: layoutRectLtwh(0, 0, 50, 50),
-            intersectionRect: layoutRectLtwh(0, 0, 50, 50),
-            intersectionRatio: 1,
-            target: element2,
-          },
-        ]);
-      });
-
-      it('should stop observing after unobserve', () => {
-        element.getLayoutBox = () => {
-          return layoutRectLtwh(0, 50, 50, 50);
-        };
-        io.observe(element);
-        io.observe(element2);
-        io.tick(layoutRectLtwh(0, 0, 200, 200));
-        expect(callbackSpy).to.be.calledOnce;
-        io.unobserve(element);
-        io.tick(layoutRectLtwh(0, 0, 10, 10));
-        expect(callbackSpy).to.be.calledTwice;
-        expect(callbackSpy.secondCall).to.be.calledWith([
-          {
-            time: 100,
-            rootBounds: layoutRectLtwh(0, 0, 10, 10),
-            boundingClientRect: layoutRectLtwh(0, 100, 50, 50),
-            intersectionRect: layoutRectLtwh(0, 0, 0, 0),
-            intersectionRatio: 0,
-            target: element2,
-          },
-        ]);
-      });
-    });
-  });
-});
-
-describe('intersectionRatio', () => {
+describes.sandboxed('intersectionRatio', {}, () => {
   let smallRectMock;
   let largeRectMock;
   beforeEach(() => {
diff --git a/test/unit/test-jank-meter.js b/test/unit/test-jank-meter.js
deleted file mode 100644
index 69681e9e90132..0000000000000
--- a/test/unit/test-jank-meter.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import * as lolex from 'lolex';
-import {JankMeter} from '../../src/service/jank-meter';
-
-describes.realWin('jank-meter', {}, (env) => {
-  let win;
-  let clock;
-  let meter;
-
-  beforeEach(() => {
-    win = env.win;
-    clock = lolex.install({
-      target: win,
-      toFake: ['Date', 'setTimeout', 'clearTimeout'],
-    });
-
-    meter = new JankMeter(win);
-    meter.perf_ = {
-      isPerformanceTrackingOn() {
-        return true;
-      },
-    };
-  });
-
-  afterEach(() => {
-    clock.uninstall();
-  });
-
-  it('should use first schedule time when scheduled multiple times ', () => {
-    meter.onScheduled();
-    clock.tick(5);
-    meter.onScheduled();
-    clock.tick(15);
-    meter.onRun();
-    expect(meter.totalFrameCnt_).to.equal(1);
-    expect(meter.badFrameCnt_).to.equal(1);
-  });
-
-  it('should count bad frames correctly', () => {
-    runTask(16);
-    expect(meter.totalFrameCnt_).to.equal(1);
-    expect(meter.badFrameCnt_).to.equal(0);
-
-    runTask(17);
-    expect(meter.totalFrameCnt_).to.equal(2);
-    expect(meter.badFrameCnt_).to.equal(1);
-  });
-
-  function runTask(delay) {
-    meter.onScheduled();
-    clock.tick(delay);
-    meter.onRun();
-  }
-});
diff --git a/test/unit/test-json.js b/test/unit/test-json.js
index 3745674fe74ec..24bfbb3d497cd 100644
--- a/test/unit/test-json.js
+++ b/test/unit/test-json.js
@@ -1,5 +1,5 @@
 /**
- * Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+ * Copyright 2021 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.
@@ -14,158 +14,9 @@
  * limitations under the License.
  */
 
-import {
-  deepEquals,
-  getChildJsonConfig,
-  getValueForExpr,
-  recreateNonProtoObject,
-  tryParseJson,
-} from '../../src/json';
-
-describe('json', () => {
-  describe('getValueForExpr', () => {
-    it('should return self for "."', () => {
-      const obj = {str: 'A', num: 1, bool: true, val: null};
-      expect(getValueForExpr(obj, '.')).to.equal(obj);
-    });
-
-    it('should return a simple value', () => {
-      const obj = {str: 'A', num: 1, bool: true, val: null};
-      expect(getValueForExpr(obj, 'str')).to.equal('A');
-      expect(getValueForExpr(obj, 'num')).to.equal(1);
-      expect(getValueForExpr(obj, 'bool')).to.equal(true);
-      expect(getValueForExpr(obj, 'val')).to.be.null;
-      expect(getValueForExpr(obj, 'other')).to.be.undefined;
-    });
-
-    it('should return a nested value', () => {
-      const child = {str: 'A', num: 1, bool: true, val: null};
-      const obj = {child};
-      expect(getValueForExpr(obj, 'child')).to.deep.equal(child);
-      expect(getValueForExpr(obj, 'child.str')).to.equal('A');
-      expect(getValueForExpr(obj, 'child.num')).to.equal(1);
-      expect(getValueForExpr(obj, 'child.bool')).to.equal(true);
-      expect(getValueForExpr(obj, 'child.val')).to.be.null;
-      expect(getValueForExpr(obj, 'child.other')).to.be.undefined;
-    });
-
-    it('should return a nested value without proto', () => {
-      const child = {str: 'A', num: 1, bool: true, val: null};
-      const obj = recreateNonProtoObject({child});
-      expect(getValueForExpr(obj, 'child')).to.deep.equal(child);
-      expect(getValueForExpr(obj, 'child.str')).to.equal('A');
-      expect(getValueForExpr(obj, 'child.num')).to.equal(1);
-      expect(getValueForExpr(obj, 'child.bool')).to.equal(true);
-      expect(getValueForExpr(obj, 'child.val')).to.be.null;
-      expect(getValueForExpr(obj, 'child.other')).to.be.undefined;
-    });
-
-    it('should shortcircuit if a parent in chain missing', () => {
-      const child = {str: 'A'};
-      const obj = {child};
-      expect(getValueForExpr(obj, 'child.str')).to.equal('A');
-      expect(getValueForExpr(obj, 'unknown.str')).to.be.undefined;
-      expect(getValueForExpr(obj, 'unknown.chain.str')).to.be.undefined;
-    });
-
-    it('should shortcircuit if a parent in chain is not an object', () => {
-      const child = {str: 'A'};
-      const obj = {child, nonobj: 'B'};
-      expect(getValueForExpr(obj, 'child.str')).to.equal('A');
-      expect(getValueForExpr(obj, 'nonobj')).to.equal('B');
-      expect(getValueForExpr(obj, 'nonobj.str')).to.be.undefined;
-    });
-
-    it('should only search in own properties', () => {
-      const ancestor = {num: 1};
-      const obj = Object.create(ancestor);
-      obj.str = 'A';
-      expect(getValueForExpr(obj, 'str')).to.equal('A');
-      expect(getValueForExpr(ancestor, 'num')).to.equal(1);
-      expect(getValueForExpr(obj, 'num')).to.be.undefined;
-      expect(getValueForExpr(obj, '__proto__')).to.be.undefined;
-    });
-
-    it('should support array index', () => {
-      const child = {num: 1, str: 'A'};
-      const obj = {foo: [child]};
-      expect(getValueForExpr(obj, 'foo.0.num')).to.equal(1);
-      expect(getValueForExpr(obj, 'foo.0.str')).to.equal('A');
-      expect(getValueForExpr(obj, 'foo.0a.str')).to.be.undefined;
-      expect(getValueForExpr(obj, 'foo.1.num')).to.be.undefined;
-      expect(getValueForExpr(obj, 'foo.1.str')).to.be.undefined;
-    });
-
-    it('should only search in own properties of arrays', () => {
-      const arr = ['A'];
-      expect(getValueForExpr(arr, '0')).to.equal('A');
-      expect(getValueForExpr(arr, '1')).to.be.undefined;
-      expect(getValueForExpr(arr, 'concat')).to.be.undefined;
-      expect(getValueForExpr(arr, '__proto__')).to.be.undefined;
-    });
-  });
-
-  describe('recreateNonProtoObject', () => {
-    it('should recreate an empty object', () => {
-      const original = {};
-      const copy = recreateNonProtoObject(original);
-      expect(copy).to.deep.equal(original);
-      expect(copy).to.not.equal(original);
-      expect(copy.__proto__).to.be.undefined;
-    });
-
-    it('should recreate an object', () => {
-      const original = {str: 'A', num: 1, bool: true, val: null};
-      const copy = recreateNonProtoObject(original);
-      expect(copy).to.deep.equal(original);
-      expect(copy).to.not.equal(original);
-      expect(copy.__proto__).to.be.undefined;
-      expect(copy.val).to.be.null;
-    });
-
-    it('should recreate a nested object', () => {
-      const original = {child: {str: 'A', num: 1, bool: true, val: null}};
-      const copy = recreateNonProtoObject(original);
-      expect(copy).to.deep.equal(original);
-      expect(copy).to.not.equal(original);
-      expect(copy.__proto__).to.be.undefined;
-      expect(copy.child).to.deep.equal(original.child);
-      expect(copy.child).to.not.equal(original.child);
-      expect(copy.child.__proto__).to.be.undefined;
-    });
-  });
-
-  describe('tryParseJson', () => {
-    it('should return object for valid json', () => {
-      const json = '{"key": "value"}';
-      const result = tryParseJson(json);
-      expect(result.key).to.equal('value');
-    });
-
-    it('should not throw and return null for invalid json', () => {
-      const json = '{"key": "val';
-      expect(tryParseJson.bind(null, json)).to.not.throw();
-      const result = tryParseJson(json);
-      expect(result).to.be.null;
-    });
-
-    it('should call onFailed for invalid and not call for valid json', () => {
-      let onFailedCalled = false;
-      const validJson = '{"key": "value"}';
-      tryParseJson(validJson, () => {
-        onFailedCalled = true;
-      });
-      expect(onFailedCalled).to.be.false;
-
-      const invalidJson = '{"key": "val';
-      tryParseJson(invalidJson, (err) => {
-        onFailedCalled = true;
-        expect(err).to.exist;
-      });
-      expect(onFailedCalled).to.be.true;
-    });
-  });
+import {getChildJsonConfig} from '../../src/json';
 
+describes.sandboxed('json', {}, () => {
   describe('getChildJsonConfig', () => {
     let element;
     let script;
@@ -216,84 +67,4 @@ describe('json', () => {
       );
     });
   });
-
-  describe('deepEquals', () => {
-    it('should throw on non-finite depth arg', () => {
-      expect(() => {
-        deepEquals({}, {}, Number.POSITIVE_INFINITY);
-      }).to.throw(/Invalid depth/);
-    });
-
-    it('should handle null and empty objects', () => {
-      expect(deepEquals(null, null)).to.be.true;
-
-      expect(deepEquals({}, {})).to.be.true;
-      expect(deepEquals({}, null)).to.be.false;
-
-      expect(deepEquals([], [])).to.be.true;
-      expect(deepEquals([], null)).to.be.false;
-    });
-
-    it('should check strict equality', () => {
-      expect(deepEquals({x: 1}, {x: 1})).to.be.true;
-      expect(deepEquals({x: false}, {x: false})).to.be.true;
-      expect(deepEquals({x: 'abc'}, {x: 'abc'})).to.be.true;
-
-      expect(deepEquals({x: ''}, {x: false})).to.be.false;
-      expect(deepEquals({x: false}, {x: ''})).to.be.false;
-
-      expect(deepEquals({x: ''}, {x: 0})).to.be.false;
-      expect(deepEquals({x: 0}, {x: ''})).to.be.false;
-
-      expect(deepEquals({x: 1}, {x: true})).to.be.false;
-      expect(deepEquals({x: true}, {x: 1})).to.be.false;
-
-      expect(deepEquals({x: 1}, {x: '1'})).to.be.false;
-      expect(deepEquals({x: '1'}, {x: 1})).to.be.false;
-
-      expect(deepEquals({x: undefined}, {x: null})).to.be.false;
-      expect(deepEquals({x: null}, {x: undefined})).to.be.false;
-
-      expect(deepEquals({x: {}}, {x: '[object Object]'})).to.be.false;
-      expect(deepEquals({x: '[object Object]'}, {x: {}})).to.be.false;
-    });
-
-    it('should check deep equality in nested arrays and objects', () => {
-      expect(deepEquals({x: {y: 1}}, {x: {y: 1}})).to.be.true;
-      expect(deepEquals({x: {y: 1}}, {x: {}})).to.be.false;
-      expect(deepEquals({x: {y: 1}}, {x: {y: 0}})).to.be.false;
-      expect(deepEquals({x: {y: 1}}, {x: {y: 1, z: 2}})).to.be.false;
-
-      expect(deepEquals({x: [1, 2, 3]}, {x: [1, 2, 3]})).to.be.true;
-      expect(deepEquals({x: [1, 2, 3]}, {x: []})).to.be.false;
-      expect(deepEquals({x: [1, 2, 3]}, {x: [1, 2, 3, 4]})).to.be.false;
-
-      expect(deepEquals([1, 2, [3, 4]], [1, 2, [3, 4]])).to.be.true;
-      expect(deepEquals([1, 2, []], [1, 2, []])).to.be.true;
-      expect(deepEquals([1, 2, [3, 4]], [1, 2, [3, 4, 5]])).to.be.false;
-    });
-
-    it('should check array order', () => {
-      expect(deepEquals([1, 2], [2, 1])).to.be.false;
-      expect(deepEquals([1, 2, [3, 4]], [1, 2, [4, 3]])).to.be.false;
-    });
-
-    it('should not check object key order', () => {
-      expect(deepEquals({x: 1, y: 2, z: 3}, {y: 2, z: 3, x: 1})).to.be.true;
-    });
-
-    it('should stop diving once depth arg is exceeded', () => {
-      let depth = 0;
-      expect(deepEquals(1, 1, depth)).to.be.true;
-      expect(deepEquals('a', 'a', depth)).to.be.true;
-      expect(deepEquals([], [], depth)).to.be.false;
-      expect(deepEquals({}, {}, depth)).to.be.false;
-
-      depth = 1;
-      expect(deepEquals({x: 1}, {x: 1}, depth)).to.be.true;
-      expect(deepEquals([1, 2], [1, 2], depth)).to.be.true;
-      expect(deepEquals({x: {y: 1}}, {x: {y: 1}}, depth)).to.be.false;
-      expect(deepEquals({x: []}, {x: []}, depth)).to.be.false;
-    });
-  });
 });
diff --git a/test/unit/test-layout-delay-meter.js b/test/unit/test-layout-delay-meter.js
deleted file mode 100644
index a653b70b14a15..0000000000000
--- a/test/unit/test-layout-delay-meter.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * Copyright 2017 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.
- */
-
-import * as lolex from 'lolex';
-import {LayoutDelayMeter} from '../../src/layout-delay-meter';
-import {Services} from '../../src/services';
-import {installPerformanceService} from '../../src/service/performance-impl';
-import {installPlatformService} from '../../src/service/platform-impl';
-
-describes.realWin(
-  'layout-delay-meter',
-  {
-    amp: {
-      ampdoc: 'single',
-    },
-  },
-  (env) => {
-    let win;
-    let meter;
-    let tickSpy;
-    let clock;
-
-    beforeEach(() => {
-      win = env.win;
-      installPlatformService(win);
-      installPerformanceService(win);
-      const perf = Services.performanceFor(win);
-      env.sandbox.stub(perf, 'isPerformanceTrackingOn').callsFake(() => true);
-      clock = lolex.install({
-        target: win,
-        toFake: ['Date', 'setTimeout', 'clearTimeout'],
-      });
-      tickSpy = env.sandbox.spy(perf, 'tickDelta');
-
-      meter = new LayoutDelayMeter(win, 2);
-    });
-
-    afterEach(() => {
-      clock.uninstall();
-    });
-
-    it('should tick when there is a delay', () => {
-      clock.tick(100);
-      meter.enterViewport(); // first time in viewport
-      clock.tick(100);
-      meter.enterViewport(); // second time in viewport
-      clock.tick(200);
-      meter.startLayout();
-      expect(tickSpy).to.be.calledWith('adld', 300);
-
-      // should only tick once.
-      tickSpy.resetHistory();
-      clock.tick(200);
-      meter.startLayout();
-      expect(tickSpy).to.not.be.called;
-    });
-
-    it('should tick when there is no delay', () => {
-      clock.tick(100);
-      meter.startLayout();
-      clock.tick(200);
-      meter.enterViewport();
-      expect(tickSpy).to.be.calledWith('adld', 0);
-
-      // should only tick once.
-      tickSpy.resetHistory();
-      clock.tick(200);
-      meter.enterViewport();
-      expect(tickSpy).to.not.be.called;
-    });
-
-    it('should not tick if it never enterViewport', () => {
-      clock.tick(100);
-      meter.startLayout();
-      clock.tick(200);
-      expect(tickSpy).not.to.be.called;
-    });
-
-    it('should not tick if it never startLayout', () => {
-      clock.tick(100);
-      meter.enterViewport();
-      clock.tick(200);
-      expect(tickSpy).not.to.be.called;
-    });
-  }
-);
diff --git a/test/unit/test-layout-rect.js b/test/unit/test-layout-rect.js
deleted file mode 100644
index 0b6f63a154772..0000000000000
--- a/test/unit/test-layout-rect.js
+++ /dev/null
@@ -1,231 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import * as lr from '../../src/layout-rect';
-
-describe('LayoutRect', () => {
-  it('layoutRectLtwh', () => {
-    const rect = lr.layoutRectLtwh(1, 2, 3, 4);
-    expect(rect.left).to.equal(1);
-    expect(rect.top).to.equal(2);
-    expect(rect.width).to.equal(3);
-    expect(rect.height).to.equal(4);
-    expect(rect.bottom).to.equal(6);
-    expect(rect.right).to.equal(4);
-  });
-
-  it('rectsOverlap', () => {
-    const rect1 = lr.layoutRectLtwh(10, 20, 30, 40);
-    const rect2 = lr.layoutRectLtwh(40, 60, 10, 10);
-    const rect3 = lr.layoutRectLtwh(41, 60, 10, 10);
-    expect(lr.rectsOverlap(rect1, rect2)).to.equal(true);
-    expect(lr.rectsOverlap(rect1, rect3)).to.equal(false);
-    expect(lr.rectsOverlap(rect2, rect3)).to.equal(true);
-  });
-
-  it('expandLayoutRect', () => {
-    const rect1 = lr.layoutRectLtwh(10, 20, 30, 40);
-    const rect2 = lr.expandLayoutRect(rect1, 2, 3);
-    expect(rect2.left).to.equal(10 - 30 * 2);
-    expect(rect2.right).to.equal(40 + 30 * 2);
-    expect(rect2.width).to.equal(30 + 30 * 4);
-    expect(rect2.top).to.equal(20 - 40 * 3);
-    expect(rect2.bottom).to.equal(60 + 40 * 3);
-    expect(rect2.height).to.equal(40 + 40 * 6);
-  });
-
-  it('moveLayoutRect', () => {
-    const rect1 = lr.layoutRectLtwh(10, 20, 30, 40);
-    const rect2 = lr.moveLayoutRect(rect1, 2, 3);
-    expect(rect2.left).to.equal(rect1.left + 2);
-    expect(rect2.right).to.equal(rect1.right + 2);
-    expect(rect2.width).to.equal(rect1.width);
-    expect(rect2.top).to.equal(rect1.top + 3);
-    expect(rect2.bottom).to.equal(rect1.bottom + 3);
-    expect(rect2.height).to.equal(rect1.height);
-  });
-
-  it('layoutRectFromDomRect', () => {
-    const rect = lr.layoutRectFromDomRect({
-      top: 11,
-      left: 12,
-      width: 111,
-      height: 222,
-    });
-    expect(rect.top).to.equal(11);
-    expect(rect.left).to.equal(12);
-    expect(rect.width).to.equal(111);
-    expect(rect.height).to.equal(222);
-    expect(rect.bottom).to.equal(11 + 222);
-    expect(rect.right).to.equal(12 + 111);
-  });
-
-  it('rectIntersection', () => {
-    const rect1 = lr.layoutRectLtwh(10, 20, 40, 50);
-    const rect2 = lr.layoutRectLtwh(40, 60, 10, 10);
-    const rect3 = lr.layoutRectLtwh(1000, 60, 10, 10);
-    const rect4 = lr.layoutRectLtwh(45, 65, 10, 10);
-    // the LayoutRect array can deal with speical array
-    expect(lr.rectIntersection(null, undefined)).to.be.null;
-    expect(lr.rectIntersection()).to.be.null;
-    expect(lr.rectIntersection(rect1)).to.jsonEqual(rect1);
-    expect(lr.rectIntersection(rect1, rect2)).to.jsonEqual({
-      'left': 40,
-      'top': 60,
-      'width': 10,
-      'height': 10,
-      'bottom': 70,
-      'right': 50,
-      'x': 40,
-      'y': 60,
-    });
-    // the layoutRect array can deal with null/undefined input
-    expect(lr.rectIntersection(null, rect1, undefined, rect2)).to.jsonEqual({
-      'left': 40,
-      'top': 60,
-      'width': 10,
-      'height': 10,
-      'bottom': 70,
-      'right': 50,
-      'x': 40,
-      'y': 60,
-    });
-    expect(lr.rectIntersection(rect1, rect3)).to.be.null;
-    expect(lr.rectIntersection(rect2, rect3)).to.be.null;
-    expect(lr.rectIntersection(rect1, rect2, rect4)).to.jsonEqual({
-      'left': 45,
-      'top': 65,
-      'width': 5,
-      'height': 5,
-      'bottom': 70,
-      'right': 50,
-      'x': 45,
-      'y': 65,
-    });
-    expect(lr.rectIntersection(rect1, rect2, rect3, rect4)).to.be.null;
-  });
-});
-
-describe('cloneLayoutMarginsChangeDef', () => {
-  it('should clone margins change correctly into new object', () => {
-    const marginsChange = {
-      top: 1,
-      bottom: 5,
-      left: 4,
-    };
-    const marginsChangeClone = lr.cloneLayoutMarginsChangeDef(marginsChange);
-    expect(marginsChangeClone).to.not.equal(marginsChange);
-    expect(marginsChangeClone.top).to.equal(1);
-    expect(marginsChangeClone.bottom).to.equal(5);
-    expect(marginsChangeClone.left).to.equal(4);
-    expect(marginsChangeClone.right).to.be.undefined;
-  });
-});
-
-describe('layoutRectSizeEquals', () => {
-  it('should detect changes', () => {
-    const from = lr.layoutRectLtwh(10, 20, 1, 1);
-    const to = lr.layoutRectLtwh(10, 20, 40, 50);
-    expect(lr.layoutRectSizeEquals(from, to)).to.be.false;
-  });
-
-  it('should detect no changes', () => {
-    const from = lr.layoutRectLtwh(10, 20, 1, 1);
-    const to = lr.layoutRectLtwh(10, 20, 1, 1);
-    expect(lr.layoutRectSizeEquals(from, to)).to.be.true;
-  });
-});
-
-describe('areMarginsChanged', () => {
-  it('should find margins are not changed when values the same', () => {
-    const margins = {
-      top: 1,
-      right: 2,
-      bottom: 3,
-      left: 4,
-    };
-    const changes = {
-      top: 1,
-      right: 2,
-      bottom: 3,
-      left: 4,
-    };
-    expect(lr.areMarginsChanged(margins, changes)).to.be.false;
-  });
-
-  it('should find margins are not changed when all changes undefined', () => {
-    const margins = {
-      top: 1,
-      right: 2,
-      bottom: 3,
-      left: 4,
-    };
-    const changes = {};
-    expect(lr.areMarginsChanged(margins, changes)).to.be.false;
-  });
-
-  it('should find margins to be changed when top different', () => {
-    const margins = {
-      top: 1,
-      right: 2,
-      bottom: 3,
-      left: 4,
-    };
-    const changes = {
-      top: 5,
-    };
-    expect(lr.areMarginsChanged(margins, changes)).to.be.true;
-  });
-
-  it('should find margins to be changed when right different', () => {
-    const margins = {
-      top: 1,
-      right: 2,
-      bottom: 3,
-      left: 4,
-    };
-    const changes = {
-      right: 5,
-    };
-    expect(lr.areMarginsChanged(margins, changes)).to.be.true;
-  });
-
-  it('should find margins to be changed when bottom different', () => {
-    const margins = {
-      top: 1,
-      right: 2,
-      bottom: 3,
-      left: 4,
-    };
-    const changes = {
-      bottom: 5,
-    };
-    expect(lr.areMarginsChanged(margins, changes)).to.be.true;
-  });
-
-  it('should find margins to be changed when left different', () => {
-    const margins = {
-      top: 1,
-      right: 2,
-      bottom: 3,
-      left: 4,
-    };
-    const changes = {
-      left: 5,
-    };
-    expect(lr.areMarginsChanged(margins, changes)).to.be.true;
-  });
-});
diff --git a/test/unit/test-layout.js b/test/unit/test-layout.js
index d91aa33768c61..12bfd48b27267 100644
--- a/test/unit/test-layout.js
+++ b/test/unit/test-layout.js
@@ -24,15 +24,33 @@ import {
   isLoadingAllowed,
   parseLayout,
   parseLength,
+  resetShouldUseAspectRatioCssForTesting,
 } from '../../src/layout';
+import {isExperimentOn, toggleExperiment} from '../../src/experiments';
 
-describe('Layout', () => {
+describes.sandboxed('Layout', {}, () => {
   let div;
+  let aspectRatioEnabled;
 
   beforeEach(() => {
     div = document.createElement('div');
+    aspectRatioEnabled =
+      isExperimentOn(window, 'layout-aspect-ratio-css') &&
+      CSS.supports('aspect-ratio: 1/1');
+    resetShouldUseAspectRatioCssForTesting();
   });
 
+  afterEach(() => {
+    resetShouldUseAspectRatioCssForTesting();
+  });
+
+  function removeWhitespace(value) {
+    if (!value) {
+      return value;
+    }
+    return value.replace(/\s/g, '');
+  }
+
   it('parseLayout', () => {
     expect(parseLayout('nodisplay')).to.equal('nodisplay');
     expect(parseLayout('fixed')).to.equal('fixed');
@@ -355,10 +373,15 @@ describe('Layout', () => {
     expect(div.style.height).to.equal('');
     expect(div).to.have.class('i-amphtml-layout-responsive');
     expect(div).to.have.class('i-amphtml-layout-size-defined');
-    expect(div.children.length).to.equal(1);
-    expect(div.children[0].tagName.toLowerCase()).to.equal('i-amphtml-sizer');
-    expect(div.children[0].getAttribute('slot')).to.equal('i-amphtml-svc');
-    expect(div.children[0].style.paddingTop).to.equal('200%');
+    if (aspectRatioEnabled) {
+      expect(div.children.length).to.equal(0);
+      expect(removeWhitespace(div.style.aspectRatio)).to.equal('100/200');
+    } else {
+      expect(div.children.length).to.equal(1);
+      expect(div.children[0].tagName.toLowerCase()).to.equal('i-amphtml-sizer');
+      expect(div.children[0].getAttribute('slot')).to.equal('i-amphtml-svc');
+      expect(div.children[0].style.paddingTop).to.equal('200%');
+    }
   });
 
   it('layout=responsive - default with sizes', () => {
@@ -370,10 +393,15 @@ describe('Layout', () => {
     expect(div.style.height).to.equal('');
     expect(div).to.have.class('i-amphtml-layout-responsive');
     expect(div).to.have.class('i-amphtml-layout-size-defined');
-    expect(div.children.length).to.equal(1);
-    expect(div.children[0].tagName.toLowerCase()).to.equal('i-amphtml-sizer');
-    expect(div.children[0].getAttribute('slot')).to.equal('i-amphtml-svc');
-    expect(div.children[0].style.paddingTop).to.equal('200%');
+    if (aspectRatioEnabled) {
+      expect(div.children.length).to.equal(0);
+      expect(removeWhitespace(div.style.aspectRatio)).to.equal('100/200');
+    } else {
+      expect(div.children.length).to.equal(1);
+      expect(div.children[0].tagName.toLowerCase()).to.equal('i-amphtml-sizer');
+      expect(div.children[0].getAttribute('slot')).to.equal('i-amphtml-svc');
+      expect(div.children[0].style.paddingTop).to.equal('200%');
+    }
   });
 
   it('layout=intrinsic', () => {
@@ -607,9 +635,156 @@ describe('Layout', () => {
     div.setAttribute('width', 100);
     div.setAttribute('height', 200);
     expect(applyStaticLayout(div)).to.equal(Layout.RESPONSIVE);
-    expect(div.querySelectorAll('i-amphtml-sizer')).to.have.length(1);
     const clone = div.cloneNode(true);
     expect(applyStaticLayout(clone)).to.equal(Layout.RESPONSIVE);
-    expect(clone.querySelectorAll('i-amphtml-sizer')).to.have.length(1);
+    if (aspectRatioEnabled) {
+      expect(div.querySelectorAll('i-amphtml-sizer')).to.have.length(0);
+      expect(clone.querySelectorAll('i-amphtml-sizer')).to.have.length(0);
+    } else {
+      expect(div.querySelectorAll('i-amphtml-sizer')).to.have.length(1);
+      expect(clone.querySelectorAll('i-amphtml-sizer')).to.have.length(1);
+    }
   });
 });
+
+describes.realWin('ampshared.css', {amp: true}, function (env) {
+  let win, doc;
+  let element;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+
+    element = doc.createElement('amp-element');
+    element.classList.add('i-amphtml-element');
+    doc.body.appendChild(element);
+  });
+
+  describe
+    .configure()
+    .enableIe()
+    .run('overflow', function () {
+      let overflow;
+
+      beforeEach(() => {
+        overflow = doc.createElement('div');
+        overflow.setAttribute('overflow', '');
+        overflow.style.height = '20px';
+        element.appendChild(overflow);
+      });
+
+      it('should not allow overflow element to distort a size-defined layout', () => {
+        element.setAttribute('layout', 'responsive');
+        element.setAttribute('width', 100);
+        element.setAttribute('height', 100);
+        expect(applyStaticLayout(element)).to.equal(Layout.RESPONSIVE);
+
+        expect(element.offsetWidth).to.equal(element.offsetHeight);
+        expect(overflow.offsetHeight).to.equal(20);
+        expect(win.getComputedStyle(overflow).position).to.equal('absolute');
+      });
+
+      it('should allow overflow element to distort container layout', () => {
+        element.setAttribute('layout', 'container');
+        overflow.text = 'test';
+        expect(applyStaticLayout(element)).to.equal(Layout.CONTAINER);
+
+        expect(element.offsetHeight).to.equal(overflow.offsetHeight);
+        expect(win.getComputedStyle(overflow).position).to.equal('relative');
+      });
+    });
+});
+
+describes.realWin('Layout: aspect-ratio CSS', {amp: true}, function (env) {
+  let win, doc;
+  let element;
+  let ssrSizer;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    toggleExperiment(win, 'layout-aspect-ratio-css', true, true);
+    resetShouldUseAspectRatioCssForTesting();
+
+    element = doc.createElement('amp-element');
+    element.classList.add('i-amphtml-element');
+    doc.body.appendChild(element);
+
+    ssrSizer = doc.createElement('i-amphtml-sizer');
+    ssrSizer.classList.add('i-amphtml-disable-ar');
+  });
+
+  afterEach(() => {
+    resetShouldUseAspectRatioCssForTesting();
+  });
+
+  describe
+    .configure()
+    .enableIe()
+    .run('aspect-ratio not supported', function () {
+      before(function () {
+        if (CSS.supports('aspect-ratio: 1/1')) {
+          this.skipTest();
+        }
+      });
+
+      it('should apply legacy layout for layout=responsive', () => {
+        element.setAttribute('layout', 'responsive');
+        element.setAttribute('width', 100);
+        element.setAttribute('height', 200);
+        expect(applyStaticLayout(element)).to.equal(Layout.RESPONSIVE);
+        expect(element.style.aspectRatio).to.not.be.ok;
+        expect(element.style.width).to.equal('');
+        expect(element.style.height).to.equal('');
+        expect(element).to.have.class('i-amphtml-layout-responsive');
+        expect(element).to.have.class('i-amphtml-layout-size-defined');
+        // Sizer has been added.
+        const sizer = element.querySelector('i-amphtml-sizer');
+        expect(sizer).to.be.ok;
+        expect(getComputedStyle(sizer).display).to.equal('block');
+      });
+
+      it('should pass through SSR sizer for responsive layout', () => {
+        element.setAttribute('i-amphtml-layout', 'responsive');
+        element.appendChild(ssrSizer);
+        expect(applyStaticLayout(element)).to.equal(Layout.RESPONSIVE);
+        expect(element.sizerElement).to.equal(ssrSizer);
+        expect(ssrSizer.getAttribute('slot')).to.equal('i-amphtml-svc');
+        expect(getComputedStyle(ssrSizer).display).to.equal('block');
+      });
+    });
+
+  describe
+    .configure()
+    .enableIe()
+    .run('aspect-ratio supported', function () {
+      before(function () {
+        if (!CSS.supports('aspect-ratio: 1/1')) {
+          this.skipTest();
+        }
+      });
+
+      it('should apply layout=responsive via aspect-ratio', () => {
+        element.setAttribute('layout', 'responsive');
+        element.setAttribute('width', 100);
+        element.setAttribute('height', 200);
+        expect(applyStaticLayout(element)).to.equal(Layout.RESPONSIVE);
+        expect(element.style.aspectRatio).to.equal('100 / 200');
+        expect(element.style.width).to.equal('');
+        expect(element.style.height).to.equal('');
+        expect(element).to.have.class('i-amphtml-layout-responsive');
+        expect(element).to.have.class('i-amphtml-layout-size-defined');
+        // No sizer added.
+        expect(element.querySelector('i-amphtml-sizer')).to.be.null;
+      });
+
+      it('should disable SSR sizer for responsive layout', () => {
+        element.setAttribute('i-amphtml-layout', 'responsive');
+        element.appendChild(ssrSizer);
+        expect(applyStaticLayout(element)).to.equal(Layout.RESPONSIVE);
+        expect(element.sizerElement).to.equal(ssrSizer);
+        expect(ssrSizer.getAttribute('slot')).to.equal('i-amphtml-svc');
+        expect(getComputedStyle(ssrSizer).display).to.equal('none');
+      });
+    });
+});
diff --git a/test/unit/test-loader.js b/test/unit/test-loader.js
index 978b7b33d4347..b55569542eca5 100644
--- a/test/unit/test-loader.js
+++ b/test/unit/test-loader.js
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {Services} from '../../src/services';
-import {createLoaderElement} from '../../src/loader';
+import {createLoaderElement} from '../../src/service/loader-element';
 
 describes.fakeWin('Loader', {amp: true}, (env) => {
   let clock;
@@ -28,7 +28,7 @@ describes.fakeWin('Loader', {amp: true}, (env) => {
   beforeEach(() => {
     ampdoc = env.ampdoc;
     el = document.createElement('div');
-    clock = lolex.install({target: env.win, now: 50});
+    clock = fakeTimers.withGlobal(env.win).install({now: 50});
 
     env.sandbox
       .stub(Services, 'extensionsFor')
diff --git a/test/unit/test-loading-indicator.js b/test/unit/test-loading-indicator.js
new file mode 100644
index 0000000000000..b1361e7d29042
--- /dev/null
+++ b/test/unit/test-loading-indicator.js
@@ -0,0 +1,186 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {LoadingIndicatorImpl} from '../../src/service/loading-indicator';
+import {Services} from '../../src/services';
+import {pushIfNotExist, removeItem} from '../../src/core/types/array';
+
+describes.realWin('LoadingIndicatorImpl', {amp: true}, (env) => {
+  let ampdoc;
+  let service;
+  let loaderService;
+  let io;
+  let el;
+
+  beforeEach(() => {
+    ampdoc = env.ampdoc;
+
+    env.sandbox
+      .stub(env.win, 'IntersectionObserver')
+      .value(IntersectionObserverStub);
+
+    service = new LoadingIndicatorImpl(ampdoc);
+
+    loaderService = {
+      initializeLoader: env.sandbox.spy(),
+    };
+    env.sandbox
+      .stub(Services, 'extensionsFor')
+      .returns({installExtensionForDoc: () => sync()});
+    env.sandbox
+      .stub(Services, 'loaderServiceForDoc')
+      .returns(sync(loaderService));
+
+    el = document.createElement('div');
+  });
+
+  class IntersectionObserverStub {
+    constructor(callback, options) {
+      this.callback = callback;
+      this.options = options;
+      this.observed = [];
+      io = this;
+    }
+
+    observe(el) {
+      pushIfNotExist(this.observed, el);
+    }
+
+    unobserve(el) {
+      removeItem(this.observed, el);
+    }
+
+    record(record) {
+      this.callback([record]);
+    }
+  }
+
+  function sync(value) {
+    return {then: (callback) => callback(value)};
+  }
+
+  function getLoader() {
+    return el.querySelector('.i-amphtml-loading-container');
+  }
+
+  it('tracking should observe an element', () => {
+    service = new LoadingIndicatorImpl(ampdoc);
+    service.track(el);
+    expect(io.observed).to.include(el);
+  });
+
+  it('should not create the loader on out-of-viewport', async () => {
+    service.track(el);
+    // No loader yet.
+    expect(getLoader()).to.not.exist;
+
+    // Observe out-of-viewport.
+    io.record({
+      target: el,
+      isIntersecting: false,
+      boundingClientRect: {width: 100, height: 100},
+    });
+    expect(getLoader()).to.not.exist;
+    expect(loaderService.initializeLoader).to.not.be.called;
+  });
+
+  it('should create the loader on the first in-viewport', async () => {
+    service.track(el);
+    // No loader yet.
+    expect(getLoader()).to.not.exist;
+
+    // Observe in-viewport.
+    io.record({
+      target: el,
+      isIntersecting: true,
+      boundingClientRect: {width: 100, height: 100},
+    });
+    expect(getLoader()).to.exist;
+    expect(loaderService.initializeLoader).to.be.calledOnce;
+  });
+
+  it('should NOT create the loader when size is too small', async () => {
+    service.track(el);
+    // No loader yet.
+    expect(getLoader()).to.not.exist;
+
+    // Observe in-viewport.
+    io.record({
+      target: el,
+      isIntersecting: true,
+      boundingClientRect: {width: 1, height: 1},
+    });
+    expect(getLoader()).to.not.exist;
+    expect(loaderService.initializeLoader).to.not.be.called;
+  });
+
+  it('should hide the loader on out-of-viewport', async () => {
+    service.track(el);
+    io.record({
+      target: el,
+      isIntersecting: true,
+      boundingClientRect: {width: 100, height: 100},
+    });
+    expect(getLoader()).to.exist;
+    expect(getLoader()).to.not.have.class('amp-hidden');
+    expect(getLoader().firstElementChild).to.have.class('amp-active');
+
+    // Out-of-viewport.
+    io.record({
+      target: el,
+      isIntersecting: false,
+      boundingClientRect: {width: 100, height: 100},
+    });
+    expect(getLoader()).to.have.class('amp-hidden');
+    expect(getLoader().firstElementChild).to.not.have.class('amp-active');
+
+    // In-viewport.
+    io.record({
+      target: el,
+      isIntersecting: true,
+      boundingClientRect: {width: 100, height: 100},
+    });
+    expect(getLoader()).to.not.have.class('amp-hidden');
+    expect(getLoader().firstElementChild).to.have.class('amp-active');
+  });
+
+  it('should cleanup when tracking is stopped', async () => {
+    service.track(el);
+    io.record({
+      target: el,
+      isIntersecting: true,
+      boundingClientRect: {width: 100, height: 100},
+    });
+    expect(getLoader()).to.exist;
+
+    // Untrack.
+    service.untrack(el);
+    expect(getLoader()).to.not.exist;
+  });
+
+  it('should configure loader as a service element', async () => {
+    // Ensure loader is created.
+    io.record({
+      target: el,
+      isIntersecting: true,
+      boundingClientRect: {width: 100, height: 100},
+    });
+
+    const loader = getLoader();
+    expect(loader.getAttribute('slot')).to.equal('i-amphtml-svc');
+    expect(loader).to.have.class('i-amphtml-svc');
+  });
+});
diff --git a/test/unit/test-log.js b/test/unit/test-log.js
index 891d011c6b20d..5b4942bd4d6e2 100644
--- a/test/unit/test-log.js
+++ b/test/unit/test-log.js
@@ -20,16 +20,14 @@ import {
   USER_ERROR_SENTINEL,
   dev,
   devAssert,
-  duplicateErrorIfNecessary,
   isUserErrorEmbed,
   isUserErrorMessage,
-  rethrowAsync,
   setReportError,
   user,
   userAssert,
 } from '../../src/log';
 
-describe('Logging', () => {
+describes.sandboxed('Logging', {}, (env) => {
   const RETURNS_FINE = () => LogLevel.FINE;
   const RETURNS_INFO = () => LogLevel.INFO;
   const RETURNS_WARN = () => LogLevel.WARN;
@@ -45,8 +43,8 @@ describe('Logging', () => {
     mode = {};
     window.__AMP_MODE = mode;
 
-    logSpy = window.sandbox.spy();
-    timeoutSpy = window.sandbox.spy();
+    logSpy = env.sandbox.spy();
+    timeoutSpy = env.sandbox.spy();
     win = {
       console: {
         log: logSpy,
@@ -55,7 +53,7 @@ describe('Logging', () => {
       setTimeout: timeoutSpy,
       __AMP_REPORT_ERROR: (error) => error,
     };
-    window.sandbox.stub(self, '__AMP_REPORT_ERROR').callsFake((error) => error);
+    env.sandbox.stub(self, '__AMP_REPORT_ERROR').callsFake((error) => error);
   });
 
   afterEach(() => {
@@ -371,7 +369,14 @@ describe('Logging', () => {
       }
       expect(error).to.be.instanceof(Error);
       expect(error.message).to.equal('1 a 2 b 3' + USER_ERROR_SENTINEL);
-      expect(error.messageArray).to.deep.equal([1, 'a', 2, 'b', 3]);
+      expect(error.messageArray).to.deep.equal([
+        1,
+        'a',
+        2,
+        'b',
+        3,
+        USER_ERROR_SENTINEL,
+      ]);
     });
 
     it('should add element and assert info', () => {
@@ -383,8 +388,7 @@ describe('Logging', () => {
         error = e;
       }
       expect(error).to.be.instanceof(Error);
-      expect(error.associatedElement).to.equal(div);
-      expect(error.fromAssert).to.equal(true);
+      expect(error.messageArray[0]).to.equal(div);
     });
 
     it('should recognize asserts', () => {
@@ -619,113 +623,6 @@ describe('Logging', () => {
     });
   });
 
-  describe('rethrowAsync', () => {
-    let clock;
-
-    beforeEach(() => {
-      clock = window.sandbox.useFakeTimers();
-      restoreAsyncErrorThrows();
-    });
-
-    afterEach(() => {
-      stubAsyncErrorThrows();
-    });
-
-    it('should rethrow error with single message', () => {
-      rethrowAsync('intended');
-      expect(() => {
-        clock.tick(1);
-      }).to.throw(Error, /^intended/);
-    });
-
-    it('should rethrow a single error', () => {
-      const orig = new Error('intended');
-      rethrowAsync(orig);
-      let error;
-      try {
-        clock.tick(1);
-      } catch (e) {
-        error = e;
-      }
-      expect(error).to.equal(orig);
-      expect(error.message).to.match(/^intended/);
-    });
-
-    it('should rethrow error with many messages', () => {
-      rethrowAsync('first', 'second', 'third');
-      let error;
-      try {
-        clock.tick(1);
-      } catch (e) {
-        error = e;
-      }
-      expect(error.message).to.match(/^first second third/);
-    });
-
-    it('should rethrow error with original error and messages', () => {
-      const orig = new Error('intended');
-      rethrowAsync('first', orig, 'second', 'third');
-      let error;
-      try {
-        clock.tick(1);
-      } catch (e) {
-        error = e;
-      }
-      expect(error).to.equal(orig);
-      expect(error.message).to.match(/^first second third: intended/);
-    });
-
-    it('should preserve error suffix', () => {
-      const orig = user().createError('intended');
-      expect(isUserErrorMessage(orig.message)).to.be.true;
-      rethrowAsync('first', orig, 'second');
-      let error;
-      try {
-        clock.tick(1);
-      } catch (e) {
-        error = e;
-      }
-      expect(error).to.equal(orig);
-      expect(isUserErrorMessage(error.message)).to.be.true;
-    });
-  });
-
-  describe('duplicateErrorIfNecessary', () => {
-    it('should not duplicate if message is writeable', () => {
-      const error = {message: 'test'};
-
-      expect(duplicateErrorIfNecessary(error)).to.equal(error);
-    });
-
-    it('should duplicate if message is non-writable', () => {
-      const error = {};
-      Object.defineProperty(error, 'message', {
-        value: 'test',
-        writable: false,
-      });
-
-      expect(duplicateErrorIfNecessary(error)).to.not.equal(error);
-    });
-
-    it('copies all the tidbits', () => {
-      const error = {
-        stack: 'stack',
-        args: [1, 2, 3],
-        associatedElement: error,
-      };
-
-      Object.defineProperty(error, 'message', {
-        value: 'test',
-        writable: false,
-      });
-
-      const duplicate = duplicateErrorIfNecessary(error);
-      expect(duplicate.stack).to.equal(error.stack);
-      expect(duplicate.args).to.equal(error.args);
-      expect(duplicate.associatedElement).to.equal(error.associatedElement);
-    });
-  });
-
   describe('embed error', () => {
     let iframe;
     let element;
diff --git a/test/unit/test-mediasession-helper.js b/test/unit/test-mediasession-helper.js
index 9f13a8f7b8062..f79393a0cf1f8 100644
--- a/test/unit/test-mediasession-helper.js
+++ b/test/unit/test-mediasession-helper.js
@@ -21,6 +21,7 @@ import {
   parseOgImage,
   parseSchemaImage,
   setMediaSession,
+  validateMediaMetadata,
 } from '../../src/mediasession-helper';
 
 const schemaTemplate = `
@@ -142,11 +143,22 @@ describes.sandboxed('MediaSessionAPI Helper Functions', {}, (env) => {
       'artwork': ['http://example.com/image.png'],
       'title': 'Some title',
     };
-    setMediaSession(element, ampdoc.win, fakeMetaData);
+    setMediaSession(ampdoc.win, fakeMetaData);
     const newMetaData = ampdoc.win.navigator.mediaSession.metadata;
     expect(newMetaData).to.deep.equal(fakeMetaData);
   });
 
+  it('validate correct metadata', () => {
+    expect(() =>
+      validateMediaMetadata(element, {
+        'artist': 'Some artist',
+        'album': 'Some album',
+        'artwork': ['http://example.com/image.png'],
+        'title': 'Some title',
+      })
+    ).to.not.throw();
+  });
+
   it('should throw if artwork src is invalid - object', () => {
     const fakeMetaData = {
       'artist': '',
@@ -159,7 +171,7 @@ describes.sandboxed('MediaSessionAPI Helper Functions', {}, (env) => {
     };
     return allowConsoleError(() => {
       expect(() => {
-        setMediaSession(element, ampdoc.win, fakeMetaData);
+        validateMediaMetadata(element, fakeMetaData);
       }).to.throw();
     });
   });
@@ -176,7 +188,7 @@ describes.sandboxed('MediaSessionAPI Helper Functions', {}, (env) => {
     };
     return allowConsoleError(() => {
       expect(() => {
-        setMediaSession(element, ampdoc.win, fakeMetaData);
+        validateMediaMetadata(element, fakeMetaData);
       }).to.throw();
     });
   });
@@ -190,7 +202,7 @@ describes.sandboxed('MediaSessionAPI Helper Functions', {}, (env) => {
     };
     return allowConsoleError(() => {
       expect(() => {
-        setMediaSession(element, ampdoc.win, fakeMetaData);
+        validateMediaMetadata(element, fakeMetaData);
       }).to.throw();
     });
   });
diff --git a/test/unit/test-modal.js b/test/unit/test-modal.js
index f2eb15bad137a..7ba2aac3c3417 100644
--- a/test/unit/test-modal.js
+++ b/test/unit/test-modal.js
@@ -24,7 +24,7 @@ import {
   setModalAsOpen,
 } from '../../src/modal';
 import {htmlFor} from '../../src/static-template';
-import {toArray} from '../../src/types';
+import {toArray} from '../../src/core/types/array';
 
 describes.fakeWin('modal', {}, (env) => {
   let win;
diff --git a/test/unit/test-mode.js b/test/unit/test-mode.js
index 6238f52fc52d9..eb02439afc969 100644
--- a/test/unit/test-mode.js
+++ b/test/unit/test-mode.js
@@ -21,7 +21,7 @@ import {
 } from '../../src/mode';
 import {parseUrlDeprecated} from '../../src/url';
 
-describe('getMode', () => {
+describes.sandboxed('getMode', {}, () => {
   function getWin(url) {
     const win = {
       location: parseUrlDeprecated(url),
@@ -29,28 +29,6 @@ describe('getMode', () => {
     return win;
   }
 
-  it('CDN - lite mode on', () => {
-    const url =
-      'https://cdn.ampproject.org/v/www.example.com/amp.html?amp_js_v=5&amp_lite#origin=https://www.google.com';
-    expect(getMode(getWin(url)).lite).to.be.true;
-  });
-
-  it('CDN - lite mode off', () => {
-    const url =
-      'https://cdn.ampproject.org/v/www.example.com/amp.html?amp_js_v=5#origin=https://www.google.com';
-    expect(getMode(getWin(url)).lite).to.be.false;
-  });
-
-  it('Origin - lite mode on', () => {
-    const url = 'https://www.example.com/amp.html?amp_lite';
-    expect(getMode(getWin(url)).lite).to.be.true;
-  });
-
-  it('Origin - lite mode off', () => {
-    const url = 'https://www.example.com/amp.html';
-    expect(getMode(getWin(url)).lite).to.be.false;
-  });
-
   it('should support different html formats for development', () => {
     let url = 'https://www.amp-site.org#development=1';
     expect(getMode(getWin(url)).development).to.be.true;
@@ -74,7 +52,7 @@ describe('getMode', () => {
   });
 });
 
-describe('getRtvVersion', () => {
+describes.sandboxed('getRtvVersion', {}, () => {
   afterEach(() => {
     resetRtvVersionForTesting();
   });
diff --git a/test/unit/test-motion.js b/test/unit/test-motion.js
index 41aca79234830..ae8ed295f6a3b 100644
--- a/test/unit/test-motion.js
+++ b/test/unit/test-motion.js
@@ -16,7 +16,7 @@
 
 import {calcVelocity, continueMotion} from '../../src/motion';
 
-describe('Motion calcVelocity', () => {
+describes.sandboxed('Motion calcVelocity', {}, () => {
   it('should dampen velocity when prevVelocity is 0', () => {
     expect(calcVelocity(200, 10, 0)).to.be.closeTo(15.999, 1e-3);
   });
@@ -50,14 +50,14 @@ describe('Motion calcVelocity', () => {
   });
 });
 
-describe('Motion continueMotion', () => {
+describes.sandboxed('Motion continueMotion', {}, (env) => {
   let clock;
   let vsync;
   let vsyncTasks;
   let contextNode;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
     vsyncTasks = [];
     vsync = {
       runAnimMutateSeries: (unusedContextNode, mutator) => {
diff --git a/test/unit/test-mustache.js b/test/unit/test-mustache.js
index b0040b9d63545..1ca44128a3322 100644
--- a/test/unit/test-mustache.js
+++ b/test/unit/test-mustache.js
@@ -16,7 +16,7 @@
 
 import mustache from '../../third_party/mustache/mustache';
 
-describe('Mustache', () => {
+describes.sandboxed('Mustache', {}, () => {
   let savedSanitizer;
 
   beforeEach(() => {
diff --git a/test/unit/test-mutator.js b/test/unit/test-mutator.js
index 7f8f39414bcc5..39025df35e1f3 100644
--- a/test/unit/test-mutator.js
+++ b/test/unit/test-mutator.js
@@ -14,22 +14,70 @@
  * limitations under the License.
  */
 
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {AmpDocSingle} from '../../src/service/ampdoc-impl';
 import {LayoutPriority} from '../../src/layout';
 import {MutatorImpl} from '../../src/service/mutator-impl';
 import {Resource, ResourceState} from '../../src/service/resource';
 import {ResourcesImpl} from '../../src/service/resources-impl';
 import {Services} from '../../src/services';
-import {Signals} from '../../src/utils/signals';
-import {VisibilityState} from '../../src/visibility-state';
+import {Signals} from '../../src/core/data-structures/signals';
+import {VisibilityState} from '../../src/core/constants/visibility-state';
 import {installInputService} from '../../src/input';
 import {installPlatformService} from '../../src/service/platform-impl';
-import {layoutRectLtwh} from '../../src/layout-rect';
+import {layoutRectLtwh} from '../../src/core/math/layout-rect';
 
 /** @type {?Event|undefined} */
 const NO_EVENT = undefined;
 
-describe('mutator changeSize', () => {
+describes.realWin('mutator changeSize', {amp: true}, (env) => {
+  let window, document;
+  let clock;
+  let viewportMock;
+  let resources, mutator;
+  let resource1, resource2;
+
+  beforeEach(() => {
+    window = env.win;
+    document = window.document;
+    delete window.requestIdleCallback;
+    delete window.cancelIdleCallback;
+    clock = fakeTimers.withGlobal(window).install();
+    const ampdoc = new AmpDocSingle(window);
+    resources = new ResourcesImpl(ampdoc);
+    resources.isRuntimeOn_ = false;
+    resources.win = {
+      location: {
+        href: 'https://example.org/doc1',
+      },
+      Date: window.Date,
+      getComputedStyle: (el) => {
+        return el.fakeComputedStyle
+          ? el.fakeComputedStyle
+          : window.getComputedStyle(el);
+      },
+    };
+    mutator = new MutatorImpl(ampdoc);
+    mutator.win = resources.win;
+    mutator.resources_ = resources;
+
+    installPlatformService(resources.win);
+    const platform = Services.platformFor(resources.win);
+    env.sandbox.stub(platform, 'isIe').returns(false);
+
+    installInputService(resources.win);
+
+    viewportMock = env.sandbox.mock(mutator.viewport_);
+
+    resource1 = createResource(1, layoutRectLtwh(10, 10, 100, 100));
+    resource2 = createResource(2, layoutRectLtwh(10, 1010, 100, 100));
+    resources.owners_ = [resource1, resource2];
+  });
+
+  afterEach(() => {
+    viewportMock.verify();
+  });
+
   function createElement(rect) {
     const signals = new Signals();
     return {
@@ -46,19 +94,17 @@ describe('mutator changeSize', () => {
       },
       hasAttribute: () => false,
       getBoundingClientRect: () => rect,
-      applySizesAndMediaQuery: () => {},
       layoutCallback: () => Promise.resolve(),
-      viewportCallback: window.sandbox.spy(),
       prerenderAllowed: () => true,
       renderOutsideViewport: () => false,
       unlayoutCallback: () => true,
-      pauseCallback: () => {},
-      unlayoutOnPause: () => true,
+      pause: () => {},
+      unmount: () => {},
       isRelayoutNeeded: () => true,
       /* eslint-disable google-camelcase/google-camelcase */
       contains: (unused_otherElement) => false,
       updateLayoutBox: () => {},
-      togglePlaceholder: () => window.sandbox.spy(),
+      togglePlaceholder: () => env.sandbox.spy(),
       overflowCallback: (
         unused_overflown,
         unused_requestedHeight,
@@ -81,51 +127,10 @@ describe('mutator changeSize', () => {
     resource.element['__AMP__RESOURCE'] = resource;
     resource.state_ = ResourceState.READY_FOR_LAYOUT;
     resource.initialLayoutBox_ = resource.layoutBox_ = rect;
-    resource.changeSize = window.sandbox.spy();
+    resource.changeSize = env.sandbox.spy();
     return resource;
   }
 
-  let clock;
-  let viewportMock;
-  let resources, mutator;
-  let resource1, resource2;
-
-  beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
-    const ampdoc = new AmpDocSingle(window);
-    resources = new ResourcesImpl(ampdoc);
-    resources.isRuntimeOn_ = false;
-    resources.win = {
-      location: {
-        href: 'https://example.org/doc1',
-      },
-      getComputedStyle: (el) => {
-        return el.fakeComputedStyle
-          ? el.fakeComputedStyle
-          : window.getComputedStyle(el);
-      },
-    };
-    mutator = new MutatorImpl(ampdoc);
-    mutator.win = resources.win;
-    mutator.resources_ = resources;
-
-    installPlatformService(resources.win);
-    const platform = Services.platformFor(resources.win);
-    window.sandbox.stub(platform, 'isIe').returns(false);
-
-    installInputService(resources.win);
-
-    viewportMock = window.sandbox.mock(mutator.viewport_);
-
-    resource1 = createResource(1, layoutRectLtwh(10, 10, 100, 100));
-    resource2 = createResource(2, layoutRectLtwh(10, 1010, 100, 100));
-    resources.owners_ = [resource1, resource2];
-  });
-
-  afterEach(() => {
-    viewportMock.verify();
-  });
-
   it('should schedule separate requests', () => {
     mutator.scheduleChangeSize_(
       resource1,
@@ -191,7 +196,8 @@ describe('mutator changeSize', () => {
       false
     );
     expect(resources.requestsChangeSize_.length).to.equal(2);
-    resource1.unload();
+    resource1.state_ = ResourceState.LAYOUT_SCHEDULED;
+    resource1.unlayout();
     resources.cleanupTasks_(resource1);
     expect(resources.requestsChangeSize_.length).to.equal(1);
     expect(resources.requestsChangeSize_[0].resource).to.equal(resource2);
@@ -294,8 +300,8 @@ describe('mutator changeSize', () => {
 
   it('should measure non-measured elements', () => {
     resource1.initialLayoutBox_ = null;
-    resource1.measure = window.sandbox.spy();
-    resource2.measure = window.sandbox.spy();
+    resource1.measure = env.sandbox.spy();
+    resource2.measure = env.sandbox.spy();
 
     mutator.scheduleChangeSize_(resource1, 111, 200, undefined, NO_EVENT, true);
     mutator.scheduleChangeSize_(resource2, 111, 222, undefined, NO_EVENT, true);
@@ -323,7 +329,7 @@ describe('mutator changeSize', () => {
     let viewportRect;
 
     beforeEach(() => {
-      overflowCallbackSpy = window.sandbox.spy();
+      overflowCallbackSpy = env.sandbox.spy();
       resource1.element.overflowCallback = overflowCallbackSpy;
 
       viewportRect = {top: 2, left: 0, right: 100, bottom: 200, height: 200};
@@ -335,12 +341,12 @@ describe('mutator changeSize', () => {
         bottom: 50,
         height: 50,
       };
-      vsyncSpy = window.sandbox.stub(mutator.vsync_, 'run');
+      vsyncSpy = env.sandbox.stub(mutator.vsync_, 'run');
       resources.visible_ = true;
     });
 
     it('should NOT change size when height is unchanged', () => {
-      const callback = window.sandbox.spy();
+      const callback = env.sandbox.spy();
       resource1.layoutBox_ = {
         top: 10,
         left: 0,
@@ -365,7 +371,7 @@ describe('mutator changeSize', () => {
     });
 
     it('should NOT change size when height and margins are unchanged', () => {
-      const callback = window.sandbox.spy();
+      const callback = env.sandbox.spy();
       resource1.layoutBox_ = {
         top: 10,
         left: 0,
@@ -401,7 +407,7 @@ describe('mutator changeSize', () => {
     });
 
     it('should change size when margins but not height changed', () => {
-      const callback = window.sandbox.spy();
+      const callback = env.sandbox.spy();
       resource1.layoutBox_ = {
         top: 10,
         left: 0,
@@ -454,7 +460,7 @@ describe('mutator changeSize', () => {
       .skipSafari()
       .run('should change size when document is invisible', () => {
         resources.visible_ = false;
-        window.sandbox
+        env.sandbox
           .stub(resources.ampdoc, 'getVisibilityState')
           .returns(VisibilityState.PRERENDER);
         mutator.scheduleChangeSize_(
@@ -611,7 +617,7 @@ describe('mutator changeSize', () => {
       () => {
         viewportMock.expects('getContentHeight').returns(10000).atLeast(1);
 
-        const callback = window.sandbox.spy();
+        const callback = env.sandbox.spy();
         resource1.layoutBox_ = {
           top: 100,
           left: 0,
@@ -969,7 +975,7 @@ describe('mutator changeSize', () => {
       expect(overflowCallbackSpy).to.not.been.called;
     });
 
-    // TODO(#25518): investigate failure on Travis Safari
+    // TODO(#25518): investigate failure on Safari
     it.configure().skipSafari(
       'in viewport should change size if in the last 15% and ' +
         'in the last 1000px',
@@ -1082,7 +1088,7 @@ describe('mutator changeSize', () => {
       () => {
         const parent = document.createElement('div');
         parent.style.width = '222px';
-        parent.getLayoutWidth = () => 222;
+        parent.getLayoutSize = () => ({width: 222, height: 111});
         const element = document.createElement('div');
         element.overflowCallback = overflowCallbackSpy;
         parent.appendChild(element);
@@ -1132,7 +1138,7 @@ describe('mutator changeSize', () => {
       () => {
         const parent = document.createElement('div');
         parent.style.width = '222px';
-        parent.getLayoutWidth = () => 222;
+        parent.getLayoutSize = () => ({width: 222, height: 111});
         const element = document.createElement('div');
         const sibling = document.createElement('div');
         sibling.style.width = '1px';
@@ -1383,27 +1389,24 @@ describes.realWin('mutator mutateElement and collapse', {amp: true}, (env) => {
     element.signals = () => new Signals();
     element.whenBuilt = () => Promise.resolve();
     element.isBuilt = () => true;
-    element.build = () => Promise.resolve();
+    element.buildInternal = () => Promise.resolve();
     element.isUpgraded = () => true;
     element.updateLayoutBox = () => {};
     element.getPlaceholder = () => null;
     element.getLayoutPriority = () => LayoutPriority.CONTENT;
-    element.dispatchCustomEvent = () => {};
     element.getLayout = () => 'fixed';
 
     element.isInViewport = () => false;
     element.getAttribute = () => null;
     element.hasAttribute = () => false;
     element.getBoundingClientRect = () => rect;
-    element.applySizesAndMediaQuery = () => {};
     element.layoutCallback = () => Promise.resolve();
-    element.viewportCallback = env.sandbox.spy();
     element.prerenderAllowed = () => true;
     element.renderOutsideViewport = () => true;
     element.isRelayoutNeeded = () => true;
-    element.pauseCallback = () => {};
+    element.pause = () => {};
+    element.unmount = () => {};
     element.unlayoutCallback = () => true;
-    element.unlayoutOnPause = () => true;
     element.togglePlaceholder = () => env.sandbox.spy();
 
     env.win.document.body.appendChild(element);
diff --git a/test/unit/test-navigation.js b/test/unit/test-navigation.js
index 64db37e37ef0b..0d68cca99f50f 100644
--- a/test/unit/test-navigation.js
+++ b/test/unit/test-navigation.js
@@ -637,15 +637,15 @@ describes.sandboxed('Navigation', {}, () => {
         });
 
         it('should navigate relative to source url', () => {
+          // URLs relative to root.
           win.location.href =
             'https://cdn.ampproject.org/c/s/www.pub.com/dir/page.html';
-          const urlService = Services.urlForDoc(doc.documentElement);
-
-          env.sandbox.stub(urlService, 'getSourceUrl').callsFake((url) => {
-            expect(url).to.equal('abc.html');
-            return 'https://www.pub.com/dir/abc.html';
-          });
+          handler.navigateTo(win, '/abc.html');
+          expect(win.location.href).to.equal('https://www.pub.com/abc.html');
 
+          // URLs relative to current directory.
+          win.location.href =
+            'https://cdn.ampproject.org/c/s/www.pub.com/dir/page.html';
           handler.navigateTo(win, 'abc.html');
           expect(win.location.href).to.equal(
             'https://www.pub.com/dir/abc.html'
@@ -803,6 +803,28 @@ describes.sandboxed('Navigation', {}, () => {
           expect(event.defaultPrevented).to.be.false;
         });
 
+        it('should not intercept requests a shadow doc', () => {
+          handler.isTrustedViewer_ = true;
+          handler.ampdoc.isSingleDoc = () => false;
+          // isSingleDoc affects where the services get stored. So stub the getters.
+          env.sandbox
+            .stub(Services, 'urlForDoc')
+            .returns(handler.ampdoc.win.__AMP_SERVICES.url.obj);
+          env.sandbox
+            .stub(Services, 'viewerForDoc')
+            .returns(handler.ampdoc.win.__AMP_SERVICES.viewer.obj);
+
+          handler.handle_(event);
+
+          expect(viewerInterceptsNavigationSpy).to.be.calledOnce;
+          expect(viewerInterceptsNavigationSpy).to.be.calledWithExactly(
+            'https://www.google.com/other',
+            'intercept_click'
+          );
+          expect(sendMessageStub).to.not.be.called;
+          expect(event.defaultPrevented).to.be.false;
+        });
+
         it('should require opted in ampdoc', () => {
           ampdoc
             .getRootNode()
@@ -851,16 +873,11 @@ describes.sandboxed('Navigation', {}, () => {
           beforeEach(() => {
             win = env.win;
             doc = win.document;
-            // TODO(#22733): cleanup `env.ampdoc` part.
-            ampdoc = doc.__AMPDOC || env.ampdoc;
+            ampdoc = env.ampdoc;
             parentWin = env.parentWin;
             embed = env.embed;
 
-            // TODO(#22733): cleanup `win.__AMP_SERVICES.navigation` part.
-            handler = (
-              (ampdoc.__AMP_SERVICES && ampdoc.__AMP_SERVICES.navigation) ||
-              win.__AMP_SERVICES.navigation
-            ).obj;
+            handler = ampdoc.__AMP_SERVICES.navigation.obj;
             winOpenStub = env.sandbox.stub(win, 'open').callsFake(() => {
               return {};
             });
@@ -880,9 +897,8 @@ describes.sandboxed('Navigation', {}, () => {
             // Navigation uses the UrlReplacements service scoped to the event
             // target, but for testing stub in the top-level service for simplicity.
             const {documentElement} = parentWin.document;
-            const urlReplacements = Services.urlReplacementsForDoc(
-              documentElement
-            );
+            const urlReplacements =
+              Services.urlReplacementsForDoc(documentElement);
             env.sandbox
               .stub(Services, 'urlReplacementsForDoc')
               .withArgs(anchor)
diff --git a/test/unit/test-notification-ui-manager.js b/test/unit/test-notification-ui-manager.js
index f7e32759e154f..5126373dba64e 100644
--- a/test/unit/test-notification-ui-manager.js
+++ b/test/unit/test-notification-ui-manager.js
@@ -16,7 +16,7 @@
 import {NotificationUiManager} from '../../src/service/notification-ui-manager';
 import {macroTask} from '../../testing/yield';
 
-describes.realWin('NotificationUiManager', {amp: 1}, () => {
+describes.realWin('NotificationUiManager', {amp: 1}, (env) => {
   describe('Notification UI Manager', () => {
     let manager;
     let show1, show2, show3;
@@ -25,9 +25,9 @@ describes.realWin('NotificationUiManager', {amp: 1}, () => {
     let p1, p2, p3;
     beforeEach(() => {
       manager = new NotificationUiManager();
-      showSpy1 = window.sandbox.spy();
-      showSpy2 = window.sandbox.spy();
-      showSpy3 = window.sandbox.spy();
+      showSpy1 = env.sandbox.spy();
+      showSpy2 = env.sandbox.spy();
+      showSpy3 = env.sandbox.spy();
 
       p1 = new Promise((resolve) => {
         resolve1 = resolve;
@@ -81,7 +81,7 @@ describes.realWin('NotificationUiManager', {amp: 1}, () => {
     });
 
     it('queue empty handler', function* () {
-      const handler = window.sandbox.spy();
+      const handler = env.sandbox.spy();
       manager.registerUI(show1);
       manager.registerUI(show2);
       manager.onQueueEmpty(handler);
@@ -93,7 +93,7 @@ describes.realWin('NotificationUiManager', {amp: 1}, () => {
     });
 
     it('queue not empty handler', function* () {
-      const handler = window.sandbox.spy();
+      const handler = env.sandbox.spy();
       manager.onQueueNotEmpty(handler);
       manager.registerUI(show1);
       manager.registerUI(show2);
diff --git a/test/unit/test-object.js b/test/unit/test-object.js
deleted file mode 100644
index 354f93fe51974..0000000000000
--- a/test/unit/test-object.js
+++ /dev/null
@@ -1,199 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import * as object from '../../src/utils/object';
-
-describe('Object', () => {
-  it('hasOwn', () => {
-    expect(object.hasOwn(object.map(), 'a')).to.be.false;
-    expect(object.hasOwn(object.map({'a': 'b'}), 'b')).to.be.false;
-    expect(object.hasOwn(object.map({'a': {}}), 'a')).to.be.true;
-  });
-
-  it('ownProperty', () => {
-    expect(object.ownProperty({}, '__proto__')).to.be.undefined;
-    expect(object.ownProperty({}, 'constructor')).to.be.undefined;
-    expect(object.ownProperty({foo: 'bar'}, 'foo')).to.equal('bar');
-  });
-
-  describe('map', () => {
-    it('should make map like objects', () => {
-      expect(object.map().prototype).to.be.undefined;
-      expect(object.map().__proto__).to.be.undefined;
-      expect(object.map().toString).to.be.undefined;
-    });
-
-    it('should make map like objects from objects', () => {
-      expect(object.map({}).prototype).to.be.undefined;
-      expect(object.map({}).__proto__).to.be.undefined;
-      expect(object.map({}).toString).to.be.undefined;
-      expect(object.map({foo: 'bar'}).foo).to.equal('bar');
-      const obj = {foo: 'bar', test: 1};
-      expect(object.map(obj).test).to.equal(1);
-      expect(object.map(obj)).to.not.equal(obj);
-    });
-  });
-
-  describe('deepMerge', () => {
-    it('should deep merge objects', () => {
-      const destObject = {
-        a: 'hello world',
-        b: 'goodbye world',
-        c: {
-          d: 'foo',
-          e: {
-            f: 'bar',
-          },
-        },
-      };
-      const fromObject = {
-        b: 'hello world',
-        c: {
-          d: 'bah',
-          e: {
-            g: 'baz',
-          },
-        },
-      };
-      expect(object.deepMerge(destObject, fromObject)).to.deep.equal({
-        a: 'hello world',
-        b: 'hello world',
-        c: {
-          d: 'bah',
-          e: {
-            f: 'bar',
-            g: 'baz',
-          },
-        },
-      });
-    });
-
-    it('should NOT deep merge arrays', () => {
-      const destObject = {
-        a: [1, 2, 3, 4, 5],
-        b: {
-          c: [9, 8, 7, 6, 5],
-        },
-      };
-      const fromObject = {
-        b: {
-          c: ['h', 'i'],
-        },
-      };
-      expect(object.deepMerge(destObject, fromObject)).to.deep.equal({
-        a: [1, 2, 3, 4, 5],
-        b: {
-          c: ['h', 'i'],
-        },
-      });
-    });
-
-    it('should use Object.assign if merged object exceeds max depth', () => {
-      const destObject = {
-        a: {
-          b: {
-            c: {
-              d: 'e',
-              f: 'g',
-            },
-          },
-        },
-      };
-      const fromObject = {
-        a: {
-          b: {
-            c: {
-              d: 'z',
-              h: 'i',
-            },
-          },
-        },
-      };
-      expect(object.deepMerge(destObject, fromObject, 1)).to.deep.equal({
-        a: {
-          b: {
-            c: {
-              d: 'z',
-              h: 'i',
-            },
-          },
-        },
-      });
-    });
-
-    it('should handle destination objects with circular references', () => {
-      const destObject = {};
-      destObject.a = destObject;
-      const fromObject = {};
-      fromObject.a = {};
-      expect(object.deepMerge(destObject, fromObject)).to.deep.equal({
-        a: destObject,
-      });
-    });
-
-    it('should throw on source objects with circular references', () => {
-      const destObject = {};
-      destObject.a = {};
-      const fromObject = {};
-      fromObject.a = fromObject;
-      expect(() => object.deepMerge(destObject, fromObject)).to.throw(
-        /Source object has a circular reference./
-      );
-    });
-
-    it('should merge null and undefined correctly', () => {
-      const destObject = {
-        a: null,
-        b: {
-          c: 'd',
-        },
-        e: undefined,
-        f: {
-          g: 'h',
-        },
-      };
-      const fromObject = {
-        a: {
-          i: 'j',
-        },
-        b: null,
-        e: {
-          k: 'm',
-        },
-        f: undefined,
-      };
-      expect(object.deepMerge(destObject, fromObject)).to.deep.equal({
-        a: {
-          i: 'j',
-        },
-        b: null,
-        e: {
-          k: 'm',
-        },
-        f: undefined,
-      });
-    });
-
-    it('should short circuit when merging the same object', () => {
-      const destObject = {
-        set a(val) {
-          throw new Error('deep merge tried to merge object with itself');
-        },
-      };
-      expect(() => object.deepMerge(destObject, destObject)).to.not.throw();
-    });
-  });
-});
diff --git a/test/unit/test-origin-experiments.js b/test/unit/test-origin-experiments.js
index 6055c922758b3..177f4e2944f06 100644
--- a/test/unit/test-origin-experiments.js
+++ b/test/unit/test-origin-experiments.js
@@ -19,14 +19,14 @@ import {
   TokenMaster,
 } from '../../src/service/origin-experiments-impl';
 import {Services} from '../../src/services';
-import {bytesToString} from '../../src/utils/bytes';
+import {bytesToString} from '../../src/core/types/string/bytes';
 import {user} from '../../src/log';
 
 describes.fakeWin('OriginExperiments', {amp: true}, (env) => {
   const TAG = 'OriginExperiments';
   // Token enables experiment "foo" for origin "https://origin.com".
   const token =
-    'AAAAAFd7Im9yaWdpbiI6Imh0dHBzOi8vb3JpZ2luLmNvbSIsImV4cGVyaW1lbnQiOiJmb28iLCJleHBpcmF0aW9uIjoxLjc5NzY5MzEzNDg2MjMxNTdlKzMwOH0+0WnsFJFtFJzkrzqxid2h3jnFI2C7FTK+8iRYcU1r+9PZtnMPJCVCkNkxWGpXFZ6z2FwIa/hY4XDM//GJHr+2pdChx67wm6RIY1NDwcYqFbUrugEqWiT/2RviS9PPhtP6PKgUDI+0opQUt2ibXhsc1KynroAcGTaaxofmpnuMdj7vjGlWTF+6WCFYfAzqcLJB5a4+Drop9ZTEYRbRROMVROC8EGHwugeMfoNf3roCqaJydADQ/tSTY/fPZOlcwOtGW8GE4s/KlNyFaonjEYOROuLctJxYAqwIStQ4TdS7xfy70hsgVLCKnLeXIRJKN0eaJCkLy6BFbIrCH5FhjhbY'; // eslint-disable-line max-len
+    'AAAAAFd7Im9yaWdpbiI6Imh0dHBzOi8vb3JpZ2luLmNvbSIsImV4cGVyaW1lbnQiOiJmb28iLCJleHBpcmF0aW9uIjoxLjc5NzY5MzEzNDg2MjMxNTdlKzMwOH0+0WnsFJFtFJzkrzqxid2h3jnFI2C7FTK+8iRYcU1r+9PZtnMPJCVCkNkxWGpXFZ6z2FwIa/hY4XDM//GJHr+2pdChx67wm6RIY1NDwcYqFbUrugEqWiT/2RviS9PPhtP6PKgUDI+0opQUt2ibXhsc1KynroAcGTaaxofmpnuMdj7vjGlWTF+6WCFYfAzqcLJB5a4+Drop9ZTEYRbRROMVROC8EGHwugeMfoNf3roCqaJydADQ/tSTY/fPZOlcwOtGW8GE4s/KlNyFaonjEYOROuLctJxYAqwIStQ4TdS7xfy70hsgVLCKnLeXIRJKN0eaJCkLy6BFbIrCH5FhjhbY';
 
   let ampdoc;
   let isPkcsAvailable;
@@ -35,7 +35,7 @@ describes.fakeWin('OriginExperiments', {amp: true}, (env) => {
   let error;
 
   beforeEach(() => {
-    ({win, ampdoc} = env);
+    ({ampdoc, win} = env);
 
     const crypto = Services.cryptoFor(win);
     isPkcsAvailable = env.sandbox.stub(crypto, 'isPkcsAvailable').returns(true);
@@ -86,7 +86,7 @@ describes.fakeWin('OriginExperiments', {amp: true}, (env) => {
     expect(error).calledWithMatch(TAG, 'Failed to verify experiment token');
   });
 
-  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari on Sauce Labs.
+  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari.
   it.configure().skipSafari(
     'should return true for valid token with matching origin',
     function* () {
@@ -100,7 +100,7 @@ describes.fakeWin('OriginExperiments', {amp: true}, (env) => {
     }
   );
 
-  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari on Sauce Labs.
+  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari.
   it.configure().skipSafari(
     'should return false if experiment is not in config',
     function* () {
@@ -127,7 +127,7 @@ describes.fakeWin('TokenMaster', {amp: true}, (env) => {
   let tokenWithBadConfigLength;
   let tokenWithBadSignature;
 
-  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari on Sauce Labs.
+  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari.
   describe
     .configure()
     .skipSafari()
@@ -139,7 +139,7 @@ describes.fakeWin('TokenMaster', {amp: true}, (env) => {
         tokenMaster = new TokenMaster(crypto, url);
 
         return tokenMaster.generateKeys().then((keyPair) => {
-          ({publicKey, privateKey} = keyPair);
+          ({privateKey, publicKey} = keyPair);
 
           const config = {
             origin: 'https://origin.com',
diff --git a/test/unit/test-owners.js b/test/unit/test-owners.js
index 4847ada1de35a..2cd823c4679da 100644
--- a/test/unit/test-owners.js
+++ b/test/unit/test-owners.js
@@ -28,7 +28,6 @@ describes.realWin(
     let owners;
     let parent;
     let children;
-    let scheduleLayoutOrPreloadStub;
 
     beforeEach(() => {
       win = env.win;
@@ -54,10 +53,6 @@ describes.realWin(
           children[0].appendChild(children[i]);
         }
       }
-      scheduleLayoutOrPreloadStub = env.sandbox.stub(
-        resources,
-        'scheduleLayoutOrPreload'
-      );
     });
 
     function createElement() {
@@ -118,24 +113,14 @@ describes.realWin(
         }).to.not.throw();
       });
 
-      it('should call pauseCallback on custom element', () => {
-        const stub1 = env.sandbox.stub(children[1], 'pauseCallback');
-        const stub2 = env.sandbox.stub(children[2], 'pauseCallback');
+      it('should call pause on custom element', () => {
+        const stub1 = env.sandbox.stub(children[1], 'pause');
+        const stub2 = env.sandbox.stub(children[2], 'pause');
 
         owners.schedulePause(parent, children);
         expect(stub1.calledOnce).to.be.true;
         expect(stub2.calledOnce).to.be.true;
       });
-
-      it('should call unlayoutCallback when unlayoutOnPause', () => {
-        const stub1 = env.sandbox.stub(children[1], 'unlayoutCallback');
-        const stub2 = env.sandbox.stub(children[2], 'unlayoutCallback');
-        env.sandbox.stub(children[1], 'unlayoutOnPause').returns(true);
-
-        owners.schedulePause(parent, children);
-        expect(stub1.calledOnce).to.be.true;
-        expect(stub2.calledOnce).to.be.false;
-      });
     });
 
     describe('scheduleResume', () => {
@@ -163,15 +148,15 @@ describes.realWin(
         }).to.not.throw();
       });
 
-      it('should call resumeCallback on paused custom elements', () => {
-        const stub1 = env.sandbox.stub(children[1], 'resumeCallback');
+      it('should call resume on paused custom elements', () => {
+        const stub1 = env.sandbox.stub(children[1], 'resume');
 
         owners.scheduleResume(parent, children);
         expect(stub1.calledOnce).to.be.true;
       });
 
-      it('should call resumeCallback on non-paused custom elements', () => {
-        const stub2 = env.sandbox.stub(children[2], 'resumeCallback');
+      it('should call resume on non-paused custom elements', () => {
+        const stub2 = env.sandbox.stub(children[2], 'resume');
 
         owners.scheduleResume(parent, children);
         expect(stub2.calledOnce).to.be.true;
@@ -184,30 +169,24 @@ describes.realWin(
           children[1],
           ResourceState.READY_FOR_LAYOUT
         );
+        const ensureLoadedStub = env.sandbox
+          .stub(resource1.element, 'ensureLoaded')
+          .resolves();
         owners.scheduleLayout(parent, children[1]);
-        expect(scheduleLayoutOrPreloadStub).to.be.calledWith(
-          resource1,
-          true,
-          parent.getLayoutPriority()
-        );
+        expect(ensureLoadedStub).to.be.calledWith(parent.getLayoutPriority());
       });
 
-      it('should schedule after build', async () => {
+      it('should schedule even when not build', async () => {
         const resource1 = setElementResourceState(
           children[1],
           ResourceState.NOT_BUILT
         );
-        let buildResource;
-        env.sandbox.stub(resource1, 'whenBuilt').returns(
-          new Promise((resolve) => {
-            buildResource = resolve;
-          })
-        );
+        env.sandbox.stub(resource1, 'whenBuilt').returns(new Promise(() => {}));
+        const ensureLoadedStub = env.sandbox
+          .stub(resource1.element, 'ensureLoaded')
+          .resolves();
         owners.scheduleLayout(parent, children[1]);
-        expect(scheduleLayoutOrPreloadStub).to.not.be.called;
-        buildResource();
-        await Promise.resolve();
-        expect(scheduleLayoutOrPreloadStub).to.be.calledWith(resource1, true);
+        expect(ensureLoadedStub).to.be.calledWith(parent.getLayoutPriority());
       });
     });
 
@@ -266,8 +245,19 @@ describes.realWin(
       });
 
       it('should schedule on custom element with multiple children', () => {
+        const ensureLoadedStub1 = env.sandbox
+          .stub(children[1], 'ensureLoaded')
+          .resolves();
+        const ensureLoadedStub2 = env.sandbox
+          .stub(children[2], 'ensureLoaded')
+          .resolves();
         owners.schedulePreload(parent, children);
-        expect(scheduleLayoutOrPreloadStub).to.be.calledTwice;
+        expect(ensureLoadedStub1).to.be.calledOnce.calledWith(
+          parent.getLayoutPriority()
+        );
+        expect(ensureLoadedStub2).to.be.calledOnce.calledWith(
+          parent.getLayoutPriority()
+        );
       });
 
       it('should schedule on nested custom element placeholder', () => {
@@ -283,8 +273,16 @@ describes.realWin(
         );
         children[2].getPlaceholder = () => placeholder2;
 
+        const stub1 = env.sandbox.stub(children[1], 'ensureLoaded');
+        const stub2 = env.sandbox.stub(children[2], 'ensureLoaded');
+        const stub3 = env.sandbox.stub(placeholder1, 'ensureLoaded');
+        const stub4 = env.sandbox.stub(placeholder2, 'ensureLoaded');
+
         owners.schedulePreload(parent, children);
-        expect(scheduleLayoutOrPreloadStub.callCount).to.equal(4);
+        expect(stub1).to.be.calledOnce;
+        expect(stub2).to.be.calledOnce;
+        expect(stub3).to.be.calledOnce;
+        expect(stub4).to.be.calledOnce;
       });
 
       it('should schedule amp-* placeholder inside non-amp element', () => {
@@ -296,8 +294,10 @@ describes.realWin(
         children[0].getElementsByClassName = () => [insidePlaceholder1];
         children[0].getPlaceholder = () => placeholder1;
 
+        const stub1 = env.sandbox.stub(insidePlaceholder1, 'ensureLoaded');
+
         owners.schedulePreload(parent, children);
-        expect(scheduleLayoutOrPreloadStub).to.be.calledThrice;
+        expect(stub1).to.be.calledOnce;
       });
     });
 
@@ -310,57 +310,38 @@ describes.realWin(
           }
           env.sandbox.stub(resource, 'whenBuilt').returns(Promise.resolve());
           env.sandbox.stub(resource, 'loadedOnce').returns(Promise.resolve());
+          env.sandbox.stub(element, 'ensureLoaded').resolves(resource.getId());
         });
       });
 
       it('should layout AMP element itself', async () => {
         setAllResourceState(ResourceState.READY_FOR_LAYOUT);
         const scheduledElements = await owners.requireLayout(parent);
-        expect(scheduledElements).to.have.length(1);
-        expect(scheduleLayoutOrPreloadStub).to.be.calledOnce;
-        expect(scheduleLayoutOrPreloadStub).to.be.calledWith(
-          resources.getResourceForElement(parent),
-          true
-        );
+        expect(scheduledElements).to.deep.equal([0]);
       });
 
       it("should layout non-AMP element's all AMP children", async () => {
         setAllResourceState(ResourceState.READY_FOR_LAYOUT);
         const scheduledElements = await owners.requireLayout(children[0]);
-        expect(scheduledElements).to.have.length(2);
-        expect(scheduleLayoutOrPreloadStub).to.be.calledTwice;
-        expect(scheduleLayoutOrPreloadStub).to.be.calledWith(
-          resources.getResourceForElement(children[3]),
-          true
-        );
-        expect(scheduleLayoutOrPreloadStub).to.be.calledWith(
-          resources.getResourceForElement(children[4]),
-          true
-        );
+        expect(scheduledElements).to.deep.equal([3, 4]);
       });
 
       it('should layout element w/ state=LAYOUT_FAILED', async () => {
-        const resource = setElementResourceState(
-          parent,
-          ResourceState.LAYOUT_FAILED
-        );
-        await owners.requireLayout(parent);
-        expect(scheduleLayoutOrPreloadStub).to.be.calledOnce;
-        expect(scheduleLayoutOrPreloadStub).to.be.calledWith(resource, true);
+        setElementResourceState(parent, ResourceState.LAYOUT_FAILED);
+        const scheduledElements = await owners.requireLayout(parent);
+        expect(scheduledElements).to.deep.equal([0]);
       });
 
-      it('should not layout element w/ state=LAYOUT_COMPLETE', async () => {
+      it('should layout element w/ state=LAYOUT_COMPLETE', async () => {
         setElementResourceState(parent, ResourceState.LAYOUT_COMPLETE);
         const scheduledElements = await owners.requireLayout(parent);
-        expect(scheduledElements).to.have.length(0);
-        expect(scheduleLayoutOrPreloadStub).to.not.be.called;
+        expect(scheduledElements).to.deep.equal([0]);
       });
 
       it('should not double schedule element w/ state=LAYOUT_SCHEDULED', async () => {
         setElementResourceState(parent, ResourceState.LAYOUT_SCHEDULED);
         const scheduledElements = await owners.requireLayout(parent);
-        expect(scheduledElements).to.have.length(1);
-        expect(scheduleLayoutOrPreloadStub).to.not.be.called;
+        expect(scheduledElements).to.deep.equal([0]);
       });
 
       it('should not require layout for undisplayed element', async () => {
@@ -370,8 +351,7 @@ describes.realWin(
         );
         resource.isDisplayedForTesting = false;
         const scheduledElements = await owners.requireLayout(parent);
-        expect(scheduledElements).to.have.length(1);
-        expect(scheduleLayoutOrPreloadStub).to.not.be.called;
+        expect(scheduledElements).to.deep.equal([0]);
       });
     });
   }
diff --git a/test/unit/test-pass.js b/test/unit/test-pass.js
index 97f57b4adaee2..9a2e4b94634d5 100644
--- a/test/unit/test-pass.js
+++ b/test/unit/test-pass.js
@@ -17,13 +17,13 @@
 import {Pass} from '../../src/pass';
 import {Services} from '../../src/services';
 
-describe('Pass', () => {
+describes.sandboxed('Pass', {}, (env) => {
   let pass;
   let timerMock;
   let handlerCalled;
 
   beforeEach(() => {
-    timerMock = window.sandbox.mock(Services.timerFor(window));
+    timerMock = env.sandbox.mock(Services.timerFor(window));
     handlerCalled = 0;
     pass = new Pass(window, () => {
       handlerCalled++;
@@ -40,7 +40,7 @@ describe('Pass', () => {
     timerMock
       .expects('delay')
       .withExactArgs(
-        window.sandbox.match((value) => {
+        env.sandbox.match((value) => {
           delayedFunc = value;
           return true;
         }),
@@ -62,7 +62,7 @@ describe('Pass', () => {
   it('schedule no delay', () => {
     timerMock
       .expects('delay')
-      .withExactArgs(window.sandbox.match.func, 0)
+      .withExactArgs(env.sandbox.match.func, 0)
       .returns(1)
       .once();
     timerMock.expects('cancel').never();
@@ -72,7 +72,7 @@ describe('Pass', () => {
   it('schedule with delay', () => {
     timerMock
       .expects('delay')
-      .withExactArgs(window.sandbox.match.func, 111)
+      .withExactArgs(env.sandbox.match.func, 111)
       .returns(1)
       .once();
     timerMock.expects('cancel').never();
@@ -82,7 +82,7 @@ describe('Pass', () => {
   it('schedule later', () => {
     timerMock
       .expects('delay')
-      .withExactArgs(window.sandbox.match.func, 111)
+      .withExactArgs(env.sandbox.match.func, 111)
       .returns(1)
       .once();
     timerMock.expects('cancel').never();
@@ -95,12 +95,12 @@ describe('Pass', () => {
   it('schedule earlier', () => {
     timerMock
       .expects('delay')
-      .withExactArgs(window.sandbox.match.func, 222)
+      .withExactArgs(env.sandbox.match.func, 222)
       .returns(1)
       .once();
     timerMock
       .expects('delay')
-      .withExactArgs(window.sandbox.match.func, 111)
+      .withExactArgs(env.sandbox.match.func, 111)
       .returns(2)
       .once();
     timerMock.expects('cancel').withExactArgs(1).once();
@@ -122,7 +122,7 @@ describe('Pass', () => {
     timerMock
       .expects('delay')
       .withExactArgs(
-        window.sandbox.match((value) => {
+        env.sandbox.match((value) => {
           delayedFunc0 = value;
           return true;
         }),
@@ -133,7 +133,7 @@ describe('Pass', () => {
     timerMock
       .expects('delay')
       .withExactArgs(
-        window.sandbox.match((value) => {
+        env.sandbox.match((value) => {
           delayedFunc1 = value;
           return true;
         }),
diff --git a/test/unit/test-performance.js b/test/unit/test-performance.js
index ab1db4450ed6b..bdb1453e970bd 100644
--- a/test/unit/test-performance.js
+++ b/test/unit/test-performance.js
@@ -15,14 +15,28 @@
  */
 
 import * as IniLoad from '../../src/ini-load';
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
+import {
+  Performance,
+  installPerformanceService,
+} from '../../src/service/performance-impl';
 import {Services} from '../../src/services';
-import {VisibilityState} from '../../src/visibility-state';
+import {VisibilityState} from '../../src/core/constants/visibility-state';
 import {getMode} from '../../src/mode';
-import {installPerformanceService} from '../../src/service/performance-impl';
 import {installPlatformService} from '../../src/service/platform-impl';
 import {installRuntimeServices} from '../../src/service/core-services';
 
+describes.realWin('performance', {amp: false}, (env) => {
+  it('should be resilient to unsupported PerformanceObserver entry types', () => {
+    env.sandbox.stub(env.win.PerformanceObserver.prototype, 'observe').throws();
+    allowConsoleError(() => {
+      expect(() => {
+        new Performance(env.win);
+      }).to.not.throw();
+    });
+  });
+});
+
 describes.realWin('performance', {amp: true}, (env) => {
   let perf;
   let clock;
@@ -33,8 +47,7 @@ describes.realWin('performance', {amp: true}, (env) => {
   beforeEach(() => {
     win = env.win;
     ampdoc = env.ampdoc;
-    clock = lolex.install({
-      target: win,
+    clock = fakeTimers.withGlobal(win).install({
       toFake: ['Date', 'setTimeout', 'clearTimeout'],
       // set initial Date.now to 100, so that we can differentiate between time relative to epoch and relative to process start (value vs. delta).
       now: timeOrigin,
@@ -779,6 +792,30 @@ describes.realWin('performance with experiment', {amp: true}, (env) => {
       );
     });
   });
+
+  it('adds ssr experiments', () => {
+    env.sandbox
+      .stub(env.ampdoc, 'getMetaByName')
+      .withArgs('amp-usqp')
+      .returns('1=1,2=0');
+    return perf.coreServicesAvailable().then(() => {
+      viewerSendMessageStub.reset();
+      perf.flush();
+      expect(viewerSendMessageStub).to.be.calledWith(
+        'sendCsi',
+        env.sandbox.match((payload) => {
+          const experiments = payload.ampexp.split(',');
+          expect(experiments).to.have.length(3);
+          expect(experiments).to.have.members([
+            'rtv-' + getMode(win).rtvVersion,
+            'ssr-1=1',
+            'ssr-2=0',
+          ]);
+          return true;
+        })
+      );
+    });
+  });
 });
 
 describes.realWin('PeformanceObserver metrics', {amp: true}, (env) => {
@@ -808,66 +845,35 @@ describes.realWin('PeformanceObserver metrics', {amp: true}, (env) => {
     }
   }
 
-  let fakeWin;
-  let windowEventListeners;
   let performanceObserver;
   let viewerVisibilityState;
+  let whenFirstVisiblePromise;
+  let whenFirstVisibleResolve;
 
   function setupFakesForVisibilityStateManipulation() {
-    // Fake window to fake `document.visibilityState`.
-    // TODO: Consider how we can replace this with the fake window object
-    // offered in fake-dom.js. We can't immediately because
-    // document.visibilityState is a read-only property in that object.
-    fakeWin = {
-      Date: env.win.Date,
-      PerformanceObserver: env.sandbox.stub(),
-      addEventListener: env.sandbox.stub(),
-      removeEventListener: env.win.removeEventListener,
-      dispatchEvent: env.win.dispatchEvent,
-      document: {
-        addEventListener: env.sandbox.stub(),
-        hidden: false,
-        readyState: 'complete',
-        removeEventListener: env.sandbox.stub(),
-        visibilityState: 'visible',
-      },
-      location: env.win.location,
-      navigator: env.win.navigator,
-      performance: {
-        getEntriesByType: env.sandbox.stub(),
-        now: () => 100,
-        timeOrigin: 100,
-      },
-    };
-
-    // Fake window.addEventListener to fake `visibilitychange` and
-    // `beforeunload` events.
-    windowEventListeners = {};
-    fakeWin.addEventListener.callsFake((eventType, handler) => {
-      if (!windowEventListeners[eventType]) {
-        windowEventListeners[eventType] = [];
-      }
-      windowEventListeners[eventType].push(handler);
-    });
+    env.sandbox.stub(env.win, 'PerformanceObserver');
 
     // Fake the PerformanceObserver implementation so we can send
     // fake PerformanceEntry objects to listeners.
-    fakeWin.PerformanceObserver.callsFake((callback) => {
+    env.win.PerformanceObserver.callsFake((callback) => {
       performanceObserver = new PerformanceObserverImpl(callback);
       return performanceObserver;
     });
 
-    // Install services on fakeWin so some behaviors can be stubbed.
-    installRuntimeServices(fakeWin);
+    installRuntimeServices(env.win);
 
+    whenFirstVisiblePromise = new Promise((resolve) => {
+      whenFirstVisibleResolve = resolve;
+    });
     const unresolvedPromise = new Promise(() => {});
     const viewportSize = {width: 0, height: 0};
     env.sandbox.stub(Services, 'ampdoc').returns({
       hasBeenVisible: () => {},
       onVisibilityChanged: () => {},
-      whenFirstVisible: () => unresolvedPromise,
+      whenFirstVisible: () => whenFirstVisiblePromise,
       getVisibilityState: () => viewerVisibilityState,
       getFirstVisibleTime: () => 0,
+      isSingleDoc: () => true,
     });
     env.sandbox.stub(Services, 'viewerForDoc').returns({
       isEmbedded: () => {},
@@ -881,16 +887,16 @@ describes.realWin('PeformanceObserver metrics', {amp: true}, (env) => {
     env.sandbox.stub(Services, 'viewportForDoc').returns({
       getSize: () => viewportSize,
     });
+    env.sandbox.stub(Services, 'documentInfoForDoc').returns({
+      canonicalUrl: 'https://example.com/amp.html',
+    });
   }
 
-  function toggleVisibility(win, on) {
-    win.document.visibilityState = on ? 'visible' : 'hidden';
-    fireEvent('visibilitychange');
-  }
-
-  function fireEvent(eventName) {
-    const event = new Event(eventName);
-    (windowEventListeners[eventName] || []).forEach((cb) => cb(event));
+  async function toggleVisibility(perf, on) {
+    viewerVisibilityState = on
+      ? VisibilityState.VISIBLE
+      : VisibilityState.HIDDEN;
+    perf.onAmpDocVisibilityChange_();
   }
 
   describe('should forward paint metrics for performance entries', () => {
@@ -1008,17 +1014,15 @@ describes.realWin('PeformanceObserver metrics', {amp: true}, (env) => {
       setupFakesForVisibilityStateManipulation();
     });
 
-    it('after performance service registered', () => {
+    it('after performance service registered', async () => {
       // Fake the Performance API.
-      fakeWin.PerformanceObserver.supportedEntryTypes = [
+      env.win.PerformanceObserver.supportedEntryTypes = [
         'largest-contentful-paint',
       ];
 
-      installPerformanceService(fakeWin);
-      const perf = Services.performanceFor(fakeWin);
+      installPerformanceService(env.win);
+      const perf = Services.performanceFor(env.win);
       perf.coreServicesAvailable();
-      viewerVisibilityState = VisibilityState.INACTIVE;
-
       expect(perf.events_.length).to.equal(0);
 
       // Fake a largest-contentful-paint entry specifying a loadTime,
@@ -1050,7 +1054,7 @@ describes.realWin('PeformanceObserver metrics', {amp: true}, (env) => {
       });
 
       // The document has become hidden, e.g. via the user switching tabs.
-      toggleVisibility(fakeWin, false);
+      toggleVisibility(perf, false);
 
       const lcpEvents = perf.events_.filter((evt) =>
         evt.label.startsWith('lcp')
@@ -1087,9 +1091,7 @@ describes.realWin('PeformanceObserver metrics', {amp: true}, (env) => {
     it('created before performance service registered for Chromium 77', () => {
       // Pretend that the EventTiming API exists.
       PerformanceObserverConstructorStub.supportedEntryTypes = ['first-input'];
-
       installPerformanceService(env.win);
-
       const perf = Services.performanceFor(env.win);
 
       // Fake fid that occured before the Performance service is started.
@@ -1109,7 +1111,7 @@ describes.realWin('PeformanceObserver metrics', {amp: true}, (env) => {
         },
       });
 
-      expect(perf.events_.length).to.equal(2);
+      expect(perf.events_.length).to.equal(1);
       expect(perf.events_[0]).to.be.jsonEqual({
         label: 'fid',
         delta: 3,
@@ -1157,113 +1159,97 @@ describes.realWin('PeformanceObserver metrics', {amp: true}, (env) => {
     });
 
     function getPerformance() {
-      installPerformanceService(fakeWin);
-      return Services.performanceFor(fakeWin);
-    }
-
-    function toggleVisibility(win, on) {
-      win.document.visibilityState = on ? 'visible' : 'hidden';
-      fireEvent('visibilitychange');
-    }
-
-    function fireEvent(eventName) {
-      const event = new Event(eventName);
-      (windowEventListeners[eventName] || []).forEach((cb) => cb(event));
+      installPerformanceService(env.win);
+      return Services.performanceFor(env.win);
     }
 
-    it('for Chromium 77', () => {
-      // Specify an Android Chrome user agent, which supports the
-      // visibilitychange event.
-      env.sandbox
-        .stub(Services.platformFor(fakeWin), 'isAndroid')
-        .returns(true);
-      env.sandbox.stub(Services.platformFor(fakeWin), 'isChrome').returns(true);
-      env.sandbox
-        .stub(Services.platformFor(fakeWin), 'isSafari')
-        .returns(false);
-
-      // Fake the Performance API.
-      fakeWin.PerformanceObserver.supportedEntryTypes = ['layout-shift'];
-
-      // Document should be initially visible.
-      expect(fakeWin.document.visibilityState).to.equal('visible');
+    // TODO(#33207): Remove after data collection
+    it('Forwards cls-fcp and cls-ofv', async () => {
+      env.win.PerformanceObserver.supportedEntryTypes = [
+        'layout-shift',
+        'paint',
+      ];
 
       const perf = getPerformance();
-      // visibilitychange/beforeunload listeners are now added.
       perf.coreServicesAvailable();
 
-      // Fake layout-shift that occured before the Performance service is started.
+      // Pre-visible and pre-fcp layout shifts
       performanceObserver.triggerCallback({
         getEntries() {
           return [
-            {entryType: 'layout-shift', value: 0.25, hadRecentInput: false},
-            {entryType: 'layout-shift', value: 0.3, hadRecentInput: false},
+            {
+              entryType: 'layout-shift',
+              value: 0.25,
+              hadRecentInput: false,
+              startTime: 0,
+            },
+            {
+              entryType: 'layout-shift',
+              value: 0.25,
+              hadRecentInput: false,
+              startTime: 50,
+            },
           ];
         },
       });
 
-      // The document has become hidden, e.g. via the user switching tabs.
-      toggleVisibility(fakeWin, false);
-      let clsEvents = perf.events_.filter((event) => event.label === 'cls');
-      expect(clsEvents.length).equal(1);
-      expect(perf.events_[0]).to.be.jsonEqual({
-        label: 'cls',
-        delta: 0.55,
-      });
-
-      // The user returns to the tab, and more layout shift occurs.
-      toggleVisibility(fakeWin, true);
-      performanceObserver.triggerCallback({
-        getEntries() {
-          return [
-            {entryType: 'layout-shift', value: 1, hadRecentInput: false},
-            {entryType: 'layout-shift', value: 0.0001, hadRecentInput: false},
-          ];
-        },
-      });
+      env.win.performance.now = () => 70;
+      toggleVisibility(perf, true); // First visible
+      whenFirstVisibleResolve();
+      await new Promise(setTimeout);
+      expect(
+        perf.events_.filter((e) => e.label.startsWith('cls')).length
+      ).equal(0);
 
-      // User input occurs which triggers layout shift, which is ignored.
+      // Post visible, pre-fcp layout-shift
       performanceObserver.triggerCallback({
         getEntries() {
           return [
-            {entryType: 'layout-shift', value: 0.3, hadRecentInput: true},
+            {
+              entryType: 'layout-shift',
+              value: 0.5,
+              hadRecentInput: false,
+              startTime: 100,
+            },
+            {
+              entryType: 'paint',
+              name: 'first-contentful-paint',
+              startTime: 150,
+              duration: 0,
+            },
+            {
+              entryType: 'layout-shift',
+              value: 0.5,
+              hadRecentInput: false,
+              startTime: 200,
+            },
           ];
         },
       });
 
-      toggleVisibility(fakeWin, false);
-      clsEvents = perf.events_.filter((event) => event.label.startsWith('cls'));
-      expect(clsEvents.length).to.equal(2);
-      expect(clsEvents).to.deep.include({
-        label: 'cls-2',
-        delta: 1.5501,
-      });
-
-      // Any more layout shift shouldn't be reported.
-      toggleVisibility(fakeWin, true);
-      performanceObserver.triggerCallback({
-        getEntries() {
-          return [{entryType: 'layout-shift', value: 2, hadRecentInput: false}];
-        },
-      });
-
-      toggleVisibility(fakeWin, false);
-      clsEvents = perf.events_.filter((event) => event.label.startsWith('cls'));
-      expect(clsEvents.length).to.equal(2);
+      toggleVisibility(perf, false);
+      const clsEvents = perf.events_.filter((event) =>
+        event.label.startsWith('cls')
+      );
+      expect(clsEvents).jsonEqual([
+        {label: 'cls-ofv', delta: 0.5},
+        {label: 'cls-fcp', delta: 1},
+        {label: 'cls', delta: 1.5},
+      ]);
     });
 
     it('when the viewer visibility changes to inactive', () => {
       // Specify an Android Chrome user agent.
       env.sandbox
-        .stub(Services.platformFor(fakeWin), 'isAndroid')
+        .stub(Services.platformFor(env.win), 'isAndroid')
         .returns(true);
-      env.sandbox.stub(Services.platformFor(fakeWin), 'isChrome').returns(true);
+      env.sandbox.stub(Services.platformFor(env.win), 'isChrome').returns(true);
       env.sandbox
-        .stub(Services.platformFor(fakeWin), 'isSafari')
+        .stub(Services.platformFor(env.win), 'isSafari')
         .returns(false);
 
       // Fake the Performance API.
-      fakeWin.PerformanceObserver.supportedEntryTypes = ['layout-shift'];
+      env.win.PerformanceObserver.supportedEntryTypes = ['layout-shift'];
 
       const perf = getPerformance();
       perf.coreServicesAvailable();
@@ -1284,7 +1270,7 @@ describes.realWin('PeformanceObserver metrics', {amp: true}, (env) => {
       const clsEvents = perf.events_.filter((evt) =>
         evt.label.startsWith('cls')
       );
-      expect(clsEvents.length).to.equal(1);
+      expect(clsEvents.length).to.equal(3);
       expect(perf.events_).deep.include({
         label: 'cls',
         delta: 0.55,
@@ -1298,8 +1284,8 @@ describes.realWin('PeformanceObserver metrics', {amp: true}, (env) => {
     });
 
     function getPerformance() {
-      installPerformanceService(fakeWin);
-      return Services.performanceFor(fakeWin);
+      installPerformanceService(env.win);
+      return Services.performanceFor(env.win);
     }
 
     it('returns a promise that resolves to the value', async () => {
@@ -1308,19 +1294,6 @@ describes.realWin('PeformanceObserver metrics', {amp: true}, (env) => {
       const value = await perf.getMetric('mbv');
       expect(value).to.eq(1);
     });
-
-    describe('when API not supported', () => {
-      it('throws an error', async () => {
-        const perf = getPerformance();
-        try {
-          await perf.getMetric('lcpv');
-        } catch (error) {
-          expect(error.message).to.equal(
-            'Largest Contentful Paint not supported'
-          );
-        }
-      });
-    });
   });
 
   describe('forwards navigation metrics', () => {
@@ -1429,3 +1402,34 @@ describes.realWin('PeformanceObserver metrics', {amp: true}, (env) => {
     });
   });
 });
+
+describes.realWin('log canonicalUrl', {amp: true}, (env) => {
+  let win;
+  let perf;
+  let viewerSendMessageStub;
+  const canonicalUrl = 'https://example.com/amp.html';
+
+  beforeEach(() => {
+    win = env.win;
+    const viewer = Services.viewerForDoc(env.ampdoc);
+    viewerSendMessageStub = env.sandbox.stub(viewer, 'sendMessage');
+    env.sandbox.stub(viewer, 'whenMessagingReady').returns(Promise.resolve());
+    env.sandbox.stub(viewer, 'getParam').withArgs('csi').returns('1');
+    env.sandbox.stub(viewer, 'isEmbedded').returns(true);
+    env.sandbox.stub(Services, 'documentInfoForDoc').returns({canonicalUrl});
+    installPlatformService(win);
+    installPerformanceService(win);
+    perf = Services.performanceFor(win);
+  });
+
+  it('should add the canonical URL to sendCsi messages', () => {
+    return perf.coreServicesAvailable().then(() => {
+      viewerSendMessageStub.reset();
+      perf.flush();
+      expect(viewerSendMessageStub.lastCall.args[0]).to.equal('sendCsi');
+      expect(viewerSendMessageStub.lastCall.args[1].canonicalUrl).to.equal(
+        canonicalUrl
+      );
+    });
+  });
+});
diff --git a/test/unit/test-platform.js b/test/unit/test-platform.js
index 33dd6e8a67f3f..eb7b7fe2ef8ad 100644
--- a/test/unit/test-platform.js
+++ b/test/unit/test-platform.js
@@ -16,7 +16,7 @@
 
 import {Platform} from '../../src/service/platform-impl';
 
-describe('Platform', () => {
+describes.sandboxed('Platform', {}, (env) => {
   let isIos;
   let isAndroid;
   let isChrome;
@@ -71,7 +71,7 @@ describe('Platform', () => {
         standalone: standAloneBoolean,
         userAgent: userAgentString,
       },
-      matchMedia: window.sandbox.stub().returns({matches: true}),
+      matchMedia: env.sandbox.stub().returns({matches: true}),
     });
     expect(platform.isStandalone()).to.equal(isStandalone);
   }
diff --git a/test/unit/test-polyfill-array-includes.js b/test/unit/test-polyfill-array-includes.js
deleted file mode 100644
index 2bd8426322db6..0000000000000
--- a/test/unit/test-polyfill-array-includes.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {install} from '../../src/polyfills/array-includes';
-
-describes.fakeWin('Array.includes', {}, (env) => {
-  beforeEach(() => {
-    env.win.Array = Array;
-    install(env.win);
-  });
-
-  it('finds primitives when they are present', () => {
-    const arrayWithPrimitives = [false, 17, 'hello world'];
-    expect(arrayWithPrimitives.includes(17)).to.be.true;
-    expect(arrayWithPrimitives.includes(28)).to.be.false;
-    expect(arrayWithPrimitives.includes(false)).to.be.true;
-    expect(arrayWithPrimitives.includes(true)).to.be.false;
-    expect(arrayWithPrimitives.includes('hello world')).to.be.true;
-    expect(arrayWithPrimitives.includes('google')).to.be.false;
-  });
-
-  it('finds objects when they are present', () => {
-    const point = {x: 47, y: 8472};
-    const arrayWithObject = [point];
-    expect(arrayWithObject.includes(point)).to.be.true;
-    // Same properties, different objects
-    expect(arrayWithObject.includes({x: 47, y: 8472})).to.be.false;
-  });
-
-  it('finds NaN when NaN is present', () => {
-    const arrayWithNaN = [NaN];
-    expect(arrayWithNaN.includes(NaN)).to.be.true;
-  });
-
-  it('should only find null when null is desired', () => {
-    const arrayWithNull = [null];
-    const arrayWithUndefined = [undefined];
-    expect(arrayWithNull.includes(null)).to.be.true;
-    expect(arrayWithUndefined.includes(null)).to.be.false;
-  });
-
-  it('should only find undefined when undefined is desired', () => {
-    const arrayWithNull = [null];
-    const arrayWithUndefined = [undefined];
-    expect(arrayWithUndefined.includes(undefined)).to.be.true;
-    expect(arrayWithNull.includes(undefined)).to.be.false;
-  });
-
-  it('should treat 0 and -0 as equal', () => {
-    const arrayWithZero = [0];
-    const arrayWithNegativeZero = [-0];
-    expect(arrayWithZero.includes(0)).to.be.true;
-    expect(arrayWithZero.includes(-0)).to.be.true;
-    expect(arrayWithNegativeZero.includes(0)).to.be.true;
-    expect(arrayWithNegativeZero.includes(-0)).to.be.true;
-  });
-
-  it('should respect the fromIndex argument', () => {
-    const arrayWithNumbers = [0, 1, 2, 3, 4, 5];
-    expect(arrayWithNumbers.includes(2, 0)).to.be.true;
-    expect(arrayWithNumbers.includes(2, 1)).to.be.true;
-    expect(arrayWithNumbers.includes(2, 2)).to.be.true;
-    expect(arrayWithNumbers.includes(2, 3)).to.be.false;
-    expect(arrayWithNumbers.includes(2, 4)).to.be.false;
-    expect(arrayWithNumbers.includes(2, 5)).to.be.false;
-    expect(arrayWithNumbers.includes(2, 6)).to.be.false;
-
-    expect(arrayWithNumbers.includes(2, -1)).to.be.false;
-    expect(arrayWithNumbers.includes(2, -2)).to.be.false;
-    expect(arrayWithNumbers.includes(2, -3)).to.be.false;
-    expect(arrayWithNumbers.includes(2, -4)).to.be.true;
-    expect(arrayWithNumbers.includes(2, -5)).to.be.true;
-    expect(arrayWithNumbers.includes(2, -6)).to.be.true;
-    expect(arrayWithNumbers.includes(2, -6)).to.be.true;
-  });
-});
diff --git a/test/unit/test-polyfill-custom-elements.js b/test/unit/test-polyfill-custom-elements.js
deleted file mode 100644
index d057985b68a6d..0000000000000
--- a/test/unit/test-polyfill-custom-elements.js
+++ /dev/null
@@ -1,244 +0,0 @@
-/**
- * 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.
- */
-
-import {copyProperties, install} from '../../src/polyfills/custom-elements';
-
-describes.realWin(
-  'install patches',
-  {skipCustomElementsPolyfill: true},
-  (env) => {
-    let win;
-    let innerHTMLProto;
-
-    function getInnerHtmlProto(win) {
-      let innerHTMLProto = win.Element.prototype;
-      if (!Object.getOwnPropertyDescriptor(innerHTMLProto, 'innerHTML')) {
-        innerHTMLProto = win.HTMLElement.prototype;
-        if (!Object.getOwnPropertyDescriptor(innerHTMLProto, 'innerHTML')) {
-          return null;
-        }
-      }
-      return innerHTMLProto;
-    }
-
-    before(function () {
-      if (!getInnerHtmlProto(window)) {
-        this.skipTest();
-      }
-    });
-
-    beforeEach(function () {
-      win = env.win;
-      innerHTMLProto = getInnerHtmlProto(win);
-
-      // We want to test the full polyfill.
-      delete win.Reflect;
-      delete win.customElements;
-    });
-
-    it('handles non-configurable innerHTML accessor (Safari 9)', () => {
-      // Use strict is important, as strict mode code will throw an error when
-      // trying to redefine a non-configurable property.
-      'use strict';
-
-      Object.defineProperty(innerHTMLProto, 'innerHTML', {configurable: false});
-      install(win, function () {});
-
-      class Test extends win.HTMLElement {}
-
-      expect(() => {
-        win.customElements.define('x-test', Test);
-      }).not.to.throw();
-    });
-
-    it('handles missing innerHTML descriptor (Yandex)', () => {
-      // Use strict is important, as strict mode code will throw an error when
-      // trying to redefine a non-configurable property.
-      'use strict';
-
-      delete innerHTMLProto.innerHTML;
-      install(win, function () {});
-
-      class Test extends win.HTMLElement {}
-
-      expect(() => {
-        win.customElements.define('x-test', Test);
-      }).not.to.throw();
-    });
-
-    it('handles innerHTML descriptor on HTMLElement (IE11)', () => {
-      // Use strict is important, as strict mode code will throw an error when
-      // trying to redefine a non-configurable property.
-      'use strict';
-
-      const desc = Object.getOwnPropertyDescriptor(innerHTMLProto, 'innerHTML');
-      delete innerHTMLProto.innerHTML;
-      Object.defineProperty(win.HTMLElement.prototype, 'innerHTML', desc);
-      install(win, function () {});
-
-      class Test extends win.HTMLElement {}
-
-      expect(() => {
-        win.customElements.define('x-test', Test);
-      }).not.to.throw();
-    });
-  }
-);
-
-describes.fakeWin('copyProperties', {}, () => {
-  it('copies own properties from proto object', () => {
-    const obj = {};
-    const proto = {test: 1};
-
-    copyProperties(obj, proto);
-
-    expect(obj).to.have.ownPropertyDescriptor('test', {
-      value: 1,
-      configurable: true,
-      enumerable: true,
-      writable: true,
-    });
-  });
-
-  it('copies own descriptor from proto object', () => {
-    const obj = {};
-    const proto = {};
-    Object.defineProperty(proto, 'test', {value: 1});
-
-    copyProperties(obj, proto);
-
-    expect(obj).to.have.ownPropertyDescriptor('test', {
-      value: 1,
-      configurable: false,
-      enumerable: false,
-      writable: false,
-    });
-  });
-
-  it('copies own getter/setter from proto object', () => {
-    const obj = {};
-    const proto = {};
-
-    let value = 1;
-    Object.defineProperty(proto, 'test', {
-      get() {
-        return value;
-      },
-      set(v) {
-        value = v;
-      },
-    });
-
-    copyProperties(obj, proto);
-
-    expect(obj).to.have.ownPropertyDescriptor('test');
-    expect(obj.test).to.equal(1);
-    obj.test = 2;
-    expect(obj.test).to.equal(2);
-    expect(value).to.equal(2);
-  });
-
-  it('does not override already defined property', () => {
-    const obj = {test: 1};
-    const proto = {test: 2};
-
-    copyProperties(obj, proto);
-
-    expect(obj.test).to.equal(1);
-  });
-
-  it('copies own properties from proto.__proto__ object', () => {
-    const obj = {};
-    const proto = Object.create({test: 1});
-
-    copyProperties(obj, proto);
-
-    expect(obj).to.have.ownPropertyDescriptor('test', {
-      value: 1,
-      configurable: true,
-      enumerable: true,
-      writable: true,
-    });
-  });
-
-  it('copies own descriptor from proto object', () => {
-    const obj = {};
-    const proto = Object.create(
-      {},
-      {
-        test: {value: 1},
-      }
-    );
-
-    copyProperties(obj, proto);
-
-    expect(obj).to.have.ownPropertyDescriptor('test', {
-      value: 1,
-      configurable: false,
-      enumerable: false,
-      writable: false,
-    });
-  });
-
-  it('copies own getter/setter from proto object', () => {
-    let value = 1;
-    const obj = {};
-    const proto = Object.create(
-      {},
-      {
-        test: {
-          get() {
-            return value;
-          },
-          set(v) {
-            value = v;
-          },
-        },
-      }
-    );
-
-    copyProperties(obj, proto);
-
-    expect(obj).to.have.ownPropertyDescriptor('test');
-    expect(obj.test).to.equal(1);
-    obj.test = 2;
-    expect(obj.test).to.equal(2);
-    expect(value).to.equal(2);
-  });
-
-  it('does not override already defined property', () => {
-    const obj = {test: 1};
-    const proto = Object.create({test: 2});
-
-    copyProperties(obj, proto);
-
-    expect(obj.test).to.equal(1);
-  });
-
-  it('does not override closer property with __proto__ property', () => {
-    const obj = {};
-    const proto = Object.create(
-      {test: 2},
-      {
-        test: {value: 1},
-      }
-    );
-
-    copyProperties(obj, proto);
-
-    expect(obj.test).to.equal(1);
-  });
-});
diff --git a/test/unit/test-polyfill-document-contains.js b/test/unit/test-polyfill-document-contains.js
deleted file mode 100644
index a3b1a69339ac3..0000000000000
--- a/test/unit/test-polyfill-document-contains.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {install} from '../../src/polyfills/document-contains';
-
-describe('HTMLDocument.contains', () => {
-  let fakeWinWithContains;
-  let fakeWinWithoutContains;
-  let nativeContains;
-  let polyfillContains;
-  let connectedElement;
-  let connectedChild;
-  let disconnectedElement;
-  let disconnectedChild;
-
-  beforeEach(() => {
-    fakeWinWithContains = {
-      HTMLDocument: class {
-        contains() {}
-      },
-      Object: window.Object,
-    };
-    nativeContains = fakeWinWithContains.HTMLDocument.prototype.contains;
-
-    fakeWinWithoutContains = {
-      HTMLDocument: class {},
-      Object: window.Object,
-    };
-    install(fakeWinWithoutContains);
-    polyfillContains = fakeWinWithoutContains.HTMLDocument.prototype.contains;
-
-    connectedElement = document.createElement('div');
-    connectedChild = document.createElement('div');
-    disconnectedElement = document.createElement('div');
-    disconnectedChild = document.createElement('div');
-
-    connectedElement.appendChild(connectedChild);
-    disconnectedElement.appendChild(disconnectedChild);
-    document.body.appendChild(connectedElement);
-  });
-
-  afterEach(() => {
-    if (connectedElement.parentNode) {
-      connectedElement.parentNode.removeChild(connectedElement);
-    }
-  });
-
-  it('should NOT override an existing method', () => {
-    install(fakeWinWithContains);
-    expect(fakeWinWithContains.HTMLDocument.prototype.contains).to.equal(
-      nativeContains
-    );
-  });
-
-  it('should override a existing method', () => {
-    expect(polyfillContains).to.be.ok;
-    expect(polyfillContains).to.not.equal(nativeContains);
-  });
-
-  it('should polyfill document.contains API', () => {
-    expect(polyfillContains.call(document, connectedElement)).to.be.true;
-    expect(polyfillContains.call(document, connectedChild)).to.be.true;
-    expect(polyfillContains.call(document, disconnectedElement)).to.be.false;
-    expect(polyfillContains.call(document, disconnectedChild)).to.be.false;
-  });
-
-  it('should allow a null arg', () => {
-    expect(document.contains(null)).to.be.false;
-    expect(polyfillContains.call(document, null)).to.be.false;
-  });
-
-  it('should be inclusionary for documentElement', () => {
-    expect(document.contains(document.documentElement)).to.be.true;
-    expect(polyfillContains.call(document, document.documentElement)).to.be
-      .true;
-  });
-
-  it('should be inclusionary for document itself', () => {
-    expect(document.contains(document)).to.be.true;
-    expect(polyfillContains.call(document, document)).to.be.true;
-  });
-});
diff --git a/test/unit/test-polyfill-domtokenlist-toggle.js b/test/unit/test-polyfill-domtokenlist-toggle.js
deleted file mode 100644
index 5478c8af8af0d..0000000000000
--- a/test/unit/test-polyfill-domtokenlist-toggle.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {install} from '../../src/polyfills/domtokenlist';
-import {toArray} from '../../src/types';
-
-describes.fakeWin(
-  'DOMTokenList.toggle/add on non-IE',
-  {
-    win: {
-      navigator: {
-        userAgent: 'Chrome',
-      },
-    },
-  },
-  (env) => {
-    let originalToggle;
-    let originalAdd;
-    let element;
-
-    beforeEach(() => {
-      originalToggle = env.win.DOMTokenList.prototype.toggle;
-      originalAdd = env.win.DOMTokenList.prototype.add;
-
-      element = env.win.document.createElement('div');
-      env.win.document.body.appendChild(element);
-    });
-
-    afterEach(() => {
-      env.win.DOMTokenList.prototype.toggle = originalToggle;
-      env.win.DOMTokenList.prototype.add = originalAdd;
-      if (element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
-    });
-
-    it('should NOT override toggle in non-IE browsers', () => {
-      env.win.DOMTokenList = window.DOMTokenList;
-      install(env.win);
-      const newToggle = env.win.DOMTokenList.prototype.toggle;
-      expect(newToggle).to.equal(originalToggle);
-    });
-
-    it('should NOT override add in non-IE browsers', () => {
-      env.win.DOMTokenList = window.DOMTokenList;
-      install(env.win);
-      const newAdd = env.win.DOMTokenList.prototype.add;
-      expect(newAdd).to.equal(originalAdd);
-    });
-  }
-);
-
-describes.fakeWin(
-  'DOMTokenList.toggle/add On IE',
-  {
-    win: {
-      navigator: {
-        userAgent: 'MSIE',
-      },
-    },
-  },
-  (env) => {
-    let originalToggle;
-    let originalAdd;
-    let element;
-
-    beforeEach(() => {
-      originalToggle = env.win.DOMTokenList.prototype.toggle;
-      originalAdd = env.win.DOMTokenList.prototype.add;
-
-      element = env.win.document.createElement('div');
-      env.win.document.body.appendChild(element);
-    });
-
-    afterEach(() => {
-      env.win.DOMTokenList.prototype.toggle = originalToggle;
-      env.win.DOMTokenList.prototype.add = originalAdd;
-      if (element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
-    });
-
-    it('should polyfill DOMTokenList.toggle API', () => {
-      env.win.DOMTokenList = window.DOMTokenList;
-      install(env.win);
-      const polyfillToggle = env.win.DOMTokenList.prototype.toggle;
-
-      expect(polyfillToggle).to.be.ok;
-      expect(polyfillToggle).to.not.equal(originalToggle);
-
-      expect(toArray(element.classList)).to.not.contain('first');
-      expect(polyfillToggle.call(element.classList, 'first')).to.be.true;
-      expect(toArray(element.classList)).to.contain('first');
-      expect(polyfillToggle.call(element.classList, 'first')).to.be.false;
-      expect(toArray(element.classList)).to.not.contain('first');
-      expect(polyfillToggle.call(element.classList, 'first')).to.be.true;
-      expect(toArray(element.classList)).to.contain('first');
-      expect(polyfillToggle.call(element.classList, 'first', true)).to.be.true;
-      expect(toArray(element.classList)).to.contain('first');
-      expect(polyfillToggle.call(element.classList, 'first', true)).to.be.true;
-      expect(toArray(element.classList)).to.contain('first');
-      expect(polyfillToggle.call(element.classList, 'first', false)).to.be
-        .false;
-      expect(toArray(element.classList)).to.not.contain('first');
-      expect(polyfillToggle.call(element.classList, 'first', false)).to.be
-        .false;
-      expect(toArray(element.classList)).to.not.contain('first');
-      expect(polyfillToggle.call(element.classList, 'first', false)).to.be
-        .false;
-      expect(toArray(element.classList)).to.not.contain('first');
-    });
-
-    it('should polyfill DOMTokenList.add API', () => {
-      env.win.DOMTokenList = window.DOMTokenList;
-      install(env.win);
-      const polyfillAdd = env.win.DOMTokenList.prototype.add;
-
-      expect(polyfillAdd).to.be.ok;
-      expect(polyfillAdd).to.not.equal(originalToggle);
-
-      element.classList.add('foo');
-      expect(toArray(element.classList)).to.contain('foo');
-      element.classList.add('one', 'two', 'three');
-      expect(toArray(element.classList)).to.contain('foo');
-      expect(toArray(element.classList)).to.contain('one');
-      expect(toArray(element.classList)).to.contain('two');
-      expect(toArray(element.classList)).to.contain('three');
-    });
-  }
-);
diff --git a/test/unit/test-polyfill-math-sign.js b/test/unit/test-polyfill-math-sign.js
deleted file mode 100644
index d72ed67c7c0a5..0000000000000
--- a/test/unit/test-polyfill-math-sign.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {sign} from '../../src/polyfills/math-sign';
-
-describe('Math.sign', () => {
-  it('returns 1 for positive x', () => {
-    expect(sign(1)).to.equal(1);
-    expect(sign(10)).to.equal(1);
-    expect(sign(100)).to.equal(1);
-    expect(sign(Infinity)).to.equal(1);
-  });
-
-  it('returns -1 for negative x', () => {
-    expect(sign(-1)).to.equal(-1);
-    expect(sign(-10)).to.equal(-1);
-    expect(sign(-100)).to.equal(-1);
-    expect(sign(-Infinity)).to.equal(-1);
-  });
-
-  it('returns 0 for 0', () => {
-    expect(sign(0)).to.deep.equal(0);
-  });
-
-  it('returns -0 for -0', () => {
-    expect(sign(-0)).to.deep.equal(-0);
-  });
-
-  it('returns NaN for NaN', () => {
-    expect(sign(NaN)).to.deep.equal(NaN);
-  });
-
-  it('returns NaN for non-numbers', () => {
-    expect(sign({})).to.deep.equal(NaN);
-    expect(sign(function () {})).to.deep.equal(NaN);
-    expect(sign('test1')).to.deep.equal(NaN);
-    expect(sign('1test')).to.deep.equal(NaN);
-  });
-});
diff --git a/test/unit/test-polyfill-object-assign.js b/test/unit/test-polyfill-object-assign.js
deleted file mode 100644
index e300eecaa805b..0000000000000
--- a/test/unit/test-polyfill-object-assign.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {assign} from '../../src/polyfills/object-assign';
-
-describe('Object.assign', () => {
-  it('should throw an error if target is null or undefined', () => {
-    expect(() => assign(null, {a: 1})).to.throw(
-      /Cannot convert undefined or null to object/
-    );
-    expect(() => assign(undefined, {a: 1})).to.throw(
-      /Cannot convert undefined or null to object/
-    );
-  });
-
-  it('should ignore null or undefined sources', () => {
-    expect(assign({}, null, undefined)).to.deep.equal({});
-    expect(assign({a: 1}, null, undefined)).to.deep.equal({a: 1});
-  });
-
-  it('should copy and override keys from source to target', () => {
-    expect(assign({a: 1}, {a: 2, b: 3})).to.deep.equal({a: 2, b: 3});
-    expect(assign({a: 1}, {b: 3})).to.deep.equal({a: 1, b: 3});
-    expect(assign({a: 1}, {b: 3}, {a: 2}, {a: 4})).to.deep.equal({a: 4, b: 3});
-
-    const target = {a: 1, d: 3};
-    const source = {a: 2, c: 5};
-    assign(target, source);
-    expect(target).to.deep.equal({a: 2, c: 5, d: 3});
-    expect(source).to.deep.equal({a: 2, c: 5});
-  });
-});
diff --git a/test/unit/test-polyfill-object-values.js b/test/unit/test-polyfill-object-values.js
deleted file mode 100644
index b184f0ca5a736..0000000000000
--- a/test/unit/test-polyfill-object-values.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright 2018 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.
- */
-
-import {values} from '../../src/polyfills/object-values';
-
-describe('Object.values', () => {
-  it('should disallow null and undefined', () => {
-    expect(() => values(null)).to.throw();
-    expect(() => values(undefined)).to.throw();
-  });
-
-  it('should allow primitives', () => {
-    expect(values(1)).to.deep.equal([]);
-    expect(values('A')).to.deep.equal(['A']);
-    expect(values(true)).to.deep.equal([]);
-    expect(values(false)).to.deep.equal([]);
-  });
-
-  it('should return values of objects', () => {
-    expect(values({a: 1, b: 2, c: 1})).to.deep.equal([1, 2, 1]);
-  });
-});
diff --git a/test/unit/test-position-observer.js b/test/unit/test-position-observer.js
index 5a4b010424109..2ee344332b903 100644
--- a/test/unit/test-position-observer.js
+++ b/test/unit/test-position-observer.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {PositionObserver} from '../../src/service/position-observer/position-observer-impl';
 import {PositionObserverFidelity} from '../../src/service/position-observer/position-observer-worker';
 import {Services} from '../../src/services';
-import {layoutRectLtwh} from '../../src/layout-rect';
+import {layoutRectLtwh} from '../../src/core/math/layout-rect';
 import {macroTask} from '../../testing/yield';
 import {setStyles} from '../../src/style';
 
@@ -36,7 +36,7 @@ describes.realWin('PositionObserver', {amp: 1}, (env) => {
     let elem1;
     let clock;
     beforeEach(() => {
-      clock = lolex.install({target: ampdoc.win});
+      clock = fakeTimers.withGlobal(ampdoc.win).install();
       posOb = new PositionObserver(ampdoc);
       env.sandbox.stub(posOb.vsync_, 'measure').callsFake((callback) => {
         win.setTimeout(callback, 1);
diff --git a/test/unit/test-preconnect.js b/test/unit/test-preconnect.js
index 05161616f50e2..1f4573ad07dfc 100644
--- a/test/unit/test-preconnect.js
+++ b/test/unit/test-preconnect.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {Services} from '../../src/services';
 import {createIframePromise} from '../../testing/iframe';
 import {
@@ -40,7 +40,7 @@ describes.sandboxed('preconnect', {}, (env) => {
 
   function getPreconnectIframe(detectFeatures = false) {
     return createIframePromise().then((iframe) => {
-      iframeClock = lolex.install({target: iframe.win});
+      iframeClock = fakeTimers.withGlobal(iframe.win).install();
       if (detectFeatures) {
         setPreconnectFeaturesForTesting(null);
       } else {
@@ -53,7 +53,7 @@ describes.sandboxed('preconnect', {}, (env) => {
       const platform = {
         isSafari: () => !!isSafari,
       };
-      iframe.win.__AMP_SERVICES['platform'] = {obj: platform};
+      iframe.win.__AMP_SERVICES['platform'] = {obj: platform, ctor: Object};
       sandbox.stub(Services, 'platformFor').returns(platform);
 
       installPreconnectService(iframe.win);
diff --git a/test/unit/test-pull-to-refresh.js b/test/unit/test-pull-to-refresh.js
index 5174a96492822..e8a8da88e54f3 100644
--- a/test/unit/test-pull-to-refresh.js
+++ b/test/unit/test-pull-to-refresh.js
@@ -16,7 +16,7 @@
 
 import {PullToRefreshBlocker} from '../../src/pull-to-refresh';
 
-describe('PullToRefreshBlocker', () => {
+describes.sandboxed('PullToRefreshBlocker', {}, (env) => {
   let eventListeners;
   let viewportMock;
   let blocker;
@@ -37,7 +37,7 @@ describe('PullToRefreshBlocker', () => {
     const viewportApi = {
       getScrollTop: () => 0,
     };
-    viewportMock = window.sandbox.mock(viewportApi);
+    viewportMock = env.sandbox.mock(viewportApi);
 
     blocker = new PullToRefreshBlocker(documentApi, viewportApi);
   });
@@ -120,7 +120,7 @@ describe('PullToRefreshBlocker', () => {
     sendEvent({type: 'touchstart', touches: [{clientY: 111}]});
     expect(blocker.tracking_).to.equal(true);
 
-    const preventDefault = window.sandbox.spy();
+    const preventDefault = env.sandbox.spy();
     sendEvent({type: 'touchmove', touches: [{clientY: 112}]}, preventDefault);
     expect(blocker.tracking_).to.equal(false);
     expect(preventDefault).to.be.calledOnce;
@@ -135,7 +135,7 @@ describe('PullToRefreshBlocker', () => {
     sendEvent({type: 'touchstart', touches: [{clientY: 111}]});
     expect(blocker.tracking_).to.equal(true);
 
-    const preventDefault = window.sandbox.spy();
+    const preventDefault = env.sandbox.spy();
     sendEvent({type: 'touchmove', touches: [{clientY: 100}]}, preventDefault);
     expect(blocker.tracking_).to.equal(false);
     expect(preventDefault).to.have.not.been.called;
@@ -150,7 +150,7 @@ describe('PullToRefreshBlocker', () => {
     sendEvent({type: 'touchstart', touches: [{clientY: 111}]});
     expect(blocker.tracking_).to.equal(true);
 
-    const preventDefault = window.sandbox.spy();
+    const preventDefault = env.sandbox.spy();
     sendEvent({type: 'touchmove', touches: [{clientY: 111}]}, preventDefault);
     expect(blocker.tracking_).to.equal(true);
     expect(preventDefault).to.have.not.been.called;
diff --git a/test/unit/test-purifier.js b/test/unit/test-purifier.js
index b25feb2dc4d47..81d546c562836 100644
--- a/test/unit/test-purifier.js
+++ b/test/unit/test-purifier.js
@@ -17,16 +17,16 @@
 import * as urlRewrite from '../../src/url-rewrite';
 import {Purifier} from '../../src/purifier/purifier';
 
-describe
+describes.sandboxed
   .configure()
   .skipFirefox()
-  .run('DOMPurify-based', () => {
+  .run('DOMPurify-based', {}, (env) => {
     let purify;
     let purifyTripleMustache;
     let rewriteAttributeValueSpy;
 
     beforeEach(() => {
-      rewriteAttributeValueSpy = window.sandbox.spy(
+      rewriteAttributeValueSpy = env.sandbox.spy(
         urlRewrite,
         'rewriteAttributeValue'
       );
@@ -519,6 +519,15 @@ describe
         );
       });
 
+      it('should allowlist h1, h2, h3 and amp-img elements', () => {
+        const html =
+          '<h1>Heading 1</h1>' +
+          '<h2>Heading 2</h2>' +
+          '<h3>Heading 3</h3>' +
+          '<amp-img></amp-img>';
+        expect(purifyTripleMustache(html)).to.be.equal(html);
+      });
+
       it('should allowlist table related elements and anchor tags', () => {
         const html =
           '<table class="valid-class">' +
@@ -535,6 +544,24 @@ describe
         expect(purifyTripleMustache(html)).to.be.equal(html);
       });
 
+      it('should allowlist container elements', () => {
+        const html =
+          '<article>Article</article>' +
+          '<aside></aside>' +
+          '<blockquote>A quote</blockquote>' +
+          '<details></details>' +
+          '<figcaption></figcaption>' +
+          '<figure></figure>' +
+          '<footer>Footer</footer>' +
+          '<header></header>' +
+          '<main class="content"></main>' +
+          '<nav></nav>' +
+          '<pre></pre>' +
+          '<section id="sec"></section>' +
+          '<summary></summary>';
+        expect(purifyTripleMustache(html)).to.be.equal(html);
+      });
+
       it('should sanitize tags, removing unsafe attributes', () => {
         const html =
           '<a href="javascript:alert(\'XSS\')">test</a>' +
@@ -739,10 +766,10 @@ describe
     });
   });
 
-describe
+describes.sandboxed
   .configure()
   .skipFirefox()
-  .run('DOMPurify-based, custom html', () => {
+  .run('DOMPurify-based, custom html', {}, () => {
     let html;
     let purify;
 
@@ -841,7 +868,7 @@ describe
     });
   });
 
-describe('validateAttributeChange', () => {
+describes.sandboxed('validateAttributeChange', {}, () => {
   let purifier;
   let vac;
 
@@ -906,7 +933,7 @@ describe('validateAttributeChange', () => {
   });
 });
 
-describe('getAllowedTags', () => {
+describes.sandboxed('getAllowedTags', {}, () => {
   let allowedTags;
 
   beforeEach(() => {
diff --git a/test/unit/test-real-time-config.js b/test/unit/test-real-time-config.js
new file mode 100644
index 0000000000000..bfd3952e42c84
--- /dev/null
+++ b/test/unit/test-real-time-config.js
@@ -0,0 +1,1044 @@
+/**
+ * Copyright 2016 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.
+ */
+
+// Need the following side-effect import because in actual production code,
+// Fast Fetch impls are always loaded via an AmpAd tag, which means AmpAd is
+// always available for them. However, when we test an impl in isolation,
+// AmpAd is not loaded already, so we need to load it separately.
+import {CONSENT_POLICY_STATE} from '../../src/core/constants/consent-state';
+import {
+  RTC_ERROR_ENUM,
+  RealTimeConfigManager,
+} from '../../src/service/real-time-config/real-time-config-impl';
+import {Services} from '../../src/services';
+import {Xhr} from '../../src/service/xhr-impl';
+import {cancellation} from '../../src/error-reporting';
+import {createElementWithAttributes} from '../../src/dom';
+import {dev, user} from '../../src/log';
+import {isFiniteNumber} from '../../src/core/types';
+
+describes.realWin('real-time-config service', {amp: true}, (env) => {
+  let element;
+  let fetchJsonStub;
+  let getCalloutParam_, execute_, validateRtcConfig_;
+  let truncUrl_, inflateAndSendRtc_, sendErrorMessage;
+  let rtc;
+
+  beforeEach(() => {
+    // Ensures window location == AMP cache passes.
+    env.win.__AMP_MODE.test = true;
+
+    const doc = env.win.document;
+    doc.win = env.win;
+    element = createElementWithAttributes(env.win.document, 'amp-ad', {
+      'width': '200',
+      'height': '50',
+      'type': 'doubleclick',
+      'layout': 'fixed',
+    });
+    doc.body.appendChild(element);
+    fetchJsonStub = env.sandbox.stub(Xhr.prototype, 'fetchJson');
+
+    // RealTimeConfigManager uses the UrlReplacements service scoped to the A4A
+    // (FIE), but for testing stub in the parent service for simplicity.
+    const urlReplacements = Services.urlReplacementsForDoc(element);
+    env.sandbox
+      .stub(Services, 'urlReplacementsForDoc')
+      .withArgs(doc)
+      .returns(urlReplacements);
+
+    rtc = new RealTimeConfigManager(doc);
+    execute_ = rtc.execute.bind(rtc);
+    getCalloutParam_ = rtc.getCalloutParam_.bind(rtc);
+    validateRtcConfig_ = rtc.validateRtcConfig_.bind(rtc);
+    truncUrl_ = rtc.truncUrl_.bind(rtc);
+    inflateAndSendRtc_ = rtc.inflateAndSendRtc_.bind(rtc);
+    sendErrorMessage = rtc.sendErrorMessage.bind(rtc);
+  });
+
+  function setFetchJsonStubBehavior(params, response, isString, shouldFail) {
+    if (shouldFail) {
+      fetchJsonStub.withArgs(params).returns(Promise.reject('FAIL'));
+    } else {
+      const textFunction = () => {
+        return !isString
+          ? Promise.resolve(JSON.stringify(response))
+          : Promise.resolve(response);
+      };
+      fetchJsonStub.withArgs(params).returns(
+        Promise.resolve({
+          status: 200,
+          text: textFunction,
+        })
+      );
+    }
+  }
+
+  function setRtcConfig(rtcConfig) {
+    element.setAttribute('rtc-config', JSON.stringify(rtcConfig));
+  }
+
+  describe('#truncUrl_', () => {
+    it('truncates URL', () => {
+      let url = 'https://www.example.biz/?';
+      for (let i = 0; i < 1000; i++) {
+        url += '&23456=8901234567';
+      }
+      expect(url.length).to.be.above(16384);
+      url = truncUrl_(url);
+      expect(url.length).to.be.at.most(16384);
+      expect(url).to.contain('&__trunc__=1');
+    });
+  });
+
+  describe('#getCalloutParam_', () => {
+    it('should convert url to callout param when parseable', () => {
+      const url = 'https://www.example.test/endpoint.php?unincluded';
+      const ard = getCalloutParam_(url);
+      expect(ard).to.equal('www.example.test/endpoint.php');
+    });
+
+    it('should convert & trunc url when parseable', () => {
+      const url =
+        'https://www.example.test/thisIsTooMany' +
+        'Characters1234567891011121314.php';
+      const ard = getCalloutParam_(url);
+      expect(ard).to.equal(
+        'www.example.test/thisIsTooManyCharacters1234567891'
+      );
+    });
+  });
+
+  describe('#execute_', () => {
+    function executeTest(args) {
+      const {
+        calloutCount,
+        expectedCalloutUrls,
+        expectedRtcArray,
+        failXhr,
+        responseIsString,
+        rtcCalloutResponses,
+        timeoutMillis,
+        urls,
+        vendors,
+      } = args;
+      setRtcConfig({urls, vendors, timeoutMillis});
+      (expectedCalloutUrls || []).forEach((expectedUrl, i) => {
+        setFetchJsonStubBehavior(
+          expectedUrl,
+          rtcCalloutResponses[i],
+          responseIsString,
+          failXhr
+        );
+      });
+      const customMacros = args['customMacros'] || {};
+      const rtcResponsePromiseArray = execute_(
+        element,
+        customMacros,
+        /* consentState */ undefined,
+        /* consentString */ undefined,
+        /* consentMetadata */ undefined,
+        () => {}
+      );
+      return rtcResponsePromiseArray.then((rtcResponseArray) => {
+        expect(rtcResponseArray.length).to.equal(expectedRtcArray.length);
+        expect(fetchJsonStub.callCount).to.equal(calloutCount);
+        (expectedCalloutUrls || []).forEach((url) => {
+          expect(fetchJsonStub).to.have.been.calledWith(url);
+        });
+        rtcResponseArray.forEach((rtcResponse, i) => {
+          expect(rtcResponse.response).to.deep.equal(
+            expectedRtcArray[i].response
+          );
+          expect(rtcResponse.callout).to.equal(expectedRtcArray[i].callout);
+          expect(rtcResponse.error).to.equal(expectedRtcArray[i].error);
+          expect(Object.keys(rtcResponse).sort()).to.deep.equal(
+            Object.keys(expectedRtcArray[i]).sort()
+          );
+          expect(isFiniteNumber(rtcResponse.rtcTime)).to.be.true;
+        });
+      });
+    }
+
+    const urlMacros = [
+      'slot_id=SLOT_ID',
+      'page_id=PAGE_ID',
+      'adx=ADX',
+      'ady=ADY',
+    ];
+
+    function generateUrls(numUrls, numMacroUrls) {
+      const urls = [];
+      for (let i = 0; i < numUrls; i++) {
+        urls.push(`https://www.${i}.com/`);
+      }
+      for (let i = 0; i < numMacroUrls; i++) {
+        urls.push(
+          `https://www.${i + numUrls}.com/?${urlMacros
+            .slice(0, i + 1)
+            .join('&')}`
+        );
+      }
+      return urls;
+    }
+
+    function rtcEntry(response, url, error, isVendor) {
+      // If this is an entry for a vendor, then the callout is just
+      // the vendor name passed in to url here.
+      const callout = !!isVendor ? url : getCalloutParam_(url);
+      return response
+        ? {response, callout, rtcTime: 10}
+        : {callout, error, rtcTime: 10};
+    }
+
+    function generateCalloutResponses(numGoodResponses) {
+      const rtcCalloutResponses = [];
+      let response;
+      for (let i = 0; i < numGoodResponses; i++) {
+        response = {};
+        response[`response${i}`] = {};
+        response[`response${i}`][`foo${i}`] = [`a${i}`, `b${i}`, `c${i}`];
+        rtcCalloutResponses.push(response);
+      }
+      return rtcCalloutResponses;
+    }
+
+    it('should send RTC callouts for all specified URLS without macros', () => {
+      const calloutCount = 5;
+      const urls = generateUrls(5);
+      const rtcCalloutResponses = [
+        {'response1': {'fooArray': ['foo']}},
+        {'response2': {'test': 'test2'}},
+        {'response3': {'apple': 'banana'}},
+        {
+          'response4': {
+            'animalArray': ['cat', 'dog'],
+            'foodObject': {'apple': true, 'car': false},
+          },
+        },
+        {'response5': [1, 2, 3]},
+      ];
+      const expectedRtcArray = [];
+      urls.forEach((url, i) => {
+        expectedRtcArray.push({
+          callout: getCalloutParam_(url),
+          rtcTime: 10,
+          response: rtcCalloutResponses[i],
+        });
+      });
+      return executeTest({
+        urls,
+        inflatedUrls: urls,
+        rtcCalloutResponses,
+        calloutCount,
+        expectedCalloutUrls: urls,
+        expectedRtcArray,
+      });
+    });
+
+    it('should send only 5 RTC callouts for all URLS without macros', () => {
+      const urls = generateUrls(7);
+      const expectedCalloutUrls = generateUrls(5);
+      const rtcCalloutResponses = generateCalloutResponses(7);
+      const calloutCount = 5;
+      const expectedRtcArray = [];
+      for (let i = 0; i < 5; i++) {
+        expectedRtcArray.push(rtcEntry(rtcCalloutResponses[i], urls[i]));
+      }
+      expectedRtcArray.push(
+        rtcEntry(null, urls[5], RTC_ERROR_ENUM.MAX_CALLOUTS_EXCEEDED)
+      );
+      expectedRtcArray.push(
+        rtcEntry(null, urls[6], RTC_ERROR_ENUM.MAX_CALLOUTS_EXCEEDED)
+      );
+      return executeTest({
+        urls,
+        inflatedUrls: urls,
+        rtcCalloutResponses,
+        calloutCount,
+        expectedCalloutUrls,
+        expectedRtcArray,
+      });
+    });
+
+    it('should send RTC callouts to inflated publisher URLs', () => {
+      const urls = generateUrls(1, 2);
+      const inflatedUrls = [
+        'https://www.0.com/',
+        'https://www.1.com/?slot_id=1',
+        'https://www.2.com/?slot_id=1&page_id=2',
+      ];
+      const rtcCalloutResponses = generateCalloutResponses(3);
+      const customMacros = {
+        SLOT_ID: 1,
+        PAGE_ID: () => 2,
+        FOO_ID: () => 3,
+      };
+      const expectedRtcArray = [];
+      rtcCalloutResponses.forEach((rtcResponse, i) => {
+        expectedRtcArray.push(rtcEntry(rtcResponse, inflatedUrls[i]));
+      });
+      const calloutCount = 3;
+      return executeTest({
+        urls,
+        customMacros,
+        inflatedUrls,
+        rtcCalloutResponses,
+        calloutCount,
+        expectedCalloutUrls: inflatedUrls,
+        expectedRtcArray,
+      });
+    });
+
+    it('should fetch RTC from amp-script URIs', async () => {
+      const ampScriptFetch = env.sandbox.stub();
+      ampScriptFetch.returns(Promise.resolve({targeting: ['sports']}));
+      env.sandbox
+        .stub(Services, 'scriptForDocOrNull')
+        .returns(Promise.resolve({fetch: ampScriptFetch}));
+
+      const urls = ['amp-script:scriptId.functionName'];
+      setRtcConfig({urls, vendors: {}, timeoutMillis: 500});
+      const rtcResponse = await execute_(
+        element,
+        /* customMacros */ {},
+        /* consentState */ undefined,
+        /* consentString */ undefined,
+        /* consentMetadata */ undefined,
+        () => {}
+      );
+      expect(ampScriptFetch).calledWithExactly(
+        'amp-script:scriptId.functionName'
+      );
+      expect(rtcResponse[0].response).deep.equal({targeting: ['sports']});
+    });
+
+    it('should send RTC callouts to inflated vendor URLs', () => {
+      const vendors = {
+        'fAkeVeNdOR': {SLOT_ID: 1, PAGE_ID: 2},
+      };
+      const inflatedUrls = [
+        'https://localhost:8000/examples/rtcE1.json?slot_id=1&page_id=3&foo_id=4',
+      ];
+      const rtcCalloutResponses = [{'response1': {'fooArray': ['foo']}}];
+      const customMacros = {
+        PAGE_ID: () => 3,
+        FOO_ID: () => 4,
+      };
+      const calloutCount = 1;
+      const expectedRtcArray = [];
+      expectedRtcArray.push(
+        rtcEntry(
+          rtcCalloutResponses[0],
+          Object.keys(vendors)[0].toLowerCase(),
+          undefined,
+          true
+        )
+      );
+      return executeTest({
+        vendors,
+        customMacros,
+        inflatedUrls,
+        rtcCalloutResponses,
+        calloutCount,
+        expectedCalloutUrls: inflatedUrls,
+        expectedRtcArray,
+      });
+    });
+    it('should send callouts to vendor URLs with object/array macros', () => {
+      const vendors = {
+        'fAkeVeNdOR': {
+          SLOT_ID: {'key': 'value'},
+          PAGE_ID: [1, 2, 3],
+          FOO_ID: 'String',
+        },
+      };
+      const inflatedUrls = [
+        'https://localhost:8000/examples/rtcE1.json?slot_id=%7B%22key%22%3A%22' +
+          'value%22%7D&page_id=%5B1%2C2%2C3%5D&foo_id=String',
+      ];
+      const rtcCalloutResponses = [{'response1': {'fooArray': ['foo']}}];
+      const calloutCount = 1;
+      const expectedRtcArray = [];
+      expectedRtcArray.push(
+        rtcEntry(
+          rtcCalloutResponses[0],
+          Object.keys(vendors)[0].toLowerCase(),
+          undefined,
+          true
+        )
+      );
+      return executeTest({
+        vendors,
+        inflatedUrls,
+        rtcCalloutResponses,
+        calloutCount,
+        expectedCalloutUrls: inflatedUrls,
+        expectedRtcArray,
+      });
+    });
+    it('should send RTC callouts to inflated publisher and vendor URLs', () => {
+      const urls = generateUrls(2, 2);
+      const vendors = {
+        'fAkeVeNdOR': {SLOT_ID: 0, PAGE_ID: 1},
+      };
+      const inflatedUrls = [
+        'https://www.0.com/',
+        'https://www.1.com/',
+        'https://www.2.com/?slot_id=1',
+        'https://www.3.com/?slot_id=1&page_id=2',
+        'https://localhost:8000/examples/rtcE1.json?slot_id=1&page_id=2&foo_id=3',
+      ];
+      const rtcCalloutResponses = generateCalloutResponses(5);
+      const customMacros = {
+        SLOT_ID: 1,
+        PAGE_ID: () => 2,
+        FOO_ID: () => 3,
+      };
+      const expectedRtcArray = [];
+      for (let i = 0; i < 4; i++) {
+        expectedRtcArray.push(
+          rtcEntry(rtcCalloutResponses[i], inflatedUrls[i])
+        );
+      }
+      expectedRtcArray.push(
+        rtcEntry(
+          rtcCalloutResponses[4],
+          Object.keys(vendors)[0].toLowerCase(),
+          undefined,
+          true
+        )
+      );
+      const calloutCount = 5;
+      return executeTest({
+        urls,
+        vendors,
+        customMacros,
+        inflatedUrls,
+        rtcCalloutResponses,
+        calloutCount,
+        expectedCalloutUrls: inflatedUrls,
+        expectedRtcArray,
+      });
+    });
+    it('should ignore bad macros for vendor urls', () => {
+      const vendors = {
+        'fAkeVeNdOR': {'slot_id=SLOT_ID': 0, PAGE_ID: 1},
+      };
+      const inflatedUrls = [
+        'https://localhost:8000/examples/rtcE1.json?slot_id=SLOT_ID&page_id=1&foo_id=FOO_ID',
+      ];
+      const rtcCalloutResponses = generateCalloutResponses(1);
+      const expectedRtcArray = [];
+      for (let i = 0; i < 1; i++) {
+        expectedRtcArray.push(
+          rtcEntry(
+            rtcCalloutResponses[i],
+            Object.keys(vendors)[0].toLowerCase(),
+            undefined,
+            true
+          )
+        );
+      }
+      const calloutCount = 1;
+      env.sandbox.stub(user(), 'error').callsFake(() => {});
+      return executeTest({
+        vendors,
+        inflatedUrls,
+        rtcCalloutResponses,
+        calloutCount,
+        expectedCalloutUrls: inflatedUrls,
+        expectedRtcArray,
+      });
+    });
+
+    it('should favor publisher URLs over vendor URLs', () => {
+      const urls = generateUrls(3, 2);
+      const vendors = {
+        'fAkeVeNdOR': {SLOT_ID: 0, PAGE_ID: 1},
+      };
+      const inflatedUrls = [
+        'https://www.0.com/',
+        'https://www.1.com/',
+        'https://www.2.com/',
+        'https://www.3.com/?slot_id=1',
+        'https://www.4.com/?slot_id=1&page_id=2',
+      ];
+      const rtcCalloutResponses = generateCalloutResponses(6);
+      const customMacros = {
+        SLOT_ID: 1,
+        PAGE_ID: () => 2,
+        FOO_ID: () => 3,
+      };
+      const expectedRtcArray = [];
+      for (let i = 0; i < 5; i++) {
+        expectedRtcArray.push(
+          rtcEntry(rtcCalloutResponses[i], inflatedUrls[i])
+        );
+      }
+      expectedRtcArray.push(
+        rtcEntry(
+          null,
+          Object.keys(vendors)[0].toLowerCase(),
+          RTC_ERROR_ENUM.MAX_CALLOUTS_EXCEEDED,
+          true
+        )
+      );
+      const calloutCount = 5;
+      return executeTest({
+        urls,
+        vendors,
+        customMacros,
+        rtcCalloutResponses,
+        calloutCount,
+        expectedCalloutUrls: inflatedUrls,
+        expectedRtcArray,
+      });
+    });
+    it('should not send more than one RTC callout to the same url', () => {
+      const urls = ['https://www.0.com/', 'https://www.0.com/'];
+      const rtcCalloutResponses = generateCalloutResponses(1);
+      const calloutCount = 1;
+      const expectedCalloutUrls = ['https://www.0.com/'];
+      const expectedRtcArray = [
+        {
+          response: rtcCalloutResponses[0],
+          callout: getCalloutParam_(urls[0]),
+          rtcTime: 10,
+        },
+        {
+          callout: getCalloutParam_(urls[1]),
+          error: RTC_ERROR_ENUM.DUPLICATE_URL,
+          rtcTime: 10,
+        },
+      ];
+      return executeTest({
+        urls,
+        inflatedUrls: urls,
+        rtcCalloutResponses,
+        calloutCount,
+        expectedCalloutUrls,
+        expectedRtcArray,
+      });
+    });
+
+    it('should not send an RTC callout to an insecure url', () => {
+      const urls = [
+        'https://www.1.com/',
+        'https://www.2.com',
+        'http://www.insecure.biz/',
+      ];
+      const rtcCalloutResponses = [
+        {'response1': {'fooArray': ['foo']}},
+        {'response2': {'insecure': ['virus']}},
+      ];
+      const calloutCount = 2;
+      const expectedCalloutUrls = ['https://www.1.com/', 'https://www.2.com'];
+      const expectedRtcArray = [
+        {
+          response: rtcCalloutResponses[0],
+          callout: getCalloutParam_(urls[0]),
+          rtcTime: 10,
+        },
+        {
+          response: rtcCalloutResponses[1],
+          callout: getCalloutParam_(urls[1]),
+          rtcTime: 10,
+        },
+        {
+          callout: getCalloutParam_(urls[2]),
+          error: RTC_ERROR_ENUM.INSECURE_URL,
+          rtcTime: 10,
+        },
+      ];
+      return executeTest({
+        urls,
+        inflatedUrls: urls,
+        rtcCalloutResponses,
+        calloutCount,
+        expectedCalloutUrls,
+        expectedRtcArray,
+      });
+    });
+    it('should not send RTC callout to unknown vendor', () => {
+      const vendors = {
+        'unknownvendor': {SLOT_ID: 1, PAGE_ID: 2},
+      };
+      const calloutCount = 0;
+      const expectedRtcArray = [];
+      expectedRtcArray.push(
+        rtcEntry(
+          null,
+          Object.keys(vendors)[0].toLowerCase(),
+          RTC_ERROR_ENUM.UNKNOWN_VENDOR,
+          true
+        )
+      );
+      return executeTest({vendors, calloutCount, expectedRtcArray});
+    });
+    it('should handle bad JSON response', () => {
+      const urls = generateUrls(1);
+      const rtcCalloutResponses = ['{foo:bar'];
+      const expectedRtcArray = [];
+      rtcCalloutResponses.forEach((rtcResponse, i) => {
+        expectedRtcArray.push(
+          rtcEntry(null, urls[i], RTC_ERROR_ENUM.MALFORMED_JSON_RESPONSE)
+        );
+      });
+      const calloutCount = 1;
+      return executeTest({
+        urls,
+        inflatedUrls: urls,
+        rtcCalloutResponses,
+        calloutCount,
+        expectedCalloutUrls: urls,
+        expectedRtcArray,
+        responseIsString: true,
+      });
+    });
+    it('should catch errors due to network failure', () => {
+      const urls = generateUrls(1);
+      const rtcCalloutResponses = generateCalloutResponses(1);
+      const expectedRtcArray = [];
+      rtcCalloutResponses.forEach((rtcResponse, i) => {
+        expectedRtcArray.push(
+          rtcEntry(null, urls[i], RTC_ERROR_ENUM.NETWORK_FAILURE)
+        );
+      });
+      const calloutCount = 1;
+      return executeTest({
+        urls,
+        inflatedUrls: urls,
+        rtcCalloutResponses,
+        calloutCount,
+        expectedCalloutUrls: urls,
+        expectedRtcArray,
+        failXhr: true,
+      });
+    });
+    for (const consentState in CONSENT_POLICY_STATE) {
+      it(`should handle consentState ${consentState}`, () => {
+        setRtcConfig({urls: ['https://foo.com']});
+        const rtcResult = execute_(
+          element,
+          {},
+          CONSENT_POLICY_STATE[consentState],
+          /* consentString */ undefined,
+          /* consentMetadata */ undefined,
+          () => {}
+        );
+        switch (CONSENT_POLICY_STATE[consentState]) {
+          case CONSENT_POLICY_STATE.SUFFICIENT:
+          case CONSENT_POLICY_STATE.UNKNOWN_NOT_REQUIRED:
+            expect(rtcResult).to.be.ok;
+            return rtcResult.then(() => expect(fetchJsonStub).to.be.calledOnce);
+          case CONSENT_POLICY_STATE.UNKNOWN:
+          case CONSENT_POLICY_STATE.INSUFFICIENT:
+            return rtcResult.then((result) => {
+              expect(result).to.deep.equal([]);
+              expect(fetchJsonStub).to.not.be.called;
+            });
+            break;
+          default:
+            throw new Error(`unknown consent state ${consentState}`);
+        }
+      });
+    }
+  });
+
+  describe('#validateRtcConfig', () => {
+    let validatedRtcConfig;
+    afterEach(() => {
+      element.removeAttribute('rtc-config');
+    });
+
+    it('should return parsed rtcConfig for valid rtcConfig', () => {
+      const rtcConfig = {
+        'vendors': {
+          'fakeVendor': {'SLOT_ID': '1', 'PAGE_ID': '1'},
+          'nonexistent-vendor': {'SLOT_ID': '1'},
+          'fakeVendor2': {'SLOT_ID': '1'},
+        },
+        'urls': [
+          'https://localhost:4443/posts?slot_id=SLOT_ID',
+          'https://broken.zzzzzzz',
+        ],
+        'timeoutMillis': 500,
+      };
+      setRtcConfig(rtcConfig);
+      validateRtcConfig_(element);
+      expect(rtc.rtcConfig_).to.be.ok;
+      expect(rtc.rtcConfig_).to.deep.equal(rtcConfig);
+    });
+
+    it('should allow timeout of 0', () => {
+      const rtcConfig = {
+        'vendors': {
+          'fakeVendor': {'SLOT_ID': '1', 'PAGE_ID': '1'},
+          'nonexistent-vendor': {'SLOT_ID': '1'},
+          'fakeVendor2': {'SLOT_ID': '1'},
+        },
+        'urls': [
+          'https://localhost:4443/posts?slot_id=SLOT_ID',
+          'https://broken.zzzzzzz',
+        ],
+        'timeoutMillis': 0,
+      };
+      setRtcConfig(rtcConfig);
+      validateRtcConfig_(element);
+      expect(rtc.rtcConfig_).to.be.ok;
+      expect(rtc.rtcConfig_).to.deep.equal(rtcConfig);
+    });
+
+    it('should not allow timeout greater than default', () => {
+      const rtcConfig = {
+        'vendors': {
+          'fakeVendor': {'SLOT_ID': '1', 'PAGE_ID': '1'},
+          'nonexistent-vendor': {'SLOT_ID': '1'},
+          'fakeVendor2': {'SLOT_ID': '1'},
+        },
+        'urls': [
+          'https://localhost:4443/posts?slot_id=SLOT_ID',
+          'https://broken.zzzzzzz',
+        ],
+        'timeoutMillis': 1000000,
+      };
+      const expectedRtcConfig = {
+        'vendors': {
+          'fakeVendor': {'SLOT_ID': '1', 'PAGE_ID': '1'},
+          'nonexistent-vendor': {'SLOT_ID': '1'},
+          'fakeVendor2': {'SLOT_ID': '1'},
+        },
+        'urls': [
+          'https://localhost:4443/posts?slot_id=SLOT_ID',
+          'https://broken.zzzzzzz',
+        ],
+        'timeoutMillis': 1000,
+      };
+      setRtcConfig(rtcConfig);
+      validateRtcConfig_(element);
+      expect(rtc.rtcConfig_).to.be.ok;
+      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
+    });
+
+    it('should return false if rtc-config not specified', () => {
+      expect(validateRtcConfig_(element)).to.be.false;
+    });
+
+    // Test various misconfigurations that are missing vendors or urls.
+    [
+      {'timeoutMillis': 500},
+      {'vendors': {}},
+      {'urls': []},
+      {'vendors': {}, 'urls': []},
+      {'vendors': 'incorrect', 'urls': 'incorrect'},
+    ].forEach((rtcConfig) => {
+      it('should return false for rtcConfig missing required values', () => {
+        setRtcConfig(rtcConfig);
+        allowConsoleError(() => {
+          dev().error('RTCTESTS', 'Error');
+          validatedRtcConfig = validateRtcConfig_(element);
+        });
+        expect(validatedRtcConfig).to.be.false;
+      });
+    });
+
+    it('should return false for bad JSON rtcConfig', () => {
+      const rtcConfig = '{"urls" : ["https://google.com"]';
+      element.setAttribute('rtc-config', rtcConfig);
+      validatedRtcConfig = validateRtcConfig_(element);
+      expect(validatedRtcConfig).to.be.false;
+    });
+  });
+
+  describe('#inflateAndSendRtc_', () => {
+    it('should not send RTC if macro expansion exceeds timeout', () => {
+      const url = 'https://www.example.biz/?dummy=DUMMY';
+      rtc.rtcConfig_ = {
+        timeoutMillis: 10,
+      };
+      const macroDelay = 20;
+      const macros = {
+        DUMMY: () => {
+          return Services.timerFor(env.win)
+            .promise(macroDelay)
+            .then(() => {
+              return 'foo';
+            });
+        },
+      };
+      inflateAndSendRtc_(url, macros);
+      return rtc.promiseArray_[0].then((errorResponse) => {
+        expect(errorResponse.error).to.equal(
+          RTC_ERROR_ENUM.MACRO_EXPAND_TIMEOUT
+        );
+      });
+    });
+
+    it('should not send RTC if no longer current', () => {
+      const url = 'https://www.example.biz/';
+      rtc.rtcConfig_ = {
+        timeoutMillis: 1000,
+      };
+      const macros = {};
+      inflateAndSendRtc_(url, macros, /* errorReportingUrl */ undefined, () => {
+        throw cancellation();
+      });
+      return rtc.promiseArray_[0].then((errorResponse) => {
+        expect(errorResponse).to.be.undefined;
+      });
+    });
+
+    it('should expand globally allowed macros', async () => {
+      const url = 'https://www.foo.example/?cid=CLIENT_ID(foo)';
+      rtc.rtcConfig_ = {
+        timeoutMillis: 1000,
+      };
+      const macros = {};
+      inflateAndSendRtc_(
+        url,
+        macros,
+        /* errorReportingUrl */ undefined,
+        () => {} // checkStillCurrent
+      );
+      await rtc.promiseArray_[0];
+      expect(fetchJsonStub).to.be.called;
+      expect(
+        fetchJsonStub.calledWithMatch(
+          /https:\/\/www.foo.example\/\?cid=amp-\S+$/
+        )
+      ).to.be.true;
+    });
+  });
+
+  describe('modifyRtcConfigForConsentStateSettings', () => {
+    beforeEach(() => {
+      rtc.rtcConfig_ = {
+        'vendors': {
+          'vendorA': {'SLOT_ID': '1', 'PAGE_ID': '1'},
+          'vendorB': {'SLOT_ID': '1'},
+          'vendorC': {'PAGE_ID': '1'},
+        },
+        'urls': [
+          'https://www.rtc.com/example1',
+          'https://www.other-rtc.com/example2',
+        ],
+        'timeoutMillis': 500,
+      };
+    });
+
+    it('should not modify rtcConfig if consent state is valid', () => {
+      const expectedRtcConfig = {...rtc.rtcConfig_};
+      rtc.consentState_ = CONSENT_POLICY_STATE.SUFFICIENT;
+      rtc.modifyRtcConfigForConsentStateSettings();
+      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
+    });
+
+    it('should clear all callouts if global setting mismatched', () => {
+      rtc.rtcConfig_.sendRegardlessOfConsentState = ['INSUFFICIENT'];
+      const expectedRtcConfig = {...rtc.rtcConfig_};
+      expectedRtcConfig.vendors = {};
+      expectedRtcConfig.urls = [];
+      rtc.consentState_ = CONSENT_POLICY_STATE.UNKNOWN;
+      rtc.modifyRtcConfigForConsentStateSettings();
+      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
+    });
+
+    it('should handle empty urls array', () => {
+      rtc.consentState_ = CONSENT_POLICY_STATE.UNKNOWN;
+      rtc.rtcConfig_.urls = [];
+      expect(() => rtc.modifyRtcConfigForConsentStateSettings()).not.to.throw();
+    });
+
+    it('should handle empty vendors object', () => {
+      rtc.consentState_ = CONSENT_POLICY_STATE.UNKNOWN;
+      rtc.rtcConfig_.vendors = {};
+      expect(() => rtc.modifyRtcConfigForConsentStateSettings()).not.to.throw();
+    });
+
+    it('should handle missing urls array', () => {
+      rtc.consentState_ = CONSENT_POLICY_STATE.UNKNOWN;
+      rtc.rtcConfig_.urls = undefined;
+      expect(() => rtc.modifyRtcConfigForConsentStateSettings()).not.to.throw();
+    });
+
+    it('should handle missing vendors object', () => {
+      rtc.consentState_ = CONSENT_POLICY_STATE.UNKNOWN;
+      rtc.rtcConfig_.vendors = undefined;
+      expect(() => rtc.modifyRtcConfigForConsentStateSettings()).not.to.throw();
+    });
+
+    it('should clear just invalid custom URLs', () => {
+      rtc.rtcConfig_.vendors = {
+        'vendorA': {
+          'sendRegardlessOfConsentState': true,
+          'macros': {'SLOT_ID': '1', 'PAGE_ID': '1'},
+        },
+        'vendorB': {
+          'sendRegardlessOfConsentState': ['INSUFFICIENT', 'UNKNOWN'],
+          'macros': {'SLOT_ID': '1'},
+        },
+        'vendorC': {
+          'sendRegardlessOfConsentState': ['UNKNOWN'],
+          'macros': {'SLOT_ID': '1'},
+        },
+      };
+      const expectedRtcConfig = {...rtc.rtcConfig_};
+      expectedRtcConfig.urls = [];
+      rtc.consentState_ = CONSENT_POLICY_STATE.UNKNOWN;
+      rtc.modifyRtcConfigForConsentStateSettings();
+      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
+    });
+
+    it('should clear just invalid vendor callouts', () => {
+      rtc.rtcConfig_.urls = [
+        {
+          'sendRegardlessOfConsentState': true,
+          'url': 'https://www.rtc.com/example1',
+        },
+        {
+          'sendRegardlessOfConsentState': ['INSUFFICIENT', 'UNKNOWN'],
+          'url': 'https://www.other-rtc.com/example2',
+        },
+      ];
+      const expectedRtcConfig = {...rtc.rtcConfig_};
+      expectedRtcConfig.vendors = {};
+      rtc.consentState_ = CONSENT_POLICY_STATE.INSUFFICIENT;
+      rtc.modifyRtcConfigForConsentStateSettings();
+      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
+    });
+
+    it('should not clear callouts if per-callout setting valid', () => {
+      rtc.rtcConfig_.vendors = {
+        'vendorA': {
+          'sendRegardlessOfConsentState': true,
+          'macros': {'SLOT_ID': '1', 'PAGE_ID': '1'},
+        },
+        'vendorB': {
+          'sendRegardlessOfConsentState': ['UNKNOWN'],
+          'macros': {'SLOT_ID': '1'},
+        },
+        'vendorC': {'SLOT_ID': '1'},
+      };
+      rtc.rtcConfig_.urls = [
+        {
+          'sendRegardlessOfConsentState': true,
+          'url': 'https://www.rtc.com/example1',
+        },
+        'https://www.other-rtc.com/example2',
+      ];
+      const expectedRtcConfig = {...rtc.rtcConfig_};
+      expectedRtcConfig.vendors = {
+        'vendorA': {
+          'sendRegardlessOfConsentState': true,
+          'macros': {'SLOT_ID': '1', 'PAGE_ID': '1'},
+        },
+      };
+      expectedRtcConfig.urls = [
+        {
+          'sendRegardlessOfConsentState': true,
+          'url': 'https://www.rtc.com/example1',
+        },
+      ];
+      rtc.consentState_ = CONSENT_POLICY_STATE.INSUFFICIENT;
+      rtc.modifyRtcConfigForConsentStateSettings();
+      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
+    });
+
+    it('should handle mix of global and individual consent settings', () => {
+      rtc.rtcConfig_.vendors = {
+        'vendorA': {
+          'sendRegardlessOfConsentState': true,
+          'macros': {'SLOT_ID': '1', 'PAGE_ID': '1'},
+        },
+        'vendorB': {
+          'sendRegardlessOfConsentState': ['UNKNOWN'],
+          'macros': {'SLOT_ID': '1'},
+        },
+        'vendorC': {'SLOT_ID': '1'},
+      };
+      rtc.rtcConfig_.urls = [
+        {
+          'sendRegardlessOfConsentState': true,
+          'url': 'https://www.rtc.com/example1',
+        },
+        'https://www.other-rtc.com/example2',
+      ];
+      rtc.rtcConfig_.sendRegardlessOfConsentState = ['INSUFFICIENT'];
+      const expectedRtcConfig = {...rtc.rtcConfig_};
+      expectedRtcConfig.vendors = {
+        'vendorA': {
+          'sendRegardlessOfConsentState': true,
+          'macros': {'SLOT_ID': '1', 'PAGE_ID': '1'},
+        },
+        'vendorC': {'SLOT_ID': '1'},
+      };
+      expectedRtcConfig.urls = [
+        {
+          'sendRegardlessOfConsentState': true,
+          'url': 'https://www.rtc.com/example1',
+        },
+        'https://www.other-rtc.com/example2',
+      ];
+      rtc.consentState_ = CONSENT_POLICY_STATE.INSUFFICIENT;
+      rtc.modifyRtcConfigForConsentStateSettings();
+      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
+    });
+
+    it('should always clear RTC for a new consent state', () => {
+      rtc.consentState_ = 'FAKE_NEW_CONSENT_STATE';
+      const expectedRtcConfig = {...rtc.rtcConfig_};
+
+      rtc.modifyRtcConfigForConsentStateSettings();
+      expectedRtcConfig.urls = [];
+      expectedRtcConfig.vendors = {};
+      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
+    });
+
+    it('should not clear RTC for a null consent state', () => {
+      rtc.consentState_ = null;
+      const expectedRtcConfig = {...rtc.rtcConfig_};
+      rtc.modifyRtcConfigForConsentStateSettings();
+      expect(rtc.rtcConfig_).to.deep.equal(expectedRtcConfig);
+    });
+  });
+
+  describe('sendErrorMessage', () => {
+    let imageStub;
+    let errorType, errorReportingUrl;
+    let imageMock;
+
+    beforeEach(() => {
+      // Make sure that we always send the message, as we are using
+      // the check Math.random() < reporting frequency.
+      env.sandbox.stub(Math, 'random').returns(0);
+      env.sandbox.stub(Xhr.prototype, 'fetch');
+      imageMock = {};
+      imageStub = env.sandbox.stub(env.win, 'Image').returns(imageMock);
+      errorType = RTC_ERROR_ENUM.TIMEOUT;
+      errorReportingUrl = 'https://www.example.test?e=ERROR_TYPE&h=HREF';
+    });
+
+    it('should send error message pingback to correct url', () => {
+      sendErrorMessage(errorType, errorReportingUrl);
+      expect(imageStub).to.be.calledOnce;
+      const href = encodeURIComponent(env.win.location.href);
+      expect(imageMock.src).to.equal(
+        `https://www.example.test?e=${errorType}&h=${href}`
+      );
+    });
+  });
+});
diff --git a/test/unit/test-render-delaying-services.js b/test/unit/test-render-delaying-services.js
index ec544d237846d..7660cc8dce496 100644
--- a/test/unit/test-render-delaying-services.js
+++ b/test/unit/test-render-delaying-services.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import * as service from '../../src/service';
 import {createIframePromise} from '../../testing/iframe';
 import {
@@ -23,7 +23,7 @@ import {
 } from '../../src/render-delaying-services';
 import {macroTask} from '../../testing/yield';
 
-describe('waitForServices', () => {
+describes.sandboxed('waitForServices', {}, (env) => {
   let win;
   let clock;
   let dynamicCssResolve;
@@ -33,23 +33,27 @@ describe('waitForServices', () => {
   let variantStub;
 
   beforeEach(() => {
-    const getService = window.sandbox.stub(service, 'getServicePromise');
-    dynamicCssResolve = waitForService(getService, 'amp-dynamic-css-classes');
-    experimentResolve = waitForService(getService, 'amp-experiment');
+    const getService = env.sandbox.stub(service, 'getServicePromise');
+    dynamicCssResolve = waitForService(
+      env,
+      getService,
+      'amp-dynamic-css-classes'
+    );
+    experimentResolve = waitForService(env, getService, 'amp-experiment');
 
     variantService = {
       whenReady: () => {
         throw new Error('whenReady should be stubbed');
       },
     };
-    variantResolve = waitForService(getService, 'variant', variantService);
-    variantStub = window.sandbox
+    variantResolve = waitForService(env, getService, 'variant', variantService);
+    variantStub = env.sandbox
       .stub(variantService, 'whenReady')
       .returns(Promise.resolve());
 
     return createIframePromise().then((iframe) => {
       win = iframe.win;
-      clock = lolex.install({target: win});
+      clock = fakeTimers.withGlobal(win).install();
     });
   });
 
@@ -123,9 +127,9 @@ describe('waitForServices', () => {
   });
 });
 
-function waitForService(getService, serviceId, service) {
+function waitForService(env, getService, serviceId, service) {
   let resolve = null;
-  getService.withArgs(window.sandbox.match.any, serviceId).returns(
+  getService.withArgs(env.sandbox.match.any, serviceId).returns(
     new Promise((r) => {
       resolve = r.bind(this, service);
     })
diff --git a/test/unit/test-resource.js b/test/unit/test-resource.js
index acbe7fb12f7fd..9c8db0c9d45c5 100644
--- a/test/unit/test-resource.js
+++ b/test/unit/test-resource.js
@@ -20,7 +20,8 @@ import {OwnersImpl} from '../../src/service/owners-impl';
 import {Resource, ResourceState} from '../../src/service/resource';
 import {ResourcesImpl} from '../../src/service/resources-impl';
 import {Services} from '../../src/services';
-import {layoutRectLtwh} from '../../src/layout-rect';
+import {isCancellation} from '../../src/error-reporting';
+import {layoutRectLtwh} from '../../src/core/math/layout-rect';
 
 describes.realWin('Resource', {amp: true}, (env) => {
   let win, doc;
@@ -28,11 +29,9 @@ describes.realWin('Resource', {amp: true}, (env) => {
   let elementMock;
   let resources;
   let resource;
-  let sandbox;
 
   beforeEach(() => {
     win = env.win;
-    sandbox = env.sandbox;
     doc = win.document;
 
     element = env.createAmpElement('amp-fake-element');
@@ -49,6 +48,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
       .callsFake(() => {});
     resources = new ResourcesImpl(env.ampdoc);
     resource = new Resource(1, element, resources);
+    element.resources_ = resources;
 
     const vsync = Services.vsyncFor(win);
     env.sandbox.stub(vsync, 'mutate').callsFake((mutator) => {
@@ -88,7 +88,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
 
   it('should not build before upgraded', () => {
     elementMock.expects('isUpgraded').returns(false).atLeast(1);
-    elementMock.expects('build').never();
+    elementMock.expects('buildInternal').never();
     elementMock.expects('updateLayoutBox').never();
 
     expect(resource.build()).to.be.null;
@@ -98,36 +98,18 @@ describes.realWin('Resource', {amp: true}, (env) => {
   it('should build after upgraded', () => {
     const buildPromise = Promise.resolve();
     elementMock.expects('isUpgraded').returns(true).atLeast(1);
-    elementMock.expects('build').returns(buildPromise).once();
+    elementMock.expects('buildInternal').returns(buildPromise).once();
     elementMock.expects('updateLayoutBox').never();
     return resource.build().then(() => {
       expect(resource.getState()).to.equal(ResourceState.NOT_LAID_OUT);
     });
   });
 
-  describe('intersect-resources', () => {
-    beforeEach(() => {
-      sandbox.stub(resources, 'isIntersectionExperimentOn').returns(true);
-      resource = new Resource(1, element, resources);
-    });
-
-    it('should be ready for layout if measured before build', () => {
-      resource.premeasure({left: 0, top: 0, width: 100, height: 100});
-      resource.measure(/* usePremeasuredRect */ true);
-      elementMock.expects('isUpgraded').returns(true).atLeast(1);
-      elementMock.expects('build').returns(Promise.resolve()).once();
-      elementMock.expects('onMeasure').withArgs(/* sizeChanged */ true).once();
-      return resource.build().then(() => {
-        expect(resource.getState()).to.equal(ResourceState.READY_FOR_LAYOUT);
-      });
-    });
-  });
-
   it('should build if element is currently building', () => {
     elementMock.expects('isBuilt').returns(false).once();
     elementMock.expects('isBuilding').returns(true).once();
     elementMock.expects('isUpgraded').returns(true).once();
-    elementMock.expects('build').returns(Promise.resolve()).once();
+    elementMock.expects('buildInternal').returns(Promise.resolve()).once();
     const r = new Resource(2, element, resources);
     expect(r.isBuilding()).to.be.true;
   });
@@ -138,7 +120,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
       .callsFake(() => {});
     elementMock.expects('isUpgraded').returns(true).atLeast(1);
     elementMock
-      .expects('build')
+      .expects('buildInternal')
       .returns(Promise.reject(new Error('intentional')))
       .once();
     elementMock.expects('updateLayoutBox').never();
@@ -158,7 +140,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
   it('should mark as not ready for layout even if already measured', () => {
     const box = layoutRectLtwh(0, 0, 100, 200);
     elementMock.expects('isUpgraded').returns(true).atLeast(1);
-    elementMock.expects('build').returns(Promise.resolve()).once();
+    elementMock.expects('buildInternal').returns(Promise.resolve()).once();
     resource.layoutBox_ = box;
     return resource.build().then(() => {
       expect(resource.getState()).to.equal(ResourceState.NOT_LAID_OUT);
@@ -167,7 +149,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
 
   it('should mark as not laid out if not yet measured', () => {
     elementMock.expects('isUpgraded').returns(true).atLeast(1);
-    elementMock.expects('build').returns(Promise.resolve()).once();
+    elementMock.expects('buildInternal').returns(Promise.resolve()).once();
     return resource.build().then(() => {
       expect(resource.getState()).to.equal(ResourceState.NOT_LAID_OUT);
     });
@@ -175,7 +157,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
 
   it('should track size changes on measure', () => {
     elementMock.expects('isUpgraded').returns(true).atLeast(1);
-    elementMock.expects('build').returns(Promise.resolve()).once();
+    elementMock.expects('buildInternal').returns(Promise.resolve()).once();
     return resource.build().then(() => {
       elementMock
         .expects('getBoundingClientRect')
@@ -197,7 +179,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
   it('should track no size changes on measure', () => {
     layoutRectLtwh(0, 0, 0, 0);
     elementMock.expects('isUpgraded').returns(true).atLeast(1);
-    elementMock.expects('build').returns(Promise.resolve()).once();
+    elementMock.expects('buildInternal').returns(Promise.resolve()).once();
     return resource.build().then(() => {
       elementMock
         .expects('getBoundingClientRect')
@@ -228,10 +210,6 @@ describes.realWin('Resource', {amp: true}, (env) => {
       resource.measure();
     }).to.not.throw();
     expect(resource.getLayoutBox()).to.eql(layoutRectLtwh(0, 100, 300, 100));
-    // pageLayoutBox == layoutBox
-    expect(resource.getPageLayoutBox()).to.eql(
-      layoutRectLtwh(0, 100, 300, 100)
-    );
   });
 
   it('should allow measure even when not built', () => {
@@ -247,7 +225,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
 
   it('should measure and update state', () => {
     elementMock.expects('isUpgraded').returns(true).atLeast(1);
-    elementMock.expects('build').returns(Promise.resolve()).once();
+    elementMock.expects('buildInternal').returns(Promise.resolve()).once();
     return resource.build().then(() => {
       elementMock
         .expects('getBoundingClientRect')
@@ -274,7 +252,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
 
   it('should update initial box only on first measure', () => {
     elementMock.expects('isUpgraded').returns(true).atLeast(1);
-    elementMock.expects('build').returns(Promise.resolve()).once();
+    elementMock.expects('buildInternal').returns(Promise.resolve()).once();
     return resource.build().then(() => {
       element.getBoundingClientRect = () => ({
         left: 11,
@@ -372,6 +350,22 @@ describes.realWin('Resource', {amp: true}, (env) => {
     expect(resource.getLayoutBox().width).to.equal(111 + 10);
   });
 
+  it('should not relayout if element has not completed layout', () => {
+    elementMock.expects('isUpgraded').returns(true).atLeast(1);
+    resource.state_ = ResourceState.LAYOUT_SCHEDULED;
+    resource.layoutBox_ = {left: 11, top: 12, width: 111, height: 222};
+
+    // Width changed.
+    elementMock
+      .expects('getBoundingClientRect')
+      .returns({left: 11, top: 12, width: 111 + 10, height: 222})
+      .once();
+    elementMock.expects('isRelayoutNeeded').returns(true).atLeast(0);
+    resource.measure();
+    expect(resource.getState()).to.equal(ResourceState.LAYOUT_SCHEDULED);
+    expect(resource.getLayoutBox().width).to.equal(111 + 10);
+  });
+
   it('should calculate NOT fixed for non-displayed elements', () => {
     elementMock.expects('isUpgraded').returns(true).atLeast(1);
     elementMock
@@ -398,9 +392,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
     });
     resource.measure();
     expect(resource.isFixed()).to.be.true;
-    // layoutBox != pageLayoutBox
     expect(resource.getLayoutBox()).to.eql(layoutRectLtwh(0, 11, 10, 10));
-    expect(resource.getPageLayoutBox()).to.eql(layoutRectLtwh(0, 0, 10, 10));
   });
 
   it('should calculate fixed for fixed-style parent', () => {
@@ -427,20 +419,16 @@ describes.realWin('Resource', {amp: true}, (env) => {
     });
     resource.measure();
     expect(resource.isFixed()).to.be.true;
-    // layoutBox != pageLayoutBox
     expect(resource.getLayoutBox()).to.eql(layoutRectLtwh(0, 11, 10, 10));
-    expect(resource.getPageLayoutBox()).to.eql(layoutRectLtwh(0, 0, 10, 10));
   });
 
-  describe('getPageLayoutBoxAsync', () => {
+  describe('ensureMeasured', () => {
     it('should return layout box when the resource has NOT been measured', () => {
       env.sandbox.stub(element, 'isUpgraded').returns(true);
       env.sandbox
         .stub(element, 'getBoundingClientRect')
         .returns(layoutRectLtwh(0, 0, 10, 10));
-      return expect(resource.getPageLayoutBoxAsync()).to.eventually.eql(
-        layoutRectLtwh(0, 0, 10, 10)
-      );
+      return resource.ensureMeasured();
     });
 
     it('should return layout box when the resource has been measured', () => {
@@ -449,9 +437,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
         .stub(element, 'getBoundingClientRect')
         .returns(layoutRectLtwh(0, 0, 10, 10));
       resource.measure();
-      return expect(resource.getPageLayoutBoxAsync()).to.eventually.eql(
-        layoutRectLtwh(0, 0, 10, 10)
-      );
+      return resource.ensureMeasured();
     });
   });
 
@@ -467,7 +453,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
       });
       element.parentElement.__AMP__RESOURCE = {};
       elementMock.expects('isUpgraded').returns(true).atLeast(1);
-      elementMock.expects('build').returns(Promise.resolve()).once();
+      elementMock.expects('buildInternal').returns(Promise.resolve()).once();
       rect = {left: 11, top: 12, width: 111, height: 222};
       resource = new Resource(1, element, resources);
       return resource.build();
@@ -551,6 +537,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
 
   it('should ignore startLayout if already completed or failed or going', () => {
     elementMock.expects('layoutCallback').never();
+    resource.layoutBox_ = {left: 11, top: 12, width: 10, height: 10};
 
     resource.state_ = ResourceState.LAYOUT_COMPLETE;
     resource.startLayout();
@@ -559,6 +546,11 @@ describes.realWin('Resource', {amp: true}, (env) => {
     resource.startLayout();
 
     resource.state_ = ResourceState.READY_FOR_LAYOUT;
+    allowConsoleError(() => {
+      resource.startLayout();
+    });
+
+    resource.state_ = ResourceState.LAYOUT_SCHEDULED;
     resource.layoutPromise_ = {};
     resource.startLayout();
   });
@@ -576,7 +568,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
 
   it('should ignore startLayout if not visible', () => {
     elementMock.expects('layoutCallback').never();
-    resource.state_ = ResourceState.READY_FOR_LAYOUT;
+    resource.state_ = ResourceState.LAYOUT_SCHEDULED;
     resource.layoutBox_ = {left: 11, top: 12, width: 0, height: 0};
     allowConsoleError(() => {
       expect(() => {
@@ -588,16 +580,37 @@ describes.realWin('Resource', {amp: true}, (env) => {
   it('should force startLayout for first layout', () => {
     elementMock.expects('layoutCallback').returns(Promise.resolve()).once();
 
-    resource.state_ = ResourceState.READY_FOR_LAYOUT;
+    resource.state_ = ResourceState.LAYOUT_SCHEDULED;
     resource.layoutBox_ = {left: 11, top: 12, width: 10, height: 10};
     resource.startLayout();
     expect(resource.getState()).to.equal(ResourceState.LAYOUT_SCHEDULED);
   });
 
+  it('should abort startLayout with unload', async () => {
+    const neverEndingPromise = new Promise(() => {});
+    elementMock.expects('layoutCallback').returns(neverEndingPromise).once();
+
+    resource.state_ = ResourceState.LAYOUT_SCHEDULED;
+    resource.layoutBox_ = {left: 11, top: 12, width: 10, height: 10};
+    const layoutPromise = resource.startLayout();
+    expect(resource.getState()).to.equal(ResourceState.LAYOUT_SCHEDULED);
+
+    resource.unload();
+
+    let error;
+    try {
+      await layoutPromise;
+    } catch (e) {
+      error = e;
+    }
+    expect(error).to.exist;
+    expect(isCancellation(error)).to.be.true;
+  });
+
   it('should ignore startLayout for re-layout when not opt-in', () => {
     elementMock.expects('layoutCallback').never();
 
-    resource.state_ = ResourceState.READY_FOR_LAYOUT;
+    resource.state_ = ResourceState.LAYOUT_SCHEDULED;
     resource.layoutBox_ = {left: 11, top: 12, width: 10, height: 10};
     resource.layoutCount_ = 1;
     elementMock.expects('isRelayoutNeeded').returns(false).atLeast(1);
@@ -608,7 +621,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
   it('should force startLayout for re-layout when opt-in', () => {
     elementMock.expects('layoutCallback').returns(Promise.resolve()).once();
 
-    resource.state_ = ResourceState.READY_FOR_LAYOUT;
+    resource.state_ = ResourceState.LAYOUT_SCHEDULED;
     resource.layoutBox_ = {left: 11, top: 12, width: 10, height: 10};
     resource.layoutCount_ = 1;
     elementMock.expects('isRelayoutNeeded').returns(true).atLeast(1);
@@ -619,7 +632,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
   it('should complete startLayout', () => {
     elementMock.expects('layoutCallback').returns(Promise.resolve()).once();
 
-    resource.state_ = ResourceState.READY_FOR_LAYOUT;
+    resource.state_ = ResourceState.LAYOUT_SCHEDULED;
     resource.layoutBox_ = {left: 11, top: 12, width: 10, height: 10};
     const loaded = resource.loadedOnce();
     const promise = resource.startLayout();
@@ -637,7 +650,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
     elementMock.expects('layoutCallback').returns(Promise.resolve()).once();
     elementMock.expects('getLayout').returns('fluid').once();
 
-    resource.state_ = ResourceState.READY_FOR_LAYOUT;
+    resource.state_ = ResourceState.LAYOUT_SCHEDULED;
     resource.layoutBox_ = {left: 11, top: 12, width: 10, height: 0};
     const loaded = resource.loadedOnce();
     const promise = resource.startLayout();
@@ -655,7 +668,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
     const error = new Error('intentional');
     elementMock.expects('layoutCallback').returns(Promise.reject(error)).once();
 
-    resource.state_ = ResourceState.READY_FOR_LAYOUT;
+    resource.state_ = ResourceState.LAYOUT_SCHEDULED;
     resource.layoutBox_ = {left: 11, top: 12, width: 10, height: 10};
     const promise = resource.startLayout();
     expect(resource.layoutPromise_).to.not.equal(null);
@@ -698,7 +711,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
   });
 
   it('should not record layout schedule time in startLayout', () => {
-    resource.state_ = ResourceState.READY_FOR_LAYOUT;
+    resource.state_ = ResourceState.LAYOUT_SCHEDULED;
     resource.layoutBox_ = {left: 11, top: 12, width: 10, height: 10};
     allowConsoleError(() => resource.startLayout());
 
@@ -753,15 +766,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
         ))
     );
 
-    it('should call viewportCallback when not built', () => {
-      resource.state_ = ResourceState.NOT_BUILT;
-      resource.setInViewport(true);
-      expect(resource.isInViewport()).to.equal(true);
-      expect(resolveWithinViewportSpy).to.be.calledOnce;
-    });
-
-    it('should call viewportCallback when built', () => {
-      resource.state_ = ResourceState.LAYOUT_COMPLETE;
+    it('should set inViewport to true', () => {
       resource.setInViewport(true);
       expect(resource.isInViewport()).to.equal(true);
       expect(resolveWithinViewportSpy).to.be.calledOnce;
@@ -852,7 +857,6 @@ describes.realWin('Resource', {amp: true}, (env) => {
   describe('unlayoutCallback', () => {
     it('should NOT call unlayoutCallback on unbuilt element', () => {
       resource.state_ = ResourceState.NOT_BUILT;
-      elementMock.expects('viewportCallback').never();
       elementMock.expects('unlayoutCallback').never();
       resource.unlayout();
       expect(resource.getState()).to.equal(ResourceState.NOT_BUILT);
@@ -878,6 +882,7 @@ describes.realWin('Resource', {amp: true}, (env) => {
 
       resource.unlayout();
 
+      resource.state_ = ResourceState.LAYOUT_SCHEDULED;
       elementMock.expects('layoutCallback').returns(Promise.resolve()).once();
       resource.measure();
       resource.startLayout();
@@ -891,18 +896,6 @@ describes.realWin('Resource', {amp: true}, (env) => {
       expect(resource.getState()).to.equal(ResourceState.LAYOUT_COMPLETE);
     });
 
-    it('should call viewportCallback when resource not in viewport', () => {
-      resource.state_ = ResourceState.LAYOUT_COMPLETE;
-      elementMock.expects('viewportCallback').withExactArgs(false).once();
-      resource.unlayout();
-    });
-
-    it('should call viewportCallback when resource in viewport', () => {
-      resource.state_ = ResourceState.LAYOUT_COMPLETE;
-      elementMock.expects('viewportCallback').withExactArgs(false).once();
-      resource.unlayout();
-    });
-
     it('should delegate unload to unlayoutCallback', () => {
       resource.state_ = ResourceState.LAYOUT_COMPLETE;
       elementMock.expects('unlayoutCallback').returns(false).once();
@@ -912,58 +905,36 @@ describes.realWin('Resource', {amp: true}, (env) => {
     });
   });
 
-  describe('pauseCallback', () => {
-    it('should call pauseCallback on unbuilt element', () => {
+  describe('pause', () => {
+    it('should call pause on unbuilt element', () => {
       resource.state_ = ResourceState.NOT_BUILT;
-      elementMock.expects('pauseCallback').once();
+      elementMock.expects('pause').once();
       resource.pause();
     });
 
-    it('should call pauseCallback on built element', () => {
+    it('should call pause on built element', () => {
       resource.state_ = ResourceState.LAYOUT_COMPLETE;
-      elementMock.expects('pauseCallback').once();
+      elementMock.expects('pause').once();
       resource.pause();
     });
 
     it('should NOT call unlayoutCallback', () => {
       resource.state_ = ResourceState.LAYOUT_COMPLETE;
-      elementMock.expects('pauseCallback').once();
+      elementMock.expects('pause').once();
       elementMock.expects('unlayoutCallback').never();
       resource.pause();
     });
 
-    describe('when unlayoutOnPause', () => {
-      beforeEach(() => {
-        elementMock.expects('unlayoutOnPause').returns(true).once();
-      });
-
-      it('should call unlayoutCallback and update state', () => {
-        resource.state_ = ResourceState.LAYOUT_COMPLETE;
-        elementMock.expects('pauseCallback').once();
-        elementMock.expects('unlayoutCallback').returns(true).once();
-        resource.pause();
-        expect(resource.getState()).to.equal(ResourceState.NOT_LAID_OUT);
-      });
-
-      it('should call unlayoutCallback but NOT update state', () => {
-        resource.state_ = ResourceState.LAYOUT_COMPLETE;
-        elementMock.expects('pauseCallback').once();
-        elementMock.expects('unlayoutCallback').returns(false).once();
-        resource.pause();
-        expect(resource.getState()).to.equal(ResourceState.LAYOUT_COMPLETE);
-      });
-    });
-
     describe('when remove from DOM', () => {
-      it('should call pauseCallback on remove for unbuilt ele', () => {
+      it('should call pause on remove for unbuilt ele', () => {
         resource.state_ = ResourceState.NOT_BUILT;
-        elementMock.expects('pauseCallback').once();
+        elementMock.expects('pause').once();
         resource.pauseOnRemove();
       });
 
-      it('should call pauseCallback on remove for built ele', () => {
+      it('should call pause on remove for built ele', () => {
         resource.state_ = ResourceState.LAYOUT_COMPLETE;
-        elementMock.expects('pauseCallback').once();
+        elementMock.expects('pause').once();
         resource.pauseOnRemove();
       });
     });
@@ -995,22 +966,22 @@ describes.realWin('Resource', {amp: true}, (env) => {
     });
   });
 
-  describe('resumeCallback', () => {
-    it('should call resumeCallback on unbuilt element', () => {
+  describe('resume', () => {
+    it('should call resume on unbuilt element', () => {
       resource.state_ = ResourceState.NOT_BUILT;
-      elementMock.expects('resumeCallback').once();
+      elementMock.expects('resume').once();
       resource.resume();
     });
 
-    it('should call resumeCallback on un-paused element', () => {
+    it('should call resume on un-paused element', () => {
       resource.state_ = ResourceState.LAYOUT_COMPLETE;
-      elementMock.expects('resumeCallback').once();
+      elementMock.expects('resume').once();
       resource.resume();
     });
   });
 });
 
-describe('Resource idleRenderOutsideViewport', () => {
+describes.sandboxed('Resource idleRenderOutsideViewport', {}, (env) => {
   let element;
   let resources;
   let resource;
@@ -1018,7 +989,7 @@ describe('Resource idleRenderOutsideViewport', () => {
   let isWithinViewportRatio;
 
   beforeEach(() => {
-    idleRenderOutsideViewport = window.sandbox.stub();
+    idleRenderOutsideViewport = env.sandbox.stub();
     element = {
       idleRenderOutsideViewport,
       ownerDocument: {defaultView: window},
@@ -1037,17 +1008,13 @@ describe('Resource idleRenderOutsideViewport', () => {
       applySize: () => {},
       unlayoutOnPause: () => false,
       unlayoutCallback: () => true,
-      pauseCallback: () => false,
-      resumeCallback: () => false,
-      viewportCallback: () => {},
+      pause: () => false,
+      resume: () => false,
       getLayoutPriority: () => LayoutPriority.CONTENT,
     };
     resources = new ResourcesImpl(new AmpDocSingle(window));
     resource = new Resource(1, element, resources);
-    isWithinViewportRatio = window.sandbox.stub(
-      resource,
-      'isWithinViewportRatio'
-    );
+    isWithinViewportRatio = env.sandbox.stub(resource, 'isWithinViewportRatio');
   });
 
   it('should return true if isWithinViewportRatio', () => {
diff --git a/test/unit/test-resources.js b/test/unit/test-resources.js
index 3306abd4ad3ef..56d73b51e5f55 100644
--- a/test/unit/test-resources.js
+++ b/test/unit/test-resources.js
@@ -14,23 +14,29 @@
  * limitations under the License.
  */
 
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {AmpDocSingle} from '../../src/service/ampdoc-impl';
 import {LayoutPriority} from '../../src/layout';
 import {Resource, ResourceState} from '../../src/service/resource';
 import {ResourcesImpl} from '../../src/service/resources-impl';
 import {Services} from '../../src/services';
-import {Signals} from '../../src/utils/signals';
-import {VisibilityState} from '../../src/visibility-state';
-import {layoutRectLtwh} from '../../src/layout-rect';
+import {Signals} from '../../src/core/data-structures/signals';
+import {VisibilityState} from '../../src/core/constants/visibility-state';
+import {layoutRectLtwh} from '../../src/core/math/layout-rect';
 import {loadPromise} from '../../src/event-helper';
 
 /*eslint "google-camelcase/google-camelcase": 0*/
-describe('Resources', () => {
+describes.realWin('Resources', {amp: true}, (env) => {
+  let window, document;
   let clock;
   let resources;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    window = env.win;
+    document = window.document;
+    delete window.requestIdleCallback;
+    delete window.cancelIdleCallback;
+    clock = fakeTimers.withGlobal(window).install();
     resources = new ResourcesImpl(new AmpDocSingle(window));
     resources.isRuntimeOn_ = false;
   });
@@ -39,9 +45,67 @@ describe('Resources', () => {
     resources.pass_.cancel();
   });
 
+  function createResource(opts) {
+    const {
+      id,
+      idleRenderOutsideViewport,
+      isBuilding,
+      isBuilt,
+      isDisplayed,
+      isFixed,
+      isInViewport,
+      layoutPriority,
+      prerenderAllowed,
+      renderOutsideViewport,
+      state,
+      taskId,
+    } = {
+      id: '1',
+      isBuilt: false,
+      isBuilding: false,
+      state: ResourceState.NOT_BUILT,
+      isDisplayed: true,
+      isFixed: false,
+      isInViewport: true,
+      prerenderAllowed: false,
+      renderOutsideViewport: false,
+      idleRenderOutsideViewport: false,
+      layoutPriority: LayoutPriority.CONTENT,
+      taskId: 'resource#P',
+      ...opts,
+    };
+
+    const element = document.createElement('amp-el');
+    element.R1 = () => false;
+    element.isBuilt = () => isBuilt;
+    element.isBuilding = () => isBuilding;
+    element.pause = () => {};
+    element.unmount = () => {};
+
+    const resource = new Resource(id, element, resources);
+    env.sandbox.stub(resource, 'getState').returns(state);
+    env.sandbox.stub(resource, 'isDisplayed').returns(isDisplayed);
+    env.sandbox.stub(resource, 'isFixed').returns(isFixed);
+    env.sandbox.stub(resource, 'isInViewport').returns(isInViewport);
+    env.sandbox.stub(resource, 'prerenderAllowed').returns(prerenderAllowed);
+    env.sandbox
+      .stub(resource, 'renderOutsideViewport')
+      .returns(renderOutsideViewport);
+    env.sandbox
+      .stub(resource, 'idleRenderOutsideViewport')
+      .returns(idleRenderOutsideViewport);
+    env.sandbox.stub(resource, 'getLayoutPriority').returns(layoutPriority);
+    env.sandbox.stub(resource, 'getTaskId').returns(taskId);
+
+    env.sandbox.stub(resource, 'layoutScheduled');
+    env.sandbox.stub(resource, 'startLayout');
+
+    return resource;
+  }
+
   it('should calculate correct calcTaskScore', () => {
     const viewportRect = layoutRectLtwh(0, 100, 300, 400);
-    window.sandbox.stub(resources.viewport_, 'getRect').returns(viewportRect);
+    env.sandbox.stub(resources.viewport_, 'getRect').returns(viewportRect);
 
     // Task 1 is right in the middle of the viewport and priority 0
     const task_in_viewport_p0 = {
@@ -261,18 +325,11 @@ describe('Resources', () => {
     'should not schedule non-prerenderable resource when' +
       ' document is in prerender',
     () => {
-      const resource = {
-        getState: () => ResourceState.READY_FOR_LAYOUT,
-        isDisplayed: () => true,
-        isFixed: () => false,
-        isInViewport: () => true,
-        prerenderAllowed: () => false,
-        renderOutsideViewport: () => false,
-        startLayout: () => {},
-        applySizesAndMediaQuery: () => {},
-      };
+      const resource = createResource({
+        state: ResourceState.READY_FOR_LAYOUT,
+      });
       resources.visible_ = false;
-      window.sandbox
+      env.sandbox
         .stub(resources.ampdoc, 'getVisibilityState')
         .returns(VisibilityState.PRERENDER);
       resources.scheduleLayoutOrPreload(resource, true);
@@ -281,21 +338,14 @@ describe('Resources', () => {
   );
 
   it('should schedule prerenderable resource when document is in prerender', () => {
-    const resource = {
-      getState: () => ResourceState.READY_FOR_LAYOUT,
-      isDisplayed: () => true,
-      isFixed: () => false,
-      isInViewport: () => true,
-      prerenderAllowed: () => true,
-      renderOutsideViewport: () => true,
-      getLayoutPriority: () => LayoutPriority.METADATA,
-      startLayout: () => {},
-      layoutScheduled: () => {},
-      getTaskId: () => 'resource#P',
-      applySizesAndMediaQuery: () => {},
-    };
+    const resource = createResource({
+      state: ResourceState.READY_FOR_LAYOUT,
+      prerenderAllowed: true,
+      renderOutsideViewport: true,
+      layoutPriority: LayoutPriority.METADATA,
+    });
     resources.visible_ = false;
-    window.sandbox
+    env.sandbox
       .stub(resources.ampdoc, 'getVisibilityState')
       .returns(VisibilityState.PRERENDER);
     resources.scheduleLayoutOrPreload(resource, true);
@@ -304,21 +354,14 @@ describe('Resources', () => {
   });
 
   it('should not schedule prerenderable resource when document is hidden', () => {
-    const resource = {
-      getState: () => ResourceState.READY_FOR_LAYOUT,
-      isDisplayed: () => true,
-      isFixed: () => false,
-      isInViewport: () => true,
-      prerenderAllowed: () => true,
-      renderOutsideViewport: () => true,
-      getLayoutPriority: () => LayoutPriority.METADATA,
-      startLayout: () => {},
-      layoutScheduled: () => {},
-      getTaskId: () => 'resource#P',
-      applySizesAndMediaQuery: () => {},
-    };
+    const resource = createResource({
+      state: ResourceState.READY_FOR_LAYOUT,
+      prerenderAllowed: true,
+      renderOutsideViewport: true,
+      layoutPriority: LayoutPriority.METADATA,
+    });
     resources.visible_ = false;
-    window.sandbox
+    env.sandbox
       .stub(resources.ampdoc, 'getVisibilityState')
       .returns(VisibilityState.HIDDEN);
     resources.scheduleLayoutOrPreload(resource, true);
@@ -329,17 +372,11 @@ describe('Resources', () => {
     'should not schedule non-renderOutsideViewport resource when' +
       ' resource is not visible',
     () => {
-      const resource = {
-        getState: () => ResourceState.READY_FOR_LAYOUT,
-        isDisplayed: () => true,
-        isFixed: () => false,
-        isInViewport: () => false,
-        prerenderAllowed: () => true,
-        renderOutsideViewport: () => false,
-        idleRenderOutsideViewport: () => false,
-        startLayout: () => {},
-        applySizesAndMediaQuery: () => {},
-      };
+      const resource = createResource({
+        state: ResourceState.READY_FOR_LAYOUT,
+        isInViewport: false,
+        prerenderAllowed: true,
+      });
       resources.scheduleLayoutOrPreload(resource, true);
       expect(resources.queue_.getSize()).to.equal(0);
     }
@@ -349,20 +386,13 @@ describe('Resources', () => {
     'should force schedule non-renderOutsideViewport resource when' +
       ' resource is not visible',
     () => {
-      const resource = {
-        getState: () => ResourceState.READY_FOR_LAYOUT,
-        isDisplayed: () => true,
-        isFixed: () => false,
-        isInViewport: () => false,
-        prerenderAllowed: () => true,
-        renderOutsideViewport: () => false,
-        idleRenderOutsideViewport: () => false,
-        getLayoutPriority: () => LayoutPriority.METADATA,
-        startLayout: () => {},
-        layoutScheduled: () => {},
-        getTaskId: () => 'resource#L',
-        applySizesAndMediaQuery: () => {},
-      };
+      const resource = createResource({
+        state: ResourceState.READY_FOR_LAYOUT,
+        isInViewport: false,
+        prerenderAllowed: true,
+        layoutPriority: LayoutPriority.METADATA,
+        taskId: 'resource#L',
+      });
       resources.scheduleLayoutOrPreload(
         resource,
         true,
@@ -378,20 +408,13 @@ describe('Resources', () => {
     'should schedule renderOutsideViewport resource when' +
       ' resource is not visible',
     () => {
-      const resource = {
-        getState: () => ResourceState.READY_FOR_LAYOUT,
-        isDisplayed: () => true,
-        isFixed: () => false,
-        isInViewport: () => false,
-        prerenderAllowed: () => true,
-        renderOutsideViewport: () => true,
-        idleRenderOutsideViewport: () => false,
-        getLayoutPriority: () => LayoutPriority.METADATA,
-        startLayout: () => {},
-        layoutScheduled: () => {},
-        getTaskId: () => 'resource#L',
-        applySizesAndMediaQuery: () => {},
-      };
+      const resource = createResource({
+        state: ResourceState.READY_FOR_LAYOUT,
+        prerenderAllowed: true,
+        renderOutsideViewport: true,
+        layoutPriority: LayoutPriority.METADATA,
+        taskId: 'resource#L',
+      });
       resources.scheduleLayoutOrPreload(resource, true);
       expect(resources.queue_.getSize()).to.equal(1);
       expect(resources.queue_.tasks_[0].forceOutsideViewport).to.be.false;
@@ -402,20 +425,14 @@ describe('Resources', () => {
     'should schedule idleRenderOutsideViewport resource when' +
       ' resource is not visible',
     () => {
-      const resource = {
-        getState: () => ResourceState.READY_FOR_LAYOUT,
-        isDisplayed: () => true,
-        isFixed: () => false,
-        isInViewport: () => false,
-        prerenderAllowed: () => true,
-        renderOutsideViewport: () => false,
-        idleRenderOutsideViewport: () => true,
-        getLayoutPriority: () => LayoutPriority.METADATA,
-        startLayout: () => {},
-        layoutScheduled: () => {},
-        getTaskId: () => 'resource#L',
-        applySizesAndMediaQuery: () => {},
-      };
+      const resource = createResource({
+        state: ResourceState.READY_FOR_LAYOUT,
+        isInViewport: false,
+        prerenderAllowed: true,
+        idleRenderOutsideViewport: true,
+        layoutPriority: LayoutPriority.METADATA,
+        taskId: 'resource#L',
+      });
       resources.scheduleLayoutOrPreload(resource, true);
       expect(resources.queue_.getSize()).to.equal(1);
       expect(resources.queue_.tasks_[0].forceOutsideViewport).to.be.false;
@@ -463,43 +480,6 @@ describe('Resources', () => {
     // The other task is not updated.
     expect(task2.priority).to.equal(LayoutPriority.ADS);
   });
-
-  describe('slow element ratio (ser)', () => {
-    const slowTask = {resource: {isInViewport: () => true}};
-    const fastTask = {resource: {isInViewport: () => false}};
-
-    it('No layouts --> 0', () => {
-      resources.firstVisibleTime_ = 1;
-      expect(resources.getSlowElementRatio()).equal(0);
-    });
-
-    it('0 slow / 1 total --> 0', () => {
-      resources.firstVisibleTime_ = 1;
-      resources.taskComplete_(fastTask);
-      expect(resources.getSlowElementRatio()).equal(0);
-    });
-
-    it('ser is 0 if page was never visible', () => {
-      resources.firstVisibleTime_ = -1;
-      resources.taskComplete_(slowTask);
-      expect(resources.getSlowElementRatio()).equal(0);
-    });
-
-    it('1 slow / 1 total --> 1', () => {
-      resources.firstVisibleTime_ = 1;
-      resources.taskComplete_(slowTask);
-      expect(resources.getSlowElementRatio()).equal(1);
-    });
-
-    it('9 slow/ 10 total --> 0.9', () => {
-      resources.firstVisibleTime_ = 1;
-      for (let i = 0; i < 9; i++) {
-        resources.taskComplete_(slowTask);
-      }
-      resources.taskComplete_(fastTask);
-      expect(resources.getSlowElementRatio()).equal(0.9);
-    });
-  });
 });
 
 describes.fakeWin(
@@ -639,15 +619,15 @@ describes.realWin('Resources discoverWork', {amp: true}, (env) => {
   function createElement(rect) {
     const element = env.win.document.createElement('amp-test');
     element.classList.add('i-amphtml-element');
+    element.R1 = () => false;
     element.signals = () => new Signals();
     element.whenBuilt = () => Promise.resolve();
     element.isBuilt = () => true;
-    element.build = () => Promise.resolve();
+    element.buildInternal = () => Promise.resolve();
     element.isUpgraded = () => true;
     element.updateLayoutBox = () => {};
     element.getPlaceholder = () => null;
     element.getLayoutPriority = () => LayoutPriority.CONTENT;
-    element.dispatchCustomEvent = () => {};
     element.getLayout = () => 'fixed';
 
     element.idleRenderOutsideViewport = () => true;
@@ -655,15 +635,14 @@ describes.realWin('Resources discoverWork', {amp: true}, (env) => {
     element.getAttribute = () => null;
     element.hasAttribute = () => false;
     element.getBoundingClientRect = () => rect;
-    element.applySizesAndMediaQuery = () => {};
     element.layoutCallback = () => Promise.resolve();
     element.viewportCallback = sandbox.spy();
     element.prerenderAllowed = () => true;
     element.renderOutsideViewport = () => true;
     element.isRelayoutNeeded = () => true;
-    element.pauseCallback = () => {};
+    element.pause = () => {};
+    element.unmount = () => {};
     element.unlayoutCallback = () => true;
-    element.unlayoutOnPause = () => true;
     element.togglePlaceholder = () => sandbox.spy();
     element.fakeComputedStyle = {
       marginTop: '0px',
@@ -737,55 +716,12 @@ describes.realWin('Resources discoverWork', {amp: true}, (env) => {
       .returns(VisibilityState.VISIBLE);
     viewportMock.expects('getRect').returns(layoutRectLtwh(0, 0, 300, 400));
     resource1.isBuilt = () => false;
-    const mediaSpy = sandbox.stub(resource1.element, 'applySizesAndMediaQuery');
     expect(resource1.hasBeenMeasured()).to.be.false;
     resource1.isBuilt = () => false;
 
     resources.discoverWork_();
 
     expect(resource1.hasBeenMeasured()).to.be.true;
-    expect(mediaSpy).to.be.calledOnce;
-  });
-
-  describe('intersect-resources', () => {
-    beforeEach(() => {
-      // Enable "intersect-resources" experiment.
-      resources.intersectionObserver_ = {};
-      resource1.intersect_ = resource2.intersect_ = true;
-    });
-
-    it('should not applySizesAndMediaQuery after build', () => {
-      resources.relayoutAll_ = false;
-
-      // Unmeasured elements.
-      env.sandbox.stub(resource1, 'applySizesAndMediaQuery');
-      env.sandbox.stub(resource1, 'hasBeenMeasured').returns(false);
-
-      // Measured elements that need relayout.
-      env.sandbox.stub(resource2, 'applySizesAndMediaQuery');
-      env.sandbox.stub(resource2, 'hasBeenMeasured').returns(true);
-      env.sandbox
-        .stub(resource2, 'getState')
-        .returns(ResourceState.NOT_LAID_OUT);
-
-      resources.discoverWork_();
-
-      // Neither should have applySizesOrMediaQuery() called.
-      expect(resource1.applySizesAndMediaQuery).to.not.be.called;
-      expect(resource2.applySizesAndMediaQuery).to.not.be.called;
-    });
-
-    it('should applySizesAndMediaQuery on relayout', () => {
-      resources.relayoutAll_ = true;
-
-      env.sandbox.stub(resource1, 'applySizesAndMediaQuery');
-      env.sandbox.stub(resource2, 'applySizesAndMediaQuery');
-
-      resources.discoverWork_();
-
-      expect(resource1.applySizesAndMediaQuery).to.be.called;
-      expect(resource2.applySizesAndMediaQuery).to.be.called;
-    });
   });
 
   it('should render two screens when visible', () => {
@@ -842,12 +778,11 @@ describes.realWin('Resources discoverWork', {amp: true}, (env) => {
     expect(resource2.state_).to.equal(ResourceState.LAYOUT_SCHEDULED);
   });
 
-  it('should prerender only one screen with prerenderSize = 1', () => {
+  it('should prerender only one screen in visibilityState=prerender', () => {
     resources.visible_ = false;
     sandbox
       .stub(resources.ampdoc, 'getVisibilityState')
       .returns(VisibilityState.PRERENDER);
-    resources.prerenderSize_ = 1;
     viewportMock.expects('getRect').returns(layoutRectLtwh(0, 0, 300, 1009));
 
     resources.discoverWork_();
@@ -856,19 +791,6 @@ describes.realWin('Resources discoverWork', {amp: true}, (env) => {
     expect(resources.queue_.tasks_[0].resource).to.equal(resource1);
   });
 
-  it('should NOT prerender anything with prerenderSize = 0', () => {
-    resources.visible_ = false;
-    sandbox
-      .stub(resources.ampdoc, 'getVisibilityState')
-      .returns(VisibilityState.PRERENDER);
-    resources.prerenderSize_ = 0;
-    viewportMock.expects('getRect').returns(layoutRectLtwh(0, 0, 300, 400));
-
-    resources.discoverWork_();
-
-    expect(resources.queue_.getSize()).to.equal(0);
-  });
-
   // TODO(dvoytenko, #12476): Make this test work with sinon 4.0.
   it.skip('should remeasure when requested and scheduled unloads', () => {
     resource1.state_ = ResourceState.LAYOUT_COMPLETE;
@@ -947,7 +869,8 @@ describes.realWin('Resources discoverWork', {amp: true}, (env) => {
     expect(resources.exec_.getSize()).to.equal(2);
 
     // Remove unloaded resources from exec queue.
-    resource2.unload();
+    resource2.abortController_ = null;
+    resource2.unlayout();
     resources.cleanupTasks_(resource2);
     expect(resources.exec_.getSize()).to.equal(1);
 
@@ -961,7 +884,8 @@ describes.realWin('Resources discoverWork', {amp: true}, (env) => {
     expect(resources.queue_.tasks_[0].resource).to.equal(resource2);
 
     // Removes them even from scheduling queue.
-    resource2.unload();
+    resource2.abortController_ = null;
+    resource2.unlayout();
     resources.cleanupTasks_(resource2, /* opt_removePending */ true);
     expect(resources.queue_.getSize()).to.equal(0);
     expect(resources.pendingBuildResources_.length).to.equal(1);
@@ -991,45 +915,6 @@ describes.realWin('Resources discoverWork', {amp: true}, (env) => {
     expect(resource1.element.layoutScheduleTime).to.be.greaterThan(0);
   });
 
-  describe('intersect-resources', () => {
-    beforeEach(() => {
-      // Enables the "intersect-resources" experiment.
-      resources.intersectionObserver_ = {};
-    });
-
-    it('should not remeasure before layout', () => {
-      sandbox.stub(resource1, 'hasBeenPremeasured').returns(false);
-      sandbox.stub(resource1, 'measure');
-
-      resources.scheduleLayoutOrPreload(resource1, /* layout */ true);
-      resources.work_();
-
-      expect(resources.exec_.getSize()).to.equal(1);
-      expect(resource1.measure).to.not.be.called;
-      expect(resource1.getState()).to.equal(ResourceState.LAYOUT_SCHEDULED);
-    });
-
-    it('should check premeasured rect before layout', () => {
-      sandbox.stub(resource1, 'hasBeenMeasured').returns(true);
-      sandbox.stub(resource1, 'hasBeenPremeasured').returns(true);
-      sandbox.stub(resource1, 'isDisplayed').returns(true);
-      resource1.isDisplayed
-        .withArgs(/* usePremeasuredRect */ true)
-        .returns(false);
-      sandbox.spy(resource1, 'layoutCanceled');
-
-      resources.scheduleLayoutOrPreload(resource1, /* layout */ true);
-      resources.work_();
-
-      expect(resources.exec_.getSize()).to.equal(0);
-      expect(resource1.isDisplayed).to.be.calledWith(
-        /* usePremeasuredRect */ true
-      );
-      expect(resource1.layoutCanceled).to.be.calledOnce;
-      expect(resource1.getState()).to.equal(ResourceState.READY_FOR_LAYOUT);
-    });
-  });
-
   it('should not schedule resource execution outside viewport', () => {
     resources.scheduleLayoutOrPreload(resource1, true);
     expect(resources.queue_.getSize()).to.equal(1);
@@ -1421,10 +1306,9 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
       reconstructWhenReparented() {
         return true;
       },
-      pauseCallback() {},
-      resumeCallback() {},
-      dispatchCustomEvent() {},
-      applySizesAndMediaQuery() {},
+      pause() {},
+      resume() {},
+      unmount() {},
       updateLayoutBox() {},
       getBoundingClientRect() {
         return layoutRectLtwh(0, 0, 0, 0);
@@ -1433,7 +1317,7 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
         return signals;
       },
     };
-    element.build = sandbox.stub().returns(Promise.resolve());
+    element.buildInternal = sandbox.stub().returns(Promise.resolve());
     return element;
   }
 
@@ -1489,12 +1373,12 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
     resources.documentReady_ = false;
     resources.add(child1);
     resources.upgraded(child1);
-    expect(child1.build).to.not.be.called;
+    expect(child1.buildInternal).to.not.be.called;
     resources.documentReady_ = true;
     resources.add(child2);
     const resource2 = stubBuild(Resource.forElementOptional(child2));
     resources.upgraded(child2);
-    expect(child2.build).to.be.calledOnce;
+    expect(child2.buildInternal).to.be.calledOnce;
     expect(schedulePassStub).to.not.be.called;
     return resource2.buildPromise.then(() => {
       expect(schedulePassStub).to.be.calledOnce;
@@ -1508,7 +1392,7 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
       const schedulePassStub = sandbox.stub(resources, 'schedulePass');
       child1.isBuilt = () => false;
       const child1BuildSpy = sandbox.spy();
-      child1.build = () => {
+      child1.buildInternal = () => {
         // Emulate an error happening during an element build.
         child1BuildSpy();
         return Promise.reject(new Error('child1-build-error'));
@@ -1541,11 +1425,11 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
       resources.documentReady_ = false;
       resources.add(child1);
       resources.upgraded(child1);
-      expect(child1.build.called).to.be.false;
+      expect(child1.buildInternal.called).to.be.false;
       expect(resources.pendingBuildResources_.length).to.be.equal(1);
       resources.add(child2);
       resources.upgraded(child2);
-      expect(child2.build.called).to.be.false;
+      expect(child2.buildInternal.called).to.be.false;
       expect(resources.pendingBuildResources_.length).to.be.equal(2);
       expect(resources.buildReadyResources_.calledTwice).to.be.true;
       const resource1 = Resource.forElementOptional(child1);
@@ -1557,22 +1441,6 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
     }
   );
 
-  it('should observe element after adding it', () => {
-    // Enables the 'intersect-resources' experiment.
-    const observer = (resources.intersectionObserver_ = {
-      observe: env.sandbox.spy(),
-    });
-    // Avoid creating a new Resource, which is tricky to spy on.
-    env.sandbox.stub(child1, 'reconstructWhenReparented').returns(false);
-    env.sandbox.stub(resource1, 'getState').returns(ResourceState.NOT_LAID_OUT);
-    env.sandbox.spy(resource1, 'requestMeasure');
-
-    resources.add(child1);
-
-    expect(resource1.requestMeasure).to.not.be.called;
-    expect(observer.observe).to.be.calledOnceWith(child1);
-  });
-
   describe('buildReadyResources_', () => {
     let schedulePassStub;
 
@@ -1592,15 +1460,15 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
       () => {
         resources.pendingBuildResources_ = [resource1, resource2];
         resources.buildReadyResources_();
-        expect(child1.build.called).to.be.false;
-        expect(child2.build.called).to.be.false;
+        expect(child1.buildInternal.called).to.be.false;
+        expect(child2.buildInternal.called).to.be.false;
         expect(resources.pendingBuildResources_.length).to.be.equal(2);
         expect(resources.schedulePass.called).to.be.false;
 
         child1.nextSibling = child2;
         resources.buildReadyResources_();
-        expect(child1.build.called).to.be.true;
-        expect(child2.build.called).to.be.false;
+        expect(child1.buildInternal.called).to.be.true;
+        expect(child2.buildInternal.called).to.be.false;
         expect(resources.pendingBuildResources_.length).to.be.equal(1);
         expect(resources.pendingBuildResources_[0]).to.be.equal(resource2);
         expect(resource1.isBuilding()).to.be.true;
@@ -1612,8 +1480,8 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
             child2.parentNode = parent;
             parent.nextSibling = true;
             resources.buildReadyResources_();
-            expect(child1.build).to.be.calledOnce;
-            expect(child2.build.called).to.be.true;
+            expect(child1.buildInternal).to.be.calledOnce;
+            expect(child2.buildInternal.called).to.be.true;
             expect(resources.pendingBuildResources_.length).to.be.equal(0);
             expect(resource2.isBuilding()).to.be.true;
             return resource2.buildPromise;
@@ -1631,7 +1499,7 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
     it('should NOT build past the root node when pending', () => {
       resources.pendingBuildResources_ = [resource1];
       resources.buildReadyResources_();
-      expect(child1.build.called).to.be.false;
+      expect(child1.buildInternal.called).to.be.false;
       expect(resources.pendingBuildResources_.length).to.be.equal(1);
       expect(resources.schedulePass.called).to.be.false;
 
@@ -1639,7 +1507,7 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
       parent.nextSibling = true;
       sandbox.stub(resources.ampdoc, 'getRootNode').returns(parent);
       resources.buildReadyResources_();
-      expect(child1.build.called).to.be.false;
+      expect(child1.buildInternal.called).to.be.false;
       expect(resources.pendingBuildResources_.length).to.be.equal(1);
       expect(resources.schedulePass.called).to.be.false;
     });
@@ -1647,8 +1515,8 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
     it('should not try to build resources already being built', () => {
       resources.pendingBuildResources_ = [resource1, resource2];
       resources.buildReadyResources_();
-      expect(child1.build.called).to.be.false;
-      expect(child2.build.called).to.be.false;
+      expect(child1.buildInternal.called).to.be.false;
+      expect(child2.buildInternal.called).to.be.false;
       expect(resources.pendingBuildResources_.length).to.be.equal(2);
 
       const newChild = createElementWithResource(3)[0];
@@ -1656,7 +1524,7 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
       const newResource = newChild['__AMP__RESOURCE'];
       const child1BuildSpy = sandbox.spy();
       child1.nextSibling = child2;
-      child1.build = () => {
+      child1.buildInternal = () => {
         // Simulate parent elements adding children elements to simulate
         // the infinite loop of building pending resources and make sure
         // that we're handling it well.
@@ -1667,8 +1535,8 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
       };
       resources.buildReadyResources_();
       expect(child1BuildSpy.called).to.be.true;
-      expect(child2.build.called).to.be.false;
-      expect(newChild.build.called).to.be.true;
+      expect(child2.buildInternal.called).to.be.false;
+      expect(newChild.buildInternal.called).to.be.true;
       expect(resources.pendingBuildResources_.length).to.be.equal(1);
       expect(resources.pendingBuildResources_[0]).to.be.equal(resource2);
 
@@ -1676,8 +1544,8 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
       parent.nextSibling = true;
       resources.buildReadyResources_();
       expect(child1BuildSpy.calledTwice).to.be.false;
-      expect(child2.build.called).to.be.true;
-      expect(newChild.build.calledTwice).to.be.false;
+      expect(child2.buildInternal.called).to.be.true;
+      expect(newChild.buildInternal.calledTwice).to.be.false;
       expect(resources.pendingBuildResources_.length).to.be.equal(0);
     });
 
@@ -1692,15 +1560,15 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
           resource2,
         ];
         const child1BuildSpy = sandbox.spy();
-        child1.build = () => {
+        child1.buildInternal = () => {
           // Emulate an error happening during an element build.
           child1BuildSpy();
           return Promise.reject(new Error('child1-build-error'));
         };
         resources.buildReadyResources_();
         expect(child1BuildSpy.called).to.be.true;
-        expect(child2.build.called).to.be.true;
-        expect(parent.build.called).to.be.true;
+        expect(child2.buildInternal.called).to.be.true;
+        expect(parent.buildInternal.called).to.be.true;
         expect(resources.pendingBuildResources_.length).to.be.equal(0);
         return Promise.all([
           parentResource.buildPromise,
@@ -1732,7 +1600,7 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
         resources.documentReady_ = true;
         resources.pendingBuildResources_ = [resource1];
         const child1BuildSpy = sandbox.spy();
-        child1.build = () => {
+        child1.buildInternal = () => {
           // Emulate an error happening during an element build.
           child1BuildSpy();
           return Promise.reject(new Error('child1-build-error'));
@@ -1769,6 +1637,26 @@ describes.fakeWin('Resources.add/upgrade/remove', {amp: true}, (env) => {
     });
   });
 
+  it("remove should remove all of a resource's tasks", () => {
+    const states = [
+      ResourceState.NOT_LAID_OUT,
+      ResourceState.READY_FOR_LAYOUT,
+      ResourceState.LAYOUT_SCHEDULED,
+    ];
+
+    states.forEach((state) => {
+      resource1.state_ = state;
+      resources.exec_.enqueue({id: 1, resource: resource1});
+      resources.queue_.enqueue({id: 1, resource: resource1});
+
+      expect(resources.exec_.getSize()).to.equal(1);
+      expect(resources.queue_.getSize()).to.equal(1);
+      resources.remove(child1);
+      expect(resources.exec_.getSize()).to.equal(0);
+      expect(resources.queue_.getSize()).to.equal(0);
+    });
+  });
+
   describe('reparent', () => {
     let scheduleBuildStub;
     let resource;
diff --git a/test/unit/test-runtime.js b/test/unit/test-runtime.js
index 9111562e0f697..cca24713de832 100644
--- a/test/unit/test-runtime.js
+++ b/test/unit/test-runtime.js
@@ -30,10 +30,10 @@ import {
 } from '../../src/service';
 import {installAmpdocServices} from '../../src/service/core-services';
 import {installPlatformService} from '../../src/service/platform-impl';
+import {installTemplatesServiceForDoc} from '../../src/service/template-impl';
 import {installTimerService} from '../../src/service/timer-impl';
-import {setShadowDomSupportedVersionForTesting} from '../../src/web-components';
-import {toArray} from '../../src/types';
-import {toggleExperiment} from '../../src/experiments';
+import {setShadowDomSupportedVersionForTesting} from '../../src/core/dom/web-components';
+import {toArray} from '../../src/core/types/array';
 import {vsyncForTesting} from '../../src/service/vsync-impl';
 
 describes.fakeWin(
@@ -48,6 +48,11 @@ describes.fakeWin(
     let ampdocServiceMock;
     let extensionElementIndex;
 
+    function runChunks(elementOrAmpDoc) {
+      clock.tick(1); // for early frame
+      runChunksForTesting(elementOrAmpDoc);
+    }
+
     beforeEach(() => {
       win = env.win;
       clock = env.sandbox.useFakeTimers();
@@ -61,7 +66,7 @@ describes.fakeWin(
       ampdocServiceMock = env.sandbox.mock(ampdocService);
       win.AMP = [];
       win.__AMP_SERVICES = {
-        ampdoc: {obj: ampdocService},
+        ampdoc: {obj: ampdocService, ctor: Object},
       };
       const ampdoc = new AmpDocSingle(win);
       ampdocService.getSingleDoc = () => ampdoc;
@@ -72,12 +77,14 @@ describes.fakeWin(
       installAmpdocServices(ampdoc);
     });
 
-    function regularExtension(fn, opt_version) {
+    function regularExtension(fn, opt_rtvVersion) {
       return {
         n: 'amp-test-element' + extensionElementIndex++,
+        ev: '0.1',
+        l: true,
         f: fn,
         // Default version of uncompiled sources.
-        v: opt_version || '$internalRuntimeVersion$',
+        v: opt_rtvVersion || '$internalRuntimeVersion$',
       };
     }
 
@@ -165,7 +172,7 @@ describes.fakeWin(
       );
       expect(queueExtensions).to.have.length(3);
       const promise = adopt(win);
-      runChunksForTesting(win.document);
+      runChunks(win.document);
       return promise
         .then(() => {
           expect(queueExtensions).to.have.length(0);
@@ -176,7 +183,7 @@ describes.fakeWin(
               progress += '4';
             })
           );
-          runChunksForTesting(win.document);
+          runChunks(win.document);
           return promise;
         })
         .then(() => {
@@ -187,7 +194,7 @@ describes.fakeWin(
               progress += '5';
             })
           );
-          runChunksForTesting(win.document);
+          runChunks(win.document);
           return promise;
         })
         .then(() => {
@@ -202,7 +209,6 @@ describes.fakeWin(
     );
 
     it('should not maybePumpEarlyFrame when body not yet present', () => {
-      toggleExperiment(win, 'pump-early-frame', true);
       // Make document.body be null on first invocation to simulate
       // JS executing before the rest of the doc has been parsed.
       const {body} = win.document;
@@ -223,14 +229,12 @@ describes.fakeWin(
       'should not maybePumpEarlyFrame ' +
         'when a renderDelayingExtension is present',
       () => {
-        toggleExperiment(win, 'pump-early-frame', true);
         win.document.body.appendChild(document.createElement('amp-experiment'));
         extensionRegistrationTest();
       }
     );
 
     it('should maybePumpEarlyFrame and delay extension execution', () => {
-      toggleExperiment(win, 'pump-early-frame', true);
       let progress = '';
       const queueExtensions = win.AMP;
       const highPriority = regularExtension((amp) => {
@@ -284,7 +288,7 @@ describes.fakeWin(
           expect(queueExtensions).to.have.length(4);
           clock.tick(1);
           expect(queueExtensions).to.have.length(0);
-          runChunksForTesting(win.document);
+          runChunks(win.document);
           return promise;
         })
         .then(() => {
@@ -295,7 +299,7 @@ describes.fakeWin(
               progress += '5';
             })
           );
-          runChunksForTesting(win.document);
+          runChunks(win.document);
           return promise;
         })
         .then(() => {
@@ -316,15 +320,19 @@ describes.fakeWin(
       });
       win.AMP.push({
         n: 'ext2',
+        ev: '0.1',
+        l: true,
         p: 'high',
         f: (amp) => {
           expect(amp).to.equal(win.AMP);
           progress += 'HIGH';
         },
+        v: '$internalRuntimeVersion$',
       });
       expect(queueExtensions).to.have.length(2);
       expect(progress).to.equal('');
       const promise = adopt(win);
+      clock.tick(1); // await early frame
       return promise
         .then(() => {
           // Notice the queue is down to 0 but there is a micro task to execute
@@ -341,135 +349,21 @@ describes.fakeWin(
           expect(progress).to.equal('1HIGH');
           win.AMP.push({
             n: 'ext1',
+            ev: '0.1',
+            l: true,
             f: (amp) => {
               expect(amp).to.equal(win.AMP);
               progress += 'A';
             },
+            v: '$internalRuntimeVersion$',
           });
-          runChunksForTesting(win.document);
+          runChunks(win.document);
           return promise.then(() => {
             expect(progress).to.equal('1HIGHA');
           });
         });
     });
 
-    it('loads and waits for a single intermediate bundles', () => {
-      // New format: {n:string, f:function(), i: <string|Array<string>}.
-      let progress = '';
-      const queueExtensions = win.AMP;
-
-      win.AMP.push({
-        n: 'ext2',
-        f: (amp) => {
-          expect(amp).to.equal(win.AMP);
-          progress += 'C';
-        },
-        i: 'ext1',
-      });
-      win.AMP.push({
-        n: 'ext1',
-        f: (amp) => {
-          expect(amp).to.equal(win.AMP);
-          progress += 'A';
-        },
-        i: '_base_ext',
-      });
-
-      win.AMP.push({
-        n: '_base_ext',
-        f: (amp) => {
-          expect(amp).to.equal(win.AMP);
-          progress += 'B';
-        },
-      });
-
-      let script = win.document.querySelector('[data-script=_base_ext]');
-      expect(script).to.be.null;
-      const promise = adopt(win);
-      const e = Services.extensionsFor(win);
-
-      expect(queueExtensions).to.have.length(0);
-      expect(progress).to.equal('');
-      runChunksForTesting(win.document);
-      script = win.document.querySelector('[data-script=_base_ext]');
-      expect(script).to.be.not.null;
-      return promise.then(() => {
-        // ext1 should not be executed yet and needs to wait on _base_ext
-        expect(progress).to.equal('B');
-        return e.waitForExtension(win, '_base_ext').then(() => {
-          return e.waitForExtension(win, 'ext1').then(() => {
-            expect(progress).to.equal('BA');
-            return e.waitForExtension(win, 'ext2').then(() => {
-              expect(progress).to.equal('BAC');
-            });
-          });
-        });
-      });
-    });
-
-    it('loads and waits for a multiple intermediate bundles', () => {
-      // New format: {n:string, f:function(), i: <string|Array<string>}.
-      let progress = '';
-      const queueExtensions = win.AMP;
-      win.AMP.push({
-        n: 'ext1',
-        f: (amp) => {
-          expect(amp).to.equal(win.AMP);
-          progress += 'A';
-        },
-        i: ['_base_ext1', '_base_ext2'],
-      });
-
-      win.AMP.push({
-        n: '_base_ext2',
-        f: (amp) => {
-          expect(amp).to.equal(win.AMP);
-          progress += 'B';
-        },
-        i: ['_base_ext1'],
-      });
-
-      win.AMP.push({
-        n: '_base_ext1',
-        f: (amp) => {
-          expect(amp).to.equal(win.AMP);
-          progress += 'C';
-        },
-      });
-
-      let script1 = win.document.querySelector('[data-script=_base_ext1]');
-      let script2 = win.document.querySelector('[data-script=_base_ext2]');
-      expect(script1).to.be.null;
-      expect(script2).to.be.null;
-      const promise = adopt(win);
-      const e = Services.extensionsFor(win);
-
-      expect(queueExtensions).to.have.length(0);
-      expect(progress).to.equal('');
-      runChunksForTesting(win.document);
-      script1 = win.document.querySelector('[data-script=_base_ext1]');
-      script2 = win.document.querySelector('[data-script=_base_ext2]');
-      expect(script1).to.not.be.null;
-      expect(script2).to.not.be.null;
-
-      return promise.then(() => {
-        // ext1 should not be executed yet and needs to wait on _base_ext
-        // Notice that ext0 executes before A
-        expect(progress).to.equal('C');
-        runChunksForTesting(win.document);
-        return e
-          .waitForExtension(win, '_base_ext2')
-          .then(() => {
-            expect(progress).to.equal('CB');
-          })
-          .then(() => {
-            return e.waitForExtension(win, 'ext1').then(() => {
-              expect(progress).to.equal('CBA');
-            });
-          });
-      });
-    });
-
     it('should wait for body before processing extensions', function* () {
       let bodyResolver;
       const bodyPromise = new Promise((resolve) => {
@@ -507,7 +401,7 @@ describes.fakeWin(
         })
       );
       const promise = adopt(win);
-      runChunksForTesting(win.document);
+      runChunks(win.document);
 
       yield waitNext(promise);
       // Extensions are still unprocessed
@@ -520,25 +414,24 @@ describes.fakeWin(
           progress += '4';
         })
       );
-      runChunksForTesting(win.document);
+      runChunks(win.document);
 
       yield waitNext(promise);
       expect(progress).to.equal('');
 
       // Body is available now.
       bodyResolver();
-      runChunksForTesting(win.document);
+      runChunks(win.document);
 
       yield waitNext(promise);
       expect(progress).to.equal('1234');
       expect(queueExtensions).to.have.length(0);
     });
 
-    it('should load correct extension version', function* () {
+    it('should load correct extension version', async function () {
       self.__AMP_MODE = {
         rtvVersion: 'test-version',
       };
-      toggleExperiment(win, 'version-locking', true);
       function addExisting(index) {
         const s = document.createElement('script');
         const name = 'amp-test-element' + index;
@@ -587,9 +480,9 @@ describes.fakeWin(
         })
       );
       const promise = adopt(win);
-      runChunksForTesting(win.document);
+      runChunks(win.document);
 
-      yield waitNext(promise);
+      await waitNext(promise);
       // Extensions are still unprocessed
       expect(progress).to.equal('');
 
@@ -607,23 +500,23 @@ describes.fakeWin(
         }, 'version123')
       );
       // Add legacy element (5) and eagarly ask for its load as ElementStub does.
-      Services.extensionsFor(win).preloadExtension('amp-test-element5', false);
+      Services.extensionsFor(win).preloadExtension('amp-test-element5', '0.1');
       win.AMP.push(
         regularExtension((amp) => {
           expect(amp).to.equal(win.AMP);
           progress += '5';
         }, 'version123')
       );
-      runChunksForTesting(win.document);
+      runChunks(win.document);
 
-      yield waitNext(promise);
+      await waitNext(promise);
       expect(progress).to.equal('');
 
       // Body is available now.
       bodyResolver();
-      runChunksForTesting(win.document);
+      runChunks(win.document);
 
-      yield waitNext(promise);
+      await waitNext(promise);
       expect(progress).to.equal('134');
       expect(queueExtensions).to.have.length(0);
       expect(s1.getAttribute('i-amphtml-loaded-new-version')).to.equal(
@@ -668,7 +561,7 @@ describes.fakeWin(
         })
       );
       const promise = adopt(win);
-      runChunksForTesting(win.document);
+      runChunks(win.document);
       yield promise;
       expect(progress).to.equal('13');
     });
@@ -685,7 +578,6 @@ describes.fakeWin(
 
       it('should export properties to global AMP object', () => {
         expect(win.AMP.BaseElement).to.be.a('function');
-        expect(win.AMP.BaseTemplate).to.be.a('function');
         expect(win.AMP.registerElement).to.be.a('function');
         expect(win.AMP.registerTemplate).to.be.a('function');
         expect(win.AMP.setTickFunction).to.be.a('function');
@@ -698,6 +590,47 @@ describes.fakeWin(
         expect(win.AMP.attachShadowDocAsStream).to.not.exist;
       });
 
+      it('should register template', async () => {
+        const ampdoc = ampdocService.getSingleDoc();
+        installTemplatesServiceForDoc(ampdoc);
+        const templates = Services.templatesForDoc(ampdoc);
+
+        class TemplateType {}
+
+        ampdoc.declareExtension('amp-ext', '0.1');
+        win.AMP.push({
+          n: 'amp-ext',
+          ev: '0.1',
+          l: true,
+          f: (amp) => {
+            amp.registerTemplate('amp-ext', TemplateType);
+          },
+          v: '$internalRuntimeVersion$',
+        });
+        runChunks(win.document);
+
+        await extensions.waitForExtension('amp-ext', '0.1');
+
+        // Extension is added immediately. Can't find for micro-tasks here.
+        const extHolder = extensions.extensions_['amp-ext:0.1'];
+        const ext = extHolder.extension;
+        expect(ext.elements['amp-ext']).not.exist;
+
+        const templateElement = win.document.createElement('template');
+        templateElement.setAttribute('type', 'amp-ext');
+        await templates.whenReady(templateElement);
+
+        const shadowRoot = document.createDocumentFragment();
+        const ampdoc2 = new AmpDocShadow(win, 'https://acme.org/', shadowRoot);
+        installTemplatesServiceForDoc(ampdoc2);
+        const templates2 = Services.templatesForDoc(ampdoc2);
+        expect(extHolder.docFactories).to.have.length(1);
+        extHolder.docFactories[0](ampdoc2);
+        const templateElement2 = win.document.createElement('template');
+        templateElement2.setAttribute('type', 'amp-ext');
+        await templates2.whenReady(templateElement2);
+      });
+
       it('should register element without CSS', function* () {
         const ampdoc = ampdocService.getSingleDoc();
         const servicePromise = getServicePromise(win, 'amp-ext');
@@ -706,18 +639,22 @@ describes.fakeWin(
           'installStylesForDoc'
         );
 
-        ampdoc.declareExtension('amp-ext');
+        ampdoc.declareExtension('amp-ext', '0.1');
         win.AMP.push({
           n: 'amp-ext',
+          ev: '0.1',
+          l: true,
           f: (amp) => {
             amp.registerElement('amp-ext', win.AMP.BaseElement);
           },
+          v: '$internalRuntimeVersion$',
         });
-        runChunksForTesting(win.document);
-        yield extensions.waitForExtension(win, 'amp-ext');
+        runChunks(win.document);
+
+        yield extensions.waitForExtension('amp-ext', '0.1');
 
         // Extension is added immediately. Can't find for micro-tasks here.
-        const ext = extensions.extensions_['amp-ext'].extension;
+        const ext = extensions.extensions_['amp-ext:0.1'].extension;
         expect(ext.elements['amp-ext']).exist;
         expect(ext.elements['amp-ext'].implementationClass).to.equal(
           win.AMP.BaseElement
@@ -733,7 +670,7 @@ describes.fakeWin(
 
         // Service and extensions are resolved.
         yield Promise.all([
-          extensions.waitForExtension(win, 'amp-ext'),
+          extensions.waitForExtension('amp-ext', '0.1'),
           servicePromise,
         ]);
       });
@@ -748,18 +685,21 @@ describes.fakeWin(
             installStylesCallback = cb;
           });
 
-        ampdoc.declareExtension('amp-ext');
+        ampdoc.declareExtension('amp-ext', '0.1');
         win.AMP.push({
           n: 'amp-ext',
+          ev: '0.1',
+          l: true,
           f: (amp) => {
             amp.registerElement('amp-ext', win.AMP.BaseElement, 'a{}');
           },
+          v: '$internalRuntimeVersion$',
         });
-        runChunksForTesting(win.document);
+        runChunks(win.document);
 
         // Extension is added immediately. Can't find for micro-tasks here.
-        yield extensions.waitForExtension(win, 'amp-ext');
-        const ext = extensions.extensions_['amp-ext'].extension;
+        yield extensions.waitForExtension('amp-ext', '0.1');
+        const ext = extensions.extensions_['amp-ext:0.1'].extension;
         expect(ext.elements['amp-ext']).exist;
         expect(ext.elements['amp-ext'].implementationClass).to.equal(
           win.AMP.BaseElement
@@ -784,7 +724,7 @@ describes.fakeWin(
 
         // Service and extensions are resolved.
         yield Promise.all([
-          extensions.waitForExtension(win, 'amp-ext'),
+          extensions.waitForExtension('amp-ext', '0.1'),
           servicePromise,
         ]);
       });
@@ -792,19 +732,22 @@ describes.fakeWin(
       it('should register doc-service as ctor and install imm', function* () {
         class Service1 {}
         const ampdoc = new AmpDocSingle(win);
-        ampdoc.declareExtension('amp-ext');
+        ampdoc.declareExtension('amp-ext', '0.1');
         ampdocServiceMock.expects('getAmpDoc').returns(ampdoc).atLeast(1);
         win.AMP.push({
           n: 'amp-ext',
+          ev: '0.1',
+          l: true,
           f: (amp) => {
             amp.registerServiceForDoc('service1', Service1);
           },
+          v: '$internalRuntimeVersion$',
         });
-        runChunksForTesting(win.document);
+        runChunks(win.document);
 
         // No factories
-        yield extensions.waitForExtension(win, 'amp-ext');
-        const extHolder = extensions.extensions_['amp-ext'];
+        yield extensions.waitForExtension('amp-ext', '0.1');
+        const extHolder = extensions.extensions_['amp-ext:0.1'];
         expect(extHolder.docFactories).to.have.length(1);
 
         // Already installed.
@@ -821,19 +764,22 @@ describes.fakeWin(
           return {str: 'A'};
         }
         const ampdoc = new AmpDocSingle(win);
-        ampdoc.declareExtension('amp-ext');
+        ampdoc.declareExtension('amp-ext', '0.1');
         ampdocServiceMock.expects('getAmpDoc').returns(ampdoc).atLeast(1);
         win.AMP.push({
           n: 'amp-ext',
+          ev: '0.1',
+          l: true,
           f: (amp) => {
             amp.registerServiceForDoc('service1', factory);
           },
+          v: '$internalRuntimeVersion$',
         });
-        runChunksForTesting(win.document);
+        runChunks(win.document);
 
         // No factories
-        yield extensions.waitForExtension(win, 'amp-ext');
-        const extHolder = extensions.extensions_['amp-ext'];
+        yield extensions.waitForExtension('amp-ext', '0.1');
+        const extHolder = extensions.extensions_['amp-ext:0.1'];
         expect(extHolder.docFactories).to.have.length(1);
 
         // Already installed.
@@ -854,7 +800,6 @@ describes.fakeWin(
 
       it('should export properties to global AMP object', () => {
         expect(win.AMP.BaseElement).to.be.a('function');
-        expect(win.AMP.BaseTemplate).to.be.a('function');
         expect(win.AMP.registerElement).to.be.a('function');
         expect(win.AMP.registerTemplate).to.be.a('function');
         expect(win.AMP.setTickFunction).to.be.a('function');
@@ -876,15 +821,18 @@ describes.fakeWin(
 
         win.AMP.push({
           n: 'amp-ext',
+          ev: '0.1',
+          l: true,
           f: (amp) => {
             amp.registerElement('amp-ext', win.AMP.BaseElement);
           },
+          v: '$internalRuntimeVersion$',
         });
-        runChunksForTesting(win.document);
+        runChunks(win.document);
 
         // Extension is added immediately. Can't find for micro-tasks here.
-        yield extensions.waitForExtension(win, 'amp-ext');
-        const extHolder = extensions.extensions_['amp-ext'];
+        yield extensions.waitForExtension('amp-ext', '0.1');
+        const extHolder = extensions.extensions_['amp-ext:0.1'];
         const ext = extHolder.extension;
         expect(ext.elements['amp-ext']).exist;
         expect(ext.elements['amp-ext'].implementationClass).to.equal(
@@ -907,7 +855,7 @@ describes.fakeWin(
 
         // Service and extensions are resolved.
         yield Promise.all([
-          extensions.waitForExtension(win, 'amp-ext'),
+          extensions.waitForExtension('amp-ext', '0.1'),
           servicePromise,
         ]);
       });
@@ -923,15 +871,18 @@ describes.fakeWin(
 
         win.AMP.push({
           n: 'amp-ext',
+          ev: '0.1',
+          l: true,
           f: (amp) => {
             amp.registerElement('amp-ext', win.AMP.BaseElement, 'a{}');
           },
+          v: '$internalRuntimeVersion$',
         });
-        runChunksForTesting(win.document);
+        runChunks(win.document);
 
         // Extension is added immediately. Can't find for micro-tasks here.
-        yield extensions.waitForExtension(win, 'amp-ext');
-        const extHolder = extensions.extensions_['amp-ext'];
+        yield extensions.waitForExtension('amp-ext', '0.1');
+        const extHolder = extensions.extensions_['amp-ext:0.1'];
         const ext = extHolder.extension;
         expect(ext.elements['amp-ext']).exist;
         expect(ext.elements['amp-ext'].implementationClass).to.equal(
@@ -964,7 +915,7 @@ describes.fakeWin(
 
         // Service and extensions are resolved.
         yield Promise.all([
-          extensions.waitForExtension(win, 'amp-ext'),
+          extensions.waitForExtension('amp-ext', '0.1'),
           servicePromise,
         ]);
       });
@@ -973,15 +924,18 @@ describes.fakeWin(
         class Service1 {}
         win.AMP.push({
           n: 'amp-ext',
+          ev: '0.1',
+          l: true,
           f: (amp) => {
             amp.registerServiceForDoc('service1', Service1);
           },
+          v: '$internalRuntimeVersion$',
         });
-        runChunksForTesting(win.document);
+        runChunks(win.document);
 
         // Factory recorded.
-        yield extensions.waitForExtension(win, 'amp-ext');
-        const extHolder = extensions.extensions_['amp-ext'];
+        yield extensions.waitForExtension('amp-ext', '0.1');
+        const extHolder = extensions.extensions_['amp-ext:0.1'];
         expect(extHolder.docFactories).to.have.length(1);
 
         const shadowRoot = document.createDocumentFragment();
@@ -1073,13 +1027,16 @@ describes.realWin(
         expect(ret.viewer).to.not.exist;
       });
 
-      it('should install doc services', () => {
+      it('should install doc services', async () => {
         class Service1 {}
         win.AMP.push({
           n: 'amp-ext',
+          ev: '0.1',
+          l: true,
           f: (amp) => {
             amp.registerServiceForDoc('service1', Service1);
           },
+          v: '$internalRuntimeVersion$',
         });
 
         const script = win.document.createElement('script');
@@ -1092,12 +1049,12 @@ describes.realWin(
 
         win.AMP.attachShadowDoc(hostElement, importDoc, docUrl);
 
-        return extensions.waitForExtension(win, 'amp-ext').then(() => {
-          // Factories have been applied.
-          expect(getServiceForDoc(ampdoc, 'service1')).to.be.instanceOf(
-            Service1
-          );
-        });
+        // Extensions-known has been set.
+        await ampdoc.whenExtensionsKnown();
+
+        // Factories have been applied.
+        await extensions.waitForExtension('amp-ext', '0.1');
+        expect(getServiceForDoc(ampdoc, 'service1')).to.be.instanceOf(Service1);
       });
 
       it('should pass init parameters to viewer', () => {
@@ -1254,7 +1211,7 @@ describes.realWin(
           .exist;
       });
 
-      it('should import extension element', () => {
+      it('should import extension element', async () => {
         extensionsMock
           .expects('preloadExtension')
           .withExactArgs('amp-ext1', '0.1')
@@ -1277,6 +1234,9 @@ describes.realWin(
         win.AMP.attachShadowDoc(hostElement, importDoc, docUrl);
         expect(win.document.querySelector('script[custom-element="amp-ext1"]'))
           .to.not.exist;
+
+        // Extensions-known has been set.
+        await ampdoc.whenExtensionsKnown();
       });
 
       it('should import module/nomodule extension element', () => {
@@ -1495,16 +1455,19 @@ describes.realWin(
           expect(shadowDoc.viewer).to.not.exist;
         });
 
-        it('should install doc services', () => {
+        it('should install doc services', async () => {
           shadowDoc = win.AMP.attachShadowDocAsStream(hostElement, docUrl);
           writer = shadowDoc.writer;
 
           class Service1 {}
           win.AMP.push({
             n: 'amp-ext',
+            ev: '0.1',
+            l: true,
             f: (amp) => {
               amp.registerServiceForDoc('service1', Service1);
             },
+            v: '$internalRuntimeVersion$',
           });
 
           writer.write(
@@ -1512,14 +1475,16 @@ describes.realWin(
           );
           writer.write('<body>');
 
-          return ampdoc.waitForBodyOpen().then(() => {
-            return extensions.waitForExtension(win, 'amp-ext').then(() => {
-              // Factories have been applied.
-              expect(getServiceForDoc(ampdoc, 'service1')).to.be.instanceOf(
-                Service1
-              );
-            });
-          });
+          await ampdoc.waitForBodyOpen();
+
+          // Extensions-known has been set.
+          await ampdoc.whenExtensionsKnown();
+
+          // Factories have been applied.
+          await extensions.waitForExtension('amp-ext', '0.1');
+          expect(getServiceForDoc(ampdoc, 'service1')).to.be.instanceOf(
+            Service1
+          );
         });
 
         it('should pass init parameters to viewer', () => {
@@ -1668,7 +1633,7 @@ describes.realWin(
           });
         });
 
-        it('should ignore runtime extension', () => {
+        it('should ignore runtime extension', async () => {
           shadowDoc = win.AMP.attachShadowDocAsStream(hostElement, docUrl);
           writer = shadowDoc.writer;
           extensionsMock.expects('preloadExtension').never();
@@ -1676,7 +1641,10 @@ describes.realWin(
             '<script src="https://cdn.ampproject.org/v0.js"></script>'
           );
           writer.write('<body>');
-          return ampdoc.waitForBodyOpen();
+          await ampdoc.waitForBodyOpen();
+
+          // Extensions-known has been set.
+          await ampdoc.whenExtensionsKnown();
         });
 
         it('should ignore unknown script', () => {
@@ -1699,7 +1667,7 @@ describes.realWin(
           });
         });
 
-        it('should import extension element', () => {
+        it('should import extension element', async () => {
           shadowDoc = win.AMP.attachShadowDocAsStream(hostElement, docUrl);
           writer = shadowDoc.writer;
           extensionsMock
@@ -1717,11 +1685,14 @@ describes.realWin(
             '<script custom-element="amp-ext1" src="https://cdn.ampproject.org/v0/amp-ext1-0.1.js"></script>'
           );
           writer.write('<body>');
-          return ampdoc.waitForBodyOpen().then(() => {
-            expect(
-              win.document.querySelector('script[custom-element="amp-ext1"]')
-            ).to.not.exist;
-          });
+          await ampdoc.waitForBodyOpen();
+
+          // Extensions-known has been set.
+          await ampdoc.whenExtensionsKnown();
+
+          expect(
+            win.document.querySelector('script[custom-element="amp-ext1"]')
+          ).to.not.exist;
         });
 
         it('should import extension template', () => {
diff --git a/test/unit/test-sanitizer.js b/test/unit/test-sanitizer.js
index 19ddb8e745bbd..03ec8cd0ee6a5 100644
--- a/test/unit/test-sanitizer.js
+++ b/test/unit/test-sanitizer.js
@@ -19,7 +19,7 @@ import {sanitizeHtml, sanitizeTagsForTripleMustache} from '../../src/sanitizer';
 let sanitize;
 let html;
 
-describe('Caja-based', () => {
+describes.sandboxed('Caja-based', {}, () => {
   beforeEach(() => {
     html = document.createElement('html');
     const documentEl = {documentElement: html};
@@ -331,10 +331,7 @@ function runSanitizerTests() {
       );
     });
 
-    // TODO(choumx): HTTPS-only URI attributes are not enforced consistently
-    // in the sanitizer yet. E.g. amp-video requires HTTPS, amp-img does not.
-    // Unskip when this is fixed.
-    it.skip('should not allow source::src with invalid protocol', () => {
+    it('should not allow source::src with invalid protocol', () => {
       expect(sanitize('<source src="http://www.foo.com">')).to.equal(
         '<source src="">'
       );
diff --git a/test/unit/test-scheduler.js b/test/unit/test-scheduler.js
new file mode 100644
index 0000000000000..dd6e3a48cca84
--- /dev/null
+++ b/test/unit/test-scheduler.js
@@ -0,0 +1,761 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import * as fakeTimers from '@sinonjs/fake-timers';
+import {LayoutPriority} from '../../src/layout';
+import {READY_SCAN_SIGNAL} from '../../src/service/resources-interface';
+import {Scheduler} from '../../src/service/scheduler';
+import {createElementWithAttributes} from '../../src/dom';
+import {installIntersectionObserverStub} from '../../testing/intersection-observer-stub';
+
+describes.realWin('Scheduler', {amp: true}, (env) => {
+  let win, doc, ampdoc;
+  let setAmpdocReady;
+  let clock;
+  let intersectionObserverStub;
+  let scheduler;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    ampdoc = env.ampdoc;
+
+    let ampdocReady = false;
+    let ampdocReadyResolver;
+    const ampdocReadyPromise = new Promise((resolve) => {
+      ampdocReadyResolver = resolve;
+    });
+    setAmpdocReady = () => {
+      ampdocReady = true;
+      ampdocReadyResolver();
+      return ampdocReadyPromise.then(() => {});
+    };
+    env.sandbox.stub(ampdoc, 'whenReady').returns(ampdocReadyPromise);
+    env.sandbox.stub(ampdoc, 'isReady').callsFake(() => ampdocReady);
+
+    delete win.requestIdleCallback;
+    clock = fakeTimers.withGlobal(win).install();
+    win.requestIdleCallback = (callback) => {
+      win.setTimeout(callback, 100);
+    };
+
+    intersectionObserverStub = installIntersectionObserverStub(
+      env.sandbox,
+      win
+    );
+
+    scheduler = new Scheduler(ampdoc);
+  });
+
+  afterEach(() => {
+    clock.uninstall();
+  });
+
+  function createAmpElement(options = {}) {
+    const element = createElementWithAttributes(doc, 'amp-el', {
+      id: options.id || '',
+    });
+    element.deferredMount = () => options.deferredMount || false;
+    element.prerenderAllowed = () => options.prerenderAllowed || false;
+    element.getBuildPriority = () =>
+      options.buildPriority || LayoutPriority.CONTENT;
+    element.mountInternal = env.sandbox.stub();
+    return element;
+  }
+
+  describe('schedule', () => {
+    it('should schedule a deferredMount element', () => {
+      const element = createAmpElement({deferredMount: true});
+      scheduler.schedule(element);
+      expect(intersectionObserverStub.isObserved(element)).to.be.true;
+
+      scheduler.unschedule(element);
+      expect(intersectionObserverStub.isObserved(element)).to.be.false;
+    });
+
+    it('should use the correct observer parameters', () => {
+      const element = createAmpElement({deferredMount: true});
+      scheduler.schedule(element);
+
+      expect(
+        intersectionObserverStub.isObserved(element, {
+          root: doc,
+          rootMargin: '250% 31.25%',
+          thresholds: [0],
+        })
+      ).to.be.true;
+    });
+
+    it('should schedule a non-deferredMount element', () => {
+      const element = createAmpElement({deferredMount: false});
+      scheduler.schedule(element);
+      expect(intersectionObserverStub.isObserved(element)).to.be.false;
+    });
+
+    it('should unschedule when built', async () => {
+      const element = createAmpElement({deferredMount: true});
+      scheduler.schedule(element);
+      expect(intersectionObserverStub.isObserved(element)).to.be.true;
+
+      await setAmpdocReady();
+      intersectionObserverStub.notifySync({
+        target: element,
+        isIntersecting: true,
+      });
+      expect(intersectionObserverStub.isObserved(element)).to.be.false;
+    });
+
+    it('should NOT signal READY_SCAN_SIGNAL until document is ready', async () => {
+      ampdoc.signals().reset(READY_SCAN_SIGNAL);
+      const element = createAmpElement({deferredMount: false});
+      scheduler.schedule(element);
+      expect(ampdoc.signals().get(READY_SCAN_SIGNAL)).to.be.null;
+
+      clock.tick(50);
+      expect(ampdoc.signals().get(READY_SCAN_SIGNAL)).to.be.null;
+    });
+
+    it('should signal READY_SCAN_SIGNAL after document ready', async () => {
+      ampdoc.signals().reset(READY_SCAN_SIGNAL);
+      await setAmpdocReady();
+      clock.tick(50);
+      expect(ampdoc.signals().get(READY_SCAN_SIGNAL)).to.exist;
+    });
+  });
+
+  describe('wait for parsing', () => {
+    it('should build when document ready', async () => {
+      await setAmpdocReady();
+      const element = createAmpElement({deferredMount: false});
+      scheduler.schedule(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should build when document becomes ready', async () => {
+      const element = createAmpElement({deferredMount: false});
+      scheduler.schedule(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.be.not.called;
+
+      await setAmpdocReady();
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should build asap when document ready', async () => {
+      await setAmpdocReady();
+      const element = createAmpElement({deferredMount: true});
+      scheduler.scheduleAsap(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should build asap when document becomes ready', async () => {
+      const element = createAmpElement({deferredMount: true});
+      scheduler.scheduleAsap(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.be.not.called;
+
+      await setAmpdocReady();
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should build when has next siblings', async () => {
+      const element = createAmpElement({deferredMount: false});
+      doc.body.appendChild(element);
+      scheduler.schedule(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+
+      const element2 = createAmpElement({deferredMount: false});
+      doc.body.appendChild(element2);
+      scheduler.schedule(element2);
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+      expect(element2.mountInternal).to.not.be.called;
+    });
+
+    it('should build asap when has next siblings', async () => {
+      const element = createAmpElement({deferredMount: false});
+      doc.body.appendChild(element);
+      scheduler.scheduleAsap(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+
+      const element2 = createAmpElement({deferredMount: false});
+      doc.body.appendChild(element2);
+      scheduler.scheduleAsap(element2);
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+      expect(element2.mountInternal).to.not.be.called;
+    });
+
+    it('should wait the deferred even when parsed', async () => {
+      await setAmpdocReady();
+      const element = createAmpElement({deferredMount: true});
+      doc.body.appendChild(element);
+      scheduler.schedule(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+    });
+  });
+
+  describe('wait for document visibility', () => {
+    beforeEach(async () => {
+      ampdoc.overrideVisibilityState('prerender');
+      await setAmpdocReady();
+    });
+
+    it('should build if prerenderAllowed', () => {
+      const element = createAmpElement({
+        deferredMount: false,
+        prerenderAllowed: true,
+      });
+      scheduler.schedule(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should build asap if prerenderAllowed', () => {
+      const element = createAmpElement({
+        deferredMount: true,
+        prerenderAllowed: true,
+      });
+      scheduler.scheduleAsap(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should NOT build if not prerenderAllowed', () => {
+      const element = createAmpElement({
+        deferredMount: false,
+        prerenderAllowed: false,
+      });
+      scheduler.schedule(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.be.not.called;
+    });
+
+    it('should NOT build asap if not prerenderAllowed', () => {
+      const element = createAmpElement({
+        deferredMount: true,
+        prerenderAllowed: false,
+      });
+      scheduler.scheduleAsap(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.be.not.called;
+    });
+
+    it('should build when becomes visible', () => {
+      const element = createAmpElement({prerenderAllowed: false});
+      scheduler.schedule(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+
+      ampdoc.overrideVisibilityState('visible');
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should build when becomes hidden', () => {
+      const element = createAmpElement({prerenderAllowed: false});
+      scheduler.schedule(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+
+      ampdoc.overrideVisibilityState('hidden');
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should NOT build when becomes paused or inactive', () => {
+      const element = createAmpElement({prerenderAllowed: false});
+      scheduler.schedule(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+
+      ampdoc.overrideVisibilityState('paused');
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+
+      ampdoc.overrideVisibilityState('inactive');
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+    });
+
+    it('should NOT build when scheduled in paused', () => {
+      ampdoc.overrideVisibilityState('paused');
+
+      const element = createAmpElement({prerenderAllowed: false});
+      scheduler.schedule(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+
+      ampdoc.overrideVisibilityState('visible');
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should NOT build when scheduled in inactive', () => {
+      ampdoc.overrideVisibilityState('inactive');
+
+      const element = createAmpElement({prerenderAllowed: false});
+      scheduler.schedule(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+
+      ampdoc.overrideVisibilityState('visible');
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+  });
+
+  describe('wait for intersection', () => {
+    beforeEach(async () => {
+      await setAmpdocReady();
+    });
+
+    it('should wait for intersection when deferred', () => {
+      const element = createAmpElement({deferredMount: true});
+      scheduler.schedule(element);
+      expect(intersectionObserverStub.isObserved(element)).to.be.true;
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+
+      intersectionObserverStub.notifySync({
+        target: element,
+        isIntersecting: false,
+      });
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+
+      intersectionObserverStub.notifySync({
+        target: element,
+        isIntersecting: true,
+      });
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should not wait for intersection when not deferred', () => {
+      const element = createAmpElement({deferredMount: false});
+      scheduler.schedule(element);
+      expect(intersectionObserverStub.isObserved(element)).to.be.false;
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should not wait for intersection when asap', () => {
+      const element = createAmpElement({deferredMount: true});
+      scheduler.scheduleAsap(element);
+      expect(intersectionObserverStub.isObserved(element)).to.be.false;
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+  });
+
+  describe('priority', () => {
+    beforeEach(async () => {
+      await setAmpdocReady();
+    });
+
+    it('should run deferred CONTENT at high priority', () => {
+      const element = createAmpElement({deferredMount: true});
+      scheduler.schedule(element);
+      intersectionObserverStub.notifySync({
+        target: element,
+        isIntersecting: true,
+      });
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should run deferred METADATA at low priority', () => {
+      const element = createAmpElement({
+        deferredMount: true,
+        buildPriority: LayoutPriority.METADATA,
+      });
+      scheduler.schedule(element);
+      intersectionObserverStub.notifySync({
+        target: element,
+        isIntersecting: true,
+      });
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+
+      clock.tick(100);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should run non-deferred METADATA at low priority', () => {
+      const element = createAmpElement({
+        deferredMount: false,
+        buildPriority: LayoutPriority.METADATA,
+      });
+      scheduler.schedule(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.not.be.called;
+
+      clock.tick(100);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+
+    it('should run asap METADATA at high priority', () => {
+      const element = createAmpElement({
+        deferredMount: false,
+        buildPriority: LayoutPriority.METADATA,
+      });
+      scheduler.scheduleAsap(element);
+      clock.tick(1);
+      expect(element.mountInternal).to.be.calledOnce;
+    });
+  });
+
+  describe('container', () => {
+    let container;
+    let topElement;
+    let containerScroller;
+    let containerElement, containerElementChild;
+
+    beforeEach(() => {
+      container = createAmpElement({id: 'container', deferredMount: true});
+      containerScroller = createElementWithAttributes(doc, 'div', {
+        id: 'scroller',
+      });
+
+      topElement = createAmpElement({id: 'topElement', deferredMount: true});
+      containerElement = createAmpElement({
+        id: 'containerElement',
+        deferredMount: true,
+      });
+      containerElementChild = createAmpElement({
+        id: 'containerElementChild',
+        deferredMount: true,
+      });
+
+      doc.body.appendChild(container);
+      doc.body.appendChild(topElement);
+      container.appendChild(containerScroller);
+      containerScroller.appendChild(containerElement);
+      containerElement.appendChild(containerElementChild);
+    });
+
+    it('should be observed by the document observer', () => {
+      scheduler.schedule(topElement);
+      scheduler.schedule(containerElement);
+      scheduler.schedule(containerElementChild);
+
+      // Observed on the document observer.
+      expect(intersectionObserverStub.isObserved(topElement, {root: doc})).to.be
+        .true;
+      expect(intersectionObserverStub.isObserved(containerElement, {root: doc}))
+        .to.be.true;
+      expect(
+        intersectionObserverStub.isObserved(containerElementChild, {root: doc})
+      ).to.be.true;
+    });
+
+    it('should be observed and unobserved by the container observer', () => {
+      scheduler.schedule(topElement);
+      scheduler.schedule(containerElement);
+      scheduler.schedule(containerElementChild);
+      scheduler.schedule(container);
+
+      // Set container.
+      scheduler.setContainer(container);
+
+      // Observed on the document observer.
+      expect(intersectionObserverStub.isObserved(topElement, {root: doc})).to.be
+        .true;
+      expect(intersectionObserverStub.isObserved(containerElement, {root: doc}))
+        .to.be.true;
+      expect(
+        intersectionObserverStub.isObserved(containerElementChild, {root: doc})
+      ).to.be.true;
+
+      // A contained element is observed by the container.
+      expect(
+        intersectionObserverStub.isObserved(containerElement, {root: container})
+      ).to.be.true;
+      expect(
+        intersectionObserverStub.isObserved(containerElementChild, {
+          root: container,
+        })
+      ).to.be.true;
+      // Not observed by the container because not contained by it.
+      expect(intersectionObserverStub.isObserved(topElement, {root: container}))
+        .to.be.false;
+
+      // Should not observe the container itself on the container observer.
+      expect(intersectionObserverStub.isObserved(container, {root: container}))
+        .to.be.false;
+      expect(intersectionObserverStub.isObserved(container, {root: doc})).to.be
+        .true;
+
+      // Remove container.
+      scheduler.removeContainer(container);
+      expect(
+        intersectionObserverStub.isObserved(containerElement, {root: container})
+      ).to.be.false;
+      expect(
+        intersectionObserverStub.isObserved(containerElementChild, {
+          root: container,
+        })
+      ).to.be.false;
+
+      // Set container again.
+      scheduler.setContainer(container);
+      expect(
+        intersectionObserverStub.isObserved(containerElement, {root: container})
+      ).to.be.true;
+      expect(
+        intersectionObserverStub.isObserved(containerElementChild, {
+          root: container,
+        })
+      ).to.be.true;
+    });
+
+    it('should be observed with scroller when specified', () => {
+      scheduler.schedule(topElement);
+      scheduler.schedule(containerElement);
+      scheduler.schedule(containerElementChild);
+      scheduler.schedule(container);
+
+      // Set container.
+      scheduler.setContainer(container, containerScroller);
+
+      // Observed on the document observer.
+      expect(intersectionObserverStub.isObserved(topElement, {root: doc})).to.be
+        .true;
+      expect(intersectionObserverStub.isObserved(containerElement, {root: doc}))
+        .to.be.true;
+      expect(
+        intersectionObserverStub.isObserved(containerElementChild, {root: doc})
+      ).to.be.true;
+
+      // A contained element is observed by the container.
+      expect(
+        intersectionObserverStub.isObserved(containerElement, {
+          root: containerScroller,
+        })
+      ).to.be.true;
+      expect(
+        intersectionObserverStub.isObserved(containerElementChild, {
+          root: containerScroller,
+        })
+      ).to.be.true;
+      // Not observed by the container because not contained by it.
+      expect(
+        intersectionObserverStub.isObserved(topElement, {
+          root: containerScroller,
+        })
+      ).to.be.false;
+
+      // No observers for the container itself.
+      expect(
+        intersectionObserverStub.isObserved(containerElement, {root: container})
+      ).to.be.false;
+      expect(
+        intersectionObserverStub.isObserved(containerElementChild, {
+          root: container,
+        })
+      ).to.be.false;
+      expect(intersectionObserverStub.isObserved(topElement, {root: container}))
+        .to.be.false;
+
+      // Should not observe the container itself on the container observer.
+      expect(
+        intersectionObserverStub.isObserved(container, {
+          root: containerScroller,
+        })
+      ).to.be.false;
+      expect(intersectionObserverStub.isObserved(container, {root: doc})).to.be
+        .true;
+    });
+
+    it('should be observed by the container for elements added after it was set', () => {
+      // Set container.
+      scheduler.setContainer(container);
+
+      // Schedule elements.
+      scheduler.schedule(topElement);
+      scheduler.schedule(containerElement);
+      scheduler.schedule(containerElementChild);
+      scheduler.schedule(container);
+
+      // Observed on the document observer.
+      expect(intersectionObserverStub.isObserved(topElement, {root: doc})).to.be
+        .true;
+      expect(intersectionObserverStub.isObserved(containerElement, {root: doc}))
+        .to.be.true;
+      expect(
+        intersectionObserverStub.isObserved(containerElementChild, {root: doc})
+      ).to.be.true;
+
+      // A contained element is observed by the container.
+      expect(
+        intersectionObserverStub.isObserved(containerElement, {root: container})
+      ).to.be.true;
+      expect(
+        intersectionObserverStub.isObserved(containerElementChild, {
+          root: container,
+        })
+      ).to.be.true;
+      // Not observed by the container because not contained by it.
+      expect(intersectionObserverStub.isObserved(topElement, {root: container}))
+        .to.be.false;
+
+      // Should not observe the container itself on the container observer.
+      expect(intersectionObserverStub.isObserved(container, {root: container}))
+        .to.be.false;
+      expect(intersectionObserverStub.isObserved(container, {root: doc})).to.be
+        .true;
+
+      // Remove container.
+      scheduler.removeContainer(container);
+      expect(
+        intersectionObserverStub.isObserved(containerElement, {root: container})
+      ).to.be.false;
+      expect(
+        intersectionObserverStub.isObserved(containerElementChild, {
+          root: container,
+        })
+      ).to.be.false;
+    });
+
+    it('should be unobserved by all observers when unscheduled', () => {
+      // Set container.
+      scheduler.setContainer(container);
+
+      // Schedule elements.
+      scheduler.schedule(containerElement);
+      expect(intersectionObserverStub.isObserved(containerElement, {root: doc}))
+        .to.be.true;
+      expect(
+        intersectionObserverStub.isObserved(containerElement, {root: container})
+      ).to.be.true;
+
+      // Unschedule
+      scheduler.unschedule(containerElement);
+      expect(intersectionObserverStub.isObserved(containerElement, {root: doc}))
+        .to.be.false;
+      expect(
+        intersectionObserverStub.isObserved(containerElement, {root: container})
+      ).to.be.false;
+    });
+
+    it('should mount if the document observer fires first', async () => {
+      await setAmpdocReady();
+
+      // Set container and schedule.
+      scheduler.setContainer(container);
+      scheduler.schedule(containerElement);
+      expect(intersectionObserverStub.isObserved(containerElement, {root: doc}))
+        .to.be.true;
+      expect(
+        intersectionObserverStub.isObserved(containerElement, {root: container})
+      ).to.be.true;
+
+      intersectionObserverStub.notifySync(
+        {
+          target: containerElement,
+          isIntersecting: true,
+        },
+        {root: doc}
+      );
+
+      clock.tick(1);
+      expect(containerElement.mountInternal).to.be.calledOnce;
+
+      // Unscheduled from both.
+      expect(intersectionObserverStub.isObserved(containerElement, {root: doc}))
+        .to.be.false;
+      expect(
+        intersectionObserverStub.isObserved(containerElement, {root: container})
+      ).to.be.false;
+    });
+
+    it('should mount if the container observer fires first', async () => {
+      await setAmpdocReady();
+
+      // Set container and schedule.
+      scheduler.setContainer(container);
+      scheduler.schedule(containerElement);
+      expect(intersectionObserverStub.isObserved(containerElement, {root: doc}))
+        .to.be.true;
+      expect(
+        intersectionObserverStub.isObserved(containerElement, {root: container})
+      ).to.be.true;
+
+      intersectionObserverStub.notifySync(
+        {
+          target: containerElement,
+          isIntersecting: true,
+        },
+        {root: container}
+      );
+
+      clock.tick(1);
+      expect(containerElement.mountInternal).to.be.calledOnce;
+      expect(intersectionObserverStub.isObserved(containerElement, {root: doc}))
+        .to.be.false;
+      expect(
+        intersectionObserverStub.isObserved(containerElement, {root: container})
+      ).to.be.false;
+    });
+
+    it('should wait for the first intersecing observation', async () => {
+      await setAmpdocReady();
+
+      // Set container and schedule.
+      scheduler.setContainer(container);
+      scheduler.schedule(containerElement);
+
+      intersectionObserverStub.notifySync(
+        {
+          target: containerElement,
+          isIntersecting: false,
+        },
+        {root: doc}
+      );
+      clock.tick(1);
+      expect(containerElement.mountInternal).to.not.be.called;
+
+      intersectionObserverStub.notifySync(
+        {
+          target: containerElement,
+          isIntersecting: false,
+        },
+        {root: container}
+      );
+      clock.tick(1);
+      expect(containerElement.mountInternal).to.not.be.called;
+
+      intersectionObserverStub.notifySync(
+        {
+          target: containerElement,
+          isIntersecting: true,
+        },
+        {root: container}
+      );
+
+      clock.tick(1);
+      expect(containerElement.mountInternal).to.be.calledOnce;
+    });
+  });
+});
diff --git a/test/unit/test-service.js b/test/unit/test-service.js
index 4e8eb3c3ce864..395a7e79b9fe0 100644
--- a/test/unit/test-service.js
+++ b/test/unit/test-service.js
@@ -15,37 +15,38 @@
  */
 
 import {
+  adoptServiceFactoryForEmbedDoc,
+  adoptServiceForEmbedDoc,
   assertDisposable,
   disposeServicesForDoc,
-  getExistingServiceForDocInEmbedScope,
   getExistingServiceOrNull,
   getParentWindowFrameElement,
   getService,
   getServiceForDoc,
+  getServiceForDocOrNull,
+  getServiceInEmbedWin,
   getServicePromise,
   getServicePromiseForDoc,
   getServicePromiseOrNull,
   getServicePromiseOrNullForDoc,
-  installServiceInEmbedIfEmbeddable,
-  installServiceInEmbedScope,
   isDisposable,
   registerServiceBuilder,
   registerServiceBuilderForDoc,
+  registerServiceBuilderInEmbedWin,
   rejectServicePromiseForDoc,
   resetServiceForTesting,
   setParentWindow,
 } from '../../src/service';
 import {loadPromise} from '../../src/event-helper';
-import {toggleAmpdocFieForTesting} from '../../src/ampdoc-fie';
 
-describe('service', () => {
+describes.sandboxed('service', {}, (env) => {
   describe('disposable interface', () => {
     let disposable;
     let nonDisposable;
 
     beforeEach(() => {
       nonDisposable = {};
-      disposable = {dispose: window.sandbox.spy()};
+      disposable = {dispose: env.sandbox.spy()};
     });
 
     it('should test disposable interface', () => {
@@ -75,7 +76,7 @@ describe('service', () => {
           this.count = ++count;
         }
       };
-      factory = window.sandbox.spy(() => {
+      factory = env.sandbox.spy(() => {
         return new Class();
       });
       resetServiceForTesting(window, 'a');
@@ -190,13 +191,13 @@ describe('service', () => {
       expect(p).to.not.be.null;
     });
 
-    it('should set service builders to null after instantiation', () => {
+    it('should not set service builders to null after instantiation', () => {
       registerServiceBuilder(window, 'a', Class);
       expect(window.__AMP_SERVICES['a'].obj).to.be.null;
       expect(window.__AMP_SERVICES['a'].ctor).to.not.be.null;
       getService(window, 'a');
       expect(window.__AMP_SERVICES['a'].obj).to.not.be.null;
-      expect(window.__AMP_SERVICES['a'].ctor).to.be.null;
+      expect(window.__AMP_SERVICES['a'].ctor).to.not.be.null;
     });
 
     it('should resolve service for a child window', () => {
@@ -233,7 +234,7 @@ describe('service', () => {
           this.count = ++count;
         }
       };
-      factory = window.sandbox.spy(function () {
+      factory = env.sandbox.spy(function () {
         return new Class();
       });
       windowApi = {
@@ -245,7 +246,7 @@ describe('service', () => {
         isSingleDoc: () => false,
         win: windowApi,
       };
-      ampdocMock = window.sandbox.mock(ampdoc);
+      ampdocMock = env.sandbox.mock(ampdoc);
       ampdocServiceApi = {getAmpDoc: () => ampdoc};
       registerServiceBuilder(windowApi, 'ampdoc', function () {
         return ampdocServiceApi;
@@ -430,7 +431,7 @@ describe('service', () => {
       expectAsyncConsoleError(/intentional/);
       const disposableFactory = function () {
         return {
-          dispose: window.sandbox.spy(),
+          dispose: env.sandbox.spy(),
         };
       };
       registerServiceBuilderForDoc(node, 'a', disposableFactory);
@@ -438,7 +439,7 @@ describe('service', () => {
 
       registerServiceBuilderForDoc(node, 'b', function () {
         return {
-          dispose: window.sandbox.stub().throws('intentional'),
+          dispose: env.sandbox.stub().throws('intentional'),
         };
       });
       const disposableWithError = getServiceForDoc(node, 'b');
@@ -480,6 +481,7 @@ describe('service', () => {
       let childWin, grandchildWin;
       let childWinNode, grandChildWinNode;
       let topService;
+      let parentAmpdoc;
 
       beforeEach(() => {
         // A child.
@@ -505,41 +507,25 @@ describe('service', () => {
 
         registerServiceBuilderForDoc(ampdoc, 'c', factory);
         topService = getServiceForDoc(ampdoc, 'c');
-      });
 
-      afterEach(() => {
-        toggleAmpdocFieForTesting(windowApi, false);
+        ampdoc.win = childWin;
+        parentAmpdoc = {
+          isSingleDoc: () => false,
+          win: windowApi,
+        };
+        ampdoc.getParent = () => parentAmpdoc;
       });
 
       it('should return the service via node', () => {
-        const fromNode = getExistingServiceForDocInEmbedScope(node, 'c');
+        const fromNode = getServiceForDocOrNull(node, 'c');
         expect(fromNode).to.equal(topService);
       });
 
-      it('should not fallback from FIE to parent service', () => {
-        // TODO(#22733): remove once ampdoc-fie migration is done.
-        const fromChildNode = getExistingServiceForDocInEmbedScope(
-          childWinNode,
-          'c'
-        );
-        expect(fromChildNode).to.be.null;
-
-        const fromGrandchildNode = getExistingServiceForDocInEmbedScope(
-          grandChildWinNode,
-          'c'
-        );
-        expect(fromGrandchildNode).to.be.null;
-      });
-
       it('should find ampdoc and return its service', () => {
-        toggleAmpdocFieForTesting(windowApi, true);
-        const fromChildNode = getExistingServiceForDocInEmbedScope(
-          childWinNode,
-          'c'
-        );
+        const fromChildNode = getServiceForDocOrNull(childWinNode, 'c');
         expect(fromChildNode).to.equal(topService);
 
-        const fromGrandchildNode = getExistingServiceForDocInEmbedScope(
+        const fromGrandchildNode = getServiceForDocOrNull(
           grandChildWinNode,
           'c'
         );
@@ -547,24 +533,20 @@ describe('service', () => {
       });
 
       it('should not fallback embedded ampdoc to parent', () => {
-        toggleAmpdocFieForTesting(windowApi, true);
         const childAmpdoc = {
           isSingleDoc: () => false,
           win: windowApi,
         };
-        window.sandbox.stub(ampdocServiceApi, 'getAmpDoc').callsFake((node) => {
+        env.sandbox.stub(ampdocServiceApi, 'getAmpDoc').callsFake((node) => {
           if (node == childWinNode || node == grandChildWinNode) {
             return childAmpdoc;
           }
           return ampdoc;
         });
-        const fromChildNode = getExistingServiceForDocInEmbedScope(
-          childWinNode,
-          'c'
-        );
+        const fromChildNode = getServiceForDocOrNull(childWinNode, 'c');
         expect(fromChildNode).to.equal(null);
 
-        const fromGrandchildNode = getExistingServiceForDocInEmbedScope(
+        const fromGrandchildNode = getServiceForDocOrNull(
           grandChildWinNode,
           'c'
         );
@@ -572,26 +554,22 @@ describe('service', () => {
       });
 
       it('should override services on embedded ampdoc', () => {
-        toggleAmpdocFieForTesting(windowApi, true);
         const childAmpdoc = {
           isSingleDoc: () => false,
           win: windowApi,
         };
         registerServiceBuilderForDoc(childAmpdoc, 'c', factory);
-        window.sandbox.stub(ampdocServiceApi, 'getAmpDoc').callsFake((node) => {
+        env.sandbox.stub(ampdocServiceApi, 'getAmpDoc').callsFake((node) => {
           if (node == childWinNode || node == grandChildWinNode) {
             return childAmpdoc;
           }
           return ampdoc;
         });
-        const fromChildNode = getExistingServiceForDocInEmbedScope(
-          childWinNode,
-          'c'
-        );
+        const fromChildNode = getServiceForDocOrNull(childWinNode, 'c');
         expect(fromChildNode).to.deep.equal({count: 2});
         expect(fromChildNode).to.not.equal(topService);
 
-        const fromGrandchildNode = getExistingServiceForDocInEmbedScope(
+        const fromGrandchildNode = getServiceForDocOrNull(
           grandChildWinNode,
           'c'
         );
@@ -603,66 +581,80 @@ describe('service', () => {
           .exist;
       });
 
-      it('should return overriden service', () => {
-        // TODO(#22733): remove once ampdoc-fie migration is done.
-        const overridenService = {};
-        installServiceInEmbedScope(childWin, 'c', overridenService);
-        expect(
-          getExistingServiceForDocInEmbedScope(childWinNode, 'c')
-        ).to.equal(overridenService);
-
-        // Top-level service doesn't change.
-        const fromNode = getExistingServiceForDocInEmbedScope(node, 'c');
-        expect(fromNode).to.equal(topService);
+      it('should override services on embedded window', () => {
+        const topService = {};
+        const embedService = {};
+        registerServiceBuilder(windowApi, 'A', function () {
+          return topService;
+        });
+        registerServiceBuilderInEmbedWin(childWin, 'A', function () {
+          return embedService;
+        });
 
-        // Notice that only direct overrides are allowed for now. This is
-        // arbitrary can change in the future to allow hierarchical lookup
-        // up the window chain.
-        const fromGrandchildNode = getExistingServiceForDocInEmbedScope(
-          grandChildWinNode,
-          'c'
-        );
-        expect(fromGrandchildNode).to.be.null;
+        expect(getService(windowApi, 'A')).to.equal(topService);
+        expect(getService(childWin, 'A')).to.equal(topService);
 
-        // The service is also registered on the embed window.
-        expect(childWin.__AMP_SERVICES['c']).to.exist;
+        expect(getServiceInEmbedWin(windowApi, 'A')).to.equal(topService);
+        expect(getServiceInEmbedWin(childWin, 'A')).to.equal(embedService);
       });
-    });
 
-    describe('embeddable interface', () => {
-      let embedWin;
-      let embeddable;
-      let nonEmbeddable;
-
-      beforeEach(() => {
-        embedWin = {
-          frameElement: {
-            nodeType: 1,
-            ownerDocument: {defaultView: windowApi},
-          },
+      it('should dispose disposable services', () => {
+        const disposableFactory = function () {
+          return {
+            dispose: env.sandbox.spy(),
+          };
         };
-        nonEmbeddable = {};
-        embeddable = {installInEmbedWindow: window.sandbox.spy()};
-        registerServiceBuilderForDoc(ampdoc, 'embeddable', function () {
-          return embeddable;
-        });
-        registerServiceBuilderForDoc(ampdoc, 'nonEmbeddable', function () {
-          return nonEmbeddable;
-        });
+
+        // A disposable service in parent.
+        registerServiceBuilderForDoc(parentAmpdoc, 'a', disposableFactory);
+        const parentDisposable = getServiceForDoc(parentAmpdoc, 'a');
+
+        // A disposable service.
+        registerServiceBuilderForDoc(ampdoc, 'b', disposableFactory);
+        const b = getServiceForDoc(node, 'b');
+
+        // A shared disposable service instance.
+        adoptServiceForEmbedDoc(ampdoc, 'a');
+        const shared = getServiceForDoc(ampdoc, 'a');
+
+        // A shared disposable service factory.
+        registerServiceBuilderForDoc(parentAmpdoc, 'f', disposableFactory);
+        adoptServiceFactoryForEmbedDoc(ampdoc, 'f');
+        const f = getServiceForDoc(ampdoc, 'f');
+
+        disposeServicesForDoc(ampdoc);
+
+        // Parent's services are not disposed.
+        expect(parentDisposable.dispose).to.not.be.called;
+        expect(shared).to.equal(parentDisposable);
+
+        // Disposable and initialized are disposed right away.
+        expect(b.dispose).to.be.calledOnce;
+        expect(f.dispose).to.be.calledOnce;
       });
 
-      describe('installServiceInEmbedIfEmbeddable()', () => {
-        it('should install embeddable if embeddable', () => {
-          let result;
+      it('should share adoptable instances', () => {
+        class Factory {}
+        registerServiceBuilderForDoc(parentAmpdoc, 'A', Factory);
+        adoptServiceForEmbedDoc(ampdoc, 'A');
 
-          result = installServiceInEmbedIfEmbeddable(embedWin, embeddable);
-          expect(result).to.be.true;
-          expect(embeddable.installInEmbedWindow).to.be.calledOnce;
-          expect(embeddable.installInEmbedWindow.args[0][0]).to.equal(embedWin);
+        const parent = getServiceForDoc(parentAmpdoc, 'A');
+        const child = getServiceForDoc(ampdoc, 'A');
+        expect(parent).to.be.instanceof(Factory);
+        expect(child).to.be.instanceof(Factory);
+        expect(child).to.equal(parent);
+      });
 
-          result = installServiceInEmbedIfEmbeddable(embedWin, nonEmbeddable);
-          expect(result).to.be.false;
-        });
+      it('should share adoptable factories but not instances', () => {
+        class Factory {}
+        registerServiceBuilderForDoc(parentAmpdoc, 'A', Factory);
+        adoptServiceFactoryForEmbedDoc(ampdoc, 'A');
+
+        const parent = getServiceForDoc(parentAmpdoc, 'A');
+        const child = getServiceForDoc(ampdoc, 'A');
+        expect(parent).to.be.instanceof(Factory);
+        expect(child).to.be.instanceof(Factory);
+        expect(child).not.to.equal(parent);
       });
     });
   });
diff --git a/test/unit/test-shadow-embed.js b/test/unit/test-shadow-embed.js
index dda12688eed34..4d1144eb87ba0 100644
--- a/test/unit/test-shadow-embed.js
+++ b/test/unit/test-shadow-embed.js
@@ -20,19 +20,20 @@ import {
   ShadowDomVersion,
   setShadowCssSupportedForTesting,
   setShadowDomSupportedVersionForTesting,
-} from '../../src/web-components';
+} from '../../src/core/dom/web-components';
 import {
   createShadowDomWriter,
   createShadowRoot,
-  getShadowRootNode,
   importShadowBody,
+  installShadowStyle,
+  resetShadowStyleCacheForTesting,
   scopeShadowCss,
   setShadowDomStreamingSupportedForTesting,
 } from '../../src/shadow-embed';
 import {installStylesForDoc} from '../../src/style-installer';
-import {toArray} from '../../src/types';
+import {toArray} from '../../src/core/types/array';
 
-describes.sandboxed('shadow-embed', {}, () => {
+describes.sandboxed('shadow-embed', {}, (env) => {
   afterEach(() => {
     setShadowDomSupportedVersionForTesting(undefined);
   });
@@ -139,8 +140,6 @@ describes.sandboxed('shadow-embed', {}, () => {
               setShadowCssSupportedForTesting(false);
               const shadowRoot = createShadowRoot(hostElement);
               expect(shadowRoot.id).to.match(/i-amphtml-sd-\d+/);
-              // Browserify does not support arrow functions with params.
-              // Using Old School for
               const shadowRootClassListArray = toArray(
                 shadowRoot.host.classList
               );
@@ -197,8 +196,7 @@ describes.sandboxed('shadow-embed', {}, () => {
             });
           });
 
-          // TODO(aghassemi, #12499): Make this work with latest mocha / karma
-          describe.skip('importShadowBody', () => {
+          describe('importShadowBody', () => {
             let shadowRoot, source, child1, child2;
 
             beforeEach(() => {
@@ -243,36 +241,25 @@ describes.sandboxed('shadow-embed', {}, () => {
               expect(shadowRoot.contains(body)).to.be.true;
               expect(body.children).to.have.length(0);
             });
+
+            it('should allow reusing same body', () => {
+              const firstBody = importShadowBody(shadowRoot, source, true);
+              const newSource = document.createElement('body');
+              newSource.appendChild(document.createElement('span'));
+              const secondBody = importShadowBody(shadowRoot, newSource, true);
+
+              expect(shadowRoot.body).to.equal(secondBody);
+              expect(shadowRoot.children).to.have.length(1);
+              expect(firstBody).not.to.equal(secondBody);
+              expect(secondBody.children).to.have.length(1);
+              expect(secondBody.firstChild.tagName).to.equal('SPAN');
+            });
           });
         });
       });
     }
   );
 
-  describe('getShadowRootNode', () => {
-    let content, host, shadowRoot;
-
-    beforeEach(() => {
-      host = document.createElement('div');
-      shadowRoot = createShadowRoot(host);
-      content = document.createElement('span');
-      shadowRoot.appendChild(content);
-    });
-
-    it('should find itself as the root node', () => {
-      expect(getShadowRootNode(shadowRoot)).to.equal(shadowRoot);
-    });
-
-    it('should find the root node from ancestors', () => {
-      expect(getShadowRootNode(content)).to.equal(shadowRoot);
-    });
-
-    it('should find the root node via polyfill', () => {
-      setShadowDomSupportedVersionForTesting(ShadowDomVersion.NONE);
-      expect(getShadowRootNode(content)).to.equal(shadowRoot);
-    });
-  });
-
   describe('scopeShadowCss', () => {
     let shadowRoot;
 
@@ -304,13 +291,70 @@ describes.sandboxed('shadow-embed', {}, () => {
     });
   });
 
+  describe('installShadowStyle', () => {
+    let shadowRoot, shadowRoot2;
+
+    beforeEach(() => {
+      shadowRoot = document.createElement('div');
+      shadowRoot2 = document.createElement('div');
+    });
+
+    afterEach(() => {
+      resetShadowStyleCacheForTesting(window);
+    });
+
+    describe('adopted stylesheets supported', () => {
+      before(function () {
+        if (!document.adoptedStyleSheets) {
+          this.skipTest();
+        }
+      });
+
+      it('should re-use constructable stylesheet when supported', function () {
+        shadowRoot.adoptedStyleSheets = [];
+        installShadowStyle(shadowRoot, 'A', '* {color: red}');
+
+        expect(shadowRoot.adoptedStyleSheets).to.have.length(1);
+        const styleSheet1 = shadowRoot.adoptedStyleSheets[0];
+        expect(styleSheet1.rules).to.have.length(1);
+        expect(styleSheet1.rules[0].cssText.replace(/(\s|;)/g, '')).to.equal(
+          '*{color:red}'
+        );
+        expect(shadowRoot.querySelector('style')).to.be.null;
+
+        // A different stylesheet.
+        installShadowStyle(shadowRoot, 'B', '* {color: blue}');
+        expect(shadowRoot.adoptedStyleSheets).to.have.length(2);
+
+        // Repeated call uses the cache.
+        shadowRoot2.adoptedStyleSheets = [];
+        installShadowStyle(shadowRoot2, 'A', 'not even CSS');
+        expect(shadowRoot2.adoptedStyleSheets).to.have.length(1);
+        expect(shadowRoot2.adoptedStyleSheets[0]).to.equal(styleSheet1);
+
+        // A different stylesheet in a different root.
+        shadowRoot2.adoptedStyleSheets = [];
+        installShadowStyle(shadowRoot2, 'B', '* {color: blue}');
+        expect(shadowRoot2.adoptedStyleSheets).to.have.length(1);
+        expect(shadowRoot2.adoptedStyleSheets[0]).to.not.equal(styleSheet1);
+      });
+    });
+
+    it('should create a legacy stylesheet when constructable not supported', () => {
+      installShadowStyle(shadowRoot, 'A', '* {color: red}');
+
+      const styleEl = shadowRoot.querySelector('style');
+      expect(styleEl.textContent).to.equal('* {color: red}');
+    });
+  });
+
   describe('createShadowDomWriter', () => {
     let createHTMLDocumentSpy;
     let win;
     let isFirefox;
 
     beforeEach(() => {
-      createHTMLDocumentSpy = window.sandbox.spy();
+      createHTMLDocumentSpy = env.sandbox.spy();
       isFirefox = false;
       const platform = {
         isFirefox: () => isFirefox,
@@ -330,8 +374,8 @@ describes.sandboxed('shadow-embed', {}, () => {
           },
         },
         __AMP_SERVICES: {
-          'platform': {obj: platform},
-          'vsync': {obj: {}},
+          'platform': {obj: platform, ctor: Object},
+          'vsync': {obj: {}, ctor: Object},
         },
       };
     });
diff --git a/test/unit/test-size-list.js b/test/unit/test-size-list.js
deleted file mode 100644
index 81e1b7bd66742..0000000000000
--- a/test/unit/test-size-list.js
+++ /dev/null
@@ -1,236 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {SizeList, parseSizeList} from '../../src/size-list';
-
-describe('SizeList parseSizeList', () => {
-  it('should accept single option', () => {
-    const res = parseSizeList(' \n 111px \n ');
-    expect(res.sizes_.length).to.equal(1);
-    expect(res.sizes_[0].mediaQuery).to.equal(undefined);
-    expect(res.sizes_[0].size).to.equal('111px');
-  });
-
-  it('should accept multiple options', () => {
-    const res = parseSizeList(' \n print 222px \n, 111px \n');
-    expect(res.sizes_.length).to.equal(2);
-    expect(res.sizes_[0].mediaQuery).to.equal('print');
-    expect(res.sizes_[0].size).to.equal('222px');
-    expect(res.sizes_[1].mediaQuery).to.equal(undefined);
-    expect(res.sizes_[1].size).to.equal('111px');
-  });
-
-  it('should accept even more multiple options', () => {
-    const res = parseSizeList(' \n screen 333px, print 222px \n, 111px \n');
-    expect(res.sizes_.length).to.equal(3);
-    expect(res.sizes_[0].mediaQuery).to.equal('screen');
-    expect(res.sizes_[0].size).to.equal('333px');
-    expect(res.sizes_[1].mediaQuery).to.equal('print');
-    expect(res.sizes_[1].size).to.equal('222px');
-    expect(res.sizes_[2].mediaQuery).to.equal(undefined);
-    expect(res.sizes_[2].size).to.equal('111px');
-  });
-
-  it('should accept complicated media conditions', () => {
-    const res = parseSizeList(
-      ' \n screen and (min-width: 1000px) \t ' +
-        ' and    (max-width: 2000px) 222px \n,' +
-        ' 111px \n'
-    );
-    expect(res.sizes_.length).to.equal(2);
-    expect(res.sizes_[0].mediaQuery).to.equal(
-      'screen and (min-width: 1000px) and (max-width: 2000px)'
-    );
-    expect(res.sizes_[0].size).to.equal('222px');
-    expect(res.sizes_[1].mediaQuery).to.equal(undefined);
-    expect(res.sizes_[1].size).to.equal('111px');
-  });
-
-  it('should accept different length units', () => {
-    const res = parseSizeList(' \n 111vw \n ');
-    expect(res.sizes_.length).to.equal(1);
-    expect(res.sizes_[0].mediaQuery).to.equal(undefined);
-    expect(res.sizes_[0].size).to.equal('111vw');
-  });
-
-  it('should accept fractional numbers', () => {
-    const res = parseSizeList(' \n 11.1vw \n ');
-    expect(res.sizes_.length).to.equal(1);
-    expect(res.sizes_[0].mediaQuery).to.equal(undefined);
-    expect(res.sizes_[0].size).to.equal('11.1vw');
-  });
-
-  it('should accept CSS functions', () => {
-    const res = parseSizeList(
-      'screen calc(111vw + 10px) \n, ca_1-C((50vw+20px) / 2) '
-    );
-    expect(res.sizes_.length).to.equal(2);
-    expect(res.sizes_[0].mediaQuery).to.equal('screen');
-    expect(res.sizes_[0].size).to.equal('calc(111vw + 10px)');
-    expect(res.sizes_[1].mediaQuery).to.be.undefined;
-    expect(res.sizes_[1].size).to.equal('ca_1-C((50vw+20px) / 2)');
-  });
-
-  it('should tolerate right paren', () => {
-    const res = parseSizeList(
-      '(min-width:2000px)calc(11px),(min-width:1000px)11px,12px'
-    );
-    expect(res.sizes_.length).to.equal(3);
-    expect(res.sizes_[0].mediaQuery).to.equal('(min-width:2000px)');
-    expect(res.sizes_[0].size).to.equal('calc(11px)');
-    expect(res.sizes_[1].mediaQuery).to.equal('(min-width:1000px)');
-    expect(res.sizes_[1].size).to.equal('11px');
-    expect(res.sizes_[2].mediaQuery).to.be.undefined;
-    expect(res.sizes_[2].size).to.equal('12px');
-  });
-
-  it('should fail on invalid CSS functions', () => {
-    // Spaces are not allowed between function name and `(`.
-    allowConsoleError(() => {
-      expect(() => {
-        parseSizeList('screen calc (111vw + 10px) \n, 10px ');
-      }).to.throw(/Invalid CSS function/);
-    });
-
-    // Parens don't match.
-    allowConsoleError(() => {
-      expect(() => {
-        parseSizeList('screen calc(111vw + 10px)) \n, 10px ');
-      }).to.throw(/Invalid CSS function/);
-    });
-    allowConsoleError(() => {
-      expect(() => {
-        parseSizeList('screen calc((111vw + 10px) \n, 10px ');
-      }).to.throw(/Invalid CSS function/);
-    });
-  });
-
-  it('should accept percent when allowed', () => {
-    const res = parseSizeList(
-      ' \n 111% \n ',
-      /* opt_allowPercentAsLength */ true
-    );
-    expect(res.sizes_.length).to.equal(1);
-    expect(res.sizes_[0].mediaQuery).to.equal(undefined);
-    expect(res.sizes_[0].size).to.equal('111%');
-  });
-
-  it('should not accept percent', () => {
-    allowConsoleError(() => {
-      expect(() => {
-        parseSizeList(' \n 111% \n ', /* opt_allowPercentAsLength */ false);
-      }).to.throw(/Invalid length value/);
-    });
-  });
-
-  it('should fail bad length', () => {
-    allowConsoleError(() => {
-      expect(() => {
-        parseSizeList(' \n 111 \n ');
-      }).to.throw(/Invalid length value/);
-    });
-  });
-});
-
-describe('SizeList construct', () => {
-  it('should have at least one option', () => {
-    allowConsoleError(() => {
-      expect(() => {
-        new SizeList([]);
-      }).to.throw(/SizeList must have at least one option/);
-    });
-  });
-
-  it('the last option must not have a query', () => {
-    allowConsoleError(() => {
-      expect(() => {
-        new SizeList([{mediaQuery: 'screen', size: '111px'}]);
-      }).to.throw(/The last option must not have a media condition/);
-      expect(() => {
-        new SizeList([
-          {mediaQuery: 'print', size: '222px'},
-          {mediaQuery: 'screen', size: '111px'},
-        ]);
-      }).to.throw(/The last option must not have a media condition/);
-    });
-  });
-
-  it('non-last options must have media query', () => {
-    allowConsoleError(() => {
-      expect(() => {
-        new SizeList([{size: '222px'}, {size: '111px'}]);
-      }).to.throw(
-        /All options except for the last must have a media condition/
-      );
-    });
-  });
-});
-
-describe('SizeList select', () => {
-  it('should select default last option', () => {
-    const sizeList = new SizeList([
-      {mediaQuery: 'media1', size: '444px'},
-      {mediaQuery: 'media2', size: '333px'},
-      {mediaQuery: 'media3', size: '222px'},
-      {size: '111px'},
-    ]);
-    expect(
-      sizeList.select({
-        matchMedia: () => {
-          return {};
-        },
-      })
-    ).to.equal('111px');
-  });
-
-  it('should select a matching option', () => {
-    const sizeList = new SizeList([
-      {mediaQuery: 'media1', size: '444px'},
-      {mediaQuery: 'media2', size: '333px'},
-      {mediaQuery: 'media3', size: '222px'},
-      {size: '111px'},
-    ]);
-    expect(
-      sizeList.select({
-        matchMedia: (mq) => {
-          if (mq == 'media2') {
-            return {matches: true};
-          }
-          return {};
-        },
-      })
-    ).to.equal('333px');
-  });
-
-  it('should select first matching option', () => {
-    const sizeList = new SizeList([
-      {mediaQuery: 'media1', size: '444px'},
-      {mediaQuery: 'media2', size: '333px'},
-      {mediaQuery: 'media3', size: '222px'},
-      {size: '111px'},
-    ]);
-    expect(
-      sizeList.select({
-        matchMedia: (mq) => {
-          if (mq == 'media1' || mq == 'media2') {
-            return {matches: true};
-          }
-          return {};
-        },
-      })
-    ).to.equal('444px');
-  });
-});
diff --git a/test/unit/test-srcset.js b/test/unit/test-srcset.js
index 322cb664b50e7..151a6f7f01f18 100644
--- a/test/unit/test-srcset.js
+++ b/test/unit/test-srcset.js
@@ -21,7 +21,7 @@ import {
   srcsetFromSrc,
 } from '../../src/srcset';
 
-describe('Srcset', () => {
+describes.sandboxed('Srcset', {}, () => {
   describe('parseSrcset', () => {
     function test(s, expected) {
       const res = parseSrcset(s);
diff --git a/test/unit/test-ssr-template-helper.js b/test/unit/test-ssr-template-helper.js
index c90b5ea9edcba..addc951888d98 100644
--- a/test/unit/test-ssr-template-helper.js
+++ b/test/unit/test-ssr-template-helper.js
@@ -35,7 +35,7 @@ describes.fakeWin(
     beforeEach(() => {
       ampdoc = env.ampdoc;
       win = env.win;
-      templates = Services.templatesFor(win);
+      templates = Services.templatesForDoc(ampdoc);
       viewer = Services.viewerForDoc(ampdoc);
       viewer.isTrustedViewer = () => Promise.resolve(true);
       hasCapabilityStub = env.sandbox.stub(viewer, 'hasCapability');
diff --git a/test/unit/test-standard-actions.js b/test/unit/test-standard-actions.js
index 94ad46d55e1f5..4bef2a1e43452 100644
--- a/test/unit/test-standard-actions.js
+++ b/test/unit/test-standard-actions.js
@@ -15,7 +15,7 @@
  */
 
 import {AmpDocService, AmpDocSingle} from '../../src/service/ampdoc-impl';
-import {RAW_OBJECT_ARGS_KEY} from '../../src/action-constants';
+import {RAW_OBJECT_ARGS_KEY} from '../../src/core/constants/action-constants';
 import {Services} from '../../src/services';
 import {
   StandardActions,
@@ -25,7 +25,6 @@ import {cidServiceForDocForTesting} from '../../src/service/cid-impl';
 import {htmlFor} from '../../src/static-template';
 import {installHistoryServiceForDoc} from '../../src/service/history-impl';
 import {macroTask} from '../../testing/yield';
-import {setParentWindow} from '../../src/service';
 import {toggle} from '../../src/style';
 import {user} from '../../src/log';
 
@@ -699,7 +698,10 @@ describes.sandboxed('StandardActions', {}, (env) => {
           });
         yield standardActions.handleAmpTarget_(invocation);
         expect(navigator.navigateTo).to.be.calledTwice;
-        expect(userError).to.be.calledWith('STANDARD-ACTIONS', 'Fake error.');
+        expect(userError).to.be.calledWith(
+          'STANDARD-ACTIONS',
+          env.sandbox.match((arg) => arg.message === 'Fake error.')
+        );
       });
     });
 
@@ -792,7 +794,12 @@ describes.sandboxed('StandardActions', {}, (env) => {
       const goBackStub = env.sandbox.stub(history, 'goBack');
       invocation.method = 'goBack';
       standardActions.handleAmpTarget_(invocation);
-      expect(goBackStub).to.be.calledOnce;
+      expect(goBackStub).to.be.calledWithExactly(false);
+      goBackStub.resetHistory();
+
+      invocation.args = {navigate: true};
+      standardActions.handleAmpTarget_(invocation);
+      expect(goBackStub).to.be.calledWith(true);
     });
 
     it('should implement optoutOfCid', function* () {
@@ -890,49 +897,4 @@ describes.sandboxed('StandardActions', {}, (env) => {
       expect(result).to.eql('scrollToResponsePromise');
     });
   });
-
-  describes.fakeWin('installInEmbedWindow', {}, (env) => {
-    let embedWin;
-    let embedActions;
-
-    beforeEach(() => {
-      embedWin = env.win;
-      setParentWindow(embedWin, window);
-
-      embedActions = {
-        addGlobalTarget: env.sandbox.spy(),
-        addGlobalMethodHandler: env.sandbox.spy(),
-      };
-      const embedElement = embedWin.document.documentElement;
-      env.sandbox
-        .stub(Services, 'actionServiceForDoc')
-        .withArgs(embedElement)
-        .returns(embedActions);
-    });
-
-    it('should configured the embedded actions service', () => {
-      StandardActions.installInEmbedWindow(embedWin, ampdoc);
-
-      const {
-        addGlobalTarget: target,
-        addGlobalMethodHandler: handler,
-      } = embedActions;
-
-      // Global targets.
-      expect(target).to.be.calledOnce;
-      expect(target).to.be.calledWith('AMP', env.sandbox.match.func);
-
-      // Global actions.
-      expect(handler).to.have.callCount(6);
-      expect(handler).to.be.calledWith('hide', env.sandbox.match.func);
-      expect(handler).to.be.calledWith('show', env.sandbox.match.func);
-      expect(handler).to.be.calledWith(
-        'toggleVisibility',
-        env.sandbox.match.func
-      );
-      expect(handler).to.be.calledWith('scrollTo', env.sandbox.match.func);
-      expect(handler).to.be.calledWith('focus', env.sandbox.match.func);
-      expect(handler).to.be.calledWith('toggleClass', env.sandbox.match.func);
-    });
-  });
 });
diff --git a/test/unit/test-static-template.js b/test/unit/test-static-template.js
index b52f05aebd010..f88ccd60e46ec 100644
--- a/test/unit/test-static-template.js
+++ b/test/unit/test-static-template.js
@@ -16,7 +16,7 @@
 
 import {htmlFor, htmlRefs} from '../../src/static-template';
 
-describe('Static Template', () => {
+describes.sandboxed('Static Template', {}, () => {
   describe('html', () => {
     it('generates static html tree', () => {
       const div = htmlFor(document)`<div attr="test"><p class="er"></p></div>`;
diff --git a/test/unit/test-storage.js b/test/unit/test-storage.js
index 92f5fecd8e006..88cf09ba6f39c 100644
--- a/test/unit/test-storage.js
+++ b/test/unit/test-storage.js
@@ -32,8 +32,9 @@ describes.sandboxed('Storage', {}, (env) => {
   let windowApi;
   let ampdoc;
   let viewerBroadcastHandler;
+  let clock;
 
-  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari on Sauce Labs.
+  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari.
   describe
     .configure()
     .skipSafari()
@@ -313,6 +314,47 @@ describes.sandboxed('Storage', {}, (env) => {
           });
       });
 
+      it('should get unexpired value based on duration', async () => {
+        clock = env.sandbox.useFakeTimers();
+        const store1 = new Store({});
+        store1.set('key1', 'value1');
+        expect(store1.values_).to.deep.equal({
+          'key1': {v: 'value1', t: 0},
+        });
+
+        bindingMock
+          .expects('loadBlob')
+          .withExactArgs('https://acme.com')
+          .returns(Promise.resolve(btoa(JSON.stringify(store1.obj))))
+          .once();
+        bindingMock
+          .expects('saveBlob')
+          .withExactArgs(
+            'https://acme.com',
+            env.sandbox.match((arg) => {
+              const store2 = new Store(JSON.parse(atob(arg)));
+              return store2.get('key1') === undefined;
+            })
+          )
+          .returns(Promise.resolve())
+          .twice();
+        viewerMock
+          .expects('broadcast')
+          .withExactArgs(
+            env.sandbox.match((arg) => {
+              return (
+                arg['type'] == 'amp-storage-reset' &&
+                arg['origin'] == 'https://acme.com'
+              );
+            })
+          )
+          .once();
+
+        expect(await storage.get('key1', 10)).to.equal('value1');
+        clock.tick(100);
+        expect(await storage.get('key1', 5)).to.be.undefined;
+      });
+
       it('should react to reset messages', () => {
         const store1 = new Store({});
         store1.set('key1', 'value1');
diff --git a/test/unit/test-string.js b/test/unit/test-string.js
deleted file mode 100644
index 1e44ea8c844a7..0000000000000
--- a/test/unit/test-string.js
+++ /dev/null
@@ -1,244 +0,0 @@
-/**
- * Copyright 2015 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.
- */
-
-import {
-  asyncStringReplace,
-  camelCaseToDash,
-  dashToCamelCase,
-  endsWith,
-  expandTemplate,
-  includes,
-  padStart,
-  trimEnd,
-} from '../../src/string';
-
-describe('dashToCamelCase', () => {
-  it('should transform dashes to camel case.', () => {
-    expect(dashToCamelCase('foo')).to.equal('foo');
-    expect(dashToCamelCase('foo-bar')).to.equal('fooBar');
-    expect(dashToCamelCase('foo-bar-baz')).to.equal('fooBarBaz');
-    expect(dashToCamelCase('-foo')).to.equal('Foo');
-  });
-});
-
-describe('endsWith', () => {
-  it('should determine whether string ends with.', () => {
-    expect(endsWith('a', 'a')).to.be.true;
-    expect(endsWith('b', 'a')).to.be.false;
-    expect(endsWith('ab', 'a')).to.be.false;
-    expect(endsWith('aba', 'a')).to.be.true;
-    expect(endsWith('aba', 'aba')).to.be.true;
-    expect(endsWith('Xaba', 'aba')).to.be.true;
-    expect(endsWith('Xaba', '')).to.be.true;
-    expect(endsWith('', 'a')).to.be.false;
-    expect(endsWith('aa', 'aaa')).to.be.false;
-    expect(endsWith('aa', 'aaaa')).to.be.false;
-    expect(endsWith('', '')).to.be.true;
-  });
-});
-
-describe('includes', () => {
-  it('should determine whether string includes.', () => {
-    expect(includes('a', 'a')).to.be.true;
-    expect(includes('a', 'a', 0)).to.be.true;
-    expect(includes('a', 'a', 1)).to.be.false;
-    expect(includes('b', 'a')).to.be.false;
-    expect(includes('ab', 'a')).to.be.true;
-    expect(includes('aba', 'a')).to.be.true;
-    expect(includes('aba', 'aba')).to.be.true;
-    expect(includes('Xaba', 'aba')).to.be.true;
-    expect(includes('Xaba', '')).to.be.true;
-    expect(includes('', 'a')).to.be.false;
-    expect(includes('aa', 'aaa')).to.be.false;
-    expect(includes('aa', 'aaaa')).to.be.false;
-    expect(includes('', '')).to.be.true;
-  });
-});
-
-describe('expandTemplate', () => {
-  const data = {
-    'x': 'Test 1',
-    'y': 'Test 2',
-    'test': 'test value',
-    'test2': 'another test value',
-    'tox': '${x}',
-    'toy': '${y}',
-    'toxy': '${x}${y}',
-    'totoxy': '${toxy}',
-    'loop1': '${loop2}',
-    'loop2': '${loop1}',
-    'loop': '${loop}',
-  };
-
-  function testGetter(key) {
-    return data[key] || 'not found';
-  }
-
-  it('should replace place holders with values.', () => {
-    expect(expandTemplate('${x}', testGetter)).to.equal('Test 1');
-    expect(expandTemplate('${y}', testGetter)).to.equal('Test 2');
-    expect(expandTemplate('${x} ${y}', testGetter)).to.equal('Test 1 Test 2');
-    expect(expandTemplate('a${x}', testGetter)).to.equal('aTest 1');
-    expect(expandTemplate('${x}a', testGetter)).to.equal('Test 1a');
-    expect(expandTemplate('a${x}a', testGetter)).to.equal('aTest 1a');
-    expect(expandTemplate('${unknown}', testGetter)).to.equal('not found');
-  });
-
-  it('should handle malformed place holders.', () => {
-    expect(expandTemplate('${x', testGetter)).to.equal('${x');
-    expect(expandTemplate('${', testGetter)).to.equal('${');
-    expect(expandTemplate('$x}', testGetter)).to.equal('$x}');
-    expect(expandTemplate('$x', testGetter)).to.equal('$x');
-    expect(expandTemplate('{x}', testGetter)).to.equal('{x}');
-    expect(expandTemplate('${{x}', testGetter)).to.equal('not found');
-  });
-
-  it('should default to one iteration.', () => {
-    expect(expandTemplate('${tox}', testGetter)).to.equal('${x}');
-    expect(expandTemplate('${toxy}', testGetter)).to.equal('${x}${y}');
-  });
-
-  it('should handle multiple iterations when asked to.', () => {
-    expect(expandTemplate('${tox}', testGetter, 2)).to.equal('Test 1');
-    expect(expandTemplate('${toxy}', testGetter, 2)).to.equal('Test 1Test 2');
-    expect(expandTemplate('${totoxy}', testGetter, 2)).to.equal('${x}${y}');
-    expect(expandTemplate('${totoxy}', testGetter, 3)).to.equal('Test 1Test 2');
-    expect(expandTemplate('${totoxy}', testGetter, 10)).to.equal(
-      'Test 1Test 2'
-    );
-  });
-
-  it('should handle circular expansions without hanging', () => {
-    expect(expandTemplate('${loop}', testGetter)).to.equal('${loop}');
-    expect(expandTemplate('${loop}', testGetter), 10).to.equal('${loop}');
-    expect(expandTemplate('${loop1}', testGetter), 10).to.equal('${loop2}');
-  });
-});
-
-describe('camelCaseToDash', () => {
-  it('should convert camelCase strings to dash-case strings', () => {
-    expect(camelCaseToDash('foo')).to.equal('foo');
-    expect(camelCaseToDash('fooBar')).to.equal('foo-bar');
-    expect(camelCaseToDash('fooBarBaz')).to.equal('foo-bar-baz');
-    // Not really valid camel case
-    expect(camelCaseToDash('FooBarBaz')).to.equal('Foo-bar-baz');
-    expect(camelCaseToDash('f00B4rB4z')).to.equal('f00-b4r-b4z');
-    expect(camelCaseToDash('f00b4rb4z')).to.equal('f00b4rb4z');
-    expect(camelCaseToDash('ABC')).to.equal('A-b-c');
-    expect(camelCaseToDash('aBC')).to.equal('a-b-c');
-  });
-});
-
-describe('trimEnd', () => {
-  it('remove trailing spaces', () => {
-    expect(trimEnd('abc ')).to.equal('abc');
-  });
-
-  it('remove trailing whitespace characters', () => {
-    expect(trimEnd('abc\n\t')).to.equal('abc');
-  });
-
-  it('should keep leading spaces', () => {
-    expect(trimEnd(' abc')).to.equal(' abc');
-  });
-
-  it('should keep leading whitespace characters', () => {
-    expect(trimEnd('\n\tabc')).to.equal('\n\tabc');
-  });
-});
-
-describe('asyncStringReplace', () => {
-  it('should not replace with no match', () => {
-    const result = asyncStringReplace('the quick silver fox', /brown/, 'red');
-    return expect(result).to.eventually.equal('the quick silver fox');
-  });
-
-  it('should replace with string as callback', () => {
-    const result = asyncStringReplace('the quick brown fox', /brown/, 'red');
-    return expect(result).to.eventually.equal('the quick red fox');
-  });
-
-  it('should use replacer with special pattern', async () => {
-    await expect(
-      asyncStringReplace('the quick brown fox', /brown/, '$$')
-    ).to.eventually.equal('the quick $ fox');
-    await expect(
-      asyncStringReplace('the quick brown fox', /brown/, 'purple $& grey')
-    ).to.eventually.equal('the quick purple brown grey fox');
-    await expect(
-      asyncStringReplace('the quick brown fox', /brown/, "sweet $'")
-    ).to.eventually.equal('the quick sweet  fox fox');
-    await expect(
-      asyncStringReplace('the quick brown fox', /brown/, '$`empathetic')
-    ).to.eventually.equal('the quick the quick empathetic fox');
-  });
-
-  it('should replace with sync function as callback', () => {
-    const result = asyncStringReplace(
-      'the quick brown fox',
-      /brown/,
-      () => 'red'
-    );
-    return expect(result).to.eventually.equal('the quick red fox');
-  });
-
-  it('should replace with no capture groups', () => {
-    const result = asyncStringReplace('the quick brown fox', /brown/, () =>
-      Promise.resolve('red')
-    );
-    return expect(result).to.eventually.equal('the quick red fox');
-  });
-
-  it('should replace with one capture group', () => {
-    const result = asyncStringReplace('item 798', /item (\d*)/, (match, p1) =>
-      Promise.resolve(p1)
-    );
-    return expect(result).to.eventually.equal('798');
-  });
-
-  it('should replace with two capture groups', () => {
-    const result = asyncStringReplace(
-      'John Smith',
-      /(\w+)\s(\w+)/,
-      (match, p1, p2) => Promise.resolve(`${p2}, ${p1}`)
-    );
-    return expect(result).to.eventually.equal('Smith, John');
-  });
-
-  it('should replace twice', () => {
-    const result = asyncStringReplace('John 123 Smith 456 III', /(\d+)/g, () =>
-      Promise.resolve('**')
-    );
-    return expect(result).to.eventually.equal('John ** Smith ** III');
-  });
-});
-
-describe('padStart', () => {
-  it('should pad string to target length', () => {
-    expect(padStart('abc', 4, ' ')).to.equal(' abc');
-    expect(padStart('abc', 8, ' ')).to.equal('     abc');
-  });
-
-  it('should trim padString if necessary to fit target length', () => {
-    expect(padStart('abc', 4, 'xy')).to.equal('xabc');
-    expect(padStart('abc', 6, 'xy')).to.equal('xyxabc');
-  });
-
-  it('should return original string if equal or greater than target length', () => {
-    expect(padStart('abc', 3, ' ')).to.equal('abc');
-    expect(padStart('abc', 0, ' ')).to.equal('abc');
-  });
-});
diff --git a/test/unit/test-style-installer.js b/test/unit/test-style-installer.js
index 3aca9d6d3895f..204d1989259f2 100644
--- a/test/unit/test-style-installer.js
+++ b/test/unit/test-style-installer.js
@@ -23,9 +23,9 @@ import {getStyle} from '../../src/style';
 import {installPerformanceService} from '../../src/service/performance-impl';
 import {installPlatformService} from '../../src/service/platform-impl';
 import {isAnimationNone} from '../../testing/test-helper';
-import {setShadowDomSupportedVersionForTesting} from '../../src/web-components';
+import {setShadowDomSupportedVersionForTesting} from '../../src/core/dom/web-components';
 
-describe('Styles', () => {
+describes.sandboxed('Styles', {}, () => {
   describes.realWin('makeBodyVisible', {amp: true}, (env) => {
     let win, doc, ampdoc;
     let resources;
@@ -371,74 +371,4 @@ describe('Styles', () => {
       });
     }
   );
-
-  describes.realWin('installStylesLegacy', {}, (env) => {
-    let win, doc;
-
-    beforeEach(() => {
-      win = env.win;
-      doc = win.document;
-    });
-
-    /**
-     * @param {!Document} doc
-     * @param {string} cssText
-     * @param {boolean} isRuntimeCss
-     * @param {string=} opt_ext
-     * @return {!Promise<!Element>}
-     */
-    function installStylesAsPromise(cssText, isRuntimeCss, opt_ext) {
-      return new Promise((resolve) => {
-        styles.installStylesLegacy(
-          doc,
-          cssText,
-          resolve,
-          isRuntimeCss,
-          opt_ext
-        );
-      });
-    }
-
-    it('should install runtime styles', () => {
-      const cssText = '/*amp-runtime*/';
-      return installStylesAsPromise(cssText, true).then((styleEl) => {
-        expect(styleEl.parentElement).to.equal(doc.head);
-        expect(doc.head.__AMP_CSS_SM['amp-runtime']).to.equal(styleEl);
-        expect(styleEl.hasAttribute('amp-runtime')).to.be.true;
-        expect(styleEl.textContent).to.equal(cssText);
-      });
-    });
-
-    it('should install extension styles after runtime', () => {
-      const runtimeCssText = '/*amp-runtime*/';
-      const extCssText = '/*amp-ext1*/';
-      return installStylesAsPromise(runtimeCssText, true)
-        .then(() => {
-          const otherEl = doc.createElement('link');
-          doc.head.appendChild(otherEl);
-          // Install extension styles.
-          return installStylesAsPromise(extCssText, false, 'amp-ext1');
-        })
-        .then((styleEl) => {
-          expect(styleEl.parentElement).to.equal(doc.head);
-          expect(styleEl.previousElementSibling).to.equal(
-            doc.head.__AMP_CSS_SM['amp-runtime']
-          );
-          expect(styleEl.getAttribute('amp-extension')).to.equal('amp-ext1');
-          expect(styleEl.textContent).to.equal(extCssText);
-        });
-    });
-
-    it('should create a amp-custom style', () => {
-      const promise = installStylesAsPromise('/*other*/', false, 'amp-custom');
-      return promise.then((styleEl) => {
-        expect(styleEl.getAttribute('amp-custom')).to.equal('');
-        expect(doc.head.lastElementChild).to.equal(styleEl);
-        expect(styleEl.textContent).to.equal('/*other*/');
-        expect(doc.head.querySelectorAll('style[amp-custom]')).to.have.length(
-          1
-        );
-      });
-    });
-  });
 });
diff --git a/test/unit/test-style.js b/test/unit/test-style.js
index 010c23fe5bf35..7f7b5c3ab7584 100644
--- a/test/unit/test-style.js
+++ b/test/unit/test-style.js
@@ -16,7 +16,7 @@
 
 import * as st from '../../src/style';
 
-describe('Style', () => {
+describes.sandboxed('Style', {}, (env) => {
   it('toggle', () => {
     const element = document.createElement('div');
 
@@ -72,7 +72,7 @@ describe('Style', () => {
   });
 
   it('setImportantStyles with vendor prefix', () => {
-    const spy = window.sandbox.spy();
+    const spy = env.sandbox.spy();
     const element = {
       style: {
         WebkitTransitionDurationImportant: '',
diff --git a/test/unit/test-task-queue.js b/test/unit/test-task-queue.js
index 9bce175dab719..8435077cb29de 100644
--- a/test/unit/test-task-queue.js
+++ b/test/unit/test-task-queue.js
@@ -16,12 +16,12 @@
 
 import {TaskQueue} from '../../src/service/task-queue';
 
-describe('TaskQueue', () => {
+describes.sandboxed('TaskQueue', {}, (env) => {
   let clock;
   let queue;
 
   beforeEach(() => {
-    clock = window.sandbox.useFakeTimers();
+    clock = env.sandbox.useFakeTimers();
     queue = new TaskQueue();
   });
 
diff --git a/test/unit/test-template.js b/test/unit/test-template.js
index c604c0d47aa0a..b324fa682d61f 100644
--- a/test/unit/test-template.js
+++ b/test/unit/test-template.js
@@ -14,39 +14,40 @@
  * limitations under the License.
  */
 
+import {BaseTemplate} from '../../src/base-template';
+import {Services} from '../../src/services';
+import {getServiceForDoc} from '../../src/service';
 import {
-  BaseTemplate,
-  installTemplatesService,
-  registerExtendedTemplate,
+  installTemplatesServiceForDoc,
+  registerExtendedTemplateForDoc,
 } from '../../src/service/template-impl';
-import {Services} from '../../src/services';
-import {getServiceForDoc, resetServiceForTesting} from '../../src/service';
 
 describes.realWin('Template', {amp: true}, (env) => {
   let templates;
   let doc;
   let win;
+  let ampdoc;
   let container;
 
   beforeEach(() => {
     win = env.win;
-    installTemplatesService(win);
-    templates = Services.templatesFor(win);
     doc = win.document;
+    ampdoc = env.ampdoc;
+    installTemplatesServiceForDoc(ampdoc);
+    templates = Services.templatesForDoc(ampdoc);
     container = doc.createElement('div');
     doc.body.appendChild(container);
   });
 
-  afterEach(() => {
-    resetServiceForTesting(win, 'templates');
-  });
-
   class TemplateImpl extends BaseTemplate {
     render(data) {
       const elem = doc.createElement('div');
-      elem.textContent = 'abc' + data.value;
+      elem.textContent = `abc${data.value}`;
       return elem;
     }
+    renderAsString(data) {
+      return `str(abc${data.value})`;
+    }
   }
 
   class TemplateImplCheckingViewer extends TemplateImpl {
@@ -72,8 +73,8 @@ describes.realWin('Template', {amp: true}, (env) => {
 
   it('should render immediately', () => {
     const templateElement = createTemplateElement();
-    registerExtendedTemplate(
-      win,
+    registerExtendedTemplateForDoc(
+      ampdoc,
       templateElement.getAttribute('type'),
       TemplateImpl
     );
@@ -82,12 +83,26 @@ describes.realWin('Template', {amp: true}, (env) => {
     });
   });
 
+  it('should render as string', () => {
+    const templateElement = createTemplateElement();
+    registerExtendedTemplateForDoc(
+      ampdoc,
+      templateElement.getAttribute('type'),
+      TemplateImpl
+    );
+    return templates
+      .renderTemplateAsString(templateElement, {value: 1})
+      .then((res) => {
+        expect(res).to.equal('str(abc1)');
+      });
+  });
+
   it('should render when detached', () => {
     const templateElement = createTemplateElement();
     // Use TemplateImplCheckingViewer to make sure viewerCanRenderTemplates
     // works correctly when the template is later detached.
-    registerExtendedTemplate(
-      win,
+    registerExtendedTemplateForDoc(
+      ampdoc,
       templateElement.getAttribute('type'),
       TemplateImplCheckingViewer
     );
@@ -106,8 +121,8 @@ describes.realWin('Template', {amp: true}, (env) => {
 
   it('should render array', () => {
     const templateElement = createTemplateElement();
-    registerExtendedTemplate(
-      win,
+    registerExtendedTemplateForDoc(
+      ampdoc,
       templateElement.getAttribute('type'),
       TemplateImpl
     );
@@ -122,15 +137,15 @@ describes.realWin('Template', {amp: true}, (env) => {
 
   it('should NOT allow registering template class twice', () => {
     const templateElement = createTemplateElement();
-    registerExtendedTemplate(
-      win,
+    registerExtendedTemplateForDoc(
+      ampdoc,
       templateElement.getAttribute('type'),
       TemplateImpl
     );
     allowConsoleError(() => {
       expect(() => {
-        registerExtendedTemplate(
-          win,
+        registerExtendedTemplateForDoc(
+          ampdoc,
           templateElement.getAttribute('type'),
           TemplateImpl
         );
@@ -166,8 +181,8 @@ describes.realWin('Template', {amp: true}, (env) => {
     );
     doc.body.appendChild(scriptElement);
     const p = templates.renderTemplate(templateElement, {value: 1});
-    registerExtendedTemplate(
-      win,
+    registerExtendedTemplateForDoc(
+      ampdoc,
       templateElement.getAttribute('type'),
       TemplateImpl
     );
@@ -186,8 +201,8 @@ describes.realWin('Template', {amp: true}, (env) => {
     doc.body.appendChild(scriptElement);
     const p1 = templates.renderTemplate(templateElement, {value: 1});
     const p2 = templates.renderTemplate(templateElement, {value: 2});
-    registerExtendedTemplate(
-      win,
+    registerExtendedTemplateForDoc(
+      ampdoc,
       templateElement.getAttribute('type'),
       TemplateImpl
     );
@@ -210,7 +225,7 @@ describes.realWin('Template', {amp: true}, (env) => {
     const id = type + Math.random();
     templateElement.setAttribute('id', id);
     doc.body.appendChild(templateElement);
-    registerExtendedTemplate(win, type, TemplateImpl);
+    registerExtendedTemplateForDoc(ampdoc, type, TemplateImpl);
 
     const parentElement = doc.createElement('div');
     parentElement.setAttribute('template', id);
@@ -266,7 +281,7 @@ describes.realWin('Template', {amp: true}, (env) => {
   it('should discover template via children', () => {
     const templateElement = createTemplateElement();
     const type = templateElement.getAttribute('type');
-    registerExtendedTemplate(win, type, TemplateImpl);
+    registerExtendedTemplateForDoc(ampdoc, type, TemplateImpl);
 
     const parentElement = doc.createElement('div');
     parentElement.appendChild(templateElement);
@@ -305,7 +320,7 @@ describes.realWin('Template', {amp: true}, (env) => {
 
     const templateElement = createTemplateElement();
     const type = templateElement.getAttribute('type');
-    registerExtendedTemplate(env.win, type, TemplateImpl);
+    registerExtendedTemplateForDoc(env.ampdoc, type, TemplateImpl);
 
     // With template, but different ID
     parentElement.appendChild(templateElement);
@@ -322,7 +337,7 @@ describes.realWin('Template', {amp: true}, (env) => {
     const id = type + Math.random();
     templateElement.setAttribute('id', id);
     doc.body.appendChild(templateElement);
-    registerExtendedTemplate(win, type, TemplateImpl);
+    registerExtendedTemplateForDoc(env.ampdoc, type, TemplateImpl);
 
     const parentElement = doc.createElement('div');
     parentElement.setAttribute('template', id);
@@ -349,39 +364,96 @@ describes.realWin('BaseTemplate', {amp: true}, (env) => {
     doc.body.appendChild(templateElement);
   });
 
-  it('should require render override', () => {
-    expect(() => {
-      new BaseTemplate(templateElement).render();
-    }).to.throw(/Not implemented/);
-  });
+  describe('tryUnwrap()', () => {
+    it('should unwrap single element', () => {
+      const root = doc.createElement('div');
+      const element1 = doc.createElement('div');
+      root.appendChild(element1);
+      expect(new BaseTemplate(templateElement).tryUnwrap(root)).to.equal(
+        element1
+      );
+    });
 
-  it('should unwrap single element', () => {
-    const root = doc.createElement('div');
-    const element1 = doc.createElement('div');
-    root.appendChild(element1);
-    expect(new BaseTemplate(templateElement).unwrap(root)).to.equal(element1);
-  });
+    it('should unwrap with empty/whitespace text', () => {
+      const root = doc.createElement('div');
+      const element1 = doc.createElement('div');
+      root.appendChild(doc.createTextNode('   '));
+      root.appendChild(element1);
+      root.appendChild(doc.createTextNode(' \n\t  '));
+      expect(new BaseTemplate(templateElement).tryUnwrap(root)).to.equal(
+        element1
+      );
+    });
 
-  it('should unwrap with empty/whitespace text', () => {
-    const root = doc.createElement('div');
-    const element1 = doc.createElement('div');
-    root.appendChild(doc.createTextNode('   '));
-    root.appendChild(element1);
-    root.appendChild(doc.createTextNode(' \n\t  '));
-    expect(new BaseTemplate(templateElement).unwrap(root)).to.equal(element1);
-  });
+    it('should NOT unwrap single non-div element', () => {
+      const root = doc.createElement('a');
+      root.textContent = 'abc';
+      expect(new BaseTemplate(templateElement).tryUnwrap(root)).to.equal(root);
+    });
 
-  it('should NOT unwrap multiple elements', () => {
-    const root = doc.createElement('div');
-    root.appendChild(doc.createElement('div'));
-    root.appendChild(doc.createElement('div'));
-    expect(new BaseTemplate(templateElement).unwrap(root)).to.equal(root);
+    it('should NOT unwrap multiple elements', () => {
+      const root = doc.createElement('div');
+      root.appendChild(doc.createElement('div'));
+      root.appendChild(doc.createElement('div'));
+      expect(new BaseTemplate(templateElement).tryUnwrap(root)).to.equal(root);
+    });
+
+    it('should NOT unwrap with non-empty/whitespace text', () => {
+      const root = doc.createElement('div');
+      root.appendChild(doc.createTextNode('a'));
+      root.appendChild(doc.createElement('div'));
+      expect(new BaseTemplate(templateElement).tryUnwrap(root)).to.equal(root);
+    });
   });
 
-  it('should NOT unwrap with non-empty/whitespace text', () => {
-    const root = doc.createElement('div');
-    root.appendChild(doc.createTextNode('a'));
-    root.appendChild(doc.createElement('div'));
-    expect(new BaseTemplate(templateElement).unwrap(root)).to.equal(root);
+  describe('unwrapChildren()', () => {
+    it('should unwrap single element', () => {
+      const root = doc.createElement('div');
+      const element1 = doc.createElement('div');
+      root.appendChild(element1);
+      expect(
+        new BaseTemplate(templateElement).unwrapChildren(root)
+      ).to.have.ordered.members([element1]);
+    });
+
+    it('should unwrap single non-div element', () => {
+      const root = doc.createElement('a');
+      root.textContent = 'abc';
+      const result = new BaseTemplate(templateElement).unwrapChildren(root);
+      expect(result).to.have.length(1);
+      expect(result[0].tagName).to.equal('DIV');
+      expect(result[0].textContent).to.equal('abc');
+    });
+
+    it('should unwrap with empty/whitespace text', () => {
+      const root = doc.createElement('div');
+      const element1 = doc.createElement('div');
+      root.appendChild(doc.createTextNode('   '));
+      root.appendChild(element1);
+      root.appendChild(doc.createTextNode(' \n\t  '));
+      expect(
+        new BaseTemplate(templateElement).unwrapChildren(root)
+      ).to.have.ordered.members([element1]);
+    });
+
+    it('should unwrap multiple elements', () => {
+      const root = doc.createElement('div');
+      const children = [doc.createElement('div'), doc.createElement('div')];
+      children.forEach((child) => root.appendChild(child));
+      expect(
+        new BaseTemplate(templateElement).unwrapChildren(root)
+      ).to.have.ordered.members(children);
+    });
+
+    it('should unwrap multiple elements and wrap any non-empty/whitespace text', () => {
+      const root = doc.createElement('div');
+      const children = [doc.createTextNode('a'), doc.createElement('div')];
+      children.forEach((child) => root.appendChild(child));
+      const result = new BaseTemplate(templateElement).unwrapChildren(root);
+      expect(result).to.have.length(2);
+      expect(result[0].tagName).to.equal('DIV');
+      expect(result[0].textContent).to.equal('a');
+      expect(result[1]).to.equal(children[1]);
+    });
   });
 });
diff --git a/test/unit/test-transition.js b/test/unit/test-transition.js
index d2fd08ea370c2..2ef14dc1bef1e 100644
--- a/test/unit/test-transition.js
+++ b/test/unit/test-transition.js
@@ -16,10 +16,10 @@
 
 import * as tr from '../../src/transition';
 
-describe('Transition', () => {
+describes.sandboxed('Transition', {}, (env) => {
   it('all', () => {
-    const func1 = window.sandbox.spy();
-    const func2 = window.sandbox.spy();
+    const func1 = env.sandbox.spy();
+    const func2 = env.sandbox.spy();
     const all = tr.all([func1, func2]);
 
     expect(func1).to.have.not.been.called;
diff --git a/test/unit/test-types.js b/test/unit/test-types.js
deleted file mode 100644
index 63e1b8f54fe88..0000000000000
--- a/test/unit/test-types.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import * as types from '../../src/types';
-
-describe('Types', () => {
-  describe('toArray', () => {
-    it('should return empty array if null is passed', () => {
-      expect(types.toArray(null).length).to.equal(0);
-      expect(types.toArray(undefined).length).to.equal(0);
-    });
-
-    it('should convert NodeList to array', () => {
-      const parent = document.createElement('div');
-      parent.appendChild(document.createElement('p'));
-      parent.appendChild(document.createElement('span'));
-      parent.appendChild(document.createElement('div'));
-      const arr = types.toArray(parent.childNodes);
-      expect(arr[0]).to.equal(parent.childNodes[0]);
-      expect(arr.length).to.equal(3);
-      expect(Array.isArray(arr)).to.be.true;
-    });
-
-    it('should convert HTMLCollection to array', () => {
-      const parent = document.createElement('div');
-      parent.appendChild(document.createElement('form'));
-      parent.appendChild(document.createElement('form'));
-      document.body.appendChild(parent);
-      const arr = types.toArray(document.forms);
-      expect(arr[0]).to.equal(document.forms[0]);
-      expect(arr.length).to.equal(2);
-      expect(Array.isArray(arr)).to.be.true;
-      document.body.removeChild(parent);
-    });
-
-    it('should convert HTMLOptionsCollection to array', () => {
-      const parent = document.createElement('select');
-      parent.appendChild(document.createElement('option'));
-      parent.appendChild(document.createElement('option'));
-      parent.appendChild(document.createElement('option'));
-      parent.appendChild(document.createElement('option'));
-      const arr = types.toArray(parent.options);
-      expect(arr[0]).to.equal(parent.options[0]);
-      expect(arr.length).to.equal(4);
-      expect(Array.isArray(arr)).to.be.true;
-    });
-  });
-
-  describe('isFiniteNumber', () => {
-    it('should yield false for non-numbers', () => {
-      expect(types.isFiniteNumber(null)).to.be.false;
-      expect(types.isFiniteNumber(undefined)).to.be.false;
-      expect(types.isFiniteNumber('')).to.be.false;
-      expect(types.isFiniteNumber('2')).to.be.false;
-      expect(types.isFiniteNumber([])).to.be.false;
-      expect(types.isFiniteNumber([2])).to.be.false;
-      expect(types.isFiniteNumber({})).to.be.false;
-      expect(types.isFiniteNumber({'a': 2})).to.be.false;
-      expect(types.isFiniteNumber(true)).to.be.false;
-      expect(types.isFiniteNumber(NaN)).to.be.false;
-    });
-
-    it('should yield true for numbers', () => {
-      expect(types.isFiniteNumber(3)).to.be.true;
-      expect(types.isFiniteNumber(3.2)).to.be.true;
-      expect(types.isFiniteNumber(123e5)).to.be.true;
-    });
-  });
-
-  describe('isEnumValue', () => {
-    /** @enum {string} */
-    const enumObj = {
-      X: 'x',
-      Y: 'y',
-      Z: 'z',
-    };
-
-    it('should return true for valid enum values', () => {
-      ['x', 'y', 'z'].forEach((value) => {
-        expect(types.isEnumValue(enumObj, value), 'enum value = ' + value).to.be
-          .true;
-      });
-    });
-
-    it('should return false for non-enum values', () => {
-      [
-        'a',
-        'X',
-        'Z',
-        {'x': 'x'},
-        ['y'],
-        null,
-        undefined,
-        [],
-        /x/,
-        /y/,
-        42,
-      ].forEach((value) => {
-        expect(types.isEnumValue(enumObj, value), 'enum value = ' + value).to.be
-          .false;
-      });
-    });
-  });
-});
diff --git a/test/unit/test-url-replacements.js b/test/unit/test-url-replacements.js
index 742f77c6e86db..82bdca408e9b1 100644
--- a/test/unit/test-url-replacements.js
+++ b/test/unit/test-url-replacements.js
@@ -29,7 +29,7 @@ import {
   stubServiceForDoc,
 } from '../../testing/test-helper';
 
-import {Observable} from '../../src/observable';
+import {Observable} from '../../src/core/data-structures/observable';
 import {Services} from '../../src/services';
 import {cidServiceForDocForTesting} from '../../src/service/cid-impl';
 import {createIframePromise} from '../../testing/iframe';
@@ -50,7 +50,7 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
   let userErrorStub;
   let ampdoc;
 
-  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari on Sauce Labs.
+  // TODO(amphtml, #25621): Cannot find atob / btoa on Safari.
   describe
     .configure()
     .skipSafari()
@@ -72,7 +72,6 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
           installDocumentInfoServiceForDoc(iframe.ampdoc);
           resetScheduledElementForTesting(iframe.win, 'amp-analytics');
           resetScheduledElementForTesting(iframe.win, 'amp-experiment');
-          resetScheduledElementForTesting(iframe.win, 'amp-share-tracking');
           if (opt_options) {
             if (opt_options.withCid) {
               markElementScheduledForTesting(iframe.win, 'amp-analytics');
@@ -95,15 +94,6 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
                 };
               });
             }
-            if (opt_options.withShareTracking) {
-              markElementScheduledForTesting(iframe.win, 'amp-share-tracking');
-              registerServiceBuilder(iframe.win, 'share-tracking', function () {
-                return Promise.resolve({
-                  incomingFragment: '12345',
-                  outgoingFragment: '54321',
-                });
-              });
-            }
             if (opt_options.withViewerIntegrationVariableService) {
               markElementScheduledForTesting(
                 iframe.win,
@@ -180,7 +170,7 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
             },
           },
           __AMP_SERVICES: {
-            'viewport': {obj: {}},
+            'viewport': {obj: {}, ctor: Object},
             'cid': {
               promise: Promise.resolve({
                 get: (config) =>
@@ -222,7 +212,7 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
           // Restrict the number of replacement params to globalVariableSource
           // Please consider adding the logic to amp-analytics instead.
           // Please contact @lannka or @zhouyx if the test fail.
-          expect(variables.length).to.equal(61);
+          expect(variables.length).to.equal(59);
         });
       });
 
@@ -623,7 +613,7 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
 
       it('should replace PAGE_VIEW_ID_64', () => {
         return expandUrlAsync('?pid=PAGE_VIEW_ID_64').then((res) => {
-          expect(res).to.match(/pid=([a-zA-Z0-9_-]+){10,}/);
+          expect(res).to.match(/pid=([a-zA-Z0-9_-]{10,})/);
         });
       });
 
@@ -636,7 +626,7 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
           /*opt_bindings*/ undefined,
           {withCid: true}
         ).then((res) => {
-          expect(res).to.match(/^\?a=cid-for-abc\&b=amp-([a-zA-Z0-9_-]+){10,}/);
+          expect(res).to.match(/^\?a=cid-for-abc\&b=amp-([a-zA-Z0-9_-]{10,})/);
         });
       });
 
@@ -662,7 +652,7 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
           /*opt_bindings*/ undefined,
           {withCid: true}
         ).then((res) => {
-          expect(res).to.match(/^\?a=cid-for-abc\&b=amp-([a-zA-Z0-9_-]+){10,}/);
+          expect(res).to.match(/^\?a=cid-for-abc\&b=amp-([a-zA-Z0-9_-]{10,})/);
         });
       });
 
@@ -756,29 +746,6 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         }
       );
 
-      it('should replace SHARE_TRACKING_INCOMING and SHARE_TRACKING_OUTGOING', () => {
-        return expect(
-          expandUrlAsync(
-            '?in=SHARE_TRACKING_INCOMING&out=SHARE_TRACKING_OUTGOING',
-            /*opt_bindings*/ undefined,
-            {withShareTracking: true}
-          )
-        ).to.eventually.equal('?in=12345&out=54321');
-      });
-
-      // TODO(#16916): Make this test work with synchronous throws.
-      it.skip(
-        'should replace SHARE_TRACKING_INCOMING and SHARE_TRACKING_OUTGOING' +
-          ' with empty string if amp-share-tracking is not configured',
-        () => {
-          return expect(
-            expandUrlAsync(
-              '?in=SHARE_TRACKING_INCOMING&out=SHARE_TRACKING_OUTGOING'
-            )
-          ).to.eventually.equal('?in=&out=');
-        }
-      );
-
       it('should replace TIMESTAMP', () => {
         return expandUrlAsync('?ts=TIMESTAMP').then((res) => {
           expect(res).to.match(/ts=\d+/);
@@ -923,9 +890,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
 
         it('is replaced if PAGE_LOAD_TIME is available within a delay', () => {
           const {documentElement} = win.document;
-          const urlReplacements = Services.urlReplacementsForDoc(
-            documentElement
-          );
+          const urlReplacements =
+            Services.urlReplacementsForDoc(documentElement);
           const validMetric = urlReplacements.expandUrlAsync(
             '?sh=PAGE_LOAD_TIME&s'
           );
@@ -1474,9 +1440,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         element.setAttribute('data-amp-replace', 'QUERY_PARAM');
         const {documentElement} = win.document;
         const urlReplacements = Services.urlReplacementsForDoc(documentElement);
-        const unallowlisted = urlReplacements.collectDisallowedVarsSync(
-          element
-        );
+        const unallowlisted =
+          urlReplacements.collectDisallowedVarsSync(element);
         expect(unallowlisted).to.deep.equal(['SOURCE_HOST', 'COUNTER']);
       });
 
@@ -1503,9 +1468,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         it('should expand w/ collect vars (skip async macro)', () => {
           const win = getFakeWindow();
           const {documentElement} = win.document;
-          const urlReplacements = Services.urlReplacementsForDoc(
-            documentElement
-          );
+          const urlReplacements =
+            Services.urlReplacementsForDoc(documentElement);
           urlReplacements.ampdoc.win.performance.timing.loadEventStart = 109;
           const expanded = urlReplacements.expandUrlSync(
             'r=RANDOM&c=CONST&f=FUNCT(hello,world)&a=b&d=PROM&e=PAGE_LOAD_TIME',
@@ -1528,9 +1492,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         it('should reject protocol changes', () => {
           const win = getFakeWindow();
           const {documentElement} = win.document;
-          const urlReplacements = Services.urlReplacementsForDoc(
-            documentElement
-          );
+          const urlReplacements =
+            Services.urlReplacementsForDoc(documentElement);
           let expanded = urlReplacements.expandUrlSync(
             'PROTOCOL://example.com/?r=RANDOM',
             {
@@ -1552,9 +1515,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         it('should reject javascript protocol', () => {
           const win = getFakeWindow();
           const {documentElement} = win.document;
-          const urlReplacements = Services.urlReplacementsForDoc(
-            documentElement
-          );
+          const urlReplacements =
+            Services.urlReplacementsForDoc(documentElement);
           allowConsoleError(() => {
             expect(() => {
               /*eslint no-script-url: 0*/
@@ -1619,9 +1581,9 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
             link.setAttribute('rel', 'canonical');
             iframe.doc.head.appendChild(link);
             const {documentElement} = iframe.doc;
-            const replacements = Services.urlReplacementsForDoc(
-              documentElement
-            );
+            Services.ampdoc(documentElement).setExtensionsKnown();
+            const replacements =
+              Services.urlReplacementsForDoc(documentElement);
             return replacements.expandUrlAsync(url);
           });
         }
@@ -1662,29 +1624,29 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
       });
 
       describe('access values via amp-subscriptions', () => {
-        let accessService;
-        let accessServiceMock;
+        let subscriptionsService;
+        let subscriptionsServiceMock;
 
         beforeEach(() => {
-          accessService = {
+          subscriptionsService = {
             getAccessReaderId: () => {},
             getAuthdataField: () => {},
           };
-          accessServiceMock = env.sandbox.mock(accessService);
+          subscriptionsServiceMock = env.sandbox.mock(subscriptionsService);
           env.sandbox
             .stub(Services, 'subscriptionsServiceForDocOrNull')
             .callsFake(() => {
-              return Promise.resolve(accessService);
+              return Promise.resolve(subscriptionsService);
             });
         });
 
         afterEach(() => {
-          accessServiceMock.verify();
+          subscriptionsServiceMock.verify();
         });
 
         function expandUrlAsync(url, opt_disabled) {
           if (opt_disabled) {
-            accessService = null;
+            subscriptionsService = null;
           }
           return createIframePromise().then((iframe) => {
             iframe.doc.title = 'Pixel Test';
@@ -1693,15 +1655,15 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
             link.setAttribute('rel', 'canonical');
             iframe.doc.head.appendChild(link);
             const {documentElement} = iframe.doc;
-            const replacements = Services.urlReplacementsForDoc(
-              documentElement
-            );
+            Services.ampdoc(documentElement).setExtensionsKnown();
+            const replacements =
+              Services.urlReplacementsForDoc(documentElement);
             return replacements.expandUrlAsync(url);
           });
         }
 
         it('should replace ACCESS_READER_ID', () => {
-          accessServiceMock
+          subscriptionsServiceMock
             .expects('getAccessReaderId')
             .returns(Promise.resolve('reader1'))
             .once();
@@ -1712,7 +1674,7 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         });
 
         it('should replace AUTHDATA', () => {
-          accessServiceMock
+          subscriptionsServiceMock
             .expects('getAuthdataField')
             .withExactArgs('field1')
             .returns(Promise.resolve('value1'))
@@ -1724,7 +1686,7 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         });
 
         it('should report error if not available', () => {
-          accessServiceMock.expects('getAccessReaderId').never();
+          subscriptionsServiceMock.expects('getAccessReaderId').never();
           return expandUrlAsync(
             '?a=ACCESS_READER_ID;',
             /* disabled */ true
@@ -1733,6 +1695,31 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
             expect(userErrorStub).to.be.calledOnce;
           });
         });
+
+        it('should prefer amp-subscriptions if amp-access also available', () => {
+          const accessService = {
+            getAccessReaderId: () => {},
+            getAuthdataField: () => {},
+          };
+          const accessServiceMock = env.sandbox.mock(accessService);
+          env.sandbox
+            .stub(Services, 'accessServiceForDocOrNull')
+            .callsFake(() => {
+              return Promise.resolve(accessService);
+            });
+          accessServiceMock.expects('getAuthdataField').never();
+
+          subscriptionsServiceMock
+            .expects('getAuthdataField')
+            .withExactArgs('field1')
+            .returns(Promise.resolve('value1'))
+            .once();
+          return expandUrlAsync('?a=AUTHDATA(field1)').then((res) => {
+            expect(res).to.match(/a=value1/);
+            expect(userErrorStub).to.have.not.been.called;
+            accessServiceMock.verify();
+          });
+        });
       });
 
       describe('link expansion', () => {
@@ -1967,9 +1954,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         it('should not reject protocol changes with expandStringSync', () => {
           const win = getFakeWindow();
           const {documentElement} = win.document;
-          const urlReplacements = Services.urlReplacementsForDoc(
-            documentElement
-          );
+          const urlReplacements =
+            Services.urlReplacementsForDoc(documentElement);
           let expanded = urlReplacements.expandStringSync(
             'PROTOCOL://example.com/?r=RANDOM',
             {
@@ -1991,9 +1977,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         it('should not encode values returned by expandStringSync', () => {
           const win = getFakeWindow();
           const {documentElement} = win.document;
-          const urlReplacements = Services.urlReplacementsForDoc(
-            documentElement
-          );
+          const urlReplacements =
+            Services.urlReplacementsForDoc(documentElement);
           const expanded = urlReplacements.expandStringSync('title=TITLE', {
             'TITLE': 'test with spaces',
           });
@@ -2003,9 +1988,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         it('should not check protocol changes with expandStringAsync', () => {
           const win = getFakeWindow();
           const {documentElement} = win.document;
-          const urlReplacements = Services.urlReplacementsForDoc(
-            documentElement
-          );
+          const urlReplacements =
+            Services.urlReplacementsForDoc(documentElement);
           return urlReplacements
             .expandStringAsync('RANDOM:X:Y', {
               'RANDOM': Promise.resolve('abc'),
@@ -2018,9 +2002,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         it('should not encode values returned by expandStringAsync', () => {
           const win = getFakeWindow();
           const {documentElement} = win.document;
-          const urlReplacements = Services.urlReplacementsForDoc(
-            documentElement
-          );
+          const urlReplacements =
+            Services.urlReplacementsForDoc(documentElement);
           return urlReplacements
             .expandStringAsync('title=TITLE', {
               'TITLE': Promise.resolve('test with spaces'),
@@ -2035,9 +2018,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         it('should fail for non-inputs', () => {
           const win = getFakeWindow();
           const {documentElement} = win.document;
-          const urlReplacements = Services.urlReplacementsForDoc(
-            documentElement
-          );
+          const urlReplacements =
+            Services.urlReplacementsForDoc(documentElement);
           const input = document.createElement('textarea');
           input.value = 'RANDOM';
           input.setAttribute('data-amp-replace', 'RANDOM');
@@ -2052,9 +2034,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         it('should fail for non-hidden inputs', () => {
           const win = getFakeWindow();
           const {documentElement} = win.document;
-          const urlReplacements = Services.urlReplacementsForDoc(
-            documentElement
-          );
+          const urlReplacements =
+            Services.urlReplacementsForDoc(documentElement);
           const input = document.createElement('input');
           input.value = 'RANDOM';
           input.setAttribute('data-amp-replace', 'RANDOM');
@@ -2069,9 +2050,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         it('should not replace not allowlisted vars', () => {
           const win = getFakeWindow();
           const {documentElement} = win.document;
-          const urlReplacements = Services.urlReplacementsForDoc(
-            documentElement
-          );
+          const urlReplacements =
+            Services.urlReplacementsForDoc(documentElement);
           const input = document.createElement('input');
           input.value = 'RANDOM';
           input.type = 'hidden';
@@ -2088,9 +2068,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         it('should replace input value with var subs - sync', () => {
           const win = getFakeWindow();
           const {documentElement} = win.document;
-          const urlReplacements = Services.urlReplacementsForDoc(
-            documentElement
-          );
+          const urlReplacements =
+            Services.urlReplacementsForDoc(documentElement);
           const input = document.createElement('input');
           input.value = 'RANDOM';
           input.type = 'hidden';
@@ -2114,9 +2093,8 @@ describes.sandboxed('UrlReplacements', {}, (env) => {
         it('should replace input value with var subs - sync', () => {
           const win = getFakeWindow();
           const {documentElement} = win.document;
-          const urlReplacements = Services.urlReplacementsForDoc(
-            documentElement
-          );
+          const urlReplacements =
+            Services.urlReplacementsForDoc(documentElement);
           const input = document.createElement('input');
           input.value = 'RANDOM';
           input.type = 'hidden';
diff --git a/test/unit/test-url-rewrite.js b/test/unit/test-url-rewrite.js
index 3bd1d2d994a05..90d911aae35c6 100644
--- a/test/unit/test-url-rewrite.js
+++ b/test/unit/test-url-rewrite.js
@@ -19,7 +19,7 @@ import {
   rewriteAttributesForElement,
 } from '../../src/url-rewrite';
 
-describe('resolveUrlAttr', () => {
+describes.sandboxed('resolveUrlAttr', {}, () => {
   it('should throw if __amp_source_origin is set', () => {
     allowConsoleError(() => {
       expect(() =>
@@ -147,7 +147,7 @@ describe('resolveUrlAttr', () => {
     });
 });
 
-describe('rewriteAttributesForElement', () => {
+describes.sandboxed('rewriteAttributesForElement', {}, () => {
   let location = 'https://pub.com/';
   it('should not modify `target` on publisher origin', () => {
     const element = document.createElement('a');
diff --git a/test/unit/test-url.js b/test/unit/test-url.js
index 7840b10b81f53..e1ba088332a13 100644
--- a/test/unit/test-url.js
+++ b/test/unit/test-url.js
@@ -31,7 +31,6 @@ import {
   isProtocolValid,
   isProxyOrigin,
   isSecureUrlDeprecated,
-  parseQueryString,
   parseUrlDeprecated,
   removeAmpJsParamsFromUrl,
   removeFragment,
@@ -42,7 +41,7 @@ import {
   serializeQueryString,
 } from '../../src/url';
 
-describe('getWinOrigin', () => {
+describes.sandboxed('getWinOrigin', {}, () => {
   it('should return origin if available', () => {
     expect(
       getWinOrigin({
@@ -98,7 +97,7 @@ describe('getWinOrigin', () => {
   });
 });
 
-describe('parseUrlDeprecated', () => {
+describes.sandboxed('parseUrlDeprecated', {}, () => {
   const currentPort = location.port;
 
   function compareParse(url, result) {
@@ -251,61 +250,15 @@ describe('parseUrlDeprecated', () => {
   it('should parse origin data:12345', () => {
     expect(parseUrlDeprecated('data:12345').origin).to.equal('data:12345');
   });
-});
 
-describe('parseQueryString', () => {
-  it('should return empty params when query string is empty or null', () => {
-    expect(parseQueryString(null)).to.deep.equal({});
-    expect(parseQueryString('')).to.deep.equal({});
-  });
-  it('should parse single key-value', () => {
-    expect(parseQueryString('a=1')).to.deep.equal({
-      'a': '1',
-    });
-  });
-  it('should parse two key-values', () => {
-    expect(parseQueryString('a=1&b=2')).to.deep.equal({
-      'a': '1',
-      'b': '2',
-    });
-  });
-  it('should ignore leading ?', () => {
-    expect(parseQueryString('?a=1&b=2')).to.deep.equal({
-      'a': '1',
-      'b': '2',
-    });
-  });
-  it('should ignore leading #', () => {
-    expect(parseQueryString('#a=1&b=2')).to.deep.equal({
-      'a': '1',
-      'b': '2',
-    });
-  });
-  it('should parse empty value', () => {
-    expect(parseQueryString('a=&b=2')).to.deep.equal({
-      'a': '',
-      'b': '2',
-    });
-    expect(parseQueryString('a&b=2')).to.deep.equal({
-      'a': '',
-      'b': '2',
-    });
-  });
-  it('should decode names and values', () => {
-    expect(parseQueryString('a%26=1%26&b=2')).to.deep.equal({
-      'a&': '1&',
-      'b': '2',
-    });
-  });
-  it('should return last dupe', () => {
-    expect(parseQueryString('a=1&b=2&a=3')).to.deep.equal({
-      'a': '3',
-      'b': '2',
+  it('should parse relative', () => {
+    expect(parseUrlDeprecated('chilaquiles/rojos')).to.include({
+      pathname: '/chilaquiles/rojos',
     });
   });
 });
 
-describe('serializeQueryString', () => {
+describes.sandboxed('serializeQueryString', {}, () => {
   it('should return empty string for empty params', () => {
     expect(serializeQueryString({})).to.equal('');
     expect(
@@ -334,7 +287,7 @@ describe('serializeQueryString', () => {
   });
 });
 
-describe('assertHttpsUrl/isSecureUrl', () => {
+describes.sandboxed('assertHttpsUrl/isSecureUrl', {}, () => {
   const referenceElement = document.createElement('div');
   it('should NOT allow null or undefined, but allow empty string', () => {
     allowConsoleError(() => {
@@ -386,7 +339,7 @@ describe('assertHttpsUrl/isSecureUrl', () => {
   });
 });
 
-describe('assertAbsoluteHttpOrHttpsUrl', () => {
+describes.sandboxed('assertAbsoluteHttpOrHttpsUrl', {}, () => {
   it('should allow http', () => {
     expect(assertAbsoluteHttpOrHttpsUrl('http://twitter.com/')).to.equal(
       'http://twitter.com/'
@@ -428,7 +381,7 @@ describe('assertAbsoluteHttpOrHttpsUrl', () => {
   });
 });
 
-describe('removeFragment', () => {
+describes.sandboxed('removeFragment', {}, () => {
   it('should remove fragment', () => {
     expect(removeFragment('https://twitter.com/path#abc')).to.equal(
       'https://twitter.com/path'
@@ -446,7 +399,7 @@ describe('removeFragment', () => {
   });
 });
 
-describe('removeSearch', () => {
+describes.sandboxed('removeSearch', {}, () => {
   it('should remove search', () => {
     expect(removeSearch('https://twitter.com/path?abc')).to.equal(
       'https://twitter.com/path'
@@ -497,7 +450,7 @@ describe('removeSearch', () => {
   });
 });
 
-describe('addParamToUrl', () => {
+describes.sandboxed('addParamToUrl', {}, () => {
   let url;
 
   beforeEach(() => {
@@ -562,7 +515,7 @@ describe('addParamToUrl', () => {
   });
 });
 
-describe('addParamsToUrl', () => {
+describes.sandboxed('addParamsToUrl', {}, () => {
   let url;
   const params = {
     hello: 'world',
@@ -601,7 +554,7 @@ describe('addParamsToUrl', () => {
   });
 });
 
-describe('addMissingParamsToUrl', () => {
+describes.sandboxed('addMissingParamsToUrl', {}, () => {
   let url;
   const params = {
     hello: 'world',
@@ -620,7 +573,7 @@ describe('addMissingParamsToUrl', () => {
   });
 });
 
-describe('isProxyOrigin', () => {
+describes.sandboxed('isProxyOrigin', {}, () => {
   function testProxyOrigin(href, bool) {
     it(
       'should return that ' +
@@ -671,7 +624,7 @@ describe('isProxyOrigin', () => {
   );
 });
 
-describe('isLocalhostOrigin', () => {
+describes.sandboxed('isLocalhostOrigin', {}, () => {
   function testLocalhostOrigin(href, bool) {
     it(
       'should return that ' +
@@ -692,7 +645,7 @@ describe('isLocalhostOrigin', () => {
   testLocalhostOrigin('http://www.example.com/foo.html', false);
 });
 
-describe('isProtocolValid', () => {
+describes.sandboxed('isProtocolValid', {}, () => {
   function testProtocolValid(href, bool) {
     it.configure()
       .skipFirefox()
@@ -722,7 +675,7 @@ describe('isProtocolValid', () => {
   testProtocolValid('vbscript:foo', false);
 });
 
-describe('getSourceOrigin/Url', () => {
+describes.sandboxed('getSourceOrigin/Url', {}, () => {
   function testOrigin(href, sourceHref) {
     it('should return the source origin/url from ' + href, () => {
       expect(getSourceUrl(href)).to.equal(sourceHref);
@@ -765,14 +718,6 @@ describe('getSourceOrigin/Url', () => {
     'https://cdn.ampproject.org/ad/www.origin.com/foo/?f=0#h',
     'http://www.origin.com/foo/?f=0#h'
   );
-  testOrigin(
-    'https://cdn.ampproject.org/action/www.origin.com/foo/?f=0#h',
-    'http://www.origin.com/foo/?f=0#h'
-  );
-  testOrigin(
-    'https://cdn.ampproject.org/action/s/www.origin.com/foo/?f=0#h',
-    'https://www.origin.com/foo/?f=0#h'
-  );
 
   // Prefixed CDN
   testOrigin(
@@ -890,7 +835,7 @@ describe('getSourceOrigin/Url', () => {
   });
 });
 
-describe('resolveRelativeUrl', () => {
+describes.sandboxed('resolveRelativeUrl', {}, () => {
   function testRelUrl(href, baseHref, resolvedHref) {
     it.configure()
       .skipFirefox()
@@ -936,12 +881,6 @@ describe('resolveRelativeUrl', () => {
     'http://acme.org/path/file?f=0#h'
   );
 
-  // TODO(camelburrito, #11827): This resolves to file:// on Sauce Labs.
-  // testRelUrl(
-  //     '\\\\acme.org/path/file?f=0#h',
-  //     'http://base.org/bpath/bfile?bf=0#bh',
-  //     'http://acme.org/path/file?f=0#h');
-
   // Absolute path.
   testRelUrl(
     '/path/file?f=0#h',
@@ -990,7 +929,7 @@ describe('resolveRelativeUrl', () => {
   );
 });
 
-describe('getCorsUrl', () => {
+describes.sandboxed('getCorsUrl', {}, () => {
   it('should error if __amp_source_origin is set', () => {
     allowConsoleError(() => {
       expect(() =>
@@ -1010,7 +949,7 @@ describe('getCorsUrl', () => {
   });
 });
 
-describe('removeAmpJsParamsFromUrl', () => {
+describes.sandboxed('removeAmpJsParamsFromUrl', {}, () => {
   it('should handle unaffected URLs', () => {
     expect(removeAmpJsParamsFromUrl('http://example.com')).to.equal(
       'http://example.com/'
@@ -1064,7 +1003,7 @@ describe('removeAmpJsParamsFromUrl', () => {
   });
 });
 
-describe('removeParamsFromSearch', () => {
+describes.sandboxed('removeParamsFromSearch', {}, () => {
   it('should remove the leading ? or &', () => {
     expect(removeParamsFromSearch('?a=1&', 'a')).to.equal('');
   });
@@ -1080,7 +1019,7 @@ describe('removeParamsFromSearch', () => {
   });
 });
 
-describe('getProxyServingType', () => {
+describes.sandboxed('getProxyServingType', {}, () => {
   it('should ignore non-proxy origins', () => {
     expect(getProxyServingType('http://www.example.com')).to.be.null;
     expect(getProxyServingType('http://cdn.ampproject.org/c/o.com/foo/')).to.be
diff --git a/test/unit/test-validator-integration.js b/test/unit/test-validator-integration.js
index 331238558d568..028c252cc930f 100644
--- a/test/unit/test-validator-integration.js
+++ b/test/unit/test-validator-integration.js
@@ -23,34 +23,55 @@ import {loadScript, maybeValidate} from '../../src/validator-integration';
 
 describes.fakeWin('validator-integration', {}, (env) => {
   let loadScriptStub;
-  let modeStub;
+  let getModeStub;
+  let isModeDevelopmentStub;
   let win;
   describe('maybeValidate', () => {
     beforeEach(() => {
       win = env.win;
-      loadScriptStub = env.sandbox.stub(eventHelper, 'loadPromise');
-      modeStub = env.sandbox.stub(mode, 'getMode');
+      loadScriptStub = env.sandbox
+        .stub(eventHelper, 'loadPromise')
+        .returns(Promise.resolve());
+      getModeStub = env.sandbox.stub(mode, 'getMode');
+      isModeDevelopmentStub = env.sandbox.stub(mode, 'isModeDevelopment');
     });
 
     it('should not load validator script if not in dev mode', () => {
-      modeStub.returns({development: false});
+      getModeStub.returns({});
+      isModeDevelopmentStub.returns(false);
       maybeValidate(win);
       expect(loadScriptStub).not.to.have.been.called;
     });
 
     it('should not load validator script if bypassed', () => {
-      modeStub.returns({development: true, test: true});
+      getModeStub.returns({test: true});
+      isModeDevelopmentStub.returns(true);
       win.location = 'https://www.example.com/#development=1&validate=0';
       maybeValidate(win);
       expect(loadScriptStub).not.to.have.been.called;
     });
 
     it('should load validator script if dev mode', () => {
-      modeStub.returns({development: true});
+      getModeStub.returns({});
+      isModeDevelopmentStub.returns(true);
       loadScriptStub.returns(Promise.resolve());
       maybeValidate(win);
       expect(loadScriptStub).to.have.been.called;
     });
+
+    it('should load WebAssembly validator', () => {
+      getModeStub.returns({test: true});
+      isModeDevelopmentStub.returns(true);
+      win.location = 'https://www.example.com/#development=1';
+      maybeValidate(win);
+      expect(loadScriptStub).to.have.been.calledWith(
+        env.sandbox.match(
+          (el) =>
+            el.getAttribute('src') ===
+            'https://cdn.ampproject.org/v0/validator_wasm.js'
+        )
+      );
+    });
   });
 
   describe('loadScript', () => {
diff --git a/test/unit/test-video-analytics-percentage-tracker.js b/test/unit/test-video-analytics-percentage-tracker.js
index 7f7df0ed6e337..e04cda4792b27 100644
--- a/test/unit/test-video-analytics-percentage-tracker.js
+++ b/test/unit/test-video-analytics-percentage-tracker.js
@@ -77,7 +77,7 @@ describes.fakeWin(
     }
 
     beforeEach(() => {
-      const {win, sandbox} = env;
+      const {sandbox, win} = env;
 
       mockTimer = {
         delay: sandbox.stub().callsFake((fn) => {
diff --git a/test/unit/test-video-iframe-integration.js b/test/unit/test-video-iframe-integration.js
index 1419dda60937d..c2f910570e017 100644
--- a/test/unit/test-video-iframe-integration.js
+++ b/test/unit/test-video-iframe-integration.js
@@ -146,24 +146,51 @@ describes.realWin('video-iframe-integration', {amp: false}, (env) => {
       });
     });
 
-    describe('#getIntersection', () => {
-      it('should request and receive intersection', () => {
-        const integration = new AmpVideoIntegration();
-        const postToParent = env.sandbox.spy(integration, 'postToParent_');
+    describe('get async value from host document', () => {
+      let integration;
+      let postToParent;
+      let callback;
 
-        const callback = env.sandbox.spy();
+      beforeEach(() => {
+        integration = new AmpVideoIntegration();
+        postToParent = env.sandbox.spy(integration, 'postToParent_');
+        callback = env.sandbox.spy();
 
-        const id = integration.getIntersectionForTesting_(callback);
+        integration.listenToOnce_ = env.sandbox.spy();
+      });
+
+      it('getIntersection should request and receive intersection', () => {
+        const id = integration.getFromHostForTesting_(
+          'getIntersection',
+          callback
+        );
 
         expect(
           postToParent.withArgs(env.sandbox.match({method: 'getIntersection'}))
         ).to.have.been.calledOnce;
 
-        const mockedIntersection = {tacos: 'al pastor'};
+        expect(integration.listenToOnce_).to.have.been.calledOnce;
+
+        const response = {tacos: 'al pastor'};
+        integration.onMessage_({id, args: response});
+        expect(callback.withArgs(response)).to.have.been.calledOnce;
+      });
+
+      it('getConsentData should request and receive consent data', () => {
+        const id = integration.getFromHostForTesting_(
+          'getConsentData',
+          callback
+        );
+
+        expect(
+          postToParent.withArgs(env.sandbox.match({method: 'getConsentData'}))
+        ).to.have.been.calledOnce;
 
-        integration.onMessage_({id, args: mockedIntersection});
+        expect(integration.listenToOnce_).to.have.been.calledOnce;
 
-        expect(callback.withArgs(mockedIntersection)).to.have.been.calledOnce;
+        const response = {tacos: 'al pastor'};
+        integration.onMessage_({id, args: response});
+        expect(callback.withArgs(response)).to.have.been.calledOnce;
       });
     });
 
diff --git a/test/unit/test-video-rotate-to-fullscreen.js b/test/unit/test-video-rotate-to-fullscreen.js
index 679cd28187b5d..8c88b82798abf 100644
--- a/test/unit/test-video-rotate-to-fullscreen.js
+++ b/test/unit/test-video-rotate-to-fullscreen.js
@@ -20,17 +20,16 @@ import {Services} from '../../src/services';
 describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
   let ampdoc;
   let autoFullscreenManager;
+  let ioCallback;
 
   function createVideo() {
     const element = env.win.document.createElement('div');
-    const noop = () => {};
-    Object.assign(element, {
-      getIntersectionChangeEntry: noop,
-    });
-    return {
+    const impl = {
       element,
-      signals: () => ({whenSignal: () => ({then: noop})}),
+      signals: () => ({whenSignal: () => ({then: () => {}})}),
     };
+    element.getImpl = () => Promise.resolve(impl);
+    return impl;
   }
 
   function mockCenteredVideo(element) {
@@ -42,10 +41,25 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
     env.win.screen.orientation.type = orientation;
   }
 
+  function fireIntersection({boundingClientRect, intersectionRatio, target}) {
+    ioCallback([
+      {
+        target,
+        boundingClientRect,
+        rootBounds: {},
+        intersectionRatio,
+      },
+    ]);
+  }
+
   beforeEach(() => {
     ampdoc = env.ampdoc;
     autoFullscreenManager = new AutoFullscreenManager(ampdoc);
     env.sandbox.stub(autoFullscreenManager, 'canFullscreen_').returns(true);
+    env.win.IntersectionObserver = (cb) => {
+      ioCallback = cb;
+      return {observe: () => {}, unobserve: () => {}, disconnect: () => {}};
+    };
   });
 
   it('should enter fullscreen if a video is centered in portrait', () => {
@@ -106,7 +120,7 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
     expect(exit).to.not.have.been.called;
   });
 
-  it('selects the only video playing manually amongst visible', () => {
+  it('selects the only video playing manually amongst visible', async () => {
     const video1 = createVideo();
     const video2 = createVideo();
     const video3 = createVideo();
@@ -116,28 +130,9 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
       height: 1000,
     });
 
-    env.sandbox.stub(video1.element, 'getIntersectionChangeEntry').returns({
-      // Visible:
-      intersectionRatio: 1,
-      boundingClientRect: {
-        top: 0,
-        bottom: 200,
-        width: 300,
-        height: 200,
-      },
-    });
-    env.sandbox.stub(video2.element, 'getIntersectionChangeEntry').returns({
-      // Visible:
-      intersectionRatio: 1,
-      boundingClientRect: {
-        top: 200,
-        bottom: 400,
-        width: 300,
-        height: 200,
-      },
-    });
-    env.sandbox.stub(video3.element, 'getIntersectionChangeEntry').returns({
+    const video3Entry = {
       // Visible:
+      target: video3.element,
       intersectionRatio: 1,
       boundingClientRect: {
         top: 400,
@@ -145,7 +140,7 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
         width: 300,
         height: 200,
       },
-    });
+    };
 
     const getPlayingState = env.sandbox.stub(
       autoFullscreenManager,
@@ -160,12 +155,13 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
     autoFullscreenManager.register({video: video2});
     autoFullscreenManager.register({video: video3});
 
-    expect(autoFullscreenManager.selectBestCenteredInPortrait_()).to.equal(
-      video3
-    );
+    const bestCenteredPromise =
+      autoFullscreenManager.selectBestCenteredInPortrait_();
+    fireIntersection(video3Entry);
+    expect(await bestCenteredPromise).equal(video3);
   });
 
-  it('selects center-most video among those visible and playing', () => {
+  it('selects center-most video among those visible and playing', async () => {
     const video1 = createVideo();
     const video2 = createVideo();
     const video3 = createVideo();
@@ -175,8 +171,9 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
       height: 600,
     });
 
-    env.sandbox.stub(video1.element, 'getIntersectionChangeEntry').returns({
+    const video1Entry = {
       // Visible:
+      target: video1.element,
       intersectionRatio: 1,
       boundingClientRect: {
         top: 0,
@@ -184,9 +181,10 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
         width: 300,
         height: 200,
       },
-    });
-    env.sandbox.stub(video2.element, 'getIntersectionChangeEntry').returns({
+    };
+    const video2Entry = {
       // Visible:
+      target: video2.element,
       intersectionRatio: 1,
       boundingClientRect: {
         top: 200,
@@ -194,9 +192,10 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
         width: 300,
         height: 200,
       },
-    });
-    env.sandbox.stub(video3.element, 'getIntersectionChangeEntry').returns({
+    };
+    const video3Entry = {
       // Visible:
+      target: video3.element,
       intersectionRatio: 1,
       boundingClientRect: {
         top: 400,
@@ -204,7 +203,7 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
         width: 300,
         height: 200,
       },
-    });
+    };
 
     const getPlayingState = env.sandbox.stub(
       autoFullscreenManager,
@@ -219,12 +218,13 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
     autoFullscreenManager.register({video: video2});
     autoFullscreenManager.register({video: video3});
 
-    expect(autoFullscreenManager.selectBestCenteredInPortrait_()).to.equal(
-      video2
-    );
+    const bestCenteredPromise =
+      autoFullscreenManager.selectBestCenteredInPortrait_();
+    [video1Entry, video2Entry, video3Entry].forEach(fireIntersection);
+    expect(await bestCenteredPromise).to.equal(video2);
   });
 
-  it('selects top-most video if two videos are equally centered', () => {
+  it('selects top-most video if two videos are equally centered', async () => {
     const video1 = createVideo();
     const video2 = createVideo();
 
@@ -233,8 +233,9 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
       height: 400,
     });
 
-    env.sandbox.stub(video1.element, 'getIntersectionChangeEntry').returns({
+    const video1Entry = {
       // Visible:
+      target: video1.element,
       intersectionRatio: 1,
       boundingClientRect: {
         top: 0,
@@ -242,9 +243,10 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
         width: 300,
         height: 200,
       },
-    });
-    env.sandbox.stub(video2.element, 'getIntersectionChangeEntry').returns({
+    };
+    const video2Entry = {
       // Visible:
+      target: video2.element,
       intersectionRatio: 1,
       boundingClientRect: {
         top: 200,
@@ -252,7 +254,7 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
         width: 300,
         height: 200,
       },
-    });
+    };
 
     const getPlayingState = env.sandbox.stub(
       autoFullscreenManager,
@@ -265,12 +267,13 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
     autoFullscreenManager.register({video: video1});
     autoFullscreenManager.register({video: video2});
 
-    expect(autoFullscreenManager.selectBestCenteredInPortrait_()).to.equal(
-      video1
-    );
+    const bestCenteredPromise =
+      autoFullscreenManager.selectBestCenteredInPortrait_();
+    [video1Entry, video2Entry].forEach(fireIntersection);
+    expect(await bestCenteredPromise).to.equal(video1);
   });
 
-  it('selects the highest intersection ratio if two videos are visible', () => {
+  it('selects the highest intersection ratio if two videos are visible', async () => {
     const video1 = createVideo();
     const video2 = createVideo();
 
@@ -279,7 +282,8 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
       height: 400,
     });
 
-    env.sandbox.stub(video1.element, 'getIntersectionChangeEntry').returns({
+    const video1Entry = {
+      target: video1.element,
       intersectionRatio: 0.9,
       boundingClientRect: {
         top: -30,
@@ -287,9 +291,10 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
         width: 300,
         height: 200,
       },
-    });
-    env.sandbox.stub(video2.element, 'getIntersectionChangeEntry').returns({
+    };
+    const video2Entry = {
       // Visible:
+      target: video2.element,
       intersectionRatio: 1,
       boundingClientRect: {
         top: 200,
@@ -297,7 +302,7 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
         width: 300,
         height: 200,
       },
-    });
+    };
 
     const getPlayingState = env.sandbox.stub(
       autoFullscreenManager,
@@ -310,8 +315,9 @@ describes.fakeWin('Rotate-to-fullscreen', {amp: true}, (env) => {
     autoFullscreenManager.register({video: video1});
     autoFullscreenManager.register({video: video2});
 
-    expect(autoFullscreenManager.selectBestCenteredInPortrait_()).to.equal(
-      video2
-    );
+    const bestCenteredPromise =
+      autoFullscreenManager.selectBestCenteredInPortrait_();
+    [video1Entry, video2Entry].forEach(fireIntersection);
+    expect(await bestCenteredPromise).to.equal(video2);
   });
 });
diff --git a/test/unit/test-viewer-cid-api.js b/test/unit/test-viewer-cid-api.js
index bb254b3d9d8e0..de24e76ee45fe 100644
--- a/test/unit/test-viewer-cid-api.js
+++ b/test/unit/test-viewer-cid-api.js
@@ -15,7 +15,7 @@
  */
 
 import {ViewerCidApi} from '../../src/service/viewer-cid-api';
-import {dict} from '../../src/utils/object';
+import {dict} from '../../src/core/types/object';
 import {mockServiceForDoc} from '../../testing/test-helper';
 
 describes.realWin('viewerCidApi', {amp: true}, (env) => {
diff --git a/test/unit/test-viewer.js b/test/unit/test-viewer.js
index add7330d723e4..9ce78e850fb94 100644
--- a/test/unit/test-viewer.js
+++ b/test/unit/test-viewer.js
@@ -21,11 +21,8 @@ import {installDocService} from '../../src/service/ampdoc-impl';
 import {installDocumentInfoServiceForDoc} from '../../src/service/document-info-impl';
 import {installPlatformService} from '../../src/service/platform-impl';
 import {installTimerService} from '../../src/service/timer-impl';
-import {
-  parseQueryString,
-  parseUrlDeprecated,
-  removeFragment,
-} from '../../src/url';
+import {parseQueryString} from '../../src/core/types/string/url';
+import {parseUrlDeprecated, removeFragment} from '../../src/url';
 
 describes.sandboxed('Viewer', {}, (env) => {
   let windowMock;
@@ -82,6 +79,13 @@ describes.sandboxed('Viewer', {}, (env) => {
       ancestorOrigins: null,
       search: '',
     };
+    windowApi.addEventListener = (type, listener) => {
+      events[type] = listener;
+    };
+    windowApi.removeEventListener = (type, listener) => {
+      expect(events[type]).to.equal(listener);
+      delete events[type];
+    };
     windowApi.document = {
       nodeType: /* DOCUMENT */ 9,
       defaultView: windowApi,
@@ -308,10 +312,6 @@ describes.sandboxed('Viewer', {}, (env) => {
     );
   });
 
-  it('should configure prerenderSize by default', () => {
-    expect(viewer.getPrerenderSize()).to.equal(1);
-  });
-
   it('should return promise that resolve on visible', function* () {
     const viewer = new ViewerImpl(ampdoc);
     expect(ampdoc.isVisible()).to.be.true;
@@ -329,7 +329,6 @@ describes.sandboxed('Viewer', {}, (env) => {
   });
 
   it('should initialize firstVisibleTime when doc becomes visible', () => {
-    params['prerenderSize'] = '3';
     const viewer = new ViewerImpl(ampdoc);
     expect(ampdoc.isVisible()).to.be.true;
     expect(ampdoc.getFirstVisibleTime()).to.equal(0);
@@ -363,12 +362,6 @@ describes.sandboxed('Viewer', {}, (env) => {
     expect(ampdoc.getLastVisibleTime()).to.equal(2);
   });
 
-  it('should configure prerenderSize', () => {
-    params['prerenderSize'] = '3';
-    const viewer = new ViewerImpl(ampdoc);
-    expect(viewer.getPrerenderSize()).to.equal(3);
-  });
-
   it('should receive viewport event', () => {
     let viewportEvent = null;
     viewer.onMessage('viewport', (event) => {
@@ -493,13 +486,6 @@ describes.sandboxed('Viewer', {}, (env) => {
   });
 
   describe('should receive the visibilitychange event', () => {
-    it('should change prerenderSize', () => {
-      viewer.receiveMessage('visibilitychange', {
-        prerenderSize: 4,
-      });
-      expect(viewer.getPrerenderSize()).to.equal(4);
-    });
-
     it('should change visibilityState', () => {
       viewer.receiveMessage('visibilitychange', {
         state: 'paused',
@@ -646,6 +632,45 @@ describes.sandboxed('Viewer', {}, (env) => {
     });
   });
 
+  describe('User action makes doc visible', () => {
+    const eventTest = (eventName) => {
+      ampdoc.overrideVisibilityState('prerender');
+      viewer = new ViewerImpl(ampdoc);
+      expect(ampdoc.getVisibilityState()).to.equal('prerender');
+
+      expect(events.touchstart).to.not.be.undefined;
+      expect(events.keydown).to.not.be.undefined;
+      expect(events.mousedown).to.not.be.undefined;
+
+      events[eventName]();
+      expect(ampdoc.getVisibilityState()).to.equal('visible');
+      expect(events.touchstart).to.be.undefined;
+      expect(events.keydown).to.be.undefined;
+      expect(events.mousedown).to.be.undefined;
+    };
+
+    it(
+      'should become visible on touchstart',
+      eventTest.bind(null, 'touchstart')
+    );
+
+    it('should become visible on mousedown', eventTest.bind(null, 'mousedown'));
+
+    it('should become visible on keydown', eventTest.bind(null, 'keydown'));
+
+    it('should not become visible when not a single doc', () => {
+      env.sandbox.stub(ampdoc, 'isSingleDoc').callsFake(() => false);
+      ampdoc.overrideVisibilityState('prerender');
+
+      viewer = new ViewerImpl(ampdoc);
+
+      expect(ampdoc.getVisibilityState()).to.equal('prerender');
+      expect(events.touchstart).to.be.undefined;
+      expect(events.keydown).to.be.undefined;
+      expect(events.mousedown).to.be.undefined;
+    });
+  });
+
   describe('Messaging not embedded', () => {
     it('should not expect messaging', () => {
       expect(viewer.messagingReadyPromise_).to.be.null;
@@ -1765,4 +1790,88 @@ describes.sandboxed('Viewer', {}, (env) => {
       return result;
     });
   });
+
+  describe('onMessage', () => {
+    it('should fire observer on event', () => {
+      const onMessageSpy = env.sandbox.spy();
+      viewer.onMessage('event', onMessageSpy);
+      viewer.receiveMessage('event', {foo: 'bar'});
+      expect(onMessageSpy).to.have.been.calledOnceWithExactly({foo: 'bar'});
+    });
+
+    it('should not fire observer on other events', () => {
+      const onMessageSpy = env.sandbox.spy();
+      viewer.onMessage('event', onMessageSpy);
+      viewer.receiveMessage('otherevent', {foo: 'bar'});
+      expect(onMessageSpy).to.not.have.been.called;
+    });
+
+    it('should fire observer with queued messages on handler registration', () => {
+      const onMessageSpy = env.sandbox.spy();
+      viewer.receiveMessage('event', {foo: 'bar'});
+      viewer.onMessage('event', onMessageSpy);
+      expect(onMessageSpy).to.have.been.calledOnceWithExactly({foo: 'bar'});
+    });
+
+    it('should empty queued messages after first handler registration', () => {
+      const onMessageSpy = env.sandbox.spy();
+      viewer.receiveMessage('event', {foo: 'bar'});
+      viewer.onMessage('event', onMessageSpy);
+      viewer.onMessage('event', onMessageSpy);
+      expect(onMessageSpy).to.have.been.calledOnceWithExactly({foo: 'bar'});
+    });
+
+    it('should cap the max number of queued messages', () => {
+      const onMessageSpy = env.sandbox.spy();
+      for (let i = 0; i < 55; i++) {
+        viewer.receiveMessage('event', {foo: 'bar'});
+      }
+      viewer.onMessage('event', onMessageSpy);
+      expect(onMessageSpy).to.have.callCount(50);
+    });
+  });
+
+  describe('onMessageRespond', () => {
+    it('should call responder on event', () => {
+      const onMessageRespondStub = env.sandbox.stub().resolves();
+      viewer.onMessageRespond('event', onMessageRespondStub);
+      viewer.receiveMessage('event', {foo: 'bar'});
+      expect(onMessageRespondStub).to.have.been.calledOnceWithExactly({
+        foo: 'bar',
+      });
+    });
+
+    it('should not call responder on other events', () => {
+      const onMessageRespondStub = env.sandbox.stub().resolves();
+      viewer.onMessageRespond('event', onMessageRespondStub);
+      viewer.receiveMessage('otherevent', {foo: 'bar'});
+      expect(onMessageRespondStub).to.not.have.been.called;
+    });
+
+    it('should call responder with queued messages on responder registration', () => {
+      const onMessageRespondStub = env.sandbox.stub().resolves();
+      viewer.receiveMessage('event', {foo: 'bar'});
+      viewer.onMessageRespond('event', onMessageRespondStub);
+      expect(onMessageRespondStub).to.have.been.calledOnceWithExactly({
+        foo: 'bar',
+      });
+    });
+
+    it('should empty queued messages after first responder registration', () => {
+      const onMessageRespondStub = env.sandbox.stub().resolves();
+      viewer.receiveMessage('event', {foo: 'bar'});
+      viewer.onMessageRespond('event', onMessageRespondStub);
+      viewer.onMessageRespond('event', onMessageRespondStub);
+      expect(onMessageRespondStub).to.have.been.calledOnceWithExactly({
+        foo: 'bar',
+      });
+    });
+
+    it('should return responder response when enqueing message on responder registration', async () => {
+      const onMessageRespondStub = env.sandbox.stub().resolves('response');
+      const promise = viewer.receiveMessage('event', {foo: 'bar'});
+      viewer.onMessageRespond('event', onMessageRespondStub);
+      expect(await promise).to.equal('response');
+    });
+  });
 });
diff --git a/test/unit/test-viewport-binding.js b/test/unit/test-viewport-binding.js
index 980e7c7fcd230..762e372d876a5 100644
--- a/test/unit/test-viewport-binding.js
+++ b/test/unit/test-viewport-binding.js
@@ -21,7 +21,7 @@ import {installDocService} from '../../src/service/ampdoc-impl';
 import {installPlatformService} from '../../src/service/platform-impl';
 import {installVsyncService} from '../../src/service/vsync-impl';
 import {toggleExperiment} from '../../src/experiments';
-import {whenDocumentReady} from '../../src/document-ready';
+import {whenDocumentReady} from '../../src/core/document-ready';
 
 describes.realWin('ViewportBindingNatural', {ampCss: true}, (env) => {
   let binding;
@@ -69,8 +69,8 @@ describes.realWin('ViewportBindingNatural', {ampCss: true}, (env) => {
     binding = new ViewportBindingNatural_(ampdoc);
     const bodyStyles = win.getComputedStyle(win.document.body);
     expect(bodyStyles.position).to.equal('relative');
-    expect(bodyStyles.overflowX).to.equal('hidden');
-    expect(bodyStyles.overflowY).to.not.equal('hidden');
+    expect(bodyStyles.overflowX).to.equal('visible');
+    expect(bodyStyles.overflowY).to.equal('visible');
   });
 
   it('should NOT require fixed layer transferring', () => {
diff --git a/test/unit/test-viewport-observer.js b/test/unit/test-viewport-observer.js
new file mode 100644
index 0000000000000..dae400b6305e2
--- /dev/null
+++ b/test/unit/test-viewport-observer.js
@@ -0,0 +1,156 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  createViewportObserver,
+  observeWithSharedInOb,
+  unobserveWithSharedInOb,
+} from '../../src/viewport-observer';
+
+describes.sandboxed('Viewport Observer', {}, (env) => {
+  describe('createViewportObserver', () => {
+    let win;
+    let ctorSpy;
+    const noop = () => {};
+
+    beforeEach(() => {
+      ctorSpy = env.sandbox.stub();
+      win = {
+        parent: null,
+        document: {},
+        IntersectionObserver: ctorSpy,
+      };
+    });
+
+    it('Uses implicit root.', () => {
+      createViewportObserver(noop, win);
+      expect(ctorSpy).calledWith(noop, {threshold: undefined, root: undefined});
+    });
+
+    it('Pass along threshold argument', () => {
+      createViewportObserver(noop, win, {threshold: 0.5});
+      expect(ctorSpy).calledWith(noop, {threshold: 0.5, root: undefined});
+    });
+
+    it('Sets document root appropriately', () => {
+      // Implicit root when not iframed.
+      createViewportObserver(noop, win, {needsRootBounds: true});
+      expect(ctorSpy).calledWith(noop, {threshold: undefined, root: undefined});
+
+      // Document root when iframed.
+      win.parent = {};
+      createViewportObserver(noop, win, {needsRootBounds: true});
+      expect(ctorSpy).calledWith(noop, {
+        threshold: undefined,
+        root: win.document,
+      });
+    });
+  });
+
+  describe('Shared viewport observer', () => {
+    let inOb;
+    let win;
+    let doc;
+    let el1;
+    let el2;
+    let tracked;
+
+    beforeEach(() => {
+      inOb = env.sandbox.stub();
+      tracked = new Set();
+      inOb.callsFake(() => ({
+        observe: (el) => tracked.add(el),
+        unobserve: (el) => tracked.delete(el),
+      }));
+
+      win = {IntersectionObserver: inOb};
+      doc = {defaultView: win};
+      el1 = {ownerDocument: doc};
+      el2 = {ownerDocument: doc};
+    });
+
+    /**
+     * Simulate an IntersectionObserver callback for an element.
+     * @param {!Element} el
+     * @param {boolean} inViewport
+     */
+    function toggleViewport(el, inViewport) {
+      const win = el.ownerDocument.defaultView;
+      // Grabs the IO Callback shared by all the viewport observers.
+      const ioCallback = win.IntersectionObserver.getCall(0).args[0];
+      ioCallback([{target: el, isIntersecting: inViewport}]);
+    }
+
+    it('observed element should have its callback fired each time it enters/exist the viewport.', () => {
+      const viewportEvents = [];
+      observeWithSharedInOb(el1, (inViewport) =>
+        viewportEvents.push(inViewport)
+      );
+      toggleViewport(el1, true);
+      toggleViewport(el1, false);
+
+      expect(viewportEvents).eql([true, false]);
+    });
+
+    it('can independently observe multiple elements', () => {
+      const el1Events = [];
+      const el2Events = [];
+
+      observeWithSharedInOb(el1, (inViewport) => el1Events.push(inViewport));
+      observeWithSharedInOb(el2, (inViewport) => el2Events.push(inViewport));
+      toggleViewport(el1, false);
+      toggleViewport(el2, true);
+      toggleViewport(el1, true);
+
+      expect(el1Events).eql([false, true]);
+      expect(el2Events).eql([true]);
+    });
+
+    it('once unobserved, the callback is no longer fired', () => {
+      const el1Events = [];
+
+      observeWithSharedInOb(el1, (inViewport) => el1Events.push(inViewport));
+      toggleViewport(el1, false);
+
+      unobserveWithSharedInOb(el1);
+      toggleViewport(el1, true);
+      toggleViewport(el1, false);
+
+      expect(el1Events).eql([false]);
+    });
+
+    it('Observing twice with the same callback is fine, but unique ones throw', () => {
+      const noop = () => {};
+      observeWithSharedInOb(el1, noop);
+      observeWithSharedInOb(el1, noop);
+
+      allowConsoleError(() => {
+        expect(() => observeWithSharedInOb(el1, () => {})).throws(
+          'Assertion failed'
+        );
+      });
+    });
+
+    it('A quick observe and unobserve pair should not cause an error or fire the callback', () => {
+      const spy = env.sandbox.spy();
+      observeWithSharedInOb(el1, spy);
+      unobserveWithSharedInOb(el1);
+      toggleViewport(el1, true);
+
+      expect(spy).not.called;
+    });
+  });
+});
diff --git a/test/unit/test-viewport.js b/test/unit/test-viewport.js
index 562bb31be0587..e001238637101 100644
--- a/test/unit/test-viewport.js
+++ b/test/unit/test-viewport.js
@@ -36,7 +36,7 @@ import {installPlatformService} from '../../src/service/platform-impl';
 import {installTimerService} from '../../src/service/timer-impl';
 import {installViewerServiceForDoc} from '../../src/service/viewer-impl';
 import {installVsyncService} from '../../src/service/vsync-impl';
-import {layoutRectLtwh} from '../../src/layout-rect';
+import {layoutRectLtwh} from '../../src/core/math/layout-rect';
 import {loadPromise} from '../../src/event-helper';
 import {setParentWindow} from '../../src/service';
 
@@ -133,6 +133,7 @@ describes.fakeWin('Viewport', {}, (env) => {
         return {then: (callback) => callback()};
       },
       updatePaddingTop: () => {},
+      animateFixedElements: () => {},
     };
     viewport.getSize();
 
@@ -142,7 +143,7 @@ describes.fakeWin('Viewport', {}, (env) => {
     env.sandbox.stub(vsync, 'canAnimate').returns(true);
     env.sandbox
       .stub(vsync, 'createAnimTask')
-      .callsFake((unusedContextNode, task) => {
+      .callsFake((_unusedContextNode, task) => {
         return () => {
           vsyncTasks.push(task);
         };
@@ -221,6 +222,35 @@ describes.fakeWin('Viewport', {}, (env) => {
       expect(root).to.have.class('i-amphtml-iframed');
     });
 
+    describe('scroll to in ios-webview', () => {
+      beforeEach(() => {
+        ampdoc.win.scrollTo = env.sandbox.spy();
+        env.sandbox.stub(Services, 'platformFor').returns({
+          isIos: () => {
+            return true;
+          },
+        });
+        // To ensure isIframed() returns true
+        ampdoc.win.parent = {};
+      });
+
+      it('should scroll when in a single doc', async () => {
+        env.sandbox.stub(ampdoc, 'isSingleDoc').returns(true);
+
+        new ViewportImpl(ampdoc, binding, viewer);
+        await ampdoc.whenReady();
+        expect(ampdoc.win.scrollTo).to.have.been.called;
+      });
+
+      it('should *not* scroll when in a shadow doc', async () => {
+        env.sandbox.stub(ampdoc, 'isSingleDoc').returns(false);
+
+        new ViewportImpl(ampdoc, binding, viewer);
+        await ampdoc.whenReady();
+        expect(ampdoc.win.scrollTo).not.to.have.been.called;
+      });
+    });
+
     describe('ios-webview', () => {
       let webviewParam;
       let isIos;
@@ -586,8 +616,14 @@ describes.fakeWin('Viewport', {}, (env) => {
     const bindingMock = env.sandbox.mock(binding);
     const fixedLayerMock = env.sandbox.mock(viewport.fixedLayer_);
     fixedLayerMock
-      .expects('updatePaddingTop')
-      .withExactArgs(/* paddingTop */ 0, /* transient */ undefined)
+      .expects('animateFixedElements')
+      .withExactArgs(
+        /* paddingTop */ 0,
+        /* lastPaddingTop */ 19,
+        /* duration */ 0,
+        /* curve */ undefined,
+        /* transient */ undefined
+      )
       .once();
     viewerViewportHandler({paddingTop: 0});
     bindingMock.verify();
@@ -598,13 +634,19 @@ describes.fakeWin('Viewport', {}, (env) => {
     const bindingMock = env.sandbox.mock(binding);
     const fixedLayerMock = env.sandbox.mock(viewport.fixedLayer_);
     fixedLayerMock
-      .expects('updatePaddingTop')
-      .withExactArgs(/* paddingTop */ 0, /* transient */ true)
+      .expects('animateFixedElements')
+      .withExactArgs(
+        /* paddingTop */ 0,
+        /* lastPaddingTop */ 19,
+        /* duration */ 300,
+        /* curve */ 'ease-in',
+        /* transient */ true
+      )
       .once();
     bindingMock.expects('hideViewerHeader').withArgs(true, 19).once();
     viewerViewportHandler({
       paddingTop: 0,
-      duation: 300,
+      duration: 300,
       curve: 'ease-in',
       transient: true,
     });
@@ -612,23 +654,6 @@ describes.fakeWin('Viewport', {}, (env) => {
     fixedLayerMock.verify();
   });
 
-  it(
-    'should update padding for fixed layer when viewer wants to ' +
-      'hide header',
-    () => {
-      viewport.fixedLayer_ = {updatePaddingTop: () => {}};
-      const fixedLayerMock = env.sandbox.mock(viewport.fixedLayer_);
-      fixedLayerMock.expects('updatePaddingTop').withArgs(0).once();
-      viewerViewportHandler({
-        paddingTop: 0,
-        duation: 300,
-        curve: 'ease-in',
-        transient: 'true',
-      });
-      fixedLayerMock.verify();
-    }
-  );
-
   it('should update viewport when entering lightbox mode', () => {
     const requestingEl = document.createElement('div');
 
@@ -1085,7 +1110,9 @@ describes.fakeWin('Viewport', {}, (env) => {
       .run('should set pan-y with experiment', () => {
         viewer.isEmbedded = () => true;
         viewport = new ViewportImpl(ampdoc, binding, viewer);
-        expect(win.getComputedStyle(root)['touch-action']).to.equal('pan-y');
+        expect(win.getComputedStyle(root)['touch-action']).to.equal(
+          'pan-y pinch-zoom'
+        );
       });
   });
 
@@ -1230,7 +1257,7 @@ describes.fakeWin('Viewport', {}, (env) => {
   });
 });
 
-describe('Viewport META', () => {
+describes.sandboxed('Viewport META', {}, (env) => {
   describe('parseViewportMeta', () => {
     it('should accept null or empty strings', () => {
       expect(parseViewportMeta(null)).to.be.empty;
@@ -1404,7 +1431,7 @@ describe('Viewport META', () => {
     let viewportMetaSetter;
 
     beforeEach(() => {
-      clock = window.sandbox.useFakeTimers();
+      clock = env.sandbox.useFakeTimers();
       viewer = {
         isEmbedded: () => false,
         getParam: (param) => {
@@ -1421,7 +1448,7 @@ describe('Viewport META', () => {
       originalViewportMetaString = 'width=device-width,minimum-scale=1';
       viewportMetaString = originalViewportMetaString;
       viewportMeta = Object.create(null);
-      viewportMetaSetter = window.sandbox.spy();
+      viewportMetaSetter = env.sandbox.spy();
       Object.defineProperty(viewportMeta, 'content', {
         get: () => viewportMetaString,
         set: (value) => {
@@ -1531,7 +1558,7 @@ describe('Viewport META', () => {
   });
 });
 
-describe('createViewport', () => {
+describes.sandboxed('createViewport', {}, () => {
   describes.fakeWin(
     'in Android',
     {
diff --git a/test/unit/test-vsync.js b/test/unit/test-vsync.js
index f2f2d1d46154f..81b49eb2bedfd 100644
--- a/test/unit/test-vsync.js
+++ b/test/unit/test-vsync.js
@@ -72,8 +72,7 @@ describes.fakeWin('vsync', {}, (env) => {
       });
     });
 
-    // TODO(choumx, #12476): Make this test work with sinon 4.0.
-    it.skip('should generate a frame and run callbacks', () => {
+    it('should generate a frame and run callbacks', () => {
       let result = '';
       return new Promise((resolve) => {
         vsync.run({
@@ -171,8 +170,7 @@ describes.fakeWin('vsync', {}, (env) => {
       });
     });
 
-    // TODO(choumx, #12476): Make this test work with sinon 4.0.
-    it.skip('should schedule nested vsyncs', () => {
+    it('should schedule nested vsyncs', () => {
       let result = '';
       return new Promise((resolve) => {
         vsync.run({
@@ -207,8 +205,7 @@ describes.fakeWin('vsync', {}, (env) => {
       });
     });
 
-    // TODO(choumx, #12476): Make this test work with sinon 4.0.
-    it.skip('should return a promise from runPromise that executes "run"', () => {
+    it('should return a promise from runPromise that executes "run"', () => {
       const measureSpy = env.sandbox.spy();
       const mutateSpy = env.sandbox.spy();
       return vsync
@@ -219,8 +216,7 @@ describes.fakeWin('vsync', {}, (env) => {
         });
     });
 
-    // TODO(choumx, #12476): Make this test work with sinon 4.0.
-    it.skip('should return a promise from measurePromise that runs measurer', () => {
+    it('should return a promise from measurePromise that runs measurer', () => {
       let measured = false;
       return vsync
         .measurePromise(() => {
@@ -231,8 +227,7 @@ describes.fakeWin('vsync', {}, (env) => {
         });
     });
 
-    // TODO(choumx, #12476): Make this test work with sinon 4.0.
-    it.skip('should return a promise from mutatePromisethat runs mutator', () => {
+    it('should return a promise from mutatePromisethat runs mutator', () => {
       const mutator = env.sandbox.spy();
       return vsync.mutatePromise(mutator).then(() => {
         expect(mutator).to.be.calledOnce;
diff --git a/test/unit/test-xhr-document-fetcher.js b/test/unit/test-xhr-document-fetcher.js
index 1d71e77520613..f585460bdc2ac 100644
--- a/test/unit/test-xhr-document-fetcher.js
+++ b/test/unit/test-xhr-document-fetcher.js
@@ -150,7 +150,7 @@ describes.realWin('DocumentFetcher', {amp: true}, function (env) {
         sendMessageAwaitResponse: getDefaultResponsePromise,
         whenFirstVisible: () => Promise.resolve(),
       };
-      sendMessageStub = window.sandbox.stub(viewer, 'sendMessageAwaitResponse');
+      sendMessageStub = env.sandbox.stub(viewer, 'sendMessageAwaitResponse');
       sendMessageStub.returns(getDefaultResponsePromise());
       ampdocViewerStub.returns(viewer);
       interceptionEnabledWin = {
diff --git a/test/unit/test-xhr.js b/test/unit/test-xhr.js
index dde773da47a24..eec8a65ac1b42 100644
--- a/test/unit/test-xhr.js
+++ b/test/unit/test-xhr.js
@@ -26,10 +26,10 @@ import {utf8FromArrayBuffer} from '../../extensions/amp-a4a/0.1/amp-a4a';
 import {xhrServiceForTesting} from '../../src/service/xhr-impl';
 
 // TODO(jridgewell, #11827): Make this test work on Safari.
-describe
+describes.sandboxed
   .configure()
   .skipSafari()
-  .run('XHR', function () {
+  .run('XHR', {}, function (env) {
     let ampdocServiceForStub;
     let ampdoc;
     let ampdocViewerStub;
@@ -62,7 +62,7 @@ describe
     ];
 
     function setupMockXhr() {
-      const mockXhr = window.sandbox.useFakeXMLHttpRequest();
+      const mockXhr = env.sandbox.useFakeXMLHttpRequest();
       xhrCreated = new Promise((resolve) => (mockXhr.onCreate = resolve));
     }
 
@@ -76,7 +76,7 @@ describe
     }
 
     beforeEach(() => {
-      ampdocServiceForStub = window.sandbox.stub(Services, 'ampdocServiceFor');
+      ampdocServiceForStub = env.sandbox.stub(Services, 'ampdocServiceFor');
       ampdoc = {
         getRootNode: () => null,
         whenFirstVisible: () => Promise.resolve(),
@@ -86,7 +86,7 @@ describe
         getAmpDoc: () => ampdoc,
         getSingleDoc: () => ampdoc,
       });
-      ampdocViewerStub = window.sandbox.stub(Services, 'viewerForDoc');
+      ampdocViewerStub = env.sandbox.stub(Services, 'viewerForDoc');
       ampdocViewerStub.returns({});
 
       location.href = 'https://acme.com/path';
@@ -147,14 +147,14 @@ describe
 
           it('should allow FormData as body', () => {
             const fakeWin = null;
-            window.sandbox.stub(Services, 'platformFor').returns({
+            env.sandbox.stub(Services, 'platformFor').returns({
               isIos() {
                 return false;
               },
             });
 
             const formData = createFormDataWrapper(fakeWin);
-            window.sandbox.stub(JSON, 'stringify');
+            env.sandbox.stub(JSON, 'stringify');
             formData.append('name', 'John Miller');
             formData.append('age', 56);
             const post = xhr.fetchJson.bind(xhr, '/post', {
@@ -259,13 +259,13 @@ describe
               test.win.fetch.restore();
             });
             it('should not call fetch if view is not visible ', () => {
-              const fetchCall = window.sandbox.spy(test.win, 'fetch');
+              const fetchCall = env.sandbox.spy(test.win, 'fetch');
               ampdoc.whenFirstVisible = () => Promise.reject();
               xhr.fetchJson('/get', {ampCors: false});
               expect(fetchCall.notCalled).to.be.true;
             });
             it('should call fetch if view is visible ', () => {
-              const fetchCall = window.sandbox.spy(test.win, 'fetch');
+              const fetchCall = env.sandbox.spy(test.win, 'fetch');
               ampdoc.whenFirstVisible = () => Promise.resolve();
               const fetch = xhr.fetchJson('/get', {ampCors: false});
               fetch.then(() => {
@@ -370,8 +370,8 @@ describe
           });
         });
 
-        it.skip('should do simple JSON fetch', () => {
-          window.sandbox.stub(user(), 'assert');
+        it('should do simple JSON fetch', () => {
+          env.sandbox.stub(user(), 'assert');
           return xhr
             .fetchJson(`${baseUrl}/get?k=v1`)
             .then((res) => res.json())
@@ -484,7 +484,7 @@ describe
 
         beforeEach(() => {
           xhr = xhrServiceForTesting(test.win);
-          fetchStub = window.sandbox
+          fetchStub = env.sandbox
             .stub(xhr, 'fetchAmpCors_')
             .callsFake(() => Promise.resolve(new Response(TEST_TEXT)));
         });
@@ -675,10 +675,7 @@ describe
           sendMessageAwaitResponse: getDefaultResponsePromise,
           whenFirstVisible: () => Promise.resolve(),
         };
-        sendMessageStub = window.sandbox.stub(
-          viewer,
-          'sendMessageAwaitResponse'
-        );
+        sendMessageStub = env.sandbox.stub(viewer, 'sendMessageAwaitResponse');
         sendMessageStub.returns(getDefaultResponsePromise());
         ampdocViewerStub.returns(viewer);
         interceptionEnabledWin = {
@@ -716,9 +713,8 @@ describe
       });
 
       it('should not intercept if AMP doc does not opt in', () => {
-        const nonOptedInDoc = window.document.implementation.createHTMLDocument(
-          ''
-        );
+        const nonOptedInDoc =
+          window.document.implementation.createHTMLDocument('');
         const ampdoc = {
           getRootNode: () => nonOptedInDoc,
           whenFirstVisible: () => Promise.resolve(),
@@ -737,7 +733,7 @@ describe
       });
 
       it('should not intercept if viewer is not capable', () => {
-        window.sandbox
+        env.sandbox
           .stub(viewer, 'hasCapability')
           .withArgs('xhrInterceptor')
           .returns(false);
@@ -749,7 +745,7 @@ describe
       });
 
       it('should not intercept if viewer untrusted and non-dev mode', () => {
-        window.sandbox
+        env.sandbox
           .stub(viewer, 'isTrustedViewer')
           .returns(Promise.resolve(false));
         interceptionEnabledWin.AMP_DEV_MODE = false;
@@ -778,10 +774,10 @@ describe
       });
 
       it('should intercept if viewer untrusted but in local dev mode', () => {
-        window.sandbox
+        env.sandbox
           .stub(viewer, 'isTrustedViewer')
           .returns(Promise.resolve(false));
-        window.sandbox.stub(mode, 'getMode').returns({localDev: true});
+        env.sandbox.stub(mode, 'getMode').returns({localDev: true});
 
         const xhr = xhrServiceForTesting(interceptionEnabledWin);
 
@@ -791,11 +787,11 @@ describe
       });
 
       it('should intercept if untrusted-xhr-interception experiment enabled', () => {
-        window.sandbox
+        env.sandbox
           .stub(viewer, 'isTrustedViewer')
           .returns(Promise.resolve(false));
-        window.sandbox.stub(mode, 'getMode').returns({localDev: false});
-        window.sandbox
+        env.sandbox.stub(mode, 'getMode').returns({localDev: false});
+        env.sandbox
           .stub(viewer, 'hasCapability')
           .withArgs('xhrInterceptor')
           .returns(true);
@@ -813,7 +809,7 @@ describe
       });
 
       it('should intercept if non-dev mode but viewer trusted', () => {
-        window.sandbox
+        env.sandbox
           .stub(viewer, 'isTrustedViewer')
           .returns(Promise.resolve(true));
         interceptionEnabledWin.AMP_DEV_MODE = false;
@@ -833,7 +829,7 @@ describe
           .then(() =>
             expect(sendMessageStub).to.have.been.calledWithMatch(
               'xhr',
-              window.sandbox.match.any
+              env.sandbox.match.any
             )
           );
       });
@@ -843,7 +839,7 @@ describe
 
         return xhr.fetch('https://www.some-url.org/some-resource/').then(() =>
           expect(sendMessageStub).to.have.been.calledWithMatch(
-            window.sandbox.match.any,
+            env.sandbox.match.any,
             {
               originalRequest: {
                 input:
@@ -870,7 +866,7 @@ describe
           })
           .then(() =>
             expect(sendMessageStub).to.have.been.calledWithMatch(
-              window.sandbox.match.any,
+              env.sandbox.match.any,
               {
                 originalRequest: {
                   input:
@@ -893,7 +889,7 @@ describe
         const xhr = xhrServiceForTesting(interceptionEnabledWin);
 
         const fakeWin = null;
-        window.sandbox.stub(Services, 'platformFor').returns({
+        env.sandbox.stub(Services, 'platformFor').returns({
           isIos() {
             return false;
           },
@@ -911,7 +907,7 @@ describe
           })
           .then(() =>
             expect(sendMessageStub).to.have.been.calledWithMatch(
-              window.sandbox.match.any,
+              env.sandbox.match.any,
               {
                 originalRequest: {
                   input:
diff --git a/test/unit/test-yield.js b/test/unit/test-yield.js
index 930e242c5b084..4d3207e26944c 100644
--- a/test/unit/test-yield.js
+++ b/test/unit/test-yield.js
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as lolex from 'lolex';
+import * as fakeTimers from '@sinonjs/fake-timers';
 import {macroTask} from '../../testing/yield';
 
 describes.realWin('yield', {}, (env) => {
@@ -22,8 +22,7 @@ describes.realWin('yield', {}, (env) => {
 
   beforeEach(() => {
     win = env.win;
-    clock = lolex.install({
-      target: win,
+    clock = fakeTimers.withGlobal(win).install({
       toFake: ['Date', 'setTimeout', 'clearTimeout'],
     });
   });
diff --git a/test/unit/utils/test-array.js b/test/unit/utils/test-array.js
deleted file mode 100644
index 3ab99c3712403..0000000000000
--- a/test/unit/utils/test-array.js
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {
-  areEqualOrdered,
-  findIndex,
-  fromIterator,
-  pushIfNotExist,
-  remove,
-} from '../../../src/utils/array';
-
-describe('areEqualOrdered', function () {
-  it('should return true on empty arrays', () => {
-    const result = areEqualOrdered([], []);
-    expect(result).to.be.true;
-  });
-
-  it('should return true on same array with primitive types of same seq', () => {
-    const result = areEqualOrdered(
-      [1, 'string', true, undefined, null],
-      [1, 'string', true, undefined, null]
-    );
-    expect(result).to.be.true;
-  });
-
-  it('should return true on same array with objects of same seq', () => {
-    const o1 = {a: 1};
-    const o2 = () => {
-      return 'arrow func';
-    };
-    const o3 = new Function('whatever');
-    const o4 = {};
-    const o5 = [];
-    const result = areEqualOrdered([o1, o2, o3, o4, o5], [o1, o2, o3, o4, o5]);
-    expect(result).to.be.true;
-  });
-
-  it('should return false on same array with primitive types of different seq', () => {
-    const result = areEqualOrdered(
-      [null, true, 'string', undefined, 1],
-      [1, 'string', true, undefined, null]
-    );
-    expect(result).to.be.false;
-  });
-
-  it('should return false on same array with objects of different seq', () => {
-    const o1 = {a: 1};
-    const o2 = () => {
-      return 'arrow func';
-    };
-    const o3 = new Function('whatever');
-    const o4 = {};
-    const o5 = [];
-    const result = areEqualOrdered([o4, o5, o3, o2, o1], [o1, o2, o3, o4, o5]);
-    expect(result).to.be.false;
-  });
-
-  it('should return false on array of different length', () => {
-    const result = areEqualOrdered([1, 2, 3], [1, 2, 3, 3]);
-    expect(result).to.be.false;
-  });
-});
-
-describe('remove', function () {
-  let array;
-  beforeEach(() => {
-    array = [1, 2, 3, 4, 5];
-  });
-
-  it('should remove elements that return true', () => {
-    const removed = remove(array, (i) => i > 2);
-    expect(array).to.deep.equal([1, 2]);
-    expect(removed).to.deep.equal([3, 4, 5]);
-  });
-
-  it('handles no removals', () => {
-    const removed = remove(array, () => false);
-    expect(array).to.deep.equal([1, 2, 3, 4, 5]);
-    expect(removed).to.deep.equal([]);
-  });
-
-  it('handles consecutive removals', () => {
-    const removed = remove(array, () => true);
-    expect(array).to.deep.equal([]);
-    expect(removed).to.deep.equal([1, 2, 3, 4, 5]);
-  });
-});
-
-describe('findIndex', function () {
-  it('should return the index of first matching element', () => {
-    const found = findIndex([4, 1, 5, 3, 4, 5], (element) => element > 4);
-    expect(found).to.equal(2);
-  });
-
-  it('should return -1 if no matching element', () => {
-    const found = findIndex([4, 1, 5, 3, 4, 5], (element) => element > 5);
-    expect(found).to.equal(-1);
-  });
-
-  it('should pass index as the 2nd param to the predicate function', () => {
-    const found = findIndex([0, 0, 0, 0, 0, 0], (element, i) => {
-      return i == 4;
-    });
-    expect(found).to.equal(4);
-  });
-
-  it('should pass the original array as the 3rd param to the predicate', () => {
-    findIndex([1, 2, 3], (element, i, array) => {
-      expect(array).to.deep.equal([1, 2, 3]);
-    });
-  });
-});
-
-describe('fromIterator', function () {
-  it('should return empty array for empty iterator', () => {
-    const iterator = {
-      next() {
-        return {value: undefined, done: true};
-      },
-    };
-
-    expect(fromIterator(iterator)).to.be.an('array').that.is.empty;
-  });
-
-  it('should return non-empty array for non-empty iterator', () => {
-    let index = 0;
-    const iterator = {
-      next() {
-        return index < 3
-          ? {value: index++ * 2, done: false}
-          : {value: undefined, done: true};
-      },
-    };
-
-    expect(fromIterator(iterator)).to.deep.equal([0, 2, 4]);
-  });
-});
-
-describe('pushIfNotExist', () => {
-  it('should push element', () => {
-    const array = [1, 2, 3, 4];
-    pushIfNotExist(array, 5);
-    expect(array).to.deep.equal([1, 2, 3, 4, 5]);
-    pushIfNotExist(array, 2.3);
-    expect(array).to.deep.equal([1, 2, 3, 4, 5, 2.3]);
-  });
-  it('should not push element', () => {
-    const array = [1, 2, 3, 4];
-    pushIfNotExist(array, 1);
-    expect(array).to.deep.equal([1, 2, 3, 4]);
-  });
-});
diff --git a/test/unit/utils/test-bytes.js b/test/unit/utils/test-bytes.js
deleted file mode 100644
index 82fe40e55713e..0000000000000
--- a/test/unit/utils/test-bytes.js
+++ /dev/null
@@ -1,397 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {
-  bytesToString,
-  bytesToUInt32,
-  getCryptoRandomBytesArray,
-  stringToBytes,
-  utf8Decode,
-  utf8Encode,
-} from '../../../src/utils/bytes';
-
-describe('stringToBytes', function () {
-  let fakeWin;
-
-  beforeEach(() => {
-    fakeWin = {
-      crypto: {
-        getRandomValues: (array) => {
-          for (let i = 0; i < array.length; i++) {
-            array[i] = i + 1;
-          }
-        },
-      },
-    };
-  });
-
-  it('should map a sample string appropriately', () => {
-    const bytes = stringToBytes('abÿ');
-    expect(bytes.length).to.equal(3);
-    expect(bytes[0]).to.equal(97);
-    expect(bytes[1]).to.equal(98);
-    expect(bytes[2]).to.equal(255);
-  });
-
-  it('should signal an error with a character >255', () => {
-    allowConsoleError(() => {
-      expect(() => {
-        return stringToBytes('ab☺');
-      }).to.throw();
-    });
-  });
-
-  it('should convert bytes array to string', () => {
-    const str = bytesToString(new Uint8Array([102, 111, 111]));
-    expect(str).to.equal('foo');
-  });
-
-  it('should generate random bytes array when win.crypto is availble', () => {
-    expect(getCryptoRandomBytesArray(fakeWin, 1)).to.deep.equal(
-      new Uint8Array([1])
-    );
-    expect(getCryptoRandomBytesArray(fakeWin, 2)).to.deep.equal(
-      new Uint8Array([1, 2])
-    );
-    expect(getCryptoRandomBytesArray(fakeWin, 3)).to.deep.equal(
-      new Uint8Array([1, 2, 3])
-    );
-  });
-
-  it(
-    'should return null when trying to generate random bytes array if ' +
-      'win.crypto is not availble',
-    () => {
-      fakeWin.crypto = undefined;
-      expect(getCryptoRandomBytesArray(fakeWin, 1)).to.be.null;
-    }
-  );
-});
-
-describe('utf8', function () {
-  // Examples here courtesy of StackOverflow:
-  // http://stackoverflow.com/questions/478201/how-to-test-an-application-for
-  // -correct-encoding-e-g-utf-8
-
-  const strings = [
-    'ユーザー別サイト',
-    '简体中文',
-    '크로스플랫폼으로',
-    'מדוריםמבוקשים',
-    'أفضلالبحوث',
-    'Σὲγνωρίζωἀπὸ',
-    'ДесятуюМеждународную',
-    'แผ่นดินฮั่นเสื่อมโทรมแสนสังเวช',
-  ];
-
-  const bytes = [
-    [
-      0xe3,
-      0x83,
-      0xa6,
-      0xe3,
-      0x83,
-      0xbc,
-      0xe3,
-      0x82,
-      0xb6,
-      0xe3,
-      0x83,
-      0xbc,
-      0xe5,
-      0x88,
-      0xa5,
-      0xe3,
-      0x82,
-      0xb5,
-      0xe3,
-      0x82,
-      0xa4,
-      0xe3,
-      0x83,
-      0x88,
-    ],
-    [0xe7, 0xae, 0x80, 0xe4, 0xbd, 0x93, 0xe4, 0xb8, 0xad, 0xe6, 0x96, 0x87],
-    [
-      0xed,
-      0x81,
-      0xac,
-      0xeb,
-      0xa1,
-      0x9c,
-      0xec,
-      0x8a,
-      0xa4,
-      0xed,
-      0x94,
-      0x8c,
-      0xeb,
-      0x9e,
-      0xab,
-      0xed,
-      0x8f,
-      0xbc,
-      0xec,
-      0x9c,
-      0xbc,
-      0xeb,
-      0xa1,
-      0x9c,
-    ],
-    [
-      0xd7,
-      0x9e,
-      0xd7,
-      0x93,
-      0xd7,
-      0x95,
-      0xd7,
-      0xa8,
-      0xd7,
-      0x99,
-      0xd7,
-      0x9d,
-      0xd7,
-      0x9e,
-      0xd7,
-      0x91,
-      0xd7,
-      0x95,
-      0xd7,
-      0xa7,
-      0xd7,
-      0xa9,
-      0xd7,
-      0x99,
-      0xd7,
-      0x9d,
-    ],
-    [
-      0xd8,
-      0xa3,
-      0xd9,
-      0x81,
-      0xd8,
-      0xb6,
-      0xd9,
-      0x84,
-      0xd8,
-      0xa7,
-      0xd9,
-      0x84,
-      0xd8,
-      0xa8,
-      0xd8,
-      0xad,
-      0xd9,
-      0x88,
-      0xd8,
-      0xab,
-    ],
-    [
-      0xce,
-      0xa3,
-      0xe1,
-      0xbd,
-      0xb2,
-      0xce,
-      0xb3,
-      0xce,
-      0xbd,
-      0xcf,
-      0x89,
-      0xcf,
-      0x81,
-      0xce,
-      0xaf,
-      0xce,
-      0xb6,
-      0xcf,
-      0x89,
-      0xe1,
-      0xbc,
-      0x80,
-      0xcf,
-      0x80,
-      0xe1,
-      0xbd,
-      0xb8,
-    ],
-    [
-      0xd0,
-      0x94,
-      0xd0,
-      0xb5,
-      0xd1,
-      0x81,
-      0xd1,
-      0x8f,
-      0xd1,
-      0x82,
-      0xd1,
-      0x83,
-      0xd1,
-      0x8e,
-      0xd0,
-      0x9c,
-      0xd0,
-      0xb5,
-      0xd0,
-      0xb6,
-      0xd0,
-      0xb4,
-      0xd1,
-      0x83,
-      0xd0,
-      0xbd,
-      0xd0,
-      0xb0,
-      0xd1,
-      0x80,
-      0xd0,
-      0xbe,
-      0xd0,
-      0xb4,
-      0xd0,
-      0xbd,
-      0xd1,
-      0x83,
-      0xd1,
-      0x8e,
-    ],
-    [
-      0xe0,
-      0xb9,
-      0x81,
-      0xe0,
-      0xb8,
-      0x9c,
-      0xe0,
-      0xb9,
-      0x88,
-      0xe0,
-      0xb8,
-      0x99,
-      0xe0,
-      0xb8,
-      0x94,
-      0xe0,
-      0xb8,
-      0xb4,
-      0xe0,
-      0xb8,
-      0x99,
-      0xe0,
-      0xb8,
-      0xae,
-      0xe0,
-      0xb8,
-      0xb1,
-      0xe0,
-      0xb9,
-      0x88,
-      0xe0,
-      0xb8,
-      0x99,
-      0xe0,
-      0xb9,
-      0x80,
-      0xe0,
-      0xb8,
-      0xaa,
-      0xe0,
-      0xb8,
-      0xb7,
-      0xe0,
-      0xb9,
-      0x88,
-      0xe0,
-      0xb8,
-      0xad,
-      0xe0,
-      0xb8,
-      0xa1,
-      0xe0,
-      0xb9,
-      0x82,
-      0xe0,
-      0xb8,
-      0x97,
-      0xe0,
-      0xb8,
-      0xa3,
-      0xe0,
-      0xb8,
-      0xa1,
-      0xe0,
-      0xb9,
-      0x81,
-      0xe0,
-      0xb8,
-      0xaa,
-      0xe0,
-      0xb8,
-      0x99,
-      0xe0,
-      0xb8,
-      0xaa,
-      0xe0,
-      0xb8,
-      0xb1,
-      0xe0,
-      0xb8,
-      0x87,
-      0xe0,
-      0xb9,
-      0x80,
-      0xe0,
-      0xb8,
-      0xa7,
-      0xe0,
-      0xb8,
-      0x8a,
-    ],
-  ];
-
-  it('should encode given string into utf-8 byte array', () => {
-    for (let i = 0; i < strings.length; i++) {
-      expect(utf8Encode(strings[i])).to.deep.equal(new Uint8Array(bytes[i]));
-    }
-  });
-
-  it('should decode given utf-8 bytes into string', () => {
-    for (let i = 0; i < bytes.length; i++) {
-      expect(utf8Decode(new Uint8Array(bytes[i]))).to.equal(strings[i]);
-    }
-  });
-});
-
-describe('bytesToUInt32', function () {
-  it('should convert Uint8Arrays into unsigned 32-bit integers', () => {
-    expect(bytesToUInt32(new Uint8Array([0xff, 0xff, 0xff, 0xff]))).to.equal(
-      0xffffffff
-    );
-    expect(bytesToUInt32(new Uint8Array([0xde, 0xad, 0xbe, 0xef]))).to.equal(
-      0xdeadbeef
-    );
-    expect(bytesToUInt32(new Uint8Array([0x47, 0x47, 0x47, 0x47]))).to.equal(
-      0x47474747
-    );
-    expect(bytesToUInt32(new Uint8Array([0x00, 0x00, 0x00, 0x00]))).to.equal(
-      0x00000000
-    );
-  });
-});
diff --git a/test/unit/utils/test-detached-dom-stream.js b/test/unit/utils/test-detached-dom-stream.js
deleted file mode 100644
index 8bd8021f66230..0000000000000
--- a/test/unit/utils/test-detached-dom-stream.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * Copyright 2020 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.
- */
-
-import {DetachedDomStream} from '../../../src/utils/detached-dom-stream';
-
-describes.fakeWin('DetachedDomStream', {amp: true}, (env) => {
-  let win;
-  let chunkSpy;
-  let endSpy;
-  let stream;
-
-  beforeEach(() => {
-    win = env.win;
-    chunkSpy = env.sandbox.spy();
-    endSpy = env.sandbox.spy();
-    stream = new DetachedDomStream(win, chunkSpy, endSpy);
-  });
-
-  describe('#write', () => {
-    it('calls the chunk cb on every write', () => {
-      stream.write(`
-        <head>
-          <script async src="https://cdn.ampproject.org/v0.js"></script>
-        </head>
-      `);
-
-      expect(chunkSpy).calledOnce;
-      const firstChunkDoc = chunkSpy.firstCall.firstArg;
-      const script = firstChunkDoc.querySelector('script');
-      expect(script).to.exist;
-      expect(script.src).to.equal('https://cdn.ampproject.org/v0.js');
-
-      stream.write(`
-        <body class="foo">
-          <child-one></child-one>
-        </body>
-      `);
-
-      expect(chunkSpy).calledTwice;
-      const secondChunkDoc = chunkSpy.firstCall.firstArg;
-      expect(secondChunkDoc.body).to.have.class('foo');
-      expect(firstChunkDoc.querySelector('child-one')).to.exist;
-
-      expect(endSpy).not.called;
-    });
-  });
-
-  describe('#close', () => {
-    it('calls the onEnd cb with full doc when complete', () => {
-      stream.write(`
-        <head>
-          <script async src="https://cdn.ampproject.org/v0.js"></script>
-        </head>
-      `);
-
-      expect(endSpy).not.called;
-
-      stream.write(`
-        <body class="foo">
-          <child-one></child-one>
-        </body>
-      `);
-
-      expect(endSpy).not.called;
-
-      stream.close();
-
-      expect(endSpy).calledOnce;
-      const finalDoc = endSpy.firstCall.firstArg;
-      const script = finalDoc.querySelector('script');
-      expect(script).to.exist;
-      expect(script.src).to.equal('https://cdn.ampproject.org/v0.js');
-      expect(finalDoc.body).to.have.class('foo');
-      expect(finalDoc.querySelector('child-one')).to.exist;
-    });
-
-    it('throws if write() called after close()', () => {
-      stream.close();
-      allowConsoleError(() => {
-        expect(() => stream.write('<child-one></child-one>')).to.throw(
-          'Detached doc already closed.'
-        );
-      });
-    });
-  });
-});
diff --git a/test/unit/utils/test-display-observer.js b/test/unit/utils/test-display-observer.js
new file mode 100644
index 0000000000000..934427a737607
--- /dev/null
+++ b/test/unit/utils/test-display-observer.js
@@ -0,0 +1,528 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {
+  measureDisplay,
+  observeDisplay,
+  registerContainer,
+  unobserveDisplay,
+  unregisterContainer,
+} from '../../../src/utils/display-observer';
+import {removeItem} from '../../../src/core/types/array';
+
+describes.realWin('display-observer', {amp: true}, (env) => {
+  let win, doc, ampdoc;
+  let element;
+  let docObserver, viewportObserver, containerObservers;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    ampdoc = env.ampdoc;
+    element = doc.createElement('div');
+    element.id = 'element1';
+    doc.body.appendChild(element);
+
+    class FakeIntersectionObserver {
+      constructor(callback, options) {
+        this.callback = callback;
+        this.options = options;
+        this.elements = [];
+      }
+
+      disconnect() {
+        this.elements.length = 0;
+      }
+
+      observe(element) {
+        if (this.elements.includes(element)) {
+          throw new Error('already observed');
+        }
+        this.elements.push(element);
+      }
+
+      unobserve(element) {
+        if (!this.elements.includes(element)) {
+          throw new Error(
+            'not observed: ' + element.id + ' on ' + this.options?.root?.id
+          );
+        }
+        removeItem(this.elements, element);
+      }
+
+      notify(entries) {
+        if (!entries.some(({target}) => this.elements.includes(target))) {
+          throw new Error('unobserved target');
+        }
+        const {callback} = this;
+        return Promise.resolve().then(() => {
+          callback(entries, this);
+        });
+      }
+    }
+
+    docObserver = null;
+    viewportObserver = null;
+    containerObservers = new Map();
+    env.sandbox
+      .stub(win, 'IntersectionObserver')
+      .value(function (callback, options) {
+        if (!options.root) {
+          return (viewportObserver =
+            viewportObserver ||
+            new FakeIntersectionObserver(callback, options));
+        }
+        if (options.root == doc.body) {
+          return (docObserver =
+            docObserver || new FakeIntersectionObserver(callback, options));
+        }
+        if (options.root) {
+          const containerObserver = new FakeIntersectionObserver(
+            callback,
+            options
+          );
+          containerObservers.set(options.root, containerObserver);
+          return containerObserver;
+        }
+        return new FakeIntersectionObserver(callback, options);
+      });
+  });
+
+  function createCallbackCaller() {
+    const results = [];
+    let deferred = null;
+    const caller = (value) => {
+      results.push(value);
+      if (deferred) {
+        const next = results.shift();
+        deferred.resolve(next);
+        deferred = null;
+      }
+    };
+    caller.next = () => {
+      if (results.length > 0) {
+        const next = results.shift();
+        return Promise.resolve(next);
+      }
+      deferred = new Deferred();
+      return deferred.promise;
+    };
+    caller.isEmpty = () => results.length == 0;
+    return caller;
+  }
+
+  describe('measureDisplay', () => {
+    it('should measure display via doc observer', async () => {
+      const promise = measureDisplay(element);
+      docObserver.notify([{target: element, isIntersecting: true}]);
+      const isDisplayed = await promise;
+      expect(isDisplayed).to.be.true;
+      expect(docObserver.elements).to.not.include(element);
+    });
+
+    it('should measure display via viewport observer', async () => {
+      const promise = measureDisplay(element);
+      viewportObserver.notify([{target: element, isIntersecting: true}]);
+      const isDisplayed = await promise;
+      expect(isDisplayed).to.be.true;
+      expect(viewportObserver.elements).to.not.include(element);
+    });
+
+    it('should measure display via one of observers', async () => {
+      const promise = measureDisplay(element);
+      viewportObserver.notify([{target: element, isIntersecting: false}]);
+      docObserver.notify([{target: element, isIntersecting: true}]);
+      const isDisplayed = await promise;
+      expect(isDisplayed).to.be.true;
+      expect(docObserver.elements).to.not.include(element);
+      expect(viewportObserver.elements).to.not.include(element);
+    });
+
+    it('should measure display via as false', async () => {
+      const promise = measureDisplay(element);
+      docObserver.notify([{target: element, isIntersecting: false}]);
+      viewportObserver.notify([{target: element, isIntersecting: false}]);
+      const isDisplayed = await promise;
+      expect(isDisplayed).to.be.false;
+      expect(docObserver.elements).to.not.include(element);
+      expect(viewportObserver.elements).to.not.include(element);
+    });
+  });
+
+  describe('observe', () => {
+    it('should observe changes: true -> false', async () => {
+      const callbackCaller = createCallbackCaller();
+      observeDisplay(element, callbackCaller);
+
+      // First response.
+      docObserver.notify([{target: element, isIntersecting: true}]);
+      viewportObserver.notify([{target: element, isIntersecting: false}]);
+      const display1 = await callbackCaller.next();
+      expect(display1).to.be.true;
+
+      // Change intersection.
+      docObserver.notify([{target: element, isIntersecting: false}]);
+      const display2 = await callbackCaller.next();
+      expect(display2).to.be.false;
+
+      // No change.
+      await viewportObserver.notify([{target: element, isIntersecting: false}]);
+      expect(callbackCaller.isEmpty()).to.be.true;
+    });
+
+    it('should observe changes: false -> true', async () => {
+      const callbackCaller = createCallbackCaller();
+      observeDisplay(element, callbackCaller);
+
+      // First response.
+      await docObserver.notify([{target: element, isIntersecting: false}]);
+      viewportObserver.notify([{target: element, isIntersecting: false}]);
+      const display1 = await callbackCaller.next();
+      expect(display1).to.be.false;
+
+      // Change intersection.
+      docObserver.notify([{target: element, isIntersecting: true}]);
+      const display2 = await callbackCaller.next();
+      expect(display2).to.be.true;
+
+      // No change.
+      viewportObserver.notify([{target: element, isIntersecting: true}]);
+      expect(callbackCaller.isEmpty()).to.be.true;
+    });
+
+    it('should ignore unknown intersection', async () => {
+      const callbackCaller = createCallbackCaller();
+      observeDisplay(element, callbackCaller);
+
+      // First response.
+      await docObserver.notify([{target: element, isIntersecting: false}]);
+      expect(callbackCaller.isEmpty()).to.be.true;
+
+      // Change intersection.
+      await docObserver.notify([{target: element, isIntersecting: true}]);
+      expect(callbackCaller.isEmpty()).to.be.false;
+      const display1 = await callbackCaller.next();
+      expect(display1).to.be.true;
+    });
+
+    it('should only observe last change', async () => {
+      const callbackCaller = createCallbackCaller();
+      observeDisplay(element, callbackCaller);
+
+      viewportObserver.notify([{target: element, isIntersecting: false}]);
+      docObserver.notify([
+        {target: element, isIntersecting: false},
+        {target: element, isIntersecting: true},
+      ]);
+      const display1 = await callbackCaller.next();
+      expect(display1).to.be.true;
+      expect(callbackCaller.isEmpty()).to.be.true;
+    });
+
+    it('should observe multiple callbacks', async () => {
+      // First callback.
+      const callbackCaller1 = createCallbackCaller();
+      observeDisplay(element, callbackCaller1);
+      docObserver.notify([{target: element, isIntersecting: true}]);
+      const display1 = await callbackCaller1.next();
+      expect(display1).to.be.true;
+
+      // Second callback.
+      const callbackCaller2 = createCallbackCaller();
+      observeDisplay(element, callbackCaller2);
+      const display2 = await callbackCaller2.next();
+      expect(display2).to.be.true;
+    });
+
+    it('should unobserve multiple callbacks', async () => {
+      const callbackCaller1 = createCallbackCaller();
+      const callbackCaller2 = createCallbackCaller();
+      observeDisplay(element, callbackCaller1);
+      observeDisplay(element, callbackCaller2);
+      expect(docObserver.elements).to.include(element);
+      expect(viewportObserver.elements).to.include(element);
+
+      // Unobserve first callback.
+      unobserveDisplay(element, callbackCaller2);
+      expect(docObserver.elements).to.include(element);
+      expect(viewportObserver.elements).to.include(element);
+
+      // Unobserve second callback.
+      unobserveDisplay(element, callbackCaller1);
+      expect(docObserver.elements).to.not.include(element);
+      expect(viewportObserver.elements).to.not.include(element);
+    });
+
+    it('should observe document visibility', async () => {
+      const callbackCaller = createCallbackCaller();
+      observeDisplay(element, callbackCaller);
+
+      // First response.
+      docObserver.notify([{target: element, isIntersecting: true}]);
+      viewportObserver.notify([{target: element, isIntersecting: false}]);
+      const display1 = await callbackCaller.next();
+      expect(display1).to.be.true;
+
+      // Paused visibility.
+      ampdoc.overrideVisibilityState('paused');
+      const display2 = await callbackCaller.next();
+      expect(display2).to.be.false;
+
+      // Visibile visibility.
+      ampdoc.overrideVisibilityState('visible');
+      const display3 = await callbackCaller.next();
+      expect(display3).to.be.true;
+    });
+
+    it('should treat hidden document visibility as displayed', async () => {
+      const callbackCaller = createCallbackCaller();
+      observeDisplay(element, callbackCaller);
+
+      // First response.
+      docObserver.notify([{target: element, isIntersecting: true}]);
+      viewportObserver.notify([{target: element, isIntersecting: false}]);
+      const display1 = await callbackCaller.next();
+      expect(display1).to.be.true;
+
+      // Paused visibility.
+      ampdoc.overrideVisibilityState('paused');
+      const display2 = await callbackCaller.next();
+      expect(display2).to.be.false;
+
+      // Hidden visibility.
+      ampdoc.overrideVisibilityState('hidden');
+      const display3 = await callbackCaller.next();
+      expect(display3).to.be.true;
+    });
+  });
+
+  describe('registerContainer', () => {
+    let container;
+    let topElement;
+
+    beforeEach(() => {
+      container = doc.createElement('div');
+      container.id = 'container1';
+      doc.body.appendChild(container);
+      container.appendChild(element);
+
+      topElement = doc.createElement('div');
+      topElement.id = 'topElement1';
+      doc.body.appendChild(topElement);
+    });
+
+    it('should create observer only after container display is known', async () => {
+      registerContainer(container);
+      expect(containerObservers.get(container)).to.not.exist;
+
+      await viewportObserver.notify([
+        {target: container, isIntersecting: false},
+      ]);
+      expect(containerObservers.get(container)).to.not.exist;
+
+      await viewportObserver.notify([
+        {target: container, isIntersecting: true},
+      ]);
+      expect(containerObservers.get(container)).to.exist;
+    });
+
+    it('should only observe contained elements', async () => {
+      const elementCallback = createCallbackCaller();
+      observeDisplay(element, elementCallback);
+      const topElementCallback = createCallbackCaller();
+      observeDisplay(topElement, topElementCallback);
+
+      viewportObserver.notify([{target: element, isIntersecting: false}]);
+      docObserver.notify([{target: element, isIntersecting: false}]);
+      viewportObserver.notify([{target: topElement, isIntersecting: false}]);
+      docObserver.notify([{target: topElement, isIntersecting: false}]);
+
+      const display1 = await elementCallback.next();
+      const display2 = await topElementCallback.next();
+      expect(display1).to.be.false;
+      expect(display2).to.be.false;
+
+      registerContainer(container);
+      await viewportObserver.notify([
+        {target: container, isIntersecting: true},
+      ]);
+
+      const containerObserver = containerObservers.get(container);
+      expect(containerObserver.elements).to.include(element);
+      expect(containerObserver.elements).to.not.include(topElement);
+
+      containerObserver.notify([{target: element, isIntersecting: true}]);
+      const display3 = await elementCallback.next();
+      const display4 = await topElementCallback.next();
+      expect(display3).to.be.true;
+      expect(display4).to.be.false; // no change.
+    });
+
+    it('should unregister observer', async () => {
+      const elementCallback = createCallbackCaller();
+      observeDisplay(element, elementCallback);
+
+      viewportObserver.notify([{target: element, isIntersecting: false}]);
+      docObserver.notify([{target: element, isIntersecting: false}]);
+
+      const display1 = await elementCallback.next();
+      expect(display1).to.be.false;
+
+      registerContainer(container);
+      await viewportObserver.notify([
+        {target: container, isIntersecting: true},
+      ]);
+      const containerObserver = containerObservers.get(container);
+      containerObserver.notify([{target: element, isIntersecting: true}]);
+      const display2 = await elementCallback.next();
+      expect(display2).to.be.true;
+
+      unregisterContainer(container);
+      expect(docObserver.elements).to.not.include(container);
+      expect(containerObserver.elements).to.not.include(element);
+
+      const display3 = await elementCallback.next();
+      expect(display3).to.be.false;
+    });
+
+    it('should change display when container observer is notified', async () => {
+      const elementCallback = createCallbackCaller();
+      observeDisplay(element, elementCallback);
+
+      viewportObserver.notify([{target: element, isIntersecting: false}]);
+      docObserver.notify([{target: element, isIntersecting: false}]);
+
+      const display1 = await elementCallback.next();
+      expect(display1).to.be.false;
+
+      registerContainer(container);
+      await viewportObserver.notify([
+        {target: container, isIntersecting: true},
+      ]);
+
+      const containerObserver = containerObservers.get(container);
+      containerObserver.notify([{target: element, isIntersecting: true}]);
+      const display2 = await elementCallback.next();
+      expect(display2).to.be.true;
+
+      containerObserver.notify([{target: element, isIntersecting: false}]);
+      const display3 = await elementCallback.next();
+      expect(display3).to.be.false;
+    });
+
+    it('should change display when container display has changed', async () => {
+      const elementCallback = createCallbackCaller();
+      observeDisplay(element, elementCallback);
+
+      viewportObserver.notify([{target: element, isIntersecting: false}]);
+      docObserver.notify([{target: element, isIntersecting: false}]);
+
+      const display1 = await elementCallback.next();
+      expect(display1).to.be.false;
+
+      registerContainer(container);
+      await docObserver.notify([{target: container, isIntersecting: false}]);
+      await viewportObserver.notify([
+        {target: container, isIntersecting: true},
+      ]);
+
+      const containerObserver = containerObservers.get(container);
+      containerObserver.notify([{target: element, isIntersecting: true}]);
+      const display2 = await elementCallback.next();
+      expect(display2).to.be.true;
+
+      await viewportObserver.notify([
+        {target: container, isIntersecting: false},
+      ]);
+      const display3 = await elementCallback.next();
+      expect(display3).to.be.false;
+    });
+
+    it('should compute display for nested observers', async () => {
+      const childContainer = doc.createElement('div');
+      childContainer.id = 'child-container1';
+      container.appendChild(childContainer);
+      childContainer.appendChild(element);
+
+      const elementCallback = createCallbackCaller();
+      observeDisplay(element, elementCallback);
+      await viewportObserver.notify([{target: element, isIntersecting: false}]);
+      expect(elementCallback.isEmpty()).to.be.true;
+
+      await docObserver.notify([{target: element, isIntersecting: false}]);
+      expect(await elementCallback.next()).to.be.false;
+
+      // 1. Register childContainer.
+      registerContainer(childContainer);
+      expect(containerObservers.get(childContainer)).to.not.exist;
+      expect(elementCallback.isEmpty()).to.be.true;
+
+      // 2. Make child container undisplayed.
+      await viewportObserver.notify([
+        {target: childContainer, isIntersecting: false},
+      ]);
+      await docObserver.notify([
+        {target: childContainer, isIntersecting: false},
+      ]);
+      expect(containerObservers.get(childContainer)).to.not.exist;
+      expect(await elementCallback.next()).to.be.false;
+
+      // 3. Register parent container.
+      registerContainer(container);
+      expect(containerObservers.get(container)).to.not.exist;
+      expect(elementCallback.isEmpty()).to.be.true;
+
+      // 4. Make parent container displayed, but child is still undisplayed.
+      await docObserver.notify([{target: container, isIntersecting: true}]);
+      expect(containerObservers.get(container)).to.exist;
+      expect(elementCallback.isEmpty()).to.be.true;
+
+      // 5. Intersect the child container inside the parent container.
+      await containerObservers
+        .get(container)
+        .notify([{target: childContainer, isIntersecting: true}]);
+      expect(containerObservers.get(childContainer)).to.exist;
+      expect(elementCallback.isEmpty()).to.be.true;
+
+      // 6. Intesect the element inside the child container.
+      await containerObservers
+        .get(childContainer)
+        .notify([{target: element, isIntersecting: true}]);
+      expect(await elementCallback.next()).to.be.true;
+    });
+
+    it('should not interrupt observations for the unrelated targets', async () => {
+      const elementCallback = createCallbackCaller();
+      observeDisplay(topElement, elementCallback);
+
+      // 1. Register a container, but not observations on it yet.
+      registerContainer(container);
+      expect(elementCallback.isEmpty()).to.be.true;
+
+      await viewportObserver.notify([
+        {target: topElement, isIntersecting: false},
+      ]);
+      await docObserver.notify([{target: topElement, isIntersecting: false}]);
+      expect(await elementCallback.next()).to.be.false;
+
+      // 2. Provide observations for the container.
+      await docObserver.notify([{target: container, isIntersecting: true}]);
+      expect(containerObservers.get(container)).to.exist;
+      expect(elementCallback.isEmpty()).to.be.true;
+    });
+  });
+});
diff --git a/test/unit/utils/test-dom-fingerprint.js b/test/unit/utils/test-dom-fingerprint.js
deleted file mode 100644
index df41889442510..0000000000000
--- a/test/unit/utils/test-dom-fingerprint.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {
-  DomFingerprint,
-  domFingerprintPlain,
-} from '../../../src/utils/dom-fingerprint';
-
-describes.realWin('domFingerprint', {}, (env) => {
-  let body;
-  let div1;
-  let ampAd;
-
-  beforeEach(() => {
-    const doc = env.win.document;
-    // Start with empty body.
-    body = doc.body;
-    body.textContent = '';
-    div1 = doc.createElement('div');
-    div1.id = 'id1';
-    div1.innerHTML = `<div id='id2'>
-         <table>                <!-- table:0 -->
-           <tr>                 <!-- tr:0 -->
-             <td></td>          <!-- td:0 -->
-             <td>               <!-- td:1 -->
-               <amp-ad type="adsense"></amp-ad>
-             </td>
-           </tr>
-           <tr></tr>            <!-- tr:1 -->
-         </table>
-      </div>`;
-
-    body.appendChild(div1);
-    ampAd = doc.getElementsByTagName('amp-ad')[0];
-  });
-
-  it('should map a sample DOM structure to the right string', () => {
-    expect(domFingerprintPlain(ampAd)).to.equal(
-      'amp-ad.0,td.1,tr.0,tbody.0,table.0,div/id2.0,div/id1.0,body.0,html.0'
-    );
-  });
-
-  it('should map a sample DOM structure to the right hashed value', () => {
-    expect(DomFingerprint.generate(ampAd)).to.equal('2437661740');
-  });
-});
diff --git a/test/unit/utils/test-dom-transform-stream.js b/test/unit/utils/test-dom-transform-stream.js
index baee37464d517..88fb5752a8673 100644
--- a/test/unit/utils/test-dom-transform-stream.js
+++ b/test/unit/utils/test-dom-transform-stream.js
@@ -27,11 +27,46 @@ describes.fakeWin('DomTransformStream', {amp: true}, (env) => {
   let win;
   let transformer;
   let detachedDoc;
+  let transferThrottleSpy;
 
   beforeEach(() => {
     win = env.win;
     detachedDoc = win.document.implementation.createHTMLDocument().open();
-    transformer = new DomTransformStream(win);
+    transferThrottleSpy = env.sandbox.stub().callsArgAsync(0);
+    transformer = new DomTransformStream(
+      win,
+      transferThrottleSpy // opt_transferThrottleFunc
+    );
+  });
+
+  describe('#onEnd', () => {
+    it('should only transfer after targetBody is ready', async () => {
+      const {body} = win.document;
+      detachedDoc.write(`
+        <!doctype html>
+        <html ⚡>
+        <head>
+        <script async src="https://cdn.ampproject.org/v0.js"></script>
+        </head>
+        <body>
+        <child-one></child-one>
+        <child-two></child-two>
+        </body>
+      `);
+
+      transformer.onChunk(detachedDoc);
+      transformer.onEnd();
+      await flush();
+
+      expect(transferThrottleSpy).not.to.have.been.called;
+      transformer.transferBody(body /* targetBody */);
+
+      await flush();
+
+      expect(transferThrottleSpy).to.have.been.calledOnce;
+      expect(body.querySelector('child-one')).to.exist;
+      expect(body.querySelector('child-two')).to.exist;
+    });
   });
 
   describe('#waitForHead', () => {
@@ -84,6 +119,28 @@ describes.fakeWin('DomTransformStream', {amp: true}, (env) => {
       expect(body.querySelector('child-two')).to.exist;
     });
 
+    it('should transfer <body> attributes to target body element', async () => {
+      const {body} = win.document;
+      detachedDoc.write(`
+        <!doctype html>
+          <html ⚡>
+          <head>
+            <script async src="https://cdn.ampproject.org/v0.js"></script>
+          </head>
+          <body marginwidth="0" marginheight="0" class="amp-cats" style="opacity: 1;">
+            <child-one></child-one>
+            <child-two></child-two>
+     `);
+      transformer.onChunk(detachedDoc);
+      transformer.transferBody(body /* targetBody */);
+      await flush();
+
+      expect(body.getAttribute('marginwidth')).to.equal('0');
+      expect(body.getAttribute('marginheight')).to.equal('0');
+      expect(body.getAttribute('style')).to.equal('opacity: 1;');
+      expect(body).to.have.class('amp-cats');
+    });
+
     it('should keep transferring new chunks after call', async () => {
       const {body} = win.document;
       detachedDoc.write(`
diff --git a/test/unit/utils/test-intersection-no-root.js b/test/unit/utils/test-intersection-no-root.js
new file mode 100644
index 0000000000000..93a46f9e98908
--- /dev/null
+++ b/test/unit/utils/test-intersection-no-root.js
@@ -0,0 +1,126 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {measureIntersectionNoRoot} from '../../../src/utils/intersection-no-root';
+
+describes.fakeWin('utils/intersection', {}, (env) => {
+  function getInObConstructorStub() {
+    const ctor = (cb) => {
+      if (ctor.callback) {
+        throw new Error('Only a single InOb instance allowed per Window.');
+      }
+      const observedEls = new Set();
+      ctor.callback = (entries) => {
+        if (entries.some((x) => !observedEls.has(x.target))) {
+          throw new Error(
+            'Attempted to fire intersection for unobserved element.'
+          );
+        }
+        cb(entries);
+      };
+      return {
+        observe: (e) => observedEls.add(e),
+        unobserve: (e) => observedEls.delete(e),
+        disconnect: () => observedEls.clear(),
+      };
+    };
+    return ctor;
+  }
+
+  function fireIntersections(entries) {
+    if (entries.length == 0) {
+      return;
+    }
+    const win = entries[0].target.ownerDocument.defaultView;
+    win.IntersectionObserver.callback(entries);
+  }
+
+  let el;
+  beforeEach(() => {
+    env.win.IntersectionObserver = getInObConstructorStub();
+    el = env.win.document.createElement('p');
+    env.win.document.body.appendChild(el);
+  });
+
+  it('should measure intersection for an element', async () => {
+    const intersection = measureIntersectionNoRoot(el);
+    fireIntersections([{x: 100, target: el}]);
+    expect(await intersection).eql({x: 100, target: el});
+  });
+
+  it('should dedupe multiple measures', async () => {
+    const measure1 = measureIntersectionNoRoot(el);
+    const measure2 = measureIntersectionNoRoot(el);
+    expect(measure1).equal(measure2);
+  });
+
+  it('should not dedupe multiple measures with entries in between', async () => {
+    const measure1 = measureIntersectionNoRoot(el);
+    fireIntersections([{x: 100, target: el}]);
+    const measure2 = measureIntersectionNoRoot(el);
+
+    expect(measure1).not.equal(measure2);
+  });
+
+  it('should only use the latest entry', async () => {
+    const intersection = measureIntersectionNoRoot(el);
+    const firstEntry = {x: 0, target: el};
+    const secondEntry = {x: 100, target: el};
+
+    fireIntersections([firstEntry, secondEntry]);
+    expect(await intersection).equal(secondEntry);
+  });
+
+  it('should measure multiple elements', async () => {
+    const el2 = env.win.document.createElement('p');
+    env.win.document.body.appendChild(el2);
+
+    const intersection1 = measureIntersectionNoRoot(el);
+    const intersection2 = measureIntersectionNoRoot(el2);
+
+    const firstEntry = {x: 0, target: el};
+    const secondEntry = {x: 2, target: el2};
+
+    fireIntersections([secondEntry]);
+    fireIntersections([firstEntry]);
+
+    expect(await intersection1).equal(firstEntry);
+    expect(await intersection2).equal(secondEntry);
+  });
+
+  it('should support measuring elements from multiple windows', async () => {
+    const el1 = {
+      ownerDocument: {
+        defaultView: {IntersectionObserver: getInObConstructorStub()},
+      },
+    };
+    const el2 = {
+      ownerDocument: {
+        defaultView: {IntersectionObserver: getInObConstructorStub()},
+      },
+    };
+
+    const intersection1 = measureIntersectionNoRoot(el1);
+    const intersection2 = measureIntersectionNoRoot(el2);
+    const firstEntry = {target: el1};
+    const secondEntry = {target: el2};
+    fireIntersections([firstEntry]);
+    fireIntersections([secondEntry]);
+
+    expect(await intersection1).equal(firstEntry);
+    expect(await intersection2).equal(secondEntry);
+  });
+});
diff --git a/test/unit/utils/test-intersection.js b/test/unit/utils/test-intersection.js
new file mode 100644
index 0000000000000..bb5db1a568c71
--- /dev/null
+++ b/test/unit/utils/test-intersection.js
@@ -0,0 +1,168 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {
+  intersectionEntryToJson,
+  measureIntersection,
+} from '../../../src/utils/intersection';
+
+describes.fakeWin('utils/intersection', {}, (env) => {
+  function getInObConstructorStub() {
+    const ctor = (cb) => {
+      if (ctor.callback) {
+        throw new Error('Only a single InOb instance allowed per Window.');
+      }
+      const observedEls = new Set();
+      ctor.callback = (entries) => {
+        if (entries.some((x) => !observedEls.has(x.target))) {
+          throw new Error(
+            'Attempted to fire intersection for unobserved element.'
+          );
+        }
+        cb(entries);
+      };
+      return {
+        observe: (e) => observedEls.add(e),
+        unobserve: (e) => observedEls.delete(e),
+        disconnect: () => observedEls.clear(),
+      };
+    };
+    return ctor;
+  }
+
+  function fireIntersections(entries) {
+    if (entries.length == 0) {
+      return;
+    }
+    const win = entries[0].target.ownerDocument.defaultView;
+    win.IntersectionObserver.callback(entries);
+  }
+
+  let el;
+  beforeEach(() => {
+    env.win.IntersectionObserver = getInObConstructorStub();
+    el = env.win.document.createElement('p');
+    env.win.document.body.appendChild(el);
+  });
+
+  it('should measure intersection for an element', async () => {
+    const intersection = measureIntersection(el);
+    fireIntersections([{x: 100, target: el}]);
+    expect(await intersection).eql({x: 100, target: el});
+  });
+
+  it('should dedupe multiple measures', async () => {
+    const measure1 = measureIntersection(el);
+    const measure2 = measureIntersection(el);
+    expect(measure1).equal(measure2);
+  });
+
+  it('should not dedupe multiple measures with entries in between', async () => {
+    const measure1 = measureIntersection(el);
+    fireIntersections([{x: 100, target: el}]);
+    const measure2 = measureIntersection(el);
+
+    expect(measure1).not.equal(measure2);
+  });
+
+  it('should only use the latest entry', async () => {
+    const intersection = measureIntersection(el);
+    const firstEntry = {x: 0, target: el};
+    const secondEntry = {x: 100, target: el};
+
+    fireIntersections([firstEntry, secondEntry]);
+    expect(await intersection).equal(secondEntry);
+  });
+
+  it('should measure multiple elements', async () => {
+    const el2 = env.win.document.createElement('p');
+    env.win.document.body.appendChild(el2);
+
+    const intersection1 = measureIntersection(el);
+    const intersection2 = measureIntersection(el2);
+
+    const firstEntry = {x: 0, target: el};
+    const secondEntry = {x: 2, target: el2};
+
+    fireIntersections([secondEntry]);
+    fireIntersections([firstEntry]);
+
+    expect(await intersection1).equal(firstEntry);
+    expect(await intersection2).equal(secondEntry);
+  });
+
+  it('should support measuring elements from multiple windows', async () => {
+    const el1 = {
+      ownerDocument: {
+        defaultView: {IntersectionObserver: getInObConstructorStub()},
+      },
+    };
+    const el2 = {
+      ownerDocument: {
+        defaultView: {IntersectionObserver: getInObConstructorStub()},
+      },
+    };
+
+    const intersection1 = measureIntersection(el1);
+    const intersection2 = measureIntersection(el2);
+    const firstEntry = {target: el1};
+    const secondEntry = {target: el2};
+    fireIntersections([firstEntry]);
+    fireIntersections([secondEntry]);
+
+    expect(await intersection1).equal(firstEntry);
+    expect(await intersection2).equal(secondEntry);
+  });
+
+  describe('intersectionEntryToJson', () => {
+    const zeros = {
+      left: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      top: 0,
+      bottom: 0,
+      x: 0,
+      y: 0,
+    };
+
+    it('clones an IntersectionObserverEntry', () => {
+      const entry = {
+        time: 0,
+        intersectionRatio: 0,
+        rootBounds: zeros,
+        intersectionRect: zeros,
+        boundingClientRect: zeros,
+      };
+      const json = intersectionEntryToJson(entry);
+      expect(entry).eql(json);
+      expect(entry).not.equal(json);
+    });
+
+    it('clones with null rootBounds', () => {
+      const entry = {
+        time: 0,
+        intersectionRatio: 0,
+        rootBounds: null,
+        intersectionRect: zeros,
+        boundingClientRect: zeros,
+      };
+      const json = intersectionEntryToJson(entry);
+      expect(entry).eql(json);
+      expect(entry).not.equal(json);
+    });
+  });
+});
diff --git a/test/unit/utils/test-media-query-props.js b/test/unit/utils/test-media-query-props.js
new file mode 100644
index 0000000000000..143c2b867ba92
--- /dev/null
+++ b/test/unit/utils/test-media-query-props.js
@@ -0,0 +1,262 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {MediaQueryProps} from '../../../src/utils/media-query-props';
+import {waitFor} from '../../../testing/test-helper';
+
+describes.realWin('MediaQueryProps', {frameStyle: {width: '300px'}}, (env) => {
+  let win;
+  let resolver;
+  let callback;
+
+  beforeEach(() => {
+    win = env.win;
+    callback = env.sandbox.spy();
+    resolver = new MediaQueryProps(win, callback);
+    expect(env.win.innerWidth).to.equal(300);
+  });
+
+  describe('resolveListQuery', () => {
+    it('should fail before resolutions start', () => {
+      expect(() => resolver.resolveListQuery('one')).to.throw();
+    });
+
+    it('should resolve an empty string', () => {
+      resolver.start();
+      expect(resolver.resolveListQuery('')).to.equal('');
+      expect(resolver.resolveListQuery(' ')).to.equal('');
+    });
+
+    it('should resolve a simple value', () => {
+      resolver.start();
+      expect(resolver.resolveListQuery('a')).to.equal('a');
+      expect(resolver.resolveListQuery('A')).to.equal('A');
+      expect(resolver.resolveListQuery('on')).to.equal('on');
+      expect(resolver.resolveListQuery('1')).to.equal('1');
+      expect(resolver.resolveListQuery('12')).to.equal('12');
+      expect(resolver.resolveListQuery('1.2')).to.equal('1.2');
+      expect(resolver.resolveListQuery('.12')).to.equal('.12');
+    });
+
+    it('should resolve a media expression', () => {
+      resolver.start();
+      expect(resolver.resolveListQuery('(min-width: 301px) a, b')).to.equal(
+        'b'
+      );
+      expect(resolver.resolveListQuery('(min-width: 299px) a, b')).to.equal(
+        'a'
+      );
+    });
+
+    it('should allow % expressions', () => {
+      resolver.start();
+      expect(resolver.resolveListQuery('1%')).to.equal('1%');
+      expect(resolver.resolveListQuery('(min-width: 301px) 1%, 2%')).to.equal(
+        '2%'
+      );
+    });
+
+    it('should allow unit expressions', () => {
+      resolver.start();
+      expect(resolver.resolveListQuery('1.1px')).to.equal('1.1px');
+      expect(
+        resolver.resolveListQuery('(min-width: 301px) 1.1px, 2.2px')
+      ).to.equal('2.2px');
+      expect(
+        resolver.resolveListQuery('(min-width: 299px) 1.1px, 2.2px')
+      ).to.equal('1.1px');
+    });
+
+    it('should allow calc() expressions', () => {
+      resolver.start();
+      expect(resolver.resolveListQuery('calc(25px * 10)')).to.equal(
+        'calc(25px * 10)'
+      );
+      expect(
+        resolver.resolveListQuery(
+          '(min-width: 301px) calc(25px * 10), calc(25px * 20)'
+        )
+      ).to.equal('calc(25px * 20)');
+      expect(
+        resolver.resolveListQuery(
+          '(min-width: 299px) calc(25px * 10), calc(25px * 20)'
+        )
+      ).to.equal('calc(25px * 10)');
+    });
+
+    it('should allow complex media expressions', () => {
+      resolver.start();
+      expect(
+        resolver.resolveListQuery(
+          '(min-width: 299px) and (max-width: 300px) a, b'
+        )
+      ).to.equal('a');
+    });
+
+    it('should resolve a first matching expression', () => {
+      resolver.start();
+      expect(
+        resolver.resolveListQuery(
+          '(min-width: 301px) a, (min-width: 299px) b, (min-width: 200px) c, d'
+        )
+      ).to.equal('b');
+    });
+
+    it('should notify when the query has changed', () => {
+      resolver.start();
+      const expr = '(min-width: 301px) a, b';
+      expect(resolver.resolveListQuery(expr)).to.equal('b');
+      resolver.complete();
+      env.iframe.style.width = '310px';
+      waitFor(() => callback.callCount > 0, 'callback is called');
+      expect(env.win.innerWidth).to.equal(310);
+      resolver.start();
+      expect(resolver.resolveListQuery(expr)).to.equal('a');
+    });
+
+    it('should unlisten the old queries', () => {
+      const query1 = {matches: true, onchange: null};
+      const query2 = {matches: true, onchange: null};
+      const stub = env.sandbox.stub(win, 'matchMedia').callsFake((q) => {
+        switch (q) {
+          case '(q1)':
+            return query1;
+          case '(q2)':
+            return query2;
+        }
+      });
+
+      // First pass.
+      resolver.start();
+      resolver.resolveListQuery('(q1) a, b');
+      resolver.resolveListQuery('(q2) a, b');
+      resolver.complete();
+      expect(query1.onchange).to.equal(callback);
+      expect(query2.onchange).to.equal(callback);
+
+      // Second pass.
+      resolver.start();
+      resolver.resolveListQuery('(q2) a, b');
+      resolver.complete();
+      expect(query1.onchange).to.be.null;
+      expect(query2.onchange).to.equal(callback);
+
+      // Called only twice. Second pass are used from cache.
+      expect(stub).to.be.calledTwice;
+
+      // Unlisten all.
+      resolver.dispose();
+      expect(query1.onchange).to.be.null;
+      expect(query2.onchange).to.be.null;
+    });
+
+    it('should unlisten the old queries with old API', () => {
+      const query1 = {
+        matches: true,
+        onchange_: null,
+        addListener(cb) {
+          this.onchange_ = cb;
+        },
+        removeListener(cb) {
+          if (this.onchange_ === cb) {
+            this.onchange_ = null;
+          }
+        },
+      };
+      const query2 = {
+        matches: true,
+        onchange_: null,
+        addListener(cb) {
+          this.onchange_ = cb;
+        },
+        removeListener(cb) {
+          if (this.onchange_ === cb) {
+            this.onchange_ = null;
+          }
+        },
+      };
+      const stub = env.sandbox.stub(win, 'matchMedia').callsFake((q) => {
+        switch (q) {
+          case '(q1)':
+            return query1;
+          case '(q2)':
+            return query2;
+        }
+      });
+
+      // First pass.
+      resolver.start();
+      resolver.resolveListQuery('(q1) a, b');
+      resolver.resolveListQuery('(q2) a, b');
+      resolver.complete();
+      expect(query1.onchange_).to.equal(callback);
+      expect(query2.onchange_).to.equal(callback);
+
+      // Second pass.
+      resolver.start();
+      resolver.resolveListQuery('(q2) a, b');
+      resolver.complete();
+      expect(query1.onchange_).to.be.null;
+      expect(query2.onchange_).to.equal(callback);
+
+      // Called only twice. Second pass are used from cache.
+      expect(stub).to.be.calledTwice;
+
+      // Unlisten all.
+      resolver.dispose();
+      expect(query1.onchange_).to.be.null;
+      expect(query2.onchange_).to.be.null;
+    });
+  });
+
+  describe('resolveMatchQuery', () => {
+    it('should fail before resolutions start', () => {
+      expect(() => resolver.resolveMatchQuery('one')).to.throw();
+    });
+
+    it('should resolve an empty string', () => {
+      resolver.start();
+      expect(resolver.resolveMatchQuery('')).to.be.true;
+      expect(resolver.resolveMatchQuery(' ')).to.be.true;
+    });
+
+    it('should resolve a simple media query', () => {
+      resolver.start();
+      expect(resolver.resolveMatchQuery('(min-width: 299px)')).to.be.true;
+      expect(resolver.resolveMatchQuery('(min-width: 301px)')).to.be.false;
+    });
+
+    it('should resolve an AND media query', () => {
+      resolver.start();
+      expect(
+        resolver.resolveMatchQuery('(min-width: 299px) AND (max-width: 301px)')
+      ).to.be.true;
+      expect(
+        resolver.resolveMatchQuery('(min-width: 299px) AND (max-width: 299px)')
+      ).to.be.false;
+    });
+
+    it('should resolve an OR media query', () => {
+      resolver.start();
+      expect(
+        resolver.resolveMatchQuery('(min-width: 299px), (max-width: 301px)')
+      ).to.be.true;
+      expect(
+        resolver.resolveMatchQuery('(min-width: 299px), (max-width: 299px)')
+      ).to.be.true;
+    });
+  });
+});
diff --git a/test/unit/utils/test-pause-helper.js b/test/unit/utils/test-pause-helper.js
new file mode 100644
index 0000000000000..f9eb3ecd00973
--- /dev/null
+++ b/test/unit/utils/test-pause-helper.js
@@ -0,0 +1,84 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {PauseHelper} from '../../../src/utils/pause-helper';
+import {installResizeObserverStub} from '../../../testing/resize-observer-stub';
+
+describes.realWin('PauseHelper', {}, (env) => {
+  let win, doc;
+  let resizeObserverStub;
+  let element;
+  let helper;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    resizeObserverStub = installResizeObserverStub(env.sandbox, win);
+
+    element = doc.createElement('amp-test');
+    element.pause = () => {};
+    env.sandbox.stub(element, 'pause');
+
+    helper = new PauseHelper(element);
+  });
+
+  it('should start observing', () => {
+    expect(resizeObserverStub.isObserved(element)).to.be.false;
+    helper.updatePlaying(true);
+    expect(resizeObserverStub.isObserved(element)).to.be.true;
+
+    resizeObserverStub.notifySync({
+      target: element,
+      borderBoxSize: [{inlineSize: 101, blockSize: 102}],
+    });
+    expect(element.pause).to.not.be.called;
+  });
+
+  it('should pause only after the element receives a non-zero size', () => {
+    expect(resizeObserverStub.isObserved(element)).to.be.false;
+    helper.updatePlaying(true);
+    expect(resizeObserverStub.isObserved(element)).to.be.true;
+
+    // No size, but didn't have size before.
+    resizeObserverStub.notifySync({
+      target: element,
+      borderBoxSize: [{inlineSize: 0, blockSize: 0}],
+    });
+    expect(element.pause).to.not.be.called;
+
+    // Has size.
+    resizeObserverStub.notifySync({
+      target: element,
+      borderBoxSize: [{inlineSize: 1, blockSize: 2}],
+    });
+    expect(element.pause).to.not.be.called;
+
+    // No size, and had size before.
+    resizeObserverStub.notifySync({
+      target: element,
+      borderBoxSize: [{inlineSize: 0, blockSize: 0}],
+    });
+    expect(element.pause).to.be.calledOnce;
+  });
+
+  it('should unobserve', () => {
+    helper.updatePlaying(true);
+    expect(resizeObserverStub.isObserved(element)).to.be.true;
+
+    helper.updatePlaying(false);
+    expect(resizeObserverStub.isObserved(element)).to.be.false;
+  });
+});
diff --git a/test/unit/utils/test-pem.js b/test/unit/utils/test-pem.js
deleted file mode 100644
index 0aee1374d1d4d..0000000000000
--- a/test/unit/utils/test-pem.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {pemToBytes} from '../../../src/utils/pem';
-
-// TODO(amphtml, #25621): Cannot find atob / btoa on Safari on Sauce Labs.
-describe
-  .configure()
-  .skipSafari()
-  .run('pemToBytes', () => {
-    const PLAIN_TEXT =
-      'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDdlatRjRjogo3WojgGHFHYLugd' +
-      'UWAY9iR3fy4arWNA1KoS8kVw33cJibXr8bvwUAUparCwlvdbH6dvEOfou0/gCFQs' +
-      'HUfQrSDv+MuSUMAe8jzKE4qW+jK+xQU9a03GUnKHkkle+Q0pX/g6jXZ7r1/xAK5D' +
-      'o2kQ+X5xK9cipRgEKwIDAQAB';
-    const PEM =
-      '-----BEGIN PUBLIC KEY-----\n' +
-      'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDdlatRjRjogo3WojgGHFHYLugd\n' +
-      'UWAY9iR3fy4arWNA1KoS8kVw33cJibXr8bvwUAUparCwlvdbH6dvEOfou0/gCFQs\n' +
-      'HUfQrSDv+MuSUMAe8jzKE4qW+jK+xQU9a03GUnKHkkle+Q0pX/g6jXZ7r1/xAK5D\n' +
-      'o2kQ+X5xK9cipRgEKwIDAQAB\n' +
-      '-----END PUBLIC KEY-----';
-
-    it('should convert a valid key', () => {
-      const binary = pemToBytes(PEM);
-      const plain = atob(PLAIN_TEXT);
-      const len = plain.length;
-      expect(binary.byteLength).to.equal(len);
-      expect(binary[0]).to.equal(plain.charCodeAt(0));
-      expect(binary[1]).to.equal(plain.charCodeAt(1));
-      expect(binary[len - 1]).to.equal(plain.charCodeAt(len - 1));
-      expect(binary[len - 2]).to.equal(plain.charCodeAt(len - 2));
-    });
-
-    it('should convert without headers, footers, line breaks', () => {
-      const binary = pemToBytes(PLAIN_TEXT);
-      const plain = atob(PLAIN_TEXT);
-      const len = plain.length;
-      expect(binary.byteLength).to.equal(len);
-      expect(binary[0]).to.equal(plain.charCodeAt(0));
-      expect(binary[1]).to.equal(plain.charCodeAt(1));
-      expect(binary[len - 1]).to.equal(plain.charCodeAt(len - 1));
-      expect(binary[len - 2]).to.equal(plain.charCodeAt(len - 2));
-    });
-
-    it('should convert without line breaks', () => {
-      const binary = pemToBytes(
-        '-----BEGIN PUBLIC KEY-----' + PLAIN_TEXT + '-----END PUBLIC KEY-----'
-      );
-      const plain = atob(PLAIN_TEXT);
-      const len = plain.length;
-      expect(binary.byteLength).to.equal(len);
-      expect(binary[0]).to.equal(plain.charCodeAt(0));
-      expect(binary[1]).to.equal(plain.charCodeAt(1));
-      expect(binary[len - 1]).to.equal(plain.charCodeAt(len - 1));
-      expect(binary[len - 2]).to.equal(plain.charCodeAt(len - 2));
-    });
-
-    it('should convert without header', () => {
-      const binary = pemToBytes(PLAIN_TEXT + '-----END PUBLIC KEY-----');
-      const plain = atob(PLAIN_TEXT);
-      const len = plain.length;
-      expect(binary.byteLength).to.equal(len);
-      expect(binary[0]).to.equal(plain.charCodeAt(0));
-      expect(binary[1]).to.equal(plain.charCodeAt(1));
-      expect(binary[len - 1]).to.equal(plain.charCodeAt(len - 1));
-      expect(binary[len - 2]).to.equal(plain.charCodeAt(len - 2));
-    });
-
-    it('should convert without footer', () => {
-      const binary = pemToBytes('-----BEGIN PUBLIC KEY-----' + PLAIN_TEXT);
-      const plain = atob(PLAIN_TEXT);
-      const len = plain.length;
-      expect(binary.byteLength).to.equal(len);
-      expect(binary[0]).to.equal(plain.charCodeAt(0));
-      expect(binary[1]).to.equal(plain.charCodeAt(1));
-      expect(binary[len - 1]).to.equal(plain.charCodeAt(len - 1));
-      expect(binary[len - 2]).to.equal(plain.charCodeAt(len - 2));
-    });
-  });
diff --git a/test/unit/utils/test-rate-limit.js b/test/unit/utils/test-rate-limit.js
deleted file mode 100644
index 3d26ab8ee49f6..0000000000000
--- a/test/unit/utils/test-rate-limit.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * Copyright 2016 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.
- */
-
-import {debounce, throttle} from '../../../src/utils/rate-limit';
-
-describe('function utils', () => {
-  describe('throttle', () => {
-    let clock;
-
-    beforeEach(() => {
-      clock = window.sandbox.useFakeTimers();
-    });
-
-    it('should work', () => {
-      const callback = window.sandbox.spy();
-      const throttledCallback = throttle(window, callback, 100);
-
-      throttledCallback(1);
-      expect(callback).to.be.calledWith(1); // let 1st call through immediately
-      callback.resetHistory();
-
-      clock.tick(20);
-      throttledCallback(2);
-      clock.tick(20);
-      throttledCallback(3);
-      clock.tick(20);
-      throttledCallback(4);
-      clock.tick(20);
-      throttledCallback(5);
-      clock.tick(19);
-      expect(callback).not.to.be.called; // not 100ms yet
-
-      clock.tick(1);
-      expect(callback).to.be.calledOnce;
-      expect(callback).to.be.calledWith(5);
-      callback.resetHistory();
-
-      clock.tick(10);
-      throttledCallback(6);
-      expect(callback).not.to.be.called;
-      clock.tick(89);
-      throttledCallback(7, 'another param');
-      expect(callback).not.to.be.called;
-      clock.tick(1);
-      expect(callback).to.be.calledOnce;
-      expect(callback).to.be.calledWith(7, 'another param');
-    });
-
-    it('should throttle recursive callback', () => {
-      let totalCalls = 0;
-      function recursive(countdown) {
-        totalCalls++;
-        if (countdown > 0) {
-          throttledCallback(countdown - 1);
-        }
-      }
-      const throttledCallback = throttle(window, recursive, 100);
-
-      // recursive 3 times
-      throttledCallback(3);
-      // should immediately invoke callback only once.
-      expect(totalCalls).to.equal(1);
-      // 2nd invocation happen after the min interval
-      clock.tick(100);
-      expect(totalCalls).to.equal(2);
-      // 3rd invocation
-      clock.tick(100);
-      expect(totalCalls).to.equal(3);
-    });
-  });
-
-  describe('debounce', () => {
-    let clock;
-
-    beforeEach(() => {
-      clock = window.sandbox.useFakeTimers();
-    });
-
-    it('should wait before calling', () => {
-      const callback = window.sandbox.spy();
-      const debounced = debounce(window, callback, 100);
-
-      debounced(1);
-      expect(callback).to.not.have.been.called;
-      clock.tick(100);
-      expect(callback).to.have.been.calledWith(1);
-
-      callback.resetHistory();
-      debounced(1);
-      expect(callback).to.not.have.been.called;
-      debounced(2);
-      expect(callback).to.not.have.been.called;
-      clock.tick(10);
-      debounced(3);
-      expect(callback).to.not.have.been.called;
-      clock.tick(99);
-      expect(callback).to.not.have.been.called;
-      clock.tick(1);
-      expect(callback).to.have.been.calledWith(3);
-    });
-
-    it('should debounce recursive callback', () => {
-      let totalCalls = 0;
-      function recursive(countdown) {
-        totalCalls++;
-        if (countdown > 0) {
-          debounced(countdown - 1);
-        }
-      }
-      const debounced = debounce(window, recursive, 100);
-
-      // recursive 3 times
-      debounced(2);
-      expect(totalCalls).to.equal(0);
-      // 1st invocation happen after the min interval
-      clock.tick(100);
-      expect(totalCalls).to.equal(1);
-      // 2nd invocation
-      clock.tick(100);
-      expect(totalCalls).to.equal(2);
-    });
-  });
-});
diff --git a/test/unit/utils/test-resource-container-helper.js b/test/unit/utils/test-resource-container-helper.js
new file mode 100644
index 0000000000000..dc479e766d21b
--- /dev/null
+++ b/test/unit/utils/test-resource-container-helper.js
@@ -0,0 +1,212 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {
+  forAllWithin,
+  loadAll,
+  pauseAll,
+  unmountAll,
+} from '../../../src/utils/resource-container-helper';
+
+const INCLUDE_SELF = true;
+const DEEP = true;
+
+describes.realWin('resource-container-helper', {}, (env) => {
+  let win, doc;
+  let tree;
+  let ampGrandparent, ampGrandparentSibling;
+  let ampParent, ampParentSibling;
+  let ampChild1, ampChild2;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+
+    tree = doc.createElement('div');
+    doc.body.appendChild(tree);
+
+    ampGrandparent = createAmpElement({id: 'grandparent', parent: tree});
+    ampGrandparentSibling = createAmpElement({
+      id: 'grandparent-sibling',
+      parent: tree,
+    });
+    ampParent = createAmpElement({id: 'parent', parent: ampGrandparent});
+    ampParentSibling = createAmpElement({
+      id: 'parent-sibling',
+      parent: ampGrandparent,
+    });
+    ampChild1 = createAmpElement({id: 'child1', parent: ampParent});
+    ampChild2 = createAmpElement({id: 'child2', parent: ampParent});
+  });
+
+  function createAmpElement({createPlaceholder = true, id, parent}) {
+    const element = doc.createElement('div');
+    element.id = id;
+    element.classList.add('i-amphtml-element');
+
+    if (createPlaceholder) {
+      const placeholder = doc.createElement('div');
+      placeholder.setAttribute('placeholder', '');
+      element.appendChild(placeholder);
+      const placeholderAmpChild = createAmpElement({
+        id: `placeholder-${id}`,
+        parent: placeholder,
+        createPlaceholder: false,
+      });
+      element.getPlaceholder = () => placeholder;
+      element.placeholderAmpChild = placeholderAmpChild;
+      element.placeholderAmpGrandchild = createAmpElement({
+        id: `placeholder-child-${id}`,
+        parent: placeholderAmpChild,
+        createPlaceholder: false,
+      });
+    } else {
+      element.getPlaceholder = () => null;
+    }
+
+    element.ensureLoaded = env.sandbox.stub();
+    element.pause = env.sandbox.stub();
+    element.unmount = env.sandbox.stub();
+
+    parent.appendChild(element);
+    return element;
+  }
+
+  describe('forAllWithin', () => {
+    let callback;
+
+    beforeEach(() => {
+      callback = env.sandbox.stub();
+    });
+
+    it('should include self in shallow mode and include placeholder', () => {
+      forAllWithin(ampGrandparent, INCLUDE_SELF, !DEEP, callback);
+      expect(callback)
+        .to.be.calledTwice.calledWith(ampGrandparent)
+        .calledWith(ampGrandparent.placeholderAmpChild);
+      // Shouldn't be called for a placeholder grandchild.
+      expect(callback).to.not.be.calledWith(
+        ampGrandparent.placeholderAmpGrandchild
+      );
+    });
+
+    it('should only include the nearest first element in includeSelf/shallow mode', () => {
+      forAllWithin(tree, INCLUDE_SELF, !DEEP, callback);
+      expect(callback)
+        .to.be.calledTwice.calledWith(ampGrandparent)
+        .calledWith(ampGrandparentSibling);
+    });
+
+    it('should only include shallow elements in shallow mode not including self', () => {
+      forAllWithin(ampGrandparent, !INCLUDE_SELF, !DEEP, callback);
+      expect(callback)
+        .to.be.calledThrice.calledWith(ampParent)
+        .calledWith(ampParentSibling)
+        .calledWith(ampGrandparent.placeholderAmpChild);
+    });
+
+    it('should include self in deep mode', () => {
+      forAllWithin(ampParent, INCLUDE_SELF, DEEP, callback);
+      expect(callback).to.not.be.calledWith(ampGrandparent);
+      expect(callback).to.be.calledWith(ampParent);
+      expect(callback).to.be.calledWith(ampChild1);
+      expect(callback).to.be.calledWith(ampChild2);
+
+      // And placeholders.
+      expect(callback).to.be.calledWith(ampParent.placeholderAmpChild);
+    });
+
+    it('should include all children in deep/non-includeSelf mode', () => {
+      forAllWithin(ampParent, !INCLUDE_SELF, DEEP, callback);
+      expect(callback).to.not.be.calledWith(ampParent);
+      expect(callback).to.be.calledWith(ampChild1);
+      expect(callback).to.be.calledWith(ampChild2);
+
+      // And placeholders.
+      expect(callback).to.be.calledWith(ampParent.placeholderAmpChild);
+    });
+
+    it('should support array for container', () => {
+      forAllWithin([ampChild1, ampChild2], INCLUDE_SELF, DEEP, callback);
+      expect(callback).to.be.calledWith(ampChild1);
+      expect(callback).to.be.calledWith(ampChild2);
+    });
+  });
+
+  describe('specific callbacks', () => {
+    it('should call loadAll with shallow mode and includeSelf', () => {
+      loadAll(ampGrandparent, INCLUDE_SELF);
+      expect(ampGrandparent.ensureLoaded).to.be.calledOnce;
+      expect(ampGrandparent.placeholderAmpChild.ensureLoaded).to.be.calledOnce;
+      expect(ampParent.ensureLoaded).to.not.be.called;
+      expect(ampParentSibling.ensureLoaded).to.not.be.called;
+      expect(ampGrandparentSibling.ensureLoaded).to.not.be.called;
+    });
+
+    it('should call loadAll with shallow mode and not includeSelf', () => {
+      loadAll(ampGrandparent, !INCLUDE_SELF);
+      expect(ampGrandparent.ensureLoaded).to.not.be.called;
+      expect(ampGrandparent.placeholderAmpChild.ensureLoaded).to.be.calledOnce;
+      expect(ampParent.ensureLoaded).to.be.calledOnce;
+      expect(ampParentSibling.ensureLoaded).to.be.calledOnce;
+      expect(ampGrandparentSibling.ensureLoaded).to.not.be.called;
+    });
+
+    it('should call pauseAll with deep mode and includeSelf', () => {
+      pauseAll(ampGrandparent, INCLUDE_SELF);
+      expect(ampGrandparent.pause).to.be.calledOnce;
+      expect(ampGrandparent.placeholderAmpChild.pause).to.be.calledOnce;
+      expect(ampParent.pause).to.be.calledOnce;
+      expect(ampParentSibling.pause).to.be.calledOnce;
+      expect(ampChild1.pause).to.be.calledOnce;
+      expect(ampChild2.pause).to.be.calledOnce;
+      expect(ampGrandparentSibling.pause).to.not.be.called;
+    });
+
+    it('should call pauseAll with deep mode and not includeSelf', () => {
+      pauseAll(ampGrandparent, !INCLUDE_SELF);
+      expect(ampGrandparent.pause).to.not.be.called;
+      expect(ampGrandparent.placeholderAmpChild.pause).to.be.calledOnce;
+      expect(ampParent.pause).to.be.calledOnce;
+      expect(ampParentSibling.pause).to.be.calledOnce;
+      expect(ampChild1.pause).to.be.calledOnce;
+      expect(ampChild2.pause).to.be.calledOnce;
+      expect(ampGrandparentSibling.pause).to.not.be.called;
+    });
+
+    it('should call unmountAll with deep mode and includeSelf', () => {
+      unmountAll(ampGrandparent, INCLUDE_SELF);
+      expect(ampGrandparent.unmount).to.be.calledOnce;
+      expect(ampGrandparent.placeholderAmpChild.unmount).to.be.calledOnce;
+      expect(ampParent.unmount).to.be.calledOnce;
+      expect(ampParentSibling.unmount).to.be.calledOnce;
+      expect(ampChild1.unmount).to.be.calledOnce;
+      expect(ampChild2.unmount).to.be.calledOnce;
+      expect(ampGrandparentSibling.unmount).to.not.be.called;
+    });
+
+    it('should call unmountAll with deep mode and not includeSelf', () => {
+      unmountAll(ampGrandparent, !INCLUDE_SELF);
+      expect(ampGrandparent.unmount).to.not.be.called;
+      expect(ampGrandparent.placeholderAmpChild.unmount).to.be.calledOnce;
+      expect(ampParent.unmount).to.be.calledOnce;
+      expect(ampParentSibling.unmount).to.be.calledOnce;
+      expect(ampChild1.unmount).to.be.calledOnce;
+      expect(ampChild2.unmount).to.be.calledOnce;
+      expect(ampGrandparentSibling.unmount).to.not.be.called;
+    });
+  });
+});
diff --git a/test/unit/utils/test-size-observer.js b/test/unit/utils/test-size-observer.js
new file mode 100644
index 0000000000000..6f6f8579b8f56
--- /dev/null
+++ b/test/unit/utils/test-size-observer.js
@@ -0,0 +1,307 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import {Deferred} from '../../../src/core/data-structures/promise';
+import {
+  measureBorderBoxSize,
+  measureContentSize,
+  observeBorderBoxSize,
+  observeContentSize,
+  unobserveBorderBoxSize,
+  unobserveContentSize,
+} from '../../../src/utils/size-observer';
+import {removeItem} from '../../../src/core/types/array';
+
+describes.realWin('size-observer', {}, (env) => {
+  let win, doc;
+  let observer;
+  let element;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    element = doc.createElement('div');
+    element.id = 'element1';
+    doc.body.appendChild(element);
+
+    class FakeResizeObserver {
+      constructor(callback) {
+        this.callback = callback;
+        this.elements = [];
+      }
+
+      disconnect() {}
+
+      observe(element) {
+        if (this.elements.includes(element)) {
+          throw new Error('already observed');
+        }
+        this.elements.push(element);
+      }
+
+      unobserve(element) {
+        if (!this.elements.includes(element)) {
+          throw new Error('not observed');
+        }
+        removeItem(this.elements, element);
+      }
+
+      notify(entries) {
+        const {callback} = this;
+        Promise.resolve().then(() => {
+          callback(entries);
+        });
+      }
+    }
+
+    env.sandbox.stub(win, 'ResizeObserver').value(function (callback) {
+      if (!observer) {
+        observer = new FakeResizeObserver(callback);
+      }
+      return observer;
+    });
+  });
+
+  function createCallbackCaller() {
+    const results = [];
+    let deferred = null;
+    const caller = (value) => {
+      results.push(value);
+      if (deferred) {
+        const next = results.shift();
+        deferred.resolve(next);
+        deferred = null;
+      }
+    };
+    caller.next = () => {
+      if (results.length > 0) {
+        const next = results.shift();
+        return Promise.resolve(next);
+      }
+      deferred = new Deferred();
+      return deferred.promise;
+    };
+    caller.isEmpty = () => results.length == 0;
+    return caller;
+  }
+
+  describe('content size', () => {
+    it('should measure content size', async () => {
+      const promise = measureContentSize(element);
+      observer.notify([
+        {target: element, contentRect: {width: 101, height: 102}},
+      ]);
+      const {height, width} = await promise;
+      expect(width).to.equal(101);
+      expect(height).to.equal(102);
+      expect(observer.elements).to.not.include(element);
+    });
+
+    it('should observe changes', async () => {
+      const callbackCaller = createCallbackCaller();
+      observeContentSize(element, callbackCaller);
+
+      // First response.
+      observer.notify([
+        {target: element, contentRect: {width: 101, height: 102}},
+      ]);
+      const size1 = await callbackCaller.next();
+      expect(size1.width).to.equal(101);
+      expect(size1.height).to.equal(102);
+
+      // Resize.
+      observer.notify([
+        {target: element, contentRect: {width: 201, height: 102}},
+      ]);
+      const size2 = await callbackCaller.next();
+      expect(size2.width).to.equal(201);
+      expect(size2.height).to.equal(102);
+    });
+
+    it('should only observe last change', async () => {
+      const callbackCaller = createCallbackCaller();
+      observeContentSize(element, callbackCaller);
+
+      observer.notify([
+        {target: element, contentRect: {width: 101, height: 102}},
+        {target: element, contentRect: {width: 103, height: 102}},
+      ]);
+      const size1 = await callbackCaller.next();
+      expect(size1.width).to.equal(103);
+      expect(size1.height).to.equal(102);
+      expect(callbackCaller.isEmpty()).to.be.true;
+    });
+
+    it('should observe multiple callbacks', async () => {
+      // First callback.
+      const callbackCaller1 = createCallbackCaller();
+      observeContentSize(element, callbackCaller1);
+      observer.notify([
+        {target: element, contentRect: {width: 101, height: 102}},
+      ]);
+      const size1 = await callbackCaller1.next();
+      expect(size1.width).to.equal(101);
+      expect(size1.height).to.equal(102);
+
+      // Second callback.
+      const callbackCaller2 = createCallbackCaller();
+      observeContentSize(element, callbackCaller2);
+      const size2 = await callbackCaller2.next();
+      expect(size2.width).to.equal(101);
+      expect(size2.height).to.equal(102);
+    });
+
+    it('should unobserve multiple callbacks', async () => {
+      const callbackCaller1 = createCallbackCaller();
+      const callbackCaller2 = createCallbackCaller();
+      observeContentSize(element, callbackCaller1);
+      observeContentSize(element, callbackCaller2);
+      expect(observer.elements).to.include(element);
+
+      // Unobserve first callback.
+      unobserveContentSize(element, callbackCaller2);
+      expect(observer.elements).to.include(element);
+
+      // Unobserve second callback.
+      unobserveContentSize(element, callbackCaller1);
+      expect(observer.elements).to.not.include(element);
+    });
+  });
+
+  describe('border-box size', () => {
+    it('should measure border size', async () => {
+      const promise = measureBorderBoxSize(element);
+      observer.notify([
+        {target: element, borderBoxSize: [{inlineSize: 101, blockSize: 102}]},
+      ]);
+      const {blockSize, inlineSize} = await promise;
+      expect(inlineSize).to.equal(101);
+      expect(blockSize).to.equal(102);
+      expect(observer.elements).to.not.include(element);
+    });
+
+    it('should fallback to offsetWidth and offsetHeight as a polyfill', async () => {
+      env.sandbox.stub(element, 'offsetWidth').value(101);
+      env.sandbox.stub(element, 'offsetHeight').value(102);
+      const promise = measureBorderBoxSize(element);
+      observer.notify([{target: element}]);
+      const {blockSize, inlineSize} = await promise;
+      expect(inlineSize).to.equal(101);
+      expect(blockSize).to.equal(102);
+      expect(observer.elements).to.not.include(element);
+    });
+
+    it('should fallback to offsetWidth and offsetHeight as a polyfill in vertical mode', async () => {
+      element.style.writingMode = 'vertical-lr';
+      env.sandbox.stub(element, 'offsetWidth').value(101);
+      env.sandbox.stub(element, 'offsetHeight').value(102);
+      const promise = measureBorderBoxSize(element);
+      observer.notify([{target: element}]);
+      const {blockSize, inlineSize} = await promise;
+      expect(inlineSize).to.equal(102);
+      expect(blockSize).to.equal(101);
+      expect(observer.elements).to.not.include(element);
+    });
+
+    it('should not conflict with content size observers', async () => {
+      const contentSizeCallbackCaller = createCallbackCaller();
+      observeContentSize(element, contentSizeCallbackCaller);
+
+      const borderBoxSizeCallbackCaller = createCallbackCaller();
+      observeBorderBoxSize(element, borderBoxSizeCallbackCaller);
+
+      expect(observer.elements).to.include(element);
+
+      await observer.notify([
+        {
+          target: element,
+          contentRect: {width: 101, height: 102},
+          borderBoxSize: [{inlineSize: 201, blockSize: 202}],
+        },
+      ]);
+
+      const contentSize = await contentSizeCallbackCaller.next();
+      expect(contentSize.width).to.equal(101);
+      expect(contentSize.height).to.equal(102);
+
+      const borderBoxSize = await borderBoxSizeCallbackCaller.next();
+      expect(borderBoxSize.inlineSize).to.equal(201);
+      expect(borderBoxSize.blockSize).to.equal(202);
+
+      unobserveContentSize(element, contentSizeCallbackCaller);
+      expect(observer.elements).to.include(element);
+
+      unobserveBorderBoxSize(element, borderBoxSizeCallbackCaller);
+      expect(observer.elements).to.not.include(element);
+    });
+
+    it('should observe changes', async () => {
+      const callbackCaller = createCallbackCaller();
+      observeBorderBoxSize(element, callbackCaller);
+
+      // First response.
+      observer.notify([
+        {target: element, borderBoxSize: [{inlineSize: 201, blockSize: 202}]},
+      ]);
+      const size1 = await callbackCaller.next();
+      expect(size1.inlineSize).to.equal(201);
+      expect(size1.blockSize).to.equal(202);
+
+      // Resize.
+      observer.notify([
+        {target: element, borderBoxSize: [{inlineSize: 301, blockSize: 202}]},
+      ]);
+      const size2 = await callbackCaller.next();
+      expect(size2.inlineSize).to.equal(301);
+      expect(size2.blockSize).to.equal(202);
+    });
+
+    it('should observe multiple callbacks', async () => {
+      // First callback.
+      const callbackCaller1 = createCallbackCaller();
+      observeBorderBoxSize(element, callbackCaller1);
+      observer.notify([
+        {target: element, borderBoxSize: [{inlineSize: 201, blockSize: 202}]},
+      ]);
+      const size1 = await callbackCaller1.next();
+      expect(size1.inlineSize).to.equal(201);
+      expect(size1.blockSize).to.equal(202);
+
+      // Second callback.
+      const callbackCaller2 = createCallbackCaller();
+      observeBorderBoxSize(element, callbackCaller2);
+      const size2 = await callbackCaller2.next();
+      expect(size2.inlineSize).to.equal(201);
+      expect(size2.blockSize).to.equal(202);
+    });
+
+    it('should unobserve multiple callbacks', async () => {
+      const callbackCaller1 = createCallbackCaller();
+      const callbackCaller2 = createCallbackCaller();
+      observeBorderBoxSize(element, callbackCaller1);
+      observeBorderBoxSize(element, callbackCaller2);
+      expect(observer.elements).to.include(element);
+
+      // Unobserve first callback.
+      unobserveBorderBoxSize(element, callbackCaller2);
+      expect(observer.elements).to.include(element);
+
+      // Unobserve second callback.
+      unobserveBorderBoxSize(element, callbackCaller1);
+      expect(observer.elements).to.not.include(element);
+    });
+  });
+});
diff --git a/test/unit/utils/test-xhr-utils.js b/test/unit/utils/test-xhr-utils.js
index ba5183c111036..e61b8b645ec2a 100644
--- a/test/unit/utils/test-xhr-utils.js
+++ b/test/unit/utils/test-xhr-utils.js
@@ -15,9 +15,8 @@
  */
 
 import {Services} from '../../../src/services';
-import {dict} from '../../../src/utils/object';
+import {dict} from '../../../src/core/types/object';
 import {
-  getViewerAuthTokenIfAvailable,
   getViewerInterceptResponse,
   setupAMPCors,
   setupInit,
@@ -210,85 +209,4 @@ describes.sandboxed('utils/xhr-utils', {}, (env) => {
       expect(ampDocSingle.whenFirstVisible).to.not.have.been.called;
     });
   });
-
-  describe('getViewerAuthTokenIfAvailable', () => {
-    it('should return undefined if crossorigin attr is not present', () => {
-      const el = document.createElement('html');
-      return getViewerAuthTokenIfAvailable(el).then((token) => {
-        expect(token).to.equal(undefined);
-      });
-    });
-
-    it(
-      'should return undefined if crossorigin attr does not contain ' +
-        'exactly "amp-viewer-auth-token-post"',
-      () => {
-        const el = document.createElement('html');
-        el.setAttribute('crossorigin', '');
-        return getViewerAuthTokenIfAvailable(el).then((token) => {
-          expect(token).to.be.undefined;
-        });
-      }
-    );
-
-    it('should return an auth token if one is present', () => {
-      env.sandbox.stub(Services, 'viewerAssistanceForDocOrNull').returns(
-        Promise.resolve({
-          getIdTokenPromise: () => Promise.resolve('idToken'),
-        })
-      );
-      const el = document.createElement('html');
-      el.setAttribute('crossorigin', 'amp-viewer-auth-token-via-post');
-      return getViewerAuthTokenIfAvailable(el).then((token) => {
-        expect(token).to.equal('idToken');
-      });
-    });
-
-    it('should return an empty auth token if there is not one present', () => {
-      env.sandbox.stub(Services, 'viewerAssistanceForDocOrNull').returns(
-        Promise.resolve({
-          getIdTokenPromise: () => Promise.resolve(undefined),
-        })
-      );
-      const el = document.createElement('html');
-      el.setAttribute('crossorigin', 'amp-viewer-auth-token-via-post');
-      return getViewerAuthTokenIfAvailable(el).then((token) => {
-        expect(token).to.equal('');
-      });
-    });
-
-    it(
-      'should return an empty auth token if there is an issue retrieving ' +
-        'the identity token',
-      () => {
-        env.sandbox.stub(Services, 'viewerAssistanceForDocOrNull').returns(
-          Promise.reject({
-            getIdTokenPromise: () => Promise.reject(),
-          })
-        );
-        const el = document.createElement('html');
-        el.setAttribute('crossorigin', 'amp-viewer-auth-token-via-post');
-        return getViewerAuthTokenIfAvailable(el).then((token) => {
-          expect(token).to.equal('');
-        });
-      }
-    );
-
-    it('should assert that amp-viewer-assistance extension is present', () => {
-      window.sandbox
-        .stub(Services, 'viewerAssistanceForDocOrNull')
-        .returns(Promise.resolve());
-      const el = document.createElement('html');
-      el.setAttribute('crossorigin', 'amp-viewer-auth-token-via-post');
-      expectAsyncConsoleError(
-        'crossorigin="amp-viewer-auth-token-post" ' +
-          'requires amp-viewer-assistance extension.',
-        1
-      );
-      return getViewerAuthTokenIfAvailable(el).then(
-        undefined,
-        (e) => expect(e).to.not.be.undefined
-      );
-    });
-  });
 });
diff --git a/test/unit/web-worker/test-amp-worker.js b/test/unit/web-worker/test-amp-worker.js
index 036c6181819af..bc7e5a6138dee 100644
--- a/test/unit/web-worker/test-amp-worker.js
+++ b/test/unit/web-worker/test-amp-worker.js
@@ -23,21 +23,23 @@ import {dev} from '../../../src/log';
 import {getMode} from '../../../src/mode';
 import {installXhrService} from '../../../src/service/xhr-impl';
 
-describe('invokeWebWorker', () => {
+describes.sandboxed('invokeWebWorker', {}, (env) => {
   let fakeWin;
 
   let ampWorker;
   let postMessageStub;
+  let blobStub;
   let fakeWorker;
   let fetchTextCallStub;
   let workerReadyPromise;
 
   beforeEach(() => {
-    window.sandbox.stub(Services, 'ampdocServiceFor').returns({
+    env.sandbox.stub(Services, 'ampdocServiceFor').returns({
       isSingleDoc: () => false,
     });
 
-    postMessageStub = window.sandbox.stub();
+    postMessageStub = env.sandbox.stub();
+    blobStub = env.sandbox.stub();
 
     fakeWorker = {};
     fakeWorker.postMessage = postMessageStub;
@@ -45,19 +47,19 @@ describe('invokeWebWorker', () => {
     // Fake Worker constructor just returns our `fakeWorker` instance.
     fakeWin = {
       Worker: () => fakeWorker,
-      Blob: window.sandbox.stub(),
-      URL: {createObjectURL: window.sandbox.stub()},
+      Blob: blobStub,
+      URL: {createObjectURL: env.sandbox.stub()},
       location: window.location,
     };
 
     // Stub xhr.fetchText() to return a resolved promise.
     installXhrService(fakeWin);
-    fetchTextCallStub = window.sandbox
+    fetchTextCallStub = env.sandbox
       .stub(Services.xhrFor(fakeWin), 'fetchText')
       .callsFake(() =>
         Promise.resolve({
           text() {
-            return Promise.resolve();
+            return Promise.resolve('//# sourceMappingURL=foo.js');
           },
         })
       );
@@ -81,7 +83,7 @@ describe('invokeWebWorker', () => {
     return workerReadyPromise.then(() => {
       expect(postMessageStub).to.have.been.calledWithMatch({
         method: 'foo',
-        args: window.sandbox.match(['bar', 123]),
+        args: env.sandbox.match(['bar', 123]),
         id: 0,
       });
 
@@ -193,7 +195,7 @@ describe('invokeWebWorker', () => {
   });
 
   it('should log error when unexpected message is received', () => {
-    const errorStub = window.sandbox.stub(dev(), 'error');
+    const errorStub = env.sandbox.stub(dev(), 'error');
 
     invokeWebWorker(fakeWin, 'foo');
 
@@ -278,4 +280,20 @@ describe('invokeWebWorker', () => {
       });
     });
   });
+
+  it('should replace the relative sourceMappingURL with the absolute one', () => {
+    invokeWebWorker(fakeWin, 'foo', ['bar', 123]);
+    getMode(fakeWin).bypassInterceptorForDev = true;
+
+    return workerReadyPromise.then(() => {
+      expect(blobStub).to.have.been.calledWithMatch(
+        [
+          '//# sourceMappingURL=http://localhost:9876/dist/ww.js.map\n//# sourceurl=http://localhost:9876/dist/ww.js',
+        ],
+        {
+          type: 'text/javascript',
+        }
+      );
+    });
+  });
 });
diff --git a/test/visual-diff/OWNERS b/test/visual-diff/OWNERS
index dbf32d57ca33c..69a88bfe03860 100644
--- a/test/visual-diff/OWNERS
+++ b/test/visual-diff/OWNERS
@@ -1,15 +1,10 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [
-        {name: 'danielrozenberg'},
-        {name: 'erwinmombay'},
-        {name: 'estherkim'},
-        {name: 'rsimha'},
-      ],
+      owners: [{name: 'ampproject/wg-infra'}],
     },
   ],
 }
diff --git a/test/visual-diff/visual-tests b/test/visual-diff/visual-tests
index 28d2f36ee7f6e..0320dbe0f8c5a 100644
--- a/test/visual-diff/visual-tests
+++ b/test/visual-diff/visual-tests
@@ -64,7 +64,7 @@
    *   "loading_complete_delay_ms": 1000,
    *
    *   // [optional, EXPERIMENTAL] Allow running "dirty" JavaScript code on
-   *   // on Percy in this AMP page. The code being executed *must* be inlined
+   *   // Percy in this AMP page. The code being executed *must* be inlined
    *   // inside a <script> tag, not be an externally loaded script via a
    *   // <script src="..."> tag.
    *   // The code *WILL BE EXECUTED TWICE*! Once locally, before the DOM is
@@ -182,6 +182,10 @@
       ],
       "interactive_tests": "examples/visual-tests/font.amp.404/font.amp.js"
     },
+    {
+      "url": "examples/visual-tests/css.amp/css.amp.html",
+      "name": "unbuilt css",
+    },
     {
       "url": "examples/visual-tests/article.amp/article.amp.html",
       "name": "AMP Article",
@@ -232,7 +236,7 @@
       "loading_incomplete_selectors": ["amp-sidebar.i-amphtml-element"]
     },
     {
-      // TODO(#27455, @ampproject/wg-ads): see https://percy.io/ampproject/amphtml/builds/4672752
+      // TODO(#27455, @ampproject/wg-monetization): see https://percy.io/ampproject/amphtml/builds/4672752
       "flaky": true,
       "url": "examples/visual-tests/amp-sticky-ad/amp-sticky-ad.amp.html",
       "name": "AMP Sticky Ad",
@@ -244,6 +248,8 @@
       "enable_percy_javascript": true
     },
     {
+      // TODO(#32685, @ampproject/wg-stories): see https://percy.io/ampproject/amphtml/builds/8876280/changed/503548953
+      "flaky": true,
       "url": "examples/visual-tests/amp-story/basic.html",
       "name": "amp-story: basic",
       "viewport": {"width": 320, "height": 480},
@@ -293,6 +299,24 @@
         ".i-amphtml-story-grid-template-thirds"
       ]
     },
+    {
+      "url": "examples/visual-tests/amp-story/amp-story-grid-layer-presets.html",
+      "name": "amp-story: Grid layer anchoring with preset (vertically)",
+      "viewport": {"width": 250, "height": 500},
+      "loading_complete_selectors": [
+        ".i-amphtml-story-loaded",
+        ".i-amphtml-story-grid-template-aspect"
+      ]
+    },
+    {
+      "url": "examples/visual-tests/amp-story/amp-story-grid-layer-presets.html",
+      "name": "amp-story: Grid layer anchoring with preset (horizontally)",
+      "viewport": {"width": 400, "height": 500},
+      "loading_complete_selectors": [
+        ".i-amphtml-story-loaded",
+        ".i-amphtml-story-grid-template-aspect"
+      ]
+    },
     {
       "url": "examples/visual-tests/amp-story/amp-story-cta-layer.html",
       "name": "amp-story: CTA layer",
@@ -338,15 +362,6 @@
         ".i-amphtml-story-info-dialog"
       ]
     },
-    {
-      "url": "examples/visual-tests/amp-story/amp-story-bookend.html",
-      "name": "amp-story: bookend",
-      "viewport": {"width": 320, "height": 480},
-      "loading_complete_selectors": [
-        ".i-amphtml-story-loaded",
-        ".i-amphtml-story-bookend"
-      ]
-    },
     {
       "url": "examples/visual-tests/amp-story/amp-story-consent.html",
       "name": "amp-story: consent",
@@ -442,15 +457,6 @@
         ".i-amphtml-story-loaded",
       ]
     },
-    {
-      "url": "examples/visual-tests/amp-story/amp-story-bookend.html",
-      "name": "amp-story: bookend (desktop)",
-      "viewport": {"width": 1440, "height": 900},
-      "loading_complete_selectors": [
-        ".i-amphtml-story-loaded",
-        ".i-amphtml-story-bookend"
-      ]
-    },
     {
       "url": "examples/visual-tests/amp-story/amp-story-consent.html",
       "name": "amp-story: consent (desktop)",
@@ -498,15 +504,6 @@
         ".i-amphtml-story-info-dialog"
       ]
     },
-    {
-      "url": "examples/visual-tests/amp-story/amp-story-bookend.rtl.html",
-      "name": "amp-story: bookend (rtl)",
-      "viewport": {"width": 320, "height": 480},
-      "loading_complete_selectors": [
-        ".i-amphtml-story-loaded",
-        ".i-amphtml-story-bookend"
-      ]
-    },
     {
       "url": "examples/visual-tests/amp-story/amp-story-consent.rtl.html",
       "name": "amp-story: consent (rtl)",
@@ -528,15 +525,6 @@
       // for page navigation
       "loading_complete_delay_ms": 500
     },
-    {
-      "url": "examples/visual-tests/amp-story/amp-story-bookend.rtl.html",
-      "name": "amp-story: bookend (desktop) (rtl)",
-      "viewport": {"width": 1440, "height": 900},
-      "loading_complete_selectors": [
-        ".i-amphtml-story-loaded",
-        ".i-amphtml-story-bookend"
-      ]
-    },
     {
       "url": "examples/visual-tests/amp-story/amp-story-consent.rtl.html",
       "name": "amp-story: consent (desktop) (rtl)",
@@ -558,7 +546,7 @@
       ]
     },
     {
-      // TODO(#27453, @ampproject/wg-ads): disabled in #21935 because this test is not hermetic.
+      // TODO(#27453, @ampproject/wg-monetization): disabled in #21935 because this test is not hermetic.
       "flaky": true,
       "url": "examples/visual-tests/amp-inabox/amp-inabox-gpt.html",
       "name": "AMP Inabox GPT Ad",
@@ -666,13 +654,31 @@
       ],
     },
     {
-      "url": "examples/visual-tests/amp-story/amp-story-reaction-quiz-sizing-positioning.html",
-      "name": "amp-story-reaction-quiz: sizing and positioning",
+      "url": "examples/visual-tests/amp-story/amp-story-interactive-quiz-sizing-positioning.html",
+      "name": "amp-story-interactive-quiz: sizing and positioning",
       "viewport": {"width": 320, "height": 480},
       "loading_complete_selectors": [
         ".i-amphtml-story-loaded",
       ],
     },
+    {
+      "flaky": true, // #34033. See https://percy.io/ampproject/amphtml/builds/10102542/changed/568786603
+      "url": "examples/visual-tests/amp-story/amp-story-dev-tools.html#development=1&url=https://preview.amp.dev/documentation/examples/introduction/stories_in_amp",
+      "name": "amp-story-dev-tools: preview tab loading and running",
+      "viewport": {"width": 1080, "height": 720},
+      "loading_complete_selectors": [
+        ".i-amphtml-story-dev-tools-tab.i-amphtml-layout"
+      ]
+    },
+    {
+      "flaky": true, // #34033. See https://percy.io/ampproject/amphtml/builds/10102542/changed/568786603
+      "url": "examples/visual-tests/amp-story/amp-story-dev-tools.html#development=1&url=https://preview.amp.dev/documentation/examples/introduction/stories_in_amp&devices=desktop;ipad",
+      "name": "amp-story-dev-tools: preview tab loading and running with a desktop and ipad layout",
+      "viewport": {"width": 1080, "height": 720},
+      "loading_complete_selectors": [
+        ".i-amphtml-story-dev-tools-tab.i-amphtml-layout"
+      ]
+    },
     {
       "flaky": true,
       // See https://percy.io/ampproject/amphtml/builds/1434487/view/95137509/375?browser=firefox&mode=diff
@@ -720,6 +726,7 @@
       "no_base_test": true
     },
     {
+      // TODO(#28975, @ampproject/wg-monetization): see https://percy.io/ampproject/amphtml/builds-next/8494289/changed/482844300
       "url": "examples/visual-tests/amphtml-ads/amp-fie-static.html",
       "name": "amphtml-ads: friendly iframe static",
       "interactive_tests": "examples/visual-tests/amphtml-ads/static.js",
@@ -734,9 +741,6 @@
     {
       "url": "examples/visual-tests/amphtml-ads/amp-inabox-static.html",
       "name": "amphtml-ads: inabox static",
-      "loading_complete_selectors": [
-        ".view", ".activeview"
-      ],
       "interactive_tests": "examples/visual-tests/amphtml-ads/static.js",
       "no_base_test": true
     },
@@ -747,7 +751,7 @@
       "interactive_tests": "examples/visual-tests/amp-mega-menu/amp-mega-menu.js"
     },
     {
-      // TODO(#27454, @ampproject/wg-ui-and-a11y): see https://percy.io/ampproject/amphtml/builds/4672992/view/274790617/375?mode=diff&browser=firefox&snapshot=274790617
+      // TODO(#27454, @ampproject/wg-components): see https://percy.io/ampproject/amphtml/builds/4672992/view/274790617/375?mode=diff&browser=firefox&snapshot=274790617
       "flaky": true,
       "url": "examples/visual-tests/amp-mega-menu/amp-mega-menu-with-list.amp.html",
       "name": "amp-mega-menu: template render",
@@ -760,6 +764,7 @@
       "viewport": {"width": 800, "height": 600},
       "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js",
       "loading_complete_selectors": [".i-amphtml-video-interface"],
+      "no_base_test": true
     },
     {
       "url": "examples/visual-tests/amp-video-docking/rtl.html",
@@ -767,6 +772,7 @@
       "viewport": {"width": 800, "height": 600},
       "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js",
       "loading_complete_selectors": [".i-amphtml-video-interface"],
+      "no_base_test": true
     },
     {
       "url": "examples/visual-tests/amp-video-docking/slot.html",
@@ -774,6 +780,86 @@
       "viewport": {"width": 800, "height": 600},
       "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js",
       "loading_complete_selectors": [".i-amphtml-video-interface"],
+      "no_base_test": true
+    },
+    {
+      "url": "examples/visual-tests/amp-story-player/back-button.html",
+      "name": "amp-story-player exit control back button",
+      "interactive_tests": "examples/visual-tests/amp-story-player/placeholder.js",
+      "loading_complete_selectors": [".i-amphtml-story-player-loaded"],
+      "loading_incomplete_selectors": [".i-amphtml-story-player-loading"],
+      "no_base_test": true
+    },
+    {
+      "url": "examples/visual-tests/amp-story-player/close-button.html",
+      "name": "amp-story-player exit control close button",
+      "interactive_tests": "examples/visual-tests/amp-story-player/placeholder.js",
+      "loading_complete_selectors": [".i-amphtml-story-player-loaded"],
+      "loading_incomplete_selectors": [".i-amphtml-story-player-loading"],
+      "no_base_test": true
+    },
+    {
+      "url": "examples/visual-tests/amp-story-player/player-local-story.html",
+      "name": "amp-story-player local story basic page",
+      "interactive_tests": "examples/visual-tests/amp-story-player/story-loaded.js",
+      "loading_incomplete_selectors": [".i-amphtml-story-player-loading"],
+      "no_base_test": true
+    },
+    {
+      "url": "examples/visual-tests/amp-story-player/player-amp-version.html",
+      "name": "amp-story-player AMP version",
+      "interactive_tests": "examples/visual-tests/amp-story-player/player-amp-version.js",
+      "viewport": {"width": 400, "height": 900},
+      "loading_complete_delay_ms": 2000,
+      "no_base_test": true
+    },
+    {
+      "url": "examples/visual-tests/amp-story-player/story-attribution.html",
+      "name": "amp-story-player story attribution",
+      "interactive_tests": "examples/visual-tests/amp-story-player/story-loaded.js",
+      "loading_incomplete_selectors": [".i-amphtml-story-player-loading"],
+      "viewport": {"width": 400, "height": 800},
+      "no_base_test": true
     },
+    {
+      "url": "examples/visual-tests/amp-carousel/amp-carousel.html",
+      "name": "amp-carousel",
+      "loading_complete_delay_ms": 2000,
+    },
+    {
+      "url": "examples/visual-tests/amp-carousel/amp-carousel-slides.html",
+      "name": "amp-carousel-slides",
+      "loading_complete_delay_ms": 2000,
+    },
+    {
+      "url": "examples/visual-tests/amp-story/basic-transformed.html",
+      "name": "amp-story: basic example transformed with toolbox-optimizer",
+      "viewport": {"width": 320, "height": 480},
+      "loading_complete_selectors": [".i-amphtml-story-loaded"]
+    },
+    {
+      "url": "examples/visual-tests/amp-story/amp-story-360-image.html",
+      "name": "amp-story-360: 360 image rendering",
+      "viewport": {"width": 320, "height": 480},
+      "loading_complete_selectors": [".i-amphtml-story-360-loaded"]
+    },
+    {
+      "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",
+      ],
+      "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"
+    }
   ]
 }
diff --git a/testing/.eslintrc.js b/testing/.eslintrc.js
index 32191a7ac484d..b41a23cff5a0d 100644
--- a/testing/.eslintrc.js
+++ b/testing/.eslintrc.js
@@ -19,5 +19,6 @@ module.exports = {
     'local/no-export-side-effect': 0,
     'local/no-module-exports': 0,
     'local/no-style-property-setting': 0,
+    'local/no-spread': 0,
   },
 };
diff --git a/testing/OWNERS b/testing/OWNERS
new file mode 100644
index 0000000000000..e4161699aa703
--- /dev/null
+++ b/testing/OWNERS
@@ -0,0 +1,13 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {name: 'ampproject/wg-performance'},
+        {name: 'ampproject/wg-infra'},
+      ],
+    },
+  ],
+}
diff --git a/testing/amp-performance-extension/OWNERS b/testing/amp-performance-extension/OWNERS
index cc7bf6cb45708..0a2c23d2c2427 100644
--- a/testing/amp-performance-extension/OWNERS
+++ b/testing/amp-performance-extension/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/testing/amp-performance-extension/measure.js b/testing/amp-performance-extension/measure.js
index b59634f56c8da..78300d849569d 100644
--- a/testing/amp-performance-extension/measure.js
+++ b/testing/amp-performance-extension/measure.js
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-// eslint-disable-next-line no-unused-vars
-let cumulativeLayoutShift, largestContentfulPaint, longTasks, measureStarted;
+let cumulativeLayoutShift, largestContentfulPaint, longTasks;
+let measureStarted; // eslint-disable-line no-unused-vars
 
 function renderMeasurement(container, label, count) {
   container./*OK*/ innerHTML += `<div class='i-amphtml-performance-line'>
@@ -131,7 +131,7 @@ document.addEventListener('DOMContentLoaded', function () {
             width: 200px;
             overflow: hidden;
         }
-        
+
         .i-amphtml-performance-line {
             display: flex;
             flex-direction: row;
@@ -139,7 +139,7 @@ document.addEventListener('DOMContentLoaded', function () {
             justify-content: space-between;
             font-size: 12px;
         }
-        
+
         .i-amphtml-performance-count {
             margin-left: 8px;
             font-weight: bold;
diff --git a/testing/async-errors.js b/testing/async-errors.js
new file mode 100644
index 0000000000000..4f4f552275ed2
--- /dev/null
+++ b/testing/async-errors.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2021 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';
+
+import * as coreError from '../src/core/error';
+import {reportError} from '../src/error-reporting';
+import {setReportError} from '../src/log';
+import sinon from 'sinon'; // eslint-disable-line local/no-import
+
+let rethrowAsyncSandbox;
+
+/**
+ * Initializes the stubs to prevent async errors from being thrown during tests.
+ */
+function stubAsyncErrorThrows() {
+  rethrowAsyncSandbox = sinon.createSandbox();
+  rethrowAsyncSandbox.stub(coreError, 'rethrowAsync').callsFake((...args) => {
+    const error = coreError.createErrorVargs.apply(null, args);
+    self.__AMP_REPORT_ERROR(error);
+    throw error;
+  });
+}
+
+/**
+ * Resets async error behavior to its default.
+ */
+function restoreAsyncErrorThrows() {
+  rethrowAsyncSandbox.restore();
+}
+
+/**
+ * Used to prevent asynchronous throwing of errors during each test.
+ */
+export function preventAsyncErrorThrows() {
+  self.stubAsyncErrorThrows = stubAsyncErrorThrows;
+  self.restoreAsyncErrorThrows = restoreAsyncErrorThrows;
+  setReportError(reportError);
+  stubAsyncErrorThrows();
+}
diff --git a/testing/console-logging-setup.js b/testing/console-logging-setup.js
new file mode 100644
index 0000000000000..739b2926a6e05
--- /dev/null
+++ b/testing/console-logging-setup.js
@@ -0,0 +1,168 @@
+/**
+ * Copyright 2021 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';
+
+import sinon from 'sinon'; // eslint-disable-line local/no-import
+
+/**
+ * @fileoverview Provides functions that track unexpected console errors during
+ * tests and prints warnings when they are detected.
+ */
+
+let consoleErrorSandbox;
+let testRunner;
+let testName;
+let expectedAsyncErrors;
+let consoleInfoLogWarnSandbox;
+const originalConsoleError = console.error;
+
+/**
+ * Exposes the test name for use during error logging.
+ * @param {string} name
+ */
+export function setTestName(name) {
+  testName = name;
+}
+
+/**
+ * Exposes the test runner object so that errors can be associated with it.
+ * TODO(rsimha): Remove this after karma-runner/karma-mocha#236 is fixed.
+ * @param {Object} runner
+ */
+export function setTestRunner(runner) {
+  testRunner = runner;
+}
+
+/**
+ * Resets all console logging stubs.
+ */
+export function restoreConsoleSandbox() {
+  if (consoleInfoLogWarnSandbox) {
+    consoleInfoLogWarnSandbox.restore();
+  }
+}
+
+/**
+ * Prints a warning when a console error is detected during a test.
+ * @param {*} messages One or more error messages
+ */
+function printWarning(...messages) {
+  const message = messages.join(' ');
+
+  // Match equal strings.
+  if (expectedAsyncErrors.includes(message)) {
+    expectedAsyncErrors.splice(expectedAsyncErrors.indexOf(message), 1);
+    return;
+  }
+
+  // Match regex.
+  for (let i = 0; i < expectedAsyncErrors.length; i++) {
+    const expectedError = expectedAsyncErrors[i];
+    if (typeof expectedError != 'string') {
+      if (expectedError.test(message)) {
+        expectedAsyncErrors.splice(i, 1);
+        return;
+      }
+    }
+  }
+
+  const errorMessage = message.split('\n', 1)[0]; // First line.
+  const helpMessage =
+    '    The test "' +
+    testName +
+    '"' +
+    ' resulted in a call to console.error. (See above line.)\n' +
+    '    ⤷ If the error is not expected, fix the code that generated ' +
+    'the error.\n' +
+    '    ⤷ If the error is expected (and synchronous), use the following ' +
+    'pattern to wrap the test code that generated the error:\n' +
+    "        'allowConsoleError(() => { <code that generated the " +
+    "error> });'\n" +
+    '    ⤷ If the error is expected (and asynchronous), use the ' +
+    'following pattern at the top of the test:\n' +
+    "        'expectAsyncConsoleError(<string or regex>[, <number of" +
+    ' times the error message repeats>]);';
+  originalConsoleError(errorMessage + "'\n" + helpMessage);
+}
+
+/**
+ * Used during normal test execution, to detect unexpected console errors.
+ */
+export function warnForConsoleError() {
+  expectedAsyncErrors = [];
+  consoleErrorSandbox = sinon.createSandbox();
+  const consoleErrorStub = consoleErrorSandbox
+    .stub(console, 'error')
+    .callsFake(printWarning);
+
+  self.expectAsyncConsoleError = function (message, repeat = 1) {
+    expectedAsyncErrors.push.apply(
+      expectedAsyncErrors,
+      Array(repeat).fill(message)
+    );
+  };
+  self.allowConsoleError = function (func) {
+    consoleErrorStub.reset();
+    consoleErrorStub.callsFake(() => {});
+    const result = func();
+    try {
+      expect(consoleErrorStub).to.have.been.called;
+    } catch (e) {
+      const helpMessage =
+        'The test "' +
+        testName +
+        '" contains an "allowConsoleError" block ' +
+        "that didn't result in a call to console.error.";
+      originalConsoleError(helpMessage);
+    } finally {
+      consoleErrorStub.callsFake(printWarning);
+    }
+    return result;
+  };
+}
+
+/**
+ * Used to restore error level logging after each test.
+ */
+export function restoreConsoleError() {
+  consoleErrorSandbox.restore();
+  if (expectedAsyncErrors.length > 0) {
+    const helpMessage =
+      'The test "' +
+      testName +
+      '" called "expectAsyncConsoleError", ' +
+      'but there were no call(s) to console.error with these message(s): ' +
+      '"' +
+      expectedAsyncErrors.join('", "') +
+      '"';
+    testRunner.test.error(new Error(helpMessage));
+  }
+  expectedAsyncErrors = [];
+}
+
+/**
+ * Used to silence info, log, and warn level logging during each test, unless
+ * verbose mode is enabled.
+ */
+export function maybeStubConsoleInfoLogWarn() {
+  const {verboseLogging} = window.__karma__.config;
+  if (!verboseLogging) {
+    consoleInfoLogWarnSandbox = sinon.createSandbox();
+    consoleInfoLogWarnSandbox.stub(console, 'info').callsFake(() => {});
+    consoleInfoLogWarnSandbox.stub(console, 'log').callsFake(() => {});
+    consoleInfoLogWarnSandbox.stub(console, 'warn').callsFake(() => {});
+  }
+}
diff --git a/testing/describes.js b/testing/describes.js
index 8df6971c43a14..8caadd29e454e 100644
--- a/testing/describes.js
+++ b/testing/describes.js
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /**
  * @fileoverview
@@ -87,8 +88,8 @@ import {
   FakeWindow,
   interceptEventListeners,
 } from './fake-dom';
-import {RequestBank, stubService} from './test-helper';
 import {Services} from '../src/services';
+import {TestConfig} from './test-config';
 import {addParamsToUrl} from '../src/url';
 import {adopt, adoptShadowMode} from '../src/runtime';
 import {cssText as ampDocCss} from '../build/ampdoc.css';
@@ -101,15 +102,19 @@ import {
   installBuiltinElements,
   installRuntimeServices,
 } from '../src/service/core-services';
-
 import {install as installCustomElements} from '../src/polyfills/custom-elements';
 import {installDocService} from '../src/service/ampdoc-impl';
 import {installExtensionsService} from '../src/service/extensions-impl';
 import {installFriendlyIframeEmbed} from '../src/friendly-iframe-embed';
 import {install as installIntersectionObserver} from '../src/polyfills/intersection-observer';
-import {maybeTrackImpression} from '../src/impression';
+import {install as installResizeObserver} from '../src/polyfills/resize-observer';
+import {
+  maybeTrackImpression,
+  resetTrackImpressionPromiseForTesting,
+} from '../src/impression';
 import {resetScheduledElementForTesting} from '../src/service/custom-element-registry';
 import {setStyles} from '../src/style';
+import {stubService} from './test-helper';
 import fetchMock from 'fetch-mock/es5/client-bundle';
 import sinon from /*OK*/ 'sinon';
 
@@ -173,7 +178,7 @@ export let AmpTestEnv;
  * @param {!TestSpec} spec
  * @param {function()} fn
  */
-export const sandboxed = describeEnv((unusedSpec) => []);
+export const sandboxed = createConfigurableRunner((unusedSpec) => []);
 
 /**
  * A test with a fake window.
@@ -187,7 +192,7 @@ export const sandboxed = describeEnv((unusedSpec) => []);
  *   amp: (!AmpTestEnv|undefined),
  * })} fn
  */
-export const fakeWin = describeEnv((spec) => [
+export const fakeWin = createConfigurableRunner((spec) => [
   new FakeWinFixture(spec),
   new AmpFixture(spec),
 ]);
@@ -206,7 +211,7 @@ export const fakeWin = describeEnv((spec) => [
  *   amp: (!AmpTestEnv|undefined),
  * })} fn
  */
-export const realWin = describeEnv((spec) => [
+export const realWin = createConfigurableRunner((spec) => [
   new RealWinFixture(spec),
   new AmpFixture(spec),
 ]);
@@ -220,24 +225,28 @@ export const realWin = describeEnv((spec) => [
  *   hash: (string|undefined),
  *   amp: (boolean),
  *   timeout: (number),
- *   retryOnSaucelabs: (number)
  * }} spec
  * @param {function({
  *   win: !Window,
  *   iframe: !HTMLIFrameElement,
  * })} fn
  */
-export const integration = describeEnv((spec) => [
+export const integration = createConfigurableRunner((spec) => [
   new IntegrationFixture(spec),
 ]);
 
 /**
- * A repeating test.
+ * A repeated test within a sandboxed wrapper.
  * @param {string} name
  * @param {!Object<string, *>} variants
- * @param {function(string, *)} fn
+ * @param {function()} fn
  */
-export const repeated = (function () {
+export const repeated = createRepeatedRunner();
+
+/**
+ * Defines a repeating test within a sandboxed wrapper.
+ */
+function repeatedEnv() {
   /**
    * @param {string} name
    * @param {!Object<string, *>} variants
@@ -247,33 +256,30 @@ export const repeated = (function () {
   const templateFunc = function (name, variants, fn, describeFunc) {
     return describeFunc(name, function () {
       for (const name in variants) {
-        describe(name ? ` ${name} ` : SUB, function () {
-          fn.call(this, name, variants[name]);
+        sandboxed(name ? ` ${name} ` : SUB, {}, function (env) {
+          fn.call(this, name, variants[name], env);
         });
       }
     });
   };
 
-  /**
-   * @param {string} name
-   * @param {!Object<string, *>} variants
-   * @param {function(string, *)} fn
-   */
-  const mainFunc = function (name, variants, fn) {
-    return templateFunc(name, variants, fn, describe);
-  };
-
-  /**
-   * @param {string} name
-   * @param {!Object<string, *>} variants
-   * @param {function(string, *)} fn
-   */
-  mainFunc.only = function (name, variants, fn) {
-    return templateFunc(name, variants, fn, describe./*OK*/ only);
-  };
+  const createTemplate = (describeFunc) => (name, variants, fn) =>
+    templateFunc(name, variants, fn, describeFunc);
 
+  const mainFunc = createTemplate(describe);
+  mainFunc.only = createTemplate(describe.only);
+  mainFunc.skip = createTemplate(describe.skip);
   return mainFunc;
-})();
+}
+
+/**
+ * Creates a repeated version of a top-level describes runner.
+ */
+function createRepeatedRunner() {
+  const runner = repeatedEnv();
+  runner.configure = () => new TestConfig(runner);
+  return runner;
+}
 
 /**
  * Mocks Window.fetch in the given environment and exposes `env.fetchMock`. For
@@ -303,21 +309,24 @@ function describeEnv(factory) {
    * @param {!Object} spec
    * @param {function(!Object)} fn
    * @param {function(string, function())} describeFunc
+   * @param {?boolean} configured
    */
-  const templateFunc = function (name, spec, fn, describeFunc) {
-    const fixtures = [new SandboxFixture(spec)];
-    factory(spec).forEach((fixture) => {
-      if (fixture && fixture.isOn()) {
-        fixtures.push(fixture);
-      }
-    });
-    return describeFunc(name, function () {
+  const templateFunc = function (name, spec, fn, describeFunc, configured) {
+    const fixtures = [new SandboxFixture(spec)].concat(
+      factory(spec).filter((fixture) => fixture && fixture.isOn())
+    );
+
+    return describeFunc(name, () => {
       const env = Object.create(null);
 
+      // Note: If this `beforeEach` function is made async/always returns a
+      // Promise, even if it resolves immediately, tests start failing. It's
+      // not entirely clear why. Don't refactor this to be an async for-loop
+      // like the `afterEach` below.
       beforeEach(() => {
         let totalPromise = undefined;
         // Set up all fixtures.
-        fixtures.forEach((fixture, unusedIndex) => {
+        fixtures.forEach((fixture) => {
           if (totalPromise) {
             totalPromise = totalPromise.then(() => fixture.setup(env));
           } else {
@@ -330,65 +339,54 @@ function describeEnv(factory) {
         return totalPromise;
       });
 
-      afterEach(() => {
-        // Tear down all fixtures.
-        let teardown = Promise.resolve();
-        fixtures
-          .slice(0)
-          .reverse()
-          .forEach((fixture) => {
-            teardown = teardown.then(() => fixture.teardown(env));
-          });
+      afterEach(async () => {
+        // Tear down all fixtures in reverse order.
+        for (let i = fixtures.length - 1; i >= 0; --i) {
+          await fixtures[i].teardown(env);
+        }
 
-        return teardown.then(() => {
-          // Delete all other keys.
-          for (const key in env) {
-            delete env[key];
-          }
-        });
+        // Delete all other keys.
+        for (const key in env) {
+          delete env[key];
+        }
       });
 
-      let d = describe.configure();
-      if (spec.retryOnSaucelabs) {
-        d = d.retryOnSaucelabs(spec.retryOnSaucelabs);
-      }
-      if (spec.ifIe) {
-        d = d.ifIe();
-      }
-      d.run(SUB, function () {
+      function execute() {
         if (spec.timeout) {
           this.timeout(spec.timeout);
         }
         fn.call(this, env);
-      });
-    });
-  };
+      }
 
-  /**
-   * @param {string} name
-   * @param {!Object} spec
-   * @param {function(!Object)} fn
-   */
-  const mainFunc = function (name, spec, fn) {
-    return templateFunc(name, spec, fn, describe);
+      // Don't re-configure the inner describe() if the outer describes() was
+      // already configured.
+      if (configured) {
+        describe(SUB, execute);
+      } else {
+        describe.configure().run(SUB, execute);
+      }
+    });
   };
 
-  /**
-   * @param {string} name
-   * @param {!Object} spec
-   * @param {function(!Object)} fn
-   */
-  mainFunc.only = function (name, spec, fn) {
-    return templateFunc(name, spec, fn, describe./*OK*/ only);
-  };
-
-  mainFunc.skip = function (name, variants, fn) {
-    return templateFunc(name, variants, fn, describe.skip);
-  };
+  const createTemplate = (describeFunc) => (name, spec, fn, configured) =>
+    templateFunc(name, spec, fn, describeFunc, configured);
 
+  const mainFunc = createTemplate(describe);
+  mainFunc.only = createTemplate(describe.only);
+  mainFunc.skip = createTemplate(describe.skip);
   return mainFunc;
 }
 
+/**
+ * Creates a configurable version of a top-level describes runner.
+ * @param {function(!Object):!Array<?Fixture>} factory
+ */
+function createConfigurableRunner(factory) {
+  const runner = describeEnv(factory);
+  runner.configure = () => new TestConfig(runner);
+  return runner;
+}
+
 /** @interface */
 class FixtureInterface {
   /** @return {boolean} */
@@ -402,6 +400,7 @@ class FixtureInterface {
 
   /**
    * @param {!Object} env
+   * @return {!Promise|undefined}
    */
   teardown(unusedEnv) {}
 }
@@ -482,10 +481,6 @@ class IntegrationFixture {
     if (this.spec.timeout === undefined) {
       this.spec.timeout = 15000;
     }
-    if (this.spec.retryOnSaucelabs === undefined) {
-      this.spec.retryOnSaucelabs = 4;
-    }
-
     /** @const {string} */
     this.hash = spec.hash || '';
     delete spec.hash;
@@ -497,7 +492,7 @@ class IntegrationFixture {
   }
 
   /** @override */
-  setup(env) {
+  async setup(env) {
     const body =
       typeof this.spec.body == 'function' ? this.spec.body() : this.spec.body;
     const css =
@@ -522,26 +517,32 @@ class IntegrationFixture {
       url = addParamsToUrl(url, this.spec.params);
     }
 
-    return new Promise((resolve, reject) => {
-      const docUrl =
-        addParamsToUrl(url, {body, css, experiments, extensions}) +
-        `#${this.hash}`;
-
-      let src = docUrl;
-      // If shadow mode, wrap doc in shadow viewer.
-      if (ampDocType == 'shadow') {
-        src = addParamsToUrl('/amp4test/compose-shadow', {docUrl});
-      }
+    const docUrl =
+      addParamsToUrl(url, {
+        body,
+        css,
+        experiments,
+        extensions,
+      }) + `#${this.hash}`;
+
+    // If shadow mode, wrap doc in shadow viewer.
+    const src =
+      ampDocType == 'shadow'
+        ? addParamsToUrl('/amp4test/compose-shadow', {docUrl})
+        : docUrl;
+
+    env.iframe = createElementWithAttributes(document, 'iframe', {
+      src,
+      style,
+    });
 
-      env.iframe = createElementWithAttributes(document, 'iframe', {
-        src,
-        style,
-      });
+    return new Promise((resolve, reject) => {
       env.iframe.onload = function () {
         env.win = env.iframe.contentWindow;
         resolve();
       };
       env.iframe.onerror = reject;
+
       document.body.appendChild(env.iframe);
     });
   }
@@ -551,7 +552,6 @@ class IntegrationFixture {
     if (env.iframe.parentNode) {
       env.iframe.parentNode.removeChild(env.iframe);
     }
-    return RequestBank.tearDown();
   }
 }
 
@@ -631,7 +631,7 @@ class RealWinFixture {
         win.testLocation = new FakeLocation(window.location.href, win);
 
         if (!spec.allowExternalResources) {
-          doNotLoadExternalResourcesInTest(win);
+          doNotLoadExternalResourcesInTest(win, env.sandbox);
         }
 
         // Install AMP CSS if requested.
@@ -657,6 +657,7 @@ class RealWinFixture {
 
         // Install IntersectionObserver polyfill.
         installIntersectionObserver(win);
+        installResizeObserver(win);
 
         // Intercept event listeners
         interceptEventListeners(win);
@@ -743,26 +744,33 @@ class AmpFixture {
       Services.resourcesForDoc(ampdoc).ampInitComplete();
       // Ensure cached meta name/content pairs are cleared before each test
       ampdoc.meta_ = null;
+      maybeTrackImpression(win);
     } else if (ampdocType == 'multi' || ampdocType == 'shadow') {
       adoptShadowMode(win);
       // Notice that ampdoc's themselves install runtime styles in shadow roots.
       // Thus, not changes needed here.
     }
-    maybeTrackImpression(self);
-    const extensionIds = [];
+    const extensions = [];
     if (spec.extensions) {
       spec.extensions.forEach((extensionIdWithVersion) => {
         const tuple = extensionIdWithVersion.split(':');
         const extensionId = tuple[0];
-        extensionIds.push(extensionId);
         // Default to 0.1 if no version was provided.
-        const version = tuple[1] || '0.1';
-        const installer = extensionsBuffer[`${extensionId}:${version}`];
+        const extensionVersion = tuple[1] || '0.1';
+        extensions.push({extensionId, extensionVersion});
+        const installer =
+          extensionsBuffer[`${extensionId}:${extensionVersion}`];
         if (installer) {
           if (env.ampdoc) {
-            env.ampdoc.declareExtension(extensionId);
+            env.ampdoc.declareExtension(extensionId, extensionVersion);
           }
-          env.extensions.registerExtension(extensionId, installer, win.AMP);
+          env.extensions.registerExtension(
+            extensionId,
+            extensionVersion,
+            /* latest */ false,
+            installer,
+            win.AMP
+          );
         }
       });
     }
@@ -781,10 +789,16 @@ class AmpFixture {
     /**
      * Installs the specified extension.
      * @param {string} extensionId
-     * @param {string=} opt_version
+     * @param {string=} version
+     * @param {boolean=} latest
+     * @param {boolean=} auto
      */
-    env.installExtension = function (extensionId, opt_version) {
-      const version = opt_version || '0.1';
+    env.installExtension = function (
+      extensionId,
+      version = '0.1',
+      latest = false,
+      auto = true
+    ) {
       const installer = extensionsBuffer[`${extensionId}:${version}`];
       if (!installer) {
         throw new Error(
@@ -792,10 +806,16 @@ class AmpFixture {
             ' Make sure the module is imported'
         );
       }
-      if (env.ampdoc) {
-        env.ampdoc.declareExtension(extensionId);
+      if (env.ampdoc && auto) {
+        env.ampdoc.declareExtension(extensionId, version);
       }
-      env.extensions.registerExtension(extensionId, installer, win.AMP);
+      env.extensions.registerExtension(
+        extensionId,
+        version,
+        latest,
+        installer,
+        win.AMP
+      );
     };
 
     /**
@@ -831,7 +851,7 @@ class AmpFixture {
         {
           url: 'http://ads.localhost:8000/example',
           html,
-          extensionIds,
+          extensions,
         },
         (embedWin) => {
           interceptEventListeners(embedWin);
@@ -843,6 +863,8 @@ class AmpFixture {
         env.embed = embed;
         env.parentWin = env.win;
         env.win = embed.win;
+        env.parentAmpdoc = env.ampdoc;
+        env.ampdoc = embed.ampdoc;
         configureAmpTestMode(embed.win);
       });
       completePromise = completePromise
@@ -860,9 +882,10 @@ class AmpFixture {
       const {ampdoc} = ret;
       env.ampdoc = ampdoc;
       const promise = Promise.all([
-        env.extensions.installExtensionsInDoc(ampdoc, extensionIds),
+        env.extensions.installExtensionsInDoc(ampdoc, extensions),
         ampdoc.whenReady(),
       ]);
+      ampdoc.setExtensionsKnown();
       completePromise = completePromise
         ? completePromise.then(() => promise)
         : promise;
@@ -874,6 +897,7 @@ class AmpFixture {
   /** @override */
   teardown(env) {
     const {win} = env;
+    resetTrackImpressionPromiseForTesting();
     if (env.embed) {
       env.embed.destroy();
     }
diff --git a/testing/element-v1.js b/testing/element-v1.js
new file mode 100644
index 0000000000000..4fecb3278022b
--- /dev/null
+++ b/testing/element-v1.js
@@ -0,0 +1,177 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {BaseElement} from '../src/base-element';
+
+/**
+ * @type {!Array<{
+ *   name: string,
+ *   test: function(typeof BaseElement):boolean,
+ * }>}
+ */
+const RULES = [
+  {
+    name: 'R1=true',
+    test: (implClass) => implClass.R1() === true,
+  },
+
+  {
+    name: 'Must not have getLayoutPriority',
+    notes: 'Can be replaced with getBuildPriority',
+    test: (implClass) => {
+      const hasLayoutPriority =
+        implClass.prototype.getLayoutPriority !==
+        BaseElement.prototype.getLayoutPriority;
+      const hasBuildPriority =
+        implClass.getBuildPriority !== BaseElement.getBuildPriority;
+      return !hasLayoutPriority || hasBuildPriority;
+    },
+  },
+  {
+    name: 'Must not have preconnectCallback',
+    notes: 'Can be replaced with getPreconnects',
+    test: (implClass) => {
+      const hasCallback =
+        implClass.prototype.preconnectCallback !==
+        BaseElement.prototype.preconnectCallback;
+      return !hasCallback;
+    },
+  },
+  {
+    name: 'Must not have layoutCallback',
+    notes: 'Can be replaced with mountCallback',
+    test: (implClass) => {
+      const hasCallback =
+        implClass.prototype.layoutCallback !==
+        BaseElement.prototype.layoutCallback;
+      return !hasCallback;
+    },
+  },
+  {
+    name: 'Must not have unlayoutCallback',
+    notes: 'Can be replaced with unmountCallback',
+    test: (implClass) => {
+      const hasCallback =
+        implClass.prototype.unlayoutCallback !==
+        BaseElement.prototype.unlayoutCallback;
+      return !hasCallback;
+    },
+  },
+  {
+    name: 'Must not have resumeCallback',
+    test: (implClass) => {
+      const hasCallback =
+        implClass.prototype.resumeCallback !==
+        BaseElement.prototype.resumeCallback;
+      return !hasCallback;
+    },
+  },
+
+  {
+    name: 'If load==true, must also have ensureLoaded',
+    test: (implClass) => {
+      const load = implClass.usesLoading();
+      const hasEnsureLoaded =
+        implClass.prototype.ensureLoaded !== BaseElement.prototype.ensureLoaded;
+      return !load || hasEnsureLoaded;
+    },
+  },
+
+  {
+    name: 'Must not use getLayoutBox',
+    test: (implClass) => {
+      return !sourceIncludes(implClass, 'getLayoutBox');
+    },
+  },
+  {
+    name: 'Must not use getLayoutSize',
+    test: (implClass) => {
+      return !sourceIncludes(implClass, 'getLayoutSize');
+    },
+  },
+
+  {
+    name: 'Must not have renderOutsideViewport',
+    test: (implClass) => {
+      const hasCallback =
+        implClass.prototype.renderOutsideViewport !==
+        BaseElement.prototype.renderOutsideViewport;
+      return !hasCallback;
+    },
+  },
+  {
+    name: 'Must not have idleRenderOutsideViewport',
+    test: (implClass) => {
+      const hasCallback =
+        implClass.prototype.idleRenderOutsideViewport !==
+        BaseElement.prototype.idleRenderOutsideViewport;
+      return !hasCallback;
+    },
+  },
+  {
+    name: 'Must not have isRelayoutNeeded',
+    test: (implClass) => {
+      const hasCallback =
+        implClass.prototype.isRelayoutNeeded !==
+        BaseElement.prototype.isRelayoutNeeded;
+      return !hasCallback;
+    },
+  },
+];
+
+/**
+ * @param {typeof BaseElement} implClass
+ * @param {{
+ *   exceptions: (!Array<string>|undefined),
+ * }=} options
+ */
+export function testElementR1(implClass, options = {}) {
+  const exceptions = options.exceptions || [];
+  RULES.forEach(({name, notes, test}) => {
+    if (exceptions.includes(name)) {
+      expect(test(implClass), 'unused exception: ' + name).to.be.false;
+    } else {
+      expect(test(implClass), name + (notes ? `. ${notes}` : '')).to.be.true;
+    }
+  });
+}
+
+/**
+ * Returns `true` if the class's source contains the given substring.
+ *
+ * @param {typeof BaseElement} implClass
+ * @param {string} substring
+ * @return {boolean}
+ */
+function sourceIncludes(implClass, substring) {
+  const code = [];
+  code.push(implClass.toString());
+  const classProps = Object.getOwnPropertyDescriptors(implClass);
+  for (const k in classProps) {
+    const desc = classProps[k];
+    if (typeof desc.value == 'function') {
+      code.push(desc.value.toString());
+    }
+  }
+  const protoProps = Object.getOwnPropertyDescriptors(implClass.prototype);
+  for (const k in protoProps) {
+    const desc = protoProps[k];
+    if (typeof desc.value == 'function') {
+      code.push(desc.value.toString());
+    }
+  }
+  return code.filter((code) => code.includes(substring)).length > 0;
+}
diff --git a/testing/fake-dom.js b/testing/fake-dom.js
index 923040a607576..d7e4fd59b4ddf 100644
--- a/testing/fake-dom.js
+++ b/testing/fake-dom.js
@@ -63,8 +63,13 @@ export class FakeWindow {
     /** @const */
     this.Promise = window.Promise;
     /** @const */
+    this.IntersectionObserver = window.IntersectionObserver;
+    /** @const */
     this./*OK*/ pageYOffset = window./*OK*/ pageYOffset;
 
+    /** @const */
+    this.IntersectionObserver = window.IntersectionObserver;
+
     /** @const */
     this.crypto = window.crypto || window.msCrypto;
 
@@ -291,6 +296,7 @@ class EventListeners {
     target.eventListeners = new EventListeners();
     const {
       addEventListener: originalAdd,
+      postMessage: originalPostMessage,
       removeEventListener: originalRemove,
     } = target;
     target.addEventListener = function (type, handler, captureOrOpts) {
@@ -305,6 +311,14 @@ class EventListeners {
         originalRemove.apply(target, arguments);
       }
     };
+    target.postMessage = function (type) {
+      const e = new Event('message');
+      e.data = type;
+      target.eventListeners.fire(e);
+      if (originalPostMessage) {
+        originalPostMessage.apply(target, arguments);
+      }
+    };
   }
 
   /** Create empty instance. */
@@ -655,8 +669,6 @@ export class FakeStorage {
     delete this.values[name];
   }
 
-  /**
-   */
   clear() {
     Object.keys(this.values).forEach((name) => {
       delete this.values[name];
diff --git a/testing/iframe.js b/testing/iframe.js
index 7786ae4ca9aeb..6d62944d65b55 100644
--- a/testing/iframe.js
+++ b/testing/iframe.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {AmpEvents} from '../src/amp-events';
+import {AmpEvents} from '../src/core/constants/amp-events';
 import {BindEvents} from '../extensions/amp-bind/0.1/bind-events';
 import {FakeLocation} from './fake-dom';
 import {FormEvents} from '../extensions/amp-form/0.1/form-events';
@@ -22,6 +22,7 @@ import {Services} from '../src/services';
 import {cssText as ampDocCss} from '../build/ampdoc.css';
 import {cssText as ampSharedCss} from '../build/ampshared.css';
 import {deserializeMessage, isAmpMessage} from '../src/3p-frame-messaging';
+import {dev} from '../src/log';
 import {
   installAmpdocServices,
   installRuntimeServices,
@@ -29,7 +30,6 @@ import {
 import {install as installCustomElements} from '../src/polyfills/custom-elements';
 import {installDocService} from '../src/service/ampdoc-impl';
 import {installExtensionsService} from '../src/service/extensions-impl';
-import {installStylesLegacy} from '../src/style-installer';
 import {parseIfNeeded} from '../src/iframe-helper';
 
 let iframeCount = 0;
@@ -65,6 +65,10 @@ export function createFixtureIframe(
   initialIframeHeight,
   opt_beforeLoad
 ) {
+  dev().assertNumber(
+    initialIframeHeight,
+    'Attempted to create fixture iframe with non-numeric height'
+  );
   return new Promise((resolve, reject) => {
     // Counts the supported custom events.
     const events = {
@@ -263,7 +267,7 @@ export function createIframePromise(opt_runtimeOff, opt_beforeLayoutCallback) {
               const iWin = iframe.contentWindow;
               const p = onInsert(iWin)
                 .then(() => {
-                  return element.build();
+                  return element.buildInternal();
                 })
                 .then(() => {
                   if (!element.getPlaceholder()) {
@@ -272,16 +276,22 @@ export function createIframePromise(opt_runtimeOff, opt_beforeLayoutCallback) {
                       element.appendChild(placeholder);
                     }
                   }
+                  const resources = Services.resourcesForDoc(ampdoc);
+                  const resource =
+                    resources.getResourceForElementOptional(element);
+                  if (resource) {
+                    resource.measure();
+                  }
+                })
+                .then(() => {
                   if (element.layoutCount_ == 0) {
                     if (opt_beforeLayoutCallback) {
                       opt_beforeLayoutCallback(element);
                     }
-                    return element.layoutCallback().then(() => {
-                      return element;
-                    });
+                    return element.layoutCallback();
                   }
-                  return element;
-                });
+                })
+                .then(() => element);
               iWin.document.getElementById('parent').appendChild(element);
               return p;
             },
@@ -294,6 +304,44 @@ export function createIframePromise(opt_runtimeOff, opt_beforeLayoutCallback) {
   });
 }
 
+/**
+ * @param {!Document} doc
+ * @param {string} cssText
+ * @param {function()} cb
+ */
+function installStylesLegacy(doc, cssText, cb) {
+  const style = doc.createElement('style');
+  style.textContent = cssText;
+  doc.head.appendChild(style);
+
+  // Styles aren't always available synchronously. E.g. if there is a
+  // pending style download, it will have to finish before the new
+  // style is visible.
+  // For this reason we poll until the style becomes available.
+  // Sync case.
+  const styleLoaded = () => {
+    const sheets = doc.styleSheets;
+    for (let i = 0; i < sheets.length; i++) {
+      const sheet = sheets[i];
+      if (sheet.ownerNode == style) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  if (styleLoaded()) {
+    cb();
+  } else {
+    const interval = setInterval(() => {
+      if (styleLoaded()) {
+        clearInterval(interval);
+        cb();
+      }
+    }, 4);
+  }
+}
+
 export function createServedIframe(src) {
   return new Promise(function (resolve, reject) {
     const iframe = document.createElement('iframe');
@@ -509,12 +557,14 @@ export function expectBodyToBecomeVisible(win, opt_timeout) {
  * Calling `triggerError` on the respective resources makes them
  * appear in error state.
  * @param {!Window} win
+ * @param {!Object} sandbox
  */
-export function doNotLoadExternalResourcesInTest(win) {
+export function doNotLoadExternalResourcesInTest(win, sandbox) {
+  const {document} = win;
   const {prototype} = win.Document;
   const {createElement} = prototype;
-  prototype.createElement = function (tagName) {
-    const element = createElement.apply(this, arguments);
+  sandbox.stub(prototype, 'createElement').callsFake(function (tagName) {
+    const element = createElement.apply(document, arguments);
     tagName = tagName.toLowerCase();
     if (tagName == 'iframe' || tagName == 'img') {
       // Make get/set write to a fake property instead of
@@ -547,7 +597,7 @@ export function doNotLoadExternalResourcesInTest(win) {
       }
     }
     return element;
-  };
+  });
 }
 
 /**
diff --git a/testing/init-tests.js b/testing/init-tests.js
new file mode 100644
index 0000000000000..3bba0c11777af
--- /dev/null
+++ b/testing/init-tests.js
@@ -0,0 +1,199 @@
+/**
+ * Copyright 2015 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';
+
+// These two imports must precede all others.
+import '../src/polyfills';
+import './setup_chai_sinon';
+
+import * as describes from './describes';
+import {Services} from '../src/services';
+import {TestConfig} from './test-config';
+import {activateChunkingForTesting} from '../src/chunk';
+import {adoptWithMultidocDeps} from '../src/runtime';
+import {cancelTimersForTesting} from '../src/service/timer-impl';
+import {configure as configureEnzyme} from 'enzyme';
+import {
+  installAmpdocServices,
+  installRuntimeServices,
+} from '../src/service/core-services';
+import {installDocService} from '../src/service/ampdoc-impl';
+import {installYieldIt} from './yield';
+import {
+  maybeStubConsoleInfoLogWarn,
+  restoreConsoleError,
+  restoreConsoleSandbox,
+  setTestName,
+  setTestRunner,
+  warnForConsoleError,
+} from './console-logging-setup';
+import {preventAsyncErrorThrows} from './async-errors';
+import {removeElement} from '../src/dom';
+import {resetAccumulatedErrorMessagesForTesting} from '../src/error-reporting';
+import {resetEvtListenerOptsSupportForTesting} from '../src/event-helper-listen';
+import {resetExperimentTogglesForTesting} from '../src/experiments';
+import {setDefaultBootstrapBaseUrlForTesting} from '../src/3p-frame';
+import AMP_CONFIG from '../build-system/global-configs/prod-config.json' assert {type: 'json'}; // lgtm[js/syntax-error]
+import PreactEnzyme from 'enzyme-adapter-preact-pure';
+
+/** @fileoverview
+ * This file initializes AMP's Karma + Mocha based unit & integration tests.
+ * TODO(wg-infra): Do a detailed inventory and remove unnecessary steps.
+ */
+
+// This is the entry point for all AMP unit and integration tests. It should be
+// the only globally-invoked function in this file.
+initializeTests();
+
+/**
+ * Initializes the global state required by all AMP unit and integration tests.
+ */
+function initializeTests() {
+  initializeTestConstructs();
+  exposeKarmaConfig();
+  resetTestingState();
+  overrideAmpExtensionInstaller();
+}
+
+/**
+ * Exposes Karma's config constant for use during tests. The regular test runner
+ * uses `karma`, while the debugger uses `__karma__ `.
+ */
+function exposeKarmaConfig() {
+  if (parent.karma && !parent.__karma__) {
+    parent.__karma__ = parent.karma;
+  }
+  window.ampTestRuntimeConfig = parent.__karma__
+    ? parent.__karma__.config.amp
+    : {};
+}
+
+/**
+ * Initializes the constructs with which all test cases are authored.
+ */
+function initializeTestConstructs() {
+  // Allow Mocha's it() to call yield and allow pending promises to resolve.
+  installYieldIt(it);
+
+  // Make Mocha's describe() and it() globally configurable.
+  describe.configure = () => new TestConfig(describe);
+  it.configure = () => new TestConfig(it);
+
+  // Make AMP's custom describes() globally available.
+  global.describes = describes;
+
+  // Set up Mocha's global setup / clean up functions.
+  before(overrideSkipTest);
+  beforeEach(setupTestcase);
+  afterEach(cleanupTestcase);
+}
+
+/**
+ * Overrides AMP.extension() so that extension installation is buffered and
+ * executed just when needed.
+ */
+function overrideAmpExtensionInstaller() {
+  global.AMP.extension = (name, version, installer) =>
+    describes.bufferExtension(`${name}:${version}`, installer);
+}
+
+/**
+ * Overrides skipTest() with a more robust version of `this.skip()`. See #17245.
+ */
+function overrideSkipTest() {
+  this.skipTest = function () {
+    if (!this._runnable.title.startsWith('"before all" hook')) {
+      throw new Error('skipTest() can only be called from within before()');
+    }
+    this.test.parent.pending = true; // Workaround for mochajs/mocha#2683.
+    this.skip();
+  };
+}
+
+/**
+ * Sets up the initial state required by individual test cases.
+ */
+function setupTestcase() {
+  resetTestingState();
+  setTestName(this.currentTest.fullTitle());
+  maybeStubConsoleInfoLogWarn();
+  preventAsyncErrorThrows();
+  warnForConsoleError();
+}
+
+/**
+ * Resets AMP-specific state in the global window object.
+ */
+function resetWindowState() {
+  window.localStorage.clear();
+  window.ENABLE_LOG = false;
+  window.AMP_CONFIG = AMP_CONFIG;
+  window.AMP_DEV_MODE = false;
+  window.context = undefined;
+  window.__AMP_MODE = undefined;
+  window.__AMP_TEST = true;
+  delete window.document['__AMPDOC'];
+}
+
+/**
+ * Resets the window's testing state. Used at the start by initializeTests() and
+ * before each test case by setupTestcase().
+ */
+function resetTestingState() {
+  activateChunkingForTesting();
+  resetWindowState();
+  installDocService(window, /* isSingleDoc */ true);
+  const ampdoc = Services.ampdocServiceFor(window).getSingleDoc();
+  installRuntimeServices(window);
+  installAmpdocServices(ampdoc);
+  Services.resourcesForDoc(ampdoc).ampInitComplete();
+  adoptWithMultidocDeps(window);
+  configureEnzyme({adapter: new PreactEnzyme()});
+}
+
+/**
+ * Cleans up global state added during tests.
+ */
+function cleanupTestcase() {
+  setTestRunner(this);
+  restoreConsoleSandbox();
+  restoreConsoleError();
+  restoreAsyncErrorThrows();
+  cleanupTestPageElements();
+  resetWindowState();
+  setDefaultBootstrapBaseUrlForTesting(null);
+  resetAccumulatedErrorMessagesForTesting();
+  resetExperimentTogglesForTesting(window);
+  resetEvtListenerOptsSupportForTesting();
+  cancelTimersForTesting();
+}
+
+/**
+ * Cleans up any HTML elements that tests might have added to the document.
+ */
+function cleanupTestPageElements() {
+  const cleanupTagNames = ['link', 'meta', 'iframe'];
+  const cleanup = document.querySelectorAll(cleanupTagNames.join(','));
+  for (let i = 0; i < cleanup.length; i++) {
+    try {
+      const element = cleanup[i];
+      removeElement(element);
+    } catch (e) {
+      // This sometimes fails for unknown reasons.
+      console./*OK*/ log(e);
+    }
+  }
+}
diff --git a/testing/intersection-observer-stub.js b/testing/intersection-observer-stub.js
new file mode 100644
index 0000000000000..d8649299f63c4
--- /dev/null
+++ b/testing/intersection-observer-stub.js
@@ -0,0 +1,141 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import {areEqualOrdered} from '../src/core/types/array';
+
+/**
+ * @param {!Object} sandbox
+ * @param {!Window} window
+ * @return {!IntersectionObservers}
+ */
+export function installIntersectionObserverStub(sandbox, win) {
+  return new IntersectionObservers(sandbox, win);
+}
+
+class IntersectionObservers {
+  /**
+   * @param {!Object} sandbox
+   * @param {!Window} win
+   */
+  constructor(sandbox, win) {
+    const observers = new Set();
+    this.observers = observers;
+
+    sandbox
+      .stub(win, 'IntersectionObserver')
+      .value(function (callback, options) {
+        const observer = new IntersectionObserverStub(callback, options, () => {
+          observers.delete(observer);
+        });
+        observers.add(observer);
+        return observer;
+      });
+  }
+
+  /**
+   * @param {!Element} target
+   * @param {{
+   *   root: (!Document|!Element|undefined),
+   *   rootMargin: (string|undefined),
+   *   thresholds: (number|!Array<number>|undefined),
+   * }=} options
+   * @return {boolean}
+   */
+  isObserved(target, options = {}) {
+    return Array.from(this.observers).some((observer) => {
+      if (!observer.elements.has(target)) {
+        return false;
+      }
+      return matchesObserver(observer, options);
+    });
+  }
+
+  /**
+   * @param {!IntersectionObserverEntry|!Array<IntersectionObserverEntry>} entryOrEntries
+   * @param {{
+   *   root: (!Document|!Element|undefined),
+   *   rootMargin: (string|undefined),
+   *   thresholds: (number|!Array<number>|undefined),
+   * }=} options
+   */
+  notifySync(entryOrEntries, options = {}) {
+    const entries = Array.isArray(entryOrEntries)
+      ? entryOrEntries
+      : [entryOrEntries];
+    this.observers.forEach((observer) => {
+      if (!matchesObserver(observer, options)) {
+        return;
+      }
+      const subEntries = entries.filter(({target}) =>
+        observer.elements.has(target)
+      );
+      if (subEntries.length > 0) {
+        observer.callback(subEntries);
+      }
+    });
+  }
+}
+
+class IntersectionObserverStub {
+  constructor(callback, options, onDisconnect) {
+    this.onDisconnect_ = onDisconnect;
+    this.callback = callback;
+    this.elements = new Set();
+
+    options = options || {};
+    this.root = options.root || null;
+    this.rootMargin = options.rootMargin || '0px';
+    this.thresholds =
+      options.threshold != null ? [].concat(options.threshold) : [0];
+  }
+
+  disconnect() {
+    const onDisconnect = this.onDisconnect_;
+    onDisconnect();
+  }
+
+  /**
+   * @param {!Element} element
+   */
+  observe(element) {
+    this.elements.add(element);
+  }
+
+  /**
+   * @param {!Element} element
+   */
+  unobserve(element) {
+    this.elements.delete(element);
+  }
+}
+
+/**
+ * @param {!IntersectionObserverStub} observer
+ * @param {{
+ *   root: (!Document|!Element|undefined),
+ *   rootMargin: (string|undefined),
+ *   thresholds: (number|!Array<number>|undefined),
+ * }} options
+ */
+function matchesObserver(observer, options) {
+  const {root, rootMargin, thresholds} = options;
+  return (
+    (root === undefined || root == observer.root) &&
+    (rootMargin === undefined || rootMargin == observer.rootMargin) &&
+    (thresholds === undefined ||
+      areEqualOrdered(thresholds, observer.thresholds))
+  );
+}
diff --git a/testing/local-amp-chrome-extension/README.md b/testing/local-amp-chrome-extension/README.md
index d894870aabdcc..bc78425201873 100644
--- a/testing/local-amp-chrome-extension/README.md
+++ b/testing/local-amp-chrome-extension/README.md
@@ -18,13 +18,13 @@ limitations under the License.
 
 Install this extension to test existing public AMP docs against the current version in your development tree.
 
-- Please turn this extension off when you aren't currently working on AMP.
-- Should be used as an unpacked extension.
-  - Open chrome://extensions/
-  - Select "Load unpacked extension".
-- Only works with HTTP host pages.
+-   Please turn this extension off when you aren't currently working on AMP.
+-   Should be used as an unpacked extension.
+    -   Open chrome://extensions/
+    -   Select "Load unpacked extension".
+-   Only works with HTTP host pages.
 
-For the basic use case of just proxying all amp js files, you can just run amp locally (via `gulp`), and hit:
+For the basic use case of just proxying all amp js files, you can just run amp locally (via `amp`), and hit:
 http://localhost:8000/proxy/s/url-of-website-you-wish-to-test
 
 For example:
diff --git a/testing/resize-observer-stub.js b/testing/resize-observer-stub.js
new file mode 100644
index 0000000000000..2496b9b73c9d1
--- /dev/null
+++ b/testing/resize-observer-stub.js
@@ -0,0 +1,84 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @param {!Object} sandbox
+ * @param {!Window} window
+ * @return {!ResizeObservers}
+ */
+export function installResizeObserverStub(sandbox, win) {
+  return new ResizeObservers(sandbox, win);
+}
+
+class ResizeObservers {
+  constructor(sandbox, win) {
+    const observers = new Set();
+    this.observers = observers;
+
+    sandbox.stub(win, 'ResizeObserver').value(function (callback) {
+      const observer = new ResizeObserverStub(callback, () => {
+        observers.delete(observer);
+      });
+      observers.add(observer);
+      return observer;
+    });
+  }
+
+  /**
+   * @param {!Element} target
+   * @return {boolean}
+   */
+  isObserved(target) {
+    return Array.from(this.observers).some((observer) =>
+      observer.elements.has(target)
+    );
+  }
+
+  notifySync(entryOrEntries) {
+    const entries = Array.isArray(entryOrEntries)
+      ? entryOrEntries
+      : [entryOrEntries];
+    this.observers.forEach((observer) => {
+      const subEntries = entries.filter(({target}) =>
+        observer.elements.has(target)
+      );
+      if (subEntries.length > 0) {
+        observer.callback(subEntries);
+      }
+    });
+  }
+}
+
+class ResizeObserverStub {
+  constructor(callback, onDisconnect) {
+    this.onDisconnect_ = onDisconnect;
+    this.callback = callback;
+    this.elements = new Set();
+  }
+
+  disconnect() {
+    const onDisconnect = this.onDisconnect_;
+    onDisconnect();
+  }
+
+  observe(element) {
+    this.elements.add(element);
+  }
+
+  unobserve(element) {
+    this.elements.delete(element);
+  }
+}
diff --git a/testing/setup_chai_sinon.js b/testing/setup_chai_sinon.js
new file mode 100644
index 0000000000000..4145ca326c520
--- /dev/null
+++ b/testing/setup_chai_sinon.js
@@ -0,0 +1,123 @@
+/**
+ * Copyright 2021 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.
+ */
+
+import chai from 'chai';
+import chaiAsPromised from 'chai-as-promised';
+import sinon from 'sinon'; // eslint-disable-line local/no-import
+import sinonChai from 'sinon-chai';
+import stringify from 'json-stable-stringify';
+
+chai.use(sinonChai);
+window.chai = chai;
+window.should = chai.should();
+window.expect = chai.expect;
+window.assert = chai.assert;
+window.sinon = sinon;
+
+chai.use(chaiAsPromised);
+
+chai.Assertion.addMethod('attribute', function (attr) {
+  const obj = this._obj;
+  const tagName = obj.tagName.toLowerCase();
+  this.assert(
+    obj.hasAttribute(attr),
+    "expected element '" + tagName + "' to have attribute #{exp}",
+    "expected element '" + tagName + "' to not have attribute #{act}",
+    attr,
+    attr
+  );
+});
+
+chai.Assertion.addMethod('class', function (className) {
+  const obj = this._obj;
+  const tagName = obj.tagName.toLowerCase();
+  this.assert(
+    obj.classList.contains(className),
+    "expected element '" + tagName + "' to have class #{exp}",
+    "expected element '" + tagName + "' to not have class #{act}",
+    className,
+    className
+  );
+});
+
+chai.Assertion.addProperty('visible', function () {
+  const obj = this._obj;
+  const computedStyle = window.getComputedStyle(obj);
+  const visibility = computedStyle.getPropertyValue('visibility');
+  const opacity = computedStyle.getPropertyValue('opacity');
+  const isOpaque = parseInt(opacity, 10) > 0;
+  const tagName = obj.tagName.toLowerCase();
+  this.assert(
+    visibility === 'visible' && isOpaque,
+    "expected element '" +
+      tagName +
+      "' to be #{exp}, got #{act}. with classes: " +
+      obj.className,
+    "expected element '" +
+      tagName +
+      "' not to be #{exp}, got #{act}. with classes: " +
+      obj.className,
+    'visible and opaque',
+    `visibility = ${visibility} and opacity = ${opacity}`
+  );
+});
+
+chai.Assertion.addProperty('hidden', function () {
+  const obj = this._obj;
+  const computedStyle = window.getComputedStyle(obj);
+  const visibility = computedStyle.getPropertyValue('visibility');
+  const opacity = computedStyle.getPropertyValue('opacity');
+  const tagName = obj.tagName.toLowerCase();
+  this.assert(
+    visibility === 'hidden' || parseInt(opacity, 10) == 0,
+    "expected element '" +
+      tagName +
+      "' to be #{exp}, got #{act}. with classes: " +
+      obj.className,
+    "expected element '" +
+      tagName +
+      "' not to be #{act}. with classes: " +
+      obj.className,
+    'hidden',
+    visibility
+  );
+});
+
+chai.Assertion.addMethod('display', function (display) {
+  const obj = this._obj;
+  const value = window.getComputedStyle(obj).getPropertyValue('display');
+  const tagName = obj.tagName.toLowerCase();
+  this.assert(
+    value === display,
+    "expected element '" + tagName + "' to be display #{exp}, got #{act}.",
+    "expected element '" + tagName + "' not to be display #{act}.",
+    display,
+    value
+  );
+});
+
+chai.Assertion.addMethod('jsonEqual', function (compare) {
+  const obj = this._obj;
+  const a = stringify(compare);
+  const b = stringify(obj);
+  this.assert(
+    a == b,
+    'expected JSON to be equal.\nExp: #{exp}\nAct: #{act}',
+    'expected JSON to not be equal.\nExp: #{exp}\nAct: #{act}',
+    a,
+    b
+  );
+});
diff --git a/testing/test-config.js b/testing/test-config.js
new file mode 100644
index 0000000000000..d3eb9b7c23846
--- /dev/null
+++ b/testing/test-config.js
@@ -0,0 +1,176 @@
+/**
+ * Copyright 2021 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';
+
+import {Services} from '../src/services';
+
+/**
+ * Helper class to skip or retry tests under specific environment. Instantiate
+ * using describes.configure(), describe.configure(), or it.configure().
+ *
+ * Example usage:
+ * 1. describes.configure().skipChrome().enableIe().run(name, spec, function);
+ * 2. describe.configure().skipFirefox().skipSafari().run(name, function);
+ * 3. it.configure().skipEdge().run(name, function);
+ */
+export class TestConfig {
+  constructor(runner) {
+    this.runner = runner;
+
+    /**
+     * List of predicate functions that are called before running each test
+     * suite to check whether the suite should be skipped or not.
+     * If any of the functions return 'true', the suite will be skipped.
+     * @type {!Array<function():boolean>}
+     */
+    this.skipMatchers = [];
+
+    /**
+     * List of predicate functions that are called before running each test
+     * suite to check whether the suite should be skipped or not.
+     * If any of the functions return 'false', the suite will be skipped.
+     * @type {!Array<function():boolean>}
+     */
+    this.ifMatchers = [];
+
+    this.platform = Services.platformFor(window);
+
+    this.isModuleBuild = () => !!window.ampTestRuntimeConfig.isModuleBuild;
+
+    /**
+     * Predicate functions that determine whether to run tests on a platform.
+     */
+    this.runOnChrome = this.platform.isChrome.bind(this.platform);
+    this.runOnEdge = this.platform.isEdge.bind(this.platform);
+    this.runOnFirefox = this.platform.isFirefox.bind(this.platform);
+    this.runOnSafari = this.platform.isSafari.bind(this.platform);
+    this.runOnIos = this.platform.isIos.bind(this.platform);
+    this.runOnIe = this.platform.isIe.bind(this.platform);
+
+    /**
+     * By default, IE is skipped. Individual tests may opt in.
+     */
+    this.skip(this.runOnIe);
+  }
+
+  skipModuleBuild() {
+    return this.skip(this.isModuleBuild);
+  }
+
+  skipChrome() {
+    return this.skip(this.runOnChrome);
+  }
+
+  skipEdge() {
+    return this.skip(this.runOnEdge);
+  }
+
+  skipFirefox() {
+    return this.skip(this.runOnFirefox);
+  }
+
+  skipSafari() {
+    return this.skip(this.runOnSafari);
+  }
+
+  skipIos() {
+    return this.skip(this.runOnIos);
+  }
+
+  skipIfPropertiesObfuscated() {
+    return this.skip(function () {
+      return window.__karma__.config.amp.propertiesObfuscated;
+    });
+  }
+
+  enableIe() {
+    this.skipMatchers.splice(this.skipMatchers.indexOf(this.runOnIe), 1);
+    return this;
+  }
+
+  /**
+   * @param {function():boolean} fn
+   */
+  skip(fn) {
+    this.skipMatchers.push(fn);
+    return this;
+  }
+
+  ifModuleBuild() {
+    return this.if(this.isModuleBuild);
+  }
+
+  ifChrome() {
+    return this.if(this.runOnChrome);
+  }
+
+  ifEdge() {
+    return this.if(this.runOnEdge);
+  }
+
+  ifFirefox() {
+    return this.if(this.runOnFirefox);
+  }
+
+  ifSafari() {
+    return this.if(this.runOnSafari);
+  }
+
+  ifIos() {
+    return this.if(this.runOnIos);
+  }
+
+  ifIe() {
+    // It's necessary to first enable IE because we skip it by default.
+    return this.enableIe().if(this.runOnIe);
+  }
+
+  /**
+   * @param {function():boolean} fn
+   */
+  if(fn) {
+    this.ifMatchers.push(fn);
+    return this;
+  }
+
+  isSkipped() {
+    for (let i = 0; i < this.skipMatchers.length; i++) {
+      if (this.skipMatchers[i].call(this)) {
+        return true;
+      }
+    }
+    for (let i = 0; i < this.ifMatchers.length; i++) {
+      if (!this.ifMatchers[i].call(this)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Runs tests after configuration is complete. Variable args because describe
+   * and it use (name, function) while describes uses (name, spec, function).
+   * @param {string} name
+   * @param {...*} args
+   */
+  run(name, ...args) {
+    if (this.isSkipped()) {
+      this.runner.skip(name, ...args);
+      return;
+    }
+    this.runner(name, ...args, /* configured */ true);
+  }
+}
diff --git a/testing/test-helper.js b/testing/test-helper.js
index 646f00372d42e..ff1a5ab139e2c 100644
--- a/testing/test-helper.js
+++ b/testing/test-helper.js
@@ -24,7 +24,6 @@ import {
 } from '../src/service';
 import {getStyle} from '../src/style';
 import {poll} from './iframe';
-import {xhrServiceForTesting} from '../src/service/xhr-impl';
 
 export function stubService(sandbox, win, serviceId, method) {
   // Register if not already registered.
@@ -88,6 +87,21 @@ export function whenCalled(spy, opt_callCount = 1) {
   );
 }
 
+/**
+ * Resolves a promise when the callback returns a truthy value.
+ * @param {function():?} callback
+ * @param {string} errorMessage
+ * @return {!Promise}
+ */
+export function waitFor(callback, errorMessage) {
+  return poll(
+    errorMessage,
+    callback,
+    undefined /* opt_onError */,
+    200 /* opt_timeout */
+  );
+}
+
 const noneValues = {
   'animation-name': ['none', 'initial'],
   'animation-duration': ['0s', 'initial'],
@@ -96,7 +110,7 @@ const noneValues = {
   'animation-iteration-count': ['1', 'initial'],
   'animation-direction': ['normal', 'initial'],
   'animation-fill-mode': ['none', 'initial'],
-  'animation-play-state': ['running', 'initial'],
+  'animation-play-state': ['running', 'initial', /* IE11 */ ''],
 };
 
 /**
@@ -144,8 +158,8 @@ export function assertScreenReaderElement(element, {index = 0} = {}) {
   expect(computedStyle.getPropertyValue('visibility')).to.equal('visible');
 }
 
-// Use a browserId to avoid cross-browser race conditions
-// when testing in Saucelabs.
+// Use a browserId to avoid cross-browser race conditions.
+// TODO(amphtml): Remove browserId now that we no longer test on Sauce Labs.
 /** @const {string} */
 const browserId = (Date.now() + Math.random()).toString(32);
 
@@ -184,30 +198,37 @@ export class RequestBank {
    */
   static withdraw(requestId) {
     const url = `${REQUEST_URL}/withdraw/${requestId}/`;
-    return this.fetch_(url).then((res) => res.json());
+    return RequestBank.fetch_(url, `withdraw(${requestId ?? ''})`).then((res) =>
+      res.json()
+    );
   }
 
   static tearDown() {
     const url = `${REQUEST_URL}/teardown/`;
-    return this.fetch_(url);
+    return RequestBank.fetch_(url, 'tearDown');
   }
 
-  static fetch_(url) {
-    return xhrServiceForTesting(window)
-      .fetchJson(url, {
-        method: 'GET',
-        ampCors: false,
-        credentials: 'omit',
-      })
-      .catch((err) => {
-        if (err.response != null) {
-          return err.response.text().then((msg) => {
-            throw new Error(err.message + ': ' + msg);
-          });
-        } else {
-          throw err;
-        }
-      });
+  static fetch_(url, action, timeout = 10000) {
+    const xhr = fetch(url).then((response) => {
+      const {ok, status, statusText} = response;
+      if (!ok) {
+        throw new Error(
+          `RequestBank.${action}: HTTP ${status} error -- ${statusText}`
+        );
+      }
+      return response;
+    });
+    if (timeout <= 0) {
+      return xhr;
+    }
+    const timer = new Promise((_, reject) => {
+      setTimeout(() => {
+        reject(
+          new Error(`"RequestBank.${action}" timed out after ${timeout} ms.`)
+        );
+      }, timeout);
+    });
+    return Promise.race([xhr, timer]);
   }
 }
 
@@ -223,18 +244,42 @@ export class BrowserController {
     });
   }
 
+  /**
+   * Helper to support providing already-selected elements to methods.
+   * @param {string|Element} selectorOrElement
+   * @return {Element}
+   */
+  querySelectorOrElement(selectorOrElement) {
+    return typeof selectorOrElement == 'string'
+      ? this.rootNode_.querySelector(selectorOrElement)
+      : selectorOrElement;
+  }
+
+  /**
+   * Helper to support providing already-selected elements to methods.
+   * @param {string|Element} selectorOrElement
+   * @return {Array<Element>}
+   */
+  querySelectorAllOrElement(selectorOrElement) {
+    return typeof selectorOrElement == 'string'
+      ? this.rootNode_.querySelectorAll(selectorOrElement)
+      : [selectorOrElement];
+  }
+
   /**
    * @param {string} hostSelector
    * @param {number=} timeout
    * @return {!Promise}
    */
-  waitForShadowRoot(hostSelector, timeout = 10000) {
-    const element = this.rootNode_.querySelector(hostSelector);
+  waitForShadowRoot(hostSelectorOrElement, timeout = 10000) {
+    const element = this.querySelectorOrElement(hostSelectorOrElement);
     if (!element) {
-      throw new Error(`BrowserController query failed: ${hostSelector}`);
+      throw new Error(
+        `BrowserController query failed: ${hostSelectorOrElement}`
+      );
     }
     return poll(
-      `"${hostSelector}" to host shadow doc`,
+      `"${hostSelectorOrElement}" to host shadow doc`,
       () => !!element.shadowRoot,
       /* onError */ undefined,
       timeout
@@ -246,13 +291,13 @@ export class BrowserController {
    * @param {number=} timeout
    * @return {!Promise}
    */
-  waitForElementBuild(selector, timeout = 5000) {
-    const elements = this.rootNode_.querySelectorAll(selector);
+  waitForElementBuild(selectorOrElement, timeout = 5000) {
+    const elements = this.querySelectorAllOrElement(selectorOrElement);
     if (!elements.length) {
-      throw new Error(`BrowserController query failed: ${selector}`);
+      throw new Error(`BrowserController query failed: ${selectorOrElement}`);
     }
     return poll(
-      `"${selector}" to build`,
+      `"${selectorOrElement}" to build`,
       () => {
         const someNotBuilt = [].some.call(elements, (e) =>
           e.classList.contains('i-amphtml-notbuilt')
@@ -269,13 +314,13 @@ export class BrowserController {
    * @param {number=} timeout
    * @return {!Promise}
    */
-  waitForElementLayout(selector, timeout = 10000) {
-    const elements = this.rootNode_.querySelectorAll(selector);
+  waitForElementLayout(selectorOrElement, timeout = 10000) {
+    const elements = this.querySelectorAllOrElement(selectorOrElement);
     if (!elements.length) {
-      throw new Error(`BrowserController query failed: ${selector}`);
+      throw new Error(`BrowserController query failed: ${selectorOrElement}`);
     }
     return poll(
-      `"${selector}" to layout`,
+      `"${selectorOrElement}" to layout`,
       () => {
         // AMP elements set `readyState` to complete when their
         // layoutCallback() promise is resolved.
@@ -290,8 +335,8 @@ export class BrowserController {
     );
   }
 
-  click(selector) {
-    const element = this.rootNode_.querySelector(selector);
+  click(selectorOrElement) {
+    const element = this.querySelectorOrElement(selectorOrElement);
     if (element) {
       element.dispatchEvent(new /*OK*/ CustomEvent('click', {bubbles: true}));
     }
diff --git a/testing/yield.js b/testing/yield.js
index 6223aa884ea41..420efb5f45475 100644
--- a/testing/yield.js
+++ b/testing/yield.js
@@ -21,7 +21,7 @@
  * Check test-yield.js for how-to.
  */
 export function installYieldIt(realIt) {
-  it = enableYield.bind(null, realIt); // eslint-disable-line no-native-reassign, no-undef
+  it = enableYield.bind(null, realIt); // eslint-disable-line no-native-reassign
   it./*OK*/ only = enableYield.bind(null, realIt.only);
   it.skip = realIt.skip;
 }
diff --git a/third_party/OWNERS b/third_party/OWNERS
index 9fd8b9b4fc6ed..d2492f5eef9b3 100644
--- a/third_party/OWNERS
+++ b/third_party/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/third_party/amp-toolbox-cache-url/OWNERS b/third_party/amp-toolbox-cache-url/OWNERS
new file mode 100644
index 0000000000000..a794c2b2ba73b
--- /dev/null
+++ b/third_party/amp-toolbox-cache-url/OWNERS
@@ -0,0 +1,14 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      pattern: '{package.json,package-lock.json}',
+      owners: [
+        {name: 'ampproject/wg-infra', requestReviews: false},
+        {name: 'ampproject/wg-performance', requestReviews: false},
+      ],
+    },
+  ],
+}
diff --git a/third_party/amp-toolbox-cache-url/package.json b/third_party/amp-toolbox-cache-url/package.json
index 7fddc1cf6a729..9a4977d12fb8f 100644
--- a/third_party/amp-toolbox-cache-url/package.json
+++ b/third_party/amp-toolbox-cache-url/package.json
@@ -28,26 +28,26 @@
   "homepage": "https://github.com/ampproject/amp-toolbox#readme",
   "files": ["dist", "package.json", "../LICENSE", "README.md"],
   "dependencies": {
-    "punycode": "^2.1.1",
-    "url-parse": "^1.4.3"
+    "punycode": "2.1.1",
+    "url-parse": "1.5.1"
   },
   "devDependencies": {
-    "@ampproject/rollup-plugin-closure-compiler": "0.25.2",
-    "eslint": "7.0.0",
+    "@ampproject/rollup-plugin-closure-compiler": "0.26.0",
+    "eslint": "7.27.0",
     "eslint-config-google": "0.14.0",
-    "jasmine": "3.5.0",
-    "karma": "5.0.5",
+    "jasmine": "3.7.0",
+    "karma": "6.3.2",
     "karma-chrome-launcher": "3.1.0",
-    "karma-jasmine": "3.3.1",
+    "karma-jasmine": "4.0.1",
     "npm-run-all": "4.1.5",
-    "rollup": "2.15.0",
+    "rollup": "2.50.2",
     "rollup-plugin-commonjs": "10.1.0",
-    "rollup-plugin-filesize": "9.0.0",
-    "rollup-plugin-ignore": "1.0.5",
+    "rollup-plugin-filesize": "9.1.1",
+    "rollup-plugin-ignore": "1.0.9",
     "rollup-plugin-json": "4.0.0",
     "rollup-plugin-node-builtins": "2.1.2",
     "rollup-plugin-node-resolve": "5.2.0",
-    "rollup-plugin-serve": "1.0.1",
-    "semver": "7.3.2"
+    "rollup-plugin-serve": "1.1.0",
+    "semver": "7.3.5"
   }
 }
diff --git a/third_party/ant/LICENSE b/third_party/ant/LICENSE
deleted file mode 100644
index 8e2e6b4e785b7..0000000000000
--- a/third_party/ant/LICENSE
+++ /dev/null
@@ -1,272 +0,0 @@
-/*
- *                                 Apache License
- *                           Version 2.0, January 2004
- *                        http://www.apache.org/licenses/
- *
- *   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
- *
- *   1. Definitions.
- *
- *      "License" shall mean the terms and conditions for use, reproduction,
- *      and distribution as defined by Sections 1 through 9 of this document.
- *
- *      "Licensor" shall mean the copyright owner or entity authorized by
- *      the copyright owner that is granting the License.
- *
- *      "Legal Entity" shall mean the union of the acting entity and all
- *      other entities that control, are controlled by, or are under common
- *      control with that entity. For the purposes of this definition,
- *      "control" means (i) the power, direct or indirect, to cause the
- *      direction or management of such entity, whether by contract or
- *      otherwise, or (ii) ownership of fifty percent (50%) or more of the
- *      outstanding shares, or (iii) beneficial ownership of such entity.
- *
- *      "You" (or "Your") shall mean an individual or Legal Entity
- *      exercising permissions granted by this License.
- *
- *      "Source" form shall mean the preferred form for making modifications,
- *      including but not limited to software source code, documentation
- *      source, and configuration files.
- *
- *      "Object" form shall mean any form resulting from mechanical
- *      transformation or translation of a Source form, including but
- *      not limited to compiled object code, generated documentation,
- *      and conversions to other media types.
- *
- *      "Work" shall mean the work of authorship, whether in Source or
- *      Object form, made available under the License, as indicated by a
- *      copyright notice that is included in or attached to the work
- *      (an example is provided in the Appendix below).
- *
- *      "Derivative Works" shall mean any work, whether in Source or Object
- *      form, that is based on (or derived from) the Work and for which the
- *      editorial revisions, annotations, elaborations, or other modifications
- *      represent, as a whole, an original work of authorship. For the purposes
- *      of this License, Derivative Works shall not include works that remain
- *      separable from, or merely link (or bind by name) to the interfaces of,
- *      the Work and Derivative Works thereof.
- *
- *      "Contribution" shall mean any work of authorship, including
- *      the original version of the Work and any modifications or additions
- *      to that Work or Derivative Works thereof, that is intentionally
- *      submitted to Licensor for inclusion in the Work by the copyright owner
- *      or by an individual or Legal Entity authorized to submit on behalf of
- *      the copyright owner. For the purposes of this definition, "submitted"
- *      means any form of electronic, verbal, or written communication sent
- *      to the Licensor or its representatives, including but not limited to
- *      communication on electronic mailing lists, source code control systems,
- *      and issue tracking systems that are managed by, or on behalf of, the
- *      Licensor for the purpose of discussing and improving the Work, but
- *      excluding communication that is conspicuously marked or otherwise
- *      designated in writing by the copyright owner as "Not a Contribution."
- *
- *      "Contributor" shall mean Licensor and any individual or Legal Entity
- *      on behalf of whom a Contribution has been received by Licensor and
- *      subsequently incorporated within the Work.
- *
- *   2. Grant of Copyright License. Subject to the terms and conditions of
- *      this License, each Contributor hereby grants to You a perpetual,
- *      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
- *      copyright license to reproduce, prepare Derivative Works of,
- *      publicly display, publicly perform, sublicense, and distribute the
- *      Work and such Derivative Works in Source or Object form.
- *
- *   3. Grant of Patent License. Subject to the terms and conditions of
- *      this License, each Contributor hereby grants to You a perpetual,
- *      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
- *      (except as stated in this section) patent license to make, have made,
- *      use, offer to sell, sell, import, and otherwise transfer the Work,
- *      where such license applies only to those patent claims licensable
- *      by such Contributor that are necessarily infringed by their
- *      Contribution(s) alone or by combination of their Contribution(s)
- *      with the Work to which such Contribution(s) was submitted. If You
- *      institute patent litigation against any entity (including a
- *      cross-claim or counterclaim in a lawsuit) alleging that the Work
- *      or a Contribution incorporated within the Work constitutes direct
- *      or contributory patent infringement, then any patent licenses
- *      granted to You under this License for that Work shall terminate
- *      as of the date such litigation is filed.
- *
- *   4. Redistribution. You may reproduce and distribute copies of the
- *      Work or Derivative Works thereof in any medium, with or without
- *      modifications, and in Source or Object form, provided that You
- *      meet the following conditions:
- *
- *      (a) You must give any other recipients of the Work or
- *          Derivative Works a copy of this License; and
- *
- *      (b) You must cause any modified files to carry prominent notices
- *          stating that You changed the files; and
- *
- *      (c) You must retain, in the Source form of any Derivative Works
- *          that You distribute, all copyright, patent, trademark, and
- *          attribution notices from the Source form of the Work,
- *          excluding those notices that do not pertain to any part of
- *          the Derivative Works; and
- *
- *      (d) If the Work includes a "NOTICE" text file as part of its
- *          distribution, then any Derivative Works that You distribute must
- *          include a readable copy of the attribution notices contained
- *          within such NOTICE file, excluding those notices that do not
- *          pertain to any part of the Derivative Works, in at least one
- *          of the following places: within a NOTICE text file distributed
- *          as part of the Derivative Works; within the Source form or
- *          documentation, if provided along with the Derivative Works; or,
- *          within a display generated by the Derivative Works, if and
- *          wherever such third-party notices normally appear. The contents
- *          of the NOTICE file are for informational purposes only and
- *          do not modify the License. You may add Your own attribution
- *          notices within Derivative Works that You distribute, alongside
- *          or as an addendum to the NOTICE text from the Work, provided
- *          that such additional attribution notices cannot be construed
- *          as modifying the License.
- *
- *      You may add Your own copyright statement to Your modifications and
- *      may provide additional or different license terms and conditions
- *      for use, reproduction, or distribution of Your modifications, or
- *      for any such Derivative Works as a whole, provided Your use,
- *      reproduction, and distribution of the Work otherwise complies with
- *      the conditions stated in this License.
- *
- *   5. Submission of Contributions. Unless You explicitly state otherwise,
- *      any Contribution intentionally submitted for inclusion in the Work
- *      by You to the Licensor shall be under the terms and conditions of
- *      this License, without any additional terms or conditions.
- *      Notwithstanding the above, nothing herein shall supersede or modify
- *      the terms of any separate license agreement you may have executed
- *      with Licensor regarding such Contributions.
- *
- *   6. Trademarks. This License does not grant permission to use the trade
- *      names, trademarks, service marks, or product names of the Licensor,
- *      except as required for reasonable and customary use in describing the
- *      origin of the Work and reproducing the content of the NOTICE file.
- *
- *   7. Disclaimer of Warranty. Unless required by applicable law or
- *      agreed to in writing, Licensor provides the Work (and each
- *      Contributor provides its Contributions) on an "AS IS" BASIS,
- *      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
- *      implied, including, without limitation, any warranties or conditions
- *      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
- *      PARTICULAR PURPOSE. You are solely responsible for determining the
- *      appropriateness of using or redistributing the Work and assume any
- *      risks associated with Your exercise of permissions under this License.
- *
- *   8. Limitation of Liability. In no event and under no legal theory,
- *      whether in tort (including negligence), contract, or otherwise,
- *      unless required by applicable law (such as deliberate and grossly
- *      negligent acts) or agreed to in writing, shall any Contributor be
- *      liable to You for damages, including any direct, indirect, special,
- *      incidental, or consequential damages of any character arising as a
- *      result of this License or out of the use or inability to use the
- *      Work (including but not limited to damages for loss of goodwill,
- *      work stoppage, computer failure or malfunction, or any and all
- *      other commercial damages or losses), even if such Contributor
- *      has been advised of the possibility of such damages.
- *
- *   9. Accepting Warranty or Additional Liability. While redistributing
- *      the Work or Derivative Works thereof, You may choose to offer,
- *      and charge a fee for, acceptance of support, warranty, indemnity,
- *      or other liability obligations and/or rights consistent with this
- *      License. However, in accepting such obligations, You may act only
- *      on Your own behalf and on Your sole responsibility, not on behalf
- *      of any other Contributor, and only if You agree to indemnify,
- *      defend, and hold each Contributor harmless for any liability
- *      incurred by, or claims asserted against, such Contributor by reason
- *      of your accepting any such warranty or additional liability.
- *
- *   END OF TERMS AND CONDITIONS
- *
- *   APPENDIX: How to apply the Apache License to your work.
- *
- *      To apply the Apache License to your work, attach the following
- *      boilerplate notice, with the fields enclosed by brackets "[]"
- *      replaced with your own identifying information. (Don't include
- *      the brackets!)  The text should be enclosed in the appropriate
- *      comment syntax for the file format. We also recommend that a
- *      file or class name and description of purpose be included on the
- *      same "printed page" as the copyright notice for easier
- *      identification within third-party archives.
- *
- *   Copyright [yyyy] [name of copyright owner]
- *
- *   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.
- */
-
-W3C® SOFTWARE NOTICE AND LICENSE
-http://www.w3.org/Consortium/Legal/2002/copyright-software-20021231
-
-This work (and included software, documentation such as READMEs, or other
-related items) is being provided by the copyright holders under the following
-license. By obtaining, using and/or copying this work, you (the licensee) agree
-that you have read, understood, and will comply with the following terms and
-conditions.
-
-Permission to copy, modify, and distribute this software and its documentation,
-with or without modification, for any purpose and without fee or royalty is
-hereby granted, provided that you include the following on ALL copies of the
-software and documentation or portions thereof, including modifications:
-
-  1. The full text of this NOTICE in a location viewable to users of the
-     redistributed or derivative work.
-  2. Any pre-existing intellectual property disclaimers, notices, or terms
-     and conditions. If none exist, the W3C Software Short Notice should be
-     included (hypertext is preferred, text is permitted) within the body
-     of any redistributed or derivative code.
-  3. Notice of any changes or modifications to the files, including the date
-     changes were made. (We recommend you provide URIs to the location from
-     which the code is derived.)
-
-THIS SOFTWARE AND DOCUMENTATION IS PROVIDED "AS IS," AND COPYRIGHT HOLDERS MAKE
-NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
-TO, WARRANTIES OF MERCHANTABILITY OR FITNESS FOR ANY PARTICULAR PURPOSE OR THAT
-THE USE OF THE SOFTWARE OR DOCUMENTATION WILL NOT INFRINGE ANY THIRD PARTY
-PATENTS, COPYRIGHTS, TRADEMARKS OR OTHER RIGHTS.
-
-COPYRIGHT HOLDERS WILL NOT BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL OR
-CONSEQUENTIAL DAMAGES ARISING OUT OF ANY USE OF THE SOFTWARE OR DOCUMENTATION.
-
-The name and trademarks of copyright holders may NOT be used in advertising or
-publicity pertaining to the software without specific, written prior permission.
-Title to copyright in this software and any associated documentation will at
-all times remain with copyright holders.
-
-____________________________________
-
-This formulation of W3C's notice and license became active on December 31 2002.
-This version removes the copyright ownership notice such that this license can
-be used with materials other than those owned by the W3C, reflects that ERCIM
-is now a host of the W3C, includes references to this specific dated version of
-the license, and removes the ambiguous grant of "use". Otherwise, this version
-is the same as the previous version and is written so as to preserve the Free
-Software Foundation's assessment of GPL compatibility and OSI's certification
-under the Open Source Definition. Please see our Copyright FAQ for common
-questions about using materials from our site, including specific terms and
-conditions for packages like libwww, Amaya, and Jigsaw. Other questions about
-this notice can be directed to site-policy@w3.org.
-
-Joseph Reagle <site-policy@w3.org>
-
-This license came from: http://www.megginson.com/SAX/copying.html
-  However please note future versions of SAX may be covered
-  under http://saxproject.org/?selected=pd
-
-SAX2 is Free!
-
-I hereby abandon any property rights to SAX 2.0 (the Simple API for
-XML), and release all of the SAX 2.0 source code, compiled code, and
-documentation contained in this distribution into the Public Domain.
-SAX comes with NO WARRANTY or guarantee of fitness for any
-purpose.
-
-David Megginson, david@megginson.com
-2000-05-05
diff --git a/third_party/ant/README.amp b/third_party/ant/README.amp
deleted file mode 100644
index 2dce365a24d0b..0000000000000
--- a/third_party/ant/README.amp
+++ /dev/null
@@ -1,7 +0,0 @@
-URL: https://ant.apache.org/
-License: Apache
-License File: https://www.apache.org/licenses/LICENSE-2.0.txt
-
-Description:
-Copy of `bin/` and `lib/` directories of Apache Ant from release v1.10.6
-https://www-us.apache.org/dist//ant/binaries/apache-ant-1.10.6-bin.zip
diff --git a/third_party/ant/bin/ant b/third_party/ant/bin/ant
deleted file mode 100755
index a15026b9b9afd..0000000000000
--- a/third_party/ant/bin/ant
+++ /dev/null
@@ -1,375 +0,0 @@
-#! /bin/sh
-
-# Licensed to the Apache Software Foundation (ASF) under one or more
-# contributor license agreements.  See the NOTICE file distributed with
-# this work for additional information regarding copyright ownership.
-# The ASF licenses this file to You 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.
-
-# Extract launch and ant arguments, (see details below).
-ant_exec_args=
-no_config=false
-use_jikes_default=false
-ant_exec_debug=false
-show_help=false
-
-if [ -z "$PROTECT_NL" ]; then
-  PROTECT_NL=true
-  os=`uname -s`
-  rel=`uname -r`
-  # heirloom bourne-shell used by Solaris 10 is not POSIX
-  # it lacks features necessary to protect trailing NL from subshell trimming
-  if [ "$os" = SunOS -a "$rel" = "5.10" ]; then
-    PROTECT_NL=false
-  fi
-fi
-
-for arg in "$@"; do
-  if [ "$arg" = "--noconfig" ]; then
-    no_config=true
-  elif [ "$arg" = "--usejikes" ]; then
-    use_jikes_default=true
-  elif [ "$arg" = "--execdebug" ]; then
-    ant_exec_debug=true
-  elif [ my"$arg" = my"--h" -o my"$arg" = my"--help"  ]; then
-    show_help=true
-    ant_exec_args="$ant_exec_args -h"
-  else
-    if [  my"$arg" = my"-h" -o  my"$arg" = my"-help" ]; then
-      show_help=true
-    fi
-
-    if [ "$PROTECT_NL" = "true" ]; then
-      # pad the value with X to protect trailing NLs from subshell output trimming
-      esc_arg="${arg}X"
-    else
-      esc_arg="${arg}"
-    fi
-
-    # wrap all arguments as "" strings, escape any internal back-slash, double-quote, $, or back-tick characters
-    #  use printf to avoid echo interpretation behaviors such as escapes and line continuation
-    # Mac bsd_sed does not support group-0, so pattern uses group-1
-    # Solaris sed only processes lines with trailing newline, passing in an extra newline
-    # subshell (heirloom and posix) will trim the added trailing newline
-    esc_arg="`printf '%s\n' "$esc_arg" | sed -e 's@\([$\"\`\\]\)@\\\\\\1@g' `"
-
-    if [ "$PROTECT_NL" = "true" ]; then
-      # remove the padding X added above, this syntax is POSIX compatible but not heirloom-sh
-      esc_arg="${esc_arg%X}"
-    fi
-    quoted_arg="\"$esc_arg\""
-
-    if $ant_exec_debug; then
-      # using printf to avoid echo line continuation and escape interpretation
-      printf "arg       : %s\n" "$arg"
-      printf "quoted_arg: %s\n" "$quoted_arg"
-    fi
-    ant_exec_args="$ant_exec_args $quoted_arg"
-  fi
-done
-
-# Source/default ant configuration
-if $no_config; then
-  rpm_mode=false
-  usejikes=$use_jikes_default
-else
-  # load system-wide ant configuration (ONLY if ANT_HOME has NOT been set)
-  if [ -z "$ANT_HOME" -o "$ANT_HOME" = "/usr/share/ant" ]; then
-    if [ -f "/etc/ant.conf" ]; then
-      . /etc/ant.conf
-    fi
-  fi
-
-  # load user ant configuration
-  if [ -f "$HOME/.ant/ant.conf" ]; then
-    . $HOME/.ant/ant.conf
-  fi
-  if [ -f "$HOME/.antrc" ]; then
-    . "$HOME/.antrc"
-  fi
-
-  # provide default configuration values
-  if [ -z "$rpm_mode" ]; then
-    rpm_mode=false
-  fi
-  if [ -z "$usejikes" ]; then
-    usejikes=$use_jikes_default
-  fi
-fi
-
-# Setup Java environment in rpm mode
-if $rpm_mode; then
-  if [ -f /usr/share/java-utils/java-functions ]; then
-    . /usr/share/java-utils/java-functions
-    set_jvm
-    set_javacmd
-  fi
-fi
-
-# OS specific support.  $var _must_ be set to either true or false.
-cygwin=false;
-darwin=false;
-mingw=false;
-case "`uname`" in
-  CYGWIN*)
-    cygwin=true
-    ;;
-  Darwin*)
-    darwin=true
-    if [ -z "$JAVA_HOME" ]; then
-      if [ -x '/usr/libexec/java_home' ]; then
-        JAVA_HOME=`/usr/libexec/java_home`
-      elif [ -d "/System/Library/Frameworks/JavaVM.framework/Versions/CurrentJDK/Home" ]; then
-        JAVA_HOME=/System/Library/Frameworks/JavaVM.framework/Versions/CurrentJDK/Home
-      fi
-    fi
-    ;;
-  MINGW*)
-    mingw=true
-    ;;
-esac
-
-if [ -z "$ANT_HOME" -o ! -d "$ANT_HOME" ]; then
-  ## resolve links - $0 may be a link to ant's home
-  PRG="$0"
-  progname=`basename "$0"`
-
-  # need this for relative symlinks
-  while [ -h "$PRG" ]; do
-    ls=`ls -ld "$PRG"`
-    link=`expr "$ls" : '.*-> \(.*\)$'`
-    if expr "$link" : '/.*' > /dev/null; then
-      PRG="$link"
-    else
-      PRG=`dirname "$PRG"`"/$link"
-    fi
-  done
-
-  ANT_HOME=`dirname "$PRG"`/..
-
-  # make it fully qualified
-  ANT_HOME=`cd "$ANT_HOME" > /dev/null && pwd`
-fi
-
-# For Cygwin and Mingw, ensure paths are in UNIX format before
-# anything is touched
-if $cygwin; then
-  [ -n "$ANT_HOME" ] && ANT_HOME=`cygpath --unix "$ANT_HOME"`
-  [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
-fi
-if $mingw; then
-  [ -n "$ANT_HOME" ] && ANT_HOME="`(cd "$ANT_HOME"; pwd)`"
-  [ -n "$JAVA_HOME" ] && JAVA_HOME="`(cd "$JAVA_HOME"; pwd)`"
-fi
-
-# set ANT_LIB location
-ANT_LIB="${ANT_HOME}/lib"
-
-if [ -z "$JAVACMD" ]; then
-  if [ -n "$JAVA_HOME" ]; then
-    # IBM's JDK on AIX uses strange locations for the executables
-    if [ -x "$JAVA_HOME/jre/sh/java" ]; then
-      JAVACMD="$JAVA_HOME/jre/sh/java"
-    elif [ -x "$JAVA_HOME/jre/bin/java" ]; then
-      JAVACMD="$JAVA_HOME/jre/bin/java"
-    else
-      JAVACMD="$JAVA_HOME/bin/java"
-    fi
-  else
-    JAVACMD=`which java 2> /dev/null `
-    if [ -z "$JAVACMD" ]; then
-      JAVACMD=java
-    fi
-  fi
-fi
-
-if [ ! -x "$JAVACMD" ]; then
-  echo "Error: JAVA_HOME is not defined correctly."
-  echo "  We cannot execute $JAVACMD"
-  exit 1
-fi
-
-# Build local classpath using just the launcher in non-rpm mode or
-# use the Jpackage helper in rpm mode with basic and default jars
-# specified in the ant.conf configuration. Because the launcher is
-# used, libraries linked in ANT_HOME/lib will also be included, but this
-# is discouraged as it is not java-version safe. A user should
-# request optional jars and their dependencies via the OPT_JAR_LIST
-# variable
-if $rpm_mode && [ -x /usr/bin/build-classpath ]; then
-  LOCALCLASSPATH="$(/usr/bin/build-classpath ant ant-launcher jaxp_parser_impl xml-commons-apis)"
-
-  # If no optional jars have been specified then build the default list
-  if [ -z "$OPT_JAR_LIST" ]; then
-    for file in /etc/ant.d/*; do
-      if [ -f "$file" ]; then
-        case "$file" in
-          *~|*#*|*.rpmsave|*.rpmnew)
-          ;;
-          *)
-            for dep in `cat "$file"`; do
-              OPT_JAR_LIST="$OPT_JAR_LIST${OPT_JAR_LIST:+ }$dep"
-            done
-          ;;
-        esac
-      fi
-    done
-  fi
-
-  # If the user requested to try to add some other jars to the classpath
-  if [ -n "$OPT_JAR_LIST" ]; then
-    _OPTCLASSPATH="$(/usr/bin/build-classpath $OPT_JAR_LIST 2> /dev/null)"
-    if [ -n "$_OPTCLASSPATH" ]; then
-      LOCALCLASSPATH="$LOCALCLASSPATH:$_OPTCLASSPATH"
-    fi
-  fi
-
-  # Explicitly add javac path to classpath, assume JAVA_HOME set
-  # properly in rpm mode
-  if [ -f "$JAVA_HOME/lib/tools.jar" ]; then
-    LOCALCLASSPATH="$LOCALCLASSPATH:$JAVA_HOME/lib/tools.jar"
-  fi
-  if [ -f "$JAVA_HOME/lib/classes.zip" ]; then
-    LOCALCLASSPATH="$LOCALCLASSPATH:$JAVA_HOME/lib/classes.zip"
-  fi
-
-  # if CLASSPATH_OVERRIDE env var is set, LOCALCLASSPATH will be
-  # user CLASSPATH first and ant-found jars after.
-  # In that case, the user CLASSPATH will override ant-found jars
-  #
-  # if CLASSPATH_OVERRIDE is not set, we'll have the normal behaviour
-  # with ant-found jars first and user CLASSPATH after
-  if [ -n "$CLASSPATH" ]; then
-    # merge local and specified classpath
-    if [ -z "$LOCALCLASSPATH" ]; then
-      LOCALCLASSPATH="$CLASSPATH"
-    elif [ -n "$CLASSPATH_OVERRIDE" ]; then
-      LOCALCLASSPATH="$CLASSPATH:$LOCALCLASSPATH"
-    else
-      LOCALCLASSPATH="$LOCALCLASSPATH:$CLASSPATH"
-    fi
-
-    # remove class path from launcher -cp option
-    CLASSPATH=""
-  fi
-else
-  # not using rpm_mode; use launcher to determine classpaths
-  if [ -z "$LOCALCLASSPATH" ]; then
-    LOCALCLASSPATH=$ANT_LIB/ant-launcher.jar
-  else
-    LOCALCLASSPATH=$ANT_LIB/ant-launcher.jar:$LOCALCLASSPATH
-  fi
-fi
-
-if [ -n "$JAVA_HOME" ]; then
-  # OSX hack to make Ant work with jikes
-  if $darwin; then
-    OSXHACK="${JAVA_HOME}/../Classes"
-    if [ -d "${OSXHACK}" ]; then
-      for i in "${OSXHACK}"/*.jar; do
-        JIKESPATH="$JIKESPATH:$i"
-      done
-    fi
-  fi
-fi
-
-# Allow Jikes support (off by default)
-if $usejikes; then
-  ANT_OPTS="$ANT_OPTS -Dbuild.compiler=jikes"
-fi
-
-# For Cygwin, switch paths to appropriate format before running java
-# For PATHs convert to unix format first, then to windows format to ensure
-# both formats are supported. Probably this will fail on directories with ;
-# in the name in the path. Let's assume that paths containing ; are more
-# rare than windows style paths on cygwin.
-if $cygwin; then
-  if [ "$OS" = "Windows_NT" ] && cygpath -m .>/dev/null 2>/dev/null; then
-    format=mixed
-  else
-    format=windows
-  fi
-  [ -n "$ANT_HOME" ] && ANT_HOME=`cygpath --$format "$ANT_HOME"`
-  ANT_LIB=`cygpath --$format "$ANT_LIB"`
-  [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --$format "$JAVA_HOME"`
-  LCP_TEMP=`cygpath --path --unix "$LOCALCLASSPATH"`
-  LOCALCLASSPATH=`cygpath --path --$format "$LCP_TEMP"`
-  if [ -n "$CLASSPATH" ]; then
-    CP_TEMP=`cygpath --path --unix "$CLASSPATH"`
-    CLASSPATH=`cygpath --path --$format "$CP_TEMP"`
-  fi
-  CYGHOME=`cygpath --$format "$HOME"`
-fi
-
-# Show script help if requested
-if $show_help; then
-  echo $0 '[script options] [options] [target [target2 [target3] ..]]'
-  echo 'Script Options:'
-  echo '  --help, --h            print this message and ant help'
-  echo '  --noconfig             suppress sourcing of /etc/ant.conf,'
-  echo '                         $HOME/.ant/ant.conf, and $HOME/.antrc'
-  echo '                         configuration files'
-  echo '  --usejikes             enable use of jikes by default, unless'
-  echo '                         set explicitly in configuration files'
-  echo '  --execdebug            print ant exec line generated by this'
-  echo '                         launch script'
-  echo ''
-fi
-# add a second backslash to variables terminated by a backslash under cygwin
-if $cygwin; then
-  case "$ANT_HOME" in
-    *\\ )
-      ANT_HOME="$ANT_HOME\\"
-    ;;
-  esac
-  case "$CYGHOME" in
-    *\\ )
-      CYGHOME="$CYGHOME\\"
-    ;;
-  esac
-  case "$JIKESPATH" in
-    *\\ )
-      JIKESPATH="$JIKESPATH\\"
-    ;;
-  esac
-  case "$LOCALCLASSPATH" in
-    *\\ )
-      LOCALCLASSPATH="$LOCALCLASSPATH\\"
-    ;;
-  esac
-  case "$CLASSPATH" in
-    *\\ )
-      CLASSPATH="$CLASSPATH\\"
-    ;;
-  esac
-fi
-# Execute ant using eval/exec to preserve spaces in paths,
-# java options, and ant args
-ant_sys_opts=
-if [ -n "$CYGHOME" ]; then
-  if [ -n "$JIKESPATH" ]; then
-    ant_sys_opts="-Djikes.class.path=\"$JIKESPATH\" -Dcygwin.user.home=\"$CYGHOME\""
-  else
-    ant_sys_opts="-Dcygwin.user.home=\"$CYGHOME\""
-  fi
-else
-  if [ -n "$JIKESPATH" ]; then
-    ant_sys_opts="-Djikes.class.path=\"$JIKESPATH\""
-  fi
-fi
-ant_exec_command="exec \"\$JAVACMD\" $ANT_OPTS -classpath \"\$LOCALCLASSPATH\" -Dant.home=\"\$ANT_HOME\" -Dant.library.dir=\"\$ANT_LIB\" $ant_sys_opts org.apache.tools.ant.launch.Launcher $ANT_ARGS -cp \"\$CLASSPATH\""
-if $ant_exec_debug; then
-  # using printf to avoid echo line continuation and escape interpretation confusion
-  printf "%s\n" "$ant_exec_command $ant_exec_args"
-fi
-
-eval "$ant_exec_command $ant_exec_args"
diff --git a/third_party/ant/bin/ant.bat b/third_party/ant/bin/ant.bat
deleted file mode 100644
index 6fa03af7ac07d..0000000000000
--- a/third_party/ant/bin/ant.bat
+++ /dev/null
@@ -1,218 +0,0 @@
-@echo off
-
-REM  Licensed to the Apache Software Foundation (ASF) under one or more
-REM  contributor license agreements.  See the NOTICE file distributed with
-REM  this work for additional information regarding copyright ownership.
-REM  The ASF licenses this file to You under the Apache License, Version 2.0
-REM  (the "License"); you may not use this file except in compliance with
-REM  the License.  You may obtain a copy of the License at
-REM
-REM      http://www.apache.org/licenses/LICENSE-2.0
-REM
-REM  Unless required by applicable law or agreed to in writing, software
-REM  distributed under the License is distributed on an "AS IS" BASIS,
-REM  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-REM  See the License for the specific language governing permissions and
-REM  limitations under the License.
-
-REM This is an inordinately troublesome piece of code, particularly because it
-REM tries to work on both Win9x and WinNT-based systems. If we could abandon '9x
-REM support, things would be much easier, but sadly, it is not yet time.
-REM Be cautious about editing this, and only add WinNT specific stuff in code that
-REM only runs on WinNT.
-
-if "%HOME%"=="" goto homeDrivePathPre
-if exist "%HOME%\antrc_pre.bat" call "%HOME%\antrc_pre.bat"
-
-:homeDrivePathPre
-if "%HOMEDRIVE%%HOMEPATH%"=="" goto userProfilePre
-if "%HOMEDRIVE%%HOMEPATH%"=="%HOME%" goto userProfilePre
-if exist "%HOMEDRIVE%%HOMEPATH%\antrc_pre.bat" call "%HOMEDRIVE%%HOMEPATH%\antrc_pre.bat"
-
-:userProfilePre
-if "%USERPROFILE%"=="" goto alpha
-if "%USERPROFILE%"=="%HOME%" goto alpha
-if "%USERPROFILE%"=="%HOMEDRIVE%%HOMEPATH%" goto alpha
-if exist "%USERPROFILE%\antrc_pre.bat" call "%USERPROFILE%\antrc_pre.bat"
-
-:alpha
-
-if "%OS%"=="Windows_NT" @setlocal
-if "%OS%"=="WINNT" @setlocal
-
-if "%ANT_HOME%"=="" goto setDefaultAntHome
-
-:stripAntHome
-if not _%ANT_HOME:~-1%==_\ goto checkClasspath
-set ANT_HOME=%ANT_HOME:~0,-1%
-goto stripAntHome
-
-:setDefaultAntHome
-rem %~dp0 is expanded pathname of the current script under NT
-set ANT_HOME=%~dp0..
-
-:checkClasspath
-set _USE_CLASSPATH=yes
-rem CLASSPATH must not be used if it is equal to ""
-if "%CLASSPATH%"=="""" set _USE_CLASSPATH=no
-if "%CLASSPATH%"=="" set _USE_CLASSPATH=no
-
-rem Slurp the command line arguments. This loop allows for an unlimited number
-rem of arguments (up to the command line limit, anyway).
-set ANT_CMD_LINE_ARGS=
-:setupArgs
-if ""%1""=="""" goto doneStart
-if ""%1""==""-noclasspath"" goto clearclasspath
-set ANT_CMD_LINE_ARGS=%ANT_CMD_LINE_ARGS% %1
-shift
-goto setupArgs
-
-rem here is there is a -noclasspath in the options
-:clearclasspath
-set _USE_CLASSPATH=no
-shift
-goto setupArgs
-
-rem This label provides a place for the argument list loop to break out
-rem and for NT handling to skip to.
-
-:doneStart
-
-if "%_USE_CLASSPATH%"=="no" goto findAntHome
-
-:stripClasspath
-if not _%CLASSPATH:~-1%==_\ goto findAntHome
-set CLASSPATH=%CLASSPATH:~0,-1%
-goto stripClasspath
-
-:findAntHome
-rem find ANT_HOME if it does not exist due to either an invalid value passed
-rem by the user or the %0 problem on Windows 9x
-if exist "%ANT_HOME%\lib\ant.jar" goto checkJava
-
-rem check for ant in Program Files
-if not exist "%ProgramFiles%\ant" goto checkSystemDrive
-set ANT_HOME=%ProgramFiles%\ant
-goto checkJava
-
-:checkSystemDrive
-rem check for ant in root directory of system drive
-if not exist %SystemDrive%\ant\lib\ant.jar goto checkCDrive
-set ANT_HOME=%SystemDrive%\ant
-goto checkJava
-
-:checkCDrive
-rem check for ant in C:\ant for Win9X users
-if not exist C:\ant\lib\ant.jar goto noAntHome
-set ANT_HOME=C:\ant
-goto checkJava
-
-:noAntHome
-echo ANT_HOME is set incorrectly or ant could not be located. Please set ANT_HOME.
-goto end
-
-:checkJava
-set _JAVACMD=%JAVACMD%
-
-if "%JAVA_HOME%" == "" goto noJavaHome
-if not exist "%JAVA_HOME%\bin\java.exe" goto noJavaHome
-if "%_JAVACMD%" == "" set _JAVACMD=%JAVA_HOME%\bin\java.exe
-goto checkJikes
-
-:noJavaHome
-if "%_JAVACMD%" == "" set _JAVACMD=java.exe
-
-:checkJikes
-if not "%JIKESPATH%"=="" goto runAntWithJikes
-
-:runAnt
-if "%_USE_CLASSPATH%"=="no" goto runAntNoClasspath
-:runAntWithClasspath
-"%_JAVACMD%" %ANT_OPTS% -classpath "%ANT_HOME%\lib\ant-launcher.jar" "-Dant.home=%ANT_HOME%" org.apache.tools.ant.launch.Launcher %ANT_ARGS% -cp "%CLASSPATH%" %ANT_CMD_LINE_ARGS%
-rem Check the error code of the Ant build
-if not "%OS%"=="Windows_NT" goto onError
-set ANT_ERROR=%ERRORLEVEL%
-goto end
-
-:runAntNoClasspath
-"%_JAVACMD%" %ANT_OPTS% -classpath "%ANT_HOME%\lib\ant-launcher.jar" "-Dant.home=%ANT_HOME%" org.apache.tools.ant.launch.Launcher %ANT_ARGS% %ANT_CMD_LINE_ARGS%
-rem Check the error code of the Ant build
-if not "%OS%"=="Windows_NT" goto onError
-set ANT_ERROR=%ERRORLEVEL%
-goto end
-
-:runAntWithJikes
-
-if not _%JIKESPATH:~-1%==_\ goto checkJikesAndClasspath
-set JIKESPATH=%JIKESPATH:~0,-1%
-goto runAntWithJikes
-
-:checkJikesAndClasspath
-
-if "%_USE_CLASSPATH%"=="no" goto runAntWithJikesNoClasspath
-
-:runAntWithJikesAndClasspath
-"%_JAVACMD%" %ANT_OPTS% -classpath "%ANT_HOME%\lib\ant-launcher.jar" "-Dant.home=%ANT_HOME%" "-Djikes.class.path=%JIKESPATH%" org.apache.tools.ant.launch.Launcher %ANT_ARGS%  -cp "%CLASSPATH%" %ANT_CMD_LINE_ARGS%
-rem Check the error code of the Ant build
-if not "%OS%"=="Windows_NT" goto onError
-set ANT_ERROR=%ERRORLEVEL%
-goto end
-
-:runAntWithJikesNoClasspath
-"%_JAVACMD%" %ANT_OPTS% -classpath "%ANT_HOME%\lib\ant-launcher.jar" "-Dant.home=%ANT_HOME%" "-Djikes.class.path=%JIKESPATH%" org.apache.tools.ant.launch.Launcher %ANT_ARGS% %ANT_CMD_LINE_ARGS%
-rem Check the error code of the Ant build
-if not "%OS%"=="Windows_NT" goto onError
-set ANT_ERROR=%ERRORLEVEL%
-goto end
-
-:onError
-rem Windows 9x way of checking the error code.  It matches via brute force.
-for %%i in (1 10 100) do set err%%i=
-for %%i in (0 1 2) do if errorlevel %%i00 set err100=%%i
-if %err100%==2 goto onError200
-if %err100%==0 set err100=
-for %%i in (0 1 2 3 4 5 6 7 8 9) do if errorlevel %err100%%%i0 set err10=%%i
-if "%err100%"=="" if %err10%==0 set err10=
-:onError1
-for %%i in (0 1 2 3 4 5 6 7 8 9) do if errorlevel %err100%%err10%%%i set err1=%%i
-goto onErrorEnd
-:onError200
-for %%i in (0 1 2 3 4 5) do if errorlevel 2%%i0 set err10=%%i
-if err10==5 for %%i in (0 1 2 3 4 5) do if errorlevel 25%%i set err1=%%i
-if not err10==5 goto onError1
-:onErrorEnd
-set ANT_ERROR=%err100%%err10%%err1%
-for %%i in (1 10 100) do set err%%i=
-
-:end
-rem bug ID 32069: resetting an undefined env variable changes the errorlevel.
-if not "%_JAVACMD%"=="" set _JAVACMD=
-if not "%_ANT_CMD_LINE_ARGS%"=="" set ANT_CMD_LINE_ARGS=
-
-if "%ANT_ERROR%"=="0" goto mainEnd
-
-goto omega
-
-:mainEnd
-
-rem If there were no errors, we run the post script.
-if "%OS%"=="Windows_NT" @endlocal
-if "%OS%"=="WINNT" @endlocal
-
-if "%HOME%"=="" goto homeDrivePathPost
-if exist "%HOME%\antrc_post.bat" call "%HOME%\antrc_post.bat"
-
-:homeDrivePathPost
-if "%HOMEDRIVE%%HOMEPATH%"=="" goto userProfilePost
-if "%HOMEDRIVE%%HOMEPATH%"=="%HOME%" goto userProfilePost
-if exist "%HOMEDRIVE%%HOMEPATH%\antrc_post.bat" call "%HOMEDRIVE%%HOMEPATH%\antrc_post.bat"
-
-:userProfilePost
-if "%USERPROFILE%"=="" goto omega
-if "%USERPROFILE%"=="%HOME%" goto omega
-if "%USERPROFILE%"=="%HOMEDRIVE%%HOMEPATH%" goto omega
-if exist "%USERPROFILE%\antrc_post.bat" call "%USERPROFILE%\antrc_post.bat"
-
-:omega
-
-exit /b %ANT_ERROR%
diff --git a/third_party/ant/bin/ant.cmd b/third_party/ant/bin/ant.cmd
deleted file mode 100644
index aba19a85ab4e6..0000000000000
--- a/third_party/ant/bin/ant.cmd
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
-
-    Run ant
-*/
-
-'@echo off'
-parse arg mode envarg '::' antarg
-
-if mode\='.' & mode\='..' & mode\='/' then do
-  envarg = mode envarg
-  mode = ''
-end
-
-if antarg = '' then do
-  antarg = envarg
-  envarg = ''
-end
-
-x = setlocal()
-
-env="OS2ENVIRONMENT"
-antenv = _getenv_('antenv')
-if _testenv_() = 0 then interpret 'call "' || antenv || '"' '"' || envarg || '"'
-
-if mode = '' then mode = _getenv_('ANT_MODE' '..')
-if mode \= '/' then do
-  runrc = _getenv_('runrc')
-  antrc = _getenv_('antrc' 'antrc.cmd')
-  if mode = '..' then mode = '-r'
-  else mode = ''
-  interpret 'call "' || runrc || '"' antrc '"' || mode || '"'
-end
-
-if _testenv_() = 0 then do
-  say 'Ant environment is not set properly'
-  x = endlocal()
-  exit 16
-end
-
-settings = '-Dant.home=' || ANT_HOME '-Djava.home=' || JAVA_HOME
-
-java = _getenv_('javacmd' 'java')
-opts = value('ANT_OPTS',,env)
-args = value('ANT_ARGS',,env)
-lcp = value('LOCALCLASSPATH',,env)
-cp = value('CLASSPATH',,env)
-if value('ANT_USE_CP',,env) \= '' then do
-  if lcp \= '' & right(lcp, 1) \= ';' then lcp = lcp || ';'
-  lcp = lcp || cp
-  'SET CLASSPATH='
-end
-if lcp\='' then lcp = '-classpath' lcp
-
-cmd = java opts lcp '-jar' ANT_HOME ||'\lib\ant-launcher.jar' settings args antarg
-launcher = stream(ANT_HOME ||'\lib\ant-launcher.jar', 'C', 'query exists')
-if launcher = '' then entry = 'org.apache.tools.ant.Main'
-else entry = 'org.apache.tools.ant.launch.Launcher'
-java opts lcp entry settings args antarg
-
-x = endlocal()
-
-return rc
-
-_testenv_: procedure expose env ANT_HOME JAVA_HOME
-ANT_HOME = value('ANT_HOME',,env)
-if ANT_HOME = '' then return 0
-JAVA_HOME = value('JAVA_HOME',,env)
-if JAVA_HOME = '' then return 0
-cp = translate(value('CLASSPATH',,env))
-if pos(translate(ANT_HOME), cp) = 0 then return 0
-if pos(translate(JAVA_HOME), cp) = 0 then return 0
-return 1
-
-_getenv_: procedure expose env
-parse arg envar default
-if default = '' then default = envar
-var = value(translate(envar),,env)
-if var = '' then var = default
-return var
diff --git a/third_party/ant/bin/antRun b/third_party/ant/bin/antRun
deleted file mode 100755
index 8110f86efea38..0000000000000
--- a/third_party/ant/bin/antRun
+++ /dev/null
@@ -1,24 +0,0 @@
-#! /bin/sh
-
-# Licensed to the Apache Software Foundation (ASF) under one or more
-# contributor license agreements.  See the NOTICE file distributed with
-# this work for additional information regarding copyright ownership.
-# The ASF licenses this file to You 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.
-
-# Args: DIR command
-cd "$1"
-CMD="$2"
-shift
-shift
-
-exec "$CMD" "$@"
diff --git a/third_party/ant/bin/antRun.bat b/third_party/ant/bin/antRun.bat
deleted file mode 100644
index 5def560871666..0000000000000
--- a/third_party/ant/bin/antRun.bat
+++ /dev/null
@@ -1,49 +0,0 @@
-@echo off
-
-REM  Licensed to the Apache Software Foundation (ASF) under one or more
-REM  contributor license agreements.  See the NOTICE file distributed with
-REM  this work for additional information regarding copyright ownership.
-REM  The ASF licenses this file to You under the Apache License, Version 2.0
-REM  (the "License"); you may not use this file except in compliance with
-REM  the License.  You may obtain a copy of the License at
-REM
-REM      http://www.apache.org/licenses/LICENSE-2.0
-REM
-REM  Unless required by applicable law or agreed to in writing, software
-REM  distributed under the License is distributed on an "AS IS" BASIS,
-REM  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-REM  See the License for the specific language governing permissions and
-REM  limitations under the License.
-
-if "%OS%"=="Windows_NT" @setlocal
-if "%OS%"=="WINNT" @setlocal
-
-if ""%1""=="""" goto runCommand
-
-rem Change drive and directory to %1
-if "%OS%"=="Windows_NT" goto nt_cd
-if "%OS%"=="WINNT" goto nt_cd
-cd ""%1""
-goto end_cd
-:nt_cd
-cd /d ""%1""
-:end_cd
-shift
-
-rem Slurp the command line arguments. This loop allows for an unlimited number
-rem of arguments (up to the command line limit, anyway).
-set ANT_RUN_CMD=%1
-if ""%1""=="""" goto runCommand
-shift
-:loop
-if ""%1""=="""" goto runCommand
-set ANT_RUN_CMD=%ANT_RUN_CMD% %1
-shift
-goto loop
-
-:runCommand
-rem echo %ANT_RUN_CMD%
-%ANT_RUN_CMD%
-
-if "%OS%"=="Windows_NT" @endlocal
-if "%OS%"=="WINNT" @endlocal
diff --git a/third_party/ant/bin/antRun.pl b/third_party/ant/bin/antRun.pl
deleted file mode 100755
index bc493ddf02d4b..0000000000000
--- a/third_party/ant/bin/antRun.pl
+++ /dev/null
@@ -1,61 +0,0 @@
-#!/usr/bin/perl
-#
-# Licensed to the Apache Software Foundation (ASF) under one or more
-#  contributor license agreements.  See the NOTICE file distributed with
-#  this work for additional information regarding copyright ownership.
-#  The ASF licenses this file to You 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.
-#
-#######################################################################
-#
-# antRun.pl
-#
-# wrapper script for invoking commands on a platform with Perl installed
-# this is akin to antRun.bat, and antRun the SH script
-#######################################################################
-#be fussy about variables
-use strict;
-
-#turn warnings on during dev; generates a few spurious uninitialised var access warnings
-#use warnings;
-
-#and set $debug to 1 to turn on trace info (currently unused)
-my $debug = 1;
-
-#######################################################################
-# change drive and directory to "%1"
-my $ANT_RUN_CMD = @ARGV[0];
-
-# assign current run command to "%2"
-chdir(@ARGV[0]) || die "Can't cd to $ARGV[0]: $!\n";
-if ($^O eq "NetWare") {
-    # There is a bug in Perl 5 on NetWare, where chdir does not
-    # do anything.  On NetWare, the following path-prefixed form should
-    # always work. (afaict)
-    $ANT_RUN_CMD .= "/" . @ARGV[1];
-} else {
-    $ANT_RUN_CMD = @ARGV[1];
-}
-
-# dispose of the first two arguments, leaving only the command's args.
-shift;
-shift;
-
-# run the command
-my $returnValue = system $ANT_RUN_CMD, @ARGV;
-if ($returnValue eq 0) {
-    exit 0;
-} else {
-    # only 0 and 1 are widely recognized as exit values
-    # so change the exit value to 1
-    exit 1;
-}
diff --git a/third_party/ant/bin/antenv.cmd b/third_party/ant/bin/antenv.cmd
deleted file mode 100644
index a5a30c1935d53..0000000000000
--- a/third_party/ant/bin/antenv.cmd
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
-*/
-
-'@echo off'
-call RxFuncAdd "SysLoadFuncs", "RexxUtil", "SysLoadFuncs"
-call SysLoadFuncs
-
-/* Prepare the parameters for later use */
-parse arg argv
-mode = ''
-args = ''
-opts = ''
-cp = ''
-lcp = ''
-
-do i = 1 to words(argv)
-  param = word(argv, i)
-  select
-    when param='-lcp' then mode = 'l'
-    when param='-cp' | param='-classpath' then mode = 'c'
-    when abbrev('-opts', param, 4) then mode = 'o'
-    when abbrev('-args', param, 4) then mode = 'a'
-  otherwise
-    select
-      when mode = 'a' then args = space(args param, 1)
-      when mode = 'c' then cp = space(cp param, 1)
-      when mode = 'l' then lcp = space(lcp param, 1)
-      when mode = 'o' then opts = space(opts param, 1)
-    otherwise
-      say 'Option' param 'ignored'
-    end
-  end
-end
-
-env="OS2ENVIRONMENT"
-antconf = _getenv_('antconf' 'antconf.cmd')
-runrc = _getenv_('runrc')
-interpret 'call "' || runrc || '"' '"' || antconf || '"' 'ETC'
-ANT_HOME = value('ANT_HOME',,env)
-JAVA_HOME = value('JAVA_HOME',,env)
-classpath = value('CLASSPATH',,env)
-classes = stream(JAVA_HOME || "\lib\classes.zip", "C", "QUERY EXISTS")
-if classes \= '' then classpath = prepend(classpath classes)
-classes = stream(JAVA_HOME || "\lib\tools.jar", "C", "QUERY EXISTS")
-if classes \= '' then classpath = prepend(classpath classes)
-
-classpath = prepend(classpath ANT_HOME || '\lib\ant-launcher.jar')
-'SET CLASSPATH=' || classpath
-
-/* Setting classpathes, options and arguments */
-envset = _getenv_('envset')
-if cp\=''   then interpret 'call "' || envset || '"' '"; CLASSPATH"' '"' || cp || '"'
-if lcp\=''  then interpret 'call "' || envset || '"' '"; LOCALCLASSPATH"' '"' || lcp || '"'
-if opts\='' then interpret 'call "' || envset || '"' '"-D ANT_OPTS"' '"' || opts || '"'
-if args\='' then interpret 'call "' || envset || '"' '"ANT_ARGS"' '"' || args || '"'
-
-exit 0
-
-addpath: procedure
-parse arg path elem
-if elem = '' then do
-  if path\='' & right(path, 1)\=';' then path = path || ';'
-  return path
-end
-if substr(path, length(path)) = ';' then glue = ''
-else glue = ';'
-if pos(translate(elem), translate(path)) = 0 then path = path || glue || elem || ';'
-return path
-
-prepend: procedure
-parse arg path elem
-if elem = '' then do
-  if path\='' & right(path, 1)\=';' then path = path || ';'
-  return path
-end
-if pos(translate(elem), translate(path)) = 0 then path = elem || ';' || path
-return path
-
-_getenv_: procedure expose env
-parse arg envar default
-if default = '' then default = envar
-var = value(translate(envar),,env)
-if var = '' then var = default
-return var
diff --git a/third_party/ant/bin/complete-ant-cmd.pl b/third_party/ant/bin/complete-ant-cmd.pl
deleted file mode 100755
index 47e3c0eee1d0b..0000000000000
--- a/third_party/ant/bin/complete-ant-cmd.pl
+++ /dev/null
@@ -1,114 +0,0 @@
-#!/usr/bin/perl
-#
-#  Licensed to the Apache Software Foundation (ASF) under one or more
-#  contributor license agreements.  See the NOTICE file distributed with
-#  this work for additional information regarding copyright ownership.
-#  The ASF licenses this file to You 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.
-#
-# A script to allow Bash or Z-Shell to complete an Ant command-line.
-#
-# To install for Bash 2.0 or better, add the following to ~/.bashrc:
-#
-#     complete -C complete-ant-cmd.pl ant build.sh
-#
-# To install for Z-Shell 2.5 or better, add the following to ~/.zshrc:
-#
-#     function ant_complete () {
-#         local args_line args
-#         read -l args_line
-#         set -A args $args_line
-#         set -A reply $(COMP_LINE=$args_line complete-ant-cmd.pl ${args[1]} $1)
-#     }
-#     compctl -K ant_complete ant build.sh
-
-my $cmdLine = "$ENV{'ANT_ARGS'} $ENV{'COMP_LINE'}";
-my $antCmd = $ARGV[0];
-my $word = $ARGV[1];
-
-my @completions;
-if ($word =~ /^-/) {
-    list(restrict($word, getArguments()));
-} elsif ($cmdLine =~ /-(f|file|buildfile)\s+\S*$/) {
-    list(getBuildFiles($word));
-} else {
-    list(restrict($word, getTargets()));
-}
-
-exit(0);
-
-sub list {
-    for (@_) {
-        print "$_\n";
-    }
-}
-
-sub restrict {
-    my ($word, @completions) = @_;
-    grep(/^\Q$word\E/, @completions);
-}
-
-sub getArguments {
-    qw(-buildfile -debug -emacs -f -file -find -help -listener -logfile
-       -logger -projecthelp -quiet -verbose -version);
-}
-
-
-sub getBuildFiles {
-    my ($word) = @_;
-    grep(/\.xml$/, glob("$word*"));
-}
-
-sub getTargets {
-
-    # Look for build-file
-    my $buildFile = 'build.xml';
-    if ($cmdLine =~ /-(f|file|buildfile)\s+(\S+)(?!.*\s-(f|file|buildfile)\s)/) {
-        $buildFile = $2;
-    }
-    return () unless (-f $buildFile);
-
-    # Run "ant -projecthelp -debug" to list targets (-debug is required to get
-    # "Other targets", i.e. targets without a description).  Keep a cache of
-    # results in a cache-file.
-    my $cacheFile = $buildFile;
-    $cacheFile =~ s|(.*/)?(.*)|${1}.ant-targets-${2}|;
-    if ((!-e $cacheFile) || (-z $cacheFile) || (-M $buildFile) < (-M $cacheFile)) {
-        open(CACHE, '>' . $cacheFile) || die "can\'t write $cacheFile: $!\n";
-        open(HELP, "$antCmd -projecthelp -debug -buildfile '$buildFile'|") || return();
-        my %targets;
-        while (<HELP>) {
-            # Exclude target names starting with dash, because they cannot be
-            # specified on the command line.
-            if (/^\s+\+Target:\s+(?!-)(\S+)/) {
-                $targets{$1}++;
-            }
-        }
-        my @targets = sort keys %targets;
-        for (@targets) {
-            print CACHE "$_\n";
-        }
-        return @targets;
-    }
-
-    # Read the target-cache
-    open(CACHE, $cacheFile) || die "can\'t read $cacheFile: $!\n";
-    my @targets;
-    while (<CACHE>) {
-        chop;
-        s/\r$//;  # for Cygwin
-        push(@targets, $_);
-    }
-    close(CACHE);
-    @targets;
-
-}
diff --git a/third_party/ant/bin/envset.cmd b/third_party/ant/bin/envset.cmd
deleted file mode 100644
index 3149be4ce4103..0000000000000
--- a/third_party/ant/bin/envset.cmd
+++ /dev/null
@@ -1,131 +0,0 @@
-/*
-
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
-
-SET environment variables
-First optional parameter:
-   ;     parameters are considered parts of a path variable, semicolons are
-         appended to each element if not already present
-   -D    parameters are properties for Java or Makefile etc., -D will be
-         prepended and the parameters will be separated by a space
-   =D    the same as above but equal sign is not required
-   ,     parameters should be comma separated in the environment variable
-   -     parameters should be separated by the next parameter
-   Other values mean that the first parameter is missing and the environment
-   variable will be set to the space separated parameters
-
-Second parameter: name of the environment variable
-
-Next parameters: values
-; implies that the equal sign is considered a part of the parameter and is
-not interpreted
-
--D requires parameters in the form name=value. If the equal sign is not found,
-the parameters are changed to name=expanded_name
-
-Other options have optional equal sign. If it is found, only the part after
-the equal sign will be oprionally expanded.
-
-If the parameter is the minus sign, the next parameter will not be expanded.
-If the parameter is a single dot, it will be replaced with the value of the
-environment variable as it existed before envset was invoked.
-
-For other parameters the batch looks for the environment variable with the
-same name (in uppercase). If it is found, it forms the expanded_name. If
-the environment variable with such a name does not exist, the expanded_name
-will hold the parameter name without case conversion.
-*/
-
-parse arg mode envar args
-
-equal = 0
-sep = ' '
-
-/* Parse command line parameters */
-select
-  when mode='-' then do
-    sep = envar
-    parse var args envar args
-  end
-  when mode=';' then do
-    sep = ''
-    equal = -1
-  end
-  when mode='-D' then equal = 1
-  when mode='=D' then mode = '-D'
-  when mode=',' then sep = ','
-otherwise
-  args = envar args
-  envar = mode
-  mode = ''
-end
-
-env = 'OS2ENVIRONMENT'
-envar = translate(envar)
-orig = value(envar,,env)
-newval = ''
-expand = 1
-
-/* for each parameter... */
-do i = 1 to words(args)
-  if expand > 0 & word(args, i) = '-' then expand = 0
-  else call addval word(args, i)
-end
-
-/* Optionally enclose path variable by quotes */
-if mode = ';' & pos(' ', newval) > 0 then newval = '"' || newval || '"'
-
-/* Set the new value, 'SET' cannot be used since it does not allow '=' */
-x = value(envar, newval, env)
-exit 0
-
-addval: procedure expose sep equal orig expand newval mode env
-parse arg var
-
-if var = '.' then expvar = orig
-else do
-  if equal >= 0 then do
-    parse var var name '=' val
-    if val = '' then var = name
-    else var = val
-  end
-  if expand = 0 then expvar = var
-  else expvar = value(translate(var),,env)
-  if expvar = '' then expvar = var
-  if equal >= 0 then do
-    if val = '' then do
-      parse var expvar key '=' val
-      if val <> '' then name = key
-      else do
-        if equal > 0 then val = key
-        else name = key
-      end
-    end
-    else val = expvar
-    if pos(' ', val) > 0 | pos('=', val) > 0 then val = '"' || val || '"'
-    if val = '' then expvar = name
-    else expvar = name || '=' || val
-  end
-  if mode = '-D' then expvar = '-D' || expvar
-  if mode = ';' then do
-    if right(expvar, 1) <> ';' then expvar = expvar || ';'
-  end
-end
-
-if newval = '' then newval = expvar
-else newval = newval || sep || expvar
-expand = 1
-return
diff --git a/third_party/ant/bin/lcp.bat b/third_party/ant/bin/lcp.bat
deleted file mode 100644
index 9fc03e7f74a5f..0000000000000
--- a/third_party/ant/bin/lcp.bat
+++ /dev/null
@@ -1,30 +0,0 @@
-REM
-REM  Licensed to the Apache Software Foundation (ASF) under one or more
-REM  contributor license agreements.  See the NOTICE file distributed with
-REM  this work for additional information regarding copyright ownership.
-REM  The ASF licenses this file to You under the Apache License, Version 2.0
-REM  (the "License"); you may not use this file except in compliance with
-REM  the License.  You may obtain a copy of the License at
-REM
-REM      http://www.apache.org/licenses/LICENSE-2.0
-REM
-REM  Unless required by applicable law or agreed to in writing, software
-REM  distributed under the License is distributed on an "AS IS" BASIS,
-REM  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-REM  See the License for the specific language governing permissions and
-REM  limitations under the License.
-REM
-REM
-
-set _CLASSPATHCOMPONENT=%1
-if ""%1""=="""" goto gotAllArgs
-shift
-
-:argCheck
-if ""%1""=="""" goto gotAllArgs
-set _CLASSPATHCOMPONENT=%_CLASSPATHCOMPONENT% %1
-shift
-goto argCheck
-
-:gotAllArgs
-set LOCALCLASSPATH=%LOCALCLASSPATH%;%_CLASSPATHCOMPONENT%
diff --git a/third_party/ant/bin/runant.pl b/third_party/ant/bin/runant.pl
deleted file mode 100755
index b6c72e9f8ff3e..0000000000000
--- a/third_party/ant/bin/runant.pl
+++ /dev/null
@@ -1,132 +0,0 @@
-#!/usr/bin/perl
-#
-# Licensed to the Apache Software Foundation (ASF) under one or more
-#  contributor license agreements.  See the NOTICE file distributed with
-#  this work for additional information regarding copyright ownership.
-#  The ASF licenses this file to You 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.
-#
-#######################################################################
-#
-# runant.pl
-#
-# wrapper script for invoking ant in a platform with Perl installed
-# this may include cgi-bin invocation, which is considered somewhat daft.
-# (slo: that should be a separate file which can be derived from this
-# and returns the XML formatted output)
-#
-# the code is not totally portable due to classpath and directory splitting
-# issues. oops. (NB, use File::Spec::Functions  will help and the code is
-# structured for the catfile() call, but because of perl version funnies
-# the code is not included.
-#######################################################################
-#
-# Assumptions:
-#
-# - the "java" executable/script is on the command path
-# - ANT_HOME has been set
-# - target platform uses ":" as classpath separator or perl indicates it is dos/win32
-# - target platform uses "/" as directory separator.
-
-#be fussy about variables
-use strict;
-
-#platform specifics (disabled)
-#use File::Spec::Functions;
-
-#turn warnings on during dev; generates a few spurious uninitialised var access warnings
-#use warnings;
-
-#and set $debug to 1 to turn on trace info
-my $debug = 1;
-
-#######################################################################
-#
-# check to make sure environment is setup
-#
-
-my $HOME = $ENV{ANT_HOME};
-if (!$HOME) {
-    die "\n\nANT_HOME *MUST* be set!\n\n";
-}
-
-my $JAVACMD = $ENV{JAVACMD} || "java";
-
-my $onnetware = ($^O eq "NetWare");
-
-my $oncygwin = ($^O eq "cygwin");
-
-#ISSUE: what java wants to split up classpath varies from platform to platform
-#and perl is not too hot at hinting which box it is on.
-#here I assume ":" 'cept on win32, dos, and netware. Add extra tests here as needed.
-my $s = ":";
-if (($^O eq "MSWin32") || ($^O eq "dos") || $oncygwin || $onnetware) {
-    $s = ";";
-}
-
-#build up standard classpath
-my $localpath = "$HOME/lib/ant-launcher.jar";
-#set JVM options and Ant arguments, if any
-my @ANT_OPTS = split(" ", $ENV{ANT_OPTS});
-my @ANT_ARGS = split(" ", $ENV{ANT_ARGS});
-
-#jikes
-if ($ENV{JIKESPATH}) {
-    push @ANT_OPTS, "-Djikes.class.path=$ENV{JIKESPATH}";
-}
-
-#construct arguments to java
-my @ARGS;
-push @ARGS, @ANT_OPTS;
-
-my $CYGHOME = "";
-
-my $classpath = $ENV{CLASSPATH};
-if ($oncygwin) {
-    $localpath = `cygpath --path --windows $localpath`;
-    chomp ($localpath);
-    if ($classpath) {
-        $classpath = `cygpath --path --windows "$classpath"`;
-        chomp ($classpath);
-    }
-    $HOME = `cygpath --path --windows $HOME`;
-    chomp ($HOME);
-    $CYGHOME = `cygpath --path --windows $ENV{HOME}`;
-    chomp ($CYGHOME);
-}
-push @ARGS, "-classpath", "$localpath";
-push @ARGS, "-Dant.home=$HOME";
-if ($CYGHOME) {
-    push @ARGS, "-Dcygwin.user.home=\"$CYGHOME\""
-}
-push @ARGS, "org.apache.tools.ant.launch.Launcher", @ANT_ARGS;
-push @ARGS, @ARGV;
-if ($classpath) {
-    if ($onnetware) {
-        # make classpath literally $CLASSPATH
-        # this is to avoid pushing us over the 512 character limit
-        # even skip the ; - that is already in $localpath
-        push @ARGS, "-lib", "\$CLASSPATH";
-    } else {
-        push @ARGS, "-lib", "$classpath";
-    }
-}
-print "\n $JAVACMD @ARGS\n\n" if ($debug);
-
-my $returnValue = system $JAVACMD, @ARGS;
-if ($returnValue eq 0) {
-    exit 0;
-} else {
-    # only 0 and 1 are widely recognized as exit values
-    # so change the exit value to 1
-    exit 1;
-}
diff --git a/third_party/ant/bin/runant.py b/third_party/ant/bin/runant.py
deleted file mode 100755
index a0b27645df109..0000000000000
--- a/third_party/ant/bin/runant.py
+++ /dev/null
@@ -1,105 +0,0 @@
-#!/usr/bin/python
-# Licensed to the Apache Software Foundation (ASF) under one or more
-#  contributor license agreements.  See the NOTICE file distributed with
-#  this work for additional information regarding copyright ownership.
-#  The ASF licenses this file to You 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.
-#
-
-"""
-
- runant.py
-
-    This script is a translation of the runant.pl
-    It runs ant with/out arguments, it should be quite portable (thanks to
-    the python os library)
-    This script has been tested with Python2.0/Win2K
-
- Assumptions:
-
- - the "java" executable/script is on the command path
-"""
-import os, os.path, string, sys
-
-# Change it to 1 to get extra debug information
-debug = 0
-
-#######################################################################
-
-# If ANT_HOME is not set default to script's parent directory
-if os.environ.has_key('ANT_HOME'):
-    ANT_HOME = os.environ['ANT_HOME']
-else:
-    ANT_HOME = os.path.dirname(os.path.dirname(os.path.abspath(sys.argv[0])))
-
-# set ANT_LIB location
-ANT_LIB = os.path.join(ANT_HOME, 'lib')
-
-# set JAVACMD (check variables JAVACMD and JAVA_HOME)
-JAVACMD = None
-if not os.environ.has_key('JAVACMD'):
-    if os.environ.has_key('JAVA_HOME'):
-        if not os.path.exists(os.environ['JAVA_HOME']):
-            print "Warning: JAVA_HOME is not defined correctly."
-        else:
-            JAVA_HOME = os.environ['JAVA_HOME']
-            while JAVA_HOME[0] == JAVA_HOME[-1] == "\"":
-                JAVA_HOME = JAVA_HOME[1:-1]
-            JAVACMD = os.path.join(JAVA_HOME, 'bin', 'java')
-    else:
-        print "Warning: JAVA_HOME not set."
-else:
-    JAVACMD = os.environ['JAVACMD']
-if not JAVACMD:
-    JAVACMD = 'java'
-
-launcher_jar = os.path.join(ANT_LIB, 'ant-launcher.jar')
-if not os.path.exists(launcher_jar):
-    print 'Warning: Unable to locate ant-launcher.jar. Expected to find it in %s' % \
-        ANT_LIB
-
-# Build up standard classpath (LOCALCLASSPATH)
-LOCALCLASSPATH = launcher_jar
-if os.environ.has_key('LOCALCLASSPATH'):
-    LOCALCLASSPATH += os.pathsep + os.environ['LOCALCLASSPATH']
-
-ANT_OPTS = ""
-if os.environ.has_key('ANT_OPTS'):
-    ANT_OPTS = os.environ['ANT_OPTS']
-
-OPTS = ""
-if os.environ.has_key('JIKESPATH'):
-    OPTS = '-Djikes.class.path=\"%s\"' % os.environ['JIKESPATH']
-
-ANT_ARGS = ""
-if os.environ.has_key('ANT_ARGS'):
-    ANT_ARGS = os.environ['ANT_ARGS']
-
-CLASSPATH = ""
-if os.environ.has_key('CLASSPATH'):
-    CLASSPATH = "-lib " + os.environ['CLASSPATH']
-
-while JAVACMD[0] == JAVACMD[-1] == "\"":
-    JAVACMD = JAVACMD[1:-1]
-
-# Builds the commandline
-cmdline = ('"%s" %s -classpath %s -Dant.home=%s %s ' + \
-    'org.apache.tools.ant.launch.Launcher %s %s %s') \
-     % (JAVACMD, ANT_OPTS, LOCALCLASSPATH, ANT_HOME, OPTS, ANT_ARGS, \
-        CLASSPATH, string.join(sys.argv[1:], ' '))
-
-if debug:
-    print '\n%s\n\n' % (cmdline)
-sys.stdout.flush()
-
-# Run the biniou!
-os.system(cmdline)
diff --git a/third_party/ant/bin/runrc.cmd b/third_party/ant/bin/runrc.cmd
deleted file mode 100644
index ee2f103db975c..0000000000000
--- a/third_party/ant/bin/runrc.cmd
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
-
-   Run RC file, name is in the first arg, second arg is either PATH
-   ENV or -r or nothing
-*/
-
-parse arg name path rest
-
-if name = '' then do
-  say 'RC file name is missing'
-  exit 1
-end
-
-if rest \= '' then do
-  say 'Too many parameters'
-  exit 1
-end
-
-call runit name path
-exit 0
-
-runit: procedure
-parse arg name path dir
-
-if path \= '' & path \= '-r' then do
-  dir = value(translate(path),,'OS2ENVIRONMENT')
-  if dir = '' then return
-  dir = translate(dir, '\', '/') /* change UNIX-like path to OS/2 */
-end
-
-if dir = '' then dir = directory()
-
-if path = '-r' then do /* recursive call */
-  subdir = filespec('path', dir)
-  if subdir \= '\' then do
-    subdir = left(subdir, length(subdir)-1)
-    call runit name path filespec('drive', dir) || subdir
-  end
-end
-
-/* Look for the file and run it */
-if right(dir, 1) \= '\' then dir = dir || '\'
-rcfile = stream(dir || name, 'c', 'query exists')
-if rcfile \= '' then interpret 'call "' || rcfile || '"'
-
-return
diff --git a/third_party/ant/lib/README b/third_party/ant/lib/README
deleted file mode 100644
index 67e37ce736b36..0000000000000
--- a/third_party/ant/lib/README
+++ /dev/null
@@ -1,3 +0,0 @@
-Please refer to the Ant manual under Installing Ant / Library
-Dependencies for a list of the jar requirements for various optional
-tasks and features.
diff --git a/third_party/ant/lib/ant-antlr.jar b/third_party/ant/lib/ant-antlr.jar
deleted file mode 100644
index 88ce2055cca2c..0000000000000
Binary files a/third_party/ant/lib/ant-antlr.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-antlr.pom b/third_party/ant/lib/ant-antlr.pom
deleted file mode 100644
index 3650f275ff234..0000000000000
--- a/third_party/ant/lib/ant-antlr.pom
+++ /dev/null
@@ -1,115 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-antlr</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + ANTLR</name>
-  <description>antlr specific task.
-    The implementation forks a java process, therefore the antlr jar file is only needed at runtime</description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <optional>true</optional>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>antlr</groupId>
-      <artifactId>antlr</artifactId>
-      <version>2.7.7</version>
-      <optional>true</optional>
-      <scope>runtime</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/taskdefs/optional/ANTLR*</include>
-          </includes>
-          <testIncludes>
-            <include>org/apache/tools/ant/taskdefs/optional/ANTLR*</include>
-          </testIncludes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-surefire-plugin</artifactId>
-        <configuration>
-          <basedir>../../../..</basedir>
-          <workingDirectory>../../../..</workingDirectory>
-          <systemProperties>
-            <property>
-              <name>ant.test.basedir.ignore</name>
-              <value>true</value>
-            </property>
-          </systemProperties>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/tests/junit</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-apache-bcel.jar b/third_party/ant/lib/ant-apache-bcel.jar
deleted file mode 100644
index 1b93621cac01b..0000000000000
Binary files a/third_party/ant/lib/ant-apache-bcel.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-apache-bcel.pom b/third_party/ant/lib/ant-apache-bcel.pom
deleted file mode 100644
index 772a235b86d98..0000000000000
--- a/third_party/ant/lib/ant-apache-bcel.pom
+++ /dev/null
@@ -1,112 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-apache-bcel</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + BCEL</name>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>org.apache.bcel</groupId>
-      <artifactId>bcel</artifactId>
-      <version>6.2</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/filters/util/JavaClassHelper*</include>
-            <include>org/apache/tools/ant/util/depend/bcel/*</include>
-          </includes>
-          <testIncludes>
-            <exclude>org/apache/tools/ant/types/optional/depend/ClassFileSet*</exclude>
-          </testIncludes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-surefire-plugin</artifactId>
-        <configuration>
-          <basedir>../../../..</basedir>
-          <workingDirectory>../../../..</workingDirectory>
-          <systemProperties>
-            <property>
-              <name>ant.test.basedir.ignore</name>
-              <value>true</value>
-            </property>
-          </systemProperties>
-        </configuration>
-      </plugin>
-    </plugins>
-      <resources>
-          <resource>
-              <directory>../../../..</directory>
-              <targetPath>META-INF</targetPath>
-              <includes>
-                  <include>LICENSE</include>
-                  <include>NOTICE</include>
-              </includes>
-          </resource>
-      </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/tests/junit</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-apache-bsf.jar b/third_party/ant/lib/ant-apache-bsf.jar
deleted file mode 100644
index 03c809b044903..0000000000000
Binary files a/third_party/ant/lib/ant-apache-bsf.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-apache-bsf.pom b/third_party/ant/lib/ant-apache-bsf.pom
deleted file mode 100644
index 3d8a92f96f79d..0000000000000
--- a/third_party/ant/lib/ant-apache-bsf.pom
+++ /dev/null
@@ -1,95 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-apache-bsf</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + BSF</name>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>bsf</groupId>
-      <artifactId>bsf</artifactId>
-      <version>2.4.0</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/util/ScriptRunner.java</include>
-            <include>org/apache/tools/ant/util/optional/ScriptRunner.java</include>
-          </includes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/testcases</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-apache-log4j.jar b/third_party/ant/lib/ant-apache-log4j.jar
deleted file mode 100644
index eb4bfd32b0fd7..0000000000000
Binary files a/third_party/ant/lib/ant-apache-log4j.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-apache-log4j.pom b/third_party/ant/lib/ant-apache-log4j.pom
deleted file mode 100644
index 039caa22af4d0..0000000000000
--- a/third_party/ant/lib/ant-apache-log4j.pom
+++ /dev/null
@@ -1,93 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>  
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-apache-log4j</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + Log4J</name>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>log4j</groupId>
-      <artifactId>log4j</artifactId>
-      <version>1.2.17</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/listener/Log4jListener*</include>
-          </includes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/testcases</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-apache-oro.jar b/third_party/ant/lib/ant-apache-oro.jar
deleted file mode 100644
index 432544e779300..0000000000000
Binary files a/third_party/ant/lib/ant-apache-oro.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-apache-oro.pom b/third_party/ant/lib/ant-apache-oro.pom
deleted file mode 100644
index b4f74669c30e2..0000000000000
--- a/third_party/ant/lib/ant-apache-oro.pom
+++ /dev/null
@@ -1,98 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-apache-oro</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + Apache Oro</name>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>oro</groupId>
-      <artifactId>oro</artifactId>
-      <version>2.0.8</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/util/regexp/JakartaOro*</include>
-          </includes>
-          <testIncludes>
-            <include>org/apache/tools/ant/util/regexp/JakartaOro*</include>
-            <include>org/apache/tools/ant/util/regexp/Regexp*</include>
-          </testIncludes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/tests/junit</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-apache-regexp.jar b/third_party/ant/lib/ant-apache-regexp.jar
deleted file mode 100644
index d2aa20f40cea8..0000000000000
Binary files a/third_party/ant/lib/ant-apache-regexp.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-apache-regexp.pom b/third_party/ant/lib/ant-apache-regexp.pom
deleted file mode 100644
index 3df1f114b06dc..0000000000000
--- a/third_party/ant/lib/ant-apache-regexp.pom
+++ /dev/null
@@ -1,97 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-apache-regexp</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + Apache Regexp</name>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>jakarta-regexp</groupId>
-      <artifactId>jakarta-regexp</artifactId>
-      <version>1.4</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/util/regexp/JakartaRegexp*</include>
-          </includes>
-          <testIncludes>
-            <include>org/apache/tools/ant/util/regexp/JakartaRegexp*</include>
-          </testIncludes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/tests/junit</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-  
-</project>
diff --git a/third_party/ant/lib/ant-apache-resolver.jar b/third_party/ant/lib/ant-apache-resolver.jar
deleted file mode 100644
index e1b3f11988c43..0000000000000
Binary files a/third_party/ant/lib/ant-apache-resolver.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-apache-resolver.pom b/third_party/ant/lib/ant-apache-resolver.pom
deleted file mode 100644
index 39847d9b5a62b..0000000000000
--- a/third_party/ant/lib/ant-apache-resolver.pom
+++ /dev/null
@@ -1,93 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-apache-resolver</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + Apache Resolver</name>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>xml-resolver</groupId>
-      <artifactId>xml-resolver</artifactId>
-      <version>1.2</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/types/resolver/*.java</include>
-          </includes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/testcases</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-apache-xalan2.jar b/third_party/ant/lib/ant-apache-xalan2.jar
deleted file mode 100644
index a441ddc1880d5..0000000000000
Binary files a/third_party/ant/lib/ant-apache-xalan2.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-apache-xalan2.pom b/third_party/ant/lib/ant-apache-xalan2.pom
deleted file mode 100644
index 93b544e8371ad..0000000000000
--- a/third_party/ant/lib/ant-apache-xalan2.pom
+++ /dev/null
@@ -1,129 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>  
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-apache-xalan2</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + Xalan 2</name>
-  <description>contains Xalan2-specific features</description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>xalan</groupId>
-      <artifactId>xalan</artifactId>
-      <version>2.7.2</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/taskdefs/optional/Xalan2TraceSupport*</include>
-          </includes>
-          <testIncludes>
-            <include>org/apache/tools/ant/taskdefs/optional/TraXLiaison*</include>
-          </testIncludes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-surefire-plugin</artifactId>
-        <configuration>
-          <basedir>../../../..</basedir>
-          <workingDirectory>../../../..</workingDirectory>
-          <systemProperties>
-            <property>
-              <name>ant.test.basedir.ignore</name>
-              <value>true</value>
-            </property>
-          </systemProperties>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-resources-plugin</artifactId>
-        <version>3.1.0</version>
-        <configuration>
-          <encoding>ISO-8859-1</encoding>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <testResources>
-      <testResource>
-        <directory>../../../../src/etc/testcases</directory>
-        <includes>
-          <include>taskdefs/optional/xalan*</include>
-          <include>taskdefs/optional/xsltliaison*</include>
-        </includes>
-        <filtering>true</filtering>
-      </testResource>
-    </testResources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/tests/junit</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-commons-logging.jar b/third_party/ant/lib/ant-commons-logging.jar
deleted file mode 100644
index 7addc9f96b8c3..0000000000000
Binary files a/third_party/ant/lib/ant-commons-logging.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-commons-logging.pom b/third_party/ant/lib/ant-commons-logging.pom
deleted file mode 100644
index bb9be04354986..0000000000000
--- a/third_party/ant/lib/ant-commons-logging.pom
+++ /dev/null
@@ -1,94 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-commons-logging</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + Commons Logging</name>
-  <description>Ant Listener based on commons-logging</description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>commons-logging</groupId>
-      <artifactId>commons-logging-api</artifactId>
-      <version>1.1</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/listener/CommonsLoggingListener*</include>
-          </includes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/testcases</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-commons-net.jar b/third_party/ant/lib/ant-commons-net.jar
deleted file mode 100644
index 10589d9f9e73d..0000000000000
Binary files a/third_party/ant/lib/ant-commons-net.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-commons-net.pom b/third_party/ant/lib/ant-commons-net.pom
deleted file mode 100644
index f6e698d26e716..0000000000000
--- a/third_party/ant/lib/ant-commons-net.pom
+++ /dev/null
@@ -1,109 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-commons-net</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + Commons Net</name>
-  <description>ftp, rexec and telnet tasks</description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>commons-net</groupId>
-      <artifactId>commons-net</artifactId>
-      <version>3.6</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/taskdefs/optional/net/FTP*</include>
-            <include>org/apache/tools/ant/taskdefs/optional/net/RExec*</include>
-            <include>org/apache/tools/ant/taskdefs/optional/net/TelnetTask*</include>
-          </includes>
-          <testIncludes>
-            <include>org/apache/tools/ant/taskdefs/optional/net/FTP*</include>
-          </testIncludes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-surefire-plugin</artifactId>
-        <configuration>
-          <basedir>../../../..</basedir>
-          <workingDirectory>../../../..</workingDirectory>
-          <!-- tests assume an FTP server listening on localhost -->
-          <skipTests>true</skipTests>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/tests/junit</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-imageio.jar b/third_party/ant/lib/ant-imageio.jar
deleted file mode 100644
index 94879104e6342..0000000000000
Binary files a/third_party/ant/lib/ant-imageio.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-imageio.pom b/third_party/ant/lib/ant-imageio.pom
deleted file mode 100644
index e59626d02f047..0000000000000
--- a/third_party/ant/lib/ant-imageio.pom
+++ /dev/null
@@ -1,107 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-imageio</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + ImageIO</name>
-  <description>imageio task and corresponding types.</description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/taskdefs/optional/image/ImageIOTask.java</include>
-            <include>org/apache/tools/ant/types/optional/imageio/*</include>
-          </includes>
-          <testIncludes>
-            <include>org/apache/tools/ant/taskdefs/optional/image/ImageIOTest.java</include>
-          </testIncludes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-surefire-plugin</artifactId>
-        <configuration>
-          <basedir>../../../..</basedir>
-          <workingDirectory>../../../..</workingDirectory>
-          <systemProperties>
-            <property>
-              <name>ant.test.basedir.ignore</name>
-              <value>true</value>
-            </property>
-          </systemProperties>
-       </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/tests/junit</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-jai.jar b/third_party/ant/lib/ant-jai.jar
deleted file mode 100644
index 7e61559316248..0000000000000
Binary files a/third_party/ant/lib/ant-jai.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-jai.pom b/third_party/ant/lib/ant-jai.pom
deleted file mode 100644
index a71b4fcdbf25d..0000000000000
--- a/third_party/ant/lib/ant-jai.pom
+++ /dev/null
@@ -1,126 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-jai</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + JAI</name>
-  <description>image task and corresponding types.
-  </description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>javax.media</groupId>
-      <artifactId>jai-core</artifactId>
-      <version>1.1.3</version>
-    </dependency>
-    <dependency>
-      <groupId>com.sun.media</groupId>
-      <artifactId>jai-codec</artifactId>
-      <version>1.1.3</version>
-    </dependency>
-  </dependencies>
-  <!-- Central has javax.media:jai-core:1.1.3 but only com.sun.media:jai-codec:1.1.2_01 -->
-  <repositories>
-    <repository>
-      <id>jboss</id>
-      <name>JBoss</name>
-      <url>https://repository.jboss.org/nexus/content/groups/public/</url>
-    </repository>
-  </repositories>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/taskdefs/optional/image/Image.java</include>
-            <include>org/apache/tools/ant/types/optional/image/*</include>
-          </includes>
-          <testIncludes>
-            <include>org/apache/tools/ant/taskdefs/optional/image/ImageTest.java</include>
-          </testIncludes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-surefire-plugin</artifactId>
-        <configuration>
-          <basedir>../../../..</basedir>
-          <workingDirectory>../../../..</workingDirectory>
-          <systemProperties>
-            <property>
-              <name>ant.test.basedir.ignore</name>
-              <value>true</value>
-            </property>
-          </systemProperties>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/tests/junit</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-javamail.jar b/third_party/ant/lib/ant-javamail.jar
deleted file mode 100644
index a9cadd4fce0f8..0000000000000
Binary files a/third_party/ant/lib/ant-javamail.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-javamail.pom b/third_party/ant/lib/ant-javamail.pom
deleted file mode 100644
index dff1e3d89b619..0000000000000
--- a/third_party/ant/lib/ant-javamail.pom
+++ /dev/null
@@ -1,98 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-javamail</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + JavaMail</name>
-  <description>implementation of the mail task based on javamail.
-    Required to send emails to SMTP servers using user/password combinations
-  or to send mail over SSL</description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <!-- This brings in the necessary dependencies.
-      See https://javaee.github.io/javamail/#Download_JavaMail_Release -->
-      <groupId>com.sun.mail</groupId>
-      <artifactId>javax.mail</artifactId>
-      <version>1.6.1</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/taskdefs/email/MimeMailer*</include>
-          </includes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/testcases</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-jdepend.jar b/third_party/ant/lib/ant-jdepend.jar
deleted file mode 100644
index c77bf9b3e1b3b..0000000000000
Binary files a/third_party/ant/lib/ant-jdepend.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-jdepend.pom b/third_party/ant/lib/ant-jdepend.pom
deleted file mode 100644
index ede97119bbef6..0000000000000
--- a/third_party/ant/lib/ant-jdepend.pom
+++ /dev/null
@@ -1,118 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>  
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-jdepend</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + JDepend</name>
-  <description>task jdepend invoking the jdepend parser. There is also a version 2.9.1 of the
-    jdepend parser available on the maven repository</description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>jdepend</groupId>
-      <artifactId>jdepend</artifactId>
-      <version>2.9.1</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/taskdefs/optional/jdepend/</include>
-          </includes>
-          <testIncludes>
-            <include>org/apache/tools/ant/taskdefs/optional/jdepend/</include>
-            <include>org/apache/tools/ant/util/facade/</include>
-          </testIncludes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-surefire-plugin</artifactId>
-        <configuration>
-          <basedir>../../../..</basedir>
-          <workingDirectory>../../../..</workingDirectory>
-          <systemProperties>
-            <property>
-              <name>build.tests.value</name>
-              <value>${project.basedir}/../../../../target/${project.artifactId}/testcases</value>
-            </property>
-            <property>
-              <name>ant.test.basedir.ignore</name>
-              <value>true</value>
-            </property>
-          </systemProperties>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/tests/junit</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-jmf.jar b/third_party/ant/lib/ant-jmf.jar
deleted file mode 100644
index 72f680e69412b..0000000000000
Binary files a/third_party/ant/lib/ant-jmf.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-jmf.pom b/third_party/ant/lib/ant-jmf.pom
deleted file mode 100644
index b58aa16125a5f..0000000000000
--- a/third_party/ant/lib/ant-jmf.pom
+++ /dev/null
@@ -1,89 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>  
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-jmf</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + JMF</name>
-  <description>contains the sound task and a soundplayer listener
-    download the dependency from http://java.sun.com/products/java-media/jmf/</description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/taskdefs/optional/sound/*</include>
-          </includes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/testcases</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-  </project>
diff --git a/third_party/ant/lib/ant-jsch.jar b/third_party/ant/lib/ant-jsch.jar
deleted file mode 100644
index 527e095608c02..0000000000000
Binary files a/third_party/ant/lib/ant-jsch.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-jsch.pom b/third_party/ant/lib/ant-jsch.pom
deleted file mode 100644
index 393eb05efafc2..0000000000000
--- a/third_party/ant/lib/ant-jsch.pom
+++ /dev/null
@@ -1,112 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>  
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-jsch</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + JSch</name>
-  <description>contains the sshexec and scp tasks
-  </description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>com.jcraft</groupId>
-      <artifactId>jsch</artifactId>
-      <version>0.1.55</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/taskdefs/optional/ssh/*</include>
-          </includes>
-          <testIncludes>
-            <include>org/apache/tools/ant/taskdefs/optional/ssh/*</include>
-          </testIncludes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-surefire-plugin</artifactId>
-        <configuration>
-          <basedir>../../../..</basedir>
-          <workingDirectory>../../../..</workingDirectory>
-          <systemProperties>
-            <property>
-              <name>scp.tmp</name>
-              <value>${java.io.tmpdir}</value>
-            </property>
-          </systemProperties>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/tests/junit</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-junit.jar b/third_party/ant/lib/ant-junit.jar
deleted file mode 100644
index 76701078bf5fd..0000000000000
Binary files a/third_party/ant/lib/ant-junit.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-junit.pom b/third_party/ant/lib/ant-junit.pom
deleted file mode 100644
index 08f7aa50f7a27..0000000000000
--- a/third_party/ant/lib/ant-junit.pom
+++ /dev/null
@@ -1,190 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>  
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-junit</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + JUnit</name>
-  <description>contains the junit and junirreport tasks</description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>junit</groupId>
-      <artifactId>junit</artifactId>
-      <version>4.12</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>xerces</groupId>
-      <artifactId>xercesImpl</artifactId>
-      <version>2.12.0</version>
-      <scope>test</scope>
-    </dependency>
-    <dependency>
-      <groupId>xalan</groupId>
-      <artifactId>xalan</artifactId>
-      <version>2.7.2</version>
-      <scope>test</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <artifactId>maven-antrun-plugin</artifactId>
-        <executions>
-          <execution>
-            <id>copy-junit-xsl</id>
-            <phase>process-classes</phase>
-            <goals>
-              <goal>run</goal>
-            </goals>
-            <configuration>
-              <target>
-                <copy todir="${project.build.outputDirectory}/org/apache/tools/ant/taskdefs/optional/junit/xsl">
-                  <fileset dir="${project.build.scriptSourceDirectory}">
-                    <include name="junit-frames.xsl"/>
-                    <include name="junit-noframes.xsl"/>
-                    <include name="junit-frames-saxon.xsl"/>
-                    <include name="junit-noframes-saxon.xsl"/>
-                  </fileset>
-                </copy>              
-              </target>
-            </configuration>
-          </execution>
-        </executions>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/taskdefs/optional/junit/*</include>
-          </includes>
-          <testIncludes>
-            <include>org/apache/tools/ant/taskdefs/optional/junit/</include>
-            <include>org/example/junit/</include>
-            <include>org/example/tasks/*.java</include>
-            <include>org/example/types/</include>
-          </testIncludes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <!-- Cannot exclude JUnit 4-specific classes from compilation because tests depend on them -->
-          <excludes>
-            <exclude>org/apache/tools/ant/taskdefs/optional/junit/JUnit4TestMethodAdapter*</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/junit/CustomJUnit4TestAdapterCache*</exclude>
-          </excludes>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-surefire-plugin</artifactId>
-        <configuration>
-          <basedir>../../../..</basedir>
-          <workingDirectory>../../../..</workingDirectory>
-          <systemProperties>
-            <property>
-              <name>build.tests.value</name>
-              <value>${project.basedir}/../../../../target/${project.artifactId}/testcases</value>
-            </property>
-            <property>
-              <name>ant.test.basedir.ignore</name>
-              <value>true</value>
-            </property>
-          </systemProperties>
-          <excludes>
-            <exclude>org/example/junit/*</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/junit/*$*</exclude>
-            <!-- test fails as classloaders are different when run via Maven -->
-            <exclude>org/apache/tools/ant/taskdefs/optional/junit/JUnitTaskTest*</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/junit/JUnitClassLoaderTest*</exclude>
-          </excludes>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <testResources>
-      <testResource>
-        <directory>../../../../src/etc/testcases</directory>
-        <includes>
-         <include>taskdefs/optional/junit/**</include>
-          <include>taskdefs/optional/junit.xml</include>
-          <include>taskdefs/optional/junitreport.xml</include>
-         <include>buildfiletest-base.xml</include>
-        </includes>
-      </testResource>
-      <testResource>
-        <directory>../../../../src</directory>
-        <includes>
-          <include>tests/junit/org/apache/tools/ant/taskdefs/optional/junit/*Test.java</include>
-        </includes>
-      </testResource>
-      <testResource>
-        <directory>../../../../src/tests/junit</directory>
-        <includes>
-          <include>org/example/tasks/*.xml</include>
-        </includes>
-      </testResource>
-    </testResources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/tests/junit</testSourceDirectory>
-    <scriptSourceDirectory>../../../../src/etc</scriptSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-junit4.jar b/third_party/ant/lib/ant-junit4.jar
deleted file mode 100644
index de51143124d76..0000000000000
Binary files a/third_party/ant/lib/ant-junit4.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-junit4.pom b/third_party/ant/lib/ant-junit4.pom
deleted file mode 100644
index 9f5e2e518ff46..0000000000000
--- a/third_party/ant/lib/ant-junit4.pom
+++ /dev/null
@@ -1,98 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-    <parent>
-        <groupId>org.apache.ant</groupId>
-        <artifactId>ant-parent</artifactId>
-        <relativePath>../pom.xml</relativePath>
-        <version>1.10.6</version>
-    </parent>
-    <modelVersion>4.0.0</modelVersion>
-    <url>http://ant.apache.org/</url>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-junit4</artifactId>
-    <version>1.10.6</version>
-    <name>Apache Ant + JUnit 4</name>
-    <description>contains JUnit 4.x support</description>
-    <dependencies>
-        <dependency>
-            <groupId>org.apache.ant</groupId>
-            <artifactId>ant</artifactId>
-            <version>1.10.6</version>
-            <scope>compile</scope>
-        </dependency>
-        <dependency>
-            <groupId>junit</groupId>
-            <artifactId>junit</artifactId>
-            <version>4.12</version>
-            <scope>compile</scope>
-        </dependency>
-    </dependencies>
-    <build>
-        <plugins>
-            <plugin>
-                <groupId>org.apache.maven.plugins</groupId>
-                <artifactId>maven-compiler-plugin</artifactId>
-                <configuration>
-                    <includes>
-                        <include>org/apache/tools/ant/taskdefs/optional/junit/JUnit4TestMethodAdapter*</include>
-                        <include>org/apache/tools/ant/taskdefs/optional/junit/CustomJUnit4TestAdapterCache*</include>
-                    </includes>
-                </configuration>
-            </plugin>
-            <plugin>
-                <groupId>org.apache.maven.plugins</groupId>
-                <artifactId>maven-jar-plugin</artifactId>
-                <configuration>
-                    <excludes>
-                        <exclude>**/*Ignored*</exclude>
-                    </excludes>
-                    <archive>
-                        <index>true</index>
-                        <manifest>
-                            <addExtensions>true</addExtensions>
-                            <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-                            <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-                        </manifest>
-                    </archive>
-                </configuration>
-            </plugin>
-        </plugins>
-        <resources>
-            <resource>
-                <directory>../../../..</directory>
-                <targetPath>META-INF</targetPath>
-                <includes>
-                    <include>LICENSE</include>
-                    <include>NOTICE</include>
-                </includes>
-            </resource>
-        </resources>
-        <sourceDirectory>../../../../src/main</sourceDirectory>
-        <testSourceDirectory>../../../../src/testcases</testSourceDirectory>
-        <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-        <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-        <directory>../../../../target/${project.artifactId}</directory>
-    </build>
-</project>
diff --git a/third_party/ant/lib/ant-junitlauncher.jar b/third_party/ant/lib/ant-junitlauncher.jar
deleted file mode 100644
index b17594e4281b2..0000000000000
Binary files a/third_party/ant/lib/ant-junitlauncher.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-junitlauncher.pom b/third_party/ant/lib/ant-junitlauncher.pom
deleted file mode 100644
index 75b28bdfe7022..0000000000000
--- a/third_party/ant/lib/ant-junitlauncher.pom
+++ /dev/null
@@ -1,142 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-    <parent>
-        <groupId>org.apache.ant</groupId>
-        <artifactId>ant-parent</artifactId>
-        <relativePath>../pom.xml</relativePath>
-        <version>1.10.6</version>
-    </parent>
-    <modelVersion>4.0.0</modelVersion>
-    <url>http://ant.apache.org/</url>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-junitlauncher</artifactId>
-    <version>1.10.6</version>
-    <name>Apache Ant + JUnit 5</name>
-    <description>contains JUnit 5.x support</description>
-    <dependencies>
-        <dependency>
-            <groupId>org.apache.ant</groupId>
-            <artifactId>ant</artifactId>
-            <version>1.10.6</version>
-            <scope>compile</scope>
-        </dependency>
-        <dependency>
-            <groupId>org.junit.platform</groupId>
-            <artifactId>junit-platform-launcher</artifactId>
-            <version>1.2.0</version>
-            <scope>compile</scope>
-        </dependency>
-        <dependency>
-            <groupId>org.junit.jupiter</groupId>
-            <artifactId>junit-jupiter-engine</artifactId>
-            <version>5.2.0</version>
-            <scope>test</scope>
-        </dependency>
-        <dependency>
-            <groupId>org.junit.vintage</groupId>
-            <artifactId>junit-vintage-engine</artifactId>
-            <version>5.2.0</version>
-            <scope>test</scope>
-        </dependency>
-    </dependencies>
-    <build>
-        <plugins>
-            <plugin>
-                <groupId>org.apache.maven.plugins</groupId>
-                <artifactId>maven-compiler-plugin</artifactId>
-                <configuration>
-                    <includes>
-                        <include>org/apache/tools/ant/taskdefs/optional/junitlauncher/</include>
-                    </includes>
-                    <testIncludes>
-                        <include>org/apache/tools/ant/taskdefs/optional/junitlauncher/</include>
-                        <include>org/example/junitlauncher/</include>
-                    </testIncludes>
-                </configuration>
-            </plugin>
-            <plugin>
-                <groupId>org.apache.maven.plugins</groupId>
-                <artifactId>maven-jar-plugin</artifactId>
-                <configuration>
-                    <archive>
-                        <index>true</index>
-                        <manifest>
-                            <addExtensions>true</addExtensions>
-                            <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-                            <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-                        </manifest>
-                    </archive>
-                </configuration>
-            </plugin>
-            <plugin>
-                <groupId>org.apache.maven.plugins</groupId>
-                <artifactId>maven-surefire-plugin</artifactId>
-                <configuration>
-                    <basedir>../../../..</basedir>
-                    <workingDirectory>../../../..</workingDirectory>
-                    <systemProperties>
-                        <property>
-                            <name>build.tests.value</name>
-                            <value>${project.basedir}/../../../../target/${project.artifactId}/testcases</value>
-                        </property>
-                        <property>
-                            <name>ant.test.basedir.ignore</name>
-                            <value>true</value>
-                        </property>
-                    </systemProperties>
-                    <excludes>
-                        <exclude>org/example/junitlauncher/**</exclude>
-                        <!-- test fails as classloaders are different when run via Maven -->
-                        <exclude>org/apache/tools/ant/taskdefs/optional/junitlauncher/JUnitLauncherTaskTest*</exclude>
-                    </excludes>
-                </configuration>
-            </plugin>
-        </plugins>
-        <resources>
-            <resource>
-                <directory>../../../..</directory>
-                <targetPath>META-INF</targetPath>
-                <includes>
-                    <include>LICENSE</include>
-                    <include>NOTICE</include>
-                </includes>
-            </resource>
-        </resources>
-        <testResources>
-            <testResource>
-                <directory>../../../../src/etc/testcases</directory>
-                <includes>
-                    <include>taskdefs/optional/junitlauncher.xml</include>
-                    <include>buildfiletest-base.xml</include>
-                </includes>
-            </testResource>
-        </testResources>
-        <sourceDirectory>../../../../src/main</sourceDirectory>
-        <testSourceDirectory>../../../../src/tests/junit</testSourceDirectory>
-        <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-        <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-        <directory>../../../../target/${project.artifactId}</directory>
-    </build>
-</project>
diff --git a/third_party/ant/lib/ant-launcher.jar b/third_party/ant/lib/ant-launcher.jar
deleted file mode 100644
index e554e64c252fd..0000000000000
Binary files a/third_party/ant/lib/ant-launcher.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-launcher.pom b/third_party/ant/lib/ant-launcher.pom
deleted file mode 100644
index 303ab9e8b63c6..0000000000000
--- a/third_party/ant/lib/ant-launcher.pom
+++ /dev/null
@@ -1,82 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-launcher</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant Launcher</name>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/launch/*.java</include>
-          </includes>
-          <testIncludes>
-            <include>org/apache/tools/ant/launch/*.java</include>
-          </testIncludes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <mainClass>org.apache.tools.ant.launch.Launcher</mainClass>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <!-- tests depend on Ant (Os) -->
-    <testSourceDirectory>../../../../src/testcases</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-netrexx.jar b/third_party/ant/lib/ant-netrexx.jar
deleted file mode 100644
index 5918ff3c382c7..0000000000000
Binary files a/third_party/ant/lib/ant-netrexx.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-netrexx.pom b/third_party/ant/lib/ant-netrexx.pom
deleted file mode 100644
index 58a99b24cc943..0000000000000
--- a/third_party/ant/lib/ant-netrexx.pom
+++ /dev/null
@@ -1,121 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>  
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-netrexx</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + NetRexx</name>
-  <description>NetRexxC task
-    dependency can be downloaded from http://www.ibm.com/software/awdtools/netrexx/download.html</description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <!-- Processed too early, before maven-antrun-plugin gets a chance to work:
-    <dependency>
-      <groupId>com.ibm.netrexx</groupId>
-      <artifactId>netrexx</artifactId>
-      <version>2.0.5</version>
-      <scope>system</scope>
-      <systemPath>${basedir}/../../../../lib/optional/NetRexxC.jar</systemPath>
-    </dependency>
-    -->
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/taskdefs/optional/NetRexxC*</include>
-          </includes>
-          <!-- Need to use this rather than system scope as above: -->
-          <compilerArguments>
-            <extdirs>${basedir}/../../../../lib/optional</extdirs>
-          </compilerArguments>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-antrun-plugin</artifactId>
-        <executions>
-          <execution>
-            <phase>validate</phase>
-            <configuration>
-              <target>
-                <ant dir="${basedir}/../../../.." antfile="fetch.xml" target="netrexx">
-                  <property name="dest" value="optional"/>
-                </ant>
-              </target>
-            </configuration>
-            <goals>
-              <goal>run</goal>
-            </goals>
-          </execution>
-        </executions>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/testcases</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-parent.pom b/third_party/ant/lib/ant-parent.pom
deleted file mode 100644
index 724f14f5819f3..0000000000000
--- a/third_party/ant/lib/ant-parent.pom
+++ /dev/null
@@ -1,183 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <modelVersion>4.0.0</modelVersion>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-parent</artifactId>
-  <version>1.10.6</version>
-  <packaging>pom</packaging>
-  <description>master POM</description>
-  <licenses>
-    <license>
-      <name>The Apache Software License, Version 2.0</name>
-      <url>http://www.apache.org/licenses/LICENSE-2.0.txt</url>
-      <distribution>repo</distribution>
-    </license>
-  </licenses>
-  <name>Apache Ant</name>
-  <url>http://ant.apache.org/</url>
-  <inceptionYear>2000</inceptionYear>
-  <organization>
-    <name>The Apache Software Foundation</name>
-    <url>http://www.apache.org/</url>
-  </organization>
-  <distributionManagement>
-    <!-- Null out inherited apache distribution repo by default -->
-    <repository>
-      <id>dummy</id>
-      <name>Dummy to avoid accidental deploys</name>
-      <url>http://nowhere.net/</url>
-    </repository>
-  </distributionManagement>
-  <scm>
-    <connection>scm:git:https://gitbox.apache.org/repos/asf/ant.git</connection>
-    <developerConnection>scm:git:https://gitbox.apache.org/repos/asf/ant.git</developerConnection>
-    <url>https://gitbox.apache.org/repos/asf/ant.git</url>
-  </scm>
-  <ciManagement>
-    <system>jenkins</system>
-    <url>https://builds.apache.org/job/Ant-Build-from-POMs/</url>
-  </ciManagement>
-  <mailingLists>
-    <mailingList>
-      <name>Ant Developers List</name>
-      <subscribe>dev-subscribe@ant.apache.org</subscribe>
-      <unsubscribe>dev-unsubscribe@ant.apache.org</unsubscribe>
-      <post>dev@ant.apache.org</post>
-      <archive>http://mail-archives.apache.org/mod_mbox/ant-dev</archive>
-    </mailingList>
-    <mailingList>
-      <name>Ant Users List</name>
-      <subscribe>user-subscribe@ant.apache.org</subscribe>
-      <unsubscribe>user-unsubscribe@ant.apache.org</unsubscribe>
-      <post>user@ant.apache.org</post>
-      <archive>http://mail-archives.apache.org/mod_mbox/ant-user</archive>
-    </mailingList>
-  </mailingLists>
-  <issueManagement>
-    <system>bugzilla</system>
-    <url>http://issues.apache.org/bugzilla/</url>
-  </issueManagement>
-  <modules>
-    <module>ant</module>
-    <module>ant-antlr</module>
-    <module>ant-apache-bcel</module>
-    <module>ant-apache-bsf</module>
-    <module>ant-apache-log4j</module>
-    <module>ant-apache-oro</module>
-    <module>ant-apache-regexp</module>
-    <module>ant-apache-resolver</module>
-    <module>ant-apache-xalan2</module>
-    <module>ant-commons-logging</module>
-    <module>ant-commons-net</module>
-    <module>ant-imageio</module>
-    <module>ant-jai</module>
-    <module>ant-javamail</module>
-    <module>ant-jdepend</module>
-    <module>ant-jmf</module>
-    <module>ant-jsch</module>
-    <module>ant-junit</module>
-    <module>ant-junit4</module>
-    <module>ant-junitlauncher</module>
-    <module>ant-launcher</module>
-    <module>ant-netrexx</module>
-    <module>ant-swing</module>
-    <module>ant-testutil</module>
-    <module>ant-xz</module>
-  </modules>
-  <dependencies>
-     <dependency>
-      <groupId>junit</groupId>
-      <artifactId>junit</artifactId>
-      <version>4.12</version>
-      <scope>test</scope>
-    </dependency>
-    <dependency>
-      <groupId>org.hamcrest</groupId>
-      <artifactId>hamcrest-library</artifactId>
-      <version>1.3</version>
-      <scope>test</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <sourceDirectory>../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../src/testcases</testSourceDirectory>
-    <outputDirectory>../../../target/classes</outputDirectory>
-    <testOutputDirectory>../../../target/testcases</testOutputDirectory>
-    <pluginManagement>
-      <plugins>
-        <plugin>
-          <groupId>org.apache.maven.plugins</groupId>
-          <artifactId>maven-compiler-plugin</artifactId>
-          <version>3.8.0</version>
-          <configuration>
-            <source>1.8</source>
-            <target>1.8</target>
-          </configuration>
-        </plugin>
-        <plugin>
-          <groupId>org.apache.maven.plugins</groupId>
-          <artifactId>maven-jar-plugin</artifactId>
-          <version>3.1.0</version>
-        </plugin>
-        <plugin>
-          <groupId>org.apache.maven.plugins</groupId>
-          <artifactId>maven-surefire-plugin</artifactId>
-          <version>2.22.1</version>
-        </plugin>
-        <plugin>
-          <groupId>org.apache.maven.plugins</groupId>
-          <artifactId>maven-surefire-report-plugin</artifactId>
-          <version>2.22.1</version>
-        </plugin>
-        <plugin>
-          <groupId>org.apache.maven.plugins</groupId>
-          <artifactId>maven-antrun-plugin</artifactId>
-          <version>1.8</version>
-        </plugin>
-      </plugins>
-    </pluginManagement>
-  </build>
-  <properties>
-    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
-  </properties>
-  <profiles>
-    <profile>
-      <id>javac-8</id>
-      <activation>
-        <jdk>1.8</jdk>
-      </activation>
-      <dependencies>
-        <dependency>
-          <groupId>com.sun</groupId>
-          <artifactId>tools</artifactId>
-          <version>1.8.0</version>
-          <scope>system</scope>
-          <systemPath>${java.home}/../lib/tools.jar</systemPath>
-        </dependency>
-      </dependencies>
-    </profile>
-  </profiles>
-</project>
diff --git a/third_party/ant/lib/ant-swing.jar b/third_party/ant/lib/ant-swing.jar
deleted file mode 100644
index 6b243013ce450..0000000000000
Binary files a/third_party/ant/lib/ant-swing.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-swing.pom b/third_party/ant/lib/ant-swing.pom
deleted file mode 100644
index a3b8905d82b0c..0000000000000
--- a/third_party/ant/lib/ant-swing.pom
+++ /dev/null
@@ -1,89 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>  
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-swing</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + Swing</name>
-  <description>a listener and a splash task based on Swing</description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/taskdefs/optional/splash/*</include>
-          </includes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/testcases</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-testutil.jar b/third_party/ant/lib/ant-testutil.jar
deleted file mode 100644
index 4ec3742906e94..0000000000000
Binary files a/third_party/ant/lib/ant-testutil.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-testutil.pom b/third_party/ant/lib/ant-testutil.pom
deleted file mode 100644
index 3d7a1fe458068..0000000000000
--- a/third_party/ant/lib/ant-testutil.pom
+++ /dev/null
@@ -1,100 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>  
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-testutil</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant Test Utilities</name>
-  <description>test utility classes</description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-     <dependency>
-      <groupId>junit</groupId>
-      <artifactId>junit</artifactId>
-      <version>4.12</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/AntAssert*</include>
-            <include>org/apache/tools/ant/BuildFile*</include>
-            <include>org/apache/tools/ant/FileUtilities*</include>
-            <include>org/apache/tools/ant/MagicTestNames*</include>
-            <include>org/apache/tools/ant/util/regexp/RegexpMatcherTest*</include>
-            <include>org/apache/tools/ant/util/regexp/RegexpTest*</include>
-            <include>org/apache/tools/ant/taskdefs/optional/AbstractXSLTLiaisonTest*</include>
-            <include>org/apache/tools/ant/types/AbstractFileSetTest*</include>
-          </includes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/tests/junit</sourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant-xz.jar b/third_party/ant/lib/ant-xz.jar
deleted file mode 100644
index 8dda2cd422a30..0000000000000
Binary files a/third_party/ant/lib/ant-xz.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant-xz.pom b/third_party/ant/lib/ant-xz.pom
deleted file mode 100644
index d6c11d3ba9031..0000000000000
--- a/third_party/ant/lib/ant-xz.pom
+++ /dev/null
@@ -1,95 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant-xz</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant + XZ for Java</name>
-  <description>contains the xz compression support</description>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>org.tukaani</groupId>
-      <artifactId>xz</artifactId>
-      <version>1.8</version>
-      <scope>compile</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <plugins>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>org/apache/tools/ant/taskdefs/optional/xz/*</include>
-            <include>org/apache/tools/ant/types/optional/xz/*</include>
-          </includes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-    </resources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/testcases</testSourceDirectory>
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-</project>
diff --git a/third_party/ant/lib/ant.jar b/third_party/ant/lib/ant.jar
deleted file mode 100644
index 09b72eb8e8988..0000000000000
Binary files a/third_party/ant/lib/ant.jar and /dev/null differ
diff --git a/third_party/ant/lib/ant.pom b/third_party/ant/lib/ant.pom
deleted file mode 100644
index 3e010b398597b..0000000000000
--- a/third_party/ant/lib/ant.pom
+++ /dev/null
@@ -1,373 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  See the NOTICE file distributed with
-   this work for additional information regarding copyright ownership.
-   The ASF licenses this file to You 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.
--->
-<!--
-  This POM has been created manually by the Ant Development Team.
-  Please contact us if you are not satisfied with the data contained in this POM.
-  URL : http://ant.apache.org
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
-  <parent>
-    <groupId>org.apache.ant</groupId>
-    <artifactId>ant-parent</artifactId>
-    <relativePath>../pom.xml</relativePath>
-    <version>1.10.6</version>
-  </parent>
-  <modelVersion>4.0.0</modelVersion>
-  <url>http://ant.apache.org/</url>
-  <groupId>org.apache.ant</groupId>
-  <artifactId>ant</artifactId>
-  <version>1.10.6</version>
-  <name>Apache Ant Core</name>
-  <properties>
-    <modules.exclude>org/apache/tools/ant/taskdefs/modules/</modules.exclude>
-  </properties>
-  <dependencies>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant-launcher</artifactId>
-      <version>1.10.6</version>
-      <scope>compile</scope>
-    </dependency>
-    <dependency>
-      <groupId>org.apache.ant</groupId>
-      <artifactId>ant-antunit</artifactId>
-      <version>1.4</version>
-      <scope>test</scope>
-      <exclusions>
-        <exclusion>
-          <groupId>org.apache.ant</groupId>
-          <artifactId>ant</artifactId>
-        </exclusion>
-        <exclusion>
-          <groupId>org.apache.ant</groupId>
-          <artifactId>ant-launcher</artifactId>
-        </exclusion>
-      </exclusions>
-    </dependency>
-    <dependency>
-      <groupId>xerces</groupId>
-      <artifactId>xercesImpl</artifactId>
-      <version>2.12.0</version>
-      <scope>test</scope>
-    </dependency>
-    <dependency>
-      <groupId>com.sun.mail</groupId>
-      <artifactId>javax.mail</artifactId>
-      <version>1.6.2</version>
-      <scope>test</scope>
-    </dependency>
-    <dependency>
-      <groupId>org.beanshell</groupId>
-      <artifactId>bsh</artifactId>
-      <version>2.0b5</version>
-      <scope>test</scope>
-    </dependency>
-  </dependencies>
-  <build>
-    <filters>
-      <filter>../../../../target/ant/.build.timestamp.properties</filter>
-    </filters>
-    <plugins>
-      <plugin>
-        <artifactId>maven-antrun-plugin</artifactId>
-        <executions>
-          <execution>
-            <id>create-timestamp-file</id>
-            <phase>generate-resources</phase>
-            <goals>
-              <goal>run</goal>
-            </goals>
-            <configuration>
-              <target>
-                <tstamp/>
-                <mkdir dir="${project.build.directory}"/>
-                <touch file="${project.build.directory}/.build.timestamp.properties"/>
-                <echo file="${project.build.directory}/.build.timestamp.properties" append="false"
-                  message="TODAY=${TODAY}"/>
-              </target>
-            </configuration>
-          </execution>
-          <execution>
-            <id>create-antlib-test-jar</id>
-            <phase>process-test-classes</phase>
-            <goals>
-              <goal>run</goal>
-            </goals>
-            <configuration>
-              <target>
-                <jar jarfile="${project.build.testOutputDirectory}/org/apache/tools/ant/taskdefs/test2-antlib.jar">
-                  <manifest>
-                    <attribute name="Extension-name"
-                               value="org.apache.tools.ant"/>
-                    <attribute name="Specification-Title"
-                               value="Apache Ant"/>
-                    <attribute name="Specification-Version"
-                               value="${project.version}"/>
-                    <attribute name="Specification-Vendor"
-                               value="Apache Software Foundation"/>
-                    <attribute name="Implementation-Title"
-                               value="org.apache.tools.ant"/>
-                    <attribute name="Implementation-Version"
-                               value="${project.version}"/>
-                    <attribute name="Implementation-Vendor"
-                               value="Apache Software Foundation"/>
-                  </manifest>
-                  <zipfileset dir="${project.build.scriptSourceDirectory}/testcases" fullpath="taskdefs/test.antlib.xml">
-                    <include name="taskdefs/test2.antlib.xml"/>
-                  </zipfileset>
-                </jar>
-                <echoproperties prefix="maven."/>
-              </target>
-            </configuration>
-          </execution>
-          <execution>
-            <id>delete-timestamp-file</id>
-            <phase>clean</phase>
-            <goals>
-              <goal>run</goal>
-            </goals>
-            <configuration>
-              <target>
-                <delete file="${project.build.directory}/.build.timestamp.properties"/>
-              </target>
-            </configuration>
-          </execution>
-        </executions>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <configuration>
-          <excludes>
-            <exclude>org/apache/tools/ant/filters/util/JavaClassHelper*</exclude>
-            <exclude>org/apache/tools/ant/launch/</exclude>
-            <exclude>org/apache/tools/ant/listener/CommonsLoggingListener*</exclude>
-            <exclude>org/apache/tools/ant/listener/Log4jListener*</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/email/MimeMailer*</exclude>
-            <exclude>${modules.exclude}</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/NetRexxC*</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/Xalan2TraceSupport*</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/image/</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/jdepend/</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/junit/</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/junitlauncher/</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/net/FTP*</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/net/RExec*</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/net/TelnetTask*</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/sound/</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/splash/</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/ssh/</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/xz/</exclude>
-            <exclude>org/apache/tools/ant/types/optional/image/</exclude>
-            <exclude>org/apache/tools/ant/types/optional/imageio/</exclude>
-            <exclude>org/apache/tools/ant/types/optional/xz/</exclude>
-            <exclude>org/apache/tools/ant/types/resolver/</exclude>
-            <exclude>org/apache/tools/ant/util/depend/bcel/</exclude>
-            <exclude>org/apache/tools/ant/util/ScriptRunner.java</exclude>
-            <exclude>org/apache/tools/ant/util/optional/ScriptRunner.java</exclude>
-            <exclude>org/apache/tools/ant/util/regexp/JakartaOro*</exclude>
-            <exclude>org/apache/tools/ant/util/regexp/JakartaRegexp*</exclude>
-          </excludes>
-          <testExcludes>
-            <!-- launcher -->
-            <exclude>org/apache/tools/ant/launch/</exclude>
-            <!-- commons-logging -->
-            <exclude>org/apache/tools/ant/listener/CommonsLoggingListener*</exclude>
-            <!-- log4j -->
-            <exclude>org/apache/tools/ant/listener/Log4jListener*</exclude>
-            <!-- obsolete -->
-            <exclude>org/apache/tools/ant/taskdefs/AbstractCvs*</exclude>
-            <!-- ERROR: "default value" when javac cannot cross-compile to Java 5 -->
-            <exclude>org/apache/tools/ant/taskdefs/Javac*</exclude>
-            <!-- see XsltTest -->
-            <exclude>org/apache/tools/ant/taskdefs/StyleTest*</exclude>
-            <!-- ERROR: Unexpected recipients -->
-            <exclude>org/apache/tools/ant/taskdefs/email/EmailTask*</exclude>
-            <!-- Java9+ -->
-            <exclude>${modules.exclude}</exclude>
-            <!-- antlr -->
-            <exclude>org/apache/tools/ant/taskdefs/optional/ANTLR*</exclude>
-            <!-- obsolete -->
-            <exclude>org/apache/tools/ant/taskdefs/optional/Jspc*</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/optional/Pvcs*</exclude>
-            <!-- xalan: workaround for different resource encoding -->
-            <exclude>org/apache/tools/ant/taskdefs/optional/TraXLiaison*</exclude>
-            <!-- ERROR: UnknownHostException: chemical (XML parser-dependent) -->
-            <exclude>org/apache/tools/ant/taskdefs/optional/XmlValidateCatalog*</exclude>
-            <!-- image/imageio -->
-            <exclude>org/apache/tools/ant/taskdefs/optional/image/</exclude>
-            <!-- jdepend -->
-            <exclude>org/apache/tools/ant/taskdefs/optional/jdepend/</exclude>
-            <!-- junit -->
-            <exclude>org/apache/tools/ant/taskdefs/optional/junit/</exclude>
-            <!-- junitlauncher -->
-            <exclude>org/apache/tools/ant/taskdefs/optional/junitlauncher/</exclude>
-            <!-- net -->
-            <exclude>org/apache/tools/ant/taskdefs/optional/net/FTP*</exclude>
-            <!-- swing -->
-            <exclude>org/apache/tools/ant/taskdefs/optional/splash/</exclude>
-            <!-- jsch -->
-            <exclude>org/apache/tools/ant/taskdefs/optional/ssh/</exclude>
-            <!-- dependent on junit -->
-            <exclude>org/apache/tools/ant/types/Assertions*</exclude>
-            <!-- bcel -->
-            <exclude>org/apache/tools/ant/types/optional/depend/ClassFileSet*</exclude>
-            <!-- ERROR: defaults.properties are in both compile and test file tree -->
-            <exclude>org/apache/tools/ant/util/ClasspathUtils*</exclude>
-            <exclude>org/apache/tools/ant/util/LoaderUtils*</exclude>
-            <!-- oro -->
-            <exclude>org/apache/tools/ant/util/regexp/JakartaOro*</exclude>
-            <!-- regexp -->
-            <exclude>org/apache/tools/ant/util/regexp/JakartaRegexp*</exclude>
-            <!-- dependent on IncludeTest.class: checks presence -->
-            <exclude>org/apache/tools/ant/AntClassLoaderDelegation*</exclude>
-            <!-- ERROR:  More pseudo attributes are expected (encoding="UTF-8");
-             failure mode is XML parser-dependent (see to do for failures in IDE) -->
-            <exclude>org/apache/tools/ant/Include*</exclude>
-            <!-- dependent on JUnit 5 -->
-            <exclude>org/example/junitlauncher/</exclude>
-            <!-- requires structure of a binary distribution of Ant in ANT_HOME -->
-            <exclude>org/apache/tools/ant/types/CommandlineJavaTest*</exclude>
-            <exclude>org/apache/tools/ant/types/selectors/ModifiedSelectorTest*</exclude>
-            <exclude>org/apache/tools/ant/taskdefs/AvailableTest*</exclude>
-          </testExcludes>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-jar-plugin</artifactId>
-        <configuration>
-          <archive>
-            <index>true</index>
-            <manifest>
-              <mainClass>org.apache.tools.ant.Main</mainClass>
-              <addExtensions>true</addExtensions>
-              <addDefaultImplementationEntries>true</addDefaultImplementationEntries>
-              <addDefaultSpecificationEntries>true</addDefaultSpecificationEntries>
-            </manifest>
-          </archive>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-surefire-plugin</artifactId>
-        <configuration>
-          <basedir>../../../..</basedir>
-          <workingDirectory>../../../..</workingDirectory>
-          <systemProperties>
-            <property>
-              <name>ant.home</name>
-              <value>${env.ANT_HOME}</value>
-            </property>
-            <property>
-              <name>build.classes.value</name>
-              <value>${project.basedir}/../../../../target/${project.artifactId}/classes</value>
-            </property>
-            <property>
-              <name>build.tests.value</name>
-              <value>${project.basedir}/../../../../target/${project.artifactId}/testcases</value>
-            </property>
-            <property>
-              <name>offline</name>
-              <value>true</value>
-            </property>
-            <property>
-              <name>ant.test.basedir.ignore</name>
-              <value>true</value>
-            </property>
-          </systemProperties>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-surefire-report-plugin</artifactId>
-      </plugin>
-    </plugins>
-    <resources>
-      <resource>
-        <directory>../../../..</directory>
-        <targetPath>META-INF</targetPath>
-        <includes>
-          <include>LICENSE</include>
-          <include>NOTICE</include>
-        </includes>
-      </resource>
-      <resource>
-        <directory>../../../../src/main</directory>
-        <filtering>true</filtering>
-        <includes>
-          <include>org/apache/tools/ant/listener/defaults.properties</include>
-          <include>org/apache/tools/ant/taskdefs/defaults.properties</include>
-          <include>org/apache/tools/ant/types/defaults.properties</include>
-          <include>org/apache/tools/ant/antlib.xml</include>
-          <include>org/apache/tools/ant/types/conditions/antlib.xml</include>
-          <include>org/apache/tools/ant/defaultManifest.mf</include>
-          <include>org/apache/tools/ant/version.txt</include>
-        </includes>
-      </resource>
-      <resource>
-        <directory>../../../../src/resources</directory>
-        <filtering>true</filtering>
-        <includes>
-          <include>**/antlib.xml</include>
-          <include>**/javadoc-frame-injections-fix.txt</include>
-        </includes>
-      </resource>
-      <resource>
-        <directory>../../../../manual</directory>
-        <filtering>false</filtering>
-        <includes>
-          <include>images/ant_logo_large.gif</include>
-        </includes>
-      </resource>
-    </resources>
-    <testResources>
-      <testResource>
-        <directory>../../../../src/etc/testcases</directory>
-        <filtering>true</filtering>
-      </testResource>
-      <testResource>
-        <directory>../../../../src/main</directory>
-        <filtering>true</filtering>
-        <excludes>
-          <exclude>**/*.java</exclude>
-        </excludes>
-      </testResource>
-    </testResources>
-    <sourceDirectory>../../../../src/main</sourceDirectory>
-    <testSourceDirectory>../../../../src/tests/junit</testSourceDirectory>
-    <scriptSourceDirectory>../../../../src/etc</scriptSourceDirectory>
-    <!-- directory name is hardcoded in AntTest -->
-    <outputDirectory>../../../../target/${project.artifactId}/classes</outputDirectory>
-    <testOutputDirectory>../../../../target/${project.artifactId}/testcases</testOutputDirectory>
-    <directory>../../../../target/${project.artifactId}</directory>
-  </build>
-  <profiles>
-    <profile>
-      <id>java9+</id>
-      <activation>
-        <jdk>[9,)</jdk>
-      </activation>
-      <properties>
-        <modules.exclude>not/here</modules.exclude>
-      </properties>
-    </profile>
-  </profiles>
-</project>
diff --git a/third_party/ant/lib/libraries.properties b/third_party/ant/lib/libraries.properties
deleted file mode 100644
index 040ef31731d79..0000000000000
--- a/third_party/ant/lib/libraries.properties
+++ /dev/null
@@ -1,72 +0,0 @@
-# Licensed to the Apache Software Foundation (ASF) under one or more
-# contributor license agreements.  See the NOTICE file distributed with
-# this work for additional information regarding copyright ownership.
-# The ASF licenses this file to You 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.
-
-# This file declares the libraries for use in a given release of the components
-
-# If you change this, change the checksum to match
-m2.version=2.1.3
-m2.url=https://archive.apache.org/dist/maven/ant-tasks
-m2.artifact-name=maven-ant-tasks
-m2.jar.name=${m2.artifact-name}-${m2.version}.jar
-#this is the URL of the antlib library, that is pulled down for everything else.
-m2.antlib.url=${m2.url}/${m2.version}/binaries/${m2.jar.name}
-#this is the sha1 checksum of the artifact
-m2.sha1.checksum=b09be554228d66d208e5fef5266844aacf443abc
-
-# Repository to use by default for fetching dependencies.
-m2.repo=http://repo1.maven.org/maven2/
-
-# Versions of different libraries. Please keep in alphabetical order, except
-# when a specific dependency forces them to be out-of-order
-ivy.version=2.4.0
-ant-antunit.version=1.4
-antlr.version=2.7.7
-bcel.version=6.2
-bsf.version=2.4.0
-bsh.version=2.0b5
-commons-net.version=3.6
-commons-logging.version=1.1
-commons-logging-api.version=${commons-logging.version}
-hamcrest-core.version=1.3
-hamcrest-library.version=${hamcrest-core.version}
-jai-core.version=1.1.3
-jai-codec.version=1.1.3
-jakarta-regexp.version=1.4
-# Later versions of Tomcat provide a jspc task
-jasper-compiler.version=4.1.36
-jasper-runtime.version=${jasper-compiler.version}
-javax.mail.version=1.6.2
-jdepend.version=2.9.1
-jruby.version=1.6.8
-junit.version=4.12
-rhino.version=1.7.10
-junit-platform-launcher.version=1.2.0
-# Only used for internal tests in Ant project
-junit-vintage-engine.version=5.2.0
-# Only used for internal tests in Ant project
-junit-jupiter-engine.version=5.2.0
-jsch.version=0.1.55
-jython.version=2.7.0
-# log4j 1.2.15 requires JMS and a few other Sun jars that are not in the m2 repo
-log4j.version=1.2.14
-oro.version=2.0.8
-servlet-api.version=2.3
-which.version=1.0
-xalan.version=2.7.2
-xml-resolver.version=1.2
-xz.version=1.8
-# paired
-jacl.version=1.2.6
-tcljava.version=${jacl.version}
diff --git a/third_party/aog-payjs/LICENSE b/third_party/aog-payjs/LICENSE
deleted file mode 100644
index ff9ad4530f571..0000000000000
--- a/third_party/aog-payjs/LICENSE
+++ /dev/null
@@ -1,202 +0,0 @@
-
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   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
-
-       https://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.
diff --git a/third_party/aog-payjs/README.amp b/third_party/aog-payjs/README.amp
deleted file mode 100644
index d6060cbe80838..0000000000000
--- a/third_party/aog-payjs/README.amp
+++ /dev/null
@@ -1,15 +0,0 @@
-URL: https://github.com/google/payjs
-License: Apache 2.0
-License File: https://github.com/google/payjs/blob/master/LICENSE
-
-Description:
-Copy of Google Pay integration library
-
-Local Modifications:
-Removed bazel build files
-
-Creating bundled payjs.js file:
-1) Install rollup : yarn global add rollup
-2) Include all third party files/libraries in this directory
-3) Run rollup : rollup payjs.js --file FINAL_FILE_NAME --format esm
-4) Remove all files/directories other than generated file
diff --git a/third_party/aog-payjs/payjs.js b/third_party/aog-payjs/payjs.js
deleted file mode 100644
index a699b0c7c4007..0000000000000
--- a/third_party/aog-payjs/payjs.js
+++ /dev/null
@@ -1,3348 +0,0 @@
-/** @license
-Math.uuid.js (v1.4)
-http://www.broofa.com
-mailto:robert@broofa.com
-Copyright (c) 2010 Robert Kieffer
-Dual licensed under the MIT and GPL licenses.
-*/
-
-/*
- * Generate a random uuid.
- *
- * USAGE: Math.uuid(length, radix)
- *   length - the desired number of characters
- *   radix  - the number of allowable values for each character.
- *
- * EXAMPLES:
- *   // No arguments  - returns RFC4122, version 4 ID
- *   >>> Math.uuid()
- *   "92329D39-6F5C-4520-ABFC-AAB64544E172"
- *
- *   // One argument - returns ID of the specified length
- *   >>> Math.uuid(15)     // 15 character ID (default base=62)
- *   "VcydxgltxrVZSTV"
- *
- *   // Two arguments - returns ID of the specified length, and radix. (Radix must be <= 62)
- *   >>> Math.uuid(8, 2)  // 8 character ID (base=2)
- *   "01001010"
- *   >>> Math.uuid(8, 10) // 8 character ID (base=10)
- *   "47473046"
- *   >>> Math.uuid(8, 16) // 8 character ID (base=16)
- *   "098F4D35"
- */
-
-
-class Random_uuid {}
-// Private array of chars to use
-var CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
-
-Random_uuid.uuid = function (len, radix) {
-  var chars = CHARS, uuid = [], i;
-  radix = radix || chars.length;
-
-  if (len) {
-    // Compact form
-    for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
-  } else {
-    // rfc4122, version 4 form
-    var r;
-
-    // rfc4122 requires these characters
-    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
-    uuid[14] = '4';
-
-    // Fill in random data.  At i==19 set the high bits of clock sequence as
-    // per rfc4122, sec. 4.1.5
-    for (i = 0; i < 36; i++) {
-      if (!uuid[i]) {
-        r = 0 | Math.random()*16;
-        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
-      }
-    }
-  }
-
-  return uuid.join('');
-};
-
-// A more performant, but slightly bulkier, RFC4122v4 solution.  We boost performance
-// by minimizing calls to random()
-Random_uuid.uuidFast = function() {
-  var chars = CHARS, uuid = new Array(36), rnd=0, r;
-  for (var i = 0; i < 36; i++) {
-    if (i==8 || i==13 ||  i==18 || i==23) {
-      uuid[i] = '-';
-    } else if (i==14) {
-      uuid[i] = '4';
-    } else {
-      if (rnd <= 0x02) rnd = 0x2000000 + (Math.random()*0x1000000)|0;
-      r = rnd & 0xf;
-      rnd = rnd >> 4;
-      uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
-    }
-  }
-  return uuid.join('');
-};
-
-// A more compact, but less performant, RFC4122v4 solution:
-Random_uuid.uuidCompact = function() {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
-    return v.toString(16);
-  });
-};
-
-/**
- * @fileoverview Import from Web Activities project
- * (https://github.com/google/web-activities).
- */
-
-/**
- * @license
- * Copyright 2017 The Web Activities 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.
- */
- /** Version: 1.12 */
-
-
-/**
- * @enum {string}
- */
-const ActivityMode = {
-  IFRAME: 'iframe',
-  POPUP: 'popup',
-  REDIRECT: 'redirect',
-};
-
-
-/**
- * The result code used for `ActivityResult`.
- * @enum {string}
- */
-const ActivityResultCode = {
-  OK: 'ok',
-  CANCELED: 'canceled',
-  FAILED: 'failed',
-};
-
-/**
- * The result of an activity. The activity implementation returns this object
- * for a successful result, a cancelation or a failure.
- * @struct
- */
-class ActivityResult {
-  /**
-   * @param {!ActivityResultCode} code
-   * @param {*} data
-   * @param {!ActivityMode} mode
-   * @param {string} origin
-   * @param {boolean} originVerified
-   * @param {boolean} secureChannel
-   */
-  constructor(code, data, mode, origin, originVerified, secureChannel) {
-    /** @const {!ActivityResultCode} */
-    this.code = code;
-    /** @const {*} */
-    this.data = code == ActivityResultCode.OK ? data : null;
-    /** @const {!ActivityMode} */
-    this.mode = mode;
-    /** @const {string} */
-    this.origin = origin;
-    /** @const {boolean} */
-    this.originVerified = originVerified;
-    /** @const {boolean} */
-    this.secureChannel = secureChannel;
-    /** @const {boolean} */
-    this.ok = code == ActivityResultCode.OK;
-    /** @const {?Error} */
-    this.error = code == ActivityResultCode.FAILED ?
-        new Error(String(data) || '') :
-        null;
-  }
-}
-
-
-const SENTINEL = '__ACTIVITIES__';
-
-/**
- * The messenger helper for activity's port and host.
- */
-class Messenger {
-
-  /**
-   * @param {!Window} win
-   * @param {!Window|function():?Window} targetOrCallback
-   * @param {?string} targetOrigin
-   */
-  constructor(win, targetOrCallback, targetOrigin) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-    /** @private @const {!Window|function():?Window} */
-    this.targetOrCallback_ = targetOrCallback;
-
-    /**
-     * May start as unknown (`null`) until received in the first message.
-     * @private {?string}
-     */
-    this.targetOrigin_ = targetOrigin;
-
-    /** @private {?Window} */
-    this.target_ = null;
-
-    /** @private {boolean} */
-    this.acceptsChannel_ = false;
-
-    /** @private {?MessagePort} */
-    this.port_ = null;
-
-    /** @private {?function(string, ?Object)} */
-    this.onCommand_ = null;
-
-    /** @private {?function(!Object)} */
-    this.onCustomMessage_ = null;
-
-    /**
-     * @private {?Object<string, !ChannelHolder>}
-     */
-    this.channels_ = null;
-
-    /** @private @const */
-    this.boundHandleEvent_ = this.handleEvent_.bind(this);
-  }
-
-  /**
-   * Connect the port to the host or vice versa.
-   * @param {function(string, ?Object)} onCommand
-   */
-  connect(onCommand) {
-    if (this.onCommand_) {
-      throw new Error('already connected');
-    }
-    this.onCommand_ = onCommand;
-    this.win_.addEventListener('message', this.boundHandleEvent_);
-  }
-
-  /**
-   * Disconnect messenger.
-   */
-  disconnect() {
-    if (this.onCommand_) {
-      this.onCommand_ = null;
-      if (this.port_) {
-        closePort(this.port_);
-        this.port_ = null;
-      }
-      this.win_.removeEventListener('message', this.boundHandleEvent_);
-      if (this.channels_) {
-        for (const k in this.channels_) {
-          const channelObj = this.channels_[k];
-          if (channelObj.port1) {
-            closePort(channelObj.port1);
-          }
-          if (channelObj.port2) {
-            closePort(channelObj.port2);
-          }
-        }
-        this.channels_ = null;
-      }
-    }
-  }
-
-  /**
-   * Returns whether the messenger has been connected already.
-   * @return {boolean}
-   */
-  isConnected() {
-    return this.targetOrigin_ != null;
-  }
-
-  /**
-   * Returns the messaging target. Only available when connection has been
-   * establihsed.
-   * @return {!Window}
-   */
-  getTarget() {
-    const target = this.getOptionalTarget_();
-    if (!target) {
-      throw new Error('not connected');
-    }
-    return target;
-  }
-
-  /**
-   * @return {?Window}
-   * @private
-   */
-  getOptionalTarget_() {
-    if (this.onCommand_ && !this.target_) {
-      if (typeof this.targetOrCallback_ == 'function') {
-        this.target_ = this.targetOrCallback_();
-      } else {
-        this.target_ = /** @type {!Window} */ (this.targetOrCallback_);
-      }
-    }
-    return this.target_;
-  }
-
-  /**
-   * Returns the messaging origin. Only available when connection has been
-   * establihsed.
-   * @return {string}
-   */
-  getTargetOrigin() {
-    if (this.targetOrigin_ == null) {
-      throw new Error('not connected');
-    }
-    return this.targetOrigin_;
-  }
-
-  /**
-   * The host sends this message to the client to indicate that it's ready to
-   * start communicating. The client is expected to respond back with the
-   * "start" command. See `sendStartCommand` method.
-   */
-  sendConnectCommand() {
-    this.sendCommand('connect', {'acceptsChannel': true});
-  }
-
-  /**
-   * The client sends this message to the host upon receiving the "connect"
-   * message to start the main communication channel. As a payload, the message
-   * will contain the provided start arguments.
-   * @param {?Object} args
-   */
-  sendStartCommand(args) {
-    let channel = null;
-    if (this.acceptsChannel_ && typeof this.win_.MessageChannel == 'function') {
-      channel = new this.win_.MessageChannel();
-    }
-    if (channel) {
-      this.sendCommand('start', args, [channel.port2]);
-      // It's critical to switch to port messaging only after "start" has been
-      // sent. Otherwise, it won't be delivered.
-      this.switchToChannel_(channel.port1);
-    } else {
-      this.sendCommand('start', args);
-    }
-  }
-
-  /**
-   * Sends the specified command from the port to the host or vice versa.
-   * @param {string} cmd
-   * @param {?Object=} opt_payload
-   * @param {?Array=} opt_transfer
-   */
-  sendCommand(cmd, opt_payload, opt_transfer) {
-    const data = {
-      'sentinel': SENTINEL,
-      'cmd': cmd,
-      'payload': opt_payload || null,
-    };
-    if (this.port_) {
-      this.port_.postMessage(data, opt_transfer || undefined);
-    } else {
-      const target = this.getTarget();
-      // Only "connect" command is allowed to use `targetOrigin == '*'`
-      const targetOrigin =
-          cmd == 'connect' ?
-          (this.targetOrigin_ != null ? this.targetOrigin_ : '*') :
-          this.getTargetOrigin();
-      target.postMessage(data, targetOrigin, opt_transfer || undefined);
-    }
-  }
-
-  /**
-   * Sends a message to the client.
-   * @param {!Object} payload
-   */
-  customMessage(payload) {
-    this.sendCommand('msg', payload);
-  }
-
-  /**
-   * Registers a callback to receive messages from the client.
-   * @param {function(!Object)} callback
-   */
-  onCustomMessage(callback) {
-    this.onCustomMessage_ = callback;
-  }
-
-  /**
-   * @param {string=} opt_name
-   * @return {!Promise<!MessagePort>}
-   */
-  startChannel(opt_name) {
-    const name = opt_name || '';
-    const channelObj = this.getChannelObj_(name);
-    if (!channelObj.port1) {
-      const channel = new this.win_.MessageChannel();
-      channelObj.port1 = channel.port1;
-      channelObj.port2 = channel.port2;
-      channelObj.resolver(channelObj.port1);
-    }
-    if (channelObj.port2) {
-      // Not yet sent.
-      this.sendCommand('cnset', {'name': name}, [channelObj.port2]);
-      channelObj.port2 = null;
-    }
-    return channelObj.promise;
-  }
-
-  /**
-   * @param {string=} opt_name
-   * @return {!Promise<!MessagePort>}
-   */
-  askChannel(opt_name) {
-    const name = opt_name || '';
-    const channelObj = this.getChannelObj_(name);
-    if (!channelObj.port1) {
-      this.sendCommand('cnget', {'name': name});
-    }
-    return channelObj.promise;
-  }
-
-  /**
-   * @param {string} name
-   * @param {!MessagePort} port
-   * @private
-   */
-  receiveChannel_(name, port) {
-    const channelObj = this.getChannelObj_(name);
-    channelObj.port1 = port;
-    channelObj.resolver(port);
-  }
-
-  /**
-   * @param {string} name
-   * @return {!ChannelHolder}
-   */
-  getChannelObj_(name) {
-    if (!this.channels_) {
-      this.channels_ = {};
-    }
-    let channelObj = this.channels_[name];
-    if (!channelObj) {
-      let resolver;
-      const promise = new Promise(resolve => {
-        resolver = resolve;
-      });
-      channelObj = {
-        port1: null,
-        port2: null,
-        resolver,
-        promise,
-      };
-      this.channels_[name] = channelObj;
-    }
-    return channelObj;
-  }
-
-  /**
-   * @param {!MessagePort} port
-   * @private
-   */
-  switchToChannel_(port) {
-    if (this.port_) {
-      closePort(this.port_);
-    }
-    this.port_ = port;
-    this.port_.onmessage = event => {
-      const data = event.data;
-      const cmd = data && data['cmd'];
-      const payload = data && data['payload'] || null;
-      if (cmd) {
-        this.handleCommand_(cmd, payload, event);
-      }
-    };
-    // Even though all messaging will switch to ports, the window-based message
-    // listener will be preserved just in case the host is refreshed and needs
-    // another connection.
-  }
-
-  /**
-   * @param {!Event} event
-   * @private
-   */
-  handleEvent_(event) {
-    const data = event.data;
-    if (!data || data['sentinel'] != SENTINEL) {
-      return;
-    }
-    const cmd = data['cmd'];
-    if (this.port_ && cmd != 'connect' && cmd != 'start') {
-      // Messaging channel has already taken over. However, the "connect" and
-      // "start" commands are allowed to proceed in case re-connection is
-      // requested.
-      return;
-    }
-    const origin = /** @type {string} */ (event.origin);
-    const payload = data['payload'] || null;
-    if (this.targetOrigin_ == null && cmd == 'start') {
-      this.targetOrigin_ = origin;
-    }
-    if (this.targetOrigin_ == null && event.source) {
-      if (this.getOptionalTarget_() == event.source) {
-        this.targetOrigin_ = origin;
-      }
-    }
-    // Notice that event.source may differ from the target because of
-    // friendly-iframe intermediaries.
-    if (origin != this.targetOrigin_) {
-      return;
-    }
-    this.handleCommand_(cmd, payload, event);
-  }
-
-  /**
-   * @param {string} cmd
-   * @param {?Object} payload
-   * @param {!Event} event
-   * @private
-   */
-  handleCommand_(cmd, payload, event) {
-    if (cmd == 'connect') {
-      if (this.port_) {
-        // In case the port has already been open - close it to reopen it
-        // again later.
-        closePort(this.port_);
-        this.port_ = null;
-      }
-      this.acceptsChannel_ = payload && payload['acceptsChannel'] || false;
-      this.onCommand_(cmd, payload);
-    } else if (cmd == 'start') {
-      const port = event.ports && event.ports[0];
-      if (port) {
-        this.switchToChannel_(port);
-      }
-      this.onCommand_(cmd, payload);
-    } else if (cmd == 'msg') {
-      if (this.onCustomMessage_ != null && payload != null) {
-        this.onCustomMessage_(payload);
-      }
-    } else if (cmd == 'cnget') {
-      const name = payload['name'];
-      this.startChannel(name);
-    } else if (cmd == 'cnset') {
-      const name = payload['name'];
-      const port = event.ports[0];
-      this.receiveChannel_(name, /** @type {!MessagePort} */ (port));
-    } else {
-      this.onCommand_(cmd, payload);
-    }
-  }
-}
-
-
-/**
- * @param {!MessagePort} port
- */
-function closePort(port) {
-  try {
-    port.close();
-  } catch (e) {
-    // Ignore.
-  }
-}
-
-
-
-/** DOMException.ABORT_ERR name */
-const ABORT_ERR_NAME = 'AbortError';
-
-/** DOMException.ABORT_ERR = 20 */
-const ABORT_ERR_CODE = 20;
-
-/** @type {?HTMLAnchorElement} */
-let aResolver;
-
-
-/**
- * @param {string} urlString
- * @return {!HTMLAnchorElement}
- */
-function parseUrl(urlString) {
-  if (!aResolver) {
-    aResolver = /** @type {!HTMLAnchorElement} */ (document.createElement('a'));
-  }
-  aResolver.href = urlString;
-  return /** @type {!HTMLAnchorElement} */ (aResolver);
-}
-
-
-/**
- * @param {!Location|!URL|!HTMLAnchorElement} loc
- * @return {string}
- */
-function getOrigin(loc) {
-  return loc.origin || loc.protocol + '//' + loc.host;
-}
-
-
-/**
- * @param {string} urlString
- * @return {string}
- */
-function getOriginFromUrl(urlString) {
-  return getOrigin(parseUrl(urlString));
-}
-
-
-/**
- * @param {string} urlString
- * @return {string}
- */
-function removeFragment(urlString) {
-  const index = urlString.indexOf('#');
-  if (index == -1) {
-    return urlString;
-  }
-  return urlString.substring(0, index);
-}
-
-
-/**
- * Parses and builds Object of URL query string.
- * @param {string} query The URL query string.
- * @return {!Object<string, string>}
- */
-function parseQueryString(query) {
-  if (!query) {
-    return {};
-  }
-  return (/^[?#]/.test(query) ? query.slice(1) : query)
-      .split('&')
-      .reduce((params, param) => {
-        const item = param.split('=');
-        const key = decodeURIComponent(item[0] || '');
-        const value = decodeURIComponent(item[1] || '');
-        if (key) {
-          params[key] = value;
-        }
-        return params;
-      }, {});
-}
-
-
-/**
- * @param {string} queryString  A query string in the form of "a=b&c=d". Could
- *   be optionally prefixed with "?" or "#".
- * @param {string} param The param to get from the query string.
- * @return {?string}
- */
-function getQueryParam(queryString, param) {
-  return parseQueryString(queryString)[param];
-}
-
-
-/**
- * Add a query-like parameter to the fragment string.
- * @param {string} url
- * @param {string} param
- * @param {string} value
- * @return {string}
- */
-function addFragmentParam(url, param, value) {
-  return url +
-      (url.indexOf('#') == -1 ? '#' : '&') +
-      encodeURIComponent(param) + '=' + encodeURIComponent(value);
-}
-
-
-/**
- * @param {string} queryString  A query string in the form of "a=b&c=d". Could
- *   be optionally prefixed with "?" or "#".
- * @param {string} param The param to remove from the query string.
- * @return {?string}
- */
-function removeQueryParam(queryString, param) {
-  if (!queryString) {
-    return queryString;
-  }
-  const search = encodeURIComponent(param) + '=';
-  let index = -1;
-  do {
-    index = queryString.indexOf(search, index);
-    if (index != -1) {
-      const prev = index > 0 ? queryString.substring(index - 1, index) : '';
-      if (prev == '' || prev == '?' || prev == '#' || prev == '&') {
-        let end = queryString.indexOf('&', index + 1);
-        if (end == -1) {
-          end = queryString.length;
-        }
-        queryString =
-            queryString.substring(0, index) +
-            queryString.substring(end + 1);
-      } else {
-        index++;
-      }
-    }
-  } while (index != -1 && index < queryString.length);
-  return queryString;
-}
-
-
-/**
- * @param {!ActivityRequest} request
- * @return {string}
- */
-function serializeRequest(request) {
-  const map = {
-    'requestId': request.requestId,
-    'returnUrl': request.returnUrl,
-    'args': request.args,
-  };
-  if (request.origin !== undefined) {
-    map['origin'] = request.origin;
-  }
-  if (request.originVerified !== undefined) {
-    map['originVerified'] = request.originVerified;
-  }
-  return JSON.stringify(map);
-}
-
-
-/**
- * Creates or emulates a DOMException of AbortError type.
- * See https://heycam.github.io/webidl/#aborterror.
- * @param {!Window} win
- * @param {string=} opt_message
- * @return {!DOMException}
- */
-function createAbortError(win, opt_message) {
-  const message = 'AbortError' + (opt_message ? ': ' + opt_message : '');
-  let error = null;
-  if (typeof win['DOMException'] == 'function') {
-    // TODO(dvoytenko): remove typecast once externs are fixed.
-    const constr = /** @type {function(new:DOMException, string, string)} */ (
-        win['DOMException']);
-    try {
-      error = new constr(message, ABORT_ERR_NAME);
-    } catch (e) {
-      // Ignore. In particular, `new DOMException()` fails in Edge.
-    }
-  }
-  if (!error) {
-    // TODO(dvoytenko): remove typecast once externs are fixed.
-    const constr = /** @type {function(new:DOMException, string)} */ (
-        Error);
-    error = new constr(message);
-    error.name = ABORT_ERR_NAME;
-    error.code = ABORT_ERR_CODE;
-  }
-  return error;
-}
-
-
-/**
- * Resolves the activity result as a promise:
- *  - `OK` result is yielded as the promise's payload;
- *  - `CANCEL` result is rejected with the `AbortError`;
- *  - `FAILED` result is rejected with the embedded error.
- *
- * @param {!Window} win
- * @param {!ActivityResult} result
- * @param {function((!ActivityResult|!Promise))} resolver
- */
-function resolveResult(win, result, resolver) {
-  if (result.ok) {
-    resolver(result);
-  } else {
-    const error = result.error || createAbortError(win);
-    error.activityResult = result;
-    resolver(Promise.reject(error));
-  }
-}
-
-
-
-/**
- * The `ActivityPort` implementation for the iframe case. Unlike other types
- * of activities, iframe-based activities are always connected and can react
- * to size requests.
- *
- * @implements {ActivityPort}
- */
-class ActivityIframePort {
-
-  /**
-   * @param {!HTMLIFrameElement} iframe
-   * @param {string} url
-   * @param {?Object=} opt_args
-   */
-  constructor(iframe, url, opt_args) {
-    /** @private @const {!HTMLIFrameElement} */
-    this.iframe_ = iframe;
-    /** @private @const {string} */
-    this.url_ = url;
-    /** @private @const {?Object} */
-    this.args_ = opt_args || null;
-
-    /** @private @const {!Window} */
-    this.win_ = /** @type {!Window} */ (this.iframe_.ownerDocument.defaultView);
-
-    /** @private @const {string} */
-    this.targetOrigin_ = getOriginFromUrl(url);
-
-    /** @private {boolean} */
-    this.connected_ = false;
-
-    /** @private {?function()} */
-    this.connectedResolver_ = null;
-
-    /** @private @const {!Promise} */
-    this.connectedPromise_ = new Promise(resolve => {
-      this.connectedResolver_ = resolve;
-    });
-
-    /** @private {?function()} */
-    this.readyResolver_ = null;
-
-    /** @private @const {!Promise} */
-    this.readyPromise_ = new Promise(resolve => {
-      this.readyResolver_ = resolve;
-    });
-
-    /** @private {?function((!ActivityResult|!Promise))} */
-    this.resultResolver_ = null;
-
-    /** @private @const {!Promise<!ActivityResult>} */
-    this.resultPromise_ = new Promise(resolve => {
-      this.resultResolver_ = resolve;
-    });
-
-    /** @private {?function(number)} */
-    this.onResizeRequest_ = null;
-
-    /** @private {?number} */
-    this.requestedHeight_ = null;
-
-    /** @private @const {!Messenger} */
-    this.messenger_ = new Messenger(
-        this.win_,
-        () => this.iframe_.contentWindow,
-        this.targetOrigin_);
-  }
-
-  /** @override */
-  getMode() {
-    return ActivityMode.IFRAME;
-  }
-
-  /**
-   * Waits until the activity port is connected to the host.
-   * @return {!Promise}
-   */
-  connect() {
-    if (!this.win_.document.documentElement.contains(this.iframe_)) {
-      throw new Error('iframe must be in DOM');
-    }
-    this.messenger_.connect(this.handleCommand_.bind(this));
-    this.iframe_.src = this.url_;
-    return this.connectedPromise_;
-  }
-
-  /**
-   * Disconnect the activity binding and cleanup listeners.
-   */
-  disconnect() {
-    this.connected_ = false;
-    this.messenger_.disconnect();
-  }
-
-  /** @override */
-  acceptResult() {
-    return this.resultPromise_;
-  }
-
-  /**
-   * Sends a message to the host.
-   * @param {!Object} payload
-   */
-  message(payload) {
-    this.messenger_.customMessage(payload);
-  }
-
-  /**
-   * Registers a callback to receive messages from the host.
-   * @param {function(!Object)} callback
-   */
-  onMessage(callback) {
-    this.messenger_.onCustomMessage(callback);
-  }
-
-  /**
-   * Creates a new communication channel or returns an existing one.
-   * @param {string=} opt_name
-   * @return {!Promise<!MessagePort>}
-   */
-  messageChannel(opt_name) {
-    return this.messenger_.askChannel(opt_name);
-  }
-
-  /**
-   * Returns a promise that yields when the iframe is ready to be interacted
-   * with.
-   * @return {!Promise}
-   */
-  whenReady() {
-    return this.readyPromise_;
-  }
-
-  /**
-   * Register a callback to handle resize requests. Once successfully resized,
-   * ensure to call `resized()` method.
-   * @param {function(number)} callback
-   */
-  onResizeRequest(callback) {
-    this.onResizeRequest_ = callback;
-    Promise.resolve().then(() => {
-      if (this.requestedHeight_ != null) {
-        callback(this.requestedHeight_);
-      }
-    });
-  }
-
-  /**
-   * Signals back to the activity implementation that the client has updated
-   * the activity's size.
-   */
-  resized() {
-    if (!this.connected_) {
-      return;
-    }
-    const height = this.iframe_.offsetHeight;
-    this.messenger_.sendCommand('resized', {'height': height});
-  }
-
-  /**
-   * @param {string} cmd
-   * @param {?Object} payload
-   * @private
-   */
-  handleCommand_(cmd, payload) {
-    if (cmd == 'connect') {
-      // First ever message. Indicates that the receiver is listening.
-      this.connected_ = true;
-      this.messenger_.sendStartCommand(this.args_);
-      this.connectedResolver_();
-    } else if (cmd == 'result') {
-      // The last message. Indicates that the result has been received.
-      if (this.resultResolver_) {
-        const code = /** @type {!ActivityResultCode} */ (payload['code']);
-        const data =
-            code == ActivityResultCode.FAILED ?
-            new Error(payload['data'] || '') :
-            payload['data'];
-        const result = new ActivityResult(
-            code,
-            data,
-            ActivityMode.IFRAME,
-            this.messenger_.getTargetOrigin(),
-            /* originVerified */ true,
-            /* secureChannel */ true);
-        resolveResult(this.win_, result, this.resultResolver_);
-        this.resultResolver_ = null;
-        this.messenger_.sendCommand('close');
-        this.disconnect();
-      }
-    } else if (cmd == 'ready') {
-      if (this.readyResolver_) {
-        this.readyResolver_();
-        this.readyResolver_ = null;
-      }
-    } else if (cmd == 'resize') {
-      this.requestedHeight_ = /** @type {number} */ (payload['height']);
-      if (this.onResizeRequest_) {
-        this.onResizeRequest_(this.requestedHeight_);
-      }
-    }
-  }
-}
-
-
-
-/**
- * The `ActivityPort` implementation for the standalone window activity
- * client executed as a popup.
- *
- * @implements {ActivityPort}
- */
-class ActivityWindowPort {
-
-  /**
-   * @param {!Window} win
-   * @param {string} requestId
-   * @param {string} url
-   * @param {string} target
-   * @param {?Object=} opt_args
-   * @param {?ActivityOpenOptions=} opt_options
-   */
-  constructor(win, requestId, url, target, opt_args, opt_options) {
-    const isValidTarget =
-        target &&
-        (target == '_blank' || target == '_top' || target[0] != '_');
-    if (!isValidTarget) {
-      throw new Error('The only allowed targets are "_blank", "_top"' +
-          ' and name targets');
-    }
-
-    /** @private @const {!Window} */
-    this.win_ = win;
-    /** @private @const {string} */
-    this.requestId_ = requestId;
-    /** @private @const {string} */
-    this.url_ = url;
-    /** @private @const {string} */
-    this.openTarget_ = target;
-    /** @private @const {?Object} */
-    this.args_ = opt_args || null;
-    /** @private @const {?ActivityOpenOptions} */
-    this.options_ = opt_options || null;
-
-    /** @private {?function((!ActivityResult|!Promise))} */
-    this.resultResolver_ = null;
-
-    /** @private @const {!Promise<!ActivityResult>} */
-    this.resultPromise_ = new Promise(resolve => {
-      this.resultResolver_ = resolve;
-    });
-
-    /** @private {?Window} */
-    this.targetWin_ = null;
-
-    /** @private {?number} */
-    this.heartbeatInterval_ = null;
-
-    /** @private {?Messenger} */
-    this.messenger_ = null;
-  }
-
-  /** @override */
-  getMode() {
-    return this.openTarget_ == '_top' ?
-        ActivityMode.REDIRECT :
-        ActivityMode.POPUP;
-  }
-
-  /**
-   * Opens the activity in a window, either as a popup or via redirect.
-   *
-   * Returns the promise that will yield when the window returns or closed.
-   * Notice, that this promise may never complete if "redirect" mode was used.
-   *
-   * @return {!Promise}
-   */
-  open() {
-    return this.openInternal_();
-  }
-
-  /**
-   * @return {?Window}
-   */
-  getTargetWin() {
-    return this.targetWin_;
-  }
-
-  /**
-   * Disconnect the activity binding and cleanup listeners.
-   */
-  disconnect() {
-    if (this.heartbeatInterval_) {
-      this.win_.clearInterval(this.heartbeatInterval_);
-      this.heartbeatInterval_ = null;
-    }
-    if (this.messenger_) {
-      this.messenger_.disconnect();
-      this.messenger_ = null;
-    }
-    if (this.targetWin_) {
-      // Try to close the popup window. The host will also try to do the same.
-      try {
-        this.targetWin_.close();
-      } catch (e) {
-        // Ignore.
-      }
-      this.targetWin_ = null;
-    }
-    this.resultResolver_ = null;
-  }
-
-  /** @override */
-  acceptResult() {
-    return this.resultPromise_;
-  }
-
-  /**
-   * This method wraps around window's open method. It first tries to execute
-   * `open` call with the provided target and if it fails, it retries the call
-   * with the `_top` target. This is necessary given that in some embedding
-   * scenarios, such as iOS' WKWebView, navigation to `_blank` and other targets
-   * is blocked by default.
-   * @return {!Promise}
-   * @private
-   */
-  openInternal_() {
-    const featuresStr = this.buildFeatures_();
-
-    // Protectively, the URL will contain the request payload, unless explicitly
-    // directed not to via `skipRequestInUrl` option.
-    let url = this.url_;
-    if (!(this.options_ && this.options_.skipRequestInUrl)) {
-      const returnUrl =
-          this.options_ && this.options_.returnUrl ||
-          removeFragment(this.win_.location.href);
-      const requestString = serializeRequest({
-        requestId: this.requestId_,
-        returnUrl,
-        args: this.args_,
-      });
-      url = addFragmentParam(url, '__WA__', requestString);
-    }
-
-    // Open the window.
-    let targetWin;
-    let openTarget = this.openTarget_;
-    // IE does not support CORS popups - the popup has to fallback to redirect
-    // mode.
-    if (openTarget != '_top') {
-      // MSIE and Trident are typical user agents for IE browsers.
-      const nav = this.win_.navigator;
-      if (/Trident|MSIE|IEMobile/i.test(nav && nav.userAgent)) {
-        openTarget = '_top';
-      }
-    }
-    // Try first with the specified target. If we're inside the WKWebView or
-    // a similar environments, this method is expected to fail by default for
-    // all targets except `_top`.
-    try {
-      targetWin = this.win_.open(url, openTarget, featuresStr);
-    } catch (e) {
-      // Ignore.
-    }
-    // Then try with `_top` target.
-    if (!targetWin && openTarget != '_top') {
-      openTarget = '_top';
-      try {
-        targetWin = this.win_.open(url, openTarget);
-      } catch (e) {
-        // Ignore.
-      }
-    }
-
-    // Setup the target window.
-    if (targetWin) {
-      this.targetWin_ = targetWin;
-      if (openTarget != '_top') {
-        this.setupPopup_();
-      }
-    } else {
-      this.disconnectWithError_(new Error('failed to open window'));
-    }
-
-    // Return result promise, even though it may never complete.
-    return this.resultPromise_.catch(() => {
-      // Ignore. Call to the `acceptResult()` should fail if needed.
-    });
-  }
-
-  /**
-   * @return {string}
-   * @private
-   */
-  buildFeatures_() {
-    // The max width and heights are calculated as following:
-    // MaxSize = AvailSize - ControlsSize
-    // ControlsSize = OuterSize - InnerSize
-    const screen = this.win_.screen;
-    const availWidth = screen.availWidth || screen.width;
-    const availHeight = screen.availHeight || screen.height;
-    const isTop = this.isTopWindow_();
-    const nav = this.win_.navigator;
-    const isEdge = /Edge/i.test(nav && nav.userAgent);
-    // Limit controls to 100px width and height. Notice that it's only
-    // possible to calculate controls size in the top window, not in iframes.
-    // Notice that the Edge behavior is somewhat unique. If we can't find the
-    // right width/height, it will launch in the full-screen. Other browsers
-    // deal with such cases more gracefully.
-    const controlsWidth =
-        isTop && this.win_.outerWidth > this.win_.innerWidth ?
-        Math.min(100, this.win_.outerWidth - this.win_.innerWidth) :
-        (isEdge ? 100 : 0);
-    const controlsHeight =
-        isTop && this.win_.outerHeight > this.win_.innerHeight ?
-        Math.min(100, this.win_.outerHeight - this.win_.innerHeight) :
-        (isEdge ? 100 : 0);
-    // With all the adjustments, at least 50% of the available width/height
-    // should be made available to a popup.
-    const maxWidth = Math.max(availWidth - controlsWidth, availWidth * 0.5);
-    const maxHeight = Math.max(availHeight - controlsHeight, availHeight * 0.5);
-    let w = Math.floor(Math.min(600, maxWidth * 0.9));
-    let h = Math.floor(Math.min(600, maxHeight * 0.9));
-    if (this.options_) {
-      if (this.options_.width) {
-        w = Math.min(this.options_.width, maxWidth);
-      }
-      if (this.options_.height) {
-        h = Math.min(this.options_.height, maxHeight);
-      }
-    }
-    const x = Math.floor((screen.width - w) / 2);
-    const y = Math.floor((screen.height - h) / 2);
-    const features = {
-      'height': h,
-      'width': w,
-      'resizable': 'yes',
-      'scrollbars': 'yes',
-    };
-    // Do not set left/top in Edge: it fails.
-    if (!isEdge) {
-      features['left'] = x;
-      features['top'] = y;
-    }
-    let featuresStr = '';
-    for (const f in features) {
-      if (featuresStr) {
-        featuresStr += ',';
-      }
-      featuresStr += `${f}=${features[f]}`;
-    }
-    return featuresStr;
-  }
-
-  /**
-   * This method only exists to make iframe/top emulation possible in tests.
-   * Otherwise `window.top` cannot be overridden.
-   * @return {boolean}
-   * @private
-   */
-  isTopWindow_() {
-    return this.win_ == this.win_.top;
-  }
-
-  /** @private */
-  setupPopup_() {
-    // Keep alive to catch the window closing, which would indicate
-    // "cancel" signal.
-    this.heartbeatInterval_ = this.win_.setInterval(() => {
-      this.check_(/* delayCancel */ true);
-    }, 500);
-
-    // Start up messaging. The messaging is explicitly allowed to proceed
-    // without origin check b/c all arguments have already been passed in
-    // the URL and special handling is enforced when result is delivered.
-    this.messenger_ = new Messenger(
-        this.win_,
-        /** @type {!Window} */ (this.targetWin_),
-        /* targetOrigin */ null);
-    this.messenger_.connect(this.handleCommand_.bind(this));
-  }
-
-  /**
-   * @param {boolean=} opt_delayCancel
-   * @private
-   */
-  check_(opt_delayCancel) {
-    if (!this.targetWin_ || this.targetWin_.closed) {
-      this.win_.clearInterval(this.heartbeatInterval_);
-      this.heartbeatInterval_ = null;
-      // Give a chance for the result to arrive, but otherwise consider the
-      // responce to be empty.
-      this.win_.setTimeout(() => {
-        try {
-          this.result_(ActivityResultCode.CANCELED, /* data */ null);
-        } catch (e) {
-          this.disconnectWithError_(e);
-        }
-      }, opt_delayCancel ? 3000 : 0);
-    }
-  }
-
-  /**
-   * @param {!Error} reason
-   * @private
-   */
-  disconnectWithError_(reason) {
-    if (this.resultResolver_) {
-      this.resultResolver_(Promise.reject(reason));
-    }
-    this.disconnect();
-  }
-
-  /**
-   * @param {!ActivityResultCode} code
-   * @param {*} data
-   * @private
-   */
-  result_(code, data) {
-    if (this.resultResolver_) {
-      const isConnected = this.messenger_.isConnected();
-      const result = new ActivityResult(
-          code,
-          data,
-          ActivityMode.POPUP,
-          isConnected ?
-              this.messenger_.getTargetOrigin() :
-              getOriginFromUrl(this.url_),
-          /* originVerified */ isConnected,
-          /* secureChannel */ isConnected);
-      resolveResult(this.win_, result, this.resultResolver_);
-      this.resultResolver_ = null;
-    }
-    if (this.messenger_) {
-      this.messenger_.sendCommand('close');
-    }
-    this.disconnect();
-  }
-
-  /**
-   * @param {string} cmd
-   * @param {?Object} payload
-   * @private
-   */
-  handleCommand_(cmd, payload) {
-    if (cmd == 'connect') {
-      // First ever message. Indicates that the receiver is listening.
-      this.messenger_.sendStartCommand(this.args_);
-    } else if (cmd == 'result') {
-      // The last message. Indicates that the result has been received.
-      const code = /** @type {!ActivityResultCode} */ (payload['code']);
-      const data =
-          code == ActivityResultCode.FAILED ?
-          new Error(payload['data'] || '') :
-          payload['data'];
-      this.result_(code, data);
-    } else if (cmd == 'check') {
-      this.win_.setTimeout(() => this.check_(), 200);
-    }
-  }
-}
-
-
-/**
- * @param {!Window} win
- * @param {string} fragment
- * @param {string} requestId
- * @return {?ActivityPort}
- */
-function discoverRedirectPort(win, fragment, requestId) {
-  // Try to find the result in the fragment.
-  const paramName = '__WA_RES__';
-  const fragmentParam = getQueryParam(fragment, paramName);
-  if (!fragmentParam) {
-    return null;
-  }
-  const response = /** @type {?Object} */ (JSON.parse(
-      decodeURIComponent(fragmentParam)));
-  if (!response || response['requestId'] != requestId) {
-    return null;
-  }
-
-  // Remove the found param from the fragment.
-  const cleanFragment = removeQueryParam(win.location.hash, paramName) || '';
-  if (cleanFragment != win.location.hash) {
-    if (win.history && win.history.replaceState) {
-      try {
-        win.history.replaceState(win.history.state, '', cleanFragment);
-      } catch (e) {
-        // Ignore.
-      }
-    }
-  }
-
-  const code = response['code'];
-  const data = response['data'];
-  const origin = response['origin'];
-  const referrerOrigin = win.document.referrer &&
-      getOriginFromUrl(win.document.referrer);
-  const originVerified = origin == referrerOrigin;
-  return new ActivityWindowRedirectPort(
-      win,
-      code,
-      data,
-      origin,
-      originVerified);
-}
-
-
-/**
- * The `ActivityPort` implementation for the standalone window activity
- * client executed as a popup.
- *
- * @implements {ActivityPort}
- */
-class ActivityWindowRedirectPort {
-
-  /**
-   * @param {!Window} win
-   * @param {!ActivityResultCode} code
-   * @param {*} data
-   * @param {string} targetOrigin
-   * @param {boolean} targetOriginVerified
-   */
-  constructor(win, code, data, targetOrigin, targetOriginVerified) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-    /** @private @const {!ActivityResultCode} */
-    this.code_ = code;
-    /** @private @const {*} */
-    this.data_ = data;
-    /** @private {string} */
-    this.targetOrigin_ = targetOrigin;
-    /** @private {boolean} */
-    this.targetOriginVerified_ = targetOriginVerified;
-  }
-
-  /** @override */
-  getMode() {
-    return ActivityMode.REDIRECT;
-  }
-
-  /** @override */
-  acceptResult() {
-    const result = new ActivityResult(
-        this.code_,
-        this.data_,
-        ActivityMode.REDIRECT,
-        this.targetOrigin_,
-        this.targetOriginVerified_,
-        /* secureChannel */ false);
-    return new Promise(resolve => {
-      resolveResult(this.win_, result, resolve);
-    });
-  }
-}
-
-
-
-/**
- * The page-level activities manager ports. This class is intended to be used
- * as a singleton. It can start activities of all modes: iframe, popup, and
- * redirect.
- */
-class ActivityPorts {
-
-  /**
-   * @param {!Window} win
-   */
-  constructor(win) {
-    /** @const {string} */
-    this.version = '1.12';
-
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private @const {string} */
-    this.fragment_ = win.location.hash;
-
-    /**
-     * @private @const {!Object<string, !Array<function(!ActivityPort)>>}
-     */
-    this.requestHandlers_ = {};
-
-    /**
-     * The result buffer is indexed by `requestId`.
-     * @private @const {!Object<string, !ActivityPort>}
-     */
-    this.resultBuffer_ = {};
-  }
-
-  /**
-   * Start an activity within the specified iframe.
-   * @param {!HTMLIFrameElement} iframe
-   * @param {string} url
-   * @param {?Object=} opt_args
-   * @return {!Promise<!ActivityIframePort>}
-   */
-  openIframe(iframe, url, opt_args) {
-    const port = new ActivityIframePort(iframe, url, opt_args);
-    return port.connect().then(() => port);
-  }
-
-  /**
-   * Start an activity in a separate window. The result will be delivered
-   * to the `onResult` callback.
-   *
-   * The activity can be opened in two modes: "popup" and "redirect". This
-   * depends on the `target` value, but also on the browser/environment.
-   *
-   * The allowed `target` values are `_blank`, `_top` and name targets. The
-   * `_self`, `_parent` and similar targets are not allowed.
-   *
-   * The `_top` target indicates that the activity should be opened as a
-   * "redirect", while other targets indicate that the activity should be
-   * opened as a popup. The activity client will try to honor the requested
-   * target. However, it's not always possible. Some environments do not
-   * allow popups and they either force redirect or fail the window open
-   * request. In this case, the activity will try to fallback to the "redirect"
-   * mode.
-   *
-   * @param {string} requestId
-   * @param {string} url
-   * @param {string} target
-   * @param {?Object=} opt_args
-   * @param {?ActivityOpenOptions=} opt_options
-   * @return {{targetWin: ?Window}}
-   */
-  open(requestId, url, target, opt_args, opt_options) {
-    const port = new ActivityWindowPort(
-        this.win_, requestId, url, target, opt_args, opt_options);
-    port.open().then(() => {
-      // Await result if possible. Notice that when falling back to "redirect",
-      // the result will never arrive through this port.
-      this.consumeResultAll_(requestId, port);
-    });
-    return {targetWin: port.getTargetWin()};
-  }
-
-  /**
-   * Registers the callback for the result of the activity opened with the
-   * specified `requestId` (see the `open()` method). The callback is a
-   * function that takes a single `ActivityPort` argument. The client
-   * can use this object to verify the port using it's origin, verified and
-   * secure channel flags. Then the client can call
-   * `ActivityPort.acceptResult()` method to accept the result.
-   *
-   * The activity result is handled via a separate callback because of a
-   * possible redirect. So use of direct callbacks and/or promises is not
-   * possible in that case.
-   *
-   * A typical implementation would look like:
-   * ```
-   * ports.onResult('request1', function(port) {
-   *   port.acceptResult().then(function(result) {
-   *     // Only verified origins are allowed.
-   *     if (result.origin == expectedOrigin &&
-   *         result.originVerified &&
-   *         result.secureChannel) {
-   *       handleResultForRequest1(result);
-   *     }
-   *   });
-   * })
-   *
-   * ports.open('request1', request1Url, '_blank');
-   * ```
-   *
-   * @param {string} requestId
-   * @param {function(!ActivityPort)} callback
-   */
-  onResult(requestId, callback) {
-    let handlers = this.requestHandlers_[requestId];
-    if (!handlers) {
-      handlers = [];
-      this.requestHandlers_[requestId] = handlers;
-    }
-    handlers.push(callback);
-
-    // Consume available result.
-    const availableResult = this.discoverResult_(requestId);
-    if (availableResult) {
-      this.consumeResult_(availableResult, callback);
-    }
-  }
-
-  /**
-   * @param {string} requestId
-   * @return {?ActivityPort}
-   * @private
-   */
-  discoverResult_(requestId) {
-    let port = this.resultBuffer_[requestId];
-    if (!port && this.fragment_) {
-      port = discoverRedirectPort(
-          this.win_, this.fragment_, requestId);
-      if (port) {
-        this.resultBuffer_[requestId] = port;
-      }
-    }
-    return port;
-  }
-
-  /**
-   * @param {!ActivityPort} port
-   * @param {function(!ActivityPort)} callback
-   * @private
-   */
-  consumeResult_(port, callback) {
-    Promise.resolve().then(() => {
-      callback(port);
-    });
-  }
-
-  /**
-   * @param {string} requestId
-   * @param {!ActivityPort} port
-   * @private
-   */
-  consumeResultAll_(requestId, port) {
-    // Find and execute handlers.
-    const handlers = this.requestHandlers_[requestId];
-    if (handlers) {
-      handlers.forEach(handler => {
-        this.consumeResult_(port, handler);
-      });
-    }
-    // Buffer the result for callbacks that may arrive in the future.
-    this.resultBuffer_[requestId] = port;
-  }
-}
-
-/**
- * @license
- * Copyright 2018 Google Inc. 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.
- */
-
-const Constants = {
-
-/**
- * Supported environments.
- *
- * @enum {string}
- */
-Environment : {
-  PRODUCTION: 'PRODUCTION',
-  TEST: 'TEST',
-  SANDBOX: 'SANDBOX',
-},
-
-/**
- * Supported payment methods.
- *
- * @enum {string}
- */
-PaymentMethod : {
-  CARD: 'CARD',
-  TOKENIZED_CARD: 'TOKENIZED_CARD',
-},
-
-/**
- * Returned result status.
- *
- * @enum {string}
- */
-ResponseStatus : {
-  CANCELED: 'CANCELED',
-  DEVELOPER_ERROR: 'DEVELOPER_ERROR',
-},
-
-/**
- * Supported total price status.
- *
- * @enum {string}
- */
-TotalPriceStatus : {
-  ESTIMATED: 'ESTIMATED',
-  FINAL: 'FINAL',
-  NOT_CURRENTLY_KNOWN: 'NOT_CURRENTLY_KNOWN',
-},
-
-/**
- * Supported Google Pay payment button type.
- *
- * @enum {string}
- */
-ButtonType : {
-  SHORT: 'short',
-  LONG: 'long',
-},
-
-/**
- * Supported button colors.
- *
- * @enum {string}
- */
-ButtonColor : {
-  DEFAULT: 'default',  // Currently defaults to black.
-  BLACK: 'black',
-  WHITE: 'white',
-},
-
-/**
- * Id attributes.
- *
- * @enum {string}
- */
-Id : {
-  POPUP_WINDOW_CONTAINER: 'popup-window-container',
-},
-
-/** @const {string} */
-IS_READY_TO_PAY_RESULT_KEY :
-    'google.payments.api.storage.isreadytopay.result',
-
-
-IFRAME_STYLE_CLASS : 'dialog',
-
-IFRAME_STYLE : `
-.dialog {
-    animation: none 0s ease 0s 1 normal none running;
-    background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);
-    background-blend-mode: normal;
-    border: 0px none rgb(51, 51, 51);
-    border-radius: 8px 8px 0px 0px;
-    border-collapse: separate;
-    bottom: 0px;
-    box-shadow: rgb(128, 128, 128) 0px 3px 0px 0px, rgb(128, 128, 128) 0px 0px 22px 0px;
-    box-sizing: border-box;
-    left: -240px;
-    letter-spacing: normal;
-    max-height: 100%;
-    overflow: visible;
-    position: fixed;
-    width: 100%;
-    z-index: 2147483647;
-    -webkit-appearance: none;
-    left: 0px;
-}
-@media (min-width: 480px) {
-  .dialog{
-    width: 480px !important;
-    left: -240px !important;
-    margin-left: calc(100vw - 100vw / 2) !important;
-  }
-}
-.dialogContainer {
-  background-color: rgba(0,0,0,0.85);
-  bottom: 0;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  right: 0;
-}
-.iframeContainer {
-  -webkit-overflow-scrolling: touch;
-}
-`,
-
-BUTTON_LOCALE_TO_MIN_WIDTH : {
-  'en': 152,
-  'bg': 163,
-  'cs': 192,
-  'de': 168,
-  'es': 183,
-  'fr': 183,
-  'hr': 157,
-  'id': 186,
-  'ja': 148,
-  'ko': 137,
-  'ms': 186,
-  'nl': 167,
-  'pl': 182,
-  'pt': 193,
-  'ru': 206,
-  'sk': 157,
-  'sl': 211,
-  'sr': 146,
-  'tr': 161,
-  'uk': 207,
-  'zh': 156,
-},
-
-BUTTON_STYLE : `
-.gpay-button {
-    background-origin: content-box;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    border: 0px;
-    border-radius: 4px;
-    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 1px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
-    cursor: pointer;
-    height: 40px;
-    min-height: 40px;
-    outline: 0px;
-    padding: 11px 24px;
-}
-
-.black {
-    background-color: #000;
-}
-
-.white {
-    background-color: #fff;
-}
-
-.short {
-    min-width: 90px;
-    width: 160px;
-}
-
-.black.short {
-    background-image: url(https://www.gstatic.com/instantbuy/svg/dark_gpay.svg);
-}
-
-.white.short {
-    background-image: url(https://www.gstatic.com/instantbuy/svg/light_gpay.svg);
-}
-`,
-
-/**
- * Trusted domain for secure context validation
- *
- * @const {string}
- */
-TRUSTED_DOMAIN : '.google.com'
-};
-
-
-/** @private */
-let hasStylesheetBeenInjected_ = false;
-
-/**
- * Return a <div> element containing a Google Pay payment button.
- *
- * @param {ButtonOptions=} options
- * @return {!Element}
- */
-function createButtonHelper(options = {}) {
-  if (!hasStylesheetBeenInjected_) {
-    injectStyleSheet(Constants.BUTTON_STYLE);
-    injectStyleSheet(getLongGPayButtonCss_());
-    hasStylesheetBeenInjected_ = true;
-  }
-  const button = document.createElement('button');
-  if (!Object.values(Constants.ButtonType).includes(options.buttonType)) {
-    options.buttonType = Constants.ButtonType.LONG;
-  }
-  if (!Object.values(Constants.ButtonColor).includes(options.buttonColor)) {
-    options.buttonColor = Constants.ButtonColor.DEFAULT;
-  }
-  if (options.buttonColor == Constants.ButtonColor.DEFAULT) {
-    options.buttonColor = Constants.ButtonColor.BLACK;
-  }
-  const classForGpayButton = getClassForGpayButton_(options);
-  button.setAttribute('class', `gpay-button ${classForGpayButton}`);
-
-  const hoverBackgroundColor = isWhiteColor_(options) ? '#f8f8f8' : '#3c4043';
-  button.addEventListener('mouseover', /** @this {!Element}*/ function() {
-    this.style.backgroundColor = hoverBackgroundColor;
-  });
-  button.addEventListener('mouseout', /** @this {!Element}*/ function() {
-    this.style.backgroundColor = '';
-  });
-  const mouseDownBackgroundColor = isWhiteColor_(options) ? '#e8e8e8' : '#202124';
-  button.addEventListener('mousedown', /** @this {!Element}*/ function() {
-    this.style.backgroundColor = mouseDownBackgroundColor;
-  });
-  button.addEventListener('mouseup', /** @this {!Element}*/ function() {
-    this.style.backgroundColor = '';
-  });
-
-  if (options.onClick) {
-    button.addEventListener('click', options.onClick);
-  } else {
-    throw new Error('Parameter \'onClick\' must be set.');
-  }
-  const div = document.createElement('div');
-  div.appendChild(button);
-  return div;
-}
-
-/**
- * Gets the class for the Google Pay button.
- *
- * @param {!ButtonOptions} options
- * @return {string}
- * @private
- */
-function getClassForGpayButton_(options) {
-  if (options.buttonType == Constants.ButtonType.LONG) {
-    if (options.buttonColor == Constants.ButtonColor.WHITE) {
-      return 'white long';
-    } else {
-      return 'black long';
-    }
-  } else if (options.buttonType == Constants.ButtonType.SHORT) {
-    if (options.buttonColor == Constants.ButtonColor.WHITE) {
-      return 'white short';
-    } else {
-      return 'black short';
-    }
-  }
-  return 'black long';
-}
-
-/**
- * Gets the CSS for the long gpay button depending on the locale.
- *
- * @return {string}
- * @private
- */
-function getLongGPayButtonCss_() {
-  // navigator.userLanguage is used for IE
-  const defaultLocale = 'en';
-  let locale = navigator.language || navigator.userLanguage || defaultLocale;
-  if (locale != defaultLocale) {
-    // Get language part of locale (e.g: fr-FR is fr) and check if it is
-    // supported, otherwise default to en
-    locale = locale.substring(0, 2);
-    if (!Constants.BUTTON_LOCALE_TO_MIN_WIDTH[locale]) {
-      locale = defaultLocale;
-    }
-  }
-  const minWidth = Constants.BUTTON_LOCALE_TO_MIN_WIDTH[locale];
-
-  return `
-    .long {
-      min-width: ${minWidth}px;
-      width: 240px;
-    }
-
-    .white.long {
-      background-image: url(https://www.gstatic.com/instantbuy/svg/light/${
-      locale}.svg);
-    }
-
-    .black.long {
-      background-image: url(https://www.gstatic.com/instantbuy/svg/dark/${
-      locale}.svg);
-    }`;
-}
-
-/**
- * Returns true if the white color is selected.
- *
- * @param {!ButtonOptions} options
- * @return {boolean} True if the white color is selected.
- * @private
- */
-function isWhiteColor_(options) {
-  return options.buttonColor == Constants.ButtonColor.WHITE;
-}
-
-/** Visible for testing. */
-function resetButtonStylesheet() {
-  hasStylesheetBeenInjected_ = false;
-}
-
-/**
- * The client for interacting with the Google Pay APIs.
- * @final
- */
-class PaymentsClient {
-  /**
-   * @param {PaymentOptions=} paymentOptions
-   * @param {boolean=} opt_useIframe
-   */
-  constructor(paymentOptions = {}, opt_useIframe) {
-    /** @private @const {!PaymentsAsyncClient} */
-    this.asyncClient_ = new PaymentsAsyncClient(
-        paymentOptions, this.payComplete_.bind(this), opt_useIframe);
-
-    /** @private {?function(!Promise<!PaymentData>)} */
-    this.pending_ = null;
-  }
-
-  /**
-   * @param {!Promise<!PaymentData>} response
-   * @private
-   */
-  payComplete_(response) {
-    this.pending_(response);
-  }
-
-  /**
-   * Check whether the user can make payments using the Pay API.
-   *
-   * @param {!IsReadyToPayRequest} isReadyToPayRequest
-   * @return {!Promise} The promise will contain the boolean result and error
-   *     message when possible.
-   * @export
-   */
-  isReadyToPay(isReadyToPayRequest) {
-    return this.asyncClient_.isReadyToPay(isReadyToPayRequest);
-  }
-
-  /**
-   * Prefetch paymentData to speed up loadPaymentData call. Note the provided
-   * paymentDataRequest should exactly be the same as provided in
-   * loadPaymentData to make the loadPaymentData call fast.
-   *
-   * @param {!PaymentDataRequest} paymentDataRequest Provides necessary
-   *     information to support a payment.
-   * @export
-   */
-  prefetchPaymentData(paymentDataRequest) {
-    this.asyncClient_.prefetchPaymentData(paymentDataRequest);
-  }
-
-  /**
-   * Request PaymentData, which contains necessary infomartion to complete a
-   * payment.
-   *
-   * @param {!PaymentDataRequest} paymentDataRequest Provides necessary
-   *     information to support a payment.
-   * @return {!Promise<!PaymentData>}
-   * @export
-   */
-  loadPaymentData(paymentDataRequest) {
-    /** @type {!Promise<!PaymentData>} */
-    const promise = new Promise(resolve => {
-      if (this.pending_) {
-        throw new Error('This method can only be called one at a time.');
-      }
-      this.pending_ = resolve;
-      this.asyncClient_.loadPaymentData(paymentDataRequest);
-    });
-
-    return promise.then(
-        (result) => {
-          this.pending_ = null;
-          return result;
-        },
-        error => {
-          this.pending_ = null;
-          throw error;
-        });
-  }
-
-  /**
-   * Return a <div> element containing Google Pay payment button.
-   *
-   * @param {ButtonOptions=} options
-   * @return {!Element}
-   * @export
-   */
-  createButton(options={}) {
-    return this.asyncClient_.createButton(options);
-  }
-}
-
-
-/**
- * Injects the provided style sheet to the document head.
- * @param {string} styleText The stylesheet to be injected.
- * @return {!Element}
- */
-function injectStyleSheet(styleText) {
-  const styleElement = document.createElement('style');
-  styleElement.type = 'text/css';
-  styleElement.textContent = styleText;
-  document.head.appendChild(styleElement);
-  return styleElement;
-}
-
-/**
- * Injects the pay with google iframe.
- * @return {!{container: !Element, iframe:!HTMLIFrameElement}}
- */
-function injectIframe() {
-  const container = document.createElement('div');
-  container.classList.add('dialogContainer');
-  const iframeContainer = document.createElement('div');
-  iframeContainer.classList.add('iframeContainer');
-  /** @private @const {!HTMLIFrameElement} */
-  const iframe =
-      /** @type {!HTMLIFrameElement} */ (document.createElement('iframe'));
-  iframe.classList.add('dialog');
-  iframe.setAttribute('frameborder', '0');
-  iframe.setAttribute('scrolling', 'no');
-  iframeContainer.appendChild(iframe);
-  container.appendChild(iframeContainer);
-  document.body.appendChild(container);
-  return {'container': container, 'iframe': iframe};
-}
-
-/**
- * PaymentRequest.
- *
- * @constructor
- * @see https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/PaymentRequest
- */
-function PaymentRequest(methodData, details) {}
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/canMakePayment
- * @return {Promise<Boolean>}
- */
-PaymentRequest.prototype.canMakePayment = function() {};
-
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/show
- * @return {Promise<!PaymentResponse>}
- */
-PaymentRequest.prototype.show = function() {};
-
-/**
- * Supported interactions between iframe and merchant page.
- *
- * @enum {number}
- */
-// Next Id: 7
-const PostMessageEventType = {
-  IS_READY_TO_PAY: 6,
-  LOG_BUTTON_CLICK: 5,
-  LOG_IS_READY_TO_PAY_API: 0,
-  LOG_LOAD_PAYMENT_DATA_API: 1,
-  LOG_RENDER_BUTTON: 2,
-  LOG_INLINE_PAYMENT_WIDGET_INITIALIZE: 4,
-  LOG_INLINE_PAYMENT_WIDGET_SUBMIT: 3,
-};
-
-/**
- * Types of buy flow activity modes.
- *
- * @enum {number}
- */
-const BuyFlowActivityMode = {
-  UNKNOWN_MODE: 0,
-  IFRAME: 1,
-  POPUP: 2,
-  REDIRECT: 3,
-};
-
-/**
- * Types of buy flow activity modes.
- *
- * @enum {number}
- */
-const PublicErrorCode = {
-  UNKNOWN_ERROR_TYPE: 0,
-  INTERNAL_ERROR: 1,
-  DEVELOPER_ERROR: 2,
-  BUYER_ACCOUNT_ERROR: 3,
-  MERCHANT_ACCOUNT_ERROR: 4,
-  UNSUPPORTED_API_VERSION: 5,
-  BUYER_CANCEL: 6,
-};
-
-/**
- * Iframe used for logging and prefetching.
- *
- * @type {?Element}
- */
-let iframe = null;
-
-/** @type {?PostMessageService} */
-let postMessageService = null;
-
-/** @type {?string} */
-let environment = null;
-
-/** @type {?BuyFlowActivityMode} */
-let buyFlowActivityMode = null;
-
-/** @type {?string} */
-let googleTransactionId = null;
-
-/** @type {boolean} */
-let iframeLoaded = false;
-
-/** @type {!Array<!Object>} */
-let buffer = [];
-
-class PayFrameHelper {
-  /**
-   * Creates a hidden iframe for logging and appends it to the top level
-   * document.
-   *
-   * @param {string} env
-   */
-  static load(env) {
-    if (iframe) {
-      return;
-    }
-    environment = env;
-    iframe = document.createElement('iframe');
-    // Pass in origin because document.referrer inside iframe is empty in
-    // certain cases
-    iframe.src = PayFrameHelper.getIframeUrl_(window.location.origin);
-    iframe.height = '0';
-    iframe.width = '0';
-    iframe.style.display = 'none';
-    iframe.style.visibility = 'hidden';
-    iframe.onload = function() {
-      PayFrameHelper.iframeLoaded();
-    };
-    document.body.appendChild(iframe);
-    postMessageService = new PostMessageService(iframe.contentWindow);
-  }
-
-  /**
-   * Posts a message to the iframe with the given data.
-   *
-   * @param {!Object} data
-   */
-  static postMessage(data) {
-    if (!iframeLoaded) {
-      buffer.push(data);
-      return;
-    }
-    const postMessageData = Object.assign(
-        {
-          'buyFlowActivityMode': buyFlowActivityMode,
-          'googleTransactionId': googleTransactionId,
-        },
-        data);
-    postMessageService.postMessage(
-        postMessageData, PayFrameHelper.getIframeOrigin_());
-  }
-
-  /**
-   *
-   * Sets the google transaction id.
-   *
-   * @param {string} id
-   */
-  static setGoogleTransactionId(id) {
-    googleTransactionId = id;
-  }
-
-  /**
-   *
-   * Sets the activity mode.
-   *
-   * @param {!BuyFlowActivityMode} mode
-   */
-  static setBuyFlowActivityMode(mode) {
-    buyFlowActivityMode = mode;
-  }
-
-  /**
-   * Override postMessageService for testing.
-   *
-   * @param {!PostMessageService} messageService
-   */
-  static setPostMessageService(messageService) {
-    postMessageService = messageService;
-  }
-
-  /**
-   * Clears the singleton variables.
-   */
-  static reset() {
-    iframe = null;
-    buffer.length = 0;
-    iframeLoaded = false;
-  }
-
-  /**
-   * Sets whether the iframe has been loaded or not.
-   *
-   * @param {boolean} loaded
-   */
-  static setIframeLoaded(loaded) {
-    iframeLoaded = loaded;
-  }
-
-  /**
-   * Called whenever the iframe is loaded.
-   */
-  static iframeLoaded() {
-    iframeLoaded = true;
-    buffer.forEach(function(data) {
-      PayFrameHelper.postMessage(data);
-    });
-  }
-
-  /**
-   * Returns the events that have been buffered.
-   *
-   * @return {!Array<!Object>}
-   */
-  static getBuffer() {
-    return buffer;
-  }
-
-  /**
-   * Mocks the iframe as an arbitrary html element instead of actually injecting
-   * it for testing.
-   */
-  static injectIframeForTesting() {
-    PayFrameHelper.reset();
-    iframe = document.createElement('p');
-    PayFrameHelper.iframeLoaded();
-  }
-
-  /**
-   * Returns the payframe origin based on the environment.
-   *
-   * @return {string}
-   * @private
-   */
-  static getIframeOrigin_() {
-    return 'https://pay.' +
-        (environment === Constants.Environment.SANDBOX ? 'sandbox.' : '') +
-        'google.com';
-  }
-
-  /**
-   * Returns the payframe URL based on the environment.
-   *
-   * @param {string} origin The origin that is opening the payframe.
-   * @return {string}
-   * @private
-   */
-  static getIframeUrl_(origin) {
-    return PayFrameHelper.getIframeOrigin_() + '/gp/p/ui/payframe?origin=' +
-        encodeURIComponent(window.location.origin);
-  }
-}
-
-const TRUSTED_DOMAINS = [
-  'actions.google.com',
-  'amp-actions.sandbox.google.com',
-  'amp-actions-staging.sandbox.google.com',
-  'amp-actions-autopush.sandbox.google.com',
-  'payments.developers.google.com',
-  'payments.google.com',
-];
-
-/**
- * The client for interacting with the Google Payment APIs.
- * <p>
- * The async refers to the fact that this client supports redirects
- * when using webactivties.
- * <p>
- * If you are using this be sure that this is what you want.
- * <p>
- * In almost all cases PaymentsClient is the better client to use because
- * it exposes a promises based api which is easier to deal with.
- * @final
- */
-class PaymentsAsyncClient {
-  /**
-   * @param {PaymentOptions} paymentOptions
-   * @param {function(!Promise<!PaymentData>)} onPaymentResponse
-   * @param {boolean=} opt_useIframe
-   */
-  constructor(paymentOptions, onPaymentResponse, opt_useIframe) {
-    this.onPaymentResponse_ = onPaymentResponse;
-
-    validatePaymentOptions(paymentOptions);
-
-    /** @private {?number} */
-    this.loadPaymentDataApiStartTimeMs_ = null;
-
-    /** @private @const {string} */
-    this.environment_ =
-        paymentOptions.environment || Constants.Environment.TEST;
-
-    /** @const @private {string} */
-    this.googleTransactionId_ =
-        this.createGoogleTransactionId_(this.environment_);
-
-    /** @private @const {?PaymentsClientDelegateInterface} */
-    this.webActivityDelegate_ = new PaymentsWebActivityDelegate(
-        this.environment_, this.googleTransactionId_, opt_useIframe);
-
-    // TODO: Remove the temporary hack that disable payments
-    // request for inline flow.
-    /** @private @const {?PaymentsClientDelegateInterface} */
-    this.delegate_ = chromeSupportsPaymentRequest() && !opt_useIframe ?
-        new PaymentsRequestDelegate(this.environment_) :
-        this.webActivityDelegate_;
-
-    this.webActivityDelegate_.onResult(this.onResult_.bind(this));
-    this.delegate_.onResult(this.onResult_.bind(this));
-
-    PayFrameHelper.load(this.environment_);
-    PayFrameHelper.setGoogleTransactionId(this.googleTransactionId_);
-
-    window.addEventListener(
-        'message', event => this.handleMessageEvent_(event));
-  }
-
-  /**
-   * Check whether the user can make payments using the Payment API.
-   *
-   * @param {!IsReadyToPayRequest} isReadyToPayRequest
-   * @return {!Promise} The promise will contain the boolean result and error
-   *     message when possible.
-   * @export
-   */
-  isReadyToPay(isReadyToPayRequest) {
-    /** @type {?string} */
-    const errorMessage = validateSecureContext() ||
-        validateIsReadyToPayRequest(isReadyToPayRequest);
-    if (errorMessage) {
-      return new Promise((resolve, reject) => {
-        PaymentsAsyncClient.logDevErrorToConsole_('isReadyToPay', errorMessage);
-        PayFrameHelper.postMessage({
-          'eventType': PostMessageEventType.LOG_IS_READY_TO_PAY_API,
-          'error': PublicErrorCode.DEVELOPER_ERROR,
-        });
-        reject({
-          'statusCode': Constants.ResponseStatus.DEVELOPER_ERROR,
-          'statusMessage': errorMessage
-        });
-      });
-    }
-    const startTimeMs = Date.now();
-    const webPromise =
-        this.webActivityDelegate_.isReadyToPay(isReadyToPayRequest)
-            .then(response => {
-              PayFrameHelper.postMessage({
-                'eventType': PostMessageEventType.LOG_IS_READY_TO_PAY_API,
-                'clientLatencyStartMs': startTimeMs,
-                'isReadyToPayApiResult': response['result'],
-              });
-              return response;
-            });
-
-    if (chromeSupportsPaymentRequest()) {
-      // If the merchant supports only Tokenized cards then just rely on
-      // delegate to give us the result.
-      // This will need to change once b/78519188 is fixed.
-      const nativePromise = this.delegate_.isReadyToPay(
-          isReadyToPayRequest);
-      if (doesMerchantSupportOnlyTokenizedCards(isReadyToPayRequest)) {
-        return nativePromise;
-      }
-      // Return webIsReadyToPay only if delegateIsReadyToPay has been executed.
-      return nativePromise.then(() => webPromise);
-    }
-    return webPromise;
-  }
-
-  /**
-   * Prefetch paymentData to speed up loadPaymentData call. Note the provided
-   * paymentDataRequest should exactly be the same as provided in
-   * loadPaymentData to make the loadPaymentData call fast since current
-   * web flow prefetching is based on the full request parameters.
-   *
-   * @param {!PaymentDataRequest} paymentDataRequest Provides necessary
-   *     information to support a payment.
-   * @export
-   */
-  prefetchPaymentData(paymentDataRequest) {
-    /** @type {?string} */
-    const errorMessage = validateSecureContext() ||
-        validatePaymentDataRequest(paymentDataRequest);
-    if (errorMessage) {
-      PaymentsAsyncClient.logDevErrorToConsole_(
-          'prefetchPaymentData', errorMessage);
-      return;
-    }
-    if (chromeSupportsPaymentRequest()) {
-      this.delegate_.prefetchPaymentData(paymentDataRequest);
-    } else {
-      // For non chrome supports always use the hosting page.
-      this.webActivityDelegate_.prefetchPaymentData(paymentDataRequest);
-    }
-  }
-
-  /**
-   * Request PaymentData, which contains necessary infomartion to complete a
-   * payment.
-   *
-   * @param {!PaymentDataRequest} paymentDataRequest Provides necessary
-   *     information to support a payment.
-   * @export
-   */
-  loadPaymentData(paymentDataRequest) {
-    PayFrameHelper.postMessage({
-      'eventType': PostMessageEventType.LOG_BUTTON_CLICK,
-    });
-    const errorMessage = validateSecureContext() ||
-        validatePaymentDataRequest(paymentDataRequest);
-    if (errorMessage) {
-      this.onPaymentResponse_(new Promise((resolve, reject) => {
-        PayFrameHelper.postMessage({
-          'eventType': PostMessageEventType.LOG_LOAD_PAYMENT_DATA_API,
-          'error': PublicErrorCode.DEVELOPER_ERROR,
-        });
-        PaymentsAsyncClient.logDevErrorToConsole_(
-            'loadPaymentData', errorMessage);
-        reject({
-          'statusCode': Constants.ResponseStatus.DEVELOPER_ERROR,
-          'statusMessage': errorMessage
-        });
-      }));
-      return;
-    }
-
-    const paymentRequestUnavailable = window.sessionStorage.getItem(
-        Constants.IS_READY_TO_PAY_RESULT_KEY) === 'false';
-    this.loadPaymentDataApiStartTimeMs_ = Date.now();
-    if (paymentDataRequest.swg || paymentRequestUnavailable) {
-      // For SWG and clients where canMakePayment returns false, always use
-      // hosting page.
-      this.webActivityDelegate_.loadPaymentData(paymentDataRequest);
-    } else {
-      this.delegate_.loadPaymentData(paymentDataRequest);
-    }
-  }
-
-  /**
-   * Log developer error to console.
-   *
-   * @param {string} apiName
-   * @param {?string} errorMessage
-   * @private
-   */
-  static logDevErrorToConsole_(apiName, errorMessage) {
-    console.error('DEVELOPER_ERROR in ' + apiName + ' : ' + errorMessage);
-  }
-
-  /**
-   * Return a <div> element containing a Google Pay payment button.
-   *
-   * @param {ButtonOptions=} options
-   * @return {!Element}
-   * @export
-   */
-  createButton(options = {}) {
-    let button = createButtonHelper(options);
-    // Only log if button was created successfully
-    PayFrameHelper.postMessage({
-      'eventType': PostMessageEventType.LOG_RENDER_BUTTON,
-    });
-    return button;
-  }
-
-  /**
-   * @param {!Event} e postMessage event from the AMP page.
-   * @private
-   */
-  handleMessageEvent_(e) {
-    if (this.isInTrustedDomain_()) {
-      // Only handles the event right now if loaded in trusted domain.
-      if (e.data['name'] === 'logPaymentData') {
-        PayFrameHelper.postMessage(e.data['data']);
-      }
-    }
-  }
-
-  /**
-   * @private
-   * @return {boolean}
-   */
-  isInTrustedDomain_() {
-    return TRUSTED_DOMAINS.indexOf(window.location.hostname) != -1;
-  }
-
-  /**
-   * Called when load payment data result is returned. This triggers the payment
-   * response callback passed to the client.
-   *
-   * @private
-   */
-  onResult_(response) {
-    response
-        .then(result => {
-          PayFrameHelper.postMessage({
-            'eventType': PostMessageEventType.LOG_LOAD_PAYMENT_DATA_API,
-            'clientLatencyStartMs': this.loadPaymentDataApiStartTimeMs_,
-          });
-        })
-        .catch(result => {
-          if (result['errorCode']) {
-            PayFrameHelper.postMessage({
-              'eventType': PostMessageEventType.LOG_LOAD_PAYMENT_DATA_API,
-              'error': /** @type {!PublicErrorCode} */ (result['errorCode']),
-            });
-          } else {
-            // If user closes window we don't get a error code
-            PayFrameHelper.postMessage({
-              'eventType': PostMessageEventType.LOG_LOAD_PAYMENT_DATA_API,
-              'error': PublicErrorCode.BUYER_CANCEL,
-            });
-          }
-        });
-    this.onPaymentResponse_(response);
-  }
-
-  /**
-   * Returns a google transaction id.
-   *
-   * @param {string} environment
-   * @return {string}
-   * @private
-   */
-  createGoogleTransactionId_(environment) {
-    return Random_uuid.uuidFast() + '.' + environment;
-  }
-}
-
-
-/**
- * An implementation of PaymentsClientDelegateInterface that leverages payment
- * request.
- * @implements {PaymentsClientDelegateInterface}
- */
-class PaymentsRequestDelegate {
-  /**
-   * @param {string} environment
-   */
-  constructor(environment) {
-    this.environment_ = environment;
-
-    /** @private {?function(!Promise<!PaymentData>)} */
-    this.callback_ = null;
-  }
-
-  /** @override */
-  onResult(callback) {
-    this.callback_ = callback;
-  }
-
-  /** @override */
-  isReadyToPay(isReadyToPayRequest) {
-    /** @type{!PaymentRequest} */
-    const paymentRequest = this.createPaymentRequest_(isReadyToPayRequest);
-    return new Promise((resolve, reject) => {
-      paymentRequest.canMakePayment()
-          .then((/** @type {boolean} */ result) => {
-            window.sessionStorage.setItem(
-                Constants.IS_READY_TO_PAY_RESULT_KEY, result.toString());
-            resolve({'result': result});
-          })
-          .catch(function(err) {
-            if (window.sessionStorage.getItem(
-                    Constants.IS_READY_TO_PAY_RESULT_KEY)) {
-              resolve({
-                'result': window.sessionStorage.getItem(
-                              Constants.IS_READY_TO_PAY_RESULT_KEY) == 'true'
-              });
-            } else {
-              resolve({'result': false});
-            }
-          });
-    });
-  }
-
-  /** @override */
-  prefetchPaymentData(paymentDataRequest) {
-    // Creating PaymentRequest instance will call
-    // Gcore isReadyToPay internally which will prefetch tempaltes.
-    this.createPaymentRequest_(
-        paymentDataRequest, this.environment_,
-        paymentDataRequest.transactionInfo.currencyCode,
-        paymentDataRequest.transactionInfo.totalPrice);
-  }
-
-  /** @override */
-  loadPaymentData(paymentDataRequest) {
-    this.loadPaymentDataThroughPaymentRequest_(paymentDataRequest);
-  }
-
-  /**
-   * Create PaymentRequest instance.
-   *
-   * @param {!IsReadyToPayRequest|!PaymentDataRequest} request The necessary information to check if user is
-   *     ready to pay or to support a payment from merchants.
-   * @param {?string=} environment (optional)
-   * @param {?string=} currencyCode (optional)
-   * @param {?string=} totalPrice (optional)
-   * @return {!PaymentRequest} PaymentRequest instance.
-   * @private
-   */
-  createPaymentRequest_(request, environment, currencyCode, totalPrice) {
-    let data = {};
-    if (request) {
-      data = Object.assign({}, request);
-    }
-    // If its a payment data request delete transaction info otherwise we don't
-    // care.
-    delete data['transactionInfo'];
-
-    // Only set the apiVersion if the merchant doesn't set it.
-    if (!data['apiVersion']) {
-      data['apiVersion'] = 1;
-    }
-    if (environment && environment == Constants.Environment.TEST) {
-      data['environment'] = environment;
-    }
-
-    const supportedInstruments = [{
-      'supportedMethods': ['https://google.com/pay'],
-      'data': data,
-    }];
-
-    const details = {
-      'total': {
-        'label': 'Estimated Total Price',
-        'amount': {
-          // currency and value are required fields in PaymentRequest, but these
-          // fields will never be used since PaymentRequest UI is skipped when
-          // we're the only payment method, so default to some value to by pass
-          // this requirement.
-          'currency': currencyCode || 'USD',
-          'value': totalPrice || '0',
-        }
-      }
-    };
-
-    return new PaymentRequest(supportedInstruments, details);
-  }
-
-  /**
-   * @param {!PaymentDataRequest} paymentDataRequest Provides necessary
-   *     information to support a payment.
-   * @private
-   */
-  loadPaymentDataThroughPaymentRequest_(paymentDataRequest) {
-    const paymentRequest = this.createPaymentRequest_(
-        paymentDataRequest, this.environment_,
-        paymentDataRequest.transactionInfo.currencyCode,
-        paymentDataRequest.transactionInfo.totalPrice);
-    this.callback_(
-        /** @type{!Promise<!PaymentData>} */
-        (paymentRequest.show()
-             .then(
-                 /**
-                  * @param {!PaymentResponse} paymentResponse
-                  * @return {!PaymentData}
-                  */
-                 (paymentResponse) => {
-                   // Should be called to dismiss any remaining UI
-                   paymentResponse.complete('success');
-                   return paymentResponse.details;
-                 })
-             .catch(function(err) {
-               err['statusCode'] = Constants.ResponseStatus.CANCELED;
-               throw err;
-             })));
-  }
-}
-
-const IFRAME_CLOSE_DURATION_IN_MS = 300;
-const IFRAME_SHOW_UP_DURATION_IN_MS = 300;
-const ERROR_PREFIX = 'Error: ';
-
-/**
- * Supported browser user agent keys.
- *
- * @enum {string}
- */
-const BrowserUserAgent = {
-  CHROME: 'Chrome',
-  FIREFOX: 'Firefox',
-  SAFARI: 'Safari',
-};
-
-
-/**
- * An implementation of PaymentsClientDelegateInterface that uses the custom
- * hosting page along with web activities to actually get to the hosting page.
- * @implements {PaymentsClientDelegateInterface}
- */
-class PaymentsWebActivityDelegate {
-  /**
-   * @param {string} environment
-   * @param {string} googleTransactionId
-   * @param {boolean=} opt_useIframe
-   */
-  constructor(environment, googleTransactionId, opt_useIframe) {
-    this.environment_ = environment;
-    /** @private @const {boolean} */
-    this.useIframe_ = opt_useIframe || false;
-    this.activities = new ActivityPorts(window);
-    /** @private {?function(!Promise<!PaymentData>)} */
-    this.callback_ = null;
-    /**
-     * @private {?{
-     *             container: !Element,
-     *             iframe:!HTMLIFrameElement,
-     *             request:!PaymentDataRequest,
-     *             dataPromise:?Promise<!PaymentData>}}
-     */
-    this.prefetchedObjects_ = null;
-    /** @private {boolean} */
-    this.shouldHandleResizing_ = false;
-    /** @private {?ActivityIframePort} */
-    this.port_ = null;
-    /** @private {?function(!Promise<void>)} */
-    this.dismissPromiseResolver_ = null;
-    /** @const @private {string} */
-    this.googleTransactionId_ = googleTransactionId;
-
-    /**
-     * @private {?ResizePayload}
-     */
-    this.savedResizePayload_ = null;
-
-    PayFrameHelper.setGoogleTransactionId(this.googleTransactionId_);
-
-    injectStyleSheet(Constants.IFRAME_STYLE);
-  }
-
-  /** @override */
-  onResult(callback) {
-    if (this.callback_) {
-      return;
-    }
-    this.callback_ = callback;
-    this.activities.onResult('request1', (port) => {
-      // Only verified origins are allowed.
-      callback(port.acceptResult().then(
-          (result) => {
-            const data = /** @type {!PaymentData} */ (result.data);
-            if (data['redirectEncryptedCallbackData']) {
-              PayFrameHelper.setBuyFlowActivityMode(
-                  BuyFlowActivityMode.REDIRECT);
-              return fetch(this.getDecryptionUrl_(), {
-                       method: 'post',
-                       credentials: 'include',
-                       mode: 'cors',
-                       body: data['redirectEncryptedCallbackData'],
-                     })
-                  .then((response) => {
-                    return response.json();
-                  });
-            }
-            return data;
-          },
-          (error) => {
-            // TODO: Log the original and the inferred error to eye3.
-            let originalError = error['message'];
-            let inferredError = error['message'];
-            try {
-              // Try to parse the error message to a structured error, if it's
-              // not possible, fallback to use the error message string.
-              inferredError =
-                  JSON.parse(originalError.substring(ERROR_PREFIX.length));
-            } catch (e) {
-            }
-            if (inferredError['statusCode'] && [
-                  'DEVELOPER_ERROR', 'MERCHANT_ACCOUNT_ERROR'
-                ].indexOf(inferredError['statusCode']) == -1) {
-              inferredError = {
-                'statusCode': 'CANCELED',
-              };
-            }
-            if (inferredError == 'AbortError') {
-              inferredError = {
-                'statusCode': 'CANCELED',
-              };
-            }
-            console.log(
-                'Google Pay request failed, error:\n' +
-                JSON.stringify(inferredError));
-            return Promise.reject(inferredError);
-          }));
-    });
-  }
-
-  /** @override */
-  isReadyToPay(isReadyToPayRequest) {
-    return new Promise((resolve, reject) => {
-      if (doesMerchantSupportOnlyTokenizedCards(isReadyToPayRequest)) {
-        resolve({'result': false});
-        return;
-      }
-      const userAgent = window.navigator.userAgent;
-      const isIosGsa = userAgent.indexOf('GSA/') > 0 &&
-          userAgent.indexOf(BrowserUserAgent.SAFARI) > 0;
-      if (isIosGsa) {
-        resolve({'result': false});
-        return;
-      }
-      const isFirefoxIos = userAgent.indexOf('FxiOS') > 0;
-      if (isFirefoxIos) {
-        resolve({'result': false});
-        return;
-      }
-      const isEdge = userAgent.indexOf('Edge/') > 0;
-      if (isEdge) {
-        resolve({'result': false});
-        return;
-      }
-      const isSupported = userAgent.indexOf(BrowserUserAgent.CHROME) > 0 ||
-          userAgent.indexOf(BrowserUserAgent.FIREFOX) > 0 ||
-          userAgent.indexOf(BrowserUserAgent.SAFARI) > 0;
-      resolve({'result': isSupported});
-    });
-  }
-
-  /** @override */
-  prefetchPaymentData(paymentDataRequest) {
-    // Only handles prefetch for iframe for now.
-    if (!this.useIframe_) {
-      return;
-    }
-    const containerAndFrame = this.injectIframe_();
-    const paymentDataPromise = this.openIframe_(
-        containerAndFrame['container'], containerAndFrame['iframe'],
-        paymentDataRequest);
-    this.prefetchedObjects_ = {
-      'container': containerAndFrame['container'],
-      'iframe': containerAndFrame['iframe'],
-      'request': paymentDataRequest,
-      'dataPromise': paymentDataPromise,
-    };
-  }
-
-  /** @override */
-  loadPaymentData(paymentDataRequest) {
-    const internalParam = {
-      'startTimeMs': Date.now(),
-      'googleTransactionId': this.googleTransactionId_,
-    };
-    paymentDataRequest['i'] = paymentDataRequest['i'] ?
-        Object.assign(internalParam, paymentDataRequest['i']) :
-        internalParam;
-    if (!paymentDataRequest.swg) {
-      // Only set the apiVersion if the merchant is not setting it.
-      if (!paymentDataRequest.apiVersion) {
-        paymentDataRequest.apiVersion = 1;
-      }
-    }
-    paymentDataRequest.environment = this.environment_;
-    if (this.useIframe_) {
-      PayFrameHelper.setBuyFlowActivityMode(BuyFlowActivityMode.IFRAME);
-      // TODO: Compare the request with prefetched request.
-      // goog.object.equals won't work as it doesn't do deep comparison.
-      let containerAndFrame;
-      let paymentDataPromise;
-      if (this.prefetchedObjects_) {
-        // Rendering prefetched frame and container.
-        containerAndFrame = this.prefetchedObjects_;
-        paymentDataPromise = this.prefetchedObjects_['dataPromise'];
-        this.prefetchedObjects_ = null;
-      } else {
-        containerAndFrame = this.injectIframe_();
-        paymentDataPromise = this.openIframe_(
-            containerAndFrame['container'], containerAndFrame['iframe'],
-            paymentDataRequest);
-      }
-      this.showContainerAndIframeWithAnimation_(
-          containerAndFrame['container'], containerAndFrame['iframe']);
-      const dismissPromise = new Promise(resolve => {
-        this.dismissPromiseResolver_ = resolve;
-      });
-      this.callback_(Promise.race([paymentDataPromise, dismissPromise]));
-      return;
-    }
-    PayFrameHelper.setBuyFlowActivityMode(
-        paymentDataRequest['forceRedirect'] ? BuyFlowActivityMode.REDIRECT :
-                                              BuyFlowActivityMode.POPUP);
-    this.activities.open(
-        'request1', this.getHostingPageUrl_(),
-        this.getRenderMode_(paymentDataRequest), paymentDataRequest,
-        {'width': 600, 'height': 600});
-  }
-
-
-  /**
-   * Returns the render mode whether need to force redirect.
-   *
-   * @param {!PaymentDataRequest} paymentDataRequest
-   * @return {string}
-   * @private
-   */
-  getRenderMode_(paymentDataRequest) {
-    return paymentDataRequest['forceRedirect'] ? '_top' : 'gp-js-popup';
-  }
-
-  /**
-   * Returns the base path based on the environment.
-   *
-   * @private
-   * @return {string} The base path
-   */
-  getBasePath_() {
-    var baseDomain;
-    if (this.environment_ == Constants.Environment.SANDBOX) {
-      baseDomain = 'https://pay.sandbox.google.com';
-    } else {
-      baseDomain = 'https://pay.google.com';
-    }
-    return baseDomain + "/gp/p";
-  }
-
-  /**
-   * Returns the decryption url to be used to decrypt the encrypted payload.
-   *
-   * @private
-   * @return {string} The decryption url
-   */
-  getDecryptionUrl_() {
-    return this.getBasePath_() + '/apis/buyflow/process';
-  }
-
-  /**
-   * Returns the hosting page url.
-   *
-   * @private
-   * @return {string} The hosting page url
-   */
-  getHostingPageUrl_() {
-    return this.getBasePath_() + '/ui/pay';
-  }
-
-  /**
-   * Returns the iframe pwg url to be used to be used for amp.
-   *
-   * @param {string} environment
-   * @param {string} origin
-   * @return {string} The iframe url
-   */
-  getIframeUrl(environment, origin) {
-    // TODO: These should be compile time constants and not dependent
-    // on the environment.
-    let iframeUrl = `https://pay.google.com/gp/p/ui/pay?origin=${origin}`;
-    if (environment == Constants.Environment.SANDBOX) {
-      iframeUrl = `https://pay.sandbox.google.com/gp/p/ui/pay?origin=${origin}`;
-    }
-    return iframeUrl;
-  }
-
-  /**
-   * Close iframe with animation.
-   *
-   * @param {!Element} container
-   * @param {!HTMLIFrameElement} iframe
-   * @private
-   */
-  removeIframeAndContainer_(container, iframe) {
-    const transitionStyle = 'all ' + IFRAME_CLOSE_DURATION_IN_MS + 'ms ease 0s';
-    this.setTransition_(iframe, transitionStyle);
-    iframe.height = '0px';
-    // TODO: This should be replaced by listening to TransitionEnd event
-    setTimeout(() => {
-      container.parentNode.removeChild(container);
-    }, IFRAME_CLOSE_DURATION_IN_MS);
-  }
-
-  /**
-   * @return {{container: !Element, iframe:!HTMLIFrameElement}}
-   * @private
-   */
-  injectIframe_() {
-    const containerAndFrame = injectIframe();
-    const iframe = containerAndFrame['iframe'];
-    const container = containerAndFrame['container'];
-    container.addEventListener(
-        'click', this.dismissIframe_.bind(this, containerAndFrame));
-    // Hide iframe and disable resize at initialize.
-    container.style.display = 'none';
-    iframe.style.display = 'none';
-    iframe.height = '0px';
-    const transitionStyle =
-        'all ' + IFRAME_SHOW_UP_DURATION_IN_MS + 'ms ease 0s';
-    this.setTransition_(iframe, transitionStyle);
-    this.shouldHandleResizing_ = false;
-    return containerAndFrame;
-  }
-
-  /**
-   * @param {{container: !Element, iframe:!HTMLIFrameElement}} containerAndFrame
-   * @private
-   */
-  dismissIframe_(containerAndFrame) {
-    // TODO: Think about whether this could be just hide instead of
-    // disconnect and remove, the tricky part is how to handle the case where
-    // payment data request is not the same.
-    this.dismissPromiseResolver_(
-        Promise.reject({'errorCode': 'CANCELED'}));
-    this.removeIframeAndContainer_(
-        containerAndFrame['container'], containerAndFrame['iframe']);
-    this.port_.disconnect();
-  }
-
-  /**
-   * @param {!Element} container
-   * @param {!HTMLIFrameElement} iframe
-   * @private
-   */
-  showContainerAndIframeWithAnimation_(container, iframe) {
-    container.style.display = 'block';
-    iframe.style.display = 'block';
-    setTimeout(() => {
-      // Hard code the apprx height here, it will be resize to expected height
-      // later.
-      iframe.height = '260px';
-      // TODO: This should be handles properly by listening to
-      // TransitionEnd event.
-      setTimeout(() => {
-        this.shouldHandleResizing_ = true;
-        // TODO: Add browser test that catches this.
-        if (this.savedResizePayload_) {
-          this.setTransition_(iframe, this.savedResizePayload_['transition']);
-          iframe.height = this.savedResizePayload_['height'];
-          this.savedResizePayload_ = null;
-        }
-      }, IFRAME_SHOW_UP_DURATION_IN_MS);
-    }, 1);
-  }
-
-  /**
-   * @param {!HTMLIFrameElement} iframe
-   * @param {string} transitionStyle
-   * @private
-   */
-  setTransition_(iframe, transitionStyle) {
-    iframe.style.setProperty('transition', transitionStyle);
-    // For safari.
-    iframe.style.setProperty('-webkit-transition', transitionStyle);
-  }
-
-  /**
-   * Use WebActivitiy to open iframe that's in given container.
-   *
-   * @param {!Element} container
-   * @param {!HTMLIFrameElement} iframe
-   * @param {!PaymentDataRequest} paymentDataRequest
-   * @return {!Promise<!PaymentData>}
-   * @private
-   */
-  openIframe_(container, iframe, paymentDataRequest) {
-    if (!paymentDataRequest.swg) {
-      if (!paymentDataRequest.apiVersion) {
-        paymentDataRequest.apiVersion = 1;
-      }
-      paymentDataRequest.allowedPaymentMethods = [Constants.PaymentMethod.CARD];
-    }
-    paymentDataRequest.environment = this.environment_;
-    const trustedUrl =
-        this.getIframeUrl(this.environment_, window.location.origin);
-    return this.activities.openIframe(iframe, trustedUrl, paymentDataRequest)
-        .then(port => {
-          // Handle custom resize message.
-          this.port_ = port;
-          port.onMessage(payload => {
-            if (payload['type'] !== 'resize' || !this.shouldHandleResizing_) {
-              // Save the resize event later after initial animation is finished
-              this.savedResizePayload_ = {
-                'height': payload['height'],
-                'transition': payload['transition']
-              };
-              return;
-            }
-            this.setTransition_(iframe, payload['transition']);
-            iframe.height = payload['height'];
-          });
-          return /** @type {!Promise<!Object>} */ (port.acceptResult());
-        })
-        .then(
-            /**
-             * @param {!Object} result
-             * @return {!PaymentData}
-             */
-            result => {
-              this.removeIframeAndContainer_(container, iframe);
-              const data = /** @type {!PaymentData} */ (result['data']);
-              return data;
-            },
-            error => {
-              this.removeIframeAndContainer_(container, iframe);
-              return Promise.reject(error);
-            });
-  }
-}
-
-
-
-
-/**
- * An object-literal namespace
- */
-google.payments = {};
-google.payments.api = {};
-
-/**
- * The client for interacting with the Google Pay APIs.
- * @constructor
- * @see https://developers.google.com/pay/api/web/client-reference.
- */
-google.payments.api.PaymentsClient = function(paymentOptions, opt_useIframe) {};
-
-/**
- * @see https://developers.google.com/pay/api/web/client-reference#isReadyToPay
- */
-google.payments.api.PaymentsClient.prototype.isReadyToPay = function() {};
-
-/**
- * @see https://developers.google.com/pay/api/web/client-reference#loadPaymentData
- */
-google.payments.api.PaymentsClient.prototype.loadPaymentData = function() {};
-
-/**
- * @see https://developers.google.com/pay/api/web/client-reference#prefetchPaymentData
- */
-google.payments.api.PaymentsClient.prototype.prefetchPaymentData =
-    function() {};
-
-
-/**
- * Service wrapping window.parent.postMessage. This enables
- * window.postMessage to be swapped out in unit tests.
- */
-class PostMessageService {
-  constructor(window) {
-    /** @private @const {!Window} */
-    this.window_ = window;
-  }
-
-  /**
-   * Passthrough to Window#postMessage. See Window#postMessage DOM API
-   * documentation for more information about arguments.
-   *
-   * @param {!Object} message
-   * @param {string} targetOrigin
-   */
-  postMessage(message, targetOrigin) {
-    this.window_.postMessage(message, targetOrigin);
-  }
-}
-
-/**
- * @return {boolean} true if this version of Chrome supports PaymentRequest.
- */
-function chromeSupportsPaymentRequest() {
-  // Opera uses chrome as rendering engine and sends almost the exact same
-  // user agent as chrome thereby fooling us on android.
-  const isOpera = window.navigator.userAgent.indexOf('OPR/') != -1;
-  if (isOpera) {
-    return false;
-  }
-  const androidPlatform = window.navigator.userAgent.match(/Android/i);
-  const chromeVersion = window.navigator.userAgent.match(/Chrome\/([0-9]+)\./i);
-  return androidPlatform != null && 'PaymentRequest' in window &&
-      // Make sure skipping PaymentRequest UI when only one PaymentMethod is
-      // supported (starts on Google Chrome 59).
-      window.navigator.vendor == 'Google Inc.' && chromeVersion != null &&
-      Number(chromeVersion[1]) >= 59;
-}
-
-/**
- * @param {!IsReadyToPayRequest} isReadyToPayRequest
- *
- * @return {boolean} true if the merchant only supports tokenized cards.
- */
-function doesMerchantSupportOnlyTokenizedCards(isReadyToPayRequest) {
-  return isReadyToPayRequest.allowedPaymentMethods.length == 1 &&
-      isReadyToPayRequest.allowedPaymentMethods[0] ==
-      Constants.PaymentMethod.TOKENIZED_CARD;
-}
-
-/**
- * Validate if is secure context. Returns null if context is secure, otherwise
- * return error message.
- *
- * See https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts
- *
- * @return {?string} null if current context is secure, otherwise return error
- * message.
- */
-function validateSecureContext() {
-  if (window.location.hostname.endsWith(Constants.TRUSTED_DOMAIN)) {
-    // This is for local development.
-    return null;
-  }
-  if (window.isSecureContext === undefined) {
-    // Browser not support isSecureContext, figure out a way to validate this
-    // for the unsupported browser.
-    return null;
-  }
-  return window.isSecureContext ?
-      null :
-      'Google Pay APIs should be called in secure context!';
-}
-
-/**
- * Validate PaymentOptions.
- *
- * @param {!PaymentOptions} paymentOptions
- */
-function validatePaymentOptions(paymentOptions) {
-  if (paymentOptions.environment &&
-      !Object.values(Constants.Environment)
-           .includes(paymentOptions.environment)) {
-    throw new Error(
-        'Parameter environment in PaymentOptions can optionally be set to ' +
-        'PRODUCTION, otherwise it defaults to TEST.');
-  }
-}
-
-/**
- * Validate IsReadyToPayRequest.
- *
- * @param {!IsReadyToPayRequest} isReadyToPayRequest
- * @return {?string} errorMessage if the request is invalid.
- */
-function validateIsReadyToPayRequest(isReadyToPayRequest) {
-  if (!isReadyToPayRequest) {
-    return 'isReadyToPayRequest must be set!';
-  } else if (
-      !isReadyToPayRequest.allowedPaymentMethods ||
-      !Array.isArray(isReadyToPayRequest.allowedPaymentMethods) ||
-      isReadyToPayRequest.allowedPaymentMethods.length == 0 ||
-      !isReadyToPayRequest.allowedPaymentMethods.every(isPaymentMethodValid)) {
-    return 'allowedPaymentMethods must be set to an array containing \'CARD\' ' +
-        'and/or \'TOKENIZED_CARD\'!';
-  }
-  return null;
-}
-
-/**
- * Validate the payment method.
- *
- * @param {string} paymentMethod
- * @return {boolean} if the current payment method is valid.
- */
-function isPaymentMethodValid(paymentMethod) {
-  return Object.values(Constants.PaymentMethod).includes(paymentMethod);
-}
-
-/**
- * Validate PaymentDataRequest.
- *
- * @param {!PaymentDataRequest} paymentDataRequest
- * @return {?string} errorMessage if the request is invalid.
- */
-function validatePaymentDataRequest(paymentDataRequest) {
-  if (!paymentDataRequest) {
-    return 'paymentDataRequest must be set!';
-  }
-  if (paymentDataRequest.swg) {
-    return validatePaymentDataRequestForSwg(paymentDataRequest.swg);
-  } else if (!paymentDataRequest.transactionInfo) {
-    return 'transactionInfo must be set!';
-  } else if (!paymentDataRequest.transactionInfo.currencyCode) {
-    return 'currencyCode in transactionInfo must be set!';
-  } else if (
-      !paymentDataRequest.transactionInfo.totalPriceStatus ||
-      !Object.values(Constants.TotalPriceStatus)
-           .includes(paymentDataRequest.transactionInfo.totalPriceStatus)) {
-    return 'totalPriceStatus in transactionInfo must be set to one of' +
-        ' NOT_CURRENTLY_KNOWN, ESTIMATED or FINAL!';
-  } else if (
-      paymentDataRequest.transactionInfo.totalPriceStatus !==
-          'NOT_CURRENTLY_KNOWN' &&
-      !paymentDataRequest.transactionInfo.totalPrice) {
-    return 'totalPrice in transactionInfo must be set when' +
-        ' totalPriceStatus is ESTIMATED or FINAL!';
-  }
-  return null;
-}
-
-/**
- * Validate parameters for swg.
- *
- * @param {?SwgParameters} swgParameters
- * @return {?string} errorMessage if the request is invalid.
- */
-function validatePaymentDataRequestForSwg(swgParameters) {
-  if (!swgParameters) {
-    return 'Swg parameters must be provided';
-  }
-  if (!swgParameters.skuId || !swgParameters.publicationId) {
-    return 'Both skuId and publicationId must be provided';
-  }
-  return null;
-}
-
-export { PaymentsClient, createButtonHelper, resetButtonStylesheet };
diff --git a/third_party/closure-library/calcdeps.sh b/third_party/closure-library/calcdeps.sh
new file mode 100755
index 0000000000000..23ade210d869d
--- /dev/null
+++ b/third_party/closure-library/calcdeps.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# Use Closure builder to generate only the necessary dependencies of the exported symbols needed.
+# Note: need to uncomment `goog.provide` to the wrapper file to have a fake namespace.
+
+CLOSURE_LIB=../../node_modules/google-closure-library
+BUILDER="$CLOSURE_LIB/closure/bin/build/closurebuilder.py"
+
+$BUILDER \
+  --root=$CLOSURE_LIB/ \
+  --root=./ \
+  --namespace="__AMP_SHA384_DIGEST"
diff --git a/third_party/closure-library/compile.sh b/third_party/closure-library/compile.sh
index cb24c2ae50c79..cb05691ab94c2 100755
--- a/third_party/closure-library/compile.sh
+++ b/third_party/closure-library/compile.sh
@@ -1,41 +1,40 @@
+#!/bin/bash
+
 # Run this file with bash to generate new closure based compiled
 # fragments for inclusion into AMP.
 
-# $1 is a path to a closure compiler jar file.
-# $2 is a path to a closure library directory.
-
-
-readonly GIT_COMMIT=`sh -c "cd $2 && git log --pretty=format:'%H' -n 1"`
+CLOSURE_LIB=../../node_modules/google-closure-library
 
+readonly VERSION=`node -e 'console.log(require("../../node_modules/google-closure-library/package.json").version)'`
 
 # We manually list deps, because this yields a 1KB smaller file size
 # over automatically managed dependencies.
 # As an output wrapper we add and export at the end, so we can use this
 # file from ES6 modules.
-java -jar $1 \
+npx google-closure-compiler \
     --compilation_level ADVANCED_OPTIMIZATIONS \
-    --js "sha384.js" \
-    --js "$2/goog/base.js" \
-    --js "$2/goog/array/array.js" \
-    --js "$2/goog/asserts/asserts.js" \
-    --js "$2/goog/crypt/crypt.js" \
-    --js "$2/goog/crypt/hash.js" \
-    --js "$2/goog/crypt/sha2_64bit.js" \
-    --js "$2/goog/crypt/sha384.js" \
-    --js "$2/goog/debug/error.js" \
-    --js "$2/goog/dom/nodetype.js" \
-    --js "$2/goog/math/long.js" \
-    --js "$2/goog/reflect/reflect.js" \
-    --js "$2/goog/string/string.js" \
-    --js_output_file "sha384-generated.js" \
-    --output_wrapper "/* Generated from closure library commit $GIT_COMMIT */
-export const sha384 = (function(){
-%output%;
-return ampSha384Digest;
-}).call(window);" \
+    --output_wrapper "/* Generated from closure library version $VERSION */\
+const window = {Uint8Array: Uint8Array};\
+export const sha384 = (function(window){\
+%output%;\
+return window.__AMP_SHA384_DIGEST;\
+}).call(window, window);" \
     --manage_closure_dependencies \
     --process_closure_primitives \
     --use_types_for_optimization \
-    --language_in=ECMASCRIPT5 \
     --language_out=ECMASCRIPT5 \
-    --define "goog.DEBUG=false"
+    --formatting=PRETTY_PRINT \
+    --define "goog.DEBUG=false" \
+    --js "sha384.js" \
+    --js "$CLOSURE_LIB/closure/goog/base.js" \
+    --js "$CLOSURE_LIB/closure/goog/array/array.js" \
+    --js "$CLOSURE_LIB/closure/goog/asserts/asserts.js" \
+    --js "$CLOSURE_LIB/closure/goog/crypt/crypt.js" \
+    --js "$CLOSURE_LIB/closure/goog/crypt/hash.js" \
+    --js "$CLOSURE_LIB/closure/goog/crypt/sha2_64bit.js" \
+    --js "$CLOSURE_LIB/closure/goog/crypt/sha384.js" \
+    --js "$CLOSURE_LIB/closure/goog/debug/error.js" \
+    --js "$CLOSURE_LIB/closure/goog/dom/nodetype.js" \
+    --js "$CLOSURE_LIB/closure/goog/math/long.js" \
+    --js "$CLOSURE_LIB/closure/goog/reflect/reflect.js" \
+    --js_output_file "sha384-generated.js"
diff --git a/third_party/closure-library/sha384-generated.js b/third_party/closure-library/sha384-generated.js
index fed0aae6cb31a..163a78bd248a8 100644
--- a/third_party/closure-library/sha384-generated.js
+++ b/third_party/closure-library/sha384-generated.js
@@ -1,22 +1,324 @@
-/* Generated from closure library commit 82d84ea198a8ff830c71501d49fe4d3abd6d459a */
-export const sha384 = (function(){
-var k=this;
-function l(a){var b=typeof a;if("object"==b)if(a){if(a instanceof Array)return"array";if(a instanceof Object)return b;var d=Object.prototype.toString.call(a);if("[object Window]"==d)return"object";if("[object Array]"==d||"number"==typeof a.length&&"undefined"!=typeof a.splice&&"undefined"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable("splice"))return"array";if("[object Function]"==d||"undefined"!=typeof a.call&&"undefined"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable("call"))return"function"}else return"null";else if("function"==
-b&&"undefined"==typeof a.call)return"object";return b}function r(a,b){function d(){}d.prototype=b.prototype;a.v=b.prototype;a.prototype=new d;a.prototype.constructor=a;a.u=function(a,e,d){for(var c=Array(arguments.length-2),f=2;f<arguments.length;f++)c[f-2]=arguments[f];return b.prototype[e].apply(a,c)}};function t(){this.f=-1};function v(a,b){this.b=a|0;this.a=b|0}function w(a){return 0<a?0x7fffffffffffffff<=a?x:new v(a,a/4294967296):0>a?-9223372036854775808>=a?z:A(new v(-a,-a/4294967296)):B}function C(a,b){return new v(a,b)}var B=C(0,0),D=C(1,0),E=C(-1,-1),x=C(4294967295,2147483647),z=C(0,2147483648);function F(a){return 4294967296*a.a+(a.b>>>0)}
-v.prototype.toString=function(a){a=a||10;if(2>a||36<a)throw Error("radix out of range: "+a);var b=this.a>>21;if(0==b||-1==b&&(0!=this.b||-2097152!=this.a))return b=F(this),10==a?""+b:b.toString(a);b=14-(a>>2);var d=Math.pow(a,b),c=C(d,d/4294967296);d=G(this,c);c=Math.abs(F(this.add(A(H(d,c)))));var e=10==a?""+c:c.toString(a);e.length<b&&(e="0000000000000".substr(e.length-b)+e);c=F(d);return(10==a?c:c.toString(a))+e};function I(a){return 0==a.b&&0==a.a}function J(a,b){return a.b==b.b&&a.a==b.a}
-function K(a,b){return a.a==b.a?a.b==b.b?0:a.b>>>0>b.b>>>0?1:-1:a.a>b.a?1:-1}function A(a){var b=~a.b+1|0;return C(b,~a.a+!b|0)}v.prototype.add=function(a){var b=this.a>>>16,d=this.a&65535,c=this.b>>>16,e=a.a>>>16,f=a.a&65535,g=a.b>>>16;a=(this.b&65535)+(a.b&65535);g=(a>>>16)+(c+g);c=g>>>16;c+=d+f;b=(c>>>16)+(b+e)&65535;return C((g&65535)<<16|a&65535,b<<16|c&65535)};
-function H(a,b){if(I(a))return a;if(I(b))return b;var d=a.a>>>16,c=a.a&65535,e=a.b>>>16;a=a.b&65535;var f=b.a>>>16,g=b.a&65535,h=b.b>>>16;b=b.b&65535;var u=a*b;var q=(u>>>16)+e*b;var n=q>>>16;q=(q&65535)+a*h;n+=q>>>16;n+=c*b;var p=n>>>16;n=(n&65535)+e*h;p+=n>>>16;n=(n&65535)+a*g;p=p+(n>>>16)+(d*b+c*h+e*g+a*f)&65535;return C((q&65535)<<16|u&65535,p<<16|n&65535)}
-function G(a,b){if(I(b))throw Error("division by zero");if(0>a.a){if(J(a,z)){if(J(b,D)||J(b,E))return z;if(J(b,z))return D;var d=1;if(0==d)d=a;else{var c=a.a;d=32>d?C(a.b>>>d|c<<32-d,c>>d):C(c>>d-32,0<=c?0:-1)}d=G(d,b);c=1;if(0!=c){var e=d.b;d=32>c?C(e<<c,d.a<<c|e>>>32-c):C(0,e<<c-32)}if(J(d,B))return 0>b.a?D:E;a=a.add(A(H(b,d)));return d.add(G(a,b))}return 0>b.a?G(A(a),A(b)):A(G(A(a),b))}if(I(a))return B;if(0>b.a)return J(b,z)?B:A(G(a,A(b)));for(c=B;0<=K(a,b);){d=Math.max(1,Math.floor(F(a)/F(b)));
-e=Math.ceil(Math.log(d)/Math.LN2);e=48>=e?1:Math.pow(2,e-48);for(var f=w(d),g=H(f,b);0>g.a||0<K(g,a);)d-=e,f=w(d),g=H(f,b);I(f)&&(f=D);c=c.add(f);a=a.add(A(g))}return c}v.prototype.and=function(a){return C(this.b&a.b,this.a&a.a)};v.prototype.or=function(a){return C(this.b|a.b,this.a|a.a)};v.prototype.xor=function(a){return C(this.b^a.b,this.a^a.a)};function L(a,b){this.f=128;this.h=k.Uint8Array?new Uint8Array(this.f):Array(this.f);this.j=this.g=0;this.c=[];this.l=a;this.s=[];this.o=M(b);this.i=!1;this.j=this.g=0;a=this.o;b=a.length;if(0<b){for(var d=Array(b),c=0;c<b;c++)d[c]=a[c];a=d}else a=[];this.c=a;this.i=!1}r(L,t);for(var N=[],O=0;127>O;O++)N[O]=0;var P=function(a){return Array.prototype.concat.apply([],arguments)}([128],N);
-function Q(a,b,d){d=void 0!==d?d:b.length;if(a.i)throw Error("this hasher needs to be reset");var c=a.g;if("string"==typeof b)for(var e=0;e<d;e++){var f=b.charCodeAt(e);if(255<f)throw Error("Characters must be in range [0,255]");a.h[c++]=f;c==a.f&&(R(a),c=0)}else if(e=l(b),"array"==e||"object"==e&&"number"==typeof b.length)for(e=0;e<d;e++){f=b[e];if("number"!=typeof f||0>f||255<f||f!=(f|0))throw Error("message must be a byte array");a.h[c++]=f;c==a.f&&(R(a),c=0)}else throw Error("message must be string or array");
-a.g=c;a.j+=d}
-function R(a){for(var b=a.h,d=a.s,c=0;16>c;c++){var e=8*c;d[c]=new v(b[e+4]<<24|b[e+5]<<16|b[e+6]<<8|b[e+7],b[e]<<24|b[e+1]<<16|b[e+2]<<8|b[e+3])}for(c=16;80>c;c++){e=d[c-15];b=e.b;e=e.a;var f=d[c-2],g=f.b;f=f.a;d[c]=a.m(d[c-16],d[c-7],new v(b>>>1^e<<31^b>>>8^e<<24^b>>>7^e<<25,e>>>1^b<<31^e>>>8^b<<24^e>>>7),new v(g>>>19^f<<13^f>>>29^g<<3^g>>>6^f<<26,f>>>19^g<<13^g>>>29^f<<3^f>>>6))}b=a.c[0];e=a.c[1];g=a.c[2];f=a.c[3];var h=a.c[4],u=a.c[5],q=a.c[6],n=a.c[7];for(c=0;80>c;c++){var p=b.b,m=b.a;p=(new v(p>>>
-28^m<<4^m>>>2^p<<30^m>>>7^p<<25,m>>>28^p<<4^p>>>2^m<<30^p>>>7^m<<25)).add(new v(b.b&e.b|e.b&g.b|b.b&g.b,b.a&e.a|e.a&g.a|b.a&g.a));m=h.b;var y=h.a,S=h.b,T=h.a;m=a.m(n,new v(m>>>14^y<<18^m>>>18^y<<14^y>>>9^m<<23,y>>>14^m<<18^y>>>18^m<<14^m>>>9^y<<23),new v(S&u.b|~S&q.b,T&u.a|~T&q.a),U[c],d[c]);n=q;q=u;u=h;h=f.add(m);f=g;g=e;e=b;b=m.add(p)}a.c[0]=a.c[0].add(b);a.c[1]=a.c[1].add(e);a.c[2]=a.c[2].add(g);a.c[3]=a.c[3].add(f);a.c[4]=a.c[4].add(h);a.c[5]=a.c[5].add(u);a.c[6]=a.c[6].add(q);a.c[7]=a.c[7].add(n)}
-L.prototype.m=function(a,b,d){for(var c=(a.b^2147483648)+(b.b^2147483648),e=a.a+b.a,f=arguments.length-1;2<=f;--f)c+=arguments[f].b^2147483648,e+=arguments[f].a;arguments.length&1&&(c+=2147483648);e+=arguments.length>>1;e+=Math.floor(c/4294967296);return new v(c,e)};function M(a){for(var b=[],d=0;d<a.length;d+=2)b.push(new v(a[d+1],a[d]));return b}
-var U=M([1116352408,3609767458,1899447441,602891725,3049323471,3964484399,3921009573,2173295548,961987163,4081628472,1508970993,3053834265,2453635748,2937671579,2870763221,3664609560,3624381080,2734883394,310598401,1164996542,607225278,1323610764,1426881987,3590304994,1925078388,4068182383,2162078206,991336113,2614888103,633803317,3248222580,3479774868,3835390401,2666613458,4022224774,944711139,264347078,2341262773,604807628,2007800933,770255983,1495990901,1249150122,1856431235,1555081692,3175218132,
-1996064986,2198950837,2554220882,3999719339,2821834349,766784016,2952996808,2566594879,3210313671,3203337956,3336571891,1034457026,3584528711,2466948901,113926993,3758326383,338241895,168717936,666307205,1188179964,773529912,1546045734,1294757372,1522805485,1396182291,2643833823,1695183700,2343527390,1986661051,1014477480,2177026350,1206759142,2456956037,344077627,2730485921,1290863460,2820302411,3158454273,3259730800,3505952657,3345764771,106217008,3516065817,3606008344,3600352804,1432725776,4094571909,
-1467031594,275423344,851169720,430227734,3100823752,506948616,1363258195,659060556,3750685593,883997877,3785050280,958139571,3318307427,1322822218,3812723403,1537002063,2003034995,1747873779,3602036899,1955562222,1575990012,2024104815,1125592928,2227730452,2716904306,2361852424,442776044,2428436474,593698344,2756734187,3733110249,3204031479,2999351573,3329325298,3815920427,3391569614,3928383900,3515267271,566280711,3940187606,3454069534,4118630271,4000239992,116418474,1914138554,174292421,2731055270,
-289380356,3203993006,460393269,320620315,685471733,587496836,852142971,1086792851,1017036298,365543100,1126000580,2618297676,1288033470,3409855158,1501505948,4234509866,1607167915,987167468,1816402316,1246189591]);function V(){L.call(this,6,aa)}r(V,L);var aa=[3418070365,3238371032,1654270250,914150663,2438529370,812702999,355462360,4144912697,1731405415,4290775857,2394180231,1750603025,3675008525,1694076839,1203062813,3204075428];function W(a){var b=new V;Q(b,a);a=Uint8Array;if(b.i)throw Error("this hasher needs to be reset");var d=8*b.j;112>b.g?Q(b,P,112-b.g):Q(b,P,b.f-b.g+112);for(var c=127;112<=c;c--)b.h[c]=d&255,d/=256;R(b);d=0;var e=Array(8*b.l);for(c=0;c<b.l;c++){var f=b.c[c],g=f.a;f=f.b;for(var h=24;0<=h;h-=8)e[d++]=g>>h&255;for(h=24;0<=h;h-=8)e[d++]=f>>h&255}b.i=!0;return new a(e)}var X=["ampSha384Digest"],Y=window||k;X[0]in Y||"undefined"==typeof Y.execScript||Y.execScript("var "+X[0]);
-for(var Z;X.length&&(Z=X.shift());)X.length||void 0===W?Y[Z]&&Y[Z]!==Object.prototype[Z]?Y=Y[Z]:Y=Y[Z]={}:Y[Z]=W;;
-return ampSha384Digest;
-}).call(window);
+/* Generated from closure library version 20210202.0.0 */const window = {Uint8Array: Uint8Array};export const sha384 = (function(window){/*
+
+ Copyright The Closure Library Authors.
+ SPDX-License-Identifier: Apache-2.0
+*/
+var k = this || self;
+function l(a, b) {
+  function e() {
+  }
+  e.prototype = b.prototype;
+  a.D = b.prototype;
+  a.prototype = new e;
+  a.prototype.constructor = a;
+  a.C = function(c, d, f) {
+    for (var g = Array(arguments.length - 2), h = 2; h < arguments.length; h++) {
+      g[h - 2] = arguments[h];
+    }
+    return b.prototype[d].apply(c, g);
+  };
+}
+;function r() {
+  this.j = -1;
+}
+;function t(a, b) {
+  this.h = a | 0;
+  this.g = b | 0;
+}
+function v(a) {
+  return 4294967296 * a.g + (a.h >>> 0);
+}
+t.prototype.toString = function(a) {
+  a = a || 10;
+  if (2 > a || 36 < a) {
+    throw Error("radix out of range: " + a);
+  }
+  var b = this.g >> 21;
+  if (0 == b || -1 == b && (0 != this.h || -2097152 != this.g)) {
+    return b = v(this), 10 == a ? "" + b : b.toString(a);
+  }
+  b = 14 - (a >> 2);
+  var e = Math.pow(a, b), c = w(e, e / 4294967296);
+  e = x(this, c);
+  c = Math.abs(v(this.add(z(A(e, c)))));
+  var d = 10 == a ? "" + c : c.toString(a);
+  d.length < b && (d = "0000000000000".substr(d.length - b) + d);
+  c = v(e);
+  return (10 == a ? c : c.toString(a)) + d;
+};
+function B(a) {
+  return 0 == a.h && 0 == a.g;
+}
+function C(a, b) {
+  return a.h == b.h && a.g == b.g;
+}
+function D(a, b) {
+  return a.g == b.g ? a.h == b.h ? 0 : a.h >>> 0 > b.h >>> 0 ? 1 : -1 : a.g > b.g ? 1 : -1;
+}
+function z(a) {
+  var b = ~a.h + 1 | 0;
+  return w(b, ~a.g + !b | 0);
+}
+t.prototype.add = function(a) {
+  var b = this.g >>> 16, e = this.g & 65535, c = this.h >>> 16, d = a.g >>> 16, f = a.g & 65535, g = a.h >>> 16;
+  a = (this.h & 65535) + (a.h & 65535);
+  g = (a >>> 16) + (c + g);
+  c = g >>> 16;
+  c += e + f;
+  b = (c >>> 16) + (b + d) & 65535;
+  return w((g & 65535) << 16 | a & 65535, b << 16 | c & 65535);
+};
+function A(a, b) {
+  if (B(a)) {
+    return a;
+  }
+  if (B(b)) {
+    return b;
+  }
+  var e = a.g >>> 16, c = a.g & 65535, d = a.h >>> 16;
+  a = a.h & 65535;
+  var f = b.g >>> 16, g = b.g & 65535, h = b.h >>> 16;
+  b = b.h & 65535;
+  var u = a * b;
+  var q = (u >>> 16) + d * b;
+  var n = q >>> 16;
+  q = (q & 65535) + a * h;
+  n += q >>> 16;
+  n += c * b;
+  var p = n >>> 16;
+  n = (n & 65535) + d * h;
+  p += n >>> 16;
+  n = (n & 65535) + a * g;
+  p = p + (n >>> 16) + (e * b + c * h + d * g + a * f) & 65535;
+  return w((q & 65535) << 16 | u & 65535, p << 16 | n & 65535);
+}
+function x(a, b) {
+  if (B(b)) {
+    throw Error("division by zero");
+  }
+  if (0 > a.g) {
+    if (C(a, E)) {
+      if (C(b, F) || C(b, G)) {
+        return E;
+      }
+      if (C(b, E)) {
+        return F;
+      }
+      var e = 1;
+      if (0 == e) {
+        e = a;
+      } else {
+        var c = a.g;
+        e = 32 > e ? w(a.h >>> e | c << 32 - e, c >> e) : w(c >> e - 32, 0 <= c ? 0 : -1);
+      }
+      e = x(e, b);
+      c = 1;
+      if (0 != c) {
+        var d = e.h;
+        e = 32 > c ? w(d << c, e.g << c | d >>> 32 - c) : w(0, d << c - 32);
+      }
+      if (C(e, H)) {
+        return 0 > b.g ? F : G;
+      }
+      a = a.add(z(A(b, e)));
+      return e.add(x(a, b));
+    }
+    return 0 > b.g ? x(z(a), z(b)) : z(x(z(a), b));
+  }
+  if (B(a)) {
+    return H;
+  }
+  if (0 > b.g) {
+    return C(b, E) ? H : z(x(a, z(b)));
+  }
+  for (c = H; 0 <= D(a, b);) {
+    e = Math.max(1, Math.floor(v(a) / v(b)));
+    d = Math.ceil(Math.log(e) / Math.LN2);
+    d = 48 >= d ? 1 : Math.pow(2, d - 48);
+    for (var f = I(e), g = A(f, b); 0 > g.g || 0 < D(g, a);) {
+      e -= d, f = I(e), g = A(f, b);
+    }
+    B(f) && (f = F);
+    c = c.add(f);
+    a = a.add(z(g));
+  }
+  return c;
+}
+t.prototype.and = function(a) {
+  return w(this.h & a.h, this.g & a.g);
+};
+t.prototype.or = function(a) {
+  return w(this.h | a.h, this.g | a.g);
+};
+t.prototype.xor = function(a) {
+  return w(this.h ^ a.h, this.g ^ a.g);
+};
+function I(a) {
+  return 0 < a ? 0x7fffffffffffffff <= a ? J : new t(a, a / 4294967296) : 0 > a ? -9223372036854775808 >= a ? E : z(new t(-a, -a / 4294967296)) : H;
+}
+function w(a, b) {
+  return new t(a, b);
+}
+var H = w(0, 0), F = w(1, 0), G = w(-1, -1), J = w(4294967295, 2147483647), E = w(0, 2147483648);
+function K(a, b) {
+  this.j = 128;
+  this.m = k.Uint8Array ? new Uint8Array(this.j) : Array(this.j);
+  this.s = this.l = 0;
+  this.i = [];
+  this.u = a;
+  this.B = [];
+  this.A = L(b);
+  this.o = !1;
+  this.s = this.l = 0;
+  a = this.A;
+  b = a.length;
+  if (0 < b) {
+    for (var e = Array(b), c = 0; c < b; c++) {
+      e[c] = a[c];
+    }
+    a = e;
+  } else {
+    a = [];
+  }
+  this.i = a;
+  this.o = !1;
+}
+l(K, r);
+for (var M = [], N = 0; 127 > N; N++) {
+  M[N] = 0;
+}
+var O = function(a) {
+  return Array.prototype.concat.apply([], arguments);
+}([128], M);
+function P(a, b, e) {
+  e = void 0 !== e ? e : b.length;
+  if (a.o) {
+    throw Error("this hasher needs to be reset");
+  }
+  var c = a.l;
+  if ("string" === typeof b) {
+    for (var d = 0; d < e; d++) {
+      var f = b.charCodeAt(d);
+      if (255 < f) {
+        throw Error("Characters must be in range [0,255]");
+      }
+      a.m[c++] = f;
+      c == a.j && (Q(a), c = 0);
+    }
+  } else {
+    if (d = typeof b, d = "object" != d ? d : b ? Array.isArray(b) ? "array" : d : "null", "array" == d || "object" == d && "number" == typeof b.length) {
+      for (d = 0; d < e; d++) {
+        f = b[d];
+        if ("number" !== typeof f || 0 > f || 255 < f || f != (f | 0)) {
+          throw Error("message must be a byte array");
+        }
+        a.m[c++] = f;
+        c == a.j && (Q(a), c = 0);
+      }
+    } else {
+      throw Error("message must be string or array");
+    }
+  }
+  a.l = c;
+  a.s += e;
+}
+function Q(a) {
+  for (var b = a.m, e = a.B, c = 0; 16 > c; c++) {
+    var d = 8 * c;
+    e[c] = new t(b[d + 4] << 24 | b[d + 5] << 16 | b[d + 6] << 8 | b[d + 7], b[d] << 24 | b[d + 1] << 16 | b[d + 2] << 8 | b[d + 3]);
+  }
+  for (c = 16; 80 > c; c++) {
+    d = e[c - 15];
+    b = d.h;
+    d = d.g;
+    var f = e[c - 2], g = f.h;
+    f = f.g;
+    e[c] = a.v(e[c - 16], e[c - 7], new t(b >>> 1 ^ d << 31 ^ b >>> 8 ^ d << 24 ^ b >>> 7 ^ d << 25, d >>> 1 ^ b << 31 ^ d >>> 8 ^ b << 24 ^ d >>> 7), new t(g >>> 19 ^ f << 13 ^ f >>> 29 ^ g << 3 ^ g >>> 6 ^ f << 26, f >>> 19 ^ g << 13 ^ g >>> 29 ^ f << 3 ^ f >>> 6));
+  }
+  b = a.i[0];
+  d = a.i[1];
+  g = a.i[2];
+  f = a.i[3];
+  var h = a.i[4], u = a.i[5], q = a.i[6], n = a.i[7];
+  for (c = 0; 80 > c; c++) {
+    var p = b.h, m = b.g;
+    p = (new t(p >>> 28 ^ m << 4 ^ m >>> 2 ^ p << 30 ^ m >>> 7 ^ p << 25, m >>> 28 ^ p << 4 ^ p >>> 2 ^ m << 30 ^ p >>> 7 ^ m << 25)).add(new t(b.h & d.h | d.h & g.h | b.h & g.h, b.g & d.g | d.g & g.g | b.g & g.g));
+    m = h.h;
+    var y = h.g, S = h.h, T = h.g;
+    m = a.v(n, new t(m >>> 14 ^ y << 18 ^ m >>> 18 ^ y << 14 ^ y >>> 9 ^ m << 23, y >>> 14 ^ m << 18 ^ y >>> 18 ^ m << 14 ^ m >>> 9 ^ y << 23), new t(S & u.h | ~S & q.h, T & u.g | ~T & q.g), R[c], e[c]);
+    n = q;
+    q = u;
+    u = h;
+    h = f.add(m);
+    f = g;
+    g = d;
+    d = b;
+    b = m.add(p);
+  }
+  a.i[0] = a.i[0].add(b);
+  a.i[1] = a.i[1].add(d);
+  a.i[2] = a.i[2].add(g);
+  a.i[3] = a.i[3].add(f);
+  a.i[4] = a.i[4].add(h);
+  a.i[5] = a.i[5].add(u);
+  a.i[6] = a.i[6].add(q);
+  a.i[7] = a.i[7].add(n);
+}
+K.prototype.v = function(a, b, e) {
+  for (var c = (a.h ^ 2147483648) + (b.h ^ 2147483648), d = a.g + b.g, f = arguments.length - 1; 2 <= f; --f) {
+    c += arguments[f].h ^ 2147483648, d += arguments[f].g;
+  }
+  arguments.length & 1 && (c += 2147483648);
+  d += arguments.length >> 1;
+  d += Math.floor(c / 4294967296);
+  return new t(c, d);
+};
+function L(a) {
+  for (var b = [], e = 0; e < a.length; e += 2) {
+    b.push(new t(a[e + 1], a[e]));
+  }
+  return b;
+}
+var R = L([1116352408, 3609767458, 1899447441, 602891725, 3049323471, 3964484399, 3921009573, 2173295548, 961987163, 4081628472, 1508970993, 3053834265, 2453635748, 2937671579, 2870763221, 3664609560, 3624381080, 2734883394, 310598401, 1164996542, 607225278, 1323610764, 1426881987, 3590304994, 1925078388, 4068182383, 2162078206, 991336113, 2614888103, 633803317, 3248222580, 3479774868, 3835390401, 2666613458, 4022224774, 944711139, 264347078, 2341262773, 604807628, 2007800933, 770255983, 1495990901, 
+1249150122, 1856431235, 1555081692, 3175218132, 1996064986, 2198950837, 2554220882, 3999719339, 2821834349, 766784016, 2952996808, 2566594879, 3210313671, 3203337956, 3336571891, 1034457026, 3584528711, 2466948901, 113926993, 3758326383, 338241895, 168717936, 666307205, 1188179964, 773529912, 1546045734, 1294757372, 1522805485, 1396182291, 2643833823, 1695183700, 2343527390, 1986661051, 1014477480, 2177026350, 1206759142, 2456956037, 344077627, 2730485921, 1290863460, 2820302411, 3158454273, 3259730800, 
+3505952657, 3345764771, 106217008, 3516065817, 3606008344, 3600352804, 1432725776, 4094571909, 1467031594, 275423344, 851169720, 430227734, 3100823752, 506948616, 1363258195, 659060556, 3750685593, 883997877, 3785050280, 958139571, 3318307427, 1322822218, 3812723403, 1537002063, 2003034995, 1747873779, 3602036899, 1955562222, 1575990012, 2024104815, 1125592928, 2227730452, 2716904306, 2361852424, 442776044, 2428436474, 593698344, 2756734187, 3733110249, 3204031479, 2999351573, 3329325298, 3815920427, 
+3391569614, 3928383900, 3515267271, 566280711, 3940187606, 3454069534, 4118630271, 4000239992, 116418474, 1914138554, 174292421, 2731055270, 289380356, 3203993006, 460393269, 320620315, 685471733, 587496836, 852142971, 1086792851, 1017036298, 365543100, 1126000580, 2618297676, 1288033470, 3409855158, 1501505948, 4234509866, 1607167915, 987167468, 1816402316, 1246189591]);
+function U() {
+  K.call(this, 6, V);
+}
+l(U, K);
+var V = [3418070365, 3238371032, 1654270250, 914150663, 2438529370, 812702999, 355462360, 4144912697, 1731405415, 4290775857, 2394180231, 1750603025, 3675008525, 1694076839, 1203062813, 3204075428];
+function W(a) {
+  var b = new U;
+  P(b, a);
+  a = Uint8Array;
+  if (b.o) {
+    throw Error("this hasher needs to be reset");
+  }
+  var e = 8 * b.s;
+  112 > b.l ? P(b, O, 112 - b.l) : P(b, O, b.j - b.l + 112);
+  for (var c = 127; 112 <= c; c--) {
+    b.m[c] = e & 255, e /= 256;
+  }
+  Q(b);
+  e = 0;
+  var d = Array(8 * b.u);
+  for (c = 0; c < b.u; c++) {
+    var f = b.i[c], g = f.g;
+    f = f.h;
+    for (var h = 24; 0 <= h; h -= 8) {
+      d[e++] = g >> h & 255;
+    }
+    for (h = 24; 0 <= h; h -= 8) {
+      d[e++] = f >> h & 255;
+    }
+  }
+  b.o = !0;
+  return new a(d);
+}
+var X = ["__AMP_SHA384_DIGEST"], Y = window || k;
+X[0] in Y || "undefined" == typeof Y.execScript || Y.execScript("var " + X[0]);
+for (var Z; X.length && (Z = X.shift());) {
+  X.length || void 0 === W ? Y[Z] && Y[Z] !== Object.prototype[Z] ? Y = Y[Z] : Y = Y[Z] = {} : Y[Z] = W;
+}
+;;return window.__AMP_SHA384_DIGEST;}).call(window, window);
diff --git a/third_party/closure-library/sha384.js b/third_party/closure-library/sha384.js
index db4c2e6b90b45..2af91d64fa8d4 100644
--- a/third_party/closure-library/sha384.js
+++ b/third_party/closure-library/sha384.js
@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+// Required for calcdeps, but does weird things when compiling.
+// goog.provide('__AMP_SHA384_DIGEST');
+
 goog.require('goog.crypt.Sha384');
 
 /**
@@ -26,4 +29,4 @@ var digest = function(input) {
   return new Uint8Array(sha384.digest());
 }
 
-goog.exportSymbol('ampSha384Digest', digest, window);
+goog.exportSymbol('__AMP_SHA384_DIGEST', digest, window);
diff --git a/third_party/closure-responding-channel/LICENSE b/third_party/closure-responding-channel/LICENSE
new file mode 100644
index 0000000000000..d9a10c0d8e868
--- /dev/null
+++ b/third_party/closure-responding-channel/LICENSE
@@ -0,0 +1,176 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
diff --git a/third_party/closure-responding-channel/README.amp b/third_party/closure-responding-channel/README.amp
new file mode 100644
index 0000000000000..30bcc7dc66f9d
--- /dev/null
+++ b/third_party/closure-responding-channel/README.amp
@@ -0,0 +1,9 @@
+URL: https://github.com/google/closure-library
+License: Apache License
+License File: https://github.com/google/closure-library/blob/master/LICENSE
+
+Description:
+Used to pull in selected functions related to goog.messaging from the closure library.
+We only check in the compiled version.
+Run compile.sh to generate a new version once https://github.com/ampproject/amphtml/pull/33153 is in.
+Currently we compile the code with Google internal tool.
\ No newline at end of file
diff --git a/third_party/closure-responding-channel/calcdeps.sh b/third_party/closure-responding-channel/calcdeps.sh
new file mode 100644
index 0000000000000..6f74432ab71f9
--- /dev/null
+++ b/third_party/closure-responding-channel/calcdeps.sh
@@ -0,0 +1,9 @@
+# Use Closure builder to generate only the necessary dependencies of the exported symbols needed by assist.js.
+# Note: need to add "goog.provide('assistjs');" to the wrapper file to have a fake namespace.
+CLOSURE_LIB=../../../../node_modules/google-closure-library
+BUILDER=../../../../node_modules/google-closure-library/closure/bin/build/closurebuilder.py
+
+$BUILDER \
+  --root=$CLOSURE_LIB/ \
+  --root=./ \
+  --namespace="assistjs.createRC"
\ No newline at end of file
diff --git a/third_party/closure-responding-channel/closure-bundle.js b/third_party/closure-responding-channel/closure-bundle.js
new file mode 100644
index 0000000000000..31fab984de576
--- /dev/null
+++ b/third_party/closure-responding-channel/closure-bundle.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/*
+
+ Copyright The Closure Library Authors.
+ SPDX-License-Identifier: Apache-2.0
+*/
+'use strict';var k,m=this||self;function n(){}function p(a){var b=typeof a;return"object"==b&&null!=a||"function"==b}function aa(a){null!==a&&"removeAttribute"in a&&a.removeAttribute(q);try{delete a[q]}catch(b){}}var q="closure_uid_"+(1E9*Math.random()>>>0),ba=0;function ca(a,b,c){return a.call.apply(a.bind,arguments)}
+function da(a,b,c){if(!a)throw Error();if(2<arguments.length){var d=Array.prototype.slice.call(arguments,2);return function(){var e=Array.prototype.slice.call(arguments);Array.prototype.unshift.apply(e,d);return a.apply(b,e)}}return function(){return a.apply(b,arguments)}}function r(a,b,c){Function.prototype.bind&&-1!=Function.prototype.bind.toString().indexOf("native code")?r=ca:r=da;return r.apply(null,arguments)}
+function ea(a,b){var c=Array.prototype.slice.call(arguments,1);return function(){var d=c.slice();d.push.apply(d,arguments);return a.apply(this,d)}}function t(a,b){function c(){}c.prototype=b.prototype;a.A=b.prototype;a.prototype=new c;a.prototype.constructor=a;a.X=function(d,e,f){for(var g=Array(arguments.length-2),h=2;h<arguments.length;h++)g[h-2]=arguments[h];return b.prototype[e].apply(d,g)}};function u(a){if(Error.captureStackTrace)Error.captureStackTrace(this,u);else{var b=Error().stack;b&&(this.stack=b)}a&&(this.message=String(a))}t(u,Error);u.prototype.name="CustomError";var fa=Array.prototype.indexOf?function(a,b){return Array.prototype.indexOf.call(a,b,void 0)}:function(a,b){if("string"===typeof a)return"string"!==typeof b||1!=b.length?-1:a.indexOf(b,0);for(var c=0;c<a.length;c++)if(c in a&&a[c]===b)return c;return-1},ha=Array.prototype.map?function(a,b){return Array.prototype.map.call(a,b,void 0)}:function(a,b){for(var c=a.length,d=Array(c),e="string"===typeof a?a.split(""):a,f=0;f<c;f++)f in e&&(d[f]=b.call(void 0,e[f],f,a));return d},ia=Array.prototype.some?
+function(a,b){return Array.prototype.some.call(a,b,void 0)}:function(a,b){for(var c=a.length,d="string"===typeof a?a.split(""):a,e=0;e<c;e++)if(e in d&&b.call(void 0,d[e],e,a))return!0;return!1};var ja=String.prototype.trim?function(a){return a.trim()}:function(a){return/^[\s\xa0]*([\s\S]*?)[\s\xa0]*$/.exec(a)[1]};function ka(a,b){return a<b?-1:a>b?1:0};var v;a:{var la=m.navigator;if(la){var ma=la.userAgent;if(ma){v=ma;break a}}v=""}function w(a){return-1!=v.indexOf(a)};function na(a,b){for(var c in a)b.call(void 0,a[c],c,a)}function oa(a,b,c){var d={},e;for(e in a)d[e]=b.call(c,a[e],e,a);return d}var pa="constructor hasOwnProperty isPrototypeOf propertyIsEnumerable toLocaleString toString valueOf".split(" ");function qa(a,b){for(var c,d,e=1;e<arguments.length;e++){d=arguments[e];for(c in d)a[c]=d[c];for(var f=0;f<pa.length;f++)c=pa[f],Object.prototype.hasOwnProperty.call(d,c)&&(a[c]=d[c])}};function ra(a){ra[" "](a);return a}ra[" "]=n;var sa=w("Opera"),ta=w("Trident")||w("MSIE"),ua=w("Edge"),va=w("Gecko")&&!(-1!=v.toLowerCase().indexOf("webkit")&&!w("Edge"))&&!(w("Trident")||w("MSIE"))&&!w("Edge"),wa=-1!=v.toLowerCase().indexOf("webkit")&&!w("Edge"),xa;
+a:{var ya="",za=function(){var a=v;if(va)return/rv:([^\);]+)(\)|;)/.exec(a);if(ua)return/Edge\/([\d\.]+)/.exec(a);if(ta)return/\b(?:MSIE|rv)[: ]([^\);]+)(\)|;)/.exec(a);if(wa)return/WebKit\/(\S+)/.exec(a);if(sa)return/(?:Version)[ \/]?(\S+)/.exec(a)}();za&&(ya=za?za[1]:"");if(ta){var x,Aa=m.document;x=Aa?Aa.documentMode:void 0;if(null!=x&&x>parseFloat(ya)){xa=String(x);break a}}xa=ya}var Ba=xa;function Ca(a){function b(f,g){var h=g+"  ";try{if(void 0===f)c.push("undefined");else if(null===f)c.push("NULL");else if("string"===typeof f)c.push('"'+f.replace(/\n/g,"\n"+g)+'"');else if("function"===typeof f)c.push(String(f).replace(/\n/g,"\n"+g));else if(p(f)){f[q]||d.push(f);var l=Object.prototype.hasOwnProperty.call(f,q)&&f[q]||(f[q]=++ba);if(e[l])c.push("*** reference loop detected (id="+l+") ***");else{e[l]=!0;c.push("{");for(var z in f)"function"!==typeof f[z]&&(c.push("\n"),c.push(h),c.push(z+
+" = "),b(f[z],h));c.push("\n"+g+"}");delete e[l]}}else c.push(f)}catch(Kb){c.push("*** "+Kb+" ***")}}var c=[],d=[],e={};b(a,"");for(a=0;a<d.length;a++)aa(d[a])};function y(a){a&&"function"==typeof a.R&&a.R()};var Da=function(){if(!m.addEventListener||!Object.defineProperty)return!1;var a=!1,b=Object.defineProperty({},"passive",{get:function(){a=!0}});try{m.addEventListener("test",n,b),m.removeEventListener("test",n,b)}catch(c){}return a}();function A(){this.h=this.h;this.l=this.l}A.prototype.h=!1;A.prototype.R=function(){this.h||(this.h=!0,this.o())};A.prototype.o=function(){if(this.l)for(;this.l.length;)this.l.shift()()};function B(a,b){this.type=a;this.g=this.target=b;this.defaultPrevented=!1}B.prototype.h=function(){this.defaultPrevented=!0};function C(a,b){B.call(this,a?a.type:"");this.relatedTarget=this.g=this.target=null;this.button=this.screenY=this.screenX=this.clientY=this.clientX=0;this.key="";this.metaKey=this.shiftKey=this.altKey=this.ctrlKey=!1;this.state=null;this.pointerId=0;this.pointerType="";this.i=null;if(a){var c=this.type=a.type,d=a.changedTouches&&a.changedTouches.length?a.changedTouches[0]:null;this.target=a.target||a.srcElement;this.g=b;if(b=a.relatedTarget){if(va){a:{try{ra(b.nodeName);var e=!0;break a}catch(f){}e=
+!1}e||(b=null)}}else"mouseover"==c?b=a.fromElement:"mouseout"==c&&(b=a.toElement);this.relatedTarget=b;d?(this.clientX=void 0!==d.clientX?d.clientX:d.pageX,this.clientY=void 0!==d.clientY?d.clientY:d.pageY,this.screenX=d.screenX||0,this.screenY=d.screenY||0):(this.clientX=void 0!==a.clientX?a.clientX:a.pageX,this.clientY=void 0!==a.clientY?a.clientY:a.pageY,this.screenX=a.screenX||0,this.screenY=a.screenY||0);this.button=a.button;this.key=a.key||"";this.ctrlKey=a.ctrlKey;this.altKey=a.altKey;this.shiftKey=
+a.shiftKey;this.metaKey=a.metaKey;this.pointerId=a.pointerId||0;this.pointerType="string"===typeof a.pointerType?a.pointerType:Ea[a.pointerType]||"";this.state=a.state;this.i=a;a.defaultPrevented&&C.A.h.call(this)}}t(C,B);var Ea={2:"touch",3:"pen",4:"mouse"};C.prototype.h=function(){C.A.h.call(this);var a=this.i;a.preventDefault?a.preventDefault():a.returnValue=!1};var D="closure_listenable_"+(1E6*Math.random()|0);var Fa=0;function Ga(a,b,c,d,e){this.listener=a;this.g=null;this.src=b;this.type=c;this.capture=!!d;this.J=e;this.key=++Fa;this.F=this.H=!1}function E(a){a.F=!0;a.listener=null;a.g=null;a.src=null;a.J=null};function F(a){this.src=a;this.g={};this.h=0}F.prototype.add=function(a,b,c,d,e){var f=a.toString();a=this.g[f];a||(a=this.g[f]=[],this.h++);var g=Ha(a,b,d,e);-1<g?(b=a[g],c||(b.H=!1)):(b=new Ga(b,this.src,f,!!d,e),b.H=c,a.push(b));return b};function Ia(a,b){var c=b.type;if(c in a.g){var d=a.g[c],e=fa(d,b),f;(f=0<=e)&&Array.prototype.splice.call(d,e,1);f&&(E(b),0==a.g[c].length&&(delete a.g[c],a.h--))}}
+function Ha(a,b,c,d){for(var e=0;e<a.length;++e){var f=a[e];if(!f.F&&f.listener==b&&f.capture==!!c&&f.J==d)return e}return-1};var Ja="closure_lm_"+(1E6*Math.random()|0),Ka={},La=0;function Ma(a,b,c,d,e){if(d&&d.once)return Na(a,b,c,d,e);if(Array.isArray(b)){for(var f=0;f<b.length;f++)Ma(a,b[f],c,d,e);return null}c=Oa(c);return a&&a[D]?a.g.add(String(b),c,!1,p(d)?!!d.capture:!!d,e):Pa(a,b,c,!1,d,e)}
+function Pa(a,b,c,d,e,f){if(!b)throw Error("Invalid event type");var g=p(e)?!!e.capture:!!e,h=Qa(a);h||(a[Ja]=h=new F(a));c=h.add(b,c,d,g,f);if(c.g)return c;d=Ra();c.g=d;d.src=a;d.listener=c;if(a.addEventListener)Da||(e=g),void 0===e&&(e=!1),a.addEventListener(b.toString(),d,e);else if(a.attachEvent)a.attachEvent(Sa(b.toString()),d);else if(a.addListener&&a.removeListener)a.addListener(d);else throw Error("addEventListener and attachEvent are unavailable.");La++;return c}
+function Ra(){function a(c){return b.call(a.src,a.listener,c)}var b=Ta;return a}function Na(a,b,c,d,e){if(Array.isArray(b)){for(var f=0;f<b.length;f++)Na(a,b[f],c,d,e);return null}c=Oa(c);return a&&a[D]?a.g.add(String(b),c,!0,p(d)?!!d.capture:!!d,e):Pa(a,b,c,!0,d,e)}
+function Ua(a,b,c,d,e){if(Array.isArray(b))for(var f=0;f<b.length;f++)Ua(a,b[f],c,d,e);else(d=p(d)?!!d.capture:!!d,c=Oa(c),a&&a[D])?(a=a.g,b=String(b).toString(),b in a.g&&(f=a.g[b],c=Ha(f,c,d,e),-1<c&&(E(f[c]),Array.prototype.splice.call(f,c,1),0==f.length&&(delete a.g[b],a.h--)))):a&&(a=Qa(a))&&(b=a.g[b.toString()],a=-1,b&&(a=Ha(b,c,d,e)),(c=-1<a?b[a]:null)&&Va(c))}
+function Va(a){if("number"!==typeof a&&a&&!a.F){var b=a.src;if(b&&b[D])Ia(b.g,a);else{var c=a.type,d=a.g;b.removeEventListener?b.removeEventListener(c,d,a.capture):b.detachEvent?b.detachEvent(Sa(c),d):b.addListener&&b.removeListener&&b.removeListener(d);La--;(c=Qa(b))?(Ia(c,a),0==c.h&&(c.src=null,b[Ja]=null)):E(a)}}}function Sa(a){return a in Ka?Ka[a]:Ka[a]="on"+a}function Ta(a,b){if(a.F)a=!0;else{b=new C(b,this);var c=a.listener,d=a.J||a.src;a.H&&Va(a);a=c.call(d,b)}return a}
+function Qa(a){a=a[Ja];return a instanceof F?a:null}var Wa="__closure_events_fn_"+(1E9*Math.random()>>>0);function Oa(a){if("function"===typeof a)return a;a[Wa]||(a[Wa]=function(b){return a.handleEvent(b)});return a[Wa]};function Xa(a){var b=[];Ya(new Za,a,b);return b.join("")}function Za(){}
+function Ya(a,b,c){if(null==b)c.push("null");else{if("object"==typeof b){if(Array.isArray(b)){var d=b;b=d.length;c.push("[");for(var e="",f=0;f<b;f++)c.push(e),Ya(a,d[f],c),e=",";c.push("]");return}if(b instanceof String||b instanceof Number||b instanceof Boolean)b=b.valueOf();else{c.push("{");e="";for(d in b)Object.prototype.hasOwnProperty.call(b,d)&&(f=b[d],"function"!=typeof f&&(c.push(e),$a(d,c),c.push(":"),Ya(a,f,c),e=","));c.push("}");return}}switch(typeof b){case "string":$a(b,c);break;case "number":c.push(isFinite(b)&&
+!isNaN(b)?String(b):"null");break;case "boolean":c.push(String(b));break;case "function":c.push("null");break;default:throw Error("Unknown type: "+typeof b);}}}var ab={'"':'\\"',"\\":"\\\\","/":"\\/","\b":"\\b","\f":"\\f","\n":"\\n","\r":"\\r","\t":"\\t","\x0B":"\\u000b"},bb=/\uffff/.test("\uffff")?/[\\"\x00-\x1f\x7f-\uffff]/g:/[\\"\x00-\x1f\x7f-\xff]/g;
+function $a(a,b){b.push('"',a.replace(bb,function(c){var d=ab[c];d||(d="\\u"+(c.charCodeAt(0)|65536).toString(16).substr(1),ab[c]=d);return d}),'"')};function G(){A.call(this);this.j={}}t(G,A);G.prototype.connect=function(a){a&&a()};G.prototype.C=function(a,b,c){this.j[a]={I:b,T:!!c}};G.prototype.K=function(a){this.i=a};G.prototype.o=function(){G.A.o.call(this);delete this.j;delete this.i};function H(a){A.call(this);this.g=a}t(H,A);k=H.prototype;k.cancel=function(){this.g.cancel()};k.connect=function(a){a&&a()};k.C=function(a,b,c){cb(this.g,function(d){d.C(a,b,c)})};k.K=function(a){cb(this.g,function(b){b.K(a)})};k.D=function(a,b){cb(this.g,function(c){c.D(a,b)})};k.o=function(){this.cancel();H.A.o.call(this)};function db(a,b){this.i=a;this.l=b;this.h=0;this.g=null}db.prototype.get=function(){if(0<this.h){this.h--;var a=this.g;this.g=a.next;a.next=null}else a=this.i();return a};function eb(a,b){a.l(b);100>a.h&&(a.h++,b.next=a.g,a.g=b)};function fb(){var a=document;var b="IFRAME";"application/xhtml+xml"===a.contentType&&(b=b.toLowerCase());return a.createElement(b)};var gb;
+function hb(){var a=m.MessageChannel;"undefined"===typeof a&&"undefined"!==typeof window&&window.postMessage&&window.addEventListener&&!w("Presto")&&(a=function(){var e=fb();e.style.display="none";document.documentElement.appendChild(e);var f=e.contentWindow;e=f.document;e.open();e.close();var g="callImmediate"+Math.random(),h="file:"==f.location.protocol?"*":f.location.protocol+"//"+f.location.host;e=r(function(l){if(("*"==h||l.origin==h)&&l.data==g)this.port1.onmessage()},this);f.addEventListener("message",e,
+!1);this.port1={};this.port2={postMessage:function(){f.postMessage(g,h)}}});if("undefined"!==typeof a&&!w("Trident")&&!w("MSIE")){var b=new a,c={},d=c;b.port1.onmessage=function(){if(void 0!==c.next){c=c.next;var e=c.P;c.P=null;e()}};return function(e){d.next={P:e};d=d.next;b.port2.postMessage(0)}}return function(e){m.setTimeout(e,0)}};function ib(a){m.setTimeout(function(){throw a;},0)};function jb(){this.h=this.g=null}jb.prototype.add=function(a,b){var c=kb.get();c.set(a,b);this.h?this.h.next=c:this.g=c;this.h=c};function lb(){var a=mb,b=null;a.g&&(b=a.g,a.g=a.g.next,a.g||(a.h=null),b.next=null);return b}var kb=new db(function(){return new nb},function(a){return a.reset()});function nb(){this.next=this.g=this.h=null}nb.prototype.set=function(a,b){this.h=a;this.g=b;this.next=null};nb.prototype.reset=function(){this.next=this.g=this.h=null};function ob(a,b){I||pb();qb||(I(),qb=!0);mb.add(a,b)}var I;function pb(){if(m.Promise&&m.Promise.resolve){var a=m.Promise.resolve(void 0);I=function(){a.then(rb)}}else I=function(){var b=rb;"function"!==typeof m.setImmediate||m.Window&&m.Window.prototype&&!w("Edge")&&m.Window.prototype.setImmediate==m.setImmediate?(gb||(gb=hb()),gb(b)):m.setImmediate(b)}}var qb=!1,mb=new jb;function rb(){for(var a;a=lb();){try{a.h.call(a.g)}catch(b){ib(b)}eb(kb,a)}qb=!1};function sb(a){if(!a)return!1;try{return!!a.$goog_Thenable}catch(b){return!1}};function J(a){this.g=0;this.s=void 0;this.l=this.h=this.i=null;this.j=this.m=!1;if(a!=n)try{var b=this;a.call(void 0,function(c){K(b,2,c)},function(c){K(b,3,c)})}catch(c){K(this,3,c)}}function tb(){this.next=this.i=this.h=this.l=this.g=null;this.j=!1}tb.prototype.reset=function(){this.i=this.h=this.l=this.g=null;this.j=!1};var ub=new db(function(){return new tb},function(a){a.reset()});function vb(a,b,c){var d=ub.get();d.l=a;d.h=b;d.i=c;return d}
+function wb(a){if(a instanceof J)return a;var b=new J(n);K(b,2,a);return b}J.prototype.then=function(a,b,c){return xb(this,"function"===typeof a?a:null,"function"===typeof b?b:null,c)};J.prototype.$goog_Thenable=!0;J.prototype.cancel=function(a){if(0==this.g){var b=new L(a);ob(function(){yb(this,b)},this)}};
+function yb(a,b){if(0==a.g)if(a.i){var c=a.i;if(c.h){for(var d=0,e=null,f=null,g=c.h;g&&(g.j||(d++,g.g==a&&(e=g),!(e&&1<d)));g=g.next)e||(f=g);e&&(0==c.g&&1==d?yb(c,b):(f?(d=f,d.next==c.l&&(c.l=d),d.next=d.next.next):zb(c),Ab(c,e,3,b)))}a.i=null}else K(a,3,b)}function Bb(a,b){a.h||2!=a.g&&3!=a.g||Cb(a);a.l?a.l.next=b:a.h=b;a.l=b}
+function xb(a,b,c,d){var e=vb(null,null,null);e.g=new J(function(f,g){e.l=b?function(h){try{var l=b.call(d,h);f(l)}catch(z){g(z)}}:f;e.h=c?function(h){try{var l=c.call(d,h);void 0===l&&h instanceof L?g(h):f(l)}catch(z){g(z)}}:g});e.g.i=a;Bb(a,e);return e.g}J.prototype.B=function(a){this.g=0;K(this,2,a)};J.prototype.L=function(a){this.g=0;K(this,3,a)};
+function K(a,b,c){if(0==a.g){a===c&&(b=3,c=new TypeError("Promise cannot resolve to itself"));a.g=1;a:{var d=c,e=a.B,f=a.L;if(d instanceof J){Bb(d,vb(e||n,f||null,a));var g=!0}else if(sb(d))d.then(e,f,a),g=!0;else{if(p(d))try{var h=d.then;if("function"===typeof h){Db(d,h,e,f,a);g=!0;break a}}catch(l){f.call(a,l);g=!0;break a}g=!1}}g||(a.s=c,a.g=b,a.i=null,Cb(a),3!=b||c instanceof L||Eb(a,c))}}
+function Db(a,b,c,d,e){function f(l){h||(h=!0,d.call(e,l))}function g(l){h||(h=!0,c.call(e,l))}var h=!1;try{b.call(a,g,f)}catch(l){f(l)}}function Cb(a){a.m||(a.m=!0,ob(a.u,a))}function zb(a){var b=null;a.h&&(b=a.h,a.h=b.next,b.next=null);a.h||(a.l=null);return b}J.prototype.u=function(){for(var a;a=zb(this);)Ab(this,a,this.g,this.s);this.m=!1};
+function Ab(a,b,c,d){if(3==c&&b.h&&!b.j)for(;a&&a.j;a=a.i)a.j=!1;if(b.g)b.g.i=null,Fb(b,c,d);else try{b.j?b.l.call(b.i):Fb(b,c,d)}catch(e){Gb.call(null,e)}eb(ub,b)}function Fb(a,b,c){2==b?a.l.call(a.i,c):a.h&&a.h.call(a.i,c)}function Eb(a,b){a.j=!0;ob(function(){a.j&&Gb.call(null,b)})}var Gb=ib;function L(a){u.call(this,a)}t(L,u);L.prototype.name="cancel";/*
+ Portions of this code are from MochiKit, received by
+ The Closure Authors under the MIT license. All other code is Copyright
+ 2005-2009 The Closure Authors. All Rights Reserved.
+*/
+function M(a){this.j=[];this.O=a;this.l=this.i=!1;this.h=void 0;this.B=this.U=this.s=!1;this.m=0;this.g=null;this.u=0}M.prototype.cancel=function(a){if(this.i)this.h instanceof M&&this.h.cancel();else{if(this.g){var b=this.g;delete this.g;a?b.cancel(a):(b.u--,0>=b.u&&b.cancel())}this.O?this.O.call(null,this):this.B=!0;this.i||(a=new N(this),Hb(this),O(this,!1,a))}};M.prototype.L=function(a,b){this.s=!1;O(this,a,b)};function O(a,b,c){a.i=!0;a.h=c;a.l=!b;Ib(a)}
+function Hb(a){if(a.i){if(!a.B)throw new P(a);a.B=!1}}M.prototype.I=function(a){Hb(this);O(this,!0,a)};function cb(a,b){Q(a,b,null,void 0)}function Q(a,b,c,d){a.j.push([b,c,d]);a.i&&Ib(a)}M.prototype.then=function(a,b,c){var d,e,f=new J(function(g,h){d=g;e=h});Q(this,d,function(g){g instanceof N?f.cancel():e(g)});return f.then(a,b,c)};M.prototype.$goog_Thenable=!0;function Jb(a){return ia(a.j,function(b){return"function"===typeof b[1]})}
+function Ib(a){if(a.m&&a.i&&Jb(a)){var b=a.m,c=R[b];c&&(m.clearTimeout(c.g),delete R[b]);a.m=0}a.g&&(a.g.u--,delete a.g);b=a.h;for(var d=c=!1;a.j.length&&!a.s;){var e=a.j.shift(),f=e[0],g=e[1];e=e[2];if(f=a.l?g:f)try{var h=f.call(e||null,b);void 0!==h&&(a.l=a.l&&(h==b||h instanceof Error),a.h=b=h);if(sb(b)||"function"===typeof m.Promise&&b instanceof m.Promise)d=!0,a.s=!0}catch(l){b=l,a.l=!0,Jb(a)||(c=!0)}}a.h=b;d&&(h=r(a.L,a,!0),d=r(a.L,a,!1),b instanceof M?(Q(b,h,d),b.U=!0):b.then(h,d));c&&(b=new Lb(b),
+R[b.g]=b,a.m=b.g)}function Mb(){var a=new M,b=Error("Invalid origin");Hb(a);O(a,!1,b);return a}function P(){u.call(this)}t(P,u);P.prototype.message="Deferred has already fired";P.prototype.name="AlreadyCalledError";function N(){u.call(this)}t(N,u);N.prototype.message="Deferred was canceled";N.prototype.name="CanceledError";function Lb(a){this.g=m.setTimeout(r(this.i,this),0);this.h=a}Lb.prototype.i=function(){delete R[this.g];throw this.h;};var R={};function S(){A.call(this);this.g=new F(this);this.B=this;this.m=null}t(S,A);S.prototype[D]=!0;S.prototype.removeEventListener=function(a,b,c,d){Ua(this,a,b,c,d)};S.prototype.o=function(){S.A.o.call(this);if(this.g){var a=this.g,b=0,c;for(c in a.g){for(var d=a.g[c],e=0;e<d.length;e++)++b,E(d[e]);delete a.g[c];a.h--}}this.m=null};
+function T(a,b,c,d){b=a.g.g[String(b)];if(!b)return!0;b=b.concat();for(var e=!0,f=0;f<b.length;++f){var g=b[f];if(g&&!g.F&&g.capture==c){var h=g.listener,l=g.J||g.src;g.H&&Ia(a.g,g);e=!1!==h.call(l,d)&&e}}return e&&!d.defaultPrevented};function Nb(a,b){S.call(this);this.j=a||1;this.i=b||m;this.s=r(this.W,this);this.u=Date.now()}t(Nb,S);k=Nb.prototype;k.G=!1;k.v=null;
+k.W=function(){if(this.G){var a=Date.now()-this.u;if(0<a&&a<.8*this.j)this.v=this.i.setTimeout(this.s,this.j-a);else{this.v&&(this.i.clearTimeout(this.v),this.v=null);var b;if(a=this.m)for(b=[];a;a=a.m)b.push(a);a=this.B;var c="tick",d=c.type||c;if("string"===typeof c)c=new B(c,a);else if(c instanceof B)c.target=c.target||a;else{var e=c;c=new B(d,a);qa(c,e)}e=!0;if(b)for(var f=b.length-1;0<=f;f--){var g=c.g=b[f];e=T(g,d,!0,c)&&e}g=c.g=a;e=T(g,d,!0,c)&&e;e=T(g,d,!1,c)&&e;if(b)for(f=0;f<b.length;f++)g=
+c.g=b[f],e=T(g,d,!1,c)&&e;this.G&&(Ob(this),this.start())}}};k.start=function(){this.G=!0;this.v||(this.v=this.i.setTimeout(this.s,this.j),this.u=Date.now())};function Ob(a){a.G=!1;a.v&&(a.i.clearTimeout(a.v),a.v=null)}k.o=function(){Nb.A.o.call(this);Ob(this);delete this.i};function Pb(a){G.call(this);this.g=a;this.m=Ma(this.g,"message",this.V,!1,this)}t(Pb,G);function Qb(a,b){if("*"==b)return new H(Mb());var c=new Nb(50),d=ea(y,c),e=new M(d);Q(e,d,d,void 0);c.start();Ma(c,"tick",function(){function f(){console.log("got back message from iframe. channel created!");g.port1.removeEventListener("message",f,!0);c.h||e.I(new Pb(g.port1))}var g=new MessageChannel;g.port1.start();g.port1.addEventListener("message",f,!0);a.postMessage({"--goog.messaging.PortChannel":!0},b,[g.port2])});return new H(e)}var Rb;
+if(Rb=wa){for(var Sb=0,Tb=ja(String(Ba)).split("."),Ub=ja("533").split("."),Vb=Math.max(Tb.length,Ub.length),Wb=0;0==Sb&&Wb<Vb;Wb++){var Xb=Tb[Wb]||"",Yb=Ub[Wb]||"";do{var U=/(\d*)(\D*)(.*)/.exec(Xb)||["","","",""],V=/(\d*)(\D*)(.*)/.exec(Yb)||["","","",""];if(0==U[0].length&&0==V[0].length)break;Sb=ka(0==U[1].length?0:parseInt(U[1],10),0==V[1].length?0:parseInt(V[1],10))||ka(0==U[2].length,0==V[2].length)||ka(U[2],V[2]);Xb=U[3];Yb=V[3]}while(0==Sb)}Rb=0>Sb}var Zb=Rb;k=Pb.prototype;
+k.D=function(a,b){var c=[];b=this.M(c,b);a={serviceName:a,payload:b,"--goog.messaging.PortChannel":!0};Zb&&(a=Xa(a));this.g.postMessage(a,c)};
+k.V=function(a){a=a.i;var b=a.data;if(Zb)try{b=JSON.parse(b)}catch(e){return}var c;if(c=p(b)&&b["--goog.messaging.PortChannel"])c=b,"serviceName"in c?"payload"in c?c=!0:(Ca(c),c=!1):(Ca(c),c=!1);if(c){c=b.serviceName;b=b.payload;var d=this.j[c];if(c=d?d:this.i?{I:ea(this.i,c),T:p(b)}:null){a:{a=this.N(a.ports||[],b);if((d=c.T)&&"string"===typeof a)try{b=JSON.parse(a);break a}catch(e){b=null;break a}else if(!d&&"string"!==typeof a){b=Xa(a);break a}b=a}null!=b&&c.I(b)}}};
+k.M=function(a,b){return b&&"[object MessagePort]"==Object.prototype.toString.call(b)?(a.push(b),{_port:{type:"real",index:a.length-1}}):Array.isArray(b)?ha(b,r(this.M,this,a)):b&&b.constructor==Object?oa(b,function(c,d){c=this.M(a,c);return"_port"==d?{type:"escaped",val:c}:c},this):b};k.N=function(a,b){return Array.isArray(b)?ha(b,r(this.N,this,a)):b&&b.constructor==Object?b._port&&"real"==b._port.type?a[b._port.index]:oa(b,function(c,d){return this.N(a,"_port"==d?c.val:c)},this):b};
+k.o=function(){Va(this.m);"[object MessagePort]"==Object.prototype.toString.call(this.g)?this.g.close():"[object Worker]"==Object.prototype.toString.call(this.g)&&this.g.terminate();delete this.g;Pb.A.o.call(this)};function $b(a){A.call(this);this.i=a;this.g={};this.i.K(r(this.j,this))}t($b,A);function ac(a,b){if(-1!=b.indexOf(":"))throw Error('Virtual channel name "'+b+'" should not contain colons');if(b in a.g)throw Error('Virtual channel "'+b+'" was already created for this multichannel.');var c=new bc(a,b);return a.g[b]=c}$b.prototype.j=function(a,b){if(a=a.match(/^([^:]*):(.*)/)){var c=a[1];a=a[2];c in this.g&&(c=this.g[c])&&c.j&&c.j(a,b)}};
+$b.prototype.o=function(){na(this.g,function(a){y(a)});y(this.i);delete this.g;delete this.i};function bc(a,b){A.call(this);this.g=a;this.i=b}t(bc,A);k=bc.prototype;k.connect=function(a){a&&a()};k.C=function(a,b,c){this.g.i.C(this.i+":"+a,r(this.S,this,b),c)};k.K=function(a){this.j=r(this.S,this,a)};k.D=function(a,b){if(this.h)throw Error("#send called for disposed VirtualChannel.");this.g.i.D(this.i+":"+a,b)};k.S=function(a,b){this.h||a.apply({},Array.prototype.slice.call(arguments,1))};
+k.o=function(){this.g=this.g.g[this.i]=null};function W(a){A.call(this);this.g=new $b(a);this.j={};this.i=ac(this.g,"private");this.m=ac(this.g,"public");this.i.C("mics",r(this.u,this),!0)}t(W,A);W.prototype.o=function(){y(this.g);delete this.g;delete this.m;delete this.i};W.prototype.u=function(a){var b=a.signature;a=a.data;b in this.j&&((0,this.j[b])(a),delete this.j[b])};W.prototype.s=function(a,b){a=a(b.data);var c=b.signature;wb(a).then(r(function(d){var e={};e.data=d;e.signature=c;this.i&&this.i.D("mics",e)},this))};function cc(a,b,c){a=Qb(a,b);var d=new W(a);c.forEach(function(e,f,g){null!=f&&null!=g.get(f)&&(g=g.get(f),d.m.C(f,r(d.s,d,g),!0))});return d}var X=["__AMP_createRC"],Y=m;X[0]in Y||"undefined"==typeof Y.execScript||Y.execScript("var "+X[0]);for(var Z;X.length&&(Z=X.shift());)X.length||void 0===cc?Y[Z]&&Y[Z]!==Object.prototype[Z]?Y=Y[Z]:Y=Y[Z]={}:Y[Z]=cc;
+export function createRespondingChannel(window, origin, serviceHandlersMap) {
+  const rc = __AMP_createRC(window, origin, serviceHandlersMap);
+  console.log("after calling create RC!");
+  return rc;
+}
\ No newline at end of file
diff --git a/third_party/closure-responding-channel/closure-wrapper.js b/third_party/closure-responding-channel/closure-wrapper.js
new file mode 100644
index 0000000000000..20cc204113c3c
--- /dev/null
+++ b/third_party/closure-responding-channel/closure-wrapper.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright 2021 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.
+ */
+
+/**
+ * @fileoverview Export a custom function to create RespondingChannel. The function is basically a wrapper around the real
+ * implementation in Closure library.
+ */
+
+goog.require('goog.messaging.PortChannel');
+goog.require('goog.messaging.RespondingChannel');
+
+function createRC(frameWindow, origin, serviceHandlersMap) {
+  const portChannel = goog.messaging.PortChannel.forEmbeddedWindow(
+    frameWindow,
+    origin
+  );
+  const respondingChannel = new goog.messaging.RespondingChannel(portChannel);
+
+  serviceHandlersMap.forEach((_, serviceName, serviceHandlersMap) => {
+    if (serviceName != null && serviceHandlersMap.get(serviceName) != null) {
+      respondingChannel.registerService(
+        serviceName,
+        serviceHandlersMap.get(serviceName)
+      );
+    }
+  });
+
+  return respondingChannel;
+}
+
+goog.exportSymbol('__AMP_createRC', createRC);
diff --git a/third_party/closure-responding-channel/compile.sh b/third_party/closure-responding-channel/compile.sh
new file mode 100644
index 0000000000000..3c9a334fe13e9
--- /dev/null
+++ b/third_party/closure-responding-channel/compile.sh
@@ -0,0 +1,136 @@
+#!/bin/bash
+
+# install google closure library:  `npm install google-closure-library` at amphtml
+# folder
+CLOSURE_LIB=../../../../node_modules/google-closure-library
+
+# TODO: ensure the new up-to-date compiler could generate the same output as the Google's internal one
+# after the PR to update Closure compiler got in(https://github.com/ampproject/amphtml/pull/33153). Currently
+# the output of this script is not used.
+npx google-closure-compiler \
+  --jscomp_warning=nonStandardJsDocs \
+  --jscomp_warning=checkDebuggerStatement \
+  --jscomp_warning=externsValidation \
+  --jscomp_warning=missingOverride \
+  --jscomp_error=checkRegExp \
+  --jscomp_error=checkTypes \
+  --jscomp_error=const \
+  --jscomp_error=es5Strict \
+  --jscomp_error=globalThis \
+  --jscomp_error=missingProvide \
+  --jscomp_error=missingProperties \
+  --jscomp_error=missingReturn \
+  --jscomp_error=nonStandardJsDocs \
+  --jscomp_error=suspiciousCode \
+  --jscomp_error=tooManyTypeParams \
+  --jscomp_error=unknownDefines \
+  --jscomp_error=uselessCode \
+  --jscomp_error=visibility \
+  --language_out=ECMASCRIPT5_STRICT \
+  --define=goog.DEBUG=false \
+  --generate_exports \
+  --use_types_for_optimization \
+  --compilation_level ADVANCED_OPTIMIZATIONS \
+  --define=goog.TRANSPILE=never \
+  --define=goog.LOAD_MODULE_USING_EVAL=false \
+  --js_output_file "closure-bundle.js" \
+  --output_wrapper "
+  %output%;
+  export function createRespondingChannel(window, origin, serviceHandlersMap) {
+    const rc = __AMP_createRC(window, origin, serviceHandlersMap);
+    return rc;
+  }" \
+  --js "$CLOSURE_LIB/closure/goog/base.js" \
+  --js "$CLOSURE_LIB/closure/goog/promise/resolver.js" \
+  --js "$CLOSURE_LIB/closure/goog/dom/nodetype.js" \
+  --js "$CLOSURE_LIB/closure/goog/debug/error.js" \
+  --js "$CLOSURE_LIB/closure/goog/debug/errorhandler.js" \
+  --js "$CLOSURE_LIB/closure/goog/debug/tracer.js" \
+  --js "$CLOSURE_LIB/closure/goog/asserts/asserts.js" \
+  --js "$CLOSURE_LIB/closure/goog/async/freelist.js" \
+  --js "$CLOSURE_LIB/closure/goog/async/workqueue.js" \
+  --js "$CLOSURE_LIB/closure/goog/string/internal.js" \
+  --js "$CLOSURE_LIB/closure/goog/structs/simplepool.js" \
+  --js "$CLOSURE_LIB/closure/goog/structs/map.js" \
+  --js "$CLOSURE_LIB/closure/goog/iter/iter.js" \
+  --js "$CLOSURE_LIB/closure/goog/iter/es6.js" \
+  --js "$CLOSURE_LIB/closure/goog/object/object.js" \
+  --js "$CLOSURE_LIB/closure/goog/labs/useragent/util.js" \
+  --js "$CLOSURE_LIB/closure/goog/array/array.js" \
+  --js "$CLOSURE_LIB/closure/goog/labs/useragent/browser.js" \
+  --js "$CLOSURE_LIB/closure/goog/dom/htmlelement.js" \
+  --js "$CLOSURE_LIB/closure/goog/dom/tagname.js" \
+  --js "$CLOSURE_LIB/closure/goog/debug/entrypointregistry.js" \
+  --js "$CLOSURE_LIB/closure/goog/fs/url.js" \
+  --js "$CLOSURE_LIB/closure/goog/string/typedstring.js" \
+  --js "$CLOSURE_LIB/closure/goog/string/const.js" \
+  --js "$CLOSURE_LIB/closure/goog/i18n/bidi.js" \
+  --js "$CLOSURE_LIB/closure/goog/fs/blob.js" \
+  --js "$CLOSURE_LIB/closure/goog/html/trustedtypes.js" \
+  --js "$CLOSURE_LIB/closure/goog/html/safescript.js" \
+  --js "$CLOSURE_LIB/closure/goog/html/trustedresourceurl.js" \
+  --js "$CLOSURE_LIB/closure/goog/html/safeurl.js" \
+  --js "$CLOSURE_LIB/closure/goog/html/safestyle.js" \
+  --js "$CLOSURE_LIB/closure/goog/html/safestylesheet.js" \
+  --js "$CLOSURE_LIB/closure/goog/dom/tags.js" \
+  --js "$CLOSURE_LIB/closure/goog/html/safehtml.js" \
+  --js "$CLOSURE_LIB/closure/goog/html/uncheckedconversions.js" \
+  --js "$CLOSURE_LIB/closure/goog/dom/asserts.js" \
+  --js "$CLOSURE_LIB/closure/goog/functions/functions.js" \
+  --js "$CLOSURE_LIB/closure/goog/dom/safe.js" \
+  --js "$CLOSURE_LIB/closure/goog/string/string.js" \
+  --js "$CLOSURE_LIB/closure/goog/labs/useragent/platform.js" \
+  --js "$CLOSURE_LIB/closure/goog/reflect/reflect.js" \
+  --js "$CLOSURE_LIB/closure/goog/labs/useragent/engine.js" \
+  --js "$CLOSURE_LIB/closure/goog/useragent/useragent.js" \
+  --js "$CLOSURE_LIB/closure/goog/math/size.js" \
+  --js "$CLOSURE_LIB/closure/goog/dom/browserfeature.js" \
+  --js "$CLOSURE_LIB/closure/goog/math/math.js" \
+  --js "$CLOSURE_LIB/closure/goog/math/coordinate.js" \
+  --js "$CLOSURE_LIB/closure/goog/dom/dom.js" \
+  --js "$CLOSURE_LIB/closure/goog/async/nexttick.js" \
+  --js "$CLOSURE_LIB/closure/goog/async/throwexception.js" \
+  --js "$CLOSURE_LIB/closure/goog/async/run.js" \
+  --js "$CLOSURE_LIB/closure/goog/promise/thenable.js" \
+  --js "$CLOSURE_LIB/closure/goog/promise/promise.js" \
+  --js "$CLOSURE_LIB/closure/goog/disposable/dispose.js" \
+  --js "$CLOSURE_LIB/closure/goog/disposable/disposeall.js" \
+  --js "$CLOSURE_LIB/closure/goog/disposable/idisposable.js" \
+  --js "$CLOSURE_LIB/closure/goog/disposable/disposable.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/eventid.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/eventlike.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/listenablekey.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/listenable.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/listener.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/listenermap.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/event.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/browserfeature.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/eventtype.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/eventwrapper.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/eventhandler.js" \
+  --js "$CLOSURE_LIB/closure/goog/debug/errorcontext.js" \
+  --js "$CLOSURE_LIB/closure/goog/debug/debug.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/browserevent.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/events.js" \
+  --js "$CLOSURE_LIB/closure/goog/events/eventtarget.js" \
+  --js "$CLOSURE_LIB/closure/goog/timer/timer.js" \
+  --js "$CLOSURE_LIB/closure/goog/json/json.js" \
+  --js "$CLOSURE_LIB/closure/goog/debug/logrecord.js" \
+  --js "$CLOSURE_LIB/closure/goog/debug/logbuffer.js" \
+  --js "$CLOSURE_LIB/closure/goog/debug/logger.js" \
+  --js "$CLOSURE_LIB/closure/goog/log/log.js" \
+  --js "$CLOSURE_LIB/closure/goog/messaging/messaging.js" \
+  --js "$CLOSURE_LIB/closure/goog/messaging/messagechannel.js" \
+  --js "$CLOSURE_LIB/closure/goog/messaging/abstractchannel.js" \
+  --js "$CLOSURE_LIB/closure/goog/messaging/bufferedchannel.js" \
+  --js "$CLOSURE_LIB/closure/goog/messaging/deferredchannel.js" \
+  --js "$CLOSURE_LIB/closure/goog/messaging/portchannel.js" \
+  --js "$CLOSURE_LIB/closure/goog/messaging/portcaller.js" \
+  --js "$CLOSURE_LIB/closure/goog/messaging/portnetwork.js" \
+  --js "$CLOSURE_LIB/closure/goog/messaging/portoperator.js" \
+  --js "$CLOSURE_LIB/closure/goog/messaging/multichannel.js" \
+  --js "$CLOSURE_LIB/closure/goog/messaging/respondingchannel.js" \
+  --js "$CLOSURE_LIB/third_party/closure/goog/mochikit/async/deferred.js" \
+  --output_manifest manifest.MF \
+  --js "closure-wrapper.js" \
+  --entry_point "closure-wrapper.js"
\ No newline at end of file
diff --git a/third_party/closure-responding-channel/manifest.MF b/third_party/closure-responding-channel/manifest.MF
new file mode 100644
index 0000000000000..86f1ee53f91a8
--- /dev/null
+++ b/third_party/closure-responding-channel/manifest.MF
@@ -0,0 +1,75 @@
+../../../../node_modules/google-closure-library/closure/goog/base.js
+../../../../node_modules/google-closure-library/closure/goog/promise/thenable.js
+../../../../node_modules/google-closure-library/closure/goog/debug/error.js
+../../../../node_modules/google-closure-library/closure/goog/dom/nodetype.js
+../../../../node_modules/google-closure-library/closure/goog/asserts/asserts.js
+../../../../node_modules/google-closure-library/closure/goog/async/freelist.js
+../../../../node_modules/google-closure-library/closure/goog/async/workqueue.js
+../../../../node_modules/google-closure-library/closure/goog/debug/entrypointregistry.js
+../../../../node_modules/google-closure-library/closure/goog/array/array.js
+../../../../node_modules/google-closure-library/closure/goog/string/internal.js
+../../../../node_modules/google-closure-library/closure/goog/labs/useragent/util.js
+../../../../node_modules/google-closure-library/closure/goog/object/object.js
+../../../../node_modules/google-closure-library/closure/goog/labs/useragent/browser.js
+../../../../node_modules/google-closure-library/closure/goog/dom/asserts.js
+../../../../node_modules/google-closure-library/closure/goog/functions/functions.js
+../../../../node_modules/google-closure-library/closure/goog/dom/htmlelement.js
+../../../../node_modules/google-closure-library/closure/goog/dom/tagname.js
+../../../../node_modules/google-closure-library/closure/goog/dom/tags.js
+../../../../node_modules/google-closure-library/closure/goog/string/typedstring.js
+../../../../node_modules/google-closure-library/closure/goog/string/const.js
+../../../../node_modules/google-closure-library/closure/goog/html/trustedtypes.js
+../../../../node_modules/google-closure-library/closure/goog/html/safescript.js
+../../../../node_modules/google-closure-library/closure/goog/fs/url.js
+../../../../node_modules/google-closure-library/closure/goog/fs/blob.js
+../../../../node_modules/google-closure-library/closure/goog/i18n/bidi.js
+../../../../node_modules/google-closure-library/closure/goog/html/trustedresourceurl.js
+../../../../node_modules/google-closure-library/closure/goog/html/safeurl.js
+../../../../node_modules/google-closure-library/closure/goog/html/safestyle.js
+../../../../node_modules/google-closure-library/closure/goog/html/safestylesheet.js
+../../../../node_modules/google-closure-library/closure/goog/html/safehtml.js
+../../../../node_modules/google-closure-library/closure/goog/html/uncheckedconversions.js
+../../../../node_modules/google-closure-library/closure/goog/dom/safe.js
+../../../../node_modules/google-closure-library/closure/goog/string/string.js
+../../../../node_modules/google-closure-library/closure/goog/labs/useragent/engine.js
+../../../../node_modules/google-closure-library/closure/goog/labs/useragent/platform.js
+../../../../node_modules/google-closure-library/closure/goog/reflect/reflect.js
+../../../../node_modules/google-closure-library/closure/goog/useragent/useragent.js
+../../../../node_modules/google-closure-library/closure/goog/dom/browserfeature.js
+../../../../node_modules/google-closure-library/closure/goog/math/math.js
+../../../../node_modules/google-closure-library/closure/goog/math/coordinate.js
+../../../../node_modules/google-closure-library/closure/goog/math/size.js
+../../../../node_modules/google-closure-library/closure/goog/dom/dom.js
+../../../../node_modules/google-closure-library/closure/goog/async/nexttick.js
+../../../../node_modules/google-closure-library/closure/goog/async/throwexception.js
+../../../../node_modules/google-closure-library/closure/goog/async/run.js
+../../../../node_modules/google-closure-library/closure/goog/promise/resolver.js
+../../../../node_modules/google-closure-library/closure/goog/promise/promise.js
+../../../../node_modules/google-closure-library/closure/goog/disposable/idisposable.js
+../../../../node_modules/google-closure-library/closure/goog/disposable/dispose.js
+../../../../node_modules/google-closure-library/closure/goog/disposable/disposeall.js
+../../../../node_modules/google-closure-library/closure/goog/disposable/disposable.js
+../../../../node_modules/google-closure-library/closure/goog/debug/errorcontext.js
+../../../../node_modules/google-closure-library/closure/goog/debug/debug.js
+../../../../node_modules/google-closure-library/closure/goog/events/browserfeature.js
+../../../../node_modules/google-closure-library/closure/goog/events/eventid.js
+../../../../node_modules/google-closure-library/closure/goog/events/event.js
+../../../../node_modules/google-closure-library/closure/goog/events/eventtype.js
+../../../../node_modules/google-closure-library/closure/goog/events/browserevent.js
+../../../../node_modules/google-closure-library/closure/goog/events/listenable.js
+../../../../node_modules/google-closure-library/closure/goog/events/listenablekey.js
+../../../../node_modules/google-closure-library/closure/goog/events/listener.js
+../../../../node_modules/google-closure-library/closure/goog/events/listenermap.js
+../../../../node_modules/google-closure-library/closure/goog/events/events.js
+../../../../node_modules/google-closure-library/closure/goog/events/eventtarget.js
+../../../../node_modules/google-closure-library/closure/goog/timer/timer.js
+../../../../node_modules/google-closure-library/third_party/closure/goog/mochikit/async/deferred.js
+../../../../node_modules/google-closure-library/closure/goog/json/json.js
+../../../../node_modules/google-closure-library/closure/goog/log/log.js
+../../../../node_modules/google-closure-library/closure/goog/messaging/messagechannel.js
+../../../../node_modules/google-closure-library/closure/goog/messaging/abstractchannel.js
+../../../../node_modules/google-closure-library/closure/goog/messaging/deferredchannel.js
+../../../../node_modules/google-closure-library/closure/goog/messaging/portchannel.js
+../../../../node_modules/google-closure-library/closure/goog/messaging/multichannel.js
+../../../../node_modules/google-closure-library/closure/goog/messaging/respondingchannel.js
+closure-wrapper.js
diff --git a/third_party/inputmask/build.sh b/third_party/inputmask/build.sh
index d18b9934622c4..a88f98f2905bb 100755
--- a/third_party/inputmask/build.sh
+++ b/third_party/inputmask/build.sh
@@ -1,4 +1,6 @@
 #!/bin/sh
-./node_modules/.bin/browserify \
+npm install -g browserify babelify uglifyify
+browserify \
 -t [ babelify --presets [ @babel/preset-env ] ] -g uglifyify \
 ./third_party/inputmask/index.js > ./third_party/inputmask/bundle.js
+npm uninstall -g browserify babelify uglifyify
diff --git a/third_party/nailgun/README.amp b/third_party/nailgun/README.amp
deleted file mode 100644
index 9ba429cfca70d..0000000000000
--- a/third_party/nailgun/README.amp
+++ /dev/null
@@ -1,20 +0,0 @@
-URL: https://github.com/facebook/nailgun
-License: Apache license, version 2.0
-License File: https://github.com/facebook/nailgun/blob/master/LICENSE.txt
-
-Description:
-Nailgun is a client, protocol, and server for running Java programs from the command line without incurring the JVM startup overhead.
-
-The AMP Project uses a custom version of closure compiler available at build-system/runner/dist/runner.jar. The compiler binary is launched several dozen times during the default multi-pass minification process (gulp dist). In order to speed this up, we use nailgun to launch a reusable instance of closure compiler.
-
-Files in this directory (copied from https://github.com/facebook/nailgun/releases/tag/nailgun-all-v1.0.0):
-- nailgun-server.jar (copied from nailgun-server-1.0.0-SNAPSHOT.jar)
-- nailgun-runner (copied from ng.py)
-
-Local Modifications:
-- nailgun-runner: [python3] Fix memoryview to work with python3
-  https://github.com/facebook/nailgun/commit/90167a65969d90094d7997e0308d9ddb1124d4b6
-- nailgun-runner: [python3] Ensure UTF8 strings are sent properly
-  https://github.com/facebook/nailgun/commit/f923d52beff7963f508b808f846f9970f97be0f6
-- nailgun-runner: [python3] Remove bytes -> str conversion
-  https://github.com/facebook/nailgun/commit/878f95db2ec6cb3f69144ec456a4b3fa3f1eb2f9
diff --git a/third_party/nailgun/nailgun-runner b/third_party/nailgun/nailgun-runner
deleted file mode 100755
index a87ccf641a961..0000000000000
--- a/third_party/nailgun/nailgun-runner
+++ /dev/null
@@ -1,1052 +0,0 @@
-#!/usr/bin/env python
-#
-# Copyright 2004-2015, Martian Software, Inc.
-# Copyright 2017-Present Facebook, Inc.
-#
-# 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.
-
-from __future__ import print_function
-import ctypes
-import platform
-import optparse
-import os
-import os.path
-import select
-import socket
-import struct
-import sys
-from io import BytesIO
-from threading import Condition, Event, Thread, RLock
-
-is_py2 = sys.version_info[0] == 2
-if is_py2:
-    import Queue as Queue
-    import __builtin__ as builtin
-
-    def to_bytes(s):
-        return s
-
-
-else:
-    import queue as Queue
-    import builtins as builtin
-    from io import UnsupportedOperation
-
-    def to_bytes(s):
-        return bytes(s, "utf-8")
-
-
-# @author <a href="http://www.martiansoftware.com/contact.html">Marty Lamb</a>
-# @author Pete Kirkham (Win32 port)
-# @author Sergey Balabanov, Ben Hamilton (Python port)
-#
-# Please try to keep this working on Python 2.6.
-
-NAILGUN_VERSION = "1.0.0"
-BUFSIZE = 2048
-NAILGUN_PORT_DEFAULT = 2113
-CHUNK_HEADER_LEN = 5
-THREAD_TERMINATION_TIMEOUT_SEC = 0.5
-STDIN_BUFFER_LINE_SIZE = 10
-
-CHUNKTYPE_STDIN = b"0"
-CHUNKTYPE_STDOUT = b"1"
-CHUNKTYPE_STDERR = b"2"
-CHUNKTYPE_STDIN_EOF = b"."
-CHUNKTYPE_ARG = b"A"
-CHUNKTYPE_LONGARG = b"L"
-CHUNKTYPE_ENV = b"E"
-CHUNKTYPE_DIR = b"D"
-CHUNKTYPE_CMD = b"C"
-CHUNKTYPE_EXIT = b"X"
-CHUNKTYPE_SENDINPUT = b"S"
-CHUNKTYPE_HEARTBEAT = b"H"
-
-NSEC_PER_SEC = 1000000000
-DEFAULT_HEARTBEAT_INTERVAL_SEC = 0.5
-SELECT_MAX_BLOCK_TIME_SEC = 1.0
-SEND_THREAD_WAIT_TERMINATION_SEC = 5.0
-
-# We need to support Python 2.6 hosts which lack memoryview().
-HAS_MEMORYVIEW = "memoryview" in dir(builtin)
-
-EVENT_STDIN_CHUNK = 0
-EVENT_STDIN_CLOSED = 1
-EVENT_STDIN_EXCEPTION = 2
-
-
-def compat_memoryview_py2(buf):
-    return memoryview(buf)
-
-
-def compat_memoryview_py3(buf):
-    return memoryview(buf).cast("c")
-
-
-# memoryview in python3, while wrapping ctypes.create_string_buffer has problems with
-# that type's default format (<c) and assignment operators. For python3, cast to
-# a 'c' array. Little endian single byte doesn't make sense anyways. However,
-# 'cast' does not exist for python2. So, we have to toggle a bit.
-compat_memoryview = compat_memoryview_py2 if is_py2 else compat_memoryview_py3
-
-
-class NailgunException(Exception):
-    SOCKET_FAILED = 231
-    CONNECT_FAILED = 230
-    UNEXPECTED_CHUNKTYPE = 229
-    CONNECTION_BROKEN = 227
-
-    def __init__(self, message, code):
-        self.message = message
-        self.code = code
-
-    def __str__(self):
-        return self.message
-
-
-class Transport(object):
-    def close(self):
-        raise NotImplementedError()
-
-    def sendall(self, data):
-        raise NotImplementedError()
-
-    def recv(self, size):
-        raise NotImplementedError()
-
-    def recv_into(self, buffer, size=None):
-        raise NotImplementedError()
-
-    def select(self, timeout_secs):
-        raise NotImplementedError()
-
-
-class UnixTransport(Transport):
-    def __init__(self, __socket):
-        self.__socket = __socket
-        self.recv_flags = 0
-        self.send_flags = 0
-        if hasattr(socket, "MSG_WAITALL"):
-            self.recv_flags |= socket.MSG_WAITALL
-        if hasattr(socket, "MSG_NOSIGNAL"):
-            self.send_flags |= socket.MSG_NOSIGNAL
-
-    def close(self):
-        return self.__socket.close()
-
-    def sendall(self, data):
-        result = self.__socket.sendall(data, self.send_flags)
-        return result
-
-    def recv(self, nbytes):
-        return self.__socket.recv(nbytes, self.recv_flags)
-
-    def recv_into(self, buffer, nbytes=None):
-        return self.__socket.recv_into(buffer, nbytes, self.recv_flags)
-
-    def select(self, timeout_secs):
-        select_list = [self.__socket]
-        readable, _, exceptional = select.select(
-            select_list, [], select_list, timeout_secs
-        )
-        return (self.__socket in readable), (self.__socket in exceptional)
-
-
-if os.name == "nt":
-    import ctypes.wintypes
-
-    wintypes = ctypes.wintypes
-    GENERIC_READ = 0x80000000
-    GENERIC_WRITE = 0x40000000
-    FILE_FLAG_OVERLAPPED = 0x40000000
-    OPEN_EXISTING = 3
-    INVALID_HANDLE_VALUE = ctypes.c_void_p(-1).value
-    FORMAT_MESSAGE_FROM_SYSTEM = 0x00001000
-    FORMAT_MESSAGE_ALLOCATE_BUFFER = 0x00000100
-    FORMAT_MESSAGE_IGNORE_INSERTS = 0x00000200
-    WAIT_FAILED = 0xFFFFFFFF
-    WAIT_TIMEOUT = 0x00000102
-    WAIT_OBJECT_0 = 0x00000000
-    WAIT_IO_COMPLETION = 0x000000C0
-    INFINITE = 0xFFFFFFFF
-
-    # Overlapped I/O operation is in progress. (997)
-    ERROR_IO_PENDING = 0x000003E5
-    ERROR_PIPE_BUSY = 231
-
-    # The pointer size follows the architecture
-    # We use WPARAM since this type is already conditionally defined
-    ULONG_PTR = ctypes.wintypes.WPARAM
-
-    class OVERLAPPED(ctypes.Structure):
-        _fields_ = [
-            ("Internal", ULONG_PTR),
-            ("InternalHigh", ULONG_PTR),
-            ("Offset", wintypes.DWORD),
-            ("OffsetHigh", wintypes.DWORD),
-            ("hEvent", wintypes.HANDLE),
-        ]
-
-    LPDWORD = ctypes.POINTER(wintypes.DWORD)
-
-    CreateFile = ctypes.windll.kernel32.CreateFileW
-    CreateFile.argtypes = [
-        wintypes.LPCWSTR,
-        wintypes.DWORD,
-        wintypes.DWORD,
-        wintypes.LPVOID,
-        wintypes.DWORD,
-        wintypes.DWORD,
-        wintypes.HANDLE,
-    ]
-    CreateFile.restype = wintypes.HANDLE
-
-    CloseHandle = ctypes.windll.kernel32.CloseHandle
-    CloseHandle.argtypes = [wintypes.HANDLE]
-    CloseHandle.restype = wintypes.BOOL
-
-    ReadFile = ctypes.windll.kernel32.ReadFile
-    ReadFile.argtypes = [
-        wintypes.HANDLE,
-        wintypes.LPVOID,
-        wintypes.DWORD,
-        LPDWORD,
-        ctypes.POINTER(OVERLAPPED),
-    ]
-    ReadFile.restype = wintypes.BOOL
-
-    WriteFile = ctypes.windll.kernel32.WriteFile
-    WriteFile.argtypes = [
-        wintypes.HANDLE,
-        wintypes.LPVOID,
-        wintypes.DWORD,
-        LPDWORD,
-        ctypes.POINTER(OVERLAPPED),
-    ]
-    WriteFile.restype = wintypes.BOOL
-
-    GetLastError = ctypes.windll.kernel32.GetLastError
-    GetLastError.argtypes = []
-    GetLastError.restype = wintypes.DWORD
-
-    SetLastError = ctypes.windll.kernel32.SetLastError
-    SetLastError.argtypes = [wintypes.DWORD]
-    SetLastError.restype = None
-
-    FormatMessage = ctypes.windll.kernel32.FormatMessageW
-    FormatMessage.argtypes = [
-        wintypes.DWORD,
-        wintypes.LPVOID,
-        wintypes.DWORD,
-        wintypes.DWORD,
-        ctypes.POINTER(wintypes.LPCWSTR),
-        wintypes.DWORD,
-        wintypes.LPVOID,
-    ]
-    FormatMessage.restype = wintypes.DWORD
-
-    LocalFree = ctypes.windll.kernel32.LocalFree
-
-    GetOverlappedResult = ctypes.windll.kernel32.GetOverlappedResult
-    GetOverlappedResult.argtypes = [
-        wintypes.HANDLE,
-        ctypes.POINTER(OVERLAPPED),
-        LPDWORD,
-        wintypes.BOOL,
-    ]
-    GetOverlappedResult.restype = wintypes.BOOL
-
-    CreateEvent = ctypes.windll.kernel32.CreateEventW
-    CreateEvent.argtypes = [LPDWORD, wintypes.BOOL, wintypes.BOOL, wintypes.LPCWSTR]
-    CreateEvent.restype = wintypes.HANDLE
-
-    PeekNamedPipe = ctypes.windll.kernel32.PeekNamedPipe
-    PeekNamedPipe.argtypes = [
-        wintypes.HANDLE,
-        wintypes.LPVOID,
-        wintypes.DWORD,
-        LPDWORD,
-        LPDWORD,
-        LPDWORD,
-    ]
-    PeekNamedPipe.restype = wintypes.BOOL
-
-    WaitNamedPipe = ctypes.windll.kernel32.WaitNamedPipeW
-    WaitNamedPipe.argtypes = [wintypes.LPCWSTR, wintypes.DWORD]
-    WaitNamedPipe.restype = wintypes.BOOL
-
-    def _win32_strerror(err):
-        """ expand a win32 error code into a human readable message """
-        # FormatMessage will allocate memory and assign it here
-        buf = ctypes.c_wchar_p()
-        FormatMessage(
-            FORMAT_MESSAGE_FROM_SYSTEM
-            | FORMAT_MESSAGE_ALLOCATE_BUFFER
-            | FORMAT_MESSAGE_IGNORE_INSERTS,
-            None,
-            err,
-            0,
-            buf,
-            0,
-            None,
-        )
-        try:
-            return buf.value
-        finally:
-            LocalFree(buf)
-
-
-class WindowsNamedPipeTransport(Transport):
-    """ connect to a named pipe """
-
-    def __init__(self, sockpath):
-        self.sockpath = u"\\\\.\\pipe\\{0}".format(sockpath)
-
-        while True:
-            self.pipe = CreateFile(
-                self.sockpath,
-                GENERIC_READ | GENERIC_WRITE,
-                0,
-                None,
-                OPEN_EXISTING,
-                FILE_FLAG_OVERLAPPED,
-                None,
-            )
-            err1 = GetLastError()
-            msg = _win32_strerror(err1)
-            if self.pipe != INVALID_HANDLE_VALUE:
-                break
-            if err1 != ERROR_PIPE_BUSY:
-                self.pipe = None
-                raise NailgunException(msg, NailgunException.CONNECT_FAILED)
-            if not WaitNamedPipe(self.sockpath, 5000):
-                self.pipe = None
-                raise NailgunException(
-                    "time out while waiting for a pipe", NailgunException.CONNECT_FAILED
-                )
-
-        # event for the overlapped I/O operations
-        self.read_waitable = CreateEvent(None, True, False, None)
-        if self.read_waitable is None:
-            raise NailgunException(
-                "CreateEvent failed", NailgunException.CONNECT_FAILED
-            )
-        self.write_waitable = CreateEvent(None, True, False, None)
-        if self.write_waitable is None:
-            raise NailgunException(
-                "CreateEvent failed", NailgunException.CONNECT_FAILED
-            )
-
-    def _raise_win_err(self, msg, err):
-        raise IOError("%s win32 error code: %d %s" % (msg, err, _win32_strerror(err)))
-
-    def close(self):
-        if self.pipe:
-            CloseHandle(self.pipe)
-        self.pipe = None
-
-        if self.read_waitable is not None:
-            CloseHandle(self.read_waitable)
-        self.read_waitable = None
-
-        if self.write_waitable is not None:
-            CloseHandle(self.write_waitable)
-        self.write_waitable = None
-
-    def recv_into(self, buffer, nbytes):
-        # we don't use memoryview because OVERLAPPED I/O happens
-        # after the method (ReadFile) returns
-        buf = ctypes.create_string_buffer(nbytes)
-        olap = OVERLAPPED()
-        olap.hEvent = self.read_waitable
-
-        immediate = ReadFile(self.pipe, buf, nbytes, None, olap)
-
-        if not immediate:
-            err = GetLastError()
-            if err != ERROR_IO_PENDING:
-                self._raise_win_err("failed to read %d bytes" % nbytes, GetLastError())
-
-        nread = wintypes.DWORD()
-        if not GetOverlappedResult(self.pipe, olap, nread, True):
-            err = GetLastError()
-            self._raise_win_err("error while waiting for read", err)
-
-        nread = nread.value
-        if not is_py2:
-            # Wrap in a memoryview, as python3 does not let you assign from a
-            # ctypes.c_char_array slice directly to a memory view, as one is 'c', and one
-            # is '<c' struct/buffer proto format.
-            buf = compat_memoryview(buf)
-        buffer[:nread] = buf[:nread]
-        return nread
-
-    def sendall(self, data):
-        olap = OVERLAPPED()
-        olap.hEvent = self.write_waitable
-        p = (ctypes.c_ubyte * len(data))(*(bytearray(data)))
-        immediate = WriteFile(self.pipe, p, len(data), None, olap)
-
-        if not immediate:
-            err = GetLastError()
-            if err != ERROR_IO_PENDING:
-                self._raise_win_err(
-                    "failed to write %d bytes" % len(data), GetLastError()
-                )
-
-        # Obtain results, waiting if needed
-        nwrote = wintypes.DWORD()
-        if not GetOverlappedResult(self.pipe, olap, nwrote, True):
-            err = GetLastError()
-            self._raise_win_err("error while waiting for write", err)
-        nwrote = nwrote.value
-        if nwrote != len(data):
-            raise IOError("Async wrote less bytes!")
-        return nwrote
-
-    def select(self, timeout_secs):
-        start = monotonic_time_nanos()
-        timeout_nanos = timeout_secs * NSEC_PER_SEC
-        while True:
-            readable, exceptional = self.select_now()
-            if (
-                readable
-                or exceptional
-                or monotonic_time_nanos() - start > timeout_nanos
-            ):
-                return readable, exceptional
-
-    def select_now(self):
-        available_total = wintypes.DWORD()
-        exceptional = not PeekNamedPipe(self.pipe, None, 0, None, available_total, None)
-        readable = available_total.value > 0
-        result = readable, exceptional
-        return result
-
-
-class NailgunConnection(object):
-    """Stateful object holding the connection to the Nailgun server."""
-
-    def __init__(
-        self,
-        server_name,
-        server_port=None,
-        stdin=sys.stdin,
-        stdout=sys.stdout,
-        stderr=sys.stderr,
-        cwd=None,
-        heartbeat_interval_sec=DEFAULT_HEARTBEAT_INTERVAL_SEC,
-    ):
-        self.transport = make_nailgun_transport(server_name, server_port, cwd)
-        self.stdin = stdin
-        self.stdout = stdout
-        self.stderr = stderr
-        self.recv_flags = 0
-        self.send_flags = 0
-        self.header_buf = ctypes.create_string_buffer(CHUNK_HEADER_LEN)
-        self.buf = ctypes.create_string_buffer(BUFSIZE)
-
-        self.exit_code = None
-
-        self.shutdown_event = Event()
-
-        self.error_lock = RLock()
-        self.error = None
-        self.error_traceback = None
-
-        self.stdin_condition = Condition()
-        self.stdin_thread = Thread(target=stdin_thread_main, args=(self,))
-        self.stdin_thread.daemon = True
-
-        self.send_queue = Queue.Queue()
-        self.send_condition = Condition()
-        self.send_thread = Thread(target=send_thread_main, args=(self,))
-        self.send_thread.daemon = True
-
-        self.heartbeat_interval_sec = heartbeat_interval_sec
-        self.heartbeat_condition = Condition()
-        self.heartbeat_thread = None
-        if heartbeat_interval_sec > 0:
-            self.heartbeat_thread = Thread(target=heartbeat_thread_main, args=(self,))
-            self.heartbeat_thread.daemon = True
-
-    def send_command(
-        self, cmd, cmd_args=[], filearg=None, env=os.environ, cwd=os.getcwd()
-    ):
-        """
-        Sends the command and environment to the nailgun server, then loops forever
-        reading the response until the server sends an exit chunk.
-
-        Returns the exit value, or raises NailgunException on error.
-        """
-        try:
-            return self._send_command_and_read_response(
-                cmd, cmd_args, filearg, env, cwd
-            )
-        except socket.error as e:
-            re_raise(
-                NailgunException(
-                    "Server disconnected unexpectedly: {0}".format(e),
-                    NailgunException.CONNECTION_BROKEN,
-                )
-            )
-
-    def _send_command_and_read_response(self, cmd, cmd_args, filearg, env, cwd):
-        self.stdin_thread.start()
-        self.send_thread.start()
-
-        try:
-
-            if filearg:
-                self._send_file_arg(filearg)
-            for cmd_arg in cmd_args:
-                self._send_chunk(cmd_arg, CHUNKTYPE_ARG)
-            self._send_env_var("NAILGUN_FILESEPARATOR", os.sep)
-            self._send_env_var("NAILGUN_PATHSEPARATOR", os.pathsep)
-            self._send_tty_format(self.stdin)
-            self._send_tty_format(self.stdout)
-            self._send_tty_format(self.stderr)
-            for k, v in env.items():
-                self._send_env_var(k, v)
-            self._send_chunk(cwd, CHUNKTYPE_DIR)
-            self._send_chunk(cmd, CHUNKTYPE_CMD)
-
-            if self.heartbeat_thread is not None:
-                self.heartbeat_thread.start()
-
-            while self.exit_code is None:
-                self._process_next_chunk()
-
-        finally:
-
-            self.shutdown_event.set()
-
-            with self.stdin_condition:
-                self.stdin_condition.notify()
-            with self.send_condition:
-                self.send_condition.notify()
-            if self.heartbeat_thread is not None:
-                with self.heartbeat_condition:
-                    self.heartbeat_condition.notify()
-                self.heartbeat_thread.join(THREAD_TERMINATION_TIMEOUT_SEC)
-            self.stdin_thread.join(THREAD_TERMINATION_TIMEOUT_SEC)
-            self.send_thread.join(THREAD_TERMINATION_TIMEOUT_SEC)
-
-        return self.exit_code
-
-    def _process_next_chunk(self):
-        """
-        Processes the next chunk from the nailgun server.
-        """
-        readable, exceptional = self.transport.select(SELECT_MAX_BLOCK_TIME_SEC)
-        if readable:
-            self._process_nailgun_stream()
-        if exceptional:
-            raise NailgunException(
-                "Server disconnected in select", NailgunException.CONNECTION_BROKEN
-            )
-
-        # if daemon thread threw, rethrow here
-        if self.shutdown_event.is_set():
-            e = None
-            e_tb = None
-            with self.error_lock:
-                e = self.error
-                e_tb = self.error_traceback
-            if e is not None:
-                re_raise(e, e_tb)
-
-    def _send_chunk(self, buf, chunk_type):
-        """
-        Send chunk to the server asynchronously
-        """
-        self.send_queue.put((chunk_type, buf))
-        with self.send_condition:
-            self.send_condition.notify()
-
-    def _send_env_var(self, name, value):
-        """
-        Sends an environment variable in KEY=VALUE format.
-        """
-        self._send_chunk("=".join((name, value)), CHUNKTYPE_ENV)
-
-    def _send_tty_format(self, f):
-        """
-        Sends a NAILGUN_TTY_# environment variable.
-        """
-        if not f or not hasattr(f, "fileno") or isinstance(f, BytesIO):
-            return
-        try:
-            fileno = f.fileno()
-            isatty = os.isatty(fileno)
-            self._send_env_var("NAILGUN_TTY_" + str(fileno), str(int(isatty)))
-        except UnsupportedOperation:
-            return
-
-    def _send_file_arg(self, filename):
-        """
-        Sends the contents of a file to the server.
-        """
-        with open(filename) as f:
-            while True:
-                num_bytes = f.readinto(self.buf)
-                if not num_bytes:
-                    break
-                self._send_chunk(self.buf.raw[:num_bytes], CHUNKTYPE_LONGARG)
-
-    def _recv_to_fd(self, dest_file, num_bytes):
-        """
-        Receives num_bytes bytes from the nailgun socket and copies them to the specified file
-        object. Used to route data to stdout or stderr on the client.
-        """
-        bytes_read = 0
-        dest_fd = dest_file
-        flush = False
-        if dest_file and hasattr(dest_file, 'buffer'):
-            dest_fd = dest_file.buffer
-            flush = True
-            # Make sure we've written anything that already existed in the buffer
-            dest_fd.flush()
-
-        while bytes_read < num_bytes:
-            bytes_to_read = min(len(self.buf), num_bytes - bytes_read)
-            bytes_received = self.transport.recv_into(self.buf, bytes_to_read)
-            if dest_fd:
-                dest_fd.write(self.buf[:bytes_received])
-                if flush:
-                    dest_fd.flush()
-            bytes_read += bytes_received
-
-    def _recv_to_buffer(self, num_bytes, buf):
-        """
-        Receives num_bytes from the nailgun socket and writes them into the specified buffer.
-        """
-        # We'd love to use socket.recv_into() everywhere to avoid
-        # unnecessary copies, but we need to support Python 2.6. The
-        # only way to provide an offset to recv_into() is to use
-        # memoryview(), which doesn't exist until Python 2.7.
-        if HAS_MEMORYVIEW:
-            self._recv_into_memoryview(num_bytes, compat_memoryview(buf))
-        else:
-            self._recv_to_buffer_with_copy(num_bytes, buf)
-
-    def _recv_into_memoryview(self, num_bytes, buf_view):
-        """
-        Receives num_bytes from the nailgun socket and writes them into the specified memoryview
-        to avoid an extra copy.
-        """
-        bytes_read = 0
-        while bytes_read < num_bytes:
-            bytes_received = self.transport.recv_into(
-                buf_view[bytes_read:], num_bytes - bytes_read
-            )
-            if not bytes_received:
-                raise NailgunException(
-                    "Server unexpectedly disconnected in recv_into()",
-                    NailgunException.CONNECTION_BROKEN,
-                )
-            bytes_read += bytes_received
-
-    def _recv_to_buffer_with_copy(self, num_bytes, buf):
-        """
-        Receives num_bytes from the nailgun socket and writes them into the specified buffer.
-        """
-        bytes_read = 0
-        while bytes_read < num_bytes:
-            recv_buf = self.transport.recv(num_bytes - bytes_read)
-            if not len(recv_buf):
-                raise NailgunException(
-                    "Server unexpectedly disconnected in recv()",
-                    NailgunException.CONNECTION_BROKEN,
-                )
-            buf[bytes_read : bytes_read + len(recv_buf)] = recv_buf
-            bytes_read += len(recv_buf)
-
-    def _process_exit(self, exit_len):
-        """
-        Receives an exit code from the nailgun server and sets nailgun_connection.exit_code
-        to indicate the client should exit.
-        """
-        num_bytes = min(len(self.buf), exit_len)
-        self._recv_to_buffer(num_bytes, self.buf)
-        self.exit_code = int(self.buf.raw[:num_bytes])
-
-    def _send_heartbeat(self):
-        """
-        Sends a heartbeat to the nailgun server to indicate the client is still alive.
-        """
-        self._send_chunk("", CHUNKTYPE_HEARTBEAT)
-
-    def _process_nailgun_stream(self):
-        """
-         Processes a single chunk from the nailgun server.
-         """
-        self._recv_to_buffer(len(self.header_buf), self.header_buf)
-        (chunk_len, chunk_type) = struct.unpack_from(">ic", self.header_buf.raw)
-
-        if chunk_type == CHUNKTYPE_STDOUT:
-            self._recv_to_fd(self.stdout, chunk_len)
-        elif chunk_type == CHUNKTYPE_STDERR:
-            self._recv_to_fd(self.stderr, chunk_len)
-        elif chunk_type == CHUNKTYPE_EXIT:
-            self._process_exit(chunk_len)
-        elif chunk_type == CHUNKTYPE_SENDINPUT:
-            # signal stdin thread to get and send more data
-            with self.stdin_condition:
-                self.stdin_condition.notify()
-        else:
-            raise NailgunException(
-                "Unexpected chunk type: {0}".format(chunk_type),
-                NailgunException.UNEXPECTED_CHUNKTYPE,
-            )
-
-    def wait_termination(self, timeout):
-        """
-        Wait for shutdown event to be signalled within specified interval
-        Return True if termination was signalled, False otherwise
-        """
-        wait_time = timeout
-        start = monotonic_time_nanos()
-        with self.send_condition:
-            while True:
-                if self.shutdown_event.is_set():
-                    return True
-                self.send_condition.wait(wait_time)
-                elapsed = (monotonic_time_nanos() - start) * 1.0 / NSEC_PER_SEC
-                wait_time = timeout - elapsed
-                if wait_time <= 0:
-                    return False
-        return False
-
-    def __enter__(self):
-        return self
-
-    def __exit__(self, type, value, traceback):
-        try:
-            self.transport.close()
-        except socket.error:
-            pass
-
-
-def monotonic_time_nanos():
-    """Returns a monotonically-increasing timestamp value in nanoseconds.
-
-    The epoch of the return value is undefined. To use this, you must call
-    it more than once and calculate the delta between two calls.
-    """
-    # This function should be overwritten below on supported platforms.
-    raise Exception("Unsupported platform: " + platform.system())
-
-
-if platform.system() == "Linux":
-    # From <linux/time.h>, available since 2.6.28 (released 24-Dec-2008).
-    CLOCK_MONOTONIC_RAW = 4
-    librt = ctypes.CDLL("librt.so.1", use_errno=True)
-    clock_gettime = librt.clock_gettime
-
-    class struct_timespec(ctypes.Structure):
-        _fields_ = [("tv_sec", ctypes.c_long), ("tv_nsec", ctypes.c_long)]
-
-    clock_gettime.argtypes = [ctypes.c_int, ctypes.POINTER(struct_timespec)]
-
-    def _monotonic_time_nanos_linux():
-        t = struct_timespec()
-        clock_gettime(CLOCK_MONOTONIC_RAW, ctypes.byref(t))
-        return t.tv_sec * NSEC_PER_SEC + t.tv_nsec
-
-    monotonic_time_nanos = _monotonic_time_nanos_linux
-elif platform.system() == "Darwin":
-    # From <mach/mach_time.h>
-    KERN_SUCCESS = 0
-    libSystem = ctypes.CDLL("/usr/lib/libSystem.dylib", use_errno=True)
-    mach_timebase_info = libSystem.mach_timebase_info
-
-    class struct_mach_timebase_info(ctypes.Structure):
-        _fields_ = [("numer", ctypes.c_uint32), ("denom", ctypes.c_uint32)]
-
-    mach_timebase_info.argtypes = [ctypes.POINTER(struct_mach_timebase_info)]
-    mach_ti = struct_mach_timebase_info()
-    ret = mach_timebase_info(ctypes.byref(mach_ti))
-    if ret != KERN_SUCCESS:
-        raise Exception("Could not get mach_timebase_info, error: " + str(ret))
-    mach_absolute_time = libSystem.mach_absolute_time
-    mach_absolute_time.restype = ctypes.c_uint64
-
-    def _monotonic_time_nanos_darwin():
-        return (mach_absolute_time() * mach_ti.numer) / mach_ti.denom
-
-    monotonic_time_nanos = _monotonic_time_nanos_darwin
-elif platform.system() == "Windows":
-    # From <Winbase.h>
-    perf_frequency = ctypes.c_uint64()
-    ctypes.windll.kernel32.QueryPerformanceFrequency(ctypes.byref(perf_frequency))
-
-    def _monotonic_time_nanos_windows():
-        perf_counter = ctypes.c_uint64()
-        ctypes.windll.kernel32.QueryPerformanceCounter(ctypes.byref(perf_counter))
-        return perf_counter.value * NSEC_PER_SEC / perf_frequency.value
-
-    monotonic_time_nanos = _monotonic_time_nanos_windows
-elif sys.platform == "cygwin":
-    k32 = ctypes.CDLL("Kernel32", use_errno=True)
-    perf_frequency = ctypes.c_uint64()
-    k32.QueryPerformanceFrequency(ctypes.byref(perf_frequency))
-
-    def _monotonic_time_nanos_cygwin():
-        perf_counter = ctypes.c_uint64()
-        k32.QueryPerformanceCounter(ctypes.byref(perf_counter))
-        return perf_counter.value * NSEC_PER_SEC / perf_frequency.value
-
-    monotonic_time_nanos = _monotonic_time_nanos_cygwin
-
-
-def send_thread_main(conn):
-    """
-    Sending thread worker function
-    Waits for data and transmits it to server
-    """
-    try:
-        header_buf = ctypes.create_string_buffer(CHUNK_HEADER_LEN)
-        while True:
-            connection_error = None
-            while not conn.send_queue.empty():
-                # only this thread can deplete the queue, so it is safe to use blocking get()
-                (chunk_type, buf) = conn.send_queue.get()
-                bbuf = to_bytes(buf)
-                struct.pack_into(">ic", header_buf, 0, len(bbuf), chunk_type)
-
-                # these chunk types are not required for server to accept and process and server may terminate
-                # any time without waiting for them
-                is_required = chunk_type not in (
-                    CHUNKTYPE_HEARTBEAT,
-                    CHUNKTYPE_STDIN,
-                    CHUNKTYPE_STDIN_EOF,
-                )
-
-                try:
-                    conn.transport.sendall(header_buf.raw)
-                    conn.transport.sendall(bbuf)
-                except socket.error as e:
-                    # The server may send termination signal and close the socket immediately; attempt to write
-                    # to such a socket (i.e. heartbeats) results in an error (SIGPIPE)
-                    # Nailgun protocol is not duplex so the server does not wait on client to acknowledge
-                    # We catch an exception and ignore it if termination has happened shortly afterwards
-                    if not is_required and conn.wait_termination(
-                        SEND_THREAD_WAIT_TERMINATION_SEC
-                    ):
-                        return
-                    raise
-
-            with conn.send_condition:
-                if conn.shutdown_event.is_set():
-                    return
-                if not conn.send_queue.empty():
-                    continue
-                conn.send_condition.wait()
-                if conn.shutdown_event.is_set():
-                    return
-    except Exception as e:
-        # save exception to rethrow on main thread
-        with conn.error_lock:
-            conn.error = e
-            conn.error_traceback = sys.exc_info()[2]
-        conn.shutdown_event.set()
-
-
-def stdin_thread_main(conn):
-    """
-    Stdin thread reading worker function
-    If stdin is available, read it to internal buffer and send to server
-    """
-    try:
-        eof = False
-        while True:
-            # wait for signal to read new line from stdin or shutdown
-            # we  do not start reading from stdin before server actually requests that
-            with conn.stdin_condition:
-                if conn.shutdown_event.is_set():
-                    return
-                conn.stdin_condition.wait()
-                if conn.shutdown_event.is_set():
-                    return
-
-            if not conn.stdin or eof:
-                conn._send_chunk(buf, CHUNKTYPE_STDIN_EOF)
-                continue
-
-            buf = conn.stdin.readline()
-            if buf == "":
-                eof = True
-                conn._send_chunk(buf, CHUNKTYPE_STDIN_EOF)
-                continue
-            conn._send_chunk(buf, CHUNKTYPE_STDIN)
-    except Exception as e:
-        # save exception to rethrow on main thread
-        with conn.error_lock:
-            conn.error = e
-            conn.error_traceback = sys.exc_info()[2]
-        conn.shutdown_event.set()
-
-
-def heartbeat_thread_main(conn):
-    """
-    Heartbeat thread worker function
-    Periodically sends heartbeats to server as long as command is running
-    """
-    try:
-        while True:
-            with conn.heartbeat_condition:
-                if conn.shutdown_event.is_set():
-                    return
-                conn.heartbeat_condition.wait(conn.heartbeat_interval_sec)
-                if conn.shutdown_event.is_set():
-                    return
-            conn._send_heartbeat()
-
-    except Exception as e:
-        # save exception to rethrow on main thread
-        with conn.error_lock:
-            conn.error = e
-            conn.error_traceback = sys.exc_info()[2]
-        conn.shutdown_event.set()
-
-
-def make_nailgun_transport(nailgun_server, nailgun_port=None, cwd=None):
-    """
-    Creates and returns a socket connection to the nailgun server.
-    """
-    transport = None
-    if nailgun_server.startswith("local:"):
-        if platform.system() == "Windows":
-            pipe_addr = nailgun_server[6:]
-            transport = WindowsNamedPipeTransport(pipe_addr)
-        else:
-            try:
-                s = socket.socket(socket.AF_UNIX)
-            except socket.error as msg:
-                re_raise(
-                    NailgunException(
-                        "Could not create local socket connection to server: {0}".format(
-                            msg
-                        ),
-                        NailgunException.SOCKET_FAILED,
-                    )
-                )
-            socket_addr = nailgun_server[6:]
-            prev_cwd = os.getcwd()
-            try:
-                if cwd is not None:
-                    os.chdir(cwd)
-                s.connect(socket_addr)
-                transport = UnixTransport(s)
-            except socket.error as msg:
-                re_raise(
-                    NailgunException(
-                        "Could not connect to local server at {0}: {1}".format(
-                            socket_addr, msg
-                        ),
-                        NailgunException.CONNECT_FAILED,
-                    )
-                )
-            finally:
-                if cwd is not None:
-                    os.chdir(prev_cwd)
-    else:
-        socket_addr = nailgun_server
-        socket_family = socket.AF_UNSPEC
-        for (af, socktype, proto, _, sa) in socket.getaddrinfo(
-            nailgun_server, nailgun_port, socket.AF_UNSPEC, socket.SOCK_STREAM
-        ):
-            try:
-                s = socket.socket(af, socktype, proto)
-            except socket.error as msg:
-                s = None
-                continue
-            try:
-                s.connect(sa)
-                transport = UnixTransport(s)
-            except socket.error as msg:
-                s.close()
-                s = None
-                continue
-            break
-    if transport is None:
-        raise NailgunException(
-            "Could not connect to server {0}:{1}".format(nailgun_server, nailgun_port),
-            NailgunException.CONNECT_FAILED,
-        )
-    return transport
-
-
-if is_py2:
-    exec(
-        '''
-def re_raise(ex, ex_trace = None):
-    """
-    Throw ex and preserve stack trace of original exception if we run on Python 2
-    """
-    if ex_trace is None:
-        ex_trace = sys.exc_info()[2]
-    raise ex, None, ex_trace
-    '''
-    )
-else:
-
-    def re_raise(ex, ex_trace=None):
-        """
-        Throw ex and preserve stack trace of original exception if we run on Python 2
-        """
-        raise ex
-
-
-def main():
-    """
-    Main entry point to the nailgun client.
-    """
-    default_nailgun_server = os.environ.get("NAILGUN_SERVER", "127.0.0.1")
-    default_nailgun_port = int(os.environ.get("NAILGUN_PORT", NAILGUN_PORT_DEFAULT))
-
-    parser = optparse.OptionParser(usage="%prog [options] cmd arg1 arg2 ...")
-    parser.add_option("--nailgun-server", default=default_nailgun_server)
-    parser.add_option("--nailgun-port", type="int", default=default_nailgun_port)
-    parser.add_option("--nailgun-filearg")
-    parser.add_option("--nailgun-showversion", action="store_true")
-    parser.add_option("--nailgun-help", action="help")
-    (options, args) = parser.parse_args()
-
-    if options.nailgun_showversion:
-        print("NailGun client version " + NAILGUN_VERSION)
-
-    if len(args):
-        cmd = args.pop(0)
-    else:
-        cmd = os.path.basename(sys.argv[0])
-
-    # Pass any remaining command line arguments to the server.
-    cmd_args = args
-
-    try:
-        with NailgunConnection(
-            options.nailgun_server, server_port=options.nailgun_port
-        ) as c:
-            exit_code = c.send_command(cmd, cmd_args, options.nailgun_filearg)
-            sys.exit(exit_code)
-    except NailgunException as e:
-        sys.stderr.write(str(e))
-        sys.exit(e.code)
-    except KeyboardInterrupt as e:
-        pass
-
-
-if __name__ == "__main__":
-    main()
diff --git a/third_party/nailgun/nailgun-server.jar b/third_party/nailgun/nailgun-server.jar
deleted file mode 100644
index 404bc99d2525d..0000000000000
Binary files a/third_party/nailgun/nailgun-server.jar and /dev/null differ
diff --git a/third_party/optimized-svg-icons/social-share-svgs.js b/third_party/optimized-svg-icons/social-share-svgs.js
deleted file mode 100644
index 6e8ec16abeb81..0000000000000
--- a/third_party/optimized-svg-icons/social-share-svgs.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as Preact from '../../src/preact';
-
-/**
- * @param {!JsonObject} props
- * @return {PreactDef.Renderable}
- */
-export function SocialShareIcon(props) {
-  switch (props['type']) {
-    case 'FACEBOOK':
-      return (
-        <svg {...props} viewBox="0 0 512 512">
-          <path
-            fill="#fff"
-            d="M211.9 197.4h-36.7v59.9h36.7v175.8h70.5V256.5h49.2l5.2-59.1h-54.4v-33.7c0-13.9 2.8-19.5 16.3-19.5h38.2V82.9h-48.8c-52.5 0-76.1 23.1-76.1 67.3-.1 38.6-.1 47.2-.1 47.2z"
-          ></path>
-        </svg>
-      );
-    case 'PINTEREST':
-      return (
-        <svg {...props} viewBox="0 0 512 512">
-          <path
-            fill="#fff"
-            d="M266.6 76.5c-100.2 0-150.7 71.8-150.7 131.7 0 36.3 13.7 68.5 43.2 80.6 4.8 2 9.2.1 10.6-5.3 1-3.7 3.3-13 4.3-16.9 1.4-5.3.9-7.1-3-11.8-8.5-10-13.9-23-13.9-41.3 0-53.3 39.9-101 103.8-101 56.6 0 87.7 34.6 87.7 80.8 0 60.8-26.9 112.1-66.8 112.1-22.1 0-38.6-18.2-33.3-40.6 6.3-26.7 18.6-55.5 18.6-74.8 0-17.3-9.3-31.7-28.4-31.7-22.5 0-40.7 23.3-40.7 54.6 0 19.9 6.7 33.4 6.7 33.4s-23.1 97.8-27.1 114.9c-8.1 34.1-1.2 75.9-.6 80.1.3 2.5 3.6 3.1 5 1.2 2.1-2.7 28.9-35.9 38.1-69 2.6-9.4 14.8-58 14.8-58 7.3 14 28.7 26.3 51.5 26.3 67.8 0 113.8-61.8 113.8-144.5-.1-62.6-53.1-120.8-133.6-120.8z"
-          ></path>
-        </svg>
-      );
-    case 'LINKEDIN':
-      return (
-        <svg {...props} viewBox="0 0 512 512">
-          <path
-            fill="#fff"
-            d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5-18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5 18.9 0 34.2 15.5 34.2 34.5zm-5 58.9h-57.8v186.8h57.8V201.3zm92.4 0h-55.4v186.8h55.4v-98c0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9v98H398V269.8c0-50-28.3-74.2-68-74.2-39.6 0-56.3 30.9-56.3 30.9v-25.2h.1z"
-          ></path>
-        </svg>
-      );
-    case 'EMAIL':
-      return (
-        <svg {...props} viewBox="0 0 512 512">
-          <path
-            fill="#fff"
-            d="M101.3 141.6v228.9h309.5V141.6H101.3zm274.4 26.2L256 259.3l-119.6-91.5h239.3zm-248.1 26.3l64.1 49.1-64.1 64.1V194.1zm.2 150.1l84.9-84.9 43.2 33.1 43-32.9 84.7 84.7H127.8zm256.6-36.4L320 243.4l64.4-49.3v113.7z"
-          ></path>
-        </svg>
-      );
-    case 'TWITTER':
-      return (
-        <svg {...props} viewBox="0 0 512 512">
-          <path
-            fill="#fff"
-            d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36-12.6 7.5-26.5 12.9-41.3 15.8C357.6 146 340.7 138 322 138c-42 0-72.9 39.2-63.4 79.9-54.1-2.7-102.1-28.6-134.2-68-17 29.2-8.8 67.5 20.1 86.9-10.7-.3-20.7-3.3-29.5-8.1-.7 30.2 20.9 58.4 52.2 64.6-9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2-27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6 12.9-9.1 23.9-20.5 32.6-33.6z"
-          ></path>
-        </svg>
-      );
-    case 'TUMBLR':
-      return (
-        <svg {...props} viewBox="0 0 512 512">
-          <path
-            fill="#fff"
-            d="M210.8 80.3c-2.3 18.3-6.4 33.4-12.4 45.2-6 11.9-13.9 22-23.9 30.5-9.9 8.5-21.8 14.9-35.7 19.5v50.6h38.9v124.5c0 16.2 1.7 28.6 5.1 37.1 3.4 8.5 9.5 16.6 18.3 24.2 8.8 7.6 19.4 13.4 31.9 17.5s26.8 6.1 43 6.1c14.3 0 27.6-1.4 39.9-4.3 12.3-2.9 26-7.9 41.2-15v-55.9c-17.8 11.7-35.7 17.5-53.7 17.5-10.1 0-19.1-2.4-27-7.1-5.9-3.5-10-8.2-12.2-14-2.2-5.8-3.3-19.1-3.3-39.7v-91.1h84.6v-55.8h-84.4v-90h-50.3z"
-          ></path>
-        </svg>
-      );
-    case 'WHATSAPP':
-      return (
-        <svg {...props} viewBox="0 0 46 46">
-          <path
-            fill="#FFF"
-            d="M35.4 10.4C32 6.9 27.3 5 22.5 5 12.3 5 4.1 13.3 4.2 23.4c0 3.2.9 6.3 2.4 9.1L4 42l9.7-2.5c2.7 1.5 5.7 2.2 8.7 2.2 10.1 0 18.3-8.3 18.3-18.4 0-4.9-1.9-9.5-5.3-12.9zM22.5 38.6c-2.7 0-5.4-.7-7.7-2.1l-.6-.3-5.8 1.5L9.9 32l-.4-.6c-4.4-7.1-2.3-16.5 4.9-20.9 7.2-4.4 16.5-2.3 20.9 4.9 4.4 7.2 2.3 16.5-4.9 20.9-2.3 1.5-5.1 2.3-7.9 2.3zm8.8-11.1l-1.1-.5s-1.6-.7-2.6-1.2c-.1 0-.2-.1-.3-.1-.3 0-.5.1-.7.2 0 0-.1.1-1.5 1.7-.1.2-.3.3-.5.3h-.1c-.1 0-.3-.1-.4-.2l-.5-.2c-1.1-.5-2.1-1.1-2.9-1.9-.2-.2-.5-.4-.7-.6-.7-.7-1.4-1.5-1.9-2.4l-.1-.2c-.1-.1-.1-.2-.2-.4 0-.2 0-.4.1-.5 0 0 .4-.5.7-.8.2-.2.3-.5.5-.7.2-.3.3-.7.2-1-.1-.5-1.3-3.2-1.6-3.8-.2-.3-.4-.4-.7-.5h-1.1c-.2 0-.4.1-.6.1l-.1.1c-.2.1-.4.3-.6.4-.2.2-.3.4-.5.6-.7.9-1.1 2-1.1 3.1 0 .8.2 1.6.5 2.3l.1.3c.9 1.9 2.1 3.6 3.7 5.1l.4.4c.3.3.6.5.8.8 2.1 1.8 4.5 3.1 7.2 3.8.3.1.7.1 1 .2h1c.5 0 1.1-.2 1.5-.4.3-.2.5-.2.7-.4l.2-.2c.2-.2.4-.3.6-.5.2-.2.4-.4.5-.6.2-.4.3-.9.4-1.4v-.7s-.1-.1-.3-.2z"
-          ></path>
-        </svg>
-      );
-    case 'LINE':
-      return (
-        <svg {...props} viewBox="0 0 512 512">
-          <path
-            fill="#fff"
-            d="M443.2 233.29c0-84.14-84.35-152.6-188-152.6s-188 68.46-188 152.6c0 75.43 66.9 138.61 157.26 150.55 6.13 1.32 14.46 4 16.57 9.27 1.89 4.76 1.24 12.2.61 17 0 0-2.21 13.26-2.69 16.09-.82 4.75-3.78 18.6 16.29 10.14s108.21-63.76 147.66-109.16c27.25-29.89 40.3-60.18 40.3-93.89zm-254.38 44.92a3.67 3.67 0 01-3.66 3.67h-52.69a3.6 3.6 0 01-2.53-1l-.06-.05v-.05a3.65 3.65 0 01-1-2.53v-81.96a3.66 3.66 0 013.66-3.66h13.19a3.66 3.66 0 013.66 3.66v65.07h35.84a3.66 3.66 0 013.66 3.66zm31.8 0a3.65 3.65 0 01-3.66 3.65h-13.2a3.65 3.65 0 01-3.66-3.65v-81.92a3.66 3.66 0 013.66-3.66H217a3.66 3.66 0 013.66 3.66zm90.78 0a3.65 3.65 0 01-3.66 3.65h-13.19a3.67 3.67 0 01-.94-.12h-.05l-.25-.08h-.11l-.18-.08-.17-.08-.11-.06-.22-.14a3.45 3.45 0 01-.93-.9L254 229.56v48.66a3.66 3.66 0 01-3.67 3.65H237.1a3.65 3.65 0 01-3.66-3.65v-81.93a3.66 3.66 0 013.66-3.66h13.86l.21.05h.13l.21.07h.12a1.31 1.31 0 01.21.08l.12.06.19.11a.41.41 0 01.11.07l.19.13.1.07.19.16.07.07a2.28 2.28 0 01.22.22 3.58 3.58 0 01.28.37L290.89 245v-48.71a3.66 3.66 0 013.66-3.66h13.19a3.66 3.66 0 013.66 3.66zm72.83-68.74a3.66 3.66 0 01-3.65 3.67h-35.84V227h35.84a3.66 3.66 0 013.65 3.67v13.19a3.65 3.65 0 01-3.65 3.66h-35.84v13.85h35.84a3.65 3.65 0 013.65 3.66v13.19a3.66 3.66 0 01-3.65 3.67h-52.7a3.66 3.66 0 01-2.53-1l-.05-.05a.12.12 0 01-.05-.05 3.65 3.65 0 01-1-2.53V196.3a3.6 3.6 0 011-2.52l.06-.07a3.63 3.63 0 012.54-1h52.7a3.66 3.66 0 013.65 3.67z"
-            data-name="レイヤー 1"
-          ></path>
-        </svg>
-      );
-    case 'SMS':
-      return (
-        <svg {...props} viewBox="0 0 30 29">
-          <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="3">
-            <path
-              stroke="#FFF"
-              strokeWidth="3"
-              d="M8.73038556 26L8.73038556 20.3418498 2 20.3418498 2 2 27.9696307 2 28 20.3547094 15.9383952 20.3972827z"
-            ></path>
-          </g>
-        </svg>
-      );
-    case 'SYSTEM':
-      return (
-        <svg {...props} viewBox="0 0 24 24">
-          <path fill="none" d="M0 0h24v24H0z"></path>
-          <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"></path>
-        </svg>
-      );
-    default:
-      return <svg {...props}></svg>;
-  }
-}
diff --git a/third_party/react-dates/build.sh b/third_party/react-dates/build.sh
index a41f9f0a5e952..cb919a48438b9 100755
--- a/third_party/react-dates/build.sh
+++ b/third_party/react-dates/build.sh
@@ -1,5 +1,6 @@
 #!/bin/sh
-./node_modules/.bin/browserify \
+npm install -g browserify babelify derequire envify prop-types react-addons-shallow-compare react-externs react-with-direction uglifyify
+browserify \
 -t [ babelify --presets [ @babel/preset-env ] ] \
 -g [ envify purge --NODE_ENV production ] \
 -g uglifyify \
@@ -8,5 +9,6 @@
 -r react-dates -r react-dates/initialize -r react-dates/constants \
 ./third_party/react-dates/index.js | \
 node ./third_party/react-dates/scope-require.js | \
-./node_modules/.bin/derequire > ./third_party/react-dates/bundle.js
+derequire > ./third_party/react-dates/bundle.js
 cp ./node_modules/react-dates/lib/css/_datepicker.css ./third_party/react-dates/
+npm uninstall -g browserify babelify derequire envify prop-types react-addons-shallow-compare react-externs react-with-direction uglifyify
diff --git a/third_party/react-dates/debug.sh b/third_party/react-dates/debug.sh
index 458a50bd0362d..eb567465e2152 100755
--- a/third_party/react-dates/debug.sh
+++ b/third_party/react-dates/debug.sh
@@ -1,13 +1,13 @@
 #!/bin/sh
-yarn add js-beautify
-./node_modules/.bin/browserify \
+npm install -g browserify babelify derequire envify prop-types react-addons-shallow-compare react-externs react-with-direction uglifyify
+browserify \
 -t [ babelify --presets [ @babel/preset-env ] ] \
 -r prop-types -r preact:react -r preact/compat:react-dom \
 -r moment/min/moment-with-locales:moment \
 -r react-dates -r react-dates/initialize -r react-dates/constants \
 ./third_party/react-dates/index.js | \
 node ./third_party/react-dates/scope-require.js | \
-./node_modules/.bin/derequire | \
-./node_modules/.bin/js-beautify > ./third_party/react-dates/bundle.js
+derequire | \
+js-beautify > ./third_party/react-dates/bundle.js
 cp ./node_modules/react-dates/lib/css/_datepicker.css ./third_party/react-dates/
-yarn remove js-beautify
+npm uninstall -g browserify babelify derequire envify prop-types react-addons-shallow-compare react-externs react-with-direction uglifyify
diff --git a/third_party/react-dates/scope-require.js b/third_party/react-dates/scope-require.js
index d814217d3dfc1..3b0fb00a8c858 100644
--- a/third_party/react-dates/scope-require.js
+++ b/third_party/react-dates/scope-require.js
@@ -20,7 +20,7 @@ const detectGlobals = require('acorn-globals');
 const escodegen = require('escodegen');
 const rocambole = require('rocambole');
 
-const colors = require('ansi-colors');
+const colors = require('kleur/colors');
 const es = require('event-stream');
 const fs = require('fs');
 const program = require('commander');
diff --git a/third_party/react-externs/externs.js b/third_party/react-externs/externs.js
index db161687c3cba..736f09b588fb5 100644
--- a/third_party/react-externs/externs.js
+++ b/third_party/react-externs/externs.js
@@ -507,7 +507,6 @@ React.ReactAtrribute.onScroll;
 React.ReactAtrribute.onWheel;
 
 /**
- * @type {Object}
  * @const
  */
 React.DOM = {};
@@ -1546,7 +1545,7 @@ React.ChainableTypeChecker.isRequired;
 React.ChainableTypeChecker.isRequired.weak;
 
 /**
- * @type {Object}
+ * @const
  */
 React.PropTypes = {
   /** @type {React.ChainableTypeChecker} */
@@ -1603,9 +1602,9 @@ React.PropTypes = {
 };
 
 /**
- * @type {Object}
+ * @const
  */
-React.Children;
+React.Children = {};
 
 /**
  * @param {Object} children Children tree container.
@@ -1635,7 +1634,7 @@ React.Children.count;
 React.Children.only;
 
 /**
- * @type {Object}
+ * @const
  */
 React.addons;
 
@@ -1652,7 +1651,7 @@ React.addons.classSet;
 React.addons.CSSTransitionGroup;
 
 /**
- * @type {Object}
+ * @const
  */
 React.addons.Perf;
 
diff --git a/third_party/resize-observer-polyfill/LICENSE b/third_party/resize-observer-polyfill/LICENSE
new file mode 100644
index 0000000000000..43ced45a3c5d6
--- /dev/null
+++ b/third_party/resize-observer-polyfill/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Denis Rul
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/third_party/resize-observer-polyfill/README.amp b/third_party/resize-observer-polyfill/README.amp
new file mode 100644
index 0000000000000..129a82b60b8c4
--- /dev/null
+++ b/third_party/resize-observer-polyfill/README.amp
@@ -0,0 +1,17 @@
+URL: https://github.com/que-etc/resize-observer-polyfill
+Fork URL: https://github.com/dvoytenko/resize-observer-polyfill
+License: MIT License
+License File: https://github.com/que-etc/resize-observer-polyfill/blob/master/LICENSE
+
+Description:
+A polyfill for the ResizeObserver API.
+
+The original [polyfill](https://github.com/que-etc/resize-observer-polyfill) has
+been [forked](https://github.com/dvoytenko/resize-observer-polyfill) to enable
+this polyfill to work across the boundary of Shadow DOM and same-origin
+iframes. See https://github.com/que-etc/resize-observer-polyfill/pull/79 for
+more details. As soon as this pull request has been merged, the AMP project
+will switch to [npm dependency](https://www.npmjs.com/package/resize-observer-polyfill).
+
+Local modifications:
+- The installer is wrapped into `installResizeObserver` function. See `ResizeObserver.install.js`.
diff --git a/third_party/resize-observer-polyfill/ResizeObserver.install.js b/third_party/resize-observer-polyfill/ResizeObserver.install.js
new file mode 100644
index 0000000000000..55d560ff80436
--- /dev/null
+++ b/third_party/resize-observer-polyfill/ResizeObserver.install.js
@@ -0,0 +1,1178 @@
+export function installResizeObserver(global) {
+(function (global, factory) {
+    (global.ResizeObserver = factory());
+}(global, (function () { 'use strict';
+
+    /**
+     * A collection of shims that provide minimal functionality of the ES6 collections.
+     *
+     * These implementations are not meant to be used outside of the ResizeObserver
+     * modules as they cover only a limited range of use cases.
+     */
+    /* eslint-disable require-jsdoc, valid-jsdoc */
+    var MapShim = (function () {
+        if (typeof Map !== 'undefined') {
+            return Map;
+        }
+        /**
+         * Returns index in provided array that matches the specified key.
+         *
+         * @param {Array<Array>} arr
+         * @param {*} key
+         * @returns {number}
+         */
+        function getIndex(arr, key) {
+            var result = -1;
+            arr.some(function (entry, index) {
+                if (entry[0] === key) {
+                    result = index;
+                    return true;
+                }
+                return false;
+            });
+            return result;
+        }
+        return /** @class */ (function () {
+            function class_1() {
+                this.__entries__ = [];
+            }
+            Object.defineProperty(class_1.prototype, "size", {
+                /**
+                 * @returns {boolean}
+                 */
+                get: function () {
+                    return this.__entries__.length;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            /**
+             * @param {*} key
+             * @returns {*}
+             */
+            class_1.prototype.get = function (key) {
+                var index = getIndex(this.__entries__, key);
+                var entry = this.__entries__[index];
+                return entry && entry[1];
+            };
+            /**
+             * @param {*} key
+             * @param {*} value
+             * @returns {void}
+             */
+            class_1.prototype.set = function (key, value) {
+                var index = getIndex(this.__entries__, key);
+                if (~index) {
+                    this.__entries__[index][1] = value;
+                }
+                else {
+                    this.__entries__.push([key, value]);
+                }
+            };
+            /**
+             * @param {*} key
+             * @returns {void}
+             */
+            class_1.prototype.delete = function (key) {
+                var entries = this.__entries__;
+                var index = getIndex(entries, key);
+                if (~index) {
+                    entries.splice(index, 1);
+                }
+            };
+            /**
+             * @param {*} key
+             * @returns {void}
+             */
+            class_1.prototype.has = function (key) {
+                return !!~getIndex(this.__entries__, key);
+            };
+            /**
+             * @returns {void}
+             */
+            class_1.prototype.clear = function () {
+                this.__entries__.splice(0);
+            };
+            /**
+             * @param {Function} callback
+             * @param {*} [ctx=null]
+             * @returns {void}
+             */
+            class_1.prototype.forEach = function (callback, ctx) {
+                if (ctx === void 0) { ctx = null; }
+                for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
+                    var entry = _a[_i];
+                    callback.call(ctx, entry[1], entry[0]);
+                }
+            };
+            return class_1;
+        }());
+    })();
+
+    /**
+     * Defines non-writable/enumerable properties of the provided target object.
+     *
+     * @param {Object} target - Object for which to define properties.
+     * @param {Object} props - Properties to be defined.
+     * @returns {Object} Target object.
+     */
+    var defineConfigurable = (function (target, props) {
+        for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
+            var key = _a[_i];
+            Object.defineProperty(target, key, {
+                value: props[key],
+                enumerable: false,
+                writable: false,
+                configurable: true
+            });
+        }
+        return target;
+    });
+
+    // Returns global object of a current environment.
+    var global$1 = (function () {
+        if (typeof global !== 'undefined' && global.Math === Math) {
+            return global;
+        }
+        if (typeof self !== 'undefined' && self.Math === Math) {
+            return self;
+        }
+        if (typeof window !== 'undefined' && window.Math === Math) {
+            return window;
+        }
+        // eslint-disable-next-line no-new-func
+        return Function('return this')();
+    })();
+
+    /**
+     * Returns the global object associated with provided element.
+     *
+     * @param {Object} target
+     * @returns {Object}
+     */
+    var getWindowOf = (function (target) {
+        // Assume that the element is an instance of Node, which means that it
+        // has the "ownerDocument" property from which we can retrieve a
+        // corresponding global object.
+        var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
+        // Return the local global object if it's not possible extract one from
+        // provided element.
+        return ownerGlobal || global$1;
+    });
+
+    /**
+     * Detects whether window and document objects are available in current environment.
+     */
+    var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
+
+    // Placeholder of an empty content rectangle.
+    var emptyRect = createRectInit(0, 0, 0, 0);
+    /**
+     * Converts provided string to a number.
+     *
+     * @param {number|string} value
+     * @returns {number}
+     */
+    function toFloat(value) {
+        return parseFloat(value) || 0;
+    }
+    /**
+     * Extracts borders size from provided styles.
+     *
+     * @param {CSSStyleDeclaration} styles
+     * @param {...string} positions - Borders positions (top, right, ...)
+     * @returns {number}
+     */
+    function getBordersSize(styles) {
+        var positions = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            positions[_i - 1] = arguments[_i];
+        }
+        return positions.reduce(function (size, position) {
+            var value = styles['border-' + position + '-width'];
+            return size + toFloat(value);
+        }, 0);
+    }
+    /**
+     * Extracts paddings sizes from provided styles.
+     *
+     * @param {CSSStyleDeclaration} styles
+     * @returns {Object} Paddings box.
+     */
+    function getPaddings(styles) {
+        var positions = ['top', 'right', 'bottom', 'left'];
+        var paddings = {};
+        for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+            var position = positions_1[_i];
+            var value = styles['padding-' + position];
+            paddings[position] = toFloat(value);
+        }
+        return paddings;
+    }
+    /**
+     * Calculates content rectangle of provided SVG element.
+     *
+     * @param {SVGGraphicsElement} target - Element content rectangle of which needs
+     *      to be calculated.
+     * @returns {DOMRectInit}
+     */
+    function getSVGContentRect(target) {
+        var bbox = target.getBBox();
+        return createRectInit(0, 0, bbox.width, bbox.height);
+    }
+    /**
+     * Calculates content rectangle of provided HTMLElement.
+     *
+     * @param {HTMLElement} target - Element for which to calculate the content rectangle.
+     * @returns {DOMRectInit}
+     */
+    function getHTMLElementContentRect(target) {
+        // Client width & height properties can't be
+        // used exclusively as they provide rounded values.
+        var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
+        // By this condition we can catch all non-replaced inline, hidden and
+        // detached elements. Though elements with width & height properties less
+        // than 0.5 will be discarded as well.
+        //
+        // Without it we would need to implement separate methods for each of
+        // those cases and it's not possible to perform a precise and performance
+        // effective test for hidden elements. E.g. even jQuery's ':visible' filter
+        // gives wrong results for elements with width & height less than 0.5.
+        if (!clientWidth && !clientHeight) {
+            return emptyRect;
+        }
+        var styles = getWindowOf(target).getComputedStyle(target);
+        var paddings = getPaddings(styles);
+        var horizPad = paddings.left + paddings.right;
+        var vertPad = paddings.top + paddings.bottom;
+        // Computed styles of width & height are being used because they are the
+        // only dimensions available to JS that contain non-rounded values. It could
+        // be possible to utilize the getBoundingClientRect if only it's data wasn't
+        // affected by CSS transformations let alone paddings, borders and scroll bars.
+        var width = toFloat(styles.width), height = toFloat(styles.height);
+        // Width & height include paddings and borders when the 'border-box' box
+        // model is applied (except for IE).
+        if (styles.boxSizing === 'border-box') {
+            // Following conditions are required to handle Internet Explorer which
+            // doesn't include paddings and borders to computed CSS dimensions.
+            //
+            // We can say that if CSS dimensions + paddings are equal to the "client"
+            // properties then it's either IE, and thus we don't need to subtract
+            // anything, or an element merely doesn't have paddings/borders styles.
+            if (Math.round(width + horizPad) !== clientWidth) {
+                width -= getBordersSize(styles, 'left', 'right') + horizPad;
+            }
+            if (Math.round(height + vertPad) !== clientHeight) {
+                height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
+            }
+        }
+        // Following steps can't be applied to the document's root element as its
+        // client[Width/Height] properties represent viewport area of the window.
+        // Besides, it's as well not necessary as the <html> itself neither has
+        // rendered scroll bars nor it can be clipped.
+        if (!isDocumentElement(target)) {
+            // In some browsers (only in Firefox, actually) CSS width & height
+            // include scroll bars size which can be removed at this step as scroll
+            // bars are the only difference between rounded dimensions + paddings
+            // and "client" properties, though that is not always true in Chrome.
+            var vertScrollbar = Math.round(width + horizPad) - clientWidth;
+            var horizScrollbar = Math.round(height + vertPad) - clientHeight;
+            // Chrome has a rather weird rounding of "client" properties.
+            // E.g. for an element with content width of 314.2px it sometimes gives
+            // the client width of 315px and for the width of 314.7px it may give
+            // 314px. And it doesn't happen all the time. So just ignore this delta
+            // as a non-relevant.
+            if (Math.abs(vertScrollbar) !== 1) {
+                width -= vertScrollbar;
+            }
+            if (Math.abs(horizScrollbar) !== 1) {
+                height -= horizScrollbar;
+            }
+        }
+        return createRectInit(paddings.left, paddings.top, width, height);
+    }
+    /**
+     * Checks whether provided element is an instance of the SVGGraphicsElement.
+     *
+     * @param {Element} target - Element to be checked.
+     * @returns {boolean}
+     */
+    var isSVGGraphicsElement = (function () {
+        // Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
+        // interface.
+        if (typeof SVGGraphicsElement !== 'undefined') {
+            return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
+        }
+        // If it's so, then check that element is at least an instance of the
+        // SVGElement and that it has the "getBBox" method.
+        // eslint-disable-next-line no-extra-parens
+        return function (target) { return (target instanceof getWindowOf(target).SVGElement &&
+            typeof target.getBBox === 'function'); };
+    })();
+    /**
+     * Checks whether provided element is a document element (<html>).
+     *
+     * @param {Element} target - Element to be checked.
+     * @returns {boolean}
+     */
+    function isDocumentElement(target) {
+        return target === getWindowOf(target).document.documentElement;
+    }
+    /**
+     * Calculates an appropriate content rectangle for provided html or svg element.
+     *
+     * @param {Element} target - Element content rectangle of which needs to be calculated.
+     * @returns {DOMRectInit}
+     */
+    function getContentRect(target) {
+        if (!isBrowser) {
+            return emptyRect;
+        }
+        if (isSVGGraphicsElement(target)) {
+            return getSVGContentRect(target);
+        }
+        return getHTMLElementContentRect(target);
+    }
+    /**
+     * Creates rectangle with an interface of the DOMRectReadOnly.
+     * Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
+     *
+     * @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
+     * @returns {DOMRectReadOnly}
+     */
+    function createReadOnlyRect(_a) {
+        var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+        // If DOMRectReadOnly is available use it as a prototype for the rectangle.
+        var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
+        var rect = Object.create(Constr.prototype);
+        // Rectangle's properties are not writable and non-enumerable.
+        defineConfigurable(rect, {
+            x: x, y: y, width: width, height: height,
+            top: y,
+            right: x + width,
+            bottom: height + y,
+            left: x
+        });
+        return rect;
+    }
+    /**
+     * Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
+     * Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
+     *
+     * @param {number} x - X coordinate.
+     * @param {number} y - Y coordinate.
+     * @param {number} width - Rectangle's width.
+     * @param {number} height - Rectangle's height.
+     * @returns {DOMRectInit}
+     */
+    function createRectInit(x, y, width, height) {
+        return { x: x, y: y, width: width, height: height };
+    }
+
+    /**
+     * Class that is responsible for computations of the content rectangle of
+     * provided DOM element and for keeping track of it's changes.
+     */
+    var ResizeObservation = /** @class */ (function () {
+        /**
+         * Creates an instance of ResizeObservation.
+         *
+         * @param {Element} target - Element to be observed.
+         * @param {Node} rootNode - The root node of the element at the time
+         * of subscription.
+         */
+        function ResizeObservation(target, rootNode) {
+            /**
+             * Broadcasted width of content rectangle.
+             *
+             * @type {number}
+             */
+            this.broadcastWidth = 0;
+            /**
+             * Broadcasted height of content rectangle.
+             *
+             * @type {number}
+             */
+            this.broadcastHeight = 0;
+            /**
+             * Reference to the last observed content rectangle.
+             *
+             * @private {DOMRectInit}
+             */
+            this.contentRect_ = createRectInit(0, 0, 0, 0);
+            this.target = target;
+            this.rootNode = rootNode;
+        }
+        /**
+         * Updates content rectangle and tells whether it's width or height properties
+         * have changed since the last broadcast.
+         *
+         * @returns {boolean}
+         */
+        ResizeObservation.prototype.isActive = function () {
+            var rect = getContentRect(this.target);
+            this.contentRect_ = rect;
+            return (rect.width !== this.broadcastWidth ||
+                rect.height !== this.broadcastHeight);
+        };
+        /**
+         * Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
+         * from the corresponding properties of the last observed content rectangle.
+         *
+         * @returns {DOMRectInit} Last observed content rectangle.
+         */
+        ResizeObservation.prototype.broadcastRect = function () {
+            var rect = this.contentRect_;
+            this.broadcastWidth = rect.width;
+            this.broadcastHeight = rect.height;
+            return rect;
+        };
+        return ResizeObservation;
+    }());
+
+    var ResizeObserverEntry = /** @class */ (function () {
+        /**
+         * Creates an instance of ResizeObserverEntry.
+         *
+         * @param {Element} target - Element that is being observed.
+         * @param {DOMRectInit} rectInit - Data of the element's content rectangle.
+         */
+        function ResizeObserverEntry(target, rectInit) {
+            var contentRect = createReadOnlyRect(rectInit);
+            // According to the specification following properties are not writable
+            // and are also not enumerable in the native implementation.
+            //
+            // Property accessors are not being used as they'd require to define a
+            // private WeakMap storage which may cause memory leaks in browsers that
+            // don't support this type of collections.
+            defineConfigurable(this, { target: target, contentRect: contentRect });
+        }
+        return ResizeObserverEntry;
+    }());
+
+    /**
+     * A shim for the `Node.getRootNode()` API.
+     *
+     * See https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode for
+     * more info.
+     *
+     * @param {Node} node
+     * @returns {Node}
+     */
+    function getRootNode(node) {
+        if (typeof node.getRootNode === 'function') {
+            return node.getRootNode();
+        }
+        var n;
+        // eslint-disable-next-line no-empty
+        for (n = node; n.parentNode; n = n.parentNode) { }
+        return n;
+    }
+
+    // Check if IntersectionObserver is available.
+    var intersectionObserverSupported = typeof IntersectionObserver !== 'undefined';
+    var ResizeObserverSPI = /** @class */ (function () {
+        /**
+         * Creates a new instance of ResizeObserver.
+         *
+         * @param {ResizeObserverCallback} callback - Callback function that is invoked
+         *      when one of the observed elements changes it's content dimensions.
+         * @param {GlobalResizeObserverController} controller - Controller instance which
+         *      is responsible for the updates of observer.
+         * @param {ResizeObserver} callbackCtx - Reference to the public
+         *      ResizeObserver instance which will be passed to callback function.
+         */
+        function ResizeObserverSPI(callback, controller, callbackCtx) {
+            var _this = this;
+            /**
+             * Collection of resize observations that have detected changes in dimensions
+             * of elements.
+             *
+             * @private {Array<ResizeObservation>}
+             */
+            this.activeObservations_ = [];
+            /**
+             * Registry of the ResizeObservation instances.
+             *
+             * @private {Map<Element, ResizeObservation>}
+             */
+            this.observations_ = new MapShim();
+            /**
+             * The mapping between a root node and a set of targets tracked within
+             * this root node.
+             *
+             * @private {Map<Node, Array<Element>>}
+             */
+            this.rootNodes_ = new MapShim();
+            /**
+             * An instance of the intersection observer when available. There are a
+             * lot more browser versions that support the `IntersectionObserver`, but
+             * not the `ResizeObserver`. When `IntersectionObserver` is available it
+             * can be used to pick up DOM additions and removals more timely without
+             * significant costs.
+             *
+             * @private {IntersectionObserver}
+             */
+            this.intersectionObserver_ = null;
+            if (typeof callback !== 'function') {
+                throw new TypeError('The callback provided as parameter 1 is not a function.');
+            }
+            this.callback_ = callback;
+            this.controller_ = controller;
+            this.callbackCtx_ = callbackCtx;
+            if (intersectionObserverSupported) {
+                this.intersectionObserver_ = new IntersectionObserver(function () { return _this.checkRootChanges_(); });
+            }
+        }
+        /**
+         * Starts observing provided element.
+         *
+         * @param {Element} target - Element to be observed.
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.observe = function (target) {
+            if (!arguments.length) {
+                throw new TypeError('1 argument required, but only 0 present.');
+            }
+            // Do nothing if current environment doesn't have the Element interface.
+            if (typeof Element === 'undefined' || !(Element instanceof Object)) {
+                return;
+            }
+            if (!(target instanceof getWindowOf(target).Element)) {
+                throw new TypeError('parameter 1 is not of type "Element".');
+            }
+            var observations = this.observations_;
+            // Do nothing if element is already being observed.
+            if (observations.has(target)) {
+                return;
+            }
+            var rootNode = getControlledRootNode(target, target.ownerDocument);
+            observations.set(target, new ResizeObservation(target, rootNode));
+            var rootNodeTargets = this.rootNodes_.get(rootNode);
+            if (!rootNodeTargets) {
+                rootNodeTargets = [];
+                this.rootNodes_.set(rootNode, rootNodeTargets);
+                this.controller_.addObserver(rootNode, this);
+            }
+            rootNodeTargets.push(target);
+            if (this.intersectionObserver_) {
+                this.intersectionObserver_.observe(target);
+            }
+            // Force the update of observations.
+            this.controller_.refresh(rootNode);
+        };
+        /**
+         * Stops observing provided element.
+         *
+         * @param {Element} target - Element to stop observing.
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.unobserve = function (target) {
+            if (!arguments.length) {
+                throw new TypeError('1 argument required, but only 0 present.');
+            }
+            // Do nothing if current environment doesn't have the Element interface.
+            if (typeof Element === 'undefined' || !(Element instanceof Object)) {
+                return;
+            }
+            if (!(target instanceof getWindowOf(target).Element)) {
+                throw new TypeError('parameter 1 is not of type "Element".');
+            }
+            var observations = this.observations_;
+            var observation = observations.get(target);
+            // Do nothing if element is not being observed.
+            if (!observation) {
+                return;
+            }
+            observations.delete(target);
+            if (this.intersectionObserver_) {
+                this.intersectionObserver_.unobserve(target);
+            }
+            // Disconnect the root if no longer used.
+            var rootNode = observation.rootNode;
+            var rootNodeTargets = this.rootNodes_.get(rootNode);
+            if (rootNodeTargets) {
+                var index = rootNodeTargets.indexOf(target);
+                if (~index) {
+                    rootNodeTargets.splice(index, 1);
+                }
+                if (rootNodeTargets.length === 0) {
+                    this.rootNodes_.delete(rootNode);
+                    this.controller_.removeObserver(rootNode, this);
+                }
+            }
+        };
+        /**
+         * Stops observing all elements.
+         *
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.disconnect = function () {
+            var _this = this;
+            this.clearActive();
+            this.observations_.clear();
+            this.rootNodes_.forEach(function (_, rootNode) {
+                _this.controller_.removeObserver(rootNode, _this);
+            });
+            this.rootNodes_.clear();
+            if (this.intersectionObserver_) {
+                this.intersectionObserver_.disconnect();
+                this.intersectionObserver_ = null;
+            }
+        };
+        /**
+         * Collects observation instances the associated element of which has changed
+         * it's content rectangle.
+         *
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.gatherActive = function () {
+            var _this = this;
+            this.checkRootChanges_();
+            this.clearActive();
+            this.observations_.forEach(function (observation) {
+                if (observation.isActive()) {
+                    _this.activeObservations_.push(observation);
+                }
+            });
+        };
+        /**
+         * Invokes initial callback function with a list of ResizeObserverEntry
+         * instances collected from active resize observations.
+         *
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.broadcastActive = function () {
+            // Do nothing if observer doesn't have active observations.
+            if (!this.hasActive()) {
+                return;
+            }
+            var ctx = this.callbackCtx_;
+            // Create ResizeObserverEntry instance for every active observation.
+            var entries = this.activeObservations_.map(function (observation) {
+                return new ResizeObserverEntry(observation.target, observation.broadcastRect());
+            });
+            this.callback_.call(ctx, entries, ctx);
+            this.clearActive();
+        };
+        /**
+         * Clears the collection of active observations.
+         *
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.clearActive = function () {
+            this.activeObservations_.splice(0);
+        };
+        /**
+         * Tells whether observer has active observations.
+         *
+         * @returns {boolean}
+         */
+        ResizeObserverSPI.prototype.hasActive = function () {
+            return this.activeObservations_.length > 0;
+        };
+        /**
+         * Check if any of the targets have changed the root node. For instance,
+         * an element could be moved from the main DOM to a shadow root.
+         *
+         * @private
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.checkRootChanges_ = function () {
+            var _this = this;
+            var changedRootTargets = null;
+            this.observations_.forEach(function (observation) {
+                var target = observation.target, oldRootNode = observation.rootNode;
+                var rootNode = getControlledRootNode(target, oldRootNode);
+                if (rootNode !== oldRootNode) {
+                    if (!changedRootTargets) {
+                        changedRootTargets = [];
+                    }
+                    changedRootTargets.push(target);
+                }
+            });
+            if (changedRootTargets) {
+                changedRootTargets.forEach(function (target) {
+                    _this.unobserve(target);
+                    _this.observe(target);
+                });
+            }
+        };
+        return ResizeObserverSPI;
+    }());
+    /**
+     * Find the most appropriate root node that should be monitored for events
+     * related to this target.
+     *
+     * @param {Node} target
+     * @param {Node} def
+     * @returns {Node}
+     */
+    function getControlledRootNode(target, def) {
+        var rootNode = getRootNode(target);
+        // DOCUMENT_NODE = 9
+        // DOCUMENT_FRAGMENT_NODE = 11 (shadow root)
+        if (rootNode.nodeType === 9 ||
+            rootNode.nodeType === 11) {
+            return rootNode;
+        }
+        return def;
+    }
+
+    /**
+     * A shim for the requestAnimationFrame which falls back to the setTimeout if
+     * first one is not supported.
+     *
+     * @returns {number} Requests' identifier.
+     */
+    var requestAnimationFrame$1 = (function () {
+        if (typeof requestAnimationFrame === 'function') {
+            // It's required to use a bounded function because IE sometimes throws
+            // an "Invalid calling object" error if rAF is invoked without the global
+            // object on the left hand side.
+            return requestAnimationFrame.bind(global$1);
+        }
+        return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
+    })();
+
+    // Defines minimum timeout before adding a trailing call.
+    var trailingTimeout = 2;
+    /**
+     * Creates a wrapper function which ensures that provided callback will be
+     * invoked only once during the specified delay period.
+     *
+     * @param {Function} callback - Function to be invoked after the delay period.
+     * @param {number} delay - Delay after which to invoke callback.
+     * @returns {Function}
+     */
+    function throttle (callback, delay) {
+        var leadingCall = false, trailingCall = false, lastCallTime = 0;
+        /**
+         * Invokes the original callback function and schedules new invocation if
+         * the "proxy" was called during current request.
+         *
+         * @returns {void}
+         */
+        function resolvePending() {
+            if (leadingCall) {
+                leadingCall = false;
+                callback();
+            }
+            if (trailingCall) {
+                proxy();
+            }
+        }
+        /**
+         * Callback invoked after the specified delay. It will further postpone
+         * invocation of the original function delegating it to the
+         * requestAnimationFrame.
+         *
+         * @returns {void}
+         */
+        function timeoutCallback() {
+            requestAnimationFrame$1(resolvePending);
+        }
+        /**
+         * Schedules invocation of the original function.
+         *
+         * @returns {void}
+         */
+        function proxy() {
+            var timeStamp = Date.now();
+            if (leadingCall) {
+                // Reject immediately following calls.
+                if (timeStamp - lastCallTime < trailingTimeout) {
+                    return;
+                }
+                // Schedule new call to be in invoked when the pending one is resolved.
+                // This is important for "transitions" which never actually start
+                // immediately so there is a chance that we might miss one if change
+                // happens amids the pending invocation.
+                trailingCall = true;
+            }
+            else {
+                leadingCall = true;
+                trailingCall = false;
+                setTimeout(timeoutCallback, delay);
+            }
+            lastCallTime = timeStamp;
+        }
+        return proxy;
+    }
+
+    // Minimum delay before invoking the update of observers.
+    var REFRESH_DELAY = 20;
+    // A list of substrings of CSS properties used to find transition events that
+    // might affect dimensions of observed elements.
+    var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
+    // Check if MutationObserver is available.
+    var mutationObserverSupported = typeof MutationObserver !== 'undefined';
+    /**
+     * The controller that tracks the resize-related events for the specified
+     * root node. The `GlobalResizeObserverController` uses a per-root-node
+     * instance of this class to track mutations and other events within the
+     * specified root.
+     */
+    var ResizeObserverController = /** @class */ (function () {
+        /**
+         * Creates a new instance of ResizeObserverController.
+         *
+         * @private
+         * @param {Node} rootNode - The root node that this controller monitors.
+         * @param {GlobalResizeObserverController} globalController - The global
+         * controller for all roots.
+         */
+        function ResizeObserverController(rootNode, globalController) {
+            /**
+             * The root node that this controller monitors.
+             *
+             * @private {Node}
+             */
+            this.rootNode_ = null;
+            /**
+             * The global controller.
+             *
+             * @private {GlobalResizeObserverController}
+             */
+            this.globalController_ = null;
+            /**
+             * Indicates whether DOM listeners have been added.
+             *
+             * @private {boolean}
+             */
+            this.connected_ = false;
+            /**
+             * Tells that controller has subscribed for Mutation Events.
+             *
+             * @private {boolean}
+             */
+            this.mutationEventsAdded_ = false;
+            /**
+             * Keeps reference to the instance of MutationObserver.
+             *
+             * @private {MutationObserver}
+             */
+            this.mutationsObserver_ = null;
+            /**
+             * Monitors the shadow root host for size changes.
+             *
+             * @private {ResizeObserverSPI}
+             */
+            this.hostObserver_ = null;
+            /**
+             * A list of connected observers.
+             *
+             * @private {Array<ResizeObserverSPI>}
+             */
+            this.observers_ = [];
+            this.rootNode_ = rootNode;
+            this.globalController_ = globalController;
+            this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
+            this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
+        }
+        /**
+         * Adds observer to observers list.
+         *
+         * @param {ResizeObserverSPI} observer - Observer to be added.
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.addObserver = function (observer) {
+            if (!~this.observers_.indexOf(observer)) {
+                this.observers_.push(observer);
+            }
+            // Add listeners if they haven't been added yet.
+            if (!this.connected_) {
+                this.connect_();
+            }
+        };
+        /**
+         * Removes observer from observers list.
+         *
+         * @param {ResizeObserverSPI} observer - Observer to be removed.
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.removeObserver = function (observer) {
+            var observers = this.observers_;
+            var index = observers.indexOf(observer);
+            // Remove observer if it's present in registry.
+            if (~index) {
+                observers.splice(index, 1);
+            }
+            // Remove listeners if controller has no connected observers.
+            if (!observers.length && this.connected_) {
+                this.disconnect_();
+            }
+        };
+        /**
+         * Invokes the update of observers. It will continue running updates insofar
+         * it detects changes.
+         *
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.refresh = function () {
+            var changesDetected = this.updateObservers_();
+            // Continue running updates if changes have been detected as there might
+            // be future ones caused by CSS transitions.
+            if (changesDetected) {
+                this.refresh();
+            }
+        };
+        /**
+         * Updates every observer from observers list and notifies them of queued
+         * entries.
+         *
+         * @private
+         * @returns {boolean} Returns "true" if any observer has detected changes in
+         *      dimensions of it's elements.
+         */
+        ResizeObserverController.prototype.updateObservers_ = function () {
+            // Collect observers that have active observations.
+            var activeObservers = this.observers_.filter(function (observer) {
+                return observer.gatherActive(), observer.hasActive();
+            });
+            // Deliver notifications in a separate cycle in order to avoid any
+            // collisions between observers, e.g. when multiple instances of
+            // ResizeObserver are tracking the same element and the callback of one
+            // of them changes content dimensions of the observed target. Sometimes
+            // this may result in notifications being blocked for the rest of observers.
+            activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
+            return activeObservers.length > 0;
+        };
+        /**
+         * Initializes DOM listeners.
+         *
+         * @private
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.connect_ = function () {
+            // Do nothing if running in a non-browser environment or if listeners
+            // have been already added.
+            if (!isBrowser || this.connected_) {
+                return;
+            }
+            var rootNode = this.rootNode_;
+            var doc = rootNode.ownerDocument || rootNode;
+            var win = doc.defaultView;
+            // Subscription to the "Transitionend" event is used as a workaround for
+            // delayed transitions. This way it's possible to capture at least the
+            // final state of an element.
+            rootNode.addEventListener('transitionend', this.onTransitionEnd_, true);
+            if (win) {
+                win.addEventListener('resize', this.refresh, true);
+            }
+            if (mutationObserverSupported) {
+                this.mutationsObserver_ = new MutationObserver(this.refresh);
+                try {
+                    this.mutationsObserver_.observe(rootNode, {
+                        attributes: true,
+                        childList: true,
+                        characterData: true,
+                        subtree: true
+                    });
+                }
+                catch (e) {
+                    // A Shadow DOM polyfill might fail when oberving a "synthetic"
+                    // ShadowRoot object. Ignore the error. The additional data
+                    // will arrive from the host observer below.
+                }
+                if (rootNode.host) {
+                    this.mutationsObserver_.observe(rootNode.host, {
+                        attributes: true,
+                        childList: true,
+                        characterData: true,
+                        subtree: true
+                    });
+                }
+            }
+            else {
+                rootNode.addEventListener('DOMSubtreeModified', this.refresh, true);
+                this.mutationEventsAdded_ = true;
+            }
+            // It's a shadow root. Monitor the host.
+            if (rootNode.host) {
+                this.hostObserver_ = new ResizeObserverSPI(this.refresh, this.globalController_, this);
+                this.hostObserver_.observe(rootNode.host);
+            }
+            this.connected_ = true;
+        };
+        /**
+         * Removes DOM listeners.
+         *
+         * @private
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.disconnect_ = function () {
+            // Do nothing if running in a non-browser environment or if listeners
+            // have been already removed.
+            if (!isBrowser || !this.connected_) {
+                return;
+            }
+            var rootNode = this.rootNode_;
+            var doc = rootNode.ownerDocument || rootNode;
+            var win = doc.defaultView;
+            rootNode.removeEventListener('transitionend', this.onTransitionEnd_, true);
+            if (win) {
+                win.removeEventListener('resize', this.refresh, true);
+            }
+            if (this.mutationsObserver_) {
+                this.mutationsObserver_.disconnect();
+            }
+            if (this.mutationEventsAdded_) {
+                rootNode.removeEventListener('DOMSubtreeModified', this.refresh, true);
+            }
+            if (this.hostObserver_) {
+                this.hostObserver_.disconnect();
+            }
+            this.hostObserver_ = null;
+            this.mutationsObserver_ = null;
+            this.mutationEventsAdded_ = false;
+            this.connected_ = false;
+        };
+        /**
+         * "Transitionend" event handler.
+         *
+         * @private
+         * @param {TransitionEvent} event
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
+            var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
+            // Detect whether transition may affect dimensions of an element.
+            var isReflowProperty = transitionKeys.some(function (key) {
+                return !!~propertyName.indexOf(key);
+            });
+            if (isReflowProperty) {
+                this.refresh();
+            }
+        };
+        return ResizeObserverController;
+    }());
+
+    /**
+     * Singleton controller class which handles updates of ResizeObserver instances.
+     */
+    var GlobalResizeObserverController = /** @class */ (function () {
+        function GlobalResizeObserverController() {
+            /**
+             * A mapping from a DOM root node and a respective controller. A root node
+             * could be the main document, a same-origin iframe, or a shadow root.
+             * See https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode
+             * for more info.
+             *
+             * @private {Map<Node, ResizeObserverController>}
+             */
+            this.rootNodeControllers_ = typeof WeakMap !== 'undefined' ? new WeakMap() : new Map();
+        }
+        /**
+         * Adds observer to observers list.
+         *
+         * @param {Node} rootNode - The root node for which the observer is added.
+         * @param {ResizeObserverSPI} observer - Observer to be added.
+         * @returns {void}
+         */
+        GlobalResizeObserverController.prototype.addObserver = function (rootNode, observer) {
+            var rootNodeController = this.rootNodeControllers_.get(rootNode);
+            if (!rootNodeController) {
+                rootNodeController = new ResizeObserverController(rootNode, this);
+                this.rootNodeControllers_.set(rootNode, rootNodeController);
+            }
+            rootNodeController.addObserver(observer);
+        };
+        /**
+         * Removes observer from observers list.
+         *
+         * @param {Node} rootNode - The root node from which the observer is removed.
+         * @param {ResizeObserverSPI} observer - Observer to be removed.
+         * @returns {void}
+         */
+        GlobalResizeObserverController.prototype.removeObserver = function (rootNode, observer) {
+            var rootNodeController = this.rootNodeControllers_.get(rootNode);
+            if (rootNodeController) {
+                rootNodeController.removeObserver(observer);
+            }
+        };
+        /**
+         * Invokes the update of observers. It will continue running updates insofar
+         * it detects changes.
+         *
+         * @param {Node} rootNode - The root node to refresh.
+         * @returns {void}
+         */
+        GlobalResizeObserverController.prototype.refresh = function (rootNode) {
+            var rootNodeController = this.rootNodeControllers_.get(rootNode);
+            if (rootNodeController) {
+                rootNodeController.refresh();
+            }
+        };
+        /**
+         * Returns instance of the GlobalResizeObserverController.
+         *
+         * @returns {GlobalResizeObserverController}
+         */
+        GlobalResizeObserverController.getInstance = function () {
+            if (!this.instance_) {
+                this.instance_ = new GlobalResizeObserverController();
+            }
+            return this.instance_;
+        };
+        /**
+         * Holds reference to the controller's instance.
+         *
+         * @private {GlobalResizeObserverController}
+         */
+        GlobalResizeObserverController.instance_ = null;
+        return GlobalResizeObserverController;
+    }());
+
+    // Registry of internal observers. If WeakMap is not available use current shim
+    // for the Map collection as it has all required methods and because WeakMap
+    // can't be fully polyfilled anyway.
+    var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
+    /**
+     * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
+     * exposing only those methods and properties that are defined in the spec.
+     */
+    var ResizeObserver = /** @class */ (function () {
+        /**
+         * Creates a new instance of ResizeObserver.
+         *
+         * @param {ResizeObserverCallback} callback - Callback that is invoked when
+         *      dimensions of the observed elements change.
+         */
+        function ResizeObserver(callback) {
+            if (!(this instanceof ResizeObserver)) {
+                throw new TypeError('Cannot call a class as a function.');
+            }
+            if (!arguments.length) {
+                throw new TypeError('1 argument required, but only 0 present.');
+            }
+            var controller = GlobalResizeObserverController.getInstance();
+            var observer = new ResizeObserverSPI(callback, controller, this);
+            observers.set(this, observer);
+        }
+        return ResizeObserver;
+    }());
+    // Expose public methods of ResizeObserver.
+    [
+        'observe',
+        'unobserve',
+        'disconnect'
+    ].forEach(function (method) {
+        ResizeObserver.prototype[method] = function () {
+            var _a;
+            return (_a = observers.get(this))[method].apply(_a, arguments);
+        };
+    });
+
+    var index = (function () {
+        // Export existing implementation if available.
+        if (typeof global$1.ResizeObserver !== 'undefined') {
+            return global$1.ResizeObserver;
+        }
+        return ResizeObserver;
+    })();
+
+    return index;
+
+})));
+}
diff --git a/third_party/resize-observer-polyfill/ResizeObserver.js b/third_party/resize-observer-polyfill/ResizeObserver.js
new file mode 100644
index 0000000000000..60d165be8358e
--- /dev/null
+++ b/third_party/resize-observer-polyfill/ResizeObserver.js
@@ -0,0 +1,1178 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global.ResizeObserver = factory());
+}(this, (function () { 'use strict';
+
+    /**
+     * A collection of shims that provide minimal functionality of the ES6 collections.
+     *
+     * These implementations are not meant to be used outside of the ResizeObserver
+     * modules as they cover only a limited range of use cases.
+     */
+    /* eslint-disable require-jsdoc, valid-jsdoc */
+    var MapShim = (function () {
+        if (typeof Map !== 'undefined') {
+            return Map;
+        }
+        /**
+         * Returns index in provided array that matches the specified key.
+         *
+         * @param {Array<Array>} arr
+         * @param {*} key
+         * @returns {number}
+         */
+        function getIndex(arr, key) {
+            var result = -1;
+            arr.some(function (entry, index) {
+                if (entry[0] === key) {
+                    result = index;
+                    return true;
+                }
+                return false;
+            });
+            return result;
+        }
+        return /** @class */ (function () {
+            function class_1() {
+                this.__entries__ = [];
+            }
+            Object.defineProperty(class_1.prototype, "size", {
+                /**
+                 * @returns {boolean}
+                 */
+                get: function () {
+                    return this.__entries__.length;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            /**
+             * @param {*} key
+             * @returns {*}
+             */
+            class_1.prototype.get = function (key) {
+                var index = getIndex(this.__entries__, key);
+                var entry = this.__entries__[index];
+                return entry && entry[1];
+            };
+            /**
+             * @param {*} key
+             * @param {*} value
+             * @returns {void}
+             */
+            class_1.prototype.set = function (key, value) {
+                var index = getIndex(this.__entries__, key);
+                if (~index) {
+                    this.__entries__[index][1] = value;
+                }
+                else {
+                    this.__entries__.push([key, value]);
+                }
+            };
+            /**
+             * @param {*} key
+             * @returns {void}
+             */
+            class_1.prototype.delete = function (key) {
+                var entries = this.__entries__;
+                var index = getIndex(entries, key);
+                if (~index) {
+                    entries.splice(index, 1);
+                }
+            };
+            /**
+             * @param {*} key
+             * @returns {void}
+             */
+            class_1.prototype.has = function (key) {
+                return !!~getIndex(this.__entries__, key);
+            };
+            /**
+             * @returns {void}
+             */
+            class_1.prototype.clear = function () {
+                this.__entries__.splice(0);
+            };
+            /**
+             * @param {Function} callback
+             * @param {*} [ctx=null]
+             * @returns {void}
+             */
+            class_1.prototype.forEach = function (callback, ctx) {
+                if (ctx === void 0) { ctx = null; }
+                for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
+                    var entry = _a[_i];
+                    callback.call(ctx, entry[1], entry[0]);
+                }
+            };
+            return class_1;
+        }());
+    })();
+
+    /**
+     * Defines non-writable/enumerable properties of the provided target object.
+     *
+     * @param {Object} target - Object for which to define properties.
+     * @param {Object} props - Properties to be defined.
+     * @returns {Object} Target object.
+     */
+    var defineConfigurable = (function (target, props) {
+        for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
+            var key = _a[_i];
+            Object.defineProperty(target, key, {
+                value: props[key],
+                enumerable: false,
+                writable: false,
+                configurable: true
+            });
+        }
+        return target;
+    });
+
+    // Returns global object of a current environment.
+    var global$1 = (function () {
+        if (typeof global !== 'undefined' && global.Math === Math) {
+            return global;
+        }
+        if (typeof self !== 'undefined' && self.Math === Math) {
+            return self;
+        }
+        if (typeof window !== 'undefined' && window.Math === Math) {
+            return window;
+        }
+        // eslint-disable-next-line no-new-func
+        return Function('return this')();
+    })();
+
+    /**
+     * Returns the global object associated with provided element.
+     *
+     * @param {Object} target
+     * @returns {Object}
+     */
+    var getWindowOf = (function (target) {
+        // Assume that the element is an instance of Node, which means that it
+        // has the "ownerDocument" property from which we can retrieve a
+        // corresponding global object.
+        var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
+        // Return the local global object if it's not possible extract one from
+        // provided element.
+        return ownerGlobal || global$1;
+    });
+
+    /**
+     * Detects whether window and document objects are available in current environment.
+     */
+    var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
+
+    // Placeholder of an empty content rectangle.
+    var emptyRect = createRectInit(0, 0, 0, 0);
+    /**
+     * Converts provided string to a number.
+     *
+     * @param {number|string} value
+     * @returns {number}
+     */
+    function toFloat(value) {
+        return parseFloat(value) || 0;
+    }
+    /**
+     * Extracts borders size from provided styles.
+     *
+     * @param {CSSStyleDeclaration} styles
+     * @param {...string} positions - Borders positions (top, right, ...)
+     * @returns {number}
+     */
+    function getBordersSize(styles) {
+        var positions = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            positions[_i - 1] = arguments[_i];
+        }
+        return positions.reduce(function (size, position) {
+            var value = styles['border-' + position + '-width'];
+            return size + toFloat(value);
+        }, 0);
+    }
+    /**
+     * Extracts paddings sizes from provided styles.
+     *
+     * @param {CSSStyleDeclaration} styles
+     * @returns {Object} Paddings box.
+     */
+    function getPaddings(styles) {
+        var positions = ['top', 'right', 'bottom', 'left'];
+        var paddings = {};
+        for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+            var position = positions_1[_i];
+            var value = styles['padding-' + position];
+            paddings[position] = toFloat(value);
+        }
+        return paddings;
+    }
+    /**
+     * Calculates content rectangle of provided SVG element.
+     *
+     * @param {SVGGraphicsElement} target - Element content rectangle of which needs
+     *      to be calculated.
+     * @returns {DOMRectInit}
+     */
+    function getSVGContentRect(target) {
+        var bbox = target.getBBox();
+        return createRectInit(0, 0, bbox.width, bbox.height);
+    }
+    /**
+     * Calculates content rectangle of provided HTMLElement.
+     *
+     * @param {HTMLElement} target - Element for which to calculate the content rectangle.
+     * @returns {DOMRectInit}
+     */
+    function getHTMLElementContentRect(target) {
+        // Client width & height properties can't be
+        // used exclusively as they provide rounded values.
+        var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
+        // By this condition we can catch all non-replaced inline, hidden and
+        // detached elements. Though elements with width & height properties less
+        // than 0.5 will be discarded as well.
+        //
+        // Without it we would need to implement separate methods for each of
+        // those cases and it's not possible to perform a precise and performance
+        // effective test for hidden elements. E.g. even jQuery's ':visible' filter
+        // gives wrong results for elements with width & height less than 0.5.
+        if (!clientWidth && !clientHeight) {
+            return emptyRect;
+        }
+        var styles = getWindowOf(target).getComputedStyle(target);
+        var paddings = getPaddings(styles);
+        var horizPad = paddings.left + paddings.right;
+        var vertPad = paddings.top + paddings.bottom;
+        // Computed styles of width & height are being used because they are the
+        // only dimensions available to JS that contain non-rounded values. It could
+        // be possible to utilize the getBoundingClientRect if only it's data wasn't
+        // affected by CSS transformations let alone paddings, borders and scroll bars.
+        var width = toFloat(styles.width), height = toFloat(styles.height);
+        // Width & height include paddings and borders when the 'border-box' box
+        // model is applied (except for IE).
+        if (styles.boxSizing === 'border-box') {
+            // Following conditions are required to handle Internet Explorer which
+            // doesn't include paddings and borders to computed CSS dimensions.
+            //
+            // We can say that if CSS dimensions + paddings are equal to the "client"
+            // properties then it's either IE, and thus we don't need to subtract
+            // anything, or an element merely doesn't have paddings/borders styles.
+            if (Math.round(width + horizPad) !== clientWidth) {
+                width -= getBordersSize(styles, 'left', 'right') + horizPad;
+            }
+            if (Math.round(height + vertPad) !== clientHeight) {
+                height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
+            }
+        }
+        // Following steps can't be applied to the document's root element as its
+        // client[Width/Height] properties represent viewport area of the window.
+        // Besides, it's as well not necessary as the <html> itself neither has
+        // rendered scroll bars nor it can be clipped.
+        if (!isDocumentElement(target)) {
+            // In some browsers (only in Firefox, actually) CSS width & height
+            // include scroll bars size which can be removed at this step as scroll
+            // bars are the only difference between rounded dimensions + paddings
+            // and "client" properties, though that is not always true in Chrome.
+            var vertScrollbar = Math.round(width + horizPad) - clientWidth;
+            var horizScrollbar = Math.round(height + vertPad) - clientHeight;
+            // Chrome has a rather weird rounding of "client" properties.
+            // E.g. for an element with content width of 314.2px it sometimes gives
+            // the client width of 315px and for the width of 314.7px it may give
+            // 314px. And it doesn't happen all the time. So just ignore this delta
+            // as a non-relevant.
+            if (Math.abs(vertScrollbar) !== 1) {
+                width -= vertScrollbar;
+            }
+            if (Math.abs(horizScrollbar) !== 1) {
+                height -= horizScrollbar;
+            }
+        }
+        return createRectInit(paddings.left, paddings.top, width, height);
+    }
+    /**
+     * Checks whether provided element is an instance of the SVGGraphicsElement.
+     *
+     * @param {Element} target - Element to be checked.
+     * @returns {boolean}
+     */
+    var isSVGGraphicsElement = (function () {
+        // Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
+        // interface.
+        if (typeof SVGGraphicsElement !== 'undefined') {
+            return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
+        }
+        // If it's so, then check that element is at least an instance of the
+        // SVGElement and that it has the "getBBox" method.
+        // eslint-disable-next-line no-extra-parens
+        return function (target) { return (target instanceof getWindowOf(target).SVGElement &&
+            typeof target.getBBox === 'function'); };
+    })();
+    /**
+     * Checks whether provided element is a document element (<html>).
+     *
+     * @param {Element} target - Element to be checked.
+     * @returns {boolean}
+     */
+    function isDocumentElement(target) {
+        return target === getWindowOf(target).document.documentElement;
+    }
+    /**
+     * Calculates an appropriate content rectangle for provided html or svg element.
+     *
+     * @param {Element} target - Element content rectangle of which needs to be calculated.
+     * @returns {DOMRectInit}
+     */
+    function getContentRect(target) {
+        if (!isBrowser) {
+            return emptyRect;
+        }
+        if (isSVGGraphicsElement(target)) {
+            return getSVGContentRect(target);
+        }
+        return getHTMLElementContentRect(target);
+    }
+    /**
+     * Creates rectangle with an interface of the DOMRectReadOnly.
+     * Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
+     *
+     * @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
+     * @returns {DOMRectReadOnly}
+     */
+    function createReadOnlyRect(_a) {
+        var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+        // If DOMRectReadOnly is available use it as a prototype for the rectangle.
+        var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
+        var rect = Object.create(Constr.prototype);
+        // Rectangle's properties are not writable and non-enumerable.
+        defineConfigurable(rect, {
+            x: x, y: y, width: width, height: height,
+            top: y,
+            right: x + width,
+            bottom: height + y,
+            left: x
+        });
+        return rect;
+    }
+    /**
+     * Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
+     * Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
+     *
+     * @param {number} x - X coordinate.
+     * @param {number} y - Y coordinate.
+     * @param {number} width - Rectangle's width.
+     * @param {number} height - Rectangle's height.
+     * @returns {DOMRectInit}
+     */
+    function createRectInit(x, y, width, height) {
+        return { x: x, y: y, width: width, height: height };
+    }
+
+    /**
+     * Class that is responsible for computations of the content rectangle of
+     * provided DOM element and for keeping track of it's changes.
+     */
+    var ResizeObservation = /** @class */ (function () {
+        /**
+         * Creates an instance of ResizeObservation.
+         *
+         * @param {Element} target - Element to be observed.
+         * @param {Node} rootNode - The root node of the element at the time
+         * of subscription.
+         */
+        function ResizeObservation(target, rootNode) {
+            /**
+             * Broadcasted width of content rectangle.
+             *
+             * @type {number}
+             */
+            this.broadcastWidth = 0;
+            /**
+             * Broadcasted height of content rectangle.
+             *
+             * @type {number}
+             */
+            this.broadcastHeight = 0;
+            /**
+             * Reference to the last observed content rectangle.
+             *
+             * @private {DOMRectInit}
+             */
+            this.contentRect_ = createRectInit(0, 0, 0, 0);
+            this.target = target;
+            this.rootNode = rootNode;
+        }
+        /**
+         * Updates content rectangle and tells whether it's width or height properties
+         * have changed since the last broadcast.
+         *
+         * @returns {boolean}
+         */
+        ResizeObservation.prototype.isActive = function () {
+            var rect = getContentRect(this.target);
+            this.contentRect_ = rect;
+            return (rect.width !== this.broadcastWidth ||
+                rect.height !== this.broadcastHeight);
+        };
+        /**
+         * Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
+         * from the corresponding properties of the last observed content rectangle.
+         *
+         * @returns {DOMRectInit} Last observed content rectangle.
+         */
+        ResizeObservation.prototype.broadcastRect = function () {
+            var rect = this.contentRect_;
+            this.broadcastWidth = rect.width;
+            this.broadcastHeight = rect.height;
+            return rect;
+        };
+        return ResizeObservation;
+    }());
+
+    var ResizeObserverEntry = /** @class */ (function () {
+        /**
+         * Creates an instance of ResizeObserverEntry.
+         *
+         * @param {Element} target - Element that is being observed.
+         * @param {DOMRectInit} rectInit - Data of the element's content rectangle.
+         */
+        function ResizeObserverEntry(target, rectInit) {
+            var contentRect = createReadOnlyRect(rectInit);
+            // According to the specification following properties are not writable
+            // and are also not enumerable in the native implementation.
+            //
+            // Property accessors are not being used as they'd require to define a
+            // private WeakMap storage which may cause memory leaks in browsers that
+            // don't support this type of collections.
+            defineConfigurable(this, { target: target, contentRect: contentRect });
+        }
+        return ResizeObserverEntry;
+    }());
+
+    /**
+     * A shim for the `Node.getRootNode()` API.
+     *
+     * See https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode for
+     * more info.
+     *
+     * @param {Node} node
+     * @returns {Node}
+     */
+    function getRootNode(node) {
+        if (typeof node.getRootNode === 'function') {
+            return node.getRootNode();
+        }
+        var n;
+        // eslint-disable-next-line no-empty
+        for (n = node; n.parentNode; n = n.parentNode) { }
+        return n;
+    }
+
+    // Check if IntersectionObserver is available.
+    var intersectionObserverSupported = typeof IntersectionObserver !== 'undefined';
+    var ResizeObserverSPI = /** @class */ (function () {
+        /**
+         * Creates a new instance of ResizeObserver.
+         *
+         * @param {ResizeObserverCallback} callback - Callback function that is invoked
+         *      when one of the observed elements changes it's content dimensions.
+         * @param {GlobalResizeObserverController} controller - Controller instance which
+         *      is responsible for the updates of observer.
+         * @param {ResizeObserver} callbackCtx - Reference to the public
+         *      ResizeObserver instance which will be passed to callback function.
+         */
+        function ResizeObserverSPI(callback, controller, callbackCtx) {
+            var _this = this;
+            /**
+             * Collection of resize observations that have detected changes in dimensions
+             * of elements.
+             *
+             * @private {Array<ResizeObservation>}
+             */
+            this.activeObservations_ = [];
+            /**
+             * Registry of the ResizeObservation instances.
+             *
+             * @private {Map<Element, ResizeObservation>}
+             */
+            this.observations_ = new MapShim();
+            /**
+             * The mapping between a root node and a set of targets tracked within
+             * this root node.
+             *
+             * @private {Map<Node, Array<Element>>}
+             */
+            this.rootNodes_ = new MapShim();
+            /**
+             * An instance of the intersection observer when available. There are a
+             * lot more browser versions that support the `IntersectionObserver`, but
+             * not the `ResizeObserver`. When `IntersectionObserver` is available it
+             * can be used to pick up DOM additions and removals more timely without
+             * significant costs.
+             *
+             * @private {IntersectionObserver}
+             */
+            this.intersectionObserver_ = null;
+            if (typeof callback !== 'function') {
+                throw new TypeError('The callback provided as parameter 1 is not a function.');
+            }
+            this.callback_ = callback;
+            this.controller_ = controller;
+            this.callbackCtx_ = callbackCtx;
+            if (intersectionObserverSupported) {
+                this.intersectionObserver_ = new IntersectionObserver(function () { return _this.checkRootChanges_(); });
+            }
+        }
+        /**
+         * Starts observing provided element.
+         *
+         * @param {Element} target - Element to be observed.
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.observe = function (target) {
+            if (!arguments.length) {
+                throw new TypeError('1 argument required, but only 0 present.');
+            }
+            // Do nothing if current environment doesn't have the Element interface.
+            if (typeof Element === 'undefined' || !(Element instanceof Object)) {
+                return;
+            }
+            if (!(target instanceof getWindowOf(target).Element)) {
+                throw new TypeError('parameter 1 is not of type "Element".');
+            }
+            var observations = this.observations_;
+            // Do nothing if element is already being observed.
+            if (observations.has(target)) {
+                return;
+            }
+            var rootNode = getControlledRootNode(target, target.ownerDocument);
+            observations.set(target, new ResizeObservation(target, rootNode));
+            var rootNodeTargets = this.rootNodes_.get(rootNode);
+            if (!rootNodeTargets) {
+                rootNodeTargets = [];
+                this.rootNodes_.set(rootNode, rootNodeTargets);
+                this.controller_.addObserver(rootNode, this);
+            }
+            rootNodeTargets.push(target);
+            if (this.intersectionObserver_) {
+                this.intersectionObserver_.observe(target);
+            }
+            // Force the update of observations.
+            this.controller_.refresh(rootNode);
+        };
+        /**
+         * Stops observing provided element.
+         *
+         * @param {Element} target - Element to stop observing.
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.unobserve = function (target) {
+            if (!arguments.length) {
+                throw new TypeError('1 argument required, but only 0 present.');
+            }
+            // Do nothing if current environment doesn't have the Element interface.
+            if (typeof Element === 'undefined' || !(Element instanceof Object)) {
+                return;
+            }
+            if (!(target instanceof getWindowOf(target).Element)) {
+                throw new TypeError('parameter 1 is not of type "Element".');
+            }
+            var observations = this.observations_;
+            var observation = observations.get(target);
+            // Do nothing if element is not being observed.
+            if (!observation) {
+                return;
+            }
+            observations.delete(target);
+            if (this.intersectionObserver_) {
+                this.intersectionObserver_.unobserve(target);
+            }
+            // Disconnect the root if no longer used.
+            var rootNode = observation.rootNode;
+            var rootNodeTargets = this.rootNodes_.get(rootNode);
+            if (rootNodeTargets) {
+                var index = rootNodeTargets.indexOf(target);
+                if (~index) {
+                    rootNodeTargets.splice(index, 1);
+                }
+                if (rootNodeTargets.length === 0) {
+                    this.rootNodes_.delete(rootNode);
+                    this.controller_.removeObserver(rootNode, this);
+                }
+            }
+        };
+        /**
+         * Stops observing all elements.
+         *
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.disconnect = function () {
+            var _this = this;
+            this.clearActive();
+            this.observations_.clear();
+            this.rootNodes_.forEach(function (_, rootNode) {
+                _this.controller_.removeObserver(rootNode, _this);
+            });
+            this.rootNodes_.clear();
+            if (this.intersectionObserver_) {
+                this.intersectionObserver_.disconnect();
+                this.intersectionObserver_ = null;
+            }
+        };
+        /**
+         * Collects observation instances the associated element of which has changed
+         * it's content rectangle.
+         *
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.gatherActive = function () {
+            var _this = this;
+            this.checkRootChanges_();
+            this.clearActive();
+            this.observations_.forEach(function (observation) {
+                if (observation.isActive()) {
+                    _this.activeObservations_.push(observation);
+                }
+            });
+        };
+        /**
+         * Invokes initial callback function with a list of ResizeObserverEntry
+         * instances collected from active resize observations.
+         *
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.broadcastActive = function () {
+            // Do nothing if observer doesn't have active observations.
+            if (!this.hasActive()) {
+                return;
+            }
+            var ctx = this.callbackCtx_;
+            // Create ResizeObserverEntry instance for every active observation.
+            var entries = this.activeObservations_.map(function (observation) {
+                return new ResizeObserverEntry(observation.target, observation.broadcastRect());
+            });
+            this.callback_.call(ctx, entries, ctx);
+            this.clearActive();
+        };
+        /**
+         * Clears the collection of active observations.
+         *
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.clearActive = function () {
+            this.activeObservations_.splice(0);
+        };
+        /**
+         * Tells whether observer has active observations.
+         *
+         * @returns {boolean}
+         */
+        ResizeObserverSPI.prototype.hasActive = function () {
+            return this.activeObservations_.length > 0;
+        };
+        /**
+         * Check if any of the targets have changed the root node. For instance,
+         * an element could be moved from the main DOM to a shadow root.
+         *
+         * @private
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.checkRootChanges_ = function () {
+            var _this = this;
+            var changedRootTargets = null;
+            this.observations_.forEach(function (observation) {
+                var target = observation.target, oldRootNode = observation.rootNode;
+                var rootNode = getControlledRootNode(target, oldRootNode);
+                if (rootNode !== oldRootNode) {
+                    if (!changedRootTargets) {
+                        changedRootTargets = [];
+                    }
+                    changedRootTargets.push(target);
+                }
+            });
+            if (changedRootTargets) {
+                changedRootTargets.forEach(function (target) {
+                    _this.unobserve(target);
+                    _this.observe(target);
+                });
+            }
+        };
+        return ResizeObserverSPI;
+    }());
+    /**
+     * Find the most appropriate root node that should be monitored for events
+     * related to this target.
+     *
+     * @param {Node} target
+     * @param {Node} def
+     * @returns {Node}
+     */
+    function getControlledRootNode(target, def) {
+        var rootNode = getRootNode(target);
+        // DOCUMENT_NODE = 9
+        // DOCUMENT_FRAGMENT_NODE = 11 (shadow root)
+        if (rootNode.nodeType === 9 ||
+            rootNode.nodeType === 11) {
+            return rootNode;
+        }
+        return def;
+    }
+
+    /**
+     * A shim for the requestAnimationFrame which falls back to the setTimeout if
+     * first one is not supported.
+     *
+     * @returns {number} Requests' identifier.
+     */
+    var requestAnimationFrame$1 = (function () {
+        if (typeof requestAnimationFrame === 'function') {
+            // It's required to use a bounded function because IE sometimes throws
+            // an "Invalid calling object" error if rAF is invoked without the global
+            // object on the left hand side.
+            return requestAnimationFrame.bind(global$1);
+        }
+        return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
+    })();
+
+    // Defines minimum timeout before adding a trailing call.
+    var trailingTimeout = 2;
+    /**
+     * Creates a wrapper function which ensures that provided callback will be
+     * invoked only once during the specified delay period.
+     *
+     * @param {Function} callback - Function to be invoked after the delay period.
+     * @param {number} delay - Delay after which to invoke callback.
+     * @returns {Function}
+     */
+    function throttle (callback, delay) {
+        var leadingCall = false, trailingCall = false, lastCallTime = 0;
+        /**
+         * Invokes the original callback function and schedules new invocation if
+         * the "proxy" was called during current request.
+         *
+         * @returns {void}
+         */
+        function resolvePending() {
+            if (leadingCall) {
+                leadingCall = false;
+                callback();
+            }
+            if (trailingCall) {
+                proxy();
+            }
+        }
+        /**
+         * Callback invoked after the specified delay. It will further postpone
+         * invocation of the original function delegating it to the
+         * requestAnimationFrame.
+         *
+         * @returns {void}
+         */
+        function timeoutCallback() {
+            requestAnimationFrame$1(resolvePending);
+        }
+        /**
+         * Schedules invocation of the original function.
+         *
+         * @returns {void}
+         */
+        function proxy() {
+            var timeStamp = Date.now();
+            if (leadingCall) {
+                // Reject immediately following calls.
+                if (timeStamp - lastCallTime < trailingTimeout) {
+                    return;
+                }
+                // Schedule new call to be in invoked when the pending one is resolved.
+                // This is important for "transitions" which never actually start
+                // immediately so there is a chance that we might miss one if change
+                // happens amids the pending invocation.
+                trailingCall = true;
+            }
+            else {
+                leadingCall = true;
+                trailingCall = false;
+                setTimeout(timeoutCallback, delay);
+            }
+            lastCallTime = timeStamp;
+        }
+        return proxy;
+    }
+
+    // Minimum delay before invoking the update of observers.
+    var REFRESH_DELAY = 20;
+    // A list of substrings of CSS properties used to find transition events that
+    // might affect dimensions of observed elements.
+    var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
+    // Check if MutationObserver is available.
+    var mutationObserverSupported = typeof MutationObserver !== 'undefined';
+    /**
+     * The controller that tracks the resize-related events for the specified
+     * root node. The `GlobalResizeObserverController` uses a per-root-node
+     * instance of this class to track mutations and other events within the
+     * specified root.
+     */
+    var ResizeObserverController = /** @class */ (function () {
+        /**
+         * Creates a new instance of ResizeObserverController.
+         *
+         * @private
+         * @param {Node} rootNode - The root node that this controller monitors.
+         * @param {GlobalResizeObserverController} globalController - The global
+         * controller for all roots.
+         */
+        function ResizeObserverController(rootNode, globalController) {
+            /**
+             * The root node that this controller monitors.
+             *
+             * @private {Node}
+             */
+            this.rootNode_ = null;
+            /**
+             * The global controller.
+             *
+             * @private {GlobalResizeObserverController}
+             */
+            this.globalController_ = null;
+            /**
+             * Indicates whether DOM listeners have been added.
+             *
+             * @private {boolean}
+             */
+            this.connected_ = false;
+            /**
+             * Tells that controller has subscribed for Mutation Events.
+             *
+             * @private {boolean}
+             */
+            this.mutationEventsAdded_ = false;
+            /**
+             * Keeps reference to the instance of MutationObserver.
+             *
+             * @private {MutationObserver}
+             */
+            this.mutationsObserver_ = null;
+            /**
+             * Monitors the shadow root host for size changes.
+             *
+             * @private {ResizeObserverSPI}
+             */
+            this.hostObserver_ = null;
+            /**
+             * A list of connected observers.
+             *
+             * @private {Array<ResizeObserverSPI>}
+             */
+            this.observers_ = [];
+            this.rootNode_ = rootNode;
+            this.globalController_ = globalController;
+            this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
+            this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
+        }
+        /**
+         * Adds observer to observers list.
+         *
+         * @param {ResizeObserverSPI} observer - Observer to be added.
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.addObserver = function (observer) {
+            if (!~this.observers_.indexOf(observer)) {
+                this.observers_.push(observer);
+            }
+            // Add listeners if they haven't been added yet.
+            if (!this.connected_) {
+                this.connect_();
+            }
+        };
+        /**
+         * Removes observer from observers list.
+         *
+         * @param {ResizeObserverSPI} observer - Observer to be removed.
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.removeObserver = function (observer) {
+            var observers = this.observers_;
+            var index = observers.indexOf(observer);
+            // Remove observer if it's present in registry.
+            if (~index) {
+                observers.splice(index, 1);
+            }
+            // Remove listeners if controller has no connected observers.
+            if (!observers.length && this.connected_) {
+                this.disconnect_();
+            }
+        };
+        /**
+         * Invokes the update of observers. It will continue running updates insofar
+         * it detects changes.
+         *
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.refresh = function () {
+            var changesDetected = this.updateObservers_();
+            // Continue running updates if changes have been detected as there might
+            // be future ones caused by CSS transitions.
+            if (changesDetected) {
+                this.refresh();
+            }
+        };
+        /**
+         * Updates every observer from observers list and notifies them of queued
+         * entries.
+         *
+         * @private
+         * @returns {boolean} Returns "true" if any observer has detected changes in
+         *      dimensions of it's elements.
+         */
+        ResizeObserverController.prototype.updateObservers_ = function () {
+            // Collect observers that have active observations.
+            var activeObservers = this.observers_.filter(function (observer) {
+                return observer.gatherActive(), observer.hasActive();
+            });
+            // Deliver notifications in a separate cycle in order to avoid any
+            // collisions between observers, e.g. when multiple instances of
+            // ResizeObserver are tracking the same element and the callback of one
+            // of them changes content dimensions of the observed target. Sometimes
+            // this may result in notifications being blocked for the rest of observers.
+            activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
+            return activeObservers.length > 0;
+        };
+        /**
+         * Initializes DOM listeners.
+         *
+         * @private
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.connect_ = function () {
+            // Do nothing if running in a non-browser environment or if listeners
+            // have been already added.
+            if (!isBrowser || this.connected_) {
+                return;
+            }
+            var rootNode = this.rootNode_;
+            var doc = rootNode.ownerDocument || rootNode;
+            var win = doc.defaultView;
+            // Subscription to the "Transitionend" event is used as a workaround for
+            // delayed transitions. This way it's possible to capture at least the
+            // final state of an element.
+            rootNode.addEventListener('transitionend', this.onTransitionEnd_, true);
+            if (win) {
+                win.addEventListener('resize', this.refresh, true);
+            }
+            if (mutationObserverSupported) {
+                this.mutationsObserver_ = new MutationObserver(this.refresh);
+                try {
+                    this.mutationsObserver_.observe(rootNode, {
+                        attributes: true,
+                        childList: true,
+                        characterData: true,
+                        subtree: true
+                    });
+                }
+                catch (e) {
+                    // A Shadow DOM polyfill might fail when oberving a "synthetic"
+                    // ShadowRoot object. Ignore the error. The additional data
+                    // will arrive from the host observer below.
+                }
+                if (rootNode.host) {
+                    this.mutationsObserver_.observe(rootNode.host, {
+                        attributes: true,
+                        childList: true,
+                        characterData: true,
+                        subtree: true
+                    });
+                }
+            }
+            else {
+                rootNode.addEventListener('DOMSubtreeModified', this.refresh, true);
+                this.mutationEventsAdded_ = true;
+            }
+            // It's a shadow root. Monitor the host.
+            if (rootNode.host) {
+                this.hostObserver_ = new ResizeObserverSPI(this.refresh, this.globalController_, this);
+                this.hostObserver_.observe(rootNode.host);
+            }
+            this.connected_ = true;
+        };
+        /**
+         * Removes DOM listeners.
+         *
+         * @private
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.disconnect_ = function () {
+            // Do nothing if running in a non-browser environment or if listeners
+            // have been already removed.
+            if (!isBrowser || !this.connected_) {
+                return;
+            }
+            var rootNode = this.rootNode_;
+            var doc = rootNode.ownerDocument || rootNode;
+            var win = doc.defaultView;
+            rootNode.removeEventListener('transitionend', this.onTransitionEnd_, true);
+            if (win) {
+                win.removeEventListener('resize', this.refresh, true);
+            }
+            if (this.mutationsObserver_) {
+                this.mutationsObserver_.disconnect();
+            }
+            if (this.mutationEventsAdded_) {
+                rootNode.removeEventListener('DOMSubtreeModified', this.refresh, true);
+            }
+            if (this.hostObserver_) {
+                this.hostObserver_.disconnect();
+            }
+            this.hostObserver_ = null;
+            this.mutationsObserver_ = null;
+            this.mutationEventsAdded_ = false;
+            this.connected_ = false;
+        };
+        /**
+         * "Transitionend" event handler.
+         *
+         * @private
+         * @param {TransitionEvent} event
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
+            var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
+            // Detect whether transition may affect dimensions of an element.
+            var isReflowProperty = transitionKeys.some(function (key) {
+                return !!~propertyName.indexOf(key);
+            });
+            if (isReflowProperty) {
+                this.refresh();
+            }
+        };
+        return ResizeObserverController;
+    }());
+
+    /**
+     * Singleton controller class which handles updates of ResizeObserver instances.
+     */
+    var GlobalResizeObserverController = /** @class */ (function () {
+        function GlobalResizeObserverController() {
+            /**
+             * A mapping from a DOM root node and a respective controller. A root node
+             * could be the main document, a same-origin iframe, or a shadow root.
+             * See https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode
+             * for more info.
+             *
+             * @private {Map<Node, ResizeObserverController>}
+             */
+            this.rootNodeControllers_ = typeof WeakMap !== 'undefined' ? new WeakMap() : new Map();
+        }
+        /**
+         * Adds observer to observers list.
+         *
+         * @param {Node} rootNode - The root node for which the observer is added.
+         * @param {ResizeObserverSPI} observer - Observer to be added.
+         * @returns {void}
+         */
+        GlobalResizeObserverController.prototype.addObserver = function (rootNode, observer) {
+            var rootNodeController = this.rootNodeControllers_.get(rootNode);
+            if (!rootNodeController) {
+                rootNodeController = new ResizeObserverController(rootNode, this);
+                this.rootNodeControllers_.set(rootNode, rootNodeController);
+            }
+            rootNodeController.addObserver(observer);
+        };
+        /**
+         * Removes observer from observers list.
+         *
+         * @param {Node} rootNode - The root node from which the observer is removed.
+         * @param {ResizeObserverSPI} observer - Observer to be removed.
+         * @returns {void}
+         */
+        GlobalResizeObserverController.prototype.removeObserver = function (rootNode, observer) {
+            var rootNodeController = this.rootNodeControllers_.get(rootNode);
+            if (rootNodeController) {
+                rootNodeController.removeObserver(observer);
+            }
+        };
+        /**
+         * Invokes the update of observers. It will continue running updates insofar
+         * it detects changes.
+         *
+         * @param {Node} rootNode - The root node to refresh.
+         * @returns {void}
+         */
+        GlobalResizeObserverController.prototype.refresh = function (rootNode) {
+            var rootNodeController = this.rootNodeControllers_.get(rootNode);
+            if (rootNodeController) {
+                rootNodeController.refresh();
+            }
+        };
+        /**
+         * Returns instance of the GlobalResizeObserverController.
+         *
+         * @returns {GlobalResizeObserverController}
+         */
+        GlobalResizeObserverController.getInstance = function () {
+            if (!this.instance_) {
+                this.instance_ = new GlobalResizeObserverController();
+            }
+            return this.instance_;
+        };
+        /**
+         * Holds reference to the controller's instance.
+         *
+         * @private {GlobalResizeObserverController}
+         */
+        GlobalResizeObserverController.instance_ = null;
+        return GlobalResizeObserverController;
+    }());
+
+    // Registry of internal observers. If WeakMap is not available use current shim
+    // for the Map collection as it has all required methods and because WeakMap
+    // can't be fully polyfilled anyway.
+    var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
+    /**
+     * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
+     * exposing only those methods and properties that are defined in the spec.
+     */
+    var ResizeObserver = /** @class */ (function () {
+        /**
+         * Creates a new instance of ResizeObserver.
+         *
+         * @param {ResizeObserverCallback} callback - Callback that is invoked when
+         *      dimensions of the observed elements change.
+         */
+        function ResizeObserver(callback) {
+            if (!(this instanceof ResizeObserver)) {
+                throw new TypeError('Cannot call a class as a function.');
+            }
+            if (!arguments.length) {
+                throw new TypeError('1 argument required, but only 0 present.');
+            }
+            var controller = GlobalResizeObserverController.getInstance();
+            var observer = new ResizeObserverSPI(callback, controller, this);
+            observers.set(this, observer);
+        }
+        return ResizeObserver;
+    }());
+    // Expose public methods of ResizeObserver.
+    [
+        'observe',
+        'unobserve',
+        'disconnect'
+    ].forEach(function (method) {
+        ResizeObserver.prototype[method] = function () {
+            var _a;
+            return (_a = observers.get(this))[method].apply(_a, arguments);
+        };
+    });
+
+    var index = (function () {
+        // Export existing implementation if available.
+        if (typeof global$1.ResizeObserver !== 'undefined') {
+            return global$1.ResizeObserver;
+        }
+        return ResizeObserver;
+    })();
+
+    return index;
+
+})));
diff --git a/third_party/subscriptions-project/OWNERS b/third_party/subscriptions-project/OWNERS
index 619b939864714..fb8442ea38036 100644
--- a/third_party/subscriptions-project/OWNERS
+++ b/third_party/subscriptions-project/OWNERS
@@ -1,5 +1,5 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
diff --git a/third_party/subscriptions-project/aes_gcm.js b/third_party/subscriptions-project/aes_gcm.js
index 9f08c3e04b329..0e51b3d8dd8ec 100644
--- a/third_party/subscriptions-project/aes_gcm.js
+++ b/third_party/subscriptions-project/aes_gcm.js
@@ -16,44 +16,68 @@
 
 /**
  * Subtle-based AES-GCM decryption supported on all browser types.
- * Decrypts the input text using AES-GCM with the input key.
+ * Decrypts the input text using AES-GCM with the input base64 encoded key
+ * and importing the key using subtle.importKey.
  * @param {string} key
  * @param {string} text
  * @return {!Promise}
  */
 export function decryptAesGcm(key, text) {
   const keybytes = base64Decode(key);
+  return safeAesGcmImportKey(keybytes.buffer).then((formattedkey) => {
+    text = text.replace(/\s+/g, '');
+    const contentBuffer = base64Decode(text).buffer;
+    const iv = contentBuffer.slice(0, 12);
+    const bytesToDecrypt = contentBuffer.slice(12);
+    return decryptAesGcmImpl(formattedkey, iv, bytesToDecrypt)
+  });
+  }
+    
+/**
+ * Subtle-based AES-GCM decryption supported on all browser types.
+ * Decrypts the input text using AES-GCM with the input key and IV.
+ * @param {!CryptoKey} key
+ * @param {!ArrayBuffer} iv
+ * @param {!ArrayBuffer} text
+ * @return {!Promise}
+ */
+export function decryptAesGcmImpl(key, iv, text) {
   const isIE = !!self.msCrypto;
   const subtle = isIE ? self.msCrypto.subtle : self.crypto.subtle;
-  return wrapCryptoOp(subtle.importKey('raw', keybytes.buffer,
-    'AES-GCM',
-    true, ['decrypt'])).
-    then((formattedkey) => {
-      text = text.replace(/\s+/g, '');
-      const contbuff = base64Decode(text).buffer;
-      const iv = contbuff.slice(0, 12);
-      const bytesToDecrypt = contbuff.slice(12);
-      return wrapCryptoOp(subtle
-        .decrypt(
-          {
-            name: 'AES-GCM',
-            iv: iv,
-            // IE requires "tag" of length 16.
-            tag: isIE ? bytesToDecrypt.slice(bytesToDecrypt.byteLength - 16) : undefined,
-            // Edge requires "tagLength".
-            tagLength: 128 // block size (16): 1-128
-          },
-          formattedkey,
-          // IE requires "tag" to be removed from the bytes.
-          isIE ? bytesToDecrypt.slice(0, bytesToDecrypt.byteLength - 16) : bytesToDecrypt
-        ))
-        .then((buffer) => {
-          // 5. Decryption gives us raw bytes and we need to turn them into text.
-          return utf8Decode(new Uint8Array(buffer));
-        });
+  return wrapCryptoOp(subtle
+    .decrypt(
+      {
+        name: 'AES-GCM',
+        iv: iv,
+        // IE requires "tag" of length 16.
+        tag: isIE ? text.slice(text.byteLength - 16) : undefined,
+        // Edge requires "tagLength".
+        tagLength: 128 // block size (16): 1-128
+      },
+      key,
+      // IE requires "tag" to be removed from the bytes.
+      isIE ? text.slice(0, text.byteLength - 16) : text
+    ))
+    .then((buffer) => {
+      // 5. Decryption gives us raw bytes and we need to turn them into text.
+      return utf8Decode(new Uint8Array(buffer));
     });
 }
 
+/**
+ * Subtle import key for AES-GCM key types that is supported
+ * on all browser types.
+ * @param {!ArrayBuffer} key
+ * @return {!Promise}
+ */
+export function safeAesGcmImportKey(key) {
+  const isIE = !!self.msCrypto;
+  const subtle = isIE ? self.msCrypto.subtle : self.crypto.subtle;
+  return wrapCryptoOp(subtle.importKey('raw', key,
+    'AES-GCM',
+    true, ['decrypt']));
+}
+
 /** 
  * Converts IE11 CryptoOperation type to a Promise.
  * @param {Object} op
@@ -94,7 +118,7 @@ function utf8Decode(bytes) {
  * @param {string} str
  * @return {!Uint8Array}
  */
-function base64Decode(str) {
+export function base64Decode(str) {
   const bytes = atob(str);
   const len = bytes.length;
   const array = new Uint8Array(len);
diff --git a/third_party/subscriptions-project/config.js b/third_party/subscriptions-project/config.js
index af62c7a794010..4becf26e9cd32 100644
--- a/third_party/subscriptions-project/config.js
+++ b/third_party/subscriptions-project/config.js
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/** Version: 0.1.22.107 */
+/** Version: 0.1.22.167 */
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
  *
@@ -88,7 +88,7 @@ function onDocumentState(doc, condition, callback) {
  * @return {!Promise<!Document>}
  */
 function whenDocumentReady(doc) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     onDocumentReady(doc, resolve);
   });
 }
@@ -174,9 +174,11 @@ class GlobalDoc {
   constructor(winOrDoc) {
     const isWin = !!winOrDoc.document;
     /** @private @const {!Window} */
-    this.win_ = /** @type {!Window} */ (isWin
-      ? /** @type {!Window} */ (winOrDoc)
-      : /** @type {!Document} */ (winOrDoc).defaultView);
+    this.win_ = /** @type {!Window} */ (
+      isWin
+        ? /** @type {!Window} */ (winOrDoc)
+        : /** @type {!Document} */ (winOrDoc).defaultView
+    );
     /** @private @const {!Document} */
     this.doc_ = isWin
       ? /** @type {!Window} */ (winOrDoc).document
@@ -401,7 +403,10 @@ class ErrorLogger {
   }
 }
 
-const userLogger = new ErrorLogger(window.__AMP_TOP ? AMP_USER_ERROR_SENTINEL : '');
+const userLogger = new ErrorLogger(
+  self.__AMP_TOP ? AMP_USER_ERROR_SENTINEL : ''
+);
+new ErrorLogger();
 
 const user = () => userLogger;
 
@@ -523,86 +528,6 @@ function log(var_args) {
   console.log.apply(console, arguments);
 }
 
-/**
- * @param  {...*} var_args [description]
- */
-function warn(var_args) {
-  console.warn.apply(console, arguments);
-}
-
-/**
- * Throws an error if the first argument isn't trueish.
- *
- * Supports argument substitution into the message via %s placeholders.
- *
- * Throws an error object that has two extra properties:
- * - associatedElement: This is the first element provided in the var args.
- *   It can be used for improved display of error messages.
- * - messageArray: The elements of the substituted message as non-stringified
- *   elements in an array. When e.g. passed to console.error this yields
- *   native displays of things like HTML elements.
- *
- * @param {T} shouldBeTrueish The value to assert. The assert fails if it does
- *     not evaluate to true.
- * @param {string=} message The assertion message
- * @param {...*} var_args Arguments substituted into %s in the message.
- * @return {T} The value of shouldBeTrueish.
- * @template T
- */
-function assert(shouldBeTrueish, message, var_args) {
-  let firstElement;
-  if (!shouldBeTrueish) {
-    message = message || 'Assertion failed';
-    const splitMessage = message.split('%s');
-    const first = splitMessage.shift();
-    let formatted = first;
-    const messageArray = [];
-    pushIfNonEmpty(messageArray, first);
-    for (let i = 2; i < arguments.length; i++) {
-      const val = arguments[i];
-      if (val && val.tagName) {
-        firstElement = val;
-      }
-      const nextConstant = splitMessage.shift();
-      messageArray.push(val);
-      pushIfNonEmpty(messageArray, nextConstant.trim());
-      formatted += toString(val) + nextConstant;
-    }
-    const e = new Error(formatted);
-    e.fromAssert = true;
-    e.associatedElement = firstElement;
-    e.messageArray = messageArray;
-    throw e;
-  }
-  return shouldBeTrueish;
-}
-
-/**
- * @param {!Array} array
- * @param {*} val
- */
-function pushIfNonEmpty(array, val) {
-  if (val != '') {
-    array.push(val);
-  }
-}
-
-function toString(val) {
-  // Do check equivalent to `val instanceof Element` without cross-window bug
-  if (val && val.nodeType == 1) {
-    return val.tagName.toLowerCase() + (val.id ? '#' + val.id : '');
-  }
-  return /** @type {string} */ (val);
-}
-
-var log_1 = {
-  assert,
-  debugLog,
-  warn,
-  log
-};
-var log_3 = log_1.debugLog;
-
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
  *
@@ -741,7 +666,7 @@ class PageConfigResolver {
     this.configResolver_ = null;
 
     /** @private @const {!Promise<!PageConfig>} */
-    this.configPromise_ = new Promise(resolve => {
+    this.configPromise_ = new Promise((resolve) => {
       this.configResolver_ = resolve;
     });
 
@@ -790,7 +715,7 @@ class PageConfigResolver {
       );
       this.configResolver_ = null;
     }
-    log_3(config);
+    debugLog(config);
     return config;
   }
 }
@@ -831,7 +756,7 @@ class TypeChecker {
    */
   checkArray(typeArray, expectedTypes) {
     let found = false;
-    typeArray.forEach(candidateType => {
+    typeArray.forEach((candidateType) => {
       found =
         found ||
         expectedTypes.includes(
@@ -883,9 +808,9 @@ class MetaParser {
       this.doc_.getRootNode(),
       'subscriptions-accessible-for-free'
     );
-    const locked =
-      (accessibleForFree && accessibleForFree.toLowerCase() == 'false') ||
-      false;
+    const locked = !!(
+      accessibleForFree && accessibleForFree.toLowerCase() === 'false'
+    );
 
     return new PageConfig(productId, locked);
   }
@@ -943,38 +868,50 @@ class JsonLdParser {
    * @return {?PageConfig}
    */
   tryExtractConfig_(element) {
-    const json = tryParseJson(element.textContent);
-    if (!json) {
+    let possibleConfigs = tryParseJson(element.textContent);
+    if (!possibleConfigs) {
       return null;
     }
 
-    // Must be an ALLOWED_TYPE
-    if (!this.checkType_.checkValue(json['@type'], ALLOWED_TYPES)) {
-      return null;
+    // Support arrays of JSON objects.
+    if (!Array.isArray(possibleConfigs)) {
+      possibleConfigs = [possibleConfigs];
     }
 
-    // Must have a isPartOf[@type=Product].
-    let productId = null;
-    const partOfArray = this.valueArray_(json, 'isPartOf');
-    if (partOfArray) {
-      for (let i = 0; i < partOfArray.length; i++) {
-        productId = this.discoverProductId_(partOfArray[i]);
-        if (productId) {
-          break;
+    const configs = /** @type {!Array<!JsonObject>} */ (possibleConfigs);
+    for (let i = 0; i < configs.length; i++) {
+      const config = configs[i];
+
+      // Must be an ALLOWED_TYPE
+      if (!this.checkType_.checkValue(config['@type'], ALLOWED_TYPES)) {
+        continue;
+      }
+
+      // Must have a isPartOf[@type=Product].
+      let productId = null;
+      const partOfArray = this.valueArray_(config, 'isPartOf');
+      if (partOfArray) {
+        for (let j = 0; j < partOfArray.length; j++) {
+          productId = this.discoverProductId_(partOfArray[j]);
+          if (productId) {
+            break;
+          }
         }
       }
-    }
-    if (!productId) {
-      return null;
-    }
+      if (!productId) {
+        continue;
+      }
 
-    // Found product id, just check for the access flag.
-    const isAccessibleForFree = this.bool_(
-      this.singleValue_(json, 'isAccessibleForFree'),
-      /* default */ true
-    );
+      // Found product id, just check for the access flag.
+      const isAccessibleForFree = this.bool_(
+        this.singleValue_(config, 'isAccessibleForFree'),
+        /* default */ true
+      );
 
-    return new PageConfig(productId, !isAccessibleForFree);
+      return new PageConfig(productId, !isAccessibleForFree);
+    }
+
+    return null;
   }
 
   /**
@@ -1167,7 +1104,7 @@ class MicrodataParser {
     // Grab all the nodes with an itemtype and filter for our allowed types
     const nodeList = Array.prototype.slice
       .call(this.doc_.getRootNode().querySelectorAll('[itemscope][itemtype]'))
-      .filter(node =>
+      .filter((node) =>
         this.checkType_.checkString(
           node.getAttribute('itemtype'),
           ALLOWED_TYPES
diff --git a/third_party/subscriptions-project/swg-button.css b/third_party/subscriptions-project/swg-button.css
index c9e969bd12b36..e42b97bed104f 100644
--- a/third_party/subscriptions-project/swg-button.css
+++ b/third_party/subscriptions-project/swg-button.css
@@ -276,3 +276,87 @@
 .swg-button-dark:lang(zh-tw):after {
   background-image: url("https://news.google.com/swg/js/v1/i18n/b-zh-tw-dk.svg");
 }
+
+.swg-button-v2-light,
+.swg-button-v2-dark {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  width: 237px;
+  min-width: 237px;
+  height: 44px;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: 'Google Sans', 'Roboto-Regular', sans-serif, arial;
+  font-weight: 500;
+  font-size: 14px;
+  letter-spacing: .001em;
+  cursor: pointer;
+}
+
+.swg-button-v2-light {
+  color: #1A73E8;
+  background-color: #fff;
+  border: 1px solid #DADCE0;
+}
+
+.swg-button-v2-light:disabled {
+  opacity: 0.38;
+  pointer-events: none;
+}
+
+.swg-button-v2-light:hover {
+  box-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 1px 3px 1px rgba(60, 64, 67, 0.15);
+  background: linear-gradient(0deg, rgba(26, 115, 232, 0.04), rgba(26, 115, 232, 0.04)), #FFFFFF;
+  border: none;
+}
+
+.swg-button-v2-light:focus {
+  box-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 2px 6px 2px rgba(60, 64, 67, 0.15);
+  background: linear-gradient(0deg, rgba(26, 115, 232, 0.08), rgba(26, 115, 232, 0.08)), #FFFFFF;
+  border: none;
+}
+
+.swg-button-v2-light:active {
+  background-color: #fff;
+  box-shadow: 0px 6px 10px 4px rgba(60, 64, 67, 0.15), 0px 2px 3px rgba(60, 64, 67, 0.3);
+  border: none;
+}
+
+.swg-button-v2-dark {
+  color: #FFFFFF;
+  background-color: #3C4043;
+}
+
+.swg-button-v2-dark:disabled {
+  opacity: 0.38;
+  pointer-events: none;
+}
+
+.swg-button-v2-dark:hover, .swg-button-v2-dark:active {
+  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
+  background-color: #202124;
+}
+
+.swg-button-v2-dark:focus {
+  box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
+  background-color: #202124;
+}
+
+.swg-button-v2-icon-light,
+.swg-button-v2-icon-dark {
+  width: 18px;
+  height: 18px;
+  margin-left: 16px;
+  margin-right: 8px;
+}
+
+.swg-button-v2-icon-light {
+  content:url("https://fonts.gstatic.com/s/i/productlogos/googleg/v6/24px.svg");
+}
+
+.swg-button-v2-icon-dark {
+  content:url("https://fonts.gstatic.com/s/i/googlematerialicons/google/v13/white-24dp/1x/gm_google_white_24dp.png");
+}
diff --git a/third_party/subscriptions-project/swg-gaa.js b/third_party/subscriptions-project/swg-gaa.js
new file mode 100644
index 0000000000000..fe9441a2d44df
--- /dev/null
+++ b/third_party/subscriptions-project/swg-gaa.js
@@ -0,0 +1,1497 @@
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+/** Version: 0.1.22.167 */
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+
+// NOTE: Please don't edit this file directly!
+//   This document describes how to change i18n strings in swg-js: https://docs.google.com/document/d/1FMEKJ_TmjHhqON0krE4xhDbTEj0I0DnvzxMzB2cWUWA/edit?resourcekey=0-TQ7hPOzAD4hX8x9PfweGSg#heading=h.q9gi7t4h1tyj
+
+const I18N_STRINGS = {
+  'SHOWCASE_REGWALL_TITLE': {
+    'cs': 'Získejte s&nbsp;Googlem víc',
+    'de': 'Immer gut informiert mit Google',
+    'en': 'Get more with Google',
+    'es': 'Disfruta de más artículos con Google',
+    'es-ar': 'Disfruta más artículos con Google',
+    'fr': 'Plus de contenus avec Google',
+    'hi': 'Google की मदद से ज़्यादा मुफ़्त लेख पाएं',
+    'it': 'Con Google puoi avere di più',
+    'ja': 'Google からのプレゼント',
+    'kn': 'Google ನಿಂದ ಹೆಚ್ಚಿನ ಪ್ರಯೋಜನ ಪಡೆಯಿರಿ',
+    'ml': 'Google ഉപയോഗിച്ച് കൂടുതൽ പ്രയോജനങ്ങൾ നേടൂ',
+    'mr': 'Google वापरून बरेच काही मिळवा',
+    'nl': 'Krijg meer met Google',
+    'pt-br': 'Veja mais com o Google',
+    'ta': 'Google மூலம் மேலும் பல கட்டுரைகளைப் படியுங்கள்',
+    'te': 'Googleతో మరిన్ని ప్రయోజనాలను పొందండి',
+  },
+  'SHOWCASE_REGWALL_DESCRIPTION': {
+    'cs': '<strong></strong>Tento obsah je obvykle zpoplatněn, ale pokud se do publikace <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> zaregistrujete pomocí účtu Google, získáte od Googlu přístup zdarma.',
+    'de': '<strong></strong>Dieser Inhalt ist normalerweise kostenpflichtig. Google gewährt dir jedoch kostenlos Zugriff auf diesen Artikel und andere Inhalte, wenn du dich mit deinem Google-Konto bei <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> registrierst.',
+    'en': '<strong></strong>This content usually requires payment, but Google is giving you free access to this article and more when you register with <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> using your Google Account.',
+    'es': '<strong></strong>Normalmente, es necesario pagar para ver este contenido, pero Google te ofrece acceso gratuito a este y otros artículos si te registras en <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> con tu cuenta de Google.',
+    'es-ar':
+      '<strong></strong>Normalmente, es necesario pagar para ver este contenido, pero Google te ofrece acceso gratuito a este y otros artículos si te registras en <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> con tu Cuenta&nbsp;de&nbsp;Google.',
+    'fr': '<strong></strong>Ce contenu est généralement payant, mais vous pouvez lire cet article et d\'autres contenus gratuitement grâce à Google en vous inscrivant sur <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> avec votre compte Google.',
+    'hi': '<strong></strong>इस कॉन्टेंट को पढ़ने के लिए पैसे चुकाने पड़ते हैं, लेकिन आप Google की मदद से इस लेख और अन्य कॉन्टेंट को मुफ़्त में पढ़ सकते हैं. इसके लिए, आपको Google खाते का इस्तेमाल करके, <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> में रजिस्टर करना होगा.',
+    'it': '<strong></strong>Generalmente questi contenuti sono a pagamento, ma Google ti offre accesso gratuito a questo articolo e ad altri articoli se ti registri a <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> usando il tuo Account Google.',
+    'ja': '<strong></strong>通常、この記事をお読みいただくにはお支払いが必要ですが、お使いの Google アカウントで <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> に登録すると、この記事を無料でお読みいただけます。',
+    'kn': '<strong></strong>ಸಾಮಾನ್ಯವಾಗಿ ಈ ವಿಷಯಕ್ಕಾಗಿ ಹಣ ಪಾವತಿಸಬೇಕಾಗುತ್ತದೆ, ಆದರೆ ನೀವು <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> ಗೆ ನಿಮ್ಮ Google ಖಾತೆಯ ಮೂಲಕ ನೋಂದಾಯಿಸಿಕೊಂಡಾಗ Google ಈ ಲೇಖನ ಮತ್ತು ಇನ್ನಷ್ಟು ವಿಷಯಗಳಿಗೆ ನಿಮಗೆ ಉಚಿತವಾದ ಪ್ರವೇಶವನ್ನು ನೀಡುತ್ತದೆ.',
+    'ml': '<strong></strong>സാധാരണ ഈ ഉള്ളടക്കത്തിന് പണം നൽകേണ്ടതുണ്ട്, എന്നാൽ Google അക്കൗണ്ട് ഉപയോഗിച്ച് <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> എന്നതിൽ രജിസ്‌റ്റർ ചെയ്യുമ്പോൾ, ഈ ലേഖനത്തിലേക്കും മറ്റും Google നിങ്ങൾക്ക് സൗജന്യ ആക്‌സസ് നൽകുന്നു.',
+    'mr': '<strong></strong>या आशयासाठी सामान्यतः पेमेंट आवश्यक असते पण तुम्ही तुमचे Google खाते वापरून <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> मध्ये नोंदणी करता तेव्हा, Google तुम्हाला या लेखाचा आणि आणखी बऱ्याच आशयाचा विनामूल्य ॲक्सेस देते.',
+    'nl': '<strong></strong>Voor deze content moet je eigenlijk betalen. Maar Google geeft je kosteloos toegang tot dit artikel en andere content als je je registreert bij <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> via je Google-account.',
+    'pt-br':
+      '<strong></strong>Normalmente, é preciso pagar por este conteúdo. Porém, basta você se registrar na publicação <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> usando sua Conta do Google para ter acesso gratuito a esta matéria e muito mais.',
+    'ta': '<strong></strong>வழக்கமாக இந்த உள்ளடக்கத்தை வாசிக்க கட்டணம் செலுத்த வேண்டியிருக்கும். ஆனால் <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph> இல் உங்கள் Google கணக்கைப் பயன்படுத்திப் பதிவுசெய்யும்போது இந்தக் கட்டுரைக்கும் மேலும் பலவற்றுக்கும் Google இலவச அணுகலை வழங்குகிறது.',
+    'te': '<strong></strong>ఈ కంటెంట్‌కు మీరు సాధారణంగా పేమెంట్ చేయాల్సి ఉంటుంది, కానీ మీరు Google ఖాతాను ఉపయోగించి <ph name="PUBLICATION"><ex>AP News</ex>{publication}</ph>తో రిజిస్టర్ చేసుకున్నప్పుడు, ఈ వార్తా కథనానికి ఇంకా మరెన్నో వాటికి Google, ఉచిత యాక్సెస్‌ను ఇస్తుంది.',
+  },
+  'SHOWCASE_REGWALL_PUBLISHER_SIGN_IN_BUTTON': {
+    'cs': 'Už máte účet?',
+    'de': 'Du hast bereits ein Konto?',
+    'en': 'Already have an account?',
+    'es': '¿Ya tienes una cuenta?',
+    'es-ar': '¿Ya tienes una cuenta?',
+    'fr': 'Vous avez déjà un compte&nbsp;?',
+    'hi': 'क्या आपके पास पहले से कोई प्रकाशक खाता है?',
+    'it': 'Hai già un account?',
+    'ja': 'すでにアカウントをお持ちですか？',
+    'kn': 'ಈಗಾಗಲೇ ಖಾತೆಯೊಂದನ್ನು ಹೊಂದಿದ್ದೀರಾ?',
+    'ml': 'മുമ്പേ അക്കൗണ്ടുണ്ടോ?',
+    'mr': 'आधीपासून खाते आहे?',
+    'nl': 'Heb je al een account?',
+    'pt-br': 'Já tem uma conta?',
+    'ta': 'ஏற்கெனவே கணக்கு உள்ளதா?',
+    'te': 'ఇప్పటికే ఖాతా ఉందా?',
+  },
+  'SHOWCASE_REGWALL_GOOGLE_SIGN_IN_BUTTON': {
+    'cs': 'Přihlásit se přes Google',
+    'de': 'Über Google anmelden',
+    'en': 'Sign in with Google',
+    'es': 'Iniciar sesión con Google',
+    'es-ar': 'Acceder con Google',
+    'fr': 'Se connecter avec Google',
+    'hi': 'Google से साइन इन करें',
+    'it': 'Accedi con Google',
+    'ja': 'Google でログイン',
+    'kn': 'Google ಖಾತೆ ಬಳಸಿಕೊಂಡು ಸೈನ್ ಇನ್ ಮಾಡಿ',
+    'ml': 'Google ഉപയോഗിച്ച് സൈൻ ഇൻ ചെയ്യുക',
+    'mr': 'Google वापरून साइन इन करा',
+    'nl': 'Inloggen met Google',
+    'pt-br': 'Fazer login com o Google',
+    'ta': 'Google மூலம் உள்நுழைக',
+    'te': 'Googleతో సైన్ ఇన్ చేయండి',
+  },
+};
+
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+/** @enum {number} */
+const AnalyticsEvent = {
+  UNKNOWN: 0,
+  IMPRESSION_PAYWALL: 1,
+  IMPRESSION_AD: 2,
+  IMPRESSION_OFFERS: 3,
+  IMPRESSION_SUBSCRIBE_BUTTON: 4,
+  IMPRESSION_SMARTBOX: 5,
+  IMPRESSION_SWG_BUTTON: 6,
+  IMPRESSION_CLICK_TO_SHOW_OFFERS: 7,
+  IMPRESSION_CLICK_TO_SHOW_OFFERS_OR_ALREADY_SUBSCRIBED: 8,
+  IMPRESSION_SUBSCRIPTION_COMPLETE: 9,
+  IMPRESSION_ACCOUNT_CHANGED: 10,
+  IMPRESSION_PAGE_LOAD: 11,
+  IMPRESSION_LINK: 12,
+  IMPRESSION_SAVE_SUBSCR_TO_GOOGLE: 13,
+  IMPRESSION_GOOGLE_UPDATED: 14,
+  IMPRESSION_SHOW_OFFERS_SMARTBOX: 15,
+  IMPRESSION_SHOW_OFFERS_SWG_BUTTON: 16,
+  IMPRESSION_SELECT_OFFER_SMARTBOX: 17,
+  IMPRESSION_SELECT_OFFER_SWG_BUTTON: 18,
+  IMPRESSION_SHOW_CONTRIBUTIONS_SWG_BUTTON: 19,
+  IMPRESSION_SELECT_CONTRIBUTION_SWG_BUTTON: 20,
+  IMPRESSION_METER_TOAST: 21,
+  IMPRESSION_REGWALL: 22,
+  IMPRESSION_SHOWCASE_REGWALL: 23,
+  IMPRESSION_SWG_SUBSCRIPTION_MINI_PROMPT: 24,
+  IMPRESSION_SWG_CONTRIBUTION_MINI_PROMPT: 25,
+  IMPRESSION_CONTRIBUTION_OFFERS: 26,
+  ACTION_SUBSCRIBE: 1000,
+  ACTION_PAYMENT_COMPLETE: 1001,
+  ACTION_ACCOUNT_CREATED: 1002,
+  ACTION_ACCOUNT_ACKNOWLEDGED: 1003,
+  ACTION_SUBSCRIPTIONS_LANDING_PAGE: 1004,
+  ACTION_PAYMENT_FLOW_STARTED: 1005,
+  ACTION_OFFER_SELECTED: 1006,
+  ACTION_SWG_BUTTON_CLICK: 1007,
+  ACTION_VIEW_OFFERS: 1008,
+  ACTION_ALREADY_SUBSCRIBED: 1009,
+  ACTION_NEW_DEFERRED_ACCOUNT: 1010,
+  ACTION_LINK_CONTINUE: 1011,
+  ACTION_LINK_CANCEL: 1012,
+  ACTION_GOOGLE_UPDATED_CLOSE: 1013,
+  ACTION_USER_CANCELED_PAYFLOW: 1014,
+  ACTION_SAVE_SUBSCR_TO_GOOGLE_CONTINUE: 1015,
+  ACTION_SAVE_SUBSCR_TO_GOOGLE_CANCEL: 1016,
+  ACTION_SWG_BUTTON_SHOW_OFFERS_CLICK: 1017,
+  ACTION_SWG_BUTTON_SELECT_OFFER_CLICK: 1018,
+  ACTION_SWG_BUTTON_SHOW_CONTRIBUTIONS_CLICK: 1019,
+  ACTION_SWG_BUTTON_SELECT_CONTRIBUTION_CLICK: 1020,
+  ACTION_USER_CONSENT_DEFERRED_ACCOUNT: 1021,
+  ACTION_USER_DENY_DEFERRED_ACCOUNT: 1022,
+  ACTION_DEFERRED_ACCOUNT_REDIRECT: 1023,
+  ACTION_GET_ENTITLEMENTS: 1024,
+  ACTION_METER_TOAST_SUBSCRIBE_CLICK: 1025,
+  ACTION_METER_TOAST_EXPANDED: 1026,
+  ACTION_METER_TOAST_CLOSED_BY_ARTICLE_INTERACTION: 1027,
+  ACTION_METER_TOAST_CLOSED_BY_SWIPE_DOWN: 1028,
+  ACTION_METER_TOAST_CLOSED_BY_X_CLICKED: 1029,
+  ACTION_SWG_SUBSCRIPTION_MINI_PROMPT_CLICK: 1030,
+  ACTION_SWG_CONTRIBUTION_MINI_PROMPT_CLICK: 1031,
+  ACTION_SWG_SUBSCRIPTION_MINI_PROMPT_CLOSE: 1032,
+  ACTION_SWG_CONTRIBUTION_MINI_PROMPT_CLOSE: 1033,
+  ACTION_CONTRIBUTION_OFFER_SELECTED: 1034,
+  EVENT_PAYMENT_FAILED: 2000,
+  EVENT_CUSTOM: 3000,
+  EVENT_CONFIRM_TX_ID: 3001,
+  EVENT_CHANGED_TX_ID: 3002,
+  EVENT_GPAY_NO_TX_ID: 3003,
+  EVENT_GPAY_CANNOT_CONFIRM_TX_ID: 3004,
+  EVENT_GOOGLE_UPDATED: 3005,
+  EVENT_NEW_TX_ID: 3006,
+  EVENT_UNLOCKED_BY_SUBSCRIPTION: 3007,
+  EVENT_UNLOCKED_BY_METER: 3008,
+  EVENT_NO_ENTITLEMENTS: 3009,
+  EVENT_HAS_METERING_ENTITLEMENTS: 3010,
+  EVENT_OFFERED_METER: 3011,
+  EVENT_UNLOCKED_FREE_PAGE: 3012,
+  EVENT_SUBSCRIPTION_STATE: 4000,
+};
+/** @enum {number} */
+const EventOriginator = {
+  UNKNOWN_CLIENT: 0,
+  SWG_CLIENT: 1,
+  AMP_CLIENT: 2,
+  PROPENSITY_CLIENT: 3,
+  SWG_SERVER: 4,
+  PUBLISHER_CLIENT: 5,
+  SHOWCASE_CLIENT: 6,
+};
+
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+
+/**
+ * Returns a map-like object.
+ * If initial is provided, copies its own properties into the
+ * newly created object.
+ * @param {Object=} initial This should typically be an object literal.
+ * @return {!Object}
+ * @template T
+ */
+function map(initial) {
+  const obj = Object.create(null);
+  if (initial) {
+    Object.assign(obj, initial);
+  }
+  return obj;
+}
+
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+
+/**
+ * @fileoverview This module declares JSON types as defined in the
+ * {@link http://json.org/}.
+ */
+
+/**
+ * Simple wrapper around JSON.parse that casts the return value
+ * to JsonObject.
+ * Create a new wrapper if an array return value is desired.
+ * @param {*} json JSON string to parse
+ * @return {?JsonObject|undefined} May be extend to parse arrays.
+ */
+function parseJson(json) {
+  return /** @type {?JsonObject} */ (JSON.parse(/** @type {string} */ (json)));
+}
+
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+
+/**
+ * @param  {...*} var_args [description]
+ */
+function warn(var_args) {
+  console.warn.apply(console, arguments);
+}
+
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+/* eslint-enable no-unused-vars */
+
+/** @enum {string} */
+const ShowcaseEvent = {
+  // Events indicating content could potentially be unlocked
+  EVENT_SHOWCASE_METER_OFFERED: 'EVENT_SHOWCASE_METER_OFFERED', // This event is only required if the user can choose not to use a publisher meter
+
+  // Events indicating content was unlocked
+  EVENT_SHOWCASE_UNLOCKED_BY_SUBSCRIPTION:
+    'EVENT_SHOWCASE_UNLOCKED_BY_SUBSCRIPTION', // Publisher managed subscriptions only
+  EVENT_SHOWCASE_UNLOCKED_BY_METER: 'EVENT_SHOWCASE_UNLOCKED_BY_METER', // Publisher managed meters only
+  EVENT_SHOWCASE_UNLOCKED_FREE_PAGE: 'EVENT_SHOWCASE_UNLOCKED_FREE_PAGE', // When the article is free for any reason (lead article, etc)
+
+  // Events indicating the user must take action to view content
+  EVENT_SHOWCASE_NO_ENTITLEMENTS_REGWALL:
+    'EVENT_SHOWCASE_NO_ENTITLEMENTS_REGWALL', // When the user must register (or log in) to view the article
+
+  // Events indicating the user must subscribe to view content
+  EVENT_SHOWCASE_INELIGIBLE_PAYWALL: 'EVENT_SHOWCASE_INELIGIBLE_PAYWALL', // When the user is not eligible for showcase entitlements
+  EVENT_SHOWCASE_NO_ENTITLEMENTS_PAYWALL:
+    'EVENT_SHOWCASE_NO_ENTITLEMENTS_PAYWALL', // When the user has no remaining showcase entitlements
+};
+
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+
+/**
+ * Cached a-tag to avoid memory allocation during URL parsing.
+ * @type {HTMLAnchorElement}
+ */
+let a;
+
+/**
+ * We cached all parsed URLs. As of now there are no use cases
+ * of AMP docs that would ever parse an actual large number of URLs,
+ * but we often parse the same one over and over again.
+ * @type {Object<string, !LocationDef>}
+ */
+let cache;
+
+/**
+ * Returns a Location-like object for the given URL. If it is relative,
+ * the URL gets resolved.
+ * Consider the returned object immutable. This is enforced during
+ * testing by freezing the object.
+ * @param {string} url
+ * @return {!LocationDef}
+ */
+function parseUrl(url) {
+  if (!a) {
+    a = /** @type {!HTMLAnchorElement} */ (self.document.createElement('a'));
+    cache = self.UrlCache || (self.UrlCache = Object.create(null));
+  }
+
+  const fromCache = cache[url];
+  if (fromCache) {
+    return fromCache;
+  }
+
+  const info = parseUrlWithA(a, url);
+
+  return (cache[url] = info);
+}
+
+/**
+ * Returns a Location-like object for the given URL. If it is relative,
+ * the URL gets resolved.
+ * @param {!HTMLAnchorElement} a
+ * @param {string} url
+ * @return {!LocationDef}
+ */
+function parseUrlWithA(a, url) {
+  a.href = url;
+
+  // IE11 doesn't provide full URL components when parsing relative URLs.
+  // Assigning to itself again does the trick.
+  if (!a.protocol) {
+    a.href = a.href;
+  }
+
+  /** @type {!LocationDef} */
+  const info = {
+    href: a.href,
+    protocol: a.protocol,
+    host: a.host,
+    hostname: a.hostname,
+    port: a.port == '0' ? '' : a.port,
+    pathname: a.pathname,
+    search: a.search,
+    hash: a.hash,
+    origin: '', // Set below.
+  };
+
+  // Some IE11 specific polyfills.
+  // 1) IE11 strips out the leading '/' in the pathname.
+  if (info.pathname[0] !== '/') {
+    info.pathname = '/' + info.pathname;
+  }
+
+  // 2) For URLs with implicit ports, IE11 parses to default ports while
+  // other browsers leave the port field empty.
+  if (
+    (info.protocol == 'http:' && info.port == 80) ||
+    (info.protocol == 'https:' && info.port == 443)
+  ) {
+    info.port = '';
+    info.host = info.hostname;
+  }
+
+  // For data URI a.origin is equal to the string 'null' which is not useful.
+  // We instead return the actual origin which is the full URL.
+  if (a.origin && a.origin != 'null') {
+    info.origin = a.origin;
+  } else if (info.protocol == 'data:' || !info.host) {
+    info.origin = info.href;
+  } else {
+    info.origin = info.protocol + '//' + info.host;
+  }
+  return info;
+}
+
+/**
+ * Parses and builds Object of URL query string.
+ * @param {string} query The URL query string.
+ * @return {!Object<string, string>}
+ */
+function parseQueryString(query) {
+  if (!query) {
+    return {};
+  }
+  return (/^[?#]/.test(query) ? query.slice(1) : query)
+    .split('&')
+    .reduce((params, param) => {
+      const item = param.split('=');
+      try {
+        const key = decodeURIComponent(item[0] || '');
+        const value = decodeURIComponent(item[1] || '');
+        if (key) {
+          params[key] = value;
+        }
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        warn(`SwG could not parse a URL query param: ${item[0]}`);
+      }
+      return params;
+    }, {});
+}
+
+/**
+ * Adds a parameter to a query string.
+ * @param {string} url
+ * @param {string} param
+ * @param {string} value
+ * @return {string}
+ */
+function addQueryParam(url, param, value) {
+  const queryIndex = url.indexOf('?');
+  const fragmentIndex = url.indexOf('#');
+  let fragment = '';
+  if (fragmentIndex != -1) {
+    fragment = url.substring(fragmentIndex);
+    url = url.substring(0, fragmentIndex);
+  }
+  if (queryIndex == -1) {
+    url += '?';
+  } else if (queryIndex < url.length - 1) {
+    url += '&';
+  }
+  url += encodeURIComponent(param) + '=' + encodeURIComponent(value);
+  return url + fragment;
+}
+
+parseUrl(self.window.location.href);
+parseUrl(self.document.referrer);
+
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+
+/** English is the default language. */
+const DEFAULT_LANGUAGE_CODE = 'en';
+
+/**
+ * Gets a message for a given language code, from a map of messages.
+ * @param {!Object<string, string>} map
+ * @param {?string|?Element} languageCodeOrElement
+ * @return {?string}
+ */
+function msg(map, languageCodeOrElement) {
+  const defaultMsg = map[DEFAULT_LANGUAGE_CODE];
+
+  // Verify params.
+  if (typeof map !== 'object' || !languageCodeOrElement) {
+    return defaultMsg;
+  }
+
+  // Get language code.
+  let languageCode =
+    typeof languageCodeOrElement === 'string'
+      ? languageCodeOrElement
+      : getLanguageCodeFromElement(languageCodeOrElement);
+
+  // Normalize language code.
+  languageCode = languageCode.toLowerCase();
+  languageCode = languageCode.replace(/_/g, '-');
+
+  // Search for a message matching the language code.
+  // If a message can't be found, try again with a less specific language code.
+  const languageCodeSegments = languageCode.split('-');
+  while (languageCodeSegments.length) {
+    const key = languageCodeSegments.join('-');
+    if (key in map) {
+      return map[key];
+    }
+
+    // Simplify language code.
+    // Ex: "en-US-SF" => "en-US"
+    languageCodeSegments.pop();
+  }
+
+  // There was an attempt.
+  return defaultMsg;
+}
+
+/**
+ * Gets a language code (ex: "en-US") from a given Element.
+ * @param {!Element} element
+ * @return {string}
+ */
+function getLanguageCodeFromElement(element) {
+  if (element.lang) {
+    // Get language from element itself.
+    return element.lang;
+  }
+
+  if (element.ownerDocument && element.ownerDocument.documentElement.lang) {
+    // Get language from element's document.
+    return element.ownerDocument.documentElement.lang;
+  }
+
+  // There was an attempt.
+  return DEFAULT_LANGUAGE_CODE;
+}
+
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+
+/**
+ * Polyfill for String.prototype.startsWith.
+ * @param {string} string
+ * @param {string} prefix
+ * @return {boolean}
+ */
+function startsWith(string, prefix) {
+  if (prefix.length > string.length) {
+    return false;
+  }
+  return string.lastIndexOf(prefix, 0) == 0;
+}
+
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+
+/** @type {Object<string, string>} */
+let propertyNameCache;
+
+/** @const {!Array<string>} */
+const vendorPrefixes = ['Webkit', 'webkit', 'Moz', 'moz', 'ms', 'O', 'o'];
+
+/**
+ * @param {string} camelCase camel cased string
+ * @return {string} title cased string
+ */
+function camelCaseToTitleCase(camelCase) {
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+}
+
+/**
+ * Checks the style if a prefixed version of a property exists and returns
+ * it or returns an empty string.
+ * @private
+ * @param {!Object} style
+ * @param {string} titleCase the title case version of a css property name
+ * @return {string} the prefixed property name or null.
+ */
+function getVendorJsPropertyName_(style, titleCase) {
+  for (let i = 0; i < vendorPrefixes.length; i++) {
+    const propertyName = vendorPrefixes[i] + titleCase;
+    if (style[propertyName] !== undefined) {
+      return propertyName;
+    }
+  }
+  return '';
+}
+
+/**
+ * Returns the possibly prefixed JavaScript property name of a style property
+ * (ex. WebkitTransitionDuration) given a camelCase'd version of the property
+ * (ex. transitionDuration).
+ * @param {!Object} style
+ * @param {string} camelCase the camel cased version of a css property name
+ * @param {boolean=} bypassCache bypass the memoized cache of property
+ *   mapping
+ * @return {string}
+ */
+function getVendorJsPropertyName(style, camelCase, bypassCache) {
+  if (startsWith(camelCase, '--')) {
+    // CSS vars are returned as is.
+    return camelCase;
+  }
+  if (!propertyNameCache) {
+    propertyNameCache = map();
+  }
+  let propertyName = propertyNameCache[camelCase];
+  if (!propertyName || bypassCache) {
+    propertyName = camelCase;
+    if (style[camelCase] === undefined) {
+      const titleCase = camelCaseToTitleCase(camelCase);
+      const prefixedPropertyName = getVendorJsPropertyName_(style, titleCase);
+
+      if (style[prefixedPropertyName] !== undefined) {
+        propertyName = prefixedPropertyName;
+      }
+    }
+    if (!bypassCache) {
+      propertyNameCache[camelCase] = propertyName;
+    }
+  }
+  return propertyName;
+}
+
+/**
+ * Sets the CSS styles of the specified element with !important. The styles
+ * are specified as a map from CSS property names to their values.
+ * @param {!Element} element
+ * @param {!Object<string, string|number>} styles
+ */
+function setImportantStyles(element, styles) {
+  for (const k in styles) {
+    element.style.setProperty(
+      getVendorJsPropertyName(styles, k),
+      styles[k].toString(),
+      'important'
+    );
+  }
+}
+
+/**
+ * Copyright 2019 The Subscribe with Google 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.
+ */
+
+/** @const {!Object<string,?Array<AnalyticsEvent>>} */
+const ShowcaseEvents = {
+  // Events related to content being potentially unlockable
+  [ShowcaseEvent.EVENT_SHOWCASE_METER_OFFERED]: [
+    AnalyticsEvent.EVENT_HAS_METERING_ENTITLEMENTS,
+    AnalyticsEvent.EVENT_OFFERED_METER,
+  ],
+
+  // Events related to content being unlocked
+  [ShowcaseEvent.EVENT_SHOWCASE_UNLOCKED_BY_SUBSCRIPTION]: [
+    AnalyticsEvent.EVENT_UNLOCKED_BY_SUBSCRIPTION,
+  ],
+  [ShowcaseEvent.EVENT_SHOWCASE_UNLOCKED_BY_METER]: [
+    AnalyticsEvent.EVENT_HAS_METERING_ENTITLEMENTS,
+    AnalyticsEvent.EVENT_UNLOCKED_BY_METER,
+  ],
+  [ShowcaseEvent.EVENT_SHOWCASE_UNLOCKED_FREE_PAGE]: [
+    AnalyticsEvent.EVENT_UNLOCKED_FREE_PAGE,
+  ],
+
+  // Events requiring user action to unlock content
+  [ShowcaseEvent.EVENT_SHOWCASE_NO_ENTITLEMENTS_REGWALL]: [
+    AnalyticsEvent.EVENT_NO_ENTITLEMENTS,
+    AnalyticsEvent.IMPRESSION_REGWALL,
+    AnalyticsEvent.IMPRESSION_SHOWCASE_REGWALL,
+  ],
+
+  // Events requiring subscription to unlock content
+  [ShowcaseEvent.EVENT_SHOWCASE_NO_ENTITLEMENTS_PAYWALL]: [
+    AnalyticsEvent.EVENT_NO_ENTITLEMENTS,
+    AnalyticsEvent.IMPRESSION_PAYWALL,
+  ],
+  [ShowcaseEvent.EVENT_SHOWCASE_INELIGIBLE_PAYWALL]: [
+    // TODO(b/181690059): Create showcase ineligible AnalyticsEvent
+    AnalyticsEvent.IMPRESSION_PAYWALL,
+  ],
+};
+
+/**
+ * Converts a publisher entitlement event enum into an array analytics events.
+ * @param {!ShowcaseEvent} event
+ * @returns {!Array<AnalyticsEvent>}
+ */
+function showcaseEventToAnalyticsEvents(event) {
+  return ShowcaseEvents[event] || [];
+}
+
+/**
+ * Copyright 2020 The Subscribe with Google 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.
+ */
+
+/** Stamp for post messages. */
+const POST_MESSAGE_STAMP = 'swg-gaa-post-message-stamp';
+
+/** Introduction command for post messages. */
+const POST_MESSAGE_COMMAND_INTRODUCTION = 'introduction';
+
+/** User command for post messages. */
+const POST_MESSAGE_COMMAND_USER = 'user';
+
+/** Error command for post messages. */
+const POST_MESSAGE_COMMAND_ERROR = 'error';
+
+/** ID for the Google Sign-In iframe element. */
+const GOOGLE_SIGN_IN_IFRAME_ID = 'swg-google-sign-in-iframe';
+
+/** ID for the Google Sign-In button element. */
+const GOOGLE_SIGN_IN_BUTTON_ID = 'swg-google-sign-in-button';
+
+/** ID for the Publisher sign-in button element. */
+const PUBLISHER_SIGN_IN_BUTTON_ID = 'swg-publisher-sign-in-button';
+
+/** ID for the Regwall container element. */
+const REGWALL_CONTAINER_ID = 'swg-regwall-container';
+
+/** ID for the Regwall dialog element. */
+const REGWALL_DIALOG_ID = 'swg-regwall-dialog';
+
+/** ID for the Regwall title element. */
+const REGWALL_TITLE_ID = 'swg-regwall-title';
+
+/**
+ * HTML for the metering regwall dialog, where users can sign in with Google.
+ * The script creates a dialog based on this HTML.
+ *
+ * The HTML includes an iframe that loads the Google Sign-In button.
+ * This iframe can live on a different origin.
+ */
+const REGWALL_HTML = `
+<style>
+  .gaa-metering-regwall--dialog-spacer,
+  .gaa-metering-regwall--dialog,
+  .gaa-metering-regwall--logo,
+  .gaa-metering-regwall--title,
+  .gaa-metering-regwall--description,
+  .gaa-metering-regwall--description strong,
+  .gaa-metering-regwall--iframe,
+  .gaa-metering-regwall--publisher-no-thanks-button {
+    all: initial;
+    box-sizing: border-box;
+    font-family: Roboto, arial, sans-serif;
+  }
+
+  .gaa-metering-regwall--dialog-spacer {
+    bottom: 0;
+    display: block;
+    position: fixed;
+    width: 100%;
+  }
+
+  @keyframes slideUp {
+    from {transform: translate(0, 200px);}
+    to {transform: translate(0, 0);}
+  }
+
+  .gaa-metering-regwall--dialog {
+    animation: slideUp 0.5s;
+    background: white;
+    border-radius: 12px 12px 0 0;
+    box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.3);
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+    padding: 24px 20px;
+    width: 410px;
+  }
+
+  .gaa-metering-regwall--logo {
+    display: block;
+    margin: 0 auto 24px;
+  }
+
+  .gaa-metering-regwall--title {
+    color: #000;
+    display: block;
+    font-size: 16px;
+    margin: 0 0 8px;
+  }
+  
+  .gaa-metering-regwall--description {
+    color: #646464;
+    display: block;
+    font-size: 14px;
+    line-height: 19px;
+    margin: 0 0 30px;
+  }
+
+  .gaa-metering-regwall--description strong {
+    color: #646464;
+    font-size: 14px;
+    line-height: 19px;
+    font-weight: bold;
+  }
+
+  .gaa-metering-regwall--iframe {
+    border: none;
+    display: block;
+    height: 36px;
+    margin: 0 0 30px;
+    width: 100%;
+  }
+
+  .gaa-metering-regwall--line {
+    background-color: #ddd;
+    display: block;
+    height: 1px;
+    margin: 0 0 24px;
+  }
+
+  .gaa-metering-regwall--publisher-sign-in-button,
+  .gaa-metering-regwall--publisher-no-thanks-button {
+    color: #1967d2;
+    display: block;
+    cursor: pointer;
+    font-size: 12px;
+  }
+
+  .gaa-metering-regwall--publisher-sign-in-button {
+  }
+
+  .gaa-metering-regwall--publisher-no-thanks-button {
+    display: none;
+    float: right;
+  }
+
+  .gaa-metering-regwall--google-sign-in-button {
+    height: 36px;
+    margin: 0 auto 30px;
+  }
+
+  .gaa-metering-regwall--google-sign-in-button > div {
+    animation: swgGoogleSignInButtonfadeIn 0.32s;
+  }
+
+  @keyframes swgGoogleSignInButtonfadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+</style>
+
+<div class="gaa-metering-regwall--dialog-spacer">
+  <div role="dialog" aria-modal="true" class="gaa-metering-regwall--dialog" id="${REGWALL_DIALOG_ID}" aria-labelledby="${REGWALL_TITLE_ID}">
+    <img alt="Google" class="gaa-metering-regwall--logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDc0IDI0Ij48cGF0aCBmaWxsPSIjNDI4NUY0IiBkPSJNOS4yNCA4LjE5djIuNDZoNS44OGMtLjE4IDEuMzgtLjY0IDIuMzktMS4zNCAzLjEtLjg2Ljg2LTIuMiAxLjgtNC41NCAxLjgtMy42MiAwLTYuNDUtMi45Mi02LjQ1LTYuNTRzMi44My02LjU0IDYuNDUtNi41NGMxLjk1IDAgMy4zOC43NyA0LjQzIDEuNzZMMTUuNCAyLjVDMTMuOTQgMS4wOCAxMS45OCAwIDkuMjQgMCA0LjI4IDAgLjExIDQuMDQuMTEgOXM0LjE3IDkgOS4xMyA5YzIuNjggMCA0LjctLjg4IDYuMjgtMi41MiAxLjYyLTEuNjIgMi4xMy0zLjkxIDIuMTMtNS43NSAwLS41Ny0uMDQtMS4xLS4xMy0xLjU0SDkuMjR6Ii8+PHBhdGggZmlsbD0iI0VBNDMzNSIgZD0iTTI1IDYuMTljLTMuMjEgMC01LjgzIDIuNDQtNS44MyA1LjgxIDAgMy4zNCAyLjYyIDUuODEgNS44MyA1LjgxczUuODMtMi40NiA1LjgzLTUuODFjMC0zLjM3LTIuNjItNS44MS01LjgzLTUuODF6bTAgOS4zM2MtMS43NiAwLTMuMjgtMS40NS0zLjI4LTMuNTIgMC0yLjA5IDEuNTItMy41MiAzLjI4LTMuNTJzMy4yOCAxLjQzIDMuMjggMy41MmMwIDIuMDctMS41MiAzLjUyLTMuMjggMy41MnoiLz48cGF0aCBmaWxsPSIjNDI4NUY0IiBkPSJNNTMuNTggNy40OWgtLjA5Yy0uNTctLjY4LTEuNjctMS4zLTMuMDYtMS4zQzQ3LjUzIDYuMTkgNDUgOC43MiA0NSAxMmMwIDMuMjYgMi41MyA1LjgxIDUuNDMgNS44MSAxLjM5IDAgMi40OS0uNjIgMy4wNi0xLjMyaC4wOXYuODFjMCAyLjIyLTEuMTkgMy40MS0zLjEgMy40MS0xLjU2IDAtMi41My0xLjEyLTIuOTMtMi4wN2wtMi4yMi45MmMuNjQgMS41NCAyLjMzIDMuNDMgNS4xNSAzLjQzIDIuOTkgMCA1LjUyLTEuNzYgNS41Mi02LjA1VjYuNDloLTIuNDJ2MXptLTIuOTMgOC4wM2MtMS43NiAwLTMuMS0xLjUtMy4xLTMuNTIgMC0yLjA1IDEuMzQtMy41MiAzLjEtMy41MiAxLjc0IDAgMy4xIDEuNSAzLjEgMy41NC4wMSAyLjAzLTEuMzYgMy41LTMuMSAzLjV6Ii8+PHBhdGggZmlsbD0iI0ZCQkMwNSIgZD0iTTM4IDYuMTljLTMuMjEgMC01LjgzIDIuNDQtNS44MyA1LjgxIDAgMy4zNCAyLjYyIDUuODEgNS44MyA1LjgxczUuODMtMi40NiA1LjgzLTUuODFjMC0zLjM3LTIuNjItNS44MS01LjgzLTUuODF6bTAgOS4zM2MtMS43NiAwLTMuMjgtMS40NS0zLjI4LTMuNTIgMC0yLjA5IDEuNTItMy41MiAzLjI4LTMuNTJzMy4yOCAxLjQzIDMuMjggMy41MmMwIDIuMDctMS41MiAzLjUyLTMuMjggMy41MnoiLz48cGF0aCBmaWxsPSIjMzRBODUzIiBkPSJNNTggLjI0aDIuNTF2MTcuNTdINTh6Ii8+PHBhdGggZmlsbD0iI0VBNDMzNSIgZD0iTTY4LjI2IDE1LjUyYy0xLjMgMC0yLjIyLS41OS0yLjgyLTEuNzZsNy43Ny0zLjIxLS4yNi0uNjZjLS40OC0xLjMtMS45Ni0zLjctNC45Ny0zLjctMi45OSAwLTUuNDggMi4zNS01LjQ4IDUuODEgMCAzLjI2IDIuNDYgNS44MSA1Ljc2IDUuODEgMi42NiAwIDQuMi0xLjYzIDQuODQtMi41N2wtMS45OC0xLjMyYy0uNjYuOTYtMS41NiAxLjYtMi44NiAxLjZ6bS0uMTgtNy4xNWMxLjAzIDAgMS45MS41MyAyLjIgMS4yOGwtNS4yNSAyLjE3YzAtMi40NCAxLjczLTMuNDUgMy4wNS0zLjQ1eiIvPjwvc3ZnPg==" />
+
+    <div class="gaa-metering-regwall--title" id="${REGWALL_TITLE_ID}" tabindex="0">$SHOWCASE_REGWALL_TITLE$</div>
+
+    <div class="gaa-metering-regwall--description">
+      $SHOWCASE_REGWALL_DESCRIPTION$
+    </div>
+
+    <iframe
+        id="${GOOGLE_SIGN_IN_IFRAME_ID}"
+        class="gaa-metering-regwall--iframe"
+        src="$iframeUrl$">
+    </iframe>
+
+    <div class="gaa-metering-regwall--line"></div>
+
+    <a
+        id="${PUBLISHER_SIGN_IN_BUTTON_ID}"
+        class="gaa-metering-regwall--publisher-sign-in-button"
+        tabindex="0"
+        href="#">
+      $SHOWCASE_REGWALL_PUBLISHER_SIGN_IN_BUTTON$
+    </a>
+  </div>
+</div>
+`;
+
+/** Styles for the Google Sign-In button iframe. */
+const GOOGLE_SIGN_IN_IFRAME_STYLES = `
+body {
+  margin: 0;
+  overflow: hidden;
+}
+#${GOOGLE_SIGN_IN_BUTTON_ID} {
+  margin: 0 auto;
+}
+#${GOOGLE_SIGN_IN_BUTTON_ID} > div {
+  animation: fadeIn 0.32s;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+#${GOOGLE_SIGN_IN_BUTTON_ID} .abcRioButton.abcRioButtonBlue {
+  background-color: #1A73E8;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  border-radius: 4px;
+  width: 100% !important;
+}
+#${GOOGLE_SIGN_IN_BUTTON_ID} .abcRioButton.abcRioButtonBlue .abcRioButtonIcon {
+  display: none;
+}
+/** Hides default "Sign in with Google" text. */
+#${GOOGLE_SIGN_IN_BUTTON_ID} .abcRioButton.abcRioButtonBlue .abcRioButtonContents span[id^=not_signed_] {
+  font-size: 0 !important;
+}
+/** Renders localized "Sign in with Google" text instead. */
+#${GOOGLE_SIGN_IN_BUTTON_ID} .abcRioButton.abcRioButtonBlue .abcRioButtonContents span[id^=not_signed_]::before {
+  content: '$SHOWCASE_REGWALL_GOOGLE_SIGN_IN_BUTTON$';
+  font-size: 15px;
+}
+`;
+
+/**
+ * User object that Publisher JS receives after users sign in.
+ * @typedef {{
+ *   idToken: string,
+ *   name: string,
+ *   givenName: string,
+ *   familyName: string,
+ *   imageUrl: string,
+ *   email: string,
+ * }} GaaUserDef
+ */
+let GaaUserDef;
+
+/**
+ * GoogleUser object that Google Sign-In returns after users sign in.
+ * https://developers.google.com/identity/sign-in/web/reference#googleusergetbasicprofile
+ * @typedef {{
+ *   getAuthResponse: function(): {id_token: string},
+ *   getBasicProfile: function(): {
+ *     getName: function(): string,
+ *     getGivenName: function(): string,
+ *     getFamilyName: function(): string,
+ *     getImageUrl: function(): string,
+ *     getEmail: function(): string,
+ *   },
+ * }} GoogleUserDef
+ */
+let GoogleUserDef;
+
+/**
+ * Returns true if the query string contains fresh Google Article Access (GAA) params.
+ * @param {string} queryString
+ * @return {boolean}
+ */
+function queryStringHasFreshGaaParams(queryString) {
+  const params = parseQueryString(queryString);
+
+  // Verify GAA params exist.
+  if (
+    !params['gaa_at'] ||
+    !params['gaa_n'] ||
+    !params['gaa_sig'] ||
+    !params['gaa_ts']
+  ) {
+    return false;
+  }
+
+  // Verify access type.
+  const noAccess = params['gaa_at'] === 'na';
+  if (noAccess) {
+    return false;
+  }
+
+  // Verify timestamp isn't stale.
+  const expirationTimestamp = parseInt(params['gaa_ts'], 16);
+  const currentTimestamp = Date.now() / 1000;
+  if (expirationTimestamp < currentTimestamp) {
+    return false;
+  }
+
+  return true;
+}
+
+/** Renders Google Article Access (GAA) Metering Regwall. */
+class GaaMeteringRegwall {
+  /**
+   * Returns a promise for a Google Sign-In user object.
+   * https://developers.google.com/identity/sign-in/web/reference#googleusergetbasicprofile
+   *
+   * This method opens a metering regwall dialog,
+   * where users can sign in with Google.
+   * @nocollapse
+   * @param {{ iframeUrl: string }} params
+   * @return {!Promise<!GaaUserDef>}
+   */
+  static show({iframeUrl}) {
+    const queryString = GaaUtils.getQueryString();
+    if (!queryStringHasFreshGaaParams(queryString)) {
+      const errorMessage =
+        '[swg-gaa.js:GaaMeteringRegwall.show]: URL needs fresh GAA params.';
+      warn(errorMessage);
+      return Promise.reject(errorMessage);
+    }
+
+    logEvent(ShowcaseEvent.EVENT_SHOWCASE_NO_ENTITLEMENTS_REGWALL);
+
+    GaaMeteringRegwall.render_({iframeUrl});
+    GaaMeteringRegwall.sendIntroMessageToGsiIframe_({iframeUrl});
+    return GaaMeteringRegwall.getGaaUser_()
+      .then((gaaUser) => {
+        GaaMeteringRegwall.remove_();
+        return gaaUser;
+      })
+      .catch((err) => {
+        // Close the Regwall, since the flow failed.
+        GaaMeteringRegwall.remove_();
+
+        // Rethrow error.
+        throw err;
+      });
+  }
+
+  /**
+   * Signs out of Google Sign-In.
+   * This is useful for developers who are testing their
+   * SwG integrations.
+   * @nocollapse
+   * @return {!Promise}
+   */
+  static signOut() {
+    return configureGoogleSignIn().then(() =>
+      self.gapi.auth2.getAuthInstance().signOut()
+    );
+  }
+
+  /**
+   * Renders the Regwall.
+   * @private
+   * @nocollapse
+   * @param {{ iframeUrl: string }} params
+   */
+  static render_({iframeUrl}) {
+    const languageCode = getLanguageCodeFromElement(self.document.body);
+
+    // Tell the iframe which language to render.
+    iframeUrl = addQueryParam(iframeUrl, 'lang', languageCode);
+
+    const containerEl = /** @type {!HTMLDivElement} */ (
+      self.document.createElement('div')
+    );
+    containerEl.id = REGWALL_CONTAINER_ID;
+    setImportantStyles(containerEl, {
+      'all': 'unset',
+      'background-color': 'rgba(32, 33, 36, 0.6)',
+      'border': 'none',
+      'bottom': '0',
+      'height': '100%',
+      'left': '0',
+      'opacity': '0',
+      'position': 'fixed',
+      'right': '0',
+      'transition': 'opacity 0.5s',
+      'top': '0',
+      'width': '100%',
+      'z-index': 2147483646,
+    });
+    containerEl./*OK*/ innerHTML = REGWALL_HTML.replace(
+      '$iframeUrl$',
+      iframeUrl
+    )
+      .replace(
+        '$SHOWCASE_REGWALL_TITLE$',
+        msg(I18N_STRINGS['SHOWCASE_REGWALL_TITLE'], languageCode)
+      )
+      .replace(
+        '$SHOWCASE_REGWALL_DESCRIPTION$',
+        msg(I18N_STRINGS['SHOWCASE_REGWALL_DESCRIPTION'], languageCode)
+      )
+      .replace(
+        '$SHOWCASE_REGWALL_PUBLISHER_SIGN_IN_BUTTON$',
+        msg(
+          I18N_STRINGS['SHOWCASE_REGWALL_PUBLISHER_SIGN_IN_BUTTON'],
+          languageCode
+        )
+      );
+    containerEl.querySelector('ph')./*OK*/ innerHTML =
+      '<strong>' +
+      GaaMeteringRegwall.getPublisherNameFromPageConfig_() +
+      '</strong>';
+    self.document.body.appendChild(containerEl);
+    /** @suppress {suspiciousCode} */
+    containerEl.offsetHeight; // Trigger a repaint (to prepare the CSS transition).
+    setImportantStyles(containerEl, {'opacity': 1});
+    GaaMeteringRegwall.addClickListenerOnPublisherSignInButton_();
+
+    // Focus on the title after the dialog animates in.
+    // This helps people using screenreaders.
+    const dialogEl = self.document.getElementById(REGWALL_DIALOG_ID);
+    dialogEl.addEventListener('animationend', () => {
+      const titleEl = self.document.getElementById(REGWALL_TITLE_ID);
+      titleEl.focus();
+    });
+  }
+
+  /**
+   * Gets publisher name from page config.
+   * @private
+   * @nocollapse
+   * @return {string}
+   */
+  static getPublisherNameFromPageConfig_() {
+    const ldJsonElements = self.document.querySelectorAll(
+      'script[type="application/ld+json"]'
+    );
+
+    for (let i = 0; i < ldJsonElements.length; i++) {
+      const ldJsonElement = ldJsonElements[i];
+      const ldJson = /** @type {?{ publisher: ?{ name: string } }} */ (
+        parseJson(ldJsonElement.textContent)
+      );
+      const publisherName = ldJson?.publisher?.name;
+      if (publisherName) {
+        return publisherName;
+      }
+    }
+
+    throw new Error('Article needs JSON-LD with a publisher name.');
+  }
+
+  /**
+   * Adds a click listener on the publisher sign-in button.
+   * @private
+   * @nocollapse
+   */
+  static addClickListenerOnPublisherSignInButton_() {
+    self.document
+      .getElementById(PUBLISHER_SIGN_IN_BUTTON_ID)
+      .addEventListener('click', (e) => {
+        e.preventDefault();
+
+        callSwg((swg) => swg.triggerLoginRequest({linkRequested: false}));
+      });
+  }
+
+  /**
+   * Returns the GAA user, after the user signs in.
+   * @private
+   * @nocollapse
+   * @return {!Promise<!GoogleUserDef>}
+   */
+  static getGaaUser_() {
+    // Listen for GAA user.
+    return new Promise((resolve, reject) => {
+      self.addEventListener('message', (e) => {
+        if (e.data.stamp === POST_MESSAGE_STAMP) {
+          if (e.data.command === POST_MESSAGE_COMMAND_USER) {
+            // Pass along GAA user.
+            resolve(e.data.gaaUser);
+          }
+
+          if (e.data.command === POST_MESSAGE_COMMAND_ERROR) {
+            // Reject promise due to Google Sign-In error.
+            reject('Google Sign-In could not render');
+          }
+        }
+      });
+    });
+  }
+
+  /**
+   * Sends intro post message to Google Sign-In iframe.
+   * @private
+   * @nocollapse
+   * @param {{ iframeUrl: string }} params
+   */
+  static sendIntroMessageToGsiIframe_({iframeUrl}) {
+    // Introduce this window to the publisher's Google Sign-In iframe.
+    // This lets the iframe send post messages back to this window.
+    // Without the introduction, the iframe wouldn't have a reference to this window.
+    const googleSignInIframe = /** @type {!HTMLIFrameElement} */ (
+      self.document.getElementById(GOOGLE_SIGN_IN_IFRAME_ID)
+    );
+    googleSignInIframe.onload = () => {
+      googleSignInIframe.contentWindow.postMessage(
+        {
+          stamp: POST_MESSAGE_STAMP,
+          command: POST_MESSAGE_COMMAND_INTRODUCTION,
+        },
+        new URL(iframeUrl).origin
+      );
+    };
+  }
+
+  /**
+   * Removes the Regwall.
+   * @private
+   * @nocollapse
+   */
+  static remove_() {
+    const regwallContainer = self.document.getElementById(REGWALL_CONTAINER_ID);
+    if (regwallContainer) {
+      regwallContainer.remove();
+    }
+  }
+}
+
+class GaaGoogleSignInButton {
+  /**
+   * Renders the Google Sign-In button.
+   * @nocollapse
+   * @param {{ allowedOrigins: !Array<string> }} params
+   */
+  static show({allowedOrigins}) {
+    // Optionally grab language code from URL.
+    const queryString = GaaUtils.getQueryString();
+    const queryParams = parseQueryString(queryString);
+    const languageCode = queryParams['lang'] || 'en';
+
+    // Apply iframe styles.
+    const styleEl = self.document.createElement('style');
+    styleEl./*OK*/ innerText = GOOGLE_SIGN_IN_IFRAME_STYLES.replace(
+      '$SHOWCASE_REGWALL_GOOGLE_SIGN_IN_BUTTON$',
+      msg(I18N_STRINGS['SHOWCASE_REGWALL_GOOGLE_SIGN_IN_BUTTON'], languageCode)
+    );
+    self.document.head.appendChild(styleEl);
+
+    // Promise a function that sends messages to the parent frame.
+    // Note: A function is preferable to a reference to the parent frame
+    // because referencing the parent frame outside of the 'message' event
+    // handler throws an Error. A function defined within the handler can
+    // effectively save a reference to the parent frame though.
+    const sendMessageToParentFnPromise = new Promise((resolve) => {
+      self.addEventListener('message', (e) => {
+        if (
+          allowedOrigins.indexOf(e.origin) !== -1 &&
+          e.data.stamp === POST_MESSAGE_STAMP &&
+          e.data.command === POST_MESSAGE_COMMAND_INTRODUCTION
+        ) {
+          resolve((message) => {
+            e.source.postMessage(message, e.origin);
+          });
+        }
+      });
+    });
+
+    function sendErrorMessageToParent() {
+      sendMessageToParentFnPromise.then((sendMessageToParent) => {
+        sendMessageToParent({
+          stamp: POST_MESSAGE_STAMP,
+          command: POST_MESSAGE_COMMAND_ERROR,
+        });
+      });
+    }
+
+    // Validate origins.
+    for (let i = 0; i < allowedOrigins.length; i++) {
+      const allowedOrigin = allowedOrigins[i];
+      const url = new URL(allowedOrigin);
+
+      const isOrigin = url.origin === allowedOrigin;
+      const protocolIsValid =
+        url.protocol === 'http:' || url.protocol === 'https:';
+      const isValidOrigin = isOrigin && protocolIsValid;
+
+      if (!isValidOrigin) {
+        warn(
+          `[swg-gaa.js:GaaGoogleSignInButton.show]: You specified an invalid origin: ${allowedOrigin}`
+        );
+        sendErrorMessageToParent();
+        return;
+      }
+    }
+
+    // Render the Google Sign-In button.
+    configureGoogleSignIn()
+      .then(
+        // Promise credentials.
+        () =>
+          new Promise((resolve) => {
+            // Render the Google Sign-In button.
+            const buttonEl = self.document.createElement('div');
+            buttonEl.id = GOOGLE_SIGN_IN_BUTTON_ID;
+            buttonEl.tabIndex = 0;
+            self.document.body.appendChild(buttonEl);
+            self.gapi.signin2.render(GOOGLE_SIGN_IN_BUTTON_ID, {
+              'longtitle': true,
+              'onsuccess': resolve,
+              'prompt': 'select_account',
+              'scope': 'profile email',
+              'theme': 'dark',
+            });
+          })
+      )
+      .then((googleUser) => {
+        // Gather GAA user details.
+        const basicProfile = /** @type {!GoogleUserDef} */ (
+          googleUser
+        ).getBasicProfile();
+        /** @type {!GaaUserDef} */
+        const gaaUser = {
+          idToken: /** @type {!GoogleUserDef} */ (googleUser).getAuthResponse()
+            .id_token,
+          name: basicProfile.getName(),
+          givenName: basicProfile.getGivenName(),
+          familyName: basicProfile.getFamilyName(),
+          imageUrl: basicProfile.getImageUrl(),
+          email: basicProfile.getEmail(),
+        };
+
+        // Send GAA user to parent frame.
+        sendMessageToParentFnPromise.then((sendMessageToParent) => {
+          sendMessageToParent({
+            stamp: POST_MESSAGE_STAMP,
+            command: POST_MESSAGE_COMMAND_USER,
+            gaaUser,
+          });
+        });
+      })
+      .catch(sendErrorMessageToParent);
+  }
+}
+
+/**
+ * Loads the Google Sign-In API.
+ *
+ * This function is used in two places.
+ * 1. The publisher's Google Sign-In iframe.
+ * 2. (Optional) Demos that allow users to sign out.
+ *
+ * @return {!Promise}
+ */
+function configureGoogleSignIn() {
+  // Wait for Google Sign-In API.
+  return (
+    new Promise((resolve) => {
+      const apiCheckInterval = setInterval(() => {
+        if (!!self.gapi) {
+          clearInterval(apiCheckInterval);
+          resolve();
+        }
+      }, 50);
+    })
+      // Load Auth2 module.
+      .then(() => new Promise((resolve) => self.gapi.load('auth2', resolve)))
+      // Specify "redirect" mode. It plays nicer with webviews.
+      .then(
+        () =>
+          // Only initialize Google Sign-In once.
+          self.gapi.auth2.getAuthInstance() || self.gapi.auth2.init()
+      )
+  );
+}
+
+/**
+ * Calls Swgjs.
+ * @param { function(!SubscriptionsDef) } callback
+ */
+function callSwg(callback) {
+  (self.SWG = self.SWG || []).push(callback);
+}
+
+/**
+ * Logs Showcase events.
+ * @param {!ShowcaseEvent} showcaseEvent
+ */
+function logEvent(showcaseEvent) {
+  callSwg((swg) => {
+    // Get reference to event manager.
+    swg.getEventManager().then((eventManager) => {
+      // Get individual analytics events from Showcase event.
+      const eventTypes = showcaseEventToAnalyticsEvents(showcaseEvent);
+
+      // Log each analytics event.
+      eventTypes.forEach((eventType) => {
+        eventManager.logEvent({
+          eventType,
+          eventOriginator: EventOriginator.SWG_CLIENT,
+          isFromUserAction: null,
+          additionalParameters: null,
+        });
+      });
+    });
+  });
+}
+
+class GaaUtils {
+  /**
+   * Returns query string from current URL.
+   * Tests can override this method to return different URLs.
+   * @return {string}
+   */
+  static getQueryString() {
+    return self.location.search;
+  }
+}
+
+export { GaaGoogleSignInButton, GaaMeteringRegwall, GaaUserDef, GoogleUserDef };
diff --git a/third_party/subscriptions-project/swg.js b/third_party/subscriptions-project/swg.js
index aded6c0a8d37d..a6afb3df428a7 100644
--- a/third_party/subscriptions-project/swg.js
+++ b/third_party/subscriptions-project/swg.js
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/** Version: 0.1.22.107 */
+/** Version: 0.1.22.167 */
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
  *
@@ -52,6 +52,12 @@ const AnalyticsEvent = {
   IMPRESSION_SELECT_OFFER_SWG_BUTTON: 18,
   IMPRESSION_SHOW_CONTRIBUTIONS_SWG_BUTTON: 19,
   IMPRESSION_SELECT_CONTRIBUTION_SWG_BUTTON: 20,
+  IMPRESSION_METER_TOAST: 21,
+  IMPRESSION_REGWALL: 22,
+  IMPRESSION_SHOWCASE_REGWALL: 23,
+  IMPRESSION_SWG_SUBSCRIPTION_MINI_PROMPT: 24,
+  IMPRESSION_SWG_CONTRIBUTION_MINI_PROMPT: 25,
+  IMPRESSION_CONTRIBUTION_OFFERS: 26,
   ACTION_SUBSCRIBE: 1000,
   ACTION_PAYMENT_COMPLETE: 1001,
   ACTION_ACCOUNT_CREATED: 1002,
@@ -73,6 +79,20 @@ const AnalyticsEvent = {
   ACTION_SWG_BUTTON_SELECT_OFFER_CLICK: 1018,
   ACTION_SWG_BUTTON_SHOW_CONTRIBUTIONS_CLICK: 1019,
   ACTION_SWG_BUTTON_SELECT_CONTRIBUTION_CLICK: 1020,
+  ACTION_USER_CONSENT_DEFERRED_ACCOUNT: 1021,
+  ACTION_USER_DENY_DEFERRED_ACCOUNT: 1022,
+  ACTION_DEFERRED_ACCOUNT_REDIRECT: 1023,
+  ACTION_GET_ENTITLEMENTS: 1024,
+  ACTION_METER_TOAST_SUBSCRIBE_CLICK: 1025,
+  ACTION_METER_TOAST_EXPANDED: 1026,
+  ACTION_METER_TOAST_CLOSED_BY_ARTICLE_INTERACTION: 1027,
+  ACTION_METER_TOAST_CLOSED_BY_SWIPE_DOWN: 1028,
+  ACTION_METER_TOAST_CLOSED_BY_X_CLICKED: 1029,
+  ACTION_SWG_SUBSCRIPTION_MINI_PROMPT_CLICK: 1030,
+  ACTION_SWG_CONTRIBUTION_MINI_PROMPT_CLICK: 1031,
+  ACTION_SWG_SUBSCRIPTION_MINI_PROMPT_CLOSE: 1032,
+  ACTION_SWG_CONTRIBUTION_MINI_PROMPT_CLOSE: 1033,
+  ACTION_CONTRIBUTION_OFFER_SELECTED: 1034,
   EVENT_PAYMENT_FAILED: 2000,
   EVENT_CUSTOM: 3000,
   EVENT_CONFIRM_TX_ID: 3001,
@@ -81,9 +101,31 @@ const AnalyticsEvent = {
   EVENT_GPAY_CANNOT_CONFIRM_TX_ID: 3004,
   EVENT_GOOGLE_UPDATED: 3005,
   EVENT_NEW_TX_ID: 3006,
+  EVENT_UNLOCKED_BY_SUBSCRIPTION: 3007,
+  EVENT_UNLOCKED_BY_METER: 3008,
+  EVENT_NO_ENTITLEMENTS: 3009,
+  EVENT_HAS_METERING_ENTITLEMENTS: 3010,
+  EVENT_OFFERED_METER: 3011,
+  EVENT_UNLOCKED_FREE_PAGE: 3012,
   EVENT_SUBSCRIPTION_STATE: 4000,
 };
 /** @enum {number} */
+const EntitlementResult = {
+  UNKNOWN_ENTITLEMENT_RESULT: 0,
+  UNLOCKED_SUBSCRIBER: 1001,
+  UNLOCKED_FREE: 1002,
+  UNLOCKED_METER: 1003,
+  LOCKED_REGWALL: 2001,
+  LOCKED_PAYWALL: 2002,
+};
+/** @enum {number} */
+const EntitlementSource = {
+  UNKNOWN_ENTITLEMENT_SOURCE: 0,
+  GOOGLE_SUBSCRIBER_ENTITLEMENT: 1001,
+  GOOGLE_SHOWCASE_METERING_SERVICE: 2001,
+  PUBLISHER_ENTITLEMENT: 3001,
+};
+/** @enum {number} */
 const EventOriginator = {
   UNKNOWN_CLIENT: 0,
   SWG_CLIENT: 1,
@@ -91,6 +133,7 @@ const EventOriginator = {
   PROPENSITY_CLIENT: 3,
   SWG_SERVER: 4,
   PUBLISHER_CLIENT: 5,
+  SHOWCASE_CLIENT: 6,
 };
 
 /**
@@ -124,12 +167,12 @@ class AccountCreationRequest {
 
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.complete_, // field 1 - complete
+        this.complete_, // field 1 - complete
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -194,13 +237,13 @@ class AlreadySubscribedResponse {
 
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.subscriberOrMember_, // field 1 - subscriber_or_member
-      this.linkRequested_, // field 2 - link_requested
+        this.subscriberOrMember_, // field 1 - subscriber_or_member
+        this.linkRequested_, // field 2 - link_requested
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -418,22 +461,22 @@ class AnalyticsContext {
 
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.embedderOrigin_, // field 1 - embedder_origin
-      this.transactionId_, // field 2 - transaction_id
-      this.referringOrigin_, // field 3 - referring_origin
-      this.utmSource_, // field 4 - utm_source
-      this.utmCampaign_, // field 5 - utm_campaign
-      this.utmMedium_, // field 6 - utm_medium
-      this.sku_, // field 7 - sku
-      this.readyToPay_, // field 8 - ready_to_pay
-      this.label_, // field 9 - label
-      this.clientVersion_, // field 10 - client_version
-      this.url_, // field 11 - url
+        this.embedderOrigin_, // field 1 - embedder_origin
+        this.transactionId_, // field 2 - transaction_id
+        this.referringOrigin_, // field 3 - referring_origin
+        this.utmSource_, // field 4 - utm_source
+        this.utmCampaign_, // field 5 - utm_campaign
+        this.utmMedium_, // field 6 - utm_medium
+        this.sku_, // field 7 - sku
+        this.readyToPay_, // field 8 - ready_to_pay
+        this.label_, // field 9 - label
+        this.clientVersion_, // field 10 - client_version
+        this.url_, // field 11 - url
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -498,13 +541,13 @@ class AnalyticsEventMeta {
 
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.eventOriginator_, // field 1 - event_originator
-      this.isFromUserAction_, // field 2 - is_from_user_action
+        this.eventOriginator_, // field 1 - event_originator
+        this.isFromUserAction_, // field 2 - is_from_user_action
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -612,15 +655,15 @@ class AnalyticsRequest {
 
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.context_ ? this.context_.toArray(includeLabel) : [], // field 1 - context
-      this.event_, // field 2 - event
-      this.meta_ ? this.meta_.toArray(includeLabel) : [], // field 3 - meta
-      this.params_ ? this.params_.toArray(includeLabel) : [], // field 4 - params
+        this.context_ ? this.context_.toArray(includeLabel) : [], // field 1 - context
+        this.event_, // field 2 - event
+        this.meta_ ? this.meta_.toArray(includeLabel) : [], // field 3 - meta
+        this.params_ ? this.params_.toArray(includeLabel) : [], // field 4 - params
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -637,6 +680,226 @@ class AnalyticsRequest {
   }
 }
 
+/**
+ * @implements {Message}
+ */
+class EntitlementJwt {
+  /**
+   * @param {!Array<*>=} data
+   * @param {boolean=} includesLabel
+   */
+  constructor(data = [], includesLabel = true) {
+    const base = includesLabel ? 1 : 0;
+
+    /** @private {?string} */
+    this.jwt_ = data[base] == null ? null : data[base];
+
+    /** @private {?string} */
+    this.source_ = data[1 + base] == null ? null : data[1 + base];
+  }
+
+  /**
+   * @return {?string}
+   */
+  getJwt() {
+    return this.jwt_;
+  }
+
+  /**
+   * @param {string} value
+   */
+  setJwt(value) {
+    this.jwt_ = value;
+  }
+
+  /**
+   * @return {?string}
+   */
+  getSource() {
+    return this.source_;
+  }
+
+  /**
+   * @param {string} value
+   */
+  setSource(value) {
+    this.source_ = value;
+  }
+
+  /**
+   * @param {boolean} includeLabel
+   * @return {!Array<?>}
+   * @override
+   */
+  toArray(includeLabel = true) {
+    const arr = [
+        this.jwt_, // field 1 - jwt
+        this.source_, // field 2 - source
+    ];
+    if (includeLabel) {
+      arr.unshift(this.label());
+    }
+    return arr;
+  }
+
+  /**
+   * @return {string}
+   * @override
+   */
+  label() {
+    return 'EntitlementJwt';
+  }
+}
+
+/**
+ * @implements {Message}
+ */
+class EntitlementsRequest {
+  /**
+   * @param {!Array<*>=} data
+   * @param {boolean=} includesLabel
+   */
+  constructor(data = [], includesLabel = true) {
+    const base = includesLabel ? 1 : 0;
+
+    /** @private {?EntitlementJwt} */
+    this.usedEntitlement_ =
+      data[base] == null || data[base] == undefined
+        ? null
+        : new EntitlementJwt(data[base], includesLabel);
+
+    /** @private {?Timestamp} */
+    this.clientEventTime_ =
+      data[1 + base] == null || data[1 + base] == undefined
+        ? null
+        : new Timestamp(data[1 + base], includesLabel);
+
+    /** @private {?EntitlementSource} */
+    this.entitlementSource_ = data[2 + base] == null ? null : data[2 + base];
+
+    /** @private {?EntitlementResult} */
+    this.entitlementResult_ = data[3 + base] == null ? null : data[3 + base];
+
+    /** @private {?string} */
+    this.token_ = data[4 + base] == null ? null : data[4 + base];
+
+    /** @private {?boolean} */
+    this.isUserRegistered_ = data[5 + base] == null ? null : data[5 + base];
+  }
+
+  /**
+   * @return {?EntitlementJwt}
+   */
+  getUsedEntitlement() {
+    return this.usedEntitlement_;
+  }
+
+  /**
+   * @param {!EntitlementJwt} value
+   */
+  setUsedEntitlement(value) {
+    this.usedEntitlement_ = value;
+  }
+
+  /**
+   * @return {?Timestamp}
+   */
+  getClientEventTime() {
+    return this.clientEventTime_;
+  }
+
+  /**
+   * @param {!Timestamp} value
+   */
+  setClientEventTime(value) {
+    this.clientEventTime_ = value;
+  }
+
+  /**
+   * @return {?EntitlementSource}
+   */
+  getEntitlementSource() {
+    return this.entitlementSource_;
+  }
+
+  /**
+   * @param {!EntitlementSource} value
+   */
+  setEntitlementSource(value) {
+    this.entitlementSource_ = value;
+  }
+
+  /**
+   * @return {?EntitlementResult}
+   */
+  getEntitlementResult() {
+    return this.entitlementResult_;
+  }
+
+  /**
+   * @param {!EntitlementResult} value
+   */
+  setEntitlementResult(value) {
+    this.entitlementResult_ = value;
+  }
+
+  /**
+   * @return {?string}
+   */
+  getToken() {
+    return this.token_;
+  }
+
+  /**
+   * @param {string} value
+   */
+  setToken(value) {
+    this.token_ = value;
+  }
+
+  /**
+   * @return {?boolean}
+   */
+  getIsUserRegistered() {
+    return this.isUserRegistered_;
+  }
+
+  /**
+   * @param {boolean} value
+   */
+  setIsUserRegistered(value) {
+    this.isUserRegistered_ = value;
+  }
+
+  /**
+   * @param {boolean} includeLabel
+   * @return {!Array<?>}
+   * @override
+   */
+  toArray(includeLabel = true) {
+    const arr = [
+        this.usedEntitlement_ ? this.usedEntitlement_.toArray(includeLabel) : [], // field 1 - used_entitlement
+        this.clientEventTime_ ? this.clientEventTime_.toArray(includeLabel) : [], // field 2 - client_event_time
+        this.entitlementSource_, // field 3 - entitlement_source
+        this.entitlementResult_, // field 4 - entitlement_result
+        this.token_, // field 5 - token
+        this.isUserRegistered_, // field 6 - is_user_registered
+    ];
+    if (includeLabel) {
+      arr.unshift(this.label());
+    }
+    return arr;
+  }
+
+  /**
+   * @return {string}
+   * @override
+   */
+  label() {
+    return 'EntitlementsRequest';
+  }
+}
+
 /**
  * @implements {Message}
  */
@@ -650,6 +913,9 @@ class EntitlementsResponse {
 
     /** @private {?string} */
     this.jwt_ = data[base] == null ? null : data[base];
+
+    /** @private {?string} */
+    this.swgUserToken_ = data[1 + base] == null ? null : data[1 + base];
   }
 
   /**
@@ -666,14 +932,29 @@ class EntitlementsResponse {
     this.jwt_ = value;
   }
 
+  /**
+   * @return {?string}
+   */
+  getSwgUserToken() {
+    return this.swgUserToken_;
+  }
+
+  /**
+   * @param {string} value
+   */
+  setSwgUserToken(value) {
+    this.swgUserToken_ = value;
+  }
+
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.jwt_, // field 1 - jwt
+        this.jwt_, // field 1 - jwt
+        this.swgUserToken_, // field 2 - swg_user_token
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -715,6 +996,12 @@ class EventParams {
 
     /** @private {?string} */
     this.oldTransactionId_ = data[4 + base] == null ? null : data[4 + base];
+
+    /** @private {?boolean} */
+    this.isUserRegistered_ = data[5 + base] == null ? null : data[5 + base];
+
+    /** @private {?string} */
+    this.subscriptionFlow_ = data[6 + base] == null ? null : data[6 + base];
   }
 
   /**
@@ -787,18 +1074,48 @@ class EventParams {
     this.oldTransactionId_ = value;
   }
 
+  /**
+   * @return {?boolean}
+   */
+  getIsUserRegistered() {
+    return this.isUserRegistered_;
+  }
+
+  /**
+   * @param {boolean} value
+   */
+  setIsUserRegistered(value) {
+    this.isUserRegistered_ = value;
+  }
+
+  /**
+   * @return {?string}
+   */
+  getSubscriptionFlow() {
+    return this.subscriptionFlow_;
+  }
+
+  /**
+   * @param {string} value
+   */
+  setSubscriptionFlow(value) {
+    this.subscriptionFlow_ = value;
+  }
+
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.smartboxMessage_, // field 1 - smartbox_message
-      this.gpayTransactionId_, // field 2 - gpay_transaction_id
-      this.hadLogged_, // field 3 - had_logged
-      this.sku_, // field 4 - sku
-      this.oldTransactionId_, // field 5 - old_transaction_id
+        this.smartboxMessage_, // field 1 - smartbox_message
+        this.gpayTransactionId_, // field 2 - gpay_transaction_id
+        this.hadLogged_, // field 3 - had_logged
+        this.sku_, // field 4 - sku
+        this.oldTransactionId_, // field 5 - old_transaction_id
+        this.isUserRegistered_, // field 6 - is_user_registered
+        this.subscriptionFlow_, // field 7 - subscription_flow
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -863,13 +1180,13 @@ class FinishedLoggingResponse {
 
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.complete_, // field 1 - complete
-      this.error_, // field 2 - error
+        this.complete_, // field 1 - complete
+        this.error_, // field 2 - error
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -934,13 +1251,13 @@ class LinkSaveTokenRequest {
 
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.authCode_, // field 1 - auth_code
-      this.token_, // field 2 - token
+        this.authCode_, // field 1 - auth_code
+        this.token_, // field 2 - token
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -988,12 +1305,12 @@ class LinkingInfoResponse {
 
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.requested_, // field 1 - requested
+        this.requested_, // field 1 - requested
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -1109,16 +1426,16 @@ class SkuSelectedResponse {
 
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.sku_, // field 1 - sku
-      this.oldSku_, // field 2 - old_sku
-      this.oneTime_, // field 3 - one_time
-      this.playOffer_, // field 4 - play_offer
-      this.oldPlayOffer_, // field 5 - old_play_offer
+        this.sku_, // field 1 - sku
+        this.oldSku_, // field 2 - old_sku
+        this.oneTime_, // field 3 - one_time
+        this.playOffer_, // field 4 - play_offer
+        this.oldPlayOffer_, // field 5 - old_play_offer
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -1166,12 +1483,12 @@ class SmartBoxMessage {
 
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.isClicked_, // field 1 - is_clicked
+        this.isClicked_, // field 1 - is_clicked
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -1191,7 +1508,7 @@ class SmartBoxMessage {
 /**
  * @implements {Message}
  */
-class SubscribeResponse {
+class SubscribeResponse$1 {
   /**
    * @param {!Array<*>=} data
    * @param {boolean=} includesLabel
@@ -1219,12 +1536,12 @@ class SubscribeResponse {
 
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.subscribe_, // field 1 - subscribe
+        this.subscribe_, // field 1 - subscribe
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -1244,7 +1561,7 @@ class SubscribeResponse {
 /**
  * @implements {Message}
  */
-class ViewSubscriptionsResponse {
+class Timestamp {
   /**
    * @param {!Array<*>=} data
    * @param {boolean=} includesLabel
@@ -1252,32 +1569,50 @@ class ViewSubscriptionsResponse {
   constructor(data = [], includesLabel = true) {
     const base = includesLabel ? 1 : 0;
 
-    /** @private {?boolean} */
-    this.native_ = data[base] == null ? null : data[base];
+    /** @private {?number} */
+    this.seconds_ = data[base] == null ? null : data[base];
+
+    /** @private {?number} */
+    this.nanos_ = data[1 + base] == null ? null : data[1 + base];
   }
 
   /**
-   * @return {?boolean}
+   * @return {?number}
    */
-  getNative() {
-    return this.native_;
+  getSeconds() {
+    return this.seconds_;
   }
 
   /**
-   * @param {boolean} value
+   * @param {number} value
    */
-  setNative(value) {
-    this.native_ = value;
+  setSeconds(value) {
+    this.seconds_ = value;
+  }
+
+  /**
+   * @return {?number}
+   */
+  getNanos() {
+    return this.nanos_;
+  }
+
+  /**
+   * @param {number} value
+   */
+  setNanos(value) {
+    this.nanos_ = value;
   }
 
   /**
    * @param {boolean} includeLabel
-   * @return {!Array}
+   * @return {!Array<?>}
    * @override
    */
   toArray(includeLabel = true) {
     const arr = [
-      this.native_, // field 1 - native
+        this.seconds_, // field 1 - seconds
+        this.nanos_, // field 2 - nanos
     ];
     if (includeLabel) {
       arr.unshift(this.label());
@@ -1290,45 +1625,155 @@ class ViewSubscriptionsResponse {
    * @override
    */
   label() {
-    return 'ViewSubscriptionsResponse';
+    return 'Timestamp';
   }
 }
 
-const PROTO_MAP = {
-  'AccountCreationRequest': AccountCreationRequest,
-  'AlreadySubscribedResponse': AlreadySubscribedResponse,
-  'AnalyticsContext': AnalyticsContext,
-  'AnalyticsEventMeta': AnalyticsEventMeta,
-  'AnalyticsRequest': AnalyticsRequest,
-  'EntitlementsResponse': EntitlementsResponse,
-  'EventParams': EventParams,
-  'FinishedLoggingResponse': FinishedLoggingResponse,
-  'LinkSaveTokenRequest': LinkSaveTokenRequest,
-  'LinkingInfoResponse': LinkingInfoResponse,
-  'SkuSelectedResponse': SkuSelectedResponse,
-  'SmartBoxMessage': SmartBoxMessage,
-  'SubscribeResponse': SubscribeResponse,
-  'ViewSubscriptionsResponse': ViewSubscriptionsResponse,
-};
-
 /**
- * Utility to deserialize a buffer
- * @param {!Array<*>} data
- * @return {!Message}
+ * @implements {Message}
  */
-function deserialize(data) {
-  /** {?string} */
-  const key = data ? data[0] : null;
-  if (key) {
-    const ctor = PROTO_MAP[key];
-    if (ctor) {
-      return new ctor(data);
-    }
-  }
-  throw new Error('Deserialization failed for ' + data);
-}
-
-/**
+class ToastCloseRequest {
+  /**
+   * @param {!Array<*>=} data
+   * @param {boolean=} includesLabel
+   */
+  constructor(data = [], includesLabel = true) {
+    const base = includesLabel ? 1 : 0;
+
+    /** @private {?boolean} */
+    this.close_ = data[base] == null ? null : data[base];
+  }
+
+  /**
+   * @return {?boolean}
+   */
+  getClose() {
+    return this.close_;
+  }
+
+  /**
+   * @param {boolean} value
+   */
+  setClose(value) {
+    this.close_ = value;
+  }
+
+  /**
+   * @param {boolean} includeLabel
+   * @return {!Array<?>}
+   * @override
+   */
+  toArray(includeLabel = true) {
+    const arr = [
+        this.close_, // field 1 - close
+    ];
+    if (includeLabel) {
+      arr.unshift(this.label());
+    }
+    return arr;
+  }
+
+  /**
+   * @return {string}
+   * @override
+   */
+  label() {
+    return 'ToastCloseRequest';
+  }
+}
+
+/**
+ * @implements {Message}
+ */
+class ViewSubscriptionsResponse {
+  /**
+   * @param {!Array<*>=} data
+   * @param {boolean=} includesLabel
+   */
+  constructor(data = [], includesLabel = true) {
+    const base = includesLabel ? 1 : 0;
+
+    /** @private {?boolean} */
+    this.native_ = data[base] == null ? null : data[base];
+  }
+
+  /**
+   * @return {?boolean}
+   */
+  getNative() {
+    return this.native_;
+  }
+
+  /**
+   * @param {boolean} value
+   */
+  setNative(value) {
+    this.native_ = value;
+  }
+
+  /**
+   * @param {boolean} includeLabel
+   * @return {!Array<?>}
+   * @override
+   */
+  toArray(includeLabel = true) {
+    const arr = [
+        this.native_, // field 1 - native
+    ];
+    if (includeLabel) {
+      arr.unshift(this.label());
+    }
+    return arr;
+  }
+
+  /**
+   * @return {string}
+   * @override
+   */
+  label() {
+    return 'ViewSubscriptionsResponse';
+  }
+}
+
+const PROTO_MAP = {
+  'AccountCreationRequest': AccountCreationRequest,
+  'AlreadySubscribedResponse': AlreadySubscribedResponse,
+  'AnalyticsContext': AnalyticsContext,
+  'AnalyticsEventMeta': AnalyticsEventMeta,
+  'AnalyticsRequest': AnalyticsRequest,
+  'EntitlementJwt': EntitlementJwt,
+  'EntitlementsRequest': EntitlementsRequest,
+  'EntitlementsResponse': EntitlementsResponse,
+  'EventParams': EventParams,
+  'FinishedLoggingResponse': FinishedLoggingResponse,
+  'LinkSaveTokenRequest': LinkSaveTokenRequest,
+  'LinkingInfoResponse': LinkingInfoResponse,
+  'SkuSelectedResponse': SkuSelectedResponse,
+  'SmartBoxMessage': SmartBoxMessage,
+  'SubscribeResponse': SubscribeResponse$1,
+  'Timestamp': Timestamp,
+  'ToastCloseRequest': ToastCloseRequest,
+  'ViewSubscriptionsResponse': ViewSubscriptionsResponse,
+};
+
+/**
+ * Utility to deserialize a buffer
+ * @param {!Array<*>} data
+ * @return {!Message}
+ */
+function deserialize(data) {
+  /** {?string} */
+  const key = data ? data[0] : null;
+  if (key) {
+    const ctor = PROTO_MAP[key];
+    if (ctor) {
+      return new ctor(data);
+    }
+  }
+  throw new Error('Deserialization failed for ' + data);
+}
+
+/**
  * @param {function(new: T)} messageType
  * @return {string}
  * @template T
@@ -1372,14 +1817,15 @@ const FilterResult = {
  * - additionalParameters: Optional.  A JSON object to store generic data.
  *
  *  @typedef {{
- *    eventType: !AnalyticsEvent,
- *    eventOriginator: !EventOriginator,
+ *    eventType: ?AnalyticsEventDef,
+ *    eventOriginator: !EventOriginatorDef,
  *    isFromUserAction: ?boolean,
  *    additionalParameters: ?Object,
  * }}
  */
 let ClientEvent;
 
+/* eslint-disable no-unused-vars */
 /**
  * @interface
  */
@@ -1389,7 +1835,7 @@ class ClientEventManagerApi {
    * invoked unless the event is filtered.
    * @param {!function(!ClientEvent)} listener
    */
-  registerEventListener(listener) { }
+  registerEventListener(listener) {}
 
   /**
    * Register a filterer for events if you need to potentially prevent the
@@ -1398,7 +1844,7 @@ class ClientEventManagerApi {
    * event.
    * @param {!function(!ClientEvent):FilterResult} filterer
    */
-  registerEventFilterer(filterer) { }
+  registerEventFilterer(filterer) {}
 
   /**
    * Call this function to log an event.  It will immediately throw an error if
@@ -1407,8 +1853,9 @@ class ClientEventManagerApi {
    * listener asynchronously.
    * @param {!ClientEvent} event
    */
-  logEvent(event) { }
+  logEvent(event) {}
 }
+/* eslint-enable no-unused-vars */
 
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
@@ -1507,7 +1954,7 @@ function acceptPortResultData(
   requireOriginVerified,
   requireSecureChannel
 ) {
-  return port.acceptResult().then(result => {
+  return port.acceptResult().then((result) => {
     if (
       result.origin != requireOrigin ||
       (requireOriginVerified && !result.originVerified) ||
@@ -1535,21 +1982,6 @@ function acceptPortResultData(
  * limitations under the License.
  */
 
-/**
- * Debug logger, only log message if #swg.log=1
- * @param {...*} var_args [decription]
- */
-
-/* eslint-disable */
-
-function debugLog(var_args) {
-  if (/swg.debug=1/.test(self.location.hash)) {
-    const logArgs = Array.prototype.slice.call(arguments, 0);
-    logArgs.unshift('[Subscriptions]');
-    log.apply(log, logArgs);
-  }
-}
-
 /**
  * @param  {...*} var_args [description]
  */
@@ -1629,16 +2061,6 @@ function toString(val) {
   return /** @type {string} */ (val);
 }
 
-var log_1 = {
-  assert,
-  debugLog,
-  warn,
-  log
-};
-var log_2 = log_1.assert;
-var log_4 = log_1.warn;
-var log_5 = log_1.log;
-
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
  *
@@ -1671,6 +2093,30 @@ function map(initial) {
   return obj;
 }
 
+/**
+ * Implements `Array.find()` method that's not yet available in all browsers.
+ *
+ * @param {?Array<T>} array
+ * @param {function(T, number, !Array<T>):boolean} predicate
+ * @return {?T}
+ * @template T
+ */
+function findInArray(array, predicate) {
+  if (!array) {
+    return null;
+  }
+  const len = array.length || 0;
+  if (len > 0) {
+    for (let i = 0; i < len; i++) {
+      const other = array[i];
+      if (predicate(other, i, array)) {
+        return other;
+      }
+    }
+  }
+  return null;
+}
+
 /**
  * Copyright 2019 The Subscribe with Google Authors. All Rights Reserved.
  *
@@ -1735,7 +2181,114 @@ function getRandomInts(numInts, maxVal) {
  * limitations under the License.
  */
 
-const CHARS = '0123456789ABCDEF';
+/**
+ * Character mapping from base64url to base64.
+ * @const {!Object<string, string>}
+ */
+const base64UrlDecodeSubs = {'-': '+', '_': '/'};
+
+/**
+ * Character mapping from base64 to base64url.
+ * @const {!Object<string, string>}
+ */
+const base64UrlEncodeSubs = {'+': '-', '/': '_', '=': ''};
+
+/**
+ * Converts a string which holds 8-bit code points, such as the result of atob,
+ * into a Uint8Array with the corresponding bytes.
+ * If you have a string of characters, you probably want to be using utf8Encode.
+ * @param {string} str
+ * @return {!Uint8Array}
+ */
+function stringToBytes(str) {
+  const bytes = new Uint8Array(str.length);
+  for (let i = 0; i < str.length; i++) {
+    const charCode = str.charCodeAt(i);
+    assert(charCode <= 255, 'Characters must be in range [0,255]');
+    bytes[i] = charCode;
+  }
+  return bytes;
+}
+
+/**
+ * Converts a 8-bit bytes array into a string
+ * @param {!Uint8Array} bytes
+ * @return {string}
+ */
+function bytesToString(bytes) {
+  // Intentionally avoids String.fromCharCode.apply so we don't suffer a
+  // stack overflow. #10495, https://jsperf.com/bytesToString-2
+  const array = new Array(bytes.length);
+  for (let i = 0; i < bytes.length; i++) {
+    array[i] = String.fromCharCode(bytes[i]);
+  }
+  return array.join('');
+}
+
+/**
+ * Interpret a byte array as a UTF-8 string.
+ * @param {!Uint8Array} bytes
+ * @return {string}
+ */
+function utf8DecodeSync(bytes) {
+  if (typeof TextDecoder !== 'undefined') {
+    return new TextDecoder('utf-8').decode(bytes);
+  }
+  const asciiString = bytesToString(new Uint8Array(bytes));
+  return decodeURIComponent(escape(asciiString));
+}
+
+/**
+ * Turn a string into UTF-8 bytes.
+ * @param {string} string
+ * @return {!Uint8Array}
+ */
+function utf8EncodeSync(string) {
+  if (typeof TextEncoder !== 'undefined') {
+    return new TextEncoder('utf-8').encode(string);
+  }
+  return stringToBytes(unescape(encodeURIComponent(string)));
+}
+
+/**
+ * Converts a string which is in base64url encoding into a Uint8Array
+ * containing the decoded value.
+ * @param {string} str
+ * @return {!Uint8Array}
+ */
+function base64UrlDecodeToBytes(str) {
+  const encoded = atob(str.replace(/[-_]/g, (ch) => base64UrlDecodeSubs[ch]));
+  return stringToBytes(encoded);
+}
+
+/**
+ * Converts a bytes array into base64url encoded string.
+ * base64url is defined in RFC 4648. It is sometimes referred to as "web safe".
+ * @param {!Uint8Array} bytes
+ * @return {string}
+ */
+function base64UrlEncodeFromBytes(bytes) {
+  const str = bytesToString(bytes);
+  return btoa(str).replace(/[+/=]/g, (ch) => base64UrlEncodeSubs[ch]);
+}
+
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+
+const CHARS$1 = '0123456789ABCDEF';
 
 /**
  * Polyfill for String.prototype.startsWith.
@@ -1756,7 +2309,7 @@ function startsWith(string, prefix) {
  * @param {!number} v
  */
 function getChar19(v) {
-  return CHARS[(v & 0x3) | 0x8];
+  return CHARS$1[(v & 0x3) | 0x8];
 }
 
 /**
@@ -1792,7 +2345,7 @@ function getUuid() {
         uuid += getChar19(rands[rIndex++]);
         break;
       default:
-        uuid += CHARS[rands[rIndex++]];
+        uuid += CHARS$1[rands[rIndex++]];
         break;
     }
   }
@@ -1804,18 +2357,54 @@ function getSwgTransactionId() {
 }
 
 /**
- * Copyright 2018 The Subscribe with Google 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
+ * Returns a string whose length matches the length of format.
+ * @param {string} str
+ * @param {string} format
+ * @return {string}
+ */
+function padString(str, format) {
+  return (format + str).slice(-format.length);
+}
+
+const PADDING = '00000000';
+function toHex(buffer) {
+  const hexCodes = [];
+  const view = new DataView(buffer);
+  for (let i = 0; i < view.byteLength; i += 4) {
+    // toString(16) will give the hex representation of the number without padding
+    const stringValue = view.getUint32(i).toString(16);
+    hexCodes.push(padString(stringValue, PADDING));
+  }
+  return hexCodes.join('');
+}
+
+/**
+ * Returns a hexadecimal 128 character string that is the
+ * SHA-512 hash of the passed string.
+ * @param {string} stringToHash
+ * @return {!Promise<string>}
+ */
+function hash(stringToHash) {
+  const crypto = self.crypto || self.msCrypto;
+  const subtle = crypto.subtle;
+  return subtle
+    .digest('SHA-512', utf8EncodeSync(stringToHash))
+    .then((digest) => toHex(digest));
+}
+
+/**
+ * Copyright 2018 The Subscribe with Google 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.
  */
 
@@ -1892,6 +2481,7 @@ const defaultStyles = {
   'lighting-color': 'rgb(255, 255, 255)',
   'line-break': 'auto',
   'line-height': 'normal',
+  'margin-bottom': '0',
   'mask': 'none',
   'max-block-size': 'none',
   'max-height': 'none',
@@ -1957,7 +2547,6 @@ const defaultStyles = {
 };
 
 /**
- * @export
  * @param {string} camelCase camel cased string
  * @return {string} title cased string
  */
@@ -1987,7 +2576,6 @@ function getVendorJsPropertyName_(style, titleCase) {
  * Returns the possibly prefixed JavaScript property name of a style property
  * (ex. WebkitTransitionDuration) given a camelCase'd version of the property
  * (ex. transitionDuration).
- * @export
  * @param {!Object} style
  * @param {string} camelCase the camel cased version of a css property name
  * @param {boolean=} bypassCache bypass the memoized cache of property
@@ -2026,7 +2614,7 @@ function getVendorJsPropertyName(style, camelCase, bypassCache) {
  * @param {!Element} element
  * @param {!Object<string, string|number>} styles
  */
-function setImportantStyles(element, styles) {
+function setImportantStyles$1(element, styles) {
   for (const k in styles) {
     element.style.setProperty(
       getVendorJsPropertyName(styles, k),
@@ -2051,9 +2639,9 @@ function setStyle(element, property, value, units, bypassCache) {
     bypassCache
   );
   if (propertyName) {
-    element.style[propertyName] = /** @type {string} */ (units
-      ? value + units
-      : value);
+    element.style[propertyName] = /** @type {string} */ (
+      units ? value + units : value
+    );
   }
 }
 
@@ -2076,7 +2664,7 @@ function setStyles(element, styles) {
  */
 function resetStyles(element, properties) {
   const styleObj = {};
-  properties.forEach(prop => {
+  properties.forEach((prop) => {
     styleObj[prop] = null;
   });
   setStyles(element, styleObj);
@@ -2088,7 +2676,7 @@ function resetStyles(element, properties) {
  * @param {!Element} element
  */
 function resetAllStyles(element) {
-  setImportantStyles(element, defaultStyles);
+  setImportantStyles$1(element, defaultStyles);
 }
 
 /**
@@ -2149,13 +2737,13 @@ function createElement(doc, tagName, attributes, content) {
     if (typeof content == 'string') {
       element.textContent = content;
     } else if (content.nodeType) {
-      element.appendChild(content);
+      element.appendChild(/** @type {!Node} */ (content));
     } else if ('length' in content) {
       for (let i = 0; i < content.length; i++) {
         element.appendChild(content[i]);
       }
     } else {
-      log_2(false, 'Unsupported content: %s', content);
+      assert(false, 'Unsupported content: %s', content);
     }
   }
   return element;
@@ -2228,8 +2816,7 @@ function isLegacyEdgeBrowser(win) {
 }
 
 /**
- * @license
- * Copyright 2017 The Web Activities Authors. All Rights Reserved.
+ * Copyright 2018 The Subscribe with Google 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.
@@ -2244,1813 +2831,1259 @@ function isLegacyEdgeBrowser(win) {
  * limitations under the License.
  */
 
-/*eslint no-unused-vars: 0*/
-
+const {
+  createAbortError,
+  isAbortError,
+} = require('web-activities/activity-ports');
 
 /**
- * @enum {string}
+ * Whether the specified error is an AbortError type.
+ * See https://heycam.github.io/webidl/#aborterror.
+ * @param {*} error
+ * @return {boolean}
  */
-const ActivityMode = {
-  IFRAME: 'iframe',
-  POPUP: 'popup',
-  REDIRECT: 'redirect',
-};
-
+function isCancelError(error) {
+  return isAbortError(error);
+}
 
 /**
- * The result code used for `ActivityResult`.
- * @enum {string}
+ * Creates or emulates a DOMException of AbortError type.
+ * See https://heycam.github.io/webidl/#aborterror.
+ * @param {!Window} win
+ * @param {string=} message
+ * @return {!DOMException}
  */
-const ActivityResultCode = {
-  OK: 'ok',
-  CANCELED: 'canceled',
-  FAILED: 'failed',
-};
-
+function createCancelError(win, message) {
+  return createAbortError(win, message);
+}
 
 /**
- * The result of an activity. The activity implementation returns this object
- * for a successful result, a cancelation or a failure.
- * @struct
+ * A set of error utilities combined in a class to allow easy stubbing in tests.
  */
-class ActivityResult {
+class ErrorUtils {
   /**
-   * @param {!ActivityResultCode} code
-   * @param {*} data
-   * @param {!ActivityMode} mode
-   * @param {string} origin
-   * @param {boolean} originVerified
-   * @param {boolean} secureChannel
-   */
-  constructor(code, data, mode, origin, originVerified, secureChannel) {
-    /** @const {!ActivityResultCode} */
-    this.code = code;
-    /** @const {*} */
-    this.data = code == ActivityResultCode.OK ? data : null;
-    /** @const {!ActivityMode} */
-    this.mode = mode;
-    /** @const {string} */
-    this.origin = origin;
-    /** @const {boolean} */
-    this.originVerified = originVerified;
-    /** @const {boolean} */
-    this.secureChannel = secureChannel;
-    /** @const {boolean} */
-    this.ok = code == ActivityResultCode.OK;
-    /** @const {?Error} */
-    this.error = code == ActivityResultCode.FAILED ?
-        new Error(String(data) || '') :
-        null;
+   * @param {!Error} error
+   */
+  static throwAsync(error) {
+    setTimeout(() => {
+      throw error;
+    });
   }
 }
 
-
-/**
- * The activity request that different types of hosts can be started with.
- * @typedef {{
- *   requestId: string,
- *   returnUrl: string,
- *   args: ?Object,
- *   origin: (string|undefined),
- *   originVerified: (boolean|undefined),
- * }}
- */
-let ActivityRequest;
-
-
 /**
- * The activity "open" options used for popups and redirects.
+ * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
  *
- * - returnUrl: override the return URL. By default, the current URL will be
- *   used.
- * - skipRequestInUrl: removes the activity request from the URL, in case
- *   redirect is used. By default, the activity request is appended to the
- *   activity URL. This option can be used if the activity request is passed
- *   to the activity by some alternative means.
- * - disableRedirectFallback: disallows popup fallback to redirect. By default
- *   the redirect fallback is allowed. This option has to be used very carefully
- *   because there are many user agents that may fail to open a popup and it
- *   won't be always possible for the opener window to even be aware of such
- *   failures.
+ * 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
  *
- * @typedef {{
- *   returnUrl: (string|undefined),
- *   skipRequestInUrl: (boolean|undefined),
- *   disableRedirectFallback: (boolean|undefined),
- *   width: (number|undefined),
- *   height: (number|undefined),
- * }}
- */
-let ActivityOpenOptions;
-
-
-/**
- * Activity client-side binding. The port provides limited ways to communicate
- * with the activity and receive signals and results from it. Not every type
- * of activity exposes a port.
+ *      http://www.apache.org/licenses/LICENSE-2.0
  *
- * @interface
+ * 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.
  */
-class ActivityPort {
-
-  /**
-   * Returns the mode of the activity: iframe, popup or redirect.
-   * @return {!ActivityMode}
-   */
-  getMode() {}
-
-  /**
-   * Accepts the result when ready. The client should verify the activity's
-   * mode, origin, verification and secure channel flags before deciding
-   * whether or not to trust the result.
-   *
-   * Returns the promise that yields when the activity has been completed and
-   * either a result, a cancelation or a failure has been returned.
-   *
-   * @return {!Promise<!ActivityResult>}
-   */
-  acceptResult() {}
-}
 
+/** @const {!Object<string, string>} */
+const iframeAttributes$2 = {
+  'frameborder': '0',
+  'scrolling': 'no',
+};
 
 /**
- * Activity client-side binding for messaging.
- *
- * Whether the host can or cannot receive a message depends on the type of
- * host and its state. Ensure that the code has an alternative path if
- * messaging is not available.
- *
- * @interface
+ * Class to build and render Activity iframe view.
  */
-class ActivityMessagingPort {
-
+class ActivityIframeView extends View {
   /**
-   * Returns the target window where host is loaded. May be unavailable.
-   * @return {?Window}
+   * @param {!Window} win
+   * @param {!../components/activities.ActivityPorts} activityPorts
+   * @param {string} src
+   * @param {!Object<string, ?>=} args
+   * @param {boolean=} shouldFadeBody
+   * @param {boolean=} hasLoadingIndicator
    */
-  getTargetWin() {}
+  constructor(
+    win,
+    activityPorts,
+    src,
+    args,
+    shouldFadeBody = false,
+    hasLoadingIndicator = false
+  ) {
+    super();
 
-  /**
-   * Sends a message to the host.
-   * @param {!Object} payload
-   */
-  message(payload) {}
+    /** @private @const {!Window} */
+    this.win_ = win;
 
-  /**
-   * Registers a callback to receive messages from the host.
-   * @param {function(!Object)} callback
-   */
-  onMessage(callback) {}
+    /** @private @const {!Document} */
+    this.doc_ = this.win_.document;
 
-  /**
-   * Creates a new communication channel or returns an existing one.
-   * @param {string=} opt_name
-   * @return {!Promise<!MessagePort>}
-   */
-  messageChannel(opt_name) {}
-}
+    /** @private @const {!HTMLIFrameElement} */
+    this.iframe_ = /** @type {!HTMLIFrameElement} */ (
+      createElement(this.doc_, 'iframe', iframeAttributes$2)
+    );
 
+    /** @private @const {!../components/activities.ActivityPorts} */
+    this.activityPorts_ = activityPorts;
 
+    /** @private @const {string} */
+    this.src_ = src;
 
-/** DOMException.ABORT_ERR name */
-const ABORT_ERR_NAME = 'AbortError';
+    /** @private @const {!Object<string, ?>} */
+    this.args_ = args || {};
 
-/** DOMException.ABORT_ERR = 20 */
-const ABORT_ERR_CODE = 20;
+    /** @private @const {boolean} */
+    this.shouldFadeBody_ = shouldFadeBody;
 
-/** @type {?HTMLAnchorElement} */
-let aResolver;
+    /** @private @const {boolean} */
+    this.hasLoadingIndicator_ = hasLoadingIndicator;
 
+    /** @private {?../components/activities.ActivityIframePort} */
+    this.port_ = null;
 
-/**
- * @param {string} urlString
- * @return {!HTMLAnchorElement}
- */
-function parseUrl(urlString) {
-  if (!aResolver) {
-    aResolver = /** @type {!HTMLAnchorElement} */ (document.createElement('a'));
+    /**
+     * @private
+     * {?function<!web-activities/activity-ports.ActivityIframePort|!Promise>}
+     */
+    this.portResolver_ = null;
+
+    /**
+     * @private @const
+     * {!Promise<!web-activities/activity-ports.ActivityIframePort>}
+     */
+    this.portPromise_ = new Promise((resolve) => {
+      this.portResolver_ = resolve;
+    });
   }
-  aResolver.href = urlString;
-  return /** @type {!HTMLAnchorElement} */ (aResolver);
-}
 
+  /** @override */
+  getElement() {
+    return this.iframe_;
+  }
 
-/**
- * @param {!Location|!URL|!HTMLAnchorElement} loc
- * @return {string}
- */
-function getOrigin(loc) {
-  if (loc.origin) {
-    return loc.origin;
+  /** @override */
+  init(dialog) {
+    return this.activityPorts_
+      .openIframe(this.iframe_, this.src_, this.args_)
+      .then((port) => this.onOpenIframeResponse_(port, dialog));
   }
-  // Make sure that the origin is normalized. Specifically on IE, host sometimes
-  // includes the default port, which is not per standard.
-  const protocol = loc.protocol;
-  let host = loc.host;
-  if (protocol == 'https:' && host.indexOf(':443') == host.length - 4) {
-    host = host.replace(':443', '');
-  } else if (protocol == 'http:' && host.indexOf(':80') == host.length - 3) {
-    host = host.replace(':80', '');
+
+  /**
+   * Returns if document should fade for this view.
+   * @return {boolean}
+   */
+  shouldFadeBody() {
+    return this.shouldFadeBody_;
   }
-  return protocol + '//' + host;
-}
 
+  /**
+   * Returns if the view shows loading indicator.
+   * @return {boolean}
+   */
+  hasLoadingIndicator() {
+    return this.hasLoadingIndicator_;
+  }
 
-/**
- * @param {string} urlString
- * @return {string}
- */
-function getOriginFromUrl(urlString) {
-  return getOrigin(parseUrl(urlString));
-}
+  /**
+   * @param {!../components/activities.ActivityIframePort} port
+   * @param {!../components/dialog.Dialog} dialog
+   * @return {!Promise}
+   */
+  onOpenIframeResponse_(port, dialog) {
+    this.port_ = port;
+    this.portResolver_(port);
 
+    this.port_.onResizeRequest((height) => {
+      dialog.resizeView(this, height);
+    });
 
-/**
- * @param {string} urlString
- * @return {string}
- */
-function removeFragment(urlString) {
-  const index = urlString.indexOf('#');
-  if (index == -1) {
-    return urlString;
+    return this.port_.whenReady();
   }
-  return urlString.substring(0, index);
-}
 
+  /**
+   * @return {!Promise<!../components/activities.ActivityIframePort>}
+   * @private
+   */
+  getPortPromise_() {
+    return this.portPromise_;
+  }
 
-/**
- * Parses and builds Object of URL query string.
- * @param {string} query The URL query string.
- * @return {!Object<string, string>}
- */
-function parseQueryString(query) {
-  if (!query) {
-    return {};
+  /**
+   * @param {!function(new: T)}  message
+   * @param {function(?)} callback
+   * @template T
+   */
+  on(message, callback) {
+    this.getPortPromise_().then((port) => {
+      port.on(message, callback);
+    });
   }
-  return (/^[?#]/.test(query) ? query.slice(1) : query)
-      .split('&')
-      .reduce((params, param) => {
-        const item = param.split('=');
-        const key = decodeURIComponent(item[0] || '');
-        const value = decodeURIComponent(item[1] || '');
-        if (key) {
-          params[key] = value;
-        }
-        return params;
-      }, {});
-}
 
+  /**
+   * @param {!../proto/api_messages.Message} request
+   */
+  execute(request) {
+    this.getPortPromise_().then((port) => {
+      port.execute(request);
+    });
+  }
 
-/**
- * @param {string} queryString  A query string in the form of "a=b&c=d". Could
- *   be optionally prefixed with "?" or "#".
- * @param {string} param The param to get from the query string.
- * @return {?string}
- */
-function getQueryParam(queryString, param) {
-  return parseQueryString(queryString)[param];
-}
-
+  /**
+   * Accepts results from the caller.
+   * @return {!Promise<!web-activities/activity-ports.ActivityResult>}
+   */
+  acceptResult() {
+    return this.getPortPromise_().then((port) => port.acceptResult());
+  }
 
-/**
- * Add a query-like parameter to the fragment string.
- * @param {string} url
- * @param {string} param
- * @param {string} value
- * @return {string}
- */
-function addFragmentParam(url, param, value) {
-  return url +
-      (url.indexOf('#') == -1 ? '#' : '&') +
-      encodeURIComponent(param) + '=' + encodeURIComponent(value);
-}
+  /**
+   * Accepts results from the caller and verifies origin.
+   * @param {string} requireOrigin
+   * @param {boolean} requireOriginVerified
+   * @param {boolean} requireSecureChannel
+   * @return {!Promise<!Object>}
+   */
+  acceptResultAndVerify(
+    requireOrigin,
+    requireOriginVerified,
+    requireSecureChannel
+  ) {
+    return this.getPortPromise_().then((port) => {
+      return acceptPortResultData(
+        port,
+        requireOrigin,
+        requireOriginVerified,
+        requireSecureChannel
+      );
+    });
+  }
 
+  /**
+   * Completes the flow.
+   * @return {!Promise}
+   */
+  whenComplete() {
+    return this.acceptResult();
+  }
 
-/**
- * @param {string} queryString  A query string in the form of "a=b&c=d". Could
- *   be optionally prefixed with "?" or "#".
- * @param {string} param The param to remove from the query string.
- * @return {?string}
- */
-function removeQueryParam(queryString, param) {
-  if (!queryString) {
-    return queryString;
-  }
-  const search = encodeURIComponent(param) + '=';
-  let index = -1;
-  do {
-    index = queryString.indexOf(search, index);
-    if (index != -1) {
-      const prev = index > 0 ? queryString.substring(index - 1, index) : '';
-      if (prev == '' || prev == '?' || prev == '#' || prev == '&') {
-        let end = queryString.indexOf('&', index + 1);
-        if (end == -1) {
-          end = queryString.length;
-        }
-        queryString =
-            queryString.substring(0, index) +
-            queryString.substring(end + 1);
-      } else {
-        index++;
+  /**
+   * @param {function()} callback
+   */
+  onCancel(callback) {
+    this.acceptResult().catch((reason) => {
+      if (isCancelError(reason)) {
+        callback();
       }
-    }
-  } while (index != -1 && index < queryString.length);
-  return queryString;
-}
-
-
-/**
- * @param {!ActivityRequest} request
- * @return {string}
- */
-function serializeRequest(request) {
-  const map = {
-    'requestId': request.requestId,
-    'returnUrl': request.returnUrl,
-    'args': request.args,
-  };
-  if (request.origin !== undefined) {
-    map['origin'] = request.origin;
+      throw reason;
+    });
   }
-  if (request.originVerified !== undefined) {
-    map['originVerified'] = request.originVerified;
+
+  /** @override */
+  resized() {
+    if (this.port_) {
+      this.port_.resized();
+    }
   }
-  return JSON.stringify(map);
 }
 
-
 /**
- * @param {*} error
- * @return {boolean}
+ * Copyright 2021 The Subscribe with Google 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.
  */
-function isAbortError(error) {
-  if (!error || typeof error != 'object') {
-    return false;
-  }
-  return (error['name'] === ABORT_ERR_NAME);
-}
 
+const Constants$1 = {};
 
 /**
- * Creates or emulates a DOMException of AbortError type.
- * See https://heycam.github.io/webidl/#aborterror.
- * @param {!Window} win
- * @param {string=} opt_message
- * @return {!DOMException}
+ * Local storage key for swgUserToken.
+ *
+ * @const {string}
  */
-function createAbortError(win, opt_message) {
-  const message = 'AbortError' + (opt_message ? ': ' + opt_message : '');
-  let error = null;
-  if (typeof win['DOMException'] == 'function') {
-    // TODO(dvoytenko): remove typecast once externs are fixed.
-    const constr = /** @type {function(new:DOMException, string, string)} */ (
-        win['DOMException']);
-    try {
-      error = new constr(message, ABORT_ERR_NAME);
-    } catch (e) {
-      // Ignore. In particular, `new DOMException()` fails in Edge.
-    }
-  }
-  if (!error) {
-    // TODO(dvoytenko): remove typecast once externs are fixed.
-    const constr = /** @type {function(new:DOMException, string)} */ (
-        Error);
-    error = new constr(message);
-    error.name = ABORT_ERR_NAME;
-    error.code = ABORT_ERR_CODE;
-  }
-  return error;
-}
-
+Constants$1.USER_TOKEN = 'USER_TOKEN';
 
 /**
- * Resolves the activity result as a promise:
- *  - `OK` result is yielded as the promise's payload;
- *  - `CANCEL` result is rejected with the `AbortError`;
- *  - `FAILED` result is rejected with the embedded error.
+ * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
  *
- * @param {!Window} win
- * @param {!ActivityResult} result
- * @param {function((!ActivityResult|!Promise))} resolver
+ * 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.
  */
-function resolveResult(win, result, resolver) {
-  if (result.ok) {
-    resolver(result);
-  } else {
-    const error = result.error || createAbortError(win);
-    error.activityResult = result;
-    resolver(Promise.reject(error));
-  }
-}
-
 
 /**
- * @param {!Window} win
- * @return {boolean}
+ * @fileoverview This module declares JSON types as defined in the
+ * {@link http://json.org/}.
  */
-function isIeBrowser(win) {
-  // MSIE and Trident are typical user agents for IE browsers.
-  const nav = win.navigator;
-  return /Trident|MSIE|IEMobile/i.test(nav && nav.userAgent);
-}
-
 
 /**
- * @param {!Window} win
- * @return {boolean}
+ * Simple wrapper around JSON.parse that casts the return value
+ * to JsonObject.
+ * Create a new wrapper if an array return value is desired.
+ * @param {*} json JSON string to parse
+ * @return {?JsonObject|undefined} May be extend to parse arrays.
  */
-function isEdgeBrowser(win) {
-  const nav = win.navigator;
-  return /Edge/i.test(nav && nav.userAgent);
+function parseJson(json) {
+  return /** @type {?JsonObject} */ (JSON.parse(/** @type {string} */ (json)));
 }
 
-
 /**
- * @param {!Error} e
+ * Parses the given `json` string without throwing an exception if not valid.
+ * Returns `undefined` if parsing fails.
+ * Returns the `Object` corresponding to the JSON string when parsing succeeds.
+ * @param {*} json JSON string to parse
+ * @param {function(!Error)=} onFailed Optional function that will be called
+ *     with the error if parsing fails.
+ * @return {?JsonObject|undefined} May be extend to parse arrays.
  */
-function throwAsync(e) {
-  setTimeout(() => {throw e;});
+function tryParseJson(json, onFailed) {
+  try {
+    return parseJson(json);
+  } catch (e) {
+    if (onFailed) {
+      onFailed(e);
+    }
+    return undefined;
+  }
 }
 
-
 /**
- * Polyfill of the `Node.isConnected` API. See
- * https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected.
- * @param {!Node} node
- * @return {boolean}
+ * Converts the passed string into a JSON object (if possible) and returns the
+ * value of the propertyName on that object.
+ * @param {string} jsonString
+ * @param {string} propertyName
+ * @return {*}
  */
-function isNodeConnected(node) {
-  // Ensure that node is attached if specified. This check uses a new and
-  // fast `isConnected` API and thus only checked on platforms that have it.
-  // See https://www.chromestatus.com/feature/5676110549352448.
-  if ('isConnected' in node) {
-    return node['isConnected'];
-  }
-  // Polyfill.
-  const root = node.ownerDocument && node.ownerDocument.documentElement;
-  return (root && root.contains(node)) || false;
+function getPropertyFromJsonString(jsonString, propertyName) {
+  const json = tryParseJson(jsonString);
+  return (json && json[propertyName]) || null;
 }
 
-
-
-const SENTINEL = '__ACTIVITIES__';
-
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
 
 /**
- * The messenger helper for activity's port and host.
+ * Provides helper methods to decode and verify JWT tokens.
  */
-class Messenger {
+class JwtHelper {
+  constructor() {}
 
   /**
-   * @param {!Window} win
-   * @param {!Window|function():?Window} targetOrCallback
-   * @param {?string} targetOrigin
-   * @param {boolean} requireTarget
+   * Decodes JWT token and returns its payload.
+   * @param {string} encodedToken
+   * @return {?JsonObject|undefined}
    */
-  constructor(win, targetOrCallback, targetOrigin, requireTarget) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private @const {!Window|function():?Window} */
-    this.targetOrCallback_ = targetOrCallback;
-
-    /**
-     * May start as unknown (`null`) until received in the first message.
-     * @private {?string}
-     */
-    this.targetOrigin_ = targetOrigin;
-
-    /** @private @const {boolean} */
-    this.requireTarget_ = requireTarget;
-
-    /** @private {?Window} */
-    this.target_ = null;
-
-    /** @private {boolean} */
-    this.acceptsChannel_ = false;
-
-    /** @private {?MessagePort} */
-    this.port_ = null;
-
-    /** @private {?function(string, ?Object)} */
-    this.onCommand_ = null;
-
-    /** @private {?function(!Object)} */
-    this.onCustomMessage_ = null;
-
-    /**
-     * @private {?Object<string, !ChannelHolder>}
-     */
-    this.channels_ = null;
-
-    /** @private @const */
-    this.boundHandleEvent_ = this.handleEvent_.bind(this);
+  decode(encodedToken) {
+    return this.decodeInternal_(encodedToken).payload;
   }
 
   /**
-   * Connect the port to the host or vice versa.
-   * @param {function(string, ?Object)} onCommand
+   * @param {string} encodedToken
+   * @return {!JwtTokenInternalDef}
+   * @private
    */
-  connect(onCommand) {
-    if (this.onCommand_) {
-      throw new Error('already connected');
+  decodeInternal_(encodedToken) {
+    // See https://jwt.io/introduction/
+    /**
+     * Throws error about invalid token.
+     */
+    function invalidToken() {
+      throw new Error(`Invalid token: "${encodedToken}"`);
     }
-    this.onCommand_ = onCommand;
-    this.win_.addEventListener('message', this.boundHandleEvent_);
-  }
 
-  /**
-   * Disconnect messenger.
-   */
-  disconnect() {
-    if (this.onCommand_) {
-      this.onCommand_ = null;
-      if (this.port_) {
-        closePort(this.port_);
-        this.port_ = null;
-      }
-      this.win_.removeEventListener('message', this.boundHandleEvent_);
-      if (this.channels_) {
-        for (const k in this.channels_) {
-          const channelObj = this.channels_[k];
-          if (channelObj.port1) {
-            closePort(channelObj.port1);
-          }
-          if (channelObj.port2) {
-            closePort(channelObj.port2);
-          }
-        }
-        this.channels_ = null;
-      }
+    // Encoded token has three parts: header.payload.sig
+    // Note! The padding is not allowed by JWT spec:
+    // http://self-issued.info/docs/draft-goland-json-web-token-00.html#rfc.section.5
+    const parts = encodedToken.split('.');
+    if (parts.length != 3) {
+      invalidToken();
     }
+    const headerUtf8Bytes = base64UrlDecodeToBytes(parts[0]);
+    const payloadUtf8Bytes = base64UrlDecodeToBytes(parts[1]);
+    return {
+      header: tryParseJson(utf8DecodeSync(headerUtf8Bytes), invalidToken),
+      payload: tryParseJson(utf8DecodeSync(payloadUtf8Bytes), invalidToken),
+      verifiable: `${parts[0]}.${parts[1]}`,
+      sig: parts[2],
+    };
   }
+}
 
-  /**
-   * Returns whether the messenger has been connected already.
-   * @return {boolean}
-   */
-  isConnected() {
-    return this.targetOrigin_ != null;
-  }
-
-  /**
-   * Returns the messaging target. Only available when connection has been
-   * establihsed.
-   * @return {!Window}
-   */
-  getTarget() {
-    const target = this.getOptionalTarget_();
-    if (!target) {
-      throw new Error('not connected');
-    }
-    return target;
-  }
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
 
-  /**
-   * @return {?Window}
-   * @private
-   */
-  getOptionalTarget_() {
-    if (this.onCommand_ && !this.target_) {
-      if (typeof this.targetOrCallback_ == 'function') {
-        this.target_ = this.targetOrCallback_();
-      } else {
-        this.target_ = /** @type {!Window} */ (this.targetOrCallback_);
-      }
-    }
-    return this.target_;
-  }
+/** Source for Google-provided metering entitlements. */
+const GOOGLE_METERING_SOURCE = 'google:metering';
 
+/**
+ * The holder of the entitlements for a service.
+ */
+class Entitlements {
   /**
-   * Returns the messaging origin. Only available when connection has been
-   * establihsed.
-   * @return {string}
+   * @param {string} service
+   * @param {string} raw
+   * @param {!Array<!Entitlement>} entitlements
+   * @param {?string} currentProduct
+   * @param {function(!Entitlements)} ackHandler
+   * @param {function(!Entitlements, ?Function=)} consumeHandler
+   * @param {?boolean|undefined} isReadyToPay
+   * @param {?string|undefined} decryptedDocumentKey
    */
-  getTargetOrigin() {
-    if (this.targetOrigin_ == null) {
-      throw new Error('not connected');
-    }
-    return this.targetOrigin_;
-  }
+  constructor(
+    service,
+    raw,
+    entitlements,
+    currentProduct,
+    ackHandler,
+    consumeHandler,
+    isReadyToPay,
+    decryptedDocumentKey
+  ) {
+    /** @const {string} */
+    this.service = service;
+    /** @const {string} */
+    this.raw = raw;
+    /** @const {!Array<!Entitlement>} */
+    this.entitlements = entitlements;
+    /** @const {boolean} */
+    this.isReadyToPay = isReadyToPay || false;
+    /** @const {?string} */
+    this.decryptedDocumentKey = decryptedDocumentKey || null;
 
-  /**
-   * The host sends this message to the client to indicate that it's ready to
-   * start communicating. The client is expected to respond back with the
-   * "start" command. See `sendStartCommand` method.
-   */
-  sendConnectCommand() {
-    // TODO(dvoytenko): MessageChannel is critically necessary for IE/Edge,
-    // since window messaging doesn't always work. It's also preferred as an API
-    // for other browsers: it's newer, cleaner and arguably more secure.
-    // Unfortunately, browsers currently do not propagate user gestures via
-    // MessageChannel, only via window messaging. This should be re-enabled
-    // once browsers fix user gesture propagation.
-    // See:
-    // Safari: https://bugs.webkit.org/show_bug.cgi?id=186593
-    // Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=851493
-    // Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1469422
-    const acceptsChannel = isIeBrowser(this.win_) || isEdgeBrowser(this.win_);
-    this.sendCommand('connect', {'acceptsChannel': acceptsChannel});
+    /** @private @const {?string} */
+    this.product_ = currentProduct;
+    /** @private @const {function(!Entitlements)} */
+    this.ackHandler_ = ackHandler;
+    /** @private @const {function(!Entitlements, ?Function=)} */
+    this.consumeHandler_ = consumeHandler;
   }
 
   /**
-   * The client sends this message to the host upon receiving the "connect"
-   * message to start the main communication channel. As a payload, the message
-   * will contain the provided start arguments.
-   * @param {?Object} args
+   * @return {!Entitlements}
    */
-  sendStartCommand(args) {
-    let channel = null;
-    if (this.acceptsChannel_ && typeof this.win_.MessageChannel == 'function') {
-      channel = new this.win_.MessageChannel();
-    }
-    if (channel) {
-      this.sendCommand('start', args, [channel.port2]);
-      // It's critical to switch to port messaging only after "start" has been
-      // sent. Otherwise, it won't be delivered.
-      this.switchToChannel_(channel.port1);
-    } else {
-      this.sendCommand('start', args);
-    }
+  clone() {
+    return new Entitlements(
+      this.service,
+      this.raw,
+      this.entitlements.map((ent) => ent.clone()),
+      this.product_,
+      this.ackHandler_,
+      this.consumeHandler_,
+      this.isReadyToPay,
+      this.decryptedDocumentKey
+    );
   }
 
   /**
-   * Sends the specified command from the port to the host or vice versa.
-   * @param {string} cmd
-   * @param {?Object=} opt_payload
-   * @param {?Array=} opt_transfer
+   * @return {!Object}
    */
-  sendCommand(cmd, opt_payload, opt_transfer) {
-    const data = {
-      'sentinel': SENTINEL,
-      'cmd': cmd,
-      'payload': opt_payload || null,
+  json() {
+    return {
+      'service': this.service,
+      'entitlements': this.entitlements.map((item) => item.json()),
+      'isReadyToPay': this.isReadyToPay,
     };
-    if (this.port_) {
-      this.port_.postMessage(data, opt_transfer || undefined);
-    } else {
-      const target = this.getTarget();
-      // Only "connect" command is allowed to use `targetOrigin == '*'`
-      const targetOrigin =
-          cmd == 'connect' ?
-          (this.targetOrigin_ != null ? this.targetOrigin_ : '*') :
-          this.getTargetOrigin();
-      target.postMessage(data, targetOrigin, opt_transfer || undefined);
-    }
   }
 
   /**
-   * Sends a message to the client.
-   * @param {!Object} payload
+   * Returns true if the current article is unlocked by a
+   * cacheable entitlement. Metering entitlements aren't cacheable,
+   * because each metering entitlement is meant to be used for one article.
+   * Subscription entitlements are cacheable, because subscription entitlements
+   * are meant to be used across multiple articles on a publication.
+   * @return {boolean}
    */
-  customMessage(payload) {
-    this.sendCommand('msg', payload);
+  enablesThisWithCacheableEntitlements() {
+    const entitlement = this.getEntitlementForThis();
+    return !!entitlement && entitlement.source !== GOOGLE_METERING_SOURCE;
   }
 
   /**
-   * Registers a callback to receive messages from the client.
-   * @param {function(!Object)} callback
+   * Returns true if the current article is unlocked by a
+   * Google metering entitlement. These entitlements come
+   * from Google News Intiative's licensing program to support news.
+   * https://www.blog.google/outreach-initiatives/google-news-initiative/licensing-program-support-news-industry-/
+   * @return {boolean}
    */
-  onCustomMessage(callback) {
-    this.onCustomMessage_ = callback;
+  enablesThisWithGoogleMetering() {
+    const entitlement = this.getEntitlementForThis();
+    return !!entitlement && entitlement.source === GOOGLE_METERING_SOURCE;
   }
 
   /**
-   * @param {string=} opt_name
-   * @return {!Promise<!MessagePort>}
+   * @param {string=} source
+   * @return {boolean}
    */
-  startChannel(opt_name) {
-    const name = opt_name || '';
-    const channelObj = this.getChannelObj_(name);
-    if (!channelObj.port1) {
-      const channel = new this.win_.MessageChannel();
-      channelObj.port1 = channel.port1;
-      channelObj.port2 = channel.port2;
-      channelObj.resolver(channelObj.port1);
-    }
-    if (channelObj.port2) {
-      // Not yet sent.
-      this.sendCommand('cnset', {'name': name}, [channelObj.port2]);
-      channelObj.port2 = null;
-    }
-    return channelObj.promise;
+  enablesThis(source) {
+    return this.enables(this.product_, source);
   }
 
   /**
-   * @param {string=} opt_name
-   * @return {!Promise<!MessagePort>}
+   * @param {string=} source
+   * @return {boolean}
    */
-  askChannel(opt_name) {
-    const name = opt_name || '';
-    const channelObj = this.getChannelObj_(name);
-    if (!channelObj.port1) {
-      this.sendCommand('cnget', {'name': name});
+  enablesAny(source) {
+    for (let i = 0; i < this.entitlements.length; i++) {
+      if (
+        this.entitlements[i].products.length > 0 &&
+        (!source || source == this.entitlements[i].source)
+      ) {
+        return true;
+      }
     }
-    return channelObj.promise;
+    return false;
   }
 
   /**
-   * @param {string} name
-   * @param {!MessagePort} port
-   * @private
+   * Whether these entitlements enable the specified product, optionally also
+   * restricting the source.
+   * @param {?string} product
+   * @param {string=} source
+   * @return {boolean}
    */
-  receiveChannel_(name, port) {
-    const channelObj = this.getChannelObj_(name);
-    channelObj.port1 = port;
-    channelObj.resolver(port);
+  enables(product, source) {
+    if (!product) {
+      return false;
+    }
+    return !!this.getEntitlementFor(product, source);
   }
 
   /**
-   * @param {string} name
-   * @return {!ChannelHolder}
+   * Returns the first matching entitlement for the current product,
+   * optionally also matching the specified source.
+   * @param {string=} source
+   * @return {?Entitlement}
    */
-  getChannelObj_(name) {
-    if (!this.channels_) {
-      this.channels_ = {};
-    }
-    let channelObj = this.channels_[name];
-    if (!channelObj) {
-      let resolver;
-      const promise = new Promise(resolve => {
-        resolver = resolve;
-      });
-      channelObj = {
-        port1: null,
-        port2: null,
-        resolver,
-        promise,
-      };
-      this.channels_[name] = channelObj;
-    }
-    return channelObj;
+  getEntitlementForThis(source) {
+    return this.getEntitlementFor(this.product_, source);
   }
 
   /**
-   * @param {!MessagePort} port
-   * @private
+   * Returns the first matching entitlement for the specified product,
+   * optionally also matching the specified source.
+   *
+   * Returns non-metering entitlements if possible, to avoid consuming
+   * metered reads unnecessarily.
+   *
+   * @param {?string} product
+   * @param {string=} source
+   * @return {?Entitlement}
    */
-  switchToChannel_(port) {
-    if (this.port_) {
-      closePort(this.port_);
+  getEntitlementFor(product, source) {
+    if (!product) {
+      // Require a product ID.
+      warn(
+        'SwG needs this article to define a product ID (e.g. example.com:premium). Articles can define a product ID using JSON+LD. SwG can check entitlements after this article defines a product ID.'
+      );
+      return null;
     }
-    this.port_ = port;
-    this.port_.onmessage = event => {
-      const data = event.data;
-      const cmd = data && data['cmd'];
-      const payload = data && data['payload'] || null;
-      if (cmd) {
-        this.handleCommand_(cmd, payload, event);
-      }
-    };
-    // Even though all messaging will switch to ports, the window-based message
-    // listener will be preserved just in case the host is refreshed and needs
-    // another connection.
+
+    // Prefer subscription entitlements over metering entitlements.
+    // Metering entitlements are a limited resource. When a metering entitlement
+    // unlocks an article, that depletes the user's remaining "free reads".
+    // Subscription entitlements are *not* depleted when they unlock articles.
+    // They are essentially unlimited if the subscription remains valid.
+    // For this reason, subscription entitlements are preferred.
+    const entitlementsThatUnlockArticle = this.entitlements.filter(
+      (entitlement) =>
+        entitlement.enables(product) &&
+        (!source || source === entitlement.source)
+    );
+
+    const subscriptionEntitlement = findInArray(
+      entitlementsThatUnlockArticle,
+      (entitlement) => entitlement.source !== GOOGLE_METERING_SOURCE
+    );
+
+    const meteringEntitlement = findInArray(
+      entitlementsThatUnlockArticle,
+      (entitlement) => entitlement.source === GOOGLE_METERING_SOURCE
+    );
+
+    return subscriptionEntitlement || meteringEntitlement || null;
   }
 
   /**
-   * @param {!MessageEvent} event
-   * @private
+   * Returns the first matching entitlement for the specified source w/o
+   * matching any specific products.
+   * @param {string} source
+   * @return {?Entitlement}
    */
-  handleEvent_(event) {
-    if (this.requireTarget_ && this.getOptionalTarget_() != event.source) {
-      // When target is required, confirm it against the event.source. This
-      // is normally only needed for ports where a single window can include
-      // multiple iframes to match the event to a specific iframe. Otherwise,
-      // the origin checks below are sufficient.
-      return;
-    }
-    const data = event.data;
-    if (!data || data['sentinel'] != SENTINEL) {
-      return;
-    }
-    const cmd = data['cmd'];
-    if (this.port_ && cmd != 'connect' && cmd != 'start') {
-      // Messaging channel has already taken over. However, the "connect" and
-      // "start" commands are allowed to proceed in case re-connection is
-      // requested.
-      return;
-    }
-    const origin = /** @type {string} */ (event.origin);
-    const payload = data['payload'] || null;
-    if (this.targetOrigin_ == null && cmd == 'start') {
-      this.targetOrigin_ = origin;
-    }
-    if (this.targetOrigin_ == null && event.source) {
-      if (this.getOptionalTarget_() == event.source) {
-        this.targetOrigin_ = origin;
+  getEntitlementForSource(source) {
+    if (this.entitlements.length > 0) {
+      for (let i = 0; i < this.entitlements.length; i++) {
+        if (
+          this.entitlements[i].subscriptionToken &&
+          source == this.entitlements[i].source
+        ) {
+          return this.entitlements[i];
+        }
       }
     }
-    // Notice that event.source may differ from the target because of
-    // friendly-iframe intermediaries.
-    if (origin != this.targetOrigin_) {
-      return;
-    }
-    this.handleCommand_(cmd, payload, event);
+    return null;
   }
 
   /**
-   * @param {string} cmd
-   * @param {?Object} payload
-   * @param {!MessageEvent} event
-   * @private
+   * A 3p site should call this method to acknowledge that it "saw" and
+   * "understood" entitlements.
    */
-  handleCommand_(cmd, payload, event) {
-    if (cmd == 'connect') {
-      if (this.port_) {
-        // In case the port has already been open - close it to reopen it
-        // again later.
-        closePort(this.port_);
-        this.port_ = null;
-      }
-      this.acceptsChannel_ = payload && payload['acceptsChannel'] || false;
-      this.onCommand_(cmd, payload);
-    } else if (cmd == 'start') {
-      const port = event.ports && event.ports[0];
-      if (port) {
-        this.switchToChannel_(port);
-      }
-      this.onCommand_(cmd, payload);
-    } else if (cmd == 'msg') {
-      if (this.onCustomMessage_ != null && payload != null) {
-        this.onCustomMessage_(payload);
-      }
-    } else if (cmd == 'cnget') {
-      const name = payload['name'];
-      this.startChannel(name);
-    } else if (cmd == 'cnset') {
-      const name = payload['name'];
-      const port = event.ports[0];
-      this.receiveChannel_(name, /** @type {!MessagePort} */ (port));
-    } else {
-      this.onCommand_(cmd, payload);
-    }
+  ack() {
+    this.ackHandler_(this);
   }
-}
 
-
-/**
- * @param {!MessagePort} port
- */
-function closePort(port) {
-  try {
-    port.close();
-  } catch (e) {
-    // Ignore.
+  /**
+   * A 3p site should call this method to consume a Google metering entitlement.
+   * When a metering entitlement is consumed, SwG shows the user a metering dialog.
+   * When the user closes the dialog, SwG depletes one of the user's remaining
+   * "free reads".
+   * @param {?Function=} onCloseDialog Called after the user closes the dialog.
+   */
+  consume(onCloseDialog) {
+    this.consumeHandler_(this, onCloseDialog);
   }
 }
 
-
-
-
 /**
- * The `ActivityPort` implementation for the iframe case. Unlike other types
- * of activities, iframe-based activities are always connected and can react
- * to size requests.
- *
- * @implements {ActivityPort}
- * @implements {ActivityMessagingPort}
+ * The single entitlement object.
  */
-class ActivityIframePort {
-
+class Entitlement {
   /**
-   * @param {!HTMLIFrameElement} iframe
-   * @param {string} url
-   * @param {?Object=} opt_args
+   * @param {string} source
+   * @param {!Array<string>} products
+   * @param {string} subscriptionToken
    */
-  constructor(iframe, url, opt_args) {
-    /** @private @const {!HTMLIFrameElement} */
-    this.iframe_ = iframe;
-    /** @private @const {string} */
-    this.url_ = url;
-    /** @private @const {?Object} */
-    this.args_ = opt_args || null;
-
-    /** @private @const {!Window} */
-    this.win_ = /** @type {!Window} */ (this.iframe_.ownerDocument.defaultView);
-
-    /** @private @const {string} */
-    this.targetOrigin_ = getOriginFromUrl(url);
-
-    /** @private {boolean} */
-    this.connected_ = false;
-
-    /** @private {?function()} */
-    this.connectedResolver_ = null;
-
-    /** @private @const {!Promise} */
-    this.connectedPromise_ = new Promise(resolve => {
-      this.connectedResolver_ = resolve;
-    });
-
-    /** @private {?function()} */
-    this.readyResolver_ = null;
-
-    /** @private @const {!Promise} */
-    this.readyPromise_ = new Promise(resolve => {
-      this.readyResolver_ = resolve;
-    });
-
-    /** @private {?function((!ActivityResult|!Promise))} */
-    this.resultResolver_ = null;
-
-    /** @private @const {!Promise<!ActivityResult>} */
-    this.resultPromise_ = new Promise(resolve => {
-      this.resultResolver_ = resolve;
-    });
-
-    /** @private {?function(number)} */
-    this.onResizeRequest_ = null;
-
-    /** @private {?number} */
-    this.requestedHeight_ = null;
-
-    /** @private @const {!Messenger} */
-    this.messenger_ = new Messenger(
-        this.win_,
-        () => this.iframe_.contentWindow,
-        this.targetOrigin_,
-        /* requireTarget */ true);
-  }
-
-  /** @override */
-  getMode() {
-    return ActivityMode.IFRAME;
+  constructor(source, products, subscriptionToken) {
+    /** @const {string} */
+    this.source = source;
+    /** @const {!Array<string>} */
+    this.products = products;
+    /** @const {string} */
+    this.subscriptionToken = subscriptionToken;
   }
 
   /**
-   * Waits until the activity port is connected to the host.
-   * @return {!Promise}
+   * @return {!Entitlement}
    */
-  connect() {
-    if (!isNodeConnected(this.iframe_)) {
-      throw new Error('iframe must be in DOM');
-    }
-    this.messenger_.connect(this.handleCommand_.bind(this));
-    this.iframe_.src = this.url_;
-    return this.connectedPromise_;
+  clone() {
+    return new Entitlement(
+      this.source,
+      this.products.slice(0),
+      this.subscriptionToken
+    );
   }
 
   /**
-   * Disconnect the activity binding and cleanup listeners.
+   * @return {!Object}
    */
-  disconnect() {
-    this.connected_ = false;
-    this.messenger_.disconnect();
-  }
-
-  /** @override */
-  acceptResult() {
-    return this.resultPromise_;
-  }
-
-  /** @override */
-  getTargetWin() {
-    return this.iframe_.contentWindow || null;
-  }
-
-  /** @override */
-  message(payload) {
-    this.messenger_.customMessage(payload);
-  }
-
-  /** @override */
-  onMessage(callback) {
-    this.messenger_.onCustomMessage(callback);
-  }
-
-  /** @override */
-  messageChannel(opt_name) {
-    return this.messenger_.askChannel(opt_name);
+  json() {
+    return {
+      'source': this.source,
+      'products': this.products,
+      'subscriptionToken': this.subscriptionToken,
+    };
   }
 
   /**
-   * Returns a promise that yields when the iframe is ready to be interacted
-   * with.
-   * @return {!Promise}
+   * @param {?string} product
+   * @return {boolean}
    */
-  whenReady() {
-    return this.readyPromise_;
+  enables(product) {
+    if (!product) {
+      return false;
+    }
+    // Wildcard allows this product.
+    const eq = product.indexOf(':');
+    if (
+      eq != -1 &&
+      this.products.includes(product.substring(0, eq + 1) + '*')
+    ) {
+      return true;
+    }
+    return this.products.includes(product);
   }
 
   /**
-   * Register a callback to handle resize requests. Once successfully resized,
-   * ensure to call `resized()` method.
-   * @param {function(number)} callback
+   * @param {?Object} json
+   * @return {!Entitlement}
    */
-  onResizeRequest(callback) {
-    this.onResizeRequest_ = callback;
-    Promise.resolve().then(() => {
-      if (this.requestedHeight_ != null) {
-        callback(this.requestedHeight_);
-      }
-    });
+  static parseFromJson(json) {
+    if (!json) {
+      json = {};
+    }
+    const source = json['source'] || '';
+    const products = json['products'] || [];
+    const subscriptionToken = json['subscriptionToken'];
+    return new Entitlement(source, products, subscriptionToken);
   }
 
   /**
-   * Signals back to the activity implementation that the client has updated
-   * the activity's size.
+   * The JSON is expected in one of the forms:
+   * - Single entitlement: `{products: [], ...}`.
+   * - A list of entitlements: `[{products: [], ...}, {...}]`.
+   * @param {!Object|!Array<!Object>} json
+   * @return {!Array<!Entitlement>}
    */
-  resized() {
-    if (!this.connected_) {
-      return;
-    }
-    const height = this.iframe_.offsetHeight;
-    this.messenger_.sendCommand('resized', {'height': height});
+  static parseListFromJson(json) {
+    const jsonList = Array.isArray(json)
+      ? /** @type {!Array<Object>} */ (json)
+      : [json];
+    return jsonList.map((json) => Entitlement.parseFromJson(json));
   }
 
   /**
-   * @param {string} cmd
-   * @param {?Object} payload
-   * @private
+   * Returns the SKU associated with this entitlement.
+   * @return {?string}
    */
-  handleCommand_(cmd, payload) {
-    if (cmd == 'connect') {
-      // First ever message. Indicates that the receiver is listening.
-      this.connected_ = true;
-      this.messenger_.sendStartCommand(this.args_);
-      this.connectedResolver_();
-    } else if (cmd == 'result') {
-      // The last message. Indicates that the result has been received.
-      if (this.resultResolver_) {
-        const code = /** @type {!ActivityResultCode} */ (payload['code']);
-        const data =
-            code == ActivityResultCode.FAILED ?
-            new Error(payload['data'] || '') :
-            payload['data'];
-        const result = new ActivityResult(
-            code,
-            data,
-            ActivityMode.IFRAME,
-            this.messenger_.getTargetOrigin(),
-            /* originVerified */ true,
-            /* secureChannel */ true);
-        resolveResult(this.win_, result, this.resultResolver_);
-        this.resultResolver_ = null;
-        this.messenger_.sendCommand('close');
-        this.disconnect();
-      }
-    } else if (cmd == 'ready') {
-      if (this.readyResolver_) {
-        this.readyResolver_();
-        this.readyResolver_ = null;
-      }
-    } else if (cmd == 'resize') {
-      this.requestedHeight_ = /** @type {number} */ (payload['height']);
-      if (this.onResizeRequest_) {
-        this.onResizeRequest_(this.requestedHeight_);
-      }
+  getSku() {
+    if (this.source !== 'google') {
+      return null;
+    }
+    const sku = /** @type {?string} */ (getPropertyFromJsonString(
+      this.subscriptionToken,
+      'productId'
+    ) || null);
+    if (!sku) {
+      warn('Unable to retrieve SKU from SwG subscription token');
     }
+    return sku;
   }
 }
 
-
-
-
 /**
- * The `ActivityPort` implementation for the standalone window activity
- * client executed as a popup.
+ * Copyright 2018 The Subscribe with Google 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
  *
- * @implements {ActivityPort}
- * @implements {ActivityMessagingPort}
+ * 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.
  */
-class ActivityWindowPort {
 
+/**
+ */
+class UserData {
   /**
-   * @param {!Window} win
-   * @param {string} requestId
-   * @param {string} url
-   * @param {string} target
-   * @param {?Object=} opt_args
-   * @param {?ActivityOpenOptions=} opt_options
+   * @param {string} idToken
+   * @param {!Object} data
    */
-  constructor(win, requestId, url, target, opt_args, opt_options) {
-    const isValidTarget =
-        target &&
-        (target == '_blank' || target == '_top' || target[0] != '_');
-    if (!isValidTarget) {
-      throw new Error('The only allowed targets are "_blank", "_top"' +
-          ' and name targets');
-    }
-
-    /** @private @const {!Window} */
-    this.win_ = win;
-    /** @private @const {string} */
-    this.requestId_ = requestId;
-    /** @private @const {string} */
-    this.url_ = url;
-    /** @private @const {string} */
-    this.openTarget_ = target;
-    /** @private @const {?Object} */
-    this.args_ = opt_args || null;
-    /** @private @const {!ActivityOpenOptions} */
-    this.options_ = opt_options || {};
-
-    /** @private {?function()} */
-    this.connectedResolver_ = null;
-
-    /** @private @const {!Promise} */
-    this.connectedPromise_ = new Promise(resolve => {
-      this.connectedResolver_ = resolve;
-    });
-
-    /** @private {?function((!ActivityResult|!Promise))} */
-    this.resultResolver_ = null;
-
-    /** @private @const {!Promise<!ActivityResult>} */
-    this.resultPromise_ = new Promise(resolve => {
-      this.resultResolver_ = resolve;
-    });
-
-    /** @private {?Window} */
-    this.targetWin_ = null;
-
-    /** @private {?number} */
-    this.heartbeatInterval_ = null;
-
-    /** @private {?Messenger} */
-    this.messenger_ = null;
-  }
+  constructor(idToken, data) {
+    /** @const {string} */
+    this.idToken = idToken;
+    /** @const {!Object} */
+    this.data = data;
 
-  /** @override */
-  getMode() {
-    return this.openTarget_ == '_top' ?
-        ActivityMode.REDIRECT :
-        ActivityMode.POPUP;
+    /** @const {string} */
+    this.id = data['sub'];
+    /** @const {string} */
+    this.email = data['email'];
+    /** @const {boolean} */
+    this.emailVerified = data['email_verified'];
+    /** @const {string} */
+    this.name = data['name'];
+    /** @const {string} */
+    this.givenName = data['given_name'];
+    /** @const {string} */
+    this.familyName = data['family_name'];
+    /** @const {string} */
+    this.pictureUrl = data['picture'];
   }
 
   /**
-   * Opens the activity in a window, either as a popup or via redirect.
-   *
-   * Returns the promise that will yield when the window returns or closed.
-   * Notice, that this promise may never complete if "redirect" mode was used.
-   *
-   * @return {!Promise}
+   * @return {!UserData}
    */
-  open() {
-    return this.openInternal_();
+  clone() {
+    return new UserData(this.idToken, this.data);
   }
 
   /**
-   * Waits until the activity port is connected to the host.
-   * @return {!Promise}
+   * @return {!Object}
    */
-  whenConnected() {
-    return this.connectedPromise_;
+  json() {
+    return {
+      'id': this.id,
+      'email': this.email,
+      'emailVerified': this.emailVerified,
+      'name': this.name,
+      'givenName': this.givenName,
+      'familyName': this.familyName,
+      'pictureUrl': this.pictureUrl,
+    };
   }
+}
+
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
 
+/**
+ */
+class SubscribeResponse {
   /**
-   * Disconnect the activity binding and cleanup listeners.
+   * @param {string} raw
+   * @param {!PurchaseData} purchaseData
+   * @param {?UserDataDef} userData
+   * @param {?EntitlementsDef} entitlements
+   * @param {!string} productType
+   * @param {function():!Promise} completeHandler
+   * @param {?string=} oldSku
+   * @param {?string=} swgUserToken
+   * @param {?number=} paymentRecurrence
    */
-  disconnect() {
-    if (this.heartbeatInterval_) {
-      this.win_.clearInterval(this.heartbeatInterval_);
-      this.heartbeatInterval_ = null;
-    }
-    if (this.messenger_) {
-      this.messenger_.disconnect();
-      this.messenger_ = null;
-    }
-    if (this.targetWin_) {
-      // Try to close the popup window. The host will also try to do the same.
-      try {
-        this.targetWin_.close();
-      } catch (e) {
-        // Ignore.
-      }
-      this.targetWin_ = null;
-    }
-    this.resultResolver_ = null;
-  }
-
-  /** @override */
-  getTargetWin() {
-    return this.targetWin_;
-  }
-
-  /** @override */
-  acceptResult() {
-    return this.resultPromise_;
+  constructor(
+    raw,
+    purchaseData,
+    userData,
+    entitlements,
+    productType,
+    completeHandler,
+    oldSku = null,
+    swgUserToken = null,
+    paymentRecurrence = null
+  ) {
+    /** @const {string} */
+    this.raw = raw;
+    /** @const {!PurchaseData} */
+    this.purchaseData = purchaseData;
+    /** @const {?UserDataDef} */
+    this.userData = userData;
+    /** @const {?EntitlementsDef} */
+    this.entitlements = entitlements;
+    /** @const {string} */
+    this.productType = productType;
+    /** @private @const {function():!Promise} */
+    this.completeHandler_ = completeHandler;
+    /** @const {?string} */
+    this.oldSku = oldSku;
+    /** @const {?string} */
+    this.swgUserToken = swgUserToken;
+    /** @const {?number} */
+    this.paymentRecurrence = paymentRecurrence;
   }
 
   /**
-   * Sends a message to the host.
-   * Whether the host can or cannot receive a message depends on the type of
-   * host and its state. Ensure that the code has an alternative path if
-   * messaging is not available.
-   * @override
+   * @return {!SubscribeResponse}
    */
-  message(payload) {
-    this.messenger_.customMessage(payload);
+  clone() {
+    return new SubscribeResponse(
+      this.raw,
+      this.purchaseData,
+      this.userData,
+      this.entitlements,
+      this.productType,
+      this.completeHandler_,
+      this.oldSku,
+      this.swgUserToken
+    );
   }
 
   /**
-   * Registers a callback to receive messages from the host.
-   * Whether the host can or cannot receive a message depends on the type of
-   * host and its state. Ensure that the code has an alternative path if
-   * messaging is not available.
-   * @override
+   * @return {!Object}
    */
-  onMessage(callback) {
-    this.messenger_.onCustomMessage(callback);
+  json() {
+    return {
+      'purchaseData': this.purchaseData.json(),
+      'userData': this.userData ? this.userData.json() : null,
+      'entitlements': this.entitlements ? this.entitlements.json() : null,
+      'oldSku': this.oldSku,
+      'productType': this.productType,
+      'swgUserToken': this.swgUserToken,
+    };
   }
 
   /**
-   * Creates a new communication channel or returns an existing one.
-   * Whether the host can or cannot receive a message depends on the type of
-   * host and its state. Ensure that the code has an alternative path if
-   * messaging is not available.
-   * @override
+   * Allows the receiving site to complete/acknowledge that it registered
+   * the subscription purchase. The typical action would be to create an
+   * account (or match an existing one) and associated the purchase with
+   * that account.
+   *
+   * SwG will display progress indicator until this method is called and
+   * upon receiving this call will show the confirmation to the user.
+   * The promise returned by this method will yield once the user closes
+   * the confirmation.
+   *
+   * @return {!Promise}
    */
-  messageChannel(opt_name) {
-    return this.messenger_.askChannel(opt_name);
+  complete() {
+    return this.completeHandler_();
   }
+}
 
+/**
+ */
+class PurchaseData {
   /**
-   * This method wraps around window's open method. It first tries to execute
-   * `open` call with the provided target and if it fails, it retries the call
-   * with the `_top` target. This is necessary given that in some embedding
-   * scenarios, such as iOS' WKWebView, navigation to `_blank` and other targets
-   * is blocked by default.
-   * @return {!Promise}
-   * @private
+   * @param {string} raw
+   * @param {string} signature
    */
-  openInternal_() {
-    const featuresStr = this.buildFeatures_();
-
-    // Protectively, the URL will contain the request payload, unless explicitly
-    // directed not to via `skipRequestInUrl` option.
-    let url = this.url_;
-    if (!this.options_.skipRequestInUrl) {
-      const returnUrl =
-          this.options_.returnUrl ||
-          removeFragment(this.win_.location.href);
-      const requestString = serializeRequest({
-        requestId: this.requestId_,
-        returnUrl,
-        args: this.args_,
-      });
-      url = addFragmentParam(url, '__WA__', requestString);
-    }
-
-    // Open the window.
-    let targetWin;
-    let openTarget = this.openTarget_;
-    // IE does not support CORS popups - the popup has to fallback to redirect
-    // mode.
-    if (openTarget != '_top') {
-      if (isIeBrowser(this.win_)) {
-        openTarget = '_top';
-      }
-    }
-    // Try first with the specified target. If we're inside the WKWebView or
-    // a similar environments, this method is expected to fail by default for
-    // all targets except `_top`.
-    try {
-      targetWin = this.win_.open(url, openTarget, featuresStr);
-    } catch (e) {
-      // Ignore.
-    }
-    // Then try with `_top` target.
-    if (!targetWin &&
-        openTarget != '_top' &&
-        !this.options_.disableRedirectFallback) {
-      openTarget = '_top';
-      try {
-        targetWin = this.win_.open(url, openTarget);
-      } catch (e) {
-        // Ignore.
-      }
-    }
-
-    // Setup the target window.
-    if (targetWin) {
-      this.targetWin_ = targetWin;
-      if (openTarget != '_top') {
-        this.setupPopup_();
-      }
-    } else {
-      this.disconnectWithError_(new Error('failed to open window'));
-    }
-
-    // Return result promise, even though it may never complete.
-    return this.resultPromise_.catch(() => {
-      // Ignore. Call to the `acceptResult()` should fail if needed.
-    });
+  constructor(raw, signature) {
+    /** @const {string} */
+    this.raw = raw;
+    /** @const {string} */
+    this.data = raw;
+    /** @const {string} */
+    this.signature = signature;
   }
 
   /**
-   * @return {string}
-   * @private
+   * @return {!PurchaseData}
    */
-  buildFeatures_() {
-    // The max width and heights are calculated as following:
-    // MaxSize = AvailSize - ControlsSize
-    // ControlsSize = OuterSize - InnerSize
-    const screen = this.win_.screen;
-    const availWidth = screen.availWidth || screen.width;
-    const availHeight = screen.availHeight || screen.height;
-    const isTop = this.isTopWindow_();
-    const isEdge = isEdgeBrowser(this.win_);
-    // Limit controls to 100px width and height. Notice that it's only
-    // possible to calculate controls size in the top window, not in iframes.
-    // Notice that the Edge behavior is somewhat unique. If we can't find the
-    // right width/height, it will launch in the full-screen. Other browsers
-    // deal with such cases more gracefully.
-    const controlsWidth =
-        isTop && this.win_.outerWidth > this.win_.innerWidth ?
-        Math.min(100, this.win_.outerWidth - this.win_.innerWidth) :
-        (isEdge ? 100 : 0);
-    const controlsHeight =
-        isTop && this.win_.outerHeight > this.win_.innerHeight ?
-        Math.min(100, this.win_.outerHeight - this.win_.innerHeight) :
-        (isEdge ? 100 : 0);
-    // With all the adjustments, at least 50% of the available width/height
-    // should be made available to a popup.
-    const maxWidth = Math.max(availWidth - controlsWidth, availWidth * 0.5);
-    const maxHeight = Math.max(availHeight - controlsHeight, availHeight * 0.5);
-    let w = Math.floor(Math.min(600, maxWidth * 0.9));
-    let h = Math.floor(Math.min(600, maxHeight * 0.9));
-    if (this.options_.width) {
-      w = Math.min(this.options_.width, maxWidth);
-    }
-    if (this.options_.height) {
-      h = Math.min(this.options_.height, maxHeight);
-    }
-    const x = Math.floor((screen.width - w) / 2);
-    const y = Math.floor((screen.height - h) / 2);
-    const features = {
-      'height': h,
-      'width': w,
-      'resizable': 'yes',
-      'scrollbars': 'yes',
-    };
-    // Do not set left/top in Edge: it fails.
-    if (!isEdge) {
-      features['left'] = x;
-      features['top'] = y;
-    }
-    let featuresStr = '';
-    for (const f in features) {
-      if (featuresStr) {
-        featuresStr += ',';
-      }
-      featuresStr += `${f}=${features[f]}`;
-    }
-    return featuresStr;
+  clone() {
+    return new PurchaseData(this.raw, this.signature);
   }
 
   /**
-   * This method only exists to make iframe/top emulation possible in tests.
-   * Otherwise `window.top` cannot be overridden.
-   * @return {boolean}
-   * @private
+   * @return {!Object}
    */
-  isTopWindow_() {
-    return this.win_ == this.win_.top;
+  json() {
+    return {
+      'data': this.raw,
+      'signature': this.signature,
+    };
   }
+}
 
-  /** @private */
-  setupPopup_() {
-    // Keep alive to catch the window closing, which would indicate
-    // "cancel" signal.
-    this.heartbeatInterval_ = this.win_.setInterval(() => {
-      this.check_(/* delayCancel */ true);
-    }, 500);
-
-    // Start up messaging. The messaging is explicitly allowed to proceed
-    // without origin check b/c all arguments have already been passed in
-    // the URL and special handling is enforced when result is delivered.
-    this.messenger_ = new Messenger(
-        this.win_,
-        /** @type {!Window} */ (this.targetWin_),
-        /* targetOrigin */ null,
-        /* requireTarget */ true);
-    this.messenger_.connect(this.handleCommand_.bind(this));
-  }
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
 
+/**
+ */
+class DeferredAccountCreationResponse {
   /**
-   * @param {boolean=} opt_delayCancel
-   * @private
+   * @param {!EntitlementsDef} entitlements
+   * @param {!UserDataDef} userData
+   * @param {!Array<!PurchaseDataDef>} purchaseDataList
+   * @param {function():!Promise} completeHandler
    */
-  check_(opt_delayCancel) {
-    if (!this.targetWin_ || this.targetWin_.closed) {
-      if (this.heartbeatInterval_) {
-        this.win_.clearInterval(this.heartbeatInterval_);
-        this.heartbeatInterval_ = null;
-      }
-      // Give a chance for the result to arrive, but otherwise consider the
-      // responce to be empty.
-      this.win_.setTimeout(() => {
-        try {
-          this.result_(ActivityResultCode.CANCELED, /* data */ null);
-        } catch (e) {
-          this.disconnectWithError_(e);
-        }
-      }, opt_delayCancel ? 3000 : 0);
-    }
+  constructor(entitlements, userData, purchaseDataList, completeHandler) {
+    /** @const {!EntitlementsDef} */
+    this.entitlements = entitlements;
+    /** @const {!UserDataDef} */
+    this.userData = userData;
+    /** @const {!Array<!PurchaseDataDef>} */
+    this.purchaseDataList = purchaseDataList;
+    // TODO(dvoytenko): deprecate.
+    /** @const {!PurchaseDataDef} */
+    this.purchaseData = purchaseDataList[0];
+    /** @private @const {function():!Promise} */
+    this.completeHandler_ = completeHandler;
   }
 
   /**
-   * @param {!Error} reason
-   * @private
+   * @return {!DeferredAccountCreationResponse}
    */
-  disconnectWithError_(reason) {
-    if (this.resultResolver_) {
-      this.resultResolver_(Promise.reject(reason));
-    }
-    this.disconnect();
+  clone() {
+    return new DeferredAccountCreationResponse(
+      this.entitlements,
+      this.userData,
+      this.purchaseDataList,
+      this.completeHandler_
+    );
   }
 
   /**
-   * @param {!ActivityResultCode} code
-   * @param {*} data
-   * @private
+   * @return {!Object}
    */
-  result_(code, data) {
-    if (this.resultResolver_) {
-      const isConnected = this.messenger_.isConnected();
-      const result = new ActivityResult(
-          code,
-          data,
-          ActivityMode.POPUP,
-          isConnected ?
-              this.messenger_.getTargetOrigin() :
-              getOriginFromUrl(this.url_),
-          /* originVerified */ isConnected,
-          /* secureChannel */ isConnected);
-      resolveResult(this.win_, result, this.resultResolver_);
-      this.resultResolver_ = null;
-    }
-    if (this.messenger_) {
-      this.messenger_.sendCommand('close');
-    }
-    this.disconnect();
+  json() {
+    return {
+      'entitlements': this.entitlements.json(),
+      'userData': this.userData.json(),
+      'purchaseDataList': this.purchaseDataList.map((pd) => pd.json()),
+      // TODO(dvoytenko): deprecate.
+      'purchaseData': this.purchaseData.json(),
+    };
   }
 
   /**
-   * @param {string} cmd
-   * @param {?Object} payload
-   * @private
+   * Allows the receiving site to complete/acknowledge that it registered
+   * the subscription info. The typical action would be to create an
+   * account (or match an existing one) and associated the subscription with
+   * that account.
+   *
+   * SwG will display progress indicator until this method is called and
+   * upon receiving this call will show the confirmation to the user.
+   * The promise returned by this method will yield once the user closes
+   * the confirmation.
+   *
+   * @return {!Promise}
    */
-  handleCommand_(cmd, payload) {
-    if (cmd == 'connect') {
-      // First ever message. Indicates that the receiver is listening.
-      this.messenger_.sendStartCommand(this.args_);
-      this.connectedResolver_();
-    } else if (cmd == 'result') {
-      // The last message. Indicates that the result has been received.
-      const code = /** @type {!ActivityResultCode} */ (payload['code']);
-      const data =
-          code == ActivityResultCode.FAILED ?
-          new Error(payload['data'] || '') :
-          payload['data'];
-      this.result_(code, data);
-    } else if (cmd == 'check') {
-      this.win_.setTimeout(() => this.check_(), 200);
-    }
-  }
-}
-
-
-/**
- * @param {!Window} win
- * @param {string} fragment
- * @param {string} requestId
- * @return {?ActivityPort}
- */
-function discoverRedirectPort(win, fragment, requestId) {
-  // Try to find the result in the fragment.
-  const paramName = '__WA_RES__';
-  const fragmentParam = getQueryParam(fragment, paramName);
-  if (!fragmentParam) {
-    return null;
-  }
-  const response = /** @type {?Object} */ (JSON.parse(fragmentParam));
-  if (!response || response['requestId'] != requestId) {
-    return null;
-  }
-
-  // Remove the found param from the fragment.
-  const cleanFragment = removeQueryParam(win.location.hash, paramName) || '';
-  if (cleanFragment != win.location.hash) {
-    if (win.history && win.history.replaceState) {
-      try {
-        win.history.replaceState(win.history.state, '', cleanFragment);
-      } catch (e) {
-        // Ignore.
-      }
-    }
+  complete() {
+    return this.completeHandler_();
   }
-
-  const code = response['code'];
-  const data = response['data'];
-  const origin = response['origin'];
-  const referrerOrigin = win.document.referrer &&
-      getOriginFromUrl(win.document.referrer);
-  const originVerified = origin == referrerOrigin;
-  return new ActivityWindowRedirectPort(
-      win,
-      code,
-      data,
-      origin,
-      originVerified);
 }
 
-
 /**
- * The `ActivityPort` implementation for the standalone window activity
- * client executed as a popup.
+ * Copyright 2019 The Subscribe with Google 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
  *
- * @implements {ActivityPort}
+ * 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.
  */
-class ActivityWindowRedirectPort {
-
-  /**
-   * @param {!Window} win
-   * @param {!ActivityResultCode} code
-   * @param {*} data
-   * @param {string} targetOrigin
-   * @param {boolean} targetOriginVerified
-   */
-  constructor(win, code, data, targetOrigin, targetOriginVerified) {
-    /** @private @const {!Window} */
-    this.win_ = win;
-    /** @private @const {!ActivityResultCode} */
-    this.code_ = code;
-    /** @private @const {*} */
-    this.data_ = data;
-    /** @private {string} */
-    this.targetOrigin_ = targetOrigin;
-    /** @private {boolean} */
-    this.targetOriginVerified_ = targetOriginVerified;
-  }
-
-  /** @override */
-  getMode() {
-    return ActivityMode.REDIRECT;
-  }
-
-  /** @override */
-  acceptResult() {
-    const result = new ActivityResult(
-        this.code_,
-        this.data_,
-        ActivityMode.REDIRECT,
-        this.targetOrigin_,
-        this.targetOriginVerified_,
-        /* secureChannel */ false);
-    return new Promise(resolve => {
-      resolveResult(this.win_, result, resolve);
-    });
-  }
-}
-
-
-
 
 /**
- * The page-level activities manager ports. This class is intended to be used
- * as a singleton. It can start activities of all modes: iframe, popup, and
- * redirect.
+ * @enum {string}
  */
-class ActivityPorts {
+const SubscriptionState = {
+  // user's subscription state not known.
+  UNKNOWN: 'unknown',
+  // user is not a subscriber.
+  NON_SUBSCRIBER: 'non_subscriber',
+  // user is a subscriber.
+  SUBSCRIBER: 'subscriber',
+  // user's subscription has expired.
+  PAST_SUBSCRIBER: 'past_subscriber',
+};
 
+/**
+ * Subscription related events. Listed below are enum strings that
+ * represent events related to Subscription flow. Event parameters
+ * that provide more context about the event are sent as a JSON
+ * block of depth 1 in the sendEvent() API call.
+ * @enum {string}
+ */
+const Event = {
   /**
-   * @param {!Window} win
+   * IMPRESSION_PAYWALL event.
+   * User hits a paywall.
+   * Every impression should be qualified as active or passive.
+   * The field 'active' of PropensityEvent, which carries this
+   * event, must be set to true or false to indicate this.
+   * If the user has run out of metering, and that’s why was shown
+   * a paywall, that would be a passive impression of the paywall.
+   * For example:
+   * const propensityEvent = {
+   *  name: 'paywall',
+   *  active: false,
+   * }
    */
-  constructor(win) {
-    /** @const {string} */
-    this.version = '1.24';
-
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private @const {string} */
-    this.fragment_ = win.location.hash;
-
-    /**
-     * @private @const {!Object<string, !Array<function(!ActivityPort)>>}
-     */
-    this.requestHandlers_ = {};
-
-    /**
-     * The result buffer is indexed by `requestId`.
-     * @private @const {!Object<string, !ActivityPort>}
-     */
-    this.resultBuffer_ = {};
-
-    /** @private {?function(!Error)} */
-    this.redirectErrorResolver_ = null;
-
-    /** @private {!Promise<!Error>} */
-    this.redirectErrorPromise_ = new Promise(resolve => {
-      this.redirectErrorResolver_ = resolve;
-    });
-  }
-
+  IMPRESSION_PAYWALL: 'paywall',
   /**
-   * Start an activity within the specified iframe.
-   * @param {!HTMLIFrameElement} iframe
-   * @param {string} url
-   * @param {?Object=} opt_args
-   * @return {!Promise<!ActivityIframePort>}
-   */
-  openIframe(iframe, url, opt_args) {
-    const port = new ActivityIframePort(iframe, url, opt_args);
-    return port.connect().then(() => port);
-  }
-
-  /**
-   * Start an activity in a separate window. The result will be delivered
-   * to the `onResult` callback.
-   *
-   * The activity can be opened in two modes: "popup" and "redirect". This
-   * depends on the `target` value, but also on the browser/environment.
-   *
-   * The allowed `target` values are `_blank`, `_top` and name targets. The
-   * `_self`, `_parent` and similar targets are not allowed.
-   *
-   * The `_top` target indicates that the activity should be opened as a
-   * "redirect", while other targets indicate that the activity should be
-   * opened as a popup. The activity client will try to honor the requested
-   * target. However, it's not always possible. Some environments do not
-   * allow popups and they either force redirect or fail the window open
-   * request. In this case, the activity will try to fallback to the "redirect"
-   * mode.
-   *
-   * @param {string} requestId
-   * @param {string} url
-   * @param {string} target
-   * @param {?Object=} opt_args
-   * @param {?ActivityOpenOptions=} opt_options
-   * @return {{targetWin: ?Window}}
+   * IMPRESSION_AD event.
+   * User has been shown a subscription ad.
+   * Every impression should be qualified as active or passive.
+   * The field 'active' of PropensityEvent, which carries this
+   * event, must be set to true or false to indicate this.
+   * The JSON block can provide the name of the subscription ad
+   * creative or campaign. Ad impressions are usually passive.
+   * const propensityEvent = {
+   *   name: 'ad_shown',
+   *   active: false,
+   *   data: {'ad_name': 'fall_ad'}
+   * }
    */
-  open(requestId, url, target, opt_args, opt_options) {
-    const port = this.openWin_(requestId, url, target, opt_args, opt_options);
-    return {targetWin: port.getTargetWin()};
-  }
-
+  IMPRESSION_AD: 'ad_shown',
   /**
-   * Start an activity in a separate window and tries to setup messaging with
-   * this window.
-   *
-   * See `open()` method for more details, including `onResult` callback.
-   *
-   * @param {string} requestId
-   * @param {string} url
-   * @param {string} target
-   * @param {?Object=} opt_args
-   * @param {?ActivityOpenOptions=} opt_options
-   * @return {!Promise<!ActivityMessagingPort>}
+   * IMPRESSION_OFFERS event.
+   * User has been shown a list of available offers for subscription.
+   * Every impression should be qualified as active or passive.
+   * The field 'active' of PropensityEvent, which carries this
+   * event, must be set to true or false to indicate this.
+   * The JSON block can provide a list of products displayed,
+   * and the source to indicate why the user was shown the offer.
+   * Note: source is not the same as referrer.
+   * In the cases below, the user took action before seeing the offers,
+   * and therefore considered active impression.
+   * For example:
+   * const propensityEvent = {
+   *   name: 'offers_shown',
+   *   active: true,
+   *   data: {'offers': ['basic-monthly', 'premium-weekly'],
+   *           'source': 'ad-click'}
+   * }
+   * For example:
+   * const propensityEvent = {
+   *   name: 'offers_shown',
+   *   active: true,
+   *   data: {'offers': ['basic-monthly', 'premium-weekly'],
+   *           'source': ‘navigate-to-offers-page’}
+   * }
+   * If the user was shown the offers as a result of paywall metering
+   * expiration, it is considered a passive impression.
+   * For example:
+   * const propensityEvent = {
+   *   name: 'offers_shown',
+   *   active: false,
+   *   data: {'offers': ['basic-monthly', 'premium-weekly'],
+   *           'source': ‘paywall-metering-expired’}
+   * }
    */
-  openWithMessaging(requestId, url, target, opt_args, opt_options) {
-    const port = this.openWin_(requestId, url, target, opt_args, opt_options);
-    return port.whenConnected().then(() => port);
-  }
-
+  IMPRESSION_OFFERS: 'offers_shown',
   /**
-   * Registers the callback for the result of the activity opened with the
-   * specified `requestId` (see the `open()` method). The callback is a
-   * function that takes a single `ActivityPort` argument. The client
-   * can use this object to verify the port using it's origin, verified and
-   * secure channel flags. Then the client can call
-   * `ActivityPort.acceptResult()` method to accept the result.
-   *
-   * The activity result is handled via a separate callback because of a
-   * possible redirect. So use of direct callbacks and/or promises is not
-   * possible in that case.
-   *
-   * A typical implementation would look like:
-   * ```
-   * ports.onResult('request1', function(port) {
-   *   port.acceptResult().then(function(result) {
-   *     // Only verified origins are allowed.
-   *     if (result.origin == expectedOrigin &&
-   *         result.originVerified &&
-   *         result.secureChannel) {
-   *       handleResultForRequest1(result);
-   *     }
-   *   });
-   * })
-   *
-   * ports.open('request1', request1Url, '_blank');
-   * ```
-   *
-   * @param {string} requestId
-   * @param {function(!ActivityPort)} callback
+   * ACTION_SUBSCRIPTIONS_LANDING_PAGE event.
+   * User has taken the action to arrive at a landing page of the
+   * subscription workflow. The landing page should satisfy one of
+   * the following conditions and hence be a part of the funnel to
+   * get the user to subscribe:
+   * - have a button to navigate the user to an offers page, (in
+   *   this case, the next event will be IMPRESSION_OFFERS, with
+   *   parameter 'source' as subscriptions-landing-page and
+   *   'is_active' set to true),
+   * - show offers the user can select, (in this case, the next
+   *   event will be IMPRESSION_OFFERS, with a parameter 'source'
+   *   as navigate-to-offers-page and 'is_active' set to true),
+   * - provide a way to start the payment flow for a specific offer.
+   *   (in this case, the next event will be ACTION_OFFER_SELECTED
+   *   or ACTION_PAYMENT_FLOW_STARTED depending on if that button
+   *   took the user to a checkout page on the publishers site or
+   *   directly started the payment flow).
+   * The field 'active' of PropensityEvent, which carries this
+   * event, must be set to true since this is a user action.
+   * The JSON block with this event can provide additional information
+   * such as the source, indicating what caused the user to navigate
+   * to this page.
+   * For example:
+   * const propensityEvent = {
+   *   name: 'subscriptions_landing_page',
+   *   active: true,
+   *   data: {'source': 'marketing_via_email'}
+   * }
    */
-  onResult(requestId, callback) {
-    let handlers = this.requestHandlers_[requestId];
-    if (!handlers) {
-      handlers = [];
-      this.requestHandlers_[requestId] = handlers;
-    }
-    handlers.push(callback);
-
-    // Consume available result.
-    const availableResult = this.discoverResult_(requestId);
-    if (availableResult) {
-      this.consumeResult_(availableResult, callback);
-    }
-  }
-
+  ACTION_SUBSCRIPTIONS_LANDING_PAGE: 'subscriptions_landing_page',
   /**
-   * @param {function(!Error)} handler
+   * ACTION_OFFER_SELECTED event.
+   * User has selected an offer.
+   * The field 'active' of PropensityEvent, which carries this
+   * event, must be set to true since this is a user action.
+   * The JSON block can provide the product selected.
+   * For example: {
+   *   name: 'offer_selected',
+   *   active: true,
+   *   data: {product': 'basic-monthly'}
+   * }
+   * When offer selection starts the payment flow directly,
+   * use the next event ACTION_PAYMENT_FLOW_STARTED instead.
    */
-  onRedirectError(handler) {
-    this.redirectErrorPromise_.then(handler);
-  }
-
-  /**
-   * @param {string} requestId
-   * @param {string} url
-   * @param {string} target
-   * @param {?Object=} opt_args
-   * @param {?ActivityOpenOptions=} opt_options
-   * @return {!ActivityWindowPort}
-   */
-  openWin_(requestId, url, target, opt_args, opt_options) {
-    const port = new ActivityWindowPort(
-        this.win_, requestId, url, target, opt_args, opt_options);
-    port.open().then(() => {
-      // Await result if possible. Notice that when falling back to "redirect",
-      // the result will never arrive through this port.
-      this.consumeResultAll_(requestId, port);
-    });
-    return port;
-  }
-
+  ACTION_OFFER_SELECTED: 'offer_selected',
   /**
-   * @param {string} requestId
-   * @return {?ActivityPort}
-   * @private
+   * ACTION_PAYMENT_FLOW_STARTED event.
+   * User has started payment flow.
+   * The field 'active' of PropensityEvent, which carries this
+   * event, must be set to true since this is a user action.
+   * The JSON block can provide the product selected.
+   * For example:
+   * const propensityEvent = {
+   *   name: 'payment_flow_started',
+   *   active: true,
+   *   data: {product': 'basic-monthly'}
+   * }
    */
-  discoverResult_(requestId) {
-    let port = this.resultBuffer_[requestId];
-    if (!port && this.fragment_) {
-      try {
-        port = discoverRedirectPort(
-            this.win_, this.fragment_, requestId);
-      } catch (e) {
-        throwAsync(e);
-        this.redirectErrorResolver_(e);
-      }
-      if (port) {
-        this.resultBuffer_[requestId] = port;
-      }
-    }
-    return port;
-  }
-
+  ACTION_PAYMENT_FLOW_STARTED: 'payment_flow_start',
   /**
-   * @param {!ActivityPort} port
-   * @param {function(!ActivityPort)} callback
-   * @private
+   * ACTION_PAYMENT_COMPLETED.
+   * User has made the payment for a subscription.
+   * The field 'active' of PropensityEvent, which carries this
+   * event, must be set to true since this is a user action.
+   * The JSON block can provide the product user paid for.
+   * For example:
+   * const propensityEvent = {
+   *   name: 'payment_complete',
+   *   active: true,
+   *   data: {product': 'basic-monthly'}
+   * }
    */
-  consumeResult_(port, callback) {
-    Promise.resolve().then(() => {
-      callback(port);
-    });
-  }
-
+  ACTION_PAYMENT_COMPLETED: 'payment_complete',
   /**
-   * @param {string} requestId
-   * @param {!ActivityPort} port
-   * @private
+   * EVENT_CUSTOM: custom publisher event.
+   * The field 'active' of PropensityEvent, which carries this
+   * event, must be set to true or false depending on if the event
+   * was generated as a result of a user action.
+   * The JSON block can provide the event name for the custom event.
+   * For example:
+   * const propensityEvent = {
+   *   name: 'custom',
+   *   active: true,
+   *   data: {
+   *     'event_name': 'social_share',
+   *     'platform_used': 'whatsapp'
+   *   }
+   *  }
    */
-  consumeResultAll_(requestId, port) {
-    // Find and execute handlers.
-    const handlers = this.requestHandlers_[requestId];
-    if (handlers) {
-      handlers.forEach(handler => {
-        this.consumeResult_(port, handler);
-      });
-    }
-    // Buffer the result for callbacks that may arrive in the future.
-    this.resultBuffer_[requestId] = port;
-  }
-}
-
-
-
-var activityPorts = {
-  ActivityPorts,
-  ActivityIframePort,
-  ActivityMessagingPort,
-  ActivityMode,
-  ActivityOpenOptions,
-  ActivityPort,
-  ActivityRequest,
-  ActivityResult,
-  ActivityResultCode,
-  ActivityWindowPort,
-  createAbortError,
-  isAbortError,
+  EVENT_CUSTOM: 'custom',
 };
-var activityPorts_1 = activityPorts.ActivityPorts;
-var activityPorts_2 = activityPorts.ActivityIframePort;
-var activityPorts_11 = activityPorts.createAbortError;
-var activityPorts_12 = activityPorts.isAbortError;
+/* eslint-enable no-unused-vars */
 
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
@@ -4069,39 +4102,15 @@ var activityPorts_12 = activityPorts.isAbortError;
  */
 
 /**
- * Whether the specified error is an AbortError type.
- * See https://heycam.github.io/webidl/#aborterror.
- * @param {*} error
- * @return {boolean}
+ * @enum {string}
  */
-function isCancelError(error) {
-  return activityPorts_12(error);
-}
-
-/**
- * Creates or emulates a DOMException of AbortError type.
- * See https://heycam.github.io/webidl/#aborterror.
- * @param {!Window} win
- * @param {string=} message
- * @return {!DOMException}
- */
-function createCancelError(win, message) {
-  return activityPorts_11(win, message);
-}
-
-/**
- * A set of error utilities combined in a class to allow easy stubbing in tests.
- */
-class ErrorUtils {
-  /**
-   * @param {!Error} error
-   */
-  static throwAsync(error) {
-    setTimeout(() => {
-      throw error;
-    });
-  }
-}
+const PropensityType = {
+  // Propensity score for a user to subscribe to a publication.
+  GENERAL: 'general',
+  // Propensity score when blocked access to content by paywall.
+  PAYWALL: 'paywall',
+};
+/* eslint-enable no-unused-vars */
 
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
@@ -4118,209 +4127,82 @@ class ErrorUtils {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/* eslint-enable no-unused-vars */
 
-/** @const {!Object<string, string>} */
-const iframeAttributes = {
-  'frameborder': '0',
-  'scrolling': 'no',
+/** @enum {string} */
+const ShowcaseEvent = {
+  // Events indicating content could potentially be unlocked
+  EVENT_SHOWCASE_METER_OFFERED: 'EVENT_SHOWCASE_METER_OFFERED', // This event is only required if the user can choose not to use a publisher meter
+
+  // Events indicating content was unlocked
+  EVENT_SHOWCASE_UNLOCKED_BY_SUBSCRIPTION:
+    'EVENT_SHOWCASE_UNLOCKED_BY_SUBSCRIPTION', // Publisher managed subscriptions only
+  EVENT_SHOWCASE_UNLOCKED_BY_METER: 'EVENT_SHOWCASE_UNLOCKED_BY_METER', // Publisher managed meters only
+  EVENT_SHOWCASE_UNLOCKED_FREE_PAGE: 'EVENT_SHOWCASE_UNLOCKED_FREE_PAGE', // When the article is free for any reason (lead article, etc)
+
+  // Events indicating the user must take action to view content
+  EVENT_SHOWCASE_NO_ENTITLEMENTS_REGWALL:
+    'EVENT_SHOWCASE_NO_ENTITLEMENTS_REGWALL', // When the user must register (or log in) to view the article
+
+  // Events indicating the user must subscribe to view content
+  EVENT_SHOWCASE_INELIGIBLE_PAYWALL: 'EVENT_SHOWCASE_INELIGIBLE_PAYWALL', // When the user is not eligible for showcase entitlements
+  EVENT_SHOWCASE_NO_ENTITLEMENTS_PAYWALL:
+    'EVENT_SHOWCASE_NO_ENTITLEMENTS_PAYWALL', // When the user has no remaining showcase entitlements
+};
+
+/** @enum {string} */
+const SubscriptionFlows = {
+  SHOW_OFFERS: 'showOffers',
+  SHOW_SUBSCRIBE_OPTION: 'showSubscribeOption',
+  SHOW_ABBRV_OFFER: 'showAbbrvOffer',
+  SHOW_CONTRIBUTION_OPTIONS: 'showContributionOptions',
+  SUBSCRIBE: 'subscribe',
+  CONTRIBUTE: 'contribute',
+  COMPLETE_DEFERRED_ACCOUNT_CREATION: 'completeDeferredAccountCreation',
+  LINK_ACCOUNT: 'linkAccount',
+  SHOW_LOGIN_PROMPT: 'showLoginPrompt',
+  SHOW_LOGIN_NOTIFICATION: 'showLoginNotification',
+  SHOW_METER_TOAST: 'showMeterToast',
 };
 
 /**
- * Class to build and render Activity iframe view.
+ * @enum {number}
  */
-class ActivityIframeView extends View {
-  /**
-   * @param {!Window} win
-   * @param {!../components/activities.ActivityPorts} activityPorts
-   * @param {string} src
-   * @param {!Object<string, ?>=} args
-   * @param {boolean=} shouldFadeBody
-   * @param {boolean=} hasLoadingIndicator
-   */
-  constructor(
-    win,
-    activityPorts,
-    src,
-    args,
-    shouldFadeBody = false,
-    hasLoadingIndicator = false
-  ) {
-    super();
-
-    /** @private @const {!Window} */
-    this.win_ = win;
-
-    /** @private @const {!Document} */
-    this.doc_ = this.win_.document;
-
-    /** @private @const {!HTMLIFrameElement} */
-    this.iframe_ = /** @type {!HTMLIFrameElement} */ (createElement(
-      this.doc_,
-      'iframe',
-      iframeAttributes
-    ));
-
-    /** @private @const {!../components/activities.ActivityPorts} */
-    this.activityPorts_ = activityPorts;
-
-    /** @private @const {string} */
-    this.src_ = src;
-
-    /** @private @const {!Object<string, ?>} */
-    this.args_ = args || {};
-
-    /** @private @const {boolean} */
-    this.shouldFadeBody_ = shouldFadeBody;
-
-    /** @private @const {boolean} */
-    this.hasLoadingIndicator_ = hasLoadingIndicator;
-
-    /** @private {?../components/activities.ActivityIframePort} */
-    this.port_ = null;
-
-    /**
-     * @private
-     * {?function<!web-activities/activity-ports.ActivityIframePort|!Promise>}
-     */
-    this.portResolver_ = null;
-
-    /**
-     * @private @const
-     * {!Promise<!web-activities/activity-ports.ActivityIframePort>}
-     */
-    this.portPromise_ = new Promise(resolve => {
-      this.portResolver_ = resolve;
-    });
-  }
-
-  /** @override */
-  getElement() {
-    return this.iframe_;
-  }
-
-  /** @override */
-  init(dialog) {
-    return this.activityPorts_
-      .openIframe(this.iframe_, this.src_, this.args_)
-      .then(port => this.onOpenIframeResponse_(port, dialog));
-  }
-
-  /**
-   * Returns if document should fade for this view.
-   * @return {boolean}
-   */
-  shouldFadeBody() {
-    return this.shouldFadeBody_;
-  }
-
-  /**
-   * Returns if the view shows loading indicator.
-   * @return {boolean}
-   */
-  hasLoadingIndicator() {
-    return this.hasLoadingIndicator_;
-  }
-
-  /**
-   * @param {!../components/activities.ActivityIframePort} port
-   * @param {!../components/dialog.Dialog} dialog
-   * @return {!Promise}
-   */
-  onOpenIframeResponse_(port, dialog) {
-    this.port_ = port;
-    this.portResolver_(port);
-
-    this.port_.onResizeRequest(height => {
-      dialog.resizeView(this, height);
-    });
-
-    return this.port_.whenReady();
-  }
-
-  /**
-   * @return {!Promise<!../components/activities.ActivityIframePort>}
-   * @private
-   */
-  getPortPromise_() {
-    return this.portPromise_;
-  }
-
-  /**
-   * @param {!function(new: T)}  message
-   * @param {function(../proto/api_messages.Message)} callback
-   * @template T
-   */
-  on(message, callback) {
-    this.getPortPromise_().then(port => {
-      port.on(message, callback);
-    });
-  }
-
-  /**
-   * @param {!../proto/api_messages.Message} request
-   */
-  execute(request) {
-    this.getPortPromise_().then(port => {
-      port.execute(request);
-    });
-  }
-
-  /**
-   * Accepts results from the caller.
-   * @return {!Promise<!web-activities/activity-ports.ActivityResult>}
-   */
-  acceptResult() {
-    return this.getPortPromise_().then(port => port.acceptResult());
-  }
-
-  /**
-   * Accepts results from the caller and verifies origin.
-   * @param {string} requireOrigin
-   * @param {boolean} requireOriginVerified
-   * @param {boolean} requireSecureChannel
-   * @return {!Promise<!Object>}
-   */
-  acceptResultAndVerify(
-    requireOrigin,
-    requireOriginVerified,
-    requireSecureChannel
-  ) {
-    return this.getPortPromise_().then(port => {
-      return acceptPortResultData(
-        port,
-        requireOrigin,
-        requireOriginVerified,
-        requireSecureChannel
-      );
-    });
-  }
+const AnalyticsMode = {
+  DEFAULT: 0,
+  IMPRESSIONS: 1,
+};
 
-  /**
-   * Completes the flow.
-   * @return {!Promise}
-   */
-  whenComplete() {
-    return this.acceptResult();
-  }
+/**
+ * @enum {string}
+ */
+const WindowOpenMode = {
+  AUTO: 'auto',
+  REDIRECT: 'redirect',
+};
 
-  /**
-   * @param {function()} callback
-   */
-  onCancel(callback) {
-    this.acceptResult().catch(reason => {
-      if (isCancelError(reason)) {
-        callback();
-      }
-      throw reason;
-    });
-  }
+/**
+ * The Offers/Contributions UI is rendered differently based on the
+ * ProductType. The ProductType parameter is passed to the Payments flow, and
+ * then passed back to the Payments confirmation page to render messages/text
+ * based on the ProductType.
+ * @enum {string}
+ */
+const ProductType = {
+  SUBSCRIPTION: 'SUBSCRIPTION',
+  UI_CONTRIBUTION: 'UI_CONTRIBUTION',
+};
 
-  /** @override */
-  resized() {
-    if (this.port_) {
-      this.port_.resized();
-    }
-  }
+/**
+ * @return {!Config}
+ */
+function defaultConfig() {
+  return {
+    windowOpenMode: WindowOpenMode.AUTO,
+    analyticsMode: AnalyticsMode.DEFAULT,
+    enableSwgAnalytics: false,
+    enablePropensity: false,
+  };
 }
 
 /**
@@ -4339,142 +4221,204 @@ class ActivityIframeView extends View {
  * limitations under the License.
  */
 
+// NOTE: This regex was copied from SwG's AMP extension. https://github.com/ampproject/amphtml/blob/c23bf281f817a2ee5df73f6fd45e9f4b71bb68b6/extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js#L56
+const GOOGLE_DOMAIN_RE = /(^|\.)google\.(com?|[a-z]{2}|com?\.[a-z]{2}|cat)$/;
+
 /**
- * Character mapping from base64url to base64.
- * @const {!Object<string, string>}
+ * Cached a-tag to avoid memory allocation during URL parsing.
+ * @type {HTMLAnchorElement}
  */
-const base64UrlDecodeSubs = {'-': '+', '_': '/', '.': '='};
+let a;
 
 /**
- * Converts a string which holds 8-bit code points, such as the result of atob,
- * into a Uint8Array with the corresponding bytes.
- * If you have a string of characters, you probably want to be using utf8Encode.
- * @param {string} str
- * @return {!Uint8Array}
+ * We cached all parsed URLs. As of now there are no use cases
+ * of AMP docs that would ever parse an actual large number of URLs,
+ * but we often parse the same one over and over again.
+ * @type {Object<string, !LocationDef>}
  */
-function stringToBytes(str) {
-  const bytes = new Uint8Array(str.length);
-  for (let i = 0; i < str.length; i++) {
-    const charCode = str.charCodeAt(i);
-    log_2(charCode <= 255, 'Characters must be in range [0,255]');
-    bytes[i] = charCode;
-  }
-  return bytes;
-}
+let cache;
 
 /**
- * Converts a 8-bit bytes array into a string
- * @param {!Uint8Array} bytes
- * @return {string}
+ * Returns a Location-like object for the given URL. If it is relative,
+ * the URL gets resolved.
+ * Consider the returned object immutable. This is enforced during
+ * testing by freezing the object.
+ * @param {string} url
+ * @return {!LocationDef}
  */
-function bytesToString(bytes) {
-  // Intentionally avoids String.fromCharCode.apply so we don't suffer a
-  // stack overflow. #10495, https://jsperf.com/bytesToString-2
-  const array = new Array(bytes.length);
-  for (let i = 0; i < bytes.length; i++) {
-    array[i] = String.fromCharCode(bytes[i]);
+function parseUrl(url) {
+  if (!a) {
+    a = /** @type {!HTMLAnchorElement} */ (self.document.createElement('a'));
+    cache = self.UrlCache || (self.UrlCache = Object.create(null));
   }
-  return array.join('');
+
+  const fromCache = cache[url];
+  if (fromCache) {
+    return fromCache;
+  }
+
+  const info = parseUrlWithA(a, url);
+
+  return (cache[url] = info);
 }
 
 /**
- * Interpret a byte array as a UTF-8 string.
- * @param {!Uint8Array} bytes
- * @return {string}
+ * Returns a Location-like object for the given URL. If it is relative,
+ * the URL gets resolved.
+ * @param {!HTMLAnchorElement} a
+ * @param {string} url
+ * @return {!LocationDef}
  */
-function utf8DecodeSync(bytes) {
-  if (typeof TextDecoder !== 'undefined') {
-    return new TextDecoder('utf-8').decode(bytes);
+function parseUrlWithA(a, url) {
+  a.href = url;
+
+  // IE11 doesn't provide full URL components when parsing relative URLs.
+  // Assigning to itself again does the trick.
+  if (!a.protocol) {
+    a.href = a.href;
   }
-  const asciiString = bytesToString(new Uint8Array(bytes));
-  return decodeURIComponent(escape(asciiString));
+
+  /** @type {!LocationDef} */
+  const info = {
+    href: a.href,
+    protocol: a.protocol,
+    host: a.host,
+    hostname: a.hostname,
+    port: a.port == '0' ? '' : a.port,
+    pathname: a.pathname,
+    search: a.search,
+    hash: a.hash,
+    origin: '', // Set below.
+  };
+
+  // Some IE11 specific polyfills.
+  // 1) IE11 strips out the leading '/' in the pathname.
+  if (info.pathname[0] !== '/') {
+    info.pathname = '/' + info.pathname;
+  }
+
+  // 2) For URLs with implicit ports, IE11 parses to default ports while
+  // other browsers leave the port field empty.
+  if (
+    (info.protocol == 'http:' && info.port == 80) ||
+    (info.protocol == 'https:' && info.port == 443)
+  ) {
+    info.port = '';
+    info.host = info.hostname;
+  }
+
+  // For data URI a.origin is equal to the string 'null' which is not useful.
+  // We instead return the actual origin which is the full URL.
+  if (a.origin && a.origin != 'null') {
+    info.origin = a.origin;
+  } else if (info.protocol == 'data:' || !info.host) {
+    info.origin = info.href;
+  } else {
+    info.origin = info.protocol + '//' + info.host;
+  }
+  return info;
 }
 
 /**
- * Turn a string into UTF-8 bytes.
- * @param {string} string
- * @return {!Uint8Array}
+ * Parses and builds Object of URL query string.
+ * @param {string} query The URL query string.
+ * @return {!Object<string, string>}
  */
-function utf8EncodeSync(string) {
-  if (typeof TextEncoder !== 'undefined') {
-    return new TextEncoder('utf-8').encode(string);
+function parseQueryString(query) {
+  if (!query) {
+    return {};
   }
-  return stringToBytes(unescape(encodeURIComponent(string)));
+  return (/^[?#]/.test(query) ? query.slice(1) : query)
+    .split('&')
+    .reduce((params, param) => {
+      const item = param.split('=');
+      try {
+        const key = decodeURIComponent(item[0] || '');
+        const value = decodeURIComponent(item[1] || '');
+        if (key) {
+          params[key] = value;
+        }
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        warn(`SwG could not parse a URL query param: ${item[0]}`);
+      }
+      return params;
+    }, {});
 }
 
 /**
- * Converts a string which is in base64url encoding into a Uint8Array
- * containing the decoded value.
- * @param {string} str
- * @return {!Uint8Array}
+ * Adds a parameter to a query string.
+ * @param {string} url
+ * @param {string} param
+ * @param {string} value
+ * @return {string}
  */
-function base64UrlDecodeToBytes(str) {
-  const encoded = atob(str.replace(/[-_.]/g, ch => base64UrlDecodeSubs[ch]));
-  return stringToBytes(encoded);
+function addQueryParam(url, param, value) {
+  const queryIndex = url.indexOf('?');
+  const fragmentIndex = url.indexOf('#');
+  let fragment = '';
+  if (fragmentIndex != -1) {
+    fragment = url.substring(fragmentIndex);
+    url = url.substring(0, fragmentIndex);
+  }
+  if (queryIndex == -1) {
+    url += '?';
+  } else if (queryIndex < url.length - 1) {
+    url += '&';
+  }
+  url += encodeURIComponent(param) + '=' + encodeURIComponent(value);
+  return url + fragment;
 }
 
 /**
- * Copyright 2018 The Subscribe with Google 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.
+ * @param {!../proto/api_messages.Message} message
+ * @return {string}
  */
+function serializeProtoMessageForUrl(message) {
+  return JSON.stringify(message.toArray(false));
+}
 
 /**
- * @fileoverview This module declares JSON types as defined in the
- * {@link http://json.org/}.
+ * @param {!../model/doc.Doc} doc
+ * @return {string}
  */
+function getCanonicalUrl(doc) {
+  const node = doc.getRootNode().querySelector("link[rel='canonical']");
+  return (node && node.href) || '';
+}
+
+const PARSED_URL = parseUrl(self.window.location.href);
+const PARSED_REFERRER = parseUrl(self.document.referrer);
 
 /**
- * Simple wrapper around JSON.parse that casts the return value
- * to JsonObject.
- * Create a new wrapper if an array return value is desired.
- * @param {*} json JSON string to parse
- * @return {?JsonObject|undefined} May be extend to parse arrays.
+ * True for Google domains
+ * @param {LocationDef=} parsedUrl Defaults to the current page's URL
+ * @return {boolean}
  */
-function parseJson(json) {
-  return /** @type {?JsonObject} */ (JSON.parse(/** @type {string} */ (json)));
+function isGoogleDomain(parsedUrl) {
+  parsedUrl = parsedUrl || PARSED_URL;
+  return GOOGLE_DOMAIN_RE.test(parsedUrl.hostname);
 }
 
 /**
- * Parses the given `json` string without throwing an exception if not valid.
- * Returns `undefined` if parsing fails.
- * Returns the `Object` corresponding to the JSON string when parsing succeeds.
- * @param {*} json JSON string to parse
- * @param {function(!Error)=} onFailed Optional function that will be called
- *     with the error if parsing fails.
- * @return {?JsonObject|undefined} May be extend to parse arrays.
+ * True for HTTPS URLs
+ * @param {LocationDef=} parsedUrl Defaults to the current page's URL
+ * @return {boolean}
  */
-function tryParseJson(json, onFailed) {
-  try {
-    return parseJson(json);
-  } catch (e) {
-    if (onFailed) {
-      onFailed(e);
-    }
-    return undefined;
-  }
+function isSecure(parsedUrl) {
+  parsedUrl = parsedUrl || PARSED_URL;
+  return parsedUrl.protocol === 'https' || parsedUrl.protocol === 'https:';
 }
 
 /**
- * Converts the passed string into a JSON object (if possible) and returns the
- * value of the propertyName on that object.
- * @param {string} jsonString
- * @param {string} propertyName
- * @return {*}
+ * True when the page is rendered within a secure Google application or
+ * was linked to from a secure Google domain.
+ * @param {LocationDef=} parsedReferrer Defaults to the current page's referrer
+ * @return {boolean}
  */
-function getPropertyFromJsonString(jsonString, propertyName) {
-  const json = tryParseJson(jsonString);
-  return (json && json[propertyName]) || null;
+function wasReferredByGoogle(parsedReferrer) {
+  parsedReferrer = parsedReferrer || PARSED_REFERRER;
+  return isSecure(parsedReferrer) && isGoogleDomain(parsedReferrer);
 }
 
 /**
@@ -4494,50 +4438,98 @@ function getPropertyFromJsonString(jsonString, propertyName) {
  */
 
 /**
- * Provides helper methods to decode and verify JWT tokens.
+ * Have to put these in the map to avoid compiler optimization. Due to
+ * optimization issues, this map only allows property-style keys. E.g. "hr1",
+ * as opposed to "1hr".
+ * @type {!Object<string, number>}
+ * @package Visible for testing only.
  */
-class JwtHelper {
-  constructor() {}
-
-  /**
-   * Decodes JWT token and returns its payload.
-   * @param {string} encodedToken
-   * @return {?JsonObject|undefined}
-   */
-  decode(encodedToken) {
-    return this.decodeInternal_(encodedToken).payload;
-  }
+const CACHE_KEYS = {
+  'nocache': 1,
+  'hr1': 3600000, // 1hr = 1000 * 60 * 60
+  'hr12': 43200000, // 12hr = 1000 * 60 * 60 * 12
+};
 
-  /**
-   * @param {string} encodedToken
-   * @return {!JwtTokenInternalDef}
-   * @private
-   */
-  decodeInternal_(encodedToken) {
-    // See https://jwt.io/introduction/
-    /**
-     * Throws error about invalid token.
-     */
-    function invalidToken() {
-      throw new Error(`Invalid token: "${encodedToken}"`);
-    }
+/**
+ * @return {string}
+ */
+function feOrigin() {
+  return parseUrl('https://news.google.com').origin;
+}
 
-    // Encoded token has three parts: header.payload.sig
-    // Note! The padding is not allowed by JWT spec:
-    // http://self-issued.info/docs/draft-goland-json-web-token-00.html#rfc.section.5
-    const parts = encodedToken.split('.');
-    if (parts.length != 3) {
-      invalidToken();
-    }
-    const headerUtf8Bytes = base64UrlDecodeToBytes(parts[0]);
-    const payloadUtf8Bytes = base64UrlDecodeToBytes(parts[1]);
-    return {
-      header: tryParseJson(utf8DecodeSync(headerUtf8Bytes), invalidToken),
-      payload: tryParseJson(utf8DecodeSync(payloadUtf8Bytes), invalidToken),
-      verifiable: `${parts[0]}.${parts[1]}`,
-      sig: parts[2],
-    };
+/**
+ * @param {string} url Relative URL, e.g. "/service1".
+ * @return {string} The complete URL.
+ */
+function serviceUrl(url) {
+  return 'https://news.google.com/swg/_/api/v1' + url;
+}
+
+/**
+ * @param {string} url  Relative URL, e.g. "/service1".
+ * @return {string} The complete URL.
+ */
+function adsUrl(url) {
+  return 'https://pubads.g.doubleclick.net' + url;
+}
+
+/**
+ * @param {string} url Relative URL, e.g. "/offersiframe".
+ * @param {string=} prefix
+ * @param {Object<string, string>=} params List of extra params to append to the URL.
+ * @return {string} The complete URL.
+ */
+function feUrl(url, prefix = '', params) {
+  // Add cache param.
+  url = feCached('https://news.google.com' + prefix + '/swg/_/ui/v1' + url);
+
+  // Optionally add jsmode param. This allows us to test against "aggressively" compiled Boq JS.
+  const query = parseQueryString(self.location.hash);
+  const boqJsMode = query['swg.boqjsmode'];
+  if (boqJsMode !== undefined) {
+    url = addQueryParam(url, 'jsmode', boqJsMode);
+  }
+
+  for (const param in params) {
+    url = addQueryParam(url, param, params[param]);
+  }
+
+  return url;
+}
+
+/**
+ * @param {string} url FE URL.
+ * @return {string} The complete URL including cache param.
+ */
+function feCached(url) {
+  return addQueryParam(url, '_', cacheParam('hr1'));
+}
+
+/**
+ * @param {!Object<string, ?>} args
+ * @return {!Object<string, ?>}
+ */
+function feArgs(args) {
+  return Object.assign(args, {
+    '_client': 'SwG 0.1.22.167',
+  });
+}
+
+/**
+ * @param {string} cacheKey
+ * @return {string}
+ * @package Visible for testing only.
+ */
+function cacheParam(cacheKey) {
+  let period = CACHE_KEYS[cacheKey];
+  if (period == null) {
+    period = 1;
   }
+  if (period === 0) {
+    return '_';
+  }
+  const now = Date.now();
+  return String(period <= 1 ? now : Math.floor(now / period));
 }
 
 /**
@@ -4554,347 +4546,536 @@ class JwtHelper {
  * 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.
+ *
+ * The Flow goes like this:
+ * a. Start Payments
+ * b. Complete Payments
+ * c. Create Account
+ * d. Acknowledge Account
+ *
+ * In other words, Flow = Payments + Account Creation.
  */
 
 /**
- * The holder of the entitlements for a service.
+ * String values input by the publisher are mapped to the number values.
+ * @type {!Object<string, number>}
  */
-class Entitlements {
+const ReplaceSkuProrationModeMapping = {
+  // The replacement takes effect immediately, and the remaining time will
+  // be prorated and credited to the user. This is the current default
+  // behavior.
+  'IMMEDIATE_WITH_TIME_PRORATION': 1,
+};
+
+const RecurrenceMapping = {
+  'AUTO': 1,
+  'ONE_TIME': 2,
+};
+
+/**
+ * @param {string} sku
+ * @param {?string=} subscriptionFlow
+ * @return {!EventParams}
+ */
+function getEventParams$1(sku, subscriptionFlow = null) {
+  return new EventParams([, , , , sku, , , subscriptionFlow]);
+}
+
+/**
+ * The flow to initiate payment process.
+ */
+class PayStartFlow {
   /**
-   * @param {string} service
-   * @param {string} raw
-   * @param {!Array<!Entitlement>} entitlements
-   * @param {?string} currentProduct
-   * @param {function(!Entitlements)} ackHandler
-   * @param {?boolean|undefined} isReadyToPay
-   * @param {?string|undefined} decryptedDocumentKey
+   * @param {!./deps.DepsDef} deps
+   * @param {!../api/subscriptions.SubscriptionRequest} subscriptionRequest
+   * @param {!../api/subscriptions.ProductType} productType
    */
   constructor(
-    service,
-    raw,
-    entitlements,
-    currentProduct,
-    ackHandler,
-    isReadyToPay,
-    decryptedDocumentKey
+    deps,
+    subscriptionRequest,
+    productType = ProductType.SUBSCRIPTION
   ) {
-    /** @const {string} */
-    this.service = service;
-    /** @const {string} */
-    this.raw = raw;
-    /** @const {!Array<!Entitlement>} */
-    this.entitlements = entitlements;
-    /** @const {boolean} */
-    this.isReadyToPay = isReadyToPay || false;
-    /** @const {?string} */
-    this.decryptedDocumentKey = decryptedDocumentKey || null;
+    /** @private @const {!./deps.DepsDef} */
+    this.deps_ = deps;
 
-    /** @private @const {?string} */
-    this.product_ = currentProduct;
-    /** @private @const {function(!Entitlements)} */
-    this.ackHandler_ = ackHandler;
-  }
+    /** @private @const {!./pay-client.PayClient} */
+    this.payClient_ = deps.payClient();
 
-  /**
-   * @return {!Entitlements}
-   */
-  clone() {
-    return new Entitlements(
-      this.service,
-      this.raw,
-      this.entitlements.map(ent => ent.clone()),
-      this.product_,
-      this.ackHandler_,
-      this.isReadyToPay,
-      this.decryptedDocumentKey
-    );
-  }
+    /** @private @const {!../model/page-config.PageConfig} */
+    this.pageConfig_ = deps.pageConfig();
 
-  /**
-   * @return {!Object}
-   */
-  json() {
-    return {
-      'service': this.service,
-      'entitlements': this.entitlements.map(item => item.json()),
-      'isReadyToPay': this.isReadyToPay,
-    };
-  }
+    /** @private @const {!../components/dialog-manager.DialogManager} */
+    this.dialogManager_ = deps.dialogManager();
 
-  /**
-   * @param {string=} source
-   * @return {boolean}
-   */
-  enablesThis(source) {
-    return this.enables(this.product_, source);
-  }
+    /** @private @const {!../api/subscriptions.SubscriptionRequest} */
+    this.subscriptionRequest_ = subscriptionRequest;
 
-  /**
-   * @param {string=} source
-   * @return {boolean}
-   */
-  enablesAny(source) {
-    for (let i = 0; i < this.entitlements.length; i++) {
-      if (
-        this.entitlements[i].products.length > 0 &&
-        (!source || source == this.entitlements[i].source)
-      ) {
-        return true;
-      }
-    }
-    return false;
-  }
+    /**@private @const {!ProductType} */
+    this.productType_ = productType;
 
-  /**
-   * Whether these entitlements enable the specified product, optionally also
-   * restricting the source.
-   * @param {?string} product
-   * @param {string=} source
-   * @return {boolean}
-   */
-  enables(product, source) {
-    if (!product) {
-      return false;
-    }
-    return !!this.getEntitlementFor(product, source);
+    /** @private @const {!../runtime/analytics-service.AnalyticsService} */
+    this.analyticsService_ = deps.analytics();
+
+    /** @private @const {!../runtime/client-event-manager.ClientEventManager} */
+    this.eventManager_ = deps.eventManager();
+
+    /** @private @const {!../runtime/client-config-manager.ClientConfigManager} */
+    this.clientConfigManager_ = deps.clientConfigManager();
   }
 
   /**
-   * Returns the first matching entitlement for the current product,
-   * optionally also matching the specified source.
-   * @param {string=} source
-   * @return {?Entitlement}
+   * Starts the payments flow.
+   * @return {!Promise}
    */
-  getEntitlementForThis(source) {
-    return this.getEntitlementFor(this.product_, source);
+  start() {
+    // Get the paySwgVersion for buyflow.
+    const promise = this.clientConfigManager_.getClientConfig();
+    return promise.then((clientConfig) => {
+      this.start_(clientConfig.paySwgVersion);
+    });
   }
 
   /**
-   * Returns the first matching entitlement for the specified product,
-   * optionally also matching the specified source.
-   * @param {?string} product
-   * @param {string=} source
-   * @return {?Entitlement}
+   * Starts the payments flow for the given version.
+   * @param {!string=} paySwgVersion
+   * @return {!Promise}
    */
-  getEntitlementFor(product, source) {
-    if (product && this.entitlements.length > 0) {
-      for (let i = 0; i < this.entitlements.length; i++) {
-        if (
-          this.entitlements[i].enables(product) &&
-          (!source || source == this.entitlements[i].source)
-        ) {
-          return this.entitlements[i];
-        }
+  start_(paySwgVersion) {
+    const /** @type {SwgPaymentRequest} */ swgPaymentRequest = {
+        'skuId': this.subscriptionRequest_['skuId'],
+        'publicationId': this.pageConfig_.getPublicationId(),
+      };
+
+    if (paySwgVersion) {
+      swgPaymentRequest['swgVersion'] = paySwgVersion;
+    }
+
+    if (this.subscriptionRequest_['oldSku']) {
+      swgPaymentRequest['oldSku'] = this.subscriptionRequest_['oldSku'];
+      // Map the proration mode to the enum value (if proration exists).
+      const prorationMode =
+        this.subscriptionRequest_['replaceSkuProrationMode'];
+      if (prorationMode) {
+        swgPaymentRequest['replaceSkuProrationMode'] =
+          ReplaceSkuProrationModeMapping[prorationMode];
+      } else {
+        swgPaymentRequest['replaceSkuProrationMode'] =
+          ReplaceSkuProrationModeMapping['IMMEDIATE_WITH_TIME_PRORATION'];
       }
+      this.analyticsService_.setSku(swgPaymentRequest['oldSku']);
     }
-    return null;
-  }
 
-  /**
-   * Returns the first matching entitlement for the specified source w/o
-   * matching any specific products.
-   * @param {string} source
-   * @return {?Entitlement}
-   */
-  getEntitlementForSource(source) {
-    if (this.entitlements.length > 0) {
-      for (let i = 0; i < this.entitlements.length; i++) {
-        if (
-          this.entitlements[i].subscriptionToken &&
-          source == this.entitlements[i].source
-        ) {
-          return this.entitlements[i];
-        }
-      }
+    // Assign one-time recurrence enum if applicable
+    if (this.subscriptionRequest_['oneTime']) {
+      swgPaymentRequest['paymentRecurrence'] = RecurrenceMapping['ONE_TIME'];
     }
-    return null;
-  }
 
-  /**
-   * A 3p site should call this method to acknowledge that it "saw" and
-   * "understood" entitlements.
-   */
-  ack() {
-    this.ackHandler_(this);
+    // Start/cancel events.
+    const flow =
+      this.productType_ == ProductType.UI_CONTRIBUTION
+        ? SubscriptionFlows.CONTRIBUTE
+        : SubscriptionFlows.SUBSCRIBE;
+
+    this.deps_.callbacks().triggerFlowStarted(flow, this.subscriptionRequest_);
+
+    this.eventManager_.logSwgEvent(
+      AnalyticsEvent.ACTION_PAYMENT_FLOW_STARTED,
+      true,
+      getEventParams$1(swgPaymentRequest['skuId'])
+    );
+    PayCompleteFlow.waitingForPayClient_ = true;
+    this.payClient_.start(
+      /** @type {!PaymentDataRequest} */
+      ({
+        'apiVersion': 1,
+        'allowedPaymentMethods': ['CARD'],
+        'environment': 'PRODUCTION',
+        'playEnvironment': 'PROD',
+        'swg': swgPaymentRequest,
+        'i': {
+          'startTimeMs': Date.now(),
+          'productType': this.productType_,
+        },
+      }),
+      {
+        forceRedirect:
+          this.deps_.config().windowOpenMode == WindowOpenMode.REDIRECT,
+        // basic flow does not support native.
+        forceDisableNative: paySwgVersion == '2',
+      }
+    );
+    return Promise.resolve();
   }
 }
 
 /**
- * The single entitlement object.
+ * The flow for successful payments completion.
  */
-class Entitlement {
+class PayCompleteFlow {
   /**
-   * @param {string} source
-   * @param {!Array<string>} products
-   * @param {string} subscriptionToken
+   * @param {!./deps.DepsDef} deps
    */
-  constructor(source, products, subscriptionToken) {
-    /** @const {string} */
-    this.source = source;
-    /** @const {!Array<string>} */
-    this.products = products;
-    /** @const {string} */
-    this.subscriptionToken = subscriptionToken;
-  }
+  static configurePending(deps) {
+    /** @const @type {./client-event-manager.ClientEventManager} */
+    const eventManager = deps.eventManager();
 
-  /**
-   * @return {!Entitlement}
-   */
-  clone() {
-    return new Entitlement(
-      this.source,
-      this.products.slice(0),
-      this.subscriptionToken
-    );
+    deps.payClient().onResponse((payPromise) => {
+      deps.entitlementsManager().blockNextNotification();
+      const flow = new PayCompleteFlow(deps);
+      const promise = validatePayResponse(
+        deps,
+        payPromise,
+        flow.complete.bind(flow)
+      );
+      deps.callbacks().triggerPaymentResponse(promise);
+      return promise.then(
+        (response) => {
+          const sku = parseSkuFromPurchaseDataSafe(response.purchaseData);
+          deps.analytics().setSku(sku || '');
+          eventManager.logSwgEvent(
+            AnalyticsEvent.ACTION_PAYMENT_COMPLETE,
+            true,
+            getEventParams$1(
+              sku || '',
+              response.productType == ProductType.UI_CONTRIBUTION
+                ? SubscriptionFlows.CONTRIBUTE
+                : SubscriptionFlows.SUBSCRIBE
+            )
+          );
+          flow.start(response);
+        },
+        (reason) => {
+          if (isCancelError(reason)) {
+            const productType = /** @type {!Object} */ (reason)['productType'];
+            const flow =
+              productType == ProductType.UI_CONTRIBUTION
+                ? SubscriptionFlows.CONTRIBUTE
+                : SubscriptionFlows.SUBSCRIBE;
+            deps.callbacks().triggerFlowCanceled(flow);
+            deps
+              .eventManager()
+              .logSwgEvent(AnalyticsEvent.ACTION_USER_CANCELED_PAYFLOW, true);
+          } else {
+            deps
+              .eventManager()
+              .logSwgEvent(AnalyticsEvent.EVENT_PAYMENT_FAILED, false);
+            deps.jserror().error('Pay failed', reason);
+            throw reason;
+          }
+        }
+      );
+    });
   }
 
   /**
-   * @return {!Object}
+   * @param {!./deps.DepsDef} deps
    */
-  json() {
-    return {
-      'source': this.source,
-      'products': this.products,
-      'subscriptionToken': this.subscriptionToken,
-    };
-  }
+  constructor(deps) {
+    /** @private @const {!Window} */
+    this.win_ = deps.win();
 
-  /**
-   * @param {?string} product
-   * @return {boolean}
-   */
-  enables(product) {
-    if (!product) {
-      return false;
-    }
-    // Wildcard allows this product.
-    const eq = product.indexOf(':');
-    if (
-      eq != -1 &&
-      this.products.includes(product.substring(0, eq + 1) + '*')
-    ) {
-      return true;
-    }
-    return this.products.includes(product);
+    /** @private @const {!./deps.DepsDef} */
+    this.deps_ = deps;
+
+    /** @private @const {!../components/activities.ActivityPorts} */
+    this.activityPorts_ = deps.activities();
+
+    /** @private @const {!../components/dialog-manager.DialogManager} */
+    this.dialogManager_ = deps.dialogManager();
+
+    /** @private {?Promise<!ActivityIframeView>} */
+    this.activityIframeViewPromise_ = null;
+
+    /** @private {?Promise} */
+    this.readyPromise_ = null;
+
+    /** @private @const {!../runtime/analytics-service.AnalyticsService} */
+    this.analyticsService_ = deps.analytics();
+
+    /** @private @const {!../runtime/client-event-manager.ClientEventManager} */
+    this.eventManager_ = deps.eventManager();
+
+    /** @private @const {!../runtime/client-config-manager.ClientConfigManager} */
+    this.clientConfigManager_ = deps.clientConfigManager();
+
+    /** @private {?string} */
+    this.sku_ = null;
   }
 
   /**
-   * @param {?Object} json
-   * @return {!Entitlement}
+   * Starts the payments completion flow.
+   * @param {{
+   *   productType: string,
+   *   oldSku: ?string,
+   *   paymentRecurrence: ?number,
+   * }} response
+   * @return {!Promise}
    */
-  static parseFromJson(json) {
-    if (!json) {
-      json = {};
+  start(response) {
+    this.sku_ = parseSkuFromPurchaseDataSafe(response.purchaseData);
+    this.eventManager_.logSwgEvent(
+      AnalyticsEvent.IMPRESSION_ACCOUNT_CHANGED,
+      true,
+      getEventParams$1(this.sku_ || '')
+    );
+    this.deps_.entitlementsManager().reset(true);
+    // TODO(dianajing): future-proof isOneTime flag
+    const args = {
+      'publicationId': this.deps_.pageConfig().getPublicationId(),
+      'productType': response['productType'],
+      'isSubscriptionUpdate': !!response['oldSku'],
+      'isOneTime': !!response['paymentRecurrence'],
+    };
+    // TODO(dvoytenko, #400): cleanup once entitlements is launched everywhere.
+    if (response.userData && response.entitlements) {
+      args['idToken'] = response.userData.idToken;
+      this.deps_
+        .entitlementsManager()
+        .pushNextEntitlements(response.entitlements.raw);
+      // Persist swgUserToken in local storage
+      if (response.swgUserToken) {
+        this.deps_
+          .storage()
+          .set(Constants$1.USER_TOKEN, response.swgUserToken, true);
+      }
+    } else {
+      args['loginHint'] = response.userData && response.userData.email;
     }
-    const source = json['source'] || '';
-    const products = json['products'] || [];
-    const subscriptionToken = json['subscriptionToken'];
-    return new Entitlement(source, products, subscriptionToken);
+    return (this.activityIframeViewPromise_ = this.clientConfigManager_
+      .getClientConfig()
+      .then((clientConfig) => {
+        args['useUpdatedConfirmUi'] = clientConfig.useUpdatedOfferFlows;
+        return new ActivityIframeView(
+          this.win_,
+          this.activityPorts_,
+          feUrl('/payconfirmiframe'),
+          feArgs(args),
+          /* shouldFadeBody */ true
+        );
+      })
+      .then((activityIframeView) => {
+        activityIframeView.on(
+          EntitlementsResponse,
+          this.handleEntitlementsResponse_.bind(this)
+        );
+
+        activityIframeView.acceptResult().then(() => {
+          // The flow is complete.
+          this.dialogManager_.completeView(activityIframeView);
+        });
+
+        this.readyPromise_ = this.dialogManager_.openView(activityIframeView);
+        return activityIframeView;
+      }));
   }
 
   /**
-   * The JSON is expected in one of the forms:
-   * - Single entitlement: `{products: [], ...}`.
-   * - A list of entitlements: `[{products: [], ...}, {...}]`.
-   * @param {!Object|!Array<!Object>} json
-   * @return {!Array<!Entitlement>}
+   * @param {!EntitlementsResponse} response
+   * @private
    */
-  static parseListFromJson(json) {
-    const jsonList = Array.isArray(json)
-      ? /** @type {!Array<Object>} */ (json)
-      : [json];
-    return jsonList.map(json => Entitlement.parseFromJson(json));
+  handleEntitlementsResponse_(response) {
+    const jwt = response.getJwt();
+    if (jwt) {
+      this.deps_.entitlementsManager().pushNextEntitlements(jwt);
+    }
   }
 
   /**
-   * Returns the SKU associated with this entitlement.
-   * @return {?string}
+   * @return {!Promise}
    */
-  getSku() {
-    if (this.source !== 'google') {
-      return null;
-    }
-    const sku = (
-        /** @type {?string} */ (getPropertyFromJsonString(
-            this.subscriptionToken,
-            'productId'
-        ) || null)
+  complete() {
+    this.eventManager_.logSwgEvent(
+      AnalyticsEvent.ACTION_ACCOUNT_CREATED,
+      true,
+      getEventParams$1(this.sku_ || '')
     );
-    if (!sku) {
-      log_4('Unable to retrieve SKU from SwG subscription token');
-    }
-    return sku;
+    this.deps_.entitlementsManager().unblockNextNotification();
+    return Promise.all([
+      this.activityIframeViewPromise_,
+      this.readyPromise_,
+    ]).then((values) => {
+      const activityIframeView = values[0];
+      const accountCompletionRequest = new AccountCreationRequest();
+      accountCompletionRequest.setComplete(true);
+      activityIframeView.execute(accountCompletionRequest);
+      return activityIframeView
+        .acceptResult()
+        .catch(() => {
+          // Ignore errors.
+        })
+        .then(() => {
+          this.eventManager_.logSwgEvent(
+            AnalyticsEvent.ACTION_ACCOUNT_ACKNOWLEDGED,
+            true,
+            getEventParams$1(this.sku_ || '')
+          );
+          this.deps_.entitlementsManager().setToastShown(true);
+        });
+    });
   }
 }
 
+/** @private {boolean} */
+PayCompleteFlow.waitingForPayClient_ = false;
+
 /**
- * Copyright 2018 The Subscribe with Google 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.
+ * @param {!./deps.DepsDef} deps
+ * @param {!Promise<!Object>} payPromise
+ * @param {function():!Promise} completeHandler
+ * @return {!Promise<!SubscribeResponse>}
  */
+function validatePayResponse(deps, payPromise, completeHandler) {
+  const wasRedirect = !PayCompleteFlow.waitingForPayClient_;
+  PayCompleteFlow.waitingForPayClient_ = false;
+  return payPromise.then((data) => {
+    // 1) We log against a random TX ID which is how we track a specific user
+    //    anonymously.
+    // 2) If there was a redirect to gPay, we may have lost our stored TX ID.
+    // 3) Pay service is supposed to give us the TX ID it logged against.
+    let eventType = AnalyticsEvent.UNKNOWN;
+    let eventParams = undefined;
+    if (typeof data !== 'object' || !data['googleTransactionId']) {
+      // If gPay doesn't give us a TX ID it means that something may
+      // be wrong.  If we previously logged then we are at least continuing to
+      // log against the same TX ID.  If we didn't previously log then we have
+      // lost all connection to the events that preceded the payment event and
+      // we at least want to know why that data was lost.
+      eventParams = new EventParams();
+      eventParams.setHadLogged(!wasRedirect);
+      eventType = AnalyticsEvent.EVENT_GPAY_NO_TX_ID;
+    } else {
+      const oldTxId = deps.analytics().getTransactionId();
+      const newTxId = data['googleTransactionId'];
 
+      if (wasRedirect) {
+        // This is the expected case for full redirects.  It may be happening
+        // unexpectedly at other times too though and we want to be aware of
+        // it if it does.
+        deps.analytics().setTransactionId(newTxId);
+        eventType = AnalyticsEvent.EVENT_GPAY_CANNOT_CONFIRM_TX_ID;
+      } else {
+        if (oldTxId === newTxId) {
+          // This is the expected case for non-redirect pay events
+          eventType = AnalyticsEvent.EVENT_CONFIRM_TX_ID;
+        } else {
+          // This is an unexpected case: gPay rejected our TX ID and created
+          // its own.  Log the gPay TX ID but keep our logging consistent.
+          eventParams = new EventParams();
+          eventParams.setGpayTransactionId(newTxId);
+          eventType = AnalyticsEvent.EVENT_CHANGED_TX_ID;
+        }
+      }
+    }
+    deps.eventManager().logSwgEvent(eventType, true, eventParams);
+    return parseSubscriptionResponse(deps, data, completeHandler);
+  });
+}
 
 /**
+ * @param {!./deps.DepsDef} deps
+ * @param {*} data
+ * @param {function():!Promise} completeHandler
+ * @return {!SubscribeResponse}
  */
-class UserData {
-
-  /**
-   * @param {string} idToken
-   * @param {!Object} data
-   */
-  constructor(idToken, data) {
-    /** @const {string} */
-    this.idToken = idToken;
-    /** @const {!Object} */
-    this.data = data;
+function parseSubscriptionResponse(deps, data, completeHandler) {
+  let swgData = null;
+  let raw = null;
+  let productType = ProductType.SUBSCRIPTION;
+  let oldSku = null;
+  let paymentRecurrence = null;
 
-    /** @const {string} */
-    this.id = data['sub'];
-    /** @const {string} */
-    this.email = data['email'];
-    /** @const {boolean} */
-    this.emailVerified = data['email_verified'];
-    /** @const {string} */
-    this.name = data['name'];
-    /** @const {string} */
-    this.givenName = data['given_name'];
-    /** @const {string} */
-    this.familyName = data['family_name'];
-    /** @const {string} */
-    this.pictureUrl = data['picture'];
+  if (data) {
+    if (typeof data == 'string') {
+      raw = /** @type {string} */ (data);
+    } else {
+      // Assume it's a json object in the format:
+      // `{integratorClientCallbackData: "..."}` or `{swgCallbackData: "..."}`.
+      const json = /** @type {!Object} */ (data);
+      if ('swgCallbackData' in json) {
+        swgData = /** @type {!Object} */ (json['swgCallbackData']);
+      } else if ('integratorClientCallbackData' in json) {
+        raw = json['integratorClientCallbackData'];
+      }
+      if ('paymentRequest' in data) {
+        oldSku = (data['paymentRequest']['swg'] || {})['oldSku'];
+        paymentRecurrence = (data['paymentRequest']['swg'] || {})[
+          'paymentRecurrence'
+        ];
+        productType =
+          (data['paymentRequest']['i'] || {})['productType'] ||
+          ProductType.SUBSCRIPTION;
+      }
+    }
+  }
+  if (raw && !swgData) {
+    raw = atob(raw);
+    if (raw) {
+      const parsed = parseJson(raw);
+      swgData = parsed['swgCallbackData'];
+    }
+  }
+  if (!swgData) {
+    throw new Error('unexpected payment response');
   }
+  raw = JSON.stringify(/** @type {!JsonObject} */ (swgData));
+  return new SubscribeResponse(
+    raw,
+    parsePurchaseData(swgData),
+    parseUserData(swgData),
+    parseEntitlements(deps, swgData),
+    productType,
+    completeHandler,
+    oldSku,
+    paymentRecurrence,
+    swgData['swgUserToken']
+  );
+}
 
-  /**
-   * @return {!UserData}
-   */
-  clone() {
-    return new UserData(this.idToken, this.data);
+/**
+ * @param {!Object} swgData
+ * @return {!PurchaseData}
+ */
+function parsePurchaseData(swgData) {
+  const raw = swgData['purchaseData'];
+  const signature = swgData['purchaseDataSignature'];
+  return new PurchaseData(raw, signature);
+}
+
+/**
+ * @param {!Object} swgData
+ * @return {?UserData}
+ * @package Visible for testing.
+ */
+function parseUserData(swgData) {
+  const idToken = swgData['idToken'];
+  if (!idToken) {
+    return null;
   }
+  const jwt = /** @type {!Object} */ (new JwtHelper().decode(idToken));
+  return new UserData(idToken, jwt);
+}
 
-  /**
-   * @return {!Object}
-   */
-  json() {
-    return {
-      'id': this.id,
-      'email': this.email,
-      'emailVerified': this.emailVerified,
-      'name': this.name,
-      'givenName': this.givenName,
-      'familyName': this.familyName,
-      'pictureUrl': this.pictureUrl,
-    };
+/**
+ * @param {!./deps.DepsDef} deps
+ * @param {!Object} swgData
+ * @return {?../api/entitlements.Entitlements}
+ * @package Visible for testing.
+ */
+function parseEntitlements(deps, swgData) {
+  if (swgData['signedEntitlements']) {
+    return deps.entitlementsManager().parseEntitlements(swgData);
   }
+  return null;
+}
+
+/**
+ * @param {!PurchaseData} purchaseData
+ * @return {?string}
+ */
+function parseSkuFromPurchaseDataSafe(purchaseData) {
+  return /** @type {?string} */ (
+    getPropertyFromJsonString(purchaseData.raw, 'productId') || null
+  );
 }
 
 /**
@@ -4914,206 +5095,430 @@ class UserData {
  */
 
 /**
+ * @param {string} sku
+ * @return {!EventParams}
  */
-class SubscribeResponse$1 {
-  /**
-   * @param {string} raw
-   * @param {!PurchaseData} purchaseData
-   * @param {?UserData} userData
-   * @param {?Entitlements} entitlements
-   * @param {!string} productType
-   * @param {function():!Promise} completeHandler
-   * @param {?string=} oldSku
-   * @param {?number=} paymentRecurrence
-   */
-  constructor(
-    raw,
-    purchaseData,
-    userData,
-    entitlements,
-    productType,
-    completeHandler,
-    oldSku = null,
-    paymentRecurrence = null
-  ) {
-    /** @const {string} */
-    this.raw = raw;
-    /** @const {!PurchaseData} */
-    this.purchaseData = purchaseData;
-    /** @const {?UserData} */
-    this.userData = userData;
-    /** @const {?Entitlements} */
-    this.entitlements = entitlements;
-    /** @const {string} */
-    this.productType = productType;
-    /** @private @const {function():!Promise} */
-    this.completeHandler_ = completeHandler;
-    /** @const {?string} */
-    this.oldSku = oldSku;
-    /** @const {?number} */
-    this.paymentRecurrence = paymentRecurrence;
-  }
+function getEventParams(sku) {
+  return new EventParams([, , , , sku]);
+}
+
+/**
+ * Offers view is closable when request was originated from 'AbbrvOfferFlow'
+ * or from 'SubscribeOptionFlow'.
+ */
+const OFFERS_VIEW_CLOSABLE = true;
+
+// The value logged when the offers screen shows all available SKUs.
+const ALL_SKUS = '*';
 
+/**
+ * The class for Offers flow.
+ */
+class OffersFlow {
   /**
-   * @return {!SubscribeResponse}
+   * @param {!./deps.DepsDef} deps
+   * @param {!../api/subscriptions.OffersRequest|undefined} options
    */
-  clone() {
-    return new SubscribeResponse$1(
-      this.raw,
-      this.purchaseData,
-      this.userData,
-      this.entitlements,
-      this.productType,
-      this.completeHandler_,
-      this.oldSku
-    );
+  constructor(deps, options) {
+    /** @private @const {!./deps.DepsDef} */
+    this.deps_ = deps;
+
+    /** @private @const {!Window} */
+    this.win_ = deps.win();
+
+    /** @private @const {!../components/activities.ActivityPorts} */
+    this.activityPorts_ = deps.activities();
+
+    /** @private @const {!../components/dialog-manager.DialogManager} */
+    this.dialogManager_ = deps.dialogManager();
+
+    /** @private @const {!../runtime/client-event-manager.ClientEventManager} */
+    this.eventManager_ = deps.eventManager();
+
+    /** @private @const {!./client-config-manager.ClientConfigManager} */
+    this.clientConfigManager_ = deps.clientConfigManager();
+
+    this.activityIframeView_ = null;
+
+    let isClosable = options && options.isClosable;
+    if (isClosable == undefined) {
+      isClosable = false; // Default is to hide Close button.
+    }
+
+    const feArgsObj = deps.activities().addDefaultArguments({
+      'showNative': deps.callbacks().hasSubscribeRequestCallback(),
+      'productType': ProductType.SUBSCRIPTION,
+      'list': (options && options.list) || 'default',
+      'skus': (options && options.skus) || null,
+      'isClosable': isClosable,
+    });
+
+    if (options && options.oldSku) {
+      feArgsObj['oldSku'] = options.oldSku;
+      assert(feArgsObj['skus'], 'Need a sku list if old sku is provided!');
+
+      // Remove old sku from offers if in list.
+      let skuList = feArgsObj['skus'];
+      const /** @type {string} */ oldSku = feArgsObj['oldSku'];
+      skuList = skuList.filter((sku) => sku !== oldSku);
+
+      assert(
+        skuList.length > 0,
+        'Sku list only contained offer user already has'
+      );
+      feArgsObj['skus'] = skuList;
+    }
+
+    // Redirect to payments if only one upgrade option is passed.
+    if (feArgsObj['skus'] && feArgsObj['skus'].length === 1) {
+      const sku = feArgsObj['skus'][0];
+      const /** @type {string|undefined} */ oldSku = feArgsObj['oldSku'];
+      // Update subscription triggers experimental flag if oldSku is passed,
+      // so we need to check for oldSku to decide if it needs to be sent.
+      // Otherwise we might accidentally block a regular subscription request.
+      if (oldSku) {
+        const skuSelectedResponse = new SkuSelectedResponse();
+        skuSelectedResponse.setSku(sku);
+        skuSelectedResponse.setOldSku(oldSku);
+        this.startPayFlow_(skuSelectedResponse);
+        return;
+      }
+    }
+
+    /** @private  @const {!Array<!string>} */
+    this.skus_ = feArgsObj['skus'] || [ALL_SKUS];
+
+    /** @private @const {!Promise<!ActivityIframeView>} */
+    this.activityIframeViewPromise_ = this.getUrl_(
+      this.clientConfigManager_.getClientConfig()
+    ).then((url) => {
+      return new ActivityIframeView(
+        this.win_,
+        this.activityPorts_,
+        feUrl(url),
+        feArgsObj,
+        /* shouldFadeBody */ true
+      );
+    });
   }
 
   /**
-   * @return {!Object}
+   * @param {SkuSelectedResponse} response
+   * @private
    */
-  json() {
-    return {
-      'purchaseData': this.purchaseData.json(),
-      'userData': this.userData ? this.userData.json() : null,
-      'entitlements': this.entitlements ? this.entitlements.json() : null,
-      'oldSku': this.oldSku,
-      'productType': this.productType,
-    };
+  startPayFlow_(response) {
+    const sku = response.getSku();
+    if (sku) {
+      const /** @type {../api/subscriptions.SubscriptionRequest} */ subscriptionRequest =
+          {
+            'skuId': sku,
+          };
+      const oldSku = response.getOldSku();
+      if (oldSku) {
+        subscriptionRequest['oldSku'] = oldSku;
+        this.deps_.analytics().setSku(oldSku);
+      }
+      this.eventManager_.logSwgEvent(
+        AnalyticsEvent.ACTION_OFFER_SELECTED,
+        true,
+        getEventParams(sku)
+      );
+      new PayStartFlow(this.deps_, subscriptionRequest).start();
+    }
   }
 
   /**
-   * Allows the receiving site to complete/acknowledge that it registered
-   * the subscription purchase. The typical action would be to create an
-   * account (or match an existing one) and associated the purchase with
-   * that account.
-   *
-   * SwG will display progress indicator until this method is called and
-   * upon receiving this call will show the confirmation to the user.
-   * The promise returned by this method will yield once the user closes
-   * the confirmation.
-   *
-   * @return {!Promise}
+   * @param {AlreadySubscribedResponse} response
+   * @private
    */
-  complete() {
-    return this.completeHandler_();
+  handleLinkRequest_(response) {
+    if (response.getSubscriberOrMember()) {
+      this.eventManager_.logSwgEvent(
+        AnalyticsEvent.ACTION_ALREADY_SUBSCRIBED,
+        true
+      );
+      this.deps_.callbacks().triggerLoginRequest({
+        linkRequested: !!response.getLinkRequested(),
+      });
+    }
   }
-}
 
-/**
- */
-class PurchaseData {
   /**
-   * @param {string} raw
-   * @param {string} signature
+   * @param {ViewSubscriptionsResponse} response
+   * @private
    */
-  constructor(raw, signature) {
-    /** @const {string} */
-    this.raw = raw;
-    /** @const {string} */
-    this.data = raw;
-    /** @const {string} */
-    this.signature = signature;
+  startNativeFlow_(response) {
+    if (response.getNative()) {
+      this.deps_.callbacks().triggerSubscribeRequest();
+    }
   }
 
   /**
-   * @return {!PurchaseData}
+   * Starts the offers flow or alreadySubscribed flow.
+   * @return {!Promise}
    */
-  clone() {
-    return new PurchaseData(this.raw, this.signature);
+  start() {
+    if (this.activityIframeViewPromise_) {
+      return this.activityIframeViewPromise_.then((activityIframeView) => {
+        // So no error if skipped to payment screen.
+        // Start/cancel events.
+        // The second parameter is required by Propensity in AMP.
+        this.deps_
+          .callbacks()
+          .triggerFlowStarted(SubscriptionFlows.SHOW_OFFERS, {
+            skus: this.skus_,
+            source: 'SwG',
+          });
+        activityIframeView.onCancel(() => {
+          this.deps_
+            .callbacks()
+            .triggerFlowCanceled(SubscriptionFlows.SHOW_OFFERS);
+        });
+        activityIframeView.on(
+          SkuSelectedResponse,
+          this.startPayFlow_.bind(this)
+        );
+        activityIframeView.on(
+          AlreadySubscribedResponse,
+          this.handleLinkRequest_.bind(this)
+        );
+        activityIframeView.on(
+          ViewSubscriptionsResponse,
+          this.startNativeFlow_.bind(this)
+        );
+        this.activityIframeView_ = activityIframeView;
+        return this.dialogManager_.openView(this.activityIframeView_);
+      });
+    }
+    return Promise.resolve();
   }
 
   /**
-   * @return {!Object}
+   * Gets the URL that should be used for the activity iFrame view.
+   * @param {!Promise<../model/client-config.ClientConfig>} clientConfigPromise
+   * @return {!Promise<string>}
    */
-  json() {
-    return {
-      'data': this.raw,
-      'signature': this.signature,
-    };
+  getUrl_(clientConfigPromise) {
+    return clientConfigPromise.then((clientConfig) => {
+      if (clientConfig.useUpdatedOfferFlows) {
+        return '/subscriptionoffersiframe';
+      } else {
+        return '/offersiframe';
+      }
+    });
+  }
+
+  /**
+   * Shows "no subscription found" on activity iFrame view.
+   */
+  showNoEntitlementFoundToast() {
+    if (this.activityIframeView_) {
+      this.activityIframeView_.execute(new EntitlementsResponse());
+    }
   }
 }
 
 /**
- * Copyright 2018 The Subscribe with Google 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.
+ * The class for subscribe option flow.
  */
+class SubscribeOptionFlow {
+  /**
+   * @param {!./deps.DepsDef} deps
+   * @param {!../api/subscriptions.OffersRequest|undefined} options
+   */
+  constructor(deps, options) {
+    /** @private @const {!./deps.DepsDef} */
+    this.deps_ = deps;
 
+    /** @private @const {!../api/subscriptions.OffersRequest|undefined} */
+    this.options_ = options;
 
-/**
- */
-class DeferredAccountCreationResponse {
+    /** @private @const {!../components/activities.ActivityPorts} */
+    this.activityPorts_ = deps.activities();
 
-  /**
-   * @param {!Entitlements} entitlements
-   * @param {!UserData} userData
-   * @param {!Array<!PurchaseData>} purchaseDataList
-   * @param {function():!Promise} completeHandler
-   */
-  constructor(entitlements, userData, purchaseDataList, completeHandler) {
-    /** @const {!Entitlements} */
-    this.entitlements = entitlements;
-    /** @const {!UserData} */
-    this.userData = userData;
-    /** @const {!Array<!PurchaseData>} */
-    this.purchaseDataList = purchaseDataList;
-    // TODO(dvoytenko): deprecate.
-    /** @const {!PurchaseData} */
-    this.purchaseData = purchaseDataList[0];
-    /** @private @const {function():!Promise} */
-    this.completeHandler_ = completeHandler;
-  }
+    /** @private @const {!../components/dialog-manager.DialogManager} */
+    this.dialogManager_ = deps.dialogManager();
 
-  /**
-   * @return {!DeferredAccountCreationResponse}
-   */
-  clone() {
-    return new DeferredAccountCreationResponse(
-        this.entitlements,
-        this.userData,
-        this.purchaseDataList,
-        this.completeHandler_);
-  }
+    /** @private @const {!../runtime/client-event-manager.ClientEventManager} */
+    this.eventManager_ = deps.eventManager();
 
-  /**
-   * @return {!Object}
-   */
-  json() {
-    return {
-      'entitlements': this.entitlements.json(),
-      'userData': this.userData.json(),
-      'purchaseDataList': this.purchaseDataList.map(pd => pd.json()),
-      // TODO(dvoytenko): deprecate.
-      'purchaseData': this.purchaseData.json(),
-    };
+    /** @private @const {!ActivityIframeView} */
+    this.activityIframeView_ = new ActivityIframeView(
+      deps.win(),
+      this.activityPorts_,
+      feUrl('/optionsiframe'),
+      feArgs({
+        'publicationId': deps.pageConfig().getPublicationId(),
+        'productId': deps.pageConfig().getProductId(),
+        'list': (options && options.list) || 'default',
+        'skus': (options && options.skus) || null,
+        'isClosable': true,
+      }),
+      /* shouldFadeBody */ false
+    );
   }
 
   /**
-   * Allows the receiving site to complete/acknowledge that it registered
-   * the subscription info. The typical action would be to create an
-   * account (or match an existing one) and associated the subscription with
-   * that account.
-   *
-   * SwG will display progress indicator until this method is called and
-   * upon receiving this call will show the confirmation to the user.
-   * The promise returned by this method will yield once the user closes
-   * the confirmation.
-   *
+   * Starts the offers flow or alreadySubscribed flow.
    * @return {!Promise}
    */
-  complete() {
-    return this.completeHandler_();
+  start() {
+    // Start/cancel events.
+    this.deps_
+      .callbacks()
+      .triggerFlowStarted(SubscriptionFlows.SHOW_SUBSCRIBE_OPTION);
+    this.activityIframeView_.onCancel(() => {
+      this.deps_
+        .callbacks()
+        .triggerFlowCanceled(SubscriptionFlows.SHOW_SUBSCRIBE_OPTION);
+    });
+    this.activityIframeView_.on(
+      SubscribeResponse$1,
+      this.maybeOpenOffersFlow_.bind(this)
+    );
+
+    this.activityIframeView_.acceptResult().then(
+      (result) => {
+        const data = result.data;
+        const response = new SubscribeResponse$1();
+        if (data['subscribe']) {
+          response.setSubscribe(true);
+        }
+        this.maybeOpenOffersFlow_(response);
+      },
+      (reason) => {
+        this.dialogManager_.completeView(this.activityIframeView_);
+        throw reason;
+      }
+    );
+    this.eventManager_.logSwgEvent(
+      AnalyticsEvent.IMPRESSION_CLICK_TO_SHOW_OFFERS
+    );
+    return this.dialogManager_.openView(this.activityIframeView_);
+  }
+
+  /**
+   * @param {SubscribeResponse} response
+   * @private
+   */
+  maybeOpenOffersFlow_(response) {
+    if (response.getSubscribe()) {
+      const options = this.options_ || {};
+      if (options.isClosable == undefined) {
+        options.isClosable = OFFERS_VIEW_CLOSABLE;
+      }
+      this.eventManager_.logSwgEvent(AnalyticsEvent.ACTION_VIEW_OFFERS, true);
+      new OffersFlow(this.deps_, options).start();
+    }
+  }
+}
+
+/**
+ * The class for Abbreviated Offer flow.
+ *
+ */
+class AbbrvOfferFlow {
+  /**
+   * @param {!./deps.DepsDef} deps
+   * @param {!../api/subscriptions.OffersRequest=} options
+   */
+  constructor(deps, options = {}) {
+    /** @private @const {!./deps.DepsDef} */
+    this.deps_ = deps;
+
+    /** @private @const {!../api/subscriptions.OffersRequest|undefined} */
+    this.options_ = options;
+
+    /** @private @const {!Window} */
+    this.win_ = deps.win();
+
+    /** @private @const {!../components/activities.ActivityPorts} */
+    this.activityPorts_ = deps.activities();
+
+    /** @private @const {!../components/dialog-manager.DialogManager} */
+    this.dialogManager_ = deps.dialogManager();
+
+    /** @private @const {!../runtime/client-event-manager.ClientEventManager} */
+    this.eventManager_ = deps.eventManager();
+
+    /** @private @const {!ActivityIframeView} */
+    this.activityIframeView_ = new ActivityIframeView(
+      this.win_,
+      this.activityPorts_,
+      feUrl('/abbrvofferiframe'),
+      feArgs({
+        'publicationId': deps.pageConfig().getPublicationId(),
+        'productId': deps.pageConfig().getProductId(),
+        'showNative': deps.callbacks().hasSubscribeRequestCallback(),
+        'list': (options && options.list) || 'default',
+        'skus': (options && options.skus) || null,
+        'isClosable': true,
+      }),
+      /* shouldFadeBody */ false
+    );
+  }
+
+  /**
+   * @param {AlreadySubscribedResponse} response
+   * @private
+   */
+  handleLinkRequest_(response) {
+    if (response.getSubscriberOrMember()) {
+      this.eventManager_.logSwgEvent(
+        AnalyticsEvent.ACTION_ALREADY_SUBSCRIBED,
+        true
+      );
+      this.deps_.callbacks().triggerLoginRequest({
+        linkRequested: !!response.getLinkRequested(),
+      });
+    }
+  }
+
+  /**
+   * Starts the offers flow
+   * @return {!Promise}
+   */
+  start() {
+    // Start/cancel events.
+    this.deps_
+      .callbacks()
+      .triggerFlowStarted(SubscriptionFlows.SHOW_ABBRV_OFFER);
+    this.activityIframeView_.onCancel(() => {
+      this.deps_
+        .callbacks()
+        .triggerFlowCanceled(SubscriptionFlows.SHOW_ABBRV_OFFER);
+    });
+
+    // If the user is already subscribed, trigger login flow
+    this.activityIframeView_.on(
+      AlreadySubscribedResponse,
+      this.handleLinkRequest_.bind(this)
+    );
+
+    // If result is due to requesting offers, redirect to offers flow
+    this.activityIframeView_.acceptResult().then((result) => {
+      if (result.data['viewOffers']) {
+        const options = this.options_ || {};
+        if (options.isClosable == undefined) {
+          options.isClosable = OFFERS_VIEW_CLOSABLE;
+        }
+        this.eventManager_.logSwgEvent(AnalyticsEvent.ACTION_VIEW_OFFERS, true);
+        new OffersFlow(this.deps_, options).start();
+        return;
+      }
+      if (result.data['native']) {
+        this.deps_.callbacks().triggerSubscribeRequest();
+        // The flow is complete.
+        this.dialogManager_.completeView(this.activityIframeView_);
+        return;
+      }
+    });
+
+    this.eventManager_.logSwgEvent(
+      AnalyticsEvent.IMPRESSION_CLICK_TO_SHOW_OFFERS_OR_ALREADY_SUBSCRIBED
+    );
+
+    return this.dialogManager_.openView(this.activityIframeView_);
   }
 }
 
@@ -5133,1519 +5538,59 @@ class DeferredAccountCreationResponse {
  * limitations under the License.
  */
 
+const {
+  ActivityIframePort: WebActivityIframePort,
+  ActivityPorts: WebActivityPorts,
+} = require('web-activities/activity-ports');
 /**
- * @enum {string}
+ * @implements {ActivityPortDef}
  */
-const SubscriptionState = {
-  // user's subscription state not known.
-  UNKNOWN: 'unknown',
-  // user is not a subscriber.
-  NON_SUBSCRIBER: 'non_subscriber',
-  // user is a subscriber.
-  SUBSCRIBER: 'subscriber',
-  // user's subscription has expired.
-  PAST_SUBSCRIBER: 'past_subscriber',
-};
+class ActivityPortDeprecated {
+  /**
+   * @param {!web-activities/activity-ports.ActivityPort} port
+   */
+  constructor(port) {
+    /** @private @const {!web-activities/activity-ports.ActivityPort} */
+    this.port_ = port;
+  }
+
+  /**
+   * @return {!Promise<!web-activities/activity-ports.ActivityResult>}
+   */
+  acceptResult() {
+    return this.port_.acceptResult();
+  }
+}
 
 /**
- * Subscription related events. Listed below are enum strings that
- * represent events related to Subscription flow. Event parameters
- * that provide more context about the event are sent as a JSON
- * block of depth 1 in the sendEvent() API call.
- * @enum {string}
+ * @implements {ActivityPortDef}
  */
-const Event = {
+class ActivityIframePort$1 {
   /**
-   * IMPRESSION_PAYWALL event.
-   * User hits a paywall.
-   * Every impression should be qualified as active or passive.
-   * The field 'active' of PropensityEvent, which carries this
-   * event, must be set to true or false to indicate this.
-   * If the user has run out of metering, and that’s why was shown
-   * a paywall, that would be a passive impression of the paywall.
-   * For example:
-   * const propensityEvent = {
-   *  name: 'paywall',
-   *  active: false,
-   * }
+   * @param {!HTMLIFrameElement} iframe
+   * @param {string} url
+   * @param {!../runtime/deps.DepsDef} deps
+   * @param {?Object=} args
    */
-  IMPRESSION_PAYWALL: 'paywall',
+  constructor(iframe, url, deps, args) {
+    /** @private @const {!web-activities/activity-ports.ActivityIframePort} */
+    this.iframePort_ = new WebActivityIframePort(iframe, url, args);
+    /** @private @const {!Object<string, function(!../proto/api_messages.Message)>} */
+    this.callbackMap_ = {};
+
+    /** @private @const {../runtime/deps.DepsDef} */
+    this.deps_ = deps;
+  }
+
   /**
-   * IMPRESSION_AD event.
-   * User has been shown a subscription ad.
-   * Every impression should be qualified as active or passive.
-   * The field 'active' of PropensityEvent, which carries this
-   * event, must be set to true or false to indicate this.
-   * The JSON block can provide the name of the subscription ad
-   * creative or campaign. Ad impressions are usually passive.
-   * const propensityEvent = {
-   *   name: 'ad_shown',
-   *   active: false,
-   *   data: {'ad_name': 'fall_ad'}
-   * }
+   * Returns a promise that yields when the iframe is ready to be interacted
+   * with.
+   * @return {!Promise}
    */
-  IMPRESSION_AD: 'ad_shown',
-  /**
-   * IMPRESSION_OFFERS event.
-   * User has been shown a list of available offers for subscription.
-   * Every impression should be qualified as active or passive.
-   * The field 'active' of PropensityEvent, which carries this
-   * event, must be set to true or false to indicate this.
-   * The JSON block can provide a list of products displayed,
-   * and the source to indicate why the user was shown the offer.
-   * Note: source is not the same as referrer.
-   * In the cases below, the user took action before seeing the offers,
-   * and therefore considered active impression.
-   * For example:
-   * const propensityEvent = {
-   *   name: 'offers_shown',
-   *   active: true,
-   *   data: {'offers': ['basic-monthly', 'premium-weekly'],
-   *           'source': 'ad-click'}
-   * }
-   * For example:
-   * const propensityEvent = {
-   *   name: 'offers_shown',
-   *   active: true,
-   *   data: {'offers': ['basic-monthly', 'premium-weekly'],
-   *           'source': ‘navigate-to-offers-page’}
-   * }
-   * If the user was shown the offers as a result of paywall metering
-   * expiration, it is considered a passive impression.
-   * For example:
-   * const propensityEvent = {
-   *   name: 'offers_shown',
-   *   active: false,
-   *   data: {'offers': ['basic-monthly', 'premium-weekly'],
-   *           'source': ‘paywall-metering-expired’}
-   * }
-   */
-  IMPRESSION_OFFERS: 'offers_shown',
-  /**
-   * ACTION_SUBSCRIPTIONS_LANDING_PAGE event.
-   * User has taken the action to arrive at a landing page of the
-   * subscription workflow. The landing page should satisfy one of
-   * the following conditions and hence be a part of the funnel to
-   * get the user to subscribe:
-   * - have a button to navigate the user to an offers page, (in
-   *   this case, the next event will be IMPRESSION_OFFERS, with
-   *   parameter 'source' as subscriptions-landing-page and
-   *   'is_active' set to true),
-   * - show offers the user can select, (in this case, the next
-   *   event will be IMPRESSION_OFFERS, with a parameter 'source'
-   *   as navigate-to-offers-page and 'is_active' set to true),
-   * - provide a way to start the payment flow for a specific offer.
-   *   (in this case, the next event will be ACTION_OFFER_SELECTED
-   *   or ACTION_PAYMENT_FLOW_STARTED depending on if that button
-   *   took the user to a checkout page on the publishers site or
-   *   directly started the payment flow).
-   * The field 'active' of PropensityEvent, which carries this
-   * event, must be set to true since this is a user action.
-   * The JSON block with this event can provide additional information
-   * such as the source, indicating what caused the user to navigate
-   * to this page.
-   * For example:
-   * const propensityEvent = {
-   *   name: 'subscriptions_landing_page',
-   *   active: true,
-   *   data: {'source': 'marketing_via_email'}
-   * }
-   */
-  ACTION_SUBSCRIPTIONS_LANDING_PAGE: 'subscriptions_landing_page',
-  /**
-   * ACTION_OFFER_SELECTED event.
-   * User has selected an offer.
-   * The field 'active' of PropensityEvent, which carries this
-   * event, must be set to true since this is a user action.
-   * The JSON block can provide the product selected.
-   * For example: {
-   *   name: 'offer_selected',
-   *   active: true,
-   *   data: {product': 'basic-monthly'}
-   * }
-   * When offer selection starts the payment flow directly,
-   * use the next event ACTION_PAYMENT_FLOW_STARTED instead.
-   */
-  ACTION_OFFER_SELECTED: 'offer_selected',
-  /**
-   * ACTION_PAYMENT_FLOW_STARTED event.
-   * User has started payment flow.
-   * The field 'active' of PropensityEvent, which carries this
-   * event, must be set to true since this is a user action.
-   * The JSON block can provide the product selected.
-   * For example:
-   * const propensityEvent = {
-   *   name: 'payment_flow_started',
-   *   active: true,
-   *   data: {product': 'basic-monthly'}
-   * }
-   */
-  ACTION_PAYMENT_FLOW_STARTED: 'payment_flow_start',
-  /**
-   * ACTION_PAYMENT_COMPLETED.
-   * User has made the payment for a subscription.
-   * The field 'active' of PropensityEvent, which carries this
-   * event, must be set to true since this is a user action.
-   * The JSON block can provide the product user paid for.
-   * For example:
-   * const propensityEvent = {
-   *   name: 'payment_complete',
-   *   active: true,
-   *   data: {product': 'basic-monthly'}
-   * }
-   */
-  ACTION_PAYMENT_COMPLETED: 'payment_complete',
-  /**
-   * EVENT_CUSTOM: custom publisher event.
-   * The field 'active' of PropensityEvent, which carries this
-   * event, must be set to true or false depending on if the event
-   * was generated as a result of a user action.
-   * The JSON block can provide the event name for the custom event.
-   * For example:
-   * const propensityEvent = {
-   *   name: 'custom',
-   *   active: true,
-   *   data: {
-   *     'event_name': 'social_share',
-   *     'platform_used': 'whatsapp'
-   *   }
-   *  }
-   */
-  EVENT_CUSTOM: 'custom',
-};
-
-/**
- * Copyright 2018 The Subscribe with Google 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.
- */
-
-/**
- * @enum {string}
- */
-const PropensityType = {
-  // Propensity score for a user to subscribe to a publication.
-  GENERAL: 'general',
-  // Propensity score when blocked access to content by paywall.
-  PAYWALL: 'paywall',
-};
-
-/**
- * Copyright 2018 The Subscribe with Google 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.
- */
-
-/** @enum {string} */
-const SubscriptionFlows = {
-  SHOW_OFFERS: 'showOffers',
-  SHOW_SUBSCRIBE_OPTION: 'showSubscribeOption',
-  SHOW_ABBRV_OFFER: 'showAbbrvOffer',
-  SHOW_CONTRIBUTION_OPTIONS: 'showContributionOptions',
-  SUBSCRIBE: 'subscribe',
-  CONTRIBUTE: 'contribute',
-  COMPLETE_DEFERRED_ACCOUNT_CREATION: 'completeDeferredAccountCreation',
-  LINK_ACCOUNT: 'linkAccount',
-  SHOW_LOGIN_PROMPT: 'showLoginPrompt',
-  SHOW_LOGIN_NOTIFICATION: 'showLoginNotification',
-};
-
-/**
- * @enum {number}
- */
-const AnalyticsMode = {
-  DEFAULT: 0,
-  IMPRESSIONS: 1,
-};
-
-/**
- * @enum {string}
- */
-const WindowOpenMode = {
-  AUTO: 'auto',
-  REDIRECT: 'redirect',
-};
-
-/**
- * The Offers/Contributions UI is rendered differently based on the
- * ProductType. The ProductType parameter is passed to the Payments flow, and
- * then passed back to the Payments confirmation page to render messages/text
- * based on the ProductType.
- * @enum {string}
- */
-const ProductType = {
-  SUBSCRIPTION: 'SUBSCRIPTION',
-  UI_CONTRIBUTION: 'UI_CONTRIBUTION',
-};
-
-/**
- * @return {!Config}
- */
-function defaultConfig() {
-  return {
-    windowOpenMode: WindowOpenMode.AUTO,
-    analyticsMode: AnalyticsMode.DEFAULT,
-    enableSwgAnalytics: false,
-    enablePropensity: false,
-  };
-}
-
-/**
- * Copyright 2018 The Subscribe with Google 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.
- */
-
-/**
- * Cached a-tag to avoid memory allocation during URL parsing.
- * @type {HTMLAnchorElement}
- */
-let a;
-
-/**
- * We cached all parsed URLs. As of now there are no use cases
- * of AMP docs that would ever parse an actual large number of URLs,
- * but we often parse the same one over and over again.
- * @type {Object<string, !LocationDef>}
- */
-let cache;
-
-/**
- * Returns a Location-like object for the given URL. If it is relative,
- * the URL gets resolved.
- * Consider the returned object immutable. This is enforced during
- * testing by freezing the object.
- * @param {string} url
- * @return {!LocationDef}
- */
-function parseUrl$1(url) {
-  if (!a) {
-    a = /** @type {!HTMLAnchorElement} */ (self.document.createElement('a'));
-    cache = self.UrlCache || (self.UrlCache = Object.create(null));
-  }
-
-  const fromCache = cache[url];
-  if (fromCache) {
-    return fromCache;
-  }
-
-  const info = parseUrlWithA(a, url);
-
-  return (cache[url] = info);
-}
-
-/**
- * Returns a Location-like object for the given URL. If it is relative,
- * the URL gets resolved.
- * @param {!HTMLAnchorElement} a
- * @param {string} url
- * @return {!LocationDef}
- */
-function parseUrlWithA(a, url) {
-  a.href = url;
-
-  // IE11 doesn't provide full URL components when parsing relative URLs.
-  // Assigning to itself again does the trick.
-  if (!a.protocol) {
-    a.href = a.href;
-  }
-
-  /** @type {!LocationDef} */
-  const info = {
-    href: a.href,
-    protocol: a.protocol,
-    host: a.host,
-    hostname: a.hostname,
-    port: a.port == '0' ? '' : a.port,
-    pathname: a.pathname,
-    search: a.search,
-    hash: a.hash,
-    origin: '', // Set below.
-  };
-
-  // Some IE11 specific polyfills.
-  // 1) IE11 strips out the leading '/' in the pathname.
-  if (info.pathname[0] !== '/') {
-    info.pathname = '/' + info.pathname;
-  }
-
-  // 2) For URLs with implicit ports, IE11 parses to default ports while
-  // other browsers leave the port field empty.
-  if (
-    (info.protocol == 'http:' && info.port == 80) ||
-    (info.protocol == 'https:' && info.port == 443)
-  ) {
-    info.port = '';
-    info.host = info.hostname;
-  }
-
-  // For data URI a.origin is equal to the string 'null' which is not useful.
-  // We instead return the actual origin which is the full URL.
-  if (a.origin && a.origin != 'null') {
-    info.origin = a.origin;
-  } else if (info.protocol == 'data:' || !info.host) {
-    info.origin = info.href;
-  } else {
-    info.origin = info.protocol + '//' + info.host;
-  }
-  return info;
-}
-
-/**
- * Parses and builds Object of URL query string.
- * @param {string} query The URL query string.
- * @return {!Object<string, string>}
- */
-function parseQueryString$1(query) {
-  if (!query) {
-    return {};
-  }
-  return (/^[?#]/.test(query) ? query.slice(1) : query)
-    .split('&')
-    .reduce((params, param) => {
-      const item = param.split('=');
-      const key = decodeURIComponent(item[0] || '');
-      const value = decodeURIComponent(item[1] || '');
-      if (key) {
-        params[key] = value;
-      }
-      return params;
-    }, {});
-}
-
-/**
- * Adds a parameter to a query string.
- * @param {string} url
- * @param {string} param
- * @param {string} value
- * @return {string}
- */
-function addQueryParam(url, param, value) {
-  const queryIndex = url.indexOf('?');
-  const fragmentIndex = url.indexOf('#');
-  let fragment = '';
-  if (fragmentIndex != -1) {
-    fragment = url.substring(fragmentIndex);
-    url = url.substring(0, fragmentIndex);
-  }
-  if (queryIndex == -1) {
-    url += '?';
-  } else if (queryIndex < url.length - 1) {
-    url += '&';
-  }
-  url += encodeURIComponent(param) + '=' + encodeURIComponent(value);
-  return url + fragment;
-}
-
-/**
- * @param {!../proto/api_messages.Message} message
- * @return {string}
- */
-function serializeProtoMessageForUrl(message) {
-  return JSON.stringify(/** @type {JsonObject} */ (message.toArray(false)));
-}
-
-/**
- * Copyright 2018 The Subscribe with Google 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.
- */
-
-/**
- * Have to put these in the map to avoid compiler optimization. Due to
- * optimization issues, this map only allows property-style keys. E.g. "hr1",
- * as opposed to "1hr".
- * @type {!Object<string, number>}
- * @package Visible for testing only.
- */
-const CACHE_KEYS = {
-  'nocache': 1,
-  'hr1': 3600000, // 1hr = 1000 * 60 * 60
-  'hr12': 43200000, // 12hr = 1000 * 60 * 60 * 12
-};
-
-/**
- * @return {string}
- */
-function feOrigin() {
-  return parseUrl$1('https://news.google.com').origin;
-}
-
-/**
- * @param {string} url Relative URL, e.g. "/service1".
- * @return {string} The complete URL.
- */
-function serviceUrl(url) {
-  return 'https://news.google.com/swg/_/api/v1' + url;
-}
-
-/**
- * @param {string} url  Relative URL, e.g. "/service1".
- * @return {string} The complete URL.
- */
-function adsUrl(url) {
-  return 'https://pubads.g.doubleclick.net' + url;
-}
-
-/**
- * @param {string} url Relative URL, e.g. "/offersiframe".
- * @param {string=} prefix
- * @return {string} The complete URL.
- */
-function feUrl(url, prefix = '') {
-  // Add cache param.
-  url = feCached('https://news.google.com' + prefix + '/swg/_/ui/v1' + url);
-
-  // Optionally add jsmode param. This allows us to test against "aggressively" compiled Boq JS.
-  const query = parseQueryString$1(self.location.hash);
-  const boqJsMode = query['swg.boqjsmode'];
-  if (boqJsMode !== undefined) {
-    url = addQueryParam(url, 'jsmode', boqJsMode);
-  }
-
-  return url;
-}
-
-/**
- * @param {string} url FE URL.
- * @return {string} The complete URL including cache param.
- */
-function feCached(url) {
-  return addQueryParam(url, '_', cacheParam('hr1'));
-}
-
-/**
- * @param {!Object<string, ?>} args
- * @return {!Object<string, ?>}
- */
-function feArgs(args) {
-  return Object.assign(args, {
-    '_client': 'SwG 0.1.22.107',
-  });
-}
-
-/**
- * @param {string} cacheKey
- * @return {string}
- * @package Visible for testing only.
- */
-function cacheParam(cacheKey) {
-  let period = CACHE_KEYS[cacheKey];
-  if (period == null) {
-    period = 1;
-  }
-  if (period === 0) {
-    return '_';
-  }
-  const now = Date.now();
-  return String(period <= 1 ? now : Math.floor(now / period));
-}
-
-/**
- * Copyright 2018 The Subscribe with Google 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.
- *
- * The Flow goes like this:
- * a. Start Payments
- * b. Complete Payments
- * c. Create Account
- * d. Acknowledge Account
- *
- * In other words, Flow = Payments + Account Creation.
- */
-
-/**
- * String values input by the publisher are mapped to the number values.
- * @type {!Object<string, number>}
- */
-const ReplaceSkuProrationModeMapping = {
-  // The replacement takes effect immediately, and the remaining time will
-  // be prorated and credited to the user. This is the current default
-  // behavior.
-  'IMMEDIATE_WITH_TIME_PRORATION': 1,
-};
-
-const RecurrenceMapping = {
-  'AUTO': 1,
-  'ONE_TIME': 2,
-};
-
-/**
- * @param {string} sku
- * @return {!EventParams}
- */
-function getEventParams(sku) {
-  return new EventParams([, , , , sku]);
-}
-
-/**
- * The flow to initiate payment process.
- */
-class PayStartFlow {
-  /**
-   * @param {!./deps.DepsDef} deps
-   * @param {!../api/subscriptions.SubscriptionRequest} subscriptionRequest
-   * @param {!../api/subscriptions.ProductType} productType
-   */
-  constructor(
-    deps,
-    subscriptionRequest,
-    productType = ProductType.SUBSCRIPTION
-  ) {
-    /** @private @const {!./deps.DepsDef} */
-    this.deps_ = deps;
-
-    /** @private @const {!./pay-client.PayClient} */
-    this.payClient_ = deps.payClient();
-
-    /** @private @const {!../model/page-config.PageConfig} */
-    this.pageConfig_ = deps.pageConfig();
-
-    /** @private @const {!../components/dialog-manager.DialogManager} */
-    this.dialogManager_ = deps.dialogManager();
-
-    /** @private @const {!../api/subscriptions.SubscriptionRequest} */
-    this.subscriptionRequest_ = subscriptionRequest;
-
-    /**@private @const {!ProductType} */
-    this.productType_ = productType;
-
-    /** @private @const {!../runtime/analytics-service.AnalyticsService} */
-    this.analyticsService_ = deps.analytics();
-
-    /** @private @const {!../runtime/client-event-manager.ClientEventManager} */
-    this.eventManager_ = deps.eventManager();
-  }
-
-  /**
-   * Starts the payments flow.
-   * @return {!Promise}
-   */
-  start() {
-    // Add the 'publicationId' key to the subscriptionRequest_ object.
-    const swgPaymentRequest = Object.assign({}, this.subscriptionRequest_, {
-      'publicationId': this.pageConfig_.getPublicationId(),
-    });
-
-    // Map the proration mode to the enum value (if proration exists).
-    const prorationMode = swgPaymentRequest['replaceSkuProrationMode'];
-    if (prorationMode) {
-      swgPaymentRequest['replaceSkuProrationMode'] =
-        ReplaceSkuProrationModeMapping[prorationMode];
-    } else if (swgPaymentRequest['oldSku']) {
-      swgPaymentRequest['replaceSkuProrationMode'] =
-        ReplaceSkuProrationModeMapping['IMMEDIATE_WITH_TIME_PRORATION'];
-    }
-    // Assign one-time recurrence enum if applicable
-    if (swgPaymentRequest['oneTime']) {
-      swgPaymentRequest['paymentRecurrence'] = RecurrenceMapping['ONE_TIME'];
-      delete swgPaymentRequest['oneTime'];
-    }
-
-    // Start/cancel events.
-    const flow =
-      this.productType_ == ProductType.UI_CONTRIBUTION
-        ? SubscriptionFlows.CONTRIBUTE
-        : SubscriptionFlows.SUBSCRIBE;
-
-    this.deps_.callbacks().triggerFlowStarted(flow, this.subscriptionRequest_);
-    if (swgPaymentRequest['oldSku']) {
-      this.analyticsService_.setSku(swgPaymentRequest['oldSku']);
-    }
-    this.eventManager_.logSwgEvent(
-      AnalyticsEvent.ACTION_PAYMENT_FLOW_STARTED,
-      true,
-      getEventParams(swgPaymentRequest['skuId'])
-    );
-    PayCompleteFlow.waitingForPayClient_ = true;
-    this.payClient_.start(
-      /** @type {!PaymentDataRequest} */
-      ({
-        'apiVersion': 1,
-        'allowedPaymentMethods': ['CARD'],
-        'environment': 'PRODUCTION',
-        'playEnvironment': 'PROD',
-        'swg': swgPaymentRequest,
-        'i': {
-          'startTimeMs': Date.now(),
-          'productType': this.productType_,
-        },
-      }),
-      {
-        forceRedirect:
-          this.deps_.config().windowOpenMode == WindowOpenMode.REDIRECT,
-      }
-    );
-    return Promise.resolve();
-  }
-}
-
-/**
- * The flow for successful payments completion.
- */
-class PayCompleteFlow {
-  /**
-   * @param {!./deps.DepsDef} deps
-   */
-  static configurePending(deps) {
-    /** @const @type {./client-event-manager.ClientEventManager} */
-    const eventManager = deps.eventManager();
-
-    deps.payClient().onResponse((payPromise) => {
-      deps.entitlementsManager().blockNextNotification();
-      const flow = new PayCompleteFlow(deps);
-      const promise = validatePayResponse(
-        deps,
-        payPromise,
-        flow.complete.bind(flow)
-      );
-      deps.callbacks().triggerPaymentResponse(promise);
-      return promise.then(
-        (response) => {
-          const sku = parseSkuFromPurchaseDataSafe(response.purchaseData);
-          deps.analytics().setSku(sku || '');
-          eventManager.logSwgEvent(
-            AnalyticsEvent.ACTION_PAYMENT_COMPLETE,
-            true,
-            getEventParams(sku || '')
-          );
-          flow.start(response);
-        },
-        (reason) => {
-          if (isCancelError(reason)) {
-            const productType = /** @type {!Object} */ (reason)['productType'];
-            const flow =
-              productType == ProductType.UI_CONTRIBUTION
-                ? SubscriptionFlows.CONTRIBUTE
-                : SubscriptionFlows.SUBSCRIBE;
-            deps.callbacks().triggerFlowCanceled(flow);
-            deps
-              .eventManager()
-              .logSwgEvent(AnalyticsEvent.ACTION_USER_CANCELED_PAYFLOW, true);
-          } else {
-            deps
-              .eventManager()
-              .logSwgEvent(AnalyticsEvent.EVENT_PAYMENT_FAILED, false);
-            deps.jserror().error('Pay failed', reason);
-            throw reason;
-          }
-        }
-      );
-    });
-  }
-
-  /**
-   * @param {!./deps.DepsDef} deps
-   */
-  constructor(deps) {
-    /** @private @const {!Window} */
-    this.win_ = deps.win();
-
-    /** @private @const {!./deps.DepsDef} */
-    this.deps_ = deps;
-
-    /** @private @const {!../components/activities.ActivityPorts} */
-    this.activityPorts_ = deps.activities();
-
-    /** @private @const {!../components/dialog-manager.DialogManager} */
-    this.dialogManager_ = deps.dialogManager();
-
-    /** @private {?ActivityIframeView} */
-    this.activityIframeView_ = null;
-
-    /** @private {?SubscribeResponse} */
-    this.response_ = null;
-
-    /** @private {?Promise} */
-    this.readyPromise_ = null;
-
-    /** @private @const {!../runtime/analytics-service.AnalyticsService} */
-    this.analyticsService_ = deps.analytics();
-
-    /** @private @const {!../runtime/client-event-manager.ClientEventManager} */
-    this.eventManager_ = deps.eventManager();
-
-    /** @private {?string} */
-    this.sku_ = null;
-  }
-
-  /**
-   * Starts the payments completion flow.
-   * @param {!SubscribeResponse} response
-   * @return {!Promise}
-   */
-  start(response) {
-    this.sku_ = parseSkuFromPurchaseDataSafe(response.purchaseData);
-    this.eventManager_.logSwgEvent(
-      AnalyticsEvent.IMPRESSION_ACCOUNT_CHANGED,
-      true,
-      getEventParams(this.sku_ || '')
-    );
-    this.deps_.entitlementsManager().reset(true);
-    this.response_ = response;
-    // TODO(dianajing): future-proof isOneTime flag
-    const args = {
-      'publicationId': this.deps_.pageConfig().getPublicationId(),
-      'productType': this.response_['productType'],
-      'isSubscriptionUpdate': !!this.response_['oldSku'],
-      'isOneTime': !!this.response_['paymentRecurrence'],
-    };
-    // TODO(dvoytenko, #400): cleanup once entitlements is launched everywhere.
-    if (response.userData && response.entitlements) {
-      args['idToken'] = response.userData.idToken;
-      this.deps_
-        .entitlementsManager()
-        .pushNextEntitlements(response.entitlements.raw);
-    } else {
-      args['loginHint'] = response.userData && response.userData.email;
-    }
-    this.activityIframeView_ = new ActivityIframeView(
-      this.win_,
-      this.activityPorts_,
-      feUrl('/payconfirmiframe'),
-      feArgs(args),
-      /* shouldFadeBody */ true
-    );
-
-    this.activityIframeView_.on(
-      EntitlementsResponse,
-      this.handleEntitlementsResponse_.bind(this)
-    );
-
-    this.activityIframeView_.acceptResult().then(() => {
-      // The flow is complete.
-      this.dialogManager_.completeView(this.activityIframeView_);
-    });
-    this.readyPromise_ = this.dialogManager_.openView(this.activityIframeView_);
-    return this.readyPromise_;
-  }
-
-  /**
-   * @param {!EntitlementsResponse} response
-   * @private
-   */
-  handleEntitlementsResponse_(response) {
-    const jwt = response.getJwt();
-    if (jwt) {
-      this.deps_.entitlementsManager().pushNextEntitlements(jwt);
-    }
-  }
-
-  /**
-   * @return {!Promise}
-   */
-  complete() {
-    this.eventManager_.logSwgEvent(
-      AnalyticsEvent.ACTION_ACCOUNT_CREATED,
-      true,
-      getEventParams(this.sku_ || '')
-    );
-    this.deps_.entitlementsManager().unblockNextNotification();
-    this.readyPromise_.then(() => {
-      const accountCompletionRequest = new AccountCreationRequest();
-      accountCompletionRequest.setComplete(true);
-      this.activityIframeView_.execute(accountCompletionRequest);
-    });
-    return this.activityIframeView_
-      .acceptResult()
-      .catch(() => {
-        // Ignore errors.
-      })
-      .then(() => {
-        this.eventManager_.logSwgEvent(
-          AnalyticsEvent.ACTION_ACCOUNT_ACKNOWLEDGED,
-          true,
-          getEventParams(this.sku_ || '')
-        );
-        this.deps_.entitlementsManager().setToastShown(true);
-      });
-  }
-}
-
-/** @private {boolean} */
-PayCompleteFlow.waitingForPayClient_ = false;
-
-/**
- * @param {!./deps.DepsDef} deps
- * @param {!Promise<!Object>} payPromise
- * @param {function():!Promise} completeHandler
- * @return {!Promise<!SubscribeResponse>}
- */
-function validatePayResponse(deps, payPromise, completeHandler) {
-  const wasRedirect = !PayCompleteFlow.waitingForPayClient_;
-  PayCompleteFlow.waitingForPayClient_ = false;
-  return payPromise.then((data) => {
-    // 1) We log against a random TX ID which is how we track a specific user
-    //    anonymously.
-    // 2) If there was a redirect to gPay, we may have lost our stored TX ID.
-    // 3) Pay service is supposed to give us the TX ID it logged against.
-    let eventType = AnalyticsEvent.UNKNOWN;
-    let eventParams = undefined;
-    if (typeof data !== 'object' || !data['googleTransactionId']) {
-      // If gPay doesn't give us a TX ID it means that something may
-      // be wrong.  If we previously logged then we are at least continuing to
-      // log against the same TX ID.  If we didn't previously log then we have
-      // lost all connection to the events that preceded the payment event and
-      // we at least want to know why that data was lost.
-      eventParams = new EventParams();
-      eventParams.setHadLogged(!wasRedirect);
-      eventType = AnalyticsEvent.EVENT_GPAY_NO_TX_ID;
-    } else {
-      const oldTxId = deps.analytics().getTransactionId();
-      const newTxId = data['googleTransactionId'];
-
-      if (wasRedirect) {
-        // This is the expected case for full redirects.  It may be happening
-        // unexpectedly at other times too though and we want to be aware of
-        // it if it does.
-        deps.analytics().setTransactionId(newTxId);
-        eventType = AnalyticsEvent.EVENT_GPAY_CANNOT_CONFIRM_TX_ID;
-      } else {
-        if (oldTxId === newTxId) {
-          // This is the expected case for non-redirect pay events
-          eventType = AnalyticsEvent.EVENT_CONFIRM_TX_ID;
-        } else {
-          // This is an unexpected case: gPay rejected our TX ID and created
-          // its own.  Log the gPay TX ID but keep our logging consistent.
-          eventParams = new EventParams();
-          eventParams.setGpayTransactionId(newTxId);
-          eventType = AnalyticsEvent.EVENT_CHANGED_TX_ID;
-        }
-      }
-    }
-    deps.eventManager().logSwgEvent(eventType, true, eventParams);
-    return parseSubscriptionResponse(deps, data, completeHandler);
-  });
-}
-
-/**
- * @param {!./deps.DepsDef} deps
- * @param {*} data
- * @param {function():!Promise} completeHandler
- * @return {!SubscribeResponse}
- */
-function parseSubscriptionResponse(deps, data, completeHandler) {
-  let swgData = null;
-  let raw = null;
-  let productType = ProductType.SUBSCRIPTION;
-  let oldSku = null;
-  let paymentRecurrence = null;
-
-  if (data) {
-    if (typeof data == 'string') {
-      raw = /** @type {string} */ (data);
-    } else {
-      // Assume it's a json object in the format:
-      // `{integratorClientCallbackData: "..."}` or `{swgCallbackData: "..."}`.
-      const json = /** @type {!Object} */ (data);
-      if ('swgCallbackData' in json) {
-        swgData = /** @type {!Object} */ (json['swgCallbackData']);
-      } else if ('integratorClientCallbackData' in json) {
-        raw = json['integratorClientCallbackData'];
-      }
-      if ('paymentRequest' in data) {
-        oldSku = (data['paymentRequest']['swg'] || {})['oldSku'];
-        paymentRecurrence = (data['paymentRequest']['swg'] || {})[
-          'paymentRecurrence'
-        ];
-        productType =
-          (data['paymentRequest']['i'] || {})['productType'] ||
-          ProductType.SUBSCRIPTION;
-      }
-    }
-  }
-  if (raw && !swgData) {
-    raw = atob(raw);
-    if (raw) {
-      const parsed = parseJson(raw);
-      swgData = parsed['swgCallbackData'];
-    }
-  }
-  if (!swgData) {
-    throw new Error('unexpected payment response');
-  }
-  raw = JSON.stringify(/** @type {!JsonObject} */ (swgData));
-  return new SubscribeResponse$1(
-    raw,
-    parsePurchaseData(swgData),
-    parseUserData(swgData),
-    parseEntitlements(deps, swgData),
-    productType,
-    completeHandler,
-    oldSku,
-    paymentRecurrence
-  );
-}
-
-/**
- * @param {!Object} swgData
- * @return {!PurchaseData}
- */
-function parsePurchaseData(swgData) {
-  const raw = swgData['purchaseData'];
-  const signature = swgData['purchaseDataSignature'];
-  return new PurchaseData(raw, signature);
-}
-
-/**
- * @param {!Object} swgData
- * @return {?UserData}
- * @package Visible for testing.
- */
-function parseUserData(swgData) {
-  const idToken = swgData['idToken'];
-  if (!idToken) {
-    return null;
-  }
-  const jwt = /** @type {!Object} */ (new JwtHelper().decode(idToken));
-  return new UserData(idToken, jwt);
-}
-
-/**
- * @param {!./deps.DepsDef} deps
- * @param {!Object} swgData
- * @return {?../api/entitlements.Entitlements}
- * @package Visible for testing.
- */
-function parseEntitlements(deps, swgData) {
-  if (swgData['signedEntitlements']) {
-    return deps.entitlementsManager().parseEntitlements(swgData);
-  }
-  return null;
-}
-
-/**
- * @param {!PurchaseData} purchaseData
- * @return {?string}
- */
-function parseSkuFromPurchaseDataSafe(purchaseData) {
-  return /** @type {?string} */ (getPropertyFromJsonString(
-    purchaseData.raw,
-    'productId'
-  ) || null);
-}
-
-/**
- * Copyright 2018 The Subscribe with Google 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.
- */
-
-/**
- * @param {string} sku
- * @return {!EventParams}
- */
-function getEventParams$1(sku) {
-  return new EventParams([, , , , sku]);
-}
-
-/**
- * Offers view is closable when request was originated from 'AbbrvOfferFlow'
- * or from 'SubscribeOptionFlow'.
- */
-const OFFERS_VIEW_CLOSABLE = true;
-
-// The value logged when the offers screen shows all available SKUs.
-const ALL_SKUS = '*';
-
-/**
- * The class for Offers flow.
- */
-class OffersFlow {
-  /**
-   * @param {!./deps.DepsDef} deps
-   * @param {!../api/subscriptions.OffersRequest|undefined} options
-   */
-  constructor(deps, options) {
-    /** @private @const {!./deps.DepsDef} */
-    this.deps_ = deps;
-
-    /** @private @const {!Window} */
-    this.win_ = deps.win();
-
-    /** @private @const {!../components/activities.ActivityPorts} */
-    this.activityPorts_ = deps.activities();
-
-    /** @private @const {!../components/dialog-manager.DialogManager} */
-    this.dialogManager_ = deps.dialogManager();
-
-    /** @private @const {!../runtime/client-event-manager.ClientEventManager} */
-    this.eventManager_ = deps.eventManager();
-
-    let isClosable = options && options.isClosable;
-    if (isClosable == undefined) {
-      isClosable = false; // Default is to hide Close button.
-    }
-
-    const feArgsObj = deps.activities().addDefaultArguments({
-      'showNative': deps.callbacks().hasSubscribeRequestCallback(),
-      'productType': ProductType.SUBSCRIPTION,
-      'list': (options && options.list) || 'default',
-      'skus': (options && options.skus) || null,
-      'isClosable': isClosable,
-    });
-
-    if (options && options.oldSku) {
-      feArgsObj['oldSku'] = options.oldSku;
-      log_2(feArgsObj['skus'], 'Need a sku list if old sku is provided!');
-
-      // Remove old sku from offers if in list.
-      let skuList = feArgsObj['skus'];
-      const /** @type {string} */ oldSku = feArgsObj['oldSku'];
-      skuList = skuList.filter(sku => sku !== oldSku);
-
-      log_2(
-        skuList.length > 0,
-        'Sku list only contained offer user already has'
-      );
-      feArgsObj['skus'] = skuList;
-    }
-
-    // Redirect to payments if only one upgrade option is passed.
-    if (feArgsObj['skus'] && feArgsObj['skus'].length === 1) {
-      const sku = feArgsObj['skus'][0];
-      const /** @type {string|undefined} */ oldSku = feArgsObj['oldSku'];
-      // Update subscription triggers experimental flag if oldSku is passed,
-      // so we need to check for oldSku to decide if it needs to be sent.
-      // Otherwise we might accidentally block a regular subscription request.
-      if (oldSku) {
-        const skuSelectedResponse = new SkuSelectedResponse();
-        skuSelectedResponse.setSku(sku);
-        skuSelectedResponse.setOldSku(oldSku);
-        this.startPayFlow_(skuSelectedResponse);
-        return;
-      }
-    }
-
-    /** @private  @const {!Array<!string>} */
-    this.skus_ = feArgsObj['skus'] || [ALL_SKUS];
-
-    /** @private @const {!ActivityIframeView} */
-    this.activityIframeView_ = new ActivityIframeView(
-      this.win_,
-      this.activityPorts_,
-      feUrl('/offersiframe'),
-      feArgsObj,
-      /* shouldFadeBody */ true
-    );
-  }
-
-  /**
-   * @param {SkuSelectedResponse} response
-   * @private
-   */
-  startPayFlow_(response) {
-    const sku = response.getSku();
-    if (sku) {
-      const /** @type {../api/subscriptions.SubscriptionRequest} */ subscriptionRequest = {
-          'skuId': sku,
-        };
-      const oldSku = response.getOldSku();
-      if (oldSku) {
-        subscriptionRequest['oldSku'] = oldSku;
-        this.deps_.analytics().setSku(oldSku);
-      }
-      this.eventManager_.logSwgEvent(
-        AnalyticsEvent.ACTION_OFFER_SELECTED,
-        true,
-        getEventParams$1(sku)
-      );
-      new PayStartFlow(this.deps_, subscriptionRequest).start();
-    }
-  }
-
-  /**
-   * @param {AlreadySubscribedResponse} response
-   * @private
-   */
-  handleLinkRequest_(response) {
-    if (response.getSubscriberOrMember()) {
-      this.eventManager_.logSwgEvent(
-        AnalyticsEvent.ACTION_ALREADY_SUBSCRIBED,
-        true
-      );
-      this.deps_.callbacks().triggerLoginRequest({
-        linkRequested: !!response.getLinkRequested(),
-      });
-    }
-  }
-
-  /**
-   * @param {ViewSubscriptionsResponse} response
-   * @private
-   */
-  startNativeFlow_(response) {
-    if (response.getNative()) {
-      this.deps_.callbacks().triggerSubscribeRequest();
-    }
-  }
-
-  /**
-   * Starts the offers flow or alreadySubscribed flow.
-   * @return {!Promise}
-   */
-  start() {
-    if (this.activityIframeView_) {
-      // So no error if skipped to payment screen.
-      // Start/cancel events.
-      // The second parameter is required by Propensity in AMP.
-      this.deps_.callbacks().triggerFlowStarted(SubscriptionFlows.SHOW_OFFERS, {
-        skus: this.skus_,
-        source: 'SwG',
-      });
-      this.activityIframeView_.onCancel(() => {
-        this.deps_
-          .callbacks()
-          .triggerFlowCanceled(SubscriptionFlows.SHOW_OFFERS);
-      });
-      this.activityIframeView_.on(
-        SkuSelectedResponse,
-        this.startPayFlow_.bind(this)
-      );
-      this.activityIframeView_.on(
-        AlreadySubscribedResponse,
-        this.handleLinkRequest_.bind(this)
-      );
-      this.activityIframeView_.on(
-        ViewSubscriptionsResponse,
-        this.startNativeFlow_.bind(this)
-      );
-
-      return this.dialogManager_.openView(this.activityIframeView_);
-    }
-    return Promise.resolve();
-  }
-}
-
-/**
- * The class for subscribe option flow.
- */
-class SubscribeOptionFlow {
-  /**
-   * @param {!./deps.DepsDef} deps
-   * @param {!../api/subscriptions.OffersRequest|undefined} options
-   */
-  constructor(deps, options) {
-    /** @private @const {!./deps.DepsDef} */
-    this.deps_ = deps;
-
-    /** @private @const {!../api/subscriptions.OffersRequest|undefined} */
-    this.options_ = options;
-
-    /** @private @const {!../components/activities.ActivityPorts} */
-    this.activityPorts_ = deps.activities();
-
-    /** @private @const {!../components/dialog-manager.DialogManager} */
-    this.dialogManager_ = deps.dialogManager();
-
-    /** @private @const {!../runtime/client-event-manager.ClientEventManager} */
-    this.eventManager_ = deps.eventManager();
-
-    /** @private @const {!ActivityIframeView} */
-    this.activityIframeView_ = new ActivityIframeView(
-      deps.win(),
-      this.activityPorts_,
-      feUrl('/optionsiframe'),
-      feArgs({
-        'publicationId': deps.pageConfig().getPublicationId(),
-        'productId': deps.pageConfig().getProductId(),
-        'list': (options && options.list) || 'default',
-        'skus': (options && options.skus) || null,
-        'isClosable': true,
-      }),
-      /* shouldFadeBody */ false
-    );
-  }
-
-  /**
-   * Starts the offers flow or alreadySubscribed flow.
-   * @return {!Promise}
-   */
-  start() {
-    // Start/cancel events.
-    this.deps_
-      .callbacks()
-      .triggerFlowStarted(SubscriptionFlows.SHOW_SUBSCRIBE_OPTION);
-    this.activityIframeView_.onCancel(() => {
-      this.deps_
-        .callbacks()
-        .triggerFlowCanceled(SubscriptionFlows.SHOW_SUBSCRIBE_OPTION);
-    });
-    this.activityIframeView_.on(
-      SubscribeResponse,
-      this.maybeOpenOffersFlow_.bind(this)
-    );
-
-    this.activityIframeView_.acceptResult().then(
-      result => {
-        const data = result.data;
-        const response = new SubscribeResponse();
-        if (data['subscribe']) {
-          response.setSubscribe(true);
-        }
-        this.maybeOpenOffersFlow_(response);
-      },
-      reason => {
-        this.dialogManager_.completeView(this.activityIframeView_);
-        throw reason;
-      }
-    );
-    this.eventManager_.logSwgEvent(
-      AnalyticsEvent.IMPRESSION_CLICK_TO_SHOW_OFFERS
-    );
-    return this.dialogManager_.openView(this.activityIframeView_);
-  }
-
-  /**
-   * @param {SubscribeResponse} response
-   * @private
-   */
-  maybeOpenOffersFlow_(response) {
-    if (response.getSubscribe()) {
-      const options = this.options_ || {};
-      if (options.isClosable == undefined) {
-        options.isClosable = OFFERS_VIEW_CLOSABLE;
-      }
-      this.eventManager_.logSwgEvent(AnalyticsEvent.ACTION_VIEW_OFFERS, true);
-      new OffersFlow(this.deps_, options).start();
-    }
-  }
-}
-
-/**
- * The class for Abbreviated Offer flow.
- *
- */
-class AbbrvOfferFlow {
-  /**
-   * @param {!./deps.DepsDef} deps
-   * @param {!../api/subscriptions.OffersRequest=} options
-   */
-  constructor(deps, options = {}) {
-    /** @private @const {!./deps.DepsDef} */
-    this.deps_ = deps;
-
-    /** @private @const {!../api/subscriptions.OffersRequest|undefined} */
-    this.options_ = options;
-
-    /** @private @const {!Window} */
-    this.win_ = deps.win();
-
-    /** @private @const {!../components/activities.ActivityPorts} */
-    this.activityPorts_ = deps.activities();
-
-    /** @private @const {!../components/dialog-manager.DialogManager} */
-    this.dialogManager_ = deps.dialogManager();
-
-    /** @private @const {!../runtime/client-event-manager.ClientEventManager} */
-    this.eventManager_ = deps.eventManager();
-
-    /** @private @const {!ActivityIframeView} */
-    this.activityIframeView_ = new ActivityIframeView(
-      this.win_,
-      this.activityPorts_,
-      feUrl('/abbrvofferiframe'),
-      feArgs({
-        'publicationId': deps.pageConfig().getPublicationId(),
-        'productId': deps.pageConfig().getProductId(),
-        'showNative': deps.callbacks().hasSubscribeRequestCallback(),
-        'list': (options && options.list) || 'default',
-        'skus': (options && options.skus) || null,
-        'isClosable': true,
-      }),
-      /* shouldFadeBody */ false
-    );
-  }
-
-  /**
-   * @param {AlreadySubscribedResponse} response
-   * @private
-   */
-  handleLinkRequest_(response) {
-    if (response.getSubscriberOrMember()) {
-      this.eventManager_.logSwgEvent(
-        AnalyticsEvent.ACTION_ALREADY_SUBSCRIBED,
-        true
-      );
-      this.deps_.callbacks().triggerLoginRequest({
-        linkRequested: !!response.getLinkRequested(),
-      });
-    }
-  }
-
-  /**
-   * Starts the offers flow
-   * @return {!Promise}
-   */
-  start() {
-    // Start/cancel events.
-    this.deps_
-      .callbacks()
-      .triggerFlowStarted(SubscriptionFlows.SHOW_ABBRV_OFFER);
-    this.activityIframeView_.onCancel(() => {
-      this.deps_
-        .callbacks()
-        .triggerFlowCanceled(SubscriptionFlows.SHOW_ABBRV_OFFER);
-    });
-
-    // If the user is already subscribed, trigger login flow
-    this.activityIframeView_.on(
-      AlreadySubscribedResponse,
-      this.handleLinkRequest_.bind(this)
-    );
-
-    // If result is due to requesting offers, redirect to offers flow
-    this.activityIframeView_.acceptResult().then(result => {
-      if (result.data['viewOffers']) {
-        const options = this.options_ || {};
-        if (options.isClosable == undefined) {
-          options.isClosable = OFFERS_VIEW_CLOSABLE;
-        }
-        this.eventManager_.logSwgEvent(AnalyticsEvent.ACTION_VIEW_OFFERS, true);
-        new OffersFlow(this.deps_, options).start();
-        return;
-      }
-      if (result.data['native']) {
-        this.deps_.callbacks().triggerSubscribeRequest();
-        // The flow is complete.
-        this.dialogManager_.completeView(this.activityIframeView_);
-        return;
-      }
-    });
-
-    this.eventManager_.logSwgEvent(
-      AnalyticsEvent.IMPRESSION_CLICK_TO_SHOW_OFFERS_OR_ALREADY_SUBSCRIBED
-    );
-
-    return this.dialogManager_.openView(this.activityIframeView_);
-  }
-}
-
-/**
- * Copyright 2019 The Subscribe with Google 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.
- */
-/**
- * @implements {ActivityPortDef}
- */
-class ActivityPortDeprecated {
-  /**
-   * @param {!web-activities/activity-ports.ActivityPort} port
-   */
-  constructor(port) {
-    /** @private @const {!web-activities/activity-ports.ActivityPort} */
-    this.port_ = port;
-  }
-
-  /**
-   * @return {!Promise<!web-activities/activity-ports.ActivityResult>}
-   */
-  acceptResult() {
-    return this.port_.acceptResult();
-  }
-}
-
-/**
- * @implements {ActivityPortDef}
- */
-class ActivityIframePort$1 {
-  /**
-   * @param {!HTMLIFrameElement} iframe
-   * @param {string} url
-   * @param {!../runtime/deps.DepsDef} deps
-   * @param {?Object=} args
-   */
-  constructor(iframe, url, deps, args) {
-    /** @private @const {!web-activities/activity-ports.ActivityIframePort} */
-    this.iframePort_ = new activityPorts_2(iframe, url, args);
-    /** @private @const {!Object<string, function(!Object)>} */
-    this.callbackMap_ = {};
-
-    /** @private @const {../runtime/deps.DepsDef} */
-    this.deps_ = deps;
-  }
-
-  /**
-   * Returns a promise that yields when the iframe is ready to be interacted
-   * with.
-   * @return {!Promise}
-   */
-  whenReady() {
-    return this.iframePort_.whenReady();
-  }
-
+  whenReady() {
+    return this.iframePort_.whenReady();
+  }
+
   /**
    * Waits until the activity port is connected to the host.
    * @return {!Promise}
@@ -6653,7 +5598,7 @@ class ActivityIframePort$1 {
   connect() {
     return this.iframePort_.connect().then(() => {
       // Attach a callback to receive messages after connection complete
-      this.iframePort_.onMessage(data => {
+      this.iframePort_.onMessage((data) => {
         const response = data && data['RESPONSE'];
         if (!response) {
           return;
@@ -6665,12 +5610,13 @@ class ActivityIframePort$1 {
       });
 
       if (this.deps_ && this.deps_.eventManager()) {
-        this.on(AnalyticsRequest, request => {
+        this.on(AnalyticsRequest, (request) => {
+          const analyticsRequest = /** @type {AnalyticsRequest} */ (request);
           this.deps_.eventManager().logEvent({
-            eventType: request.getEvent(),
+            eventType: analyticsRequest.getEvent(),
             eventOriginator: EventOriginator.SWG_SERVER,
-            isFromUserAction: request.getMeta().getIsFromUserAction(),
-            additionalParameters: request.getParams(),
+            isFromUserAction: analyticsRequest.getMeta().getIsFromUserAction(),
+            additionalParameters: analyticsRequest.getParams(),
           });
         });
       }
@@ -6725,7 +5671,7 @@ class ActivityIframePort$1 {
 
   /**
    * @param {!function(new: T)} message
-   * @param {function(!../proto/api_messages.Message)} callback
+   * @param {function(?)} callback
    * @template T
    */
   on(message, callback) {
@@ -6762,7 +5708,7 @@ class ActivityPorts$1 {
     this.deps_ = deps;
 
     /** @private @const {!web-activities/activity-ports.ActivityPorts} */
-    this.activityPorts_ = new activityPorts_1(deps.win());
+    this.activityPorts_ = new WebActivityPorts(deps.win());
   }
 
   /**
@@ -6779,7 +5725,7 @@ class ActivityPorts$1 {
         'analyticsContext': context.toArray(),
         'publicationId': pageConfig.getPublicationId(),
         'productId': pageConfig.getProductId(),
-        '_client': 'SwG 0.1.22.107',
+        '_client': 'SwG 0.1.22.167',
         'supportsEventManager': true,
       },
       args || {}
@@ -6878,7 +5824,7 @@ class ActivityPorts$1 {
    * @param {function(!ActivityPortDef)} callback
    */
   onResult(requestId, callback) {
-    this.activityPorts_.onResult(requestId, port => {
+    this.activityPorts_.onResult(requestId, (port) => {
       callback(new ActivityPortDeprecated(port));
     });
   }
@@ -7077,6 +6023,7 @@ class ClientEventManager {
 
   /**
    * @overrides
+   * @param {!../api/client-event-manager-api.ClientEvent} event
    */
   logEvent(event) {
     validateEvent(event);
@@ -7087,14 +6034,14 @@ class ClientEventManager {
             return Promise.resolve();
           }
         } catch (e) {
-          log_5(e);
+          log(e);
         }
       }
       for (let listener = 0; listener < this.listeners_.length; listener++) {
         try {
           this.listeners_[listener](event);
         } catch (e) {
-          log_5(e);
+          log(e);
         }
       }
       return Promise.resolve();
@@ -7179,6 +6126,11 @@ const ExperimentFlags = {
    *  changed from '<uuid>' to '<uuid>.swg'.
    */
   UPDATE_GOOGLE_TRANSACTION_ID: 'update-google-transaction-id',
+
+  /**
+   * Experiment flag for guarding changes to fix PayClient redirect flow.
+   */
+  PAY_CLIENT_REDIRECT: 'pay-client-redirect',
 };
 
 /**
@@ -7253,7 +6205,7 @@ function getExperiments(win) {
     experimentMap = {};
     let combinedExperimentString = experimentsString;
     try {
-      const query = parseQueryString$1(win.location.hash);
+      const query = parseQueryString(win.location.hash);
       const experimentStringFromHash = query['swg.experiments'];
       if (experimentStringFromHash) {
         combinedExperimentString += ',' + experimentStringFromHash;
@@ -7265,7 +6217,7 @@ function getExperiments(win) {
 
     // Format:
     // - experimentString = (experimentSpec,)*
-    combinedExperimentString.split(',').forEach(s => {
+    combinedExperimentString.split(',').forEach((s) => {
       s = s.trim();
       if (!s) {
         return;
@@ -7470,12 +6422,10 @@ class AnalyticsService {
     this.activityPorts_ = deps.activities();
 
     /** @private @const {!HTMLIFrameElement} */
-    this.iframe_ = /** @type {!HTMLIFrameElement} */ (createElement(
-      this.doc_.getWin().document,
-      'iframe',
-      {}
-    ));
-    setImportantStyles(this.iframe_, iframeStyles);
+    this.iframe_ = /** @type {!HTMLIFrameElement} */ (
+      createElement(this.doc_.getWin().document, 'iframe', {})
+    );
+    setImportantStyles$1(this.iframe_, iframeStyles);
     this.doc_.getBody().appendChild(this.getElement());
 
     /** @private @type {!boolean} */
@@ -7572,7 +6522,7 @@ class AnalyticsService {
   addLabels(labels) {
     if (labels && labels.length > 0) {
       const newLabels = [].concat(this.context_.getLabelList());
-      labels.forEach(label => {
+      labels.forEach((label) => {
         if (newLabels.indexOf(label) == -1) {
           newLabels.push(label);
         }
@@ -7620,10 +6570,11 @@ class AnalyticsService {
     } else {
       context.setTransactionId(getUuid());
     }
-    context.setReferringOrigin(parseUrl$1(this.getReferrer_()).origin);
-    context.setClientVersion('SwG 0.1.22.107');
+    context.setReferringOrigin(parseUrl(this.getReferrer_()).origin);
+    context.setClientVersion('SwG 0.1.22.167');
+    context.setUrl(getCanonicalUrl(this.doc_));
 
-    const utmParams = parseQueryString$1(this.getQueryString_());
+    const utmParams = parseQueryString(this.getQueryString_());
     const campaign = utmParams['utm_campaign'];
     const medium = utmParams['utm_medium'];
     const source = utmParams['utm_source'];
@@ -7636,13 +6587,6 @@ class AnalyticsService {
     if (source) {
       context.setUtmSource(source);
     }
-
-    const urlNode = this.doc_
-      .getRootNode()
-      .querySelector("link[rel='canonical']");
-    if (urlNode && urlNode.href) {
-      context.setUrl(urlNode.href);
-    }
   }
 
   /**
@@ -7657,7 +6601,7 @@ class AnalyticsService {
       this.serviceReady_ = this.activityPorts_
         .openIframe(this.iframe_, feUrl('/serviceiframe'), null, true)
         .then(
-          port => {
+          (port) => {
             // Register a listener for the logging to code indicate it is
             // finished logging.
             port.on(FinishedLoggingResponse, this.afterLogging_.bind(this));
@@ -7668,7 +6612,7 @@ class AnalyticsService {
               return port;
             });
           },
-          message => {
+          (message) => {
             // If the port doesn't open register that logging is broken so
             // nothing is just waiting.
             this.loggingBroken_ = true;
@@ -7708,10 +6652,10 @@ class AnalyticsService {
   createLogRequest_(event) {
     const meta = new AnalyticsEventMeta();
     meta.setEventOriginator(event.eventOriginator);
-    meta.setIsFromUserAction(event.isFromUserAction);
+    meta.setIsFromUserAction(!!event.isFromUserAction);
 
     const request = new AnalyticsRequest();
-    request.setEvent(event.eventType);
+    request.setEvent(/** @type {!AnalyticsEvent} */ (event.eventType));
     request.setContext(this.context_);
     request.setMeta(meta);
     if (event.additionalParameters instanceof EventParams) {
@@ -7755,6 +6699,13 @@ class AnalyticsService {
       return;
     }
 
+    // Permission should be asked from a privacy workgroup before this originator
+    // can be submitted to the analytics service.  It should most likely be treated
+    // as another kind of publisher event here though.
+    if (event.eventOriginator === EventOriginator.SHOWCASE_CLIENT) {
+      return;
+    }
+
     if (
       ClientEventManager.isPublisherEvent(event) &&
       !this.shouldLogPublisherEvents_() &&
@@ -7764,7 +6715,7 @@ class AnalyticsService {
     }
     // Register we sent a log, the port will call this.afterLogging_ when done.
     this.unfinishedLogs_++;
-    this.lastAction_ = this.start().then(port => {
+    this.lastAction_ = this.start().then((port) => {
       const analyticsRequest = this.createLogRequest_(event);
       port.execute(analyticsRequest);
       if (isExperimentOn(this.doc_.getWin(), ExperimentFlags.LOGGING_BEACON)) {
@@ -7775,15 +6726,16 @@ class AnalyticsService {
 
   /**
    * This function is called by the iframe after it sends the log to the server.
-   * @param {FinishedLoggingResponse=} response
+   * @param {../proto/api_messages.Message=} message
    */
-  afterLogging_(response) {
+  afterLogging_(message) {
+    const response = /** @type {!FinishedLoggingResponse} */ (message);
     const success = (response && response.getComplete()) || false;
     const error = (response && response.getError()) || 'Unknown logging Error';
     const isTimeout = error === TIMEOUT_ERROR;
 
     if (!success) {
-      log_5('Error when logging: ' + error);
+      log('Error when logging: ' + error);
     }
 
     this.unfinishedLogs_--;
@@ -7819,7 +6771,7 @@ class AnalyticsService {
       return Promise.resolve(true);
     }
     if (this.promiseToLog_ === null) {
-      this.promiseToLog_ = new Promise(resolve => {
+      this.promiseToLog_ = new Promise((resolve) => {
         this.loggingResolver_ = resolve;
       });
 
@@ -7852,6 +6804,83 @@ class AnalyticsService {
   }
 }
 
+/**
+ * Copyright 2021 The Subscribe with Google 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.
+ */
+
+// Why is there a strings.js and a swg-strings.js, you ask? strings.js is a
+// generated file, currently used for gaa builds. This file is used for swg and
+// swg-basic builds, and is currently manually updated.
+// TODO(stellachui): Figure out if they should be merged without a large impact
+//   on binary size.
+
+const SWG_I18N_STRINGS = {
+  'SUBSCRIPTION_TITLE_LANG_MAP': {
+    'en': 'Subscribe with Google',
+    'ar': 'Google اشترك مع',
+    'de': 'Abonnieren mit Google',
+    'es': 'Suscríbete con Google',
+    'es-latam': 'Suscríbete con Google',
+    'es-latn': 'Suscríbete con Google',
+    'fr': "S'abonner avec Google",
+    'hi': 'Google के ज़रिये सदस्यता',
+    'id': 'Berlangganan dengan Google',
+    'it': 'Abbonati con Google',
+    'jp': 'Google で購読',
+    'ko': 'Google 을 통한구독',
+    'ms': 'Langgan dengan Google',
+    'nl': 'Abonneren via Google',
+    'no': 'Abonner med Google',
+    'pl': 'Subskrybuj z Google',
+    'pt': 'Subscrever com o Google',
+    'pt-br': 'Assine com o Google',
+    'ru': 'Подпиcка через Google',
+    'se': 'Prenumerera med Google',
+    'th': 'สมัครฟาน Google',
+    'tr': 'Google ile Abone Ol',
+    'uk': 'Підписатися через Google',
+    'zh-tw': '透過 Google 訂閱',
+  },
+  'CONTRIBUTION_TITLE_LANG_MAP': {
+    'en': 'Contribute with Google',
+    'ar': 'المساهمة باستخدام Google',
+    'de': 'Mit Google beitragen',
+    'es': '	Contribuye con Google',
+    'es-latam': 'Contribuir con Google',
+    'es-latn': 'Contribuye con Google',
+    'fr': 'Contribuer avec Google',
+    'hi': 'Google खाते की मदद से योगदान करें',
+    'id': 'Berkontribusi dengan Google',
+    'it': 'Contribuisci con Google',
+    'jp': 'Google で寄付',
+    'ko': 'Google을 통해 참여하기',
+    'ms': 'Sumbangkan dengan Google',
+    'nl': 'Bijdragen met Google',
+    'no': 'Bidra med Google',
+    'pl': 'Wesprzyj publikację przez Google',
+    'pt': 'Contribuir com o Google',
+    'pt-br': 'Contribua com o Google',
+    'ru': 'Внести средства через Google',
+    'se': 'Bidra med Google',
+    'th': 'มีส่วนร่วมผ่าน Google',
+    'tr': 'Google ile Katkıda Bulun',
+    'uk': 'Зробити внесок через Google',
+    'zh-tw': '透過 Google 捐款',
+  },
+};
+
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
  *
@@ -7890,7 +6919,7 @@ class SmartSubscriptionButtonApi {
    * @param {!./deps.DepsDef} deps
    * @param {!Element} button
    * @param {!../api/subscriptions.SmartButtonOptions} options
-   * @param {function()=} callback
+   * @param {function(!Event=)=} callback
    */
   constructor(deps, button, options, callback) {
     /** @private @const {!./deps.DepsDef} */
@@ -7906,11 +6935,9 @@ class SmartSubscriptionButtonApi {
     this.activityPorts_ = deps.activities();
 
     /** @private @const {!HTMLIFrameElement} */
-    this.iframe_ = /** @type {!HTMLIFrameElement} */ (createElement(
-      this.doc_,
-      'iframe',
-      iframeAttributes$1
-    ));
+    this.iframe_ = /** @type {!HTMLIFrameElement} */ (
+      createElement(this.doc_, 'iframe', iframeAttributes$1)
+    );
 
     /** @private @const {!Element} */
     this.button_ = button;
@@ -7918,7 +6945,7 @@ class SmartSubscriptionButtonApi {
     /** @private {!../api/subscriptions.SmartButtonOptions} */
     this.options_ = options;
 
-    /** @private const {function()=} */
+    /** @private @const */
     this.callback_ = callback;
 
     /** @private @const {string} */
@@ -7948,6 +6975,7 @@ class SmartSubscriptionButtonApi {
         throw new Error('No callback!');
       }
       this.callback_();
+
       return;
     }
   }
@@ -7957,7 +6985,7 @@ class SmartSubscriptionButtonApi {
    * @return {!Element}
    */
   start() {
-    setImportantStyles(this.iframe_, {
+    setImportantStyles$1(this.iframe_, {
       'opacity': 1,
       'position': 'absolute',
       'top': 0,
@@ -7969,9 +6997,11 @@ class SmartSubscriptionButtonApi {
     });
     this.button_.appendChild(this.iframe_);
     const args = this.activityPorts_.addDefaultArguments(this.args_);
-    this.activityPorts_.openIframe(this.iframe_, this.src_, args).then(port => {
-      port.on(SmartBoxMessage, this.handleSmartBoxClick_.bind(this));
-    });
+    this.activityPorts_
+      .openIframe(this.iframe_, this.src_, args)
+      .then((port) => {
+        port.on(SmartBoxMessage, this.handleSmartBoxClick_.bind(this));
+      });
     return this.iframe_;
   }
 }
@@ -8073,37 +7103,14 @@ function getLanguageCodeFromElement(element) {
  * limitations under the License.
  */
 
-/**
- * The button title should match that of button's SVG.
- */
-/** @type {!Object<string, string>} */
-const TITLE_LANG_MAP = {
-  'en': 'Subscribe with Google',
-  'ar': 'Google اشترك مع',
-  'de': 'Abonnieren mit Google',
-  'es': 'Suscríbete con Google',
-  'es-latam': 'Suscríbete con Google',
-  'es-latn': 'Suscríbete con Google',
-  'fr': "S'abonner avec Google",
-  'hi': 'Google के ज़रिये सदस्यता',
-  'id': 'Berlangganan dengan Google',
-  'it': 'Abbonati con Google',
-  'jp': 'Google で購読',
-  'ko': 'Google 을 통한구독',
-  'ms': 'Langgan dengan Google',
-  'nl': 'Abonneren via Google',
-  'no': 'Abonner med Google',
-  'pl': 'Subskrybuj z Google',
-  'pt': 'Subscrever com o Google',
-  'pt-br': 'Assine com o Google',
-  'ru': 'Подпиcka через Google',
-  'se': 'Prenumerera med Google',
-  'th': 'สมัครฟาน Google',
-  'tr': 'Google ile Abone Ol',
-  'uk': 'Підписатися через Google',
-  'zh-tw': '透過 Google 訂閱',
+/** @enum {string} */
+const ButtonAttributeValues = {
+  SUBSCRIPTION: 'subscription',
+  CONTRIBUTION: 'contribution',
 };
 
+const BUTTON_INNER_HTML = `<img class="swg-button-v2-icon-$theme$"></div>$textContent$`;
+
 /**
  * The button stylesheet can be found in the `/assets/swg-button.css`.
  * It's produced by the `gulp assets` task and deployed to
@@ -8157,6 +7164,7 @@ class ButtonApi {
   }
 
   /**
+   * Attaches the Classic 'Subscribe With Google' button.
    * @param {!Element} button
    * @param {../api/subscriptions.ButtonOptions|function()} optionsOrCallback
    * @param {function()=} callback
@@ -8165,6 +7173,7 @@ class ButtonApi {
   attach(button, optionsOrCallback, callback) {
     const options = this.setupButtonAndGetParams_(
       button,
+      AnalyticsEvent.ACTION_SWG_BUTTON_CLICK,
       optionsOrCallback,
       callback
     ).options;
@@ -8175,18 +7184,129 @@ class ButtonApi {
     if (options['lang']) {
       button.setAttribute('lang', options['lang']);
     }
-    button.setAttribute('title', msg(TITLE_LANG_MAP, button) || '');
+    button.setAttribute(
+      'title',
+      msg(SWG_I18N_STRINGS.SUBSCRIPTION_TITLE_LANG_MAP, button) || ''
+    );
     this.logSwgEvent_(AnalyticsEvent.IMPRESSION_SWG_BUTTON);
 
     return button;
   }
 
+  /**
+   * Attaches the new subscribe button, for subscription product types.
+   * @param {!Element} button
+   * @param {../api/subscriptions.ButtonOptions|function()} optionsOrCallback
+   * @param {function()=} callback
+   * @return {!Element}
+   */
+  attachSubscribeButton(button, optionsOrCallback, callback) {
+    const options = this.setupButtonAndGetParams_(
+      button,
+      AnalyticsEvent.ACTION_SWG_BUTTON_SHOW_OFFERS_CLICK,
+      optionsOrCallback,
+      callback
+    ).options;
+
+    const theme = options['theme'];
+    button.classList.add(`swg-button-v2-${theme}`);
+    button.setAttribute('role', 'button');
+    if (options['lang']) {
+      button.setAttribute('lang', options['lang']);
+    }
+    if (!options['enable']) {
+      button.disabled = true;
+    }
+    button./*OK*/ innerHTML = BUTTON_INNER_HTML.replace(
+      '$theme$',
+      theme
+    ).replace(
+      '$textContent$',
+      msg(SWG_I18N_STRINGS.SUBSCRIPTION_TITLE_LANG_MAP, button) || ''
+    );
+    this.logSwgEvent_(AnalyticsEvent.IMPRESSION_SHOW_OFFERS_SWG_BUTTON);
+
+    return button;
+  }
+
+  /**
+   * Attaches the new contribute button, for contribution product types.
+   * @param {!Element} button
+   * @param {../api/subscriptions.ButtonOptions|function()} optionsOrCallback
+   * @param {function()=} callback
+   * @return {!Element}
+   */
+  attachContributeButton(button, optionsOrCallback, callback) {
+    const options = this.setupButtonAndGetParams_(
+      button,
+      AnalyticsEvent.ACTION_SWG_BUTTON_SHOW_CONTRIBUTIONS_CLICK,
+      optionsOrCallback,
+      callback
+    ).options;
+
+    const theme = options['theme'];
+    button.classList.add(`swg-button-v2-${theme}`);
+    button.setAttribute('role', 'button');
+    if (options['lang']) {
+      button.setAttribute('lang', options['lang']);
+    }
+    if (!options['enable']) {
+      button.disabled = true;
+    }
+    button./*OK*/ innerHTML = BUTTON_INNER_HTML.replace(
+      '$theme$',
+      theme
+    ).replace(
+      '$textContent$',
+      msg(SWG_I18N_STRINGS.CONTRIBUTION_TITLE_LANG_MAP, button) || ''
+    );
+    this.logSwgEvent_(AnalyticsEvent.IMPRESSION_SHOW_CONTRIBUTIONS_SWG_BUTTON);
+
+    return button;
+  }
+
+  /**
+   * Attaches all buttons with the specified attribute set to any of the
+   * attribute values.
+   * @param {string} attribute
+   * @param {!Array<string>} attributeValues
+   * @param {../api/subscriptions.ButtonOptions} options
+   * @param {!Object<string, function()>} attributeValueToCallback
+   */
+  attachButtonsWithAttribute(
+    attribute,
+    attributeValues,
+    options,
+    attributeValueToCallback
+  ) {
+    attributeValues.forEach((attributeValue) => {
+      const elements = this.doc_
+        .getRootNode()
+        .querySelectorAll(`button[${attribute}="${attributeValue}"]`);
+      for (let i = 0; i < elements.length; i++) {
+        if (attributeValue === ButtonAttributeValues.SUBSCRIPTION) {
+          this.attachSubscribeButton(
+            elements[i],
+            options,
+            attributeValueToCallback[attributeValue]
+          );
+        } else if (attributeValue === ButtonAttributeValues.CONTRIBUTION) {
+          this.attachContributeButton(
+            elements[i],
+            options,
+            attributeValueToCallback[attributeValue]
+          );
+        }
+      }
+    });
+  }
+
   /**
    * @param {!AnalyticsEvent} eventType
    * @param {boolean=} isFromUserAction
    */
   logSwgEvent_(eventType, isFromUserAction) {
-    this.configuredRuntimePromise_.then(configuredRuntime => {
+    this.configuredRuntimePromise_.then((configuredRuntime) => {
       configuredRuntime.eventManager().logSwgEvent(eventType, isFromUserAction);
     });
   }
@@ -8199,10 +7319,11 @@ class ButtonApi {
    */
   getOptions_(optionsOrCallback) {
     const options =
-      /** @type {!../api/subscriptions.ButtonOptions|!../api/subscriptions.SmartButtonOptions} */ (optionsOrCallback &&
-      typeof optionsOrCallback != 'function'
-        ? optionsOrCallback
-        : {'theme': Theme.LIGHT});
+      /** @type {!../api/subscriptions.ButtonOptions|!../api/subscriptions.SmartButtonOptions} */ (
+        optionsOrCallback && typeof optionsOrCallback != 'function'
+          ? optionsOrCallback
+          : {'theme': Theme.LIGHT}
+      );
 
     const theme = options['theme'];
     if (theme !== Theme.LIGHT && theme !== Theme.DARK) {
@@ -8219,25 +7340,24 @@ class ButtonApi {
    * @private
    */
   getCallback_(optionsOrCallback, callback) {
-    return (
-      /** @type {function()|function(Event):boolean} */ ((typeof optionsOrCallback ==
-      'function'
-        ? optionsOrCallback
-        : null) || callback)
+    return /** @type {function()|function(Event):boolean} */ (
+      (typeof optionsOrCallback == 'function' ? optionsOrCallback : null) ||
+        callback
     );
   }
 
   /**
    * @param {!Element} button
+   * @param {AnalyticsEvent} clickEvent
    * @param {../api/subscriptions.SmartButtonOptions|function()|../api/subscriptions.ButtonOptions} optionsOrCallback
    * @param {function()=} callbackFun
    * @return {ButtonParams}
    */
-  setupButtonAndGetParams_(button, optionsOrCallback, callbackFun) {
+  setupButtonAndGetParams_(button, clickEvent, optionsOrCallback, callbackFun) {
     const options = this.getOptions_(optionsOrCallback);
     const callback = this.getCallback_(optionsOrCallback, callbackFun);
-    const clickFun = event => {
-      this.logSwgEvent_(AnalyticsEvent.ACTION_SWG_BUTTON_CLICK, true);
+    const clickFun = (event) => {
+      this.logSwgEvent_(clickEvent, true);
       if (typeof callback === 'function') {
         callback(event);
       }
@@ -8256,6 +7376,7 @@ class ButtonApi {
   attachSmartButton(deps, button, optionsOrCallback, callback) {
     const params = this.setupButtonAndGetParams_(
       button,
+      AnalyticsEvent.ACTION_SWG_BUTTON_CLICK,
       optionsOrCallback,
       callback
     );
@@ -8325,7 +7446,7 @@ class Callbacks {
   triggerEntitlementsResponse(promise) {
     return this.trigger_(
       CallbackId.ENTITLEMENTS,
-      promise.then(res => res.clone())
+      promise.then((res) => res.clone())
     );
   }
 
@@ -8417,7 +7538,7 @@ class Callbacks {
    * @param {function(!Promise<!../api/subscribe-response.SubscribeResponse>)} callback
    */
   setOnSubscribeResponse(callback) {
-    log_4(
+    warn(
       `[swg.js:setOnSubscribeResponse]: This method has been deprecated, please switch usages to 'setOnPaymentResponse'`
     );
     this.setCallback_(CallbackId.PAYMENT_RESPONSE, callback);
@@ -8427,7 +7548,7 @@ class Callbacks {
    * @param {function(!Promise<!../api/subscribe-response.SubscribeResponse>)} callback
    */
   setOnContributionResponse(callback) {
-    log_4(
+    warn(
       `[swg.js:setOnContributionResponse]: This method has been deprecated, please switch usages to 'setOnPaymentResponse'`
     );
     this.setCallback_(CallbackId.PAYMENT_RESPONSE, callback);
@@ -8446,13 +7567,13 @@ class Callbacks {
    */
   triggerPaymentResponse(responsePromise) {
     this.paymentResponsePromise_ = responsePromise.then(
-      res => {
+      (res) => {
         this.trigger_(
           CallbackId.PAYMENT_RESPONSE,
           Promise.resolve(res.clone())
         );
       },
-      reason => {
+      (reason) => {
         if (isCancelError(reason)) {
           return;
         }
@@ -8514,7 +7635,7 @@ class Callbacks {
    */
   setCallback_(id, callback) {
     if (this.callbacks_[id]) {
-      log_4(
+      warn(
         `[swg.js]: You have registered multiple callbacks for the same response.`
       );
     }
@@ -8565,6 +7686,351 @@ class Callbacks {
   }
 }
 
+/**
+ * Copyright 2021 The Subscribe with Google 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.
+ */
+
+/**
+ * Container for the auto prompt configuation details.
+ */
+class AutoPromptConfig {
+  /**
+   * @param {number|undefined} maxImpressionsPerWeek
+   */
+  constructor(
+    maxImpressionsPerWeek,
+    displayDelaySeconds,
+    backoffSeconds,
+    maxDismissalsPerWeek,
+    maxDismissalsResultingHideSeconds
+  ) {
+    /** @const {number|undefined} */
+    this.maxImpressionsPerWeek = maxImpressionsPerWeek;
+
+    /** @const {!ClientDisplayTrigger} */
+    this.clientDisplayTrigger = new ClientDisplayTrigger(displayDelaySeconds);
+
+    /** @const {!ExplicitDismissalConfig} */
+    this.explicitDismissalConfig = new ExplicitDismissalConfig(
+      backoffSeconds,
+      maxDismissalsPerWeek,
+      maxDismissalsResultingHideSeconds
+    );
+  }
+}
+
+/**
+ * Client side conditions to trigger the display of the auto prompt.
+ */
+class ClientDisplayTrigger {
+  /**
+   * @param {number|undefined} displayDelaySeconds
+   */
+  constructor(displayDelaySeconds) {
+    /** @const {number|undefined} */
+    this.displayDelaySeconds = displayDelaySeconds;
+  }
+}
+
+/**
+ * Configuration of explicit dismissal behavior and its effects.
+ */
+class ExplicitDismissalConfig {
+  /**
+   * @param {number|undefined} backoffSeconds
+   * @param {number|undefined} maxDismissalsPerWeek
+   * @param {number|undefined} maxDismissalsResultingHideSeconds
+   */
+  constructor(
+    backoffSeconds,
+    maxDismissalsPerWeek,
+    maxDismissalsResultingHideSeconds
+  ) {
+    /** @const {number|undefined} */
+    this.backoffSeconds = backoffSeconds;
+
+    /** @const {number|undefined} */
+    this.maxDismissalsPerWeek = maxDismissalsPerWeek;
+
+    /** @const {number|undefined} */
+    this.maxDismissalsResultingHideSeconds = maxDismissalsResultingHideSeconds;
+  }
+}
+
+/**
+ * Predicates of whether or not to show button and prompt.
+ */
+class UiPredicates {
+  /**
+   * @param {boolean|undefined} canDisplayAutoPrompt
+   * @param {boolean|undefined} canDisplayButton
+   */
+  constructor(canDisplayAutoPrompt, canDisplayButton) {
+    /** @const {boolean|undefined} */
+    this.canDisplayAutoPrompt = canDisplayAutoPrompt;
+
+    /** @const {boolean|undefined} */
+    this.canDisplayButton = canDisplayButton;
+  }
+}
+
+/**
+ * Copyright 2021 The Subscribe with Google 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.
+ */
+
+/**
+ * Container for the details relating to how the client should be configured.
+ */
+class ClientConfig {
+  /**
+   * @param {!./auto-prompt-config.AutoPromptConfig=} autoPromptConfig
+   * @param {string=} paySwgVersion
+   * @param {boolean=} useUpdatedOfferFlows
+   * @param {./auto-prompt-config.UiPredicates=} uiPredicates
+   */
+  constructor(
+    autoPromptConfig,
+    paySwgVersion,
+    useUpdatedOfferFlows,
+    uiPredicates
+  ) {
+    /** @const {!./auto-prompt-config.AutoPromptConfig|undefined} */
+    this.autoPromptConfig = autoPromptConfig;
+
+    /** @const {string|undefined} */
+    this.paySwgVersion = paySwgVersion;
+
+    /** @const {boolean} */
+    this.useUpdatedOfferFlows = useUpdatedOfferFlows || false;
+
+    /** @const {./auto-prompt-config.UiPredicates|undefined} */
+    this.uiPredicates = uiPredicates;
+  }
+}
+
+/**
+ * Copyright 2020 The Subscribe with Google 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.
+ */
+
+/** @enum {string} */
+const ClientTheme = {
+  LIGHT: 'light',
+  DARK: 'dark',
+};
+
+/**
+ * Copyright 2021 The Subscribe with Google 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.
+ */
+
+/**
+ * Manager of how the client should be configured. Fetches and stores
+ * configuration details from the server.
+ */
+class ClientConfigManager {
+  /**
+   * @param {string} publicationId
+   * @param {!./fetcher.Fetcher} fetcher
+   * @param {!../api/basic-subscriptions.ClientOptions=} clientOptions
+   */
+  constructor(publicationId, fetcher, clientOptions) {
+    /** @private @const {!../api/basic-subscriptions.ClientOptions} */
+    this.clientOptions_ = clientOptions || {};
+
+    /** @private @const {string} */
+    this.publicationId_ = publicationId;
+
+    /** @private @const {!./fetcher.Fetcher} */
+    this.fetcher_ = fetcher;
+
+    /** @private {?Promise<!ClientConfig>} */
+    this.responsePromise_ = null;
+  }
+
+  /**
+   * Fetches the client config from the server.
+   * @return {!Promise<!ClientConfig>}
+   */
+  fetchClientConfig() {
+    if (!this.publicationId_) {
+      throw new Error('fetchClientConfig requires publicationId');
+    }
+    if (!this.responsePromise_) {
+      this.responsePromise_ = this.fetch_();
+    }
+    return this.responsePromise_;
+  }
+
+  /**
+   * Gets the client config, if already requested. Otherwise returns a Promise
+   * with an empty ClientConfig.
+   * @return {!Promise<!ClientConfig>}
+   */
+  getClientConfig() {
+    return this.responsePromise_ || Promise.resolve(new ClientConfig());
+  }
+
+  /**
+   * Convenience method for retrieving the auto prompt portion of the client
+   * configuration.
+   * @return {!Promise<!../model/auto-prompt-config.AutoPromptConfig|undefined>}
+   */
+  getAutoPromptConfig() {
+    if (!this.responsePromise_) {
+      this.fetchClientConfig();
+    }
+    return this.responsePromise_.then(
+      (clientConfig) => clientConfig.autoPromptConfig
+    );
+  }
+
+  /**
+   * Gets the language the UI should be displayed in. See
+   * src/api/basic-subscriptions.ClientOptions.lang. This
+   * @return {string}
+   */
+  getLanguage() {
+    return this.clientOptions_.lang || 'en';
+  }
+
+  /**
+   * Gets the theme the UI should be displayed in. See
+   * src/api/basic-subscriptions.ClientOptions.theme.
+   * @return {!../api/basic-subscriptions.ClientTheme}
+   */
+  getTheme() {
+    return this.clientOptions_.theme || ClientTheme.LIGHT;
+  }
+
+  /**
+   * Determines whether a subscription or contribution button should be disabled.
+   * @returns {!Promise<boolean|undefined>}
+   */
+  shouldEnableButton() {
+    // Disable button if disableButton is set to be true in clientOptions.
+    // If disableButton is set to be false or not set, then always enable button.
+    // This is for testing purpose.
+    if (this.clientOptions_.disableButton) {
+      return Promise.resolve(false);
+    }
+
+    if (!this.responsePromise_) {
+      this.fetchClientConfig();
+    }
+    // UI predicates decides whether to enable button.
+    return this.responsePromise_.then((clientConfig) => {
+      if (clientConfig.uiPredicates?.canDisplayButton) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+  }
+
+  /**
+   * Fetches the client config from the server.
+   * @return {!Promise<!ClientConfig>}
+   */
+  fetch_() {
+    const url = serviceUrl(
+      '/publication/' +
+        encodeURIComponent(this.publicationId_) +
+        '/clientconfiguration'
+    );
+    return this.fetcher_.fetchCredentialedJson(url).then((json) => {
+      if (json.errorMessages && json.errorMessages.length > 0) {
+        json.errorMessages.forEach((errorMessage) => {
+          warn('SwG ClientConfigManager: ' + errorMessage);
+        });
+      }
+      return this.parseClientConfig_(json);
+    });
+  }
+
+  /**
+   * Parses the fetched config into the ClientConfig container object.
+   * @param {!Object} json
+   * @return {!ClientConfig}
+   */
+  parseClientConfig_(json) {
+    const paySwgVersion = json['paySwgVersion'];
+    const autoPromptConfigJson = json['autoPromptConfig'];
+    let autoPromptConfig = undefined;
+    if (autoPromptConfigJson) {
+      autoPromptConfig = new AutoPromptConfig(
+        autoPromptConfigJson.maxImpressionsPerWeek,
+        autoPromptConfigJson.clientDisplayTrigger?.displayDelaySeconds,
+        autoPromptConfigJson.explicitDismissalConfig?.backoffSeconds,
+        autoPromptConfigJson.explicitDismissalConfig?.maxDismissalsPerWeek,
+        autoPromptConfigJson.explicitDismissalConfig?.maxDismissalsResultingHideSeconds
+      );
+    }
+
+    const uiPredicatesJson = json['uiPredicates'];
+    let uiPredicates = undefined;
+    if (uiPredicatesJson) {
+      uiPredicates = new UiPredicates(
+        uiPredicatesJson.canDisplayAutoPrompt,
+        uiPredicatesJson.canDisplayButton
+      );
+    }
+
+    return new ClientConfig(
+      autoPromptConfig,
+      paySwgVersion,
+      json['useUpdatedOfferFlows'],
+      uiPredicates
+    );
+  }
+}
+
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
  *
@@ -8599,29 +8065,39 @@ class ContributionsFlow {
     /** @private @const {!Window} */
     this.win_ = deps.win();
 
+    /** @private @const {!./client-config-manager.ClientConfigManager} */
+    this.clientConfigManager_ = deps.clientConfigManager();
+
     /** @private @const {!../components/activities.ActivityPorts} */
     this.activityPorts_ = deps.activities();
 
     /** @private @const {!../components/dialog-manager.DialogManager} */
     this.dialogManager_ = deps.dialogManager();
 
+    this.activityIframeView_ = null;
+
     const isClosable = (options && options.isClosable) || true;
 
-    /** @private @const {!ActivityIframeView} */
-    this.activityIframeView_ = new ActivityIframeView(
-      this.win_,
-      this.activityPorts_,
-      feUrl('/contributionsiframe'),
-      feArgs({
-        'productId': deps.pageConfig().getProductId(),
-        'publicationId': deps.pageConfig().getPublicationId(),
-        'productType': ProductType.UI_CONTRIBUTION,
-        'list': (options && options.list) || 'default',
-        'skus': (options && options.skus) || null,
-        'isClosable': isClosable,
-      }),
-      /* shouldFadeBody */ true
-    );
+    /** @private @const {!Promise<!ActivityIframeView>} */
+    this.activityIframeViewPromise_ = this.getUrl_(
+      this.clientConfigManager_.getClientConfig()
+    ).then((url) => {
+      return new ActivityIframeView(
+        this.win_,
+        this.activityPorts_,
+        feUrl(url),
+        feArgs({
+          'productId': deps.pageConfig().getProductId(),
+          'publicationId': deps.pageConfig().getPublicationId(),
+          'productType': ProductType.UI_CONTRIBUTION,
+          'list': (options && options.list) || 'default',
+          'skus': (options && options.skus) || null,
+          'isClosable': isClosable,
+          'supportsEventManager': true,
+        }),
+        /* shouldFadeBody */ true
+      );
+    });
   }
 
   /**
@@ -8642,9 +8118,10 @@ class ContributionsFlow {
     const sku = response.getSku();
     const isOneTime = response.getOneTime();
     if (sku) {
-      const /** @type {../api/subscriptions.SubscriptionRequest} */ contributionRequest = {
-          'skuId': sku,
-        };
+      const /** @type {../api/subscriptions.SubscriptionRequest} */ contributionRequest =
+          {
+            'skuId': sku,
+          };
       if (isOneTime) {
         contributionRequest['oneTime'] = isOneTime;
       }
@@ -8661,25 +8138,48 @@ class ContributionsFlow {
    * @return {!Promise}
    */
   start() {
-    // Start/cancel events.
-    this.deps_
-      .callbacks()
-      .triggerFlowStarted(SubscriptionFlows.SHOW_CONTRIBUTION_OPTIONS);
-    this.activityIframeView_.onCancel(() => {
+    return this.activityIframeViewPromise_.then((activityIframeView) => {
+      // Start/cancel events.
       this.deps_
         .callbacks()
-        .triggerFlowCanceled(SubscriptionFlows.SHOW_CONTRIBUTION_OPTIONS);
+        .triggerFlowStarted(SubscriptionFlows.SHOW_CONTRIBUTION_OPTIONS);
+      activityIframeView.onCancel(() => {
+        this.deps_
+          .callbacks()
+          .triggerFlowCanceled(SubscriptionFlows.SHOW_CONTRIBUTION_OPTIONS);
+      });
+      activityIframeView.on(
+        AlreadySubscribedResponse,
+        this.handleLinkRequest_.bind(this)
+      );
+      activityIframeView.on(SkuSelectedResponse, this.startPayFlow_.bind(this));
+      this.activityIframeView_ = activityIframeView;
+      return this.dialogManager_.openView(this.activityIframeView_);
     });
-    this.activityIframeView_.on(
-      AlreadySubscribedResponse,
-      this.handleLinkRequest_.bind(this)
-    );
-    this.activityIframeView_.on(
-      SkuSelectedResponse,
-      this.startPayFlow_.bind(this)
-    );
+  }
 
-    return this.dialogManager_.openView(this.activityIframeView_);
+  /**
+   * Gets the URL that should be used for the activity iFrame view.
+   * @param {!Promise<../model/client-config.ClientConfig>} clientConfigPromise
+   * @return {!Promise<string>}
+   */
+  getUrl_(clientConfigPromise) {
+    return clientConfigPromise.then((clientConfig) => {
+      if (clientConfig.useUpdatedOfferFlows) {
+        return '/contributionoffersiframe';
+      } else {
+        return '/contributionsiframe';
+      }
+    });
+  }
+
+  /**
+   * Shows "no contribution found" on activity iFrame view.
+   */
+  showNoEntitlementFoundToast() {
+    if (this.activityIframeView_) {
+      this.activityIframeView_.execute(new EntitlementsResponse());
+    }
   }
 }
 
@@ -8770,13 +8270,13 @@ class DeferredAccountFlow {
 
     this.openPromise_ = this.dialogManager_.openView(this.activityIframeView_);
     return this.activityIframeView_.acceptResult().then(
-      result => {
+      (result) => {
         // The consent part is complete.
         return this.handleConsentResponse_(
           /** @type {!Object} */ (result.data)
         );
       },
-      reason => {
+      (reason) => {
         if (isCancelError(reason)) {
           this.deps_
             .callbacks()
@@ -8812,7 +8312,7 @@ class DeferredAccountFlow {
     );
     const purchaseDataList = data['purchaseDataList']
       ? data['purchaseDataList'].map(
-          pd => new PurchaseData(pd['data'], pd['signature'])
+          (pd) => new PurchaseData(pd['data'], pd['signature'])
         )
       : [
           // TODO(dvoytenko): cleanup/deprecate.
@@ -8840,7 +8340,7 @@ class DeferredAccountFlow {
 
     // Start the "sync" flow.
     creatingFlow.start(
-      new SubscribeResponse$1(
+      new SubscribeResponse(
         '', // raw field doesn't matter in this case
         purchaseDataList[0],
         userData,
@@ -8853,7 +8353,7 @@ class DeferredAccountFlow {
   }
 }
 
-const CSS = "body{padding:0;margin:0}swg-container,swg-loading,swg-loading-animate,swg-loading-image{display:block}swg-loading-container{width:100%!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-align:center!important;align-items:center!important;-ms-flex-pack:center!important;justify-content:center!important;min-height:148px!important;height:100%!important;bottom:0!important;margin-top:5px!important;z-index:2147483647!important}@media (min-height:630px), (min-width:630px){swg-loading-container{width:560px!important;margin-left:35px!important;border-top-left-radius:8px!important;border-top-right-radius:8px!important;background-color:#fff!important;box-shadow:0 1px 1px rgba(60,64,67,.3),0 1px 4px 1px rgba(60,64,67,.15)!important}}swg-loading{z-index:2147483647!important;width:36px;height:36px;overflow:hidden;animation:mspin-rotate 1568.63ms linear infinite}swg-loading-animate{animation:mspin-revrot 5332ms steps(4) infinite}swg-loading-image{background-image:url(https://news.google.com/swg/js/v1/loader.svg);background-size:100%;width:11664px;height:36px;animation:swg-loading-film 5332ms steps(324) infinite}@keyframes swg-loading-film{0%{transform:translateX(0)}to{transform:translateX(-11664px)}}@keyframes mspin-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes mspin-revrot{0%{transform:rotate(0deg)}to{transform:rotate(-1turn)}}\n/*# sourceURL=/./src/ui/ui.css*/";
+const CSS$1 = "body{margin:0;padding:0}swg-container,swg-loading,swg-loading-animate,swg-loading-image{display:block}swg-loading-container{-ms-flex-align:center!important;-ms-flex-pack:center!important;align-items:center!important;bottom:0!important;display:-ms-flexbox!important;display:flex!important;height:100%!important;justify-content:center!important;margin-top:5px!important;min-height:148px!important;width:100%!important;z-index:2147483647!important}@media (min-height:630px),(min-width:630px){swg-loading-container{background-color:#fff!important;border-top-left-radius:8px!important;border-top-right-radius:8px!important;box-shadow:0 1px 1px rgba(60,64,67,.3),0 1px 4px 1px rgba(60,64,67,.15)!important;margin-left:35px!important;width:560px!important}}swg-loading{animation:mspin-rotate 1568.63ms linear infinite;height:36px;overflow:hidden;width:36px;z-index:2147483647!important}swg-loading-animate{animation:mspin-revrot 5332ms steps(4) infinite}swg-loading-image{animation:swg-loading-film 5332ms steps(#324) infinite;background-image:url(https://news.google.com/swg/js/v1/loader.svg);background-size:100%;height:36px;width:11664px}@keyframes swg-loading-film{0%{transform:translateX(0)}to{transform:translateX(-11664px)}}@keyframes mspin-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes mspin-revrot{0%{transform:rotate(0deg)}to{transform:rotate(-1turn)}}\n/*# sourceURL=/./src/ui/ui.css*/";
 
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
@@ -8890,17 +8390,15 @@ class FriendlyIframe {
     const mergedAttrs = Object.assign({}, friendlyIframeAttributes, attrs);
 
     /** @private @const {!HTMLIFrameElement} */
-    this.iframe_ = /** @type {!HTMLIFrameElement} */ (createElement(
-      doc,
-      'iframe',
-      mergedAttrs
-    ));
+    this.iframe_ = /** @type {!HTMLIFrameElement} */ (
+      createElement(doc, 'iframe', mergedAttrs)
+    );
 
     // Ensure that the new iframe does not inherit any CSS styles.
     resetAllStyles(this.iframe_);
 
     /** @private @const {!Promise} */
-    this.ready_ = new Promise(resolve => {
+    this.ready_ = new Promise((resolve) => {
       this.iframe_.onload = resolve;
     });
   }
@@ -8978,14 +8476,14 @@ class FriendlyIframe {
  * @param {string} curve - transition function for the animation.
  * @return {!Promise} Promise which resolves once the animation is done playing.
  */
-function transition(el, props, durationMillis, curve) {
+function transition$1(el, props, durationMillis, curve) {
   const win = el.ownerDocument.defaultView;
   const previousTransitionValue = el.style.transition || '';
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     win.setTimeout(() => {
       win.setTimeout(resolve, durationMillis);
       const tr = `${durationMillis}ms ${curve}`;
-      setImportantStyles(
+      setImportantStyles$1(
         el,
         Object.assign(
           {
@@ -8996,7 +8494,7 @@ function transition(el, props, durationMillis, curve) {
       );
     });
   }).then(() => {
-    setImportantStyles(el, {
+    setImportantStyles$1(el, {
       'transition': previousTransitionValue,
     });
   });
@@ -9018,7 +8516,7 @@ function transition(el, props, durationMillis, curve) {
  * limitations under the License.
  */
 
-class Graypane {
+class Graypane$1 {
   /**
    * @param {!../model/doc.Doc} doc
    * @param {number} zIndex
@@ -9031,7 +8529,7 @@ class Graypane {
     this.fadeBackground_ = this.doc_
       .getWin()
       .document.createElement('swg-popup-background');
-    setImportantStyles(this.fadeBackground_, {
+    setImportantStyles$1(this.fadeBackground_, {
       'z-index': zIndex,
       'display': 'none',
       'position': 'fixed',
@@ -9077,12 +8575,12 @@ class Graypane {
    * @return {!Promise|undefined}
    */
   show(animated = true) {
-    setImportantStyles(this.fadeBackground_, {
+    setImportantStyles$1(this.fadeBackground_, {
       'display': 'block',
       'opacity': animated ? 0 : 1,
     });
     if (animated) {
-      return transition(
+      return transition$1(
         this.fadeBackground_,
         {
           'opacity': 1,
@@ -9100,7 +8598,7 @@ class Graypane {
    */
   hide(animated = true) {
     if (animated) {
-      return transition(
+      return transition$1(
         this.fadeBackground_,
         {
           'opacity': 0,
@@ -9108,10 +8606,10 @@ class Graypane {
         300,
         'ease-out'
       ).then(() => {
-        setImportantStyles(this.fadeBackground_, {'display': 'none'});
+        setImportantStyles$1(this.fadeBackground_, {'display': 'none'});
       });
     }
-    setImportantStyles(this.fadeBackground_, {'display': 'none'});
+    setImportantStyles$1(this.fadeBackground_, {'display': 'none'});
   }
 }
 
@@ -9281,7 +8779,7 @@ function onDocumentState(doc, condition, callback) {
  * @return {!Promise<!Document>}
  */
 function whenDocumentReady(doc) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     onDocumentReady(doc, resolve);
   });
 }
@@ -9310,9 +8808,11 @@ class GlobalDoc {
   constructor(winOrDoc) {
     const isWin = !!winOrDoc.document;
     /** @private @const {!Window} */
-    this.win_ = /** @type {!Window} */ (isWin
-      ? /** @type {!Window} */ (winOrDoc)
-      : /** @type {!Document} */ (winOrDoc).defaultView);
+    this.win_ = /** @type {!Window} */ (
+      isWin
+        ? /** @type {!Window} */ (winOrDoc)
+        : /** @type {!Document} */ (winOrDoc).defaultView
+    );
     /** @private @const {!Document} */
     this.doc_ = isWin
       ? /** @type {!Window} */ (winOrDoc).document
@@ -9431,17 +8931,6 @@ const resetViewStyles = {
   'width': 0,
 };
 
-/**
- * Position of the dialog.
- * @const @enum {string}
- */
-const PositionAt = {
-  BOTTOM: 'BOTTOM',
-  TOP: 'TOP',
-  FLOAT: 'FLOAT',
-  FULL: 'FULL',
-};
-
 /**
  * The class for the top level dialog.
  * @final
@@ -9463,14 +8952,14 @@ class Dialog {
     });
 
     /** @private @const {!Graypane} */
-    this.graypane_ = new Graypane(doc, Z_INDEX - 1);
+    this.graypane_ = new Graypane$1(doc, Z_INDEX - 1);
 
     const modifiedImportantStyles = Object.assign(
       {},
       rootElementImportantStyles,
       importantStyles
     );
-    setImportantStyles(this.iframe_.getElement(), modifiedImportantStyles);
+    setImportantStyles$1(this.iframe_.getElement(), modifiedImportantStyles);
 
     setStyles(this.iframe_.getElement(), styles);
 
@@ -9491,9 +8980,6 @@ class Dialog {
 
     /** @private {?./view.View} */
     this.previousProgressView_ = null;
-
-    /** @private {boolean} */
-    this.useFixedLayer_ = false;
   }
 
   /**
@@ -9513,7 +8999,7 @@ class Dialog {
     this.graypane_.attach();
 
     if (hidden) {
-      setImportantStyles(iframe.getElement(), {
+      setImportantStyles$1(iframe.getElement(), {
         'visibility': 'hidden',
         'opacity': 0,
       });
@@ -9522,20 +9008,10 @@ class Dialog {
       this.show_();
     }
 
-    if (this.useFixedLayer_) {
-      return this.doc_
-        .addToFixedLayer(iframe.getElement())
-        .then(() => iframe.whenReady())
-        .then(() => {
-          this.buildIframe_();
-          return this;
-        });
-    } else {
-      return iframe.whenReady().then(() => {
-        this.buildIframe_();
-        return this;
-      });
-    }
+    return iframe.whenReady().then(() => {
+      this.buildIframe_();
+      return this;
+    });
   }
 
   /**
@@ -9548,7 +9024,7 @@ class Dialog {
     const iframeDoc = /** @type {!HTMLDocument} */ (this.iframe_.getDocument());
 
     // Inject Google fonts in <HEAD> section of the iframe.
-    injectStyleSheet(resolveDoc(iframeDoc), CSS);
+    injectStyleSheet(resolveDoc(iframeDoc), CSS$1);
 
     // Add Loading indicator.
     this.loadingView_ = new LoadingView(iframeDoc);
@@ -9570,7 +9046,7 @@ class Dialog {
     if (animated) {
       animating = this.animate_(() => {
         this.graypane_.hide(/* animate */ true);
-        return transition(
+        return transition$1(
           this.getElement(),
           {
             'transform': 'translateY(100%)',
@@ -9618,6 +9094,14 @@ class Dialog {
     return this.iframe_.getElement();
   }
 
+  /**
+   * Gets the LoadingView for this dialog.
+   * @return {LoadingView}
+   */
+  getLoadingView() {
+    return this.loadingView_;
+  }
+
   /**
    * Transitions to the next view.
    * @private
@@ -9660,7 +9144,7 @@ class Dialog {
    * @return {!Promise}
    */
   openView(view) {
-    setImportantStyles(view.getElement(), resetViewStyles);
+    setImportantStyles$1(view.getElement(), resetViewStyles);
     this.entryTransitionToNextView_();
 
     this.view_ = view;
@@ -9672,7 +9156,7 @@ class Dialog {
     }
 
     return view.init(this).then(() => {
-      setImportantStyles(view.getElement(), {
+      setImportantStyles$1(view.getElement(), {
         'opacity': 1,
       });
       if (this.hidden_) {
@@ -9691,12 +9175,12 @@ class Dialog {
    */
   show_() {
     this.animate_(() => {
-      setImportantStyles(this.getElement(), {
+      setImportantStyles$1(this.getElement(), {
         'transform': 'translateY(100%)',
         'opactiy': 1,
         'visibility': 'visible',
       });
-      return transition(
+      return transition$1(
         this.getElement(),
         {
           'transform': 'translateY(0)',
@@ -9729,11 +9213,11 @@ class Dialog {
       if (newHeight >= oldHeight) {
         // Expand.
         animating = this.animate_(() => {
-          setImportantStyles(this.getElement(), {
+          setImportantStyles$1(this.getElement(), {
             'height': `${newHeight}px`,
             'transform': `translateY(${newHeight - oldHeight}px)`,
           });
-          return transition(
+          return transition$1(
             this.getElement(),
             {
               'transform': 'translateY(0)',
@@ -9745,7 +9229,7 @@ class Dialog {
       } else {
         // Collapse.
         animating = this.animate_(() => {
-          return transition(
+          return transition$1(
             this.getElement(),
             {
               'transform': `translateY(${oldHeight - newHeight}px)`,
@@ -9753,7 +9237,7 @@ class Dialog {
             300,
             'ease-out'
           ).then(() => {
-            setImportantStyles(this.getElement(), {
+            setImportantStyles$1(this.getElement(), {
               'height': `${newHeight}px`,
               'transform': 'translateY(0)',
             });
@@ -9761,7 +9245,7 @@ class Dialog {
         });
       }
     } else {
-      setImportantStyles(this.getElement(), {
+      setImportantStyles$1(this.getElement(), {
         'height': `${newHeight}px`,
       });
       animating = Promise.resolve();
@@ -9803,20 +9287,11 @@ class Dialog {
     return Math.min(height, this.doc_.getWin()./*OK*/ innerHeight * 0.9);
   }
 
-  /**
-   * Gets the element's height.
-   * @return {number}
-   * @private
-   */
-  getHeight_() {
-    return this.getElement().offsetHeight;
-  }
-
   /**
    * Sets the position of the dialog. Currently 'BOTTOM' is set by default.
    */
   setPosition_() {
-    setImportantStyles(this.getElement(), this.getPositionStyle_());
+    setImportantStyles$1(this.getElement(), this.getPositionStyle_());
   }
 
   /**
@@ -9826,13 +9301,11 @@ class Dialog {
    * @private
    */
   updatePaddingToHtml_(newHeight) {
-    if (this.inferPosition_() == PositionAt.BOTTOM) {
-      const bottomPadding = newHeight + 20; // Add some extra padding.
-      const htmlElement = this.doc_.getRootElement();
-      setImportantStyles(htmlElement, {
-        'padding-bottom': `${bottomPadding}px`,
-      });
-    }
+    const bottomPadding = newHeight + 20; // Add some extra padding.
+    const htmlElement = this.doc_.getRootElement();
+    setImportantStyles$1(htmlElement, {
+      'padding-bottom': `${bottomPadding}px`,
+    });
   }
 
   /**
@@ -9843,46 +9316,13 @@ class Dialog {
     this.doc_.getRootElement().style.removeProperty('padding-bottom');
   }
 
-  /**
-   * Calculates the position of the dialog. Currently dialog is positioned at
-   * the bottom only. This could change in future to adjust the dialog position
-   * based on the screen size.
-   * @return {string}
-   * @private
-   */
-  inferPosition_() {
-    return PositionAt.BOTTOM;
-  }
-
   /**
    * Returns the styles required to postion the dialog.
    * @return {!Object<string, string|number>}
    * @private
    */
   getPositionStyle_() {
-    const dialogPosition = this.inferPosition_();
-    switch (dialogPosition) {
-      case PositionAt.BOTTOM:
-        return {'bottom': 0};
-      case PositionAt.TOP:
-        return {'top': 0};
-      case PositionAt.FLOAT:
-        return {
-          'position': 'fixed',
-          'top': '50%',
-          'left': '50%',
-          'transform': 'translate(-50%, -50%)',
-        };
-      case PositionAt.FULL:
-        return {
-          'position': 'fixed',
-          'height': '100%',
-          'top': 0,
-          'bottom': 0,
-        };
-      default:
-        return {'bottom': 0};
-    }
+    return {'bottom': 0};
   }
 }
 
@@ -9923,7 +9363,7 @@ class DialogManager {
     this.openPromise_ = null;
 
     /** @private @const {!Graypane} */
-    this.popupGraypane_ = new Graypane(doc, POPUP_Z_INDEX);
+    this.popupGraypane_ = new Graypane$1(doc, POPUP_Z_INDEX);
 
     /** @private {?Window} */
     this.popupWin_ = null;
@@ -9957,15 +9397,22 @@ class DialogManager {
    * @return {!Promise}
    */
   openView(view, hidden = false) {
-    view.whenComplete().catch(reason => {
+    this.handleCancellations(view);
+    return this.openDialog(hidden).then((dialog) => dialog.openView(view));
+  }
+
+  /**
+   * Handles cancellations (ex: user clicks close button on dialog).
+   * @param {!./view.View} view
+   * @return {!Promise}
+   */
+  handleCancellations(view) {
+    return view.whenComplete().catch((reason) => {
       if (isCancelError(reason)) {
         this.completeView(view);
       }
       throw reason;
     });
-    return this.openDialog(hidden).then(dialog => {
-      return dialog.openView(view);
-    });
   }
 
   /**
@@ -9991,6 +9438,13 @@ class DialogManager {
     }
   }
 
+  /**
+   * @returns {?Dialog}
+   */
+  getDialog() {
+    return this.dialog_;
+  }
+
   /** @private */
   close_() {
     this.dialog_.close();
@@ -9999,26 +9453,305 @@ class DialogManager {
   }
 
   /**
-   * @param {?Window|undefined} targetWin
+   * @param {?Window|undefined} targetWin
+   */
+  popupOpened(targetWin) {
+    this.popupWin_ = targetWin || null;
+    if (!this.popupGraypane_.isAttached()) {
+      this.popupGraypane_.attach();
+    }
+    this.popupGraypane_.show();
+  }
+
+  /**
+   */
+  popupClosed() {
+    this.popupWin_ = null;
+    try {
+      this.popupGraypane_.hide();
+    } catch (e) {
+      // Ignore.
+    }
+  }
+}
+
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+
+/** @enum {number}  */
+const MeterClientTypes = {
+  /** Meter client type for content licensed by Google. */
+  LICENSED_BY_GOOGLE: 1,
+};
+
+/**
+ * Copyright 2020 The Subscribe with Google 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.
+ */
+
+const IFRAME_BOX_SHADOW =
+  'rgba(60, 64, 67, 0.3) 0px -2px 5px, rgba(60, 64, 67, 0.15) 0px -5px 5px';
+const MINIMIZED_IFRAME_SIZE = '420px';
+
+class MeterToastApi {
+  /**
+   * @param {!./deps.DepsDef} deps
+   */
+  constructor(deps) {
+    /** @private @const {!./deps.DepsDef} */
+    this.deps_ = deps;
+
+    /** @private @const {!Window} */
+    this.win_ = deps.win();
+
+    /** @private @const {!../components/activities.ActivityPorts} */
+    this.activityPorts_ = deps.activities();
+
+    /** @private @const {!../components/dialog-manager.DialogManager} */
+    this.dialogManager_ = deps.dialogManager();
+
+    const iframeArgs = this.activityPorts_.addDefaultArguments({
+      isClosable: true,
+      hasSubscriptionCallback: deps.callbacks().hasSubscribeRequestCallback(),
+    });
+    /** @private @const {!ActivityIframeView} */
+    this.activityIframeView_ = new ActivityIframeView(
+      this.win_,
+      this.activityPorts_,
+      feUrl('/metertoastiframe'),
+      iframeArgs,
+      /* shouldFadeBody */ false
+    );
+
+    /**
+     * Function this class calls when a user dismisses the toast to consume a free read.
+     * @private {?function()}
+     */
+    this.onConsumeCallback_ = null;
+
+    /**
+     * Boolean indicating whether or not the onConsumeCallback_ has been handled
+     * (either called or ignored). This is used to protect against unexpected
+     * cancellations not consuming a meter.
+     * @private {!boolean}
+     */
+    this.onConsumeCallbackHandled_ = false;
+
+    /** @private @const {!function()} */
+    this.sendCloseRequestFunction_ = () => {
+      const closeRequest = new ToastCloseRequest();
+      closeRequest.setClose(true);
+      this.activityIframeView_.execute(closeRequest);
+      this.removeCloseEventListener();
+
+      this.deps_
+        .eventManager()
+        .logSwgEvent(
+          AnalyticsEvent.ACTION_METER_TOAST_CLOSED_BY_ARTICLE_INTERACTION,
+          true
+        );
+
+      if (this.onConsumeCallback_ && !this.onConsumeCallbackHandled_) {
+        this.onConsumeCallbackHandled_ = true;
+        this.onConsumeCallback_();
+      }
+    };
+
+    /** @private {?function()} */
+    this.scrollEventListener_ = null;
+  }
+
+  /**
+   * Shows the user the metering toast.
+   * @return {!Promise}
+   */
+  start() {
+    this.deps_
+      .callbacks()
+      .triggerFlowStarted(SubscriptionFlows.SHOW_METER_TOAST);
+    this.activityIframeView_.on(
+      ViewSubscriptionsResponse,
+      this.startNativeFlow_.bind(this)
+    );
+    if (!this.deps_.callbacks().hasSubscribeRequestCallback()) {
+      const errorMessage =
+        '[swg.js]: `setOnNativeSubscribeRequest` has not been ' +
+        'set before starting the metering flow, so users will not be able to ' +
+        'subscribe from the metering dialog directly. Please call ' +
+        '`setOnNativeSubscribeRequest` with a subscription flow callback before ' +
+        'starting metering.';
+      warn(errorMessage);
+    }
+
+    this.dialogManager_
+      .handleCancellations(this.activityIframeView_)
+      .catch((reason) => {
+        // Possibly call onConsumeCallback on all dialog cancellations to ensure unexpected
+        // dialog closures don't give access without a meter consumed.
+        if (this.onConsumeCallback_ && !this.onConsumeCallbackHandled_) {
+          this.onConsumeCallbackHandled_ = true;
+          this.onConsumeCallback_();
+        }
+        // Don't throw on cancel errors since they happen when a user closes the toast,
+        // which is expected.
+        if (!isCancelError(reason)) {
+          // eslint-disable-next-line no-console
+          console /*OK*/
+            .error(
+              '[swg.js]: Error occurred during meter toast handling: ' + reason
+            );
+          throw reason;
+        }
+      });
+    return this.dialogManager_.openDialog().then((dialog) => {
+      this.setDialogBoxShadow_();
+      this.setLoadingViewWidth_();
+      return dialog.openView(this.activityIframeView_).then(() => {
+        // Allow closing of the iframe with any scroll or click event.
+        this.win_.addEventListener('click', this.sendCloseRequestFunction_);
+        this.win_.addEventListener(
+          'touchstart',
+          this.sendCloseRequestFunction_
+        );
+        this.win_.addEventListener('mousedown', this.sendCloseRequestFunction_);
+        // Making body's overflow property 'hidden' to prevent scrolling
+        // while swiping on the iframe only on mobile.
+        if (this.isMobile_()) {
+          const $body = this.win_.document.body;
+          setStyle($body, 'overflow', 'hidden');
+        } else {
+          let start, scrollTimeout;
+          this.scrollEventListener_ = () => {
+            start = start || this.win_./*REVIEW*/ pageYOffset;
+            this.win_.clearTimeout(scrollTimeout);
+            scrollTimeout = this.win_.setTimeout(() => {
+              // If the scroll is longer than 100, close the toast.
+              if (Math.abs(this.win_./*REVIEW*/ pageYOffset - start) > 100) {
+                this.sendCloseRequestFunction_();
+              }
+            }, 100);
+          };
+          this.win_.addEventListener('scroll', this.scrollEventListener_);
+        }
+        this.deps_
+          .eventManager()
+          .logSwgEvent(AnalyticsEvent.IMPRESSION_METER_TOAST);
+        this.deps_
+          .eventManager()
+          .logSwgEvent(AnalyticsEvent.EVENT_OFFERED_METER);
+      });
+    });
+  }
+
+  /**
+   * Sets a callback function this class calls when a user dismisses the toast to consume a free read.
+   * @param {function()} onConsumeCallback
+   */
+  setOnConsumeCallback(onConsumeCallback) {
+    this.onConsumeCallback_ = onConsumeCallback;
+  }
+
+  /**
+   * Removes the event listeners that close the iframe and make the body visible.
+   */
+  removeCloseEventListener() {
+    this.win_.removeEventListener('click', this.sendCloseRequestFunction_);
+    this.win_.removeEventListener('touchstart', this.sendCloseRequestFunction_);
+    this.win_.removeEventListener('mousedown', this.sendCloseRequestFunction_);
+    if (this.isMobile_()) {
+      const $body = this.win_.document.body;
+      setStyle($body, 'overflow', 'visible');
+    } else {
+      this.win_.removeEventListener('scroll', this.scrollEventListener_);
+    }
+  }
+
+  /**
+   * Changes the iframe box shadow to match desired specifications on mobile.
+   */
+  setDialogBoxShadow_() {
+    const mobileMediaQuery = this.win_.matchMedia(
+      '(max-width: 640px), (max-height: 640px)'
+    );
+    const element = this.dialogManager_.getDialog().getElement();
+    if (mobileMediaQuery.matches) {
+      setImportantStyles$1(element, {'box-shadow': IFRAME_BOX_SHADOW});
+    }
+    mobileMediaQuery.addListener((changed) => {
+      if (changed.matches) {
+        setImportantStyles$1(element, {'box-shadow': IFRAME_BOX_SHADOW});
+      } else {
+        setImportantStyles$1(element, {'box-shadow': ''});
+      }
+    });
+  }
+
+  /**
+   * Changes the size of the loading iframe on desktop to match the size of
+   * the meter toast iframe.
    */
-  popupOpened(targetWin) {
-    this.popupWin_ = targetWin || null;
-    if (!this.popupGraypane_.isAttached()) {
-      this.popupGraypane_.attach();
+  setLoadingViewWidth_() {
+    const desktopMediaQuery = this.win_.matchMedia(
+      '(min-width: 640px) and (min-height: 640px)'
+    );
+    if (desktopMediaQuery.matches) {
+      const element = this.dialogManager_
+        .getDialog()
+        .getLoadingView()
+        .getElement();
+      setImportantStyles$1(element, {
+        'width': MINIMIZED_IFRAME_SIZE,
+        'margin': 'auto',
+      });
     }
-    this.popupGraypane_.show();
   }
 
   /**
+   * @param {ViewSubscriptionsResponse} response
+   * @private
    */
-  popupClosed() {
-    this.popupWin_ = null;
-    try {
-      this.popupGraypane_.hide();
-    } catch (e) {
-      // Ignore.
+  startNativeFlow_(response) {
+    if (response.getNative()) {
+      this.removeCloseEventListener();
+      // We shouldn't decrement the meter on redirects, so don't call onConsumeCallback.
+      this.onConsumeCallbackHandled_ = true;
+      this.deps_.callbacks().triggerSubscribeRequest();
     }
   }
+
+  /**
+   * Returns true if the window userAgent is a mobile platform.
+   * @private
+   */
+  isMobile_() {
+    return !!this.win_.navigator.userAgent.match(
+      /Android|iPhone|iPad|iPod|BlackBerry|IEMobile/i
+    );
+  }
 }
 
 /**
@@ -10043,7 +9776,7 @@ const toastImportantStyles = {
 };
 
 /** @const {!Object<string, string>} */
-const iframeAttributes$2 = {
+const iframeAttributes = {
   'frameborder': '0',
   'scrolling': 'no',
   'class': 'swg-toast',
@@ -10056,7 +9789,7 @@ class Toast {
   /**
    * @param {!../runtime/deps.DepsDef} deps
    * @param {string} src
-   * @param {!Object<string, ?>} args
+   * @param {?Object<string, ?>=} args
    */
   constructor(deps, src, args) {
     /** @private @const {!../model/doc.Doc} */
@@ -10068,23 +9801,21 @@ class Toast {
     /** @private @const {string} */
     this.src_ = src;
 
-    /** @private @const {!Object<string, ?>} */
-    this.args_ = args;
+    /** @private {?Object<string, ?>} */
+    this.args_ = args || {};
 
     /** @private {?Promise} */
     this.animating_ = null;
 
     /** @private @const {!HTMLIFrameElement} */
-    this.iframe_ = /** @type {!HTMLIFrameElement} */ (createElement(
-      this.doc_.getWin().document,
-      'iframe',
-      iframeAttributes$2
-    ));
+    this.iframe_ = /** @type {!HTMLIFrameElement} */ (
+      createElement(this.doc_.getWin().document, 'iframe', iframeAttributes)
+    );
 
-    setImportantStyles(this.iframe_, toastImportantStyles);
+    setImportantStyles$1(this.iframe_, toastImportantStyles);
 
     /** @private @const {!Promise} */
-    this.ready_ = new Promise(resolve => {
+    this.ready_ = new Promise((resolve) => {
       this.iframe_.onload = resolve;
     });
   }
@@ -10113,19 +9844,19 @@ class Toast {
     const toastDurationSeconds = 7;
     return this.activityPorts_
       .openIframe(this.iframe_, this.src_, this.args_)
-      .then(port => {
+      .then((port) => {
         return port.whenReady();
       })
       .then(() => {
         resetStyles(this.iframe_, ['height']);
 
         this.animate_(() => {
-          setImportantStyles(this.iframe_, {
+          setImportantStyles$1(this.iframe_, {
             'transform': 'translateY(100%)',
             'opactiy': 1,
             'visibility': 'visible',
           });
-          return transition(
+          return transition$1(
             this.iframe_,
             {
               'transform': 'translateY(0)',
@@ -10152,14 +9883,9 @@ class Toast {
   animate_(callback) {
     const wait = this.animating_ || Promise.resolve();
     return (this.animating_ = wait
-      .then(
-        () => {
-          return callback();
-        },
-        () => {
-          // Ignore errors to make sure animations don't get stuck.
-        }
-      )
+      .then(() => callback())
+      // Ignore errors to make sure animations don't get stuck.
+      .catch(() => {})
       .then(() => {
         this.animating_ = null;
       }));
@@ -10177,7 +9903,7 @@ class Toast {
         return Promise.resolve();
       }, 500);
 
-      return transition(
+      return transition$1(
         this.iframe_,
         {
           'transform': 'translateY(100%)',
@@ -10191,6 +9917,321 @@ class Toast {
   }
 }
 
+/**
+ * Copyright 2019 The Subscribe with Google 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.
+ */
+
+/** @const {!Object<string,AnalyticsEvent>} */
+const PublisherEventToAnalyticsEvent = {
+  [Event.IMPRESSION_PAYWALL]: AnalyticsEvent.IMPRESSION_PAYWALL,
+  [Event.IMPRESSION_AD]: AnalyticsEvent.IMPRESSION_AD,
+  [Event.IMPRESSION_OFFERS]: AnalyticsEvent.IMPRESSION_OFFERS,
+  [Event.ACTION_SUBSCRIPTIONS_LANDING_PAGE]:
+    AnalyticsEvent.ACTION_SUBSCRIPTIONS_LANDING_PAGE,
+  [Event.ACTION_OFFER_SELECTED]: AnalyticsEvent.ACTION_OFFER_SELECTED,
+  [Event.ACTION_PAYMENT_FLOW_STARTED]:
+    AnalyticsEvent.ACTION_PAYMENT_FLOW_STARTED,
+  [Event.ACTION_PAYMENT_COMPLETED]: AnalyticsEvent.ACTION_PAYMENT_COMPLETE,
+  [Event.EVENT_CUSTOM]: AnalyticsEvent.EVENT_CUSTOM,
+};
+
+/** @const {!Object<?AnalyticsEvent,?Event>} */
+const AnalyticsEventToPublisherEvent = {
+  [AnalyticsEvent.UNKNOWN]: null,
+  [AnalyticsEvent.IMPRESSION_PAYWALL]: Event.IMPRESSION_PAYWALL,
+  [AnalyticsEvent.IMPRESSION_AD]: Event.IMPRESSION_AD,
+  [AnalyticsEvent.IMPRESSION_OFFERS]: Event.IMPRESSION_OFFERS,
+  [AnalyticsEvent.IMPRESSION_SUBSCRIBE_BUTTON]: null,
+  [AnalyticsEvent.IMPRESSION_SMARTBOX]: null,
+  [AnalyticsEvent.ACTION_SUBSCRIBE]: null,
+  [AnalyticsEvent.ACTION_PAYMENT_COMPLETE]: Event.ACTION_PAYMENT_COMPLETED,
+  [AnalyticsEvent.ACTION_ACCOUNT_CREATED]: null,
+  [AnalyticsEvent.ACTION_ACCOUNT_ACKNOWLEDGED]: null,
+  [AnalyticsEvent.ACTION_SUBSCRIPTIONS_LANDING_PAGE]:
+    Event.ACTION_SUBSCRIPTIONS_LANDING_PAGE,
+  [AnalyticsEvent.ACTION_PAYMENT_FLOW_STARTED]:
+    Event.ACTION_PAYMENT_FLOW_STARTED,
+  [AnalyticsEvent.ACTION_OFFER_SELECTED]: Event.ACTION_OFFER_SELECTED,
+  [AnalyticsEvent.EVENT_PAYMENT_FAILED]: null,
+  [AnalyticsEvent.EVENT_CUSTOM]: Event.EVENT_CUSTOM,
+};
+
+/** @const {!Object<string,?Array<AnalyticsEvent>>} */
+const ShowcaseEvents = {
+  // Events related to content being potentially unlockable
+  [ShowcaseEvent.EVENT_SHOWCASE_METER_OFFERED]: [
+    AnalyticsEvent.EVENT_HAS_METERING_ENTITLEMENTS,
+    AnalyticsEvent.EVENT_OFFERED_METER,
+  ],
+
+  // Events related to content being unlocked
+  [ShowcaseEvent.EVENT_SHOWCASE_UNLOCKED_BY_SUBSCRIPTION]: [
+    AnalyticsEvent.EVENT_UNLOCKED_BY_SUBSCRIPTION,
+  ],
+  [ShowcaseEvent.EVENT_SHOWCASE_UNLOCKED_BY_METER]: [
+    AnalyticsEvent.EVENT_HAS_METERING_ENTITLEMENTS,
+    AnalyticsEvent.EVENT_UNLOCKED_BY_METER,
+  ],
+  [ShowcaseEvent.EVENT_SHOWCASE_UNLOCKED_FREE_PAGE]: [
+    AnalyticsEvent.EVENT_UNLOCKED_FREE_PAGE,
+  ],
+
+  // Events requiring user action to unlock content
+  [ShowcaseEvent.EVENT_SHOWCASE_NO_ENTITLEMENTS_REGWALL]: [
+    AnalyticsEvent.EVENT_NO_ENTITLEMENTS,
+    AnalyticsEvent.IMPRESSION_REGWALL,
+    AnalyticsEvent.IMPRESSION_SHOWCASE_REGWALL,
+  ],
+
+  // Events requiring subscription to unlock content
+  [ShowcaseEvent.EVENT_SHOWCASE_NO_ENTITLEMENTS_PAYWALL]: [
+    AnalyticsEvent.EVENT_NO_ENTITLEMENTS,
+    AnalyticsEvent.IMPRESSION_PAYWALL,
+  ],
+  [ShowcaseEvent.EVENT_SHOWCASE_INELIGIBLE_PAYWALL]: [
+    // TODO(b/181690059): Create showcase ineligible AnalyticsEvent
+    AnalyticsEvent.IMPRESSION_PAYWALL,
+  ],
+};
+
+/** @const {!Object<?AnalyticsEvent,?Event>} */
+const AnalyticsEventToEntitlementResult = {
+  [AnalyticsEvent.IMPRESSION_REGWALL]: EntitlementResult.LOCKED_REGWALL,
+  [AnalyticsEvent.EVENT_UNLOCKED_BY_METER]: EntitlementResult.UNLOCKED_METER,
+  [AnalyticsEvent.EVENT_UNLOCKED_BY_SUBSCRIPTION]:
+    EntitlementResult.UNLOCKED_SUBSCRIBER,
+  [AnalyticsEvent.EVENT_UNLOCKED_FREE_PAGE]: EntitlementResult.UNLOCKED_FREE,
+  [AnalyticsEvent.IMPRESSION_PAYWALL]: EntitlementResult.LOCKED_PAYWALL,
+};
+
+/**
+ * @param {!string} eventCategory
+ * @param {!string} eventAction
+ * @param {!string} eventLabel
+ * @param {!boolean} nonInteraction
+ * @returns {!Object}
+ */
+const createGoogleAnalyticsEvent = (
+  eventCategory,
+  eventAction,
+  eventLabel,
+  nonInteraction
+) => ({
+  eventCategory,
+  eventAction,
+  eventLabel,
+  nonInteraction,
+});
+
+/** @const {!Object<?AnalyticsEvent,?Object>} */
+const AnalyticsEventToGoogleAnalyticsEvent = {
+  [AnalyticsEvent.IMPRESSION_OFFERS]: createGoogleAnalyticsEvent(
+    'NTG paywall',
+    'paywall modal impression',
+    '',
+    true
+  ),
+  [AnalyticsEvent.IMPRESSION_CONTRIBUTION_OFFERS]: createGoogleAnalyticsEvent(
+    'NTG membership',
+    'offer impressions',
+    '',
+    true
+  ),
+
+  [AnalyticsEvent.ACTION_OFFER_SELECTED]: createGoogleAnalyticsEvent(
+    'NTG paywall',
+    'click',
+    '',
+    false
+  ),
+  [AnalyticsEvent.ACTION_SWG_SUBSCRIPTION_MINI_PROMPT_CLICK]:
+    createGoogleAnalyticsEvent(
+      'NTG subscription',
+      'marketing modal click',
+      '',
+      false
+    ),
+  [AnalyticsEvent.IMPRESSION_SWG_SUBSCRIPTION_MINI_PROMPT]:
+    createGoogleAnalyticsEvent(
+      'NTG subscription',
+      'marketing modal impression',
+      '',
+      true
+    ),
+  [AnalyticsEvent.ACTION_SWG_CONTRIBUTION_MINI_PROMPT_CLICK]:
+    createGoogleAnalyticsEvent(
+      'NTG membership',
+      'marketing modal click',
+      '',
+      false
+    ),
+  [AnalyticsEvent.IMPRESSION_SWG_CONTRIBUTION_MINI_PROMPT]:
+    createGoogleAnalyticsEvent(
+      'NTG membership',
+      'membership modal impression',
+      '',
+      true
+    ),
+};
+
+/** @const {!Object<?AnalyticsEvent,?Object>} */
+const SubscriptionSpecificAnalyticsEventToGoogleAnalyticsEvent = {
+  [AnalyticsEvent.ACTION_PAYMENT_COMPLETE]: createGoogleAnalyticsEvent(
+    'NTG subscription',
+    'submit',
+    'success',
+    false
+  ),
+};
+
+/** @const {!Object<?AnalyticsEvent,?Object>} */
+const ContributionSpecificAnalyticsEventToGoogleAnalyticsEvent = {
+  [AnalyticsEvent.ACTION_PAYMENT_COMPLETE]: createGoogleAnalyticsEvent(
+    'NTG membership',
+    'submit',
+    'success',
+    false
+  ),
+};
+
+/**
+ * Converts a propensity event enum into an analytics event enum.
+ * @param {!Event|string} propensityEvent
+ * @returns {!AnalyticsEvent}
+ */
+function publisherEventToAnalyticsEvent(propensityEvent) {
+  return PublisherEventToAnalyticsEvent[propensityEvent];
+}
+
+/**
+ * Converts an analytics event enum into a propensity event enum.
+ * @param {?AnalyticsEvent} analyticsEvent
+ * @returns {?Event}
+ */
+function analyticsEventToPublisherEvent(analyticsEvent) {
+  return AnalyticsEventToPublisherEvent[analyticsEvent];
+}
+
+/**
+ * Converts a publisher entitlement event enum into an array analytics events.
+ * @param {!ShowcaseEvent} event
+ * @returns {!Array<AnalyticsEvent>}
+ */
+function showcaseEventToAnalyticsEvents(event) {
+  return ShowcaseEvents[event] || [];
+}
+
+function analyticsEventToEntitlementResult(event) {
+  return AnalyticsEventToEntitlementResult[event];
+}
+
+/**
+ * Converts an analytics event enum into a Google Analytics event object.
+ * @param {?AnalyticsEvent} event
+ * @param {string} subscriptionFlow
+ * @returns {?Object}
+ */
+function analyticsEventToGoogleAnalyticsEvent(event, subscriptionFlow) {
+  let gaEvent = null;
+  if (subscriptionFlow) {
+    if (subscriptionFlow == SubscriptionFlows.SUBSCRIBE) {
+      gaEvent = SubscriptionSpecificAnalyticsEventToGoogleAnalyticsEvent[event];
+    } else if (subscriptionFlow == SubscriptionFlows.CONTRIBUTE) {
+      gaEvent = ContributionSpecificAnalyticsEventToGoogleAnalyticsEvent[event];
+    }
+  }
+  return gaEvent || AnalyticsEventToGoogleAnalyticsEvent[event];
+}
+
+/**
+ * Copyright 2020 The Subscribe with Google 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.
+ */
+
+/**
+ * Returns true if the query string contains fresh Google Article Access (GAA) params.
+ * @param {string} queryString
+ * @return {boolean}
+ */
+function queryStringHasFreshGaaParams(queryString) {
+  const params = parseQueryString(queryString);
+
+  // Verify GAA params exist.
+  if (
+    !params['gaa_at'] ||
+    !params['gaa_n'] ||
+    !params['gaa_sig'] ||
+    !params['gaa_ts']
+  ) {
+    return false;
+  }
+
+  // Verify access type.
+  const noAccess = params['gaa_at'] === 'na';
+  if (noAccess) {
+    return false;
+  }
+
+  // Verify timestamp isn't stale.
+  const expirationTimestamp = parseInt(params['gaa_ts'], 16);
+  const currentTimestamp = Date.now() / 1000;
+  if (expirationTimestamp < currentTimestamp) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Copyright 2020 The Subscribe with Google 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.
+ */
+
+/**
+ * @param {!number} millis
+ * @return {!Timestamp}
+ */
+function toTimestamp(millis) {
+  return new Timestamp(
+    [Math.floor(millis / 1000), (millis % 1000) * 1000000],
+    false
+  );
+}
+
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
  *
@@ -10249,6 +10290,13 @@ class EntitlementsManager {
     /** @private {boolean} */
     this.blockNextNotification_ = false;
 
+    /**
+     * String containing encoded metering parameters currently.
+     * We may expand this to contain more information in the future.
+     * @private {?string}
+     */
+    this.encodedParams_ = null;
+
     /** @private @const {!./storage.Storage} */
     this.storage_ = deps.storage();
 
@@ -10257,6 +10305,10 @@ class EntitlementsManager {
 
     /** @private @const {!../api/subscriptions.Config} */
     this.config_ = deps.config();
+
+    this.deps_
+      .eventManager()
+      .registerEventListener(this.possiblyPingbackOnClientEvent_.bind(this));
   }
 
   /**
@@ -10287,22 +10339,31 @@ class EntitlementsManager {
   }
 
   /**
-   * @return {string}
-   * @private
-   */
-  getQueryString_() {
-    return this.win_.location.search;
-  }
-
-  /**
-   * @param {?string=} encryptedDocumentKey
+   * @param {!GetEntitlementsParamsExternalDef=} params
    * @return {!Promise<!Entitlements>}
    */
-  getEntitlements(encryptedDocumentKey) {
+  getEntitlements(params) {
+    // Remain backwards compatible by accepting
+    // `encryptedDocumentKey` string as a first param.
+    if (typeof params === 'string') {
+      // TODO: Delete the fallback if nobody needs it. Use a log to verify.
+      if (Date.now() > 1600289016959) {
+        // TODO: Remove the conditional check for this warning
+        // after the AMP extension is updated to pass an object.
+        warn(
+          `[swg.js:getEntitlements]: If present, the first param of getEntitlements() should be an object of type GetEntitlementsParamsExternalDef.`
+        );
+      }
+
+      params = {
+        encryption: {encryptedDocumentKey: /**@type {string} */ (params)},
+      };
+    }
+
     if (!this.responsePromise_) {
-      this.responsePromise_ = this.getEntitlementsFlow_(encryptedDocumentKey);
+      this.responsePromise_ = this.getEntitlementsFlow_(params);
     }
-    return this.responsePromise_.then(response => {
+    return this.responsePromise_.then((response) => {
       if (response.isReadyToPay != null) {
         this.analyticsService_.setReadyToPay(response.isReadyToPay);
       }
@@ -10329,33 +10390,150 @@ class EntitlementsManager {
   }
 
   /**
-   * @param {?string=} encryptedDocumentKey
+   * Retrieves the 'gaa_n' parameter from the query string.
+   */
+  getGaaToken_() {
+    return parseQueryString(this.win_.location.search)['gaa_n'];
+  }
+
+  /**
+   * Sends a pingback that marks a metering entitlement as used.
+   * @param {!Entitlements} entitlements
+   */
+  consumeMeter_(entitlements) {
+    const entitlement = entitlements.getEntitlementForThis();
+    if (!entitlement || entitlement.source !== GOOGLE_METERING_SOURCE) {
+      return;
+    }
+    // Verify GAA params are present, otherwise bail since the pingback
+    // shouldn't happen on non-metering requests.
+    if (!queryStringHasFreshGaaParams(this.win_.location.search)) {
+      return;
+    }
+
+    this.deps_
+      .eventManager()
+      .logSwgEvent(AnalyticsEvent.EVENT_UNLOCKED_BY_METER, false);
+
+    const token = this.getGaaToken_();
+
+    const jwt = new EntitlementJwt();
+    jwt.setSource(entitlement.source);
+    jwt.setJwt(entitlement.subscriptionToken);
+    return this.postEntitlementsRequest_(
+      jwt,
+      EntitlementResult.UNLOCKED_METER,
+      EntitlementSource.GOOGLE_SHOWCASE_METERING_SERVICE,
+      token
+    );
+  }
+
+  /**
+   * Listens for events from the event manager and informs the server
+   * about publisher entitlements and non-consumable Google entitlements.
+   * @param {!../api/client-event-manager-api.ClientEvent} event
+   */
+  possiblyPingbackOnClientEvent_(event) {
+    // Verify GAA params are present, otherwise bail since the pingback
+    // shouldn't happen on non-metering requests.
+    if (!queryStringHasFreshGaaParams(this.win_.location.search)) {
+      return;
+    }
+
+    // A subset of analytics events are also an entitlement result
+    const result = analyticsEventToEntitlementResult(event.eventType);
+    if (!result) {
+      return;
+    }
+    let source = null;
+
+    switch (event.eventOriginator) {
+      // The indicates the publisher reported it via subscriptions.setShowcaseEntitlement
+      case EventOriginator.SHOWCASE_CLIENT:
+        source = EntitlementSource.PUBLISHER_ENTITLEMENT;
+        break;
+      case EventOriginator.SWG_CLIENT: // Fallthrough, these are the same
+      case EventOriginator.SWG_SERVER:
+        if (result == EntitlementResult.UNLOCKED_METER) {
+          // Meters from Google require a valid jwt, which is sent by
+          // an entitlement.
+          return;
+        }
+        source = EntitlementSource.GOOGLE_SUBSCRIBER_ENTITLEMENT;
+        break;
+      // Permission to pingback other sources was not requested
+      default:
+        return;
+    }
+    const token = this.getGaaToken_();
+    const isUserRegistered =
+      event?.additionalParameters?.getIsUserRegistered?.();
+    this.postEntitlementsRequest_(
+      new EntitlementJwt(),
+      result,
+      source,
+      token,
+      isUserRegistered
+    );
+  }
+
+  // Informs the Entitlements server about the entitlement used
+  // to unlock the page.
+  postEntitlementsRequest_(
+    usedEntitlement,
+    entitlementResult,
+    entitlementSource,
+    optionalToken = '',
+    optionalIsUserRegistered = null
+  ) {
+    const message = new EntitlementsRequest();
+    message.setUsedEntitlement(usedEntitlement);
+    message.setClientEventTime(toTimestamp(Date.now()));
+    message.setEntitlementResult(entitlementResult);
+    message.setEntitlementSource(entitlementSource);
+    message.setToken(optionalToken);
+    if (typeof optionalIsUserRegistered === 'boolean') {
+      message.setIsUserRegistered(optionalIsUserRegistered);
+    }
+
+    let url =
+      '/publication/' +
+      encodeURIComponent(this.publicationId_) +
+      '/entitlements';
+    if (this.encodedParams_) {
+      url = addQueryParam(url, 'encodedParams', this.encodedParams_);
+    }
+
+    this.fetcher_.sendPost(serviceUrl(url), message);
+  }
+
+  /**
+   * @param {!GetEntitlementsParamsExternalDef=} params
    * @return {!Promise<!Entitlements>}
    * @private
    */
-  getEntitlementsFlow_(encryptedDocumentKey) {
-    return this.fetchEntitlementsWithCaching_(encryptedDocumentKey).then(
-      entitlements => {
-        this.onEntitlementsFetched_(entitlements);
-        return entitlements;
-      }
-    );
+  getEntitlementsFlow_(params) {
+    return this.fetchEntitlementsWithCaching_(params).then((entitlements) => {
+      this.onEntitlementsFetched_(entitlements);
+      return entitlements;
+    });
   }
 
   /**
-   * @param {?string=} encryptedDocumentKey
+   * @param {!GetEntitlementsParamsExternalDef=} params
    * @return {!Promise<!Entitlements>}
    * @private
    */
-  fetchEntitlementsWithCaching_(encryptedDocumentKey) {
+  fetchEntitlementsWithCaching_(params) {
     return Promise.all([
       this.storage_.get(ENTS_STORAGE_KEY),
       this.storage_.get(IS_READY_TO_PAY_STORAGE_KEY),
-    ]).then(cachedValues => {
+    ]).then((cachedValues) => {
       const raw = cachedValues[0];
       const irtp = cachedValues[1];
       // Try cache first.
-      if (raw && !encryptedDocumentKey) {
+      const needsDecryption = !!(params && params.encryption);
+      if (raw && !needsDecryption) {
         const cached = this.getValidJwtEntitlements_(
           raw,
           /* requireNonExpired */ true,
@@ -10368,9 +10546,9 @@ class EntitlementsManager {
         }
       }
       // If cache didn't match, perform fetch.
-      return this.fetchEntitlements_(encryptedDocumentKey).then(ents => {
-        // If entitlements match the product, store them in cache.
-        if (ents && ents.enablesThis() && ents.raw) {
+      return this.fetchEntitlements_(params).then((ents) => {
+        // If the product is enabled by cacheable entitlements, store them in cache.
+        if (ents && ents.enablesThisWithCacheableEntitlements() && ents.raw) {
           this.storage_.set(ENTS_STORAGE_KEY, ents.raw);
         }
         return ents;
@@ -10379,21 +10557,21 @@ class EntitlementsManager {
   }
 
   /**
-   * @param {?string=} encryptedDocumentKey
+   * @param {!GetEntitlementsParamsExternalDef=} params
    * @return {!Promise<!Entitlements>}
    * @private
    */
-  fetchEntitlements_(encryptedDocumentKey) {
+  fetchEntitlements_(params) {
     // TODO(dvoytenko): Replace retries with consistent fetch.
     let positiveRetries = this.positiveRetries_;
     this.positiveRetries_ = 0;
     const attempt = () => {
       positiveRetries--;
-      return this.fetch_(encryptedDocumentKey).then(entitlements => {
+      return this.fetch_(params).then((entitlements) => {
         if (entitlements.enablesThis() || positiveRetries <= 0) {
           return entitlements;
         }
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
           this.win_.setTimeout(() => {
             resolve(attempt());
           }, 550);
@@ -10437,6 +10615,7 @@ class EntitlementsManager {
     }
     const signedData = json['signedEntitlements'];
     const decryptedDocumentKey = json['decryptedDocumentKey'];
+    const swgUserToken = json['swgUserToken'];
     if (signedData) {
       const entitlements = this.getValidJwtEntitlements_(
         signedData,
@@ -10445,11 +10624,13 @@ class EntitlementsManager {
         decryptedDocumentKey
       );
       if (entitlements) {
+        this.saveSwgUserToken_(swgUserToken);
         return entitlements;
       }
     } else {
       const plainEntitlements = json['entitlements'];
       if (plainEntitlements) {
+        this.saveSwgUserToken_(swgUserToken);
         return this.createEntitlements_(
           '',
           plainEntitlements,
@@ -10462,6 +10643,17 @@ class EntitlementsManager {
     return this.createEntitlements_('', [], isReadyToPay);
   }
 
+  /**
+   * Persist swgUserToken in local storage if entitlements and swgUserToken exist
+   * @param {?string|undefined} swgUserToken
+   * @private
+   */
+  saveSwgUserToken_(swgUserToken) {
+    if (swgUserToken) {
+      this.storage_.set(Constants$1.USER_TOKEN, swgUserToken, true);
+    }
+  }
+
   /**
    * @param {string} raw
    * @param {boolean} requireNonExpired
@@ -10520,6 +10712,7 @@ class EntitlementsManager {
       Entitlement.parseListFromJson(json),
       this.pageConfig_.getProductId(),
       this.ack_.bind(this),
+      this.consume_.bind(this),
       isReadyToPay,
       decryptedDocumentKey
     );
@@ -10543,76 +10736,235 @@ class EntitlementsManager {
       .callbacks()
       .triggerEntitlementsResponse(Promise.resolve(entitlements));
 
-    // Show a toast if needed.
-    this.maybeShowToast_(entitlements);
+    const entitlement = entitlements.getEntitlementForThis();
+    if (!entitlement) {
+      this.deps_
+        .eventManager()
+        .logSwgEvent(AnalyticsEvent.EVENT_NO_ENTITLEMENTS, false);
+      return;
+    }
+    this.maybeShowToast_(entitlement);
   }
 
   /**
-   * @param {!Entitlements} entitlements
+   * @param {!Entitlement} entitlement
    * @return {!Promise}
    * @private
    */
-  maybeShowToast_(entitlements) {
-    const entitlement = entitlements.getEntitlementForThis();
-    if (!entitlement) {
+  maybeShowToast_(entitlement) {
+    // Don't show toast for metering entitlements.
+    if (entitlement.source === GOOGLE_METERING_SOURCE) {
+      this.deps_
+        .eventManager()
+        .logSwgEvent(AnalyticsEvent.EVENT_HAS_METERING_ENTITLEMENTS, false);
       return Promise.resolve();
     }
-    // Check if storage bit is set. It's only set by the `Entitlements.ack`
-    // method.
-    return this.storage_.get(TOAST_STORAGE_KEY).then(value => {
-      if (value == '1') {
-        // Already shown;
+
+    this.deps_
+      .eventManager()
+      .logSwgEvent(AnalyticsEvent.EVENT_UNLOCKED_BY_SUBSCRIPTION, false);
+    // Check if storage bit is set. It's only set by the `Entitlements.ack` method.
+    return this.storage_.get(TOAST_STORAGE_KEY).then((value) => {
+      const toastWasShown = value === '1';
+      if (toastWasShown) {
         return;
       }
-      if (entitlement) {
-        this.showToast_(entitlement);
-      }
+
+      // Show toast.
+      const source = entitlement.source || GOOGLE_METERING_SOURCE;
+      return new Toast(
+        this.deps_,
+        feUrl('/toastiframe'),
+        feArgs({
+          'publicationId': this.publicationId_,
+          'source': source,
+        })
+      ).open();
     });
   }
 
   /**
-   * @param {!Entitlement} entitlement
+   * @param {!Entitlements} entitlements
    * @private
    */
-  showToast_(entitlement) {
-    const source = entitlement.source || 'google';
-    return new Toast(
-      this.deps_,
-      feUrl('/toastiframe'),
-      feArgs({
-        'publicationId': this.publicationId_,
-        'source': source,
-      })
-    ).open();
+  ack_(entitlements) {
+    if (entitlements.getEntitlementForThis()) {
+      this.setToastShown(true);
+    }
   }
 
   /**
    * @param {!Entitlements} entitlements
+   * @param {?Function=} onCloseDialog Called after the user closes the dialog.
    * @private
    */
-  ack_(entitlements) {
-    if (entitlements.getEntitlementForThis()) {
-      this.setToastShown(true);
+  consume_(entitlements, onCloseDialog) {
+    if (entitlements.enablesThisWithGoogleMetering()) {
+      const onConsumeCallback = () => {
+        if (onCloseDialog) {
+          onCloseDialog();
+        }
+        this.consumeMeter_(entitlements);
+      };
+      const showToast = this.getShowToastFromEntitlements_(entitlements);
+      if (showToast === false) {
+        // If showToast is explicitly false, call onConsumeCallback directly.
+        return onConsumeCallback();
+      }
+      const meterToastApi = new MeterToastApi(this.deps_);
+      meterToastApi.setOnConsumeCallback(onConsumeCallback);
+      return meterToastApi.start();
+    }
+  }
+
+  /**
+   * Gets the `showToast` value (or null/undefined if unavailable) from
+   * the Google metering entitlement details in the input entitlements.
+   * @param {!Entitlements} entitlements
+   * @return {boolean|undefined}
+   * @private
+   */
+  getShowToastFromEntitlements_(entitlements) {
+    const entitlement = entitlements.getEntitlementForThis();
+    if (!entitlement || entitlement.source !== GOOGLE_METERING_SOURCE) {
+      return;
+    }
+    try {
+      const meteringJwt = this.jwtHelper_.decode(entitlement.subscriptionToken);
+      return meteringJwt['metering'] && meteringJwt['metering']['showToast'];
+    } catch (e) {
+      // Ignore decoding errors.
+      return;
     }
   }
 
   /**
-   * @param {?string=} encryptedDocumentKey
+   * @param {!GetEntitlementsParamsExternalDef=} params
    * @return {!Promise<!Entitlements>}
    * @private
    */
-  fetch_(encryptedDocumentKey) {
+  fetch_(params) {
+    // Get swgUserToken from getEntitlements params
+    const swgUserTokenParam = params?.encryption?.swgUserToken;
+    // Get swgUserToken from local storage if it is not in getEntitlements params
+    const swgUserTokenPromise = swgUserTokenParam
+      ? Promise.resolve(swgUserTokenParam)
+      : this.storage_.get(Constants$1.USER_TOKEN, true);
+
     let url =
       '/publication/' +
       encodeURIComponent(this.publicationId_) +
       '/entitlements';
-    if (encryptedDocumentKey) {
-      //TODO(chenshay): Make this a 'Post'.
-      url += '?crypt=' + encodeURIComponent(encryptedDocumentKey);
-    }
-    return this.fetcher_
-      .fetchCredentialedJson(serviceUrl(url))
-      .then(json => this.parseEntitlements(json));
+
+    return Promise.all([
+      hash(getCanonicalUrl(this.deps_.doc())),
+      swgUserTokenPromise,
+    ])
+      .then((values) => {
+        const hashedCanonicalUrl = values[0];
+        const swgUserToken = values[1];
+
+        // Add encryption param.
+        if (params?.encryption) {
+          url = addQueryParam(
+            url,
+            'crypt',
+            params.encryption.encryptedDocumentKey
+          );
+        }
+
+        // Add swgUserToken param.
+        if (swgUserToken) {
+          url = addQueryParam(url, 'sut', swgUserToken);
+        }
+
+        // Add metering params.
+        if (this.publicationId_ && params?.metering?.state) {
+          const meteringStateId = params.metering.state.id;
+          if (
+            typeof meteringStateId === 'string' &&
+            meteringStateId.length > 0
+          ) {
+            /** @type {!GetEntitlementsParamsInternalDef} */
+            const encodableParams = {
+              metering: {
+                clientTypes: [MeterClientTypes.LICENSED_BY_GOOGLE],
+                owner: this.publicationId_,
+                resource: {
+                  hashedCanonicalUrl,
+                },
+                state: {
+                  id: meteringStateId,
+                  attributes: [],
+                },
+              },
+            };
+
+            // Collect attributes.
+            function collectAttributes({attributes, category}) {
+              if (!attributes) {
+                return;
+              }
+
+              const attributeNames = Object.keys(attributes);
+              attributeNames.forEach((attributeName) => {
+                const name = `${category}_${attributeName}`;
+                const timestamp = Number(attributes[attributeName].timestamp);
+
+                // Validate timestamp.
+                const timestampIsTooFarInTheFuture =
+                  timestamp > (Date.now() / 1000) * 2;
+                if (!timestamp || timestampIsTooFarInTheFuture) {
+                  warn(
+                    `SwG Entitlements: Please specify a Unix timestamp, in seconds, for the "${attributeName}" ${category} attribute. The timestamp you passed (${attributes[attributeName].timestamp}) looks invalid.`
+                  );
+                }
+
+                // Collect attribute.
+                encodableParams.metering.state.attributes.push({
+                  name,
+                  timestamp,
+                });
+              });
+            }
+            collectAttributes({
+              attributes: params.metering.state.standardAttributes,
+              category: 'standard',
+            });
+            collectAttributes({
+              attributes: params.metering.state.customAttributes,
+              category: 'custom',
+            });
+
+            // Encode params.
+            this.encodedParams_ = base64UrlEncodeFromBytes(
+              utf8EncodeSync(JSON.stringify(encodableParams))
+            );
+            url = addQueryParam(url, 'encodedParams', this.encodedParams_);
+          } else {
+            warn(
+              `SwG Entitlements: Please specify a metering state ID string, ideally a hash to avoid PII.`
+            );
+          }
+        }
+
+        // Build URL.
+        return serviceUrl(url);
+      })
+      .then((url) => {
+        this.deps_
+          .eventManager()
+          .logSwgEvent(AnalyticsEvent.ACTION_GET_ENTITLEMENTS, false);
+        return this.fetcher_.fetchCredentialedJson(url);
+      })
+      .then((json) => {
+        if (json.errorMessages && json.errorMessages.length > 0) {
+          json.errorMessages.forEach((errorMessage) => {
+            warn('SwG Entitlements: ' + errorMessage);
+          });
+        }
+        return this.parseEntitlements(json);
+      });
   }
 }
 
@@ -10682,11 +11034,11 @@ class Xhr {
    */
   fetch_(input, init) {
     // TODO(avimehta): Should the requests go through when page is not visible?
-    log_2(typeof input == 'string', 'Only URL supported: %s', input);
+    assert(typeof input == 'string', 'Only URL supported: %s', input);
     // In particular, Firefox does not tolerate `null` values for
     // `credentials`.
     const creds = init.credentials;
-    log_2(
+    assert(
       creds === undefined || creds == 'include' || creds == 'omit',
       'Only credentials=include|omit support: %s',
       creds
@@ -10706,20 +11058,22 @@ class Xhr {
    * @return {!Promise<!FetchResponse>}
    */
   fetch(input, init) {
-    // TODO (avimehta): Figure out if CORS needs be handled the way AMP does it.
     init = setupInit(init);
     return this.fetch_(input, init)
-      .then(
-        response => response,
-        reason => {
-          const targetOrigin = parseUrl$1(input).origin;
-          throw new Error(
-            `XHR Failed fetching (${targetOrigin}/...):`,
-            reason && reason.message
-          );
-        }
-      )
-      .then(response => assertSuccess(response));
+      .catch((reason) => {
+        /*
+         * If the domain is not valid for SwG we return 404 without
+         * CORS headers and the browser throws a CORS error.
+         * We include some helpful text in the message to point the
+         * publisher towards the real problem.
+         */
+        const targetOrigin = parseUrl(input).origin;
+        throw new Error(
+          `XHR Failed fetching (${targetOrigin}/...): (Note: a CORS error above may indicate that this domain is not configured for Subscribe with Google)`,
+          reason && reason.message
+        );
+      })
+      .then((response) => assertSuccess(response));
   }
 }
 
@@ -10735,7 +11089,7 @@ function normalizeMethod_(method) {
   }
   method = method.toUpperCase();
 
-  log_2(
+  assert(
     allowedMethods_.includes(method),
     'Only one of %s is currently allowed. Got %s',
     allowedMethods_.join(', '),
@@ -10776,7 +11130,7 @@ function setupInit(init, accept) {
  * @private Visible for testing
  */
 function fetchPolyfill(input, init) {
-  return new Promise(function(resolve, reject) {
+  return new Promise(function (resolve, reject) {
     const xhr = createXhrRequest(init.method || 'GET', input);
 
     if (init.credentials == 'include') {
@@ -10788,7 +11142,7 @@ function fetchPolyfill(input, init) {
     }
 
     if (init.headers) {
-      Object.keys(init.headers).forEach(function(header) {
+      Object.keys(init.headers).forEach(function (header) {
         xhr.setRequestHeader(header, init.headers[header]);
       });
     }
@@ -10856,7 +11210,7 @@ function isRetriable(status) {
  * @private Visible for testing
  */
 function assertSuccess(response) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     if (response.ok) {
       return resolve(response);
     }
@@ -10905,7 +11259,7 @@ class FetchResponse {
    * @return {!FetchResponse}
    */
   clone() {
-    log_2(!this.bodyUsed, 'Body already used');
+    assert(!this.bodyUsed, 'Body already used');
     return new FetchResponse(this.xhr_);
   }
 
@@ -10915,7 +11269,7 @@ class FetchResponse {
    * @private
    */
   drainText_() {
-    log_2(!this.bodyUsed, 'Body already used');
+    assert(!this.bodyUsed, 'Body already used');
     this.bodyUsed = true;
     return Promise.resolve(this.xhr_.responseText);
   }
@@ -10934,27 +11288,9 @@ class FetchResponse {
    * @return {!Promise<!JsonObject>}
    */
   json() {
-    return /** @type {!Promise<!JsonObject>} */ (this.drainText_().then(
-      parseJson
-    ));
-  }
-
-  /**
-   * Reads the xhr responseXML.
-   * @return {!Promise<!Document>}
-   * @private
-   */
-  document_() {
-    log_2(!this.bodyUsed, 'Body already used');
-    this.bodyUsed = true;
-    log_2(
-      this.xhr_.responseXML,
-      'responseXML should exist. Make sure to return ' +
-        'Content-Type: text/html header.'
+    return /** @type {!Promise<!JsonObject>} */ (
+      this.drainText_().then(parseJson)
     );
-    return /** @type {!Promise<!Document>} */ (Promise.resolve(
-      log_2(this.xhr_.responseXML)
-    ));
   }
 
   /**
@@ -10963,9 +11299,9 @@ class FetchResponse {
    * @return {!Promise<!ArrayBuffer>}
    */
   arrayBuffer() {
-    return /** @type {!Promise<!ArrayBuffer>} */ (this.drainText_().then(
-      utf8EncodeSync
-    ));
+    return /** @type {!Promise<!ArrayBuffer>} */ (
+      this.drainText_().then(utf8EncodeSync)
+    );
   }
 }
 
@@ -10984,7 +11320,7 @@ class FetchResponseHeaders {
 
   /**
    * @param {string} name
-   * @return {string}
+   * @return {?string}
    */
   get(name) {
     return this.xhr_.getResponseHeader(name);
@@ -11035,9 +11371,17 @@ class Fetcher {
   /**
    * POST data to a URL endpoint, do not wait for a response.
    * @param {!string} unusedUrl
-   * @param {!string|!Object} unusedData
+   * @param {!../proto/api_messages.Message} unusedData
    */
   sendBeacon(unusedUrl, unusedData) {}
+
+  /**
+   * POST data to a URL endpoint, get a Promise for a response
+   * @param {!string} unusedUrl
+   * @param {!../proto/api_messages.Message} unusedMessage
+   * @return {!Promise<!../utils/xhr.FetchResponse>}
+   */
+  sendPost(unusedUrl, unusedMessage) {}
 }
 
 /**
@@ -11059,7 +11403,28 @@ class XhrFetcher {
       headers: {'Accept': 'text/plain, application/json'},
       credentials: 'include',
     });
-    return this.fetch(url, init).then(response => response.json());
+    return this.fetch(url, init).then((response) => {
+      return response.text().then((text) => {
+        // Remove "")]}'\n" XSSI prevention prefix in safe responses.
+        const cleanedText = text.replace(/^(\)\]\}'\n)/, '');
+        return parseJson(cleanedText);
+      });
+    });
+  }
+
+  /** @override */
+  sendPost(url, message) {
+    const init = /** @type {!../utils/xhr.FetchInitDef} */ ({
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      credentials: 'include',
+      body: 'f.req=' + serializeProtoMessageForUrl(message),
+    });
+    return this.fetch(url, init).then(
+      (response) => (response && response.json()) || {}
+    );
   }
 
   /** @override */
@@ -11069,22 +11434,80 @@ class XhrFetcher {
 
   /** @override */
   sendBeacon(url, data) {
-    const contentType = 'application/x-www-form-urlencoded;charset=UTF-8';
-    const body = 'f.req=' + serializeProtoMessageForUrl(data);
     if (navigator.sendBeacon) {
-      const blob = new Blob([body], {type: contentType});
+      const headers = {type: 'application/x-www-form-urlencoded;charset=UTF-8'};
+      const blob = new Blob(
+        ['f.req=' + serializeProtoMessageForUrl(data)],
+        headers
+      );
       navigator.sendBeacon(url, blob);
       return;
     }
-
     // Only newer browsers support beacon.  Fallback to standard XHR POST.
-    const init = /** @type {!../utils/xhr.FetchInitDef} */ ({
-      method: 'POST',
-      headers: {'Content-Type': contentType},
-      credentials: 'include',
-      body,
-    });
-    this.fetch(url, init);
+    this.sendPost(url, data);
+  }
+}
+
+/**
+ * Copyright 2021 The Subscribe with Google 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.
+ */
+
+class GoogleAnalyticsEventListener {
+  /**
+   * @param {!./deps.DepsDef} deps
+   */
+  constructor(deps) {
+    /** @private @const {!Window} */
+    this.win_ = deps.win();
+
+    /** @private @const {!./client-event-manager.ClientEventManager} */
+    this.eventManager_ = deps.eventManager();
+  }
+
+  /**
+   * Start listening to client events
+   */
+  start() {
+    this.eventManager_.registerEventListener(
+      this.handleClientEvent_.bind(this)
+    );
+  }
+
+  /**
+   *  Listens for new events from the events manager and logs appropriate events to Google Analytics.
+   * @param {!../api/client-event-manager-api.ClientEvent} event
+   */
+  handleClientEvent_(event) {
+    // Bail immediately if ga function doesn't exist in Window.
+    if (typeof this.win_.ga != 'function') {
+      return;
+    }
+    let subscriptionFlow = '';
+    if (event.additionalParameters) {
+      // additionalParameters isn't strongly typed so checking for both object and class notation.
+      subscriptionFlow =
+        event.additionalParameters.subscriptionFlow ||
+        event.additionalParameters.getSubscriptionFlow();
+    }
+    const gaEvent = analyticsEventToGoogleAnalyticsEvent(
+      event.eventType,
+      subscriptionFlow
+    );
+    if (gaEvent) {
+      this.win_.ga('send', 'event', gaEvent);
+    }
   }
 }
 
@@ -11287,14 +11710,14 @@ class LinkCompleteFlow {
         /* requireSecureChannel */ false
       );
       return promise.then(
-        response => {
+        (response) => {
           deps
             .eventManager()
             .logSwgEvent(AnalyticsEvent.ACTION_LINK_CONTINUE, true);
           const flow = new LinkCompleteFlow(deps, response);
           flow.start();
         },
-        reason => {
+        (reason) => {
           if (isCancelError(reason)) {
             deps
               .eventManager()
@@ -11354,7 +11777,7 @@ class LinkCompleteFlow {
     this.completeResolver_ = null;
 
     /** @private @const {!Promise} */
-    this.completePromise_ = new Promise(resolve => {
+    this.completePromise_ = new Promise((resolve) => {
       this.completeResolver_ = resolve;
     });
   }
@@ -11370,10 +11793,10 @@ class LinkCompleteFlow {
       /* requireSecureChannel */ true
     );
     promise
-      .then(response => {
+      .then((response) => {
         this.complete_(response);
       })
-      .catch(reason => {
+      .catch((reason) => {
         // Rethrow async.
         setTimeout(() => {
           throw reason;
@@ -11505,10 +11928,8 @@ class LinkSaveFlow {
     if (!response || !response.getRequested()) {
       return;
     }
-    this.requestPromise_ = new Promise(resolve => {
-      resolve(this.callback_());
-    })
-      .then(request => {
+    this.requestPromise_ = new Promise((resolve) => resolve(this.callback_()))
+      .then((request) => {
         const saveRequest = new LinkSaveTokenRequest();
         if (request && request.token) {
           if (request.authCode) {
@@ -11522,8 +11943,9 @@ class LinkSaveFlow {
           throw new Error('Neither token or authCode is available');
         }
         this.activityIframeView_.execute(saveRequest);
+        return request;
       })
-      .catch(reason => {
+      .catch((reason) => {
         // The flow is complete.
         this.complete_();
         throw reason;
@@ -11568,97 +11990,28 @@ class LinkSaveFlow {
         /* requireOriginVerified */ true,
         /* requireSecureChannel */ true
       )
-      .then(result => {
+      .then((result) => {
         return this.handleLinkSaveResponse_(result);
-      })
-      .catch(reason => {
-        // In case this flow wasn't complete, complete it here
-        this.complete_();
-        // Handle cancellation from user, link confirm start or completion here
-        if (isCancelError(reason)) {
-          this.deps_
-            .eventManager()
-            .logSwgEvent(
-              AnalyticsEvent.ACTION_SAVE_SUBSCR_TO_GOOGLE_CANCEL,
-              true
-            );
-          this.deps_
-            .callbacks()
-            .triggerFlowCanceled(SubscriptionFlows.LINK_ACCOUNT);
-          return false;
-        }
-        throw reason;
-      });
-  }
-}
-
-/**
- * Copyright 2019 The Subscribe with Google 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.
- */
-
-/** @const {!Object<string,AnalyticsEvent>} */
-const PublisherEventToAnalyticsEvent = {
-  [Event.IMPRESSION_PAYWALL]: AnalyticsEvent.IMPRESSION_PAYWALL,
-  [Event.IMPRESSION_AD]: AnalyticsEvent.IMPRESSION_AD,
-  [Event.IMPRESSION_OFFERS]: AnalyticsEvent.IMPRESSION_OFFERS,
-  [Event.ACTION_SUBSCRIPTIONS_LANDING_PAGE]:
-    AnalyticsEvent.ACTION_SUBSCRIPTIONS_LANDING_PAGE,
-  [Event.ACTION_OFFER_SELECTED]: AnalyticsEvent.ACTION_OFFER_SELECTED,
-  [Event.ACTION_PAYMENT_FLOW_STARTED]:
-    AnalyticsEvent.ACTION_PAYMENT_FLOW_STARTED,
-  [Event.ACTION_PAYMENT_COMPLETED]: AnalyticsEvent.ACTION_PAYMENT_COMPLETE,
-  [Event.EVENT_CUSTOM]: AnalyticsEvent.EVENT_CUSTOM,
-};
-
-/** @const {!Object<number,?Event>} */
-const AnalyticsEventToPublisherEvent = {
-  [AnalyticsEvent.UNKNOWN]: null,
-  [AnalyticsEvent.IMPRESSION_PAYWALL]: Event.IMPRESSION_PAYWALL,
-  [AnalyticsEvent.IMPRESSION_AD]: Event.IMPRESSION_AD,
-  [AnalyticsEvent.IMPRESSION_OFFERS]: Event.IMPRESSION_OFFERS,
-  [AnalyticsEvent.IMPRESSION_SUBSCRIBE_BUTTON]: null,
-  [AnalyticsEvent.IMPRESSION_SMARTBOX]: null,
-  [AnalyticsEvent.ACTION_SUBSCRIBE]: null,
-  [AnalyticsEvent.ACTION_PAYMENT_COMPLETE]: Event.ACTION_PAYMENT_COMPLETED,
-  [AnalyticsEvent.ACTION_ACCOUNT_CREATED]: null,
-  [AnalyticsEvent.ACTION_ACCOUNT_ACKNOWLEDGED]: null,
-  [AnalyticsEvent.ACTION_SUBSCRIPTIONS_LANDING_PAGE]:
-    Event.ACTION_SUBSCRIPTIONS_LANDING_PAGE,
-  [AnalyticsEvent.ACTION_PAYMENT_FLOW_STARTED]:
-    Event.ACTION_PAYMENT_FLOW_STARTED,
-  [AnalyticsEvent.ACTION_OFFER_SELECTED]: Event.ACTION_OFFER_SELECTED,
-  [AnalyticsEvent.EVENT_PAYMENT_FAILED]: null,
-  [AnalyticsEvent.EVENT_CUSTOM]: Event.EVENT_CUSTOM,
-};
-
-/**
- * Converts a propensity event enum into an analytics event enum.
- * @param {!Event|string} propensityEvent
- * @returns {!AnalyticsEvent}
- */
-function publisherEventToAnalyticsEvent(propensityEvent) {
-  return PublisherEventToAnalyticsEvent[propensityEvent];
-}
-
-/**
- * Converts an analytics event enum into a propensity event enum.
- * @param {!AnalyticsEvent} analyticsEvent
- * @returns {?Event}
- */
-function analyticsEventToPublisherEvent(analyticsEvent) {
-  return AnalyticsEventToPublisherEvent[analyticsEvent];
+      })
+      .catch((reason) => {
+        // In case this flow wasn't complete, complete it here
+        this.complete_();
+        // Handle cancellation from user, link confirm start or completion here
+        if (isCancelError(reason)) {
+          this.deps_
+            .eventManager()
+            .logSwgEvent(
+              AnalyticsEvent.ACTION_SAVE_SUBSCR_TO_GOOGLE_CANCEL,
+              true
+            );
+          this.deps_
+            .callbacks()
+            .triggerFlowCanceled(SubscriptionFlows.LINK_ACCOUNT);
+          return false;
+        }
+        throw reason;
+      });
+  }
 }
 
 /**
@@ -11803,7 +12156,6 @@ class LoginNotificationApi {
         productId: deps.pageConfig().getProductId(),
         // No need to ask the user. Just tell them you're logging them in.
         userConsent: false,
-        // TODO(chenshay): Pass entitlements value here.
       }),
       /* shouldFadeBody */ true
     );
@@ -11827,7 +12179,7 @@ class LoginNotificationApi {
         // The consent part is complete.
         this.dialogManager_.completeView(this.activityIframeView_);
       },
-      reason => {
+      (reason) => {
         this.dialogManager_.completeView(this.activityIframeView_);
         throw reason;
       }
@@ -11881,7 +12233,6 @@ class LoginPromptApi {
         productId: deps.pageConfig().getProductId(),
         // First ask the user if they want us to log them in.
         userConsent: true,
-        // TODO(chenshay): Pass entitlements value here.
       }),
       /* shouldFadeBody */ true
     );
@@ -11905,7 +12256,7 @@ class LoginPromptApi {
         // The consent part is complete.
         this.dialogManager_.completeView(this.activityIframeView_);
       },
-      reason => {
+      (reason) => {
         if (isCancelError(reason)) {
           this.deps_
             .callbacks()
@@ -11973,7 +12324,7 @@ class OffersApi {
         encodeURIComponent(productId)
     );
     // TODO(dvoytenko): switch to a non-credentialed request after launch.
-    return this.fetcher_.fetchCredentialedJson(url).then(json => {
+    return this.fetcher_.fetchCredentialedJson(url).then((json) => {
       return json['offers'] || [];
     });
   }
@@ -11996,7 +12347,7 @@ class OffersApi {
  * limitations under the License.
  */
 
-const MAX_Z_INDEX = 2147483647;
+const MAX_Z_INDEX$1 = 2147483647;
 
 const Constants = {};
 
@@ -12095,632 +12446,318 @@ Constants.IS_READY_TO_PAY_RESULT_KEY =
 
 /** @const {string} */
 Constants.UPI_CAN_MAKE_PAYMENT_CACHE_KEY =
-    Constants.STORAGE_KEY_PREFIX + '.upi.canMakePaymentCache';
-
-
-Constants.CLASS_PREFIX = 'google-payments-';
-Constants.IFRAME_ACTIVE_CONTAINER_CLASS =
-    `${Constants.CLASS_PREFIX}activeContainer`;
-Constants.IFRAME_CONTAINER_CLASS = `${Constants.CLASS_PREFIX}dialogContainer`;
-Constants.IFRAME_STYLE_CENTER_CLASS = `${Constants.CLASS_PREFIX}dialogCenter`;
-Constants.IFRAME_STYLE_CLASS = `${Constants.CLASS_PREFIX}dialog`;
-
-Constants.IFRAME_STYLE = `
-.${Constants.IFRAME_STYLE_CLASS} {
-    animation: none 0s ease 0s 1 normal none running;
-    background: none 0 0 / auto repeat scroll padding-box border-box #fff;
-    background-blend-mode: normal;
-    border: 0 none #333;
-    border-radius: 8px 8px 0 0;
-    border-collapse: separate;
-    bottom: 0;
-    box-shadow: #808080 0 3px 0 0, #808080 0 0 22px;
-    box-sizing: border-box;
-    letter-spacing: normal;
-    max-height: 100%;
-    overflow: visible;
-    position: fixed;
-    width: 100%;
-    z-index: ${MAX_Z_INDEX};
-    -webkit-appearance: none;
-    left: 0;
-}
-@media (min-width: 480px) {
-  .${Constants.IFRAME_STYLE_CLASS} {
-    width: 480px !important;
-    left: -240px !important;
-    margin-left: calc(100vw - 100vw / 2) !important;
-  }
-}
-.${Constants.IFRAME_CONTAINER_CLASS} {
-  background-color: rgba(0,0,0,0.26);
-  bottom: 0;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  right: 0;
-}
-.iframeContainer {
-  -webkit-overflow-scrolling: touch;
-}
-`;
-
-Constants.IFRAME_STYLE_CENTER = `
-.${Constants.IFRAME_STYLE_CENTER_CLASS} {
-  animation: none 0s ease 0s 1 normal none running;
-  background-blend-mode: normal;
-  background: none 0 0 / auto repeat scroll padding-box border-box #fff;
-  border-collapse: separate;
-  border-radius: 8px;
-  border: 0px none #333;
-  bottom: auto;
-  box-shadow: #808080 0 0 22px;
-  box-sizing: border-box;
-  left: -240px;
-  letter-spacing: normal;
-  margin-left: calc(100vw - 100vw / 2) !important;
-  max-height: 90%;
-  overflow: visible;
-  position: absolute;
-  top: 100%;
-  transform: scale(0.8);
-  width: 480px;
-  z-index: ${MAX_Z_INDEX};
-  -webkit-appearance: none;
-}
-@media (min-height: 667px) {
-  .${Constants.IFRAME_STYLE_CENTER_CLASS} {
-    max-height: 600px;
-  }
-}
-.${Constants.IFRAME_ACTIVE_CONTAINER_CLASS} {
-  top: 50%;
-  transform: scale(1.0) translateY(-50%);
-}
-`;
-
-Constants.GPAY_BUTTON_WITH_CARD_INFO_IMAGE =
-    'background-image: url(https://pay.google.com/gp/p/generate_gpay_btn_img);';
-
-Constants.BUTTON_LOCALE_TO_MIN_WIDTH = {
-  'en': 152,
-  'bg': 163,
-  'cs': 192,
-  'de': 183,
-  'es': 183,
-  'fr': 183,
-  'hr': 157,
-  'id': 186,
-  'ja': 148,
-  'ko': 137,
-  'ms': 186,
-  'nl': 167,
-  'pl': 182,
-  'pt': 193,
-  'ru': 206,
-  'sk': 157,
-  'sl': 211,
-  'sr': 146,
-  'tr': 161,
-  'uk': 207,
-  'zh': 156,
-};
-
-/**
- * Name of the graypane.
- *
- * @const {string}
- */
-Constants.GPAY_GRAYPANE = 'gpay-graypane';
-
-/**
- * Class used for the gpay button.
- *
- * @const {string}
- */
-Constants.GPAY_BUTTON_CLASS = 'gpay-button';
-
-Constants.BUTTON_STYLE = `
-.${Constants.GPAY_BUTTON_CLASS} {
-  background-origin: content-box;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  border: 0px;
-  border-radius: 4px;
-  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 1px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
-  cursor: pointer;
-  height: 40px;
-  min-height: 40px;
-  padding: 11px 24px;
-}
-
-.${Constants.GPAY_BUTTON_CLASS}.black {
-  background-color: #000;
-  box-shadow: none;
-  padding: 12px 24px 10px;
-}
-
-.${Constants.GPAY_BUTTON_CLASS}.white {
-  background-color: #fff;
-}
-
-.${Constants.GPAY_BUTTON_CLASS}.short {
-  min-width: 90px;
-  width: 160px;
-}
-
-.${Constants.GPAY_BUTTON_CLASS}.black.short {
-  background-image: url(https://www.gstatic.com/instantbuy/svg/dark_gpay.svg);
-}
-
-.${Constants.GPAY_BUTTON_CLASS}.white.short {
-  background-image: url(https://www.gstatic.com/instantbuy/svg/light_gpay.svg);
-}
-
-.${Constants.GPAY_BUTTON_CLASS}.black.active {
-  background-color: #5f6368;
-}
-
-.${Constants.GPAY_BUTTON_CLASS}.black.hover {
-  background-color: #3c4043;
-}
-
-.${Constants.GPAY_BUTTON_CLASS}.white.active {
-  background-color: #fff;
-}
-
-.${Constants.GPAY_BUTTON_CLASS}.white.focus {
-  box-shadow: #e8e8e8 0 1px 1px 0, #e8e8e8 0 1px 3px;
-}
-
-.${Constants.GPAY_BUTTON_CLASS}.white.hover {
-  background-color: #f8f8f8;
-}
-`;
-
-Constants.GPAY_BUTTON_WITH_OFFER_ICON_ADDITIONAL_STYLE = 'position: relative;';
-
-Constants.GPAY_OFFER_ICON_CLASS = 'gpay-offer-icon';
-
-Constants.GPAY_OFFER_ICON_SVG =
-    "<svg width=\"20px\" height=\"20px\" viewBox=\"0 0 20 20\" " +
-    "version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=" +
-    "\"http://www.w3.org/1999/xlink\" class=\"gpay-offer-icon\"><defs><path d=\"M19.41,9.58 L10.41,0.58 " +
-    "C10.05,0.22 9.55,0 9,0 L2,0 C0.9,0 0,0.9 0,2 L0,9 C0,9.55 0.22,10.05 " +
-    "0.59,10.42 L9.59,19.42 C9.95,19.78 10.45,20 11,20 C11.55,20 12.05,19.78 " +
-    "12.41,19.41 L19.41,12.41 C19.78,12.05 20,11.55 20,11 C20,10.45 19.77," +
-    "9.94 19.41,9.58 Z\" id=\"path-1\"></path></defs><g id=\"buttons_10.05\"" +
-    " stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">" +
-    "<g id=\"Artboard\" transform=\"translate(-40.000000, -43.000000)\">" +
-    "<g id=\"Group-3\" transform=\"translate(40.000000, 43.000000)\">" +
-    "<g id=\"Group-2-Copy-2\"><g id=\"Group-Copy\"><g id=\"ic_loyalty_24px\">" +
-    "<mask id=\"mask-2\" fill=\"white\"><use xlink:href=\"#path-1\"></use>" +
-    "</mask><use id=\"gpay-Shape\" fill=\"#FF6100\" fill-rule=\"nonzero\" " +
-    "xlink:href=\"#path-1\"></use><path d=\"M3.5,5 C2.67,5 2,4.33 2,3.5 C2," +
-    "2.67 2.67,2 3.5,2 C4.33,2 5,2.67 5,3.5 C5,4.33 4.33,5 3.5,5 Z\" " +
-    "id=\"Path\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" mask=\"url(#mask-2)\">" +
-    "</path></g></g></g><g id=\"Group-13-Copy-7\" transform=\"translate" +
-    "(6.000000, 6.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">" +
-    "<g id=\"Group-13-Copy-2\"><path d=\"M2.15217391,4.55172414 C0.963561082," +
-    "4.55172414 1.99840144e-14,3.53278598 1.99840144e-14,2.27586207 " +
-    "C1.99840144e-14,1.01893816 0.963561082,6.30606678e-14 2.15217391,6." +
-    "30606678e-14 C3.34078674,6.30606678e-14 4.30434783,1.01893816 4.30434783," +
-    "2.27586207 C4.30434783,3.53278598 3.34078674,4.55172414 2.15217391," +
-    "4.55172414 Z M2.15217391,3.31034483 C2.69245247,3.31034483 3.13043478,2." +
-    "84719112 3.13043478,2.27586207 C3.13043478,1.70453302 2.69245247," +
-    "1.24137931 2.15217391,1.24137931 C1.61189535,1.24137931 1.17391304,1" +
-    ".70453302 1.17391304,2.27586207 C1.17391304,2.84719112 1.61189535,3." +
-    "31034483 2.15217391,3.31034483 Z\" id=\"Combined-Shape\"></path>" +
-    "<path d=\"M6.84782609,9 C5.65921326,9 4.69565217,7.98106184 4.69565217," +
-    "6.72413793 C4.69565217,5.46721402 5.65921326,4.44827586 6.84782609," +
-    "4.44827586 C8.03643892,4.44827586 9,5.46721402 9,6.72413793 C9,7.98106184" +
-    " 8.03643892,9 6.84782609,9 Z M6.84782609,7.75862069 C7.38810465," +
-    "7.75862069 7.82608696,7.29546698 7.82608696,6.72413793 C7.82608696" +
-    ",6.15280888 7.38810465,5.68965517 6.84782609,5.68965517 C6.30754753," +
-    "5.68965517 5.86956522,6.15280888 5.86956522,6.72413793 C5.86956522," +
-    "7.29546698 6.30754753,7.75862069 6.84782609,7.75862069 Z\" " +
-    "id=\"Combined-Shape\"></path><polygon id=\"Rectangle\" " +
-    "transform=\"translate(4.497720, 4.541938) rotate(34.000000) " +
-    "translate(-4.497720, -4.541938) \" points=\"3.77901778 -0.202295978 " +
-    "4.9740273 -0.171019161 5.21642263 9.28617278 4.02141311 9.25489596\">" +
-    "</polygon></g></g></g></g></g></svg>";
-
-Constants.GPAY_OFFER_ICON_STYLE = `
-.${Constants.GPAY_OFFER_ICON_CLASS} {
-  position: absolute;
-  right: -5px;
-  top: -5px;
-}
+    Constants.STORAGE_KEY_PREFIX + '.upi.canMakePaymentCache';
 
-#ic_loyalty_24px use.hover {
-  fill: #FC853B;
-}
-`;
 
-Constants.GPAY_OFFER_DESCRIPTION_CLASS = 'gpay-offer-description';
+Constants.CLASS_PREFIX = 'google-payments-';
+Constants.IFRAME_ACTIVE_CONTAINER_CLASS =
+    `${Constants.CLASS_PREFIX}activeContainer`;
+Constants.IFRAME_CONTAINER_CLASS = `${Constants.CLASS_PREFIX}dialogContainer`;
+Constants.IFRAME_STYLE_CENTER_CLASS = `${Constants.CLASS_PREFIX}dialogCenter`;
+Constants.IFRAME_STYLE_CLASS = `${Constants.CLASS_PREFIX}dialog`;
 
-Constants.GPAY_OFFER_DESCRIPTION_STYLE = `
-@import url(//fonts.googleapis.com/css?family=Google+Sans:500);
-.${Constants.GPAY_OFFER_DESCRIPTION_CLASS} {
-  text-align: center;
-  font: 10px 'Google Sans';
-  margin-top: 2px;
-  margin-bottom: 0px;
+Constants.IFRAME_STYLE = `
+.${Constants.IFRAME_STYLE_CLASS} {
+    animation: none 0s ease 0s 1 normal none running;
+    background: none 0 0 / auto repeat scroll padding-box border-box #fff;
+    background-blend-mode: normal;
+    border: 0 none #333;
+    border-radius: 8px 8px 0 0;
+    border-collapse: separate;
+    bottom: 0;
+    box-shadow: #808080 0 3px 0 0, #808080 0 0 22px;
+    box-sizing: border-box;
+    letter-spacing: normal;
+    max-height: 100%;
+    overflow: visible;
+    position: fixed;
+    width: 100%;
+    z-index: ${MAX_Z_INDEX$1};
+    -webkit-appearance: none;
+    left: 0;
 }
-
-.${Constants.GPAY_OFFER_DESCRIPTION_CLASS}.gpay-btn-clicked {
-  color: #3C4043;
+@media (min-width: 480px) {
+  .${Constants.IFRAME_STYLE_CLASS} {
+    width: 480px !important;
+    left: -240px !important;
+    margin-left: calc(100vw - 100vw / 2) !important;
+  }
 }
-
-.${Constants.GPAY_OFFER_DESCRIPTION_CLASS}.short {
-  min-width: 90px;
-  width: 160px;
+.${Constants.IFRAME_CONTAINER_CLASS} {
+  background-color: rgba(0,0,0,0.26);
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
 }
-
-.${Constants.GPAY_OFFER_DESCRIPTION_CLASS}.long {
-  min-width: 152px;
-  width: 240px;
+.iframeContainer {
+  -webkit-overflow-scrolling: touch;
 }
 `;
 
-/**
- * Class used for the new gpay button with card info (last 4 digits, card net).
- *
- * @const {string}
- */
-Constants.GPAY_BUTTON_CARD_INFO_CLASS = 'gpay-card-info-btn';
-
-Constants.GPAY_BUTTON_CARD_INFO_BUTTON_STYLE = `
-  .${Constants.GPAY_BUTTON_CARD_INFO_CLASS} {
-    background-origin: content-box;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    border: 0px;
-    border-radius: 4px;
-    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 1px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
-    cursor: pointer;
-    height: 40px;
-    min-height: 40px;
-    padding: 11px 24px;
-    background-color: #000;
-    box-shadow: none;
-    padding: 9px 24px 10px;
-    min-width: 190px;
-    width: 240px;
-  }
-
-  .${Constants.GPAY_BUTTON_CARD_INFO_CLASS}.active {
-    background-color: #5f6368;
+Constants.IFRAME_STYLE_CENTER = `
+.${Constants.IFRAME_STYLE_CENTER_CLASS} {
+  animation: none 0s ease 0s 1 normal none running;
+  background-blend-mode: normal;
+  background: none 0 0 / auto repeat scroll padding-box border-box #fff;
+  border-collapse: separate;
+  border-radius: 8px;
+  border: 0px none #333;
+  bottom: auto;
+  box-shadow: #808080 0 0 22px;
+  box-sizing: border-box;
+  left: -240px;
+  letter-spacing: normal;
+  margin-left: calc(100vw - 100vw / 2) !important;
+  max-height: 90%;
+  overflow: visible;
+  position: absolute;
+  top: 100%;
+  transform: scale(0.8);
+  width: 480px;
+  z-index: ${MAX_Z_INDEX$1};
+  -webkit-appearance: none;
+}
+@media (min-height: 667px) {
+  .${Constants.IFRAME_STYLE_CENTER_CLASS} {
+    max-height: 600px;
   }
+}
+.${Constants.IFRAME_ACTIVE_CONTAINER_CLASS} {
+  top: 50%;
+  transform: scale(1.0) translateY(-50%);
+}
+`;
 
-  .${Constants.GPAY_BUTTON_CARD_INFO_CLASS}.hover {
-    background-color: #3c4043;
-  }
-  `;
+Constants.GPAY_BUTTON_WITH_CARD_INFO_IMAGE =
+    'background-image: url(https://pay.google.com/gp/p/generate_gpay_btn_img);';
 
+Constants.BUTTON_LOCALE_TO_MIN_WIDTH = {
+  'en': 152,
+  'bg': 163,
+  'cs': 192,
+  'de': 183,
+  'es': 183,
+  'fr': 183,
+  'hr': 157,
+  'id': 186,
+  'ja': 148,
+  'ko': 137,
+  'ms': 186,
+  'nl': 167,
+  'pl': 182,
+  'pt': 193,
+  'ru': 206,
+  'sk': 157,
+  'sl': 211,
+  'sr': 146,
+  'tr': 161,
+  'uk': 207,
+  'zh': 156,
+};
 
 /**
- * Trusted domain for secure context validation
+ * Name of the graypane.
  *
  * @const {string}
  */
-Constants.TRUSTED_DOMAIN = '.google.com';
+Constants.GPAY_GRAYPANE = 'gpay-graypane';
 
 /**
- * @license
- * Copyright 2018 Google Inc. 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
+ * Class used for the gpay button.
  *
- * 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.
- */
-
-/**
- * An implementation of PaymentsClientDelegateInterface that leverages payment
- * request.
- * @implements {PaymentsClientDelegateInterface}
+ * @const {string}
  */
-class PaymentsRequestDelegate {
-  /**
-   * @param {string} environment
-   */
-  constructor(environment) {
-    this.environment_ = environment;
-
-    /** @private {?function(!Promise<!PaymentData>)} */
-    this.callback_ = null;
-  }
-
-  /** @override */
-  onResult(callback) {
-    this.callback_ = callback;
-  }
-
-  /** @override */
-  isReadyToPay(isReadyToPayRequest) {
-    /** @type{!PaymentRequest} */
-    const paymentRequest = this.createPaymentRequest_(isReadyToPayRequest);
-    return new Promise((resolve, reject) => {
-      paymentRequest.canMakePayment()
-          .then(result => {
-            window.sessionStorage.setItem(
-                Constants.IS_READY_TO_PAY_RESULT_KEY, result.toString());
-            const response = {'result': result};
-            if (isReadyToPayRequest.apiVersion >= 2 &&
-                isReadyToPayRequest.existingPaymentMethodRequired) {
-              // For apiVersion 2, we always use native to only check for
-              // tokenized cards.
-              // For tokenized cards native always does a presence check so
-              // we can say that if canMakePayment is true for native for
-              // tokenizedCards then the user has a payment method which is
-              // present.
-              response['paymentMethodPresent'] = result;
-            }
-            resolve(response);
-          })
-          .catch(function(err) {
-            if (window.sessionStorage.getItem(
-                    Constants.IS_READY_TO_PAY_RESULT_KEY)) {
-              resolve({
-                'result': window.sessionStorage.getItem(
-                              Constants.IS_READY_TO_PAY_RESULT_KEY) == 'true'
-              });
-            } else {
-              resolve({'result': false});
-            }
-          });
-    });
-  }
+Constants.GPAY_BUTTON_CLASS = 'gpay-button';
 
-  /** @override */
-  prefetchPaymentData(paymentDataRequest) {
-    // Creating PaymentRequest instance will call
-    // Gcore isReadyToPay internally which will prefetch tempaltes.
-    this.createPaymentRequest_(
-        paymentDataRequest, this.environment_,
-        paymentDataRequest.transactionInfo.currencyCode,
-        paymentDataRequest.transactionInfo.totalPrice);
-  }
+Constants.BUTTON_STYLE = `
+.${Constants.GPAY_BUTTON_CLASS} {
+  background-origin: content-box;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border: 0px;
+  border-radius: 4px;
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 1px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+  cursor: pointer;
+  height: 40px;
+  min-height: 40px;
+  padding: 11px 24px;
+}
 
-  /** @override */
-  loadPaymentData(paymentDataRequest) {
-    this.loadPaymentDataThroughPaymentRequest_(paymentDataRequest);
-  }
+.${Constants.GPAY_BUTTON_CLASS}.black {
+  background-color: #000;
+  box-shadow: none;
+  padding: 12px 24px 10px;
+}
 
-  /**
-   * Create PaymentRequest instance.
-   *
-   * @param {!IsReadyToPayRequest|!PaymentDataRequest} request The necessary information to check if user is
-   *     ready to pay or to support a payment from merchants.
-   * @param {?string=} environment (optional)
-   * @param {?string=} currencyCode (optional)
-   * @param {?string=} totalPrice (optional)
-   * @return {!PaymentRequest} PaymentRequest instance.
-   * @private
-   */
-  createPaymentRequest_(request, environment, currencyCode, totalPrice) {
-    let data = {};
-    if (request) {
-      data = JSON.parse(JSON.stringify(request));
-    }
+.${Constants.GPAY_BUTTON_CLASS}.white {
+  background-color: #fff;
+}
 
-    // Only set the apiVersion if the merchant doesn't set it.
-    if (!data['apiVersion']) {
-      data['apiVersion'] = 1;
-    }
+.${Constants.GPAY_BUTTON_CLASS}.short {
+  min-width: 90px;
+  width: 160px;
+}
 
-    // Add allowedPaymentMethods for swg to get through gms core validation.
-    if (data['swg']) {
-      data['allowedPaymentMethods'] = [Constants.PaymentMethod.CARD];
-    }
+.${Constants.GPAY_BUTTON_CLASS}.black.short {
+  background-image: url(https://www.gstatic.com/instantbuy/svg/dark_gpay.svg);
+}
 
-    if (environment && environment == Constants.Environment.TEST) {
-      data['environment'] = environment;
-    }
+.${Constants.GPAY_BUTTON_CLASS}.white.short {
+  background-image: url(https://www.gstatic.com/instantbuy/svg/light_gpay.svg);
+}
 
-    const supportedInstruments = [{
-      'supportedMethods': ['https://google.com/pay'],
-      'data': data,
-    }];
+.${Constants.GPAY_BUTTON_CLASS}.black.active {
+  background-color: #5f6368;
+}
 
-    const details = {
-      'total': {
-        'label': 'Estimated Total Price',
-        'amount': {
-          // currency and value are required fields in PaymentRequest, but these
-          // fields will never be used since PaymentRequest UI is skipped when
-          // we're the only payment method, so default to some value to by pass
-          // this requirement.
-          'currency': currencyCode || 'USD',
-          'value': totalPrice || '0',
-        }
-      }
-    };
+.${Constants.GPAY_BUTTON_CLASS}.black.hover {
+  background-color: #3c4043;
+}
 
-    return new PaymentRequest(supportedInstruments, details);
-  }
+.${Constants.GPAY_BUTTON_CLASS}.white.active {
+  background-color: #fff;
+}
 
-  /**
-   * @param {!PaymentDataRequest} paymentDataRequest Provides necessary
-   *     information to support a payment.
-   * @private
-   */
-  loadPaymentDataThroughPaymentRequest_(paymentDataRequest) {
-    const currencyCode = (paymentDataRequest.transactionInfo &&
-                          paymentDataRequest.transactionInfo.currencyCode) ||
-        undefined;
-    const totalPrice = (paymentDataRequest.transactionInfo &&
-                        paymentDataRequest.transactionInfo.totalPrice) ||
-        undefined;
-    const paymentRequest = this.createPaymentRequest_(
-        paymentDataRequest, this.environment_, currencyCode, totalPrice);
-    this.callback_(
-        /** @type{!Promise<!PaymentData>} */
-        (paymentRequest.show()
-             .then(
-                 /**
-                  * @param {!PaymentResponse} paymentResponse
-                  * @return {!PaymentData}
-                  */
-                 (paymentResponse) => {
-                   // Should be called to dismiss any remaining UI
-                   paymentResponse.complete('success');
-                   return paymentResponse.details;
-                 })
-             .catch(function(err) {
-               err['statusCode'] = Constants.ResponseStatus.CANCELED;
-               throw err;
-             })));
-  }
+.${Constants.GPAY_BUTTON_CLASS}.white.focus {
+  box-shadow: #e8e8e8 0 1px 1px 0, #e8e8e8 0 1px 3px;
 }
 
-/**
- * @license
- * Copyright 2018 Google Inc. 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.
- */
+.${Constants.GPAY_BUTTON_CLASS}.white.hover {
+  background-color: #f8f8f8;
+}
+`;
 
-const MAX_Z_INDEX$1 = 2147483647;
+Constants.GPAY_BUTTON_WITH_OFFER_ICON_ADDITIONAL_STYLE = 'position: relative;';
 
+Constants.GPAY_OFFER_ICON_CLASS = 'gpay-offer-icon';
 
-class Graypane$1 {
+Constants.GPAY_OFFER_ICON_SVG =
+    "<svg width=\"20px\" height=\"20px\" viewBox=\"0 0 20 20\" " +
+    "version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=" +
+    "\"http://www.w3.org/1999/xlink\" class=\"gpay-offer-icon\"><defs><path d=\"M19.41,9.58 L10.41,0.58 " +
+    "C10.05,0.22 9.55,0 9,0 L2,0 C0.9,0 0,0.9 0,2 L0,9 C0,9.55 0.22,10.05 " +
+    "0.59,10.42 L9.59,19.42 C9.95,19.78 10.45,20 11,20 C11.55,20 12.05,19.78 " +
+    "12.41,19.41 L19.41,12.41 C19.78,12.05 20,11.55 20,11 C20,10.45 19.77," +
+    "9.94 19.41,9.58 Z\" id=\"path-1\"></path></defs><g id=\"buttons_10.05\"" +
+    " stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">" +
+    "<g id=\"Artboard\" transform=\"translate(-40.000000, -43.000000)\">" +
+    "<g id=\"Group-3\" transform=\"translate(40.000000, 43.000000)\">" +
+    "<g id=\"Group-2-Copy-2\"><g id=\"Group-Copy\"><g id=\"ic_loyalty_24px\">" +
+    "<mask id=\"mask-2\" fill=\"white\"><use xlink:href=\"#path-1\"></use>" +
+    "</mask><use id=\"gpay-Shape\" fill=\"#FF6100\" fill-rule=\"nonzero\" " +
+    "xlink:href=\"#path-1\"></use><path d=\"M3.5,5 C2.67,5 2,4.33 2,3.5 C2," +
+    "2.67 2.67,2 3.5,2 C4.33,2 5,2.67 5,3.5 C5,4.33 4.33,5 3.5,5 Z\" " +
+    "id=\"Path\" fill=\"#FFFFFF\" fill-rule=\"nonzero\" mask=\"url(#mask-2)\">" +
+    "</path></g></g></g><g id=\"Group-13-Copy-7\" transform=\"translate" +
+    "(6.000000, 6.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">" +
+    "<g id=\"Group-13-Copy-2\"><path d=\"M2.15217391,4.55172414 C0.963561082," +
+    "4.55172414 1.99840144e-14,3.53278598 1.99840144e-14,2.27586207 " +
+    "C1.99840144e-14,1.01893816 0.963561082,6.30606678e-14 2.15217391,6." +
+    "30606678e-14 C3.34078674,6.30606678e-14 4.30434783,1.01893816 4.30434783," +
+    "2.27586207 C4.30434783,3.53278598 3.34078674,4.55172414 2.15217391," +
+    "4.55172414 Z M2.15217391,3.31034483 C2.69245247,3.31034483 3.13043478,2." +
+    "84719112 3.13043478,2.27586207 C3.13043478,1.70453302 2.69245247," +
+    "1.24137931 2.15217391,1.24137931 C1.61189535,1.24137931 1.17391304,1" +
+    ".70453302 1.17391304,2.27586207 C1.17391304,2.84719112 1.61189535,3." +
+    "31034483 2.15217391,3.31034483 Z\" id=\"Combined-Shape\"></path>" +
+    "<path d=\"M6.84782609,9 C5.65921326,9 4.69565217,7.98106184 4.69565217," +
+    "6.72413793 C4.69565217,5.46721402 5.65921326,4.44827586 6.84782609," +
+    "4.44827586 C8.03643892,4.44827586 9,5.46721402 9,6.72413793 C9,7.98106184" +
+    " 8.03643892,9 6.84782609,9 Z M6.84782609,7.75862069 C7.38810465," +
+    "7.75862069 7.82608696,7.29546698 7.82608696,6.72413793 C7.82608696" +
+    ",6.15280888 7.38810465,5.68965517 6.84782609,5.68965517 C6.30754753," +
+    "5.68965517 5.86956522,6.15280888 5.86956522,6.72413793 C5.86956522," +
+    "7.29546698 6.30754753,7.75862069 6.84782609,7.75862069 Z\" " +
+    "id=\"Combined-Shape\"></path><polygon id=\"Rectangle\" " +
+    "transform=\"translate(4.497720, 4.541938) rotate(34.000000) " +
+    "translate(-4.497720, -4.541938) \" points=\"3.77901778 -0.202295978 " +
+    "4.9740273 -0.171019161 5.21642263 9.28617278 4.02141311 9.25489596\">" +
+    "</polygon></g></g></g></g></g></svg>";
 
-  /**
-   * @param {!Document} doc
-   */
-  constructor(doc) {
-    /** @private @const {!Document} */
-    this.doc_ = doc;
+Constants.GPAY_OFFER_ICON_STYLE = `
+.${Constants.GPAY_OFFER_ICON_CLASS} {
+  position: absolute;
+  right: -5px;
+  top: -5px;
+}
 
-    /** @private @const {!Element} */
-    this.element_ = doc.createElement(Constants.GPAY_GRAYPANE);
-    setImportantStyles$1(this.element_, {
-      'z-index': MAX_Z_INDEX$1,
-      'display': 'none',
-      'position': 'fixed',
-      'top': 0,
-      'right': 0,
-      'bottom': 0,
-      'left': 0,
-      'background-color': 'rgba(32, 33, 36, .6)',
-    });
+#ic_loyalty_24px use.hover {
+  fill: #FC853B;
+}
+`;
 
-    /** @private {?Window} */
-    this.popupWindow_ = null;
+Constants.GPAY_OFFER_DESCRIPTION_CLASS = 'gpay-offer-description';
 
-    this.element_.addEventListener('click', () => {
-      if (this.popupWindow_) {
-        try {
-          this.popupWindow_.focus();
-        } catch (e) {
-          // Ignore error.
-        }
-      }
-    });
-  }
+Constants.GPAY_OFFER_DESCRIPTION_STYLE = `
+@import url(//fonts.googleapis.com/css?family=Google+Sans:500);
+.${Constants.GPAY_OFFER_DESCRIPTION_CLASS} {
+  text-align: center;
+  font: 10px 'Google Sans';
+  margin-top: 2px;
+  margin-bottom: 0px;
+}
 
-  /**
-   * Shows the graypane.
-   * @param {?Window|undefined} popupWindow
-   * @return {!Promise}
-   */
-  show(popupWindow) {
-    this.popupWindow_ = popupWindow || null;
-    this.doc_.body.appendChild(this.element_);
-    setImportantStyles$1(this.element_, {
-      'display': 'block',
-      'opacity': 0,
-    });
-    return transition$1(this.element_, {
-      'opacity': 1,
-    }, 300, 'ease-out');
-  }
+.${Constants.GPAY_OFFER_DESCRIPTION_CLASS}.gpay-btn-clicked {
+  color: #3C4043;
+}
 
-  /**
-   * Hides the graypane.
-   * @return {!Promise|undefined}
-   */
-  hide() {
-    this.popupWindow_ = null;
-    if (!this.element_.parentElement) {
-      // Has already been removed or haven't been even added to DOM.
-      // This could be possible after redirect.
-      return;
-    }
-    return transition$1(this.element_, {
-      'opacity': 0,
-    }, 300, 'ease-out').then(() => {
-      setImportantStyles$1(this.element_, {'display': 'none'});
-      this.doc_.body.removeChild(this.element_);
-    });
-  }
+.${Constants.GPAY_OFFER_DESCRIPTION_CLASS}.short {
+  min-width: 90px;
+  width: 160px;
 }
 
+.${Constants.GPAY_OFFER_DESCRIPTION_CLASS}.long {
+  min-width: 152px;
+  width: 240px;
+}
+`;
 
 /**
- * Sets the CSS styles of the specified element with !important. The styles
- * are specified as a map from CSS property names to their values.
- *
- * The `!important` styles are used to avoid accidental specificity overrides
- * from the 3p page's stylesheet.
+ * Class used for the new gpay button with card info (last 4 digits, card net).
  *
- * @param {!Element} element
- * @param {!Object<string, string|number>} styles
+ * @const {string}
  */
-function setImportantStyles$1(element, styles) {
-  for (const k in styles) {
-    element.style.setProperty(k, styles[k].toString(), 'important');
+Constants.GPAY_BUTTON_CARD_INFO_CLASS = 'gpay-card-info-btn';
+
+Constants.GPAY_BUTTON_CARD_INFO_BUTTON_STYLE = `
+  .${Constants.GPAY_BUTTON_CARD_INFO_CLASS} {
+    background-origin: content-box;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    border: 0px;
+    border-radius: 4px;
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 1px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+    cursor: pointer;
+    height: 40px;
+    min-height: 40px;
+    padding: 11px 24px;
+    background-color: #000;
+    box-shadow: none;
+    padding: 9px 24px 10px;
+    min-width: 190px;
+    width: 240px;
   }
-}
+
+  .${Constants.GPAY_BUTTON_CARD_INFO_CLASS}.active {
+    background-color: #5f6368;
+  }
+
+  .${Constants.GPAY_BUTTON_CARD_INFO_CLASS}.hover {
+    background-color: #3c4043;
+  }
+  `;
 
 
 /**
- * Returns a promise which is resolved after the given duration of animation
- * @param {!Element} el - Element to be observed.
- * @param {!Object<string, string|number>} props - properties to be animated.
- * @param {number} durationMillis - duration of animation.
- * @param {string} curve - transition function for the animation.
- * @return {!Promise} Promise which resolves once the animation is done playing.
+ * Trusted domain for secure context validation
+ *
+ * @const {string}
  */
-function transition$1(el, props, durationMillis, curve) {
-  const win = el.ownerDocument.defaultView;
-  const previousTransitionValue = el.style.transition || '';
-  return new Promise(resolve => {
-    win.setTimeout(() => {
-      win.setTimeout(resolve, durationMillis);
-      const tr = `${durationMillis}ms ${curve}`;
-      setImportantStyles$1(el, Object.assign({
-        'transition': `transform ${tr}, opacity ${tr}`,
-      }, props));
-    });
-  }).then(() => {
-    // Stop transition and make sure that the final properties get set.
-    setImportantStyles$1(el, Object.assign({
-      'transition': previousTransitionValue,
-    }, props));
-  });
-}
+Constants.TRUSTED_DOMAIN = '.google.com';
 
 /**
  * @license
@@ -13006,109 +13043,420 @@ class PayFrameHelper {
     googleTransactionId = txnId;
   }
 
-  /**
-   * Sets the originTimeMs. To be used only for tests.
-   *
-   * @param {number} originTimeMsTemp
-   */
-  static setOriginTimeMs(originTimeMsTemp) {
-    originTimeMs = originTimeMsTemp;
+  /**
+   * Sets the originTimeMs. To be used only for tests.
+   *
+   * @param {number} originTimeMsTemp
+   */
+  static setOriginTimeMs(originTimeMsTemp) {
+    originTimeMs = originTimeMsTemp;
+  }
+
+  /**
+   * Override postMessageService for testing.
+   *
+   * @param {!PostMessageService} messageService
+   */
+  static setPostMessageService(messageService) {
+    postMessageService = messageService;
+  }
+
+  /**
+   * Clears the singleton variables.
+   */
+  static reset() {
+    iframe = null;
+    buffer.length = 0;
+    iframeLoaded = false;
+    buyFlowActivityMode = null;
+  }
+
+  /**
+   * Sets whether the iframe has been loaded or not.
+   *
+   * @param {boolean} loaded
+   */
+  static setIframeLoaded(loaded) {
+    iframeLoaded = loaded;
+  }
+
+  /**
+   * Called whenever the iframe is loaded.
+   */
+  static iframeLoaded() {
+    iframeLoaded = true;
+    buffer.forEach(function(data) {
+      PayFrameHelper.postMessage(data);
+    });
+    buffer.length = 0;
+  }
+
+  /**
+   * Returns the events that have been buffered.
+   *
+   * @return {!Array<!Object>}
+   */
+  static getBuffer() {
+    return buffer;
+  }
+
+  /**
+   * Mocks the iframe as an arbitrary html element instead of actually injecting
+   * it for testing.
+   */
+  static injectIframeForTesting() {
+    PayFrameHelper.reset();
+    iframe = document.createElement('p');
+    PayFrameHelper.iframeLoaded();
+  }
+
+  /**
+   * Returns the payframe origin based on the environment.
+   *
+   * @return {string}
+   * @private
+   */
+  static getIframeOrigin_() {
+    let iframeUrl = 'https://pay';
+    if (environment == Constants.Environment.SANDBOX) {
+      iframeUrl += '.sandbox';
+    } else if (environment == Constants.Environment.PREPROD) {
+      iframeUrl += '-preprod.sandbox';
+    }
+    return iframeUrl + '.google.com';
+  }
+
+  /**
+   * Returns the payframe URL based on the environment.
+   *
+   * @param {string} origin The origin that is opening the payframe.
+   * @param {string|null=} merchantId The merchant id.
+   * @return {string}
+   * @private
+   */
+  static getIframeUrl_(origin, merchantId) {
+    // TrustedResourceUrl header needs to start with https or '//'.
+    const iframeUrl = `https://pay${environment == Constants.Environment.PREPROD ?
+             '-preprod.sandbox' :
+             environment == Constants.Environment.SANDBOX ? '.sandbox' : ''}.google.com/gp/p/ui/payframe?origin=${origin}&mid=%{merchantId}`;
+    return iframeUrl;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2018 Google Inc. 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.
+ */
+
+/**
+ * An implementation of PaymentsClientDelegateInterface that leverages payment
+ * request.
+ * @implements {PaymentsClientDelegateInterface}
+ */
+class PaymentsRequestDelegate {
+  /**
+   * @param {string} environment
+   */
+  constructor(environment) {
+    this.environment_ = environment;
+
+    /** @private {?function(!Promise<!PaymentData>)} */
+    this.callback_ = null;
+  }
+
+  /** @override */
+  onResult(callback) {
+    this.callback_ = callback;
+  }
+
+  /** @override */
+  isReadyToPay(isReadyToPayRequest) {
+    /** @type{!PaymentRequest} */
+    const paymentRequest = this.createPaymentRequest_(isReadyToPayRequest);
+    return new Promise((resolve, reject) => {
+      paymentRequest.canMakePayment()
+          .then(result => {
+            window.sessionStorage.setItem(
+                Constants.IS_READY_TO_PAY_RESULT_KEY, result.toString());
+            const response = {'result': result};
+            if (isReadyToPayRequest.apiVersion >= 2 &&
+                isReadyToPayRequest.existingPaymentMethodRequired) {
+              // For apiVersion 2, we always use native to only check for
+              // tokenized cards.
+              // For tokenized cards native always does a presence check so
+              // we can say that if canMakePayment is true for native for
+              // tokenizedCards then the user has a payment method which is
+              // present.
+              response['paymentMethodPresent'] = result;
+            }
+            resolve(response);
+          })
+          .catch(function(err) {
+            if (window.sessionStorage.getItem(
+                    Constants.IS_READY_TO_PAY_RESULT_KEY)) {
+              resolve({
+                'result': window.sessionStorage.getItem(
+                              Constants.IS_READY_TO_PAY_RESULT_KEY) == 'true'
+              });
+            } else {
+              resolve({'result': false});
+            }
+          });
+    });
+  }
+
+  /** @override */
+  prefetchPaymentData(paymentDataRequest) {
+    // Creating PaymentRequest instance will call
+    // Gcore isReadyToPay internally which will prefetch tempaltes.
+    this.createPaymentRequest_(
+        paymentDataRequest, this.environment_,
+        paymentDataRequest.transactionInfo.currencyCode,
+        paymentDataRequest.transactionInfo.totalPrice);
+  }
+
+  /** @override */
+  loadPaymentData(paymentDataRequest) {
+    this.loadPaymentDataThroughPaymentRequest_(paymentDataRequest);
   }
 
   /**
-   * Override postMessageService for testing.
+   * Create PaymentRequest instance.
    *
-   * @param {!PostMessageService} messageService
+   * @param {!IsReadyToPayRequest|!PaymentDataRequest} request The necessary information to check if user is
+   *     ready to pay or to support a payment from merchants.
+   * @param {?string=} environment (optional)
+   * @param {?string=} currencyCode (optional)
+   * @param {?string=} totalPrice (optional)
+   * @return {!PaymentRequest} PaymentRequest instance.
+   * @private
    */
-  static setPostMessageService(messageService) {
-    postMessageService = messageService;
-  }
+  createPaymentRequest_(request, environment, currencyCode, totalPrice) {
+    let data = {};
+    if (request) {
+      data = JSON.parse(JSON.stringify(request));
+    }
 
-  /**
-   * Clears the singleton variables.
-   */
-  static reset() {
-    iframe = null;
-    buffer.length = 0;
-    iframeLoaded = false;
-    buyFlowActivityMode = null;
+    // Only set the apiVersion if the merchant doesn't set it.
+    if (!data['apiVersion']) {
+      data['apiVersion'] = 1;
+    }
+
+    // Add allowedPaymentMethods for swg to get through gms core validation.
+    if (data['swg']) {
+      data['allowedPaymentMethods'] = [Constants.PaymentMethod.CARD];
+    }
+
+    if (environment && environment == Constants.Environment.TEST) {
+      data['environment'] = environment;
+    }
+
+    const supportedInstruments = [{
+      'supportedMethods': ['https://google.com/pay'],
+      'data': data,
+    }];
+
+    const details = {
+      'total': {
+        'label': 'Estimated Total Price',
+        'amount': {
+          // currency and value are required fields in PaymentRequest, but these
+          // fields will never be used since PaymentRequest UI is skipped when
+          // we're the only payment method, so default to some value to by pass
+          // this requirement.
+          'currency': currencyCode || 'USD',
+          'value': totalPrice || '0',
+        }
+      }
+    };
+
+    return new PaymentRequest(supportedInstruments, details);
   }
 
   /**
-   * Sets whether the iframe has been loaded or not.
-   *
-   * @param {boolean} loaded
+   * @param {!PaymentDataRequest} paymentDataRequest Provides necessary
+   *     information to support a payment.
+   * @private
    */
-  static setIframeLoaded(loaded) {
-    iframeLoaded = loaded;
+  loadPaymentDataThroughPaymentRequest_(paymentDataRequest) {
+    const currencyCode = (paymentDataRequest.transactionInfo &&
+                          paymentDataRequest.transactionInfo.currencyCode) ||
+        undefined;
+    const totalPrice = (paymentDataRequest.transactionInfo &&
+                        paymentDataRequest.transactionInfo.totalPrice) ||
+        undefined;
+    const paymentRequest = this.createPaymentRequest_(
+        paymentDataRequest, this.environment_, currencyCode, totalPrice);
+    this.callback_(
+        /** @type{!Promise<!PaymentData>} */
+        (paymentRequest.show()
+             .then(
+                 /**
+                  * @param {!PaymentResponse} paymentResponse
+                  * @return {!PaymentData}
+                  */
+                 (paymentResponse) => {
+                   // Should be called to dismiss any remaining UI
+                   paymentResponse.complete('success');
+                   return paymentResponse.details;
+                 })
+             .catch(function(err) {
+               err['statusCode'] = Constants.ResponseStatus.CANCELED;
+               throw err;
+             })));
   }
+}
+
+/**
+ * @license
+ * Copyright 2018 Google Inc. 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.
+ */
+
+const MAX_Z_INDEX = 2147483647;
+
+
+class Graypane {
 
   /**
-   * Called whenever the iframe is loaded.
+   * @param {!Document} doc
    */
-  static iframeLoaded() {
-    iframeLoaded = true;
-    buffer.forEach(function(data) {
-      PayFrameHelper.postMessage(data);
+  constructor(doc) {
+    /** @private @const {!Document} */
+    this.doc_ = doc;
+
+    /** @private @const {!Element} */
+    this.element_ = doc.createElement(Constants.GPAY_GRAYPANE);
+    setImportantStyles(this.element_, {
+      'z-index': MAX_Z_INDEX,
+      'display': 'none',
+      'position': 'fixed',
+      'top': 0,
+      'right': 0,
+      'bottom': 0,
+      'left': 0,
+      'background-color': 'rgba(32, 33, 36, .6)',
     });
-    buffer.length = 0;
-  }
 
-  /**
-   * Returns the events that have been buffered.
-   *
-   * @return {!Array<!Object>}
-   */
-  static getBuffer() {
-    return buffer;
+    /** @private {?Window} */
+    this.popupWindow_ = null;
+
+    this.element_.addEventListener('click', () => {
+      if (this.popupWindow_) {
+        try {
+          this.popupWindow_.focus();
+        } catch (e) {
+          // Ignore error.
+        }
+      }
+    });
   }
 
   /**
-   * Mocks the iframe as an arbitrary html element instead of actually injecting
-   * it for testing.
+   * Shows the graypane.
+   * @param {?Window|undefined} popupWindow
+   * @return {!Promise}
    */
-  static injectIframeForTesting() {
-    PayFrameHelper.reset();
-    iframe = document.createElement('p');
-    PayFrameHelper.iframeLoaded();
+  show(popupWindow) {
+    this.popupWindow_ = popupWindow || null;
+    this.doc_.body.appendChild(this.element_);
+    setImportantStyles(this.element_, {
+      'display': 'block',
+      'opacity': 0,
+    });
+    return transition(this.element_, {
+      'opacity': 1,
+    }, 300, 'ease-out');
   }
 
   /**
-   * Returns the payframe origin based on the environment.
-   *
-   * @return {string}
-   * @private
+   * Hides the graypane.
+   * @return {!Promise|undefined}
    */
-  static getIframeOrigin_() {
-    let iframeUrl = 'https://pay';
-    if (environment == Constants.Environment.SANDBOX) {
-      iframeUrl += '.sandbox';
-    } else if (environment == Constants.Environment.PREPROD) {
-      iframeUrl += '-preprod.sandbox';
+  hide() {
+    this.popupWindow_ = null;
+    if (!this.element_.parentElement) {
+      // Has already been removed or haven't been even added to DOM.
+      // This could be possible after redirect.
+      return;
     }
-    return iframeUrl + '.google.com';
+    return transition(this.element_, {
+      'opacity': 0,
+    }, 300, 'ease-out').then(() => {
+      setImportantStyles(this.element_, {'display': 'none'});
+      this.doc_.body.removeChild(this.element_);
+    });
   }
+}
 
-  /**
-   * Returns the payframe URL based on the environment.
-   *
-   * @param {string} origin The origin that is opening the payframe.
-   * @param {string|null=} merchantId The merchant id.
-   * @return {string}
-   * @private
-   */
-  static getIframeUrl_(origin, merchantId) {
-    // TrustedResourceUrl header needs to start with https or '//'.
-    const iframeUrl = `https://pay${environment == Constants.Environment.PREPROD ?
-             '-preprod.sandbox' :
-             environment == Constants.Environment.SANDBOX ? '.sandbox' : ''}.google.com/gp/p/ui/payframe?origin=${origin}&mid=%{merchantId}`;
-    return iframeUrl;
+
+/**
+ * Sets the CSS styles of the specified element with !important. The styles
+ * are specified as a map from CSS property names to their values.
+ *
+ * The `!important` styles are used to avoid accidental specificity overrides
+ * from the 3p page's stylesheet.
+ *
+ * @param {!Element} element
+ * @param {!Object<string, string|number>} styles
+ */
+function setImportantStyles(element, styles) {
+  for (const k in styles) {
+    element.style.setProperty(k, styles[k].toString(), 'important');
   }
 }
 
-// Start loading pay frame early
-PayFrameHelper.load();
-
+
+/**
+ * Returns a promise which is resolved after the given duration of animation
+ * @param {!Element} el - Element to be observed.
+ * @param {!Object<string, string|number>} props - properties to be animated.
+ * @param {number} durationMillis - duration of animation.
+ * @param {string} curve - transition function for the animation.
+ * @return {!Promise} Promise which resolves once the animation is done playing.
+ */
+function transition(el, props, durationMillis, curve) {
+  const win = el.ownerDocument.defaultView;
+  const previousTransitionValue = el.style.transition || '';
+  return new Promise(resolve => {
+    win.setTimeout(() => {
+      win.setTimeout(resolve, durationMillis);
+      const tr = `${durationMillis}ms ${curve}`;
+      setImportantStyles(el, Object.assign({
+        'transition': `transform ${tr}, opacity ${tr}`,
+      }, props));
+    });
+  }).then(() => {
+    // Stop transition and make sure that the final properties get set.
+    setImportantStyles(el, Object.assign({
+      'transition': previousTransitionValue,
+    }, props));
+  });
+}
+
 /**
  * @license
  * Copyright 2018 Google Inc. All Rights Reserved.
@@ -13507,6 +13855,12 @@ function injectIframe(iframeClassName) {
  * limitations under the License.
  */
 
+const {
+  ActivityPort,
+  ActivityPorts,
+  ActivityIframePort,
+} = require('web-activities/activity-ports');
+
 const GPAY_ACTIVITY_REQUEST = 'GPAY';
 const IFRAME_CLOSE_DURATION_IN_MS = 250;
 const IFRAME_SHOW_UP_DURATION_IN_MS = 250;
@@ -13549,9 +13903,9 @@ class PaymentsWebActivityDelegate {
     /** @private @const {boolean} */
 
     /** @const {!ActivityPorts} */
-    this.activities = activities || new activityPorts_1(window);
+    this.activities = activities || new ActivityPorts(window);
     /** @const @private {!Graypane} */
-    this.graypane_ = new Graypane$1(window.document);
+    this.graypane_ = new Graypane(window.document);
     /** @private {?function(!Promise<!PaymentData>)} */
     this.callback_ = null;
     /**
@@ -13601,7 +13955,7 @@ class PaymentsWebActivityDelegate {
     // Only verified origins are allowed.
     this.callback_(
       port.acceptResult().then(
-        result => {
+        (result) => {
           // Origin must always match: popup, iframe or redirect.
           if (result.origin != this.getOrigin_()) {
             throw new Error('channel mismatch');
@@ -13611,7 +13965,7 @@ class PaymentsWebActivityDelegate {
             PayFrameHelper.setBuyFlowActivityMode(BuyFlowActivityMode.REDIRECT);
             return this.fetchRedirectResponse_(
               data['redirectEncryptedCallbackData']
-            ).then(decrypedJson => {
+            ).then((decrypedJson) => {
               // Merge other non-encrypted fields into the final response.
               const clone = Object.assign({}, data);
               delete clone['redirectEncryptedCallbackData'];
@@ -13624,7 +13978,7 @@ class PaymentsWebActivityDelegate {
           }
           return data;
         },
-        error => {
+        (error) => {
           // TODO: Log the original and the inferred error to eye3.
           const originalError = error['message'];
           let inferredError = error['message'];
@@ -13739,7 +14093,7 @@ class PaymentsWebActivityDelegate {
           isReadyToPayRequest,
           PostMessageEventType.IS_READY_TO_PAY,
           'isReadyToPayResponse',
-          function(event) {
+          function (event) {
             const response = {
               'result': isSupported,
             };
@@ -14046,10 +14400,10 @@ class PaymentsWebActivityDelegate {
     );
     return this.activities
       .openIframe(iframe, trustedUrl, paymentDataRequest)
-      .then(port => {
+      .then((port) => {
         // Handle custom resize message.
         this.port_ = port;
-        port.onMessage(payload => {
+        port.onMessage((payload) => {
           if (payload['type'] !== 'resize' || !this.shouldHandleResizing_) {
             // Save the resize event later after initial animation is finished
             this.savedResizePayload_ = {
@@ -14082,14 +14436,14 @@ class PaymentsWebActivityDelegate {
          * @param {!Object} result
          * @return {!PaymentData}
          */
-        result => {
+        (result) => {
           this.removeIframeAndContainer_(container, iframe);
           // This is only for popping the state we pushed earlier.
           history.back();
           const data = /** @type {!PaymentData} */ (result['data']);
           return data;
         },
-        error => {
+        (error) => {
           this.removeIframeAndContainer_(container, iframe);
           // This is only for popping the state we pushed earlier.
           history.back();
@@ -14164,8 +14518,7 @@ class UpiHandler {
   loadPaymentData(paymentDataRequest, upiPaymentMethod, onResultCallback) {
     const parameters = upiPaymentMethod['parameters'];
     const transactionInfo = paymentDataRequest['transactionInfo'];
-    const supportedInstruments = 
-        [{
+    const supportedInstruments = [{
           'supportedMethods': ['https://tez.google.com/pay'],
           'data': {
             'pa': parameters['payeeVpa'],
@@ -14277,7 +14630,7 @@ class UpiHandler {
    */
   redirectToGooglePlay_() {
     window.location.replace(
-          // NOLINT
+        // NOLINT
             'https://play.google.com/store/apps/details?id=com.google.android.apps.nbu.paisa.user');  // NOLINT
     return Promise.reject(
         {'errorMessage': 'Cannot redirect to Tez page in Google Play.'});
@@ -14397,10 +14750,10 @@ Dual licensed under the MIT and GPL licenses.
  */
 
 class Random_uuid {}  // Private array of chars to use
-  var CHARS$1 = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+  var CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
 
   Random_uuid.uuid = function (len, radix) {
-    var chars = CHARS$1, uuid = [], i;
+    var chars = CHARS, uuid = [], i;
     radix = radix || chars.length;
 
     if (len) {
@@ -14430,7 +14783,7 @@ class Random_uuid {}  // Private array of chars to use
   // A more performant, but slightly bulkier, RFC4122v4 solution.  We boost performance
   // by minimizing calls to random()
   Random_uuid.uuidFast = function() {
-    var chars = CHARS$1, uuid = new Array(36), rnd=0, r;
+    var chars = CHARS, uuid = new Array(36), rnd=0, r;
     for (var i = 0; i < 36; i++) {
       if (i==8 || i==13 ||  i==18 || i==23) {
         uuid[i] = '-';
@@ -14498,6 +14851,8 @@ function createGoogleTransactionId(environment) {
  * limitations under the License.
  */
 
+require('web-activities/activity-ports');
+
 const TRUSTED_DOMAINS = [
   'actions.google.com',
   'amp-actions.sandbox.google.com',
@@ -14539,12 +14894,11 @@ class PaymentsAsyncClient {
     this.environment_ =
       paymentOptions.environment || Constants.Environment.TEST;
     if (!PaymentsAsyncClient.googleTransactionId_) {
-      PaymentsAsyncClient.googleTransactionId_ =
-        /** @type {string} */ (this.isInTrustedDomain_() &&
-        paymentOptions['i'] &&
-        paymentOptions['i']['googleTransactionId']
-          ? paymentOptions['i']['googleTransactionId']
-          : createGoogleTransactionId(this.environment_));
+      PaymentsAsyncClient.googleTransactionId_ = /** @type {string} */ (this.isInTrustedDomain_() &&
+      paymentOptions['i'] &&
+      paymentOptions['i']['googleTransactionId']
+        ? paymentOptions['i']['googleTransactionId']
+        : createGoogleTransactionId(this.environment_));
     }
 
     /** @private @const {!PaymentOptions} */
@@ -14576,6 +14930,9 @@ class PaymentsAsyncClient {
     this.webActivityDelegate_.onResult(this.onResult_.bind(this));
     this.delegate_.onResult(this.onResult_.bind(this));
 
+    // Load PayFrameHelper upon client construction.
+    PayFrameHelper.load();
+
     // If web delegate is used anyway then this is overridden in the web
     // activity delegate when load payment data is called.
     if (chromeSupportsPaymentHandler()) {
@@ -14594,7 +14951,7 @@ class PaymentsAsyncClient {
       'clientLatencyStartMs': Date.now(),
     });
 
-    window.addEventListener('message', event =>
+    window.addEventListener('message', (event) =>
       this.handleMessageEvent_(event)
     );
   }
@@ -14605,7 +14962,6 @@ class PaymentsAsyncClient {
    * @param {!IsReadyToPayRequest} isReadyToPayRequest
    * @return {!Promise} The promise will contain the boolean result and error
    *     message when possible.
-   * @export
    */
   isReadyToPay(isReadyToPayRequest) {
     // Merge with paymentOptions, preferring values from isReadyToPayRequest
@@ -14637,7 +14993,7 @@ class PaymentsAsyncClient {
 
     const isReadyToPayPromise = this.isReadyToPay_(isReadyToPayRequest);
 
-    isReadyToPayPromise.then(response => {
+    isReadyToPayPromise.then((response) => {
       PayFrameHelper.postMessage({
         'eventType': PostMessageEventType.LOG_IS_READY_TO_PAY_API,
         'clientLatencyStartMs': startTimeMs,
@@ -14757,7 +15113,7 @@ class PaymentsAsyncClient {
       return nativePromise.then(() => webPromise);
     }
 
-    return nativePromise.then(nativeResult => {
+    return nativePromise.then((nativeResult) => {
       if ((nativeResult && nativeResult['result']) == true) {
         return nativeResult;
       }
@@ -14773,7 +15129,6 @@ class PaymentsAsyncClient {
    *
    * @param {!PaymentDataRequest} paymentDataRequest Provides necessary
    *     information to support a payment.
-   * @export
    */
   prefetchPaymentData(paymentDataRequest) {
     /** @type {?string} */
@@ -14804,7 +15159,6 @@ class PaymentsAsyncClient {
    *
    * @param {!PaymentDataRequest} paymentDataRequest Provides necessary
    *     information to support a payment.
-   * @export
    */
   loadPaymentData(paymentDataRequest) {
     PayFrameHelper.postMessage({
@@ -14850,16 +15204,13 @@ class PaymentsAsyncClient {
       return;
     }
 
-    const isReadyToPayResult = window.sessionStorage.getItem(
-      Constants.IS_READY_TO_PAY_RESULT_KEY
-    );
     this.loadPaymentDataApiStartTimeMs_ = Date.now();
     this.assignInternalParams_(paymentDataRequest);
     // We want to fall back to the web delegate if payment handler is supported
     // and isReadyToPay bit is not explicitly set to true (fallback to web if
     // isReadyToPay wasn't called for PH)
     if (
-      (chromeSupportsPaymentHandler() && isReadyToPayResult !== 'true') ||
+      chromeSupportsPaymentHandler() ||
       isNativeDisabledInRequest(paymentDataRequest)
     ) {
       this.webActivityDelegate_.loadPaymentData(paymentDataRequest);
@@ -14884,7 +15235,6 @@ class PaymentsAsyncClient {
    *
    * @param {!ButtonOptions=} options
    * @return {!Element}
-   * @export
    */
   createButton(options = {}) {
     const button = null;
@@ -14926,14 +15276,14 @@ class PaymentsAsyncClient {
    */
   onResult_(response) {
     response
-      .then(result => {
+      .then((result) => {
         PayFrameHelper.postMessage({
           'eventType': PostMessageEventType.LOG_LOAD_PAYMENT_DATA_API,
           'clientLatencyStartMs': this.loadPaymentDataApiStartTimeMs_,
           'buyFlowMode': this.buyFlowMode_,
         });
       })
-      .catch(result => {
+      .catch((result) => {
         if (result['errorCode']) {
           PayFrameHelper.postMessage({
             'eventType': PostMessageEventType.LOG_LOAD_PAYMENT_DATA_API,
@@ -14979,6 +15329,79 @@ function isNativeDisabledInRequest(request) {
   return (request['i'] && request['i']['disableNative']) === true;
 }
 
+/**
+ * Copyright 2018 The Subscribe with Google 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.
+ */
+
+class Preconnect {
+  /**
+   * @param {!Document} doc
+   */
+  constructor(doc) {
+    /** @private @const {!Document} */
+    this.doc_ = doc;
+  }
+
+  /**
+   * @param {string} url
+   */
+  preconnect(url) {
+    this.pre_(url, 'preconnect');
+  }
+
+  /**
+   * @param {string} url
+   */
+  dnsPrefetch(url) {
+    this.pre_(url, 'dns-prefetch');
+  }
+
+  /**
+   * @param {string} url
+   */
+  prefetch(url) {
+    this.pre_(url, 'preconnect prefetch');
+  }
+
+  /**
+   * @param {string} url
+   * @param {string} as
+   */
+  preload(url, as) {
+    this.pre_(url, 'preconnect preload', as);
+  }
+
+  /**
+   * @param {string} url
+   * @param {string} rel
+   * @param {?string=} as
+   * @private
+   */
+  pre_(url, rel, as) {
+    // <link rel="prefetch" href="..." as="">
+    const linkEl = createElement(this.doc_, 'link', {
+      'rel': rel,
+      'href': url,
+    });
+    if (as) {
+      linkEl.setAttribute('as', as);
+    }
+    this.doc_.head.appendChild(linkEl);
+  }
+}
+
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
  *
@@ -15039,18 +15462,21 @@ class PayClient {
     /** @private @const {!RedirectVerifierHelper} */
     this.redirectVerifierHelper_ = new RedirectVerifierHelper(this.win_);
 
-    /** @private @const {!PaymentsAsyncClient} */
-    this.client_ = this.createClient_(
-      /** @type {!PaymentOptions} */
-      ({
-        environment: 'PRODUCTION',
-        'i': {
-          'redirectKey': this.redirectVerifierHelper_.restoreKey(),
-        },
-      }),
-      this.analytics_.getTransactionId(),
-      this.handleResponse_.bind(this)
-    );
+    /** @private {?PaymentsAsyncClient} */
+    this.client_ = null;
+
+    /** @private @const {!Preconnect} */
+    this.preconnect_ = new Preconnect(this.win_.document);
+
+    // If the page is started from a redirect, immediately initialize
+    // client to avoid dropping user state.
+    if (
+      isExperimentOn(this.win_, ExperimentFlags.PAY_CLIENT_REDIRECT) &&
+      this.pageIsInitializedFromPayRedirect_()
+    ) {
+      this.preconnect(this.preconnect_);
+      this.initializePaymentsClient_();
+    }
 
     // Prepare new verifier pair.
     this.redirectVerifierHelper_.prepare();
@@ -15087,9 +15513,35 @@ class PayClient {
       'https://payments.google.com/payments/v4/js/integrator.js?ss=md'
     );
     pre.prefetch('https://clients2.google.com/gr/gr_full_2.0.6.js');
-    pre.preconnect('https://www.gstatic.com/');
-    pre.preconnect('https://fonts.googleapis.com/');
-    pre.preconnect('https://www.google.com/');
+  }
+
+  /**
+   * Initializes Payments client.
+   */
+  initializePaymentsClient_() {
+    this.client_ = this.createClient_(
+      /** @type {!PaymentOptions} */
+      ({
+        environment: 'PRODUCTION',
+        'i': {
+          'redirectKey': this.redirectVerifierHelper_.restoreKey(),
+        },
+      }),
+      this.analytics_.getTransactionId(),
+      this.handleResponse_.bind(this)
+    );
+  }
+
+  /**
+   * Detects if the window is started from a Pay redirect by
+   * checking window's hash for Web Activities information.
+   */
+  pageIsInitializedFromPayRedirect_() {
+    const hash = this.win_.location.hash;
+    const hasRedirectEncryptedCallbackData =
+      /redirectEncryptedCallbackData/.test(hash);
+    const hasSwgRequest = /swgRequest/.test(hash);
+    return hasRedirectEncryptedCallbackData && hasSwgRequest;
   }
 
   /**
@@ -15107,6 +15559,10 @@ class PayClient {
   start(paymentRequest, options = {}) {
     this.request_ = paymentRequest;
 
+    if (!this.client_) {
+      this.preconnect(this.preconnect_);
+      this.initializePaymentsClient_();
+    }
     if (options.forceRedirect) {
       paymentRequest = Object.assign(paymentRequest, {
         'forceRedirect': options.forceRedirect || false,
@@ -15117,12 +15573,12 @@ class PayClient {
       'disableNative',
       // The page cannot be iframed at this time. May be relaxed later
       // for AMP and similar contexts.
-      this.win_ != this.top_()
+      options.forceDisableNative || this.win_ != this.top_()
     );
     let resolver = null;
-    const promise = new Promise(resolve => (resolver = resolve));
+    const promise = new Promise((resolve) => (resolver = resolve));
     // Notice that the callback for verifier may execute asynchronously.
-    this.redirectVerifierHelper_.useVerifier(verifier => {
+    this.redirectVerifierHelper_.useVerifier((verifier) => {
       if (verifier) {
         setInternalParam(paymentRequest, 'redirectVerifier', verifier);
       }
@@ -15182,19 +15638,20 @@ class PayClient {
         // Temporary client side solution to remember the
         // input params. TODO: Remove this once server-side
         // input preservation is done and is part of the response.
-        res => {
+        (res) => {
           if (request) {
             res['paymentRequest'] = request;
           }
           return res;
         }
       )
-      .catch(reason => {
+      .catch((reason) => {
         if (typeof reason == 'object' && reason['statusCode'] == 'CANCELED') {
           const error = createCancelError(this.win_);
           if (request) {
-            error['productType'] =
-              /** @type {!PaymentDataRequest} */ (request)['i']['productType'];
+            error['productType'] = /** @type {!PaymentDataRequest} */ (request)[
+              'i'
+            ]['productType'];
           } else {
             error['productType'] = null;
           }
@@ -15270,7 +15727,7 @@ class RedirectVerifierHelper {
    * @param {function(?string)} callback
    */
   useVerifier(callback) {
-    this.getOrCreatePair_(pair => {
+    this.getOrCreatePair_((pair) => {
       if (pair) {
         try {
           this.win_.localStorage.setItem(REDIRECT_STORAGE_KEY, pair.key);
@@ -15313,7 +15770,7 @@ class RedirectVerifierHelper {
       callback(this.pair_);
     } else if (this.pairPromise_) {
       // Otherwise wait for it to be created.
-      this.pairPromise_.then(pair => callback(pair));
+      this.pairPromise_.then((pair) => callback(pair));
     }
     return this.pairPromise_;
   }
@@ -15358,7 +15815,7 @@ class RedirectVerifierHelper {
 
         // 3. Create a hash.
         crypto.subtle.digest({name: 'SHA-384'}, stringToBytes(key)).then(
-          buffer => {
+          (buffer) => {
             const verifier = btoa(
               bytesToString(
                 new Uint8Array(/** @type {!ArrayBuffer} */ (buffer))
@@ -15366,7 +15823,7 @@ class RedirectVerifierHelper {
             );
             resolve({key, verifier});
           },
-          reason => {
+          (reason) => {
             reject(reason);
           }
         );
@@ -15376,7 +15833,7 @@ class RedirectVerifierHelper {
           // recoverable.
           return null;
         })
-        .then(pair => {
+        .then((pair) => {
           this.pairCreated_ = true;
           this.pair_ = pair;
           return pair;
@@ -15400,79 +15857,6 @@ function setInternalParam(paymentRequest, param, value) {
   });
 }
 
-/**
- * Copyright 2018 The Subscribe with Google 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.
- */
-
-class Preconnect {
-  /**
-   * @param {!Document} doc
-   */
-  constructor(doc) {
-    /** @private @const {!Document} */
-    this.doc_ = doc;
-  }
-
-  /**
-   * @param {string} url
-   */
-  preconnect(url) {
-    this.pre_(url, 'preconnect');
-  }
-
-  /**
-   * @param {string} url
-   */
-  dnsPrefetch(url) {
-    this.pre_(url, 'dns-prefetch');
-  }
-
-  /**
-   * @param {string} url
-   */
-  prefetch(url) {
-    this.pre_(url, 'preconnect prefetch');
-  }
-
-  /**
-   * @param {string} url
-   * @param {string} as
-   */
-  preload(url, as) {
-    this.pre_(url, 'preconnect preload', as);
-  }
-
-  /**
-   * @param {string} url
-   * @param {string} rel
-   * @param {?string=} as
-   * @private
-   */
-  pre_(url, rel, as) {
-    // <link rel="prefetch" href="..." as="">
-    const linkEl = createElement(this.doc_, 'link', {
-      'rel': rel,
-      'href': url,
-    });
-    if (as) {
-      linkEl.setAttribute('as', as);
-    }
-    this.doc_.head.appendChild(linkEl);
-  }
-}
-
 /**
  * Copyright 2019 The Subscribe with Google Authors. All Rights Reserved.
  *
@@ -15602,6 +15986,12 @@ class PropensityServer {
    * @param {!../api/client-event-manager-api.ClientEvent} event
    */
   handleClientEvent_(event) {
+    // Propensity does not need this data and does not have the right to
+    // it at this time.  We can consider this if necessary in the future.
+    if (event.eventOriginator === EventOriginator.SHOWCASE_CLIENT) {
+      return;
+    }
+
     /**
      * Does a live check of the config because we don't know when publisher
      * called to enable (it may be after a consent dialog).
@@ -15646,7 +16036,8 @@ class PropensityServer {
    * @return {!../api/propensity-api.PropensityScore}
    */
   parsePropensityResponse_(response) {
-    let defaultScore = /** @type {!../api/propensity-api.PropensityScore} */ ({});
+    let defaultScore =
+      /** @type {!../api/propensity-api.PropensityScore} */ ({});
     if (!response['header']) {
       defaultScore = /** @type {!../api/propensity-api.PropensityScore} */ ({
         header: {ok: false},
@@ -15713,8 +16104,8 @@ class PropensityServer {
       referrer;
     return this.fetcher_
       .fetch(this.propensityUrl_(url), init)
-      .then(result => result.json())
-      .then(response => {
+      .then((result) => result.json())
+      .then((response) => {
         return this.parsePropensityResponse_(response);
       });
   }
@@ -15833,7 +16224,7 @@ class Propensity {
   }
 }
 
-const CSS$1 = ".swg-dialog,.swg-toast{box-sizing:border-box;background-color:#fff!important}.swg-toast{position:fixed!important;bottom:0!important;max-height:46px!important;z-index:2147483647!important;border:none!important}@media (max-height:640px), (max-width:640px){.swg-dialog,.swg-toast{width:480px!important;left:-240px!important;margin-left:50vw!important;border-top-left-radius:8px!important;border-top-right-radius:8px!important;box-shadow:0 1px 1px rgba(60,64,67,.3),0 1px 4px 1px rgba(60,64,67,.15)!important}}@media (min-width:640px) and (min-height:640px){.swg-dialog{width:630px!important;left:-315px!important;margin-left:50vw!important;background-color:transparent!important;border:none!important}.swg-toast{left:0!important}}@media (max-width:480px){.swg-dialog,.swg-toast{width:100%!important;left:0!important;right:0!important;margin-left:0!important}}\n/*# sourceURL=/./src/components/dialog.css*/";
+const CSS = ".swg-dialog,.swg-toast{background-color:#fff!important;box-sizing:border-box}.swg-toast{border:none!important;bottom:0!important;max-height:46px!important;position:fixed!important;z-index:2147483647!important}@media (max-height:640px),(max-width:640px){.swg-dialog,.swg-toast{border-top-left-radius:8px!important;border-top-right-radius:8px!important;box-shadow:0 1px 1px rgba(60,64,67,.3),0 1px 4px 1px rgba(60,64,67,.15)!important;left:-240px!important;margin-left:50vw!important;width:480px!important}}@media (min-width:640px) and (min-height:640px){.swg-dialog{background-color:transparent!important;border:none!important;left:-315px!important;margin-left:50vw!important;width:630px!important}.swg-toast{left:0!important}}@media (max-width:480px){.swg-dialog,.swg-toast{left:0!important;margin-left:0!important;right:0!important;width:100%!important}}\n/*# sourceURL=/./src/components/dialog.css*/";
 
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
@@ -15853,6 +16244,11 @@ const CSS$1 = ".swg-dialog,.swg-toast{box-sizing:border-box;background-color:#ff
 
 const PREFIX = 'subscribe.google.com';
 
+/**
+ * This class is responsible for the storage of data in session storage. If
+ * you're looking to store data in local storage, see
+ * src/runtime/local-storage.LocalStorage.
+ */
 class Storage {
   /**
    * @param {!Window} win
@@ -15867,14 +16263,18 @@ class Storage {
 
   /**
    * @param {string} key
+   * @param {boolean=} useLocalStorage
    * @return {!Promise<?string>}
    */
-  get(key) {
+  get(key, useLocalStorage = false) {
     if (!this.values_[key]) {
-      this.values_[key] = new Promise(resolve => {
-        if (this.win_.sessionStorage) {
+      this.values_[key] = new Promise((resolve) => {
+        const storage = useLocalStorage
+          ? this.win_.localStorage
+          : this.win_.sessionStorage;
+        if (storage) {
           try {
-            resolve(this.win_.sessionStorage.getItem(storageKey(key)));
+            resolve(storage.getItem(storageKey(key)));
           } catch (e) {
             // Ignore error.
             resolve(null);
@@ -15890,14 +16290,18 @@ class Storage {
   /**
    * @param {string} key
    * @param {string} value
+   * @param {boolean=} useLocalStorage
    * @return {!Promise}
    */
-  set(key, value) {
+  set(key, value, useLocalStorage = false) {
     this.values_[key] = Promise.resolve(value);
-    return new Promise(resolve => {
-      if (this.win_.sessionStorage) {
+    return new Promise((resolve) => {
+      const storage = useLocalStorage
+        ? this.win_.localStorage
+        : this.win_.sessionStorage;
+      if (storage) {
         try {
-          this.win_.sessionStorage.setItem(storageKey(key), value);
+          storage.setItem(storageKey(key), value);
         } catch (e) {
           // Ignore error.
         }
@@ -15908,14 +16312,18 @@ class Storage {
 
   /**
    * @param {string} key
+   * @param {boolean=} useLocalStorage
    * @return {!Promise}
    */
-  remove(key) {
+  remove(key, useLocalStorage = false) {
     delete this.values_[key];
-    return new Promise(resolve => {
-      if (this.win_.sessionStorage) {
+    return new Promise((resolve) => {
+      const storage = useLocalStorage
+        ? this.win_.localStorage
+        : this.win_.sessionStorage;
+      if (storage) {
         try {
-          this.win_.sessionStorage.removeItem(storageKey(key));
+          storage.removeItem(storageKey(key));
         } catch (e) {
           // Ignore error.
         }
@@ -15999,12 +16407,12 @@ class WaitForSubscriptionLookupApi {
     );
 
     return this.accountPromise_.then(
-      account => {
+      (account) => {
         // Account was found.
         this.dialogManager_.completeView(this.activityIframeView_);
         return account;
       },
-      reason => {
+      (reason) => {
         this.dialogManager_.completeView(this.activityIframeView_);
         throw reason;
       }
@@ -16039,10 +16447,15 @@ class ConfiguredRuntime {
    * @param {{
    *     fetcher: (!Fetcher|undefined),
    *     configPromise: (!Promise|undefined),
+   *     enableGoogleAnalytics: (boolean|undefined),
    *   }=} integr
    * @param {!../api/subscriptions.Config=} config
+   * @param {!{
+   *   lang: (string|undefined),
+   *   theme: (!../api/basic-subscriptions.ClientTheme|undefined),
+   *   }=} clientOptions
    */
-  constructor(winOrDoc, pageConfig, integr, config) {
+  constructor(winOrDoc, pageConfig, integr, config, clientOptions) {
     integr = integr || {};
     integr.configPromise = integr.configPromise || Promise.resolve();
 
@@ -16088,6 +16501,21 @@ class ConfiguredRuntime {
     /** @private @const {!Callbacks} */
     this.callbacks_ = new Callbacks();
 
+    /** @private {?OffersFlow} */
+    this.lastOffersFlow_ = null;
+
+    /** @private {?ContributionsFlow} */
+    this.lastContributionsFlow_ = null;
+
+    // Start listening to Google Analytics events, if applicable.
+    if (integr.enableGoogleAnalytics) {
+      /** @private @const {!GoogleAnalyticsEventListener} */
+      this.googleAnalyticsEventListener_ = new GoogleAnalyticsEventListener(
+        this
+      );
+      this.googleAnalyticsEventListener_.start();
+    }
+
     // WARNING: DepsDef ('this') is being progressively defined below.
     // Constructors will crash if they rely on something that doesn't exist yet.
     /** @private @const {!../components/activities.ActivityPorts} */
@@ -16111,6 +16539,13 @@ class ConfiguredRuntime {
       this // See note about 'this' above
     );
 
+    /** @private @const {!ClientConfigManager} */
+    this.clientConfigManager_ = new ClientConfigManager(
+      pageConfig.getPublicationId(),
+      this.fetcher_,
+      clientOptions
+    );
+
     /** @private @const {!Propensity} */
     this.propensityModule_ = new Propensity(
       this.win_,
@@ -16130,14 +16565,16 @@ class ConfiguredRuntime {
     const preconnect = new Preconnect(this.win_.document);
 
     preconnect.prefetch('https://news.google.com/swg/js/v1/loader.svg');
+    preconnect.preconnect('https://www.gstatic.com/');
+    preconnect.preconnect('https://fonts.googleapis.com/');
+    preconnect.preconnect('https://www.google.com/');
     LinkCompleteFlow.configurePending(this);
     PayCompleteFlow.configurePending(this);
-    this.payClient_.preconnect(preconnect);
 
-    injectStyleSheet(this.doc_, CSS$1);
+    injectStyleSheet(this.doc_, CSS);
 
     // Report redirect errors if any.
-    this.activityPorts_.onRedirectError(error => {
+    this.activityPorts_.onRedirectError((error) => {
       this.analyticsService_.addLabels(['redirect']);
       this.eventManager_.logSwgEvent(
         AnalyticsEvent.EVENT_PAYMENT_FAILED,
@@ -16197,6 +16634,11 @@ class ConfiguredRuntime {
     return this.storage_;
   }
 
+  /** @override */
+  clientConfigManager() {
+    return this.clientConfigManager_;
+  }
+
   /** @override */
   analytics() {
     return this.analyticsService_;
@@ -16229,7 +16671,7 @@ class ConfiguredRuntime {
           }
           break;
         case 'experiments':
-          v.forEach(experiment => setExperiment(this.win_, experiment, true));
+          v.forEach((experiment) => setExperiment(this.win_, experiment, true));
           if (this.analytics()) {
             // If analytics service isn't set up yet, then it will get the
             // experiments later.
@@ -16256,7 +16698,7 @@ class ConfiguredRuntime {
       }
     }
     // Throw error string if it's not null
-    log_2(!error, error || undefined);
+    assert(!error, error || undefined);
     // Assign.
     Object.assign(this.config_, config);
   }
@@ -16269,12 +16711,17 @@ class ConfiguredRuntime {
   /** @override */
   reset() {
     this.entitlementsManager_.reset();
-    this.dialogManager_.completeAll();
+    this.closeDialog();
   }
 
   /** @override */
   clear() {
     this.entitlementsManager_.clear();
+    this.closeDialog();
+  }
+
+  /** Close dialog. */
+  closeDialog() {
     this.dialogManager_.completeAll();
   }
 
@@ -16288,15 +16735,16 @@ class ConfiguredRuntime {
   }
 
   /** @override */
-  getEntitlements(encryptedDocumentKey) {
+  getEntitlements(params) {
     return this.entitlementsManager_
-      .getEntitlements(encryptedDocumentKey)
-      .then(entitlements => {
+      .getEntitlements(params)
+      .then((entitlements) => {
         // Auto update internal things tracking the user's current SKU.
         if (entitlements) {
           try {
             const skus = entitlements.entitlements.map(
-              entitlement => entitlement.getSku() || 'unknown subscriptionToken'
+              (entitlement) =>
+                entitlement.getSku() || 'unknown subscriptionToken'
             );
             if (skus.length > 0) {
               this.analyticsService_.setSku(skus.join(','));
@@ -16323,15 +16771,15 @@ class ConfiguredRuntime {
       const errorMessage =
         'The showOffers() method cannot be used to update a subscription. ' +
         'Use the showUpdateOffers() method instead.';
-      log_2(options ? !options['oldSku'] : true, errorMessage);
-      const flow = new OffersFlow(this, options);
-      return flow.start();
+      assert(options ? !options['oldSku'] : true, errorMessage);
+      this.lastOffersFlow_ = new OffersFlow(this, options);
+      return this.lastOffersFlow_.start();
     });
   }
 
   /** @override */
   showUpdateOffers(options) {
-    log_2(
+    assert(
       isExperimentOn(this.win_, ExperimentFlags.REPLACE_SUBSCRIPTION),
       'Not yet launched!'
     );
@@ -16339,7 +16787,7 @@ class ConfiguredRuntime {
       const errorMessage =
         'The showUpdateOffers() method cannot be used for new subscribers. ' +
         'Use the showOffers() method instead.';
-      log_2(options ? !!options['oldSku'] : false, errorMessage);
+      assert(options ? !!options['oldSku'] : false, errorMessage);
       const flow = new OffersFlow(this, options);
       return flow.start();
     });
@@ -16364,11 +16812,19 @@ class ConfiguredRuntime {
   /** @override */
   showContributionOptions(options) {
     return this.documentParsed_.then(() => {
-      const flow = new ContributionsFlow(this, options);
-      return flow.start();
+      this.lastContributionsFlow_ = new ContributionsFlow(this, options);
+      return this.lastContributionsFlow_.start();
     });
   }
 
+  /**
+   * Get the last contribution offers flow.
+   * @return {?ContributionsFlow}
+   */
+  getLastContributionsFlow() {
+    return this.lastContributionsFlow_;
+  }
+
   /** @override */
   waitForSubscriptionLookup(accountPromise) {
     return this.documentParsed_.then(() => {
@@ -16382,6 +16838,11 @@ class ConfiguredRuntime {
     this.callbacks_.setOnLoginRequest(callback);
   }
 
+  /** @override */
+  triggerLoginRequest(request) {
+    this.callbacks_.triggerLoginRequest(request);
+  }
+
   /** @override */
   setOnLinkComplete(callback) {
     this.callbacks_.setOnLinkComplete(callback);
@@ -16435,7 +16896,7 @@ class ConfiguredRuntime {
     const errorMessage =
       'The subscribe() method can only take a sku as its parameter; ' +
       'for subscription updates please use the updateSubscription() method';
-    log_2(typeof sku === 'string', errorMessage);
+    assert(typeof sku === 'string', errorMessage);
     return this.documentParsed_.then(() => {
       return new PayStartFlow(this, {'skuId': sku}).start();
     });
@@ -16443,14 +16904,14 @@ class ConfiguredRuntime {
 
   /** @override */
   updateSubscription(subscriptionRequest) {
-    log_2(
+    assert(
       isExperimentOn(this.win_, ExperimentFlags.REPLACE_SUBSCRIPTION),
       'Not yet launched!'
     );
     const errorMessage =
       'The updateSubscription() method should be used for subscription ' +
       'updates; for new subscriptions please use the subscribe() method';
-    log_2(
+    assert(
       subscriptionRequest ? subscriptionRequest['oldSku'] : false,
       errorMessage
     );
@@ -16511,7 +16972,7 @@ class ConfiguredRuntime {
 
   /** @override */
   attachSmartButton(button, optionsOrCallback, callback) {
-    log_2(
+    assert(
       isExperimentOn(this.win_, ExperimentFlags.SMARTBOX),
       'Not yet launched!'
     );
@@ -16528,17 +16989,74 @@ class ConfiguredRuntime {
     return Promise.resolve(this.propensityModule_);
   }
 
-  /** @override
+  /**
+   * This one exists as an internal helper so SwG logging doesn't require a promise.
    * @return {!ClientEventManager}
    */
   eventManager() {
     return this.eventManager_;
   }
 
+  /**
+   * Get the last subscription offers flow.
+   * @return {?OffersFlow}
+   */
+  getLastOffersFlow() {
+    return this.lastOffersFlow_;
+  }
+
+  /**
+   * This one exists as a public API so publishers can subscribe to SwG events.
+   * @override */
+  getEventManager() {
+    return Promise.resolve(this.eventManager_);
+  }
+
   /** @override */
   getLogger() {
     return Promise.resolve(this.logger_);
   }
+
+  /** @override */
+  setShowcaseEntitlement(entitlement) {
+    if (
+      !entitlement ||
+      !isSecure(this.win().location) ||
+      !wasReferredByGoogle(parseUrl(this.win().document.referrer)) ||
+      !queryStringHasFreshGaaParams(this.win().location.search)
+    ) {
+      return Promise.resolve();
+    }
+
+    const eventsToLog =
+      showcaseEventToAnalyticsEvents(entitlement.entitlement) || [];
+    const params = new EventParams();
+    params.setIsUserRegistered(entitlement.isUserRegistered);
+
+    for (let i = 0; i < eventsToLog.length; i++) {
+      this.eventManager().logEvent({
+        eventType: eventsToLog[i],
+        eventOriginator: EventOriginator.SHOWCASE_CLIENT,
+        isFromUserAction: false,
+        additionalParameters: params,
+      });
+    }
+
+    return Promise.resolve();
+  }
+
+  /** @override */
+  consumeShowcaseEntitlementJwt(showcaseEntitlementJwt, onCloseDialog) {
+    const entitlements = this.entitlementsManager().parseEntitlements({
+      signedEntitlements: showcaseEntitlementJwt,
+    });
+    entitlements.consume(onCloseDialog);
+  }
+
+  /** @override */
+  showBestAudienceAction() {
+    warn('Not implemented yet');
+  }
 }
 
-export { AnalyticsEvent, ClientEvent, ClientEventManagerApi, ConfiguredRuntime, DeferredAccountCreationResponse, Entitlement, Entitlements, EventOriginator, Fetcher, FilterResult, PurchaseData, SubscribeResponse$1 as SubscribeResponse, UserData };
+export { AnalyticsEvent, ClientEvent, ClientEventManagerApi, ConfiguredRuntime, DeferredAccountCreationResponse, Entitlement, Entitlements, EventOriginator, Fetcher, FilterResult, PurchaseData, SubscribeResponse, UserData };
diff --git a/third_party/timeagojs/LICENSE b/third_party/timeagojs/LICENSE
deleted file mode 100644
index d4e09a44bb447..0000000000000
--- a/third_party/timeagojs/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2016 Hust.cc
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/third_party/timeagojs/README.amp b/third_party/timeagojs/README.amp
deleted file mode 100644
index dce71a966ee2a..0000000000000
--- a/third_party/timeagojs/README.amp
+++ /dev/null
@@ -1,13 +0,0 @@
-URL: https://github.com/hustcc/timeago.js
-License: MIT
-License File: https://github.com/hustcc/timeago.js/blob/v3.0.0/LICENSE
-
-Description:
-Fork of timeago.js from release v3.0.0
-https://github.com/hustcc/timeago.js/tree/v3.0.0
-
-Local Modifications:
-Made formatting changes to ensure code passes AMP validation.
-Removed some functions from timeago.js file that are not required in the AMP
-implementation.
-Included entire locales directory which provide 37 locale options.
diff --git a/third_party/timeagojs/timeago-locales.js b/third_party/timeagojs/timeago-locales.js
deleted file mode 100644
index cceb6861199df..0000000000000
--- a/third_party/timeagojs/timeago-locales.js
+++ /dev/null
@@ -1,965 +0,0 @@
-/**
- * Copyright (c) 2016 hustcc
- * License: MIT
- * Version: v3.0.0
- * https://github.com/hustcc/timeago.js
- */
-
-/**
- * ar (Arabic)
- */
-export const ar = function(number, index) {
-  if (index === 0) {
-    return ['منذ لحظات', 'بعد لحظات'];
-  }
-
-  const timeTypes = [
-    ['ثانية', 'ثانيتين', '%s ثوان', '%s ثانية'],    // Seconds
-    ['دقيقة', 'دقيقتين', '%s دقائق', '%s دقيقة'],   // Minutes
-    ['ساعة', 'ساعتين', '%s ساعات', '%s ساعة'],      // Hours
-    ['يوم', 'يومين', '%s أيام', '%s يوماً'],         // Days
-    ['أسبوع', 'أسبوعين', '%s أسابيع', '%s أسبوعاً'], // Weeks
-    ['شهر', 'شهرين', '%s أشهر', '%s شهراً'],         // Months
-    ['عام', 'عامين', '%s أعوام', '%s عاماً'],        // Years
-  ];
-
-  const timeStr = formatTime(Math.floor(index / 2), number);
-
-  return [`منذ  ${timeStr}`, `بعد  ${timeStr}`];
-
-  function formatTime(type, n) {
-    if (n < 3) {
-      return timeTypes[type][n - 1];
-    }
-    else if (n >= 3 && n <= 10) {
-      return timeTypes[type][2];
-    }
-    else {
-      return timeTypes[type][3];
-    }
-  }
-};
-
-/**
- * be (Belarusian)
- */
-export const be = function(number, index) {
-  const seconds =
-    formatNum.bind(null, 'секунду', '%s секунду', '%s секунды', '%s секунд');
-  const minutes =
-    formatNum.bind(null, 'хвіліну', '%s хвіліну', '%s хвіліны', '%s хвілін');
-  const hours =
-    formatNum.bind(null, 'гадзіну', '%s гадзіну', '%s гадзіны', '%s гадзін');
-  const days =
-    formatNum.bind(null, 'дзень', '%s дзень', '%s дні', '%s дзён');
-  const weeks =
-    formatNum.bind(null, 'тыдзень', '%s тыдзень', '%s тыдні', '%s тыдняў');
-  const months =
-    formatNum.bind(null, 'месяц', '%s месяц', '%s месяцы', '%s месяцаў');
-  const years =
-    formatNum.bind(null, 'год', '%s год', '%s гады', '%s гадоў');
-
-  switch (index) {
-    case 0: return ['толькі што', 'праз некалькі секунд'];
-    case 1: return [seconds(number) + ' таму', 'праз ' + seconds(number)];
-    case 2:
-    case 3: return [minutes(number) + ' таму', 'праз ' + minutes(number)];
-    case 4:
-    case 5: return [hours(number) + ' таму', 'праз ' + hours(number)];
-    case 6:
-    case 7: return [days(number) + ' таму', 'праз ' + days(number)];
-    case 8:
-    case 9: return [weeks(number) + ' таму', 'праз ' + weeks(number)];
-    case 10:
-    case 11: return [months(number) + ' таму', 'праз ' + months(number)];
-    case 12:
-    case 13: return [years(number) + ' таму', 'праз ' + years(number)];
-    default: return ['', ''];
-  }
-
-  /**
-   *
-   * @param f1 - 1
-   * @param f - 21, 31, ...
-   * @param s - 2-4, 22-24, 32-34 ...
-   * @param t - 5-20, 25-30, ...
-   * @param n
-   * @return {string}
-   */
-  function formatNum(f1, f, s, t, n) {
-    const n10 = n % 10;
-    let str = t;
-
-    if (n === 1) {
-      str = f1;
-    } else if (n10 === 1 && n > 20) {
-      str = f;
-    } else if (n10 > 1 && n10 < 5 && (n > 20 || n < 10)) {
-      str = s;
-    }
-
-    return str;
-  }
-};
-
-/**
- * bg (Bulgarian)
- */
-export const bg = function(number, index) {
-  return [
-    ['току що', 'съвсем скоро'],
-    ['преди %s секунди', 'след %s секунди'],
-    ['преди 1 минута', 'след 1 минута'],
-    ['преди %s минути', 'след %s минути'],
-    ['преди 1 час', 'след 1 час'],
-    ['преди %s часа', 'след %s часа'],
-    ['преди 1 ден', 'след 1 ден'],
-    ['преди %s дни', 'след %s дни'],
-    ['преди 1 седмица', 'след 1 седмица'],
-    ['преди %s седмици', 'след %s седмици'],
-    ['преди 1 месец', 'след 1 месец'],
-    ['преди %s месеца', 'след %s месеца'],
-    ['преди 1 година', 'след 1 година'],
-    ['преди %s години', 'след %s години'],
-  ][index];
-};
-
-/**
- * ca (Catalan)
- */
-export const ca = function(number, index) {
-  return [
-    ['fa un moment', 'd\'aquí un moment'],
-    ['fa %s segons', 'd\'aquí %s segons'],
-    ['fa 1 minut', 'd\'aquí 1 minut'],
-    ['fa %s minuts', 'd\'aquí %s minuts'],
-    ['fa 1 hora', 'd\'aquí 1 hora'],
-    ['fa %s hores', 'd\'aquí %s hores'],
-    ['fa 1 dia', 'd\'aquí 1 dia'],
-    ['fa %s dies', 'd\'aquí %s dies'],
-    ['fa 1 setmana', 'd\'aquí 1 setmana'],
-    ['fa %s setmanes', 'd\'aquí %s setmanes'],
-    ['fa 1 mes', 'd\'aquí 1 mes'],
-    ['fa %s mesos', 'd\'aquí %s mesos'],
-    ['fa 1 any', 'd\'aquí 1 any'],
-    ['fa %s anys', 'd\'aquí %s anys'],
-  ][index];
-};
-
-/**
- * da (Danish)
- */
-export const da = function(number, index) {
-  return [
-    ['for et øjeblik siden', 'om et øjeblik'],
-    ['for %s sekunder siden', 'om %s sekunder'],
-    ['for 1 minut siden', 'om 1 minut'],
-    ['for %s minutter siden', 'om %s minutter'],
-    ['for 1 time siden', 'om 1 time'],
-    ['for %s timer siden', 'om %s timer'],
-    ['for 1 dag siden', 'om 1 dag'],
-    ['for %s dage siden', 'om %s dage'],
-    ['for 1 uge siden', 'om 1 uge'],
-    ['for %s uger siden', 'om %s uger'],
-    ['for 1 måned siden', 'om 1 måned'],
-    ['for %s måneder siden', 'om %s måneder'],
-    ['for 1 år siden', 'om 1 år'],
-    ['for %s år siden', 'om %s år'],
-  ][index];
-};
-
-/**
- * de (German)
- */
-export const de = function(number, index) {
-  return [
-    ['gerade eben', 'vor einer Weile'],
-    ['vor %s Sekunden', 'in %s Sekunden'],
-    ['vor 1 Minute', 'in 1 Minute'],
-    ['vor %s Minuten', 'in %s Minuten'],
-    ['vor 1 Stunde', 'in 1 Stunde'],
-    ['vor %s Stunden', 'in %s Stunden'],
-    ['vor 1 Tag', 'in 1 Tag'],
-    ['vor %s Tagen', 'in %s Tagen'],
-    ['vor 1 Woche', 'in 1 Woche'],
-    ['vor %s Wochen', 'in %s Wochen'],
-    ['vor 1 Monat', 'in 1 Monat'],
-    ['vor %s Monaten', 'in %s Monaten'],
-    ['vor 1 Jahr', 'in 1 Jahr'],
-    ['vor %s Jahren', 'in %s Jahren'],
-  ][index];
-};
-
-/**
- * el (Greek)
- */
-export const el = function(number, index) {
-  return [
-    ['μόλις τώρα', 'σε λίγο'],
-    ['%s δευτερόλεπτα πριν', 'σε %s δευτερόλεπτα'],
-    ['1 λεπτό πριν', 'σε 1 λεπτό'],
-    ['%s λεπτά πριν', 'σε %s λεπτά'],
-    ['1 ώρα πριν', 'σε 1 ώρα'],
-    ['%s ώρες πριν', 'σε %s ώρες'],
-    ['1 μέρα πριν', 'σε 1 μέρα'],
-    ['%s μέρες πριν', 'σε %s μέρες'],
-    ['1 εβδομάδα πριν', 'σε 1 εβδομάδα'],
-    ['%s εβδομάδες πριν', 'σε %s εβδομάδες'],
-    ['1 μήνα πριν', 'σε 1 μήνα'],
-    ['%s μήνες πριν', 'σε %s μήνες'],
-    ['1 χρόνο πριν', 'σε 1 χρόνο'],
-    ['%s χρόνια πριν', 'σε %s χρόνια'],
-  ][index];
-};
-
-/**
- * en (English)
- */
-export const en = function(number, index) {
-  return [
-    ['just now', 'right now'],
-    ['%s seconds ago', 'in %s seconds'],
-    ['1 minute ago', 'in 1 minute'],
-    ['%s minutes ago', 'in %s minutes'],
-    ['1 hour ago', 'in 1 hour'],
-    ['%s hours ago', 'in %s hours'],
-    ['1 day ago', 'in 1 day'],
-    ['%s days ago', 'in %s days'],
-    ['1 week ago', 'in 1 week'],
-    ['%s weeks ago', 'in %s weeks'],
-    ['1 month ago', 'in 1 month'],
-    ['%s months ago', 'in %s months'],
-    ['1 year ago', 'in 1 year'],
-    ['%s years ago', 'in %s years'],
-  ][index];
-};
-
-/**
- * enShort (English - short)
- */
-export const enShort = function(number, index) {
-  return [
-    ['just now', 'right now'],
-    ['%ss ago', 'in %ss'],
-    ['1m ago', 'in 1m'],
-    ['%sm ago', 'in %sm'],
-    ['1h ago', 'in 1h'],
-    ['%sh ago', 'in %sh'],
-    ['1d ago', 'in 1d'],
-    ['%sd ago', 'in %sd'],
-    ['1w ago', 'in 1w'],
-    ['%sw ago', 'in %sw'],
-    ['1mo ago', 'in 1mo'],
-    ['%smo ago', 'in %smo'],
-    ['1yr ago', 'in 1yr'],
-    ['%syr ago', 'in %syr'],
-  ][index];
-};
-
-/**
- * es (Spanish)
- */
-export const es = function(number, index) {
-  return [
-    ['justo ahora', 'en un rato'],
-    ['hace %s segundos', 'en %s segundos'],
-    ['hace 1 minuto', 'en 1 minuto'],
-    ['hace %s minutos', 'en %s minutos'],
-    ['hace 1 hora', 'en 1 hora'],
-    ['hace %s horas', 'en %s horas'],
-    ['hace 1 día', 'en 1 día'],
-    ['hace %s días', 'en %s días'],
-    ['hace 1 semana', 'en 1 semana'],
-    ['hace %s semanas', 'en %s semanas'],
-    ['hace 1 mes', 'en 1 mes'],
-    ['hace %s meses', 'en %s meses'],
-    ['hace 1 año', 'en 1 año'],
-    ['hace %s años', 'en %s años'],
-  ][index];
-};
-
-/**
- * eu (Basque)
- */
-export const eu = function(number, index) {
-  return [
-    ['orain', 'denbora bat barru'],
-    ['duela %s segundu', '%s segundu barru'],
-    ['duela minutu 1', 'minutu 1 barru'],
-    ['duela %s minutu', '%s minutu barru'],
-    ['duela ordu 1', 'ordu 1 barru'],
-    ['duela %s ordu', '%s ordu barru'],
-    ['duela egun 1', 'egun 1 barru'],
-    ['duela %s egun', '%s egun barru'],
-    ['duela aste 1', 'aste 1 barru'],
-    ['duela %s aste', '%s aste barru'],
-    ['duela hillabete 1', 'hillabete 1 barru'],
-    ['duela %s hillabete', '%s hillabete barru'],
-    ['duela urte 1', 'urte 1 barru'],
-    ['duela %s urte', '%s urte barru'],
-  ][index];
-};
-
-/**
- * fi (Finnish)
- */
-export const fi = function(number, index) {
-  return [
-    ['juuri äsken', 'juuri nyt'],
-    ['%s sekuntia sitten', '%s sekunnin päästä'],
-    ['minuutti sitten', 'minuutin päästä'],
-    ['%s minuuttia sitten', '%s minuutin päästä'],
-    ['tunti sitten', 'tunnin päästä'],
-    ['%s tuntia sitten', '%s tunnin päästä'],
-    ['päivä sitten', 'päivän päästä'],
-    ['%s päivää sitten', '%s päivän päästä'],
-    ['viikko sitten', 'viikon päästä'],
-    ['%s viikkoa sitten', '%s viikon päästä'],
-    ['kuukausi sitten', 'kuukauden päästä'],
-    ['%s kuukautta sitten', '%s kuukauden päästä'],
-    ['vuosi sitten', 'vuoden päästä'],
-    ['%s vuotta sitten', '%s vuoden päästä'],
-  ][index];
-};
-
-/**
- * fr (French)
- */
-export const fr = function(number, index) {
-  return [
-    ['à l\'instant', 'dans un instant'],
-    ['il y a %s secondes', 'dans %s secondes'],
-    ['il y a 1 minute', 'dans 1 minute'],
-    ['il y a %s minutes', 'dans %s minutes'],
-    ['il y a 1 heure', 'dans 1 heure'],
-    ['il y a %s heures', 'dans %s heures'],
-    ['il y a 1 jour', 'dans 1 jour'],
-    ['il y a %s jours', 'dans %s jours'],
-    ['il y a 1 semaine', 'dans 1 semaine'],
-    ['il y a %s semaines', 'dans %s semaines'],
-    ['il y a 1 mois', 'dans 1 mois'],
-    ['il y a %s mois', 'dans %s mois'],
-    ['il y a 1 an', 'dans 1 an'],
-    ['il y a %s ans', 'dans %s ans'],
-  ][index];
-};
-
-/**
- * he (Hebrew)
- */
-export const he = function(number, index) {
-  return [
-    ['זה עתה', 'עכשיו'],
-    ['לפני %s שניות', 'בעוד %s שניות'],
-    ['לפני דקה', 'בעוד דקה'],
-    ['לפני %s דקות', 'בעוד %s דקות'],
-    ['לפני שעה', 'בעוד שעה'],
-    ['לפני %s שעות', 'בעוד %s שעות'],
-    ['אתמול', 'מחר'],
-    ['לפני %s ימים', 'בעוד %s ימים'],
-    ['לפני שבוע', 'בעוד שבוע'],
-    ['לפני %s שבועות', 'בעוד %s שבועות'],
-    ['לפני חודש', 'בעוד חודש'],
-    ['לפני %s חודשים', 'בעוד %s חודשים'],
-    ['לפני שנה', 'בעוד שנה'],
-    ['לפני %s שנים', 'בעוד %s שנים'],
-  ][index];
-};
-
-/**
- * hu (Hungarian)
- */
-export const hu = function(number, index) {
-  return [
-    ['éppen most', 'éppen most'],
-    ['%s másodperce', '%s másodpercen belül'],
-    ['1 perce', '1 percen belül'],
-    ['%s perce', '%s percen belül'],
-    ['1 órája', '1 órán belül'],
-    ['%s órája', '%s órán belül'],
-    ['1 napja', '1 napon belül'],
-    ['%s napja', '%s napon belül'],
-    ['1 hete', '1 héten belül'],
-    ['%s hete', '%s héten belül'],
-    ['1 hónapja', '1 hónapon belül'],
-    ['%s hónapja', '%s hónapon belül'],
-    ['1 éve', '1 éven belül'],
-    ['%s éve', '%s éven belül'],
-  ][index];
-};
-
-/**
- * inBG (Bangla)
- */
-export const inBG = function(number, index) {
-  return [
-    ['এইমাত্র', 'একটা সময়'],
-    ['%s সেকেন্ড আগে', '%s এর সেকেন্ডের মধ্যে'],
-    ['1 মিনিট আগে', '1 মিনিটে'],
-    ['%s এর মিনিট আগে', '%s এর মিনিটের মধ্যে'],
-    ['1 ঘন্টা আগে', '1 ঘন্টা'],
-    ['%s ঘণ্টা আগে', '%s এর ঘন্টার মধ্যে'],
-    ['1 দিন আগে', '1 দিনের মধ্যে'],
-    ['%s এর দিন আগে', '%s এর দিন'],
-    ['1 সপ্তাহ আগে', '1 সপ্তাহের মধ্যে'],
-    ['%s এর সপ্তাহ আগে', '%s সপ্তাহের মধ্যে'],
-    ['1 মাস আগে', '1 মাসে'],
-    ['%s মাস আগে', '%s মাসে'],
-    ['1 বছর আগে', '1 বছরের মধ্যে'],
-    ['%s বছর আগে', '%s বছরে'],
-  ][index];
-};
-
-/**
- * inHI (Hindi)
- */
-export const inHI = function(number, index) {
-  return [
-    ['अभी', 'कुछ समय'],
-    ['%s सेकंड पहले', '%s सेकंड में'],
-    ['1 मिनट पहले', '1 मिनट में'],
-    ['%s मिनट पहले', '%s मिनट में'] ,
-    ['1 घंटे पहले', '1 घंटे में'] ,
-    ['%s घंटे पहले', '%s घंटे में'] ,
-    ['1 दिन पहले', '1 दिन में'] ,
-    ['%s दिन पहले', '%s दिनों में'] ,
-    ['1 सप्ताह पहले', '1 सप्ताह में'] ,
-    ['%s हफ्ते पहले', '%s हफ्तों में'] ,
-    ['1 महीने पहले', '1 महीने में'] ,
-    ['%s महीने पहले', '%s महीनों में'] ,
-    ['1 साल पहले', '1 साल में'] ,
-    ['%s साल पहले','%s साल में'],
-  ][index];
-};
-
-/**
- * inID (Malay)
- */
-export const inID = function(number, index) {
-  return [
-    ['baru saja', 'sebentar'],
-    ['%s detik yang lalu', 'dalam %s detik'],
-    ['1 menit yang lalu', 'dalam 1 menit'],
-    ['%s menit yang lalu', 'dalam %s menit'],
-    ['1 jam yang lalu', 'dalam 1 jam'],
-    ['%s jam yang lalu', 'dalam %s jam'],
-    ['1 hari yang lalu', 'dalam 1 hari'],
-    ['%s hari yang lalu', 'dalam %s hari'],
-    ['1 minggu yang lalu', 'dalam 1 minggu'],
-    ['%s minggu yang lalu', 'dalam %s minggu'],
-    ['1 bulan yang lalu', 'dalam 1 bulan'],
-    ['%s bulan yang lalu', 'dalam %s bulan'],
-    ['1 tahun yang lalu', 'dalam 1 tahun'],
-    ['%s tahun yang lalu', 'dalam %s tahun'],
-  ][index];
-};
-
-/**
- * it (Italian)
- */
-export const it = function(number, index) {
-  return [
-    ['poco fa', 'tra poco'],
-    ['%s secondi fa', '%s secondi da ora'],
-    ['un minuto fa', 'un minuto da ora'],
-    ['%s minuti fa', '%s minuti da ora'],
-    ['un\'ora fa', 'un\'ora da ora'],
-    ['%s ore fa', '%s ore da ora'],
-    ['un giorno fa', 'un giorno da ora'],
-    ['%s giorni fa', '%s giorni da ora'],
-    ['una settimana fa', 'una settimana da ora'],
-    ['%s settimane fa', '%s settimane da ora'],
-    ['un mese fa', 'un mese da ora'],
-    ['%s mesi fa', '%s mesi da ora'],
-    ['un anno fa', 'un anno da ora'],
-    ['%s anni fa', '%s anni da ora'],
-  ][index];
-};
-
-/**
- * ja (Japanese)
- */
-export const ja = function(number, index) {
-  return [
-    ['すこし前', 'すぐに'],
-    ['%s秒前', '%s秒以内'],
-    ['1分前', '1分以内'],
-    ['%s分前', '%s分以内'],
-    ['1時間前', '1時間以内'],
-    ['%s時間前', '%s時間以内'],
-    ['1日前', '1日以内'],
-    ['%s日前', '%s日以内'],
-    ['1週間前', '1週間以内'],
-    ['%s週間前', '%s週間以内'],
-    ['1ヶ月前', '1ヶ月以内'],
-    ['%sヶ月前', '%sヶ月以内'],
-    ['1年前', '1年以内'],
-    ['%s年前', '%s年以内'],
-  ][index];
-};
-
-/**
- * ko (Korean)
- */
-export const ko = function(number, index) {
-  return [
-    ['방금', '곧'],
-    ['%s초 전', '%s초 후'],
-    ['1분 전', '1분 후'],
-    ['%s분 전', '%s분 후'],
-    ['1시간 전', '1시간 후'],
-    ['%s시간 전', '%s시간 후'],
-    ['1일 전', '1일 후'],
-    ['%s일 전', '%s일 후'],
-    ['1주일 전', '1주일 후'],
-    ['%s주일 전', '%s주일 후'],
-    ['1개월 전', '1개월 후'],
-    ['%s개월 전', '%s개월 후'],
-    ['1년 전', '1년 후'],
-    ['%s년 전', '%s년 후'],
-  ][index];
-};
-
-/**
- * ml (Malayalam)
- */
-export const ml = function(number, index) {
-  return [
-    ['ഇപ്പോള്‍', 'കുറച്ചു മുന്‍പ്'],
-    ['%s സെക്കന്റ്‌കള്‍ക്ക് മുന്‍പ്', '%s സെക്കന്റില്‍'],
-    ['1 മിനിറ്റിനു മുന്‍പ്', '1 മിനിറ്റില്‍'],
-    ['%s മിനിറ്റുകള്‍ക്ക് മുന്‍പ', '%s മിനിറ്റില്‍'],
-    ['1 മണിക്കൂറിനു മുന്‍പ്', '1 മണിക്കൂറില്‍'],
-    ['%s മണിക്കൂറുകള്‍ക്കു മുന്‍പ്', '%s മണിക്കൂറില്‍'],
-    ['1 ഒരു ദിവസം മുന്‍പ്', '1 ദിവസത്തില്‍'],
-    ['%s ദിവസങ്ങള്‍ക് മുന്‍പ്', '%s ദിവസങ്ങള്‍ക്കുള്ളില്‍'],
-    ['1 ആഴ്ച മുന്‍പ്', '1 ആഴ്ചയില്‍'],
-    ['%s ആഴ്ചകള്‍ക്ക് മുന്‍പ്', '%s ആഴ്ചകള്‍ക്കുള്ളില്‍'],
-    ['1 മാസത്തിനു മുന്‍പ്', '1 മാസത്തിനുള്ളില്‍'],
-    ['%s മാസങ്ങള്‍ക്ക് മുന്‍പ്', '%s മാസങ്ങള്‍ക്കുള്ളില്‍'],
-    ['1 വര്‍ഷത്തിനു  മുന്‍പ്', '1 വര്‍ഷത്തിനുള്ളില്‍'],
-    ['%s വര്‍ഷങ്ങള്‍ക്കു മുന്‍പ്', '%s വര്‍ഷങ്ങള്‍ക്കുല്ല്ളില്‍'],
-  ][index];
-};
-
-/**
- * nbNO (Norwegian Bokmål)
- */
-export const nbNO = function(number, index) {
-  return [
-    ['akkurat nå', 'om litt'],
-    ['%s sekunder siden', 'om %s sekunder'],
-    ['1 minutt siden', 'om 1 minutt'],
-    ['%s minutter siden', 'om %s minutter'],
-    ['1 time siden', 'om 1 time'],
-    ['%s timer siden', 'om %s timer'],
-    ['1 dag siden', 'om 1 dag'],
-    ['%s dager siden', 'om %s dager'],
-    ['1 uke siden', 'om 1 uke'],
-    ['%s uker siden', 'om %s uker'],
-    ['1 måned siden', 'om 1 måned'],
-    ['%s måneder siden', 'om %s måneder'],
-    ['1 år siden', 'om 1 år'],
-    ['%s år siden', 'om %s år'],
-  ][index];
-};
-
-/**
- * nl (Dutch)
- */
-export const nl = function(number, index) {
-  return [
-    ['recent', 'binnenkort'],
-    ['%s seconden geleden', 'binnen %s seconden'],
-    ['1 minuut geleden', 'binnen 1 minuut'],
-    ['%s minuten geleden', 'binnen %s minuten'],
-    ['1 uur geleden', 'binnen 1 uur'],
-    ['%s uren geleden', 'binnen %s uren'],
-    ['1 dag geleden', 'binnen 1 dag'],
-    ['%s dagen geleden', 'binnen %s dagen'],
-    ['1 week geleden', 'binnen 1 week'],
-    ['%s weken geleden', 'binnen %s weken'],
-    ['1 maand geleden', 'binnen 1 maand'],
-    ['%s maanden geleden', 'binnen %s maanden'],
-    ['1 jaar geleden', 'binnen 1 jaar'],
-    ['%s jaren geleden', 'binnen %s jaren'],
-  ][index];
-};
-
-/**
- * nnNO (Norwegian Nynorsk)
- */
-export const nnNO = function(number, index) {
-  return [
-    ['nett no', 'om litt'],
-    ['%s sekund sidan', 'om %s sekund'],
-    ['1 minutt sidan', 'om 1 minutt'],
-    ['%s minutt sidan', 'om %s minutt'],
-    ['1 time sidan', 'om 1 time'],
-    ['%s timar sidan', 'om %s timar'],
-    ['1 dag sidan', 'om 1 dag'],
-    ['%s dagar sidan', 'om %s dagar'],
-    ['1 veke sidan', 'om 1 veke'],
-    ['%s veker sidan', 'om %s veker'],
-    ['1 månad sidan', 'om 1 månad'],
-    ['%s månadar sidan', 'om %s månadar'],
-    ['1 år sidan', 'om 1 år'],
-    ['%s år sidan', 'om %s år'],
-  ][index];
-};
-
-/**
- * pl (Polish)
- */
-export const pl = function(number, index) {
-  const l = [
-    ['w tej chwili', 'za chwilę'],
-    ['%s sekund temu', 'za %s sekund'],
-    ['1 minutę temu', 'za 1 minutę'],
-    ['%s minut temu', 'za %s minut'],
-    ['1 godzinę temu', 'za 1 godzinę'],
-    ['%s godzin temu', 'za %s godzin'],
-    ['1 dzień temu', 'za 1 dzień'], // ['wczoraj', 'jutro'],
-    ['%s dni temu', 'za %s dni'],
-    ['1 tydzień temu', 'za 1 tydzień'],
-    ['%s tygodni temu', 'za %s tygodni'],
-    ['1 miesiąc temu', 'za 1 miesiąc'],
-    ['%s miesięcy temu', 'za %s miesięcy'],
-    ['1 rok temu', 'za 1 rok'],
-    ['%s lat temu', 'za %s lat'],
-    ['%s sekundy temu', 'za %s sekundy'],
-    ['%s minuty temu', 'za %s minuty'],
-    ['%s godziny temu', 'za %s godziny'],
-    ['%s dni temu', 'za %s dni'],
-    ['%s tygodnie temu', 'za %s tygodnie'],
-    ['%s miesiące temu', 'za %s miesiące'],
-    ['%s lata temu', 'za %s lata'],
-  ];
-  // to determine which plural form must be used check the last 2 digits
-  // and calculate new index value to get the nominative form (14-20)
-  // for all other cases use index value as it is (0-13)
-  return l[index & 1 ? (number % 10 > 4 || number % 10 < 2 || 1 ===
-    ~~(number / 10) % 10 ? index : ++index / 2 + 13) : index];
-};
-
-/**
- * ptBR (Portuguese)
- */
-export const ptBR = function(number, index) {
-  return [
-    ['agora mesmo', 'daqui um pouco'],
-    ['há %s segundos', 'em %s segundos'],
-    ['há um minuto', 'em um minuto'],
-    ['há %s minutos', 'em %s minutos'],
-    ['há uma hora', 'em uma hora'],
-    ['há %s horas', 'em %s horas'],
-    ['há um dia', 'em um dia'],
-    ['há %s dias', 'em %s dias'],
-    ['há uma semana', 'em uma semana'],
-    ['há %s semanas', 'em %s semanas'],
-    ['há um mês', 'em um mês'],
-    ['há %s meses', 'em %s meses'],
-    ['há um ano', 'em um ano'],
-    ['há %s anos', 'em %s anos'],
-  ][index];
-};
-
-/**
- * ro (Romanian)
- */
-export const ro = function(number, index) {
-  const langTable = [
-    ['chiar acum', 'chiar acum'],
-    ['acum %s secunde', 'peste %s secunde'],
-    ['acum un minut', 'peste un minut'],
-    ['acum %s minute', 'peste %s minute'],
-    ['acum o oră', 'peste o oră'],
-    ['acum %s ore', 'peste %s ore'],
-    ['acum o zi', 'peste o zi'],
-    ['acum %s zile', 'peste %s zile'],
-    ['acum o săptămână', 'peste o săptămână'],
-    ['acum %s săptămâni', 'peste %s săptămâni'],
-    ['acum o lună', 'peste o lună'],
-    ['acum %s luni', 'peste %s luni'],
-    ['acum un an', 'peste un an'],
-    ['acum %s ani', 'peste %s ani'],
-  ];
-
-  if (number < 20) {
-    return langTable[index];
-  }
-
-  // A `de` preposition must be added between the number and the adverb
-  // if the number is greater than 20.
-  return [
-    langTable[index][0].replace('%s', '%s de'),
-    langTable[index][1].replace('%s', '%s de'),
-  ];
-};
-
-/**
- * ru (Russian)
- */
-export const ru = function(number, index) {
-  const seconds =
-    formatNum.bind(null, 'секунду', '%s секунду', '%s секунды', '%s секунд');
-  const minutes =
-    formatNum.bind(null, 'минуту', '%s минуту', '%s минуты', '%s минут');
-  const hours =
-    formatNum.bind(null, 'час', '%s час', '%s часа', '%s часов');
-  const days =
-    formatNum.bind(null, 'день', '%s день', '%s дня', '%s дней');
-  const weeks =
-    formatNum.bind(null, 'неделю', '%s неделю', '%s недели', '%s недель');
-  const months =
-    formatNum.bind(null, 'месяц', '%s месяц', '%s месяца', '%s месяцев');
-  const years =
-    formatNum.bind(null, 'год', '%s год', '%s года', '%s лет');
-
-  switch (index) {
-    case 0: return ['только что', 'через несколько секунд'];
-    case 1: return [seconds(number) + ' назад', 'через ' + seconds(number)];
-    case 2: // ['минуту назад', 'через минуту'];
-    case 3: return [minutes(number) + ' назад', 'через ' + minutes(number)];
-    case 4: // ['час назад', 'через час'];
-    case 5: return [hours(number) + ' назад', 'через ' + hours(number)];
-    case 6: return ['вчера', 'завтра'];
-    case 7: return [days(number) + ' назад', 'через ' + days(number)];
-    case 8: // ['неделю назад', 'через неделю'];
-    case 9: return [weeks(number) + ' назад', 'через ' + weeks(number)];
-    case 10: // ['месяц назад', 'через месяц'];
-    case 11: return [months(number) + ' назад', 'через ' + months(number)];
-    case 12: // ['год назад', 'через год'];
-    case 13: return [years(number) + ' назад', 'через ' + years(number)];
-    default: return ['', ''];
-  }
-
-  /**
-   *
-   * @param f1 - 1
-   * @param f - 21, 31, ...
-   * @param s - 2-4, 22-24, 32-34 ...
-   * @param t - 5-20, 25-30, ...
-   * @param n
-   * @return {string}
-   */
-  function formatNum(f1, f, s, t, n) {
-    const n10 = n % 10;
-    let str = t;
-
-    if (n === 1) {
-      str = f1;
-    } else if (n10 === 1 && n > 20) {
-      str = f;
-    } else if (n10 > 1 && n10 < 5 && (n > 20 || n < 10)) {
-      str = s;
-    }
-    return str;
-  }
-};
-
-/**
- * sv (Swedish)
- */
-export const sv = function(number, index) {
-  return [
-    ['just nu', 'om en stund'],
-    ['%s sekunder sedan', 'om %s seconder'],
-    ['1 minut sedan', 'om 1 minut'],
-    ['%s minuter sedan', 'om %s minuter'],
-    ['1 timme sedan', 'om 1 timme'],
-    ['%s timmar sedan', 'om %s timmar'],
-    ['1 dag sedan', 'om 1 dag'],
-    ['%s dagar sedan', 'om %s dagar'],
-    ['1 vecka sedan', 'om 1 vecka'],
-    ['%s veckor sedan', 'om %s veckor'],
-    ['1 månad sedan', 'om 1 månad'],
-    ['%s månader sedan', 'om %s månader'],
-    ['1 år sedan', 'om 1 år'],
-    ['%s år sedan', 'om %s år'],
-  ][index];
-};
-
-/**
- * ta (Tamil)
- */
-export const ta = function(number, index) {
-  return [
-    ['இப்போது', 'சற்று நேரம் முன்பு'],
-    ['%s நொடிக்கு முன்', '%s நொடிகளில்'],
-    ['1 நிமிடத்திற்க்கு முன்', '1 நிமிடத்தில்'],
-    ['%s நிமிடத்திற்க்கு முன்', '%s நிமிடங்களில்'],
-    ['1 மணி நேரத்திற்கு முன்', '1 மணி நேரத்திற்குள்'],
-    ['%s மணி நேரத்திற்கு முன்', '%s மணி நேரத்திற்குள்'],
-    ['1 நாளுக்கு முன்', '1 நாளில்'],
-    ['%s நாட்களுக்கு முன்', '%s நாட்களில்'],
-    ['1 வாரத்திற்கு முன்', '1 வாரத்தில்'],
-    ['%s வாரங்களுக்கு முன்', '%s வாரங்களில்'],
-    ['1 மாதத்திற்கு முன்', '1 மாதத்தில்'],
-    ['%s மாதங்களுக்கு முன்', '%s மாதங்களில்'],
-    ['1 வருடத்திற்கு முன்', '1 வருடத்தில்'],
-    ['%s வருடங்களுக்கு முன்', '%s வருடங்களில்'],
-  ][index];
-};
-
-/**
- * th (Thai)
- */
-export const th = function(number, index) {
-  return [
-    ['เมื่อสักครู่นี้', 'อีกสักครู่'],
-    ['%s วินาทีที่แล้ว', 'ใน %s วินาที'],
-    ['1 นาทีที่แล้ว', 'ใน 1 นาที'],
-    ['%s นาทีที่แล้ว', 'ใน %s นาที'],
-    ['1 ชั่วโมงที่แล้ว', 'ใน 1 ชั่วโมง'],
-    ['%s ชั่วโมงที่แล้ว', 'ใน %s ชั่วโมง'],
-    ['1 วันที่แล้ว', 'ใน 1 วัน'],
-    ['%s วันที่แล้ว', 'ใน %s วัน'],
-    ['1 อาทิตย์ที่แล้ว', 'ใน 1 อาทิตย์'],
-    ['%s อาทิตย์ที่แล้ว', 'ใน %s อาทิตย์'],
-    ['1 เดือนที่แล้ว', 'ใน 1 เดือน'],
-    ['%s เดือนที่แล้ว', 'ใน %s เดือน'],
-    ['1 ปีที่แล้ว', 'ใน 1 ปี'],
-    ['%s ปีที่แล้ว', 'ใน %s ปี'],
-  ][index];
-};
-
-/**
- * tr (Turkish)
- */
-export const tr = function(number, index) {
-  return [
-    ['az önce', 'şimdi'],
-    ['%s saniye önce', '%s saniye içinde'],
-    ['1 dakika önce', '1 dakika içinde'],
-    ['%s dakika önce', '%s dakika içinde'],
-    ['1 saat önce', '1 saat içinde'],
-    ['%s saat önce', '%s saat içinde'],
-    ['1 gün önce', '1 gün içinde'],
-    ['%s gün önce', '%s gün içinde'],
-    ['1 hafta önce', '1 hafta içinde'],
-    ['%s hafta önce', '%s hafta içinde'],
-    ['1 ay önce', '1 ay içinde'],
-    ['%s ay önce', '%s ay içinde'],
-    ['1 yıl önce', '1 yıl içinde'],
-    ['%s yıl önce', '%s yıl içinde'],
-  ][index];
-};
-
-/**
- * uk (Ukrainian)
- */
-export const uk = function(number, index) {
-  const seconds =
-    formatNum.bind(null, 'секунду', '%s секунду', '%s секунди', '%s секунд');
-  const minutes =
-    formatNum.bind(null, 'хвилину', '%s хвилину', '%s хвилини', '%s хвилин');
-  const hours =
-    formatNum.bind(null, 'годину', '%s годину', '%s години', '%s годин');
-  const days =
-    formatNum.bind(null, 'день', '%s день', '%s дні', '%s днів');
-  const weeks =
-    formatNum.bind(null, 'тиждень', '%s тиждень', '%s тиждні', '%s тижднів');
-  const months =
-    formatNum.bind(null, 'місяць', '%s місяць', '%s місяці', '%s місяців');
-  const years =
-    formatNum.bind(null, 'рік', '%s рік', '%s роки', '%s років');
-
-  switch (index) {
-    case 0: return ['щойно', 'через декілька секунд'];
-    case 1: return [seconds(number) + ' тому', 'через ' + seconds(number)];
-    case 2:
-    case 3: return [minutes(number) + ' тому', 'через ' + minutes(number)];
-    case 4:
-    case 5: return [hours(number) + ' тому', 'через ' + hours(number)];
-    case 6:
-    case 7: return [days(number) + ' тому', 'через ' + days(number)];
-    case 8:
-    case 9: return [weeks(number) + ' тому', 'через ' + weeks(number)];
-    case 10:
-    case 11: return [months(number) + ' тому', 'через ' + months(number)];
-    case 12:
-    case 13: return [years(number) + ' тому', 'через ' + years(number)];
-    default: return ['', ''];
-  }
-
-  function formatNum(f1, f, s, t, n) {
-    const n10 = n % 10;
-    let str = t;
-
-    if (n === 1) {
-      str = f1;
-    } else if (n10 === 1 && n > 20) {
-      str = f;
-    } else if (n10 > 1 && n10 < 5 && (n > 20 || n < 10)) {
-      str = s;
-    }
-    return str;
-  }
-};
-
-/**
- * vi (Vietnamese)
- */
-export const vi = function(number, index) {
-  return [
-    ['vừa xong', 'một lúc'],
-    ['%s giây trước', 'trong %s giây'],
-    ['1 phút trước', 'trong 1 phút'],
-    ['%s phút trước', 'trong %s phút'],
-    ['1 giờ trước', 'trong 1 giờ'],
-    ['%s giờ trước', 'trong %s giờ'],
-    ['1 ngày trước', 'trong 1 ngày'],
-    ['%s ngày trước', 'trong %s ngày'],
-    ['1 tuần trước', 'trong 1 tuần'],
-    ['%s tuần trước', 'trong %s tuần'],
-    ['1 tháng trước', 'trong 1 tháng'],
-    ['%s tháng trước', 'trong %s tháng'],
-    ['1 năm trước', 'trong 1 năm'],
-    ['%s năm trước', 'trong %s năm'],
-  ][index];
-};
-
-/**
- * zhCN (Chinese)
- */
-export const zhCN = function(number, index) {
-  return [
-    ['刚刚', '片刻后'],
-    ['%s秒前', '%s秒后'],
-    ['1分钟前', '1分钟后'],
-    ['%s分钟前', '%s分钟后'],
-    ['1小时前', '1小时后'],
-    ['%s小时前', '%s小时后'],
-    ['1天前', '1天后'],
-    ['%s天前', '%s天后'],
-    ['1周前', '1周后'],
-    ['%s周前', '%s周后'],
-    ['1月前', '1月后'],
-    ['%s月前', '%s月后'],
-    ['1年前', '1年后'],
-    ['%s年前', '%s年后'],
-  ][index];
-};
-
-/**
- * zhTW (Taiwanese)
- */
-export const zhTW = function(number, index) {
-  return [
-    ['剛剛', '片刻後'],
-    ['%s秒前', '%s秒後'],
-    ['1分鐘前', '1分鐘後'],
-    ['%s分鐘前', '%s分鐘後'],
-    ['1小時前', '1小時後'],
-    ['%s小時前', '%s小時後'],
-    ['1天前', '1天後'],
-    ['%s天前', '%s天後'],
-    ['1周前', '1周後'],
-    ['%s周前', '%s周後'],
-    ['1月前', '1月後'],
-    ['%s月前', '%s月後'],
-    ['1年前', '1年後'],
-    ['%s年前', '%s年後'],
-  ][index];
-};
diff --git a/third_party/timeagojs/timeago.js b/third_party/timeagojs/timeago.js
deleted file mode 100644
index dce1a452a5777..0000000000000
--- a/third_party/timeagojs/timeago.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * Copyright (c) 2016 hustcc
- * License: MIT
- * Version: v3.0.0
- * https://github.com/hustcc/timeago.js
- */
-
-const locales = {};
-
-import {ar} from './timeago-locales';
-import {be} from './timeago-locales';
-import {bg} from './timeago-locales';
-import {ca} from './timeago-locales';
-import {da} from './timeago-locales';
-import {de} from './timeago-locales';
-import {el} from './timeago-locales';
-import {en} from './timeago-locales';
-import {enShort} from './timeago-locales';
-import {es} from './timeago-locales';
-import {eu} from './timeago-locales';
-import {fi} from './timeago-locales';
-import {fr} from './timeago-locales';
-import {he} from './timeago-locales';
-import {hu} from './timeago-locales';
-import {inBG} from './timeago-locales';
-import {inHI} from './timeago-locales';
-import {inID} from './timeago-locales';
-import {it} from './timeago-locales';
-import {ja} from './timeago-locales';
-import {ko} from './timeago-locales';
-import {ml} from './timeago-locales';
-import {nbNO} from './timeago-locales';
-import {nl} from './timeago-locales';
-import {nnNO} from './timeago-locales';
-import {pl} from './timeago-locales';
-import {ptBR} from './timeago-locales';
-import {ro} from './timeago-locales';
-import {ru} from './timeago-locales';
-import {sv} from './timeago-locales';
-import {ta} from './timeago-locales';
-import {th} from './timeago-locales';
-import {tr} from './timeago-locales';
-import {uk} from './timeago-locales';
-import {vi} from './timeago-locales';
-import {zhCN} from './timeago-locales';
-import {zhTW} from './timeago-locales';
-
-// second, minute, hour, day, week, month, year(365 days)
-const SEC_ARRAY = [60, 60, 24, 7, 365 / 7 / 12, 12];
-const SEC_ARRAY_LEN = 6;
-
-// format Date / string / timestamp to Date instance.
-function toDate(input) {
-  if (input instanceof Date) {
-    return input;
-  };
-  if (!isNaN(input)) {
-    return new Date(toInt(input));
-  }
-  if (/^\d+$/.test(input)) {
-    return new Date(toInt(input));
-  }
-  input = (input || '').trim().replace(/\.\d+/, '') // remove milliseconds
-    .replace(/-/, '/').replace(/-/, '/')
-    .replace(/(\d)T(\d)/, '$1 $2').replace(/Z/, ' UTC') // 2017-2-5T3:57:52Z -> 2017-2-5 3:57:52UTC
-    .replace(/([\+\-]\d\d)\:?(\d\d)/, ' $1$2'); // -04:00 -> -0400
-  return new Date(input);
-}
-
-// change f into int, remove decimal. Just for code compression
-function toInt(f) {
-  return parseInt(f, 10);
-}
-
-// format the diff second to *** time ago, with setting locale
-function formatDiff(diff, locale) {
-  // if locale is not exist, use defaultLocale.
-  // if defaultLocale is not exist, use build-in `en`.
-  // be sure of no error when locale is not exist.
-  locale = locales[locale] ? locale : 'en';
-  // if (! locales[locale]) locale = defaultLocale;
-  let i = 0;
-  const agoin = diff < 0 ? 1 : 0; // timein or timeago
-  const totalSec = diff = Math.abs(diff);
-
-  for (; diff >= SEC_ARRAY[i] && i < SEC_ARRAY_LEN; i++) {
-    diff /= SEC_ARRAY[i];
-  }
-  diff = toInt(diff);
-  i *= 2;
-
-  if (diff > (i === 0 ? 9 : 1)) {
-    i += 1;
-  }
-  return locales[locale](diff, i, totalSec)[agoin].replace('%s', diff);
-}
-
-// calculate the diff second between date to be formated an now date.
-function diffSec(date) {
-  const nowDate = new Date();
-  return (nowDate - toDate(date)) / 1000;
-}
-
-/**
- * timeago: the function to get `timeago` instance.
- * - nowDate: the relative date, default is new Date().
- * - defaultLocale: the default locale, default is en. if your set it, then the `locale` parameter of format is not needed of you.
- **/
-export function timeago(date, locale) {
-  return formatDiff(diffSec(date), locale);
-}
-
-/**
- * register: register a new language locale
- * - locale: locale name, e.g. en / zh_CN, notice the standard.
- * - localeFunc: the locale process function
- **/
-timeago.register = function(locale, localeFunc) {
-  locales[locale] = localeFunc;
-};
-
-timeago.register('ar', ar);
-timeago.register('be', be);
-timeago.register('bg', bg);
-timeago.register('ca', ca);
-timeago.register('da', da);
-timeago.register('de', de);
-timeago.register('el', el);
-timeago.register('en', en);
-timeago.register('enShort', enShort);
-timeago.register('es', es);
-timeago.register('eu', eu);
-timeago.register('fi', fi);
-timeago.register('fr', fr);
-timeago.register('he', he);
-timeago.register('hu', hu);
-timeago.register('inBG', inBG);
-timeago.register('inHI', inHI);
-timeago.register('inID', inID);
-timeago.register('it', it);
-timeago.register('ja', ja);
-timeago.register('ko', ko);
-timeago.register('ml', ml);
-timeago.register('nbNO', nbNO);
-timeago.register('nl', nl);
-timeago.register('nnNO', nnNO);
-timeago.register('pl', pl);
-timeago.register('ptBR', ptBR);
-timeago.register('ro', ro);
-timeago.register('ru', ru);
-timeago.register('sv', sv);
-timeago.register('ta', ta);
-timeago.register('th', th);
-timeago.register('tr', tr);
-timeago.register('uk', uk);
-timeago.register('vi', vi);
-timeago.register('zhCN', zhCN);
-timeago.register('zhTW', zhTW);
diff --git a/third_party/web-animations-externs/web_animations.js b/third_party/web-animations-externs/web_animations.js
index 041da050b1ce5..be8084ab2a84f 100644
--- a/third_party/web-animations-externs/web_animations.js
+++ b/third_party/web-animations-externs/web_animations.js
@@ -80,8 +80,7 @@ class CSSSupportsRule {
 }
 
 /**
+ * @see https://developers.google.com/web/updates/2018/10/animation-worklet
+ * @type {!Worklet|undefined}
  */
-CSS.animationWorklet = {
-  /** @param {string} module */
-  addModule: function(module) {}
-};
+CSS.animationWorklet;
diff --git a/third_party/zuho/README.amp b/third_party/zuho/README.amp
new file mode 100644
index 0000000000000..004ebb380eedf
--- /dev/null
+++ b/third_party/zuho/README.amp
@@ -0,0 +1,21 @@
+URL: https://github.com/y-fujii/zuho
+License: MIT License
+License File: https://opensource.org/licenses/MIT
+
+Description:
+zuho.js - WebGL equirectangular image viewer
+
+The AMP 360 plugin uses some of the shaders and overall WebGL logic initially implemented in zuho.js.
+
+Files in this directory (copied from https://github.com/y-fujii/zuho):
+- zuho.js (from https://github.com/y-fujii/zuho/commit/083a0183c218e388690f48253474d95ab81ef28b)
+
+Local Modifications:
+- Removed all event handling, CSS, menu UI and unused projection mappings
+- Refactored into module, exporting Renderer and Matrix classes
+- Removed String.raw calls (breaks the build)
+- Swapped X-axis projection (original code was horizontally mirroring the source image)
+- Added setImageOrientation(heading, pitch, roll) method to correct the orientation of the texture (credits: Nicolas Barradeau - https://github.com/nicoptere).
+- Added init function for setting up resources.
+- Added properties defined on init to the constructor.
+- Added flag to enable preserveDrawingBuffer for visual tests.
diff --git a/third_party/zuho/zuho.js b/third_party/zuho/zuho.js
new file mode 100644
index 0000000000000..79e785c9551ca
--- /dev/null
+++ b/third_party/zuho/zuho.js
@@ -0,0 +1,291 @@
+// (c) Yasuhiro Fujii <y-fujii at mimosa-pudica.net>, under MIT License.
+// Refactored and trimmed off for AMP project needs.
+
+const SHADERS = {
+  fragSourceCommon: `
+    #ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp   float;
+    #else
+      precision mediump float;
+    #endif
+
+    const   float     pi = 3.14159265359;
+    uniform float     uPxSize;
+    uniform mat3      uRot;
+    uniform sampler2D uTex;
+    varying vec2      vPos;
+
+    vec4 sample(float dx, float dy) {
+      vec3 q = vec3(vPos + uPxSize * vec2(dx, dy), -1.0);
+      vec3 dir = normalize(uRot * q);
+      float u = (-0.5 / pi) * atan(dir[1], dir[0]) + 0.5;
+      float v = (1.0 / pi) * acos(dir[2]);
+      return texture2D(uTex, vec2(u, v));
+    }
+  `,
+  fragSourceFast: `
+    void main() {
+      gl_FragColor = sample(0.0, 0.0);
+    }
+  `,
+  fragSourceSlow: `
+    vec4 sampleSq(float dx, float dy) {
+      vec4 s = sample(dx, dy);
+      return vec4(s.xyz * s.xyz, s.w);
+    }
+
+    void main() {
+      // (2, 3) halton vector sequences.
+      vec4 acc = (1.0 / 16.0) * (
+        (((sampleSq(1.0 / 2.0 - 0.5,  1.0 / 3.0 - 0.5) +
+           sampleSq(1.0 / 4.0 - 0.5,  2.0 / 3.0 - 0.5)) +
+          (sampleSq(3.0 / 4.0 - 0.5,  1.0 / 9.0 - 0.5) +
+           sampleSq(1.0 / 8.0 - 0.5,  4.0 / 9.0 - 0.5))) +
+         ((sampleSq(5.0 / 8.0 - 0.5,  7.0 / 9.0 - 0.5) +
+           sampleSq(3.0 / 8.0 - 0.5,  2.0 / 9.0 - 0.5)) +
+          (sampleSq(7.0 / 8.0 - 0.5,  5.0 / 9.0 - 0.5) +
+           sampleSq(1.0 / 16.0 - 0.5,  8.0 / 9.0 - 0.5)))) +
+        (((sampleSq(9.0 / 16.0 - 0.5,  1.0 / 27.0 - 0.5) +
+           sampleSq(5.0 / 16.0 - 0.5, 10.0 / 27.0 - 0.5)) +
+          (sampleSq(13.0 / 16.0 - 0.5, 19.0 / 27.0 - 0.5) +
+           sampleSq(3.0 / 16.0 - 0.5,  4.0 / 27.0 - 0.5))) +
+         ((sampleSq(11.0 / 16.0 - 0.5, 13.0 / 27.0 - 0.5) +
+           sampleSq(7.0 / 16.0 - 0.5, 22.0 / 27.0 - 0.5)) +
+          (sampleSq(15.0 / 16.0 - 0.5,  7.0 / 27.0 - 0.5) +
+           sampleSq(1.0 / 32.0 - 0.5, 16.0 / 27.0 - 0.5))))
+     );
+      gl_FragColor = vec4(sqrt(acc.xyz), acc.w);
+    }
+  `,
+  vertSource: `
+    uniform   vec2 uScale;
+    attribute vec2 aPos;
+    varying   vec2 vPos;
+
+    void main() {
+      gl_Position = vec4(aPos, 0.0, 1.0);
+      vPos = uScale * aPos;
+    }
+  `,
+};
+
+export class Matrix {
+  static mul(n, x, y) {
+    console.assert(x.length == n * n && y.length == n * n);
+    const z = new Float32Array(n * n);
+    for (let i = 0; i < n; ++i) {
+      for (let j = 0; j < n; ++j) {
+        let sum = 0.0;
+        for (let k = 0; k < n; ++k) {
+          sum += x[i * n + k] * y[k * n + j];
+        }
+        z[i * n + j] = sum;
+      }
+    }
+    return z;
+  }
+
+  static identity(n) {
+    const z = new Float32Array(n * n);
+    z.fill(0.0);
+    for (let i = 0; i < n; ++i) {
+      z[i * n + i] = 1.0;
+    }
+    return z;
+  }
+
+  static rotation(n, i, j, arg) {
+    console.assert(i < n && j < n);
+    const z = Matrix.identity(n);
+    const cos = Math.cos(arg);
+    const sin = Math.sin(arg);
+    z[i * n + i] = +cos;
+    z[i * n + j] = -sin;
+    z[j * n + i] = +sin;
+    z[j * n + j] = +cos;
+    return z;
+  }
+};
+
+export class Renderer {
+  constructor(canvas) {
+    const params = {
+      alpha: true,
+      depth: false,
+      stencil: false,
+      antialias: false,
+      premultipliedAlpha: true,
+      preserveDrawingBuffer: window.__AMP_TEST || false,
+    };
+    this.gl = canvas.getContext('webgl', params) ||
+        canvas.getContext('experimental-webgl', params);
+
+    this.canvas = canvas;
+    
+    this.rotation = null;
+    this.scale = 1;
+    this.orientation = null;
+
+    this.vertShader = null;
+    this.fragShaderFast = null;
+    this.fragShaderSlow = null;
+    this.progFast = null;
+    this.progSlow = null;
+    this.vbo = null;
+    this.tex = null;
+  }
+
+  init() {
+    const gl = this.gl;
+    
+    this.vertShader = gl.createShader(gl.VERTEX_SHADER);
+    this.fragShaderFast = gl.createShader(gl.FRAGMENT_SHADER);
+    this.fragShaderSlow = gl.createShader(gl.FRAGMENT_SHADER);
+    this.progFast = gl.createProgram();
+    this.progSlow = gl.createProgram();
+    this.compile_(this.vertShader, SHADERS.vertSource);
+    gl.attachShader(this.progFast, this.vertShader);
+    gl.attachShader(this.progFast, this.fragShaderFast);
+    gl.attachShader(this.progSlow, this.vertShader);
+    gl.attachShader(this.progSlow, this.fragShaderSlow);
+    this.setMapping();
+    this.setCamera(Matrix.identity(3), 1.0);
+
+    this.vbo = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
+    const vertices =
+        new Float32Array([-1.0, -1.0, +1.0, -1.0, -1.0, +1.0, +1.0, +1.0]);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+
+    this.tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.tex);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    
+    this.resize();
+  }
+          
+  setImage(img) {
+    const gl = this.gl;
+    gl.bindTexture(gl.TEXTURE_2D, this.tex);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+  }
+
+  setImageOrientation(heading = 0, pitch = 0, roll = 0) {
+    const RAD = Math.PI / 180;
+    this.orientation =
+        this.euler_(RAD * heading, RAD * pitch, RAD * roll);
+  }
+
+  setMapping(code = '') {
+    this.compile_(
+        this.fragShaderFast,
+        SHADERS.fragSourceCommon + SHADERS.fragSourceFast + code);
+    this.compile_(
+        this.fragShaderSlow,
+        SHADERS.fragSourceCommon + SHADERS.fragSourceSlow + code);
+    this.link_(this.progFast);
+    this.link_(this.progSlow);
+  }
+
+  setCamera(rot, scale) {
+    this.rotation = rot;
+    this.scale = scale;
+  }
+
+  resize() {
+    const rect = this.canvas.getBoundingClientRect();
+    this.canvas.width = rect.width * devicePixelRatio;
+    this.canvas.height = rect.height * devicePixelRatio;
+    this.gl.viewport(0.0, 0.0, this.canvas.width, this.canvas.height);
+  }
+
+  render(fast) {
+    const gl = this.gl;
+
+    gl.disable(gl.BLEND);
+
+    const prog = fast ? this.progFast : this.progSlow;
+    gl.useProgram(prog);
+    const f =
+        this.scale / Math.sqrt(gl.drawingBufferWidth * gl.drawingBufferHeight);
+    const sx = f * gl.drawingBufferWidth;
+    const sy = f * gl.drawingBufferHeight;
+    gl.uniformMatrix3fv(
+        gl.getUniformLocation(prog, 'uRot'), false, this.rotation);
+    gl.uniform2f(gl.getUniformLocation(prog, 'uScale'), sx, sy);
+    gl.uniform1f(gl.getUniformLocation(prog, 'uPxSize'), 2.0 * f);
+
+    if (!this.orientation) {
+      this.orientation = Matrix.identity(3);
+    }
+    gl.uniformMatrix3fv(
+        gl.getUniformLocation(prog, 'uRot'), false,
+        Matrix.mul(3, this.rotation, this.orientation));
+
+    gl.enableVertexAttribArray(0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.tex);
+    gl.uniform1i(gl.getUniformLocation(prog, 'uTex'), 0);
+
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    gl.useProgram(null);
+  }
+
+  /** @private */
+  compile_(shader, src) {
+    const gl = this.gl;
+    gl.shaderSource(shader, src);
+    gl.compileShader(shader);
+    const log = gl.getShaderInfoLog(shader);
+    if (log.length > 0) {
+      console.log(log);
+    }
+  }
+
+  /** @private */
+  link_(prog) {
+    const gl = this.gl;
+    gl.linkProgram(prog);
+    const log = gl.getProgramInfoLog(prog);
+    if (log.length > 0) {
+      console.log(log);
+    }
+  }
+
+  /** @private */
+  euler_(heading, pitch, roll) {
+    const te = Matrix.identity(3);
+    const x = -roll, y = -pitch, z = -heading;
+
+    const a = Math.cos(x), b = Math.sin(x);
+    const c = Math.cos(y), d = Math.sin(y);
+    const e = Math.cos(z), f = Math.sin(z);
+
+    const ae = a * e, af = a * f, be = b * e, bf = b * f;
+
+    te[0] = c * e;
+    te[3] = -c * f;
+    te[6] = d;
+    te[1] = af + be * d;
+    te[4] = ae - bf * d;
+    te[7] = -b * c;
+    te[2] = bf - ae * d;
+    te[5] = be + af * d;
+    te[8] = a * c;
+
+    return te;
+  }
+}
diff --git a/tools/experiments/OWNERS b/tools/experiments/OWNERS
index f70dd979f4d9f..b73fec1fefc1f 100644
--- a/tools/experiments/OWNERS
+++ b/tools/experiments/OWNERS
@@ -1,12 +1,11 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
       owners: [
         {name: 'ampproject/wg-infra'},
-        {name: 'ampproject/wg-runtime'},
         {name: 'ampproject/wg-performance'},
       ],
     },
diff --git a/tools/experiments/README.md b/tools/experiments/README.md
index 1a9a20c58356f..59d690fcdc5e8 100644
--- a/tools/experiments/README.md
+++ b/tools/experiments/README.md
@@ -67,8 +67,8 @@ To prevent race conditions caused from loading the runtime and an inline script
 
 To add a new experiment:
 
-1. Add the new experiment to this [list](https://github.com/ampproject/amphtml/blob/master/tools/experiments/experiments-config.js).
-1. (This is rare, most new experiments can skip this step) Decide if the experiment should allow document level opt-in. One top consideration is that switching the experiment on/off should not break any document. For example, experimental custom elements should never be white listed, as any documents start using it will get broken if the we switch it off. Add it to `allow-doc-opt-in` in `prod-config.json` and `canary-config.json` if so.
+1. Add the new experiment to this [list](https://github.com/ampproject/amphtml/blob/main/tools/experiments/experiments-config.js).
+1. (This is rare, most new experiments can skip this step) Decide if the experiment should allow document level opt-in. One top consideration is that switching the experiment on/off should not break any document. For example, experimental custom elements should never be allowed, as any documents start using it will get broken if the we switch it off. Add it to `allow-doc-opt-in` in `prod-config.json` and `canary-config.json` if so.
 1. Use it like this:
 
 ```javascript
@@ -79,3 +79,14 @@ if (expOn) {
   // experiment is on, do stuff
 }
 ```
+
+## Removing an experiment
+
+Experiments may be removed by following references to their id. To start off
+by finding those references, run:
+
+```bash
+amp sweep-experiments --experiment=my-experiment
+```
+
+This creates a starter commit history to remove the experiment. [Refer to the guide for this tool](../../build-system/tasks/sweep-experiments/README.md) for details on how to continue removal of the experiment.
diff --git a/tools/experiments/experiments-config.js b/tools/experiments/experiments-config.js
index 31c32d00264a0..35398cbbe7240 100644
--- a/tools/experiments/experiments-config.js
+++ b/tools/experiments/experiments-config.js
@@ -30,12 +30,6 @@ export const EXPERIMENTS = [
     spec: 'https://github.com/ampproject/amphtml/issues/2934',
     cleanupIssue: 'https://github.com/ampproject/amphtml/issues/4005',
   },
-  {
-    id: 'amp-access-iframe',
-    name: 'AMP Access iframe prototype (launched)',
-    spec: 'https://github.com/ampproject/amphtml/issues/13287',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/13287',
-  },
   {
     id: 'amp-access-server',
     name: 'AMP Access server side prototype',
@@ -53,115 +47,40 @@ export const EXPERIMENTS = [
     name: 'AMP extension for a basic, flexible, carousel',
     spec: 'https://github.com/ampproject/amphtml/issues/20595',
   },
-  {
-    id: 'amp-google-vrview-image',
-    name: 'AMP VR Viewer for images via Google VRView',
-    spec:
-      'https://github.com/ampproject/amphtml/blob/master/extensions/' +
-      'amp-google-vrview-image/amp-google-vrview-image.md',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/3996',
-  },
-  {
-    id: 'amp-consent-restrict-fullscreen',
-    name: 'AMP consent restrict fullscreen API before user interaction',
-    spec: 'https://github.com/ampproject/amphtml/issues/26432',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/26432',
-  },
   {
     id: 'amp-sidebar-v2',
     name: 'Updated sidebar component with nested menu and animations',
     spec: 'https://github.com/ampproject/amphtml/issues/25049',
     cleanupIssue: 'https://github.com/ampproject/amphtml/issues/25022',
   },
-  {
-    id: 'ampdoc-fie',
-    name: 'Install AmpDoc on FIE level',
-    spec: 'https://github.com/ampproject/amphtml/issues/22734',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/22733',
-  },
   {
     id: 'no-auth-in-prerender',
     name: 'Delay amp-access auth request until doc becomes visible.',
     spec: '',
     cleanupIssue: 'https://github.com/ampproject/amphtml/issues/3824',
   },
-  {
-    id: 'amp-share-tracking',
-    name: 'AMP Share Tracking',
-    spec: 'https://github.com/ampproject/amphtml/issues/3135',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/5167',
-  },
   {
     id: 'amp-viz-vega',
     name: 'AMP Visualization using Vega grammar',
     spec: 'https://github.com/ampproject/amphtml/issues/3991',
     cleanupIssue: 'https://github.com/ampproject/amphtml/issues/4171',
   },
-  {
-    id: 'cache-service-worker',
-    name: 'AMP Cache Service Worker',
-    spec: 'https://github.com/ampproject/amphtml/issues/1199',
-  },
   {
     id: 'amp-lightbox-a4a-proto',
     name: 'Allows the new lightbox experience to be used in A4A (prototype).',
     spec: 'https://github.com/ampproject/amphtml/issues/7743',
   },
-  {
-    id: 'amp-list-init-from-state',
-    name: 'Allows amp-list to initialize off of amp-state',
-    spec: 'https://github.com/ampproject/amphtml/issues/26009',
-  },
-  {
-    id: 'amp-playbuzz',
-    name: 'AMP extension for playbuzz items (launched)',
-    spec: 'https://github.com/ampproject/amphtml/issues/6106',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/pull/6351',
-  },
-  {
-    id: 'amp-action-macro',
-    name: 'AMP extension for defining action macros',
-    spec: 'https://github.com/ampproject/amphtml/issues/19494',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/pull/19495',
-  },
   {
     id: 'ios-fixed-no-transfer',
     name: 'Remove fixed transfer from iOS 12.2 and up',
     spec: 'https://github.com/ampproject/amphtml/issues/22220',
     cleanupIssue: 'https://github.com/ampproject/amphtml/issues/22220',
   },
-  {
-    id: 'chunked-amp',
-    name: "Split AMP's loading phase into chunks",
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/5535',
-  },
-  {
-    id: 'pump-early-frame',
-    name:
-      'If applicable, let the browser paint the current frame before ' +
-      'executing the callback.',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/8237',
-  },
-  {
-    id: 'version-locking',
-    name:
-      'Force all extensions to have the same release ' +
-      'as the main JS binary',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/8236',
-  },
   {
     id: 'web-worker',
     name: 'Web worker for background processing',
     cleanupIssue: 'https://github.com/ampproject/amphtml/issues/7156',
   },
-  {
-    id: 'jank-meter',
-    name: 'Display jank meter',
-  },
-  {
-    id: 'as-use-attr-for-format',
-    name: 'Use slot width/height attribute for AdSense size format',
-  },
   {
     id: 'input-debounced',
     name: 'A debounced input event for AMP actions',
@@ -184,18 +103,6 @@ export const EXPERIMENTS = [
     spec: 'https://github.com/ampproject/amphtml/issues/11329',
     cleanupIssue: 'https://github.com/ampproject/amphtml/issues/14357',
   },
-  {
-    id: 'disable-amp-story-default-media',
-    name: 'Removes default media for amp-story',
-    spec: 'https://github.com/ampproject/amphtml/issues/14535',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/14535',
-  },
-  {
-    id: 'amp-story-responsive-units',
-    name: 'Scale pages in amp-story by rewriting responsive units',
-    spec: 'https://github.com/ampproject/amphtml/issues/15955',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/15960',
-  },
   {
     id: 'amp-next-page',
     name: 'Document level next page recommendations and infinite scroll',
@@ -229,20 +136,6 @@ export const EXPERIMENTS = [
     spec: 'https://github.com/ampproject/amphtml/issues/14061',
     cleanupIssue: 'https://github.com/ampproject/amphtml/issues/17161',
   },
-  {
-    id: 'hidden-mutation-observer',
-    name: "Enables FixedLayer's hidden-attribute mutation observer",
-    spec: 'https://github.com/ampproject/amphtml/issues/17475',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/18897',
-  },
-  {
-    id: 'amp-user-location',
-    name:
-      'Expose the browser geolocation API for latitude and longitude ' +
-      'access after user interaction and approval',
-    spec: 'https://github.com/ampproject/amphtml/issues/8929',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/22177',
-  },
   {
     id: 'untrusted-xhr-interception',
     name:
@@ -251,12 +144,6 @@ export const EXPERIMENTS = [
     spec: 'N/A',
     cleanupIssue: 'N/A',
   },
-  {
-    id: 'pausable-iframe',
-    name: 'Use iframe freezing instead of recreating iframes.',
-    spec: 'https://github.com/ampproject/amphtml/issues/24110',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/24113',
-  },
   {
     id: 'adsense-ad-size-optimization',
     name:
@@ -265,26 +152,6 @@ export const EXPERIMENTS = [
     spec: 'https://github.com/ampproject/amphtml/issues/23568',
     cleanupIssue: 'https://github.com/ampproject/amphtml/issues/24165',
   },
-  {
-    id: 'fix-inconsistent-responsive-height-selection',
-    name: 'Fix inconsistent responsive height selection.',
-    spec: 'https://github.com/ampproject/amphtml/issues/24166',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/24167',
-  },
-  {
-    id: 'intersect-resources',
-    name: 'Use IntersectionObserver for resource scheduling.',
-    spec: 'https://github.com/ampproject/amphtml/issues/25428',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/26233',
-  },
-  {
-    id: 'layoutbox-invalidate-on-scroll',
-    name:
-      'Invalidate the cached layoutboxes of elements nested in a scroller ' +
-      'after that scroller scrolls.',
-    spec: 'https://github.com/ampproject/amphtml/issues/24929',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/25203',
-  },
   {
     id: 'amp-stream-gallery',
     name: 'Enables component',
@@ -298,34 +165,64 @@ export const EXPERIMENTS = [
     cleanupIssue: 'https://github.com/ampproject/amphtml/issues/26823',
   },
   {
-    id: 'random-subdomains-for-safeframe',
-    name: 'Enable Random Subdomains for SafeFrame',
+    id: 'a4a-no-signing',
+    name: 'Remove signing requirement for AMPHTML ads',
+    spec: 'https://github.com/ampproject/amphtml/issues/27189',
   },
   {
-    id: 'analytics-chunks',
-    name: 'AMP Analytics Break long tasks to chunks (AMP docs only)',
-    spec: 'https://github.com/ampproject/amphtml/issues/28435',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/28435',
+    id: 'expand-json-targeting',
+    name: 'Allow CLIENT_ID in doubleclick json targeting feature',
+    spec: 'https://github.com/ampproject/amphtml/issues/25190',
   },
   {
-    id: 'analytics-chunks-inabox',
-    name: 'AMP Analytics Break long tasks to chunks (AMP Ads only)',
-    spec: 'https://github.com/ampproject/amphtml/issues/28435',
-    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/28435',
+    id: 'auto-ads-layout-callback',
+    name: 'Move ads placement into layoutCallback',
+    spec: 'https://github.com/ampproject/amphtml/issues/27068',
   },
   {
-    id: 'amp-ad-no-center-css',
-    name: 'Removing the centering css rule for amp-ad',
-    spec: 'https://github.com/ampproject/amphtml/issues/27095',
+    id: 'amp-cid-backup',
+    name: 'Backup AMP-generated CIDs to Storage.',
+    spec: 'https://github.com/ampproject/amphtml/issues/29484',
+    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/29484',
   },
   {
-    id: 'fie-init-chunking',
-    name: 'More chunking for friendly iframe initialization',
-    spec: 'https://github.com/ampproject/amphtml/issues/27584',
+    id: 'layout-aspect-ratio-css',
+    name: 'Responsive layouts implemented via aspect-ratio CSS',
+    spec: 'https://github.com/ampproject/amphtml/issues/30291',
   },
   {
-    id: 'a4a-no-signing',
-    name: 'Remove signing requirement for AMPHTML ads',
-    spec: 'https://github.com/ampproject/amphtml/issues/27189',
+    id: 'tcf-post-message-proxy-api',
+    name: 'Proxy for TCF PostMessageAPI to send TCData to 3p iframes',
+    spec: 'https://github.com/ampproject/amphtml/issues/30385',
+  },
+  {
+    id: 'dfp-render-on-idle-cwv-exp',
+    name: 'To measure the CWV impact of ads idle rendering',
+    spec: 'https://github.com/ampproject/amphtml/issues/31436',
+  },
+  {
+    id: 'amp-consent-granular-consent',
+    name: 'Client-side granular consent',
+    spec: 'https://github.com/ampproject/amphtml/issues/31607',
+  },
+  {
+    id: 'amp-story-page-attachment-ui-v2',
+    name: 'New UI for all new page attachments in stories format',
+    spec: 'https://github.com/ampproject/amphtml/projects/123',
+  },
+  {
+    id: 'flexible-bitrate',
+    name: 'Adaptive bitrate algorithm for videos on documents from the AMPProject CDN',
+    spec: 'https://github.com/ampproject/amphtml/projects/111',
+  },
+  {
+    id: 'story-ad-placements',
+    name: 'Optimization of story ad placements',
+    spec: 'https://github.com/ampproject/amphtml/issues/33147',
+  },
+  {
+    id: 'story-ad-auto-advance',
+    name: 'Auto advancing story ads',
+    spec: 'https://github.com/ampproject/amphtml/issues/33969',
   },
 ];
diff --git a/tools/experiments/experiments.html b/tools/experiments/experiments.html
index 5bbb8df0a1a74..e541b60a904cd 100644
--- a/tools/experiments/experiments.html
+++ b/tools/experiments/experiments.html
@@ -24,7 +24,7 @@
       padding-left: 0;
       padding-top: 18px;
       text-transform: uppercase;
-      width: 10%;
+      width: 100%;
       display: inline-block;
       padding: 10px 15px;
       text-decoration: none;
@@ -213,10 +213,7 @@
 <body>
   <header>
     <div class="tab header-title">
-      Accelerated
-      Mobile
-      Pages
-      Project
+      AMP Project
     </div>
   </header>
 
@@ -261,7 +258,7 @@ <h2>Release channels</h2>
         <input id="rtv" placeholder="E.g., 011912312359590" maxlength="15" type="text">
         <button id="rtv-submit" disabled>opt-in</button>
       </div>
-    </detail>
+    </details>
   </section>
 
   <!-- Only displayed on top-level cdn.ampproject.org. -->
diff --git a/tools/experiments/experiments.js b/tools/experiments/experiments.js
index 54f74a4097c5e..a266477eb1a1b 100644
--- a/tools/experiments/experiments.js
+++ b/tools/experiments/experiments.js
@@ -16,17 +16,17 @@
 
 import '../../src/polyfills';
 import '../../src/service/timer-impl';
-import {Deferred} from '../../src/utils/promise';
+import {Deferred} from '../../src/core/data-structures/promise';
 import {EXPERIMENTS} from './experiments-config';
 import {SameSite, getCookie, setCookie} from '../../src/cookies';
 import {devAssert, initLogConstructor, setReportError} from '../../src/log';
 import {getMode} from '../../src/mode';
 import {isExperimentOn, toggleExperiment} from '../../src/experiments';
 import {listenOnce} from '../../src/event-helper';
-import {onDocumentReady} from '../../src/document-ready';
+import {onDocumentReady} from '../../src/core/document-ready';
 import {parseUrlDeprecated} from '../../src/url';
 //TODO(@cramforce): For type. Replace with forward declaration.
-import {reportError} from '../../src/error';
+import {reportError} from '../../src/error-reporting';
 
 initLogConstructor();
 setReportError(reportError);
@@ -73,20 +73,17 @@ const CHANNELS = [
   {
     id: EXPERIMENTAL_CHANNEL_ID,
     name: 'AMP Experimental Channel (more info)',
-    spec:
-      'https://github.com/ampproject/amphtml/blob/master/contributing/release-schedule.md#amp-experimental-and-beta-channels',
+    spec: 'https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md#amp-experimental-and-beta-channels',
   },
   {
     id: BETA_CHANNEL_ID,
     name: 'AMP Beta Channel (more info)',
-    spec:
-      'https://github.com/ampproject/amphtml/blob/master/contributing/release-schedule.md#amp-experimental-and-beta-channels',
+    spec: 'https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md#amp-experimental-and-beta-channels',
   },
   {
     id: NIGHTLY_CHANNEL_ID,
     name: 'AMP Nightly Channel (more info)',
-    spec:
-      'https://github.com/ampproject/amphtml/blob/master/contributing/release-schedule.md#amp-experimental-and-beta-channels',
+    spec: 'https://github.com/ampproject/amphtml/blob/main/docs/release-schedule.md#amp-experimental-and-beta-channels',
   },
 ];
 
@@ -393,7 +390,7 @@ function showConfirmation_(message, callback) {
  */
 function getAmpConfig() {
   const deferred = new Deferred();
-  const {promise, resolve, reject} = deferred;
+  const {promise, reject, resolve} = deferred;
   const xhr = new XMLHttpRequest();
   xhr.addEventListener('load', () => {
     resolve(xhr.responseText);
diff --git a/validator/.gitignore b/validator/.gitignore
index 1180a740ad7e4..fcb834e0d5cd7 100644
--- a/validator/.gitignore
+++ b/validator/.gitignore
@@ -4,3 +4,5 @@ dist/
 node_modules/
 # The Python interpreter generates these.
 *.pyc
+# These directories are generated by bazel
+bazel-*
diff --git a/validator/BUILD b/validator/BUILD
index 8cfabb4416325..8beb39c6c39aa 100644
--- a/validator/BUILD
+++ b/validator/BUILD
@@ -14,3 +14,28 @@ cc_proto_library(
     name = "validator_cc_proto",
     deps = [":validator-proto"],
 )
+
+# <validator rules protoascii>
+# The validator rules, stored in a series of .protoascii files.
+# This set of rules is what is released to cdn.ampproject.org/v0/validator.js
+genrule(
+    name = "validator-all-protoascii-gen",
+    srcs = [
+        "validator-main.protoascii",
+        "validator-css.protoascii",
+        "validator-svg.protoascii",
+        "@amphtml-extensions//:validator-extensions-protoascii",
+    ],
+    outs = ["validator.protoascii"],
+    cmd = ("cat $(SRCS) > $(OUTS)"),
+)
+# </validator rules all protoascii>
+
+filegroup(
+    name = "testdata_files",
+    srcs = glob([
+        "testdata/*/*.html",
+        "testdata/*/*.out",
+        "testdata/*/*.out.cpponly",
+    ]),
+)
diff --git a/validator/OWNERS b/validator/OWNERS
index 30b46513b2b33..ce2c618056a37 100644
--- a/validator/OWNERS
+++ b/validator/OWNERS
@@ -1,10 +1,14 @@
 // For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
 
 {
   rules: [
     {
-      owners: [{name: 'ampproject/wg-caching', notify: true}],
+      owners: [{name: 'ampproject/wg-caching', required: true}],
+    },
+    {
+      pattern: '{package.json,package-lock.json,WORKSPACE}',
+      owners: [{name: 'ampproject/wg-caching', required: false}],
     },
   ],
 }
diff --git a/validator/README.md b/validator/README.md
index 0258a456c0f4c..dc9758d7891ab 100644
--- a/validator/README.md
+++ b/validator/README.md
@@ -17,14 +17,14 @@ limitations under the License.
 # AMP HTML ⚡ Validator
 
 A validator for the
-[AMP HTML format](https://github.com/ampproject/amphtml/blob/master/README.md).
+[AMP HTML format](https://github.com/ampproject/amphtml/blob/main/README.md).
 
 If you just want to validate a page, please see
 [our documentation over at amp.dev](https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp).
 
 ## Chrome Extension
 
-Please see [chromeextension/README.md](https://github.com/ampproject/amphtml/blob/master/validator/chromeextension/README.md).
+Please see [js/chromeextension/README.md](https://github.com/ampproject/amphtml/blob/main/validator/js/chromeextension/README.md).
 
 ## Visual Studio Code Extension
 
@@ -33,11 +33,11 @@ An extension for Visual Studio Code
 
 ## Command Line Tool and Node.js API
 
-Please see [nodejs/README.md](https://github.com/ampproject/amphtml/blob/master/validator/nodejs/README.md).
+Please see [js/nodejs/README.md](https://github.com/ampproject/amphtml/blob/main/validator/js/nodejs/README.md).
 
 ## Web UI
 
-Please see [webui/README.md](https://github.com/ampproject/amphtml/blob/master/validator/webui/README.md).
+Please see [js/webui/README.md](https://github.com/ampproject/amphtml/blob/main/validator/js/webui/README.md).
 
 ## JSON
 
@@ -49,8 +49,8 @@ rely on them in a production environment.
 ## Building a Custom Validator
 
 This is only useful for development - e.g. when making changes to
-`engine/validator.js` or when authoring an AMP extension, and it's rough around
-the edges. Below are instructions for Linux Ubuntu 14.
+`js/engine/validator.js` or when authoring an AMP extension, and it's rough
+around the edges. Below are instructions for Linux Ubuntu 14.
 
 ## Installation
 
@@ -58,12 +58,13 @@ the edges. Below are instructions for Linux Ubuntu 14.
 
 Install these packages using apt-get:
 
-- `npm`
-- `openjdk-7-jre`
-- `protobuf-compiler`
-- `python2.7`
+-   `npm`
+-   `default-jdk`
+-   `protobuf-compiler`
+-   `python3`
+-   `python3-pip`
 
-Then use pip to `pip install protobuf`.
+Then `pip3 install protobuf`.
 
 In addition, install Node.js v4.4.2. E.g.,
 [by downloading](https://nodejs.org/en/download/) or
@@ -74,23 +75,24 @@ In addition, install Node.js v4.4.2. E.g.,
 
 Dependencies:
 
-- npm
-- python 2.7 (should already be installed on OSX)
-- [homebrew](https://brew.sh/)
+-   npm
+-   [homebrew](https://brew.sh/)
+-   python 3 (e.g. [these instructions](https://docs.python-guide.org/starting/install3/osx/))
 
-  - protobuf
+    -   protobuf
 
-    ```sh
-    brew install protobuf
-    mkdir -p /Users/$(whoami)/Library/Python/2.7/lib/python/site-packages
-    echo 'import site; site.addsitedir("/usr/local/lib/python2.7/site-packages")' >> /Users/$(whoami)/Library/Python/2.7/lib/python/site-packages/homebrew.pth
-    ```
+        ```sh
+        pip3 install --user protobuf
+        ```
 
-  - openjdk-7-jre
-    ```sh
-    brew tap homebrew/cask
-    brew install Caskroom/cask/java
-    ```
+    -   openjdk-7-jre
+
+        Install openjdk, then symlink the system Java wrappers to find it:
+
+        ```sh
+        brew install openjdk
+        sudo ln -sfn /usr/local/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk
+        ```
 
 ### Usage
 
@@ -117,9 +119,9 @@ testdata/feature_tests/several_errors.html:34:2 The attribute 'width' in tag 'am
 
 _Note: This is for building the validator from source. If you are simply running validator tests for extensions, see the Installation steps instead._
 
-- Download protobuf with `brew install protobuf` via [homebrew](https://brew.sh/).
-- Use pip to `pip install google` and `pip install protobuf`. If you don't have pip, you can get it either via `brew install python` or [get-pip.py](https://bootstrap.pypa.io/get-pip.py).
-- If your [npm](https://www.npmjs.com/) is out of date, run `npm i -g npm` to update it.
+-   Download protobuf with `brew install protobuf` via [homebrew](https://brew.sh/).
+-   Use pip to `pip install google` and `pip install protobuf`. If you don't have pip, you can get it either via `brew install python` or [get-pip.py](https://bootstrap.pypa.io/get-pip.py).
+-   If your [npm](https://www.npmjs.com/) is out of date, run `npm i -g npm` to update it.
 
 To verify that you have the necessary prerequisites, run and verify:
 
diff --git a/validator/WORKSPACE b/validator/WORKSPACE
index de080e2525aff..2f664189cad71 100644
--- a/validator/WORKSPACE
+++ b/validator/WORKSPACE
@@ -12,11 +12,11 @@ http_archive(
 # rules_proto defines abstract rules for building Protocol Buffers.
 http_archive(
     name = "rules_proto",
-    sha256 = "2490dca4f249b8a9a3ab07bd1ba6eca085aaf8e45a734af92aad0c42d9dc7aaf",
-    strip_prefix = "rules_proto-218ffa7dfa5408492dc86c01ee637614f8695c45",
+    sha256 = "9fc210a34f0f9e7cc31598d109b5d069ef44911a82f507d5a88716db171615a8",
+    strip_prefix = "rules_proto-f7a30f6f80006b591fa7c437fe5a951eb10bcbcf",
     urls = [
-        "https://mirror.bazel.build/github.com/bazelbuild/rules_proto/archive/218ffa7dfa5408492dc86c01ee637614f8695c45.tar.gz",
-        "https://github.com/bazelbuild/rules_proto/archive/218ffa7dfa5408492dc86c01ee637614f8695c45.tar.gz",
+        "https://mirror.bazel.build/github.com/bazelbuild/rules_proto/archive/f7a30f6f80006b591fa7c437fe5a951eb10bcbcf.tar.gz",
+        "https://github.com/bazelbuild/rules_proto/archive/f7a30f6f80006b591fa7c437fe5a951eb10bcbcf.tar.gz",
     ],
 )
 
@@ -35,3 +35,7 @@ rules_cc_dependencies()
 load("@rules_proto//proto:repositories.bzl", "rules_proto_dependencies", "rules_proto_toolchains")
 rules_proto_dependencies()
 rules_proto_toolchains()
+
+local_repository(
+    name = "amphtml-extensions",
+    path = "../extensions")
diff --git a/validator/build.py b/validator/build.py
index a1f15fc48043d..db936eaa3637a 100755
--- a/validator/build.py
+++ b/validator/build.py
@@ -47,7 +47,10 @@ def EnsureNodeJsIsInstalled():
       return
   except (subprocess.CalledProcessError, OSError):
     pass
-  Die('Node.js not found. Try "apt-get install nodejs" or follow the install instructions at https://github.com/ampproject/amphtml/blob/master/validator/README.md#installation')
+  Die('Node.js not found. Try "apt-get install nodejs" or follow the install'
+      'instructions at'
+      'https://github.com/ampproject/amphtml/blob/main/validator/README.md#installation'
+     )
 
 
 def CheckPrereqs():
@@ -61,10 +64,10 @@ def CheckPrereqs():
   # Ensure source files are available.
   for f in [
       'validator-main.protoascii', 'validator.proto', 'validator_gen_js.py',
-      'package.json', 'engine/validator.js', 'engine/validator_test.js',
-      'engine/validator-in-browser.js', 'engine/tokenize-css.js',
-      'engine/definitions.js', 'engine/parse-css.js', 'engine/parse-srcset.js',
-      'engine/parse-url.js'
+      'package.json', 'js/engine/validator.js', 'js/engine/validator_test.js',
+      'js/engine/validator-in-browser.js', 'js/engine/tokenize-css.js',
+      'js/engine/definitions.js', 'js/engine/parse-css.js',
+      'js/engine/parse-srcset.js', 'js/engine/parse-url.js'
   ]:
     if not os.path.exists(f):
       Die('%s not found. Must run in amp_validator source directory.' % f)
@@ -73,7 +76,10 @@ def CheckPrereqs():
   try:
     libprotoc_version = subprocess.check_output(['protoc', '--version'])
   except (subprocess.CalledProcessError, OSError):
-    Die('Protobuf compiler not found. Try "apt-get install protobuf-compiler" or follow the install instructions at https://github.com/ampproject/amphtml/blob/master/validator/README.md#installation.')
+    Die('Protobuf compiler not found. Try "apt-get install protobuf-compiler" '
+        'or follow the install instructions at '
+        'https://github.com/ampproject/amphtml/blob/main/validator/README.md#installation.'
+       )
 
   # Ensure 'libprotoc 2.5.0' or newer.
   m = re.search(b'^(\\w+) (\\d+)\\.(\\d+)\\.(\\d+)', libprotoc_version)
@@ -90,26 +96,21 @@ def CheckPrereqs():
       # Python3 needs pip3. Python 2 needs pip.
       if sys.version_info < (3, 0):
         Die('%s not found. Try "pip install protobuf" or follow the install '
-            'instructions at https://github.com/ampproject/amphtml/blob/master/'
+            'instructions at https://github.com/ampproject/amphtml/blob/main/'
             'validator/README.md#installation' % module)
       else:
         Die('%s not found. Try "pip3 install protobuf" or follow the install '
-            'instructions at https://github.com/ampproject/amphtml/blob/master/'
+            'instructions at https://github.com/ampproject/amphtml/blob/main/'
             'validator/README.md#installation' % module)
 
-  # Ensure that yarn is installed.
-  try:
-    subprocess.check_output(['npx', 'yarn', '--version'])
-  except (subprocess.CalledProcessError, OSError):
-    Die('Yarn package manager not found. Run '
-        '"curl -o- -L https://yarnpkg.com/install.sh | bash" '
-        'or see https://yarnpkg.com/docs/install.')
-
   # Ensure JVM installed. TODO: Check for version?
   try:
     subprocess.check_output(['java', '-version'], stderr=subprocess.STDOUT)
   except (subprocess.CalledProcessError, OSError):
-    Die('Java missing. Try "apt-get install openjdk-7-jre" or follow the install instructions at https://github.com/ampproject/amphtml/blob/master/validator/README.md#installation')
+    Die('Java missing. Try "apt-get install openjdk-7-jre" or follow the'
+        'install instructions at'
+        'https://github.com/ampproject/amphtml/blob/main/validator/README.md#installation'
+       )
   logging.info('... done')
 
 
@@ -130,19 +131,19 @@ def SetupOutDir(out_dir):
 
 
 def InstallNodeDependencies():
-  """Installs the dependencies using yarn."""
+  """Installs the dependencies using npm install."""
   logging.info('entering ...')
   # Install the project dependencies specified in package.json into
   # node_modules.
   logging.info('installing AMP Validator engine dependencies ...')
   subprocess.check_call(
-      ['npx', 'yarn', 'install'],
-      stdout=(open(os.devnull, 'wb') if os.environ.get('TRAVIS') else sys.stdout))
+      ['npm', 'install', '--userconfig', '../.npmrc'],
+      stdout=(open(os.devnull, 'wb') if os.environ.get('CI') else sys.stdout))
   logging.info('installing AMP Validator nodejs dependencies ...')
-  subprocess.check_call(
-      ['npx', 'yarn', 'install'],
-      cwd='nodejs',
-      stdout=(open(os.devnull, 'wb') if os.environ.get('TRAVIS') else sys.stdout))
+  subprocess.check_call(['npm', 'install', '--userconfig', '../../../.npmrc'],
+                        cwd='js/nodejs',
+                        stdout=(open(os.devnull, 'wb')
+                                if os.environ.get('CI') else sys.stdout))
   logging.info('... done')
 
 
@@ -174,6 +175,7 @@ def GenValidatorProtoascii(out_dir):
 
   protoascii_segments = [open('validator-main.protoascii').read()]
   protoascii_segments.append(open('validator-css.protoascii').read())
+  protoascii_segments.append(open('validator-svg.protoascii').read())
   extensions = glob.glob('extensions/*/validator-*.protoascii')
   # In the Github project, the extensions are located in a sibling directory
   # to the validator rather than a child directory.
@@ -310,14 +312,14 @@ def CompileValidatorMinified(out_dir):
   logging.info('entering ...')
   CompileWithClosure(
       js_files=[
-          'engine/definitions.js', 'engine/htmlparser.js',
-          'engine/parse-css.js', 'engine/parse-srcset.js',
-          'engine/parse-url.js', 'engine/tokenize-css.js',
+          'js/engine/definitions.js', 'js/engine/htmlparser.js',
+          'js/engine/parse-css.js', 'js/engine/parse-srcset.js',
+          'js/engine/parse-url.js', 'js/engine/tokenize-css.js',
           '%s/validator-generated.js' % out_dir,
           '%s/validator-proto-generated.js' % out_dir,
-          'engine/validator-in-browser.js', 'engine/validator.js',
-          'engine/amp4ads-parse-css.js', 'engine/keyframes-parse-css.js',
-          'engine/htmlparser-interface.js'
+          'js/engine/validator-in-browser.js', 'js/engine/validator.js',
+          'js/engine/amp4ads-parse-css.js', 'js/engine/keyframes-parse-css.js',
+          'js/engine/htmlparser-interface.js'
       ],
       definitions=[],
       entry_points=[
@@ -337,7 +339,7 @@ def RunSmokeTest(out_dir):
   # Run cli.js on the minimum valid amp and observe that it passes.
   p = subprocess.Popen(
       [
-          'node', 'nodejs/cli.js', '--validator_js',
+          'node', 'js/nodejs/cli.js', '--validator_js',
           '%s/validator_minified.js' % out_dir,
           'testdata/feature_tests/minimum_valid_amp.html', '--format=text'
       ],
@@ -352,7 +354,7 @@ def RunSmokeTest(out_dir):
   # Run cli.js on an empty file and observe that it fails.
   p = subprocess.Popen(
       [
-          'node', 'nodejs/cli.js', '--validator_js',
+          'node', 'js/nodejs/cli.js', '--validator_js',
           '%s/validator_minified.js' % out_dir,
           'testdata/feature_tests/empty.html', '--format=text'
       ],
@@ -375,7 +377,7 @@ def RunIndexTest():
       ['node', './index_test.js'],
       stdout=subprocess.PIPE,
       stderr=subprocess.PIPE,
-      cwd='nodejs')
+      cwd='js/nodejs')
   (stdout, stderr) = p.communicate()
   if p.returncode != 0:
     Die('index_test.js failed. returncode=%d stdout="%s" stderr="%s"' %
@@ -393,14 +395,14 @@ def CompileValidatorTestMinified(out_dir):
   logging.info('entering ...')
   CompileWithClosure(
       js_files=[
-          'engine/definitions.js', 'engine/htmlparser.js',
-          'engine/parse-css.js', 'engine/parse-srcset.js',
-          'engine/parse-url.js', 'engine/tokenize-css.js',
+          'js/engine/definitions.js', 'js/engine/htmlparser.js',
+          'js/engine/parse-css.js', 'js/engine/parse-srcset.js',
+          'js/engine/parse-url.js', 'js/engine/tokenize-css.js',
           '%s/validator-generated.js' % out_dir,
           '%s/validator-proto-generated.js' % out_dir,
-          'engine/validator-in-browser.js', 'engine/validator.js',
-          'engine/amp4ads-parse-css.js', 'engine/keyframes-parse-css.js',
-          'engine/htmlparser-interface.js', 'engine/validator_test.js'
+          'js/engine/validator-in-browser.js', 'js/engine/validator.js',
+          'js/engine/amp4ads-parse-css.js', 'js/engine/keyframes-parse-css.js',
+          'js/engine/htmlparser-interface.js', 'js/engine/validator_test.js'
       ],
       definitions=[],
       entry_points=['amp.validator.ValidatorTest'],
@@ -418,8 +420,8 @@ def CompileHtmlparserTestMinified(out_dir):
   logging.info('entering ...')
   CompileWithClosure(
       js_files=[
-          'engine/htmlparser.js', 'engine/htmlparser-interface.js',
-          'engine/htmlparser_test.js'
+          'js/engine/htmlparser.js', 'js/engine/htmlparser-interface.js',
+          'js/engine/htmlparser_test.js'
       ],
       definitions=[],
       entry_points=['amp.htmlparser.HtmlParserTest'],
@@ -437,9 +439,10 @@ def CompileParseCssTestMinified(out_dir):
   logging.info('entering ...')
   CompileWithClosure(
       js_files=[
-          'engine/definitions.js', 'engine/parse-css.js', 'engine/parse-url.js',
-          'engine/tokenize-css.js', 'engine/json-testutil.js',
-          'engine/parse-css_test.js', '%s/validator-generated.js' % out_dir,
+          'js/engine/definitions.js', 'js/engine/parse-css.js',
+          'js/engine/parse-url.js', 'js/engine/tokenize-css.js',
+          'js/engine/json-testutil.js', 'js/engine/parse-css_test.js',
+          '%s/validator-generated.js' % out_dir,
           '%s/validator-proto-generated.js' % out_dir
       ],
       definitions=[],
@@ -458,9 +461,10 @@ def CompileParseUrlTestMinified(out_dir):
   logging.info('entering ...')
   CompileWithClosure(
       js_files=[
-          'engine/definitions.js', 'engine/parse-url.js', 'engine/parse-css.js',
-          'engine/tokenize-css.js', 'engine/json-testutil.js',
-          'engine/parse-url_test.js', '%s/validator-generated.js' % out_dir,
+          'js/engine/definitions.js', 'js/engine/parse-url.js',
+          'js/engine/parse-css.js', 'js/engine/tokenize-css.js',
+          'js/engine/json-testutil.js', 'js/engine/parse-url_test.js',
+          '%s/validator-generated.js' % out_dir,
           '%s/validator-proto-generated.js' % out_dir
       ],
       definitions=[],
@@ -479,10 +483,10 @@ def CompileAmp4AdsParseCssTestMinified(out_dir):
   logging.info('entering ...')
   CompileWithClosure(
       js_files=[
-          'engine/definitions.js', 'engine/amp4ads-parse-css_test.js',
-          'engine/parse-css.js', 'engine/parse-url.js',
-          'engine/amp4ads-parse-css.js', 'engine/tokenize-css.js',
-          'engine/json-testutil.js', '%s/validator-generated.js' % out_dir,
+          'js/engine/definitions.js', 'js/engine/amp4ads-parse-css_test.js',
+          'js/engine/parse-css.js', 'js/engine/parse-url.js',
+          'js/engine/amp4ads-parse-css.js', 'js/engine/tokenize-css.js',
+          'js/engine/json-testutil.js', '%s/validator-generated.js' % out_dir,
           '%s/validator-proto-generated.js' % out_dir
       ],
       definitions=[],
@@ -501,10 +505,10 @@ def CompileKeyframesParseCssTestMinified(out_dir):
   logging.info('entering ...')
   CompileWithClosure(
       js_files=[
-          'engine/definitions.js', 'engine/keyframes-parse-css_test.js',
-          'engine/parse-css.js', 'engine/parse-url.js',
-          'engine/keyframes-parse-css.js', 'engine/tokenize-css.js',
-          'engine/json-testutil.js', '%s/validator-generated.js' % out_dir,
+          'js/engine/definitions.js', 'js/engine/keyframes-parse-css_test.js',
+          'js/engine/parse-css.js', 'js/engine/parse-url.js',
+          'js/engine/keyframes-parse-css.js', 'js/engine/tokenize-css.js',
+          'js/engine/json-testutil.js', '%s/validator-generated.js' % out_dir,
           '%s/validator-proto-generated.js' % out_dir
       ],
       definitions=[],
@@ -523,8 +527,8 @@ def CompileParseSrcsetTestMinified(out_dir):
   logging.info('entering ...')
   CompileWithClosure(
       js_files=[
-          'engine/definitions.js', 'engine/parse-srcset.js',
-          'engine/json-testutil.js', 'engine/parse-srcset_test.js',
+          'js/engine/definitions.js', 'js/engine/parse-srcset.js',
+          'js/engine/json-testutil.js', 'js/engine/parse-srcset_test.js',
           '%s/validator-generated.js' % out_dir,
           '%s/validator-proto-generated.js' % out_dir
       ],
@@ -548,11 +552,13 @@ def GenerateTestRunner(out_dir):
   # to the validator rather than a child directory.
   if not os.path.isdir(extensions_dir):
     extensions_dir = '../extensions'
+  log_level = ('false' if os.environ.get('CI') else '\'dots\'')
   f.write("""#!/usr/bin/env node
              global.assert = require('assert');
              global.fs = require('fs');
              global.path = require('path');
              var JasmineRunner = require('jasmine');
+             var Reporter = require('jasmine-console-reporter');
              var jasmine = new JasmineRunner();
              process.env.TESTDATA_ROOTS = 'testdata:%s'
              require('./validator_test_minified');
@@ -562,11 +568,14 @@ def GenerateTestRunner(out_dir):
              require('./amp4ads-parse-css_test_minified');
              require('./keyframes-parse-css_test_minified');
              require('./parse-srcset_test_minified');
+             var reporter = new Reporter({verbosity: 1, activity: %s});
+             jasmine.env.clearReporters();
+             jasmine.env.addReporter(reporter);
              jasmine.onComplete(function (passed) {
                  process.exit(passed ? 0 : 1);
              });
              jasmine.execute();
-          """ % extensions_dir)
+          """ % (extensions_dir, log_level))
   os.chmod('%s/test_runner' % out_dir, 0o750)
   logging.info('... success')
 
@@ -592,7 +601,7 @@ def Main(parsed_args):
   """The main method, which executes all build steps and runs the tests."""
   logging.basicConfig(
       format='[[%(filename)s %(funcName)s]] - %(message)s',
-      level=(logging.ERROR if os.environ.get('TRAVIS') else logging.INFO))
+      level=(logging.ERROR if os.environ.get('CI') else logging.INFO))
   EnsureNodeJsIsInstalled()
   CheckPrereqs()
   InstallNodeDependencies()
diff --git a/validator/chromeextension/README.md b/validator/chromeextension/README.md
deleted file mode 100644
index 4dc264eb81e39..0000000000000
--- a/validator/chromeextension/README.md
+++ /dev/null
@@ -1,33 +0,0 @@
-<!---
-Copyright 2016 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.
--->
-
-# AMP Validator Chrome Extension
-
-This is the source code to the publicly available [AMP Validator](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) Chrome extension.
-
-## Building the extension
-
-The following tools are required to build the extension:
-
-- [Bower](https://bower.io/)
-- [Polybuild](https://github.com/PolymerLabs/polybuild)
-
-Once these tools are installed, run `./build_extension.sh`.
-
-## Installing locally
-
-Once built this extension can be installed locally through Chrome's [Developer
-Mode](https://developer.chrome.com/extensions/faq#faq-dev-01)
diff --git a/validator/chromeextension/amp-link-128.png b/validator/chromeextension/amp-link-128.png
deleted file mode 100644
index c85ce3a03000f..0000000000000
Binary files a/validator/chromeextension/amp-link-128.png and /dev/null differ
diff --git a/validator/chromeextension/amp-link-38.png b/validator/chromeextension/amp-link-38.png
deleted file mode 100644
index 919573089a45f..0000000000000
Binary files a/validator/chromeextension/amp-link-38.png and /dev/null differ
diff --git a/validator/chromeextension/background.js b/validator/chromeextension/background.js
deleted file mode 100644
index 3386975e43593..0000000000000
--- a/validator/chromeextension/background.js
+++ /dev/null
@@ -1,381 +0,0 @@
-/**
- * @license
- * Copyright 2016 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.
- */
-const globals = {};
-globals.ampCacheBgcolor = '#ffffff';
-globals.ampCacheIconPrefix = 'amp-link';
-globals.ampCacheTitle = chrome.i18n.getMessage('pageFromAmpCacheTitle');
-globals.invalidAmpBgcolor = '#8b0000';
-globals.invalidAmpIconPrefix = 'invalid';
-globals.invalidAmpTitle = chrome.i18n.getMessage('pageFailsValidationTitle');
-globals.linkToAmpBgColor = '#ffffff';
-globals.linkToAmpIconPrefix = 'amp-link';
-globals.linkToAmpTitle = chrome.i18n.getMessage('pageHasAmpAltTitle');
-globals.tabToUrl = {};
-globals.userAgentHeader = 'X-AMP-Validator-UA';
-globals.validAmpBgcolor = '#ffd700';
-globals.validAmpIconPrefix = 'valid';
-globals.validAmpTitle = chrome.i18n.getMessage('pagePassesValidationTitle');
-globals.validatorNotPresentBadge = chrome.i18n.getMessage('validatorNotPresentBadge');
-globals.validatorNotPresentBgColor = '#b71c1c';
-globals.validatorNotPresentIconPrefix = 'validator-not-present';
-globals.validatorNotPresentPopup = 'popup-validator-not-present.build.html';
-globals.validatorNotPresentTitle = chrome.i18n.getMessage('validatorNotPresentTitle');
-globals.validatorPopup = 'popup-validator.build.html';
-
-/**
- * Format a hex value (HTML colors such as #ffffff) as an RGBA.
- *
- * @param {string} hex
- * @return {string} rgba
- */
-function hex2rgba(hex) {
-  // Remove the '#' char if necessary.
-  if (hex.charAt(0) === '#') { hex = hex.slice(1); }
-  hex = hex.toUpperCase();
-  let hexAlpha = '0123456789ABCDEF', value = new Array(4), k = 0, int1, int2, i;
-  for (i = 0; i < 6; i += 2) {
-    int1 = hexAlpha.indexOf(hex.charAt(i));
-    int2 = hexAlpha.indexOf(hex.charAt(i + 1));
-    value[k] = (int1 * 16) + int2;
-    k += 1;
-  }
-  value[3] = 255;
-  return value;
-}
-
-/**
- * Returns a dictionary of the number of errors and warnings that occur
- * in the set of ValidationErrors.
- *
- * @param {Array<ValidationError>} errors Validation errors and/or warnings.
- * @return {Object}
- */
-function getErrorSeverityCounts(errors) {
-  let numErrors = 0;
-  let numWarnings = 0;
-  for (const error in errors) {
-    if (errors[error].severity == 'ERROR') {numErrors += 1;}
-    if (errors[error].severity == 'WARNING') {numWarnings += 1;}
-  }
-  return {'ERROR': numErrors, 'WARNING': numWarnings};
-}
-
-/**
- * Returns the number of errors that occur in the set of ValidationErrors.
- *
- *
- * @param {Array<ValidationError>} errors Validation errors and/or warnings.
- * @return {number}
- */
-function getNumberOfErrors(errors) {
-  return getErrorSeverityCounts(errors)['ERROR'];
-}
-
-/**
- * Returns the number of warnings that occur in the set of ValidationErrors.
- *
- * @param {Array<ValidationError>} errors Validation errors and/or warnings.
- * @return {number}
- */
-function getNumberOfWarnings(errors) {
-  return getErrorSeverityCounts(errors)['WARNING'];
-}
-
-/**
- * Handles actions to be taken for pages that are on an AMP Cache.
- *
- * @param {integer} tabId ID of a tab.
- * @param {string} ampHref The URL of the AMP page.
- */
-function handleAmpCache(tabId, ampHref) {
-  updateTabStatus(
-      tabId, globals.ampCacheIconPrefix, globals.ampCacheTitle,
-      '' /*text*/, globals.ampCacheBgcolor);
-  chrome.browserAction.onClicked.addListener(
-      function loadAmpHref(tab) {
-        if (tab.id == tabId) {
-          chrome.browserAction.onClicked.removeListener(loadAmpHref);
-          chrome.tabs.sendMessage(tab.id,
-              {'loadAmp': true, 'ampHref': ampHref});
-        }
-      }
-  );
-}
-
-/**
- * Handles actions to be taken for AMP pages that fail validation.
- *
- * @param {integer} tabId ID of a tab.
- * @param {!Object<!ValidationResult>} validationResult
- */
-function handleAmpFail(tabId, validationResult) {
-  const numErrors = getNumberOfErrors(validationResult.errors);
-  updateTabStatus(
-      tabId, globals.invalidAmpIconPrefix, globals.invalidAmpTitle,
-      numErrors.toString(), globals.invalidAmpBgcolor);
-  updateTabPopup(tabId);
-}
-
-/**
- * Handles actions to be taken for pages that have an AMP page available.
- *
- * @param {integer} tabId ID of a tab.
- * @param {string} ampHref The URL of the AMP page.
- */
-function handleAmpLink(tabId, ampHref) {
-  updateTabStatus(
-      tabId, globals.linkToAmpIconPrefix, globals.linkToAmpTitle,
-      '' /*text*/, globals.linkToAmpBgColor);
-  chrome.browserAction.onClicked.addListener(
-      function loadAmpHref(tab) {
-        if (tab.id == tabId) {
-          chrome.browserAction.onClicked.removeListener(loadAmpHref);
-          chrome.tabs.sendMessage(tab.id,
-              {'loadAmp': true, 'ampHref': ampHref});
-        }
-      }
-  );
-}
-
-/**
- * Handles actions to be taken for AMP pages that pass validation.
- *
- * @param {integer} tabId ID of a tab.
- * @param {!Object<!ValidationResult>} validationResult
- */
-function handleAmpPass(tabId, validationResult) {
-  let badgeTitle = '';
-  const numWarnings = getNumberOfWarnings(validationResult.errors);
-  if (numWarnings > 0) {badgeTitle = numWarnings.toString();}
-  updateTabStatus(
-      tabId, globals.validAmpIconPrefix, globals.validAmpTitle,
-      badgeTitle, globals.validAmpBgcolor);
-  if (numWarnings > 0) {updateTabPopup(tabId);}
-}
-
-function handleValidatorNotPresent(tabId) {
-  updateTabStatus(tabId, globals.validatorNotPresentIconPrefix,
-      globals.validatorNotPresentTitle, globals.validatorNotPresentBadge,
-      globals.validatorNotPresentBgColor);
-  chrome.tabs.get(tabId, function(tab) {
-    if (!chrome.runtime.lastError) {
-      chrome.browserAction.setPopup({
-        tabId,
-        popup: globals.validatorNotPresentPopup,
-      });
-    }
-  });
-}
-
-/**
- * Returns whether the url is forbidden for the extension to act on.
- *
- * @param {string} url The URL of a tab.
- * @return {boolean}
- */
-function isForbiddenUrl(url) {
-  return (url.startsWith('chrome://') || url.startsWith('view-source'));
-}
-
-/**
- * Handles events for a specific tab and asks the tab's content_script to
- * determine AMP details about the page's content.
- *
- * @param {Tab} tab The Tab which triggered the event.
- */
-function updateTab(tab) {
-  if (!isForbiddenUrl(tab.url)) {
-    chrome.tabs.sendMessage(
-        tab.id, {'getAmpDetails': true}, function(response) {
-          if (response && response.fromAmpCache && response.ampHref) {
-            handleAmpCache(tab.id, response.ampHref);
-          } else if (response && response.isAmp) {
-            validateUrlFromTab(tab, response.userAgent);
-          } else if (response && !response.isAmp && response.ampHref) {
-            handleAmpLink(tab.id, response.ampHref);
-          }
-        }
-    );
-  }
-}
-
-/**
- * Updates the tabId's extension popup.
- *
- * @param {number} tabId ID of a tab.
- */
-function updateTabPopup(tabId) {
-  // Verify tab still exists
-  chrome.tabs.get(tabId, function(tab) {
-    if (!chrome.runtime.lastError) {
-      chrome.browserAction.setPopup(
-          {tabId, popup: globals.validatorPopup});
-    }
-  });
-}
-
-/**
- * Updates the tabId's extension icon and badge.
- *
- * @param {number} tabId ID of a tab.
- * @param {string} iconPrefix File name prefix of the icon to use.
- * @param {string} title Title to display in extension icon hover.
- * @param {string} text Text to display in badge.
- * @param {string} color Background color for badge.
- */
-function updateTabStatus(tabId, iconPrefix, title, text, color) {
-  // Verify tab still exists
-  chrome.tabs.get(tabId, function(tab) {
-    if (!chrome.runtime.lastError) {
-      chrome.browserAction.setIcon({
-        path: {
-          '19': iconPrefix + '-128.png',
-          '38': iconPrefix + '-38.png',
-        },
-        tabId,
-      });
-      if (title !== undefined)
-      {chrome.browserAction.setTitle({title, tabId});}
-      if (text !== undefined)
-      {chrome.browserAction.setBadgeText({text, tabId});}
-      if (color !== undefined)
-      {chrome.browserAction.setBadgeBackgroundColor(
-          {color: hex2rgba(color), tabId});}
-    }
-  });
-}
-
-/**
- * Fetches the content of the tab's URL and validates it. Then updates the
- * extension's icons with pass/fail.
- *
- * @param {Tab} tab The Tab which triggered the event.
- * @param {userAgent} string Tab's current user agent.
- */
-function validateUrlFromTab(tab, userAgent) {
-  // Verify amp and amp.validator are defined.
-  if (typeof amp === 'undefined' || typeof amp.validator === 'undefined') {
-    handleValidatorNotPresent(tab.id);
-    return;
-  }
-  const xhr = new XMLHttpRequest();
-  const url = tab.url.split('#')[0];
-  xhr.open('GET', url, true);
-
-  // We can't set the User-Agent header directly, but we can set this header
-  // and let the onBeforeSendHeaders handler rename it for us.
-  // Add the listener now. It'll be removed after the request is made.
-  // It's not possible to set filters on the listener to only capture our
-  // traffic, so this approach will interfere as little as possible with the
-  // 99.9% of requests which aren't for AMP validation.
-  chrome.webRequest.onBeforeSendHeaders.addListener(
-      updateSendHeadersUserAgent,
-      {urls: [url], types: ['xmlhttprequest'], tabId: -1},
-      ['requestHeaders', 'blocking']
-  );
-  // Add the temporary header to the request
-  xhr.setRequestHeader(globals.userAgentHeader, userAgent);
-
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState === 4) {
-      // The request is complete; remove our temporary listener.
-      chrome.webRequest.onBeforeSendHeaders.removeListener(
-          updateSendHeadersUserAgent);
-      const doc = xhr.responseText;
-      const validationResult = amp.validator.validateString(doc);
-      window.sessionStorage.setItem(url, JSON.stringify(validationResult));
-      if (validationResult.status == 'PASS') {
-        handleAmpPass(tab.id, validationResult);
-      } else {
-        handleAmpFail(tab.id, validationResult);
-      }
-    }
-  };
-  xhr.send();
-}
-
-/**
- * Event handler which gets called for onBeforeSendHeaders
- * (developer.chrome.com/extensions/webRequest#event-onBeforeSendHeaders) and
- * updates the User-Agent header to the value that's been specified.
- *
- * @param {!Object<OnBeforeSendHeadersDetails>} details Details object as
- *   defined by Chrome.
- * @return {Object<HttpHeaders>} Object with HttpHeaders value
- *   (https://developer.chrome.com/extensions/webRequest#type-HttpHeaders)
- */
-function updateSendHeadersUserAgent(details) {
-  let newUserAgent,
-      headers = details.requestHeaders;
-  // Using var instead of let keeps the index in scope for later
-  for (var i = 0; i < headers.length; i++) {
-    if (headers[i].name === globals.userAgentHeader) {
-      // Found a header with our internal User Agent Header
-      newUserAgent = headers[i].value;
-      break;
-    }
-  }
-  if (newUserAgent) {
-    // We previously found our UA header. Delete that by the index.
-    headers.splice(i, 1);
-    // And then update the actual User-Agent header
-    for (i = 0; i < headers.length; i++) {
-      if (headers[i].name == 'User-Agent') {
-        headers[i].value = newUserAgent;
-        break;
-      }
-    }
-    return {requestHeaders: headers};
-  }
-}
-
-/**
- * Listen for a new tab being created.
- */
-chrome.tabs.onCreated.addListener(function(tab) {
-  updateTab(tab);
-});
-
-/**
- * Listen for a tab being changed.
- */
-chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
-  globals.tabToUrl[tabId] = tab.url;
-  updateTab(tab);
-});
-
-/**
- * Listen for a tab being removed.
- */
-chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
-  window.sessionStorage.removeItem(globals.tabToUrl[tabId]);
-});
-
-/**
- * Listen for a tab being replaced (due to prerendering or instant).
- */
-chrome.tabs.onReplaced.addListener(function(addedTabId, removedTabId) {
-  window.sessionStorage.removeItem(globals.tabToUrl[removedTabId]);
-  chrome.tabs.get(addedTabId, function(tab) {
-    updateTab(tab);
-  });
-});
-
-/**
- * Reload every hour to retrieve the most recent AMP Validator.
- */
-window.setTimeout(() => { location.reload(); } , 60 * 60 * 1000);
diff --git a/validator/chromeextension/invalid-128.png b/validator/chromeextension/invalid-128.png
deleted file mode 100644
index d9d484db57c8b..0000000000000
Binary files a/validator/chromeextension/invalid-128.png and /dev/null differ
diff --git a/validator/chromeextension/invalid-38.png b/validator/chromeextension/invalid-38.png
deleted file mode 100644
index f8ea2b079cbb3..0000000000000
Binary files a/validator/chromeextension/invalid-38.png and /dev/null differ
diff --git a/validator/chromeextension/no-amp-128.png b/validator/chromeextension/no-amp-128.png
deleted file mode 100644
index 0c747f21c9b9e..0000000000000
Binary files a/validator/chromeextension/no-amp-128.png and /dev/null differ
diff --git a/validator/chromeextension/no-amp-38.png b/validator/chromeextension/no-amp-38.png
deleted file mode 100644
index c63ab373b24ac..0000000000000
Binary files a/validator/chromeextension/no-amp-38.png and /dev/null differ
diff --git a/validator/chromeextension/valid-128.png b/validator/chromeextension/valid-128.png
deleted file mode 100644
index 168b3c46d6066..0000000000000
Binary files a/validator/chromeextension/valid-128.png and /dev/null differ
diff --git a/validator/chromeextension/valid-38.png b/validator/chromeextension/valid-38.png
deleted file mode 100644
index 3128ff57f199e..0000000000000
Binary files a/validator/chromeextension/valid-38.png and /dev/null differ
diff --git a/validator/cpp/engine/.bazelrc b/validator/cpp/engine/.bazelrc
new file mode 100644
index 0000000000000..1ff0994ab912b
--- /dev/null
+++ b/validator/cpp/engine/.bazelrc
@@ -0,0 +1,11 @@
+# Defaults to optimized build.
+build -c opt
+
+# Tested and compiles in llvm.
+build --repo_env=CC=clang
+
+# Contains c++17 features.
+build --cxxopt='-std=c++17'
+
+# Enabled operator new and operator delete for custom allocators.
+build --cxxopt='-fsized-deallocation'
diff --git a/validator/cpp/engine/BUILD b/validator/cpp/engine/BUILD
new file mode 100644
index 0000000000000..8e044f82d6c0b
--- /dev/null
+++ b/validator/cpp/engine/BUILD
@@ -0,0 +1,339 @@
+load("@rules_cc//cc:defs.bzl", "cc_library", "cc_test")
+load("@bazel_skylib//:bzl_library.bzl", "bzl_library")
+load("embed_data.bzl", "embed_data")
+
+# Requirements:
+# clang with c++17 support.
+#
+# Usage:
+# To build the library, use the following bazel command:
+#
+# bazel build --repo_env=CC=clang --cxxopt='-std=c++17' <build_target>
+
+package(default_visibility = ["//visibility:public"])
+
+licenses(["notice"])
+
+exports_files(["LICENSE"])
+
+cc_library(
+    name = "validator_pb",
+    hdrs = [
+        "validator_pb.h",
+    ],
+    copts = ["-std=c++17"],
+)
+
+embed_data(
+    name = "validator_pb_h",
+    src = "validator.pb",
+    header_out = "validator_pb.h",
+    namespace = "amp::validator::data",
+    varname = "kValidatorProtoBytes",
+)
+
+cc_library(
+    name = "parse-layout",
+    srcs = ["parse-layout.cc"],
+    hdrs = ["parse-layout.h"],
+    deps = [
+        "@com_google_absl//absl/strings",
+        "@com_google_absl//absl/strings:str_format",
+        "@com_googlesource_code_re2//:re2",
+        "@validator//:validator_cc_proto",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "parse-layout_test",
+    srcs = ["parse-layout_test.cc"],
+    args = ["--suppress_failure_output"],
+    deps = [
+        ":parse-layout",
+        "@com_google_absl//absl/strings",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+cc_library(
+    name = "parse-layout-sizes",
+    srcs = ["parse-layout-sizes.cc"],
+    hdrs = ["parse-layout-sizes.h"],
+    deps = [
+        "@com_google_absl//absl/strings",
+        "@com_googlesource_code_re2//:re2",
+        "@htmlparser//:strings",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "parse-layout-sizes_test",
+    srcs = ["parse-layout-sizes_test.cc"],
+    args = ["--suppress_failure_output"],
+    deps = [
+        ":parse-layout-sizes",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+cc_library(
+    name = "parse-srcset",
+    srcs = ["parse-srcset.cc"],
+    hdrs = ["parse-srcset.h"],
+    deps = [
+        "@com_google_absl//absl/base",
+        "@com_google_absl//absl/strings",
+        "@com_googlesource_code_re2//:re2",
+        "@validator//:validator_cc_proto",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "parse-srcset_test",
+    srcs = ["parse-srcset_test.cc"],
+    args = ["--suppress_failure_output"],
+    deps = [
+        ":parse-srcset",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+cc_library(
+    name = "parse-viewport",
+    srcs = ["parse-viewport.cc"],
+    hdrs = ["parse-viewport.h"],
+    deps = [
+        ":utf8-util",
+        "@com_google_absl//absl/base",
+        "@com_google_absl//absl/strings",
+        "@htmlparser//:strings",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "parse-viewport_test",
+    srcs = ["parse-viewport_test.cc"],
+    args = ["--suppress_failure_output"],
+    deps = [
+        ":parse-viewport",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+cc_library(
+    name = "utf8-util",
+    srcs = ["utf8-util.cc"],
+    hdrs = ["utf8-util.h"],
+    deps = [
+        "@com_google_absl//absl/base",
+        "@com_google_absl//absl/strings",
+        "@com_google_absl//absl/strings:cord",
+        "@htmlparser//:strings",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "utf8-util_test",
+    srcs = ["utf8-util_test.cc"],
+    args = ["--suppress_failure_output"],
+    deps = [
+        ":utf8-util",
+        "@com_google_googletest//:gtest_main",
+        "@htmlparser//:strings",
+    ],
+)
+
+cc_library(
+    name = "keyframes-parse-css",
+    srcs = ["keyframes-parse-css.cc"],
+    hdrs = ["keyframes-parse-css.h"],
+    deps = [
+        "@com_google_absl//absl/base",
+        "@com_google_absl//absl/memory",
+        "@com_google_absl//absl/strings",
+        "@htmlparser//css:parse-css",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "keyframes-parse-css_test",
+    srcs = ["keyframes-parse-css_test.cc"],
+    deps = [
+        ":keyframes-parse-css",
+        "@com_google_absl//absl/strings",
+        "@com_google_googletest//:gtest_main",
+        "@htmlparser//:strings",
+        "@htmlparser//css:parse-css",
+    ],
+)
+
+cc_library(
+    name = "type-identifier",
+    srcs = ["type-identifier.cc"],
+    hdrs = ["type-identifier.h"],
+    deps = [
+        "@com_google_absl//absl/strings",
+        "@validator//:validator_cc_proto",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "type-identifier_test",
+    srcs = ["type-identifier_test.cc"],
+    deps = [
+        ":type-identifier",
+        "@com_google_googletest//:gtest_main",
+        "@validator//:validator_cc_proto",
+    ],
+)
+
+cc_library(
+    name = "error-formatter",
+    srcs = ["error-formatter.cc"],
+    hdrs = ["error-formatter.h"],
+    deps = [
+        ":validator_pb",
+        "@com_googlesource_code_re2//:re2",
+        "@com_github_glog//:glog",
+        "@htmlparser//:strings",
+        "@validator//:validator_cc_proto",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "error-formatter_test",
+    srcs = ["error-formatter_test.cc"],
+    args = ["--suppress_failure_output"],
+    deps = [
+        ":error-formatter",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+cc_binary(
+    name = "validator-convert",
+    srcs = ["validator-convert.cc"],
+    deps = [
+        "@com_google_protobuf//:protobuf",
+        "@htmlparser//:defer",
+        "@htmlparser//:fileutil",
+        "@validator//:validator_cc_proto",
+    ],
+    copts = ["-std=c++17"],
+)
+
+genrule(
+    name = "validator-pb",
+    srcs = ["@validator//:validator.protoascii"],
+    outs = ["validator.pb"],
+    cmd = "$(location :validator-convert) " +
+          "$(SRCS) $@",
+    tools = [":validator-convert"],
+)
+
+cc_library(
+    name = "validator-internal",
+    srcs = [
+        "validator-internal.cc",
+    ],
+    visibility = ["//visibility:private"],
+    deps = [
+        ":keyframes-parse-css",
+        ":parse-layout",
+        ":parse-srcset",
+        ":parse-viewport",
+        ":type-identifier",
+        ":utf8-util",
+        ":validator_pb",
+        "@com_google_absl//absl/algorithm:container",
+        "@com_google_absl//absl/base:core_headers",
+        "@com_google_absl//absl/container:flat_hash_map",
+        "@com_google_absl//absl/container:flat_hash_set",
+        "@com_google_absl//absl/container:node_hash_map",
+        "@com_google_absl//absl/container:node_hash_set",
+        "@com_google_absl//absl/flags:flag",
+        "@com_google_absl//absl/memory",
+        "@com_google_absl//absl/status",
+        "@com_google_absl//absl/strings",
+        "@com_google_absl//absl/strings:cord",
+        "@com_google_absl//absl/synchronization",
+        "@com_googlesource_code_re2//:re2",
+        "@htmlparser//:atom",
+        "@htmlparser//:atomutil",
+        "@htmlparser//:defer",
+        "@htmlparser//:node",
+        "@htmlparser//:parser",
+        "@htmlparser//:strings",
+        "@htmlparser//:url",
+        "@htmlparser//css:amp4ads-parse-css",
+        "@htmlparser//css:parse-css",
+        "@htmlparser//css:parse_css_cc_proto",
+        "@htmlparser//json:parser",
+        "@validator//:validator_cc_proto",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_library(
+    name = "validator",
+    hdrs = [
+        "validator.h",
+    ],
+    deps = [
+        ":validator-internal",
+        "@validator//:validator_cc_proto",
+    ],
+    alwayslink = 1,
+    copts = ["-std=c++17"],
+)
+
+cc_library(
+    name = "testing-utils",
+    srcs = [
+        "testing-utils.cc",
+    ],
+    hdrs = [
+        "testing-utils.h",
+    ],
+    data = [
+        "@validator//:testdata_files",
+        "@amphtml-extensions//:testdata_files",
+    ],
+    deps = [
+        ":error-formatter",
+        "@com_google_absl//absl/strings",
+        "@htmlparser//:fileutil",
+        "@htmlparser//:strings",
+        "@validator//:validator_cc_proto",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "validator_test",
+    srcs = ["validator_test.cc"],
+    shard_count = 2,
+    deps = [
+        ":testing-utils",
+        ":validator",
+        ":validator_pb",
+        "@com_google_absl//absl/strings",
+        "@com_google_googletest//:gtest_main",
+        "@htmlparser//css:parse_css_cc_proto",
+        "@validator//:validator_cc_proto",
+    ],
+)
+
+bzl_library(
+    name = "embed_data_bzl",
+    srcs = ["embed_data.bzl"],
+    visibility = ["//visibility:private"],
+)
diff --git a/validator/htmlparser/LICENSE b/validator/cpp/engine/LICENSE
similarity index 100%
rename from validator/htmlparser/LICENSE
rename to validator/cpp/engine/LICENSE
diff --git a/validator/cpp/engine/README.md b/validator/cpp/engine/README.md
new file mode 100644
index 0000000000000..7c4ffd12b5948
--- /dev/null
+++ b/validator/cpp/engine/README.md
@@ -0,0 +1,35 @@
+<!---
+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.
+-->
+
+# AMPHTML Validator
+
+A C++ AMPHTML Validator for the
+[AMPHTML format](https://github.com/ampproject/amphtml/blob/main/README.md).
+
+## Maintainers
+
+The AMPHTML Validator is maintained by the
+[AMP Working Group](https://amp.dev/community/working-groups/amp4email/):
+[Caching](https://amp.dev/community/working-groups/caching/)
+
+## Building and Testing with Bazel
+
+This code requires C++17. When building with [Bazel](https://bazel.build/)
+please use the flag `--cxxopt='-std=c++17'`.
+
+For building, run: `bazel build --cxxopt='-std=c++17' validator`.
+
+For testing, run: `bazel test --cxxopt='-std=c++17' validator_test`.
diff --git a/validator/cpp/engine/WORKSPACE b/validator/cpp/engine/WORKSPACE
new file mode 100644
index 0000000000000..72d70da589438
--- /dev/null
+++ b/validator/cpp/engine/WORKSPACE
@@ -0,0 +1,67 @@
+workspace(name = "ampvalidator")
+
+load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
+
+http_archive(
+    name = "com_google_absl",
+    strip_prefix = "abseil-cpp-master",
+    urls = ["https://github.com/abseil/abseil-cpp/archive/master.zip"],
+)
+
+http_archive(
+    name = "com_google_googletest",
+    sha256 = "d3d307a240e129bb57da8aae64f3b0099bf1b8efff7249df993b619b8641ec77",
+    strip_prefix = "googletest-a3460d1aeeaa43fdf137a6adefef10ba0b59fe4b",
+    urls = ["https://github.com/google/googletest/archive/a3460d1aeeaa43fdf137a6adefef10ba0b59fe4b.zip"],  # 2019-01-07
+)
+
+http_archive(
+    name = "com_googlesource_code_re2",
+    sha256 = "8c3d0c90c7cebe7260dc8753d30743bcc51fc52ecec414728ac8afc258bb2300",
+    strip_prefix = "re2-4244cd1cb492fa1d10986ec67f862964c073f844",
+    urls = [
+        "https://github.com/google/re2/archive/4244cd1cb492fa1d10986ec67f862964c073f844.tar.gz",
+    ],
+)
+
+http_archive(
+    name = "com_github_gflags_gflags",
+    strip_prefix = "gflags-master",
+    urls = ["https://github.com/gflags/gflags/archive/master.zip"],
+)
+
+http_archive(
+    name = "com_github_re2",
+    strip_prefix = "re2-master",
+    urls = ["https://github.com/google/re2/archive/master.zip"],
+)
+
+http_archive(
+    name = "com_github_glog",
+    strip_prefix = "glog-master",
+    urls = ["https://github.com/google/glog/archive/master.zip"],
+)
+
+http_archive(
+    name = "com_google_protobuf",
+    strip_prefix = "protobuf-master",
+    urls = ["https://github.com/protocolbuffers/protobuf/archive/master.zip"],
+)
+
+load("@com_google_protobuf//:protobuf_deps.bzl", "protobuf_deps")
+protobuf_deps()
+
+local_repository(
+    name = "amphtml-extensions",
+    path = "../../../extensions/",
+)
+
+local_repository(
+    name = "validator",
+    path = "../../",
+)
+
+local_repository(
+    name = "htmlparser",
+    path = "../htmlparser/",
+)
diff --git a/validator/cpp/engine/embed_data.bzl b/validator/cpp/engine/embed_data.bzl
new file mode 100644
index 0000000000000..b4578c6a9f9f8
--- /dev/null
+++ b/validator/cpp/engine/embed_data.bzl
@@ -0,0 +1,50 @@
+"""embed_data.bzl to follow it's usage in BUILD file as embed_data(...)"""
+
+def _impl(ctx):
+    # Both the input and output files are specified by the BUILD file.
+    in_file = ctx.file.src
+    out_file = ctx.outputs.header_out
+    ctx.actions.run(
+        inputs = [in_file],
+        outputs = [out_file],
+        arguments = [
+            in_file.path,
+            out_file.path,
+            ctx.attr.namespace,
+            ctx.attr.varname,
+        ],
+        progress_message = "Generating c++ header for data file: %s" % (in_file),
+        executable = ctx.executable.header_generator,
+    )
+
+embed_data = rule(
+    implementation = _impl,
+    attrs = {
+        "src": attr.label(
+            allow_single_file = True,
+            mandatory = True,
+            doc = "The file to embed",
+        ),
+        "header_out": attr.output(
+            mandatory = True,
+            doc = "Generated header file name",
+        ),
+        "namespace": attr.string(
+            mandatory = True,
+            doc = "c++ namespace, for nested namespace use c++17 style a::b",
+        ),
+        "varname": attr.string(
+            mandatory = True,
+            doc = "byte array varname",
+        ),
+        "header_generator": attr.label(
+            executable = True,
+            cfg = "host",
+            allow_files = True,
+            default = Label(
+                "//scripts:filecontents_to_cpp_header",
+            ),
+        ),
+    },
+    doc = "Create the header file",
+)
diff --git a/validator/cpp/engine/error-formatter.cc b/validator/cpp/engine/error-formatter.cc
new file mode 100644
index 0000000000000..d9a29cb305709
--- /dev/null
+++ b/validator/cpp/engine/error-formatter.cc
@@ -0,0 +1,112 @@
+//
+// Copyright 2020 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.
+//
+// AMP Validator client library to validate if given html is a valid AMP
+// document.
+//
+#include "error-formatter.h"
+
+#include "glog/logging.h"
+#include "validator_pb.h"
+#include "strings.h"
+#include "validator.pb.h"
+#include "re2/re2.h"  // NOLINT(build/deprecated)
+
+namespace amp::validator {
+namespace {
+int CharLenAtIndex(const std::string& str, int pos) {
+  return htmlparser::Strings::CodePointByteSequenceCount(str.at(pos));
+}
+
+// Replaces any adjacent UTF-8 encoded characters within |in| that are
+// whitespace with a single space (' ').
+std::string CollapseWhitespace(const std::string& in) {
+  static LazyRE2 match_whitespace_re = {"\\s+"};
+  std::string out(in);
+  RE2::GlobalReplace(&out, *match_whitespace_re, " ");
+  return out;
+}
+}  // namespace
+
+std::string ErrorFormatter::ApplyFormat(const std::string& format,
+                                        const ValidationError& error) {
+  std::string message;
+  int max_param_id = -1;
+  for (int ii = 0, char_len = CharLenAtIndex(format, ii); ii < format.size();
+       ii += char_len) {
+    if (char_len > 1) {  // multibyte can't be a parameter
+      message.append(format, ii, char_len);
+      continue;
+    }
+    if (format[ii] != '%') {  // not a parameter
+      message += format[ii];
+      continue;
+    }
+    ii += char_len;
+    if (ii == format.size()) {
+      message += '%';
+      break;
+    }
+    char_len = CharLenAtIndex(format, ii);
+    if (char_len > 1) {  // multibyte can't be a parameter
+      message += '%';
+      message.append(format, ii, char_len);
+      continue;
+    }
+    if (format[ii] == '%') {  // poor man's escaping (%% -> %).
+      message += '%';
+      continue;
+    }
+    int param = format[ii] - '0';
+    // While the specified param in the format string is 1-based, the index
+    // into the params is 0-based.
+    --param;
+    if (param >= 0 && param < error.params_size()) {  // bounds check
+      message.append(CollapseWhitespace(error.params(param)));
+      max_param_id = std::max(max_param_id, param);
+      continue;
+    } else {
+      // This should never happen in actual code. We put it here so we have
+      // some way of noticing these issues in tests.
+      message.append("(invalid param)");
+    }
+    message += '%';
+    message += format[ii];
+  }
+  if (max_param_id != error.params_size() - 1)
+    // This should never happen in actual code. We put it here so we have
+    // some way of noticing these issues in tests.
+    message.append("(unused param)");
+
+  return message;
+}
+
+std::string ErrorFormatter::FormattedMessageFor(const ValidationError& error) {
+  static const std::vector<std::string>* format_by_code = []() {
+    ValidatorRules rules;
+    CHECK(rules.ParseFromArray(
+        amp::validator::data::kValidatorProtoBytes,
+        amp::validator::data::kValidatorProtoBytesSize));
+    std::vector<std::string> format_by_code(ValidationError::Code_MAX + 1);
+    for (const ErrorFormat& error_format : rules.error_formats())
+      format_by_code[error_format.code()] = error_format.format();
+    return new const std::vector<std::string>(std::move(format_by_code));
+  }();
+  if (error.code() < 0 || error.code() >= format_by_code->size()) {
+    return "";
+  }
+  return ErrorFormatter::ApplyFormat((*format_by_code)[error.code()], error);
+}
+}  // namespace amp::validator
diff --git a/validator/cpp/engine/error-formatter.h b/validator/cpp/engine/error-formatter.h
new file mode 100644
index 0000000000000..8fda92595c147
--- /dev/null
+++ b/validator/cpp/engine/error-formatter.h
@@ -0,0 +1,57 @@
+//
+// Copyright 2020 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.
+//
+// AMP Validator client library to validate if given html is a valid AMP
+// document.
+//
+// A utility for formatting AMP Validator errors. This is useful
+// because ValidationError proto messages only carry an error code and
+// parameters; so to assemble messages one needs to use the appropriate
+// format string from third_party/javascript/amp_validator/validator.protoascii,
+// then call the ErrorFormatter::ApplyFormat function.
+//
+// A Java port is available: java/com/google/amp/validator/ErrorFormatter.java.
+#ifndef AMPVALIDATOR__ERROR_FORMATTER_H_
+#define AMPVALIDATOR__ERROR_FORMATTER_H_
+
+#include <string>
+
+#include "validator.pb.h"
+
+namespace amp::validator {
+// TODO(johannes): Port more of
+// java/com/google/amp/validator/ErrorFormatter.java.
+class ErrorFormatter {
+ public:
+  // Applies the |format| string to the |error.params|, to make a
+  // formatted error message. Within the format string, %[1-9] are the
+  // parameters, %% is interpreted as %.
+  static std::string ApplyFormat(const std::string& format,
+                                 const ValidationError& error);
+
+  // Provided a ValidationError instance, looks up the appropriate
+  // format string based on the code and applies it to the params,
+  // to make a formatted message. |error| is the error for which to
+  // compute the formatted message. Returns a formatted error message
+  // or the empty string if anything goes wrong.
+  static std::string FormattedMessageFor(const ValidationError& error);
+
+ private:
+  ErrorFormatter(const ErrorFormatter&) = delete;
+  ErrorFormatter& operator=(const ErrorFormatter&) = delete;
+};
+}  // namespace amp::validator
+
+#endif  // AMPVALIDATOR__ERROR_FORMATTER_H_
diff --git a/validator/cpp/engine/error-formatter_test.cc b/validator/cpp/engine/error-formatter_test.cc
new file mode 100644
index 0000000000000..2d685b2e33d3e
--- /dev/null
+++ b/validator/cpp/engine/error-formatter_test.cc
@@ -0,0 +1,83 @@
+//
+// Copyright 2020 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.
+//
+// AMP Validator client library to validate if given html is a valid AMP
+// document.
+//
+#include "error-formatter.h"
+
+#include "gtest/gtest.h"
+
+namespace amp {
+namespace validator {
+namespace {
+TEST(ApplyFormat, YieldsFormattedMessages) {
+  ValidationError error;
+  EXPECT_EQ("%", ErrorFormatter::ApplyFormat("%", error));
+  EXPECT_EQ("%", ErrorFormatter::ApplyFormat("%%", error));
+  EXPECT_EQ("%%", ErrorFormatter::ApplyFormat("%%%", error));
+  EXPECT_EQ("%%", ErrorFormatter::ApplyFormat("%%%%", error));
+  error.add_params("b");
+  error.add_params("d");
+  EXPECT_EQ("a b c d e", ErrorFormatter::ApplyFormat("a %1 c %2 e", error));
+  error.add_params("g");
+  EXPECT_EQ("a ⚡ (invalid param)%0 c g e (invalid param)%f %⚡",
+            ErrorFormatter::ApplyFormat("a ⚡ %0 c %3 e %f %⚡", error));
+  error.clear_params();
+  error.add_params("one");
+  error.add_params("two");
+  EXPECT_EQ("a %1 b %one c two",
+            ErrorFormatter::ApplyFormat("a %%1 b %%%1 c %2", error));
+  error.clear_params();
+  error.add_params("world");
+  EXPECT_EQ("Hello, world.", ErrorFormatter::ApplyFormat("Hello, %1.", error));
+}
+
+TEST(ApplyFormat, CollapsewhitespaceInParams) {
+  ValidationError error;
+  error.add_params("b\r\n  \tc  d");
+  error.add_params(" f g");
+  EXPECT_EQ("a b c d e  f g h",
+            ErrorFormatter::ApplyFormat("a %1 e %2 h", error));
+}
+
+TEST(FormattedMessageFor, FormatsValidationErrors) {
+  // Empty validation error.
+  ValidationError error;
+  EXPECT_EQ("Unknown error.", ErrorFormatter::FormattedMessageFor(error));
+  // Error code set but params empty. In that case, the '%1' is rendered
+  // just as it appeared in the format string. It's not amazing but not
+  // sure what else we could do.
+  error.set_code(ValidationError::DISALLOWED_TAG);
+  EXPECT_EQ("The tag '(invalid param)%1' is disallowed.",
+            ErrorFormatter::FormattedMessageFor(error));
+  // Single param set.
+  error.add_params("img");
+  EXPECT_EQ("The tag 'img' is disallowed.",
+            ErrorFormatter::FormattedMessageFor(error));
+  error.Clear();
+  error.set_code(ValidationError::INVALID_PROPERTY_VALUE_IN_ATTR_VALUE);
+  error.add_params("foo");
+  error.add_params("bar");
+  error.add_params("baz");
+  error.add_params("boo");
+  EXPECT_EQ(
+      "The property 'foo' in attribute 'bar' in tag 'baz' is set to "
+      "'boo', which is invalid.",
+      ErrorFormatter::FormattedMessageFor(error));
+}
+}  // namespace
+}  // namespace validator
+}  // namespace amp
diff --git a/validator/cpp/engine/keyframes-parse-css.cc b/validator/cpp/engine/keyframes-parse-css.cc
new file mode 100644
index 0000000000000..ea4439e277cc9
--- /dev/null
+++ b/validator/cpp/engine/keyframes-parse-css.cc
@@ -0,0 +1,101 @@
+//
+// Copyright 2020 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.
+//
+
+#include "keyframes-parse-css.h"
+
+#include "glog/logging.h"
+#include "absl/memory/memory.h"
+#include "absl/strings/str_cat.h"
+#include "absl/strings/string_view.h"
+
+using absl::make_unique;
+using amp::validator::ValidationError;
+using htmlparser::css::AtRule;
+using htmlparser::css::ErrorToken;
+using htmlparser::css::QualifiedRule;
+using htmlparser::css::RuleVisitor;
+using htmlparser::css::Token;
+using std::unique_ptr;
+using std::vector;
+
+namespace amp::validator::parse_css {
+namespace {
+// Fills an ErrorToken with the provided position, code, and params.
+unique_ptr<ErrorToken> CreateParseErrorTokenAt(
+    const Token& position_token, ValidationError::Code code,
+    const std::vector<std::string>& params) {
+  auto token = make_unique<ErrorToken>(code, params);
+  position_token.CopyStartPositionTo(token.get());
+  return token;
+}
+
+class KeyframesVisitor : public RuleVisitor {
+ public:
+  explicit KeyframesVisitor(std::vector<unique_ptr<ErrorToken>>* errors)
+      : errors_(errors) {}
+
+  // This is allowed:
+  //   @keyframes anim1 { 100% {visibility: visible;} }
+  // But these are not allowed:
+  //   @media (min-width: 300px) { 100% {transform: translateX(-100%);} }
+  //   amp-img { opacity: 0 }
+  void VisitQualifiedRule(const QualifiedRule& qualified_rule) override {
+    if (!parent_is_keyframes_at_rule_) {
+      errors_->emplace_back(CreateParseErrorTokenAt(
+          qualified_rule,
+          ValidationError::
+              CSS_SYNTAX_DISALLOWED_QUALIFIED_RULE_MUST_BE_INSIDE_KEYFRAME,
+          {"style", qualified_rule.RuleName()}));
+      return;
+    }
+    if (!qualified_rule.declarations().empty()) return;
+    errors_->emplace_back(CreateParseErrorTokenAt(
+        qualified_rule,
+        ValidationError::CSS_SYNTAX_QUALIFIED_RULE_HAS_NO_DECLARATIONS,
+        {"style", qualified_rule.RuleName()}));
+  }
+
+  void VisitAtRule(const AtRule& at_rule) override {
+    // TODO: Move this to protoascii.
+    if (at_rule.name() == "keyframes" || at_rule.name() == "-moz-keyframes" ||
+        at_rule.name() == "-o-keyframes" ||
+        at_rule.name() == "-webkit-keyframes") {
+      if (parent_is_keyframes_at_rule_) {
+        errors_->emplace_back(CreateParseErrorTokenAt(
+            at_rule,
+            ValidationError::CSS_SYNTAX_DISALLOWED_KEYFRAME_INSIDE_KEYFRAME,
+            {"style"}));
+      }
+      parent_is_keyframes_at_rule_ = true;
+    }
+  }
+
+  void LeaveAtRule(const AtRule& at_rule) override {
+    parent_is_keyframes_at_rule_ = false;
+  }
+
+ private:
+  std::vector<unique_ptr<ErrorToken>>* errors_;
+  bool parent_is_keyframes_at_rule_ = false;
+};
+}  // namespace
+
+void ValidateKeyframesCss(const htmlparser::css::Stylesheet& stylesheet,
+                          std::vector<unique_ptr<ErrorToken>>* errors) {
+  KeyframesVisitor visitor(errors);
+  stylesheet.Accept(&visitor);
+}
+}  // namespace amp::validator::parse_css
diff --git a/validator/cpp/engine/keyframes-parse-css.h b/validator/cpp/engine/keyframes-parse-css.h
new file mode 100644
index 0000000000000..3856e961ab3e4
--- /dev/null
+++ b/validator/cpp/engine/keyframes-parse-css.h
@@ -0,0 +1,42 @@
+//
+// Copyright 2020 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.
+//
+
+#ifndef AMPVALIDATOR__KEYFRAMES_PARSE_CSS_H_
+#define AMPVALIDATOR__KEYFRAMES_PARSE_CSS_H_
+
+#include <string>
+#include <vector>
+
+#include "css/parse-css.h"
+//
+// This is *not* meant to be a public API.
+//
+// We are just separating this functionality into its own library
+// which is called from validator.cc. The format for calling this
+// will change, especially once we allow more generic configuration
+// for these checks.
+//
+// The draft specification for Keyframes is located here:
+// https://github.com/ampproject/amphtml/issues/9625
+//
+namespace amp::validator::parse_css {
+// Validates the provided |stylesheet|, emitting into |errors|.
+void ValidateKeyframesCss(
+    const htmlparser::css::Stylesheet& stylesheet,
+    std::vector<std::unique_ptr<htmlparser::css::ErrorToken>>* errors);
+}  // namespace amp::validator::parse_css
+
+#endif  // AMPVALIDATOR__KEYFRAMES_PARSE_CSS_H_
diff --git a/validator/cpp/engine/keyframes-parse-css_test.cc b/validator/cpp/engine/keyframes-parse-css_test.cc
new file mode 100644
index 0000000000000..4624160446a75
--- /dev/null
+++ b/validator/cpp/engine/keyframes-parse-css_test.cc
@@ -0,0 +1,645 @@
+//
+// Copyright 2020 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.
+//
+
+#include "keyframes-parse-css.h"
+
+#include <gmock/gmock.h>
+#include "gtest/gtest.h"
+#include "absl/strings/str_cat.h"
+#include "absl/strings/string_view.h"
+#include "css/parse-css.h"
+#include "strings.h"
+
+using htmlparser::css::BlockType;
+using htmlparser::css::CssParsingConfig;
+using htmlparser::css::ErrorToken;
+using htmlparser::css::Stylesheet;
+using htmlparser::css::Token;
+using std::unique_ptr;
+
+namespace amp::validator::parse_css {
+namespace {
+
+template <class T>
+std::string JsonFromList(const std::vector<std::unique_ptr<T>>& list) {
+  htmlparser::json::JsonArray array;
+  for (const auto& element : list) {
+    if (element)
+      array.Append(element->ToJson());
+    else
+      array.Append("null");
+  }
+  return array.ToString();
+}
+
+CssParsingConfig KeyframesCssParsingConfig() {
+  CssParsingConfig config;
+  config.at_rule_spec["keyframes"] = BlockType::PARSE_AS_RULES;
+  config.at_rule_spec["media"] = BlockType::PARSE_AS_RULES;
+  config.at_rule_spec["supports"] = BlockType::PARSE_AS_RULES;
+  config.default_spec = BlockType::PARSE_AS_IGNORE;
+  return config;
+}
+
+TEST(KeyframesParseCssTest, Good) {
+  std::vector<char32_t> css = htmlparser::Strings::Utf8ToCodepoints(
+      "@keyframes anim1 {"
+      "0% {transform: translateX(-100%);}"
+      "100% {transform: translateX(100%);}"
+      "}"
+      "@-webkit-keyframes anim1 {"
+      "0% {transform: translateX(-100%);}"
+      "100% {transform: translateX(100%);}"
+      "}"
+      "@media (min-width: 300px) {"
+      "@keyframes anim1 {"
+      "0% {transform: translateX(-200%);}"
+      "100% {transform: translateX(200%);}"
+      "}"
+      "}"
+      "@supports (offset-distance: 0) {"
+      "@keyframes anim1 {"
+      "0% {offset-distance: 0}"
+      "100% {offset-distance: 100%}"
+      "}"
+      "}"
+      "@media (min-width: 300px) {"
+      "@supports (offset-distance: 0) {"
+      "@keyframes anim1 {"
+      "0% {offset-distance: 0}"
+      "100% {offset-distance: 100%}"
+      "}"
+      "}"
+      "}"
+      "@supports (offset-distance: 0) {"
+      "@media (min-width: 300px) {"
+      "@keyframes anim1 {"
+      "0% {transform: translateX(-200%);}"
+      "100% {transform: translateX(200%);}"
+      "}"
+      "}"
+      "}");
+  std::vector<unique_ptr<ErrorToken>> errors;
+  std::vector<unique_ptr<Token>> tokens =
+      Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
+  unique_ptr<Stylesheet> stylesheet =
+      ParseAStylesheet(&tokens, KeyframesCssParsingConfig(), &errors);
+  EXPECT_EQ(JsonFromList(errors), "[]");
+  ValidateKeyframesCss(*stylesheet, &errors);
+  EXPECT_EQ(JsonFromList(errors), "[]");
+}  // Good
+
+TEST(KeyframesParseCssTest, Good_Stylesheet) {
+  std::vector<char32_t> css = htmlparser::Strings::Utf8ToCodepoints(
+      "@keyframes anim1 {"
+      "0% {transform: translateX(-100%);}"
+      "100% {transform: translateX(100%);}"
+      "}");
+  std::vector<unique_ptr<ErrorToken>> errors;
+  std::vector<unique_ptr<Token>> tokens =
+      Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
+  unique_ptr<Stylesheet> stylesheet =
+      ParseAStylesheet(&tokens, KeyframesCssParsingConfig(), &errors);
+  EXPECT_EQ(stylesheet->ToJson().ToString(), R""({
+  "tokentype": "STYLESHEET",
+  "line": 1,
+  "col": 0,
+  "rules":  [
+    {
+      "tokentype": "AT_RULE",
+      "line": 1,
+      "col": 0,
+      "name": "keyframes",
+      "prelude":      [
+        {
+          "tokentype": "WHITESPACE",
+          "line": 1,
+          "col": 10
+        },
+        {
+          "tokentype": "IDENT",
+          "line": 1,
+          "col": 11,
+          "value": "anim1"
+        },
+        {
+          "tokentype": "WHITESPACE",
+          "line": 1,
+          "col": 16
+        },
+        {
+          "tokentype": "EOF_TOKEN",
+          "line": 1,
+          "col": 17
+        }
+      ],
+      "rules":      [
+        {
+          "tokentype": "QUALIFIED_RULE",
+          "line": 1,
+          "col": 18,
+          "prelude":          [
+            {
+              "tokentype": "PERCENTAGE",
+              "line": 1,
+              "col": 18,
+              "repr": "0",
+              "value": 0.000000
+            },
+            {
+              "tokentype": "WHITESPACE",
+              "line": 1,
+              "col": 20
+            },
+            {
+              "tokentype": "EOF_TOKEN",
+              "line": 1,
+              "col": 21
+            }
+          ],
+          "declarations":          [
+            {
+              "tokentype": "DECLARATION",
+              "line": 1,
+              "col": 22,
+              "name": "transform",
+              "important": false,
+              "value":              [
+                {
+                  "tokentype": "WHITESPACE",
+                  "line": 1,
+                  "col": 32
+                },
+                {
+                  "tokentype": "FUNCTION_TOKEN",
+                  "line": 1,
+                  "col": 33,
+                  "value": "translateX"
+                },
+                {
+                  "tokentype": "PERCENTAGE",
+                  "line": 1,
+                  "col": 44,
+                  "repr": "-100",
+                  "value": -100.000000
+                },
+                {
+                  "tokentype": "CLOSE_PAREN",
+                  "line": 1,
+                  "col": 49
+                },
+                {
+                  "tokentype": "EOF_TOKEN",
+                  "line": 1,
+                  "col": 50
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "tokentype": "QUALIFIED_RULE",
+          "line": 1,
+          "col": 52,
+          "prelude":          [
+            {
+              "tokentype": "PERCENTAGE",
+              "line": 1,
+              "col": 52,
+              "repr": "100",
+              "value": 100.000000
+            },
+            {
+              "tokentype": "WHITESPACE",
+              "line": 1,
+              "col": 56
+            },
+            {
+              "tokentype": "EOF_TOKEN",
+              "line": 1,
+              "col": 57
+            }
+          ],
+          "declarations":          [
+            {
+              "tokentype": "DECLARATION",
+              "line": 1,
+              "col": 58,
+              "name": "transform",
+              "important": false,
+              "value":              [
+                {
+                  "tokentype": "WHITESPACE",
+                  "line": 1,
+                  "col": 68
+                },
+                {
+                  "tokentype": "FUNCTION_TOKEN",
+                  "line": 1,
+                  "col": 69,
+                  "value": "translateX"
+                },
+                {
+                  "tokentype": "PERCENTAGE",
+                  "line": 1,
+                  "col": 80,
+                  "repr": "100",
+                  "value": 100.000000
+                },
+                {
+                  "tokentype": "CLOSE_PAREN",
+                  "line": 1,
+                  "col": 84
+                },
+                {
+                  "tokentype": "EOF_TOKEN",
+                  "line": 1,
+                  "col": 85
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "declarations":      []
+    }
+  ],
+  "eof":  {
+    "tokentype": "EOF_TOKEN",
+    "line": 1,
+    "col": 88
+  }
+})"");
+}  // Good_Stylesheet
+
+TEST(KeyframesParseCssTest, Good_Allowed_At_Rules) {
+  std::vector<char32_t> css = htmlparser::Strings::Utf8ToCodepoints(
+      "@keyframes anim1 {}"
+      "@-webkit-keyframes anim1 {}"
+      "@media (min-width: 300px) {}"
+      "@supports (offset-distance: 0) {}"
+      "@media (min-width: 300px) {}"
+      "@supports (offset-distance: 0) {}");
+  std::vector<unique_ptr<ErrorToken>> errors;
+  std::vector<unique_ptr<Token>> tokens =
+      Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
+  unique_ptr<Stylesheet> stylesheet =
+      ParseAStylesheet(&tokens, KeyframesCssParsingConfig(), &errors);
+  EXPECT_EQ(JsonFromList(errors), "[]");
+  ValidateKeyframesCss(*stylesheet, &errors);
+  EXPECT_EQ(JsonFromList(errors), "[]");
+}  // Good_Allowed_At_Rules
+
+TEST(KeyframesParseCssTest, Bad_NotAtRule) {
+  std::vector<char32_t> css =
+      htmlparser::Strings::Utf8ToCodepoints("amp-img {}");
+  std::vector<unique_ptr<ErrorToken>> errors;
+  std::vector<unique_ptr<Token>> tokens =
+      Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
+  unique_ptr<Stylesheet> stylesheet =
+      ParseAStylesheet(&tokens, KeyframesCssParsingConfig(), &errors);
+  EXPECT_EQ(JsonFromList(errors), "[]");
+
+  EXPECT_EQ(stylesheet->ToJson().ToString(), R""({
+  "tokentype": "STYLESHEET",
+  "line": 1,
+  "col": 0,
+  "rules":  [
+    {
+      "tokentype": "QUALIFIED_RULE",
+      "line": 1,
+      "col": 0,
+      "prelude":      [
+        {
+          "tokentype": "IDENT",
+          "line": 1,
+          "col": 0,
+          "value": "amp-img"
+        },
+        {
+          "tokentype": "WHITESPACE",
+          "line": 1,
+          "col": 7
+        },
+        {
+          "tokentype": "EOF_TOKEN",
+          "line": 1,
+          "col": 8
+        }
+      ],
+      "declarations":      []
+    }
+  ],
+  "eof":  {
+    "tokentype": "EOF_TOKEN",
+    "line": 1,
+    "col": 10
+  }
+})"");
+
+  ValidateKeyframesCss(*stylesheet, &errors);
+  EXPECT_EQ(JsonFromList(errors), R""([
+  {
+    "tokentype": "ERROR",
+    "line": 1,
+    "col": 0,
+    "code": "CSS_SYNTAX_DISALLOWED_QUALIFIED_RULE_MUST_BE_INSIDE_KEYFRAME",
+    "params":    [
+      "style",
+      "amp-img"
+    ]
+  }
+])"");
+}  // Bad_NotAtRule
+
+TEST(KeyframesParseCssTest, Bad_NonKeyFrameWithDeclarations) {
+  std::vector<char32_t> css = htmlparser::Strings::Utf8ToCodepoints(
+      "@media (min-width: 300px) {"
+      "100% {offset-distance: 100%}"
+      "}");
+  std::vector<unique_ptr<ErrorToken>> errors;
+  std::vector<unique_ptr<Token>> tokens =
+      Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
+  unique_ptr<Stylesheet> stylesheet =
+      ParseAStylesheet(&tokens, KeyframesCssParsingConfig(), &errors);
+  EXPECT_EQ(JsonFromList(errors), "[]");
+
+  EXPECT_EQ(stylesheet->ToJson().ToString(), R""({
+  "tokentype": "STYLESHEET",
+  "line": 1,
+  "col": 0,
+  "rules":  [
+    {
+      "tokentype": "AT_RULE",
+      "line": 1,
+      "col": 0,
+      "name": "media",
+      "prelude":      [
+        {
+          "tokentype": "WHITESPACE",
+          "line": 1,
+          "col": 6
+        },
+        {
+          "tokentype": "OPEN_PAREN",
+          "line": 1,
+          "col": 7
+        },
+        {
+          "tokentype": "IDENT",
+          "line": 1,
+          "col": 8,
+          "value": "min-width"
+        },
+        {
+          "tokentype": "COLON",
+          "line": 1,
+          "col": 17
+        },
+        {
+          "tokentype": "WHITESPACE",
+          "line": 1,
+          "col": 18
+        },
+        {
+          "tokentype": "DIMENSION",
+          "line": 1,
+          "col": 19,
+          "repr": "300",
+          "type": "integer",
+          "unit": "px",
+          "value": 300.000000
+        },
+        {
+          "tokentype": "CLOSE_PAREN",
+          "line": 1,
+          "col": 24
+        },
+        {
+          "tokentype": "WHITESPACE",
+          "line": 1,
+          "col": 25
+        },
+        {
+          "tokentype": "EOF_TOKEN",
+          "line": 1,
+          "col": 26
+        }
+      ],
+      "rules":      [
+        {
+          "tokentype": "QUALIFIED_RULE",
+          "line": 1,
+          "col": 27,
+          "prelude":          [
+            {
+              "tokentype": "PERCENTAGE",
+              "line": 1,
+              "col": 27,
+              "repr": "100",
+              "value": 100.000000
+            },
+            {
+              "tokentype": "WHITESPACE",
+              "line": 1,
+              "col": 31
+            },
+            {
+              "tokentype": "EOF_TOKEN",
+              "line": 1,
+              "col": 32
+            }
+          ],
+          "declarations":          [
+            {
+              "tokentype": "DECLARATION",
+              "line": 1,
+              "col": 33,
+              "name": "offset-distance",
+              "important": false,
+              "value":              [
+                {
+                  "tokentype": "WHITESPACE",
+                  "line": 1,
+                  "col": 49
+                },
+                {
+                  "tokentype": "PERCENTAGE",
+                  "line": 1,
+                  "col": 50,
+                  "repr": "100",
+                  "value": 100.000000
+                },
+                {
+                  "tokentype": "EOF_TOKEN",
+                  "line": 1,
+                  "col": 54
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "declarations":      []
+    }
+  ],
+  "eof":  {
+    "tokentype": "EOF_TOKEN",
+    "line": 1,
+    "col": 56
+  }
+})"");
+
+  ValidateKeyframesCss(*stylesheet, &errors);
+  EXPECT_EQ(JsonFromList(errors), R""([
+  {
+    "tokentype": "ERROR",
+    "line": 1,
+    "col": 27,
+    "code": "CSS_SYNTAX_DISALLOWED_QUALIFIED_RULE_MUST_BE_INSIDE_KEYFRAME",
+    "params":    [
+      "style",
+      "100"
+    ]
+  }
+])"");
+}  // Bad_NonKeyFrameWithDeclarations
+
+TEST(KeyframesParseCssTest, TestCorrectPreludeConcatenation) {
+  std::vector<char32_t> css =
+      htmlparser::Strings::Utf8ToCodepoints("a.underlined {}");
+  std::vector<unique_ptr<ErrorToken>> errors;
+  std::vector<unique_ptr<Token>> tokens =
+      Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
+  unique_ptr<Stylesheet> stylesheet =
+      ParseAStylesheet(&tokens, KeyframesCssParsingConfig(), &errors);
+  EXPECT_EQ(stylesheet->ToJson().ToString(), R""({
+  "tokentype": "STYLESHEET",
+  "line": 1,
+  "col": 0,
+  "rules":  [
+    {
+      "tokentype": "QUALIFIED_RULE",
+      "line": 1,
+      "col": 0,
+      "prelude":      [
+        {
+          "tokentype": "IDENT",
+          "line": 1,
+          "col": 0,
+          "value": "a"
+        },
+        {
+          "tokentype": "DELIM",
+          "line": 1,
+          "col": 1,
+          "value": "."
+        },
+        {
+          "tokentype": "IDENT",
+          "line": 1,
+          "col": 2,
+          "value": "underlined"
+        },
+        {
+          "tokentype": "WHITESPACE",
+          "line": 1,
+          "col": 12
+        },
+        {
+          "tokentype": "EOF_TOKEN",
+          "line": 1,
+          "col": 13
+        }
+      ],
+      "declarations":      []
+    }
+  ],
+  "eof":  {
+    "tokentype": "EOF_TOKEN",
+    "line": 1,
+    "col": 15
+  }
+})"");
+  EXPECT_EQ(JsonFromList(errors), "[]");
+  ValidateKeyframesCss(*stylesheet, &errors);
+  EXPECT_EQ(JsonFromList(errors), R""([
+  {
+    "tokentype": "ERROR",
+    "line": 1,
+    "col": 0,
+    "code": "CSS_SYNTAX_DISALLOWED_QUALIFIED_RULE_MUST_BE_INSIDE_KEYFRAME",
+    "params":    [
+      "style",
+      "a.underlined"
+    ]
+  }
+])"");
+}  // TestCorrectPreludeConcatenation
+
+TEST(KeyframesParseCssTest, Bad_QualifiedRuleNotInsideAtRule) {
+  std::vector<char32_t> css =
+      htmlparser::Strings::Utf8ToCodepoints("a { color: red }");
+  std::vector<unique_ptr<ErrorToken>> errors;
+  std::vector<unique_ptr<Token>> tokens =
+      Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
+  unique_ptr<Stylesheet> stylesheet =
+      ParseAStylesheet(&tokens, KeyframesCssParsingConfig(), &errors);
+  EXPECT_EQ(JsonFromList(errors), "[]");
+  ValidateKeyframesCss(*stylesheet, &errors);
+  EXPECT_EQ(JsonFromList(errors), R""([
+  {
+    "tokentype": "ERROR",
+    "line": 1,
+    "col": 0,
+    "code": "CSS_SYNTAX_DISALLOWED_QUALIFIED_RULE_MUST_BE_INSIDE_KEYFRAME",
+    "params":    [
+      "style",
+      "a"
+    ]
+  }
+])"");
+}  // Bad_QualifiedRuleNotInsideAtRule
+
+TEST(KeyframesParseCssTest, Bad_QualifiedRuleKeyframeInsideKeyframe) {
+  std::vector<char32_t> css = htmlparser::Strings::Utf8ToCodepoints(
+      "@keyframes anim2 {"
+      "@keyframes anim1 {"
+      "100% {visibility: visible}"
+      "}"
+      "}");
+  std::vector<unique_ptr<ErrorToken>> errors;
+  std::vector<unique_ptr<Token>> tokens =
+      Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
+  unique_ptr<Stylesheet> stylesheet =
+      ParseAStylesheet(&tokens, KeyframesCssParsingConfig(), &errors);
+  EXPECT_EQ(JsonFromList(errors), "[]");
+  ValidateKeyframesCss(*stylesheet, &errors);
+  EXPECT_EQ(JsonFromList(errors), R""([
+  {
+    "tokentype": "ERROR",
+    "line": 1,
+    "col": 18,
+    "code": "CSS_SYNTAX_DISALLOWED_KEYFRAME_INSIDE_KEYFRAME",
+    "params":    [
+      "style"
+    ]
+  }
+])"");
+}  // Bad_QualifiedRuleKeyframeInsideKeyframe
+
+}  // namespace
+}  // namespace amp::validator::parse_css
diff --git a/validator/cpp/engine/parse-layout-sizes.cc b/validator/cpp/engine/parse-layout-sizes.cc
new file mode 100644
index 0000000000000..bd2a13e521dfa
--- /dev/null
+++ b/validator/cpp/engine/parse-layout-sizes.cc
@@ -0,0 +1,126 @@
+//
+// Copyright 2020 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.
+//
+
+#include "parse-layout-sizes.h"
+
+#include "absl/strings/str_split.h"
+#include "absl/strings/string_view.h"
+#include "strings.h"
+#include "re2/re2.h"  // NOLINT(build/deprecated)
+
+using absl::string_view;
+using absl::StrSplit;
+using std::vector;
+
+namespace amp::validator::parse_layout_sizes {
+namespace {
+// Given the index for where to divide between size source and maybe a media
+// condition, update the given CssSize object with those values.
+CssSize ExtractCssSizeFromCandidate(int32_t divider_index,
+                                    const string_view candidate) {
+  CssSize size;
+  if (divider_index >= 0) {
+    // Found size and media.
+    size.size =
+        candidate.substr(divider_index + 1, candidate.size() - divider_index);
+    size.media = candidate.substr(0, divider_index);
+  } else {
+    // Found only size which is the default size.
+    size.size = candidate;
+    size.is_default = true;
+  }
+  htmlparser::Strings::Trim(&size.size);
+  htmlparser::Strings::Trim(&size.media);
+  return size;
+}
+// Given a candidate that is a function (e.g. calc(10vw + 10px)) find the
+// opening param and return it's index within candidate.
+int32_t GetIndexOfOpeningParamForFunction(const string_view candidate) {
+  int32_t num_parens = 1;
+  int32_t index = candidate.size() - 2;
+  for (; index >= 0; index--) {
+    const char32_t c = candidate[index];
+    if (c == '(') {
+      // Found an opening param.
+      num_parens--;
+    } else if (c == ')') {
+      // // Found a closing param.
+      num_parens++;
+    }
+    if (num_parens == 0) {
+      // Break when these params are closed, now at beginning of the
+      // function "math" but not the name of the function.
+      break;
+    }
+  }
+  return index;
+}
+// These are the allowed characters within the source size value (CssSize.size)
+// when it is not a function.
+bool IsAllowedCharacter(char32_t c) {
+  return (c == '%' || c == '-' || c == '_' || (c >= 'a' && c <= 'z') ||
+          (c >= 'A' && c <= 'Z') || (c >= '0' && c <= '9'));
+}
+}  // namespace
+
+CssSizes::CssSizes(string_view input) : is_set(false), is_valid(false) {
+  static const RE2* kValidSize =
+      new RE2("^\\d+(\\.\\d+)?(px|em|rem|vh|vw|vmin|vmax|%)$");
+  // If there isn't any data, exit.
+  if (input.empty()) return;
+  is_set = true;
+  vector<string_view> candidates = StrSplit(input, ',');
+  for (auto candidate : candidates) {
+    htmlparser::Strings::Trim(&candidate);
+    // Skip empty candidates
+    if (candidate.empty()) continue;
+    int32_t divider_index;
+    bool is_size_a_function = false;
+    // Process candidate from the end of string to the front.
+    if (candidate.back() == ')') {
+      is_size_a_function = true;
+      divider_index = GetIndexOfOpeningParamForFunction(candidate);
+      // Find the beginning of the function's name.
+      const int32_t function_end_index = divider_index - 1;
+      if (divider_index > 0) {
+        divider_index--;
+        for (; divider_index >= 0; divider_index--) {
+          const char32_t c = candidate[divider_index];
+          if (!IsAllowedCharacter(c)) break;
+        }
+      }
+      // If there isn't a function name, exit.
+      if (divider_index >= function_end_index) return;
+    } else {
+      divider_index = candidate.size() - 2;
+      for (; divider_index >= 0; divider_index--) {
+        const char32_t c = candidate[divider_index];
+        if (!IsAllowedCharacter(c)) break;
+      }
+    }
+    CssSize size = ExtractCssSizeFromCandidate(divider_index, candidate);
+    // TODO: validate the media condition.
+    // Verify size is valid if not a function.
+    // TODO: validate the size when it is a function.
+    if (!is_size_a_function && !RE2::PartialMatch(size.size, *kValidSize))
+      return;
+    sizes.push_back(size);
+  }
+  // If sizes are parsed and found, set as valid.
+  if (!sizes.empty()) is_valid = true;
+}
+
+}  // namespace amp::validator::parse_layout_sizes
diff --git a/validator/cpp/engine/parse-layout-sizes.h b/validator/cpp/engine/parse-layout-sizes.h
new file mode 100644
index 0000000000000..20f04e8a4eb33
--- /dev/null
+++ b/validator/cpp/engine/parse-layout-sizes.h
@@ -0,0 +1,62 @@
+//
+// Copyright 2020 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.
+//
+
+#ifndef AMPVALIDATOR__PARSE_LAYOUT_SIZES_H_
+#define AMPVALIDATOR__PARSE_LAYOUT_SIZES_H_
+
+#include <vector>
+
+#include "absl/strings/string_view.h"
+
+namespace amp::validator::parse_layout_sizes {
+
+// WARNING: This code is still in development and not ready to be used.
+
+// This is a single represenation for the CssSizes object.
+// It consists of at least a valid size and a possible media condition.
+// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes
+struct CssSize {
+  // The source size value (e.g. 320px or calc(50vw + 10px).
+  absl::string_view size;
+  // The media condition (e.g. (min-width: 320px)).
+  absl::string_view media;
+  // Whether this is the default size (the last in a sizes attribute value).
+  bool is_default = false;
+
+  bool operator==(const CssSize& other) const {
+    return size == other.size && media == other.media &&
+           is_default == other.is_default;
+  }
+};
+
+// Parses the sizes attribute which is a part of AMP layout. Sizes consist of
+// at least one default size without a media condition and possibly zero or more
+// with both a media condition and a size.
+// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes
+struct CssSizes {
+  // Whether the attribute value is set.
+  bool is_set = false;
+  // Whether the attribute value is valid after attempting to parse.
+  bool is_valid = false;
+  // The collection of one or more source sizes. See CssSize.
+  std::vector<CssSize> sizes;
+  // Parses a given |input| value.
+  explicit CssSizes(absl::string_view input);
+};
+
+}  // namespace amp::validator::parse_layout_sizes
+
+#endif  // AMPVALIDATOR__PARSE_LAYOUT_SIZES_H_
diff --git a/validator/cpp/engine/parse-layout-sizes_test.cc b/validator/cpp/engine/parse-layout-sizes_test.cc
new file mode 100644
index 0000000000000..6038fcc18c55a
--- /dev/null
+++ b/validator/cpp/engine/parse-layout-sizes_test.cc
@@ -0,0 +1,122 @@
+//
+// Copyright 2020 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.
+//
+
+#include "parse-layout-sizes.h"
+
+#include <gmock/gmock.h>
+#include "gtest/gtest.h"
+
+using std::vector;
+using testing::ContainerEq;
+
+namespace amp::validator::parse_layout_sizes {
+::std::ostream& operator<<(::std::ostream& os, const CssSize& candidate) {
+  return os << "size='" << candidate.size << "' media='" << candidate.media
+            << "' is_default='" << candidate.is_default << "'";
+}
+
+namespace {
+// Shortcut for matching against a vector<CssSize>.
+::testing::Matcher<vector<CssSize>> EqCandidates(
+    const vector<CssSize>& candidates) {
+  return ::testing::MatcherCast<vector<CssSize>>(ContainerEq(candidates));
+}
+
+TEST(ParseLayoutSizes, CssSizes) {
+  CssSizes parsed("(min-width: 320px) 320px, 100vw");
+  EXPECT_TRUE(parsed.is_set);
+  EXPECT_TRUE(parsed.is_valid);
+  std::vector<CssSize> expected;
+  CssSize size_with_media;
+  size_with_media.size = "320px";
+  size_with_media.media = "(min-width: 320px)";
+  expected.push_back(size_with_media);
+  CssSize default_size;
+  default_size.size = "100vw";
+  default_size.is_default = true;
+  expected.push_back(default_size);
+  EXPECT_THAT(parsed.sizes, EqCandidates(expected));
+}
+
+TEST(ParseLayoutSizes, CssSizesWithFunction) {
+  CssSizes parsed("(min-width: 320px) 320px, calc(50vw + 10px)");
+  EXPECT_TRUE(parsed.is_set);
+  EXPECT_TRUE(parsed.is_valid);
+  std::vector<CssSize> expected;
+  CssSize size_with_media;
+  size_with_media.size = "320px";
+  size_with_media.media = "(min-width: 320px)";
+  expected.push_back(size_with_media);
+  CssSize default_size;
+  default_size.size = "calc(50vw + 10px)";
+  default_size.is_default = true;
+  expected.push_back(default_size);
+  EXPECT_THAT(parsed.sizes, EqCandidates(expected));
+}
+
+TEST(ParseLayoutSizes, CssSizesEmpty) {
+  CssSizes parsed("");
+  EXPECT_FALSE(parsed.is_set);
+  EXPECT_FALSE(parsed.is_valid);
+  EXPECT_THAT(parsed.sizes, EqCandidates({}));
+}
+
+TEST(ParseLayoutSizes, CssSizesInvalidCharacters) {
+  CssSizes parsed("(min-width: 320px) 320@, 100!");
+  EXPECT_TRUE(parsed.is_set);
+  EXPECT_FALSE(parsed.is_valid);
+  EXPECT_THAT(parsed.sizes, EqCandidates({}));
+}
+
+TEST(ParseLayoutSizes, CssSizesInvalidComment) {
+  CssSizes parsed("(min-width:240px)/*,*/ 240px, 100vw");
+  EXPECT_TRUE(parsed.is_set);
+  EXPECT_FALSE(parsed.is_valid);
+  EXPECT_THAT(parsed.sizes, EqCandidates({}));
+  CssSizes parsed_too("/*,*/ 100px");
+  EXPECT_TRUE(parsed_too.is_set);
+  EXPECT_FALSE(parsed_too.is_valid);
+  EXPECT_THAT(parsed_too.sizes, EqCandidates({}));
+}
+
+// TODO: Uncomment this test after parsing media condition fully.
+/*
+TEST(ParseLayoutSizes, CssSizesInvalidHtmlTags) {
+  CssSizes parsed("(min-width:240px)</style><script>alert(1);</script> 240px"
+                  ", 100vw");
+  EXPECT_TRUE(parsed.is_set);
+  EXPECT_FALSE(parsed.is_valid);
+}
+*/
+
+TEST(ParseLayoutSizes, CssSizesHandlesLeadingTrailingWhitespace) {
+  CssSizes parsed("   ( min-width : 320px )  320px ,  100vw   ");
+  EXPECT_TRUE(parsed.is_set);
+  EXPECT_TRUE(parsed.is_valid);
+  std::vector<CssSize> expected;
+  CssSize size_with_media;
+  size_with_media.size = "320px";
+  size_with_media.media = "( min-width : 320px )";
+  expected.push_back(size_with_media);
+  CssSize default_size;
+  default_size.size = "100vw";
+  default_size.is_default = true;
+  expected.push_back(default_size);
+  EXPECT_THAT(parsed.sizes, EqCandidates(expected));
+}
+
+}  // namespace
+}  // namespace amp::validator::parse_layout_sizes
diff --git a/validator/cpp/engine/parse-layout.cc b/validator/cpp/engine/parse-layout.cc
new file mode 100644
index 0000000000000..3bdfc7f06ccf5
--- /dev/null
+++ b/validator/cpp/engine/parse-layout.cc
@@ -0,0 +1,331 @@
+//
+// Copyright 2020 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.
+//
+
+#include "parse-layout.h"
+
+#include <string>
+#include <unordered_map>
+
+#include "absl/strings/ascii.h"
+#include "absl/strings/match.h"
+#include "absl/strings/str_cat.h"
+#include "absl/strings/str_format.h"
+#include "absl/strings/str_replace.h"
+#include "absl/strings/string_view.h"
+#include "google/protobuf/descriptor.pb.h"  // For GetEnumDescriptor
+#include "validator.pb.h"
+#include "re2/re2.h"  // NOLINT(build/deprecated)
+
+using absl::AsciiStrToLower;
+using absl::StrCat;
+using absl::StrReplaceAll;
+using absl::StrFormat;
+using absl::string_view;
+using amp::validator::AmpLayout;
+using std::unordered_map;
+
+namespace protocolbuffer = google::protobuf;
+
+namespace amp::validator::parse_layout {
+const char kUnitPx[] = "px";
+const char kUnitEm[] = "em";
+const char kUnitRem[] = "rem";
+const char kUnitVh[] = "vh";
+const char kUnitVw[] = "vw";
+const char kUnitVmin[] = "vmin";
+const char kUnitVmax[] = "vmax";
+static const auto* kAuto =
+    new CssLength("auto", /*allow_auto=*/true, /*allow_fluid=*/false);
+static const auto* kFortyFourPx =
+    new CssLength("44", /*allow_auto=*/false, /*allow_fluid=*/false);
+static const auto* kOnePx =
+    new CssLength("1", /*allow_auto=*/false, /*allow_fluid=*/false);
+static const auto* kSixtyPx =
+    new CssLength("60", /*allow_auto=*/false, /*allow_fluid=*/false);
+
+CssLength::CssLength()
+    : is_valid(false),
+      is_set(false),
+      is_auto(false),
+      is_fluid(false),
+      numeral(std::numeric_limits<double>::quiet_NaN()),
+      unit(kUnitPx) {}
+CssLength::CssLength(
+    re2::StringPiece input,
+    bool allow_auto, bool allow_fluid)
+    : is_valid(false),
+      is_set(false),
+      is_auto(false),
+      is_fluid(false),
+      numeral(std::numeric_limits<double>::quiet_NaN()),
+      unit(kUnitPx) {
+  static const RE2* kLeadingNumber = new RE2("(\\d+(?:\\.\\d+)?)");
+
+  if (input.data() == nullptr) {
+    is_valid = true;
+    return;
+  }
+  is_set = true;
+  if (input == "auto") {
+    is_auto = true;
+    is_valid = allow_auto;
+    return;
+  } else if (input == "fluid") {
+    is_fluid = true;
+    is_valid = allow_fluid;
+    return;
+  }
+  if (!RE2::Consume(&input, *kLeadingNumber, &numeral)) return;
+  if (input.empty()) {  // empty means the default, that is "px".
+    is_valid = true;
+  } else if (input == "px") {  // "px" is default, so no need to assign.
+    is_valid = true;
+  } else if (input == "em") {
+    unit = kUnitEm;
+    is_valid = true;
+  } else if (input == "rem") {
+    unit = kUnitRem;
+    is_valid = true;
+  } else if (input == "vh") {
+    unit = kUnitVh;
+    is_valid = true;
+  } else if (input == "vw") {
+    unit = kUnitVw;
+    is_valid = true;
+  } else if (input == "vmin") {
+    unit = kUnitVmin;
+    is_valid = true;
+  } else if (input == "vmax") {
+    unit = kUnitVmax;
+    is_valid = true;
+  }
+}
+
+AmpLayout::Layout ParseLayout(string_view layout) {
+  static unordered_map<std::string, AmpLayout::Layout> layouts_by_attr_val({
+      {"container", AmpLayout::CONTAINER},
+      {"fill", AmpLayout::FILL},
+      {"fixed", AmpLayout::FIXED},
+      {"fixed-height", AmpLayout::FIXED_HEIGHT},
+      {"flex-item", AmpLayout::FLEX_ITEM},
+      {"fluid", AmpLayout::FLUID},
+      {"intrinsic", AmpLayout::INTRINSIC},
+      {"nodisplay", AmpLayout::NODISPLAY},
+      {"responsive", AmpLayout::RESPONSIVE},
+      {"unknown", AmpLayout::UNKNOWN},
+  });
+  if (layout.empty()) return AmpLayout::UNKNOWN;
+  auto it = layouts_by_attr_val.find(std::string(layout));
+  return (it == layouts_by_attr_val.end()) ? AmpLayout::UNKNOWN : it->second;
+}
+
+AmpLayout::Layout ParseAndCalculateLayout(string_view layout, string_view width,
+                                          string_view height,
+                                          string_view tagname, bool has_sizes,
+                                          bool has_heights,
+                                          CssLength* effective_width,
+                                          CssLength* effective_height) {
+  AmpLayout::Layout input_layout = ParseLayout(layout);
+
+  CssLength input_width(width, /*allow_auto=*/true,
+                        /*allow_fluid=*/input_layout == AmpLayout::FLUID);
+  if (!input_width.is_valid) return AmpLayout::UNKNOWN;
+
+  CssLength input_height(height, /*allow_auto=*/true,
+                         /*allow_fluid=*/input_layout == AmpLayout::FLUID);
+  if (!input_height.is_valid) return AmpLayout::UNKNOWN;
+
+  // Calculate effective height, width and layout.
+  *effective_height = CalculateHeight(input_layout, input_height, tagname);
+  *effective_width = CalculateWidth(input_layout, input_width, tagname);
+
+  return CalculateLayout(input_layout, *effective_width, *effective_height,
+                         has_sizes, has_heights);
+}
+
+CssLength CalculateWidth(AmpLayout::Layout input_layout,
+                         const CssLength& input_width, string_view tagname) {
+  if ((input_layout == AmpLayout::UNKNOWN ||
+       input_layout == AmpLayout::FIXED) &&
+      !input_width.is_set) {
+    // These values come from AMP's external runtime and can be found in
+    // https://github.com/ampproject/amphtml/blob/main/src/layout.js#L70
+    // Note that amp-audio is absent due to it not having explicit dimensions
+    // (the dimensions are determined at runtime and are specific to the
+    // particular device/browser/etc).
+    if (absl::EqualsIgnoreCase(tagname, "AMP-ANALYTICS")) return *kOnePx;
+    if (absl::EqualsIgnoreCase(tagname, "AMP-PIXEL")) return *kOnePx;
+    if (absl::EqualsIgnoreCase(tagname, "AMP-SOCIAL-SHARE")) return *kSixtyPx;
+  }
+  return input_width;
+}
+
+CssLength CalculateWidth(const AmpLayout& spec, AmpLayout::Layout input_layout,
+                         const CssLength& input_width) {
+  static const auto* kOne =
+      new CssLength("1", /*allow_auto=*/false, /*allow_fluid=*/false);
+  if ((input_layout == AmpLayout::UNKNOWN ||
+       input_layout == AmpLayout::FIXED) &&
+      !input_width.is_set && spec.defines_default_width())
+    return *kOne;
+  return input_width;
+}
+
+CssLength CalculateHeight(AmpLayout::Layout input_layout,
+                          const CssLength& input_height, string_view tagname) {
+  if ((input_layout == AmpLayout::UNKNOWN || input_layout == AmpLayout::FIXED ||
+       input_layout == AmpLayout::FIXED_HEIGHT) &&
+      !input_height.is_set) {
+    // These values come from AMP's external runtime and can be found in
+    // https://github.com/ampproject/amphtml/blob/main/src/layout.js#L70
+    // Note that amp-audio is absent due to it not having explicit dimensions
+    // (the dimensions are determined at runtime and are specific to the
+    // particular device/browser/etc).
+    if (absl::EqualsIgnoreCase(tagname, "AMP-ANALYTICS")) return *kOnePx;
+    if (absl::EqualsIgnoreCase(tagname, "AMP-PIXEL")) return *kOnePx;
+    if (absl::EqualsIgnoreCase(tagname, "AMP-SOCIAL-SHARE"))
+      return *kFortyFourPx;
+  }
+  return input_height;
+}
+
+CssLength CalculateHeight(const AmpLayout& spec, AmpLayout::Layout input_layout,
+                          const CssLength& input_height) {
+  if ((input_layout == AmpLayout::UNKNOWN || input_layout == AmpLayout::FIXED ||
+       input_layout == AmpLayout::FIXED_HEIGHT) &&
+      !input_height.is_set && spec.defines_default_height())
+    return *kOnePx;
+  return input_height;
+}
+
+AmpLayout::Layout CalculateLayout(AmpLayout::Layout input_layout,
+                                  const CssLength& width,
+                                  const CssLength& height, bool has_sizes,
+                                  bool has_heights) {
+  if (input_layout != AmpLayout::UNKNOWN) return input_layout;
+  if (!width.is_set && !height.is_set) return AmpLayout::CONTAINER;
+  if ((height.is_set && height.is_fluid) || (width.is_set && width.is_fluid))
+    return AmpLayout::FLUID;
+  if (height.is_set && (!width.is_set || width.is_auto))
+    return AmpLayout::FIXED_HEIGHT;
+  if (height.is_set && width.is_set && (has_sizes || has_heights))
+    return AmpLayout::RESPONSIVE;
+  return AmpLayout::FIXED;
+}
+
+std::string GetCssLengthStyle(const CssLength& length,
+                              const std::string& type) {
+  if (!length.is_set) return "";
+  if (length.is_auto) return StrCat(type, ":auto;");
+  return StrCat(type, ":", absl::AlphaNum(length.numeral), length.unit,
+                ";");
+}
+
+std::string GetLayoutClass(AmpLayout::Layout layout) {
+  static unordered_map<AmpLayout::Layout, std::string> classes_by_layout({
+      {AmpLayout::CONTAINER, "i-amphtml-layout-container"},
+      {AmpLayout::FILL, "i-amphtml-layout-fill"},
+      {AmpLayout::FIXED, "i-amphtml-layout-fixed"},
+      {AmpLayout::FIXED_HEIGHT, "i-amphtml-layout-fixed-height"},
+      {AmpLayout::FLEX_ITEM, "i-amphtml-layout-flex-item"},
+      {AmpLayout::FLUID, "i-amphtml-layout-fluid"},
+      {AmpLayout::INTRINSIC, "i-amphtml-layout-intrinsic"},
+      {AmpLayout::NODISPLAY, "i-amphtml-layout-nodisplay"},
+      {AmpLayout::RESPONSIVE, "i-amphtml-layout-responsive"},
+      {AmpLayout::UNKNOWN, "i-amphtml-layout-unknown"},
+  });
+  if (layout == AmpLayout::UNKNOWN) return "";
+
+  if (auto iter = classes_by_layout.find(layout);
+      iter != classes_by_layout.end()) {
+    return iter->second;
+  }
+
+  return "";
+}
+
+std::string GetLayoutName(AmpLayout::Layout layout) {
+  static unordered_map<AmpLayout::Layout, std::string> names_by_layout({
+      {AmpLayout::CONTAINER, "container"},
+      {AmpLayout::FILL, "fill"},
+      {AmpLayout::FIXED, "fixed"},
+      {AmpLayout::FIXED_HEIGHT, "fixed-height"},
+      {AmpLayout::FLEX_ITEM, "flex-item"},
+      {AmpLayout::FLUID, "fluid"},
+      {AmpLayout::INTRINSIC, "intrinsic"},
+      {AmpLayout::NODISPLAY, "nodisplay"},
+      {AmpLayout::RESPONSIVE, "responsive"},
+      {AmpLayout::UNKNOWN, "unknown"},
+  });
+  if (layout == AmpLayout::UNKNOWN) return "";
+
+  if (auto iter = names_by_layout.find(layout); iter != names_by_layout.end()) {
+    return iter->second;
+  }
+
+  return "";
+}
+
+std::string GetLayoutStyle(AmpLayout::Layout layout, const CssLength& width,
+                           const CssLength& height) {
+  switch (layout) {
+    case AmpLayout::FIXED:
+    case AmpLayout::FLEX_ITEM:
+      return StrCat(GetCssLengthStyle(width, "width"),
+                    GetCssLengthStyle(height, "height"));
+    case AmpLayout::FIXED_HEIGHT:
+      return GetCssLengthStyle(height, "height");
+    case AmpLayout::FLUID:
+      return "width:100%;height:0;";
+    case AmpLayout::NODISPLAY:
+    case AmpLayout::RESPONSIVE:
+    case AmpLayout::FILL:
+    case AmpLayout::CONTAINER:
+    default:
+      // No style attribute.
+      return "";
+  }
+}
+
+std::string GetSizerStyle(AmpLayout::Layout layout, const CssLength& width,
+                          const CssLength& height) {
+  if (layout != AmpLayout::RESPONSIVE || !width.is_set || width.numeral == 0 ||
+      !height.is_set || width.unit != height.unit)
+    return "";
+  double padding = height.numeral / width.numeral * 100;
+  return StrFormat("display:block;padding-top:%.4f%%;", padding);
+}
+
+bool IsLayoutSizeDefined(AmpLayout::Layout layout) {
+  return (layout == AmpLayout::FIXED || layout == AmpLayout::FIXED_HEIGHT ||
+          layout == AmpLayout::RESPONSIVE || layout == AmpLayout::FILL ||
+          layout == AmpLayout::FLEX_ITEM || layout == AmpLayout::FLUID ||
+          layout == AmpLayout::INTRINSIC);
+}
+
+bool IsLayoutAwaitingSize(AmpLayout::Layout layout) {
+  return layout == AmpLayout::FLUID;
+}
+
+std::string GetLayoutSizeDefinedClass() {
+  return "i-amphtml-layout-size-defined";
+}
+
+std::string GetLayoutAwaitingSizeClass() {
+  return "i-amphtml-layout-awaiting-size";
+}
+
+}  // namespace amp::validator::parse_layout
diff --git a/validator/cpp/engine/parse-layout.h b/validator/cpp/engine/parse-layout.h
new file mode 100644
index 0000000000000..98ee547b95bfd
--- /dev/null
+++ b/validator/cpp/engine/parse-layout.h
@@ -0,0 +1,136 @@
+//
+// Copyright 2020 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.
+//
+
+#ifndef AMPVALIDATOR__PARSE_LAYOUT_H_
+#define AMPVALIDATOR__PARSE_LAYOUT_H_
+
+#include <string>
+
+#include "absl/strings/string_view.h"
+#include "validator.pb.h"
+#include "re2/re2.h"
+
+namespace amp::validator::parse_layout {
+
+// Parses a width or height layout attribute, for the determining the layout
+// of AMP tags (e.g. <amp-img width="42px" ...) following the CSS length
+// standard found at https://developer.mozilla.org/en-US/docs/Web/CSS/length.
+// TODO: Consider using parse-css.cc for parsing some of this.
+struct CssLength {
+  // Whether the value or unit is invalid. Note that passing
+  // nullptr as |input| is considered valid.
+  bool is_valid;
+  // Whether the attribute value is set.
+  bool is_set;
+  // Whether the attribute value is 'auto'. This is a special value that
+  // indicates that the value gets derived from the context. In practice
+  // that's only ever the case for a width.
+  bool is_auto;
+  // Whether the attribute value is 'fluid'.
+  bool is_fluid;
+  // The numeric value.
+  double numeral;
+  // The unit. Note that if the unit is absent, it's assumed to be 'px'.
+  absl::string_view unit;
+
+  // Creates a default, invalid CssLength.
+  explicit CssLength();
+  // Parses a given |input| value. |allow_auto| determines whether 'auto'
+  // is accepted as a value. |allow_fluid| determines whether 'fluid' is
+  // accepted as a value.
+  explicit CssLength(
+      re2::StringPiece input,
+      bool allow_auto, bool allow_fluid);
+};
+
+// Interprets a |layout| string, such as fixed-height, as
+// AmpLayout::Layout. Returns AmpLayout::UNKNOWN if the provided
+// StringPiece is nullptr or if the layout can't be determined.
+amp::validator::AmpLayout::Layout ParseLayout(absl::string_view layout);
+
+// Fully interprets an AMP element's layout as AmpLayout::Layout.
+// If the layout is not explicitly stated via the layout attribute, then the
+// layout will be interpreted from the implicit rules. Returns
+// AmpLayout::UNKNOWN if the layout can't be determined.
+// The width and height output parameters will be set to the calculated sizes.
+amp::validator::AmpLayout::Layout ParseAndCalculateLayout(
+    absl::string_view layout, absl::string_view width, absl::string_view height,
+    absl::string_view tagname, bool has_sizes, bool has_heights,
+    CssLength* effective_width, CssLength* effective_height);
+
+// Calculates the effective width from the input layout and width.
+// This involves considering that some elements, such as amp-audio and
+// amp-pixel, have natural dimensions (browser or implementation-specific
+// defaults for width / height).
+CssLength CalculateWidth(amp::validator::AmpLayout::Layout input_layout,
+                         const CssLength& input_width,
+                         absl::string_view tagname);
+CssLength CalculateWidth(const amp::validator::AmpLayout& spec,
+                         amp::validator::AmpLayout::Layout input_layout,
+                         const CssLength& input_width);
+
+// Calculates the effective height from input layout and input height.
+CssLength CalculateHeight(amp::validator::AmpLayout::Layout input_layout,
+                          const CssLength& input_height,
+                          absl::string_view tagname);
+CssLength CalculateHeight(const amp::validator::AmpLayout& spec,
+                          amp::validator::AmpLayout::Layout input_layout,
+                          const CssLength& input_height);
+
+// Calculates the layout; this depends on the width / height
+// calculation above. It happens last because web designers often make
+// fixed-sized mocks first and then the layout determines how things
+// will change for different viewports / devices / etc.
+amp::validator::AmpLayout::Layout CalculateLayout(
+    amp::validator::AmpLayout::Layout input_layout, const CssLength& width,
+    const CssLength& height, bool has_sizes, bool has_heights);
+
+// Returns the CSS style for this CssLength prefixed with type which most likely
+// will be either height or width.
+std::string GetCssLengthStyle(const CssLength& length, const std::string& type);
+
+// Returns the CSS class name for the given AmpLayout. Equivalent to
+// https://github.com/ampproject/amphtml/blob/main/src/layout.js.
+std::string GetLayoutClass(amp::validator::AmpLayout::Layout layout);
+
+// Returns the name for the given AmpLayout.
+std::string GetLayoutName(amp::validator::AmpLayout::Layout layout);
+
+// Returns the CSS style for the given AmpLayout, width and height.
+std::string GetLayoutStyle(amp::validator::AmpLayout::Layout layout,
+                           const CssLength& width, const CssLength& height);
+
+// Returns the CSS style for an <i-amphtml-sizer> based on the given AmpLayout,
+// width and height.
+std::string GetSizerStyle(amp::validator::AmpLayout::Layout layout,
+                          const CssLength& width, const CssLength& height);
+
+// Returns whether the given AmpLayout has size defined. Equivalent to
+// https://github.com/ampproject/amphtml/blob/main/src/layout.js.
+bool IsLayoutSizeDefined(amp::validator::AmpLayout::Layout layout);
+
+// Returns whether the given AmpLayout waits on a runtime size.
+bool IsLayoutAwaitingSize(amp::validator::AmpLayout::Layout layout);
+
+// Returns the CSS class name for AmpLayouts with defined sizes.
+std::string GetLayoutSizeDefinedClass();
+
+// Returns the CSS class name for AmpLayouts which wait on a runtime size.
+std::string GetLayoutAwaitingSizeClass();
+
+}  // namespace amp::validator::parse_layout
+
+#endif  // AMPVALIDATOR__PARSE_LAYOUT_H_
diff --git a/validator/cpp/engine/parse-layout_test.cc b/validator/cpp/engine/parse-layout_test.cc
new file mode 100644
index 0000000000000..abd76cc8359be
--- /dev/null
+++ b/validator/cpp/engine/parse-layout_test.cc
@@ -0,0 +1,262 @@
+//
+// Copyright 2020 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.
+//
+
+#include "parse-layout.h"
+
+#include "gtest/gtest.h"
+#include "absl/strings/str_cat.h"
+#include "absl/strings/string_view.h"
+
+using amp::validator::AmpLayout;
+
+namespace amp::validator::parse_layout {
+namespace {
+
+TEST(ParseLayout, BasicCssLength) {
+  CssLength parsed("10.1em", /*allow_auto=*/false, /*allow_fluid=*/false);
+  EXPECT_TRUE(parsed.is_set);
+  EXPECT_TRUE(parsed.is_valid);
+  EXPECT_EQ(10.1, parsed.numeral);
+  EXPECT_EQ("em", parsed.unit);
+  EXPECT_FALSE(parsed.is_auto);
+}
+
+TEST(ParseLayout, SupportsSeveralUnits) {
+  for (const char* allowed_unit : {"px", "em", "rem", "vh", "vmin", "vmax"}) {
+    SCOPED_TRACE(absl::StrCat("allowed_unit: ", allowed_unit));
+    std::string example = absl::StrCat("10", allowed_unit);
+    CssLength parsed(example, /*allow_auto=*/false, /*allow_fluid=*/false);
+    EXPECT_TRUE(parsed.is_set);
+    EXPECT_TRUE(parsed.is_valid);
+    EXPECT_EQ(10, parsed.numeral);
+    EXPECT_EQ(allowed_unit, parsed.unit);
+    EXPECT_FALSE(parsed.is_auto);
+  }
+}
+
+TEST(ParseLayout, EmptyUnitIsPx) {
+  CssLength parsed("10", /*allow_auto=*/false, /*allow_fluid=*/false);
+  EXPECT_TRUE(parsed.is_set);
+  EXPECT_TRUE(parsed.is_valid);
+  EXPECT_EQ(10, parsed.numeral);
+  EXPECT_EQ("px", parsed.unit);
+  EXPECT_FALSE(parsed.is_auto);
+}
+
+TEST(ParseLayout, NullPtrInCssLengthIsValid) {
+  // This means the attribute value is not set.
+  CssLength parsed(absl::string_view(), /*allow_auto=*/false,
+                   /*allow_fluid=*/false);
+  EXPECT_FALSE(parsed.is_set);
+  EXPECT_TRUE(parsed.is_valid);
+  EXPECT_EQ("px", parsed.unit);
+  EXPECT_FALSE(parsed.is_auto);
+}
+
+TEST(ParseLayout, EmptyStringInCssLengthIsInvalid) {
+  // This means the attribute value is empty.
+  CssLength parsed("", /*allow_auto=*/false, /*allow_fluid=*/false);
+  EXPECT_FALSE(parsed.is_valid);
+}
+
+TEST(ParseLayout, OtherGarbageInCssLengthIsInvalid) {
+  EXPECT_FALSE(CssLength("100%",
+                         /*allow_auto=*/false, /*allow_fluid=*/false)
+                   .is_valid);
+  EXPECT_FALSE(CssLength("not a number",
+                         /*allow_auto=*/false, /*allow_fluid=*/false)
+                   .is_valid);
+  EXPECT_FALSE(CssLength("1.1.1",
+                         /*allow_auto=*/false, /*allow_fluid=*/false)
+                   .is_valid);
+  EXPECT_FALSE(CssLength("5inches",
+                         /*allow_auto=*/false, /*allow_fluid=*/false)
+                   .is_valid);
+  EXPECT_FALSE(CssLength("fahrenheit",
+                         /*allow_auto=*/false, /*allow_fluid=*/false)
+                   .is_valid);
+  EXPECT_FALSE(CssLength("px",
+                         /*allow_auto=*/false, /*allow_fluid=*/false)
+                   .is_valid);
+  EXPECT_FALSE(CssLength("ix unciae",  // Screen size in ancient Rome.
+                         /*allow_auto=*/false, /*allow_fluid=*/false)
+                   .is_valid);
+}
+
+TEST(ParseLayout, CssLengthRecognizesAutoIfAllowAuto) {
+  {  // allow_auto = false with input != auto
+    CssLength parsed("1", /*allow_auto=*/false, /*allow_fluid=*/false);
+    EXPECT_TRUE(parsed.is_valid);
+    EXPECT_FALSE(parsed.is_auto);
+  }
+  {  // allow_auto = true with input != auto
+    CssLength parsed("1", /*allow_auto=*/true, /*allow_fluid=*/false);
+    EXPECT_TRUE(parsed.is_valid);
+    EXPECT_FALSE(parsed.is_auto);
+  }
+  {  // allow_auto = false with input = auto
+    CssLength parsed("auto", /*allow_auto=*/false, /*allow_fluid=*/false);
+    EXPECT_FALSE(parsed.is_valid);
+  }
+  {  // allow_auto = true with input = auto
+    CssLength parsed("auto", /*allow_auto=*/true, /*allow_fluid=*/false);
+    EXPECT_TRUE(parsed.is_valid);
+    EXPECT_TRUE(parsed.is_auto);
+  }
+}
+
+TEST(ParseLayout, CssLengthRecognizesFluidIfAllowFluid) {
+  {  // allow_fluid = false with input != fluid
+    CssLength parsed("1", /*allow_auto=*/false, /*allow_fluid=*/false);
+    EXPECT_TRUE(parsed.is_valid);
+    EXPECT_FALSE(parsed.is_fluid);
+  }
+  {  // allow_fluid = true with input != fluid
+    CssLength parsed("1", /*allow_auto=*/false, /*allow_fluid=*/true);
+    EXPECT_TRUE(parsed.is_valid);
+    EXPECT_FALSE(parsed.is_fluid);
+  }
+  {  // allow_fluid = false with input = fluid
+    CssLength parsed("fluid", /*allow_auto=*/false, /*allow_fluid=*/false);
+    EXPECT_FALSE(parsed.is_valid);
+  }
+  {  // allow_fluid = true with input = fluid
+    CssLength parsed("fluid", /*allow_auto=*/false, /*allow_fluid=*/true);
+    EXPECT_TRUE(parsed.is_valid);
+    EXPECT_TRUE(parsed.is_fluid);
+  }
+}
+
+TEST(ParseLayout, CalculateHeightAmpAnalytics) {
+  CssLength expected_output("1", /*allow_auto=*/false, /*allow_fluid=*/false);
+  CssLength output =
+      CalculateHeight(AmpLayout::FIXED,
+                      CssLength(absl::string_view(), /*allow_auto=*/false,
+                                /*allow_fluid=*/false),
+                      "AMP-ANALYTICS");
+  EXPECT_EQ(expected_output.numeral, output.numeral);
+  EXPECT_EQ(expected_output.unit, output.unit);
+}
+
+TEST(ParseLayout, CalculateWidthAmpAnalytics) {
+  CssLength expected_output("1", /*allow_auto=*/false, /*allow_fluid=*/false);
+  CssLength output =
+      CalculateWidth(AmpLayout::FIXED,
+                     CssLength(absl::string_view(), /*allow_auto=*/false,
+                               /*allow_fluid=*/false),
+                     "AMP-ANALYTICS");
+  EXPECT_EQ(expected_output.numeral, output.numeral);
+  EXPECT_EQ(expected_output.unit, output.unit);
+}
+
+TEST(ParseLayout, CalculateHeightAmpPixel) {
+  CssLength expected_output("1", /*allow_auto=*/false, /*allow_fluid=*/false);
+  CssLength output =
+      CalculateHeight(AmpLayout::FIXED,
+                      CssLength(absl::string_view(), /*allow_auto=*/false,
+                                /*allow_fluid=*/false),
+                      "AMP-PIXEL");
+  EXPECT_EQ(expected_output.numeral, output.numeral);
+  EXPECT_EQ(expected_output.unit, output.unit);
+}
+
+TEST(ParseLayout, CalculateWidthAmpPixel) {
+  CssLength expected_output("1", /*allow_auto=*/false, /*allow_fluid=*/false);
+  CssLength output =
+      CalculateWidth(AmpLayout::FIXED,
+                     CssLength(absl::string_view(), /*allow_auto=*/false,
+                               /*allow_fluid=*/false),
+                     "AMP-PIXEL");
+  EXPECT_EQ(expected_output.numeral, output.numeral);
+  EXPECT_EQ(expected_output.unit, output.unit);
+}
+
+TEST(ParseLayout, CalculateHeightAmpSocialShare) {
+  CssLength expected_output("44", /*allow_auto=*/false, /*allow_fluid=*/false);
+  CssLength output =
+      CalculateHeight(AmpLayout::FIXED,
+                      CssLength(absl::string_view(), /*allow_auto=*/false,
+                                /*allow_fluid=*/false),
+                      "AMP-SOCIAL-SHARE");
+  EXPECT_EQ(expected_output.numeral, output.numeral);
+  EXPECT_EQ(expected_output.unit, output.unit);
+}
+
+TEST(ParseLayout, CalculateWidthAmpSocialShare) {
+  CssLength expected_output("60", /*allow_auto=*/false, /*allow_fluid=*/false);
+  CssLength output =
+      CalculateWidth(AmpLayout::FIXED,
+                     CssLength(absl::string_view(), /*allow_auto=*/false,
+                               /*allow_fluid=*/false),
+                     "AMP-SOCIAL-SHARE");
+  EXPECT_EQ(expected_output.numeral, output.numeral);
+  EXPECT_EQ(expected_output.unit, output.unit);
+}
+
+TEST(ParseLayout, CalculateHeightCustomElement) {
+  CssLength expected_output("720", /*allow_auto=*/false, /*allow_fluid=*/false);
+  CssLength output = CalculateHeight(
+      AmpLayout::FIXED,
+      CssLength("720", /*allow_auto=*/false, /*allow_fluid=*/false),
+      "AMP-YOUTUBE");
+  EXPECT_EQ(expected_output.numeral, output.numeral);
+  EXPECT_EQ(expected_output.unit, output.unit);
+}
+
+TEST(ParseLayout, CalculateWidthCustomElement) {
+  CssLength expected_output("480", /*allow_auto=*/false, /*allow_fluid=*/false);
+  CssLength output = CalculateWidth(
+      AmpLayout::FIXED,
+      CssLength("480", /*allow_auto=*/false, /*allow_fluid=*/false),
+      "AMP-YOUTUBE");
+  EXPECT_EQ(expected_output.numeral, output.numeral);
+  EXPECT_EQ(expected_output.unit, output.unit);
+}
+
+TEST(ParseLayout, GetCssLengthStyle) {
+  CssLength empty_unit_is_px("30", /*allow_auto=*/false, /*allow_fluid=*/false);
+  EXPECT_EQ(GetCssLengthStyle(empty_unit_is_px, "height"), "height:30px;");
+  CssLength em_unit("10.1em", /*allow_auto=*/false, /*allow_fluid=*/false);
+  EXPECT_EQ(GetCssLengthStyle(em_unit, "width"), "width:10.1em;");
+  CssLength is_auto("auto", /*allow_auto=*/true, /*allow_fluid=*/false);
+  EXPECT_EQ(GetCssLengthStyle(is_auto, "width"), "width:auto;");
+  CssLength no_value(absl::string_view(), /*allow_auto=*/false,
+                     /*allow_fluid=*/false);
+  EXPECT_EQ(GetCssLengthStyle(no_value, "height"), "");
+}
+
+TEST(ParseLayout, GetLayoutClass) {
+  EXPECT_EQ(GetLayoutClass(AmpLayout::FIXED_HEIGHT),
+            "i-amphtml-layout-fixed-height");
+  EXPECT_EQ(GetLayoutClass(AmpLayout::RESPONSIVE),
+            "i-amphtml-layout-responsive");
+  EXPECT_EQ(GetLayoutClass(AmpLayout::UNKNOWN), "");
+}
+
+TEST(ParseLayout, GetLayoutName) {
+  EXPECT_EQ(GetLayoutName(AmpLayout::FIXED_HEIGHT), "fixed-height");
+  EXPECT_EQ(GetLayoutName(AmpLayout::RESPONSIVE), "responsive");
+  EXPECT_EQ(GetLayoutName(AmpLayout::UNKNOWN), "");
+}
+
+TEST(ParseLayout, IsLayoutSizeDefined) {
+  EXPECT_TRUE(IsLayoutSizeDefined(AmpLayout::FILL));
+  EXPECT_FALSE(IsLayoutSizeDefined(AmpLayout::CONTAINER));
+  EXPECT_FALSE(IsLayoutSizeDefined(AmpLayout::UNKNOWN));
+}
+
+}  // namespace
+}  // namespace amp::validator::parse_layout
diff --git a/validator/cpp/engine/parse-srcset.cc b/validator/cpp/engine/parse-srcset.cc
new file mode 100644
index 0000000000000..4efe52508e4c9
--- /dev/null
+++ b/validator/cpp/engine/parse-srcset.cc
@@ -0,0 +1,118 @@
+//
+// Copyright 2020 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.
+//
+
+#include "parse-srcset.h"
+
+#include <unordered_set>
+#include <vector>
+
+#include "absl/strings/string_view.h"
+#include "re2/re2.h"
+
+using amp::validator::ValidationError;
+using std::unordered_set;
+using std::vector;
+
+namespace amp::validator::parse_srcset {
+// If parsing fails, returns false in SrcsetParsingResult.status.
+SrcsetParsingResult ParseSourceSet(
+    re2::StringPiece srcset
+) {
+  // Regex for leading spaces, followed by an optional comma and whitespace,
+  // followed by an URL*, followed by an optional space, followed by an
+  // optional width or pixel density**, followed by spaces, followed by an
+  // optional comma and whitespace.
+  //
+  // URL*: matches non-space, non-empty string which neither ends nor begins
+  // with a comma. The set of space characters in the srcset attribute is
+  // defined to include only ascii characters, so using \s, which is an
+  // ascii only character set, is fine. See
+  // https://html.spec.whatwg.org/multipage/infrastructure.html#space-character.
+  //
+  // Optional width or pixel density**: Matches the empty string or (one or
+  // more spaces + a non empty string containing no space or commas).
+  // Doesn't capture the initial space.
+  //
+  // \s*                       Match, but don't capture leading spaces.
+  // (?:,\s*)?                 Optionally match comma and trailing space,
+  //                           but don't capture comma.
+  // ([^,\s]\S*[^,\s])         Match something like "google.com/favicon.ico"
+  //                           but not ",google.com/favicon.ico,".
+  // \s*                       Match, but don't capture spaces.
+  // (                         Match the width or density descriptor...
+  // \s*                       Match, but don't capture space
+  // (                         Match the width or density descriptor...
+  //   [1-9]\d*[wx]            which is a non-zero integer followed by a w
+  //                           or an x ...
+  //   |                       or ...
+  //   [1-9]\d*\.\d+x          a decimal with its whole-number part greater
+  //                           than zero and followed by an x ...
+  //   |                       or ...
+  //   0\.\d*[1-9]\d*x         a decimal with its fractional part greater
+  //                           than zero and followed by an x ...
+  // )?                        and make it optional.
+  // \s*                       Match, but don't capture space.
+  // (?:(,)\s*)?               Optionally match comma and trailing space,
+  //                           capturing comma.
+  static LazyRE2 image_candidate_regex = {
+      "\\s*"
+      "(?:,\\s*)?"
+      "([^,\\s]\\S*[^,\\s])"
+      "\\s*"
+      "("
+      "[1-9]\\d*[wx]"
+      "|"
+      "[1-9]\\d*\\.\\d+x"
+      "|"
+      "0\\.\\d*[1-9]\\d*x"
+      ")?"
+      "\\s*"
+      "(?:(,)\\s*)?"};
+
+  vector<ImageCandidate> candidates;
+  std::string url, width_or_pixel_density, comma;
+  unordered_set<std::string> seen_width_or_pixel_density;
+  while (RE2::Consume(&srcset, *image_candidate_regex, &url,
+                      &width_or_pixel_density, &comma)) {
+    if (width_or_pixel_density.empty()) width_or_pixel_density = "1x";
+    // Duplicate width or pixel density in srcset.
+    if (!seen_width_or_pixel_density.insert(width_or_pixel_density).second)
+      return SrcsetParsingResult{
+          /*success=*/false,
+          /*error_code=*/ValidationError::DUPLICATE_DIMENSION,
+          /*srcset_images=*/candidates};
+    candidates.push_back({url, width_or_pixel_density});
+    // If no more srcset, break.
+    if (srcset.empty()) break;
+    // More srcset, comma expected as separator for image candidates.
+    if (comma.empty())
+      return SrcsetParsingResult{
+          /*success=*/false,
+          /*error_code=*/ValidationError::INVALID_ATTR_VALUE,
+          /*srcset_images=*/candidates};
+  }
+  // Regex didn't consume all of the srcset string.
+  if (!srcset.empty())
+    return SrcsetParsingResult{
+        /*success=*/false,
+        /*error_code=*/ValidationError::INVALID_ATTR_VALUE,
+        /*srcset_images=*/candidates};
+  // Must have at least one image candidate.
+  return SrcsetParsingResult{/*success=*/!candidates.empty(),
+                             /*error_code=*/ValidationError::INVALID_ATTR_VALUE,
+                             /*srcset_images=*/candidates};
+}
+}  // namespace amp::validator::parse_srcset
diff --git a/validator/cpp/engine/parse-srcset.h b/validator/cpp/engine/parse-srcset.h
new file mode 100644
index 0000000000000..c6d01cc7e5934
--- /dev/null
+++ b/validator/cpp/engine/parse-srcset.h
@@ -0,0 +1,66 @@
+//
+// Copyright 2020 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.
+//
+
+#ifndef AMPVALIDATOR__PARSE_SRCSET_H_
+#define AMPVALIDATOR__PARSE_SRCSET_H_
+
+#include <string>
+#include <vector>
+
+#include "absl/strings/string_view.h"
+#include "validator.pb.h"
+#include "re2/re2.h"
+
+namespace amp::validator::parse_srcset {
+
+// Defined at https://w3c.github.io/html/single-page.html#image-candidate-string
+struct ImageCandidate {
+  // ParseSourceSet does not validate that this field is a valid url.  It does,
+  // however, guarantee that this field will not be empty.
+  std::string url;
+  // Either the width or pixel density, e.g. "2x" or "640w". Can also be empty.
+  std::string width_or_pixel_density;
+
+  bool operator==(const ImageCandidate& other) const {
+    return url == other.url &&
+           width_or_pixel_density == other.width_or_pixel_density;
+  }
+};
+
+struct SrcsetParsingResult {
+  // Whether the parser succeeded in parsing the srcset.
+  bool success;
+  // If there was an error during parsing, which error was it.
+  amp::validator::ValidationError::Code error_code;
+  // The set of ImageCandidates that were parsed from srcset.
+  std::vector<ImageCandidate> srcset_images;
+};
+
+// Parse the srcset attribute as specified at
+// https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element
+// This function will not verify whether urls are valid. However, it does check
+// that a valid srcset attribute has one or more image candidate strings - so
+// if the function return value indicates |success==true|, then |srcset_images|
+// will be non-empty.
+//
+// Returns SrcsetParsingResult.
+SrcsetParsingResult ParseSourceSet(
+    re2::StringPiece srcset
+);
+
+}  // namespace amp::validator::parse_srcset
+
+#endif  // AMPVALIDATOR__PARSE_SRCSET_H_
diff --git a/validator/cpp/engine/parse-srcset_test.cc b/validator/cpp/engine/parse-srcset_test.cc
new file mode 100644
index 0000000000000..88691648c41fe
--- /dev/null
+++ b/validator/cpp/engine/parse-srcset_test.cc
@@ -0,0 +1,302 @@
+//
+// Copyright 2020 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.
+//
+
+#include "parse-srcset.h"
+
+#include <vector>
+
+#include <gmock/gmock.h>
+#include "gtest/gtest.h"
+
+using std::vector;
+using testing::ContainerEq;
+
+namespace amp::validator::parse_srcset {
+::std::ostream& operator<<(::std::ostream& os,
+                           const ImageCandidate& candidate) {
+  return os << "url='" << candidate.url << "' width_or_pixel_density='"
+            << candidate.width_or_pixel_density << "'";
+}
+
+namespace {
+// Shortcut for matching against a vector<ImageCandidate>.
+::testing::Matcher<vector<ImageCandidate>> EqCandidates(
+    const vector<ImageCandidate>& candidates) {
+  return ::testing::MatcherCast<vector<ImageCandidate>>(
+      ContainerEq(candidates));
+}
+
+// Most test cases copied from
+// https://github.com/ampproject/amphtml/blob/main/test/functional/test-srcset.js
+TEST(ParseSrcsetTest, SingleUrl) {
+  SrcsetParsingResult result = ParseSourceSet("image");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image", "1x"}}));
+}
+
+TEST(ParseSrcsetTest, SingleUrlAndWidthOrPixelDensity) {
+  SrcsetParsingResult result = ParseSourceSet("image 100w");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image", "100w"}}));
+
+  result = ParseSourceSet("image 2x");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image", "2x"}}));
+}
+
+TEST(ParseSrcsetTest, WhitespaceAroundUrl) {
+  SrcsetParsingResult result = ParseSourceSet(" \t\n image \n\t\t ");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image", "1x"}}));
+}
+
+TEST(ParseSrcsetTest, IgnoreEmptySource) {
+  SrcsetParsingResult result = ParseSourceSet(" \n image \n, ");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image", "1x"}}));
+
+  result = ParseSourceSet(" , \n image \n, ");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image", "1x"}}));
+}
+
+TEST(ParseSrcsetTest, MultipleSources) {
+  SrcsetParsingResult result =
+      ParseSourceSet("image1 2x, image2, image3 3x, image4 4x");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image1", "2x"},
+                                                  {"image2", "1x"},
+                                                  {"image3", "3x"},
+                                                  {"image4", "4x"}}));
+
+  result = ParseSourceSet(" \n image 2x \n\t, image2 \n ");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image", "2x"}, {"image2", "1x"}}));
+}
+
+TEST(ParseSrcsetTest, MultipleSourcesAndDuplicateWidth) {
+  SrcsetParsingResult result =
+      ParseSourceSet("image1 10w, image2 100w, image3 1000w, image4 10w");
+  EXPECT_FALSE(result.success);
+}
+
+TEST(ParseSrcsetTest, MultipleSourcesAndWidth) {
+  SrcsetParsingResult result =
+      ParseSourceSet(" \n image-100 100w\n, image 10w");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image-100", "100w"}, {"image", "10w"}}));
+}
+
+TEST(ParseSrcsetTest, MultipleSourcesAndPixelDensity) {
+  SrcsetParsingResult result = ParseSourceSet(" \n image-x1.5 1.5x\n, image");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image-x1.5", "1.5x"}, {"image", "1x"}}));
+}
+
+TEST(ParseSrcsetTest, CommasInURLs) {
+  SrcsetParsingResult result =
+      ParseSourceSet(" \n image,1 100w\n , \n image,2 50w \n");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image,1", "100w"}, {"image,2", "50w"}}));
+
+  result = ParseSourceSet(" \n image,100w 100w\n , \n image,20w 50w \n");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image,100w", "100w"}, {"image,20w", "50w"}}));
+
+  result = ParseSourceSet(" \n image,2 2x\n , \n image,1");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image,2", "2x"}, {"image,1", "1x"}}));
+
+  result = ParseSourceSet(" \n image,2 2x\n , \n image,1x");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image,2", "2x"}, {"image,1x", "1x"}}));
+
+  result = ParseSourceSet(" \n image,2 , \n  image,1 2x\n");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image,2", "1x"}, {"image,1", "2x"}}));
+
+  result = ParseSourceSet(" \n image,1x , \n  image,2x 2x\n");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image,1x", "1x"}, {"image,2x", "2x"}}));
+
+  result = ParseSourceSet(" \n image,1 \n ");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image,1", "1x"}}));
+
+  result = ParseSourceSet(" \n image,1x \n ");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image,1x", "1x"}}));
+}
+
+TEST(ParseSrcsetTest, LeadingAndTrailingCommasAndCommasInUrl) {
+  // Leading and trailing commas are OK, as are commas in side URls.
+  // This example only looks a little strange because the ParseSourceSet
+  // function does not further validate the URL.
+  SrcsetParsingResult result = ParseSourceSet(",image1,100w,image2,50w,");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image1,100w,image2,50w", "1x"}}));
+
+  // This is a more typical-looking example, with leading and trailing commas.
+  result = ParseSourceSet(",example.com/,/,/,/,50w,");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"example.com/,/,/,/,50w", "1x"}}));
+}
+
+TEST(ParseSrcsetTest, NoWhitepsace) {
+  SrcsetParsingResult result = ParseSourceSet("image 100w,image 50w");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image", "100w"}, {"image", "50w"}}));
+
+  result = ParseSourceSet("image,1 100w,image,2 50w");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image,1", "100w"}, {"image,2", "50w"}}));
+
+  result = ParseSourceSet("image,1 2x,image,2");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image,1", "2x"}, {"image,2", "1x"}}));
+
+  result = ParseSourceSet("image,2 2x");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image,2", "2x"}}));
+
+  result = ParseSourceSet("image,1");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image,1", "1x"}}));
+}
+
+TEST(ParseSrcsetTest, SpecialCharsInUrl) {
+  SrcsetParsingResult result =
+      ParseSourceSet(" \n http://im-a+ge;1?&2#3 100w\n , \n image;2 50w \n");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(
+      result.srcset_images,
+      EqCandidates({{"http://im-a+ge;1?&2#3", "100w"}, {"image;2", "50w"}}));
+}
+
+TEST(ParseSrcsetTest, AcceptFalseCognitivesInUrl) {
+  SrcsetParsingResult result =
+      ParseSourceSet(" \n image,100w 100w\n , \n image,20x 50w \n");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image,100w", "100w"}, {"image,20x", "50w"}}));
+
+  result = ParseSourceSet(" \n image,1x 2x\n , \n image,2x");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images,
+              EqCandidates({{"image,1x", "2x"}, {"image,2x", "1x"}}));
+
+  result = ParseSourceSet(" \n image,1x \n ");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image,1x", "1x"}}));
+
+  result = ParseSourceSet(" \n image,1w \n ");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image,1w", "1x"}}));
+}
+
+TEST(ParseSrcsetTest, MiscExamples) {
+  SrcsetParsingResult result = ParseSourceSet(
+      "image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image-1x.png", "1x"},
+                                                  {"image-2x.png", "2x"},
+                                                  {"image-3x.png", "3x"},
+                                                  {"image-4x.png", "4x"}}));
+
+  result = ParseSourceSet("image,one.png");
+  EXPECT_TRUE(result.success);
+  EXPECT_THAT(result.srcset_images, EqCandidates({{"image,one.png", "1x"}}));
+}
+
+TEST(ParseSrcsetTest, UrlsWithSpacesRejected) {
+  SrcsetParsingResult result = ParseSourceSet("image 1x png 1x");
+  EXPECT_FALSE(result.success);
+  result = ParseSourceSet("image 1x png 1x, image-2x.png 2x");
+  EXPECT_FALSE(result.success);
+}
+
+TEST(ParseSrcsetTest, NegativeWidthOrPixelDensityRejected) {
+  SrcsetParsingResult result = ParseSourceSet("image.png -1x");
+  EXPECT_FALSE(result.success);
+  result = ParseSourceSet("image.png 1x, image2.png -2x");
+  EXPECT_FALSE(result.success);
+  result = ParseSourceSet("image.png -480w");
+  EXPECT_FALSE(result.success);
+  result = ParseSourceSet("image.png 1x, image2.png -100w");
+  EXPECT_FALSE(result.success);
+}
+
+TEST(ParseSrcsetTest, ZeroWidthOrPixelDensityRejected) {
+  SrcsetParsingResult result = ParseSourceSet("image.png 0x");
+  EXPECT_FALSE(result.success);
+  result = ParseSourceSet("image.png 1x, image2.png 0.0x");
+  EXPECT_FALSE(result.success);
+  result = ParseSourceSet("image.png 0w");
+  EXPECT_FALSE(result.success);
+  result = ParseSourceSet("image.png 1x, image2.png 000w");
+  EXPECT_FALSE(result.success);
+}
+
+TEST(ParseSrcsetTest, EmptySrcsetRejected) {
+  SrcsetParsingResult result = ParseSourceSet("");
+  EXPECT_FALSE(result.success);
+  result = ParseSourceSet(" \n\t\f\r");
+  EXPECT_FALSE(result.success);
+}
+
+TEST(ParseSrcsetTest, DecimalWidthsRejected) {
+  SrcsetParsingResult result = ParseSourceSet("image.png 500.0w");
+  EXPECT_FALSE(result.success);
+  result = ParseSourceSet("image.png 1.5w");
+  EXPECT_FALSE(result.success);
+  result = ParseSourceSet("image.png 0.1w");
+  EXPECT_FALSE(result.success);
+}
+
+TEST(ParseSrcsetTest, InvalidPixelValuesOrDimensionsRejected) {
+  SrcsetParsingResult result = ParseSourceSet("image.png 500px");
+  EXPECT_FALSE(result.success);
+  result = ParseSourceSet("image.png 2 x");
+  EXPECT_FALSE(result.success);
+  result = ParseSourceSet("image.png 1kw");
+  EXPECT_FALSE(result.success);
+}
+
+TEST(ParseSrcsetTest, InvalidTextAfterValidSrcsetRejected) {
+  SrcsetParsingResult result = ParseSourceSet("image1, image2, ,,,");
+  EXPECT_FALSE(result.success);
+}
+
+TEST(ParseSrcsetTest, NoCommaBetweenCandidateStringsRejected) {
+  SrcsetParsingResult result = ParseSourceSet("image1 100w image2 50w");
+  EXPECT_FALSE(result.success);
+}
+}  // namespace
+}  // namespace amp::validator::parse_srcset
diff --git a/validator/cpp/engine/parse-viewport.cc b/validator/cpp/engine/parse-viewport.cc
new file mode 100644
index 0000000000000..e52e5e5589e64
--- /dev/null
+++ b/validator/cpp/engine/parse-viewport.cc
@@ -0,0 +1,85 @@
+//
+// Copyright 2020 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.
+//
+
+#include "parse-viewport.h"
+
+#include <map>
+
+#include "absl/strings/ascii.h"
+#include "utf8-util.h"
+#include "strings.h"
+
+using std::map;
+
+namespace amp::validator::parse_viewport {
+namespace {
+bool IsWhitespace(char32_t code) {
+  return code == '\t' || code == '\n' || code == '\r' || code == ' ';
+}
+
+bool IsSeparator(char32_t code) { return code == ',' || code == ';'; }
+
+int ParseProperty(const std::vector<char32_t>& content, int pos,
+                  map<std::string, std::string>* value_by_name) {
+  int start = pos;
+  while (pos < content.size() &&
+         !(IsWhitespace(content[pos]) || IsSeparator(content[pos]) ||
+           '=' == content[pos]))
+    ++pos;
+  if (pos >= content.size() || IsSeparator(content[pos])) return pos;
+  std::vector<char32_t> property_name(content.begin() + start,
+                                      content.begin() + pos);
+  while (pos < content.size() &&
+         !(IsSeparator(content[pos]) || '=' == content[pos]))
+    ++pos;
+  if (pos >= content.size() || IsSeparator(content[pos])) return pos;
+  while (pos < content.size() &&
+         (IsWhitespace(content[pos]) || '=' == content[pos]))
+    ++pos;
+  if (pos >= content.size() || IsSeparator(content[pos])) return pos;
+  start = pos;
+  while (pos < content.size() &&
+         !(IsWhitespace(content[pos]) || IsSeparator(content[pos]) ||
+           '=' == content[pos]))
+    ++pos;
+  std::vector<char32_t> property_value(content.begin() + start,
+                                       content.begin() + pos);
+  (*value_by_name)[absl::AsciiStrToLower(
+      htmlparser::Strings::CodepointsToUtf8String(property_name))] =
+      htmlparser::Strings::CodepointsToUtf8String(property_value);
+  return pos;
+}
+
+void ParseContent(const std::vector<char32_t>& content,
+                  map<std::string, std::string>* value_by_name) {
+  for (int pos = 0; pos < content.size(); ++pos) {
+    while (pos < content.size() &&
+           (IsWhitespace(content[pos]) || IsSeparator(content[pos]) ||
+            '=' == content[pos]))
+      ++pos;
+    if (pos < content.size()) {
+      pos = ParseProperty(content, pos, value_by_name);
+    }
+  }
+}
+}  // namespace
+
+map<std::string, std::string> ParseContent(const std::string& content) {
+  map<std::string, std::string> value_by_name;
+  ParseContent(htmlparser::Strings::Utf8ToCodepoints(content), &value_by_name);
+  return value_by_name;
+}
+}  // namespace amp::validator::parse_viewport
diff --git a/validator/cpp/engine/parse-viewport.h b/validator/cpp/engine/parse-viewport.h
new file mode 100644
index 0000000000000..ce85ba223d333
--- /dev/null
+++ b/validator/cpp/engine/parse-viewport.h
@@ -0,0 +1,37 @@
+//
+// Copyright 2020 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.
+//
+
+#ifndef AMPVALIDATOR__PARSE_VIEWPORT_H_
+#define AMPVALIDATOR__PARSE_VIEWPORT_H_
+
+#include <map>
+#include <string>
+
+namespace amp::validator::parse_viewport {
+// Parses |content| using the algorithm described at
+// https://drafts.csswg.org/css-device-adapt/#parsing-algorithm.
+// This algorithm was originally written down to parse the content
+// of a viewport meta tag, like
+// <meta name='viewport' content='a=b,c=d'>
+// but can be useful for parsing other lists of key/value pairs as well.
+//
+// The keys returned by this function are lower-cased,
+// to make it easy to implement case-insensitive lookup.
+// The values returned by this function remain as is.
+std::map<std::string, std::string> ParseContent(const std::string& content);
+}  // namespace amp::validator::parse_viewport
+
+#endif  // AMPVALIDATOR__PARSE_VIEWPORT_H_
diff --git a/validator/cpp/engine/parse-viewport_test.cc b/validator/cpp/engine/parse-viewport_test.cc
new file mode 100644
index 0000000000000..a14dc0f881efb
--- /dev/null
+++ b/validator/cpp/engine/parse-viewport_test.cc
@@ -0,0 +1,60 @@
+//
+// Copyright 2020 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.
+//
+
+#include "parse-viewport.h"
+
+#include <gmock/gmock.h>
+#include "gtest/gtest.h"
+
+using ::testing::Eq;
+
+namespace amp::validator::parse_viewport {
+namespace {
+TEST(ParseViewportTest, ParsesHelloMessage) {
+  std::map<std::string, std::string> parsed = ParseContent("message=hello");
+  std::map<std::string, std::string> expected = {{"message", "hello"}};
+  EXPECT_THAT(parsed, Eq(expected));
+}
+
+TEST(ParseViewportTest, ViewPortInAmpSpec) {
+  auto parsed = ParseContent("width=device-width,minimum-scale=1");
+  std::map<std::string, std::string> expected = {{"width", "device-width"},
+                                                 {"minimum-scale", "1"}};
+  EXPECT_THAT(parsed, Eq(expected));
+}
+
+TEST(ParseViewportTest, WhiteSpaceAndSemicolonAndIgnoredParts) {
+  auto parsed = ParseContent("a= b, foo =1 ; bang=ba;dang;oh=yes,oops=ws o=i");
+  std::map<std::string, std::string> expected = {{"a", "b"},    {"bang", "ba"},
+                                                 {"foo", "1"},  {"o", "i"},
+                                                 {"oh", "yes"}, {"oops", "ws"}};
+  EXPECT_THAT(parsed, Eq(expected));
+}
+
+TEST(ParseViewportTest, MoreWhiteSpace) {
+  auto parsed = ParseContent("a= b\rc\n= d");
+  std::map<std::string, std::string> expected = {{"a", "b"}, {"c", "d"}};
+  EXPECT_THAT(parsed, Eq(expected));
+}
+
+TEST(ParseViewportTest, LowerCasesKeysButNotValues) {
+  auto parsed = ParseContent("UpperCaseKey=UpperCaseValue, ALLCAPS=FOO");
+  std::map<std::string, std::string> expected = {
+      {"uppercasekey", "UpperCaseValue"}, {"allcaps", "FOO"}};
+  EXPECT_THAT(parsed, Eq(expected));
+}
+}  // namespace
+}  // namespace amp::validator::parse_viewport
diff --git a/validator/cpp/engine/scripts/BUILD b/validator/cpp/engine/scripts/BUILD
new file mode 100644
index 0000000000000..9b7cba246b636
--- /dev/null
+++ b/validator/cpp/engine/scripts/BUILD
@@ -0,0 +1,24 @@
+licenses(["notice"])
+
+package(default_visibility = ["//visibility:public"])
+
+cc_binary(
+    name = "filecontents_to_cpp_header",
+    srcs = [
+        "filecontents_to_cpp_header.cc",
+    ],
+    deps = [
+        "@htmlparser//:defer",
+    ],
+)
+
+cc_binary(
+    name = "validator_example",
+    srcs = [
+        "validator_example.cc",
+    ],
+    deps = [
+        "@ampvalidator//:validator",
+        "@validator//:validator_cc_proto",
+    ],
+)
diff --git a/validator/cpp/engine/scripts/filecontents_to_cpp_header.cc b/validator/cpp/engine/scripts/filecontents_to_cpp_header.cc
new file mode 100644
index 0000000000000..e7a53b303e695
--- /dev/null
+++ b/validator/cpp/engine/scripts/filecontents_to_cpp_header.cc
@@ -0,0 +1,104 @@
+// Embeds the contents of given file in c++ header as c++ array of bytes.
+//
+// In most cases data files are provided to library or binary using:
+//   A) Command line flags containing full path of the file
+//   B) Through constructor as an API
+//   C) Fetched from network during initialization or periodically
+//
+// Sometimes, the above scenarios or combination of them are not feasible and it
+// is required to embed the data in the library hiding the data details from the
+// clients, like validation rules.
+//
+// This script generates a header file that contains contents of the input file
+// as const array of bytes. These bytes can be read by any parts of the program
+// by just importing the header file.
+//
+// Though this script can be used to generate header files directly. For
+// automation and up-to-date header file for each release use embed_data rule
+// defined in embed_data.bzl.
+//
+// Usage:
+// $./filecontents_to_cpp_header \
+//     <input_file> <output_header>.h <cpp_namespace> <varname>
+//
+// $./filecontents_to_cpp_header abc.h abc kABCByteArray
+//
+//                      or,
+//
+// load("//quality/dni/validator:embed_data.bzl", "embed_data")
+// embed_data(
+//     name = "mydata_h",
+//     src = "mydatafile",
+//     header_out = "mydatabytes.h",
+//     namespace = "myproject::data",
+//     varname = "kMyDataByteArray")
+//
+// In source:
+// #include "myproject/data/mydatabytes.h"
+//
+// ProcessMyData(kMyDataByteArray); or MyStream stream(kMyDataByteArray);
+//
+
+#include <fstream>
+#include <iomanip>
+#include <iostream>
+#include <string>
+
+#include "defer.h"
+
+int main(int argc, char** argv) {
+  if (argc != 5) {
+    std::cerr << "Missing input file name.\n";
+    std::cerr << "Format:\n";
+    std::cerr << "filecontents_to_cpp_header mygeneratedheader.h my_project "
+              << "kMyDataByteArray\n";
+    return EXIT_FAILURE;
+  }
+
+  std::ifstream fd(argv[1]);
+  htmlparser::defer(fd.close());
+
+  if (!fd.good()) {
+    std::cerr << "File: " << argv[1] << " not found.\n";
+    return EXIT_FAILURE;
+  }
+
+  std::string output_file = argv[2];
+
+  std::ofstream ofd(argv[2]);
+  htmlparser::defer(ofd.close());
+
+  if (!ofd.good()) {
+    std::cerr << "Output header file: " << argv[2] << " error.\n";
+    return EXIT_FAILURE;
+  }
+
+  std::string name_space = argv[3];
+  std::string var_name = argv[4];
+
+  ofd << "#pragma once\n\n";
+  ofd << "namespace " << name_space << " {\n\n";
+
+  int i = fd.get();
+  int count = 1;
+  ofd << "constexpr static unsigned char " << var_name << "[] = {\n   ";
+
+  while (!fd.eof() && i != -1) {
+    // NOTE: protobuf bytes are always little endian. If this ever changes, or
+    // this script is run in big endian systems it will fail.
+    // TODO: Add a endian attr in embed_data?
+    ofd << " 0x" << std::setfill('0') << std::setw(2) << std::hex << i;
+    if (count++ % 10 == 0) {
+      ofd << ",\n   ";
+    } else {
+      ofd << ",";
+    }
+    i = fd.get();
+  }
+
+  ofd << "\n};\n";
+
+  ofd << "constexpr long " << var_name << "Size = 0x" << count - 1 << ";\n\n";
+
+  ofd << "}  // namespace " << name_space;
+}
diff --git a/validator/cpp/engine/scripts/validator_example.cc b/validator/cpp/engine/scripts/validator_example.cc
new file mode 100644
index 0000000000000..01262f32d7787
--- /dev/null
+++ b/validator/cpp/engine/scripts/validator_example.cc
@@ -0,0 +1,53 @@
+//
+// Copyright 2020 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.
+//
+
+#include <cassert>
+#include <iostream>
+#include <string_view>
+
+#include "validator.h"
+#include "validator.pb.h"
+
+static constexpr std::string_view kValidAMPHtml{R"HTML(
+<!--
+     This is the minimum valid AMP HTML document. Type away
+     here and the AMP Validator will re-check your document on the fly.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="self.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>Hello, AMP world.</body>
+</html>)HTML"};
+
+
+int main(int argc, char** argv) {
+  auto result = amp::validator::Validate(kValidAMPHtml,
+                                         amp::validator::HtmlFormat::AMP);
+  // DO NOT USE assert in production. For demonstration purpose only.
+  assert(result.status() == amp::validator::ValidationResult::PASS);
+
+  result = amp::validator::Validate("<script>StealCookies();</script>",
+                                    amp::validator::HtmlFormat::AMP);
+  assert(result.status() == amp::validator::ValidationResult::FAIL);
+  // Paste the above html in http://validator.amp.dev and see the count.
+  assert(result.errors().size() == 12);
+}
diff --git a/validator/cpp/engine/testing-utils.cc b/validator/cpp/engine/testing-utils.cc
new file mode 100644
index 0000000000000..95b92bb7451d7
--- /dev/null
+++ b/validator/cpp/engine/testing-utils.cc
@@ -0,0 +1,167 @@
+//
+// Copyright 2020 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.
+//
+// AMP Validator client library to validate if given html is a valid AMP
+// document.
+//
+
+#include <filesystem>
+
+#include "glog/logging.h"
+#include "testing-utils.h"
+#include "error-formatter.h"
+#include "absl/strings/substitute.h"
+#include "absl/strings/str_cat.h"
+#include "fileutil.h"
+#include "strings.h"
+#include "absl/strings/ascii.h"
+#include "absl/strings/strip.h"
+
+namespace fs = std::filesystem;
+
+namespace amp::validator::testing {
+
+namespace {
+std::string RelativeToTestdataOrExtensions(const std::string& test_file) {
+  int idx = test_file.find("testdata/");
+  if (idx != std::string::npos)
+    return test_file.substr(idx + std::string("testdata/").size());
+  idx = test_file.find("extensions/");
+  if (idx == std::string::npos) return test_file;
+  return test_file.substr(idx + std::string("extensions/").size());
+}
+}  // namespace
+
+std::string RenderError(const ValidationError& error) {
+  std::string out = ErrorFormatter::FormattedMessageFor(error);
+  if (error.has_spec_url())
+    absl::SubstituteAndAppend(&out, " (see $0)", error.spec_url());
+  return out;
+}
+
+std::string RenderErrorWithPosition(const std::string& filename,
+                                    const ValidationError& error) {
+  // Filename, line, column, message, spec url.
+  return absl::Substitute("$0:$1:$2 $3", filename, error.line(), error.col(),
+                          RenderError(error));
+}
+
+std::string RenderResult(const std::string& filename,
+                         const ValidationResult& result) {
+  std::string out;
+  absl::StrAppend(&out, ValidationResult::Status_Name(result.status()));
+  for (const ValidationError& error : result.errors()) {
+    absl::StrAppend(&out, "\n", RenderErrorWithPosition(filename, error));
+  }
+  return out;
+}
+
+std::string RenderInlineResult(const std::string& filename,
+                               const std::string& filecontents,
+                               const ValidationResult& result) {
+  std::string out;
+  absl::StrAppend(&out, ValidationResult::Status_Name(result.status()));
+  std::vector<std::string> lines = absl::StrSplit(filecontents, '\n');
+  int lines_emitted = 0;
+  for (const ValidationError& error : result.errors()) {
+    // Emit all input lines up to and including the line containing the error,
+    // prefexed with "|  " (or just "|" if the line is empty").
+    while (lines_emitted < error.line() && lines_emitted < lines.size()) {
+      absl::StrAppend(&out, "\n|");
+      if (!lines[lines_emitted].empty()) {
+        absl::SubstituteAndAppend(&out, "  $0", lines[lines_emitted]);
+      }
+      lines_emitted++;
+    }
+    // Emit a carat showing the column of the following error.
+    absl::StrAppend(&out, "\n>>");
+    for (int i = 0; i < error.col() + 1; ++i) absl::StrAppend(&out, " ");
+    absl::StrAppend(&out, "^~~~~~~~~\n");
+    absl::StrAppend(&out, RenderErrorWithPosition(filename, error));
+  }
+  while (lines_emitted < lines.size()) {
+    absl::StrAppend(&out, "\n|");
+    if (!lines[lines_emitted].empty()) {
+      absl::SubstituteAndAppend(&out, "  $0", lines[lines_emitted]);
+    }
+    lines_emitted++;
+  }
+  return out;
+}
+
+const std::map<std::string, TestCase>& TestCases() {
+  static const std::map<std::string, TestCase>* const test_cases = [] {
+    std::vector<std::string> tl;
+    std::vector<TestCase> cases;
+    std::vector<std::string> html_files;
+    CHECK(htmlparser::FileUtil::Glob(
+           "external/validator/testdata/*/*.html",
+           &html_files)) << "Test cases file pattern not found.";
+    CHECK(htmlparser::FileUtil::Glob(
+           "external/amphtml-extensions/*/*/test/*.html",
+            &html_files)) << "Test cases file pattern not found.";
+
+    std::sort(html_files.begin(), html_files.end());
+    for (const std::string& html_file : html_files) {
+      if (html_file.find("/js_only/") != std::string::npos) continue;
+
+      TestCase test_case;
+      if (html_file.find("/amp4ads_feature_tests/") != std::string::npos ||
+          html_file.find("/validator-amp4ads-") != std::string::npos) {
+        test_case.html_format = HtmlFormat::AMP4ADS;
+      } else if (html_file.find("/amp4email_feature_tests/") !=
+                     std::string::npos ||
+                 html_file.find("/validator-amp4email-") != std::string::npos) {
+        test_case.html_format = HtmlFormat::AMP4EMAIL;
+      } else {
+        test_case.html_format = HtmlFormat::AMP;
+      }
+
+      test_case.input_file = html_file;
+      test_case.name = RelativeToTestdataOrExtensions(html_file);
+      test_case.input_content = htmlparser::FileUtil::FileContents(html_file);
+      // Note that javascript trim doesn't trim newlines
+      absl::StripTrailingAsciiWhitespace(&test_case.input_content);
+      htmlparser::Strings::StripTrailingNewline(&test_case.input_content);
+      fs::path html_file_path = html_file;
+      fs::path output_file_path = html_file_path.parent_path();
+      output_file_path += "/";
+      output_file_path += html_file_path.stem();
+      output_file_path += ".out";
+      // Special case where cpp engine output differs from javascript.
+      fs::path cpp_only_out_file_path = output_file_path;
+      cpp_only_out_file_path += ".cpponly";
+      if (fs::exists(cpp_only_out_file_path)) {
+        test_case.output_file = cpp_only_out_file_path.string();
+      } else {
+        test_case.output_file = output_file_path.string();
+      }
+      test_case.output_content =
+          htmlparser::FileUtil::FileContents(test_case.output_file);
+      htmlparser::Strings::StripTrailingNewline(&test_case.output_content);
+      cases.emplace_back(std::move(test_case));
+    }
+    std::map<std::string, TestCase>* test_cases_by_name =
+        new std::map<std::string, TestCase>;
+    for (const TestCase& t : cases)
+      CHECK(test_cases_by_name->emplace(t.name, t).second)
+          << "duplicate name: " << t.name;
+    return test_cases_by_name;
+  }();
+
+  return *test_cases;
+}
+
+}  // namespace amp::validator::testing
diff --git a/validator/cpp/engine/testing-utils.h b/validator/cpp/engine/testing-utils.h
new file mode 100644
index 0000000000000..197fefc09a250
--- /dev/null
+++ b/validator/cpp/engine/testing-utils.h
@@ -0,0 +1,58 @@
+//
+// Copyright 2020 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.
+//
+// AMP Validator client library to validate if given html is a valid AMP
+// document.
+//
+#ifndef AMPVALIDATOR__TESTING_UTILS_H_
+#define AMPVALIDATOR__TESTING_UTILS_H_
+
+#include <map>
+
+#include "validator.pb.h"
+
+namespace amp::validator::testing {
+
+// An end-to-end test case. This is also used to test the serializer.
+struct TestCase {
+  std::string name;
+  std::string input_file;
+  std::string output_file;
+  std::string input_content;
+  std::string output_content;
+  ::amp::validator::HtmlFormat::Code html_format;
+};
+
+
+// Emits message, spec url, and category.
+std::string RenderError(const amp::validator::ValidationError& error);
+
+// Emits:
+// - overall status
+// - filename, line, col, rendered error for each error
+std::string RenderResult(const std::string& filename,
+                         const amp::validator::ValidationResult& result);
+// Like RenderResult, except inlines any error messages into the input document.
+std::string RenderInlineResult(const std::string& filename,
+                               const std::string& filecontents,
+                               const amp::validator::ValidationResult& result);
+
+// Returns the test cases that are available to this test binary.
+const std::map<std::string, TestCase>& TestCases();
+
+}  // namespace amp::validator::testing
+
+
+#endif  // AMPVALIDATOR__TESTING_UTILS_H_
diff --git a/validator/cpp/engine/type-identifier.cc b/validator/cpp/engine/type-identifier.cc
new file mode 100644
index 0000000000000..1defe8f8ca840
--- /dev/null
+++ b/validator/cpp/engine/type-identifier.cc
@@ -0,0 +1,111 @@
+//
+// Copyright 2020 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.
+//
+
+#include "type-identifier.h"
+
+#include <algorithm>
+
+#include "absl/strings/match.h"
+#include "validator.pb.h"
+
+namespace amp::validator {
+
+std::string TypeIdentifierToString(TypeIdentifier type_identifier) {
+  switch (type_identifier) {
+    case TypeIdentifier::kAmp:
+      return "amp";
+    case TypeIdentifier::kAds:
+      return "amp4ads";
+    case TypeIdentifier::kEmail:
+      return "amp4email";
+    case TypeIdentifier::kTransformed:
+      return "transformed";
+    case TypeIdentifier::kExperimental:
+      return "experimental";
+    case TypeIdentifier::kDevMode:
+      return "data-ampdevmode";
+    case TypeIdentifier::kCssStrict:
+      return "data-css-strict";
+    case TypeIdentifier::kUnknown:
+      return "";
+  }
+  return "";
+}
+
+std::string TypeIdentifierToBoltString(TypeIdentifier type_identifier) {
+  switch (type_identifier) {
+    case TypeIdentifier::kAmp:
+      return "\u26a1";
+    case TypeIdentifier::kAds:
+      return "\u26a14ads";
+    case TypeIdentifier::kEmail:
+      return "\u26a14email";
+    default:
+      return TypeIdentifierToString(type_identifier);
+  }
+}
+
+TypeIdentifier GetTypeIdentifier(absl::string_view type_identifier) {
+  if (absl::EqualsIgnoreCase(type_identifier, "amp") ||
+      absl::EqualsIgnoreCase(type_identifier, "\u26a1") ||
+      absl::EqualsIgnoreCase(type_identifier, "\u26a1\ufe0f")) {
+    return TypeIdentifier::kAmp;
+  }
+  if (absl::EqualsIgnoreCase(type_identifier, "amp4ads") ||
+      absl::EqualsIgnoreCase(type_identifier, "\u26a14ads") ||
+      absl::EqualsIgnoreCase(type_identifier, "\u26a1\ufe0f4ads")) {
+    return TypeIdentifier::kAds;
+  }
+  if (absl::EqualsIgnoreCase(type_identifier, "amp4email") ||
+      absl::EqualsIgnoreCase(type_identifier, "\u26a14email") ||
+      absl::EqualsIgnoreCase(type_identifier, "\u26a1\ufe0f4email")) {
+    return TypeIdentifier::kEmail;
+  }
+  if (absl::EqualsIgnoreCase(type_identifier, "transformed")) {
+    return TypeIdentifier::kTransformed;
+  }
+  if (absl::EqualsIgnoreCase(type_identifier, "experimental")) {
+    return TypeIdentifier::kExperimental;
+  }
+  if (absl::EqualsIgnoreCase(type_identifier, "data-ampdevmode")) {
+    return TypeIdentifier::kDevMode;
+  }
+  if (absl::EqualsIgnoreCase(type_identifier, "data-css-strict")) {
+    return TypeIdentifier::kCssStrict;
+  }
+  return TypeIdentifier::kUnknown;
+}
+
+std::vector<TypeIdentifier> GetTypeIdentifiers(
+    const amp::validator::ValidationResult& result) {
+  std::vector<TypeIdentifier> type_identifiers;
+  for (const std::string& type_identifier : result.type_identifier()) {
+    type_identifiers.emplace_back(GetTypeIdentifier(type_identifier));
+  }
+  return type_identifiers;
+}
+
+bool HasSignedExchangeTypeIdentifiers(
+    std::vector<TypeIdentifier> type_identifiers) {
+  return std::find(type_identifiers.begin(), type_identifiers.end(),
+                   TypeIdentifier::kAmp) !=
+             type_identifiers.end() &&
+         std::find(type_identifiers.begin(), type_identifiers.end(),
+                   TypeIdentifier::kTransformed) !=
+             type_identifiers.end();
+}
+
+}  // namespace amp::validator
diff --git a/validator/cpp/engine/type-identifier.h b/validator/cpp/engine/type-identifier.h
new file mode 100644
index 0000000000000..3f447a6c04fc5
--- /dev/null
+++ b/validator/cpp/engine/type-identifier.h
@@ -0,0 +1,65 @@
+//
+// Copyright 2020 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.
+//
+
+#ifndef AMPVALIDATOR__TYPE_IDENTIFIER_H_
+#define AMPVALIDATOR__TYPE_IDENTIFIER_H_
+
+#include <vector>
+
+#include "absl/strings/string_view.h"
+#include "validator.pb.h"
+
+namespace amp::validator {
+
+// The type identifier of a parsed document. This is declared as an attribute
+// on the HTML tag and is parsed by the Validator engine. Examples are amp,
+// amp4ads, and ⚡4email.
+enum TypeIdentifier {
+  kUnknown,
+  kAmp,
+  kAds,
+  kEmail,
+  kTransformed,
+  kExperimental,
+  kDevMode,
+  kCssStrict,
+};
+
+// Returns a string representation of the type identifier. If the
+// type identifier is not recognized it returns "".
+std::string TypeIdentifierToString(TypeIdentifier type_identifier);
+
+// Returns a string representation, utilizing ⚡ where appropriate, of the
+// type identifier. If the type identifier is not recognized it returns "".
+std::string TypeIdentifierToBoltString(TypeIdentifier type_identifier);
+
+// Returns the TypeIdentifier of the given string representation. If the
+// type identifier is not recognized it returns kUnknown.
+TypeIdentifier GetTypeIdentifier(absl::string_view type_identifier);
+
+// Returns all type identifiers that are stored in the ValidationResult
+// type_identifier field. If the type identifier is not recognized it is added
+// as kUnknown.
+std::vector<TypeIdentifier> GetTypeIdentifiers(
+    const amp::validator::ValidationResult&);
+
+// Returns true iff the given type identifiers include all the required type
+// identifiers for Signed Exchanges.
+bool HasSignedExchangeTypeIdentifiers(
+    std::vector<TypeIdentifier> type_identifiers);
+}  // namespace amp::validator
+
+#endif  // AMPVALIDATOR__TYPE_IDENTIFIER_H_
diff --git a/validator/cpp/engine/type-identifier_test.cc b/validator/cpp/engine/type-identifier_test.cc
new file mode 100644
index 0000000000000..17fa7a151aa96
--- /dev/null
+++ b/validator/cpp/engine/type-identifier_test.cc
@@ -0,0 +1,139 @@
+//
+// Copyright 2020 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.
+//
+
+#include "type-identifier.h"
+
+#include "gtest/gtest.h"
+#include "validator.pb.h"
+
+TEST(TypeIdentifier, TypeIdentifierToString) {
+  EXPECT_EQ(
+      amp::validator::TypeIdentifierToString(
+          amp::validator::TypeIdentifier::kAmp),
+      "amp");
+  EXPECT_EQ(
+      amp::validator::TypeIdentifierToString(
+          amp::validator::TypeIdentifier::kAds),
+      "amp4ads");
+  EXPECT_EQ(
+      amp::validator::TypeIdentifierToString(
+          amp::validator::TypeIdentifier::kEmail),
+      "amp4email");
+  EXPECT_EQ(amp::validator::TypeIdentifierToString(
+                amp::validator::TypeIdentifier::kTransformed),
+            "transformed");
+  EXPECT_EQ(amp::validator::TypeIdentifierToString(
+                amp::validator::TypeIdentifier::kExperimental),
+            "experimental");
+  EXPECT_EQ(amp::validator::TypeIdentifierToString(
+                amp::validator::TypeIdentifier::kDevMode),
+            "data-ampdevmode");
+  EXPECT_EQ(amp::validator::TypeIdentifierToString(
+                amp::validator::TypeIdentifier::kUnknown),
+            "");
+}
+
+TEST(TypeIdentifier, GetTypeIdentifierFromString) {
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("amp"),
+            amp::validator::TypeIdentifier::kAmp);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("⚡"),
+            amp::validator::TypeIdentifier::kAmp);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("⚡️"),
+            amp::validator::TypeIdentifier::kAmp);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("\u26a1\ufe0f"),
+            amp::validator::TypeIdentifier::kAmp);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("amp4ads"),
+            amp::validator::TypeIdentifier::kAds);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("⚡4ads"),
+            amp::validator::TypeIdentifier::kAds);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("⚡️4ads"),
+            amp::validator::TypeIdentifier::kAds);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("\u26a1\ufe0f4ads"),
+            amp::validator::TypeIdentifier::kAds);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("amp4email"),
+            amp::validator::TypeIdentifier::kEmail);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("⚡4email"),
+            amp::validator::TypeIdentifier::kEmail);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("⚡️4email"),
+            amp::validator::TypeIdentifier::kEmail);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("\u26a1\ufe0f4email"),
+            amp::validator::TypeIdentifier::kEmail);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("transformed"),
+            amp::validator::TypeIdentifier::kTransformed);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("experimental"),
+            amp::validator::TypeIdentifier::kExperimental);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("data-ampdevmode"),
+            amp::validator::TypeIdentifier::kDevMode);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("data-css-strict"),
+            amp::validator::TypeIdentifier::kCssStrict);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier(""),
+            amp::validator::TypeIdentifier::kUnknown);
+  EXPECT_EQ(amp::validator::GetTypeIdentifier("lemur"),
+            amp::validator::TypeIdentifier::kUnknown);
+}
+
+TEST(TypeIdentifier, GetTypeIdentifiersFromValidationResult) {
+  {
+    amp::validator::ValidationResult result;
+    result.add_type_identifier("amp");
+    std::vector<amp::validator::TypeIdentifier> expected{
+        amp::validator::TypeIdentifier::kAmp};
+    EXPECT_EQ(amp::validator::GetTypeIdentifiers(result), expected);
+  }
+  {
+    amp::validator::ValidationResult result;
+    result.add_type_identifier("⚡");
+    std::vector<amp::validator::TypeIdentifier> expected{
+        amp::validator::TypeIdentifier::kAmp};
+    EXPECT_EQ(amp::validator::GetTypeIdentifiers(result), expected);
+  }
+  {
+    amp::validator::ValidationResult result;
+    result.add_type_identifier("amp");
+    result.add_type_identifier("transformed");
+    std::vector<amp::validator::TypeIdentifier> expected{
+        amp::validator::TypeIdentifier::kAmp,
+        amp::validator::TypeIdentifier::kTransformed};
+    EXPECT_EQ(amp::validator::GetTypeIdentifiers(result), expected);
+  }
+  {
+    amp::validator::ValidationResult result;
+    std::vector<amp::validator::TypeIdentifier> expected;
+    EXPECT_EQ(amp::validator::GetTypeIdentifiers(result), expected);
+  }
+}
+
+TEST(TypeIdentifier, HasSignedExchangeTypeIdentifiers) {
+  {
+    std::vector<amp::validator::TypeIdentifier> type_identifiers = {
+        amp::validator::TypeIdentifier::kAmp,
+        amp::validator::TypeIdentifier::kTransformed};
+    EXPECT_TRUE(
+        amp::validator::HasSignedExchangeTypeIdentifiers(type_identifiers));
+  }
+  {
+    std::vector<amp::validator::TypeIdentifier> type_identifiers = {
+        amp::validator::TypeIdentifier::kAmp};
+    EXPECT_FALSE(
+        amp::validator::HasSignedExchangeTypeIdentifiers(type_identifiers));
+  }
+  {
+    std::vector<amp::validator::TypeIdentifier> type_identifiers = {
+        amp::validator::TypeIdentifier::kTransformed};
+    EXPECT_FALSE(
+        amp::validator::HasSignedExchangeTypeIdentifiers(type_identifiers));
+  }
+}
diff --git a/validator/cpp/engine/utf8-util.cc b/validator/cpp/engine/utf8-util.cc
new file mode 100644
index 0000000000000..a16a17e13ac64
--- /dev/null
+++ b/validator/cpp/engine/utf8-util.cc
@@ -0,0 +1,100 @@
+//
+// Copyright 2020 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.
+//
+
+#include "utf8-util.h"
+
+#include "glog/logging.h"
+#include "absl/strings/string_view.h"
+#include "strings.h"
+
+using absl::string_view;
+using std::vector;
+
+namespace amp::validator::utf8_util {
+
+int64_t Utf16StrLen(string_view buf_utf8) {
+  int64_t utf16_str_len = 0;
+  for (int i = 0; i < buf_utf8.size(); ++i) {
+    // Javascript counts strings as UTF-16 characters. 1, 2, and 3-byte UTF-8
+    // characters are length 1 in UTF-16 whereas 4-byte UTF-8 characters are
+    // length 2.
+    //
+    // This little formula works on UTF-8 byte headers. We know that the
+    // first byte in a UTF-8 char encodes the length of the character in
+    // bits as a header of 1's followed by a single 0. The later bytes in
+    // the character all start with the bits '10'.
+    // https://en.wikipedia.org/wiki/UTF-8#Description
+    //
+    // First, we right shift the least significant 3 bits and mask out the
+    // last bit. This gives us the 000XXXX0 which can range between 0 and 30.
+    // 0x95005555 is essentially a lookup table, which we shift by that the
+    // lookup key in 000XXXX0 and then keep only the bottom two bits by
+    // masking by 3.
+    // 0x95005555 = 10010101000000000101010101010101
+    // 0x95005555 >> 00011110 (30) & 3 = 10  // 4-byte header
+    // 0x95005555 >> 00011100 (28) & 3 = 01  // 3-byte header
+    // 0x95005555 >> 00011010 (26) & 3 = 01  // 2-byte header
+    // 0x95005555 >> 00011000 (24) & 3 = 01  // 2-byte header
+    // 0x95005555 >> 00010110 (22) & 3 = 00  // non-leading byte
+    // 0x95005555 >> 00010100 (20) & 3 = 00  // non-leading byte
+    // 0x95005555 >> 00010010 (18) & 3 = 00  // non-leading byte
+    // 0x95005555 >> 00010000 (16) & 3 = 00  // non-leading byte
+    // 0x95005555 >> 00001110 (14) & 3 = 01  // 1 byte ascii
+    // 0x95005555 >> 00001100 (12) & 3 = 01  // 1 byte ascii
+    // 0x95005555 >> 00001010 (10) & 3 = 01  // 1 byte ascii
+    // 0x95005555 >> 00001000 (8)  & 3 = 01  // 1 byte ascii
+    // 0x95005555 >> 00000110 (6)  & 3 = 01  // 1 byte ascii
+    // 0x95005555 >> 00000100 (4)  & 3 = 01  // 1 byte ascii
+    // 0x95005555 >> 00000010 (2)  & 3 = 01  // 1 byte ascii
+    // 0x95005555 >> 00000000 (0)  & 3 = 01  // 1 byte ascii
+    utf16_str_len += ((0x95005555) >> ((buf_utf8[i] >> 3) & 30)) & 3;
+  }
+  return utf16_str_len;
+}
+
+int64_t Utf16OffsetToByteOffset(string_view buf_utf8, int64_t utf16_offset) {
+  int64_t utf16_str_len = 0;
+  int byte_pos = 0;
+  while (utf16_str_len < utf16_offset) {
+    if (byte_pos >= static_cast<int64_t>(buf_utf8.size())) return -1;
+    const int utf8_char_len =
+        htmlparser::Strings::CodePointByteSequenceCount(buf_utf8[byte_pos]);
+    if (utf8_char_len == 4)  // 4 byte UTF8 char -> 2 byte UTF16 char
+      utf16_str_len += 2;
+    else  // 1,2,3 byte UTF8 char -> 1 byte UTF16 char
+      ++utf16_str_len;
+    byte_pos += utf8_char_len;
+  }
+  return byte_pos;
+}
+
+//
+// Implementation of CodePointTraverser
+//
+CodePointTraverser::CodePointTraverser(const vector<char32_t>* const codes)
+    : codes_(codes) {}
+
+void CodePointTraverser::TraverseTo(int traverse_to) {
+  CHECK_GE(traverse_to, codepoint_idx_);
+  while (codepoint_idx_ < traverse_to) {
+    CHECK_LT(codepoint_idx_, codes_->size());
+    utf16_idx_ += ((*codes_)[codepoint_idx_] >= 0x00010000 ? 2 : 1);
+    codepoint_idx_++;
+  }
+}
+
+int CodePointTraverser::UTF16Position() const { return utf16_idx_; }
+}  // namespace amp::validator::utf8_util
diff --git a/validator/cpp/engine/utf8-util.h b/validator/cpp/engine/utf8-util.h
new file mode 100644
index 0000000000000..25bf25330d3c3
--- /dev/null
+++ b/validator/cpp/engine/utf8-util.h
@@ -0,0 +1,56 @@
+//
+// Copyright 2020 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.
+//
+
+#ifndef AMPVALIDATOR__UTF8_UTIL_H_
+#define AMPVALIDATOR__UTF8_UTIL_H_
+
+#include <string>
+#include <vector>
+#include "absl/strings/string_view.h"
+
+namespace amp::validator::utf8_util {
+
+// Returns the UTF16 string length of a UTF8 string buffer. Javascript encodes
+// strings as UTF16, which results in different string lengths from UTF8 or byte
+// lengths. UTF16 represents astral symbols as 2 surrogate pairs, with a length
+// two. Note that this requires that the input is a well formed UTF8 string.
+int64_t Utf16StrLen(absl::string_view buf_utf8);
+
+// Given a string |buf_utf8| stored as UTF8 characters, compute the
+// byte offset into this string provided a |utf16_offset|.
+// Returns -1 if |utf16_offset| is out of range.
+int64_t Utf16OffsetToByteOffset(absl::string_view buf_utf8,
+                                int64_t utf16_offset);
+
+// Simple class which lets us walk a vector of codepoints and tracking the
+// indexes of those codepoints in UTF16 string space in parallel.
+class CodePointTraverser {
+ public:
+  // |codes| must outlive CodePointTraverser.
+  explicit CodePointTraverser(const std::vector<char32_t>* const codes);
+
+  void TraverseTo(int traverse_to);
+  int UTF16Position() const;
+
+ private:
+  int codepoint_idx_ = 0;
+  int utf16_idx_ = 0;
+  const std::vector<char32_t>* const codes_;
+};
+
+}  // namespace amp::validator::utf8_util
+
+#endif  // AMPVALIDATOR__UTF8_UTIL_H_
diff --git a/validator/cpp/engine/utf8-util_test.cc b/validator/cpp/engine/utf8-util_test.cc
new file mode 100644
index 0000000000000..5b53eb6e73085
--- /dev/null
+++ b/validator/cpp/engine/utf8-util_test.cc
@@ -0,0 +1,62 @@
+//
+// Copyright 2020 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.
+//
+
+#include "utf8-util.h"
+
+#include "gtest/gtest.h"
+#include "strings.h"
+
+using ::testing::Eq;
+
+namespace amp::validator::utf8_util {
+namespace {
+
+TEST(Utf8UtilTest, Utf16StrLen) {
+  // This string, in javascript is length 23:
+  // "Iñtërnâtiônàlizætiøn⚡💩".length === 23
+  // It's 34 bytes long and 22 utf-8 characters long. Javascript uses UTF16
+  // strings and string lengths.
+  // The chars in Iñtërnâtiônàlizætiøn vary between 1 and 2 byte lengths, all
+  // javascript 1-char lenghts. The ⚡ is a 3-byte length character, with a
+  // 1-char javascript length. Finally the 💩 is a 4-byte length character with
+  // a 2-char javascript length.
+  EXPECT_EQ(Utf16StrLen("Iñtërnâtiônàlizætiøn☃💩"), 23);
+}
+
+TEST(Utf8UtilTest, Utf16OffsetToByteOffset) {
+  std::string example = "Iñtërnâtiônàlizætiøn☃💩";
+  // Same string as for Utr16StrLen above. It's 27 bytes long, and
+  // Utf16StrLen reports 23. So if we pass 23 into here as offset, we get the
+  // length of the string in bytes.
+  EXPECT_EQ(34, example.size());
+  EXPECT_EQ(example.size(), Utf16OffsetToByteOffset(example, 23));
+  EXPECT_EQ(-1, Utf16OffsetToByteOffset(example, 24));   // out of range
+  EXPECT_EQ(-1, Utf16OffsetToByteOffset(example, 230));  // out of range
+}
+
+TEST(CodePointTraverser, TraversesCodePoints) {
+  std::vector<char32_t> ascii =
+      htmlparser::Strings::Utf8ToCodepoints("Iñtërnâtiônàlizætiøn☃💩");
+  CodePointTraverser traverser(&ascii);
+  for (int i = 0; i < 22; ++i) {
+    traverser.TraverseTo(i);
+    EXPECT_EQ(i, traverser.UTF16Position());
+  }
+  traverser.TraverseTo(22);
+  EXPECT_EQ(23, traverser.UTF16Position());
+}
+}  // namespace
+}  // namespace amp::validator::utf8_util
diff --git a/validator/cpp/engine/validator-convert.cc b/validator/cpp/engine/validator-convert.cc
new file mode 100644
index 0000000000000..eb4b75930ee2f
--- /dev/null
+++ b/validator/cpp/engine/validator-convert.cc
@@ -0,0 +1,29 @@
+#include <filesystem>
+#include <fstream>
+#include <string>
+
+#include "glog/logging.h"
+#include "google/protobuf/text_format.h"
+
+#include "defer.h"
+#include "fileutil.h"
+
+#include "validator.pb.h"
+
+using google::protobuf::TextFormat;
+
+namespace fs = std::filesystem;
+
+int main(int argc, char* argv[]) {
+  fs::path text_proto_path = argv[1];
+  fs::path output_file = argv[2];
+  CHECK(fs::exists(text_proto_path)) << text_proto_path << " proto not found.";
+  std::string text_proto = htmlparser::FileUtil::FileContents(argv[1]);
+  CHECK(!text_proto.empty()) << text_proto_path << " read failed.";
+  amp::validator::ValidatorRules rules;
+  TextFormat::ParseFromString(text_proto, &rules);
+  std::ofstream ofs(argv[2], std::ofstream::out);
+  htmlparser::defer(ofs.close());
+  rules.SerializeToOstream(&ofs);
+  return 0;
+}
diff --git a/validator/cpp/engine/validator-internal.cc b/validator/cpp/engine/validator-internal.cc
new file mode 100644
index 0000000000000..3c6b9c2d2ed51
--- /dev/null
+++ b/validator/cpp/engine/validator-internal.cc
@@ -0,0 +1,5981 @@
+//
+// Copyright 2020 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.
+//
+
+#include <algorithm>
+#include <fstream>
+#include <map>
+#include <memory>
+#include <string>
+#include <unordered_map>
+#include <unordered_set>
+
+#include "glog/logging.h"
+#include "google/protobuf/repeated_field.h"
+#include "absl/algorithm/container.h"
+#include "absl/base/thread_annotations.h"
+#include "absl/container/flat_hash_map.h"
+#include "absl/container/flat_hash_set.h"
+#include "absl/container/node_hash_map.h"
+#include "absl/container/node_hash_set.h"
+#include "absl/flags/flag.h"
+#include "absl/memory/memory.h"
+#include "absl/status/status.h"
+#include "absl/strings/cord.h"
+#include "absl/strings/match.h"
+#include "absl/strings/numbers.h"
+#include "absl/strings/str_cat.h"
+#include "absl/strings/str_join.h"
+#include "absl/strings/string_view.h"
+#include "absl/strings/strip.h"
+#include "absl/strings/substitute.h"
+#include "absl/synchronization/mutex.h"
+#include "keyframes-parse-css.h"
+#include "parse-layout.h"
+#include "parse-srcset.h"
+#include "parse-viewport.h"
+#include "type-identifier.h"
+#include "utf8-util.h"
+#include "validator_pb.h"
+#include "atom.h"
+#include "atomutil.h"
+#include "css/amp4ads-parse-css.h"
+#include "css/parse-css.h"
+#include "css/parse-css.pb.h"
+#include "defer.h"
+#include "elements.h"
+#include "json/parser.h"
+#include "node.h"
+#include "parser.h"
+#include "strings.h"
+#include "url.h"
+#include "validator.pb.h"
+#include "re2/re2.h"  // NOLINT(build/deprecated)
+
+using absl::AsciiStrToLower;
+using absl::AsciiStrToUpper;
+using absl::ByAnyChar;
+using absl::c_copy;
+using absl::c_find;
+using absl::c_linear_search;
+using absl::EndsWith;
+using absl::EqualsIgnoreCase;
+using absl::flat_hash_map;
+using absl::flat_hash_set;
+using absl::GetFlag;
+using absl::InvalidArgumentError;
+using absl::make_unique;
+using absl::node_hash_set;
+using absl::OkStatus;
+using absl::StartsWith;
+using absl::Status;
+using absl::StrAppend;
+using absl::StrCat;
+using absl::StrContains;
+using absl::string_view;
+using absl::StrJoin;
+using absl::StrSplit;
+using amp::validator::parse_layout::CssLength;
+using htmlparser::URL;
+using htmlparser::css::BlockType;
+using htmlparser::css::CssParsingConfig;
+using google::protobuf::RepeatedPtrField;
+using std::pair;
+using std::set;
+using std::shared_ptr;
+using std::unique_ptr;
+using std::unordered_map;
+using std::unordered_set;
+using std::vector;
+
+ABSL_FLAG(int, max_node_recursion_depth, 200,
+          "Maximum recursion depth of nodes, if stack of nodes grow beyond this"
+          "validator will stop parsing with FAIL result");
+
+ABSL_FLAG(bool, duplicate_html_body_elements_is_error, false,
+          "If true, duplicate <html>,<body> elements is considered error for "
+          "validation purposes. (Default is to allow, leaving it to HTML5 "
+          "user-agent to treat them as per the spec).");
+ABSL_FLAG(bool, allow_module_nomodule, true,
+          "If true, then script versions for module and nomdule are allowed "
+          "in AMP documents. This gating should be temporary and removed "
+          "after necessary transformers are in place. See b/173803451.");
+
+namespace amp::validator {
+
+// Examples (note these are the same as kNomoduleLtsScriptSrcRe):
+// https://cdn.ampproject.org/lts/v0.js
+// https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js
+static const LazyRE2 kLtsScriptSrcRe = {
+    R"re(https://cdn\.ampproject\.org/lts/(v0|v0/amp-[a-z0-9-]*-[a-z0-9.]*)\.js)re"};
+// Examples:
+// https://cdn.ampproject.org/v0.mjs
+// https://cdn.ampproject.org/v0/amp-ad-0.1.mjs
+static const LazyRE2 kModuleScriptSrcRe = {
+    R"re(https://cdn\.ampproject\.org/(v0|v0/amp-[a-z0-9-]*-[a-z0-9.]*)\.mjs)re"};
+// Examples:
+// https://cdn.ampproject.org/v0.js
+// https://cdn.ampproject.org/v0/amp-ad-0.1.js
+static const LazyRE2 kNomoduleScriptSrcRe = {
+    R"re(https://cdn\.ampproject\.org/(v0|v0/amp-[a-z0-9-]*-[a-z0-9.]*)\.js)re"};
+// Examples:
+// https://cdn.ampproject.org/lts/v0.mjs
+// https://cdn.ampproject.org/lts/v0/amp-ad-0.1.mjs
+static const LazyRE2 kModuleLtsScriptSrcRe = {
+    R"re(https://cdn\.ampproject\.org/lts/(v0|v0/amp-[a-z0-9-]*-[a-z0-9.]*)\.mjs)re"};
+// Examples (note these are the same as kLtsScriptSrcRe):
+// https://cdn.ampproject.org/lts/v0.js
+// https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js
+static const LazyRE2 kNomoduleLtsScriptSrcRe = {
+    R"re(https://cdn\.ampproject\.org/lts/(v0|v0/amp-[a-z0-9-]*-[a-z0-9.]*)\.js)re"};
+
+namespace {
+
+// Sorts and eliminates duplicates in |v|.
+template <typename T>
+void SortAndUniquify(vector<T>* v) {
+  std::sort(v->begin(), v->end());
+  auto last = std::unique(v->begin(), v->end());
+  v->erase(last, v->end());
+}
+
+// Computes the difference set |left| - |right|, assuming |left| and
+// |right| are sorted and uniquified.
+template <typename T>
+vector<T> Diff(const vector<T>& left, const vector<T>& right) {
+  vector<T> diff;
+  std::set_difference(left.begin(), left.end(), right.begin(), right.end(),
+                      inserter(diff, diff.begin()));
+  return diff;
+}
+
+// A line / column pair.
+class LineCol {
+ public:
+  LineCol(int line, int col) : line_(line), col_(col) {}
+  int line() const { return line_; }
+  int col() const { return col_; }
+  void set_line(int line) { line_ = line; }
+  void set_col(int col) { col_ = col; }
+
+ private:
+  int line_;
+  int col_;
+};
+
+ValidationError PopulateError(ValidationError::Severity severity,
+                              ValidationError::Code code, LineCol line_col,
+                              const vector<std::string>& params,
+                              const std::string& spec_url) {
+  ValidationError error;
+  error.set_severity(severity);
+  error.set_code(code);
+  for (const std::string& param : params) {
+    error.add_params(param);
+  }
+  error.set_line(line_col.line());
+  error.set_col(line_col.col());
+  if (!spec_url.empty()) error.set_spec_url(spec_url);
+  return error;
+}
+
+class ParsedTagSpec;
+
+std::string TagSpecName(const TagSpec& spec);
+std::string TagDescriptiveName(const TagSpec& spec);
+std::string TagSpecUrl(const TagSpec& spec);
+std::string TagSpecUrl(const ParsedTagSpec& parsed_tag_spec);
+
+// Whether a spec is used based on the given type identifiers and if those
+// type identifiers appear in enabled_by or disabled_by.
+bool IsUsedForTypeIdentifiers(const vector<TypeIdentifier>& type_identifiers,
+                              const vector<TypeIdentifier>& enabled_bys,
+                              const vector<TypeIdentifier>& disabled_bys) {
+  if (!enabled_bys.empty()) {
+    for (auto& enabled_by : enabled_bys) {
+      // Is enabled by a given type identifier, use.
+      if (c_find(type_identifiers, enabled_by) != type_identifiers.end())
+        return true;
+    }
+    // Is not enabled for these type identifiers, do not use.
+    return false;
+  } else if (!disabled_bys.empty()) {
+    for (auto& disabled_by : disabled_bys) {
+      // Is disabled by a given type identifier, do not use.
+      if (c_find(type_identifiers, disabled_by) != type_identifiers.end())
+        return false;
+    }
+    // Is not disabled for these type identifiers, use.
+    return true;
+  }
+  // Is not enabled nor disabled for any type identifiers, use.
+  return true;
+}
+
+// A vector of these is returned by ParsedHtmlTag::Attributes().
+class ParsedHtmlTagAttr {
+ public:
+  const std::string& name() const { return attr_name_; }
+  const std::string& value() const { return attr_value_; }
+
+  ParsedHtmlTagAttr(ParsedHtmlTagAttr&&) = default;
+  ParsedHtmlTagAttr(const ParsedHtmlTagAttr&) = default;
+  ParsedHtmlTagAttr& operator=(const ParsedHtmlTagAttr&) = default;
+
+ private:
+  friend class ParsedHtmlTag;
+  ParsedHtmlTagAttr(const std::string& name, const std::string& value)
+      : attr_name_(AsciiStrToLower(name)), attr_value_(value) {}
+
+  std::string attr_name_;   // Stored lower-cased, regardless of original case.
+  std::string attr_value_;  // Stored unescaped.
+};                          // class ParsedHtmlTagAttr
+
+// If any script in the page uses a specific release version, then all scripts
+// must use that specific release version. This is used to record the first seen
+// script tag and ensure all following script tags follow the convention set by
+// it.
+enum ScriptReleaseVersion {
+  UNKNOWN,
+  STANDARD,
+  LTS,
+  MODULE_NOMODULE,
+  MODULE_NOMODULE_LTS
+};
+
+std::string ScriptReleaseVersionToString(ScriptReleaseVersion version) {
+  switch (version) {
+    case ScriptReleaseVersion::UNKNOWN:
+      return "unknown";
+    case ScriptReleaseVersion::STANDARD:
+      return "standard";
+    case ScriptReleaseVersion::LTS:
+      return "LTS";
+    case ScriptReleaseVersion::MODULE_NOMODULE:
+      return "module/nomodule";
+    case ScriptReleaseVersion::MODULE_NOMODULE_LTS:
+      return "module/nomodule LTS";
+  }
+  return "";
+}
+
+class ParsedHtmlTag {
+ public:
+  explicit ParsedHtmlTag(htmlparser::Node* node) : node_(node) {
+    if (node->Type() == htmlparser::NodeType::DOCTYPE_NODE) {
+      if (node->Data() == "html") {
+        node_->AddAttribute({.key = "html", .value = ""});
+      }
+
+      node_->SetData("!DOCTYPE");
+      lower_tag_name_ = "!doctype";
+      upper_tag_name_ = "!DOCTYPE";
+    } else {
+      std::string tagname =
+          htmlparser::AtomUtil::ToString(node_->DataAtom(), node_->Data());
+      lower_tag_name_ = AsciiStrToLower(tagname);
+      upper_tag_name_ = AsciiStrToUpper(tagname);
+    }
+    node_->SortAttributes(false);
+    for (const auto& attr : node_->Attributes()) {
+      attributes_.push_back(ParsedHtmlTagAttr{attr.KeyPart(), attr.value});
+    }
+  }
+
+  // New Methods
+  const std::string& LowerName() const { return lower_tag_name_; }
+
+  const std::string& UpperName() const { return upper_tag_name_; }
+
+  std::optional<std::string> HasDuplicateAttrs() const {
+    // Attributes were sorted in constructor.
+    std::string last_attr_name;
+    std::string last_attr_value;
+    for (const auto& attr_it : node_->Attributes()) {
+      if (EqualsIgnoreCase(last_attr_name, attr_it.KeyPart()) &&
+          last_attr_value != attr_it.value) {
+        return attr_it.KeyPart();
+      }
+      last_attr_name = attr_it.KeyPart();
+      last_attr_value = attr_it.value;
+    }
+    return std::nullopt;
+  }
+
+  bool IsManufacturedBodyTag() const {
+    return node_->DataAtom() == htmlparser::Atom::BODY &&
+           node_->IsManufactured();
+  }
+
+  bool IsManufacturedHtmlTag() const {
+    return node_->DataAtom() == htmlparser::Atom::HTML &&
+           node_->IsManufactured();
+  }
+
+  bool IsEmpty() const { return node_->Data().empty(); }
+
+  std::string ExtensionScriptNameAttribute() const {
+    if (UpperName() == "SCRIPT") {
+      for (const std::string& attribute :
+           {"custom-element", "custom-template", "host-service"}) {
+        if (GetAttr(attribute).has_value()) {
+          return attribute;
+        }
+      }
+    }
+    return "";
+  }
+
+  bool IsExtensionScript() const {
+    return !ExtensionScriptNameAttribute().empty();
+  }
+
+  bool IsAmpCacheDomain(string_view src) const {
+    return StartsWith(src, "https://cdn.ampproject.org");
+  }
+
+  bool IsAsyncScriptTag() const {
+    return UpperName() == "SCRIPT" && GetAttr("async").has_value() &&
+           GetAttr("src").has_value();
+  }
+
+  bool IsAmpRuntimeScript() const {
+    const string_view src = GetAttr("src").value_or("");
+    return IsAsyncScriptTag() && !IsExtensionScript() &&
+           IsAmpCacheDomain(src) &&
+           (EndsWith(src, "/v0.js") || EndsWith(src, "/v0.mjs") ||
+            EndsWith(src, "/v0.mjs?f=sxg"));
+  }
+
+  bool IsLtsScriptTag() const {
+    return IsAsyncScriptTag() &&
+           RE2::FullMatch(GetAttr("src").value_or(""), *kLtsScriptSrcRe);
+  }
+
+  bool IsModuleScriptTag() const {
+    return IsAsyncScriptTag() && (GetAttr("type").value_or("") == "module") &&
+           RE2::FullMatch(GetAttr("src").value_or(""), *kModuleScriptSrcRe);
+  }
+
+  bool IsNomoduleScriptTag() const {
+    return IsAsyncScriptTag() && GetAttr("nomodule").has_value() &&
+           RE2::FullMatch(GetAttr("src").value_or(""), *kNomoduleScriptSrcRe);
+  }
+
+  bool IsModuleLtsScriptTag() const {
+    return IsAsyncScriptTag() && (GetAttr("type").value_or("") == "module") &&
+           RE2::FullMatch(GetAttr("src").value_or(""), *kModuleLtsScriptSrcRe);
+  }
+
+  bool IsNomoduleLtsScriptTag() const {
+    return IsAsyncScriptTag() && GetAttr("nomodule").has_value() &&
+           RE2::FullMatch(GetAttr("src").value_or(""),
+                          *kNomoduleLtsScriptSrcRe);
+  }
+
+  ScriptReleaseVersion GetScriptReleaseVersion() const {
+    if (IsModuleLtsScriptTag() || IsNomoduleLtsScriptTag())
+      return ScriptReleaseVersion::MODULE_NOMODULE_LTS;
+    if (IsModuleScriptTag() || IsNomoduleScriptTag())
+      return ScriptReleaseVersion::MODULE_NOMODULE;
+    if (IsLtsScriptTag()) return ScriptReleaseVersion::LTS;
+    return ScriptReleaseVersion::STANDARD;
+  }
+
+  const vector<ParsedHtmlTagAttr>& Attributes() const { return attributes_; }
+
+  std::optional<string_view> GetAttr(string_view attr_name) const {
+    // Since tags don't have lots of attrs, linear search is probably ok.
+    for (const auto& attr : attributes_) {
+      if (attr.name() == attr_name) return attr.value();
+    }
+    return std::nullopt;
+  }
+
+  // Simplification of AppendTagToString.
+  std::string ToString() const {
+    // TODO: This need some work. Make it work for text node, comment node etc.
+    if (node_->Type() == htmlparser::NodeType::ELEMENT_NODE) {
+      return "<" +
+             htmlparser::AtomUtil::ToString(node_->DataAtom(), node_->Data()) +
+             ">";
+    }
+
+    return "";
+  }
+
+ private:
+  htmlparser::Node* node_;
+  std::string lower_tag_name_;
+  std::string upper_tag_name_;
+  vector<ParsedHtmlTagAttr> attributes_;
+  ParsedHtmlTag(const ParsedHtmlTag&) = delete;
+  ParsedHtmlTag operator=(const ParsedHtmlTag&) = delete;
+};
+
+class ParsedUrlSpec {
+ public:
+  // In the Javascript version of the code, |spec| may be null. In
+  // C++, it's never null but it could be UrlSpec::default_instance().
+  explicit ParsedUrlSpec(const UrlSpec* spec)
+      : spec_(spec),
+        allowed_protocols_(spec->protocol().begin(), spec->protocol().end()) {}
+
+  bool IsAllowedProtocol(const std::string& protocol) const {
+    return allowed_protocols_.find(protocol) != allowed_protocols_.end();
+  }
+
+  const UrlSpec* spec() const { return spec_; }
+
+ private:
+  const UrlSpec* spec_;
+  node_hash_set<std::string> allowed_protocols_;
+};
+
+// ParsedAttrTriggerSpec is used by ParsedAttrSpec to determine which
+// attributes also require another attribute for some given set of
+// conditions.
+// (e.g. attr name: "on" if_value_regex: "tap:.*" also_require_attr: "role")
+class ParsedAttrTriggerSpec {
+ public:
+  explicit ParsedAttrTriggerSpec(const AttrSpec* attr_spec)
+      : spec_(&attr_spec->trigger()), attr_name_(attr_spec->name()) {
+    if (spec_->has_if_value_regex())
+      if_value_regex_ = make_unique<RE2>(spec_->if_value_regex());
+  }
+
+  bool has_if_value_regex() const { return if_value_regex_ != nullptr; }
+  // You must check has_if_value_regex() before accessing.
+  const RE2& if_value_regex() const { return *if_value_regex_; }
+
+  const std::string& attr_name() const { return attr_name_; }
+  const AttrTriggerSpec& spec() const { return *spec_; }
+
+ private:
+  const AttrTriggerSpec* spec_;
+  const std::string attr_name_;
+  unique_ptr<RE2> if_value_regex_;
+};
+
+// This wrapper class provides access to an AttrSpec and
+// an attribute id which is unique within its context
+// (e.g., it's unique within the ParsedTagSpec).
+class ParsedAttrSpec {
+ public:
+  ParsedAttrSpec(const AttrSpec* spec, int32_t id)
+      : spec_(spec),
+        id_(id),
+        trigger_spec_(spec),
+        value_url_spec_(&spec_->value_url()) {
+    // Store the enum of the AttrSpec's type identifiers.
+    for (const std::string& disabled_by : spec_->disabled_by()) {
+      disabled_by_.push_back(GetTypeIdentifier(disabled_by));
+    }
+    for (const std::string& enabled_by : spec_->enabled_by()) {
+      enabled_by_.push_back(GetTypeIdentifier(enabled_by));
+    }
+    if (spec_->has_value_regex())
+      value_regex_ = make_unique<RE2>(spec_->value_regex());
+    if (spec_->has_value_regex_casei()) {
+      RE2::Options options;
+      options.set_case_sensitive(false);
+      value_regex_ = make_unique<RE2>(spec_->value_regex_casei(), options);
+    }
+    if (spec_->has_disallowed_value_regex()) {
+      RE2::Options options;
+      options.set_case_sensitive(false);
+      disallowed_value_regex_ =
+          make_unique<RE2>(spec_->disallowed_value_regex(), options);
+    }
+    for (auto& css_declaration : spec_->css_declaration()) {
+      css_declaration_by_name_[css_declaration.name()] = &css_declaration;
+    }
+    for (int ii = 0; ii < spec_->value_properties().properties_size(); ++ii) {
+      const PropertySpec& property_spec =
+          spec_->value_properties().properties(ii);
+      value_property_by_name_[property_spec.name()] = &property_spec;
+      if (property_spec.mandatory())
+        mandatory_value_properties_.push_back(&property_spec);
+    }
+    // Sort by address to make diffing more efficient.
+    SortAndUniquify(&mandatory_value_properties_);
+  }
+  ParsedAttrSpec(ParsedAttrSpec&& other) = default;
+
+  // A unique id for the given context (e.g., unique within a given
+  // ParsedTagSpec).
+  int32_t id() const { return id_; }
+  const AttrSpec& spec() const { return *spec_; }
+
+  bool has_value_regex() const { return value_regex_ != nullptr; }
+  // You must check has_value_regex() before accessing.
+  const RE2& value_regex() const { return *value_regex_; }
+
+  bool has_disallowed_value_regex() const {
+    return disallowed_value_regex_ != nullptr;
+  }
+
+  // You must check has_disallowed_value_regex() before accessing.
+  const RE2& disallowed_value_regex() const { return *disallowed_value_regex_; }
+
+  const ParsedAttrTriggerSpec& trigger_spec() const { return trigger_spec_; }
+
+  const ParsedUrlSpec& value_url_spec() const { return value_url_spec_; }
+
+  const unordered_map<std::string, const PropertySpec*>&
+  value_property_by_name() const {
+    return value_property_by_name_;
+  }
+
+  const unordered_map<std::string, const CssDeclaration*>&
+  css_declaration_by_name() const {
+    return css_declaration_by_name_;
+  }
+
+  const vector<const PropertySpec*>& mandatory_value_properties() const {
+    return mandatory_value_properties_;
+  }
+
+  // Whether this attr spec should be used for the given type identifiers based
+  // on the AttrSpec's disabled_by or enabled_by fields.
+  bool IsUsedForTypeIdentifiers(
+      const vector<TypeIdentifier>& type_identifiers) const {
+    return ::amp::validator::IsUsedForTypeIdentifiers(
+        type_identifiers, enabled_by_, disabled_by_);
+  }
+
+ private:
+  const AttrSpec* spec_;
+  int32_t id_;
+  unique_ptr<RE2> value_regex_;
+  unique_ptr<RE2> disallowed_value_regex_;
+  // Name lookup for spec().value_properties().properties().
+  unordered_map<std::string, const PropertySpec*> value_property_by_name_;
+  // Name lookup for spec().css_declaration().
+  unordered_map<std::string, const CssDeclaration*> css_declaration_by_name_;
+  // The mandatory spec().value_properties().properties().
+  vector<const PropertySpec*> mandatory_value_properties_;
+  vector<TypeIdentifier> disabled_by_;
+  vector<TypeIdentifier> enabled_by_;
+  ParsedAttrTriggerSpec trigger_spec_;
+  ParsedUrlSpec value_url_spec_;
+  ParsedAttrSpec(const ParsedAttrSpec&) = delete;
+  ParsedAttrSpec& operator=(const ParsedAttrSpec&) = delete;
+};
+
+// A parsed ReferencePoint, that is, the tag_spec_id field provides the
+// id for the ParsedTagSpec with point->tag_spec_name().
+struct ParsedReferencePoint {
+  const ReferencePoint* point;
+  int32_t tag_spec_id;
+};
+
+// Holds the reference points for a particular parent tag spec, including
+// their resolved tagspec ids. This class is a container of
+// |ParsedReferencePoint| for convenient iteration.
+class ParsedReferencePoints {
+ public:
+  ParsedReferencePoints() : parent_(nullptr) {}
+  ParsedReferencePoints(
+      const TagSpec& parent,
+      const unordered_map<std::string, int32_t>& tag_spec_ids_by_tag_spec_name)
+      : parent_(&parent) {
+    for (const ReferencePoint& p : parent.reference_points()) {
+      auto iter = tag_spec_ids_by_tag_spec_name.find(p.tag_spec_name());
+      CHECK(iter != tag_spec_ids_by_tag_spec_name.end());
+      parsed_.emplace_back(ParsedReferencePoint{&p, iter->second});
+    }
+  }
+
+  bool empty() const { return parsed_.empty(); }
+
+  int32_t size() const { return parsed_.size(); }
+
+  vector<ParsedReferencePoint>::const_iterator begin() const {
+    return parsed_.begin();
+  }
+
+  vector<ParsedReferencePoint>::const_iterator end() const {
+    return parsed_.end();
+  }
+
+  // The spec URL for the parsed tag spec which declared these
+  // reference points.
+  std::string parent_spec_url() const { return TagSpecUrl(*parent_); }
+
+  // The tag spec name for the tag spec which declared these reference points.
+  std::string parent_tag_spec_name() const { return TagSpecName(*parent_); }
+
+ private:
+  const TagSpec* parent_;
+  vector<ParsedReferencePoint> parsed_;
+};
+
+class ParsedDocSpec {
+ public:
+  explicit ParsedDocSpec(const DocSpec& spec) : spec_(spec) {
+    // Store the enum of the TagSpec's type identifiers.
+    for (const std::string& disabled_by : spec.disabled_by()) {
+      disabled_by_.push_back(GetTypeIdentifier(disabled_by));
+    }
+    for (const std::string& enabled_by : spec.enabled_by()) {
+      enabled_by_.push_back(GetTypeIdentifier(enabled_by));
+    }
+  }
+
+  const DocSpec& spec() const { return spec_; }
+
+  const vector<TypeIdentifier>& disabled_by() const { return disabled_by_; }
+
+  const vector<TypeIdentifier>& enabled_by() const { return enabled_by_; }
+
+ private:
+  const DocSpec& spec_;
+  vector<TypeIdentifier> disabled_by_;
+  vector<TypeIdentifier> enabled_by_;
+};
+
+class ParsedDocCssSpec {
+ public:
+  ParsedDocCssSpec(const DocCssSpec& spec,
+                   const RepeatedPtrField<DeclarationList>& decl_lists)
+      : spec_(spec) {
+    // Store the enum of the TagSpec's type identifiers.
+    for (const std::string& disabled_by : spec.disabled_by()) {
+      disabled_by_.push_back(GetTypeIdentifier(disabled_by));
+    }
+    for (const std::string& enabled_by : spec.enabled_by()) {
+      enabled_by_.push_back(GetTypeIdentifier(enabled_by));
+    }
+    for (const CssDeclaration& declaration : spec.declaration()) {
+      css_declaration_by_name_[declaration.name()] = &declaration;
+      css_declaration_svg_by_name_[declaration.name()] = &declaration;
+    }
+    for (const CssDeclaration& declaration : spec.declaration_svg()) {
+      css_declaration_svg_by_name_[declaration.name()] = &declaration;
+    }
+    // Expand the list of declarations tracked by this spec by merging in any
+    // declarations mentioned in declaration_lists referenced by this spec. This
+    // mechanism reduces redundancy in the lists themselves, making rules more
+    // readable.
+    for (const std::string& decl_list_name : spec.declaration_list()) {
+      for (const DeclarationList& decl_list : decl_lists) {
+        if (decl_list.name() == decl_list_name) {
+          for (const CssDeclaration& declaration : decl_list.declaration()) {
+            css_declaration_by_name_[declaration.name()] = &declaration;
+            css_declaration_svg_by_name_[declaration.name()] = &declaration;
+          }
+        }
+      }
+    }
+    for (const std::string& decl_list_name : spec.declaration_list_svg()) {
+      for (const DeclarationList& decl_list : decl_lists) {
+        if (decl_list.name() == decl_list_name) {
+          for (const CssDeclaration& declaration : decl_list.declaration()) {
+            css_declaration_svg_by_name_[declaration.name()] = &declaration;
+          }
+        }
+      }
+    }
+    image_url_spec_ = make_unique<ParsedUrlSpec>(&spec.image_url_spec());
+    font_url_spec_ = make_unique<ParsedUrlSpec>(&spec.font_url_spec());
+  }
+
+  const DocCssSpec& spec() const { return spec_; }
+
+  const vector<TypeIdentifier>& disabled_by() const { return disabled_by_; }
+
+  const vector<TypeIdentifier>& enabled_by() const { return enabled_by_; }
+
+  // Returns the CssDeclaration rules for a matching css declaration name, if
+  // is found, else null.
+  const CssDeclaration* CssDeclarationByName(string_view candidate) const {
+    std::string decl_key = AsciiStrToLower(candidate);
+    if (spec_.expand_vendor_prefixes())
+      decl_key =
+          std::string(htmlparser::css::StripVendorPrefix(decl_key).data());
+    auto iter = css_declaration_by_name_.find(decl_key);
+    if (iter != css_declaration_by_name_.end()) return iter->second;
+    return nullptr;
+  }
+
+  // Returns the CssDeclaration rules for a matching css declaration name in SVG
+  // scope, if is found, else null.
+  const CssDeclaration* CssDeclarationSvgByName(string_view candidate) const {
+    std::string decl_key = AsciiStrToLower(candidate);
+    if (spec_.expand_vendor_prefixes())
+      decl_key =
+          std::string(htmlparser::css::StripVendorPrefix(decl_key).data());
+    auto iter = css_declaration_svg_by_name_.find(decl_key);
+    if (iter != css_declaration_svg_by_name_.end()) return iter->second;
+    return nullptr;
+  }
+
+  const ParsedUrlSpec& image_url_spec() const { return *image_url_spec_; }
+
+  const ParsedUrlSpec& font_url_spec() const { return *font_url_spec_; }
+
+ private:
+  const DocCssSpec& spec_;
+  vector<TypeIdentifier> disabled_by_;
+  vector<TypeIdentifier> enabled_by_;
+  // Allows lookup by declaration name.
+  unordered_map<std::string, const CssDeclaration*> css_declaration_by_name_;
+  unordered_map<std::string, const CssDeclaration*>
+      css_declaration_svg_by_name_;
+  unique_ptr<ParsedUrlSpec> image_url_spec_;
+  unique_ptr<ParsedUrlSpec> font_url_spec_;
+};
+
+// TagSpecs specify attributes that are valid for a particular tag.
+// They can also reference lists of attributes (AttrLists), thereby
+// sharing those definitions. This abstraction instantiates
+// ParsedAttrSpec for each AttrSpec (from validator-*.protoascii, our
+// specification file) exactly once. To accomplish that, it keeps
+// around the attr lists with ParsedAttrSpec instances.
+class ParsedAttrSpecs {
+ public:
+  explicit ParsedAttrSpecs(const RepeatedPtrField<AttrList>& attr_lists) {
+    for (const AttrList& attr_list : attr_lists) {
+      vector<const ParsedAttrSpec*>* parsed_attr_list =
+          &attr_lists_by_name_[attr_list.name()];
+      for (const AttrSpec& attr_spec : attr_list.attrs()) {
+        parsed_attr_specs_.emplace_back(
+            make_unique<ParsedAttrSpec>(&attr_spec, parsed_attr_specs_.size()));
+        parsed_attr_list->push_back(parsed_attr_specs_.back().get());
+      }
+    }
+  }
+
+  // Collect the ParsedAttrSpec pointers for a given |tagspec|.
+  // There are four ways to specify attributes:
+  // (1) implicitly by a tag spec, if the tag spec has the amp_layout field
+  // set - in this case, the AMP_LAYOUT_ATTRS are assumed;
+  // (2) within a TagSpec::attrs;
+  // (3) via TagSpec::attr_lists which references lists by key;
+  // (4) within the $GLOBAL_ATTRS TagSpec::attr_list.
+  // It's possible to provide multiple
+  // specifications for the same attribute name, but for any given tag only
+  // one such specification can be active. The precedence is (1), (2), (3), (4).
+  // If tagspec.explicit_attrs_only is true then only collect the attributes
+  // from (2) and (3).
+  Status GetAttrsFor(const TagSpec& tagspec,
+                     vector<const ParsedAttrSpec*>* attrs) {
+    // We implement precedence by collecting attributes from (1), (2),
+    // (3), (4) in this order and avoiding to override attributes with
+    // a name already seen.
+    node_hash_set<std::string> names_seen;
+    // (1) layout attrs (except when explicit_attrs_only is true).
+    if (!tagspec.explicit_attrs_only() && tagspec.has_amp_layout() &&
+        tagspec.tag_name() != "$REFERENCE_POINT") {
+      auto it = attr_lists_by_name_.find("$AMP_LAYOUT_ATTRS");
+      if (it != attr_lists_by_name_.end()) {
+        for (const ParsedAttrSpec* p : it->second)
+          if (names_seen.insert(p->spec().name()).second) attrs->push_back(p);
+      }
+    }
+    // (2) attributes specified within |tagspec|.
+    for (const AttrSpec& s : tagspec.attrs())
+      if (names_seen.insert(s.name()).second) {
+        parsed_attr_specs_.emplace_back(
+            make_unique<ParsedAttrSpec>(&s, parsed_attr_specs_.size()));
+        attrs->push_back(parsed_attr_specs_.back().get());
+      }
+    // (3) attributes specified via reference to an attr_list.
+    for (const std::string& key : tagspec.attr_lists()) {
+      auto it = attr_lists_by_name_.find(key);
+      if (it == attr_lists_by_name_.end()) {
+        return InvalidArgumentError(
+            StrCat("invalid rules - referenced attr_lists entry not found: '",
+                   key, "'"));
+      }
+      for (const ParsedAttrSpec* p : it->second)
+        if (names_seen.insert(p->spec().name()).second) attrs->push_back(p);
+    }
+    // (4) attributes specified in the global_attr list (except when
+    // explicit_attrs_only is true).
+    if (!tagspec.explicit_attrs_only() &&
+        tagspec.tag_name() != "$REFERENCE_POINT") {
+      auto it = attr_lists_by_name_.find("$GLOBAL_ATTRS");
+      if (it == attr_lists_by_name_.end()) return OkStatus();
+      for (const ParsedAttrSpec* p : it->second)
+        if (names_seen.insert(p->spec().name()).second) attrs->push_back(p);
+    }
+    return OkStatus();
+  }
+
+  const ParsedAttrSpec& GetById(int32_t id) const {
+    return *parsed_attr_specs_[id];
+  }
+
+ private:
+  vector<unique_ptr<ParsedAttrSpec>> parsed_attr_specs_;
+  unordered_map<std::string, vector<const ParsedAttrSpec*>> attr_lists_by_name_;
+};
+
+// Generates a htmlparser::css::CssParsingConfig.
+CssParsingConfig GenCssParsingConfig() {
+  CssParsingConfig config;
+  // If other @ rule types are added to the rules, their block parsing types
+  // will need to be added here as well.
+  config.at_rule_spec["font-face"] = BlockType::PARSE_AS_DECLARATIONS;
+  config.at_rule_spec["keyframes"] = BlockType::PARSE_AS_RULES;
+  config.at_rule_spec["media"] = BlockType::PARSE_AS_RULES;
+  config.at_rule_spec["page"] = BlockType::PARSE_AS_DECLARATIONS;
+  config.at_rule_spec["supports"] = BlockType::PARSE_AS_RULES;
+  config.at_rule_spec["-moz-document"] = BlockType::PARSE_AS_RULES;
+  // Note that ignoring still generates an error.
+  config.default_spec = BlockType::PARSE_AS_IGNORE;
+  return config;
+}
+
+// Instances of this class precompute the regular expressions for a particular
+// Cdata specification.
+class ParsedCdataSpec {
+ public:
+  explicit ParsedCdataSpec(const TagSpec* parent_tag_spec)
+      : spec_(&CHECK_NOTNULL(parent_tag_spec)->cdata()),
+        parent_tag_spec_(parent_tag_spec),
+        css_parsing_config_(GenCssParsingConfig()) {
+    RE2::Options options;
+    options.set_case_sensitive(false);
+    for (const auto& denylist : spec_->disallowed_cdata_regex()) {
+      denylists_with_error_msgs_.emplace_back(
+          make_unique<RE2>(denylist.regex(), options),
+          denylist.error_message());
+    }
+    for (const std::string& declaration : spec_->css_spec().declaration()) {
+      allowed_declarations_.emplace_back(declaration);
+    }
+    if (spec_->has_cdata_regex()) {
+      cdata_regex_ = make_unique<RE2>(spec_->cdata_regex());
+    }
+    if (spec_->has_css_spec()) {
+      for (const AtRuleSpec& at_rule_spec : spec_->css_spec().at_rule_spec())
+        allowed_at_rules_.insert(at_rule_spec.name());
+    }
+  }
+
+  const CdataSpec& Spec() const { return *spec_; }
+  const TagSpec& ParentTagSpec() const { return *parent_tag_spec_; }
+
+  const vector<pair<unique_ptr<RE2>, std::string>>& DenylistsWithErrorMsgs()
+      const {
+    return denylists_with_error_msgs_;
+  }
+  // Be sure to check Spec().has_cdata_regex() before accessing.
+  const RE2& CdataRegex() const { return *cdata_regex_; }
+
+  const CssParsingConfig& css_parsing_config() const {
+    return css_parsing_config_;
+  }
+
+  bool IsAtRuleValid(string_view at_rule_name) const {
+    // This should never be called unless there is a CSS spec during
+    // construction, which verifies that there is at least a default value.
+    if (!spec_->has_css_spec()) {
+      DLOG(FATAL) << "IsAtRuleValid called for non-css cdata spec: "
+                  << at_rule_name;
+      return false;
+    }
+    // "-moz-document" is specified in the list of allowed rules with an
+    // explicit vendor prefix. The idea here is that only this specific vendor
+    // prefix is allowed, not "-ms-document" or even "document". We first search
+    // the allowed list for the seen `at_rule_name` with stripped vendor prefix,
+    // then if not found, we search again without sripping the vendor prefix.
+    if (allowed_at_rules_.find(std::string(htmlparser::css::StripVendorPrefix(
+            at_rule_name))) != allowed_at_rules_.end())
+      return true;
+    return allowed_at_rules_.find(std::string(at_rule_name)) !=
+           allowed_at_rules_.end();
+  }
+
+  bool IsDeclarationValid(string_view declaration_name) const {
+    // This should never be called unless there is a CSS spec during
+    // construction, which verifies that there is at least a default value.
+    if (!spec_->has_css_spec()) {
+      DLOG(FATAL) << "IsDeclarationValid called for non-css cdata spec: "
+                  << declaration_name;
+      return false;
+    }
+
+    if (allowed_declarations_.empty()) return true;
+
+    // Note: declarations are case-sensitive, so we should not adjust case
+    // before looking up in allowed list.
+    return c_linear_search(
+        allowed_declarations_,
+        htmlparser::css::StripVendorPrefix(declaration_name));
+  }
+
+  std::string AllowedDeclarationsString() const {
+    if (allowed_declarations_.size() > 5) return "";
+    return StrCat("['", StrJoin(allowed_declarations_, "', '"), "']");
+  }
+
+ private:
+  const CdataSpec* spec_;
+  const TagSpec* parent_tag_spec_;
+  const CssParsingConfig css_parsing_config_;
+  unique_ptr<RE2> cdata_regex_;
+  vector<pair<unique_ptr<RE2>, std::string>> denylists_with_error_msgs_;
+  node_hash_set<std::string> allowed_at_rules_;
+  vector<std::string> allowed_declarations_;
+};
+
+// A DispatchKey represents a tuple of 1-3 strings:
+// - attribute name
+// - attribute value (optional)
+// - mandatory parent html tag (optional)
+// A Dispatch key can be generated from some validator TagSpecs. One dispatch
+// key per attribute can be generated from any HTML tag. If one of the dispatch
+// keys for an HTML tag matches that of a TagSpec, we validate that HTML tag
+// against only this one TagSpec. Otherwise, this TagSpec is not eligible for
+// validation against this HTML tag.
+std::string DispatchKey(AttrSpec::DispatchKeyType dispatch_key_type,
+                        const std::string& attr_name,
+                        const std::string& attr_value,
+                        const std::string& mandatory_parent) {
+  // Constructing a string using foo("\0") constructs an empty string, since
+  // the char array is considered null-terminated.
+  const std::string sep("\0", 1);
+  CHECK_EQ(1, sep.length());
+
+  switch (dispatch_key_type) {
+    case AttrSpec::NONE_DISPATCH:
+      LOG(FATAL) << dispatch_key_type;
+    case AttrSpec::NAME_DISPATCH:
+      return attr_name;
+    case AttrSpec::NAME_VALUE_DISPATCH:
+      return StrCat(attr_name, sep, attr_value);
+    case AttrSpec::NAME_VALUE_PARENT_DISPATCH:
+      return StrCat(attr_name, sep, attr_value, sep, mandatory_parent);
+  }
+}
+
+class CdataMatcher;
+class ChildTagMatcher;
+class ParsedValidatorRules;
+class ReferencePointMatcher;
+
+// We only track (that is, add them to Context.RecordTagspecValidated) validated
+// tagspecs as necessary. That is, if it's needed for document scope validation:
+// - Mandatory tags
+// - Unique tags
+// - Tags (identified by their tag_spec_name) that are required by other tags.
+enum RecordValidated { NEVER, ALWAYS, IF_PASSING };
+RecordValidated ShouldRecordTagspecValidated(
+    const TagSpec& tag,
+    const unordered_set<std::string>& tag_spec_names_to_track) {
+  // Always update from TagSpec if the tag is passing. If it's failing we
+  // typically want to update from the best match as it can satisfy
+  // requirements which otherwise can confuse the user later. The exception is
+  // tagspecs which introduce requirements but satisfy none, such as unique.
+  // https://github.com/ampproject/amphtml/issues/24359
+
+  // Mandatory and tagSpecIdsToTrack only satisfy requirements, making the
+  // output less verbose even if the tag is failing.
+  if (tag.mandatory() || tag_spec_names_to_track.count(TagSpecName(tag)))
+    return ALWAYS;
+  // Unique and similar can introduce requirements, ie: there cannot be
+  // another such tag. We don't want to introduce requirements for failing
+  // tags.
+  if (tag.unique() || tag.unique_warning() || !tag.requires().empty())
+    return IF_PASSING;
+  return NEVER;
+}
+
+// This wrapper class provides access to a TagSpec and a tag id
+// which is unique within its context, the ParsedValidatorRules.
+class ParsedTagSpec {
+ public:
+  ParsedTagSpec(
+      ParsedAttrSpecs* parsed_attr_specs,
+      const unordered_map<std::string, int32_t>& tag_spec_ids_by_tag_spec_name,
+      RecordValidated should_record_tagspec_validated, const TagSpec* spec,
+      int32_t id)
+      : spec_(spec),
+        id_(id),
+        reference_points_(*spec, tag_spec_ids_by_tag_spec_name),
+        is_reference_point_(spec->tag_name() == "$REFERENCE_POINT"),
+        parsed_cdata_spec_(spec),
+        should_record_tagspec_validated_(should_record_tagspec_validated) {
+    vector<const ParsedAttrSpec*> attrs;
+    if (auto status = parsed_attr_specs->GetAttrsFor(*spec, &attrs);
+        !status.ok()) {
+      status_ = status;
+      return;
+    }
+
+    // Store the enum of the TagSpec's type identifiers.
+    for (const std::string& disabled_by : spec->disabled_by()) {
+      disabled_by_.push_back(GetTypeIdentifier(disabled_by));
+    }
+    for (const std::string& enabled_by : spec->enabled_by()) {
+      enabled_by_.push_back(GetTypeIdentifier(enabled_by));
+    }
+
+    // Organize the attribute specs to make validation of a tag efficient.
+    // Since the rules are instantiated statically (see GetRules in this file),
+    // the constructor only runs once per tag specification in
+    // the validator.protoascii file. All methods other than the constructor
+    // are deliberately made const.
+    for (const ParsedAttrSpec* parsed_attr_spec : attrs) {
+      if (parsed_attr_spec->spec().mandatory())
+        mandatory_attr_ids_.push_back(parsed_attr_spec->id());
+      if (parsed_attr_spec->spec().has_mandatory_oneof())
+        mandatory_oneofs_.push_back(parsed_attr_spec->spec().mandatory_oneof());
+      if (parsed_attr_spec->spec().has_mandatory_anyof())
+        mandatory_anyofs_.push_back(parsed_attr_spec->spec().mandatory_anyof());
+      attr_ids_by_name_[parsed_attr_spec->spec().name()] =
+          parsed_attr_spec->id();
+      for (const std::string& name :
+           parsed_attr_spec->spec().alternative_names())
+        attr_ids_by_name_.emplace(std::make_pair(name, parsed_attr_spec->id()));
+      if (parsed_attr_spec->spec().dispatch_key() != AttrSpec::NONE_DISPATCH)
+        dispatch_key_attr_specs_.push_back(parsed_attr_spec);
+      if (parsed_attr_spec->spec().implicit())
+        implicit_attrspecs_.insert(parsed_attr_spec->id());
+      if (parsed_attr_spec->spec().name() == "type" &&
+          parsed_attr_spec->spec().value_casei_size() > 0) {
+        for (const std::string& v : parsed_attr_spec->spec().value_casei()) {
+          if (EqualsIgnoreCase("application/json", v)) {
+            is_type_json_ = true;
+            break;
+          }
+        }
+      }
+      if (parsed_attr_spec->spec().has_value_url()) contains_url_ = true;
+      if (!parsed_attr_spec->spec().requires_extension().empty())
+        attrs_can_satisfy_extension_ = true;
+    }
+    SortAndUniquify(&mandatory_oneofs_);
+    SortAndUniquify(&mandatory_anyofs_);
+    SortAndUniquify(&mandatory_attr_ids_);
+    c_copy(spec->requires_extension(), std::back_inserter(requires_extension_));
+    c_copy(spec->requires(), std::back_inserter(requires_));
+    c_copy(spec->excludes(), std::back_inserter(excludes_));
+    for (const std::string& tag_spec_name : spec->also_requires_tag_warning()) {
+      auto iter = tag_spec_ids_by_tag_spec_name.find(tag_spec_name);
+      CHECK(iter != tag_spec_ids_by_tag_spec_name.end());
+      also_requires_tag_warnings_.push_back(iter->second);
+    }
+  }
+  ParsedTagSpec(ParsedTagSpec&& other) = default;
+
+  Status status() const { return status_; }
+
+  int32_t id() const { return id_; }
+  const TagSpec& spec() const { return *spec_; }
+  const ParsedCdataSpec& parsed_cdata_spec() const {
+    return parsed_cdata_spec_;
+  }
+
+  // If tag has a cdata spec, returns a CdataMatcher, else nullptr.
+  unique_ptr<CdataMatcher> cdata_matcher(const LineCol& line_col) const {
+    if (spec().has_cdata())
+      return make_unique<CdataMatcher>(&parsed_cdata_spec_, line_col);
+    return nullptr;
+  }
+
+  // If tag has a child_tag spec, returns a ChildTagMatcher, else nullptr.
+  unique_ptr<ChildTagMatcher> child_tag_matcher(const LineCol& line_col) const {
+    if (spec().has_child_tags())
+      return make_unique<ChildTagMatcher>(&spec(), line_col);
+    return nullptr;
+  }
+
+  // If tag has a reference point spec, returns a ReferencePointMatcher,
+  // else nullptr.
+  unique_ptr<ReferencePointMatcher> reference_point_matcher(
+      const ParsedValidatorRules& rules, const LineCol& line_col) const {
+    if (has_reference_points())
+      return make_unique<ReferencePointMatcher>(&rules, &reference_points(),
+                                                line_col);
+    return nullptr;
+  }
+
+  bool ContainsUrl() const { return contains_url_; }
+
+  // Whether this tag spec should be used for the given type identifiers based
+  // on the TagSpec's disabled_by or enabled_by fields.
+  bool IsUsedForTypeIdentifiers(
+      const vector<TypeIdentifier>& type_identifiers) const {
+    return ::amp::validator::IsUsedForTypeIdentifiers(
+        type_identifiers, enabled_by_, disabled_by_);
+  }
+
+  // A dispatch key is a combination of attribute name, attribute value and/or
+  // tag parent. If multiple TagSpecs have the same dispatch key, then the
+  // TagSpec with the first instance of that dispatch key is used. When an
+  // encountered tag matches this dispatch key, it is validated first against
+  // that first TagSpec in order to improve validation performance and error
+  // message selection. Not all TagSpecs have a dispatch key. GetDispatchKeys
+  // returns unique dispatch keys for the TagSpec, if any. If the attribute
+  // value is used (either value or value_casei), uses the first value from the
+  // protoascii.
+  std::vector<std::string> GetDispatchKeys() const {
+    std::vector<std::string> out;
+    out.reserve(dispatch_key_attr_specs_.size());
+    for (const auto* dispatch_key_attr_spec : dispatch_key_attr_specs_) {
+      const ParsedAttrSpec& parsed_attr_spec = *dispatch_key_attr_spec;
+      out.push_back(
+          DispatchKey(parsed_attr_spec.spec().dispatch_key(),
+                      parsed_attr_spec.spec().name(),
+                      parsed_attr_spec.spec().value_size() > 0
+                          ? AsciiStrToLower(parsed_attr_spec.spec().value(0))
+                          : (parsed_attr_spec.spec().value_casei_size() > 0
+                                 ? parsed_attr_spec.spec().value_casei(0)
+                                 : ""),
+                      spec_->mandatory_parent()));
+    }
+    return out;
+  }
+
+  const vector<int32_t>& AlsoRequiresTagWarnings() const {
+    return also_requires_tag_warnings_;
+  }
+  const vector<std::string>& Requires() const { return requires_; }
+  const vector<std::string>& Excludes() const { return excludes_; }
+
+  // Whether or not the tag should be recorded via
+  // Context->RecordTagspecValidated if it was validated
+  // successfullly. For performance, this is only done for tags that
+  // are mandatory, unique, or possibly required by some other tag.
+  RecordValidated ShouldRecordTagspecValidated() const {
+    return should_record_tagspec_validated_;
+  }
+
+  bool is_reference_point() const { return is_reference_point_; }
+
+  bool is_type_json() const { return is_type_json_; }
+
+  bool has_reference_points() const { return !reference_points_.empty(); }
+
+  const ParsedReferencePoints& reference_points() const {
+    return reference_points_;
+  }
+
+  const bool AttrsCanSatisfyExtension() const {
+    return attrs_can_satisfy_extension_;
+  }
+
+  const bool HasAttrWithName(const std::string& name) const {
+    return attr_ids_by_name_.find(name) != attr_ids_by_name_.end();
+  }
+
+  const set<int32_t>& implicit_attrspecs() const { return implicit_attrspecs_; }
+
+  const unordered_map<std::string, int32_t>& attr_ids_by_name() const {
+    return attr_ids_by_name_;
+  }
+
+  const vector<std::string>& mandatory_oneofs() const {
+    return mandatory_oneofs_;
+  }
+
+  const vector<std::string>& mandatory_anyofs() const {
+    return mandatory_anyofs_;
+  }
+
+  vector<int32_t> mandatory_attr_ids() const { return mandatory_attr_ids_; }
+
+ private:
+  Status status_;
+  const TagSpec* spec_;
+  int32_t id_;
+  ParsedReferencePoints reference_points_;
+  bool is_reference_point_;
+  bool is_type_json_ = false;
+  bool contains_url_ = false;
+  unordered_map<std::string, int32_t> attr_ids_by_name_;
+  vector<TypeIdentifier> disabled_by_;
+  vector<TypeIdentifier> enabled_by_;
+  vector<int32_t> mandatory_attr_ids_;
+  vector<std::string> mandatory_oneofs_;
+  vector<std::string> mandatory_anyofs_;
+  ParsedCdataSpec parsed_cdata_spec_;
+  RecordValidated should_record_tagspec_validated_;
+  bool attrs_can_satisfy_extension_ = false;
+  vector<std::string> requires_;
+  vector<std::string> excludes_;
+  vector<std::string> requires_extension_;
+  vector<int32_t> also_requires_tag_warnings_;
+  set<int32_t> implicit_attrspecs_;
+  vector<const ParsedAttrSpec*> dispatch_key_attr_specs_;
+  ParsedTagSpec(const ParsedTagSpec&) = delete;
+  ParsedTagSpec& operator=(const ParsedTagSpec&) = delete;
+};  // class ParsedTagSpec
+
+// For uniquely identifying a tag spec, we either find the spec_name in the tag
+// spec or fall back to the tag_name.
+std::string TagSpecName(const TagSpec& spec) {
+  return spec.has_spec_name() ? spec.spec_name()
+                              : AsciiStrToLower(spec.tag_name());
+}
+
+// For creating error messages, we either find the descriptive_name in the tag
+// spec or fall back to the tag_name.
+std::string TagDescriptiveName(const TagSpec& spec) {
+  return spec.has_descriptive_name() ? spec.descriptive_name()
+                                     : AsciiStrToLower(spec.tag_name());
+}
+
+// We either find the spec_url in the tag spec, or fall back to the extension
+// spec URL if available.
+std::string TagSpecUrl(const TagSpec& spec) {
+  if (spec.has_spec_url()) return spec.spec_url();
+
+  const std::string extension_spec_url_prefix =
+      "https://amp.dev/documentation/components/";
+  if (spec.has_extension_spec() && spec.extension_spec().has_name())
+    return StrCat(extension_spec_url_prefix, spec.extension_spec().name());
+  if (spec.requires_extension_size() > 0)
+    // Return the first |requires_extension|, which should be the most
+    // representitive.
+    return StrCat(extension_spec_url_prefix, spec.requires_extension(0));
+
+  return "";
+}
+
+// Variant that accepts a ParsedTagSpec.
+// TODO: Find a better mechanism for this in the future.
+std::string TagSpecUrl(const ParsedTagSpec& parsed_tag_spec) {
+  return TagSpecUrl(parsed_tag_spec.spec());
+}
+
+class Context;
+
+// The child tag matcher evaluates ChildTagSpec. The constructor
+// provides the enclosing TagSpec for the parent tag so that we can
+// produce error messages mentioning the parent.
+class ChildTagMatcher {
+ public:
+  explicit ChildTagMatcher(const TagSpec* parent_spec, const LineCol& line_col)
+      : parent_spec_(parent_spec), line_col_(line_col) {
+    CHECK(parent_spec->has_child_tags());
+  }
+
+  void MatchChildTagName(const ParsedHtmlTag& encountered_tag,
+                         const Context& context,
+                         ValidationResult* result) const;
+  void ExitTag(const Context& context, ValidationResult* result) const;
+
+ private:
+  const TagSpec* parent_spec_;
+  LineCol line_col_;
+};
+
+// A TagSpecDispatch stores mappings for all of the TagSpecs involved for a
+// single Tag. There are two non-overlapping sets of TagSpecs here. The first is
+// a mapping of DispatchKeys (see DispatchKey comment for more details) and the
+// second is a list of all remaining non-dispatchable tagspecs.
+class TagSpecDispatch {
+ public:
+  void RegisterDispatchKey(const std::string& dispatch_key,
+                           int32_t tag_spec_id) {
+    // Multiple TagSpecs may have the same dispatch key. These are added in the
+    // order in which they are found.
+    tagspecs_by_dispatch_[dispatch_key].push_back(tag_spec_id);
+  }
+  void RegisterTagSpec(int32_t tag_spec_id) {
+    all_tag_specs_.push_back(tag_spec_id);
+  }
+
+  bool empty() const { return !HasDispatchKeys() && !HasTagSpecs(); }
+
+  bool HasDispatchKeys() const { return !tagspecs_by_dispatch_.empty(); }
+
+  // Looks up a dispatch key as previously registered, returning the
+  // corresponding tag_spec_ids which are ordered by their specificity of match
+  // (e.g. Name/Value/Parent, then Name/Value, and then Name).
+  vector<int32_t> MatchingDispatchKey(const std::string& attr_name,
+                                      const std::string& attr_value,
+                                      const std::string& parent) const {
+    if (!HasDispatchKeys()) return {};
+
+    vector<int32_t> tag_spec_ids;
+    // Try first to find a key with the given parent.
+    const std::string dispatch_key = DispatchKey(
+        AttrSpec::NAME_VALUE_PARENT_DISPATCH, attr_name, attr_value, parent);
+    auto match = tagspecs_by_dispatch_.find(dispatch_key);
+    if (match != tagspecs_by_dispatch_.end())
+      tag_spec_ids.insert(tag_spec_ids.end(), match->second.begin(),
+                          match->second.end());
+
+    // Try next to find a key that allows any parent.
+    const std::string no_parent_key =
+        DispatchKey(AttrSpec::NAME_VALUE_DISPATCH, attr_name, attr_value, "");
+    auto no_parent_match = tagspecs_by_dispatch_.find(no_parent_key);
+    if (no_parent_match != tagspecs_by_dispatch_.end())
+      tag_spec_ids.insert(tag_spec_ids.end(), no_parent_match->second.begin(),
+                          no_parent_match->second.end());
+
+    // Try last to find a key that matches this attribute name.
+    const std::string no_value_key =
+        DispatchKey(AttrSpec::NAME_DISPATCH, attr_name, "", "");
+    auto no_value_match = tagspecs_by_dispatch_.find(no_value_key);
+    if (no_value_match != tagspecs_by_dispatch_.end())
+      tag_spec_ids.insert(tag_spec_ids.end(), no_value_match->second.begin(),
+                          no_value_match->second.end());
+
+    // Special case for foo=foo. We consider this a match for a dispatch key of
+    // foo="" or just <tag foo>.
+    DCHECK(!attr_name.empty());
+    if (attr_name == attr_value) {
+      auto more_tag_spec_ids = MatchingDispatchKey(attr_name, "", parent);
+      tag_spec_ids.insert(tag_spec_ids.end(), more_tag_spec_ids.begin(),
+                          more_tag_spec_ids.end());
+    }
+
+    return tag_spec_ids;
+  }
+
+  bool HasTagSpecs() const { return !all_tag_specs_.empty(); }
+  const vector<int>& AllTagSpecs() const { return all_tag_specs_; }
+
+ private:
+  unordered_map<std::string /*dispatch key*/,
+                vector<int32_t> /* tag_spec_ids */>
+      tagspecs_by_dispatch_;
+  vector<int32_t> all_tag_specs_;
+};
+
+// This wrapper class provides access to the validation rules.
+class ParsedValidatorRules {
+ public:
+  struct ErrorCodeMetaData {
+    int32_t specificity = 0;
+  };
+
+  ParsedValidatorRules(const HtmlFormat::Code html_format);
+
+  Status LoadRules(ValidatorRules* rules) const;
+
+  Status CheckIntertags() const;
+
+  void FilterRules(const ValidatorRules& all_rules,
+                   ValidatorRules* filtered_rules) const;
+
+  void ExpandModuleExtensionSpec(TagSpec* tagspec,
+                                 const string_view spec_name) const;
+  void ExpandNomoduleExtensionSpec(TagSpec* tagspec,
+                                   const string_view spec_name) const;
+  void ExpandExtensionSpec(ValidatorRules* rules) const;
+
+  // Returns true iff `tagspec` is usable for the HTML Format these rules are
+  // built for.
+  bool IsTagSpecCorrectHtmlFormat(const TagSpec& tagspec) const;
+
+  // Returns true iff `spec` is usable for the HTML Format these rules are built
+  // for.
+  bool IsDocSpecCorrectHtmlFormat(const DocSpec& spec) const;
+
+  // Returns true iff `spec` is usable for the HTML Format these rules are built
+  // for.
+  bool IsDocCssSpecCorrectHtmlFormat(const DocCssSpec& spec) const;
+
+  Status status() const;
+
+  const ParsedTagSpec* GetAuthorStylesheetTagSpec() const;
+
+  bool IsTypeIdentifier(const std::string& maybe_type_identifier) const {
+    return GetTypeIdentifier(maybe_type_identifier) != TypeIdentifier::kUnknown;
+  }
+
+  void ValidateTypeIdentifiers(const ParsedHtmlTag& html_tag,
+                               const vector<TypeIdentifier> format_identifiers,
+                               Context* context,
+                               ValidationResult* result) const;
+
+  void ValidateHtmlTag(const ParsedHtmlTag& html_tag, Context* context,
+                       ValidationResult* result) const;
+
+  void ValidateManufacturedBody(Context* context,
+                                ValidationResult* result) const;
+
+  int32_t Specificity(ValidationError::Code code) const;
+
+  int32_t MaxSpecificity(const RepeatedPtrField<ValidationError>& errors) const;
+
+  // Returns true iff resultA is a better result than resultB.
+  bool BetterValidationResultThan(const ValidationResult& resultA,
+                                  const ValidationResult& resultB) const;
+
+  bool HasValidatedAlternativeTagSpec(Context* context,
+                                      const std::string& ext_name) const;
+
+  void MaybeEmitMandatoryTagValidationErrors(Context* context,
+                                             ValidationResult* result) const;
+
+  void MaybeEmitRequiresOrExcludesValidationErrors(
+      Context* context, ValidationResult* result) const;
+
+  void MaybeEmitMandatoryAlternativesSatisfiedErrors(
+      Context* context, ValidationResult* result) const;
+
+  void MaybeEmitDocSizeErrors(Context* context, ValidationResult* result) const;
+
+  void MaybeEmitCssLengthErrors(Context* context,
+                                ValidationResult* result) const;
+
+  void MaybeEmitValueSetMismatchErrors(Context* context,
+                                       ValidationResult* result) const;
+
+  void MaybeEmitGlobalTagValidationErrors(Context* context,
+                                          ValidationResult* result) const;
+
+  const set<std::string>& IntertagsToValidate() const;
+
+  // A few pass through methods for accessing top-level proto rules fields.
+  const std::string& template_spec_url() const {
+    return rules_.template_spec_url();
+  }
+  const std::string& styles_spec_url() const {
+    return rules_.styles_spec_url();
+  }
+  const vector<ParsedDocSpec>& doc() const { return parsed_doc_; }
+  const RepeatedPtrField<DescendantTagList>& descendant_tag_list() const {
+    return rules_.descendant_tag_list();
+  }
+  const vector<ParsedDocCssSpec>& css() const { return parsed_css_; }
+
+  const ParsedTagSpec* GetTagSpec(int id) const { return &tagspec_by_id_[id]; }
+
+  const TagSpecDispatch& DispatchForTagName(const std::string& tagname) const {
+    auto iter = tagspecs_by_tagname_.find(tagname);
+    if (iter == tagspecs_by_tagname_.end()) {
+      return empty_dispatch_;
+    }
+
+    return iter->second;
+  }
+
+  const ValidatorRules& rules() const { return rules_; }
+
+  const ParsedAttrSpecs& parsed_attr_specs() const {
+    return *parsed_attr_specs_;
+  }
+
+  const HtmlFormat::Code html_format() const { return html_format_; }
+
+ private:
+  Status status_;
+  ValidatorRules rules_;
+  HtmlFormat::Code html_format_;
+  vector<ParsedTagSpec> tagspec_by_id_;
+  absl::node_hash_map<std::string, TagSpecDispatch> tagspecs_by_tagname_;
+  absl::node_hash_map<std::string, vector<int32_t>>
+      ext_tag_spec_ids_by_ext_name_;
+  TagSpecDispatch empty_dispatch_;
+  vector<int32_t> mandatory_tagspecs_;
+  vector<ErrorCodeMetaData> error_codes_;
+  unique_ptr<ParsedAttrSpecs> parsed_attr_specs_;
+  vector<ParsedDocSpec> parsed_doc_;
+  vector<ParsedDocCssSpec> parsed_css_;
+  std::set<std::string> tags_with_cdata_;
+  ParsedValidatorRules(const ParsedValidatorRules&) = delete;
+  ParsedValidatorRules& operator=(const ParsedValidatorRules&) = delete;
+};  // class ParsedValidatorRules
+
+// Return type tuple for ValidateTag.
+struct ValidateTagResult {
+  ValidationResult validation_result;
+  const ParsedTagSpec* best_match_tag_spec = nullptr;
+  bool dev_mode_suppress = false;
+  // If the tagspec determined that there were CSS bytes in the given tag's
+  // style attributes, these values get added to per-document limits for
+  // determining if the overall CSS limits have been exceeded.
+  int inline_style_css_bytes = 0;
+
+  bool IsPassing() const {
+    return validation_result.status() == ValidationResult::PASS;
+  }
+};
+
+// A tag may initialize this ReferencePointMatcher with its reference points.
+// Then, the matcher will be invoked for each child tag via ::Match,
+// and eventually it will be invoked upon exiting the parent tag.
+class ReferencePointMatcher {
+ public:
+  explicit ReferencePointMatcher(
+      const ParsedValidatorRules* parsed_rules,
+      const ParsedReferencePoints* parsed_reference_points,
+      const LineCol& line_col)
+      // These checks are only used in initialization.
+      : parsed_rules_(CHECK_NOTNULL(parsed_rules)),
+        parsed_reference_points_(CHECK_NOTNULL(parsed_reference_points)),
+        line_col_(line_col) {
+    CHECK(!parsed_reference_points->empty());
+  }
+
+  // This method gets invoked when matching a child tag of the parent
+  // that is specifying / requiring the reference points.  So
+  // effectively, this method will try through the specified reference
+  // points to see if any match.
+  ValidateTagResult ValidateTag(const ParsedHtmlTag& encountered_tag,
+                                const Context& context) const;
+
+  // This method is invoked with the reference point which matched a tag just
+  // processed. It updates reference_points_matched_ to track which children
+  // have matched this reference point.
+  void RecordMatch(const ParsedTagSpec& reference_point);
+
+  // This method gets invoked when we're done with processing all the
+  // child tags, so now we can determine whether any reference points
+  // remain unsatisfied or duplicate.
+  void ExitParentTag(const Context& context, ValidationResult* result) const;
+
+ private:
+  const ParsedValidatorRules* parsed_rules_;
+  const ParsedReferencePoints* parsed_reference_points_;
+  LineCol line_col_;
+  vector<int32_t> reference_points_matched_;
+};
+
+class CdataMatcher;
+
+// Instances of this class specify which tag names (|tag|)
+// are allowed for descendant tags of a particular tag (|tag_name|).
+class DescendantConstraints {
+ public:
+  DescendantConstraints(const std::string& tag_name,
+                        const vector<std::string>& allowed_tags)
+      : tag_name_(AsciiStrToUpper(tag_name)),
+        allowed_tags_(allowed_tags.begin(), allowed_tags.end()) {}
+
+  const std::string& tag_name() const { return tag_name_; }
+
+  const vector<std::string>& allowed_tags() const { return allowed_tags_; }
+
+ private:
+  const std::string tag_name_;
+  const vector<std::string> allowed_tags_;
+  DescendantConstraints(const DescendantConstraints&) = delete;
+  DescendantConstraints& operator=(const DescendantConstraints&) = delete;
+};
+
+// This abstraction keeps track of the tag names and ChildTagMatchers
+// as we enter / exit tags in the document. Closing tags is tricky:
+// - In addition, we assume that all end tags are optional and we close,
+//   that is, pop off tags our stack, lazily as we encounter parent closing
+//   tags. This part differs slightly from the behavior per spec: instead of
+//   closing an <option> tag when a following <option> tag is seen, we close
+//   it when the parent closing tag (in practice <select>) is encountered.
+class TagStack {
+ private:
+  struct StackEntry {
+    std::string tag_name;  // Always uppercase, per EnterTag().
+    // tag_spec and reference_point are the ParsedTagSpecs that best matched
+    // the stack entry. May be null. May not fully match.
+    const ParsedTagSpec* tag_spec = nullptr;
+    const ParsedTagSpec* reference_point = nullptr;
+
+    bool has_descendant_constraint_lists;
+    int32_t num_children;
+    std::string only_child_tag_name;
+    LineCol only_child_line_col;
+    std::string last_child_tag_name;
+    std::string last_child_url;
+    LineCol last_child_line_col;
+    unique_ptr<CdataMatcher> cdata_matcher;
+    unique_ptr<ChildTagMatcher> child_tag_matcher;
+    unique_ptr<ReferencePointMatcher> reference_point_matcher;
+    bool dev_mode = false;
+
+    explicit StackEntry(const std::string& name)
+        : tag_name(name),
+          has_descendant_constraint_lists(false),
+          num_children(0),
+          only_child_line_col(LineCol(-1, -1)),
+          last_child_line_col(LineCol(-1, -1)) {}
+  };
+
+ public:
+  TagStack() {
+    // We always have one element on the stack. This simplifies certain checks,
+    // for example, allowing us to guarantee we can always return a value for
+    // parentStackEntry().
+    stack_.emplace_back(StackEntry("$ROOT"));
+  }
+
+  // Enter a tag, opening a scope for child tags.
+  void EnterTag(const ParsedHtmlTag& tag,
+                const ValidateTagResult& reference_point_result,
+                const ValidateTagResult& tag_result) {
+    StackEntry stack_entry(tag.UpperName());
+    stack_entry.reference_point = reference_point_result.best_match_tag_spec;
+    stack_entry.tag_spec = tag_result.best_match_tag_spec;
+    stack_.emplace_back(std::move(stack_entry));
+  }
+
+  // Upon exiting a tag, validation for the current matcher is triggered,
+  // e.g. for checking that the tag had some specified number of children.
+  void ExitTag(const std::string& upper_tag_name, const Context& context,
+               ValidationResult* result) {
+    // We look for |tag_name| from the end. If we can find it, we pop
+    // everything from thereon off the stack.
+    for (int idx = stack_.size() - 1; idx >= 0; idx--) {
+      if (stack_[idx].tag_name == upper_tag_name) {
+        while (stack_.size() > idx) PopFromStack(context, result);
+        return;
+      }
+    }
+  }
+
+  // This method is called when we're done with the
+  // document. Normally, the parser should actually close the tags,
+  // but just in case it doesn't this easy-enough method will take care of it.
+  void ExitRemainingTags(const Context& context, ValidationResult* result) {
+    while (!stack_.empty()) PopFromStack(context, result);
+  }
+
+  // Update tagstack state after validating an encountered tag. Called with the
+  // best matching specs, even if not a match.
+  void UpdateFromTagResults(const ParsedHtmlTag& encountered_tag,
+                            const ValidateTagResult& reference_point_result,
+                            const ValidateTagResult& tag_result,
+                            const ParsedValidatorRules& rules,
+                            const LineCol& line_col) {
+    // Keep track of the number of direct children this tag has, even as we
+    // pop in and out of them on the stack.
+    MutableParentStackEntry()->num_children++;
+
+    // Record in the parent element that a reference point has been satisfied,
+    // even if the reference point didn't match completely.
+    if (reference_point_result.best_match_tag_spec) {
+      const ParsedTagSpec* parsed_ref_point =
+          reference_point_result.best_match_tag_spec;
+      CHECK_NOTNULL(MutableParentReferencePointMatcher())
+          ->RecordMatch(*parsed_ref_point);
+    }
+
+    // The following only add new constraints, not new allowances, so
+    // only add the constraints if the validation passed.
+    if (tag_result.IsPassing()) {
+      const ParsedTagSpec* parsed_tag_spec = tag_result.best_match_tag_spec;
+      const TagSpec& tag_spec = parsed_tag_spec->spec();
+      // Record that this tag must not have any siblings.
+      if (tag_spec.siblings_disallowed()) {
+        TellParentNoSiblingsAllowed(tag_spec.tag_name(), line_col);
+      }
+
+      // Record that this tag must be the last child of its parent.
+      if (tag_spec.mandatory_last_child()) {
+        TellParentImTheLastChild(TagSpecName(tag_spec), TagSpecUrl(tag_spec),
+                                 line_col);
+      }
+    }
+
+    // Add the tag to the stack, and then update the stack entry.
+    EnterTag(encountered_tag, reference_point_result, tag_result);
+
+    UpdateStackEntryFromTagResult(reference_point_result, rules, line_col);
+    UpdateStackEntryFromTagResult(tag_result, rules, line_col);
+  }
+
+  // Methods to set various matchers for the tag currently on the stack.
+  void SetChildTagMatcher(unique_ptr<ChildTagMatcher> matcher) {
+    if (matcher) stack_.back().child_tag_matcher = std::move(matcher);
+  }
+  void SetCdataMatcher(unique_ptr<CdataMatcher> matcher) {
+    if (matcher) stack_.back().cdata_matcher = std::move(matcher);
+  }
+  void SetReferencePointMatcher(unique_ptr<ReferencePointMatcher> matcher) {
+    if (matcher) stack_.back().reference_point_matcher = std::move(matcher);
+  }
+  void SetDevMode() { stack_.back().dev_mode = true; }
+
+  const CdataMatcher* const cdata_matcher() const {
+    return stack_.back().cdata_matcher.get();
+  }
+
+  ReferencePointMatcher* MutableParentReferencePointMatcher() {
+    return MutableParentStackEntry()->reference_point_matcher.get();
+  }
+
+  // This method is called as we're visiting a tag; so the matcher we
+  // need here is the one provided/specified for the tag parent.
+  void MatchChildTagName(const ParsedHtmlTag& encountered_tag,
+                         const Context& context,
+                         ValidationResult* result) const {
+    if (ParentStackEntry().child_tag_matcher)
+      ParentStackEntry().child_tag_matcher->MatchChildTagName(encountered_tag,
+                                                              context, result);
+  }
+
+  // For tags without parent tags, the return value is "$ROOT".
+  const std::string& ParentTagName() const {
+    return ParentStackEntry().tag_name;
+  }
+
+  // Returns the spec_name if one exists, otherwise the tag_name.
+  const std::string& ParentTagSpecName() const {
+    if (ParentStackEntry().tag_spec &&
+        ParentStackEntry().tag_spec->spec().has_spec_name())
+      return ParentStackEntry().tag_spec->spec().spec_name();
+    return ParentStackEntry().tag_name;
+  }
+
+  // Returns true if the current tag has ancestor with the given tag name or
+  // spec_name.
+  bool HasAncestor(const std::string& ancestor) const {
+    // Skip the first element, which is "$ROOT".
+    for (int i = 1; i < stack_.size(); ++i) {
+      if (stack_[i].tag_name == ancestor) return true;
+      if (stack_[i].tag_spec && stack_[i].tag_spec->spec().has_spec_name() &&
+          stack_[i].tag_spec->spec().spec_name() == ancestor)
+        return true;
+    }
+    return false;
+  }
+
+  bool HasAncestorMarker(const AncestorMarker::Marker query) const {
+    CHECK_NE(AncestorMarker::UNKNOWN, query);
+    // Skip the first element, which is "$ROOT".
+    for (int i = 1; i < stack_.size(); ++i) {
+      if (!stack_[i].tag_spec) continue;
+      const TagSpec& spec = stack_[i].tag_spec->spec();
+      if (!spec.has_mark_descendants()) continue;
+      for (int j = 0; j < spec.mark_descendants().marker_size(); ++j) {
+        if (spec.mark_descendants().marker(j) == query) return true;
+      }
+    }
+    return false;
+  }
+
+  void SetDescendantConstraintList(const ParsedTagSpec& parsed_tag_spec,
+                                   const ParsedValidatorRules& rules) {
+    if (!parsed_tag_spec.spec().has_descendant_tag_list()) return;
+
+    vector<std::string> allowed_descendants_for_this_tag;
+    for (const DescendantTagList& descendant_tag_list :
+         rules.descendant_tag_list()) {
+      // Get the list matching this tag's descendant list name.
+      if (parsed_tag_spec.spec().descendant_tag_list() ==
+          descendant_tag_list.name()) {
+        allowed_descendants_for_this_tag.insert(
+            allowed_descendants_for_this_tag.end(),
+            descendant_tag_list.tag().begin(), descendant_tag_list.tag().end());
+      }
+    }
+
+    allowed_descendants_list_.emplace_back(make_unique<DescendantConstraints>(
+        TagSpecName(parsed_tag_spec.spec()), allowed_descendants_for_this_tag));
+    stack_.back().has_descendant_constraint_lists = true;
+  }
+
+  const vector<unique_ptr<DescendantConstraints>>& allowed_descendants_list()
+      const {
+    return allowed_descendants_list_;
+  }
+
+  int32_t ParentChildCount() const { return ParentStackEntry().num_children; }
+
+  bool IsDevMode() const {
+    // We always recursively set dev mode to true on stack elements as we march
+    // down the stack, so we need only check the leaf node on the tree.
+    // Skip the first element, which is "$ROOT".
+    return ParentStackEntry().dev_mode;
+  }
+
+  void TellParentNoSiblingsAllowed(const std::string& tag_name,
+                                   const LineCol& line_col) {
+    MutableParentStackEntry()->only_child_tag_name = tag_name;
+    MutableParentStackEntry()->only_child_line_col = line_col;
+  }
+
+  LineCol ParentOnlyChildErrorLineCol() const {
+    return ParentStackEntry().only_child_line_col;
+  }
+
+  std::string ParentOnlyChildTagName() const {
+    return ParentStackEntry().only_child_tag_name;
+  }
+
+  bool ParentHasChildWithNoSiblingRule() const {
+    return ParentOnlyChildTagName().length() > 0;
+  }
+
+  void TellParentImTheLastChild(const std::string& tag_name,
+                                const std::string& url,
+                                const LineCol& line_col) {
+    MutableParentStackEntry()->last_child_tag_name = tag_name;
+    MutableParentStackEntry()->last_child_line_col = line_col;
+    MutableParentStackEntry()->last_child_url = url;
+  }
+
+  LineCol ParentLastChildErrorLineCol() const {
+    return ParentStackEntry().last_child_line_col;
+  }
+
+  std::string ParentLastChildTagName() const {
+    return ParentStackEntry().last_child_tag_name;
+  }
+
+  std::string ParentLastChildUrl() const {
+    return ParentStackEntry().last_child_url;
+  }
+
+  bool ParentHasChildWithLastChildRule() const {
+    return ParentLastChildTagName().length() > 0;
+  }
+
+  bool CountDocCssBytes() const {
+    return (ParentStackEntry().tag_spec &&
+            ParentStackEntry().tag_spec->spec().has_cdata() &&
+            ParentStackEntry().tag_spec->spec().cdata().doc_css_bytes());
+  }
+
+ private:
+  const StackEntry& ParentStackEntry() const {
+    // There should always be a root entry whose parent shouldn't be accessed,
+    // until the document is exited.
+    CHECK_GE(stack_.size(), 1);
+    return stack_.back();
+  }
+
+  StackEntry* MutableParentStackEntry() {
+    // There should always be a root entry whose parent shouldn't be accessed,
+    // until the document is exited.
+    CHECK_GE(stack_.size(), 1);
+    return &stack_.back();
+  }
+
+  void UnsetDescendantConstraintList() {
+    if (stack_.back().has_descendant_constraint_lists) {
+      allowed_descendants_list_.pop_back();
+    }
+  }
+
+  // Pops the current tag off the stack, calling ExitTag() on any child
+  // tag matchers found at that element.
+  void PopFromStack(const Context& context, ValidationResult* result) {
+    UnsetDescendantConstraintList();
+
+    StackEntry* to_pop = &stack_.back();
+    if (to_pop->child_tag_matcher)
+      to_pop->child_tag_matcher->ExitTag(context, result);
+
+    if (to_pop->reference_point_matcher)
+      to_pop->reference_point_matcher->ExitParentTag(context, result);
+
+    stack_.pop_back();
+  }
+
+  // Given a ValidateTagResult, update the tag stack entry at the top of the
+  // tag stack to add any constraints from the spec.
+  void UpdateStackEntryFromTagResult(const ValidateTagResult& result,
+                                     const ParsedValidatorRules& rules,
+                                     const LineCol& line_col) {
+    if (result.dev_mode_suppress) SetDevMode();
+    if (!result.best_match_tag_spec) return;
+    const ParsedTagSpec& parsed_tag_spec = *result.best_match_tag_spec;
+
+    SetReferencePointMatcher(
+        parsed_tag_spec.reference_point_matcher(rules, line_col));
+
+    // The following only add new constraints, not new allowances, so
+    // only add the constraints if the validation passed.
+    if (result.IsPassing()) {
+      SetChildTagMatcher(parsed_tag_spec.child_tag_matcher(line_col));
+      SetCdataMatcher(parsed_tag_spec.cdata_matcher(line_col));
+      SetDescendantConstraintList(parsed_tag_spec, rules);
+    }
+  }
+
+  vector<StackEntry> stack_;
+
+  vector<unique_ptr<DescendantConstraints>> allowed_descendants_list_;
+};
+
+// CdataMatcher maintains a constraint to check which an opening tag
+// introduces: a tag's cdata matches constraints set by it's cdata
+// spec. Unfortunately we need to defer such checking and can't
+// handle it while the opening tag is being processed.
+class CdataMatcher {
+ public:
+  // Constructs a CdataMatcher for the |parsed_cdata_spec| which will be
+  // satisfied only if it sees a matching cdata std::string.
+  explicit CdataMatcher(const ParsedCdataSpec* parsed_cdata_spec,
+                        const LineCol& line_col);
+
+  // Matches |cdata| against what this CdataMatcher expects.
+  void Match(string_view cdata, Context* context,
+             ValidationResult* result) const;
+
+ private:
+  // Matches the provided cdata against a CSS specification. Helper
+  // routine for match (see above). |url_bytes| contains the number of bytes
+  // in the CSS string which were measured as URLs. In some validation types,
+  // these bytes are not counted against byte limits.
+  void MatchCss(string_view cdata, const CssSpec& css_spec, int* url_bytes,
+                Context* context, ValidationResult* result) const;
+
+  // Matches the provided stylesheet against a MediaQuery specification.
+  // Helper routine for MatchCss.
+  void MatchMediaQuery(
+      const htmlparser::css::Stylesheet& stylesheet, const MediaQuerySpec& spec,
+      vector<unique_ptr<htmlparser::css::ErrorToken>>* error_buffer) const;
+
+  // Matches the provided stylesheet against a SelectorSpec.
+  // Helper routine for MatchCss.
+  void MatchSelectors(
+      const htmlparser::css::Stylesheet& stylesheet, const SelectorSpec& spec,
+      vector<unique_ptr<htmlparser::css::ErrorToken>>* error_buffer) const;
+  const ParsedCdataSpec* parsed_cdata_spec_;
+  LineCol line_col_;
+  CdataMatcher(const CdataMatcher&) = delete;
+  CdataMatcher& operator=(const CdataMatcher&) = delete;
+};
+
+// The extensions context keeps track of the extensions that the validator has
+// seen, as well as which have been used, which are required to be used, etc.
+class ExtensionsContext {
+ public:
+  ExtensionsContext() {
+    // AMP-AD is exempted to not require the respective extension javascript
+    // file for historical reasons. We still need to mark that the extension is
+    // used if we see the tags.
+    extensions_loaded_.insert("amp-ad");
+  }
+
+  // Returns false if the named extension has not yet been loaded. Note that
+  // this assumes that all extensions will be loaded in the document earlier
+  // than their first usage. This is true for <amp-foo> tags, since the
+  // extension must be loaded in the head and <amp-foo> tags are not supported
+  // in the head as per HTML spec.
+  bool IsExtensionLoaded(const std::string& extension) const {
+    return extensions_loaded_.find(extension) != extensions_loaded_.end();
+  }
+
+  // Record a possible error to report regarding required extensions once
+  // we have collected all extensions in the document.
+  void RecordFutureErrorsIfMissing(const ParsedTagSpec& parsed_tag_spec,
+                                   const LineCol& line_col) {
+    const TagSpec& tag_spec = parsed_tag_spec.spec();
+    for (const std::string& required_extension :
+         tag_spec.requires_extension()) {
+      if (!IsExtensionLoaded(required_extension)) {
+        ExtensionMissingError err;
+        err.missing_extension = required_extension;
+        err.maybe_error = PopulateError(
+            ValidationError::ERROR, ValidationError::MISSING_REQUIRED_EXTENSION,
+            line_col, {TagDescriptiveName(tag_spec), required_extension},
+            TagSpecUrl(tag_spec));
+        extension_missing_errors_.emplace_back(err);
+      }
+    }
+  }
+
+  // Returns a vector of errors accrued while processing the
+  // <head> for tags requiring an extension which was not found.
+  // Destructive: calling a second time will return an empty vector.
+  vector<ValidationError> MissingExtensionErrors() {
+    vector<ValidationError> out;
+    for (ExtensionMissingError& err : extension_missing_errors_) {
+      if (!IsExtensionLoaded(err.missing_extension))
+        out.emplace_back(std::move(err.maybe_error));
+    }
+    extension_missing_errors_.clear();
+    return out;
+  }
+
+  void RecordUsedExtensions(const RepeatedPtrField<std::string>& extensions) {
+    c_copy(extensions, std::inserter(extensions_used_, extensions_used_.end()));
+  }
+
+  vector<std::string> UnusedExtensionsRequired() const {
+    vector<std::string> unused;
+    absl::c_set_difference(extensions_unused_required_, extensions_used_,
+                           std::back_inserter(unused));
+    return unused;
+  }
+
+  // Update ExtensionContext state when we encounter an amp extension or tag
+  // using an extension.
+  void UpdateFromTagResult(const ValidateTagResult& result) {
+    if (!result.best_match_tag_spec) return;
+    const ParsedTagSpec& parsed_tag_spec = *result.best_match_tag_spec;
+    const TagSpec& tag_spec = parsed_tag_spec.spec();
+
+    // Keep track of which extensions are loaded.
+    if (tag_spec.has_extension_spec()) {
+      const ExtensionSpec& extension_spec = tag_spec.extension_spec();
+      // Record that we have encountered an extension 'load' tag. This will
+      // look like <script custom-element=amp-foo ...> or similar.
+      extensions_loaded_.insert(extension_spec.name());
+      switch (extension_spec.requires_usage()) {
+        case ExtensionSpec::ERROR:
+          // Record that a loaded extension indicates a new requirement:
+          // namely that some tag must make use of this extension.
+          extensions_unused_required_.insert(extension_spec.name());
+          break;
+        case ExtensionSpec::EXEMPTED:
+        case ExtensionSpec::NONE:
+          // This extension does not have usage demonstrated by a tag, for
+          // example: amp-dynamic-css-classes.
+          break;
+      }
+    }
+
+    // Record presence of a tag, such as <amp-foo> which requires the usage
+    // of an amp extension.
+    RecordUsedExtensions(tag_spec.requires_extension());
+  }
+
+ private:
+  // |extensions_loaded_| tracks the valid <script> tags loading
+  // amp extensions which were seen in the document's head. Most extensions
+  // are also added to |extensions_unused_required_| when encountered in the
+  // head. When a tag is seen later in the document which makes use of an
+  // extension, that extension is recorded in |extensions_used_|.
+  set<std::string> extensions_loaded_;
+  set<std::string> extensions_unused_required_;
+  set<std::string> extensions_used_;
+
+  // Pairs of (extension name, ValidatorError) collected while parsing the
+  // document head. Once the body is reached, for each pair whose extension
+  // hasn't been loaded, we output the matching error.
+  struct ExtensionMissingError {
+    std::string missing_extension;
+    ValidationError maybe_error;
+  };
+  vector<ExtensionMissingError> extension_missing_errors_;
+};  // ExtensionsContext
+
+struct ValueSetProvision {
+ public:
+  explicit ValueSetProvision(const amp::validator::ValueSetProvision& proto)
+      : set(proto.set()), value(proto.value()) {}
+
+  friend bool operator==(const ValueSetProvision& lhs,
+                         const ValueSetProvision& rhs) {
+    return lhs.set == rhs.set && lhs.value == rhs.value;
+  }
+
+  template <typename H>
+  friend H AbslHashValue(H h, const ValueSetProvision& v) {
+    return H::combine(std::move(h), v.set, v.value);
+  }
+
+  AttrSpec::ValueSet set;
+  std::string value;
+};
+
+// The context keeps track of the line / column that the validator is
+// in, as well as the mandatory and unique tag specs that have already
+// been validated. So, this constitutes the mutable state for the
+// validator except for the validation result itself.
+//
+// For initial construction, |document_token_start| can be nullptr;
+// when a document is being parsed, this should point at the beginning
+// of it.
+class Context {
+ public:
+  explicit Context(const ParsedValidatorRules* rules, int max_errors)
+      : rules_(rules),
+        max_errors_(max_errors),
+        line_col_(1, 0),
+        encountered_body_line_col_(1, 0) {}
+
+  void StartDocument(const char* document_token_start) {
+    current_token_start_ = document_token_start;
+  }
+
+  struct ResultProgress {
+    bool complete;
+    bool wants_more_errors;
+  };
+
+  ResultProgress Progress(const ValidationResult& result) const {
+    // If max_errors is set to -1, it means that we want to keep going no
+    // matter what, because there may be more errors. The validator constructor
+    // doesn't allow values less than -1 but we do here just to be safer.
+    if (max_errors_ <= -1)
+      return {/*complete=*/false, /*wants_more_errors=*/true};
+    // For max_errors set to 0, if a status is FAIL that means we're done.
+    if (max_errors_ == 0)
+      return {/*complete=*/result.status() == ValidationResult::FAIL,
+              /*wants_more_errors=*/false};
+    // For max_errors > 0, we want to keep adding errors if we're below
+    // max_errors. But note that some of them (or all of them!) may be warnings,
+    // so whether or not we're complete is still dependent on whether the
+    // status is FAIL.
+    bool wants_more_errors = result.errors_size() < max_errors_ && !exit_early_;
+    return {/*complete=*/(result.status() == ValidationResult::FAIL &&
+                          !wants_more_errors),
+            /*wants_more_errors=*/wants_more_errors};
+  }
+
+  // Instructs the validator to consider itself done. Note that if max_errors
+  // is set to -1 (all errors), this setting is ignored as the validator will
+  // always return incomplete in that case.
+  void SetExitEarly() { exit_early_ = true; }
+
+  // For each tag that the htmlparser processes, we compute the line/column
+  // information by counting the newline characters. Prior to calling the
+  // function, |current_token_start_| actually points at the start of the
+  // previous token, so effectively the body of AdvanceTo restores the invariant
+  // of |current_token_start_| pointing at the current token.
+  void AdvanceTo(const char* token_start) {
+    if (!current_token_start_) {
+      DLOG(FATAL) << "Must call StartDocument first";
+      return;
+    }
+    const char* pos = current_token_start_;
+    while (pos < token_start) {
+      if (*pos == '\n') {  // \n (Unix newline)
+        line_col_ = LineCol(line_col_.line() + 1, 0);
+        pos++;
+        continue;
+      }
+      if (*pos == '\r') {  // // \r (MacOS9 newline) and \r\n (Windows)
+        if (((pos + 1) < token_start) && (*(pos + 1) == '\n')) pos++;
+        line_col_ = LineCol(line_col_.line() + 1, 0);
+        pos++;
+        continue;
+      }
+      // Any character that's not some form of newline.
+      pos += htmlparser::Strings::CodePointByteSequenceCount(*pos);
+      if (*pos != '\0')  // Don't advance past the end of the document.
+        line_col_.set_col(line_col_.col() + 1);
+    }
+    current_token_start_ = pos;
+  }
+
+  void SetLineCol(int line_no, int col_no) {
+    line_col_ = LineCol(line_no, col_no);
+  }
+
+  void AddError(ValidationError error, ValidationResult* result) const {
+    ResultProgress progress = Progress(*result);
+    if (progress.complete) {
+      if (result->status() != ValidationResult::FAIL) {
+        result->set_status(ValidationResult::FAIL);
+        DLOG(FATAL) << "Document Progress complete early but not status FAIL";
+      }
+      return;
+    }
+    // If any of the errors amount to more than a WARNING, validation fails.
+    if (error.severity() != ValidationError::WARNING) {
+      result->set_status(ValidationResult::FAIL);
+    }
+    if (progress.wants_more_errors) result->add_errors()->Swap(&error);
+  }
+
+  void AddWarning(ValidationError::Code code, LineCol line_col,
+                  const vector<std::string>& params,
+                  const std::string& spec_url, ValidationResult* result) const {
+    AddError(PopulateError(ValidationError::WARNING, code, line_col, params,
+                           spec_url),
+             result);
+  }
+
+  void AddError(ValidationError::Code code, LineCol line_col,
+                const vector<std::string>& params, const std::string& spec_url,
+                ValidationResult* result) const {
+    AddError(
+        PopulateError(ValidationError::ERROR, code, line_col, params, spec_url),
+        result);
+  }
+
+  // Given the tag_result from validating a single tag, update the overall
+  // result as well as the Context state to affect later validation.
+  void UpdateFromTagResults(const ParsedHtmlTag& encountered_tag,
+                            const ValidateTagResult& reference_point_result,
+                            const ValidateTagResult& tag_result) {
+    tag_stack_.UpdateFromTagResults(encountered_tag, reference_point_result,
+                                    tag_result, rules(), line_col());
+
+    RecordAttrRequiresExtension(encountered_tag, reference_point_result);
+    RecordAttrRequiresExtension(encountered_tag, tag_result);
+    UpdateFromTagResult(reference_point_result);
+    UpdateFromTagResult(tag_result);
+    RecordScriptReleaseVersionFromTagResult(encountered_tag);
+    AddInlineStyleByteSize(tag_result.inline_style_css_bytes);
+  }
+
+  const set<std::string>& ConditionsSatisfied() const {
+    return conditions_satisfied_;
+  }
+
+  // Returns true iff the current context has observed a tag which contains
+  // an URL. This is set by calling MarkUrlSeen above.
+  bool HasSeenUrl() const { return first_url_seen_tag_ != nullptr; }
+
+  // The TagSpecName of the first seen URL. Do not call unless HasSeenUrl
+  // returns true.
+  std::string FirstSeenUrlTagName() const {
+    return TagSpecName(*first_url_seen_tag_);
+  }
+
+  const set<int32_t>& TagspecsValidated() const { return tagspecs_validated_; }
+
+  const set<std::string>& MandatoryAlternativesSatisfied() const {
+    return mandatory_alternatives_satisfied_;
+  }
+
+  const ParsedValidatorRules& rules() const { return *rules_; }
+
+  const TagStack& tag_stack() const { return tag_stack_; }
+
+  TagStack* mutable_tag_stack() { return &tag_stack_; }
+
+  ExtensionsContext* mutable_extensions() { return &extensions_; }
+  const ExtensionsContext& extensions() const { return extensions_; }
+
+  LineCol line_col() const { return line_col_; }
+
+  void RecordBodyTag(const ParsedHtmlTag& body_tag) {
+    encountered_body_line_col_ = line_col();
+    encountered_body_tag_ = body_tag.ToString();
+  }
+
+  LineCol encountered_body_line_col() const {
+    return encountered_body_line_col_;
+  }
+
+  const std::string& encountered_body_tag() const {
+    return encountered_body_tag_;
+  }
+
+  // Merges |to_merge| into |merged|, keeping at most options().max_errors()
+  // errors or all errors if options().max_errors() is -1.
+  void MergeRespectingMaxErrors(const ValidationResult& to_merge,
+                                ValidationResult* merged) const {
+    // Copy status only if fail. Failing is a terminal state
+    if (to_merge.status() == ValidationResult::FAIL)
+      merged->set_status(ValidationResult::FAIL);
+    for (int i = 0; i < to_merge.errors_size(); ++i)
+      AddError(to_merge.errors(i), merged);
+  }
+
+  void SetDocByteSize(int32_t byte_size) { doc_byte_size_ = byte_size; }
+
+  const int32_t& doc_byte_size() const { return doc_byte_size_; }
+
+  // These methods keep track of how much of the document is used towards
+  // CSS style elements, via <style amp-custom> and inline styles (style
+  // attribute on any tag).
+  void AddStyleTagByteSize(int32_t byte_size) {
+    style_tag_byte_size_ += byte_size;
+  }
+
+  void AddInlineStyleByteSize(int32_t byte_size) {
+    inline_style_byte_size_ += byte_size;
+  }
+
+  const int32_t& style_tag_byte_size() const { return style_tag_byte_size_; }
+
+  const int32_t& inline_style_byte_size() const {
+    return inline_style_byte_size_;
+  }
+
+  void RecordTypeIdentifier(TypeIdentifier type_identifier) {
+    type_identifiers_.push_back(type_identifier);
+  }
+
+  const vector<TypeIdentifier>& type_identifiers() const {
+    return type_identifiers_;
+  }
+  // Returns true iff |spec| should be used for the type identifiers recorded
+  // in this context, as seen in the document so far. If called before type
+  // identifiers have been recorded, will always return false.
+  bool IsDocSpecValidForTypeIdentifiers(const ParsedDocSpec& spec) const {
+    return ::amp::validator::IsUsedForTypeIdentifiers(
+        type_identifiers(), spec.enabled_by(), spec.disabled_by());
+  }
+
+  // Returns the first (there should at most one) DocSpec which matches both
+  // the html format and type identifiers recorded so far in this context. If
+  // called before identifiers have been recorded, it may return an incorrect
+  // selection. Returns nullopt if no match.
+  std::optional<const ParsedDocSpec*> MatchingDocSpec() const {
+    // The specs are usually already filtered by HTML format, so this loop
+    // should be very short, often 1.
+    std::optional<const ParsedDocSpec*> out = std::nullopt;
+    for (const ParsedDocSpec& spec : rules().doc()) {
+      if (rules().IsDocSpecCorrectHtmlFormat(spec.spec()) &&
+          IsDocSpecValidForTypeIdentifiers(spec)) {
+        DCHECK(!out.has_value())
+            << "Panic: Two DocSpec's match the same document.";
+        return &spec;
+      }
+    }
+    // Some simple tests load a tiny rules file to test one feature of the code.
+    // These tests won't have any DocSpec rules defined. This is OK. The DLOG
+    // is to verify that a particular format hasn't been ignored in the real
+    // rule set.
+    if (!rules().doc().empty()) {
+      DLOG(FATAL) << "Panic: No ParsedDocSpec for this document setting "
+                  << rules().html_format();
+    }
+    return std::nullopt;
+  }
+
+  // Returns true iff |spec| should be used for the type identifiers recorded
+  // in this context, as seen in the document so far. If called before type
+  // identifiers have been recorded, will always return false.
+  bool IsDocCssSpecValidForTypeIdentifiers(const ParsedDocCssSpec& spec) const {
+    return ::amp::validator::IsUsedForTypeIdentifiers(
+        type_identifiers(), spec.enabled_by(), spec.disabled_by());
+  }
+
+  // Returns the first (there should at most one) DocCssSpec which matches both
+  // the html format and type identifiers recorded so far in this context. If
+  // called before identifiers have been recorded, it may return an incorrect
+  // selection. Returns nullopt if no match.
+  std::optional<const ParsedDocCssSpec*> MatchingDocCssSpec() const {
+    // The specs are usually already filtered by HTML format, so this loop
+    // should be very short, often 1.
+    std::optional<const ParsedDocCssSpec*> out = std::nullopt;
+    for (const ParsedDocCssSpec& spec : rules().css()) {
+      if (rules().IsDocCssSpecCorrectHtmlFormat(spec.spec()) &&
+          IsDocCssSpecValidForTypeIdentifiers(spec)) {
+        DCHECK(!out.has_value())
+            << "Panic: Two DocCssSpec's match the same document.";
+        return &spec;
+      }
+    }
+    // Some simple tests load a tiny rules file to test one feature of the code.
+    // These tests won't have any DocCssSpec rules defined. This is OK. The DLOG
+    // is to verify that a particular format hasn't been ignored in the real
+    // rule set.
+    if (!rules().css().empty()) {
+      DLOG(FATAL) << "Panic: No ParsedCssSpec for this document setting "
+                  << rules().html_format();
+    }
+    return std::nullopt;
+  }
+
+  const bool is_transformed() const {
+    return c_find(type_identifiers_, TypeIdentifier::kTransformed) !=
+           type_identifiers_.end();
+  }
+
+  const bool is_dev_mode() const {
+    return c_find(type_identifiers_, TypeIdentifier::kDevMode) !=
+           type_identifiers_.end();
+  }
+
+  const flat_hash_set<ValueSetProvision>& value_sets_provided() const {
+    return value_sets_provided_;
+  }
+
+  const flat_hash_map<ValueSetProvision, std::vector<ValidationError>>&
+  value_sets_required() const {
+    return value_sets_required_;
+  }
+
+  ScriptReleaseVersion script_release_version() const {
+    return script_release_version_;
+  }
+
+ private:
+  // Given a tag result, update the Context state to affect
+  // later validation. Does not handle updating the tag stack.
+  void UpdateFromTagResult(const ValidateTagResult& result) {
+    if (!result.best_match_tag_spec) return;
+    const ParsedTagSpec& parsed_tag_spec = *result.best_match_tag_spec;
+
+    extensions_.UpdateFromTagResult(result);
+    // If this requires an extension and we are still in the document head,
+    // record that we may still need to emit a missing extension error at
+    // the end of the document head. We do this even for a tag failing
+    // validation since extensions are based on the tag name, and we're still
+    // pretty confident the user forgot to include the extension.
+    if (tag_stack_.HasAncestor("HEAD"))
+      extensions_.RecordFutureErrorsIfMissing(parsed_tag_spec, line_col());
+    // We also want to satisfy conditions, to reduce errors seen elsewhere in
+    // the doc.
+    SatisfyConditionsFromTagSpec(parsed_tag_spec);
+    SatisfyMandatoryAlternativesFromTagSpec(parsed_tag_spec);
+    RecordValidatedFromTagSpec(result.IsPassing(), parsed_tag_spec);
+
+    const auto& validation_result = result.validation_result;
+    for (const auto& provision : validation_result.value_set_provisions())
+      value_sets_provided_.insert(ValueSetProvision(provision));
+    for (const auto& requirement : validation_result.value_set_requirements()) {
+      if (!requirement.has_provision()) continue;
+      value_sets_required_[ValueSetProvision(requirement.provision())]
+          .push_back(requirement.error_if_unsatisfied());
+    }
+
+    if (result.IsPassing()) {
+      // If the tag spec didn't match, we don't know that the tag actually
+      // contained a URL, so no need to complain about it.
+      MarkUrlSeenFromMatchingTagSpec(parsed_tag_spec);
+    }
+  }
+
+  void RecordScriptReleaseVersionFromTagResult(
+      const ParsedHtmlTag& parsed_tag) {
+    if (script_release_version() == ScriptReleaseVersion::UNKNOWN &&
+        (parsed_tag.IsExtensionScript() || parsed_tag.IsAmpRuntimeScript())) {
+      script_release_version_ = parsed_tag.GetScriptReleaseVersion();
+    }
+  }
+
+  // Record when an encountered tag's attribute that requires an extension
+  // that it also satisfies that the required extension is used.
+  void RecordAttrRequiresExtension(const ParsedHtmlTag& encountered_tag,
+                                   const ValidateTagResult& tag_result) {
+    if (!tag_result.best_match_tag_spec) return;
+    const ParsedTagSpec* parsed_tag_spec = tag_result.best_match_tag_spec;
+    if (!parsed_tag_spec->AttrsCanSatisfyExtension()) return;
+    const unordered_map<std::string, int32_t>& attr_ids_by_name =
+        parsed_tag_spec->attr_ids_by_name();
+    ExtensionsContext* extensions_ctx = mutable_extensions();
+    for (const ParsedHtmlTagAttr& attr : encountered_tag.Attributes()) {
+      auto jt = attr_ids_by_name.find(attr.name());
+      if (jt != attr_ids_by_name.end()) {
+        const ParsedAttrSpec& parsed_attr_spec =
+            rules_->parsed_attr_specs().GetById(jt->second);
+        if (!parsed_attr_spec.spec().requires_extension().empty())
+          extensions_ctx->RecordUsedExtensions(
+              parsed_attr_spec.spec().requires_extension());
+      }
+    }
+  }
+
+  // Record document-level conditions which have been satisfied by the tag spec.
+  void SatisfyConditionsFromTagSpec(const ParsedTagSpec& parsed_tag_spec) {
+    c_copy(parsed_tag_spec.spec().satisfies(),
+           std::inserter(conditions_satisfied_, conditions_satisfied_.end()));
+  }
+
+  // Records that a Tag was seen which contains an URL. Used to note issues
+  // with <base href> occurring in the document after an URL.
+  void MarkUrlSeenFromMatchingTagSpec(const ParsedTagSpec& parsed_tag_spec) {
+    if (parsed_tag_spec.ContainsUrl() && !HasSeenUrl())
+      first_url_seen_tag_ = &parsed_tag_spec.spec();
+  }
+
+  // Record that this document contains a tag matching a particular tag spec.
+  void RecordValidatedFromTagSpec(bool is_passing,
+                                  const ParsedTagSpec& parsed_tag_spec) {
+    if (parsed_tag_spec.ShouldRecordTagspecValidated() == ALWAYS)
+      tagspecs_validated_.insert(parsed_tag_spec.id());
+    else if (is_passing &&
+             parsed_tag_spec.ShouldRecordTagspecValidated() == IF_PASSING)
+      tagspecs_validated_.insert(parsed_tag_spec.id());
+  }
+
+  // Record that this document contains a tag which is a member of
+  // a list of mandatory alternatives.
+  void SatisfyMandatoryAlternativesFromTagSpec(
+      const ParsedTagSpec& parsed_tag_spec) {
+    if (parsed_tag_spec.spec().has_mandatory_alternatives())
+      mandatory_alternatives_satisfied_.insert(
+          parsed_tag_spec.spec().mandatory_alternatives());
+  }
+
+  const ParsedValidatorRules* rules_;
+  int max_errors_ = -1;
+  const char* current_token_start_;
+  LineCol line_col_;
+
+  ExtensionsContext extensions_;
+  TagStack tag_stack_;
+
+  // The remaining variables hold state about the global document determined
+  // during validation.
+
+  // First tagspec seen (matched) which contains an URL.
+  const TagSpec* first_url_seen_tag_ = nullptr;
+  // Here we record when we encounter a body tag, because we will only
+  // see a single one per document - that's what Html5Lexer does. When we're
+  // done with the document we compare it with Lexer::GetBodyTag, which has
+  // a merged view of all the attributes of body tags within the doc.
+  LineCol encountered_body_line_col_;
+  std::string encountered_body_tag_;
+  set<std::string> mandatory_alternatives_satisfied_;
+  set<std::string> conditions_satisfied_;
+  set<int32_t> tagspecs_validated_;
+  int32_t doc_byte_size_ = 0;
+  int32_t style_tag_byte_size_ = 0;
+  int32_t inline_style_byte_size_ = 0;
+  bool exit_early_ = false;
+  vector<TypeIdentifier> type_identifiers_;
+  flat_hash_set<ValueSetProvision> value_sets_provided_;
+  flat_hash_map<ValueSetProvision, std::vector<ValidationError>>
+      value_sets_required_;
+  // Flag for if an LTS script is present.
+  ScriptReleaseVersion script_release_version_ = ScriptReleaseVersion::UNKNOWN;
+};
+
+//
+// Implementation of ChildTagMatcher
+//
+
+void ChildTagMatcher::MatchChildTagName(const ParsedHtmlTag& encountered_tag,
+                                        const Context& context,
+                                        ValidationResult* result) const {
+  const ChildTagSpec& child_tags = parent_spec_->child_tags();
+  // Enforce child_tag_name_oneof: If at least one tag name is specified, then
+  // the child tags of the parent tag must have one of the provided tag names.
+  if (child_tags.child_tag_name_oneof_size() > 0) {
+    const RepeatedPtrField<std::string>& names =
+        child_tags.child_tag_name_oneof();
+    if (!c_linear_search(names, encountered_tag.UpperName())) {
+      std::string allowed_names = StrCat("['", StrJoin(names, "', '"), "']");
+      context.AddError(
+          ValidationError::DISALLOWED_CHILD_TAG_NAME, context.line_col(),
+          /*params=*/
+          {encountered_tag.LowerName(), TagDescriptiveName(*parent_spec_),
+           AsciiStrToLower(allowed_names)},
+          TagSpecUrl(*parent_spec_), result);
+    }
+  }
+  // Enforce first_child_tag_name_oneof: If at least one tag name is specified,
+  // then the first child of the parent tag must have one of the provided names.
+  if (child_tags.first_child_tag_name_oneof_size() > 0 &&
+      context.tag_stack().ParentChildCount() == 0) {
+    const RepeatedPtrField<std::string>& names =
+        child_tags.first_child_tag_name_oneof();
+    if (!c_linear_search(names, encountered_tag.UpperName())) {
+      std::string allowed_names = StrCat("['", StrJoin(names, "', '"), "']");
+      context.AddError(
+          ValidationError::DISALLOWED_FIRST_CHILD_TAG_NAME, context.line_col(),
+          /*params=*/
+          {encountered_tag.LowerName(), TagDescriptiveName(*parent_spec_),
+           AsciiStrToLower(allowed_names)},
+          TagSpecUrl(*parent_spec_), result);
+    }
+  }
+}
+
+void ChildTagMatcher::ExitTag(const Context& context,
+                              ValidationResult* result) const {
+  int expected_num_child_tags =
+      parent_spec_->child_tags().mandatory_num_child_tags();
+  if (expected_num_child_tags != -1 &&
+      expected_num_child_tags != context.tag_stack().ParentChildCount()) {
+    context.AddError(
+        ValidationError::INCORRECT_NUM_CHILD_TAGS, line_col_,
+        /*params=*/
+        {TagDescriptiveName(*parent_spec_), StrCat(expected_num_child_tags),
+         StrCat(context.tag_stack().ParentChildCount())},
+        TagSpecUrl(*parent_spec_), result);
+  }
+
+  int expected_min_num_child_tags =
+      parent_spec_->child_tags().mandatory_min_num_child_tags();
+
+  if (expected_min_num_child_tags != -1 &&
+      context.tag_stack().ParentChildCount() < expected_min_num_child_tags) {
+    context.AddError(
+        ValidationError::INCORRECT_MIN_NUM_CHILD_TAGS, line_col_,
+        /*params=*/
+        {TagDescriptiveName(*parent_spec_), StrCat(expected_min_num_child_tags),
+         StrCat(context.tag_stack().ParentChildCount())},
+        TagSpecUrl(*parent_spec_), result);
+  }
+}
+
+class UrlErrorInAttrAdapter {
+ public:
+  explicit UrlErrorInAttrAdapter(const std::string* attr_name)
+      : attr_name_(attr_name) {}
+
+  void MissingUrl(const Context& context, const TagSpec& tag_spec,
+                  ValidationResult* result) const {
+    context.AddError(ValidationError::MISSING_URL, context.line_col(),
+                     /*params=*/{*attr_name_, TagDescriptiveName(tag_spec)},
+                     TagSpecUrl(tag_spec), result);
+  }
+
+  void InvalidUrl(const Context& context, const std::string& url,
+                  const TagSpec& tag_spec, ValidationResult* result) const {
+    context.AddError(
+        ValidationError::INVALID_URL, context.line_col(),
+        /*params=*/{*attr_name_, TagDescriptiveName(tag_spec), url},
+        TagSpecUrl(tag_spec), result);
+  }
+
+  void InvalidUrlProtocol(const Context& context, const std::string& url,
+                          const std::string& protocol, const TagSpec& tag_spec,
+                          ValidationResult* result) const {
+    context.AddError(
+        ValidationError::INVALID_URL_PROTOCOL, context.line_col(),
+        /*params=*/{*attr_name_, TagDescriptiveName(tag_spec), protocol},
+        TagSpecUrl(tag_spec), result);
+  }
+
+  void DisallowedRelativeUrl(const Context& context, const std::string& url,
+                             const TagSpec& tag_spec,
+                             ValidationResult* result) const {
+    context.AddError(
+        ValidationError::DISALLOWED_RELATIVE_URL, context.line_col(),
+        /*params=*/{*attr_name_, TagDescriptiveName(tag_spec), url},
+        TagSpecUrl(tag_spec), result);
+  }
+
+ private:
+  const std::string* attr_name_;
+};
+
+class UrlErrorInStylesheetAdapter {
+ public:
+  explicit UrlErrorInStylesheetAdapter(LineCol line_col)
+      : line_col_(line_col) {}
+
+  void MissingUrl(const Context& context, const TagSpec& tag_spec,
+                  ValidationResult* result) const {
+    context.AddError(ValidationError::CSS_SYNTAX_MISSING_URL, line_col_,
+                     /*params=*/{TagDescriptiveName(tag_spec)},
+                     TagSpecUrl(tag_spec), result);
+  }
+
+  void InvalidUrl(const Context& context, const std::string& url,
+                  const TagSpec& tag_spec, ValidationResult* result) const {
+    context.AddError(ValidationError::CSS_SYNTAX_INVALID_URL, line_col_,
+                     /*params=*/{TagDescriptiveName(tag_spec), url},
+                     TagSpecUrl(tag_spec), result);
+  }
+
+  void InvalidUrlProtocol(const Context& context, const std::string& url,
+                          const std::string& protocol, const TagSpec& tag_spec,
+                          ValidationResult* result) const {
+    context.AddError(ValidationError::CSS_SYNTAX_INVALID_URL_PROTOCOL,
+                     line_col_,
+                     /*params=*/{TagDescriptiveName(tag_spec), protocol},
+                     TagSpecUrl(tag_spec), result);
+  }
+
+  void DisallowedRelativeUrl(const Context& context, const std::string& url,
+                             const TagSpec& tag_spec,
+                             ValidationResult* result) const {
+    context.AddError(ValidationError::CSS_SYNTAX_DISALLOWED_RELATIVE_URL,
+                     line_col_,
+                     /*params=*/{TagDescriptiveName(tag_spec), url},
+                     TagSpecUrl(tag_spec), result);
+  }
+
+ private:
+  LineCol line_col_;
+};
+
+// Returns the protocol of the input URL. Assumes https if relative. Accepts
+// both the original URL string and a parsed URL produced from it, to avoid
+// reparsing.
+std::string UrlProtocol(const std::string& url, const URL& parsed_url) {
+  // This RE is based on closure/uri/utils.js, goog.uri.utils.splitRe_.
+  // It appears to be more aggressive in extracting a protocol than url.h.
+  // Older versions of IE ignore whitespace in URL protocols, so we
+  // should as well when extracting it - missing a 'javascript:' or
+  // similar things would open up those users with very old browsers
+  // to XSS and other nastiness.
+  // TODO: This has some false positives. Instead, we should rewrite all URLs
+  // in the reserializer, which would make relative URLs into absolute URLs
+  // and avoid the risk here. At that time, we could remove this.
+  static LazyRE2 protocol_re = {"([^:/?#.]+):.*"};
+
+  std::string protocol;
+  // First, try the regex based protocol extraction and match lower-casing
+  // and leading whitespace to what Javascript does. Only if this doesn't
+  // work, fall back to the url.h variant (which will default the protocol
+  // to https based on the base_url above).
+  if (RE2::FullMatch(url, *protocol_re, &protocol)) {
+    AsciiStrToLower(&protocol);
+    absl::StripLeadingAsciiWhitespace(&protocol);
+  } else {
+    protocol = parsed_url.protocol();  // already lowercased by URL from url.h.
+  }
+
+  return protocol;
+}
+
+template <typename ErrorAdapter>
+void ValidateUrlAndProtocol(const ParsedUrlSpec& parsed_url_spec,
+                            const ErrorAdapter& adapter, const Context& context,
+                            const std::string& url, const TagSpec& tag_spec,
+                            ValidationResult* result) {
+  const UrlSpec* spec = parsed_url_spec.spec();
+  // includes non-breaking space
+  static LazyRE2 only_whitespace_re = {"[\\s\xc2\xa0]*"};
+
+  if (RE2::FullMatch(url, *only_whitespace_re) && !spec->allow_empty()) {
+    adapter.MissingUrl(context, tag_spec, result);
+    return;
+  }
+
+  htmlparser::URL parsed_url(url);
+
+  if (!parsed_url.is_valid()) {
+    adapter.InvalidUrl(context, url, tag_spec, result);
+    return;
+  }
+  std::string protocol = UrlProtocol(url, parsed_url);
+  if (!protocol.empty() && !parsed_url_spec.IsAllowedProtocol(protocol)) {
+    adapter.InvalidUrlProtocol(context, url, protocol, tag_spec, result);
+    return;
+  }
+  // Check the URL to see if it does not have a valid protocol and
+  // therefore is a relative URL given the previous checks above.
+  if (!spec->allow_relative() && !parsed_url.has_protocol()) {
+    adapter.DisallowedRelativeUrl(context, url, tag_spec, result);
+    return;
+  }
+}
+
+bool IsDataUrl(const std::string& url) {
+  URL parsed_url(url);
+  if (!parsed_url.is_valid()) return false;
+
+  return UrlProtocol(url, parsed_url) == "data";
+}
+
+CdataMatcher::CdataMatcher(const ParsedCdataSpec* parsed_cdata_spec,
+                           const LineCol& line_col)
+    : parsed_cdata_spec_(parsed_cdata_spec), line_col_(line_col) {}
+
+class InvalidRuleVisitor : public htmlparser::css::RuleVisitor {
+ public:
+  InvalidRuleVisitor(const ParsedCdataSpec* cdata_spec, Context* context,
+                     ValidationResult* result)
+      : cdata_spec_(cdata_spec), context_(context), result_(result) {}
+
+  void VisitAtRule(const htmlparser::css::AtRule& at_rule) override {
+    if (!cdata_spec_->IsAtRuleValid(at_rule.name())) {
+      context_->AddError(
+          ValidationError::CSS_SYNTAX_INVALID_AT_RULE,
+          LineCol(at_rule.line(), at_rule.col()),
+          /*params=*/
+          {TagDescriptiveName(cdata_spec_->ParentTagSpec()), at_rule.name()},
+          /*spec_url=*/"", result_);
+    }
+  }
+
+  void VisitDeclaration(
+      const htmlparser::css::Declaration& declaration) override {
+    if (!cdata_spec_->IsDeclarationValid(declaration.name())) {
+      std::string allowed_declarations_str =
+          cdata_spec_->AllowedDeclarationsString();
+      if (allowed_declarations_str.empty()) {
+        context_->AddError(ValidationError::CSS_SYNTAX_INVALID_PROPERTY_NOLIST,
+                           LineCol(declaration.line(), declaration.col()),
+                           /*params=*/
+                           {TagDescriptiveName(cdata_spec_->ParentTagSpec()),
+                            declaration.name()},
+                           /*spec_url=*/"", result_);
+
+      } else {
+        context_->AddError(
+            ValidationError::CSS_SYNTAX_INVALID_PROPERTY,
+            LineCol(declaration.line(), declaration.col()),
+            /*params=*/
+            {TagDescriptiveName(cdata_spec_->ParentTagSpec()),
+             declaration.name(), cdata_spec_->AllowedDeclarationsString()},
+            /*spec_url=*/"", result_);
+      }
+    }
+  }
+
+ private:
+  const ParsedCdataSpec* cdata_spec_;
+  Context* context_;
+  ValidationResult* result_;
+};
+
+class InvalidDeclVisitor : public htmlparser::css::RuleVisitor {
+ public:
+  InvalidDeclVisitor(const ParsedDocCssSpec& css_spec, Context* context,
+                     const std::string& tag_decriptive_name,
+                     ValidationResult* result)
+      : css_spec_(css_spec),
+        context_(context),
+        tag_descriptive_name_(tag_decriptive_name),
+        result_(result) {}
+
+  void VisitDeclaration(
+      const htmlparser::css::Declaration& declaration) override {
+    const CssDeclaration* css_declaration =
+        css_spec_.CssDeclarationByName(declaration.name());
+    if (!css_declaration) {
+      context_->AddError(ValidationError::CSS_SYNTAX_INVALID_PROPERTY_NOLIST,
+                         LineCol(declaration.line(), declaration.col()),
+                         /*params=*/
+                         {tag_descriptive_name_, declaration.name()},
+                         css_spec_.spec().spec_url(), result_);
+      // Don't emit additional errors for this declaration.
+      return;
+    }
+    if (css_declaration->value_casei_size() > 0) {
+      bool has_valid_value = false;
+      const std::string first_ident = declaration.FirstIdent();
+      for (auto& value : css_declaration->value_casei()) {
+        if (EqualsIgnoreCase(first_ident, value)) {
+          has_valid_value = true;
+          break;
+        }
+      }
+      if (!has_valid_value) {
+        // Declaration value not allowed.
+        context_->AddError(
+            ValidationError::CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
+            LineCol(declaration.line(), declaration.col()),
+            /*params=*/
+            {tag_descriptive_name_, declaration.name(), first_ident},
+            css_spec_.spec().spec_url(), result_);
+      }
+    } else if (css_declaration->has_value_regex_casei()) {
+      RE2::Options options;
+      options.set_case_sensitive(false);
+      RE2 pattern(css_declaration->value_regex_casei(), options);
+      const std::string first_ident = declaration.FirstIdent();
+      if (!RE2::FullMatch(first_ident, pattern)) {
+        context_->AddError(
+            ValidationError::CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
+            LineCol(declaration.line(), declaration.col()),
+            /*params=*/
+            {tag_descriptive_name_, declaration.name(), first_ident},
+            css_spec_.spec().spec_url(), result_);
+      }
+    }
+  }
+
+ private:
+  const ParsedDocCssSpec& css_spec_;
+  Context* context_;
+  const std::string tag_descriptive_name_;
+  ValidationResult* result_;
+};
+
+void CdataMatcher::Match(string_view cdata, Context* context,
+                         ValidationResult* result) const {
+  if (!parsed_cdata_spec_) return;
+  if (context->Progress(*result).complete) return;
+
+  const CdataSpec& cdata_spec = parsed_cdata_spec_->Spec();
+
+  int url_bytes = 0;
+
+  // The mandatory_cdata, cdata_regex, and css_spec fields are treated
+  // like a oneof, but we're not using oneof because it's a feature
+  // that was added after protobuf 2.5.0 (which our open-source
+  // version uses).
+  // begin oneof {
+
+  // Mandatory CDATA exact match
+  if (cdata_spec.has_mandatory_cdata()) {
+    if (cdata_spec.mandatory_cdata() != cdata) {
+      context->AddError(
+          ValidationError::MANDATORY_CDATA_MISSING_OR_INCORRECT,
+          context->line_col(),
+          /*params=*/{TagDescriptiveName(parsed_cdata_spec_->ParentTagSpec())},
+          TagSpecUrl(parsed_cdata_spec_->ParentTagSpec()), result);
+    }
+    // We return early if the cdata has an exact match rule. The
+    // spec shouldn't have an exact match rule that doesn't validate.
+    return;
+  } else if (cdata_spec.has_cdata_regex()) {
+    if (!RE2::FullMatch(cdata, parsed_cdata_spec_->CdataRegex())) {
+      context->AddError(
+          ValidationError::MANDATORY_CDATA_MISSING_OR_INCORRECT,
+          context->line_col(),
+          /*params=*/{TagDescriptiveName(parsed_cdata_spec_->ParentTagSpec())},
+          TagSpecUrl(parsed_cdata_spec_->ParentTagSpec()), result);
+      return;
+    }
+  } else if (cdata_spec.has_css_spec()) {
+    MatchCss(cdata, cdata_spec.css_spec(), &url_bytes, context, result);
+  } else if (cdata_spec.whitespace_only()) {
+    static LazyRE2 ws_only = {"^\\s*$"};
+    if (!RE2::FullMatch(cdata, *ws_only)) {
+      context->AddError(
+          ValidationError::NON_WHITESPACE_CDATA_ENCOUNTERED,
+          context->line_col(),
+          /*params=*/
+          {TagDescriptiveName(parsed_cdata_spec_->ParentTagSpec())},
+          TagSpecUrl(parsed_cdata_spec_->ParentTagSpec()), result);
+    }
+  }
+  // } end oneof
+
+  std::optional<const ParsedDocCssSpec*> maybe_doc_css_spec =
+      context->MatchingDocCssSpec();
+  int adjusted_cdata_length = cdata.length();
+  if (maybe_doc_css_spec && !(**maybe_doc_css_spec).spec().url_bytes_included())
+    adjusted_cdata_length -= url_bytes;
+
+  // Max CDATA Byte Length, specific to this CDATA (not the document limit).
+  if (cdata_spec.has_max_bytes() &&
+      adjusted_cdata_length > cdata_spec.max_bytes()) {
+    if (parsed_cdata_spec_->ParentTagSpec().tag_name() == "SCRIPT") {
+      context->AddError(
+          ValidationError::INLINE_SCRIPT_TOO_LONG, context->line_col(),
+          /*params=*/
+          {StrCat(cdata.length()), StrCat(cdata_spec.max_bytes())},
+          cdata_spec.max_bytes_spec_url(), result);
+    } else {
+      context->AddError(
+          ValidationError::STYLESHEET_TOO_LONG, context->line_col(),
+          /*params=*/
+          {TagDescriptiveName(parsed_cdata_spec_->ParentTagSpec()),
+           StrCat(cdata.length()), StrCat(cdata_spec.max_bytes())},
+          cdata_spec.max_bytes_spec_url(), result);
+    }
+    return;
+  }
+
+  // Record <style amp-custom> byte size
+  if (context->tag_stack().CountDocCssBytes()) {
+    // This is safe from multiple TagSpecs executing on the same Tag, because
+    // CDATA matching only happens once the TagSpec matches otherwise. It's not
+    // of the TagSpec selection algorithm.
+    context->AddStyleTagByteSize(adjusted_cdata_length);
+  }
+
+  if (context->Progress(*result).complete) return;
+  // Evaluate the denylisted CDATA Regular Expressions
+  for (const auto& entry : parsed_cdata_spec_->DenylistsWithErrorMsgs()) {
+    if (context->Progress(*result).complete) return;
+    if (RE2::PartialMatch(cdata, *entry.first))
+      context->AddError(
+          ValidationError::CDATA_VIOLATES_DENYLIST, context->line_col(),
+          /*params=*/
+          {TagDescriptiveName(parsed_cdata_spec_->ParentTagSpec()),
+           entry.second},
+          TagSpecUrl(parsed_cdata_spec_->ParentTagSpec()), result);
+  }
+}
+
+namespace {
+unique_ptr<htmlparser::css::ErrorToken> CreateParseErrorTokenAt(
+    const htmlparser::css::Token& position_token, ValidationError::Code code,
+    const std::vector<std::string>& params) {
+  auto token = make_unique<htmlparser::css::ErrorToken>(code, params);
+  position_token.CopyStartPositionTo(token.get());
+  return token;
+}
+
+}  // namespace
+
+// Matches the provided stylesheet against a CSS media query specification.
+void CdataMatcher::MatchMediaQuery(
+    const htmlparser::css::Stylesheet& stylesheet, const MediaQuerySpec& spec,
+    vector<unique_ptr<htmlparser::css::ErrorToken>>* error_buffer) const {
+  vector<std::unique_ptr<htmlparser::css::Token>> seen_media_types;
+  vector<std::unique_ptr<htmlparser::css::Token>> seen_media_features;
+  htmlparser::css::ParseMediaQueries(
+      /*stylesheet*/ stylesheet,
+      /*media_types*/ &seen_media_types,
+      /*media_features*/ &seen_media_features,
+      /*errors*/ error_buffer);
+
+  for (const auto& token : seen_media_types) {
+    // Make a copy first otherwise the later string_view gets clobbered.
+    std::string seen_media_type = AsciiStrToLower(token->StringValue());
+    auto stripped_media_type =
+        htmlparser::css::StripVendorPrefix(seen_media_type);
+    if (!c_linear_search(spec.type(), stripped_media_type)) {
+      error_buffer->emplace_back(CreateParseErrorTokenAt(
+          *token, ValidationError::CSS_SYNTAX_DISALLOWED_MEDIA_TYPE,
+          /*params=*/{"", token->StringValue()}));
+    }
+  }
+  for (const auto& token : seen_media_features) {
+    // Make a copy first otherwise the later string_view gets clobbered.
+    std::string seen_media_feature = AsciiStrToLower(token->StringValue());
+    auto stripped_media_feature = htmlparser::css::StripMinMaxPrefix(
+        htmlparser::css::StripVendorPrefix(seen_media_feature).data());
+    if (!c_linear_search(spec.feature(), stripped_media_feature)) {
+      error_buffer->emplace_back(CreateParseErrorTokenAt(
+          *token, ValidationError::CSS_SYNTAX_DISALLOWED_MEDIA_FEATURE,
+          /*params=*/{"", token->StringValue()}));
+    }
+  }
+}
+
+class SelectorSpecVisitor : public htmlparser::css::SelectorVisitor {
+ public:
+  SelectorSpecVisitor(
+      const SelectorSpec& selector_spec,
+      vector<unique_ptr<htmlparser::css::ErrorToken>>* error_buffer)
+      : SelectorVisitor(error_buffer),
+        selector_spec_(selector_spec),
+        error_buffer_(error_buffer) {}
+
+  void VisitAttrSelector(
+      const htmlparser::css::AttrSelector& selector) override {
+    for (const std::string& allowed_name : selector_spec_.attribute_name()) {
+      if (allowed_name == "*" || allowed_name == selector.attr_name()) return;
+    }
+    error_buffer_->emplace_back(CreateParseErrorTokenAt(
+        selector, ValidationError::CSS_SYNTAX_DISALLOWED_ATTR_SELECTOR,
+        /*params=*/{"", selector.attr_name()}));
+  }
+
+  void VisitPseudoSelector(
+      const htmlparser::css::PseudoSelector& selector) override {
+    if (selector.is_pseudo_class()) {
+      for (const std::string& allowed_pseudo_class :
+           selector_spec_.pseudo_class()) {
+        if (allowed_pseudo_class == "*" ||
+            allowed_pseudo_class == selector.name())
+          return;
+      }
+      error_buffer_->emplace_back(CreateParseErrorTokenAt(
+          selector, ValidationError::CSS_SYNTAX_DISALLOWED_PSEUDO_CLASS,
+          /*params=*/{"", selector.name()}));
+    }
+    if (selector.is_pseudo_element()) {
+      for (const std::string& allowed_pseudo_element :
+           selector_spec_.pseudo_element()) {
+        if (allowed_pseudo_element == "*" ||
+            allowed_pseudo_element == selector.name())
+          return;
+      }
+      error_buffer_->emplace_back(CreateParseErrorTokenAt(
+          selector, ValidationError::CSS_SYNTAX_DISALLOWED_PSEUDO_ELEMENT,
+          /*params=*/{"", selector.name()}));
+    }
+  }
+
+ private:
+  const SelectorSpec& selector_spec_;
+  vector<unique_ptr<htmlparser::css::ErrorToken>>* error_buffer_;
+};
+
+void CdataMatcher::MatchSelectors(
+    const htmlparser::css::Stylesheet& stylesheet, const SelectorSpec& spec,
+    vector<unique_ptr<htmlparser::css::ErrorToken>>* error_buffer) const {
+  SelectorSpecVisitor visitor(spec, error_buffer);
+  stylesheet.Accept(&visitor);
+}
+
+void CdataMatcher::MatchCss(string_view cdata, const CssSpec& css_spec,
+                            int* url_bytes, Context* context,
+                            ValidationResult* result) const {
+  vector<unique_ptr<htmlparser::css::ErrorToken>> css_errors;
+  vector<unique_ptr<htmlparser::css::ErrorToken>> css_warnings;
+  vector<char32_t> codepoints =
+      htmlparser::Strings::Utf8ToCodepoints(cdata.data());
+  vector<unique_ptr<htmlparser::css::Token>> tokens = htmlparser::css::Tokenize(
+      &codepoints, line_col_.line(), line_col_.col(), &css_errors);
+  unique_ptr<htmlparser::css::Stylesheet> stylesheet =
+      htmlparser::css::ParseAStylesheet(
+          &tokens, parsed_cdata_spec_->css_parsing_config(), &css_errors);
+
+  std::optional<const ParsedDocCssSpec*> maybe_doc_css_spec =
+      context->MatchingDocCssSpec();
+
+  // We extract the urls from the stylesheet. As a side-effect, this can
+  // generate errors for url(...) functions with invalid parameters.
+  vector<unique_ptr<htmlparser::css::ParsedCssUrl>> parsed_urls;
+  htmlparser::css::ExtractUrls(*stylesheet, &parsed_urls, &css_errors);
+
+  // Similarly, we extract query types and features from @media rules.
+  for (const AtRuleSpec& at_rule_spec : css_spec.at_rule_spec()) {
+    if (!at_rule_spec.has_media_query_spec()) continue;
+    DCHECK_EQ(at_rule_spec.name(), "media")
+        << "Only 'media' AT rules should have a MediaQuerySpec";
+    const MediaQuerySpec& media_query_spec = at_rule_spec.media_query_spec();
+    auto* error_buffer =
+        media_query_spec.issues_as_error() ? &css_errors : &css_warnings;
+    MatchMediaQuery(*stylesheet, at_rule_spec.media_query_spec(), error_buffer);
+    // There will be at most one @media at_rule_spec.
+    break;
+  }
+
+  if (css_spec.has_selector_spec()) {
+    const SelectorSpec& selector_spec = css_spec.selector_spec();
+    MatchSelectors(*stylesheet, selector_spec, &css_errors);
+  }
+
+  if (css_spec.validate_amp4ads()) {
+    htmlparser::css::ValidateAmp4AdsCss(*stylesheet, &css_errors);
+  }
+  if (css_spec.validate_keyframes()) {
+    amp::validator::parse_css::ValidateKeyframesCss(*stylesheet, &css_errors);
+  }
+
+  // Add errors then warnings:
+  for (const unique_ptr<htmlparser::css::ErrorToken>& error_token :
+       css_errors) {
+    // Override the first parameter with the name of this style tag.
+    vector<std::string> params = error_token->params();
+    params[0] = TagDescriptiveName(parsed_cdata_spec_->ParentTagSpec());
+    context->AddError(error_token->code(),
+                      LineCol(error_token->line(), error_token->col()), params,
+                      /*spec_url=*/"", result);
+  }
+  for (const unique_ptr<htmlparser::css::ErrorToken>& error_token :
+       css_warnings) {
+    // Override the first parameter with the name of this style tag.
+    vector<std::string> params = error_token->params();
+    params[0] = TagDescriptiveName(parsed_cdata_spec_->ParentTagSpec());
+    context->AddWarning(error_token->code(),
+                        LineCol(error_token->line(), error_token->col()),
+                        params, /*spec_url=*/"", result);
+  }
+
+  // If `!important` is not allowed, record instances as errors.
+  if (!css_spec.allow_important()) {
+    vector<const htmlparser::css::Declaration*> important;
+    htmlparser::css::ExtractImportantDeclarations(*stylesheet, &important);
+    for (const htmlparser::css::Declaration* decl : important) {
+      context->AddError(ValidationError::CSS_SYNTAX_DISALLOWED_IMPORTANT,
+                        LineCol(decl->important_line(), decl->important_col()),
+                        /*params=*/{}, context->rules().styles_spec_url(),
+                        result);
+    }
+  }
+
+  // Validate all url() functions found in the CSS against the document-level
+  // image and font url specs.
+  *url_bytes = 0;
+  for (const auto& url : parsed_urls) {
+    // Some CSS specs can choose to not count URLs against the byte limit, but
+    // data URLs are always counted (or in other words, they aren't considered
+    // URLs).
+    if (!IsDataUrl(url->utf8_url())) *url_bytes += url->utf8_url().length();
+    if (maybe_doc_css_spec) {
+      const ParsedDocCssSpec& doc_css_spec = **maybe_doc_css_spec;
+      ValidateUrlAndProtocol(
+          ((url->at_rule_scope() == "font-face")
+               ? doc_css_spec.font_url_spec()
+               : doc_css_spec.image_url_spec()),
+          UrlErrorInStylesheetAdapter(LineCol(url->line(), url->col())),
+          *context, url->utf8_url(), parsed_cdata_spec_->ParentTagSpec(),
+          result);
+    }
+  }
+  // Validate the allowed CSS AT rules (eg: `@media`).
+  InvalidRuleVisitor visitor(parsed_cdata_spec_, context, result);
+  stylesheet->Accept(&visitor);
+
+  // Validate the allowed CSS declarations (eg: `background-color`)
+  if (maybe_doc_css_spec &&
+      !(**maybe_doc_css_spec).spec().allow_all_declaration_in_style()) {
+    InvalidDeclVisitor visitor(
+        **maybe_doc_css_spec, context,
+        TagDescriptiveName(parsed_cdata_spec_->ParentTagSpec()), result);
+    stylesheet->Accept(&visitor);
+  }
+}
+
+void ValidateAttrValueUrl(const ParsedAttrSpec& parsed_attr_spec,
+                          const Context& context, const std::string& attr_name,
+                          const std::string& attr_value,
+                          const TagSpec& tag_spec, ValidationResult* result) {
+  vector<std::string> maybe_urls;
+  if (attr_name != "srcset") {
+    maybe_urls.push_back(attr_value);
+  } else {
+    if (attr_value.empty()) {
+      context.AddError(ValidationError::MISSING_URL, context.line_col(),
+                       /*params=*/{attr_name, TagDescriptiveName(tag_spec)},
+                       TagSpecUrl(tag_spec), result);
+      return;
+    }
+    const amp::validator::parse_srcset::SrcsetParsingResult parse_result =
+        amp::validator::parse_srcset::ParseSourceSet(attr_value);
+    if (!parse_result.success) {
+      // DUPLICATE_DIMENSION only needs two parameters, it does not report on
+      // the attribute value.
+      if (parse_result.error_code == ValidationError::DUPLICATE_DIMENSION)
+        context.AddError(parse_result.error_code, context.line_col(),
+                         /*params=*/{attr_name, TagDescriptiveName(tag_spec)},
+                         TagSpecUrl(tag_spec), result);
+      else
+        context.AddError(
+            parse_result.error_code, context.line_col(),
+            /*params=*/{attr_name, TagDescriptiveName(tag_spec), attr_value},
+            TagSpecUrl(tag_spec), result);
+      return;
+    }
+    for (const amp::validator::parse_srcset::ImageCandidate& image :
+         parse_result.srcset_images)
+      maybe_urls.push_back(image.url);
+  }
+  if (maybe_urls.empty()) {
+    context.AddError(ValidationError::MISSING_URL, context.line_col(),
+                     /*params=*/{attr_name, TagDescriptiveName(tag_spec)},
+                     TagSpecUrl(tag_spec), result);
+    return;
+  }
+  SortAndUniquify(&maybe_urls);
+  UrlErrorInAttrAdapter adapter(&attr_name);
+  for (const std::string& maybe_url : maybe_urls) {
+    ValidateUrlAndProtocol(parsed_attr_spec.value_url_spec(), adapter, context,
+                           maybe_url, tag_spec, result);
+    if (result->status() == ValidationResult::FAIL) return;
+  }
+}
+
+void ValidateAttrValueProperties(const ParsedAttrSpec& parsed_attr_spec,
+                                 const Context& context,
+                                 const std::string& attr_name,
+                                 const std::string& attr_value,
+                                 const TagSpec& tag_spec,
+                                 ValidationResult* result) {
+  vector<const PropertySpec*> mandatory_value_properties_seen;
+  const unordered_map<std::string, const PropertySpec*>&
+      value_property_by_name = parsed_attr_spec.value_property_by_name();
+  for (const auto& property :
+       amp::validator::parse_viewport::ParseContent(attr_value)) {
+    const std::string& name = property.first;
+    const std::string& value = property.second;
+    auto it = value_property_by_name.find(name);
+    if (it == value_property_by_name.end()) {
+      context.AddError(
+          ValidationError::DISALLOWED_PROPERTY_IN_ATTR_VALUE,
+          context.line_col(),
+          /*params=*/{name, attr_name, TagDescriptiveName(tag_spec)},
+          TagSpecUrl(tag_spec), result);
+      continue;
+    }
+    const PropertySpec* property_spec = it->second;
+    mandatory_value_properties_seen.push_back(property_spec);
+
+    // The value and value_double fields are treated like a oneof,
+    // but we're not using oneof because it's a feature that was added
+    // after protobuf 2.5.0 (which our open-source version uses).
+    // begin oneof {
+    if (property_spec->has_value()) {
+      if (property_spec->value() !=
+          AsciiStrToLower(absl::StripAsciiWhitespace(value))) {
+        context.AddError(
+            ValidationError::INVALID_PROPERTY_VALUE_IN_ATTR_VALUE,
+            context.line_col(),
+            /*params=*/{name, attr_name, TagDescriptiveName(tag_spec), value},
+            TagSpecUrl(tag_spec), result);
+      }
+    } else if (property_spec->has_value_double()) {
+      double d;
+      if (!absl::SimpleAtod(value, &d) || d != property_spec->value_double()) {
+        context.AddError(
+            ValidationError::INVALID_PROPERTY_VALUE_IN_ATTR_VALUE,
+            context.line_col(),
+            /*params=*/{name, attr_name, TagDescriptiveName(tag_spec), value},
+            TagSpecUrl(tag_spec), result);
+      }
+    }
+    // } end oneof
+  }
+  SortAndUniquify(&mandatory_value_properties_seen);
+  vector<const PropertySpec*> not_seen =
+      Diff(parsed_attr_spec.mandatory_value_properties(),
+           mandatory_value_properties_seen);
+
+  // To reduce churn emit errors sorted by names instead of memory addresses.
+  std::sort(not_seen.begin(), not_seen.end(),
+            [](const PropertySpec* lhs, const PropertySpec* rhs) {
+              return lhs->name() < rhs->name();
+            });
+
+  for (const PropertySpec* spec : not_seen) {
+    context.AddError(
+        ValidationError::MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE,
+        context.line_col(),
+        /*params=*/{spec->name(), attr_name, TagDescriptiveName(tag_spec)},
+        TagSpecUrl(tag_spec), result);
+  }
+}
+
+// This is the main validation procedure for attributes, operating with a
+// ParsedAttrSpec instance.
+void ValidateNonTemplateAttrValueAgainstSpec(
+    const ParsedAttrSpec& parsed_attr_spec, const Context& context,
+    const std::string& attr_name, const std::string& attr_value,
+    const TagSpec& tag_spec, ValidationResult* result) {
+  const AttrSpec& spec = parsed_attr_spec.spec();
+  if (spec.has_add_value_to_set()) {
+    auto* provision = result->add_value_set_provisions();
+    provision->set_set(spec.add_value_to_set());
+    provision->set_value(attr_value);
+  }
+  if (spec.has_value_oneof_set()) {
+    auto* requirement = result->add_value_set_requirements();
+    requirement->mutable_provision()->set_set(spec.value_oneof_set());
+    requirement->mutable_provision()->set_value(attr_value);
+    *requirement->mutable_error_if_unsatisfied() =
+        PopulateError(ValidationError::ERROR,
+                      ValidationError::VALUE_SET_MISMATCH, context.line_col(),
+                      /*params=*/{attr_name, TagDescriptiveName(tag_spec)},
+                      TagSpecUrl(tag_spec));
+  }
+  // The value, value_regex, and value_properties fields are treated
+  // like a oneof, but we're not using oneof because it's a feature
+  // that was added after protobuf 2.5.0 (which our open-source version uses).
+  // begin oneof {
+  if (spec.value_size() > 0) {
+    for (const std::string& v : spec.value()) {
+      if (attr_value == v) return;
+      // Allow spec's with value: "" to also be equal to their attribute name
+      // (e.g. script's spec: async has value: "" so both async and
+      // async="async" is okay in a script tag).
+      if (v.empty() && (attr_value == attr_name)) return;
+    }
+    context.AddError(
+        ValidationError::INVALID_ATTR_VALUE, context.line_col(),
+        /*params=*/{attr_name, TagDescriptiveName(tag_spec), attr_value},
+        TagSpecUrl(tag_spec), result);
+  } else if (spec.value_casei_size() > 0) {
+    for (const std::string& v : spec.value_casei()) {
+      if (EqualsIgnoreCase(attr_value, v)) return;
+    }
+    context.AddError(
+        ValidationError::INVALID_ATTR_VALUE, context.line_col(),
+        /*params=*/{attr_name, TagDescriptiveName(tag_spec), attr_value},
+        TagSpecUrl(tag_spec), result);
+  } else if (parsed_attr_spec.has_value_regex()) {
+    if (!RE2::FullMatch(attr_value, parsed_attr_spec.value_regex())) {
+      context.AddError(
+          ValidationError::INVALID_ATTR_VALUE, context.line_col(),
+          /*params=*/{attr_name, TagDescriptiveName(tag_spec), attr_value},
+          TagSpecUrl(tag_spec), result);
+    }
+  } else if (spec.has_value_url()) {
+    ValidateAttrValueUrl(parsed_attr_spec, context, attr_name, attr_value,
+                         tag_spec, result);
+  } else if (spec.has_value_properties()) {
+    ValidateAttrValueProperties(parsed_attr_spec, context, attr_name,
+                                attr_value, tag_spec, result);
+  }
+  // } end oneof
+}
+
+bool AttrValueHasTemplateSyntax(string_view value) {
+  // Mustache (https://mustache.github.io/mustache.5.html), our template
+  // system, supports replacement tags that start with {{ and end with }}.
+  // We relax attribute value rules if the value contains this syntax
+  // as we will validate the post-processed tag instead.
+  static LazyRE2 mustache_tag = {"{{.*}}"};
+  return RE2::PartialMatch(value, *mustache_tag);
+}
+
+bool AttrValueHasUnescapedTemplateSyntax(string_view value) {
+  // Mustache (https://mustache.github.io/mustache.5.html), our template
+  // system, supports unescaped variables of one of these formats:
+  // {{{unescaped}}} or {{{&unescaped}}} and there can be whitespace after
+  // the 2nd '{'. We disallow these in attribute Values.
+  static LazyRE2 unescaped_open_tag = {"{{\\s*[&{]"};
+  return RE2::PartialMatch(value, *unescaped_open_tag);
+}
+
+bool AttrValueHasPartialsTemplateSyntax(string_view value) {
+  // Mustache (https://mustache.github.io/mustache.5.html), our template
+  // system, supports 'partials' which include other Mustache templates
+  // in the format of {{>partial}} and there can be whitespace after the {{.
+  // We disallow partials in attribute values.
+  static LazyRE2 open_partial_tag = {"{{\\s*>"};
+  return RE2::PartialMatch(value, *open_partial_tag);
+}
+
+// Validates whether the parent tag satisfied the spec (e.g., some
+// tags can only appear in head).
+void ValidateParentTag(const ParsedTagSpec& parsed_tag_spec,
+                       const Context& context, ValidationResult* result) {
+  const TagSpec& spec = parsed_tag_spec.spec();
+  if (spec.has_mandatory_parent() &&
+      (spec.mandatory_parent() != context.tag_stack().ParentTagName()) &&
+      (spec.mandatory_parent() != context.tag_stack().ParentTagSpecName())) {
+    // Output a parent/child error using CSS Child Selector syntax which is
+    // both succinct and should be well understood by web developers.
+    context.AddError(ValidationError::WRONG_PARENT_TAG, context.line_col(),
+                     /*params=*/
+                     {TagDescriptiveName(spec),
+                      AsciiStrToLower(context.tag_stack().ParentTagName()),
+                      AsciiStrToLower(spec.mandatory_parent())},
+                     TagSpecUrl(spec), result);
+  }
+}
+
+// Validates that this tag is an allowed descendant tag type.
+void ValidateDescendantTags(const ParsedHtmlTag& encountered_tag,
+                            const ParsedTagSpec& parsed_tag_spec,
+                            const Context& context, ValidationResult* result) {
+  const TagStack& tag_stack = context.tag_stack();
+
+  int32_t allowed_descendants_lists =
+      tag_stack.allowed_descendants_list().size();
+
+  for (int32_t ii = 0; ii < allowed_descendants_lists; ++ii) {
+    const vector<std::string>& allowed_descendant_tags =
+        tag_stack.allowed_descendants_list()[ii]->allowed_tags();
+
+    // If the tag we're validating is not allowed for a specific ancestor,
+    // then throw an error.
+    if (!c_linear_search(allowed_descendant_tags,
+                         encountered_tag.UpperName())) {
+      context.AddError(
+          ValidationError::DISALLOWED_TAG_ANCESTOR, context.line_col(),
+          /*params=*/
+          {encountered_tag.LowerName(),
+           AsciiStrToLower(
+               tag_stack.allowed_descendants_list()[ii]->tag_name())},
+          TagSpecUrl(parsed_tag_spec), result);
+    }
+  }
+}
+
+void ValidateNoSiblingsAllowedTags(const ParsedHtmlTag& tag,
+                                   const ParsedTagSpec& parsed_tag_spec,
+                                   const Context& context,
+                                   ValidationResult* result) {
+  const TagSpec& tag_spec = parsed_tag_spec.spec();
+
+  if (tag_spec.siblings_disallowed() &&
+      context.tag_stack().ParentChildCount() > 0) {
+    context.AddError(
+        ValidationError::TAG_NOT_ALLOWED_TO_HAVE_SIBLINGS, context.line_col(),
+        /*params=*/
+        {tag.LowerName(), AsciiStrToLower(context.tag_stack().ParentTagName())},
+        TagSpecUrl(tag_spec), result);
+  }
+
+  if (context.tag_stack().ParentHasChildWithNoSiblingRule() &&
+      context.tag_stack().ParentChildCount() > 0) {
+    context.AddError(
+        ValidationError::TAG_NOT_ALLOWED_TO_HAVE_SIBLINGS,
+        context.tag_stack().ParentOnlyChildErrorLineCol(),
+        /*params=*/
+        {AsciiStrToLower(context.tag_stack().ParentOnlyChildTagName()),
+         AsciiStrToLower(context.tag_stack().ParentTagName())},
+        TagSpecUrl(tag_spec), result);
+  }
+}
+
+// Validates if the 'last child' rule exists.
+void ValidateLastChildTags(const Context& context, ValidationResult* result) {
+  if (context.tag_stack().ParentHasChildWithLastChildRule()) {
+    context.AddError(
+        ValidationError::MANDATORY_LAST_CHILD_TAG,
+        context.tag_stack().ParentLastChildErrorLineCol(),
+        /*params=*/
+        {AsciiStrToLower(context.tag_stack().ParentLastChildTagName()),
+         AsciiStrToLower(context.tag_stack().ParentTagName())},
+        context.tag_stack().ParentLastChildUrl(), result);
+  }
+}
+
+// If this tag requires an extension and we have processed all extensions,
+// report an error if that extension has not been loaded.
+void ValidateRequiredExtensions(const ParsedTagSpec& parsed_tag_spec,
+                                const Context& context,
+                                ValidationResult* result) {
+  const TagSpec& tag_spec = parsed_tag_spec.spec();
+  const ExtensionsContext& extensions_ctx = context.extensions();
+  for (const std::string& required_extension : tag_spec.requires_extension()) {
+    if (!extensions_ctx.IsExtensionLoaded(required_extension)) {
+      context.AddError(
+          ValidationError::MISSING_REQUIRED_EXTENSION, context.line_col(),
+          /*params=*/{TagDescriptiveName(tag_spec), required_extension},
+          TagSpecUrl(parsed_tag_spec), result);
+    }
+  }
+}
+
+// If this attribute requires an extension and we have processed all extensions,
+// report an error if that extension has not been loaded.
+void ValidateAttrRequiredExtensions(const ParsedAttrSpec& parsed_attr_spec,
+                                    const Context& context,
+                                    ValidationResult* result) {
+  const AttrSpec& attr_spec = parsed_attr_spec.spec();
+  const ExtensionsContext& extensions_ctx = context.extensions();
+  for (const std::string& required_extension : attr_spec.requires_extension()) {
+    if (!extensions_ctx.IsExtensionLoaded(required_extension)) {
+      context.AddError(ValidationError::ATTR_MISSING_REQUIRED_EXTENSION,
+                       context.line_col(),
+                       /*params=*/{attr_spec.name(), required_extension},
+                       /*spec_url=*/"", result);
+    }
+  }
+}
+
+// Check for duplicates of tags that should be unique, reporting errors for the
+// second instance of each unique tag.
+void ValidateUniqueness(const ParsedTagSpec& parsed_tag_spec,
+                        const Context& context, ValidationResult* result) {
+  const TagSpec& tag_spec = parsed_tag_spec.spec();
+  if (tag_spec.unique() &&
+      context.TagspecsValidated().count(parsed_tag_spec.id())) {
+    context.AddError(ValidationError::DUPLICATE_UNIQUE_TAG, context.line_col(),
+                     /*params=*/{TagDescriptiveName(parsed_tag_spec.spec())},
+                     TagSpecUrl(parsed_tag_spec), result);
+  }
+}
+
+// Considering that reference points could be defined by both reference
+// points and regular tag specs, check that we don't have matchers assigned
+// from both, there can be only one.
+void CheckForReferencePointCollision(const ParsedTagSpec* ref_point_spec,
+                                     const ParsedTagSpec* tag_spec,
+                                     const Context& context,
+                                     ValidationResult* result) {
+  if (!ref_point_spec || !ref_point_spec->has_reference_points()) return;
+  if (!tag_spec || !tag_spec->has_reference_points()) return;
+
+  context.AddError(
+      ValidationError::TAG_REFERENCE_POINT_CONFLICT, context.line_col(),
+      /*params=*/
+      {TagDescriptiveName(tag_spec->spec()),
+       ref_point_spec->reference_points().parent_tag_spec_name()},
+      ref_point_spec->reference_points().parent_spec_url(), result);
+}
+
+// Validates if the tag ancestors satisfied the spec.
+void ValidateAncestorTags(const ParsedTagSpec& parsed_tag_spec,
+                          const Context& context, ValidationResult* result) {
+  const TagSpec& spec = parsed_tag_spec.spec();
+  if (spec.has_mandatory_ancestor()) {
+    const std::string& mandatory_ancestor = spec.mandatory_ancestor();
+    if (!context.tag_stack().HasAncestor(mandatory_ancestor)) {
+      if (spec.has_mandatory_ancestor_suggested_alternative()) {
+        const std::string alt_tag =
+            AsciiStrToLower(spec.mandatory_ancestor_suggested_alternative());
+        context.AddError(ValidationError::MANDATORY_TAG_ANCESTOR_WITH_HINT,
+                         context.line_col(),
+                         /*params=*/
+                         {TagDescriptiveName(spec),
+                          AsciiStrToLower(mandatory_ancestor), alt_tag},
+                         TagSpecUrl(spec), result);
+      } else {
+        context.AddError(
+            ValidationError::MANDATORY_TAG_ANCESTOR, context.line_col(),
+            /*params=*/
+            {TagDescriptiveName(spec), AsciiStrToLower(mandatory_ancestor)},
+            TagSpecUrl(spec), result);
+      }
+      return;
+    }
+  }
+  for (const std::string& disallowed_ancestor : spec.disallowed_ancestor()) {
+    if (context.tag_stack().HasAncestor(disallowed_ancestor)) {
+      context.AddError(
+          ValidationError::DISALLOWED_TAG_ANCESTOR, context.line_col(),
+          /*params=*/
+          {TagDescriptiveName(spec), AsciiStrToLower(disallowed_ancestor)},
+          TagSpecUrl(spec), result);
+      return;
+    }
+  }
+}
+
+// Helper method for ValidateLayout.
+// Validates the server-side rendering related attributes for the given layout.
+void ValidateSsrLayout(const TagSpec& spec,
+                       const ParsedHtmlTag& encountered_tag,
+                       const AmpLayout::Layout& input_layout,
+                       const CssLength input_width,
+                       const CssLength input_height,
+                       const string_view sizes_attr,
+                       const string_view heights_attr, const Context& context,
+                       ValidationResult* result) {
+  // Only applies to transformed AMP and custom elements (<amp-...>).
+  if (!context.is_transformed() ||
+      !StartsWith(encountered_tag.LowerName(), "amp-"))
+    return;
+
+  // calculate effective ssr layout
+  CssLength width =
+      CalculateWidth(input_layout, input_width, encountered_tag.UpperName());
+  CssLength height =
+      CalculateHeight(input_layout, input_height, encountered_tag.UpperName());
+  AmpLayout::Layout layout =
+      CalculateLayout(input_layout, width, height,
+                      sizes_attr.data() != nullptr && !sizes_attr.empty(),
+                      heights_attr.data() != nullptr && !heights_attr.empty());
+
+  // class attribute
+  auto class_attr = encountered_tag.GetAttr("class");
+  if (class_attr && !class_attr.value().empty()) {
+    // i-amphtml-layout-{layout_name}
+    vector<std::string> valid_internal_classes = {
+        amp::validator::parse_layout::GetLayoutClass(layout)};
+    if (amp::validator::parse_layout::IsLayoutSizeDefined(layout))
+      // i-amphtml-layout-size-defined
+      valid_internal_classes.push_back(
+          amp::validator::parse_layout::GetLayoutSizeDefinedClass());
+    if (amp::validator::parse_layout::IsLayoutAwaitingSize(layout))
+      // i-amphtml-layout-awaiting-size
+      valid_internal_classes.push_back(
+          amp::validator::parse_layout::GetLayoutAwaitingSizeClass());
+    for (const string_view class_token :
+         StrSplit(class_attr.value(), ByAnyChar("\t\n\f\r "))) {
+      if (StartsWith(class_token, "i-amphtml-") &&
+          c_find(valid_internal_classes, class_token) ==
+              valid_internal_classes.end()) {
+        context.AddError(ValidationError::INVALID_ATTR_VALUE,
+                         context.line_col(),
+                         /*params=*/
+                         {"class", TagDescriptiveName(spec),
+                          std::string(class_attr.value())},
+                         TagSpecUrl(spec), result);
+        continue;
+      }
+    }
+  }
+
+  // i-amphtml-layout attribute
+  auto ssr_attr = encountered_tag.GetAttr("i-amphtml-layout");
+  if (ssr_attr && !ssr_attr.value().empty()) {
+    const std::string layout_name =
+        amp::validator::parse_layout::GetLayoutName(layout);
+    if (!EqualsIgnoreCase(layout_name, ssr_attr.value())) {
+      context.AddError(ValidationError::ATTR_VALUE_REQUIRED_BY_LAYOUT,
+                       context.line_col(),
+                       /*params=*/
+                       {std::string(ssr_attr.value()), "i-amphtml-layout",
+                        TagDescriptiveName(spec),
+                        AmpLayout::Layout_Name(layout), layout_name},
+                       TagSpecUrl(spec), result);
+    }
+  }
+}
+
+// Helper method for ValidateAttributes.
+// Validates the layout for the given tag. This involves checking
+// the layout, width, height, sizes attributes with AMP specific logic.
+void ValidateLayout(const ParsedTagSpec& parsed_tag_spec,
+                    const Context& context,
+                    const ParsedHtmlTag& encountered_tag,
+                    ValidationResult* result) {
+  const TagSpec& spec = parsed_tag_spec.spec();
+  string_view layout_attr =
+      encountered_tag.GetAttr("layout").value_or(string_view());
+  string_view width_attr =
+      encountered_tag.GetAttr("width").value_or(string_view());
+  string_view height_attr =
+      encountered_tag.GetAttr("height").value_or(string_view());
+  string_view sizes_attr =
+      encountered_tag.GetAttr("sizes").value_or(string_view());
+  string_view heights_attr =
+      encountered_tag.GetAttr("heights").value_or(string_view());
+
+  // We disable validating layout for tags where one of the layout attributes
+  // contains mustache syntax.
+  bool has_template_ancestor = context.tag_stack().HasAncestor("TEMPLATE");
+  if (has_template_ancestor && (AttrValueHasTemplateSyntax(layout_attr) ||
+                                AttrValueHasTemplateSyntax(width_attr) ||
+                                AttrValueHasTemplateSyntax(height_attr) ||
+                                AttrValueHasTemplateSyntax(sizes_attr) ||
+                                AttrValueHasTemplateSyntax(heights_attr)))
+    return;
+
+  // Parse the input layout attributes which we found for this tag.
+  const AmpLayout::Layout input_layout =
+      amp::validator::parse_layout::ParseLayout(layout_attr);
+  if (layout_attr.data() && input_layout == AmpLayout::UNKNOWN) {
+    context.AddError(
+        ValidationError::INVALID_ATTR_VALUE, context.line_col(),
+        /*params=*/
+        {"layout", TagDescriptiveName(spec), std::string(layout_attr)},
+        TagSpecUrl(spec), result);
+    return;
+  }
+  const CssLength input_width(width_attr, /*allow_auto=*/true,
+                              /*allow_fluid=*/input_layout == AmpLayout::FLUID);
+  if (!input_width.is_valid) {
+    context.AddError(
+        ValidationError::INVALID_ATTR_VALUE, context.line_col(),
+        /*params=*/{"width", TagDescriptiveName(spec), std::string(width_attr)},
+        TagSpecUrl(spec), result);
+    return;
+  }
+  const CssLength input_height(
+      height_attr, /*allow_auto=*/true,
+      /*allow_fluid=*/input_layout == AmpLayout::FLUID);
+  if (!input_height.is_valid) {
+    context.AddError(
+        ValidationError::INVALID_ATTR_VALUE, context.line_col(),
+        /*params=*/
+        {"height", TagDescriptiveName(spec), std::string(height_attr)},
+        TagSpecUrl(spec), result);
+    return;
+  }
+
+  // Now calculate the effective layout attributes.
+  const CssLength width = amp::validator::parse_layout::CalculateWidth(
+      spec.amp_layout(), input_layout, input_width);
+  const CssLength height = amp::validator::parse_layout::CalculateHeight(
+      spec.amp_layout(), input_layout, input_height);
+  const AmpLayout::Layout layout =
+      amp::validator::parse_layout::CalculateLayout(
+          input_layout, width, height,
+          sizes_attr.data() != nullptr && !sizes_attr.empty(),
+          heights_attr.data() != nullptr && !heights_attr.empty());
+
+  // Validate for transformed AMP the server-side rendering layout.
+  ValidateSsrLayout(spec, encountered_tag, input_layout, input_width,
+                    input_height, sizes_attr, heights_attr, context, result);
+
+  // Only FLEX_ITEM allows for height to be set to auto.
+  if (height.is_auto && layout != AmpLayout::FLEX_ITEM) {
+    context.AddError(
+        ValidationError::INVALID_ATTR_VALUE, context.line_col(),
+        /*params=*/
+        {"height", TagDescriptiveName(spec), std::string(height_attr)},
+        TagSpecUrl(spec), result);
+    return;
+  }
+
+  // Does the tag support the computed layout?
+  const auto& supported_layouts = spec.amp_layout().supported_layouts();
+  if (std::find(supported_layouts.begin(), supported_layouts.end(), layout) ==
+      supported_layouts.end()) {
+    ValidationError::Code code =
+        (layout_attr.empty()) ? ValidationError::IMPLIED_LAYOUT_INVALID
+                              : ValidationError::SPECIFIED_LAYOUT_INVALID;
+    // Special case. If no layout related attributes were provided, this implies
+    // the CONTAINER layout. However, telling the user that the implied layout
+    // is unsupported for this tag is confusing if all they need is to provide
+    // width and height, for example, the common case of creating
+    // an AMP-IMG without specifying dimensions. In this case, we emit a
+    // less correct, but simpler error message that could be more useful to
+    // the average user.
+    if (code == ValidationError::IMPLIED_LAYOUT_INVALID &&
+        layout == AmpLayout::CONTAINER &&
+        std::find(supported_layouts.begin(), supported_layouts.end(),
+                  AmpLayout::RESPONSIVE) != supported_layouts.end()) {
+      context.AddError(
+          ValidationError::MISSING_LAYOUT_ATTRIBUTES, context.line_col(),
+          /*params=*/{TagDescriptiveName(spec)}, TagSpecUrl(spec), result);
+      return;
+    }
+
+    context.AddError(
+        code, context.line_col(),
+        /*params=*/{AmpLayout::Layout_Name(layout), TagDescriptiveName(spec)},
+        TagSpecUrl(spec), result);
+    return;
+  }
+  // FIXED, FIXED_HEIGHT, INTRINSIC and RESPONSIVE must have height set.
+  if ((layout == AmpLayout::FIXED || layout == AmpLayout::FIXED_HEIGHT ||
+       layout == AmpLayout::INTRINSIC || layout == AmpLayout::RESPONSIVE) &&
+      !height.is_set) {
+    context.AddError(ValidationError::MANDATORY_ATTR_MISSING,
+                     context.line_col(), {"height", TagDescriptiveName(spec)},
+                     TagSpecUrl(spec), result);
+    return;
+  }
+  // For FIXED_HEIGHT if width is set it must be auto.
+  if (layout == AmpLayout::FIXED_HEIGHT && width.is_set && !width.is_auto) {
+    context.AddError(ValidationError::ATTR_VALUE_REQUIRED_BY_LAYOUT,
+                     context.line_col(),
+                     /*params=*/
+                     {std::string(width_attr), "width",
+                      TagDescriptiveName(spec), "FIXED_HEIGHT", "auto"},
+                     TagSpecUrl(spec), result);
+    return;
+  }
+  // FIXED, INTRINSIC, RESPONSIVE must have width set and not be auto.
+  if (layout == AmpLayout::FIXED || layout == AmpLayout::INTRINSIC ||
+      layout == AmpLayout::RESPONSIVE) {
+    if (!width.is_set) {
+      context.AddError(ValidationError::MANDATORY_ATTR_MISSING,
+                       context.line_col(),
+                       /*params=*/{"width", TagDescriptiveName(spec)},
+                       TagSpecUrl(spec), result);
+      return;
+    } else if (width.is_auto) {
+      context.AddError(ValidationError::INVALID_ATTR_VALUE, context.line_col(),
+                       /*params=*/{"width", TagDescriptiveName(spec), "auto"},
+                       TagSpecUrl(spec), result);
+      return;
+    }
+  }
+  // INTRINSIC, RESPONSIVE must have same units for height and width.
+  if ((layout == AmpLayout::INTRINSIC || layout == AmpLayout::RESPONSIVE) &&
+      width.unit != height.unit) {
+    context.AddError(ValidationError::INCONSISTENT_UNITS_FOR_WIDTH_AND_HEIGHT,
+                     context.line_col(),
+                     /*params=*/
+                     {TagDescriptiveName(spec), std::string(width.unit),
+                      std::string(height.unit)},
+                     TagSpecUrl(spec), result);
+    return;
+  }
+  // RESPONSIVE only allows heights attribute.
+  if (!heights_attr.empty() && layout != AmpLayout::RESPONSIVE) {
+    ValidationError::Code code =
+        (layout_attr.empty())
+            ? ValidationError::ATTR_DISALLOWED_BY_IMPLIED_LAYOUT
+            : ValidationError::ATTR_DISALLOWED_BY_SPECIFIED_LAYOUT;
+    context.AddError(
+        code, context.line_col(),
+        /*params=*/
+        {"heights", TagDescriptiveName(spec), AmpLayout::Layout_Name(layout)},
+        TagSpecUrl(spec), result);
+    return;
+  }
+}
+
+// Helper method for ValidateAttributes, for when an attribute is encountered
+// which is not specified by the validator.protoascii specification.
+// Return value indicates success / validation failure.
+void ValidateAttrNotFoundInSpec(const ParsedTagSpec& parsed_tag_spec,
+                                const Context& context,
+                                const std::string& attr_name,
+                                ValidationResult* result) {
+  // For now, we just skip data- attributes in the validator, because
+  // our schema doesn't capture which ones would be ok or not. E.g.
+  // in practice, some type of ad or perhaps other custom elements
+  // require particular data attributes.
+  // http://www.w3.org/TR/html5/single-page.html#attr-data-*
+  // http://w3c.github.io/aria-in-html/
+  // However, to avoid parsing differences, we restrict the set of allowed
+  // characters in the document.
+  // If explicit_attrs_only is true then do not allow data- attributes by
+  // default. They must be explicitly added to the tag_spec.
+  static LazyRE2 data_attr_re = {"data-[A-Za-z0-9-_:.]*"};
+  if (!parsed_tag_spec.spec().explicit_attrs_only() &&
+      (RE2::FullMatch(attr_name, *data_attr_re)))
+    return;
+  // Specific exemption lists. The Guardian has this utf-8 string which should
+  // be 'data-cards', but contains some non-printable characters.
+  // Example:
+  // https://amp.theguardian.com/voluntary-sector-network/2016/sep/09/social-media-charity-leaders-brexit-vote
+  if (attr_name == "data-\342\200\213c\342\200\213ards") return;
+
+  // PopSugar has this typo, clearly missing an = sign.
+  // Example:
+  // https://www.popsugar.de/beauty/Farbige-Eyeliner-und-Lidstriche-39645924/amp
+  if (attr_name == "data-action\"fastclick\"") return;
+
+  // At this point, it's an error either way, but we try to give a
+  // more specific error in the case of Mustache template characters.
+  if (attr_name.find("{{") != std::string::npos) {
+    const std::string& template_spec_url = context.rules().template_spec_url();
+    context.AddError(
+        ValidationError::TEMPLATE_IN_ATTR_NAME, context.line_col(),
+        /* params */ {attr_name, TagDescriptiveName(parsed_tag_spec.spec())},
+        template_spec_url, result);
+  } else {
+    context.AddError(
+        ValidationError::DISALLOWED_ATTR, context.line_col(),
+        /*params=*/{attr_name, TagDescriptiveName(parsed_tag_spec.spec())},
+        TagSpecUrl(parsed_tag_spec), result);
+  }
+}
+
+// Helper method for ValidateAttributes.
+// Specific checks for attribute values descending from a <template> tag.
+void ValidateAttrValueBelowTemplateTag(const ParsedTagSpec& parsed_tag_spec,
+                                       const Context& context,
+                                       const std::string& attr_name,
+                                       const std::string& attr_value,
+                                       ValidationResult* result) {
+  const std::string& tag_spec_name = TagDescriptiveName(parsed_tag_spec.spec());
+  const std::string& template_spec_url = context.rules().template_spec_url();
+  if (AttrValueHasUnescapedTemplateSyntax(attr_value)) {
+    context.AddError(ValidationError::UNESCAPED_TEMPLATE_IN_ATTR_VALUE,
+                     context.line_col(),
+                     /*params=*/{attr_name, tag_spec_name, attr_value},
+                     template_spec_url, result);
+  } else if (AttrValueHasPartialsTemplateSyntax(attr_value)) {
+    context.AddError(ValidationError::TEMPLATE_PARTIAL_IN_ATTR_VALUE,
+                     context.line_col(),
+                     /*params=*/{attr_name, tag_spec_name, attr_value},
+                     template_spec_url, result);
+  }
+}
+
+// Determines the name of the attribute whose value is the name of the
+// extension. Typically, this will return 'custom-element'.
+const std::string GetExtensionNameAttribute(
+    const ExtensionSpec& extension_spec) {
+  switch (extension_spec.extension_type()) {
+    case ExtensionSpec::CUSTOM_TEMPLATE:
+      return "custom-template";
+    case ExtensionSpec::HOST_SERVICE:
+      return "host-service";
+    default:
+      return "custom-element";
+  }
+}
+
+// Validates whether an encountered attribute is validated by an ExtensionSpec.
+// ExtensionSpec's validate the 'custom-element', 'custom-template', and 'src'
+// attributes. If an error is found, it is added to the |result|. The return
+// value indicates whether or not the provided attribute is explained by this
+// validation function.
+bool ValidateAttrInExtension(const TagSpec& tag_spec, const Context& context,
+                             const std::string& attr_name,
+                             const std::string& attr_value,
+                             ValidationResult* result) {
+  // The only callpoint for this method is guarded by this same condition.
+  CHECK(tag_spec.has_extension_spec());
+
+  static LazyRE2 src_url_re = {
+      R"re(https://cdn\.ampproject\.org(?:/lts)?/v0/(amp-[a-z0-9-]*)-([a-z0-9.]*)\.(?:m)?js(?:\?f=sxg)?)re"};
+
+  const auto& extension_spec = tag_spec.extension_spec();
+  // TagSpecs with extensions will only be evaluated if their dispatch_key
+  // matches, which is based on this custom-element/custom-template/host-service
+  // field attribute value. The dispatch key matching is case-insensitive for
+  // faster lookups, so it still possible for the attribute value to not match
+  // if it contains upper-case letters.
+  if (GetExtensionNameAttribute(extension_spec) == attr_name) {
+    if (extension_spec.name() != attr_value) {
+      return false;
+    }
+    return true;
+  } else if (attr_name == "src") {
+    std::string encountered_extension;
+    std::string encountered_version;
+    if (RE2::FullMatch(attr_value, *src_url_re, &encountered_extension,
+                       &encountered_version)) {
+      // If the src URL matches this regex and the base name of the file
+      // matches the extension name, look to see if the version also matches.
+      if (encountered_extension == extension_spec.name()) {
+        if (c_linear_search(extension_spec.deprecated_version(),
+                            encountered_version)) {
+          context.AddWarning(
+              ValidationError::WARNING_EXTENSION_DEPRECATED_VERSION,
+              context.line_col(),
+              /*params=*/{extension_spec.name(), encountered_version},
+              TagSpecUrl(tag_spec), result);
+          return true;
+        }
+        if (c_linear_search(extension_spec.version(), encountered_version))
+          return true;
+      }
+    }
+    context.AddError(
+        ValidationError::INVALID_ATTR_VALUE, context.line_col(),
+        /*params=*/{attr_name, TagDescriptiveName(tag_spec), attr_value},
+        TagSpecUrl(tag_spec), result);
+    return true;
+  }
+  return false;
+}
+
+// Validates that the reserved `i-amphtml-` prefix is not used in a class token.
+void ValidateClassAttr(const ParsedHtmlTagAttr& class_attr,
+                       const TagSpec& tag_spec, const Context& context,
+                       ValidationResult* result) {
+  for (const string_view class_token :
+       StrSplit(class_attr.value(), ByAnyChar("\t\n\f\r "))) {
+    if (StartsWith(class_token, "i-amphtml-")) {
+      context.AddError(
+          ValidationError::INVALID_ATTR_VALUE, context.line_col(),
+          /*params=*/
+          {class_attr.name(), TagDescriptiveName(tag_spec), class_attr.value()},
+          "https://amp.dev/documentation/guides-and-tutorials/develop/"
+          "style_and_layout/style_pages/#disallowed-styles",
+          result);
+      break;
+    }
+  }
+}
+
+// Validates the same script release version is used for all script sources.
+void ValidateScriptSrcAttr(const ParsedHtmlTag& tag, const TagSpec& tag_spec,
+                           const Context& context, ValidationResult* result) {
+  if (context.script_release_version() == ScriptReleaseVersion::UNKNOWN) return;
+
+  const ScriptReleaseVersion script_release_version =
+      tag.GetScriptReleaseVersion();
+
+  if (context.script_release_version() != script_release_version) {
+    const std::string spec_name = tag_spec.has_extension_spec()
+                                      ? tag_spec.extension_spec().name()
+                                      : tag_spec.spec_name();
+    switch (context.script_release_version()) {
+      case ScriptReleaseVersion::LTS:
+        context.AddError(
+            ValidationError::INCORRECT_SCRIPT_RELEASE_VERSION,
+            context.line_col(),
+            /*params=*/
+            {spec_name, ScriptReleaseVersionToString(script_release_version),
+             ScriptReleaseVersionToString(context.script_release_version())},
+            "https://amp.dev/documentation/guides-and-tutorials/learn/spec/"
+            "amphtml#required-markup",
+            result);
+        break;
+      case ScriptReleaseVersion::MODULE_NOMODULE:
+        context.AddError(
+            ValidationError::INCORRECT_SCRIPT_RELEASE_VERSION,
+            context.line_col(),
+            /*params=*/
+            {spec_name, ScriptReleaseVersionToString(script_release_version),
+             ScriptReleaseVersionToString(context.script_release_version())},
+            "https://amp.dev/documentation/guides-and-tutorials/learn/spec/"
+            "amphtml#required-markup",
+            result);
+        break;
+      case ScriptReleaseVersion::MODULE_NOMODULE_LTS:
+        context.AddError(
+            ValidationError::INCORRECT_SCRIPT_RELEASE_VERSION,
+            context.line_col(),
+            /*params=*/
+            {spec_name, ScriptReleaseVersionToString(script_release_version),
+             ScriptReleaseVersionToString(context.script_release_version())},
+            "https://amp.dev/documentation/guides-and-tutorials/learn/spec/"
+            "amphtml#required-markup",
+            result);
+        break;
+      case ScriptReleaseVersion::STANDARD:
+        context.AddError(
+            ValidationError::INCORRECT_SCRIPT_RELEASE_VERSION,
+            context.line_col(),
+            /*params=*/
+            {spec_name, ScriptReleaseVersionToString(script_release_version),
+             ScriptReleaseVersionToString(context.script_release_version())},
+            "https://amp.dev/documentation/guides-and-tutorials/learn/spec/"
+            "amphtml#required-markup",
+            result);
+        break;
+      default:
+        break;
+    }
+  }
+}
+
+// Helper method for ValidateAttributes.
+void ValidateAttrCss(const ParsedAttrSpec& parsed_attr_spec,
+                     const Context& context, const TagSpec& tag_spec,
+                     const std::string& attr_name,
+                     const std::string& attr_value, ValidateTagResult* result) {
+  // Track the number of CSS bytes. If this tagspec is selected as the best
+  // match, this byte count will be added to the overall document inline style
+  // byte count for determining if that byte count has been exceeded.
+  result->inline_style_css_bytes = attr_value.length();
+
+  vector<unique_ptr<htmlparser::css::ErrorToken>> css_errors;
+  vector<char32_t> codepoints =
+      htmlparser::Strings::Utf8ToCodepoints(attr_value);
+  // The line/col we are passing in here is not the actual starting point in the
+  // text for the attribute string. It's the start point for the tag. This means
+  // that any line/col values for tokens are also similarly offset incorrectly.
+  // For error messages, this means we just use the line/col of the tag instead
+  // of the token so as to minimize confusion. This could be improved further.
+  vector<unique_ptr<htmlparser::css::Token>> tokens =
+      htmlparser::css::Tokenize(&codepoints, context.line_col().line(),
+                                context.line_col().col(), &css_errors);
+  vector<unique_ptr<htmlparser::css::Declaration>> declarations =
+      htmlparser::css::ParseInlineStyle(&tokens, &css_errors);
+  const std::string tag_description = TagDescriptiveName(tag_spec);
+  for (const unique_ptr<htmlparser::css::ErrorToken>& error_token :
+       css_errors) {
+    // Override the first parameter with the name of the tag.
+    vector<std::string> params = error_token->params();
+    params[0] = tag_description;
+    context.AddError(error_token->code(),
+                     LineCol(error_token->line(), error_token->col()), params,
+                     /*spec_url=*/"", &result->validation_result);
+  }
+
+  // If there were errors parsing, exit from validating further.
+  if (!css_errors.empty()) return;
+
+  if (auto maybe_spec = context.MatchingDocCssSpec(); maybe_spec) {
+    const ParsedDocCssSpec& spec = **maybe_spec;
+    // Determine if we've exceeded the maximum bytes per inline style
+    // requirements.
+    if (spec.spec().has_max_bytes_per_inline_style() &&
+        attr_value.size() > spec.spec().max_bytes_per_inline_style()) {
+      if (spec.spec().max_bytes_is_warning()) {
+        context.AddWarning(ValidationError::INLINE_STYLE_TOO_LONG,
+                           context.line_col(), /*params=*/
+                           {tag_description, StrCat(attr_value.size()),
+                            StrCat(spec.spec().max_bytes_per_inline_style())},
+                           spec.spec().max_bytes_spec_url(),
+                           &result->validation_result);
+      } else {
+        context.AddError(ValidationError::INLINE_STYLE_TOO_LONG,
+                         context.line_col(), /*params=*/
+                         {tag_description, StrCat(attr_value.size()),
+                          StrCat(spec.spec().max_bytes_per_inline_style())},
+                         spec.spec().max_bytes_spec_url(),
+                         &result->validation_result);
+      }
+    }
+
+    // Allowed declarations vary by context. SVG has its own set of CSS
+    // declarations not supported generally in HTML.
+    bool is_svg = parsed_attr_spec.spec().value_doc_svg_css();
+    auto CssDeclarationByName = [is_svg, &spec](string_view name) {
+      if (is_svg) {
+        return spec.CssDeclarationSvgByName(name);
+      } else {
+        return spec.CssDeclarationByName(name);
+      }
+    };
+
+    // Loop over the declarations found in the document, verify that they are
+    // in the allowed list for this DocCssSpec, and have allowed values if
+    // relevant.
+    for (auto& declaration : declarations) {
+      // Validate declarations only when they are not all allowed.
+      if (!spec.spec().allow_all_declaration_in_style()) {
+        const CssDeclaration* css_declaration =
+            CssDeclarationByName(declaration->name());
+        // If there is no matching declaration in the rules, then this
+        // declaration is not allowed.
+        if (!css_declaration) {
+          context.AddError(
+              ValidationError::DISALLOWED_PROPERTY_IN_ATTR_VALUE,
+              context.line_col(),
+              /*params=*/{declaration->name(), attr_name, tag_description},
+              /*spec_url=*/context.rules().styles_spec_url(),
+              &result->validation_result);
+          // Don't emit additional errors for this declaration.
+          continue;
+        } else if (css_declaration->value_casei_size() > 0) {
+          bool has_valid_value = false;
+          const std::string first_ident = declaration->FirstIdent();
+          for (auto& value : css_declaration->value_casei()) {
+            if (EqualsIgnoreCase(first_ident, value)) {
+              has_valid_value = true;
+              break;
+            }
+          }
+          if (!has_valid_value) {
+            // Declaration value not allowed.
+            context.AddError(
+                ValidationError::CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
+                context.line_col(),
+                /*params=*/{tag_description, declaration->name(), first_ident},
+                /*spec_url=*/context.rules().styles_spec_url(),
+                &result->validation_result);
+          }
+        } else if (css_declaration->has_value_regex_casei()) {
+          RE2::Options options;
+          options.set_case_sensitive(false);
+          RE2 pattern(css_declaration->value_regex_casei(), options);
+          const std::string first_ident = declaration->FirstIdent();
+          if (!RE2::FullMatch(first_ident, pattern)) {
+            context.AddError(
+                ValidationError::CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
+                context.line_col(),
+                /*params=*/{tag_description, declaration->name(), first_ident},
+                /*spec_url=*/context.rules().styles_spec_url(),
+                &result->validation_result);
+          }
+        }
+      }
+      if (StrContains(declaration->name(), "i-amphtml-")) {
+        context.AddError(
+            ValidationError::DISALLOWED_PROPERTY_IN_ATTR_VALUE,
+            context.line_col(),
+            /*params=*/{declaration->name(), attr_name, tag_description},
+            /*spec_url=*/context.rules().styles_spec_url(),
+            &result->validation_result);
+        // Don't emit additional errors for this declaration.
+        continue;
+      }
+      if (!spec.spec().allow_important()) {
+        if (declaration->important()) {
+          context.AddError(ValidationError::CSS_SYNTAX_DISALLOWED_IMPORTANT,
+                           context.line_col(),
+                           /*params=*/{}, context.rules().styles_spec_url(),
+                           &result->validation_result);
+        }
+      }
+      vector<unique_ptr<htmlparser::css::ParsedCssUrl>> parsed_urls;
+      vector<unique_ptr<htmlparser::css::ErrorToken>> url_errors;
+      htmlparser::css::ExtractUrls(*declaration, &parsed_urls, &url_errors);
+      // We may have found new errors when parsing URLs. Emit those:
+      for (const unique_ptr<htmlparser::css::ErrorToken>& error_token :
+           url_errors) {
+        // Override the first parameter with the name of the tag.
+        vector<std::string> params = error_token->params();
+        params[0] = tag_description;
+        context.AddError(error_token->code(), context.line_col(), params,
+                         /*spec_url=*/"", &result->validation_result);
+      }
+      if (!url_errors.empty()) continue;
+      for (const auto& url : parsed_urls) {
+        // Validate that the URL itself matches the spec.
+        // Only image specs apply for inline styles. Fonts are only defined in
+        // @font-face rules which we require a full stylesheet to define.
+        if (spec.spec().has_image_url_spec()) {
+          ValidateUrlAndProtocol(
+              spec.image_url_spec(),
+              UrlErrorInStylesheetAdapter(context.line_col()), context,
+              url->utf8_url(), tag_spec, &result->validation_result);
+        }
+        // Subtract off URL lengths from doc-level inline style bytes, if
+        // specified by the DocCssSpec.
+        if (!spec.spec().url_bytes_included() && !IsDataUrl(url->utf8_url()))
+          result->inline_style_css_bytes -= url->utf8_url().length();
+      }
+      DCHECK_GE(result->inline_style_css_bytes, 0);
+    }
+  }
+}
+
+// Helper method for ValidateAttributes.
+void ValidateAttrDeclaration(const ParsedAttrSpec& parsed_attr_spec,
+                             const Context& context,
+                             const std::string& tag_spec_name,
+                             const std::string& attr_name,
+                             const std::string& attr_value,
+                             ValidationResult* result) {
+  vector<unique_ptr<htmlparser::css::ErrorToken>> css_errors;
+  vector<char32_t> codepoints =
+      htmlparser::Strings::Utf8ToCodepoints(attr_value);
+  // The line/col we are passing in here is not the actual start point in the
+  // text for the attribute string. It's the start point for the tag. This means
+  // that any line/col values for tokens are also similarly offset incorrectly.
+  // For error messages, this means we just use the line/col of the tag instead
+  // of the token so as to minimize confusion. This could be improved further.
+  vector<unique_ptr<htmlparser::css::Token>> tokens =
+      htmlparser::css::Tokenize(&codepoints, context.line_col().line(),
+                                context.line_col().col(), &css_errors);
+  vector<unique_ptr<htmlparser::css::Declaration>> declarations =
+      htmlparser::css::ParseInlineStyle(&tokens, &css_errors);
+  for (const unique_ptr<htmlparser::css::ErrorToken>& error_token :
+       css_errors) {
+    // Override the first parameter with the name of the tag.
+    vector<std::string> params = error_token->params();
+    params[0] = tag_spec_name;
+    context.AddError(error_token->code(), context.line_col(), params,
+                     /*spec_url=*/"", result);
+  }
+
+  // If there were errors parsing, exit from validating further.
+  if (!css_errors.empty()) return;
+
+  const unordered_map<std::string, const CssDeclaration*>&
+      css_declaration_by_name = parsed_attr_spec.css_declaration_by_name();
+
+  for (auto& declaration : declarations) {
+    auto iter = css_declaration_by_name.find(
+        std::string(htmlparser::css::StripVendorPrefix(
+            AsciiStrToLower(declaration->name()))));
+    const CssDeclaration* css_declaration =
+        iter != css_declaration_by_name.end() ? iter->second : nullptr;
+    if (!css_declaration) {
+      // Declaration not allowed.
+      context.AddError(
+          ValidationError::DISALLOWED_PROPERTY_IN_ATTR_VALUE,
+          context.line_col(),
+          /*params=*/{declaration->name(), attr_name, tag_spec_name},
+          /*spec_url=*/context.rules().styles_spec_url(), result);
+    } else if (css_declaration->value_casei_size() > 0) {
+      bool has_valid_value = false;
+      const std::string first_ident = declaration->FirstIdent();
+      for (auto& value : css_declaration->value_casei()) {
+        if (EqualsIgnoreCase(first_ident, value)) {
+          has_valid_value = true;
+          break;
+        }
+      }
+      if (!has_valid_value) {
+        // Declaration value not allowed.
+        context.AddError(
+            ValidationError::CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
+            context.line_col(),
+            /*params=*/{tag_spec_name, declaration->name(), first_ident},
+            /*spec_url=*/context.rules().styles_spec_url(), result);
+      }
+    } else if (css_declaration->has_value_regex_casei()) {
+      RE2::Options options;
+      options.set_case_sensitive(false);
+      RE2 pattern(css_declaration->value_regex_casei(), options);
+      const std::string first_ident = declaration->FirstIdent();
+      if (!RE2::FullMatch(first_ident, pattern)) {
+        context.AddError(
+            ValidationError::CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
+            context.line_col(),
+            /*params=*/{tag_spec_name, declaration->name(), first_ident},
+            /*spec_url=*/context.rules().styles_spec_url(), result);
+      }
+    }
+  }
+}
+
+// Returns true if errors reported on this tag should be suppressed, due to
+// data-ampdevmode annotations.
+bool ShouldSuppressDevModeErrors(const ParsedHtmlTag& encountered_tag,
+                                 const Context& context) {
+  if (!context.is_dev_mode()) return false;
+  // Cannot suppress errors on HTML tag. The "data-ampdevmode" here is a
+  // type identifier. Suppressing errors here would suppress all errors since
+  // HTML is the root of the document.
+  if (encountered_tag.UpperName() == "HTML") return false;
+  for (const ParsedHtmlTagAttr& attr : encountered_tag.Attributes()) {
+    if (attr.name() == "data-ampdevmode") return true;
+  }
+  return context.tag_stack().IsDevMode();
+}
+
+// Validates whether the attributes set on |encountered_tag| conform to this
+// tag specification. All mandatory attributes must appear. Only attributes
+// explicitly mentioned by this tag spec may appear.
+// Sets result->validation_result.status to FAIL if unsuccessful.
+void ValidateAttributes(const ParsedTagSpec& parsed_tag_spec,
+                        const ParsedTagSpec* best_match_reference_point,
+                        const Context& context,
+                        const ParsedHtmlTag& encountered_tag,
+                        ValidateTagResult* result) {
+  const TagSpec& spec = parsed_tag_spec.spec();
+  if (spec.has_amp_layout()) {
+    ValidateLayout(parsed_tag_spec, context, encountered_tag,
+                   &result->validation_result);
+  }
+  // For extension TagSpecs, we track if we've validated a src attribute.
+  // We must have done so for the extension to be valid.
+  bool seen_extension_src_attr = false;
+  bool has_template_ancestor = context.tag_stack().HasAncestor("TEMPLATE");
+  bool is_html_tag = encountered_tag.UpperName() == "HTML";
+  vector<int32_t> mandatory_attrs_seen;
+  set<std::string_view> attr_seen;
+  set<std::string_view> mandatory_oneofs_seen;
+  set<std::string_view> mandatory_anyofs_seen;
+  vector<const ParsedAttrTriggerSpec*> parsed_trigger_specs;
+  set<int32_t> attrspecs_validated;
+  const unordered_map<std::string, int32_t>& attr_ids_by_name =
+      parsed_tag_spec.attr_ids_by_name();
+
+  for (const ParsedHtmlTagAttr& attr : encountered_tag.Attributes()) {
+    if (!attr_seen.insert(attr.name()).second) {
+      continue;
+    }
+
+    if (context.is_transformed()) {
+      // For transformed AMP, `i-amphtml-layout` is handled within
+      // ValidateSsrLayout, called by ValidateLayout above.
+      if (attr.name() == "i-amphtml-layout") continue;
+    } else if (attr.name() == "class") {
+      // For non-transformed AMP, `class` must not contain 'i-amphtml-' prefix.
+      ValidateClassAttr(attr, spec, context, &result->validation_result);
+    }
+
+    // If |spec| is the runtime or an extension script, validate that LTS is
+    // either used by all pages or no pages.
+    if (attr.name() == "src" && (encountered_tag.IsExtensionScript() ||
+                                 encountered_tag.IsAmpRuntimeScript())) {
+      ValidateScriptSrcAttr(encountered_tag, spec, context,
+                            &result->validation_result);
+    }
+
+    auto jt = attr_ids_by_name.find(attr.name());
+    if (jt == attr_ids_by_name.end()) {
+      // The HTML tag specifies type identifiers which are validated in
+      // ValidateHtmlTag(), so we skip them here.
+      if (is_html_tag && context.rules().IsTypeIdentifier(attr.name()))
+        continue;
+      // While validating a reference point, we skip attributes that
+      // we don't have a spec for. They will be validated when the
+      // TagSpec itself gets validated.
+      if (parsed_tag_spec.is_reference_point()) continue;
+      // On the other hand, if we did just validate a reference point for
+      // this tag, we check whether that reference point covers the attribute.
+      if (best_match_reference_point &&
+          best_match_reference_point->HasAttrWithName(attr.name()))
+        continue;
+      // If |spec| is an extension, then we ad-hoc validate 'custom-element',
+      // 'custom-template', 'host-service', and 'src' attributes by calling this
+      // method. For 'src', we also keep track whether we validated it this way,
+      // (seen_extension_src_attr), since it's a mandatory attr.
+      if (spec.has_extension_spec() &&
+          ValidateAttrInExtension(spec, context, attr.name(), attr.value(),
+                                  &result->validation_result)) {
+        if (attr.name() == "src") seen_extension_src_attr = true;
+        continue;
+      }
+
+      ValidateAttrNotFoundInSpec(parsed_tag_spec, context, attr.name(),
+                                 &result->validation_result);
+      if (result->validation_result.status() == ValidationResult::FAIL)
+        continue;
+      if (has_template_ancestor) {
+        ValidateAttrValueBelowTemplateTag(parsed_tag_spec, context, attr.name(),
+                                          attr.value(),
+                                          &result->validation_result);
+        if (result->validation_result.status() == ValidationResult::FAIL)
+          continue;
+      }
+      continue;
+    }
+    if (has_template_ancestor) {
+      ValidateAttrValueBelowTemplateTag(parsed_tag_spec, context, attr.name(),
+                                        attr.value(),
+                                        &result->validation_result);
+      if (result->validation_result.status() == ValidationResult::FAIL)
+        continue;
+    }
+    const ParsedAttrSpec& parsed_attr_spec =
+        context.rules().parsed_attr_specs().GetById(jt->second);
+    // If this attribute isn't used for these type identifiers, then error.
+    if (!parsed_attr_spec.IsUsedForTypeIdentifiers(
+            context.type_identifiers())) {
+      context.AddError(ValidationError::DISALLOWED_ATTR, context.line_col(),
+                       /*params=*/{attr.name(), TagDescriptiveName(spec)},
+                       TagSpecUrl(spec), &result->validation_result);
+      continue;
+    }
+    if (parsed_attr_spec.spec().has_deprecation()) {
+      context.AddWarning(ValidationError::DEPRECATED_ATTR, context.line_col(),
+                         /*params=*/
+                         {attr.name(), TagDescriptiveName(spec),
+                          parsed_attr_spec.spec().deprecation()},
+                         parsed_attr_spec.spec().deprecation_url(),
+                         &result->validation_result);
+      // Deprecation is only a warning, so we don't return.
+    }
+    if (!parsed_attr_spec.spec().requires_extension().empty()) {
+      ValidateAttrRequiredExtensions(parsed_attr_spec, context,
+                                     &result->validation_result);
+    }
+    if (parsed_attr_spec.spec().value_doc_css() ||
+        parsed_attr_spec.spec().value_doc_svg_css()) {
+      ValidateAttrCss(parsed_attr_spec, context, spec, attr.name(),
+                      attr.value(), result);
+    } else if (!parsed_attr_spec.spec().css_declaration().empty()) {
+      ValidateAttrDeclaration(parsed_attr_spec, context,
+                              TagDescriptiveName(spec), attr.name(),
+                              attr.value(), &result->validation_result);
+    }
+    // Skip attribute value requirements if the value will be modified by
+    // mustache first.
+    if (!has_template_ancestor || !AttrValueHasTemplateSyntax(attr.value())) {
+      ValidateNonTemplateAttrValueAgainstSpec(parsed_attr_spec, context,
+                                              attr.name(), attr.value(), spec,
+                                              &result->validation_result);
+      if (result->validation_result.status() == ValidationResult::FAIL)
+        continue;
+    }
+    if (parsed_attr_spec.has_disallowed_value_regex()) {
+      if (RE2::PartialMatch(attr.value(),
+                            parsed_attr_spec.disallowed_value_regex())) {
+        context.AddError(
+            ValidationError::INVALID_ATTR_VALUE, context.line_col(),
+            /*params=*/{attr.name(), TagDescriptiveName(spec), attr.value()},
+            TagSpecUrl(spec), &result->validation_result);
+        continue;
+      }
+    }
+    if (spec.tag_name() == "BASE" && attr.name() == "href" &&
+        context.HasSeenUrl()) {
+      context.AddError(ValidationError::BASE_TAG_MUST_PRECEED_ALL_URLS,
+                       context.line_col(),
+                       /*params=*/{context.FirstSeenUrlTagName()},
+                       TagSpecUrl(spec), &result->validation_result);
+      continue;
+    }
+    if (parsed_attr_spec.spec().mandatory())
+      mandatory_attrs_seen.push_back(parsed_attr_spec.id());
+    // The "at most 1" part of mandatory_oneof: mandatory_oneof
+    // wants exactly one of the alternatives, so here
+    // we check whether we already saw another alternative
+    if (parsed_attr_spec.spec().has_mandatory_oneof()) {
+      if (mandatory_oneofs_seen.count(
+              parsed_attr_spec.spec().mandatory_oneof()) > 0) {
+        context.AddError(ValidationError::MUTUALLY_EXCLUSIVE_ATTRS,
+                         context.line_col(),
+                         /*params=*/
+                         {TagDescriptiveName(spec),
+                          parsed_attr_spec.spec().mandatory_oneof()},
+                         TagSpecUrl(spec), &result->validation_result);
+        continue;
+      }
+      mandatory_oneofs_seen.insert(parsed_attr_spec.spec().mandatory_oneof());
+    }
+    if (parsed_attr_spec.spec().has_mandatory_anyof()) {
+      mandatory_anyofs_seen.insert(parsed_attr_spec.spec().mandatory_anyof());
+    }
+    // Validate that any ancestor marks are set.
+    if (parsed_attr_spec.spec().has_requires_ancestor()) {
+      const auto& markers = parsed_attr_spec.spec().requires_ancestor();
+      bool matches_marker = false;
+      for (int i = 0; i < markers.marker_size(); ++i) {
+        if (context.tag_stack().HasAncestorMarker(markers.marker(i))) {
+          matches_marker = true;
+          break;
+        }
+      }
+      if (!matches_marker) {
+        // TODO: This error message should somehow indicate the
+        // condition under which this attribute would have been allowed.
+        context.AddError(ValidationError::DISALLOWED_ATTR, context.line_col(),
+                         /*params=*/{attr.name(), TagDescriptiveName(spec)},
+                         TagSpecUrl(spec), &result->validation_result);
+        continue;
+      }
+    }
+    // If the trigger does not have an if_value_regex, then proceed to add the
+    // spec. If it does have an if_value_regex, then test the regex to see
+    // if it should add the spec.
+    if (parsed_attr_spec.spec().has_trigger() &&
+        (!parsed_attr_spec.trigger_spec().has_if_value_regex() ||
+         (parsed_attr_spec.trigger_spec().has_if_value_regex() &&
+          RE2::FullMatch(attr.value(),
+                         parsed_attr_spec.trigger_spec().if_value_regex())))) {
+      parsed_trigger_specs.push_back(&parsed_attr_spec.trigger_spec());
+    }
+    attrspecs_validated.insert(parsed_attr_spec.id());
+  }
+  if (result->validation_result.status() == ValidationResult::FAIL) return;
+  // The "exactly 1" part of mandatory_oneof: If none of the
+  // alternatives were present, we report that an attribute is missing.
+  const vector<std::string>& mandatory_oneofs =
+      parsed_tag_spec.mandatory_oneofs();
+  for (int ii = 0; ii < mandatory_oneofs.size(); ++ii) {
+    if (mandatory_oneofs_seen.count(mandatory_oneofs[ii]) == 0) {
+      context.AddError(
+          ValidationError::MANDATORY_ONEOF_ATTR_MISSING, context.line_col(),
+          /*params=*/{TagDescriptiveName(spec), mandatory_oneofs[ii]},
+          TagSpecUrl(spec), &result->validation_result);
+    }
+  }
+  // The "at least 1" part of mandatory_anyof: If none of the
+  // alternatives were present, we report that an attribute is missing.
+  const vector<std::string>& mandatory_anyofs =
+      parsed_tag_spec.mandatory_anyofs();
+  for (int ii = 0; ii < mandatory_anyofs.size(); ++ii) {
+    if (mandatory_anyofs_seen.count(mandatory_anyofs[ii]) == 0) {
+      context.AddError(
+          ValidationError::MANDATORY_ANYOF_ATTR_MISSING, context.line_col(),
+          /*params=*/{TagDescriptiveName(spec), mandatory_anyofs[ii]},
+          TagSpecUrl(spec), &result->validation_result);
+    }
+  }
+  for (const ParsedAttrTriggerSpec* trigger_spec : parsed_trigger_specs) {
+    for (const std::string& also_requires_attr :
+         trigger_spec->spec().also_requires_attr()) {
+      auto it = attr_ids_by_name.find(also_requires_attr);
+      if (it != attr_ids_by_name.end()) {
+        const int32_t also_requires_attr_id = it->second;
+        // If a tag has implicit attributes, we then consider these attributes
+        // as validated. E.g. tag 'a' has implicit attributes 'role' and
+        // 'tabindex'.
+        if (attrspecs_validated.count(also_requires_attr_id) == 0 &&
+            parsed_tag_spec.implicit_attrspecs().count(also_requires_attr_id) ==
+                0) {
+          const ParsedAttrSpec& also_requires_attr_spec =
+              context.rules().parsed_attr_specs().GetById(
+                  also_requires_attr_id);
+          context.AddError(
+              ValidationError::ATTR_REQUIRED_BUT_MISSING, context.line_col(),
+              /*params=*/
+              {also_requires_attr_spec.spec().name(), TagDescriptiveName(spec),
+               trigger_spec->attr_name()},
+              TagSpecUrl(spec), &result->validation_result);
+        }
+      }
+    }
+  }
+  SortAndUniquify(&mandatory_attrs_seen);
+  const vector<int32_t>& mandatory_attr_ids =
+      parsed_tag_spec.mandatory_attr_ids();
+  if (mandatory_attrs_seen == mandatory_attr_ids) return;
+  vector<int> diff = Diff(mandatory_attr_ids, mandatory_attrs_seen);
+  vector<std::string> missing_attrs;
+  for (const int32_t attr_id : diff) {
+    const std::string& attr_name =
+        context.rules().parsed_attr_specs().GetById(attr_id).spec().name();
+    missing_attrs.push_back(attr_name);
+  }
+  // Sort this list for stability across implementations.
+  std::sort(missing_attrs.begin(), missing_attrs.end());
+  for (const std::string& missing_attr : missing_attrs) {
+    context.AddError(ValidationError::MANDATORY_ATTR_MISSING,
+                     context.line_col(),
+                     /*params=*/{missing_attr, TagDescriptiveName(spec)},
+                     TagSpecUrl(spec), &result->validation_result);
+  }
+  // Extension specs mandate the 'src' attribute.
+  if (spec.has_extension_spec() && !seen_extension_src_attr) {
+    context.AddError(ValidationError::MANDATORY_ATTR_MISSING,
+                     context.line_col(),
+                     /*params=*/{"src", TagDescriptiveName(spec)},
+                     TagSpecUrl(spec), &result->validation_result);
+  }
+}
+
+const set<std::string>& ProxyKnowsIntertagsToValidate() {
+  static const set<std::string>* tags = [] {
+    // WARNING: If you update this list, you MUST change
+    // min_validator_revision_required in validator.protoascii to
+    // avoid crashing old binaries.
+    return new set<std::string>({"AMP-TIMEAGO", "SCRIPT", "STYLE"});
+  }();
+  return *tags;
+}
+
+ParsedValidatorRules::ParsedValidatorRules(HtmlFormat::Code html_format)
+    : html_format_(html_format) {
+  ValidatorRules all_rules;
+  status_ = LoadRules(&all_rules);
+  if (!status_.ok()) return;
+  FilterRules(all_rules, &rules_);
+  ExpandExtensionSpec(&rules_);
+  for (int ii = 0; ii < rules_.tags_size(); ++ii) {
+    const TagSpec& tag = rules_.tags(ii);
+    if (tag.has_cdata()) {
+      tags_with_cdata_.insert(tag.tag_name());
+    }
+    if (tag.has_extension_spec()) {
+      ext_tag_spec_ids_by_ext_name_[tag.extension_spec().name()].push_back(ii);
+    }
+  }
+  status_ = CheckIntertags();
+  if (!status_.ok()) return;
+
+  parsed_attr_specs_ = make_unique<ParsedAttrSpecs>(rules_.attr_lists());
+
+  for (const DocSpec& spec : rules_.doc()) {
+    parsed_doc_.emplace_back(spec);
+  }
+
+  for (const DocCssSpec& css_spec : rules_.css()) {
+    parsed_css_.emplace_back(css_spec, rules_.declaration_list());
+  }
+
+  // In validator.protoascii, tagspecs can identify other tagspecs
+  // that are required by referencing their spec_name field (or
+  // tag_name, if spec_name is not set). To implement this
+  // efficiently we map these TagSpecName() values to the int32_t ids
+  // of the corresponding tagspecs and compute
+  // |tag_spec_names_to_track| to identify those tagspecs that are
+  // referenced by others via "also_requires_tag".  The ParsedTagSpec
+  // constructor completes this translation to ids.
+  unordered_map<std::string, int32_t> tag_spec_ids_by_tag_spec_name;
+  unordered_set<std::string> tag_spec_names_to_track;
+  for (int ii = 0; ii < rules_.tags_size(); ++ii) {
+    const TagSpec& tag = rules_.tags(ii);
+    // This check only occurs during initialization.
+    CHECK(tag_spec_ids_by_tag_spec_name
+              .insert(std::make_pair(TagSpecName(tag), ii))
+              .second)
+        << TagSpecName(tag);
+    if (!tag.also_requires_tag_warning().empty())
+      tag_spec_names_to_track.insert(TagSpecName(tag));
+    c_copy(
+        tag.also_requires_tag_warning(),
+        std::inserter(tag_spec_names_to_track, tag_spec_names_to_track.end()));
+  }
+  for (int ii = 0; ii < rules_.tags_size(); ++ii) {
+    const TagSpec& tag = rules_.tags(ii);
+    tagspec_by_id_.emplace_back(
+        parsed_attr_specs_.get(), tag_spec_ids_by_tag_spec_name,
+        ShouldRecordTagspecValidated(tag, tag_spec_names_to_track), &tag, ii);
+    const ParsedTagSpec& parsed_tag_spec = tagspec_by_id_.back();
+    if (!parsed_tag_spec.status().ok()) {
+      status_ = parsed_tag_spec.status();
+      if (!status_.ok()) return;
+    }
+    if (!parsed_tag_spec.is_reference_point()) {
+      auto& tagspec_dispatch =
+          tagspecs_by_tagname_[parsed_tag_spec.spec().tag_name()];
+      std::vector<std::string> dispatch_keys =
+          parsed_tag_spec.GetDispatchKeys();
+      if (!dispatch_keys.empty()) {
+        for (const std::string& dispatch_key : dispatch_keys)
+          tagspec_dispatch.RegisterDispatchKey(dispatch_key, ii);
+      } else if (tag.has_extension_spec()) {
+        tagspec_dispatch.RegisterDispatchKey(
+            DispatchKey(AttrSpec::NAME_VALUE_DISPATCH,
+                        GetExtensionNameAttribute(tag.extension_spec()),
+                        tag.extension_spec().name(), ""),
+            ii);
+      } else {
+        tagspec_dispatch.RegisterTagSpec(ii);
+      }
+    }
+    if (parsed_tag_spec.spec().mandatory()) mandatory_tagspecs_.push_back(ii);
+  }
+  std::sort(mandatory_tagspecs_.begin(), mandatory_tagspecs_.end());
+
+  error_codes_.resize(ValidationError::Code_MAX + 1);
+  for (const ErrorSpecificity& error_specificity : rules_.error_specificity()) {
+    // Guard against new specfiles being digested by old binaries.
+    // TODO: Consider a more comprehensive fix, e.g. baking
+    // the specificity stuff in separately from the configurable part like
+    // with code generation.
+    if (error_specificity.code() >= 0 &&
+        error_specificity.code() < error_codes_.size()) {
+      error_codes_[error_specificity.code()].specificity =
+          error_specificity.specificity();
+    }
+  }
+}
+
+// Loads validator rules into the |rules_| proto, stub or actual (embedded).
+// Returns false on any failure, setting status_ to the relevant error.
+Status ParsedValidatorRules::LoadRules(ValidatorRules* rules) const {
+  if (!rules->ParseFromArray(amp::validator::data::kValidatorProtoBytes,
+                             amp::validator::data::kValidatorProtoBytesSize)) {
+    return InvalidArgumentError("Parsing embedded proto failed");
+  }
+  return OkStatus();
+}
+
+Status ParsedValidatorRules::CheckIntertags() const {
+  // TagSpecs which have cdata to validate must also be registered in the
+  // static list of parser tags to make cdata callbacks for. This check
+  // verifies that the lists match up.
+  const set<std::string>& proxy_intertags = ProxyKnowsIntertagsToValidate();
+  for (const std::string& tag : IntertagsToValidate()) {
+    if (proxy_intertags.find(tag) == proxy_intertags.end()) {
+      // If this fails we need to add to ProxyKnowsIntertagsToValidate.
+      return InvalidArgumentError(StrCat("invalid rules - missing from ",
+                                         "ProxyKnowsIntertagsToValidate: '",
+                                         tag, "'"));
+    }
+  }
+  return OkStatus();
+}
+
+// Filters |all_rules|, leaving only those which match the html_format of
+// this ParsedValidatorRules object.
+void ParsedValidatorRules::FilterRules(const ValidatorRules& all_rules,
+                                       ValidatorRules* filtered_rules) const {
+  *filtered_rules = all_rules;
+  filtered_rules->clear_tags();
+  for (const TagSpec& tagspec : all_rules.tags()) {
+    if (IsTagSpecCorrectHtmlFormat(tagspec))
+      *filtered_rules->mutable_tags()->Add() = tagspec;
+  }
+  filtered_rules->clear_doc();
+  for (const DocSpec& spec : all_rules.doc()) {
+    if (IsDocSpecCorrectHtmlFormat(spec))
+      *filtered_rules->mutable_doc()->Add() = spec;
+  }
+  filtered_rules->clear_css();
+  for (const DocCssSpec& doc_css : all_rules.css()) {
+    if (IsDocCssSpecCorrectHtmlFormat(doc_css))
+      *filtered_rules->mutable_css()->Add() = doc_css;
+  }
+}
+
+// For every tagspec that contains an ExtensionSpec, add module specific
+// requirements for that tagspec that will be added to ValidatorRules.
+void ParsedValidatorRules::ExpandModuleExtensionSpec(
+    TagSpec* tagspec, const string_view spec_name) const {
+  tagspec->set_spec_name(StrCat(spec_name, " module extension script"));
+  tagspec->set_descriptive_name(tagspec->spec_name());
+  tagspec->add_satisfies(tagspec->spec_name());
+  tagspec->add_requires(StrCat(spec_name, " nomodule extension script"));
+  AttrSpec* attr = tagspec->add_attrs();
+  attr->set_name("crossorigin");
+  attr->add_value("anonymous");
+  attr->set_mandatory(true);
+  attr = tagspec->add_attrs();
+  attr->set_name("src");
+  attr->set_value_regex(
+      "https://cdn\\.ampproject\\.org(?:/lts)?/(v0|v0/"
+      "amp-[a-z0-9-]*-[a-z0-9.]*)\\.mjs");
+  attr->set_mandatory(true);
+  attr = tagspec->add_attrs();
+  attr->set_name("type");
+  attr->add_value("module");
+  attr->set_mandatory(true);
+}
+
+// For every tagspec that contains an ExtensionSpec, add nomodule specific
+// requirements for that tagspec that will be added to ValidatorRules.
+void ParsedValidatorRules::ExpandNomoduleExtensionSpec(
+    TagSpec* tagspec, const string_view spec_name) const {
+  tagspec->set_spec_name(StrCat(spec_name, " nomodule extension script"));
+  tagspec->set_descriptive_name(tagspec->spec_name());
+  tagspec->add_satisfies(tagspec->spec_name());
+  tagspec->add_requires(StrCat(spec_name, " module extension script"));
+  AttrSpec* attr = tagspec->add_attrs();
+  attr->set_name("nomodule");
+  attr->add_value("");
+  attr->set_mandatory(true);
+  attr = tagspec->add_attrs();
+  attr->set_name("src");
+  attr->set_value_regex(
+      "https://cdn\\.ampproject\\.org(?:/lts)?/(v0|v0/"
+      "amp-[a-z0-9-]*-[a-z0-9.]*)\\.js");
+  attr->set_mandatory(true);
+}
+
+// For every tagspec that contains an ExtensionSpec, we add several TagSpec
+// fields corresponding to the data found in the ExtensionSpec.
+void ParsedValidatorRules::ExpandExtensionSpec(ValidatorRules* rules) const {
+  vector<TagSpec> new_tagspecs;
+  for (int ii = 0; ii < rules->tags_size(); ++ii) {
+    TagSpec* tagspec = rules->mutable_tags(ii);
+    if (!tagspec->has_extension_spec()) continue;
+    const ExtensionSpec& extension_spec = tagspec->extension_spec();
+    std::string base_spec_name = extension_spec.name();
+    if (extension_spec.has_version_name())
+      base_spec_name =
+          StrCat(extension_spec.name(), " ", extension_spec.version_name());
+    if (!tagspec->has_spec_name())
+      tagspec->set_spec_name(StrCat(base_spec_name, " extension script"));
+    if (!tagspec->has_descriptive_name())
+      tagspec->set_descriptive_name(tagspec->spec_name());
+    tagspec->set_mandatory_parent("HEAD");
+
+    if (extension_spec.deprecated_allow_duplicates()) {
+      tagspec->set_unique_warning(true);
+    } else {
+      tagspec->set_unique(true);
+    }
+
+    // Disallow any contents in the script cdata.
+    tagspec->mutable_cdata()->set_whitespace_only(true);
+
+    // TODO(b/173803451): allow module/nomodule tagspecs.
+    if (GetFlag(FLAGS_allow_module_nomodule)) {
+      // Add module/nomodule tagspecs for AMP ExtensionSpec tagspecs.
+      const auto& html_formats = tagspec->html_format();
+      if (std::find(html_formats.begin(), html_formats.end(),
+                    HtmlFormat::AMP) != html_formats.end()) {
+        TagSpec basic_tagspec = *tagspec;
+        basic_tagspec.clear_html_format();
+        basic_tagspec.add_html_format(HtmlFormat::AMP);
+        basic_tagspec.clear_enabled_by();
+        basic_tagspec.add_enabled_by("transformed");
+
+        // Expand module script tagspec.
+        TagSpec module_tagspec = basic_tagspec;
+        ExpandModuleExtensionSpec(&module_tagspec, base_spec_name);
+        new_tagspecs.push_back(module_tagspec);
+        // Expand nomodule script tagspec.
+        TagSpec nomodule_tagspec = basic_tagspec;
+        ExpandNomoduleExtensionSpec(&nomodule_tagspec, base_spec_name);
+        new_tagspecs.push_back(nomodule_tagspec);
+      }
+    }
+  }
+  // Add module and nomodule tagspecs.
+  for (TagSpec new_tagspec : new_tagspecs) {
+    rules->mutable_tags()->Add(std::move(new_tagspec));
+  }
+}
+
+// True iff tagspec's html_format matches the validator html_format.
+bool ParsedValidatorRules::IsTagSpecCorrectHtmlFormat(
+    const TagSpec& tagspec) const {
+  const auto& formats = tagspec.html_format();
+  return std::find(formats.begin(), formats.end(), html_format_) !=
+         formats.end();
+}
+
+// True iff `spec`'s html_format matches the validator html_format.
+bool ParsedValidatorRules::IsDocSpecCorrectHtmlFormat(
+    const DocSpec& spec) const {
+  const auto& formats = spec.html_format();
+  return std::find(formats.begin(), formats.end(), html_format_) !=
+         formats.end();
+}
+
+// True iff `spec`'s html_format matches the validator html_format.
+bool ParsedValidatorRules::IsDocCssSpecCorrectHtmlFormat(
+    const DocCssSpec& spec) const {
+  const auto& formats = spec.html_format();
+  return std::find(formats.begin(), formats.end(), html_format_) !=
+         formats.end();
+}
+
+Status ParsedValidatorRules::status() const { return status_; }
+
+const ParsedTagSpec* ParsedValidatorRules::GetAuthorStylesheetTagSpec() const {
+  const TagSpecDispatch& tagspec_dispatch = DispatchForTagName("STYLE");
+  if (tagspec_dispatch.empty()) return nullptr;
+  for (int32_t tag_id : tagspec_dispatch.AllTagSpecs()) {
+    const ParsedTagSpec* parsed_tag_spec = GetTagSpec(tag_id);
+    if (parsed_tag_spec->spec().named_id() == TagSpec::STYLE_AMP_CUSTOM)
+      return parsed_tag_spec;
+  }
+  return nullptr;
+}
+
+// Validates type identifiers within a set of attributes, adding
+// ValidationErrors as necessary, and sets type identifiers on
+// ValidationResult.type_identifier.
+void ParsedValidatorRules::ValidateTypeIdentifiers(
+    const ParsedHtmlTag& html_tag,
+    const vector<TypeIdentifier> format_identifiers, Context* context,
+    ValidationResult* result) const {
+  CHECK_NE(0, format_identifiers.size());
+  bool has_mandatory_type_identifier = false;
+  bool has_email_type_identifier = false;
+  bool has_css_strict_type_identifier = false;
+  // The named values should match up to `self` and AMP caches listed at
+  // https://cdn.ampproject.org/caches.json
+  static LazyRE2 transformed_value_regex = {"^(bing|google|self);v=(\\d+)$"};
+  for (const ParsedHtmlTagAttr& attr : html_tag.Attributes()) {
+    // Verify this attribute is a type identifier. Other attributes are
+    // validated in ValidateAttributes.
+    if (IsTypeIdentifier(attr.name())) {
+      TypeIdentifier type_identifier = GetTypeIdentifier(attr.name());
+      // Verify this type identifier is allowed for this format.
+      if (c_find(format_identifiers, type_identifier) !=
+          format_identifiers.end()) {
+        // Only add a type identifier once even if there are more than one
+        // representation (e.g.  "⚡" and "amp" in the same doc).
+        if (c_find(result->type_identifier(),
+                   TypeIdentifierToString(type_identifier)) ==
+            result->type_identifier().end()) {
+          result->add_type_identifier(TypeIdentifierToString(type_identifier));
+          context->RecordTypeIdentifier(type_identifier);
+        }
+        // These type identifiers are not considered mandatory unlike
+        // other type identifiers.
+        if (type_identifier != TypeIdentifier::kTransformed &&
+            type_identifier != TypeIdentifier::kDevMode &&
+            type_identifier != TypeIdentifier::kCssStrict)
+          has_mandatory_type_identifier = true;
+        // The type identifier "transformed" has restrictions on its value.
+        if (type_identifier == TypeIdentifier::kTransformed) {
+          std::string name;
+          std::string version;
+          if (RE2::FullMatch(attr.value(), *transformed_value_regex, &name,
+                             &version)) {
+            int32_t transformer_version;
+            if (absl::SimpleAtoi(version, &transformer_version)) {
+              result->set_transformer_version(transformer_version);
+            }
+          } else {
+            context->AddError(ValidationError::INVALID_ATTR_VALUE,
+                              context->line_col(),
+                              /*params=*/{attr.name(), "html", attr.value()},
+                              "https://amp.dev/documentation/"
+                              "guides-and-tutorials/learn/spec/"
+                              "amphtml#required-markup",
+                              result);
+          }
+        }
+        if (type_identifier == TypeIdentifier::kDevMode) {
+          // https://github.com/ampproject/amphtml/issues/20974
+          // We always emit an error for this type identifier, but it suppresses
+          // other errors later in the document.
+          context->AddError(ValidationError::DEV_MODE_ONLY, context->line_col(),
+                            /*params=*/{}, /*url*/ "", result);
+        }
+        if (type_identifier == TypeIdentifier::kEmail)
+          has_email_type_identifier = true;
+        if (type_identifier == TypeIdentifier::kCssStrict)
+          has_css_strict_type_identifier = true;
+      } else {
+        context->AddError(
+            ValidationError::DISALLOWED_ATTR, context->line_col(),
+            /*params=*/{attr.name(), "html"},
+            "https://amp.dev/documentation/guides-and-tutorials/learn/"
+            "spec/amphtml#required-markup",
+            result);
+      }
+    }
+  }
+  // If AMP Email format and not set to data-css-strict, then issue a warning
+  // that not having data-css-strict is deprecated. See b/179798751.
+  if (has_email_type_identifier && !has_css_strict_type_identifier) {
+    context->AddWarning(
+        ValidationError::AMP_EMAIL_MISSING_STRICT_CSS_ATTR, context->line_col(),
+        /*params=*/{},
+        /*spec_url=*/"https://github.com/ampproject/amphtml/issues/32587",
+        result);
+  }
+  if (!has_mandatory_type_identifier) {
+    // Missing mandatory type identifier (any AMP variant but "transformed").
+    context->AddError(
+        ValidationError::MANDATORY_ATTR_MISSING, context->line_col(),
+        /*params=*/
+        {TypeIdentifierToBoltString(format_identifiers[0]), "html"},
+        "https://amp.dev/documentation/guides-and-tutorials/learn/"
+        "spec/amphtml#required-markup",
+        result);
+    // The lack of a type_identifier indicates that this document isn't even
+    // trying to be AMP, so we will not keep trying to validate it beyond
+    // this error. Only trick is to make sure we don't exit early due to
+    // manufactured HTML tags.
+    if (!html_tag.IsManufacturedHtmlTag()) context->SetExitEarly();
+  }
+}
+
+// Validates the HTML tag for type identifiers.
+void ParsedValidatorRules::ValidateHtmlTag(const ParsedHtmlTag& html_tag,
+                                           Context* context,
+                                           ValidationResult* result) const {
+  CHECK_EQ(html_tag.UpperName(), "HTML")
+      << "Validating HTML Tag when not parsing an HTML Tag.";
+
+  switch (html_format_) {
+    case HtmlFormat::AMP:
+      ValidateTypeIdentifiers(
+          html_tag,
+          {TypeIdentifier::kAmp, TypeIdentifier::kTransformed,
+           TypeIdentifier::kDevMode},
+          context, result);
+      break;
+    case HtmlFormat::AMP4ADS:
+      ValidateTypeIdentifiers(html_tag,
+                              {TypeIdentifier::kAds, TypeIdentifier::kDevMode},
+                              context, result);
+      break;
+    case HtmlFormat::AMP4EMAIL:
+      ValidateTypeIdentifiers(html_tag,
+                              {TypeIdentifier::kEmail, TypeIdentifier::kDevMode,
+                               TypeIdentifier::kCssStrict},
+                              context, result);
+      break;
+    default:
+      // This should never happen as validator must be called with a valid
+      // HtmlFormat. Add error anyhow.
+      context->AddError(
+          ValidationError::MANDATORY_ATTR_MISSING, context->line_col(),
+          /*params=*/{"⚡, ⚡4ads, or ⚡4email", "html"},
+          "https://amp.dev/documentation/guides-and-tutorials/learn/"
+          "spec/amphtml#required-markup",
+          result);
+  }
+}
+
+// Call for HTMLParser to inform the validator that it is manufacturing a
+// <body> tag not actually found on the page. This will be followed by a
+// ValidateTag() with the actual body tag in question.
+void ParsedValidatorRules::ValidateManufacturedBody(
+    Context* context, ValidationResult* result) const {
+  context->AddError(ValidationError::DISALLOWED_MANUFACTURED_BODY,
+                    context->line_col(), /*params=*/{}, /*spec_url=*/"",
+                    result);
+}
+
+int32_t ParsedValidatorRules::Specificity(ValidationError::Code code) const {
+  return error_codes_[code].specificity;
+}
+
+// A helper function which allows us to compare two candidate results
+// in ParsedValidatorRules::ValidateTag to report the results which
+// have the most specific errors.
+int32_t ParsedValidatorRules::MaxSpecificity(
+    const RepeatedPtrField<ValidationError>& errors) const {
+  int32_t max_specificity = 0;
+  for (const ValidationError& error : errors) {
+    max_specificity = std::max(max_specificity, Specificity(error.code()));
+  }
+  return max_specificity;
+}
+
+namespace {
+bool BetterValidationResultStatusThan(ValidationResult::Status statusA,
+                                      ValidationResult::Status statusB) {
+  // Equal, so not better than.
+  if (statusA == statusB) return false;
+
+  // PASS > FAIL > UNKNOWN
+  if (statusA == ValidationResult::PASS) return true;
+  if (statusB == ValidationResult::PASS) return false;
+  if (statusA == ValidationResult::FAIL) return true;
+  CHECK_EQ(statusA, ValidationResult::UNKNOWN);
+  return false;  // statusA == UNKNOWN
+}
+
+// Returns true if the error codes in errorsB are a subset of the error codes in
+// errorsA.
+bool IsErrorSubset(const RepeatedPtrField<ValidationError>& errorsA,
+                   const RepeatedPtrField<ValidationError>& errorsB) {
+  set<ValidationError::Code> codesA;
+  for (const ValidationError& error : errorsA) codesA.insert(error.code());
+  set<ValidationError::Code> codesB;
+  for (const ValidationError& error : errorsB) codesB.insert(error.code());
+
+  // Every code in B is also in A. If they are the same, not a subset.
+  return absl::c_includes(codesA, codesB) && codesA.size() > codesB.size();
+}
+
+}  // namespace
+
+// Used for comparing ValidationResults for a single tag, produced by multiple
+// tag specs. We prefer passing, fewer, and more specific error messages.
+bool ParsedValidatorRules::BetterValidationResultThan(
+    const ValidationResult& resultA, const ValidationResult& resultB) const {
+  if (resultA.status() != resultB.status())
+    return BetterValidationResultStatusThan(resultA.status(), resultB.status());
+
+  // If one of the error sets by error.code is a subset of the other
+  // error set's error.codes, use the subset one. It's essentially saying, if
+  // you fix these errors that we both complain about, then you'd be passing
+  // for my tagspec, but not the other one, regardless of specificity.
+  if (IsErrorSubset(resultB.errors(), resultA.errors())) return true;
+  if (IsErrorSubset(resultA.errors(), resultB.errors())) return false;
+
+  // Prefer the most specific error found in either set.
+  if (MaxSpecificity(resultA.errors()) > MaxSpecificity(resultB.errors()))
+    return true;
+  if (MaxSpecificity(resultB.errors()) > MaxSpecificity(resultA.errors()))
+    return false;
+
+  // Prefer the attempt with the fewest errors, if the most specific errors
+  // are the same.
+  if (resultA.errors_size() < resultB.errors_size()) return true;
+  if (resultB.errors_size() < resultA.errors_size()) return false;
+
+  // Equal, so not better than.
+  return false;
+}
+
+// Emits errors for tags that are specified to be mandatory.
+void ParsedValidatorRules::MaybeEmitMandatoryTagValidationErrors(
+    Context* context, ValidationResult* result) const {
+  for (int32_t tag_spec_id : mandatory_tagspecs_) {
+    const ParsedTagSpec* parsed_tag_spec = GetTagSpec(tag_spec_id);
+    // Skip TagSpecs that aren't used for these type identifiers.
+    if (!parsed_tag_spec->IsUsedForTypeIdentifiers(context->type_identifiers()))
+      continue;
+    if (context->TagspecsValidated().count(tag_spec_id) == 0) {
+      const TagSpec& spec = parsed_tag_spec->spec();
+      context->AddError(ValidationError::MANDATORY_TAG_MISSING,
+                        context->line_col(), {TagDescriptiveName(spec)},
+                        TagSpecUrl(spec), result);
+      if (context->Progress(*result).complete) return;
+    }
+  }
+}
+
+// Returns true if one of the alternative_tag_spec_ids has been validated.
+bool ParsedValidatorRules::HasValidatedAlternativeTagSpec(
+    Context* context, const std::string& ext_name) const {
+  auto it = ext_tag_spec_ids_by_ext_name_.find(ext_name);
+  if (it != ext_tag_spec_ids_by_ext_name_.end()) {
+    for (int32_t alternative_tag_spec_id : it->second) {
+      if (context->TagspecsValidated().count(alternative_tag_spec_id) > 0)
+        return true;
+    }
+  }
+  return false;
+}
+
+// Emits errors for tags that specify that another tag is also required or
+// a condition is required to be satisfied.
+void ParsedValidatorRules::MaybeEmitRequiresOrExcludesValidationErrors(
+    Context* context, ValidationResult* result) const {
+  for (int32_t tag_spec_id : context->TagspecsValidated()) {
+    const ParsedTagSpec* parsed_tag_spec = GetTagSpec(tag_spec_id);
+    // Skip TagSpecs that aren't used for these type identifiers.
+    if (!parsed_tag_spec->IsUsedForTypeIdentifiers(context->type_identifiers()))
+      continue;
+    for (const std::string& condition : parsed_tag_spec->Requires()) {
+      if (context->ConditionsSatisfied().count(condition) == 0) {
+        context->AddError(
+            ValidationError::TAG_REQUIRED_BY_MISSING, context->line_col(),
+            /*params=*/{condition, TagDescriptiveName(parsed_tag_spec->spec())},
+            TagSpecUrl(*parsed_tag_spec), result);
+        if (context->Progress(*result).complete) return;
+      }
+    }
+    for (const std::string& condition : parsed_tag_spec->Excludes()) {
+      if (context->ConditionsSatisfied().count(condition) > 0) {
+        context->AddError(
+            ValidationError::TAG_EXCLUDED_BY_TAG, context->line_col(),
+            /*params=*/{TagDescriptiveName(parsed_tag_spec->spec()), condition},
+            TagSpecUrl(*parsed_tag_spec), result);
+        if (context->Progress(*result).complete) return;
+      }
+    }
+    for (int32_t tag_spec_id : parsed_tag_spec->AlsoRequiresTagWarnings()) {
+      if (context->TagspecsValidated().count(tag_spec_id) == 0) {
+        const ParsedTagSpec* also_requires_tagspec = GetTagSpec(tag_spec_id);
+        // If there is an alternative tagspec for extension script tagspecs
+        // that has been validated, then move on to the next
+        // also_requires_tag_warning.
+        if (also_requires_tagspec->spec().has_extension_spec() &&
+            HasValidatedAlternativeTagSpec(
+                context, also_requires_tagspec->spec().extension_spec().name()))
+          continue;
+        context->AddWarning(ValidationError::WARNING_TAG_REQUIRED_BY_MISSING,
+                            context->line_col(),
+                            /*params=*/
+                            {TagDescriptiveName(also_requires_tagspec->spec()),
+                             TagDescriptiveName(parsed_tag_spec->spec())},
+                            TagSpecUrl(*parsed_tag_spec), result);
+        if (context->Progress(*result).complete) return;
+      }
+    }
+  }
+
+  ExtensionsContext* extensions_ctx = context->mutable_extensions();
+  vector<std::string> unused_required =
+      extensions_ctx->UnusedExtensionsRequired();
+  for (const std::string& unused_extension_name : unused_required) {
+    context->AddError(ValidationError::EXTENSION_UNUSED, context->line_col(),
+                      /*params=*/{unused_extension_name},
+                      /*spec_url=*/"", result);
+    if (context->Progress(*result).complete) return;
+  }
+}
+
+// Emits errors for tags that are specified as mandatory alternatives.
+void ParsedValidatorRules::MaybeEmitMandatoryAlternativesSatisfiedErrors(
+    Context* context, ValidationResult* result) const {
+  const set<std::string>& mandatory_alternatives_satisfied =
+      context->MandatoryAlternativesSatisfied();
+  std::map<std::string, std::string> spec_url_by_mandatory_alternatives;
+  for (const TagSpec& spec : rules_.tags()) {
+    if (!spec.has_mandatory_alternatives()) continue;
+    if (mandatory_alternatives_satisfied.count(spec.mandatory_alternatives()) ==
+        0) {
+      spec_url_by_mandatory_alternatives[spec.mandatory_alternatives()] =
+          TagSpecUrl(spec);
+    }
+  }
+  for (const auto& entry : spec_url_by_mandatory_alternatives) {
+    context->AddError(ValidationError::MANDATORY_TAG_MISSING,
+                      context->line_col(),
+                      /*params=*/{entry.first},
+                      /*spec_url*/ entry.second, result);
+    if (context->Progress(*result).complete) return;
+  }
+}
+
+// Emits errors for doc size limitations across entire document.
+void ParsedValidatorRules::MaybeEmitDocSizeErrors(
+    Context* context, ValidationResult* result) const {
+  if (auto maybe_doc_spec = context->MatchingDocSpec(); maybe_doc_spec) {
+    const ParsedDocSpec& doc_spec = **maybe_doc_spec;
+    const int32_t bytes_used = context->doc_byte_size();
+    if (doc_spec.spec().has_max_bytes() && doc_spec.spec().max_bytes() != -2 &&
+        bytes_used > doc_spec.spec().max_bytes()) {
+      context->AddError(
+          ValidationError::DOCUMENT_SIZE_LIMIT_EXCEEDED, context->line_col(),
+          /*params=*/
+          {StrCat(doc_spec.spec().max_bytes()), StrCat(bytes_used)},
+          /*spec_url=*/doc_spec.spec().max_bytes_spec_url(), result);
+    }
+  }
+}
+
+// Emits errors for css size limitations across entire document.
+void ParsedValidatorRules::MaybeEmitCssLengthErrors(
+    Context* context, ValidationResult* result) const {
+  const int32_t bytes_used =
+      context->inline_style_byte_size() + context->style_tag_byte_size();
+
+  if (auto maybe_doc_css_spec = context->MatchingDocCssSpec();
+      maybe_doc_css_spec) {
+    const ParsedDocCssSpec& doc_css_spec = **maybe_doc_css_spec;
+    if (doc_css_spec.spec().has_max_bytes() &&
+        bytes_used > doc_css_spec.spec().max_bytes()) {
+      if (doc_css_spec.spec().max_bytes_is_warning()) {
+        context->AddWarning(
+            ValidationError::STYLESHEET_AND_INLINE_STYLE_TOO_LONG,
+            context->line_col(),
+            /*params=*/
+            {StrCat(bytes_used), StrCat(doc_css_spec.spec().max_bytes())},
+            /*spec_url=*/doc_css_spec.spec().max_bytes_spec_url(), result);
+      } else {
+        context->AddError(
+            ValidationError::STYLESHEET_AND_INLINE_STYLE_TOO_LONG,
+            context->line_col(),
+            /*params=*/
+            {StrCat(bytes_used), StrCat(doc_css_spec.spec().max_bytes())},
+            /*spec_url=*/doc_css_spec.spec().max_bytes_spec_url(), result);
+      }
+    }
+  }
+}
+
+// Emits errors for mismatch between add_value_to_set (provisions) and
+// value_oneof_set (requirements).
+void ParsedValidatorRules::MaybeEmitValueSetMismatchErrors(
+    Context* context, ValidationResult* result) const {
+  const auto& provided = context->value_sets_provided();
+  for (const auto& requirement : context->value_sets_required()) {
+    if (provided.find(requirement.first) == provided.end()) {
+      for (const auto& error : requirement.second)
+        context->AddError(error, result);
+    }
+  }
+}
+
+// Emits any validation errors which require a global view
+// (mandatory tags, tags required by other tags, mandatory alternatives).
+void ParsedValidatorRules::MaybeEmitGlobalTagValidationErrors(
+    Context* context, ValidationResult* result) const {
+  if (context->Progress(*result).complete) return;
+  MaybeEmitMandatoryTagValidationErrors(context, result);
+  if (context->Progress(*result).complete) return;
+  MaybeEmitRequiresOrExcludesValidationErrors(context, result);
+  if (context->Progress(*result).complete) return;
+  MaybeEmitMandatoryAlternativesSatisfiedErrors(context, result);
+  if (context->Progress(*result).complete) return;
+  MaybeEmitDocSizeErrors(context, result);
+  if (context->Progress(*result).complete) return;
+  MaybeEmitCssLengthErrors(context, result);
+  if (context->Progress(*result).complete) return;
+  MaybeEmitValueSetMismatchErrors(context, result);
+}
+
+// The htmlparser requires that we register a handler for each tag
+// for which we'd like to see CDATA - those are called the "intertags".
+// In our case, it's simply the rules which specify the
+// TagSpec::mandatory_cdata field.
+const set<std::string>& ParsedValidatorRules::IntertagsToValidate() const {
+  return tags_with_cdata_;
+}
+
+// Validates the provided |encountered_tag| with respect to a single tag spec.
+ValidateTagResult ValidateTagAgainstSpec(
+    const ParsedTagSpec& parsed_tag_spec,
+    const ParsedTagSpec* best_match_reference_point, const Context& context,
+    const ParsedHtmlTag& encountered_tag) {
+  ValidateTagResult attempt;
+  attempt.validation_result.set_status(ValidationResult::PASS);
+  ValidateParentTag(parsed_tag_spec, context, &attempt.validation_result);
+  ValidateAncestorTags(parsed_tag_spec, context, &attempt.validation_result);
+  // Some parent tag specs also define allowed child tag names for the first
+  // child or all children. Validate that we aren't violating any of those
+  // rules either.
+  context.tag_stack().MatchChildTagName(encountered_tag, context,
+                                        &attempt.validation_result);
+  // Only validate attributes if we haven't yet found any errors. The
+  // Parent/Ancestor errors are informative without adding additional errors
+  // about attributes.
+  if (attempt.validation_result.status() == ValidationResult::PASS) {
+    ValidateAttributes(parsed_tag_spec, best_match_reference_point, context,
+                       encountered_tag, &attempt);
+  }
+  // Only validate that this is a valid descendant if it's not already invalid.
+  if (attempt.validation_result.status() == ValidationResult::PASS) {
+    ValidateDescendantTags(encountered_tag, parsed_tag_spec, context,
+                           &attempt.validation_result);
+  }
+  ValidateNoSiblingsAllowedTags(encountered_tag, parsed_tag_spec, context,
+                                &attempt.validation_result);
+  ValidateLastChildTags(context, &attempt.validation_result);
+  // If we haven't reached the body element yet, we may not have seen the
+  // necessary extension. That case is handled elsewhere.
+  if (context.tag_stack().HasAncestor("BODY")) {
+    ValidateRequiredExtensions(parsed_tag_spec, context,
+                               &attempt.validation_result);
+  }
+  // Only validate uniqueness if we haven't yet found any errors, as it's
+  // likely that this is not the correct tagspec if we have.
+  if (attempt.validation_result.status() == ValidationResult::PASS) {
+    ValidateUniqueness(parsed_tag_spec, context, &attempt.validation_result);
+  }
+
+  // Append some warnings, only if no errors.
+  if (attempt.validation_result.status() == ValidationResult::PASS) {
+    const TagSpec& tag_spec = parsed_tag_spec.spec();
+    if (tag_spec.has_deprecation()) {
+      context.AddWarning(
+          ValidationError::DEPRECATED_TAG, context.line_col(),
+          /*params=*/{TagDescriptiveName(tag_spec), tag_spec.deprecation()},
+          tag_spec.deprecation_url(), &attempt.validation_result);
+    }
+    if (tag_spec.unique_warning() &&
+        context.TagspecsValidated().count(parsed_tag_spec.id())) {
+      context.AddWarning(ValidationError::DUPLICATE_UNIQUE_TAG_WARNING,
+                         context.line_col(),
+                         /*params=*/{TagDescriptiveName(tag_spec)},
+                         TagSpecUrl(tag_spec), &attempt.validation_result);
+    }
+  }
+  return attempt;
+}
+
+// Validates the provided |encountered_tag| with respect to the tag
+// specifications in the validator's rules, returning a ValidationResult
+// with errors for this tag and a PASS or FAIL status. At least one
+// specification must validate, or the result/ will have status FAIL.
+// Also passes back a reference to the tag spec which matched, if a match
+// was found.
+// Context is not mutated; instead, pending mutations are stored in the return
+// value, and are merged only if the tag spec is applied (pending some reference
+// point stuff).
+ValidateTagResult ValidateTag(const ParsedHtmlTag& encountered_tag,
+                              const ParsedTagSpec* best_match_reference_point,
+                              const Context& context) {
+  const TagSpecDispatch& tagspec_dispatch =
+      context.rules().DispatchForTagName(encountered_tag.UpperName());
+  // Filter TagSpecDispatch.AllTagSpecs by type identifiers.
+  vector<const ParsedTagSpec*> filtered_tag_specs;
+  for (int32_t tag_id : tagspec_dispatch.AllTagSpecs()) {
+    const ParsedTagSpec* parsed_tag_spec = context.rules().GetTagSpec(tag_id);
+    // Keep TagSpecs that are used for these type identifiers.
+    if (parsed_tag_spec->IsUsedForTypeIdentifiers(context.type_identifiers()))
+      filtered_tag_specs.push_back(parsed_tag_spec);
+  }
+  // If there are no dispatch keys matching the tag name, ex: tag name is
+  // "foo", set a disallowed tag error.
+  if (!tagspec_dispatch.HasDispatchKeys() && filtered_tag_specs.empty()) {
+    std::string spec_url;
+    // Special case the spec_url for font tags to be slightly more useful.
+    if (encountered_tag.LowerName() == "font")
+      spec_url = context.rules().styles_spec_url();
+    ValidateTagResult ret;
+    context.AddError(ValidationError::DISALLOWED_TAG, context.line_col(),
+                     /*params=*/{encountered_tag.LowerName()}, spec_url,
+                     &ret.validation_result);
+    return ret;
+  }
+  // At this point, we have dispatch keys, tagspecs, or both.
+  // The strategy is to look for a matching dispatch key first. A matching
+  // dispatch key does not guarantee that the dispatched tagspec will also
+  // match. If we find a matching dispatch key, we immediately return the
+  // result for that tagspec, success or fail.
+  // If we don't find a matching dispatch key, we must try all of the
+  // tagspecs to see if any of them match. If there are no tagspecs, we want
+  // to return a GENERAL_DISALLOWED_TAG error.
+  //
+  // Calling HasDispatchKeys here is only an optimization to skip the loop
+  // over encountered attributes in the case where we have no dispatches.
+  if (tagspec_dispatch.HasDispatchKeys()) {
+    for (const ParsedHtmlTagAttr& attr : encountered_tag.Attributes()) {
+      vector<int32_t> tag_spec_ids = tagspec_dispatch.MatchingDispatchKey(
+          attr.name(),
+          // Attribute values are case-sensitive by default, but we
+          // match dispatch keys in a case-insensitive manner and then
+          // validate using whatever the tagspec requests.
+          AsciiStrToLower(attr.value()), context.tag_stack().ParentTagName());
+      ValidateTagResult ret;
+      for (int32_t tag_spec_id : tag_spec_ids) {
+        const ParsedTagSpec* parsed_tag_spec =
+            context.rules().GetTagSpec(tag_spec_id);
+        // Skip TagSpecs that aren't used for these type identifiers.
+        if (!parsed_tag_spec->IsUsedForTypeIdentifiers(
+                context.type_identifiers()))
+          continue;
+        ValidateTagResult attempt =
+            ValidateTagAgainstSpec(*parsed_tag_spec, best_match_reference_point,
+                                   context, encountered_tag);
+        if (context.rules().BetterValidationResultThan(
+                attempt.validation_result, ret.validation_result)) {
+          attempt.best_match_tag_spec = parsed_tag_spec;
+          ret = std::move(attempt);
+          // Exit early on success
+          if (ret.IsPassing()) return ret;
+        }
+      }
+      if (ret.validation_result.status() != ValidationResult::UNKNOWN)
+        return ret;
+    }
+  }
+
+  // None of the dispatch tagspecs matched and passed. If there are no
+  // non-dispatch tagspecs, consider this a 'generally' disallowed tag,
+  // which gives an error that reads "tag foo is disallowed except in
+  // specific forms".
+  if (filtered_tag_specs.empty()) {
+    ValidateTagResult ret;
+    if (encountered_tag.LowerName() == "script") {
+      // Special case for <script> tags to produce better error messages.
+      context.AddError(ValidationError::DISALLOWED_SCRIPT_TAG,
+                       context.line_col(),
+                       /*params=*/{}, context.rules().rules().script_spec_url(),
+                       &ret.validation_result);
+    } else {
+      context.AddError(ValidationError::GENERAL_DISALLOWED_TAG,
+                       context.line_col(),
+                       /*params=*/{encountered_tag.LowerName()},
+                       /*spec_url=*/"", &ret.validation_result);
+    }
+    return ret;
+  }
+  // Validate against all remaining tagspecs. Each tagspec will produce a
+  // different set of errors. Even if none of them match, we only want to
+  // return errors from a single tagspec, not all of them. We keep around
+  // the 'best' attempt until we have found a matching TagSpec or have
+  // tried them all.
+  ValidateTagResult ret;
+  for (const ParsedTagSpec* parsed_tag_spec : filtered_tag_specs) {
+    ValidateTagResult attempt = ValidateTagAgainstSpec(
+        *parsed_tag_spec, best_match_reference_point, context, encountered_tag);
+    if (context.rules().BetterValidationResultThan(attempt.validation_result,
+                                                   ret.validation_result)) {
+      attempt.best_match_tag_spec = parsed_tag_spec;
+      ret = std::move(attempt);
+      // Exit early on success
+      if (ret.IsPassing()) return ret;
+    }
+  }
+  return ret;
+}
+
+ValidateTagResult ReferencePointMatcher::ValidateTag(
+    const ParsedHtmlTag& encountered_tag, const Context& context) const {
+  // Look for a matching reference point, if we find one, record and exit.
+  ValidateTagResult result_for_best_attempt;
+  for (const ParsedReferencePoint& p : *parsed_reference_points_) {
+    const ParsedTagSpec* parsed_tag_spec =
+        parsed_rules_->GetTagSpec(p.tag_spec_id);
+    // Skip TagSpecs that aren't used for these type identifiers.
+    if (!parsed_tag_spec->IsUsedForTypeIdentifiers(context.type_identifiers()))
+      continue;
+    ValidateTagResult attempt = ValidateTagAgainstSpec(
+        *parsed_tag_spec, /*best_match_reference_point=*/nullptr, context,
+        encountered_tag);
+    if (context.rules().BetterValidationResultThan(
+            attempt.validation_result,
+            result_for_best_attempt.validation_result)) {
+      result_for_best_attempt = std::move(attempt);
+      if (result_for_best_attempt.IsPassing()) {
+        result_for_best_attempt.best_match_tag_spec = parsed_tag_spec;
+        return result_for_best_attempt;
+      }
+    }
+  }
+
+  // This check cannot fail as a successful validation above exits early.
+  CHECK_EQ(ValidationResult::FAIL,
+           result_for_best_attempt.validation_result.status())
+      << "Validating against spec when matching spec already found.";
+
+  // Special case: only one reference point defined - emit a singular
+  // error message *and* merge in the errors from the best attempt above.
+  if (parsed_reference_points_->size() == 1) {
+    context.AddError(
+        ValidationError::CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT_SINGULAR,
+        context.line_col(),
+        {encountered_tag.LowerName(),
+         parsed_reference_points_->parent_tag_spec_name(),
+         parsed_reference_points_->begin()->point->tag_spec_name()},
+        parsed_reference_points_->parent_spec_url(),
+        &result_for_best_attempt.validation_result);
+    return result_for_best_attempt;
+  }
+
+  // General case: more than one reference point defined. Emit a plural
+  // message with the acceptable reference points listed.
+  std::string acceptable;
+  for (const ParsedReferencePoint& p : *parsed_reference_points_) {
+    if (!acceptable.empty()) StrAppend(&acceptable, ", ");
+    StrAppend(&acceptable, p.point->tag_spec_name());
+  }
+  ValidateTagResult result_for_multiple_attempts;
+  context.AddError(
+      ValidationError::CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT,
+      context.line_col(),
+      {encountered_tag.LowerName(),
+       parsed_reference_points_->parent_tag_spec_name(), acceptable},
+      parsed_reference_points_->parent_spec_url(),
+      &result_for_multiple_attempts.validation_result);
+  return result_for_multiple_attempts;
+}
+
+void ReferencePointMatcher::RecordMatch(const ParsedTagSpec& reference_point) {
+  reference_points_matched_.push_back(reference_point.id());
+}
+
+void ReferencePointMatcher::ExitParentTag(const Context& context,
+                                          ValidationResult* result) const {
+  absl::node_hash_map<int32_t, int32_t> reference_point_by_count;
+  for (int32_t r : reference_points_matched_) ++reference_point_by_count[r];
+  for (const ParsedReferencePoint& p : *parsed_reference_points_) {
+    if (p.point->mandatory() && reference_point_by_count.find(p.tag_spec_id) ==
+                                    reference_point_by_count.end()) {
+      context.AddError(ValidationError::MANDATORY_REFERENCE_POINT_MISSING,
+                       line_col_,
+                       {p.point->tag_spec_name(),
+                        parsed_reference_points_->parent_tag_spec_name()},
+                       parsed_reference_points_->parent_spec_url(), result);
+    }
+    if (p.point->unique()) {
+      auto it = reference_point_by_count.find(p.tag_spec_id);
+      if (it != reference_point_by_count.end() && it->second != 1) {
+        context.AddError(ValidationError::DUPLICATE_REFERENCE_POINT, line_col_,
+                         {p.point->tag_spec_name(),
+                          parsed_reference_points_->parent_tag_spec_name()},
+                         parsed_reference_points_->parent_spec_url(), result);
+      }
+    }
+  }
+}
+
+// Makes Singleton ParsedValidatorRules non destructible.
+// TSAN throw race condition errors when ~ParsedValidatorRules destructor is
+// called.
+template <typename T>
+class NoDestructor {
+ public:
+  template <typename... Ts>
+  NoDestructor(Ts&&... args) : t_(new (&space_) T(std::forward<Ts>(args)...)) {}
+
+  const T* Get() const { return t_; }
+
+ private:
+  alignas(T) unsigned char space_[sizeof(T)];
+  const T* t_;
+};
+
+class ParsedValidatorRulesProvider {
+ public:
+  static const ParsedValidatorRules* Get(HtmlFormat::Code format) {
+    switch (format) {
+      case HtmlFormat::AMP4ADS: {
+        static const NoDestructor<ParsedValidatorRules> rules(
+            HtmlFormat::AMP4ADS);
+        return rules.Get();
+      }
+      case HtmlFormat::AMP4EMAIL: {
+        static const NoDestructor<ParsedValidatorRules> rules(
+            HtmlFormat::AMP4EMAIL);
+        return rules.Get();
+      }
+      default: {
+        static const NoDestructor<ParsedValidatorRules> rules(HtmlFormat::AMP);
+        return rules.Get();
+      }
+    }
+  }
+};
+
+class Validator {
+ public:
+  Validator(const ParsedValidatorRules* rules, int max_errors = -1)
+      : rules_(rules),
+        max_errors_(max_errors),
+        context_(rules_, max_errors_) {}
+
+  ValidationResult Validate(std::string_view html) {
+    Clear();
+    htmlparser::ParseOptions options{
+        .scripting = true,
+        .frameset_ok = true,
+        .record_node_offsets = true,
+        .record_attribute_offsets = true,
+    };
+    // The validation check for document size can't be done here since
+    // the Type Identifiers on the html tag have not been parsed yet and
+    // we wouldn't know which rule to apply. It's set to the context
+    // so that when those things are known it can be checked.
+    context_.SetDocByteSize(html.length());
+    auto parser = std::make_unique<htmlparser::Parser>(html, options);
+    auto doc = parser->Parse();
+    // Currently parser returns nullptr only if document is too complex.
+    // NOTE: If htmlparser starts returning null document for other reasons, we
+    // must add new error types here.
+    if (doc == nullptr) {
+      context_.AddError(ValidationError::DOCUMENT_TOO_COMPLEX, LineCol(1, 0),
+                        {}, "", &result_);
+      return result_;
+    }
+
+    parse_accounting_ = parser->Accounting();
+    if (GetFlag(FLAGS_duplicate_html_body_elements_is_error) &&
+        parse_accounting_.duplicate_body_elements &&
+        parse_accounting_.duplicate_body_element_location.has_value()) {
+      auto [line, col] =
+          parse_accounting_.duplicate_body_element_location.value();
+      context_.AddError(ValidationError::DUPLICATE_UNIQUE_TAG,
+                        LineCol(line, col), {"BODY"}, "", &result_);
+    }
+    if (GetFlag(FLAGS_duplicate_html_body_elements_is_error) &&
+        parse_accounting_.duplicate_html_elements &&
+        parse_accounting_.duplicate_html_element_location.has_value()) {
+      auto [line, col] =
+          parse_accounting_.duplicate_html_element_location.value();
+      context_.AddError(ValidationError::DUPLICATE_UNIQUE_TAG,
+                        LineCol(line, col), {"HTML"}, "", &result_);
+    }
+    UpdateLineColumnIndex(doc->RootNode());
+    ValidateNode(doc->RootNode());
+    auto [current_line_no, current_col_no] = parser->CurrentTokenizerPosition();
+    context_.SetLineCol(current_line_no, current_col_no > 0 ? current_col_no - 1
+                                                            : current_col_no);
+    EndDocument();
+    return result_;
+  }
+
+  // Updates context's line column index using the current node's position.
+  inline void UpdateLineColumnIndex(htmlparser::Node* node) {
+    auto node_line_col = node->PositionInHtmlSrc();
+    if (node_line_col.has_value()) {
+      auto [line_no, col_no] = node_line_col.value();
+      context_.SetLineCol(line_no >= 0 ? line_no : line_no + 1,
+                          col_no > 0 ? col_no - 1 : col_no);
+    }
+  }
+
+  // May return false if validation fails due to DOCUMENT_TOO_COMPLEX error.
+  bool ValidateNode(htmlparser::Node* node, int stack_size = 1) {
+    if (stack_size > GetFlag(FLAGS_max_node_recursion_depth)) {
+      context_.AddError(ValidationError::DOCUMENT_TOO_COMPLEX,
+                        context_.encountered_body_line_col(),
+                        /*params=*/{"BODY"},
+                        /*spec_url=*/"", &result_);
+      return false;
+    }
+
+    ParsedHtmlTag parsed_tag{node};
+
+    switch (node->Type()) {
+      case htmlparser::NodeType::ERROR_NODE:
+        // TODO: Set error here.
+        break;
+      case htmlparser::NodeType::DOCUMENT_NODE:
+        for (htmlparser::Node* c = node->FirstChild(); c;
+             c = c->NextSibling()) {
+          UpdateLineColumnIndex(c);
+          if (!ValidateNode(c, ++stack_size)) {
+            return false;
+          }
+          --stack_size;
+        }
+        return true;
+      case htmlparser::NodeType::COMMENT_NODE:
+        if (node->IsManufactured()) {
+          UpdateLineColumnIndex(node);
+          context_.AddError(ValidationError::DISALLOWED_TAG,
+                            LineCol(node->PositionInHtmlSrc()->first + 1,
+                                    node->PositionInHtmlSrc()->second),
+                            /*params=*/{"<?"}, /*spec_url=*/"", &result_);
+        }
+        return true;
+      case htmlparser::NodeType::DOCTYPE_NODE:
+        if (parse_accounting_.quirks_mode) {
+          LineCol linecol(1, 0);
+          auto lc = node->PositionInHtmlSrc();
+          if (lc.has_value()) {
+            auto [line, col] = lc.value();
+            linecol = LineCol(line, col > 0 ? col - 1 : col);
+          }
+          context_.AddError(ValidationError::INVALID_DOCTYPE_HTML, linecol,
+                            /*params=*/{},
+                            "https://amp.dev/documentation/"
+                            "guides-and-tutorials/start/create/basic_markup/",
+                            &result_);
+        }
+        // Process doctype node as if it is valid.
+        StartTag(parsed_tag);
+        return true;
+      case htmlparser::NodeType::ELEMENT_NODE:
+        break;
+      case htmlparser::NodeType::TEXT_NODE:
+        return true;
+      default:
+        return true;
+    }
+
+    StartTag(parsed_tag);
+    std::string upper_tag_name = AsciiStrToUpper(
+        htmlparser::AtomUtil::ToString(node->DataAtom(), node->Data()));
+
+    const auto& tags_with_cdata = rules_->IntertagsToValidate();
+    bool has_template_ancestor = context_.tag_stack().HasAncestor("TEMPLATE");
+    if (tags_with_cdata.find(upper_tag_name) != tags_with_cdata.end()) {
+      if (node->FirstChild() &&
+          node->FirstChild()->Type() == htmlparser::NodeType::TEXT_NODE) {
+        for (auto& attr : node->Attributes()) {
+          if (!has_template_ancestor &&
+              htmlparser::Strings::EqualFold(attr.key, "type") &&
+              (htmlparser::Strings::EqualFold(attr.value, "application/json") ||
+               htmlparser::Strings::EqualFold(attr.value,
+                                              "application/ld+json"))) {
+            if (auto v = htmlparser::json::JSONParser::Validate(
+                    node->FirstChild()->Data());
+                !v.first) {
+              std::pair<int, int> json_linecol{0, 0};
+              std::pair<int, int> script_linecol{0, 0};
+              if (auto pos = node->PositionInHtmlSrc(); pos.has_value()) {
+                script_linecol = {pos.value().first, pos.value().second};
+              }
+              if (auto pos = node->FirstChild()->PositionInHtmlSrc();
+                  pos.has_value()) {
+                json_linecol = {pos.value().first, pos.value().second};
+              }
+              context_.AddWarning(
+                  ValidationError::INVALID_JSON_CDATA,
+                  LineCol(script_linecol.first + v.second.first,
+                          // Combine both the html string column offset and the
+                          // json string column offset if the json string is
+                          // the first line.
+                          // Eg: <script>{"foo": error}... here column offset is
+                          // "<script>".size() + column number of json error.
+                          v.second.first == 0
+                              ? json_linecol.second + v.second.second - 1
+                              : v.second.second - 1),
+                  /*params=*/{},
+                  /*spec_url=*/"", &result_);
+            }
+          }
+        }
+        const CdataMatcher* cdata_matcher =
+            context_.tag_stack().cdata_matcher();
+        if (cdata_matcher) {
+          cdata_matcher->Match(string_view(node->FirstChild()->Data().data(),
+                                           node->FirstChild()->Data().size()),
+                               &context_, &result_);
+        }
+      }
+    }
+
+    if (std::find(htmlparser::kVoidElements.begin(),
+                  htmlparser::kVoidElements.end(),
+                  node->DataAtom()) != htmlparser::kVoidElements.end()) {
+      stack_size--;
+      EndTag(upper_tag_name);
+      return true;
+    }
+
+    for (htmlparser::Node* c = node->FirstChild(); c;) {
+      auto next = c->NextSibling();
+      UpdateLineColumnIndex(c);
+      if (!ValidateNode(c, ++stack_size)) return false;
+      --stack_size;
+
+      // For user agents with scripting enabled (99% cases) noscript is parsed
+      // as text and ignored. That is noscript element contents are not
+      // evaluated or made part of the DOM.
+      // htmlparser parses AMP documents with the same behavior, i.e scripting
+      // enabled.
+      //
+      // To parse the content of noscript, reparse the noscript element contents
+      // and populate it in the DOM.
+      if (node->DataAtom() == htmlparser::Atom::NOSCRIPT &&
+          c->Type() == htmlparser::NodeType::TEXT_NODE) {
+        auto dummy_node = std::make_unique<htmlparser::Node>(
+            htmlparser::NodeType::ELEMENT_NODE, htmlparser::Atom::BODY);
+        auto doc = htmlparser::ParseFragment(c->Data(), dummy_node.get());
+        // Append all the nodes to the original <noscript> parent.
+        for (htmlparser::Node* cn : doc->FragmentNodes()) {
+          cn->UpdateChildNodesPositions(node);
+          UpdateLineColumnIndex(cn);
+          ValidateNode(cn, ++stack_size);
+          --stack_size;
+        }
+        node->RemoveChild(c);
+      }
+      c = next;
+    }
+
+    EndTag(AsciiStrToUpper(
+        htmlparser::AtomUtil::ToString(node->DataAtom(), node->Data())));
+    return true;
+  }
+
+  const ValidationResult& Result() const { return result_; }
+
+  // While the validator instance is tied forever to a given htmlparser
+  // and seemingly not reusable, the htmlparser can be used
+  // to parse multiple documents, so in case a new document arrives
+  // we clear out the state.
+  void Clear() {
+    result_.Clear();
+    context_ = Context(rules_, max_errors_);
+  }
+
+  // While parsing the document HEAD, we may accumulate errors which depend
+  // on seeing later extension <script> tags
+  void EmitMissingExtensionErrors() {
+    vector<ValidationError> errors =
+        context_.mutable_extensions()->MissingExtensionErrors();
+    for (int i = 0; i < errors.size(); ++i) {
+      context_.AddError(std::move(errors[i]), &result_);
+      if (context_.Progress(result_).complete) return;
+    }
+  }
+
+  void StartTag(const ParsedHtmlTag& encountered_tag) {
+    if (encountered_tag.UpperName() == "HTML")
+      rules_->ValidateHtmlTag(encountered_tag, &context_, &result_);
+
+    if (encountered_tag.IsManufacturedBodyTag())
+      rules_->ValidateManufacturedBody(&context_, &result_);
+
+    // Duplicate attribute names can cause validation failures.
+    if (auto duplicate_attribute = encountered_tag.HasDuplicateAttrs();
+        duplicate_attribute.has_value()) {
+      context_.AddWarning(ValidationError::DUPLICATE_ATTRIBUTE,
+                          context_.line_col(),
+                          {encountered_tag.LowerName(), *duplicate_attribute},
+                          /*spec_url=*/"", &result_);
+    }
+
+    if (encountered_tag.UpperName() == "BODY") {
+      EmitMissingExtensionErrors();
+      if (context_.Progress(result_).complete) return;
+      context_.RecordBodyTag(encountered_tag);
+    }
+
+    // If there is a reference point matcher on the stack, validate against
+    // that first.
+    ValidateTagResult result_for_reference_point;
+    ReferencePointMatcher* reference_point_matcher =
+        context_.mutable_tag_stack()->MutableParentReferencePointMatcher();
+    // We must match the reference point before the TagSpec, as otherwise we
+    // will end up with "unexplained" attributes during tagspec matching
+    // which the reference point takes care of.
+    if (reference_point_matcher) {
+      result_for_reference_point =
+          reference_point_matcher->ValidateTag(encountered_tag, context_);
+    }
+
+    // Validate against the set of tag specs.
+    ValidateTagResult result_for_tag =
+        ValidateTag(encountered_tag,
+                    result_for_reference_point.best_match_tag_spec, context_);
+    // Suppress errors in dev-mode.
+    result_for_tag.dev_mode_suppress =
+        ShouldSuppressDevModeErrors(encountered_tag, context_);
+    // Only merge in the reference point errors into the final result if the
+    // tag otherwise passes one of the TagSpecs. Otherwise, we end up with
+    // unnecessarily verbose errors.
+    if (reference_point_matcher &&
+        result_for_tag.validation_result.status() == ValidationResult::PASS &&
+        !result_for_tag.dev_mode_suppress) {
+      context_.MergeRespectingMaxErrors(
+          result_for_reference_point.validation_result, &result_);
+    }
+    CheckForReferencePointCollision(
+        result_for_reference_point.best_match_tag_spec,
+        result_for_tag.best_match_tag_spec, context_,
+        &result_for_tag.validation_result);
+    if (!result_for_tag.dev_mode_suppress)
+      context_.MergeRespectingMaxErrors(result_for_tag.validation_result,
+                                        &result_);
+
+    context_.UpdateFromTagResults(encountered_tag, result_for_reference_point,
+                                  result_for_tag);
+  }
+
+  void EndTag(const std::string& encountered_tag) {
+    context_.mutable_tag_stack()->ExitTag(encountered_tag, context_, &result_);
+  }
+
+  void EndDocument() {
+    if (context_.Progress(result_).complete) return;
+    // It's not clear whether the following is necessary as the htmlparser may
+    // close the tags automatically. But we do it anyway, for paranoia.
+    context_.mutable_tag_stack()->ExitRemainingTags(context_, &result_);
+    rules_->MaybeEmitGlobalTagValidationErrors(&context_, &result_);
+
+    if (result_.status() == ValidationResult::UNKNOWN)
+      result_.set_status(ValidationResult::PASS);
+
+    // b/168027048: Temporary workaround for rare parsing issue resulting in
+    // negative column numbers. Remove this loop after the issue is resolved.
+    for (auto it = result_.mutable_errors()->begin();
+         it != result_.mutable_errors()->end(); ++it) {
+      ValidationError& error = *it;
+      if (error.col() < 0) error.set_col(0);
+    }
+
+    // As some errors can be inserted out of order, sort errors at the
+    // end based on their line/col numbers.
+    std::stable_sort(
+        result_.mutable_errors()->begin(), result_.mutable_errors()->end(),
+        [](const ValidationError& lhs, const ValidationError& rhs) {
+          if (lhs.line() != rhs.line()) return lhs.line() < rhs.line();
+          return lhs.col() < rhs.col();
+        });
+  }
+
+ private:
+  const ParsedValidatorRules* rules_;
+  int max_errors_ = -1;
+  Context context_;
+  htmlparser::ParseAccounting parse_accounting_;
+  ValidationResult result_;
+  Validator(const Validator&) = delete;
+  Validator& operator=(const Validator&) = delete;
+};
+
+}  // namespace
+
+ValidationResult Validate(std::string_view html, HtmlFormat_Code html_format,
+                          int max_errors) {
+  Validator validator(ParsedValidatorRulesProvider::Get(html_format),
+                      max_errors);
+  return validator.Validate(html);
+}
+
+}  // namespace amp::validator
diff --git a/validator/cpp/engine/validator.h b/validator/cpp/engine/validator.h
new file mode 100644
index 0000000000000..7dd9dd3623f01
--- /dev/null
+++ b/validator/cpp/engine/validator.h
@@ -0,0 +1,54 @@
+//
+// Copyright 2020 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.
+//
+// AMP Validator client library to validate if given html is a valid AMP
+// document.
+//
+// Usage:
+//   - Familiarize with ValidationResult fields in validator.proto.
+//
+//   - For AMP html:
+//     auto result = amp::validator::Validate(my_html,
+//                       amp::validator::HtmlFormat::AMP);
+//
+//   - For other AMP html formats:
+//     auto result = amp::validator::Validate(my_email_html,
+//                       amp::validator::HtmlFormat::AMP4_EMAIL);
+//
+//   - To limit the number of errors, provide the extra optional parameter.
+//     auto result = amp::validator::Validate(my_html,
+//                       amp::validator::HtmlFormat::AMP, 10);
+//
+//     Above call will return upto 10 errors only.
+//
+//   - See scripts/basic_validator_example.cc for a working example.
+
+#ifndef AMPVALIDATOR__VALIDATOR_H_
+#define AMPVALIDATOR__VALIDATOR_H_
+
+#include "validator.pb.h"
+
+namespace amp::validator {
+
+ValidationResult Validate(std::string_view html,
+                          HtmlFormat_Code html_format = HtmlFormat::AMP,
+                          int max_errors = -1);
+
+int RulesSpecVersion();
+int ValidatorVersion();
+
+}  // namespace amp::validator
+
+#endif  // AMPVALIDATOR__VALIDATOR_H_
diff --git a/validator/cpp/engine/validator_test.cc b/validator/cpp/engine/validator_test.cc
new file mode 100644
index 0000000000000..2c965a2c769d4
--- /dev/null
+++ b/validator/cpp/engine/validator_test.cc
@@ -0,0 +1,1141 @@
+#include <filesystem>
+#include <fstream>
+#include <memory>
+
+#include "glog/logging.h"
+#include "validator_pb.h"
+#include "gtest/gtest.h"
+#include "absl/status/status.h"
+#include "absl/strings/cord.h"
+#include "absl/strings/escaping.h"
+#include "absl/strings/match.h"
+#include "absl/strings/str_cat.h"
+#include "absl/strings/str_join.h"
+#include "absl/strings/str_replace.h"
+#include "absl/strings/str_split.h"
+#include "testing-utils.h"
+#include "validator.h"
+#include "css/parse-css.pb.h"
+#include "validator.pb.h"
+
+using absl::StartsWith;
+using absl::StrAppend;
+using absl::StrCat;
+using absl::StrReplaceAll;
+using amp::validator::AtRuleSpec;
+using amp::validator::AttrList;
+using amp::validator::AttrSpec;
+using amp::validator::CdataSpec;
+using amp::validator::ErrorFormat;
+using amp::validator::ErrorSpecificity;
+using amp::validator::HtmlFormat;
+using amp::validator::PropertySpec;
+using amp::validator::PropertySpecList;
+using amp::validator::ReferencePoint;
+using amp::validator::TagSpec;
+using amp::validator::ValidationError;
+using amp::validator::ValidationResult;
+using amp::validator::ValidatorRules;
+using amp::validator::testing::TestCase;
+using amp::validator::testing::TestCases;
+using amp::validator::testing::RenderInlineResult;
+using amp::validator::testing::RenderResult;
+
+namespace fs = std::filesystem;
+
+namespace amp::validator {
+namespace {
+
+TestCase FindOrDie(std::map<std::string, TestCase> cases,
+                   std::string case_filename) {
+  auto iter = cases.find(case_filename);
+  CHECK(iter != cases.end()) << case_filename << " not found.";
+  return iter->second;
+}
+
+#define EXPECT_NULL(p) EXPECT_TRUE((p) == nullptr)
+#define EXPECT_NOT_NULL(p) EXPECT_FALSE((p) == nullptr)
+
+void MaybeGenerateFailuresFor(const std::string& actual,
+                              const std::string& expected,
+                              const std::string& test_case_output_file) {
+  if (actual == expected) return;
+  std::string out_file =
+      StrReplaceAll(test_case_output_file,
+                    {{"external/validator/testdata/", "validator/testdata/"},
+                     {"external/amphtml-extensions/", "extensions/"}});
+  ADD_FAILURE_AT(out_file.c_str(), 1)
+      << "Please use the following command to overwrite the output file by the "
+         "actual output of AMP validator.\n"
+      << "echo " << absl::Base64Escape(actual) << " | base64 --decode > "
+      << out_file;
+}
+
+TEST(ValidatorTest, Testdata_ValidatorTest_TestCases) {
+  for (const auto& entry : TestCases()) {
+    const TestCase& test_case = entry.second;
+    ValidationResult result = amp::validator::Validate(test_case.input_content,
+                                                       test_case.html_format);
+    std::string output;
+    output = RenderInlineResult(
+        /*filename=*/test_case.name, test_case.input_content, result);
+
+    MaybeGenerateFailuresFor(output, test_case.output_content,
+                             test_case.output_file);
+  }
+}
+
+std::string FirstNLines(const std::string& str, int n) {
+  std::vector<std::string> lines = absl::StrSplit(str, '\n');
+  lines.resize(n);
+  return StrCat(absl::StrJoin(lines, "\n"));
+}
+
+TEST(ValidatorTest, TestVariousMaxErrorsSettings) {
+  TestCase test_case =
+      FindOrDie(TestCases(), "feature_tests/several_errors.html");
+
+  // Recompute the expected output, only without inline rendering.
+  {
+    ValidationResult result = amp::validator::Validate(test_case.input_content,
+                                                       test_case.html_format);
+    test_case.output_content = RenderResult(
+        /*filename=*/test_case.name, result);
+  }
+
+  struct MaxErrorsAndOutput {
+    int32_t max_errors;
+    std::string output;
+  };
+
+  for (const auto& entry : std::vector<MaxErrorsAndOutput>{
+           {0, "FAIL"},
+           {1, FirstNLines(test_case.output_content, 2)},
+           {3, FirstNLines(test_case.output_content, 4)},
+           {7, FirstNLines(test_case.output_content, 8)},
+           {100, test_case.output_content},
+           {-1, test_case.output_content}}) {
+    ValidationResult result = amp::validator::Validate(test_case.input_content,
+                                                       test_case.html_format,
+                                                       entry.max_errors);
+    std::string output = RenderResult(
+        /*filename=*/test_case.name, result);
+    SCOPED_TRACE(StrCat("max_errors=", entry.max_errors));
+    MaybeGenerateFailuresFor(output, entry.output, test_case.name);
+  }
+}
+
+TEST(ValidatorTest, TestExitEarlyNotAmp) {
+  // This test looks at a non-amp page and sets a max-errors other than -1.
+  // This triggers early exit code when we encounter an html tag that doesn't
+  // have an AMP identifier in it, so we only get one output error even
+  // though there would normally be ~7 due to missing required elements.
+  TestCase test_case =
+      FindOrDie(TestCases(), "feature_tests/not_amp.html");
+  ValidationResult result = amp::validator::Validate(test_case.input_content,
+                                                     test_case.html_format,
+                                                     100000000);
+
+  EXPECT_EQ(1, result.errors_size());
+  EXPECT_EQ(ValidationResult::FAIL, result.status());
+}
+
+TEST(ValidatorTest, TestExitEarlyManufacturedHtml) {
+  // This test is similar to TestExitEarlyNotAmp above, except checks that
+  // the exit early path doesn't occur if the HTML tag is manufactured,
+  // instead of explicit.
+  TestCase test_case =
+      FindOrDie(TestCases(), "feature_tests/unprintable_chars.html");
+  ValidationResult result = amp::validator::Validate(test_case.input_content,
+                                                     test_case.html_format,
+                                                     100000000);
+  EXPECT_GT(result.errors_size(), 1);
+  EXPECT_EQ(ValidationResult::FAIL, result.status());
+}
+
+TEST(ValidatorTest, TestValidationResultTransformerVersion) {
+  TestCase test_case = FindOrDie(
+      TestCases(), "transformed_feature_tests/minimum_valid_amp.html");
+  ValidationResult result = amp::validator::Validate(test_case.input_content,
+                                                     test_case.html_format);
+  EXPECT_EQ(result.transformer_version(), 1);
+}
+
+std::string RepeatString(const std::string& blob, int n_times) {
+  std::string output;
+  for (int i = 0; i < n_times; ++i) StrAppend(&output, blob);
+  return output;
+}
+
+std::string TestWithDocSize(absl::string_view test_content,
+                            absl::string_view body) {
+  return StrReplaceAll(test_content, {{"replace_body", body}});
+}
+
+TEST(ValidatorTest, TestDocSizeAmpEmail) {
+  const TestCase& test_case =
+      FindOrDie(TestCases(), "amp4email_feature_tests/doc_size.html");
+
+  // We use a blob of length 20 (both bytes and chars) to make it easy to
+  // construct body of any length that we want. Note that the minimally valid
+  // AMP4EMAIL test case used here is 1100 bytes. Take that into account when
+  // changing the thresholds.
+  const std::string valid_body_content = "<b>Hello, World</b>\n";
+  ASSERT_EQ(20, valid_body_content.length());
+
+  // 200000 bytes in the tested document.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[MaxBytesTest]");
+    std::string body = RepeatString(valid_body_content, /*n_times=*/9944);
+    std::string test_html = TestWithDocSize(test_case.input_content, body);
+    EXPECT_EQ(200000, test_html.length());
+    EXPECT_EQ(
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL).status(),
+        ValidationResult::PASS)
+        << "test case " << test_case_name;
+  }
+
+  // 200001 bytes in the tested document.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[OffByOneTest]");
+    std::string body =
+        StrCat(RepeatString(valid_body_content, /*n_times=*/9944), " ");
+    std::string test_html = TestWithDocSize(test_case.input_content, body);
+    EXPECT_EQ(200001, test_html.length());
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":9977:6 "
+        "Document exceeded 200000 bytes limit. Actual size 200001 bytes. "
+        "(see https://amp.dev/documentation/guides-and-tutorials/learn/"
+        "email-spec/amp-email-format/?format=email)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+}
+
+std::string TestWithScript(const std::string& test_content,
+                           const std::string& inline_script) {
+  return StrReplaceAll(test_content,
+                       {{"replace_inline_script", inline_script}});
+}
+
+TEST(ValidatorTest, TestScriptLengthAmp) {
+  const TestCase& test_case =
+      FindOrDie(TestCases(), "feature_tests/inline_script_length.html");
+  const std::string test_template = test_case.input_content;
+
+  // This string is 10 bytes of inline script.
+  const std::string inline_10_bytes = "alert('');";
+  ASSERT_EQ(10, inline_10_bytes.length());
+
+  // 10000 bytes of inline script.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[MaxBytesInlineTest]");
+    std::string inline_script = RepeatString(inline_10_bytes, /*n_times=*/1000);
+    EXPECT_EQ(10000, inline_script.length());
+    std::string test_html =
+        TestWithScript(test_case.input_content, inline_script);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = "PASS";
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 10001 bytes of inline script.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[OffByOneInlineTest]");
+    std::string inline_script =
+        StrCat(RepeatString(inline_10_bytes, /*n_times=*/1000), " ");
+    EXPECT_EQ(10001, inline_script.length());
+    std::string test_html =
+        TestWithScript(test_case.input_content, inline_script);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":35:2 The inline script is 10001 bytes, which exceeds the limit of "
+        "10000 bytes. (see https://amp.dev/documentation/components/"
+        "amp-script/#faq)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+}
+
+std::string TestWithCSS(const std::string& test_content,
+                        const std::string& stylesheet,
+                        const std::string& inline_style) {
+  return StrReplaceAll(StrReplaceAll(test_content,
+                                     {{".replace_amp_custom {}",
+                                       stylesheet}}),
+                       {{"replace_inline_style", inline_style}});
+}
+
+TEST(ValidatorTest, TestCssLengthAmp) {
+  const TestCase& test_case =
+      FindOrDie(TestCases(), "feature_tests/css_length.html");
+  const std::string test_template = test_case.input_content;
+
+  // We use a blob of length 10 (both bytes and chars) to make it easy to
+  // construct stylesheets of any length that we want.
+  const std::string valid_style_blob = "h1{top:0}\n";
+  ASSERT_EQ(10, valid_style_blob.length());
+  // This string is 10 bytes of inline style inside a B tag.
+  const std::string inline_10_bytes = "<b style='width:1px;'></b>";
+
+  // 75000 bytes in the author stylesheet and 0 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[MaxBytesTest]");
+    std::string stylesheet = RepeatString(valid_style_blob, /*n_times=*/7500);
+    EXPECT_EQ(75000, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = "PASS";
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 75001 bytes in the author stylesheet and 0 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[OffByOneTest]");
+    std::string stylesheet =
+        StrCat(RepeatString(valid_style_blob, /*n_times=*/7500), " ");
+    EXPECT_EQ(75001, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":28:2 The author stylesheet specified in tag 'style amp-custom' is "
+        "too long - document contains 75001 bytes whereas the limit is 75000 "
+        "bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/"
+        "spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 75002 bytes, but 74999 characters in stylesheet and 0 bytes inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[UTF8Test]");
+    std::string stylesheet =
+        StrCat(RepeatString(valid_style_blob, /*n_times=*/7499), "h1{top:😺}");
+    EXPECT_EQ(75002, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":28:2 The author stylesheet specified in tag 'style amp-custom' is "
+        "too long - document contains 75002 bytes whereas the limit is 75000 "
+        "bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/"
+        "spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 75000 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[MaxBytesInlineTest]");
+    std::string inline_style = RepeatString(inline_10_bytes, /*n_times=*/7500);
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = "PASS";
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 75010 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[OffByOneInlineTest]");
+    std::string inline_style =
+        StrCat(RepeatString(inline_10_bytes, /*n_times=*/7501), " ");
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":36:6 The author stylesheet specified in tag 'style amp-custom' "
+        "and the combined inline styles is too large - document contains 75010 "
+        "bytes whereas the limit is 75000 bytes. (see https://amp.dev/"
+        "documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 75000 bytes in the author stylesheet and 10 bytes of inline style.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[CombinedMaxBytesTest]");
+    std::string stylesheet = RepeatString(valid_style_blob, /*n_times=*/7500);
+    EXPECT_EQ(75000, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, inline_10_bytes);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":7536:6 The author stylesheet specified in tag 'style amp-custom' "
+        "and the combined inline styles is too large - document contains 75010 "
+        "bytes whereas the limit is 75000 bytes. (see https://amp.dev/"
+        "documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 1000 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[AllowedInlineTest]");
+    std::string inline_style = StrCat(
+        "<b style='", RepeatString("width:1px;", /*n_times=*/100), "'></b>");
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = "PASS";
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 1001 bytes of single inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[AllowedInlineTest2]");
+    std::string inline_style =
+        StrCat("<div style='", RepeatString("width:1px;", /*n_times=*/100), " ",
+               "'></b>");
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output =
+        StrCat("FAIL\n", test_case_name,
+               ":34:2 The inline style specified in tag 'div' is too long - "
+               "it contains 1001 bytes whereas the limit is 1000 bytes. "
+               "(see https://amp.dev/documentation/guides-and-tutorials/learn/"
+               "spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+}
+
+TEST(ValidatorTest, TestCssLengthAmpEmail) {
+  const TestCase& test_case =
+      FindOrDie(TestCases(), "amp4email_feature_tests/css_length.html");
+  const std::string test_template = test_case.input_content;
+
+  // We use a blob of length 10 (both bytes and chars) to make it easy to
+  // construct stylesheets of any length that we want.
+  const std::string valid_style_blob = "h1{top:0}\n";
+  ASSERT_EQ(10, valid_style_blob.length());
+  // This string is 10 bytes of inline style inside a B tag.
+  const std::string inline_10_bytes = "<b style='width:1px;'></b>";
+
+  // 75000 bytes in the author stylesheet and 0 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[MaxBytesTest]");
+    std::string stylesheet = RepeatString(valid_style_blob, /*n_times=*/7500);
+    EXPECT_EQ(75000, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    std::string expected_output = StrCat(
+        "PASS\n", test_case_name,
+        ":23:0 Tag 'html' marked with attribute 'amp4email' is missing the "
+        "corresponding attribute 'data-css-strict' for enabling strict "
+        "CSS validation. This may become an error in the future. "
+        "(see https://github.com/ampproject/amphtml/issues/32587)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 75001 bytes in the author stylesheet and 0 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[OffByOneTest]");
+    std::string stylesheet =
+        StrCat(RepeatString(valid_style_blob, /*n_times=*/7500), " ");
+    EXPECT_EQ(75001, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":23:0 Tag 'html' marked with attribute 'amp4email' is missing the "
+        "corresponding attribute 'data-css-strict' for enabling strict "
+        "CSS validation. This may become an error in the future. "
+        "(see https://github.com/ampproject/amphtml/issues/32587)\n",
+        test_case_name,
+        ":28:2 The author stylesheet specified in tag 'style amp-custom' "
+        "is too long - document contains 75001 bytes whereas the "
+        "limit is 75000 "
+        "bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/"
+        "spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 75000 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[MaxBytesInlineTest]");
+    std::string inline_style = RepeatString(inline_10_bytes, /*n_times=*/7500);
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    std::string expected_output = StrCat(
+        "PASS\n", test_case_name,
+        ":23:0 Tag 'html' marked with attribute 'amp4email' is missing the "
+        "corresponding attribute 'data-css-strict' for enabling strict "
+        "CSS validation. This may become an error in the future. "
+        "(see https://github.com/ampproject/amphtml/issues/32587)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 75010 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[OffByOneInlineTest]");
+    std::string inline_style =
+        StrCat(RepeatString(inline_10_bytes, /*n_times=*/7501), " ");
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    // TODO(b/153099987): This should not pass as we have more than 75,000 bytes
+    // of inline style. Right now, it is a warning until we have sorted out how
+    // to make the transition.
+    std::string expected_output = StrCat(
+        "PASS\n", test_case_name,
+        ":23:0 Tag 'html' marked with attribute 'amp4email' is missing the "
+        "corresponding attribute 'data-css-strict' for enabling strict "
+        "CSS validation. This may become an error in the future. "
+        "(see https://github.com/ampproject/amphtml/issues/32587)\n",
+        test_case_name,
+        ":34:6 The author stylesheet specified in tag 'style amp-custom' "
+        "and the combined inline styles is too large - document contains 75010 "
+        "bytes whereas the limit is 75000 bytes. (see https://amp.dev/"
+        "documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 75000 bytes in the author stylesheet and 14 bytes of inline style.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[CombinedMaxBytesTest]");
+    std::string stylesheet = RepeatString(valid_style_blob, /*n_times=*/7500);
+    EXPECT_EQ(75000, stylesheet.length());
+    std::string test_html = TestWithCSS(test_case.input_content, stylesheet,
+                                        "<b style='display:block;'></b>");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    // TODO(b/153099987): This should not pass as we have more than 75,000 bytes
+    // of inline style. Right now, it is a warning until we have sorted out how
+    // to make the transition.
+    std::string expected_output = StrCat(
+        "PASS\n", test_case_name,
+        ":23:0 Tag 'html' marked with attribute 'amp4email' is missing the "
+        "corresponding attribute 'data-css-strict' for enabling strict "
+        "CSS validation. This may become an error in the future. "
+        "(see https://github.com/ampproject/amphtml/issues/32587)\n",
+        test_case_name,
+        ":7534:6 The author stylesheet specified in tag 'style amp-custom' "
+        "and the combined inline styles is too large - document contains 75014 "
+        "bytes whereas the limit is 75000 bytes. (see https://amp.dev/"
+        "documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 1000 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[AllowedInlineTest]");
+    std::string inline_style = StrCat(
+        "<b style='", RepeatString("width:1px;", /*n_times=*/100), "'></b>");
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    std::string expected_output = StrCat(
+        "PASS\n", test_case_name,
+        ":23:0 Tag 'html' marked with attribute 'amp4email' is missing the "
+        "corresponding attribute 'data-css-strict' for enabling strict "
+        "CSS validation. This may become an error in the future. "
+        "(see https://github.com/ampproject/amphtml/issues/32587)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 1001 bytes of single inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[AllowedInlineTest2]");
+    std::string inline_style =
+        StrCat("<div style='", RepeatString("width:1px;", /*n_times=*/100), " ",
+               "'></b>");
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    // TODO(b/153679479): Email per-inline-style limits are currently enforced
+    // only as a warning due to this bug until we sort out what the correct
+    // value should be.
+    std::string expected_output = StrCat(
+        "PASS\n", test_case_name,
+        ":23:0 Tag 'html' marked with attribute 'amp4email' is missing the "
+        "corresponding attribute 'data-css-strict' for enabling strict "
+        "CSS validation. This may become an error in the future. "
+        "(see https://github.com/ampproject/amphtml/issues/32587)\n",
+        test_case_name,
+        ":32:2 The inline style specified in tag 'div' is too long - it "
+        "contains 1001 bytes whereas the limit is 1000 bytes. (see "
+        "https://amp.dev/documentation/guides-and-tutorials/learn/spec/"
+        "amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+}
+
+TEST(ValidatorTest, TestCssLengthAmpEmailStrict) {
+  const TestCase& test_case = FindOrDie(
+      TestCases(), "amp4email_feature_tests/css_length_strict.html");
+  const std::string test_template = test_case.input_content;
+
+  // We use a blob of length 20 (both bytes and chars) to make it easy to
+  // construct stylesheets of any length that we want.
+  const std::string valid_style_blob = "h1 {color: hotpink}\n";
+  ASSERT_EQ(20, valid_style_blob.length());
+  // This string is 10 bytes of inline style inside a B tag.
+  const std::string inline_10_bytes = "<b style='width:1px;'></b>";
+
+  // 75000 bytes in the author stylesheet and 0 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[MaxBytesTest]");
+    std::string stylesheet = RepeatString(valid_style_blob, /*n_times=*/3750);
+    EXPECT_EQ(75000, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    std::string expected_output = "PASS";
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 75001 bytes in the author stylesheet and 0 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[OffByOneTest]");
+    std::string stylesheet =
+        StrCat(RepeatString(valid_style_blob, /*n_times=*/3750), " ");
+    EXPECT_EQ(75001, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":28:2 The author stylesheet specified in tag 'style amp-custom' "
+        "is too long - document contains 75001 bytes whereas the "
+        "limit is 75000 "
+        "bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/"
+        "spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 75000 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[MaxBytesInlineTest]");
+    std::string inline_style = RepeatString(inline_10_bytes, /*n_times=*/7500);
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    std::string expected_output = "PASS";
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 75010 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[OffByOneInlineTest]");
+    std::string inline_style = RepeatString(inline_10_bytes, /*n_times=*/7501);
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":34:6 The author stylesheet specified in tag 'style amp-custom' "
+        "and the combined inline styles is too large - document contains 75010 "
+        "bytes whereas the limit is 75000 bytes. (see https://amp.dev/"
+        "documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 75000 bytes in the author stylesheet and 14 bytes of inline style.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[CombinedMaxBytesTest]");
+    std::string stylesheet = RepeatString(valid_style_blob, /*n_times=*/3750);
+    EXPECT_EQ(75000, stylesheet.length());
+    std::string test_html = TestWithCSS(test_case.input_content, stylesheet,
+                                        "<b style='display:block;'></b>");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":3784:6 The author stylesheet specified in tag 'style amp-custom' "
+        "and the combined inline styles is too large - document contains 75014 "
+        "bytes whereas the limit is 75000 bytes. (see https://amp.dev/"
+        "documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 1000 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[AllowedInlineTest]");
+    std::string inline_style = StrCat(
+        "<b style='", RepeatString("width:1px;", /*n_times=*/100), "'></b>");
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    std::string expected_output = "PASS";
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 1001 bytes of single inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[AllowedInlineTest2]");
+    std::string inline_style =
+        StrCat("<div style='", RepeatString("width:1px;", /*n_times=*/100), " ",
+               "'></b>");
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4EMAIL));
+    std::string expected_output =
+        StrCat("FAIL\n", test_case_name,
+               ":32:2 The inline style specified in tag 'div' is too long - it "
+               "contains 1001 bytes whereas the limit is 1000 bytes. (see "
+               "https://amp.dev/documentation/guides-and-tutorials/learn/spec/"
+               "amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+}
+
+TEST(ValidatorTest, TestCssLengthAmpAds) {
+  const TestCase& test_case =
+      FindOrDie(TestCases(), "amp4ads_feature_tests/css_length.html");
+  const std::string test_template = test_case.input_content;
+
+  // We use a blob of length 10 (both bytes and chars) to make it easy to
+  // construct stylesheets of any length that we want.
+  const std::string valid_style_blob = "h1{top:0}\n";
+  ASSERT_EQ(10, valid_style_blob.length());
+  // This string is 10 bytes of inline style inside a B tag.
+  const std::string inline_10_bytes = "<b style='width:1px;'></b>";
+
+  // 20001 bytes in the author stylesheet and 0 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[OffByOneTest]");
+    std::string stylesheet =
+        StrCat(RepeatString(valid_style_blob, /*n_times=*/2000), " ");
+    EXPECT_EQ(20001, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4ADS));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":29:2 The author stylesheet specified in tag 'style amp-custom' "
+        "is too long - document contains 20001 bytes whereas the "
+        "limit is 20000 "
+        "bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/"
+        "spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 100,000 bytes of inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[MaxBytesInlineTest]");
+    std::string inline_style = RepeatString(inline_10_bytes, /*n_times=*/10000);
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4ADS));
+    std::string expected_output = "PASS";
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 20,000 bytes in the author stylesheet and 14 bytes of inline style.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[CombinedMaxBytesTest]");
+    std::string stylesheet = RepeatString(valid_style_blob, /*n_times=*/2000);
+    EXPECT_EQ(20000, stylesheet.length());
+    std::string test_html = TestWithCSS(test_case.input_content, stylesheet,
+                                        "<b style='display:block;'></b>");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4ADS));
+    std::string expected_output = "PASS";
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the author stylesheet and 2,000 bytes of single inline style.
+  {
+    std::string test_case_name = StrCat(test_case.name, "[AllowedInlineTest]");
+    std::string inline_style = StrCat(
+        "<b style='", RepeatString("width:1px;", /*n_times=*/200), "'></b>");
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html, HtmlFormat::AMP4ADS));
+    std::string expected_output = "PASS";
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+}
+
+// Similar to TestTransformedAmpCssLengthWithUrls, but for non-transformed AMP,
+// to show that behavior should differ from non-transformed in that URLs are not
+// counted towards the URL length, unless they are data: urls.
+TEST(ValidatorTest, TestCssLengthWithUrls) {
+  const TestCase& test_case =
+      FindOrDie(TestCases(), "feature_tests/css_length.html");
+  const std::string test_template = test_case.input_content;
+
+  // We use a blob of length 10 (both bytes and chars) to make it easy to
+  // construct stylesheets of any length that we want.
+  const std::string valid_style_blob = "h1{top:0}\n";
+  ASSERT_EQ(10, valid_style_blob.length());
+
+  // 75010 bytes in the author stylesheet, but includes a URL of 19 bytes.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[MaxBytesWithUrlTest]");
+    std::string url = "http://example.com/";
+    ASSERT_EQ(19, url.length());
+    std::string css_with_url = StrCat("a{b:url('", url, "')");
+    ASSERT_EQ(30, css_with_url.length());
+    std::string stylesheet =
+        StrCat(RepeatString(valid_style_blob, /*n_times=*/7498), css_with_url);
+    // 10 bytes over, 19 of which are the URL.
+    EXPECT_EQ(75010, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":28:2 The author stylesheet specified in tag 'style amp-custom' "
+        "is too long - document contains 75010 bytes whereas the limit is "
+        "75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/"
+        "learn/spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 75010 bytes in the stylesheet, but includes a relative URL of 19 bytes.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[MaxBytesRelativeUrlTest]");
+    std::string url = "a-relative-url.html";
+    ASSERT_EQ(19, url.length());
+    std::string css_with_url = StrCat("a{b:url('", url, "')");
+    ASSERT_EQ(30, css_with_url.length());
+    std::string stylesheet =
+        StrCat(RepeatString(valid_style_blob, /*n_times=*/7498), css_with_url);
+    // 10 bytes over, 19 of which are the URL.
+    EXPECT_EQ(75010, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":28:2 The author stylesheet specified in tag 'style amp-custom' "
+        "is too long - document contains 75010 bytes whereas the limit is "
+        "75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/"
+        "learn/spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 75010 bytes in the stylesheet, but includes a data URL of 19 bytes.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[MaxBytesDataUrlTest]");
+    std::string url = "data:nineteen-bytes";
+    ASSERT_EQ(19, url.length());
+    std::string css_with_url = StrCat("a{b:url('", url, "')");
+    ASSERT_EQ(30, css_with_url.length());
+    std::string stylesheet =
+        StrCat(RepeatString(valid_style_blob, /*n_times=*/7498), css_with_url);
+    // 10 bytes over, 19 of which are the URL.
+    EXPECT_EQ(75010, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":28:2 The author stylesheet specified in tag 'style amp-custom' is "
+        "too long - document contains 75010 bytes whereas the limit is 75000 "
+        "bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/"
+        "spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the stylesheet, 75009 bytes inline style with a relative URL.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[ExtraInlineBytesUrlTest]");
+    // This string is 33 bytes of inline style inside a B tag.
+    const std::string inline_33_bytes =
+        "<b style=\"color: url('a-relative-url.html')\"></b>";
+    // 2273 x 33 = 75009
+    std::string inline_style = RepeatString(inline_33_bytes, /*n_times=*/2273);
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":36:6 The author stylesheet specified in tag 'style amp-custom' "
+        "and the combined inline styles is too large - document contains 75009 "
+        "bytes whereas the limit is 75000 bytes. (see https://amp.dev/"
+        "documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)");
+
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the stylesheet, 75009 bytes inline style with a data URL.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[ExtraInlineBytesUrlTest]");
+    // This string is 33 bytes of inline style inside a B tag.
+    const std::string inline_33_bytes =
+        "<b style=\"color: url('data:nineteen-bytes')\"></b>";
+    // 2273 x 33 = 75009
+    std::string inline_style = RepeatString(inline_33_bytes, /*n_times=*/2273);
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":36:6 The author stylesheet specified in tag 'style amp-custom' "
+        "and the combined inline styles is too large - document contains 75009 "
+        "bytes whereas the limit is 75000 bytes. (see https://amp.dev/"
+        "documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+}
+
+TEST(ValidatorTest, TestTransformedAmpCssLengthWithUrls) {
+  const TestCase& test_case =
+      FindOrDie(TestCases(), "transformed_feature_tests/css_length.html");
+  const std::string test_template = test_case.input_content;
+
+  // We use a blob of length 10 (both bytes and chars) to make it easy to
+  // construct stylesheets of any length that we want.
+  const std::string valid_style_blob = "h1{top:0}\n";
+  ASSERT_EQ(10, valid_style_blob.length());
+
+  // 75010 bytes in the stylesheet, but includes an absolute URL of 19 bytes.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[MaxBytesWithUrlTest]");
+    std::string url = "http://example.com/";
+    ASSERT_EQ(19, url.length());
+    std::string css_with_url = StrCat("a{b:url('", url, "')");
+    ASSERT_EQ(30, css_with_url.length());
+    std::string stylesheet =
+        StrCat(RepeatString(valid_style_blob, /*n_times=*/7498), css_with_url);
+    // 10 bytes over, 19 of which are the URL.
+    EXPECT_EQ(75010, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = "PASS";
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 75010 bytes in stylesheet, but includes a relative URL of 19 bytes.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[MaxBytesRelativeUrlTest]");
+    std::string url = "a-relative-url.html";
+    ASSERT_EQ(19, url.length());
+    std::string css_with_url = StrCat("a{b:url('", url, "')");
+    ASSERT_EQ(30, css_with_url.length());
+    std::string stylesheet =
+        StrCat(RepeatString(valid_style_blob, /*n_times=*/7498), css_with_url);
+    // 10 bytes over, 19 of which are the URL.
+    EXPECT_EQ(75010, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = "PASS";
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 75010 bytes in the stylesheet, but includes a data URL of 19 bytes.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[MaxBytesDataUrlTest]");
+    std::string url = "data:nineteen-bytes";
+    ASSERT_EQ(19, url.length());
+    std::string css_with_url = StrCat("a{b:url('", url, "')");
+    ASSERT_EQ(30, css_with_url.length());
+    std::string stylesheet =
+        StrCat(RepeatString(valid_style_blob, /*n_times=*/7498), css_with_url);
+    // 10 bytes over, 19 of which are the URL.
+    EXPECT_EQ(75010, stylesheet.length());
+    std::string test_html =
+        TestWithCSS(test_case.input_content, stylesheet, "");
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":29:2 The author stylesheet specified in tag 'style amp-custom' "
+        "is too long - document contains 75010 bytes whereas "
+        "the limit is 75000 bytes. (see "
+        "https://amp.dev/documentation/guides-and-tutorials/learn/"
+        "spec/amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the stylesheet, 112530 bytes inline style with a relative URL.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[ExtraInlineBytesUrlTest]");
+    // This string is 33 bytes of inline style inside a B tag.
+    const std::string inline_33_bytes =
+        "<b style=\"color: url('a-relative-url.html')\"></b>";
+    // 3410 x 33 = 112530
+    std::string inline_style = RepeatString(inline_33_bytes, /*n_times=*/3510);
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = "PASS";
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+
+  // 0 bytes in the stylesheet, 112530 bytes inline style with a data URL.
+  {
+    std::string test_case_name =
+        StrCat(test_case.name, "[ExtraInlineBytesUrlTest]");
+    // This string is 33 bytes of inline style inside a B tag.
+    const std::string inline_33_bytes =
+        "<b style=\"color: url('data:nineteen-bytes')\"></b>";
+    // 3410 x 33 = 112530
+    std::string inline_style = RepeatString(inline_33_bytes, /*n_times=*/3410);
+    std::string test_html =
+        TestWithCSS(test_case.input_content, "", inline_style);
+    std::string output = RenderResult(
+        /*filename=*/test_case_name,
+        amp::validator::Validate(test_html));
+    std::string expected_output = StrCat(
+        "FAIL\n", test_case_name,
+        ":36:6 The author stylesheet specified in tag 'style amp-custom' "
+        "and the combined inline styles is too large - document contains "
+        "112530 bytes whereas the limit is 112500 bytes. (see "
+        "https://amp.dev/documentation/guides-and-tutorials/learn/spec/"
+        "amphtml/#maximum-size)");
+    EXPECT_EQ(expected_output, output) << "test case " << test_case_name;
+  }
+}
+
+TEST(ValidatorTest, ConsidersDifferentNewlines) {
+  // In this test, we are looking to see if the sequences '\n', '\r', and
+  // '\n\r' are all treated as a single newline. For our purposes we don't
+  // care about validation at all, only the line number. We'll inspect the
+  // first validation error to learn what it's line number is.
+  {
+    std::string test_html = "\ninvalid doc";
+    std::string output = RenderResult(
+        /*filename=*/"newline_test",
+        amp::validator::Validate(test_html));
+    EXPECT_TRUE(StartsWith(output, "FAIL\nnewline_test:1:0")) << output;
+  }
+  {
+    std::string test_html = "\rinvalid doc";
+    std::string output = RenderResult(
+        /*filename=*/"newline_test",
+        amp::validator::Validate(test_html));
+    EXPECT_TRUE(StartsWith(output, "FAIL\nnewline_test:1:0")) << output;
+  }
+  {
+    // Strangely the parse master will remove a leading \r\n from the document.
+    // This is a problem, but only a minor one hopefully. I don't know why this
+    // happens. To make this test still show what we want, I added a space
+    // before the newline which avoids this issue.
+    std::string test_html = " \r\ninvalid doc";
+    std::string output = RenderResult(
+        /*filename=*/"newline_test",
+        amp::validator::Validate(test_html));
+    EXPECT_TRUE(StartsWith(output, "FAIL\nnewline_test:1:1")) << output;
+  }
+}
+
+// This test is a precaution for if/when amp-access is added to amp4ads.
+// If amp-access is added for amp4ads then the reserializer also needs to be
+// updated to mark the JSON offsets for it as it currently doesn't do this.
+TEST(ValidatorTest, Amp4AdsAmpAccess) {
+  ValidatorRules rules;
+  CHECK(rules.ParseFromArray(
+      amp::validator::data::kValidatorProtoBytes,
+      amp::validator::data::kValidatorProtoBytesSize));
+  for (const TagSpec& tag_spec : rules.tags()) {
+    if ((tag_spec.tag_name() == "SCRIPT") &&
+        (tag_spec.spec_name() == "amp-access extension .json script")) {
+      for (const auto& html_format : tag_spec.html_format()) {
+        EXPECT_NE(html_format, HtmlFormat::AMP4ADS);
+      }
+    }
+  }
+}
+
+// This text uses `\xe2\x80\x90` as a hyphon in the amp-boilerplate attribute.
+// This renders as a hyphen glyph, but should not be treated as such.
+TEST(ValidatorTest, InvalidHyphenCharacter) {
+  const TestCase& test_case =
+      FindOrDie(TestCases(), "feature_tests/minimum_valid_amp.html");
+  std::string bad_html = StrReplaceAll(test_case.input_content,
+                {{"amp-boilerplate", "amp\xE2\x80\x90 boilerplate"}});
+  ValidationResult result = amp::validator::Validate(bad_html,
+                                                     HtmlFormat::AMP);
+  EXPECT_EQ(ValidationResult::FAIL, result.status());
+}
+
+}  // namespace
+}  // namespace amp::validator
diff --git a/validator/cpp/htmlparser/.bazelrc b/validator/cpp/htmlparser/.bazelrc
new file mode 100644
index 0000000000000..1ff0994ab912b
--- /dev/null
+++ b/validator/cpp/htmlparser/.bazelrc
@@ -0,0 +1,11 @@
+# Defaults to optimized build.
+build -c opt
+
+# Tested and compiles in llvm.
+build --repo_env=CC=clang
+
+# Contains c++17 features.
+build --cxxopt='-std=c++17'
+
+# Enabled operator new and operator delete for custom allocators.
+build --cxxopt='-fsized-deallocation'
diff --git a/validator/cpp/htmlparser/BUILD b/validator/cpp/htmlparser/BUILD
new file mode 100644
index 0000000000000..4a1ec5d28708d
--- /dev/null
+++ b/validator/cpp/htmlparser/BUILD
@@ -0,0 +1,520 @@
+load("@rules_cc//cc:defs.bzl", "cc_library", "cc_test")
+
+# Requirements:
+# clang with c++17 support.
+#
+# Usage:
+# To build the library, use the following bazel command:
+#
+# bazel build --repo_env=CC=clang --cxxopt='-std=c++17' <build_target>
+
+package(default_visibility = ["//visibility:public"])
+
+licenses(["notice"])
+
+exports_files(["LICENSE"])
+
+cc_library(
+    name = "allocator",
+    hdrs = [
+        "allocator.h",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "allocator_test",
+    srcs = [
+        "allocator_test.cc",
+    ],
+    deps = [
+        ":allocator",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+# An atom is a name in HTML source. Tag name, attribute names and namespaces.
+cc_library(
+    name = "atom",
+    hdrs = [
+        "atom.h",
+    ],
+    copts = ["-std=c++17"],
+)
+
+# Helper functions to convert string to Atom and vice versa.
+cc_library(
+    name = "atomutil",
+    srcs = [
+        "atomutil.cc",
+    ],
+    hdrs = [
+        "atomutil.h",
+    ],
+    deps = [
+        ":atom",
+        ":hash",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "atomutil_test",
+    srcs = [
+        "atomutil_test.cc",
+    ],
+    deps = [
+        ":atomutil",
+        ":hash",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+# Similar to go lang's defer statement. Defers the execution of statement
+# until in which it is decalred goes out of scope.
+cc_library(
+    name = "defer",
+    hdrs = [
+        "defer.h",
+    ],
+    copts = ["-std=c++17"],
+)
+
+# Helper library decalres various doctype constants and a utility function to
+# parse doctype string and extract various components in it.
+cc_library(
+    name = "doctype",
+    srcs = [
+        "doctype.cc",
+    ],
+    hdrs = [
+        "doctype.h",
+    ],
+    deps = [
+        ":node",
+        ":strings",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "doctype_test",
+    srcs = [
+        "doctype_test.cc",
+    ],
+    deps = [
+        ":doctype",
+        ":node",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+# Defines error type.
+cc_library(
+    name = "error",
+    srcs = [
+        "error.cc",
+    ],
+    hdrs = [
+        "error.h",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_library(
+    name = "comparators",
+    hdrs = [
+        "comparators.h",
+    ],
+    copts = ["-std=c++17"],
+)
+
+# File reading and parsing utility.
+cc_library(
+    name = "fileutil",
+    srcs = [
+        "fileutil.cc",
+    ],
+    hdrs = [
+        "fileutil.h",
+    ],
+    deps = [
+        ":defer",
+        ":strings",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "fileutil_test",
+    srcs = [
+        "fileutil_test.cc",
+    ],
+    deps = [
+        ":fileutil",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+# Foreign element constants that are in SVG and MathML namespaces.
+cc_library(
+    name = "foreign",
+    srcs = [
+        "foreign.cc",
+    ],
+    hdrs = [
+        "foreign.h",
+    ],
+    deps = [
+        ":comparators",
+        ":node",
+        ":strings",
+    ],
+    copts = ["-std=c++17"],
+)
+
+# Various hashing utility functions.
+cc_library(
+    name = "hash",
+    hdrs = [
+        "hash.h",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_library(
+    name = "logging",
+    hdrs = [
+        "logging.h",
+    ],
+    copts = ["-std=c++17"],
+)
+
+# Defines token type and token structures, used during tokenization.
+cc_library(
+    name = "token",
+    srcs = [
+        "token.cc",
+    ],
+    hdrs = [
+        "token.h",
+    ],
+    deps = [
+        ":atom",
+        ":strings",
+    ],
+    copts = ["-std=c++17"],
+)
+
+# Defines node and node stack.
+# A node represents a single html element/tag/attribute.
+cc_library(
+    name = "node",
+    srcs = [
+        "node.cc",
+    ],
+    hdrs = [
+        "elements.h",
+        "node.h",
+    ],
+    deps = [
+        ":atom",
+        ":atomutil",
+        ":error",
+        ":logging",
+        ":token",
+        "@com_github_glog//:glog",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "node_test",
+    srcs = [
+        "node_test.cc",
+    ],
+    deps = [
+        ":atom",
+        ":document",
+        ":node",
+        ":parser",
+        ":renderer",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+cc_library(
+    name = "htmlentities",
+    hdrs = [
+        "entity.h",
+    ],
+    deps = [
+        ":comparators",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "entity_test",
+    srcs = [
+        "entity_test.cc",
+    ],
+    deps = [
+        ":htmlentities",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+cc_library(
+    name = "document",
+    srcs = [
+        "document.cc",
+    ],
+    hdrs = [
+        "document.h",
+    ],
+    deps = [
+        ":allocator",
+        ":node",
+        ":token",
+        "@com_google_absl//absl/flags:flag",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_library(
+    name = "casetable",
+    hdrs = [
+        "casetable.h",
+    ],
+    deps = [
+        ":comparators",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "casetable_test",
+    srcs = [
+        "casetable_test.cc",
+    ],
+    deps = [
+        ":casetable",
+        ":strings",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+# Parser parses a given html source.
+cc_library(
+    name = "parser",
+    srcs = [
+        "parser.cc",
+    ],
+    hdrs = [
+        "parser.h",
+    ],
+    deps = [
+        ":atom",
+        ":atomutil",
+        ":comparators",
+        ":defer",
+        ":doctype",
+        ":document",
+        ":foreign",
+        ":logging",
+        ":node",
+        ":strings",
+        ":tokenizer",
+        "@com_google_absl//absl/base",
+        "@com_google_absl//absl/flags:flag",
+        "@com_github_glog//:glog",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "parser_test",
+    srcs = [
+        "parser_test.cc",
+    ],
+    deps = [
+        ":atom",
+        ":atomutil",
+        ":node",
+        ":parser",
+        ":renderer",
+        ":token",
+        "@com_google_absl//absl/flags:flag",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+# Renders a node tree to html string.
+cc_library(
+    name = "renderer",
+    srcs = [
+        "renderer.cc",
+    ],
+    hdrs = [
+        "renderer.h",
+    ],
+    deps = [
+        ":atomutil",
+        ":node",
+        ":strings",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "renderer_test",
+    srcs = [
+        "renderer_test.cc",
+    ],
+    deps = [
+        ":parser",
+        ":renderer",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+# String libraries.
+cc_library(
+    name = "whitespacetable",
+    hdrs = [
+        "whitespacetable.h",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_library(
+    name = "strings",
+    srcs = [
+        "strings.cc",
+    ],
+    hdrs = [
+        "strings.h",
+    ],
+    deps = [
+        ":casetable",
+        ":htmlentities",
+        ":logging",
+        ":whitespacetable",
+        "@com_google_absl//absl/base",
+        "@com_github_glog//:glog",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "strings_test",
+    srcs = [
+        "strings_test.cc",
+    ],
+    deps = [
+        ":strings",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+# Tokenizes html text.
+cc_library(
+    name = "tokenizer",
+    srcs = [
+        "tokenizer.cc",
+    ],
+    hdrs = [
+        "tokenizer.h",
+    ],
+    deps = [
+        ":atom",
+        ":atomutil",
+        ":defer",
+        ":strings",
+        ":token",
+        "@com_google_absl//absl/flags:flag",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "tokenizer_test",
+    srcs = [
+        "tokenizer_test.cc",
+    ],
+    deps = [
+        ":parser",
+        ":token",
+        ":tokenizer",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+cc_library(
+    name = "url",
+    srcs = [
+        "url.cc",
+    ],
+    hdrs = [
+        "url.h",
+    ],
+    deps = [
+        ":strings",
+    ],
+    copts = ["-std=c++17"],
+)
+
+cc_test(
+    name = "url_test",
+    srcs = [
+        "url_test.cc",
+    ],
+    deps = [
+        ":url",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+cc_library(
+    name = "testconstants",
+    hdrs = [
+        "testconstants.h",
+    ],
+    copts = ["-std=c++17"],
+)
+
+filegroup(
+    name = "go_test_files",
+    srcs = glob(["testdata/go/*.dat"]),
+)
+
+filegroup(
+    name = "html5lib_test_files",
+    srcs = glob(["testdata/tree-construction/*.dat",
+                 "testdata/tree-construction/scripted/*.dat"]),
+)
+
+cc_test(
+    name = "htmldataset_test",
+    srcs = [
+        "htmldataset_test.cc",
+    ],
+    data = [
+        ":go_test_files",
+        ":html5lib_test_files",
+    ],
+    deps = [
+        ":atom",
+        ":atomutil",
+        ":defer",
+        ":fileutil",
+        ":node",
+        ":parser",
+        ":renderer",
+        ":strings",
+        ":testconstants",
+        ":tokenizer",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
diff --git a/validator/cpp/htmlparser/CONTRIBUTING.md b/validator/cpp/htmlparser/CONTRIBUTING.md
new file mode 100644
index 0000000000000..8f2561a0a47e5
--- /dev/null
+++ b/validator/cpp/htmlparser/CONTRIBUTING.md
@@ -0,0 +1,28 @@
+# How to Contribute
+
+We'd love to accept your patches and contributions to this project. There are
+just a few small guidelines you need to follow.
+
+## Contributor License Agreement
+
+Contributions to this project must be accompanied by a Contributor License
+Agreement. You (or your employer) retain the copyright to your contribution;
+this simply gives us permission to use and redistribute your contributions as
+part of the project. Head over to <https://cla.developers.google.com/> to see
+your current agreements on file or to sign a new one.
+
+You generally only need to submit a CLA once, so if you've already submitted one
+(even if it was for a different project), you probably don't need to do it
+again.
+
+## Code reviews
+
+All submissions, including submissions by project members, require review. We
+use GitHub pull requests for this purpose. Consult
+[GitHub Help](https://help.github.com/articles/about-pull-requests/) for more
+information on using pull requests.
+
+## Community Guidelines
+
+By participating in this project, you agree to abide by the
+[AMP Code of Conduct](https://github.com/ampproject/meta/blob/main/CODE_OF_CONDUCT.md).
diff --git a/validator/cpp/htmlparser/LICENSE b/validator/cpp/htmlparser/LICENSE
new file mode 100644
index 0000000000000..d645695673349
--- /dev/null
+++ b/validator/cpp/htmlparser/LICENSE
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   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.
diff --git a/validator/cpp/htmlparser/README.md b/validator/cpp/htmlparser/README.md
new file mode 100644
index 0000000000000..8c96b30dbe1f9
--- /dev/null
+++ b/validator/cpp/htmlparser/README.md
@@ -0,0 +1,43 @@
+<!---
+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.
+-->
+
+# HTML Parser
+
+This is an HTML5 compliant parser written in C++. It was created to be used by
+the
+[AMPHTML Validator](https://github.com/ampproject/amphtml/tree/main/validator)
+to standardize how AMPHTML documents should be parsed for AMP validation.
+
+## Maintainers
+
+This parser is maintained by the [AMP Working Group](https://amp.dev/community/working-groups/amp4email/):
+[Caching](https://amp.dev/community/working-groups/caching/)
+
+## Current Status
+
+This parser is in active development and has several outstanding TODOs.
+These TODOs may cause certain parsing tests to fail. Those tests have been
+excluded until the TODOs are resolved. See htmldataset_test.cc for a list of
+those tests.
+
+## Building and Testing with Bazel
+
+This code requires C++17. When building with [Bazel](https://bazel.build/)
+please use the flag `--cxxopt='-std=c++17'`.
+
+For building, run: `bazel build --cxxopt='-std=c++17' parser`.
+
+For testing, run: `bazel test --cxxopt='-std=c++17' parser_test`.
diff --git a/validator/cpp/htmlparser/WORKSPACE b/validator/cpp/htmlparser/WORKSPACE
new file mode 100644
index 0000000000000..0d28f8a4e699c
--- /dev/null
+++ b/validator/cpp/htmlparser/WORKSPACE
@@ -0,0 +1,48 @@
+workspace(name = "htmlparser")
+
+load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
+
+http_archive(
+    name = "com_google_absl",
+    strip_prefix = "abseil-cpp-master",
+    urls = ["https://github.com/abseil/abseil-cpp/archive/master.zip"],
+)
+
+http_archive(
+    name = "com_google_googletest",
+    sha256 = "d3d307a240e129bb57da8aae64f3b0099bf1b8efff7249df993b619b8641ec77",
+    strip_prefix = "googletest-a3460d1aeeaa43fdf137a6adefef10ba0b59fe4b",
+    urls = ["https://github.com/google/googletest/archive/a3460d1aeeaa43fdf137a6adefef10ba0b59fe4b.zip"],  # 2019-01-07
+)
+
+http_archive(
+    name = "com_github_gflags_gflags",
+    strip_prefix = "gflags-master",
+    urls = ["https://github.com/gflags/gflags/archive/master.zip"],
+)
+
+http_archive(
+    name = "com_github_re2",
+    strip_prefix = "re2-master",
+    urls = ["https://github.com/google/re2/archive/master.zip"],
+)
+
+http_archive(
+    name = "com_github_glog",
+    strip_prefix = "glog-master",
+    urls = ["https://github.com/google/glog/archive/master.zip"],
+)
+
+http_archive(
+    name = "com_google_protobuf",
+    strip_prefix = "protobuf-master",
+    urls = ["https://github.com/protocolbuffers/protobuf/archive/master.zip"],
+)
+
+load("@com_google_protobuf//:protobuf_deps.bzl", "protobuf_deps")
+protobuf_deps()
+
+local_repository(
+    name = "validator",
+    path = "../../",
+)
diff --git a/validator/cpp/htmlparser/allocator.h b/validator/cpp/htmlparser/allocator.h
new file mode 100644
index 0000000000000..eb7dde616b747
--- /dev/null
+++ b/validator/cpp/htmlparser/allocator.h
@@ -0,0 +1,385 @@
+//
+// Copyright 2020 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.
+//
+
+// An average HTML DOM tree consists of hundreds or thousands of nodes and
+// their attributes. The malloc/new and free/delete are very expensive
+// operations for small objects and htmlparser spends majority of the time in
+// allocation and deallocation of these small objects.
+//
+// Usage:
+// One Allocator for each type. This approach simplifies the design and
+// alignment requirements of different types.
+//
+//     // Allocator for Node with 8k blocks, and 8 byte alignment boundary.
+//     Allocator<Node> node_allocator(8192);
+//
+//     // Allocator for Attributes with 4k blocks, and 1 byte alignment.
+//     Allocator<Attribute> attr_allocator(4096);
+//
+//     // Default block size.
+//     Allocator<Node> node_allocator;  // Block size = OS page_size.
+//
+// The allocator takes care of alignment requirements of the objects. The blocks
+// are always created in the multiples of page_size. For the following Allocator
+// the block size is upgraded to 4096 for 4k page_size or 8192 for 8k page_size.
+//
+//     Allocator<Node> node_allocator(3000);  // Block size = 4096.
+//
+// To construct the object:
+//   Node* node = node_allocator.Construct(NodeType::ELEMENT_NODE);
+//
+// The construct method supports varargs. Following forwards 4 parameters to the
+// AboutMe constructor.
+//   Allocator<AboutMe> alloc;
+//   AboutMe* name = alloc.Construct("John", "Doe", 94043, MALE);
+//
+// THREAD SAFETY: Allocator is not thread safe. Multiple threads cannot call
+// Allocate() simultaneously. In multi-threaded program a thread local allocator
+// per thread is recommended.
+//
+//
+// ---------------------------------------------------------------------------
+//                   Internals for code reviewers:
+// ---------------------------------------------------------------------------
+// The allocator maintains linked list of blocks of memory buffers for
+// allocation of small objects.  It allocates blocks on demand, one block at a
+// time.
+//
+// The block is always multiple of page size. It is rounded to nearest page size
+// multiple in case caller provided a different size which is not multiple of
+// page size. So a 3000 block size request becomes 4096 block and 5000 block
+// size request becomes 8192 block size respectively on a 4k page size kernel.
+//
+// The block_size is the only configurable parameter, and depends on three
+// fators: A) Object size, B) Number of objects and C) Alignment boundary.
+//
+//
+// Alignment requirements:
+// Every object type has a property called alignment requirement, which is an
+// integer value of type std::size_t representing the number of bytes  between
+// successive addresses at which objects of this type can be allocated.
+// The valid alignment values are non-negative integral powers of two.
+//
+// We call an object naturally aligned if its address is aligned to its size.
+// It's called misaligned otherwise. For example, an 8-byte floating-point data
+// is naturally aligned if the address used to identify it has an 8-byte
+// alignment.
+//
+// Following data struture contains members totaling 13 bytes, but it's actual
+// size is 24 bytes due to 8 byte alignment.
+//
+// Alignment is always equal to the largest sized element in the structure.
+//
+// struct {
+//   int32_t a;  // 4 bytes.
+//   int64_t b;  // 8 bytes.
+//   char c;     // 1 byte.
+// };
+//
+// The above data structure will be padded by compiler to satisfy alignment
+// requirement.
+// struct {
+//   int32_t a;     // 4 byte                                 0x0000
+//   char _pad[4];  // compiler added 8 byte padding.
+//   int64_t b;     // 8 byte (now at 8 byte alignment).      0x0008
+//   char c;        // 1 byte (also at 8 byte alignment).     0x0010
+//   char _pad[7]   // compiler added padding
+// };
+//
+// The same data structure if fields are re-organized will consume 16 bytes,
+// still at 8 byte alignment.
+// struct {
+//   int32_t a;     // 4 byte at 0x00000 (like above).        0x0000
+//   char c;        // 1 byte char.                           0x0001
+//   chr _pad[3]    // 3 bytes for 8 byte alignment.
+//   int64_t b;     // at 8 byte alignment.                   0x0010
+// };
+//
+// Allocator computes the alignment requirement of the Type and starts the block
+// at the address which is multiple of 8, and hence we say the block is aligned.
+//
+// +-------------------------------------------------------------------------+
+// | Address  |    Block 1  |  Address  |   Block 2  | Address  |  Block 3   |
+// +----------+-------------+-----------+------------+----------+------------+
+// |   10     |    waste    |   120     |    Obj22   |   164    |   waste    |
+// |   11     |    waste    |   121     |            |   165    |   waste    |
+// |   12     |    waste    |   122     |            |   166    |   waste    |
+// |   13     |    waste    |   123     |            |   167    |   waste    |
+// |   14     |    waste    |   124     |            |   168    |   Obj33    |
+// |   15     |    waste    |   125     |            |   169    |            |
+// |   16     |    Obj1     |   126     |            |   170    |            |
+// |   17     |             |   127     |            |   171    |            |
+// |   N      |             |   N       |            |   N      |            |
+// +-------------------------------------------------------------------------+
+//
+// In the above diagram there are three blocks with alignment of 8.
+//
+// Block one start address is 16 so 6 bytes are skipped (or wasted).
+// Block two start address is 120 since it is multiple of 8.
+// Block three start address is 68 causing 4 bytes to skip (or wasted).
+//
+// The block alignment is done by std::align or AlignFreeAddress method.
+//
+// The block is considered full when the remaining bytes are less than the
+// object size. So the remaining bytes in the block are skipped and new block
+// created. In our tests for 500 objects of 144 bytes and 4096 bytes block
+// about 1024 bytes wasted.
+//
+// Since objects size is always multiple of alignment, subsequent objects can be
+// allocated sequentially in the block. So if the object size is 96 bytes, the
+// second object in block 1 will be allocated 112 address in block 1.
+//
+// A block is allocated using operator new at the time of block initialization
+// and start address aligned. See NewBlock();
+//
+// A block is freed at the time of destruction of the allocator object.
+// The allocator takes complete ownership of the objects it allocates, client is
+// not responsible for deallocating or destroying the objects allocated by this
+// allocator. Allocator will call the destructors of the objects it allocated.
+// See ~Allocator() and Destroy() method.
+//
+// IMPORTANT: Tree like structure must not destroy the child nodes or sibling
+// nodes. Allocator destroys all the objects and call its destructor, it is an
+// error to invoke destructors on objects allocated by this allocator. Allocator
+// is the master owner of all the objects. Client treats all objects as const
+// pointer as far as destruction goes.
+//
+// It is not possible to destroy random objects or free up the slots to be
+// re-used for allocation of objects. This allocator is used for html parsing
+// which should free up the resources after document parsing. A singleton
+// allocator for example will keep growing unless Reset() is called upon each
+// new parsing.
+//
+// Bit shifting syntax used in this source:
+// A) To round the block size to nearest page size (4096) multiple:
+//    ((block_size - 1) | (page_size - 1) + 1.
+//    Examples:
+//    - block_size = 3000;
+//     (3000 - 1) | (4096 - 1) + 1 = 4096.
+//    - block_size = 5000;
+//     (5000 - 1) | (4096 - 1) + 1 = 8096.
+//
+// B) If N is multiple of A.
+//    (N & (A - 1)) == 0
+//    This can also be achieved by modulo operator N % A == 0.
+//    Examples:
+//    - 40 is multiple of 8?
+//     40 & (8 - 1) == 0;
+//    - 62 is multiple of 4?
+//     60 & (4 - 1) != 0;
+
+#ifndef HTMLPARSER__ALLOCATOR_H_
+#define HTMLPARSER__ALLOCATOR_H_
+
+#include <unistd.h>  // For getpagesize()
+
+#include <array>
+#include <cstring>
+#include <memory>
+#include <tuple>
+#include <vector>
+
+namespace htmlparser {
+
+template <class T>
+class Allocator {
+ public:
+  explicit Allocator(std::size_t block_size = 0) :
+    alignment_(std::alignment_of_v<T>),
+    // Rounds the block_size_ to page size multiple.
+    // 3000 becomes 4096 and 5000 becomes 8192 for 4k page size OS.
+    block_size_(
+        ((block_size < 1 ? 0 : block_size - 1) | (getpagesize() - 1)) + 1),
+    object_size_(sizeof(T)),
+    remaining_(0),
+    next_free_(nullptr),
+    blocks_allocated_(0),
+    block_(nullptr) {}
+
+  ~Allocator() {
+    FreeBlocks();
+  }
+
+  Allocator(const Allocator&) = delete;
+  Allocator& operator=(const Allocator&) = delete;
+
+  // Allocates memory of same size required to construct object of type T.
+  // Returns nullptr if alloction failed.
+  void* Allocate() {
+    // Checks if remaining bytes in block are less than object size, or
+    // reamining bytes after alignment is less than object size.
+    // Add a new block.
+    if (object_size_ > remaining_ || !AlignFreeAddress()) {
+      if (!NewBlock()) return nullptr;
+    }
+
+    // Get the address for object allocation.
+    last_alloc_ = next_free_;
+    remaining_ -= object_size_;
+    // Move the pointer for next object.
+    next_free_ += object_size_;
+    return static_cast<void*>(last_alloc_);
+  }
+
+  // Allocates memory and constructs the object.
+  // Returns nullptr if memory allocation failed.
+  template <typename ...Args>
+  T* Construct(Args&& ...args) {
+    void* mem = Allocate();
+    // New object or nullptr if memory allocation failed.
+    return mem ? new (mem) T(std::forward<Args>(args)...) : nullptr;
+  }
+
+  // Default constructor.
+  T* Construct() {
+    void* mem = Allocate();
+    return mem ? new (mem) T() : nullptr;
+  }
+
+  // Deallocates the blocks and restores the allocator for reuse.
+  void Reset() {
+    FreeBlocks();
+    next_free_ = nullptr;
+    remaining_ = 0;
+  }
+
+  // Used only by test or development environment.
+  std::tuple<int /*alignment*/,
+             int /*block_size*/,
+             int /*object_size*/,
+             unsigned char* /*last_alloc*/,
+             unsigned char* /*next_free*/,
+             std::size_t /*remaining*/,
+             uint32_t /*blocks_allocated*/> DebugInfo() const {
+    return {alignment_, block_size_, object_size_, last_alloc_, next_free_,
+      remaining_, blocks_allocated_};
+  }
+
+ private:
+  struct Block {
+    Block* previous;
+    void* buf;
+  };
+
+  // Deallocates the blocks.
+  void FreeBlocks() {
+    Block* current_block = block_;
+    bool partial = true;
+    while (current_block != nullptr) {
+      Block* previous = current_block->previous;
+      Destroy(current_block, partial);
+      partial = false;
+      FreeBlockMemory(current_block);
+      delete current_block;
+      blocks_allocated_--;
+      current_block = previous;
+    }
+  }
+
+  // Creates a new block.
+  bool NewBlock() {
+    Block* block = new Block;
+    block->previous = block_;
+    if (alignment_ <=  __STDCPP_DEFAULT_NEW_ALIGNMENT__) {
+      block->buf = ::operator new(block_size_);
+    } else {
+      block->buf = ::operator new(block_size_, std::align_val_t(alignment_));
+    }
+    std::memset(block->buf, 0, block_size_);
+    // Align the block to alignment boundary.
+    //
+    // The adjusted space may be lesser than block size.
+    std::size_t adjusted_space = block_size_;
+    if (alignment_ > 1) {
+      if (block->buf = std::align(alignment_, block_size_, block->buf,
+                                  adjusted_space);
+          block->buf == nullptr) {
+        // In case std::align fails, try manual alignment.
+        if (!AlignFreeAddress()) {
+          return false;
+        }
+      } else if (adjusted_space < object_size_) {
+        return false;
+      }
+    }
+
+    next_free_ = static_cast<unsigned char*>(block->buf);
+    remaining_ = adjusted_space;
+    blocks_allocated_++;
+    block_ = block;
+    return true;
+  }
+
+  void FreeBlockMemory(Block* block) {
+    if (alignment_ <= __STDCPP_DEFAULT_NEW_ALIGNMENT__) {
+      ::operator delete(block->buf, block_size_);
+      block->buf = nullptr;
+    } else {
+      ::operator delete(block->buf, block_size_, std::align_val_t(alignment_));
+      block->buf = nullptr;
+    }
+  }
+
+  // Destroys the T objects allocated and constructed using this block.
+  // If the block is only partially consumed, destroys only objects allocated
+  // in the partial space.
+  void Destroy(Block* block, bool partial_allocation = false) {
+    unsigned char* t_ptr = static_cast<unsigned char*>(block->buf);
+    unsigned char* block_end = t_ptr + block_size_;
+    std::size_t remaining = block_end - t_ptr;
+    // All offsets are aligned, so simply increment and destroy.
+    if ((object_size_ & (alignment_ - 1)) == 0) {
+      while (remaining >= object_size_) {
+        reinterpret_cast<T*>(t_ptr)->~T();
+        t_ptr += object_size_;
+        if (partial_allocation && t_ptr >= next_free_) {
+          return;
+        }
+        remaining -= object_size_;
+      }
+    }
+  }
+
+  // If the block's address is not aligned, moves the pointer to the address
+  // that is multiple of aligment_.
+  bool AlignFreeAddress() {
+    // Checks how many bytes to skip to be at the correct alignment.
+    if (const std::size_t skip =
+            reinterpret_cast<std::size_t>(next_free_) & (alignment_ - 1);
+        skip > 0) {
+      auto waste = remaining_ - skip;
+      if (waste >= remaining_) return false;
+      next_free_ += waste;
+      remaining_ -= waste;
+    }
+
+    return true;
+  }
+
+  const std::size_t alignment_;
+  const std::size_t block_size_;
+  const std::size_t object_size_;
+  std::size_t remaining_;
+  unsigned char* last_alloc_;
+  unsigned char* next_free_;
+  uint32_t blocks_allocated_;
+
+  Block* block_;
+};
+
+}  // namespace htmlparser
+
+#endif  // HTMLPARSER__ALLOCATOR_H_
diff --git a/validator/cpp/htmlparser/allocator_test.cc b/validator/cpp/htmlparser/allocator_test.cc
new file mode 100644
index 0000000000000..845da99c65290
--- /dev/null
+++ b/validator/cpp/htmlparser/allocator_test.cc
@@ -0,0 +1,223 @@
+//
+// Copyright 2020 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.
+//
+
+#include "allocator.h"
+
+#include "gtest/gtest.h"
+
+// Memory leaks will automatically be detected by the test framework.
+
+namespace htmlparser {
+
+TEST(AllocatorTest, BasicTest) {
+  struct Data {
+   public:
+    int32_t a;
+    int64_t b;
+    std::string c;
+    short d;
+    Data() {}
+    Data(int32_t a_, int64_t b_, std::string c_, short d_)
+        : a(a_), b(b_), c(c_), d(d_) {}
+  };
+
+  Allocator<Data> alloc(4096);
+  for (int i = 0; i < 1000; ++i) {
+    // With default constructor.
+    Data* d = alloc.Construct();
+    EXPECT_EQ(d->a, 0);
+    // With args.
+    Data* d2 = alloc.Construct(i, i * 2, "foo", 3);
+    EXPECT_EQ(d2->a, i);
+    EXPECT_EQ(d2->b, i * 2);
+    EXPECT_EQ(d2->c, "foo");
+    EXPECT_EQ(d2->d, 3);
+  }
+}
+
+TEST(AllocatorTest, AlignmentTest) {
+  // Two data structures of same size but different alignment.
+  // Size: 16, alignment 4.
+  struct DataA4 {
+   public:
+    int32_t a;
+    int32_t b;
+    int32_t c;
+    int32_t d;
+    DataA4(int32_t a_, int32_t b_, int32_t c_, int32_t d_)
+        : a(a_), b(b_), c(c_), d(d_) {}
+  };
+
+  // Size: 16, alignment 8.
+  struct DataA8 {
+   public:
+    int32_t a;
+    char b;
+    int64_t c;
+    DataA8(int32_t a_, int64_t c_, char b_) : a(a_), b(b_), c(c_) {}
+  };
+
+  // Size 4, alignment 1.
+  struct DataA1 {
+    char a;
+  };
+
+  // Default block size.
+  Allocator<DataA4> alloc4A(4096);
+  Allocator<DataA8> alloc8A(4096);
+  Allocator<DataA1> alloc1A(4096);
+  std::vector<const DataA4*> data4A;
+  std::vector<const DataA8*> data8A;
+  std::vector<DataA1*> data1A;
+  int s4 = sizeof(DataA4);
+  int s8 = sizeof(DataA8);
+  int s1 = sizeof(DataA1);
+  int al4 = alignof(DataA4);
+  int al8 = alignof(DataA8);
+  int al1 = alignof(DataA1);
+  EXPECT_EQ(al4, 4);
+  EXPECT_EQ(al8, 8);
+  EXPECT_EQ(al1, 1);
+  for (int i = 0; i < 1000; ++i) {
+    auto [a4, b4, c4, d4, e4, f4, g4] = alloc4A.DebugInfo();
+    auto [a8, b8, c8, d8, e8, f8, g8] = alloc8A.DebugInfo();
+    auto [a1, b1, c1, d1, e1, f1, g1] = alloc1A.DebugInfo();
+    // Alignments.
+    EXPECT_EQ(al4, a4);
+    EXPECT_EQ(al8, a8);
+    EXPECT_EQ(al1, a1);
+    EXPECT_EQ(c4, s4);
+    EXPECT_EQ(c8, s8);
+    EXPECT_EQ(c1, s1);
+    data4A.push_back(alloc4A.Construct(i * 1, i * 2, i * 3, i * 4));
+    data8A.push_back(alloc8A.Construct(i * 1, i * 2, 'a'));
+    DataA1* a = (DataA1*)alloc1A.Allocate();
+    a->a = 'z';
+    data1A.push_back(a);
+  }
+  // Checks construction initializes correctly.
+  for (int i = 0; i < 1000; ++i) {
+    EXPECT_EQ(data4A.at(i)->c, i * 3);
+    EXPECT_EQ(data8A.at(i)->c, i * 2);
+    EXPECT_EQ(data1A.at(i)->a, 'z');
+  }
+}
+
+TEST(AllocatorTest, LargeNumberOfObjects) {
+  struct Array1k {
+    std::array<int, 1000> a{0};
+  };
+
+  EXPECT_EQ(sizeof(Array1k), 4000);
+  Allocator<Array1k> alloc(40000);
+  for (int i = 0; i < 1000; ++i) {
+    void* buf = alloc.Allocate();
+    EXPECT_FALSE(buf == nullptr);
+    Array1k* arr = new (buf) Array1k();
+    EXPECT_EQ(arr->a.size(), 1000);
+  }
+  auto [a, b, c, d, e, f, g] = alloc.DebugInfo();
+  EXPECT_EQ(40960, b);
+}
+
+TEST(AllocatorTest, DestructorCalled) {
+  struct Stats {
+    int destructor_counter = 0;
+  };
+
+  struct Data {
+   public:
+    Data(Stats* stats) : stats_(stats) {}
+    ~Data() { stats_->destructor_counter++; }
+    Stats* stats_;
+  };
+
+  Stats stats;
+  int object_counter = 0;
+  {
+    Allocator<Data> alloc(4096);
+    for (int i = 0; i < 5200; ++i) {
+      auto d = alloc.Construct(&stats);
+      EXPECT_FALSE(d == nullptr);
+      // Checks objects are not destructred or nullptr.
+      EXPECT_EQ(d->stats_->destructor_counter, 0);
+      object_counter++;
+    }
+  }
+  EXPECT_EQ(stats.destructor_counter, object_counter);
+}
+
+TEST(AllocatorTest, BitFields) {
+  struct HasBitFields {
+    short s;
+    char c;
+    int flip : 1;
+    int nybble : 4;
+    int septet : 7;
+  };
+
+  Allocator<HasBitFields> alloc;  // Default block size.
+  for (int i = 0; i < 1000; ++i) {
+    auto d = alloc.Construct();
+    d->c = 'z';
+    d->septet = i;
+  }
+  auto [a, b, c, d, e, f, g] = alloc.DebugInfo();
+  EXPECT_EQ(a, 4);  // Alignment.
+  EXPECT_EQ(c, 8);  // Size.
+}
+
+TEST(AllocatorTest, VectorContainer) {
+  struct VectorData {
+    std::string s;
+    int b;
+  };
+
+  struct HasVector {
+    int a;
+    int b;
+    std::vector<VectorData> data;
+
+    ~HasVector() {
+      if (a % 2 == 0) {
+        // Checks if vector resizing impacts deallocation.
+        data.clear();
+      }
+    }
+  };
+
+  Allocator<HasVector> alloc;
+  for (int i = 0; i < 1000; ++i) {
+    auto d = alloc.Construct();
+    d->a = i;
+    d->b = 20;
+    for (int j = 0; j < 100; j++) {
+      VectorData data;
+      // One short string (so that its allocated at stack and one long string so
+      // it is allocated on heap.
+      if (j % 2 == 0) {
+        data.s =
+            R"STR("dsfjkldsfjldsajfdlsjfldsjflkdsjfkadsjfkdjsfkjdskfljdsafljdskfjdsfjdsafjdaskfjdsfdsfdsfljadskfljdskfjdsklfjkldsjfkldsjfkljdskfjdsklfjadsljfdsajfkldsjfkljdsfjjsdfsdfjdslfjdlsfjlkdsjflksdjfldsjflkjdslfjsdklfjlksdjfkldsjfklsdjfldsjflksdjfldskjflkdsjflkdsjflkdsjflkdsjflkdsjflkjsdfkljdslfkjdslkfjsdlkfjdslkfjdslkfjldskfjklsdjflksdjflsdjfldsjfsdkjflsdjflksdjflksdjfdslfjdslfj)STR";
+      } else {
+        data.s = "foobar";
+      }
+      data.b = i;
+      d->data.push_back(data);
+    }
+  }
+}
+
+}  // namespace htmlparser
diff --git a/validator/htmlparser/atom.h b/validator/cpp/htmlparser/atom.h
similarity index 100%
rename from validator/htmlparser/atom.h
rename to validator/cpp/htmlparser/atom.h
diff --git a/validator/htmlparser/atomutil.cc b/validator/cpp/htmlparser/atomutil.cc
similarity index 100%
rename from validator/htmlparser/atomutil.cc
rename to validator/cpp/htmlparser/atomutil.cc
diff --git a/validator/htmlparser/atomutil.h b/validator/cpp/htmlparser/atomutil.h
similarity index 100%
rename from validator/htmlparser/atomutil.h
rename to validator/cpp/htmlparser/atomutil.h
diff --git a/validator/htmlparser/atomutil_test.cc b/validator/cpp/htmlparser/atomutil_test.cc
similarity index 100%
rename from validator/htmlparser/atomutil_test.cc
rename to validator/cpp/htmlparser/atomutil_test.cc
diff --git a/validator/htmlparser/bin/BUILD b/validator/cpp/htmlparser/bin/BUILD
similarity index 100%
rename from validator/htmlparser/bin/BUILD
rename to validator/cpp/htmlparser/bin/BUILD
diff --git a/validator/htmlparser/bin/atomgen.cc b/validator/cpp/htmlparser/bin/atomgen.cc
similarity index 100%
rename from validator/htmlparser/bin/atomgen.cc
rename to validator/cpp/htmlparser/bin/atomgen.cc
diff --git a/validator/htmlparser/bin/casetablegen.cc b/validator/cpp/htmlparser/bin/casetablegen.cc
similarity index 90%
rename from validator/htmlparser/bin/casetablegen.cc
rename to validator/cpp/htmlparser/bin/casetablegen.cc
index e6da33f61d774..b85fdaa22ea36 100644
--- a/validator/htmlparser/bin/casetablegen.cc
+++ b/validator/cpp/htmlparser/bin/casetablegen.cc
@@ -12,14 +12,6 @@
 // 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.
-//
-
-// To regenerate casetable.h file, run:
-// bazel build htmlparser/bin:casetablegen
-// bazel-bin/htmlparser/bin/casetablegen
-//
-// TODO: Add a genrule to auto generate the header file every time
-// library/software is built.
 
 #include <fstream>
 #include <iostream>
@@ -171,23 +163,23 @@ int main(int argc, char** argv) {
   }
 
   std::ofstream fd("casetable.h");
-  htmlparser::Defer __([&]() {fd.close();});
+  htmlparser::Defer __([&]() { fd.close(); });
 
   fd << kFileHeader;
   fd << "inline constexpr std::pair<char32_t, char32_t> "
-     "kUppercaseToLowerTable[] {" << std::endl;
+        "kUppercaseToLowerTable[] {"
+     << std::endl;
   for (auto& entry : upper_to_lower) {
-    fd << "    {0x" << entry.upper_case
-       << ", 0x" << entry.lower_case << "},  // "
-       << entry.description << std::endl;
+    fd << "    {0x" << entry.upper_case << ", 0x" << entry.lower_case
+       << "},  // " << entry.description << std::endl;
   }
   fd << "};" << std::endl;
 
   fd << "inline constexpr std::pair<char32_t, char32_t> "
-     "kLowercaseToUpperTable[] {" << std::endl;
+        "kLowercaseToUpperTable[] {"
+     << std::endl;
   for (auto& entry : upper_to_lower) {
-    fd << "    {0x" << entry.lower_case
-       << ", 0x" << entry.upper_case
+    fd << "    {0x" << entry.lower_case << ", 0x" << entry.upper_case
        << "},  // " << entry.description << std::endl;
   }
   fd << "};" << std::endl;
diff --git a/validator/htmlparser/bin/entitytablegen.cc b/validator/cpp/htmlparser/bin/entitytablegen.cc
similarity index 97%
rename from validator/htmlparser/bin/entitytablegen.cc
rename to validator/cpp/htmlparser/bin/entitytablegen.cc
index ccd5f2203f0df..343be6fb1a2f3 100644
--- a/validator/htmlparser/bin/entitytablegen.cc
+++ b/validator/cpp/htmlparser/bin/entitytablegen.cc
@@ -90,8 +90,8 @@ inline std::string_view EntityLookup(std::string_view entity_name) {
 
 // Extracts the entity name from it's line in entities.json.
 std::string GetHtmlEntityTag(const std::string& s) {
-  int x = s.find_first_of("\"");
-  int y = s.find_first_of("\"", x + 1);
+  int x = s.find_first_of('\"');
+  int y = s.find_first_of('\"', x + 1);
   return s.substr(x + 2 /* Ignore '"' and '&' */, y - x - 2);
 }
 
@@ -104,8 +104,8 @@ int to_int(std::string* s) {
 
 // Extracts the characters codepoint from it's line in entity.json.
 std::vector<int> GetCodepoint(const std::string& s) {
-  int x = s.find_first_of("[");
-  int y = s.find_first_of("]");
+  int x = s.find_first_of('[');
+  int y = s.find_first_of(']');
   std::string cp = s.substr(x + 1, y - x - 1);
   auto comma = cp.find_first_of(',');
   if (comma == std::string::npos) {
diff --git a/validator/cpp/htmlparser/bin/statetablegen.cc b/validator/cpp/htmlparser/bin/statetablegen.cc
new file mode 100644
index 0000000000000..60039f2344e1d
--- /dev/null
+++ b/validator/cpp/htmlparser/bin/statetablegen.cc
@@ -0,0 +1,80 @@
+//
+// Copyright 2020 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.
+//
+
+// To regenerate states.h file, run:
+//
+// blaze clean
+// bazel build htmlparser/bin:statetablegen
+// bazel-bin/htmlparser/bin/statetablegen --input_grammar=url
+//                            or
+// bazel-bin/htmlparser/bin/statetablegen --input_grammar=json
+
+#include <iostream>
+
+#include "glog/logging.h"
+#include "absl/flags/flag.h"
+#include "absl/flags/parse.h"
+#include "grammar/tablebuilder.h"
+
+ABSL_FLAG(std::string, input_grammar, "", "Options: url, json");
+
+constexpr std::string_view kLicenseHeader = R"LICENSETXT(//
+// Copyright 2020 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.
+//)LICENSETXT";
+
+
+int main(int argc, char** argv) {
+  absl::ParseCommandLine(argc, argv);
+  std::string grammar = absl::GetFlag(FLAGS_input_grammar);
+
+  std::string input_grammar;
+  std::string cpp_namespace;
+  std::string ifdef_guard;
+  std::string output_file;
+  if (grammar == "json") {
+    input_grammar = "data/jsongrammar.txt";
+    cpp_namespace = "htmlparser::json";
+    ifdef_guard = "HTMLPARSER__JSON_STATES_H_";
+    output_file = "json/states.h";
+  } else {
+    std::cerr << "Invalid -input_grammar value: " << grammar;
+    return -1;
+  }
+
+  htmlparser::grammar::TableBuilder builder(
+      input_grammar,
+      {.output_file_path = output_file,
+       .license_header = kLicenseHeader.data(),
+       .ifdef_guard = ifdef_guard,
+       .cpp_namespace = cpp_namespace});
+
+  if (!builder.ParseRulesAndGenerateTable()) {
+    std::cerr << "Table generation failed.\n";
+    return -1;
+  }
+}
diff --git a/validator/htmlparser/casetable.h b/validator/cpp/htmlparser/casetable.h
similarity index 100%
rename from validator/htmlparser/casetable.h
rename to validator/cpp/htmlparser/casetable.h
diff --git a/validator/htmlparser/casetable_test.cc b/validator/cpp/htmlparser/casetable_test.cc
similarity index 100%
rename from validator/htmlparser/casetable_test.cc
rename to validator/cpp/htmlparser/casetable_test.cc
diff --git a/validator/htmlparser/comparators.h b/validator/cpp/htmlparser/comparators.h
similarity index 100%
rename from validator/htmlparser/comparators.h
rename to validator/cpp/htmlparser/comparators.h
diff --git a/validator/cpp/htmlparser/css/BUILD b/validator/cpp/htmlparser/css/BUILD
new file mode 100644
index 0000000000000..7458daa55d0a5
--- /dev/null
+++ b/validator/cpp/htmlparser/css/BUILD
@@ -0,0 +1,115 @@
+# Requirements:
+# clang with c++17 support.
+#
+# Usage:
+# To build the library, use the following bazel command:
+#
+# bazel build --repo_env=CC=clang --cxxopt='-std=c++17' <build_target>
+
+load("@rules_cc//cc:defs.bzl", "cc_library", "cc_test", "cc_proto_library")
+load("@rules_proto//proto:defs.bzl", "proto_library")
+
+package(default_visibility = ["//visibility:public"])
+
+licenses(["notice"])
+
+proto_library(
+    name = "parse-css-proto",
+    srcs = ["parse-css.proto"],
+)
+
+cc_proto_library(
+    name = "parse_css_cc_proto",
+    deps = [":parse-css-proto"],
+)
+
+cc_library(
+    name = "parse-css",
+    srcs = ["parse-css.cc"],
+    hdrs = ["parse-css.h"],
+    deps = [
+        ":parse_css_cc_proto",
+        "@com_github_glog//:glog",
+        "@com_google_absl//absl/algorithm:container",
+        "@com_google_absl//absl/memory",
+        "@com_google_absl//absl/strings",
+        "@com_google_absl//absl/types:variant",
+        "@htmlparser//:strings",
+        "@htmlparser//json:types",
+        "@validator//:validator_cc_proto",
+    ],
+)
+
+cc_test(
+    name = "parse-css_test",
+    srcs = ["parse-css_test.cc"],
+    args = ["--suppress_failure_output"],
+    deps = [
+        ":parse-css",
+        ":parse_css_cc_proto",
+        "@com_google_absl//absl/strings",
+        "@com_google_googletest//:gtest_main",
+        "@htmlparser//:strings",
+    ],
+)
+
+proto_library(
+    name = "parse-css-urls-proto",
+    srcs = ["parse-css-urls.proto"],
+)
+
+cc_proto_library(
+    name = "parse_css_urls_cc_proto",
+    deps = [":parse-css-urls-proto"],
+)
+
+cc_library(
+    name = "parse-css-urls",
+    srcs = ["parse-css-urls.cc"],
+    hdrs = ["parse-css-urls.h"],
+    deps = [
+        ":parse_css_urls_cc_proto",
+        "@com_github_glog//:glog",
+        "@com_google_absl//absl/algorithm:container",
+        "@com_google_absl//absl/memory",
+        "@com_google_absl//absl/strings",
+        "@com_google_absl//absl/types:variant",
+        "@htmlparser//:strings",
+        "@validator//:validator_cc_proto",
+    ],
+)
+
+cc_test(
+    name = "parse-css-urls_test",
+    srcs = ["parse-css-urls_test.cc"],
+    args = ["--suppress_failure_output"],
+    deps = [
+        ":parse-css-urls",
+        "@com_google_absl//absl/strings",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+cc_library(
+    name = "amp4ads-parse-css",
+    srcs = ["amp4ads-parse-css.cc"],
+    hdrs = ["amp4ads-parse-css.h"],
+    deps = [
+        ":parse-css",
+        "@com_google_absl//absl/memory",
+        "@com_google_absl//absl/strings",
+        "@com_github_re2//:re2",
+    ],
+)
+
+cc_test(
+    name = "amp4ads-parse-css_test",
+    srcs = ["amp4ads-parse-css_test.cc"],
+    deps = [
+        ":amp4ads-parse-css",
+        ":parse-css",
+        "@com_google_absl//absl/strings",
+        "@com_google_googletest//:gtest_main",
+        "@htmlparser//:strings",
+    ],
+)
diff --git a/validator/htmlparser/css/amp4ads-parse-css.cc b/validator/cpp/htmlparser/css/amp4ads-parse-css.cc
similarity index 97%
rename from validator/htmlparser/css/amp4ads-parse-css.cc
rename to validator/cpp/htmlparser/css/amp4ads-parse-css.cc
index 7eefdbf28efd8..ec1621a0dcda1 100644
--- a/validator/htmlparser/css/amp4ads-parse-css.cc
+++ b/validator/cpp/htmlparser/css/amp4ads-parse-css.cc
@@ -68,13 +68,13 @@ class Amp4AdsVisitor : public RuleVisitor {
 
   void VisitQualifiedRule(const QualifiedRule& qualified_rule) override {
     for (const unique_ptr<Declaration>& decl : qualified_rule.declarations()) {
-      string_view name = StripVendorPrefix(decl->name());
+      auto name = StripVendorPrefix(decl->name());
 
       // The name of the property may identify a transition. The only
       // properties that may be transitioned are opacity and transform.
       if (name == "transition") {
         std::string transitioned_property = FirstIdent(decl->value());
-        string_view transitioned_property_stripped =
+        auto transitioned_property_stripped =
             StripVendorPrefix(transitioned_property);
 
         if (transitioned_property_stripped != "opacity" &&
diff --git a/validator/htmlparser/css/amp4ads-parse-css.h b/validator/cpp/htmlparser/css/amp4ads-parse-css.h
similarity index 94%
rename from validator/htmlparser/css/amp4ads-parse-css.h
rename to validator/cpp/htmlparser/css/amp4ads-parse-css.h
index 6330867a456d4..173e843352d28 100644
--- a/validator/htmlparser/css/amp4ads-parse-css.h
+++ b/validator/cpp/htmlparser/css/amp4ads-parse-css.h
@@ -29,7 +29,7 @@
 // for these checks.
 //
 // The draft specification for A4A is located here:
-// https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/amp-a4a-format.md
+// https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/amp-a4a-format.md
 //
 
 namespace htmlparser::css {
diff --git a/validator/htmlparser/css/amp4ads-parse-css_test.cc b/validator/cpp/htmlparser/css/amp4ads-parse-css_test.cc
similarity index 97%
rename from validator/htmlparser/css/amp4ads-parse-css_test.cc
rename to validator/cpp/htmlparser/css/amp4ads-parse-css_test.cc
index 1eb49c88321f8..57f3a529ec938 100644
--- a/validator/htmlparser/css/amp4ads-parse-css_test.cc
+++ b/validator/cpp/htmlparser/css/amp4ads-parse-css_test.cc
@@ -62,7 +62,7 @@ TEST(Amp4AdsParseCssTest, AmpAnimateExample_Good) {
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, A4aCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   EXPECT_EQ(stylesheet->ToJson().ToString(), R""({
   "tokentype": "STYLESHEET",
   "line": 1,
@@ -202,7 +202,7 @@ TEST(Amp4AdsParseCssTest, AmpAnimateExample_Good) {
   }
 })"");
   ValidateAmp4AdsCss(*stylesheet, &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
 }
 
 TEST(Amp4AdsParseCssTest, AmpAnimateExample_Good_VendorPrefixed) {
@@ -216,7 +216,7 @@ TEST(Amp4AdsParseCssTest, AmpAnimateExample_Good_VendorPrefixed) {
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, A4aCssParsingConfig(), &errors);
   ValidateAmp4AdsCss(*stylesheet, &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
 }
 
 TEST(Amp4AdsParseCssTest,
@@ -229,7 +229,7 @@ TEST(Amp4AdsParseCssTest,
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, A4aCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   EXPECT_EQ(stylesheet->ToJson().ToString(), R""({
   "tokentype": "STYLESHEET",
   "line": 1,
@@ -360,7 +360,7 @@ TEST(Amp4AdsParseCssTest,
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, A4aCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   EXPECT_EQ(stylesheet->ToJson().ToString(), R""({
   "tokentype": "STYLESHEET",
   "line": 1,
@@ -525,7 +525,7 @@ TEST(Amp4AdsParseCssTest,
   }
 })"");
   ValidateAmp4AdsCss(*stylesheet, &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
 }
 
 TEST(Amp4AdsParseCssTest,
@@ -543,9 +543,9 @@ TEST(Amp4AdsParseCssTest,
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, A4aCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   ValidateAmp4AdsCss(*stylesheet, &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
 }
 
 TEST(Amp4AdsParseCssTest, AmpAnimateExample_Good_MissingContextClass) {
@@ -560,7 +560,7 @@ TEST(Amp4AdsParseCssTest, AmpAnimateExample_Good_MissingContextClass) {
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, A4aCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   EXPECT_EQ(stylesheet->ToJson().ToString(), R""({
   "tokentype": "STYLESHEET",
   "line": 1,
@@ -683,7 +683,7 @@ TEST(Amp4AdsParseCssTest, AmpAnimateExample_Good_MissingContextClass) {
   }
 })"");
   ValidateAmp4AdsCss(*stylesheet, &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
 }
 
 TEST(Amp4AdsParseCssTest,
@@ -697,7 +697,7 @@ TEST(Amp4AdsParseCssTest,
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, A4aCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   ValidateAmp4AdsCss(*stylesheet, &errors);
   EXPECT_EQ(JsonFromList(errors), R""([
   {
@@ -726,7 +726,7 @@ TEST(Amp4AdsParseCssTest, KeyframesExample_Good) {
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, A4aCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   EXPECT_EQ(stylesheet->ToJson().ToString(), R""({
   "tokentype": "STYLESHEET",
   "line": 1,
@@ -890,9 +890,7 @@ TEST(Amp4AdsParseCssTest, KeyframesExample_Good) {
           ]
         }
       ],
-      "declarations":      [
-
-      ]
+      "declarations":      []
     }
   ],
   "eof":  {
@@ -902,7 +900,7 @@ TEST(Amp4AdsParseCssTest, KeyframesExample_Good) {
   }
 })"");
   ValidateAmp4AdsCss(*stylesheet, &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
 }
 
 TEST(Amp4AdsParseCssTest, KeyframesExample_Good_VendorPrefixed) {
@@ -917,7 +915,7 @@ TEST(Amp4AdsParseCssTest, KeyframesExample_Good_VendorPrefixed) {
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, A4aCssParsingConfig(), &errors);
   ValidateAmp4AdsCss(*stylesheet, &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
 }
 
 TEST(Amp4AdsParseCssTest, KeyframesExample_Good_AnimationTimingFunction) {
@@ -933,7 +931,7 @@ TEST(Amp4AdsParseCssTest, KeyframesExample_Good_AnimationTimingFunction) {
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, A4aCssParsingConfig(), &errors);
   ValidateAmp4AdsCss(*stylesheet, &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
 }
 
 TEST(Amp4AdsParseCssTest,
@@ -948,7 +946,7 @@ TEST(Amp4AdsParseCssTest,
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, A4aCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   ValidateAmp4AdsCss(*stylesheet, &errors);
   EXPECT_EQ(JsonFromList(errors), R""([
   {
@@ -1014,7 +1012,7 @@ TEST(Amp4AdsParseCssTest,
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, A4aCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   ValidateAmp4AdsCss(*stylesheet, &errors);
   EXPECT_EQ(JsonFromList(errors), R""([
   {
diff --git a/validator/htmlparser/css/parse-css-urls.cc b/validator/cpp/htmlparser/css/parse-css-urls.cc
similarity index 100%
rename from validator/htmlparser/css/parse-css-urls.cc
rename to validator/cpp/htmlparser/css/parse-css-urls.cc
diff --git a/validator/htmlparser/css/parse-css-urls.h b/validator/cpp/htmlparser/css/parse-css-urls.h
similarity index 100%
rename from validator/htmlparser/css/parse-css-urls.h
rename to validator/cpp/htmlparser/css/parse-css-urls.h
diff --git a/validator/htmlparser/css/parse-css-urls.proto b/validator/cpp/htmlparser/css/parse-css-urls.proto
similarity index 100%
rename from validator/htmlparser/css/parse-css-urls.proto
rename to validator/cpp/htmlparser/css/parse-css-urls.proto
diff --git a/validator/htmlparser/css/parse-css-urls_test.cc b/validator/cpp/htmlparser/css/parse-css-urls_test.cc
similarity index 100%
rename from validator/htmlparser/css/parse-css-urls_test.cc
rename to validator/cpp/htmlparser/css/parse-css-urls_test.cc
diff --git a/validator/htmlparser/css/parse-css.cc b/validator/cpp/htmlparser/css/parse-css.cc
similarity index 98%
rename from validator/htmlparser/css/parse-css.cc
rename to validator/cpp/htmlparser/css/parse-css.cc
index c7158a75b2527..967ff2f6aefd0 100644
--- a/validator/htmlparser/css/parse-css.cc
+++ b/validator/cpp/htmlparser/css/parse-css.cc
@@ -25,7 +25,6 @@
 #include "absl/strings/numbers.h"
 #include "absl/strings/str_cat.h"
 #include "absl/strings/str_join.h"
-#include "absl/strings/strip.h"
 #include "absl/types/variant.h"
 #include "css/parse-css.pb.h"
 #include "strings.h"
@@ -39,6 +38,32 @@ using std::unique_ptr;
 using std::vector;
 
 namespace htmlparser::css {
+
+namespace internal {
+std::string_view StripVendorPrefix(absl::string_view prefixed_string) {
+  // Checking for '-' is an optimization.
+  if (!prefixed_string.empty() && prefixed_string[0] == '-') {
+    // ConsumePrefix returns true if anything is consumed. This slightly
+    // strange syntax will cause us to exit early if we find a match.
+    if (absl::ConsumePrefix(&prefixed_string, "-o-")) {
+    } else if (absl::ConsumePrefix(&prefixed_string, "-moz-")) {
+    } else if (absl::ConsumePrefix(&prefixed_string, "-ms-")) {
+    } else if (absl::ConsumePrefix(&prefixed_string, "-webkit-")) {
+    }
+  }
+  return prefixed_string.data();
+}
+
+std::string_view StripMinMaxPrefix(absl::string_view prefixed_string) {
+  // We could just consume 'min-' and then 'max-, but then we'd allow 'min-max-'
+  // but not 'max-min-' which is both wrong and weird.
+  if (!absl::ConsumePrefix(&prefixed_string, "min-")) {
+    absl::ConsumePrefix(&prefixed_string, "max-");
+  }
+  return prefixed_string.data();
+}
+}  // namespace internal
+
 namespace {
 // Sets |dest| to be a JSON array of the ->ToJson() results of the
 // elements contained within |container|.
@@ -68,7 +93,6 @@ void AppendValue(htmlparser::json::JsonDict* dict, const std::string& key,
 //
 // Token implementations.
 //
-// TODO(honeybadgerdontcare): Use either StringValue or ToString, not both.
 const std::string& Token::StringValue() const {
   static const std::string* empty = new std::string;
   return *empty;
@@ -272,14 +296,17 @@ htmlparser::json::JsonDict Declaration::ToJson() const {
   return root;
 }
 
-// For a declaration, if the first non-whitespace token is an identifier,
-// returns its string value. Otherwise, returns the empty string.
+// For a declaration, if the first non-whitespace token is an identifier
+// (including a number token type), returns its string value. Otherwise,
+// returns the empty string.
 std::string Declaration::FirstIdent() const {
   if (value_.empty()) return "";
   if (value_[0]->Type() == TokenType::IDENT) return value_[0]->StringValue();
-  if (value_.size() >= 2 && value_[0]->Type() == TokenType::WHITESPACE &&
-      value_[1]->Type() == TokenType::IDENT)
-    return value_[1]->StringValue();
+  if (value_[0]->Type() == TokenType::NUMBER) return value_[0]->ToString();
+  if (value_.size() >= 2 && value_[0]->Type() == TokenType::WHITESPACE) {
+    if (value_[1]->Type() == TokenType::IDENT) return value_[1]->StringValue();
+    if (value_[1]->Type() == TokenType::NUMBER) return value_[1]->ToString();
+  }
   return "";
 }
 
@@ -978,29 +1005,6 @@ unique_ptr<Token> TokenStream::ReleaseCurrentOrCreateEof() {
   return CreateEOFTokenAt(*eof_);
 }
 
-absl::string_view StripVendorPrefix(absl::string_view prefixed_string) {
-  // Checking for '-' is an optimization.
-  if (!prefixed_string.empty() && prefixed_string[0] == '-') {
-    // ConsumePrefix returns true if anything is consumed. This slightly
-    // strange syntax will cause us to exit early if we find a match.
-    if (absl::ConsumePrefix(&prefixed_string, "-o-")) {
-    } else if (absl::ConsumePrefix(&prefixed_string, "-moz-")) {
-    } else if (absl::ConsumePrefix(&prefixed_string, "-ms-")) {
-    } else if (absl::ConsumePrefix(&prefixed_string, "-webkit-")) {
-    }
-  }
-  return prefixed_string;
-}
-
-absl::string_view StripMinMaxPrefix(absl::string_view prefixed_string) {
-  // We could just consume 'min-' and then 'max-, but then we'd allow 'min-max-'
-  // but not 'max-min-' which is both wrong and weird.
-  if (!absl::ConsumePrefix(&prefixed_string, "min-")) {
-    absl::ConsumePrefix(&prefixed_string, "max-");
-  }
-  return prefixed_string;
-}
-
 //
 // Parsing
 //
@@ -1057,8 +1061,11 @@ class Canonicalizer {
 
     while (true) {
       s->Consume();
-      if (s->Current().Type() == TokenType::SEMICOLON ||
-          s->Current().Type() == TokenType::EOF_TOKEN) {
+      if (s->Current().Type() == TokenType::SEMICOLON) {
+        rule->mutable_prelude()->emplace_back(CreateEOFTokenAt(s->Current()));
+        return rule;
+      }
+      if (s->Current().Type() == TokenType::EOF_TOKEN) {
         rule->mutable_prelude()->emplace_back(s->ReleaseCurrentOrCreateEof());
         return rule;
       }
@@ -2233,7 +2240,7 @@ ErrorTokenOr<AttrSelector> ParseAnAttrSelector(TokenStream* token_stream) {
   start.CopyStartPositionTo(selector.get());
   selector->set_value_start_pos(value_start_pos);
   selector->set_value_end_pos(value_end_pos);
-  return std::move(selector);
+  return selector;
 }
 
 //
@@ -2289,13 +2296,13 @@ ErrorTokenOr<PseudoSelector> ParseAPseudoSelector(TokenStream* token_stream) {
         ValidationError::CSS_SYNTAX_ERROR_IN_PSEUDO_SELECTOR,
         vector<std::string>{"style"});
     first_colon.CopyStartPositionTo(error.get());
-    return std::move(error);
+    return error;
   }
   htmlparser::json::JsonArray func_json;
   for (const unique_ptr<Token>& t : func) func_json.Append(t->ToJson());
   auto selector = make_unique<PseudoSelector>(is_class, name, func_json);
   first_colon.CopyStartPositionTo(selector.get());
-  return std::move(selector);
+  return selector;
 }
 
 //
@@ -2400,7 +2407,7 @@ ErrorTokenOr<SimpleSelectorSequence> ParseASimpleSelectorSequence(
               ValidationError::CSS_SYNTAX_MISSING_SELECTOR,
               vector<std::string>{"style"});
           start.CopyStartPositionTo(error.get());
-          return std::move(error);
+          return error;
         }
         // If no type selector is given then the universal selector is implied.
         type_selector = make_unique<TypeSelector>(
@@ -2413,7 +2420,7 @@ ErrorTokenOr<SimpleSelectorSequence> ParseASimpleSelectorSequence(
       auto sequence = make_unique<SimpleSelectorSequence>(
           std::move(type_selector), std::move(other_selectors));
       start.CopyStartPositionTo(sequence.get());
-      return std::move(sequence);
+      return sequence;
     }
   }
 }
@@ -2490,7 +2497,7 @@ ErrorTokenOr<Selector> ParseASelector(TokenStream* token_stream) {
         ValidationError::CSS_SYNTAX_NOT_A_SELECTOR_START,
         vector<std::string>{"style"});
     token_stream->Current().CopyStartPositionTo(error.get());
-    return std::move(error);
+    return error;
   }
   ErrorTokenOr<SimpleSelectorSequence> parsed =
       ParseASimpleSelectorSequence(token_stream);
@@ -2560,7 +2567,7 @@ ErrorTokenOr<Selector> ParseASelectorsGroup(TokenStream* token_stream) {
         ValidationError::CSS_SYNTAX_NOT_A_SELECTOR_START,
         vector<std::string>{"style"});
     token_stream->Current().CopyStartPositionTo(error.get());
-    return std::move(error);
+    return error;
   }
   const Token& start = token_stream->Current();
   ErrorTokenOr<Selector> maybe_selector = ParseASelector(token_stream);
@@ -2590,7 +2597,7 @@ ErrorTokenOr<Selector> ParseASelectorsGroup(TokenStream* token_stream) {
           ValidationError::CSS_SYNTAX_UNPARSED_INPUT_REMAINS_IN_SELECTOR,
           vector<std::string>{"style"});
       token_stream->Current().CopyStartPositionTo(error.get());
-      return std::move(error);
+      return error;
     }
     if (elements.size() == 1) return std::move(elements.back());
     auto group = make_unique<SelectorsGroup>(std::move(elements));
@@ -2599,12 +2606,26 @@ ErrorTokenOr<Selector> ParseASelectorsGroup(TokenStream* token_stream) {
   }
 }
 
-void TraverseSelectors(const Selector& selector, SelectorVisitor* visitor) {
+void SelectorVisitor::VisitQualifiedRule(const QualifiedRule& qualified_rule) {
+  vector<unique_ptr<Token>> cloned_prelude;
+  cloned_prelude.reserve(qualified_rule.prelude().size());
+  for (const auto& token : qualified_rule.prelude()) {
+    cloned_prelude.push_back(token->Clone());
+  }
+  TokenStream stream(std::move(cloned_prelude));
+  stream.Consume();
+  ErrorTokenOr<Selector> maybe_selector = ParseASelectorsGroup(&stream);
+  if (absl::holds_alternative<unique_ptr<ErrorToken>>(maybe_selector)) {
+    errors_->emplace_back(
+        std::move(absl::get<unique_ptr<ErrorToken>>(maybe_selector)));
+    return;
+  }
+  const Selector& selector = *absl::get<unique_ptr<Selector>>(maybe_selector);
   std::deque<const Selector*> to_visit = {&selector};
   while (!to_visit.empty()) {
     const Selector* node = to_visit.front();
     to_visit.pop_front();
-    node->Accept(visitor);
+    node->Accept(this);
     node->ForEachChild(
         [&to_visit](const Selector& child) { to_visit.push_back(&child); });
   }
diff --git a/validator/htmlparser/css/parse-css.h b/validator/cpp/htmlparser/css/parse-css.h
similarity index 92%
rename from validator/htmlparser/css/parse-css.h
rename to validator/cpp/htmlparser/css/parse-css.h
index b8c03d2626c51..1a7559b0b6078 100644
--- a/validator/htmlparser/css/parse-css.h
+++ b/validator/cpp/htmlparser/css/parse-css.h
@@ -33,13 +33,6 @@
 // Token, which in a sane world would be in a distinct
 // hierarchy. However the parsing routines sometimes instantiate a
 // temporary TokenStream and put some AST nodes into there.
-//
-// TODO:
-// - Sufficient accessor methods to make this useful (for now, using
-//   JSON only tests).
-// - Parsing numbers (right now unlike the Javascript this library leaves
-//   numbers as strings).
-// - Higher level concepts e.g. selectors?
 
 #ifndef HTMLPARSER__CSS_PARSE_CSS_H_
 #define HTMLPARSER__CSS_PARSE_CSS_H_
@@ -51,11 +44,13 @@
 #include <vector>
 
 #include "absl/memory/memory.h"
+#include "absl/strings/strip.h"
 #include "css/parse-css.pb.h"
 #include "json/types.h"
 #include "validator.pb.h"
 
 namespace htmlparser::css {
+
 // Implements 3.3. Preprocessing the input stream.
 // http://www.w3.org/TR/css-syntax-3/#input-preprocessing
 void Preprocess(std::vector<char32_t>* codepoints);
@@ -461,13 +456,41 @@ class ErrorToken : public Token {
   const std::vector<std::string> params_;
 };
 
-// Strips the prefix 'min-' or 'max-' from the start of a media feature
-// identifier, if present. E.g., "min-width" -> "width".
-std::string_view StripMinMaxPrefix(std::string_view prefixed_string);
+namespace internal {
+
+std::string_view StripVendorPrefix(absl::string_view prefixed_string);
+std::string_view StripMinMaxPrefix(absl::string_view prefixed_string);
+
+// Macro to generate method that may accept any string parameter of type
+// absl::string_view, std::string_view, std::string, char* and const char*
+#define TEMPLATED_METHOD_FOR_STRING_TYPES(PUBLIC_METHOD, INTERNAL_IMPL)\
+    /* absl::string_view specialization */\
+template<class T, \
+         typename std::enable_if<std::is_same<T, absl::string_view>::value, \
+                                              bool>::type = true>\
+std::string_view PUBLIC_METHOD(T prefixed_string) {\
+  return INTERNAL_IMPL(prefixed_string);\
+}\
+\
+    /* std::string, char* specialization */\
+template<class T, typename std::enable_if<\
+    std::is_same<T, std::string>::value || \
+    std::is_same<char const*, typename std::decay<T>::type>::value || \
+    std::is_same<char*, typename std::decay<T>::type>::value, \
+    bool>::type = true>\
+std::string_view PUBLIC_METHOD(const T& str) {\
+  absl::string_view prefixed_string(str);\
+  return INTERNAL_IMPL(prefixed_string);\
+}
+
+}  // namespace internal
 
 // Strips vendor prefixes from identifiers, e.g. property names or names
 // of at rules. E.g., "-moz-keyframes" -> "keyframes".
-std::string_view StripVendorPrefix(std::string_view prefixed_string);
+TEMPLATED_METHOD_FOR_STRING_TYPES(StripVendorPrefix,
+                                  internal::StripVendorPrefix);
+TEMPLATED_METHOD_FOR_STRING_TYPES(StripMinMaxPrefix,
+                                  internal::StripMinMaxPrefix);
 
 class RuleVisitor;
 
@@ -842,17 +865,13 @@ class AttrSelector : public Selector {
 // http://www.w3.org/TR/css3-selectors/#pseudo-elements.
 //
 // Typically written as ':visited', ':lang(fr)', and '::first-line'.
-//
-//
-// func: If it's a function style pseudo selector, like lang(fr), then func
-// the function tokens. TODO(johannes): parse this in more detail.
 class PseudoSelector : public Selector {
  public:
   // |is_class|: Pseudo selectors with a single colon (e.g., ':visited')
   // are pseudo class selectors. Selectors with two colons (e.g.,
   // '::first-line') are pseudo elements.
   // |func|: If it's a function style pseudo selector, like lang(fr), then func
-  // the function tokens. TODO(johannes): parse this in more detail.
+  // is the function tokens.
   PseudoSelector(bool is_class, const std::string& name,
                  const htmlparser::json::JsonArray& func);
   std::unique_ptr<Token> Clone() const override;
@@ -860,6 +879,10 @@ class PseudoSelector : public Selector {
   htmlparser::json::JsonDict ToJson() const override;
   void Accept(SelectorVisitor* visitor) const override;
 
+  const std::string& name() const { return name_; }
+  bool is_pseudo_class() const { return is_class_; }
+  bool is_pseudo_element() const { return !is_class_; }
+
  private:
   const bool is_class_;
   const std::string name_;
@@ -970,11 +993,15 @@ class SelectorsGroup : public Selector {
 // SelectorsGroup, SimpleSelectorSequence, or Combinator.
 ErrorTokenOr<Selector> ParseASelectorsGroup(TokenStream* token_stream);
 
-// A super class for making visitors (by overriding the types of interest).
-// The parse_css::TraverseSelectors function can be used to visit nodes in a
-// parsed CSS selector.
-class SelectorVisitor {
+// A super class for making visitors (by overriding the types of interest) of
+// Selector fields. The standard RuleVisitor does not recursively parse the
+// prelude of qualified rules for the components of a selectors. This Visitor
+// re-parses these preludes and then visits the fields within. The parse step
+// has the possibility of emitting new CSS ErrorTokens.
+class SelectorVisitor : public RuleVisitor {
  public:
+  explicit SelectorVisitor(std::vector<std::unique_ptr<ErrorToken>>* errors)
+      : errors_(errors) {}
   virtual ~SelectorVisitor() = default;
 
   virtual void VisitTypeSelector(const TypeSelector& selector) {}
@@ -986,11 +1013,18 @@ class SelectorVisitor {
       const SimpleSelectorSequence& sequence) {}
   virtual void VisitCombinator(const Combinator& combinator) {}
   virtual void VisitSelectorsGroup(const SelectorsGroup& group) {}
-};
 
-// Visits |selector| and its children, recursively, by calling the appropriate
-// methods on the provided visitor.
-void TraverseSelectors(const Selector& selector, SelectorVisitor* visitor);
+ private:
+  void VisitStylesheet(const Stylesheet& stylesheet) final {}
+  void LeaveStylesheet(const Stylesheet& stylesheet) final {}
+  void VisitAtRule(const AtRule& at_rule) final {}
+  void LeaveAtRule(const AtRule& at_rule) final {}
+  void VisitQualifiedRule(const QualifiedRule& qualified_rule) final;
+  void LeaveQualifiedRule(const QualifiedRule& qualified_rule) final {}
+  void VisitDeclaration(const Declaration& declaration) final {}
+  void LeaveDeclaration(const Declaration& declaration) final {}
+  std::vector<std::unique_ptr<ErrorToken>>* errors_;
+};
 }  // namespace htmlparser::css
 
 #endif  // HTMLPARSER__CSS_PARSE_CSS_H_
diff --git a/validator/htmlparser/css/parse-css.proto b/validator/cpp/htmlparser/css/parse-css.proto
similarity index 100%
rename from validator/htmlparser/css/parse-css.proto
rename to validator/cpp/htmlparser/css/parse-css.proto
diff --git a/validator/htmlparser/css/parse-css_test.cc b/validator/cpp/htmlparser/css/parse-css_test.cc
similarity index 95%
rename from validator/htmlparser/css/parse-css_test.cc
rename to validator/cpp/htmlparser/css/parse-css_test.cc
index 76a4799457980..3acfc518198e6 100644
--- a/validator/htmlparser/css/parse-css_test.cc
+++ b/validator/cpp/htmlparser/css/parse-css_test.cc
@@ -30,8 +30,6 @@ using std::unique_ptr;
 using std::vector;
 
 // Helper routine for implementing json serialization.
-// TODO(johannes): Replace with something better, it's only used
-// for serializing lists of errors at this point.
 template <class T>
 std::string JsonFromList(const vector<unique_ptr<T>>& list) {
   htmlparser::json::JsonArray array;
@@ -48,6 +46,7 @@ namespace htmlparser::css {
 namespace {
 
 TEST(ParseCssTest, StripVendorPrefix) {
+  // char*
   EXPECT_EQ("foo", StripVendorPrefix("-moz-foo"));
   EXPECT_EQ("foo", StripVendorPrefix("-ms-foo"));
   EXPECT_EQ("foo", StripVendorPrefix("-o-foo"));
@@ -58,6 +57,23 @@ TEST(ParseCssTest, StripVendorPrefix) {
   EXPECT_EQ("foo-foo", StripVendorPrefix("foo-foo"));
   EXPECT_EQ("-d-foo-foo", StripVendorPrefix("-d-foo-foo"));
   EXPECT_EQ("-foo", StripVendorPrefix("-foo"));
+
+  // std::string.
+  std::string param("-moz-foo");
+  EXPECT_EQ("foo", StripVendorPrefix(param));
+
+  // std::string_view.
+  std::string_view param_std_view("-moz-foo");
+  EXPECT_EQ("foo", StripVendorPrefix(param_std_view));
+
+  // absl::string_view
+  absl::string_view param_absl_view("-moz-foo");
+  EXPECT_EQ("foo", StripVendorPrefix(param_absl_view));
+
+  // Any other type, won't compile.
+  // std::vector<std::string> vec;
+  // EXPECT_EQ("foo", StripVendorPrefix(vec));
+  // EXPECT_EQ("foo", StripVendorPrefix(100));
 }
 
 TEST(ParseCssTest, Tokenize_GeneratesTokensForSimpleExample) {
@@ -510,9 +526,7 @@ TEST(ParseCssTest, ParseAStylesheet_ParsesAHashReference) {
           "col": 5
         }
       ],
-      "declarations":      [
-
-      ]
+      "declarations":      []
     }
   ],
   "eof":  {
@@ -552,12 +566,8 @@ TEST(ParseCssTest, ParseAStylesheet_ParsesAnAtMediaRule) {
           "col": 7
         }
       ],
-      "rules":      [
-
-      ],
-      "declarations":      [
-
-      ]
+      "rules":      [],
+      "declarations":      []
     }
   ],
   "eof":  {
@@ -1098,14 +1108,10 @@ TEST(ParseCssTest, ParseAStylesheet_ParsesNestedMediaRulesAndDeclarations) {
               ]
             }
           ],
-          "declarations":          [
-
-          ]
+          "declarations":          []
         }
       ],
-      "declarations":      [
-
-      ]
+      "declarations":      []
     },
     {
       "tokentype": "AT_RULE",
@@ -1124,9 +1130,7 @@ TEST(ParseCssTest, ParseAStylesheet_ParsesNestedMediaRulesAndDeclarations) {
           "col": 11
         }
       ],
-      "rules":      [
-
-      ],
+      "rules":      [],
       "declarations":      [
         {
           "tokentype": "DECLARATION",
@@ -1286,12 +1290,8 @@ TEST(ParseCssTest, ParseAStylesheet_GeneratesErrorsBasedOnTheGrammar) {
           "col": 10
         }
       ],
-      "rules":      [
-
-      ],
-      "declarations":      [
-
-      ]
+      "rules":      [],
+      "declarations":      []
     },
     {
       "tokentype": "QUALIFIED_RULE",
@@ -1316,9 +1316,7 @@ TEST(ParseCssTest, ParseAStylesheet_GeneratesErrorsBasedOnTheGrammar) {
           "col": 4
         }
       ],
-      "declarations":      [
-
-      ]
+      "declarations":      []
     }
   ],
   "eof":  {
@@ -1553,14 +1551,10 @@ TEST(ParseCssTest, ParseAStylesheet_HandlesANestedMediaRuleWithDeclarations) {
               ]
             }
           ],
-          "declarations":          [
-
-          ]
+          "declarations":          []
         }
       ],
-      "declarations":      [
-
-      ]
+      "declarations":      []
     }
   ],
   "eof":  {
@@ -1941,9 +1935,7 @@ TEST(ParseCssTest, ParseAStyleSheet_ImagesAndFonts) {
           "col": 119
         }
       ],
-      "rules":      [
-
-      ],
+      "rules":      [],
       "declarations":      [
         {
           "tokentype": "DECLARATION",
@@ -2146,7 +2138,6 @@ TEST(ParseCssTest, ParseAStyleSheet_NastyEscaping) {
   // after the string http://esc.com/'\\ there are some stray tokens. This is
   // difficult to read in the C++ source due to the double escaping, but the
   // parser deals with it OK.
-  // TODO(johannes): Should we verify the parameters for the function token?
   vector<char32_t> css = htmlparser::Strings::Utf8ToCodepoints(
       ".a { background-image:url(\"http://esc.com/'\\\\\"/c.png\") } ");
   vector<unique_ptr<ErrorToken>> errors;
@@ -2269,14 +2260,10 @@ TEST(ParseCssTest, ExtractUrls_FindsFontInFontFace) {
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, AmpCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), R""([
-
-])"");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   vector<unique_ptr<ParsedCssUrl>> parsed_urls;
   ExtractUrls(*stylesheet, &parsed_urls, &errors);
-  EXPECT_EQ(JsonFromList(errors), R""([
-
-])"");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   EXPECT_EQ(JsonFromList(parsed_urls), R""([
   {
     "tokentype": "PARSED_CSS_URL",
@@ -2299,10 +2286,10 @@ TEST(ParseCssTest, ExtractUrls_SupportsImageUrlWithUnicode) {
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, AmpCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   vector<unique_ptr<ParsedCssUrl>> parsed_urls;
   ExtractUrls(*stylesheet, &parsed_urls, &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   EXPECT_EQ(JsonFromList(parsed_urls), R""([
   {
     "tokentype": "PARSED_CSS_URL",
@@ -2330,10 +2317,10 @@ TEST(ParseCssTest, ExtractUrls_LongerExample) {
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, AmpCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   vector<unique_ptr<ParsedCssUrl>> parsed_urls;
   ExtractUrls(*stylesheet, &parsed_urls, &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   EXPECT_EQ(JsonFromList(parsed_urls), R""([
   {
     "tokentype": "PARSED_CSS_URL",
@@ -2388,10 +2375,10 @@ TEST(ParseCssTest, ExtractUrls_WithWindowsNewlines) {
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, AmpCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   vector<unique_ptr<ParsedCssUrl>> parsed_urls;
   ExtractUrls(*stylesheet, &parsed_urls, &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   EXPECT_EQ(JsonFromList(parsed_urls), R""([
   {
     "tokentype": "PARSED_CSS_URL",
@@ -2427,7 +2414,7 @@ TEST(ParseCssTest, ExtractUrls_InvalidArgumentsInsideUrlFunctionYieldsError) {
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, AmpCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   vector<unique_ptr<ParsedCssUrl>> parsed_urls;
   ExtractUrls(*stylesheet, &parsed_urls, &errors);
   EXPECT_EQ(JsonFromList(errors), R""([
@@ -2441,7 +2428,22 @@ TEST(ParseCssTest, ExtractUrls_InvalidArgumentsInsideUrlFunctionYieldsError) {
     ]
   }
 ])"");
-  EXPECT_EQ(JsonFromList(parsed_urls), "[\n\n]");
+  EXPECT_EQ(JsonFromList(parsed_urls), "[]");
+}
+
+TEST(ParseCssTest, ParseMediaQueries_SemicolonTerminatedQuery) {
+  vector<char32_t> css = htmlparser::Strings::Utf8ToCodepoints("@media ;");
+  vector<unique_ptr<ErrorToken>> parse_errors;
+  vector<unique_ptr<Token>> tokens =
+      Tokenize(&css, /*line=*/1, /*col=*/0, &parse_errors);
+  unique_ptr<Stylesheet> stylesheet =
+      ParseAStylesheet(&tokens, AmpCssParsingConfig(), &parse_errors);
+  EXPECT_EQ(JsonFromList(parse_errors), "[]");
+
+  std::vector<unique_ptr<ErrorToken>> media_errors;
+  std::vector<unique_ptr<Token>> media_types, media_features;
+  ParseMediaQueries(*stylesheet, &media_types, &media_features, &media_errors);
+  EXPECT_EQ(media_errors.size(), 0);
 }
 
 unique_ptr<Stylesheet> MediaQueryStyleSheet(const std::string& media_query) {
@@ -2452,7 +2454,7 @@ unique_ptr<Stylesheet> MediaQueryStyleSheet(const std::string& media_query) {
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> stylesheet =
       ParseAStylesheet(&tokens, AmpCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   return stylesheet;
 }
 
@@ -2523,7 +2525,7 @@ TEST(ParseCssTest, ParseMediaQueries_ExtractsTypesAndFeatures) {
   vector<unique_ptr<Token>> media_types, media_features;
   ParseMediaQueries(*MediaQueryStyleSheet("screen and (color)"), &media_types,
                     &media_features, &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   EXPECT_EQ(JsonFromList(media_types),
             R""([
   {
@@ -2591,7 +2593,7 @@ TEST(ParseCssTest, ParseInlineStyle_EmptySuccessful) {
   vector<unique_ptr<Declaration>> declarations =
       ParseInlineStyle(&tokens, &errors);
   EXPECT_EQ(0, errors.size());
-  EXPECT_EQ(JsonFromList(declarations), "[\n\n]");
+  EXPECT_EQ(JsonFromList(declarations), "[]");
 }
 
 TEST(ParseCssTest, ParseInlineStyle_Successful) {
@@ -2838,7 +2840,7 @@ vector<unique_ptr<Token>> ParseSelectorForTest(const std::string& selector) {
       Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
   unique_ptr<Stylesheet> sheet =
       ParseAStylesheet(&tokens, AmpCssParsingConfig(), &errors);
-  EXPECT_EQ(JsonFromList(errors), "[\n\n]");
+  EXPECT_EQ(JsonFromList(errors), "[]");
   CHECK_EQ(1, sheet->rules().size());
   Rule* rule = (*sheet->mutable_rules()).front().get();
   CHECK_EQ(TokenType::QUALIFIED_RULE, rule->Type());
@@ -3225,9 +3227,7 @@ TEST(ParseCssTest, ParseASelector) {
         "pos": 0,
         "endPos": 3
       },
-      "otherSelectors":      [
-
-      ]
+      "otherSelectors":      []
     },
     "right":    {
       "tokentype": "SIMPLE_SELECTOR_SEQUENCE",
@@ -3241,9 +3241,7 @@ TEST(ParseCssTest, ParseASelector) {
         "pos": 4,
         "endPos": 7
       },
-      "otherSelectors":      [
-
-      ]
+      "otherSelectors":      []
     }
   },
   "right":  {
@@ -3258,9 +3256,7 @@ TEST(ParseCssTest, ParseASelector) {
       "pos": 10,
       "endPos": 13
     },
-    "otherSelectors":    [
-
-    ]
+    "otherSelectors":    []
   }
 })"");
 }
@@ -3340,9 +3336,7 @@ TEST(ParseCssTest, ParsesASelectorsGroup) {
         "pos": 0,
         "endPos": 3
       },
-      "otherSelectors":      [
-
-      ]
+      "otherSelectors":      []
     },
     {
       "tokentype": "SIMPLE_SELECTOR_SEQUENCE",
@@ -3356,9 +3350,7 @@ TEST(ParseCssTest, ParsesASelectorsGroup) {
         "pos": 5,
         "endPos": 8
       },
-      "otherSelectors":      [
-
-      ]
+      "otherSelectors":      []
     },
     {
       "tokentype": "SIMPLE_SELECTOR_SEQUENCE",
@@ -3372,9 +3364,7 @@ TEST(ParseCssTest, ParsesASelectorsGroup) {
         "pos": 12,
         "endPos": 15
       },
-      "otherSelectors":      [
-
-      ]
+      "otherSelectors":      []
     }
   ]
 })"");
@@ -3785,25 +3775,46 @@ TEST(ParseCssTest, ParseSelectors_ReportsErrorForUnparsedRemainderOfInput) {
 })"");
 }
 
+TEST(ParseCssTest, SelectorParserRecordsOneParsingError) {
+  vector<char32_t> css = htmlparser::Strings::Utf8ToCodepoints("/*error*/ {}");
+  vector<unique_ptr<ErrorToken>> errors;
+  vector<unique_ptr<Token>> tokens =
+      Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
+  unique_ptr<Stylesheet> stylesheet =
+      ParseAStylesheet(&tokens, AmpCssParsingConfig(), &errors);
+  EXPECT_EQ(0, errors.size());
+  SelectorVisitor visitor(&errors);
+  stylesheet->Accept(&visitor);
+  EXPECT_EQ(1, errors.size());
+}
+
 class CollectCombinatorNodes : public SelectorVisitor {
  public:
-  vector<const Combinator*> combinators_;
+  CollectCombinatorNodes() : SelectorVisitor(&errors_) {}
+  vector<unique_ptr<Token>> combinators_;
+  vector<unique_ptr<ErrorToken>> errors_;
 
   void VisitCombinator(const Combinator& combinator) override {
-    combinators_.push_back(&combinator);
+    combinators_.push_back(combinator.Clone());
   }
 };
+
 TEST(ParseCssTest, SelectorParserImplementsVisitorPattern) {
-  vector<unique_ptr<Token>> tokens = ParseSelectorForTest("a > b c + d ~ e");
-  TokenStream token_stream(std::move(tokens));
-  token_stream.Consume();
-  ErrorTokenOr<Selector> selector = ParseASelectorsGroup(&token_stream);
-  ASSERT_TRUE(std::holds_alternative<unique_ptr<Selector>>(selector));
+  vector<char32_t> css =
+      htmlparser::Strings::Utf8ToCodepoints("a > b c + d ~ e {}");
   CollectCombinatorNodes visitor;
-  TraverseSelectors(*std::get<unique_ptr<Selector>>(selector), &visitor);
+  vector<unique_ptr<ErrorToken>> errors;
+  vector<unique_ptr<Token>> tokens =
+      Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
+  unique_ptr<Stylesheet> stylesheet =
+      ParseAStylesheet(&tokens, AmpCssParsingConfig(), &errors);
+  EXPECT_EQ(JsonFromList(errors), "[]");
+  stylesheet->Accept(&visitor);
   EXPECT_EQ(4, visitor.combinators_.size());
-  EXPECT_EQ("GENERAL_SIBLING", CombinatorType::Code_Name(
-                                   visitor.combinators_[0]->combinator_type()));
+  Combinator* combinator =
+      static_cast<Combinator*>(visitor.combinators_[0].get());
+  EXPECT_EQ("GENERAL_SIBLING",
+            CombinatorType::Code_Name(combinator->combinator_type()));
   EXPECT_EQ(1, visitor.combinators_[0]->line());
   EXPECT_EQ(12, visitor.combinators_[0]->col());
 
@@ -3831,9 +3842,7 @@ TEST(ParseCssTest, SelectorParserImplementsVisitorPattern) {
         "pos": 0,
         "endPos": 1
       },
-      "otherSelectors":      [
-
-      ]
+      "otherSelectors":      []
     },
     "right":    {
       "tokentype": "SIMPLE_SELECTOR_SEQUENCE",
@@ -3847,9 +3856,7 @@ TEST(ParseCssTest, SelectorParserImplementsVisitorPattern) {
         "pos": 4,
         "endPos": 5
       },
-      "otherSelectors":      [
-
-      ]
+      "otherSelectors":      []
     }
   },
   "right":  {
@@ -3864,24 +3871,23 @@ TEST(ParseCssTest, SelectorParserImplementsVisitorPattern) {
       "pos": 6,
       "endPos": 7
     },
-    "otherSelectors":    [
-
-    ]
+    "otherSelectors":    []
   }
 })"");
 }
 
-// Collects type selectors that match a body tag. This is useful for the
-// A4A project (http://go/a4areserializer).
+// Collects type selectors that match a body tag.
 class CollectBodyTypeSelectors : public SelectorVisitor {
  public:
-  vector<const TypeSelector*> body_selectors_;
+  CollectBodyTypeSelectors() : SelectorVisitor(&errors_) {}
+  vector<unique_ptr<Token>> body_selectors_;
+  vector<unique_ptr<ErrorToken>> errors_;
 
   void VisitTypeSelector(const TypeSelector& selector) override {
     if (selector.element_name() == "body" &&
         (selector.namespace_prefix() == nullptr ||
          *selector.namespace_prefix() == "*"))
-      body_selectors_.push_back(&selector);
+      body_selectors_.push_back(selector.Clone());
   }
 };
 
@@ -3892,22 +3898,24 @@ TEST(ParseCssTest, ExtractBodySelectorPositions) {
       "a[body=foo].body "    // no match
       "body[bar] "           // pos: 50 end_pos: 54
       "a,body,div "          // pos: 62 end_pos: 66
-      ":not(body) "          // no match (todo?)
+      ":not(body) "          // no match
       "body > div "          // pos: 82 end_pos: 86
-      "svg|body");           // no match due to filtering in VisitTypeSelector
-  vector<unique_ptr<Token>> tokens = ParseSelectorForTest(selector_str);
-  TokenStream token_stream(std::move(tokens));
-  token_stream.Consume();
-  ErrorTokenOr<Selector> selector = ParseASelectorsGroup(&token_stream);
-  // Parsing is successful. If it wasn't, see for instance
-  // ParseSelectors_ReportsErrorForUnparsedRemainderOfInput for how to
-  // extract the error.
-  ASSERT_TRUE(std::holds_alternative<unique_ptr<Selector>>(selector));
+      "svg|body {}");        // no match due to filtering in VisitTypeSelector
+  vector<char32_t> css = htmlparser::Strings::Utf8ToCodepoints(selector_str);
   CollectBodyTypeSelectors visitor;
-  TraverseSelectors(*std::get<unique_ptr<Selector>>(selector), &visitor);
+  vector<unique_ptr<ErrorToken>> errors;
+  vector<unique_ptr<Token>> tokens =
+      Tokenize(&css, /*line=*/1, /*col=*/0, &errors);
+  unique_ptr<Stylesheet> stylesheet =
+      ParseAStylesheet(&tokens, AmpCssParsingConfig(), &errors);
+  EXPECT_EQ(JsonFromList(errors), "[]");
+  stylesheet->Accept(&visitor);
+
   vector<std::pair<int, int>> positions;
-  for (const TypeSelector* s : visitor.body_selectors_)
+  for (const unique_ptr<Token>& sp : visitor.body_selectors_) {
+    TypeSelector* s = static_cast<TypeSelector*>(sp.get());
     positions.emplace_back(s->pos(), s->end_pos());
+  }
 
   vector<std::pair<int, int>> expected = {
       {0, 4}, {19, 25}, {50, 54}, {62, 66}, {82, 86}};
@@ -3922,7 +3930,7 @@ TEST(ParseCssTest, ExtractBodySelectorPositions) {
     EXPECT_EQ(6, length);
     EXPECT_EQ("*|body", selector_str.substr(segment.first, length));
   }
-}
+}  // namespace
 
 TEST(ParseCssTest, CloneToken) {
   IdentToken identtoken("body");
diff --git a/validator/htmlparser/data/BUILD b/validator/cpp/htmlparser/data/BUILD
similarity index 100%
rename from validator/htmlparser/data/BUILD
rename to validator/cpp/htmlparser/data/BUILD
diff --git a/validator/htmlparser/data/CaseFolding.txt b/validator/cpp/htmlparser/data/CaseFolding.txt
similarity index 100%
rename from validator/htmlparser/data/CaseFolding.txt
rename to validator/cpp/htmlparser/data/CaseFolding.txt
diff --git a/validator/htmlparser/data/amptags.txt b/validator/cpp/htmlparser/data/amptags.txt
similarity index 99%
rename from validator/htmlparser/data/amptags.txt
rename to validator/cpp/htmlparser/data/amptags.txt
index 1e2768cd0773e..2ba829fba7b97 100644
--- a/validator/htmlparser/data/amptags.txt
+++ b/validator/cpp/htmlparser/data/amptags.txt
@@ -106,7 +106,6 @@ amp-reddit
 amp-riddle-quiz
 amp-script
 amp-selector
-amp-share-tracking
 amp-sidebar
 amp-skimlinks
 amp-smartlinks
diff --git a/validator/htmlparser/data/entities.json b/validator/cpp/htmlparser/data/entities.json
similarity index 100%
rename from validator/htmlparser/data/entities.json
rename to validator/cpp/htmlparser/data/entities.json
diff --git a/validator/htmlparser/data/extras.txt b/validator/cpp/htmlparser/data/extras.txt
similarity index 100%
rename from validator/htmlparser/data/extras.txt
rename to validator/cpp/htmlparser/data/extras.txt
diff --git a/validator/htmlparser/data/htmlattributes.txt b/validator/cpp/htmlparser/data/htmlattributes.txt
similarity index 100%
rename from validator/htmlparser/data/htmlattributes.txt
rename to validator/cpp/htmlparser/data/htmlattributes.txt
diff --git a/validator/htmlparser/data/htmltags.txt b/validator/cpp/htmlparser/data/htmltags.txt
similarity index 100%
rename from validator/htmlparser/data/htmltags.txt
rename to validator/cpp/htmlparser/data/htmltags.txt
diff --git a/validator/htmlparser/data/javascriptevents.txt b/validator/cpp/htmlparser/data/javascriptevents.txt
similarity index 100%
rename from validator/htmlparser/data/javascriptevents.txt
rename to validator/cpp/htmlparser/data/javascriptevents.txt
diff --git a/validator/htmlparser/data/jsongrammar.txt b/validator/cpp/htmlparser/data/jsongrammar.txt
similarity index 100%
rename from validator/htmlparser/data/jsongrammar.txt
rename to validator/cpp/htmlparser/data/jsongrammar.txt
diff --git a/validator/htmlparser/defer.h b/validator/cpp/htmlparser/defer.h
similarity index 88%
rename from validator/htmlparser/defer.h
rename to validator/cpp/htmlparser/defer.h
index 2be6f3a7c0193..1689f00eb301d 100644
--- a/validator/htmlparser/defer.h
+++ b/validator/cpp/htmlparser/defer.h
@@ -45,6 +45,19 @@
 // .   }
 // .   return;
 // }
+//
+// defer() converts the block into lambda and captures all the variables in
+// current block by reference. So instead of writing the following:
+// defer([&]() {
+//   delete mylocal_fd;
+//   fd_counter++;
+// });
+//
+// one can write:
+// defer({
+//   delete mylocal_fd;
+//   fd_counter++;
+// });
 
 #ifndef HTMLPARSER__DEFER_H_
 #define HTMLPARSER__DEFER_H_
diff --git a/validator/htmlparser/doctype.cc b/validator/cpp/htmlparser/doctype.cc
similarity index 87%
rename from validator/htmlparser/doctype.cc
rename to validator/cpp/htmlparser/doctype.cc
index fd8ff00ef6e3b..6ce45e6c2e1ba 100644
--- a/validator/htmlparser/doctype.cc
+++ b/validator/cpp/htmlparser/doctype.cc
@@ -48,7 +48,7 @@ std::string ReadUntil(std::string_view* s, const std::string& stop_chars) {
 }
 
 void StripSelfClosingSlash(std::string_view* s) {
-  while (s->back() == '/') {
+  while (!s->empty() && s->back() == '/') {
     s->remove_suffix(1);
   }
 }
@@ -92,12 +92,17 @@ void SkipLangAttribute(std::string_view* s) {
     while (!s->empty()) {
       i = s->find(quote, i);
       if (i != std::string_view::npos) {
-        if (s->at(i - 1) == '\\') {
+        if (i > 0 && s->at(i - 1) == '\\') {
           continue;
         }
         break;
       }
     }
+
+    // Nothing after quote start.
+    // <!doctype lang='> or <!doctype lang=">
+    if (s->empty()) return;
+
     std::string value(s->substr(0, i));
     Attribute lang_attr{"", "lang", value};
     s->remove_prefix(i + 1);
@@ -108,8 +113,7 @@ void SkipLangAttribute(std::string_view* s) {
   std::string lang_val = ReadUntil(s, Strings::kWhitespace);
 }
 
-std::tuple<std::unique_ptr<Node>, bool> ParseDoctype(std::string_view s) {
-  auto n = std::unique_ptr<Node>(Node::make_node(NodeType::DOCTYPE_NODE));
+bool ParseDoctype(std::string_view s, Node* doctype_node) {
   bool quirks = false;
 
   SkipLeadingWhitespace(&s);
@@ -137,12 +141,12 @@ std::tuple<std::unique_ptr<Node>, bool> ParseDoctype(std::string_view s) {
   }
 
   Strings::ToLower(&data);
-  n->SetData(data);
+  doctype_node->SetData(data);
 
   if (s.size() < 6) {
     // It can't start with "PUBLIC" or "SYSTEM".
     // Ignore the rest of the string.
-    return std::make_tuple(std::move(n), quirks);
+    return quirks;
   }
 
   std::string key(s.data(), 6);
@@ -156,7 +160,8 @@ std::tuple<std::unique_ptr<Node>, bool> ParseDoctype(std::string_view s) {
     if (quote != '"' && quote != '\'') break;
     s.remove_prefix(1);
     std::string val = ReadUntil(&s, {quote});
-    n->AddAttribute({"" /* namespace */, key /* key */, val /* value */});
+    doctype_node->AddAttribute(
+        {"" /* namespace */, key /* key */, val /* value */});
 
     if (key == "public") {
       key = "system";
@@ -168,9 +173,9 @@ std::tuple<std::unique_ptr<Node>, bool> ParseDoctype(std::string_view s) {
   if (!key.empty() || !s.empty()) {
     quirks = true;
   } else {
-    std::string ns = n->Attributes()[0].name_space;
-    std::string k = n->Attributes()[0].key;
-    std::string v = n->Attributes()[0].value;
+    std::string ns = doctype_node->Attributes()[0].name_space;
+    std::string k = doctype_node->Attributes()[0].key;
+    std::string v = doctype_node->Attributes()[0].value;
     if (k == "public") {
       if (Strings::EqualFold(v, "-//w3o//dtd w3 html strict 3.0//en//") ||
           Strings::EqualFold(v, "-/w3d/dtd html 4.0 transitional/en") ||
@@ -187,13 +192,13 @@ std::tuple<std::unique_ptr<Node>, bool> ParseDoctype(std::string_view s) {
 
       // The following two public IDs only cause quirks mode if there is no
       // system ID.
-      if (n->Attributes().size() == 1 &&
+      if (doctype_node->Attributes().size() == 1 &&
           (Strings::StartsWith(v, "-//w3c//dtd html 4.01 frameset//") ||
            Strings::StartsWith(v, "-//w3c//dtd html 4.01 transitional//"))) {
         quirks = true;
       }
     }
-    k = n->Attributes().back().key;
+    k = doctype_node->Attributes().back().key;
     if (k == "system") {
       if (Strings::EqualFold(
           v, "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd")) {
@@ -202,7 +207,7 @@ std::tuple<std::unique_ptr<Node>, bool> ParseDoctype(std::string_view s) {
     }
   }
 
-  return std::make_tuple(std::move(n), quirks);
+  return quirks;
 }
 
 }  // namespace htmlparser
diff --git a/validator/htmlparser/doctype.h b/validator/cpp/htmlparser/doctype.h
similarity index 98%
rename from validator/htmlparser/doctype.h
rename to validator/cpp/htmlparser/doctype.h
index b7c1899b90a2e..ace092ff952eb 100644
--- a/validator/htmlparser/doctype.h
+++ b/validator/cpp/htmlparser/doctype.h
@@ -35,7 +35,7 @@ namespace htmlparser {
 // is DoctypeNode, whose Data is the name, and which has attributes
 // named "system" and "public" for the two identifiers if they were present.
 // bool is quirks. i.e. whether the document should be parsed in "quirks mode".
-std::tuple<std::unique_ptr<Node>, bool> ParseDoctype(std::string_view s);
+bool ParseDoctype(std::string_view s, Node* doctype_node);
 
 // Quirky IDs is a list of public doctype identifiers that cause a document to
 // be interpreted in quirks mode. The identifiers should be in lower case.
diff --git a/validator/cpp/htmlparser/doctype_test.cc b/validator/cpp/htmlparser/doctype_test.cc
new file mode 100644
index 0000000000000..492c78bd33704
--- /dev/null
+++ b/validator/cpp/htmlparser/doctype_test.cc
@@ -0,0 +1,114 @@
+//
+// 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.
+//
+
+#include "doctype.h"
+#include "node.h"
+
+#include "gtest/gtest.h"
+
+using htmlparser::Node;
+using htmlparser::NodeType;
+
+TEST(DoctypeTest, ParseTest) {
+  // <!doctype html> The only valid html5 doctype.
+  Node doctype_node(NodeType::DOCTYPE_NODE);
+  bool quirks_mode = htmlparser::ParseDoctype("html", &doctype_node);
+  EXPECT_FALSE(quirks_mode);
+  EXPECT_EQ(doctype_node.Type(), htmlparser::NodeType::DOCTYPE_NODE);
+  EXPECT_EQ(doctype_node.Data(), "html");
+
+  Node doctype_node2(NodeType::DOCTYPE_NODE);
+  bool quirks_mode2 = htmlparser::ParseDoctype(
+      "HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" "
+      "\"http://www.w3.org/TR/html4/strict.dtd\"", &doctype_node2);
+  EXPECT_TRUE(quirks_mode2);
+  EXPECT_EQ(doctype_node2.Type(), htmlparser::NodeType::DOCTYPE_NODE);
+  EXPECT_FALSE(doctype_node2.Attributes().empty());
+  EXPECT_EQ(doctype_node2.Attributes().size(), 2);
+  EXPECT_EQ(doctype_node2.Attributes()[0].key, "public");
+  EXPECT_EQ(doctype_node2.Attributes()[0].value, "-//W3C//DTD HTML 4.01//EN");
+  EXPECT_EQ(doctype_node2.Attributes()[1].key, "system");
+  EXPECT_EQ(doctype_node2.Attributes()[1].value,
+         "http://www.w3.org/TR/html4/strict.dtd");
+  EXPECT_EQ(doctype_node2.Data(), "html");
+
+  Node doctype_node3(NodeType::DOCTYPE_NODE);
+  bool quirks_mode3 = htmlparser::ParseDoctype("html foo bar", &doctype_node3);
+  EXPECT_TRUE(quirks_mode3);
+  EXPECT_EQ(doctype_node3.Type(), htmlparser::NodeType::DOCTYPE_NODE);
+
+  // Spaces OK.
+  Node doctype_node4(NodeType::DOCTYPE_NODE);
+  bool quirks_mode4 = htmlparser::ParseDoctype("            html           ",
+                                               &doctype_node4);
+  EXPECT_FALSE(quirks_mode4);
+  EXPECT_EQ(doctype_node4.Type(), htmlparser::NodeType::DOCTYPE_NODE);
+  EXPECT_EQ(doctype_node4.Data(), "html");
+  EXPECT_TRUE(doctype_node4.Attributes().empty());
+
+  // Case sensitivity OK.
+  Node doctype_node5(NodeType::DOCTYPE_NODE);
+  bool quirks_mode5 = htmlparser::ParseDoctype("            HTML           ",
+                                               &doctype_node5);
+  EXPECT_FALSE(quirks_mode5);
+  EXPECT_EQ(doctype_node5.Type(), htmlparser::NodeType::DOCTYPE_NODE);
+  EXPECT_EQ(doctype_node5.Data(), "html");
+  EXPECT_TRUE(doctype_node5.Attributes().empty());
+
+  Node doctype_node6(NodeType::DOCTYPE_NODE);
+  bool quirks_mode6 = htmlparser::ParseDoctype("lang=\"en\" html",
+                                               &doctype_node6);
+  EXPECT_FALSE(quirks_mode6);
+
+  Node doctype_node7(NodeType::DOCTYPE_NODE);
+  bool quirks_mode7 = htmlparser::ParseDoctype("html lang=\"en\"",
+                                               &doctype_node7);
+  EXPECT_FALSE(quirks_mode7);
+
+  Node doctype_node8(NodeType::DOCTYPE_NODE);
+  bool quirks_mode8 = htmlparser::ParseDoctype("html lang='en'",
+                                               &doctype_node8);
+  EXPECT_FALSE(quirks_mode8);
+
+  // lang attribute with no value.
+  Node doctype_node9(NodeType::DOCTYPE_NODE);
+  bool quirks_mode9 = htmlparser::ParseDoctype("html lang",
+                                               &doctype_node9);
+  EXPECT_FALSE(quirks_mode9);
+
+  // attribute value without quote.
+  Node doctype_node10(NodeType::DOCTYPE_NODE);
+  bool quirks_mode10 = htmlparser::ParseDoctype("html lang=en",
+                                                &doctype_node10);
+  EXPECT_FALSE(quirks_mode10);
+
+  // Spaces and new lines.
+  Node doctype_node11(NodeType::DOCTYPE_NODE);
+  bool quirks_mode11  =
+      htmlparser::ParseDoctype(R"DOCTYPE(          html                 lang             =
+                          "en")DOCTYPE", &doctype_node11);
+  EXPECT_FALSE(quirks_mode11);
+
+  // With self closing slash.
+  Node doctype_node12(NodeType::DOCTYPE_NODE);
+  bool quirks_mode12 = htmlparser::ParseDoctype("html lang /", &doctype_node12);
+  EXPECT_FALSE(quirks_mode12);
+
+  Node doctype_node13(NodeType::DOCTYPE_NODE);
+  bool quirks_mode13 = htmlparser::ParseDoctype("html lang=en /////////////",
+                                                &doctype_node13);
+  EXPECT_FALSE(quirks_mode13);
+}
diff --git a/validator/cpp/htmlparser/document.cc b/validator/cpp/htmlparser/document.cc
new file mode 100644
index 0000000000000..70b7b05afbbb0
--- /dev/null
+++ b/validator/cpp/htmlparser/document.cc
@@ -0,0 +1,45 @@
+//
+// Copyright 2020 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.
+//
+
+#include "absl/flags/flag.h"
+#include "document.h"
+
+ABSL_FLAG(std::size_t, htmlparser_nodes_allocator_block_size,
+          256 << 10 /* 256k */,
+          "Allocator block size for html nodes.");
+
+namespace htmlparser {
+
+Document::Document() :
+    node_allocator_(new Allocator<Node>(
+        ::absl::GetFlag(FLAGS_htmlparser_nodes_allocator_block_size))),
+    root_node_(NewNode(NodeType::DOCUMENT_NODE)) {}
+
+Node* Document::NewNode(NodeType node_type, Atom atom) {
+  return node_allocator_->Construct(node_type, atom);
+}
+
+Node* Document::CloneNode(const Node* from) {
+  Node* clone = NewNode(from->Type());
+  clone->atom_ = from->atom_;
+  clone->data_ = from->data_;
+  clone->attributes_.reserve(from->Attributes().size());
+  std::copy(from->Attributes().begin(), from->Attributes().end(),
+            std::back_inserter(clone->attributes_));
+  return clone;
+}
+
+}  // namespace htmlparser
diff --git a/validator/cpp/htmlparser/document.h b/validator/cpp/htmlparser/document.h
new file mode 100644
index 0000000000000..7cc79048e0110
--- /dev/null
+++ b/validator/cpp/htmlparser/document.h
@@ -0,0 +1,80 @@
+//
+// Copyright 2020 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.
+//
+
+#ifndef HTMLPARSER__DOCUMENT_H_
+#define HTMLPARSER__DOCUMENT_H_
+
+#include <memory>
+#include <vector>
+
+#include "allocator.h"
+#include "node.h"
+#include "token.h"
+
+namespace htmlparser {
+
+class Parser;
+struct ParseOptions;
+
+// The document class is a wrapper for the DOM tree exposed with RootNode().
+// All the nodes inside the document are owned by document. The nodes are
+// destroyed when Document objects goes out of scope or deleted.
+class Document {
+ public:
+  Document();
+
+  ~Document() = default;
+
+  // Creates a new node. The node is owned by Document and is destroyed when
+  // document is destructed.
+  Node* NewNode(NodeType node_type, Atom atom = Atom::UNKNOWN);
+
+  // Returns the root node of a DOM tree. Node* owned by document.
+  Node* RootNode() const { return root_node_; }
+
+  // Returns list of nodes parsed as a document fragment. All the Nodes are
+  // owned by the document.
+  const std::vector<Node*> FragmentNodes() const { return fragment_nodes_; }
+
+ private:
+  // Returns a new node with the same type, data and attributes.
+  // The clone has no parent, no siblings and no children.
+  // The node is owned by the document and is destroyed when document is
+  // destructed.
+  Node* CloneNode(const Node* from);
+
+  // The node allocator.
+  std::unique_ptr<Allocator<Node>> node_allocator_;
+
+  Node* root_node_;
+  std::vector<Node*> fragment_nodes_{};
+
+  friend class Parser;
+  friend std::unique_ptr<Document> Parse(std::string_view html);
+  friend std::unique_ptr<Document> ParseWithOptions(
+      std::string_view html, const ParseOptions& options);
+  friend std::unique_ptr<Document> ParseFragment(std::string_view html,
+                                                 Node* fragment_parent);
+  friend std::unique_ptr<Document> ParseFragmentWithOptions(
+      const std::string_view html,
+      const ParseOptions& options,
+      Node* fragment_parent);
+};
+
+}  // namespace htmlparser
+
+
+#endif  // HTMLPARSER__DOCUMENT_H_
diff --git a/validator/cpp/htmlparser/elements.h b/validator/cpp/htmlparser/elements.h
new file mode 100644
index 0000000000000..ddf19dcaf7252
--- /dev/null
+++ b/validator/cpp/htmlparser/elements.h
@@ -0,0 +1,135 @@
+//
+// 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.
+//
+
+#ifndef HTMLPARSER__ELEMENTS_H_
+#define HTMLPARSER__ELEMENTS_H_
+
+#include <array>
+
+#include "atom.h"
+
+namespace htmlparser {
+
+inline constexpr std::array<Atom, 19> kBlockElements{
+    Atom::ADDRESS,  Atom::BLOCKQUOTE, Atom::DIV, Atom::DL,
+    Atom::FIELDSET, Atom::FORM,       Atom::H1,  Atom::H2,
+    Atom::H3,       Atom::H4,         Atom::H5,  Atom::H6,
+    Atom::HR,       Atom::NOSCRIPT,   Atom::OL,  Atom::P,
+    Atom::PRE,      Atom::TABLE,      Atom::UL,
+};
+
+inline constexpr std::array<Atom, 8> kRawTextNodes{
+    Atom::IFRAME,    Atom::NOEMBED, Atom::NOFRAMES, Atom::NOSCRIPT,
+    Atom::PLAINTEXT, Atom::SCRIPT,  Atom::STYLE,    Atom::XMP,
+};
+
+// Section 12.1.2, "Elements", gives this list of void elements. Void elements
+// are those that can't have any contents.
+inline constexpr std::array<Atom, 15> kVoidElements{
+    Atom::AREA,    Atom::BASE,   Atom::BR,    Atom::COL,
+    Atom::EMBED,  Atom::HR,    Atom::IMG,
+    Atom::INPUT,   Atom::KEYGEN, Atom::LINK,  Atom::META,
+    Atom::PARAM,   Atom::SOURCE, Atom::TRACK, Atom::WBR,
+};
+
+inline constexpr std::array<Atom, 82> kSpecialElements{
+    Atom::ADDRESS,
+    Atom::APPLET,
+    Atom::AREA,
+    Atom::ARTICLE,
+    Atom::ASIDE,
+    Atom::BASE,
+    Atom::BASEFONT,
+    Atom::BGSOUND,
+    Atom::BLOCKQUOTE,
+    Atom::BODY,
+    Atom::BR,
+    Atom::BUTTON,
+    Atom::CAPTION,
+    Atom::CENTER,
+    Atom::COL,
+    Atom::COLGROUP,
+    Atom::DD,
+    Atom::DETAILS,
+    Atom::DIR,
+    Atom::DIV,
+    Atom::DL,
+    Atom::DT,
+    Atom::EMBED,
+    Atom::FIELDSET,
+    Atom::FIGCAPTION,
+    Atom::FIGURE,
+    Atom::FOOTER,
+    Atom::FORM,
+    Atom::FRAME,
+    Atom::FRAMESET,
+    Atom::H1,
+    Atom::H2,
+    Atom::H3,
+    Atom::H4,
+    Atom::H5,
+    Atom::H6,
+    Atom::HEAD,
+    Atom::HEADER,
+    Atom::HGROUP,
+    Atom::HR,
+    Atom::HTML,
+    Atom::IFRAME,
+    Atom::IMG,
+    Atom::INPUT,
+    Atom::KEYGEN,
+    Atom::LI,
+    Atom::LINK,
+    Atom::LISTING,
+    Atom::MAIN,
+    Atom::MARQUEE,
+    Atom::MENU,
+    Atom::META,
+    Atom::NAV,
+    Atom::NOEMBED,
+    Atom::NOFRAMES,
+    Atom::NOSCRIPT,
+    Atom::OBJECT,
+    Atom::OL,
+    Atom::P,
+    Atom::PARAM,
+    Atom::PLAINTEXT,
+    Atom::PRE,
+    Atom::SCRIPT,
+    Atom::SECTION,
+    Atom::SELECT,
+    Atom::SOURCE,
+    Atom::STYLE,
+    Atom::SUMMARY,
+    Atom::TABLE,
+    Atom::TBODY,
+    Atom::TD,
+    Atom::TEMPLATE,
+    Atom::TEXTAREA,
+    Atom::TFOOT,
+    Atom::TH,
+    Atom::THEAD,
+    Atom::TITLE,
+    Atom::TR,
+    Atom::TRACK,
+    Atom::UL,
+    Atom::WBR,
+    Atom::XMP,
+};
+
+}  // namespace htmlparser
+
+#endif  // HTMLPARSER__ELEMENTS_H_
diff --git a/validator/htmlparser/entity.h b/validator/cpp/htmlparser/entity.h
similarity index 100%
rename from validator/htmlparser/entity.h
rename to validator/cpp/htmlparser/entity.h
diff --git a/validator/htmlparser/entity_test.cc b/validator/cpp/htmlparser/entity_test.cc
similarity index 100%
rename from validator/htmlparser/entity_test.cc
rename to validator/cpp/htmlparser/entity_test.cc
diff --git a/validator/htmlparser/error.cc b/validator/cpp/htmlparser/error.cc
similarity index 100%
rename from validator/htmlparser/error.cc
rename to validator/cpp/htmlparser/error.cc
diff --git a/validator/htmlparser/error.h b/validator/cpp/htmlparser/error.h
similarity index 100%
rename from validator/htmlparser/error.h
rename to validator/cpp/htmlparser/error.h
diff --git a/validator/htmlparser/fileutil.cc b/validator/cpp/htmlparser/fileutil.cc
similarity index 86%
rename from validator/htmlparser/fileutil.cc
rename to validator/cpp/htmlparser/fileutil.cc
index be494be141f9c..080acce9484ae 100644
--- a/validator/htmlparser/fileutil.cc
+++ b/validator/cpp/htmlparser/fileutil.cc
@@ -24,14 +24,25 @@
 #include <sstream>
 
 #include "defer.h"
-#include "error.h"
 #include "strings.h"
 
+// TODO(caoboxiao)
+// The Macro `GLOB_TILDE` is not defined in the WebAssembly environment because
+// WebAssembly does not have the file system, so we have to define this MACRO in
+// order to have this file successfully compiled in WebAssembly. The side
+// effects is minimized because this is a cc file not an h file. In fact, the
+// WebAssembly module never calls the glob function, so it is better to split
+// fileutil.cc into two files, and the WebAssembly module will only depend on
+// the one without glob funcitons.
+#ifndef GLOB_TILDE
+#define GLOB_TILDE (1 << 12)
+#endif
+
 namespace htmlparser {
 
-std::string ReadFile(std::string_view filepath) {
+std::string FileUtil::FileContents(std::string_view filepath) {
   auto str = std::ostringstream{};
-  std::ifstream fd(filepath.data());
+  std::ifstream fd(std::string(filepath), std::ios::in);
   defer(fd.close());
   str << fd.rdbuf();
   return str.str();
diff --git a/validator/htmlparser/fileutil.h b/validator/cpp/htmlparser/fileutil.h
similarity index 77%
rename from validator/htmlparser/fileutil.h
rename to validator/cpp/htmlparser/fileutil.h
index 185f9a05f479a..8aeb07ccd563b 100644
--- a/validator/htmlparser/fileutil.h
+++ b/validator/cpp/htmlparser/fileutil.h
@@ -51,19 +51,18 @@ struct FileReadOptions {
   bool ignore_comments = false;
 
   // Comments character. Ignores lines starting with this character.
-  // TODO: Add support for // style comments.
   char comments_char = '#';
 
   // Converts case of the file content.
-  std::variant<std::monostate,
-               LineTransforms::LowerCase,
-               LineTransforms::UpperCase> case_transform;
+  std::variant<std::monostate, LineTransforms::LowerCase,
+               LineTransforms::UpperCase>
+      case_transform;
 
   // Strips whitespaces.
-  std::variant<std::monostate,
-               LineTransforms::StripWhitespace,
+  std::variant<std::monostate, LineTransforms::StripWhitespace,
                LineTransforms::StripWhitespaceLeft,
-               LineTransforms::StripWhitespaceRight> white_space_transform;
+               LineTransforms::StripWhitespaceRight>
+      white_space_transform;
 
   // Allowed chars per line predicate. If any char that this predicate doesn't
   // allow file line reader returns error.
@@ -73,10 +72,7 @@ struct FileReadOptions {
 
 class FileUtil {
  public:
-  // Following read functions must be used for small files and mostly test cases
-  // These are not efficient and must not be used in production environment.
-  // Use buffered reading or other file util library instead.
-  static std::string ReadFile(std::string_view filepath);
+  static std::string FileContents(std::string_view filepath);
 
   // Different styles of utility functions to read text file contents.
   // All return false, if error reading/processing the file.
@@ -85,18 +81,14 @@ class FileUtil {
   static bool ReadFileLines(const FileReadOptions& options,
                             std::string_view filepath,
                             std::vector<std::string>* output);
-  static bool ReadFileLines(const FileReadOptions& options,
-                            std::istream& fd,
+  static bool ReadFileLines(const FileReadOptions& options, std::istream& fd,
                             std::vector<std::string>* output);
 
   // 2) Reads line by line to provided callback.
   static bool ReadFileLines(const FileReadOptions& options,
-                            std::string_view filepath,
+                            std::string_view filepath, LineCallback callback);
+  static bool ReadFileLines(const FileReadOptions& options, std::istream& fd,
                             LineCallback callback);
-  static bool ReadFileLines(const FileReadOptions& options,
-                            std::istream& fd,
-                            LineCallback callback);
-
 
   // 3) Lookup of single row of key/value multi-line data (separated by a marker
   // or EOF)
@@ -126,8 +118,7 @@ class FileUtil {
   // }
   template <std::size_t RowPrefixNumLines = ULONG_MAX - 1>
   static std::optional<std::string> RowLookup(
-      std::istream& fd,
-      std::string_view marker,
+      std::istream& fd, std::string_view marker,
       std::function<int(std::string_view)> comparator) {
     if (!fd.good()) return std::nullopt;
 
@@ -218,22 +209,20 @@ class FileUtil {
   // into custom datatype T.
   template <typename T = std::string_view>
   static bool ReadFileDataAtMarker(
-      const FileReadOptions& options,
-      std::string_view filepath,
-      std::string_view marker,
-      std::function<void(T)> callback,
-      std::function<T (std::string_view)> post_processing) {
+      const FileReadOptions& options, std::string_view filepath,
+      std::string_view marker, std::function<void(T)> callback,
+      std::function<T(std::string_view)> post_processing) {
     std::stringbuf data_buffer;
-    auto result = ReadFileLines(options, filepath, [&](std::string_view line,
-                                                       int line_number) {
-      if (marker.compare(line) == 0) {
-        callback(post_processing(data_buffer.str()));
-        data_buffer.str("");
-      } else {
-        data_buffer.sputn(line.data(), line.size());
-        data_buffer.sputc('\n');
-      }
-    });
+    auto result = ReadFileLines(
+        options, filepath, [&](std::string_view line, int line_number) {
+          if (marker.compare(line) == 0) {
+            callback(post_processing(data_buffer.str()));
+            data_buffer.str("");
+          } else {
+            data_buffer.sputn(line.data(), line.size());
+            data_buffer.sputc('\n');
+          }
+        });
 
     callback(post_processing(data_buffer.str()));
     return result;
@@ -241,22 +230,20 @@ class FileUtil {
 
   template <typename T = std::string_view>
   static bool ReadFileDataAtMarker(
-      const FileReadOptions& options,
-      std::istream& fd,
-      std::string_view marker,
+      const FileReadOptions& options, std::istream& fd, std::string_view marker,
       std::function<void(T)> callback,
-      std::function<T (std::string_view)> post_processing) {
+      std::function<T(std::string_view)> post_processing) {
     std::stringbuf data_buffer;
-    auto result = ReadFileLines(options, fd, [&](std::string_view line,
-                                                 int line_number) {
-      if (marker.compare(line) == 0) {
-        callback(post_processing(data_buffer.str()));
-        data_buffer.str("");
-      } else {
-        data_buffer.sputn(line.data(), line.size());
-        data_buffer.sputc('\n');
-      }
-    });
+    auto result =
+        ReadFileLines(options, fd, [&](std::string_view line, int line_number) {
+          if (marker.compare(line) == 0) {
+            callback(post_processing(data_buffer.str()));
+            data_buffer.str("");
+          } else {
+            data_buffer.sputn(line.data(), line.size());
+            data_buffer.sputc('\n');
+          }
+        });
 
     // Last record.
     callback(post_processing(data_buffer.str()));
diff --git a/validator/htmlparser/fileutil_test.cc b/validator/cpp/htmlparser/fileutil_test.cc
similarity index 100%
rename from validator/htmlparser/fileutil_test.cc
rename to validator/cpp/htmlparser/fileutil_test.cc
diff --git a/validator/htmlparser/foreign.cc b/validator/cpp/htmlparser/foreign.cc
similarity index 99%
rename from validator/htmlparser/foreign.cc
rename to validator/cpp/htmlparser/foreign.cc
index 064882afa37b0..6da07333d0507 100644
--- a/validator/htmlparser/foreign.cc
+++ b/validator/cpp/htmlparser/foreign.cc
@@ -100,7 +100,7 @@ void AdjustForeignAttributes(std::vector<Attribute>* attrs) {
   for (Attribute& attr : *attrs) {
     if (attr.key.empty() || attr.key.at(0) != 'x') continue;
     if (std::find(keys.begin(), keys.end(), attr.key) != keys.end()) {
-      int j = attr.key.find(":");
+      int j = attr.key.find(':');
       attr.name_space = attr.key.substr(0, j);
       attr.key = attr.key.substr(j + 1);
     }
diff --git a/validator/htmlparser/foreign.h b/validator/cpp/htmlparser/foreign.h
similarity index 100%
rename from validator/htmlparser/foreign.h
rename to validator/cpp/htmlparser/foreign.h
diff --git a/validator/htmlparser/grammar/BUILD b/validator/cpp/htmlparser/grammar/BUILD
similarity index 100%
rename from validator/htmlparser/grammar/BUILD
rename to validator/cpp/htmlparser/grammar/BUILD
diff --git a/validator/htmlparser/grammar/tablebuilder.cc b/validator/cpp/htmlparser/grammar/tablebuilder.cc
similarity index 79%
rename from validator/htmlparser/grammar/tablebuilder.cc
rename to validator/cpp/htmlparser/grammar/tablebuilder.cc
index 51fda76a2946b..8412c6b82d4a0 100644
--- a/validator/htmlparser/grammar/tablebuilder.cc
+++ b/validator/cpp/htmlparser/grammar/tablebuilder.cc
@@ -14,31 +14,28 @@
 // limitations under the license.
 //
 
-#include <fstream>
+#include "grammar/tablebuilder.h"
+
 #include <filesystem>
+#include <fstream>
 #include <iostream>
 
 #include "defer.h"
 #include "fileutil.h"
-#include "grammar/tablebuilder.h"
 #include "strings.h"
 
 namespace htmlparser::grammar {
 
 constexpr std::string_view BOLD_RED_BEGIN = "\033[1;31m";
 constexpr std::string_view BOLD_RED_END = "\033[0m";
-std::string PrintChar(char c);
 
 TableBuilder::TableBuilder(std::string_view grammar_file_path,
-                           OutputFileOptions options) :
-  grammar_file_path_(grammar_file_path),
-  header_options_(options) {
-}
+                           OutputFileOptions options)
+    : grammar_file_path_(grammar_file_path), header_options_(options) {}
 
 bool TableBuilder::ParseRulesAndGenerateTable() {
   if (!std::filesystem::exists(grammar_file_path_)) {
-    std::cerr << BOLD_RED_BEGIN << "Cannot read file: "
-              << grammar_file_path_
+    std::cerr << BOLD_RED_BEGIN << "Cannot read file: " << grammar_file_path_
               << BOLD_RED_END << "\n";
     return false;
   }
@@ -61,11 +58,12 @@ bool TableBuilder::ParseRulesAndGenerateTable() {
   }
 
   std::set<std::string> unused_states;
-  std::set_difference(
-      declared_states.begin(), declared_states.end(),
-      transition_states.begin(), transition_states.end(),
-      std::inserter(unused_states, unused_states.begin()));
+  std::set_difference(declared_states.begin(), declared_states.end(),
+                      transition_states.begin(), transition_states.end(),
+                      std::inserter(unused_states, unused_states.begin()));
 
+  unused_states.erase("PUSH");
+  unused_states.erase("POP");
   if (!unused_states.empty()) {
     std::cerr << BOLD_RED_BEGIN << "Following states defined but not used: \n";
     for (auto& us : unused_states) {
@@ -81,6 +79,8 @@ bool TableBuilder::ParseRulesAndGenerateTable() {
       declared_states.begin(), declared_states.end(),
       std::inserter(undefined_states, undefined_states.begin()));
 
+  undefined_states.erase("PUSH");
+  undefined_states.erase("POP");
   if (!undefined_states.empty()) {
     std::cerr << BOLD_RED_BEGIN << "Following states not defined: \n";
     for (auto& us : undefined_states) {
@@ -99,11 +99,9 @@ bool TableBuilder::ParseRulesAndGenerateTable() {
 
   declared_states.erase("PUSH");
   declared_states.erase("POP");
-
   if (declared_states.size() > 256) {
-    std::cerr << "Maximum 256 states supported. "
-              << declared_states.size() << " declared."
-              << std::endl;
+    std::cerr << "Maximum 256 states supported. " << declared_states.size()
+              << " declared." << std::endl;
     return false;
   }
 
@@ -177,7 +175,7 @@ bool TableBuilder::OutputHeaderFile(
     const std::array<int, 127>& tokenindexes,
     const std::map<uint8_t, std::vector<uint32_t>>& table) {
   std::ofstream fd(header_options_.output_file_path);
-  htmlparser::Defer ____([&]() {fd.close();});
+  htmlparser::Defer ____([&]() { fd.close(); });
 
   fd << "// -*- C++ -*-\n";
 
@@ -233,20 +231,14 @@ inline static bool HasPopBit(uint32_t code);
   fd << "constexpr std::array<int, 127> kTokenIndexes {\n    ";
   for (int i = 0; i < tokenindexes.size(); i++) {
     fd << tokenindexes[i];
-    if (tokenindexes[i] < charset_.size()) {
-      fd << " /* " << PrintChar(
-          *(std::next(charset_.begin(), tokenindexes[i]))) << " */";
-    }
-    fd << (i > 0 && ((i + 1) % 6 == 0) ? ",\n    " : ", ");
+    fd << (i > 0 && ((i + 1) % 8 == 0) ? ",\n    " : ", ");
   }
   fd << "};\n\n";
 
-  if (charset_.find(0x80) == charset_.end())
-    charset_.insert(0x80);
+  if (charset_.find(0x80) == charset_.end()) charset_.insert(0x80);
 
   fd << "constexpr std::array<std::array<uint32_t, " << charset_.size() + 1
-     << ">, "
-     << declared_states.size() << "> kParseStates {{\n";
+     << ">, " << declared_states.size() << "> kParseStates {{\n";
 
   for (auto& [k, v] : table) {
     fd << "    // " << *std::next(declared_states.begin(), k) << "\n";
@@ -254,10 +246,8 @@ inline static bool HasPopBit(uint32_t code);
     fd << "    {";
     for (int i = 0; i < v.size(); i++) {
       fd << "0x" << std::hex << v[i];
-      fd << " /* " << PrintChar(*(std::next(charset_.begin(), i)))
-         << " */";
       if (i < v.size() - 1) {
-        fd << (i > 0 && ((i + 1) % 4 == 0) ? ",\n     " : ", ");
+        fd << (i > 0 && ((i + 1) % 8 == 0) ? ",\n     " : ", ");
       }
     }
 
@@ -292,9 +282,6 @@ inline static bool HasPopBit(uint32_t code) {
   return ((code & 0x40) >> 6) == 1;
 }
 
-// TODO: In follow up change modify the signature to accept a unicode
-// character, that is char32_t and based on the charset for this state return
-// the code from second last or last column accordingly.
 inline static uint32_t CodeForToken(unsigned char c, uint8_t state) {
   if (c > 127) {
 )";
@@ -319,43 +306,20 @@ inline static uint32_t CodeForToken(unsigned char c, uint8_t state) {
 
 std::optional<uint32_t> TableBuilder::ComputeState(uint8_t row, Rule r) {
   if (r.transition.size() == 3) {
-    return ComputeStateBits(
-        0,
-        state_codes_[r.transition[2]],
-        state_codes_[r.transition[0]],
-        true,
-        false);
+    return ComputeStateBits(0, state_codes_[r.transition[2]],
+                            state_codes_[r.transition[0]], true, false);
   } else if (r.transition.size() == 2) {
     if (r.transition[0] == "PUSH") {
-      return ComputeStateBits(
-            0,
-            state_codes_[r.transition[2]],
-            0,
-            true,
-            false);
+      return ComputeStateBits(0, state_codes_[r.transition[2]], 0, true, false);
     } else if (r.transition[1] == "PUSH") {
-      return ComputeStateBits(
-          0,
-          0,
-          state_codes_[r.transition[2]],
-          true,
-          false);
+      return ComputeStateBits(0, 0, state_codes_[r.transition[2]], true, false);
     }
   } else if (r.transition.size() == 1) {
     if (r.transition[0] == "POP") {
-      return ComputeStateBits(
-          0,
-          0,
-          0,
-          false,
-          true);
+      return ComputeStateBits(0, 0, 0, false, true);
     } else {
-      return ComputeStateBits(
-          0,
-          0,
-          state_codes_[r.transition[0]],
-          false,
-          false);
+      return ComputeStateBits(0, 0, state_codes_[r.transition[0]], false,
+                              false);
     }
   }
 
@@ -370,9 +334,7 @@ bool TableBuilder::ParseGrammarFile() {
       htmlparser::FileReadOptions::LineTransforms::StripWhitespace();
   bool valid_rule = true;
   htmlparser::FileUtil::ReadFileLines(
-      options,
-      grammar_file_path_,
-      [&](std::string_view line, int line_number) {
+      options, grammar_file_path_, [&](std::string_view line, int line_number) {
         auto rule = ReadRule(line, line_number);
         if (!rule.has_value()) {
           valid_rule = false;
@@ -428,8 +390,8 @@ std::optional<Rule> TableBuilder::ReadRule(std::string_view line,
       line.remove_prefix(1);
       input.push_back(c);
     } else {
-      std::cerr << "Invalid input declaration at: " <<
-                line_no << ":" << line_size - line.size() << std::endl;
+      std::cerr << "Invalid input declaration at: " << line_no << ":"
+                << line_size - line.size() << std::endl;
       return std::nullopt;
     }
   } else if (c == '"') {
@@ -529,7 +491,7 @@ std::optional<Rule> TableBuilder::ReadRule(std::string_view line,
             input.push_back(i);
           }
 
-          line.remove_prefix(3);  /* .. and char */
+          line.remove_prefix(3); /* .. and char */
           previous_char = 0;
           continue;
         }
@@ -538,9 +500,8 @@ std::optional<Rule> TableBuilder::ReadRule(std::string_view line,
       if (c == '"') {
         line.remove_prefix(1);
         if (line.front() != ' ') {
-          std::cerr << "Invalid syntax. Expecting whitespace at: "
-                    << line_no << ":" << line_size - line.size()
-                    << std::endl;
+          std::cerr << "Invalid syntax. Expecting whitespace at: " << line_no
+                    << ":" << line_size - line.size() << std::endl;
           return std::nullopt;
         }
         break;
@@ -554,8 +515,8 @@ std::optional<Rule> TableBuilder::ReadRule(std::string_view line,
     line.remove_prefix(1);
     c = line.front();
     if (c != '*') {
-      std::cerr << "Invalid char. Exepcting .* at : "
-                << line_no << ":" << line_size - line.size() << std::endl;
+      std::cerr << "Invalid char. Exepcting .* at : " << line_no << ":"
+                << line_size - line.size() << std::endl;
       return std::nullopt;
     }
     line.remove_prefix(1);
@@ -565,10 +526,10 @@ std::optional<Rule> TableBuilder::ReadRule(std::string_view line,
   }
 
   RemoveLeadingWhitespace(&line);
-  std::string transition(line.substr(0, line.find_first_of(";")));
+  std::string transition(line.substr(0, line.find_first_of(';')));
   if (transition.find(' ') != std::string::npos) {
     std::cerr << "Invalid syntax at line: " << line_no << ":"
-              << line_size - line.size() << std::endl;;
+              << line_size - line.size() << std::endl;
     return std::nullopt;
   }
 
@@ -590,36 +551,30 @@ std::optional<Rule> TableBuilder::ReadRule(std::string_view line,
     return std::nullopt;
   }
 
-  if (transition_states.size() == 3 &&
-      transition_states[1] != "PUSH") {
-    std::cerr << "PUSH must be followed by push state at: "
-              << line_no << ":" << line_size - line.size() << std::endl;
+  if (transition_states.size() == 3 && transition_states[1] != "PUSH") {
+    std::cerr << "PUSH must be followed by push state at: " << line_no << ":"
+              << line_size - line.size() << std::endl;
     return std::nullopt;
-  } else if (transition_states.size() == 2 &&
-             transition_states[0] != "PUSH" &&
+  } else if (transition_states.size() == 2 && transition_states[0] != "PUSH" &&
              transition_states[1] != "PUSH") {
-    std::cerr << "Missing PUSH identifier for multiple states at: "
-              << line_no << ":" << line_size - line.size() << std::endl;
+    std::cerr << "Missing PUSH identifier for multiple states at: " << line_no
+              << ":" << line_size - line.size() << std::endl;
     return std::nullopt;
-  } else if (transition_states.size() == 1 &&
-             transition_states[0] == "PUSH") {
-    std::cerr << "Missing push state with PUSH identifier at: "
-              << line_no << ":" << line_size - line.size() << std::endl;
+  } else if (transition_states.size() == 1 && transition_states[0] == "PUSH") {
+    std::cerr << "Missing push state with PUSH identifier at: " << line_no
+              << ":" << line_size - line.size() << std::endl;
     return std::nullopt;
   }
 
-  return Rule{.state = state,
-              .input = {.exclude = exclude,
-                        .charset{input.begin(), input.end()}},
-              .transition = transition_states};
+  return Rule{
+      .state = state,
+      .input = {.exclude = exclude, .charset{input.begin(), input.end()}},
+      .transition = transition_states};
 }
 
 std::optional<uint32_t> TableBuilder::ComputeStateBits(
-    uint8_t callback_code,
-    uint8_t push_state_code,
-    uint8_t current_state_code,
-    bool push,
-    bool pop) {
+    uint8_t callback_code, uint8_t push_state_code, uint8_t current_state_code,
+    bool push, bool pop) {
   uint32_t result = callback_code << 24;
   result |= (push_state_code << 16);
   result |= (current_state_code << 8);
@@ -628,28 +583,4 @@ std::optional<uint32_t> TableBuilder::ComputeStateBits(
   return result;
 }
 
-std::string PrintChar(char c) {
-  switch (c) {
-    case '\r':
-      return "CR";
-    case '\t':
-      return "TAB";
-    case '\f':
-      return "FF";
-    case '\b':
-      return "BKSPC";
-    case '\n':
-      return "LF";
-    case 0x80:
-      return "\\u";
-    default: {
-      if (static_cast<int>(c) > 126) {
-        return ".*";
-      } else {
-        return std::string({c});
-      }
-    }
-  }
-}
-
 }  // namespace htmlparser::grammar
diff --git a/validator/htmlparser/grammar/tablebuilder.h b/validator/cpp/htmlparser/grammar/tablebuilder.h
similarity index 100%
rename from validator/htmlparser/grammar/tablebuilder.h
rename to validator/cpp/htmlparser/grammar/tablebuilder.h
diff --git a/validator/htmlparser/hash.h b/validator/cpp/htmlparser/hash.h
similarity index 100%
rename from validator/htmlparser/hash.h
rename to validator/cpp/htmlparser/hash.h
diff --git a/validator/htmlparser/htmldataset_test.cc b/validator/cpp/htmlparser/htmldataset_test.cc
similarity index 81%
rename from validator/htmlparser/htmldataset_test.cc
rename to validator/cpp/htmlparser/htmldataset_test.cc
index ac4b080ba658d..b622731395aec 100644
--- a/validator/htmlparser/htmldataset_test.cc
+++ b/validator/cpp/htmlparser/htmldataset_test.cc
@@ -25,6 +25,7 @@
 #include <vector>
 
 #include "gtest/gtest.h"
+#include "absl/flags/flag.h"
 #include "atomutil.h"
 #include "defer.h"
 #include "fileutil.h"
@@ -50,10 +51,10 @@ struct TestCaseData {
     ss << "Original: \n";
     ss << "-----\n";
     ss << text;
-    ss << "Parsed: \n";
+    ss << "\nParsed: \n";
     ss << "-----\n";
     ss << want;
-    ss << "Context: \n";
+    ss << "\nContext: \n";
     ss << "-----\n";
     ss << context;
     return ss.str();
@@ -294,10 +295,27 @@ std::optional<Error> Dump(Node* node, std::stringbuf* buffer) {
 TEST(HTMLDatasetTest, WebkitData) {
   // Files excluded from testing due to remaining TODOs in the parser.
   std::vector<std::string> files_excluded_from_test = {
-          "testdata/tree-construction/"
-          "adoption01.dat",
-          "testdata/tree-construction/"
-          "foreign-fragment.dat",
+    // Add excluded files here. If only a small number of test cases in the file
+    // are broken, add them in test_cases_excluded below.
+  };
+  // Files excluded from testing due to remaining TODOs in the parser.
+  std::vector<std::string> test_cases_excluded = {
+    // tree-construction/adoption01.dat
+    "<p><b><b><b><b><p>x",
+    // tree-construction/domjs-unsafe.dat
+    "<script type=\"data\"><!--<p></script>",
+    // tree-construction/menuitem-element.dat
+    // menuitem has been deprecated in html5.
+    "<!DOCTYPE html><body><menuitem>A<menuitem>B",
+    "<!DOCTYPE html><body><menuitem>A<menu>B</menu>",
+    "<!DOCTYPE html><body><menuitem>A<hr>B",
+    "<!DOCTYPE html><menuitem><asdf></menuitem>x",
+    // foreign-fragment.dat
+    "<div></div>",        // Inside <math ms> fragment.
+    "<figure></figure>",  // Inside <math ms> fragment.
+    // tree-construction/scriptdata01.dat
+    "FOO<script><!--<script>-></script>--></script>QUX",
+    // tree-construction/tests11.dat
   };
   int num_test_cases = 0;
   for (auto pattern : htmlparser::testing::kTestDataDirs) {
@@ -312,6 +330,7 @@ TEST(HTMLDatasetTest, WebkitData) {
                     files_excluded_from_test.end(),
                     path) != files_excluded_from_test.end())
         continue;
+
       std::cerr << "Processing testdata: " << path << std::endl;
       std::ifstream fd(path);
       defer(fd.close());
@@ -320,7 +339,6 @@ TEST(HTMLDatasetTest, WebkitData) {
       ParseOptions options = {
         .scripting = true,
         .frameset_ok = true,
-        .allow_deprecated_tags = true
       };
 
       while (!fd.eof()) {
@@ -328,17 +346,34 @@ TEST(HTMLDatasetTest, WebkitData) {
         if (test_case.error) break;
 
         std::string html = test_case.text;
+        if (std::find(test_cases_excluded.begin(),
+                      test_cases_excluded.end(),
+                      html) != test_cases_excluded.end()) continue;
         if (!test_case.context.empty()) {
-          Atom context_atom = AtomUtil::ToAtom(test_case.context);
+          auto context_components = htmlparser::Strings::SplitStringAt(
+              test_case.context, ' ');
+          std::string name_space = "";
+          std::string context_tag = "";
+          if (context_components.size() == 2) {
+            name_space = context_components[0];
+            context_tag = context_components[1];
+          } else if (context_components.size() == 1) {
+            context_tag = context_components[0];
+          } else {
+            // Invalid context, skip.
+            continue;
+          }
+
+          Atom context_atom = AtomUtil::ToAtom(context_tag);
           auto context_node = std::unique_ptr<Node>(
-              Node::make_node(NodeType::ELEMENT_NODE, context_atom));
+              new Node(NodeType::ELEMENT_NODE, context_atom, name_space));
           if (context_atom == Atom::UNKNOWN) {
-            context_node->SetData(test_case.context);
+            context_node->SetData(context_tag);
           }
-          std::vector<Node*> nodes =
-              ParseFragmentWithOptions(html, options, context_node.get());
-          auto doc = std::unique_ptr<Node>(
-              Node::make_node(NodeType::DOCUMENT_NODE));
+          auto document =  ParseFragmentWithOptions(html, options,
+                                                    context_node.get());
+          auto nodes = document->FragmentNodes();
+          auto doc = std::unique_ptr<Node>(new Node(NodeType::DOCUMENT_NODE));
           for (Node* node : nodes) {
             doc->AppendChild(node);
           }
@@ -351,10 +386,10 @@ TEST(HTMLDatasetTest, WebkitData) {
           num_test_cases++;
         } else {
           auto doc = ParseWithOptions(html, options);
-          auto err = CheckTreeConsistency(doc.get());
+          auto err = CheckTreeConsistency(doc->RootNode());
           EXPECT_FALSE(err) << err.value().error_msg;
           std::stringbuf output_buffer;
-          Dump(doc.get(), &output_buffer);
+          Dump(doc->RootNode(), &output_buffer);
           std::string output = output_buffer.str();
           EXPECT_EQ(output, test_case.want) << test_case.ToString();
           num_test_cases++;
@@ -364,6 +399,6 @@ TEST(HTMLDatasetTest, WebkitData) {
   }
 
   // Hardcoded, whenever dataset changes. Ensures no new tests are added, or
-  // old tests removed, without maintainers knowledge.
-  EXPECT_EQ(794, num_test_cases);
+  // old tests mistakenly removed.
+  EXPECT_EQ(1484, num_test_cases);
 };
diff --git a/validator/cpp/htmlparser/json/BUILD b/validator/cpp/htmlparser/json/BUILD
new file mode 100644
index 0000000000000..138629d9d9d98
--- /dev/null
+++ b/validator/cpp/htmlparser/json/BUILD
@@ -0,0 +1,78 @@
+load("@rules_cc//cc:defs.bzl", "cc_library", "cc_test")
+
+package(default_visibility = ["//visibility:public"])
+
+licenses(["notice"])
+
+cc_library(
+    name = "states",
+    hdrs = [
+        "states.h",
+    ],
+)
+
+cc_library(
+    name = "parser",
+    srcs = [
+        "parser.cc",
+    ],
+    hdrs = [
+        "parser.h",
+    ],
+    deps = [
+        ":states",
+    ],
+)
+
+cc_test(
+    name = "parser_test",
+    srcs = [
+        "parser_test.cc",
+    ],
+    deps = [
+        ":parser",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+cc_library(
+    name = "types",
+    srcs = [
+        "types.cc",
+    ],
+    hdrs = [
+        "types.h",
+    ],
+)
+
+cc_test(
+    name = "types_test",
+    srcs = [
+        "types_test.cc",
+    ],
+    deps = [
+        ":types",
+        "@com_google_googletest//:gtest_main",
+    ],
+)
+
+filegroup(
+    name = "json_testfiles",
+    srcs = glob(["testdata/*.json"]),
+)
+
+cc_test(
+    name = "jsondataset_test",
+    srcs = [
+        "jsondataset_test.cc",
+    ],
+    data = [
+        ":json_testfiles",
+    ],
+    deps = [
+        ":parser",
+        "@com_google_googletest//:gtest_main",
+        "@htmlparser//:defer",
+        "@htmlparser//:fileutil",
+    ],
+)
diff --git a/validator/htmlparser/json/jsondataset_test.cc b/validator/cpp/htmlparser/json/jsondataset_test.cc
similarity index 100%
rename from validator/htmlparser/json/jsondataset_test.cc
rename to validator/cpp/htmlparser/json/jsondataset_test.cc
diff --git a/validator/htmlparser/json/parser.cc b/validator/cpp/htmlparser/json/parser.cc
similarity index 100%
rename from validator/htmlparser/json/parser.cc
rename to validator/cpp/htmlparser/json/parser.cc
diff --git a/validator/htmlparser/json/parser.h b/validator/cpp/htmlparser/json/parser.h
similarity index 100%
rename from validator/htmlparser/json/parser.h
rename to validator/cpp/htmlparser/json/parser.h
diff --git a/validator/htmlparser/json/parser_test.cc b/validator/cpp/htmlparser/json/parser_test.cc
similarity index 100%
rename from validator/htmlparser/json/parser_test.cc
rename to validator/cpp/htmlparser/json/parser_test.cc
diff --git a/validator/cpp/htmlparser/json/states.h b/validator/cpp/htmlparser/json/states.h
new file mode 100644
index 0000000000000..024759b0f2442
--- /dev/null
+++ b/validator/cpp/htmlparser/json/states.h
@@ -0,0 +1,427 @@
+// -*- C++ -*-
+//
+// Copyright 2020 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.
+//
+
+// AUTO GENERATED; DO NOT EDIT.
+// To regenerate this file, see comments in bin/jsongrammargen
+
+#ifndef HTMLPARSER__JSON_STATES_H_
+#define HTMLPARSER__JSON_STATES_H_
+
+#include <array>
+
+namespace htmlparser::json {
+
+enum class StateCode {
+  $ = 0,
+  ARRAY_END = 1,
+  ARRAY_FIRST_ITEM = 2,
+  ARRAY_NEXT_ITEM = 3,
+  ARRAY_SEPARATOR = 4,
+  FALSE_1 = 5,
+  FALSE_2 = 6,
+  FALSE_3 = 7,
+  FALSE_4 = 8,
+  NULL_1 = 9,
+  NULL_2 = 10,
+  NULL_3 = 11,
+  NUMBER = 12,
+  NUMBER_AFTER_E_DIGIT_NOTATION = 13,
+  NUMBER_AFTER_E_NOTATION = 14,
+  NUMBER_AFTER_HYPHEN = 15,
+  NUMBER_AFTER_PERIOD = 16,
+  NUMBER_AFTER_PERIOD_DIGIT = 17,
+  NUMBER_AFTER_PLUS_MINUS_AFTER_E_NOTATION = 18,
+  NUMBER_AFTER_ZERO = 19,
+  OBJECT = 20,
+  OBJECT_END = 21,
+  OBJECT_KEY = 22,
+  OBJECT_KEY_BEGIN_QUOTE = 23,
+  OBJECT_SEPARATOR = 24,
+  OBJECT_VALUE = 25,
+  STRING = 26,
+  STRING_ESCAPE = 27,
+  TRUE_1 = 28,
+  TRUE_2 = 29,
+  TRUE_3 = 30,
+  UNICODE_HEX_CHAR_FIRST = 31,
+  UNICODE_HEX_CHAR_LAST = 32,
+  UNICODE_HEX_CHAR_SECOND = 33,
+  UNICODE_HEX_CHAR_THIRD = 34,
+};
+
+enum class CallbackCode {
+  // TODO: Implement callbacks.
+};
+
+
+// Extracts CallbackCode from the bytes.
+inline static uint8_t ToCallbackCode(uint32_t code);
+
+// Extracts push StateCode from the bytes.
+inline static uint8_t ToPushStateCode(uint32_t code);
+
+// Extracts active State code from the bytes.
+inline static uint8_t ToCurrentStateCode(uint32_t code);
+
+// Returns code for current token and active state.
+inline static uint32_t CodeForToken(unsigned char c, uint8_t state);
+
+// Checks the push bit is on.
+inline static bool HasPushBit(uint32_t code);
+
+// Checks the push bit is off.
+inline static bool HasPopBit(uint32_t code);
+
+constexpr std::array<int, 127> kTokenIndexes {
+    44, 44, 44, 44, 44, 44, 44, 44,
+    44, 0, 1, 44, 44, 2, 44, 44,
+    44, 44, 44, 44, 44, 44, 44, 44,
+    44, 44, 44, 44, 44, 44, 44, 44,
+    3, 44, 4, 44, 44, 44, 44, 44,
+    44, 44, 44, 5, 6, 7, 8, 9,
+    10, 11, 12, 13, 14, 15, 16, 17,
+    18, 19, 20, 44, 44, 44, 44, 44,
+    44, 21, 22, 23, 24, 25, 26, 44,
+    44, 44, 44, 44, 44, 44, 44, 44,
+    44, 44, 44, 44, 44, 44, 44, 44,
+    44, 44, 44, 27, 28, 29, 44, 44,
+    44, 30, 31, 32, 33, 34, 35, 44,
+    44, 44, 44, 44, 36, 44, 37, 44,
+    44, 44, 38, 39, 40, 41, 44, 44,
+    44, 44, 44, 42, 44, 43, 44, };
+
+constexpr std::array<std::array<uint32_t, 46>, 35> kParseStates {{
+    // $
+    // Code: 0
+    {0x0, 0x0, 0x0, 0x0, 0x1a00, 0xff, 0xff, 0xf00,
+     0xff, 0xff, 0x1300, 0xc00, 0xc00, 0xc00, 0xc00, 0xc00,
+     0xc00, 0xc00, 0xc00, 0xc00, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x200, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x500, 0xff, 0x900, 0xff, 0xff,
+     0x1c00, 0xff, 0x1400, 0xff, 0xff, 0xff},
+    // ARRAY_END
+    // Code: 1
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0x40, 0x40},
+    // ARRAY_FIRST_ITEM
+    // Code: 2
+    {0x200, 0x200, 0x200, 0x200, 0x41a80, 0xff, 0xff, 0x40f80,
+     0xff, 0xff, 0x41380, 0x40c80, 0x40c80, 0x40c80, 0x40c80, 0x40c80,
+     0x40c80, 0x40c80, 0x40c80, 0x40c80, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x40280, 0xff, 0x40, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x40580, 0xff, 0x40980, 0xff, 0xff,
+     0x41c80, 0xff, 0x41480, 0xff, 0xff, 0xff},
+    // ARRAY_NEXT_ITEM
+    // Code: 3
+    {0x300, 0x300, 0x300, 0x300, 0x41a80, 0xff, 0xff, 0x40f80,
+     0xff, 0xff, 0x41380, 0x40c80, 0x40c80, 0x40c80, 0x40c80, 0x40c80,
+     0x40c80, 0x40c80, 0x40c80, 0x40c80, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x40280, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x40580, 0xff, 0x40980, 0xff, 0xff,
+     0x41c80, 0xff, 0x41480, 0xff, 0xff, 0xff},
+    // ARRAY_SEPARATOR
+    // Code: 4
+    {0x400, 0x400, 0x400, 0x400, 0xff, 0xff, 0x300, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0x100, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // FALSE_1
+    // Code: 5
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x600, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // FALSE_2
+    // Code: 6
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0x700, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // FALSE_3
+    // Code: 7
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x800,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // FALSE_4
+    // Code: 8
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0x40, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // NULL_1
+    // Code: 9
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xa00, 0xff, 0xff, 0xff, 0xff},
+    // NULL_2
+    // Code: 10
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xb00, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // NULL_3
+    // Code: 11
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0x40, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // NUMBER
+    // Code: 12
+    {0x40, 0x40, 0x40, 0x40, 0xff, 0xff, 0x40, 0xff,
+     0x1000, 0xff, 0xc00, 0xc00, 0xc00, 0xc00, 0xc00, 0xc00,
+     0xc00, 0xc00, 0xc00, 0xc00, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0x40, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x40, 0xff, 0xff},
+    // NUMBER_AFTER_E_DIGIT_NOTATION
+    // Code: 13
+    {0x40, 0x40, 0x40, 0x40, 0xff, 0xff, 0x40, 0xff,
+     0xff, 0xff, 0xd00, 0xd00, 0xd00, 0xd00, 0xd00, 0xd00,
+     0xd00, 0xd00, 0xd00, 0xd00, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0x40, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x40, 0xff, 0xff},
+    // NUMBER_AFTER_E_NOTATION
+    // Code: 14
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0x1200, 0xff, 0x1200,
+     0xff, 0xff, 0xd00, 0xd00, 0xd00, 0xd00, 0xd00, 0xd00,
+     0xd00, 0xd00, 0xd00, 0xd00, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // NUMBER_AFTER_HYPHEN
+    // Code: 15
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0x1300, 0xc00, 0xc00, 0xc00, 0xc00, 0xc00,
+     0xc00, 0xc00, 0xc00, 0xc00, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // NUMBER_AFTER_PERIOD
+    // Code: 16
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0x1100, 0x1100, 0x1100, 0x1100, 0x1100, 0x1100,
+     0x1100, 0x1100, 0x1100, 0x1100, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // NUMBER_AFTER_PERIOD_DIGIT
+    // Code: 17
+    {0x40, 0x40, 0x40, 0x40, 0xff, 0xff, 0x40, 0xff,
+     0xff, 0xff, 0x1100, 0x1100, 0x1100, 0x1100, 0x1100, 0x1100,
+     0x1100, 0x1100, 0x1100, 0x1100, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xe00, 0xff, 0xff, 0xff, 0x40, 0xff, 0xff,
+     0xff, 0xff, 0xe00, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x40, 0xff, 0xff},
+    // NUMBER_AFTER_PLUS_MINUS_AFTER_E_NOTATION
+    // Code: 18
+    {0x40, 0x40, 0x40, 0x40, 0xff, 0xff, 0x40, 0xff,
+     0xff, 0xff, 0x1200, 0x1200, 0x1200, 0x1200, 0x1200, 0x1200,
+     0x1200, 0x1200, 0x1200, 0x1200, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0x40, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x40, 0xff, 0xff},
+    // NUMBER_AFTER_ZERO
+    // Code: 19
+    {0x40, 0x40, 0x40, 0x40, 0xff, 0xff, 0x40, 0xff,
+     0x1000, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xe00, 0xff, 0xff, 0xff, 0x40, 0xff, 0xff,
+     0xff, 0xff, 0xe00, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x40, 0xff, 0xff},
+    // OBJECT
+    // Code: 20
+    {0x1400, 0x1400, 0x1400, 0x1400, 0x161a80, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x1500, 0xff, 0xff},
+    // OBJECT_END
+    // Code: 21
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0x40, 0x40},
+    // OBJECT_KEY
+    // Code: 22
+    {0x1600, 0x1600, 0x1600, 0x1600, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0x1900, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // OBJECT_KEY_BEGIN_QUOTE
+    // Code: 23
+    {0x1700, 0x1700, 0x1700, 0x1700, 0x161a80, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // OBJECT_SEPARATOR
+    // Code: 24
+    {0x1800, 0x1800, 0x1800, 0x1800, 0xff, 0xff, 0x1700, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x1500, 0xff, 0xff},
+    // OBJECT_VALUE
+    // Code: 25
+    {0x1900, 0x1900, 0x1900, 0x1900, 0x181a80, 0xff, 0xff, 0x180f80,
+     0xff, 0xff, 0x181380, 0x180c80, 0x180c80, 0x180c80, 0x180c80, 0x180c80,
+     0x180c80, 0x180c80, 0x180c80, 0x180c80, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x180280, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0x180580, 0xff, 0x180980, 0xff, 0xff,
+     0x181c80, 0xff, 0x181480, 0xff, 0xff, 0xff},
+    // STRING
+    // Code: 26
+    {0xff, 0xff, 0xff, 0xff, 0x40, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0x1b00, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0x1a00, 0x1a00},
+    // STRING_ESCAPE
+    // Code: 27
+    {0xff, 0xff, 0xff, 0xff, 0x1a00, 0xff, 0xff, 0xff,
+     0xff, 0x1a00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0x1a00, 0xff, 0xff, 0x1a00,
+     0xff, 0xff, 0xff, 0x1a00, 0xff, 0x1a00, 0x1a00, 0xff,
+     0x1a00, 0x1f00, 0xff, 0xff, 0xff, 0xff},
+    // TRUE_1
+    // Code: 28
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x1d00, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // TRUE_2
+    // Code: 29
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0x1e00, 0xff, 0xff, 0xff, 0xff},
+    // TRUE_3
+    // Code: 30
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0x40, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // UNICODE_HEX_CHAR_FIRST
+    // Code: 31
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0x2100, 0x2100, 0x2100, 0x2100, 0x2100, 0x2100,
+     0x2100, 0x2100, 0x2100, 0x2100, 0xff, 0x2100, 0x2100, 0x2100,
+     0x2100, 0x2100, 0x2100, 0xff, 0xff, 0xff, 0x2100, 0x2100,
+     0x2100, 0x2100, 0x2100, 0x2100, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // UNICODE_HEX_CHAR_LAST
+    // Code: 32
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0x1a00, 0x1a00, 0x1a00, 0x1a00, 0x1a00, 0x1a00,
+     0x1a00, 0x1a00, 0x1a00, 0x1a00, 0xff, 0x1a00, 0x1a00, 0x1a00,
+     0x1a00, 0x1a00, 0x1a00, 0xff, 0xff, 0xff, 0x1a00, 0x1a00,
+     0x1a00, 0x1a00, 0x1a00, 0x1a00, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // UNICODE_HEX_CHAR_SECOND
+    // Code: 33
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0x2200, 0x2200, 0x2200, 0x2200, 0x2200, 0x2200,
+     0x2200, 0x2200, 0x2200, 0x2200, 0xff, 0x2200, 0x2200, 0x2200,
+     0x2200, 0x2200, 0x2200, 0xff, 0xff, 0xff, 0x2200, 0x2200,
+     0x2200, 0x2200, 0x2200, 0x2200, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+    // UNICODE_HEX_CHAR_THIRD
+    // Code: 34
+    {0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0x2000, 0x2000, 0x2000, 0x2000, 0x2000, 0x2000,
+     0x2000, 0x2000, 0x2000, 0x2000, 0xff, 0x2000, 0x2000, 0x2000,
+     0x2000, 0x2000, 0x2000, 0xff, 0xff, 0xff, 0x2000, 0x2000,
+     0x2000, 0x2000, 0x2000, 0x2000, 0xff, 0xff, 0xff, 0xff,
+     0xff, 0xff, 0xff, 0xff, 0xff, 0xff},
+}};
+
+
+inline static uint8_t ToCallbackCode(uint32_t code) {
+  // 4th byte.
+  return static_cast<uint8_t>(code >> 24);
+}
+
+inline static uint8_t ToPushStateCode(uint32_t code) {
+  // 3rd byte.
+  return static_cast<uint8_t>((code & 0x00ff0000) >> 16);
+}
+
+inline static uint8_t ToCurrentStateCode(uint32_t code) {
+  // 2nd byte.
+  return static_cast<uint8_t>((code & 0x0000ff00) >> 8);
+}
+
+inline static bool HasPushBit(uint32_t code) {
+  // 6th bit in first byte.
+  return ((code & 0x80) >> 7) == 1;
+}
+
+inline static bool HasPopBit(uint32_t code) {
+  // 7th bit in first byte.
+  return ((code & 0x40) >> 6) == 1;
+}
+
+inline static uint32_t CodeForToken(unsigned char c, uint8_t state) {
+  if (c > 127) {
+    return kParseStates[state][44];
+  }
+  int index = kTokenIndexes[c];
+  if (index == -1) index = 45;
+  return kParseStates[state][index];
+}
+
+}  // namespace htmlparser::json
+
+#endif  // HTMLPARSER__JSON_STATES_H_
diff --git a/validator/htmlparser/json/testdata/1.json b/validator/cpp/htmlparser/json/testdata/1.json
similarity index 100%
rename from validator/htmlparser/json/testdata/1.json
rename to validator/cpp/htmlparser/json/testdata/1.json
diff --git a/validator/htmlparser/json/testdata/10.json b/validator/cpp/htmlparser/json/testdata/10.json
similarity index 100%
rename from validator/htmlparser/json/testdata/10.json
rename to validator/cpp/htmlparser/json/testdata/10.json
diff --git a/validator/htmlparser/json/testdata/2.json b/validator/cpp/htmlparser/json/testdata/2.json
similarity index 100%
rename from validator/htmlparser/json/testdata/2.json
rename to validator/cpp/htmlparser/json/testdata/2.json
diff --git a/validator/htmlparser/json/testdata/3.json b/validator/cpp/htmlparser/json/testdata/3.json
similarity index 100%
rename from validator/htmlparser/json/testdata/3.json
rename to validator/cpp/htmlparser/json/testdata/3.json
diff --git a/validator/htmlparser/json/testdata/4.json b/validator/cpp/htmlparser/json/testdata/4.json
similarity index 100%
rename from validator/htmlparser/json/testdata/4.json
rename to validator/cpp/htmlparser/json/testdata/4.json
diff --git a/validator/htmlparser/json/testdata/5.json b/validator/cpp/htmlparser/json/testdata/5.json
similarity index 100%
rename from validator/htmlparser/json/testdata/5.json
rename to validator/cpp/htmlparser/json/testdata/5.json
diff --git a/validator/htmlparser/json/testdata/6.json b/validator/cpp/htmlparser/json/testdata/6.json
similarity index 100%
rename from validator/htmlparser/json/testdata/6.json
rename to validator/cpp/htmlparser/json/testdata/6.json
diff --git a/validator/htmlparser/json/testdata/7.json b/validator/cpp/htmlparser/json/testdata/7.json
similarity index 100%
rename from validator/htmlparser/json/testdata/7.json
rename to validator/cpp/htmlparser/json/testdata/7.json
diff --git a/validator/htmlparser/json/testdata/8.json b/validator/cpp/htmlparser/json/testdata/8.json
similarity index 100%
rename from validator/htmlparser/json/testdata/8.json
rename to validator/cpp/htmlparser/json/testdata/8.json
diff --git a/validator/htmlparser/json/testdata/9.json b/validator/cpp/htmlparser/json/testdata/9.json
similarity index 100%
rename from validator/htmlparser/json/testdata/9.json
rename to validator/cpp/htmlparser/json/testdata/9.json
diff --git a/validator/htmlparser/json/testdata/README b/validator/cpp/htmlparser/json/testdata/README
similarity index 100%
rename from validator/htmlparser/json/testdata/README
rename to validator/cpp/htmlparser/json/testdata/README
diff --git a/validator/htmlparser/json/types.cc b/validator/cpp/htmlparser/json/types.cc
similarity index 97%
rename from validator/htmlparser/json/types.cc
rename to validator/cpp/htmlparser/json/types.cc
index d750b96ce5b65..ffbd2c55fa338 100644
--- a/validator/htmlparser/json/types.cc
+++ b/validator/cpp/htmlparser/json/types.cc
@@ -55,7 +55,7 @@ constexpr std::array<std::string_view, 35> kIndentSpaces {
   "                                 ",
   "                                  "};
 
-constexpr int64_t MAX_SAFE_INTEGER = 9007199254740992;  // 2 ^^ 53.
+const int64_t MAX_SAFE_INTEGER = 1LL << 53;  // 2 ^^ 53.
 
 void AddIndentation(std::stringbuf* buf, int indent_columns) {
   if (indent_columns > 35) indent_columns = 35;
@@ -113,6 +113,11 @@ std::string JsonArray::ToString(int indent_columns) const {
 }
 
 void JsonArray::ToString(std::stringbuf* buf, int indent_columns) const {
+  if (items_.empty()) {
+    buf->sputn("[]", 2);
+    return;
+  }
+
   bool first = true;
   buf->sputc('[');
   buf->sputc('\n');
diff --git a/validator/htmlparser/json/types.h b/validator/cpp/htmlparser/json/types.h
similarity index 87%
rename from validator/htmlparser/json/types.h
rename to validator/cpp/htmlparser/json/types.h
index eb20928d92a21..3a1da8caca666 100644
--- a/validator/htmlparser/json/types.h
+++ b/validator/cpp/htmlparser/json/types.h
@@ -106,8 +106,6 @@ class JsonObject;
 
 class JsonDict {
  public:
-  // TODO(amaltas): Add support for vararg:
-  // my_dict.Insert({"foo", "bar"}, {"hello", 1}, {"bar": false});
   template <typename V>
   void Insert(std::string key, V value) {
     values_.emplace_back(std::pair<std::string, V>{key, value});
@@ -120,7 +118,7 @@ class JsonDict {
   std::string ToString(int indent_columns = 0) const;
   void ToString(std::stringbuf*, int indent_columns = 0) const;
 
-  template<typename T>
+  template <typename T>
   T* Get(const std::string& key);
 
   // Facilitates range based iterator directly on JsonDict object.
@@ -181,21 +179,16 @@ class NullValue {
   std::string ToString(int indent_columns = 0) const;
 };
 
-template<typename JsonType>
+template <typename JsonType>
 class Any {
  public:
-  template<typename T>  // Erased by Wrapper.
-  Any(const T* object,
-      std::function<JsonType(const T& object)> apply) :
-    wrapper_(new Wrapper<T>(object, apply)) {}
+  template <typename T>  // Erased by Wrapper.
+  Any(const T* object, std::function<JsonType(const T& object)> apply)
+      : wrapper_(new Wrapper<T>(object, apply)) {}
 
-  Any(const Any& from) {
-    wrapper_ = from.wrapper_->Clone();
-  }
+  Any(const Any& from) { wrapper_ = from.wrapper_->Clone(); }
 
-  Any(Any&& from) {
-    wrapper_ = std::move(from.wrapper_);
-  }
+  Any(Any&& from) { wrapper_ = std::move(from.wrapper_); }
 
   Any& operator=(const Any& from) {
     wrapper_ = from.wrapper_->Clone();
@@ -214,22 +207,19 @@ class Any {
   class WrapperBase {
    public:
     virtual JsonType ToJson() = 0;
-    virtual std::unique_ptr<WrapperBase>&& Clone() = 0;
+    virtual std::unique_ptr<WrapperBase> Clone() = 0;
     virtual ~WrapperBase() {}
   };
 
-  template<typename O>
+  template <typename O>
   class Wrapper : public WrapperBase {
    public:
-    Wrapper(const O* obj,
-            std::function<JsonType(const O& obj)> apply) :
-      obj_(obj), apply_(apply) {}
+    Wrapper(const O* obj, std::function<JsonType(const O& obj)> apply)
+        : obj_(obj), apply_(apply) {}
 
-    virtual JsonType ToJson() {
-      return apply_(*obj_);
-    }
+    virtual JsonType ToJson() { return apply_(*obj_); }
 
-    virtual std::unique_ptr<WrapperBase>&& Clone() {
+    virtual std::unique_ptr<WrapperBase> Clone() {
       return std::make_unique<Wrapper>(obj_, apply_);
     }
 
@@ -247,9 +237,7 @@ class JsonObject {
   explicit JsonObject(int64_t i) : v_(i) {}
   explicit JsonObject(double d) : v_(d) {}
   explicit JsonObject(float f) : v_(f) {}
-  explicit JsonObject(const char* s) {
-    v_.emplace<std::string>(s);
-  }
+  explicit JsonObject(const char* s) { v_.emplace<std::string>(s); }
   explicit JsonObject(const std::string& s) : v_(s) {}
   explicit JsonObject(bool b) : v_(b) {}
   explicit JsonObject(std::nullptr_t n) : v_(NullValue()) {}
@@ -264,13 +252,9 @@ class JsonObject {
   explicit JsonObject(Any<JsonDict>&& a) : v_(std::move(a)) {}
   explicit JsonObject(Any<JsonObject>&& j) : v_(std::move(j)) {}
 
-  JsonObject(JsonObject&& from) {
-    v_ = std::move(from.v_);
-  }
+  JsonObject(JsonObject&& from) { v_ = std::move(from.v_); }
 
-  JsonObject(const JsonObject& from) {
-    v_ = from.v_;
-  }
+  JsonObject(const JsonObject& from) { v_ = from.v_; }
 
   JsonObject& operator=(const JsonObject& from) {
     v_ = from.v_;
@@ -285,7 +269,7 @@ class JsonObject {
 
   // Gets the underlying value inside this JsonObject.
   // Returns nullopt if JsonObject doesn't hold this type.
-  template<typename T>
+  template <typename T>
   T* Get() {
     if (!std::holds_alternative<T>(v_)) {
       return nullptr;
@@ -293,7 +277,7 @@ class JsonObject {
     return &std::get<T>(v_);
   }
 
-  template<typename... Types>
+  template <typename... Types>
   constexpr bool Has() const {
     return (std::holds_alternative<Types>(v_) || ...);
   }
@@ -302,12 +286,13 @@ class JsonObject {
   void ToString(std::stringbuf* buf, int indent_columns = 0) const;
 
  private:
-  std::variant<bool, int32_t, int64_t, double, float, std::string,
-               NullValue, JsonArray, JsonDict,
-               Any<JsonArray>, Any<JsonDict>, Any<JsonObject>> v_;
+  std::variant<bool, int32_t, int64_t, double, float, std::string, NullValue,
+               JsonArray, JsonDict, Any<JsonArray>, Any<JsonDict>,
+               Any<JsonObject>>
+      v_;
 };
 
-template<typename T>
+template <typename T>
 T* JsonDict::Get(const std::string& key) {
   for (auto& [k, v] : values_) {
     if (k == key) {
diff --git a/validator/htmlparser/json/types_test.cc b/validator/cpp/htmlparser/json/types_test.cc
similarity index 99%
rename from validator/htmlparser/json/types_test.cc
rename to validator/cpp/htmlparser/json/types_test.cc
index 21d9d80621d5b..1e27872d99078 100644
--- a/validator/htmlparser/json/types_test.cc
+++ b/validator/cpp/htmlparser/json/types_test.cc
@@ -150,7 +150,7 @@ TEST(TypesTest, SingleValue) {
   EXPECT_EQ(j6.ToString(), "null");
 
   JsonArray jarr;
-  EXPECT_EQ(jarr.ToString(), "[\n\n]");
+  EXPECT_EQ(jarr.ToString(), "[]");
   // Bulk append.
   jarr.Append(1, 2, 3, 1.200000, 2.200000, 3.300000, "hello", "world");
   EXPECT_EQ(jarr.ToString(),
diff --git a/validator/htmlparser/logging.h b/validator/cpp/htmlparser/logging.h
similarity index 100%
rename from validator/htmlparser/logging.h
rename to validator/cpp/htmlparser/logging.h
diff --git a/validator/htmlparser/node.cc b/validator/cpp/htmlparser/node.cc
similarity index 94%
rename from validator/htmlparser/node.cc
rename to validator/cpp/htmlparser/node.cc
index e0fd4d39306bf..73d37f7d62cd8 100644
--- a/validator/htmlparser/node.cc
+++ b/validator/cpp/htmlparser/node.cc
@@ -19,19 +19,14 @@
 #include <algorithm>
 #include <functional>
 #include <sstream>
-
-#include "logging.h"
+#include "glog/logging.h"
 #include "atomutil.h"
 #include "elements.h"
 
 namespace htmlparser {
 
-Node::Node(NodeType node_type) : node_type_(node_type) {}
-
-Node::~Node() {
-  if (first_child_) delete first_child_;
-  if (next_sibling_) delete next_sibling_;
-}
+Node::Node(NodeType node_type, Atom atom, std::string name_space) :
+    node_type_(node_type), atom_(atom), name_space_(name_space) {}
 
 void Node::SetData(std::string_view data) {
   data_ = data;
@@ -117,8 +112,8 @@ bool Node::InsertBefore(Node* new_child, Node* old_child) {
 bool Node::AppendChild(Node* new_child) {
   CHECK(!(new_child->Parent() ||
           new_child->PrevSibling() ||
-          new_child->NextSibling()),
-        "html: AppendChild called for an attached child Node");
+          new_child->NextSibling()))
+        << "html: AppendChild called for an attached child Node";
 
   Node* last = LastChild();
   if (last) {
@@ -133,9 +128,10 @@ bool Node::AppendChild(Node* new_child) {
   return true;
 }
 
-std::unique_ptr<Node> Node::RemoveChild(Node* c) {
+Node* Node::RemoveChild(Node* c) {
   // Remove child called for a non-child node.
-  CHECK(c->parent_ == this, "html: RemoveChild called for a non-child Node");
+  CHECK(c->parent_ == this)
+      << "html: RemoveChild called for a non-child Node";
 
   if (first_child_ == c) {
     first_child_ = c->next_sibling_;
@@ -156,23 +152,14 @@ std::unique_ptr<Node> Node::RemoveChild(Node* c) {
   c->parent_ = nullptr;
   c->prev_sibling_ = nullptr;
   c->next_sibling_ = nullptr;
-  return std::unique_ptr<Node>(c);
-}
-
-Node* Node::Clone() const {
-  Node* clone = make_node(node_type_);
-  clone->atom_ = atom_;
-  clone->data_ = data_;
-  std::copy(attributes_.begin(), attributes_.end(),
-      std::back_inserter(clone->attributes_));
-  return clone;
+  return c;
 }
 
 void Node::ReparentChildrenTo(Node* destination) {
   while (true) {
     Node* child = first_child_;
     if (!child) break;
-    destination->AppendChild(RemoveChild(child).release());
+    destination->AppendChild(RemoveChild(child));
   }
 }
 
diff --git a/validator/htmlparser/node.h b/validator/cpp/htmlparser/node.h
similarity index 79%
rename from validator/htmlparser/node.h
rename to validator/cpp/htmlparser/node.h
index ae4e16f495261..a338ccd0e6f86 100644
--- a/validator/htmlparser/node.h
+++ b/validator/cpp/htmlparser/node.h
@@ -53,53 +53,11 @@ enum class NodeType {
 // An empty Namespace implies a "http://www.w3.org/1999/xhtml" namespace.
 // Similarly, "math" is short for "http://www.w3.org/1998/Math/MathML", and
 // "svg" is short for "http://www.w3.org/2000/svg".
-//
-// OWNERSHIP NOTES (assuming node is created on the heap):
-//  - A node is owned by it's parent if it is the first child of it's parent,
-//    else by it's previous sibling. Deleting a node deletes all of it's
-//    children and it's _next_ sibling. This is recursive, resulting in
-//    deleting all descendants, next siblings, and next sibling's descendants.
-//
-//  - A node can be parent-less. node->Parent() can be null.
-//
-//  - A node in the tree has following ownership rules:
-//   1) Destroying the root node (document node) will result in destruction of
-//      entire document tree.
-//   2) For child nodes: First child is owned by parent.
-//                       Subsequent child is owned by previous sibling.
-//
-//             +------+
-//         +---+ HTML |
-//         |   +------+
-//         v
-//        Own
-//         +
-//         |
-//     +---v--+                  +------+
-//     | HEAD +------->Own+------> BODY |
-//     +---+--+                  +------+
-//         |
-//         v
-//        Own
-//         +
-//         |
-//     +---+---+
-//     | TITLE |
-//     +-------+
-//
-// In the above example: HTML owns HEAD, HEAD owns TITLE and BODY. If HEAD is
-// removed, BODY's ownership is granted to HTML while title is deleted.
 class Node {
  public:
-  static Node* make_node(NodeType node_type, Atom atom = Atom::UNKNOWN) {
-    Node* node = new Node(node_type);
-    node->atom_ = atom;
-    return node;
-  }
-
-  // Use Node::make_node.
-  explicit Node(NodeType node_type);
-  ~Node();
+  Node(NodeType node_type, Atom atom = Atom::UNKNOWN,
+       std::string name_space = "");
+  ~Node() = default;
 
   // Allows move.
   Node(Node&&) = default;
@@ -161,11 +119,7 @@ class Node {
 
   // RemoveChild removes child_node if it is a child of this node.
   // Afterwards, child_node will have no parent and no siblings.
-  std::unique_ptr<Node> RemoveChild(Node* child_node);
-
-  // Returns a new node with the same type, data and attributes.
-  // The clone has no parent, no siblings and no children.
-  Node* Clone() const;
+  Node* RemoveChild(Node* child_node);
 
   // Reparents all the child nodes of this node to the destination node.
   void ReparentChildrenTo(Node* destination);
@@ -183,10 +137,7 @@ class Node {
 
   // True, if this node is manufactured by parser as per HTML5 specification.
   // Currently, this applies only to HTML, HEAD and BODY tags.
-  // TODO: Implement this for all manufactured tags.
-  bool IsManufactured() const {
-    return is_manufactured_;
-  }
+  bool IsManufactured() const { return is_manufactured_; }
 
   // Debug/Logging utils.
   // Outputs node debug info.
@@ -213,6 +164,11 @@ class Node {
   Node* prev_sibling_ = nullptr;
   bool is_manufactured_{false};
 
+#ifdef HTMLPARSER_NODE_DEBUG
+  int64_t recursive_counter_ = 0;
+#endif
+
+  friend class Document;
   friend class NodeStack;
   friend class Parser;
 };
@@ -231,17 +187,13 @@ class NodeStack {
 
   // Allows iterator like access to elements in stack_.
   // Since this is a stack. It returns reverse iterator.
-  std::deque<Node*>::const_reverse_iterator begin() {
-    return stack_.rbegin();
-  }
+  std::deque<Node*>::const_reverse_iterator begin() { return stack_.rbegin(); }
 
   std::deque<Node*>::const_reverse_iterator begin() const {
     return stack_.rbegin();
   }
 
-  std::deque<Node*>::const_reverse_iterator end() {
-    return stack_.rend();
-  }
+  std::deque<Node*>::const_reverse_iterator end() { return stack_.rend(); }
 
   std::deque<Node*>::const_reverse_iterator end() const {
     return stack_.rend();
diff --git a/validator/cpp/htmlparser/node_test.cc b/validator/cpp/htmlparser/node_test.cc
new file mode 100644
index 0000000000000..9ef4e39b3a270
--- /dev/null
+++ b/validator/cpp/htmlparser/node_test.cc
@@ -0,0 +1,232 @@
+//
+// 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.
+//
+
+#include "node.h"
+
+#include "gtest/gtest.h"
+#include "atom.h"
+#include "document.h"
+#include "parser.h"
+#include "renderer.h"
+
+using htmlparser::Atom;
+using htmlparser::Attribute;
+using htmlparser::Node;
+using htmlparser::NodeStack;
+using htmlparser::NodeType;
+using htmlparser::Parse;
+using htmlparser::RenderError;
+using htmlparser::Renderer;
+
+// For operator""s.
+using namespace std::string_literals;
+
+TEST(NodeTest, BasicStackFunctionality) {
+  NodeStack stack;
+  // Push three nodes.
+  auto n1 = std::unique_ptr<Node>(new Node(NodeType::TEXT_NODE));
+  auto n2 = std::unique_ptr<Node>(new Node(NodeType::COMMENT_NODE));
+  auto n3 = std::unique_ptr<Node>(new Node(NodeType::ELEMENT_NODE));
+  stack.Push(n1.get());
+  stack.Push(n2.get());
+  stack.Push(n3.get());
+
+  EXPECT_EQ(3, stack.size());
+  EXPECT_EQ(stack.Top()->Type(), NodeType::ELEMENT_NODE);
+  EXPECT_EQ(stack.Pop()->Type(), NodeType::ELEMENT_NODE);
+  EXPECT_EQ(2, stack.size());
+  EXPECT_EQ(stack.Top()->Type(), NodeType::COMMENT_NODE);
+
+  // Push three ElementNodes.
+  auto e1 = std::unique_ptr<Node>(new Node(NodeType::ELEMENT_NODE));
+  auto e2 = std::unique_ptr<Node>(new Node(NodeType::ELEMENT_NODE));
+  auto e3 = std::unique_ptr<Node>(new Node(NodeType::ELEMENT_NODE));
+  stack.Push(e1.get());
+  stack.Push(e2.get());
+  stack.Push(e3.get());
+
+  // Pop last 2.
+  stack.Pop(2);
+  EXPECT_EQ(3, stack.size());
+
+  // Insert two nodes at middle and end.
+  auto n4 = std::unique_ptr<Node>(new Node(NodeType::DOCTYPE_NODE));
+  stack.Insert(1, n4.get());
+  auto n5 = std::unique_ptr<Node>(new Node(NodeType::DOCUMENT_NODE));
+  stack.Insert(stack.size() - 1, n5.get());
+
+  EXPECT_EQ(5, stack.size());
+  EXPECT_EQ(stack.at(1)->Type(), NodeType::DOCTYPE_NODE);
+  EXPECT_EQ(stack.at(stack.size() - 2)->Type(), NodeType::DOCUMENT_NODE);
+
+  auto n6 = std::unique_ptr<Node>(new Node(NodeType::ERROR_NODE));
+  stack.Replace(1, n6.get());
+  // No change in size.
+  EXPECT_EQ(5, stack.size());
+  EXPECT_EQ(stack.at(1)->Type(), NodeType::ERROR_NODE);
+}
+
+TEST(NodeTest, NodeInnerText) {
+  auto doc = Parse(
+      "<html><body><div>Hello world<div>foo bar</div></div>"
+      "<h1>foo baz</h1></body></html>");
+  EXPECT_EQ(doc->RootNode()->InnerText(), "Hello world foo bar foo baz");
+
+  auto doc2 = Parse(
+      "<html><body><div>Hello\n world\n<div>foo bar</div></div>"
+      "<h1>foo baz</h1></body></html>"s);
+  EXPECT_EQ(doc2->RootNode()->InnerText(), "Hello\n world\n foo bar foo baz");
+}
+
+// To test node operations doesn't cause memory leaks, Run:
+// $ blaze build :node_test
+// $ valgrind ../bazel-bin/htmlparser/node-test
+TEST(NodeTest, NodeRemoveChild) {
+  auto doc = Parse(
+      "<html><head><title>Foo</title></head>"
+      "<body><div>Hello</div></body></html>");
+
+  EXPECT_FALSE(CheckNodeConsistency(doc->RootNode()).has_value());
+
+  // Body is next sibling of head.
+  EXPECT_EQ(
+      doc->RootNode()->FirstChild()->FirstChild()->NextSibling()->DataAtom(),
+            htmlparser::Atom::BODY);
+  //               html           head         body
+
+  // Remove head.
+  Node* c = doc->RootNode()->FirstChild()->FirstChild();
+  doc->RootNode()->FirstChild()->RemoveChild(c);
+  std::stringbuf buf;
+  EXPECT_EQ(Renderer::Render(doc->RootNode(), &buf), RenderError::NO_ERROR);
+  EXPECT_EQ(buf.str(),
+            "<html><body><div>Hello</div></body></html>");
+
+  // Body is now first child of html.
+  EXPECT_EQ(doc->RootNode()->FirstChild()->FirstChild()->DataAtom(),
+            htmlparser::Atom::BODY);
+  EXPECT_FALSE(CheckNodeConsistency(doc->RootNode()).has_value());
+}
+
+TEST(NodeTest, NodeAppendChild) {
+  auto doc = Parse(
+      "<html><head></head><body><div>Hello</div></body></html>");
+  EXPECT_FALSE(CheckNodeConsistency(doc->RootNode()).has_value());
+  Node newDiv(NodeType::ELEMENT_NODE, Atom::DIV);
+  Node textContent(NodeType::TEXT_NODE);
+  textContent.SetData("World");
+  newDiv.AppendChild(&textContent);
+  doc->RootNode()->FirstChild()->FirstChild()->NextSibling()->AppendChild(
+      &newDiv);
+  //      html          head          body
+  std::stringbuf buf;
+  EXPECT_EQ(Renderer::Render(doc->RootNode(), &buf), RenderError::NO_ERROR);
+  EXPECT_EQ(buf.str(),
+            "<html><head></head><body><div>Hello</div><div>World</div></body>"
+            "</html>");
+  EXPECT_FALSE(CheckNodeConsistency(doc->RootNode()).has_value());
+}
+
+TEST(NodeTest, NodeInsertBefore) {
+  auto doc = Parse(
+      "<html><head></head><body><div>World</div></body></html>");
+  EXPECT_FALSE(CheckNodeConsistency(doc->RootNode()).has_value());
+  Node newDiv(NodeType::ELEMENT_NODE, Atom::DIV);
+  Node textContent(NodeType::TEXT_NODE);
+  textContent.SetData("Hello");
+  newDiv.AppendChild(&textContent);
+  doc->RootNode()->FirstChild()->FirstChild()->NextSibling()->InsertBefore(
+      &newDiv, doc->RootNode()->FirstChild()->FirstChild()->NextSibling()
+      ->FirstChild());
+  //                   <html>     <head>        <body>         <div>
+  std::stringbuf buf;
+  EXPECT_EQ(Renderer::Render(doc->RootNode(), &buf), RenderError::NO_ERROR);
+  EXPECT_EQ(buf.str(),
+            "<html><head></head><body><div>Hello</div><div>World</div></body>"
+            "</html>");
+  EXPECT_FALSE(CheckNodeConsistency(doc->RootNode()).has_value());
+}
+
+TEST(NodeTest, NodeReparentChildren) {
+  auto doc = Parse(
+      "<html><head></head><body><div>Hello</div><div>World</div></body>"
+      "</html>");
+  EXPECT_FALSE(CheckNodeConsistency(doc->RootNode()).has_value());
+
+  // Move contents of body to head.
+  doc->RootNode()->FirstChild()->FirstChild()->NextSibling()
+      ->ReparentChildrenTo(doc->RootNode()->FirstChild()->FirstChild());
+  std::stringbuf buf;
+  EXPECT_EQ(Renderer::Render(doc->RootNode(), &buf), RenderError::NO_ERROR);
+  EXPECT_EQ(
+      doc->RootNode()->FirstChild()->FirstChild()->FirstChild()->DataAtom(),
+          htmlparser::Atom::DIV);
+  EXPECT_EQ(buf.str(),
+            "<html><head><div>Hello</div><div>World</div></head><body></body>"
+            "</html>");
+  EXPECT_FALSE(CheckNodeConsistency(doc->RootNode()).has_value());
+}
+
+TEST(NodeTest, AttributeTest) {
+  Node div(NodeType::ELEMENT_NODE, Atom::DIV);
+  Attribute attr_a{.name_space = "", .key = "class", .value = "foo"};
+  Attribute attr_b{.name_space = "", .key = "id", .value = "myDiv"};
+  Attribute attr_c{.name_space = "", .key = "class", .value = "bar"};
+
+  div.AddAttribute(attr_a);
+  div.AddAttribute(attr_b);
+  div.AddAttribute(attr_c);
+
+  // Before sorting, order as inserted.
+  EXPECT_EQ(div.Attributes()[0].key, "class");
+  EXPECT_EQ(div.Attributes()[0].value, "foo");
+  EXPECT_EQ(div.Attributes()[1].key, "id");
+  EXPECT_EQ(div.Attributes()[1].value, "myDiv");
+  EXPECT_EQ(div.Attributes()[2].key, "class");
+  EXPECT_EQ(div.Attributes()[2].value, "bar");
+
+  // After sorting.
+  div.SortAttributes();
+  EXPECT_EQ(div.Attributes().size(), 3);
+  EXPECT_EQ(div.Attributes()[0].key, "class");
+  EXPECT_EQ(div.Attributes()[0].value, "foo");  // Values not sorted.
+  EXPECT_EQ(div.Attributes()[1].key, "class");
+  EXPECT_EQ(div.Attributes()[1].value, "bar");
+  EXPECT_EQ(div.Attributes()[2].key, "id");
+  EXPECT_EQ(div.Attributes()[2].value, "myDiv");
+
+  // Sort and remove duplicates.
+  div.SortAttributes(true);
+  EXPECT_EQ(div.Attributes().size(), 2);
+  EXPECT_EQ(div.Attributes()[0].key, "class");
+  EXPECT_EQ(div.Attributes()[0].value, "foo");
+  EXPECT_EQ(div.Attributes()[1].key, "id");
+  EXPECT_EQ(div.Attributes()[1].value, "myDiv");
+
+  // Namespace.
+  Attribute attr_ns{.name_space = "amp", .key = "class", .value = "last"};
+  div.AddAttribute(attr_ns);
+  div.SortAttributes();
+  EXPECT_EQ(div.Attributes()[0].KeyPart(), "amp:class");
+  EXPECT_EQ(div.Attributes()[0].value, "last");
+
+  // Case sensitivity.
+  Attribute attr_D{.name_space = "", .key = "CLASS", .value = "FOO"};
+  div.AddAttribute(attr_D);
+  div.SortAttributes();
+  EXPECT_EQ(div.Attributes()[0].key, "CLASS");
+  EXPECT_EQ(div.Attributes()[0].value, "FOO");
+}
diff --git a/validator/htmlparser/parser.cc b/validator/cpp/htmlparser/parser.cc
similarity index 81%
rename from validator/htmlparser/parser.cc
rename to validator/cpp/htmlparser/parser.cc
index c6cad1ab7c773..e7eb8003db528 100644
--- a/validator/htmlparser/parser.cc
+++ b/validator/cpp/htmlparser/parser.cc
@@ -19,124 +19,143 @@
 #include <tuple>
 #ifdef DUMP_NODES
 #include <iostream>  // For DumpDocument
-#endif  // DUMP_NODES
+#endif               // DUMP_NODES
 
-#include "logging.h"
+#include "glog/logging.h"
+#include "absl/flags/flag.h"
 #include "atomutil.h"
 #include "comparators.h"
 #include "defer.h"
 #include "doctype.h"
-#include "error.h"
 #include "foreign.h"
 #include "parser.h"
 #include "strings.h"
 
+ABSL_FLAG(uint32_t, htmlparser_max_nodes_depth_count, 245,
+          "Maximum depth of open nodes. "
+          "For: <a><b><c><d></d></c></b/></a>, the stack size is 4 as <a> is "
+          "kept open until three elements <b>,<c> and <d> are closed. "
+          "For: <a>a</a><b>b</b><c>c</c><d>d</d> the depth is 1 as they are "
+          "closed immediately after one child element.");
+
 namespace htmlparser {
 
 namespace {
 // Internal functions forward declarations.
 std::string ExtractWhitespace(const std::string& s);
+
+#ifdef DUMP_NODES
+void DumpNode(Node* root_node) {
+  for (Node* c = root_node->FirstChild(); c; c = c->NextSibling()) {
+    std::cerr << c->NameSpace() << ": " << AtomUtil::ToString(c->DataAtom())
+              << std::endl;
+    DumpNode(c);
+  }
+}
+// Dumps the nodes in the DOM in their final order after parsing.
+void DumpDocument(Document* doc) { DumpNode(doc->RootNode()); }
+
+#endif  // DUMP_NODES
+
 }  // namespace.
 
-std::unique_ptr<Node> Parse(std::string_view html) {
-  Parser parser(html, {
-    .scripting = true,
-    .frameset_ok = true,
-    .record_node_offsets = true,
-    .record_attribute_offsets = true,
-    .allow_deprecated_tags = false});
-  return std::unique_ptr<Node>(parser.Parse());
+std::unique_ptr<Document> Parse(std::string_view html) {
+  std::unique_ptr<Parser> parser = std::make_unique<Parser>(
+      html,
+      ParseOptions{.scripting = true,
+                   .frameset_ok = true,
+                   .record_node_offsets = true,
+                   .record_attribute_offsets = true});
+  return parser->Parse();
 }
 
-std::unique_ptr<Node> ParseWithOptions(std::string_view html,
-                         const ParseOptions& options) {
-  Parser parser(html, options);
-  return parser.Parse();
+std::unique_ptr<Document> ParseWithOptions(std::string_view html,
+                                           const ParseOptions& options) {
+  return std::make_unique<Parser>(html, options)->Parse();
 }
 
-std::vector<Node*> ParseFragmentWithOptions(std::string_view html,
-                                              const ParseOptions& options,
-                                              Node* fragment_parent) {
-  Parser parser(html, options, fragment_parent);
-  auto root = Node::make_node(NodeType::ELEMENT_NODE, Atom::HTML);
-  parser.document_->AppendChild(root);
-  parser.open_elements_stack_.Push(root);
+std::unique_ptr<Document> ParseFragmentWithOptions(std::string_view html,
+                                                   const ParseOptions& options,
+                                                   Node* fragment_parent) {
+  std::unique_ptr<Parser> parser = std::make_unique<Parser>(
+      html, options, fragment_parent);
+  Node* root = parser->document_->NewNode(NodeType::ELEMENT_NODE, Atom::HTML);
+  parser->document_->root_node_->AppendChild(root);
+  parser->open_elements_stack_.Push(root);
 
   if (fragment_parent && fragment_parent->DataAtom() == Atom::TEMPLATE) {
-    parser.template_stack_.push_back(std::bind(&Parser::InTemplateIM, &parser));
+    parser->template_stack_.push_back(std::bind(&Parser::InTemplateIM,
+                                                parser.get()));
   }
 
-  parser.ResetInsertionMode();
+  parser->ResetInsertionMode();
 
   for (Node* node = fragment_parent; node; node = node->Parent()) {
     if (node->Type() == NodeType::ELEMENT_NODE &&
         node->DataAtom() == Atom::FORM) {
-      parser.form_ = node;
+      parser->form_ = node;
       break;
     }
   }
 
-  auto doc = parser.Parse();
+  auto doc = parser->Parse();
 
-  Node* parent = fragment_parent ? root : doc.get();
-  std::vector<Node*> nodes;
+  // doc could be nullptr when, for example, the stack depth >
+  // htmlparser_max_nodes_depth_count).
+  if (doc == nullptr) return nullptr;
+
+  Node* parent = fragment_parent ? root : doc->root_node_;
   for (Node* c = parent->FirstChild(); c;) {
     Node* next = c->NextSibling();
-    nodes.push_back(c);
-    parent->RemoveChild(c).release();
+    doc->fragment_nodes_.push_back(std::move(c));
+    parent->RemoveChild(c);
     c = next;
   }
 
-  return nodes;
+  return doc;
 }
 
-std::vector<Node*> ParseFragment(std::string_view html,
-                                   Node* fragment_parent) {
+std::unique_ptr<Document> ParseFragment(std::string_view html,
+                                        Node* fragment_parent) {
   // Expects clients to update the offsets relative to the parent which
   // this fragment belongs.
-  ParseOptions options = {
-    .scripting = true,
-    .frameset_ok = true,
-    .record_node_offsets = true,
-    .record_attribute_offsets = true,
-    .allow_deprecated_tags = false
-  };
+  ParseOptions options = {.scripting = true,
+                          .frameset_ok = true,
+                          .record_node_offsets = true,
+                          .record_attribute_offsets = true};
   return ParseFragmentWithOptions(html, options, fragment_parent);
 }
 
-Parser::Parser(std::string_view html,
-               const ParseOptions& options,
-               Node* fragment_parent) :
-    tokenizer_(std::make_unique<Tokenizer>(html,
-        fragment_parent ?
-        AtomUtil::ToString(fragment_parent->atom_) : "")),
-    on_node_callback_(options.on_node_callback),
-    document_(Node::make_node(NodeType::DOCUMENT_NODE)),
-    scope_marker_(Node::make_node(NodeType::SCOPE_MARKER_NODE)),
-    scripting_(options.scripting),
-    frameset_ok_(options.frameset_ok),
-    record_node_offsets_(options.record_node_offsets),
-    record_attribute_offsets_(options.record_attribute_offsets),
-    allow_deprecated_tags_(options.allow_deprecated_tags),
-    fragment_(fragment_parent != nullptr),
-    fragment_parent_node_(fragment_parent) {
+Parser::Parser(std::string_view html, const ParseOptions& options,
+               Node* fragment_parent)
+    : tokenizer_(std::make_unique<Tokenizer>(
+          html,
+          fragment_parent ? AtomUtil::ToString(fragment_parent->atom_) : "")),
+      on_node_callback_(options.on_node_callback),
+      document_(new Document),
+      scope_marker_(document_->NewNode(NodeType::SCOPE_MARKER_NODE)),
+      scripting_(options.scripting),
+      frameset_ok_(options.frameset_ok),
+      record_node_offsets_(options.record_node_offsets),
+      record_attribute_offsets_(options.record_attribute_offsets),
+      fragment_(fragment_parent != nullptr),
+      context_node_(fragment_parent) {
   insertion_mode_ = std::bind(&Parser::InitialIM, this);
 }
 
-#ifdef DUMP_NODES
-// Dumps the entire nodes in their final order after parsing.
-void DumpDocument(Node* doc) {
-  for (Node* c = doc->FirstChild(); c; c = c->NextSibling()) {
-    std::cerr << c->NameSpace() << ": " << AtomUtil::ToString(c->DataAtom())
-              << std::endl;
-    DumpDocument(c);
-  }
-}
-#endif  // DUMP_NODES
-
-std::unique_ptr<Node> Parser::Parse() {
+std::unique_ptr<Document> Parser::Parse() {
   bool eof = tokenizer_->IsEOF();
   while (!eof) {
+    if (open_elements_stack_.size() >
+        ::absl::GetFlag(FLAGS_htmlparser_max_nodes_depth_count)) {
+      LOG(WARNING) << "Skipped parsing. Document too complex: "
+                   << open_elements_stack_.size() << " vs. Max allowed: ("
+                   << ::absl::GetFlag(FLAGS_htmlparser_max_nodes_depth_count)
+                   << ")";
+      delete document_.release();
+      return nullptr;
+    }
+
     Node* node = open_elements_stack_.Top();
     tokenizer_->SetAllowCDATA(node && !node->name_space_.empty());
     // Read and parse the next token.
@@ -154,7 +173,7 @@ std::unique_ptr<Node> Parser::Parse() {
   }
 
 #ifdef DUMP_NODES
-  DumpDocument(document_);
+  DumpDocument(document_.get());
 #endif
 
   return std::move(document_);
@@ -166,10 +185,10 @@ Node* Parser::top() {
     return node;
   }
 
-  return document_.get();
+  return document_->root_node_;
 }  // End Parser::Top.
 
-template<typename... Args>
+template <typename... Args>
 bool Parser::PopUntil(Scope scope, Args... match_tags) {
   std::vector<Atom> argsList{match_tags...};
   int i = IndexOfElementInScope(scope, argsList);
@@ -181,7 +200,7 @@ bool Parser::PopUntil(Scope scope, Args... match_tags) {
 }  // End Parser::PopUntil.
 
 int Parser::IndexOfElementInScope(Scope scope,
-    const std::vector<Atom>& match_tags) const {
+                                  const std::vector<Atom>& match_tags) const {
   for (int i = open_elements_stack_.size() - 1; i >= 0; --i) {
     Node* node = open_elements_stack_.at(i);
     if (node->name_space_.empty()) {
@@ -201,8 +220,7 @@ int Parser::IndexOfElementInScope(Scope scope,
           if (node->atom_ == Atom::BUTTON) return -1;
           break;
         case Scope::TableScope:
-          if (node->atom_ == Atom::HTML ||
-              node->atom_ == Atom::TABLE ||
+          if (node->atom_ == Atom::HTML || node->atom_ == Atom::TABLE ||
               node->atom_ == Atom::TEMPLATE) {
             return -1;
           }
@@ -213,7 +231,7 @@ int Parser::IndexOfElementInScope(Scope scope,
           }
           break;
         default:
-          CHECK(false, "HTML Parser reached unreachable scope");
+          CHECK(false) << "HTML Parser reached unreachable scope";
       }
     }
 
@@ -238,7 +256,7 @@ int Parser::IndexOfElementInScope(Scope scope,
   return -1;
 }  // Parser::IndexOfElementInScope.
 
-template<typename... Args>
+template <typename... Args>
 bool Parser::ElementInScope(Scope scope, Args... tags) const {
   std::vector<Atom> argsList{tags...};
   return IndexOfElementInScope(scope, argsList) != -1;
@@ -263,14 +281,14 @@ void Parser::ClearStackToContext(Scope scope) {
         }
         break;
       case Scope::TableBodyScope:
-        if (atom == Atom::HTML || atom == Atom::TBODY || atom == Atom::TFOOT
-            || atom == Atom::THEAD || atom == Atom::TEMPLATE) {
+        if (atom == Atom::HTML || atom == Atom::TBODY || atom == Atom::TFOOT ||
+            atom == Atom::THEAD || atom == Atom::TEMPLATE) {
           open_elements_stack_.Pop(open_elements_stack_.size() - i - 1);
           return;
         }
         break;
       default:
-        CHECK(false, "HTML Parser reached unreachable scope");
+        CHECK(false) << "HTML Parser reached unreachable scope";
     }
   }
 }  // Parser::ClearStackToContext.
@@ -324,15 +342,11 @@ void Parser::AddChild(Node* node) {
 bool Parser::ShouldFosterParent() {
   if (!foster_parenting_) return false;
   Atom a = top()->atom_;
-  return (a == Atom::TABLE ||
-          a == Atom::TBODY ||
-          a == Atom::TFOOT ||
-          a == Atom::THEAD ||
-          a == Atom::TR);
+  return (a == Atom::TABLE || a == Atom::TBODY || a == Atom::TFOOT ||
+          a == Atom::THEAD || a == Atom::TR);
 }  // Parser::ShouldFosterParent.
 
 void Parser::FosterParent(Node* node) {
-  std::unique_ptr<Node> n(node);
   Node* table = nullptr;
   Node* parent = nullptr;
   Node* prev = nullptr;
@@ -354,7 +368,7 @@ void Parser::FosterParent(Node* node) {
   }
 
   if (tpl && (!table || j > i)) {
-    tpl->AppendChild(n.release());
+    tpl->AppendChild(node);
     return;
   }
 
@@ -377,37 +391,39 @@ void Parser::FosterParent(Node* node) {
 
   if (prev && prev->node_type_ == NodeType::TEXT_NODE &&
       node->node_type_ == NodeType::TEXT_NODE) {
-    prev->data_ += n->data_;
+    prev->data_ += node->data_;
     return;
   }
 
-  parent->InsertBefore(n.release(), table);
+  parent->InsertBefore(node, table);
 }  // Parser::FosterParent.
 
 void Parser::AddText(const std::string& text) {
   if (text.empty()) return;
 
-  auto text_node = std::unique_ptr<Node>(Node::make_node(NodeType::TEXT_NODE));
-  text_node->data_ = text;
-  text_node->position_in_html_src_ = token_.position_in_html_src;
+  auto text_node = document_->NewNode(NodeType::TEXT_NODE);
 
   if (ShouldFosterParent()) {
-    FosterParent(text_node.release());
+    text_node->data_.assign(text, 0, text.size());
+    text_node->position_in_html_src_ = token_.position_in_html_src;
+    FosterParent(text_node);
     return;
   }
 
   Node* top_node = top();
   if (top_node->LastChild() &&
       top_node->LastChild()->node_type_ == NodeType::TEXT_NODE) {
-    top_node->LastChild()->data_ += text;
+    top_node->LastChild()->data_.append(text);
     return;
   }
 
-  AddChild(text_node.release());
+  text_node->data_.assign(text, 0, text.size());
+  text_node->position_in_html_src_ = token_.position_in_html_src;
+  AddChild(text_node);
 }  // Parser::AddText.
 
 void Parser::AddElement() {
-  Node* element_node = Node::make_node(NodeType::ELEMENT_NODE, token_.atom);
+  Node* element_node = document_->NewNode(NodeType::ELEMENT_NODE, token_.atom);
   if (token_.atom == Atom::UNKNOWN) {
     element_node->data_ = token_.data;
   }
@@ -433,19 +449,17 @@ void Parser::AddElement() {
     element_node->position_in_html_src_ = token_.position_in_html_src;
   }
 
-  std::copy(token_.attributes.begin(),
-            token_.attributes.end(),
+  std::copy(token_.attributes.begin(), token_.attributes.end(),
             std::back_inserter(element_node->attributes_));
   AddChild(element_node);
 
   if (!record_attribute_offsets_ && !element_node->attributes_.empty()) {
-    std::transform(element_node->attributes_.begin(),
-                   element_node->attributes_.end(),
-                   element_node->attributes_.begin(),
-                   [](Attribute attr) -> Attribute {
-                     attr.position_in_html_src = std::nullopt;
-                     return attr;
-                   });
+    std::transform(
+        element_node->attributes_.begin(), element_node->attributes_.end(),
+        element_node->attributes_.begin(), [](Attribute attr) -> Attribute {
+          attr.position_in_html_src = std::nullopt;
+          return attr;
+        });
   }
 
   if (on_node_callback_) {
@@ -526,7 +540,7 @@ void Parser::ReconstructActiveFormattingElements() {
 
   do {
     i++;
-    auto clone = active_formatting_elements_stack_.at(i)->Clone();
+    auto clone = document_->CloneNode(active_formatting_elements_stack_.at(i));
     AddChild(clone);
     active_formatting_elements_stack_.Replace(i, clone);
   } while (i < active_formatting_elements_stack_.size() - 1);
@@ -539,8 +553,8 @@ void Parser::AcknowledgeSelfClosingTag() {
 
 // Section 12.2.4.1, "using the rules for".
 void Parser::SetOriginalIM() {
-  CHECK(!original_insertion_mode_,
-        "html: bad parser state: original_insertion_mode was set twice");
+  CHECK(!original_insertion_mode_)
+       << "html: bad parser state: original_insertion_mode was set twice";
   original_insertion_mode_ = insertion_mode_;
 }  // Parser::SetOriginalIM.
 
@@ -549,8 +563,8 @@ void Parser::ResetInsertionMode() {
   for (int i = open_elements_stack_.size() - 1; i >= 0; --i) {
     Node* node = open_elements_stack_.at(i);
     bool last = (i == 0);
-    if (last && fragment_parent_node_) {
-      node = fragment_parent_node_;
+    if (last && context_node_) {
+      node = context_node_;
     }
 
     switch (node->atom_) {
@@ -559,8 +573,8 @@ void Parser::ResetInsertionMode() {
           Node* ancestor = node;
           Node* first = open_elements_stack_.at(0);
           while (ancestor != first) {
-            ancestor = open_elements_stack_.at(open_elements_stack_.Index(
-                  ancestor) - 1);
+            ancestor = open_elements_stack_.at(
+                open_elements_stack_.Index(ancestor) - 1);
             switch (ancestor->atom_) {
               case Atom::TEMPLATE:
                 insertion_mode_ = std::bind(&Parser::InSelectIM, this);
@@ -577,8 +591,6 @@ void Parser::ResetInsertionMode() {
         break;
       case Atom::TD:
       case Atom::TH:
-        // TODO: Remove this divergence from the HTML5 spec.
-        //
         // https://bugs.chromium.org/p/chromium/issues/detail?id=829668
         insertion_mode_ = std::bind(&Parser::InCellIM, this);
         break;
@@ -607,8 +619,6 @@ void Parser::ResetInsertionMode() {
         insertion_mode_ = template_stack_.back();
         break;
       case Atom::HEAD:
-        // TODO: remove this divergence from the HTML5 spec.
-        //
         // https://bugs.chromium.org/p/chromium/issues/detail?id=829668
         insertion_mode_ = std::bind(&Parser::InHeadIM, this);
         break;
@@ -649,22 +659,22 @@ bool Parser::InitialIM() {
       break;
     }
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->data_ = std::move(token_.data);
       if (record_node_offsets_) {
         node->position_in_html_src_ = token_.position_in_html_src;
       }
       node->SetManufactured(token_.is_manufactured);
-      document_->AppendChild(node);
+      document_->root_node_->AppendChild(node);
       return true;
     }
     case TokenType::DOCTYPE_TOKEN: {
-      auto [node, quirks_mode] = ParseDoctype(token_.data);
+      auto doctype_node = document_->NewNode(NodeType::DOCTYPE_NODE);
+      bool quirks_mode = ParseDoctype(token_.data, doctype_node);
       if (record_node_offsets_) {
-        node->position_in_html_src_ = token_.position_in_html_src;
+        doctype_node->position_in_html_src_ = token_.position_in_html_src;
       }
-      Node* doctype_node = node.release();
-      document_->AppendChild(doctype_node);
+      document_->root_node_->AppendChild(doctype_node);
       accounting_.quirks_mode = quirks_mode;
       insertion_mode_ = std::bind(&Parser::BeforeHTMLIM, this);
 
@@ -708,13 +718,13 @@ bool Parser::BeforeHTMLIM() {
       break;
     }
     case TokenType::END_TAG_TOKEN: {
-      switch ((Atom) token_.atom) {
+      switch ((Atom)token_.atom) {
         case Atom::HEAD:
         case Atom::BODY:
         case Atom::HTML:
         case Atom::BR:
           ParseImpliedToken(TokenType::START_TAG_TOKEN, Atom::HTML,
-              AtomUtil::ToString(Atom::HTML));
+                            AtomUtil::ToString(Atom::HTML));
           return false;
         default:
           // Ignore the token.
@@ -723,18 +733,18 @@ bool Parser::BeforeHTMLIM() {
       break;
     }
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
-      node->data_ = std::data(token_.data);
-      document_->AppendChild(node);
+      node->data_ = std::move(token_.data);
+      document_->root_node_->AppendChild(node);
       return true;
     }
     default:
       break;
   }
   ParseImpliedToken(TokenType::START_TAG_TOKEN, Atom::HTML,
-      AtomUtil::ToString(Atom::HTML));
+                    AtomUtil::ToString(Atom::HTML));
   return false;
 }  // Parser::BeforeHTMLIM.
 
@@ -771,7 +781,7 @@ bool Parser::BeforeHeadIM() {
         case Atom::HTML:
         case Atom::BR:
           ParseImpliedToken(TokenType::START_TAG_TOKEN, Atom::HEAD,
-              AtomUtil::ToString(Atom::HEAD));
+                            AtomUtil::ToString(Atom::HEAD));
           return false;
         default:
           // Ignore the token.
@@ -780,7 +790,7 @@ bool Parser::BeforeHeadIM() {
       break;
     }
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
       node->data_ = std::move(token_.data);
@@ -795,8 +805,7 @@ bool Parser::BeforeHeadIM() {
       break;
   }
 
-  ParseImpliedToken(TokenType::START_TAG_TOKEN,
-                    Atom::HEAD,
+  ParseImpliedToken(TokenType::START_TAG_TOKEN, Atom::HEAD,
                     AtomUtil::ToString(Atom::HEAD));
   return false;
 }  // Parser::BeforeHeadIM.
@@ -825,7 +834,6 @@ bool Parser::InHeadIM() {
         case Atom::BASE:
         case Atom::BASEFONT:
         case Atom::BGSOUND:
-        case Atom::COMMAND:
         case Atom::LINK:
         case Atom::META: {
           AddElement();
@@ -834,36 +842,40 @@ bool Parser::InHeadIM() {
           return true;
         }
         case Atom::NOSCRIPT: {
-          AddElement();
           if (scripting_) {
-            SetOriginalIM();
-            insertion_mode_ = std::bind(&Parser::TextIM, this);
-          } else {
-            insertion_mode_ = std::bind(&Parser::InHeadNoscriptIM, this);
+            ParseGenericRawTextElement();
+            return true;
           }
+          AddElement();
+          insertion_mode_ = std::bind(&Parser::InHeadNoscriptIM, this);
+          // Don't let the tokenizer go into raw text mode when scripting is
+          // disabled.
+          tokenizer_->NextIsNotRawText();
           return true;
         }
         case Atom::SCRIPT:
-        case Atom::TITLE:
-        case Atom::NOFRAMES:
-        case Atom::STYLE: {
+        case Atom::TITLE: {
           AddElement();
           SetOriginalIM();
           insertion_mode_ = std::bind(&Parser::TextIM, this);
           return true;
         }
+        case Atom::NOFRAMES:
+        case Atom::STYLE: {
+          ParseGenericRawTextElement();
+          return true;
+        }
         case Atom::HEAD: {
           // Ignore the token.
           return true;
         }
         case Atom::TEMPLATE: {
           AddElement();
-          active_formatting_elements_stack_.Push(scope_marker_.get());
+          active_formatting_elements_stack_.Push(scope_marker_);
           frameset_ok_ = false;
           insertion_mode_ = std::bind(&Parser::InTemplateIM, this);
           template_stack_.push_back(std::bind(&Parser::InTemplateIM, this));
           return true;
-          break;
         }
         default:
           // Ignore remaining tags.
@@ -882,14 +894,12 @@ bool Parser::InHeadIM() {
         case Atom::HTML:
         case Atom::BR: {
           ParseImpliedToken(TokenType::END_TAG_TOKEN, Atom::HEAD,
-              AtomUtil::ToString(Atom::HEAD));
+                            AtomUtil::ToString(Atom::HEAD));
           return false;
         }
         case Atom::TEMPLATE: {
           if (!open_elements_stack_.Contains(Atom::TEMPLATE)) return true;
 
-          // TODO: Remove this divergence from the HTML5 spec.
-          //
           // See https://bugs.chromium.org/p/chromium/issues/detail?id=829668
           GenerateImpliedEndTags();
           for (int i = open_elements_stack_.size() - 1; i >= 0; --i) {
@@ -912,7 +922,7 @@ bool Parser::InHeadIM() {
       break;
     }
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
       node->data_ = std::move(token_.data);
@@ -928,7 +938,7 @@ bool Parser::InHeadIM() {
   }
 
   ParseImpliedToken(TokenType::END_TAG_TOKEN, Atom::HEAD,
-      AtomUtil::ToString(Atom::HEAD));
+                    AtomUtil::ToString(Atom::HEAD));
   return false;
 }  // Parser::InHeadIM.
 
@@ -955,7 +965,12 @@ bool Parser::InHeadNoscriptIM() {
           break;
         }
         case Atom::HEAD:
+          // Ignore the token.
+          return true;
         case Atom::NOSCRIPT: {
+          // Don't let the tokenizer go into raw text mode even when a
+          // <noscript> tag is in "in head noscript" insertion mode.
+          tokenizer_->NextIsNotRawText();
           // Ignore the token.
           return true;
         }
@@ -977,8 +992,7 @@ bool Parser::InHeadNoscriptIM() {
       break;
     }
     case TokenType::TEXT_TOKEN: {
-      std::string_view data_view = std::move(token_.data);
-      if (Strings::IsAllWhitespaceChars(data_view)) {
+      if (Strings::IsAllWhitespaceChars(token_.data)) {
         // It was all whitespace.
         return InHeadIM();
       }
@@ -992,8 +1006,8 @@ bool Parser::InHeadNoscriptIM() {
       break;
   }
   open_elements_stack_.Pop();
-  CHECK(top()->atom_ == Atom::HEAD,
-        "html: the new current node will be a head element.");
+  CHECK(top()->atom_ == Atom::HEAD)
+       << "html: the new current node will be a head element.";
 
   insertion_mode_ = std::bind(&Parser::InHeadIM, this);
   if (token_.atom == Atom::NOSCRIPT) {
@@ -1072,10 +1086,10 @@ bool Parser::AfterHeadIM() {
       break;
     }
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
-      node->data_ = token_.data;
+      node->data_ = std::move(token_.data);
       AddChild(node);
       return true;
     }
@@ -1087,7 +1101,7 @@ bool Parser::AfterHeadIM() {
   }
 
   ParseImpliedToken(TokenType::START_TAG_TOKEN, Atom::BODY,
-      AtomUtil::ToString(Atom::BODY));
+                    AtomUtil::ToString(Atom::BODY));
   frameset_ok_ = true;
   return false;
 }  // Parser::AfterHeadIM.
@@ -1138,8 +1152,7 @@ bool Parser::InBodyIM() {
             return true;
           }
           CopyAttributes(open_elements_stack_.at(0), token_);
-          if (!accounting_.has_manufactured_html ||
-              num_html_tags_ > 1) {
+          if (!accounting_.has_manufactured_html || num_html_tags_ > 1) {
             accounting_.duplicate_html_elements = true;
             accounting_.duplicate_html_element_location =
                 token_.position_in_html_src;
@@ -1149,7 +1162,6 @@ bool Parser::InBodyIM() {
         case Atom::BASE:
         case Atom::BASEFONT:
         case Atom::BGSOUND:
-        case Atom::COMMAND:
         case Atom::LINK:
         case Atom::META:
         case Atom::NOFRAMES:
@@ -1170,8 +1182,7 @@ bool Parser::InBodyIM() {
                 body->atom_ == Atom::BODY) {
               frameset_ok_ = false;
               CopyAttributes(body, token_);
-              if (!accounting_.has_manufactured_body ||
-                  num_body_tags_ > 1) {
+              if (!accounting_.has_manufactured_body || num_body_tags_ > 1) {
                 accounting_.duplicate_body_elements = true;
                 accounting_.duplicate_body_element_location =
                     token_.position_in_html_src;
@@ -1189,7 +1200,7 @@ bool Parser::InBodyIM() {
           auto body = open_elements_stack_.at(1);
           if (body->Parent()) {
             auto removed_body = body->Parent()->RemoveChild(body);
-            open_elements_stack_.Remove(removed_body.get());
+            open_elements_stack_.Remove(removed_body);
           }
           // Remove all nodes except one, the last in the stack.
           open_elements_stack_.Pop(open_elements_stack_.size() - 1);
@@ -1276,6 +1287,7 @@ bool Parser::InBodyIM() {
             Node* node = open_elements_stack_.at(i);
             switch (node->atom_) {
               case Atom::LI:
+                // Remove all except last in stack.
                 open_elements_stack_.Pop(open_elements_stack_.size() - i);
                 break;
               case Atom::ADDRESS:
@@ -1299,6 +1311,7 @@ bool Parser::InBodyIM() {
             switch (node->atom_) {
               case Atom::DD:
               case Atom::DT:
+                // Remove all except last in stack.
                 open_elements_stack_.Pop(open_elements_stack_.size() - i);
                 break;
               case Atom::ADDRESS:
@@ -1320,15 +1333,15 @@ bool Parser::InBodyIM() {
           break;
         }
         case Atom::BUTTON: {
-          PopUntil(Scope::ButtonScope, Atom::BUTTON);
+          PopUntil(Scope::DefaultScope, Atom::BUTTON);
           ReconstructActiveFormattingElements();
           AddElement();
           frameset_ok_ = false;
           break;
         }
         case Atom::A: {
-          for (int i = active_formatting_elements_stack_.size() - 1;
-               i >= 0; --i) {
+          for (int i = active_formatting_elements_stack_.size() - 1; i >= 0;
+               --i) {
             Node* node = active_formatting_elements_stack_.at(i);
             if (node->node_type_ == NodeType::SCOPE_MARKER_NODE) break;
             if (node->node_type_ == NodeType::ELEMENT_NODE &&
@@ -1373,7 +1386,7 @@ bool Parser::InBodyIM() {
         case Atom::OBJECT: {
           ReconstructActiveFormattingElements();
           AddElement();
-          active_formatting_elements_stack_.Push(scope_marker_.get());
+          active_formatting_elements_stack_.Push(scope_marker_);
           frameset_ok_ = false;
           break;
         }
@@ -1399,13 +1412,10 @@ bool Parser::InBodyIM() {
           AcknowledgeSelfClosingTag();
           if (token_.atom == Atom::INPUT) {
             for (auto& attr : token_.attributes) {
-              if (attr.key == "type") {
-                std::string val = attr.value;
-                Strings::ToLower(&val);
-                if (val == "hidden") {
+              if (attr.key == "type" &&
+                  Strings::EqualFold(attr.value, "hidden")) {
                   // Skip setting frameset_ok_ = false;
                   return true;
-                }
               }
             }
           }
@@ -1429,74 +1439,9 @@ bool Parser::InBodyIM() {
           break;
         }
         case Atom::IMAGE: {
-          if (top()->name_space_ == "svg") {
-            AddElement();
-          } else {
-            token_.atom = Atom::IMG;
-            token_.data = AtomUtil::ToString(Atom::IMG);
-            return false;
-          }
-          break;
-        }
-        case Atom::ISINDEX: {
-          if (allow_deprecated_tags_) {
-            AddElement();
-            break;
-          } else {
-            if (form_) {
-              // Ignore the token.
-              return true;
-            }
-            std::string action = "";
-            std::string prompt = "This is a searchable index. "
-              "Enter search keywords: ";
-            std::vector<Attribute> attributes;
-            attributes.push_back({"", "name", "isindex"});
-            for (auto& a : token_.attributes) {
-              if (a.key == "action") {
-                action = a.value;
-              } else if (a.key == "name") {
-                // Ignore the attribute.
-              } else if (a.key == "prompt") {
-                prompt = a.value;
-              } else {
-                attributes.push_back(a);
-              }
-            }
-            AcknowledgeSelfClosingTag();
-            PopUntil(Scope::ButtonScope, Atom::P);
-            ParseImpliedToken(TokenType::START_TAG_TOKEN, Atom::FORM,
-                AtomUtil::ToString(Atom::FORM));
-            if (!form_) {
-              // NOTE: The 'isindex' element has been removed,
-              // and the 'template' element has not been designed to be
-              // collaborative with the index element.
-              //
-              // Ignore the token.
-              return true;
-            }
-            if (!action.empty()) {
-              form_->attributes_.clear();
-              form_->attributes_.push_back({"", "action", action});
-            }
-            ParseImpliedToken(TokenType::START_TAG_TOKEN, Atom::HR,
-                AtomUtil::ToString(Atom::HR));
-            ParseImpliedToken(TokenType::START_TAG_TOKEN, Atom::LABEL,
-                AtomUtil::ToString(Atom::LABEL));
-            AddText(prompt);
-            Node* node = Node::make_node(NodeType::ELEMENT_NODE, Atom::INPUT);
-            std::copy(attributes.begin(), attributes.end(),
-                std::back_inserter(node->attributes_));
-            AddChild(node);
-            open_elements_stack_.Pop();
-            ParseImpliedToken(TokenType::END_TAG_TOKEN, Atom::LABEL,
-                AtomUtil::ToString(Atom::LABEL));
-            ParseImpliedToken(TokenType::START_TAG_TOKEN, Atom::HR,
-                AtomUtil::ToString(Atom::HR));
-            ParseImpliedToken(TokenType::END_TAG_TOKEN, Atom::FORM,
-                AtomUtil::ToString(Atom::FORM));
-          }
-          break;
+          token_.atom = Atom::IMG;
+          token_.data = AtomUtil::ToString(Atom::IMG);
+          return false;
         }
         case Atom::TEXTAREA: {
           AddElement();
@@ -1509,23 +1454,28 @@ bool Parser::InBodyIM() {
           PopUntil(Scope::ButtonScope, Atom::P);
           ReconstructActiveFormattingElements();
           frameset_ok_ = false;
-          AddElement();
-          SetOriginalIM();
-          insertion_mode_ = std::bind(&Parser::TextIM, this);
+          ParseGenericRawTextElement();
           break;
         }
         case Atom::IFRAME: {
           frameset_ok_ = false;
-          AddElement();
-          SetOriginalIM();
-          insertion_mode_ = std::bind(&Parser::TextIM, this);
+          ParseGenericRawTextElement();
+          break;
+        }
+        case Atom::NOEMBED: {
+          ParseGenericRawTextElement();
           break;
         }
-        case Atom::NOEMBED:
         case Atom::NOSCRIPT: {
+          if (scripting_) {
+            ParseGenericRawTextElement();
+            return true;
+          }
+          ReconstructActiveFormattingElements();
           AddElement();
-          SetOriginalIM();
-          insertion_mode_ = std::bind(&Parser::TextIM, this);
+          // Don't let the tokenizer go into raw text mode when scripting is
+          // disabled.
+          tokenizer_->NextIsNotRawText();
           break;
         }
         case Atom::SELECT: {
@@ -1609,7 +1559,7 @@ bool Parser::InBodyIM() {
         case Atom::HTML: {
           if (ElementInScope(Scope::DefaultScope, Atom::BODY)) {
             ParseImpliedToken(TokenType::END_TAG_TOKEN, Atom::BODY,
-                AtomUtil::ToString(Atom::BODY));
+                              AtomUtil::ToString(Atom::BODY));
             return false;
           }
           return true;
@@ -1646,8 +1596,7 @@ bool Parser::InBodyIM() {
         }
         case Atom::FORM: {
           if (open_elements_stack_.Contains(Atom::TEMPLATE)) {
-            int i = IndexOfElementInScope(Scope::DefaultScope,
-                {Atom::FORM});
+            int i = IndexOfElementInScope(Scope::DefaultScope, {Atom::FORM});
             if (i == -1) {
               // Ignore the token.
               return true;
@@ -1661,8 +1610,7 @@ bool Parser::InBodyIM() {
           } else {
             Node* node = form_;
             form_ = nullptr;
-            int i = IndexOfElementInScope(Scope::DefaultScope,
-                {Atom::FORM});
+            int i = IndexOfElementInScope(Scope::DefaultScope, {Atom::FORM});
             if (!node || i == -1 || open_elements_stack_.at(i) != node) {
               // Ignore the token.
               return true;
@@ -1675,7 +1623,7 @@ bool Parser::InBodyIM() {
         case Atom::P: {
           if (!ElementInScope(Scope::ButtonScope, Atom::P)) {
             ParseImpliedToken(TokenType::START_TAG_TOKEN, Atom::P,
-                AtomUtil::ToString(Atom::P));
+                              AtomUtil::ToString(Atom::P));
           }
           PopUntil(Scope::ButtonScope, Atom::P);
           break;
@@ -1695,8 +1643,8 @@ bool Parser::InBodyIM() {
         case Atom::H4:
         case Atom::H5:
         case Atom::H6: {
-          PopUntil(Scope::DefaultScope, Atom::H1, Atom::H2, Atom::H3,
-              Atom::H4, Atom::H5, Atom::H6);
+          PopUntil(Scope::DefaultScope, Atom::H1, Atom::H2, Atom::H3, Atom::H4,
+                   Atom::H5, Atom::H6);
           break;
         }
         case Atom::A:
@@ -1714,9 +1662,9 @@ bool Parser::InBodyIM() {
         case Atom::TT:
         case Atom::U: {
           InBodyEndTagFormatting(token_.atom,
-                                 token_.atom != Atom::UNKNOWN ?
-                                 AtomUtil::ToString(token_.atom) :
-                                 token_.data);
+                                 token_.atom != Atom::UNKNOWN
+                                     ? AtomUtil::ToString(token_.atom)
+                                     : token_.data);
           break;
         }
         case Atom::APPLET:
@@ -1742,7 +1690,7 @@ bool Parser::InBodyIM() {
       break;
     }
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
       node->data_ = token_.data;
@@ -1750,7 +1698,6 @@ bool Parser::InBodyIM() {
       break;
     }
     case TokenType::ERROR_TOKEN: {
-      // TODO: Remove this divergence from the HTML5 spec.
       if (template_stack_.size() > 0) {
         insertion_mode_ = std::bind(&Parser::InTemplateIM, this);
         return false;
@@ -1798,9 +1745,17 @@ void Parser::InBodyEndTagFormatting(Atom tag_atom, std::string_view tag_name) {
   // Once the code successfully parses the comprehensive test suite, we should
   // refactor this code to be more idiomatic.
 
-  // Steps 1-4. The outer loop.
+  // Steps 1-2
+  if (auto current = open_elements_stack_.Top();
+      current->data_ == tag_name &&
+      active_formatting_elements_stack_.Index(current) == -1) {
+    open_elements_stack_.Pop();
+    return;
+  }
+
+  // Steps 3-5. The outer loop.
   for (int i = 0; i < 8; ++i) {
-    // Step 5. Find the formatting element.
+    // Step 6. Find the formatting element.
     Node* formatting_element = nullptr;
     for (int j = active_formatting_elements_stack_.size() - 1; j >= 0; --j) {
       if (active_formatting_elements_stack_.at(j)->node_type_ ==
@@ -1818,18 +1773,24 @@ void Parser::InBodyEndTagFormatting(Atom tag_atom, std::string_view tag_name) {
       return;
     }
 
+    // Step 7. Ignore the tag if formatting element is not in the stack of open
+    // elements.
     int fe_index = open_elements_stack_.Index(formatting_element);
     if (fe_index == -1) {
       active_formatting_elements_stack_.Remove(formatting_element);
       return;
     }
 
+    // Step 8. Ignore the tag if formatting element is not in the scope.
     if (!ElementInScope(Scope::DefaultScope, tag_atom)) {
       // Ignore the tag.
       return;
     }
 
-    // Steps 9-10. Find the furthest block.
+    // Step 9. This step is omitted because it's just a parse error but no
+    // need to return.
+
+    // Steps 10-11. Find the furthest block.
     Node* furthest_block = nullptr;
     for (int k = fe_index; k < open_elements_stack_.size(); ++k) {
       if (open_elements_stack_.at(k)->IsSpecialElement()) {
@@ -1847,52 +1808,73 @@ void Parser::InBodyEndTagFormatting(Atom tag_atom, std::string_view tag_name) {
       return;
     }
 
-    // Steps 11-12. Find the common ancestor and bookmark node.
+    // Steps 12-13. Find the common ancestor and bookmark node.
     Node* common_ancestor = open_elements_stack_.at(fe_index - 1);
     auto bookmark = active_formatting_elements_stack_.Index(formatting_element);
 
-    // Step 13. The inner loop. Find the last_node to reparent.
+    // Step 14. The inner loop. Find the last_node to reparent.
     Node* last_node = furthest_block;
     Node* node = furthest_block;
     int x = open_elements_stack_.Index(node);
-    // Steps 13.1-12.2
-    for (int j = 0; j < 3; ++j) {
-      // Step 13.3.
+    // Step 14.1.
+    int j = 0;
+    while (true) {
+      // Step 14.2.
+      j++;
+      // Step 14.3.
       x--;
       node = open_elements_stack_.at(x);
-      // Step 13.4 - 13.5.
+      // Step 14.4. Go to the next step if node is formatting element.
+      if (node == formatting_element) break;
+
+      // Step 14.5. Remove node from the list of active formatting elements if
+      // inner loop counter is greater than three and node is in the list of
+      // active formatting elements.
+      if (int ni = active_formatting_elements_stack_.Index(node);
+          j > 3 && ni > -1) {
+        active_formatting_elements_stack_.Remove(node);
+        // If any element of the list of active formatting elements is removed,
+        // we need to take care whether bookmark should be decremented or not.
+        // This is because the value of bookmark may exceed the size of the
+        // list by removing elements from the list.
+        if (ni <= bookmark) {
+          bookmark--;
+        }
+        continue;
+      }
+
+      // Step 14.6. Continue the next inner loop if node is not in the list of
+      // active formatting elements.
       if (active_formatting_elements_stack_.Index(node) == -1) {
         open_elements_stack_.Remove(node);
         continue;
       }
-      // Step 13.6.
-      if (node == formatting_element) {
-        break;
-      }
-      // Step 13.7.
-      Node* clone = node->Clone();
+
+      // Step 14.7.
+      Node* clone = document_->CloneNode(node);
       active_formatting_elements_stack_.Replace(
           active_formatting_elements_stack_.Index(node), clone);
-      open_elements_stack_.Replace(
-          open_elements_stack_.Index(node), clone);
+      open_elements_stack_.Replace(open_elements_stack_.Index(node), clone);
       node = clone;
-      // Step 13.8.
+
+      // Step 14.8.
       if (last_node == furthest_block) {
         bookmark = active_formatting_elements_stack_.Index(node) + 1;
       }
-      // Step 13.9.
+      // Step 14.9.
       if (last_node->Parent()) {
-        last_node->Parent()->RemoveChild(last_node).release();
+        last_node = last_node->Parent()->RemoveChild(last_node);
       }
       node->AppendChild(last_node);
-      // Step 13.10.
+
+      // Step 14.10.
       last_node = node;
     }
 
-    // Step 14. Reparent lastNode to the common ancestor,
+    // Step 15. Reparent lastNode to the common ancestor,
     // or for misnested table nodes, to the foster parent.
     if (last_node->Parent()) {
-      last_node->Parent()->RemoveChild(last_node).release();
+      last_node = last_node->Parent()->RemoveChild(last_node);
     }
 
     switch (common_ancestor->atom_) {
@@ -1907,13 +1889,13 @@ void Parser::InBodyEndTagFormatting(Atom tag_atom, std::string_view tag_name) {
         common_ancestor->AppendChild(last_node);
     }
 
-    // Steps 15-17. Reparent nodes from the furthest block's children
+    // Steps 16-18. Reparent nodes from the furthest block's children
     // to a clone of the formatting element.
-    Node* clone = formatting_element->Clone();
+    Node* clone = document_->CloneNode(formatting_element);
     furthest_block->ReparentChildrenTo(clone);
     furthest_block->AppendChild(clone);
 
-    // Step 18. Fix up the list of active formatting elements.
+    // Step 19. Fix up the list of active formatting elements.
     int old_loc = active_formatting_elements_stack_.Index(formatting_element);
     if (old_loc != -1 && old_loc < bookmark) {
       // Move the bookmark with the rest of the list.
@@ -1923,10 +1905,10 @@ void Parser::InBodyEndTagFormatting(Atom tag_atom, std::string_view tag_name) {
     active_formatting_elements_stack_.Remove(formatting_element);
     active_formatting_elements_stack_.Insert(bookmark, clone);
 
-    // Step 19. Fix up the stack of open elements.
+    // Step 20. Fix up the stack of open elements.
     open_elements_stack_.Remove(formatting_element);
     open_elements_stack_.Insert(open_elements_stack_.Index(furthest_block) + 1,
-        clone);
+                                clone);
   }
 }  // Parser::InBodyEndTagFormatting.
 
@@ -1957,7 +1939,7 @@ bool Parser::TextIM() {
       open_elements_stack_.Pop();
       break;
     case TokenType::TEXT_TOKEN: {
-      std::string_view data_view = token_.data;
+      std::string_view data_view(token_.data);
       Node* node = open_elements_stack_.Top();
       if ((node->atom_ == Atom::TEXTAREA) && !node->FirstChild()) {
         // Ignore a newline at the start of a <textarea> block.
@@ -1971,7 +1953,6 @@ bool Parser::TextIM() {
       if (data_view.empty()) return true;
       AddText(data_view.data());
       return true;
-      break;
     }
     case TokenType::END_TAG_TOKEN:
       open_elements_stack_.Pop();
@@ -2012,7 +1993,7 @@ bool Parser::InTableIM() {
       switch (token_.atom) {
         case Atom::CAPTION: {
           ClearStackToContext(Scope::TableScope);
-          active_formatting_elements_stack_.Push(scope_marker_.get());
+          active_formatting_elements_stack_.Push(scope_marker_);
           AddElement();
           insertion_mode_ = std::bind(&Parser::InCaptionIM, this);
           return true;
@@ -2025,7 +2006,7 @@ bool Parser::InTableIM() {
         }
         case Atom::COL: {
           ParseImpliedToken(TokenType::START_TAG_TOKEN, Atom::COLGROUP,
-              AtomUtil::ToString(Atom::COLGROUP));
+                            AtomUtil::ToString(Atom::COLGROUP));
           return false;
         }
         case Atom::TBODY:
@@ -2040,7 +2021,7 @@ bool Parser::InTableIM() {
         case Atom::TH:
         case Atom::TR: {
           ParseImpliedToken(TokenType::START_TAG_TOKEN, Atom::TBODY,
-              AtomUtil::ToString(Atom::TBODY));
+                            AtomUtil::ToString(Atom::TBODY));
           return false;
         }
         case Atom::TABLE: {
@@ -2134,7 +2115,7 @@ bool Parser::InTableIM() {
       break;
     }
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
       node->data_ = token_.data;
@@ -2153,7 +2134,7 @@ bool Parser::InTableIM() {
   }
 
   foster_parenting_ = true;
-  defer({foster_parenting_ = false;});
+  defer(foster_parenting_ = false;);
   return InBodyIM();
 }  // Parser::InTableIM.
 
@@ -2248,7 +2229,7 @@ bool Parser::InColumnGroupIM() {
       break;
     }
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
       node->data_ = token_.data;
@@ -2286,7 +2267,7 @@ bool Parser::InColumnGroupIM() {
             insertion_mode_ = std::bind(&Parser::InTableIM, this);
           }
           return true;
-        case  Atom::COL:
+        case Atom::COL:
           // Ignore the token.
           return true;
         case Atom::TEMPLATE:
@@ -2325,7 +2306,7 @@ bool Parser::InTableBodyIM() {
         case Atom::TD:
         case Atom::TH: {
           ParseImpliedToken(TokenType::START_TAG_TOKEN, Atom::TR,
-              AtomUtil::ToString(Atom::TR));
+                            AtomUtil::ToString(Atom::TR));
           return false;
         }
         case Atom::CAPTION:
@@ -2334,8 +2315,8 @@ bool Parser::InTableBodyIM() {
         case Atom::TBODY:
         case Atom::TFOOT:
         case Atom::THEAD: {
-          if (PopUntil(Scope::TableScope,
-              Atom::TBODY, Atom::THEAD, Atom::TFOOT)) {
+          if (PopUntil(Scope::TableScope, Atom::TBODY, Atom::THEAD,
+                       Atom::TFOOT)) {
             insertion_mode_ = std::bind(&Parser::InTableIM, this);
             return false;
           }
@@ -2360,8 +2341,8 @@ bool Parser::InTableBodyIM() {
           return true;
         }
         case Atom::TABLE: {
-          if (PopUntil(Scope::TableScope,
-              Atom::TBODY, Atom::THEAD, Atom::TFOOT)) {
+          if (PopUntil(Scope::TableScope, Atom::TBODY, Atom::THEAD,
+                       Atom::TFOOT)) {
             insertion_mode_ = std::bind(&Parser::InTableIM, this);
             return false;
           }
@@ -2385,7 +2366,7 @@ bool Parser::InTableBodyIM() {
       break;
     }
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
       node->data_ = token_.data;
@@ -2405,10 +2386,10 @@ bool Parser::InRowIM() {
     case TokenType::START_TAG_TOKEN: {
       switch (token_.atom) {
         case Atom::TD:
-        case Atom::TH:  {
+        case Atom::TH: {
           ClearStackToContext(Scope::TableRowScope);
           AddElement();
-          active_formatting_elements_stack_.Push(scope_marker_.get());
+          active_formatting_elements_stack_.Push(scope_marker_);
           insertion_mode_ = std::bind(&Parser::InCellIM, this);
           return true;
         }
@@ -2437,7 +2418,6 @@ bool Parser::InRowIM() {
         case Atom::TR: {
           if (PopUntil(Scope::TableScope, Atom::TR)) {
             insertion_mode_ = std::bind(&Parser::InTableBodyIM, this);
-            return true;
           }
           // Ignore the token.
           return true;
@@ -2455,7 +2435,7 @@ bool Parser::InRowIM() {
         case Atom::THEAD: {
           if (ElementInScope(Scope::TableScope, token_.atom)) {
             ParseImpliedToken(TokenType::END_TAG_TOKEN, Atom::TR,
-                AtomUtil::ToString(Atom::TR));
+                              AtomUtil::ToString(Atom::TR));
             return false;
           }
           // Ignore the token.
@@ -2598,18 +2578,16 @@ bool Parser::InSelectIM() {
         case Atom::SELECT: {
           if (PopUntil(Scope::SelectScope, Atom::SELECT)) {
             ResetInsertionMode();
-          } else {
-            // Ignore the token.
-            return true;
           }
-          break;
+          // Ignore the token.
+          return true;
         }
         case Atom::INPUT:
         case Atom::KEYGEN:
         case Atom::TEXTAREA: {
           if (ElementInScope(Scope::SelectScope, Atom::SELECT)) {
             ParseImpliedToken(TokenType::END_TAG_TOKEN, Atom::SELECT,
-                AtomUtil::ToString(Atom::SELECT));
+                              AtomUtil::ToString(Atom::SELECT));
             return false;
           }
           // In order to properly ignore <textarea>, we need to change the
@@ -2622,6 +2600,21 @@ bool Parser::InSelectIM() {
         case Atom::TEMPLATE: {
           return InHeadIM();
         }
+        case Atom::IFRAME:
+        case Atom::NOEMBED:
+        case Atom::NOFRAMES:
+        case Atom::NOSCRIPT:
+        case Atom::PLAINTEXT:
+        case Atom::STYLE:
+        case Atom::TITLE:
+        case Atom::XMP: {
+          // Don't let the tokenizer go into raw text mode when there are raw
+          // tags to be ignored. These tags should be ignored from the tokenizer
+          // properly.
+          tokenizer_->NextIsNotRawText();
+          // Ignore the token.
+          return true;
+        }
         default:
           break;
       }
@@ -2648,12 +2641,11 @@ bool Parser::InSelectIM() {
           break;
         }
         case Atom::SELECT: {
-          if (PopUntil(Scope::SelectScope, Atom::SELECT)) {
-            ResetInsertionMode();
-          } else {
+          if (!PopUntil(Scope::SelectScope, Atom::SELECT)) {
             // Ignore the token.
             return true;
           }
+          ResetInsertionMode();
           break;
         }
         case Atom::TEMPLATE: {
@@ -2665,7 +2657,7 @@ bool Parser::InSelectIM() {
       break;
     }
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
       node->data_ = token_.data;
@@ -2692,35 +2684,34 @@ bool Parser::InSelectInTableIM() {
     case TokenType::START_TAG_TOKEN:
     case TokenType::END_TAG_TOKEN: {
       switch (token_.atom) {
-       case Atom::CAPTION:
-       case Atom::TABLE:
-       case Atom::TBODY:
-       case Atom::TFOOT:
-       case Atom::THEAD:
-       case Atom::TR:
-       case Atom::TD:
-       case Atom::TH: {
-         if (token_.token_type == TokenType::END_TAG_TOKEN &&
-             !ElementInScope(Scope::TableScope, token_.atom)) {
-           // Ignore the token.
-           return true;
-         }
-         // This is like p.popUntil(selectScope, a.Select), but it also
-         // matches <math select>, not just <select>. Matching the MathML
-         // tag is arguably incorrect (conceptually), but it mimics what
-         // Chromium does.
-         for (int i = open_elements_stack_.size() - 1; i >= 0; --i) {
-           Node* node = open_elements_stack_.at(i);
-           if (node->atom_ == Atom::SELECT) {
-             open_elements_stack_.Pop(open_elements_stack_.size() - i);
-             break;
-           }
-         }
-         ResetInsertionMode();
-         return false;
-       }
-       default:
-         break;
+        case Atom::CAPTION:
+        case Atom::TABLE:
+        case Atom::TBODY:
+        case Atom::TFOOT:
+        case Atom::THEAD:
+        case Atom::TR:
+        case Atom::TD:
+        case Atom::TH: {
+          if (token_.token_type == TokenType::END_TAG_TOKEN &&
+              !ElementInScope(Scope::TableScope, token_.atom)) {
+            // Ignore the token.
+            return true;
+          }
+          // This is like p.popUntil(selectScope, a.Select), but it also
+          // matches <math select>, not just <select>. Matching the MathML
+          // tag is arguably incorrect (conceptually), but it mimics what
+          // Chromium does.
+          for (int i = open_elements_stack_.size() - 1; i >= 0; --i) {
+            if (open_elements_stack_.at(i)->atom_ == Atom::SELECT) {
+              open_elements_stack_.Pop(open_elements_stack_.size() - i);
+              break;
+            }
+          }
+          ResetInsertionMode();
+          return false;
+        }
+        default:
+          break;
       }
       break;
     }
@@ -2853,10 +2844,10 @@ bool Parser::AfterBodyIM() {
     case TokenType::COMMENT_TOKEN: {
       // The comment is attached to the <html> element.
       CHECK((open_elements_stack_.size() > 0 &&
-             open_elements_stack_.at(0)->atom_ == Atom::HTML),
-            "html: bad parser state: <html> element not found, in the "
-            "after-body insertion mode");
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+             open_elements_stack_.at(0)->atom_ == Atom::HTML))
+            << "html: bad parser state: <html> element not found, in the "
+               "after-body insertion mode";
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
       node->data_ = token_.data;
@@ -2875,7 +2866,7 @@ bool Parser::AfterBodyIM() {
 bool Parser::InFramesetIM() {
   switch (token_.token_type) {
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
       node->data_ = token_.data;
@@ -2883,8 +2874,8 @@ bool Parser::InFramesetIM() {
       break;
     }
     case TokenType::TEXT_TOKEN: {
-      std::string whitespace_chars = ExtractWhitespace(token_.data);
-      if (!whitespace_chars.empty()) AddText(whitespace_chars);
+      std::string whitespace_only = ExtractWhitespace(token_.data);
+      if (!whitespace_only.empty()) AddText(whitespace_only);
       break;
     }
     case TokenType::START_TAG_TOKEN:
@@ -2931,7 +2922,7 @@ bool Parser::InFramesetIM() {
 bool Parser::AfterFramesetIM() {
   switch (token_.token_type) {
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
       node->data_ = token_.data;
@@ -2939,8 +2930,8 @@ bool Parser::AfterFramesetIM() {
       break;
     }
     case TokenType::TEXT_TOKEN: {
-      std::string whitespace_chars = ExtractWhitespace(token_.data);
-      if (!whitespace_chars.empty()) AddText(whitespace_chars);
+      std::string whitespace_only = ExtractWhitespace(token_.data);
+      if (!whitespace_only.empty()) AddText(whitespace_only);
       break;
     }
     case TokenType::START_TAG_TOKEN:
@@ -2988,11 +2979,11 @@ bool Parser::AfterAfterBodyIM() {
       }
       break;
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
       node->data_ = token_.data;
-      document_->AppendChild(node);
+      document_->root_node_->AppendChild(node);
       return true;
     }
     case TokenType::DOCTYPE_TOKEN:
@@ -3009,17 +3000,17 @@ bool Parser::AfterAfterBodyIM() {
 bool Parser::AfterAfterFramesetIM() {
   switch (token_.token_type) {
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->position_in_html_src_ = token_.position_in_html_src;
       node->data_ = token_.data;
-      document_->AppendChild(node);
+      document_->root_node_->AppendChild(node);
       break;
     }
     case TokenType::TEXT_TOKEN: {
-      std::string whitespace_chars = ExtractWhitespace(token_.data);
-      if (!whitespace_chars.empty()) {
-        token_.data = whitespace_chars;
+      std::string whitespace_only = ExtractWhitespace(token_.data);
+      if (!whitespace_only.empty()) {
+        token_.data = whitespace_only;
         return InBodyIM();
       }
       break;
@@ -3042,59 +3033,65 @@ bool Parser::AfterAfterFramesetIM() {
   return true;
 }  // Parser::AfterAfterFramesetIM.
 
+Node* Parser::AdjustedCurrentNode() {
+  if (open_elements_stack_.size() == 1 && fragment_ && context_node_)
+    return context_node_;
+  return open_elements_stack_.Top();
+}
+
 // Section 12.2.6.5.
 bool Parser::ParseForeignContent() {
   switch (token_.token_type) {
-    case TokenType::TEXT_TOKEN:
+    case TokenType::TEXT_TOKEN: {
       if (frameset_ok_) {
-        frameset_ok_ =
-            (token_.data.find_first_not_of(Strings::kWhitespaceOrNull) ==
-             std::string::npos);
+        frameset_ok_ = (token_.data.find_first_not_of(
+                            Strings::kWhitespaceOrNull) == std::string::npos);
       }
       // Replaces null char with \ufffd replacement character.
-      Strings::ReplaceAny(&token_.data,
-                          Strings::kNullChar,
+      Strings::ReplaceAny(&token_.data, Strings::kNullChar,
                           Strings::kNullReplacementChar);
       AddText(token_.data);
       break;
+    }
     case TokenType::COMMENT_TOKEN: {
-      Node* node = Node::make_node(NodeType::COMMENT_NODE);
+      Node* node = document_->NewNode(NodeType::COMMENT_NODE);
       node->SetManufactured(token_.is_manufactured);
       node->data_ = token_.data;
       AddChild(node);
       break;
     }
     case TokenType::START_TAG_TOKEN: {
-      auto breaktout_tag = std::find(
-          std::begin(kBreakoutTags),
-          std::end(kBreakoutTags),
-          token_.atom);
-      bool is_breakout_tag = breaktout_tag != std::end(kBreakoutTags);
-
-      if (token_.atom == Atom::FONT) {
-        for (auto& attr : token_.attributes) {
-          std::string key = attr.key;
-          if (key == "color" || key == "face" || key == "size") {
-            is_breakout_tag = true;
-            break;
+      if (!fragment_) {
+        auto breaktout_tag = std::find(std::begin(kBreakoutTags),
+                                       std::end(kBreakoutTags), token_.atom);
+        bool is_breakout_tag = breaktout_tag != std::end(kBreakoutTags);
+
+        if (token_.atom == Atom::FONT) {
+          for (auto& attr : token_.attributes) {
+            std::string key = attr.key;
+            if (key == "color" || key == "face" || key == "size") {
+              is_breakout_tag = true;
+              break;
+            }
           }
         }
-      }
-      if (is_breakout_tag) {
-        for (int i = open_elements_stack_.size() - 1; i >= 0; --i) {
-          Node* node = open_elements_stack_.at(i);
-          if (node->name_space_.empty() ||
-              HtmlIntegrationPoint(*node) ||
-              MathMLTextIntegrationPoint(*node)) {
-            open_elements_stack_.Pop(open_elements_stack_.size() - i - 1);
-            break;
+        if (is_breakout_tag) {
+          for (int i = open_elements_stack_.size() - 1; i >= 0; --i) {
+            Node* node = open_elements_stack_.at(i);
+            if (node->name_space_.empty() || HtmlIntegrationPoint(*node) ||
+                MathMLTextIntegrationPoint(*node)) {
+              open_elements_stack_.Pop(open_elements_stack_.size() - i - 1);
+              break;
+            }
           }
+          return false;
         }
-        return false;
       }
-      if (top()->name_space_ == "math") {
+
+      Node* current = AdjustedCurrentNode();
+      if (current->name_space_ == "math") {
         AdjustMathMLAttributeNames(&token_.attributes);
-      } else if (top()->name_space_ == "svg") {
+      } else if (current->name_space_ == "svg") {
         for (auto [name, adjusted] : kSvgTagNameAdjustments) {
           if (name == token_.atom) {
             token_.atom = adjusted;
@@ -3107,7 +3104,7 @@ bool Parser::ParseForeignContent() {
       }
 
       AdjustForeignAttributes(&token_.attributes);
-      auto& ns = top()->name_space_;
+      auto& ns = current->name_space_;
       AddElement();
       top()->name_space_ = ns;
       if (!ns.empty()) {
@@ -3128,10 +3125,12 @@ bool Parser::ParseForeignContent() {
         }
 
         auto sn = open_elements_stack_.at(i);
-        auto node_data = sn->atom_ != Atom::UNKNOWN ?
-            AtomUtil::ToString(sn->atom_) : sn->data_;
-        auto token_data = token_.atom != Atom::UNKNOWN ?
-            AtomUtil::ToString(token_.atom) : token_.data;
+        auto node_data = sn->atom_ != Atom::UNKNOWN
+                             ? AtomUtil::ToString(sn->atom_)
+                             : sn->data_;
+        auto token_data = token_.atom != Atom::UNKNOWN
+                              ? AtomUtil::ToString(token_.atom)
+                              : token_.data;
 
         if (Strings::EqualFold(node_data, token_data)) {
           open_elements_stack_.Pop(open_elements_stack_.size() - i);
@@ -3150,14 +3149,13 @@ bool Parser::ParseForeignContent() {
 bool Parser::InForeignContent() {
   if (open_elements_stack_.size() == 0) return false;
 
-  Node* node = open_elements_stack_.Top();
+  Node* node = AdjustedCurrentNode();
   if (node->name_space_.empty()) return false;
   Atom token_atom = token_.atom;
   TokenType token_type = token_.token_type;
   if (MathMLTextIntegrationPoint(*node)) {
     if (token_type == TokenType::START_TAG_TOKEN &&
-        token_atom != Atom::MGLYPH &&
-        token_atom != Atom::MALIGNMARK) {
+        token_atom != Atom::MGLYPH && token_atom != Atom::MALIGNMARK) {
       return false;
     }
     if (token_type == TokenType::TEXT_TOKEN) {
@@ -3166,8 +3164,7 @@ bool Parser::InForeignContent() {
   }
 
   if (node->name_space_ == "math" && node->atom_ == Atom::ANNOTATION_XML &&
-      token_type == TokenType::START_TAG_TOKEN &&
-      token_atom == Atom::SVG) {
+      token_type == TokenType::START_TAG_TOKEN && token_atom == Atom::SVG) {
     return false;
   }
 
@@ -3184,25 +3181,30 @@ bool Parser::InForeignContent() {
   return true;
 }  // Parser::InForeignContent.
 
+// Section 12.2.6.2.
+void Parser::ParseGenericRawTextElement() {
+  AddElement();
+  original_insertion_mode_ = insertion_mode_;
+  insertion_mode_ = std::bind(&Parser::TextIM, this);
+}
+
 void Parser::ParseImpliedToken(TokenType token_type, Atom atom,
                                const std::string& data) {
   // Copy original token.
-  Token real_token = {
-    .token_type = token_.token_type,
-    .atom = token_.atom,
-    .data = token_.data,
-    .position_in_html_src = token_.position_in_html_src,
-    .attributes = token_.attributes};
+  Token real_token = {.token_type = token_.token_type,
+                      .atom = token_.atom,
+                      .data = token_.data,
+                      .position_in_html_src = token_.position_in_html_src,
+                      .attributes = token_.attributes};
   bool self_closing = has_self_closing_token_;
   // Create implied tokens.
-  token_ = {
-    .token_type = token_type,
-    .atom = atom,
-    .data = data,
-    // For reporting purposes implied tokens are assumed to be parsed at the
-    // current tag location.
-    .position_in_html_src = token_.position_in_html_src,
-    .attributes = {}};
+  token_ = {.token_type = token_type,
+            .atom = atom,
+            .data = data,
+            // For reporting purposes implied tokens are assumed to be parsed at
+            // the current tag location.
+            .position_in_html_src = token_.position_in_html_src,
+            .attributes = {}};
   has_self_closing_token_ = false;
 
   // Accounting for manufactured tags.
@@ -3224,12 +3226,11 @@ void Parser::ParseImpliedToken(TokenType token_type, Atom atom,
 
   ParseCurrentToken();
   // Restore original token.
-  token_ = {
-    .token_type = real_token.token_type,
-    .atom = real_token.atom,
-    .data = real_token.data,
-    .position_in_html_src = token_.position_in_html_src,
-    .attributes = real_token.attributes};
+  token_ = {.token_type = real_token.token_type,
+            .atom = real_token.atom,
+            .data = real_token.data,
+            .position_in_html_src = token_.position_in_html_src,
+            .attributes = real_token.attributes};
   has_self_closing_token_ = self_closing;
 }  // Parser::ParseImpliedToken.
 
@@ -3258,10 +3259,9 @@ void Parser::ParseCurrentToken() {
 void Parser::CopyAttributes(Node* node, Token token) const {
   if (token.attributes.empty()) return;
   std::set<std::string> attr_keys;
-  std::transform(node->attributes_.begin(),
-                 node->attributes_.end(),
-      std::inserter(attr_keys, attr_keys.begin()),
-      [](const Attribute& attr) -> std::string { return attr.key; });
+  std::transform(node->attributes_.begin(), node->attributes_.end(),
+                 std::inserter(attr_keys, attr_keys.begin()),
+                 [](const Attribute& attr) -> std::string { return attr.key; });
   for (const Attribute& attr : token.attributes) {
     if (attr_keys.find(attr.key) == attr_keys.end()) {
       node->attributes_.push_back(attr);
@@ -3275,14 +3275,15 @@ namespace {
 // <space><space>foo<space>bar<space> returns 4 spaces.
 std::string ExtractWhitespace(const std::string& s) {
   std::string only_whitespaces;
-  std::copy_if(s.begin(), s.end(),
+  std::copy_if(
+      s.begin(), s.end(),
       only_whitespaces.begin(),  // Unused, populated directly in predicate.
       [&only_whitespaces](char c) -> bool {
-      if (Strings::kWhitespace.find(c) != std::string::npos) {
-        only_whitespaces.push_back(c);
-      }
-      return false;
-  });
+        if (Strings::kWhitespace.find(c) != std::string::npos) {
+          only_whitespaces.push_back(c);
+        }
+        return false;
+      });
   return only_whitespaces;
 }
 
diff --git a/validator/htmlparser/parser.h b/validator/cpp/htmlparser/parser.h
similarity index 82%
rename from validator/htmlparser/parser.h
rename to validator/cpp/htmlparser/parser.h
index 9c9f418f129d7..bc9afbe1cdcbc 100644
--- a/validator/htmlparser/parser.h
+++ b/validator/cpp/htmlparser/parser.h
@@ -23,13 +23,14 @@
 #include <vector>
 
 #include "atom.h"
+#include "document.h"
 #include "node.h"
 #include "tokenizer.h"
 
 namespace htmlparser {
 
-using OnNodeCallback = std::function<void(Node* parsed_node,
-                                          Token original_token)>;
+using OnNodeCallback =
+    std::function<void(Node* parsed_node, Token original_token)>;
 
 struct ParseOptions {
  public:
@@ -54,16 +55,6 @@ struct ParseOptions {
   // Records attributes position in the html string.
   bool record_attribute_offsets = false;
 
-  // Allow deprecated tags.
-  // Following deprecated tags are parsed and added to the tree as if they are
-  // allowed. If false, the deprecated tags are processed as per html5
-  // algorithm.
-  //
-  // 1: <isindex> is deprecated and not supported by any browser.
-  // The HTML5 spec treatment is messy and chrome diverge from it.
-  // https://www.w3.org/TR/2011/WD-html5-20110113/Overview.html#isindex
-  bool allow_deprecated_tags = false;
-
   OnNodeCallback on_node_callback = nullptr;
 };
 
@@ -95,15 +86,12 @@ struct ParseAccounting {
   bool duplicate_html_elements = false;
   bool duplicate_body_elements = false;
   // Set only if above duplicate bits are true.
-  std::optional <LineCol> duplicate_html_element_location = std::nullopt;
-  std::optional <LineCol> duplicate_body_element_location = std::nullopt;
+  std::optional<LineCol> duplicate_html_element_location = std::nullopt;
+  std::optional<LineCol> duplicate_body_element_location = std::nullopt;
 
   // If true, parsed src is missing required <!doctype html> declaration or is
   // invalid syntax or is XHTML 4 or legacy doctype.
   bool quirks_mode = false;
-
-  // TODO: Implemnent this.
-  int total_nodes;
 };
 
 // Parse returns the parse tree for the HTML from the given html.
@@ -117,25 +105,23 @@ struct ParseAccounting {
 // dropped, with no corresponding node in the resulting tree.
 //
 // The html string is assumed to be UTF-8 encoded.
-[[nodiscard]] std::unique_ptr<Node> Parse(std::string_view html);
-[[nodiscard]] std::unique_ptr<Node> ParseWithOptions(
+[[nodiscard]] std::unique_ptr<Document> Parse(std::string_view html);
+[[nodiscard]] std::unique_ptr<Document> ParseWithOptions(
     std::string_view html, const ParseOptions& options);
 
-[[nodiscard]] std::vector<Node*> ParseFragment(
+[[nodiscard]] std::unique_ptr<Document> ParseFragment(
     std::string_view html, Node* fragment_parent = nullptr);
 
-[[nodiscard]] std::vector<Node*> ParseFragmentWithOptions(
-    const std::string_view html,
-    const ParseOptions& options,
+[[nodiscard]] std::unique_ptr<Document> ParseFragmentWithOptions(
+    const std::string_view html, const ParseOptions& options,
     Node* fragment_parent = nullptr);
 
 class Parser {
  public:
-  Parser(std::string_view html,
-         const ParseOptions& options = {},
+  Parser(std::string_view html, const ParseOptions& options = {},
          Node* fragment_parent = nullptr);
 
-  [[nodiscard]] std::unique_ptr<Node> Parse();
+  [[nodiscard]] std::unique_ptr<Document> Parse();
 
   ParseAccounting Accounting() const { return accounting_; }
 
@@ -147,17 +133,16 @@ class Parser {
   // rid of the above helper Parse methods, make constructor public to allow
   // clients to create and use Parser object.
 
-  friend std::unique_ptr<Node> Parse(std::string_view html);
+  friend std::unique_ptr<Document> Parse(std::string_view html);
 
-  friend std::unique_ptr<Node> ParseWithOptions(
+  friend std::unique_ptr<Document> ParseWithOptions(
       std::string_view html, const ParseOptions& options);
 
-  friend std::vector<Node*> ParseFragment(std::string_view html,
-                                            Node* fragment_parent);
+  friend std::unique_ptr<Document> ParseFragment(std::string_view html,
+                                                 Node* fragment_parent);
 
-  friend std::vector<Node*> ParseFragmentWithOptions(
-      const std::string_view html,
-      const ParseOptions& options,
+  friend std::unique_ptr<Document> ParseFragmentWithOptions(
+      const std::string_view html, const ParseOptions& options,
       Node* fragment_parent);
 
  private:
@@ -180,11 +165,14 @@ class Parser {
 
   // Parses a token as though it had appeared in the parser's input.
   void ParseImpliedToken(TokenType token_type, Atom atom,
-      const std::string& data);
+                         const std::string& data);
 
   // Runs the current token through the parsing routines until it is consumed.
   void ParseCurrentToken();
 
+  // Section 12.2.4.2.
+  Node* AdjustedCurrentNode();
+
   // Section 12.2.4.3.
   void ReconstructActiveFormattingElements();
   void AddFormattingElement();
@@ -192,6 +180,9 @@ class Parser {
   // Section 12.2.6.
   bool InForeignContent();
 
+  // Section 12.2.6.2.
+  void ParseGenericRawTextElement();
+
   // Section 12.2.6.5
   bool ParseForeignContent();
 
@@ -264,7 +255,7 @@ class Parser {
   // Section 12.2.4.1, "using the rules for".
   void SetOriginalIM();
 
-  // popUntil pops the stack of open elements at the highest element whose tag
+  // Pops the stack of open elements at the highest element whose tag
   // is in matchTags, provided there is no higher element in the scope's stop
   // tags (as defined in section 12.2.4.2). It returns whether or not there was
   // such an element. If there was not, popUntil leaves the stack unchanged.
@@ -281,17 +272,17 @@ class Parser {
   // higher element in the stack that was also in the stop tags). For example,
   // popUntil(tableScope, "table") returns true and leaves:
   // ["html", "body", "font"]
-  template<typename... Args>
+  template <typename... Args>
   bool PopUntil(Scope scope, Args... match_tags);
 
-  // indexOfElementInScope returns the index in p.oe of the highest element
+  // Returns the index in p.oe of the highest element
   // whose tag is in matchTags that is in scope. If no matching element is in
   // scope, it returns -1.
-  int IndexOfElementInScope(Scope scope, const std::vector<Atom>& match_tags)
-    const;
+  int IndexOfElementInScope(Scope scope,
+                            const std::vector<Atom>& match_tags) const;
 
   // Is like popUntil, except that it doesn't modify the stack of open elements.
-  template<typename... Args>
+  template <typename... Args>
   bool ElementInScope(Scope scope, Args... match_tags) const;
 
   // Pops elements off the stack of open elements until a scope-defined element
@@ -339,7 +330,7 @@ class Parser {
   bool has_self_closing_token_ = false;
 
   // Document root element.
-  std::unique_ptr<Node> document_;
+  std::unique_ptr<Document> document_;
 
   // Section 12.2.4.3 says "The markers are inserted when entering applet,
   // object, marquee, template, td, th, and caption elements, and are used
@@ -347,7 +338,7 @@ class Parser {
   // template, td, th, and caption elements".
   //
   // TODO: This is just a marker. Consider making it static and const.
-  std::unique_ptr<Node> scope_marker_;
+  Node* scope_marker_;
 
   // The stack of open elements (section 12.2.4.2) and active formatting
   // elements (section 12.2.4.3).
@@ -366,17 +357,12 @@ class Parser {
   bool record_node_offsets_ = false;
   bool record_attribute_offsets_ = false;
 
-  // If true, diverges from HTML5 algorithm and allows deprecated elements in
-  // the tree.
-  bool allow_deprecated_tags_ = false;
-
   // Whether the parser is parsing an HTML fragment.
   // If the fragment is the InnerHTML of a node, set that node in context_node_.
   // in parent_node.
   bool fragment_ = false;
   // The context element when parsing an HTML fragment (section 12.4).
-  Node* fragment_parent_node_;
-
+  Node* context_node_;
 
   // Whether new elements should be inserted according to
   // the foster parenting rules (section 12.2.6.1).
@@ -396,23 +382,21 @@ class Parser {
 
   // Stop tags for use in popUntil. These come from section 12.2.4.2.
   static constexpr std::pair<std::string_view, std::array<Atom, 9>>
-    kDefaultScopeStopTags[] {
-      {
-        "",  // Empty namespace.
-        {
-          Atom::APPLET, Atom::CAPTION, Atom::HTML, Atom::TABLE, Atom::TD,
-          Atom::TH, Atom::MARQUEE, Atom::OBJECT, Atom::TEMPLATE},
-      },
-      {
-        "math",
-        {Atom::ANNOTATION_XML, Atom::MI, Atom::MN, Atom::MO, Atom::MS,
-         Atom::MTEXT},
-      },
-      {
-        "svg",
-        {Atom::DESC, Atom::FOREIGN_OBJECT, Atom::TITLE},
-      }
-    };
+      kDefaultScopeStopTags[]{
+          {
+              "",  // Empty namespace.
+              {Atom::APPLET, Atom::CAPTION, Atom::HTML, Atom::TABLE, Atom::TD,
+               Atom::TH, Atom::MARQUEE, Atom::OBJECT, Atom::TEMPLATE},
+          },
+          {
+              "math",
+              {Atom::ANNOTATION_XML, Atom::MI, Atom::MN, Atom::MO, Atom::MS,
+               Atom::MTEXT},
+          },
+          {
+              "svg",
+              {Atom::DESC, Atom::FOREIGN_OBJECT, Atom::TITLE},
+          }};
 
   // Internal tracking.
   int num_html_tags_ = 0;
diff --git a/validator/htmlparser/parser_test.cc b/validator/cpp/htmlparser/parser_test.cc
similarity index 89%
rename from validator/htmlparser/parser_test.cc
rename to validator/cpp/htmlparser/parser_test.cc
index 0935ec7c4e11d..441e2e7384ec8 100644
--- a/validator/htmlparser/parser_test.cc
+++ b/validator/cpp/htmlparser/parser_test.cc
@@ -17,22 +17,28 @@
 #include "parser.h"
 
 #include "gtest/gtest.h"
+#include "absl/flags/declare.h"
+#include "absl/flags/flag.h"
 #include "atom.h"
 #include "atomutil.h"
 #include "node.h"
 #include "renderer.h"
 #include "token.h"
 
+ABSL_DECLARE_FLAG(uint32_t, htmlparser_max_nodes_depth_count);
+
 // For operator""s.
 using namespace std::string_literals;
 
 #define EXPECT_NOT_NULL(p) EXPECT_TRUE((p) != nullptr)
+#define EXPECT_NULL(p) EXPECT_FALSE((p) != nullptr)
 
 // Tests manufactured tags functions.
 TEST(ParserTest, ParseManufacturedTags) {
   htmlparser::Parser parser("<html><div>Hello</div></html>");
   auto doc = parser.Parse();
   EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   EXPECT_FALSE(parser.Accounting().has_manufactured_html);
   EXPECT_TRUE(parser.Accounting().has_manufactured_head);
   EXPECT_TRUE(parser.Accounting().has_manufactured_body);
@@ -40,6 +46,7 @@ TEST(ParserTest, ParseManufacturedTags) {
   htmlparser::Parser parser2("<html><head></head><div>Hello</div></html>");
   doc = parser2.Parse();
   EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   EXPECT_FALSE(parser2.Accounting().has_manufactured_html);
   EXPECT_FALSE(parser2.Accounting().has_manufactured_head);
   EXPECT_TRUE(parser2.Accounting().has_manufactured_body);
@@ -48,6 +55,7 @@ TEST(ParserTest, ParseManufacturedTags) {
                              "</body></html>");
   doc = parser3.Parse();
   EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   EXPECT_FALSE(parser3.Accounting().has_manufactured_html);
   EXPECT_FALSE(parser3.Accounting().has_manufactured_head);
   EXPECT_FALSE(parser3.Accounting().has_manufactured_body);
@@ -56,6 +64,7 @@ TEST(ParserTest, ParseManufacturedTags) {
   htmlparser::Parser parser4("<html><head><body><div>Hello</div>");
   doc = parser4.Parse();
   EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   EXPECT_FALSE(parser4.Accounting().has_manufactured_html);
   EXPECT_FALSE(parser4.Accounting().has_manufactured_head);
   EXPECT_FALSE(parser4.Accounting().has_manufactured_body);
@@ -63,23 +72,26 @@ TEST(ParserTest, ParseManufacturedTags) {
   htmlparser::Parser parser5("hello");
   doc = parser5.Parse();
   EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   EXPECT_TRUE(parser5.Accounting().has_manufactured_html);
   EXPECT_TRUE(parser5.Accounting().has_manufactured_head);
   EXPECT_TRUE(parser5.Accounting().has_manufactured_body);
-  EXPECT_NOT_NULL(doc);
-  EXPECT_EQ(doc->FirstChild()->DataAtom(),
+  EXPECT_NOT_NULL(doc->RootNode());
+  EXPECT_EQ(doc->RootNode()->FirstChild()->DataAtom(),
             htmlparser::Atom::HTML);
-  EXPECT_TRUE(doc->FirstChild()->IsManufactured());
+  EXPECT_TRUE(doc->RootNode()->FirstChild()->IsManufactured());
 
   htmlparser::Parser parser6("");
   doc = parser6.Parse();
+  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   EXPECT_TRUE(parser6.Accounting().has_manufactured_html);
   EXPECT_TRUE(parser6.Accounting().has_manufactured_head);
   EXPECT_TRUE(parser6.Accounting().has_manufactured_body);
-  EXPECT_NOT_NULL(doc);
-  EXPECT_EQ(doc->FirstChild()->DataAtom(),
+  EXPECT_NOT_NULL(doc->RootNode());
+  EXPECT_EQ(doc->RootNode()->FirstChild()->DataAtom(),
             htmlparser::Atom::HTML);
-  EXPECT_TRUE(doc->FirstChild()->IsManufactured());
+  EXPECT_TRUE(doc->RootNode()->FirstChild()->IsManufactured());
 }
 
 // Various line column recording tests.
@@ -135,7 +147,7 @@ TEST(ParserTest, LineColTest) {
        }
       });
   auto doc = parser.Parse();
-  EXPECT_NOT_NULL(doc.get());
+  EXPECT_NOT_NULL(doc->RootNode());
   EXPECT_EQ(num_callbacks, 6 /* html, head, body, div, img, a */);
 
   num_callbacks = 0;
@@ -316,10 +328,11 @@ TEST(ParserTest, SubsequentyBodyTagAttributesCopied) {
   std::string html = ("<html>\n<body id=\"bdy\">\n<div>hello</div></body>"s
                       "<body class=\"bd-cls\"><div>world</div></body></html>");
   htmlparser::Parser parser(html);
-  auto root = parser.Parse();
-  EXPECT_NOT_NULL(root);
+  auto doc = parser.Parse();
+  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   std::stringbuf buf;
-  htmlparser::Renderer::Render(root.get(), &buf);
+  htmlparser::Renderer::Render(doc->RootNode(), &buf);
   EXPECT_EQ(buf.str(),
             "<html><head></head><body id=\"bdy\" class=\"bd-cls\">\n"
             "<div>hello</div><div>world</div></body></html>");
@@ -331,10 +344,11 @@ TEST(ParserTest, WhitespaceTest) {
                       "<div>hello</div>                        </body>"s
                       "<body class=\"bd-cls\"><div>world</div></body></html>");
   htmlparser::Parser parser(html);
-  auto root = parser.Parse();
-  EXPECT_NOT_NULL(root);
+  auto doc = parser.Parse();
+  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   std::stringbuf buf;
-  htmlparser::Renderer::Render(root.get(), &buf);
+  htmlparser::Renderer::Render(doc->RootNode(), &buf);
   EXPECT_EQ(buf.str(),
             "<html><head></head><body id=\"bdy\" class=\"bd-cls\">\n"
             "                    <div>hello</div>                        "
@@ -349,10 +363,11 @@ TEST(ParserTest, NonAsciiWhitespaceNotTransformed) {
                       "white&#160;space.txt\">Whitespace in the link</a>"
                       "\xc2\xa0 \xc2\xa0 \xc2\xa0");
   htmlparser::Parser parser(html);
-  auto root = parser.Parse();
-  EXPECT_NOT_NULL(root);
+  auto doc = parser.Parse();
+  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   std::stringbuf buf;
-  htmlparser::Renderer::Render(root.get(), &buf);
+  htmlparser::Renderer::Render(doc->RootNode(), &buf);
   EXPECT_EQ(buf.str(),
             "<!DOCTYPE html><html><head><meta charset=\"utf-8\">"
             "</head><body><a href=\"https://s3.amazonaws.com/amaltas.backup"
@@ -370,10 +385,11 @@ TEST(ParserTest, OnlyAsciiWhitespaceInHTMLTags) {
                       "https://s3.amazonaws.com/amaltas.backup/"
                       "white&#160;space.txt\">Whitespace in the link</a>");
   htmlparser::Parser parser(html);
-  auto root = parser.Parse();
-  EXPECT_NOT_NULL(root);
+  auto doc = parser.Parse();
+  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   std::stringbuf buf;
-  htmlparser::Renderer::Render(root.get(), &buf);
+  htmlparser::Renderer::Render(doc->RootNode(), &buf);
   // HTML parser did the right thing. Stuffed everything in <body> as if
   // <a<space>href is a text.
   EXPECT_EQ(buf.str(),
@@ -397,7 +413,7 @@ TEST(ParserTest, ParserAccounting) {
 
   htmlparser::Parser p1(all_good);
   auto doc = p1.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   htmlparser::ParseAccounting act = p1.Accounting();
   EXPECT_FALSE(act.has_manufactured_html);
   EXPECT_FALSE(act.has_manufactured_head);
@@ -417,7 +433,7 @@ TEST(ParserTest, ParserAccounting) {
 
   htmlparser::Parser p2(implied_html);
   doc = p2.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   act = p2.Accounting();
   EXPECT_TRUE(act.has_manufactured_html);
   EXPECT_FALSE(act.has_manufactured_head);
@@ -437,7 +453,7 @@ TEST(ParserTest, ParserAccounting) {
 
   htmlparser::Parser p3(implied_body);
   doc = p3.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   act = p3.Accounting();
   EXPECT_FALSE(act.has_manufactured_html);
   EXPECT_FALSE(act.has_manufactured_head);
@@ -457,7 +473,7 @@ TEST(ParserTest, ParserAccounting) {
 
   htmlparser::Parser p4(implied_head);
   doc = p4.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   act = p4.Accounting();
   EXPECT_FALSE(act.has_manufactured_html);
   EXPECT_TRUE(act.has_manufactured_head);
@@ -481,7 +497,7 @@ TEST(ParserTest, ParserAccounting) {
 
   htmlparser::Parser p5(second_html);
   doc = p5.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   act = p5.Accounting();
   EXPECT_FALSE(act.has_manufactured_html);
   EXPECT_FALSE(act.has_manufactured_head);
@@ -506,7 +522,7 @@ TEST(ParserTest, ParserAccounting) {
 
   htmlparser::Parser p6(second_body);
   doc = p6.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   act = p6.Accounting();
   EXPECT_FALSE(act.has_manufactured_html);
   EXPECT_FALSE(act.has_manufactured_head);
@@ -531,7 +547,7 @@ TEST(ParserTest, ParserAccounting) {
 
   htmlparser::Parser p6a(second_body_implicit);
   doc = p6a.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   act = p6a.Accounting();
   EXPECT_FALSE(act.has_manufactured_html);
   EXPECT_FALSE(act.has_manufactured_head);
@@ -555,7 +571,7 @@ TEST(ParserTest, ParserAccounting) {
 
   htmlparser::Parser p6b(second_body_after_manufactured);
   doc = p6b.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   act = p6b.Accounting();
   EXPECT_FALSE(act.has_manufactured_html);
   EXPECT_FALSE(act.has_manufactured_head);
@@ -579,7 +595,7 @@ TEST(ParserTest, ParserAccounting) {
 
   htmlparser::Parser p6c(second_body_after_body_close);
   doc = p6c.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   act = p6c.Accounting();
   EXPECT_FALSE(act.has_manufactured_html);
   EXPECT_FALSE(act.has_manufactured_head);
@@ -605,9 +621,9 @@ TEST(ParserTest, ParserAccounting) {
 
   htmlparser::Parser p7(template_html);
   doc = p7.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   std::stringbuf output_buf;
-  htmlparser::Renderer::Render(doc.get(), &output_buf);
+  htmlparser::Renderer::Render(doc->RootNode(), &output_buf);
   EXPECT_EQ(output_buf.str(), R"HTML(<html><head>
 <title>foo</title>
 </head>
@@ -642,9 +658,9 @@ TEST(ParserTest, WhitespaceBeforeHeadIgnoredAfterBodyAppendedToBody) {
 
   htmlparser::Parser p(html, {.record_node_offsets = true});
   auto doc = p.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   std::stringbuf output_buf;
-  htmlparser::Renderer::Render(doc.get(), &output_buf);
+  htmlparser::Renderer::Render(doc->RootNode(), &output_buf);
   EXPECT_EQ(output_buf.str(), R"HTML(<!DOCTYPE html><html><head>
 <title>foo</title>
 </head>
@@ -678,9 +694,9 @@ TEST(ParserTest, WhitespaceBeforeHeadIgnoredAfterBodyAppendedToBody) {
 
   htmlparser::Parser p2(html, {.record_node_offsets = true});
   doc = p2.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   std::stringbuf output_buf2;
-  htmlparser::Renderer::Render(doc.get(), &output_buf2);
+  htmlparser::Renderer::Render(doc->RootNode(), &output_buf2);
   EXPECT_EQ(output_buf2.str(), R"HTML(<!-- comment 1 --><!-- comment 2 --><!DOCTYPE html><html><head>
 <title>foo</title>
 </head>
@@ -704,9 +720,9 @@ TEST(ParserTest, ImageVsImg) {
 
   htmlparser::Parser p(html);
   auto doc = p.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   std::stringbuf buf;
-  htmlparser::Renderer::Render(doc.get(), &buf);
+  htmlparser::Renderer::Render(doc->RootNode(), &buf);
   EXPECT_EQ(buf.str(), R"HTML(<html><head></head><body>
   <img src="foo1.png">
   <img src="foo2.png">
@@ -722,9 +738,30 @@ TEST(ParserTest, VoidElementsParsedCorrectly) {
 
   htmlparser::Parser p(html);
   auto doc = p.Parse();
-  EXPECT_NOT_NULL(doc);
+  EXPECT_NOT_NULL(doc->RootNode());
   std::stringbuf buf;
-  htmlparser::Renderer::Render(doc.get(), &buf);
+  htmlparser::Renderer::Render(doc->RootNode(), &buf);
   EXPECT_EQ(buf.str(), R"HTML(<html><head></head><body>
   <img src="foo.png"></body></html>)HTML");
 }
+
+TEST(ParserTest, DocumentComplexityTest) {
+  ::absl::SetFlag(&FLAGS_htmlparser_max_nodes_depth_count, 4);
+
+  // Document parsing failed, body contains 4 deeply nested nodes..
+  htmlparser::Parser p(
+      "<html><body><a><b><c><m></m></c></b></a></body></html>");
+  EXPECT_NULL(p.Parse());
+
+  // Document parsed, open elements stack less than 4.
+  htmlparser::Parser p2("<html><body><a><b>foo</b></a></body></html>");
+  EXPECT_NOT_NULL(p2.Parse());
+
+  // Child nodes closing reduces the stack size. So maximum open nodes in the
+  // following document is 4.
+  htmlparser::Parser p3("<html><body><a>"
+                        "<b>foo</b><b>foo</b><b>foo</b><b>foo</b><b>foo</b>"
+                        "<b>foo</b><b>foo</b><b>foo</b><b>foo</b><b>foo</b>"
+                        "</a></body></html>");
+  EXPECT_NOT_NULL(p3.Parse());
+}
diff --git a/validator/htmlparser/renderer.cc b/validator/cpp/htmlparser/renderer.cc
similarity index 99%
rename from validator/htmlparser/renderer.cc
rename to validator/cpp/htmlparser/renderer.cc
index 0fc0e1a9b0b17..e0e138bbeb079 100644
--- a/validator/htmlparser/renderer.cc
+++ b/validator/cpp/htmlparser/renderer.cc
@@ -35,7 +35,7 @@ inline void WriteToBuffer(const std::string& str, std::stringbuf* buf) {
 // In valid HTML, they can't contains both types of quotes.
 inline void WriteQuoted(const std::string& str, std::stringbuf* buf) {
   char quote = '"';
-  if (str.find("\"") != std::string::npos) {
+  if (str.find('\"') != std::string::npos) {
     quote = '\'';
   }
 
diff --git a/validator/htmlparser/renderer.h b/validator/cpp/htmlparser/renderer.h
similarity index 100%
rename from validator/htmlparser/renderer.h
rename to validator/cpp/htmlparser/renderer.h
diff --git a/validator/htmlparser/renderer_test.cc b/validator/cpp/htmlparser/renderer_test.cc
similarity index 98%
rename from validator/htmlparser/renderer_test.cc
rename to validator/cpp/htmlparser/renderer_test.cc
index d219418f9124d..c7e2d37a66fb7 100644
--- a/validator/htmlparser/renderer_test.cc
+++ b/validator/cpp/htmlparser/renderer_test.cc
@@ -29,7 +29,7 @@ void CheckParseRenderOutput(std::string_view input,
                             std::string_view expected_output) {
   auto doc = htmlparser::Parse(input);
   std::stringbuf buf;
-  auto err = htmlparser::Renderer::Render(doc.get(), &buf);
+  auto err = htmlparser::Renderer::Render(doc->RootNode(), &buf);
   EXPECT_EQ(err, htmlparser::RenderError::NO_ERROR);
   EXPECT_EQ(buf.str(), expected_output.data());
 }
@@ -162,8 +162,7 @@ TEST(RendererTest, NullCharsTest) {
           "<postfield><missing_glyph><missing_glyph><missing_glyph>"
           "<missing_glyph><hkern></hkern></missing_glyph></missing_glyph>"
           "</missing_glyph></missing_glyph></postfield></postfield></postfield>"
-          "</postfield></dcell></em></b><aside><em><b></b></em></aside></body>"
-          "</html>",
+          "</postfield></dcell></em></b><aside><b></b></aside></body></html>",
       "<html><head></head><body><svg><template><desc><t><svg></svg></t></desc>"
           "</template></svg></body></html>",
       "<html><head></head><body>A<table><tbody><tr><td></td></tr></tbody>"
diff --git a/validator/htmlparser/strings.cc b/validator/cpp/htmlparser/strings.cc
similarity index 80%
rename from validator/htmlparser/strings.cc
rename to validator/cpp/htmlparser/strings.cc
index 580f718bc223b..e0735b245e16d 100644
--- a/validator/htmlparser/strings.cc
+++ b/validator/cpp/htmlparser/strings.cc
@@ -21,11 +21,9 @@
 #include <functional>
 #include <sstream>
 #include <tuple>
-
-#include "logging.h"
+#include "glog/logging.h"
 #include "casetable.h"
 #include "entity.h"
-#include "error.h"
 #include "whitespacetable.h"
 
 namespace htmlparser {
@@ -83,11 +81,9 @@ std::pair<int, int> UnescapeEntity(std::string* b, int dst, int src,
 // the case conversion table.
 void CaseTransformInternal(bool to_upper, std::string* s);
 
-// For multi-sequence utf-8 codepoints, reads the next valid byte.
-uint8_t ReadContinuationByte(uint8_t byte);
-
-// Checks the codepoints are in range of allowed utf-8 ranges.
-void CheckScalarValue(char32_t code_point);
+// For multi-sequence utf-8 codepoints, reads the next valid byte as out
+// parameter. Returns false if next byte in the sequence is not a valid byte.
+bool ReadContinuationByte(uint8_t byte, uint8_t* out);
 
 // Checks if the character is ASCII that is in range 1-127.
 inline bool IsOneByteASCIIChar(uint8_t c);
@@ -97,8 +93,87 @@ inline bool IsOneByteASCIIChar(uint8_t c);
 // Returns false in case of error.
 bool ExtractChars(std::string_view str, std::vector<char32_t>* chars);
 
+// Converts 0xFF to 255, 0x8d to 141 etc. Better and exception safe than
+// std::stoi and others.
+bool OneByteHexCodeToInt(std::string_view hex_code, uint8_t* out);
+
 }  // namespace.
 
+std::optional<std::string> Strings::DecodePercentEncodedURL(
+    std::string_view uri) {
+  if (uri.empty()) return "";
+
+  std::stringbuf uri_decoded;
+  while (!uri.empty()) {
+    if (uri.front() != '%') {
+      uri_decoded.sputc(uri.front());
+      uri.remove_prefix(1);
+      continue;
+    }
+
+    uint8_t x1 = 0;
+    if (uri.size() < 3 ||
+        !OneByteHexCodeToInt(uri.substr(1, 2), &x1)) {
+      return std::nullopt;
+    }
+
+    // Consumed the first three percent encoded chars. eg. %a8.
+    uri.remove_prefix(3);
+
+    // Sequence byte without initial byte.
+    if ((x1 & 0xc0) == 0x80) return std::nullopt;
+
+    auto num_bytes = Strings::CodePointByteSequenceCount(x1);
+    uri_decoded.sputc(x1);
+    if (num_bytes == 1) {
+      // Single byte char must be signed char.
+      if (x1 > 127) return std::nullopt;
+      continue;
+    }
+
+    // 2 bytes sequence.
+    if (num_bytes > 1) {
+      uint8_t x2 = 0;
+      if (uri.size() < 3 ||
+          uri.front() != '%' ||
+          !OneByteHexCodeToInt(uri.substr(1, 2), &x2) ||
+          (x2 & 0xc0) != 0x80) {
+        return std::nullopt;
+      }
+      uri.remove_prefix(3);
+      uri_decoded.sputc(x2);
+    }
+
+    // 3 byte sequence.
+    if (num_bytes > 2) {
+      uint8_t x3 = 0;
+      if (uri.size() < 3 ||
+          uri.front() != '%' ||
+          !OneByteHexCodeToInt(uri.substr(1, 2), &x3) ||
+          (x3 & 0xc0) != 0x80) {
+        return std::nullopt;
+      }
+      uri.remove_prefix(3);
+      uri_decoded.sputc(x3);
+    }
+
+    // 4 byte sequence.
+    if (num_bytes > 3) {
+      uint8_t x4 = 0;
+      if (uri.size() < 3 ||
+          uri.front() != '%' ||
+          !OneByteHexCodeToInt(uri.substr(1, 2), &x4) ||
+          (x4 & 0xc0) != 0x80) {
+        return std::nullopt;
+      }
+      uri.remove_prefix(3);
+      uri_decoded.sputc(x4);
+    }
+  }
+
+  return uri_decoded.str();
+}
+
 bool Strings::IsCharAlphabet(char c) {
   return ('a' <= c && c <= 'z') || ('A' <= c && c <= 'Z');
 }
@@ -196,8 +271,11 @@ std::optional<char32_t> Strings::DecodeUtf8Symbol(std::string_view* s) {
   if ((c & 0xe0) == 0xc0) {
     if (s->size() < 2) return std::nullopt;
     s->remove_prefix(1);
-    auto c2 = ReadContinuationByte(*(s->data()));
+    uint8_t c2;
+    bool c2_ok = ReadContinuationByte(*(s->data()), &c2);
     s->remove_prefix(1);
+    // Invalid byte in the sequence.
+    if (!c2_ok) return L'\uFFFD';
     char32_t code_point = ((c & 0x1f) << 6) | c2;
     if (code_point < 0x80) {
       return std::nullopt;
@@ -209,15 +287,23 @@ std::optional<char32_t> Strings::DecodeUtf8Symbol(std::string_view* s) {
   if ((c &  0xf0) == 0xe0) {
     if (s->size() < 3) return std::nullopt;
     s->remove_prefix(1);
-    auto c2 = ReadContinuationByte(*(s->data()));
+    uint8_t c2;
+    bool c2_ok = ReadContinuationByte(*(s->data()), &c2);
     s->remove_prefix(1);
-    auto c3 = ReadContinuationByte(*(s->data()));
+    uint8_t c3;
+    bool c3_ok = ReadContinuationByte(*(s->data()), &c3);
     s->remove_prefix(1);
+    // Invalid bytes in the sequence.
+    if (!(c2_ok && c3_ok)) return L'\uFFFD';
     char32_t code_point = ((c & 0x0f) << 12) | (c2 << 6) | c3;
     if (code_point < 0x0800) {
       return std::nullopt;
     }
-    CheckScalarValue(code_point);
+    // Check if this is codepoint is low surrgates.
+    if (code_point >= 0xd800 && code_point <= 0xdfff) {
+      return std::nullopt;
+    }
+
     return code_point;
   }
 
@@ -225,12 +311,17 @@ std::optional<char32_t> Strings::DecodeUtf8Symbol(std::string_view* s) {
   if ((c & 0xf8) == 0xf0) {
     if (s->size() < 4) return std::nullopt;
     s->remove_prefix(1);
-    auto c2 = ReadContinuationByte(*(s->data()) & 0xff);
+    uint8_t c2;
+    bool c2_ok = ReadContinuationByte(*(s->data()), &c2);
     s->remove_prefix(1);
-    auto c3 = ReadContinuationByte(*(s->data()) & 0xff);
+    uint8_t c3;
+    bool c3_ok = ReadContinuationByte(*(s->data()), &c3);
     s->remove_prefix(1);
-    auto c4 = ReadContinuationByte(*(s->data()) & 0xff);
+    uint8_t c4;
+    bool c4_ok = ReadContinuationByte(*(s->data()), &c4);
     s->remove_prefix(1);
+    // Invalid bytes in the sequence.
+    if (!(c2_ok && c3_ok && c4_ok)) return L'\uFFFD';
     char32_t code_point =  ((c & 0x07) << 0x12) |
                            (c2 << 0x0c) |
                            (c3 << 0x06) | c4;
@@ -355,6 +446,41 @@ void Strings::Trim(std::string* s, std::string_view chars_to_trim) {
   TrimRight(s, chars_to_trim);
 }
 
+void Strings::TrimLeft(std::string_view* s, std::string_view chars_to_trim) {
+  if (auto count = s->find_first_not_of(chars_to_trim);
+      count != std::string_view::npos) {
+    s->remove_prefix(count);
+  } else {
+    // All whitespace.
+    s->remove_prefix(s->size());
+  }
+}
+
+void Strings::TrimRight(std::string_view* s, std::string_view chars_to_trim) {
+  if (auto count = s->find_last_not_of(chars_to_trim);
+      count != std::string_view::npos) {
+    s->remove_suffix(s->size() - count - 1);
+  } else {
+    // All whitespace.
+    s->remove_suffix(s->size());
+  }
+}
+
+void Strings::Trim(std::string_view* s, std::string_view chars_to_trim) {
+  TrimLeft(s, chars_to_trim);
+  TrimRight(s, chars_to_trim);
+}
+
+bool Strings::StripTrailingNewline(std::string* s) {
+  if (!s->empty() && (*s)[s->size() - 1] == '\n') {
+    if (s->size() > 1 && (*s)[s->size() - 2] == '\r')
+      s->resize(s->size() - 2);
+    else
+      s->resize(s->size() - 1);
+    return true;
+  }
+  return false;
+}
 
 void Strings::RemoveExtraSpaceChars(std::string* s) {
   int put_index = 0;
@@ -715,10 +841,21 @@ std::pair<int, int> UnescapeEntity(std::string* b, int dst, int src,
       s.size() > i && s.at(i) == '=') {
     // No-op.
   } else if (!encoded_bytes.empty()) {
+    int overflow = encoded_bytes.size() - entityName.size() - 1 /* & */;
+    if (overflow > 0) {
+      // Insert some dummy chars which will get occupied by overflow entity
+      // chars.
+      // Suppose &xy; = \x1\x2\x3\x4\x5 (5 bytes char)
+      // abc&xy;def (10 bytes) after this statement is:
+      // abc&xy; def (11 bytes).
+      // After unescape: abc\x1\x2\x3\x4\x5def (11 bytes).
+      b->insert(src + encoded_bytes.size() - 1, " ", overflow);
+    }
     // Copies the unescaped bytes to the destination,
     std::transform(encoded_bytes.begin(), encoded_bytes.end(), b->begin() + dst,
         [](uint8_t c) -> char { return static_cast<char>(c); });
-    return std::pair<int, int>(dst + encoded_bytes.size(), src + i);
+    return std::pair<int, int>(
+        dst + encoded_bytes.size() - (overflow > 0 ? overflow : 0), src + i);
   } else if (!attribute) {
     int max_length = entityName.size() - 1;
     if (max_length > kLongestEntityWithoutSemiColon) {
@@ -774,19 +911,16 @@ void CaseTransformInternal(bool to_upper, std::string* s) {
   }
 }
 
-uint8_t ReadContinuationByte(uint8_t byte) {
+bool ReadContinuationByte(uint8_t byte, uint8_t* out) {
+  // Checks it is valid continuation byte. 0b10xxxxxx.
   if ((byte & 0xc0) == 0x80) {
-    return byte & 0x3f;
+    // Mask last six bits 0b00xxxxxx.
+    *out = byte & 0x3f;
+    return true;
   }
 
-  throw std::runtime_error("Invalid continuation byte.");
-  return 0;
-}
-
-void CheckScalarValue(char32_t code_point) {
-  CHECK((!(code_point >= 0xd800 && code_point <= 0xdfff)),
-        "Lone surrogaate U+" + Strings::ToHexString(code_point) +
-        " is not a valid scalar value.");
+  // Invalid continuation byte.
+  return false;
 }
 
 inline bool IsOneByteASCIIChar(uint8_t c) {
@@ -822,6 +956,28 @@ bool ExtractChars(std::string_view str, std::vector<char32_t>* chars) {
   return true;
 }
 
+bool OneByteHexCodeToInt(std::string_view hex_code, uint8_t* out) {
+  // Will overflow.
+  if (hex_code.size() > 2) return false;
+  uint8_t x = 0;
+  while (!hex_code.empty()) {
+    auto h = hex_code.at(0);
+    hex_code.remove_prefix(1);
+    if (Strings::IsDigit(h)) {
+      x = (16 * x) | (h - '0');
+    } else if ('a' <= h && h <= 'f') {
+      x = 16 * x + h - 'a' + 10;
+    } else if ('A' <= h && h <= 'F') {
+      x = 16 * x + h - 'A' + 10;
+    } else {
+      // Invalid hex code eg. %2x or %m8
+      return false;
+    }
+  }
+  *out = x;
+  return true;
+}
+
 }  // namespace
 
 }  // namespace htmlparser
diff --git a/validator/htmlparser/strings.h b/validator/cpp/htmlparser/strings.h
similarity index 95%
rename from validator/htmlparser/strings.h
rename to validator/cpp/htmlparser/strings.h
index 7d34084e2b9cb..a17720a0ffd9b 100644
--- a/validator/htmlparser/strings.h
+++ b/validator/cpp/htmlparser/strings.h
@@ -66,6 +66,11 @@ class Strings {
   inline static const std::string kNullReplacementChar {
     '\xef', '\xbf', '\xbd'};  // encoded \ufffd (3 bytes).
 
+  // Decodes a percent encoded string like "google.com%20%2F%20%3Fx%3Db" to
+  // "google.com / ?x=b".
+  static std::optional<std::string> DecodePercentEncodedURL(
+    std::string_view uri);
+
   // Returns hex string representation of a 4 byte codepoint.
   static std::string ToHexString(char32_t c);
 
@@ -265,6 +270,14 @@ class Strings {
       std::string_view chars_to_trim = kWhitespace);
   static void Trim(std::string* s,
       std::string_view chars_to_trim = kWhitespace);
+  static void TrimLeft(std::string_view* s,
+      std::string_view chars_to_trim = kWhitespace);
+  static void TrimRight(std::string_view* s,
+      std::string_view chars_to_trim = kWhitespace);
+  static void Trim(std::string_view* s,
+      std::string_view chars_to_trim = kWhitespace);
+
+  static bool StripTrailingNewline(std::string* s);
 
   // Reduces all consecutive sequences of space characters to a single space
   // character.
diff --git a/validator/cpp/htmlparser/strings_test.cc b/validator/cpp/htmlparser/strings_test.cc
new file mode 100644
index 0000000000000..d09c2ece8a9cd
--- /dev/null
+++ b/validator/cpp/htmlparser/strings_test.cc
@@ -0,0 +1,673 @@
+//
+// 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.
+//
+
+#include "strings.h"
+
+#include <string>
+
+#include "gtest/gtest.h"
+
+using namespace std::string_literals;
+
+TEST(StringsTest, SplitStringAtTest) {
+  auto columns = htmlparser::Strings::SplitStringAt("a|b|c", '|');
+  EXPECT_EQ(columns.size(), 3);
+  EXPECT_EQ(columns.at(0), "a");
+  EXPECT_EQ(columns.at(1), "b");
+  EXPECT_EQ(columns.at(2), "c");
+
+  columns = htmlparser::Strings::SplitStringAt("a", '|');
+  EXPECT_EQ(columns.size(), 1);
+  EXPECT_EQ(columns.at(0), "a");
+}
+
+TEST(StringsTest, IsUtf8WhiteSpaceCharTest) {
+  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar("abcd"));
+  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar("foo bar"));
+  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar("f bar"));
+  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar(" abcd"));
+  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar("\nabcd"));
+  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar("\tabcd"));
+  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar("\rabcd"));
+  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\x20', 'a'})));
+  EXPECT_EQ(2, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xc2', '\x85', 'a', 'b', 'c'})));
+  EXPECT_EQ(2, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xc2', '\xa0', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe1', '\x9a', '\x80', 'a', 'b', 'c'})));
+
+  // 0x2000 to 0x200a
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\x80', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\x81', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\x82', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\x83', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\x84', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\x85', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\x86', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\x87', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\x88', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\x89', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\x8a', 'a', 'b', 'c'})));
+
+  // 0x2028
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\xa8', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar("\u2028abc"));
+
+  // 0x2029
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\xa9', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar( "\u2029abc"));
+
+  // 0x202f
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe2', '\x80', '\xaf', 'a', 'b', 'c'})));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar( "\u202Fabc"));
+
+  // 0x205f
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string{'\xe2', '\x81', '\x9f', 'a', 'b', 'c'}));
+
+  // 0x3000
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string{'\xe3', '\x80', '\x80', 'a', 'b', 'c'}));
+
+  // Invalid second byte.
+  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xc2', '\x86', 'a', 'b', 'c'})));
+  // Invalid first byte.
+  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xc3', '\x85', 'a', 'b', 'c'})));
+
+  // Invalid second byte.
+  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'\xe1', '\x9b', '\x80', 'a', 'b', 'c'})));
+
+  // Invalid third byte.
+  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string{'\xe3', '\x80', '\x9c', 'a', 'b', 'c'}));
+
+  // A few position argument cases.
+  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar("foo bar", 3));
+  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar("f bar", 1));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
+      std::string({'a', 'b', 'c', '\xe2', '\x80', '\x80', 'a', 'b', 'c'}, 3)));
+  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar("foo\u202Fbar", 3));
+}
+
+TEST(StringsTest, SplitStrAtUtf8WhitespaceTest) {
+  std::string_view s = "hello world foo bar";
+  auto columns = htmlparser::Strings::SplitStrAtUtf8Whitespace(s);
+  EXPECT_EQ(4, columns.size());
+  EXPECT_EQ("hello", columns[0]);
+  EXPECT_EQ("world", columns[1]);
+  EXPECT_EQ("foo", columns[2]);
+  EXPECT_EQ("bar", columns[3]);
+
+  s = "foo\u202Fbar";
+  columns = htmlparser::Strings::SplitStrAtUtf8Whitespace(s);
+  EXPECT_EQ(2, columns.size());
+  EXPECT_EQ("foo", columns[0]);
+  EXPECT_EQ("bar", columns[1]);
+
+  s = "foo\xe2\x80\x8a       bar";
+  columns = htmlparser::Strings::SplitStrAtUtf8Whitespace(s);
+  EXPECT_EQ(2, columns.size());
+  EXPECT_EQ("foo", columns[0]);
+  EXPECT_EQ("bar", columns[1]);
+
+  s = "foo\n      \n     \n  \u202Fbar";
+  columns = htmlparser::Strings::SplitStrAtUtf8Whitespace(s);
+  EXPECT_EQ(2, columns.size());
+  EXPECT_EQ("foo", columns[0]);
+  EXPECT_EQ("bar", columns[1]);
+
+  s = "foo\n      \n     \n  \u202Fbar \xe2\x80\x81hello\nworld";
+  columns = htmlparser::Strings::SplitStrAtUtf8Whitespace(s);
+  EXPECT_EQ(4, columns.size());
+  EXPECT_EQ("foo", columns[0]);
+  EXPECT_EQ("bar", columns[1]);
+  EXPECT_EQ("hello", columns[2]);
+  EXPECT_EQ("world", columns[3]);
+
+  s = "helloworldfoobar";
+  columns = htmlparser::Strings::SplitStrAtUtf8Whitespace(s);
+  EXPECT_EQ(1, columns.size());
+  EXPECT_EQ("helloworldfoobar", columns[0]);
+}
+
+TEST(StringsTest, LowerUpperTest) {
+  // Unicode.
+  std::string name = "AMALTASsSŚŚSŚ";
+  htmlparser::Strings::ToLower(&name);
+  EXPECT_EQ(name, "amaltasssśśsś");
+  htmlparser::Strings::ToUpper(&name);
+  EXPECT_EQ(name, "AMALTASSSŚŚSŚ");
+
+  // ascii.
+  std::string lower = "amalTas";
+  std::string upper = "AMALTaS";
+  htmlparser::Strings::ToLower(&upper);
+  EXPECT_EQ(upper, "amaltas");
+  htmlparser::Strings::ToUpper(&lower);
+  EXPECT_EQ(lower, "AMALTAS");
+}
+
+TEST(StringsTest, ConvertNewLinesTest) {
+  std::string s1 = "hello\nworld";
+  htmlparser::Strings::ConvertNewLines(&s1);
+  EXPECT_EQ(s1, "hello\nworld");
+
+  std::string s2 = "hello\rworld";
+  htmlparser::Strings::ConvertNewLines(&s2);
+  EXPECT_EQ(s2, "hello\nworld");
+
+  std::string s3 = "hello\r\nworld";
+  htmlparser::Strings::ConvertNewLines(&s3);
+  EXPECT_EQ(s3, "hello\nworld");
+
+  std::string s4 = "hello\r\r\nworld";
+  htmlparser::Strings::ConvertNewLines(&s4);
+  EXPECT_EQ(s4, "hello\n\nworld");
+
+  std::string s5 = "hello\r\n\f\r\nworld";
+  htmlparser::Strings::ConvertNewLines(&s5);
+  EXPECT_EQ(s5, "hello\n\n\nworld");
+}
+
+TEST(StringsTest, EqualFoldTest) {
+  // Left upper and right lower.
+  EXPECT_TRUE(htmlparser::Strings::EqualFold(
+      "A+MALTASsSŚŚSŚ", "a+maltasssśśsś"));
+  // Right upper and left lower.
+  EXPECT_TRUE(htmlparser::Strings::EqualFold(
+      "a+maltasssśśsś", "A+MALTASsSŚŚSŚ"));
+  // right string has one less char.
+  EXPECT_FALSE(htmlparser::Strings::EqualFold(
+      "A+MALTASsSŚŚSŚ", "a+maltasssśśs"));
+  // left string has one less char.
+  EXPECT_FALSE(htmlparser::Strings::EqualFold(
+      "A+MALTASsSŚŚS", "a+maltasssśśsś"));
+  // Ends with ascii character. Validates string_view cursor moves forward.
+  EXPECT_TRUE(htmlparser::Strings::EqualFold(
+      "A+MALTASsSŚŚSŚZ", "a+maltasssśśsśz"));
+  // Many extra characters in right string.
+  EXPECT_FALSE(htmlparser::Strings::EqualFold(
+      "A+MALTASsSŚŚSŚ", "a+maltasssśśsśaa"));
+  EXPECT_TRUE(htmlparser::Strings::EqualFold("śśsśz", "śśsśz"));
+}
+
+TEST(StringsTest, DecodeUtf8SymbolTest) {
+  std::vector<std::string> strs = {
+    "Amaltas",  // All ascii chars.
+    "AŚŚśś",    // First aschii rest utf.
+    "śśśś",     // All utf.
+    "śAm",      // first utf rest ascii.
+    "śAś",      // first and last utf.
+  };
+
+  for (auto& str : strs) {
+    std::string_view s(str);
+    while (!s.empty()) {
+      auto opt_decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(&s);
+      EXPECT_TRUE(opt_decoded_symbol.has_value());
+    }
+  }
+}
+
+TEST(StringsTest, DecodeUtf8SymbolTestImmutableStringView) {
+  std::string str = "AmaltaśAś";
+  auto decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, 0);
+  EXPECT_TRUE(decoded_symbol.has_value());
+  EXPECT_EQ(decoded_symbol.value(), 65 /* A */);
+
+  decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, 1);
+  EXPECT_TRUE(decoded_symbol.has_value());
+  EXPECT_EQ(decoded_symbol.value(), 109  /* m */);
+
+  decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, 6);
+  EXPECT_TRUE(decoded_symbol.has_value());
+  EXPECT_EQ(decoded_symbol.value(), 0x15b  /* ś */);
+
+  // Next character is at previous + 2, as previous char is 2 byte codepoint.
+  decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, 7);
+  EXPECT_FALSE(decoded_symbol.has_value());
+  // Above index corrected.
+  decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, 8);
+  EXPECT_TRUE(decoded_symbol.has_value());
+  EXPECT_EQ(decoded_symbol.value(), 65  /* A */);
+
+  // negative index is error.
+  decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, -1);
+  EXPECT_FALSE(decoded_symbol.has_value());
+
+  // out of bound is error.
+  decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, 100000);
+  EXPECT_FALSE(decoded_symbol.has_value());
+}
+
+TEST(StringsTest, StartsEndsTest) {
+  std::string name = "AMALTASsSŚŚSŚ";
+  EXPECT_TRUE(htmlparser::Strings::StartsWith(name, name));
+  EXPECT_TRUE(htmlparser::Strings::StartsWith(name, "AMALT"));
+  EXPECT_TRUE(htmlparser::Strings::EndsWith(name, "SsSŚŚSŚ"));
+  htmlparser::Strings::ToUpper(&name);
+  EXPECT_TRUE(htmlparser::Strings::EndsWith(name, "SSSŚŚSŚ"));
+
+  std::string whitespace("\t\n\r ");
+  EXPECT_EQ(htmlparser::Strings::IndexAny("a maltas", whitespace), 1);
+  EXPECT_EQ(htmlparser::Strings::IndexAny("amaltasssśśsś", "ś"), 9);
+  EXPECT_TRUE(htmlparser::Strings::StartsWith("amaltasbohra", "amaltas"));
+}
+
+TEST(StringsTest, EscapeTest) {
+  std::string s("hello & world");
+  std::stringbuf escaped;
+  htmlparser::Strings::Escape(s, &escaped);
+  EXPECT_EQ("hello &amp; world", escaped.str());
+}
+
+TEST(StringsTest, EscapeUnescapeTest) {
+  std::string ss("hello&amp;world. 2 &lt; 3");
+  std::string original_ss = ss;
+  htmlparser::Strings::UnescapeString(&ss);
+  EXPECT_EQ(ss, "hello&world. 2 < 3");
+  EXPECT_EQ(htmlparser::Strings::EscapeString(ss), "hello&amp;world. 2 &lt; 3");
+
+  std::string newss("Hello&nvsim;world. 2&oopf;okhello&Aacute &amp ok");
+  htmlparser::Strings::UnescapeString(&newss);
+  EXPECT_EQ(newss, "Hello∼⃒world. 2𝕠okhelloÁ & ok");
+
+  std::string unescaped("amal<tas>&as");
+  EXPECT_EQ(htmlparser::Strings::EscapeString(unescaped),
+      "amal&lt;tas&gt;&amp;as");
+
+  std::string unescapedquotes("hello\"world\"");
+  EXPECT_EQ(htmlparser::Strings::EscapeString(unescapedquotes),
+            "hello&#34;world&#34;");
+
+  // The unescaped character size is bigger than the escaped entity name.
+  // Example: "&nGt;" = "\xe2\x89\xab\xe2\x83\x92"
+  // 5 character vs. 6 bytes.
+  std::string str1 = "&nGt;cdef";
+  std::string str2 = "&gt;cdef";
+  std::string str3 = "abc&nGt;cdef";
+  std::string str4 = "&abc;def";
+  htmlparser::Strings::UnescapeString(&str1);
+  htmlparser::Strings::UnescapeString(&str2);
+  htmlparser::Strings::UnescapeString(&str3);
+  htmlparser::Strings::UnescapeString(&str4);
+  EXPECT_EQ(str1, "≫⃒cdef");
+  EXPECT_EQ(str2, ">cdef");
+  EXPECT_EQ(str3, "abc≫⃒cdef");
+  EXPECT_EQ(str4, "&abc;def");
+}
+
+TEST(StringsTest, EncodingTest) {
+  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(224).value(), "à");
+  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(202).value(), "Ê");
+  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(128512).value(), "😀");
+  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(19990).value(), "世");
+  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(134071).value(), "𠮷");
+  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(67).value(), "C");
+  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(10703).value(), "⧏");
+}
+
+TEST(StringsTest, TrimTest) {
+  std::string s_with_space = "     amaltas.";
+  htmlparser::Strings::TrimLeft(&s_with_space);
+  EXPECT_EQ(s_with_space, "amaltas.");
+  s_with_space = "amaltas.                    ";
+  htmlparser::Strings::TrimRight(&s_with_space);
+  EXPECT_EQ(s_with_space, "amaltas.");
+
+  s_with_space = "                    amaltas.                  ";
+  htmlparser::Strings::Trim(&s_with_space);
+  EXPECT_EQ(s_with_space, "amaltas.");
+
+  std::string s_with_utf = "안안안안안Amaltas";
+  htmlparser::Strings::TrimLeft(&s_with_utf, "안");
+  EXPECT_EQ(s_with_utf, "Amaltas");
+  s_with_utf = "Amaltas 안안안안안";
+  htmlparser::Strings::TrimRight(&s_with_utf, "안 ");
+  EXPECT_EQ(s_with_utf, "Amaltas");
+
+  std::string_view sv_with_space = "     amaltas.";
+  htmlparser::Strings::TrimLeft(&sv_with_space);
+  EXPECT_EQ(sv_with_space, "amaltas.");
+  sv_with_space = "amaltas.                    ";
+  htmlparser::Strings::TrimRight(&sv_with_space);
+  EXPECT_EQ(sv_with_space, "amaltas.");
+
+  sv_with_space = "      \n\n              amaltas.                  ";
+  htmlparser::Strings::Trim(&sv_with_space);
+  EXPECT_EQ(sv_with_space, "amaltas.");
+
+  std::string_view sv_with_utf = "안안안안안Amaltas";
+  htmlparser::Strings::TrimLeft(&sv_with_utf, "안");
+  EXPECT_EQ(sv_with_utf, "Amaltas");
+  sv_with_utf = "Amaltas 안안안안안";
+  htmlparser::Strings::TrimRight(&sv_with_utf, "안 ");
+  EXPECT_EQ(sv_with_utf, "Amaltas");
+}
+
+TEST(StringsTest, ReplaceTest) {
+  std::string s_to_replace =
+      "AMALTASsSŚŚSŚ AMALTASsSŚŚSŚ AMALTASsSŚŚSŚ AMALTASsSŚŚSŚ";
+  htmlparser::Strings::Replace(&s_to_replace, "ŚŚSŚ", " ");
+  EXPECT_EQ(s_to_replace,
+         "AMALTASsS  AMALTASsSŚŚSŚ AMALTASsSŚŚSŚ AMALTASsSŚŚSŚ");
+  htmlparser::Strings::ReplaceAll(&s_to_replace, "ŚŚSŚ", " ");
+  EXPECT_EQ(s_to_replace, "AMALTASsS  AMALTASsS  AMALTASsS  AMALTASsS ");
+
+  s_to_replace = "amaltas\0\0amaltas"s;
+  htmlparser::Strings::ReplaceAll(&s_to_replace,
+                                  htmlparser::Strings::kNullChar,
+                                  "");
+  EXPECT_EQ(s_to_replace, "amaltasamaltas");
+
+  std::string null_to_ufffd = "\0"s;
+  EXPECT_EQ(null_to_ufffd.size(), 1);
+  htmlparser::Strings::ReplaceAll(&null_to_ufffd,
+                                  htmlparser::Strings::kNullChar,
+                                  "\xef\xbf\xbd"s);
+  EXPECT_EQ(null_to_ufffd, "\xef\xbf\xbd"s);
+  EXPECT_EQ(null_to_ufffd.size(), 3);
+  // The null replacement character.
+  EXPECT_EQ(null_to_ufffd, "�");   // NOLINT(readability/utf8)
+
+  std::string whitespace_and_null =
+      "amaltas is \0\0good \0boy"s;  // NOLINT(readability/utf8)
+  htmlparser::Strings::ReplaceAny(&whitespace_and_null,
+                                  htmlparser::Strings::kWhitespaceOrNull,
+                                  "�");  // NOLINT(readability/utf8)
+  EXPECT_EQ(whitespace_and_null,
+            "amaltas�is���good��boy");  // NOLINT(readability/utf8)
+
+  std::string whitespace_and_null2 = "amaltas is \0\0good \0boy"s;
+  htmlparser::Strings::ReplaceAny(&whitespace_and_null2,
+                                  htmlparser::Strings::kNullChar,
+                                  htmlparser::Strings::kNullReplacementChar);
+  EXPECT_EQ(whitespace_and_null2, "amaltas is ��good �boy");
+
+  std::string many_whitespaces = "  a   m  a lta s  ";
+  htmlparser::Strings::RemoveExtraSpaceChars(&many_whitespaces);
+  EXPECT_EQ(many_whitespaces, " a m a lta s ");
+}
+
+TEST(StringsTest, TranslateTest) {
+  // Simple translate, lowercase to uppercase.
+  auto t1 = htmlparser::Strings::Translate(
+      "amaltas",
+      "abcdefghijklmnopqrstuvwxyz",
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZ");
+  EXPECT_TRUE(t1.has_value());
+  EXPECT_EQ(t1.value(), "AMALTAS");
+
+  // Duplicate entries.
+  auto t2 = htmlparser::Strings::Translate(
+      "amaltas", "abcdabcd", "lmnopqrs");
+  EXPECT_EQ(t2.value(), "lmlltls");
+
+  // Translate involving new Utf chars.
+  auto t3 = htmlparser::Strings::Translate(
+      "amaltas",
+      "alt",
+      "서비스");
+  EXPECT_TRUE(t3.has_value());
+  EXPECT_EQ(t3.value(), "서m서비스서s");
+
+  // Restore previous string.
+  auto t4 = htmlparser::Strings::Translate(
+      "서m서비스서s",
+      "서비스",
+      "alt");
+  EXPECT_TRUE(t4.has_value());
+  EXPECT_EQ(t4.value(), "amaltas");
+
+  // Special chars can be translated too.
+  auto t5 = htmlparser::Strings::Translate(
+      "amal\ntas\t\t"s,
+      "\t\n"s,
+      " .");
+  EXPECT_TRUE(t5.has_value());
+  EXPECT_EQ(t5.value(), "amal.tas  ");
+
+  // xyz smaller than abc.
+  auto t6 = htmlparser::Strings::Translate(
+      "amaltas",
+      "amlts",
+      "bnm");
+  EXPECT_TRUE(t6.has_value());
+  EXPECT_EQ(t6.value(), "bnbmb");
+
+  // abc smaller than xyz.
+  auto t7 = htmlparser::Strings::Translate(
+      "amaltas",
+      "amlts",
+      "bnmutoksobigstring");
+  EXPECT_TRUE(t7.has_value());
+  EXPECT_EQ(t7.value(), "bnbmubt");
+
+  // Create a string with invalid codepoints.
+  // Everything after 68 is invalid codepoint.
+  uint8_t characters[] {65, 66, 67, 68, 183, 188, 190, 191, 192, 193, 194};
+  std::stringbuf buf;
+  for (auto c : characters) {
+    buf.sputc(c);
+  }
+  std::string will_not_decode = buf.str();
+  EXPECT_EQ(will_not_decode.at(0), 'A');
+  EXPECT_EQ(will_not_decode.at(1), 'B');
+  EXPECT_EQ(will_not_decode.at(2), 'C');
+  EXPECT_EQ(will_not_decode.at(3), 'D');
+  // garbage after this.
+
+  auto t8 = htmlparser::Strings::Translate(
+      will_not_decode,
+      "abcdefghij",
+      "lmnopqrstu");
+
+  // Translate failed.
+  EXPECT_FALSE(t8.has_value());
+
+  // Translate ignore chracters if abc is longer than xyz.
+  // In the following abc string ...wn is removed from translated string.
+  auto t9 = htmlparser::Strings::Translate(
+      "The quick brown fox.", "brown", "red");
+  EXPECT_TRUE(t9.has_value());
+  EXPECT_EQ(t9.value(), "The quick red fdx.");
+}
+
+TEST(Utf8UtilTest, SingleCodepointToString) {
+  char32_t bolt = 0x26A1;
+  std::string utf8_string;
+  htmlparser::Strings::AppendCodepointToUtf8String(bolt, &utf8_string);
+  EXPECT_EQ("⚡", utf8_string);
+}
+
+TEST(Utf8UtilTest, RoundTripsAndLengths) {
+  std::vector<char32_t> ascii =
+      htmlparser::Strings::Utf8ToCodepoints("Hello, world");
+  EXPECT_EQ("Hello, world",
+            htmlparser::Strings::CodepointsToUtf8String(ascii));
+
+  std::string amped = "⚡ Got Amp?";
+  EXPECT_EQ(12, amped.size());
+  std::vector<char32_t> amped_codes =
+      htmlparser::Strings::Utf8ToCodepoints(amped);
+  EXPECT_EQ(10, amped_codes.size());
+  EXPECT_EQ(amped,
+            htmlparser::Strings::CodepointsToUtf8String(amped_codes));
+
+  // Checks multi-byte sequences where one of the byte is 0x80.
+  // 0x80 is a special value in multi bytes sequence. In a multi byte sequence
+  // only the last 6 bits are computed. The first two bits are always 0b10.
+  // So if any byte in sequence is null value, its encoded value is 0x80 that
+  // is 010xxxxxx where all x are zero. So 0b10000000 = 128 = 0x80.
+  // Following tests ensures util decodes 0x80 byte correctly and do not treat
+  // the decoded 0th value as null byte.
+  //
+  // Second byte 0x80 in a two byte sequence.
+  std::string two_bytes_seq_second_byte_zero = "Ā";   // \xc4\x80
+  auto decoded_bytes = htmlparser::Strings::DecodeUtf8Symbol(
+      two_bytes_seq_second_byte_zero);
+  EXPECT_TRUE(decoded_bytes.has_value());
+  // First byte 0xc4;
+  // 0bxxxxxxxx000000000000000000000000
+  EXPECT_EQ(0xc4, (*decoded_bytes >> 6) | 0xc0);
+  // Second byte 0x80;
+  EXPECT_EQ(0x80, (*decoded_bytes & 0x3f) | 0x80);
+  // Encode the bytes again.
+  EXPECT_EQ("Ā", htmlparser::Strings::EncodeUtf8Symbol(*decoded_bytes).value());
+
+  // Second byte 0x80 in a three byte sequence.
+  std::string three_bytes_seq_second_byte_zero = "›";
+  decoded_bytes = htmlparser::Strings::DecodeUtf8Symbol(
+      three_bytes_seq_second_byte_zero);
+  EXPECT_TRUE(decoded_bytes.has_value());
+  // First byte 0xe2;
+  // 0bxxxxxxxx000000000000000000000000
+  EXPECT_EQ(0xe2, (*decoded_bytes >> 12) | 0xe0);
+  // Second byte 0x80;
+  // 0b00000000xxxxxxxx0000000000000000
+  EXPECT_EQ(0x80, ((*decoded_bytes >> 6) & 0x3f) | 0x80);
+  // Third byte 0xba;
+  // 0b0000000000000000xxxxxxxx00000000
+  EXPECT_EQ(0xba, (*decoded_bytes & 0x3f) | 0x80);
+  // Fourth byte is zero for three bytes sequence.
+  // 0b000000000000000000000000xxxxxxxx
+  EXPECT_EQ(0x00, *decoded_bytes & 0xffff0000);
+  // Encode the bytes again.
+  EXPECT_EQ("›", htmlparser::Strings::EncodeUtf8Symbol(*decoded_bytes).value());
+
+  // Third byte 0x80 in a four byte sequence.
+  std::string four_bytes_seq_third_byte_zero = "𒀢";  // \xf0\x92\x80\xa2
+  decoded_bytes = htmlparser::Strings::DecodeUtf8Symbol(
+      four_bytes_seq_third_byte_zero);
+  EXPECT_TRUE(decoded_bytes.has_value());
+  // First byte 0xf0;
+  // 0bxxxxxxxx000000000000000000000000
+  EXPECT_EQ(0xf0, (*decoded_bytes >> 18) | 0xf0);
+  // Second byte 0x92;
+  // 0b00000000xxxxxxxx0000000000000000
+  EXPECT_EQ(0x92, ((*decoded_bytes >> 12) & 0x3f) | 0x80);
+  // Third byte 0xba;
+  // 0b0000000000000000xxxxxxxx00000000
+  EXPECT_EQ(0x80, ((*decoded_bytes >> 6) & 0x3f) | 0x80);
+  // Fourth byte 0xa2;
+  // 0b000000000000000000000000xxxxxxxx
+  EXPECT_EQ(0xa2, (*decoded_bytes & 0x3f) | 0x80);
+  // Encode the bytes again.
+  EXPECT_EQ("𒀢", htmlparser::Strings::EncodeUtf8Symbol(*decoded_bytes).value());
+
+  // Last two decoded bytes are 0x80.
+  std::string four_bytes_seqlast_two_zero = "𒀀";  // \xf0\x92\x80\x80
+  decoded_bytes = htmlparser::Strings::DecodeUtf8Symbol(
+      four_bytes_seqlast_two_zero);
+  EXPECT_TRUE(decoded_bytes.has_value());
+  // First byte 0xf0;
+  // 0bxxxxxxxx000000000000000000000000
+  EXPECT_EQ(0xf0, (*decoded_bytes >> 18) | 0xf0);
+  // Second byte 0x92;
+  // 0b00000000xxxxxxxx0000000000000000
+  EXPECT_EQ(0x92, ((*decoded_bytes >> 12) & 0x3f) | 0x80);
+  // Third byte 0xba;
+  // 0b0000000000000000xxxxxxxx00000000
+  EXPECT_EQ(0x80, ((*decoded_bytes >> 6) & 0x3f) | 0x80);
+  // Fourth byte 0x80;
+  // 0b000000000000000000000000xxxxxxxx
+  EXPECT_EQ(0x80, (*decoded_bytes & 0x3f) | 0x80);
+  // Encode the bytes again.
+  EXPECT_EQ("𒀀", htmlparser::Strings::EncodeUtf8Symbol(*decoded_bytes).value());
+
+  // Last byte is 0x80.
+  std::string four_bytes_seq_last_zero = "𒁀";  // \xf0\x92\x81\x80
+  decoded_bytes = htmlparser::Strings::DecodeUtf8Symbol(
+      four_bytes_seq_last_zero);
+  EXPECT_TRUE(decoded_bytes.has_value());
+  // First byte 0xf0;
+  // 0bxxxxxxxx000000000000000000000000
+  EXPECT_EQ(0xf0, (*decoded_bytes >> 18) | 0xf0);
+  // Second byte 0x92;
+  // 0b00000000xxxxxxxx0000000000000000
+  EXPECT_EQ(0x92, ((*decoded_bytes >> 12) & 0x3f) | 0x80);
+  // Third byte 0x81;
+  // 0b0000000000000000xxxxxxxx00000000
+  EXPECT_EQ(0x81, ((*decoded_bytes >> 6) & 0x3f) | 0x80);
+  // Fourth byte 0x80;
+  // 0b000000000000000000000000xxxxxxxx
+  EXPECT_EQ(0x80, (*decoded_bytes & 0x3f) | 0x80);
+  // Encode the bytes again.
+  EXPECT_EQ("𒁀", htmlparser::Strings::EncodeUtf8Symbol(*decoded_bytes).value());
+}
+
+TEST(StringsTest, DecodePercentEncodedURLTest) {
+  EXPECT_EQ(htmlparser::Strings::DecodePercentEncodedURL(
+      "google.com%20%2F%20%3Fx%3Db").value(), "google.com / ?x=b");
+
+  EXPECT_EQ(htmlparser::Strings::DecodePercentEncodedURL(
+      "JavaScript_%d1%88%d0%B5%D0%BB%D0%BB%D1%8B%3a").value(),
+            "JavaScript_шеллы:");
+
+  // ASCII chars may also be encoded.
+  EXPECT_EQ(htmlparser::Strings::DecodePercentEncodedURL(
+      "%77%77w%2e%67o%6f%67%6c%65%2e%63%6f%6d%2f%3f%61%3d%62%3a%63"),
+            "www.google.com/?a=b:c");
+
+  // Percent character.
+  EXPECT_EQ(htmlparser::Strings::DecodePercentEncodedURL("90%25").value(),
+            "90%");
+
+  // Invalid encoding missing sequence byte (%88 after %d1).
+  EXPECT_FALSE(htmlparser::Strings::DecodePercentEncodedURL(
+      "JavaScript_%d1M%d0%B5%D0%BB%D0%BB%D1%8B%3a").has_value());
+
+  // Invalid encoding, sequence byte without initial byte.
+  // (%88 without %d1).
+  EXPECT_FALSE(htmlparser::Strings::DecodePercentEncodedURL(
+      "JavaScript_%88%d0%B5%D0%BB%D0%BB%D1%8B%3a").has_value());
+
+  // URI ends without completing the entire sequence. Checks code doesn't access
+  // uri.front() while it is empty.
+  EXPECT_FALSE(htmlparser::Strings::DecodePercentEncodedURL(
+      "JavaScript_%d1M%d0%B5%D0%BB%D0%BB%D1").has_value());
+
+  // Empty string.
+  EXPECT_EQ(htmlparser::Strings::DecodePercentEncodedURL("").value(), "");
+
+  // Any one byte char must be < 128.
+  // 0xff (255) char.
+  EXPECT_FALSE(htmlparser::Strings::DecodePercentEncodedURL(
+      "example-%FF.com").has_value());
+  // char code 128.
+  EXPECT_FALSE(htmlparser::Strings::DecodePercentEncodedURL(
+      "example-%80.com").has_value());
+}
+
diff --git a/validator/cpp/htmlparser/testconstants.h b/validator/cpp/htmlparser/testconstants.h
new file mode 100644
index 0000000000000..b9c3d095a1e36
--- /dev/null
+++ b/validator/cpp/htmlparser/testconstants.h
@@ -0,0 +1,35 @@
+//
+// 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.
+//
+
+#ifndef HTMLPARSER__TESTCONSTANTS_H_
+#define HTMLPARSER__TESTCONSTANTS_H_
+
+#include <array>
+#include <string_view>
+
+namespace htmlparser {
+
+namespace testing {
+
+inline constexpr std::array<std::string_view, 2> kTestDataDirs{
+    "testdata/tree-construction/*.dat",
+    "testdata/go/*.dat",
+};
+
+}  // namespace testing
+}  // namespace htmlparser
+
+#endif  // HTMLPARSER__TESTCONSTANTS_H_
diff --git a/validator/htmlparser/testdata/go/issue_30600_parse_panics_in_cell_mode.dat b/validator/cpp/htmlparser/testdata/go/issue_30600_parse_panics_in_cell_mode.dat
similarity index 100%
rename from validator/htmlparser/testdata/go/issue_30600_parse_panics_in_cell_mode.dat
rename to validator/cpp/htmlparser/testdata/go/issue_30600_parse_panics_in_cell_mode.dat
diff --git a/validator/htmlparser/testdata/go/issue_30961_error_nested_unknown_tag_types.dat b/validator/cpp/htmlparser/testdata/go/issue_30961_error_nested_unknown_tag_types.dat
similarity index 100%
rename from validator/htmlparser/testdata/go/issue_30961_error_nested_unknown_tag_types.dat
rename to validator/cpp/htmlparser/testdata/go/issue_30961_error_nested_unknown_tag_types.dat
diff --git a/validator/htmlparser/testdata/go/select.dat b/validator/cpp/htmlparser/testdata/go/select.dat
similarity index 100%
rename from validator/htmlparser/testdata/go/select.dat
rename to validator/cpp/htmlparser/testdata/go/select.dat
diff --git a/validator/htmlparser/testdata/go/template.dat b/validator/cpp/htmlparser/testdata/go/template.dat
similarity index 100%
rename from validator/htmlparser/testdata/go/template.dat
rename to validator/cpp/htmlparser/testdata/go/template.dat
diff --git a/validator/cpp/htmlparser/testdata/largehtmldoc.html b/validator/cpp/htmlparser/testdata/largehtmldoc.html
new file mode 100644
index 0000000000000..b1061239a92f4
--- /dev/null
+++ b/validator/cpp/htmlparser/testdata/largehtmldoc.html
@@ -0,0 +1,2943 @@
+<!-- This HTML file creates a test case for testing complex HTML document that
+     may put pressure on stack requirements of a thread, memory allocation and
+     deallocation. -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hello world</title>
+  </head>
+  <body>
+    <div>
+    <div>
+    <div>
+    <div>
+    <div>
+    <div>
+    <div>
+    <div>
+    <div>
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      <div>a<div>b<div>c<div>d<div>e<div>f<div>g<div>h<div>i<div>j<div>k<div>l
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+      </div></div></div></div></div></div></div></div></div></div></div></div>
+    <div>
+    <div>
+    <div>
+    <div>
+    <div>
+    <div>
+    <div>
+    <div>
+    <div>
+    <div>
+    <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <div>
+                          <div>
+                            <div>
+                              <div>
+                                <div>
+                                  <div>
+                                    <div>
+                                      <div>
+                                        <div>
+                                          <div>
+                                            <div>
+                                              <div>
+                                                <div>
+                                                  <div>
+                                                    <div>
+                                                      <div>
+                                                        <div>
+                                                          <div>
+                                                            <div>
+                                                              <div>
+                                                                <div>
+                                                                  <div>
+                                                                    <div>
+                                                                      <div>
+                                                                        <div>
+                                                                          <div>
+                                                                            <div>
+                                                                              Hello world
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                              <div>ok</div>
+                                                                            </div>
+                                                                          </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                        </div>
+                                                                      </div>
+                                                                    </div>
+                                                                  </div>
+                                                                </div>
+                                                              </div>
+                                                            </div>
+                                                          </div>
+                                                        </div>
+                                                      </div>
+                                                    </div>
+                                                  </div>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <div>
+                          <div>
+                            <div>
+                              <div>
+                                <div>
+                                  <div>
+                                    <div>
+                                      <div>
+                                        <div>
+                                          <div>
+                                            <div>
+                                              <div>
+                                                <div>
+                                                  <div>
+                                                    <div>
+                                                      <div>
+                                                        <div>
+                                                          <div>
+                                                            <div>
+                                                              <div>
+                                                                <div>
+                                                                  <div>
+                                                                    <div>
+                                                                      <div>
+                                                                        <div>
+                                                                          <div>
+                                                                            <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <div>
+                          <div>
+                            <div>
+                              <div>
+                                <div>
+                                  <div>
+                                    <div>
+                                      <div>
+                                        <div>
+                                          <div>
+                                            <div>
+                                              <div>
+                                                <div>
+                                                  <div>
+                                                    <div>
+                                                      <div>
+                                                        <div>
+                                                          <div>
+                                                            <div>
+                                                              <div>
+                                                                <div>
+                                                                  <div>
+                                                                    <div>
+                                                                      <div>
+                                                                        <div>
+                                                                          <div>
+                                                                            <div>
+                                                                              Hello world
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <div>
+                          <div>
+                            <div>
+                              <div>
+                                <div>
+                                  <div>
+                                    <div>
+                                      <div>
+                                        <div>
+                                          <div>
+                                            <div>
+                                              <div>
+                                                <div>
+                                                  <div>
+                                                    <div>
+                                                      <div>
+                                                        <div>
+                                                          <div>
+                                                            <div>
+                                                              <div>
+                                                                <div>
+                                                                  <div>
+                                                                    <div>
+                                                                      <div>
+                                                                        <div>
+                                                                          <div>
+                                                                            <div>
+                                                                              Hello world
+                                                                            </div>
+                                                                          </div>
+                                                                        </div>
+                                                                      </div>
+                                                                    </div>
+                                                                  </div>
+                                                                </div>
+                                                              </div>
+                                                            </div>
+                                                          </div>
+                                                        </div>
+                                                      </div>
+                                                    </div>
+                                                  </div>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+                                                                            </div>
+                                                                          </div>
+                                                                        </div>
+                                                                      </div>
+                                                                    </div>
+                                                                  </div>
+                                                                </div>
+                                                              </div>
+                                                            </div>
+                                                          </div>
+                                                        </div>
+                                                      </div>
+                                                    </div>
+                                                  </div>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+                                                                            </div>
+                                                                          </div>
+                                                                        </div>
+                                                                      </div>
+                                                                    </div>
+                                                                  </div>
+                                                                </div>
+                                                              </div>
+                                                            </div>
+                                                          </div>
+                                                        </div>
+                                                      </div>
+                                                    </div>
+                                                  </div>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
diff --git a/validator/cpp/htmlparser/testdata/tree-construction/adoption01.dat b/validator/cpp/htmlparser/testdata/tree-construction/adoption01.dat
new file mode 100644
index 0000000000000..2e1127e5178c6
--- /dev/null
+++ b/validator/cpp/htmlparser/testdata/tree-construction/adoption01.dat
@@ -0,0 +1,337 @@
+#data
+<a><p></a></p>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,10): adoption-agency-1.3
+#document
+| <html>
+|   <head>
+|   <body>
+|     <a>
+|     <p>
+|       <a>
+
+#data
+<a>1<p>2</a>3</p>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,12): adoption-agency-1.3
+#document
+| <html>
+|   <head>
+|   <body>
+|     <a>
+|       "1"
+|     <p>
+|       <a>
+|         "2"
+|       "3"
+
+#data
+<a>1<button>2</a>3</button>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,17): adoption-agency-1.3
+#document
+| <html>
+|   <head>
+|   <body>
+|     <a>
+|       "1"
+|     <button>
+|       <a>
+|         "2"
+|       "3"
+
+#data
+<a>1<b>2</a>3</b>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,12): adoption-agency-1.3
+#document
+| <html>
+|   <head>
+|   <body>
+|     <a>
+|       "1"
+|       <b>
+|         "2"
+|     <b>
+|       "3"
+
+#data
+<a>1<div>2<div>3</a>4</div>5</div>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,20): adoption-agency-1.3
+(1,20): adoption-agency-1.3
+#document
+| <html>
+|   <head>
+|   <body>
+|     <a>
+|       "1"
+|     <div>
+|       <a>
+|         "2"
+|       <div>
+|         <a>
+|           "3"
+|         "4"
+|       "5"
+
+#data
+<table><a>1<p>2</a>3</p>
+#errors
+(1,7): expected-doctype-but-got-start-tag
+(1,10): unexpected-start-tag-implies-table-voodoo
+(1,11): unexpected-character-implies-table-voodoo
+(1,14): unexpected-start-tag-implies-table-voodoo
+(1,15): unexpected-character-implies-table-voodoo
+(1,19): unexpected-end-tag-implies-table-voodoo
+(1,19): adoption-agency-1.3
+(1,20): unexpected-character-implies-table-voodoo
+(1,24): unexpected-end-tag-implies-table-voodoo
+(1,24): eof-in-table
+#document
+| <html>
+|   <head>
+|   <body>
+|     <a>
+|       "1"
+|     <p>
+|       <a>
+|         "2"
+|       "3"
+|     <table>
+
+#data
+<b><b><a><p></a>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,16): adoption-agency-1.3
+(1,16): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <b>
+|       <b>
+|         <a>
+|         <p>
+|           <a>
+
+#data
+<b><a><b><p></a>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,16): adoption-agency-1.3
+(1,16): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <b>
+|       <a>
+|         <b>
+|       <b>
+|         <p>
+|           <a>
+
+#data
+<a><b><b><p></a>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,16): adoption-agency-1.3
+(1,16): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <a>
+|       <b>
+|         <b>
+|     <b>
+|       <b>
+|         <p>
+|           <a>
+
+#data
+<p>1<s id="A">2<b id="B">3</p>4</s>5</b>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,30): unexpected-end-tag
+(1,35): adoption-agency-1.3
+#document
+| <html>
+|   <head>
+|   <body>
+|     <p>
+|       "1"
+|       <s>
+|         id="A"
+|         "2"
+|         <b>
+|           id="B"
+|           "3"
+|     <s>
+|       id="A"
+|       <b>
+|         id="B"
+|         "4"
+|     <b>
+|       id="B"
+|       "5"
+
+#data
+<table><a>1<td>2</td>3</table>
+#errors
+(1,7): expected-doctype-but-got-start-tag
+(1,10): unexpected-start-tag-implies-table-voodoo
+(1,11): unexpected-character-implies-table-voodoo
+(1,15): unexpected-cell-in-table-body
+(1,30): unexpected-implied-end-tag-in-table-view
+#document
+| <html>
+|   <head>
+|   <body>
+|     <a>
+|       "1"
+|     <a>
+|       "3"
+|     <table>
+|       <tbody>
+|         <tr>
+|           <td>
+|             "2"
+
+#data
+<table>A<td>B</td>C</table>
+#errors
+(1,7): expected-doctype-but-got-start-tag
+(1,8): unexpected-character-implies-table-voodoo
+(1,12): unexpected-cell-in-table-body
+(1,22): unexpected-character-implies-table-voodoo
+#document
+| <html>
+|   <head>
+|   <body>
+|     "AC"
+|     <table>
+|       <tbody>
+|         <tr>
+|           <td>
+|             "B"
+
+#data
+<a><svg><tr><input></a>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,23): unexpected-end-tag
+(1,23): adoption-agency-1.3
+#document
+| <html>
+|   <head>
+|   <body>
+|     <a>
+|       <svg svg>
+|         <svg tr>
+|           <svg input>
+
+#data
+<div><a><b><div><div><div><div><div><div><div><div><div><div></a>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+(1,65): adoption-agency-1.3
+(1,65): adoption-agency-1.3
+(1,65): adoption-agency-1.3
+(1,65): adoption-agency-1.3
+(1,65): adoption-agency-1.3
+(1,65): adoption-agency-1.3
+(1,65): adoption-agency-1.3
+(1,65): adoption-agency-1.3
+(1,65): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <div>
+|       <a>
+|         <b>
+|       <b>
+|         <div>
+|           <a>
+|           <div>
+|             <a>
+|             <div>
+|               <a>
+|               <div>
+|                 <a>
+|                 <div>
+|                   <a>
+|                   <div>
+|                     <a>
+|                     <div>
+|                       <a>
+|                       <div>
+|                         <a>
+|                           <div>
+|                             <div>
+
+#data
+<div><a><b><u><i><code><div></a>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+(1,32): adoption-agency-1.3
+(1,32): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <div>
+|       <a>
+|         <b>
+|           <u>
+|             <i>
+|               <code>
+|       <u>
+|         <i>
+|           <code>
+|             <div>
+|               <a>
+
+#data
+<b><b><b><b>x</b></b></b></b>y
+#errors
+(1,3): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <b>
+|       <b>
+|         <b>
+|           <b>
+|             "x"
+|     "y"
+
+#data
+<p><b><b><b><b><p>x
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,18): unexpected-end-tag
+(1,19): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|         <b>
+|           <b>
+|             <b>
+|     <p>
+|       <b>
+|         <b>
+|           <b>
+|             "x"
diff --git a/validator/htmlparser/testdata/tree-construction/adoption02.dat b/validator/cpp/htmlparser/testdata/tree-construction/adoption02.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/adoption02.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/adoption02.dat
diff --git a/validator/htmlparser/testdata/tree-construction/blocks.dat b/validator/cpp/htmlparser/testdata/tree-construction/blocks.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/blocks.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/blocks.dat
diff --git a/validator/htmlparser/testdata/tree-construction/comments01.dat b/validator/cpp/htmlparser/testdata/tree-construction/comments01.dat
similarity index 78%
rename from validator/htmlparser/testdata/tree-construction/comments01.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/comments01.dat
index fa79c2b16bc3d..35ec6cced6362 100644
--- a/validator/htmlparser/testdata/tree-construction/comments01.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/comments01.dat
@@ -15,8 +15,6 @@ FOO<!-- BAR --!>BAZ
 #errors
 (1,3): expected-doctype-but-got-chars
 (1,15): unexpected-bang-after-double-dash-in-comment
-#new-errors
-(1:16) incorrectly-closed-comment
 #document
 | <html>
 |   <head>
@@ -25,42 +23,12 @@ FOO<!-- BAR --!>BAZ
 |     <!--  BAR  -->
 |     "BAZ"
 
-#data
-FOO<!-- BAR --! >BAZ
-#errors
-(1,3): expected-doctype-but-got-chars
-#new-errors
-(1:20) eof-in-comment
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO"
-|     <!--  BAR --! >BAZ -->
-
-#data
-FOO<!-- BAR --!
->BAZ
-#errors
-(1,3): expected-doctype-but-got-chars
-#new-errors
-(1:20) eof-in-comment
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO"
-|     <!--  BAR --!
->BAZ -->
-
 #data
 FOO<!-- BAR --   >BAZ
 #errors
 (1,3): expected-doctype-but-got-chars
 (1,15): unexpected-char-in-comment
 (1,21): eof-in-comment
-#new-errors
-(1:22) eof-in-comment
 #document
 | <html>
 |   <head>
@@ -89,8 +57,6 @@ FOO<!-- BAR -- <QUX> -- MUX --!>BAZ
 (1,15): unexpected-char-in-comment
 (1,24): unexpected-char-in-comment
 (1,31): unexpected-bang-after-double-dash-in-comment
-#new-errors
-(1:32) incorrectly-closed-comment
 #document
 | <html>
 |   <head>
@@ -107,8 +73,6 @@ FOO<!-- BAR -- <QUX> -- MUX -- >BAZ
 (1,24): unexpected-char-in-comment
 (1,31): unexpected-char-in-comment
 (1,35): eof-in-comment
-#new-errors
-(1:36) eof-in-comment
 #document
 | <html>
 |   <head>
@@ -133,8 +97,6 @@ FOO<!--->BAZ
 #errors
 (1,3): expected-doctype-but-got-chars
 (1,9): incorrect-comment
-#new-errors
-(1:9) abrupt-closing-of-empty-comment
 #document
 | <html>
 |   <head>
@@ -148,8 +110,6 @@ FOO<!-->BAZ
 #errors
 (1,3): expected-doctype-but-got-chars
 (1,8): incorrect-comment
-#new-errors
-(1:8) abrupt-closing-of-empty-comment
 #document
 | <html>
 |   <head>
@@ -163,8 +123,6 @@ FOO<!-->BAZ
 #errors
 (1,1): expected-tag-name-but-got-question-mark
 (1,22): expected-doctype-but-got-chars
-#new-errors
-(1:2) unexpected-question-mark-instead-of-tag-name
 #document
 | <!-- ?xml version="1.0" -->
 | <html>
@@ -177,8 +135,6 @@ FOO<!-->BAZ
 #errors
 (1,1): expected-tag-name-but-got-question-mark
 (1,20): expected-doctype-but-got-eof
-#new-errors
-(1:2) unexpected-question-mark-instead-of-tag-name
 #document
 | <!-- ?xml version="1.0" -->
 | <html>
@@ -190,8 +146,6 @@ FOO<!-->BAZ
 #errors
 (1,1): expected-tag-name-but-got-question-mark
 (1,13): expected-doctype-but-got-eof
-#new-errors
-(1:2) unexpected-question-mark-instead-of-tag-name
 #document
 | <!-- ?xml version -->
 | <html>
diff --git a/validator/htmlparser/testdata/tree-construction/doctype01.dat b/validator/cpp/htmlparser/testdata/tree-construction/doctype01.dat
similarity index 83%
rename from validator/htmlparser/testdata/tree-construction/doctype01.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/doctype01.dat
index c845becfc54fc..cec6638971006 100644
--- a/validator/htmlparser/testdata/tree-construction/doctype01.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/doctype01.dat
@@ -22,8 +22,6 @@
 <!DOCTYPEhtml>Hello
 #errors
 (1,9): need-space-after-doctype
-#new-errors
-(1:10) missing-whitespace-before-doctype-name
 #document
 | <!DOCTYPE html>
 | <html>
@@ -37,8 +35,6 @@
 (1,9): need-space-after-doctype
 (1,10): expected-doctype-name-but-got-right-bracket
 (1,10): unknown-doctype
-#new-errors
-(1:10) missing-doctype-name
 #document
 | <!DOCTYPE >
 | <html>
@@ -51,8 +47,6 @@
 #errors
 (1,11): expected-doctype-name-but-got-right-bracket
 (1,11): unknown-doctype
-#new-errors
-(1:11) missing-doctype-name
 #document
 | <!DOCTYPE >
 | <html>
@@ -87,8 +81,6 @@
 #errors
 (1,17): expected-space-or-right-bracket-in-doctype
 (1,22): unknown-doctype
-#new-errors
-(1:18) invalid-character-sequence-after-doctype-name
 #document
 | <!DOCTYPE potato>
 | <html>
@@ -101,8 +93,6 @@
 #errors
 (1,17): expected-space-or-right-bracket-in-doctype
 (1,27): unknown-doctype
-#new-errors
-(1:18) invalid-character-sequence-after-doctype-name
 #document
 | <!DOCTYPE potato>
 | <html>
@@ -115,8 +105,6 @@
 #errors
 (1,24): unexpected-char-in-doctype
 (1,24): unknown-doctype
-#new-errors
-(1:24) missing-doctype-system-identifier
 #document
 | <!DOCTYPE potato>
 | <html>
@@ -129,8 +117,6 @@
 #errors
 (1,28): unexpected-char-in-doctype
 (1,28): unknown-doctype
-#new-errors
-(1:28) missing-doctype-system-identifier
 #document
 | <!DOCTYPE potato>
 | <html>
@@ -143,8 +129,6 @@
 #errors
 (1,34): unexpected-char-in-doctype
 (1,37): unknown-doctype
-#new-errors
-(1:34) missing-quote-before-doctype-system-identifier
 #document
 | <!DOCTYPE potato>
 | <html>
@@ -157,8 +141,6 @@
 #errors
 (1,25): unexpected-char-in-doctype
 (1,31): unknown-doctype
-#new-errors
-(1:25) missing-quote-before-doctype-system-identifier
 #document
 | <!DOCTYPE potato>
 | <html>
@@ -204,8 +186,6 @@
 #errors
 (1,24): unexpected-char-in-doctype
 (1,34): unknown-doctype
-#new-errors
-(1:24) missing-quote-before-doctype-system-identifier
 #document
 | <!DOCTYPE potato>
 | <html>
@@ -218,8 +198,6 @@
 #errors
 (1,17): expected-space-or-right-bracket-in-doctype
 (1,35): unknown-doctype
-#new-errors
-(1:18) invalid-character-sequence-after-doctype-name
 #document
 | <!DOCTYPE potato>
 | <html>
@@ -232,8 +210,6 @@
 #errors
 (1,24): unexpected-end-of-doctype
 (1,24): unknown-doctype
-#new-errors
-(1:24) missing-doctype-public-identifier
 #document
 | <!DOCTYPE potato>
 | <html>
@@ -246,8 +222,6 @@
 #errors
 (1,25): unexpected-end-of-doctype
 (1,25): unknown-doctype
-#new-errors
-(1:25) missing-doctype-public-identifier
 #document
 | <!DOCTYPE potato>
 | <html>
@@ -260,8 +234,6 @@
 #errors
 (1,24): unexpected-char-in-doctype
 (1,28): unknown-doctype
-#new-errors
-(1:24) missing-quote-before-doctype-public-identifier
 #document
 | <!DOCTYPE potato>
 | <html>
@@ -274,8 +246,6 @@
 #errors
 (1,25): unexpected-char-in-doctype
 (1,29): unknown-doctype
-#new-errors
-(1:25) missing-quote-before-doctype-public-identifier
 #document
 | <!DOCTYPE potato>
 | <html>
@@ -299,8 +269,6 @@
 #errors
 (1,29): unexpected-char-in-doctype
 (1,32): unknown-doctype
-#new-errors
-(1:29) missing-quote-before-doctype-system-identifier
 #document
 | <!DOCTYPE potato "go" "">
 | <html>
@@ -324,8 +292,6 @@
 #errors
 (1,38): unexpected-char-in-doctype
 (1,48): unknown-doctype
-#new-errors
-(1:38) missing-quote-before-doctype-system-identifier
 #document
 | <!DOCTYPE potato "W3C-//dfdf" "">
 | <html>
@@ -384,8 +350,6 @@
 #errors
 (1,23): expected-space-or-right-bracket-in-doctype
 (2,30): unknown-doctype
-#new-errors
-(1:24) invalid-character-sequence-after-doctype-name
 #document
 | <!DOCTYPE root-element>
 | <html>
@@ -421,8 +385,6 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
 #errors
 (1,50): unexpected-char-in-doctype
-#new-errors
-(1:50) missing-whitespace-between-doctype-public-and-system-identifiers
 #document
 | <!DOCTYPE html "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 | <html>
@@ -433,8 +395,6 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"'http://www.w3.org/TR/html4/strict.dtd'>
 #errors
 (1,50): unexpected-char-in-doctype
-#new-errors
-(1:50) missing-whitespace-between-doctype-public-and-system-identifiers
 #document
 | <!DOCTYPE html "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 | <html>
@@ -446,9 +406,6 @@
 #errors
 (1,21): unexpected-char-in-doctype
 (1,49): unexpected-char-in-doctype
-#new-errors
-(1:22) missing-whitespace-after-doctype-public-keyword
-(1:49) missing-whitespace-between-doctype-public-and-system-identifiers
 #document
 | <!DOCTYPE html "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 | <html>
@@ -460,9 +417,6 @@
 #errors
 (1,21): unexpected-char-in-doctype
 (1,49): unexpected-char-in-doctype
-#new-errors
-(1:22) missing-whitespace-after-doctype-public-keyword
-(1:49) missing-whitespace-between-doctype-public-and-system-identifiers
 #document
 | <!DOCTYPE html "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 | <html>
diff --git a/validator/htmlparser/testdata/tree-construction/domjs-unsafe.dat b/validator/cpp/htmlparser/testdata/tree-construction/domjs-unsafe.dat
similarity index 95%
rename from validator/htmlparser/testdata/tree-construction/domjs-unsafe.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/domjs-unsafe.dat
index 0a1b10f96d9d6..34b4e62716e4b 100644
Binary files a/validator/htmlparser/testdata/tree-construction/domjs-unsafe.dat and b/validator/cpp/htmlparser/testdata/tree-construction/domjs-unsafe.dat differ
diff --git a/validator/cpp/htmlparser/testdata/tree-construction/entities01.dat b/validator/cpp/htmlparser/testdata/tree-construction/entities01.dat
new file mode 100644
index 0000000000000..b271f8220f601
--- /dev/null
+++ b/validator/cpp/htmlparser/testdata/tree-construction/entities01.dat
@@ -0,0 +1,792 @@
+#data
+FOO&gt;BAR
+#errors
+(1,3): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO>BAR"
+
+#data
+FOO&gtBAR
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,6): named-entity-without-semicolon
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO>BAR"
+
+#data
+FOO&gt BAR
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,6): named-entity-without-semicolon
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO> BAR"
+
+#data
+FOO&gt;;;BAR
+#errors
+(1,3): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO>;;BAR"
+
+#data
+I'm &notit; I tell you
+#errors
+(1,4): expected-doctype-but-got-chars
+(1,9): named-entity-without-semicolon
+#document
+| <html>
+|   <head>
+|   <body>
+|     "I'm ¬it; I tell you"
+
+#data
+I'm &notin; I tell you
+#errors
+(1,4): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "I'm ∉ I tell you"
+
+#data
+FOO& BAR
+#errors
+(1,3): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO& BAR"
+
+#data
+FOO&<BAR>
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,9): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO&"
+|     <bar>
+
+#data
+FOO&&&&gt;BAR
+#errors
+(1,3): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO&&&>BAR"
+
+#data
+FOO&#41;BAR
+#errors
+(1,3): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO)BAR"
+
+#data
+FOO&#x41;BAR
+#errors
+(1,3): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOABAR"
+
+#data
+FOO&#X41;BAR
+#errors
+(1,3): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOABAR"
+
+#data
+FOO&#BAR
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,5): expected-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO&#BAR"
+
+#data
+FOO&#ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,5): expected-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO&#ZOO"
+
+#data
+FOO&#xBAR
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,7): expected-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOºR"
+
+#data
+FOO&#xZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,6): expected-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO&#xZOO"
+
+#data
+FOO&#XZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,6): expected-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO&#XZOO"
+
+#data
+FOO&#41BAR
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,7): numeric-entity-without-semicolon
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO)BAR"
+
+#data
+FOO&#x41BAR
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,10): numeric-entity-without-semicolon
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO䆺R"
+
+#data
+FOO&#x41ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,8): numeric-entity-without-semicolon
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOAZOO"
+
+#data
+FOO&#x0000;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO�ZOO"
+
+#data
+FOO&#x0078;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOxZOO"
+
+#data
+FOO&#x0079;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOyZOO"
+
+#data
+FOO&#x0080;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO€ZOO"
+
+#data
+FOO&#x0081;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOZOO"
+
+#data
+FOO&#x0082;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO‚ZOO"
+
+#data
+FOO&#x0083;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOƒZOO"
+
+#data
+FOO&#x0084;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO„ZOO"
+
+#data
+FOO&#x0085;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO…ZOO"
+
+#data
+FOO&#x0086;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO†ZOO"
+
+#data
+FOO&#x0087;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO‡ZOO"
+
+#data
+FOO&#x0088;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOˆZOO"
+
+#data
+FOO&#x0089;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO‰ZOO"
+
+#data
+FOO&#x008A;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOŠZOO"
+
+#data
+FOO&#x008B;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO‹ZOO"
+
+#data
+FOO&#x008C;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOŒZOO"
+
+#data
+FOO&#x008D;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOZOO"
+
+#data
+FOO&#x008E;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOŽZOO"
+
+#data
+FOO&#x008F;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOZOO"
+
+#data
+FOO&#x0090;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOZOO"
+
+#data
+FOO&#x0091;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO‘ZOO"
+
+#data
+FOO&#x0092;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO’ZOO"
+
+#data
+FOO&#x0093;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO“ZOO"
+
+#data
+FOO&#x0094;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO”ZOO"
+
+#data
+FOO&#x0095;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO•ZOO"
+
+#data
+FOO&#x0096;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO–ZOO"
+
+#data
+FOO&#x0097;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO—ZOO"
+
+#data
+FOO&#x0098;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO˜ZOO"
+
+#data
+FOO&#x0099;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO™ZOO"
+
+#data
+FOO&#x009A;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOšZOO"
+
+#data
+FOO&#x009B;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO›ZOO"
+
+#data
+FOO&#x009C;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOœZOO"
+
+#data
+FOO&#x009D;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOZOO"
+
+#data
+FOO&#x009E;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOžZOO"
+
+#data
+FOO&#x009F;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOŸZOO"
+
+#data
+FOO&#x00A0;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO ZOO"
+
+#data
+FOO&#xD7FF;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO퟿ZOO"
+
+#data
+FOO&#xD800;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO�ZOO"
+
+#data
+FOO&#xD801;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO�ZOO"
+
+#data
+FOO&#xDFFE;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO�ZOO"
+
+#data
+FOO&#xDFFF;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,11): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO�ZOO"
+
+#data
+FOO&#xE000;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOOZOO"
+
+#data
+FOO&#x10FFFE;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,13): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO􏿾ZOO"
+
+#data
+FOO&#x1087D4;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO􈟔ZOO"
+
+#data
+FOO&#x10FFFF;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,13): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO􏿿ZOO"
+
+#data
+FOO&#x110000;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,13): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO�ZOO"
+
+#data
+FOO&#xFFFFFF;ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,13): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO�ZOO"
+
+#data
+FOO&#11111111111
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,13): illegal-codepoint-for-numeric-entity
+(1,13): eof-in-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO�"
+
+#data
+FOO&#1111111111
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,13): illegal-codepoint-for-numeric-entity
+(1,13): eof-in-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO�"
+
+#data
+FOO&#111111111111
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,13): illegal-codepoint-for-numeric-entity
+(1,13): eof-in-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO�"
+
+#data
+FOO&#11111111111ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,13): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO�ZOO"
+
+#data
+FOO&#1111111111ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,13): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO�ZOO"
+
+#data
+FOO&#111111111111ZOO
+#errors
+(1,3): expected-doctype-but-got-chars
+(1,13): illegal-codepoint-for-numeric-entity
+#document
+| <html>
+|   <head>
+|   <body>
+|     "FOO�ZOO"
diff --git a/validator/htmlparser/testdata/tree-construction/entities02.dat b/validator/cpp/htmlparser/testdata/tree-construction/entities02.dat
similarity index 89%
rename from validator/htmlparser/testdata/tree-construction/entities02.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/entities02.dat
index 0c6e898cdf316..22365c98839a8 100644
--- a/validator/htmlparser/testdata/tree-construction/entities02.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/entities02.dat
@@ -103,8 +103,6 @@
 #errors
 (1,15): named-entity-without-semicolon
 (1,20): expected-doctype-but-got-start-tag
-#new-errors
-(1:16) missing-semicolon-after-character-reference
 #document
 | <html>
 |   <head>
@@ -117,8 +115,6 @@
 #errors
 (1,15): named-entity-without-semicolon
 (1,17): expected-doctype-but-got-start-tag
-#new-errors
-(1:16) missing-semicolon-after-character-reference
 #document
 | <html>
 |   <head>
@@ -131,8 +127,6 @@
 #errors
 (1,15): named-entity-without-semicolon
 (1,17): expected-doctype-but-got-start-tag
-#new-errors
-(1:16) missing-semicolon-after-character-reference
 #document
 | <html>
 |   <head>
@@ -145,8 +139,6 @@
 #errors
 (1,14): named-entity-without-semicolon
 (1,15): expected-doctype-but-got-start-tag
-#new-errors
-(1:15) missing-semicolon-after-character-reference
 #document
 | <html>
 |   <head>
@@ -159,8 +151,6 @@
 #errors
 (1,18): named-entity-without-semicolon
 (1,26): expected-doctype-but-got-start-tag
-#new-errors
-(1:19) missing-semicolon-after-character-reference
 #document
 | <html>
 |   <head>
@@ -229,8 +219,6 @@
 #errors
 (1,5): expected-doctype-but-got-start-tag
 (1,13): named-entity-without-semicolon
-#new-errors
-(1:14) missing-semicolon-after-character-reference
 #document
 | <html>
 |   <head>
@@ -276,8 +264,6 @@
 #errors
 (1,5): expected-doctype-but-got-start-tag
 (1,13): named-entity-without-semicolon
-#new-errors
-(1:14) missing-semicolon-after-character-reference
 #document
 | <html>
 |   <head>
@@ -299,8 +285,6 @@
 #data
 <div>ZZ&AElig=</div>
 #errors
-#new-errors
-(1:14) missing-semicolon-after-character-reference
 #document
 | <html>
 |   <head>
diff --git a/validator/htmlparser/testdata/tree-construction/foreign-fragment.dat b/validator/cpp/htmlparser/testdata/tree-construction/foreign-fragment.dat
similarity index 94%
rename from validator/htmlparser/testdata/tree-construction/foreign-fragment.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/foreign-fragment.dat
index c81ae8171255f..2e3cb6c6f683e 100644
--- a/validator/htmlparser/testdata/tree-construction/foreign-fragment.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/foreign-fragment.dat
@@ -174,8 +174,6 @@ math ms
 51: Self-closing syntax (“/>”) used on a non-void HTML element. Ignoring the slash and treating as a start tag.
 52: End of file seen and there were open elements.
 51: Unclosed element “ms”.
-#new-errors
-(1:44-1:49) non-void-html-element-start-tag-with-trailing-solidus
 #document-fragment
 math ms
 #document
@@ -217,8 +215,6 @@ math ms
 51: Self-closing syntax (“/>”) used on a non-void HTML element. Ignoring the slash and treating as a start tag.
 52: End of file seen and there were open elements.
 51: Unclosed element “mn”.
-#new-errors
-(1:44-1:49) non-void-html-element-start-tag-with-trailing-solidus
 #document-fragment
 math mn
 #document
@@ -260,8 +256,6 @@ math mn
 51: Self-closing syntax (“/>”) used on a non-void HTML element. Ignoring the slash and treating as a start tag.
 52: End of file seen and there were open elements.
 51: Unclosed element “mo”.
-#new-errors
-(1:44-1:49) non-void-html-element-start-tag-with-trailing-solidus
 #document-fragment
 math mo
 #document
@@ -303,8 +297,6 @@ math mo
 51: Self-closing syntax (“/>”) used on a non-void HTML element. Ignoring the slash and treating as a start tag.
 52: End of file seen and there were open elements.
 51: Unclosed element “mi”.
-#new-errors
-(1:44-1:49) non-void-html-element-start-tag-with-trailing-solidus
 #document-fragment
 math mi
 #document
@@ -346,8 +338,6 @@ math mi
 51: Self-closing syntax (“/>”) used on a non-void HTML element. Ignoring the slash and treating as a start tag.
 52: End of file seen and there were open elements.
 51: Unclosed element “mtext”.
-#new-errors
-(1:44-1:52) non-void-html-element-start-tag-with-trailing-solidus
 #document-fragment
 math mtext
 #document
@@ -497,7 +487,8 @@ svg desc
 #data
 <plaintext><foo>
 #errors
-(1,16): expected-closing-tag-but-got-eof
+16: End of file seen and there were open elements.
+11: Unclosed element “plaintext”.
 #document-fragment
 svg desc
 #document
diff --git a/validator/htmlparser/testdata/tree-construction/html5test-com.dat b/validator/cpp/htmlparser/testdata/tree-construction/html5test-com.dat
similarity index 92%
rename from validator/htmlparser/testdata/tree-construction/html5test-com.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/html5test-com.dat
index f7380101eeae1..8c6ec40cd748a 100644
--- a/validator/htmlparser/testdata/tree-construction/html5test-com.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/html5test-com.dat
@@ -15,8 +15,6 @@
 (1,9): invalid-character-in-attribute-name
 (1,16): expected-doctype-but-got-start-tag
 (1,16): expected-closing-tag-but-got-eof
-#new-errors
-(1:9) unexpected-character-in-attribute-name
 #document
 | <html>
 |   <head>
@@ -31,9 +29,6 @@
 (1,14): unexpected-character-in-unquoted-attribute-value
 (1,15): expected-doctype-but-got-start-tag
 (1,15): expected-closing-tag-but-got-eof
-#new-errors
-(1:10) unexpected-character-in-unquoted-attribute-value
-(1:14) unexpected-character-in-unquoted-attribute-value
 #document
 | <html>
 |   <head>
@@ -47,8 +42,6 @@
 (1,7): invalid-character-in-attribute-name
 (1,14): expected-doctype-but-got-start-tag
 (1,14): expected-closing-tag-but-got-eof
-#new-errors
-(1:7) unexpected-character-in-attribute-name
 #document
 | <html>
 |   <head>
@@ -131,8 +124,6 @@
 #errors
 (1,1): expected-tag-name-but-got-question-mark
 (1,47): expected-doctype-but-got-eof
-#new-errors
-(1:2) unexpected-question-mark-instead-of-tag-name
 #document
 | <!-- ?import namespace="foo" implementation="#bar" -->
 | <html>
@@ -155,8 +146,6 @@
 #errors
 (1,2): expected-dashes-or-doctype
 (1,13): expected-doctype-but-got-eof
-#new-errors
-(1:9) cdata-in-html-content
 #document
 | <!-- [CDATA[x]] -->
 | <html>
diff --git a/validator/htmlparser/testdata/tree-construction/inbody01.dat b/validator/cpp/htmlparser/testdata/tree-construction/inbody01.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/inbody01.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/inbody01.dat
diff --git a/validator/htmlparser/testdata/tree-construction/isindex.dat b/validator/cpp/htmlparser/testdata/tree-construction/isindex.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/isindex.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/isindex.dat
diff --git a/validator/htmlparser/testdata/tree-construction/main-element.dat b/validator/cpp/htmlparser/testdata/tree-construction/main-element.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/main-element.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/main-element.dat
diff --git a/validator/htmlparser/testdata/tree-construction/math.dat b/validator/cpp/htmlparser/testdata/tree-construction/math.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/math.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/math.dat
diff --git a/validator/cpp/htmlparser/testdata/tree-construction/menuitem-element.dat b/validator/cpp/htmlparser/testdata/tree-construction/menuitem-element.dat
new file mode 100644
index 0000000000000..03b5d3eda13ac
--- /dev/null
+++ b/validator/cpp/htmlparser/testdata/tree-construction/menuitem-element.dat
@@ -0,0 +1,229 @@
+#data
+<menuitem>
+#errors
+10: Start tag seen without seeing a doctype first. Expected “<!DOCTYPE html>”.
+#document
+| <html>
+|   <head>
+|   <body>
+|     <menuitem>
+
+#data
+</menuitem>
+#errors
+11: End tag seen without seeing a doctype first. Expected “<!DOCTYPE html>”.
+11: Stray end tag “menuitem”.
+#document
+| <html>
+|   <head>
+|   <body>
+
+#data
+<!DOCTYPE html><body><menuitem>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <menuitem>
+|       "A"
+
+#data
+<!DOCTYPE html><body><menuitem>A<menuitem>B
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <menuitem>
+|       "A"
+|     <menuitem>
+|       "B"
+
+#data
+<!DOCTYPE html><body><menuitem>A<menu>B</menu>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <menuitem>
+|       "A"
+|     <menu>
+|       "B"
+
+#data
+<!DOCTYPE html><body><menuitem>A<hr>B
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <menuitem>
+|       "A"
+|     <hr>
+|     "B"
+
+#data
+<!DOCTYPE html><li><menuitem><li>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <li>
+|       <menuitem>
+|     <li>
+
+#data
+<!DOCTYPE html><menuitem><p></menuitem>x
+#errors
+39: Stray end tag “menuitem”.
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <menuitem>
+|       <p>
+|         "x"
+
+#data
+<!DOCTYPE html><p><b></p><menuitem>
+#errors
+25: End tag “p” seen, but there were open elements.
+21: Unclosed element “b”.
+35: End of file seen and there were open elements.
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|     <b>
+|       <menuitem>
+
+#data
+<!DOCTYPE html><menuitem><asdf></menuitem>x
+#errors
+40: End tag “menuitem” seen, but there were open elements.
+31: Unclosed element “adsf”.
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <menuitem>
+|       <adsf>
+|     "x"
+
+#data
+<!DOCTYPE html></menuitem>
+#errors
+26: Stray end tag “menuitem”.
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+
+#data
+<!DOCTYPE html><html></menuitem>
+#errors
+26: Stray end tag “menuitem”.
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+
+#data
+<!DOCTYPE html><head></menuitem>
+#errors
+26: Stray end tag “menuitem”.
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+
+#data
+<!DOCTYPE html><select><menuitem></select>
+#errors
+33: Stray start tag “menuitem”.
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <select>
+
+#data
+<!DOCTYPE html><option><menuitem>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <option>
+|       <menuitem>
+
+#data
+<!DOCTYPE html><menuitem><option>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <menuitem>
+|       <option>
+
+#data
+<!DOCTYPE html><menuitem></body>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <menuitem>
+
+#data
+<!DOCTYPE html><menuitem></html>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <menuitem>
+
+#data
+<!DOCTYPE html><menuitem><p>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <menuitem>
+|       <p>
+
+#data
+<!DOCTYPE html><menuitem><li>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <menuitem>
+|       <li>
diff --git a/validator/htmlparser/testdata/tree-construction/namespace-sensitivity.dat b/validator/cpp/htmlparser/testdata/tree-construction/namespace-sensitivity.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/namespace-sensitivity.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/namespace-sensitivity.dat
diff --git a/validator/htmlparser/testdata/tree-construction/noscript01.dat b/validator/cpp/htmlparser/testdata/tree-construction/noscript01.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/noscript01.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/noscript01.dat
diff --git a/validator/htmlparser/testdata/tree-construction/pending-spec-changes-plain-text-unsafe.dat b/validator/cpp/htmlparser/testdata/tree-construction/pending-spec-changes-plain-text-unsafe.dat
similarity index 88%
rename from validator/htmlparser/testdata/tree-construction/pending-spec-changes-plain-text-unsafe.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/pending-spec-changes-plain-text-unsafe.dat
index 2c546d40b8b1d..3ee8cec904f90 100644
Binary files a/validator/htmlparser/testdata/tree-construction/pending-spec-changes-plain-text-unsafe.dat and b/validator/cpp/htmlparser/testdata/tree-construction/pending-spec-changes-plain-text-unsafe.dat differ
diff --git a/validator/htmlparser/testdata/tree-construction/pending-spec-changes.dat b/validator/cpp/htmlparser/testdata/tree-construction/pending-spec-changes.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/pending-spec-changes.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/pending-spec-changes.dat
diff --git a/validator/htmlparser/testdata/tree-construction/plain-text-unsafe.dat b/validator/cpp/htmlparser/testdata/tree-construction/plain-text-unsafe.dat
similarity index 84%
rename from validator/htmlparser/testdata/tree-construction/plain-text-unsafe.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/plain-text-unsafe.dat
index dfb5cb6329222..f40dd57607a3b 100644
Binary files a/validator/htmlparser/testdata/tree-construction/plain-text-unsafe.dat and b/validator/cpp/htmlparser/testdata/tree-construction/plain-text-unsafe.dat differ
diff --git a/validator/htmlparser/testdata/tree-construction/ruby.dat b/validator/cpp/htmlparser/testdata/tree-construction/ruby.dat
similarity index 98%
rename from validator/htmlparser/testdata/tree-construction/ruby.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/ruby.dat
index 696782f04a750..1ca8016cf13b3 100644
--- a/validator/htmlparser/testdata/tree-construction/ruby.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/ruby.dat
@@ -58,7 +58,6 @@
 <html><ruby>a<rb>b<span></ruby></html>
 #errors
 (1,6): expected-doctype-but-got-start-tag
-(1,31): unexpected-end-tag
 #document
 | <html>
 |   <head>
@@ -129,7 +128,6 @@
 <html><ruby>a<rt>b<span></ruby></html>
 #errors
 (1,6): expected-doctype-but-got-start-tag
-(1,31): unexpected-end-tag
 #document
 | <html>
 |   <head>
@@ -273,7 +271,6 @@
 <html><ruby>a<rp>b<span></ruby></html>
 #errors
 (1,6): expected-doctype-but-got-start-tag
-(1,31): unexpected-end-tag
 #document
 | <html>
 |   <head>
diff --git a/validator/htmlparser/testdata/tree-construction/scriptdata01.dat b/validator/cpp/htmlparser/testdata/tree-construction/scriptdata01.dat
similarity index 92%
rename from validator/htmlparser/testdata/tree-construction/scriptdata01.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/scriptdata01.dat
index e57085899f8f0..ac698d282ff85 100644
--- a/validator/htmlparser/testdata/tree-construction/scriptdata01.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/scriptdata01.dat
@@ -40,8 +40,6 @@ FOO<script></script/>BAR
 #errors
 (1,3): expected-doctype-but-got-chars
 (1,21): self-closing-flag-on-end-tag
-#new-errors
-(1:21) end-tag-with-trailing-solidus
 #document
 | <html>
 |   <head>
@@ -55,8 +53,6 @@ FOO<script></script/ >BAR
 #errors
 (1,3): expected-doctype-but-got-chars
 (1,20): unexpected-character-after-solidus-in-tag
-#new-errors
-(1:21) unexpected-solidus-in-tag
 #document
 | <html>
 |   <head>
@@ -84,8 +80,6 @@ FOO<script></script foo=">" dd>BAR
 #errors
 (1,3): expected-doctype-but-got-chars
 (1,31): attributes-in-end-tag
-#new-errors
-(1:31) end-tag-with-attributes
 #document
 | <html>
 |   <head>
@@ -217,8 +211,6 @@ FOO<script type="text/plain">'<!-- <sCrIpt>'</script>BAR
 (1,3): expected-doctype-but-got-chars
 (1,56): expected-script-data-but-got-eof
 (1,56): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:57) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -234,8 +226,6 @@ FOO<script type="text/plain">'<!-- <sCrIpt> -'</script>BAR
 (1,3): expected-doctype-but-got-chars
 (1,58): expected-script-data-but-got-eof
 (1,58): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:59) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -251,8 +241,6 @@ FOO<script type="text/plain">'<!-- <sCrIpt> --'</script>BAR
 (1,3): expected-doctype-but-got-chars
 (1,59): expected-script-data-but-got-eof
 (1,59): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:60) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -281,8 +269,6 @@ FOO<script type="text/plain">'<!-- <sCrIpt> --!>'</script>BAR
 (1,3): expected-doctype-but-got-chars
 (1,61): expected-script-data-but-got-eof
 (1,61): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:62) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -298,8 +284,6 @@ FOO<script type="text/plain">'<!-- <sCrIpt> -- >'</script>BAR
 (1,3): expected-doctype-but-got-chars
 (1,61): expected-script-data-but-got-eof
 (1,61): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:62) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -315,8 +299,6 @@ FOO<script type="text/plain">'<!-- <sCrIpt '</script>BAR
 (1,3): expected-doctype-but-got-chars
 (1,56): expected-script-data-but-got-eof
 (1,56): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:57) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -332,8 +314,6 @@ FOO<script type="text/plain">'<!-- <sCrIpt/'</script>BAR
 (1,3): expected-doctype-but-got-chars
 (1,56): expected-script-data-but-got-eof
 (1,56): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:57) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
diff --git a/validator/cpp/htmlparser/testdata/tree-construction/scripted/adoption01.dat b/validator/cpp/htmlparser/testdata/tree-construction/scripted/adoption01.dat
new file mode 100644
index 0000000000000..4e08d0e84a073
--- /dev/null
+++ b/validator/cpp/htmlparser/testdata/tree-construction/scripted/adoption01.dat
@@ -0,0 +1,15 @@
+#data
+<p><b id="A"><script>document.getElementById("A").id = "B"</script></p>TEXT</b>
+#errors
+#document
+| <html>
+|   <head>
+|   <body>
+|     <p>
+|       <b>
+|         id="B"
+|         <script>
+|           "document.getElementById("A").id = "B""
+|     <b>
+|       id="A"
+|       "TEXT"
diff --git a/validator/htmlparser/testdata/tree-construction/scripted/ark.dat b/validator/cpp/htmlparser/testdata/tree-construction/scripted/ark.dat
similarity index 98%
rename from validator/htmlparser/testdata/tree-construction/scripted/ark.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/scripted/ark.dat
index feebeadba1d8a..acbac41df1617 100644
--- a/validator/htmlparser/testdata/tree-construction/scripted/ark.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/scripted/ark.dat
@@ -1,7 +1,6 @@
 #data
 <p><font size=4><font size=4><font size=4><script>document.getElementsByTagName("font")[2].setAttribute("size", "5");</script><font size=4><p>X
 #errors
-#script-on
 #document
 | <html>
 |   <head>
diff --git a/validator/cpp/htmlparser/testdata/tree-construction/scripted/webkit01.dat b/validator/cpp/htmlparser/testdata/tree-construction/scripted/webkit01.dat
new file mode 100644
index 0000000000000..ef4a41ca00ba2
--- /dev/null
+++ b/validator/cpp/htmlparser/testdata/tree-construction/scripted/webkit01.dat
@@ -0,0 +1,28 @@
+#data
+1<script>document.write("2")</script>3
+#errors
+#document
+| <html>
+|   <head>
+|   <body>
+|     "1"
+|     <script>
+|       "document.write("2")"
+|     "23"
+
+#data
+1<script>document.write("<script>document.write('2')</scr"+ "ipt><script>document.write('3')</scr" + "ipt>")</script>4
+#errors
+#document
+| <html>
+|   <head>
+|   <body>
+|     "1"
+|     <script>
+|       "document.write("<script>document.write('2')</scr"+ "ipt><script>document.write('3')</scr" + "ipt>")"
+|     <script>
+|       "document.write('2')"
+|     "2"
+|     <script>
+|       "document.write('3')"
+|     "34"
diff --git a/validator/htmlparser/testdata/tree-construction/tables01.dat b/validator/cpp/htmlparser/testdata/tree-construction/tables01.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tables01.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tables01.dat
diff --git a/validator/htmlparser/testdata/tree-construction/template.dat b/validator/cpp/htmlparser/testdata/tree-construction/template.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/template.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/template.dat
diff --git a/validator/htmlparser/testdata/tree-construction/tests1.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests1.dat
similarity index 97%
rename from validator/htmlparser/testdata/tree-construction/tests1.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests1.dat
index 1c36c1b87dd2e..d6726e305ce0a 100644
--- a/validator/htmlparser/testdata/tree-construction/tests1.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests1.dat
@@ -327,9 +327,6 @@ Line1<br>Line2<br>Line3<br>Line4
 (1,10): expected-doctype-but-got-start-tag
 (1,17): incorrect-comment
 (1,17): expected-closing-tag-but-got-eof
-#new-errors
-(1:5) abrupt-closing-of-empty-comment
-(1:17) abrupt-closing-of-empty-comment
 #document
 | <!--  -->
 | <html>
@@ -360,6 +357,7 @@ Line1<br>Line2<br>Line3<br>Line4
 (1,27): unexpected-select-in-select
 (1,39): unexpected-end-tag
 (1,48): unexpected-end-tag
+(1,49): expected-closing-tag-but-got-eof
 #document
 | <html>
 |   <head>
@@ -501,8 +499,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,1): expected-tag-name
 (1,1): expected-doctype-but-got-chars
-#new-errors
-(1:2) eof-before-tag-name
 #document
 | <html>
 |   <head>
@@ -514,8 +510,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,1): expected-tag-name
 (1,1): expected-doctype-but-got-chars
-#new-errors
-(1:2) invalid-first-character-of-tag-name
 #document
 | <html>
 |   <head>
@@ -527,8 +521,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,2): expected-closing-tag-but-got-eof
 (1,2): expected-doctype-but-got-chars
-#new-errors
-(1:3) eof-before-tag-name
 #document
 | <html>
 |   <head>
@@ -540,8 +532,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,2): expected-closing-tag-but-got-char
 (1,3): expected-doctype-but-got-eof
-#new-errors
-(1:3) invalid-first-character-of-tag-name
 #document
 | <!-- # -->
 | <html>
@@ -553,8 +543,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,1): expected-tag-name-but-got-question-mark
 (1,2): expected-doctype-but-got-eof
-#new-errors
-(1:2) unexpected-question-mark-instead-of-tag-name
 #document
 | <!-- ? -->
 | <html>
@@ -566,8 +554,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,1): expected-tag-name-but-got-question-mark
 (1,3): expected-doctype-but-got-eof
-#new-errors
-(1:2) unexpected-question-mark-instead-of-tag-name
 #document
 | <!-- ?# -->
 | <html>
@@ -579,8 +565,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,2): expected-dashes-or-doctype
 (1,2): expected-doctype-but-got-eof
-#new-errors
-(1:3) incorrectly-opened-comment
 #document
 | <!--  -->
 | <html>
@@ -592,8 +576,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,2): expected-dashes-or-doctype
 (1,3): expected-doctype-but-got-eof
-#new-errors
-(1:3) incorrectly-opened-comment
 #document
 | <!-- # -->
 | <html>
@@ -605,8 +587,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,1): expected-tag-name-but-got-question-mark
 (1,11): expected-doctype-but-got-eof
-#new-errors
-(1:2) unexpected-question-mark-instead-of-tag-name
 #document
 | <!-- ?COMMENT? -->
 | <html>
@@ -618,8 +598,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,2): expected-dashes-or-doctype
 (1,10): expected-doctype-but-got-eof
-#new-errors
-(1:3) incorrectly-opened-comment
 #document
 | <!-- COMMENT -->
 | <html>
@@ -631,8 +609,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,2): expected-closing-tag-but-got-char
 (1,12): expected-doctype-but-got-eof
-#new-errors
-(1:3) invalid-first-character-of-tag-name
 #document
 | <!--  COMMENT  -->
 | <html>
@@ -644,8 +620,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,1): expected-tag-name-but-got-question-mark
 (1,13): expected-doctype-but-got-eof
-#new-errors
-(1:2) unexpected-question-mark-instead-of-tag-name
 #document
 | <!-- ?COM--MENT? -->
 | <html>
@@ -657,8 +631,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,2): expected-dashes-or-doctype
 (1,12): expected-doctype-but-got-eof
-#new-errors
-(1:3) incorrectly-opened-comment
 #document
 | <!-- COM--MENT -->
 | <html>
@@ -670,8 +642,6 @@ Line1<br>Line2<br>Line3<br>Line4
 #errors
 (1,2): expected-closing-tag-but-got-char
 (1,14): expected-doctype-but-got-eof
-#new-errors
-(1:3) invalid-first-character-of-tag-name
 #document
 | <!--  COM--MENT  -->
 | <html>
@@ -1569,6 +1539,7 @@ Line1<br>Line2<br>Line3<br>Line4
 (1,27): unexpected-select-in-select
 (1,39): unexpected-end-tag
 (1,48): unexpected-end-tag
+(1,48): expected-closing-tag-but-got-eof
 #document
 | <html>
 |   <head>
diff --git a/validator/htmlparser/testdata/tree-construction/tests10.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests10.dat
similarity index 99%
rename from validator/htmlparser/testdata/tree-construction/tests10.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests10.dat
index f84e2d546fab6..3e9a9f19b9cc7 100644
--- a/validator/htmlparser/testdata/tree-construction/tests10.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests10.dat
@@ -12,8 +12,6 @@
 <!DOCTYPE html><svg></svg><![CDATA[a]]>
 #errors
 (1,28) expected-dashes-or-doctype
-#new-errors
-(1:35) cdata-in-html-content
 #document
 | <!DOCTYPE html>
 | <html>
diff --git a/validator/cpp/htmlparser/testdata/tree-construction/tests11.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests11.dat
new file mode 100644
index 0000000000000..350e640544e3e
--- /dev/null
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests11.dat
@@ -0,0 +1,467 @@
+#data
+<!DOCTYPE html><body><svg attributeName='' attributeType='' baseFrequency='' baseProfile='' calcMode='' clipPathUnits='' diffuseConstant='' edgeMode='' filterUnits='' glyphRef='' gradientTransform='' gradientUnits='' kernelMatrix='' kernelUnitLength='' keyPoints='' keySplines='' keyTimes='' lengthAdjust='' limitingConeAngle='' markerHeight='' markerUnits='' markerWidth='' maskContentUnits='' maskUnits='' numOctaves='' pathLength='' patternContentUnits='' patternTransform='' patternUnits='' pointsAtX='' pointsAtY='' pointsAtZ='' preserveAlpha='' preserveAspectRatio='' primitiveUnits='' refX='' refY='' repeatCount='' repeatDur='' requiredExtensions='' requiredFeatures='' specularConstant='' specularExponent='' spreadMethod='' startOffset='' stdDeviation='' stitchTiles='' surfaceScale='' systemLanguage='' tableValues='' targetX='' targetY='' textLength='' viewBox='' viewTarget='' xChannelSelector='' yChannelSelector='' zoomAndPan=''></svg>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <svg svg>
+|       attributeName=""
+|       attributeType=""
+|       baseFrequency=""
+|       baseProfile=""
+|       calcMode=""
+|       clipPathUnits=""
+|       diffuseConstant=""
+|       edgeMode=""
+|       filterUnits=""
+|       glyphRef=""
+|       gradientTransform=""
+|       gradientUnits=""
+|       kernelMatrix=""
+|       kernelUnitLength=""
+|       keyPoints=""
+|       keySplines=""
+|       keyTimes=""
+|       lengthAdjust=""
+|       limitingConeAngle=""
+|       markerHeight=""
+|       markerUnits=""
+|       markerWidth=""
+|       maskContentUnits=""
+|       maskUnits=""
+|       numOctaves=""
+|       pathLength=""
+|       patternContentUnits=""
+|       patternTransform=""
+|       patternUnits=""
+|       pointsAtX=""
+|       pointsAtY=""
+|       pointsAtZ=""
+|       preserveAlpha=""
+|       preserveAspectRatio=""
+|       primitiveUnits=""
+|       refX=""
+|       refY=""
+|       repeatCount=""
+|       repeatDur=""
+|       requiredExtensions=""
+|       requiredFeatures=""
+|       specularConstant=""
+|       specularExponent=""
+|       spreadMethod=""
+|       startOffset=""
+|       stdDeviation=""
+|       stitchTiles=""
+|       surfaceScale=""
+|       systemLanguage=""
+|       tableValues=""
+|       targetX=""
+|       targetY=""
+|       textLength=""
+|       viewBox=""
+|       viewTarget=""
+|       xChannelSelector=""
+|       yChannelSelector=""
+|       zoomAndPan=""
+
+#data
+<!DOCTYPE html><BODY><SVG ATTRIBUTENAME='' ATTRIBUTETYPE='' BASEFREQUENCY='' BASEPROFILE='' CALCMODE='' CLIPPATHUNITS='' DIFFUSECONSTANT='' EDGEMODE='' FILTERUNITS='' GLYPHREF='' GRADIENTTRANSFORM='' GRADIENTUNITS='' KERNELMATRIX='' KERNELUNITLENGTH='' KEYPOINTS='' KEYSPLINES='' KEYTIMES='' LENGTHADJUST='' LIMITINGCONEANGLE='' MARKERHEIGHT='' MARKERUNITS='' MARKERWIDTH='' MASKCONTENTUNITS='' MASKUNITS='' NUMOCTAVES='' PATHLENGTH='' PATTERNCONTENTUNITS='' PATTERNTRANSFORM='' PATTERNUNITS='' POINTSATX='' POINTSATY='' POINTSATZ='' PRESERVEALPHA='' PRESERVEASPECTRATIO='' PRIMITIVEUNITS='' REFX='' REFY='' REPEATCOUNT='' REPEATDUR='' REQUIREDEXTENSIONS='' REQUIREDFEATURES='' SPECULARCONSTANT='' SPECULAREXPONENT='' SPREADMETHOD='' STARTOFFSET='' STDDEVIATION='' STITCHTILES='' SURFACESCALE='' SYSTEMLANGUAGE='' TABLEVALUES='' TARGETX='' TARGETY='' TEXTLENGTH='' VIEWBOX='' VIEWTARGET='' XCHANNELSELECTOR='' YCHANNELSELECTOR='' ZOOMANDPAN=''></SVG>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <svg svg>
+|       attributeName=""
+|       attributeType=""
+|       baseFrequency=""
+|       baseProfile=""
+|       calcMode=""
+|       clipPathUnits=""
+|       diffuseConstant=""
+|       edgeMode=""
+|       filterUnits=""
+|       glyphRef=""
+|       gradientTransform=""
+|       gradientUnits=""
+|       kernelMatrix=""
+|       kernelUnitLength=""
+|       keyPoints=""
+|       keySplines=""
+|       keyTimes=""
+|       lengthAdjust=""
+|       limitingConeAngle=""
+|       markerHeight=""
+|       markerUnits=""
+|       markerWidth=""
+|       maskContentUnits=""
+|       maskUnits=""
+|       numOctaves=""
+|       pathLength=""
+|       patternContentUnits=""
+|       patternTransform=""
+|       patternUnits=""
+|       pointsAtX=""
+|       pointsAtY=""
+|       pointsAtZ=""
+|       preserveAlpha=""
+|       preserveAspectRatio=""
+|       primitiveUnits=""
+|       refX=""
+|       refY=""
+|       repeatCount=""
+|       repeatDur=""
+|       requiredExtensions=""
+|       requiredFeatures=""
+|       specularConstant=""
+|       specularExponent=""
+|       spreadMethod=""
+|       startOffset=""
+|       stdDeviation=""
+|       stitchTiles=""
+|       surfaceScale=""
+|       systemLanguage=""
+|       tableValues=""
+|       targetX=""
+|       targetY=""
+|       textLength=""
+|       viewBox=""
+|       viewTarget=""
+|       xChannelSelector=""
+|       yChannelSelector=""
+|       zoomAndPan=""
+
+#data
+<!DOCTYPE html><body><svg attributename='' attributetype='' basefrequency='' baseprofile='' calcmode='' clippathunits='' diffuseconstant='' edgemode='' filterunits='' filterres='' glyphref='' gradienttransform='' gradientunits='' kernelmatrix='' kernelunitlength='' keypoints='' keysplines='' keytimes='' lengthadjust='' limitingconeangle='' markerheight='' markerunits='' markerwidth='' maskcontentunits='' maskunits='' numoctaves='' pathlength='' patterncontentunits='' patterntransform='' patternunits='' pointsatx='' pointsaty='' pointsatz='' preservealpha='' preserveaspectratio='' primitiveunits='' refx='' refy='' repeatcount='' repeatdur='' requiredextensions='' requiredfeatures='' specularconstant='' specularexponent='' spreadmethod='' startoffset='' stddeviation='' stitchtiles='' surfacescale='' systemlanguage='' tablevalues='' targetx='' targety='' textlength='' viewbox='' viewtarget='' xchannelselector='' ychannelselector='' zoomandpan=''></svg>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <svg svg>
+|       attributeName=""
+|       attributeType=""
+|       baseFrequency=""
+|       baseProfile=""
+|       calcMode=""
+|       clipPathUnits=""
+|       diffuseConstant=""
+|       edgeMode=""
+|       filterRes=""
+|       filterUnits=""
+|       glyphRef=""
+|       gradientTransform=""
+|       gradientUnits=""
+|       kernelMatrix=""
+|       kernelUnitLength=""
+|       keyPoints=""
+|       keySplines=""
+|       keyTimes=""
+|       lengthAdjust=""
+|       limitingConeAngle=""
+|       markerHeight=""
+|       markerUnits=""
+|       markerWidth=""
+|       maskContentUnits=""
+|       maskUnits=""
+|       numOctaves=""
+|       pathLength=""
+|       patternContentUnits=""
+|       patternTransform=""
+|       patternUnits=""
+|       pointsAtX=""
+|       pointsAtY=""
+|       pointsAtZ=""
+|       preserveAlpha=""
+|       preserveAspectRatio=""
+|       primitiveUnits=""
+|       refX=""
+|       refY=""
+|       repeatCount=""
+|       repeatDur=""
+|       requiredExtensions=""
+|       requiredFeatures=""
+|       specularConstant=""
+|       specularExponent=""
+|       spreadMethod=""
+|       startOffset=""
+|       stdDeviation=""
+|       stitchTiles=""
+|       surfaceScale=""
+|       systemLanguage=""
+|       tableValues=""
+|       targetX=""
+|       targetY=""
+|       textLength=""
+|       viewBox=""
+|       viewTarget=""
+|       xChannelSelector=""
+|       yChannelSelector=""
+|       zoomAndPan=""
+
+#data
+<!DOCTYPE html><body><math attributeName='' attributeType='' baseFrequency='' baseProfile='' calcMode='' clipPathUnits='' diffuseConstant='' edgeMode='' filterUnits='' glyphRef='' gradientTransform='' gradientUnits='' kernelMatrix='' kernelUnitLength='' keyPoints='' keySplines='' keyTimes='' lengthAdjust='' limitingConeAngle='' markerHeight='' markerUnits='' markerWidth='' maskContentUnits='' maskUnits='' numOctaves='' pathLength='' patternContentUnits='' patternTransform='' patternUnits='' pointsAtX='' pointsAtY='' pointsAtZ='' preserveAlpha='' preserveAspectRatio='' primitiveUnits='' refX='' refY='' repeatCount='' repeatDur='' requiredExtensions='' requiredFeatures='' specularConstant='' specularExponent='' spreadMethod='' startOffset='' stdDeviation='' stitchTiles='' surfaceScale='' systemLanguage='' tableValues='' targetX='' targetY='' textLength='' viewBox='' viewTarget='' xChannelSelector='' yChannelSelector='' zoomAndPan=''></math>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <math math>
+|       attributename=""
+|       attributetype=""
+|       basefrequency=""
+|       baseprofile=""
+|       calcmode=""
+|       clippathunits=""
+|       diffuseconstant=""
+|       edgemode=""
+|       filterunits=""
+|       glyphref=""
+|       gradienttransform=""
+|       gradientunits=""
+|       kernelmatrix=""
+|       kernelunitlength=""
+|       keypoints=""
+|       keysplines=""
+|       keytimes=""
+|       lengthadjust=""
+|       limitingconeangle=""
+|       markerheight=""
+|       markerunits=""
+|       markerwidth=""
+|       maskcontentunits=""
+|       maskunits=""
+|       numoctaves=""
+|       pathlength=""
+|       patterncontentunits=""
+|       patterntransform=""
+|       patternunits=""
+|       pointsatx=""
+|       pointsaty=""
+|       pointsatz=""
+|       preservealpha=""
+|       preserveaspectratio=""
+|       primitiveunits=""
+|       refx=""
+|       refy=""
+|       repeatcount=""
+|       repeatdur=""
+|       requiredextensions=""
+|       requiredfeatures=""
+|       specularconstant=""
+|       specularexponent=""
+|       spreadmethod=""
+|       startoffset=""
+|       stddeviation=""
+|       stitchtiles=""
+|       surfacescale=""
+|       systemlanguage=""
+|       tablevalues=""
+|       targetx=""
+|       targety=""
+|       textlength=""
+|       viewbox=""
+|       viewtarget=""
+|       xchannelselector=""
+|       ychannelselector=""
+|       zoomandpan=""
+
+#data
+<!DOCTYPE html><body><svg><altGlyph /><altGlyphDef /><altGlyphItem /><animateColor /><animateMotion /><animateTransform /><clipPath /><feBlend /><feColorMatrix /><feComponentTransfer /><feComposite /><feConvolveMatrix /><feDiffuseLighting /><feDisplacementMap /><feDistantLight /><feFlood /><feFuncA /><feFuncB /><feFuncG /><feFuncR /><feGaussianBlur /><feImage /><feMerge /><feMergeNode /><feMorphology /><feOffset /><fePointLight /><feSpecularLighting /><feSpotLight /><feTile /><feTurbulence /><foreignObject /><glyphRef /><linearGradient /><radialGradient /><textPath /></svg>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <svg svg>
+|       <svg altGlyph>
+|       <svg altGlyphDef>
+|       <svg altGlyphItem>
+|       <svg animateColor>
+|       <svg animateMotion>
+|       <svg animateTransform>
+|       <svg clipPath>
+|       <svg feBlend>
+|       <svg feColorMatrix>
+|       <svg feComponentTransfer>
+|       <svg feComposite>
+|       <svg feConvolveMatrix>
+|       <svg feDiffuseLighting>
+|       <svg feDisplacementMap>
+|       <svg feDistantLight>
+|       <svg feFlood>
+|       <svg feFuncA>
+|       <svg feFuncB>
+|       <svg feFuncG>
+|       <svg feFuncR>
+|       <svg feGaussianBlur>
+|       <svg feImage>
+|       <svg feMerge>
+|       <svg feMergeNode>
+|       <svg feMorphology>
+|       <svg feOffset>
+|       <svg fePointLight>
+|       <svg feSpecularLighting>
+|       <svg feSpotLight>
+|       <svg feTile>
+|       <svg feTurbulence>
+|       <svg foreignObject>
+|       <svg glyphRef>
+|       <svg linearGradient>
+|       <svg radialGradient>
+|       <svg textPath>
+
+#data
+<!DOCTYPE html><body><svg><altglyph /><altglyphdef /><altglyphitem /><animatecolor /><animatemotion /><animatetransform /><clippath /><feblend /><fecolormatrix /><fecomponenttransfer /><fecomposite /><feconvolvematrix /><fediffuselighting /><fedisplacementmap /><fedistantlight /><feflood /><fefunca /><fefuncb /><fefuncg /><fefuncr /><fegaussianblur /><feimage /><femerge /><femergenode /><femorphology /><feoffset /><fepointlight /><fespecularlighting /><fespotlight /><fetile /><feturbulence /><foreignobject /><glyphref /><lineargradient /><radialgradient /><textpath /></svg>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <svg svg>
+|       <svg altGlyph>
+|       <svg altGlyphDef>
+|       <svg altGlyphItem>
+|       <svg animateColor>
+|       <svg animateMotion>
+|       <svg animateTransform>
+|       <svg clipPath>
+|       <svg feBlend>
+|       <svg feColorMatrix>
+|       <svg feComponentTransfer>
+|       <svg feComposite>
+|       <svg feConvolveMatrix>
+|       <svg feDiffuseLighting>
+|       <svg feDisplacementMap>
+|       <svg feDistantLight>
+|       <svg feFlood>
+|       <svg feFuncA>
+|       <svg feFuncB>
+|       <svg feFuncG>
+|       <svg feFuncR>
+|       <svg feGaussianBlur>
+|       <svg feImage>
+|       <svg feMerge>
+|       <svg feMergeNode>
+|       <svg feMorphology>
+|       <svg feOffset>
+|       <svg fePointLight>
+|       <svg feSpecularLighting>
+|       <svg feSpotLight>
+|       <svg feTile>
+|       <svg feTurbulence>
+|       <svg foreignObject>
+|       <svg glyphRef>
+|       <svg linearGradient>
+|       <svg radialGradient>
+|       <svg textPath>
+
+#data
+<!DOCTYPE html><BODY><SVG><ALTGLYPH /><ALTGLYPHDEF /><ALTGLYPHITEM /><ANIMATECOLOR /><ANIMATEMOTION /><ANIMATETRANSFORM /><CLIPPATH /><FEBLEND /><FECOLORMATRIX /><FECOMPONENTTRANSFER /><FECOMPOSITE /><FECONVOLVEMATRIX /><FEDIFFUSELIGHTING /><FEDISPLACEMENTMAP /><FEDISTANTLIGHT /><FEFLOOD /><FEFUNCA /><FEFUNCB /><FEFUNCG /><FEFUNCR /><FEGAUSSIANBLUR /><FEIMAGE /><FEMERGE /><FEMERGENODE /><FEMORPHOLOGY /><FEOFFSET /><FEPOINTLIGHT /><FESPECULARLIGHTING /><FESPOTLIGHT /><FETILE /><FETURBULENCE /><FOREIGNOBJECT /><GLYPHREF /><LINEARGRADIENT /><RADIALGRADIENT /><TEXTPATH /></SVG>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <svg svg>
+|       <svg altGlyph>
+|       <svg altGlyphDef>
+|       <svg altGlyphItem>
+|       <svg animateColor>
+|       <svg animateMotion>
+|       <svg animateTransform>
+|       <svg clipPath>
+|       <svg feBlend>
+|       <svg feColorMatrix>
+|       <svg feComponentTransfer>
+|       <svg feComposite>
+|       <svg feConvolveMatrix>
+|       <svg feDiffuseLighting>
+|       <svg feDisplacementMap>
+|       <svg feDistantLight>
+|       <svg feFlood>
+|       <svg feFuncA>
+|       <svg feFuncB>
+|       <svg feFuncG>
+|       <svg feFuncR>
+|       <svg feGaussianBlur>
+|       <svg feImage>
+|       <svg feMerge>
+|       <svg feMergeNode>
+|       <svg feMorphology>
+|       <svg feOffset>
+|       <svg fePointLight>
+|       <svg feSpecularLighting>
+|       <svg feSpotLight>
+|       <svg feTile>
+|       <svg feTurbulence>
+|       <svg foreignObject>
+|       <svg glyphRef>
+|       <svg linearGradient>
+|       <svg radialGradient>
+|       <svg textPath>
+
+#data
+<!DOCTYPE html><body><math><altGlyph /><altGlyphDef /><altGlyphItem /><animateColor /><animateMotion /><animateTransform /><clipPath /><feBlend /><feColorMatrix /><feComponentTransfer /><feComposite /><feConvolveMatrix /><feDiffuseLighting /><feDisplacementMap /><feDistantLight /><feFlood /><feFuncA /><feFuncB /><feFuncG /><feFuncR /><feGaussianBlur /><feImage /><feMerge /><feMergeNode /><feMorphology /><feOffset /><fePointLight /><feSpecularLighting /><feSpotLight /><feTile /><feTurbulence /><foreignObject /><glyphRef /><linearGradient /><radialGradient /><textPath /></math>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <math math>
+|       <math altglyph>
+|       <math altglyphdef>
+|       <math altglyphitem>
+|       <math animatecolor>
+|       <math animatemotion>
+|       <math animatetransform>
+|       <math clippath>
+|       <math feblend>
+|       <math fecolormatrix>
+|       <math fecomponenttransfer>
+|       <math fecomposite>
+|       <math feconvolvematrix>
+|       <math fediffuselighting>
+|       <math fedisplacementmap>
+|       <math fedistantlight>
+|       <math feflood>
+|       <math fefunca>
+|       <math fefuncb>
+|       <math fefuncg>
+|       <math fefuncr>
+|       <math fegaussianblur>
+|       <math feimage>
+|       <math femerge>
+|       <math femergenode>
+|       <math femorphology>
+|       <math feoffset>
+|       <math fepointlight>
+|       <math fespecularlighting>
+|       <math fespotlight>
+|       <math fetile>
+|       <math feturbulence>
+|       <math foreignobject>
+|       <math glyphref>
+|       <math lineargradient>
+|       <math radialgradient>
+|       <math textpath>
+
+#data
+<!DOCTYPE html><body><svg><solidColor /></svg>
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <svg svg>
+|       <svg solidcolor>
diff --git a/validator/htmlparser/testdata/tree-construction/tests12.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests12.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tests12.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests12.dat
diff --git a/validator/htmlparser/testdata/tree-construction/tests14.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests14.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tests14.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests14.dat
diff --git a/validator/htmlparser/testdata/tree-construction/tests15.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests15.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tests15.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests15.dat
diff --git a/validator/htmlparser/testdata/tree-construction/tests16.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests16.dat
similarity index 91%
rename from validator/htmlparser/testdata/tree-construction/tests16.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests16.dat
index cea7340a0cfa5..121915777619d 100644
--- a/validator/htmlparser/testdata/tree-construction/tests16.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests16.dat
@@ -122,8 +122,6 @@
 #errors
 (1,32): expected-attribute-name-but-got-eof
 (1,32): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:33) eof-in-tag
 #document
 | <!DOCTYPE html>
 | <html>
@@ -208,8 +206,6 @@
 #errors
 (1,32): expected-attribute-name-but-got-eof
 (1,32): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:33) eof-in-tag
 #document
 | <!DOCTYPE html>
 | <html>
@@ -220,7 +216,6 @@
 #data
 <!doctype html><script><!
 #errors
-(1,25): expected-script-data-but-got-eof
 (1,25): expected-named-closing-tag-but-got-eof
 #document
 | <!DOCTYPE html>
@@ -271,8 +266,6 @@
 #errors
 (1,27): expected-named-closing-tag-but-got-eof
 (1,27): unexpected-eof-in-text-mode
-#new-errors
-(1:28) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -286,8 +279,6 @@
 #errors
 (1,28): expected-named-closing-tag-but-got-eof
 (1,28): unexpected-eof-in-text-mode
-#new-errors
-(1:29) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -301,8 +292,6 @@
 #errors
 (1,28): expected-named-closing-tag-but-got-eof
 (1,28): unexpected-eof-in-text-mode
-#new-errors
-(1:29) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -316,8 +305,6 @@
 #errors
 (1,29): expected-named-closing-tag-but-got-eof
 (1,29): unexpected-eof-in-text-mode
-#new-errors
-(1:30) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -331,8 +318,6 @@
 #errors
 (1,29): expected-named-closing-tag-but-got-eof
 (1,29): unexpected-eof-in-text-mode
-#new-errors
-(1:30) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -346,8 +331,6 @@
 #errors
 (1,35): expected-named-closing-tag-but-got-eof
 (1,35): unexpected-eof-in-text-mode
-#new-errors
-(1:36) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -361,8 +344,6 @@
 #errors
 (1,36): expected-attribute-name-but-got-eof
 (1,36): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:37) eof-in-tag
 #document
 | <!DOCTYPE html>
 | <html>
@@ -376,8 +357,6 @@
 #errors
 (1,29): expected-named-closing-tag-but-got-eof
 (1,29): unexpected-eof-in-text-mode
-#new-errors
-(1:30) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -391,8 +370,6 @@
 #errors
 (1,34): expected-named-closing-tag-but-got-eof
 (1,34): unexpected-eof-in-text-mode
-#new-errors
-(1:35) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -406,8 +383,6 @@
 #errors
 (1,35): eof-in-script-in-script
 (1,35): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:36) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -421,8 +396,6 @@
 #errors
 (1,36): eof-in-script-in-script
 (1,36): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:37) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -436,8 +409,6 @@
 #errors
 (1,37): eof-in-script-in-script
 (1,37): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:38) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -451,8 +422,6 @@
 #errors
 (1,37): eof-in-script-in-script
 (1,37): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:38) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -466,8 +435,6 @@
 #errors
 (1,38): eof-in-script-in-script
 (1,38): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:39) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -481,8 +448,6 @@
 #errors
 (1,43): eof-in-script-in-script
 (1,43): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:44) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -496,8 +461,6 @@
 #errors
 (1,44): eof-in-script-in-script
 (1,44): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:45) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -511,8 +474,6 @@
 #errors
 (1,44): expected-named-closing-tag-but-got-eof
 (1,44): unexpected-eof-in-text-mode
-#new-errors
-(1:45) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -526,8 +487,6 @@
 #errors
 (1,44): expected-named-closing-tag-but-got-eof
 (1,44): unexpected-eof-in-text-mode
-#new-errors
-(1:45) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -541,8 +500,6 @@
 #errors
 (1,44): expected-named-closing-tag-but-got-eof
 (1,44): unexpected-eof-in-text-mode
-#new-errors
-(1:45) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -556,8 +513,6 @@
 #errors
 (1,45): expected-named-closing-tag-but-got-eof
 (1,45): unexpected-eof-in-text-mode
-#new-errors
-(1:46) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -571,8 +526,6 @@
 #errors
 (1,46): expected-named-closing-tag-but-got-eof
 (1,46): unexpected-eof-in-text-mode
-#new-errors
-(1:47) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -586,8 +539,6 @@
 #errors
 (1,46): expected-named-closing-tag-but-got-eof
 (1,46): unexpected-eof-in-text-mode
-#new-errors
-(1:47) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -601,8 +552,6 @@
 #errors
 (1,52): expected-named-closing-tag-but-got-eof
 (1,52): unexpected-eof-in-text-mode
-#new-errors
-(1:53) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -616,8 +565,6 @@
 #errors
 (1,53): expected-attribute-name-but-got-eof
 (1,53): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:54) eof-in-tag
 #document
 | <!DOCTYPE html>
 | <html>
@@ -631,8 +578,6 @@
 #errors
 (1,53): unexpected-EOF-after-solidus-in-tag
 (1,53): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:54) eof-in-tag
 #document
 | <!DOCTYPE html>
 | <html>
@@ -657,8 +602,6 @@
 #errors
 (1,36): eof-in-script-in-script
 (1,36): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:37) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -672,8 +615,6 @@
 #errors
 (1,37): eof-in-script-in-script
 (1,37): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:38) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -687,8 +628,6 @@
 #errors
 (1,37): eof-in-script-in-script
 (1,37): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:38) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -702,8 +641,6 @@
 #errors
 (1,37): eof-in-script-in-script
 (1,37): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:38) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -717,8 +654,6 @@
 #errors
 (1,38): eof-in-script-in-script
 (1,38): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:39) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -732,8 +667,6 @@
 #errors
 (1,38): eof-in-script-in-script
 (1,38): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:39) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -795,8 +728,6 @@
 #errors
 (1,47): expected-attribute-name-but-got-eof
 (1,47): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:48) eof-in-tag
 #document
 | <!DOCTYPE html>
 | <html>
@@ -810,8 +741,6 @@
 #errors
 (1,47): unexpected-EOF-after-solidus-in-tag
 (1,47): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:48) eof-in-tag
 #document
 | <!DOCTYPE html>
 | <html>
@@ -924,8 +853,6 @@
 #errors
 (1,49): expected-named-closing-tag-but-got-eof
 (1,49): unexpected-EOF-in-text-mode
-#new-errors
-(1:50) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -952,8 +879,6 @@
 #errors
 (1,57): expected-named-closing-tag-but-got-eof
 (1,57): unexpected-eof-in-text-mode
-#new-errors
-(1:58) eof-in-script-html-comment-like-text
 #document
 | <!DOCTYPE html>
 | <html>
@@ -1426,8 +1351,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,17): expected-attribute-name-but-got-eof
 (1,17): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:18) eof-in-tag
 #document
 | <html>
 |   <head>
@@ -1512,8 +1435,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,17): expected-attribute-name-but-got-eof
 (1,17): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:18) eof-in-tag
 #document
 | <html>
 |   <head>
@@ -1524,7 +1445,6 @@
 <script><!
 #errors
 (1,8): expected-doctype-but-got-start-tag
-(1,10): expected-script-data-but-got-eof
 (1,10): expected-named-closing-tag-but-got-eof
 #document
 | <html>
@@ -1575,8 +1495,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,12): expected-named-closing-tag-but-got-eof
 (1,12): unexpected-eof-in-text-mode
-#new-errors
-(1:13) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1590,8 +1508,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,13): expected-named-closing-tag-but-got-eof
 (1,13): unexpected-eof-in-text-mode
-#new-errors
-(1:14) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1605,8 +1521,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,13): expected-named-closing-tag-but-got-eof
 (1,13): unexpected-eof-in-text-mode
-#new-errors
-(1:14) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1620,8 +1534,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,14): expected-named-closing-tag-but-got-eof
 (1,14): unexpected-eof-in-text-mode
-#new-errors
-(1:15) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1635,8 +1547,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,14): expected-named-closing-tag-but-got-eof
 (1,14): unexpected-eof-in-text-mode
-#new-errors
-(1:15) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1650,8 +1560,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,20): expected-named-closing-tag-but-got-eof
 (1,20): unexpected-eof-in-text-mode
-#new-errors
-(1:21) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1665,8 +1573,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,21): expected-attribute-name-but-got-eof
 (1,21): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:22) eof-in-tag
 #document
 | <html>
 |   <head>
@@ -1680,8 +1586,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,14): expected-named-closing-tag-but-got-eof
 (1,14): unexpected-eof-in-text-mode
-#new-errors
-(1:15) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1695,8 +1599,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,19): expected-named-closing-tag-but-got-eof
 (1,19): unexpected-eof-in-text-mode
-#new-errors
-(1:20) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1710,8 +1612,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,20): eof-in-script-in-script
 (1,20): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:21) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1725,8 +1625,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,21): eof-in-script-in-script
 (1,21): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:22) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1740,8 +1638,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,22): eof-in-script-in-script
 (1,22): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:23) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1755,8 +1651,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,22): eof-in-script-in-script
 (1,22): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:23) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1770,8 +1664,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,23): eof-in-script-in-script
 (1,23): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:24) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1785,8 +1677,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,28): eof-in-script-in-script
 (1,28): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:29) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1800,8 +1690,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,29): eof-in-script-in-script
 (1,29): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:30) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1815,8 +1703,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,29): expected-named-closing-tag-but-got-eof
 (1,29): unexpected-eof-in-text-mode
-#new-errors
-(1:30) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1830,8 +1716,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,29): expected-named-closing-tag-but-got-eof
 (1,29): unexpected-eof-in-text-mode
-#new-errors
-(1:30) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1845,8 +1729,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,29): expected-named-closing-tag-but-got-eof
 (1,29): unexpected-eof-in-text-mode
-#new-errors
-(1:30) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1860,8 +1742,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,30): expected-named-closing-tag-but-got-eof
 (1,30): unexpected-eof-in-text-mode
-#new-errors
-(1:31) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1875,8 +1755,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,31): expected-named-closing-tag-but-got-eof
 (1,31): unexpected-eof-in-text-mode
-#new-errors
-(1:32) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1890,8 +1768,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,31): expected-named-closing-tag-but-got-eof
 (1,31): unexpected-eof-in-text-mode
-#new-errors
-(1:32) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1905,8 +1781,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,37): expected-named-closing-tag-but-got-eof
 (1,37): unexpected-eof-in-text-mode
-#new-errors
-(1:38) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1920,8 +1794,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,38): expected-attribute-name-but-got-eof
 (1,38): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:39) eof-in-tag
 #document
 | <html>
 |   <head>
@@ -1935,8 +1807,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,38): unexpected-EOF-after-solidus-in-tag
 (1,38): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:39) eof-in-tag
 #document
 | <html>
 |   <head>
@@ -1961,8 +1831,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,21): eof-in-script-in-script
 (1,21): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:22) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1976,8 +1844,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,22): eof-in-script-in-script
 (1,22): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:23) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -1991,8 +1857,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,22): eof-in-script-in-script
 (1,22): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:23) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -2006,8 +1870,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,23): eof-in-script-in-script
 (1,23): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:24) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -2069,8 +1931,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,32): expected-attribute-name-but-got-eof
 (1,32): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:33) eof-in-tag
 #document
 | <html>
 |   <head>
@@ -2084,8 +1944,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,32): unexpected-EOF-after-solidus-in-tag
 (1,32): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:33) eof-in-tag
 #document
 | <html>
 |   <head>
@@ -2198,8 +2056,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,34): expected-named-closing-tag-but-got-eof
 (1,34): unexpected-eof-in-text-mode
-#new-errors
-(1:35) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
@@ -2226,8 +2082,6 @@
 (1,8): expected-doctype-but-got-start-tag
 (1,42): expected-named-closing-tag-but-got-eof
 (1,42): unexpected-eof-in-text-mode
-#new-errors
-(1:43) eof-in-script-html-comment-like-text
 #document
 | <html>
 |   <head>
diff --git a/validator/htmlparser/testdata/tree-construction/tests17.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests17.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tests17.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests17.dat
diff --git a/validator/cpp/htmlparser/testdata/tree-construction/tests18.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests18.dat
new file mode 100644
index 0000000000000..926bccb3875d7
--- /dev/null
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests18.dat
@@ -0,0 +1,322 @@
+#data
+<!doctype html><plaintext></plaintext>
+#errors
+(1,38): expected-closing-tag-but-got-eof
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <plaintext>
+|       "</plaintext>"
+
+#data
+<!doctype html><table><plaintext></plaintext>
+#errors
+(1,33): foster-parenting-start-tag
+(1,34): foster-parenting-character
+(1,35): foster-parenting-character
+(1,36): foster-parenting-character
+(1,37): foster-parenting-character
+(1,38): foster-parenting-character
+(1,39): foster-parenting-character
+(1,40): foster-parenting-character
+(1,41): foster-parenting-character
+(1,42): foster-parenting-character
+(1,43): foster-parenting-character
+(1,44): foster-parenting-character
+(1,45): foster-parenting-character
+(1,45): eof-in-table
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <plaintext>
+|       "</plaintext>"
+|     <table>
+
+#data
+<!doctype html><table><tbody><plaintext></plaintext>
+#errors
+(1,40): foster-parenting-start-tag
+(1,41): foster-parenting-character
+(1,41): foster-parenting-character
+(1,41): foster-parenting-character
+(1,41): foster-parenting-character
+(1,41): foster-parenting-character
+(1,41): foster-parenting-character
+(1,41): foster-parenting-character
+(1,41): foster-parenting-character
+(1,41): foster-parenting-character
+(1,41): foster-parenting-character
+(1,41): foster-parenting-character
+(1,41): foster-parenting-character
+(1,52): eof-in-table
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <plaintext>
+|       "</plaintext>"
+|     <table>
+|       <tbody>
+
+#data
+<!doctype html><table><tbody><tr><plaintext></plaintext>
+#errors
+(1,44): foster-parenting-start-tag
+(1,45): foster-parenting-character
+(1,46): foster-parenting-character
+(1,47): foster-parenting-character
+(1,48): foster-parenting-character
+(1,49): foster-parenting-character
+(1,50): foster-parenting-character
+(1,51): foster-parenting-character
+(1,52): foster-parenting-character
+(1,53): foster-parenting-character
+(1,54): foster-parenting-character
+(1,55): foster-parenting-character
+(1,56): foster-parenting-character
+(1,56): eof-in-table
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <plaintext>
+|       "</plaintext>"
+|     <table>
+|       <tbody>
+|         <tr>
+
+#data
+<!doctype html><table><td><plaintext></plaintext>
+#errors
+(1,26): unexpected-cell-in-table-body
+(1,49): expected-closing-tag-but-got-eof
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <table>
+|       <tbody>
+|         <tr>
+|           <td>
+|             <plaintext>
+|               "</plaintext>"
+
+#data
+<!doctype html><table><caption><plaintext></plaintext>
+#errors
+(1,54): expected-closing-tag-but-got-eof
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <table>
+|       <caption>
+|         <plaintext>
+|           "</plaintext>"
+
+#data
+<!doctype html><table><tr><style></script></style>abc
+#errors
+(1,51): foster-parenting-character
+(1,52): foster-parenting-character
+(1,53): foster-parenting-character
+(1,53): eof-in-table
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     "abc"
+|     <table>
+|       <tbody>
+|         <tr>
+|           <style>
+|             "</script>"
+
+#data
+<!doctype html><table><tr><script></style></script>abc
+#errors
+(1,52): foster-parenting-character
+(1,53): foster-parenting-character
+(1,54): foster-parenting-character
+(1,54): eof-in-table
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     "abc"
+|     <table>
+|       <tbody>
+|         <tr>
+|           <script>
+|             "</style>"
+
+#data
+<!doctype html><table><caption><style></script></style>abc
+#errors
+(1,58): expected-closing-tag-but-got-eof
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <table>
+|       <caption>
+|         <style>
+|           "</script>"
+|         "abc"
+
+#data
+<!doctype html><table><td><style></script></style>abc
+#errors
+(1,26): unexpected-cell-in-table-body
+(1,53): expected-closing-tag-but-got-eof
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <table>
+|       <tbody>
+|         <tr>
+|           <td>
+|             <style>
+|               "</script>"
+|             "abc"
+
+#data
+<!doctype html><select><script></style></script>abc
+#errors
+(1,51): eof-in-select
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <select>
+|       <script>
+|         "</style>"
+|       "abc"
+
+#data
+<!doctype html><table><select><script></style></script>abc
+#errors
+(1,30): unexpected-start-tag-implies-table-voodoo
+(1,58): eof-in-select
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <select>
+|       <script>
+|         "</style>"
+|       "abc"
+|     <table>
+
+#data
+<!doctype html><table><tr><select><script></style></script>abc
+#errors
+(1,34): unexpected-start-tag-implies-table-voodoo
+(1,62): eof-in-select
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <select>
+|       <script>
+|         "</style>"
+|       "abc"
+|     <table>
+|       <tbody>
+|         <tr>
+
+#data
+<!doctype html><frameset></frameset><noframes>abc
+#errors
+(1,49): expected-named-closing-tag-but-got-eof
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <frameset>
+|   <noframes>
+|     "abc"
+
+#data
+<!doctype html><frameset></frameset><noframes>abc</noframes><!--abc-->
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <frameset>
+|   <noframes>
+|     "abc"
+|   <!-- abc -->
+
+#data
+<!doctype html><frameset></frameset></html><noframes>abc
+#errors
+(1,56): expected-named-closing-tag-but-got-eof
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <frameset>
+|   <noframes>
+|     "abc"
+
+#data
+<!doctype html><frameset></frameset></html><noframes>abc</noframes><!--abc-->
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <frameset>
+|   <noframes>
+|     "abc"
+| <!-- abc -->
+
+#data
+<!doctype html><table><tr></tbody><tfoot>
+#errors
+(1,41): eof-in-table
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <table>
+|       <tbody>
+|         <tr>
+|       <tfoot>
+
+#data
+<!doctype html><table><td><svg></svg>abc<td>
+#errors
+(1,26): unexpected-cell-in-table-body
+(1,44): expected-closing-tag-but-got-eof
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <table>
+|       <tbody>
+|         <tr>
+|           <td>
+|             <svg svg>
+|             "abc"
+|           <td>
diff --git a/validator/htmlparser/testdata/tree-construction/tests19.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests19.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tests19.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests19.dat
diff --git a/validator/htmlparser/testdata/tree-construction/tests2.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests2.dat
similarity index 91%
rename from validator/htmlparser/testdata/tree-construction/tests2.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests2.dat
index b44fec4d76889..abe8f8419e8f1 100644
--- a/validator/htmlparser/testdata/tree-construction/tests2.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests2.dat
@@ -224,8 +224,6 @@
 #errors
 (1,8): eof-in-attribute-name
 (1,8): expected-doctype-but-got-eof
-#new-errors
-(1:9) eof-in-tag
 #document
 | <html>
 |   <head>
@@ -238,10 +236,6 @@
 (1,32): named-entity-without-semicolon
 (1,33): attributes-in-end-tag
 (1,33): unexpected-end-tag-before-html
-#new-errors
-(1:24) unexpected-character-in-attribute-name
-(1:33) missing-semicolon-after-character-reference
-(1:33) end-tag-with-attributes
 #document
 | <!DOCTYPE html>
 | <html>
@@ -254,8 +248,6 @@
 #errors
 (1,9): need-space-after-doctype
 (1,54): expected-named-closing-tag-but-got-eof
-#new-errors
-(1:10) missing-whitespace-before-doctype-name
 #document
 | <!DOCTYPE html>
 | <html>
@@ -280,8 +272,6 @@
 #errors
 (1,2): expected-numeric-entity
 (1,2): expected-doctype-but-got-chars
-#new-errors
-(1:3) absence-of-digits-in-numeric-character-reference
 #document
 | <html>
 |   <head>
@@ -293,8 +283,6 @@
 #errors
 (1,3): expected-numeric-entity
 (1,3): expected-doctype-but-got-chars
-#new-errors
-(1:4) absence-of-digits-in-numeric-character-reference
 #document
 | <html>
 |   <head>
@@ -306,8 +294,6 @@
 #errors
 (1,3): expected-numeric-entity
 (1,3): expected-doctype-but-got-chars
-#new-errors
-(1:4) absence-of-digits-in-numeric-character-reference
 #document
 | <html>
 |   <head>
@@ -319,8 +305,6 @@
 #errors
 (1,4): numeric-entity-without-semicolon
 (1,4): expected-doctype-but-got-chars
-#new-errors
-(1:5) missing-semicolon-after-character-reference
 #document
 | <html>
 |   <head>
@@ -341,8 +325,6 @@
 <!doctypehtml><p><li>
 #errors
 (1,9): need-space-after-doctype
-#new-errors
-(1:10) missing-whitespace-before-doctype-name
 #document
 | <!DOCTYPE html>
 | <html>
@@ -355,8 +337,6 @@
 <!doctypehtml><p><dt>
 #errors
 (1,9): need-space-after-doctype
-#new-errors
-(1:10) missing-whitespace-before-doctype-name
 #document
 | <!DOCTYPE html>
 | <html>
@@ -369,8 +349,6 @@
 <!doctypehtml><p><dd>
 #errors
 (1,9): need-space-after-doctype
-#new-errors
-(1:10) missing-whitespace-before-doctype-name
 #document
 | <!DOCTYPE html>
 | <html>
@@ -384,8 +362,6 @@
 #errors
 (1,9): need-space-after-doctype
 (1,23): expected-closing-tag-but-got-eof
-#new-errors
-(1:10) missing-whitespace-before-doctype-name
 #document
 | <!DOCTYPE html>
 | <html>
@@ -410,8 +386,6 @@
 #errors
 (1,4): named-entity-without-semicolon
 (1,4): expected-doctype-but-got-chars
-#new-errors
-(1:5) missing-semicolon-after-character-reference
 #document
 | <html>
 |   <head>
@@ -423,8 +397,6 @@
 #errors
 (1,3): expected-named-entity
 (1,3): expected-doctype-but-got-chars
-#new-errors
-(1:5) unknown-named-character-reference
 #document
 | <html>
 |   <head>
@@ -457,8 +429,6 @@
 <!DOCTYPE html><!-- X
 #errors
 (1,21): eof-in-comment
-#new-errors
-(1:22) eof-in-comment
 #document
 | <!DOCTYPE html>
 | <!--  X -->
@@ -501,6 +471,7 @@
 <!DOCTYPE html><select><optgroup><option></optgroup><option><select><option>
 #errors
 (1,68): unexpected-select-in-select
+(1,76): expected-closing-tag-but-got-eof
 #document
 | <!DOCTYPE html>
 | <html>
@@ -565,8 +536,6 @@
 <!DOCTYPE html><!-- XXX - XXX
 #errors
 (1,29): eof-in-comment
-#new-errors
-(1:30) eof-in-comment
 #document
 | <!DOCTYPE html>
 | <!--  XXX - XXX -->
@@ -747,10 +716,6 @@ x { content:"</style" } "
 (1,19): unexpected-character-after-solidus-in-tag
 (1,21): unexpected-character-after-solidus-in-tag
 (1,23): unexpected-character-after-solidus-in-tag
-#new-errors
-(1:20) unexpected-solidus-in-tag
-(1:22) unexpected-solidus-in-tag
-(1:24) unexpected-solidus-in-tag
 #document
 | <!DOCTYPE html>
 | <html>
@@ -766,8 +731,6 @@ x { content:"</style" } "
 <!DOCTYPE html><!--x--
 #errors
 (1,22): eof-in-comment-double-dash
-#new-errors
-(1:23) eof-in-comment
 #document
 | <!DOCTYPE html>
 | <!-- x -->
@@ -796,9 +759,6 @@ x { content:"</style" } "
 (1,20): expected-space-or-right-bracket-in-doctype
 (1,25): unknown-doctype
 (1,35): unexpected-char-in-comment
-#new-errors
-(1:21) invalid-character-sequence-after-doctype-name
-(1:35) nested-comment
 #document
 | <!DOCTYPE <!doctype>
 | <html>
diff --git a/validator/htmlparser/testdata/tree-construction/tests20.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests20.dat
similarity index 87%
rename from validator/htmlparser/testdata/tree-construction/tests20.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests20.dat
index afdae7431dfd1..52c5acdc6e6ec 100644
--- a/validator/htmlparser/testdata/tree-construction/tests20.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests20.dat
@@ -407,6 +407,7 @@
 <option><option>
 #errors
 (1,8): expected-doctype-but-got-start-tag
+(1,16): expected-closing-tag-but-got-eof
 #document
 | <html>
 |   <head>
@@ -513,70 +514,3 @@
 |       <math annotation-xml>
 |         encoding=" text/html "
 |     <div>
-
-#data
-<math><annotation-xml> </annotation-xml>
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,40): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <math math>
-|       <math annotation-xml>
-|         " "
-
-#data
-<math><annotation-xml>c</annotation-xml>
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,40): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <math math>
-|       <math annotation-xml>
-|         "c"
-
-#data
-<math><annotation-xml><!--foo-->
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,32): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <math math>
-|       <math annotation-xml>
-|         <!-- foo -->
-
-#data
-<math><annotation-xml></svg>x
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,28): unexpected-end-tag
-(1,29): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <math math>
-|       <math annotation-xml>
-|         "x"
-
-#data
-<math><annotation-xml><svg>x
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,28): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <math math>
-|       <math annotation-xml>
-|         <svg svg>
-|           "x"
diff --git a/validator/htmlparser/testdata/tree-construction/tests21.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests21.dat
similarity index 93%
rename from validator/htmlparser/testdata/tree-construction/tests21.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests21.dat
index 1e2af7c1909d5..d384a55564cf6 100644
--- a/validator/htmlparser/testdata/tree-construction/tests21.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests21.dat
@@ -28,8 +28,6 @@
 (1,5): expected-doctype-but-got-start-tag
 (1,7): expected-dashes-or-doctype
 (1,20): expected-closing-tag-but-got-eof
-#new-errors
-(1:14) cdata-in-html-content
 #document
 | <html>
 |   <head>
@@ -42,8 +40,6 @@
 #errors
 (1,5): expected-doctype-but-got-start-tag
 (1,17): expected-closing-tag-but-got-eof
-#new-errors
-(1:18) eof-in-cdata
 #document
 | <html>
 |   <head>
@@ -56,8 +52,6 @@
 #errors
 (1,5): expected-doctype-but-got-start-tag
 (1,17): expected-closing-tag-but-got-eof
-#new-errors
-(1:18) eof-in-cdata
 #document
 | <html>
 |   <head>
@@ -70,8 +64,6 @@
 #errors
 (1,5): expected-doctype-but-got-start-tag
 (1,14): expected-closing-tag-but-got-eof
-#new-errors
-(1:15) eof-in-cdata
 #document
 | <html>
 |   <head>
@@ -118,8 +110,6 @@
 #errors
 (1,5): expected-doctype-but-got-start-tag
 (1,16): expected-closing-tag-but-got-eof
-#new-errors
-(1:17) eof-in-cdata
 #document
 | <html>
 |   <head>
@@ -132,8 +122,6 @@
 #errors
 (1,5): expected-doctype-but-got-start-tag
 (1,15): expected-closing-tag-but-got-eof
-#new-errors
-(1:16) eof-in-cdata
 #document
 | <html>
 |   <head>
@@ -146,8 +134,6 @@
 #errors
 (1,5): expected-doctype-but-got-start-tag
 (1,17): expected-closing-tag-but-got-eof
-#new-errors
-(1:18) eof-in-cdata
 #document
 | <html>
 |   <head>
@@ -197,8 +183,6 @@
 (1,5): expected-doctype-but-got-start-tag
 (1,27): expected-dashes-or-doctype
 (1,40): expected-closing-tag-but-got-eof
-#new-errors
-(1:34) cdata-in-html-content
 #document
 | <html>
 |   <head>
@@ -237,8 +221,6 @@
 #errors
 (1,5): expected-doctype-but-got-start-tag
 (1,20): expected-closing-tag-but-got-eof
-#new-errors
-(1:21) eof-in-cdata
 #document
 | <html>
 |   <head>
@@ -251,8 +233,6 @@
 #errors
 (1,5): expected-doctype-but-got-start-tag
 (1,21): expected-closing-tag-but-got-eof
-#new-errors
-(1:22) eof-in-cdata
 #document
 | <html>
 |   <head>
diff --git a/validator/htmlparser/testdata/tree-construction/tests22.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests22.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tests22.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests22.dat
diff --git a/validator/htmlparser/testdata/tree-construction/tests23.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests23.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tests23.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests23.dat
diff --git a/validator/htmlparser/testdata/tree-construction/tests24.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests24.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tests24.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests24.dat
diff --git a/validator/cpp/htmlparser/testdata/tree-construction/tests25.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests25.dat
new file mode 100644
index 0000000000000..2bbf038f221f2
--- /dev/null
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests25.dat
@@ -0,0 +1,221 @@
+#data
+<!DOCTYPE html><body><foo>A
+#errors
+(1,27): expected-closing-tag-but-got-eof
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <foo>
+|       "A"
+
+#data
+<!DOCTYPE html><body><area>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <area>
+|     "A"
+
+#data
+<!DOCTYPE html><body><base>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <base>
+|     "A"
+
+#data
+<!DOCTYPE html><body><basefont>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <basefont>
+|     "A"
+
+#data
+<!DOCTYPE html><body><bgsound>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <bgsound>
+|     "A"
+
+#data
+<!DOCTYPE html><body><br>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <br>
+|     "A"
+
+#data
+<!DOCTYPE html><body><col>A
+#errors
+(1,26): unexpected-start-tag-ignored
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     "A"
+
+#data
+<!DOCTYPE html><body><command>A
+#errors
+eof
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <command>
+|       "A"
+
+#data
+<!DOCTYPE html><body><embed>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <embed>
+|     "A"
+
+#data
+<!DOCTYPE html><body><frame>A
+#errors
+(1,28): unexpected-start-tag-ignored
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     "A"
+
+#data
+<!DOCTYPE html><body><hr>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <hr>
+|     "A"
+
+#data
+<!DOCTYPE html><body><img>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <img>
+|     "A"
+
+#data
+<!DOCTYPE html><body><input>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <input>
+|     "A"
+
+#data
+<!DOCTYPE html><body><keygen>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <keygen>
+|     "A"
+
+#data
+<!DOCTYPE html><body><link>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <link>
+|     "A"
+
+#data
+<!DOCTYPE html><body><meta>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <meta>
+|     "A"
+
+#data
+<!DOCTYPE html><body><param>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <param>
+|     "A"
+
+#data
+<!DOCTYPE html><body><source>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <source>
+|     "A"
+
+#data
+<!DOCTYPE html><body><track>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <track>
+|     "A"
+
+#data
+<!DOCTYPE html><body><wbr>A
+#errors
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <wbr>
+|     "A"
diff --git a/validator/htmlparser/testdata/tree-construction/tests26.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests26.dat
similarity index 98%
rename from validator/htmlparser/testdata/tree-construction/tests26.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests26.dat
index de453b9cb7a56..8964624a4f3ea 100644
--- a/validator/htmlparser/testdata/tree-construction/tests26.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests26.dat
@@ -269,9 +269,6 @@
 (1,12): unexpected-character-after-solidus-in-tag
 (1,21): unexpected-end-tag
 (2,0): expected-closing-tag-but-got-eof
-#new-errors
-(1:11) unexpected-character-in-attribute-name
-(1:13) unexpected-solidus-in-tag
 #document
 | <html>
 |   <head>
@@ -367,8 +364,6 @@
 #errors
 (1,28): expected-dashes-or-doctype
 (1,34): expected-closing-tag-but-got-eof
-#new-errors
-(1:29) incorrectly-opened-comment
 #document
 | <!DOCTYPE html>
 | <html>
diff --git a/validator/htmlparser/testdata/tree-construction/tests3.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests3.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tests3.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests3.dat
diff --git a/validator/htmlparser/testdata/tree-construction/tests4.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests4.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tests4.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests4.dat
diff --git a/validator/htmlparser/testdata/tree-construction/tests5.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests5.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tests5.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests5.dat
diff --git a/validator/htmlparser/testdata/tree-construction/tests6.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests6.dat
similarity index 99%
rename from validator/htmlparser/testdata/tree-construction/tests6.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests6.dat
index f3991232da0a4..d774fc234a923 100644
--- a/validator/htmlparser/testdata/tree-construction/tests6.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests6.dat
@@ -51,8 +51,6 @@
 (1,9): need-space-after-doctype
 (1,10): expected-doctype-name-but-got-right-bracket
 (1,10): unknown-doctype
-#new-errors
-(1:10) missing-doctype-name
 #document
 | <!DOCTYPE >
 | <html>
@@ -64,8 +62,6 @@
 #errors
 (1,6): eof-in-comment
 (1,6): expected-doctype-but-got-eof
-#new-errors
-(1:7) eof-in-comment
 #document
 | <!-- -x -->
 | <html>
diff --git a/validator/htmlparser/testdata/tree-construction/tests7.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests7.dat
similarity index 99%
rename from validator/htmlparser/testdata/tree-construction/tests7.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests7.dat
index 395dc72bdbd13..78fb6faaae34d 100644
--- a/validator/htmlparser/testdata/tree-construction/tests7.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests7.dat
@@ -393,7 +393,6 @@ A<table><tr> B</tr> </em>C</table>
 (1,14): foster-parenting-character
 (1,20): foster-parenting-character
 (1,25): unexpected-end-tag
-(1,25): unexpected-end-tag-in-special-element
 (1,26): foster-parenting-character
 #document
 | <html>
diff --git a/validator/htmlparser/testdata/tree-construction/tests8.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests8.dat
similarity index 95%
rename from validator/htmlparser/testdata/tree-construction/tests8.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests8.dat
index ba2e63dd81978..33dd96d332073 100644
--- a/validator/htmlparser/testdata/tree-construction/tests8.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests8.dat
@@ -87,17 +87,6 @@ x"
 |       "xx"
 |     <table>
 
-#data
-<table><li><li></table>
-#errors
-#document
-| <html>
-|   <head>
-|   <body>
-|     <li>
-|     <li>
-|     <table>
-
 #data
 x<table>x
 #errors
diff --git a/validator/htmlparser/testdata/tree-construction/tests9.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests9.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tests9.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests9.dat
diff --git a/validator/htmlparser/testdata/tree-construction/tests_innerHTML_1.dat b/validator/cpp/htmlparser/testdata/tree-construction/tests_innerHTML_1.dat
similarity index 99%
rename from validator/htmlparser/testdata/tree-construction/tests_innerHTML_1.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tests_innerHTML_1.dat
index 54f436848c9fa..9c5c18220d913 100644
--- a/validator/htmlparser/testdata/tree-construction/tests_innerHTML_1.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/tests_innerHTML_1.dat
@@ -826,6 +826,7 @@ td
 </select><option>
 #errors
 (1,9): XXX-undefined-error
+(1,17): eof-in-select
 #document-fragment
 select
 #document
@@ -835,6 +836,7 @@ select
 <input><option>
 #errors
 (1,7): unexpected-input-in-select
+(1,15): eof-in-select
 #document-fragment
 select
 #document
@@ -844,6 +846,7 @@ select
 <keygen><option>
 #errors
 (1,8): unexpected-input-in-select
+(1,16): eof-in-select
 #document-fragment
 select
 #document
@@ -853,6 +856,7 @@ select
 <textarea><option>
 #errors
 (1,10): unexpected-input-in-select
+(1,18): eof-in-select
 #document-fragment
 select
 #document
diff --git a/validator/htmlparser/testdata/tree-construction/tricky01.dat b/validator/cpp/htmlparser/testdata/tree-construction/tricky01.dat
similarity index 100%
rename from validator/htmlparser/testdata/tree-construction/tricky01.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/tricky01.dat
diff --git a/validator/cpp/htmlparser/testdata/tree-construction/webkit01.dat b/validator/cpp/htmlparser/testdata/tree-construction/webkit01.dat
new file mode 100644
index 0000000000000..f1cd858f41821
--- /dev/null
+++ b/validator/cpp/htmlparser/testdata/tree-construction/webkit01.dat
@@ -0,0 +1,721 @@
+#data
+Test
+#errors
+(1,4): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "Test"
+
+#data
+<div></div>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <div>
+
+#data
+<div>Test</div>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <div>
+|       "Test"
+
+#data
+<di
+#errors
+(1,3): eof-in-tag-name
+(1,3): expected-doctype-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+
+#data
+<div>Hello</div>
+<script>
+console.log("PASS");
+</script>
+<div>Bye</div>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <div>
+|       "Hello"
+|     "
+"
+|     <script>
+|       "
+console.log("PASS");
+"
+|     "
+"
+|     <div>
+|       "Bye"
+
+#data
+<div foo="bar">Hello</div>
+#errors
+(1,15): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <div>
+|       foo="bar"
+|       "Hello"
+
+#data
+<div>Hello</div>
+<script>
+console.log("FOO<span>BAR</span>BAZ");
+</script>
+<div>Bye</div>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <div>
+|       "Hello"
+|     "
+"
+|     <script>
+|       "
+console.log("FOO<span>BAR</span>BAZ");
+"
+|     "
+"
+|     <div>
+|       "Bye"
+
+#data
+<foo bar="baz"></foo><potato quack="duck"></potato>
+#errors
+(1,15): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <foo>
+|       bar="baz"
+|     <potato>
+|       quack="duck"
+
+#data
+<foo bar="baz"><potato quack="duck"></potato></foo>
+#errors
+(1,15): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <foo>
+|       bar="baz"
+|       <potato>
+|         quack="duck"
+
+#data
+<foo></foo bar="baz"><potato></potato quack="duck">
+#errors
+(1,5): expected-doctype-but-got-start-tag
+(1,21): attributes-in-end-tag
+(1,51): attributes-in-end-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <foo>
+|     <potato>
+
+#data
+</ tttt>
+#errors
+(1,2): expected-closing-tag-but-got-char
+(1,8): expected-doctype-but-got-eof
+#document
+| <!--  tttt -->
+| <html>
+|   <head>
+|   <body>
+
+#data
+<div FOO ><img><img></div>
+#errors
+(1,10): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <div>
+|       foo=""
+|       <img>
+|       <img>
+
+#data
+<p>Test</p<p>Test2</p>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,13): unexpected-end-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <p>
+|       "TestTest2"
+
+#data
+<rdar://problem/6869687>
+#errors
+(1,7): unexpected-character-after-solidus-in-tag
+(1,8): unexpected-character-after-solidus-in-tag
+(1,16): unexpected-character-after-solidus-in-tag
+(1,24): expected-doctype-but-got-start-tag
+(1,24): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <rdar:>
+|       6869687=""
+|       problem=""
+
+#data
+<A>test< /A>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,8): expected-tag-name
+(1,12): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <a>
+|       "test< /A>"
+
+#data
+&lt;
+#errors
+(1,4): expected-doctype-but-got-chars
+#document
+| <html>
+|   <head>
+|   <body>
+|     "<"
+
+#data
+<body foo='bar'><body foo='baz' yo='mama'>
+#errors
+(1,16): expected-doctype-but-got-start-tag
+(1,42): unexpected-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     foo="bar"
+|     yo="mama"
+
+#data
+<body></br foo="bar"></body>
+#errors
+(1,6): expected-doctype-but-got-start-tag
+(1,21): attributes-in-end-tag
+(1,21): unexpected-end-tag-treated-as
+#document
+| <html>
+|   <head>
+|   <body>
+|     <br>
+
+#data
+<bdy><br foo="bar"></body>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+(1,26): expected-one-end-tag-but-got-another
+#document
+| <html>
+|   <head>
+|   <body>
+|     <bdy>
+|       <br>
+|         foo="bar"
+
+#data
+<body></body></br foo="bar">
+#errors
+(1,6): expected-doctype-but-got-start-tag
+(1,28): attributes-in-end-tag
+(1,28): unexpected-end-tag-after-body
+(1,28): unexpected-end-tag-treated-as
+#document
+| <html>
+|   <head>
+|   <body>
+|     <br>
+
+#data
+<bdy></body><br foo="bar">
+#errors
+(1,5): expected-doctype-but-got-start-tag
+(1,12): expected-one-end-tag-but-got-another
+(1,26): unexpected-start-tag-after-body
+(1,26): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <bdy>
+|       <br>
+|         foo="bar"
+
+#data
+<html><body></body></html><!-- Hi there -->
+#errors
+(1,6): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+| <!--  Hi there  -->
+
+#data
+<html><body></body></html>x<!-- Hi there -->
+#errors
+(1,6): expected-doctype-but-got-start-tag
+(1,27): expected-eof-but-got-char
+#document
+| <html>
+|   <head>
+|   <body>
+|     "x"
+|     <!--  Hi there  -->
+
+#data
+<html><body></body></html>x<!-- Hi there --></html><!-- Again -->
+#errors
+(1,6): expected-doctype-but-got-start-tag
+(1,27): expected-eof-but-got-char
+#document
+| <html>
+|   <head>
+|   <body>
+|     "x"
+|     <!--  Hi there  -->
+| <!--  Again  -->
+
+#data
+<html><body></body></html>x<!-- Hi there --></body></html><!-- Again -->
+#errors
+(1,6): expected-doctype-but-got-start-tag
+(1,27): expected-eof-but-got-char
+#document
+| <html>
+|   <head>
+|   <body>
+|     "x"
+|     <!--  Hi there  -->
+| <!--  Again  -->
+
+#data
+<html><body><ruby><div><rp>xx</rp></div></ruby></body></html>
+#errors
+(1,6): expected-doctype-but-got-start-tag
+(1,27): XXX-undefined-error
+#document
+| <html>
+|   <head>
+|   <body>
+|     <ruby>
+|       <div>
+|         <rp>
+|           "xx"
+
+#data
+<html><body><ruby><div><rt>xx</rt></div></ruby></body></html>
+#errors
+(1,6): expected-doctype-but-got-start-tag
+(1,27): XXX-undefined-error
+#document
+| <html>
+|   <head>
+|   <body>
+|     <ruby>
+|       <div>
+|         <rt>
+|           "xx"
+
+#data
+<html><frameset><!--1--><noframes>A</noframes><!--2--></frameset><!--3--><noframes>B</noframes><!--4--></html><!--5--><noframes>C</noframes><!--6-->
+#errors
+(1,6): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <frameset>
+|     <!-- 1 -->
+|     <noframes>
+|       "A"
+|     <!-- 2 -->
+|   <!-- 3 -->
+|   <noframes>
+|     "B"
+|   <!-- 4 -->
+|   <noframes>
+|     "C"
+| <!-- 5 -->
+| <!-- 6 -->
+
+#data
+<select><option>A<select><option>B<select><option>C<select><option>D<select><option>E<select><option>F<select><option>G<select>
+#errors
+(1,8): expected-doctype-but-got-start-tag
+(1,25): unexpected-select-in-select
+(1,59): unexpected-select-in-select
+(1,93): unexpected-select-in-select
+(1,127): unexpected-select-in-select
+(1,127): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <select>
+|       <option>
+|         "A"
+|     <option>
+|       "B"
+|       <select>
+|         <option>
+|           "C"
+|     <option>
+|       "D"
+|       <select>
+|         <option>
+|           "E"
+|     <option>
+|       "F"
+|       <select>
+|         <option>
+|           "G"
+
+#data
+<dd><dd><dt><dt><dd><li><li>
+#errors
+(1,4): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <dd>
+|     <dd>
+|     <dt>
+|     <dt>
+|     <dd>
+|       <li>
+|       <li>
+
+#data
+<div><b></div><div><nobr>a<nobr>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+(1,14): end-tag-too-early
+(1,32): unexpected-start-tag-implies-end-tag
+(1,32): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <div>
+|       <b>
+|     <div>
+|       <b>
+|         <nobr>
+|           "a"
+|         <nobr>
+
+#data
+<head></head>
+<body></body>
+#errors
+(1,6): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   "
+"
+|   <body>
+
+#data
+<head></head> <style></style>ddd
+#errors
+(1,6): expected-doctype-but-got-start-tag
+(1,21): unexpected-start-tag-out-of-my-head
+#document
+| <html>
+|   <head>
+|     <style>
+|   " "
+|   <body>
+|     "ddd"
+
+#data
+<kbd><table></kbd><col><select><tr>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+(1,18): unexpected-end-tag-implies-table-voodoo
+(1,18): unexpected-end-tag
+(1,31): unexpected-start-tag-implies-table-voodoo
+(1,35): unexpected-table-element-start-tag-in-select-in-table
+(1,35): eof-in-table
+#document
+| <html>
+|   <head>
+|   <body>
+|     <kbd>
+|       <select>
+|       <table>
+|         <colgroup>
+|           <col>
+|         <tbody>
+|           <tr>
+
+#data
+<kbd><table></kbd><col><select><tr></table><div>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+(1,18): unexpected-end-tag-implies-table-voodoo
+(1,18): unexpected-end-tag
+(1,31): unexpected-start-tag-implies-table-voodoo
+(1,35): unexpected-table-element-start-tag-in-select-in-table
+(1,48): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <kbd>
+|       <select>
+|       <table>
+|         <colgroup>
+|           <col>
+|         <tbody>
+|           <tr>
+|       <div>
+
+#data
+<a><li><style></style><title></title></a>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,41): adoption-agency-1.3
+#document
+| <html>
+|   <head>
+|   <body>
+|     <a>
+|     <li>
+|       <a>
+|         <style>
+|         <title>
+
+#data
+<font></p><p><meta><title></title></font>
+#errors
+(1,6): expected-doctype-but-got-start-tag
+(1,10): unexpected-end-tag
+(1,41): adoption-agency-1.3
+#document
+| <html>
+|   <head>
+|   <body>
+|     <font>
+|       <p>
+|     <p>
+|       <font>
+|         <meta>
+|         <title>
+
+#data
+<a><center><title></title><a>
+#errors
+(1,3): expected-doctype-but-got-start-tag
+(1,29): unexpected-start-tag-implies-end-tag
+(1,29): adoption-agency-1.3
+(1,29): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <a>
+|     <center>
+|       <a>
+|         <title>
+|       <a>
+
+#data
+<svg><title><div>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+(1,17): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <svg svg>
+|       <svg title>
+|         <div>
+
+#data
+<svg><title><rect><div>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+(1,23): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <svg svg>
+|       <svg title>
+|         <rect>
+|           <div>
+
+#data
+<svg><title><svg><div>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+(1,22): unexpected-html-element-in-foreign-content
+(1,22): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <svg svg>
+|       <svg title>
+|         <svg svg>
+|         <div>
+
+#data
+<img <="" FAIL>
+#errors
+(1,6): invalid-character-in-attribute-name
+(1,15): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <img>
+|       <=""
+|       fail=""
+
+#data
+<ul><li><div id='foo'/>A</li><li>B<div>C</div></li></ul>
+#errors
+(1,4): expected-doctype-but-got-start-tag
+(1,23): non-void-element-with-trailing-solidus
+(1,29): end-tag-too-early
+#document
+| <html>
+|   <head>
+|   <body>
+|     <ul>
+|       <li>
+|         <div>
+|           id="foo"
+|           "A"
+|       <li>
+|         "B"
+|         <div>
+|           "C"
+
+#data
+<svg><em><desc></em>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+(1,9): unexpected-html-element-in-foreign-content
+(1,20): adoption-agency-1.3
+#document
+| <html>
+|   <head>
+|   <body>
+|     <svg svg>
+|     <em>
+|       <desc>
+
+#data
+<table><tr><td><svg><desc><td></desc><circle>
+#errors
+#document
+| <html>
+|   <head>
+|   <body>
+|     <table>
+|       <tbody>
+|         <tr>
+|           <td>
+|             <svg svg>
+|               <svg desc>
+|           <td>
+|             <circle>
+
+#data
+<svg><tfoot></mi><td>
+#errors
+(1,5): expected-doctype-but-got-start-tag
+(1,17): unexpected-end-tag
+(1,17): unexpected-end-tag
+(1,21): expected-closing-tag-but-got-eof
+#document
+| <html>
+|   <head>
+|   <body>
+|     <svg svg>
+|       <svg tfoot>
+|         <svg td>
+
+#data
+<math><mrow><mrow><mn>1</mn></mrow><mi>a</mi></mrow></math>
+#errors
+(1,6): expected-doctype-but-got-start-tag
+#document
+| <html>
+|   <head>
+|   <body>
+|     <math math>
+|       <math mrow>
+|         <math mrow>
+|           <math mn>
+|             "1"
+|         <math mi>
+|           "a"
+
+#data
+<!doctype html><input type="hidden"><frameset>
+#errors
+(1,46): unexpected-start-tag
+(1,46): eof-in-frameset
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <frameset>
+
+#data
+<!doctype html><input type="button"><frameset>
+#errors
+(1,46): unexpected-start-tag
+#document
+| <!DOCTYPE html>
+| <html>
+|   <head>
+|   <body>
+|     <input>
+|       type="button"
diff --git a/validator/htmlparser/testdata/tree-construction/webkit02.dat b/validator/cpp/htmlparser/testdata/tree-construction/webkit02.dat
similarity index 99%
rename from validator/htmlparser/testdata/tree-construction/webkit02.dat
rename to validator/cpp/htmlparser/testdata/tree-construction/webkit02.dat
index 791991d202902..c596820b3f092 100644
--- a/validator/htmlparser/testdata/tree-construction/webkit02.dat
+++ b/validator/cpp/htmlparser/testdata/tree-construction/webkit02.dat
@@ -60,8 +60,6 @@
 #errors
 (1,6): expected-doctype-but-got-start-tag
 (1,67): eof-in-attribute-value-double-quote
-#new-errors
-(1:68) eof-in-tag
 #document
 | <html>
 |   <head>
diff --git a/validator/htmlparser/token.cc b/validator/cpp/htmlparser/token.cc
similarity index 100%
rename from validator/htmlparser/token.cc
rename to validator/cpp/htmlparser/token.cc
diff --git a/validator/htmlparser/token.h b/validator/cpp/htmlparser/token.h
similarity index 100%
rename from validator/htmlparser/token.h
rename to validator/cpp/htmlparser/token.h
diff --git a/validator/htmlparser/tokenizer.cc b/validator/cpp/htmlparser/tokenizer.cc
similarity index 96%
rename from validator/htmlparser/tokenizer.cc
rename to validator/cpp/htmlparser/tokenizer.cc
index 291fc83877c23..cb449c82e9180 100644
--- a/validator/htmlparser/tokenizer.cc
+++ b/validator/cpp/htmlparser/tokenizer.cc
@@ -16,16 +16,24 @@
 
 #include "tokenizer.h"
 
+#include "absl/flags/flag.h"
 #include "atom.h"
 #include "atomutil.h"
 #include "defer.h"
 #include "strings.h"
 
+ABSL_FLAG(std::size_t, htmlparser_max_attributes_per_node,
+          1000,
+          "Protects out of memory errors by dropping insanely large amounts "
+          "of attributes per node.");
+
 namespace htmlparser {
 
 Tokenizer::Tokenizer(std::string_view html, std::string context_tag) :
-    buffer_(html), lines_cols_{{1, 0}}, current_line_col_{1, 0},
-    token_line_col_{1, 0} {
+    buffer_(html) {
+  lines_cols_.push_back(std::make_pair(1, 0));
+  current_line_col_ = std::make_pair(1, 0);
+  token_line_col_ = std::make_pair(1, 0);
   if (!context_tag.empty()) {
     Strings::ToLower(&context_tag);
     if (std::find(kAllowedFragmentContainers.begin(),
@@ -65,8 +73,10 @@ inline char Tokenizer::ReadByte() {
 
 inline void Tokenizer::UnreadByte() {
   raw_.end--;
-  if (current_line_col_.second == 0) {
-    lines_cols_.pop_back();
+  if (current_line_col_.first > 1 && current_line_col_.second == 0) {
+    if (lines_cols_.size() > 1) {
+      lines_cols_.pop_back();
+    }
     current_line_col_ = lines_cols_.back();
     return;
   }
@@ -452,7 +462,8 @@ TokenType Tokenizer::ReadMarkupDeclaration() {
     return TokenType::COMMENT_TOKEN;
   }
 
-  raw_.end = raw_.end - 2;
+  UnreadByte();
+  UnreadByte();
   if (ReadDoctype()) {
     return TokenType::DOCTYPE_TOKEN;
   }
@@ -471,14 +482,14 @@ bool Tokenizer::ReadDoctype() {
   token_line_col_ = {current_line_col_.first,
                      current_line_col_.second - 2 /* <! */};
 
-  static const std::string kDoctype = "DOCTYPE";
+  static constexpr std::string_view kDoctype = "DOCTYPE";
   for (std::size_t i = 0; i < kDoctype.size(); ++i) {
     char c = ReadByte();
     if (eof_) {
       data_.end = raw_.end;
       return false;
     }
-    if (c != kDoctype.at(i) && c != kDoctype.at(i)+('a'-'A')) {
+    if (c != kDoctype.at(i) && c != (kDoctype.at(i) + ('a' - 'A'))) {
       // Back up to read the fragment of "DOCTYPE" again.
       raw_.end = data_.start;
       return false;
@@ -497,7 +508,7 @@ bool Tokenizer::ReadDoctype() {
 }
 
 bool Tokenizer::ReadCDATA() {
-  static const std::string kCData = "[CDATA[";
+  static constexpr std::string_view kCData = "[CDATA[";
   for (std::size_t i = 0; i < kCData.size(); ++i) {
     char c = ReadByte();
     if (eof_) {
@@ -519,16 +530,18 @@ bool Tokenizer::ReadCDATA() {
       return true;
     }
     switch (c) {
-      case ']':
+      case ']': {
         brackets++;
         break;
-      case '>':
+      }
+      case '>': {
         if (brackets >= 2) {
-          data_.end = raw_.end - 3 /* "]]>".size() */;
+          data_.end = raw_.end - 3 /* "]]>" */;
           return true;
         }
         brackets = 0;
         break;
+      }
       default:
         brackets = 0;
     }
@@ -622,6 +635,7 @@ void Tokenizer::ReadTag(bool save_attr, bool template_mode) {
   if (eof_) {
     return;
   }
+
   while (!eof_) {
     char c = ReadByte();
     if (eof_ || c == '>') {
@@ -636,6 +650,9 @@ void Tokenizer::ReadTag(bool save_attr, bool template_mode) {
     // Save pending_attribute if save_attr and that attribute has a non-empty
     // key.
     if (save_attr &&
+        // Skip excessive attributes.
+        attributes_.size() < ::absl::GetFlag(
+            FLAGS_htmlparser_max_attributes_per_node) &&
         std::get<0>(pending_attribute_).start !=
         std::get<0>(pending_attribute_).end) {
       attributes_.push_back(pending_attribute_);
@@ -870,19 +887,6 @@ TokenType Tokenizer::Next(bool template_mode) {
       continue;
     }
 
-    // We have a non-text token, but we might have accumulated some text
-    // before that. If so, we return the text first, and return the non text
-    // token on the subsequent call to Next.
-    //
-    // <space><space><mytag>, returns two spaces before processing the mytag
-    // token in the next call.
-    if (data_.start < raw_.end - 1) {
-      current_line_col_.second--;
-      data_.end = --raw_.end;
-      token_type_ = TokenType::TEXT_TOKEN;
-      return token_type_;
-    }
-
     c = ReadByte();
     if (eof_) break;
 
@@ -900,6 +904,21 @@ TokenType Tokenizer::Next(bool template_mode) {
       continue;
     }
 
+    // We have a non-text token, but we might have accumulated some text
+    // before that. If so, we return the text first, and return the non text
+    // token on the subsequent call to Next.
+    //
+    // <space><space><mytag>, returns two spaces before processing the mytag
+    // token in the next call.
+    if (int x = raw_.end - 2 /* "<a" */; raw_.start < x) {
+      raw_.end = x;
+      data_.end = x;
+      // We know there is no \n so no line adjustment needed.
+      current_line_col_.second -= 2;
+      token_type_ = TokenType::TEXT_TOKEN;
+      return token_type_;
+    }
+
     switch (token_type) {
       case TokenType::START_TAG_TOKEN:
         token_type_ = ReadStartTag(template_mode);
@@ -923,6 +942,7 @@ TokenType Tokenizer::Next(bool template_mode) {
           }
           return token_type_;
         }
+        UnreadByte();
         ReadUntilCloseAngle();
         token_type_ = TokenType::COMMENT_TOKEN;
         return token_type_;
@@ -932,10 +952,9 @@ TokenType Tokenizer::Next(bool template_mode) {
           return token_type_;
         }
         is_token_manufactured_ = true;
-        ReadUntilCloseAngle();
         // <? is part of the comment text.
         UnreadByte();
-        UnreadByte();
+        ReadUntilCloseAngle();
         token_type_ = TokenType::COMMENT_TOKEN;
         return token_type_;
       }
diff --git a/validator/htmlparser/tokenizer.h b/validator/cpp/htmlparser/tokenizer.h
similarity index 95%
rename from validator/htmlparser/tokenizer.h
rename to validator/cpp/htmlparser/tokenizer.h
index 2f2678d2b35c9..a217ab655f7d8 100644
--- a/validator/htmlparser/tokenizer.h
+++ b/validator/cpp/htmlparser/tokenizer.h
@@ -35,6 +35,8 @@ class Tokenizer {
   // as "div" or "iframe".
   explicit Tokenizer(std::string_view html, std::string context_tag = "");
 
+  Tokenizer() = delete;
+
   // Span is a range of bytes in a Tokenizer's buffer. The start is inclusive,
   // the end is exclusive.
   struct Span {
@@ -131,17 +133,10 @@ class Tokenizer {
 
  private:
   // Fragment tokenization is allowed from these parent elements only.
-  inline static constexpr std::array<Atom, 10> kAllowedFragmentContainers {
-      Atom::IFRAME,
-      Atom::NOEMBED,
-      Atom::NOFRAMES,
-      Atom::NOSCRIPT,
-      Atom::PLAINTEXT,
-      Atom::SCRIPT,
-      Atom::STYLE,
-      Atom::TEXTAREA,
-      Atom::TITLE,
-      Atom::XMP,
+  inline static constexpr std::array<Atom, 10> kAllowedFragmentContainers{
+      Atom::IFRAME,    Atom::NOEMBED, Atom::NOFRAMES, Atom::NOSCRIPT,
+      Atom::PLAINTEXT, Atom::SCRIPT,  Atom::STYLE,    Atom::TEXTAREA,
+      Atom::TITLE,     Atom::XMP,
   };
 
   // Returns the next byte from the input stream, doing a buffered read
@@ -153,8 +148,6 @@ class Tokenizer {
   char ReadByte();
 
   // Moves cursor back past one byte.
-  // TODO: Consider implementing peek after checking performance
-  // impact.
   void UnreadByte();
 
   // Reads until next ">".
@@ -218,7 +211,7 @@ class Tokenizer {
 
   // Returns whether the start tag in buffer[data.start:data.end]
   // case-insensitively matches any element of ss.
-  template<typename... Args>
+  template <typename... Args>
   bool StartTagIn(Args... ss);
 
   std::string_view buffer_;
@@ -237,7 +230,7 @@ class Tokenizer {
   // Attribute key and value currently being tokenized.
   RawAttribute pending_attribute_;
 
-  std::vector<RawAttribute> attributes_;
+  std::vector<RawAttribute> attributes_{};
 
   int n_attributes_returned_ = 0;
 
@@ -268,7 +261,8 @@ class Tokenizer {
   // these are manufactured during parsing, not tokenization.
   // This field accounts for only special cases where illegal characters leads
   // to  manufacturing of comments token.
-  // Eg: https://html.spec.whatwg.org/multipage/parsing.html#parse-error-unexpected-question-mark-instead-of-tag-name
+  // Eg:
+  // https://html.spec.whatwg.org/multipage/parsing.html#parse-error-unexpected-question-mark-instead-of-tag-name
   bool is_token_manufactured_ = false;
 
   // Keeps track of all the lines and columns in HTML source.
diff --git a/validator/htmlparser/tokenizer_test.cc b/validator/cpp/htmlparser/tokenizer_test.cc
similarity index 100%
rename from validator/htmlparser/tokenizer_test.cc
rename to validator/cpp/htmlparser/tokenizer_test.cc
diff --git a/validator/cpp/htmlparser/url.cc b/validator/cpp/htmlparser/url.cc
new file mode 100644
index 0000000000000..830f3daaddf89
--- /dev/null
+++ b/validator/cpp/htmlparser/url.cc
@@ -0,0 +1,249 @@
+//
+// Copyright 2020 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.
+
+#include "url.h"
+
+#include "strings.h"
+
+namespace htmlparser {
+
+std::string_view URL::ProtocolStrict(std::string_view url) {
+  for (int i = 0; i < url.size(); ++i) {
+    char c = url[i];
+    if (c == ':') {  // Protocol terminator.
+      return url.substr(0, i);
+    } else if (('a' <= c && c <= 'z') || ('A' <= c && c <= 'Z') ||
+               (i > 0 &&
+                (('0' <= c && c <= '9') || c == '+' || c == '-' || c == '.'))) {
+      // Valid character, don't need to do anything.
+    } else {
+      return "";  // Invalid character for protocol, so give up.
+    }
+  }
+  return "";  // No protocol found.
+}
+
+URL::URL(std::string_view url)
+    : url_(url),
+      is_valid_(true),
+      has_protocol_(false),
+      protocol_(""),
+      login_(""),
+      host_(""),
+      port_(0) {
+  Strings::Trim(&url_);
+  ParseProtocol();
+  if (!url_.empty() && Strings::StartsWith(url_, "//")) {
+    url_.remove_prefix(2);
+    ParseAuthority();
+  }
+}
+
+void URL::ProcessHostDots() {
+  if (host_.empty()) return;
+
+  if (host_.front() == '.' || host_.find("..") != std::string::npos) {
+    is_valid_ = false;
+  } else if (host_.back() == '.') {
+    host_.pop_back();
+  }
+}
+
+void URL::ParseProtocol() {
+  if (int colon_at = url_.find(':'); colon_at != std::string_view::npos) {
+    for (int i = 0; i < colon_at; ++i) {
+      auto c = url_.at(i);
+      if (!IsProtocolCharValidChar(c)) {
+        has_protocol_ = false;
+        protocol_ = "https";
+        return;
+      }
+    }
+
+    has_protocol_ = true;
+    auto protocol = url_.substr(0, colon_at);
+    url_.remove_prefix(colon_at + 1);
+    if (Strings::EqualFold(protocol, "http")) {
+      protocol_ = "http";
+    } else if (Strings::EqualFold(protocol, "https")) {
+      protocol_ = "https";
+    } else if (Strings::EqualFold(protocol, "ftp")) {
+      protocol_ = "ftp";
+    } else if (Strings::EqualFold(protocol, "sftp")) {
+      protocol_ = "sftp";
+    } else {
+      protocol_ = protocol;
+      url_.remove_prefix(url_.size());
+    }
+    Strings::ToLower(&protocol_);
+  } else {
+    // Didn't see any colon in the URL, so make it a default protocol url and
+    // parse the rest of the URL.
+    has_protocol_ = false;
+    protocol_ = "https";
+  }
+}
+
+void URL::ParseAuthority() {
+  std::size_t idx = 0;
+
+  // See if this could be an IPv6 address literal. If so, we skip colons until
+  // we see a matching ']'.
+  bool skip_colons = false;
+  if (!url_.empty() && url_.at(0) == '[') {
+    skip_colons = true;
+    idx++;
+  }
+
+  if (idx >= url_.size()) {
+    is_valid_ = false;
+    return;
+  }
+
+  // Look for '@' and ':', e.g. user:password@example.com:1234
+  // and for '[' and ']', e.g. [2001:0db8::85ae]
+  std::size_t at_idx = -1;
+  std::size_t port_idx = -1;
+  std::size_t password_idx = -1;
+  while (idx < url_.size()) {
+    auto c = url_.at(idx);
+    if (c == '#' || c == '/' || c == '?' || c == '\\') break;
+    switch (c) {
+      case '@': {
+        at_idx = idx;  // Save the last occurrence of '@'.
+        password_idx = port_idx;
+        port_idx = -1;  // We have a login, so reset the port.
+
+        // Any [ before here must have been junk, or part of the password
+        // so we reset.
+        if (idx + 1 < url_.size() && url_.at(idx + 1) == '[') {
+          skip_colons = true;
+          idx++;
+        } else {
+          skip_colons = false;
+        }
+        break;
+      }
+      case ':': {
+        if (port_idx == -1 && !skip_colons) {
+          port_idx = idx + 1;  // might be password; save as port anyway.
+        }
+        break;
+      }
+      case '[': {
+        // Start brackets can only either come at the start of where we
+        // expect a host name (right after the protocol://, or right after @),
+        // so this is either junk or part of the password.
+        // In any case, this is not an IPv6 literal.
+        skip_colons = false;
+        break;
+      }
+      case ']': {
+        // End bracket; stop skipping colons. Note that this allows multiple
+        // [] groups, but the URL is broken anyway, so it doesn't matter much
+        // if we split it "wrong".
+        skip_colons = false;
+        break;
+      }
+    }
+    idx++;
+  }
+
+  // Extract the login string if one was found.
+  if (at_idx != -1) {
+    std::size_t login_length = at_idx;
+    if (password_idx != -1 && password_idx == at_idx) {
+      login_length--;
+    }
+    login_ = url_.substr(0, login_length);
+  }
+
+  // Extract the hostname.
+  std::size_t host_begin = at_idx != -1 ? at_idx + 1 : 0;
+  std::size_t host_end = port_idx != -1 ? port_idx - 1 : idx;
+
+  bool is_ipv6_literal = false;
+  std::string_view host = url_.substr(host_begin, host_end - host_begin);
+  if (host.front() == '[' && host.back() == ']' && host.size() > 2 /* [] */) {
+    is_ipv6_literal = true;
+    host.remove_prefix(1);
+    host.remove_suffix(1);
+    if (!IsIPv6Valid(std::string(host))) {
+      is_valid_ = false;
+      return;
+    }
+  }
+
+  if (!is_ipv6_literal) {
+    if (auto host_opt = Strings::DecodePercentEncodedURL(host);
+        host_opt.has_value()) {
+      host_ = host_opt.value();
+      for (auto c : host_) {
+        if (!HostCharIsValid(c)) {
+          is_valid_ = false;
+          break;
+        }
+      }
+    } else {
+      is_valid_ = false;
+      host_ = host;
+    }
+  } else {
+    host_ = host;
+  }
+
+  ProcessHostDots();
+  if (host_.empty()) {
+    is_valid_ = false;
+  }
+
+  // Extract the port, if present.
+  if (port_idx != -1 && port_idx < idx) {
+    auto port_str = url_.substr(port_idx, idx - port_idx);
+    // Port www.google.com:0000000000000000000000080 is valid. So trim zeros.
+    Strings::TrimLeft(&port_str, "0");
+    if (port_str.empty()) {
+      port_ = 0;
+    } else if (auto is_int = port_str.find_first_not_of("0123456789");
+               is_int == std::string_view::npos &&
+               port_str.size() < 6 /* Max 65535 */) {
+      port_ = std::stoi(port_str.data());
+    } else {
+      is_valid_ = false;
+      return;
+    }
+
+    if (port_ > 65535) {
+      is_valid_ = false;
+      return;
+    }
+  }
+
+  if (port_ == 0) {
+    if (protocol_ == "http") {
+      port_ = 80;
+    } else if (protocol_ == "https") {
+      port_ = 443;
+    } else if (protocol_ == "ftp") {
+      port_ = 21;
+    } else if (protocol_ == "sftp") {
+      port_ = 22;
+    } else {
+      port_ = 0;
+    }
+  }
+}
+
+}  // namespace htmlparser
diff --git a/validator/cpp/htmlparser/url.h b/validator/cpp/htmlparser/url.h
new file mode 100644
index 0000000000000..41319591bd69a
--- /dev/null
+++ b/validator/cpp/htmlparser/url.h
@@ -0,0 +1,101 @@
+//
+// Copyright 2020 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.
+//
+// Uniform resouce locator parsing related static functions.
+
+#ifndef HTMLPARSER__URL_H_
+#define HTMLPARSER__URL_H_
+
+#include <arpa/inet.h>
+#include <cctype>
+#include <optional>
+#include <string>
+#include <string_view>
+
+namespace htmlparser {
+
+class URL {
+ public:
+  // returns: the protocol (scheme) of the URL, if one could be found, according
+  // to a strict interpretation of RFC 3986, Section 3.1. Otherwise returns the
+  // empty string. No normalization (e.g. lower casing) is performed, and
+  // no part of the URL is validated except the protocol. */
+  static std::string_view ProtocolStrict(std::string_view url);
+
+  explicit URL(std::string_view url);
+
+  // getters.
+  bool is_valid() const { return is_valid_; }
+  bool has_protocol() const { return has_protocol_; }
+  std::string protocol() const { return protocol_; }
+  std::string hostname() const { return host_; }
+  std::string login() const { return login_; }
+  int port() const { return port_; }
+
+ private:
+  static bool IsAlphaNum(uint8_t c) {
+    return (('0' <= c && c <= '9') ||
+            ('a' <= c && c <= 'z') ||
+            ('A' <= c && c <= 'Z'));
+  }
+
+  static bool IsProtocolCharValidChar(uint8_t c) {
+    return IsAlphaNum(c) || c == '+' || c == '-';
+  }
+
+  static bool IsPositiveInteger(std::string_view may_be_int) {
+    for (auto c : may_be_int) {
+      if (!std::isdigit(c)) return false;
+    }
+
+    return true;
+  }
+
+  static bool HostCharIsEnd(uint8_t c) {
+    return c == '#' || c == '/' || c == '?' || c == '\\';
+  }
+
+  static bool HostCharIsValid(uint8_t c) {
+    static constexpr std::string_view illegal_chars =
+        " !\"#$%&'()*+,/:;<=>?@[\\]^`{|}~";
+    return c > 0x1f /* unprintable */ &&
+        illegal_chars.find_first_of(c) == std::string_view::npos;
+  }
+
+  static bool IsIPv6Valid(const std::string& host) {
+    struct in6_addr result;
+    return inet_pton(AF_INET6, host.c_str(), &result) == 1;
+  }
+
+  static std::optional<std::string> UnescapeAndCheckHostname(
+      std::string_view hostname);
+  void ParseProtocol();
+  void ParseAuthority();
+  void ProcessHostDots();
+
+  std::string_view url_;
+  bool is_valid_;
+  bool has_protocol_;
+  std::string protocol_;
+  std::string_view scheme_specific_port_;
+  bool starts_with_double_slash_;
+  std::string login_;
+  std::string host_;
+  int port_;
+};
+
+}  // namespace htmlparser
+
+#endif  // HTMLPARSER__URL_H_
diff --git a/validator/cpp/htmlparser/url_test.cc b/validator/cpp/htmlparser/url_test.cc
new file mode 100644
index 0000000000000..8aefc01c4b434
--- /dev/null
+++ b/validator/cpp/htmlparser/url_test.cc
@@ -0,0 +1,255 @@
+//
+// Copyright 2020 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.
+//
+
+#include "url.h"
+
+#include "gtest/gtest.h"
+
+namespace htmlparser {
+
+TEST(URLTest, ProtocolStrictTest) {
+  std::string url("http://www.google.com");
+  EXPECT_EQ(URL::ProtocolStrict(url), "http");
+
+  url = "ftp://server1.google.com";
+  EXPECT_EQ(URL::ProtocolStrict(url), "ftp");
+
+  url = "/hello.html";
+  EXPECT_TRUE(URL::ProtocolStrict(url).empty());
+
+  url = "://google.com";
+  EXPECT_TRUE(URL::ProtocolStrict(url).empty());
+}
+
+TEST(URLTest, BasicTests) {
+  EXPECT_TRUE(URL("http://abc.com/").is_valid());
+  EXPECT_TRUE(URL("https://abc.com/").is_valid());
+  EXPECT_TRUE(URL("ftp://abc.com/").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3::abcd]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3::abcd]/").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3::abcd]/foobar").is_valid());
+  EXPECT_TRUE(URL("ftp://foo.com").is_valid());
+  EXPECT_TRUE(URL("HTTp://abc.com").is_valid());
+  EXPECT_TRUE(URL("HTTPs://[1:2:3::abcd]").is_valid());
+
+  // 0080 is a valid port number, browsers ignore leading zeros.
+  EXPECT_TRUE(URL("http://google.com:0080/").is_valid());
+  // IPv4
+  EXPECT_TRUE(URL("http://1.2.3.4").is_valid());
+  EXPECT_TRUE(URL("http://100.254.200.199:80").is_valid());
+
+  URL url("http://www.google.com/");
+  EXPECT_TRUE(url.has_protocol());
+  EXPECT_TRUE(url.is_valid());
+  EXPECT_EQ(url.protocol(), "http");
+  EXPECT_EQ(url.hostname(), "www.google.com");
+  EXPECT_EQ(url.port(), 80);
+
+  URL https_url("https://www.google.com/");
+  EXPECT_TRUE(https_url.has_protocol());
+  EXPECT_TRUE(https_url.is_valid());
+  EXPECT_EQ(https_url.protocol(), "https");
+  EXPECT_EQ(https_url.hostname(), "www.google.com");
+  EXPECT_EQ(https_url.port(), 443);
+
+  URL ftp_url("ftp://www.google.com/");
+  EXPECT_TRUE(ftp_url.has_protocol());
+  EXPECT_TRUE(ftp_url.is_valid());
+  EXPECT_EQ(ftp_url.protocol(), "ftp");
+  EXPECT_EQ(ftp_url.hostname(), "www.google.com");
+
+  URL sftp_url("sftp://www.google.com/");
+  EXPECT_TRUE(sftp_url.has_protocol());
+  EXPECT_TRUE(sftp_url.is_valid());
+  EXPECT_EQ(sftp_url.protocol(), "sftp");
+  EXPECT_EQ(sftp_url.hostname(), "www.google.com");
+
+  URL space_url("    http://www.google.com/");
+  EXPECT_TRUE(space_url.has_protocol());
+  EXPECT_TRUE(space_url.is_valid());
+  EXPECT_EQ(space_url.protocol(), "http");
+  EXPECT_EQ(space_url.hostname(), "www.google.com");
+
+  // Invalid char.
+  URL invalid_protocol("h||p://www.google.com");
+  EXPECT_FALSE(invalid_protocol.has_protocol());
+  EXPECT_TRUE(invalid_protocol.is_valid());
+  EXPECT_EQ(invalid_protocol.protocol(), "https" /* default to https */);
+
+  URL invalid_protocol2("foo bar:baz");
+  EXPECT_FALSE(invalid_protocol2.has_protocol());
+  EXPECT_TRUE(invalid_protocol2.is_valid());
+  EXPECT_EQ(invalid_protocol2.protocol(), "https" /* default to https */);
+
+  // Unrecognized protocol.
+  URL unrecognized("telnet://1.2.3.4");
+  EXPECT_TRUE(unrecognized.has_protocol());
+  EXPECT_TRUE(unrecognized.is_valid());
+  EXPECT_EQ(unrecognized.protocol(), "telnet");
+  EXPECT_EQ(url.hostname(), "www.google.com");
+
+  URL port_url("http://www.google.com:8080/");
+  EXPECT_TRUE(port_url.has_protocol());
+  EXPECT_TRUE(port_url.is_valid());
+  EXPECT_EQ(port_url.protocol(), "http");
+  EXPECT_EQ(port_url.hostname(), "www.google.com");
+  EXPECT_EQ(port_url.port(), 8080);
+
+  URL port_url2("http://www.google.com:0080/foo:8080");
+  EXPECT_EQ(port_url2.port(), 80);
+
+  // Invalid port.
+  URL invalid_port("http://www.google.com:99999/foo");
+  EXPECT_FALSE(invalid_port.is_valid());
+
+  // Username
+  URL username("http://foo:bar@www.google.com:8080/bio.html");
+  EXPECT_TRUE(username.is_valid());
+  EXPECT_EQ(username.login(), "foo:bar");
+
+  URL username2("http://foo@www.google.com:8080/bio.html");
+  EXPECT_EQ(username2.login(), "foo");
+
+  // IPV6.
+  URL ipv6("http://[::2]/foo");
+  EXPECT_TRUE(ipv6.is_valid());
+  EXPECT_EQ(ipv6.hostname(), "::2");
+
+  URL ipv62("http://foo:bar@[1:2:3::4]:8080/foo");
+  EXPECT_TRUE(ipv62.is_valid());
+  EXPECT_EQ(ipv62.hostname(), "1:2:3::4");
+  EXPECT_EQ(ipv62.protocol(), "http");
+  EXPECT_EQ(ipv62.login(), "foo:bar");
+  EXPECT_EQ(ipv62.port(), 8080);
+
+  // Invalid ipv6.
+  URL invalidipv6("http://[12345]/foo");
+  EXPECT_FALSE(invalidipv6.is_valid());
+
+  // Encoded hostname.
+  URL encoded("http://%77%77w%2e%67o%6f%67%6c%65%2e%63%6f%6d/");
+  EXPECT_TRUE(encoded.is_valid());
+
+  // Invalid characters in hostname.
+  EXPECT_FALSE(URL("http://example!.com/").is_valid());
+  EXPECT_FALSE(URL("http://example\x10.com/").is_valid());
+  EXPECT_FALSE(URL("http://example.com&/").is_valid());
+  // 0xff  - Invalid single byte unsigned char.
+  EXPECT_FALSE(URL("http://example-%ff.com/").is_valid());
+
+  // Accepts utf-8 chars in hostname.
+  EXPECT_TRUE(URL("http://⚡.com").is_valid());
+  EXPECT_TRUE(URL("http://⚡").is_valid());
+
+  // Empty host is invalid.
+  EXPECT_FALSE(URL("http:///").is_valid());
+}
+
+TEST(URLTest, IPv6Urls) {
+  // Checks all compression scenarios.
+  EXPECT_TRUE(URL("http://[1::a]").is_valid());
+  EXPECT_TRUE(URL("http://[1::ab]").is_valid());
+  EXPECT_TRUE(URL("http://[1::abc]").is_valid());
+  EXPECT_TRUE(URL("http://[1::abcd]").is_valid());
+  EXPECT_TRUE(URL("http://[1::abcd]").is_valid());
+  EXPECT_TRUE(URL("http://[11::abcd]").is_valid());
+  EXPECT_TRUE(URL("http://[111::abcd]").is_valid());
+  EXPECT_TRUE(URL("http://[1111::abcd]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2::a]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2::ab]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2::abc]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2::abcd]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3::a]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3::ab]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3::abc]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3::abcd]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3:4::a]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3:4::ab]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3:4::abc]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3:4::abcd]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3:4:5::a]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3:4:5::ab]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3:4:5::abc]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3:4:5::abcd]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3:4:5:6::a]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3:4:5:6::ab]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3:4:5:6::abc]").is_valid());
+  EXPECT_TRUE(URL("http://[1:2:3:4:5:6::abcd]").is_valid());
+
+  // Illegal characeters.
+  EXPECT_FALSE(URL("http://[abcd:123_:abcd::]").is_valid());
+  EXPECT_FALSE(URL("http://[abcd:123O:abcd::]").is_valid());
+  // Two compression not valid.
+  EXPECT_FALSE(URL("http://[a:b::c::d:e:f]").is_valid());
+  // Non hexadecimal character.
+  EXPECT_FALSE(URL("http://[xyz::abcd:0a]").is_valid());
+  // More than 4 bytes.
+  EXPECT_FALSE(URL("http://[abcd:1234:abcde::]").is_valid());
+
+  // Empty ipv6. atleast [::] needed.
+  EXPECT_FALSE(URL("http://[]").is_valid());
+  EXPECT_TRUE(URL("http://[::]").is_valid());
+}
+
+TEST(URLTest, PortNumbers) {
+  // Port number with userinfo field.
+  EXPECT_TRUE(URL("http://foo:bar@www.google.com:65535/").is_valid());
+  EXPECT_TRUE(URL("http://foo:@www.google.com:65535/").is_valid());
+  EXPECT_TRUE(URL("http://foo@www.google.com:65535/").is_valid());
+
+  // Port number > 65535.
+  EXPECT_FALSE(URL("http://www.google.com:100000/").is_valid());
+  EXPECT_FALSE(URL("http://www.google.com:65536/").is_valid());
+  EXPECT_FALSE(URL("http://foo:bar@www.google.com:65536/").is_valid());
+  EXPECT_FALSE(URL("http://foo:@www.google.com:65536/").is_valid());
+  EXPECT_FALSE(URL("http://foo@www.google.com:65536/").is_valid());
+
+  // Empty port.
+  URL url("https://www.google.com:/");
+  EXPECT_TRUE(url.is_valid());
+  EXPECT_EQ(url.port(), 443);
+
+  // Port number beginning with 0.
+  URL url2("https://www.google.com:01");
+  EXPECT_TRUE(url2.is_valid());
+  EXPECT_EQ(url2.port(), 1);
+
+  EXPECT_TRUE(
+      URL("https://www.google.com:000000000000000000000000000080").is_valid());
+  EXPECT_FALSE(
+      URL("https://www.google.com:123456789012345678901234567890").is_valid());
+  EXPECT_FALSE(URL("https://www.google.com:1234 5").is_valid());
+  EXPECT_FALSE(URL("https://www.google.com:1234a").is_valid());
+  EXPECT_FALSE(URL("https://www.google.com:a1234").is_valid());
+  EXPECT_FALSE(URL("https://www.google.com:123:45").is_valid());
+  EXPECT_FALSE(
+      URL("https://www.google.com:                      123").is_valid());
+}
+
+TEST(URLTest, UserInfoFields) {
+  EXPECT_TRUE(URL("http://foo:bar@example.site").is_valid());
+
+  // Can contain any character including space.
+  EXPECT_TRUE(URL("http://foo bar:baz@example.site").is_valid());
+
+  // Both userinfo and port.
+  EXPECT_TRUE(URL("http://foo:bar@example.site:9000/").is_valid());
+  // Empty password in userinfo.
+  EXPECT_TRUE(URL("http://foo:@example.site:12345/").is_valid());
+  EXPECT_TRUE(URL("http://foo@example.site:12345/").is_valid());
+}
+
+}  // namespace htmlparser
diff --git a/validator/htmlparser/whitespacetable.h b/validator/cpp/htmlparser/whitespacetable.h
similarity index 100%
rename from validator/htmlparser/whitespacetable.h
rename to validator/cpp/htmlparser/whitespacetable.h
diff --git a/validator/engine/css-selectors.js b/validator/engine/css-selectors.js
deleted file mode 100644
index 3a16ed6841b20..0000000000000
--- a/validator/engine/css-selectors.js
+++ /dev/null
@@ -1,916 +0,0 @@
-/**
- * @license DEDUPE_ON_MINIFY
- * Copyright 2015 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.
- */
-goog.provide('parse_css.AttrSelector');
-goog.provide('parse_css.ClassSelector');
-goog.provide('parse_css.Combinator');
-goog.provide('parse_css.IdSelector');
-goog.provide('parse_css.PseudoSelector');
-goog.provide('parse_css.Selector');
-goog.provide('parse_css.SelectorVisitor');
-goog.provide('parse_css.SelectorsGroup');
-goog.provide('parse_css.SimpleSelectorSequence');
-goog.provide('parse_css.TypeSelector');
-goog.provide('parse_css.parseAClassSelector');
-goog.provide('parse_css.parseASelector');
-goog.provide('parse_css.parseASelectorsGroup');
-goog.provide('parse_css.parseASimpleSelectorSequence');
-goog.provide('parse_css.parseATypeSelector');
-goog.provide('parse_css.parseAnAttrSelector');
-goog.provide('parse_css.parseAnIdSelector');
-goog.provide('parse_css.parseSelectors');
-goog.provide('parse_css.traverseSelectors');
-goog.require('amp.validator.ValidationError');
-goog.require('goog.asserts');
-goog.require('parse_css.ErrorToken');
-goog.require('parse_css.TRIVIAL_ERROR_TOKEN');
-goog.require('parse_css.Token');
-goog.require('parse_css.TokenStream');
-goog.require('parse_css.extractAFunction');
-
-/**
- * Abstract super class for CSS Selectors. The Token class, which this
- * class inherits from, has line, col, and tokenType fields.
- */
-parse_css.Selector = class extends parse_css.Token {
-  /** @param {function(!parse_css.Selector)} lambda */
-  forEachChild(lambda) {}
-
-  /** @param {!parse_css.SelectorVisitor} visitor */
-  accept(visitor) {}
-};
-
-/**
- * A super class for making visitors (by overriding the types of interest).
- * The parse_css.traverseSelectros function can be used to visit nodes in a
- * parsed CSS selector.
- */
-parse_css.SelectorVisitor = class {
-  constructor() {}
-
-  /** @param {!parse_css.TypeSelector} typeSelector */
-  visitTypeSelector(typeSelector) {}
-
-  /** @param {!parse_css.IdSelector} idSelector */
-  visitIdSelector(idSelector) {}
-
-  /** @param {!parse_css.AttrSelector} attrSelector */
-  visitAttrSelector(attrSelector) {}
-
-  /** @param {!parse_css.PseudoSelector} pseudoSelector */
-  visitPseudoSelector(pseudoSelector) {}
-
-  /** @param {!parse_css.ClassSelector} classSelector */
-  visitClassSelector(classSelector) {}
-
-  /** @param {!parse_css.SimpleSelectorSequence} sequence */
-  visitSimpleSelectorSequence(sequence) {}
-
-  /** @param {!parse_css.Combinator} combinator */
-  visitCombinator(combinator) {}
-
-  /** @param {!parse_css.SelectorsGroup} group */
-  visitSelectorsGroup(group) {}
-};
-
-/**
- * Visits selectorNode and its children, recursively, by calling the
- * appropriate methods on the provided visitor.
- * @param {!parse_css.Selector} selectorNode
- * @param {!parse_css.SelectorVisitor} visitor
- */
-parse_css.traverseSelectors = function(selectorNode, visitor) {
-  /** @type {!Array<!parse_css.Selector>} */
-  const toVisit = [selectorNode];
-  while (toVisit.length > 0) {
-    /** @type {!parse_css.Selector} */
-    const node = toVisit.shift();
-    node.accept(visitor);
-    node.forEachChild(child => {
-      toVisit.push(child);
-    });
-  }
-};
-
-/**
- * This node models type selectors and universial selectors.
- * http://www.w3.org/TR/css3-selectors/#type-selectors
- * http://www.w3.org/TR/css3-selectors/#universal-selector
- */
-parse_css.TypeSelector = class extends parse_css.Selector {
-  /**
-   * Choices for namespacePrefix:
-   * - 'a specific namespace prefix' means 'just that specific namespace'.
-   * - '' means 'without a namespace'
-   * - '*' means 'any namespace including without a namespace'
-   * - null means the default namespace if one is declared, and '*' otherwise.
-   *
-   * The universal selector is covered by setting the elementName to '*'.
-   *
-   * @param {?string} namespacePrefix
-   * @param {string} elementName
-   */
-  constructor(namespacePrefix, elementName) {
-    super();
-    /** @type {?string} */
-    this.namespacePrefix = namespacePrefix;
-    /** @type {string} */
-    this.elementName = elementName;
-    /** @type {parse_css.TokenType} */
-    this.tokenType = parse_css.TokenType.TYPE_SELECTOR;
-  }
-
-  /**
-   * Serializes the selector to a string (in this case CSS syntax that
-   * could be used to recreate it).
-   * @return {string}
-   */
-  toString() {
-    if (this.namespacePrefix === null) {
-      return this.elementName;
-    }
-    return this.namespacePrefix + '|' + this.elementName;
-  }
-
-  /** @inheritDoc */
-  accept(visitor) {
-    visitor.visitTypeSelector(this);
-  }
-};
-/** @inheritDoc */
-parse_css.TypeSelector.prototype.toJSON = function() {
-  const json = parse_css.Selector.prototype.toJSON.call(this);
-  json['namespacePrefix'] = this.namespacePrefix;
-  json['elementName'] = this.elementName;
-  return json;
-};
-
-/**
- * Helper function for determining whether the provided token is a specific
- * delimiter.
- * @param {!parse_css.Token} token
- * @param {string} delimChar
- * @return {boolean}
- */
-function isDelim(token, delimChar) {
-  return token.tokenType === parse_css.TokenType.DELIM &&
-  /** @type {!parse_css.DelimToken} */ (token).value === delimChar;
-}
-
-/**
- * tokenStream.current() is the first token of the type selector.
- * @param {!parse_css.TokenStream} tokenStream
- * @return {!parse_css.TypeSelector}
- */
-parse_css.parseATypeSelector = function(tokenStream) {
-  /** @type {?string} */
-  let namespacePrefix = null;
-  /** @type {string} */
-  let elementName = '*';
-  const start = tokenStream.current();
-
-  if (isDelim(tokenStream.current(), '|')) {
-    namespacePrefix = '';
-    tokenStream.consume();
-  } else if (
-    isDelim(tokenStream.current(), '*') && isDelim(tokenStream.next(), '|')) {
-    namespacePrefix = '*';
-    tokenStream.consume();
-    tokenStream.consume();
-  } else if (
-    tokenStream.current().tokenType === parse_css.TokenType.IDENT &&
-      isDelim(tokenStream.next(), '|')) {
-    const ident = /** @type {!parse_css.IdentToken} */ (tokenStream.current());
-    namespacePrefix = ident.value;
-    tokenStream.consume();
-    tokenStream.consume();
-  }
-  if (isDelim(tokenStream.current(), '*')) {
-    elementName = '*';
-    tokenStream.consume();
-  } else if (tokenStream.current().tokenType === parse_css.TokenType.IDENT) {
-    const ident = /** @type {!parse_css.IdentToken} */ (tokenStream.current());
-    elementName = ident.value;
-    tokenStream.consume();
-  }
-  return start.copyPosTo(
-      new parse_css.TypeSelector(namespacePrefix, elementName));
-};
-
-/**
- * An ID selector references some document id.
- * http://www.w3.org/TR/css3-selectors/#id-selectors
- * Typically written as '#foo'.
- */
-parse_css.IdSelector = class extends parse_css.Selector {
-  /**
-   * @param {string} value
-   */
-  constructor(value) {
-    super();
-    /** @type {string} */
-    this.value = value;
-    /** @type {parse_css.TokenType} */
-    this.tokenType = parse_css.TokenType.ID_SELECTOR;
-  }
-
-  /** @return {string} */
-  toString() {
-    return '#' + this.value;
-  }
-
-  /** @inheritDoc */
-  accept(visitor) {
-    visitor.visitIdSelector(this);
-  }
-};
-/** @inheritDoc */
-parse_css.IdSelector.prototype.toJSON = function() {
-  const json = parse_css.Selector.prototype.toJSON.call(this);
-  json['value'] = this.value;
-  return json;
-};
-
-/**
- * tokenStream.current() must be the hash token.
- * @param {!parse_css.TokenStream} tokenStream
- * @return {!parse_css.IdSelector}
- */
-parse_css.parseAnIdSelector = function(tokenStream) {
-  goog.asserts.assert(
-      tokenStream.current().tokenType === parse_css.TokenType.HASH,
-      'Precondition violated: must start with HashToken');
-  const hash = /** @type {!parse_css.HashToken} */ (tokenStream.current());
-  tokenStream.consume();
-  return hash.copyPosTo(new parse_css.IdSelector(hash.value));
-};
-
-/**
- * An attribute selector matches document nodes based on their attributes.
- * http://www.w3.org/TR/css3-selectors/#attribute-selectors
- *
- * Typically written as '[foo=bar]'.
- */
-parse_css.AttrSelector = class extends parse_css.Selector {
-  /**
-   * @param {?string} namespacePrefix
-   * @param {string} attrName
-   * @param {string} matchOperator is either the string
-   * representation of the match operator (e.g., '=' or '~=') or '',
-   * in which case the attribute selector is a check for the presence
-   * of the attribute.
-   * @param {string} value is the value to apply the match operator
-   * against, or if matchOperator is '', then this must be empty as
-   * well.
-   */
-  constructor(namespacePrefix, attrName, matchOperator, value) {
-    super();
-    /** @type {?string} */
-    this.namespacePrefix = namespacePrefix;
-    /** @type {string} */
-    this.attrName = attrName;
-    /** @type {string} */
-    this.matchOperator = matchOperator;
-    /** @type {string} */
-    this.value = value;
-    /** @type {parse_css.TokenType} */
-    this.tokenType = parse_css.TokenType.ATTR_SELECTOR;
-  }
-
-  /** @inheritDoc */
-  accept(visitor) {
-    visitor.visitAttrSelector(this);
-  }
-};
-/** @inheritDoc */
-parse_css.AttrSelector.prototype.toJSON = function() {
-  const json = parse_css.Selector.prototype.toJSON.call(this);
-  json['namespacePrefix'] = this.namespacePrefix;
-  json['attrName'] = this.attrName;
-  json['matchOperator'] = this.matchOperator;
-  json['value'] = this.value;
-  return json;
-};
-
-/**
- * Helper for parseAnAttrSelector.
- * @private
- * @param {!parse_css.Token} start
- * @return {!parse_css.ErrorToken}
- */
-function newInvalidAttrSelectorError(start) {
-  return start.copyPosTo(new parse_css.ErrorToken(
-      amp.validator.ValidationError.Code.CSS_SYNTAX_INVALID_ATTR_SELECTOR,
-      ['style']));
-}
-
-/**
- * tokenStream.current() must be the open square token.
- * @param {!parse_css.TokenStream} tokenStream
- * @return {!parse_css.AttrSelector|!parse_css.ErrorToken}
- */
-parse_css.parseAnAttrSelector = function(tokenStream) {
-  goog.asserts.assert(
-      tokenStream.current().tokenType === parse_css.TokenType.OPEN_SQUARE,
-      'Precondition violated: must be an OpenSquareToken');
-  const start = tokenStream.current();
-  tokenStream.consume(); // Consumes '['.
-  if (tokenStream.current().tokenType === parse_css.TokenType.WHITESPACE) {
-    tokenStream.consume();
-  }
-  // This part is defined in https://www.w3.org/TR/css3-selectors/#attrnmsp:
-  // Attribute selectors and namespaces. It is similar to parseATypeSelector.
-  let namespacePrefix = null;
-  if (isDelim(tokenStream.current(), '|')) {
-    namespacePrefix = '';
-    tokenStream.consume();
-  } else if (
-    isDelim(tokenStream.current(), '*') && isDelim(tokenStream.next(), '|')) {
-    namespacePrefix = '*';
-    tokenStream.consume();
-    tokenStream.consume();
-  } else if (
-    tokenStream.current().tokenType === parse_css.TokenType.IDENT &&
-      isDelim(tokenStream.next(), '|')) {
-    const ident = /** @type {!parse_css.IdentToken} */ (tokenStream.current());
-    namespacePrefix = ident.value;
-    tokenStream.consume();
-    tokenStream.consume();
-  }
-  // Now parse the attribute name. This part is mandatory.
-  if (!(tokenStream.current().tokenType === parse_css.TokenType.IDENT)) {
-    return newInvalidAttrSelectorError(start);
-  }
-  const ident = /** @type {!parse_css.IdentToken} */ (tokenStream.current());
-  const attrName = ident.value;
-  tokenStream.consume();
-  if (tokenStream.current().tokenType === parse_css.TokenType.WHITESPACE) {
-    tokenStream.consume();
-  }
-
-  // After the attribute name, we may see an operator; if we do, then
-  // we must see either a string or an identifier. This covers
-  // 6.3.1 Attribute presence and value selectors
-  // (https://www.w3.org/TR/css3-selectors/#attribute-representation) and
-  // 6.3.2 Substring matching attribute selectors
-  // (https://www.w3.org/TR/css3-selectors/#attribute-substrings).
-
-  /** @type {string} */
-  let matchOperator = '';
-  const current = tokenStream.current().tokenType;
-  if (isDelim(tokenStream.current(), '=')) {
-    matchOperator = '=';
-    tokenStream.consume();
-  } else if (current === parse_css.TokenType.INCLUDE_MATCH) {
-    matchOperator = '~=';
-    tokenStream.consume();
-  } else if (current === parse_css.TokenType.DASH_MATCH) {
-    matchOperator = '|=';
-    tokenStream.consume();
-  } else if (current === parse_css.TokenType.PREFIX_MATCH) {
-    matchOperator = '^=';
-    tokenStream.consume();
-  } else if (current === parse_css.TokenType.SUFFIX_MATCH) {
-    matchOperator = '$=';
-    tokenStream.consume();
-  } else if (current === parse_css.TokenType.SUBSTRING_MATCH) {
-    matchOperator = '*=';
-    tokenStream.consume();
-  }
-  if (tokenStream.current().tokenType === parse_css.TokenType.WHITESPACE) {
-    tokenStream.consume();
-  }
-  /** @type {string} */
-  let value = '';
-  if (matchOperator !== '') { // If we saw an operator, parse the value.
-    const current = tokenStream.current().tokenType;
-    if (current === parse_css.TokenType.IDENT) {
-      const ident =
-      /** @type {!parse_css.IdentToken} */ (tokenStream.current());
-      value = ident.value;
-      tokenStream.consume();
-    } else if (current === parse_css.TokenType.STRING) {
-      const str = /** @type {!parse_css.StringToken} */ (tokenStream.current());
-      value = str.value;
-      tokenStream.consume();
-    }
-  }
-  if (tokenStream.current().tokenType === parse_css.TokenType.WHITESPACE) {
-    tokenStream.consume();
-  }
-  // The attribute selector must in any case terminate with a close square
-  // token.
-  if (tokenStream.current().tokenType !== parse_css.TokenType.CLOSE_SQUARE) {
-    return newInvalidAttrSelectorError(start);
-  }
-  tokenStream.consume();
-  const selector = new parse_css.AttrSelector(
-      namespacePrefix, attrName, matchOperator, value);
-  return start.copyPosTo(selector);
-};
-
-/**
- * A pseudo selector can match either pseudo classes or pseudo elements.
- * http://www.w3.org/TR/css3-selectors/#pseudo-classes
- * http://www.w3.org/TR/css3-selectors/#pseudo-elements.
- *
- * Typically written as ':visited', ':lang(fr)', and '::first-line'.
- *
- * isClass: Pseudo selectors with a single colon (e.g., ':visited')
- * are pseudo class selectors. Selectors with two colons (e.g.,
- * '::first-line') are pseudo elements.
- *
- * func: If it's a function style pseudo selector, like lang(fr), then func
- * the function tokens. TODO(powdercloud): parse this in more detail.
- */
-parse_css.PseudoSelector = class extends parse_css.Selector {
-  /**
-   * @param {boolean} isClass
-   * @param {string} name
-   * @param {!Array<!parse_css.Token>} func
-   */
-  constructor(isClass, name, func) {
-    super();
-    /** @type {boolean} */
-    this.isClass = isClass;
-    /** @type {string} */
-    this.name = name;
-    /** @type {!Array<!parse_css.Token>} */
-    this.func = func;
-    /** @type {parse_css.TokenType} */
-    this.tokenType = parse_css.TokenType.PSEUDO_SELECTOR;
-  }
-
-  /** @inheritDoc */
-  accept(visitor) {
-    visitor.visitPseudoSelector(this);
-  }
-};
-/** @inheritDoc */
-parse_css.PseudoSelector.prototype.toJSON = function() {
-  const json = parse_css.Selector.prototype.toJSON.call(this);
-  json['isClass'] = this.isClass;
-  json['name'] = this.name;
-  if (this.func.length !== 0) {
-    json['func'] = recursiveArrayToJSON(this.func);
-  }
-  return json;
-};
-
-/**
- * tokenStream.current() must be the ColonToken. Returns an error if
- * the pseudo token can't be parsed (e.g., a lone ':').
- * @param {!parse_css.TokenStream} tokenStream
- * @return {!parse_css.PseudoSelector|!parse_css.ErrorToken}
- */
-parse_css.parseAPseudoSelector = function(tokenStream) {
-  goog.asserts.assert(
-      tokenStream.current().tokenType === parse_css.TokenType.COLON,
-      'Precondition violated: must be a ":"');
-  const firstColon = tokenStream.current();
-  tokenStream.consume();
-  let isClass = true;
-  if (tokenStream.current().tokenType === parse_css.TokenType.COLON) {
-    // '::' starts a pseudo element, ':' starts a pseudo class.
-    isClass = false;
-    tokenStream.consume();
-  }
-  if (tokenStream.current().tokenType === parse_css.TokenType.IDENT) {
-    const ident = /** @type {!parse_css.IdentToken} */ (tokenStream.current());
-    const name = ident.value;
-    tokenStream.consume();
-    return firstColon.copyPosTo(
-        new parse_css.PseudoSelector(isClass, name, []));
-  } else if (
-    tokenStream.current().tokenType === parse_css.TokenType.FUNCTION_TOKEN) {
-    const funcToken =
-    /** @type {!parse_css.FunctionToken} */ (tokenStream.current());
-    /**  @type {!Array<!parse_css.ErrorToken>} */
-    const errors = [];
-    const func = parse_css.extractAFunction(tokenStream, errors);
-    if (errors.length > 0)
-    {return errors[0];}
-    tokenStream.consume();
-    return firstColon.copyPosTo(
-        new parse_css.PseudoSelector(isClass, funcToken.value, func));
-  } else {
-    return firstColon.copyPosTo(new parse_css.ErrorToken(
-        amp.validator.ValidationError.Code.CSS_SYNTAX_ERROR_IN_PSEUDO_SELECTOR,
-        ['style']));
-  }
-};
-
-/**
- * A class selector of the form '.value' is a shorthand notation for
- * an attribute match of the form '[class~=value]'.
- * http://www.w3.org/TR/css3-selectors/#class-html
- */
-parse_css.ClassSelector = class extends parse_css.Selector {
-  /**
-   * @param {string} value the class to match.
-   */
-  constructor(value) {
-    super();
-    /** @type {string} */
-    this.value = value;
-    /** @type {parse_css.TokenType} */
-    this.tokenType = parse_css.TokenType.CLASS_SELECTOR;
-  }
-  /** @return {string} */
-  toString() {
-    return '.' + this.value;
-  }
-
-  /** @inheritDoc */
-  accept(visitor) {
-    visitor.visitClassSelector(this);
-  }
-};
-/** @inheritDoc */
-parse_css.ClassSelector.prototype.toJSON = function() {
-  const json = parse_css.Selector.prototype.toJSON.call(this);
-  json['value'] = this.value;
-  return json;
-};
-
-/**
- * tokenStream.current() must be the '.' delimiter token.
- * @param {!parse_css.TokenStream} tokenStream
- * @return {!parse_css.ClassSelector}
- */
-parse_css.parseAClassSelector = function(tokenStream) {
-  goog.asserts.assert(
-      isDelim(tokenStream.current(), '.') &&
-          tokenStream.next().tokenType === parse_css.TokenType.IDENT,
-      'Precondition violated: must start with "." and follow with ident');
-  const dot = tokenStream.current();
-  tokenStream.consume();
-  const ident = /** @type {!parse_css.IdentToken} */ (tokenStream.current());
-  tokenStream.consume();
-  return dot.copyPosTo(new parse_css.ClassSelector(ident.value));
-};
-
-
-/**
- * @param {!Array<!Object>} array
- * @return {!Array<string>}
- */
-function recursiveArrayToJSON(array) {
-  const json = [];
-  for (const entry of array) {
-    json.push(entry.toJSON());
-  }
-  return json;
-}
-
-/**
- * Models a simple selector sequence, e.g. '*|foo#id'.
- */
-parse_css.SimpleSelectorSequence = class extends parse_css.Selector {
-  /**
-   * @param {!parse_css.TypeSelector} typeSelector
-   * @param {!Array<!parse_css.Selector>} otherSelectors
-   */
-  constructor(typeSelector, otherSelectors) {
-    super();
-    /** @type {!parse_css.TypeSelector} */
-    this.typeSelector = typeSelector;
-    /** @type {!Array<!parse_css.Selector>} */
-    this.otherSelectors = otherSelectors;
-    /** @type {parse_css.TokenType} */
-    this.tokenType = parse_css.TokenType.SIMPLE_SELECTOR_SEQUENCE;
-  }
-
-  /** @inheritDoc */
-  forEachChild(lambda) {
-    lambda(this.typeSelector);
-    for (const other of this.otherSelectors) {
-      lambda(other);
-    }
-  }
-
-  /** @inheritDoc */
-  accept(visitor) {
-    visitor.visitSimpleSelectorSequence(this);
-  }
-};
-/** @inheritDoc */
-parse_css.SimpleSelectorSequence.prototype.toJSON = function() {
-  const json = parse_css.Selector.prototype.toJSON.call(this);
-  json['typeSelector'] = this.typeSelector.toJSON();
-  json['otherSelectors'] = recursiveArrayToJSON(this.otherSelectors);
-  return json;
-};
-
-/**
- * tokenStream.current must be the first token of the sequence.
- * This function will return an error if no selector is found.
- * @param {!parse_css.TokenStream} tokenStream
- * @return {!parse_css.SimpleSelectorSequence|!parse_css.ErrorToken}
- */
-parse_css.parseASimpleSelectorSequence = function(tokenStream) {
-  const start = tokenStream.current();
-  let typeSelector = null;
-  if (isDelim(tokenStream.current(), '*') ||
-      isDelim(tokenStream.current(), '|') ||
-      tokenStream.current().tokenType === parse_css.TokenType.IDENT) {
-    typeSelector = parse_css.parseATypeSelector(tokenStream);
-  }
-  /** @type {!Array<!parse_css.Selector>} */
-  const otherSelectors = [];
-  while (true) {
-    if (tokenStream.current().tokenType === parse_css.TokenType.HASH) {
-      otherSelectors.push(parse_css.parseAnIdSelector(tokenStream));
-    } else if (
-      isDelim(tokenStream.current(), '.') &&
-        tokenStream.next().tokenType === parse_css.TokenType.IDENT) {
-      otherSelectors.push(parse_css.parseAClassSelector(tokenStream));
-    } else if (
-      tokenStream.current().tokenType === parse_css.TokenType.OPEN_SQUARE) {
-      const maybeAttrSelector = parse_css.parseAnAttrSelector(tokenStream);
-      if (maybeAttrSelector.tokenType === parse_css.TokenType.ERROR) {
-        return /** @type {!parse_css.ErrorToken} */ (maybeAttrSelector);
-      }
-      otherSelectors.push(
-          /** @type {!parse_css.Selector} */ (maybeAttrSelector));
-    } else if (tokenStream.current().tokenType === parse_css.TokenType.COLON) {
-      const maybePseudo = parse_css.parseAPseudoSelector(tokenStream);
-      if (maybePseudo.tokenType === parse_css.TokenType.ERROR) {
-        return /** @type {!parse_css.ErrorToken} */ (maybePseudo);
-      }
-      otherSelectors.push(/** @type {!parse_css.Selector} */ (maybePseudo));
-      // NOTE: If adding more 'else if' clauses here, be sure to udpate
-      // isSimpleSelectorSequenceStart accordingly.
-    } else {
-      if (typeSelector === null) {
-        if (otherSelectors.length == 0) {
-          return tokenStream.current().copyPosTo(new parse_css.ErrorToken(
-              amp.validator.ValidationError.Code.CSS_SYNTAX_MISSING_SELECTOR,
-              ['style']));
-        }
-        // If no type selector is given then the universal selector is implied.
-        typeSelector = start.copyPosTo(new parse_css.TypeSelector(
-            /*namespacePrefix=*/null, /*elementName=*/'*'));
-      }
-      return start.copyPosTo(
-          new parse_css.SimpleSelectorSequence(typeSelector, otherSelectors));
-    }
-  }
-};
-
-/**
- * @enum {string}
- */
-parse_css.CombinatorType = {
-  'DESCENDANT': 'DESCENDANT',
-  'CHILD': 'CHILD',
-  'ADJACENT_SIBLING': 'ADJACENT_SIBLING',
-  'GENERAL_SIBLING': 'GENERAL_SIBLING',
-};
-
-/**
- * Models a combinator, as described in
- * http://www.w3.org/TR/css3-selectors/#combinators.
- */
-parse_css.Combinator = class extends parse_css.Selector {
-  /**
-   * @param {!parse_css.CombinatorType} combinatorType
-   * @param {!parse_css.SimpleSelectorSequence|!parse_css.Combinator} left
-   * @param {!parse_css.SimpleSelectorSequence} right
-   */
-  constructor(combinatorType, left, right) {
-    super();
-    /** @type {!parse_css.CombinatorType} */
-    this.combinatorType = combinatorType;
-    /** @type {!parse_css.SimpleSelectorSequence|!parse_css.Combinator} */
-    this.left = left;
-    /** @type {!parse_css.SimpleSelectorSequence} */
-    this.right = right;
-    /** @type {parse_css.TokenType} */
-    this.tokenType = parse_css.TokenType.COMBINATOR;
-  }
-
-  /** @inheritDoc */
-  forEachChild(lambda) {
-    lambda(this.left);
-    lambda(this.right);
-  }
-
-  /** @inheritDoc */
-  accept(visitor) {
-    visitor.visitCombinator(this);
-  }
-};
-/** @inheritDoc */
-parse_css.Combinator.prototype.toJSON = function() {
-  const json = parse_css.Selector.prototype.toJSON.call(this);
-  json['combinatorType'] = this.combinatorType;
-  json['left'] = this.left.toJSON();
-  json['right'] = this.right.toJSON();
-  return json;
-};
-
-/**
- * The CombinatorType for a given token; helper function used when
- * constructing a Combinator instance.
- * @param {!parse_css.Token} token
- * @return {!parse_css.CombinatorType}
- */
-function combinatorTypeForToken(token) {
-  if (token.tokenType === parse_css.TokenType.WHITESPACE) {
-    return parse_css.CombinatorType.DESCENDANT;
-  } else if (isDelim(token, '>')) {
-    return parse_css.CombinatorType.CHILD;
-  } else if (isDelim(token, '+')) {
-    return parse_css.CombinatorType.ADJACENT_SIBLING;
-  } else if (isDelim(token, '~')) {
-    return parse_css.CombinatorType.GENERAL_SIBLING;
-  }
-  goog.asserts.fail('Internal Error: not a combinator token');
-}
-
-/**
- * Whether or not the provided token could be the start of a simple
- * selector sequence. See the simple_selector_sequence production in
- * http://www.w3.org/TR/css3-selectors/#grammar.
- * @param {!parse_css.Token} token
- * @return {boolean}
- */
-function isSimpleSelectorSequenceStart(token) {
-  // Type selector start.
-  if (isDelim(token, '*') || isDelim(token, '|') ||
-      (token.tokenType === parse_css.TokenType.IDENT)) {
-    return true;
-  }
-  // Id selector start.
-  if (token.tokenType === parse_css.TokenType.HASH) {
-    return true;
-  }
-  // Class selector start.
-  if (isDelim(token, '.')) {
-    return true;
-  }
-  // Attr selector start.
-  if (token.tokenType === parse_css.TokenType.OPEN_SQUARE) {
-    return true;
-  }
-  // A pseudo selector.
-  if (token.tokenType === parse_css.TokenType.COLON) {
-    return true;
-  }
-  // TODO(johannes): add the others.
-  return false;
-}
-
-/**
- * The selector production from
- * http://www.w3.org/TR/css3-selectors/#grammar
- * Returns an ErrorToken if no selector is found.
- * @param {!parse_css.TokenStream} tokenStream
- * @return {!parse_css.SimpleSelectorSequence|
- *          !parse_css.Combinator|!parse_css.ErrorToken}
- */
-parse_css.parseASelector = function(tokenStream) {
-  if (!isSimpleSelectorSequenceStart(tokenStream.current())) {
-    return tokenStream.current().copyPosTo(new parse_css.ErrorToken(
-        amp.validator.ValidationError.Code.CSS_SYNTAX_NOT_A_SELECTOR_START,
-        ['style']));
-  }
-  const parsed = parse_css.parseASimpleSelectorSequence(tokenStream);
-  if (parsed.tokenType === parse_css.TokenType.ERROR) {
-    return parsed;
-  }
-  let left = /** @type {!parse_css.SimpleSelectorSequence}*/ (parsed);
-  while (true) {
-    // Consume whitespace in front of combinators, while being careful
-    // to not eat away the infamous "whitespace operator" (sigh, haha).
-    if ((tokenStream.current().tokenType === parse_css.TokenType.WHITESPACE) &&
-        !isSimpleSelectorSequenceStart(tokenStream.next())) {
-      tokenStream.consume();
-    }
-    // If present, grab the combinator token which we'll use for line
-    // / column info.
-    if (!(((tokenStream.current().tokenType ===
-            parse_css.TokenType.WHITESPACE) &&
-           isSimpleSelectorSequenceStart(tokenStream.next())) ||
-          isDelim(tokenStream.current(), '+') ||
-          isDelim(tokenStream.current(), '>') ||
-          isDelim(tokenStream.current(), '~'))) {
-      return left;
-    }
-    const combinatorToken = tokenStream.current();
-    tokenStream.consume();
-    if (tokenStream.current().tokenType === parse_css.TokenType.WHITESPACE) {
-      tokenStream.consume();
-    }
-    const right = parse_css.parseASimpleSelectorSequence(tokenStream);
-    if (right.tokenType === parse_css.TokenType.ERROR) {
-      return right; // TODO(johannes): more than one error / partial tree.
-    }
-    left = combinatorToken.copyPosTo(new parse_css.Combinator(
-        combinatorTypeForToken(combinatorToken), left,
-        /** @type {!parse_css.SimpleSelectorSequence} */ (right)));
-  }
-};
-
-/**
- * Models a selectors group, as described in
- * http://www.w3.org/TR/css3-selectors/#grouping.
- */
-parse_css.SelectorsGroup = class extends parse_css.Selector {
-  /**
-   * @param {!Array<!parse_css.SimpleSelectorSequence|
-   *         !parse_css.Combinator>} elements
-   */
-  constructor(elements) {
-    super();
-    /** @type {!Array<!parse_css.SimpleSelectorSequence|
-        !parse_css.Combinator>} */
-    this.elements = elements;
-    /** @type {parse_css.TokenType} */
-    this.tokenType = parse_css.TokenType.SELECTORS_GROUP;
-  }
-
-  /** @inheritDoc */
-  forEachChild(lambda) {
-    for (const child of this.elements) {
-      lambda(child);
-    }
-  }
-
-  /** @param {!parse_css.SelectorVisitor} visitor */
-  accept(visitor) {
-    visitor.visitSelectorsGroup(this);
-  }
-};
-/** @inheritDoc */
-parse_css.SelectorsGroup.prototype.toJSON = function() {
-  const json = parse_css.Selector.prototype.toJSON.call(this);
-  json['elements'] = recursiveArrayToJSON(this.elements);
-  return json;
-};
-
-/**
- * The selectors_group production from
- * http://www.w3.org/TR/css3-selectors/#grammar.
- * In addition, this parsing routine checks that no input remains,
- * that is, after parsing the production we reached the end of |token_stream|.
- * @param {!parse_css.TokenStream} tokenStream
- * @return {!parse_css.SelectorsGroup|
- *          !parse_css.SimpleSelectorSequence|!parse_css.Combinator|
- *          !parse_css.ErrorToken}
- */
-parse_css.parseASelectorsGroup = function(tokenStream) {
-  if (!isSimpleSelectorSequenceStart(tokenStream.current())) {
-    return tokenStream.current().copyPosTo(new parse_css.ErrorToken(
-        amp.validator.ValidationError.Code.CSS_SYNTAX_NOT_A_SELECTOR_START,
-        ['style']));
-  }
-  const start = tokenStream.current();
-  const elements = [parse_css.parseASelector(tokenStream)];
-  if (elements[0].tokenType === parse_css.TokenType.ERROR) {
-    return elements[0];
-  }
-  while (true) {
-    if (tokenStream.current().tokenType === parse_css.TokenType.WHITESPACE) {
-      tokenStream.consume();
-    }
-    if (tokenStream.current().tokenType === parse_css.TokenType.COMMA) {
-      tokenStream.consume();
-      if (tokenStream.current().tokenType === parse_css.TokenType.WHITESPACE) {
-        tokenStream.consume();
-      }
-      elements.push(parse_css.parseASelector(tokenStream));
-      if (elements[elements.length - 1].tokenType ===
-          parse_css.TokenType.ERROR) {
-        return elements[elements.length - 1];
-      }
-      continue;
-    }
-    // We're about to claim success and return a selector,
-    // but before we do, we check that no unparsed input remains.
-    if (!(tokenStream.current().tokenType === parse_css.TokenType.EOF_TOKEN)) {
-      return tokenStream.current().copyPosTo(new parse_css.ErrorToken(
-          amp.validator.ValidationError.Code
-              .CSS_SYNTAX_UNPARSED_INPUT_REMAINS_IN_SELECTOR,
-          ['style']));
-    }
-    if (elements.length == 1) {
-      return elements[0];
-    }
-    return start.copyPosTo(new parse_css.SelectorsGroup(elements));
-  }
-};
diff --git a/validator/engine/htmlparser-interface.js b/validator/engine/htmlparser-interface.js
deleted file mode 100644
index f7042cbfa1a65..0000000000000
--- a/validator/engine/htmlparser-interface.js
+++ /dev/null
@@ -1,331 +0,0 @@
-/**
- * @license DEDUPE_ON_MINIFY
- * Copyright 2015 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.
- */
-
-goog.module('amp.htmlparser.interface');
-const googArray = goog.require('goog.array');
-
-/**
- * @param {string} str The string to lower case.
- * @return {string} The str in lower case format.
- */
-const toLowerCase = function(str) {
-  // htmlparser heavily relies on the length of the strings, and
-  // unfortunately some characters change their length when
-  // lowercased; for instance, the Turkish İ has a length of 1, but
-  // when lower-cased, it has a length of 2. So, as a workaround we
-  // check that the length be the same as before lower-casing, and if
-  // not, we only lower-case the letters A-Z.
-  const lowerCased = str.toLowerCase();
-  if (lowerCased.length == str.length) {
-    return lowerCased;
-  }
-  return str.replace(/[A-Z]/g, function(ch) {
-    return String.fromCharCode(ch.charCodeAt(0) | 32);
-  });
-};
-exports.toLowerCase = toLowerCase;
-
-/**
- * @param {string} str The string to upper case.
- * @return {string} The str in upper case format.
- */
-const toUpperCase = function(str) {
-  // htmlparser heavily relies on the length of the strings, and
-  // unfortunately some characters change their length when
-  // lowercased; for instance, the Turkish İ has a length of 1, but
-  // when lower-cased, it has a length of 2. So, as a workaround we
-  // check that the length be the same as before upper-casing, and if
-  // not, we only upper-case the letters A-Z.
-  const upperCased = str.toUpperCase();
-  if (upperCased.length == str.length) {
-    return upperCased;
-  }
-  return str.replace(/[a-z]/g, function(ch) {
-    return String.fromCharCode(ch.charCodeAt(0) & 223);
-  });
-};
-exports.toUpperCase = toUpperCase;
-
-/**
- * Name/Value pair representing an HTML Tag attribute.
- */
-const ParsedAttr = class {
-  constructor() {
-    /** @type {string} */
-    this.name = '';
-    /** @type {string} */
-    this.value = '';
-  }
-};
-exports.ParsedAttr = ParsedAttr;
-
-
-/**
- * An Html parser makes method calls with ParsedHtmlTags as arguments.
- */
-const ParsedHtmlTag = class {
-  /**
-   * @param {string} tagName
-   * @param {Array<string>=} opt_attrs Array of alternating (name, value) pairs.
-   */
-  constructor(tagName, opt_attrs) {
-    // Tag and Attribute names are case-insensitive. For error messages, we
-    // would like to use lower-case names as they read a little nicer. However,
-    // in validator environments where the parsing is done by the actual
-    // browser, the DOM API returns tag names in upper case. We stick with this
-    // convention for tag names, for performance, but convert to lower when
-    // producing error messages. Error messages aren't produced in latency
-    // sensitive contexts.
-    /** @type {!Array<string>} */
-    const attrs = opt_attrs || [];
-
-    /** @private @type {string} */
-    this.tagName_ = toUpperCase(tagName);
-    /** @private @type {!Array<!ParsedAttr>} */
-    this.attrs_ = [];
-    // Convert attribute names to lower case, not values, which are
-    // case-sensitive.
-    for (let i = 0; i < attrs.length; i += 2) {
-      const attr = new ParsedAttr();
-      attr.name = toLowerCase(attrs[i]);
-      attr.value = attrs[i + 1];
-      // Our html parser repeats the key as the value if there is no value. We
-      // replace the value with an empty string instead in this case.
-      if (attr.name === attr.value) {
-        attr.value = '';
-      }
-      this.attrs_.push(attr);
-    }
-    // Sort the attribute array by (lower case) name.
-    googArray.sort(this.attrs_, function(a, b) {
-      if (a.name > b.name) {
-        return 1;
-      }
-      if (a.name < b.name) {
-        return -1;
-      }
-      // No need to sub-sort by attr values, just names will do.
-      return 0;
-    });
-
-    // Lazily allocated map from attribute name to value.
-    /** @private @type {?Object<string, string>} */
-    this.attrsByKey_ = null;
-  }
-
-  /**
-   * Lower-case tag name
-   * @return {string}
-   */
-  lowerName() {
-    return toLowerCase(this.tagName_);
-  }
-
-  /**
-   * Upper-case tag name
-   * @return {string}
-   */
-  upperName() {
-    return this.tagName_;
-  }
-
-  /**
-   * Returns an array of attributes. Each attribute has two fields: name and
-   * value. Name is always lower-case, value is the case from the original
-   * document. Values are unescaped.
-   * @return {!Array<!ParsedAttr>}
-   */
-  attrs() {
-    return this.attrs_;
-  }
-
-  /**
-   * Returns an object mapping attribute name to attribute value. This is
-   * populated lazily, as it's not used for most tags.
-   * @return {Object<string, string>}
-   * */
-  attrsByKey() {
-    if (this.attrsByKey_ === null) {
-      this.attrsByKey_ = Object.create(null);
-      for (const attr of this.attrs()) {
-        this.attrsByKey_[attr.name] = attr.value;
-      }
-    }
-    return /** @type{Object<string, string>} */ (this.attrsByKey_);
-  }
-
-  /**
-   * Returns a duplicate attribute name if the tag contains two attributes
-   * named the same, but with different attribute values. Same attribute name
-   * AND value is OK. Returns null if there are no such duplicate attributes.
-   * @return {?string}
-   */
-  hasDuplicateAttrs() {
-    /** @type {string} */
-    let lastAttrName = '';
-    /** @type {string} */
-    let lastAttrValue = '';
-    for (const attr of this.attrs()) {
-      if (lastAttrName === attr.name && lastAttrValue !== attr.value) {
-        return attr.name;
-      }
-      lastAttrName = attr.name;
-      lastAttrValue = attr.value;
-    }
-    return null;
-  }
-
-  /**
-   * Removes duplicate attributes from the attribute list. This is consistent
-   * with HTML5 parsing error handling rules, only the first attribute with
-   * each attribute name is considered, the remainder are ignored.
-   */
-  dedupeAttrs() {
-    /** @type {!Array<!Object>} */
-    const newAttrs = [];
-    /** @type {string} */
-    let lastAttrName = '';
-    for (const attr of this.attrs_) {
-      if (lastAttrName !== attr.name) {
-        newAttrs.push(attr);
-      }
-      lastAttrName = attr.name;
-    }
-    this.attrs_ = newAttrs;
-  }
-
-  /**
-   * @return {boolean}
-   */
-  isEmpty() {
-    return this.tagName_.length === 0;
-  }
-};
-exports.ParsedHtmlTag = ParsedHtmlTag;
-
-
-/**
- * An interface to the `htmlparser.HtmlParser` visitor, that gets
- * called while the HTML is being parsed.
- */
-const HtmlSaxHandler = class {
-  /**
-   * Handler called when the parser found a new tag.
-   * @param {!ParsedHtmlTag} tag
-   */
-  startTag(tag) {}
-
-  /**
-   * Handler called when the parser found a closing tag.
-   * @param {!ParsedHtmlTag} tag
-   */
-  endTag(tag) {}
-
-  /**
-   * Handler called when PCDATA is found.
-   * @param {string} text The PCDATA text found.
-   */
-  pcdata(text) {}
-
-  /**
-   * Handler called when RCDATA is found.
-   * @param {string} text The RCDATA text found.
-   */
-  rcdata(text) {}
-
-  /**
-   * Handler called when CDATA is found.
-   * @param {string} text The CDATA text found.
-   */
-  cdata(text) {}
-
-  /**
-   * Handler called when the parser is starting to parse the document.
-   */
-  startDoc() {}
-
-  /**
-   * Handler called when the parsing is done.
-   */
-  endDoc() {}
-
-  /**
-   * Callback for informing that the parser is manufacturing a <body> tag not
-   * actually found on the page. This will be followed by a startTag() with the
-   * actual body tag in question.
-   */
-  markManufacturedBody() {}
-
-  /**
-   * HTML5 defines how parsers treat documents with multiple body tags: they
-   * merge the attributes from the later ones into the first one. Therefore,
-   * just before the parser sends the endDoc event, it will also send this
-   * event which will provide the attributes from the effective body tag
-   * to the client (the handler).
-   */
-  effectiveBodyTag(attributes) {}
-};
-exports.HtmlSaxHandler = HtmlSaxHandler;
-
-
-/**
- * An interface for determining the line/column information for SAX events that
- * are being received by a `HtmlSaxHandler`. Please see
- * the `HtmlSaxHandler#setDocLocator` method.
- */
-const DocLocator = class {
-  constructor() {}
-
-  /**
-   * The current line in the HTML source from which the most recent SAX event
-   * was generated. This value is only sensible once an event has been
-   * generated, that is, in practice from within the context of the
-   * HtmlSaxHandler methods - e.g., startTag, pcdata, etc.
-   * @return {number} line The current line.
-   */
-  getLine() {}
-
-  /**
-   * The current column in the HTML source from which the most recent SAX event
-   * was generated. This value is only sensible once an event has been
-   * generated, that is, in practice from within the context of the
-   * HtmlSaxHandler methods - e.g., startTag, pcdata, etc.
-   * @return {number} line The current column.
-   */
-  getCol() {}
-};
-exports.DocLocator = DocLocator;
-
-
-/**
- * Handler with a setDocLocator method in addition to the parser callbacks.
- * @extends {HtmlSaxHandler}
- */
-const HtmlSaxHandlerWithLocation = class extends HtmlSaxHandler {
-  constructor() {
-    super();
-  }
-
-  /**
-   * Called prior to parsing a document, that is, before `startTag`.
-   * @param {!DocLocator} locator A locator instance which
-   *   provides access to the line/column information while SAX events
-   *   are being received by the handler.
-   */
-  setDocLocator(locator) {}
-};
-exports.HtmlSaxHandlerWithLocation = HtmlSaxHandlerWithLocation;
diff --git a/validator/gulpjs/README.md b/validator/gulpjs/README.md
deleted file mode 100644
index 52c1562483312..0000000000000
--- a/validator/gulpjs/README.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# Gulp AMPHTML Validator
-
-A Gulp plugin for validating [AMPHTML files](https://ampproject.org) using the official [AMPHTML Validator](https://www.npmjs.com/package/amphtml-validator).
-
-## Installation
-
-Install package with NPM and add it to your development dependencies:
-
-```sh
-npm install --save-dev gulp-amphtml-validator
-```
-
-## Usage
-
-```js
-const gulpAmpValidator = require('gulp-amphtml-validator');
-
-gulp.task('amphtml:validate', () => {
-  return (
-    gulp
-      .src('*.html')
-      // Validate the input and attach the validation result to the "amp" property
-      // of the file object.
-      .pipe(gulpAmpValidator.validate())
-      // Print the validation results to the console.
-      .pipe(gulpAmpValidator.format())
-      // Exit the process with error code (1) if an AMP validation error
-      // occurred.
-      .pipe(gulpAmpValidator.failAfterError())
-  );
-});
-```
-
-To treat warnings as errors, replace the last line of the validation closure with:
-
-```js
-// Exit the process with error code (1) if an AMP validation warning or
-// error occurred.
-.pipe(gulpAmpValidator.failAfterWarningOrError());
-```
-
-## Release Notes
-
-### 1.0.4
-
-- Update amphtml-validator dependency to 1.0.30, gulp to 4.0.2 and mocha to
-  7.0.1.
-
-### 1.0.3
-
-- Remove engine section from pacakge.json to allow any version of gulpjs.
-
-### 1.0.2
-
-- Add failAfterWarningOrError option
-- Upgrade amphtml-validator version to 1.0.21
-
-### 1.0.1
-
-- Upgrade amphtml-validator version to 1.0.18
-
-### 1.0.0
-
-- initial release
diff --git a/validator/gulpjs/index.js b/validator/gulpjs/index.js
deleted file mode 100755
index efe92d1b857ec..0000000000000
--- a/validator/gulpjs/index.js
+++ /dev/null
@@ -1,185 +0,0 @@
-/**
- * @license
- * Copyright 2016 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 amphtmlValidator = require('amphtml-validator');
-const colors = require('ansi-colors');
-const log = require('fancy-log');
-const through = require('through2');
-
-const PLUGIN_NAME = 'gulp-amphtml-validator';
-const PluginError = require('plugin-error');
-
-const STATUS_FAIL = 'FAIL';
-const STATUS_PASS = 'PASS';
-const STATUS_UNKNOWN = 'UNKNOWN';
-
-/**
- * Validates AMP files and attaches the validation result to the file object.
- *
- * @param {?Object} validator - amphtml validator
- * @return {!stream} gulp file stream
- */
-module.exports.validate = function(validator) {
-
-  if (!validator) {
-    validator = amphtmlValidator;
-  }
-
-  function runValidation(file, encoding, callback) {
-    if (file.isNull()) {
-      return callback(null, file);
-    }
-    if (file.isStream()) {
-      this.emit('error', new PluginError(PLUGIN_NAME,
-          'Streams not supported!'));
-    }
-    if (file.isBuffer()) {
-      validator.getInstance()
-          .then(function(validatorInstance) {
-            const inputString = file.contents.toString();
-            file.ampValidationResult =
-                validatorInstance.validateString(inputString);
-            return callback(null, file);
-          })
-          .catch(function(err) {
-          // This happens if the validator download failed. We don't fail the
-          // build, but map the exception to an validation error instead. This
-          // makes it possible to configure via failAfterError whether this
-          // should fail the build or not.
-            log(colors.red(err.message));
-            file.ampValidationResult = {
-              status: STATUS_UNKNOWN,
-            };
-            return callback(null, file);
-          });
-    }
-  }
-  return through.obj(runValidation);
-};
-
-/**
- * Formats and prints the validation results to the console.
- *
- * @param {?Object} logger - logger used for printing the results (optional)
- * @return {!stream} gulp file stream
- */
-module.exports.format = function(logger) {
-
-  const results = [];
-  if (!logger) {
-    logger = log;
-  }
-
-  function collectResults(file, encoding, callback) {
-    if (!file.isNull() && file.ampValidationResult) {
-      results.push(file);
-    }
-    return callback(null, file);
-  }
-
-  function formatResults(callback) {
-    logger.log('AMP Validation results:\n\n' +
-        results.map(printResult).join('\n'));
-    return callback();
-  }
-
-  function printResult(file) {
-    const validationResult = file.ampValidationResult;
-    let report = file.relative + ': ';
-    if (validationResult.status === STATUS_PASS) {
-      report += colors.green(validationResult.status);
-      report += '\nReview our \'publishing checklist\' to ensure '
-          + 'successful AMP document distribution. '
-          + 'See https://go.amp.dev/publishing-checklist';
-    } else if (validationResult.status === STATUS_UNKNOWN) {
-      report += colors.red(validationResult.status);
-    } else {
-      report += colors.red(validationResult.status);
-      for (let ii = 0; ii < validationResult.errors.length; ii++) {
-        const error = validationResult.errors[ii];
-        let msg = file.relative + ':' + error.line + ':' + error.col + ' ' +
-          colors.red(error.message);
-        if (error.specUrl) {
-          msg += ' (see ' + error.specUrl + ')';
-        }
-        report += '\n' + msg;
-      }
-    }
-    return report;
-  }
-
-  return through.obj(collectResults, formatResults);
-};
-
-/**
- * Fail when the stream ends if for any AMP validation results,
- * isFailure(ampValidationResult) returns true.
- *
- * @param {function(amphtmlValidator.ValidationResult): boolean} isFailure
- * @return {!stream} gulp file stream
- */
-function failAfter(isFailure) {
-  let failedFiles = 0;
-
-  function collectFailedFiles(file, encoding, callback) {
-    if (file.isNull() || !file.ampValidationResult) {
-      return callback(null, file);
-    }
-    if (isFailure(file.ampValidationResult)) {
-      failedFiles++;
-    }
-    return callback(null, file);
-  }
-
-  function failOnError(callback) {
-    if (failedFiles > 0) {
-      this.emit('error', new PluginError(PLUGIN_NAME,
-          '\nAMPHTML Validation failed for ' + failedFiles + ' files.'));
-    }
-    callback();
-  }
-
-  return through.obj(collectFailedFiles, failOnError);
-}
-
-/**
- * Fail when the stream ends if any AMP validation error(s) occurred.
- *
- * @return {!stream} gulp file stream
- */
-module.exports.failAfterError = function() {
-  return failAfter(function(ampValidationResult) {
-    return ampValidationResult.status === STATUS_FAIL ||
-        ampValidationResult.status === STATUS_UNKNOWN;
-  });
-};
-
-/**
- * Fail when the stream ends if any AMP validation warning(s) or
- * error(s) occurred.
- *
- * @return {!stream} gulp file stream
- */
-module.exports.failAfterWarningOrError = function() {
-  return failAfter(function(ampValidationResult) {
-    return ampValidationResult.errors.length > 0 ||
-        ampValidationResult.status === STATUS_FAIL ||
-        ampValidationResult.status === STATUS_UNKNOWN;
-  });
-};
diff --git a/validator/gulpjs/package.json b/validator/gulpjs/package.json
deleted file mode 100644
index e88710b2fd664..0000000000000
--- a/validator/gulpjs/package.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "name": "gulp-amphtml-validator",
-  "version": "1.0.4",
-  "description": "Gulp plugin for the official AMP HTML validator (www.ampproject.org)",
-  "keywords": [
-    "gulpplugin",
-    "AMP",
-    "validator",
-    "validate",
-    "AMP HTML",
-    "Accelerated Mobile Pages"
-  ],
-  "author": "The AMP HTML Authors",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ampproject/amphtml/tree/master/validator/gulpjs"
-  },
-  "dependencies": {
-    "amphtml-validator": "1.0.30",
-    "through2": "3.0.1"
-  },
-  "devDependencies": {
-    "gulp": "4.0.2",
-    "mocha": "7.2.0"
-  },
-  "scripts": {
-    "test": " ./node_modules/mocha/bin/mocha",
-    "run-sample": " ./run_sample.sh"
-  }
-}
diff --git a/validator/htmlparser/BUILD b/validator/htmlparser/BUILD
deleted file mode 100644
index 3c2f68811982f..0000000000000
--- a/validator/htmlparser/BUILD
+++ /dev/null
@@ -1,473 +0,0 @@
-load("@rules_cc//cc:defs.bzl", "cc_library", "cc_test")
-
-package(default_visibility = ["//visibility:public"])
-
-licenses(["notice"])
-
-exports_files(["LICENSE"])
-
-# An atom is a name in HTML source. Tag name, attribute names and namespaces.
-cc_library(
-    name = "atom",
-    hdrs = [
-        "atom.h",
-    ],
-)
-
-# Helper functions to convert string to Atom and vice versa.
-cc_library(
-    name = "atomutil",
-    srcs = [
-        "atomutil.cc",
-    ],
-    hdrs = [
-        "atomutil.h",
-    ],
-    deps = [
-        ":atom",
-        ":hash",
-    ],
-)
-
-# Similar to go lang's defer statement. Defers the execution of statement
-# until in which it is decalred goes out of scope.
-cc_library(
-    name = "defer",
-    hdrs = [
-        "defer.h",
-    ],
-)
-
-# Helper library decalres various doctype constants and a utility function to
-# parse doctype string and extract various components in it.
-cc_library(
-    name = "doctype",
-    srcs = [
-        "doctype.cc",
-    ],
-    hdrs = [
-        "doctype.h",
-    ],
-    deps = [
-        ":node",
-        ":strings",
-    ],
-)
-
-# Defines error type.
-cc_library(
-    name = "error",
-    srcs = [
-        "error.cc",
-    ],
-    hdrs = [
-        "error.h",
-    ],
-)
-
-cc_library(
-    name = "comparators",
-    hdrs = [
-        "comparators.h",
-    ],
-)
-
-# File reading and parsing utility.
-cc_library(
-    name = "fileutil",
-    srcs = [
-        "fileutil.cc",
-    ],
-    hdrs = [
-        "fileutil.h",
-    ],
-    deps = [
-        ":defer",
-        ":error",
-        ":strings",
-    ],
-)
-
-# Foreign element constants that are in SVG and MathML namespaces.
-cc_library(
-    name = "foreign",
-    srcs = [
-        "foreign.cc",
-    ],
-    hdrs = [
-        "foreign.h",
-    ],
-    deps = [
-        ":comparators",
-        ":node",
-        ":strings",
-    ],
-)
-
-# Various hashing utility functions.
-cc_library(
-    name = "hash",
-    hdrs = [
-        "hash.h",
-    ],
-)
-
-cc_library(
-    name = "logging",
-    hdrs = [
-        "logging.h",
-    ],
-)
-
-# Defines token type and token structures, used during tokenization.
-cc_library(
-    name = "token",
-    srcs = [
-        "token.cc",
-    ],
-    hdrs = [
-        "token.h",
-    ],
-    deps = [
-        ":atom",
-        ":strings",
-    ],
-)
-
-# Defines node and node stack.
-# A node represents a single html element/tag/attribute.
-cc_library(
-    name = "node",
-    srcs = [
-        "node.cc",
-    ],
-    hdrs = [
-        "elements.h",
-        "node.h",
-    ],
-    deps = [
-        ":atom",
-        ":atomutil",
-        ":error",
-        ":logging",
-        ":token",
-        "@com_google_absl//absl/base",
-    ],
-)
-
-cc_library(
-    name = "htmlentities",
-    hdrs = [
-        "entity.h",
-    ],
-    deps = [
-        ":comparators",
-    ],
-)
-
-cc_library(
-    name = "casetable",
-    hdrs = [
-        "casetable.h",
-    ],
-    deps = [
-        ":comparators",
-    ],
-)
-
-# Parser parses a given html source.
-cc_library(
-    name = "parser",
-    srcs = [
-        "parser.cc",
-    ],
-    hdrs = [
-        "parser.h",
-    ],
-    deps = [
-        ":atom",
-        ":atomutil",
-        ":comparators",
-        ":defer",
-        ":doctype",
-        ":error",
-        ":foreign",
-        ":logging",
-        ":node",
-        ":strings",
-        ":tokenizer",
-        "@com_google_absl//absl/base",
-    ],
-)
-
-# Renders a node tree to html string.
-cc_library(
-    name = "renderer",
-    srcs = [
-        "renderer.cc",
-    ],
-    hdrs = [
-        "renderer.h",
-    ],
-    deps = [
-        ":atomutil",
-        ":node",
-        ":strings",
-    ],
-)
-
-# String libraries.
-cc_library(
-    name = "whitespacetable",
-    hdrs = [
-        "whitespacetable.h",
-    ],
-)
-
-cc_library(
-    name = "strings",
-    srcs = [
-        "strings.cc",
-    ],
-    hdrs = [
-        "strings.h",
-    ],
-    deps = [
-        ":casetable",
-        ":error",
-        ":htmlentities",
-        ":logging",
-        ":whitespacetable",
-        "@com_google_absl//absl/base",
-    ],
-)
-
-# Tokenizes html text.
-cc_library(
-    name = "tokenizer",
-    srcs = [
-        "tokenizer.cc",
-    ],
-    hdrs = [
-        "tokenizer.h",
-    ],
-    deps = [
-        ":atom",
-        ":atomutil",
-        ":defer",
-        ":strings",
-        ":token",
-    ],
-)
-
-cc_library(
-    name = "url",
-    srcs = [
-        "url.cc",
-    ],
-    hdrs = [
-        "url.h",
-    ],
-)
-
-cc_library(
-    name = "navigator",
-    srcs = [
-        "navigator.cc",
-    ],
-    hdrs = [
-        "navigator.h",
-    ],
-    deps = [
-        ":node",
-    ],
-)
-
-cc_test(
-    name = "atomutil_test",
-    srcs = [
-        "atomutil_test.cc",
-    ],
-    deps = [
-        ":atomutil",
-        ":hash",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-cc_library(
-    name = "testconstants",
-    hdrs = [
-        "testconstants.h",
-    ],
-)
-
-cc_test(
-    name = "doctype_test",
-    srcs = [
-        "doctype_test.cc",
-    ],
-    deps = [
-        ":doctype",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-cc_test(
-    name = "fileutil_test",
-    srcs = [
-        "fileutil_test.cc",
-    ],
-    deps = [
-        ":fileutil",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-filegroup(
-    name = "go_test_files",
-    srcs = glob(["testdata/go/*.dat"]),
-)
-
-filegroup(
-    name = "html5lib_test_files",
-    srcs = glob(["testdata/tree-construction/*.dat",
-                 "testdata/tree-construction/scripted/*.dat"]),
-)
-
-cc_test(
-    name = "htmldataset_test",
-    srcs = [
-        "htmldataset_test.cc",
-    ],
-    data = [
-        ":go_test_files",
-        ":html5lib_test_files",
-    ],
-    deps = [
-        ":atom",
-        ":atomutil",
-        ":defer",
-        ":fileutil",
-        ":node",
-        ":parser",
-        ":renderer",
-        ":strings",
-        ":testconstants",
-        ":tokenizer",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-cc_test(
-    name = "node_test",
-    srcs = [
-        "node_test.cc",
-    ],
-    deps = [
-        ":atom",
-        ":node",
-        ":parser",
-        ":renderer",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-cc_test(
-    name = "renderer_test",
-    srcs = [
-        "renderer_test.cc",
-    ],
-    deps = [
-        ":parser",
-        ":renderer",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-cc_test(
-    name = "strings_test",
-    srcs = [
-        "strings_test.cc",
-    ],
-    deps = [
-        ":strings",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-cc_test(
-    name = "navigator_test",
-    srcs = [
-        "navigator_test.cc",
-    ],
-    deps = [
-        ":navigator",
-        ":node",
-        ":parser",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-cc_test(
-    name = "parser_test",
-    srcs = [
-        "parser_test.cc",
-    ],
-    deps = [
-        ":atom",
-        ":atomutil",
-        ":node",
-        ":parser",
-        ":renderer",
-        ":token",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-cc_test(
-    name = "tokenizer_test",
-    srcs = [
-        "tokenizer_test.cc",
-    ],
-    deps = [
-        ":parser",
-        ":token",
-        ":tokenizer",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-cc_test(
-    name = "casetable_test",
-    srcs = [
-        "casetable_test.cc",
-    ],
-    deps = [
-        ":casetable",
-        ":strings",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-cc_test(
-    name = "entity_test",
-    srcs = [
-        "entity_test.cc",
-    ],
-    deps = [
-        ":htmlentities",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-cc_test(
-    name = "url_test",
-    srcs = [
-        "url_test.cc",
-    ],
-    deps = [
-        ":url",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
diff --git a/validator/htmlparser/CONTRIBUTING.md b/validator/htmlparser/CONTRIBUTING.md
deleted file mode 100644
index 6534e6b6af13a..0000000000000
--- a/validator/htmlparser/CONTRIBUTING.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# How to Contribute
-
-We'd love to accept your patches and contributions to this project. There are
-just a few small guidelines you need to follow.
-
-## Contributor License Agreement
-
-Contributions to this project must be accompanied by a Contributor License
-Agreement. You (or your employer) retain the copyright to your contribution;
-this simply gives us permission to use and redistribute your contributions as
-part of the project. Head over to <https://cla.developers.google.com/> to see
-your current agreements on file or to sign a new one.
-
-You generally only need to submit a CLA once, so if you've already submitted one
-(even if it was for a different project), you probably don't need to do it
-again.
-
-## Code reviews
-
-All submissions, including submissions by project members, require review. We
-use GitHub pull requests for this purpose. Consult
-[GitHub Help](https://help.github.com/articles/about-pull-requests/) for more
-information on using pull requests.
-
-## Community Guidelines
-
-By participating in this project, you agree to abide by the
-[AMP Code of Conduct](https://github.com/ampproject/meta/blob/master/CODE_OF_CONDUCT.md).
diff --git a/validator/htmlparser/README.md b/validator/htmlparser/README.md
deleted file mode 100644
index 1406ecdb88db3..0000000000000
--- a/validator/htmlparser/README.md
+++ /dev/null
@@ -1,42 +0,0 @@
-<!---
-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.
--->
-
-# HTML Parser
-
-This is an HTML5 compliant parser written in C++. It was created to be used by
-the
-[AMPHTML Validator](https://github.com/ampproject/amphtml/tree/master/validator)
-to standardize how AMPHTML documents should be parsed for AMP validation.
-
-## Maintainers
-
-This parser is maintained by the [AMP Working Group](https://amp.dev/community/working-groups/amp4email/):
-[Caching](https://amp.dev/community/working-groups/caching/)
-
-## Current Status
-
-This parser is in active development and has several outstanding TODOs.
-These TODOs may cause certain parsing tests to fail. Those tests have been
-excluded until the TODOs are resolved. See htmldataset_test.cc for a list of
-those tests.
-
-## Building and Testing with Bazel
-
-This code requires C++17. When building with [Bazel](https://bazel.build/)
-please use the flag `--cxxopt='-std=c++17'`.
-
-For building, run: `bazel build --cxxopt='-std=c++17' parser`.
-For testing, run: `bazel test --cxxopt='-std=c++17' parser_test`.
diff --git a/validator/htmlparser/WORKSPACE b/validator/htmlparser/WORKSPACE
deleted file mode 100644
index 7f61e16fcdbbb..0000000000000
--- a/validator/htmlparser/WORKSPACE
+++ /dev/null
@@ -1,48 +0,0 @@
-workspace(name = "htmlparser")
-
-load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
-
-http_archive(
-    name = "com_google_absl",
-    strip_prefix = "abseil-cpp-master",
-    urls = ["https://github.com/abseil/abseil-cpp/archive/master.zip"],
-)
-
-http_archive(
-    name = "com_google_googletest",
-    sha256 = "ff7a82736e158c077e76188232eac77913a15dac0b22508c390ab3f88e6d6d86",
-    strip_prefix = "googletest-b6cd405286ed8635ece71c72f118e659f4ade3fb",
-    urls = ["https://github.com/google/googletest/archive/b6cd405286ed8635ece71c72f118e659f4ade3fb.zip"],  # 2019-01-07
-)
-
-http_archive(
-    name = "com_github_gflags_gflags",
-    strip_prefix = "gflags-master",
-    urls = ["https://github.com/gflags/gflags/archive/master.zip"],
-)
-
-http_archive(
-    name = "com_github_re2",
-    strip_prefix = "re2-master",
-    urls = ["https://github.com/google/re2/archive/master.zip"],
-)
-
-http_archive(
-    name = "com_github_glog",
-    strip_prefix = "glog-master",
-    urls = ["https://github.com/google/glog/archive/master.zip"],
-)
-
-http_archive(
-    name = "com_google_protobuf",
-    strip_prefix = "protobuf-master",
-    urls = ["https://github.com/protocolbuffers/protobuf/archive/master.zip"],
-)
-
-load("@com_google_protobuf//:protobuf_deps.bzl", "protobuf_deps")
-protobuf_deps()
-
-local_repository(
-    name = "validator",
-    path = "../",
-)
diff --git a/validator/htmlparser/bin/jsongrammargen.cc b/validator/htmlparser/bin/jsongrammargen.cc
deleted file mode 100644
index d98019f6b83c1..0000000000000
--- a/validator/htmlparser/bin/jsongrammargen.cc
+++ /dev/null
@@ -1,55 +0,0 @@
-//
-// Copyright 2020 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.
-//
-
-// To regenerate states.h file, run:
-// blaze clean (necessary to take into account txt file changes)
-// bazel build htmlparser/bin:jsongrammargen
-// bazel-bin/htmlparser/bin/jsongrammargen
-
-#include <iostream>
-
-#include "grammar/tablebuilder.h"
-
-constexpr std::string_view kLicenseHeader = R"LICENSETXT(//
-// Copyright 2020 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.
-//)LICENSETXT";
-
-
-int main(int argc, char** argv) {
-  htmlparser::grammar::TableBuilder builder(
-      "data/jsongrammar.txt",
-      {.output_file_path = "json/states.h",
-       .license_header = kLicenseHeader.data(),
-       .ifdef_guard = "HTMLPARSER__JSON_STATES_H_",
-       .cpp_namespace = "htmlparser::json"});
-
-  if (!builder.ParseRulesAndGenerateTable()) {
-    std::cerr << "Table generation failed.\n";
-    return -1;
-  }
-}
diff --git a/validator/htmlparser/css/BUILD b/validator/htmlparser/css/BUILD
deleted file mode 100644
index 05c44a26df686..0000000000000
--- a/validator/htmlparser/css/BUILD
+++ /dev/null
@@ -1,107 +0,0 @@
-load("@rules_cc//cc:defs.bzl", "cc_library", "cc_test", "cc_proto_library")
-load("@rules_proto//proto:defs.bzl", "proto_library")
-
-package(default_visibility = ["//visibility:public"])
-
-licenses(["notice"])
-
-proto_library(
-    name = "parse-css-proto",
-    srcs = ["parse-css.proto"],
-)
-
-cc_proto_library(
-    name = "parse_css_cc_proto",
-    deps = [":parse-css-proto"],
-)
-
-cc_library(
-    name = "parse-css",
-    srcs = ["parse-css.cc"],
-    hdrs = ["parse-css.h"],
-    deps = [
-        ":parse_css_cc_proto",
-        "@com_github_glog//:glog",
-        "@com_google_absl//absl/algorithm:container",
-        "@com_google_absl//absl/memory",
-        "@com_google_absl//absl/strings",
-        "@com_google_absl//absl/types:variant",
-        "@htmlparser//:strings",
-        "@htmlparser//json:types",
-        "@validator//:validator_cc_proto",
-    ],
-)
-
-proto_library(
-    name = "parse-css-urls-proto",
-    srcs = ["parse-css-urls.proto"],
-)
-
-cc_proto_library(
-    name = "parse_css_urls_cc_proto",
-    deps = [":parse-css-urls-proto"],
-)
-
-cc_library(
-    name = "parse-css-urls",
-    srcs = ["parse-css-urls.cc"],
-    hdrs = ["parse-css-urls.h"],
-    deps = [
-        ":parse_css_urls_cc_proto",
-        "@com_github_glog//:glog",
-        "@com_google_absl//absl/algorithm:container",
-        "@com_google_absl//absl/memory",
-        "@com_google_absl//absl/strings",
-        "@com_google_absl//absl/types:variant",
-        "@htmlparser//:strings",
-        "@validator//:validator_cc_proto",
-    ],
-)
-
-cc_test(
-    name = "parse-css_test",
-    srcs = ["parse-css_test.cc"],
-    args = ["--suppress_failure_output"],
-    deps = [
-        ":parse-css",
-        ":parse_css_cc_proto",
-        "@com_google_absl//absl/strings",
-        "@com_google_googletest//:gtest_main",
-        "@htmlparser//:strings",
-    ],
-)
-
-cc_library(
-    name = "amp4ads-parse-css",
-    srcs = ["amp4ads-parse-css.cc"],
-    hdrs = ["amp4ads-parse-css.h"],
-    deps = [
-        ":parse-css",
-        "@com_google_absl//absl/memory",
-        "@com_google_absl//absl/strings",
-        "@com_github_re2//:re2",
-    ],
-)
-
-cc_test(
-    name = "amp4ads-parse-css_test",
-    srcs = ["amp4ads-parse-css_test.cc"],
-    deps = [
-        ":amp4ads-parse-css",
-        ":parse-css",
-        "@com_google_absl//absl/strings",
-        "@com_google_googletest//:gtest_main",
-        "@htmlparser//:strings",
-    ],
-)
-
-cc_test(
-    name = "parse-css-urls_test",
-    srcs = ["parse-css-urls_test.cc"],
-    args = ["--suppress_failure_output"],
-    deps = [
-        ":parse-css-urls",
-        "@com_google_absl//absl/strings",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
diff --git a/validator/htmlparser/doctype_test.cc b/validator/htmlparser/doctype_test.cc
deleted file mode 100644
index 5735d51d628c1..0000000000000
--- a/validator/htmlparser/doctype_test.cc
+++ /dev/null
@@ -1,97 +0,0 @@
-//
-// 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.
-//
-
-#include "doctype.h"
-
-#include "gtest/gtest.h"
-
-TEST(DoctypeTest, ParseTest) {
-  // <!doctype html> The only valid html5 doctype.
-  auto [doctype_node, quirks_mode] = htmlparser::ParseDoctype("html");
-  EXPECT_FALSE(quirks_mode);
-  EXPECT_EQ(doctype_node->Type(), htmlparser::NodeType::DOCTYPE_NODE);
-  EXPECT_EQ(doctype_node->Data(), "html");
-
-  auto [doctype_node2, quirks_mode2] = htmlparser::ParseDoctype(
-      "HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" "
-      "\"http://www.w3.org/TR/html4/strict.dtd\"");
-  EXPECT_TRUE(quirks_mode2);
-  EXPECT_EQ(doctype_node2->Type(), htmlparser::NodeType::DOCTYPE_NODE);
-  EXPECT_FALSE(doctype_node2->Attributes().empty());
-  EXPECT_EQ(doctype_node2->Attributes().size(), 2);
-  EXPECT_EQ(doctype_node2->Attributes()[0].key, "public");
-  EXPECT_EQ(doctype_node2->Attributes()[0].value, "-//W3C//DTD HTML 4.01//EN");
-  EXPECT_EQ(doctype_node2->Attributes()[1].key, "system");
-  EXPECT_EQ(doctype_node2->Attributes()[1].value,
-         "http://www.w3.org/TR/html4/strict.dtd");
-  EXPECT_EQ(doctype_node2->Data(), "html");
-
-  auto [doctype_node3, quirks_mode3] = htmlparser::ParseDoctype("html foo bar");
-  EXPECT_TRUE(quirks_mode3);
-  EXPECT_EQ(doctype_node3->Type(), htmlparser::NodeType::DOCTYPE_NODE);
-
-  // Spaces OK.
-  auto [doctype_node4, quirks_mode4] =
-      htmlparser::ParseDoctype("            html           ");
-  EXPECT_FALSE(quirks_mode4);
-  EXPECT_EQ(doctype_node4->Type(), htmlparser::NodeType::DOCTYPE_NODE);
-  EXPECT_EQ(doctype_node4->Data(), "html");
-  EXPECT_TRUE(doctype_node4->Attributes().empty());
-
-  // Case sensitivity OK.
-  auto [doctype_node5, quirks_mode5] =
-      htmlparser::ParseDoctype("            HTML           ");
-  EXPECT_FALSE(quirks_mode5);
-  EXPECT_EQ(doctype_node5->Type(), htmlparser::NodeType::DOCTYPE_NODE);
-  EXPECT_EQ(doctype_node5->Data(), "html");
-  EXPECT_TRUE(doctype_node5->Attributes().empty());
-
-  auto [doctype_node6, quirks_mode6] =
-      htmlparser::ParseDoctype("lang=\"en\" html");
-  EXPECT_FALSE(quirks_mode6);
-
-  auto [doctype_node7, quirks_mode7] =
-      htmlparser::ParseDoctype("html lang=\"en\"");
-  EXPECT_FALSE(quirks_mode7);
-
-  auto [doctype_node8, quirks_mode8] =
-      htmlparser::ParseDoctype("html lang='en'");
-  EXPECT_FALSE(quirks_mode8);
-
-  // lang attribute with no value.
-  auto [doctype_node9, quirks_mode9] = htmlparser::ParseDoctype("html lang");
-  EXPECT_FALSE(quirks_mode9);
-
-  // attribute value without quote.
-  auto [doctype_node10, quirks_mode10] =
-      htmlparser::ParseDoctype("html lang=en");
-  EXPECT_FALSE(quirks_mode10);
-
-  // Spaces and new lines.
-  auto [doctype_node11, quirks_mode11]  =
-      htmlparser::ParseDoctype(R"DOCTYPE(          html                 lang             =
-                          "en")DOCTYPE");
-  EXPECT_FALSE(quirks_mode11);
-
-  // With self closing slash.
-  auto [doctype_node12, quirks_mode12] =
-      htmlparser::ParseDoctype("html lang /");
-  EXPECT_FALSE(quirks_mode12);
-
-  auto [doctype_node13, quirks_mode13] =
-      htmlparser::ParseDoctype("html lang=en /////////////");
-  EXPECT_FALSE(quirks_mode13);
-}
diff --git a/validator/htmlparser/elements.h b/validator/htmlparser/elements.h
deleted file mode 100644
index 086b52cbb7942..0000000000000
--- a/validator/htmlparser/elements.h
+++ /dev/null
@@ -1,171 +0,0 @@
-//
-// 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.
-//
-
-#ifndef HTMLPARSER__ELEMENTS_H_
-#define HTMLPARSER__ELEMENTS_H_
-
-#include <array>
-
-#include "atom.h"
-
-namespace htmlparser {
-
-inline constexpr std::array<Atom, 19> kBlockElements {
-    Atom::ADDRESS,
-    Atom::BLOCKQUOTE,
-    Atom::DIV,
-    Atom::DL,
-    Atom::FIELDSET,
-    Atom::FORM,
-    Atom::H1,
-    Atom::H2,
-    Atom::H3,
-    Atom::H4,
-    Atom::H5,
-    Atom::H6,
-    Atom::HR,
-    Atom::NOSCRIPT,
-    Atom::OL,
-    Atom::P,
-    Atom::PRE,
-    Atom::TABLE,
-    Atom::UL,
-};
-
-inline constexpr std::array<Atom, 8> kRawTextNodes {
-    Atom::IFRAME,
-    Atom::NOEMBED,
-    Atom::NOFRAMES,
-    Atom::NOSCRIPT,
-    Atom::PLAINTEXT,
-    Atom::SCRIPT,
-    Atom::STYLE,
-    Atom::XMP,
-};
-
-// Section 12.1.2, "Elements", gives this list of void elements. Void elements
-// are those that can't have any contents.
-inline constexpr std::array<Atom, 16> kVoidElements {
-    Atom::AREA,
-    Atom::BASE,
-    Atom::BR,
-    Atom::COL,
-    Atom::COMMAND,
-    Atom::EMBED,
-    Atom::HR,
-    Atom::IMG,
-    Atom::INPUT,
-    Atom::KEYGEN,
-    Atom::LINK,
-    Atom::META,
-    Atom::PARAM,
-    Atom::SOURCE,
-    Atom::TRACK,
-    Atom::WBR,
-};
-
-// TODO: Add reference to what this means in html spec.
-inline constexpr std::array<Atom, 83> kSpecialElements {
-    Atom::ADDRESS,
-    Atom::APPLET,
-    Atom::AREA,
-    Atom::ARTICLE,
-    Atom::ASIDE,
-    Atom::BASE,
-    Atom::BASEFONT,
-    Atom::BGSOUND,
-    Atom::BLOCKQUOTE,
-    Atom::BODY,
-    Atom::BR,
-    Atom::BUTTON,
-    Atom::CAPTION,
-    Atom::CENTER,
-    Atom::COL,
-    Atom::COLGROUP,
-    Atom::DD,
-    Atom::DETAILS,
-    Atom::DIR,
-    Atom::DIV,
-    Atom::DL,
-    Atom::DT,
-    Atom::EMBED,
-    Atom::FIELDSET,
-    Atom::FIGCAPTION,
-    Atom::FIGURE,
-    Atom::FOOTER,
-    Atom::FORM,
-    Atom::FRAME,
-    Atom::FRAMESET,
-    Atom::H1,
-    Atom::H2,
-    Atom::H3,
-    Atom::H4,
-    Atom::H5,
-    Atom::H6,
-    Atom::HEAD,
-    Atom::HEADER,
-    Atom::HGROUP,
-    Atom::HR,
-    Atom::HTML,
-    Atom::IFRAME,
-    Atom::IMG,
-    Atom::INPUT,
-    // The 'isindex' element has been removed, but keep it for backwards
-    // compatibility.
-    Atom::ISINDEX,
-    Atom::KEYGEN,
-    Atom::LI,
-    Atom::LINK,
-    Atom::LISTING,
-    Atom::MAIN,
-    Atom::MARQUEE,
-    Atom::MENU,
-    Atom::META,
-    Atom::NAV,
-    Atom::NOEMBED,
-    Atom::NOFRAMES,
-    Atom::NOSCRIPT,
-    Atom::OBJECT,
-    Atom::OL,
-    Atom::P,
-    Atom::PARAM,
-    Atom::PLAINTEXT,
-    Atom::PRE,
-    Atom::SCRIPT,
-    Atom::SECTION,
-    Atom::SELECT,
-    Atom::SOURCE,
-    Atom::STYLE,
-    Atom::SUMMARY,
-    Atom::TABLE,
-    Atom::TBODY,
-    Atom::TD,
-    Atom::TEMPLATE,
-    Atom::TEXTAREA,
-    Atom::TFOOT,
-    Atom::TH,
-    Atom::THEAD,
-    Atom::TITLE,
-    Atom::TR,
-    Atom::TRACK,
-    Atom::UL,
-    Atom::WBR,
-    Atom::XMP,
-};
-
-}  // namespace htmlparser
-
-#endif  // HTMLPARSER__ELEMENTS_H_
diff --git a/validator/htmlparser/json/BUILD b/validator/htmlparser/json/BUILD
deleted file mode 100644
index d09839f83f1d2..0000000000000
--- a/validator/htmlparser/json/BUILD
+++ /dev/null
@@ -1,78 +0,0 @@
-load("@rules_cc//cc:defs.bzl", "cc_library", "cc_test")
-
-package(default_visibility = ["//visibility:public"])
-
-licenses(["notice"])
-
-cc_library(
-    name = "states",
-    hdrs = [
-        "states.h",
-    ],
-)
-
-cc_library(
-    name = "parser",
-    srcs = [
-        "parser.cc",
-    ],
-    hdrs = [
-        "parser.h",
-    ],
-    deps = [
-        ":states",
-    ],
-)
-
-cc_library(
-    name = "types",
-    srcs = [
-        "types.cc",
-    ],
-    hdrs = [
-        "types.h",
-    ],
-)
-
-cc_test(
-    name = "parser_test",
-    srcs = [
-        "parser_test.cc",
-    ],
-    deps = [
-        ":parser",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-cc_test(
-    name = "types_test",
-    srcs = [
-        "types_test.cc",
-    ],
-    deps = [
-        ":types",
-        "@com_google_googletest//:gtest_main",
-    ],
-)
-
-filegroup(
-    name = "json_testfiles",
-    srcs = glob(["testdata/*.json"]),
-)
-
-cc_test(
-    name = "jsondataset_test",
-    srcs = [
-        "jsondataset_test.cc",
-    ],
-    data = [
-        ":json_testfiles",
-    ],
-    deps = [
-        ":parser",
-        "@com_google_googletest//:gtest_main",
-        "@htmlparser//:defer",
-        "@htmlparser//:fileutil",
-    ],
-)
diff --git a/validator/htmlparser/json/states.h b/validator/htmlparser/json/states.h
deleted file mode 100644
index 3e028f568f58a..0000000000000
--- a/validator/htmlparser/json/states.h
+++ /dev/null
@@ -1,646 +0,0 @@
-// -*- C++ -*-
-//
-// Copyright 2020 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.
-//
-
-// AUTO GENERATED; DO NOT EDIT.
-// To regenerate this file, see comments in bin/jsongrammargen
-
-#ifndef HTMLPARSER__JSON_STATES_H_
-#define HTMLPARSER__JSON_STATES_H_
-
-#include <array>
-
-namespace htmlparser::json {
-
-enum class StateCode {
-  $ = 0,
-  ARRAY_END = 1,
-  ARRAY_FIRST_ITEM = 2,
-  ARRAY_NEXT_ITEM = 3,
-  ARRAY_SEPARATOR = 4,
-  FALSE_1 = 5,
-  FALSE_2 = 6,
-  FALSE_3 = 7,
-  FALSE_4 = 8,
-  NULL_1 = 9,
-  NULL_2 = 10,
-  NULL_3 = 11,
-  NUMBER = 12,
-  NUMBER_AFTER_E_DIGIT_NOTATION = 13,
-  NUMBER_AFTER_E_NOTATION = 14,
-  NUMBER_AFTER_HYPHEN = 15,
-  NUMBER_AFTER_PERIOD = 16,
-  NUMBER_AFTER_PERIOD_DIGIT = 17,
-  NUMBER_AFTER_PLUS_MINUS_AFTER_E_NOTATION = 18,
-  NUMBER_AFTER_ZERO = 19,
-  OBJECT = 20,
-  OBJECT_END = 21,
-  OBJECT_KEY = 22,
-  OBJECT_KEY_BEGIN_QUOTE = 23,
-  OBJECT_SEPARATOR = 24,
-  OBJECT_VALUE = 25,
-  STRING = 26,
-  STRING_ESCAPE = 27,
-  TRUE_1 = 28,
-  TRUE_2 = 29,
-  TRUE_3 = 30,
-  UNICODE_HEX_CHAR_FIRST = 31,
-  UNICODE_HEX_CHAR_LAST = 32,
-  UNICODE_HEX_CHAR_SECOND = 33,
-  UNICODE_HEX_CHAR_THIRD = 34,
-};
-
-enum class CallbackCode {
-  // TODO: Implement callbacks.
-};
-
-
-// Extracts CallbackCode from the bytes.
-inline static uint8_t ToCallbackCode(uint32_t code);
-
-// Extracts push StateCode from the bytes.
-inline static uint8_t ToPushStateCode(uint32_t code);
-
-// Extracts active State code from the bytes.
-inline static uint8_t ToCurrentStateCode(uint32_t code);
-
-// Returns code for current token and active state.
-inline static uint32_t CodeForToken(unsigned char c, uint8_t state);
-
-// Checks the push bit is on.
-inline static bool HasPushBit(uint32_t code);
-
-// Checks the push bit is off.
-inline static bool HasPopBit(uint32_t code);
-
-constexpr std::array<int, 127> kTokenIndexes {
-    44, 44, 44, 44, 44, 44,
-    44, 44, 44, 0 /* TAB */, 1 /* LF */, 44,
-    44, 2 /* CR */, 44, 44, 44, 44,
-    44, 44, 44, 44, 44, 44,
-    44, 44, 44, 44, 44, 44,
-    44, 44, 3 /*   */, 44, 4 /* " */, 44,
-    44, 44, 44, 44, 44, 44,
-    44, 5 /* + */, 6 /* , */, 7 /* - */, 8 /* . */, 9 /* / */,
-    10 /* 0 */, 11 /* 1 */, 12 /* 2 */, 13 /* 3 */, 14 /* 4 */, 15 /* 5 */,
-    16 /* 6 */, 17 /* 7 */, 18 /* 8 */, 19 /* 9 */, 20 /* : */, 44,
-    44, 44, 44, 44, 44, 21 /* A */,
-    22 /* B */, 23 /* C */, 24 /* D */, 25 /* E */, 26 /* F */, 44,
-    44, 44, 44, 44, 44, 44,
-    44, 44, 44, 44, 44, 44,
-    44, 44, 44, 44, 44, 44,
-    44, 27 /* [ */, 28 /* \ */, 29 /* ] */, 44, 44,
-    44, 30 /* a */, 31 /* b */, 32 /* c */, 33 /* d */, 34 /* e */,
-    35 /* f */, 44, 44, 44, 44, 44,
-    36 /* l */, 44, 37 /* n */, 44, 44, 44,
-    38 /* r */, 39 /* s */, 40 /* t */, 41 /* u */, 44, 44,
-    44, 44, 44, 42 /* { */, 44, 43 /* } */,
-    44, };
-
-constexpr std::array<std::array<uint32_t, 46>, 35> kParseStates {{
-    // $
-    // Code: 0
-    {0x0 /* TAB */, 0x0 /* LF */, 0x0 /* CR */, 0x0 /*   */,
-     0x1a00 /* " */, 0xff /* + */, 0xff /* , */, 0xf00 /* - */,
-     0xff /* . */, 0xff /* / */, 0x1300 /* 0 */, 0xc00 /* 1 */,
-     0xc00 /* 2 */, 0xc00 /* 3 */, 0xc00 /* 4 */, 0xc00 /* 5 */,
-     0xc00 /* 6 */, 0xc00 /* 7 */, 0xc00 /* 8 */, 0xc00 /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0x200 /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0x500 /* f */,
-     0xff /* l */, 0x900 /* n */, 0xff /* r */, 0xff /* s */,
-     0x1c00 /* t */, 0xff /* u */, 0x1400 /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // ARRAY_END
-    // Code: 1
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0x40 /* \u */, 0x40 /* + */},
-    // ARRAY_FIRST_ITEM
-    // Code: 2
-    {0x200 /* TAB */, 0x200 /* LF */, 0x200 /* CR */, 0x200 /*   */,
-     0x41a80 /* " */, 0xff /* + */, 0xff /* , */, 0x40f80 /* - */,
-     0xff /* . */, 0xff /* / */, 0x41380 /* 0 */, 0x40c80 /* 1 */,
-     0x40c80 /* 2 */, 0x40c80 /* 3 */, 0x40c80 /* 4 */, 0x40c80 /* 5 */,
-     0x40c80 /* 6 */, 0x40c80 /* 7 */, 0x40c80 /* 8 */, 0x40c80 /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0x40280 /* [ */,
-     0xff /* \ */, 0x40 /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0x40580 /* f */,
-     0xff /* l */, 0x40980 /* n */, 0xff /* r */, 0xff /* s */,
-     0x41c80 /* t */, 0xff /* u */, 0x41480 /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // ARRAY_NEXT_ITEM
-    // Code: 3
-    {0x300 /* TAB */, 0x300 /* LF */, 0x300 /* CR */, 0x300 /*   */,
-     0x41a80 /* " */, 0xff /* + */, 0xff /* , */, 0x40f80 /* - */,
-     0xff /* . */, 0xff /* / */, 0x41380 /* 0 */, 0x40c80 /* 1 */,
-     0x40c80 /* 2 */, 0x40c80 /* 3 */, 0x40c80 /* 4 */, 0x40c80 /* 5 */,
-     0x40c80 /* 6 */, 0x40c80 /* 7 */, 0x40c80 /* 8 */, 0x40c80 /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0x40280 /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0x40580 /* f */,
-     0xff /* l */, 0x40980 /* n */, 0xff /* r */, 0xff /* s */,
-     0x41c80 /* t */, 0xff /* u */, 0x41480 /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // ARRAY_SEPARATOR
-    // Code: 4
-    {0x400 /* TAB */, 0x400 /* LF */, 0x400 /* CR */, 0x400 /*   */,
-     0xff /* " */, 0xff /* + */, 0x300 /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0x100 /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // FALSE_1
-    // Code: 5
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0x600 /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // FALSE_2
-    // Code: 6
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0x700 /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // FALSE_3
-    // Code: 7
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0x800 /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // FALSE_4
-    // Code: 8
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0x40 /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // NULL_1
-    // Code: 9
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xa00 /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // NULL_2
-    // Code: 10
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xb00 /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // NULL_3
-    // Code: 11
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0x40 /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // NUMBER
-    // Code: 12
-    {0x40 /* TAB */, 0x40 /* LF */, 0x40 /* CR */, 0x40 /*   */,
-     0xff /* " */, 0xff /* + */, 0x40 /* , */, 0xff /* - */,
-     0x1000 /* . */, 0xff /* / */, 0xc00 /* 0 */, 0xc00 /* 1 */,
-     0xc00 /* 2 */, 0xc00 /* 3 */, 0xc00 /* 4 */, 0xc00 /* 5 */,
-     0xc00 /* 6 */, 0xc00 /* 7 */, 0xc00 /* 8 */, 0xc00 /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0x40 /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0x40 /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // NUMBER_AFTER_E_DIGIT_NOTATION
-    // Code: 13
-    {0x40 /* TAB */, 0x40 /* LF */, 0x40 /* CR */, 0x40 /*   */,
-     0xff /* " */, 0xff /* + */, 0x40 /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xd00 /* 0 */, 0xd00 /* 1 */,
-     0xd00 /* 2 */, 0xd00 /* 3 */, 0xd00 /* 4 */, 0xd00 /* 5 */,
-     0xd00 /* 6 */, 0xd00 /* 7 */, 0xd00 /* 8 */, 0xd00 /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0x40 /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0x40 /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // NUMBER_AFTER_E_NOTATION
-    // Code: 14
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0x1200 /* + */, 0xff /* , */, 0x1200 /* - */,
-     0xff /* . */, 0xff /* / */, 0xd00 /* 0 */, 0xd00 /* 1 */,
-     0xd00 /* 2 */, 0xd00 /* 3 */, 0xd00 /* 4 */, 0xd00 /* 5 */,
-     0xd00 /* 6 */, 0xd00 /* 7 */, 0xd00 /* 8 */, 0xd00 /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // NUMBER_AFTER_HYPHEN
-    // Code: 15
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0x1300 /* 0 */, 0xc00 /* 1 */,
-     0xc00 /* 2 */, 0xc00 /* 3 */, 0xc00 /* 4 */, 0xc00 /* 5 */,
-     0xc00 /* 6 */, 0xc00 /* 7 */, 0xc00 /* 8 */, 0xc00 /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // NUMBER_AFTER_PERIOD
-    // Code: 16
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0x1100 /* 0 */, 0x1100 /* 1 */,
-     0x1100 /* 2 */, 0x1100 /* 3 */, 0x1100 /* 4 */, 0x1100 /* 5 */,
-     0x1100 /* 6 */, 0x1100 /* 7 */, 0x1100 /* 8 */, 0x1100 /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // NUMBER_AFTER_PERIOD_DIGIT
-    // Code: 17
-    {0x40 /* TAB */, 0x40 /* LF */, 0x40 /* CR */, 0x40 /*   */,
-     0xff /* " */, 0xff /* + */, 0x40 /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0x1100 /* 0 */, 0x1100 /* 1 */,
-     0x1100 /* 2 */, 0x1100 /* 3 */, 0x1100 /* 4 */, 0x1100 /* 5 */,
-     0x1100 /* 6 */, 0x1100 /* 7 */, 0x1100 /* 8 */, 0x1100 /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xe00 /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0x40 /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xe00 /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0x40 /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // NUMBER_AFTER_PLUS_MINUS_AFTER_E_NOTATION
-    // Code: 18
-    {0x40 /* TAB */, 0x40 /* LF */, 0x40 /* CR */, 0x40 /*   */,
-     0xff /* " */, 0xff /* + */, 0x40 /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0x1200 /* 0 */, 0x1200 /* 1 */,
-     0x1200 /* 2 */, 0x1200 /* 3 */, 0x1200 /* 4 */, 0x1200 /* 5 */,
-     0x1200 /* 6 */, 0x1200 /* 7 */, 0x1200 /* 8 */, 0x1200 /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0x40 /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0x40 /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // NUMBER_AFTER_ZERO
-    // Code: 19
-    {0x40 /* TAB */, 0x40 /* LF */, 0x40 /* CR */, 0x40 /*   */,
-     0xff /* " */, 0xff /* + */, 0x40 /* , */, 0xff /* - */,
-     0x1000 /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xe00 /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0x40 /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xe00 /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0x40 /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // OBJECT
-    // Code: 20
-    {0x1400 /* TAB */, 0x1400 /* LF */, 0x1400 /* CR */, 0x1400 /*   */,
-     0x161a80 /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0x1500 /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // OBJECT_END
-    // Code: 21
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0x40 /* \u */, 0x40 /* + */},
-    // OBJECT_KEY
-    // Code: 22
-    {0x1600 /* TAB */, 0x1600 /* LF */, 0x1600 /* CR */, 0x1600 /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0x1900 /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // OBJECT_KEY_BEGIN_QUOTE
-    // Code: 23
-    {0x1700 /* TAB */, 0x1700 /* LF */, 0x1700 /* CR */, 0x1700 /*   */,
-     0x161a80 /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // OBJECT_SEPARATOR
-    // Code: 24
-    {0x1800 /* TAB */, 0x1800 /* LF */, 0x1800 /* CR */, 0x1800 /*   */,
-     0xff /* " */, 0xff /* + */, 0x1700 /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0x1500 /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // OBJECT_VALUE
-    // Code: 25
-    {0x1900 /* TAB */, 0x1900 /* LF */, 0x1900 /* CR */, 0x1900 /*   */,
-     0x181a80 /* " */, 0xff /* + */, 0xff /* , */, 0x180f80 /* - */,
-     0xff /* . */, 0xff /* / */, 0x181380 /* 0 */, 0x180c80 /* 1 */,
-     0x180c80 /* 2 */, 0x180c80 /* 3 */, 0x180c80 /* 4 */, 0x180c80 /* 5 */,
-     0x180c80 /* 6 */, 0x180c80 /* 7 */, 0x180c80 /* 8 */, 0x180c80 /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0x180280 /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0x180580 /* f */,
-     0xff /* l */, 0x180980 /* n */, 0xff /* r */, 0xff /* s */,
-     0x181c80 /* t */, 0xff /* u */, 0x181480 /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // STRING
-    // Code: 26
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0x40 /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0x1b00 /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0x1a00 /* \u */, 0x1a00 /* + */},
-    // STRING_ESCAPE
-    // Code: 27
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0x1a00 /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0x1a00 /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0x1a00 /* \ */, 0xff /* ] */, 0xff /* a */, 0x1a00 /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0x1a00 /* f */,
-     0xff /* l */, 0x1a00 /* n */, 0x1a00 /* r */, 0xff /* s */,
-     0x1a00 /* t */, 0x1f00 /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // TRUE_1
-    // Code: 28
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0x1d00 /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // TRUE_2
-    // Code: 29
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0xff /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0x1e00 /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // TRUE_3
-    // Code: 30
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0xff /* 0 */, 0xff /* 1 */,
-     0xff /* 2 */, 0xff /* 3 */, 0xff /* 4 */, 0xff /* 5 */,
-     0xff /* 6 */, 0xff /* 7 */, 0xff /* 8 */, 0xff /* 9 */,
-     0xff /* : */, 0xff /* A */, 0xff /* B */, 0xff /* C */,
-     0xff /* D */, 0xff /* E */, 0xff /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0xff /* a */, 0xff /* b */,
-     0xff /* c */, 0xff /* d */, 0x40 /* e */, 0xff /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // UNICODE_HEX_CHAR_FIRST
-    // Code: 31
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0x2100 /* 0 */, 0x2100 /* 1 */,
-     0x2100 /* 2 */, 0x2100 /* 3 */, 0x2100 /* 4 */, 0x2100 /* 5 */,
-     0x2100 /* 6 */, 0x2100 /* 7 */, 0x2100 /* 8 */, 0x2100 /* 9 */,
-     0xff /* : */, 0x2100 /* A */, 0x2100 /* B */, 0x2100 /* C */,
-     0x2100 /* D */, 0x2100 /* E */, 0x2100 /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0x2100 /* a */, 0x2100 /* b */,
-     0x2100 /* c */, 0x2100 /* d */, 0x2100 /* e */, 0x2100 /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // UNICODE_HEX_CHAR_LAST
-    // Code: 32
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0x1a00 /* 0 */, 0x1a00 /* 1 */,
-     0x1a00 /* 2 */, 0x1a00 /* 3 */, 0x1a00 /* 4 */, 0x1a00 /* 5 */,
-     0x1a00 /* 6 */, 0x1a00 /* 7 */, 0x1a00 /* 8 */, 0x1a00 /* 9 */,
-     0xff /* : */, 0x1a00 /* A */, 0x1a00 /* B */, 0x1a00 /* C */,
-     0x1a00 /* D */, 0x1a00 /* E */, 0x1a00 /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0x1a00 /* a */, 0x1a00 /* b */,
-     0x1a00 /* c */, 0x1a00 /* d */, 0x1a00 /* e */, 0x1a00 /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // UNICODE_HEX_CHAR_SECOND
-    // Code: 33
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0x2200 /* 0 */, 0x2200 /* 1 */,
-     0x2200 /* 2 */, 0x2200 /* 3 */, 0x2200 /* 4 */, 0x2200 /* 5 */,
-     0x2200 /* 6 */, 0x2200 /* 7 */, 0x2200 /* 8 */, 0x2200 /* 9 */,
-     0xff /* : */, 0x2200 /* A */, 0x2200 /* B */, 0x2200 /* C */,
-     0x2200 /* D */, 0x2200 /* E */, 0x2200 /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0x2200 /* a */, 0x2200 /* b */,
-     0x2200 /* c */, 0x2200 /* d */, 0x2200 /* e */, 0x2200 /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-    // UNICODE_HEX_CHAR_THIRD
-    // Code: 34
-    {0xff /* TAB */, 0xff /* LF */, 0xff /* CR */, 0xff /*   */,
-     0xff /* " */, 0xff /* + */, 0xff /* , */, 0xff /* - */,
-     0xff /* . */, 0xff /* / */, 0x2000 /* 0 */, 0x2000 /* 1 */,
-     0x2000 /* 2 */, 0x2000 /* 3 */, 0x2000 /* 4 */, 0x2000 /* 5 */,
-     0x2000 /* 6 */, 0x2000 /* 7 */, 0x2000 /* 8 */, 0x2000 /* 9 */,
-     0xff /* : */, 0x2000 /* A */, 0x2000 /* B */, 0x2000 /* C */,
-     0x2000 /* D */, 0x2000 /* E */, 0x2000 /* F */, 0xff /* [ */,
-     0xff /* \ */, 0xff /* ] */, 0x2000 /* a */, 0x2000 /* b */,
-     0x2000 /* c */, 0x2000 /* d */, 0x2000 /* e */, 0x2000 /* f */,
-     0xff /* l */, 0xff /* n */, 0xff /* r */, 0xff /* s */,
-     0xff /* t */, 0xff /* u */, 0xff /* { */, 0xff /* } */,
-     0xff /* \u */, 0xff /* + */},
-}};
-
-
-inline static uint8_t ToCallbackCode(uint32_t code) {
-  // 4th byte.
-  return static_cast<uint8_t>(code >> 24);
-}
-
-inline static uint8_t ToPushStateCode(uint32_t code) {
-  // 3rd byte.
-  return static_cast<uint8_t>((code & 0x00ff0000) >> 16);
-}
-
-inline static uint8_t ToCurrentStateCode(uint32_t code) {
-  // 2nd byte.
-  return static_cast<uint8_t>((code & 0x0000ff00) >> 8);
-}
-
-inline static bool HasPushBit(uint32_t code) {
-  // 6th bit in first byte.
-  return ((code & 0x80) >> 7) == 1;
-}
-
-inline static bool HasPopBit(uint32_t code) {
-  // 7th bit in first byte.
-  return ((code & 0x40) >> 6) == 1;
-}
-
-// TODO: In follow up change modify the signature to accept a unicode
-// character, that is char32_t and based on the charset for this state return
-// the code from second last or last column accordingly.
-inline static uint32_t CodeForToken(unsigned char c, uint8_t state) {
-  if (c > 127) {
-    return kParseStates[state][44];
-  }
-  int index = kTokenIndexes[c];
-  if (index == -1) index = 45;
-  return kParseStates[state][index];
-}
-
-}  // namespace htmlparser::json
-
-#endif  // HTMLPARSER__JSON_STATES_H_
diff --git a/validator/htmlparser/navigator.cc b/validator/htmlparser/navigator.cc
deleted file mode 100644
index 107e4fb10c823..0000000000000
--- a/validator/htmlparser/navigator.cc
+++ /dev/null
@@ -1,132 +0,0 @@
-//
-// 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.
-//
-
-#include "navigator.h"
-
-namespace htmlparser {
-
-NodeNavigator::NodeNavigator(Node* node) : root_(node), current_(node) {
-}
-
-Node* NodeNavigator::Current() {
-  return current_;
-}
-
-NodeType NodeNavigator::Type() {
-  return current_->Type();
-}
-
-std::string NodeNavigator::LocalName() {
-  return std::string(current_->Data());
-}
-
-std::string NodeNavigator::Prefix() {
- return "";
-}
-
-std::string NodeNavigator::Value() {
-  switch (current_->Type()) {
-    case NodeType::COMMENT_NODE: {
-      return std::string(current_->Data());
-    }
-    case NodeType::ELEMENT_NODE: {
-      return current_->InnerText();
-    }
-    case NodeType::TEXT_NODE: {
-      return std::string(current_->Data());
-    }
-    default:
-      break;
-  }
-
-  return "";
-}
-
-NodeNavigator NodeNavigator::Clone() {
-  NodeNavigator other(current_);
-  other.root_ = root_;
-  other.current_ = current_;
-  return other;
-}
-
-void NodeNavigator::MoveToRoot() {
-  current_ = root_;
-}
-
-bool NodeNavigator::MoveToParent() {
-  Node* parent = current_->Parent();
-  if (parent) {
-    current_ = parent;
-    return true;
-  }
-
-  return false;
-}
-
-bool NodeNavigator::MoveToChild() {
-  Node* child = current_->FirstChild();
-  if (child) {
-    current_ = child;
-    return true;
-  }
-
-  return false;
-}
-
-bool NodeNavigator::MoveToFirst() {
-  Node* previous_sibling = current_->PrevSibling();
-  if (!previous_sibling) {
-    return false;
-  }
-
-  while (previous_sibling) {
-    current_= previous_sibling;
-    previous_sibling = current_->PrevSibling();
-  }
-
-  return true;
-}
-
-bool NodeNavigator::MoveToNext() {
-  Node* sibling = current_->NextSibling();
-  if (sibling) {
-    current_ = sibling;
-    return true;
-  }
-
-  return false;
-}
-
-bool NodeNavigator::MoveToPrevious() {
-  Node* sibling = current_->PrevSibling();
-  if (sibling) {
-    current_ = sibling;
-    return true;
-  }
-
-  return false;
-}
-
-// Moves the navigator to the same position as the specified navigator.
-bool NodeNavigator::MoveTo(const NodeNavigator& other) {
-  // They must belong to the same root.
-  if (root_ != other.root_) return false;
-
-  current_ = other.current_;
-  return true;
-}
-
-}  // namespace htmlparser
diff --git a/validator/htmlparser/navigator.h b/validator/htmlparser/navigator.h
deleted file mode 100644
index 9626216e5b86e..0000000000000
--- a/validator/htmlparser/navigator.h
+++ /dev/null
@@ -1,58 +0,0 @@
-//
-// 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.
-//
-
-// A node navigator to navigate an HTML element tree.
-
-#ifndef HTMLPARSER__NAVIGATOR_H_
-#define HTMLPARSER__NAVIGATOR_H_
-
-#include <string>
-
-#include "node.h"
-
-namespace htmlparser {
-
-class NodeNavigator {
- public:
-  // Creates a navigation model for a node as a root.
-  explicit NodeNavigator(Node* node);
-
-  Node* Current();
-  NodeType Type();
-  std::string LocalName();
-  std::string Prefix();
-  std::string Value();
-  void MoveToRoot();
-  bool MoveToParent();
-  bool MoveToChild();
-  bool MoveToFirst();
-  bool MoveToNext();
-  bool MoveToPrevious();
-  // Moves the node to the same position as current node of other navigator.
-  bool MoveTo(const NodeNavigator& other);
-  NodeNavigator Clone();
-
- private:
-  // The root node.
-  Node* root_;
-
-  // The current node at a particular navigation stage.
-  Node* current_;
-};
-
-}  // namespace htmlparser
-
-#endif  // HTMLPARSER__NAVIGATOR_H_
diff --git a/validator/htmlparser/navigator_test.cc b/validator/htmlparser/navigator_test.cc
deleted file mode 100644
index d15d866c90823..0000000000000
--- a/validator/htmlparser/navigator_test.cc
+++ /dev/null
@@ -1,70 +0,0 @@
-//
-// 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.
-//
-
-#include "navigator.h"
-
-#include <iostream>
-
-#include "gtest/gtest.h"
-#include "node.h"
-#include "parser.h"
-
-using namespace htmlparser;
-
-TEST(NavigatorTest, BasicNavigation) {
-  auto doc = Parse("<html><head><noscript>No scripting</noscript></head>"
-                    "<body><div>Hello world<div>foo bar</div></div>"
-                    "<h1>foo baz</h1></body></html>");
-  NodeNavigator navigator(doc.get());
-  navigator.MoveToChild();  // <html>.
-  EXPECT_EQ(navigator.Value(), "No scripting Hello world foo bar foo baz");
-  EXPECT_EQ(navigator.Current()->DataAtom(), Atom::HTML);
-
-  navigator.MoveToChild();  // <head>
-  EXPECT_EQ(navigator.Value(), "No scripting");
-  EXPECT_EQ(navigator.Current()->DataAtom(), Atom::HEAD);
-
-  navigator.MoveToNext();  // <body>
-  EXPECT_EQ(navigator.Value(), "Hello world foo bar foo baz");
-  EXPECT_EQ(navigator.Current()->DataAtom(), Atom::BODY);
-
-  EXPECT_TRUE(navigator.MoveToChild());  // Body's first child div.
-  EXPECT_EQ(navigator.Value(), "Hello world foo bar");  // two divs.
-  EXPECT_EQ(navigator.Current()->DataAtom(), Atom::DIV);
-
-  EXPECT_TRUE(navigator.MoveToChild());
-  EXPECT_EQ(navigator.Value(), "Hello world");  // Text node.
-  // No tag name of text node.
-  EXPECT_EQ(navigator.Current()->DataAtom(), Atom::UNKNOWN);
-  EXPECT_EQ(navigator.LocalName(), "Hello world");
-
-  // <div>foo bar</div> is a sibling of Hello world text node.
-  EXPECT_TRUE(navigator.MoveToNext());
-  EXPECT_EQ(navigator.Value(), "foo bar");  // Text node.
-  EXPECT_EQ(navigator.Current()->DataAtom(), Atom::DIV);
-
-  // Go back to parent node.
-  EXPECT_TRUE(navigator.MoveToParent());
-  EXPECT_TRUE(navigator.MoveToNext());
-  EXPECT_EQ(navigator.Value(), "foo baz");
-  EXPECT_EQ(navigator.Current()->DataAtom(), Atom::H1);
-
-  // Reset.
-  navigator.MoveToRoot();
-  navigator.MoveToChild();  // <html>.
-  EXPECT_EQ(navigator.Value(), "No scripting Hello world foo bar foo baz");
-  EXPECT_EQ(navigator.Current()->DataAtom(), Atom::HTML);
-}
diff --git a/validator/htmlparser/node_test.cc b/validator/htmlparser/node_test.cc
deleted file mode 100644
index 54fe5415f3331..0000000000000
--- a/validator/htmlparser/node_test.cc
+++ /dev/null
@@ -1,229 +0,0 @@
-//
-// 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.
-//
-
-#include "node.h"
-
-#include "gtest/gtest.h"
-#include "atom.h"
-#include "parser.h"
-#include "renderer.h"
-
-using htmlparser::Atom;
-using htmlparser::Attribute;
-using htmlparser::Node;
-using htmlparser::NodeStack;
-using htmlparser::NodeType;
-using htmlparser::Parse;
-using htmlparser::RenderError;
-using htmlparser::Renderer;
-
-// For operator""s.
-using namespace std::string_literals;
-
-TEST(NodeTest, BasicStackFunctionality) {
-  NodeStack stack;
-  // Push three nodes.
-  auto n1 = std::unique_ptr<Node>(Node::make_node(NodeType::TEXT_NODE));
-  auto n2 = std::unique_ptr<Node>(Node::make_node(NodeType::COMMENT_NODE));
-  auto n3 = std::unique_ptr<Node>(Node::make_node(NodeType::ELEMENT_NODE));
-  stack.Push(n1.get());
-  stack.Push(n2.get());
-  stack.Push(n3.get());
-
-  EXPECT_EQ(3, stack.size());
-  EXPECT_EQ(stack.Top()->Type(), NodeType::ELEMENT_NODE);
-  EXPECT_EQ(stack.Pop()->Type(), NodeType::ELEMENT_NODE);
-  EXPECT_EQ(2, stack.size());
-  EXPECT_EQ(stack.Top()->Type(), NodeType::COMMENT_NODE);
-
-  // Push three ElementNodes.
-  auto e1 = std::unique_ptr<Node>(Node::make_node(NodeType::ELEMENT_NODE));
-  auto e2 = std::unique_ptr<Node>(Node::make_node(NodeType::ELEMENT_NODE));
-  auto e3 = std::unique_ptr<Node>(Node::make_node(NodeType::ELEMENT_NODE));
-  stack.Push(e1.get());
-  stack.Push(e2.get());
-  stack.Push(e3.get());
-
-  // Pop last 2.
-  stack.Pop(2);
-  EXPECT_EQ(3, stack.size());
-
-  // Insert two nodes at middle and end.
-  auto n4 = std::unique_ptr<Node>(Node::make_node(NodeType::DOCTYPE_NODE));
-  stack.Insert(1, n4.get());
-  auto n5 = std::unique_ptr<Node>(Node::make_node(NodeType::DOCUMENT_NODE));
-  stack.Insert(stack.size() - 1, n5.get());
-
-  EXPECT_EQ(5, stack.size());
-  EXPECT_EQ(stack.at(1)->Type(), NodeType::DOCTYPE_NODE);
-  EXPECT_EQ(stack.at(stack.size() - 2)->Type(), NodeType::DOCUMENT_NODE);
-
-  auto n6 = std::unique_ptr<Node>(Node::make_node(NodeType::ERROR_NODE));
-  stack.Replace(1, n6.get());
-  // No change in size.
-  EXPECT_EQ(5, stack.size());
-  EXPECT_EQ(stack.at(1)->Type(), NodeType::ERROR_NODE);
-}
-
-TEST(NodeTest, NodeInnerText) {
-  std::unique_ptr<Node> doc = Parse(
-      "<html><body><div>Hello world<div>foo bar</div></div>"
-      "<h1>foo baz</h1></body></html>");
-  EXPECT_EQ(doc->InnerText(), "Hello world foo bar foo baz");
-
-  std::unique_ptr<Node> doc2 = Parse(
-      "<html><body><div>Hello\n world\n<div>foo bar</div></div>"
-      "<h1>foo baz</h1></body></html>"s);
-  EXPECT_EQ(doc2->InnerText(), "Hello\n world\n foo bar foo baz");
-  delete doc2.release();
-}
-
-// To test node operations doesn't cause memory leaks, Run:
-// $ blaze build :node_test
-// $ valgrind ../bazel-bin/htmlparser/node-test
-TEST(NodeTest, NodeRemoveChild) {
-  auto doc = Parse(
-      "<html><head><title>Foo</title></head>"
-      "<body><div>Hello</div></body></html>");
-
-  EXPECT_FALSE(CheckNodeConsistency(doc.get()).has_value());
-
-  // Body is next sibling of head.
-  EXPECT_EQ(doc->FirstChild()->FirstChild()->NextSibling()->DataAtom(),
-            htmlparser::Atom::BODY);
-  //               html           head         body
-
-  // Remove head.
-  Node* c = doc->FirstChild()->FirstChild();
-  doc->FirstChild()->RemoveChild(c);
-  std::stringbuf buf;
-  EXPECT_EQ(Renderer::Render(doc.get(), &buf), RenderError::NO_ERROR);
-  EXPECT_EQ(buf.str(),
-            "<html><body><div>Hello</div></body></html>");
-
-  // Body is now first child of html.
-  EXPECT_EQ(doc->FirstChild()->FirstChild()->DataAtom(),
-            htmlparser::Atom::BODY);
-  EXPECT_FALSE(CheckNodeConsistency(doc.get()).has_value());
-}
-
-TEST(NodeTest, NodeAppendChild) {
-  auto doc = Parse(
-      "<html><head></head><body><div>Hello</div></body></html>");
-  EXPECT_FALSE(CheckNodeConsistency(doc.get()).has_value());
-  Node* newDiv = Node::make_node(NodeType::ELEMENT_NODE, Atom::DIV);
-  Node* textContent = Node::make_node(NodeType::TEXT_NODE);
-  textContent->SetData("World");
-  newDiv->AppendChild(textContent);
-  doc->FirstChild()->FirstChild()->NextSibling()->AppendChild(newDiv);
-  //      html          head          body
-  std::stringbuf buf;
-  EXPECT_EQ(Renderer::Render(doc.get(), &buf), RenderError::NO_ERROR);
-  EXPECT_EQ(buf.str(),
-            "<html><head></head><body><div>Hello</div><div>World</div></body>"
-            "</html>");
-  EXPECT_FALSE(CheckNodeConsistency(doc.get()).has_value());
-}
-
-TEST(NodeTest, NodeInsertBefore) {
-  auto doc = Parse(
-      "<html><head></head><body><div>World</div></body></html>");
-  EXPECT_FALSE(CheckNodeConsistency(doc.get()).has_value());
-  Node* newDiv = Node::make_node(NodeType::ELEMENT_NODE, Atom::DIV);
-  Node* textContent = Node::make_node(NodeType::TEXT_NODE);
-  textContent->SetData("Hello");
-  newDiv->AppendChild(textContent);
-  doc->FirstChild()->FirstChild()->NextSibling()->InsertBefore(
-      newDiv, doc->FirstChild()->FirstChild()->NextSibling()->FirstChild());
-  //                   <html>     <head>        <body>         <div>
-  std::stringbuf buf;
-  EXPECT_EQ(Renderer::Render(doc.get(), &buf), RenderError::NO_ERROR);
-  EXPECT_EQ(buf.str(),
-            "<html><head></head><body><div>Hello</div><div>World</div></body>"
-            "</html>");
-  EXPECT_FALSE(CheckNodeConsistency(doc.get()).has_value());
-}
-
-TEST(NodeTest, NodeReparentChildren) {
-  auto doc = Parse(
-      "<html><head></head><body><div>Hello</div><div>World</div></body>"
-      "</html>");
-  EXPECT_FALSE(CheckNodeConsistency(doc.get()).has_value());
-
-  // Move contents of body to head.
-  doc->FirstChild()->FirstChild()->NextSibling()->ReparentChildrenTo(
-      doc->FirstChild()->FirstChild());
-  std::stringbuf buf;
-  EXPECT_EQ(Renderer::Render(doc.get(), &buf), RenderError::NO_ERROR);
-  EXPECT_EQ(doc->FirstChild()->FirstChild()->FirstChild()->DataAtom(),
-            htmlparser::Atom::DIV);
-  EXPECT_EQ(buf.str(),
-            "<html><head><div>Hello</div><div>World</div></head><body></body>"
-            "</html>");
-  EXPECT_FALSE(CheckNodeConsistency(doc.get()).has_value());
-}
-
-TEST(NodeTest, AttributeTest) {
-  auto div = std::unique_ptr<Node>(
-      Node::make_node(NodeType::ELEMENT_NODE, Atom::DIV));
-  Attribute attr_a{.name_space = "", .key = "class", .value = "foo"};
-  Attribute attr_b{.name_space = "", .key = "id", .value = "myDiv"};
-  Attribute attr_c{.name_space = "", .key = "class", .value = "bar"};
-
-  div->AddAttribute(attr_a);
-  div->AddAttribute(attr_b);
-  div->AddAttribute(attr_c);
-
-  // Before sorting, order as inserted.
-  EXPECT_EQ(div->Attributes()[0].key, "class");
-  EXPECT_EQ(div->Attributes()[0].value, "foo");
-  EXPECT_EQ(div->Attributes()[1].key, "id");
-  EXPECT_EQ(div->Attributes()[1].value, "myDiv");
-  EXPECT_EQ(div->Attributes()[2].key, "class");
-  EXPECT_EQ(div->Attributes()[2].value, "bar");
-
-  // After sorting.
-  div->SortAttributes();
-  EXPECT_EQ(div->Attributes().size(), 3);
-  EXPECT_EQ(div->Attributes()[0].key, "class");
-  EXPECT_EQ(div->Attributes()[0].value, "foo");  // Values not sorted.
-  EXPECT_EQ(div->Attributes()[1].key, "class");
-  EXPECT_EQ(div->Attributes()[1].value, "bar");
-  EXPECT_EQ(div->Attributes()[2].key, "id");
-  EXPECT_EQ(div->Attributes()[2].value, "myDiv");
-
-  // Sort and remove duplicates.
-  div->SortAttributes(true);
-  EXPECT_EQ(div->Attributes().size(), 2);
-  EXPECT_EQ(div->Attributes()[0].key, "class");
-  EXPECT_EQ(div->Attributes()[0].value, "foo");
-  EXPECT_EQ(div->Attributes()[1].key, "id");
-  EXPECT_EQ(div->Attributes()[1].value, "myDiv");
-
-  // Namespace.
-  Attribute attr_ns{.name_space = "amp", .key = "class", .value = "last"};
-  div->AddAttribute(attr_ns);
-  div->SortAttributes();
-  EXPECT_EQ(div->Attributes()[0].KeyPart(), "amp:class");
-  EXPECT_EQ(div->Attributes()[0].value, "last");
-
-  // Case sensitivity.
-  Attribute attr_D{.name_space = "", .key = "CLASS", .value = "FOO"};
-  div->AddAttribute(attr_D);
-  div->SortAttributes();
-  EXPECT_EQ(div->Attributes()[0].key, "CLASS");
-  EXPECT_EQ(div->Attributes()[0].value, "FOO");
-}
diff --git a/validator/htmlparser/strings_test.cc b/validator/htmlparser/strings_test.cc
deleted file mode 100644
index 7f1b7e172d9d1..0000000000000
--- a/validator/htmlparser/strings_test.cc
+++ /dev/null
@@ -1,494 +0,0 @@
-//
-// 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.
-//
-
-#include "strings.h"
-
-#include <string>
-
-#include "gtest/gtest.h"
-
-using namespace std::string_literals;
-
-TEST(StringsTest, SplitStringAtTest) {
-  auto columns = htmlparser::Strings::SplitStringAt("a|b|c", '|');
-  EXPECT_EQ(columns.size(), 3);
-  EXPECT_EQ(columns.at(0), "a");
-  EXPECT_EQ(columns.at(1), "b");
-  EXPECT_EQ(columns.at(2), "c");
-
-  columns = htmlparser::Strings::SplitStringAt("a", '|');
-  EXPECT_EQ(columns.size(), 1);
-  EXPECT_EQ(columns.at(0), "a");
-}
-
-TEST(StringsTest, IsUtf8WhiteSpaceCharTest) {
-  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar("abcd"));
-  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar("foo bar"));
-  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar("f bar"));
-  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar(" abcd"));
-  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar("\nabcd"));
-  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar("\tabcd"));
-  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar("\rabcd"));
-  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\x20', 'a'})));
-  EXPECT_EQ(2, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xc2', '\x85', 'a', 'b', 'c'})));
-  EXPECT_EQ(2, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xc2', '\xa0', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe1', '\x9a', '\x80', 'a', 'b', 'c'})));
-
-  // 0x2000 to 0x200a
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\x80', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\x81', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\x82', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\x83', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\x84', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\x85', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\x86', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\x87', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\x88', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\x89', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\x8a', 'a', 'b', 'c'})));
-
-  // 0x2028
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\xa8', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar("\u2028abc"));
-
-  // 0x2029
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\xa9', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar( "\u2029abc"));
-
-  // 0x202f
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe2', '\x80', '\xaf', 'a', 'b', 'c'})));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar( "\u202Fabc"));
-
-  // 0x205f
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string{'\xe2', '\x81', '\x9f', 'a', 'b', 'c'}));
-
-  // 0x3000
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string{'\xe3', '\x80', '\x80', 'a', 'b', 'c'}));
-
-  // Invalid second byte.
-  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xc2', '\x86', 'a', 'b', 'c'})));
-  // Invalid first byte.
-  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xc3', '\x85', 'a', 'b', 'c'})));
-
-  // Invalid second byte.
-  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'\xe1', '\x9b', '\x80', 'a', 'b', 'c'})));
-
-  // Invalid third byte.
-  EXPECT_EQ(0, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string{'\xe3', '\x80', '\x9c', 'a', 'b', 'c'}));
-
-  // A few position argument cases.
-  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar("foo bar", 3));
-  EXPECT_EQ(1, htmlparser::Strings::IsUtf8WhiteSpaceChar("f bar", 1));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar(
-      std::string({'a', 'b', 'c', '\xe2', '\x80', '\x80', 'a', 'b', 'c'}, 3)));
-  EXPECT_EQ(3, htmlparser::Strings::IsUtf8WhiteSpaceChar("foo\u202Fbar", 3));
-}
-
-TEST(StringsTest, SplitStrAtUtf8WhitespaceTest) {
-  std::string_view s = "hello world foo bar";
-  auto columns = htmlparser::Strings::SplitStrAtUtf8Whitespace(s);
-  EXPECT_EQ(4, columns.size());
-  EXPECT_EQ("hello", columns[0]);
-  EXPECT_EQ("world", columns[1]);
-  EXPECT_EQ("foo", columns[2]);
-  EXPECT_EQ("bar", columns[3]);
-
-  s = "foo\u202Fbar";
-  columns = htmlparser::Strings::SplitStrAtUtf8Whitespace(s);
-  EXPECT_EQ(2, columns.size());
-  EXPECT_EQ("foo", columns[0]);
-  EXPECT_EQ("bar", columns[1]);
-
-  s = "foo\xe2\x80\x8a       bar";
-  columns = htmlparser::Strings::SplitStrAtUtf8Whitespace(s);
-  EXPECT_EQ(2, columns.size());
-  EXPECT_EQ("foo", columns[0]);
-  EXPECT_EQ("bar", columns[1]);
-
-  s = "foo\n      \n     \n  \u202Fbar";
-  columns = htmlparser::Strings::SplitStrAtUtf8Whitespace(s);
-  EXPECT_EQ(2, columns.size());
-  EXPECT_EQ("foo", columns[0]);
-  EXPECT_EQ("bar", columns[1]);
-
-  s = "foo\n      \n     \n  \u202Fbar \xe2\x80\x81hello\nworld";
-  columns = htmlparser::Strings::SplitStrAtUtf8Whitespace(s);
-  EXPECT_EQ(4, columns.size());
-  EXPECT_EQ("foo", columns[0]);
-  EXPECT_EQ("bar", columns[1]);
-  EXPECT_EQ("hello", columns[2]);
-  EXPECT_EQ("world", columns[3]);
-
-  s = "helloworldfoobar";
-  columns = htmlparser::Strings::SplitStrAtUtf8Whitespace(s);
-  EXPECT_EQ(1, columns.size());
-  EXPECT_EQ("helloworldfoobar", columns[0]);
-}
-
-TEST(StringsTest, LowerUpperTest) {
-  // Unicode.
-  std::string name = "AMALTASsSŚŚSŚ";
-  htmlparser::Strings::ToLower(&name);
-  EXPECT_EQ(name, "amaltasssśśsś");
-  htmlparser::Strings::ToUpper(&name);
-  EXPECT_EQ(name, "AMALTASSSŚŚSŚ");
-
-  // ascii.
-  std::string lower = "amalTas";
-  std::string upper = "AMALTaS";
-  htmlparser::Strings::ToLower(&upper);
-  EXPECT_EQ(upper, "amaltas");
-  htmlparser::Strings::ToUpper(&lower);
-  EXPECT_EQ(lower, "AMALTAS");
-}
-
-TEST(StringsTest, ConvertNewLinesTest) {
-  std::string s1 = "hello\nworld";
-  htmlparser::Strings::ConvertNewLines(&s1);
-  EXPECT_EQ(s1, "hello\nworld");
-
-  std::string s2 = "hello\rworld";
-  htmlparser::Strings::ConvertNewLines(&s2);
-  EXPECT_EQ(s2, "hello\nworld");
-
-  std::string s3 = "hello\r\nworld";
-  htmlparser::Strings::ConvertNewLines(&s3);
-  EXPECT_EQ(s3, "hello\nworld");
-
-  std::string s4 = "hello\r\r\nworld";
-  htmlparser::Strings::ConvertNewLines(&s4);
-  EXPECT_EQ(s4, "hello\n\nworld");
-
-  std::string s5 = "hello\r\n\f\r\nworld";
-  htmlparser::Strings::ConvertNewLines(&s5);
-  EXPECT_EQ(s5, "hello\n\n\nworld");
-}
-
-TEST(StringsTest, EqualFoldTest) {
-  // Left upper and right lower.
-  EXPECT_TRUE(htmlparser::Strings::EqualFold(
-      "A+MALTASsSŚŚSŚ", "a+maltasssśśsś"));
-  // Right upper and left lower.
-  EXPECT_TRUE(htmlparser::Strings::EqualFold(
-      "a+maltasssśśsś", "A+MALTASsSŚŚSŚ"));
-  // right string has one less char.
-  EXPECT_FALSE(htmlparser::Strings::EqualFold(
-      "A+MALTASsSŚŚSŚ", "a+maltasssśśs"));
-  // left string has one less char.
-  EXPECT_FALSE(htmlparser::Strings::EqualFold(
-      "A+MALTASsSŚŚS", "a+maltasssśśsś"));
-  // Ends with ascii character. Validates string_view cursor moves forward.
-  EXPECT_TRUE(htmlparser::Strings::EqualFold(
-      "A+MALTASsSŚŚSŚZ", "a+maltasssśśsśz"));
-  // Many extra characters in right string.
-  EXPECT_FALSE(htmlparser::Strings::EqualFold(
-      "A+MALTASsSŚŚSŚ", "a+maltasssśśsśaa"));
-  EXPECT_TRUE(htmlparser::Strings::EqualFold("śśsśz", "śśsśz"));
-}
-
-TEST(StringsTest, DecodeUtf8SymbolTest) {
-  std::vector<std::string> strs = {
-    "Amaltas",  // All ascii chars.
-    "AŚŚśś",    // First aschii rest utf.
-    "śśśś",     // All utf.
-    "śAm",      // first utf rest ascii.
-    "śAś",      // first and last utf.
-  };
-
-  for (auto& str : strs) {
-    std::string_view s(str);
-    while (!s.empty()) {
-      auto opt_decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(&s);
-      EXPECT_TRUE(opt_decoded_symbol.has_value());
-    }
-  }
-}
-
-TEST(StringsTest, DecodeUtf8SymbolTestImmutableStringView) {
-  std::string str = "AmaltaśAś";
-  auto decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, 0);
-  EXPECT_TRUE(decoded_symbol.has_value());
-  EXPECT_EQ(decoded_symbol.value(), 65 /* A */);
-
-  decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, 1);
-  EXPECT_TRUE(decoded_symbol.has_value());
-  EXPECT_EQ(decoded_symbol.value(), 109  /* m */);
-
-  decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, 6);
-  EXPECT_TRUE(decoded_symbol.has_value());
-  EXPECT_EQ(decoded_symbol.value(), 0x15b  /* ś */);
-
-  // Next character is at previous + 2, as previous char is 2 byte codepoint.
-  decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, 7);
-  EXPECT_FALSE(decoded_symbol.has_value());
-  // Above index corrected.
-  decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, 8);
-  EXPECT_TRUE(decoded_symbol.has_value());
-  EXPECT_EQ(decoded_symbol.value(), 65  /* A */);
-
-  // negative index is error.
-  decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, -1);
-  EXPECT_FALSE(decoded_symbol.has_value());
-
-  // out of bound is error.
-  decoded_symbol = htmlparser::Strings::DecodeUtf8Symbol(str, 100000);
-  EXPECT_FALSE(decoded_symbol.has_value());
-}
-
-TEST(StringsTest, StartsEndsTest) {
-  std::string name = "AMALTASsSŚŚSŚ";
-  EXPECT_TRUE(htmlparser::Strings::StartsWith(name, name));
-  EXPECT_TRUE(htmlparser::Strings::StartsWith(name, "AMALT"));
-  EXPECT_TRUE(htmlparser::Strings::EndsWith(name, "SsSŚŚSŚ"));
-  htmlparser::Strings::ToUpper(&name);
-  EXPECT_TRUE(htmlparser::Strings::EndsWith(name, "SSSŚŚSŚ"));
-
-  std::string whitespace("\t\n\r ");
-  EXPECT_EQ(htmlparser::Strings::IndexAny("a maltas", whitespace), 1);
-  EXPECT_EQ(htmlparser::Strings::IndexAny("amaltasssśśsś", "ś"), 9);
-  EXPECT_TRUE(htmlparser::Strings::StartsWith("amaltasbohra", "amaltas"));
-}
-
-TEST(StringsTest, EscapeTest) {
-  std::string s("hello & world");
-  std::stringbuf escaped;
-  htmlparser::Strings::Escape(s, &escaped);
-  EXPECT_EQ("hello &amp; world", escaped.str());
-}
-
-TEST(StringsTest, EscapeUnescapeTest) {
-  std::string ss("hello&amp;world. 2 &lt; 3");
-  std::string original_ss = ss;
-  htmlparser::Strings::UnescapeString(&ss);
-  EXPECT_EQ(ss, "hello&world. 2 < 3");
-  EXPECT_EQ(htmlparser::Strings::EscapeString(ss), "hello&amp;world. 2 &lt; 3");
-
-  std::string newss("Hello&nvsim;world. 2&oopf;okhello&Aacute &amp ok");
-  htmlparser::Strings::UnescapeString(&newss);
-  EXPECT_EQ(newss, "Hello∼⃒world. 2𝕠okhelloÁ & ok");
-
-  std::string unescaped("amal<tas>&as");
-  EXPECT_EQ(htmlparser::Strings::EscapeString(unescaped),
-      "amal&lt;tas&gt;&amp;as");
-
-  std::string unescapedquotes("hello\"world\"");
-  EXPECT_EQ(htmlparser::Strings::EscapeString(unescapedquotes),
-            "hello&#34;world&#34;");
-}
-
-TEST(StringsTest, EncodingTest) {
-  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(224).value(), "à");
-  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(202).value(), "Ê");
-  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(128512).value(), "😀");
-  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(19990).value(), "世");
-  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(134071).value(), "𠮷");
-  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(67).value(), "C");
-  EXPECT_EQ(htmlparser::Strings::EncodeUtf8Symbol(10703).value(), "⧏");
-}
-
-TEST(StringsTest, TrimTest) {
-  std::string s_with_space = "     amaltas.";
-  htmlparser::Strings::TrimLeft(&s_with_space);
-  EXPECT_EQ(s_with_space, "amaltas.");
-  s_with_space = "amaltas.                    ";
-  htmlparser::Strings::TrimRight(&s_with_space);
-  EXPECT_EQ(s_with_space, "amaltas.");
-
-  s_with_space = "                    amaltas.                  ";
-  htmlparser::Strings::Trim(&s_with_space);
-  EXPECT_EQ(s_with_space, "amaltas.");
-
-  std::string s_with_utf = "안안안안안Amaltas";
-  htmlparser::Strings::TrimLeft(&s_with_utf, "안");
-  EXPECT_EQ(s_with_utf, "Amaltas");
-  s_with_utf = "Amaltas 안안안안안";
-  htmlparser::Strings::TrimRight(&s_with_utf, "안 ");
-  EXPECT_EQ(s_with_utf, "Amaltas");
-}
-
-TEST(StringsTest, ReplaceTest) {
-  std::string s_to_replace =
-      "AMALTASsSŚŚSŚ AMALTASsSŚŚSŚ AMALTASsSŚŚSŚ AMALTASsSŚŚSŚ";
-  htmlparser::Strings::Replace(&s_to_replace, "ŚŚSŚ", " ");
-  EXPECT_EQ(s_to_replace,
-         "AMALTASsS  AMALTASsSŚŚSŚ AMALTASsSŚŚSŚ AMALTASsSŚŚSŚ");
-  htmlparser::Strings::ReplaceAll(&s_to_replace, "ŚŚSŚ", " ");
-  EXPECT_EQ(s_to_replace, "AMALTASsS  AMALTASsS  AMALTASsS  AMALTASsS ");
-
-  s_to_replace = "amaltas\0\0amaltas"s;
-  htmlparser::Strings::ReplaceAll(&s_to_replace,
-                                  htmlparser::Strings::kNullChar,
-                                  "");
-  EXPECT_EQ(s_to_replace, "amaltasamaltas");
-
-  std::string null_to_ufffd = "\0"s;
-  EXPECT_EQ(null_to_ufffd.size(), 1);
-  htmlparser::Strings::ReplaceAll(&null_to_ufffd,
-                                  htmlparser::Strings::kNullChar,
-                                  "\xef\xbf\xbd"s);
-  EXPECT_EQ(null_to_ufffd, "\xef\xbf\xbd"s);
-  EXPECT_EQ(null_to_ufffd.size(), 3);
-  // The null replacement character.
-  EXPECT_EQ(null_to_ufffd, "�");   // NOLINT(readability/utf8)
-
-  std::string whitespace_and_null =
-      "amaltas is \0\0good \0boy"s;  // NOLINT(readability/utf8)
-  htmlparser::Strings::ReplaceAny(&whitespace_and_null,
-                                  htmlparser::Strings::kWhitespaceOrNull,
-                                  "�");  // NOLINT(readability/utf8)
-  EXPECT_EQ(whitespace_and_null,
-            "amaltas�is���good��boy");  // NOLINT(readability/utf8)
-
-  std::string whitespace_and_null2 = "amaltas is \0\0good \0boy"s;
-  htmlparser::Strings::ReplaceAny(&whitespace_and_null2,
-                                  htmlparser::Strings::kNullChar,
-                                  htmlparser::Strings::kNullReplacementChar);
-  EXPECT_EQ(whitespace_and_null2, "amaltas is ��good �boy");
-
-  std::string many_whitespaces = "  a   m  a lta s  ";
-  htmlparser::Strings::RemoveExtraSpaceChars(&many_whitespaces);
-  EXPECT_EQ(many_whitespaces, " a m a lta s ");
-}
-
-TEST(StringsTest, TranslateTest) {
-  // Simple translate, lowercase to uppercase.
-  auto t1 = htmlparser::Strings::Translate(
-      "amaltas",
-      "abcdefghijklmnopqrstuvwxyz",
-      "ABCDEFGHIJKLMNOPQRSTUVWXYZ");
-  EXPECT_TRUE(t1.has_value());
-  EXPECT_EQ(t1.value(), "AMALTAS");
-
-  // Duplicate entries.
-  auto t2 = htmlparser::Strings::Translate(
-      "amaltas", "abcdabcd", "lmnopqrs");
-  EXPECT_EQ(t2.value(), "lmlltls");
-
-  // Translate involving new Utf chars.
-  auto t3 = htmlparser::Strings::Translate(
-      "amaltas",
-      "alt",
-      "서비스");
-  EXPECT_TRUE(t3.has_value());
-  EXPECT_EQ(t3.value(), "서m서비스서s");
-
-  // Restore previous string.
-  auto t4 = htmlparser::Strings::Translate(
-      "서m서비스서s",
-      "서비스",
-      "alt");
-  EXPECT_TRUE(t4.has_value());
-  EXPECT_EQ(t4.value(), "amaltas");
-
-  // Special chars can be translated too.
-  auto t5 = htmlparser::Strings::Translate(
-      "amal\ntas\t\t"s,
-      "\t\n"s,
-      " .");
-  EXPECT_TRUE(t5.has_value());
-  EXPECT_EQ(t5.value(), "amal.tas  ");
-
-  // xyz smaller than abc.
-  auto t6 = htmlparser::Strings::Translate(
-      "amaltas",
-      "amlts",
-      "bnm");
-  EXPECT_TRUE(t6.has_value());
-  EXPECT_EQ(t6.value(), "bnbmb");
-
-  // abc smaller than xyz.
-  auto t7 = htmlparser::Strings::Translate(
-      "amaltas",
-      "amlts",
-      "bnmutoksobigstring");
-  EXPECT_TRUE(t7.has_value());
-  EXPECT_EQ(t7.value(), "bnbmubt");
-
-  // Create a string with invalid codepoints.
-  // Everything after 68 is invalid codepoint.
-  uint8_t characters[] {65, 66, 67, 68, 183, 188, 190, 191, 192, 193, 194};
-  std::stringbuf buf;
-  for (auto c : characters) {
-    buf.sputc(c);
-  }
-  std::string will_not_decode = buf.str();
-  EXPECT_EQ(will_not_decode.at(0), 'A');
-  EXPECT_EQ(will_not_decode.at(1), 'B');
-  EXPECT_EQ(will_not_decode.at(2), 'C');
-  EXPECT_EQ(will_not_decode.at(3), 'D');
-  // garbage after this.
-
-  auto t8 = htmlparser::Strings::Translate(
-      will_not_decode,
-      "abcdefghij",
-      "lmnopqrstu");
-
-  // Translate failed.
-  EXPECT_FALSE(t8.has_value());
-
-  // Translate ignore chracters if abc is longer than xyz.
-  // In the following abc string ...wn is removed from translated string.
-  auto t9 = htmlparser::Strings::Translate(
-      "The quick brown fox.", "brown", "red");
-  EXPECT_TRUE(t9.has_value());
-  EXPECT_EQ(t9.value(), "The quick red fdx.");
-}
-
-TEST(Utf8UtilTest, SingleCodepointToString) {
-  char32_t bolt = 0x26A1;
-  std::string utf8_string;
-  htmlparser::Strings::AppendCodepointToUtf8String(bolt, &utf8_string);
-  EXPECT_EQ("⚡", utf8_string);
-}
-
-TEST(Utf8UtilTest, RoundTripsAndLengths) {
-  std::vector<char32_t> ascii =
-      htmlparser::Strings::Utf8ToCodepoints("Hello, world");
-  EXPECT_EQ("Hello, world",
-            htmlparser::Strings::CodepointsToUtf8String(ascii));
-
-  std::string amped = "⚡ Got Amp?";
-  EXPECT_EQ(12, amped.size());
-  std::vector<char32_t> amped_codes =
-      htmlparser::Strings::Utf8ToCodepoints(amped);
-  EXPECT_EQ(10, amped_codes.size());  // oh look there were multibyte chars.
-  EXPECT_EQ(amped,
-            htmlparser::Strings::CodepointsToUtf8String(amped_codes));
-}
diff --git a/validator/htmlparser/testconstants.h b/validator/htmlparser/testconstants.h
deleted file mode 100644
index 11db401fc6aa8..0000000000000
--- a/validator/htmlparser/testconstants.h
+++ /dev/null
@@ -1,92 +0,0 @@
-//
-// 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.
-//
-
-#ifndef HTMLPARSER__TESTCONSTANTS_H_
-#define HTMLPARSER__TESTCONSTANTS_H_
-
-#include <array>
-#include <string_view>
-
-namespace htmlparser {
-
-namespace testing {
-
-inline constexpr std::array<std::string_view, 2> kTestDataDirs{
-    "testdata/tree-construction/*.dat",
-    "testdata/go/*.dat",
-};
-
-// Some test input result in parse trees are not 'well-formed' despite
-// following the HTML5 recovery algorithms. Rendering and re-parsing such a
-// tree will not result in an exact clone of that tree. We blacklist such
-// inputs from the render test.
-inline constexpr std::array<std::string_view, 38> kRenderTestBlacklist {
-    // The second <a> will be reparented to the first <table>'s parent. This
-    // results in an <a> whose parent is an <a>, which is not 'well-formed'.
-    "<a><table><td><a><table></table><a></tr><a></table><b>X</b>C<a>Y",
-    // The same thing with a <p>:
-    "<p><table></p>",
-    // More cases of <a> being reparented:
-    "<a href=\"blah\">aba<table><a href=\"foo\">br<tr><td></td>"
-        "</tr>x</table>aoe",
-    "<a><table><a></table><p><a><div><a>",
-    "<a><table><td><a><table></table><a></tr><a></table><a>",
-    "<template><a><table><a>",
-    // A similar reparenting situation involving <nobr>,
-    "<!DOCTYPE html><body><b><nobr>1<table><nobr></b><i><nobr>2<nobr></i>3",
-    // A <plaintext> element is reparented, putting it before a table.
-    // A <plaintext> element can't have anything after it in HTML.
-    "<table><plaintext><td>",
-    "<!doctype html><table><plaintext></plaintext>",
-    "<!doctype html><table><tbody><plaintext></plaintext>",
-    "<!doctype html><table><tbody><tr><plaintext></plaintext>",
-    // A form inside a table inside a form doesn't work either.
-    "<!doctype html><form><table></form><form></table></form>",
-    // A script that ends at EOF may escape its own closing tag when rendered.
-    "<!doctype html><script><!--<script ",
-    "<!doctype html><script><!--<script <",
-    "<!doctype html><script><!--<script <a",
-    "<!doctype html><script><!--<script </",
-    "<!doctype html><script><!--<script </s",
-    "<!doctype html><script><!--<script </script",
-    "<!doctype html><script><!--<script </scripta",
-    "<!doctype html><script><!--<script -",
-    "<!doctype html><script><!--<script -a",
-    "<!doctype html><script><!--<script -<",
-    "<!doctype html><script><!--<script --",
-    "<!doctype html><script><!--<script --a",
-    "<!doctype html><script><!--<script --<",
-    "<script><!--<script ",
-    "<script><!--<script <a",
-    "<script><!--<script </script",
-    "<script><!--<script </scripta",
-    "<script><!--<script -",
-    "<script><!--<script -a",
-    "<script><!--<script --",
-    "<script><!--<script --a",
-    "<script><!--<script <",
-    "<script><!--<script </",
-    "<script><!--<script </s",
-    // Reconstructing the active formatting elements results in a <plaintext>
-    // element that contains an <a> element.
-    "<!doctype html><p><a><plaintext>b",
-    "<table><math><select><mi><select></table>",
-};
-
-}  // namespace testing
-}  // namespace htmlparser
-
-#endif  // HTMLPARSER__TESTCONSTANTS_H_
diff --git a/validator/htmlparser/testdata/tree-construction/README.md b/validator/htmlparser/testdata/tree-construction/README.md
deleted file mode 100644
index a5e87f9ac3fbe..0000000000000
--- a/validator/htmlparser/testdata/tree-construction/README.md
+++ /dev/null
@@ -1,107 +0,0 @@
-# Tree Construction Tests
-
-Each file containing tree construction tests consists of any number of
-tests separated by two newlines (LF) and a single newline before the end
-of the file. For instance:
-
-    [TEST]LF
-    LF
-    [TEST]LF
-    LF
-    [TEST]LF
-
-Where [TEST] is the following format:
-
-Each test must begin with a string "\#data" followed by a newline (LF).
-All subsequent lines until a line that says "\#errors" are the test data
-and must be passed to the system being tested unchanged, except with the
-final newline (on the last line) removed.
-
-Then there must be a line that says "\#errors". It must be followed by
-one line per parse error that a conformant checker would return. It
-doesn't matter what those lines are, although they can't be
-"\#new-errors", "\#document-fragment", "\#document", "\#script-off",
-"\#script-on", or empty, the only thing that matters is that there be
-the right number of parse errors.
-
-Then there \*may\* be a line that says "\#new-errors", which works like
-the "\#errors" section adding more errors to the expected number of
-errors.
-
-Then there \*may\* be a line that says "\#document-fragment", which must
-be followed by a newline (LF), followed by a string of characters that
-indicates the context element, followed by a newline (LF). If the string
-of characters starts with "svg ", the context element is in the SVG
-namespace and the substring after "svg " is the local name. If the
-string of characters starts with "math ", the context element is in the
-MathML namespace and the substring after "math " is the local name.
-Otherwise, the context element is in the HTML namespace and the string
-is the local name. If this line is present the "\#data" must be parsed
-using the HTML fragment parsing algorithm with the context element as
-context.
-
-Then there \*may\* be a line that says "\#script-off" or
-"\#script-on". If a line that says "\#script-off" is present, the
-parser must set the scripting flag to disabled. If a line that says
-"\#script-on" is present, it must set it to enabled. Otherwise, the
-test should be run in both modes.
-
-Then there must be a line that says "\#document", which must be followed
-by a dump of the tree of the parsed DOM. Each node must be represented
-by a single line. Each line must start with "| ", followed by two spaces
-per parent node that the node has before the root document node.
-
-- Element nodes must be represented by a "`<`" then the _tag name
-  string_ "`>`", and all the attributes must be given, sorted
-  lexicographically by UTF-16 code unit according to their _attribute
-  name string_, on subsequent lines, as if they were children of the
-  element node.
-- Attribute nodes must have the _attribute name string_, then an "="
-  sign, then the attribute value in double quotes (").
-- Text nodes must be the string, in double quotes. Newlines aren't
-  escaped.
-- Comments must be "`<`" then "`!--`" then the data then "`-->`".
-- DOCTYPEs must be "`<!DOCTYPE`" then the name then if either of the
-  system id or public id is non-empty a space, public id in
-  double-quotes, another space an the system id in double-quotes, and
-  then in any case "`>`".
-- Processing instructions must be "`<?`", then the target, then a
-  space, then the data and then "`>`". (The HTML parser cannot emit
-  processing instructions, but scripts can, and the WebVTT to DOM
-  rules can emit them.)
-- Template contents are represented by the string "content" with the
-  children below it.
-
-The _tag name string_ is the local name prefixed by a namespace
-designator. For the HTML namespace, the namespace designator is the
-empty string, i.e. there's no prefix. For the SVG namespace, the
-namespace designator is "svg ". For the MathML namespace, the namespace
-designator is "math ".
-
-The _attribute name string_ is the local name prefixed by a namespace
-designator. For no namespace, the namespace designator is the empty
-string, i.e. there's no prefix. For the XLink namespace, the namespace
-designator is "xlink ". For the XML namespace, the namespace designator
-is "xml ". For the XMLNS namespace, the namespace designator is "xmlns
-". Note the difference between "xlink:href" which is an attribute in no
-namespace with the local name "xlink:href" and "xlink href" which is an
-attribute in the xlink namespace with the local name "href".
-
-If there is also a "\#document-fragment" the bit following "\#document"
-must be a representation of the HTML fragment serialization for the
-context element given by "\#document-fragment".
-
-For example:
-
-    #data
-    <p>One<p>Two
-    #errors
-    3: Missing document type declaration
-    #document
-    | <html>
-    |   <head>
-    |   <body>
-    |     <p>
-    |       "One"
-    |     <p>
-    |       "Two"
diff --git a/validator/htmlparser/testdata/tree-construction/adoption01.dat b/validator/htmlparser/testdata/tree-construction/adoption01.dat
deleted file mode 100644
index 38f98efded0ae..0000000000000
--- a/validator/htmlparser/testdata/tree-construction/adoption01.dat
+++ /dev/null
@@ -1,354 +0,0 @@
-#data
-<a><p></a></p>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,10): adoption-agency-1.3
-#document
-| <html>
-|   <head>
-|   <body>
-|     <a>
-|     <p>
-|       <a>
-
-#data
-<a>1<p>2</a>3</p>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,12): adoption-agency-1.3
-#document
-| <html>
-|   <head>
-|   <body>
-|     <a>
-|       "1"
-|     <p>
-|       <a>
-|         "2"
-|       "3"
-
-#data
-<a>1<button>2</a>3</button>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,17): adoption-agency-1.3
-#document
-| <html>
-|   <head>
-|   <body>
-|     <a>
-|       "1"
-|     <button>
-|       <a>
-|         "2"
-|       "3"
-
-#data
-<a>1<b>2</a>3</b>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,12): adoption-agency-1.3
-#document
-| <html>
-|   <head>
-|   <body>
-|     <a>
-|       "1"
-|       <b>
-|         "2"
-|     <b>
-|       "3"
-
-#data
-<a>1<div>2<div>3</a>4</div>5</div>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,20): adoption-agency-1.3
-(1,20): adoption-agency-1.3
-#document
-| <html>
-|   <head>
-|   <body>
-|     <a>
-|       "1"
-|     <div>
-|       <a>
-|         "2"
-|       <div>
-|         <a>
-|           "3"
-|         "4"
-|       "5"
-
-#data
-<table><a>1<p>2</a>3</p>
-#errors
-(1,7): expected-doctype-but-got-start-tag
-(1,10): unexpected-start-tag-implies-table-voodoo
-(1,11): unexpected-character-implies-table-voodoo
-(1,14): unexpected-start-tag-implies-table-voodoo
-(1,15): unexpected-character-implies-table-voodoo
-(1,19): unexpected-end-tag-implies-table-voodoo
-(1,19): adoption-agency-1.3
-(1,20): unexpected-character-implies-table-voodoo
-(1,24): unexpected-end-tag-implies-table-voodoo
-(1,24): eof-in-table
-#document
-| <html>
-|   <head>
-|   <body>
-|     <a>
-|       "1"
-|     <p>
-|       <a>
-|         "2"
-|       "3"
-|     <table>
-
-#data
-<b><b><a><p></a>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,16): adoption-agency-1.3
-(1,16): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <b>
-|       <b>
-|         <a>
-|         <p>
-|           <a>
-
-#data
-<b><a><b><p></a>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,16): adoption-agency-1.3
-(1,16): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <b>
-|       <a>
-|         <b>
-|       <b>
-|         <p>
-|           <a>
-
-#data
-<a><b><b><p></a>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,16): adoption-agency-1.3
-(1,16): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <a>
-|       <b>
-|         <b>
-|     <b>
-|       <b>
-|         <p>
-|           <a>
-
-#data
-<p>1<s id="A">2<b id="B">3</p>4</s>5</b>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,30): unexpected-end-tag
-(1,35): adoption-agency-1.3
-#document
-| <html>
-|   <head>
-|   <body>
-|     <p>
-|       "1"
-|       <s>
-|         id="A"
-|         "2"
-|         <b>
-|           id="B"
-|           "3"
-|     <s>
-|       id="A"
-|       <b>
-|         id="B"
-|         "4"
-|     <b>
-|       id="B"
-|       "5"
-
-#data
-<table><a>1<td>2</td>3</table>
-#errors
-(1,7): expected-doctype-but-got-start-tag
-(1,10): unexpected-start-tag-implies-table-voodoo
-(1,11): unexpected-character-implies-table-voodoo
-(1,15): unexpected-cell-in-table-body
-(1,30): unexpected-implied-end-tag-in-table-view
-#document
-| <html>
-|   <head>
-|   <body>
-|     <a>
-|       "1"
-|     <a>
-|       "3"
-|     <table>
-|       <tbody>
-|         <tr>
-|           <td>
-|             "2"
-
-#data
-<table>A<td>B</td>C</table>
-#errors
-(1,7): expected-doctype-but-got-start-tag
-(1,8): unexpected-character-implies-table-voodoo
-(1,12): unexpected-cell-in-table-body
-(1,22): unexpected-character-implies-table-voodoo
-#document
-| <html>
-|   <head>
-|   <body>
-|     "AC"
-|     <table>
-|       <tbody>
-|         <tr>
-|           <td>
-|             "B"
-
-#data
-<a><svg><tr><input></a>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,23): unexpected-end-tag
-(1,23): adoption-agency-1.3
-#document
-| <html>
-|   <head>
-|   <body>
-|     <a>
-|       <svg svg>
-|         <svg tr>
-|           <svg input>
-
-#data
-<div><a><b><div><div><div><div><div><div><div><div><div><div></a>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-(1,65): adoption-agency-1.3
-(1,65): adoption-agency-1.3
-(1,65): adoption-agency-1.3
-(1,65): adoption-agency-1.3
-(1,65): adoption-agency-1.3
-(1,65): adoption-agency-1.3
-(1,65): adoption-agency-1.3
-(1,65): adoption-agency-1.3
-(1,65): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <div>
-|       <a>
-|         <b>
-|       <b>
-|         <div>
-|           <a>
-|           <div>
-|             <a>
-|             <div>
-|               <a>
-|               <div>
-|                 <a>
-|                 <div>
-|                   <a>
-|                   <div>
-|                     <a>
-|                     <div>
-|                       <a>
-|                       <div>
-|                         <a>
-|                           <div>
-|                             <div>
-
-#data
-<div><a><b><u><i><code><div></a>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-(1,32): adoption-agency-1.3
-(1,32): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <div>
-|       <a>
-|         <b>
-|           <u>
-|             <i>
-|               <code>
-|       <u>
-|         <i>
-|           <code>
-|             <div>
-|               <a>
-
-#data
-<b><b><b><b>x</b></b></b></b>y
-#errors
-(1,3): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     <b>
-|       <b>
-|         <b>
-|           <b>
-|             "x"
-|     "y"
-
-#data
-<p><b><b><b><b><p>x
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,18): unexpected-end-tag
-(1,19): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <p>
-|       <b>
-|         <b>
-|           <b>
-|             <b>
-|     <p>
-|       <b>
-|         <b>
-|           <b>
-|             "x"
-
-#data
-<b><em><foo><foob><fooc><aside></b></em>
-#errors
-(1,35): adoption-agency-1.3
-(1,40): adoption-agency-1.3
-(1,40): expected-closing-tag-but-got-eof
-#document-fragment
-div
-#document
-| <b>
-|   <em>
-|     <foo>
-|       <foob>
-|         <fooc>
-| <aside>
-|   <b>
diff --git a/validator/htmlparser/testdata/tree-construction/entities01.dat b/validator/htmlparser/testdata/tree-construction/entities01.dat
deleted file mode 100644
index 9bacebea050d9..0000000000000
--- a/validator/htmlparser/testdata/tree-construction/entities01.dat
+++ /dev/null
@@ -1,943 +0,0 @@
-#data
-FOO&gt;BAR
-#errors
-(1,3): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO>BAR"
-
-#data
-FOO&gtBAR
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,6): named-entity-without-semicolon
-#new-errors
-(1:7) missing-semicolon-after-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO>BAR"
-
-#data
-FOO&gt BAR
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,6): named-entity-without-semicolon
-#new-errors
-(1:7) missing-semicolon-after-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO> BAR"
-
-#data
-FOO&gt;;;BAR
-#errors
-(1,3): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO>;;BAR"
-
-#data
-I'm &notit; I tell you
-#errors
-(1,4): expected-doctype-but-got-chars
-(1,9): named-entity-without-semicolon
-#new-errors
-(1:9) missing-semicolon-after-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "I'm ¬it; I tell you"
-
-#data
-I'm &notin; I tell you
-#errors
-(1,4): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "I'm ∉ I tell you"
-
-#data
-&ammmp;
-#errors
-(1,1): expected-doctype-but-got-chars
-(1,7): unknown-named-character-reference
-#new-errors
-(1:7) unknown-named-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "&ammmp;"
-
-#data
-&ammmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp;
-#errors
-(1,1): expected-doctype-but-got-chars
-(1,950): unknown-named-character-reference
-#new-errors
-(1:950) unknown-named-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "&ammmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp;"
-
-#data
-FOO& BAR
-#errors
-(1,3): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO& BAR"
-
-#data
-FOO&<BAR>
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,9): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO&"
-|     <bar>
-
-#data
-FOO&&&&gt;BAR
-#errors
-(1,3): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO&&&>BAR"
-
-#data
-FOO&#41;BAR
-#errors
-(1,3): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO)BAR"
-
-#data
-FOO&#x41;BAR
-#errors
-(1,3): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOABAR"
-
-#data
-FOO&#X41;BAR
-#errors
-(1,3): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOABAR"
-
-#data
-FOO&#BAR
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,5): expected-numeric-entity
-#new-errors
-(1:6) absence-of-digits-in-numeric-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO&#BAR"
-
-#data
-FOO&#ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,5): expected-numeric-entity
-#new-errors
-(1:6) absence-of-digits-in-numeric-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO&#ZOO"
-
-#data
-FOO&#xBAR
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,7): expected-numeric-entity
-#new-errors
-(1:9) missing-semicolon-after-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOºR"
-
-#data
-FOO&#xZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,6): expected-numeric-entity
-#new-errors
-(1:7) absence-of-digits-in-numeric-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO&#xZOO"
-
-#data
-FOO&#XZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,6): expected-numeric-entity
-#new-errors
-(1:7) absence-of-digits-in-numeric-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO&#XZOO"
-
-#data
-FOO&#41BAR
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,7): numeric-entity-without-semicolon
-#new-errors
-(1:8) missing-semicolon-after-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO)BAR"
-
-#data
-FOO&#x41BAR
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,10): numeric-entity-without-semicolon
-#new-errors
-(1:11) missing-semicolon-after-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO䆺R"
-
-#data
-FOO&#x41ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,8): numeric-entity-without-semicolon
-#new-errors
-(1:9) missing-semicolon-after-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOAZOO"
-
-#data
-FOO&#x0000;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) null-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO�ZOO"
-
-#data
-FOO&#x0078;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOxZOO"
-
-#data
-FOO&#x0079;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOyZOO"
-
-#data
-FOO&#x0080;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO€ZOO"
-
-#data
-FOO&#x0081;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOZOO"
-
-#data
-FOO&#x0082;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO‚ZOO"
-
-#data
-FOO&#x0083;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOƒZOO"
-
-#data
-FOO&#x0084;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO„ZOO"
-
-#data
-FOO&#x0085;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO…ZOO"
-
-#data
-FOO&#x0086;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO†ZOO"
-
-#data
-FOO&#x0087;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO‡ZOO"
-
-#data
-FOO&#x0088;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOˆZOO"
-
-#data
-FOO&#x0089;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO‰ZOO"
-
-#data
-FOO&#x008A;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOŠZOO"
-
-#data
-FOO&#x008B;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO‹ZOO"
-
-#data
-FOO&#x008C;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOŒZOO"
-
-#data
-FOO&#x008D;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOZOO"
-
-#data
-FOO&#x008E;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOŽZOO"
-
-#data
-FOO&#x008F;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOZOO"
-
-#data
-FOO&#x0090;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOZOO"
-
-#data
-FOO&#x0091;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO‘ZOO"
-
-#data
-FOO&#x0092;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO’ZOO"
-
-#data
-FOO&#x0093;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO“ZOO"
-
-#data
-FOO&#x0094;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO”ZOO"
-
-#data
-FOO&#x0095;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO•ZOO"
-
-#data
-FOO&#x0096;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO–ZOO"
-
-#data
-FOO&#x0097;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO—ZOO"
-
-#data
-FOO&#x0098;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO˜ZOO"
-
-#data
-FOO&#x0099;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO™ZOO"
-
-#data
-FOO&#x009A;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOšZOO"
-
-#data
-FOO&#x009B;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO›ZOO"
-
-#data
-FOO&#x009C;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOœZOO"
-
-#data
-FOO&#x009D;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOZOO"
-
-#data
-FOO&#x009E;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOžZOO"
-
-#data
-FOO&#x009F;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) control-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOŸZOO"
-
-#data
-FOO&#x00A0;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO ZOO"
-
-#data
-FOO&#xD7FF;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO퟿ZOO"
-
-#data
-FOO&#xD800;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) surrogate-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO�ZOO"
-
-#data
-FOO&#xD801;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) surrogate-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO�ZOO"
-
-#data
-FOO&#xDFFE;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) surrogate-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO�ZOO"
-
-#data
-FOO&#xDFFF;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,11): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:12) surrogate-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO�ZOO"
-
-#data
-FOO&#xE000;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOOZOO"
-
-#data
-FOO&#x10FFFE;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,13): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:14) noncharacter-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO􏿾ZOO"
-
-#data
-FOO&#x1087D4;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO􈟔ZOO"
-
-#data
-FOO&#x10FFFF;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,13): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:14) noncharacter-character-reference
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO􏿿ZOO"
-
-#data
-FOO&#x110000;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,13): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:14) character-reference-outside-unicode-range
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO�ZOO"
-
-#data
-FOO&#xFFFFFF;ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,13): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:14) character-reference-outside-unicode-range
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO�ZOO"
-
-#data
-FOO&#11111111111
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,13): illegal-codepoint-for-numeric-entity
-(1,13): eof-in-numeric-entity
-#new-errors
-(1:17) missing-semicolon-after-character-reference
-(1:17) character-reference-outside-unicode-range
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO�"
-
-#data
-FOO&#1111111111
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,13): illegal-codepoint-for-numeric-entity
-(1,13): eof-in-numeric-entity
-#new-errors
-(1:16) missing-semicolon-after-character-reference
-(1:16) character-reference-outside-unicode-range
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO�"
-
-#data
-FOO&#111111111111
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,13): illegal-codepoint-for-numeric-entity
-(1,13): eof-in-numeric-entity
-#new-errors
-(1:18) missing-semicolon-after-character-reference
-(1:18) character-reference-outside-unicode-range
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO�"
-
-#data
-FOO&#11111111111ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,16): numeric-entity-without-semicolon
-(1,16): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:17) missing-semicolon-after-character-reference
-(1:17) character-reference-outside-unicode-range
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO�ZOO"
-
-#data
-FOO&#1111111111ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,15): numeric-entity-without-semicolon
-(1,15): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:16) missing-semicolon-after-character-reference
-(1:16) character-reference-outside-unicode-range
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO�ZOO"
-
-#data
-FOO&#111111111111ZOO
-#errors
-(1,3): expected-doctype-but-got-chars
-(1,17): numeric-entity-without-semicolon
-(1,17): illegal-codepoint-for-numeric-entity
-#new-errors
-(1:18) missing-semicolon-after-character-reference
-(1:18) character-reference-outside-unicode-range
-#document
-| <html>
-|   <head>
-|   <body>
-|     "FOO�ZOO"
diff --git a/validator/htmlparser/testdata/tree-construction/menuitem-element.dat b/validator/htmlparser/testdata/tree-construction/menuitem-element.dat
deleted file mode 100644
index 43aa0c67b8903..0000000000000
--- a/validator/htmlparser/testdata/tree-construction/menuitem-element.dat
+++ /dev/null
@@ -1,257 +0,0 @@
-#data
-<menuitem>
-#errors
-10: Start tag seen without seeing a doctype first. Expected “<!DOCTYPE html>”.
-10: End of file seen and there were open elements.
-10: Unclosed element “menuitem”.
-#document
-| <html>
-|   <head>
-|   <body>
-|     <menuitem>
-
-#data
-</menuitem>
-#errors
-11: End tag seen without seeing a doctype first. Expected “<!DOCTYPE html>”.
-11: Stray end tag “menuitem”.
-#document
-| <html>
-|   <head>
-|   <body>
-
-#data
-<!DOCTYPE html><body><menuitem>A
-#errors
-32: End of file seen and there were open elements.
-31: Unclosed element “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <menuitem>
-|       "A"
-
-#data
-<!DOCTYPE html><body><menuitem>A<menuitem>B
-#errors
-43: End of file seen and there were open elements.
-42: Unclosed element “menuitem”.
-31: Unclosed element “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <menuitem>
-|       "A"
-|       <menuitem>
-|         "B"
-
-#data
-<!DOCTYPE html><body><menuitem>A<menu>B</menu>
-#errors
-46: End of file seen and there were open elements.
-31: Unclosed element “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <menuitem>
-|       "A"
-|       <menu>
-|         "B"
-
-#data
-<!DOCTYPE html><body><menuitem>A<hr>B
-#errors
-37: End of file seen and there were open elements.
-31: Unclosed element “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <menuitem>
-|       "A"
-|       <hr>
-|       "B"
-
-#data
-<!DOCTYPE html><li><menuitem><li>
-#errors
-33: End tag “li” implied, but there were open elements.
-29: Unclosed element “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <li>
-|       <menuitem>
-|     <li>
-
-#data
-<!DOCTYPE html><menuitem><p></menuitem>x
-#errors
-39: Stray end tag “menuitem”.
-40: End of file seen and there were open elements.
-25: Unclosed element “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <menuitem>
-|       <p>
-|         "x"
-
-#data
-<!DOCTYPE html><p><b></p><menuitem>
-#errors
-25: End tag “p” seen, but there were open elements.
-21: Unclosed element “b”.
-35: End of file seen and there were open elements.
-35: Unclosed element “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <p>
-|       <b>
-|     <b>
-|       <menuitem>
-
-#data
-<!DOCTYPE html><menuitem><asdf></menuitem>x
-#errors
-42: End tag “menuitem” seen, but there were open elements.
-31: Unclosed element “asdf”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <menuitem>
-|       <asdf>
-|     "x"
-
-#data
-<!DOCTYPE html></menuitem>
-#errors
-26: Stray end tag “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-
-#data
-<!DOCTYPE html><html></menuitem>
-#errors
-26: Stray end tag “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-
-#data
-<!DOCTYPE html><head></menuitem>
-#errors
-26: Stray end tag “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-
-#data
-<!DOCTYPE html><select><menuitem></select>
-#errors
-33: Stray start tag “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <select>
-
-#data
-<!DOCTYPE html><option><menuitem>
-#errors
-33: End of file seen and there were open elements.
-33: Unclosed element “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <option>
-|       <menuitem>
-
-#data
-<!DOCTYPE html><menuitem><option>
-#errors
-33: End of file seen and there were open elements.
-25: Unclosed element “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <menuitem>
-|       <option>
-
-#data
-<!DOCTYPE html><menuitem></body>
-#errors
-32: End tag for  “body” seen, but there were unclosed elements.
-25: Unclosed element “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <menuitem>
-
-#data
-<!DOCTYPE html><menuitem></html>
-#errors
-32: End tag for  “html” seen, but there were unclosed elements.
-25: Unclosed element “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <menuitem>
-
-#data
-<!DOCTYPE html><menuitem><p>
-#errors
-28: End of file seen and there were open elements.
-25: Unclosed element “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <menuitem>
-|       <p>
-
-#data
-<!DOCTYPE html><menuitem><li>
-#errors
-29: End of file seen and there were open elements.
-25: Unclosed element “menuitem”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <menuitem>
-|       <li>
diff --git a/validator/htmlparser/testdata/tree-construction/scripted/adoption01.dat b/validator/htmlparser/testdata/tree-construction/scripted/adoption01.dat
deleted file mode 100644
index 5cc0f07496a65..0000000000000
--- a/validator/htmlparser/testdata/tree-construction/scripted/adoption01.dat
+++ /dev/null
@@ -1,16 +0,0 @@
-#data
-<p><b id="A"><script>document.getElementById("A").id = "B"</script></p>TEXT</b>
-#errors
-#script-on
-#document
-| <html>
-|   <head>
-|   <body>
-|     <p>
-|       <b>
-|         id="B"
-|         <script>
-|           "document.getElementById("A").id = "B""
-|     <b>
-|       id="A"
-|       "TEXT"
diff --git a/validator/htmlparser/testdata/tree-construction/scripted/webkit01.dat b/validator/htmlparser/testdata/tree-construction/scripted/webkit01.dat
deleted file mode 100644
index 3e71c1baccc9b..0000000000000
--- a/validator/htmlparser/testdata/tree-construction/scripted/webkit01.dat
+++ /dev/null
@@ -1,30 +0,0 @@
-#data
-1<script>document.write("2")</script>3
-#errors
-#script-on
-#document
-| <html>
-|   <head>
-|   <body>
-|     "1"
-|     <script>
-|       "document.write("2")"
-|     "23"
-
-#data
-1<script>document.write("<script>document.write('2')</scr"+ "ipt><script>document.write('3')</scr" + "ipt>")</script>4
-#errors
-#script-on
-#document
-| <html>
-|   <head>
-|   <body>
-|     "1"
-|     <script>
-|       "document.write("<script>document.write('2')</scr"+ "ipt><script>document.write('3')</scr" + "ipt>")"
-|     <script>
-|       "document.write('2')"
-|     "2"
-|     <script>
-|       "document.write('3')"
-|     "34"
diff --git a/validator/htmlparser/testdata/tree-construction/tests11.dat b/validator/htmlparser/testdata/tree-construction/tests11.dat
deleted file mode 100644
index bdd384ca5eaba..0000000000000
--- a/validator/htmlparser/testdata/tree-construction/tests11.dat
+++ /dev/null
@@ -1,538 +0,0 @@
-#data
-<!DOCTYPE html><body><svg attributeName='' attributeType='' baseFrequency='' baseProfile='' calcMode='' clipPathUnits='' contentScriptType='' contentStyleType='' diffuseConstant='' edgeMode='' externalResourcesRequired='' filterRes='' filterUnits='' glyphRef='' gradientTransform='' gradientUnits='' kernelMatrix='' kernelUnitLength='' keyPoints='' keySplines='' keyTimes='' lengthAdjust='' limitingConeAngle='' markerHeight='' markerUnits='' markerWidth='' maskContentUnits='' maskUnits='' numOctaves='' pathLength='' patternContentUnits='' patternTransform='' patternUnits='' pointsAtX='' pointsAtY='' pointsAtZ='' preserveAlpha='' preserveAspectRatio='' primitiveUnits='' refX='' refY='' repeatCount='' repeatDur='' requiredExtensions='' requiredFeatures='' specularConstant='' specularExponent='' spreadMethod='' startOffset='' stdDeviation='' stitchTiles='' surfaceScale='' systemLanguage='' tableValues='' targetX='' targetY='' textLength='' viewBox='' viewTarget='' xChannelSelector='' yChannelSelector='' zoomAndPan=''></svg>
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       attributeName=""
-|       attributeType=""
-|       baseFrequency=""
-|       baseProfile=""
-|       calcMode=""
-|       clipPathUnits=""
-|       contentScriptType=""
-|       contentStyleType=""
-|       diffuseConstant=""
-|       edgeMode=""
-|       externalResourcesRequired=""
-|       filterRes=""
-|       filterUnits=""
-|       glyphRef=""
-|       gradientTransform=""
-|       gradientUnits=""
-|       kernelMatrix=""
-|       kernelUnitLength=""
-|       keyPoints=""
-|       keySplines=""
-|       keyTimes=""
-|       lengthAdjust=""
-|       limitingConeAngle=""
-|       markerHeight=""
-|       markerUnits=""
-|       markerWidth=""
-|       maskContentUnits=""
-|       maskUnits=""
-|       numOctaves=""
-|       pathLength=""
-|       patternContentUnits=""
-|       patternTransform=""
-|       patternUnits=""
-|       pointsAtX=""
-|       pointsAtY=""
-|       pointsAtZ=""
-|       preserveAlpha=""
-|       preserveAspectRatio=""
-|       primitiveUnits=""
-|       refX=""
-|       refY=""
-|       repeatCount=""
-|       repeatDur=""
-|       requiredExtensions=""
-|       requiredFeatures=""
-|       specularConstant=""
-|       specularExponent=""
-|       spreadMethod=""
-|       startOffset=""
-|       stdDeviation=""
-|       stitchTiles=""
-|       surfaceScale=""
-|       systemLanguage=""
-|       tableValues=""
-|       targetX=""
-|       targetY=""
-|       textLength=""
-|       viewBox=""
-|       viewTarget=""
-|       xChannelSelector=""
-|       yChannelSelector=""
-|       zoomAndPan=""
-
-#data
-<!DOCTYPE html><BODY><SVG ATTRIBUTENAME='' ATTRIBUTETYPE='' BASEFREQUENCY='' BASEPROFILE='' CALCMODE='' CLIPPATHUNITS='' CONTENTSCRIPTTYPE='' CONTENTSTYLETYPE='' DIFFUSECONSTANT='' EDGEMODE='' EXTERNALRESOURCESREQUIRED='' FILTERRES='' FILTERUNITS='' GLYPHREF='' GRADIENTTRANSFORM='' GRADIENTUNITS='' KERNELMATRIX='' KERNELUNITLENGTH='' KEYPOINTS='' KEYSPLINES='' KEYTIMES='' LENGTHADJUST='' LIMITINGCONEANGLE='' MARKERHEIGHT='' MARKERUNITS='' MARKERWIDTH='' MASKCONTENTUNITS='' MASKUNITS='' NUMOCTAVES='' PATHLENGTH='' PATTERNCONTENTUNITS='' PATTERNTRANSFORM='' PATTERNUNITS='' POINTSATX='' POINTSATY='' POINTSATZ='' PRESERVEALPHA='' PRESERVEASPECTRATIO='' PRIMITIVEUNITS='' REFX='' REFY='' REPEATCOUNT='' REPEATDUR='' REQUIREDEXTENSIONS='' REQUIREDFEATURES='' SPECULARCONSTANT='' SPECULAREXPONENT='' SPREADMETHOD='' STARTOFFSET='' STDDEVIATION='' STITCHTILES='' SURFACESCALE='' SYSTEMLANGUAGE='' TABLEVALUES='' TARGETX='' TARGETY='' TEXTLENGTH='' VIEWBOX='' VIEWTARGET='' XCHANNELSELECTOR='' YCHANNELSELECTOR='' ZOOMANDPAN=''></SVG>
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       attributeName=""
-|       attributeType=""
-|       baseFrequency=""
-|       baseProfile=""
-|       calcMode=""
-|       clipPathUnits=""
-|       contentScriptType=""
-|       contentStyleType=""
-|       diffuseConstant=""
-|       edgeMode=""
-|       externalResourcesRequired=""
-|       filterRes=""
-|       filterUnits=""
-|       glyphRef=""
-|       gradientTransform=""
-|       gradientUnits=""
-|       kernelMatrix=""
-|       kernelUnitLength=""
-|       keyPoints=""
-|       keySplines=""
-|       keyTimes=""
-|       lengthAdjust=""
-|       limitingConeAngle=""
-|       markerHeight=""
-|       markerUnits=""
-|       markerWidth=""
-|       maskContentUnits=""
-|       maskUnits=""
-|       numOctaves=""
-|       pathLength=""
-|       patternContentUnits=""
-|       patternTransform=""
-|       patternUnits=""
-|       pointsAtX=""
-|       pointsAtY=""
-|       pointsAtZ=""
-|       preserveAlpha=""
-|       preserveAspectRatio=""
-|       primitiveUnits=""
-|       refX=""
-|       refY=""
-|       repeatCount=""
-|       repeatDur=""
-|       requiredExtensions=""
-|       requiredFeatures=""
-|       specularConstant=""
-|       specularExponent=""
-|       spreadMethod=""
-|       startOffset=""
-|       stdDeviation=""
-|       stitchTiles=""
-|       surfaceScale=""
-|       systemLanguage=""
-|       tableValues=""
-|       targetX=""
-|       targetY=""
-|       textLength=""
-|       viewBox=""
-|       viewTarget=""
-|       xChannelSelector=""
-|       yChannelSelector=""
-|       zoomAndPan=""
-
-#data
-<!DOCTYPE html><body><svg attributename='' attributetype='' basefrequency='' baseprofile='' calcmode='' clippathunits='' contentscripttype='' contentstyletype='' diffuseconstant='' edgemode='' externalresourcesrequired='' filterres='' filterunits='' glyphref='' gradienttransform='' gradientunits='' kernelmatrix='' kernelunitlength='' keypoints='' keysplines='' keytimes='' lengthadjust='' limitingconeangle='' markerheight='' markerunits='' markerwidth='' maskcontentunits='' maskunits='' numoctaves='' pathlength='' patterncontentunits='' patterntransform='' patternunits='' pointsatx='' pointsaty='' pointsatz='' preservealpha='' preserveaspectratio='' primitiveunits='' refx='' refy='' repeatcount='' repeatdur='' requiredextensions='' requiredfeatures='' specularconstant='' specularexponent='' spreadmethod='' startoffset='' stddeviation='' stitchtiles='' surfacescale='' systemlanguage='' tablevalues='' targetx='' targety='' textlength='' viewbox='' viewtarget='' xchannelselector='' ychannelselector='' zoomandpan=''></svg>
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       attributeName=""
-|       attributeType=""
-|       baseFrequency=""
-|       baseProfile=""
-|       calcMode=""
-|       clipPathUnits=""
-|       contentScriptType=""
-|       contentStyleType=""
-|       diffuseConstant=""
-|       edgeMode=""
-|       externalResourcesRequired=""
-|       filterRes=""
-|       filterUnits=""
-|       glyphRef=""
-|       gradientTransform=""
-|       gradientUnits=""
-|       kernelMatrix=""
-|       kernelUnitLength=""
-|       keyPoints=""
-|       keySplines=""
-|       keyTimes=""
-|       lengthAdjust=""
-|       limitingConeAngle=""
-|       markerHeight=""
-|       markerUnits=""
-|       markerWidth=""
-|       maskContentUnits=""
-|       maskUnits=""
-|       numOctaves=""
-|       pathLength=""
-|       patternContentUnits=""
-|       patternTransform=""
-|       patternUnits=""
-|       pointsAtX=""
-|       pointsAtY=""
-|       pointsAtZ=""
-|       preserveAlpha=""
-|       preserveAspectRatio=""
-|       primitiveUnits=""
-|       refX=""
-|       refY=""
-|       repeatCount=""
-|       repeatDur=""
-|       requiredExtensions=""
-|       requiredFeatures=""
-|       specularConstant=""
-|       specularExponent=""
-|       spreadMethod=""
-|       startOffset=""
-|       stdDeviation=""
-|       stitchTiles=""
-|       surfaceScale=""
-|       systemLanguage=""
-|       tableValues=""
-|       targetX=""
-|       targetY=""
-|       textLength=""
-|       viewBox=""
-|       viewTarget=""
-|       xChannelSelector=""
-|       yChannelSelector=""
-|       zoomAndPan=""
-
-#data
-<!DOCTYPE html><body><math attributeName='' attributeType='' baseFrequency='' baseProfile='' calcMode='' clipPathUnits='' contentScriptType='' contentStyleType='' diffuseConstant='' edgeMode='' externalResourcesRequired='' filterRes='' filterUnits='' glyphRef='' gradientTransform='' gradientUnits='' kernelMatrix='' kernelUnitLength='' keyPoints='' keySplines='' keyTimes='' lengthAdjust='' limitingConeAngle='' markerHeight='' markerUnits='' markerWidth='' maskContentUnits='' maskUnits='' numOctaves='' pathLength='' patternContentUnits='' patternTransform='' patternUnits='' pointsAtX='' pointsAtY='' pointsAtZ='' preserveAlpha='' preserveAspectRatio='' primitiveUnits='' refX='' refY='' repeatCount='' repeatDur='' requiredExtensions='' requiredFeatures='' specularConstant='' specularExponent='' spreadMethod='' startOffset='' stdDeviation='' stitchTiles='' surfaceScale='' systemLanguage='' tableValues='' targetX='' targetY='' textLength='' viewBox='' viewTarget='' xChannelSelector='' yChannelSelector='' zoomAndPan=''></math>
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <math math>
-|       attributename=""
-|       attributetype=""
-|       basefrequency=""
-|       baseprofile=""
-|       calcmode=""
-|       clippathunits=""
-|       contentscripttype=""
-|       contentstyletype=""
-|       diffuseconstant=""
-|       edgemode=""
-|       externalresourcesrequired=""
-|       filterres=""
-|       filterunits=""
-|       glyphref=""
-|       gradienttransform=""
-|       gradientunits=""
-|       kernelmatrix=""
-|       kernelunitlength=""
-|       keypoints=""
-|       keysplines=""
-|       keytimes=""
-|       lengthadjust=""
-|       limitingconeangle=""
-|       markerheight=""
-|       markerunits=""
-|       markerwidth=""
-|       maskcontentunits=""
-|       maskunits=""
-|       numoctaves=""
-|       pathlength=""
-|       patterncontentunits=""
-|       patterntransform=""
-|       patternunits=""
-|       pointsatx=""
-|       pointsaty=""
-|       pointsatz=""
-|       preservealpha=""
-|       preserveaspectratio=""
-|       primitiveunits=""
-|       refx=""
-|       refy=""
-|       repeatcount=""
-|       repeatdur=""
-|       requiredextensions=""
-|       requiredfeatures=""
-|       specularconstant=""
-|       specularexponent=""
-|       spreadmethod=""
-|       startoffset=""
-|       stddeviation=""
-|       stitchtiles=""
-|       surfacescale=""
-|       systemlanguage=""
-|       tablevalues=""
-|       targetx=""
-|       targety=""
-|       textlength=""
-|       viewbox=""
-|       viewtarget=""
-|       xchannelselector=""
-|       ychannelselector=""
-|       zoomandpan=""
-
-#data
-<!DOCTYPE html><body><svg contentScriptType='' contentStyleType='' externalResourcesRequired='' filterRes=''></svg>
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       contentScriptType=""
-|       contentStyleType=""
-|       externalResourcesRequired=""
-|       filterRes=""
-
-#data
-<!DOCTYPE html><body><svg CONTENTSCRIPTTYPE='' CONTENTSTYLETYPE='' EXTERNALRESOURCESREQUIRED='' FILTERRES=''></svg>
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       contentScriptType=""
-|       contentStyleType=""
-|       externalResourcesRequired=""
-|       filterRes=""
-
-#data
-<!DOCTYPE html><body><svg contentscripttype='' contentstyletype='' externalresourcesrequired='' filterres=''></svg>
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       contentScriptType=""
-|       contentStyleType=""
-|       externalResourcesRequired=""
-|       filterRes=""
-
-#data
-<!DOCTYPE html><body><math contentScriptType='' contentStyleType='' externalResourcesRequired='' filterRes=''></math>
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <math math>
-|       contentscripttype=""
-|       contentstyletype=""
-|       externalresourcesrequired=""
-|       filterres=""
-
-#data
-<!DOCTYPE html><body><svg><altGlyph /><altGlyphDef /><altGlyphItem /><animateColor /><animateMotion /><animateTransform /><clipPath /><feBlend /><feColorMatrix /><feComponentTransfer /><feComposite /><feConvolveMatrix /><feDiffuseLighting /><feDisplacementMap /><feDistantLight /><feFlood /><feFuncA /><feFuncB /><feFuncG /><feFuncR /><feGaussianBlur /><feImage /><feMerge /><feMergeNode /><feMorphology /><feOffset /><fePointLight /><feSpecularLighting /><feSpotLight /><feTile /><feTurbulence /><foreignObject /><glyphRef /><linearGradient /><radialGradient /><textPath /></svg>
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       <svg altGlyph>
-|       <svg altGlyphDef>
-|       <svg altGlyphItem>
-|       <svg animateColor>
-|       <svg animateMotion>
-|       <svg animateTransform>
-|       <svg clipPath>
-|       <svg feBlend>
-|       <svg feColorMatrix>
-|       <svg feComponentTransfer>
-|       <svg feComposite>
-|       <svg feConvolveMatrix>
-|       <svg feDiffuseLighting>
-|       <svg feDisplacementMap>
-|       <svg feDistantLight>
-|       <svg feFlood>
-|       <svg feFuncA>
-|       <svg feFuncB>
-|       <svg feFuncG>
-|       <svg feFuncR>
-|       <svg feGaussianBlur>
-|       <svg feImage>
-|       <svg feMerge>
-|       <svg feMergeNode>
-|       <svg feMorphology>
-|       <svg feOffset>
-|       <svg fePointLight>
-|       <svg feSpecularLighting>
-|       <svg feSpotLight>
-|       <svg feTile>
-|       <svg feTurbulence>
-|       <svg foreignObject>
-|       <svg glyphRef>
-|       <svg linearGradient>
-|       <svg radialGradient>
-|       <svg textPath>
-
-#data
-<!DOCTYPE html><body><svg><altglyph /><altglyphdef /><altglyphitem /><animatecolor /><animatemotion /><animatetransform /><clippath /><feblend /><fecolormatrix /><fecomponenttransfer /><fecomposite /><feconvolvematrix /><fediffuselighting /><fedisplacementmap /><fedistantlight /><feflood /><fefunca /><fefuncb /><fefuncg /><fefuncr /><fegaussianblur /><feimage /><femerge /><femergenode /><femorphology /><feoffset /><fepointlight /><fespecularlighting /><fespotlight /><fetile /><feturbulence /><foreignobject /><glyphref /><lineargradient /><radialgradient /><textpath /></svg>
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       <svg altGlyph>
-|       <svg altGlyphDef>
-|       <svg altGlyphItem>
-|       <svg animateColor>
-|       <svg animateMotion>
-|       <svg animateTransform>
-|       <svg clipPath>
-|       <svg feBlend>
-|       <svg feColorMatrix>
-|       <svg feComponentTransfer>
-|       <svg feComposite>
-|       <svg feConvolveMatrix>
-|       <svg feDiffuseLighting>
-|       <svg feDisplacementMap>
-|       <svg feDistantLight>
-|       <svg feFlood>
-|       <svg feFuncA>
-|       <svg feFuncB>
-|       <svg feFuncG>
-|       <svg feFuncR>
-|       <svg feGaussianBlur>
-|       <svg feImage>
-|       <svg feMerge>
-|       <svg feMergeNode>
-|       <svg feMorphology>
-|       <svg feOffset>
-|       <svg fePointLight>
-|       <svg feSpecularLighting>
-|       <svg feSpotLight>
-|       <svg feTile>
-|       <svg feTurbulence>
-|       <svg foreignObject>
-|       <svg glyphRef>
-|       <svg linearGradient>
-|       <svg radialGradient>
-|       <svg textPath>
-
-#data
-<!DOCTYPE html><BODY><SVG><ALTGLYPH /><ALTGLYPHDEF /><ALTGLYPHITEM /><ANIMATECOLOR /><ANIMATEMOTION /><ANIMATETRANSFORM /><CLIPPATH /><FEBLEND /><FECOLORMATRIX /><FECOMPONENTTRANSFER /><FECOMPOSITE /><FECONVOLVEMATRIX /><FEDIFFUSELIGHTING /><FEDISPLACEMENTMAP /><FEDISTANTLIGHT /><FEFLOOD /><FEFUNCA /><FEFUNCB /><FEFUNCG /><FEFUNCR /><FEGAUSSIANBLUR /><FEIMAGE /><FEMERGE /><FEMERGENODE /><FEMORPHOLOGY /><FEOFFSET /><FEPOINTLIGHT /><FESPECULARLIGHTING /><FESPOTLIGHT /><FETILE /><FETURBULENCE /><FOREIGNOBJECT /><GLYPHREF /><LINEARGRADIENT /><RADIALGRADIENT /><TEXTPATH /></SVG>
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       <svg altGlyph>
-|       <svg altGlyphDef>
-|       <svg altGlyphItem>
-|       <svg animateColor>
-|       <svg animateMotion>
-|       <svg animateTransform>
-|       <svg clipPath>
-|       <svg feBlend>
-|       <svg feColorMatrix>
-|       <svg feComponentTransfer>
-|       <svg feComposite>
-|       <svg feConvolveMatrix>
-|       <svg feDiffuseLighting>
-|       <svg feDisplacementMap>
-|       <svg feDistantLight>
-|       <svg feFlood>
-|       <svg feFuncA>
-|       <svg feFuncB>
-|       <svg feFuncG>
-|       <svg feFuncR>
-|       <svg feGaussianBlur>
-|       <svg feImage>
-|       <svg feMerge>
-|       <svg feMergeNode>
-|       <svg feMorphology>
-|       <svg feOffset>
-|       <svg fePointLight>
-|       <svg feSpecularLighting>
-|       <svg feSpotLight>
-|       <svg feTile>
-|       <svg feTurbulence>
-|       <svg foreignObject>
-|       <svg glyphRef>
-|       <svg linearGradient>
-|       <svg radialGradient>
-|       <svg textPath>
-
-#data
-<!DOCTYPE html><body><math><altGlyph /><altGlyphDef /><altGlyphItem /><animateColor /><animateMotion /><animateTransform /><clipPath /><feBlend /><feColorMatrix /><feComponentTransfer /><feComposite /><feConvolveMatrix /><feDiffuseLighting /><feDisplacementMap /><feDistantLight /><feFlood /><feFuncA /><feFuncB /><feFuncG /><feFuncR /><feGaussianBlur /><feImage /><feMerge /><feMergeNode /><feMorphology /><feOffset /><fePointLight /><feSpecularLighting /><feSpotLight /><feTile /><feTurbulence /><foreignObject /><glyphRef /><linearGradient /><radialGradient /><textPath /></math>
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <math math>
-|       <math altglyph>
-|       <math altglyphdef>
-|       <math altglyphitem>
-|       <math animatecolor>
-|       <math animatemotion>
-|       <math animatetransform>
-|       <math clippath>
-|       <math feblend>
-|       <math fecolormatrix>
-|       <math fecomponenttransfer>
-|       <math fecomposite>
-|       <math feconvolvematrix>
-|       <math fediffuselighting>
-|       <math fedisplacementmap>
-|       <math fedistantlight>
-|       <math feflood>
-|       <math fefunca>
-|       <math fefuncb>
-|       <math fefuncg>
-|       <math fefuncr>
-|       <math fegaussianblur>
-|       <math feimage>
-|       <math femerge>
-|       <math femergenode>
-|       <math femorphology>
-|       <math feoffset>
-|       <math fepointlight>
-|       <math fespecularlighting>
-|       <math fespotlight>
-|       <math fetile>
-|       <math feturbulence>
-|       <math foreignobject>
-|       <math glyphref>
-|       <math lineargradient>
-|       <math radialgradient>
-|       <math textpath>
-
-#data
-<!DOCTYPE html><body><svg><solidColor /></svg>
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       <svg solidcolor>
diff --git a/validator/htmlparser/testdata/tree-construction/tests18.dat b/validator/htmlparser/testdata/tree-construction/tests18.dat
deleted file mode 100644
index 05363b392d991..0000000000000
--- a/validator/htmlparser/testdata/tree-construction/tests18.dat
+++ /dev/null
@@ -1,534 +0,0 @@
-#data
-<plaintext></plaintext>
-#errors
-11: Start tag seen without seeing a doctype first. Expected “<!DOCTYPE html>”.
-23: End of file seen and there were open elements.
-11: Unclosed element “plaintext”.
-#document
-| <html>
-|   <head>
-|   <body>
-|     <plaintext>
-|       "</plaintext>"
-
-#data
-<!doctype html><plaintext></plaintext>
-#errors
-(1,38): expected-closing-tag-but-got-eof
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <plaintext>
-|       "</plaintext>"
-
-#data
-<!doctype html><html><plaintext></plaintext>
-#errors
-44: End of file seen and there were open elements.
-32: Unclosed element “plaintext”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <plaintext>
-|       "</plaintext>"
-
-#data
-<!doctype html><head><plaintext></plaintext>
-#errors
-44: End of file seen and there were open elements.
-32: Unclosed element “plaintext”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <plaintext>
-|       "</plaintext>"
-
-#data
-<!doctype html><html><noscript><plaintext></plaintext>
-#errors
-42: Bad start tag in “plaintext” in “head”.
-54: End of file seen and there were open elements.
-42: Unclosed element “plaintext”.
-#script-off
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|     <noscript>
-|   <body>
-|     <plaintext>
-|       "</plaintext>"
-
-#data
-<!doctype html></head><plaintext></plaintext>
-#errors
-45: End of file seen and there were open elements.
-33: Unclosed element “plaintext”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <plaintext>
-|       "</plaintext>"
-
-#data
-<!doctype html><body><plaintext></plaintext>
-#errors
-44: End of file seen and there were open elements.
-32: Unclosed element “plaintext”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <plaintext>
-|       "</plaintext>"
-
-#data
-<!doctype html><table><plaintext></plaintext>
-#errors
-(1,33): foster-parenting-start-tag
-(1,45): foster-parenting-character
-(1,45): eof-in-table
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <plaintext>
-|       "</plaintext>"
-|     <table>
-
-#data
-<!doctype html><table><tbody><plaintext></plaintext>
-#errors
-(1,40): foster-parenting-start-tag
-(1,41): foster-parenting-character
-(1,52): eof-in-table
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <plaintext>
-|       "</plaintext>"
-|     <table>
-|       <tbody>
-
-#data
-<!doctype html><table><tbody><tr><plaintext></plaintext>
-#errors
-(1,44): foster-parenting-start-tag
-(1,56): foster-parenting-character
-(1,56): eof-in-table
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <plaintext>
-|       "</plaintext>"
-|     <table>
-|       <tbody>
-|         <tr>
-
-#data
-<!doctype html><table><td><plaintext></plaintext>
-#errors
-(1,26): unexpected-cell-in-table-body
-(1,49): expected-closing-tag-but-got-eof
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <table>
-|       <tbody>
-|         <tr>
-|           <td>
-|             <plaintext>
-|               "</plaintext>"
-
-#data
-<!doctype html><table><caption><plaintext></plaintext>
-#errors
-(1,54): expected-closing-tag-but-got-eof
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <table>
-|       <caption>
-|         <plaintext>
-|           "</plaintext>"
-
-#data
-<!doctype html><table><colgroup><plaintext></plaintext>
-#errors
-43: Start tag “plaintext” seen in “table”.
-55: Misplaced non-space characters inside a table.
-55: End of file seen and there were open elements.
-43: Unclosed element “plaintext”.
-22: Unclosed element “table”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <plaintext>
-|       "</plaintext>"
-|     <table>
-|       <colgroup>
-
-#data
-<!doctype html><select><plaintext></plaintext>X
-#errors
-34: Stray start tag “plaintext”.
-46: Stray end tag “plaintext”.
-47: End of file seen and there were open elements.
-23: Unclosed element “select”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <select>
-|       "X"
-
-#data
-<!doctype html><table><select><plaintext>a<caption>b
-#errors
-30: Start tag “select” seen in “table”.
-41: Stray start tag “plaintext”.
-51: “caption” start tag with “select” open.
-52: End of file seen and there were open elements.
-51: Unclosed element “caption”.
-22: Unclosed element “table”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <select>
-|       "a"
-|     <table>
-|       <caption>
-|         "b"
-
-#data
-<!doctype html><template><plaintext>a</template>b
-#errors
-49: End of file seen and there were open elements.
-36: Unclosed element “plaintext”.
-25: Unclosed element “template”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|     <template>
-|       content
-|         <plaintext>
-|           "a</template>b"
-|   <body>
-
-#data
-<!doctype html><body></body><plaintext></plaintext>
-#errors
-39: Stray start tag “plaintext”.
-51: End of file seen and there were open elements.
-39: Unclosed element “plaintext”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <plaintext>
-|       "</plaintext>"
-
-#data
-<!doctype html><frameset><plaintext></plaintext>
-#errors
-36: Stray start tag “plaintext”.
-48: Stray end tag “plaintext”.
-48: End of file seen and there were open elements.
-25: Unclosed element “frameset”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <frameset>
-
-#data
-<!doctype html><frameset></frameset><plaintext></plaintext>
-#errors
-47: Stray start tag “plaintext”.
-59: Stray end tag “plaintext”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <frameset>
-
-#data
-<!doctype html><body></body></html><plaintext></plaintext>
-#errors
-46: Stray start tag “plaintext”.
-58: End of file seen and there were open elements.
-46: Unclosed element “plaintext”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <plaintext>
-|       "</plaintext>"
-
-#data
-<!doctype html><frameset></frameset></html><plaintext></plaintext>
-#errors
-54: Stray start tag “plaintext”.
-66: Stray end tag “plaintext”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <frameset>
-
-#data
-<!doctype html><svg><plaintext>a</plaintext>b
-#errors
-45: End of file seen and there were open elements.
-20: Unclosed element “svg”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       <svg plaintext>
-|         "a"
-|       "b"
-
-#data
-<!doctype html><svg><title><plaintext>a</plaintext>b
-#errors
-52: End of file seen and there were open elements.
-38: Unclosed element “plaintext”.
-27: Unclosed element “title”.
-20: Unclosed element “svg”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       <svg title>
-|         <plaintext>
-|           "a</plaintext>b"
-
-#data
-<!doctype html><table><tr><style></script></style>abc
-#errors
-(1,51): foster-parenting-character
-(1,52): foster-parenting-character
-(1,53): foster-parenting-character
-(1,53): eof-in-table
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     "abc"
-|     <table>
-|       <tbody>
-|         <tr>
-|           <style>
-|             "</script>"
-
-#data
-<!doctype html><table><tr><script></style></script>abc
-#errors
-(1,52): foster-parenting-character
-(1,53): foster-parenting-character
-(1,54): foster-parenting-character
-(1,54): eof-in-table
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     "abc"
-|     <table>
-|       <tbody>
-|         <tr>
-|           <script>
-|             "</style>"
-
-#data
-<!doctype html><table><caption><style></script></style>abc
-#errors
-(1,58): expected-closing-tag-but-got-eof
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <table>
-|       <caption>
-|         <style>
-|           "</script>"
-|         "abc"
-
-#data
-<!doctype html><table><td><style></script></style>abc
-#errors
-(1,26): unexpected-cell-in-table-body
-(1,53): expected-closing-tag-but-got-eof
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <table>
-|       <tbody>
-|         <tr>
-|           <td>
-|             <style>
-|               "</script>"
-|             "abc"
-
-#data
-<!doctype html><select><script></style></script>abc
-#errors
-(1,51): eof-in-select
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <select>
-|       <script>
-|         "</style>"
-|       "abc"
-
-#data
-<!doctype html><table><select><script></style></script>abc
-#errors
-(1,30): unexpected-start-tag-implies-table-voodoo
-(1,58): eof-in-select
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <select>
-|       <script>
-|         "</style>"
-|       "abc"
-|     <table>
-
-#data
-<!doctype html><table><tr><select><script></style></script>abc
-#errors
-(1,34): unexpected-start-tag-implies-table-voodoo
-(1,62): eof-in-select
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <select>
-|       <script>
-|         "</style>"
-|       "abc"
-|     <table>
-|       <tbody>
-|         <tr>
-
-#data
-<!doctype html><frameset></frameset><noframes>abc
-#errors
-(1,49): expected-named-closing-tag-but-got-eof
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <frameset>
-|   <noframes>
-|     "abc"
-
-#data
-<!doctype html><frameset></frameset><noframes>abc</noframes><!--abc-->
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <frameset>
-|   <noframes>
-|     "abc"
-|   <!-- abc -->
-
-#data
-<!doctype html><frameset></frameset></html><noframes>abc
-#errors
-(1,56): expected-named-closing-tag-but-got-eof
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <frameset>
-|   <noframes>
-|     "abc"
-
-#data
-<!doctype html><frameset></frameset></html><noframes>abc</noframes><!--abc-->
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <frameset>
-|   <noframes>
-|     "abc"
-| <!-- abc -->
-
-#data
-<!doctype html><table><tr></tbody><tfoot>
-#errors
-(1,41): eof-in-table
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <table>
-|       <tbody>
-|         <tr>
-|       <tfoot>
-
-#data
-<!doctype html><table><td><svg></svg>abc<td>
-#errors
-(1,26): unexpected-cell-in-table-body
-(1,44): expected-closing-tag-but-got-eof
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <table>
-|       <tbody>
-|         <tr>
-|           <td>
-|             <svg svg>
-|             "abc"
-|           <td>
diff --git a/validator/htmlparser/testdata/tree-construction/tests25.dat b/validator/htmlparser/testdata/tree-construction/tests25.dat
deleted file mode 100644
index c1e3183b412f5..0000000000000
--- a/validator/htmlparser/testdata/tree-construction/tests25.dat
+++ /dev/null
@@ -1,288 +0,0 @@
-#data
-<!DOCTYPE html><body><foo>A
-#errors
-(1,27): expected-closing-tag-but-got-eof
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <foo>
-|       "A"
-
-#data
-<!DOCTYPE html><body><area>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <area>
-|     "A"
-
-#data
-<!DOCTYPE html><body><base>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <base>
-|     "A"
-
-#data
-<!DOCTYPE html><body><basefont>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <basefont>
-|     "A"
-
-#data
-<!DOCTYPE html><body><bgsound>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <bgsound>
-|     "A"
-
-#data
-<!DOCTYPE html><body><br>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <br>
-|     "A"
-
-#data
-<!DOCTYPE html><body><col>A
-#errors
-(1,26): unexpected-start-tag-ignored
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     "A"
-
-#data
-<!DOCTYPE html><body><command>A
-#errors
-eof
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <command>
-|     "A"
-
-#data
-<!DOCTYPE html><body><embed>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <embed>
-|     "A"
-
-#data
-<!DOCTYPE html><body><frame>A
-#errors
-(1,28): unexpected-start-tag-ignored
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     "A"
-
-#data
-<!DOCTYPE html><body><hr>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <hr>
-|     "A"
-
-#data
-<!DOCTYPE html><body><img>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <img>
-|     "A"
-
-#data
-<!DOCTYPE html><body><input>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <input>
-|     "A"
-
-#data
-<!DOCTYPE html><body><keygen>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <keygen>
-|     "A"
-
-#data
-<!DOCTYPE html><keygen>A</keygen>B
-#errors
-33: Stray end tag “keygen”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <keygen>
-|     "AB"
-
-#data
-</keygen>A
-#errors
-9: End tag seen without seeing a doctype first. Expected “<!DOCTYPE html>”.
-9: Stray end tag “keygen”.
-#document
-| <html>
-|   <head>
-|   <body>
-|     "A"
-
-#data
-<!DOCTYPE html></keygen>A
-#errors
-24: Stray end tag “keygen”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     "A"
-
-#data
-<!DOCTYPE html><head></keygen>A
-#errors
-30: Stray end tag “keygen”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     "A"
-
-#data
-<!DOCTYPE html><head></head></keygen>A
-#errors
-30: Stray end tag “keygen”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     "A"
-
-#data
-<!DOCTYPE html><body></keygen>A
-#errors
-30: Stray end tag “keygen”.
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     "A"
-
-#data
-<!DOCTYPE html><body><link>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <link>
-|     "A"
-
-#data
-<!DOCTYPE html><body><meta>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <meta>
-|     "A"
-
-#data
-<!DOCTYPE html><body><param>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <param>
-|     "A"
-
-#data
-<!DOCTYPE html><body><source>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <source>
-|     "A"
-
-#data
-<!DOCTYPE html><body><track>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <track>
-|     "A"
-
-#data
-<!DOCTYPE html><body><wbr>A
-#errors
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <wbr>
-|     "A"
diff --git a/validator/htmlparser/testdata/tree-construction/webkit01.dat b/validator/htmlparser/testdata/tree-construction/webkit01.dat
deleted file mode 100644
index b5fafdc7e4af9..0000000000000
--- a/validator/htmlparser/testdata/tree-construction/webkit01.dat
+++ /dev/null
@@ -1,741 +0,0 @@
-#data
-Test
-#errors
-(1,4): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "Test"
-
-#data
-<div></div>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     <div>
-
-#data
-<div>Test</div>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     <div>
-|       "Test"
-
-#data
-<di
-#errors
-(1,3): eof-in-tag-name
-(1,3): expected-doctype-but-got-eof
-#new-errors
-(1:4) eof-in-tag
-#document
-| <html>
-|   <head>
-|   <body>
-
-#data
-<div>Hello</div>
-<script>
-console.log("PASS");
-</script>
-<div>Bye</div>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     <div>
-|       "Hello"
-|     "
-"
-|     <script>
-|       "
-console.log("PASS");
-"
-|     "
-"
-|     <div>
-|       "Bye"
-
-#data
-<div foo="bar">Hello</div>
-#errors
-(1,15): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     <div>
-|       foo="bar"
-|       "Hello"
-
-#data
-<div>Hello</div>
-<script>
-console.log("FOO<span>BAR</span>BAZ");
-</script>
-<div>Bye</div>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     <div>
-|       "Hello"
-|     "
-"
-|     <script>
-|       "
-console.log("FOO<span>BAR</span>BAZ");
-"
-|     "
-"
-|     <div>
-|       "Bye"
-
-#data
-<foo bar="baz"></foo><potato quack="duck"></potato>
-#errors
-(1,15): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     <foo>
-|       bar="baz"
-|     <potato>
-|       quack="duck"
-
-#data
-<foo bar="baz"><potato quack="duck"></potato></foo>
-#errors
-(1,15): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     <foo>
-|       bar="baz"
-|       <potato>
-|         quack="duck"
-
-#data
-<foo></foo bar="baz"><potato></potato quack="duck">
-#errors
-(1,5): expected-doctype-but-got-start-tag
-(1,21): attributes-in-end-tag
-(1,51): attributes-in-end-tag
-#new-errors
-(1:21) end-tag-with-attributes
-(1:51) end-tag-with-attributes
-#document
-| <html>
-|   <head>
-|   <body>
-|     <foo>
-|     <potato>
-
-#data
-</ tttt>
-#errors
-(1,2): expected-closing-tag-but-got-char
-(1,8): expected-doctype-but-got-eof
-#new-errors
-(1:3) invalid-first-character-of-tag-name
-#document
-| <!--  tttt -->
-| <html>
-|   <head>
-|   <body>
-
-#data
-<div FOO ><img><img></div>
-#errors
-(1,10): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     <div>
-|       foo=""
-|       <img>
-|       <img>
-
-#data
-<p>Test</p<p>Test2</p>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,13): unexpected-end-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     <p>
-|       "TestTest2"
-
-#data
-<rdar://problem/6869687>
-#errors
-(1,7): unexpected-character-after-solidus-in-tag
-(1,8): unexpected-character-after-solidus-in-tag
-(1,16): unexpected-character-after-solidus-in-tag
-(1,24): expected-doctype-but-got-start-tag
-(1,24): expected-closing-tag-but-got-eof
-#new-errors
-(1:8) unexpected-solidus-in-tag
-(1:9) unexpected-solidus-in-tag
-(1:17) unexpected-solidus-in-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     <rdar:>
-|       6869687=""
-|       problem=""
-
-#data
-<A>test< /A>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,8): expected-tag-name
-(1,12): expected-closing-tag-but-got-eof
-#new-errors
-(1:9) invalid-first-character-of-tag-name
-#document
-| <html>
-|   <head>
-|   <body>
-|     <a>
-|       "test< /A>"
-
-#data
-&lt;
-#errors
-(1,4): expected-doctype-but-got-chars
-#document
-| <html>
-|   <head>
-|   <body>
-|     "<"
-
-#data
-<body foo='bar'><body foo='baz' yo='mama'>
-#errors
-(1,16): expected-doctype-but-got-start-tag
-(1,42): unexpected-start-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     foo="bar"
-|     yo="mama"
-
-#data
-<body></br foo="bar"></body>
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,21): attributes-in-end-tag
-(1,21): unexpected-end-tag-treated-as
-#new-errors
-(1:21) end-tag-with-attributes
-#document
-| <html>
-|   <head>
-|   <body>
-|     <br>
-
-#data
-<bdy><br foo="bar"></body>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-(1,26): expected-one-end-tag-but-got-another
-#document
-| <html>
-|   <head>
-|   <body>
-|     <bdy>
-|       <br>
-|         foo="bar"
-
-#data
-<body></body></br foo="bar">
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,28): attributes-in-end-tag
-(1,28): unexpected-end-tag-after-body
-(1,28): unexpected-end-tag-treated-as
-#new-errors
-(1:28) end-tag-with-attributes
-#document
-| <html>
-|   <head>
-|   <body>
-|     <br>
-
-#data
-<bdy></body><br foo="bar">
-#errors
-(1,5): expected-doctype-but-got-start-tag
-(1,12): expected-one-end-tag-but-got-another
-(1,26): unexpected-start-tag-after-body
-(1,26): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <bdy>
-|       <br>
-|         foo="bar"
-
-#data
-<html><body></body></html><!-- Hi there -->
-#errors
-(1,6): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   <body>
-| <!--  Hi there  -->
-
-#data
-<html><body></body></html>x<!-- Hi there -->
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,27): expected-eof-but-got-char
-#document
-| <html>
-|   <head>
-|   <body>
-|     "x"
-|     <!--  Hi there  -->
-
-#data
-<html><body></body></html>x<!-- Hi there --></html><!-- Again -->
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,27): expected-eof-but-got-char
-#document
-| <html>
-|   <head>
-|   <body>
-|     "x"
-|     <!--  Hi there  -->
-| <!--  Again  -->
-
-#data
-<html><body></body></html>x<!-- Hi there --></body></html><!-- Again -->
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,27): expected-eof-but-got-char
-#document
-| <html>
-|   <head>
-|   <body>
-|     "x"
-|     <!--  Hi there  -->
-| <!--  Again  -->
-
-#data
-<html><body><ruby><div><rp>xx</rp></div></ruby></body></html>
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,27): XXX-undefined-error
-#document
-| <html>
-|   <head>
-|   <body>
-|     <ruby>
-|       <div>
-|         <rp>
-|           "xx"
-
-#data
-<html><body><ruby><div><rt>xx</rt></div></ruby></body></html>
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,27): XXX-undefined-error
-#document
-| <html>
-|   <head>
-|   <body>
-|     <ruby>
-|       <div>
-|         <rt>
-|           "xx"
-
-#data
-<html><frameset><!--1--><noframes>A</noframes><!--2--></frameset><!--3--><noframes>B</noframes><!--4--></html><!--5--><noframes>C</noframes><!--6-->
-#errors
-(1,6): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   <frameset>
-|     <!-- 1 -->
-|     <noframes>
-|       "A"
-|     <!-- 2 -->
-|   <!-- 3 -->
-|   <noframes>
-|     "B"
-|   <!-- 4 -->
-|   <noframes>
-|     "C"
-| <!-- 5 -->
-| <!-- 6 -->
-
-#data
-<select><option>A<select><option>B<select><option>C<select><option>D<select><option>E<select><option>F<select><option>G<select>
-#errors
-(1,8): expected-doctype-but-got-start-tag
-(1,25): unexpected-select-in-select
-(1,59): unexpected-select-in-select
-(1,93): unexpected-select-in-select
-(1,127): unexpected-select-in-select
-#document
-| <html>
-|   <head>
-|   <body>
-|     <select>
-|       <option>
-|         "A"
-|     <option>
-|       "B"
-|       <select>
-|         <option>
-|           "C"
-|     <option>
-|       "D"
-|       <select>
-|         <option>
-|           "E"
-|     <option>
-|       "F"
-|       <select>
-|         <option>
-|           "G"
-
-#data
-<dd><dd><dt><dt><dd><li><li>
-#errors
-(1,4): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     <dd>
-|     <dd>
-|     <dt>
-|     <dt>
-|     <dd>
-|       <li>
-|       <li>
-
-#data
-<div><b></div><div><nobr>a<nobr>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-(1,14): end-tag-too-early
-(1,32): unexpected-start-tag-implies-end-tag
-(1,32): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <div>
-|       <b>
-|     <div>
-|       <b>
-|         <nobr>
-|           "a"
-|         <nobr>
-
-#data
-<head></head>
-<body></body>
-#errors
-(1,6): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   "
-"
-|   <body>
-
-#data
-<head></head> <style></style>ddd
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,21): unexpected-start-tag-out-of-my-head
-#document
-| <html>
-|   <head>
-|     <style>
-|   " "
-|   <body>
-|     "ddd"
-
-#data
-<kbd><table></kbd><col><select><tr>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-(1,18): unexpected-end-tag-implies-table-voodoo
-(1,18): unexpected-end-tag
-(1,31): unexpected-start-tag-implies-table-voodoo
-(1,35): unexpected-table-element-start-tag-in-select-in-table
-(1,35): eof-in-table
-#document
-| <html>
-|   <head>
-|   <body>
-|     <kbd>
-|       <select>
-|       <table>
-|         <colgroup>
-|           <col>
-|         <tbody>
-|           <tr>
-
-#data
-<kbd><table></kbd><col><select><tr></table><div>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-(1,18): unexpected-end-tag-implies-table-voodoo
-(1,18): unexpected-end-tag
-(1,31): unexpected-start-tag-implies-table-voodoo
-(1,35): unexpected-table-element-start-tag-in-select-in-table
-(1,48): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <kbd>
-|       <select>
-|       <table>
-|         <colgroup>
-|           <col>
-|         <tbody>
-|           <tr>
-|       <div>
-
-#data
-<a><li><style></style><title></title></a>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,41): adoption-agency-1.3
-#document
-| <html>
-|   <head>
-|   <body>
-|     <a>
-|     <li>
-|       <a>
-|         <style>
-|         <title>
-
-#data
-<font></p><p><meta><title></title></font>
-#errors
-(1,6): expected-doctype-but-got-start-tag
-(1,10): unexpected-end-tag
-(1,41): adoption-agency-1.3
-#document
-| <html>
-|   <head>
-|   <body>
-|     <font>
-|       <p>
-|     <p>
-|       <font>
-|         <meta>
-|         <title>
-
-#data
-<a><center><title></title><a>
-#errors
-(1,3): expected-doctype-but-got-start-tag
-(1,29): unexpected-start-tag-implies-end-tag
-(1,29): adoption-agency-1.3
-(1,29): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <a>
-|     <center>
-|       <a>
-|         <title>
-|       <a>
-
-#data
-<svg><title><div>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-(1,17): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       <svg title>
-|         <div>
-
-#data
-<svg><title><rect><div>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-(1,23): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       <svg title>
-|         <rect>
-|           <div>
-
-#data
-<svg><title><svg><div>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-(1,22): unexpected-html-element-in-foreign-content
-(1,22): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       <svg title>
-|         <svg svg>
-|         <div>
-
-#data
-<img <="" FAIL>
-#errors
-(1,6): invalid-character-in-attribute-name
-(1,15): expected-doctype-but-got-start-tag
-#new-errors
-(1:6) unexpected-character-in-attribute-name
-#document
-| <html>
-|   <head>
-|   <body>
-|     <img>
-|       <=""
-|       fail=""
-
-#data
-<ul><li><div id='foo'/>A</li><li>B<div>C</div></li></ul>
-#errors
-(1,4): expected-doctype-but-got-start-tag
-(1,23): non-void-element-with-trailing-solidus
-(1,29): end-tag-too-early
-#new-errors
-(1:9-1:24) non-void-html-element-start-tag-with-trailing-solidus
-#document
-| <html>
-|   <head>
-|   <body>
-|     <ul>
-|       <li>
-|         <div>
-|           id="foo"
-|           "A"
-|       <li>
-|         "B"
-|         <div>
-|           "C"
-
-#data
-<svg><em><desc></em>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-(1,9): unexpected-html-element-in-foreign-content
-(1,20): adoption-agency-1.3
-#document
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|     <em>
-|       <desc>
-
-#data
-<table><tr><td><svg><desc><td></desc><circle>
-#errors
-#document
-| <html>
-|   <head>
-|   <body>
-|     <table>
-|       <tbody>
-|         <tr>
-|           <td>
-|             <svg svg>
-|               <svg desc>
-|           <td>
-|             <circle>
-
-#data
-<svg><tfoot></mi><td>
-#errors
-(1,5): expected-doctype-but-got-start-tag
-(1,17): unexpected-end-tag
-(1,17): unexpected-end-tag
-(1,21): expected-closing-tag-but-got-eof
-#document
-| <html>
-|   <head>
-|   <body>
-|     <svg svg>
-|       <svg tfoot>
-|         <svg td>
-
-#data
-<math><mrow><mrow><mn>1</mn></mrow><mi>a</mi></mrow></math>
-#errors
-(1,6): expected-doctype-but-got-start-tag
-#document
-| <html>
-|   <head>
-|   <body>
-|     <math math>
-|       <math mrow>
-|         <math mrow>
-|           <math mn>
-|             "1"
-|         <math mi>
-|           "a"
-
-#data
-<!doctype html><input type="hidden"><frameset>
-#errors
-(1,46): unexpected-start-tag
-(1,46): eof-in-frameset
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <frameset>
-
-#data
-<!doctype html><input type="button"><frameset>
-#errors
-(1,46): unexpected-start-tag
-#document
-| <!DOCTYPE html>
-| <html>
-|   <head>
-|   <body>
-|     <input>
-|       type="button"
diff --git a/validator/htmlparser/url.cc b/validator/htmlparser/url.cc
deleted file mode 100644
index ec8fed85b6023..0000000000000
--- a/validator/htmlparser/url.cc
+++ /dev/null
@@ -1,36 +0,0 @@
-//
-// Copyright 2020 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.
-
-#include "url.h"
-
-namespace htmlparser {
-
-std::string_view URL::ProtocolStrict(std::string_view url) {
-  for (int i = 0; i < url.size(); ++i) {
-    char c = url[i];
-    if (c == ':') {  // Protocol terminator.
-      return url.substr(0, i);
-    } else if (('a' <= c && c <= 'z') || ('A' <= c && c <= 'Z') ||
-               (i > 0 && (('0' <= c && c <= '9') ||
-                          c == '+' ||c == '-' || c == '.'))) {
-      // Valid character, don't need to do anything.
-    } else {
-      return "";  // Invalid character for protocol, so give up.
-    }
-  }
-  return "";  // No protocol found.
-}
-
-}  // namespace htmlparser
diff --git a/validator/htmlparser/url.h b/validator/htmlparser/url.h
deleted file mode 100644
index 3694b993fb411..0000000000000
--- a/validator/htmlparser/url.h
+++ /dev/null
@@ -1,36 +0,0 @@
-//
-// Copyright 2020 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.
-//
-// Uniform resouce locator parsing related static functions.
-
-#ifndef HTMLPARSER__URL_H_
-#define HTMLPARSER__URL_H_
-
-#include <string_view>
-
-namespace htmlparser {
-
-class URL {
- public:
-  // returns: the protocol (scheme) of the URL, if one could be found, according
-  // to a strict interpretation of RFC 3986, Section 3.1. Otherwise returns the
-  // empty string. No normalization (e.g. lower casing) is performed, and
-  // no part of the URL is validated except the protocol. */
-  static std::string_view ProtocolStrict(std::string_view url);
-};
-
-}  // namespace htmlparser
-
-#endif  // HTMLPARSER__URL_H_
diff --git a/validator/htmlparser/url_test.cc b/validator/htmlparser/url_test.cc
deleted file mode 100644
index 882fbe78282f1..0000000000000
--- a/validator/htmlparser/url_test.cc
+++ /dev/null
@@ -1,32 +0,0 @@
-//
-// Copyright 2020 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.
-//
-
-#include "url.h"
-#include "gtest/gtest.h"
-
-TEST(URLTest, ProtocolStrictTest) {
-  std::string url("http://www.google.com");
-  EXPECT_EQ(htmlparser::URL::ProtocolStrict(url), "http");
-
-  url = "ftp://server1.google.com";
-  EXPECT_EQ(htmlparser::URL::ProtocolStrict(url), "ftp");
-
-  url = "/hello.html";
-  EXPECT_TRUE(htmlparser::URL::ProtocolStrict(url).empty());
-
-  url = "://google.com";
-  EXPECT_TRUE(htmlparser::URL::ProtocolStrict(url).empty());
-}
diff --git a/validator/java/.bazelrc b/validator/java/.bazelrc
deleted file mode 100644
index 95746e408a645..0000000000000
--- a/validator/java/.bazelrc
+++ /dev/null
@@ -1 +0,0 @@
-common --show_result 0 --noshow_progress --experimental_ui_limit_console_output 1
diff --git a/validator/java/.gitignore b/validator/java/.gitignore
deleted file mode 100644
index 3639c2cb02638..0000000000000
--- a/validator/java/.gitignore
+++ /dev/null
@@ -1,5 +0,0 @@
-# These directories get generated by Maven.
-target/
-src/main/resources/
-src/main/java/dev/amp/validator/ValidatorProtos.java
-bazel-*
diff --git a/validator/java/BUILD b/validator/java/BUILD
deleted file mode 100644
index 8afc12c0659e7..0000000000000
--- a/validator/java/BUILD
+++ /dev/null
@@ -1,79 +0,0 @@
-sh_binary(
-    name = "copyValidatorJavaSource",
-    srcs = ["src/main/bin/copyValidatorJavaSource.sh"],
-    deps = [
-        "@bazel_tools//tools/bash/runfiles"
-    ],
-)
-
-sh_binary(
-    name = "fetchAMPResources",
-    srcs = ["src/main/bin/fetchAMPResources.sh"],
-    deps = [
-        "@bazel_tools//tools/bash/runfiles"
-    ],
-)
-
-load("@rules_java//java:defs.bzl", "java_proto_library")
-load("@rules_proto//proto:defs.bzl", "proto_library")
-
-java_proto_library(
-    name = "amphtml_validator_java_proto_lib",
-    visibility = ["//visibility:public"],
-    deps = [":amphtml_validator_proto_lib"],
-)
-
-proto_library(
-    name = "amphtml_validator_proto_lib",
-    srcs = ["src/main/proto/validator.proto"],
-)
-
-java_library(
-    name = "amphtml_validator_lib",
-    srcs = glob(["src/main/java/**/*.java"]),
-    resources = glob(["src/main/resources/**"]),
-    deps = [
-       "@maven//:org_w3c_css_sac",
-       "@maven//:com_google_code_findbugs_jsr305",
-       "@maven//:com_fasterxml_jackson_core_jackson_annotations",
-       "@maven//:com_fasterxml_jackson_jaxrs_jackson_jaxrs_base",
-       "@maven//:com_fasterxml_jackson_jaxrs_jackson_jaxrs_json_provider",
-       "@maven//:com_fasterxml_jackson_core_jackson_databind",
-       "@maven//:com_fasterxml_jackson_core_jackson_core",
-       "@maven//:net_sourceforge_cssparser_cssparser",
-       "@maven//:org_testng_testng",
-       "@maven//:ch_qos_logback_logback_classic",
-       "@maven//:org_slf4j_slf4j_api",
-       "@maven//:com_google_protobuf_protobuf_java",
-       "@maven//:com_yahoo_tagchowder_tagchowder_core",
-       "@maven//:org_apache_commons_commons_lang3",
-       "@maven//:org_apache_commons_commons_text"
-    ],
-)
-
-java_library(
-    name = "amphtml_validator_test_lib",
-    srcs = glob(["src/test/java/**/*.java"]),
-    resources = glob(["src/test/resources/**", "src/main/resources/**"]),
-    deps = [
-        ":amphtml_validator_java_proto_lib",
-        ":amphtml_validator_lib",
-        "@maven//:net_sourceforge_cssparser_cssparser",
-        "@maven//:com_google_code_findbugs_jsr305",
-        "@maven//:org_testng_testng",
-        "@maven//:junit_junit",
-        "@maven//:org_mockito_mockito_all",
-        "@maven//:com_google_guava_guava",
-    ],
-)
-
-java_test(
-    name = "amphtml_validator_test",
-    size = "small",
-    runtime_deps = [
-        ":amphtml_validator_test_lib",
-    ],
-    use_testrunner=False,
-    main_class='org.testng.TestNG',
-    args=['-testjar','libamphtml_validator_test_lib.jar','-verbose','1'],
-)
diff --git a/validator/java/Changelog.md b/validator/java/Changelog.md
deleted file mode 100644
index eba6fe8722e12..0000000000000
--- a/validator/java/Changelog.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Changelog
-
-## AMP HTML Validator 1.0.0 released
-
-AMP HTML Validator 1.0.0 is an initial release. The goal of this project is to keep updating the code with small fixes and features. This project requires unit tests and code coverage by default, and uses github and a automated pipe-line to publish new versions in a automated fashion for every commit that is merged, without humans need for each release.
diff --git a/validator/java/Contribute.md b/validator/java/Contribute.md
deleted file mode 100644
index 2da3d4abc1a81..0000000000000
--- a/validator/java/Contribute.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# How to contribute
-
-First, thanks for taking the time to contribute to our project! The following information provides a guide for making contributions.
-
-## Code of Conduct
-
-By participating in this project, you agree to abide by the [AMP code of conduct](https://github.com/ampproject/meta/blob/master/CODE_OF_CONDUCT.md). Everyone is welcome to submit a pull request or open an issue to improve the documentation, add improvements, or report bugs.
-
-## How to Ask a Question
-
-If you simply have a question that needs an answer, [create an issue](https://help.github.com/articles/creating-an-issue/), and label it as a question.
-
-## How To Contribute
-
-### Report a Bug or Request a Feature
-
-If you encounter any bugs while using this software, or want to request a new feature or enhancement, feel free to [create an issue](https://help.github.com/articles/creating-an-issue/) to report it, make sure you add a label to indicate what type of issue it is.
-
-### Contribute Code
-
-Pull requests are welcome for bug fixes. If you want to implement something new, please [request a feature first](#report-a-bug-or-request-a-feature) so we can discuss it.
-
-#### Creating a Pull Request
-
-Before you submit any code, we need you to agree to our [Contributor License Agreement](https://yahoocla.herokuapp.com/); this ensures we can continue to protect your contributions under an open source license well into the future.
-
-Please follow [best practices](https://github.com/trein/dev-best-practices/wiki/Git-Commit-Best-Practices) for creating git commits.
-
-When your code is ready to be submitted, you can [submit a pull request](https://help.github.com/articles/creating-a-pull-request/) to begin the code review process.
diff --git a/validator/java/LICENSE b/validator/java/LICENSE
deleted file mode 100644
index f49a4e16e68b1..0000000000000
--- a/validator/java/LICENSE
+++ /dev/null
@@ -1,201 +0,0 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   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.
\ No newline at end of file
diff --git a/validator/java/NOTICE b/validator/java/NOTICE
deleted file mode 100644
index 753dbb0de8bd1..0000000000000
--- a/validator/java/NOTICE
+++ /dev/null
@@ -1,4 +0,0 @@
-AMP HTML Validator
-Copyright 2016 by Google's AMP group (https://github.com/ampproject/amphtml).
-
-This product includes software developed Google's AMP dev (https://github.com/ampproject/amphtml/blob/master/OWNERS.yaml), and portions of this software were developed at Verizon Media Inc.
\ No newline at end of file
diff --git a/validator/java/OWNERS b/validator/java/OWNERS
deleted file mode 100644
index eb3fda907c075..0000000000000
--- a/validator/java/OWNERS
+++ /dev/null
@@ -1,10 +0,0 @@
-// For an explanation of the OWNERS rules and syntax, see:
-// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
-
-{
-  rules: [
-    {
-      owners: [{name: 'nhant01'}, {name: 'GeorgeLuo'}],
-    },
-  ],
-}
diff --git a/validator/java/README.md b/validator/java/README.md
deleted file mode 100644
index 344760c63b2f4..0000000000000
--- a/validator/java/README.md
+++ /dev/null
@@ -1,87 +0,0 @@
-# AMP HTML ⚡ Validator
-
-AMP HTML Validator takes input of HTML text and parses the text tag by tag, running the ruleset against every tag. Resultant from this process is validity of the input text and the errors generated while parsing.
-
-## Table of Contents
-
-- [Background](#Background)
-- [Install](#Install)
-- [Usage](#Usage)
-- [Issues](#Issues)
-- [Contribute](#Contribute)
-- [License](#License)
-- [Attribution](#Attribution)
-
-## Background
-
-@nhant01 and @GeorgeLuo own development and maintenance responsibility of the project. As such they will serve as the points of contact surrounding changes and modifications. The team will allocate resources to align the business with the implementations provided under the amphtml repo. With that in mind, should supporting this project become infeasible, we will publish a version of the codebase marked for deprecation and prepare for its removal from public repositories (every effort will be made to not have this happen).
-
-### Install
-
-#### Maven
-
-AMP HTML Validator uses maven as tool for building and managing project. Add following snippet to your pom.xml and hit "mvn" to build your project.
-
-```
-<dependency>
-  <groupId>amp.validator</groupId>
-  <artifactId>amphtml-validator</artifactId>
-  <version>1.0</version>
-</dependency>
-```
-
-Here are the instructions to setup maven environment.
-https://maven.apache.org/what-is-maven.html
-https://maven.apache.org/guides/introduction/introduction-to-the-pom.html
-
-#### Bazel
-
-The Bazel BUILD file provides the instructions to construct a useable jar. There are two jars necessary to use the amp-validator, found in the bazel-bin, the bazel-bin/libamphtml_validator_lib.jar (validator business logic) and the bazel-bin/libamphtml_validator_proto_lib-speed.jar (the compiled proto objects). Run,
-
-```
-bazel clean
-bazel run //:fetchAMPResources
-bazel build //:amphtml_validator_java_proto_lib
-bazel run //:copyValidatorJavaSource
-bazel build //:amphtml_validator_lib
-```
-
-To run the suite of tests against this repo, run,
-
-```
-bazel run //:amphtml_validator_test
-```
-
-## Usage
-
-Initialize the validator using
-
-```
-final AMPHtmlParser ampHtmlParser = new AMPHtmlParser();
-final ValidationResult validationResult = ampHtmlParser.parse(inputHtml, htmlFormat, condition, maxNodes);
-```
-
-The parser can be used beyond the first document, to truncate initialization time. The maxNode condition is the maximum number of tags reviewed by the validator before forcing exit on exception. The condition is an enumeration of type ExitCondition, either exit on first error or a full parsing attempt. The htmlFormat is an enumeration for the format of AMP to be validated against.
-
-## Issues
-
-The are several known bugs in the validation output.
-
-- the DOCTYPE tag is assumed to exist. Documents without the tag will fail to return an error.
-- Observance of afterbody mode is not implemented. Tags that appear following a body closing tag should be interpreted as within the body tag. Specs that mandate relationships between tags and ancestors related to the body tag will not account for this behavior and will return unexpected errors.
-- Attributes are de-duped by the internal html parser (the last value assigned to an attribute is the one returned to the handler). This leads to discrepancies in attribute validation to do with validation of the uniqueness of attributes and unexpected behavior in value validation.
-- Attributes are sanitized for disallowed characters. This affects operators with contextual meaning such as '{' or '['. This will affect amp-mustache tag validation.
-- Validation of URLs found within the HTML document may not return the same errors as the Node.js implementation. This stems from the fact that the internal URL library is lenient in terms of validating hostnames and characters used within the URL.
-- The parser obfuscates Unicode values, this is grievous as the amp symbol is never discovered (⚡), this package only handles the literal "amp4email."
-  Importantly, this validator prioritizes amp4email html content, enforcement of validator logic for other formats is not guaranteed.
-- CSS validation does not yet configure for a max nodes value
-
-## Contribute
-
-Please refer to the [Contribute.md](Contribute.md) file for information about how to get involved. We welcome issues, questions, and pull requests. Pull Requests are welcome.
-
-## License
-
-This project is licensed under the terms of the [Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0.txt) open source license. Please refer to [LICENSE](LICENSE) for the full terms.
-
-## Attribution
diff --git a/validator/java/WORKSPACE b/validator/java/WORKSPACE
deleted file mode 100644
index 456816dc9ef55..0000000000000
--- a/validator/java/WORKSPACE
+++ /dev/null
@@ -1,82 +0,0 @@
-load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
-
-# rules_java defines rules for generating Java code from Protocol Buffers.
-http_archive(
-    name = "rules_java",
-    sha256 = "ccf00372878d141f7d5568cedc4c42ad4811ba367ea3e26bc7c43445bbc52895",
-    strip_prefix = "rules_java-d7bf804c8731edd232cb061cb2a9fe003a85d8ee",
-    urls = [
-        "https://mirror.bazel.build/github.com/bazelbuild/rules_java/archive/d7bf804c8731edd232cb061cb2a9fe003a85d8ee.tar.gz",
-        "https://github.com/bazelbuild/rules_java/archive/d7bf804c8731edd232cb061cb2a9fe003a85d8ee.tar.gz",
-    ],
-)
-
-# rules_proto defines abstract rules for building Protocol Buffers.
-http_archive(
-    name = "rules_proto",
-    sha256 = "57001a3b33ec690a175cdf0698243431ef27233017b9bed23f96d44b9c98242f",
-    strip_prefix = "rules_proto-9cd4f8f1ede19d81c6d48910429fe96776e567b1",
-    urls = [
-        "https://mirror.bazel.build/github.com/bazelbuild/rules_proto/archive/9cd4f8f1ede19d81c6d48910429fe96776e567b1.tar.gz",
-        "https://github.com/bazelbuild/rules_proto/archive/9cd4f8f1ede19d81c6d48910429fe96776e567b1.tar.gz",
-    ],
-)
-
-# java_lite_proto_library rules implicitly depend on @com_google_protobuf_javalite//:javalite_toolchain,
-# which is the JavaLite proto runtime (base classes and common utilities).
-http_archive(
-    name = "com_google_protobuf_javalite",
-    sha256 = "311b29b8d0803ab4f89be22ff365266abb6c48fd3483d59b04772a144d7a24a1",
-    strip_prefix = "protobuf-7b64714af67aa967dcf941df61fe5207975966be",
-    urls = [
-        "https://github.com/google/protobuf/archive/7b64714af67aa967dcf941df61fe5207975966be.zip",
-    ],
-)
-
-load("@rules_java//java:repositories.bzl", "rules_java_dependencies", "rules_java_toolchains")
-rules_java_dependencies()
-rules_java_toolchains()
-
-load("@rules_proto//proto:repositories.bzl", "rules_proto_dependencies", "rules_proto_toolchains")
-rules_proto_dependencies()
-rules_proto_toolchains()
-
-load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
-
-RULES_JVM_EXTERNAL_TAG = "2.8"
-RULES_JVM_EXTERNAL_SHA = "79c9850690d7614ecdb72d68394f994fef7534b292c4867ce5e7dec0aa7bdfad"
-
-http_archive(
-    name = "rules_jvm_external",
-    strip_prefix = "rules_jvm_external-%s" % RULES_JVM_EXTERNAL_TAG,
-    sha256 = RULES_JVM_EXTERNAL_SHA,
-    url = "https://github.com/bazelbuild/rules_jvm_external/archive/%s.zip" % RULES_JVM_EXTERNAL_TAG,
-)
-
-load("@rules_jvm_external//:defs.bzl", "maven_install")
-
-maven_install(
-    artifacts = [
-	"com.google.code.findbugs:jsr305:3.0.2",
-	"com.fasterxml.jackson.core:jackson-annotations:2.11.0",
-	"com.fasterxml.jackson.jaxrs:jackson-jaxrs-base:2.11.0",
-	"com.fasterxml.jackson.jaxrs:jackson-jaxrs-json-provider:2.11.0",
-	"com.fasterxml.jackson.core:jackson-databind:2.11.0",
-	"com.fasterxml.jackson.core:jackson-core:2.11.0",
-	"net.sourceforge.cssparser:cssparser:0.9.27",
-	"org.w3c.css:sac:1.3",
-	"org.testng:testng:6.8",
-	"ch.qos.logback:logback-classic:1.2.3",
-	"org.slf4j:slf4j-api:1.7.25",
-	"com.google.protobuf:protobuf-java:3.8.0",
-	"com.yahoo.tagchowder:tagchowder.core:2.0.17",
-	"org.apache.commons:commons-lang3:3.9",
-	"org.apache.commons:commons-text:1.8",
-	"org.mockito:mockito-all:1.10.19",
-	"com.google.guava:guava:26.0-jre"
-    ],
-    repositories = [
-	"https://repo1.maven.org/maven2/",
-	"https://jcenter.bintray.com/",
-    ],
-)
diff --git a/validator/java/ampvalidator_checkstyle.xml b/validator/java/ampvalidator_checkstyle.xml
deleted file mode 100644
index 897fb00071e2a..0000000000000
--- a/validator/java/ampvalidator_checkstyle.xml
+++ /dev/null
@@ -1,211 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE module PUBLIC "-//Puppy Crawl//DTD Check Configuration 1.3//EN"
-        "http://www.puppycrawl.com/dtds/configuration_1_3.dtd">
-
-<!-- Checkstyle-Configuration: ampvalidator checks Description: none -->
-<module name="Checker">
-    <property name="severity" value="warning"/>
-    <module name="TreeWalker">
-        <property name="tabWidth" value="4"/>
-        <!-- Make the @SuppressWarnings annotations available to Checkstyle -->
-        <module name="SuppressWarningsHolder" />
-        <module name="JavadocMethod">
-            <property name="scope" value="public"/>
-        </module>
-        <module name="JavadocType">
-            <property name="scope" value="public"/>
-        </module>
-        <module name="JavadocVariable">
-            <property name="scope" value="public"/>
-        </module>
-        <module name="JavadocStyle">
-            <property name="checkFirstSentence" value="false"/>
-        </module>
-        <module name="ConstantName"/>
-        <module name="LocalFinalVariableName"/>
-        <module name="LocalVariableName"/>
-        <module name="MemberName"/>
-        <module name="MethodName"/>
-        <module name="PackageName"/>
-        <module name="ParameterName"/>
-        <module name="StaticVariableName"/>
-        <module name="TypeName"/>
-        <module name="AvoidStarImport"/>
-        <module name="IllegalImport">
-            <property name="severity" value="error"/>
-            <property name="illegalPkgs"
-                      value="edu.emory.mathcs.backport.java.util, org.ocpsoft.prettytime.shade.edu.emory.mathcs.backport.java.util, org.apache.log4j, yjava.messaging.ynet, yjava.security.ysecure, yjava.security.yck, yjava.security.yhdrs, , yjava.messaging.ynet"/>
-            <message key="import.illegal" value="Import from illegal package - {0}."/>
-        </module>
-        <module name="ImportControl">
-            <property name="file" value="${config_loc}/ampvalidator_checkstyle_import_control.xml"/>
-        </module>
-        <module name="RedundantImport"/>
-        <module name="UnusedImports"/>
-        <module name="ParameterNumber"/>
-        <module name="EmptyForIteratorPad"/>
-        <module name="MethodParamPad"/>
-        <module name="NoWhitespaceAfter">
-            <property name="tokens"
-                      value="BNOT,DEC,DOT,INC,LNOT,UNARY_MINUS,UNARY_PLUS"/>
-        </module>
-        <module name="NoWhitespaceBefore"/>
-        <module name="OperatorWrap"/>
-        <module name="ParenPad"/>
-        <module name="TypecastParenPad"/>
-        <module name="WhitespaceAfter"/>
-        <module name="WhitespaceAround"/>
-        <module name="ModifierOrder"/>
-        <module name="RedundantModifier"/>
-        <module name="AvoidNestedBlocks">
-            <property name="severity" value="ignore"/>
-        </module>
-        <module name="EmptyBlock">
-            <property name="option" value="text"/>
-        </module>
-        <module name="LeftCurly"/>
-        <module name="NeedBraces"/>
-        <module name="RightCurly"/>
-        <module name="EmptyStatement"/>
-        <module name="EqualsHashCode"/>
-        <module name="IllegalInstantiation"/>
-        <module name="InnerAssignment">
-            <property name="severity" value="ignore"/>
-        </module>
-        <module name="MagicNumber"/>
-        <module name="MissingSwitchDefault"/>
-        <!-- <module name="RedundantThrows"> <property name="suppressLoadErrors"
-            value="true"/> </module> -->
-        <module name="SimplifyBooleanExpression"/>
-        <module name="SimplifyBooleanReturn"/>
-        <module name="FinalClass"/>
-        <module name="HideUtilityClassConstructor"/>
-        <module name="InterfaceIsType"/>
-        <module name="VisibilityModifier">
-            <property name="protectedAllowed" value="true"/>
-        </module>
-        <module name="ArrayTypeStyle"/>
-        <module name="FinalParameters"/>
-        <module name="IllegalCatch">
-            <property name="illegalClassNames"
-                      value="java.lang.Exception, java.lang.Throwable, java.lang.RuntimeException, java.lang.IllegalArgumentException, java.lang.IllegalStateException, java.lang.UnsupportedOperationException, java.lang.NumberFormatException,
-                 java.lang.NullPointerException, java.lang.StringIndexOutOfBoundsException, java.lang.ArrayIndexOutOfBoundsException, java.util.NoSuchElementException, java.util.MissingResourceException,
-                 javax.ws.rs.NotSupportedException, javax.ws.rs.BadRequestException, javax.ws.rs.ProcessingException, javax.ws.rs.core.UriBuilderException"/>
-        </module>
-        <module name="IllegalThrows">
-            <property name="illegalClassNames"
-                      value="java.lang.Exception, java.lang.Throwable, java.lang.RuntimeException, java.lang.IllegalArgumentException, java.lang.IllegalStateException, java.lang.UnsupportedOperationException, java.lang.NumberFormatException,
-                 java.lang.NullPointerException, java.lang.StringIndexOutOfBoundsException, java.lang.ArrayIndexOutOfBoundsException, java.util.NoSuchElementException, java.util.MissingResourceException,
-                 javax.ws.rs.NotSupportedException, javax.ws.rs.BadRequestException, javax.ws.rs.ProcessingException, javax.ws.rs.core.UriBuilderException"/>
-        </module>
-        <module name="IllegalInstantiation">
-            <property name="classes" value="java.net.URLEncoder"/>
-            <property name="classes" value="java.net.URLDecoder"/>
-            <property name="classes" value="javax.mail.internet.InternetAddress"/>
-        </module>
-        <module name="TodoComment">
-            <property name="severity" value="ignore"/>
-            <metadata name="net.sf.eclipsecs.core.lastEnabledSeverity"
-                      value="inherit"/>
-        </module>
-        <module name="UpperEll"/>
-        <module name="RegexpSinglelineJava">
-            <property name="format" value="System\.(out|err|in|exit)"/>
-            <property name="message"
-                      value="Prohibited System.out/err/in/exit reference(s)."/>
-        </module>
-        <module name="RegexpSinglelineJava">
-            <property name="format" value="\.getBytes\(\)"/>
-            <property name="message" value="Possible usage of String.getBytes() without Charset specification."/>
-        </module>
-        <module name="RegexpSinglelineJava">
-            <property name="format" value="Charset\.getDefaultCharset\(\)"/>
-            <property name="message" value="Usage of Charset.getDefaultCharset() is prohibited."/>
-        </module>
-        <module name="RegexpSinglelineJava">
-            <property name="format" value="\.getBytes\(&quot;(.*)&quot;\)"/>
-            <property name="message" value="Possible usage of String.getBytes() with String to specific Charset."/>
-        </module>
-        <module name="RegexpSinglelineJava">
-            <property name="format" value="@Test.*dependsOn(Groups|Methods).*"/>
-            <property name="message"
-                      value="Prohibited TestNG dependsOn due to issues with parallelization.  Make all tests run independently."/>
-        </module>
-        <module name="RegexpSinglelineJava">
-            <property name="format" value="\.submit\([a-zA-Z]*[Ww]orker, null\)"/>
-            <property name="message"
-                      value="Prohibited use of submit with null passed as handler. Please use WorkerExceptionStatsHandler."/>
-        </module>
-    </module>
-    <!--
-    A multiline regex matcher for the illegal ConfigGets (of type ValueType.StringList). It can detect the invalid default values like:
-    "[Personal]"
-    "[ Personal ]"
-    "[    Personal    ]"
-    "[Personal, Unknown]"
-    "[ Personal, Unknown ]"
-    "[\"Unknown]"
-
-    It will not detect the valid default values like:
-    "[ ]"
-    "[]"
-    "[\"Personal\", \"Unknown\", \"ghjgjggjhgjgjghjgjhg \"]"
-    "[ \"Personal\", \"Unknown\" ]"
-    "[ \"Personal\", \"Unknown\"]"
-    "[   \"Personal\", \"Unknown\"]"
-    "[\"Personal\", \"Unknown\"]"
-    "[\"Personal\", \"Unknown\" ]"
-    "[\"Personal\", \"Unknown\"   ]"
-    "[    \"Personal\", \"Unknown\"    ]"
-    "[\"Unknown\"]"
-    ""
-    "Personal"
-    "Personal, Unknown"
-
-    Refer https://regex101.com/r/iX3QQT/6/tests for the regex and the corresponding tests.
-     -->
-    <module name="RegexpMultiline">
-        <property name="format"
-                  value="type = ValueType\.StringList,\s*defaultValue = \&quot;\[ *[^\\ ][^&quot;]\S+( |\S)+[^\\][^&quot; ] *\]\&quot;\)$"/>
-        <property name="message" value="Default value for StringList should be a string representation of an array of strings."/>
-    </module>
-    <module name="JavadocPackage">
-        <property name="allowLegacy" value="true"/>
-    </module>
-    <module name="NewlineAtEndOfFile">
-        <property name="severity" value="ignore"/>
-        <metadata name="net.sf.eclipsecs.core.lastEnabledSeverity"
-                  value="inherit"/>
-    </module>
-    <module name="Translation"/>
-    <module name="FileLength"/>
-    <module name="FileTabCharacter">
-        <property name="severity" value="ignore"/>
-        <metadata name="net.sf.eclipsecs.core.lastEnabledSeverity"
-                  value="inherit"/>
-    </module>
-    <module name="RegexpSingleline">
-        <property name="severity" value="ignore"/>
-        <property name="format" value="\s+$"/>
-        <property name="message" value="Line has trailing spaces."/>
-        <metadata name="net.sf.eclipsecs.core.lastEnabledSeverity"
-                  value="inherit"/>
-    </module>
-    <module name="SuppressWarningsFilter"/>
-    <!-- Eclipse-Only Suppression Filter Configuration / Fails for Maven
-        Commandline Maven command-line build uses pom.xml suppressionLocation setting
-        in the checkstyle configuration. Eclipse checkstyle does not recognize the
-        pom.xml setting, only the checkstyle.xml SuppressionFilter module here. But
-        Maven command-line does not compile with the following because no variable
-        is defined to locate the supporessions.xml in a way that works consistently
-        regardless of where invoked (from root of project or cd into individual projects.
-        You can set pom.xml PropertiesLocation tag with a .properties file containing
-        key=value pairs for such variables, but they are not relative to the checkstyle.xml
-        location. DISABLED: Enable only if you want to see the same exclusions from
-        eclipse, but will not build from command-line. <module name="SuppressionFilter">
-        <property name="file" value="${samedir}/ampvalidator_checkstyle_suppressions.xml"/>
-        </module> -->
-    <module name="SuppressionFilter">
-        <property name="file"
-                  value="${config_loc}/ampvalidator_checkstyle_suppressions.xml"/>
-    </module>
-</module>
diff --git a/validator/java/ampvalidator_checkstyle_edit.xml b/validator/java/ampvalidator_checkstyle_edit.xml
deleted file mode 100644
index 68e630be7e81d..0000000000000
--- a/validator/java/ampvalidator_checkstyle_edit.xml
+++ /dev/null
@@ -1,174 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE module PUBLIC "-//Puppy Crawl//DTD Check Configuration 1.3//EN" "http://www.puppycrawl.com/dtds/configuration_1_3.dtd">
-
-<!--
-    This configuration file was written by the eclipse-cs plugin configuration editor
--->
-<!--
-    Checkstyle-Configuration: ampvalidator_checkstyle_edit
-    Description:
-Jedi Check Style rules
--->
-<module name="Checker">
-    <property name="severity" value="warning"/>
-    <module name="TreeWalker">
-        <property name="tabWidth" value="4"/>
-        <module name="JavadocMethod">
-            <property name="allowUndeclaredRTE" value="true"/>
-            <property name="suppressLoadErrors" value="true"/>
-        </module>
-        <module name="JavadocType"/>
-        <module name="JavadocVariable"/>
-        <module name="JavadocStyle"/>
-        <module name="ConstantName"/>
-        <module name="LocalFinalVariableName"/>
-        <module name="LocalVariableName"/>
-        <module name="MemberName"/>
-        <module name="MethodName"/>
-        <module name="PackageName"/>
-        <module name="ParameterName"/>
-        <module name="StaticVariableName"/>
-        <module name="TypeName"/>
-        <module name="AvoidStarImport"/>
-        <module name="IllegalImport">
-            <property name="severity" value="error"/>
-            <property name="illegalPkgs"
-                      value="edu.emory.mathcs.backport.java.util, org.ocpsoft.prettytime.shade.edu.emory.mathcs.backport.java.util, org.apache.log4j"/>
-            <message key="import.illegal" value="Import from illegal package - {0}."/>
-        </module>
-        <module name="RedundantImport"/>
-        <module name="UnusedImports"/>
-        <module name="LineLength">
-            <property name="max" value="150"/>
-        </module>
-        <module name="ParameterNumber"/>
-        <module name="EmptyForIteratorPad"/>
-        <module name="MethodParamPad"/>
-        <module name="NoWhitespaceAfter">
-            <property name="tokens" value="BNOT,DEC,DOT,INC,LNOT,UNARY_MINUS,UNARY_PLUS"/>
-        </module>
-        <module name="NoWhitespaceBefore"/>
-        <module name="OperatorWrap"/>
-        <module name="ParenPad"/>
-        <module name="TypecastParenPad"/>
-        <module name="WhitespaceAfter"/>
-        <module name="WhitespaceAround"/>
-        <module name="ModifierOrder"/>
-        <module name="RedundantModifier"/>
-        <module name="AvoidNestedBlocks">
-            <property name="severity" value="ignore"/>
-            <metadata name="net.sf.eclipsecs.core.lastEnabledSeverity" value="inherit"/>
-        </module>
-        <module name="EmptyBlock">
-            <property name="option" value="text"/>
-        </module>
-        <module name="LeftCurly"/>
-        <module name="NeedBraces"/>
-        <module name="RightCurly"/>
-        <module name="EmptyStatement"/>
-        <module name="EqualsHashCode"/>
-        <module name="IllegalInstantiation"/>
-        <module name="InnerAssignment">
-            <property name="severity" value="ignore"/>
-            <metadata name="net.sf.eclipsecs.core.lastEnabledSeverity" value="inherit"/>
-        </module>
-        <module name="MagicNumber"/>
-        <module name="MissingSwitchDefault"/>
-        <module name="SimplifyBooleanExpression"/>
-        <module name="SimplifyBooleanReturn"/>
-        <module name="FinalClass"/>
-        <module name="HideUtilityClassConstructor"/>
-        <module name="InterfaceIsType"/>
-        <module name="VisibilityModifier">
-            <property name="protectedAllowed" value="true"/>
-        </module>
-        <module name="ArrayTypeStyle"/>
-        <module name="FinalParameters"/>
-        <module name="IllegalCatch"/>
-        <module name="IllegalInstantiation">
-            <property name="classes" value="javax.mail.internet.InternetAddress"/>
-        </module>
-        <module name="TodoComment">
-            <property name="severity" value="ignore"/>
-            <metadata name="net.sf.eclipsecs.core.lastEnabledSeverity" value="inherit"/>
-        </module>
-        <module name="UpperEll"/>
-        <module name="RegexpSinglelineJava">
-            <property name="format" value="System\.(out|err|in|exit)"/>
-            <property name="message" value="Prohibited System.out/err/in/exit reference(s)."/>
-        </module>
-        <module name="RegexpSinglelineJava">
-            <property name="format" value="\.getBytes\(\)"/>
-            <property name="message" value="Possible usage of String.getBytes() without Charset specification."/>
-        </module>
-        <module name="RegexpSinglelineJava">
-            <property name="format" value="\.getBytes\(&quot;(.*)&quot;\)"/>
-            <property name="message" value="Possible usage of String.getBytes() with String to specific Charset."/>
-        </module>
-        <module name="RegexpSinglelineJava">
-            <property name="format" value="@Test.*dependsOn(Groups|Methods).*"/>
-            <property name="message" value="Prohibited TestNG dependsOn due to issues with parallelization.  Make all tests run independently."/>
-        </module>
-        <module name="MissingDeprecated">
-            <property name="severity" value="warning"/>
-        </module>
-        <module name="MissingOverride">
-            <property name="severity" value="warning"/>
-        </module>
-        <module name="LineLength">
-            <property name="max" value="150"/>
-            <property name="tabWidth" value="10"/>
-        </module>
-        <module name="EmptyCatchBlock"/>
-        <module name="DefaultComesLast"/>
-        <module name="EqualsAvoidNull"/>
-        <module name="FinalLocalVariable"/>
-        <module name="HiddenField"/>
-        <module name="IllegalThrows"/>
-        <module name="NestedForDepth"/>
-        <module name="NestedIfDepth"/>
-        <module name="NestedTryDepth"/>
-        <module name="NoClone"/>
-        <module name="NoFinalizer"/>
-        <module name="PackageDeclaration"/>
-        <module name="ParameterAssignment"/>
-        <module name="StringLiteralEquality"/>
-        <module name="SuperFinalize"/>
-        <module name="SuperClone"/>
-        <module name="UnnecessaryParentheses"/>
-        <module name="VariableDeclarationUsageDistance">
-            <property name="allowedDistance" value="5"/>
-        </module>
-        <module name="BooleanExpressionComplexity">
-            <property name="max" value="5"/>
-        </module>
-        <module name="ClassDataAbstractionCoupling"/>
-        <module name="ClassFanOutComplexity"/>
-        <module name="CyclomaticComplexity"/>
-        <module name="JavaNCSS"/>
-        <module name="NPathComplexity"/>
-    </module>
-    <module name="JavadocPackage">
-        <property name="allowLegacy" value="true"/>
-    </module>
-    <module name="NewlineAtEndOfFile">
-        <property name="severity" value="ignore"/>
-        <metadata name="net.sf.eclipsecs.core.lastEnabledSeverity" value="inherit"/>
-    </module>
-    <module name="Translation"/>
-    <module name="FileLength"/>
-    <module name="FileTabCharacter"/>
-    <module name="RegexpSingleline">
-        <property name="severity" value="ignore"/>
-        <property name="format" value="\s+$"/>
-        <property name="message" value="Line has trailing spaces."/>
-        <metadata name="net.sf.eclipsecs.core.lastEnabledSeverity" value="inherit"/>
-    </module>
-    <module name="SuppressionFilter">
-        <property name="file" value="${config_loc}/ampvalidator_checkstyle_suppressions.xml"/>
-    </module>
-    <module name="SuppressWarningsFilter">
-        <property name="id" value="checkstyle:suppresswarnings"/>
-    </module>
-    <module name="FileLength"/>
-</module>
\ No newline at end of file
diff --git a/validator/java/ampvalidator_checkstyle_import_control.xml b/validator/java/ampvalidator_checkstyle_import_control.xml
deleted file mode 100644
index 762ecea5ba5a5..0000000000000
--- a/validator/java/ampvalidator_checkstyle_import_control.xml
+++ /dev/null
@@ -1,24 +0,0 @@
-<?xml version="1.0"?>
-<!DOCTYPE import-control PUBLIC
-        "-//Puppy Crawl//DTD Import Control 1.2//EN"
-        "import_control_1_2.dtd">
-<!-- This file is used to control the imports in different packages in amp validator-->
-<import-control pkg="dev.amp.validator">
-    <allow pkg=".*" regex="true" />
-    <disallow pkg="org\.slf4j\.*" regex="true"/>
-    <subpackage name="css">
-        <allow pkg="org\.slf4j\.*" regex="true"/>
-    </subpackage>
-    <subpackage name="exception">
-        <allow pkg="org\.slf4j\.*" regex="true"/>
-    </subpackage>
-    <subpackage name="parser">
-        <allow pkg="org\.slf4j\.*" regex="true"/>
-    </subpackage>
-    <subpackage name="utils">
-        <allow pkg="org\.slf4j\.*" regex="true"/>
-    </subpackage>
-    <subpackage name="visitor">
-        <allow pkg="org\.slf4j\.*" regex="true"/>
-    </subpackage>
-</import-control>
\ No newline at end of file
diff --git a/validator/java/ampvalidator_checkstyle_suppressions.xml b/validator/java/ampvalidator_checkstyle_suppressions.xml
deleted file mode 100644
index 98e180237cb98..0000000000000
--- a/validator/java/ampvalidator_checkstyle_suppressions.xml
+++ /dev/null
@@ -1,30 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE suppressions PUBLIC "-//Puppy Crawl//DTD Suppressions 1.1//EN" "http://www.puppycrawl.com/dtds/suppressions_1_1.dtd">
-
-<suppressions>
-    <!-- Suppress package-info.java checks in the unit test source folders
-        (src/test/java) with the same package as product code (src/main/java). We
-        exclude all UT classes from package enforcement, which may include test-only
-        packages such as utilities. But we cannot have the same-named file in the
-        same package at different locations or Eclipse will complain. However, only
-        command-line check-style honors this exclusion, so Eclipse check-style will
-        still complain, but at least it will not be an Eclipse compile failure when
-        you have 2 of the same files in the same package. note: Alternatively we
-        could exclude anything with "test" in the name by files="[\\/]test[\\/]"
-        @author dvictor -->
-    <suppress checks="JavadocPackage" files="[\\/]test[\\/]"/>
-    <suppress checks="JavadocMethod" files="[\\/]test[\\/]"/>
-    <suppress checks="JavadocType" files="[\\/]test[\\/]"/>
-    <suppress checks="JavadocStyleCheck" files="[\\/]test[\\/]"/>
-    <suppress checks="MagicNumber" files="[\\/]test[\\/]"/>
-    <suppress checks="IllegalThrows" files="[\\/]test[\\/]"/>
-
-    <suppress checks="[a-zA-Z0-9]*" files="ValidatorProtos.java"/>
-    <suppress checks="[a-zA-Z0-9]*" files="[\\/]test[\\/]java[\\/]dev[\\/]amp[\\/]validator[\\/]css[\\/]"/>
-    <suppress checks="[a-zA-Z0-9]*" files="[\\/]test[\\/]java[\\/]dev[\\/]amp[\\/]validator[\\/]exception[\\/]"/>
-    <suppress checks="[a-zA-Z0-9]*" files="[\\/]test[\\/]java[\\/]dev[\\/]amp[\\/]validator[\\/]parser[\\/]"/>
-    <suppress checks="[a-zA-Z0-9]*" files="[\\/]test[\\/]java[\\/]dev[\\/]amp[\\/]validator[\\/]utils[\\/]"/>
-
-    <!-- Suppress all checkstyle for autogenerated jaxws.managed package -->
-    <suppress checks="[a-zA-Z0-9]*" files="[\\/]target[\\/]"/>
-</suppressions>
diff --git a/validator/java/build.sh b/validator/java/build.sh
deleted file mode 100755
index 2f6d4c0f27c37..0000000000000
--- a/validator/java/build.sh
+++ /dev/null
@@ -1,25 +0,0 @@
-#!/bin/bash
-#
-# Copyright 2020 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.
-#
-# This script builds the Java AMP Validator.
-set -e # Exit on error
-bazel clean
-bazel run //:fetchAMPResources
-bazel build -s //:amphtml_validator_java_proto_lib
-bazel run //:copyValidatorJavaSource
-bazel build -s //:amphtml_validator_lib
-bazel build -s //:amphtml_validator_test
-
diff --git a/validator/java/build_and_test.sh b/validator/java/build_and_test.sh
deleted file mode 100755
index 653bac3562353..0000000000000
--- a/validator/java/build_and_test.sh
+++ /dev/null
@@ -1,22 +0,0 @@
-#!/bin/bash
-#
-# Copyright 2020 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.
-#
-# This script builds the Java AMP Validator and runs a full test suite.
-
-set -e # Exit on error
-
-./build.sh
-bazel run //:amphtml_validator_test
diff --git a/validator/java/exclude-pmd.properties b/validator/java/exclude-pmd.properties
deleted file mode 100644
index cca685f47fd5c..0000000000000
--- a/validator/java/exclude-pmd.properties
+++ /dev/null
@@ -1,32 +0,0 @@
-dev.amp.validator.ValidatorProtos$AttrTriggerSpec$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$PropertySpec$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$PropertySpecList$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$UrlSpec$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$CssDeclaration$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$AttrSpec$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$AttrList$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$DescendantTagList$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$BlackListedCDataRegex$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$MediaQuerySpec$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$AtRuleSpec$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$CssSpec$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$CdataSpec$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$AmpLayout$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$AncestorMarker$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$ChildTagSpec$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$ReferencePoint$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$ExtensionSpec$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$TagSpec$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$CssLengthSpec$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$ValidatorRules$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$ValidationError$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$ErrorSpecificity$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$ErrorFormat$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$ValidationResult$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$ValidatorInfo$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$ValueSetRequirement$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$DocCssSpec$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$DeclarationList$Builder=AvoidThrowingNullPointerException
-dev.amp.validator.ValidatorProtos$ValueSetProvision$Builder=AvoidThrowingNullPointerException
-AMPValidatorLoader=AvoidThrowingNullPointerException,SignatureDeclareThrowsException
-AMPValidatorManager=AvoidThrowingNullPointerException,SignatureDeclareThrowsException
diff --git a/validator/java/install_bazel.sh b/validator/java/install_bazel.sh
deleted file mode 100755
index 7f711a974a789..0000000000000
--- a/validator/java/install_bazel.sh
+++ /dev/null
@@ -1,71 +0,0 @@
-#!/bin/bash
-#
-# Copyright 2020 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.
-#
-# This script installs Bazel, either by downloading it or by installing from the
-# Travis cache if available.
-
-set -e # Exit on error
-
-CYAN() { echo -e "\033[0;36m$1\033[0m"; }
-YELLOW() { echo -e "\033[1;33m$1\033[0m"; }
-GREEN() { echo -e "\033[0;32m$1\033[0m"; }
-RED() { echo -e "\033[0;31m$1\033[0m"; }
-
-LOG_PREFIX=$(YELLOW "install_bazel.sh")
-BAZEL_VERSION="3.0.0"
-INSTALLER_DIR="bazel-installer"
-
-
-if [[ "$OSTYPE" == "linux-gnu" ]]; then
-  BAZEL_INSTALLER="bazel_$BAZEL_VERSION-linux-x86_64.deb"
-elif [[ "$OSTYPE" == "darwin"* ]]; then
-  BAZEL_INSTALLER="bazel-$BAZEL_VERSION-installer-darwin-x86_64.sh"
-else
-  echo "$LOG_PREFIX Installing Bazel on $(CYAN "$OSTYPE") is not yet supported; aborting"
-  exit 1
-fi
-
-BAZEL_BIN_URL="https://github.com/bazelbuild/bazel/releases/download/$BAZEL_VERSION/$BAZEL_INSTALLER"
-BAZEL_BIN_PATH="$INSTALLER_DIR/$BAZEL_INSTALLER"
-
-BAZEL_BIN_SHA_URL="$BAZEL_BIN_URL.sha256"
-BAZEL_BIN_SHA_PATH="$BAZEL_BIN_PATH.sha256"
-BAZEL_INSTALLER_SHA="$BAZEL_INSTALLER.sha256"
-
-if type bazel &>/dev/null ; then
-  echo "$LOG_PREFIX Bazel binary detected at $(CYAN "$BAZEL_BIN_PATH"); skipping installation"
-  exit
-fi
-
-if [[ -f $BAZEL_BIN_PATH ]]; then
-  echo "$LOG_PREFIX Using cached Bazel binary $(CYAN "$BAZEL_BIN_PATH")"
-else
-  echo "$LOG_PREFIX Downloading $(CYAN "$BAZEL_BIN_URL")..."
-  mkdir -p $INSTALLER_DIR
-  curl -s --create-dirs -o "$BAZEL_BIN_PATH" -L "$BAZEL_BIN_URL"
-  curl -s --create-dirs -o "$BAZEL_BIN_SHA_PATH" -L "$BAZEL_BIN_SHA_URL"
-fi
-
-echo "$LOG_PREFIX Verifying sha256 integrity of $(CYAN "$BAZEL_BIN_PATH")..."
-(cd "$INSTALLER_DIR" && shasum -c "$BAZEL_INSTALLER_SHA" >/dev/null)
-
-echo "$LOG_PREFIX Installing $(CYAN "bazel") from $(CYAN "$BAZEL_BIN_PATH")..."
-if [[ "$OSTYPE" == "linux-gnu" ]]; then
-  sudo dpkg -i $BAZEL_BIN_PATH  >/dev/null 2>&1
-elif [[ "$OSTYPE" == "darwin"* ]]; then
-  chmod +x $BAZEL_BIN_PATH
-  sudo ./$BAZEL_BIN_PATH --user >/dev/null 2>&1
-fi
diff --git a/validator/java/pmd-ruleset-nullchecks.xml b/validator/java/pmd-ruleset-nullchecks.xml
deleted file mode 100644
index 20f82ffe8d39a..0000000000000
--- a/validator/java/pmd-ruleset-nullchecks.xml
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0"?>
-<ruleset name="PMD-Rules-Nullchecks">
-    <description>Jedi PMD rules for checking null usage.</description>
-    <!-- Null checks. -->
-    <rule ref="rulesets/java/basic.xml/MisplacedNullCheck">
-        <priority>1</priority>
-    </rule>
-    <rule ref="rulesets/java/basic.xml/BrokenNullCheck">
-        <priority>1</priority>
-    </rule>
-</ruleset>
\ No newline at end of file
diff --git a/validator/java/pmd-ruleset.xml b/validator/java/pmd-ruleset.xml
deleted file mode 100644
index f8d2bc959b8d7..0000000000000
--- a/validator/java/pmd-ruleset.xml
+++ /dev/null
@@ -1,30 +0,0 @@
-<?xml version="1.0"?>
-<ruleset name="PMD-Rules">
-    <description>AMP Validator PMD rules.</description>
-    <!-- String instantiation -->
-    <rule ref="rulesets/java/strings.xml/StringInstantiation"><priority>1</priority></rule>
-    <rule ref="rulesets/java/basic.xml/BooleanInstantiation"><priority>1</priority></rule>
-    <rule ref="rulesets/java/basic.xml/UnconditionalIfStatement"><priority>1</priority></rule>
-    <!-- Guards around log statements -->
-    <rule ref="rulesets/java/logging-java.xml/GuardLogStatementJavaUtil"><priority>1</priority></rule>
-    <!-- Rules about throwing and catching exceptions -->
-    <rule ref="rulesets/java/strictexception.xml/AvoidCatchingThrowable"><priority>1</priority></rule>
-    <rule ref="rulesets/java/strictexception.xml/SignatureDeclareThrowsException"><priority>1</priority></rule>
-    <rule ref="rulesets/java/strictexception.xml/ExceptionAsFlowControl"><priority>1</priority></rule>
-    <rule ref="rulesets/java/strictexception.xml/AvoidCatchingNPE"><priority>1</priority></rule>
-    <!--<rule ref="rulesets/java/strictexception.xml/AvoidThrowingRawExceptionTypes"><priority>1</priority></rule>  -->
-    <rule ref="rulesets/java/strictexception.xml/AvoidThrowingNullPointerException"><priority>1</priority></rule>
-    <!--<rule ref="rulesets/java/strictexception.xml/AvoidRethrowingException"><priority>1</priority></rule>  -->
-    <rule ref="rulesets/java/strictexception.xml/DoNotExtendJavaLangError"><priority>1</priority></rule>
-    <rule ref="rulesets/java/strictexception.xml/DoNotThrowExceptionInFinally"><priority>1</priority></rule>
-    <!--<rule ref="rulesets/java/strictexception.xml/AvoidThrowingNewInstanceOfSameException"><priority>1</priority></rule>  -->
-    <!--<rule ref="rulesets/java/strictexception.xml/AvoidCatchingGenericException"><priority>1</priority></rule>  -->
-    <!--<rule ref="rulesets/java/strictexception.xml/AvoidLosingExceptionInformation"><priority>1</priority></rule>  -->
-    <!-- Cyclomatic Complexity -->
-    <!-- <rule ref="rulesets/java/codesize.xml/CyclomaticComplexity"><priority>1</priority></rule> -->
-    <!-- A collection of rules that find unused code -->
-    <!--<rule ref="rulesets/java/unusedcode.xml/UnusedPrivateField"><priority>1</priority></rule>  -->
-    <!--<rule ref="rulesets/java/unusedcode.xml/UnusedLocalVariable"><priority>1</priority></rule>  -->
-    <!--<rule ref="rulesets/java/unusedcode.xml/UnusedPrivateMethod"><priority>1</priority></rule>  -->
-    <!--<rule ref="rulesets/java/unusedcode.xml/UnusedFormalParameter"><priority>1</priority></rule>  -->
-</ruleset>
\ No newline at end of file
diff --git a/validator/java/pom.xml b/validator/java/pom.xml
deleted file mode 100644
index eacd01abfa31d..0000000000000
--- a/validator/java/pom.xml
+++ /dev/null
@@ -1,606 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
-  <modelVersion>4.0.0</modelVersion>
-
-  <groupId>amp.validator</groupId>
-  <artifactId>amphtml-validator</artifactId>
-  <name>AMP validator Java API</name>
-  <version>1.0-SNAPSHOT</version>
-  <description>A Java validator for the AMP Html format.</description>
-  <packaging>jar</packaging>
-
-  <properties>
-    <!-- protobuf paths -->
-    <protobuf.input.directory>${project.basedir}/src/main/proto</protobuf.input.directory>
-    <protobuf.output.directory>${project.basedir}/src/main/java</protobuf.output.directory>
-    <validator.main.proto.ascii.directory>${project.basedir}/src/main/resources</validator.main.proto.ascii.directory>
-    <validator.proto.directory>${project.basedir}/src/main/proto</validator.proto.directory>
-
-    <!-- library versions -->
-    <build-helper-maven-plugin.version>3.1.0</build-helper-maven-plugin.version>
-    <maven-antrun-plugin.version>3.0.0</maven-antrun-plugin.version>
-    <maven-dependency-plugin.version>3.1.2</maven-dependency-plugin.version>
-    <maven-shade-plugin.version>2.4.2</maven-shade-plugin.version>
-    <maven-javadoc-plugin.version>3.1.1</maven-javadoc-plugin.version>
-    <maven-source-plugin.version>3.2.1</maven-source-plugin.version>
-
-    <os-maven-plugin.version>1.6.2</os-maven-plugin.version>
-    <protobuf.version>3.12.3</protobuf.version>
-    <maven-surefire-plugin.version>3.0.0-M4</maven-surefire-plugin.version>
-    <jdk.version>1.8</jdk.version>
-    <main.basedir>${project.basedir}</main.basedir>
-
-    <checkstyle.maxAllowedViolations>10</checkstyle.maxAllowedViolations>
-
-    <mockito.version>1.10.19</mockito.version>
-  </properties>
-
-  <repositories>
-    <repository>
-      <id>maven2</id>
-      <name>Maven Repository Switchboard</name>
-      <url>https://repo1.maven.org/maven2/</url>
-    </repository>
-    <repository>
-      <id>central</id>
-      <name>bintray</name>
-      <url>https://jcenter.bintray.com/</url>
-    </repository>
-  </repositories>
-
-  <build>
-    <!--
-        protoc Maven artifact is provided in various platform-specific classifications:
-        linux-x86_32, linux-x86_64, osx-x86_32, osx-x86_64, windows-x86_32, windows-x86_64.
-        In order to pick the right artifact, we will employ os.detected.classifier property
-        exposed by os-maven-plugin
-    -->
-    <extensions>
-      <!-- provides os.detected.classifier (i.e. linux-x86_64, osx-x86_64) property -->
-      <extension>
-        <groupId>kr.motd.maven</groupId>
-        <artifactId>os-maven-plugin</artifactId>
-        <version>${os-maven-plugin.version}</version>
-      </extension>
-    </extensions>
-
-    <!--
-        We will use maven-dependency-plugin to download the platform-specific protoc binary
-        suitable for the current build platform and copy it into project.build.directory.
-    -->
-    <plugins>
-      <plugin>
-        <artifactId>maven-clean-plugin</artifactId>
-        <version>3.1.0</version>
-        <executions>
-          <execution>
-            <id>Deleting generated Validator class</id>
-            <phase>validate</phase>
-            <goals>
-              <goal>clean</goal>
-            </goals>
-          </execution>
-        </executions>
-        <configuration>
-          <excludeDefaultDirectories>true</excludeDefaultDirectories>
-          <filesets>
-            <fileset>
-              <directory>${protobuf.output.directory}/dev/amp/validator</directory>
-              <includes>
-                <include>
-                  ValidatorProtos.java
-                </include>
-              </includes>
-            </fileset>
-            <fileset>
-              <directory>${validator.main.proto.ascii.directory}</directory>
-              <includes>
-                <include>
-                  validator-all.protoascii
-                </include>
-              </includes>
-            </fileset>
-            <fileset>
-              <directory>${project.basedir}/target</directory>
-            </fileset>
-          </filesets>
-          <verbose>true</verbose>
-        </configuration>
-      </plugin>
-      <plugin>
-        <artifactId>exec-maven-plugin</artifactId>
-        <groupId>org.codehaus.mojo</groupId>
-        <version>3.0.0</version>
-        <executions>
-          <execution>
-            <id>Fetching AMP resources</id>
-            <phase>generate-sources</phase>
-            <goals>
-              <goal>exec</goal>
-            </goals>
-            <configuration>
-              <executable>${basedir}/src/main/bin/fetchAMPResources.sh</executable>
-              <arguments>
-                <argument>${project.basedir}</argument>
-              </arguments>
-            </configuration>
-          </execution>
-        </executions>
-      </plugin>
-      <!-- copy protoc binary into build directory -->
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-dependency-plugin</artifactId>
-        <version>${maven-dependency-plugin.version}</version>
-        <executions>
-          <execution>
-            <id>copy-protoc</id>
-            <phase>generate-sources</phase>
-            <goals>
-              <goal>copy</goal>
-            </goals>
-            <configuration>
-              <artifactItems>
-                <artifactItem>
-                  <groupId>com.google.protobuf</groupId>
-                  <artifactId>protoc</artifactId>
-                  <version>${protobuf.version}</version>
-                  <classifier>${os.detected.classifier}</classifier>
-                  <type>exe</type>
-                  <overWrite>true</overWrite>
-                  <outputDirectory>${project.build.directory}</outputDirectory>
-                </artifactItem>
-              </artifactItems>
-            </configuration>
-          </execution>
-        </executions>
-      </plugin>
-      <!-- compile proto buffer files using copied protoc binary -->
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-antrun-plugin</artifactId>
-        <version>${maven-antrun-plugin.version}</version>
-        <executions>
-          <execution>
-            <id>exec-protoc</id>
-            <phase>generate-sources</phase>
-            <configuration>
-              <target>
-                <property name="protoc.filename" value="protoc-${protobuf.version}-${os.detected.classifier}.exe"/>
-                <property name="protoc.filepath" value="${project.build.directory}/${protoc.filename}"/>
-                <chmod file="${protoc.filepath}" perm="ugo+rx"/>
-                <mkdir dir="${protobuf.output.directory}"/>
-                <path id="protobuf.input.filepaths.path">
-                  <fileset dir="${protobuf.input.directory}">
-                    <include name="**/*.proto"/>
-                  </fileset>
-                </path>
-                <pathconvert pathsep=" " property="protobuf.input.filepaths" refid="protobuf.input.filepaths.path"/>
-                <exec executable="${protoc.filepath}" failonerror="true">
-                  <arg value="-I"/>
-                  <arg value="${protobuf.input.directory}"/>
-                  <arg value="--java_out"/>
-                  <arg value="${protobuf.output.directory}"/>
-                  <arg line="${protobuf.input.filepaths}"/>
-                </exec>
-              </target>
-            </configuration>
-            <goals>
-              <goal>run</goal>
-            </goals>
-          </execution>
-        </executions>
-      </plugin>
-      <!-- add generated proto buffer classes into the package -->
-      <plugin>
-        <groupId>org.codehaus.mojo</groupId>
-        <artifactId>build-helper-maven-plugin</artifactId>
-        <version>${build-helper-maven-plugin.version}</version>
-        <executions>
-          <execution>
-            <id>add-classes</id>
-            <phase>generate-sources</phase>
-            <goals>
-              <goal>add-source</goal>
-            </goals>
-            <configuration>
-              <sources>
-                <source>${protobuf.output.directory}</source>
-              </sources>
-            </configuration>
-          </execution>
-        </executions>
-      </plugin>
-      <plugin>
-        <groupId>com.googlecode.jslint4java</groupId>
-        <artifactId>jslint4java-maven-plugin</artifactId>
-        <version>2.0.5</version>
-      </plugin>
-      <plugin>
-        <groupId>org.antlr</groupId>
-        <artifactId>antlr3-maven-plugin</artifactId>
-        <version>3.5.2</version>
-      </plugin>
-      <plugin>
-        <groupId>org.codehaus.mojo</groupId>
-        <artifactId>build-helper-maven-plugin</artifactId>
-        <version>3.1.0</version>
-      </plugin>
-      <plugin>
-        <groupId>org.codehaus.mojo</groupId>
-        <artifactId>javacc-maven-plugin</artifactId>
-        <version>2.6</version>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-resources-plugin</artifactId>
-        <version>3.1.0</version>
-      </plugin>
-      <plugin>
-        <artifactId>maven-assembly-plugin</artifactId>
-        <version>3.3.0</version>
-      </plugin>
-      <plugin>
-        <artifactId>maven-enforcer-plugin</artifactId>
-        <version>3.0.0-M3</version>
-      </plugin>
-      <plugin>
-        <artifactId>maven-pmd-plugin</artifactId>
-        <version>3.13.0</version>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-checkstyle-plugin</artifactId>
-        <version>3.1.1</version>
-        <dependencies>
-          <dependency>
-            <groupId>com.puppycrawl.tools</groupId>
-            <artifactId>checkstyle</artifactId>
-            <version>8.33</version>
-          </dependency>
-        </dependencies>
-      </plugin>
-      <plugin>
-        <groupId>com.github.spotbugs</groupId>
-        <artifactId>spotbugs-maven-plugin</artifactId>
-        <version>4.0.0</version>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-scm-plugin</artifactId>
-        <version>1.11.2</version>
-        <inherited>false</inherited>
-      </plugin>
-      <plugin>
-        <groupId>com.googlecode.jslint4java</groupId>
-        <artifactId>jslint4java-maven-plugin</artifactId>
-        <executions>
-          <execution>
-            <id>jslint</id>
-            <phase>validate</phase>
-            <goals>
-              <goal>lint</goal>
-            </goals>
-            <configuration>
-              <failOnError>true</failOnError>
-              <outputFolder>${project.basedir}/target</outputFolder>
-              <sourceFolders>
-                <sourceFolder>${project.basedir}</sourceFolder>
-              </sourceFolders>
-              <includes>
-                <include>**/*.json</include>
-              </includes>
-              <excludes>
-                <exclude>**/target/**/*.json</exclude>
-              </excludes>
-              <options>
-                <white>true</white>
-              </options>
-            </configuration>
-          </execution>
-        </executions>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-enforcer-plugin</artifactId>
-        <executions>
-          <execution>
-            <id>enforce</id>
-            <goals>
-              <goal>enforce</goal>
-            </goals>
-            <configuration>
-              <rules>
-                <requireMavenVersion>
-                  <version>3.5.2</version>
-                </requireMavenVersion>
-                <requireJavaVersion>
-                  <version>${jdk.version}</version>
-                </requireJavaVersion>
-              </rules>
-            </configuration>
-          </execution>
-        </executions>
-      </plugin>
-      <plugin>
-        <groupId>com.github.spotbugs</groupId>
-        <artifactId>spotbugs-maven-plugin</artifactId>
-        <dependencies>
-          <dependency>
-            <groupId>com.github.spotbugs</groupId>
-            <artifactId>spotbugs</artifactId>
-            <version>4.0.3</version>
-          </dependency>
-          <dependency>
-            <groupId>com.github.spotbugs</groupId>
-            <artifactId>spotbugs-annotations</artifactId>
-            <version>4.0.3</version>
-          </dependency>
-          <dependency>
-            <groupId>org.dom4j</groupId>
-            <artifactId>dom4j</artifactId>
-            <version>2.1.3</version>
-          </dependency>
-        </dependencies>
-        <!-- https://spotbugs.github.io/
-            When running spotbugs on a project, the default heap size might not be enough
-            to complete the build. For now there is no way to fork spotbugs and run with
-            its own memory requirements, but the following system variable will allow
-            you to do so for Maven: export MAVEN_OPTS=-Xmx2048M -->
-        <configuration>
-          <fork>true</fork>
-          <maxHeap>2048</maxHeap>
-          <!-- Fail build in case of spotbugs errors during build. -->
-          <failOnError>true</failOnError>
-          <!-- Level of analysis effort. -->
-          <effort>low</effort>
-          <includeTests>false</includeTests>
-          <includeFilterFile>${main.basedir}/spotbugs-include.xml</includeFilterFile>
-          <excludeFilterFile>${main.basedir}/spotbugs-exclude.xml</excludeFilterFile>
-          <threshold>medium</threshold>
-          <!-- No XML output from Findgbugs. -->
-          <xmlOutput>false</xmlOutput>
-          <spotbugsXmlOutput>false</spotbugsXmlOutput>
-        </configuration>
-        <executions>
-          <!-- Ensures that Spotbugs inspects source code when
-              project is compiled. -->
-          <execution>
-            <id>check-compile</id>
-            <phase>verify</phase>
-            <goals>
-              <goal>check</goal>
-            </goals>
-          </execution>
-        </executions>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-pmd-plugin</artifactId>
-        <configuration>
-          <skip>false</skip>
-          <failOnViolation>true</failOnViolation>
-          <failurePriority>1</failurePriority>
-          <rulesets>
-            <ruleset>${main.basedir}/pmd-ruleset.xml</ruleset>
-          </rulesets>
-          <excludeFromFailureFile>${main.basedir}/exclude-pmd.properties</excludeFromFailureFile>
-          <linkXRef>false</linkXRef>
-          <verbose>true</verbose>
-          <printFailingErrors>true</printFailingErrors>
-        </configuration>
-        <executions>
-          <execution>
-            <id>pmd</id>
-            <goals>
-              <goal>check</goal>
-            </goals>
-          </execution>
-        </executions>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-surefire-plugin</artifactId>
-        <version>${maven-surefire-plugin.version}</version>
-        <configuration>
-          <forkMode>once</forkMode>
-          <!-- do not change the library.path - lafa -->
-          <!-- JDK9 and above doesn't allow to attach to self,
-              our UT connects to self and tests, using jdk.attach.allowAttachSelf allows to do that -->
-          <argLine>-Dfile.encoding=ANSI_X3.4-1968
-            -Djava.library.path=
-            -Djdk.attach.allowAttachSelf=true
-          </argLine>
-          <excludedGroups>notIsolate,EventListenersRegression</excludedGroups>
-          <!-- DO NOT TOUCH: SETTINGS BELOW ALLOW THE CONFIG LOADER
-              TO FIND CONFIG TEST RESOURCES :- LAFA -->
-          <useSystemClassLoader>true</useSystemClassLoader>
-          <useManifestOnlyJar>false</useManifestOnlyJar>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-checkstyle-plugin</artifactId>
-        <executions>
-          <execution>
-            <id>checkstyle</id>
-            <phase>validate</phase>
-            <configuration>
-              <configLocation>ampvalidator_checkstyle.xml</configLocation>
-              <violationSeverity>warning</violationSeverity>
-              <logViolationsToConsole>true</logViolationsToConsole>
-              <failsOnError>true</failsOnError>
-              <includeTestSourceDirectory>true</includeTestSourceDirectory>
-              <propertyExpansion>config_loc=${main.basedir}</propertyExpansion>
-              <suppressionsLocation>ampvalidator_checkstyle_suppressions.xml</suppressionsLocation>
-              <suppressionsFileExpression>checkstyle.suppressions.file</suppressionsFileExpression>
-            </configuration>
-            <goals>
-              <goal>check</goal>
-            </goals>
-          </execution>
-        </executions>
-      </plugin>
-      <plugin>
-        <groupId>org.jacoco</groupId>
-        <artifactId>jacoco-maven-plugin</artifactId>
-        <configuration>
-          <includes>
-            <include>**/amp/validator/**</include>
-          </includes>
-          <excludes>
-            <exclude>**/org/ocpsoft/prettytime/shade/com/joestelmach/natty/generated/**</exclude>
-          </excludes>
-        </configuration>
-        <executions>
-          <execution>
-            <id>jacoco-initialize</id>
-            <phase>initialize</phase>
-            <goals>
-              <goal>prepare-agent</goal>
-            </goals>
-            <configuration>
-              <destFile>${basedir}/target/jacoco.exec</destFile>
-            </configuration>
-          </execution>
-          <execution>
-            <id>jacoco-site</id>
-            <phase>package</phase>
-            <goals>
-              <goal>report</goal>
-            </goals>
-            <configuration>
-              <dataFile>${basedir}/target/jacoco.exec</dataFile>
-              <outputDirectory>${basedir}/target/jacoco</outputDirectory>
-            </configuration>
-          </execution>
-        </executions>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-compiler-plugin</artifactId>
-        <version>3.8.1</version>
-        <configuration>
-          <fork>true</fork>
-          <meminitial>128m</meminitial>
-          <maxmem>512m</maxmem>
-          <source>${jdk.version}</source>
-          <target>${jdk.version}</target>
-          <showDeprecation>true</showDeprecation>
-          <showWarnings>true</showWarnings>
-          <optimize>true</optimize>
-          <encoding>UTF-8</encoding>
-        </configuration>
-      </plugin>
-      <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-source-plugin</artifactId>
-        <version>${maven-source-plugin.version}</version>
-        <executions>
-          <execution>
-            <id>attach-sources</id>
-            <goals>
-              <goal>jar-no-fork</goal>
-            </goals>
-          </execution>
-        </executions>
-      </plugin>
-    </plugins>
-  </build>
-
-  <dependencies>
-    <!-- Jackson dependencies -->
-    <dependency>
-      <groupId>com.fasterxml.jackson.core</groupId>
-      <artifactId>jackson-annotations</artifactId>
-      <version>2.11.0</version>
-    </dependency>
-    <dependency>
-      <groupId>com.fasterxml.jackson.jaxrs</groupId>
-      <artifactId>jackson-jaxrs-base</artifactId>
-      <version>2.11.0</version>
-    </dependency>
-    <dependency>
-      <groupId>com.fasterxml.jackson.jaxrs</groupId>
-      <artifactId>jackson-jaxrs-json-provider</artifactId>
-      <version>2.11.0</version>
-    </dependency>
-    <dependency>
-      <groupId>com.fasterxml.jackson.core</groupId>
-      <artifactId>jackson-databind</artifactId>
-      <version>2.11.0</version>
-    </dependency>
-    <dependency>
-      <groupId>com.fasterxml.jackson.core</groupId>
-      <artifactId>jackson-core</artifactId>
-      <version>2.11.0</version>
-    </dependency>
-    <dependency>
-      <groupId>net.sourceforge.cssparser</groupId>
-      <artifactId>cssparser</artifactId>
-      <version>0.9.27</version>
-    </dependency>
-    <dependency>
-      <groupId>com.puppycrawl.tools</groupId>
-      <artifactId>checkstyle</artifactId>
-      <version>8.33</version>
-      <scope>test</scope>
-    </dependency>
-    <dependency>
-      <groupId>org.testng</groupId>
-      <artifactId>testng</artifactId>
-      <version>7.2.0</version>
-      <scope>test</scope>
-    </dependency>
-    <dependency>
-      <groupId>ch.qos.logback</groupId>
-      <artifactId>logback-classic</artifactId>
-      <version>1.2.3</version>
-      <scope>test</scope>
-    </dependency>
-    <dependency>
-      <groupId>org.slf4j</groupId>
-      <artifactId>slf4j-api</artifactId>
-      <version>1.7.30</version>
-    </dependency>
-    <dependency>
-      <groupId>junit</groupId>
-      <artifactId>junit</artifactId>
-      <version>4.13</version>
-      <scope>test</scope>
-    </dependency>
-    <dependency>
-      <groupId>com.google.protobuf</groupId>
-      <artifactId>protobuf-java</artifactId>
-      <version>${protobuf.version}</version>
-    </dependency>
-    <dependency>
-      <groupId>com.yahoo.tagchowder</groupId>
-      <artifactId>tagchowder.core</artifactId>
-      <version>2.0.17</version>
-    </dependency>
-    <dependency>
-      <groupId>com.google.code.findbugs</groupId>
-      <artifactId>jsr305</artifactId>
-      <version>3.0.2</version>
-    </dependency>
-    <dependency>
-      <groupId>org.apache.commons</groupId>
-      <artifactId>commons-lang3</artifactId>
-      <version>3.10</version>
-    </dependency>
-    <dependency>
-      <groupId>org.apache.commons</groupId>
-      <artifactId>commons-text</artifactId>
-      <version>1.8</version>
-    </dependency>
-    <dependency>
-      <groupId>org.mockito</groupId>
-      <artifactId>mockito-all</artifactId>
-      <version>${mockito.version}</version>
-      <scope>test</scope>
-    </dependency>
-  </dependencies>
-</project>
diff --git a/validator/java/spotbugs-exclude.xml b/validator/java/spotbugs-exclude.xml
deleted file mode 100644
index cbfec69374f3c..0000000000000
--- a/validator/java/spotbugs-exclude.xml
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<FindBugsFilter>
-
-</FindBugsFilter>
\ No newline at end of file
diff --git a/validator/java/spotbugs-include.xml b/validator/java/spotbugs-include.xml
deleted file mode 100644
index 1db0579bd3a0b..0000000000000
--- a/validator/java/spotbugs-include.xml
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<FindBugsFilter>
-    <Match>
-        <Bug pattern="
-                      RCN_REDUNDANT_NULLCHECK_OF_NONNULL_VALUE,
-                      RCN_REDUNDANT_NULLCHECK_WOULD_HAVE_BEEN_A_NPE,
-                      NP_NONNULL_PARAM_VIOLATION,
-                      NP_PARAMETER_MUST_BE_NONNULL_BUT_MARKED_AS_NULLABLE,
-                      NP_CLOSING_NULL,
-                      NP_NONNULL_FIELD_NOT_INITIALIZED_IN_CONSTRUCTOR,
-
-                      ODR_OPEN_DATABASE_RESOURCE,
-                      ODR_OPEN_DATABASE_RESOURCE_EXCEPTION_PATH,
-                      OS_OPEN_STREAM,
-                      OS_OPEN_STREAM_EXCEPTION_PATH,
-                      OBL_UNSATISFIED_OBLIGATION,
-                      OBL_UNSATISFIED_OBLIGATION_EXCEPTION_EDGE,
-                      ES_COMPARING_PARAMETER_STRING_WITH_EQ,
-                      ES_COMPARING_STRINGS_WITH_EQ,
-                      ISC_INSTANTIATE_STATIC_CLASS"/>
-    </Match>
-</FindBugsFilter>
\ No newline at end of file
diff --git a/validator/java/src/main/bin/copyValidatorJavaSource.sh b/validator/java/src/main/bin/copyValidatorJavaSource.sh
deleted file mode 100755
index c5af7a52d9c12..0000000000000
--- a/validator/java/src/main/bin/copyValidatorJavaSource.sh
+++ /dev/null
@@ -1,22 +0,0 @@
-#!/bin/bash
-
-#
-# This script copies Validator.java from bazel-bin directory.
-#
-
-# Fall back to bazel build working directory if not using Maven
-BASE_DIR=$1
-if [ -z "$BASE_DIR" ]
-then
-  BASE_DIR=$BUILD_WORKING_DIRECTORY
-fi
-BAZEL_BIN_DIR=$BASE_DIR/bazel-bin
-AMP_VALIDATOR_GENERATED_DIR=$BASE_DIR/"src/main/java/dev/amp/validator"
-
-cd $BAZEL_BIN_DIR
-jar xvf amphtml_validator_proto_lib-speed-src.jar >/dev/null
-
-if [[ -z "$TRAVIS" ]]; then
-  echo "Copying Validator.java from ${BAZEL_BIN_DIR}/dev/amp/validator"
-fi
-cp $BAZEL_BIN_DIR/dev/amp/validator/ValidatorProtos.java $AMP_VALIDATOR_GENERATED_DIR/.
diff --git a/validator/java/src/main/bin/fetchAMPResources.sh b/validator/java/src/main/bin/fetchAMPResources.sh
deleted file mode 100755
index 934b3e95ddd11..0000000000000
--- a/validator/java/src/main/bin/fetchAMPResources.sh
+++ /dev/null
@@ -1,56 +0,0 @@
-#!/bin/bash
-
-#
-# This is a pre hook script which executes before compiling the codes.
-#
-# Concatenate all protoascii files into a single file, validator-all.protoascii,
-# under /src/main/resources directory.
-#
-
-# Fall back to bazel build working directory if not using Maven
-BASE_DIR=$1
-if [ -z "$BASE_DIR" ]
-then
-    BASE_DIR=$BUILD_WORKING_DIRECTORY
-fi
-
-AMP_VALIDATOR_PROTOASCII="validator-all.protoascii"
-AMP_VALIDATOR_PROTO="validator.proto"
-AMP_VALIDATOR_PROTO_DIR=$BASE_DIR/"src/main/proto"
-AMP_RESOURCES_DIR=$BASE_DIR/"src/main/resources"
-AMP_VALIDATOR_GENERATED_DIR=$BASE_DIR/"src/main/java/amp/validator"
-
-if [[ -f "$AMP_VALIDATOR_PROTO_DIR/$AMP_VALIDATOR_PROTO" && -f "$AMP_RESOURCES_DIR/$AMP_VALIDATOR_PROTOASCII" ]]; then
-    if [[ -z "$TRAVIS" ]]; then
-        echo "Both $AMP_VALIDATOR_PROTO and $AMP_VALIDATOR_PROTOASCII exist";
-    fi
-else
-    # Creating proto & resources directories.
-    mkdir -p ${AMP_VALIDATOR_GENERATED_DIR}
-    mkdir -p ${AMP_VALIDATOR_PROTO_DIR}
-    mkdir -p ${AMP_RESOURCES_DIR}
-
-    pushd $BASE_DIR
-
-    if [[ -z "$TRAVIS" ]]; then
-        echo "Appending validator main protoascii files..."
-    fi
-    cat ../validator-main.protoascii >> ${AMP_RESOURCES_DIR}/${AMP_VALIDATOR_PROTOASCII};
-
-    if [[ -z "$TRAVIS" ]]; then
-        echo "Appending validator css protoascii files..."
-    fi
-    cat ../validator-css.protoascii >> ${AMP_RESOURCES_DIR}/${AMP_VALIDATOR_PROTOASCII};
-
-    if [[ -z "$TRAVIS" ]]; then
-        echo "Concatenating all extension protoascii files..."
-    fi
-    for i in `find ../../extensions -name "*.protoascii"`; do
-        if [[ -z "$TRAVIS" ]]; then
-            echo $i;
-        fi
-        cat $i >> ${AMP_RESOURCES_DIR}/${AMP_VALIDATOR_PROTOASCII};
-    done
-
-    popd
-fi
diff --git a/validator/java/src/main/java/com/steadystate/css/parser/ListableTokenManager.java b/validator/java/src/main/java/com/steadystate/css/parser/ListableTokenManager.java
deleted file mode 100644
index 5e18df5338cc9..0000000000000
--- a/validator/java/src/main/java/com/steadystate/css/parser/ListableTokenManager.java
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package com.steadystate.css.parser;
-
-import dev.amp.validator.css.CssTokenUtil;
-import dev.amp.validator.css.TokenType;
-
-import java.util.LinkedList;
-import java.util.List;
-
-/**
- * A class to extend the default css parser's manager in order to override the next
- * token method to populate a list of tokens.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ListableTokenManager extends SACParserCSS3TokenManager {
-    /**
-     * Constructor to initialize the list of tokens.
-     * @param stream a stream of css text to parse into tokens
-     */
-    public ListableTokenManager(final CharStream stream) {
-        super(stream);
-        parsedTokens  = new LinkedList<>();
-    }
-
-    /**
-     * Store the token in a list of tokens.
-     * @return the next token in the css text
-     */
-    @Override
-    public Token getNextToken() {
-        Token t = super.getNextToken();
-        parsedTokens.add(t);
-
-        return t;
-    }
-
-    /**
-     * Compress the tail tokens with the input token to produce a single token,
-     * by stepping backwards WHITESPACE tokens until an IDENT token is detected.
-     */
-    public void compressEnd() {
-        StringBuilder image = new StringBuilder();
-        image.insert(0, parsedTokens.get(parsedTokens.size() - 1).image);
-        parsedTokens.pollLast();
-
-        while (parsedTokens.getLast() != null) {
-            if (CssTokenUtil.getTokenType(parsedTokens.getLast()) == TokenType.WHITESPACE) {
-                image.insert(0, parsedTokens.getLast().image);
-                parsedTokens.pollLast();
-            } else if (CssTokenUtil.getTokenType(parsedTokens.getLast()) == TokenType.IDENT) {
-                image.insert(0, parsedTokens.getLast().image);
-                parsedTokens.getLast().image = image.toString();
-                parsedTokens.getLast().kind = SACParserCSS3Constants.FUNCTION;
-                break;
-            }
-        }
-    }
-
-    /**
-     * accessor for current lex state, which informs whether the parser is within a comment
-     * @return value of 1 for comment and 0 for css cdata
-     */
-    public int getCurLexState() {
-        return this.curLexState;
-    }
-
-    /**
-     * Getter for the list of tokens.
-     * @return the underlying tokens
-     */
-    public List<Token> getParsedTokens() {
-        return parsedTokens;
-    }
-
-    /** The parsed tokens. */
-    private LinkedList<Token> parsedTokens;
-}
diff --git a/validator/java/src/main/java/com/steadystate/css/parser/package-info.java b/validator/java/src/main/java/com/steadystate/css/parser/package-info.java
deleted file mode 100644
index 47685ed290424..0000000000000
--- a/validator/java/src/main/java/com/steadystate/css/parser/package-info.java
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-/**
- * AMP validator.
- */
-package com.steadystate.css.parser;
\ No newline at end of file
diff --git a/validator/java/src/main/java/dev/amp/validator/AMPHtmlHandler.java b/validator/java/src/main/java/dev/amp/validator/AMPHtmlHandler.java
deleted file mode 100644
index f469595535672..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/AMPHtmlHandler.java
+++ /dev/null
@@ -1,382 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import com.fasterxml.jackson.core.JsonProcessingException;
-import com.fasterxml.jackson.databind.JsonMappingException;
-import com.fasterxml.jackson.databind.ObjectMapper;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.exception.ExitOnFirstErrorException;
-import dev.amp.validator.exception.MaxParseNodesException;
-import dev.amp.validator.exception.TagValidationException;
-import dev.amp.validator.exception.ValidatorException;
-import dev.amp.validator.utils.TagSpecUtils;
-import org.xml.sax.Attributes;
-import org.xml.sax.Locator;
-import org.xml.sax.SAXException;
-import org.xml.sax.helpers.DefaultHandler;
-
-import javax.annotation.Nonnull;
-import java.io.IOException;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * Validation handler which accepts callbacks from HTML parser.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class AMPHtmlHandler extends DefaultHandler {
-    /**
-     * Creates an AMPHtmlHandler.
-     *
-     * @param validatorManager the validator manager instance.
-     * @param htmlFormat       HtmlFormat code.
-     * @param condition        exit condition.
-     * @param maxNodesAllowed  max nodes allowed.
-     */
-    public AMPHtmlHandler(@Nonnull final AMPValidatorManager validatorManager,
-                          @Nonnull final ValidatorProtos.HtmlFormat.Code htmlFormat, @Nonnull final ExitCondition condition,
-                          final int maxNodesAllowed) {
-        this.validatorManager = validatorManager;
-        this.exitCondition = condition;
-        this.maxNodesAllowed = maxNodesAllowed;
-        this.htmlFormat = htmlFormat;
-        this.validationResult = ValidatorProtos.ValidationResult.newBuilder();
-        context = new Context(new ParsedValidatorRules(htmlFormat, validatorManager));
-    }
-
-    /**
-     * Processing the beginning of the document.
-     *
-     * @exception SAXException Any SAX exception.
-     */
-    @Override
-    public void startDocument() throws SAXException {
-        validationResult.setStatus(ValidatorProtos.ValidationResult.Status.UNKNOWN);
-    }
-
-    /**
-     * Processing the end of the document.
-     *
-     * @exception SAXException Any SAX exception.
-     */
-    @Override
-    public void endDocument() throws SAXException {
-        try {
-            context.getRules().maybeEmitGlobalTagValidationErrors(context, validationResult);
-            if (validationResult.getStatus() == ValidatorProtos.ValidationResult.Status.UNKNOWN) {
-                validationResult.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-            }
-            if (validationResult.getErrorsCount() > 0) {
-                validationResult.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-            }
-        } catch (TagValidationException tve) {
-            /** ignore */
-        }
-    }
-
-    /**
-     * Processing the start of an element.
-     *
-     * @param uri The Namespace URI, or the empty string if the
-     *        element has no Namespace URI or if Namespace
-     *        processing is not being performed.
-     * @param localName The local name (without prefix), or the
-     *        empty string if Namespace processing is not being
-     *        performed.
-     * @param qName The qualified name (with prefix), or the
-     *        empty string if qualified names are not available.
-     * @param attributes The attributes attached to the element.  If
-     *        there are no attributes, it shall be an empty
-     *        Attributes object.
-     * @exception SAXException Any SAX exception
-     */
-    @Override
-    public void startElement(final String uri, final String localName,
-                             final String qName, final Attributes attributes) throws SAXException {
-        if (this.maxNodesAllowed > 0 && this.totalNodes > this.maxNodesAllowed) {
-            throw new MaxParseNodesException();
-        }
-
-        this.totalNodes++;
-
-        this.encounteredTag = new ParsedHtmlTag(localName, attributes);
-        if (encounteredTag.upperName().equals("HTML")) {
-            this.context.getRules().validateHtmlTag(
-                    encounteredTag, this.context, this.validationResult);
-        }
-
-        // TODO: discuss how to handle this warning (Attributes class dedupes)
-        final String maybeDuplicateAttrName = encounteredTag.hasDuplicateAttrs();
-        if (maybeDuplicateAttrName != null) {
-            final List<String> params = new ArrayList<>();
-            params.add(encounteredTag.lowerName());
-            params.add(maybeDuplicateAttrName);
-            this.context.addWarning(
-                    ValidatorProtos.ValidationError.Code.DUPLICATE_ATTRIBUTE,
-                    this.context.getLineCol(),
-                    params,
-                    /* specUrl */ "",
-                    this.validationResult);
-            //TODO - tagchowder doesn't seem to maintain duplicate attributes.
-            //encounteredTag.dedupeAttrs();
-        }
-
-        if (encounteredTag.upperName().equals("BODY")) {
-            this.emitMissingExtensionErrors();
-        }
-
-        try {
-            ValidateTagResult resultForReferencePoint =
-                    new ValidateTagResult(ValidatorProtos.ValidationResult.newBuilder(), null);
-            resultForReferencePoint.getValidationResult().setStatus(ValidatorProtos.ValidationResult.Status.UNKNOWN);
-
-            final ReferencePointMatcher referencePointMatcher = context.getTagStack().parentReferencePointMatcher();
-            if (referencePointMatcher != null) {
-                resultForReferencePoint = referencePointMatcher.validateTag(encounteredTag, context);
-            }
-
-            final ValidateTagResult resultForTag =
-                    TagSpecUtils.validateTag(context, encounteredTag, resultForReferencePoint.getBestMatchTagSpec());
-            if (referencePointMatcher != null
-                    && (resultForTag.getValidationResult().getStatus() == ValidatorProtos.ValidationResult.Status.PASS)) {
-                this.validationResult.mergeFrom(resultForReferencePoint.getValidationResult().build());
-            }
-
-            checkForReferencePointCollision(
-                    resultForReferencePoint.getBestMatchTagSpec(),
-                    resultForTag.getBestMatchTagSpec(),
-                    resultForTag.getValidationResult());
-
-            this.validationResult.mergeFrom(resultForTag.getValidationResult().build());
-            this.context.updateFromTagResults(encounteredTag, resultForReferencePoint, resultForTag);
-
-            if (this.validationResult.getErrorsCount() > 0
-                    && exitCondition == ExitCondition.EXIT_ON_FIRST_ERROR) {
-                throw new ExitOnFirstErrorException();
-            }
-        } catch (TagValidationException | ValidatorException | IOException | CssValidationException ex) {
-            /** ignore */
-        }
-    }
-
-    /**
-     * Processing the end of an element.
-     *
-     * @param uri The Namespace URI, or the empty string if the
-     *        element has no Namespace URI or if Namespace
-     *        processing is not being performed.
-     * @param localName The local name (without prefix), or the
-     *        empty string if Namespace processing is not being performed.
-     * @param qName The qualified name (with prefix), or the
-     *        empty string if qualified names are not available.
-     */
-    @Override
-    public void endElement(final String uri, final String localName, final String qName) {
-        if (encounteredTag != null) {
-            try {
-                if (charactersBuilder != null) {
-                    cdata(charactersBuilder.toString());
-                } else {
-                    cdata("");
-                }
-            } catch (TagValidationException | CssValidationException | IOException e) {
-                /** ignore */
-            }
-            encounteredTag.cleanup();
-        }
-        try {
-            this.context.getTagStack().exitTag(this.context, this.validationResult);
-        } catch (TagValidationException tve) {
-            /** ignore */
-        }
-
-        charactersBuilder = null;
-        encounteredTag = null;
-    }
-
-    /**
-     * Receive a Locator object for document events.
-     *
-     * @param locator A locator for all SAX document events.
-     */
-    @Override
-    public void setDocumentLocator(@Nonnull final Locator locator) {
-        this.context.setLineCol(locator);
-    }
-
-    /**
-     * Returns the validation result.
-     *
-     * @return returns the validation result.
-     */
-    public ValidatorProtos.ValidationResult.Builder validationResult() {
-        return validationResult;
-    }
-
-    /**
-     * While parsing the document HEAD, we may accumulate errors which depend
-     * on seeing later extension script tags.
-     */
-    public void emitMissingExtensionErrors() {
-        final ExtensionsContext extensionsCtx = this.context.getExtensions();
-        for (ValidatorProtos.ValidationError error : extensionsCtx.missingExtensionErrors()) {
-            this.context.addBuiltError(error, this.validationResult);
-        }
-    }
-
-    /**
-     * Considering that reference points could be defined by both reference
-     * points and regular tag specs, check that we don't have matchers assigned
-     * from both, there can be only one.
-     *
-     * @param refPointSpec a reference point parsed tag spec.
-     * @param tagSpec a parsed tag spec.
-     * @param validationResult a ValidationResult.
-     */
-    private void checkForReferencePointCollision(
-            final ParsedTagSpec refPointSpec, final ParsedTagSpec tagSpec,
-            @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) {
-        if (refPointSpec == null || !refPointSpec.hasReferencePoints()) {
-            return;
-        }
-
-        if (tagSpec == null || !tagSpec.hasReferencePoints()) {
-            return;
-        }
-
-        final List<String> params = new ArrayList<>();
-        params.add(TagSpecUtils.getTagSpecName(tagSpec.getSpec()));
-        params.add(refPointSpec.getReferencePoints().parentTagSpecName());
-        context.addError(
-                ValidatorProtos.ValidationError.Code.TAG_REFERENCE_POINT_CONFLICT,
-                context.getLineCol(),
-                params,
-                refPointSpec.getReferencePoints().parentSpecUrl(),
-                validationResult);
-    }
-
-    /**
-     * Callback for cdata.
-     *
-     * @param text the css content to validate
-     * @throws TagValidationException tag validation exception.
-     * @throws CssValidationException css validation exception.
-     * @throws IOException IO exception.
-     */
-    public void cdata(@Nonnull final String text) throws TagValidationException, CssValidationException, IOException {
-        // Validate that JSON can be parsed.
-        if (!this.context.getTagStack().hasAncestor("TEMPLATE")
-          && this.context.getTagStack().isScriptTypeJsonChild()) {
-            try {
-                OBJECT_MAPPER.readTree(text);
-            } catch (JsonProcessingException e) {
-                List<String> params = new ArrayList<>();
-                this.context.addWarning(
-                        ValidatorProtos.ValidationError.Code.INVALID_JSON_CDATA,
-                        this.context.getLineCol(),
-                        params, "",
-                        this.validationResult);
-            }
-        }
-        final CdataMatcher matcher = this.context.getTagStack().cdataMatcher();
-        if (matcher != null) {
-            matcher.match(text, this.context, this.validationResult);
-        }
-    }
-
-    /**
-     * Processing character data inside an element.
-     *
-     * @param ch The characters.
-     * @param start The start position in the character array.
-     * @param length The number of characters to use from the character array.
-     */
-    @Override
-    public void characters(final char[] ch, final int start, final int length) {
-        if (this.encounteredTag != null) {
-            if (charactersBuilder == null) {
-                this.charactersBuilder = new StringBuilder();
-            }
-            charactersBuilder.append(new String(ch, start, length));
-        }
-    }
-
-    /**
-     * AMPValidatorManager object.
-     */
-    @Nonnull
-    private final AMPValidatorManager validatorManager;
-
-    /**
-     * ExitCondition object.
-     */
-    @Nonnull
-    private final ExitCondition exitCondition;
-
-    /**
-     * Max nodes.
-     */
-    private int maxNodesAllowed;
-
-    /**
-     * Total nodes.
-     */
-    private int totalNodes;
-
-    /**
-     * ValidationResult object.
-     */
-    @Nonnull
-    private ValidatorProtos.ValidationResult.Builder validationResult;
-
-    /**
-     * HtmlFormat used to validate against.
-     */
-    @Nonnull
-    private final ValidatorProtos.HtmlFormat.Code htmlFormat;
-
-    /**
-     * Context object capturing session variables of the current validation.
-     */
-    @Nonnull
-    private final Context context;
-
-    /**
-     * Encountered tag.
-     */
-    private ParsedHtmlTag encounteredTag;
-
-    /**
-     * Characters can be called multiple times per tag.
-     */
-    private StringBuilder charactersBuilder;
-
-    /**
-     * Jackson ObjectMapper instance.
-     */
-    private static final ObjectMapper OBJECT_MAPPER = new ObjectMapper();
-}
-
diff --git a/validator/java/src/main/java/dev/amp/validator/AMPValidatorLoader.java b/validator/java/src/main/java/dev/amp/validator/AMPValidatorLoader.java
deleted file mode 100644
index c99de6a7ef0e7..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/AMPValidatorLoader.java
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import com.google.protobuf.TextFormat;
-
-import javax.annotation.Nonnull;
-import java.io.BufferedReader;
-import java.io.IOException;
-import java.io.InputStream;
-import java.io.InputStreamReader;
-import java.net.URISyntaxException;
-
-/**
- * This class load the validator main and extension proto ascii files.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public final class AMPValidatorLoader {
-    /**
-     * Loading the rules.
-     *
-     * @param filePath  file path.
-     * @throws IOException if I/O errors occur.
-     * @throws  URISyntaxException if this URL is not formatted strictly
-     * according to to RFC2396 and cannot be converted to a URI.
-     * @return a Builder instance
-     */
-    public ValidatorProtos.ValidatorRules.Builder load(final String filePath) throws IOException, URISyntaxException {
-        final InputStream is;
-
-        final ClassLoader classLoader = getClass().getClassLoader();
-        if (filePath == null) {
-            is = classLoader.getResourceAsStream(PROTO_ASCII_RESOURCE);
-            if (is == null) {
-                throw new IllegalArgumentException(PROTO_ASCII_RESOURCE + " file is not found!");
-            }
-        } else {
-            is = classLoader.getResourceAsStream(filePath);
-        }
-
-        final ValidatorProtos.ValidatorRules.Builder builder;
-        try {
-            final StringBuilder protoAsciiRules = new StringBuilder();
-            protoAsciiRules.append(getFileContent(is));
-
-            final TextFormat.Parser parser = TextFormat.Parser.newBuilder()
-                    .setAllowUnknownFields(true)
-                    .setAllowUnknownExtensions(true)
-                    .build();
-            builder = ValidatorProtos.ValidatorRules.newBuilder();
-            parser.merge(protoAsciiRules.toString(), builder);
-        } finally {
-            if (is != null) {
-                is.close();
-            }
-        }
-
-        return builder;
-    }
-
-    /**
-     * Reading file as a string.
-     *
-     * @param is input stream.
-     * @return the content of the file in string
-     * @throws Exception throws Exception.
-     */
-    private String getFileContent(@Nonnull final InputStream is) throws IOException {
-        final StringBuilder sb = new StringBuilder();
-        try (BufferedReader buf = new BufferedReader(new InputStreamReader(is))) {
-            String line = buf.readLine();
-            while (line != null) {
-                sb.append(line).append("\n");
-                line = buf.readLine();
-            }
-        }
-
-        return sb.toString();
-    }
-
-    /**
-     * Proto ascii resources.
-     */
-    private static final String PROTO_ASCII_RESOURCE = "validator-all.protoascii";
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/AMPValidatorManager.java b/validator/java/src/main/java/dev/amp/validator/AMPValidatorManager.java
deleted file mode 100644
index 007c104360d3d..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/AMPValidatorManager.java
+++ /dev/null
@@ -1,296 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.exception.TagValidationException;
-import dev.amp.validator.utils.DispatchKeyUtils;
-
-import javax.annotation.Nonnull;
-import java.io.IOException;
-import java.net.URISyntaxException;
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-
-/**
- * This class manages the rules.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class AMPValidatorManager {
-    /**
-     * Constructor of AMP validator manager class.
-     */
-    public AMPValidatorManager() {
-    }
-
-    /**
-     * Loading AMP validator main and extensions rules.
-     *
-     * @throws IOException if I/O errors occur.
-     * @throws  URISyntaxException if this URL is not formatted strictly
-     * according to to RFC2396 and cannot be converted to a URI.
-     */
-    public void loadRule() throws IOException, URISyntaxException {
-        loadRule(null);
-    }
-
-    /**
-     * Loading AMP validator main and extensions rules.
-     *
-     * @param filePath file path.
-     * @throws IOException if I/O errors occur.
-     * @throws  URISyntaxException if this URL is not formatted strictly
-     * according to to RFC2396 and cannot be converted to a URI.
-     */
-    public void loadRule(final String filePath) throws IOException, URISyntaxException {
-        final AMPValidatorLoader ampValidatorLoader = new AMPValidatorLoader();
-
-        this.builder = ampValidatorLoader.load(filePath);
-        this.combinedBlacklistedCdataRegexMap = new HashMap<>();
-
-        final List<ValidatorProtos.TagSpec> tagSpecs = builder.getTagsList();
-
-        int tagSpecId = 0;
-        for (ValidatorProtos.TagSpec tagSpec : tagSpecs) {
-            final List<ValidatorProtos.HtmlFormat.Code> htmlFormats = tagSpec.getHtmlFormatList();
-            for (final ValidatorProtos.HtmlFormat.Code htmlFormat : htmlFormats) {
-                Map<String, List<ValidatorProtos.TagSpec>> tagSpecMap = tagSpecMapByHtmlFormat.get(htmlFormat);
-                if (tagSpecMap == null) {
-                    tagSpecMap = new HashMap<>();
-                    tagSpecMap.put(tagSpec.getTagName(), new ArrayList<>());
-                    tagSpecMapByHtmlFormat.put(htmlFormat, tagSpecMap);
-                }
-                List<ValidatorProtos.TagSpec> tagSpecList = tagSpecMap.get(tagSpec.getTagName());
-                if (tagSpecList == null) {
-                    tagSpecList = new ArrayList<>();
-                }
-                tagSpecList.add(tagSpec);
-                tagSpecMap.put(tagSpec.getTagName(), tagSpecList);
-            }
-
-            String dispatchKey = DispatchKeyUtils.getDispatchKeyForTagSpecOrNone(tagSpec);
-            if (dispatchKey != null) {
-                dispatchKeyByTagSpecId.put(tagSpecId, dispatchKey);
-            }
-
-            final List<ValidatorProtos.BlackListedCDataRegex> blackListedCDataRegexList =
-                    tagSpec.getCdata().getBlacklistedCdataRegexList();
-            if (blackListedCDataRegexList != null) {
-                final List<String> combined = new ArrayList<>();
-                for (final ValidatorProtos.BlackListedCDataRegex blackListedCDataRegex : blackListedCDataRegexList) {
-                    combined.add(blackListedCDataRegex.getRegex());
-                }
-
-                if (!combined.isEmpty()) {
-                    final String combinedBlacklistedCdataRegex = String.join("|", combined);
-                    this.combinedBlacklistedCdataRegexMap.put(String.valueOf(tagSpecId), combinedBlacklistedCdataRegex);
-                }
-            }
-
-            tagSpecId++;
-        }
-
-
-
-        /** Populating the lookup for attribute list by name. */
-        List<ValidatorProtos.AttrList> attrListsList = builder.getAttrListsList();
-        for (ValidatorProtos.AttrList attrList : attrListsList) {
-            attrListMap.put(attrList.getName(), attrList);
-        }
-    }
-
-    /**
-     * Return true if tag spec name exists.
-     * @param htmlFormat the HtmlFormat.
-     * @param name tag spec name.
-     * @return returns true if tag spec name exists.
-     */
-    public boolean hasTagSpec(@Nonnull final ValidatorProtos.HtmlFormat.Code htmlFormat, @Nonnull final String name) {
-        Map<String, List<ValidatorProtos.TagSpec>> tagSpecMap = tagSpecMapByHtmlFormat.get(htmlFormat);
-        return tagSpecMap != null ? tagSpecMap.containsKey(name) : false;
-    }
-
-    /**
-     * Return a list of TagSpec given a tag name.
-     * @param htmlFormat the HtmlFormat.
-     * @param name tag spec name.
-     * @return returns a list of TagSpect given a tag name.
-     */
-    public List<ValidatorProtos.TagSpec> getTagSpec(@Nonnull final ValidatorProtos.HtmlFormat.Code htmlFormat, @Nonnull final String name) {
-         Map<String, List<ValidatorProtos.TagSpec>> tagSpecMap = tagSpecMapByHtmlFormat.get(htmlFormat);
-         return tagSpecMap != null ? tagSpecMap.get(name) : null;
-    }
-
-    /**
-     * Return a list of AttrList given an attribute list name.
-     * @param name attribute list name.
-     * @return returns a list of AttrList given an attribute spec name.
-     */
-    public ValidatorProtos.AttrList getAttrList(@Nonnull final String name) {
-        return attrListMap.get(name);
-    }
-
-    /**
-     * Return a list of TagSpec given a tag name.
-     * @param htmlFormat the HtmlFormat.
-     * @param tagName a tag name.
-     * @return returns a list of TagSpec given a tag name.
-     */
-    public List<ValidatorProtos.TagSpec> getListTagSpecByName(@Nonnull final ValidatorProtos.HtmlFormat.Code htmlFormat,
-                                                        @Nonnull final String tagName) {
-        Map<String, List<ValidatorProtos.TagSpec>> tagMap = tagSpecMapByHtmlFormat.get(htmlFormat);
-        return (tagMap != null ? tagMap.get(tagName) : null);
-    }
-
-    /**
-     * Returns the validation rules.
-     *
-     * @return returns the validation rules.
-     */
-    public ValidatorProtos.ValidatorRules.Builder getRules() {
-        return this.builder;
-    }
-
-    /**
-     * Returns the $GLOBAL_ATTRS attr spec list.
-     * @return returns the $GLOBAL_ATTRS attr spec list.
-     */
-    public List<ValidatorProtos.AttrSpec> getGlobalAttrs() {
-        for (ValidatorProtos.AttrList attrList : builder.getAttrListsList()) {
-            if (attrList.getName().equals("$GLOBAL_ATTRS")) {
-                return attrList.getAttrsList();
-            }
-        }
-
-        return Collections.emptyList();
-    }
-
-    /**
-     * Returns the $AMP_LAYOUT_ATTRS attr spec list.
-     * @return returns the $AMP_LAYOUT_ATTRS attr spec list.
-     */
-    public List<ValidatorProtos.AttrSpec> getAmpLayoutAttrs() {
-        for (ValidatorProtos.AttrList attrList : builder.getAttrListsList()) {
-            if (attrList.getName().equals("$AMP_LAYOUT_ATTRS")) {
-                return attrList.getAttrsList();
-            }
-        }
-
-        return Collections.emptyList();
-    }
-
-    /**
-     * Returns the descendant tag lists.
-     * @return returns the descendant tag lists.
-     */
-    public List<ValidatorProtos.DescendantTagList> getDescendantTagLists() {
-        return this.builder.getDescendantTagListList();
-    }
-
-    /**
-     * Returns dispatch key given tag spec id.
-     * @param tagSpecId tag spec id.
-     * @return returns dispatch key.
-     */
-    public String getDispatchKeyByTagSpecId(final int tagSpecId) {
-        return dispatchKeyByTagSpecId.get(tagSpecId);
-    }
-
-    /**
-     * Returns the specId for given the tag spec name of the reference point.
-     * @param specName the spec name.
-     * @throws TagValidationException the TagValidationException.
-     * @return returns specId.
-     */
-    public int getTagSpecIdByReferencePointTagSpecName(@Nonnull final String specName) throws TagValidationException {
-        int index = 0;
-        for (ValidatorProtos.TagSpec tagSpec : builder.getTagsList()) {
-            if (tagSpec.getTagName().equals("$REFERENCE_POINT")) {
-                if (tagSpec.getSpecName().equals(specName)) {
-                    return index;
-                }
-            }
-            index++;
-        }
-
-        throw new TagValidationException("The reference point with spec name " + specName + " does not exist");
-    }
-
-    /**
-     * Returns the styles spec url.
-     * @return returns the styles spec url.
-     */
-    public String getStylesSpecUrl() {
-        return builder.getStylesSpecUrl();
-    }
-
-    /**
-     * Returns the script spec url.
-     * @return returns the script spec url.
-     */
-    public String getScriptSpecUrl() {
-        return builder.getScriptSpecUrl();
-    }
-
-    /**
-     * Returns the attr list map.
-     * @return returns the attr list map.
-     */
-    public Map<String, ValidatorProtos.AttrList> getAttrListMap() {
-        return attrListMap;
-    }
-
-    /**
-     * Returns a combined black listed regex.
-     * @param tagSpecId tag spec id.
-     * @return returns a combined black listed regex.
-     */
-    public String getCombinedBlacklistedCdataRegex(final int tagSpecId) {
-        return combinedBlacklistedCdataRegexMap.get(Integer.toString(tagSpecId));
-    }
-
-    /** Validator builder rules. */
-    @Nonnull
-    private ValidatorProtos.ValidatorRules.Builder builder = null;
-
-    /** TagSpec lookup (tag_name) by name. */
-    @Nonnull
-    private final Map<ValidatorProtos.HtmlFormat.Code, Map<String, List<ValidatorProtos.TagSpec>>> tagSpecMapByHtmlFormat = new HashMap<>();
-
-    /** Attribute list (attr_list) lookup by name. */
-    @Nonnull
-    private final Map<String, ValidatorProtos.AttrList> attrListMap = new HashMap<>();
-
-    /**
-     * The map of dispatch key by tag spec id.
-     */
-    @Nonnull
-    private final Map<Integer, String> dispatchKeyByTagSpecId = new HashMap<>();
-
-    /** Combined black listed Cdata regex per Cdataspec. */
-    private Map<String, String> combinedBlacklistedCdataRegexMap;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/CdataMatcher.java b/validator/java/src/main/java/dev/amp/validator/CdataMatcher.java
deleted file mode 100644
index a8c2295234810..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/CdataMatcher.java
+++ /dev/null
@@ -1,417 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.css.CssTokenUtil;
-import dev.amp.validator.css.Declaration;
-import dev.amp.validator.css.ParsedDocCssSpec;
-import dev.amp.validator.exception.TagValidationException;
-import com.steadystate.css.parser.Token;
-
-import dev.amp.validator.css.CssParser;
-import dev.amp.validator.css.ErrorToken;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.css.Stylesheet;
-import dev.amp.validator.css.ParsedCssUrl;
-import dev.amp.validator.css.CssParsingConfig;
-
-import dev.amp.validator.utils.AttributeSpecUtils;
-import dev.amp.validator.utils.ByteUtils;
-import dev.amp.validator.utils.CssSpecUtils;
-import dev.amp.validator.utils.TagSpecUtils;
-import dev.amp.validator.utils.UrlUtils;
-import dev.amp.validator.visitor.InvalidDeclVisitor;
-import dev.amp.validator.visitor.InvalidRuleVisitor;
-import dev.amp.validator.visitor.MediaQueryVisitor;
-import org.xml.sax.Locator;
-
-import javax.annotation.Nonnull;
-import java.io.IOException;
-import java.util.ArrayList;
-import java.util.List;
-import java.util.regex.Pattern;
-
-/**
- * CdataMatcher maintains a constraint to check which an opening tag
- * introduces: a tag's cdata matches constraints set by it's cdata
- * spec. Unfortunately we need to defer such checking and can't
- * handle it while the opening tag is being processed.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class CdataMatcher {
-    /**
-     * Constructor.
-     *
-     * @param parsedTagSpec the ParsedTagSpec.
-     * @param lineCol       a line / column pair.
-     */
-    public CdataMatcher(@Nonnull final ParsedTagSpec parsedTagSpec, @Nonnull final Locator lineCol) {
-        this.parsedTagSpec = parsedTagSpec;
-        this.lineCol = lineCol;
-    }
-
-    /**
-     * Matches the provided cdata against what this CdataMatcher expects.
-     *
-     * @param cdata            the cdata.
-     * @param context          the context object.
-     * @param validationResult validation result object.
-     * @throws TagValidationException the TagValidationException.
-     * @throws CssValidationException css validation exception.
-     * @throws IOException            IO exception.
-     */
-    public void match(@Nonnull final String cdata, @Nonnull final Context context,
-                      @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult)
-            throws TagValidationException, CssValidationException, IOException {
-        final ValidatorProtos.CdataSpec cdataSpec = this.getTagSpec().getCdata();
-        if (cdataSpec == null) {
-            return;
-        }
-
-        // Max CDATA Byte Length
-        if (cdataSpec.hasMaxBytes() && cdataSpec.getMaxBytes() != CDATA_MAX_BYTES
-                && cdata.length() > cdataSpec.getMaxBytes()) {
-            List<String> params = new ArrayList<>();
-            params.add(String.valueOf(cdata.length()));
-            params.add(String.valueOf(cdataSpec.getMaxBytes()));
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.STYLESHEET_TOO_LONG,
-                    context.getLineCol(),
-                    params,
-                    cdataSpec.getMaxBytesSpecUrl(),
-                    validationResult);
-            return;
-        }
-
-        int urlBytes = 0;
-        // The mandatory_cdata, cdata_regex, and css_spec fields are treated
-        // like a oneof, but we're not using oneof because it's a feature
-        // that was added after protobuf 2.5.0 (which our open-source
-        // version uses).
-
-        // Mandatory CDATA exact match
-        List<String> params = new ArrayList<>();
-        params.add(TagSpecUtils.getTagSpecName(this.getTagSpec()));
-
-        if (cdataSpec.hasMandatoryCdata()) {
-            if (!cdataSpec.getMandatoryCdata().equals(cdata)) {
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.MANDATORY_CDATA_MISSING_OR_INCORRECT,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(this.getTagSpec()),
-                        validationResult);
-            }
-            // We return early if the cdata has an exact match rule. The
-            // spec shouldn't have an exact match rule that doesn't validate.
-            return;
-        } else if (this.getTagSpec().getCdata().hasCdataRegex()) {
-            if (!context.getRules()
-                    .getFullMatchRegex(this.getTagSpec().getCdata().getCdataRegex())
-                    .matcher(cdata).matches()) {
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.MANDATORY_CDATA_MISSING_OR_INCORRECT,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(this.getTagSpec()),
-                        validationResult);
-                return;
-            }
-        } else if (cdataSpec.hasCssSpec()) {
-            urlBytes = this.matchCss(cdata, cdataSpec.getCssSpec(), context, validationResult);
-        } else if (cdataSpec.getWhitespaceOnly()) {
-            if (!(WHITE_SPACE_CHARACTER_PATTERN.matcher(cdata).matches())) {
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.NON_WHITESPACE_CDATA_ENCOUNTERED,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(this.getTagSpec()),
-                        validationResult);
-            }
-        }
-
-        final ParsedDocCssSpec maybeDocCssSpec = context.matchingDocCssSpec();
-
-        int adjustedCdataLength = ByteUtils.byteLength(cdata);
-        if (maybeDocCssSpec != null && !maybeDocCssSpec.getSpec().getUrlBytesIncluded()) {
-            adjustedCdataLength -= urlBytes;
-        }
-
-        // Record <style amp-custom> byte size
-        if (context.getTagStack().countDocCssBytes()) {
-            context.addStyleTagByteSize(adjustedCdataLength);
-        }
-
-        // Blacklisted CDATA Regular Expressions
-        // We use a combined regex as a fast test. If it matches, we re-match
-        // against each individual regex so that we can generate better error
-        // messages.
-        final String combinedBlacklistedCdataRegex =
-                context.getRules().getCombinedBlacklistedCdataRegex(parsedTagSpec.getId());
-        if (combinedBlacklistedCdataRegex == null) {
-            return;
-        }
-
-        if (!context.getRules()
-                .getPartialMatchCaseiRegex(combinedBlacklistedCdataRegex)
-                .matcher(cdata).find()) {
-            return;
-        }
-
-        for (ValidatorProtos.BlackListedCDataRegex blacklist : cdataSpec.getBlacklistedCdataRegexList()) {
-            final Pattern p = Pattern.compile(blacklist.getRegex(), Pattern.CASE_INSENSITIVE);
-            if (p.matcher(cdata).find()) {
-                params.add(blacklist.getErrorMessage());
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.CDATA_VIOLATES_BLACKLIST,
-                        context.getLineCol(),
-                        /* params */
-                        params,
-                        TagSpecUtils.getTagSpecUrl(this.getTagSpec()),
-                        validationResult);
-            }
-        }
-    }
-
-
-    /**
-     * Matches the provided cdata against a CSS specification. Helper
-     * routine for match (see above). The return value is the number of
-     * bytes in the CSS string which were measured as URLs. In some
-     * validation types, these bytes are not counted against byte limits.
-     *
-     * @param cdata            the cdata.
-     * @param cssSpec          CSS specification.
-     * @param context          the context object.
-     * @param validationResult validation result.
-     * @return returns 1 if css matches against a CSS spec.
-     * @throws CssValidationException css validation exception.
-     * @throws IOException            IO validation exception.
-     */
-    public int matchCss(@Nonnull final String cdata, @Nonnull final ValidatorProtos.CssSpec cssSpec,
-                        @Nonnull final Context context,
-                        @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) throws CssValidationException,
-            IOException {
-        final List<ErrorToken> cssErrors = new ArrayList<>();
-        final List<ErrorToken> cssWarnings = new ArrayList<>();
-
-        final CssParser cssParser = new CssParser(cdata,
-                this.getLineCol().getLineNumber(), this.getLineCol().getColumnNumber(), cssErrors);
-        final List<Token> tokenList = cssParser.tokenize();
-        final CssParsingConfig cssParsingConfig = CssParsingConfig.computeCssParsingConfig();
-        final Stylesheet stylesheet = CssSpecUtils.parseAStylesheet(
-                tokenList, cssParsingConfig.getAtRuleSpec(), cssParsingConfig.getDefaultSpec(),
-                cssErrors);
-
-        final ParsedDocCssSpec maybeDocCssSpec = context.matchingDocCssSpec();
-
-        // We extract the urls from the stylesheet. As a side-effect, this can
-        // generate errors for url(…) functions with invalid parameters.
-        final List<ParsedCssUrl> parsedUrls = new ArrayList<>();
-        CssSpecUtils.extractUrls(stylesheet, parsedUrls, cssErrors);
-        // Similarly we extract query types and features from @media rules.
-        for (final ValidatorProtos.AtRuleSpec atRuleSpec : cssSpec.getAtRuleSpecList()) {
-            if (atRuleSpec.hasMediaQuerySpec()) {
-                if (!atRuleSpec.getName().equals("media")) {
-                    throw new CssValidationException("atRuleSpec name is not 'media'");
-                }
-                ValidatorProtos.MediaQuerySpec mediaQuerySpec = atRuleSpec.getMediaQuerySpec();
-                List<ErrorToken> errorBuffer = mediaQuerySpec.getIssuesAsError() ? cssErrors : cssWarnings;
-                this.matchMediaQuery(stylesheet, mediaQuerySpec, errorBuffer);
-                // There will be at most @media atRuleSpec
-                break;
-            }
-        }
-
-        if (cssSpec.getValidateAmp4Ads()) {
-            CssSpecUtils.validateAmp4AdsCss(stylesheet, cssErrors);
-        }
-
-        if (cssSpec.getValidateKeyframes()) {
-            CssSpecUtils.validateKeyframesCss(stylesheet, cssErrors);
-        }
-
-        // Add errors then warnings:
-        for (final ErrorToken errorToken : cssErrors) {
-            // Override the first parameter with the name of this style tag.
-            final List<String> params = errorToken.getParams();
-            // Override the first parameter with the name of this style tag.
-            params.set(0, TagSpecUtils.getTagSpecName(this.getTagSpec()));
-            context.addError(
-                    errorToken.getCode(),
-                    context.getLineCol().getColumnNumber() + errorToken.getLine(),
-                    context.getLineCol().getColumnNumber() + errorToken.getCol(),
-                    params,
-                    /* url */ "",
-                    validationResult);
-        }
-
-        for (ErrorToken errorToken : cssWarnings) {
-            // Override the first parameter with the name of this style tag.
-            List<String> params = errorToken.getParams();
-            // Override the first parameter with the name of this style tag.
-            params.set(0, TagSpecUtils.getTagSpecName(this.getTagSpec()));
-            context.addError(
-                    errorToken.getCode(),
-                    context.getLineCol().getColumnNumber() + errorToken.getLine(),
-                    context.getLineCol().getColumnNumber() + errorToken.getCol(),
-                    params,
-                    /* url */ "",
-                    validationResult);
-        }
-
-        // If `!important` is not allowed, record instances as errors.
-        if (!cssSpec.getAllowImportant()) {
-            final List<Declaration> important = new ArrayList<>();
-            CssSpecUtils.extractImportantDeclarations(stylesheet, important);
-            for (final Declaration decl : important) {
-                List<String> params = new ArrayList<>();
-                params.add(TagSpecUtils.getTagSpecName(this.getTagSpec()));
-                params.add("CSS !important");
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.CDATA_VIOLATES_BLACKLIST,
-                        context.getLineCol().getLineNumber() + decl.getLine(),
-                        context.getLineCol().getColumnNumber() + decl.getCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(this.getTagSpec()),
-                        validationResult);
-            }
-        }
-
-        int urlBytes = 0;
-
-        for (final ParsedCssUrl url : parsedUrls) {
-            // Some CSS specs can choose to not count URLs against the byte limit,
-            // but data URLs are always counted (or in other words, they aren't
-            // considered URLs).
-            if (!UrlUtils.isDataUrl(url.getUtf8Url())) {
-                urlBytes += ByteUtils.byteLength(url.getUtf8Url());
-            }
-            if (maybeDocCssSpec != null) {
-                final UrlErrorInStylesheetAdapter adapter = new UrlErrorInStylesheetAdapter(url.getLine(), url.getCol());
-                ParsedUrlSpec parsedUrlSpec = maybeDocCssSpec.getImageUrlSpec();
-                if (url.getAtRuleScope().equals("font-face")) {
-                    parsedUrlSpec = maybeDocCssSpec.getFontUrlSpec();
-                }
-                AttributeSpecUtils.validateUrlAndProtocol(parsedUrlSpec, adapter,
-                        context, url.getUtf8Url(), this.getTagSpec(), validationResult);
-            }
-        }
-
-        // Validate the allowed CSS AT rules (eg: `@media`)
-        final InvalidRuleVisitor invalidRuleVisitor = new InvalidRuleVisitor(
-                this.getTagSpec(), cssSpec, context, validationResult);
-        stylesheet.accept(invalidRuleVisitor);
-
-        // Validate the allowed CSS declarations (eg: `background-color`)
-        if (maybeDocCssSpec != null && !maybeDocCssSpec.getSpec().getAllowAllDeclarationInStyleTag()) {
-            final InvalidDeclVisitor invalidDeclVisitor =
-                    new InvalidDeclVisitor(maybeDocCssSpec, context, validationResult);
-            stylesheet.accept(invalidDeclVisitor);
-        }
-
-        return urlBytes;
-    }
-
-    /**
-     * Matches the provided stylesheet against a CSS media query specification.
-     *
-     * @param stylesheet  the stylesheet to validate
-     * @param spec        the spec to validate against
-     * @param errorBuffer the errors collection to populate
-     * @throws CssValidationException css validation exception.
-     * @private
-     */
-    private void matchMediaQuery(@Nonnull final Stylesheet stylesheet,
-                                 @Nonnull final ValidatorProtos.MediaQuerySpec spec,
-                                 @Nonnull final List<ErrorToken> errorBuffer) throws CssValidationException {
-        List<Token> seenMediaTypes = new ArrayList<>();
-        List<Token> seenMediaFeatures = new ArrayList<>();
-        MediaQueryVisitor.parseMediaQueries(stylesheet, seenMediaTypes, seenMediaFeatures, errorBuffer);
-
-        for (final Token token : seenMediaTypes) {
-            final String strippedMediaType = CssSpecUtils.stripVendorPrefix((token.toString().toLowerCase()));
-            if (!spec.getTypeList().contains(strippedMediaType)) {
-                final List<String> params = new ArrayList<>();
-                params.add("");
-                params.add(token.toString());
-                final ErrorToken errorToken = new ErrorToken(
-                        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_MEDIA_TYPE,
-                        params);
-                CssTokenUtil.copyPosTo(token, errorToken);
-                errorBuffer.add(errorToken);
-            }
-        }
-
-        for (final Token token : seenMediaFeatures) {
-            final String strippedMediaFeature = CssSpecUtils.stripMinMax(
-                    CssSpecUtils.stripVendorPrefix((token.toString().toLowerCase())));
-            if (!spec.getFeatureList().contains(strippedMediaFeature)) {
-                List<String> params = new ArrayList<>();
-                params.add("");
-                params.add(token.toString());
-                ErrorToken errorToken = new ErrorToken(
-                        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_MEDIA_FEATURE,
-                        params);
-                CssTokenUtil.copyPosTo(token, errorToken);
-                errorBuffer.add(errorToken);
-            }
-        }
-    }
-
-    /**
-     * @return lineCol of CdataMatcher
-     */
-    public Locator getLineCol() {
-        return this.lineCol;
-    }
-
-    /**
-     * @return tagspec of the CdataMatcher
-     */
-    public ValidatorProtos.TagSpec getTagSpec() {
-        return parsedTagSpec.getSpec();
-    }
-
-    /**
-     * A TagSpec object.
-     */
-    private ParsedTagSpec parsedTagSpec;
-
-    /**
-     * A pair of line/col.
-     */
-    private Locator lineCol;
-
-    /**
-     * A white space character pattern.
-     */
-    private static final Pattern WHITE_SPACE_CHARACTER_PATTERN = Pattern.compile("^\\s*$");
-
-    /**
-     * CDATA max bytes.
-     */
-    private static final int CDATA_MAX_BYTES = -2;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ChildTagMatcher.java b/validator/java/src/main/java/dev/amp/validator/ChildTagMatcher.java
deleted file mode 100644
index 7ceb2d5926636..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ChildTagMatcher.java
+++ /dev/null
@@ -1,157 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.exception.TagValidationException;
-import dev.amp.validator.utils.TagSpecUtils;
-import org.apache.commons.lang3.StringUtils;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * The child tag matcher evaluates ChildTagSpec. The constructor
- * provides the enclosing TagSpec for the parent tag so that we can
- * produce error messages mentioning the parent.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ChildTagMatcher {
-    /**
-     * Constructor.
-     *
-     * @param parentSpec parent tag spec.
-     * @throws TagValidationException child tag expected to be null.
-     */
-    public ChildTagMatcher(@Nonnull final ValidatorProtos.TagSpec parentSpec)
-            throws TagValidationException {
-        this.parentSpec = parentSpec;
-        if (!parentSpec.hasChildTags()) {
-            throw new TagValidationException("The parent's child tag should be null");
-        }
-    }
-
-    /**
-     * Matching child tag name.
-     * @param encounteredTag the ParsedHtmlTag.
-     * @param context the Context.
-     * @param result validation result.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void matchChildTagName(@Nonnull final ParsedHtmlTag encounteredTag,
-                                  @Nonnull final Context context,
-                                  @Nonnull final ValidatorProtos.ValidationResult.Builder result)
-            throws TagValidationException {
-        final ValidatorProtos.ChildTagSpec childTags = parentSpec.getChildTags();
-        // Enforce child_tag_name_oneof: If at least one tag name is specified,
-        // then the child tags of the parent tag must have one of the provided
-        // tag names.
-
-        String allowedNames;
-        if (childTags.getChildTagNameOneofList().size() > 0) {
-            final List<String> names = childTags.getChildTagNameOneofList();
-            if (names.indexOf(encounteredTag.upperName()) == -1) {
-                allowedNames = "[\'" + StringUtils.join(names, ", ") + "\']";
-                final List<String> params = new ArrayList<>();
-                params.add(encounteredTag.lowerName());
-                params.add(TagSpecUtils.getTagSpecName(this.parentSpec));
-                params.add(allowedNames.toLowerCase());
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.DISALLOWED_CHILD_TAG_NAME,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(this.parentSpec),
-                        result);
-            }
-        }
-        // Enforce first_child_tag_name_oneof: If at least one tag name is
-        // specified, then the first child of the parent tag must have one
-        // of the provided tag names.
-        if (childTags.getFirstChildTagNameOneofList().size() > 0
-                && context.getTagStack().parentChildCount() == 0) {
-            final List<String> names = childTags.getFirstChildTagNameOneofList();
-            if (names.indexOf(encounteredTag.upperName()) == -1) {
-                allowedNames = "[\'" + StringUtils.join(names, ", ") + "\']";
-                final List<String> params = new ArrayList<>();
-                params.add(encounteredTag.lowerName());
-                params.add(TagSpecUtils.getTagSpecName(this.parentSpec));
-                params.add(allowedNames.toLowerCase());
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.DISALLOWED_FIRST_CHILD_TAG_NAME,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(this.parentSpec),
-                        result);
-            }
-        }
-    }
-
-    /**
-     * Exit tag.
-     * @param context the context.
-     * @param result validation result.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void exitTag(@Nonnull final Context context, @Nonnull final ValidatorProtos.ValidationResult.Builder result) throws TagValidationException {
-        final int expectedNumChildTags =
-                this.parentSpec.getChildTags().getMandatoryNumChildTags();
-        List<String> params;
-        if (expectedNumChildTags != -1
-                && expectedNumChildTags != context.getTagStack().parentChildCount()) {
-            params = new ArrayList<>();
-            params.add(TagSpecUtils.getTagSpecName(this.parentSpec));
-            params.add(String.valueOf(expectedNumChildTags));
-            params.add(String.valueOf(context.getTagStack().parentChildCount()));
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.INCORRECT_NUM_CHILD_TAGS,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(this.parentSpec),
-                    result);
-            return;
-        }
-
-        final int  expectedMinNumChildTags =
-                this.parentSpec.getChildTags().getMandatoryMinNumChildTags();
-        if (expectedMinNumChildTags != -1
-                && context.getTagStack().parentChildCount() < expectedMinNumChildTags) {
-            params = new ArrayList<>();
-            params.add(TagSpecUtils.getTagSpecName(this.parentSpec));
-            params.add(String.valueOf(expectedMinNumChildTags));
-            params.add(String.valueOf(context.getTagStack().parentChildCount()));
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.INCORRECT_MIN_NUM_CHILD_TAGS,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(this.parentSpec),
-                    result);
-            return;
-        }
-    }
-
-    /** Parent tag spec. */
-    @Nonnull
-    private ValidatorProtos.TagSpec parentSpec;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/Context.java b/validator/java/src/main/java/dev/amp/validator/Context.java
deleted file mode 100644
index 098a0eab2127a..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/Context.java
+++ /dev/null
@@ -1,651 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.css.ParsedDocCssSpec;
-import dev.amp.validator.exception.TagValidationException;
-import dev.amp.validator.utils.ExtensionsUtils;
-import dev.amp.validator.utils.TagSpecUtils;
-import dev.amp.validator.utils.ValidationErrorUtils;
-import org.xml.sax.Locator;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.HashSet;
-import java.util.List;
-import java.util.Map;
-import java.util.Set;
-
-import static dev.amp.validator.utils.AttributeSpecUtils.isUsedForTypeIdentifiers;
-import static dev.amp.validator.utils.ExtensionsUtils.isAmpRuntimeScript;
-import static dev.amp.validator.utils.ExtensionsUtils.isExtensionScript;
-import static dev.amp.validator.utils.ExtensionsUtils.isLtsScriptUrl;
-
-/**
- * The Context keeps track of the line / column that the validator is
- * in, as well as the mandatory tag specs that have already been validated.
- * So, this constitutes the mutable state for the validator except for
- * the validation result itself.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class Context {
-
-    /**
-     * Constructor.
-     *
-     * @param parsedValidatorRules a ParsedValidationRules object.
-     */
-    public Context(@Nonnull final ParsedValidatorRules parsedValidatorRules) {
-        this.rules = parsedValidatorRules;
-        this.mandatoryAlternativesSatisfied = new ArrayList<>();
-        this.docLocator = null;
-        this.tagStack = new TagStack();
-        this.tagspecsValidated = new HashMap<>();
-        //TODO - it's a hack, remove this when DOCTYPE is fixed
-        tagspecsValidated.put(0, true);
-
-        this.styleTagByteSize = 0;
-        this.inlineStyleByteSize = 0;
-        this.typeIdentifiers = new ArrayList<>();
-        this.valueSetsProvided = new HashSet<>();
-        this.valueSetsRequired = new HashMap<>();
-        this.conditionsSatisfied = new HashMap<>();
-        this.firstUrlSeenTag = null;
-        this.extensions = new ExtensionsContext();
-        this.scriptReleaseVersion = ExtensionsUtils.ScriptReleaseVersion.UNKNOWN;
-    }
-
-    /**
-     * Given the tagResult from validating a single tag, update the overall
-     * result as well as the Context state to affect later validation.
-     *
-     * @param encounteredTag       the encountered tag.
-     * @param referencePointResult the reference point result.
-     * @param tagResult            the tag result.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void updateFromTagResults(@Nonnull final ParsedHtmlTag encounteredTag,
-                                     @Nonnull final ValidateTagResult referencePointResult,
-                                     @Nonnull final ValidateTagResult tagResult) throws TagValidationException {
-        this.tagStack.updateFromTagResults(
-                encounteredTag, referencePointResult, tagResult, this.getRules(),
-                this.getLineCol());
-
-        this.recordAttrRequiresExtension(encounteredTag, referencePointResult);
-        this.recordAttrRequiresExtension(encounteredTag, tagResult);
-        this.updateFromTagResult(referencePointResult);
-        this.updateFromTagResult(tagResult);
-    }
-
-    /**
-     * Given a tag result, update the Context state to affect
-     * later validation. Does not handle updating the tag stack.
-     *
-     * @param result a result.
-     */
-    private void updateFromTagResult(@Nonnull final ValidateTagResult result) {
-        if (result.getBestMatchTagSpec() == null) {
-            return;
-        }
-
-        final ParsedTagSpec parsedTagSpec = result.getBestMatchTagSpec();
-        final boolean isPassing =
-                (result.getValidationResult().getStatus() == ValidatorProtos.ValidationResult.Status.PASS);
-
-        this.extensions.updateFromTagResult(result);
-        // If this requires an extension and we are still in the document head,
-        // record that we may still need to emit a missing extension error at
-        // the end of the document head. We do this even for a tag failing
-        // validation since extensions are based on the tag name, and we're still
-        // pretty confident the user forgot to include the extension.
-        if (this.tagStack.hasAncestor("HEAD")) {
-            this.extensions.recordFutureErrorsIfMissing(
-                    parsedTagSpec, this.getLineCol());
-        }
-        // We also want to satisfy conditions, to reduce errors seen elsewhere in
-        // the document.
-        this.satisfyConditionsFromTagSpec(parsedTagSpec);
-        this.satisfyMandatoryAlternativesFromTagSpec(parsedTagSpec);
-        this.recordValidatedFromTagSpec(isPassing, parsedTagSpec);
-
-        final ValidatorProtos.ValidationResult.Builder validationResult = result.getValidationResult();
-        for (final ValidatorProtos.ValueSetProvision provision : validationResult.getValueSetProvisionsList()) {
-            this.valueSetsProvided.add(this.keyFromValueSetProvision(provision));
-        }
-        for (final ValidatorProtos.ValueSetRequirement requirement : validationResult.getValueSetRequirementsList()) {
-            if (!requirement.hasProvision()) {
-                continue;
-            }
-
-            final String key = this.keyFromValueSetProvision(requirement.getProvision());
-            List<ValidatorProtos.ValidationError> errors = this.valueSetsRequired.get(key);
-            if (errors == null) {
-                errors = new ArrayList<>();
-                this.valueSetsRequired.put(key, errors);
-            }
-            errors.add(requirement.getErrorIfUnsatisfied());
-        }
-
-        if (isPassing) {
-            // If the tag spec didn't match, we don't know that the tag actually
-            // contained a URL, so no need to complain about it.
-            this.markUrlSeenFromMatchingTagSpec(parsedTagSpec);
-        }
-    }
-
-    /**
-     * Record if this document contains a tag requesting the LTS runtime engine.
-     *
-     * @param parsedTag
-     * @param result    the result
-     */
-    private void recordScriptReleaseVersionFromTagResult(@Nonnull final ParsedHtmlTag parsedTag,
-                                                         @Nonnull final ValidatorProtos.ValidationResult result) {
-        if (this.getScriptReleaseVersion() == ExtensionsUtils.ScriptReleaseVersion.UNKNOWN
-                && (isExtensionScript(parsedTag) || isAmpRuntimeScript(parsedTag))) {
-            final String src = (parsedTag.attrsByKey().get("src") != null) ? parsedTag.attrsByKey().get("src") : "";
-            this.scriptReleaseVersion = isLtsScriptUrl(src)
-                    ? ExtensionsUtils.ScriptReleaseVersion.LTS : ExtensionsUtils.ScriptReleaseVersion.STANDARD;
-        }
-    }
-
-    /**
-     * Records that a Tag was seen which contains an URL. Used to note issues
-     * with base href occurring in the document after an URL.
-     *
-     * @param parsedTagSpec parsed tag spec.
-     */
-    public void markUrlSeenFromMatchingTagSpec(@Nonnull final ParsedTagSpec parsedTagSpec) {
-        if (!this.hasSeenUrl() && parsedTagSpec.containsUrl()) {
-            this.firstUrlSeenTag = parsedTagSpec.getSpec();
-        }
-    }
-
-    /**
-     * Returns all the value set provisions so far, as a set of derived keys, as
-     * computed by keyFromValueSetProvision_().
-     *
-     * @return the value sets provided
-     */
-    public Set<String> valueSetsProvided() {
-        return this.valueSetsProvided;
-    }
-
-    /**
-     * Returns all the value set requirements so far, keyed by derived keys, as
-     * computed by getValueSetProvisionKey().
-     *
-     * @return the map of value sets required.
-     */
-    public Map<String, List<ValidatorProtos.ValidationError>> valueSetsRequired() {
-        return this.valueSetsRequired;
-    }
-
-    /**
-     * Records that this document contains a tag matching a particular tag spec.
-     *
-     * @param isPassing     is passing status.
-     * @param parsedTagSpec parsed tag spec.
-     */
-    private void recordValidatedFromTagSpec(final boolean isPassing, @Nonnull final ParsedTagSpec parsedTagSpec) {
-        final RecordValidated recordValidated = parsedTagSpec.shouldRecordTagspecValidated();
-        if (recordValidated == RecordValidated.ALWAYS) {
-            this.tagspecsValidated.put(parsedTagSpec.id(), true);
-        } else if (isPassing && (recordValidated == RecordValidated.IF_PASSING)) {
-            this.tagspecsValidated.put(parsedTagSpec.id(), true);
-        }
-    }
-
-    /**
-     * Record document-level conditions which have been satisfied.
-     *
-     * @param parsedTagSpec parsed tag spec.
-     */
-    private void satisfyConditionsFromTagSpec(@Nonnull final ParsedTagSpec parsedTagSpec) {
-        for (final String condition : parsedTagSpec.getSpec().getSatisfiesList()) {
-            this.conditionsSatisfied.put(condition, true);
-        }
-    }
-
-    /**
-     * Record that this document contains a tag which is a member of a list
-     * of mandatory alternatives.
-     *
-     * @param parsedTagSpec parsed tag spec.
-     */
-    public void satisfyMandatoryAlternativesFromTagSpec(@Nonnull final ParsedTagSpec parsedTagSpec) {
-        final ValidatorProtos.TagSpec tagSpec = parsedTagSpec.getSpec();
-        if (tagSpec.hasMandatoryAlternatives()) {
-            this.mandatoryAlternativesSatisfied.add(tagSpec.getMandatoryAlternatives());
-        }
-    }
-
-    /**
-     * Record when an encountered tag's attribute that requires an extension
-     * that it also satisfies that the requied extension is used.
-     *
-     * @param encounteredTag encountered tag.
-     * @param tagResult      tag result.
-     */
-    private void recordAttrRequiresExtension(@Nonnull final ParsedHtmlTag encounteredTag,
-                                             @Nonnull final ValidateTagResult tagResult) {
-        if (tagResult.getBestMatchTagSpec() == null) {
-            return;
-        }
-
-        final ParsedTagSpec parsedTagSpec = tagResult.getBestMatchTagSpec();
-        if (!parsedTagSpec.attrsCanSatisfyExtension()) {
-            return;
-        }
-
-        Map<String, ValidatorProtos.AttrSpec> attrsByName = parsedTagSpec.getAttrsByName();
-        final ExtensionsContext extensionsCtx = this.extensions;
-        for (int i = 0; i < encounteredTag.attrs().getLength(); i++) {
-            String attrName = encounteredTag.attrs().getLocalName(i);
-            String attrValue = encounteredTag.attrs().getValue(i);
-            if (attrName.equals(attrValue)) {
-                attrValue = "";
-            }
-            if (attrsByName.containsKey(attrName)) {
-                final ValidatorProtos.AttrSpec attrSpec = attrsByName.get(attrName);
-                if (attrSpec == null) {
-                    continue;
-                }
-                final ParsedAttrSpec parsedAttrSpec =
-                        this.rules.getParsedAttrSpecs().getParsedAttrSpec(attrName, attrValue, attrSpec);
-                if (parsedAttrSpec != null && parsedAttrSpec.getSpec().getRequiresExtensionCount() > 0) {
-                    extensionsCtx.recordUsedExtensions(
-                            parsedAttrSpec.getSpec().getRequiresExtensionList());
-                }
-            }
-        }
-    }
-
-    /**
-     * @param error            a ValidationError object.
-     * @param validationResult a ValidationResult object.
-     */
-    public void addBuiltError(@Nonnull final ValidatorProtos.ValidationError error,
-                              @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) {
-        // If any of the errors amount to more than a WARNING, validation fails.
-        if (error.getSeverity() != ValidatorProtos.ValidationError.Severity.WARNING) {
-            validationResult.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        }
-        validationResult.addErrors(error);
-    }
-
-    /**
-     * Add an error field to validationResult with severity ERROR.
-     *
-     * @param validationErrorCode Error code
-     * @param lineCol             a line / column pair.
-     * @param params              a list of params.
-     * @param specUrl             a link (URL) to the amphtml spec
-     * @param validationResult    a ValidationResult object.
-     */
-    public void addError(@Nonnull final ValidatorProtos.ValidationError.Code validationErrorCode,
-                         @Nonnull final Locator lineCol,
-                         final List<String> params, final String specUrl,
-                         @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) {
-        addError(validationErrorCode, lineCol.getLineNumber(),
-                lineCol.getColumnNumber(), params, specUrl, validationResult);
-    }
-
-    /**
-     * Add an error field to validationResult with severity ERROR.
-     *
-     * @param validationErrorCode Error code
-     * @param line                a line number.
-     * @param column              a column number.
-     * @param params              a list of params.
-     * @param specUrl             a link (URL) to the amphtml spec
-     * @param validationResult    a ValidationResult object.
-     */
-    public void addError(@Nonnull final ValidatorProtos.ValidationError.Code validationErrorCode,
-                         final int line,
-                         final int column,
-                         final List<String> params, final String specUrl,
-                         @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) {
-        this.addBuiltError(
-                ValidationErrorUtils.populateError(
-                        ValidatorProtos.ValidationError.Severity.ERROR,
-                        validationErrorCode,
-                        line, column, params, specUrl),
-                validationResult);
-        validationResult.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-    }
-
-    /**
-     * Add an error field to validationResult with severity WARNING.
-     *
-     * @param validationErrorCode Error code
-     * @param lineCol             a line / column pair.
-     * @param params              a list of params.
-     * @param specUrl             a link (URL) to the amphtml spec
-     * @param validationResult    a ValidationResult object.
-     */
-    public void addWarning(@Nonnull final ValidatorProtos.ValidationError.Code validationErrorCode,
-                           @Nonnull final Locator lineCol,
-                           final List<String> params, final String specUrl,
-                           @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) {
-        this.addBuiltError(
-                ValidationErrorUtils.populateError(
-                        ValidatorProtos.ValidationError.Severity.WARNING, validationErrorCode,
-                        lineCol, params, specUrl),
-                validationResult);
-    }
-
-    /**
-     * Returns a line/col pair.
-     *
-     * @return returns a line/col pair.
-     */
-    public Locator getLineCol() {
-        return docLocator;
-    }
-
-    /**
-     * Setting the LineCol.
-     *
-     * @param lineCol a pair line/col.
-     */
-    public void setLineCol(@Nonnull final Locator lineCol) {
-        this.docLocator = lineCol;
-    }
-
-    /**
-     * Returns the ParsedValidatorRules.
-     *
-     * @return returns the ParsedValidatorRules object.
-     */
-    public ParsedValidatorRules getRules() {
-        return rules;
-    }
-
-    /**
-     * Returns the tag stack.
-     *
-     * @return returns the tag stack.
-     */
-    public TagStack getTagStack() {
-        return tagStack;
-    }
-
-    /**
-     * Record the type identifier in this document.
-     *
-     * @param typeIdentifier type identifier.
-     */
-    public void recordTypeIdentifier(@Nonnull final String typeIdentifier) {
-        this.typeIdentifiers.add(typeIdentifier);
-    }
-
-    /**
-     * Returns the type identifiers in this document.
-     *
-     * @return returns the type identifiers.
-     */
-    public List<String> getTypeIdentifiers() {
-        return this.typeIdentifiers;
-    }
-
-    /**
-     * @return returns the extensions of the current validation job.
-     */
-    public ExtensionsContext getExtensions() {
-        return extensions;
-    }
-
-    /**
-     * Returns the tag spec ids that have been validated. The return object
-     * should be treated as a set (the object keys), and the value should be
-     * ignored.
-     *
-     * @return returns validated tag specs.
-     */
-    public Map<Integer, Boolean> getTagspecsValidated() {
-        return this.tagspecsValidated;
-    }
-
-    /**
-     * Returns the boolean value of true if exists.
-     *
-     * @param id tag spec id.
-     * @return returns the boolean value of true if exists.
-     */
-    public boolean hasTagspecsValidated(final int id) {
-        Boolean b = tagspecsValidated.get(id);
-        if (b == null) {
-            return false;
-        }
-
-        return b.booleanValue();
-    }
-
-    /**
-     * Records how much of the document is used towards &lt;style amp-custom&gt;.
-     *
-     * @param byteSize byte size.
-     */
-    public void addStyleTagByteSize(final int byteSize) {
-        this.styleTagByteSize += byteSize;
-    }
-
-    /**
-     * Records how much of the document is used towards inline style.
-     *
-     * @param byteSize integer to add to running inline style byte size.
-     */
-    public void addInlineStyleByteSize(final int byteSize) {
-        this.inlineStyleByteSize += byteSize;
-    }
-
-    /**
-     * Returns the size of inline styles.
-     *
-     * @return returns running inline style byte size.
-     */
-    public int getInlineStyleByteSize() {
-        return this.inlineStyleByteSize;
-    }
-
-    /**
-     * Returns the size of style amp-custom.
-     *
-     * @return returns the size of style of amp-custom
-     */
-    public int getStyleTagByteSize() {
-        return this.styleTagByteSize;
-    }
-
-    /**
-     * Returns true iff "transformed" is a type identifier in this document.
-     *
-     * @return returns true iff "transformed" is a type identifier in this document.
-     */
-    public boolean isTransformed() {
-        return this.typeIdentifiers.contains("transformed");
-    }
-
-    /**
-     * Returns true iff the current context has observed a tag which contains
-     * an URL. This is set by calling markUrlSeen_ above.
-     *
-     * @return returns true if first url seen tag is not null.
-     */
-    public boolean hasSeenUrl() {
-        return this.firstUrlSeenTag != null;
-    }
-
-    /**
-     * @param condition the condition.
-     * @return returns true if condition exists.
-     */
-    public boolean satisfiesCondition(@Nonnull final String condition) {
-        return this.conditionsSatisfied.containsKey(condition);
-    }
-
-    /**
-     * The TagSpecName of the first seen URL. Do not call unless HasSeenUrl
-     * returns true.
-     *
-     * @return returns TagSpecName of the first seen URL.
-     */
-    public String firstSeenUrlTagName() {
-        return TagSpecUtils.getTagSpecName(this.firstUrlSeenTag);
-    }
-
-    /**
-     * The mandatory alternatives that we've satisfied. This may contain
-     * duplicates (we'd have to filter them in record... above if we cared).
-     *
-     * @return returns the mandatory alternatives that we've satisfied.
-     */
-    public List<String> getMandatoryAlternativesSatisfied() {
-        return this.mandatoryAlternativesSatisfied;
-    }
-
-    /**
-     * getter for scriptReleaseVersion
-     *
-     * @return the associated script release version.
-     */
-    public ExtensionsUtils.ScriptReleaseVersion getScriptReleaseVersion() {
-        return this.scriptReleaseVersion;
-    }
-
-    /**
-     * @param provision a ValueSetProvision.
-     * @return A key for valueSetsProvided and valueSetsRequired.
-     */
-    private String keyFromValueSetProvision(@Nonnull final ValidatorProtos.ValueSetProvision provision) {
-        return (provision.hasSet() ? provision.getSet() : "")
-                + ">"
-                + (provision.hasValue() ? provision.getValue() : "");
-    }
-
-    /**
-     * Returns the first (there should be at most one) DocCssSpec which matches
-     * both the html format and type identifiers recorded so far in this
-     * context. If called before identifiers have been recorded, it may return
-     * an incorrect selection.
-     *
-     * @return ParsedDocCssSpec
-     */
-    public ParsedDocCssSpec matchingDocCssSpec() {
-        // The specs are usually already filtered by HTML format, so this loop
-        // should be very short, often 1:
-        for (ParsedDocCssSpec spec : this.rules.getCss()) {
-            if (this.rules.isDocCssSpecCorrectHtmlFormat(spec.getSpec()) && this.isDocCssSpecValidForTypeIdentifiers(spec)) {
-                return spec;
-            }
-        }
-        return null;
-    }
-
-    /**
-     * Returns true iff `spec` should be used for the type identifiers recorded
-     * in this context, as seen in the document so far. If called before type
-     * identifiers have been recorded, will always return false.
-     *
-     * @param spec
-     * @return true iff `spec` should be used for the type identifiers recorded in context
-     */
-    private boolean isDocCssSpecValidForTypeIdentifiers(final ParsedDocCssSpec spec) {
-        return isUsedForTypeIdentifiers(
-                this.getTypeIdentifiers(), spec.enabledBy(), spec.disabledBy());
-    }
-
-    /**
-     * An instance of ParsedValidatorRules.
-     */
-    private ParsedValidatorRules rules;
-
-    /**
-     * The mandatory alternatives that we've validated (a small list of ids).
-     */
-    private List<String> mandatoryAlternativesSatisfied;
-
-    /**
-     * DocLocator object from the parser which gives us line/col numbers.
-     */
-    private Locator docLocator = null;
-
-    /**
-     * An instance of TagStack.
-     */
-    private TagStack tagStack = null;
-
-    /**
-     * Set of tagSpec ids that have been validated.
-     */
-    private Map<Integer, Boolean> tagspecsValidated;
-
-    /**
-     * Size of &lt;style amp-custom&gt;.
-     */
-    private int styleTagByteSize = 0;
-
-    /**
-     * Size of all inline styles (style attribute) combined.
-     */
-    private int inlineStyleByteSize = 0;
-
-    /**
-     * Set of type identifiers in this document.
-     */
-    private List<String> typeIdentifiers;
-
-    /**
-     * All the value set provisions so far.
-     */
-    private Set<String> valueSetsProvided;
-
-    /**
-     * All the value set requirements so far.
-     */
-    private Map<String, List<ValidatorProtos.ValidationError>> valueSetsRequired;
-
-    /**
-     * Set of conditions that we've satisfied.
-     */
-    private Map<String, Boolean> conditionsSatisfied;
-
-    /**
-     * First tag spec seen (matched) which contains an URL.
-     */
-    private ValidatorProtos.TagSpec firstUrlSeenTag = null;
-
-    /**
-     * Extension-specific context.
-     */
-    private ExtensionsContext extensions;
-
-    /**
-     * flag for LTS runtime engine present
-     */
-    private ExtensionsUtils.ScriptReleaseVersion scriptReleaseVersion;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/CssLength.java b/validator/java/src/main/java/dev/amp/validator/CssLength.java
deleted file mode 100644
index d37aa207694d2..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/CssLength.java
+++ /dev/null
@@ -1,158 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import javax.annotation.Nonnull;
-import java.util.regex.Matcher;
-import java.util.regex.Pattern;
-
-/**
- * Parses a width or height layout attribute, for the determining the layout
- * of AMP tags.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class CssLength {
-    /**
-     * Constructor.
-     * @param input The input attribute value to be parsed.
-     * @param allowAuto Whether or not to allow the 'auto' value as a value.
-     * @param allowFluid whether or not to allow the 'fluid' value
-     *   as a value.
-     */
-    public CssLength(@Nonnull final String input, final boolean allowAuto, final boolean allowFluid) {
-        this.isValid = false;
-        this.isSet = false;
-        this.isAuto = false;
-        this.isFluid = false;
-        this.numeral = Float.NaN;
-        this.unit = "px";
-
-        if (input == null) {
-            this.isValid = true;
-            return;
-        }
-        this.isSet = true;
-        if (input.equals("auto")) {
-            this.isAuto = true;
-            this.isValid = allowAuto;
-            return;
-        } else if (input.equals("fluid")) {
-            this.isFluid = true;
-            this.isValid = allowFluid;
-        }
-
-        Matcher matcher = CSS_LENGTH_PATTERN.matcher(input);
-        if (matcher.matches()) {
-            this.isValid = true;
-            this.numeral = Float.parseFloat(matcher.group(1));
-            this.unit = matcher.group(2) != null ? matcher.group(2) : "px";
-        }
-    }
-
-    /**
-     * Returns isValid.
-     * @return returns boolean isSet.
-     */
-    public boolean isValid() {
-        return isValid;
-    }
-
-    /**
-     * Returns isSet.
-     * @return returns boolean isSet.
-     */
-    public boolean isSet() {
-        return isSet;
-    }
-
-    /**
-     * Returns isAuto.
-     * @return returns a float isAuto.
-     */
-    public boolean isAuto() {
-        return isAuto;
-    }
-
-    /**
-     * Returns a isFluid.
-     * @return returns a boolean isFluid.
-     */
-    public boolean isFluid() {
-        return isFluid;
-    }
-
-    /**
-     * Returns a isNumeral.
-     * @return returns a float isNumeral.
-     */
-    public Float getNumeral() {
-        return numeral;
-    }
-
-    /**
-     * Returns a isUnit.
-     * @return returns a String isUnit.
-     */
-    public String getUnit() {
-        return unit;
-    }
-
-    /**
-     * Whether the value or unit is invalid. Note that passing
-     * undefined as |input| is considered valid.
-     */
-    private boolean isValid;
-
-    /**
-     * Whether the attribute value is set.
-     */
-    private boolean isSet;
-
-    /**
-     * Whether the attribute value is 'auto'. This is a special value that
-     * indicates that the value gets derived from the context. In practice
-     * that's only ever the case for a width.
-     */
-    private boolean isAuto;
-
-    /**
-     * Whether the attribute value is 'fluid'
-     */
-    private boolean isFluid;
-
-    /**
-     * The numeric value.
-     */
-    private Float numeral;
-
-    /**
-     * The unit, 'px' being the default in case it's absent.
-     */
-    private String unit;
-
-    /** CSS length regex pattern. */
-    private static final Pattern CSS_LENGTH_PATTERN =
-            Pattern.compile("^(\\d+(?:\\.\\d+)?)(px|em|rem|vh|vw|vmin|vmax)?$");
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/DescendantConstraints.java b/validator/java/src/main/java/dev/amp/validator/DescendantConstraints.java
deleted file mode 100644
index 5f1beacf58c51..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/DescendantConstraints.java
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import javax.annotation.Nonnull;
-import java.util.List;
-
-/**
- * Instances of this class specify which tag names (|allowedTags|)
- * are allowed as descendent tags of a particular tag (|tagName|).
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class DescendantConstraints {
-    /**
-     * Constructor.
-     * @param tagName tag name.
-     * @param allowedTags allowed tags.
-     */
-    public DescendantConstraints(@Nonnull final String tagName, @Nonnull final List<String> allowedTags) {
-        this.tagName = tagName;
-        this.allowedTags = allowedTags;
-    }
-
-    /**
-     * Returns the tag name.
-     * @return returns the tag name.
-     */
-    public String getTagName() {
-        return tagName;
-    }
-
-    /**
-     * Returns the allowed tags.
-     * @return returns the allowed tags.
-     */
-    public List<String> getAllowedTags() {
-        return allowedTags;
-    }
-
-    /** A tag name. */
-    private final String tagName;
-
-    /** Allowed tags. */
-    private final List<String> allowedTags;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ErrorCodeMetadata.java b/validator/java/src/main/java/dev/amp/validator/ErrorCodeMetadata.java
deleted file mode 100644
index 5155e79de1b0a..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ErrorCodeMetadata.java
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-/**
- * Error code meta data data holder.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ErrorCodeMetadata {
-    /**
-     * Default constructor.
-     */
-    public ErrorCodeMetadata() {
-    }
-
-    /**
-     * Getting the format.
-     * @return returns the format.
-     */
-    public String getFormat() {
-        return format;
-    }
-
-    /**
-     * Setting the format.
-     * @param format the format.
-     */
-    public void setFormat(final String format) {
-        this.format = format;
-    }
-
-    /**
-     * Getting the specificity.
-     * @return returns the specificity.
-     */
-    public int getSpecificity() {
-        return specificity;
-    }
-
-    /**
-     * Setting the specificity.
-     * @param specificity the specificity.
-     */
-    public void setSpecificity(final int specificity) {
-        this.specificity = specificity;
-    }
-
-    /** The format. */
-    private String format;
-
-    /** The specificity. */
-    private int specificity;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ExitCondition.java b/validator/java/src/main/java/dev/amp/validator/ExitCondition.java
deleted file mode 100644
index b12fefee805b3..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ExitCondition.java
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-/**
- * Exit condition enumeration types.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public enum ExitCondition {
-    /** Full parsing. */
-    FULL_PARSING,
-
-    /** Exit on first error. */
-    EXIT_ON_FIRST_ERROR;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ExtensionMissingError.java b/validator/java/src/main/java/dev/amp/validator/ExtensionMissingError.java
deleted file mode 100644
index 3c51357bcaf40..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ExtensionMissingError.java
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import javax.annotation.Nonnull;
-
-/**
- * Extension missing error data.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ExtensionMissingError {
-    /**
-     * Default constructor.
-     * @param missingExtension missing extension.
-     * @param validationError  validation error.
-     */
-    public ExtensionMissingError(@Nonnull final String missingExtension,
-                                 @Nonnull final ValidatorProtos.ValidationError validationError) {
-        this.maybeError = validationError;
-        this.missingExtension = missingExtension;
-    }
-
-    /**
-     * Returns the missing extension generating the
-     * ExtensionMissingError.
-     * @return returns the missing extension.
-     */
-    public String getMissingExtension() {
-        return missingExtension;
-    }
-
-    /**
-     * Returns the ValidationError of ExtensionMissingError.
-     *  @return ValidationError basis of ExtensionMissingError.
-     */
-    public ValidatorProtos.ValidationError getMaybeError() {
-        return maybeError;
-    }
-
-    /** Missing extension. */
-    private String missingExtension;
-
-    /** Validation error. */
-    private ValidatorProtos.ValidationError maybeError;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ExtensionsContext.java b/validator/java/src/main/java/dev/amp/validator/ExtensionsContext.java
deleted file mode 100644
index b8649fc702b57..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ExtensionsContext.java
+++ /dev/null
@@ -1,214 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.utils.TagSpecUtils;
-import org.xml.sax.Locator;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-
-/**
- * The extensions context keys track of the extensions that the validator has
- * seen, as well as which have been used, which are required to be used, etc.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ExtensionsContext {
-    /**
-     * A constructor.
-     */
-    public ExtensionsContext() {
-        // |extensionsLoaded tracks the valid <script> tags loading
-        // amp extensions which were seen in the document's head. Most extensions
-        // are also added to |extensionsUnusedRequired| when encountered in the
-        // head. When a tag is seen later in the document which makes use of an
-        // extension, that extension is recorded in |extensionsUsed|.
-
-        this.extensionsLoaded = new HashMap<>();
-        extensionsLoaded.put("amp-ad", true);
-
-        this.extensionsUnusedRequired = new ArrayList<>();
-        this.extensionMissingErrors = new ArrayList<>();
-        this.extensionsUsed = new HashMap<>();
-    }
-
-    /**
-     * Returns a list of errors accrued while processing the
-     * head for tags requiring an extension which was not found.
-     *
-     * @return returns a list of errors found while processing head
-     */
-    public List<ValidatorProtos.ValidationError> missingExtensionErrors() {
-        final List<ValidatorProtos.ValidationError> out = new ArrayList<>();
-        for (final ExtensionMissingError err : this.extensionMissingErrors) {
-            if (!this.isExtensionLoaded(err.getMissingExtension())) {
-                out.add(err.getMaybeError());
-            }
-        }
-
-        return out;
-    }
-
-    /**
-     * Returns false if the named extension has not yet been loaded. Note that
-     * this assumes that all extensions will be loaded in the document earlier
-     * than their first usage. This is true for amp-foo tags, since the
-     * extension must be loaded in the head and amp-foo tags are not supported
-     * in the head as per HTML spec.
-     *
-     * @param extension to check for.
-     * @return returns true iff extension is loaded.
-     */
-    public boolean isExtensionLoaded(@Nonnull final String extension) {
-        return this.extensionsLoaded.containsKey(extension);
-    }
-
-    /**
-     * Returns a list of unused extensions which produce validation errors
-     * when unused.
-     *
-     * @return returns a list of unused extensions.
-     */
-    public List<String> unusedExtensionsRequired() {
-        // Compute Difference: extensionsUnusedRequired_ - extensionsUsed_
-        final List<String> out = new ArrayList<>();
-        for (final String extension : this.extensionsUnusedRequired) {
-            if (!(this.extensionsUsed.containsKey(extension))) {
-                out.add(extension);
-            }
-        }
-        Collections.sort(out);
-        return out;
-    }
-
-    /**
-     * Update ExtensionContext state when we encounter an amp extension or
-     * tag using an extension.
-     *
-     * @param result a ValidateTagResult.
-     */
-    public void updateFromTagResult(@Nonnull final ValidateTagResult result) {
-        if (result.getBestMatchTagSpec() == null) {
-            return;
-        }
-
-        final ParsedTagSpec parsedTagSpec = result.getBestMatchTagSpec();
-        final ValidatorProtos.TagSpec tagSpec = parsedTagSpec.getSpec();
-
-        // Keep track of which extensions are loaded.
-        if (tagSpec.hasExtensionSpec()) {
-            final ValidatorProtos.ExtensionSpec extensionSpec = tagSpec.getExtensionSpec();
-            // This is an always present field if extension spec is set.
-            final String extensionName = extensionSpec.getName();
-
-            // Record that we have encountered an extension 'load' tag. This will
-            // look like <script custom-element=amp-foo ...> or similar.
-            this.extensionsLoaded.put(extensionName, true);
-            switch (extensionSpec.getRequiresUsage()) {
-                case EXEMPTED: // Fallthrough intended:
-                case NONE:
-                    // This extension does not have usage demonstrated by a tag, for
-                    // example: amp-dynamic-css-classes
-                    break;
-                case ERROR:
-                    // TODO(powdercloud): Make enum proto defaults work in generated
-                    // javascript.
-                default: // Default is error
-                    // Record that a loaded extension indicates a new requirement:
-                    // namely that some tag must make use of this extension.
-                    this.extensionsUnusedRequired.add(extensionName);
-                    break;
-            }
-        }
-
-        // Record presence of a tag, such as <amp-foo> which requires the usage
-        // of an amp extension.
-        this.recordUsedExtensions(tagSpec.getRequiresExtensionList());
-    }
-
-    /**
-     * Records extensions that are used within the document.
-     *
-     * @param extensions the list of extensions.
-     */
-    public void recordUsedExtensions(@Nonnull final List<String> extensions) {
-        for (final String extension : extensions) {
-            this.extensionsUsed.put(extension, true);
-        }
-    }
-
-    /**
-     * Record a possible error to report once we have collected all
-     * extensions in the document. If the given extension is missing,
-     * then report the given error.
-     *
-     * @param parsedTagSpec parsed tag spec.
-     * @param lineCol       a line/col.
-     */
-    public void recordFutureErrorsIfMissing(@Nonnull final ParsedTagSpec parsedTagSpec,
-                                            @Nonnull final Locator lineCol) {
-        final ValidatorProtos.TagSpec tagSpec = parsedTagSpec.getSpec();
-        for (final String requiredExtension : tagSpec.getRequiresExtensionList()) {
-            if (!this.isExtensionLoaded(requiredExtension)) {
-                final ValidatorProtos.ValidationError.Builder error = ValidatorProtos.ValidationError.newBuilder();
-                error.setSeverity(ValidatorProtos.ValidationError.Severity.ERROR);
-                error.setCode(ValidatorProtos.ValidationError.Code.MISSING_REQUIRED_EXTENSION);
-                final List<String> params = new ArrayList<>();
-                params.add(TagSpecUtils.getTagSpecName(tagSpec));
-                params.add(requiredExtension);
-                error.addAllParams(params);
-                error.setLine(lineCol.getLineNumber());
-                error.setCol(lineCol.getColumnNumber());
-                error.setSpecUrl(TagSpecUtils.getTagSpecUrl(tagSpec));
-
-                this.extensionMissingErrors.add(new ExtensionMissingError(requiredExtension, error.build()));
-            }
-        }
-    }
-
-    /**
-     * Used as a set, based on key names.
-     */
-    private Map<String, Boolean> extensionsLoaded;
-
-    /**
-     * A list of extension unused required.
-     */
-    private List<String> extensionsUnusedRequired;
-
-    /**
-     * Used as a set, based on key names.
-     */
-    private Map<String, Boolean> extensionsUsed;
-
-    /**
-     * Missing errors extension.
-     */
-    private List<ExtensionMissingError> extensionMissingErrors;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ParsedAttrSpec.java b/validator/java/src/main/java/dev/amp/validator/ParsedAttrSpec.java
deleted file mode 100644
index c29d06725165d..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ParsedAttrSpec.java
+++ /dev/null
@@ -1,157 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.utils.AttributeSpecUtils;
-
-import javax.annotation.Nonnull;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-
-/**
- * This wrapper class provides access to an AttrSpec and an attribute id which is unique within its context
- * (e.g., it's unique within the ParsedTagSpec).
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ParsedAttrSpec {
-    /**
-     * Constructor.
-     * @param attrSpec the AttrSpec.
-     * @param attrName attr name.
-     */
-    public ParsedAttrSpec(@Nonnull final ValidatorProtos.AttrSpec attrSpec, final String attrName) {
-        this.spec = attrSpec;
-        this.attrName = attrName;
-        this.valueUrlSpec = null;
-        this.valueProperties = null;
-        this.cssDeclarationByName = new HashMap<>();
-
-        for (final ValidatorProtos.CssDeclaration cssDeclaration : attrSpec.getCssDeclarationList()) {
-            if (cssDeclaration.getName() != null) {
-                this.cssDeclarationByName.put(cssDeclaration.getName(), cssDeclaration);
-            }
-        }
-    }
-
-    /**
-     * Returns unique name for this attr spec.
-     * @return returns unique name for this attr spec.
-     */
-    public String getAttrName() {
-        return this.attrName;
-    }
-
-    /**
-     * Returns the AttrSpec.
-     * @return returns this AttrSpec.
-     */
-    public ValidatorProtos.AttrSpec getSpec() {
-        return this.spec;
-    }
-
-    /**
-     * Returns the ParsedUrlSpec.
-     * @return returns the ParsedUrlSpec.
-     */
-    public ParsedUrlSpec getValueUrlSpec() {
-        if (this.valueUrlSpec == null) {
-            this.valueUrlSpec = new ParsedUrlSpec(this.spec.getValueUrl());
-        }
-        return this.valueUrlSpec;
-    }
-
-    /**
-     * Returns the ParsedValueProperties.
-     * @return returns the ParsedValueProperties.
-     */
-    public ParsedValueProperties getValuePropertiesOrNull() {
-        if (!this.spec.hasValueProperties()) {
-            return null;
-        }
-
-        if (this.valueProperties == null) {
-            this.valueProperties =
-                    new ParsedValueProperties(this.spec.getValueProperties());
-        }
-        return this.valueProperties;
-    }
-
-    /**
-     * Returns the CssDeclaration map.
-     * @return returns the CssDeclaration map.
-     */
-    public Map<String, ValidatorProtos.CssDeclaration> getCssDeclarationByName() {
-        return this.cssDeclarationByName;
-    }
-
-    /**
-     * Returns true if this AttrSpec should be used for the given type identifiers
-     * based on the AttrSpec's disabled_by or enabled_by fields.
-     * @param typeIdentifiers a list of type identifies.
-     * @return returns true if this AttrSpec should be used for the given type identifiers
-     * based on AttrSpec's disabled or enabled_by fields.
-     */
-    public boolean isUsedForTypeIdentifiers(@Nonnull final List<String> typeIdentifiers) {
-        return AttributeSpecUtils.isUsedForTypeIdentifiers(
-                typeIdentifiers, this.spec.getEnabledByList(), this.spec.getDisabledByList());
-    }
-
-    /**
-     * Clean up reference, improve gc performance.
-     */
-    public void cleanup() {
-        this.spec = null;
-        this.attrName = null;
-        this.valueUrlSpec = null;
-        this.valueProperties = null;
-        this.cssDeclarationByName = null;
-    }
-
-    /**
-     * AttributeSpec instance.
-     */
-    private ValidatorProtos.AttrSpec spec;
-
-    /**
-     * Globally unique attribute rule name.
-     */
-    private String attrName;
-
-    /**
-     * ParsedUrlSpec instance.
-     */
-    private ParsedUrlSpec valueUrlSpec;
-
-    /**
-     * ParsedValueProperties instance.
-     */
-    private ParsedValueProperties valueProperties;
-
-    /**
-     * CssDeclaration map.
-     */
-    private Map<String, ValidatorProtos.CssDeclaration> cssDeclarationByName;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ParsedAttrSpecs.java b/validator/java/src/main/java/dev/amp/validator/ParsedAttrSpecs.java
deleted file mode 100644
index 4b94eb7dd551d..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ParsedAttrSpecs.java
+++ /dev/null
@@ -1,126 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import javax.annotation.Nonnull;
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-
-/**
- * TagSpecs specify attributes that are valid for a particular tag.
- * They can also reference lists of attributes (AttrLists), thereby
- * sharing those definitions. This abstraction instantiates
- * ParsedAttrSpec for each AttrSpec (from validator-*.protoascii, our
- * specification file) exactly once, and provides quick access to the
- * attr spec names as well, including for simple attr specs (those
- * which only have a name but no specification for their value).
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ParsedAttrSpecs {
-    /**
-     * Constructor.
-     *
-     * @param validatorManager the AMPValidatorManager instance.
-     */
-    public ParsedAttrSpecs(@Nonnull final AMPValidatorManager validatorManager) {
-        this.validatorManager = validatorManager;
-        this.parsedAttrSpecs = new HashMap<>();
-    }
-
-    /**
-     * Returns the ParsedAttrSpec.
-     *
-     * @param name     the attr spec name.
-     * @param value    the attr spec value.
-     * @param attrSpec the AttributeSpec.
-     * @return returns the ParsedAttrSpec.
-     */
-    public ParsedAttrSpec getParsedAttrSpec(@Nonnull final String name,
-                                            @Nonnull final String value,
-                                            @Nonnull final ValidatorProtos.AttrSpec attrSpec) {
-        final String key = name + value;
-        if (this.parsedAttrSpecs.containsKey(key)) {
-            return parsedAttrSpecs.get(key);
-        }
-
-        final ParsedAttrSpec parsed = new ParsedAttrSpec(attrSpec, name);
-        this.parsedAttrSpecs.put(key, parsed);
-
-        return parsed;
-    }
-
-    /**
-     * Returns the attr list by name.
-     *
-     * @param name the attr list name.
-     * @return returns the attr list.
-     */
-    public List<ValidatorProtos.AttrSpec> getAttrListByName(@Nonnull final String name) {
-        ValidatorProtos.AttrList attrList = validatorManager.getAttrListMap().get(name);
-        if (attrList != null) {
-            return attrList.getAttrsList();
-        }
-
-        return Collections.emptyList();
-    }
-
-    /**
-     * Returns the global attr list.
-     *
-     * @return returns the global attr list.
-     */
-    public List<ValidatorProtos.AttrSpec> getGlobalAttrs() {
-        return validatorManager.getGlobalAttrs();
-    }
-
-    /**
-     * Returns the AmpLayout attr list.
-     *
-     * @return returns the AmpLayout attr list.
-     */
-    public List<ValidatorProtos.AttrSpec> getAmpLayoutAttrs() {
-        return validatorManager.getAmpLayoutAttrs();
-    }
-
-    /**
-     * Clean up reference, improve gc performance.
-     */
-    public void cleanup() {
-        this.parsedAttrSpecs = null;
-    }
-
-    /**
-     * AMPValidatorManager instance.
-     */
-    private final AMPValidatorManager validatorManager;
-
-    /**
-     * The already instantiated ParsedAttrSpec instances, indexed by
-     * attr spec name.
-     */
-    private Map<String, ParsedAttrSpec> parsedAttrSpecs;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ParsedHtmlTag.java b/validator/java/src/main/java/dev/amp/validator/ParsedHtmlTag.java
deleted file mode 100644
index d9d35bca8eb84..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ParsedHtmlTag.java
+++ /dev/null
@@ -1,131 +0,0 @@
-package dev.amp.validator;
-
-import org.xml.sax.Attributes;
-
-import javax.annotation.Nonnull;
-import java.util.HashMap;
-
-/**
- * The AMP HTML ParsedHtmlTag class.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ParsedHtmlTag {
-    /**
-     * Constructor.
-     *
-     * @param tagName the name of the underlying tag in html document.
-     * @param attributes the attributes attached to the element.  If
-     *  there are no attributes, it shall be an empty Attributes object.
-     */
-    public ParsedHtmlTag(@Nonnull final String tagName, @Nonnull final Attributes attributes) {
-        this.tagName = tagName.toUpperCase();
-        this.attrs = attributes;
-        this.attrsByKey = null;
-    }
-
-    /**
-     * Lower-case tag name.
-     * @return returns a lower case tag name.
-     */
-    public String lowerName() {
-        return this.tagName.toLowerCase();
-    }
-
-    /**
-     * Returns an array of attributes. Each attribute has two fields: name and
-     * value. Name is always lower-case, value is the case from the original
-     * document. Values are unescaped.
-     * @return returns the attributes.
-     */
-    public Attributes attrs() {
-        return this.attrs;
-    }
-
-    /**
-     * Returns an object mapping attribute name to attribute value. This is
-     * populated lazily, as it's not used for most tags.
-     * @return a HashMap of attribute name to attribute value
-     * */
-    public HashMap<String, String> attrsByKey() {
-        if (this.attrsByKey == null) {
-            this.attrsByKey = new HashMap<>();
-            for (int i = 0; i < attrs.getLength(); i++) {
-                this.attrsByKey.put(attrs.getLocalName(i), attrs.getValue(i));
-            }
-        }
-        return this.attrsByKey;
-    }
-
-    /**
-     * Returns a duplicate attribute name if the tag contains two attributes
-     * named the same, but with different attribute values. Same attribute name
-     * AND value is OK. Returns null if there are no such duplicate attributes.
-     * @return returns a duplicate attribute name if the tag contains two attributes named the same.
-     */
-    public String hasDuplicateAttrs() {
-        String lastAttrName = "";
-        String lastAttrValue = "";
-        for (int i = 0; i < attrs.getLength(); i++) {
-            if (lastAttrName.equals(attrs.getLocalName(i))
-                    && !lastAttrValue.equals(attrs.getValue(i))) {
-                return attrs.getLocalName(i);
-            }
-            lastAttrName = attrs.getLocalName(i);
-            lastAttrValue = attrs.getValue(i);
-        }
-        return null;
-    }
-
-    /**
-     * Need to replace the value with an empty string if attr name is equal to the value.
-     * @param attrName attr name.
-     * @param index index to the Attributes.
-     * @return returns the value.
-     */
-    public String getValue(@Nonnull final String attrName, final int index) {
-        String val = attrs.getValue(index);
-        if (val != null && val.equals(attrName.toLowerCase())) {
-            return "";
-        }
-
-        return val;
-    }
-
-    /**
-     * Method to nullify object values.
-     */
-    public void cleanup() {
-        this.tagName = null;
-        this.attrsByKey = null;
-    }
-
-    /**
-     * Upper-case tag name.
-     * @return returns a upper case tag name.
-     */
-    public String upperName() {
-        return this.tagName.toUpperCase();
-    }
-
-    /**
-     * Returns true if tag name length is zero.
-     * @return returns true if tag name length is zero.
-     */
-    public boolean isEmpty() {
-        return this.tagName.length() == 0;
-    }
-
-    /** The parsed tag name. */
-    @Nonnull
-    private String tagName;
-
-    /** The attributes. */
-    @Nonnull
-    private final Attributes attrs;
-
-    /** Lazily allocated map from attribute name to value */
-    private HashMap<String, String> attrsByKey;
-}
\ No newline at end of file
diff --git a/validator/java/src/main/java/dev/amp/validator/ParsedReferencePoints.java b/validator/java/src/main/java/dev/amp/validator/ParsedReferencePoints.java
deleted file mode 100644
index a2d1f7f7d924e..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ParsedReferencePoints.java
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.utils.TagSpecUtils;
-
-import javax.annotation.Nonnull;
-import java.util.List;
-
-/**
- * Holds the reference points for a particular parent tag spec, including
- * their resolved TagSpec ids.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ParsedReferencePoints {
-    /**
-     * Constructor.
-     * @param parentTagSpec the parent TagSpec.
-     */
-    public ParsedReferencePoints(@Nonnull final ValidatorProtos.TagSpec parentTagSpec) {
-        this.parentTagSpec = parentTagSpec;
-    }
-
-    /**
-     * Return the reference points list.
-     *
-     * @return returns the reference points list.
-     */
-    public List<ValidatorProtos.ReferencePoint> iterate() {
-        return this.parentTagSpec.getReferencePointsList();
-    }
-
-    /**
-     * Return true if the parent tag spec's reference point size is empty.
-     *
-     * @return returns true if parent tag spec's reference point size is empty.
-     */
-    public boolean empty() {
-        return this.size() == 0;
-    }
-
-    /**
-     * Returns the parent tag spec's reference points size.
-     *
-     * @return returns the parent tag spec's reference points size.
-     */
-    public int size() {
-        return this.parentTagSpec.getReferencePointsCount();
-    }
-
-    /**
-     * Returns the parent's tag spec url.
-     *
-     * @return returns the parent's tag spec url.
-     */
-    public String parentSpecUrl() {
-        return TagSpecUtils.getTagSpecUrl(this.parentTagSpec);
-    }
-
-    /**
-     * Returns the parent's tag spec name.
-     *
-     * @return returns the parent's tag spec name.
-     */
-    public String parentTagSpecName() {
-        return TagSpecUtils.getTagSpecName(this.parentTagSpec);
-    }
-
-    /**
-     * Clean up reference, improve gc performance.
-     */
-    public void cleanup() {
-        this.parentTagSpec = null;
-    }
-
-    /**
-     * The parent TagSpec.
-     */
-    @Nonnull
-    private ValidatorProtos.TagSpec parentTagSpec;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ParsedTagSpec.java b/validator/java/src/main/java/dev/amp/validator/ParsedTagSpec.java
deleted file mode 100644
index 1d684b988ac05..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ParsedTagSpec.java
+++ /dev/null
@@ -1,460 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.exception.TagValidationException;
-import com.google.protobuf.ProtocolStringList;
-import dev.amp.validator.utils.AttributeSpecUtils;
-import org.xml.sax.Locator;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.HashSet;
-import java.util.List;
-import java.util.Map;
-import java.util.Set;
-
-/**
- * This class provides access to a TagSpec and a tag id
- * which is unique within its context, the ParsedValidatorRules.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ParsedTagSpec {
-    /**
-     * Constructor.
-     * @param parsedAttrSpecs the ParsedAttrSpecs instance.
-     * @param shouldRecordTagsValidated  a record validated value to determine if record tag should validate.
-     * @param tagSpec the TagSpec.
-     * @param id the id.
-     */
-    public ParsedTagSpec(@Nonnull final ParsedAttrSpecs parsedAttrSpecs,
-                         @Nonnull final RecordValidated shouldRecordTagsValidated,
-                         @Nonnull final ValidatorProtos.TagSpec tagSpec, final int id) {
-        this.spec = tagSpec;
-        this.id = id;
-        this.referencePoints = new ParsedReferencePoints(tagSpec);
-        this.isReferencePoint = (tagSpec.getTagName().equals("$REFERENCE_POINT"));
-        this.isTypeJson = false;
-        this.shouldRecordTagspecValidated = shouldRecordTagsValidated;
-        this.attrsCanSatisfyExtension = false;
-        this.attrsByName = new HashMap<>();
-        this.mandatoryAttrs = new HashSet<>();
-        this.mandatoryAnyofs = new HashSet<>();
-        this.mandatoryOneofs = new HashSet<>();
-        this.implicitAttrspecs = new ArrayList<>();
-        this.containsUrl = false;
-
-        // Collect the attr spec ids for a given |tagspec|.
-        // There are four ways to specify attributes:
-        // (1) implicitly by a tag spec, if the tag spec has the amp_layout field
-        // set - in this case, the AMP_LAYOUT_ATTRS are assumed;
-        // (2) within a TagSpec::attrs;
-        // (3) via TagSpec::attr_lists which references lists by key;
-        // (4) within the $GLOBAL_ATTRS TagSpec::attr_list.
-        // It's possible to provide multiple specifications for the same attribute
-        // name, but for any given tag only one such specification can be active.
-        // The precedence is (1), (2), (3), (4)
-        // If tagSpec.explicitAttrsOnly is true then only collect the attributes
-        // from (2) and (3).
-
-        // (1) layout attrs (except when explicitAttrsOnly is true).
-        if (!tagSpec.hasExplicitAttrsOnly() && tagSpec.getAmpLayout() != null
-                && !this.isReferencePoint) {
-            this.mergeAttrs(parsedAttrSpecs.getAmpLayoutAttrs(), parsedAttrSpecs);
-        }
-        // (2) attributes specified within |tagSpec|.
-        this.mergeAttrs(tagSpec.getAttrsList(), parsedAttrSpecs);
-
-        // (3) attributes specified via reference to an attr_list.
-        for (final String attrLists : tagSpec.getAttrListsList()) {
-            this.mergeAttrs(parsedAttrSpecs.getAttrListByName(attrLists), parsedAttrSpecs);
-        }
-        // (4) attributes specified in the global_attr list (except when
-        // explicitAttrsOnly is true).
-        if (!tagSpec.hasExplicitAttrsOnly() && !this.isReferencePoint) {
-            this.mergeAttrs(parsedAttrSpecs.getGlobalAttrs(), parsedAttrSpecs);
-        }
-    }
-
-    /**
-     * Getting the TagSpec.
-     *
-     * @return returns the TagSpec.
-     */
-    public ValidatorProtos.TagSpec getSpec() {
-        return spec;
-    }
-
-    /**
-     * If tag has a cdata spec, returns a CdataMatcher, else null.
-     * @param lineCol the pair of line/col.
-     * @return CdataMatcher returns CdataMatcher object.
-     */
-    public CdataMatcher cdataMatcher(@Nonnull final Locator lineCol) {
-        if (this.spec.getCdata() != null) {
-            return new CdataMatcher(this, lineCol);
-        }
-
-        return null;
-    }
-
-    /**
-     * If tag has a child_tag spec, returns a ChildTagMatcher, else null.
-     * @throws TagValidationException the TagValidationException.
-     * @return ChildTagMatcher returns the ChildTagMatcher.
-     */
-    public ChildTagMatcher childTagMatcher() throws TagValidationException {
-        if (this.spec.hasChildTags()) {
-            return new ChildTagMatcher(this.spec);
-        }
-        return null;
-    }
-
-    /**
-     * If tag has a reference_point spec, returns a ReferencePointMatcher,
-     * else null.
-     * @param rules the ParsedValidatorRules object.
-     * @param lineCol the pair of line/col.
-     * @throws TagValidationException the TagValidationException.
-     * @return returns the ReferencePointMatcher object.
-     */
-    public ReferencePointMatcher referencePointMatcher(@Nonnull final ParsedValidatorRules rules,
-                                                       @Nonnull final Locator lineCol)
-            throws TagValidationException {
-        if (this.hasReferencePoints()) {
-            return new ReferencePointMatcher(rules, this.referencePoints, lineCol);
-        }
-        return null;
-    }
-
-    /**
-     * Returns true if this tagSpec contains an attribute of name "type" and value
-     * "application/json".
-     * @return returns true if this tagSpec contains an attribute of name "type"
-     * and value "application/json.".
-     */
-    public boolean isTypeJson() {
-        return this.isTypeJson;
-    }
-
-    /**
-     * Return the parsed tag id.
-     * @return returns the parsed tag id.
-     */
-    public int getId() {
-        return id;
-    }
-
-    /**
-     * Returns true if this TagSpec should be used for the given type identifiers
-     * based on the TagSpec's disabled_by or enabled_by fields.
-     * @param typeIdentifiers the list of identifiers.
-     * @return returns true if this tagSpec should be used for the given type identifiers.
-     */
-    public boolean isUsedForTypeIdentifiers(@Nonnull final List<String> typeIdentifiers) {
-        return AttributeSpecUtils.isUsedForTypeIdentifiers(
-                typeIdentifiers, this.spec.getEnabledByList(), this.spec.getDisabledByList());
-    }
-
-    /**
-     * A TagSpec may specify other tags to be required as well, when that
-     * tag is used. This accessor returns the IDs for the tagspecs that
-     * are also required if |this| tag occurs in the document, but where
-     * such requirement is currently only a warning.
-     * @return returns a list of requires tag warning list.
-     */
-    public List<String> getAlsoRequiresTagWarning() {
-        return this.spec.getAlsoRequiresTagWarningList();
-    }
-
-    /**
-     * A TagSpec may specify generic conditions which are required if the
-     * tag is present. This accessor returns the list of those conditions.
-     * @return returns requires list.
-     */
-    public List<String> requires() {
-        return this.spec.getRequiresList();
-    }
-
-    /**
-     * A TagSpec may specify that another tag is excluded. This accessor returns
-     * the list of those tags.
-     * @return returns excludes list.
-     */
-    public List<String> excludes() {
-        return this.spec.getExcludesList();
-    }
-
-    /**
-     * Returns true if this tagSpec contains a value_url field.
-     * @return returns true if this tagSpec contains a value_url field.
-     */
-    public boolean containsUrl() {
-        return this.containsUrl;
-    }
-
-    /**
-     * Whether or not the tag should be recorded via
-     * Context.recordTagspecValidated_ if it was validated
-     * successfully. For performance, this is only done for tags that are
-     * mandatory, unique, or possibly required by some other tag.
-     * @return returns a record validated enumeration whether or not the tag should be recorded.
-     */
-    public RecordValidated shouldRecordTagspecValidated() {
-        return this.shouldRecordTagspecValidated;
-    }
-
-    /**
-     * Returns a boolean whether the this tagSpec has reference point.
-     *
-     * @return returns a boolean whether the this tagSpec has reference point.
-     */
-    public boolean isReferencePoint() {
-        return this.isReferencePoint;
-    }
-
-    /**
-     * Return true if reference points not empty. Else return false.
-     * @return Returns true if reference points not empty. Else return false.
-     */
-    public boolean hasReferencePoints() {
-        return !this.referencePoints.empty();
-    }
-
-    /** @return returns ParsedReferencePoints object. */
-    public ParsedReferencePoints getReferencePoints() {
-        return this.referencePoints;
-    }
-
-    /** @return returns if this tagSpec can satisfy extension. */
-    public boolean attrsCanSatisfyExtension() {
-        return this.attrsCanSatisfyExtension;
-    }
-
-    /**
-     * Returns if attrsByName contains the mapping keyed name.
-     * @param name attribute name.
-     * @return returns if attrsByName contains the mapping keyed name.
-     */
-    public boolean hasAttrWithName(@Nonnull final String name) {
-        return attrsByName.containsKey(name);
-    }
-
-    /**
-     * Returns the implicit attr specs.
-     * @return returns the implicit attr specs.
-     */
-    public List<ValidatorProtos.AttrSpec> getImplicitAttrspecs() {
-        return this.implicitAttrspecs;
-    }
-
-    /**
-     * Returns the map of attrs by name.
-     * @return returns the map of attrs by name.
-     */
-    public Map<String, ValidatorProtos.AttrSpec> getAttrsByName() {
-        return this.attrsByName;
-    }
-
-    /**
-     * Returns the set of mandatoryOneofs.
-     * @return returns the set of mandatoryOneofs.
-     */
-    public Set<String> getMandatoryOneofs() {
-        return this.mandatoryOneofs;
-    }
-
-    /**
-     * Returns the set of mandatoryAnyofs.
-     * @return returns the set of mandatoryAnyofs.
-     */
-    public Set<String> getMandatoryAnyofs() {
-        return this.mandatoryAnyofs;
-    }
-
-    /**
-     * Returns the set of mandatoryAttrs.
-     * @return returns the set of mandatoryAttrs.
-     */
-    public Set<ValidatorProtos.AttrSpec> getMandatoryAttrIds() {
-        return this.mandatoryAttrs;
-    }
-
-    /**
-     * Merges the list of attrs into attrsByName, avoiding to merge in attrs
-     * with names that are already in attrsByName.
-     * @param attrs the list of attr specs.
-     * @param parsedAttrSpecs the ParsedAttrSpec object.
-     */
-    private void mergeAttrs(final List<ValidatorProtos.AttrSpec> attrs, final ParsedAttrSpecs parsedAttrSpecs) {
-        for (ValidatorProtos.AttrSpec attrSpec : attrs) {
-            final String name = attrSpec.getName();
-            if (attrsByName.containsKey(name)) {
-                continue;
-            }
-
-            attrsByName.put(name, attrSpec);
-            if (attrSpec.getName() != null
-                    && attrSpec.getAllFields().size() == 1) { // negative attr ids are simple attrs (only name set).
-                continue;
-            }
-
-            if (attrSpec.getValueCaseiCount() > 0) {
-                for (final String valueCasei : attrSpec.getValueCaseiList()) {
-                    populateAttrSpec(name, valueCasei, parsedAttrSpecs, attrSpec);
-                }
-            } else {
-                populateAttrSpec(name, "", parsedAttrSpecs, attrSpec);
-            }
-        }
-    }
-
-    /**
-     * Returns the parsed tag spec id.
-     * @return tag spec id.
-     */
-    public int id() {
-        return this.id;
-    }
-
-    /**
-     * Clean up reference, improve gc performance.
-     */
-    public void cleanup() {
-        this.spec = null;
-        this.referencePoints = null;
-        this.attrsByName = null;
-        this.mandatoryAttrs = null;
-        this.mandatoryOneofs = null;
-        this.mandatoryAnyofs = null;
-        this.implicitAttrspecs = null;
-    }
-
-    private void populateAttrSpec(@Nonnull final String name, @Nonnull final String value,
-                                  @Nonnull final ParsedAttrSpecs parsedAttrSpecs,
-                                  @Nonnull final ValidatorProtos.AttrSpec attrSpec) {
-        final ParsedAttrSpec attr = parsedAttrSpecs.getParsedAttrSpec(name, value, attrSpec);
-        if (attr != null) {
-            final ValidatorProtos.AttrSpec spec = attr.getSpec();
-            if (spec.hasMandatory()) {
-                this.mandatoryAttrs.add(spec);
-            }
-            if (spec.hasMandatoryOneof()) {
-                this.mandatoryOneofs.add(spec.getMandatoryOneof());
-            }
-            if (spec.hasMandatoryAnyof()) {
-                this.mandatoryAnyofs.add(spec.getMandatoryAnyof());
-            }
-
-            ProtocolStringList protocolStringList = spec.getAlternativeNamesList();
-            for (final String altName : protocolStringList) {
-                this.attrsByName.put(altName, attrSpec);
-            }
-            if (spec.hasImplicit()) {
-                this.implicitAttrspecs.add(attrSpec);
-            }
-            if (spec.getName().equals("type") && spec.getValueCaseiList().size() > 0) {
-                for (final String v : spec.getValueCaseiList()) {
-                    if ("application/json".equals(v)) {
-                        this.isTypeJson = true;
-                        break;
-                    }
-                }
-            }
-            if (spec.hasValueUrl()) {
-                this.containsUrl = true;
-            }
-            if (spec.getRequiresExtensionList().size() > 0) {
-                this.attrsCanSatisfyExtension = true;
-            }
-        }
-    }
-
-    /**
-     * The TagSpec.
-     */
-    private ValidatorProtos.TagSpec spec;
-
-    /**
-     * A unique tag id.
-     */
-    private int id;
-
-    /**
-     * The ParsedReferencePoints.
-     */
-    private ParsedReferencePoints referencePoints;
-
-    /**
-     * Reference point flag.
-     */
-    private boolean isReferencePoint;
-
-    /**
-     * Type json flag.
-     */
-    private boolean isTypeJson;
-
-    /**
-     * Should record tags validated.
-     */
-    private RecordValidated shouldRecordTagspecValidated;
-
-    /**
-     * A flag to indicate if attrs can satisfy extension.
-     */
-    private boolean attrsCanSatisfyExtension;
-
-    /**
-     * ParsedAttributes keyed by name.
-     */
-    private Map<String, ValidatorProtos.AttrSpec> attrsByName;
-
-    /**
-     * Attributes that are mandatory for this tag to legally validate.
-     */
-    private Set<ValidatorProtos.AttrSpec> mandatoryAttrs;
-
-    /**
-     * A list of mandatory one ofs.
-     */
-    private Set<String> mandatoryOneofs;
-
-    /**
-     * A list of mandatory any ofs.
-     */
-    private Set<String> mandatoryAnyofs;
-
-    /**
-     * A list of implicit attr specs.
-     */
-    private List<ValidatorProtos.AttrSpec> implicitAttrspecs;
-
-    /**
-     * Flag to indicate whether it contains an url.
-     */
-    private boolean containsUrl;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ParsedUrlSpec.java b/validator/java/src/main/java/dev/amp/validator/ParsedUrlSpec.java
deleted file mode 100644
index 33884577d8dcc..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ParsedUrlSpec.java
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import javax.annotation.Nonnull;
-import java.util.HashSet;
-import java.util.Set;
-
-/**
- * ParsedUrlSpec is used for both ParsedAttrSpec and ParsedCdataSpec, to
- * check URLs.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ParsedUrlSpec {
-    /**
-     * Constructor.
-     *
-     * @param urlSpec the UrlSpec.
-     */
-    public ParsedUrlSpec(@Nonnull final ValidatorProtos.UrlSpec urlSpec) {
-        this.spec = urlSpec;
-        this.allowedProtocols = new HashSet<>();
-        if (this.spec != null) {
-            for (final String protocol : spec.getProtocolList()) {
-                allowedProtocols.add(protocol);
-            }
-        }
-    }
-
-    /**
-     * Returns the UrlSpec.
-     *
-     * @return returns the UrlSpec.
-     */
-    public ValidatorProtos.UrlSpec getSpec() {
-        return this.spec;
-    }
-
-    /**
-     * Returns true if the protocol is found.
-     *
-     * @param protocol the allowed protocol.
-     * @return returns true if the protocol is found.
-     */
-    public boolean isAllowedProtocol(final String protocol) {
-        return allowedProtocols.contains(protocol);
-    }
-
-    /**
-     * Clean up reference, improve gc performance.
-     */
-    public void cleanup() {
-        this.allowedProtocols = null;
-    }
-
-    /**
-     * The UrlSpec.
-     */
-    @Nonnull
-    private ValidatorProtos.UrlSpec spec;
-
-    /**
-     * A set of allowed protocols.
-     */
-    @Nonnull
-    private Set<String> allowedProtocols;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ParsedValidatorRules.java b/validator/java/src/main/java/dev/amp/validator/ParsedValidatorRules.java
deleted file mode 100644
index 82a4b489110af..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ParsedValidatorRules.java
+++ /dev/null
@@ -1,1039 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.css.ParsedDocCssSpec;
-import dev.amp.validator.exception.TagValidationException;
-import dev.amp.validator.exception.ValidatorException;
-import dev.amp.validator.utils.AttributeSpecUtils;
-import dev.amp.validator.utils.DispatchKeyUtils;
-import dev.amp.validator.utils.TagSpecUtils;
-import org.xml.sax.Attributes;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.Set;
-import java.util.regex.Matcher;
-import java.util.regex.Pattern;
-
-/**
- * This wrapper class provides access to the validation rules.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ParsedValidatorRules {
-    /**
-     * Constructor.
-     *
-     * @param htmlFormat          the HTML format.
-     * @param ampValidatorManager the AMPValidatorManager instance.
-     */
-    public ParsedValidatorRules(@Nonnull final ValidatorProtos.HtmlFormat.Code htmlFormat,
-                                @Nonnull final AMPValidatorManager ampValidatorManager) {
-        this.ampValidatorManager = ampValidatorManager;
-
-        this.htmlFormat = htmlFormat;
-        this.parsedTagSpecById = new HashMap<>();
-        this.tagSpecByTagName = new HashMap<>();
-        this.mandatoryTagSpecs = new ArrayList<>();
-        this.fullMatchRegexes = new HashMap<>();
-        this.fullMatchCaseiRegexes = new HashMap<>();
-        this.partialMatchCaseiRegexes = new HashMap<>();
-
-        this.typeIdentifiers = new HashMap<>();
-        typeIdentifiers.put("\u26a1", 0);
-        typeIdentifiers.put("\u26a1\ufe0f", 0);
-        typeIdentifiers.put("amp", 0);
-        typeIdentifiers.put("\u26a14ads", 0);
-        typeIdentifiers.put("\u26a1\ufe0f4ads", 0);
-        typeIdentifiers.put("amp4ads", 0);
-        typeIdentifiers.put("\u26a14email", 0);
-        typeIdentifiers.put("\u26a1\ufe0f4email", 0);
-        typeIdentifiers.put("amp4email", 0);
-        typeIdentifiers.put("actions", 0);
-        typeIdentifiers.put("transformed", 0);
-        typeIdentifiers.put("data-ampdevmode", 0);
-
-        expandExtensionSpec();
-
-        this.parsedAttrSpecs = new ParsedAttrSpecs(ampValidatorManager);
-
-        this.parsedCss = new ArrayList<>();
-        for (final ValidatorProtos.DocCssSpec cssSpec : this.ampValidatorManager.getRules().getCssList()) {
-            this.parsedCss.add(
-                    new ParsedDocCssSpec(cssSpec, this.ampValidatorManager.getRules().getDeclarationListList()));
-        }
-
-        this.tagSpecIdsToTrack = new HashMap<>();
-        final int numTags = this.ampValidatorManager.getRules().getTagsList().size();
-        for (int tagSpecId = 0; tagSpecId < numTags; ++tagSpecId) {
-            final ValidatorProtos.TagSpec tag = this.ampValidatorManager.getRules().getTags(tagSpecId);
-            if (!this.isTagSpecCorrectHtmlFormat(tag)) {
-                continue;
-            }
-
-            if (tag.hasSpecName()) {
-                tagSpecNameToSpecId.put(tag.getSpecName(), tagSpecId);
-            }
-
-            if (tag.getAlsoRequiresTagWarningList().size() > 0) {
-                this.tagSpecIdsToTrack.put(tagSpecId, true);
-            }
-
-            for (String otherTag : tag.getAlsoRequiresTagWarningList()) {
-                this.tagSpecIdsToTrack.put(otherTag, true);
-            }
-
-            if (!tag.getTagName().equals("$REFERENCE_POINT")) {
-                if (!(tagSpecByTagName.containsKey(tag.getTagName()))) {
-                    this.tagSpecByTagName.put(tag.getTagName(), new TagSpecDispatch());
-                }
-
-                final TagSpecDispatch tagnameDispatch = this.tagSpecByTagName.get(tag.getTagName());
-                if (tag.hasExtensionSpec()) {
-                    // This tag is an extension. Compute and register a dispatch key
-                    // for it.
-                    String dispatchKey = DispatchKeyUtils.makeDispatchKey(
-                            ValidatorProtos.AttrSpec.DispatchKeyType.NAME_VALUE_DISPATCH,
-                            AttributeSpecUtils.getExtensionNameAttribute(tag.getExtensionSpec()),
-                            tag.getExtensionSpec().getName(), "");
-                    tagnameDispatch.registerDispatchKey(dispatchKey, tagSpecId);
-                } else {
-                    String dispatchKey = this.ampValidatorManager.getDispatchKeyByTagSpecId(tagSpecId);
-                    if (dispatchKey == null) {
-                        tagnameDispatch.registerTagSpec(tagSpecId);
-                    } else {
-                        tagnameDispatch.registerDispatchKey(dispatchKey, tagSpecId);
-                    }
-                }
-            }
-
-            if (tag.hasMandatory()) {
-                this.mandatoryTagSpecs.add(tagSpecId);
-            }
-        }
-
-        this.errorCodes = new HashMap<>();
-        for (int i = 0; i < this.ampValidatorManager.getRules().getErrorFormatsList().size(); ++i) {
-            final ValidatorProtos.ErrorFormat errorFormat =
-                    this.ampValidatorManager.getRules().getErrorFormats(i);
-            if (errorFormat != null) {
-                ErrorCodeMetadata errorCodeMetadata = new ErrorCodeMetadata();
-                errorCodeMetadata.setFormat(errorFormat.getFormat());
-                errorCodes.put(errorFormat.getCode(), errorCodeMetadata);
-            }
-        }
-
-        for (int i = 0; i < this.ampValidatorManager.getRules().getErrorSpecificityList().size(); ++i) {
-            final ValidatorProtos.ErrorSpecificity errorSpecificity =
-                    this.ampValidatorManager.getRules().getErrorSpecificity(i);
-            if (errorSpecificity != null) {
-                ErrorCodeMetadata errorCodeMetadata = errorCodes.get(errorSpecificity.getCode());
-                if (errorCodeMetadata != null) {
-                    errorCodeMetadata.setSpecificity(errorSpecificity.getSpecificity());
-                }
-            }
-        }
-    }
-
-    /**
-     * TODO - verify ALL regex getXXX() to ensure proper implementation
-     *
-     * @param regex the regex.
-     * @return returns the full match regex pattern.
-     */
-    public Pattern getFullMatchRegex(@Nonnull final String regex) {
-        String regexEscape = regex.replace("{", "\\{");
-
-        for (String fullMatchRegex : fullMatchRegexes.keySet()) {
-            if (fullMatchRegex.equals(regex)) {
-                return fullMatchRegexes.get(regexEscape);
-            }
-        }
-        String fullMatchRegex = "^(" + regexEscape + ")$";
-        Pattern pattern = Pattern.compile(fullMatchRegex);
-        fullMatchRegexes.put(regexEscape, pattern);
-
-        return pattern;
-    }
-
-    /**
-     * @param caseiRegex case insensitive regex.
-     * @return returns the full match case insensitive regex pattern.
-     */
-    public Pattern getFullMatchCaseiRegex(@Nonnull final String caseiRegex) {
-        String caseiRegexEscape = caseiRegex.replace("{", "\\{");
-
-        for (String fullMatchRegex : fullMatchCaseiRegexes.keySet()) {
-            if (fullMatchRegex.equals(caseiRegexEscape)) {
-                return fullMatchCaseiRegexes.get(caseiRegexEscape);
-            }
-        }
-
-        Pattern pattern = Pattern.compile("^(" + caseiRegexEscape + ")$");
-        this.fullMatchCaseiRegexes.put(caseiRegexEscape, pattern);
-        return pattern;
-    }
-
-    /**
-     * Returns the partial match case insensitive match regex pattern.
-     *
-     * @param caseiRegex the regex.
-     * @return returns the partial match case insensitive match regex pattern.
-     */
-    public Pattern getPartialMatchCaseiRegex(@Nonnull final String caseiRegex) {
-        final String caseiRegexEscape = caseiRegex.replace("{", "\\{");
-
-        for (String fullMatchRegex : partialMatchCaseiRegexes.keySet()) {
-            if (fullMatchRegex.equals(caseiRegexEscape)) {
-                return partialMatchCaseiRegexes.get(caseiRegexEscape);
-            }
-        }
-
-        Pattern pattern = Pattern.compile(caseiRegexEscape);
-        partialMatchCaseiRegexes.put(caseiRegexEscape, pattern);
-
-        return pattern;
-    }
-
-    /**
-     * Computes the name for a given reference point.
-     * Used in generating error strings.
-     *
-     * @param referencePoint the reference point.
-     * @return returns the compute name for a given reference point.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public String getReferencePointName(@Nonnull final ValidatorProtos.ReferencePoint referencePoint)
-            throws TagValidationException {
-        // tagSpecName here is actually a number, which was replaced in
-        // validator_gen_js.py from the name string, so this works.
-        final int tagSpecId =
-                ampValidatorManager.getTagSpecIdByReferencePointTagSpecName(referencePoint.getTagSpecName());
-        final ParsedTagSpec refPointSpec = this.getByTagSpecId(tagSpecId);
-        return TagSpecUtils.getTagSpecName(refPointSpec.getSpec());
-    }
-
-    /**
-     * Return the ParsedTagSpec given the reference point spec name.
-     *
-     * @param specName the spec name.
-     * @return return the ParsedTagSpec given the reference point spec name.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public ParsedTagSpec getByTagSpecId(final String specName) throws TagValidationException {
-        int tagSpecId = this.ampValidatorManager.getTagSpecIdByReferencePointTagSpecName(specName);
-        return getByTagSpecId(tagSpecId);
-    }
-
-    /**
-     * Returns the spec id by spec name.
-     *
-     * @param specName the spec name.
-     * @return returns the spec id if exists.
-     */
-    public Integer getTagSpecIdBySpecName(@Nonnull final String specName) {
-        return tagSpecNameToSpecId.get(specName);
-    }
-
-    /**
-     * Returns the ParsedTagSpec given the tag spec id.
-     *
-     * @param id tag spec id.
-     * @return returns the ParsedTagSpec.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public ParsedTagSpec getByTagSpecId(final int id) throws TagValidationException {
-        ParsedTagSpec parsed = this.parsedTagSpecById.get(id);
-        if (parsed != null) {
-            return parsed;
-        }
-
-        ValidatorProtos.TagSpec tag = this.ampValidatorManager.getRules().getTags(id);
-        if (tag == null) {
-            throw new TagValidationException("TagSpec is null for tag spec id " + id);
-        }
-
-        parsed = new ParsedTagSpec(
-                this.parsedAttrSpecs,
-                TagSpecUtils.shouldRecordTagspecValidated(tag, id, this.tagSpecIdsToTrack), tag,
-                id);
-        this.parsedTagSpecById.put(id, parsed);
-        return parsed;
-    }
-
-    /**
-     * Returns the tag spec id by reference point tag spec name.
-     *
-     * @param tagName the reference point tag name.
-     * @return returns the tag spec id by reference point tag spec name.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public int getTagSpecIdByReferencePointTagSpecName(@Nonnull final String tagName) throws TagValidationException {
-        return this.ampValidatorManager.getTagSpecIdByReferencePointTagSpecName(tagName);
-    }
-
-    /**
-     * Returns true iff resultA is a better result than resultB.
-     *
-     * @param resultA a validation result.
-     * @param resultB a validation result.
-     * @return returns true iff resultA is a better result than resultB.
-     * @throws ValidatorException the ValidatorException.
-     */
-    public boolean betterValidationResultThan(@Nonnull final ValidatorProtos.ValidationResult.Builder resultA,
-                                              @Nonnull final ValidatorProtos.ValidationResult.Builder resultB)
-            throws ValidatorException {
-        if (resultA.getStatus() != resultB.getStatus()) {
-            return this.betterValidationStatusThan(resultA.getStatus(), resultB.getStatus());
-        }
-
-        // If one of the error sets by error.code is a subset of the other
-        // error set's error.codes, use the subset one. It's essentially saying, if
-        // you fix these errors that we both complain about, then you'd be passing
-        // for my tagspec, but not the other one, regardless of specificity.
-        if (this.isErrorSubset(resultB.getErrorsList(), resultA.getErrorsList())) {
-            return true;
-        }
-
-        if (this.isErrorSubset(resultA.getErrorsList(), resultB.getErrorsList())) {
-            return false;
-        }
-
-        // Prefer the most specific error found in either set.
-        if (this.maxSpecificity(resultA.getErrorsList())
-                > this.maxSpecificity(resultB.getErrorsList())) {
-            return true;
-        }
-        if (this.maxSpecificity(resultB.getErrorsList())
-                > this.maxSpecificity(resultA.getErrorsList())) {
-            return false;
-        }
-
-        // Prefer the attempt with the fewest errors if the most specific errors
-        // are the same.
-        if (resultA.getErrorsCount() < resultB.getErrorsCount()) {
-            return true;
-        }
-        if (resultB.getErrorsCount() < resultA.getErrorsCount()) {
-            return false;
-        }
-
-        // Equal, so not better than.
-        return false;
-    }
-
-    /**
-     * Checks if maybeTypeIdentifier is contained in rules' typeIdentifiers.
-     *
-     * @param maybeTypeIdentifier identifier to check
-     * @return true iff maybeTypeIdentifier is in typeIdentifiers.
-     */
-    public boolean isTypeIdentifier(@Nonnull final String maybeTypeIdentifier) {
-        return this.typeIdentifiers.containsKey(maybeTypeIdentifier);
-    }
-
-    /**
-     * Validates type identifiers within a set of attributes, adding
-     * ValidationErrors as necessary, and sets type identifiers on
-     * ValidationResult.typeIdentifier.
-     *
-     * @param attrs             sax Attributes object from tag.
-     * @param formatIdentifiers html formats
-     * @param context           global context of document validation
-     * @param validationResult  status of document validation
-     */
-    public void validateTypeIdentifiers(@Nonnull final Attributes attrs,
-                                        @Nonnull final List<String> formatIdentifiers, @Nonnull final Context context,
-                                        @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) {
-        boolean hasMandatoryTypeIdentifier = false;
-        for (int i = 0; i < attrs.getLength(); i++) {
-            // Verify this attribute is a type identifier. Other attributes are
-            // validated in validateAttributes.
-            if (this.isTypeIdentifier(attrs.getLocalName(i))) {
-                // Verify this type identifier is allowed for this format.
-                if (formatIdentifiers.contains(attrs.getLocalName(i))) {
-                    // Only add the type identifier once per representation. That is, both
-                    // "⚡" and "amp", which represent the same type identifier.
-                    final String typeIdentifier = attrs.getLocalName(i).replace("\u26a1\ufe0f", "amp")
-                            .replace("\u26a1", "amp");
-                    if (!validationResult.getTypeIdentifierList().contains(typeIdentifier)) {
-                        validationResult.addTypeIdentifier(typeIdentifier);
-                        context.recordTypeIdentifier(typeIdentifier);
-                    }
-                    // The type identifier "actions" and "transformed" are not considered
-                    // mandatory unlike other type identifiers.
-                    if (!typeIdentifier.equals("actions")
-                            && !typeIdentifier.equals("transformed")
-                            && !typeIdentifier.equals("data-ampdevmode")) {
-                        hasMandatoryTypeIdentifier = true;
-                    }
-                    // The type identifier "transformed" has restrictions on it's value.
-                    // It must be \w+;v=\d+ (e.g. google;v=1).
-                    if ((typeIdentifier.equals("transformed") && !(attrs.getValue(i).equals("")))) {
-                        Matcher reResult = TRANSFORMED_VALUE_REGEX.matcher(attrs.getValue(i));
-                        if (reResult.matches()) {
-                            validationResult.setTransformerVersion(Integer.parseInt(reResult.group(1)));
-                        } else {
-                            final List<String> params = new ArrayList<>();
-                            params.add(attrs.getLocalName(i));
-                            params.add("html");
-                            params.add(attrs.getValue(i));
-                            context.addError(
-                                    ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE,
-                                    context.getLineCol(),
-                                    /*params=*/params,
-                                    "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup",
-                                    validationResult);
-                        }
-                    }
-                    if (typeIdentifier.equals("data-ampdevmode")) {
-                        // https://github.com/ampproject/amphtml/issues/20974
-                        // We always emit an error for this type identifier, but it
-                        // suppresses other errors later in the document.
-                        context.addError(
-                                ValidatorProtos.ValidationError.Code.DEV_MODE_ONLY,
-                                context.getLineCol(), /*params=*/new ArrayList<>(), /*url*/ "",
-                                validationResult);
-                    }
-                } else {
-                    final List<String> params = new ArrayList<>();
-                    params.add(attrs.getLocalName(i));
-                    params.add("html");
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR,
-                            context.getLineCol(), /*params=*/params,
-                            "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup",
-                            validationResult);
-                }
-            }
-        }
-        if (!hasMandatoryTypeIdentifier) {
-            // Missing mandatory type identifier (any AMP variant but "actions" or
-            // "transformed").
-            final List<String> params = new ArrayList<>();
-            params.add(formatIdentifiers.get(0));
-            params.add("html");
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.MANDATORY_ATTR_MISSING,
-                    context.getLineCol(), /*params=*/params,
-                    "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup",
-                    validationResult);
-        }
-    }
-
-    /**
-     * Validates the HTML tag for type identifiers.
-     *
-     * @param htmlTag          the html tag to validate.
-     * @param context          global context of document validation
-     * @param validationResult status of document validation
-     */
-    public void validateHtmlTag(@Nonnull final ParsedHtmlTag htmlTag,
-                                @Nonnull final Context context,
-                                @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) {
-        switch (this.htmlFormat) {
-            case AMP:
-                this.validateTypeIdentifiers(
-                        htmlTag.attrs(), TagSpecUtils.AMP_IDENTIFIERS, context, validationResult);
-                break;
-            case AMP4ADS:
-                this.validateTypeIdentifiers(
-                        htmlTag.attrs(), TagSpecUtils.AMP4ADS_IDENTIFIERS, context, validationResult);
-                break;
-            case AMP4EMAIL:
-                this.validateTypeIdentifiers(
-                        htmlTag.attrs(), TagSpecUtils.AMP4EMAIL_IDENTIFIERS, context, validationResult);
-                break;
-            case ACTIONS:
-                this.validateTypeIdentifiers(
-                        htmlTag.attrs(), TagSpecUtils.ACTIONS_IDENTIFIERS, context, validationResult);
-
-                if (!validationResult.getTypeIdentifierList().contains("actions")) {
-                    final List<String> params = new ArrayList<>();
-                    params.add("actions");
-                    params.add("html");
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.MANDATORY_ATTR_MISSING,
-                            context.getLineCol(), /* params */params,
-                            /* url */"", validationResult);
-                }
-                break;
-            default:
-                // fallthrough
-        }
-    }
-
-    /**
-     * Returns the error code specificity.
-     *
-     * @param errorCode the validation error code.
-     * @return returns the error code specificity.
-     */
-    public int specificity(@Nonnull final ValidatorProtos.ValidationError.Code errorCode) {
-        return this.errorCodes.get(errorCode).getSpecificity();
-    }
-
-    /**
-     * A helper function which allows us to compare two candidate results
-     * in validateTag to report the results which have the most specific errors.
-     *
-     * @param errors a list of validation errors.
-     * @return returns maximum value of specificity found in all errors.
-     * @throws ValidatorException the TagValidationException.
-     */
-    public int maxSpecificity(@Nonnull final List<ValidatorProtos.ValidationError> errors) throws ValidatorException {
-        int max = 0;
-        for (final ValidatorProtos.ValidationError error : errors) {
-            if (error.getCode() == null) {
-                throw new ValidatorException("Validation error code is null");
-            }
-            max = Math.max(this.specificity(error.getCode()), max);
-        }
-        return max;
-    }
-
-    /**
-     * Returns true iff the error codes in errorsB are a subset of the error
-     * codes in errorsA.
-     *
-     * @param errorsA a list of validation errors.
-     * @param errorsB a list of validation errors.
-     * @return returns true iff the error codes in errorsB are a subset of the error
-     * codes in errorsA.
-     */
-    public boolean isErrorSubset(@Nonnull final List<ValidatorProtos.ValidationError> errorsA,
-                                 @Nonnull final List<ValidatorProtos.ValidationError> errorsB) {
-        Map<ValidatorProtos.ValidationError.Code, Integer> codesA = new HashMap<>();
-        for (final ValidatorProtos.ValidationError error : errorsA) {
-            codesA.put(error.getCode(), 1);
-        }
-
-        Map<ValidatorProtos.ValidationError.Code, Integer> codesB = new HashMap<>();
-        for (final ValidatorProtos.ValidationError error : errorsB) {
-            codesB.put(error.getCode(), 1);
-            if (!codesA.containsKey(error.getCode())) {
-                return false;
-            }
-        }
-
-        // Every code in B is also in A. If they are the same, not a subset.
-        return codesA.size() > codesB.size();
-    }
-
-    /**
-     * Returns true iff statusA is a better status than statusB.
-     *
-     * @param statusA validation result status.
-     * @param statusB validation result status.
-     * @return returns true iff statusA is a better status than statusB.
-     * @throws ValidatorException the ValidatorException.
-     */
-    public boolean betterValidationStatusThan(@Nonnull final ValidatorProtos.ValidationResult.Status statusA,
-                                              @Nonnull final ValidatorProtos.ValidationResult.Status statusB)
-            throws ValidatorException {
-        // Equal, so not better than.
-        if (statusA == statusB) {
-            return false;
-        }
-
-        // PASS > FAIL > UNKNOWN
-        if (statusA == ValidatorProtos.ValidationResult.Status.PASS) {
-            return true;
-        }
-
-        if (statusB == ValidatorProtos.ValidationResult.Status.PASS) {
-            return false;
-        }
-
-        if (statusA == ValidatorProtos.ValidationResult.Status.FAIL) {
-            return true;
-        }
-
-        if (statusA == ValidatorProtos.ValidationResult.Status.UNKNOWN) {
-            throw new ValidatorException("Status unknown");
-        }
-
-        return false;
-    }
-
-    /**
-     * Returns a TagSpecDispatch for a give tag name.
-     *
-     * @param tagName the tag name.
-     * @return returns a TagSpecDispatch if found.
-     */
-    public TagSpecDispatch dispatchForTagName(@Nonnull final String tagName) {
-        return this.tagSpecByTagName.get(tagName);
-    }
-
-    /**
-     * Returns a styles spec url.
-     *
-     * @return returns a styles spec url.
-     */
-    public String getStylesSpecUrl() {
-        return this.ampValidatorManager.getRules().getStylesSpecUrl();
-    }
-
-    /**
-     * Returns a template spec url.
-     *
-     * @return returns a template spec url.
-     */
-    public String getTemplateSpecUrl() {
-        return this.ampValidatorManager.getRules().getTemplateSpecUrl();
-    }
-
-    /**
-     * Returns the script spec url.
-     *
-     * @return returns the script spec url.
-     */
-    public String getScriptSpecUrl() {
-        return this.ampValidatorManager.getRules().getScriptSpecUrl();
-    }
-
-    /**
-     * Returns the list of Css length spec.
-     *
-     * @return returns the list of Css length spec.
-     */
-    public List<ParsedDocCssSpec> getCss() {
-        return this.parsedCss;
-    }
-
-    /**
-     * Returns the descendant tag lists.
-     *
-     * @return returns the descendant tag lists.
-     */
-    public List<ValidatorProtos.DescendantTagList> getDescendantTagLists() {
-        return ampValidatorManager.getDescendantTagLists();
-    }
-
-    /**
-     * Returns a combined black listed regex.
-     *
-     * @param tagSpecId tag spec id.
-     * @return returns a combined black listed regex.
-     */
-    public String getCombinedBlacklistedCdataRegex(final int tagSpecId) {
-        return ampValidatorManager.getCombinedBlacklistedCdataRegex(tagSpecId);
-    }
-
-    /**
-     * Emits any validation errors which require a global view
-     * (mandatory tags, tags required by other tags, mandatory alternatives).
-     *
-     * @param context          the Context.
-     * @param validationResult the ValidationResult.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void maybeEmitGlobalTagValidationErrors(@Nonnull final Context context,
-                                                   @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult)
-            throws TagValidationException {
-        this.maybeEmitMandatoryTagValidationErrors(context, validationResult);
-        this.maybeEmitAlsoRequiresTagValidationErrors(context, validationResult);
-        this.maybeEmitMandatoryAlternativesSatisfiedErrors(
-                context, validationResult);
-        this.maybeEmitCssLengthSpecErrors(context, validationResult);
-        this.maybeEmitValueSetMismatchErrors(context, validationResult);
-    }
-
-    /**
-     * Emits errors when there is a ValueSetRequirement with no matching
-     * ValueSetProvision in the document.
-     *
-     * @param context          the Context.
-     * @param validationResult the ValidationResult.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void maybeEmitValueSetMismatchErrors(@Nonnull final Context context,
-                                                @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult)
-            throws TagValidationException {
-        final Set<String> providedKeys = context.valueSetsProvided();
-        for (final String requiredKey : context.valueSetsRequired().keySet()) {
-            if (!providedKeys.contains(requiredKey)) {
-                context.valueSetsRequired().get(requiredKey);
-                for (final ValidatorProtos.ValidationError error : context.valueSetsRequired().get(requiredKey)) {
-                    context.addBuiltError(error, validationResult);
-                }
-            }
-        }
-    }
-
-    /**
-     * Emits errors for css size limitations across entire document.
-     *
-     * @param context          the Context.
-     * @param validationResult the ValidationResult.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void maybeEmitCssLengthSpecErrors(@Nonnull final Context context,
-                                             @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult)
-            throws TagValidationException {
-        // Only emit an error if there have been inline styles used. Otherwise
-        // if there was to be an error it would have been caught by
-        // CdataMatcher::Match().
-        if (context.getInlineStyleByteSize() == 0) {
-            return;
-        }
-
-        final int bytesUsed =
-                context.getInlineStyleByteSize() + context.getStyleTagByteSize();
-        final ParsedDocCssSpec parsedCssSpec = context.matchingDocCssSpec();
-        if (parsedCssSpec != null) {
-            final ValidatorProtos.DocCssSpec cssSpec = parsedCssSpec.getSpec();
-            if (cssSpec.getMaxBytes() != MIN_BYTES && bytesUsed > cssSpec.getMaxBytes()) {
-                final List<String> params = new ArrayList<>();
-                params.add(String.valueOf(bytesUsed));
-                params.add(String.valueOf(cssSpec.getMaxBytes()));
-                if (cssSpec.hasMaxBytesIsWarning()) {
-                    context.addWarning(
-                            ValidatorProtos.ValidationError.Code.STYLESHEET_AND_INLINE_STYLE_TOO_LONG,
-                            context.getLineCol(),
-                            params,
-                            cssSpec.getMaxBytesSpecUrl(),
-                            validationResult);
-                } else {
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.STYLESHEET_AND_INLINE_STYLE_TOO_LONG,
-                            context.getLineCol(),
-                            params,
-                            cssSpec.getMaxBytesSpecUrl(),
-                            validationResult);
-                }
-            }
-        }
-    }
-
-    /**
-     * Emits errors for tags that are specified as mandatory alternatives.
-     * Returns false iff context.Progress(result).complete.
-     *
-     * @param context          the Context.
-     * @param validationResult the ValidationResult.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void maybeEmitMandatoryAlternativesSatisfiedErrors(@Nonnull final Context context,
-                                                              @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult)
-            throws TagValidationException {
-        final List<String> satisfied = context.getMandatoryAlternativesSatisfied();
-        /** @type {!Array<string>} */
-        final List<String> missing = new ArrayList<>();
-        Map<String, String> specUrlsByMissing = new HashMap<>();
-        for (final ValidatorProtos.TagSpec tagSpec : this.ampValidatorManager.getRules().getTagsList()) {
-            if (!tagSpec.hasMandatoryAlternatives() || !this.isTagSpecCorrectHtmlFormat(tagSpec)) {
-                continue;
-            }
-            final String alternative = tagSpec.getMandatoryAlternatives();
-            if (satisfied.indexOf(alternative) == -1) {
-                if (!missing.contains(alternative)) {
-                    missing.add(alternative);
-                    specUrlsByMissing.put(alternative, TagSpecUtils.getTagSpecUrl(tagSpec));
-                }
-            }
-        }
-        //sortAndUniquify(missing);
-        for (final String tagMissing : missing) {
-            final List<String> params = new ArrayList<>();
-            params.add(tagMissing);
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING,
-                    context.getLineCol(),
-                    params,
-                    /* specUrl */ specUrlsByMissing.get(tagMissing),
-                    validationResult);
-        }
-    }
-
-    /**
-     * Emits errors for tags that are specified to be mandatory.
-     *
-     * @param context          the Context.
-     * @param validationResult the ValidationResult.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void maybeEmitMandatoryTagValidationErrors(@Nonnull final Context context,
-                                                      @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult)
-            throws TagValidationException {
-        for (int tagSpecId : this.mandatoryTagSpecs) {
-            final ParsedTagSpec parsedTagSpec = this.getByTagSpecId(tagSpecId);
-            // Skip TagSpecs that aren't used for these type identifiers.
-            if (!parsedTagSpec.isUsedForTypeIdentifiers(
-                    context.getTypeIdentifiers())) {
-                continue;
-            }
-
-            if (!context.getTagspecsValidated().containsKey(tagSpecId)) {
-                final ValidatorProtos.TagSpec spec = parsedTagSpec.getSpec();
-                final List<String> params = new ArrayList<>();
-                params.add(TagSpecUtils.getTagSpecName(spec));
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(spec),
-                        validationResult);
-            }
-        }
-    }
-
-    /**
-     * Emits errors for tags that specify that another tag is also required or
-     * a condition is required to be satisfied.
-     * Returns false iff context.Progress(result).complete.
-     *
-     * @param context          the Context.
-     * @param validationResult the ValidationResult.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void maybeEmitAlsoRequiresTagValidationErrors(@Nonnull final Context context,
-                                                         @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult)
-            throws TagValidationException {
-        for (final int tagSpecId : context.getTagspecsValidated().keySet()) {
-            final ParsedTagSpec parsedTagSpec = this.getByTagSpecId(tagSpecId);
-            // Skip TagSpecs that aren't used for these type identifiers.
-            if (!parsedTagSpec.isUsedForTypeIdentifiers(
-                    context.getTypeIdentifiers())) {
-                continue;
-            }
-            for (final String condition : parsedTagSpec.requires()) {
-                if (!context.satisfiesCondition(condition)) {
-                    final List<String> params = new ArrayList<>();
-                    params.add(condition);
-                    params.add(TagSpecUtils.getTagSpecName(parsedTagSpec.getSpec()));
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.TAG_REQUIRED_BY_MISSING,
-                            context.getLineCol(),
-                            params,
-                            TagSpecUtils.getTagSpecUrl(parsedTagSpec.getSpec()),
-                            validationResult);
-                }
-            }
-            for (final String condition : parsedTagSpec.excludes()) {
-                if (context.satisfiesCondition(condition)) {
-                    final List<String> params = new ArrayList<>();
-                    params.add(TagSpecUtils.getTagSpecName(parsedTagSpec.getSpec()));
-                    params.add(condition);
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.TAG_EXCLUDED_BY_TAG,
-                            context.getLineCol(),
-                            params,
-                            TagSpecUtils.getTagSpecUrl(parsedTagSpec.getSpec()),
-                            validationResult);
-                }
-            }
-            for (final String requiresTagWarning : parsedTagSpec.getAlsoRequiresTagWarning()) {
-                final Integer tagSpecIdObj = getTagSpecIdBySpecName(requiresTagWarning);
-                if (tagSpecIdObj == null || !context.getTagspecsValidated().containsKey(tagSpecIdObj)) {
-                    final ParsedTagSpec alsoRequiresTagspec = this.getByTagSpecId(tagSpecIdObj);
-                    final List<String> params = new ArrayList<>();
-                    params.add(TagSpecUtils.getTagSpecName(alsoRequiresTagspec.getSpec()));
-                    params.add(TagSpecUtils.getTagSpecName(parsedTagSpec.getSpec()));
-                    context.addWarning(
-                            ValidatorProtos.ValidationError.Code.WARNING_TAG_REQUIRED_BY_MISSING,
-                            context.getLineCol(),
-                            params,
-                            TagSpecUtils.getTagSpecUrl(parsedTagSpec.getSpec()),
-                            validationResult);
-                }
-            }
-        }
-
-        final ExtensionsContext extensionsCtx = context.getExtensions();
-        final List<String> unusedRequired = extensionsCtx.unusedExtensionsRequired();
-        for (final String unusedExtensionName : unusedRequired) {
-            final List<String> params = new ArrayList<>();
-            params.add(unusedExtensionName);
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.EXTENSION_UNUSED,
-                    context.getLineCol(),
-                    params,
-                    /* specUrl */ "", validationResult);
-        }
-    }
-
-
-    /**
-     * Returns true if `spec` is usable for the HTML format these rules are
-     * built for.
-     *
-     * @param docCssSpec the DocCssSpec.
-     * @return Returns true if `spec` is usable for the HTML format these rules are
-     * built for.
-     */
-    public boolean isDocCssSpecCorrectHtmlFormat(@Nonnull final ValidatorProtos.DocCssSpec docCssSpec) {
-        for (final ValidatorProtos.HtmlFormat.Code htmlFormatCode : docCssSpec.getHtmlFormatList()) {
-            if (htmlFormatCode == htmlFormat) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    /**
-     * Returns true if TagSpec's html format is the same as this html format.
-     *
-     * @param tagSpec the TagSpec.
-     * @return returns true if TagSpec's html format is the same as this html format.
-     */
-    private boolean isTagSpecCorrectHtmlFormat(@Nonnull final ValidatorProtos.TagSpec tagSpec) {
-        for (final ValidatorProtos.HtmlFormat.Code htmlFormatCode : tagSpec.getHtmlFormatList()) {
-            if (htmlFormatCode == htmlFormat) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    /**
-     * For every tagspec that contains an ExtensionSpec, we add several TagSpec
-     * fields corresponding to the data found in the ExtensionSpec.
-     */
-    private void expandExtensionSpec() {
-        final int numTags = this.ampValidatorManager.getRules().getTagsList().size();
-        for (int tagSpecId = 0; tagSpecId < numTags; ++tagSpecId) {
-            ValidatorProtos.TagSpec tagSpec = this.ampValidatorManager.getRules().getTags(tagSpecId);
-
-            if (!tagSpec.hasExtensionSpec()) {
-                continue;
-            }
-
-            ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-            tagSpecBuilder.mergeFrom(tagSpec);
-
-            if (!tagSpec.hasSpecName()) {
-                tagSpecBuilder.setSpecName(tagSpec.getTagName() + " extension .js script");
-            }
-
-            tagSpecBuilder.setMandatoryParent("HEAD");
-            if (tagSpec.getExtensionSpec().hasDeprecatedAllowDuplicates()) {
-                tagSpecBuilder.setUniqueWarning(true);
-            } else {
-                tagSpecBuilder.setUnique(true);
-            }
-
-            ValidatorProtos.CdataSpec cdataSpec = ValidatorProtos.CdataSpec.getDefaultInstance();
-            cdataSpec = cdataSpec.toBuilder().setWhitespaceOnly(true).build();
-            tagSpecBuilder.setCdata(cdataSpec);
-
-            this.ampValidatorManager.getRules().setTags(tagSpecId, tagSpecBuilder.build());
-        }
-    }
-
-    /**
-     * @return {!ParsedAttrSpecs}
-     */
-    public ParsedAttrSpecs getParsedAttrSpecs() {
-        return this.parsedAttrSpecs;
-    }
-
-    /**
-     * AmpValidatorManager.
-     */
-    private AMPValidatorManager ampValidatorManager;
-
-    /**
-     * The HTML format.
-     */
-    private ValidatorProtos.HtmlFormat.Code htmlFormat;
-
-    /**
-     * ParsedTagSpecs in id order.
-     */
-    private Map<Integer, ParsedTagSpec> parsedTagSpecById;
-
-    /**
-     * ParsedTagSpecs keyed by name.
-     */
-    private Map<String, TagSpecDispatch> tagSpecByTagName;
-
-    /**
-     * Tag ids that are mandatory for a document to legally validate.
-     */
-    private List<Integer> mandatoryTagSpecs;
-
-    /**
-     * A cache for full match regex instantiations.
-     */
-    private Map<String, Pattern> fullMatchRegexes;
-
-    /**
-     * A cache for full match case insensitive regex instantiation.
-     */
-    private Map<String, Pattern> fullMatchCaseiRegexes;
-
-    /**
-     * A cache for partial match case insensitive regex instantiation.
-     */
-    private Map<String, Pattern> partialMatchCaseiRegexes;
-
-    /**
-     * Type identifiers which are used to determine the set of validation
-     * rules to be applied.
-     */
-    private Map<String, Integer> typeIdentifiers;
-
-    /**
-     * A ParsedAttrSpecs object.
-     */
-    private ParsedAttrSpecs parsedAttrSpecs;
-
-    /**
-     * A tag spec names to track.
-     */
-    private Map<Object, Boolean> tagSpecIdsToTrack;
-
-    /**
-     * ErrorCodeMetadata keyed by error code.
-     */
-    private Map<ValidatorProtos.ValidationError.Code, ErrorCodeMetadata> errorCodes;
-
-    /**
-     * Tag spec name to spec id .
-     */
-    private Map<String, Integer> tagSpecNameToSpecId = new HashMap<>();
-
-    /**
-     * Transformed value regex pattern.
-     */
-    private static final Pattern TRANSFORMED_VALUE_REGEX = Pattern.compile("^\\w+;v=(\\d+)$");
-
-    /**
-     * Minimum bytes length.
-     */
-    private static final int MIN_BYTES = -2;
-
-    /**
-     *
-     */
-    private List<ParsedDocCssSpec> parsedCss;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ParsedValueProperties.java b/validator/java/src/main/java/dev/amp/validator/ParsedValueProperties.java
deleted file mode 100644
index db6b574dca71c..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ParsedValueProperties.java
+++ /dev/null
@@ -1,92 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-
-/**
- * This class creates a map of property specs key by name.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ParsedValueProperties {
-    /**
-     * Constructor.
-     * @param spec property spec list.
-     */
-    public ParsedValueProperties(@Nonnull final ValidatorProtos.PropertySpecList spec) {
-        this.valuePropertyByName = new HashMap<>();
-        this.mandatoryValuePropertyNames = new ArrayList<>();
-
-        for (final ValidatorProtos.PropertySpec propertySpec : spec.getPropertiesList()) {
-            this.valuePropertyByName.put(propertySpec.getName(), propertySpec);
-            if (propertySpec.hasMandatory()) {
-                this.mandatoryValuePropertyNames.add(propertySpec.getName());
-            }
-        }
-        Collections.sort(this.mandatoryValuePropertyNames);
-    }
-
-    /**
-     * Returns the a map of PropertySpec.
-     * @return returns a map of PropertySpec.
-     */
-    @Nonnull
-    public Map<String, ValidatorProtos.PropertySpec> getValuePropertyByName() {
-        return this.valuePropertyByName;
-    }
-
-    /**
-     * Returns a list of mandatory property names.
-     * @return returns a list of mandatory property names.
-     */
-    public List<String> getMandatoryValuePropertyNames() {
-        return this.mandatoryValuePropertyNames;
-    }
-
-    /**
-     * Clean up reference, improve gc performance.
-     */
-    public void cleanup() {
-        this.valuePropertyByName = null;
-        this.mandatoryValuePropertyNames = null;
-    }
-
-    /**
-     * PropertySpec map.
-     */
-    @Nonnull
-    private Map<String, ValidatorProtos.PropertySpec> valuePropertyByName;
-
-    /**
-     * A list of mandatory property names.
-     */
-    @Nonnull
-    private List<String> mandatoryValuePropertyNames;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/RecordValidated.java b/validator/java/src/main/java/dev/amp/validator/RecordValidated.java
deleted file mode 100644
index b2153807ee438..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/RecordValidated.java
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-/**
- * Record validated enumeration types.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public enum RecordValidated {
-    /** ALWAYS */
-    ALWAYS,
-
-    /** NEVER */
-    NEVER,
-
-    /** IF_PASSING */
-    IF_PASSING
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ReferencePointMatcher.java b/validator/java/src/main/java/dev/amp/validator/ReferencePointMatcher.java
deleted file mode 100644
index b482efa1004a1..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ReferencePointMatcher.java
+++ /dev/null
@@ -1,238 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.exception.TagValidationException;
-import dev.amp.validator.exception.ValidatorException;
-import dev.amp.validator.utils.TagSpecUtils;
-import org.xml.sax.Locator;
-
-import javax.annotation.Nonnull;
-import java.io.IOException;
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-
-/**
- * A tag may initialize this ReferencePointMatcher with its reference points.
- * Then, the matcher will be invoked for each child tag via ::Match,
- * and eventually it will be invoked upon exiting the parent tag.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ReferencePointMatcher {
-    /**
-     * Constructor.
-     * @param parsedValidatorRules the ParsedValidatorRules object.
-     * @param parsedReferencePoints the parsed reference points.
-     * @param lineCol a pair of line/col.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public ReferencePointMatcher(@Nonnull final ParsedValidatorRules parsedValidatorRules,
-                                 @Nonnull final ParsedReferencePoints parsedReferencePoints,
-                                 @Nonnull final Locator lineCol) throws TagValidationException {
-        this.parsedValidatorRules = parsedValidatorRules;
-        this.parsedReferencePoints = parsedReferencePoints;
-        if (parsedReferencePoints.empty()) {
-            throw new TagValidationException("Reference point matcher should not be empty");
-        }
-
-        this.lineCol = lineCol;
-        this.referencePointsMatched = new ArrayList<>();
-
-    }
-
-    /**
-     * This method gets invoked when matching a child tag of the parent
-     * that is specifying / requiring the reference points. So
-     * effectively, this method will try through the specified reference
-     * points and record them in this.referencePointsMatched.
-     * @param tag the ParsedHtmlTag.
-     * @param context the Context.
-     * @throws TagValidationException the TagValidationException.
-     * @throws ValidatorException the ValidatorException.
-     * @throws IOException IO Exception
-     * @throws CssValidationException CssValidation Exception
-     * @return result returns ValidateTagResult.
-     */
-    public ValidateTagResult validateTag(@Nonnull final ParsedHtmlTag tag, @Nonnull final Context context)
-            throws TagValidationException, ValidatorException, IOException, CssValidationException {
-        // Look for a matching reference point, if we find one, record and exit.
-        ValidatorProtos.ValidationResult.Builder resultForBestAttempt = ValidatorProtos.ValidationResult.newBuilder();
-        resultForBestAttempt.setStatus(ValidatorProtos.ValidationResult.Status.UNKNOWN);
-        for (ValidatorProtos.ReferencePoint p : this.parsedReferencePoints.iterate()) {
-            final ParsedTagSpec parsedTagSpec = context.getRules().getByTagSpecId(p.getTagSpecName());
-            // Skip TagSpecs that aren't used for these type identifiers.
-            if (!parsedTagSpec.isUsedForTypeIdentifiers(context.getTypeIdentifiers())) {
-                continue;
-            }
-            // TODO (GeorgeLuo) : refactor here to handle InlineStyleCssBytes
-            //  changes (5/3/2020)
-            final ValidateTagResult resultForAttemptWrapper =
-                    TagSpecUtils.validateTagAgainstSpec(
-                    parsedTagSpec, /*bestMatchReferencePoint=*/null, context, tag);
-            final ValidatorProtos.ValidationResult.Builder resultForAttempt = resultForAttemptWrapper.getValidationResult();
-            if (context.getRules().betterValidationResultThan(resultForAttempt, resultForBestAttempt)) {
-                resultForBestAttempt = resultForAttempt;
-            }
-            if (resultForBestAttempt.getStatus() == ValidatorProtos.ValidationResult.Status.PASS) {
-                ValidateTagResult validateTagResult = new ValidateTagResult(resultForBestAttempt, parsedTagSpec);
-                return  validateTagResult;
-            }
-        }
-
-        // This check cannot fail as a successful validation above exits early.
-        if (resultForBestAttempt.getStatus() != ValidatorProtos.ValidationResult.Status.FAIL) {
-            throw new ValidatorException("Successful validation should have exited earlier");
-        }
-
-        // Special case: only one reference point defined - emit a singular
-        // error message *and* merge in the errors from the best attempt above.
-        if (this.parsedReferencePoints.size() == 1) {
-            List<String> params = new ArrayList<>();
-            params.add(tag.lowerName());
-            params.add(this.parsedReferencePoints.parentTagSpecName());
-            params.add(this.parsedValidatorRules.getReferencePointName(
-                    this.parsedReferencePoints.iterate().get(0)));
-            context.addError(
-                    ValidatorProtos.ValidationError.Code
-                            .CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT_SINGULAR,
-                    context.getLineCol(),
-                    params,
-                    this.parsedReferencePoints.parentSpecUrl(), resultForBestAttempt);
-            ValidateTagResult validateTagResult = new ValidateTagResult(resultForBestAttempt, null);
-            return validateTagResult;
-        }
-        // General case: more than one reference point defined. Emit a plural
-        // message with the acceptable reference points listed.
-        final List<String> acceptable = new ArrayList<>();
-        for (final ValidatorProtos.ReferencePoint p : this.parsedReferencePoints.iterate()) {
-            acceptable.add(this.parsedValidatorRules.getReferencePointName(p));
-        }
-        final ValidatorProtos.ValidationResult.Builder resultForMultipleAttempts = ValidatorProtos.ValidationResult.newBuilder();
-        final List<String> params = new ArrayList<>();
-        params.add(tag.lowerName());
-        params.add(this.parsedReferencePoints.parentTagSpecName());
-        params.add(String.join(", ", acceptable));
-        context.addError(
-                ValidatorProtos.ValidationError.Code
-                        .CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT,
-                context.getLineCol(),
-                params,
-                this.parsedReferencePoints.parentSpecUrl(),
-                resultForMultipleAttempts);
-
-        ValidateTagResult validateTagResult = new ValidateTagResult(resultForMultipleAttempts, null);
-        return validateTagResult;
-    }
-
-    /**
-     * This method gets invoked when we're done with processing all the
-     * child tags, so now we can determine whether any reference points
-     * remain unsatisfied or duplicate.
-     * @param context the Context.
-     * @param result the ValidationResult.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void exitParentTag(@Nonnull final Context context, @Nonnull final ValidatorProtos.ValidationResult.Builder result)
-            throws TagValidationException {
-        final Map<Integer, Integer> referencePointByCount = new HashMap<>();
-        for (final int r : this.referencePointsMatched) {
-            int count = 1;
-            if (referencePointByCount.containsKey(r)) {
-                count = referencePointByCount.get(r);
-                count++;
-            }
-            referencePointByCount.put(r, count);
-        }
-
-        for (final ValidatorProtos.ReferencePoint p : this.parsedReferencePoints.iterate()) {
-            int refPointTagSpecId = this.parsedValidatorRules.getTagSpecIdByReferencePointTagSpecName(p.getTagSpecName());
-            if (p.hasMandatory()
-                    && !referencePointByCount.containsKey(refPointTagSpecId)) {
-                final List<String> params = new ArrayList<>();
-                params.add(this.parsedValidatorRules.getReferencePointName(p));
-                params.add(this.parsedReferencePoints.parentTagSpecName());
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.MANDATORY_REFERENCE_POINT_MISSING,
-                        this.getLineCol(),
-                        params,
-                        this.parsedReferencePoints.parentSpecUrl(),
-                        result);
-            }
-
-            if (p.hasUnique()
-                    && referencePointByCount.containsKey(refPointTagSpecId)
-                    && referencePointByCount.get(refPointTagSpecId) != 1) {
-                final List<String> params = new ArrayList<>();
-                params.add(this.parsedValidatorRules.getReferencePointName(p));
-                params.add(this.parsedReferencePoints.parentTagSpecName());
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.DUPLICATE_REFERENCE_POINT,
-                        this.getLineCol(),
-                        params,
-                        this.parsedReferencePoints.parentSpecUrl(),
-                        result);
-            }
-        }
-    }
-
-    /**
-     * Clean up reference, improve gc performance.
-     */
-    public void cleanup() {
-        this.lineCol = null;
-        this.referencePointsMatched = null;
-    }
-
-    /**
-     * Returns a pair of line/col.
-     * @return returns a pair of line/col.
-     */
-    public Locator getLineCol() {
-        return this.lineCol;
-    }
-
-    /**
-     * Record the parsed tag spec id.
-     * @param parsedTagSpec the ParsedTagSpec.
-     */
-    public void recordMatch(@Nonnull final ParsedTagSpec parsedTagSpec) {
-        this.referencePointsMatched.add(parsedTagSpec.id());
-    }
-
-    /** A ParsedValidatorRules instance. */
-    private ParsedValidatorRules parsedValidatorRules;
-
-    /** A ParsedReferencePoints instance. */
-    private ParsedReferencePoints parsedReferencePoints;
-
-    /** A line/col pair. */
-    private Locator lineCol;
-
-    /** An array of reference points matched. */
-    private List<Integer> referencePointsMatched;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/SrcsetParsingResult.java b/validator/java/src/main/java/dev/amp/validator/SrcsetParsingResult.java
deleted file mode 100644
index 2a70a66e8b7d1..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/SrcsetParsingResult.java
+++ /dev/null
@@ -1,95 +0,0 @@
-package dev.amp.validator;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * This class contains the result of srcset parsing.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class SrcsetParsingResult {
-    /** Default constructor. */
-    public SrcsetParsingResult() {
-        this.success = false;
-        this.errorCode = ValidatorProtos.ValidationError.Code.UNKNOWN_CODE;
-        this.srcsetImages = new ArrayList<>();
-    }
-
-    /**
-     * Returns success flag.
-     * @return returns success flag.
-     */
-    public boolean isSuccess() {
-        return success;
-    }
-
-    /**
-     * Setting the success flag.
-     * @param success success flag.
-     */
-    public void setSuccess(final boolean success) {
-        this.success = success;
-    }
-
-    /**
-     * Returns the error code.
-     * @return returns the error code.
-     */
-    public ValidatorProtos.ValidationError.Code getErrorCode() {
-        return errorCode;
-    }
-
-    /**
-     * Setting the error code.
-     * @param errorCode the error code.
-     */
-    public void setErrorCode(@Nonnull final ValidatorProtos.ValidationError.Code errorCode) {
-        this.errorCode = errorCode;
-    }
-
-    /**
-     * Returns the srcset images.
-     * @return returns the srcset images.
-     */
-    public List<SrcsetSourceDef> getSrcsetImages() {
-        return srcsetImages;
-    }
-
-    /**
-     * Add source set def to the list.
-     * @param srcSetSourceDef the source set def.
-     */
-    public void add(@Nonnull final SrcsetSourceDef srcSetSourceDef) {
-        srcsetImages.add(srcSetSourceDef);
-    }
-
-    /**
-     * Setting the srcset images.
-     * @param srcsetImages srcset images.
-     */
-    public void setSrcsetImages(@Nonnull final List<SrcsetSourceDef> srcsetImages) {
-        this.srcsetImages = srcsetImages;
-    }
-
-    /**
-     * Returns the size of srcset images.
-     * @return returns the size of srcset images.
-     */
-    public int getSrcsetImagesSize() {
-        return srcsetImages.size();
-    }
-
-    /** Flag success. */
-    private boolean success;
-
-    /** Error code. */
-    private ValidatorProtos.ValidationError.Code errorCode;
-
-    /** List of srcset images. */
-    private List<SrcsetSourceDef> srcsetImages;
-}
-
diff --git a/validator/java/src/main/java/dev/amp/validator/SrcsetSourceDef.java b/validator/java/src/main/java/dev/amp/validator/SrcsetSourceDef.java
deleted file mode 100644
index dc115b72aecdb..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/SrcsetSourceDef.java
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import javax.annotation.Nonnull;
-
-/**
- * This class contains a single source within a srcset.
- *
- *  @author nhant01
- *  @author GeorgeLuo
- */
-
-public class SrcsetSourceDef {
-    /**
-     * Constructor.
-     * @param url the url.
-     * @param widthOrPixelDensity width or pixel density.
-     */
-    public SrcsetSourceDef(@Nonnull final String url, @Nonnull final String widthOrPixelDensity) {
-        this.url = url;
-        this.widthOrPixelDensity = widthOrPixelDensity;
-    }
-
-    /**
-     * Returns the url.
-     * @return returns the url.
-     */
-    public String getUrl() {
-        return url;
-    }
-
-    /**
-     * Returns the width or pixel density.
-     * @return returns the width or pixel density.
-     */
-    public String getWidthOrPixelDensity() {
-        return widthOrPixelDensity;
-    }
-
-    /** The url. */
-    private String url;
-
-    /** Width or pixel density. */
-    private String widthOrPixelDensity;
-}
-
-
diff --git a/validator/java/src/main/java/dev/amp/validator/TagSpecDispatch.java b/validator/java/src/main/java/dev/amp/validator/TagSpecDispatch.java
deleted file mode 100644
index f1dc3dd49cb9a..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/TagSpecDispatch.java
+++ /dev/null
@@ -1,167 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.utils.DispatchKeyUtils;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-
-/**
- * This class stores the dispatch rules for all TagSpecs with the same tag name.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class TagSpecDispatch {
-    /**
-     * Constructor.
-     */
-    public TagSpecDispatch() {
-        this.allTagSpecs = new ArrayList<>();
-    }
-
-    /**
-     * Registers a new dispatch key to match a tagspec id
-     * @param dispatchKey the dispatch key.
-     * @param tagSpecId tag spec id.
-     */
-    public void registerDispatchKey(@Nonnull final String dispatchKey, final int tagSpecId) {
-        if (this.tagSpecsByDispatch == null) {
-            this.tagSpecsByDispatch = new HashMap<>();
-        }
-        // Multiple TagSpecs may have the same dispatch key. These are added in the
-        // order in which they are found.
-        List<Integer> tagSpecIds;
-        if (!(tagSpecsByDispatch.containsKey(dispatchKey))) {
-            tagSpecIds = new ArrayList<>();
-            tagSpecIds.add(tagSpecId);
-            this.tagSpecsByDispatch.put(dispatchKey, tagSpecIds);
-        } else {
-            tagSpecIds = this.tagSpecsByDispatch.get(dispatchKey);
-            tagSpecIds.add(tagSpecId);
-        }
-    }
-
-    /**
-     * Looks up a dispatch key as previously registered, returning the
-     * corresponding tagSpecIds which are ordered by their specificity of match
-     * (e.g. Name/Value/Parent, then Name/Value, and then Name).
-     * @param attrName attribute name.
-     * @param attrValue attribute value.
-     * @param mandatoryParent mandatory parent.
-     * @return returns the list of tag spec ids.
-     */
-    public List<Integer> matchingDispatchKey(@Nonnull final String attrName,
-                                             @Nonnull final String attrValue,
-                                             @Nonnull final String mandatoryParent) {
-        List<Integer> tagSpecIds = new ArrayList<>();
-        if (!this.hasDispatchKeys()) {
-            return tagSpecIds;
-        }
-
-        // Try first to find a key with the given parent.
-        final String dispatchKey = DispatchKeyUtils.makeDispatchKey(
-               ValidatorProtos.AttrSpec.DispatchKeyType.NAME_VALUE_PARENT_DISPATCH,
-                attrName, attrValue, mandatoryParent);
-        final List<Integer> match = this.tagSpecsByDispatch.get(dispatchKey);
-        if (match != null) {
-            tagSpecIds.addAll(match);
-        }
-
-        // Try next to find a key that allows any parent.
-        final String noParentKey = DispatchKeyUtils.makeDispatchKey(
-                ValidatorProtos.AttrSpec.DispatchKeyType.NAME_VALUE_DISPATCH, attrName,
-                attrValue, "");
-        final List<Integer> noParentMatch = this.tagSpecsByDispatch.get(noParentKey);
-        if (noParentMatch != null) {
-            tagSpecIds.addAll(noParentMatch);
-        }
-
-        // Try last to find a key that matches just this attribute name.
-        final String noValueKey = DispatchKeyUtils.makeDispatchKey(
-                ValidatorProtos.AttrSpec.DispatchKeyType.NAME_DISPATCH, attrName, "", "");
-        final List<Integer> noValueMatch = this.tagSpecsByDispatch.get(noValueKey);
-        if (noValueMatch != null) {
-            tagSpecIds.addAll(noValueMatch);
-        }
-
-        // Special case for foo=foo. We consider this a match for a dispatch key of
-        // foo="" or just <tag foo>.
-        if (attrName.equals(attrValue)) {
-            tagSpecIds.addAll(
-                    this.matchingDispatchKey(attrName, "", mandatoryParent));
-        }
-
-        return tagSpecIds;
-    }
-
-    /**
-     * Registers a new non dispatch key tagspec id.
-     * @param tagSpecId tag spec id.
-     */
-    public void registerTagSpec(final int tagSpecId) {
-        this.allTagSpecs.add(tagSpecId);
-    }
-
-    /**
-     * Returns true if dispatch key is not null and tag specs is not empty.
-     * @return returns true if dispatch key is not null and tag specs is not empty.
-     */
-    public boolean empty() {
-        return !this.hasDispatchKeys() && !this.hasTagSpecs();
-    }
-
-    /**
-     * Returns true if tag spec key by dispatch not null.
-     * @return returns true if tag spec key by dispatch not null.
-     */
-    public boolean hasDispatchKeys() {
-        return this.tagSpecsByDispatch != null;
-    }
-
-    /**
-     * Return true if tag specs not empty.
-     * @return returns true if tag specs not empty.
-     */
-    public boolean hasTagSpecs() {
-        return this.allTagSpecs.size() > 0;
-    }
-
-    /**
-     * Returns the tag specs.
-     * @return returns the tag specs.
-     */
-    public List<Integer> allTagSpecs() {
-        return this.allTagSpecs;
-    }
-
-   /** TagSpec ids for a specific attribute dispatch key. */
-    private Map<String, List<Integer>> tagSpecsByDispatch;
-
-    /** List of all tag specs. */
-    private List<Integer> allTagSpecs;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/TagStack.java b/validator/java/src/main/java/dev/amp/validator/TagStack.java
deleted file mode 100644
index aed622bf6f841..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/TagStack.java
+++ /dev/null
@@ -1,582 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.exception.TagValidationException;
-import dev.amp.validator.utils.TagSpecUtils;
-import org.xml.sax.Locator;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.LinkedList;
-import java.util.List;
-
-/**
- * This class keeps track of the tag names and ChildTagMatchers
- * as we enter / exit tags in the document. Closing tags is tricky:
- * - We assume that all end tags are optional and we close, that is, pop off
- * tags our stack, lazily as we encounter parent closing tags. This part
- * differs slightly from the behavior per spec: instead of closing an
- * option tag when a following option tag is seen, we close it when the
- * parent closing tag (in practice select) is encountered.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class TagStack {
-    /**
-     * Constructor.
-     */
-    public TagStack() {
-        this.stack = new LinkedList<>();
-        //TODO - REMOVE DOCTYPE when tagchowder supports doctype element.
-        this.stack.add(new TagStackEntry("$ROOT"));
-        this.stack.add(new TagStackEntry("!DOCTYPE"));
-    }
-
-    /**
-     * Returns true if this within lt;style amp-custom gt;.
-     *
-     * @return returns true if this within lt;style amp-custom gt; Else false.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public boolean countDocCssBytes() throws TagValidationException {
-        final ParsedTagSpec parentSpec = this.parentStackEntry().getTagSpec();
-        return (parentSpec != null) && (parentSpec.getSpec().hasCdata())
-                && (parentSpec.getSpec().getCdata().hasDocCssBytes());
-    }
-
-    /**
-     * The parent of the current stack entry.
-     *
-     * @return TagStackEntry the TagStackEntry.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public TagStackEntry parentStackEntry() throws TagValidationException {
-        if (this.stack.size() < 1) {
-            throw new TagValidationException("Parent of empty $ROOT tag requested.");
-        }
-        return this.back();
-    }
-
-    /**
-     * Alias to the last element on the tag stack.
-     *
-     * @return TagStackEntry the TagStackEntry.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public TagStackEntry back() throws TagValidationException {
-        if (this.stack.size() <= 0) {
-            throw new TagValidationException("Exiting an empty tag stack.");
-        }
-        return this.stack.getLast();
-    }
-
-    /**
-     * Returns the parent stack entry reference point matcher.
-     *
-     * @return returns the parent stack entry reference point matcher.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public ReferencePointMatcher parentReferencePointMatcher() throws TagValidationException {
-        return this.parentStackEntry().getReferencePointMatcher();
-    }
-
-    /**
-     * Tells the parent of the current stack entry that it can only have 1 child
-     * and that child must be me (the current stack entry).
-     *
-     * @param tagName The current stack entry's tag name.
-     * @param lineCol pair of line/col.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void tellParentNoSiblingsAllowed(@Nonnull final String tagName, @Nonnull final Locator lineCol)
-            throws TagValidationException {
-        this.parentStackEntry().setOnlyChildTagName(tagName);
-        this.parentStackEntry().setOnlyChildErrorLineCol(lineCol);
-    }
-
-    /**
-     * Returns the parent only child error line col.
-     *
-     * @return returns the Locator of the tag that set the rule.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public Locator parentOnlyChildErrorLineCol() throws TagValidationException {
-        return this.parentStackEntry().getOnlyChildErrorLineCol();
-    }
-
-    /**
-     * @return returns the name of the tag that set the 'no siblings allowed'
-     * rule.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public String parentOnlyChildTagName() throws TagValidationException {
-        return this.parentStackEntry().getOnlyChildTagName();
-    }
-
-    /**
-     * @return returns true if this tag's parent has a child with 'no siblings
-     * allowed' rule. Else false.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public boolean parentHasChildWithNoSiblingRule() throws TagValidationException {
-        return this.parentOnlyChildTagName().length() > 0;
-    }
-
-    /**
-     * Returns the Locator of the tag that set the 'last child' rule.
-     *
-     * @return The Locator of the tag that set the 'last child' rule.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public Locator parentLastChildErrorLineCol() throws TagValidationException {
-        return this.parentStackEntry().getLastChildErrorLineCol();
-    }
-
-    /**
-     * Returns the list of DescendantConstraints.
-     *
-     * @return returns the list of DescendantConstraints.
-     */
-    public List<DescendantConstraints> allowedDescendantsList() {
-        return this.allowedDescendantsList;
-    }
-
-    /**
-     * Tells the parent of the current stack entry that its last child must be me
-     * (the current stack entry).
-     *
-     * @param tagName The current stack entry's tag name.
-     * @param url     The current stack entry's spec url.
-     * @param lineCol a pair line/col.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void tellParentImTheLastChild(@Nonnull final String tagName,
-                                         @Nonnull final String url,
-                                         @Nonnull final Locator lineCol)
-            throws TagValidationException {
-        this.parentStackEntry().setLastChildTagName(tagName);
-        this.parentStackEntry().setLastChildErrorLineCol(lineCol);
-        this.parentStackEntry().setLastChildUrl(url);
-    }
-
-    /**
-     * This method is called as we're visiting a tag; so the matcher we
-     * need here is the one provided/specified for the tag parent.
-     *
-     * @param encounteredTag encountered tag.
-     * @param context        the Context object.
-     * @param result         validation result.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void matchChildTagName(@Nonnull final ParsedHtmlTag encounteredTag,
-                                  @Nonnull final Context context,
-                                  @Nonnull final ValidatorProtos.ValidationResult.Builder result)
-            throws TagValidationException {
-        final ChildTagMatcher matcher = this.parentStackEntry().getChildTagMatcher();
-        if (matcher != null) {
-            matcher.matchChildTagName(encounteredTag, context, result);
-        }
-    }
-
-    /**
-     * Returns true if this within script type=application/json. Else false.
-     *
-     * @return returns true if this within script type=application/json. Else
-     * false.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public boolean isScriptTypeJsonChild() throws TagValidationException {
-        return (this.parentStackEntry().getTagName().equals("SCRIPT")
-                && (this.parentStackEntry().getTagSpec() != null)
-                && this.parentStackEntry().getTagSpec().isTypeJson());
-    }
-
-    /**
-     * Returns true if the current tag has ancestor with the given tag name or
-     * specName.
-     *
-     * @param ancestor ancestor tag.
-     * @return returns true if the current tag has ancestor with the given tag name or specName.
-     */
-    public boolean hasAncestor(@Nonnull final String ancestor) {
-        // Skip the first element, which is "$ROOT".
-        for (int i = 1; i < this.stack.size(); ++i) {
-            if (this.stack.get(i).getTagName().equals(ancestor)) {
-                return true;
-            }
-            if ((this.stack.get(i).getTagSpec() != null)
-                    && (this.stack.get(i).getTagSpec().getSpec().getSpecName().equals(ancestor))) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    /**
-     * Returns true if the current tag has an ancestor which set the given marker.
-     *
-     * @param query the ancestor marker.
-     * @return returns true if the current tag has an ancestor which set the given marker.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public boolean hasAncestorMarker(@Nonnull final ValidatorProtos.AncestorMarker.Marker query) throws TagValidationException {
-        if (query == ValidatorProtos.AncestorMarker.Marker.UNKNOWN) {
-            throw new TagValidationException("Ancestor marker is unknown");
-        }
-        // Skip the first element, which is "$ROOT".
-        for (int i = 1; i < this.stack.size(); ++i) {
-            if (this.stack.get(i).getTagSpec() == null) {
-                continue;
-            }
-            final ValidatorProtos.TagSpec spec = this.stack.get(i).getTagSpec().getSpec();
-            if (!spec.hasMarkDescendants()) {
-                continue;
-            }
-            for (final ValidatorProtos.AncestorMarker.Marker marker : spec.getMarkDescendants().getMarkerList()) {
-                if (marker == query) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-
-    /**
-     * Enter a tag, opening a scope for child tags.
-     *
-     * @param tagName              the tag name.
-     * @param referencePointResult the reference point result.
-     * @param tagResult            the tag result.
-     */
-    private void enterTag(@Nonnull final String tagName, @Nonnull final ValidateTagResult referencePointResult,
-                          @Nonnull final ValidateTagResult tagResult) {
-        final TagStackEntry stackEntry = new TagStackEntry(tagName);
-        stackEntry.setReferencePoint(referencePointResult.getBestMatchTagSpec());
-        stackEntry.setTagSpec(tagResult.getBestMatchTagSpec());
-        this.stack.add(stackEntry);
-    }
-
-    /**
-     * Upon exiting a tag, validation for the current child tag matcher is
-     * triggered, e.g. for checking that the tag had some specified number
-     * of children.
-     *
-     * @param context the context.
-     * @param result  the ValidationResult.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void exitTag(@Nonnull final Context context, @Nonnull final ValidatorProtos.ValidationResult.Builder result)
-            throws TagValidationException {
-        if (this.stack.size() <= 0) {
-            throw new TagValidationException("Exiting an empty tag stack.");
-        }
-
-        this.unSetDescendantConstraintList();
-        final TagStackEntry topStackEntry = this.back();
-
-        if (topStackEntry.getChildTagMatcher() != null) {
-            topStackEntry.getChildTagMatcher().exitTag(context, result);
-        }
-        if (topStackEntry.getReferencePointMatcher() != null) {
-            topStackEntry.getReferencePointMatcher().exitParentTag(context, result);
-        }
-
-        this.stack.removeLast();
-    }
-
-    /**
-     * Given a ValidateTagResult, update the tag stack entry at the top of the
-     * tag stack to add any constraints from the spec.
-     *
-     * @param result      the ValidateTagResult.
-     * @param parsedRules the ParsedValidatorRules.
-     * @param lineCol     a pair of line/col.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void updateStackEntryFromTagResult(@Nonnull final ValidateTagResult result,
-                                              @Nonnull final ParsedValidatorRules parsedRules,
-                                              @Nonnull final Locator lineCol) throws TagValidationException {
-        if (result.getBestMatchTagSpec() == null) {
-            return;
-        }
-
-        final ParsedTagSpec parsedTagSpec = result.getBestMatchTagSpec();
-
-        this.setReferencePointMatcher(
-                parsedTagSpec.referencePointMatcher(parsedRules, lineCol));
-
-        // The following only add new constraints, not new allowances, so
-        // only add the constraints if the validation passed.
-        if (result.getValidationResult().getStatus()
-                == ValidatorProtos.ValidationResult.Status.PASS) {
-            this.setChildTagMatcher(parsedTagSpec.childTagMatcher());
-            this.setCdataMatcher(parsedTagSpec.cdataMatcher(lineCol));
-            this.setDescendantConstraintList(parsedTagSpec, parsedRules);
-        }
-    }
-
-    /**
-     * Update tagstack state after validating an encountered tag. Called with the
-     * best matching specs, even if not a match.
-     *
-     * @param encounteredTag       the ParsedHtmlTag.
-     * @param referencePointResult reference point result.
-     * @param tagResult            tag result.
-     * @param parsedRules          parsed rules.
-     * @param lineCol              a pair line/col.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void updateFromTagResults(
-            @Nonnull final ParsedHtmlTag encounteredTag, @Nonnull final ValidateTagResult referencePointResult,
-            @Nonnull final ValidateTagResult tagResult, @Nonnull final ParsedValidatorRules parsedRules,
-            @Nonnull final Locator lineCol) throws TagValidationException {
-        // Keep track of the number of direct children this tag has, even as we
-        // pop in and out of them on the stack.
-        this.parentStackEntry().incrementNumChildren();
-
-        // Record in the parent element that a reference point has been satisfied,
-        // even if the reference point didn't match completely.
-        if (referencePointResult.getBestMatchTagSpec() != null) {
-            if (this.parentReferencePointMatcher() == null) {
-                throw new TagValidationException("Parent's reference point matcher is null");
-            }
-            this.parentReferencePointMatcher().recordMatch(
-                    /** @type{!ParsedTagSpec} */(referencePointResult.getBestMatchTagSpec()));
-        }
-
-        // The following only add new constraints, not new allowances, so
-        // only add the constraints if the validation passed.
-        if (tagResult.getValidationResult().getStatus() == ValidatorProtos.ValidationResult.Status.PASS) {
-            final ParsedTagSpec parsedTagSpec = tagResult.getBestMatchTagSpec();
-            final ValidatorProtos.TagSpec tagSpec = parsedTagSpec.getSpec();
-            // Record that this tag must not have any siblings.
-            if (tagSpec.getSiblingsDisallowed()) {
-                this.tellParentNoSiblingsAllowed(tagSpec.getTagName(), lineCol);
-            }
-
-            // Record that this tag must be the last child of it's parent.
-            if (tagSpec.getMandatoryLastChild()) {
-                this.tellParentImTheLastChild(
-                        TagSpecUtils.getTagSpecName(tagSpec), TagSpecUtils.getTagSpecUrl(tagSpec), lineCol);
-            }
-        }
-
-        // Add the tag to the stack, and then update the stack entry.
-        this.enterTag(encounteredTag.upperName(), referencePointResult, tagResult);
-
-        this.updateStackEntryFromTagResult(
-                referencePointResult, parsedRules, lineCol);
-        this.updateStackEntryFromTagResult(tagResult, parsedRules, lineCol);
-    }
-
-    /**
-     * Updates the allowed descendants list if a tag introduced constraints. This
-     * is called when exiting a tag.
-     *
-     * @throws TagValidationException the TagValidationException.
-     */
-    private void unSetDescendantConstraintList() throws TagValidationException {
-        if (this.hasDescendantConstraintLists()) {
-            // pop operation, remove last item from list.
-            this.allowedDescendantsList.remove(this.allowedDescendantsList.size() - 1);
-            this.setHasDescendantConstraintLists(false);
-        }
-    }
-
-    /**
-     * @return {boolean} true if the tag introduced descendant constraints.
-     * Else false.
-     * @throws TagValidationException the TagValidationException.
-     */
-    private boolean hasDescendantConstraintLists() throws TagValidationException {
-        return this.back().getHasDescendantConstraintLists();
-    }
-
-    /**
-     * Setting descendant constraint lists.
-     *
-     * @param value a boolean value.
-     * @throws TagValidationException the TagValidationException.
-     */
-    private void setHasDescendantConstraintLists(final boolean value) throws TagValidationException {
-        this.back().setHasDescendantConstraintLists(value);
-    }
-
-    /**
-     * The spec_name of the parent of the current tag if one exists, otherwise the
-     * tag_name.
-     *
-     * @return The spec_name of the parent of the current tag, or tag_name
-     * @throws TagValidationException the TagValidationException.
-     */
-    public String parentTagSpecName() throws TagValidationException {
-        if ((this.parentStackEntry().getTagSpec() != null)
-                && (this.parentStackEntry().getTagSpec().getSpec().hasSpecName())) {
-            return (
-                    this.parentStackEntry().getTagSpec().getSpec().getSpecName());
-        }
-        return this.parentStackEntry().getTagName();
-    }
-
-    /**
-     * The number of children that have been discovered up to now by traversing
-     * the stack.
-     *
-     * @return returns parent stack's num children.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public int parentChildCount() throws TagValidationException {
-        return this.parentStackEntry().getNumChildren();
-    }
-
-    /**
-     * Sets the reference point matcher for the tag currently on the stack.
-     *
-     * @param matcher reference point matcher.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void setReferencePointMatcher(final ReferencePointMatcher matcher) throws TagValidationException {
-        if (matcher != null) {
-            this.back().setReferencePointMatcher(matcher);
-        }
-    }
-
-    /**
-     * Sets the child tag matcher for the tag currently on the stack.
-     *
-     * @param matcher child tag matcher.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void setChildTagMatcher(final ChildTagMatcher matcher) throws TagValidationException {
-        if (matcher != null) {
-            this.back().setChildTagMatcher(matcher);
-        }
-    }
-
-    /**
-     * Sets the cdata matcher for the tag currently on the stack.
-     *
-     * @param matcher Cdata matcher.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void setCdataMatcher(final CdataMatcher matcher) throws TagValidationException {
-        if (matcher != null) {
-            this.back().setCdataMatcher(matcher);
-        }
-    }
-
-    /**
-     * Returns the cdata matcher for the tag currently on the stack. If there
-     * is no cdata matcher, returns null.
-     *
-     * @return returns the CdataMatcher for the tag currently on the stack.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public CdataMatcher cdataMatcher() throws TagValidationException {
-        return this.back().getCdataMatcher();
-    }
-
-    /**
-     * The name of the parent of the current tag.
-     *
-     * @return returns the parent stack entry tag name.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public String parentTagName() throws TagValidationException {
-        return this.parentStackEntry().getTagName();
-    }
-
-    /**
-     * @return returns the name of the tag with the 'last child' rule.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public String parentLastChildTagName() throws TagValidationException {
-        return this.parentStackEntry().getLastChildTagName();
-    }
-
-    /**
-     * @return returns the spec url of the last child.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public String parentLastChildUrl() throws TagValidationException {
-        return this.parentStackEntry().getLastChildUrl();
-    }
-
-    /**
-     * @return returns true if this tag's parent has a child with 'last child'
-     * rule. Else false.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public boolean parentHasChildWithLastChildRule() throws TagValidationException {
-        return this.parentLastChildTagName().length() > 0;
-    }
-
-    /**
-     * Setting the descendant constraint list.
-     *
-     * @param parsedTagSpec the parsed tag spec.
-     * @param parsedRules   the parsed rules.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public void setDescendantConstraintList(@Nonnull final ParsedTagSpec parsedTagSpec,
-                                            @Nonnull final ParsedValidatorRules parsedRules)
-            throws TagValidationException {
-        if (parsedTagSpec.getSpec().getDescendantTagList() == null
-                || parsedTagSpec.getSpec().getDescendantTagList().equals("")) {
-            return;
-        }
-
-        List<String> allowedDescendantsForThisTag = new ArrayList<>();
-        for (final ValidatorProtos.DescendantTagList descendantTagList : parsedRules.getDescendantTagLists()) {
-            // Get the list matching this tag's descendant tag name.
-            if (parsedTagSpec.getSpec().getDescendantTagList().equals(descendantTagList.getName())) {
-                for (final String tag : descendantTagList.getTagList()) {
-                    allowedDescendantsForThisTag.add(tag);
-                }
-            }
-        }
-
-        final String tagName = TagSpecUtils.getTagSpecName(parsedTagSpec.getSpec());
-        if (tagName != null && !tagName.equals("")) {
-            this.allowedDescendantsList.add(new DescendantConstraints(
-                    TagSpecUtils.getTagSpecName(parsedTagSpec.getSpec()),
-                    allowedDescendantsForThisTag));
-            this.setHasDescendantConstraintLists(true);
-        }
-    }
-
-    /**
-     * The current tag name and its parents.
-     */
-    @Nonnull
-    private LinkedList<TagStackEntry> stack;
-
-    /**
-     * Allowed descendant list.
-     */
-    @Nonnull
-    private List<DescendantConstraints> allowedDescendantsList = new ArrayList<>();
-}
-
diff --git a/validator/java/src/main/java/dev/amp/validator/TagStackEntry.java b/validator/java/src/main/java/dev/amp/validator/TagStackEntry.java
deleted file mode 100644
index 2b5cea3b2c594..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/TagStackEntry.java
+++ /dev/null
@@ -1,320 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-
-
-package dev.amp.validator;
-
-import org.xml.sax.Locator;
-
-import javax.annotation.Nonnull;
-
-/**
- * This class is the unit definition of the TagStack collection.
- * It is responsible for containing information relevant to evaluation of
- * future tags. It is a wrapper for the individual tags found in the html
- * document and maintains a record of child-parent relationships.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class TagStackEntry {
-    /**
-     * Constructor.
-     *
-     * @param tagName the tag name.
-     */
-    public TagStackEntry(@Nonnull final String tagName) {
-        this.tagName = tagName;
-        this.tagSpec = null;
-        this.referencePoint = null;
-        this.hasDescendantConstraintLists = false;
-        this.numChildren = 0;
-        this.onlyChildTagName = "";
-        this.onlyChildErrorLineCol = null;
-        this.lastChildSiblingCount = 0;
-        this.lastChildTagName = "";
-        this.lastChildUrl = "";
-        this.lastChildErrorLineCol = null;
-        this.cdataMatcher = null;
-        this.childTagMatcher = null;
-        this.referencePointMatcher = null;
-    }
-
-    /**
-     * Getting the ParsedTagSpec instance.
-     * @return the ParsedTagSpec instance.
-     */
-    public ParsedTagSpec getTagSpec() {
-        return tagSpec;
-    }
-
-    /**
-     * Getting the parsed tag spec of the reference point.
-     * @return returns the parsed tag spec of the reference point.
-     */
-    public ParsedTagSpec getReferencePoint() {
-        return referencePoint;
-    }
-
-    /**
-     * Getting the descendant constraint list.
-     * @return returns the descendant constraint list.
-     */
-    public boolean getHasDescendantConstraintLists() {
-        return hasDescendantConstraintLists;
-    }
-
-    /**
-     * Setting the descendant constraint lists value.
-     * @param hasDescendantConstraintLists descendant constraint lists value.
-     */
-    public void setHasDescendantConstraintLists(final boolean hasDescendantConstraintLists) {
-        this.hasDescendantConstraintLists = hasDescendantConstraintLists;
-    }
-
-    /**
-     * Setting the parsed tag spec of the reference point.
-     * @param referencePoint parsed tag spec.
-     */
-    public void setReferencePoint(@Nonnull final ParsedTagSpec referencePoint) {
-        this.referencePoint = referencePoint;
-    }
-
-    /**
-     * Setting the parsed tag spec.
-     * @param tagSpec tag spec.
-     */
-    public void setTagSpec(@Nonnull final ParsedTagSpec tagSpec) {
-        this.tagSpec = tagSpec;
-    }
-
-    /**
-     * Getting the child tag matcher.
-     * @return returns child tag matcher.
-     */
-    public ChildTagMatcher getChildTagMatcher() {
-        return childTagMatcher;
-    }
-
-    /**
-     * Setting the child tag matcher.
-     * @param childTagMatcher child tag matcher.
-     */
-    public void setChildTagMatcher(@Nonnull final ChildTagMatcher childTagMatcher) {
-        this.childTagMatcher = childTagMatcher;
-    }
-
-    /**
-     * Setting the Cdata matcher.
-     * @param cdataMatcher Cdata matcher.
-     */
-    public void setCdataMatcher(@Nonnull final CdataMatcher cdataMatcher) {
-        this.cdataMatcher = cdataMatcher;
-    }
-
-    /**
-     * Getting the reference point matcher.
-     * @return returns the reference point matcher.
-     */
-    public ReferencePointMatcher getReferencePointMatcher() {
-        return referencePointMatcher;
-    }
-
-    /**
-     * Returning the number children count.
-     * @return returns the number children count.
-     */
-    public int getNumChildren() {
-        return numChildren;
-    }
-
-    /**
-     * Increment the number children count.
-     */
-    public void incrementNumChildren() {
-        numChildren++;
-    }
-
-    /**
-     * Setting the only child tag name.
-     * @param name only child tag name.
-     */
-    public void setOnlyChildTagName(@Nonnull final String name) {
-        this.onlyChildTagName = name;
-    }
-
-    /**
-     * Getting the only child tag name.
-     * @return returns the only child tag name.
-     */
-    public String getOnlyChildTagName() {
-        return onlyChildTagName;
-    }
-
-    /**
-     * Setting the only child error line col.
-     * @param lineCol the pair of line/col.
-     */
-    public void setOnlyChildErrorLineCol(@Nonnull final Locator lineCol) {
-        this.onlyChildErrorLineCol = lineCol;
-    }
-
-    /**
-     * Getting the only child error line col.
-     * @return returns a pair of line/col.
-     */
-    public Locator getOnlyChildErrorLineCol() {
-        return onlyChildErrorLineCol;
-    }
-
-    /**
-     * Setting the reference point matcher.
-     * @param referencePointMatcher reference point matcher.
-     */
-    public void setReferencePointMatcher(@Nonnull final ReferencePointMatcher referencePointMatcher) {
-        this.referencePointMatcher = referencePointMatcher;
-    }
-
-    /**
-     * Setting the last child tag name.
-     * @param tagName last child tag name.
-     */
-    public void setLastChildTagName(@Nonnull final String tagName) {
-        this.lastChildTagName = tagName;
-    }
-
-    /**
-     * Getting the last child tag name.
-     * @return returns the last child tag name.
-     */
-    public String getLastChildTagName() {
-        return lastChildTagName;
-    }
-
-    /**
-     * Getting the last child url.
-     * @return returns the last child url.
-     */
-    public String getLastChildUrl() {
-        return lastChildUrl;
-    }
-
-    /**
-     * Setting the last child url.
-     * @param lastChildUrl the last child url.
-     */
-    public void setLastChildUrl(@Nonnull final String lastChildUrl) {
-        this.lastChildUrl = lastChildUrl;
-    }
-
-    /**
-     * Getting the last child error line col.
-     * @return returns the last child error line col.
-     */
-    public Locator getLastChildErrorLineCol() {
-        return lastChildErrorLineCol;
-    }
-
-    /**
-     * Setting the last child error line col.
-     * @param lastChildErrorLineCol last child error line col.
-     */
-    public void setLastChildErrorLineCol(@Nonnull final Locator lastChildErrorLineCol) {
-        this.lastChildErrorLineCol = lastChildErrorLineCol;
-    }
-
-    /**
-     * Getting the Cdata matcher.
-     * @return returns the Cdata matcher.
-     */
-    public CdataMatcher getCdataMatcher() {
-        return cdataMatcher;
-    }
-
-    /**
-     * Getting the tag name.
-     * @return returns the tag name.
-     */
-    public String getTagName() {
-        return this.tagName;
-    }
-
-    /**
-     * Clean up reference, improve gc performance.
-     */
-    public void cleanup() {
-        this.tagName = null;
-        this.tagSpec = null;
-        this.referencePoint = null;
-        this.onlyChildTagName = null;
-        this.onlyChildErrorLineCol = null;
-        this.lastChildTagName = null;
-        this.lastChildUrl = null;
-        this.lastChildErrorLineCol = null;
-        this.cdataMatcher = null;
-        this.childTagMatcher = null;
-        this.referencePointMatcher = null;
-    }
-
-    /** Tag name. */
-    private String tagName;
-
-    /** Tag spec object. */
-    private ParsedTagSpec tagSpec;
-
-    /** Tag spec of a reference point. */
-    private ParsedTagSpec referencePoint;
-
-    /** Flag for descendant constraint lists. */
-    private boolean hasDescendantConstraintLists;
-
-    /** Children count. */
-    private int numChildren;
-
-    /** Only child tag name. */
-    private String onlyChildTagName;
-
-    /** only child error line/col. */
-    private Locator onlyChildErrorLineCol;
-
-    /** Last child sibling count. */
-    private int lastChildSiblingCount;
-
-    /** Last child tag name. */
-    private String lastChildTagName;
-
-    /** Last child url. */
-    private String lastChildUrl;
-
-    /** Last child error line col. */
-    private Locator lastChildErrorLineCol;
-
-    /** Cdata matcher. */
-    private CdataMatcher cdataMatcher;
-
-    /** Child tag matcher. */
-    private ChildTagMatcher childTagMatcher;
-
-    /** Reference point matcher. */
-    private ReferencePointMatcher referencePointMatcher;
-}
\ No newline at end of file
diff --git a/validator/java/src/main/java/dev/amp/validator/UrlErrorAdapter.java b/validator/java/src/main/java/dev/amp/validator/UrlErrorAdapter.java
deleted file mode 100644
index 5154e7e673311..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/UrlErrorAdapter.java
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-/**
- * An url error adaptor interface.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public interface UrlErrorAdapter {
-    /**
-     * Adding missing url validation error.
-     *
-     * @param context context.
-     * @param tagSpec tag spec.
-     * @param result validation result.
-     */
-    void missingUrl(Context context, ValidatorProtos.TagSpec tagSpec,
-                           ValidatorProtos.ValidationResult.Builder result);
-
-    /**
-     * Adding invalid url validation error.
-     *
-     * @param context context.
-     * @param url the url.
-     * @param tagSpec tag spec.
-     * @param result validation result.
-     */
-    void invalidUrl(Context context, String url, ValidatorProtos.TagSpec tagSpec,
-                           ValidatorProtos.ValidationResult.Builder result);
-
-    /**
-     * Adding invalid url protocol error.
-     *
-     * @param context context.
-     * @param protocol the protocol.
-     * @param tagSpec tag spec.
-     * @param result validation result.
-     */
-    void invalidUrlProtocol(Context context, String protocol, ValidatorProtos.TagSpec tagSpec,
-                           ValidatorProtos.ValidationResult.Builder result);
-
-    /**
-     * Adding disallowed relative url error.
-     *
-     * @param context context.
-     * @param url the url.
-     * @param tagSpec tag spec.
-     * @param result validation result.
-     */
-    void disallowedRelativeUrl(Context context, String url, ValidatorProtos.TagSpec tagSpec,
-                           ValidatorProtos.ValidationResult.Builder result);
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/UrlErrorInAttrAdapter.java b/validator/java/src/main/java/dev/amp/validator/UrlErrorInAttrAdapter.java
deleted file mode 100644
index 93bb341ef4181..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/UrlErrorInAttrAdapter.java
+++ /dev/null
@@ -1,145 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.utils.TagSpecUtils;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * URL error in attribute adaptor.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class UrlErrorInAttrAdapter implements UrlErrorAdapter {
-    /**
-     * Constructor.
-     * @param attrName attribute name.
-     */
-    public UrlErrorInAttrAdapter(@Nonnull final String attrName) {
-        this.attrName = attrName;
-    }
-
-    /**
-     * Adding missing url validation error.
-     *
-     * @param context context.
-     * @param tagSpec tag spec.
-     * @param result validation result.
-     */
-    @Override
-    public void missingUrl(@Nonnull final Context context,
-                           @Nonnull final ValidatorProtos.TagSpec tagSpec,
-                           @Nonnull final  ValidatorProtos.ValidationResult.Builder result) {
-        final List<String> params = new ArrayList<>();
-        params.add(this.attrName);
-        params.add(TagSpecUtils.getTagSpecName(tagSpec));
-        context.addError(
-                ValidatorProtos.ValidationError.Code.MISSING_URL,
-                context.getLineCol(),
-                /* params */params,
-                TagSpecUtils.getTagSpecUrl(tagSpec),
-                result);
-    }
-
-    /**
-     * Adding invalid url validation error.
-     *
-     * @param context context.
-     * @param url the url.
-     * @param tagSpec tag spec.
-     * @param result validation result.
-     */
-    @Override
-    public void invalidUrl(@Nonnull final Context context,
-                           @Nonnull final String url,
-                           @Nonnull final ValidatorProtos.TagSpec tagSpec,
-                           @Nonnull final  ValidatorProtos.ValidationResult.Builder result) {
-        final List<String> params = new ArrayList<>();
-        params.add(this.attrName);
-        params.add(TagSpecUtils.getTagSpecName(tagSpec));
-        params.add(url);
-        context.addError(
-                ValidatorProtos.ValidationError.Code.INVALID_URL,
-                context.getLineCol(),
-                /* params */params,
-                TagSpecUtils.getTagSpecUrl(tagSpec),
-                result);
-    }
-
-    /**
-     * Adding invalid url protocol error.
-     *
-     * @param context context.
-     * @param protocol the protocol.
-     * @param tagSpec tag spec.
-     * @param result validation result.
-     */
-    @Override
-    public void invalidUrlProtocol(@Nonnull final Context context,
-                       @Nonnull final String protocol,
-                       @Nonnull final ValidatorProtos.TagSpec tagSpec,
-                       @Nonnull final  ValidatorProtos.ValidationResult.Builder result) {
-        final List<String> params = new ArrayList<>();
-        params.add(this.attrName);
-        params.add(TagSpecUtils.getTagSpecName(tagSpec));
-        params.add(protocol);
-        context.addError(
-                ValidatorProtos.ValidationError.Code.INVALID_URL_PROTOCOL,
-                context.getLineCol(),
-                /* params */params,
-                TagSpecUtils.getTagSpecUrl(tagSpec),
-                result);
-    }
-
-    /**
-     * Adding disallowed relative url error.
-     *
-     * @param context context.
-     * @param url the url.
-     * @param tagSpec tag spec.
-     * @param result validation result.
-     */
-    @Override
-    public void disallowedRelativeUrl(@Nonnull final Context context,
-                          @Nonnull final String url,
-                          @Nonnull final ValidatorProtos.TagSpec tagSpec,
-                          @Nonnull final  ValidatorProtos.ValidationResult.Builder result) {
-        final List<String> params = new ArrayList<>();
-        params.add(this.attrName);
-        params.add(TagSpecUtils.getTagSpecName(tagSpec));
-        params.add(url);
-        context.addError(
-                ValidatorProtos.ValidationError.Code.DISALLOWED_RELATIVE_URL,
-                context.getLineCol(),
-                /* params */params,
-                TagSpecUtils.getTagSpecUrl(tagSpec),
-                result);
-    }
-
-    /** Attribute name. */
-    private final String attrName;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/UrlErrorInStylesheetAdapter.java b/validator/java/src/main/java/dev/amp/validator/UrlErrorInStylesheetAdapter.java
deleted file mode 100644
index a2fd88787c64f..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/UrlErrorInStylesheetAdapter.java
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.utils.TagSpecUtils;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * URL error in stylesheet adapter.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class UrlErrorInStylesheetAdapter implements UrlErrorAdapter {
-    /**
-     * Constructor.
-     *
-     * @param lineNumber line number.
-     * @param columnNumber column number.
-     */
-    public UrlErrorInStylesheetAdapter(final int lineNumber, final int columnNumber) {
-        this.lineNumber = lineNumber;
-        this.columnNumber = columnNumber;
-    }
-
-    /**
-     * Adding missing url validation error.
-     *
-     * @param context context.
-     * @param tagSpec tag spec.
-     * @param result validation result.
-     */
-    @Override
-    public void missingUrl(@Nonnull final Context context,
-                           @Nonnull final ValidatorProtos.TagSpec tagSpec,
-                           @Nonnull final  ValidatorProtos.ValidationResult.Builder result) {
-        final List<String> params = new ArrayList<>();
-        params.add(TagSpecUtils.getTagSpecName(tagSpec));
-        context.addError(
-                ValidatorProtos.ValidationError.Code.CSS_SYNTAX_MISSING_URL,
-                lineNumber,
-                columnNumber,
-                /* params */params,
-                TagSpecUtils.getTagSpecUrl(tagSpec),
-                result);
-    }
-
-    /**
-     * Adding invalid url validation error.
-     *
-     * @param context context.
-     * @param url the url.
-     * @param tagSpec tag spec.
-     * @param result validation result.
-     */
-    @Override
-    public void invalidUrl(@Nonnull final Context context,
-                           @Nonnull final String url,
-                           @Nonnull final ValidatorProtos.TagSpec tagSpec,
-                           @Nonnull final  ValidatorProtos.ValidationResult.Builder result) {
-        final List<String> params = new ArrayList<>();
-        params.add(TagSpecUtils.getTagSpecName(tagSpec));
-        params.add(url);
-        context.addError(
-                ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_URL,
-                lineNumber,
-                columnNumber,
-                /* params */params,
-                TagSpecUtils.getTagSpecUrl(tagSpec),
-                result);
-    }
-
-    /**
-     * Adding invalid url protocol error.
-     *
-     * @param context context.
-     * @param protocol the protocol.
-     * @param tagSpec tag spec.
-     * @param result validation result.
-     */
-    @Override
-    public void invalidUrlProtocol(@Nonnull final Context context,
-                                   @Nonnull final String protocol,
-                                   @Nonnull final ValidatorProtos.TagSpec tagSpec,
-                                   @Nonnull final  ValidatorProtos.ValidationResult.Builder result) {
-        final List<String> params = new ArrayList<>();
-        params.add(TagSpecUtils.getTagSpecName(tagSpec));
-        params.add(protocol);
-        context.addError(
-                ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_URL_PROTOCOL,
-                lineNumber,
-                columnNumber,
-                /* params */params,
-                TagSpecUtils.getTagSpecUrl(tagSpec),
-                result);
-    }
-
-    /**
-     * Adding disallowed relative url error.
-     *
-     * @param context context.
-     * @param url the url.
-     * @param tagSpec tag spec.
-     * @param result validation result.
-     */
-    @Override
-    public void disallowedRelativeUrl(@Nonnull final Context context,
-                                      @Nonnull final String url,
-                                      @Nonnull final ValidatorProtos.TagSpec tagSpec,
-                                      @Nonnull final  ValidatorProtos.ValidationResult.Builder result) {
-        final List<String> params = new ArrayList<>();
-        params.add(TagSpecUtils.getTagSpecName(tagSpec));
-        params.add(url);
-        context.addError(
-                ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_RELATIVE_URL,
-                lineNumber,
-                columnNumber,
-                /* params */params,
-                TagSpecUtils.getTagSpecUrl(tagSpec),
-                result);
-    }
-
-    /** A line number. */
-    private final int lineNumber;
-
-    /** A column number. */
-    private final int columnNumber;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/ValidateTagResult.java b/validator/java/src/main/java/dev/amp/validator/ValidateTagResult.java
deleted file mode 100644
index 0677856f12747..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/ValidateTagResult.java
+++ /dev/null
@@ -1,109 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import javax.annotation.Nonnull;
-
-/**
- * This class contains the validation result and the best match tag spec.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ValidateTagResult {
-    /**
-     * Constructor.
-     * @param validationResult validation result.
-     * @param parsedTagSpec parsed tag spec.
-     */
-    public ValidateTagResult(@Nonnull final ValidatorProtos.ValidationResult.Builder validationResult,
-                             final ParsedTagSpec parsedTagSpec) {
-        this.validationResult = validationResult;
-        this.bestMatchTagSpec = parsedTagSpec;
-    }
-
-    /**
-     * Return best match tag spec.
-     * @return returns best match tag spec.
-     */
-    public ParsedTagSpec getBestMatchTagSpec() {
-        return bestMatchTagSpec;
-    }
-
-    /**
-     * Setting the best match tag spec.
-     * @param bestMatchTagSpec best match tag spec.
-     */
-    public void setBestMatchTagSpec(@Nonnull final ParsedTagSpec bestMatchTagSpec) {
-        this.bestMatchTagSpec = bestMatchTagSpec;
-    }
-
-    /**
-     * Getting the validation result.
-     * @return returns the validation result.
-     */
-    public ValidatorProtos.ValidationResult.Builder getValidationResult() {
-        return validationResult;
-    }
-
-    /**
-     * Setting the validation result.
-     * @param validationResult validation result.
-     */
-    public void setValidationResult(@Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) {
-        this.validationResult = validationResult;
-    }
-
-
-    /**
-     * Setter for inlineStyleCssBytes
-     *
-     * @param inlineStyleCssBytes the allowed byte length for css
-     */
-    public void setInlineStyleCssBytes(final int inlineStyleCssBytes) {
-      this.inlineStyleCssBytes = inlineStyleCssBytes;
-    }
-
-    /**
-     * Getter for inlineStyleCssBytes
-     * @return the allowed byte length for css
-     */
-    public int getInlineStyleCssBytes() {
-      return inlineStyleCssBytes;
-    }
-
-    /**
-     * Validation result.
-     */
-    private ValidatorProtos.ValidationResult.Builder validationResult;
-
-    /**
-     * Best match tag spec.
-     */
-    private ParsedTagSpec bestMatchTagSpec;
-
-    /**
-     * inline style allowed byte length
-     */
-    private int inlineStyleCssBytes;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/AtRule.java b/validator/java/src/main/java/dev/amp/validator/css/AtRule.java
deleted file mode 100644
index 06460ac724ce3..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/AtRule.java
+++ /dev/null
@@ -1,129 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.visitor.RuleVisitor;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * Object model for @rules of css content.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class AtRule extends Rule {
-
-    /**
-     * Constructor.
-     * @param name of AtRule
-     */
-    public AtRule(@Nonnull final String name) {
-        super();
-        this.rules = new ArrayList<>();
-        this.declarations = new ArrayList<>();
-        this.prelude = new ArrayList<>();
-        this.name = name;
-    }
-
-    /**
-     * Return type of token.
-     *
-     * @return TokenType.AT_RULE
-     */
-    @Override
-    public TokenType getTokenType() {
-        return TokenType.AT_RULE;
-    }
-
-    /**
-     * Setter for rules.
-     *
-     * @param rules to set within at rules
-     */
-    public void setRules(@Nonnull final List<Rule> rules) {
-        this.rules = rules;
-    }
-
-    /**
-     * Setter for declarations.
-     *
-     * @param declarations to set within at rules
-     */
-    public void setDeclarations(@Nonnull final List<Declaration> declarations) {
-        this.declarations = declarations;
-    }
-
-    /**
-     * Getter of name.
-     *
-     * @return name
-     */
-    public String getName() {
-        if (name.length() > 0) {
-            return name.substring(1);
-        }
-
-        return name;
-    }
-
-    /**
-     * Getter for prelude.
-     *
-     * @return prelude list
-     */
-    public List<com.steadystate.css.parser.Token> getPrelude() {
-        return prelude;
-    }
-
-    /**
-     * Visit a rule.
-     *
-     * @param visitor rule visitor.
-     */
-    @Override
-    public void accept(@Nonnull final RuleVisitor visitor) throws CssValidationException {
-        visitor.visitAtRule(this);
-        for (final Rule rule : this.rules) {
-            rule.accept(visitor);
-        }
-        for (final Declaration declaration : this.declarations) {
-            declaration.accept(visitor);
-        }
-        visitor.leaveAtRule(this);
-    }
-
-    @Nonnull
-    private List<Rule> rules;
-
-    @Nonnull
-    private List<Declaration> declarations;
-
-    @Nonnull
-    private final String name;
-
-    @Nonnull
-    private List<com.steadystate.css.parser.Token> prelude;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/Canonicalizer.java b/validator/java/src/main/java/dev/amp/validator/css/Canonicalizer.java
deleted file mode 100644
index 31f415b488851..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/Canonicalizer.java
+++ /dev/null
@@ -1,513 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.ValidatorProtos;
-import com.steadystate.css.parser.Token;
-import dev.amp.validator.utils.CssSpecUtils;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-import java.util.Map;
-
-import static dev.amp.validator.utils.CssSpecUtils.BlockType.PARSE_AS_DECLARATIONS;
-import static dev.amp.validator.utils.CssSpecUtils.BlockType.PARSE_AS_RULES;
-import static dev.amp.validator.utils.CssSpecUtils.asciiMatch;
-import static dev.amp.validator.utils.CssSpecUtils.stripVendorPrefix;
-
-/**
- * Process and validate a css document.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class Canonicalizer {
-
-    private static final int K_MAXIMUM_CSS_RECURSION = 100;
-
-    /**
-     * Constructor for canonicalizer.
-     *
-     * @param atRuleSpec  the AtRule Spec to validate against
-     * @param defaultSpec the block type to process as
-     */
-    public Canonicalizer(@Nonnull final Map<String, CssSpecUtils.BlockType> atRuleSpec,
-                         @Nonnull final CssSpecUtils.BlockType defaultSpec) {
-        this.atRuleSpec = atRuleSpec;
-        this.defaultAtRuleSpec = defaultSpec;
-    }
-
-    /**
-     * Parses and returns a list of rules, such as at the top level of a stylesheet.
-     * Return list has only QualifiedRule's and AtRule's as top level elements.
-     *
-     * @param tokenList the css content
-     * @param topLevel  the relative top level to parse from
-     * @param errors    output array for the errors.
-     * @return list of rules
-     * @throws CssValidationException Css Validation Exception
-     */
-    public List<Rule> parseAListOfRules(@Nonnull final List<Token> tokenList, final boolean topLevel,
-                                        @Nonnull final List<ErrorToken> errors) throws CssValidationException {
-        TokenStream tokenStream = new TokenStream(tokenList);
-        final List<Rule> rules = new ArrayList<>();
-
-        while (true) {
-            tokenStream.consume();
-            TokenType current = CssTokenUtil.getTokenType(tokenStream.current());
-            if (current == TokenType.WHITESPACE) {
-                continue;
-            } else if (current == TokenType.EOF_TOKEN) {
-                return rules;
-            } else if (current == TokenType.CDO
-                    || current == TokenType.CDC) {
-                if (topLevel) {
-                    continue;
-                }
-                this.parseAQualifiedRule(tokenStream, rules, errors);
-            } else if (current == TokenType.AT_KEYWORD) {
-                rules.add(this.parseAnAtRule(tokenStream, errors));
-            } else {
-                this.parseAQualifiedRule(tokenStream, rules, errors);
-            }
-        }
-    }
-
-    /**
-     * Extracts an atRule from beginning of token stream
-     *
-     * @param tokenStream the css content to process
-     * @param errors      generated from parse job
-     * @return an AtRule extracted from the token stream
-     * @throws CssValidationException Css Validation Exception
-     */
-    private AtRule parseAnAtRule(@Nonnull final TokenStream tokenStream,
-                                 @Nonnull final List<ErrorToken> errors) throws CssValidationException {
-        if (CssTokenUtil.getTokenType(tokenStream.current()) != TokenType.AT_KEYWORD) {
-            throw new CssValidationException("Internal Error: parseAnAtRule precondition not met");
-        }
-
-        final Token startToken = tokenStream.current();
-        final AtRule rule = new AtRule(startToken.toString());
-        CssTokenUtil.copyPosTo(startToken, rule);
-
-        while (true) {
-            tokenStream.consume();
-            final TokenType current = CssTokenUtil.getTokenType(tokenStream.current());
-            if (current == TokenType.SEMICOLON
-                    || current == TokenType.EOF_TOKEN) {
-                rule.getPrelude().add(tokenStream.current());
-                return rule;
-            }
-            if (current == TokenType.OPEN_CURLY) {
-                rule.getPrelude().add(CssTokenUtil.copyPosTo(tokenStream.current(), new EOFToken()));
-
-                List<Token> contents = extractASimpleBlock(tokenStream, errors);
-
-                switch (this.blockTypeFor(rule)) {
-                    case PARSE_AS_RULES: {
-                        rule.setRules(this.parseAListOfRules(contents, /* topLevel */ false, errors));
-                        break;
-                    }
-                    case PARSE_AS_DECLARATIONS: {
-                        rule.setDeclarations(this.parseAListOfDeclarations(contents, errors));
-                        break;
-                    }
-                    case PARSE_AS_IGNORE: {
-                        break;
-                    }
-                    default: {
-                        throw new CssValidationException(
-                                "Unrecognized blockType " + this.blockTypeFor(rule));
-                    }
-                }
-                return rule;
-            }
-            if (!consumeAComponentValue(tokenStream, rule.getPrelude(), /*depth*/0)) {
-                final List<String> params = new ArrayList<>();
-                params.add("style");
-                errors.add((ErrorToken) CssTokenUtil.copyPosTo(tokenStream.current(), new ErrorToken(
-                        ValidatorProtos.ValidationError.Code.CSS_EXCESSIVELY_NESTED, params)));
-            }
-        }
-
-    }
-
-    /**
-     * returns a list of Declarations from css content
-     *
-     * @param tokenList of tokens within a block
-     * @param errors    output array for the errors.
-     * @return a list of Declarations
-     * @throws CssValidationException Css Validation Exception
-     */
-    public List<Declaration> parseAListOfDeclarations(@Nonnull final List<Token> tokenList, @Nonnull final List<ErrorToken> errors)
-            throws CssValidationException {
-        final List<Declaration> decls = new ArrayList<>();
-        TokenStream tokenStream = new TokenStream(tokenList);
-        while (true) {
-            tokenStream.consume();
-            final TokenType current = CssTokenUtil.getTokenType(tokenStream.current());
-            if (current == TokenType.WHITESPACE
-                    || current == TokenType.SEMICOLON) {
-                continue;
-            } else if (current == TokenType.EOF_TOKEN) {
-                return decls;
-            } else if (current == TokenType.AT_KEYWORD) {
-                // The CSS3 Parsing spec allows for AT rules inside lists of
-                // declarations, but our grammar does not so we deviate a tiny bit here.
-                // We consume an AT rule, but drop it and instead push an error token.
-                final AtRule atRule = this.parseAnAtRule(tokenStream, errors);
-                final List<String> params = new ArrayList<>();
-                params.add("style");
-                params.add(atRule.getName());
-                errors.add((ErrorToken) CssTokenUtil.copyPosTo(atRule, new ErrorToken(
-                        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_AT_RULE, params)));
-            } else if (current == TokenType.IDENT) {
-                this.parseADeclaration(tokenStream, decls, errors);
-            } else {
-                final List<String> params = new ArrayList<>();
-                params.add("style");
-
-                errors.add((ErrorToken) CssTokenUtil.copyPosTo(tokenStream.current(), new ErrorToken(
-                        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_DECLARATION,
-                        params)));
-                tokenStream.reconsume();
-                while (!(CssTokenUtil.getTokenType(tokenStream.next()) == TokenType.SEMICOLON
-                        || CssTokenUtil.getTokenType(tokenStream.next()) == TokenType.EOF_TOKEN)) {
-                    tokenStream.consume();
-                    List<Token> dummyTokenList = new ArrayList<>();
-                    if (!consumeAComponentValue(tokenStream, dummyTokenList, /*depth*/0)) {
-
-                        errors.add((ErrorToken) CssTokenUtil.copyPosTo(tokenStream.current(), new ErrorToken(
-                                ValidatorProtos.ValidationError.Code.CSS_EXCESSIVELY_NESTED,
-                                params)));
-                    }
-                }
-            }
-
-        }
-    }
-
-    /**
-     * Adds one element to either declarations or errors.
-     *
-     * @param tokenStream  the css tokens to parse
-     * @param declarations output array for
-     *                     declarations
-     * @param errors       output array for the errors.
-     * @throws CssValidationException Css Validation Exception
-     */
-    public void parseADeclaration(@Nonnull final TokenStream tokenStream, @Nonnull final List<Declaration> declarations,
-                                  @Nonnull final List<ErrorToken> errors) throws CssValidationException {
-
-        if (CssTokenUtil.getTokenType(tokenStream.current()) != TokenType.IDENT) {
-            throw new CssValidationException("Internal Error: parseADeclaration precondition not met");
-        }
-
-        Token startToken = tokenStream.current();
-        final Declaration decl = (Declaration) CssTokenUtil.copyPosTo(startToken,
-                new Declaration(startToken.toString()));
-
-        while (CssTokenUtil.getTokenType(tokenStream.next()) == TokenType.WHITESPACE) {
-            tokenStream.consume();
-        }
-
-        tokenStream.consume();
-        if (!(CssTokenUtil.getTokenType(tokenStream.current()) == TokenType.COLON)) {
-            final List<String> params = new ArrayList<>();
-            params.add("style");
-
-            errors.add((ErrorToken) CssTokenUtil.copyPosTo(startToken, new ErrorToken(
-                    ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INCOMPLETE_DECLARATION,
-                    params)));
-            tokenStream.reconsume();
-            while (
-                    !(CssTokenUtil.getTokenType(tokenStream.next()) == TokenType.SEMICOLON
-                            || CssTokenUtil.getTokenType(tokenStream.next()) == TokenType.EOF_TOKEN)) {
-                tokenStream.consume();
-            }
-            return;
-        }
-
-        while (!(CssTokenUtil.getTokenType(tokenStream.next()) == TokenType.SEMICOLON
-                        || CssTokenUtil.getTokenType(tokenStream.next()) == TokenType.EOF_TOKEN)) {
-            tokenStream.consume();
-            if (!consumeAComponentValue(tokenStream, decl.getValue(), /*depth*/0)) {
-                final List<String> params = new ArrayList<>();
-                params.add("style");
-
-                errors.add((ErrorToken) CssTokenUtil.copyPosTo(startToken, new ErrorToken(
-                        ValidatorProtos.ValidationError.Code.CSS_EXCESSIVELY_NESTED,
-                        params)));
-            }
-            decl.getValue().add(CssTokenUtil.copyPosTo(tokenStream.next(), new EOFToken()));
-
-            boolean foundImportant = false;
-            for (int i = decl.getValue().size() - 1; i >= 0; i--) {
-                if (CssTokenUtil.getTokenType(decl.getValue().get(i)) == TokenType.WHITESPACE) {
-                    continue;
-                } else if (
-                        CssTokenUtil.getTokenType(decl.getValue().get(i)) == TokenType.IDENT
-                                && asciiMatch(decl.getValue().get(i), "important")) {
-                    foundImportant = true;
-                } else if (foundImportant && CssTokenUtil.getTokenType(decl.getValue().get(i)) == TokenType.DELIM
-                        && decl.getValue().get(i).getValue().equals("!")) {
-                    decl.getValue().subList(i, decl.getValue().size()).clear();
-                    decl.setImportant(true);
-                    break;
-                } else {
-                    break;
-                }
-            }
-        }
-
-        declarations.add(decl);
-    }
-
-    /**
-     * Returns a type telling us how to canonicalize a given AT rule's block.
-     *
-     * @param atRule
-     * @return the block type of an atRule
-     */
-    private CssSpecUtils.BlockType blockTypeFor(@Nonnull final AtRule atRule) {
-        final CssSpecUtils.BlockType maybeBlockType = this.atRuleSpec.get(stripVendorPrefix(atRule.getName()));
-        if (maybeBlockType != null) {
-            return maybeBlockType;
-        } else {
-            return this.defaultAtRuleSpec;
-        }
-    }
-
-    /**
-     * Returns a simple block's contents in tokenStream, excluding the
-     * start/end grouping token, and appended with an EOFToken.
-     *
-     * @param tokenStream the token stream of html content
-     * @param errors      generated from extraction
-     * @return a list of tokens in a block.
-     * @throws CssValidationException Css Validation Exception
-     */
-    private List<Token> extractASimpleBlock(@Nonnull final TokenStream tokenStream,
-                                            @Nonnull final List<ErrorToken> errors) throws CssValidationException {
-        /** @type {!Array<!parse_css.Token>} */
-        final List<Token> consumedTokens = new ArrayList<Token>();
-        if (!consumeASimpleBlock(tokenStream, consumedTokens, /*depth*/0)) {
-            final List<String> params = new ArrayList<>();
-            params.add("style");
-            errors.add((ErrorToken) CssTokenUtil.copyPosTo(tokenStream.current(), new ErrorToken(
-                    ValidatorProtos.ValidationError.Code.CSS_EXCESSIVELY_NESTED, params)));
-        }
-
-        // A simple block always has a start token (e.g. '{') and
-        // either a closing token or EOF token.
-        if (consumedTokens.size() < 2) {
-            throw new CssValidationException("size of consumedTokens less than 2");
-        }
-
-        // Exclude the start token. Convert end token to EOF.
-        final int end = consumedTokens.size() - 1;
-        consumedTokens.set(end, CssTokenUtil.copyPosTo(consumedTokens.get(end), new EOFToken()));
-        return consumedTokens.subList(1, consumedTokens.size());
-    }
-
-    /**
-     * Consumes one or more tokens from a tokenStream, appending them to a
-     * tokenList. If exceeds depth, returns false
-     *
-     * @param tokenStream the stream of token content
-     * @param tokenList   output array for tokens.
-     * @param depth the depth to check against exceeding
-     * @return true iff finished consuming without exceeding depth
-     * @throws CssValidationException Css Validation Exception
-     */
-    public static boolean consumeAComponentValue(@Nonnull final TokenStream tokenStream,
-                                                 @Nonnull final List<Token> tokenList,
-                                                 final int depth) throws CssValidationException {
-        if (depth > K_MAXIMUM_CSS_RECURSION) {
-            return false;
-        }
-        final TokenType current = CssTokenUtil.getTokenType(tokenStream.current());
-        if (current == TokenType.OPEN_CURLY
-                || current == TokenType.OPEN_SQUARE
-                || current == TokenType.OPEN_PAREN) {
-            if (!consumeASimpleBlock(tokenStream, tokenList, depth + 1)) {
-                return false;
-            }
-        } else if (current == TokenType.FUNCTION_TOKEN) {
-            if (!consumeAFunction(tokenStream, tokenList, depth + 1)) {
-                return false;
-            }
-        } else {
-            tokenList.add(tokenStream.current());
-        }
-        return true;
-    }
-
-    /**
-     * Appends a function's contents to a tokenList, consuming from the
-     * stream all those tokens that it adds to the tokenList, including
-     * the function token and end grouping token. If exceeds depth, returns false.
-     *
-     * @param tokenStream of html document block
-     * @param tokenList   output array for tokens.
-     * @param depth       to check against exceeding
-     * @return true iff depth not exceeded
-     * @throws CssValidationException Css Validation Exception
-     */
-    private static boolean consumeAFunction(@Nonnull final TokenStream tokenStream,
-                                            @Nonnull final List<Token> tokenList,
-                                            final int depth) throws CssValidationException {
-        if (depth > K_MAXIMUM_CSS_RECURSION) {
-            return false;
-        }
-        if (CssTokenUtil.getTokenType(tokenStream.current()) != TokenType.FUNCTION_TOKEN) {
-            throw new CssValidationException("Internal Error: consumeAFunction precondition not met");
-        }
-        tokenList.add(tokenStream.current());
-        while (true) {
-            tokenStream.consume();
-            final TokenType current = CssTokenUtil.getTokenType(tokenStream.current());
-            if (current == TokenType.EOF_TOKEN
-                    || current == TokenType.CLOSE_PAREN) {
-                tokenList.add(tokenStream.current());
-                return true;
-            } else {
-                if (!consumeAComponentValue(tokenStream, tokenList, depth + 1)) {
-                    return false;
-                }
-            }
-        }
-    }
-
-    /**
-     * Appends a simple block's contents to a tokenList, consuming from
-     * the stream all those tokens that it adds to the tokenList,
-     * including the start/end grouping token. If exceeds depth, returns false.
-     *
-     * @param tokenStream of html document block
-     * @param tokenList   output array for tokens.
-     * @param depth       to check against exceeding
-     * @return true iff depth not exceeded
-     * @throws CssValidationException Css Validation Exception
-     */
-    private static boolean consumeASimpleBlock(@Nonnull final TokenStream tokenStream,
-                                               @Nonnull final List<Token> tokenList,
-                                               final int depth) throws CssValidationException {
-        if (depth > K_MAXIMUM_CSS_RECURSION) {
-            return false;
-        }
-        TokenType current = CssTokenUtil.getTokenType(tokenStream.current());
-        if (current != TokenType.OPEN_CURLY
-                && current != TokenType.OPEN_SQUARE && current != TokenType.OPEN_PAREN) {
-            throw new CssValidationException("Internal Error: consumeASimpleBlock precondition not met");
-
-        }
-
-        final Token startToken = tokenStream.current();
-        final String mirror = CssTokenUtil.getMirror(startToken);
-
-        tokenList.add(startToken);
-        while (true) {
-            tokenStream.consume();
-            current = CssTokenUtil.getTokenType(tokenStream.current());
-            if (current == TokenType.EOF_TOKEN) {
-                tokenList.add(tokenStream.current());
-                return true;
-            } else if (
-                    (current == TokenType.CLOSE_CURLY
-                            || current == TokenType.CLOSE_SQUARE
-                            || current == TokenType.CLOSE_PAREN)
-                            && (tokenStream.current()).toString().equals(mirror)) {
-//                            /** @type {parse_css.GroupingToken} */(tokenStream.current()).getValue() ==
-//                            mirror) {
-                tokenList.add(tokenStream.current());
-                return true;
-            } else {
-                if (!consumeAComponentValue(tokenStream, tokenList, depth + 1)) {
-                    return false;
-                }
-            }
-        }
-    }
-
-    /**
-     * Parses one Qualified rule or ErrorToken appended to either rules or errors
-     * respectively. Rule will include a prelude with the CSS selector (if any)
-     * and a list of declarations.
-     *
-     * @param tokenStream input token stream.
-     * @param rules       output array for new rule
-     * @param errors      output array for new error.
-     * @throws CssValidationException Css Validation Exception
-     */
-    private void parseAQualifiedRule(@Nonnull final TokenStream tokenStream, @Nonnull final List<Rule> rules,
-                                     @Nonnull final List<ErrorToken> errors) throws CssValidationException {
-        if (CssTokenUtil.getTokenType(tokenStream.current()) == TokenType.EOF_TOKEN
-                || CssTokenUtil.getTokenType(tokenStream.current()) == TokenType.AT_KEYWORD) {
-            throw new CssValidationException("Internal Error: parseAQualifiedRule precondition not met");
-        }
-
-        final QualifiedRule rule = (QualifiedRule) CssTokenUtil.copyPosTo(tokenStream.current(), new QualifiedRule());
-        tokenStream.reconsume();
-        while (true) {
-            tokenStream.consume();
-            final TokenType current = CssTokenUtil.getTokenType(tokenStream.current());
-            if (current == TokenType.EOF_TOKEN) {
-                final List<String> params = new ArrayList<>();
-                params.add("style");
-                errors.add((ErrorToken) CssTokenUtil.copyPosTo(rule, new ErrorToken(
-                        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_EOF_IN_PRELUDE_OF_QUALIFIED_RULE, params)));
-                return;
-            }
-            if (current == TokenType.OPEN_CURLY) {
-                rule.getPrelude().add(
-                        CssTokenUtil.copyPosTo(tokenStream.current(), new EOFToken()));
-
-                // This consumes declarations (ie: "color: red;" ) inside
-                // a qualified rule as that rule's value.
-                rule.setDeclarations(this.parseAListOfDeclarations(
-                        extractASimpleBlock(tokenStream, errors), errors));
-
-                rules.add(rule);
-                return;
-            }
-//            // This consumes a CSS selector as the rules prelude.
-            if (!consumeAComponentValue(tokenStream, rule.getPrelude(), /*depth*/0)) {
-                final List<String> params = new ArrayList<>();
-                params.add("style");
-                errors.add((ErrorToken) CssTokenUtil.copyPosTo(tokenStream.current(),
-                        new ErrorToken(ValidatorProtos.ValidationError.Code.CSS_EXCESSIVELY_NESTED, params)));
-            }
-        }
-    }
-
-    @Nonnull
-    private final Map<String, CssSpecUtils.BlockType> atRuleSpec;
-
-    @Nonnull
-    private final CssSpecUtils.BlockType defaultAtRuleSpec;
-
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/CssErrorHandler.java b/validator/java/src/main/java/dev/amp/validator/css/CssErrorHandler.java
deleted file mode 100644
index 98cf2036751fd..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/CssErrorHandler.java
+++ /dev/null
@@ -1,62 +0,0 @@
-package dev.amp.validator.css;
-
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-import org.w3c.css.sac.CSSException;
-import org.w3c.css.sac.CSSParseException;
-import org.w3c.css.sac.ErrorHandler;
-
-import javax.annotation.Nonnull;
-
-/**
- * Error handler for css errors
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class CssErrorHandler implements ErrorHandler {
-
-    /**
-     * Error handler for warning
-     * @param e exception caught
-     */
-    @Override
-    public void warning(@Nonnull final CSSParseException e) throws CSSException {
-    }
-
-    /**
-     * Error handler for error
-     * @param e exception caught
-     */
-    @Override
-    public void error(@Nonnull final CSSParseException e) throws CSSException {
-    }
-
-    /**
-     * Error handler for fatal error
-     * @param e exception caught
-     */
-    @Override
-    public void fatalError(@Nonnull final CSSParseException e) throws CSSException {
-    }
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/CssParser.java b/validator/java/src/main/java/dev/amp/validator/css/CssParser.java
deleted file mode 100644
index eb9718f240e24..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/CssParser.java
+++ /dev/null
@@ -1,165 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.ValidatorProtos;
-import com.steadystate.css.parser.SACParserCSS3;
-import com.steadystate.css.parser.CssCharStream;
-import com.steadystate.css.parser.ParseException;
-import com.steadystate.css.parser.ListableTokenManager;
-import com.steadystate.css.parser.Token;
-import com.steadystate.css.parser.TokenMgrError;
-import org.w3c.css.sac.CSSParseException;
-import org.w3c.css.sac.InputSource;
-
-import javax.annotation.Nonnull;
-import java.io.IOException;
-import java.io.StringReader;
-import java.util.ArrayList;
-import java.util.List;
-
-import static dev.amp.validator.css.CssTokenUtil.copyPosTo;
-
-/**
- * A utility to parse css text into a list of tokens.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public final class CssParser extends SACParserCSS3 {
-
-    /**
-     * Constructor.
-     *
-     * @param cssText the stylesheet data.
-     * @param line    line number.
-     * @param col     column number.
-     * @param errors  the global error token list for css validation errors.
-     */
-    public CssParser(@Nonnull final String cssText,
-                     final int line,
-                     final int col,
-                     @Nonnull final List<ErrorToken> errors) {
-        this.errors = errors;
-        setErrorHandler(new CssErrorHandler());
-        this.line = line;
-        this.col = col;
-
-        /** Initializing the token manager. */
-        this.source = new InputSource(new StringReader(cssText));
-        final ListableTokenManager manager =
-                new ListableTokenManager(new CssCharStream(source.getCharacterStream(), 1, 1));
-        ReInit(manager);
-    }
-
-    /**
-     * Override to handle specific validation errors encountered during tokenization.
-     *
-     * @param key the type of the exception
-     * @param ex  the exception to handle
-     * @return a populated CSSParseException
-     */
-    @Override
-    protected CSSParseException toCSSParseException(final String key, @Nonnull final ParseException ex) {
-        try {
-            // catch CSS_SYNTAX_STRAY_TRAILING_BACKSLASH
-            if (ex.currentToken != null && ex.currentToken.next != null
-                    && ex.currentToken.next.image != null && ex.currentToken.next.image.equals("\\")) {
-                final List<String> params = new ArrayList<>();
-                params.add("style");
-                this.errors.add((ErrorToken) copyPosTo(ex.currentToken.next, new ErrorToken(
-                        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_STRAY_TRAILING_BACKSLASH,
-                        params)));
-            }
-
-            // catch CSS_SYNTAX_STRAY_TRAILING_BACKSLASH
-            if (ex.currentToken != null && ex.currentToken.next != null
-                    && ex.currentToken.next.image != null
-                    && (ex.currentToken.next.image.equals("\"") || ex.currentToken.next.image.equals("\'"))) {
-                final List<String> params = new ArrayList<>();
-                params.add("style");
-                this.errors.add((ErrorToken) copyPosTo(ex.currentToken.next, new ErrorToken(
-                        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_UNTERMINATED_STRING,
-                        params)));
-            }
-        } catch (CssValidationException e) {
-            /**ignore*/
-        }
-        return super.toCSSParseException(key, ex);
-    }
-
-    @Override
-    protected CSSParseException toCSSParseException(final TokenMgrError ex) {
-        if (((ListableTokenManager) (this.token_source)).getCurLexState() == 1) {
-            final List<String> params = new ArrayList<>();
-            params.add("style");
-
-            try {
-                this.errors.add((ErrorToken) copyPosTo(this.token, new ErrorToken(
-                        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_UNTERMINATED_COMMENT,
-                        params)));
-                ((ListableTokenManager) (this.token_source)).getParsedTokens().add(new EOFToken());
-            } catch (CssValidationException e) {
-                /**ignore*/
-            }
-        }
-        return super.toCSSParseException(ex);
-    }
-
-    /**
-     * Generates a list of cssparser Tokens extracted from cssText.
-     *
-     * @return a list of Tokens found.
-     * @throws IOException IO exception.
-     */
-    public List<Token> tokenize() throws IOException {
-        parseStyleSheet(source);
-        return ((ListableTokenManager) token_source).getParsedTokens();
-    }
-
-    /**
-     * Returns the token errors.
-     * @return returns the token errors.
-     */
-    public List<ErrorToken> getErrors() {
-        return errors;
-    }
-
-    @Nonnull
-    private List<ErrorToken> errors;
-
-    /**
-     * Line number.
-     */
-    private int line;
-
-    /**
-     * Column number.
-     */
-    private int col;
-
-    /**
-     * Source data.
-     */
-    private InputSource source;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/CssParsingConfig.java b/validator/java/src/main/java/dev/amp/validator/css/CssParsingConfig.java
deleted file mode 100644
index 0acefea21451b..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/CssParsingConfig.java
+++ /dev/null
@@ -1,106 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.utils.CssSpecUtils;
-
-import javax.annotation.Nonnull;
-import java.util.HashMap;
-import java.util.Map;
-
-/**
- * This class holds the CSS parsing configuration.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class CssParsingConfig {
-
-    /**
-     * Constructor for CssParsingConfig.
-     *
-     * @param atRuleSpec  the AtRule spec to validate against
-     * @param defaultSpec the default blocktype to validate for
-     */
-    public CssParsingConfig(@Nonnull final Map<String, CssSpecUtils.BlockType> atRuleSpec,
-                            @Nonnull final CssSpecUtils.BlockType defaultSpec) {
-        // TODO: atRuleSpec could be split into a string and BlockType, as the map is only ever size = 1
-        this.atRuleSpec = atRuleSpec;
-        this.defaultSpec = defaultSpec;
-    }
-
-    /**
-     * Generates a CssParsingConfig from a CssSpec.
-     *
-     * @return a CssParsingConfig representing the CssSpec
-     */
-    public static CssParsingConfig computeCssParsingConfig() {
-      final Map<String, CssSpecUtils.BlockType> ampAtRuleParsingSpec = new HashMap<>();
-      ampAtRuleParsingSpec.put("font-face", CssSpecUtils.BlockType.PARSE_AS_DECLARATIONS);
-      ampAtRuleParsingSpec.put("keyframes", CssSpecUtils.BlockType.PARSE_AS_RULES);
-      ampAtRuleParsingSpec.put("media", CssSpecUtils.BlockType.PARSE_AS_RULES);
-      ampAtRuleParsingSpec.put("page", CssSpecUtils.BlockType.PARSE_AS_DECLARATIONS);
-      ampAtRuleParsingSpec.put("supports", CssSpecUtils.BlockType.PARSE_AS_RULES);
-
-      final CssParsingConfig config =
-
-        new CssParsingConfig(ampAtRuleParsingSpec, CssSpecUtils.BlockType.PARSE_AS_IGNORE);
-
-      return config;
-    }
-
-  /**
-     * Getter for underlying AtRule spec.
-     *
-     * @return the AtRule spec
-     */
-    public Map<String, CssSpecUtils.BlockType> getAtRuleSpec() {
-        return this.atRuleSpec;
-    }
-
-    /**
-     * Getter for underlying default spec default spec.
-     *
-     * @return the default spec blocktype
-     */
-    public CssSpecUtils.BlockType getDefaultSpec() {
-        return this.defaultSpec;
-    }
-
-    /**
-     * Setter for underlying default spec blocktype spec.
-     *
-     * @param defaultSpec the value to set default spec to.
-     */
-    public void setDefaultSpec(@Nonnull final CssSpecUtils.BlockType defaultSpec) {
-        this.defaultSpec = defaultSpec;
-    }
-
-    /** Default block type. */
-    @Nonnull
-    private CssSpecUtils.BlockType defaultSpec;
-
-    /** AtRuleSpec map. */
-    @Nonnull
-    private Map<String, CssSpecUtils.BlockType> atRuleSpec;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/CssTokenUtil.java b/validator/java/src/main/java/dev/amp/validator/css/CssTokenUtil.java
deleted file mode 100644
index 60471890bf06f..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/CssTokenUtil.java
+++ /dev/null
@@ -1,142 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import com.steadystate.css.parser.SACParserCSS3Constants;
-import com.steadystate.css.parser.Token;
-
-import javax.annotation.Nonnull;
-import java.util.HashMap;
-import java.util.Map;
-
-/**
- * General utility methods to map token types to token kinds from cssparser library.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public final class CssTokenUtil {
-
-    /**
-     * Default constructor
-     */
-    private CssTokenUtil() {
-
-    }
-
-    // mapping for tokens that are defined under SACParserCSS3Constants
-    private static final Map<Integer, TokenType> KIND_TO_TOKENTYPE;
-
-    // mirror map for grouping tokens
-    private static final Map<String, String> REFLECT_TOKEN;
-
-    static {
-        KIND_TO_TOKENTYPE = new HashMap<>();
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.S, TokenType.WHITESPACE);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.EOF, TokenType.EOF_TOKEN);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.ATKEYWORD, TokenType.AT_KEYWORD);
-
-        // these are both @ keywords and will be treated the same as other @ keywords
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.MEDIA_SYM, TokenType.AT_KEYWORD);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.FONT_FACE_SYM, TokenType.AT_KEYWORD);
-
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.CDC, TokenType.CDC);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.CDO, TokenType.CDO);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.SEMICOLON, TokenType.SEMICOLON);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.LBRACE, TokenType.OPEN_CURLY);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.RBRACE, TokenType.CLOSE_CURLY);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.LSQUARE, TokenType.OPEN_SQUARE);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.RSQUARE, TokenType.CLOSE_SQUARE);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.LROUND, TokenType.OPEN_PAREN);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.RROUND, TokenType.CLOSE_PAREN);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.COLON, TokenType.COLON);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.COMMA, TokenType.COMMA);
-        // TODO: verify delim mappings
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.UNKNOWN, TokenType.DELIM);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.ASTERISK, TokenType.DELIM);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.PLUS, TokenType.DELIM);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.MINUS, TokenType.DELIM);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.DOT, TokenType.DELIM);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.TILDE, TokenType.DELIM);
-
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.ONLY, TokenType.IDENT);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.NOT, TokenType.IDENT);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.AND, TokenType.IDENT);
-
-        // TODO : check this
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.FUNCTION, TokenType.FUNCTION_TOKEN);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.IDENT, TokenType.IDENT);
-
-        // TODO : verify uri and url are interchangeable for validation
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.URL, TokenType.URL);
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.URI, TokenType.URL);
-
-        KIND_TO_TOKENTYPE.put(SACParserCSS3Constants.STRING, TokenType.STRING);
-
-        REFLECT_TOKEN = new HashMap<>();
-        REFLECT_TOKEN.put("[", "]");
-        REFLECT_TOKEN.put("(", ")");
-        REFLECT_TOKEN.put("{", "}");
-
-        REFLECT_TOKEN.put("]", "[");
-        REFLECT_TOKEN.put(")", "(");
-        REFLECT_TOKEN.put("}", "{");
-    }
-
-
-    /**
-     * Overloaded method to return a TokenType, given a CSS3 Token
-     *
-     * @param token of CSS3 Token type
-     * @return a TokenType enum value useful to Canonicalizer
-     */
-    public static TokenType getTokenType(@Nonnull final Token token) {
-        return KIND_TO_TOKENTYPE.get(token.kind);
-    }
-
-    /**
-     * Copies the line / col values of |this| to |other|.
-     *
-     * @param css3Token is the token to copy location from.
-     * @param other     is the value receiving the location values.
-     * @return other
-     */
-    public static dev.amp.validator.css.Token copyPosTo(@Nonnull final Token css3Token,
-                                                    @Nonnull final dev.amp.validator.css.Token other) {
-        other.setCol(css3Token.beginColumn);
-        other.setLine(css3Token.beginLine);
-
-        return other;
-    }
-
-    /**
-     * Returns a mirroring character for a token with a reflective match
-     *
-     * @param token of interest.
-     * @return the mirroring character
-     */
-    public static String getMirror(@Nonnull final Token token) {
-        return REFLECT_TOKEN.get(token.toString().trim());
-    }
-
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/CssValidationException.java b/validator/java/src/main/java/dev/amp/validator/css/CssValidationException.java
deleted file mode 100644
index 33e32f9ae6c1f..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/CssValidationException.java
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-/**
- * Css validation exception.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class CssValidationException extends Exception {
-    /**
-     * Constructor.
-     * @param message the message.
-     */
-    public CssValidationException(final String message) {
-        super(message);
-    }
-
-    /**
-     * Constructor.
-     * @param message the message.
-     * @param cause the cause.
-     */
-    public CssValidationException(final String message, final Throwable cause) {
-        super(message, cause);
-    }
-
-}
\ No newline at end of file
diff --git a/validator/java/src/main/java/dev/amp/validator/css/Declaration.java b/validator/java/src/main/java/dev/amp/validator/css/Declaration.java
deleted file mode 100644
index e8f515bfdcac5..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/Declaration.java
+++ /dev/null
@@ -1,144 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import com.steadystate.css.parser.Token;
-import dev.amp.validator.visitor.RuleVisitor;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * Object model for a declaration used to define css.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class Declaration extends Rule {
-
-    /**
-     * Constructor of Declaration
-     *
-     * @param name to set for this declaration
-     */
-    public Declaration(@Nonnull final String name) {
-        super();
-        this.name = name;
-        this.value = new ArrayList<>();
-        this.important = false;
-    }
-
-    /**
-     * Process a Declaration with a visitor
-     *
-     * @param visitor a rule visitor object used to access a declaration
-     * @throws CssValidationException Css Validation Exception
-     */
-    @Override
-    public void accept(@Nonnull final RuleVisitor visitor) throws CssValidationException {
-        visitor.visitDeclaration(this);
-        visitor.leaveDeclaration(this);
-    }
-
-    /**
-     * Getter for token type
-     *
-     * @return the type of the token (declaration)
-     */
-    @Override
-    public TokenType getTokenType() {
-        return TokenType.DECLARATION;
-    }
-
-
-    /**
-     * For a declaration, if the first non-whitespace token is an identifier,
-     * returns its string value. Otherwise, returns the empty string.
-     *
-     * @return value of first non-whitespace identifier or empty string
-     */
-    public String firstIdent() {
-        if (this.value.size() == 0) {
-            return "";
-        }
-
-        if (CssTokenUtil.getTokenType(this.value.get(0)) == TokenType.IDENT) {
-            return this.value.get(0).toString();
-        }
-        if (this.value.size() >= 2
-                && (CssTokenUtil.getTokenType(this.value.get(0)) == TokenType.WHITESPACE)
-                && CssTokenUtil.getTokenType(this.value.get(1)) == TokenType.IDENT) {
-            return this.value.get(1).toString();
-        }
-        return "";
-    }
-
-    /**
-     * Getter for contents of declaration
-     *
-     * @return the value of Declaration as a list of its contents
-     */
-    @Override
-    public List<Token> getValue() {
-        return value;
-    }
-
-    /**
-     * Getter for contents of name of declaration
-     *
-     * @return the name of a declaration
-     */
-    @Nonnull
-    public String getName() {
-        return name;
-    }
-
-    /**
-     * Getter for important value
-     *
-     * @return the target value of important flag
-     */
-    public boolean getImportant() {
-        return this.important;
-    }
-
-    /**
-     * @param important the target value of important
-     *                  Setter for importance of declaration
-     */
-    public void setImportant(final boolean important) {
-        this.important = important;
-    }
-
-    /**
-     * if this is an "important" element
-     */
-    private boolean important;
-
-    @Nonnull
-    private final String name;
-
-    @Nonnull
-    private final List<Token> value;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/EOFToken.java b/validator/java/src/main/java/dev/amp/validator/css/EOFToken.java
deleted file mode 100644
index c6c674fc2b13e..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/EOFToken.java
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-/**
- * Token representation of end of file.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class EOFToken extends Token {
-    /**
-     * Return type of token
-     * @return TokenType.EOF_TOKEN
-     */
-    @Override
-    public TokenType getTokenType() {
-        return TokenType.EOF_TOKEN;
-    }
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/ErrorToken.java b/validator/java/src/main/java/dev/amp/validator/css/ErrorToken.java
deleted file mode 100644
index fec13d6306ff7..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/ErrorToken.java
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.ValidatorProtos;
-
-import javax.annotation.Nonnull;
-import java.util.List;
-
-/**
- * Error tokens carry an error code and parameters, which can be
- * formatted into an error message via the format strings in
- * validator.protoascii.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ErrorToken extends Token {
-
-    /**
-     * Constructor
-     * @param optCode the optCode value to set
-     * @param optParams the optParams to set
-     * @throws CssValidationException Css Validation Exception
-     */
-    public ErrorToken(final ValidatorProtos.ValidationError.Code optCode,
-                      final List<String> optParams) throws CssValidationException {
-        super();
-        if (optCode == null) {
-            throw new CssValidationException("opt_code is null");
-        }
-
-        if (optParams == null) {
-            throw new CssValidationException("opt_params is null");
-        }
-
-        this.code = optCode;
-        this.params = optParams;
-    }
-
-    /**
-     * Getter for error params
-     * @return list of params
-     */
-    public List<String> getParams() {
-        return this.params;
-    }
-
-    /**
-     * Getter for error code
-     * @return error code
-     */
-    public ValidatorProtos.ValidationError.Code getCode() {
-        return this.code;
-    }
-
-    /**
-     * Getter for token type.
-     * @return returns token type error
-     */
-    @Override
-    public TokenType getTokenType() {
-        return TokenType.ERROR;
-    }
-
-    /** Validation error code. */
-    @Nonnull
-    private final ValidatorProtos.ValidationError.Code code;
-
-    /** List of params. */
-    @Nonnull
-    private final List<String> params;
-
-
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/ParsedCssUrl.java b/validator/java/src/main/java/dev/amp/validator/css/ParsedCssUrl.java
deleted file mode 100644
index 353e3fa4773cb..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/ParsedCssUrl.java
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import javax.annotation.Nonnull;
-
-import static dev.amp.validator.css.TokenType.PARSED_CSS_URL;
-
-/**
- * Used by parse_css.ExtractUrls to return urls it has seen. This represents
- * URLs in CSS such as url(http://foo.com/) and url("http://bar.com/").
- * For this token, line() and col() indicate the position information
- * of the left-most CSS token that's part of the URL. E.g., this would be
- * the URLToken instance or the FunctionToken instance.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ParsedCssUrl extends Token {
-
-    /**
-     * Constructor for empty css url
-     */
-    public ParsedCssUrl() {
-        super();
-
-        /**
-         * The decoded URL. This string will not contain CSS string escapes,
-         * quotes, or similar. Encoding is utf8.
-         */
-        this.utf8Url = "";
-        /**
-         * A rule scope, in case the url was encountered within an at-rule.
-         * If not within an at-rule, this string is empty.
-         */
-        this.atRuleScope = "";
-    }
-
-    /**
-     * Getter for rule scope
-     *
-     * @return the atRule scope
-     */
-    @Nonnull
-    public String getAtRuleScope() {
-        return atRuleScope;
-    }
-
-    /**
-     * Getter for url
-     *
-     * @return the url as utf8 string
-     */
-    @Nonnull
-    public String getUtf8Url() {
-        return utf8Url;
-    }
-
-    /**
-     * setter for url
-     *
-     * @param utf8Url the value to set utf8Url to
-     */
-    public void setUtf8Url(@Nonnull final String utf8Url) {
-        this.utf8Url = utf8Url;
-    }
-
-    /**
-     * setter for rule scope
-     *
-     * @param atRuleScope at rule scope to
-     */
-    public void setAtRuleScope(@Nonnull final String atRuleScope) {
-        this.atRuleScope = atRuleScope;
-    }
-
-    /**
-     * return the token type
-     *
-     * @return TokenType.PARSED_CSS_URL
-     */
-    @Override
-    public TokenType getTokenType() {
-        return PARSED_CSS_URL;
-    }
-
-    @Nonnull
-    private String atRuleScope;
-
-    @Nonnull
-    private String utf8Url;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/ParsedDocCssSpec.java b/validator/java/src/main/java/dev/amp/validator/css/ParsedDocCssSpec.java
deleted file mode 100644
index 3a17509dd994f..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/ParsedDocCssSpec.java
+++ /dev/null
@@ -1,200 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.ParsedUrlSpec;
-import dev.amp.validator.ValidatorProtos;
-import dev.amp.validator.utils.CssSpecUtils;
-
-import javax.annotation.Nonnull;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-
-/**
- * Wrapper around DocCssSpec.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ParsedDocCssSpec {
-    /**
-     * constructor
-     *
-     * @param spec      the spec to validate against
-     * @param declLists the list of declarations to populate
-     */
-    public ParsedDocCssSpec(final ValidatorProtos.DocCssSpec spec,
-                            final List<ValidatorProtos.DeclarationList> declLists) {
-        this.spec = spec;
-        this.cssDeclarationByName = new HashMap<>();
-        this.cssDeclarationSvgByName = new HashMap<>();
-
-        for (final ValidatorProtos.CssDeclaration declaration : spec.getDeclarationList()) {
-            if (declaration.hasName()) {
-                this.cssDeclarationByName.put(declaration.getName(), declaration);
-                this.cssDeclarationSvgByName.put(declaration.getName(), declaration);
-            }
-        }
-        for (final ValidatorProtos.CssDeclaration declaration : spec.getDeclarationSvgList()) {
-            if (declaration.hasName()) {
-                this.cssDeclarationSvgByName.put(declaration.getName(), declaration);
-            }
-        }
-
-        // Expand the list of declarations tracked by this spec by merging in any
-        // declarations mentioned in declaration_lists referenced by this spec. This
-        // mechanism reduces redundancy in the lists themselves, making rules more
-        // readable.
-        for (final String declListName : spec.getDeclarationListList()) {
-            for (final ValidatorProtos.DeclarationList declList : declLists) {
-                if (declList.hasName() && declList.getName().equals(declListName)) {
-                    for (final ValidatorProtos.CssDeclaration declaration : declList.getDeclarationList()) {
-                        if (declaration.hasName()) {
-                            this.cssDeclarationByName.put(declaration.getName(), declaration);
-                            this.cssDeclarationSvgByName.put(declaration.getName(), declaration);
-                        }
-                    }
-                }
-            }
-        }
-        for (final String declListName : spec.getDeclarationListSvgList()) {
-            for (final ValidatorProtos.DeclarationList declList : declLists) {
-                if (declList.hasName() && declList.getName().equals(declListName)) {
-                    for (final ValidatorProtos.CssDeclaration declaration : declList.getDeclarationList()) {
-                        if (declaration.hasName()) {
-                            this.cssDeclarationSvgByName.put(declaration.getName(), declaration);
-                        }
-                    }
-                }
-            }
-        }
-
-        this.parsedImageUrlSpec = new ParsedUrlSpec(spec.getImageUrlSpec());
-        this.parsedFontUrlSpec = new ParsedUrlSpec(spec.getFontUrlSpec());
-    }
-
-    /**
-     * @param candidate Returns the CssDeclaration rules for a matching css declaration name, if is
-     *                  found, else null.
-     * @return the CssDeclaration rules for a matching css declaration name, else null
-     */
-    public ValidatorProtos.CssDeclaration getCssDeclarationSvgByName(@Nonnull final String candidate) {
-        String key = candidate.toLowerCase();
-        if (this.getSpec().getExpandVendorPrefixes()) {
-            key = CssSpecUtils.stripVendorPrefix(key);
-        }
-        ValidatorProtos.CssDeclaration cssDeclaration = this.cssDeclarationSvgByName.get(key);
-        if (cssDeclaration != null) {
-            return cssDeclaration;
-        }
-        return null;
-    }
-
-    /**
-     * Returns the CssDeclaration rules for a matching css declaration name, if is
-     * found, else null.
-     *
-     * @param candidate to check for
-     * @return the CssDeclaration from mapping
-     */
-    public ValidatorProtos.CssDeclaration getCssDeclarationByName(@Nonnull final String candidate) {
-        String key = candidate.toLowerCase();
-        if (this.getSpec().getExpandVendorPrefixes()) {
-            key = CssSpecUtils.stripVendorPrefix(key);
-        }
-        ValidatorProtos.CssDeclaration cssDeclaration = this.cssDeclarationByName.get(key);
-        if (cssDeclaration != null) {
-            return cssDeclaration;
-        }
-        return null;
-    }
-
-    /**
-     * getter for cssDeclarationByName
-     *
-     * @return this cssDeclarationByName
-     */
-    public Map<String, ValidatorProtos.CssDeclaration> getCssDeclarationByName() {
-        return this.cssDeclarationByName;
-    }
-
-    public ValidatorProtos.DocCssSpec getSpec() {
-        return spec;
-    }
-
-    /**
-     * @return list of enabled by elements
-     */
-    public List<String> enabledBy() {
-        return this.spec.getEnabledByList();
-    }
-
-    /**
-     * @return list of disabled by elements
-     */
-    public List<String> disabledBy() {
-        return this.spec.getDisabledByList();
-    }
-
-    /**
-     * return this doc css fontUrlSpec
-     *
-     * @return this doc css fontUrlSpec
-     */
-    public ParsedUrlSpec getFontUrlSpec() {
-        return this.parsedFontUrlSpec;
-    }
-
-    /**
-     * @return this doc css imageUrlSpec
-     */
-    public ParsedUrlSpec getImageUrlSpec() {
-        return this.parsedImageUrlSpec;
-    }
-
-    /**
-     * The DocCssSpec.
-     */
-    private final ValidatorProtos.DocCssSpec spec;
-
-    /**
-     * Map to store CssDeclaration by declaration name.
-     */
-    private final Map<String, ValidatorProtos.CssDeclaration> cssDeclarationByName;
-
-    /**
-     * Map to store CssDeclaration by declaration Svg name.
-     */
-    private final HashMap<String, ValidatorProtos.CssDeclaration> cssDeclarationSvgByName;
-
-    /**
-     * The ParsedUrlSpec for image url.
-     */
-    private ParsedUrlSpec parsedImageUrlSpec;
-
-    /**
-     * The ParsedUrlSpec for font url.
-     */
-    private ParsedUrlSpec parsedFontUrlSpec;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/QualifiedRule.java b/validator/java/src/main/java/dev/amp/validator/css/QualifiedRule.java
deleted file mode 100644
index 085e9993f5f5d..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/QualifiedRule.java
+++ /dev/null
@@ -1,146 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-
-package dev.amp.validator.css;
-
-import com.steadystate.css.parser.Token;
-import dev.amp.validator.visitor.RuleVisitor;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * The abstract superclass for all tokens.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class QualifiedRule extends Rule {
-
-    /**
-     * Constructor to initialize empty qualified rule
-     */
-    public QualifiedRule() {
-        super();
-        rules = new ArrayList<>();
-        prelude = new ArrayList<>();
-        declarations = new ArrayList<>();
-    }
-
-    /**
-     * process a qualified rule through a visitor
-     *
-     * @param visitor used to process the rule
-     */
-    @Override
-    public void accept(@Nonnull final RuleVisitor visitor) throws CssValidationException {
-        visitor.visitQualifiedRule(this);
-        for (final Declaration declaration : this.declarations) {
-            declaration.accept(visitor);
-        }
-        visitor.leaveQualifiedRule(this);
-    }
-
-    /**
-     * return the token type of the qualified rule
-     *
-     * @return TokenType.QUALIFIED_RULE
-     */
-    @Override
-    public TokenType getTokenType() {
-        return TokenType.QUALIFIED_RULE;
-    }
-
-    /**
-     * Setter for rules
-     *
-     * @return the list of rules associated with this qualified rule.
-     */
-    public List<Rule> getRules() {
-        return this.rules;
-    }
-
-    /**
-     * Setter for rules
-     *
-     * @param rules the rules to initialize to the qualified rule
-     */
-    public void setRules(@Nonnull final List<Rule> rules) {
-        this.rules = rules;
-    }
-
-    /**
-     * Setter for declarations
-     *
-     * @param declarations to initialize to the qualified rule
-     */
-    public void setDeclarations(@Nonnull final List<Declaration> declarations) {
-        this.declarations = declarations;
-    }
-
-    /**
-     * Getter for declarations
-     *
-     * @return the declarations of the rule
-     */
-    @Nonnull
-    public List<Declaration> getDeclarations() {
-        return declarations;
-    }
-
-    /**
-     * Getter for the prelude
-     *
-     * @return the prelude of the qualified rule
-     */
-    public List<com.steadystate.css.parser.Token> getPrelude() {
-        return prelude;
-    }
-
-    /**
-     * concatenate a qualified rule name
-     *
-     * @return The concatenation of the qualified rule name.
-     */
-    public String ruleName() {
-        @Nonnull String ruleName = "";
-        for (int i = 0; i < this.prelude.size(); i++) {
-            Token prelude = this.prelude.get(i);
-            if (prelude.toString() != null) {
-                ruleName += prelude.toString();
-            }
-        }
-        return ruleName;
-    }
-
-    @Nonnull
-    private List<Rule> rules;
-
-    @Nonnull
-    private List<Declaration> declarations;
-
-    @Nonnull
-    private List<Token> prelude;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/Rule.java b/validator/java/src/main/java/dev/amp/validator/css/Rule.java
deleted file mode 100644
index bd9bf42052cc7..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/Rule.java
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.visitor.RuleVisitor;
-
-import javax.annotation.Nonnull;
-
-/**
- * Abstract class modeling a css rule.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public abstract class Rule extends Token {
-
-    /**
-     * Default constructor
-     */
-    public Rule() {
-        super();
-    }
-
-    /**
-     * @param visitor object to access a rule
-     * @throws CssValidationException Css Validation Exception
-     */
-    public abstract void accept(@Nonnull RuleVisitor visitor) throws CssValidationException;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/Stylesheet.java b/validator/java/src/main/java/dev/amp/validator/css/Stylesheet.java
deleted file mode 100644
index 7368062098828..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/Stylesheet.java
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.visitor.RuleVisitor;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * Stylesheet object model.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class Stylesheet extends Rule {
-
-    /**
-     * Constructor for empty stylesheet
-     */
-    public Stylesheet() {
-        super();
-        this.rules = new ArrayList<>();
-        this.eof = null;
-    }
-
-    /**
-     * Process the rules of a stylesheet.
-     *
-     * @param visitor used to rules of a stylesheet
-     * @throws CssValidationException Css Validation Exception
-     */
-    @Override
-    public void accept(@Nonnull final RuleVisitor visitor) throws CssValidationException {
-        visitor.visitStylesheet(this);
-        for (final Rule rule : this.rules) {
-            rule.accept(visitor);
-        }
-        visitor.leaveStylesheet(this);
-    }
-
-    /**
-     * Getter for token type returns stylesheet.
-     *
-     * @return TokenType.STYLESHEET
-     */
-    @Override
-    public TokenType getTokenType() {
-        return TokenType.STYLESHEET;
-    }
-
-    /**
-     * Setter for rules tokens
-     *
-     * @param rules of stylesheet
-     */
-    public void setRules(@Nonnull final List<Rule> rules) {
-        this.rules = rules;
-    }
-
-    /**
-     * Setter for eof token of stylesheet
-     *
-     * @param eof of stylesheet
-     */
-    public void setEOF(@Nonnull final EOFToken eof) {
-        this.eof = eof;
-    }
-
-    @Nonnull
-    private List<Rule> rules;
-
-    @Nonnull
-    private Token eof;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/Token.java b/validator/java/src/main/java/dev/amp/validator/css/Token.java
deleted file mode 100644
index a2032df575aa8..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/Token.java
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-/**
- * The abstract superclass for all tokens.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public abstract class Token extends com.steadystate.css.parser.Token {
-    /**
-     * Constructor for Token object, sets default location values
-     */
-    public Token() {
-        this.line = 1;
-        this.col = 0;
-    }
-
-    /**
-     * Overwrite from children class to get token type
-     * @return the type of the token.
-     */
-    public abstract TokenType getTokenType();
-
-    /**
-     * Setter for line value.
-     * @param line the value to set in line.
-     */
-    public void setLine(final int line) {
-        this.line = line;
-    }
-
-    /**
-     * Setter for Token's column.
-     * @param col value to set in column.
-     */
-    public void setCol(final int col) {
-        this.col = col;
-    }
-
-    /**
-     * Getter for Token's line.
-     * @return a String value of the token from parent class Token.
-     */
-    public int getLine() {
-        return line;
-    }
-
-    /**
-     * Returns value of token.
-     * @return a value of the token from parent class Token, most of time is String,
-     * few cases will return a list of tokens
-     */
-    @Override
-    public Object getValue() {
-        return this.toString();
-    }
-
-    /**
-     * Returns value column of token.
-     * @return a column value from token
-     */
-    public int getCol() {
-        return col;
-    }
-
-    @Override
-    public String toString() {
-        return getTokenType().toString();
-    }
-
-    /** Line number. */
-    private int line;
-
-    /** Column number. */
-    private int col;
-}
\ No newline at end of file
diff --git a/validator/java/src/main/java/dev/amp/validator/css/TokenStream.java b/validator/java/src/main/java/dev/amp/validator/css/TokenStream.java
deleted file mode 100644
index adba27c482715..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/TokenStream.java
+++ /dev/null
@@ -1,102 +0,0 @@
-package dev.amp.validator.css;
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-import com.steadystate.css.parser.SACParserCSS3Constants;
-
-import javax.annotation.Nonnull;
-import java.util.List;
-import com.steadystate.css.parser.Token;
-
-/**
- * Class to manage a list of tokens as a stream with accessors to iterate through stream.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class TokenStream {
-
-    /**
-     * Constructor to initialize stream with underlying token list.
-     * @param tokens css content to store in stream
-     * @throws CssValidationException Css Validation Exception
-     */
-    public TokenStream(@Nonnull final List<com.steadystate.css.parser.Token> tokens) throws CssValidationException {
-        if (tokens.size() <= 0) {
-            throw new CssValidationException("Internal Error: empty TokenStream - must have EOF token");
-        }
-
-        if (tokens.get(tokens.size() - 1).kind != SACParserCSS3Constants.EOF) {
-            throw new CssValidationException("Internal Error: TokenStream must end with EOF");
-        }
-
-        this.tokens = tokens;
-        this.pos = -1;
-    }
-
-    /**
-     * Function to advance the stream by a token
-     */
-    public void consume() {
-        this.pos++;
-    }
-
-    /**
-     * Returns the token at the next position in the token stream.
-     * @return the token at the position after the current token.
-     */
-    public Token next() {
-        return this.tokenAt(this.pos + 1);
-    }
-
-    /**
-     * Returns the token at an absolute position in the token stream.
-     *
-     * @param num is the index of the token returned
-     * @return the token at num
-     */
-    public Token tokenAt(final int num) {
-        // The last token is guaranteed to be the EOF token (with correct
-        // line / col!) so any request past the length of the array
-        // fetches that.
-        return (num < this.tokens.size()) ? this.tokens.get(num) : this.tokens.get(this.tokens.size() - 1);
-    }
-
-    /**
-     * Returns the token at the current position in the token stream.
-     * @return the token currently found at pos
-     */
-    public Token current() {
-        return this.tokenAt(this.pos);
-    }
-
-    /** Rewinds to the previous position in the input. */
-    public void reconsume() {
-        this.pos--;
-    }
-
-    @Nonnull
-    private final List<com.steadystate.css.parser.Token> tokens;
-
-    /** Position of the input. */
-    private int pos;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/css/TokenType.java b/validator/java/src/main/java/dev/amp/validator/css/TokenType.java
deleted file mode 100644
index 7023099670b0d..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/TokenType.java
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-/**
- * Token enumeration types.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public enum TokenType {
-    /** EOF_TOKEN */
-    EOF_TOKEN,
-    /** PARSED_CSS_URL */
-    PARSED_CSS_URL,
-    /** WHITESPACE */
-    WHITESPACE,
-    /** CDO */
-    CDO,
-    /** CDC */
-    CDC,
-    /** AT_KEYWORD */
-    AT_KEYWORD,
-    /** SEMICOLON */
-    SEMICOLON,
-    /** OPEN_CURLY */
-    OPEN_CURLY,
-    /** CLOSE_CURLY */
-    CLOSE_CURLY,
-    /** OPEN_SQUARE */
-    OPEN_SQUARE,
-    /** CLOSE_SQUARE */
-    CLOSE_SQUARE,
-    /** OPEN_PAREN */
-    OPEN_PAREN,
-    /** CLOSE_PAREN */
-    CLOSE_PAREN,
-    /** FUNCTION_TOKEN */
-    FUNCTION_TOKEN,
-    /** IDENT */
-    IDENT,
-    /** COLON */
-    COLON,
-    /** COMMA */
-    COMMA,
-    /** STYLESHEET */
-    STYLESHEET,
-    /** QUALIFIED_RULE */
-    AT_RULE,
-    /** QUALIFIED_RULE */
-    QUALIFIED_RULE,
-    /** DECLARATION */
-    DECLARATION,
-    /** UNKNOWN */
-    UNKNOWN,
-    /** DELIM */
-    DELIM,
-    /** URL */
-    URL,
-    /** STRING */
-    STRING,
-    /** ERROR */
-    ERROR,
-}
\ No newline at end of file
diff --git a/validator/java/src/main/java/dev/amp/validator/css/package-info.java b/validator/java/src/main/java/dev/amp/validator/css/package-info.java
deleted file mode 100644
index 301e1e3767e3e..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/css/package-info.java
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-/**
- * AMP validator.
- */
-package dev.amp.validator.css;
\ No newline at end of file
diff --git a/validator/java/src/main/java/dev/amp/validator/exception/ExitOnFirstErrorException.java b/validator/java/src/main/java/dev/amp/validator/exception/ExitOnFirstErrorException.java
deleted file mode 100644
index 938113d9a4314..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/exception/ExitOnFirstErrorException.java
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.exception;
-
-import org.xml.sax.SAXException;
-
-/**
- * Exception thrown when the first error occurs.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ExitOnFirstErrorException extends SAXException {
-    /**
-     * Constructor.
-     */
-    public ExitOnFirstErrorException() {
-    }
-}
\ No newline at end of file
diff --git a/validator/java/src/main/java/dev/amp/validator/exception/MaxParseNodesException.java b/validator/java/src/main/java/dev/amp/validator/exception/MaxParseNodesException.java
deleted file mode 100644
index aed36dc2362de..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/exception/MaxParseNodesException.java
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.exception;
-
-import org.xml.sax.SAXException;
-
-/**
- * Exception thrown when max (HTML) nodes are encountered.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class MaxParseNodesException extends SAXException {
-    /** Error message. */
-    private static final String ERROR_MSG = "Maximum nodes reached parsing HTML";
-
-    /**
-     * Constructor.
-     */
-    public MaxParseNodesException() {
-        super(ERROR_MSG);
-    }
-}
\ No newline at end of file
diff --git a/validator/java/src/main/java/dev/amp/validator/exception/TagValidationException.java b/validator/java/src/main/java/dev/amp/validator/exception/TagValidationException.java
deleted file mode 100644
index 84ac4ae794bac..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/exception/TagValidationException.java
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.exception;
-
-/**
- * Tag validation exception.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class TagValidationException extends Exception {
-    /**
-     * Constructor.
-     * @param message the message.
-     */
-    public TagValidationException(final String message) {
-        super(message);
-    }
-
-    /**
-     * Constructor.
-     * @param message the message.
-     * @param cause the cause.
-     */
-    public TagValidationException(final String message, final Throwable cause) {
-        super(message, cause);
-    }
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/exception/ValidatorException.java b/validator/java/src/main/java/dev/amp/validator/exception/ValidatorException.java
deleted file mode 100644
index ad286e82a8ecd..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/exception/ValidatorException.java
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.exception;
-
-/**
- * Validator exception.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class ValidatorException extends Exception {
-    /**
-     * Constructor.
-     * @param message the message.
-     */
-    public ValidatorException(final String message) {
-        super(message);
-    }
-
-    /**
-     * Constructor.
-     * @param message the message.
-     * @param cause the cause.
-     */
-    public ValidatorException(final String message, final Throwable cause) {
-        super(message, cause);
-    }
-}
-
diff --git a/validator/java/src/main/java/dev/amp/validator/exception/package-info.java b/validator/java/src/main/java/dev/amp/validator/exception/package-info.java
deleted file mode 100644
index a283738548352..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/exception/package-info.java
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-/**
- * AMP validator exception package.
- */
-package dev.amp.validator.exception;
\ No newline at end of file
diff --git a/validator/java/src/main/java/dev/amp/validator/package-info.java b/validator/java/src/main/java/dev/amp/validator/package-info.java
deleted file mode 100644
index 45859083dcd30..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/package-info.java
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-/**
- * AMP validator.
- */
-package dev.amp.validator;
\ No newline at end of file
diff --git a/validator/java/src/main/java/dev/amp/validator/parser/AMPHtmlParser.java b/validator/java/src/main/java/dev/amp/validator/parser/AMPHtmlParser.java
deleted file mode 100644
index d5a75efa270cd..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/parser/AMPHtmlParser.java
+++ /dev/null
@@ -1,117 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.parser;
-
-import dev.amp.validator.ValidatorProtos;
-import dev.amp.validator.AMPValidatorManager;
-import dev.amp.validator.AMPHtmlHandler;
-import dev.amp.validator.ExitCondition;
-import com.yahoo.tagchowder.Parser;
-import com.yahoo.tagchowder.templates.HTMLSchema;
-import org.xml.sax.InputSource;
-import org.xml.sax.SAXException;
-
-import javax.annotation.Nonnull;
-import java.io.IOException;
-import java.io.StringReader;
-import java.net.URISyntaxException;
-
-/**
- * The AMP HTML parser class.
- *
- * @author nhant01
- * @author GeorgeLuo
- *
- */
-
-public class AMPHtmlParser {
-    /**
-     * Constructor.
-     *
-     * @throws ParserException exception occurs while loading rules
-     */
-    public AMPHtmlParser() throws ParserException {
-        validatorManager = new AMPValidatorManager();
-        try {
-            validatorManager.loadRule();
-        } catch (IOException | URISyntaxException ex) {
-            throw  new ParserException("Unable to load AMP validation rules.", ex);
-        }
-    }
-
-    /**
-     * Parse the input html document and returns validation result.
-     *
-     * @param inputHtml input html document.
-     * @param htmlFormat html format.
-     * @param condition exit condition.
-     * @return returns a validation object.
-     */
-    public ValidatorProtos.ValidationResult parse(@Nonnull final String inputHtml,
-                                            @Nonnull final ValidatorProtos.HtmlFormat.Code htmlFormat,
-                                            @Nonnull final ExitCondition condition) {
-        return parse(inputHtml, htmlFormat, condition, 0);
-    }
-
-    /**
-     * Parse the input html document and returns validation result.
-     *
-     * @param inputHtml input html document.
-     * @param htmlFormat html format.
-     * @param condition exit condition.
-     * @param maxNodes max nodes.
-     * @return returns a validation object.
-     */
-    public ValidatorProtos.ValidationResult parse(@Nonnull final String inputHtml,
-                                            @Nonnull final ValidatorProtos.HtmlFormat.Code htmlFormat,
-                                            @Nonnull final ExitCondition condition,
-                                            final int maxNodes) {
-        final Parser parser = new Parser();
-        final AMPHtmlHandler handler = new AMPHtmlHandler(validatorManager, htmlFormat, condition, maxNodes);
-        try {
-            parser.setContentHandler(handler);
-            parser.setProperty(Parser.SCHEMA_PROPERTY, new HTMLSchema(true));
-            parser.setFeature(Parser.DEFAULT_ATTRIBUTES_FEATURE, false);
-            parser.parse(new InputSource(new StringReader(inputHtml)));
-        } catch (IOException | SAXException ex) {
-            final ValidatorProtos.ValidationResult.Builder result = handler.validationResult();
-            result.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-            if (result.getErrorsCount() == 0) {
-                ValidatorProtos.ValidationError.Builder error = ValidatorProtos.ValidationError.newBuilder();
-                error.setSeverity(ValidatorProtos.ValidationError.Severity.ERROR);
-                error.setCode(ValidatorProtos.ValidationError.Code.UNKNOWN_CODE);
-                final String message =
-                        (ex.getMessage() != null ? ex.getMessage() : "Unable to parse input HTML document");
-                error.addParams(message);
-                result.addErrors(error);
-            }
-        }
-
-        return handler.validationResult().build();
-    }
-
-    /** Validation manager object. */
-    @Nonnull
-    private final AMPValidatorManager validatorManager;
-}
-
-
diff --git a/validator/java/src/main/java/dev/amp/validator/parser/ParserException.java b/validator/java/src/main/java/dev/amp/validator/parser/ParserException.java
deleted file mode 100644
index ba5600d9b4958..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/parser/ParserException.java
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.parser;
-
-/**
- /**
- * Exception class for parsing.
- *
- * @author nhant01
- * @author GeorgeLuo
- *
- */
-
-public class ParserException extends Exception {
-    /**
-     * Constructs a new exception with {@code null} as its detail message.
-     */
-    public ParserException() {
-        super();
-    }
-
-    /**
-     * Constructs a new exception with the specified detail message.  The
-     * cause is not initialized.
-     * @param message the detail message.
-     */
-    public ParserException(final String message) {
-        super(message);
-    }
-
-    /**
-     * Constructs a new exception with the specified detail message and
-     * cause.
-     *
-     * @param  message the detail message.
-     * @param  cause the cause.
-     */
-    public ParserException(final String message, final Throwable cause) {
-        super(message, cause);
-    }
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/parser/package-info.java b/validator/java/src/main/java/dev/amp/validator/parser/package-info.java
deleted file mode 100644
index 48e2f239a2108..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/parser/package-info.java
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-/**
- * AMP validator.
- */
-package dev.amp.validator.parser;
\ No newline at end of file
diff --git a/validator/java/src/main/java/dev/amp/validator/utils/AttributeSpecUtils.java b/validator/java/src/main/java/dev/amp/validator/utils/AttributeSpecUtils.java
deleted file mode 100644
index 39f982d774d81..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/utils/AttributeSpecUtils.java
+++ /dev/null
@@ -1,1474 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.utils;
-
-import com.steadystate.css.parser.Token;
-import dev.amp.validator.Context;
-import dev.amp.validator.CssLength;
-import dev.amp.validator.ExtensionsContext;
-import dev.amp.validator.ParsedAttrSpec;
-import dev.amp.validator.ParsedHtmlTag;
-import dev.amp.validator.ParsedTagSpec;
-import dev.amp.validator.ParsedUrlSpec;
-import dev.amp.validator.ParsedValueProperties;
-import dev.amp.validator.SrcsetParsingResult;
-import dev.amp.validator.SrcsetSourceDef;
-import dev.amp.validator.UrlErrorAdapter;
-import dev.amp.validator.UrlErrorInAttrAdapter;
-import dev.amp.validator.ValidateTagResult;
-import dev.amp.validator.ValidatorProtos;
-import dev.amp.validator.css.CssParser;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.css.Declaration;
-import dev.amp.validator.css.ErrorToken;
-import dev.amp.validator.exception.TagValidationException;
-import org.apache.commons.text.StringEscapeUtils;
-
-import javax.annotation.Nonnull;
-import java.io.IOException;
-import java.net.MalformedURLException;
-import java.net.URL;
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.HashSet;
-import java.util.List;
-import java.util.Map;
-import java.util.Set;
-import java.util.TreeSet;
-import java.util.regex.Matcher;
-import java.util.regex.Pattern;
-
-import static dev.amp.validator.utils.CssSpecUtils.*;
-import static dev.amp.validator.utils.ExtensionsUtils.isAmpRuntimeScript;
-import static dev.amp.validator.utils.ExtensionsUtils.isExtensionScript;
-import static dev.amp.validator.utils.ExtensionsUtils.validateScriptSrcAttr;
-
-/**
- * Methods to handle attribute spec validation.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public final class AttributeSpecUtils {
-    /**
-     * Private constructor.
-     */
-    private AttributeSpecUtils() {
-    }
-
-    /**
-     * Returns true if this spec should be used for the given type identifiers
-     * based on the spec's disabled_by or enabled_by fields.
-     *
-     * @param typeIdentifiers type identifiers.
-     * @param enabledBys      enabled bys.
-     * @param disabledBys     disabled bys.
-     * @return returns true if type identifiers are used.
-     */
-    public static boolean isUsedForTypeIdentifiers(@Nonnull final List<String> typeIdentifiers,
-                                                   @Nonnull final List<String> enabledBys,
-                                                   @Nonnull final List<String> disabledBys) {
-        if (enabledBys.size() > 0) {
-            for (final String enabledBy : enabledBys) {
-                // Is enabled by a given type identifier, use.
-                if (typeIdentifiers.contains(enabledBy)) {
-                    return true;
-                }
-            }
-            // Is not enabled for these type identifiers, do not use.
-            return false;
-        } else if (disabledBys.size() > 0) {
-            for (final String disabledBy : disabledBys) {
-                // Is disabled by a given type identifier, do not use.
-                if (typeIdentifiers.contains(disabledBy)) {
-                    return false;
-                }
-            }
-            // Is not disabled for these type identifiers, use.
-            return true;
-        }
-        // Is not enabled nor disabled for any type identifiers, use.
-        return true;
-    }
-
-
-    /**
-     * Validates whether the attributes set on |encountered_tag| conform to this
-     * tag specification. All mandatory attributes must appear. Only attributes
-     * explicitly mentioned by this tag spec may appear.
-     * Returns true iff the validation is successful.
-     *
-     * @param parsedTagSpec           the parsed tag spec.
-     * @param bestMatchReferencePoint best match reference point.
-     * @param context                 the context.
-     * @param encounteredTag          encountered tag.
-     * @param result                  validation result.
-     * @throws TagValidationException tag validation exception.
-     * @throws IOException            IO Exception
-     * @throws CssValidationException Css Validation Exception
-     */
-    public static void validateAttributes(@Nonnull final ParsedTagSpec parsedTagSpec,
-                                          @Nonnull final ParsedTagSpec bestMatchReferencePoint,
-                                          @Nonnull final Context context,
-                                          @Nonnull final ParsedHtmlTag encounteredTag,
-                                          @Nonnull final ValidateTagResult result)
-            throws TagValidationException, IOException, CssValidationException {
-        final ValidatorProtos.TagSpec spec = parsedTagSpec.getSpec();
-        if (spec.hasAmpLayout()) {
-            validateLayout(parsedTagSpec, context, encounteredTag, result.getValidationResult());
-        }
-        // For extension TagSpecs, we track if we've validated a src attribute.
-        // We must have done so for the extension to be valid.
-        boolean seenExtensionSrcAttr = false;
-        final boolean hasTemplateAncestor = context.getTagStack().hasAncestor("TEMPLATE");
-        final boolean isHtmlTag = encounteredTag.upperName().equals("HTML");
-        final List<String> mandatoryAttrsSeen = new ArrayList<>();
-        final List<String> mandatoryOneofsSeen = new ArrayList<>();
-        final List<String> mandatoryAnyofsSeen = new ArrayList<>();
-        final List<ValidatorProtos.AttrSpec> triggersToCheck = new ArrayList<>();
-
-        /**
-         * If a tag has implicit attributes, we then add these attributes as
-         * validated. E.g. tag 'a' has implicit attributes 'role' and 'tabindex'.
-         */
-        final Set<String> attrspecsValidated = new HashSet<>();
-        for (final ValidatorProtos.AttrSpec implicit : parsedTagSpec.getImplicitAttrspecs()) {
-            attrspecsValidated.add(implicit.getName());
-        }
-        // Our html parser delivers attributes as an array of alternating keys and
-        // values. We skip over this array 2 at a time to iterate over the keys.
-        final Map<String, ValidatorProtos.AttrSpec> attrsByName = parsedTagSpec.getAttrsByName();
-        for (int i = 0; i < encounteredTag.attrs().getLength(); i++) {
-            final String name = encounteredTag.attrs().getLocalName(i);
-            String value = encounteredTag.attrs().getValue(i);
-            if (name.equals(value)) {
-                value = "";
-            }
-
-            // For transformed AMP, attributes `class` and `i-amphtml-layout` are
-            // handled within validateSsrLayout for non-sizer elements.
-            if (context.isTransformed()
-                    && !encounteredTag.lowerName().equals("i-amphtml-sizer")
-                    && (name.equals("class") || name.equals("i-amphtml-layout"))) {
-                continue;
-            }
-            // If |spec| is the runtime or an extension script, validate that LTS is
-            // either used by all pages or no pages.
-            if (encounteredTag.attrs().getValue(i).equals("src")
-                    && (isExtensionScript(encounteredTag)
-                    || isAmpRuntimeScript(encounteredTag))) {
-                validateScriptSrcAttr(encounteredTag.attrs().getValue(i), spec, context, result.getValidationResult());
-            }
-            if (!(attrsByName.containsKey(name))) {
-                // The HTML tag specifies type identifiers which are validated in
-                // validateHtmlTag(), so we skip them here.
-                if (isHtmlTag && context.getRules().isTypeIdentifier(name)) {
-                    continue;
-                }
-                // While validating a reference point, we skip attributes that
-                // we don't have a spec for. They will be validated when the
-                // TagSpec itself gets validated.
-                if (parsedTagSpec.isReferencePoint()) {
-                    continue;
-                }
-                // On the other hand, if we did just validate a reference point for
-                // this tag, we check whether that reference point covers the attribute.
-                if (bestMatchReferencePoint != null
-                        && bestMatchReferencePoint.hasAttrWithName(name)) {
-                    continue;
-                }
-
-                // If |spec| is an extension, then we ad-hoc validate 'custom-element',
-                // 'custom-template', 'host-service', and 'src' attributes by calling this
-                // method.  For 'src', we also keep track whether we validated it this
-                // way, (seen_src_attr), since it's a mandatory attr.
-                if (spec.hasExtensionSpec()
-                        && validateAttributeInExtension(spec, context, name, value, result.getValidationResult())) {
-                    if (name.equals("src")) {
-                        seenExtensionSrcAttr = true;
-                    }
-                    continue;
-                }
-                validateAttrNotFoundInSpec(parsedTagSpec, context, name, result.getValidationResult());
-                if (result.getValidationResult().getStatus() == ValidatorProtos.ValidationResult.Status.FAIL) {
-                    continue;
-                }
-                if (hasTemplateAncestor) {
-                    validateAttrValueBelowTemplateTag(parsedTagSpec, context, name, value, result.getValidationResult());
-                    if (result.getValidationResult().getStatus() == ValidatorProtos.ValidationResult.Status.FAIL) {
-                        continue;
-                    }
-                }
-                continue;
-            }
-            if (hasTemplateAncestor) {
-                validateAttrValueBelowTemplateTag(parsedTagSpec, context, name, value, result.getValidationResult());
-                if (result.getValidationResult().getStatus() == ValidatorProtos.ValidationResult.Status.FAIL) {
-                    continue;
-                }
-            }
-
-            final ValidatorProtos.AttrSpec attrSpec = attrsByName.get(name);
-            if (attrSpec.getValueCount() < 0) {
-                attrspecsValidated.add(attrSpec.getName());
-                continue;
-            }
-
-            final ParsedAttrSpec parsedAttrSpec =
-                    context.getRules().getParsedAttrSpecs().getParsedAttrSpec(name, value, attrSpec);
-            // If this attribute isn't used for these type identifiers, then error.
-            if (!parsedAttrSpec.isUsedForTypeIdentifiers(
-                    context.getTypeIdentifiers())) {
-                List<String> params = new ArrayList<>();
-                params.add(name);
-                params.add(TagSpecUtils.getTagSpecName(spec));
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(spec),
-                        result.getValidationResult());
-                continue;
-            }
-            if (attrSpec.hasDeprecation()) {
-                List<String> params = new ArrayList<>();
-                params.add(name);
-                params.add(TagSpecUtils.getTagSpecName(spec));
-                params.add(attrSpec.getDeprecation());
-                context.addWarning(
-                        ValidatorProtos.ValidationError.Code.DEPRECATED_ATTR,
-                        context.getLineCol(),
-                        params,
-                        attrSpec.getDeprecationUrl(),
-                        result.getValidationResult());
-                // Deprecation is only a warning, so we don't return.
-            }
-            if (attrSpec.getRequiresExtensionCount() > 0) {
-                validateAttrRequiredExtensions(parsedAttrSpec, context, result.getValidationResult());
-            }
-            if (attrSpec.hasValueDocCss() || attrSpec.hasValueDocSvgCss()) {
-                validateAttrCss(parsedAttrSpec, context, spec, name, value, result);
-            } else if (attrSpec.getCssDeclarationCount() > 0) {
-                validateAttrDeclaration(
-                        parsedAttrSpec, context, TagSpecUtils.getTagSpecName(spec), name, value,
-                        result.getValidationResult());
-            }
-            if (!hasTemplateAncestor || !attrValueHasTemplateSyntax(value)) {
-                validateNonTemplateAttrValueAgainstSpec(
-                        parsedAttrSpec, context, name, value, spec, result.getValidationResult());
-                if (result.getValidationResult().getStatus() == ValidatorProtos.ValidationResult.Status.FAIL) {
-                    continue;
-                }
-            }
-
-            final List<String> params;
-            if (attrSpec.hasBlacklistedValueRegex()) {
-                final Pattern regex = context.getRules().getPartialMatchCaseiRegex(
-                        attrSpec.getBlacklistedValueRegex());
-                if (regex.matcher(value).find()) {
-                    params = new ArrayList<>();
-                    params.add(name);
-                    params.add(TagSpecUtils.getTagSpecName(spec));
-                    params.add(value);
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE,
-                            context.getLineCol(),
-                            params,
-                            TagSpecUtils.getTagSpecUrl(spec),
-                            result.getValidationResult());
-                    continue;
-                }
-            }
-            if (attrSpec.hasMandatory()) {
-                mandatoryAttrsSeen.add(parsedAttrSpec.getAttrName());
-
-            }
-            if (parsedTagSpec.getSpec().getTagName().equals("BASE")
-                    && name.equals("href")
-                    && context.hasSeenUrl()) {
-                params = new ArrayList<>();
-                params.add(context.firstSeenUrlTagName());
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.BASE_TAG_MUST_PRECEED_ALL_URLS,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(spec),
-                        result.getValidationResult());
-                continue;
-            }
-            final String mandatoryOneof = attrSpec.getMandatoryOneof(); // question const {mandatoryOneof} = attrSpec;
-            if (attrSpec.hasMandatoryOneof()) {
-                // The "at most 1" part of mandatory_oneof: mandatory_oneof
-                // wants exactly one of the alternatives, so here
-                // we check whether we already saw another alternative
-                if (mandatoryOneofsSeen.indexOf(mandatoryOneof) != -1) {
-                    params = new ArrayList<>();
-                    params.add(TagSpecUtils.getTagSpecName(spec));
-                    params.add(mandatoryOneof);
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.MUTUALLY_EXCLUSIVE_ATTRS,
-                            context.getLineCol(),
-                            params,
-                            TagSpecUtils.getTagSpecUrl(spec),
-                            result.getValidationResult());
-                    continue;
-                }
-
-                mandatoryOneofsSeen.add(mandatoryOneof);
-            }
-            if (attrSpec.hasRequiresAncestor()) {
-                final List<ValidatorProtos.AncestorMarker.Marker> markers = attrSpec.getRequiresAncestor().getMarkerList();
-                boolean matchesMarker = false;
-                for (final ValidatorProtos.AncestorMarker.Marker marker : markers) {
-                    if (context.getTagStack().hasAncestorMarker(marker)) {
-                        matchesMarker = true;
-                        break;
-                    }
-                }
-                if (!matchesMarker) {
-                    params = new ArrayList<>();
-                    params.add(name);
-                    params.add(TagSpecUtils.getTagSpecName(spec));
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR,
-                            context.getLineCol(),
-                            params,
-                            TagSpecUtils.getTagSpecUrl(spec),
-                            result.getValidationResult());
-                    continue;
-                }
-            }
-            final String mandatoryAnyof = attrSpec.getMandatoryAnyof(); //const {mandatoryAnyof} = attrSpec;
-            if (attrSpec.hasMandatoryAnyof()) {
-                mandatoryAnyofsSeen.add(mandatoryAnyof);
-            }
-            attrspecsValidated.add(parsedAttrSpec.getAttrName());
-            // If the trigger does not have an if_value_regex, then proceed to add the
-            // spec. If it does have an if_value_regex, then test the regex to see
-            // if it should add the spec.
-            if (!attrSpec.hasTrigger()) {
-                continue;
-            }
-            final ValidatorProtos.AttrTriggerSpec trigger = attrSpec.getTrigger();
-            if (trigger != null) {
-                final boolean hasIfValueRegex = trigger.hasIfValueRegex();
-                Pattern ifValueRegexPattern = null;
-                if (hasIfValueRegex) {
-                    ifValueRegexPattern = context.getRules().getFullMatchRegex(trigger.getIfValueRegex());
-                }
-
-                if (!hasIfValueRegex || ifValueRegexPattern.matcher(value).matches()) {
-                    triggersToCheck.add(attrSpec);
-                }
-            }
-        }
-        if (result.getValidationResult().getStatus() == ValidatorProtos.ValidationResult.Status.FAIL) {
-            return;
-        }
-        // The "exactly 1" part of mandatory_oneof: If none of the
-        // alternatives were present, we report that an attribute is missing.
-        for (final String mandatoryOneof : parsedTagSpec.getMandatoryOneofs()) {
-            if (mandatoryOneofsSeen.indexOf(mandatoryOneof) == -1) {
-                List<String> params = new ArrayList<>();
-                params.add(TagSpecUtils.getTagSpecName(spec));
-                params.add(mandatoryOneof);
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.MANDATORY_ONEOF_ATTR_MISSING,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(spec),
-                        result.getValidationResult());
-            }
-        }
-        // The "at least 1" part of mandatory_anyof: If none of the
-        // alternatives were present, we report that an attribute is missing.
-        for (final String mandatoryAnyof : parsedTagSpec.getMandatoryAnyofs()) {
-            if (mandatoryAnyofsSeen.indexOf(mandatoryAnyof) == -1) {
-                List<String> params = new ArrayList<>();
-                params.add(TagSpecUtils.getTagSpecName(spec));
-                params.add(mandatoryAnyof);
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.MANDATORY_ANYOF_ATTR_MISSING,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(spec),
-                        result.getValidationResult());
-            }
-        }
-        for (final ValidatorProtos.AttrSpec attrSpec : triggersToCheck) {
-            for (final String alsoRequiresAttr : attrSpec.getTrigger().getAlsoRequiresAttrList()) {
-                if (!(attrsByName.containsKey(alsoRequiresAttr))) {
-                    continue;
-                }
-                ValidatorProtos.AttrSpec attrId = attrsByName.get(alsoRequiresAttr);
-                if (!attrspecsValidated.contains(attrId.getName())) {
-                    List<String> params = new ArrayList<>();
-                    params.add(attrId.getName());
-                    params.add(TagSpecUtils.getTagSpecName(spec));
-                    params.add(attrSpec.getName());
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.ATTR_REQUIRED_BUT_MISSING,
-                            context.getLineCol(),
-                            params,
-                            TagSpecUtils.getTagSpecUrl(spec),
-                            result.getValidationResult());
-                }
-            }
-        }
-        final List<String> missingAttrs = new ArrayList<>();
-        for (final ValidatorProtos.AttrSpec mandatory : parsedTagSpec.getMandatoryAttrIds()) {
-            if (!mandatoryAttrsSeen.contains(mandatory.getName())) {
-                missingAttrs.add(mandatory.getName());
-            }
-        }
-        // Sort this list for stability across implementations.
-        Collections.sort(missingAttrs);
-        for (final String missingAttr : missingAttrs) {
-            List<String> params = new ArrayList<>();
-            params.add(missingAttr);
-            params.add(TagSpecUtils.getTagSpecName(spec));
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.MANDATORY_ATTR_MISSING,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(spec),
-                    result.getValidationResult());
-        }
-        // Extension specs mandate the 'src' attribute.
-        if (spec.hasExtensionSpec() && !seenExtensionSrcAttr) {
-            List<String> params = new ArrayList<>();
-            params.add("src");
-            params.add(TagSpecUtils.getTagSpecName(spec));
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.MANDATORY_ATTR_MISSING,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(spec),
-                    result.getValidationResult());
-        }
-    }
-
-    /**
-     * If this attribute requires an extension and we have processed all extensions,
-     * report an error if that extension has not been loaded.
-     *
-     * @param parsedAttrSpec   the parsed Attr spec.
-     * @param context          context
-     * @param validationResult validationResult
-     */
-    public static void validateAttrRequiredExtensions(
-            @Nonnull final ParsedAttrSpec parsedAttrSpec,
-            @Nonnull final Context context,
-            @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) {
-        final ValidatorProtos.AttrSpec attrSpec = parsedAttrSpec.getSpec();
-        final ExtensionsContext extensionsCtx = context.getExtensions();
-        for (String requiredExtension : attrSpec.getRequiresExtensionList()) {
-            if (!extensionsCtx.isExtensionLoaded(requiredExtension)) {
-                final List<String> params = new ArrayList<>();
-                params.add(attrSpec.getName());
-                params.add(requiredExtension);
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.ATTR_MISSING_REQUIRED_EXTENSION,
-                        context.getLineCol(),
-                        params,
-                        "",
-                        validationResult);
-            }
-        }
-    }
-
-    /**
-     * Helper method for ValidateAttributes.
-     *
-     * @param parsedAttrSpec   the parsed Attr spec.
-     * @param context          context.
-     * @param tagSpecName      tag spec name.
-     * @param attrName         attr Name.
-     * @param attrValue        attr Value
-     * @param validationResult validationResult.
-     * @throws IOException            IO Exception
-     * @throws CssValidationException Css Validation Exception
-     */
-    public static void validateAttrDeclaration(
-            @Nonnull final ParsedAttrSpec parsedAttrSpec,
-            @Nonnull final Context context,
-            @Nonnull final String tagSpecName,
-            @Nonnull final String attrName,
-            @Nonnull final String attrValue,
-            @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) throws IOException,
-            CssValidationException {
-        final List<ErrorToken> cssErrors = new ArrayList<>();
-        final CssParser cssParser = new CssParser(attrValue,
-                context.getLineCol().getLineNumber(), context.getLineCol().getColumnNumber(), cssErrors);
-        final List<Token> tokenList = cssParser.tokenize();
-
-        final List<Declaration> declarations = parseInlineStyle(tokenList, cssErrors);
-
-        for (final ErrorToken errorToken : cssErrors) {
-            // Override the first parameter with the name of this style tag.
-            final List<String> params = errorToken.getParams();
-            // Override the first parameter with the name of this style tag.
-            params.set(0, tagSpecName);
-            context.addError(
-                    errorToken.getCode(),
-                    errorToken.getLine(),
-                    errorToken.getCol(),
-                    params,
-                    /* url */ "",
-                    validationResult);
-        }
-
-        // If there were errors parsing, exit from validating further.
-        if (cssErrors.size() > 0) {
-            return;
-        }
-
-        final Map<String, ValidatorProtos.CssDeclaration> cssDeclarationByName = parsedAttrSpec.getCssDeclarationByName();
-
-        for (final Declaration declaration : declarations) {
-            final String declarationName =
-                    stripVendorPrefix(declaration.getName().toLowerCase());
-            if (!(cssDeclarationByName.containsKey(declarationName))) {
-                // Declaration not allowed.
-                final List<String> params = new ArrayList<>();
-                params.add(declaration.getName());
-                params.add(attrName);
-                params.add(tagSpecName);
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.DISALLOWED_PROPERTY_IN_ATTR_VALUE,
-                        context.getLineCol(),
-                        params,
-                        context.getRules().getStylesSpecUrl(),
-                        validationResult);
-            } else {
-                final ValidatorProtos.CssDeclaration cssDeclaration = cssDeclarationByName.get(declarationName);
-                if (cssDeclaration.getValueCaseiList().size() > 0) {
-                    boolean hasValidValue = false;
-                    final String firstIdent = declaration.firstIdent();
-                    for (final String value : cssDeclaration.getValueCaseiList()) {
-                        if (firstIdent.toLowerCase().equals(value)) {
-                            hasValidValue = true;
-                            break;
-                        }
-                    }
-                    if (!hasValidValue) {
-                        // Declaration value not allowed.
-                        final List<String> params = new ArrayList<>();
-                        params.add(tagSpecName);
-                        params.add(declaration.getName());
-                        params.add(firstIdent);
-                        context.addError(
-                                ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
-                                context.getLineCol(),
-                                params,
-                                context.getRules().getStylesSpecUrl(),
-                                validationResult);
-                    }
-                }
-            }
-        }
-    }
-
-    /**
-     * Returns true if |value| contains mustache template syntax.
-     *
-     * @param value value.
-     * @return {boolean}
-     */
-    public static boolean attrValueHasTemplateSyntax(@Nonnull final String value) {
-        // Mustache (https://mustache.github.io/mustache.5.html), our template
-        // system, supports replacement tags that start with {{ and end with }}.
-        // We relax attribute value rules if the value contains this syntax as we
-        // will validate the post-processed tag instead.
-        return MUSTACHE_TAG_PATTERN.matcher(value).matches();
-    }
-
-    /**
-     * This is the main validation procedure for attributes, operating with a
-     * ParsedAttrSpec instance.
-     *
-     * @param parsedAttrSpec parsed attribute spec.
-     * @param context        the context.
-     * @param attrName       attribute name.
-     * @param attrValue      attribute value.
-     * @param tagSpec        the tag spec.
-     * @param result         the validation result.
-     */
-    public static void validateNonTemplateAttrValueAgainstSpec(
-            @Nonnull final ParsedAttrSpec parsedAttrSpec,
-            @Nonnull final Context context,
-            @Nonnull final String attrName,
-            @Nonnull final String attrValue,
-            @Nonnull final ValidatorProtos.TagSpec tagSpec,
-            @Nonnull final ValidatorProtos.ValidationResult.Builder result) {
-        // The value, value_regex, value_url, and value_properties fields are treated
-        // like a oneof, but we're not using oneof because it's a feature that was
-        // added after protobuf 2.5.0 (which our open-source version uses).
-        // begin oneof {
-        final ValidatorProtos.AttrSpec spec = parsedAttrSpec.getSpec();
-        if (spec.hasAddValueToSet()) {
-            ValidatorProtos.ValueSetProvision.Builder provision = ValidatorProtos.ValueSetProvision.newBuilder();
-            provision.setSet(spec.getAddValueToSet());
-            provision.setValue(attrValue);
-            result.addValueSetProvisions(provision);
-        }
-        if (spec.hasValueOneofSet()) {
-            ValidatorProtos.ValueSetRequirement.Builder requirement = ValidatorProtos.ValueSetRequirement.newBuilder();
-            ValidatorProtos.ValueSetProvision.Builder provision = ValidatorProtos.ValueSetProvision.newBuilder();
-            provision.setSet(spec.getValueOneofSet());
-            provision.setValue(attrValue);
-            requirement.setProvision(provision);
-
-            final List<String> params = new ArrayList<>();
-            params.add(attrName);
-            params.add(TagSpecUtils.getTagSpecName(tagSpec));
-            requirement.setErrorIfUnsatisfied(
-                    ValidationErrorUtils.populateError(
-                            ValidatorProtos.ValidationError.Severity.ERROR,
-                            ValidatorProtos.ValidationError.Code.VALUE_SET_MISMATCH,
-                            context.getLineCol(),
-                            params,
-                            TagSpecUtils.getTagSpecUrl(tagSpec)));
-            result.addValueSetRequirements(requirement);
-        }
-        if (spec.getValueCount() > 0) {
-            for (final String value : spec.getValueList()) {
-                if (attrValue.equals(value)) {
-                    return;
-                }
-            }
-            final List<String> params = new ArrayList<>();
-            params.add(attrName);
-            params.add(TagSpecUtils.getTagSpecName(tagSpec));
-            params.add(attrValue);
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(tagSpec),
-                    result);
-        } else if (spec.getValueCaseiCount() > 0) {
-            for (final String value : spec.getValueCaseiList()) {
-                if (attrValue.toLowerCase().equals(value)) {
-                    return;
-                }
-            }
-
-            final List<String> params = new ArrayList<>();
-            params.add(attrName);
-            params.add(TagSpecUtils.getTagSpecName(tagSpec));
-            params.add(attrValue);
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(tagSpec),
-                    result);
-        } else if (spec.hasValueRegex() || spec.hasValueRegexCasei()) {
-            final Pattern valueRegex =
-                    (spec.hasValueRegex())
-                            ? context.getRules().getFullMatchRegex(spec.getValueRegex())
-                            : context.getRules().getFullMatchCaseiRegex(spec.getValueRegexCasei());
-            if (!valueRegex.matcher(attrValue).matches()) {
-                final List<String> params = new ArrayList<>();
-                params.add(attrName);
-                params.add(TagSpecUtils.getTagSpecName(tagSpec));
-                params.add(attrValue);
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(tagSpec),
-                        result);
-            }
-        } else if (spec.hasValueUrl()) {
-            validateAttrValueUrl(parsedAttrSpec, context, attrName, attrValue, tagSpec, result);
-        } else {
-            final ParsedValueProperties valueProperties = parsedAttrSpec.getValuePropertiesOrNull();
-            if (valueProperties != null) {
-                validateAttrValueProperties(
-                        valueProperties, context, attrName, attrValue, tagSpec, result);
-            }
-        }
-        // } end oneof
-    }
-
-
-    /**
-     * Helper method for validateNonTemplateAttrValueAgainstSpec.
-     *
-     * @param parsedValueProperties value properties.
-     * @param context               the context.
-     * @param attrName              the attribute name.
-     * @param attrValue             the attribute value.
-     * @param tagSpec               the tag spec.
-     * @param result                validation result.
-     */
-    public static void validateAttrValueProperties(@Nonnull final ParsedValueProperties parsedValueProperties,
-                                                   @Nonnull final Context context,
-                                                   @Nonnull final String attrName,
-                                                   @Nonnull final String attrValue,
-                                                   @Nonnull final ValidatorProtos.TagSpec tagSpec,
-                                                   @Nonnull final ValidatorProtos.ValidationResult.Builder result) {
-        final String[] segments = attrValue.split("[,;]");
-        final Map<String, String> properties = new HashMap<>();
-        for (final String segment : segments) {
-            final String[] keyValue = segment.split("=");
-            if (keyValue.length < 2) {
-                continue;
-            }
-            properties.put(keyValue[0].trim().toLowerCase(), keyValue[1]);
-        }
-        // TODO(johannes): End hack.
-        final Set<String> names = properties.keySet();
-        for (final String name : names) {
-            final String value = properties.get(name);
-            final Map<String, ValidatorProtos.PropertySpec> valuePropertyByName =
-                    parsedValueProperties.getValuePropertyByName();
-            if (!(valuePropertyByName.containsKey(name))) {
-                final List<String> params = new ArrayList<>();
-                params.add(name);
-                params.add(attrName);
-                params.add(TagSpecUtils.getTagSpecName(tagSpec));
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.DISALLOWED_PROPERTY_IN_ATTR_VALUE,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(tagSpec),
-                        result);
-                continue;
-            }
-            final ValidatorProtos.PropertySpec propertySpec = valuePropertyByName.get(name);
-            final List<String> params;
-            if (propertySpec.hasValue()) {
-                if (!propertySpec.getValue().equals(value.toLowerCase())) {
-                    params = new ArrayList<>();
-                    params.add(name);
-                    params.add(attrName);
-                    params.add(TagSpecUtils.getTagSpecName(tagSpec));
-                    params.add(value);
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.INVALID_PROPERTY_VALUE_IN_ATTR_VALUE,
-                            context.getLineCol(),
-                            params,
-                            TagSpecUtils.getTagSpecUrl(tagSpec),
-                            result);
-                }
-            } else if (propertySpec.hasValueDouble()) {
-                Double doubleValue = null;
-                try {
-                    doubleValue = Double.valueOf(value);
-                } catch (final NumberFormatException e) {
-                    //no op
-                }
-                if (doubleValue == null || doubleValue != propertySpec.getValueDouble()) {
-                    params = new ArrayList<>();
-                    params.add(name);
-                    params.add(attrName);
-                    params.add(TagSpecUtils.getTagSpecName(tagSpec));
-                    params.add(value);
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.INVALID_PROPERTY_VALUE_IN_ATTR_VALUE,
-                            context.getLineCol(),
-                            params,
-                            TagSpecUtils.getTagSpecUrl(tagSpec),
-                            result);
-                }
-            }
-        }
-
-        /** Make a copy here because we don't want to remove from the original parsed value properties. */
-        List<String> notSeen =
-                new ArrayList<>(parsedValueProperties.getMandatoryValuePropertyNames());
-        List<String> seen = new ArrayList<>(names);
-        notSeen.removeAll(seen);
-        for (final String name : notSeen) {
-            final List<String> params = new ArrayList<>();
-            params.add(name);
-            params.add(attrName);
-            params.add(TagSpecUtils.getTagSpecName(tagSpec));
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(tagSpec),
-                    result);
-        }
-    }
-
-    /**
-     * Helper method for validateNonTemplateAttrValueAgainstSpec.
-     *
-     * @param parsedAttrSpec the parsed attribute spec.
-     * @param context        the context.
-     * @param attrName       the attribute name.
-     * @param attrValue      the attribute value.
-     * @param tagSpec        the tag spec.
-     * @param result         validation result.
-     */
-    public static void validateAttrValueUrl(@Nonnull final ParsedAttrSpec parsedAttrSpec,
-                                            @Nonnull final Context context,
-                                            @Nonnull final String attrName,
-                                            @Nonnull final String attrValue,
-                                            @Nonnull final ValidatorProtos.TagSpec tagSpec,
-                                            @Nonnull final ValidatorProtos.ValidationResult.Builder result) {
-        final Set<String> maybeUris = new TreeSet<>();
-
-        if (!attrName.equals("srcset")) {
-            maybeUris.add(attrValue);
-        } else {
-            if (attrValue.equals("")) {
-                final List<String> params = new ArrayList<>();
-                params.add(attrName);
-                params.add(TagSpecUtils.getTagSpecName(tagSpec));
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.MISSING_URL,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(tagSpec),
-                        result);
-                return;
-            }
-
-            final SrcsetParsingResult parseResult = ParseSrcSetUtils.parseSrcset(attrValue);
-            if (!parseResult.isSuccess()) {
-                // DUPLICATE_DIMENSION only needs two parameters, it does not report
-                // on the attribute value.
-                final List<String> params = new ArrayList<>();
-                params.add(attrName);
-                params.add(TagSpecUtils.getTagSpecName(tagSpec));
-                if (parseResult.getErrorCode() == ValidatorProtos.ValidationError.Code.DUPLICATE_DIMENSION) {
-                    context.addError(
-                            parseResult.getErrorCode(),
-                            context.getLineCol(),
-                            params,
-                            TagSpecUtils.getTagSpecUrl(tagSpec),
-                            result);
-                } else {
-                    params.add(attrValue);
-                    context.addError(
-                            parseResult.getErrorCode(),
-                            context.getLineCol(),
-                            params,
-                            TagSpecUtils.getTagSpecUrl(tagSpec),
-                            result);
-                }
-                return;
-            }
-            for (final SrcsetSourceDef image : parseResult.getSrcsetImages()) {
-                maybeUris.add(image.getUrl());
-            }
-        }
-        if (maybeUris.size() == 0) {
-            final List<String> params = new ArrayList<>();
-            params.add(attrName);
-            params.add(TagSpecUtils.getTagSpecName(tagSpec));
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.MISSING_URL,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(tagSpec),
-                    result);
-            return;
-        }
-        final UrlErrorInAttrAdapter adapter = new UrlErrorInAttrAdapter(attrName);
-        for (final String maybeUri : maybeUris) {
-            final String unescapedMaybeUri = StringEscapeUtils.unescapeHtml4(maybeUri);
-            validateUrlAndProtocol(
-                    parsedAttrSpec.getValueUrlSpec(), adapter, context, unescapedMaybeUri,
-                    tagSpec, result);
-            if (result.getStatus() == ValidatorProtos.ValidationResult.Status.FAIL) {
-                return;
-            }
-        }
-    }
-
-    /**
-     * @param parsedUrlSpec parsed url spec.
-     * @param adapter       UrlErrorAdaptor interface.
-     * @param context       the context.
-     * @param urlStr        url string.
-     * @param tagSpec       tag spec.
-     * @param result        validation result.
-     */
-    public static void validateUrlAndProtocol(@Nonnull final ParsedUrlSpec parsedUrlSpec,
-                                              @Nonnull final UrlErrorAdapter adapter,
-                                              @Nonnull final Context context,
-                                              @Nonnull final String urlStr,
-                                              @Nonnull final ValidatorProtos.TagSpec tagSpec,
-                                              @Nonnull final ValidatorProtos.ValidationResult.Builder result) {
-        final ValidatorProtos.UrlSpec spec = parsedUrlSpec.getSpec();
-        if (ONLY_WHITESPACE_PATTERN.matcher(urlStr).matches() && (!spec.hasAllowEmpty())) {
-            adapter.missingUrl(context, tagSpec, result);
-            return;
-        }
-
-        URL url;
-        String protocol = "";
-        try {
-            url = new URL(urlStr);
-        } catch (MalformedURLException e) {
-            /** Fallback where we can't instantiate URL, need to obtain the protocol. */
-            String urlStrTrimmed = urlStr.toLowerCase().trim();
-            Matcher matcher = URL_PROTOCOL_PATTERN.matcher(urlStrTrimmed);
-            if (matcher.matches()) {
-                protocol = matcher.group(1);
-            }
-
-            if (!spec.getAllowRelative() && (protocol.length() == 0)) {
-                adapter.disallowedRelativeUrl(context, urlStr, tagSpec, result);
-                return;
-            }
-
-            if (protocol.length() > 0 && !parsedUrlSpec.isAllowedProtocol(protocol)) {
-                adapter.invalidUrl(context, urlStr, tagSpec, result);
-            }
-            return;
-        }
-
-        protocol = url.getProtocol();
-        if (protocol.length() > 0 && !parsedUrlSpec.isAllowedProtocol(protocol)) {
-            adapter.invalidUrlProtocol(context, protocol, tagSpec, result);
-            return;
-        }
-        if (!spec.getAllowRelative() && (protocol.length() == 0)) {
-            adapter.disallowedRelativeUrl(context, urlStr, tagSpec, result);
-            return;
-        }
-    }
-
-    /**
-     * Validates the layout for the given tag. This involves checking the
-     * layout, width, height, sizes attributes with AMP specific logic.
-     *
-     * @param parsedTagSpec  the parsed tag spec.
-     * @param context        the context.
-     * @param encounteredTag encountered tag.
-     * @param result         validation result.
-     * @throws TagValidationException the tag validation exception.
-     */
-    public static void validateLayout(@Nonnull final ParsedTagSpec parsedTagSpec,
-                                      @Nonnull final Context context,
-                                      @Nonnull final ParsedHtmlTag encounteredTag,
-                                      @Nonnull final ValidatorProtos.ValidationResult.Builder result)
-            throws TagValidationException {
-
-        final ValidatorProtos.TagSpec spec = parsedTagSpec.getSpec();
-        if (!spec.hasAmpLayout()) {
-            throw new TagValidationException("Expecting AMP Layout null");
-        }
-
-        final HashMap<String, String> attrsByKey = encounteredTag.attrsByKey();
-        final String layoutAttr = attrsByKey.get("layout");
-        final String widthAttr = attrsByKey.get("width");
-        final String heightAttr = attrsByKey.get("height");
-        final String sizesAttr = attrsByKey.get("sizes");
-        final String heightsAttr = attrsByKey.get("heights");
-
-        // We disable validating layout for tags where one of the layout attributes
-        // contains mustache syntax.
-        final boolean hasTemplateAncestor = context.getTagStack().hasAncestor("TEMPLATE");
-        if (hasTemplateAncestor
-                && (attrValueHasTemplateSyntax(layoutAttr)
-                || attrValueHasTemplateSyntax(widthAttr)
-                || attrValueHasTemplateSyntax(heightAttr)
-                || attrValueHasTemplateSyntax(sizesAttr)
-                || attrValueHasTemplateSyntax(heightsAttr))) {
-            return;
-        }
-
-        // Parse the input layout attributes which we found for this tag.
-        final ValidatorProtos.AmpLayout.Layout inputLayout = TagSpecUtils.parseLayout(layoutAttr);
-        if (layoutAttr != null
-                && inputLayout == ValidatorProtos.AmpLayout.Layout.UNKNOWN) {
-            List<String> params = new ArrayList<>();
-            params.add("layout");
-            params.add(TagSpecUtils.getTagSpecName(spec));
-            params.add(layoutAttr);
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(spec),
-                    result);
-            return;
-        }
-        final CssLength inputWidth = new CssLength(
-                widthAttr, /* allowAuto */ true,
-                /* allowFluid */ inputLayout.equals(ValidatorProtos.AmpLayout.Layout.FLUID));
-        if (!inputWidth.isValid()) {
-            List<String> params = new ArrayList<>();
-            params.add("width");
-            params.add(TagSpecUtils.getTagSpecName(spec));
-            params.add(widthAttr);
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(spec),
-                    result);
-            return;
-        }
-        final CssLength inputHeight = new CssLength(
-                heightAttr, /* allowAuto */ true,
-                /* allowFluid */ inputLayout == ValidatorProtos.AmpLayout.Layout.FLUID);
-        if (!inputHeight.isValid()) {
-            List<String> params = new ArrayList<>();
-            params.add("height");
-            params.add(TagSpecUtils.getTagSpecName(spec));
-            params.add(heightAttr);
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(spec),
-                    result);
-            return;
-        }
-
-        // Now calculate the effective layout attributes.
-        final CssLength width = TagSpecUtils.calculateWidth(spec.getAmpLayout(), inputLayout, inputWidth);
-        final CssLength height = TagSpecUtils.calculateHeight(spec.getAmpLayout(), inputLayout, inputHeight);
-        final ValidatorProtos.AmpLayout.Layout layout =
-                TagSpecUtils.calculateLayout(inputLayout, width, height, sizesAttr, heightsAttr);
-
-        // Validate for transformed AMP the server-side rendering layout.
-        TagSpecUtils.validateSsrLayout(
-                spec, encounteredTag, inputLayout, inputWidth, inputHeight, sizesAttr,
-                heightsAttr, context, result);
-
-        // Only FLEX_ITEM allows for height to be set to auto.
-        if (height.isAuto() && layout != ValidatorProtos.AmpLayout.Layout.FLEX_ITEM) {
-            List<String> params = new ArrayList<>();
-            params.add("height");
-            params.add(TagSpecUtils.getTagSpecName(spec));
-            params.add(heightAttr);
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(spec),
-                    result);
-            return;
-        }
-
-        // Does the tag support the computed layout?
-        if (spec.getAmpLayout().getSupportedLayoutsList().indexOf(layout) == -1) {
-            final ValidatorProtos.ValidationError.Code code =
-                    (layoutAttr == null)
-                            ? ValidatorProtos.ValidationError.Code.IMPLIED_LAYOUT_INVALID
-                            : ValidatorProtos.ValidationError.Code.SPECIFIED_LAYOUT_INVALID;
-            // Special case. If no layout related attributes were provided, this implies
-            // the CONTAINER layout. However, telling the user that the implied layout
-            // is unsupported for this tag is confusing if all they need is to provide
-            // width and height in, for example, the common case of creating
-            // an AMP-IMG without specifying dimensions. In this case, we emit a
-            // less correct, but simpler error message that could be more useful to
-            // the average user.
-            if (code == ValidatorProtos.ValidationError.Code.IMPLIED_LAYOUT_INVALID
-                    && layout == ValidatorProtos.AmpLayout.Layout.CONTAINER
-                    && spec.getAmpLayout().getSupportedLayoutsList().indexOf(
-                    ValidatorProtos.AmpLayout.Layout.RESPONSIVE) != -1) {
-                List<String> params = new ArrayList<>();
-                params.add(TagSpecUtils.getTagSpecName(spec));
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.MISSING_LAYOUT_ATTRIBUTES,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(spec),
-                        result);
-                return;
-            }
-            List<String> params = new ArrayList<>();
-            params.add(layout.toString());
-            params.add(TagSpecUtils.getTagSpecName(spec));
-            context.addError(
-                    code,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(spec),
-                    result);
-            return;
-        }
-        // FIXED, FIXED_HEIGHT, INTRINSIC, RESPONSIVE must have height set.
-        if ((layout == ValidatorProtos.AmpLayout.Layout.FIXED
-                || layout == ValidatorProtos.AmpLayout.Layout.FIXED_HEIGHT
-                || layout == ValidatorProtos.AmpLayout.Layout.INTRINSIC
-                || layout == ValidatorProtos.AmpLayout.Layout.RESPONSIVE)
-                && !height.isSet()) {
-            List<String> params = new ArrayList<>();
-            params.add("height");
-            params.add(TagSpecUtils.getTagSpecName(spec));
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.MANDATORY_ATTR_MISSING,
-                    context.getLineCol(),
-                    params, TagSpecUtils.getTagSpecUrl(spec),
-                    result);
-            return;
-        }
-        // For FIXED_HEIGHT if width is set it must be auto.
-        if (layout == ValidatorProtos.AmpLayout.Layout.FIXED_HEIGHT
-                && width.isSet()
-                && !width.isAuto()) {
-            List<String> params = new ArrayList<>();
-            params.add(widthAttr);
-            params.add("width");
-            params.add(TagSpecUtils.getTagSpecName(spec));
-            params.add("FIXED_HEIGHT");
-            params.add("auto");
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.ATTR_VALUE_REQUIRED_BY_LAYOUT,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(spec),
-                    result);
-            return;
-        }
-        // FIXED, INTRINSIC, RESPONSIVE must have width set and not be auto.
-        if (layout == ValidatorProtos.AmpLayout.Layout.FIXED
-                || layout == ValidatorProtos.AmpLayout.Layout.INTRINSIC
-                || layout == ValidatorProtos.AmpLayout.Layout.RESPONSIVE) {
-            if (!width.isSet()) {
-                List<String> params = new ArrayList<>();
-                params.add("width");
-                params.add(TagSpecUtils.getTagSpecName(spec));
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.MANDATORY_ATTR_MISSING,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(spec),
-                        result);
-                return;
-            } else if (width.isAuto()) {
-                List<String> params = new ArrayList<>();
-                params.add("width");
-                params.add(TagSpecUtils.getTagSpecName(spec));
-                params.add("auto");
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(spec),
-                        result);
-                return;
-            }
-        }
-        // INTRINSIC, RESPONSIVE must have same units for height and width.
-        if ((layout == ValidatorProtos.AmpLayout.Layout.INTRINSIC
-                || layout == ValidatorProtos.AmpLayout.Layout.RESPONSIVE)
-                && !(width.getUnit().equals(height.getUnit()))) {
-            List<String> params = new ArrayList<>();
-            params.add(TagSpecUtils.getTagSpecName(spec));
-            params.add(width.getUnit());
-            params.add(height.getUnit());
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.INCONSISTENT_UNITS_FOR_WIDTH_AND_HEIGHT,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(spec),
-                    result);
-            return;
-        }
-        // RESPONSIVE only allows heights attribute.
-        if (heightsAttr != null && layout != ValidatorProtos.AmpLayout.Layout.RESPONSIVE) {
-            List<String> params = new ArrayList<>();
-            params.add("height");
-            params.add(TagSpecUtils.getTagSpecName(spec));
-            params.add(layout.toString());
-            final ValidatorProtos.ValidationError.Code code =
-                    (layoutAttr == null)
-                            ? ValidatorProtos.ValidationError.Code.ATTR_DISALLOWED_BY_IMPLIED_LAYOUT
-                            : ValidatorProtos.ValidationError.Code.ATTR_DISALLOWED_BY_SPECIFIED_LAYOUT;
-            context.addError(code, context.getLineCol(), params, TagSpecUtils.getTagSpecUrl(spec), result);
-            return;
-        }
-    }
-
-    /**
-     * Validates whether an encountered attribute is validated by an ExtensionSpec.
-     * ExtensionSpec's validate the 'custom-element', 'custom-template', and 'src'
-     * attributes. If an error is found, it is added to the |result|. The return
-     * value indicates whether or not the provided attribute is explained by this
-     * validation function.
-     *
-     * @param tagSpec   tag spec.
-     * @param context   the context.
-     * @param attrName  attribute name.
-     * @param attrValue attribute value.
-     * @param result    validation result.
-     * @return returns value indicates whether or not the provided attribute is explained by validation function.
-     * @throws TagValidationException the tag validation exception.
-     */
-    public static boolean validateAttributeInExtension(@Nonnull final ValidatorProtos.TagSpec tagSpec,
-                                                       @Nonnull final Context context,
-                                                       @Nonnull final String attrName,
-                                                       @Nonnull final String attrValue,
-                                                       @Nonnull final ValidatorProtos.ValidationResult.Builder result)
-            throws TagValidationException {
-        if (!tagSpec.hasExtensionSpec()) {
-            throw new TagValidationException("Expecting extension spec not null");
-        }
-
-        final ValidatorProtos.ExtensionSpec extensionSpec = tagSpec.getExtensionSpec();
-        // TagSpecs with extensions will only be evaluated if their dispatch_key
-        // matches, which is based on this custom-element/custom-template/host-service
-        // field attribute value. The dispatch key matching is case-insensitive for
-        // faster lookups, so it still possible for the attribute value to not match
-        // if it contains upper-case letters.
-        if (tagSpec.hasExtensionSpec() && getExtensionNameAttribute(extensionSpec) == attrName) {
-            if (!extensionSpec.getName().equals(attrValue)) {
-                if (extensionSpec.getName().equals(attrValue.toLowerCase())) {
-                    throw new TagValidationException("Extension spec name is matched to a lower case attribute value.");
-                }
-                return false;
-            }
-            return true;
-        } else if (attrName.equals("src")) {
-            final Matcher reResult = SRC_URL_REGEX.matcher(attrValue);
-
-            // If the src URL matches this regex and the base name of the file matches
-            // the extension, look to see if the version matches.
-            if (reResult.matches()
-                    && reResult.group(1).equals(extensionSpec.getName())) {
-                final String encounteredVersion = reResult.group(2);
-                boolean foundDecprecatedVersion = false;
-                for (String deprecatedVersion : extensionSpec.getDeprecatedVersionList()) {
-                    if (deprecatedVersion.equals(encounteredVersion)) {
-                        foundDecprecatedVersion = true;
-                        break;
-                    }
-                }
-                if (foundDecprecatedVersion) {
-                    List<String> params = new ArrayList<>();
-                    params.add(extensionSpec.getName());
-                    params.add(encounteredVersion);
-                    context.addWarning(
-                            ValidatorProtos.ValidationError.Code.WARNING_EXTENSION_DEPRECATED_VERSION,
-                            context.getLineCol(),
-                            params,
-                            TagSpecUtils.getTagSpecUrl(tagSpec),
-                            result);
-                    return true;
-                }
-
-                boolean foundVersion = false;
-                for (String version : extensionSpec.getVersionList()) {
-                    if (version.equals(encounteredVersion)) {
-                        foundVersion = true;
-                        break;
-                    }
-                }
-                if (foundVersion) {
-                    return true;
-                }
-            }
-            List<String> params = new ArrayList<>();
-            params.add(attrName);
-            params.add(TagSpecUtils.getTagSpecName(tagSpec));
-            params.add(attrValue);
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(tagSpec),
-                    result);
-            return true;
-        }
-        return false;
-    }
-
-    /**
-     * Determines the name of the attribute where you find the name of this sort of
-     * extension. Typically, this will return 'custom-element'.
-     *
-     * @param extensionSpec extensionSpec
-     * @return returns the name of the attribute where you find the name of this sort of extension.
-     */
-    public static String getExtensionNameAttribute(@Nonnull final ValidatorProtos.ExtensionSpec extensionSpec) {
-        switch (extensionSpec.getExtensionType()) {
-            case CUSTOM_TEMPLATE:
-                return "custom-template";
-            case HOST_SERVICE:
-                return "host-service";
-            default:
-                return "custom-element";
-        }
-    }
-
-    /**
-     * Helper method for validateAttributes, for when an attribute is
-     * encountered which is not specified by the validator.protoascii
-     * specification.
-     *
-     * @param parsedTagSpec the parsed tag spec.
-     * @param context       the context.
-     * @param attrName      attribute name.
-     * @param result        validation result.
-     */
-    public static void validateAttrNotFoundInSpec(@Nonnull final ParsedTagSpec parsedTagSpec,
-                                                  @Nonnull final Context context, @Nonnull final String attrName,
-                                                  @Nonnull final ValidatorProtos.ValidationResult.Builder result) {
-        // For now, we just skip data- attributes in the validator, because
-        // our schema doesn't capture which ones would be ok or not. E.g.
-        // in practice, some type of ad or perhaps other custom elements require
-        // particular data attributes.
-        // http://www.w3.org/TR/html5/single-page.html#attr-data-*
-        // http://w3c.github.io/aria-in-html/
-        // However, to avoid parsing differences, we restrict the set of allowed
-        // characters in the document.
-        // If explicitAttrsOnly is true then do not allow data- attributes by default.
-        // They must be explicitly added to the tagSpec.
-        if (!parsedTagSpec.getSpec().hasExplicitAttrsOnly()
-                && (DATA_PATTERN.matcher(attrName).matches())) {
-            return;
-        }
-
-        // At this point, it's an error either way, but we try to give a
-        // more specific error in the case of Mustache template characters.
-        if (attrName.indexOf("{{") != -1) {
-            List<String> params = new ArrayList<>();
-            params.add(attrName);
-            params.add(TagSpecUtils.getTagSpecName(parsedTagSpec.getSpec()));
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.TEMPLATE_IN_ATTR_NAME,
-                    context.getLineCol(),
-                    params,
-                    context.getRules().getTemplateSpecUrl(), result);
-        } else {
-            List<String> params = new ArrayList<>();
-            params.add(attrName);
-            params.add(TagSpecUtils.getTagSpecName(parsedTagSpec.getSpec()));
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR,
-                    context.getLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(parsedTagSpec.getSpec()),
-                    result);
-        }
-    }
-
-    /**
-     * Specific checks for attribute values descending from a template tag.
-     *
-     * @param parsedTagSpec the parsed tag spec.
-     * @param context       the context.
-     * @param attrName      attribute name.
-     * @param attrValue     attribute value.
-     * @param result        the validation result.
-     */
-    public static void validateAttrValueBelowTemplateTag(@Nonnull final ParsedTagSpec parsedTagSpec,
-                                                         @Nonnull final Context context,
-                                                         @Nonnull final String attrName, @Nonnull final String attrValue,
-                                                         @Nonnull final ValidatorProtos.ValidationResult.Builder result) {
-        if (attrValueHasUnescapedTemplateSyntax(attrValue)) {
-            final ValidatorProtos.TagSpec spec = parsedTagSpec.getSpec();
-            List<String> params = new ArrayList<>();
-            params.add(attrName);
-            params.add(TagSpecUtils.getTagSpecName(spec));
-            params.add(attrValue);
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.UNESCAPED_TEMPLATE_IN_ATTR_VALUE,
-                    context.getLineCol(),
-                    params,
-                    context.getRules().getTemplateSpecUrl(),
-                    result);
-        } else if (attrValueHasPartialsTemplateSyntax(attrValue)) {
-            final ValidatorProtos.TagSpec spec = parsedTagSpec.getSpec();
-            List<String> params = new ArrayList<>();
-            params.add(attrName);
-            params.add(TagSpecUtils.getTagSpecName(spec));
-            params.add(attrValue);
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.TEMPLATE_PARTIAL_IN_ATTR_VALUE,
-                    context.getLineCol(),
-                    params,
-                    context.getRules().getTemplateSpecUrl(),
-                    result);
-        }
-
-    }
-
-    /**
-     * Returns true if |value| contains a mustache partials template syntax.
-     *
-     * @param value a test value.
-     * @return Returns true if |value| contains a mustache partials template syntax.
-     */
-    public static boolean attrValueHasPartialsTemplateSyntax(@Nonnull final String value) {
-        // Mustache (https://mustache.github.io/mustache.5.html), our template
-        // system, supports 'partials' which include other Mustache templates
-        // in the format of {{>partial}} and there can be whitespace after the {{.
-        // We disallow partials in attribute values.
-        return PARTIALS_PATTERN.matcher(value).find();
-    }
-
-    /**
-     * Returns true if |value| contains a mustache unescaped template syntax.
-     *
-     * @param value a test value.
-     * @return returns true if |value| contains a mustache unescaped template syntax.
-     */
-    public static boolean attrValueHasUnescapedTemplateSyntax(@Nonnull final String value) {
-        // Mustache (https://mustache.github.io/mustache.5.html), our template
-        // system, supports {{{unescaped}}} or {{{&unescaped}}} and there can
-        // be whitespace after the 2nd '{'. We disallow these in attribute Values.
-        return UNESCAPED_OPEN_TAG.matcher(value).find();
-    }
-
-    /**
-     * URL protocol pattern.
-     */
-    private static final Pattern URL_PROTOCOL_PATTERN = Pattern.compile("^([^:\\/?#.]+):.*$");
-
-    /**
-     * Only whitespace pattern.
-     */
-    private static final Pattern ONLY_WHITESPACE_PATTERN = Pattern.compile("^[\\s\\xa0]*$");
-
-    /**
-     * Partials pattern.
-     */
-    private static final Pattern PARTIALS_PATTERN = Pattern.compile("\\{\\{\\s*>");
-
-    /**
-     * Unescaped open tag pattern.
-     */
-    private static final Pattern UNESCAPED_OPEN_TAG = Pattern.compile("\\{\\{\\s*[&{]");
-
-    /**
-     * Data pattern.
-     */
-    private static final Pattern DATA_PATTERN = Pattern.compile("^data-[A-Za-z0-9-_:.]*$");
-
-    /**
-     * Mustache tag pattern.
-     */
-    private static final Pattern MUSTACHE_TAG_PATTERN = Pattern.compile("\\{\\{.*\\}\\}");
-
-    /**
-     * Src url Regex.
-     */
-    private static final Pattern SRC_URL_REGEX =
-            Pattern.compile("^https:\\/\\/cdn\\.ampproject\\.org\\/v0\\/(amp-[a-z0-9-]*)-([a-z0-9.]*)\\.js$");
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/utils/ByteUtils.java b/validator/java/src/main/java/dev/amp/validator/utils/ByteUtils.java
deleted file mode 100644
index 932b1255ed44a..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/utils/ByteUtils.java
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.utils;
-
-import javax.annotation.Nonnull;
-import java.io.UnsupportedEncodingException;
-
-/**
- * Byte utility methods.
- *
- * @author nhant01
- * @author GeorgeLuo
- *
- */
-
-public final class ByteUtils {
-    /**
-     * Private constructor.
-     */
-    private ByteUtils() {
-    }
-
-    /**
-     * Computes the byte length, rather than character length, of a utf8 string.
-     * https://en.wikipedia.org/wiki/UTF-8
-     * @param utf8Str UTF-8 string.
-     * @return returns the byte length.
-     */
-    public static int byteLength(@Nonnull final String utf8Str) {
-        // To figure out which characters are multi-byte we can abuse
-        // encodeURIComponent which will escape those specific characters.
-        try {
-            final int multiByteLength = utf8Str.getBytes("UTF-8").length;
-            return multiByteLength;
-        } catch (UnsupportedEncodingException uee) {
-            return utf8Str.length();
-        }
-    }
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/utils/CssSpecUtils.java b/validator/java/src/main/java/dev/amp/validator/utils/CssSpecUtils.java
deleted file mode 100644
index 5010421b88a2d..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/utils/CssSpecUtils.java
+++ /dev/null
@@ -1,583 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.utils;
-
-import com.steadystate.css.parser.Token;
-import dev.amp.validator.Context;
-import dev.amp.validator.ParsedAttrSpec;
-import dev.amp.validator.UrlErrorInStylesheetAdapter;
-import dev.amp.validator.ValidateTagResult;
-import dev.amp.validator.ValidatorProtos;
-import dev.amp.validator.css.Canonicalizer;
-import dev.amp.validator.css.CssParser;
-import dev.amp.validator.css.CssTokenUtil;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.css.Declaration;
-import dev.amp.validator.css.EOFToken;
-import dev.amp.validator.css.ErrorToken;
-import dev.amp.validator.css.ParsedCssUrl;
-import dev.amp.validator.css.ParsedDocCssSpec;
-import dev.amp.validator.css.Stylesheet;
-import dev.amp.validator.css.TokenType;
-import dev.amp.validator.visitor.Amp4AdsVisitor;
-import dev.amp.validator.visitor.ImportantPropertyVisitor;
-import dev.amp.validator.visitor.KeyframesVisitor;
-import dev.amp.validator.visitor.RuleVisitor;
-import dev.amp.validator.visitor.UrlFunctionVisitor;
-
-import javax.annotation.Nonnull;
-import java.io.IOException;
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-
-/**
- * Methods to handle Css Spec processing.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public final class CssSpecUtils {
-    /**
-     * private constructor
-     */
-    private CssSpecUtils() {
-    }
-
-    /**
-     * Returns a Stylesheet object with nested parse_css.Rules.
-     * <p>
-     * The top level Rules in a Stylesheet are always a series of
-     * QualifiedRule's or AtRule's.
-     *
-     * @param tokenList   the css content as token list
-     * @param atRuleSpec  block type rules for
-     *                    all CSS AT rules this canonicalizer should handle.
-     * @param defaultSpec default block type for types not
-     *                    found in atRuleSpec.
-     * @param errors      output array for the errors.
-     * @return a stylesheet object model
-     * @throws CssValidationException css validation exception
-     */
-    public static Stylesheet parseAStylesheet(@Nonnull final List<Token> tokenList,
-                                              @Nonnull final Map<String, BlockType> atRuleSpec,
-                                              @Nonnull final BlockType defaultSpec,
-                                              @Nonnull final List<ErrorToken> errors) throws CssValidationException {
-        final Canonicalizer canonicalizer = new Canonicalizer(atRuleSpec, defaultSpec);
-        final Stylesheet stylesheet = new Stylesheet();
-
-        stylesheet.setRules(canonicalizer.parseAListOfRules(tokenList, /* topLevel */ true, errors));
-        CssTokenUtil.copyPosTo(tokenList.get(0), stylesheet);
-        stylesheet.setEOF((EOFToken) CssTokenUtil.copyPosTo(tokenList.get(tokenList.size() - 1), new EOFToken()));
-
-        return stylesheet;
-    }
-
-    /**
-     * Extracts the URLs within the provided stylesheet, emitting them into
-     * parsedUrls and errors into errors.
-     *
-     * @param stylesheet to parse urls from
-     * @param parsedUrls urls found in stylesheet
-     * @param errors     collection of tokens to populate
-     * @throws CssValidationException css validation exception
-     */
-    public static void extractUrls(@Nonnull final Stylesheet stylesheet, @Nonnull final List<ParsedCssUrl> parsedUrls,
-                                   @Nonnull final List<ErrorToken> errors) throws CssValidationException {
-        final int errorsOldLength = errors.size();
-        final UrlFunctionVisitor visitor = new UrlFunctionVisitor(parsedUrls, errors);
-        stylesheet.accept(visitor);
-        // If anything went wrong, delete the urls we've already emitted.
-        if (errorsOldLength != errors.size()) {
-            final int parsedUrlsOldLength = parsedUrls.size();
-            parsedUrls.subList(parsedUrlsOldLength, parsedUrls.size()).clear();
-        }
-    }
-
-    /**
-     * Same as the stylesheet variant above, but operates on a single declaration at
-     * a time. Usedful when operating on parsed style attributes.
-     *
-     * @param declaration the decl to parse
-     * @param parsedUrls  collection of urls
-     * @param errors      reference
-     * @throws CssValidationException CssValidationException
-     */
-    public static void extractUrlsFromDeclaration(@Nonnull final Declaration declaration, @Nonnull final List<ParsedCssUrl> parsedUrls,
-                                                  @Nonnull final List<ErrorToken> errors) throws CssValidationException {
-        final int errorsOldLength = errors.size();
-        final UrlFunctionVisitor visitor = new UrlFunctionVisitor(parsedUrls, errors);
-        declaration.accept(visitor);
-        // If anything went wrong, delete the urls we've already emitted.
-        if (errorsOldLength != errors.size()) {
-            final int parsedUrlsOldLength = parsedUrls.size();
-            parsedUrls.subList(parsedUrlsOldLength, parsedUrls.size()).clear();
-        }
-    }
-
-    /**
-     * Extracts the declarations marked `!important` within within the provided
-     * stylesheet, emitting them into `important`.
-     *
-     * @param stylesheet to walk through
-     * @param important  list to populate
-     */
-    public static void extractImportantDeclarations(@Nonnull final Stylesheet stylesheet,
-                                                    @Nonnull final List<Declaration> important) throws CssValidationException {
-        final ImportantPropertyVisitor visitor = new ImportantPropertyVisitor(important);
-        stylesheet.accept(visitor);
-    }
-
-    /**
-     * Strips vendor prefixes from identifiers, e.g. property names or names
-     * of at rules. E.g., "-moz-keyframes" to "keyframes".
-     *
-     * @param prefixedString string with prefix
-     * @return input string less the prefix component
-     */
-    public static String stripVendorPrefix(@Nonnull final String prefixedString) {
-        // Checking for '-' is an optimization.
-        if (!prefixedString.equals("") && prefixedString.charAt(0) == '-') {
-            if (prefixedString.startsWith("-o-")) {
-                return prefixedString.substring("-o-".length());
-            }
-            if (prefixedString.startsWith("-moz-")) {
-                return prefixedString.substring("-moz-".length());
-            }
-            if (prefixedString.startsWith("-ms-")) {
-                return prefixedString.substring("-ms-".length());
-            }
-            if (prefixedString.startsWith("-webkit-")) {
-                return prefixedString.substring("-webkit-".length());
-            }
-        }
-        return prefixedString;
-    }
-
-    /**
-     * Strips 'min-' or 'max-' from the start of a media feature identifier, if
-     * present. E.g., "min-width" to "width".
-     *
-     * @param prefixedString the string with a prefix
-     * @return the prefix-stripped string
-     */
-    public static String stripMinMax(@Nonnull final String prefixedString) {
-        if (prefixedString.startsWith("min-")) {
-            return prefixedString.substring("min-".length());
-        }
-        if (prefixedString./*OK*/ startsWith("max-")) {
-            return prefixedString.substring("max-".length());
-        }
-        return prefixedString;
-    }
-
-    /**
-     * @param token value to match
-     * @param str   to match against
-     * @return true iff ascii value of token and string match
-     */
-    public static boolean asciiMatch(@Nonnull final Token token, @Nonnull final String str) {
-        return token.toString().toLowerCase().equals(str.toLowerCase());
-    }
-
-    /**
-     * validate the keyframes of css content
-     *
-     * @param styleSheet to validate
-     * @param errors     generated from css parsing
-     * @throws CssValidationException css validation exception
-     */
-    public static void validateKeyframesCss(@Nonnull final Stylesheet styleSheet,
-                                            @Nonnull final List<ErrorToken> errors) throws CssValidationException {
-        final RuleVisitor visitor = new KeyframesVisitor(errors);
-        styleSheet.accept(visitor);
-    }
-
-    /**
-     * validate a css document against amp4ads specs
-     *
-     * @param styleSheet to validate
-     * @param errors     generated from css parsing
-     * @throws CssValidationException css validation exception
-     */
-    public static void validateAmp4AdsCss(@Nonnull final Stylesheet styleSheet,
-                                          @Nonnull final List<ErrorToken> errors) throws CssValidationException {
-        final RuleVisitor visitor = new Amp4AdsVisitor(errors);
-        styleSheet.accept(visitor);
-    }
-
-    /**
-     * Returns true if the given Declaration is considered valid.
-     *
-     * @param cssSpec         the css spec of interest.
-     * @param declarationName the declaration to query for in the css spec.
-     * @return true iff the declaration is found in scc spec's allowed declarations
-     */
-    public static boolean isDeclarationValid(@Nonnull final ValidatorProtos.CssSpec cssSpec, @Nonnull final String declarationName) {
-        if (cssSpec.getDeclarationList().size() == 0) {
-            return true;
-        }
-        return cssSpec.getDeclarationList().indexOf(stripVendorPrefix(declarationName)) > -1;
-    }
-
-    /**
-     * Returns a string of the allowed Declarations.
-     *
-     * @param cssSpec of interest
-     * @return a string representation of allowed declarations
-     */
-    public static String allowedDeclarationsString(@Nonnull final ValidatorProtos.CssSpec cssSpec) {
-        if (cssSpec.getDeclarationList().size() > MAX_NUM_ALLOWED_DECLARATIONS) {
-            return "";
-        }
-        return "[\'" + String.join("\', \'", cssSpec.getDeclarationList()) + "\']";
-    }
-
-    /**
-     * Parses a CSS URL token; typically takes the form "url(http://foo)".
-     * Preconditions: tokens[token_idx] is a URL token
-     * and token_idx + 1 is in range.
-     *
-     * @param tokens   to parse
-     * @param tokenIdx starting index from tokens
-     * @param parsed   ParsedCssUrl to populate
-     * @throws CssValidationException css validation exception
-     */
-    public static void parseUrlToken(@Nonnull final List<Token> tokens, final int tokenIdx,
-                                     @Nonnull final ParsedCssUrl parsed) throws CssValidationException {
-        if (tokenIdx + 1 >= tokens.size()) {
-            throw new CssValidationException("Url token not within range of tokens");
-        }
-        final Token token = tokens.get(tokenIdx);
-
-        if (CssTokenUtil.getTokenType(token) != TokenType.URL) {
-            throw new CssValidationException("Url token not within range of tokens");
-        }
-
-        CssTokenUtil.copyPosTo(token, parsed);
-        parsed.setUtf8Url(token.toString());
-    }
-
-    /**
-     * Parses a CSS function token named 'url', including the string and closing
-     * paren. Typically takes the form "url('http://foo')".
-     * Returns the token_idx past the closing paren, or -1 if parsing fails.
-     * Preconditions: tokens[token_idx] is a URL token
-     * and tokens[token_idx].StringValue() == "url"
-     *
-     * @param tokens   to validate
-     * @param tokenIdx index to start from
-     * @param parsed   ParsedCssUrl object to populate
-     * @return the token_idx past the closing paren, or -1 if parsing fails.
-     * @throws CssValidationException css validation exception
-     */
-    public static int parseUrlFunction(@Nonnull final List<Token> tokens, int tokenIdx,
-                                       @Nonnull final ParsedCssUrl parsed) throws CssValidationException {
-        final Token token = tokens.get(tokenIdx);
-        if (CssTokenUtil.getTokenType(token) != TokenType.FUNCTION_TOKEN) {
-            throw new CssValidationException("Token at index is not a function token");
-        }
-
-        if (!token.toString().equals("url(")) {
-            throw new CssValidationException("Token value is not url");
-        }
-
-        if (CssTokenUtil.getTokenType(tokens.get(tokens.size() - 1)) != TokenType.EOF_TOKEN) {
-            throw new CssValidationException("Last token is not EOF token");
-        }
-
-        CssTokenUtil.copyPosTo(token, parsed);
-        tokenIdx++; // We've digested the function token above.
-        // Safe: tokens ends w/ EOF_TOKEN.
-        if (tokenIdx >= tokens.size()) {
-            throw new CssValidationException("Index outside of tokens range");
-        }
-
-        // Consume optional whitespace.
-        while (CssTokenUtil.getTokenType(tokens.get(tokenIdx)) == TokenType.WHITESPACE) {
-            tokenIdx++;
-            // Safe: tokens ends w/ EOF_TOKEN.
-            if (tokenIdx >= tokens.size()) {
-                throw new CssValidationException("Index outside of tokens range");
-            }
-        }
-
-        // Consume URL.
-        if (CssTokenUtil.getTokenType(tokens.get(tokenIdx)) != TokenType.STRING) {
-            return -1;
-        }
-        parsed.setUtf8Url((tokens.get(tokenIdx).toString()));
-
-        tokenIdx++;
-        // Safe: tokens ends w/ EOF_TOKEN.
-        if (tokenIdx >= tokens.size()) {
-            throw new CssValidationException("token index outside of tokens range");
-        }
-
-        // Consume optional whitespace.
-        while (CssTokenUtil.getTokenType(tokens.get(tokenIdx)) == TokenType.WHITESPACE) {
-            tokenIdx++;
-            // Safe: tokens ends w/ EOF_TOKEN.
-            if (tokenIdx >= tokens.size()) {
-                throw new CssValidationException("token index outside of tokens range");
-            }
-        }
-
-        // Consume ')'
-        if (CssTokenUtil.getTokenType(tokens.get(tokenIdx)) != TokenType.CLOSE_PAREN) {
-            return -1;
-        }
-        return tokenIdx + 1;
-    }
-
-    /**
-     * Parse inline style content into Declaration objects.
-     *
-     * @param tokenList the css content in a list of tokens.
-     * @param errors    output array for the errors.
-     * @return Returns a array of Declaration objects.
-     * @throws CssValidationException Css Validation Exception
-     */
-    public static List<Declaration> parseInlineStyle(@Nonnull final List<Token> tokenList,
-                                                     @Nonnull final List<ErrorToken> errors)
-            throws CssValidationException {
-        final Canonicalizer canonicalizer =
-                new Canonicalizer(new HashMap<String, BlockType>(),
-                        BlockType.PARSE_AS_DECLARATIONS);
-        return canonicalizer.parseAListOfDeclarations(tokenList, errors);
-    }
-
-    /**
-     * Helper method for ValidateAttributes.
-     *
-     * @param parsedAttrSpec
-     * @param context
-     * @param tagSpec
-     * @param attrName
-     * @param attrValue
-     * @param result
-     * @throws IOException for css tokenize
-     */
-    public static void validateAttrCss(
-            @Nonnull final ParsedAttrSpec parsedAttrSpec,
-            @Nonnull final Context context,
-            @Nonnull final ValidatorProtos.TagSpec tagSpec,
-            @Nonnull final String attrName,
-            @Nonnull final String attrValue,
-            @Nonnull final ValidateTagResult result) throws IOException, CssValidationException {
-        final int attrByteLen = ByteUtils.byteLength(attrValue);
-
-        // Track the number of CSS bytes. If this tagspec is selected as the best
-        // match, this count will be added to the overall document inline style byte
-        // count for determining if that byte count has been exceeded.
-        result.setInlineStyleCssBytes(attrByteLen);
-
-        final List<ErrorToken> cssErrors = new ArrayList<>();
-        // The line/col we are passing in here is not the actual start point in the
-        // text for the attribute string. It's the start point for the tag. This
-        // means that any line/col values for tokens are also similarly offset
-        // incorrectly. For error messages, this means we just use the line/col of
-        // the tag instead of the token so as to minimize confusion. This could be
-        // improved further.
-        // TODO(https://github.com/ampproject/amphtml/issues/27507): Compute
-        // attribute offsets for use in CSS error messages.
-        final CssParser cssParser = new CssParser(attrValue,
-                context.getLineCol().getLineNumber(), context.getLineCol().getColumnNumber(), cssErrors);
-        final List<Token> tokenList = cssParser.tokenize();
-
-        final List<Declaration> declarations = parseInlineStyle(tokenList, cssErrors);
-
-        for (final ErrorToken errorToken : cssErrors) {
-            // Override the first parameter with the name of this style tag.
-            final List<String> params = errorToken.getParams();
-            // Override the first parameter with the name of this style tag.
-            params.set(0, tagSpec.getTagName());
-            context.addError(
-                    errorToken.getCode(),
-                    errorToken.getLine(),
-                    errorToken.getCol(),
-                    params,
-                    /* url */ "",
-                    result.getValidationResult());
-        }
-
-        // If there were errors parsing, exit from validating further.
-        if (cssErrors.size() > 0) {
-            return;
-        }
-
-        final ParsedDocCssSpec maybeSpec = context.matchingDocCssSpec();
-        if (maybeSpec != null) {
-            // Determine if we've exceeded the maximum bytes per inline style
-            // requirements.
-            if (maybeSpec.getSpec().getMaxBytesPerInlineStyle() >= 0
-                    && attrByteLen > maybeSpec.getSpec().getMaxBytesPerInlineStyle()) {
-                List<String> params = new ArrayList<>();
-                params.add(TagSpecUtils.getTagSpecName(tagSpec));
-                params.add(Integer.toString(attrByteLen));
-                params.add(Integer.toString(maybeSpec.getSpec().getMaxBytesPerInlineStyle()));
-
-                if (maybeSpec.getSpec().getMaxBytesIsWarning()) {
-                    context.addWarning(
-                            ValidatorProtos.ValidationError.Code.INLINE_STYLE_TOO_LONG,
-                            context.getLineCol(), params,
-                            maybeSpec.getSpec().getSpecUrl(), result.getValidationResult());
-                    //TODO - tagchowder doesn't seem to maintain duplicate attributes.
-                    //encounteredTag.dedupeAttrs();
-                } else {
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.INLINE_STYLE_TOO_LONG,
-                            context.getLineCol(), params,
-                            maybeSpec.getSpec().getSpecUrl(), result.getValidationResult());
-                }
-            }
-
-            // Loop over the declarations found in the document, verify that they are
-            // in the allowed list for this DocCssSpec, and have allowed values if
-            // relevant.
-            for (final Declaration declaration : declarations) {
-                // Allowed declarations vary by context. SVG has its own set of CSS
-                // declarations not supported generally in HTML.
-                ValidatorProtos.CssDeclaration cssDeclaration = maybeSpec.getCssDeclarationByName(declaration.getName());
-                if (parsedAttrSpec.getSpec().getValueDocCss()) {
-                    cssDeclaration = maybeSpec.getCssDeclarationSvgByName(declaration.getName());
-                }
-                // If there is no matching declaration in the rules, then this declaration
-                // is not allowed.
-                if (cssDeclaration == null) {
-                    List<String> params = new ArrayList<>();
-                    params.add(declaration.getName());
-                    params.add(attrName);
-                    params.add(TagSpecUtils.getTagSpecName(tagSpec));
-
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.DISALLOWED_PROPERTY_IN_ATTR_VALUE,
-                            context.getLineCol().getLineNumber() + declaration.getLine(),
-                            context.getLineCol().getColumnNumber() + declaration.getCol(),
-                            params,
-                            "",
-                            result.getValidationResult());
-                    // Don't emit additional errors for this declaration.
-                    continue;
-                } else if (cssDeclaration.getValueCaseiList().size() > 0) {
-                    boolean hasValidValue = false;
-                    final String firstIdent = declaration.firstIdent();
-                    for (final String value : cssDeclaration.getValueCaseiList()) {
-                        if (firstIdent.toLowerCase().equals(value)) {
-                            hasValidValue = true;
-                            break;
-                        }
-                    }
-                    if (!hasValidValue) {
-                        // Declaration value not allowed.
-                        List<String> params = new ArrayList<>();
-                        params.add(TagSpecUtils.getTagSpecName(tagSpec));
-                        params.add(declaration.getName());
-                        params.add(firstIdent);
-
-                        context.addError(
-                                ValidatorProtos.ValidationError.Code
-                                        .CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
-                                context.getLineCol(),
-                                params,
-                                context.getRules().getStylesSpecUrl(), result.getValidationResult());
-                    }
-                }
-                if (!maybeSpec.getSpec().getAllowImportant()) {
-                    if (declaration.getImportant()) {
-                        // TODO(gregable): Use a more specific error message for
-                        // `!important` errors.
-                        List<String> params = new ArrayList<>();
-                        params.add(attrName);
-                        params.add(TagSpecUtils.getTagSpecName(tagSpec));
-                        params.add("CSS !important");
-
-                        context.addError(
-                                ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE,
-                                context.getLineCol(),
-                                params,
-                                context.getRules().getStylesSpecUrl(), result.getValidationResult());
-                    }
-                }
-
-                final List<ErrorToken> urlErrors = new ArrayList<>();
-                final List<ParsedCssUrl> parsedUrls = new ArrayList<>();
-                extractUrlsFromDeclaration(declaration, parsedUrls, urlErrors);
-                for (final ErrorToken errorToken : urlErrors) {
-                    // Override the first parameter with the name of the tag.
-                    List<String> params = errorToken.getParams();
-                    params.set(0, TagSpecUtils.getTagSpecName(tagSpec));
-
-                    context.addError(
-                            errorToken.getCode(), context.getLineCol(), params, "",
-                            result.getValidationResult());
-                }
-                if (urlErrors.size() > 0) {
-                    continue;
-                }
-                for (final ParsedCssUrl url : parsedUrls) {
-                    // Validate that the URL itself matches the spec.
-                    // Only image specs apply to inline styles. Fonts are only defined in
-                    // @font-face rules which we require a full stylesheet to define.
-                    if (maybeSpec.getSpec().hasImageUrlSpec()) {
-                        final UrlErrorInStylesheetAdapter adapter = new UrlErrorInStylesheetAdapter(
-                                context.getLineCol().getLineNumber(), context.getLineCol().getColumnNumber());
-                        AttributeSpecUtils.validateUrlAndProtocol(
-                                maybeSpec.getImageUrlSpec(), adapter, context, url.getUtf8Url(), tagSpec,
-                                result.getValidationResult());
-                    }
-                    // Subtract off URL lengths from doc-level inline style bytes, if
-                    // specified by the DocCssSpec.
-                    if (!maybeSpec.getSpec().getUrlBytesIncluded() && !UrlUtils.isDataUrl(url.getUtf8Url())) {
-                        result.setInlineStyleCssBytes(result.getInlineStyleCssBytes() - ByteUtils.byteLength(url.getUtf8Url()));
-                    }
-                }
-            }
-        }
-    }
-
-    /**
-     * Max number of allowed declarations.
-     */
-    private static final int MAX_NUM_ALLOWED_DECLARATIONS = 5;
-
-    /**
-     * Enum describing how to parse the rules inside a CSS AT Rule.
-     */
-    public enum BlockType {
-        /**
-         * Parse this simple block as a list of rules (Either Qualified Rules or AT Rules)
-         */
-        PARSE_AS_RULES,
-        /**
-         * Parse this simple block as a list of declarations
-         */
-        PARSE_AS_DECLARATIONS,
-        /**
-         * Ignore this simple block, do not parse. This is generally used
-         * in conjunction with a later step emitting an error for this rule.
-         */
-        PARSE_AS_IGNORE,
-    }
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/utils/DispatchKeyUtils.java b/validator/java/src/main/java/dev/amp/validator/utils/DispatchKeyUtils.java
deleted file mode 100644
index f42fe22699988..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/utils/DispatchKeyUtils.java
+++ /dev/null
@@ -1,112 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.utils;
-
-import dev.amp.validator.ValidatorProtos;
-
-import javax.annotation.Nonnull;
-
-/**
- * Dispatch key utility methods.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public final class DispatchKeyUtils {
-    /**
-     * Private constructor.
-     */
-    private DispatchKeyUtils() {
-    }
-
-    /**
-     *  DispatchKey represents a tuple of either 1-3 strings:
-     *    - attribute name
-     *    - attribute value (optional)
-     *    - mandatory parent html tag (optional)
-     *  A Dispatch key can be generated from some validator TagSpecs. One dispatch
-     *  key per attribute can be generated from any HTML tag. If one of the
-     *  dispatch keys for an HTML tag match that of a a TagSpec, we validate that
-     *  HTML tag against only this one TagSpec. Otherwise, this TagSpec is not
-     *  eligible for validation against this HTML tag.
-     * @param dispatchKeyType a DispatchKeyType.
-     * @param attrName attribute name.
-     * @param attrValue attribute value.
-     * @param mandatoryParent may be set to "$NOPARENT"
-     * @return returns dispatch key.
-     */
-    public static String makeDispatchKey(
-            @Nonnull final ValidatorProtos.AttrSpec.DispatchKeyType dispatchKeyType,
-            @Nonnull final String attrName, @Nonnull final String attrValue,
-            @Nonnull final String mandatoryParent) {
-        switch (dispatchKeyType) {
-            case NAME_DISPATCH:
-                return attrName;
-            case NAME_VALUE_DISPATCH:
-                return attrName + "\0" + attrValue;
-            case NAME_VALUE_PARENT_DISPATCH:
-                return attrName + "\0" + attrValue + "\0" + (mandatoryParent != null ? "true" : "");
-            case NONE_DISPATCH:
-            default:
-                assert false;
-        }
-        return ""; // To make closure happy.
-    }
-
-    /**
-     * For a provided tag spec, generates its dispatch key.
-     * @param tagSpec a tag spec.
-     * @return a dispatch key.
-     */
-    public static String getDispatchKeyForTagSpecOrNone(@Nonnull final ValidatorProtos.TagSpec tagSpec)  {
-        for (ValidatorProtos.AttrSpec attr : tagSpec.getAttrsList()) {
-            if (attr.getDispatchKey() != ValidatorProtos.AttrSpec.DispatchKeyType.NONE_DISPATCH) {
-                final boolean mandatoryParent = tagSpec.hasMandatoryParent();
-                if (attr.getDispatchKey() == ValidatorProtos.AttrSpec.DispatchKeyType.NAME_DISPATCH) {
-                    return attr.getName();
-                }
-
-                String attrValue = null;
-                if (attr.getValueCaseiList() != null && attr.getValueCaseiList().size() > 0) {
-                    attrValue = attr.getValueCasei(0);
-                } else if (attr.getValueList() != null && attr.getValueList().size() > 0) {
-                    attrValue = attr.getValue(0).toLowerCase();
-                }
-
-                if (attrValue == null) {
-                    return null;
-                }
-
-                if (attr.getDispatchKey() == ValidatorProtos.AttrSpec.DispatchKeyType.NAME_VALUE_DISPATCH) {
-                    return attr.getName() + "\0" + attrValue;
-                }
-
-                if (attr.getDispatchKey() == ValidatorProtos.AttrSpec.DispatchKeyType.NAME_VALUE_PARENT_DISPATCH) {
-                    return attr.getName() + "\0" + attrValue + "\0" + (mandatoryParent ? mandatoryParent : "");
-                }
-            }
-        }
-
-        return null;
-    }
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/utils/ExtensionsUtils.java b/validator/java/src/main/java/dev/amp/validator/utils/ExtensionsUtils.java
deleted file mode 100644
index 60bda4ee990c0..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/utils/ExtensionsUtils.java
+++ /dev/null
@@ -1,153 +0,0 @@
-package dev.amp.validator.utils;
-
-import dev.amp.validator.Context;
-import dev.amp.validator.ParsedHtmlTag;
-import dev.amp.validator.ValidatorProtos;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-import static dev.amp.validator.utils.ExtensionsUtils.ScriptReleaseVersion.LTS;
-import static dev.amp.validator.utils.ExtensionsUtils.ScriptReleaseVersion.UNKNOWN;
-
-/**
- * Utils to handle extension validation
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public final class ExtensionsUtils {
-  /**
-   * Private constructor.
-   */
-  private ExtensionsUtils() {
-  }
-
-  // If any script in the page uses LTS, all scripts must use LTS. This is used to
-  // record when a script is seen and validate following script tags.
-  public enum ScriptReleaseVersion {
-    /**
-     * UNKNOWN
-     */
-    UNKNOWN,
-    /**
-     * STANDARD
-     */
-    STANDARD,
-    /**
-     * LTS
-     */
-    LTS,
-  }
-
-  /**
-   * Tests if a tag is an extension script tag.
-   *
-   * @param tag to test
-   * @return true iff a tag is an extension script tag
-   */
-  public static boolean isExtensionScript(final ParsedHtmlTag tag) {
-    // checks for a falsy value of ExtensionScriptNameAttribute,
-    // falsy means null or empty string
-    return !extensionScriptNameAttribute(tag).equals("");
-  }
-
-  /**
-   * Tests if a tag is the AMP runtime script tag.
-   *
-   * @param tag to test
-   * @return true iff a tag is the AMP runtime script tag.
-   */
-  public static boolean isAmpRuntimeScript(final ParsedHtmlTag tag) {
-    final String src = (tag.attrsByKey().get("src") != null) ? tag.attrsByKey().get("src") : "";
-    return isAsyncScriptTag(tag) && !isExtensionScript(tag)
-      && src.startsWith("https://cdn.ampproject.org/") && src.endsWith("/v0.js");
-  }
-
-  /**
-   * Tests if a tag is an async script tag.
-   *
-   * @param tag to test
-   * @return true iff a tag is an async script tag.
-   */
-  public static boolean isAsyncScriptTag(final ParsedHtmlTag tag) {
-    return tag.upperName().equals("SCRIPT") && tag.attrsByKey().
-      containsKey("async") && tag.attrsByKey().containsKey("src");
-  }
-
-  /**
-   * Tests if a URL is for the LTS version of a script.
-   *
-   * @param url to test
-   * @return true iff a URL is for the LTS version of a script.
-   */
-  public static boolean isLtsScriptUrl(@Nonnull final String url) {
-    return url.startsWith("https://cdn.ampproject.org/lts/");
-  }
-
-  /**
-   * Gets the name attribute for an extension script tag.
-   *
-   * @param tag to extract name attribute from
-   * @return name attribute for an extension script tag
-   */
-  public static String extensionScriptNameAttribute(@Nonnull final ParsedHtmlTag tag) {
-    if (tag.upperName().equals("SCRIPT")) {
-      final String[] myStringArray = new String[]{"custom-element", "custom-template", "host-service"};
-      for (final String attribute : myStringArray) {
-        if (tag.attrsByKey().containsKey(attribute)) {
-          return attribute;
-        }
-      }
-    }
-    return "";
-  }
-
-  /**
-   * Gets the extension name for an extension script tag.
-   *
-   * @param tag to get extension name from
-   * @return extension name for an extension script tag
-   */
-  public static String extensionScriptName(final ParsedHtmlTag tag) {
-    final String nameAttr = extensionScriptNameAttribute(tag);
-    if (nameAttr != null) {
-      // Extension script names are required to be in lowercase by the validator,
-      // so we don't need to lowercase them here.
-      return (tag.attrsByKey().get(nameAttr) != null) ? tag.attrsByKey().get(nameAttr) : "";
-    }
-    return "";
-  }
-
-  /**
-   * Validates that LTS is used for either all script sources or none.
-   *
-   * @param srcAttr the attr to check
-   * @param tagSpec the spec to check against
-   * @param context global context
-   * @param result  record to update
-   */
-  public static void validateScriptSrcAttr(@Nonnull final String srcAttr, @Nonnull final ValidatorProtos.TagSpec tagSpec,
-                                           @Nonnull final Context context, @Nonnull final ValidatorProtos.ValidationResult.Builder result) {
-    if (context.getScriptReleaseVersion() == UNKNOWN) {
-      return;
-    }
-    final ExtensionsUtils.ScriptReleaseVersion scriptReleaseVersion = isLtsScriptUrl(srcAttr) ? LTS
-      : ExtensionsUtils.ScriptReleaseVersion.STANDARD;
-    if (context.getScriptReleaseVersion() != scriptReleaseVersion) {
-      List<String> params = new ArrayList<>();
-      final String specName = (tagSpec.hasExtensionSpec())
-        ? tagSpec.getExtensionSpec().getName() : tagSpec.getSpecName();
-      params.add(specName);
-      context.addError(
-        scriptReleaseVersion == LTS
-          ? ValidatorProtos.ValidationError.Code.LTS_SCRIPT_AFTER_NON_LTS
-          : ValidatorProtos.ValidationError.Code.NON_LTS_SCRIPT_AFTER_LTS,
-        context.getLineCol(), params,
-        "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup",
-        result);
-    }
-  }
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/utils/ParseSrcSetUtils.java b/validator/java/src/main/java/dev/amp/validator/utils/ParseSrcSetUtils.java
deleted file mode 100644
index d2a2892655e56..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/utils/ParseSrcSetUtils.java
+++ /dev/null
@@ -1,130 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.utils;
-
-import dev.amp.validator.ValidatorProtos;
-import dev.amp.validator.SrcsetParsingResult;
-import dev.amp.validator.SrcsetSourceDef;
-
-import javax.annotation.Nonnull;
-import java.util.HashSet;
-import java.util.Set;
-import java.util.regex.Matcher;
-import java.util.regex.Pattern;
-
-/**
- * Utility class to parse the text representation of srcset.
- * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes.
- * See http://www.w3.org/html/wg/drafts/html/master/semantics.html#attr-img-srcset.
- *
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public final class ParseSrcSetUtils {
-    /**
-     * Private constructor.
-     */
-    private ParseSrcSetUtils() {
-    }
-
-    /**
-     * Parses the text representation of srcset into array of SrcsetSourceDef.
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes.
-     * See http://www.w3.org/html/wg/drafts/html/master/semantics.html#attr-img-srcset.
-     *
-     * If parsing fails, returns false in SrcsetParsingResult.status.
-     *
-     * @param srcset the srcset.
-     * @return returns SrcsetParsingResult.
-     */
-    public static SrcsetParsingResult parseSrcset(@Nonnull final String srcset) {
-        // Regex for leading spaces, followed by an optional comma and whitespace,
-        // followed by an URL*, followed by an optional space, followed by an
-        // optional width or pixel density**, followed by spaces, followed by an
-        // optional comma and whitespace.
-        //
-        // URL*: matches non-space, non-empty string which neither ends nor begins
-        // with a comma. The set of space characters in the srcset attribute is
-        // defined to include only ascii characters, so using \s, which is an
-        // ascii only character set, is fine. See
-        // https://html.spec.whatwg.org/multipage/infrastructure.html#space-character.
-        //
-        // Optional width or pixel density**: Matches the empty string or (one or
-        // more spaces + a non empty string containing no space or commas).
-        // Doesn't capture the initial space.
-        //
-        // \s*                       Match, but don't capture leading spaces
-        // (?:,\s*)?                 Optionally match comma and trailing space,
-        //                           but don't capture comma.
-        // ([^,\s]\S*[^,\s])         Match something like "google.com/favicon.ico"
-        //                           but not ",google.com/favicon.ico,"
-        // \s*                       Match, but dont capture spaces.
-        // ([\d]+.?[\d]*[w|x])?      e.g. "5w" or "5x" or "10.2x"
-        // \s*                       Match, but don't capture space
-        // (?:(,)\s*)?               Optionally match comma and trailing space,
-        //                           capturing comma.
-
-        String remainingSrcset = srcset;
-        final Set<String> seenWidthOrPixelDensity = new HashSet<>();
-        final SrcsetParsingResult result = new SrcsetParsingResult();
-        final Matcher matcher = IMAGE_CANDIDATE_REGEX.matcher(srcset);
-        while (matcher.find()) {
-            final String url = matcher.group(1);
-            String widthOrPixelDensity = matcher.group(2);
-            final String comma = matcher.group(3);
-            if (widthOrPixelDensity == null) {
-                widthOrPixelDensity = "1x";
-            }
-            // Duplicate width or pixel density in srcset.
-            if (seenWidthOrPixelDensity.contains(widthOrPixelDensity)) {
-                result.setErrorCode(ValidatorProtos.ValidationError.Code.DUPLICATE_DIMENSION);
-                return result;
-            }
-            seenWidthOrPixelDensity.add(widthOrPixelDensity);
-            result.add(new SrcsetSourceDef(url, widthOrPixelDensity));
-
-            // More srcset, comma expected as separator for image candidates.
-            if (comma == null) {
-                result.setErrorCode(ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE);
-                return result;
-            }
-        }
-
-        // Must have at least one image candidate.
-        if (result.getSrcsetImagesSize() == 0) {
-            result.setErrorCode(ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE);
-            return result;
-        }
-        result.setSuccess(true);
-        return result;
-    }
-
-    private static final Pattern IMAGE_CANDIDATE_REGEX = Pattern.compile("\\s*"
-                    + "(?:,\\s*)?"
-                    + "([^,\\s]\\S*[^,\\s])"
-                    + "\\s*"
-                    + "([\\d]+.?[\\d]*[w|x])?"
-                    + "\\s*"
-                    + "(?:(,)\\s*)?");
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/utils/TagSpecUtils.java b/validator/java/src/main/java/dev/amp/validator/utils/TagSpecUtils.java
deleted file mode 100644
index daed7bd3d4755..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/utils/TagSpecUtils.java
+++ /dev/null
@@ -1,892 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.utils;
-
-import dev.amp.validator.ValidatorProtos;
-import dev.amp.validator.RecordValidated;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.Context;
-import dev.amp.validator.CssLength;
-import dev.amp.validator.DescendantConstraints;
-import dev.amp.validator.ExtensionsContext;
-import dev.amp.validator.ParsedHtmlTag;
-import dev.amp.validator.ParsedTagSpec;
-import dev.amp.validator.TagSpecDispatch;
-import dev.amp.validator.TagStack;
-import dev.amp.validator.ValidateTagResult;
-import dev.amp.validator.exception.TagValidationException;
-import dev.amp.validator.exception.ValidatorException;
-
-import javax.annotation.Nonnull;
-import java.io.IOException;
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.HashMap;
-import java.util.HashSet;
-import java.util.List;
-import java.util.Map;
-import java.util.Set;
-
-/**
- * Tag spec utility methods.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public final class TagSpecUtils {
-    /**
-     * Private constructor.
-     */
-    private TagSpecUtils() {
-    }
-
-    /**
-     * For creating error URLs, we either find the specUrl in the tag spec or fall
-     * back to the extension spec URL if available.
-     *
-     * @param tagSpec TagSpec instance from the validator.protoscii file.
-     * @return returns the tag spec URL.
-     */
-    public static String getTagSpecUrl(@Nonnull final ValidatorProtos.TagSpec tagSpec) {
-        // Handle a ParsedTagSpec as well as a tag spec.
-        // TODO(gregable): This is a bit hacky, we should improve on this approach
-        // in the future.
-        if (tagSpec.hasSpecUrl()) {
-            return tagSpec.getSpecUrl();
-        }
-
-        final String extensionSpecUrlPrefix = "https://amp.dev/documentation/components/";
-        if (tagSpec.hasExtensionSpec() && tagSpec.getExtensionSpec().getName() != null) {
-            return extensionSpecUrlPrefix + tagSpec.getExtensionSpec().getName();
-        }
-
-        if (tagSpec.getRequiresExtensionCount() > 0) {
-            // Return the first |requires_extension|, which should be the most
-            // representitive.
-            return extensionSpecUrlPrefix + tagSpec.getRequiresExtension(0);
-        }
-
-        return "";
-    }
-
-    /**
-     * For creating error messages, we either find the specName in the tag spec or
-     * fall back to the tagName.
-     *
-     * @param tagSpec TagSpec instance from the validator.protoscii file.
-     * @return return the tag spec name.
-     */
-    public static String getTagSpecName(@Nonnull final ValidatorProtos.TagSpec tagSpec) {
-        return (tagSpec.hasSpecName()) ? tagSpec.getSpecName() : tagSpec.getTagName().toLowerCase();
-    }
-
-    /**
-     * We only track (that is, add them to Context.RecordTagspecValidated) validated
-     * tagspecs as necessary. That is, if it's needed for document scope validation:
-     * - Mandatory tags
-     * - Unique tags
-     * - Tags (identified by their TagSpecName() that are required by other tags.
-     * @param tag the TagSpec.
-     * @param tagSpecId the tag spec id.
-     * @param tagSpecIdsToTrack a map of tag spec id to boolean.
-     * @return returns a record validated enum value.
-     */
-    public static RecordValidated shouldRecordTagspecValidated(@Nonnull final ValidatorProtos.TagSpec tag, final int tagSpecId,
-                                                               @Nonnull final Map<Object, Boolean> tagSpecIdsToTrack) {
-        // Always update from TagSpec if the tag is passing. If it's failing we
-        // typically want to update from the best match as it can satisfy
-        // requirements which otherwise can confuse the user later. The exception is
-        // tagspecs which introduce requirements but satisfy none, such as unique.
-        // https://github.com/ampproject/amphtml/issues/24359
-
-        // Mandatory and tagSpecIdsToTrack only satisfy requirements, making the
-        // output less verbose even if the tag is failing.
-        if (tag.hasMandatory() || tagSpecIdsToTrack.containsKey(tagSpecId)) {
-            return RecordValidated.ALWAYS;
-        }
-        // Unique and similar can introduce requirements, ie: there cannot be another
-        // such tag. We don't want to introduce requirements for failing tags.
-        if (tag.hasUnique() || tag.getRequiresList().size() > 0 || tag.hasUniqueWarning()) {
-            return RecordValidated.IF_PASSING;
-        }
-        return RecordValidated.NEVER;
-    }
-
-    /**
-     * Validates the provided |tagName| with respect to the tag
-     * specifications in the validator's rules, returning a ValidationResult
-     * with errors for this tag and a PASS or FAIL status. At least one
-     * specification must validate, or the result will have status FAIL.
-     * Also passes back a reference to the tag spec which matched, if a match
-     * was found.
-     *
-     * @param context the context
-     * @param encounteredTag the encountered tag
-     * @param bestMatchReferencePoint the best match reference point
-     * @return returns ValidateTagResult.
-     * @throws TagValidationException tag validation exception.
-     * @throws ValidatorException tag validation exception.
-     * @throws IOException the IOException.
-     * @throws CssValidationException Css Validation Exception.
-     */
-    public static ValidateTagResult validateTag(@Nonnull final Context context,
-                                                @Nonnull final ParsedHtmlTag encounteredTag,
-                                                final ParsedTagSpec bestMatchReferencePoint)
-            throws TagValidationException, ValidatorException, IOException, CssValidationException {
-        final TagSpecDispatch tagSpecDispatch =
-                context.getRules().dispatchForTagName(encounteredTag.upperName());
-        // Filter TagSpecDispatch.AllTagSpecs by type identifiers.
-        List<ParsedTagSpec> filteredTagSpecs = new ArrayList<>();
-        if (tagSpecDispatch != null) {
-            for (Integer tagSpecId : tagSpecDispatch.allTagSpecs()) {
-                final ParsedTagSpec parsedTagSpec = context.getRules().getByTagSpecId(tagSpecId);
-                // Keep TagSpecs that are used for these type identifiers.
-                if (parsedTagSpec.isUsedForTypeIdentifiers(
-                        context.getTypeIdentifiers())) {
-                    filteredTagSpecs.add(parsedTagSpec);
-                }
-            }
-        }
-        // If there are no dispatch keys matching the tag name, ex: tag name is
-        // "foo", set a disallowed tag error.
-        if (tagSpecDispatch == null
-                || (!tagSpecDispatch.hasDispatchKeys() && filteredTagSpecs.size() == 0)) {
-            ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-            String specUrl = "";
-            // Special case the spec_url for font tags to be slightly more useful.
-            if (encounteredTag.upperName().equals("FONT")) {
-                specUrl = context.getRules().getStylesSpecUrl();
-            }
-            final List<String> params = new ArrayList<>();
-            params.add(encounteredTag.lowerName());
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.DISALLOWED_TAG,
-                    context.getLineCol(),
-                    params,
-                    specUrl,
-                    result);
-
-            return new ValidateTagResult(result, null);
-        }
-
-        // At this point, we have dispatch keys, tagspecs, or both.
-        // The strategy is to look for a matching dispatch key first. A matching
-        // dispatch key does not guarantee that the dispatched tagspec will also
-        // match. If we find a matching dispatch key, we immediately return the
-        // result for that tagspec, success or fail.
-        // If we don't find a matching dispatch key, we must try all of the
-        // tagspecs to see if any of them match. If there are no tagspecs, we want
-        // to return a GENERAL_DISALLOWED_TAG error.
-        // calling HasDispatchKeys here is only an optimization to skip the loop
-        // over encountered attributes in the case where we have no dispatches.
-        if (tagSpecDispatch.hasDispatchKeys()) {
-            for (int i = 0; i < encounteredTag.attrs().getLength(); i++) {
-                final String name = encounteredTag.attrs().getLocalName(i);
-                final String value = encounteredTag.attrs().getValue(i);
-                List<Integer> tagSpecIds = tagSpecDispatch.matchingDispatchKey(
-                        name,
-                        // Attribute values are case-sensitive by default, but we
-                        // match dispatch keys in a case-insensitive manner and then
-                        // validate using whatever the tagspec requests.
-                        value.toLowerCase(), context.getTagStack().parentTagName());
-                ValidatorProtos.ValidationResult.Builder validationResult = ValidatorProtos.ValidationResult.newBuilder();
-                ValidateTagResult ret = new ValidateTagResult(validationResult, null);
-                validationResult.setStatus(ValidatorProtos.ValidationResult.Status.UNKNOWN);
-                for (Integer tagSpecId : tagSpecIds) {
-                    final ParsedTagSpec parsedTagSpec = context.getRules().getByTagSpecId(tagSpecId);
-                    // Skip TagSpecs that aren't used for these type identifiers.
-                    if (!parsedTagSpec.isUsedForTypeIdentifiers(
-                            context.getTypeIdentifiers())) {
-                        continue;
-                    }
-                    final ValidateTagResult resultForAttempt = TagSpecUtils.validateTagAgainstSpec(
-                            parsedTagSpec, bestMatchReferencePoint, context, encounteredTag);
-                    if (context.getRules().betterValidationResultThan(
-                            resultForAttempt.getValidationResult(), ret.getValidationResult())) {
-                        ret.setBestMatchTagSpec(parsedTagSpec);
-                        ret.setValidationResult(resultForAttempt.getValidationResult());
-                        // TODO (GeorgeLuo) : this copy operation is unnecessary, should refactor to instantiate ret with
-                        //  return for resultForAttempt in the first place (5/3/2020)
-                        ret.setInlineStyleCssBytes(resultForAttempt.getInlineStyleCssBytes());
-                        // Exit early on success
-                        if (ret.getValidationResult().getStatus() == ValidatorProtos.ValidationResult.Status.PASS) {
-                            return ret;
-                        }
-                    }
-                }
-
-                if (ret.getValidationResult().getStatus() != ValidatorProtos.ValidationResult.Status.UNKNOWN) {
-                    return ret;
-                }
-            }
-        }
-        // None of the dispatch tagspecs matched and passed. If there are no
-        // non-dispatch tagspecs, consider this a 'generally' disallowed tag,
-        // which gives an error that reads "tag foo is disallowed except in
-        // specific forms".
-        if (filteredTagSpecs.size() == 0) {
-            final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-            if (encounteredTag.upperName().equals("SCRIPT")) {
-                // Special case for <script> tags to produce better error messages.
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.DISALLOWED_SCRIPT_TAG,
-                        context.getLineCol(),
-                        new ArrayList<>(),
-                        context.getRules().getScriptSpecUrl(),
-                        result);
-            } else {
-                final List<String> params = new ArrayList<>();
-                params.add(encounteredTag.lowerName());
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.GENERAL_DISALLOWED_TAG,
-                        context.getLineCol(),
-                        params,
-                        /* specUrl */ "",
-                        result);
-            }
-            return new ValidateTagResult(result, null);
-        }
-        // Validate against all remaining tagspecs. Each tagspec will produce a
-        // different set of errors. Even if none of them match, we only want to
-        // return errors from a single tagspec, not all of them. We keep around
-        // the 'best' attempt until we have found a matching TagSpec or have
-        // tried them all.
-        ValidatorProtos.ValidationResult.Builder resultForBestAttempt = ValidatorProtos.ValidationResult.newBuilder();
-        resultForBestAttempt.setStatus(ValidatorProtos.ValidationResult.Status.UNKNOWN);
-        ParsedTagSpec bestMatchTagSpec = null;
-        for (final ParsedTagSpec parsedTagSpec : filteredTagSpecs) {
-          // TODO (GeorgeLuo) : refactor here to handle InlineStyleCssBytes
-          //  changes (5/3/2020)
-          final ValidateTagResult resultForAttempt = TagSpecUtils.validateTagAgainstSpec(
-                    parsedTagSpec, bestMatchReferencePoint, context, encounteredTag);
-            if (context.getRules().betterValidationResultThan(resultForAttempt.getValidationResult(), resultForBestAttempt)) {
-                resultForBestAttempt = resultForAttempt.getValidationResult();
-                bestMatchTagSpec = parsedTagSpec;
-                // Exit early
-                if (resultForBestAttempt.getStatus() == ValidatorProtos.ValidationResult.Status.PASS) {
-                    return new ValidateTagResult(resultForBestAttempt, bestMatchTagSpec);
-                }
-            }
-        }
-        return new ValidateTagResult(resultForBestAttempt, bestMatchTagSpec);
-    }
-
-
-    /**
-     * Validates the provided |tagName| with respect to a single tag
-     * specification.
-     * @param parsedTagSpec parsed tag spec.
-     * @param bestMatchReferencePoint best match reference point.
-     * @param context the context object.
-     * @param encounteredTag the encountered tag.
-     * @throws TagValidationException the TagValidationException.
-     * @throws IOException IO Exception
-     * @throws CssValidationException Css validation exception.
-     * @return returns the validation result.
-     */
-    public static ValidateTagResult validateTagAgainstSpec(
-            @Nonnull final ParsedTagSpec parsedTagSpec,
-            final ParsedTagSpec bestMatchReferencePoint,
-            @Nonnull final Context context,
-            @Nonnull final ParsedHtmlTag encounteredTag)
-            throws TagValidationException, IOException, CssValidationException {
-        final ValidatorProtos.ValidationResult.Builder resultForAttempt = ValidatorProtos.ValidationResult.newBuilder();
-        ValidateTagResult wrapperResult =
-            new ValidateTagResult(resultForAttempt, null);
-
-        resultForAttempt.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-        validateParentTag(parsedTagSpec, context, resultForAttempt);
-        validateAncestorTags(parsedTagSpec, context, resultForAttempt);
-        // Some parent tag specs also define allowed child tag names for the first
-        // child or all children. Validate that we aren't violating any of those
-        // rules either.
-        context.getTagStack().matchChildTagName(
-                encounteredTag, context, resultForAttempt);
-
-      // Only validate attributes if we haven't yet found any errors. The
-        // Parent/Ancestor errors are informative without adding additional errors
-        // about attributes.
-        if (resultForAttempt.getStatus() == ValidatorProtos.ValidationResult.Status.PASS) {
-            AttributeSpecUtils.validateAttributes(
-                    parsedTagSpec, bestMatchReferencePoint, context, encounteredTag,
-              wrapperResult);
-        }
-
-        // Only validate that this is a valid descendant if it's not already invalid.
-        if (resultForAttempt.getStatus() == ValidatorProtos.ValidationResult.Status.PASS) {
-            validateDescendantTags(
-                    encounteredTag, parsedTagSpec, context, resultForAttempt);
-        }
-
-        validateNoSiblingsAllowedTags(parsedTagSpec, context, resultForAttempt);
-        validateLastChildTags(context, resultForAttempt);
-
-        // If we haven't reached the body element yet, we may not have seen the
-        // necessary extension. That case is handled elsewhere.
-        if (context.getTagStack().hasAncestor("BODY")) {
-            validateRequiredExtensions(parsedTagSpec, context, resultForAttempt);
-        }
-
-        // Only validate uniqueness if we haven't yet found any errors, as it's
-        // likely that this is not the correct tagspec if we have.
-        if (resultForAttempt.getStatus() == ValidatorProtos.ValidationResult.Status.PASS) {
-            validateUniqueness(parsedTagSpec, context, resultForAttempt);
-        }
-
-        // Append some warnings, only if no errors.
-        if (resultForAttempt.getStatus() == ValidatorProtos.ValidationResult.Status.PASS) {
-            final ValidatorProtos.TagSpec tagSpec = parsedTagSpec.getSpec();
-            List<String> params = new ArrayList<>();
-            if (tagSpec.hasDeprecation()) {
-                params.add(TagSpecUtils.getTagSpecName(tagSpec));
-                params.add(tagSpec.getDeprecation());
-                context.addWarning(
-                        ValidatorProtos.ValidationError.Code.DEPRECATED_TAG,
-                        context.getLineCol(),
-                        params,
-                        tagSpec.getDeprecationUrl(),
-                        resultForAttempt);
-            }
-            if (tagSpec.hasUniqueWarning()
-                   && context.hasTagspecsValidated(parsedTagSpec.getId())) {
-                params.clear();
-                params.add(TagSpecUtils.getTagSpecName(tagSpec));
-                context.addWarning(
-                        ValidatorProtos.ValidationError.Code.DUPLICATE_UNIQUE_TAG_WARNING,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(tagSpec),
-                        resultForAttempt);
-            }
-        }
-        return wrapperResult;
-    }
-
-    /**
-     * Validates whether the parent tag satisfied the spec (e.g., some
-     * tags can only appear in head).
-     * @param parsedTagSpec the parsed tag spec.
-     * @param context the Context object.
-     * @param validationResult validation result.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public static void validateParentTag(@Nonnull final ParsedTagSpec parsedTagSpec,
-                                         @Nonnull final Context context,
-                                         @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult)
-                    throws TagValidationException {
-        final ValidatorProtos.TagSpec spec = parsedTagSpec.getSpec();
-        if (spec.hasMandatoryParent()
-                && !spec.getMandatoryParent().equals(context.getTagStack().parentTagName())) {
-            // Output a parent/child error using CSS Child Selector syntax which is
-            // both succinct and should be well understood by web developers.
-            List<String> params = new ArrayList<>();
-            params.add(getTagSpecName(spec));
-            params.add(context.getTagStack().parentTagName().toLowerCase());
-            params.add(spec.getMandatoryParent().toLowerCase());
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.WRONG_PARENT_TAG,
-                    context.getLineCol(),
-                    params,
-                    getTagSpecUrl(spec),
-                    validationResult);
-        }
-    }
-
-    /**
-     * Validates if the tag ancestors satisfied the spec.
-     * @param parsedTagSpec the parsed tag spec.
-     * @param context the context.
-     * @param validationResult validation result.
-     */
-    public static void validateAncestorTags(@Nonnull final ParsedTagSpec parsedTagSpec,
-                                            @Nonnull final Context context,
-                                            @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) {
-        final ValidatorProtos.TagSpec spec = parsedTagSpec.getSpec();
-        if (spec.hasMandatoryAncestor()) {
-            final String mandatoryAncestor = /** @type {string} */ spec.getMandatoryAncestor();
-            if (!context.getTagStack().hasAncestor(mandatoryAncestor)) {
-                if (spec.hasMandatoryAncestorSuggestedAlternative()) {
-                    final List<String> params = new ArrayList<>();
-                    params.add(getTagSpecName(spec));
-                    params.add(mandatoryAncestor.toLowerCase());
-                    params.add(spec.getMandatoryAncestorSuggestedAlternative().toLowerCase());
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.MANDATORY_TAG_ANCESTOR_WITH_HINT,
-                            context.getLineCol(),
-                            params,
-                            getTagSpecUrl(spec),
-                            validationResult);
-                } else {
-                    final List<String> params = new ArrayList<>();
-                    params.add(getTagSpecName(spec));
-                    params.add(mandatoryAncestor.toLowerCase());
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.MANDATORY_TAG_ANCESTOR,
-                            context.getLineCol(),
-                            params,
-                            getTagSpecUrl(spec),
-                            validationResult);
-                }
-                return;
-            }
-        }
-        for (String disallowedAncestor : spec.getDisallowedAncestorList()) {
-            if (context.getTagStack().hasAncestor(disallowedAncestor)) {
-                final List<String> params = new ArrayList<>();
-                params.add(getTagSpecName(spec));
-                params.add(disallowedAncestor.toLowerCase());
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.DISALLOWED_TAG_ANCESTOR,
-                        context.getLineCol(),
-                        params,
-                        getTagSpecUrl(spec),
-                        validationResult);
-                return;
-            }
-        }
-    }
-
-    /**
-     * @param layout layout.
-     * @return amp.validator.AmpLayout.Layout.
-     */
-    public static ValidatorProtos.AmpLayout.Layout parseLayout(final String layout) {
-        if (layout == null) {
-            return ValidatorProtos.AmpLayout.Layout.UNKNOWN;
-        }
-
-        final String normLayout = layout.toUpperCase().replace('-', '_');
-        if (ValidatorProtos.AmpLayout.Layout.getDescriptor().findValueByName(normLayout) == null) {
-            return ValidatorProtos.AmpLayout.Layout.UNKNOWN;
-        }
-        return ValidatorProtos.AmpLayout.Layout.valueOf(normLayout);
-    }
-
-    /**
-     * Calculates the effective height from input layout and input height.
-     *
-     * @param spec the amp layout spec.
-     * @param inputLayout input layout.
-     * @param inputHeight css length input height.
-     * @return returns the css length instance.
-     */
-    public static CssLength calculateHeight(@Nonnull final ValidatorProtos.AmpLayout spec,
-                                                      @Nonnull final ValidatorProtos.AmpLayout.Layout inputLayout,
-                                                      @Nonnull final CssLength inputHeight) {
-        if ((inputLayout == ValidatorProtos.AmpLayout.Layout.UNKNOWN
-                || inputLayout == ValidatorProtos.AmpLayout.Layout.FIXED
-                || inputLayout == ValidatorProtos.AmpLayout.Layout.FIXED_HEIGHT)
-                && !inputHeight.isSet() && spec.hasDefinesDefaultHeight()) {
-            return new CssLength(
-                    "1px", /* allowAuto */ false, /* allowFluid */ false);
-        }
-        return inputHeight;
-    }
-
-    /**
-     * Calculates the layout; this depends on the width / height
-     * calculation above. It happens last because web designers often make
-     * fixed-sized mocks first and then the layout determines how things
-     * will change for different viewports / devices / etc.
-     *
-     * @param inputLayout input layout.
-     * @param width widht.
-     * @param height height.
-     * @param sizesAttr sizes attribute.
-     * @param heightsAttr heights attribute.
-     * @return return the layout depends on the width/height.
-     */
-    public static ValidatorProtos.AmpLayout.Layout calculateLayout(@Nonnull final ValidatorProtos.AmpLayout.Layout inputLayout,
-                                                             @Nonnull final CssLength width,
-                                                             @Nonnull final CssLength height,
-                                                             final String sizesAttr,
-                                                             final String heightsAttr) {
-        if (inputLayout != ValidatorProtos.AmpLayout.Layout.UNKNOWN) {
-            return inputLayout;
-        } else if (!width.isSet() && !height.isSet()) {
-            return ValidatorProtos.AmpLayout.Layout.CONTAINER;
-        } else if ((height.isSet() && height.isFluid()) || (width.isSet() && width.isFluid())) {
-            return ValidatorProtos.AmpLayout.Layout.FLUID;
-        } else if (height.isSet() && (!width.isSet() || width.isAuto())) {
-            return ValidatorProtos.AmpLayout.Layout.FIXED_HEIGHT;
-        } else if (height.isSet() && width.isSet() && (sizesAttr != null || heightsAttr != null)) {
-            return ValidatorProtos.AmpLayout.Layout.RESPONSIVE;
-        } else {
-            return ValidatorProtos.AmpLayout.Layout.FIXED;
-        }
-    }
-
-    /**
-     * Helper method for validateLayout.
-     * Validates the server-side rendering related attributes for the given layout.
-     * @param spec the tag spec.
-     * @param encounteredTag the encounted tag.
-     * @param inputLayout input layout.
-     * @param inputWidth input width.
-     * @param inputHeight input height.
-     * @param sizesAttr sizes attribute.
-     * @param heightsAttr heights attribute.
-     * @param context the context.
-     * @param result validation result.
-     */
-    public static void validateSsrLayout(
-            @Nonnull final ValidatorProtos.TagSpec spec,
-            @Nonnull final ParsedHtmlTag encounteredTag,
-            @Nonnull final ValidatorProtos.AmpLayout.Layout inputLayout,
-            @Nonnull final CssLength inputWidth,
-            @Nonnull final CssLength inputHeight,
-            final String sizesAttr,
-            final String heightsAttr,
-            @Nonnull final Context context,
-            @Nonnull final ValidatorProtos.ValidationResult.Builder result) {
-        // Only applies to transformed AMP and custom elements (<amp-...>).
-        if (!context.isTransformed()
-                || !encounteredTag.lowerName().startsWith("amp-")) {
-            return;
-        }
-
-        // calculate effective ssr layout
-        final CssLength width =
-                calculateWidthForTag(inputLayout, inputWidth, encounteredTag.upperName());
-        final CssLength height = calculateHeightForTag(
-                inputLayout, inputHeight, encounteredTag.upperName());
-        final ValidatorProtos.AmpLayout.Layout layout =
-                calculateLayout(inputLayout, width, height, sizesAttr, heightsAttr);
-
-        final HashMap<String, String> attrsByKey = encounteredTag.attrsByKey();
-
-        // class attribute
-        final String classAttr = attrsByKey.get("class");
-        if (classAttr != null) {
-            // i-amphtml-layout-{layout_name}
-            final Set<String> validInternalClasses = new HashSet<>();
-            validInternalClasses.add(getLayoutClass(layout));
-            if (isLayoutSizeDefined(layout)) {
-                // i-amphtml-layout-size-defined
-                validInternalClasses.add(getLayoutSizeDefinedClass());
-            }
-            final String [] classes = classAttr.split("[\\s+]");
-            for (String classValue : classes) {
-                if (classValue.startsWith("i-amphtml-")
-                        && !(validInternalClasses.contains(classValue))) {
-                    List<String> params = new ArrayList<>();
-                    params.add("class");
-                    params.add(getTagSpecName(spec));
-                    params.add(classAttr);
-                    context.addError(
-                            ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE,
-                            context.getLineCol(),
-                            params,
-                            getTagSpecUrl(spec),
-                            result);
-                }
-            }
-        }
-
-        // i-amphtml-layout attribute
-        final String ssrAttr = attrsByKey.get("i-amphtml-layout");
-        if (ssrAttr != null) {
-            final String layoutName = layout.name(); //getLayoutName(layout);
-            if (!layoutName.equals(ssrAttr.toLowerCase())) {
-                List<String> params = new ArrayList<>();
-                params.add(ssrAttr);
-                params.add("i-amphtml-layout");
-                params.add(getTagSpecName(spec));
-                params.add(layoutName.toUpperCase());
-                params.add(layoutName);
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.ATTR_VALUE_REQUIRED_BY_LAYOUT,
-                        context.getLineCol(),
-                        params,
-                        getTagSpecUrl(spec),
-                        result);
-            }
-        }
-    }
-
-    /**
-     * @param layout AMP layout.
-     * @return returns true if layout size is matched.
-     */
-    public static boolean isLayoutSizeDefined(@Nonnull final ValidatorProtos.AmpLayout.Layout layout) {
-        return (
-                layout == ValidatorProtos.AmpLayout.Layout.FILL
-                        || layout == ValidatorProtos.AmpLayout.Layout.FIXED
-                        || layout == ValidatorProtos.AmpLayout.Layout.FIXED_HEIGHT
-                        || layout == ValidatorProtos.AmpLayout.Layout.FLEX_ITEM
-                        || layout == ValidatorProtos.AmpLayout.Layout.FLUID
-                        || layout == ValidatorProtos.AmpLayout.Layout.INTRINSIC
-                        || layout == ValidatorProtos.AmpLayout.Layout.RESPONSIVE);
-    }
-
-    /**
-     * @param layout AMP layout.
-     * @return returns the layout class.
-     */
-    public static String getLayoutClass(@Nonnull final ValidatorProtos.AmpLayout.Layout layout) {
-        return "i-amphtml-layout-" + layout.name();
-    }
-
-    /**
-     * @return returns the layout size defined class.
-     */
-    public static String getLayoutSizeDefinedClass() {
-        return "i-amphtml-layout-size-defined";
-    }
-
-    /**
-     * Calculates the effective width from the input layout, input width and tag.
-     * For certain tags it uses explicit dimensions.
-     *
-     * @param inputLayout input layout.
-     * @param inputWidth input width.
-     * @param tagName the tag name.
-     * @return returns the css length instance.
-     */
-    public static CssLength calculateWidthForTag(@Nonnull final ValidatorProtos.AmpLayout.Layout inputLayout,
-                                                           @Nonnull final CssLength inputWidth,
-                                                           @Nonnull final String tagName) {
-        if ((inputLayout == ValidatorProtos.AmpLayout.Layout.UNKNOWN
-                || inputLayout == ValidatorProtos.AmpLayout.Layout.FIXED)
-                && !inputWidth.isSet()) {
-            if (tagName.equals("AMP-ANALYTICS") || tagName.equals("AMP-PIXEL")) {
-                return new CssLength(
-                        "1px", /* allowAuto */ false, /* allowFluid */ false);
-            }
-            if (tagName.equals("AMP-SOCIAL-SHARE")) {
-                return new CssLength(
-                        "60px", /* allowAuto */ false, /* allowFluid */ false);
-            }
-        }
-        return inputWidth;
-    }
-
-    /**
-     * Calculates the effective height from the input layout, input height and tag.
-     * For certain tags it uses explicit dimensions.
-     *
-     * @param inputLayout input layout.
-     * @param inputHeight input height.
-     * @param tagName the tag name.
-     * @return returns the css length instance.
-     */
-    public static CssLength calculateHeightForTag(@Nonnull final ValidatorProtos.AmpLayout.Layout inputLayout,
-                                                  @Nonnull final CssLength inputHeight,
-                                                  @Nonnull final String tagName) {
-        if ((inputLayout == ValidatorProtos.AmpLayout.Layout.UNKNOWN
-                || inputLayout == ValidatorProtos.AmpLayout.Layout.FIXED
-                || inputLayout == ValidatorProtos.AmpLayout.Layout.FIXED_HEIGHT)
-                && !inputHeight.isSet()) {
-            if (tagName.equals("AMP-ANALYTICS") || tagName.equals("AMP-PIXEL")) {
-                return new CssLength(
-                        "1px", /* allowAuto */ false, /* allowFluid */ false);
-            }
-            if (tagName.equals("AMP-SOCIAL-SHARE")) {
-                return new CssLength(
-                        "44px", /* allowAuto */ false, /* allowFluid */ false);
-            }
-        }
-        return inputHeight;
-    }
-
-    /**
-     * Calculates the effective width from the input layout and input width.
-     * This involves considering that some elements, such as amp-audio and
-     * amp-pixel, have natural dimensions (browser or implementation-specific
-     * defaults for width / height).
-     *
-     * @param spec AMP layout spec.
-     * @param inputLayout input layout.
-     * @param inputWidth input width.
-     * @return return the css length instance.
-     */
-    public static CssLength calculateWidth(@Nonnull final ValidatorProtos.AmpLayout spec,
-                                                     @Nonnull final ValidatorProtos.AmpLayout.Layout inputLayout,
-                                                     @Nonnull final CssLength inputWidth) {
-        if ((inputLayout == ValidatorProtos.AmpLayout.Layout.UNKNOWN
-                || inputLayout == ValidatorProtos.AmpLayout.Layout.FIXED)
-                && !inputWidth.isSet() && spec.hasDefinesDefaultWidth()) {
-            return new CssLength(
-                    "1px", /* allowAuto */ false, /* allowFluid */ false);
-        }
-        return inputWidth;
-    }
-
-    /**
-     * Validates that this tag is an allowed descendant tag type.
-     * Registers new descendent constraints if they are set.
-     * @param encounteredTag encountered tag.
-     * @param parsedTagSpec the parsed tag spec.
-     * @param context the context.
-     * @param validationResult validation result.
-     */
-    public static void validateDescendantTags(
-            @Nonnull final ParsedHtmlTag encounteredTag, @Nonnull final ParsedTagSpec parsedTagSpec,
-            @Nonnull final Context context,
-            @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) {
-        final TagStack tagStack = context.getTagStack();
-
-        for (DescendantConstraints allowedDescendantsList : tagStack.allowedDescendantsList()) {
-            // If the tag we're validating is not allowlisted for a specific ancestor,
-            // then throw an error.
-            if (!allowedDescendantsList.getAllowedTags().contains(encounteredTag.upperName())) {
-                final List<String> params = new ArrayList<>();
-                params.add(encounteredTag.lowerName());
-                params.add(allowedDescendantsList.getTagName().toLowerCase());
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.DISALLOWED_TAG_ANCESTOR,
-                        context.getLineCol(),
-                        params,
-                        TagSpecUtils.getTagSpecUrl(parsedTagSpec.getSpec()),
-                        validationResult);
-                return;
-            }
-        }
-    }
-
-    /**
-     * Validates if the 'no siblings allowed' rule exists.
-     * @param parsedTagSpec the parsed tag spec.
-     * @param context the context.
-     * @param validationResult validation result.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public static void validateNoSiblingsAllowedTags(
-            @Nonnull final ParsedTagSpec parsedTagSpec, @Nonnull final Context context,
-            @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult)
-            throws TagValidationException {
-        final ValidatorProtos.TagSpec spec = parsedTagSpec.getSpec();
-        final TagStack tagStack = context.getTagStack();
-
-        if (spec.hasSiblingsDisallowed() && tagStack.parentChildCount() > 0) {
-            final List<String> params = new ArrayList<>();
-            params.add(spec.getTagName().toLowerCase());
-            params.add(tagStack.parentTagName().toLowerCase());
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.TAG_NOT_ALLOWED_TO_HAVE_SIBLINGS,
-                    context.getLineCol(),
-                    params,
-                    getTagSpecUrl(spec),
-                    validationResult);
-        }
-
-        if (tagStack.parentHasChildWithNoSiblingRule() && tagStack.parentChildCount() > 0) {
-            final List<String> params = new ArrayList<>();
-            params.add(tagStack.parentOnlyChildTagName().toLowerCase());
-            params.add(tagStack.parentTagName().toLowerCase());
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.TAG_NOT_ALLOWED_TO_HAVE_SIBLINGS,
-                    tagStack.parentOnlyChildErrorLineCol(),
-                    params,
-                    TagSpecUtils.getTagSpecUrl(spec),
-                    validationResult);
-        }
-    }
-
-    /**
-     * Validates if the 'last child' rule exists.
-     * @param context the context.
-     * @param validationResult validation result.
-     * @throws TagValidationException the TagValidationException.
-     */
-    public static void validateLastChildTags(@Nonnull final Context context,
-                             @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult)
-                            throws TagValidationException {
-        final TagStack tagStack = context.getTagStack();
-
-        if (tagStack.parentHasChildWithLastChildRule()) {
-            final List<String> params = new ArrayList<>();
-            params.add(tagStack.parentLastChildTagName().toLowerCase());
-            params.add(tagStack.parentTagName().toLowerCase());
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.MANDATORY_LAST_CHILD_TAG,
-                    tagStack.parentLastChildErrorLineCol(),
-                    params,
-                    tagStack.parentLastChildUrl(),
-                    validationResult);
-        }
-    }
-
-    /**
-     * If this tag requires an extension and we have processed all extensions,
-     * report an error if that extension has not been loaded.
-     * @param parsedTagSpec the parsed tag spec.
-     * @param context the context.
-     * @param validationResult validation result.
-     */
-    public static void validateRequiredExtensions(@Nonnull final ParsedTagSpec parsedTagSpec,
-                                      @Nonnull final Context context,
-                                      @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) {
-        final ValidatorProtos.TagSpec tagSpec = parsedTagSpec.getSpec();
-        final ExtensionsContext extensionsCtx = context.getExtensions();
-        for (final String requiredExtension : tagSpec.getRequiresExtensionList()) {
-            if (!extensionsCtx.isExtensionLoaded(requiredExtension)) {
-                final List<String> params = new ArrayList<>();
-                params.add(getTagSpecName(parsedTagSpec.getSpec()));
-                params.add(requiredExtension);
-                context.addError(
-                        ValidatorProtos.ValidationError.Code.MISSING_REQUIRED_EXTENSION,
-                        context.getLineCol(),
-                        params,
-                        getTagSpecUrl(parsedTagSpec.getSpec()),
-                        validationResult);
-            }
-        }
-    }
-
-    /**
-     * Check for duplicates of tags that should be unique, reporting errors for
-     * the second instance of each unique tag.
-     * @param parsedTagSpec the parsed tag spec.
-     * @param context the context.
-     * @param validationResult validation result.
-     */
-    public static void validateUniqueness(@Nonnull final ParsedTagSpec parsedTagSpec,
-                                          @Nonnull final Context context,
-                                          @Nonnull final ValidatorProtos.ValidationResult.Builder validationResult) {
-        final ValidatorProtos.TagSpec tagSpec = parsedTagSpec.getSpec();
-        if (tagSpec.hasUnique()
-                && context.getTagspecsValidated().containsKey(parsedTagSpec.id())) {
-            final List<String> params = new ArrayList<>();
-            params.add(getTagSpecName(tagSpec));
-            context.addError(
-                    ValidatorProtos.ValidationError.Code.DUPLICATE_UNIQUE_TAG,
-                    context.getLineCol(),
-                    params,
-                    getTagSpecUrl(parsedTagSpec.getSpec()),
-                    validationResult);
-        }
-    }
-
-    /** List identifiers for AMP format. */
-    public static final List AMP_IDENTIFIERS = Arrays.asList("\u26a1", "\u26a1\ufe0f", "amp", "transformed", "data-ampdevmode");
-
-    /** List identifiers for AMP4ADS format. */
-    public static final List AMP4ADS_IDENTIFIERS = Arrays.asList("\u26a14ads", "\u26a1\ufe0f4ads", "amp4ads", "data-ampdevmode");
-
-    /** List identifiers for AMP4EMAIL format. */
-    public static final List AMP4EMAIL_IDENTIFIERS = Arrays.asList("\u26a14email", "\u26a1\ufe0f4email", "amp4email", "data-ampdevmode");
-
-    /** List identifiers for ACTIONS format. */
-    public static final List ACTIONS_IDENTIFIERS = Arrays.asList("\u26a1", "\u26a1\ufe0f", "amp", "actions", "data-ampdevmode");
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/utils/UrlUtils.java b/validator/java/src/main/java/dev/amp/validator/utils/UrlUtils.java
deleted file mode 100644
index 0166b718e2e1b..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/utils/UrlUtils.java
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.utils;
-
-import javax.annotation.Nonnull;
-import java.util.regex.Matcher;
-import java.util.regex.Pattern;
-
-/**
- * Functions to extract information from urls.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public final class UrlUtils {
-  /**
-   * private constructor
-   */
-  private UrlUtils() {
-  }
-
-  /**
-   * Returns true iff the passed in URL is a data: protocol URL.
-   *
-   * @param urlStr the url to check
-   * @return true iff URL is a data: protocol
-   */
-  public static boolean isDataUrl(@Nonnull final String urlStr) {
-    final Matcher match = PROTOCOL.matcher(urlStr);
-    String protocol;
-    if (match.matches()) {
-      protocol = match.group(1);
-      protocol = protocol.toLowerCase().trim();
-      return protocol.equals("data");
-    }
-    return false;
-  }
-
-  /**
-   * A pattern to extract protocol from url.
-   */
-  private static final Pattern PROTOCOL = Pattern.compile("^([^:\\/?#.]+):.*$");
-
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/utils/ValidationErrorUtils.java b/validator/java/src/main/java/dev/amp/validator/utils/ValidationErrorUtils.java
deleted file mode 100644
index 85c14eeb7c01b..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/utils/ValidationErrorUtils.java
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.utils;
-
-import dev.amp.validator.ValidatorProtos;
-import org.xml.sax.Locator;
-
-import javax.annotation.Nonnull;
-import java.util.List;
-
-/**
- * Validation error utility methods.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public final class ValidationErrorUtils {
-    /**
-     * A private constructor.
-     */
-    private ValidationErrorUtils() {
-    }
-
-    /**
-     * Construct a ValidationError object from the given argument list.
-     *
-     * @param severity the severity.
-     * @param validationErrorCode Error code.
-     * @param lineCol a line / column pair.
-     * @param params the list of params.
-     * @param specUrl a link (URL) to the amphtml spec.
-     * @return returns the ValidationError instance.
-     */
-    public static ValidatorProtos.ValidationError populateError(
-            @Nonnull final ValidatorProtos.ValidationError.Severity severity,
-            @Nonnull final  ValidatorProtos.ValidationError.Code validationErrorCode,
-            @Nonnull final Locator lineCol, @Nonnull final List<String> params, @Nonnull final String specUrl) {
-        return populateError(severity, validationErrorCode,
-                lineCol.getLineNumber(), lineCol.getColumnNumber(), params, specUrl);
-    }
-
-    /**
-     * Construct a ValidationError object from the given argument list.
-     *
-     * @param severity the severity.
-     * @param validationErrorCode Error code.
-     * @param line a line number.
-     * @param column a column number.
-     * @param params the list of params.
-     * @param specUrl a link (URL) to the amphtml spec.
-     * @return returns the ValidationError instance.
-     */
-    public static ValidatorProtos.ValidationError populateError(
-            @Nonnull final ValidatorProtos.ValidationError.Severity severity,
-            @Nonnull final  ValidatorProtos.ValidationError.Code validationErrorCode,
-            final int line, final int column, @Nonnull final List<String> params,
-            @Nonnull final String specUrl) {
-        final ValidatorProtos.ValidationError.Builder error = ValidatorProtos.ValidationError.newBuilder();
-        error.setSeverity(severity);
-        error.setCode(validationErrorCode);
-        error.addAllParams(params);
-        error.setLine(line);
-        error.setCol(column);
-        error.setSpecUrl(specUrl == null ? "" : specUrl);
-        return error.build();
-    }
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/utils/package-info.java b/validator/java/src/main/java/dev/amp/validator/utils/package-info.java
deleted file mode 100644
index 46fb1fd1c3d86..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/utils/package-info.java
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-/**
- * AMP validator.
- */
-package dev.amp.validator.utils;
\ No newline at end of file
diff --git a/validator/java/src/main/java/dev/amp/validator/visitor/Amp4AdsVisitor.java b/validator/java/src/main/java/dev/amp/validator/visitor/Amp4AdsVisitor.java
deleted file mode 100644
index 17e913d44b00d..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/visitor/Amp4AdsVisitor.java
+++ /dev/null
@@ -1,201 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.visitor;
-
-import dev.amp.validator.ValidatorProtos;
-import com.steadystate.css.parser.Token;
-import dev.amp.validator.css.AtRule;
-import dev.amp.validator.css.ErrorToken;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.css.TokenType;
-import dev.amp.validator.css.Declaration;
-import dev.amp.validator.css.QualifiedRule;
-
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-import static dev.amp.validator.css.CssTokenUtil.copyPosTo;
-import static dev.amp.validator.css.CssTokenUtil.getTokenType;
-import static dev.amp.validator.utils.CssSpecUtils.stripVendorPrefix;
-
-/**
- * A visitor class extension to handle amp4ads validation of css tokens.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class Amp4AdsVisitor implements RuleVisitor {
-    /**
-     * Constructor.
-     *
-     * @param errors to populate upon error encountered
-     */
-    public Amp4AdsVisitor(@Nonnull final List<ErrorToken> errors) {
-        super();
-        this.errors = errors;
-        this.inKeyframes = null;
-    }
-
-    /**
-     * Visit a declaration.
-     *
-     * @param declaration to populate upon error encountered
-     * @throws CssValidationException Css Validation Exception
-     */
-    public void visitDeclaration(@Nonnull final Declaration declaration) throws CssValidationException {
-        // position:fixed and position:sticky are disallowed.
-        if (declaration.getName().equals("position")) {
-            return;
-        }
-
-        final String ident = firstIdent(declaration.getValue());
-        if (ident.equals("fixed") || ident.equals("sticky")) {
-            List<String> params = new ArrayList<>();
-            params.add("style");
-            params.add("position");
-            params.add(ident);
-            this.errors.add(createParseErrorTokenAt(
-                    declaration,
-                    ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
-                    params));
-        }
-    }
-
-    /**
-     * Visit a qualified rule.
-     *
-     * @param qualifiedRule to validate
-     * @throws CssValidationException Css Validation Exception
-     */
-    @Override
-    public void visitQualifiedRule(@Nonnull final QualifiedRule qualifiedRule) throws CssValidationException {
-        for (final Declaration decl : qualifiedRule.getDeclarations()) {
-            final String name = stripVendorPrefix(decl.getName());
-            // The name of the property may identify a transition. The only
-            // properties that may be transitioned are opacity and transform.
-            if (name.equals("transition")) {
-                final String transitionedProperty = firstIdent(decl.getValue());
-                final String transitionedPropertyStripped = stripVendorPrefix(transitionedProperty);
-                if (!transitionedPropertyStripped.equals("opacity")
-                        && !transitionedPropertyStripped.equals("transform")) {
-                    final List<String> params = new ArrayList<>();
-                    params.add("style");
-                    params.add("transition");
-                    params.add(transitionedProperty);
-                    params.add("[\'opacity\', \'transform\']");
-                    this.errors.add(createParseErrorTokenAt(
-                            decl,
-                            ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE_WITH_HINT,
-                            params));
-                }
-            }
-            // This is the @keyframes variant for identifying transitions;
-            // the only properties that may be specified within a transition
-            // are opacity, transform, and animation-timing-function.
-            if (this.inKeyframes != null && !name.equals("transform")
-                    && !name.equals("opacity") && !name.equals("animation-timing-function")) {
-                List<String> params = new ArrayList<>();
-                params.add("style");
-                params.add(decl.getName());
-                params.add(this.inKeyframes.getName());
-                params.add("[\'animation-timing-function\', \'opacity\', \'transform\']");
-
-                this.errors.add(createParseErrorTokenAt(
-                        decl,
-                        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_PROPERTY_DISALLOWED_WITHIN_AT_RULE,
-                        params));
-            }
-        }
-    }
-
-    /**
-     * Visit a rule.
-     *
-     * @param atRule to process
-     */
-    @Override
-    public void visitAtRule(@Nonnull final AtRule atRule) {
-        if (stripVendorPrefix(atRule.getName()).equals("keyframes")) {
-            this.inKeyframes = atRule;
-        } else {
-            this.inKeyframes = null;
-        }
-    }
-
-    /**
-     * Leave an atRule.
-     *
-     * @param atRule unnecessary, must exist in method pattern
-     */
-    @Override
-    public void leaveAtRule(@Nonnull final AtRule atRule) {
-        this.inKeyframes = null;
-    }
-
-    /**
-     * For a list of |tokens|, if the first non-whitespace token is an identifier,
-     * returns its string value. Otherwise, returns the empty string.
-     *
-     * @param tokens
-     * @return a string value.
-     */
-    private static String firstIdent(@Nonnull final List<Token> tokens) {
-        if (tokens.size() == 0) {
-            return "";
-        }
-        if (getTokenType(tokens.get(0)) == TokenType.IDENT) {
-            return (String) (tokens.get(0)).getValue();
-        }
-        if (tokens.size() >= 2
-                && (getTokenType(tokens.get(0)) == TokenType.WHITESPACE)
-                && getTokenType(tokens.get(1)) == TokenType.IDENT) {
-            return (String) (tokens.get(1)).getValue();
-        }
-        return "";
-    }
-
-    /**
-     * Fills an ErrorToken with the provided position, code, and params.
-     *
-     * @param positionToken token generating an error
-     * @param code          the code to populate error with
-     * @param params        the error params to report
-     * @return the error list
-     * @throws CssValidationException Css Validation Exception
-     */
-    public static ErrorToken createParseErrorTokenAt(@Nonnull final Token positionToken,
-                                                     @Nonnull final ValidatorProtos.ValidationError.Code code,
-                                                     @Nonnull final List<String> params) throws CssValidationException {
-        ErrorToken token = new ErrorToken(code, params);
-        copyPosTo(positionToken, token);
-        return token;
-    }
-
-    @Nonnull
-    private final List<ErrorToken> errors;
-
-    @Nonnull
-    private AtRule inKeyframes;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/visitor/ImportantPropertyVisitor.java b/validator/java/src/main/java/dev/amp/validator/visitor/ImportantPropertyVisitor.java
deleted file mode 100644
index 0158e5651df1d..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/visitor/ImportantPropertyVisitor.java
+++ /dev/null
@@ -1,34 +0,0 @@
-package dev.amp.validator.visitor;
-
-import dev.amp.validator.css.Declaration;
-
-import javax.annotation.Nonnull;
-import java.util.List;
-
-public class ImportantPropertyVisitor implements RuleVisitor {
-    /**
-     * walk through list of declarations
-     *
-     * @param important
-     */
-    public ImportantPropertyVisitor(@Nonnull final List<Declaration> important) {
-        super();
-        this.important = important;
-    }
-
-    /**
-     * visits a declaration
-     *
-     * @param declaration to visit
-     */
-    public void visitDeclaration(@Nonnull final Declaration declaration) {
-        if (declaration.getImportant()) {
-            this.important.add(declaration);
-        }
-    }
-
-    /**
-     * the list belonging to visitor
-     */
-    private final List<Declaration> important;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/visitor/InvalidDeclVisitor.java b/validator/java/src/main/java/dev/amp/validator/visitor/InvalidDeclVisitor.java
deleted file mode 100644
index 397a729b4aed6..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/visitor/InvalidDeclVisitor.java
+++ /dev/null
@@ -1,64 +0,0 @@
-package dev.amp.validator.visitor;
-
-import dev.amp.validator.Context;
-import dev.amp.validator.ValidatorProtos;
-import dev.amp.validator.css.Declaration;
-import dev.amp.validator.css.ParsedDocCssSpec;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-public class InvalidDeclVisitor implements RuleVisitor {
-
-    /**
-     * Visitor for "important" css element
-     *
-     * @param spec
-     * @param context
-     * @param result
-     */
-    public InvalidDeclVisitor(@Nonnull final ParsedDocCssSpec spec, @Nonnull final Context context,
-                              @Nonnull final ValidatorProtos.ValidationResult.Builder result) {
-        super();
-        this.spec = spec;
-        this.context = context;
-        this.result = result;
-    }
-
-    /**
-     * visitDeclaration implementation
-     *
-     * @param declaration the declaration to visit
-     */
-    public void visitDeclaration(final Declaration declaration) {
-        if (this.spec.getCssDeclarationByName().get(declaration.getName()) != null) {
-            List<String> params = new ArrayList<>();
-            params.add(declaration.getName());
-            params.add("style amp-custom");
-
-            this.context.addError(
-                    ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_PROPERTY_NOLIST,
-                    context.getLineCol().getLineNumber() + declaration.getLine(),
-                    context.getLineCol().getColumnNumber() + declaration.getCol(),
-                    params, this.spec.getSpec().getSpecUrl(),
-                    this.result);
-        }
-    }
-
-
-    /**
-     * ParsedDocCssSpec associated to Visitor
-     */
-    private final ParsedDocCssSpec spec;
-
-    /**
-     * reference to Context
-     */
-    private final Context context;
-
-    /**
-     * reference to result
-     */
-    private final ValidatorProtos.ValidationResult.Builder result;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/visitor/InvalidRuleVisitor.java b/validator/java/src/main/java/dev/amp/validator/visitor/InvalidRuleVisitor.java
deleted file mode 100644
index a10d00bc38653..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/visitor/InvalidRuleVisitor.java
+++ /dev/null
@@ -1,155 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.visitor;
-
-import dev.amp.validator.ValidatorProtos;
-import dev.amp.validator.css.AtRule;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.css.Declaration;
-import dev.amp.validator.Context;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-import static dev.amp.validator.utils.CssSpecUtils.allowedDeclarationsString;
-import static dev.amp.validator.utils.CssSpecUtils.isDeclarationValid;
-import static dev.amp.validator.utils.TagSpecUtils.getTagSpecName;
-import static dev.amp.validator.utils.CssSpecUtils.stripVendorPrefix;
-
-/**
- * Extension of RuleVisitor used to handle an invalid css rule.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class InvalidRuleVisitor implements RuleVisitor {
-    /**
-     * Initialize an InvalidRuleVisitor.
-     *
-     * @param tagSpec to validate against.
-     * @param cssSpec to validate against.
-     * @param context provides global information related to html validation.
-     * @param result  the validation result to populate.
-     */
-    public InvalidRuleVisitor(@Nonnull final ValidatorProtos.TagSpec tagSpec, @Nonnull final ValidatorProtos.CssSpec cssSpec,
-                              @Nonnull final Context context,
-                              @Nonnull final ValidatorProtos.ValidationResult.Builder result) {
-        super();
-        this.tagSpec = tagSpec;
-        this.cssSpec = cssSpec;
-        this.context = context;
-        this.result = result;
-    }
-
-    /**
-     * Visit an atRule
-     *
-     * @param atRule to visit
-     */
-    @Override
-    public void visitAtRule(@Nonnull final AtRule atRule) throws CssValidationException {
-        if (!isAtRuleValid(this.cssSpec, atRule.getName())) {
-            List<String> params = new ArrayList<>();
-            params.add(getTagSpecName(this.tagSpec));
-            params.add(atRule.getName());
-            this.context.addError(
-                    ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_AT_RULE,
-                    context.getLineCol().getLineNumber() + atRule.getLine(),
-                    context.getLineCol().getColumnNumber() + atRule.getCol(),
-                    params,
-                    "",
-                    this.result);
-        }
-    }
-
-    /**
-     * Returns true if the given AT rule is considered valid.
-     *
-     * @param cssSpec    to validate against
-     * @param atRuleName the rule to validate
-     * @return true iff rule is valid
-     * @throws CssValidationException Css Validation Exception
-     */
-    public boolean isAtRuleValid(@Nonnull final ValidatorProtos.CssSpec cssSpec,
-                                 @Nonnull final String atRuleName) {
-      for (final ValidatorProtos.AtRuleSpec atRuleSpec : cssSpec.getAtRuleSpecList()) {
-        if (atRuleSpec.getName().equals(stripVendorPrefix(atRuleName))) {
-          return true;
-        }
-      }
-      return false;
-    }
-
-    /**
-     * Touches a Declaration
-     *
-     * @param declaration to visit
-     */
-    @Override
-    public void visitDeclaration(@Nonnull final Declaration declaration) {
-        if (!isDeclarationValid(this.cssSpec, declaration.getName())) {
-            final String declarationsStr = allowedDeclarationsString(this.cssSpec);
-            if (declarationsStr.equals("")) {
-                List<String> params = new ArrayList<>();
-                params.add(getTagSpecName(this.tagSpec));
-                params.add(declaration.getName());
-
-                this.context.addError(
-                        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_PROPERTY_NOLIST,
-                        context.getLineCol().getLineNumber() + declaration.getLine(),
-                        context.getLineCol().getColumnNumber() + declaration.getCol(),
-                        params,
-                        "",
-                        this.result);
-
-            } else {
-                List<String> params = new ArrayList<>();
-                params.add(getTagSpecName(this.tagSpec));
-                params.add(declaration.getName());
-                params.add(declaration.getName());
-                allowedDeclarationsString(this.cssSpec);
-
-                this.context.addError(
-                        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_PROPERTY,
-                        context.getLineCol().getLineNumber() + declaration.getLine(),
-                        context.getLineCol().getColumnNumber() + declaration.getCol(),
-                        params,
-                        "",
-                        this.result);
-            }
-        }
-    }
-
-    /** Tag spec. */
-    private final ValidatorProtos.TagSpec tagSpec;
-
-    /** Css spec. */
-    private final ValidatorProtos.CssSpec cssSpec;
-
-    /** Context. */
-    private final Context context;
-
-    /** Result builder. */
-    private final ValidatorProtos.ValidationResult.Builder result;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/visitor/KeyframesVisitor.java b/validator/java/src/main/java/dev/amp/validator/visitor/KeyframesVisitor.java
deleted file mode 100644
index 2cd11a26343c4..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/visitor/KeyframesVisitor.java
+++ /dev/null
@@ -1,146 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.visitor;
-
-import dev.amp.validator.ValidatorProtos;
-import dev.amp.validator.css.CssTokenUtil;
-import dev.amp.validator.css.QualifiedRule;
-import dev.amp.validator.css.Token;
-import dev.amp.validator.css.ErrorToken;
-import dev.amp.validator.css.AtRule;
-import dev.amp.validator.css.CssValidationException;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * A visitor for keyframes at rule.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class KeyframesVisitor implements RuleVisitor {
-    /**
-     * Constructor.
-     *
-     * @param errors the errors collection to populate
-     */
-    public KeyframesVisitor(@Nonnull final List<ErrorToken> errors) {
-        super();
-        this.errors = errors;
-        this.parentIsKeyframesAtRule = false;
-    }
-
-    /**
-     * visit a qualified rule
-     *
-     * @param qualifiedRule to visit
-     * @throws CssValidationException Css Validation Error
-     */
-    @Override
-    public void visitQualifiedRule(@Nonnull final QualifiedRule qualifiedRule) throws CssValidationException {
-        if (!this.parentIsKeyframesAtRule) {
-            List<String> params = new ArrayList<>();
-            params.add("style");
-            params.add(qualifiedRule.ruleName());
-            this.errors.add(createErrorTokenAt(
-                    qualifiedRule,
-                    ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_QUALIFIED_RULE_MUST_BE_INSIDE_KEYFRAME,
-                    params));
-            return;
-        }
-        if (qualifiedRule.getDeclarations().size() > 0) {
-            return;
-        }
-        List<String> params = new ArrayList<>();
-        params.add("style");
-        params.add(qualifiedRule.ruleName());
-        this.errors.add(createErrorTokenAt(
-                qualifiedRule,
-                ValidatorProtos.ValidationError.Code.CSS_SYNTAX_QUALIFIED_RULE_HAS_NO_DECLARATIONS,
-                params));
-    }
-
-
-    /**
-     * Fills an ErrorToken with the provided position, code, and params.
-     *
-     * @param positionToken generating error
-     * @param code          the code generated by the error
-     * @param params        the error params
-     * @return an ErrorToken positioned at positionToken location
-     * @throws CssValidationException Css Validation Error
-     */
-    public static ErrorToken createErrorTokenAt(@Nonnull final Token positionToken,
-                                                @Nonnull final ValidatorProtos.ValidationError.Code code,
-                                                @Nonnull final List<String> params) throws CssValidationException {
-        ErrorToken token = new ErrorToken(code, params);
-        CssTokenUtil.copyPosTo(positionToken, token);
-        return token;
-    }
-
-    /**
-     * Visit an atRule.
-     *x
-     * @param atRule to visit
-     * @throws CssValidationException Css Validation Error
-     */
-    @Override
-    public void visitAtRule(@Nonnull final AtRule atRule) throws CssValidationException {
-        switch (atRule.getName()) {
-            case "keyframes":
-            case "-moz-keyframes":
-            case "-o-keyframes":
-            case "-webkit-keyframes":
-                if (this.parentIsKeyframesAtRule) {
-                    List<String> params = new ArrayList<>();
-                    params.add("style");
-                    this.errors.add(createErrorTokenAt(
-                            atRule,
-                            ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_KEYFRAME_INSIDE_KEYFRAME,
-                            params));
-                }
-                this.parentIsKeyframesAtRule = true;
-                return;
-            default:
-        }
-    }
-
-    /**
-     * Leave an atRule.
-     *
-     * @param atRule currently visiting
-     */
-    @Override
-    public void leaveAtRule(@Nonnull final AtRule atRule) {
-        this.parentIsKeyframesAtRule = false;
-    }
-
-    /** List of token errors. */
-    @Nonnull
-    private final List<ErrorToken> errors;
-
-    /** Flag to indicate whether if the parent is key frame at rule. */
-    private boolean parentIsKeyframesAtRule;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/visitor/MediaQueryVisitor.java b/validator/java/src/main/java/dev/amp/validator/visitor/MediaQueryVisitor.java
deleted file mode 100644
index 4bf5552b3dd5e..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/visitor/MediaQueryVisitor.java
+++ /dev/null
@@ -1,285 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.visitor;
-
-import dev.amp.validator.ValidatorProtos;
-import com.steadystate.css.parser.Token;
-import dev.amp.validator.css.AtRule;
-import dev.amp.validator.css.ErrorToken;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.css.TokenStream;
-import dev.amp.validator.css.TokenType;
-import dev.amp.validator.css.Stylesheet;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-import static dev.amp.validator.css.CssTokenUtil.copyPosTo;
-import static dev.amp.validator.css.CssTokenUtil.getTokenType;
-import static dev.amp.validator.utils.CssSpecUtils.asciiMatch;
-
-/**
- * A Vistor class to touch media queries.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class MediaQueryVisitor implements RuleVisitor {
-    /**
-     * Constructor for media query visitor
-     * @param mediaTypes the types to validate
-     * @param mediaFeatures the features to validate
-     * @param errors to populate as media query is visited
-     */
-    public MediaQueryVisitor(@Nonnull final List<Token> mediaTypes, @Nonnull final List<Token> mediaFeatures,
-                             @Nonnull final List<ErrorToken> errors) {
-        super();
-        this.mediaTypes = mediaTypes;
-        this.mediaFeatures = mediaFeatures;
-        this.errors = errors;
-    }
-
-    /**
-     * Visit an AtRule.
-     * @param atRule to visit
-     */
-    @Override
-    public void visitAtRule(@Nonnull final AtRule atRule) throws CssValidationException {
-        if (!atRule.getName().toLowerCase().equals("media")) {
-            return;
-        }
-
-        final TokenStream tokenStream = new TokenStream(atRule.getPrelude());
-        tokenStream.consume(); // Advance to first token.
-        if (!this.parseAMediaQueryList(tokenStream)) {
-            final List<String> params = new ArrayList<>();
-            params.add("style");
-            this.errors.add((ErrorToken) copyPosTo(atRule,
-                    new ErrorToken(ValidatorProtos.ValidationError.Code.CSS_SYNTAX_MALFORMED_MEDIA_QUERY,
-                    params)));
-        }
-    }
-
-    /**
-     * Maybe consume one whitespace token.
-     *
-     * @param tokenStream to consume from
-     */
-    private void maybeConsumeAWhitespaceToken(@Nonnull final TokenStream tokenStream) {
-        // While the grammar calls for consuming multiple whitespace tokens,
-        // our tokenizer already collapses whitespace so only one token can ever
-        // be present.
-        if (getTokenType(tokenStream.current()) == TokenType.WHITESPACE) {
-            tokenStream.consume();
-        }
-    }
-
-    /**
-     * Parse a media query list.
-     *
-     * @param tokenStream content to validate
-     * @return success of parse job
-     * @private
-     */
-    private boolean parseAMediaQueryList(@Nonnull final TokenStream tokenStream) {
-        // https://www.w3.org/TR/css3-mediaqueries/#syntax
-        // : S* [media_query [ ',' S* media_query ]* ]?
-        // ;
-        this.maybeConsumeAWhitespaceToken(tokenStream);
-        if (getTokenType(tokenStream.current()) != TokenType.EOF_TOKEN) {
-            if (!this.parseAMediaQuery(tokenStream)) {
-                return false;
-            }
-            while (getTokenType(tokenStream.current()) == TokenType.COMMA) {
-                tokenStream.consume(); // ','
-                this.maybeConsumeAWhitespaceToken(tokenStream);
-                if (!this.parseAMediaQuery(tokenStream)) {
-                    return false;
-                }
-            }
-        }
-        return getTokenType(tokenStream.current()) == TokenType.EOF_TOKEN;
-    }
-
-    /**
-     * Parse a media query.
-     *
-     * @param tokenStream content to parse
-     * @return true iff parse job is successful
-     */
-    private boolean parseAMediaQuery(@Nonnull final TokenStream tokenStream) {
-        // : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
-        // | expression [ AND S* expression ]*
-        // ;
-        //
-        // Below we parse media queries with this equivalent grammar:
-        // : (expression | [ONLY | NOT]? S* media_type S* )
-        // [ AND S* expression ]*
-        // ;
-        //
-        // This is more convenient because we know that expressions must start with
-        // '(', so it's simpler to use as a check to distinguis the expression case
-        // from the media type case.
-        if (getTokenType(tokenStream.current()) == TokenType.OPEN_PAREN) {
-            if (!this.parseAMediaExpression(tokenStream)) {
-                return false;
-            }
-        } else {
-            if (getTokenType(tokenStream.current()) == TokenType.IDENT
-                    && (asciiMatch((tokenStream.current()), ("only"))
-                    || asciiMatch((tokenStream.current()), ("not")))) {
-                tokenStream.consume(); // 'ONLY' | 'NOT'
-            }
-            this.maybeConsumeAWhitespaceToken(tokenStream);
-            if (!this.parseAMediaType(tokenStream)) {
-                return false;
-            }
-            this.maybeConsumeAWhitespaceToken(tokenStream);
-        }
-        while (getTokenType(tokenStream.current()) == TokenType.IDENT
-                && asciiMatch((tokenStream.current()), ("and"))) {
-            tokenStream.consume(); // 'AND'
-            this.maybeConsumeAWhitespaceToken(tokenStream);
-            if (!this.parseAMediaExpression(tokenStream)) {
-                return false;
-            }
-        }
-        return true;
-    }
-
-    /**
-     * Parse a media expression.
-     *
-     * @param tokenStream content to parse
-     * @return true iff parse is successful
-     */
-    private boolean parseAMediaExpression(@Nonnull final TokenStream tokenStream) {
-        //  : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
-        //  ;
-        if (getTokenType(tokenStream.current()) != TokenType.OPEN_PAREN) {
-            return false;
-        }
-        tokenStream.consume(); // '('
-        this.maybeConsumeAWhitespaceToken(tokenStream);
-        if (!this.parseAMediaFeature(tokenStream)) {
-            return false;
-        }
-        this.maybeConsumeAWhitespaceToken(tokenStream);
-        if (getTokenType(tokenStream.current()) == TokenType.COLON) {
-            tokenStream.consume(); // '('
-            this.maybeConsumeAWhitespaceToken(tokenStream);
-            // The CSS3 grammar at this point just tells us to expect some
-            // expr. Which tokens are accepted here are defined by the media
-            // feature found above. We don't implement media features here, so
-            // we just loop over tokens until we find a CLOSE_PAREN or EOF.
-            // While expr in general may have arbitrary sets of open/close parens,
-            // it seems that https://www.w3.org/TR/css3-mediaqueries/#media1
-            // suggests that media features cannot:
-            //
-            // "Media features only accept single values: one keyword, one number,
-            // or a number with a unit identifier. (The only exceptions are the
-            // ‘aspect-ratio’ and ‘device-aspect-ratio’ media features.)
-            while (
-                    getTokenType(tokenStream.current()) != TokenType.EOF_TOKEN
-                            && getTokenType(tokenStream.current()) != TokenType.CLOSE_PAREN) {
-                tokenStream.consume();
-            }
-        }
-        if (getTokenType(tokenStream.current()) != TokenType.CLOSE_PAREN) {
-            return false;
-        }
-        tokenStream.consume(); // ')'
-        this.maybeConsumeAWhitespaceToken(tokenStream);
-        return true;
-    }
-
-    /**
-     * Parse a media feature.
-     *
-     * @param tokenStream
-     * @return true iff feature parsing is successful
-     */
-    private boolean parseAMediaFeature(@Nonnull final TokenStream tokenStream) {
-        // : IDENT
-        // ;
-        if (getTokenType(tokenStream.current()) == TokenType.IDENT) {
-            this.mediaFeatures.add(
-                    /** @type {!parse_css.IdentToken} */(tokenStream.current()));
-            tokenStream.consume();
-            return true;
-        }
-        return false;
-    }
-
-    /**
-     * Parse a media type.
-     *
-     * @param tokenStream
-     * @return true iff media type successfully parsed
-     */
-    private boolean parseAMediaType(@Nonnull final TokenStream tokenStream) {
-        // : IDENT
-        // ;
-        if (getTokenType(tokenStream.current()) == TokenType.IDENT) {
-            this.mediaTypes.add(
-                    /** @type {!parse_css.IdentToken} */(tokenStream.current()));
-            tokenStream.consume();
-            return true;
-        }
-        return false;
-    }
-
-
-    /**
-     * Parses media queries within the provided stylesheet, emitting the set of
-     * discovered media types and media features, as well as errors if parsing
-     * failed.
-     * parsedUrls and errors into errors.
-     *
-     * @param stylesheet to parse
-     * @param mediaTypes found in stylesheet
-     * @param mediaFeatures found in stylesheet
-     * @param errors discovered during parse
-     * @throws CssValidationException css validation exception
-     */
-    public static void parseMediaQueries(@Nonnull final Stylesheet stylesheet, @Nonnull final List<Token> mediaTypes,
-                                         @Nonnull final List<Token> mediaFeatures,
-                                         @Nonnull final List<ErrorToken> errors) throws CssValidationException {
-        MediaQueryVisitor visitor = new MediaQueryVisitor(mediaTypes, mediaFeatures, errors);
-        stylesheet.accept(visitor);
-    }
-
-    /** List of media types. */
-    @Nonnull
-    private final List<Token> mediaTypes;
-
-    /** List of media features. */
-    @Nonnull
-    private final List<Token> mediaFeatures;
-
-    /** List of token errors. */
-    @Nonnull
-    private final List<ErrorToken> errors;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/visitor/RuleVisitor.java b/validator/java/src/main/java/dev/amp/validator/visitor/RuleVisitor.java
deleted file mode 100644
index 80e29485eeded..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/visitor/RuleVisitor.java
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.visitor;
-
-import dev.amp.validator.css.AtRule;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.css.Stylesheet;
-import dev.amp.validator.css.Declaration;
-import dev.amp.validator.css.QualifiedRule;
-
-import javax.annotation.Nonnull;
-
-/**
- * A visitor model implementation for rules to implement.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public interface RuleVisitor {
-    /**
-     * Visit a Stylesheet.
-     * @param stylesheet to visit
-     */
-    default void visitStylesheet(@Nonnull Stylesheet stylesheet) {
-    }
-
-    /**
-     * Leave a Stylesheet.
-     * @param stylesheet to leave
-     */
-    default void leaveStylesheet(@Nonnull Stylesheet stylesheet) {
-    }
-
-    /**
-     * Visit an AtRule.
-     * @param atRule to visit
-     * @throws CssValidationException Css Validation Exception
-     */
-    default void visitAtRule(@Nonnull AtRule atRule) throws CssValidationException {
-    }
-
-    /**
-     * Leave an AtRule.
-     * @param atRule to leave
-     */
-    default void leaveAtRule(@Nonnull AtRule atRule) {
-    }
-
-    /**
-     * Visit a QualifiedRule.
-     * @param qualifiedRule to visit
-     * @throws CssValidationException Css Validation Exception
-     */
-    default void visitQualifiedRule(@Nonnull QualifiedRule qualifiedRule) throws CssValidationException {
-    }
-
-    /**
-     * Leave a qualified rule.
-     * @param qualifiedRule to leave
-     */
-    default void leaveQualifiedRule(@Nonnull QualifiedRule qualifiedRule) {
-    }
-
-    /**
-     * Visit a declaration.
-     * @param declaration to visit
-     * @throws CssValidationException Css Validation Exception
-     */
-    default void visitDeclaration(@Nonnull Declaration declaration) throws CssValidationException {
-    }
-
-    /**
-     * Leave a declaration.
-     * @param declaration to leave
-     */
-    default void leaveDeclaration(@Nonnull Declaration declaration) {
-    }
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/visitor/UrlFunctionVisitor.java b/validator/java/src/main/java/dev/amp/validator/visitor/UrlFunctionVisitor.java
deleted file mode 100644
index a9a63feb221c3..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/visitor/UrlFunctionVisitor.java
+++ /dev/null
@@ -1,127 +0,0 @@
-package dev.amp.validator.visitor;
-
-import dev.amp.validator.ValidatorProtos;
-import com.steadystate.css.parser.Token;
-import dev.amp.validator.css.AtRule;
-import dev.amp.validator.css.ErrorToken;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.css.TokenType;
-import dev.amp.validator.css.Declaration;
-import dev.amp.validator.css.ParsedCssUrl;
-import dev.amp.validator.css.QualifiedRule;
-
-import javax.annotation.Nonnull;
-import java.util.ArrayList;
-import java.util.List;
-
-import static dev.amp.validator.css.CssTokenUtil.copyPosTo;
-import static dev.amp.validator.css.CssTokenUtil.getTokenType;
-import static dev.amp.validator.utils.CssSpecUtils.parseUrlFunction;
-import static dev.amp.validator.utils.CssSpecUtils.parseUrlToken;
-
-/**
- * Helper class for implementing extractUrls.
- *
- * @author nhant01
- * @author GeorgeLuo
- */
-
-public class UrlFunctionVisitor implements RuleVisitor {
-    /**
-     * @param parsedUrls a list of urls found in css parse
-     * @param errors     to populate with css validation errors
-     */
-    public UrlFunctionVisitor(@Nonnull final List<ParsedCssUrl> parsedUrls, @Nonnull final List<ErrorToken> errors) {
-        super();
-
-        this.parsedUrls = parsedUrls;
-        this.errors = errors;
-        this.atRuleScope = "";
-    }
-
-    /**
-     * Visit an AtRule.
-     *
-     * @param atRule to visit
-     */
-    @Override
-    public void visitAtRule(@Nonnull final AtRule atRule) {
-        this.atRuleScope = atRule.getName();
-    }
-
-    /**
-     * Leave an AtRule.
-     *
-     * @param atRule AtRule to leave
-     */
-    @Override
-    public void leaveAtRule(@Nonnull final AtRule atRule) {
-        this.atRuleScope = "";
-    }
-
-    /**
-     * Visit a qualified rule.
-     *
-     * @param qualifiedRule to visit
-     */
-    @Override
-    public void visitQualifiedRule(@Nonnull final QualifiedRule qualifiedRule) {
-        this.atRuleScope = "";
-    }
-
-    /**
-     * Visit a declaration rule.
-     *
-     * @param declaration to visit
-     * @throws CssValidationException Css Validation Exception
-     */
-    public void visitDeclaration(@Nonnull final Declaration declaration) throws CssValidationException {
-        if (declaration.getValue().size() <= 0) {
-            throw new CssValidationException("Invalid declaration size");
-        }
-
-        if (getTokenType(declaration.getValue().get(declaration.getValue().size() - 1)) != TokenType.EOF_TOKEN) {
-            throw new CssValidationException("Last Token is not EOF");
-        }
-
-        for (int ii = 0; ii < declaration.getValue().size() - 1;) {
-            Token token = declaration.getValue().get(ii);
-            if (getTokenType(token) == TokenType.URL) {
-                final ParsedCssUrl parsedUrl = new ParsedCssUrl();
-                parseUrlToken(declaration.getValue(), ii, parsedUrl);
-                parsedUrl.setAtRuleScope(this.atRuleScope);
-                this.parsedUrls.add(parsedUrl);
-                ii++;
-                continue;
-            }
-            if (getTokenType(token) == TokenType.FUNCTION_TOKEN && (token).toString().equals("url(")) {
-                final ParsedCssUrl parsedUrl = new ParsedCssUrl();
-                ii = parseUrlFunction(declaration.getValue(), ii, parsedUrl);
-                if (ii == -1) {
-                    List<String> params = new ArrayList<>();
-                    params.add("style");
-                    this.errors.add((ErrorToken) copyPosTo(token, new ErrorToken(
-                            ValidatorProtos.ValidationError.Code.CSS_SYNTAX_BAD_URL, params)));
-                    return;
-                }
-                parsedUrl.setAtRuleScope(this.atRuleScope);
-                this.parsedUrls.add(parsedUrl);
-                continue;
-            }
-            // It's neither a url token nor a function token named url. So, we skip.
-            ii++;
-        }
-    }
-
-    /** AT rule scope. */
-    @Nonnull
-    private String atRuleScope;
-
-    /** List of error token. */
-    @Nonnull
-    private final List<ErrorToken> errors;
-
-    /** List of parsed css urls. */
-    @Nonnull
-    private final List<ParsedCssUrl> parsedUrls;
-}
diff --git a/validator/java/src/main/java/dev/amp/validator/visitor/package-info.java b/validator/java/src/main/java/dev/amp/validator/visitor/package-info.java
deleted file mode 100644
index f8ba6511eb9d8..0000000000000
--- a/validator/java/src/main/java/dev/amp/validator/visitor/package-info.java
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-/**
- * AMP validator exception package.
- */
-package dev.amp.validator.visitor;
\ No newline at end of file
diff --git a/validator/java/src/main/proto/validator.proto b/validator/java/src/main/proto/validator.proto
deleted file mode 100644
index 537ac08357269..0000000000000
--- a/validator/java/src/main/proto/validator.proto
+++ /dev/null
@@ -1,1015 +0,0 @@
-//
-// Copyright 2015 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.
-//
-syntax = "proto2";
-
-option java_package = "dev.amp.validator";
-option java_outer_classname = "ValidatorProtos";
-
-package amp.validator;
-
-// Used for validating attributes that require another attribute for some
-// given set of conditions.
-// E.g. attr name: "on" if_value_regex: "tap:.*" also_require_attr: "role"
-// NEXT AVAILABLE TAG: 3
-message AttrTriggerSpec {
-  // If set, attribute's value must match to also require attribute(s).
-  // If not set, attribute automatically also require attribute(s).
-  optional string if_value_regex = 1;  // case sensitive
-
-  // If set, other attributes - identified by their name string - must
-  // be present as well.
-  repeated string also_requires_attr = 2;
-}
-
-// Used for validating properties in attribute values. Our validator
-// (via parse-viewport.h) implements the parsing algorithm as described here:
-// https://drafts.csswg.org/css-device-adapt/#parsing-algorithm
-// NEXT AVAILABLE TAG: 5
-message PropertySpec {
-  // Must be lowercase, and will be matched case-insensitively.
-  optional string name = 1;
-  optional bool mandatory = 2;
-
-  // This would be a oneof, but this file only uses features in protobuf 2.5.0.
-  // begin oneof {
-
-  // Must be lowercase, and will be matched case-insensitively.
-  optional string value = 3;
-  optional double value_double = 4;
-  // } end oneof
-}
-
-// NEXT AVAILABLE TAG: 2
-message PropertySpecList {
-  repeated PropertySpec properties = 1;
-}
-
-// Used for validating urls in attribute values (such as href/src/srcset).
-// NEXT AVAILABLE TAG: 5
-message UrlSpec {
-  // protocol must be in lowercase (e.g. "javascript" not "JavaScript").
-  repeated string protocol = 1;
-  optional bool allow_relative = 2 [default = true];
-  // Whether the empty string '' is allowed for this URL value.
-  optional bool allow_empty = 3 [default = false];
-
-  // Deprecated fields, do not resuse.
-  // reserved 4;
-}
-
-// NEXT AVAILABLE TAG: 3
-message CssDeclaration {
-  // The name of the declaration (e.g. display). Use lower-case attribute names
-  // only.
-  optional string name = 1;
-  // The valid values of the declaration (e.g. block).
-  repeated string value_casei = 2;
-}
-
-// Attributes that are not covered by at least one of these specs are
-// disallowed. Within a given context (e.g., for a given TagSpec),
-// names are unique.
-// NEXT AVAILABLE TAG: 29
-message AttrSpec {
-  // If provided, the Type Identifier(s) that either enable or disable
-  // this AttrSpec. If a Type Identifier is in enabled_by then this
-  // AttrSpec will be used in validating parsed documents with that Type
-  // Identifier. If a Type Identifier is in disabled_by then this
-  // AttrSpec will not be used in validating parsed documents with that
-  // Type Identifier. An AttrSpec can not have both enabled_by and disabled_by
-  // set.
-  repeated string enabled_by = 23;
-  repeated string disabled_by = 24;
-
-  // Use lower-case attribute names only.
-  optional string name = 1;
-  repeated string alternative_names = 2;
-  optional bool mandatory = 3;
-  // Within the context of the tag, *exactly one* of the attributes tagged
-  // with this identifier must be present. Per convention, this identifier
-  // should list the tags participating in the mandatory oneof:
-  // e.g. mandatory_oneof: "['foo', 'bar']"
-  optional string mandatory_oneof = 12;
-  // Within the context of the tag, *at least one* of the attributes tagged
-  // with this identifier must be present. Per convention, this identifier
-  // should list the tags participating in the mandatory oneof:
-  // e.g. mandatory_oneof: "['foo', 'bar']"
-  optional string mandatory_anyof = 21;
-
-  // This would be a oneof, but this file only uses features in protobuf 2.5.0.
-  // begin oneof {
-
-  // If none of these are set, any value is accepted unless
-  // blacklisted_value_regex is set. Note that prior to comparing, the
-  // attributes in a given HTML document will be unescaped.
-
-  // The attribute value must be equal to the value in this field.
-  repeated string value = 4;              // case sensitive
-  repeated string value_casei = 18;       // case insensitive
-  optional string value_regex = 15;       // case sensitive
-  optional string value_regex_casei = 5;  // case insensitive
-  optional UrlSpec value_url = 14;
-  // validates against a list of properties (see PropertySpec).
-  optional PropertySpecList value_properties = 11;
-  // If set, the attribute value will be evaluated using the matching document
-  // level CSS rules. This flag is used for `style` attributes. If
-  // `value_doc_css` is set, only non-SVG css is applied. If `value_doc_css_svg`
-  // is set, SVG-specific CSS rules are also allowed for this attribute value.
-  optional bool value_doc_css = 27;
-  optional bool value_doc_svg_css = 28;
-  // } end oneof
-
-  // These two fields specify that values from one AttrSpec refer to values from
-  // another AttrSpec elsewhere on the page; validator will verify the
-  // references are not "dangling". These references may appear before or after
-  // their referents.
-  //
-  // For example, in the "id" AttrSpec in the "template" TagSpec, we have:
-  //   add_value_to_set: TEMPLATE_IDS
-  // and in any "template" AttrSpec, we have:
-  //   value_oneof_set: TEMPLATE_IDS
-  // NEXT AVAILABLE TAG: 3
-  enum ValueSet {
-    UNKNOWN_VALUESET = 0;  // Never used
-    TEMPLATE_IDS = 1;      // <template id> values
-    AMP_SCRIPT_IDS = 2;    // <script id> values, referenced by <amp-script>
-  }
-  optional ValueSet add_value_to_set = 25;
-  optional ValueSet value_oneof_set = 26;
-
-  optional AttrTriggerSpec trigger = 16;
-
-  // If set, then the attribute value may not match this regex, which is
-  // always applied case-insensitively and as a partial match.
-  optional string blacklisted_value_regex = 6;
-  // If set, generates a DEPRECATED_ATTR error with severity WARNING.
-  // The value of the deprecation field indicates what to use instead,
-  // e.g. the name of an attribute or tag.
-  optional string deprecation = 7;
-  // If provided, a URL which links to the AMP HTML spec for this deprecation.
-  optional string deprecation_url = 8;
-
-  // Valid CSS declarations.
-  repeated CssDeclaration css_declaration = 20;
-
-  enum DispatchKeyType {
-    // Indicates that the attribute does not form a dispatch key.
-    NONE_DISPATCH = 0;
-    // Indicates that the name of the attribute alone forms a dispatch key.
-    NAME_DISPATCH = 1;
-    // Indicates that the name + value of the attribute forms a dispatch key.
-    NAME_VALUE_DISPATCH = 2;
-    // Indicates that the name + value + mandatory parent forms a dispatch key.
-    NAME_VALUE_PARENT_DISPATCH = 3;
-  }
-  // If set true, the TagSpec containing this AttrSpec will be evaluated first
-  // for any encountered tag which matches the tag name and this attribute spec.
-  // May only be set for an AttrSpec where mandatory=true and type matches those
-  // specified in the comments of DispatchKeyType above.
-  optional DispatchKeyType dispatch_key = 13 [default = NONE_DISPATCH];
-
-  // If set to true, the TagSpec containing this AttrSpec implicitly has this
-  // attribute and the attribute is considered valid.
-  optional bool implicit = 17 [default = false];
-
-  // If set, this attr is considered part of an amp extended component, and
-  // requires that the named extended component script tag is present on the
-  // page.
-  repeated string requires_extension = 19;
-
-  // If set, this attr is invalid unless the current tag has an ancestor
-  // tag which set one or more of the required markers.
-  optional AncestorMarker requires_ancestor = 22;
-}
-
-// Some tags share several attributes, so they're identified by unique key
-// (see the attr_lists map in ValidatorRules).
-// NEXT AVAILABLE TAG: 3
-message AttrList {
-  optional string name = 1;
-  repeated AttrSpec attrs = 2;
-}
-
-// A list of allowed tags for descendants of any level (children, grandchildren,
-// great-grandchildren, etc).
-// NEXT AVAILABLE TAG: 3
-message DescendantTagList {
-  optional string name = 1;
-  repeated string tag = 2;
-}
-
-// Some style blocks share long lists of declarations, so they're identified by
-// unique key.
-// NEXT AVAILABLE TAG: 3
-message DeclarationList {
-  optional string name = 1;
-  repeated CssDeclaration declaration = 2;
-}
-
-// Regex which, if matches the cdata of a tag, causes the tag validation to
-// fail.
-// NEXT AVAILABLE TAG: 3
-message BlackListedCDataRegex {
-  // Syntax is partial match, use ^ and $ if you want global match.
-  optional string regex = 1;
-  optional string error_message = 2;
-}
-
-// This spec is used when parsing a media query inside a CSS @media rule.
-// NEXT AVAILABLE TAG: 5
-message MediaQuerySpec {
-  // If issues_as_error is true, then parsing errors and invalid
-  // types / features will be treated as validator errors, otherwise warnings.
-  optional bool issues_as_error = 1 [default = false];
-  // These are the media query types and features allowed within the stylesheet.
-  // http://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax
-  repeated string type = 2;
-  repeated string feature = 3;
-}
-
-// This spec is used by our CSS parser to determine what AT rules are allowed
-// in the CSS spec. The term 'rule' here refers to the AT Rule in CSS, not a
-// validation rule.
-// NEXT AVAILABLE TAG: 4
-message AtRuleSpec {
-  // Name of the AT rule to parse. Do not include the '@' symbol (e.g. '@media'
-  // should be encoded as 'media'.
-  optional string name = 1;
-
-  // A MediaQuerySpec may only be set for an AtRuleSpec with the name
-  // "media". If not set, media queries will be left unparsed, so no errors or
-  // warnings about them will be reported.
-  optional MediaQuerySpec media_query_spec = 3;
-}
-
-// NEXT AVAILABLE TAG: 9
-message CssSpec {
-  // Spec for how to parse CSS AT rules, one per AT rule. Must not contain
-  // duplicate names, and must contain at least one entry for the default.
-  repeated AtRuleSpec at_rule_spec = 1;
-
-  // Enables checks specific to the draft A4A specification.
-  // TODO(powdercloud): Make this more generic.
-  optional bool validate_amp4ads = 5;
-
-  // Enables checks specific to the style[keyframes] specification.
-  // TODO(chenshay): Make this more generic.
-  optional bool validate_keyframes = 6;
-
-  // Any declaration listed here are allowed.
-  repeated string declaration = 7;
-
-  // If fase, declarations tagged with `!important` are considered errors.
-  // Most AMP stylesheets disallow `!important` to reserve this override
-  // for AMP's own styles.
-  optional bool allow_important = 8 [default = false];
-
-  // Deprecated fields, do not reuse.
-  // reserved 3, 4;
-}
-
-// NEXT AVAILABLE TAG: 12
-message CdataSpec {
-  // If set, the cdata contents cannot be greater than this length, in bytes. A
-  // value of -2 (default) indicates that there is no limit (unlimited). A value
-  // of -1 will always cause validation failure on match. -1 is used to
-  // implement the `amp-custom-length-check` attribute:
-  // (https://github.com/ampproject/amphtml/issues/22315#issuecomment-496681165)
-  optional int32 max_bytes = 1 [default = -2];
-  // If provided, a URL which linking to a section / sentence in the
-  // AMP HTML spec.
-  optional string max_bytes_spec_url = 2;
-
-  // This would be a oneof, but this file only uses features in protobuf 2.5.0.
-  // begin oneof {
-
-  // If non-empty, the text between the start / end tag must match this value.
-  optional string mandatory_cdata = 3;
-  // If non-empty, the text between the start / end tag must match this regex.
-  optional string cdata_regex = 6;
-  // If at least one CssSpec is provided, this cdata field will be parsed
-  // as CSS3, and any parsing errors will become validation errors.
-  optional CssSpec css_spec = 7;
-  // If set to true, then only whitespace may be in the cdata contents.
-  // This is useful for script tags that reference extensions etc.
-  optional bool whitespace_only = 8;
-  // } end oneof
-
-  // If any of these regexes match, then this cdata spec does not validate.
-  repeated BlackListedCDataRegex blacklisted_cdata_regex = 4;
-
-  // If true, the contents of this tag's CDATA text will be counted against the
-  // document level DocCssSpec CSS lengths.
-  optional bool doc_css_bytes = 11;
-
-  // Deprecated fields, do not reuse.
-  // reserved 5, 9;
-}
-
-// Specifies which AMP Layouts are supported by a given element.
-// For the purpose of the validator, this specifies which
-// values for layout, height, and width attributes are allowed. Also see
-// https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md
-// TODO(johannes): Make the error messages around layouts better. This
-// may require revamping the documentation for elements and/or the above spec,
-// so that a user gets more clearly informed about which layouts are
-// applicable to a given tag, what happens when layout attribute or other
-// attributes are not set, etc.
-// NEXT AVAILABLE TAG: 4
-message AmpLayout {
-  // NEXT AVAILABLE TAG: 10
-  enum Layout {
-    UNKNOWN = 0;
-    NODISPLAY = 1;
-    FIXED = 2;
-    FIXED_HEIGHT = 3;
-    RESPONSIVE = 4;
-    CONTAINER = 5;
-    FILL = 6;
-    FLEX_ITEM = 7;
-    FLUID = 8;
-    INTRINSIC = 9;
-  }
-  // Specifies which layouts are supported by this element.
-  repeated Layout supported_layouts = 1;
-  // Specifies whether this element has default dimensions. This corresponds
-  // to being allowlisted in naturalDimensions_ in
-  // https://github.com/ampproject/amphtml/blob/master/src/layout.js.
-  optional bool defines_default_width = 2;
-  optional bool defines_default_height = 3;
-}
-
-// An AncestorMarker is a state maintained on the stack of matching tags.
-// When a TagSpec with an AncestorMarker matches, this Marker is placed on the
-// stack until the matched html tag is popped from the stack. Other rules may be
-// triggered by the presence of a specific AncestorMarker on the stack.
-// NEXT AVAILABLE TAG: 2
-message AncestorMarker {
-  // NEXT AVAILABLE TAG: 2
-  enum Marker {
-    UNKNOWN = 0;
-    // Set by <amp-sidebar> tags to allow autoscroll attributes on descendants.
-    // See https://github.com/ampproject/amphtml/pull/20524 for more context.
-    AUTOSCROLL = 1;
-  }
-  repeated Marker marker = 1;
-}
-
-// TagSpec::child_tags uses this configuration to specify which child tags
-// are expected for a specific tag.
-//
-// Matching child tags is done by tag name, while the parent is
-// matched by TagSpec. The reason for this is that matching by tag
-// spec name would produce less useful error messages, because we want
-// to be able to produce a good message even if the tag spec name
-// could not be determined because the enclosed child tag is invalid
-// (no TagSpec matches). By doing a tag name match, we can produce a
-// reasonable error regardless if a child tag was misplaced.
-// NEXT AVAILABLE TAG: 5
-message ChildTagSpec {
-  // Unless set to -1 (the default), the parent tag must have exactly
-  // |mandatory_num_child_tags| immediate child tags.
-  optional int32 mandatory_num_child_tags = 1 [default = -1];
-  // If at least one tag name is specified, then the first child of the
-  // parent tag must have one of the provided names.
-  repeated string first_child_tag_name_oneof = 2;
-  // If at least one tag name is specified, then the child tags of
-  // the parent tag must have one of the provided tag names.
-  repeated string child_tag_name_oneof = 3;
-  // Unless set to -1 (the default), the parent tag must have a minimum of
-  // |mandatory_min_num_child_tags| immediate child tags.
-  optional int32 mandatory_min_num_child_tags = 4 [default = -1];
-}
-
-// TagSpecs and reference points.
-//
-// Any TagSpec may define a list of reference points via the
-// TagSpec::reference_points field. These reference points specify how
-// DOM elements that are children of this parent tag fulfill particular
-// functionality. For instance, a widget (implemented as an AMP tag) may
-// require a login reference point. Any valid AMP tag would be allowed,
-// whether it's a clickable DIV or an AMP-IMG or a BUTTON, so long as
-// it *also* conforms to the reference point specification. This
-// specification is a TagSpec which does not define a name (the
-// name is set to the special value '$REFERENCE_POINT'), but rather
-// identifies the reference point with AttrSpec requirements. For instance,
-// the login reference point may require that there be a login attribute,
-// or some end-point attribute with a URL, or similar.
-// Therefore, for any child tags of a tag that defines reference points,
-// they are first matched against these reference points, and only
-// then are they validated as regular tags against the TagSpecs that are
-// not reference points while their reference point attributes are skipped.
-// The complexity of this mechanism is unfortunate but reduces the markup
-// required and makes CSS styling more convenient. Please see
-// the amp-live-list specification for an example.
-// NEXT AVAILABLE TAG: 4
-message ReferencePoint {
-  // A tag spec identified by its TagSpec::spec_name which specifies how
-  // a specific functionality for the parent tag is assigned.
-  optional string tag_spec_name = 1;
-  // At least one of the child tags of the parent defining this
-  // reference point must match it.
-  optional bool mandatory = 2;
-  // At most one of the child tags of the parent defining this
-  // reference point must match it.
-  optional bool unique = 3;
-}
-
-// Specs specific to AMP Extensions. This is a field within TagSpec that
-// replaces the standard tagspec list of attributes, requirements, etc.
-// NEXT AVAILABLE TAG: 9
-message ExtensionSpec {
-  // e.g. "amp-video". This is used both as the attribute value for the
-  // 'custom-element' attribute value as well as part of the 'src' attribute
-  // value.
-  optional string name = 1;
-  // e.g. "0.1", "1.0", "latest".
-  repeated string version = 2;
-  // deprecated_version must be a strict subset of version. If the version
-  // matches a deprecated_version, validation will emit a warning.
-  repeated string deprecated_version = 3;
-
-  // Most extensions are custom-elements. For custom-template extensions, this
-  // value needs to be set true. E.g: amp-mustache.
-  // NEXT AVAILABLE TAG: 4
-  enum ExtensionType {
-    UNKNOWN = 0;
-    CUSTOM_ELEMENT = 1;
-    CUSTOM_TEMPLATE = 2;
-    HOST_SERVICE = 3;
-  }
-  optional ExtensionType extension_type = 8 [default = CUSTOM_ELEMENT];
-
-  // For older tags, we did not originally require that the tag only be included
-  // once, so those tags are exempted from the multiple inclusion ban.
-  optional bool deprecated_allow_duplicates = 6 [default = false];
-
-  // TagSpec.requires_extension will be set to the new extension's name on one
-  // or more TagSpecs that require that extension. This typically creates 2
-  // validation requirements:
-  //  1) If a tag is on the page whose TagSpec has the requires_extension
-  //     field set, but that extension is not present, this is an error.
-  //     (Usage requires extension).
-  //  2) If an extension is on the page, but no tags indicating usage of that
-  //     extension via the required_extension field are on the page, this is an
-  //     error. (Extension requires usage).
-  //
-  // The second requirement (extension requires usage) has a few exceptions:
-  //   1) For older extensions, implemented before these tagspec rules, we
-  //      do not want to introduce a breaking change, so we exempt these
-  //      extensions from the usage requirement. New extensions must use ERROR.
-  //   2) Some extensions, such as `amp-dynamic-css-classes`, do not have any
-  //      associated tag in the document indicating usage. These extensions do
-  //      not trigger warnings or errors.
-  // NEXT AVAILABLE TAG: 4
-  enum ExtensionUsageRequirement {
-    ERROR = 1;
-    // Exception for exempted extensions. #1 above.
-    EXEMPTED = 2;
-    // Exception for extensions with no usage-indicating tag. #2 above.
-    NONE = 3;
-  }
-  optional ExtensionUsageRequirement requires_usage = 7 [default = ERROR];
-
-  // Deprecated fields, do not reuse.
-  // reserved 4, 5;
-}
-
-// The HtmlFormat is the declared format in the top-level html tag, which
-// prescribes a particular set of validation rules. This should be kept in sync
-// with Request.HtmlFormat in
-// github.com/ampproject/amppackager/transformer/request/request.proto.
-message HtmlFormat {
-  // NEXT AVAILABLE TAG: 6
-  enum Code {
-    UNKNOWN_CODE = 0;  // Never used
-    AMP = 1;
-    AMP4ADS = 2;
-    AMP4EMAIL = 3;
-    ACTIONS = 5;
-    EXPERIMENTAL = 4;  // Currently unused
-  }
-}
-
-// Tags that are not covered by at least one of these specs are disallowed.
-// Some tags are mandatory. Note that the tag name is not unique, that is,
-// there can be multiple tag specs covering the same name, e.g., for
-// multiple meta tags (with different attributes).
-// NEXT AVAILABLE TAG: 39
-message TagSpec {
-  // The html_format field tells the validator for which html formats
-  // (ie: (<html ⚡> vs <html a4⚡>) this HTML TagSpec is allowed to validate.
-  // The repeated field is not allowed to be empty, it must have at least one
-  // HtmlFormat.
-  repeated HtmlFormat.Code html_format = 21;
-
-  // If provided, the Type Identifier(s) that either enable or disable
-  // this TagSpec. If a Type Identifier is in `enabled_by` then this
-  // TagSpec will be used in validating parsed documents which include that Type
-  // Identifier. If a Type Identifier is in `disabled_by` then this
-  // TagSpec will not be used in validating parsed documents which include that
-  // Type Identifier. A TagSpec can not have both `enabled_by` and `disabled_by`
-  // set.
-  repeated string enabled_by = 35;
-  repeated string disabled_by = 36;
-
-  // Use UPPER-CASE tag names only. If adding the same tag twice, then they must
-  // also have a spec_name string which is unique throughout all detail.
-  // Note: "$REFERENCE_POINT" is a special tag_name value.
-  //       Reference points are partial tag specs which don't have a defined
-  //       tag_name.
-  optional string tag_name = 1;
-
-  // If provided, the spec_name must be unique within the validator
-  // rules. It will be used with preference over the tag_name in
-  // parameters for error messages and other usages that require or
-  // benefit from a unique identifier.
-  optional string spec_name = 2;
-
-  // NamedId's are used to uniquely identify specific TagSpecs in the
-  // validator rules in a stable manner. Most TagSpecs have no set NamedId.
-  // If a TagSpec has a NamedId it must be unique. In other words, no two
-  // TagSpec's may have the same NamedId except for the NOT_SET (0) value.
-  // NEXT AVAILABLE TAG: 3
-  enum NamedId {
-    NOT_SET = 0;
-    // By convention, the first "word" in the Id should be the tag_name.
-    LINK_FONT_STYLESHEET = 1;
-    STYLE_AMP_CUSTOM = 2;
-  }
-  optional NamedId named_id = 33 [default = NOT_SET];
-
-  // If provided, this is a SCRIPT tag defining an amp custom element
-  // extension. The other fields, such as expected attributes, will be
-  // validated by the extension spec rules.
-  optional ExtensionSpec extension_spec = 27;
-
-  // If set, this tag is considered part of an amp extended component, and
-  // requires that the named extended component script tag is present on the
-  // page.
-  repeated string requires_extension = 28;
-
-  // If true, a tag conforming to this tag spec must occur at least once
-  // within the document.
-  optional bool mandatory = 3;
-  // A string identifying that this tag belongs to a set of alternative
-  // choices from which at least one needs to be satisfied.
-  optional string mandatory_alternatives = 4;
-  // If true, a tag conforming to this tag spec may occur at most once within
-  // the document.
-  optional bool unique = 5;
-  // If true, a tag conforming to this tag spec should occur at most once within
-  // the document. That is, unlike for unique, we'll emit a warning.
-  optional bool unique_warning = 25;
-
-  // If set to "$ROOT", this tag must be the root tag.
-  // If set to any other string, the tag must be the direct child of the
-  //   specified mandatory parent tag.
-  optional string mandatory_parent = 6;
-  // If set, the tag must descend from (not necessarily direct parent of) the
-  // specified mandatory parent string which is either a tag name or a tag
-  // spec_name (e.g. tag.name = "!DOCTYPE" or tag.spec_name = "html doctype").
-  optional string mandatory_ancestor = 15;
-  // Use only for tags where mandatory_ancestor is set. If tag validation fails
-  // due to the mandatory_ancestor, and this field is set, then the error
-  // detail will suggest the tag specified here as an alternative to consider.
-  optional string mandatory_ancestor_suggested_alternative = 16;
-  // This tag may not descend from any tag with any of these tag names or tag
-  // spec_names (e.g. tag.name = "!DOCTYPE" or tag.spec_name = "html doctype").
-  repeated string disallowed_ancestor = 13;
-
-  // If set, all of the tag's descendants must be tags from the named list.
-  // A tag not in the named list will generate an error.
-  optional string descendant_tag_list = 29;
-
-  // If set, other tags - identified by their detail string - must be
-  // present as well or a warning will be issued (will not invalidate doc).
-  repeated string also_requires_tag_warning = 22;
-  // Expresses a generic condition which is satisfied if this tag is found. Used
-  // in combination with the `requires` attribute on a different tag.
-  repeated string satisfies = 23;
-  // Expresses a generic condition which must be satisfied if this tag is found.
-  // Used in combination with the `satisfies` attributes on a different tag.
-  repeated string requires = 24;
-  // The excludes field is a generic condition, which must not be satisfied if
-  // this tag is found. Otherwise a TAG_EXCLUDED_BY_TAG error will be generated.
-  // Used in combination with the `satisfies` attributes on a different tag.
-  repeated string excludes = 32;
-
-  // If set, generates a DEPRECATED_TAG error with severity WARNING.
-  // The value of the deprecation field indicates what to use instead,
-  // e.g. the name of a tag.
-  optional string deprecation = 17;
-  // If provided, a URL which links to the AMP HTML spec for this deprecation.
-  optional string deprecation_url = 18;
-
-  // This TagSpec will only validate against attributes explicitly
-  // listed within the TagSpec (attrs and attr_lists). No attributes
-  // from $GLOBAL_ATTRS and $AMP_LAYOUT_ATTRS are valid unless explicitly
-  // added as an attribute within the TagSpec. The field `amp_layout` is not
-  // allowed to be set when `explicit_attrs_only` is true.
-  optional bool explicit_attrs_only = 34 [default = false];
-  // Attribute specifications related to this tag.
-  repeated AttrSpec attrs = 7;
-  // Top level attr lists of shared tags, identified by unique key
-  // (see attr_lists map in ValidatorRules).
-  repeated string attr_lists = 8;
-
-  // Note that these are evaluated after a particular TagSpec
-  // has been evaluated. Unlike other checks in this TagSpec, we
-  // no longer have the ability to fall back on a different TagSpec.
-  optional CdataSpec cdata = 12;
-
-  // Specifies which tags can be the child tags, that is, immediately children
-  // of this tag in the document.
-  optional ChildTagSpec child_tags = 19;
-
-  // If set to true, this tag cannot have any siblings.
-  optional bool siblings_disallowed = 30 [default = false];
-
-  // If set to true, this tag must be the last child of its parent.
-  optional bool mandatory_last_child = 31 [default = false];
-
-  // The reference_points defined by this TagSpec instance determine how
-  // specific child tags are identified. Please see the comment for the
-  // ReferencePoint message.
-  repeated ReferencePoint reference_points = 20;
-
-  // If provided, a URL which linking to a section / sentence in the
-  // AMP HTML spec. If a TagSpec contains a requires_extension field,
-  // spec_url will be inherited from the named extension, unless overridden
-  // by the setting it here.
-  optional string spec_url = 10;
-
-  // If set, specifies which AMP Layouts are supported by this element.
-  optional AmpLayout amp_layout = 11;
-
-  // If set, triggers related validation rules for descendants of this tag.
-  optional AncestorMarker mark_descendants = 38;
-
-  // Deprecated fields, do not reuse.
-  // reserved 14, 26;
-}
-
-// Exactly one DocCssSpec will match each AMP document. This spec defines the
-// default css rules for style attributes and publisher style tags across the
-// entire document. Rules for specific tags may be overridden by those tags.
-// NEXT AVAILABLE TAG: 20
-message DocCssSpec {
-  // The html_format field tells the val:idator for which html formats
-  // (ie: (<html ⚡> vs <html a4⚡>) this CssLengthSpec is defined for.
-  repeated HtmlFormat.Code html_format = 1;
-  // If a Type Identifier is in enabled_by then this DocCssSpec will be used
-  // in validating parsed documents with that Type Identifier. If a Type
-  // identifier is in disabled_by then this DocCssSpec will not be used in
-  // validating parsed documents;: with that Type Identifier. An DocCssSpec can
-  // not have both enabled_by and disabled_by set.
-  repeated string enabled_by = 2;
-  repeated string disabled_by = 3;
-  // If provided, a URL linking to a section / sentence in the AMP HTML spec.
-  optional string spec_url = 4;
-
-  // Due to a bug, we allowed unlimited doc-level and per-inline-style bytes
-  // for CSS in non-AMP formats. To avoid breaking pages, some formats will
-  // only emit a warning for exceeding `max_bytes` and
-  // `max_bytes_per_inline_style`.
-  optional bool max_bytes_is_warning = 18 [default = false];
-  // If set, the combined style amp-custom cdata contents and all inline style
-  // contents cannot be greater than this length, in bytes. A value of -2
-  // (default) indicates that there is no limit (unlimited). A value of -1 will
-  // always cause validation failure.
-  optional int32 max_bytes = 5 [default = -2];
-  // If set, the inline style content (per use) cannot be greater than this
-  // length, in bytes.
-  optional int32 max_bytes_per_inline_style = 6 [default = -1];
-  // If false, bytes inside URLs are not included in the byte calculation for
-  // `max_bytes`. This is used for handling signed exchange transformations
-  // which can potentially take the number of bytes over the 75,000 byte limit
-  // due to rewriting URLs to point at an AMP Cache.
-  optional bool url_bytes_included = 7 [default = true];
-  // If provided, a URL linking to a section / sentence in the AMP HTML spec.
-  optional string max_bytes_spec_url = 8;
-
-  // Declaration allow-lists were added when style attribute validation was
-  // implementented. Therefore older style tags do not enforce an allow list
-  // of declarations. If true, all declarations are allowed in style tags,
-  // regardless of the contents of the `declaration` list.
-  optional bool allow_all_declaration_in_style_tag = 10 [default = false];
-  // If true, all variants of declarations that are vendor prefixes are allowed.
-  // for example, if `gradient` is an allowed declaration and this is true, then
-  // `-webkit-gradient` is also an allowed declaration.
-  optional bool expand_vendor_prefixes = 19;
-  // Any declaration listed here is allowed in custom style tags and style
-  // attributes in any tag.
-  repeated CssDeclaration declaration = 11;
-  // In addition to those listed in 'declaration', any declaration listed here
-  // is allowed in style attributes for SVG elements.
-  repeated CssDeclaration declaration_svg = 12;
-  // Top level lists of shared declarations, identified by unique key.
-  repeated string declaration_list = 13;
-  // Top level lists of shared declarations, identified by unique key.
-  repeated string declaration_list_svg = 14;
-  // URLs found within CSS are checked against this spec.
-  optional UrlSpec image_url_spec = 15;
-  optional UrlSpec font_url_spec = 16;
-  // If false, declarations tagged with `!important` are considered errors.
-  // Most AMP stylesheets disallow `!important` to reserve this override
-  // for AMP's own styles.
-  optional bool allow_important = 17 [default = false];
-}
-
-// Top level message - start reading here.
-// The validator knows about a set of tag specifications.
-// NEXT AVAILABLE TAG: 21
-message ValidatorRules {
-  repeated TagSpec tags = 1;
-  repeated AttrList attr_lists = 7;
-  // The min file revision for validator.cc which can digest this file.
-  optional int32 min_validator_revision_required = 4;
-  // See comment in validator.protoascii.
-  optional int32 spec_file_revision = 6 [default = -1];
-
-  // Spec URL for information about mustache templates.
-  optional string template_spec_url = 8;
-
-  // Spec URL for information about styles and amp-custom stylesheet
-  optional string styles_spec_url = 15;
-
-  // Spec URL for information about script tags.
-  optional string script_spec_url = 17;
-
-  repeated ErrorFormat error_formats = 9;
-  repeated ErrorSpecificity error_specificity = 13;
-
-  repeated DescendantTagList descendant_tag_list = 16;
-
-  repeated DocCssSpec css = 19;
-  repeated DeclarationList declaration_list = 20;
-
-  // Deprecated fields, do not reuse.
-  // reserved 2, 5, 11, 12, 14, 18;
-}
-
-// This feature was removed in October 2019, however there are still
-// some callers that expect an ErrorCategory to be set. Do not rely
-// on this in new code.
-// TODO(#25188): Remove ErrorCategory completely.
-message ErrorCategory {
-  enum Code { UNKNOWN = 0; }
-}
-
-// We record validation errors in a structured form, so that they can be
-// worked with in code - e.g., to provide translated messages.
-// In the Javascript implementation (validator.js), you may find
-// the amp.validator.renderErrorMessage function which will make a
-// human-readable string from the structured form. It should be easy to port
-// this to other languages as needed; for instance Google has implementations
-// in C++, Java, and for templates used in some frontends.
-// NEXT AVAILABLE TAG: 10
-message ValidationError {
-  // NEXT AVAILABLE TAG: 5
-  enum Severity {
-    UNKNOWN_SEVERITY = 0;
-    // A document with at least one error of this severity fails validation.
-    ERROR = 1;
-    // A document may have warnings and still pass validation.
-    WARNING = 4;
-    // DO NOT REASSIGN the previously used values 2, 3.
-  }
-  optional Severity severity = 6 [default = ERROR];
-  // NEXT AVAILABLE TAG: 114
-  enum Code {
-    UNKNOWN_CODE = 0;
-    INVALID_DOCTYPE_HTML = 111;
-    MANDATORY_TAG_MISSING = 1;
-    TAG_REQUIRED_BY_MISSING = 24;
-    WARNING_TAG_REQUIRED_BY_MISSING = 76;
-    TAG_EXCLUDED_BY_TAG = 101;
-    WARNING_EXTENSION_UNUSED = 79;
-    EXTENSION_UNUSED = 84;
-    WARNING_EXTENSION_DEPRECATED_VERSION = 80;
-    NON_LTS_SCRIPT_AFTER_LTS = 112;
-    LTS_SCRIPT_AFTER_NON_LTS = 113;
-    ATTR_REQUIRED_BUT_MISSING = 61;
-    DISALLOWED_TAG = 2;
-    GENERAL_DISALLOWED_TAG = 51;
-    DISALLOWED_SCRIPT_TAG = 88;
-    DISALLOWED_ATTR = 3;
-    DISALLOWED_STYLE_ATTR = 81;
-    INVALID_ATTR_VALUE = 4;
-    DUPLICATE_ATTRIBUTE = 94;
-    ATTR_VALUE_REQUIRED_BY_LAYOUT = 27;
-    MISSING_LAYOUT_ATTRIBUTES = 105;
-    IMPLIED_LAYOUT_INVALID = 22;
-    SPECIFIED_LAYOUT_INVALID = 26;
-    MANDATORY_ATTR_MISSING = 5;
-    MANDATORY_ONEOF_ATTR_MISSING = 28;
-    MANDATORY_ANYOF_ATTR_MISSING = 104;
-    DUPLICATE_DIMENSION = 60;
-    DUPLICATE_UNIQUE_TAG = 6;
-    DUPLICATE_UNIQUE_TAG_WARNING = 77;
-    WRONG_PARENT_TAG = 7;
-    STYLESHEET_TOO_LONG = 50;
-    STYLESHEET_AND_INLINE_STYLE_TOO_LONG = 102;
-    INLINE_STYLE_TOO_LONG = 103;
-    MANDATORY_CDATA_MISSING_OR_INCORRECT = 9;
-    CDATA_VIOLATES_BLACKLIST = 30;
-    NON_WHITESPACE_CDATA_ENCOUNTERED = 82;
-    INVALID_JSON_CDATA = 106;
-    DEPRECATED_ATTR = 11;
-    DEPRECATED_TAG = 12;
-    MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE = 14;
-    INVALID_PROPERTY_VALUE_IN_ATTR_VALUE = 15;
-    MISSING_URL = 35;
-    INVALID_URL = 36;
-    INVALID_URL_PROTOCOL = 37;
-    DISALLOWED_DOMAIN = 62;
-    DISALLOWED_RELATIVE_URL = 49;
-    DISALLOWED_PROPERTY_IN_ATTR_VALUE = 16;
-    MUTUALLY_EXCLUSIVE_ATTRS = 17;
-    UNESCAPED_TEMPLATE_IN_ATTR_VALUE = 18;
-    TEMPLATE_PARTIAL_IN_ATTR_VALUE = 19;
-    TEMPLATE_IN_ATTR_NAME = 20;
-    INCONSISTENT_UNITS_FOR_WIDTH_AND_HEIGHT = 21;
-    DISALLOWED_TAG_ANCESTOR = 23;
-    MANDATORY_LAST_CHILD_TAG = 89;
-    MANDATORY_TAG_ANCESTOR = 31;
-    MANDATORY_TAG_ANCESTOR_WITH_HINT = 32;
-    ATTR_DISALLOWED_BY_IMPLIED_LAYOUT = 33;
-    ATTR_DISALLOWED_BY_SPECIFIED_LAYOUT = 34;
-    INCORRECT_NUM_CHILD_TAGS = 56;
-    INCORRECT_MIN_NUM_CHILD_TAGS = 85;
-    DISALLOWED_CHILD_TAG_NAME = 57;
-    DISALLOWED_FIRST_CHILD_TAG_NAME = 58;
-    DISALLOWED_MANUFACTURED_BODY = 64;
-    CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT = 66;
-    MANDATORY_REFERENCE_POINT_MISSING = 67;
-    DUPLICATE_REFERENCE_POINT = 68;
-    TAG_NOT_ALLOWED_TO_HAVE_SIBLINGS = 87;
-    TAG_REFERENCE_POINT_CONFLICT = 69;
-    CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT_SINGULAR = 70;
-    // TODO(gregable): Fix this spelling error: 'precede'
-    BASE_TAG_MUST_PRECEED_ALL_URLS = 78;
-    MISSING_REQUIRED_EXTENSION = 83;
-    ATTR_MISSING_REQUIRED_EXTENSION = 97;
-    DOCUMENT_TOO_COMPLEX = 86;
-    INVALID_UTF8 = 96;
-    DOCUMENT_SIZE_LIMIT_EXCEEDED = 108;
-    DEV_MODE_ONLY = 109;
-    VALUE_SET_MISMATCH = 110;
-
-    CSS_SYNTAX_INVALID_AT_RULE = 29;
-    CSS_SYNTAX_STRAY_TRAILING_BACKSLASH = 38;
-    CSS_SYNTAX_UNTERMINATED_COMMENT = 39;
-    CSS_SYNTAX_UNTERMINATED_STRING = 40;
-    CSS_SYNTAX_BAD_URL = 41;
-    CSS_SYNTAX_EOF_IN_PRELUDE_OF_QUALIFIED_RULE = 42;
-    CSS_SYNTAX_INVALID_DECLARATION = 43;
-    CSS_SYNTAX_INCOMPLETE_DECLARATION = 44;
-    CSS_SYNTAX_ERROR_IN_PSEUDO_SELECTOR = 45;
-    CSS_SYNTAX_MISSING_SELECTOR = 46;
-    CSS_SYNTAX_NOT_A_SELECTOR_START = 47;
-    CSS_SYNTAX_UNPARSED_INPUT_REMAINS_IN_SELECTOR = 48;
-    CSS_SYNTAX_MISSING_URL = 52;
-    CSS_SYNTAX_INVALID_URL = 53;
-    CSS_SYNTAX_INVALID_URL_PROTOCOL = 54;
-    CSS_SYNTAX_DISALLOWED_DOMAIN = 63;
-    CSS_SYNTAX_DISALLOWED_RELATIVE_URL = 55;
-    CSS_SYNTAX_INVALID_ATTR_SELECTOR = 59;
-    CSS_SYNTAX_INVALID_PROPERTY = 90;
-    CSS_SYNTAX_INVALID_PROPERTY_NOLIST = 95;
-    CSS_SYNTAX_QUALIFIED_RULE_HAS_NO_DECLARATIONS = 91;
-    CSS_SYNTAX_DISALLOWED_QUALIFIED_RULE_MUST_BE_INSIDE_KEYFRAME = 92;
-    CSS_SYNTAX_DISALLOWED_KEYFRAME_INSIDE_KEYFRAME = 93;
-    CSS_SYNTAX_MALFORMED_MEDIA_QUERY = 98;
-    CSS_SYNTAX_DISALLOWED_MEDIA_TYPE = 99;
-    CSS_SYNTAX_DISALLOWED_MEDIA_FEATURE = 100;
-    CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE = 71;
-    CSS_EXCESSIVELY_NESTED = 107;
-
-    // The following codes are currently used only by A4A CSS validation.
-    CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE_WITH_HINT = 72;
-    CSS_SYNTAX_PROPERTY_DISALLOWED_WITHIN_AT_RULE = 73;
-    CSS_SYNTAX_PROPERTY_DISALLOWED_TOGETHER_WITH = 74;
-    CSS_SYNTAX_PROPERTY_REQUIRES_QUALIFICATION = 75;
-
-    // Deprecated fields, do not reuse.
-    // reserved 13;
-  }
-  optional Code code = 1;
-  optional int32 line = 2 [default = 1];
-  optional int32 col = 3;
-  optional string spec_url = 5;
-  repeated string params = 7;
-  // This field is deprecated. Do not use.
-  optional ErrorCategory.Code category = 8;
-
-  // Used only in JavaScript, if an error is emitted for a specific HTML tag and
-  // if that HTML tag has an attribute named data-amp-report-test, this string
-  // will be set and contain the value found for that attribute. This is used
-  // in tests to match specific errors to specific tags in the test cases. It
-  // is not a rendered value.
-  optional string data_amp_report_test_value = 9;
-
-  // Deprecated fields, do not reuse.
-  // reserved 4;
-}
-
-// Used in the verbose validator to select between multiple generated error
-// types for a failing error. A higher number means that the error is more
-// specific, ie: more helpful, preferred.
-// NEXT AVAILABLE TAG: 3
-message ErrorSpecificity {
-  optional ValidationError.Code code = 1;
-  optional int32 specificity = 2;
-}
-
-// NEXT AVAILABLE TAG: 3
-message ErrorFormat {
-  optional ValidationError.Code code = 1;
-  optional string format = 2;
-}
-
-// A value to be added to a particular ValueSet, as found when scanning the
-// document (i.e. AttrSpec.add_value_to_set).
-// NEXT AVAILABLE TAG: 3
-message ValueSetProvision {
-  // The collection to add the attribute value to.
-  optional AttrSpec.ValueSet set = 1;
-  // The value of the attribute itself.
-  optional string value = 2;
-}
-// A requirement that a particular value appears in a particular ValueSet (i.e.
-// AttrSpec.value_oneof_set). All the provisions and requirements are collected
-// until the document has been fully scanned, and then compared to ensure that
-// all requirements are met. This allows provisions to appear after (or even
-// alongside) requirements.
-// NEXT AVAILABLE TAG: 3
-message ValueSetRequirement {
-  // The provision that is required.
-  optional ValueSetProvision provision = 1;
-  // The error that will appear if the requirement is not met. This includes the
-  // line/col of the attribute that makes the requirement.
-  optional ValidationError error_if_unsatisfied = 2;
-}
-
-// The validation result provided by Validator instances (see Validator::Result
-// in validator.h). To render such a proto see RenderValidationResult.
-// NEXT AVAILABLE TAG: 9
-message ValidationResult {
-  // NEXT AVAILABLE TAG: 3
-  enum Status {
-    UNKNOWN = 0;
-    PASS = 1;
-    FAIL = 2;
-  }
-  optional Status status = 2;
-  repeated ValidationError errors = 1;
-  optional int32 validator_revision = 3 [default = -1];
-  optional int32 spec_file_revision = 4 [default = -1];
-  // If the AMP document is a transformed AMP document, then this is the
-  // version of the transformers that were used to transform it. If the document
-  // is not transformed, then the transformer_version's value will be 0.
-  // Note: the AMP Pacakager's transformer library specifies the version as
-  // int64. However, JavaScript does not natively support int64 so int32 is
-  // used instead.
-  // https://github.com/ampproject/amppackager/blob/master/transformer/transformers/context.go
-  optional int32 transformer_version = 6 [default = 0];
-  // The type idenfitier of the parsed document, e.g. AMP, AMP4ADS or some other
-  // type that has yet to be defined. These are declared on the HTML tag and
-  // parsed by the Validator Engine.
-  repeated string type_identifier = 5;
-  // The set of provisions from all matching AttrSpecs in this TagSpec match.
-  // If the TagSpec is selected, these will be added to the final set of
-  // provisions.
-  repeated ValueSetProvision value_set_provisions = 7;
-  // The set of requirements from all matching AttrSpecs in this TagSpec match.
-  // If the TagSpec is selected, these will be added to the final set of
-  // requirements.
-  repeated ValueSetRequirement value_set_requirements = 8;
-}
-
-// Information about the validator returned by ValidatorFactory
-// (see validator.h).
-// NEXT AVAILABLE TAG: 4
-message ValidatorInfo {
-  // Path from which the spec file was loaded.
-  optional string rules_path = 1;
-  // The file revision of validator.cc.
-  optional int32 validator_revision = 2 [default = -1];
-  // The file revision of the spec file (validator.protoascii).
-  optional int32 spec_file_revision = 3 [default = -1];
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/AMPHtmlHandlerTest.java b/validator/java/src/test/java/dev/amp/validator/AMPHtmlHandlerTest.java
deleted file mode 100644
index daa0b53c16c6c..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/AMPHtmlHandlerTest.java
+++ /dev/null
@@ -1,122 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import org.testng.Assert;
-import org.testng.annotations.BeforeMethod;
-import org.testng.annotations.Test;
-import org.xml.sax.Attributes;
-import org.xml.sax.Locator;
-import org.xml.sax.SAXException;
-
-import java.io.IOException;
-import java.net.URISyntaxException;
-
-import static org.mockito.Mockito.mock;
-import static org.mockito.Mockito.when;
-
-/**
- * Test for {@link AMPHtmlHandler}
- *
- * @author sphatak01
- */
-public class AMPHtmlHandlerTest {
-
-    @BeforeMethod
-    public void setUp() throws IOException, URISyntaxException {
-        ampValidatorManager = new AMPValidatorManager();
-        ampValidatorManager.loadRule();
-    }
-
-    /**
-     * start document must set state status to UNKNOWN.
-     *
-     * @throws SAXException Sax exception.
-     */
-    @Test
-    public void testStartDocument() throws SAXException {
-        final AMPHtmlHandler handler = new AMPHtmlHandler(ampValidatorManager,
-                ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING,
-                MAX_NODES_ALLOWED);
-
-        handler.startDocument();
-
-        Assert.assertEquals(handler.validationResult().getStatus(), ValidatorProtos.ValidationResult.Status.UNKNOWN);
-    }
-
-    /**
-     *
-     */
-    @Test
-    public void testStartElement() throws SAXException {
-        final AMPHtmlHandler handler = new AMPHtmlHandler(ampValidatorManager,
-                ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING,
-                MAX_NODES_ALLOWED);
-
-        final String uri = "";
-        final Attributes attrs = mock(Attributes.class);
-        when(attrs.getLocalName(0)).thenReturn("height");
-        handler.setDocumentLocator(new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pub_id";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sys_id";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 2;
-            }
-        });
-        handler.startElement(uri, "html", "", attrs);
-    }
-
-    @Test
-    public void testEndElement() {
-    }
-
-    @Test
-    public void testSetDocumentLocator() {
-    }
-
-    @Test
-    public void testValidationResult() {
-    }
-
-    @Test
-    public void testEmitMissingExtensionErrors() {
-    }
-
-    /** AMPValidatorManager object. */
-    private AMPValidatorManager ampValidatorManager;
-
-    private static final int MAX_NODES_ALLOWED = 50;
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/AMPValidatorManagerTest.java b/validator/java/src/test/java/dev/amp/validator/AMPValidatorManagerTest.java
deleted file mode 100644
index 422837d1ebafa..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/AMPValidatorManagerTest.java
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import org.testng.Assert;
-import org.testng.annotations.BeforeClass;
-import org.testng.annotations.Test;
-
-import java.util.List;
-
-/**
- * This class tests {@code AMPValidatorManagerTest}.
- *
- * @author nhant01
- *
- */
-
-public class AMPValidatorManagerTest {
-    /**
-     * Initialization method to load the rules.
-     *
-     * @throws Exception if fails to load the rules.
-     */
-    @BeforeClass
-    public void init() throws Exception {
-        ampValidatorManager = new AMPValidatorManager();
-        ampValidatorManager.loadRule();
-    }
-
-    /**
-     * Validating if a tag exists for a given specific HtmlFormat type.
-     */
-    @Test
-    public void testHasTagSpec() {
-        boolean hasTag = ampValidatorManager.hasTagSpec(ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, "H");
-        Assert.assertFalse(hasTag, "AMP4EMAIL html format should not contain H tag");
-
-        hasTag = ampValidatorManager.hasTagSpec(ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, "A");
-        Assert.assertTrue(hasTag, "AMP4EMAIL html format should contain A tag");
-    }
-
-    /**
-     * Validating to ensure a list of tag returns if exists for given a specific HtmlFormat type.
-     */
-    @Test
-    public void testGetTagSpec() {
-        List<ValidatorProtos.TagSpec> tagSpec = ampValidatorManager.getTagSpec(ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, "H");
-        Assert.assertNull(tagSpec, "AMP4EMAIL html format should not contain H tag");
-
-        tagSpec = ampValidatorManager.getTagSpec(ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, "STYLE");
-        Assert.assertNotNull(tagSpec, "AMP4EMAIL html format should contain STYLE tag");
-        Assert.assertEquals(tagSpec.size(), 3, "AMP4EMAIL htmlformat contains STYLE tag with size 2");
-    }
-
-    /** AMPValidatorManager object. */
-    private AMPValidatorManager ampValidatorManager;
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/CdataMatcherTest.java b/validator/java/src/test/java/dev/amp/validator/CdataMatcherTest.java
deleted file mode 100644
index 79f0600dff0d9..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/CdataMatcherTest.java
+++ /dev/null
@@ -1,731 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.exception.TagValidationException;
-import org.mockito.ArgumentCaptor;
-import org.mockito.Mockito;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-import org.xml.sax.Locator;
-
-import java.io.IOException;
-import java.util.List;
-import java.util.regex.Pattern;
-
-/**
- * Tests for {@link CdataMatcher}
- *
- * @author sphatak01
- */
-public class CdataMatcherTest {
-
-    @Test
-    public void testMatchStylesheetTooLong() throws TagValidationException, CssValidationException, IOException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecName("title");
-
-        final ValidatorProtos.CdataSpec.Builder cDataBuilder = ValidatorProtos.CdataSpec.newBuilder();
-        cDataBuilder.setMaxBytes(2);
-
-        tagSpecBuilder.setCdata(cDataBuilder.build());
-
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId1";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 24;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 35;
-            }
-        };
-
-        final Context mockContext = Mockito.mock(Context.class);
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        final CdataMatcher cDataMatcher = new CdataMatcher(mockParsedTagSpec, locator);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        cDataMatcher.match("cdata1", mockContext, result);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 2);
-        Assert.assertEquals(params.get(0), "6");
-        Assert.assertEquals(params.get(1), "2");
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.STYLESHEET_TOO_LONG);
-
-    }
-
-    @Test
-    public void testMatchMandatoryCDataMissing() throws TagValidationException, CssValidationException, IOException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecName("title");
-
-        final ValidatorProtos.CdataSpec.Builder cDataBuilder = ValidatorProtos.CdataSpec.newBuilder();
-        cDataBuilder.setMaxBytes(6);
-        cDataBuilder.setMandatoryCdata("manCdata");
-
-        tagSpecBuilder.setCdata(cDataBuilder.build());
-
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId1";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 24;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 35;
-            }
-        };
-
-        final Context mockContext = Mockito.mock(Context.class);
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        final CdataMatcher cDataMatcher = new CdataMatcher(mockParsedTagSpec, locator);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        cDataMatcher.match("cdata1", mockContext, result);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 1);
-        Assert.assertEquals(params.get(0), "title");
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.MANDATORY_CDATA_MISSING_OR_INCORRECT);
-
-    }
-
-    @Test
-    public void testMatchExactMatch() throws TagValidationException, CssValidationException, IOException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecName("title");
-
-        final ValidatorProtos.CdataSpec.Builder cDataBuilder = ValidatorProtos.CdataSpec.newBuilder();
-        cDataBuilder.setMaxBytes(6);
-        cDataBuilder.setCdataRegex("cdata");
-
-        tagSpecBuilder.setCdata(cDataBuilder.build());
-
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId1";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 24;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 35;
-            }
-        };
-
-        final Context mockContext = Mockito.mock(Context.class);
-        final ParsedValidatorRules mockParsedValidatorRules = Mockito.mock(ParsedValidatorRules.class);
-        String fullMatchRegex = "cdata";
-        Pattern pattern = Pattern.compile(fullMatchRegex);
-
-        Mockito.when(mockParsedValidatorRules.getFullMatchRegex(Mockito.anyString())).thenReturn(pattern);
-        Mockito.when(mockContext.getRules()).thenReturn(mockParsedValidatorRules);
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        final CdataMatcher cDataMatcher = new CdataMatcher(mockParsedTagSpec, locator);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        cDataMatcher.match("cdata1", mockContext, result);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 1);
-        Assert.assertEquals(params.get(0), "title");
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.MANDATORY_CDATA_MISSING_OR_INCORRECT);
-
-    }
-
-    @Test
-    public void testMatchCssSpec() throws TagValidationException, CssValidationException, IOException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecName("title");
-
-        final ValidatorProtos.CdataSpec.Builder cDataBuilder = ValidatorProtos.CdataSpec.newBuilder();
-        cDataBuilder.setMaxBytes(6);
-        cDataBuilder.setCssSpec(ValidatorProtos.CssSpec.newBuilder()
-                .addAtRuleSpec(ValidatorProtos.AtRuleSpec.newBuilder()
-                  .setName("font-face").build()).build());
-
-        tagSpecBuilder.setCdata(cDataBuilder.build());
-
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId1";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 24;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 35;
-            }
-        };
-
-        final Context mockContext = Mockito.mock(Context.class);
-        Mockito.when(mockContext.getLineCol()).thenReturn(locator);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ParsedValidatorRules mockParsedValidatorRules = Mockito.mock(ParsedValidatorRules.class);
-        String fullMatchRegex = "cdata";
-        Pattern pattern = Pattern.compile(fullMatchRegex);
-
-        Mockito.when(mockParsedValidatorRules.getFullMatchRegex(Mockito.anyString())).thenReturn(pattern);
-        Mockito.when(mockContext.getRules()).thenReturn(mockParsedValidatorRules);
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        final CdataMatcher cDataMatcher = new CdataMatcher(mockParsedTagSpec, locator);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        cDataMatcher.match("cdata1", mockContext, result);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.anyInt(),
-                        Mockito.anyInt(),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 1);
-        Assert.assertEquals(params.get(0), "title");
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.CSS_SYNTAX_EOF_IN_PRELUDE_OF_QUALIFIED_RULE);
-
-    }
-
-    @Test
-    public void testMatchWhitespaceOnly() throws TagValidationException, CssValidationException, IOException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecName("title");
-
-        final ValidatorProtos.CdataSpec.Builder cDataBuilder = ValidatorProtos.CdataSpec.newBuilder();
-        cDataBuilder.setMaxBytes(6);
-        cDataBuilder.setWhitespaceOnly(true);
-
-        tagSpecBuilder.setCdata(cDataBuilder.build());
-
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId1";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 24;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 35;
-            }
-        };
-
-        final Context mockContext = Mockito.mock(Context.class);
-        Mockito.when(mockContext.getLineCol()).thenReturn(locator);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ParsedValidatorRules mockParsedValidatorRules = Mockito.mock(ParsedValidatorRules.class);
-        String fullMatchRegex = "cdata";
-        Pattern pattern = Pattern.compile(fullMatchRegex);
-
-        Mockito.when(mockParsedValidatorRules.getFullMatchRegex(Mockito.anyString())).thenReturn(pattern);
-        Mockito.when(mockContext.getRules()).thenReturn(mockParsedValidatorRules);
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        final CdataMatcher cDataMatcher = new CdataMatcher(mockParsedTagSpec, locator);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        cDataMatcher.match("cdata1", mockContext, result);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 1);
-        Assert.assertEquals(params.get(0), "title");
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.NON_WHITESPACE_CDATA_ENCOUNTERED);
-
-    }
-
-    @Test
-    public void testMatchViolateBlacklist() throws TagValidationException, CssValidationException, IOException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecName("title");
-
-        final ValidatorProtos.CdataSpec.Builder cDataBuilder = ValidatorProtos.CdataSpec.newBuilder();
-        cDataBuilder.setMaxBytes(6);
-        cDataBuilder.addBlacklistedCdataRegex(ValidatorProtos.BlackListedCDataRegex.newBuilder().setRegex("cdata").build());
-
-        tagSpecBuilder.setCdata(cDataBuilder.build());
-
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId1";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 24;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 35;
-            }
-        };
-
-        final Context mockContext = Mockito.mock(Context.class);
-        Mockito.when(mockContext.getLineCol()).thenReturn(locator);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ParsedValidatorRules mockParsedValidatorRules = Mockito.mock(ParsedValidatorRules.class);
-        Mockito.when(mockParsedValidatorRules.getCombinedBlacklistedCdataRegex(Mockito.anyInt())).thenReturn("cdata");
-        String partialMatchRegex = "cdata";
-        Pattern pattern = Pattern.compile(partialMatchRegex);
-
-        Mockito.when(mockParsedValidatorRules.getPartialMatchCaseiRegex(Mockito.anyString())).thenReturn(pattern);
-        Mockito.when(mockContext.getRules()).thenReturn(mockParsedValidatorRules);
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        final CdataMatcher cDataMatcher = new CdataMatcher(mockParsedTagSpec, locator);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        cDataMatcher.match("cdata1", mockContext, result);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 2);
-        Assert.assertEquals(params.get(0), "title");
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.CDATA_VIOLATES_BLACKLIST);
-
-    }
-
-    @Test
-    public void testMatchPartialMatch() throws TagValidationException, CssValidationException, IOException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecName("title");
-
-        final ValidatorProtos.CdataSpec.Builder cDataBuilder = ValidatorProtos.CdataSpec.newBuilder();
-        cDataBuilder.setMaxBytes(6);
-        cDataBuilder.addBlacklistedCdataRegex(ValidatorProtos.BlackListedCDataRegex.newBuilder().setRegex("cdata1").build());
-
-        tagSpecBuilder.setCdata(cDataBuilder.build());
-
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId1";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 24;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 35;
-            }
-        };
-
-        final Context mockContext = Mockito.mock(Context.class);
-        Mockito.when(mockContext.getLineCol()).thenReturn(locator);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ParsedValidatorRules mockParsedValidatorRules = Mockito.mock(ParsedValidatorRules.class);
-        Mockito.when(mockParsedValidatorRules.getCombinedBlacklistedCdataRegex(Mockito.anyInt())).thenReturn("xyz");
-        String partialMatchRegex = "[0-9]";
-        Pattern pattern = Pattern.compile(partialMatchRegex);
-
-        Mockito.when(mockParsedValidatorRules.getPartialMatchCaseiRegex(Mockito.anyString())).thenReturn(pattern);
-        Mockito.when(mockContext.getRules()).thenReturn(mockParsedValidatorRules);
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        final CdataMatcher cDataMatcher = new CdataMatcher(mockParsedTagSpec, locator);
-
-        cDataMatcher.match("cdata", mockContext, result);
-
-        Mockito.verify(mockContext, Mockito.times(0))
-                .addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                        Mockito.any(Locator.class),
-                        Mockito.anyListOf(String.class),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-    }
-
-    @Test(expectedExceptions = CssValidationException.class, expectedExceptionsMessageRegExp = "atRuleSpec name is not 'media'")
-    public void testMatchCssNotMedia() throws TagValidationException, CssValidationException, IOException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecName("title");
-
-        final ValidatorProtos.CdataSpec.Builder cDataBuilder = ValidatorProtos.CdataSpec.newBuilder();
-        cDataBuilder.setMaxBytes(6);
-        cDataBuilder.addBlacklistedCdataRegex(ValidatorProtos.BlackListedCDataRegex.newBuilder().setRegex("cdata1").build());
-        cDataBuilder.setCssSpec(ValidatorProtos.CssSpec.newBuilder()
-                .addAtRuleSpec(ValidatorProtos.AtRuleSpec.newBuilder()
-                        .setName("font-face").setMediaQuerySpec(ValidatorProtos.MediaQuerySpec.newBuilder()
-                                .build()).build()).build());
-
-                    tagSpecBuilder.setCdata(cDataBuilder.build());
-
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId1";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 24;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 35;
-            }
-        };
-
-        final Context mockContext = Mockito.mock(Context.class);
-        Mockito.when(mockContext.getLineCol()).thenReturn(locator);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ParsedValidatorRules mockParsedValidatorRules = Mockito.mock(ParsedValidatorRules.class);
-        Mockito.when(mockParsedValidatorRules.getCombinedBlacklistedCdataRegex(Mockito.anyInt())).thenReturn("xyz");
-        String partialMatchRegex = "[0-9]";
-        Pattern pattern = Pattern.compile(partialMatchRegex);
-
-        Mockito.when(mockParsedValidatorRules.getPartialMatchCaseiRegex(Mockito.anyString())).thenReturn(pattern);
-        Mockito.when(mockContext.getRules()).thenReturn(mockParsedValidatorRules);
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        final CdataMatcher cDataMatcher = new CdataMatcher(mockParsedTagSpec, locator);
-
-        cDataMatcher.match("cdata", mockContext, result);
-
-        Mockito.verify(mockContext, Mockito.times(0))
-                .addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                        Mockito.any(Locator.class),
-                        Mockito.anyListOf(String.class),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-    }
-
-    @Test
-    public void testMatchCssMediaErrors() throws CssValidationException, IOException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecName("title");
-
-        final ValidatorProtos.CssSpec cssSpec = ValidatorProtos.CssSpec.newBuilder()
-                .addAtRuleSpec(ValidatorProtos.AtRuleSpec.newBuilder()
-                        .setName("media").setMediaQuerySpec(ValidatorProtos.MediaQuerySpec.newBuilder().setIssuesAsError(true)
-                                .build()).build())
-                .setValidateAmp4Ads(true).setValidateKeyframes(true).build();
-        final ValidatorProtos.CdataSpec.Builder cDataBuilder = ValidatorProtos.CdataSpec.newBuilder();
-        cDataBuilder.setMaxBytes(6);
-        cDataBuilder.addBlacklistedCdataRegex(ValidatorProtos.BlackListedCDataRegex.newBuilder().setRegex("cdata1").build());
-        cDataBuilder.setCssSpec(cssSpec);
-        tagSpecBuilder.setCdata(cDataBuilder.build());
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId1";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 24;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 35;
-            }
-        };
-
-        final Context mockContext = Mockito.mock(Context.class);
-        Mockito.when(mockContext.getLineCol()).thenReturn(locator);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ParsedValidatorRules mockParsedValidatorRules = Mockito.mock(ParsedValidatorRules.class);
-        Mockito.when(mockParsedValidatorRules.getCombinedBlacklistedCdataRegex(Mockito.anyInt())).thenReturn("xyz");
-        String partialMatchRegex = "[0-9]";
-        Pattern pattern = Pattern.compile(partialMatchRegex);
-
-        Mockito.when(mockParsedValidatorRules.getPartialMatchCaseiRegex(Mockito.anyString())).thenReturn(pattern);
-        Mockito.when(mockContext.getRules()).thenReturn(mockParsedValidatorRules);
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        final CdataMatcher cDataMatcher = new CdataMatcher(mockParsedTagSpec, locator);
-
-        cDataMatcher.matchCss("cdata", cssSpec, mockContext, result);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.anyInt(),
-                        Mockito.anyInt(),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 1);
-        Assert.assertEquals(params.get(0), "title");
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.CSS_SYNTAX_EOF_IN_PRELUDE_OF_QUALIFIED_RULE);
-
-    }
-
-    @Test
-    public void testMatchCssMediaWarnings() throws CssValidationException, IOException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecName("title");
-
-        final ValidatorProtos.CssSpec cssSpec = ValidatorProtos.CssSpec.newBuilder()
-                .addAtRuleSpec(ValidatorProtos.AtRuleSpec.newBuilder()
-                        .setName("media").setMediaQuerySpec(ValidatorProtos.MediaQuerySpec.newBuilder().setIssuesAsError(false)
-                    .build()).build())
-                .setValidateAmp4Ads(false).setValidateKeyframes(false).build();
-        final ValidatorProtos.CdataSpec.Builder cDataBuilder = ValidatorProtos.CdataSpec.newBuilder();
-        cDataBuilder.setMaxBytes(6);
-        cDataBuilder.addBlacklistedCdataRegex(ValidatorProtos.BlackListedCDataRegex.newBuilder().setRegex("cdata1").build());
-        cDataBuilder.setCssSpec(cssSpec);
-        tagSpecBuilder.setCdata(cDataBuilder.build());
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId1";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 24;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 35;
-            }
-        };
-
-        final Context mockContext = Mockito.mock(Context.class);
-        Mockito.when(mockContext.getLineCol()).thenReturn(locator);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ParsedValidatorRules mockParsedValidatorRules = Mockito.mock(ParsedValidatorRules.class);
-        Mockito.when(mockParsedValidatorRules.getCombinedBlacklistedCdataRegex(Mockito.anyInt())).thenReturn("xyz");
-        String partialMatchRegex = "[0-9]";
-        Pattern pattern = Pattern.compile(partialMatchRegex);
-
-        Mockito.when(mockParsedValidatorRules.getPartialMatchCaseiRegex(Mockito.anyString())).thenReturn(pattern);
-        Mockito.when(mockContext.getRules()).thenReturn(mockParsedValidatorRules);
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        final CdataMatcher cDataMatcher = new CdataMatcher(mockParsedTagSpec, locator);
-
-        cDataMatcher.matchCss("cdata", cssSpec, mockContext, result);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.anyInt(),
-                        Mockito.anyInt(),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 1);
-        Assert.assertEquals(params.get(0), "title");
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.CSS_SYNTAX_EOF_IN_PRELUDE_OF_QUALIFIED_RULE);
-
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/ChildTagMatcherTest.java b/validator/java/src/test/java/dev/amp/validator/ChildTagMatcherTest.java
deleted file mode 100644
index f157a337578cc..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ChildTagMatcherTest.java
+++ /dev/null
@@ -1,267 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.exception.TagValidationException;
-import org.mockito.ArgumentCaptor;
-import org.mockito.Mockito;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-import org.xml.sax.Locator;
-
-import java.util.List;
-
-/**
- * Tests for {@link ChildTagMatcher}
- *
- * @author sphatak01
- */
-public class ChildTagMatcherTest {
-
-    @Test(expectedExceptions = TagValidationException.class)
-    public void testConstructorError() throws TagValidationException {
-        new ChildTagMatcher(ValidatorProtos.TagSpec.newBuilder().build());
-    }
-
-    @Test
-    public void testMatchChildTagNameNoError() throws TagValidationException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-
-        final ParsedHtmlTag parsedHtmlTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(parsedHtmlTag.upperName()).thenReturn("CHILDNOTONEOF");
-        Mockito.when(parsedHtmlTag.lowerName()).thenReturn("childnotoneof");
-
-        final ValidatorProtos.ChildTagSpec.Builder childSpecBuilder = ValidatorProtos.ChildTagSpec.newBuilder();
-        tagSpecBuilder.setChildTags(childSpecBuilder.build());
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-
-        final ChildTagMatcher childTagMatcher = new ChildTagMatcher(tagSpec);
-
-        final Context mockContext = Mockito.mock(Context.class);
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-
-        childTagMatcher.matchChildTagName(parsedHtmlTag, mockContext, resultBuilder);
-
-        Mockito.verify(mockContext, Mockito.times(0))
-                .addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                        Mockito.any(Locator.class),
-                        Mockito.anyListOf(String.class),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-    }
-
-    @Test
-    public void testMatchChildTagName() throws TagValidationException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        final ValidatorProtos.ChildTagSpec.Builder childSpecBuilder = ValidatorProtos.ChildTagSpec.newBuilder();
-        childSpecBuilder.addChildTagNameOneof("CHILDONEOF");
-
-        final ParsedHtmlTag parsedHtmlTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(parsedHtmlTag.upperName()).thenReturn("CHILDNOTONEOF");
-        Mockito.when(parsedHtmlTag.lowerName()).thenReturn("childnotoneof");
-
-        tagSpecBuilder.setChildTags(childSpecBuilder.build());
-        tagSpecBuilder.setSpecName("spec1");
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-
-        final ChildTagMatcher childTagMatcher = new ChildTagMatcher(tagSpec);
-
-        final Context mockContext = Mockito.mock(Context.class);
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        childTagMatcher.matchChildTagName(parsedHtmlTag, mockContext, resultBuilder);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.get(0), "childnotoneof");
-        Assert.assertEquals(params.get(1), "spec1");
-        Assert.assertEquals(params.get(2), "['childoneof']");
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.DISALLOWED_CHILD_TAG_NAME);
-    }
-
-    @Test
-    public void testMatchChildTagFirstChildTag() throws TagValidationException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        final ValidatorProtos.ChildTagSpec.Builder childSpecBuilder = ValidatorProtos.ChildTagSpec.newBuilder();
-        childSpecBuilder.addChildTagNameOneof("CHILDONEOF");
-        childSpecBuilder.addFirstChildTagNameOneof("FIRSTCHILDONEOF");
-
-        final ParsedHtmlTag parsedHtmlTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(parsedHtmlTag.upperName()).thenReturn("CHILDONEOF");
-        Mockito.when(parsedHtmlTag.lowerName()).thenReturn("childoneof");
-
-        tagSpecBuilder.setChildTags(childSpecBuilder.build());
-        tagSpecBuilder.setSpecName("spec1");
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-
-        final ChildTagMatcher childTagMatcher = new ChildTagMatcher(tagSpec);
-
-        final Context mockContext = Mockito.mock(Context.class);
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentChildCount()).thenReturn(0);
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-
-        childTagMatcher.matchChildTagName(parsedHtmlTag, mockContext, resultBuilder);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.get(0), "childoneof");
-        Assert.assertEquals(params.get(1), "spec1");
-        Assert.assertEquals(params.get(2), "['firstchildoneof']");
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.DISALLOWED_FIRST_CHILD_TAG_NAME);
-    }
-
-    @Test
-    public void testExitTagSuccess() throws TagValidationException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        final ValidatorProtos.ChildTagSpec.Builder childSpecBuilder = ValidatorProtos.ChildTagSpec.newBuilder();
-        childSpecBuilder.addChildTagNameOneof("CHILDONEOF");
-        childSpecBuilder.addFirstChildTagNameOneof("FIRSTCHILDONEOF");
-
-        tagSpecBuilder.setChildTags(childSpecBuilder.setMandatoryNumChildTags(1).setMandatoryMinNumChildTags(1).build());
-        tagSpecBuilder.setSpecName("spec1");
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-
-        final ChildTagMatcher childTagMatcher = new ChildTagMatcher(tagSpec);
-
-        final Context mockContext = Mockito.mock(Context.class);
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentChildCount()).thenReturn(1);
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-        childTagMatcher.exitTag(mockContext, resultBuilder);
-
-        Mockito.verify(mockContext, Mockito.times(0))
-                .addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                        Mockito.any(Locator.class),
-                        Mockito.anyListOf(String.class),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-    }
-
-    @Test
-    public void testExitTagExpectedChildTags() throws TagValidationException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        final ValidatorProtos.ChildTagSpec.Builder childSpecBuilder = ValidatorProtos.ChildTagSpec.newBuilder();
-        childSpecBuilder.addChildTagNameOneof("CHILDONEOF");
-        childSpecBuilder.addFirstChildTagNameOneof("FIRSTCHILDONEOF");
-
-        tagSpecBuilder.setChildTags(childSpecBuilder.setMandatoryNumChildTags(1).build());
-        tagSpecBuilder.setSpecName("spec1");
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-
-        final ChildTagMatcher childTagMatcher = new ChildTagMatcher(tagSpec);
-
-        final Context mockContext = Mockito.mock(Context.class);
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentChildCount()).thenReturn(0);
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        childTagMatcher.exitTag(mockContext, resultBuilder);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.get(0), "spec1");
-        Assert.assertEquals(params.get(1), "1");
-        Assert.assertEquals(params.get(2), "0");
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.INCORRECT_NUM_CHILD_TAGS);
-    }
-
-    @Test
-    public void testExitTagExpectedMinChildTags() throws TagValidationException {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        final ValidatorProtos.ChildTagSpec.Builder childSpecBuilder = ValidatorProtos.ChildTagSpec.newBuilder();
-        childSpecBuilder.addChildTagNameOneof("CHILDONEOF");
-        childSpecBuilder.addFirstChildTagNameOneof("FIRSTCHILDONEOF");
-
-        tagSpecBuilder.setChildTags(childSpecBuilder.setMandatoryMinNumChildTags(1).build());
-        tagSpecBuilder.setSpecName("spec1");
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-
-        final ChildTagMatcher childTagMatcher = new ChildTagMatcher(tagSpec);
-
-        final Context mockContext = Mockito.mock(Context.class);
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentChildCount()).thenReturn(0);
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        childTagMatcher.exitTag(mockContext, resultBuilder);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.get(0), "spec1");
-        Assert.assertEquals(params.get(1), "1");
-        Assert.assertEquals(params.get(2), "0");
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.INCORRECT_MIN_NUM_CHILD_TAGS);
-    }
-
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/ContextTest.java b/validator/java/src/test/java/dev/amp/validator/ContextTest.java
deleted file mode 100644
index ccadc25e5b993..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ContextTest.java
+++ /dev/null
@@ -1,318 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.exception.TagValidationException;
-import org.testng.Assert;
-import org.testng.annotations.BeforeClass;
-import org.testng.annotations.Test;
-import org.xml.sax.Locator;
-
-import java.util.Collections;
-
-import static org.mockito.Mockito.mock;
-import static org.mockito.Mockito.when;
-
-/**
- * Test class for {@link Context}
- *
- * @author sphatak01
- */
-public class ContextTest {
-
-    /**
-     * Initialize.
-     */
-    @BeforeClass
-    public void init() throws Exception {
-        ampValidatorManager = new AMPValidatorManager();
-        ampValidatorManager.loadRule("validator-all-test.protoascii");
-    }
-
-    /**
-     *
-     * @throws TagValidationException
-     */
-    @Test
-    public void testUpdateFromTagResultsAncestorNoHead() throws TagValidationException {
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final Context context = new Context(mockValidatorRules);
-        final ParsedHtmlTag htmlTag = mock(ParsedHtmlTag.class);
-        when(htmlTag.upperName()).thenReturn(UPPER_NAME);
-
-        final ValidateTagResult mockReferencePointResult = mock(ValidateTagResult.class);
-
-        final ValidateTagResult mockTagResult = mock(ValidateTagResult.class);
-        final ValidatorProtos.ValidationResult.Builder validationBuilder = ValidatorProtos.ValidationResult.newBuilder();
-        validationBuilder.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-
-        when(mockTagResult.getValidationResult()).thenReturn(validationBuilder);
-
-        final ParsedTagSpec tagSpec = mock(ParsedTagSpec.class);
-        final ValidatorProtos.TagSpec tagSpecMock = mockValidatorRules.getByTagSpecId("test_satisfies").getSpec();
-        when(tagSpec.getSpec()).thenReturn(tagSpecMock);
-        when(mockTagResult.getBestMatchTagSpec()).thenReturn(tagSpec);
-
-        context.updateFromTagResults(htmlTag, mockReferencePointResult, mockTagResult);
-
-        Assert.assertTrue(context.satisfiesCondition("amp-app-banner button[open-button]"));
-        Assert.assertEquals(context.getMandatoryAlternativesSatisfied().size(), 1);
-        Assert.assertEquals(context.getMandatoryAlternativesSatisfied().get(0), "alternative");
-        Assert.assertNotNull(context.getTagspecsValidated());
-        Assert.assertTrue(context.getTagspecsValidated().get(0));
-        Assert.assertTrue(context.hasTagspecsValidated(0));
-    }
-
-    @Test
-    public void testMarkUrlSeenFromMatchingTagSpec() {
-    }
-
-    /**
-     *
-     * @throws TagValidationException
-     */
-    @Test
-    public void testSatisfyMandatoryAlternativesFromTagSpec() throws TagValidationException {
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final Context context = new Context(mockValidatorRules);
-
-        final ParsedTagSpec tagSpec = mock(ParsedTagSpec.class);
-        final ValidatorProtos.TagSpec tagSpecMock = mockValidatorRules.getByTagSpecId("test_satisfies").getSpec();
-        when(tagSpec.getSpec()).thenReturn(tagSpecMock);
-
-        context.satisfyMandatoryAlternativesFromTagSpec(tagSpec);
-
-        Assert.assertEquals(context.getMandatoryAlternativesSatisfied().size(), 1);
-        Assert.assertEquals(context.getMandatoryAlternativesSatisfied().get(0), "alternative");
-    }
-
-    /**
-     *
-     */
-    @Test
-    public void testAddBuiltError() {
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final Context context = new Context(mockValidatorRules);
-
-        final ValidatorProtos.ValidationResult.Builder builder = ValidatorProtos.ValidationResult.newBuilder();
-
-        final ValidatorProtos.ValidationError.Builder error = ValidatorProtos.ValidationError.newBuilder();
-        error.setCode(ValidatorProtos.ValidationError.Code.EXTENSION_UNUSED);
-        error.setSeverity(ValidatorProtos.ValidationError.Severity.WARNING);
-
-        context.addBuiltError(error.build(), builder);
-
-        Assert.assertEquals(builder.getStatus(), ValidatorProtos.ValidationResult.Status.UNKNOWN);
-        Assert.assertEquals(builder.getErrorsList().size(), 1);
-
-        error.setSeverity(ValidatorProtos.ValidationError.Severity.ERROR);
-
-        context.addBuiltError(error.build(), builder);
-        Assert.assertEquals(builder.getStatus(), ValidatorProtos.ValidationResult.Status.FAIL);
-        Assert.assertEquals(builder.getErrorsList().size(), 2);
-    }
-
-    /**
-     * test adding an error field to validationResult with severity ERROR.
-     */
-    @Test
-    public void testAddError() {
-        final String mockSpecUrl = "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links";
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final Context context = new Context(mockValidatorRules);
-        final ValidatorProtos.ValidationResult.Builder builder = ValidatorProtos.ValidationResult.newBuilder();
-
-        context.addError(ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR,
-                new Locator() {
-                    @Override
-                    public String getPublicId() {
-                        return null;
-                    }
-
-                    @Override
-                    public String getSystemId() {
-                        return null;
-                    }
-
-                    @Override
-                    public int getLineNumber() {
-                        return 23;
-                    }
-
-                    @Override
-                    public int getColumnNumber() {
-                        return 2;
-                    }
-                },
-                Collections.emptyList(),
-                mockSpecUrl,
-                builder);
-
-        Assert.assertEquals(builder.getStatus(), ValidatorProtos.ValidationResult.Status.FAIL);
-        Assert.assertEquals(builder.getErrorsList().size(), 1);
-        Assert.assertEquals(builder.getErrorsList().get(0).getLine(), 23);
-        Assert.assertEquals(builder.getErrorsList().get(0).getCol(), 2);
-        Assert.assertEquals(builder.getErrorsList().get(0).getCode(), ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR);
-        Assert.assertEquals(builder.getErrorsList().get(0).getSpecUrl(), mockSpecUrl);
-    }
-
-    /**
-     *
-     */
-    @Test
-    public void testAddError1() {
-        final String mockSpecUrl = "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links";
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final Context context = new Context(mockValidatorRules);
-        final ValidatorProtos.ValidationResult.Builder builder = ValidatorProtos.ValidationResult.newBuilder();
-
-        context.addError(ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR,
-                23, 2, Collections.emptyList(),
-                mockSpecUrl,
-                builder);
-
-        Assert.assertEquals(builder.getStatus(), ValidatorProtos.ValidationResult.Status.FAIL);
-        Assert.assertEquals(builder.getErrorsList().size(), 1);
-        Assert.assertEquals(builder.getErrorsList().get(0).getLine(), 23);
-        Assert.assertEquals(builder.getErrorsList().get(0).getCol(), 2);
-        Assert.assertEquals(builder.getErrorsList().get(0).getCode(), ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR);
-        Assert.assertEquals(builder.getErrorsList().get(0).getSpecUrl(), mockSpecUrl);
-    }
-
-    /**
-     *
-     */
-    @Test
-    public void testAddWarning() {
-        final String mockSpecUrl = "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links";
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final Context context = new Context(mockValidatorRules);
-        final ValidatorProtos.ValidationResult.Builder builder = ValidatorProtos.ValidationResult.newBuilder();
-
-        context.addWarning(ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR,
-                new Locator() {
-                    @Override
-                    public String getPublicId() {
-                        return null;
-                    }
-
-                    @Override
-                    public String getSystemId() {
-                        return null;
-                    }
-
-                    @Override
-                    public int getLineNumber() {
-                        return 23;
-                    }
-
-                    @Override
-                    public int getColumnNumber() {
-                        return 2;
-                    }
-                },
-                Collections.emptyList(),
-                mockSpecUrl,
-                builder);
-
-        Assert.assertEquals(builder.getStatus(), ValidatorProtos.ValidationResult.Status.UNKNOWN);
-        Assert.assertEquals(builder.getErrorsList().size(), 1);
-        Assert.assertEquals(builder.getErrorsList().get(0).getLine(), 23);
-        Assert.assertEquals(builder.getErrorsList().get(0).getCol(), 2);
-        Assert.assertEquals(builder.getErrorsList().get(0).getCode(), ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR);
-        Assert.assertEquals(builder.getErrorsList().get(0).getSpecUrl(), mockSpecUrl);
-    }
-
-    /**
-     * test line cols.
-     */
-    @Test
-    public void testLineCol() {
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final Context context = new Context(mockValidatorRules);
-
-        context.setLineCol(new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pub_id";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sys_id";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 2;
-            }
-        });
-
-        Assert.assertEquals(context.getLineCol().getColumnNumber(), 2);
-        Assert.assertEquals(context.getLineCol().getLineNumber(), 23);
-        Assert.assertEquals(context.getLineCol().getSystemId(), "sys_id");
-        Assert.assertEquals(context.getLineCol().getPublicId(), "pub_id");
-
-    }
-
-    /**
-     *
-     */
-    @Test
-    public void testSettersGetters() {
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final Context context = new Context(mockValidatorRules);
-        context.recordTypeIdentifier("type_id");
-        context.recordTypeIdentifier("transformed");
-
-        Assert.assertEquals(context.getRules(), mockValidatorRules);
-        Assert.assertNotNull(context.getTagStack());
-        Assert.assertEquals(context.getTypeIdentifiers().size(), 2);
-        Assert.assertEquals(context.getTypeIdentifiers().get(0), "type_id");
-        Assert.assertTrue(context.isTransformed());
-        Assert.assertNotNull(context.getTagStack());
-        Assert.assertNotNull(context.getExtensions());
-
-    }
-
-    /**
-     *
-     */
-    @Test
-    public void testByteSizeComputations() {
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final Context context = new Context(mockValidatorRules);
-
-        context.addInlineStyleByteSize(40);
-        Assert.assertEquals(context.getInlineStyleByteSize(), 40);
-    }
-
-    private ParsedValidatorRules mockValidatorRules;
-    private static final String UPPER_NAME = "HEAD";
-    /** AMPValidatorManager object. */
-    private AMPValidatorManager ampValidatorManager;
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/CssLengthTest.java b/validator/java/src/test/java/dev/amp/validator/CssLengthTest.java
deleted file mode 100644
index 2db554f3f051a..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/CssLengthTest.java
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Oath Inc..
- */
-
-package dev.amp.validator;
-
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-public class CssLengthTest {
-
-    @Test
-    public void testNullInput() {
-        final CssLength cssLength = new CssLength(null, true, true);
-        Assert.assertTrue(cssLength.isValid());
-        Assert.assertFalse(cssLength.isFluid());
-        Assert.assertFalse(cssLength.isAuto());
-        Assert.assertFalse(cssLength.isSet());
-    }
-
-    @Test
-    public void testAutoInput() {
-        final CssLength cssLength = new CssLength("auto", true, true);
-        Assert.assertTrue(cssLength.isAuto());
-        Assert.assertTrue(cssLength.isValid());
-        Assert.assertFalse(cssLength.isFluid());
-        Assert.assertTrue(cssLength.isSet());
-
-    }
-
-    @Test
-    public void testFluidInput() {
-        final CssLength cssLength = new CssLength("fluid", true, true);
-        Assert.assertFalse(cssLength.isAuto());
-        Assert.assertTrue(cssLength.isFluid());
-        Assert.assertTrue(cssLength.isValid());
-        Assert.assertTrue(cssLength.isSet());
-
-    }
-
-    @Test
-    public void testPxInput() {
-        final CssLength cssLength = new CssLength("800px", true, true);
-        Assert.assertFalse(cssLength.isAuto());
-        Assert.assertFalse(cssLength.isFluid());
-        Assert.assertTrue(cssLength.isValid());
-        Assert.assertEquals(cssLength.getNumeral(), Float.valueOf(800));
-        Assert.assertEquals(cssLength.getUnit(), "px");
-        Assert.assertTrue(cssLength.isSet());
-
-    }
-
-    @Test
-    public void testRemInput() {
-        final CssLength cssLength = new CssLength("800rem", true, true);
-        Assert.assertFalse(cssLength.isAuto());
-        Assert.assertFalse(cssLength.isFluid());
-        Assert.assertTrue(cssLength.isValid());
-        Assert.assertEquals(cssLength.getNumeral(), Float.valueOf(800));
-        Assert.assertEquals(cssLength.getUnit(), "rem");
-        Assert.assertTrue(cssLength.isSet());
-
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/ErrorCodeMetadataTest.java b/validator/java/src/test/java/dev/amp/validator/ErrorCodeMetadataTest.java
deleted file mode 100644
index 5b2770c90ca91..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ErrorCodeMetadataTest.java
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Oath Inc..
- */
-package dev.amp.validator;
-
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-/**
- * Test for class {@link ErrorCodeMetadata}
- *
- * @author sphatak01
- */
-public class ErrorCodeMetadataTest {
-
-    @Test
-    public void testGettersSetters() {
-        final ErrorCodeMetadata errorCodeMetadata = new ErrorCodeMetadata();
-
-        errorCodeMetadata.setFormat("html");
-        errorCodeMetadata.setSpecificity(10);
-
-        Assert.assertEquals(errorCodeMetadata.getFormat(), "html");
-        Assert.assertEquals(errorCodeMetadata.getSpecificity(), 10);
-    }
-
-}
\ No newline at end of file
diff --git a/validator/java/src/test/java/dev/amp/validator/ExtensionMissingErrorTest.java b/validator/java/src/test/java/dev/amp/validator/ExtensionMissingErrorTest.java
deleted file mode 100644
index 19602af60a27a..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ExtensionMissingErrorTest.java
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Oath Inc..
- */
-
-package dev.amp.validator;
-
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-/**
- * Tests for {@link ExtensionMissingError}
- *
- * @author sphatak01
- */
-public class ExtensionMissingErrorTest {
-
-    @Test
-    public void testConstructor() {
-        final ExtensionMissingError error = new ExtensionMissingError("ext_missing",
-                ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_PROPERTY_IN_ATTR_VALUE).build());
-
-        Assert.assertEquals(error.getMissingExtension(), "ext_missing");
-        Assert.assertEquals(error.getMaybeError().getCode(), ValidatorProtos.ValidationError.Code.DISALLOWED_PROPERTY_IN_ATTR_VALUE);
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/ExtensionsContextTest.java b/validator/java/src/test/java/dev/amp/validator/ExtensionsContextTest.java
deleted file mode 100644
index 0a0795115da20..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ExtensionsContextTest.java
+++ /dev/null
@@ -1,138 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Oath Inc..
- */
-
-package dev.amp.validator;
-
-import org.mockito.Mockito;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-import org.xml.sax.Locator;
-
-import java.util.List;
-
-public class ExtensionsContextTest {
-
-    @Test
-    public void testRecordFutureErrorsIfMissing() {
-        final ExtensionsContext extContext = new ExtensionsContext();
-
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-        final ValidatorProtos.TagSpec tagSpec = ValidatorProtos.TagSpec.newBuilder().addRequiresExtension("amp-form").
-                setSpecUrl("https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup").
-                setSpecName("test_parent").build();
-        Mockito.when(mockParsedTagSpec.getSpec()).thenReturn(tagSpec);
-
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId2";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId1";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 45;
-            }
-        };
-
-        extContext.recordFutureErrorsIfMissing(mockParsedTagSpec, locator);
-        final List<ValidatorProtos.ValidationError> errors = extContext.missingExtensionErrors();
-
-        Assert.assertEquals(errors.size(), 1);
-        Assert.assertEquals(errors.get(0).getCode(), ValidatorProtos.ValidationError.Code.MISSING_REQUIRED_EXTENSION);
-        Assert.assertEquals(errors.get(0).getSeverity(), ValidatorProtos.ValidationError.Severity.ERROR);
-        Assert.assertEquals(errors.get(0).getLine(), 23);
-        Assert.assertEquals(errors.get(0).getCol(), 45);
-        Assert.assertEquals(errors.get(0).getSpecUrl(), "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup");
-        Assert.assertEquals(errors.get(0).getParamsList().size(), 2);
-        Assert.assertEquals(errors.get(0).getParamsList().get(0), "test_parent");
-        Assert.assertEquals(errors.get(0).getParamsList().get(1), "amp-form");
-
-    }
-
-    @Test
-    public void testUpdateFromtagResultsNullbestMatchTagSpec() {
-        final ExtensionsContext extContext = new ExtensionsContext();
-
-        ValidateTagResult mockTagResult = Mockito.mock(ValidateTagResult.class);
-        Mockito.when(mockTagResult.getBestMatchTagSpec()).thenReturn(null);
-
-        extContext.updateFromTagResult(mockTagResult);
-        Assert.assertEquals(extContext.unusedExtensionsRequired().size(), 0);
-    }
-
-    @Test
-    public void testUpdateFromtagResults() {
-        final ExtensionsContext extContext = new ExtensionsContext();
-
-        ValidateTagResult mockTagResult = Mockito.mock(ValidateTagResult.class);
-
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-        final ValidatorProtos.TagSpec tagSpec = ValidatorProtos.TagSpec.newBuilder()
-                .setExtensionSpec(ValidatorProtos.ExtensionSpec.newBuilder().setName("amp-date-picker")
-                        .setRequiresUsage(ValidatorProtos.ExtensionSpec.ExtensionUsageRequirement.EXEMPTED).build())
-                .addRequiresExtension("amp-form")
-                .setSpecName("test_parent").build();
-
-        Mockito.when(mockParsedTagSpec.getSpec()).thenReturn(tagSpec);
-        Mockito.when(mockTagResult.getBestMatchTagSpec()).thenReturn(mockParsedTagSpec);
-
-        extContext.updateFromTagResult(mockTagResult);
-
-        Assert.assertTrue(extContext.isExtensionLoaded("amp-date-picker"));
-        Assert.assertTrue(extContext.isExtensionLoaded("amp-ad"));
-
-        Assert.assertEquals(extContext.unusedExtensionsRequired().size(), 0);
-    }
-
-    @Test
-    public void testUpdateFromtagResultsError() {
-        final ExtensionsContext extContext = new ExtensionsContext();
-
-        ValidateTagResult mockTagResult = Mockito.mock(ValidateTagResult.class);
-
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-        final ValidatorProtos.TagSpec tagSpec = ValidatorProtos.TagSpec.newBuilder()
-                .setExtensionSpec(ValidatorProtos.ExtensionSpec.newBuilder().setName("amp-date-picker")
-                        .setRequiresUsage(ValidatorProtos.ExtensionSpec.ExtensionUsageRequirement.ERROR).build())
-                .addRequiresExtension("amp-form")
-                .setSpecName("test_parent").build();
-
-        Mockito.when(mockParsedTagSpec.getSpec()).thenReturn(tagSpec);
-        Mockito.when(mockTagResult.getBestMatchTagSpec()).thenReturn(mockParsedTagSpec);
-
-        extContext.updateFromTagResult(mockTagResult);
-
-        Assert.assertTrue(extContext.isExtensionLoaded("amp-date-picker"));
-        Assert.assertTrue(extContext.isExtensionLoaded("amp-ad"));
-        Assert.assertEquals(extContext.unusedExtensionsRequired().size(), 1);
-        Assert.assertEquals(extContext.unusedExtensionsRequired().get(0), "amp-date-picker");
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/ParsedAttrSpecTest.java b/validator/java/src/test/java/dev/amp/validator/ParsedAttrSpecTest.java
deleted file mode 100644
index b640c3db5cafd..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ParsedAttrSpecTest.java
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import com.google.common.collect.ImmutableList;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-/**
- * Test for {@link ParsedAttrSpec}
- *
- * @author sphatak01
- */
-public class ParsedAttrSpecTest {
-
-    @Test
-    public void testGettersSetters() {
-        final ValidatorProtos.AttrSpec.Builder attrSpecBuilder = ValidatorProtos.AttrSpec.newBuilder();
-        attrSpecBuilder.addCssDeclaration(ValidatorProtos.CssDeclaration.newBuilder().setName("content")
-                .addValueCasei("fill").build());
-
-        final ValidatorProtos.UrlSpec valueUrl = ValidatorProtos.UrlSpec.newBuilder().addProtocol("https").build();
-        attrSpecBuilder.setValueUrl(valueUrl);
-
-        final ValidatorProtos.PropertySpecList.Builder propBuilder = ValidatorProtos.PropertySpecList.newBuilder();
-        propBuilder.addProperties(ValidatorProtos.PropertySpec.newBuilder().setMandatory(true).setName("height").setValue("40").build());
-
-        attrSpecBuilder.setValueProperties(propBuilder.build());
-        attrSpecBuilder.addEnabledBy("transformation");
-
-        final ValidatorProtos.AttrSpec attrSpec = attrSpecBuilder.build();
-        final ParsedAttrSpec parsedAttrSpec = new ParsedAttrSpec(attrSpec, "content");
-
-        Assert.assertEquals(parsedAttrSpec.getAttrName(), "content");
-        Assert.assertEquals(parsedAttrSpec.getSpec(), attrSpec);
-
-        Assert.assertNotNull(parsedAttrSpec.getValuePropertiesOrNull());
-        Assert.assertEquals(parsedAttrSpec.getValuePropertiesOrNull().getMandatoryValuePropertyNames().size(), 1);
-        Assert.assertEquals(parsedAttrSpec.getValuePropertiesOrNull().getMandatoryValuePropertyNames().get(0), "height");
-
-        Assert.assertEquals(parsedAttrSpec.getCssDeclarationByName().get("content").getValueCasei(0), "fill");
-        Assert.assertTrue(parsedAttrSpec.isUsedForTypeIdentifiers(ImmutableList.of("transformation")));
-
-        Assert.assertTrue(parsedAttrSpec.getValueUrlSpec().isAllowedProtocol("https"));
-
-        parsedAttrSpec.cleanup();
-
-        Assert.assertNull(parsedAttrSpec.getAttrName());
-        Assert.assertNull(parsedAttrSpec.getSpec());
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/ParsedAttrSpecsTest.java b/validator/java/src/test/java/dev/amp/validator/ParsedAttrSpecsTest.java
deleted file mode 100644
index 7e1883149b5c8..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ParsedAttrSpecsTest.java
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import com.google.common.collect.ImmutableList;
-import com.google.common.collect.ImmutableMap;
-import org.mockito.Mockito;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-import java.util.Collections;
-import java.util.Map;
-
-/**
- * Tests for {@link ParsedAttrSpecs}
- *
- * @author sphatak01
- */
-public class ParsedAttrSpecsTest {
-
-    @Test
-    public void testGettersSetters() {
-        final AMPValidatorManager validationManager = Mockito.mock(AMPValidatorManager.class);
-
-        final ValidatorProtos.AttrSpec.Builder attrSpecBuilder = ValidatorProtos.AttrSpec.newBuilder();
-        attrSpecBuilder.addEnabledBy("transformation");
-
-        final ValidatorProtos.AttrSpec attrSpec = attrSpecBuilder.build();
-
-        final ParsedAttrSpecs parsedAttrSpecs = new ParsedAttrSpecs(validationManager);
-
-        // first time doesn't exist in map
-        Assert.assertNotNull(parsedAttrSpecs.getParsedAttrSpec("a", "b", attrSpec));
-
-        //second time exists in map
-        Assert.assertNotNull(parsedAttrSpecs.getParsedAttrSpec("a", "b", attrSpec));
-
-        Mockito.when(validationManager.getAttrListMap()).thenReturn(Collections.emptyMap());
-
-        Assert.assertEquals(parsedAttrSpecs.getAttrListByName("content").size(), 0);
-
-        final Map<String, ValidatorProtos.AttrList> attrListMap = ImmutableMap.of("content", ValidatorProtos.AttrList.newBuilder()
-                .addAttrs(ValidatorProtos.AttrSpec.newBuilder().setName("color").build()).build());
-        Mockito.when(validationManager.getAttrListMap()).thenReturn(attrListMap);
-
-        Assert.assertEquals(parsedAttrSpecs.getAttrListByName("content").size(), 1);
-
-        Mockito.when(validationManager.getGlobalAttrs()).thenReturn(ImmutableList.of(ValidatorProtos.AttrSpec.newBuilder().setName("itemprop").build()));
-        Assert.assertEquals(parsedAttrSpecs.getGlobalAttrs().size(), 1);
-        Assert.assertEquals(parsedAttrSpecs.getGlobalAttrs().get(0).getName(), "itemprop");
-
-        Mockito.when(validationManager.getAmpLayoutAttrs()).thenReturn(ImmutableList.of(ValidatorProtos.AttrSpec.newBuilder().setName("NODISPLAY").build()));
-        Assert.assertEquals(parsedAttrSpecs.getAmpLayoutAttrs().size(), 1);
-        Assert.assertEquals(parsedAttrSpecs.getAmpLayoutAttrs().get(0).getName(), "NODISPLAY");
-
-        parsedAttrSpecs.cleanup();
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/ParsedHtmlTagTest.java b/validator/java/src/test/java/dev/amp/validator/ParsedHtmlTagTest.java
deleted file mode 100644
index 4f852af64fb0a..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ParsedHtmlTagTest.java
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import org.mockito.Mockito;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-import org.xml.sax.Attributes;
-
-/**
- * Tests for {@link ParsedHtmlTag}
- *
- * @author sphatak01
- */
-
-public class ParsedHtmlTagTest {
-
-    @Test
-    public void testgettersSetters() {
-        final Attributes attrs = Mockito.mock(Attributes.class);
-        Mockito.when(attrs.getLocalName(0)).thenReturn("crossorigin");
-        Mockito.when(attrs.getValue(0)).thenReturn("true");
-
-        final ParsedHtmlTag parsedHtmltag = new ParsedHtmlTag("TITLE", attrs);
-
-        Assert.assertNull(parsedHtmltag.hasDuplicateAttrs());
-
-        Mockito.when(attrs.getLength()).thenReturn(1);
-
-        Assert.assertFalse(parsedHtmltag.isEmpty());
-        Assert.assertEquals(parsedHtmltag.lowerName(), "title");
-        Assert.assertEquals(parsedHtmltag.upperName(), "TITLE");
-        Assert.assertEquals(parsedHtmltag.attrs(), attrs);
-
-        Assert.assertEquals(parsedHtmltag.attrsByKey().get("crossorigin"), "true");
-
-        // second time should be populated
-        Assert.assertEquals(parsedHtmltag.attrsByKey().get("crossorigin"), "true");
-
-        Assert.assertNull(parsedHtmltag.hasDuplicateAttrs());
-
-        Assert.assertEquals(parsedHtmltag.getValue("crossorigin", 0), "true");
-
-        Mockito.when(attrs.getLength()).thenReturn(2);
-        Mockito.when(attrs.getLocalName(1)).thenReturn("crossorigin");
-        Mockito.when(attrs.getValue(1)).thenReturn("false");
-
-        Assert.assertEquals(parsedHtmltag.hasDuplicateAttrs(), "crossorigin");
-
-        parsedHtmltag.cleanup();
-
-    }
-}
\ No newline at end of file
diff --git a/validator/java/src/test/java/dev/amp/validator/ParsedReferencePointsTest.java b/validator/java/src/test/java/dev/amp/validator/ParsedReferencePointsTest.java
deleted file mode 100644
index 6ae68eb973337..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ParsedReferencePointsTest.java
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-/**
- * Tests for {@link ParsedReferencePoints}
- *
- * @author sphatak01
- */
-
-public class ParsedReferencePointsTest {
-
-    @Test
-    public void testGettersSetters() {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder1 = ValidatorProtos.ReferencePoint.newBuilder();
-        refPointBuilder1.setTagSpecName("AMP-NEXT-PAGE > [separator]");
-        refPointBuilder1.setUnique(true);
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder2 = ValidatorProtos.ReferencePoint.newBuilder();
-        refPointBuilder2.setTagSpecName("amp-next-page extension .json configuration");
-        refPointBuilder2.setUnique(false);
-
-        tagSpecBuilder.addReferencePoints(refPointBuilder1.build());
-        tagSpecBuilder.addReferencePoints(refPointBuilder2.build());
-        tagSpecBuilder.setSpecUrl("https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg");
-        tagSpecBuilder.setSpecName("lineargradient > stop");
-
-        final ParsedReferencePoints parsedReferencePoints = new ParsedReferencePoints(tagSpecBuilder.build());
-        Assert.assertFalse(parsedReferencePoints.empty());
-        Assert.assertEquals(parsedReferencePoints.size(), 2);
-        Assert.assertEquals(parsedReferencePoints.iterate().get(0).getTagSpecName(), "AMP-NEXT-PAGE > [separator]");
-        Assert.assertTrue(parsedReferencePoints.iterate().get(0).getUnique());
-        Assert.assertEquals(parsedReferencePoints.iterate().get(1).getTagSpecName(),
-                "amp-next-page extension .json configuration");
-        Assert.assertFalse(parsedReferencePoints.iterate().get(1).getUnique());
-        Assert.assertEquals(parsedReferencePoints.parentSpecUrl(),
-                "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg");
-        Assert.assertEquals(parsedReferencePoints.parentTagSpecName(), "lineargradient > stop");
-
-        parsedReferencePoints.cleanup();
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/ParsedTagSpecTest.java b/validator/java/src/test/java/dev/amp/validator/ParsedTagSpecTest.java
deleted file mode 100644
index 20a5db63a6c63..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ParsedTagSpecTest.java
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import com.google.common.collect.ImmutableList;
-import dev.amp.validator.exception.TagValidationException;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-import org.xml.sax.Locator;
-
-import static org.mockito.Matchers.any;
-import static org.mockito.Matchers.anyString;
-import static org.mockito.Mockito.mock;
-import static org.mockito.Mockito.when;
-
-/**
- * Test for {@link ParsedTagSpec}
- *
- * @author sphatak01
- */
-public class ParsedTagSpecTest {
-
-
-    /**
-     * Tests for {@link ParsedTagSpec}
-     */
-    @Test
-    public void testConstructor() throws TagValidationException {
-
-        final ParsedAttrSpecs parsedAttrSpecs = mock(ParsedAttrSpecs.class);
-        final RecordValidated shouldRecordTagsValidated = RecordValidated.NEVER;
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        final int id = 23;
-
-        tagSpecBuilder.setAmpLayout(ValidatorProtos.AmpLayout.newBuilder()
-                .addSupportedLayouts(ValidatorProtos.AmpLayout.Layout.INTRINSIC).build());
-
-
-        final ValidatorProtos.AttrSpec.Builder attrSpecBuilder = ValidatorProtos.AttrSpec.newBuilder();
-        attrSpecBuilder.setName("content");
-
-        final ValidatorProtos.AttrSpec.Builder attrSpecBuilder2 = ValidatorProtos.AttrSpec.newBuilder();
-        attrSpecBuilder2.setName("content");
-
-        when(parsedAttrSpecs.getAmpLayoutAttrs()).thenReturn(ImmutableList.of(attrSpecBuilder.build(), attrSpecBuilder2.build()));
-
-        final ValidatorProtos.AttrSpec.Builder attrSpecBuilder3 = ValidatorProtos.AttrSpec.newBuilder();
-        attrSpecBuilder3.setName("height");
-        attrSpecBuilder3.addValueCasei("_top");
-        tagSpecBuilder.addAttrs(attrSpecBuilder3.build());
-
-        final ValidatorProtos.CdataSpec.Builder cDataBuilder = ValidatorProtos.CdataSpec.newBuilder();
-        cDataBuilder.addBlacklistedCdataRegex(ValidatorProtos.BlackListedCDataRegex.newBuilder().setRegex("4").build());
-        final ValidatorProtos.CdataSpec cDataSpec = cDataBuilder.build();
-
-        tagSpecBuilder.setCdata(cDataSpec);
-
-        final ValidatorProtos.AttrSpec.Builder attrSpecBuilder4 = ValidatorProtos.AttrSpec.newBuilder();
-        when(parsedAttrSpecs.getGlobalAttrs()).thenReturn(ImmutableList.of(attrSpecBuilder4.build()));
-
-        final ParsedAttrSpec parsedHeightSpec = mock(ParsedAttrSpec.class);
-        final ValidatorProtos.AttrSpec.Builder heightSpec = ValidatorProtos.AttrSpec.newBuilder();
-        heightSpec.setMandatory(true);
-        heightSpec.setMandatoryOneof("data-momentid");
-        heightSpec.setMandatoryAnyof("src");
-        heightSpec.addAlternativeNames("ht");
-        heightSpec.setImplicit(true);
-        heightSpec.setValueUrl(ValidatorProtos.UrlSpec.newBuilder().addProtocol("http").build());
-        heightSpec.addRequiresExtension("amp-form");
-
-        when(parsedHeightSpec.getSpec()).thenReturn(heightSpec.build());
-
-        when(parsedAttrSpecs.getParsedAttrSpec(anyString(), anyString(), any(ValidatorProtos.AttrSpec.class))).thenReturn(parsedHeightSpec);
-
-        tagSpecBuilder.setChildTags(ValidatorProtos.ChildTagSpec.newBuilder().setMandatoryMinNumChildTags(1).build());
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-
-        final ParsedTagSpec parsedTagSpec = new ParsedTagSpec(parsedAttrSpecs, shouldRecordTagsValidated,
-                tagSpec, id);
-
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return null;
-            }
-
-            @Override
-            public String getSystemId() {
-                return null;
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 42;
-            }
-        };
-
-
-        Assert.assertEquals(parsedTagSpec.getSpec(), tagSpec);
-        Assert.assertEquals(parsedTagSpec.cdataMatcher(locator).getTagSpec(), tagSpec);
-        Assert.assertEquals(parsedTagSpec.cdataMatcher(locator).getLineCol().getColumnNumber(), 42);
-        Assert.assertEquals(parsedTagSpec.cdataMatcher(locator).getLineCol().getLineNumber(), 23);
-        parsedTagSpec.childTagMatcher();
-        //Assert.assertEquals(parsedTagSpec.referencePointMatcher(mock(ParsedValidatorRules.class), locator).getLineCol().getLineNumber(), 23);
-        Assert.assertFalse(parsedTagSpec.hasReferencePoints());
-        Assert.assertNotNull(parsedTagSpec.getReferencePoints());
-        Assert.assertTrue(parsedTagSpec.attrsCanSatisfyExtension());
-        Assert.assertTrue(parsedTagSpec.hasAttrWithName("height"));
-        Assert.assertEquals(parsedTagSpec.getImplicitAttrspecs().size(), 2);
-        Assert.assertEquals(parsedTagSpec.getImplicitAttrspecs().get(0).getName(), "height");
-        Assert.assertEquals(parsedTagSpec.getAttrsByName().size(), 4);
-        Assert.assertTrue(parsedTagSpec.getAttrsByName().containsKey("height"));
-        Assert.assertTrue(parsedTagSpec.getAttrsByName().containsKey("content"));
-        Assert.assertTrue(parsedTagSpec.getAttrsByName().containsKey("ht"));
-        Assert.assertTrue(parsedTagSpec.getAttrsByName().containsKey(""));
-        Assert.assertEquals(parsedTagSpec.getMandatoryOneofs().size(), 1);
-        Assert.assertTrue(parsedTagSpec.getMandatoryOneofs().contains("data-momentid"));
-        Assert.assertEquals(parsedTagSpec.getMandatoryAnyofs().size(), 1);
-        Assert.assertTrue(parsedTagSpec.getMandatoryAnyofs().contains("src"));
-        Assert.assertEquals(parsedTagSpec.getMandatoryAttrIds().size(), 1);
-        Assert.assertEquals(parsedTagSpec.id(), 23);
-
-        parsedTagSpec.cleanup();
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/ParsedUrlSpecTest.java b/validator/java/src/test/java/dev/amp/validator/ParsedUrlSpecTest.java
deleted file mode 100644
index 544ebc738ceea..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ParsedUrlSpecTest.java
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-/**
- * Test for {@link ParsedUrlSpec}
- *
- * @author sphatak01
- */
-public class ParsedUrlSpecTest {
-
-    @Test
-    public void testGetterSetters() {
-        final ValidatorProtos.UrlSpec.Builder specBuilder = ValidatorProtos.UrlSpec.newBuilder();
-        specBuilder.addProtocol("http");
-        specBuilder.addProtocol("https");
-
-        final ValidatorProtos.UrlSpec spec = specBuilder.build();
-        final ParsedUrlSpec parsedSpec = new ParsedUrlSpec(spec);
-
-        Assert.assertEquals(parsedSpec.getSpec(), spec);
-        Assert.assertTrue(parsedSpec.isAllowedProtocol("http"));
-        Assert.assertTrue(parsedSpec.isAllowedProtocol("https"));
-        Assert.assertFalse(parsedSpec.isAllowedProtocol("random-http"));
-
-        parsedSpec.cleanup();
-
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/ParsedValidatorRulesTest.java b/validator/java/src/test/java/dev/amp/validator/ParsedValidatorRulesTest.java
deleted file mode 100644
index c7638cfda39ad..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ParsedValidatorRulesTest.java
+++ /dev/null
@@ -1,800 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Oath Inc..
- */
-
-package dev.amp.validator;
-
-import com.google.common.collect.ImmutableList;
-import com.google.common.collect.ImmutableMap;
-import com.google.common.collect.ImmutableSet;
-import dev.amp.validator.exception.TagValidationException;
-import dev.amp.validator.exception.ValidatorException;
-import org.mockito.ArgumentCaptor;
-import org.mockito.Mockito;
-import org.testng.Assert;
-import org.testng.annotations.BeforeMethod;
-import org.testng.annotations.Test;
-import org.xml.sax.Attributes;
-import org.xml.sax.Locator;
-
-import java.util.Collections;
-import java.util.List;
-import java.util.regex.Pattern;
-
-/**
- * Tests for {@link ParsedValidatorRules}
- *
- * @author sphatak01
- */
-public class ParsedValidatorRulesTest {
-
-    @BeforeMethod
-    public void init() {
-        htmlFormatCode = ValidatorProtos.HtmlFormat.Code.AMP4EMAIL;
-
-        mockValidationManager = Mockito.mock(AMPValidatorManager.class);
-        Mockito.when(mockValidationManager.getDispatchKeyByTagSpecId(3)).thenReturn("NAME_VALUE_DISPATCH");
-
-        rulesBuilder = ValidatorProtos.ValidatorRules.newBuilder();
-        rulesBuilder.addTags(ValidatorProtos.TagSpec.newBuilder()
-                .addHtmlFormat(ValidatorProtos.HtmlFormat.Code.AMP4EMAIL)
-                .setExtensionSpec(ValidatorProtos.ExtensionSpec.newBuilder()
-                        .setDeprecatedAllowDuplicates(true).setName("amp-lightbox-gallery").addVersion("1.0").build())
-                .addAlsoRequiresTagWarning("amp-ad extension .js script")
-                .setSpecName("SCRIPT")
-                .setTagName("SCRIPT")
-                .addRequires("requires")
-                .addExcludes("excludes")
-                .setMandatory(true)
-                .build());
-        // different html format
-        rulesBuilder.addTags(ValidatorProtos.TagSpec.newBuilder()
-                .setTagName("AMP-STICKY-AD")
-                .setExtensionSpec(ValidatorProtos.ExtensionSpec.newBuilder()
-                        .setName("amp-inputmask")
-                        .build())
-                .addHtmlFormat(ValidatorProtos.HtmlFormat.Code.AMP)
-                .build());
-        rulesBuilder.addTags(ValidatorProtos.TagSpec.newBuilder()
-                .addHtmlFormat(ValidatorProtos.HtmlFormat.Code.AMP4EMAIL)
-                .setMandatoryAlternatives("alternatives")
-                .setSpecName("AMP-CAROUSEL lightbox")
-                .build());
-        rulesBuilder.addTags(ValidatorProtos.TagSpec.newBuilder()
-                .addHtmlFormat(ValidatorProtos.HtmlFormat.Code.AMP4EMAIL)
-                .setMandatory(true)
-                .addDisabledBy("transformed")
-                .setSpecName("amp-consent [type]")
-                .setMandatoryAlternatives("not-alternatives")
-                .build());
-        rulesBuilder.addTags(ValidatorProtos.TagSpec.newBuilder()
-                .setTagName("$REFERENCE_POINT")
-                .setSpecName("AMP-SELECTOR option")
-                .addHtmlFormat(ValidatorProtos.HtmlFormat.Code.AMP)
-                .build());
-        rulesBuilder.addTags(ValidatorProtos.TagSpec.newBuilder()
-                .addHtmlFormat(ValidatorProtos.HtmlFormat.Code.AMP4EMAIL)
-                .setSpecName("amp-ad extension .js script")
-                .setTagName("amp-ad extension .js script")
-                .build());
-
-        rulesBuilder.addErrorFormats(ValidatorProtos.ErrorFormat.newBuilder()
-                .setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING)
-                .setFormat("The mandatory tag '%1' is missing or incorrect.")
-                .build());
-        rulesBuilder.addErrorFormats(ValidatorProtos.ErrorFormat.newBuilder()
-                .setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG)
-                .setFormat("The tag '%1' is disallowed.")
-                .build());
-        rulesBuilder.addErrorFormats(ValidatorProtos.ErrorFormat.newBuilder()
-                .setCode(ValidatorProtos.ValidationError.Code.MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE)
-                .setFormat("The property '%1' is missing from attribute '%2' in tag '%3'.")
-                .build());
-        rulesBuilder.addErrorFormats(ValidatorProtos.ErrorFormat.newBuilder()
-                .setCode(ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE)
-                .setFormat("SS syntax error in tag '%1' - the property '%2' is set to the disallowed value '%3'. Allowed values: %4.")
-                .build());
-
-        rulesBuilder.addErrorSpecificity(ValidatorProtos.ErrorSpecificity.newBuilder()
-                .setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING)
-                .setSpecificity(0)
-                .build());
-        rulesBuilder.addErrorSpecificity(ValidatorProtos.ErrorSpecificity.newBuilder()
-                .setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG)
-                .setSpecificity(0)
-                .build());
-        rulesBuilder.addErrorSpecificity(ValidatorProtos.ErrorSpecificity.newBuilder()
-                .setCode(ValidatorProtos.ValidationError.Code.MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE)
-                .setSpecificity(33)
-                .build());
-        rulesBuilder.addErrorSpecificity(ValidatorProtos.ErrorSpecificity.newBuilder()
-                .setCode(ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE)
-                .setSpecificity(0)
-                .build());
-        rulesBuilder.setStylesSpecUrl(STYLES_SPEC_URL);
-        rulesBuilder.setScriptSpecUrl(SCRIPT_SPEC_URL);
-        rulesBuilder.setTemplateSpecUrl(TEMPLATE_SPEC_URL);
-
-        Mockito.when(mockValidationManager.getRules()).thenReturn(rulesBuilder);
-    }
-
-    @Test
-    public void testRegex() {
-        final ValidatorProtos.HtmlFormat.Code htmlFormatCode = ValidatorProtos.HtmlFormat.Code.AMP4EMAIL;
-        final AMPValidatorManager mockValidationManager = Mockito.mock(AMPValidatorManager.class);
-        Mockito.when(mockValidationManager.getDispatchKeyByTagSpecId(0)).thenReturn("NAME_VALUE_DISPATCH");
-        Mockito.when(mockValidationManager.getDispatchKeyByTagSpecId(1)).thenReturn(null);
-
-        final ValidatorProtos.ValidatorRules.Builder rulesBuilder = ValidatorProtos.ValidatorRules.newBuilder();
-        rulesBuilder.addTags(ValidatorProtos.TagSpec.newBuilder()
-                .setExtensionSpec(ValidatorProtos.ExtensionSpec.newBuilder()
-                        .setDeprecatedAllowDuplicates(true).setName("amp-lightbox-gallery").addVersion("1.0").build())
-                .setSpecName("SCRIPT")
-                .build());
-        rulesBuilder.addErrorFormats(ValidatorProtos.ErrorFormat.newBuilder()
-                .setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG)
-                .setFormat("The tag '%1' is disallowed.")
-                .build());
-        rulesBuilder.addErrorSpecificity(ValidatorProtos.ErrorSpecificity.newBuilder()
-                .setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG)
-                .setSpecificity(8)
-                .build());
-        Mockito.when(mockValidationManager.getRules()).thenReturn(rulesBuilder);
-
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        final Pattern pattern = rules.getFullMatchRegex("[0-9]+");
-
-        Assert.assertTrue(pattern.matcher("98").matches());
-
-        final Pattern pattern1 = rules.getFullMatchCaseiRegex("[0-9a-f]+");
-
-        Assert.assertTrue(pattern1.matcher("a1").matches());
-
-        final Pattern pattern2 = rules.getPartialMatchCaseiRegex("[0-9a-f]");
-
-        Assert.assertTrue(pattern2.matcher("a").matches());
-
-        rules.getFullMatchRegex("[0-9a-d]{2}");
-        rules.getFullMatchCaseiRegex("[0-9a-d]{3}");
-        rules.getPartialMatchCaseiRegex("[0-9a-d]{4}");
-
-        Assert.assertTrue(rules.getFullMatchRegex("[0-9]+").matcher("98").matches());
-        Assert.assertTrue(rules.getFullMatchCaseiRegex("[0-9a-f]+").matcher("a1").matches());
-        Assert.assertTrue(rules.getPartialMatchCaseiRegex("[0-9a-f]").matcher("a").matches());
-    }
-
-    @Test
-    public void testRefPointName() throws TagValidationException {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        Mockito.when(mockValidationManager.getTagSpecIdByReferencePointTagSpecName(Mockito.anyString())).thenReturn(4);
-
-        String refPointName = rules.getReferencePointName(ValidatorProtos.ReferencePoint.newBuilder().setTagSpecName("AMP-CAROUSEL lightbox").build());
-
-        Assert.assertEquals(refPointName, "AMP-SELECTOR option");
-
-    }
-
-    @Test
-    public void testTagSpecGetters() throws TagValidationException {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        Mockito.when(mockValidationManager.getTagSpecIdByReferencePointTagSpecName(Mockito.anyString())).thenReturn(2);
-
-        ParsedTagSpec tagSpec = rules.getByTagSpecId("AMP-CAROUSEL lightbox");
-
-        Assert.assertEquals(tagSpec.getSpec().getSpecName(), "AMP-CAROUSEL lightbox");
-
-        Assert.assertEquals(rules.getTagSpecIdBySpecName("AMP-CAROUSEL lightbox").intValue(), 2);
-
-        Assert.assertEquals(rules.getByTagSpecId(2).getSpec().getSpecName(), "AMP-CAROUSEL lightbox");
-
-        Mockito.when(mockValidationManager.getTagSpecIdByReferencePointTagSpecName(Mockito.anyString())).thenReturn(4);
-        Assert.assertEquals(rules.getTagSpecIdByReferencePointTagSpecName("AMP-SELECTOR option"), 4);
-    }
-
-    @Test
-    public void testBetterValidationResultThan() throws ValidatorException {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        ValidatorProtos.ValidationResult.Builder resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-
-        ValidatorProtos.ValidationResult.Builder resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-
-        Assert.assertTrue(rules.betterValidationResultThan(resultA, resultB));
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-        resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG).build());
-
-        Assert.assertTrue(rules.betterValidationResultThan(resultA, resultB));
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG).build());
-        resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-
-        Assert.assertFalse(rules.betterValidationResultThan(resultA, resultB));
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE).build());
-        resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG).build());
-
-        Assert.assertTrue(rules.betterValidationResultThan(resultA, resultB));
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG).build());
-        resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE).build());
-
-        Assert.assertFalse(rules.betterValidationResultThan(resultA, resultB));
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-        resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG).build());
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE).build());
-
-
-        Assert.assertTrue(rules.betterValidationResultThan(resultA, resultB));
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG).build());
-        resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE).build());
-
-
-        Assert.assertFalse(rules.betterValidationResultThan(resultA, resultB));
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG).build());
-        resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG).build());
-
-
-        Assert.assertFalse(rules.betterValidationResultThan(resultA, resultB));
-
-    }
-
-    @Test
-    public void testTypeIdentifiersDevAndDisallowedAttr() {
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-
-        Mockito.when(mockAttrs.getLength()).thenReturn(4);
-        Mockito.when(mockAttrs.getLocalName(0)).thenReturn("amp4email");
-        Mockito.when(mockAttrs.getLocalName(1)).thenReturn("transformed");
-        Mockito.when(mockAttrs.getValue(1)).thenReturn("google;v=1");
-        Mockito.when(mockAttrs.getLocalName(2)).thenReturn("data-ampdevmode");
-        Mockito.when(mockAttrs.getLocalName(3)).thenReturn("amp4ads");
-
-        final List<String> formatIdentifiers = ImmutableList.of("transformed", "data-ampdevmode", "amp4email");
-
-        final Context mockContext = Mockito.mock(Context.class);
-
-        final ValidatorProtos.ValidationResult.Builder validationResult = ValidatorProtos.ValidationResult.newBuilder();
-        validationResult.addTypeIdentifier("transformed");
-
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        rules.validateTypeIdentifiers(mockAttrs, formatIdentifiers, mockContext, validationResult);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        Mockito.verify(mockContext, Mockito.times(2)).addError(errorCodeCapture.capture(),
-                Mockito.any(Locator.class),
-                listCaptor.capture(),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        Assert.assertEquals(errorCodeCapture.getAllValues().get(0), ValidatorProtos.ValidationError.Code.DEV_MODE_ONLY);
-        Assert.assertEquals(errorCodeCapture.getAllValues().get(1), ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR);
-
-        final List<List> params = listCaptor.getAllValues();
-        Assert.assertEquals(params.size(), 2);
-
-        Assert.assertEquals(params.get(0).size(), 0);
-
-        Assert.assertEquals(params.get(1).size(), 2);
-        Assert.assertEquals(params.get(1).get(0), "amp4ads");
-        Assert.assertEquals(params.get(1).get(1), "html");
-    }
-
-    @Test
-    public void testTypeIdentifiersInvalidAttrAndMandatoryAttrMissing() {
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-
-        Mockito.when(mockAttrs.getLength()).thenReturn(4);
-        Mockito.when(mockAttrs.getLocalName(0)).thenReturn("transformed");
-        Mockito.when(mockAttrs.getValue(0)).thenReturn("google;v=abc");
-
-        final List<String> formatIdentifiers = ImmutableList.of("transformed", "data-ampdevmode");
-
-        final Context mockContext = Mockito.mock(Context.class);
-
-        final ValidatorProtos.ValidationResult.Builder validationResult = ValidatorProtos.ValidationResult.newBuilder();
-        validationResult.addTypeIdentifier("transformed");
-
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        rules.validateTypeIdentifiers(mockAttrs, formatIdentifiers, mockContext, validationResult);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        Mockito.verify(mockContext, Mockito.times(2)).addError(errorCodeCapture.capture(),
-                Mockito.any(Locator.class),
-                listCaptor.capture(),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        Assert.assertEquals(errorCodeCapture.getAllValues().get(0), ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE);
-        Assert.assertEquals(errorCodeCapture.getAllValues().get(1), ValidatorProtos.ValidationError.Code.MANDATORY_ATTR_MISSING);
-
-        final List<List> params = listCaptor.getAllValues();
-        Assert.assertEquals(params.size(), 2);
-
-        Assert.assertEquals(params.get(0).size(), 3);
-        Assert.assertEquals(params.get(0).get(0), "transformed");
-        Assert.assertEquals(params.get(0).get(1), "html");
-        Assert.assertEquals(params.get(0).get(2), "google;v=abc");
-
-        Assert.assertEquals(params.get(1).size(), 2);
-        Assert.assertEquals(params.get(1).get(0), "transformed");
-        Assert.assertEquals(params.get(1).get(1), "html");
-    }
-
-    @Test
-    public void testValidateHtmlTag() {
-        ValidatorProtos.HtmlFormat.Code testHtmlFormatCode = ValidatorProtos.HtmlFormat.Code.AMP4EMAIL;
-        ParsedValidatorRules rules = new ParsedValidatorRules(testHtmlFormatCode, mockValidationManager);
-
-        final ParsedHtmlTag mockParsedHtmlTag = Mockito.mock(ParsedHtmlTag.class);
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(0);
-        Mockito.when(mockParsedHtmlTag.attrs()).thenReturn(mockAttrs);
-
-        Context mockContext = Mockito.mock(Context.class);
-
-        final ValidatorProtos.ValidationResult.Builder validationResult = ValidatorProtos.ValidationResult.newBuilder();
-
-        rules.validateHtmlTag(mockParsedHtmlTag, mockContext, validationResult);
-
-        Mockito.verify(mockContext, Mockito.times(1)).addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                Mockito.any(Locator.class),
-                Mockito.anyListOf(String.class),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-
-
-        testHtmlFormatCode = ValidatorProtos.HtmlFormat.Code.AMP4ADS;
-        mockContext = Mockito.mock(Context.class);
-
-        rules = new ParsedValidatorRules(testHtmlFormatCode, mockValidationManager);
-        rules.validateHtmlTag(mockParsedHtmlTag, mockContext, validationResult);
-
-        Mockito.verify(mockContext, Mockito.times(1)).addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                Mockito.any(Locator.class),
-                Mockito.anyListOf(String.class),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        testHtmlFormatCode = ValidatorProtos.HtmlFormat.Code.AMP4EMAIL;
-        mockContext = Mockito.mock(Context.class);
-
-        rules = new ParsedValidatorRules(testHtmlFormatCode, mockValidationManager);
-        rules.validateHtmlTag(mockParsedHtmlTag, mockContext, validationResult);
-
-        Mockito.verify(mockContext, Mockito.times(1)).addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                Mockito.any(Locator.class),
-                Mockito.anyListOf(String.class),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        testHtmlFormatCode = ValidatorProtos.HtmlFormat.Code.ACTIONS;
-        mockContext = Mockito.mock(Context.class);
-
-        rules = new ParsedValidatorRules(testHtmlFormatCode, mockValidationManager);
-        rules.validateHtmlTag(mockParsedHtmlTag, mockContext, validationResult);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        Mockito.verify(mockContext, Mockito.times(2))
-                .addError(errorCodeCapture.capture(),
-                    Mockito.any(Locator.class),
-                    listCaptor.capture(),
-                    Mockito.anyString(),
-                    Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        Assert.assertEquals(errorCodeCapture.getAllValues().get(1), ValidatorProtos.ValidationError.Code.MANDATORY_ATTR_MISSING);
-        Assert.assertEquals(listCaptor.getAllValues().get(1).size(), 2);
-        Assert.assertEquals(listCaptor.getAllValues().get(1).get(0), "actions");
-        Assert.assertEquals(listCaptor.getAllValues().get(1).get(1), "html");
-    }
-
-    @Test
-    public void testSpecificity() throws ValidatorException {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        Assert.assertEquals(rules.specificity(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG), 0);
-
-        Assert.assertEquals(rules.maxSpecificity(ImmutableList.of(
-                ValidatorProtos.ValidationError.newBuilder()
-                        .setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG)
-                        .build(),
-                ValidatorProtos.ValidationError.newBuilder()
-                        .setCode(ValidatorProtos.ValidationError.Code.MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE)
-                        .build())), 33);
-
-    }
-
-    @Test
-    public void testIsErrorSubset() {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        ValidatorProtos.ValidationResult.Builder resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-
-        ValidatorProtos.ValidationResult.Builder resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-        resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG).build());
-
-        Assert.assertFalse(rules.isErrorSubset(resultA.getErrorsList(), resultB.getErrorsList()));
-
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG).build());
-
-        resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultB.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-
-        Assert.assertTrue(rules.isErrorSubset(resultA.getErrorsList(), resultB.getErrorsList()));
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING).build());
-        resultA.addErrors(ValidatorProtos.ValidationError.newBuilder().setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG).build());
-
-    }
-
-    @Test(expectedExceptions = ValidatorException.class, expectedExceptionsMessageRegExp = "Status unknown")
-    public void testBetterValidationStatusThan() throws ValidatorException {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        ValidatorProtos.ValidationResult.Builder resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-
-        ValidatorProtos.ValidationResult.Builder resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-
-        Assert.assertFalse(rules.betterValidationStatusThan(resultA.getStatus(), resultB.getStatus()));
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-
-        resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-
-        Assert.assertTrue(rules.betterValidationStatusThan(resultA.getStatus(), resultB.getStatus()));
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-
-        resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-
-        Assert.assertFalse(rules.betterValidationStatusThan(resultA.getStatus(), resultB.getStatus()));
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-
-        resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.UNKNOWN);
-
-        Assert.assertTrue(rules.betterValidationStatusThan(resultA.getStatus(), resultB.getStatus()));
-
-        resultA = ValidatorProtos.ValidationResult.newBuilder();
-        resultA.setStatus(ValidatorProtos.ValidationResult.Status.UNKNOWN);
-
-        resultB = ValidatorProtos.ValidationResult.newBuilder();
-        resultB.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-
-        rules.betterValidationStatusThan(resultA.getStatus(), resultB.getStatus());
-    }
-
-    @Test
-    public void testDispatchForTagName() {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        Assert.assertTrue(rules.dispatchForTagName("SCRIPT").allTagSpecs().isEmpty());
-    }
-
-    @Test
-    public void testSpecUrl() {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-        Assert.assertEquals(rules.getStylesSpecUrl(), STYLES_SPEC_URL);
-        Assert.assertEquals(rules.getTemplateSpecUrl(), TEMPLATE_SPEC_URL);
-        Assert.assertEquals(rules.getScriptSpecUrl(), SCRIPT_SPEC_URL);
-
-    }
-
-    @Test
-    public void testDescendantTagLists() {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        Mockito.when(mockValidationManager.getDescendantTagLists())
-                .thenReturn(Collections.singletonList(ValidatorProtos.DescendantTagList.newBuilder()
-                        .addTag("tag1")
-                        .build()));
-
-        Assert.assertEquals(rules.getDescendantTagLists().get(0).getTag(0), "tag1");
-    }
-
-    @Test
-    public void testCombinedBlacklistedCdataRegex() {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        Mockito.when(mockValidationManager.getCombinedBlacklistedCdataRegex(Mockito.anyInt()))
-                .thenReturn("\\d");
-
-        Assert.assertEquals(rules.getCombinedBlacklistedCdataRegex(1), "\\d");
-    }
-
-    @Test
-    public void testMaybeEmitValueSetMismatchErrors() throws TagValidationException {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        final Context mockContext = Mockito.mock(Context.class);
-        Mockito.when(mockContext.valueSetsProvided()).thenReturn(ImmutableSet.of("a", "b"));
-        final ValidatorProtos.ValidationError mismatchError = ValidatorProtos.ValidationError.newBuilder()
-                .setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_PROPERTY_IN_ATTR_VALUE)
-                .build();
-        Mockito.when(mockContext.valueSetsRequired())
-                .thenReturn(ImmutableMap.of("a", ImmutableList.of(ValidatorProtos.ValidationError.newBuilder()
-                                .setCode(ValidatorProtos.ValidationError.Code.DISALLOWED_TAG)
-                                .build()),
-                "b", ImmutableList.of(ValidatorProtos.ValidationError.newBuilder()
-                                .setCode(ValidatorProtos.ValidationError.Code.EXTENSION_UNUSED)
-                                .build()),
-                        "c", ImmutableList.of(mismatchError)));
-
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        rules.maybeEmitValueSetMismatchErrors(mockContext, result);
-        Mockito.verify(mockContext, Mockito.times(1)).addBuiltError(mismatchError, result);
-    }
-
-    @Test
-    public void testMaybeEmitMandatoryAlternativesSatisfiedErrors() throws TagValidationException {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        Context mockContext = Mockito.mock(Context.class);
-
-        Mockito.when(mockContext.getMandatoryAlternativesSatisfied()).thenReturn(ImmutableList.of("alternatives"));
-
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        rules.maybeEmitMandatoryAlternativesSatisfiedErrors(mockContext, result);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING);
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 1);
-        Assert.assertEquals(params.get(0), "not-alternatives");
-
-    }
-
-    @Test
-    public void testMaybeEmitMandatoryTagValidationErrors() throws TagValidationException {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        Context mockContext = Mockito.mock(Context.class);
-        Mockito.when(mockContext.getTypeIdentifiers()).thenReturn(ImmutableList.of("transformed"));
-
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        rules.maybeEmitMandatoryTagValidationErrors(mockContext, result);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING);
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 1);
-        Assert.assertEquals(params.get(0), "SCRIPT");
-
-
-    }
-
-
-    @Test
-    public void testMaybeEmitAlsoRequiresTagValidationErrors() throws TagValidationException {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        Context mockContext = Mockito.mock(Context.class);
-        Mockito.when(mockContext.satisfiesCondition("requires")).thenReturn(false);
-        Mockito.when(mockContext.satisfiesCondition("excludes")).thenReturn(true);
-        Mockito.when(mockContext.getTagspecsValidated()).thenReturn(ImmutableMap.of(0, true,
-                1, true,
-                2, true,
-                3, true,
-                4, true));
-        final ExtensionsContext mockExtContext = Mockito.mock(ExtensionsContext.class);
-        Mockito.when(mockExtContext.unusedExtensionsRequired()).thenReturn(ImmutableList.of("unused_ext_1"));
-
-        Mockito.when(mockContext.getExtensions()).thenReturn(mockExtContext);
-
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-
-        rules.maybeEmitAlsoRequiresTagValidationErrors(mockContext, result);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        Mockito.verify(mockContext, Mockito.times(3))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addWarning(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<ValidatorProtos.ValidationError.Code> errorCodes = errorCodeCapture.getAllValues();
-        final List<List> params = listCaptor.getAllValues();
-
-        Assert.assertEquals(errorCodes.size(), 4);
-        Assert.assertEquals(errorCodes.get(0), ValidatorProtos.ValidationError.Code.TAG_REQUIRED_BY_MISSING);
-        Assert.assertEquals(errorCodes.get(1), ValidatorProtos.ValidationError.Code.TAG_EXCLUDED_BY_TAG);
-        Assert.assertEquals(errorCodes.get(2), ValidatorProtos.ValidationError.Code.EXTENSION_UNUSED);
-        Assert.assertEquals(errorCodes.get(3), ValidatorProtos.ValidationError.Code.WARNING_TAG_REQUIRED_BY_MISSING);
-
-        Assert.assertEquals(params.size(), 4);
-        Assert.assertEquals(params.get(0).size(), 2);
-        Assert.assertEquals(params.get(0).get(0), "requires");
-        Assert.assertEquals(params.get(0).get(1), "SCRIPT");
-
-        Assert.assertEquals(params.get(1).size(), 2);
-        Assert.assertEquals(params.get(1).get(0), "SCRIPT");
-        Assert.assertEquals(params.get(1).get(1), "excludes");
-
-        Assert.assertEquals(params.get(2).size(), 1);
-        Assert.assertEquals(params.get(2).get(0), "unused_ext_1");
-
-        Assert.assertEquals(params.get(3).size(), 2);
-        Assert.assertEquals(params.get(3).get(0), "amp-ad extension .js script");
-        Assert.assertEquals(params.get(3).get(1), "SCRIPT");
-    }
-
-    @Test
-    public void testmMybeEmitGlobalTagValidationErrors() throws TagValidationException {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        final ValidatorProtos.ValidationResult.Builder result = ValidatorProtos.ValidationResult.newBuilder();
-        Context mockContext = Mockito.mock(Context.class);
-        final ExtensionsContext mockExtContext = Mockito.mock(ExtensionsContext.class);
-        Mockito.when(mockExtContext.unusedExtensionsRequired()).thenReturn(ImmutableList.of("unused_ext_1"));
-        Mockito.when(mockContext.getExtensions()).thenReturn(mockExtContext);
-
-        rules.maybeEmitGlobalTagValidationErrors(mockContext, result);
-
-        Mockito.verify(mockContext, Mockito.times(5))
-                .addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                        Mockito.any(Locator.class),
-                        Mockito.anyListOf(String.class),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        Mockito.verify(mockContext, Mockito.times(0))
-                .addWarning(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                        Mockito.any(Locator.class),
-                        Mockito.anyListOf(String.class),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-    }
-
-
-    @Test
-    public void testGetParsedAttrSpecs() {
-        final ParsedValidatorRules rules = new ParsedValidatorRules(htmlFormatCode, mockValidationManager);
-
-        Assert.assertNotNull(rules.getParsedAttrSpecs());
-    }
-
-    private ValidatorProtos.ValidatorRules.Builder rulesBuilder;
-
-    private ValidatorProtos.HtmlFormat.Code htmlFormatCode;
-
-    private AMPValidatorManager mockValidationManager;
-
-    private static final String STYLES_SPEC_URL = "https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages";
-
-    private static final String TEMPLATE_SPEC_URL = "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags";
-
-    private static final String SCRIPT_SPEC_URL = "https://amp.dev/documentation/components/amp-mustache";
-
-    private static final int MAX_BYTES = 1000;
-
-
-
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/ParsedValuePropertiesTest.java b/validator/java/src/test/java/dev/amp/validator/ParsedValuePropertiesTest.java
deleted file mode 100644
index 9e0042fea3bb0..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ParsedValuePropertiesTest.java
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Oath Inc..
- */
-
-package dev.amp.validator;
-
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-public class ParsedValuePropertiesTest {
-
-    @Test
-    public void testGetters() {
-        final ValidatorProtos.PropertySpecList.Builder specListBuilder = ValidatorProtos.PropertySpecList.newBuilder();
-        specListBuilder.addProperties(ValidatorProtos.PropertySpec.newBuilder().setName("prop1").setMandatory(true).build());
-        specListBuilder.addProperties(ValidatorProtos.PropertySpec.newBuilder().setName("prop2").build());
-
-        final ParsedValueProperties parsedValueProperties = new ParsedValueProperties(specListBuilder.build());
-
-        Assert.assertEquals(parsedValueProperties.getValuePropertyByName().size(), 2);
-        Assert.assertTrue(parsedValueProperties.getValuePropertyByName().containsKey("prop1"));
-        Assert.assertTrue(parsedValueProperties.getValuePropertyByName().containsKey("prop2"));
-
-        Assert.assertEquals(parsedValueProperties.getMandatoryValuePropertyNames().size(), 1);
-        Assert.assertEquals(parsedValueProperties.getMandatoryValuePropertyNames().get(0), "prop1");
-
-        parsedValueProperties.cleanup();
-
-        Assert.assertNull(parsedValueProperties.getValuePropertyByName());
-        Assert.assertNull(parsedValueProperties.getMandatoryValuePropertyNames());
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/ReferencePointMatcherTest.java b/validator/java/src/test/java/dev/amp/validator/ReferencePointMatcherTest.java
deleted file mode 100644
index b8bb45f7af682..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ReferencePointMatcherTest.java
+++ /dev/null
@@ -1,814 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Oath Inc..
- */
-
-package dev.amp.validator;
-
-import com.google.common.collect.ImmutableList;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.exception.TagValidationException;
-import dev.amp.validator.exception.ValidatorException;
-import org.mockito.ArgumentCaptor;
-import org.mockito.Mockito;
-import org.mockito.invocation.InvocationOnMock;
-import org.mockito.stubbing.Answer;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-import org.xml.sax.Attributes;
-import org.xml.sax.Locator;
-
-import java.io.IOException;
-import java.util.List;
-
-/**
- * Tests for {@link ReferencePointMatcher}
- */
-public class ReferencePointMatcherTest {
-
-    @Test(expectedExceptions = TagValidationException.class, expectedExceptionsMessageRegExp = "Reference point matcher should not be empty")
-    public void testTagValidationFailure() throws TagValidationException {
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final ParsedReferencePoints mockPoints = Mockito.mock(ParsedReferencePoints.class);
-        Mockito.when(mockPoints.empty()).thenReturn(true);
-
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId2";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 30;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 40;
-            }
-        };
-
-        new ReferencePointMatcher(mockRules, mockPoints, locator);
-    }
-
-    @Test(expectedExceptions = ValidatorException.class,
-            expectedExceptionsMessageRegExp = "Successful validation should have exited earlier")
-    public void testValidateTagValidatorException() throws TagValidationException, ValidatorException, IOException, CssValidationException {
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final ParsedTagSpec mockTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockTagSpec.getSpec()).thenReturn(ValidatorProtos.TagSpec.newBuilder().build());
-
-        Mockito.when(mockTagSpec.isUsedForTypeIdentifiers(Mockito.anyListOf(String.class))).thenReturn(true);
-
-        final ParsedReferencePoints mockPoints = Mockito.mock(ParsedReferencePoints.class);
-
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId2";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 30;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 40;
-            }
-        };
-
-        final ParsedHtmlTag mockHtmlTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(mockHtmlTag.upperName()).thenReturn("HTML");
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(0);
-        Mockito.when(mockHtmlTag.attrs()).thenReturn(mockAttrs);
-
-        final Context mockContext = Mockito.mock(Context.class);
-
-        Mockito.when(mockRules.getByTagSpecId(Mockito.anyString())).thenReturn(mockTagSpec);
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder = ValidatorProtos.ReferencePoint.newBuilder();
-
-        final ValidatorProtos.ReferencePoint refPoint = refPointBuilder.build();
-
-        Mockito.when(mockPoints.iterate()).thenReturn(ImmutableList.of(refPoint));
-
-
-        final ReferencePointMatcher refPointMatcher = new ReferencePointMatcher(mockRules, mockPoints, locator);
-        refPointMatcher.validateTag(mockHtmlTag, mockContext);
-    }
-
-    @Test
-    public void testValidateTagPass() throws TagValidationException, ValidatorException, IOException, CssValidationException {
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final ParsedTagSpec mockTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockTagSpec.getSpec()).thenReturn(ValidatorProtos.TagSpec.newBuilder().build());
-
-        Mockito.when(mockTagSpec.isUsedForTypeIdentifiers(Mockito.anyListOf(String.class))).thenReturn(true);
-
-        final ParsedReferencePoints mockPoints = Mockito.mock(ParsedReferencePoints.class);
-
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId2";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 30;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 40;
-            }
-        };
-
-        final ParsedHtmlTag mockHtmlTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(mockHtmlTag.upperName()).thenReturn("HTML");
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(0);
-        Mockito.when(mockHtmlTag.attrs()).thenReturn(mockAttrs);
-
-        final Context mockContext = Mockito.mock(Context.class);
-
-        Mockito.when(mockRules.getByTagSpecId(Mockito.anyString())).thenReturn(mockTagSpec);
-        Mockito.when(mockRules.betterValidationResultThan(Mockito.any(ValidatorProtos.ValidationResult.Builder.class),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class))).thenReturn(true);
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder = ValidatorProtos.ReferencePoint.newBuilder();
-
-        final ValidatorProtos.ReferencePoint refPoint = refPointBuilder.build();
-
-        Mockito.when(mockPoints.iterate()).thenReturn(ImmutableList.of(refPoint));
-
-
-        final ReferencePointMatcher refPointMatcher = new ReferencePointMatcher(mockRules, mockPoints, locator);
-        final ValidateTagResult validateTagResult = refPointMatcher.validateTag(mockHtmlTag, mockContext);
-
-        Assert.assertEquals(validateTagResult.getValidationResult().getStatus(), ValidatorProtos.ValidationResult.Status.PASS);
-        Assert.assertEquals(validateTagResult.getBestMatchTagSpec(), mockTagSpec);
-
-        refPointMatcher.cleanup();
-    }
-
-    @Test
-    public void testValidateTagFailOneRefPoint() throws TagValidationException, ValidatorException, IOException, CssValidationException {
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final ParsedTagSpec mockTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockTagSpec.getSpec()).thenReturn(ValidatorProtos.TagSpec.newBuilder().setMandatoryParent("HEAD").build());
-
-        Mockito.when(mockTagSpec.isUsedForTypeIdentifiers(Mockito.anyListOf(String.class))).thenReturn(true);
-
-        final ParsedReferencePoints mockPoints = Mockito.mock(ParsedReferencePoints.class);
-
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId2";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 30;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 40;
-            }
-        };
-
-        final ParsedHtmlTag mockHtmlTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(mockHtmlTag.upperName()).thenReturn("HTML");
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(0);
-        Mockito.when(mockHtmlTag.attrs()).thenReturn(mockAttrs);
-
-        final Context mockContext = Mockito.mock(Context.class);
-        Mockito.doAnswer(new Answer() {
-            public Void answer(final InvocationOnMock invocation) {
-                Object[] args = invocation.getArguments();
-
-                ValidatorProtos.ValidationResult.Builder validationResult = (ValidatorProtos.ValidationResult.Builder) args[4];
-                validationResult.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-
-                return null;
-            }
-        }).when(mockContext).addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                                    Mockito.any(Locator.class),
-                                    Mockito.anyListOf(String.class),
-                                    Mockito.anyString(),
-                                    Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        Mockito.when(mockRules.getByTagSpecId(Mockito.anyString())).thenReturn(mockTagSpec);
-        Mockito.when(mockRules.betterValidationResultThan(Mockito.any(ValidatorProtos.ValidationResult.Builder.class),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class))).thenReturn(true);
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentTagName()).thenReturn("BODY");
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder = ValidatorProtos.ReferencePoint.newBuilder();
-
-        final ValidatorProtos.ReferencePoint refPoint = refPointBuilder.build();
-
-        Mockito.when(mockPoints.iterate()).thenReturn(ImmutableList.of(refPoint));
-        Mockito.when(mockPoints.size()).thenReturn(1);
-
-        final ReferencePointMatcher refPointMatcher = new ReferencePointMatcher(mockRules, mockPoints, locator);
-        final ValidateTagResult validateTagResult = refPointMatcher.validateTag(mockHtmlTag, mockContext);
-
-        Assert.assertEquals(validateTagResult.getValidationResult().getStatus(), ValidatorProtos.ValidationResult.Status.FAIL);
-        Assert.assertNull(validateTagResult.getBestMatchTagSpec());
-
-        Mockito.verify(mockContext, Mockito.times(2)).addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                Mockito.any(Locator.class),
-                Mockito.anyListOf(String.class),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        refPointMatcher.cleanup();
-    }
-
-    @Test
-    public void testValidateTagFailTwoRefPoint() throws TagValidationException, ValidatorException, IOException, CssValidationException {
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final ParsedTagSpec mockTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockTagSpec.getSpec()).thenReturn(ValidatorProtos.TagSpec.newBuilder().setMandatoryParent("HEAD").build());
-
-        Mockito.when(mockTagSpec.isUsedForTypeIdentifiers(Mockito.anyListOf(String.class))).thenReturn(true);
-
-        final ParsedReferencePoints mockPoints = Mockito.mock(ParsedReferencePoints.class);
-
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId2";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 30;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 40;
-            }
-        };
-
-        final ParsedHtmlTag mockHtmlTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(mockHtmlTag.upperName()).thenReturn("HTML");
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(0);
-        Mockito.when(mockHtmlTag.attrs()).thenReturn(mockAttrs);
-
-        final Context mockContext = Mockito.mock(Context.class);
-        Mockito.doAnswer(new Answer() {
-            public Void answer(final InvocationOnMock invocation) {
-                Object[] args = invocation.getArguments();
-
-                ValidatorProtos.ValidationResult.Builder validationResult = (ValidatorProtos.ValidationResult.Builder) args[4];
-                validationResult.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-
-                return null;
-            }
-        }).when(mockContext).addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                Mockito.any(Locator.class),
-                Mockito.anyListOf(String.class),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        Mockito.when(mockRules.getByTagSpecId(Mockito.anyString())).thenReturn(mockTagSpec);
-        Mockito.when(mockRules.betterValidationResultThan(Mockito.any(ValidatorProtos.ValidationResult.Builder.class),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class))).thenReturn(true);
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentTagName()).thenReturn("BODY");
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder = ValidatorProtos.ReferencePoint.newBuilder();
-
-        final ValidatorProtos.ReferencePoint refPoint = refPointBuilder.build();
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder2 = ValidatorProtos.ReferencePoint.newBuilder();
-
-        final ValidatorProtos.ReferencePoint refPoint2 = refPointBuilder2.build();
-
-        Mockito.when(mockPoints.iterate()).thenReturn(ImmutableList.of(refPoint, refPoint2));
-        Mockito.when(mockPoints.size()).thenReturn(2);
-
-        final ReferencePointMatcher refPointMatcher = new ReferencePointMatcher(mockRules, mockPoints, locator);
-        Assert.assertEquals(refPointMatcher.getLineCol(), locator);
-
-        final ValidateTagResult validateTagResult = refPointMatcher.validateTag(mockHtmlTag, mockContext);
-
-        Assert.assertEquals(validateTagResult.getValidationResult().getStatus(), ValidatorProtos.ValidationResult.Status.FAIL);
-        Assert.assertNull(validateTagResult.getBestMatchTagSpec());
-
-        Mockito.verify(mockContext, Mockito.times(3)).addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                Mockito.any(Locator.class),
-                Mockito.anyListOf(String.class),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        refPointMatcher.cleanup();
-
-        Assert.assertNull(refPointMatcher.getLineCol());
-    }
-
-    @Test(expectedExceptions = ValidatorException.class, expectedExceptionsMessageRegExp = "Successful validation should have exited earlier")
-    public void testValidateTagPassNotUsedForTypeIdentifiers()
-            throws TagValidationException, ValidatorException, IOException, CssValidationException {
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final ParsedTagSpec mockTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockTagSpec.getSpec()).thenReturn(ValidatorProtos.TagSpec.newBuilder().setMandatoryParent("HEAD").build());
-
-        Mockito.when(mockTagSpec.isUsedForTypeIdentifiers(Mockito.anyListOf(String.class))).thenReturn(false);
-
-        final ParsedReferencePoints mockPoints = Mockito.mock(ParsedReferencePoints.class);
-
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId2";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 30;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 40;
-            }
-        };
-
-        final ParsedHtmlTag mockHtmlTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(mockHtmlTag.upperName()).thenReturn("HTML");
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(0);
-        Mockito.when(mockHtmlTag.attrs()).thenReturn(mockAttrs);
-
-        final Context mockContext = Mockito.mock(Context.class);
-        Mockito.doAnswer(new Answer() {
-            public Void answer(final InvocationOnMock invocation) {
-                Object[] args = invocation.getArguments();
-
-                ValidatorProtos.ValidationResult.Builder validationResult = (ValidatorProtos.ValidationResult.Builder) args[4];
-                validationResult.setStatus(ValidatorProtos.ValidationResult.Status.FAIL);
-
-                return null;
-            }
-        }).when(mockContext).addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                Mockito.any(Locator.class),
-                Mockito.anyListOf(String.class),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        Mockito.when(mockRules.getByTagSpecId(Mockito.anyString())).thenReturn(mockTagSpec);
-        Mockito.when(mockRules.betterValidationResultThan(Mockito.any(ValidatorProtos.ValidationResult.Builder.class),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class))).thenReturn(true);
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentTagName()).thenReturn("BODY");
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder = ValidatorProtos.ReferencePoint.newBuilder();
-
-        final ValidatorProtos.ReferencePoint refPoint = refPointBuilder.build();
-
-        Mockito.when(mockPoints.iterate()).thenReturn(ImmutableList.of(refPoint));
-        Mockito.when(mockPoints.size()).thenReturn(1);
-
-        final ReferencePointMatcher refPointMatcher = new ReferencePointMatcher(mockRules, mockPoints, locator);
-        refPointMatcher.validateTag(mockHtmlTag, mockContext);
-    }
-
-    @Test
-    public void testExitParentTagMandatoryTagMissing()
-            throws TagValidationException, ValidatorException {
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final ParsedTagSpec mockTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockTagSpec.id()).thenReturn(10);
-
-        final ParsedReferencePoints mockPoints = Mockito.mock(ParsedReferencePoints.class);
-
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId2";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 30;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 40;
-            }
-        };
-
-        final ParsedHtmlTag mockHtmlTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(mockHtmlTag.upperName()).thenReturn("HTML");
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(0);
-        Mockito.when(mockHtmlTag.attrs()).thenReturn(mockAttrs);
-
-        final Context mockContext = Mockito.mock(Context.class);
-
-        Mockito.when(mockRules.getByTagSpecId(Mockito.anyString())).thenReturn(mockTagSpec);
-        Mockito.when(mockRules.betterValidationResultThan(Mockito.any(ValidatorProtos.ValidationResult.Builder.class),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class))).thenReturn(true);
-        Mockito.when(mockRules.getReferencePointName(Mockito.any(ValidatorProtos.ReferencePoint.class))).thenReturn("refPoint1");
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentTagName()).thenReturn("BODY");
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder = ValidatorProtos.ReferencePoint.newBuilder();
-
-        final ValidatorProtos.ReferencePoint refPoint = refPointBuilder.setMandatory(true).build();
-        Mockito.when(mockRules.getTagSpecIdByReferencePointTagSpecName(Mockito.anyString())).thenReturn(8);
-
-
-        Mockito.when(mockPoints.iterate()).thenReturn(ImmutableList.of(refPoint));
-        Mockito.when(mockPoints.size()).thenReturn(2);
-        Mockito.when(mockPoints.parentTagSpecName()).thenReturn("parent1");
-        ValidatorProtos.ValidationResult.Builder builder = ValidatorProtos.ValidationResult.newBuilder();
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final ReferencePointMatcher refPointMatcher = new ReferencePointMatcher(mockRules, mockPoints, locator);
-
-        refPointMatcher.recordMatch(mockTagSpec);
-        refPointMatcher.recordMatch(mockTagSpec);
-
-        final ParsedTagSpec mockTagSpec2 = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockTagSpec2.id()).thenReturn(9);
-
-        refPointMatcher.exitParentTag(mockContext, builder);
-
-        Mockito.verify(mockContext, Mockito.times(1)).addError(errorCodeCapture.capture(),
-                Mockito.any(Locator.class),
-                listCaptor.capture(),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 2);
-        Assert.assertEquals(params.get(0), "refPoint1");
-        Assert.assertEquals(params.get(1), "parent1");
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.MANDATORY_REFERENCE_POINT_MISSING);
-
-        refPointMatcher.cleanup();
-    }
-
-    @Test
-    public void testExitParentTagDuplicateRefPoint()
-            throws TagValidationException, ValidatorException {
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final ParsedTagSpec mockTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockTagSpec.id()).thenReturn(10);
-
-        final ParsedReferencePoints mockPoints = Mockito.mock(ParsedReferencePoints.class);
-
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId2";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 30;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 40;
-            }
-        };
-
-        final ParsedHtmlTag mockHtmlTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(mockHtmlTag.upperName()).thenReturn("HTML");
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(0);
-        Mockito.when(mockHtmlTag.attrs()).thenReturn(mockAttrs);
-
-        final Context mockContext = Mockito.mock(Context.class);
-
-        Mockito.when(mockRules.getByTagSpecId(Mockito.anyString())).thenReturn(mockTagSpec);
-        Mockito.when(mockRules.betterValidationResultThan(Mockito.any(ValidatorProtos.ValidationResult.Builder.class),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class))).thenReturn(true);
-        Mockito.when(mockRules.getReferencePointName(Mockito.any(ValidatorProtos.ReferencePoint.class))).thenReturn("refPoint1");
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentTagName()).thenReturn("BODY");
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder = ValidatorProtos.ReferencePoint.newBuilder();
-
-        final ValidatorProtos.ReferencePoint refPoint = refPointBuilder.setUnique(true).build();
-        Mockito.when(mockRules.getTagSpecIdByReferencePointTagSpecName(Mockito.anyString())).thenReturn(10);
-
-
-        Mockito.when(mockPoints.iterate()).thenReturn(ImmutableList.of(refPoint));
-        Mockito.when(mockPoints.size()).thenReturn(2);
-        Mockito.when(mockPoints.parentTagSpecName()).thenReturn("parent1");
-        ValidatorProtos.ValidationResult.Builder builder = ValidatorProtos.ValidationResult.newBuilder();
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final ReferencePointMatcher refPointMatcher = new ReferencePointMatcher(mockRules, mockPoints, locator);
-
-        refPointMatcher.recordMatch(mockTagSpec);
-        refPointMatcher.recordMatch(mockTagSpec);
-
-        final ParsedTagSpec mockTagSpec2 = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockTagSpec2.id()).thenReturn(9);
-
-        refPointMatcher.exitParentTag(mockContext, builder);
-
-        Mockito.verify(mockContext, Mockito.times(1)).addError(errorCodeCapture.capture(),
-                Mockito.any(Locator.class),
-                listCaptor.capture(),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 2);
-        Assert.assertEquals(params.get(0), "refPoint1");
-        Assert.assertEquals(params.get(1), "parent1");
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.DUPLICATE_REFERENCE_POINT);
-
-        refPointMatcher.cleanup();
-    }
-
-    @Test
-    public void testExitParentTag()
-            throws TagValidationException, ValidatorException {
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final ParsedTagSpec mockTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockTagSpec.id()).thenReturn(10);
-
-        final ParsedReferencePoints mockPoints = Mockito.mock(ParsedReferencePoints.class);
-
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId2";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 30;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 40;
-            }
-        };
-
-        final ParsedHtmlTag mockHtmlTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(mockHtmlTag.upperName()).thenReturn("HTML");
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(0);
-        Mockito.when(mockHtmlTag.attrs()).thenReturn(mockAttrs);
-
-        final Context mockContext = Mockito.mock(Context.class);
-
-        Mockito.when(mockRules.getByTagSpecId(Mockito.anyString())).thenReturn(mockTagSpec);
-        Mockito.when(mockRules.betterValidationResultThan(Mockito.any(ValidatorProtos.ValidationResult.Builder.class),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class))).thenReturn(true);
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentTagName()).thenReturn("BODY");
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder = ValidatorProtos.ReferencePoint.newBuilder();
-
-        final ValidatorProtos.ReferencePoint refPoint = refPointBuilder.setMandatory(true).build();
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder2 = ValidatorProtos.ReferencePoint.newBuilder();
-
-        final ValidatorProtos.ReferencePoint refPoint2 = refPointBuilder2.setUnique(true).build();
-        Mockito.when(mockRules.getTagSpecIdByReferencePointTagSpecName(Mockito.anyString())).thenReturn(8).thenReturn(10);
-
-
-        Mockito.when(mockPoints.iterate()).thenReturn(ImmutableList.of(refPoint, refPoint2));
-        Mockito.when(mockPoints.size()).thenReturn(2);
-
-        ValidatorProtos.ValidationResult.Builder builder = ValidatorProtos.ValidationResult.newBuilder();
-
-        final ReferencePointMatcher refPointMatcher = new ReferencePointMatcher(mockRules, mockPoints, locator);
-
-        refPointMatcher.recordMatch(mockTagSpec);
-        refPointMatcher.recordMatch(mockTagSpec);
-
-        final ParsedTagSpec mockTagSpec2 = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockTagSpec2.id()).thenReturn(9);
-
-        refPointMatcher.exitParentTag(mockContext, builder);
-
-        Mockito.verify(mockContext, Mockito.times(2)).addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                Mockito.any(Locator.class),
-                Mockito.anyListOf(String.class),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        refPointMatcher.cleanup();
-    }
-
-    @Test
-    public void testExitParentTagZeroErrors()
-            throws TagValidationException, ValidatorException {
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final ParsedTagSpec mockTagSpec = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockTagSpec.id()).thenReturn(10);
-
-        final ParsedReferencePoints mockPoints = Mockito.mock(ParsedReferencePoints.class);
-
-        final Locator locator = new Locator() {
-            @Override
-            public String getPublicId() {
-                return "pubId1";
-            }
-
-            @Override
-            public String getSystemId() {
-                return "sysId2";
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 30;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 40;
-            }
-        };
-
-        final ParsedHtmlTag mockHtmlTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(mockHtmlTag.upperName()).thenReturn("HTML");
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(0);
-        Mockito.when(mockHtmlTag.attrs()).thenReturn(mockAttrs);
-
-        final Context mockContext = Mockito.mock(Context.class);
-
-        Mockito.when(mockRules.getByTagSpecId(Mockito.anyString())).thenReturn(mockTagSpec);
-        Mockito.when(mockRules.betterValidationResultThan(Mockito.any(ValidatorProtos.ValidationResult.Builder.class),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class))).thenReturn(true);
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentTagName()).thenReturn("BODY");
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder = ValidatorProtos.ReferencePoint.newBuilder();
-
-        final ValidatorProtos.ReferencePoint refPoint = refPointBuilder.build();
-
-        final ValidatorProtos.ReferencePoint.Builder refPointBuilder2 = ValidatorProtos.ReferencePoint.newBuilder();
-
-        final ValidatorProtos.ReferencePoint refPoint2 = refPointBuilder2.build();
-        Mockito.when(mockRules.getTagSpecIdByReferencePointTagSpecName(Mockito.anyString())).thenReturn(8).thenReturn(10);
-
-
-        Mockito.when(mockPoints.iterate()).thenReturn(ImmutableList.of(refPoint, refPoint2));
-        Mockito.when(mockPoints.size()).thenReturn(2);
-
-        ValidatorProtos.ValidationResult.Builder builder = ValidatorProtos.ValidationResult.newBuilder();
-
-        final ReferencePointMatcher refPointMatcher = new ReferencePointMatcher(mockRules, mockPoints, locator);
-
-        refPointMatcher.recordMatch(mockTagSpec);
-        refPointMatcher.recordMatch(mockTagSpec);
-
-        final ParsedTagSpec mockTagSpec2 = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockTagSpec2.id()).thenReturn(9);
-
-        refPointMatcher.exitParentTag(mockContext, builder);
-
-        Mockito.verify(mockContext, Mockito.times(0)).addError(Mockito.any(ValidatorProtos.ValidationError.Code.class),
-                Mockito.any(Locator.class),
-                Mockito.anyListOf(String.class),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        refPointMatcher.cleanup();
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/SrcsetParsingResultTest.java b/validator/java/src/test/java/dev/amp/validator/SrcsetParsingResultTest.java
deleted file mode 100644
index 9d40a088170bb..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/SrcsetParsingResultTest.java
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-import java.util.Collections;
-
-/**
- * Tests for {@link SrcsetParsingResult}
- *
- * @author sphatak01
- */
-public class SrcsetParsingResultTest {
-
-    @Test
-    public void testSettersGetters() {
-        final SrcsetParsingResult srcsetParsingResult = new SrcsetParsingResult();
-        Assert.assertFalse(srcsetParsingResult.isSuccess());
-        srcsetParsingResult.setSuccess(true);
-        Assert.assertTrue(srcsetParsingResult.isSuccess());
-
-        Assert.assertEquals(srcsetParsingResult.getErrorCode(), ValidatorProtos.ValidationError.Code.UNKNOWN_CODE);
-        srcsetParsingResult.setErrorCode(ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE);
-        Assert.assertEquals(srcsetParsingResult.getErrorCode(), ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE);
-
-        Assert.assertEquals(srcsetParsingResult.getSrcsetImages().size(), 0);
-        Assert.assertEquals(srcsetParsingResult.getSrcsetImagesSize(), 0);
-        srcsetParsingResult.add(new SrcsetSourceDef("url1", "23"));
-        Assert.assertEquals(srcsetParsingResult.getSrcsetImages().size(), 1);
-        Assert.assertEquals(srcsetParsingResult.getSrcsetImagesSize(), 1);
-        Assert.assertEquals(srcsetParsingResult.getSrcsetImages().get(0).getUrl(), "url1");
-        Assert.assertEquals(srcsetParsingResult.getSrcsetImages().get(0).getWidthOrPixelDensity(), "23");
-
-        srcsetParsingResult.setSrcsetImages(Collections.singletonList(new SrcsetSourceDef("url2", "22")));
-        Assert.assertEquals(srcsetParsingResult.getSrcsetImages().size(), 1);
-        Assert.assertEquals(srcsetParsingResult.getSrcsetImagesSize(), 1);
-        Assert.assertEquals(srcsetParsingResult.getSrcsetImages().get(0).getUrl(), "url2");
-        Assert.assertEquals(srcsetParsingResult.getSrcsetImages().get(0).getWidthOrPixelDensity(), "22");
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/TagSpecDispatchTest.java b/validator/java/src/test/java/dev/amp/validator/TagSpecDispatchTest.java
deleted file mode 100644
index bccbb0d243361..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/TagSpecDispatchTest.java
+++ /dev/null
@@ -1,109 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Oath Inc..
- */
-
-package dev.amp.validator;
-
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-import java.util.List;
-
-/**
- * Tests for {@link TagSpecDispatch}
- *
- * @author sphatak01
- */
-public class TagSpecDispatchTest {
-
-    @Test
-    public void testRegisterDispatchKeyAndTagSpec() {
-        final TagSpecDispatch tagSpecDispatch = new TagSpecDispatch();
-
-        final String dispatchKey1 = "dk1";
-
-        final int tagSpecId1 = 10;
-        final int tagSpecId2 = 9;
-        tagSpecDispatch.registerDispatchKey(dispatchKey1, tagSpecId1);
-        tagSpecDispatch.registerDispatchKey(dispatchKey1, tagSpecId2);
-
-        tagSpecDispatch.registerTagSpec(tagSpecId1);
-        tagSpecDispatch.registerTagSpec(tagSpecId2);
-
-        Assert.assertFalse(tagSpecDispatch.empty());
-        Assert.assertTrue(tagSpecDispatch.hasDispatchKeys());
-        Assert.assertTrue(tagSpecDispatch.hasTagSpecs());
-        Assert.assertEquals(tagSpecDispatch.allTagSpecs().size(), 2);
-        Assert.assertEquals(tagSpecDispatch.allTagSpecs().get(0), Integer.valueOf(10));
-        Assert.assertEquals(tagSpecDispatch.allTagSpecs().get(1), Integer.valueOf(9));
-    }
-
-    @Test
-    public void testMatchingDispatchKeyEmpty() {
-        final TagSpecDispatch tagSpecDispatch = new TagSpecDispatch();
-
-        Assert.assertTrue(tagSpecDispatch.matchingDispatchKey("attr1", "value1", "manPar1").isEmpty());
-    }
-
-    @Test
-    public void testMatchingNameValueDispatchKey() {
-        final String attrName = "content";
-        final String attrValue = "val1";
-
-        final TagSpecDispatch tagSpecDispatch = new TagSpecDispatch();
-        tagSpecDispatch.registerDispatchKey(attrName + "\0" + attrValue, 10);
-        tagSpecDispatch.registerDispatchKey(attrName + "\0" + attrValue + "\0" + "true", 11);
-
-        final List<Integer> matchingKeys = tagSpecDispatch.matchingDispatchKey("content", "val1", "HEAD");
-
-        Assert.assertEquals(matchingKeys.size(), 2);
-        Assert.assertEquals(matchingKeys.get(0).intValue(), 11);
-        Assert.assertEquals(matchingKeys.get(1).intValue(), 10);
-
-    }
-
-    @Test
-    public void testMatchingNameDispatchKey() {
-        final String attrName = "content";
-
-        final TagSpecDispatch tagSpecDispatch = new TagSpecDispatch();
-        tagSpecDispatch.registerDispatchKey(attrName, 10);
-
-        final List<Integer> matchingKeys = tagSpecDispatch.matchingDispatchKey("content", "val1", "HEAD");
-
-        Assert.assertEquals(matchingKeys.size(), 1);
-        Assert.assertEquals(matchingKeys.get(0).intValue(), 10);
-
-    }
-
-    @Test
-    public void testMatchingDispatchKeySameNameAndValue() {
-        final String attrName = "foo";
-
-        final TagSpecDispatch tagSpecDispatch = new TagSpecDispatch();
-        tagSpecDispatch.registerDispatchKey(attrName, 10);
-
-        final List<Integer> matchingKeys = tagSpecDispatch.matchingDispatchKey("foo", "foo", "HEAD");
-
-        Assert.assertEquals(matchingKeys.size(), 2);
-        Assert.assertEquals(matchingKeys.get(0).intValue(), 10);
-        Assert.assertEquals(matchingKeys.get(1).intValue(), 10);
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/TagStackEntryTest.java b/validator/java/src/test/java/dev/amp/validator/TagStackEntryTest.java
deleted file mode 100644
index aceb27454f513..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/TagStackEntryTest.java
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-/**
- * Tests for {@link TagStackEntry}
- *
- * @author sphatak01
- */
-public class TagStackEntryTest {
-
-    @Test
-    public void testSettersgetters() {
-        final TagStackEntry tagStackEntry = new TagStackEntry("tagName");
-
-        Assert.assertEquals(tagStackEntry.getTagName(), "tagName");
-        Assert.assertNull(tagStackEntry.getTagSpec());
-        Assert.assertNull(tagStackEntry.getReferencePoint());
-        Assert.assertFalse(tagStackEntry.getHasDescendantConstraintLists());
-        Assert.assertEquals(tagStackEntry.getNumChildren(), 0);
-        Assert.assertEquals(tagStackEntry.getOnlyChildTagName(), "");
-        Assert.assertNull(tagStackEntry.getOnlyChildErrorLineCol());
-        Assert.assertEquals(tagStackEntry.getLastChildTagName(), "");
-        Assert.assertEquals(tagStackEntry.getLastChildUrl(), "");
-        Assert.assertNull(tagStackEntry.getOnlyChildErrorLineCol());
-        Assert.assertNull(tagStackEntry.getCdataMatcher());
-        Assert.assertNull(tagStackEntry.getChildTagMatcher());
-        Assert.assertNull(tagStackEntry.getReferencePointMatcher());
-
-        tagStackEntry.cleanup();
-    }
-}
\ No newline at end of file
diff --git a/validator/java/src/test/java/dev/amp/validator/TagStackTest.java b/validator/java/src/test/java/dev/amp/validator/TagStackTest.java
deleted file mode 100644
index f16cfaec622f4..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/TagStackTest.java
+++ /dev/null
@@ -1,581 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import dev.amp.validator.exception.TagValidationException;
-import org.testng.Assert;
-import org.testng.annotations.BeforeClass;
-import org.testng.annotations.Test;
-import org.xml.sax.Locator;
-
-import static org.mockito.Mockito.mock;
-import static org.mockito.Mockito.when;
-import static org.mockito.Mockito.verify;
-import static org.mockito.Mockito.times;
-import static org.mockito.Mockito.any;
-
-/**
- * Tests for {@link TagStack}
- *
- * @author sphatak01
- */
-public class TagStackTest {
-
-    @BeforeClass
-    public void init() throws Exception {
-        ampValidatorManager = new AMPValidatorManager();
-        ampValidatorManager.loadRule("validator-all-test.protoascii");
-    }
-
-    @Test
-    public void testParentStackEntry() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        Assert.assertEquals(tagStack.parentTagName(), "!DOCTYPE");
-        Assert.assertEquals(tagStack.parentStackEntry().getTagName(), "!DOCTYPE");
-    }
-
-    @Test(expectedExceptions = TagValidationException.class)
-    public void testParentStackEntryError() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        final Context context = mock(Context.class);
-        final ValidatorProtos.ValidationResult.Builder validationBuilder = ValidatorProtos.ValidationResult.newBuilder();
-        validationBuilder.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-
-        tagStack.exitTag(context, validationBuilder);
-        tagStack.exitTag(context, validationBuilder);
-
-        tagStack.parentStackEntry();
-    }
-
-    @Test
-    public void testBack() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        Assert.assertEquals(tagStack.back().getTagName(), "!DOCTYPE");
-    }
-
-    @Test(expectedExceptions = TagValidationException.class)
-    public void testBackError() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        final Context context = mock(Context.class);
-        final ValidatorProtos.ValidationResult.Builder validationBuilder = ValidatorProtos.ValidationResult.newBuilder();
-        validationBuilder.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-
-        Assert.assertEquals(tagStack.back().getTagName(), "!DOCTYPE");
-        tagStack.exitTag(context, validationBuilder);
-        tagStack.exitTag(context, validationBuilder);
-
-        tagStack.back();
-    }
-
-    @Test
-    public void testTellParentNoSiblingsAllowed() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        final Locator lineCol = new Locator() {
-            @Override
-            public String getPublicId() {
-                return null;
-            }
-
-            @Override
-            public String getSystemId() {
-                return null;
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 2;
-            }
-        };
-        tagStack.tellParentNoSiblingsAllowed("test_satisfies", lineCol);
-
-        Assert.assertTrue(tagStack.parentHasChildWithNoSiblingRule());
-        Assert.assertEquals(tagStack.parentOnlyChildTagName(), "test_satisfies");
-        Assert.assertEquals(tagStack.parentStackEntry().getOnlyChildTagName(), "test_satisfies");
-        Assert.assertEquals(tagStack.parentOnlyChildErrorLineCol().getColumnNumber(), lineCol.getColumnNumber());
-        Assert.assertEquals(tagStack.parentStackEntry().getOnlyChildErrorLineCol().getColumnNumber(), lineCol.getColumnNumber());
-        Assert.assertEquals(tagStack.parentOnlyChildErrorLineCol().getLineNumber(), lineCol.getLineNumber());
-        Assert.assertEquals(tagStack.parentStackEntry().getOnlyChildErrorLineCol().getLineNumber(), lineCol.getLineNumber());
-    }
-
-    @Test
-    public void testTellParentImTheLastChild() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        final Locator lineCol = new Locator() {
-            @Override
-            public String getPublicId() {
-                return null;
-            }
-
-            @Override
-            public String getSystemId() {
-                return null;
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 2;
-            }
-        };
-        tagStack.tellParentImTheLastChild("test_satisfies", "last_url", lineCol);
-        Assert.assertTrue(tagStack.parentHasChildWithLastChildRule());
-        Assert.assertEquals(tagStack.parentLastChildTagName(), "test_satisfies");
-        Assert.assertEquals(tagStack.parentStackEntry().getLastChildTagName(), "test_satisfies");
-        Assert.assertEquals(tagStack.parentLastChildUrl(), "last_url");
-        Assert.assertEquals(tagStack.parentStackEntry().getLastChildUrl(), "last_url");
-        Assert.assertEquals(tagStack.parentLastChildErrorLineCol().getColumnNumber(), lineCol.getColumnNumber());
-        Assert.assertEquals(tagStack.parentStackEntry().getLastChildErrorLineCol().getColumnNumber(), lineCol.getColumnNumber());
-        Assert.assertEquals(tagStack.parentLastChildErrorLineCol().getLineNumber(), lineCol.getLineNumber());
-        Assert.assertEquals(tagStack.parentStackEntry().getLastChildErrorLineCol().getLineNumber(), lineCol.getLineNumber());
-    }
-
-    @Test
-    public void testMatchChildTagName() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        final Locator lineCol = new Locator() {
-            @Override
-            public String getPublicId() {
-                return null;
-            }
-
-            @Override
-            public String getSystemId() {
-                return null;
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 2;
-            }
-        };
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final ParsedHtmlTag htmlTag = mock(ParsedHtmlTag.class);
-        when(htmlTag.upperName()).thenReturn("test_satisfies_parent_head");
-        final ValidateTagResult mockReferencePointResult = mock(ValidateTagResult.class);
-        when(mockReferencePointResult.getBestMatchTagSpec()).thenReturn(mockValidatorRules
-                .getByTagSpecId("test_satisfies"));
-
-        final ValidateTagResult mockTagResult = mock(ValidateTagResult.class);
-        final ValidatorProtos.ValidationResult.Builder validationBuilder = ValidatorProtos.ValidationResult.newBuilder();
-        validationBuilder.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-        when(mockReferencePointResult.getValidationResult()).thenReturn(validationBuilder);
-
-        when(mockTagResult.getValidationResult()).thenReturn(validationBuilder);
-
-        final ParsedTagSpec tagSpec = mockValidatorRules.getByTagSpecId("test_satisfies_parent_head");
-        when(mockTagResult.getBestMatchTagSpec()).thenReturn(tagSpec);
-
-        Assert.assertFalse(tagStack.hasAncestorMarker(ValidatorProtos.AncestorMarker.Marker.AUTOSCROLL));
-
-        final ReferencePointMatcher refMatch = mock(ReferencePointMatcher.class);
-        tagStack.setReferencePointMatcher(refMatch);
-        tagStack.updateFromTagResults(htmlTag, mockReferencePointResult, mockTagResult, mockValidatorRules, lineCol);
-
-        final Context context = mock(Context.class);
-
-        tagStack.matchChildTagName(htmlTag, context, validationBuilder);
-    }
-
-    @Test
-    public void testAncestor() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        final Locator lineCol = new Locator() {
-            @Override
-            public String getPublicId() {
-                return null;
-            }
-
-            @Override
-            public String getSystemId() {
-                return null;
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 2;
-            }
-        };
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final ParsedHtmlTag htmlTag = mock(ParsedHtmlTag.class);
-        when(htmlTag.upperName()).thenReturn("test_satisfies_parent_head");
-        final ValidateTagResult mockReferencePointResult = mock(ValidateTagResult.class);
-        when(mockReferencePointResult.getBestMatchTagSpec()).thenReturn(mockValidatorRules
-                .getByTagSpecId("test_satisfies"));
-
-        final ValidateTagResult mockTagResult = mock(ValidateTagResult.class);
-        final ValidatorProtos.ValidationResult.Builder validationBuilder = ValidatorProtos.ValidationResult.newBuilder();
-        validationBuilder.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-        when(mockReferencePointResult.getValidationResult()).thenReturn(validationBuilder);
-
-        when(mockTagResult.getValidationResult()).thenReturn(validationBuilder);
-
-        final ParsedTagSpec tagSpec = mockValidatorRules.getByTagSpecId("test_satisfies_parent_head");
-        when(mockTagResult.getBestMatchTagSpec()).thenReturn(tagSpec);
-
-        Assert.assertFalse(tagStack.hasAncestorMarker(ValidatorProtos.AncestorMarker.Marker.AUTOSCROLL));
-
-        final ReferencePointMatcher refMatch = mock(ReferencePointMatcher.class);
-        tagStack.setReferencePointMatcher(refMatch);
-        tagStack.updateFromTagResults(htmlTag, mockReferencePointResult, mockTagResult, mockValidatorRules, lineCol);
-
-        Assert.assertTrue(tagStack.hasAncestor("!DOCTYPE"));
-        Assert.assertTrue(tagStack.hasAncestor("test_satisfies_parent_head"));
-        Assert.assertFalse(tagStack.hasAncestor("test_satisfies"));
-
-        Assert.assertTrue(tagStack.hasAncestorMarker(ValidatorProtos.AncestorMarker.Marker.AUTOSCROLL));
-    }
-
-    @Test(expectedExceptions = TagValidationException.class, expectedExceptionsMessageRegExp = "Ancestor marker is unknown")
-    public void testHasAncestorMarkerError() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        tagStack.hasAncestorMarker(ValidatorProtos.AncestorMarker.Marker.UNKNOWN);
-    }
-
-    @Test(expectedExceptions = TagValidationException.class, expectedExceptionsMessageRegExp = "Exiting an empty tag stack.")
-    public void testExitTagError() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        final Context context = mock(Context.class);
-        final ValidatorProtos.ValidationResult.Builder validationBuilder = ValidatorProtos.ValidationResult.newBuilder();
-        validationBuilder.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-
-        tagStack.exitTag(context, validationBuilder);
-        tagStack.exitTag(context, validationBuilder);
-
-        tagStack.exitTag(context, validationBuilder);
-    }
-
-    @Test
-    public void testExitTag() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        final Locator lineCol = new Locator() {
-            @Override
-            public String getPublicId() {
-                return null;
-            }
-
-            @Override
-            public String getSystemId() {
-                return null;
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 2;
-            }
-        };
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final ParsedHtmlTag htmlTag = mock(ParsedHtmlTag.class);
-        when(htmlTag.upperName()).thenReturn("test_satisfies_parent_head");
-        final ValidateTagResult mockReferencePointResult = mock(ValidateTagResult.class);
-        when(mockReferencePointResult.getBestMatchTagSpec()).thenReturn(mockValidatorRules
-                .getByTagSpecId("test_satisfies"));
-
-        final ValidateTagResult mockTagResult = mock(ValidateTagResult.class);
-        final ValidatorProtos.ValidationResult.Builder validationBuilder = ValidatorProtos.ValidationResult.newBuilder();
-        validationBuilder.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-        when(mockReferencePointResult.getValidationResult()).thenReturn(validationBuilder);
-
-        when(mockTagResult.getValidationResult()).thenReturn(validationBuilder);
-
-        final ParsedTagSpec tagSpec = mockValidatorRules.getByTagSpecId("test_satisfies_parent_head");
-        when(mockTagResult.getBestMatchTagSpec()).thenReturn(tagSpec);
-
-        final ReferencePointMatcher refMatch = mock(ReferencePointMatcher.class);
-        tagStack.setReferencePointMatcher(refMatch);
-        tagStack.updateFromTagResults(htmlTag, mockReferencePointResult, mockTagResult, mockValidatorRules, lineCol);
-
-        final Context context = mock(Context.class);
-        tagStack.exitTag(context, validationBuilder);
-
-        Assert.assertEquals(tagStack.parentTagName(), "!DOCTYPE");
-    }
-
-    @Test
-    public void testUpdateStackEntryFromTagResultBestMatchNull() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        final Locator lineCol = new Locator() {
-            @Override
-            public String getPublicId() {
-                return null;
-            }
-
-            @Override
-            public String getSystemId() {
-                return null;
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 2;
-            }
-        };
-
-        final ValidateTagResult mockTagResult = mock(ValidateTagResult.class);
-        final ValidatorProtos.ValidationResult.Builder validationBuilder = ValidatorProtos.ValidationResult.newBuilder();
-        validationBuilder.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-
-        tagStack.updateStackEntryFromTagResult(mockTagResult, mockValidatorRules, lineCol);
-    }
-
-    @Test
-    public void testUpdateStackEntryFromTagResult() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        final Locator lineCol = new Locator() {
-            @Override
-            public String getPublicId() {
-                return null;
-            }
-
-            @Override
-            public String getSystemId() {
-                return null;
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 2;
-            }
-        };
-
-        final ValidateTagResult mockTagResult = mock(ValidateTagResult.class);
-        final ValidatorProtos.ValidationResult.Builder validationBuilder = ValidatorProtos.ValidationResult.newBuilder();
-        validationBuilder.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-
-        final ParsedTagSpec tagSpec = mockValidatorRules.getByTagSpecId("test_parent");
-        when(mockTagResult.getBestMatchTagSpec()).thenReturn(tagSpec);
-        when(mockTagResult.getValidationResult()).thenReturn(validationBuilder);
-
-        tagStack.updateStackEntryFromTagResult(mockTagResult, mockValidatorRules, lineCol);
-
-        Assert.assertNotNull(tagStack.parentStackEntry().getChildTagMatcher());
-        Assert.assertNotNull(tagStack.cdataMatcher());
-    }
-
-    @Test
-    public void testUpdateFromTagResults() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        final Locator lineCol = new Locator() {
-            @Override
-            public String getPublicId() {
-                return null;
-            }
-
-            @Override
-            public String getSystemId() {
-                return null;
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 2;
-            }
-        };
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final ParsedHtmlTag htmlTag = mock(ParsedHtmlTag.class);
-        when(htmlTag.upperName()).thenReturn("test_satisfies");
-        final ValidateTagResult mockReferencePointResult = mock(ValidateTagResult.class);
-        when(mockReferencePointResult.getBestMatchTagSpec()).thenReturn(mockValidatorRules
-                .getByTagSpecId("test_satisfies_parent_head"));
-
-        final ValidateTagResult mockTagResult = mock(ValidateTagResult.class);
-        final ValidatorProtos.ValidationResult.Builder validationBuilder = ValidatorProtos.ValidationResult.newBuilder();
-        validationBuilder.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-        when(mockReferencePointResult.getValidationResult()).thenReturn(validationBuilder);
-
-        when(mockTagResult.getValidationResult()).thenReturn(validationBuilder);
-
-        final ParsedTagSpec tagSpec = mockValidatorRules.getByTagSpecId("test_satisfies");
-        when(mockTagResult.getBestMatchTagSpec()).thenReturn(tagSpec);
-
-        final ReferencePointMatcher refMatch = mock(ReferencePointMatcher.class);
-        tagStack.setReferencePointMatcher(refMatch);
-        tagStack.updateFromTagResults(htmlTag, mockReferencePointResult, mockTagResult, mockValidatorRules, lineCol);
-
-
-        Assert.assertTrue(tagStack.hasAncestor("!DOCTYPE"));
-        verify(refMatch, times(1)).recordMatch(any(ParsedTagSpec.class));
-        Assert.assertEquals(tagStack.parentStackEntry().getNumChildren(), 0);
-        Assert.assertEquals(tagStack.parentStackEntry().getReferencePoint(), mockValidatorRules
-                .getByTagSpecId("test_satisfies_parent_head"));
-        Assert.assertEquals(tagStack.parentStackEntry().getTagSpec(),
-                mockValidatorRules.getByTagSpecId("test_satisfies"));
-    }
-
-    @Test
-    public void testUpdateFromTagResultsParentHead() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        final Locator lineCol = new Locator() {
-            @Override
-            public String getPublicId() {
-                return null;
-            }
-
-            @Override
-            public String getSystemId() {
-                return null;
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 2;
-            }
-        };
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ampValidatorManager);
-        final ParsedHtmlTag htmlTag = mock(ParsedHtmlTag.class);
-        when(htmlTag.upperName()).thenReturn("test_satisfies_parent_head");
-        final ValidateTagResult mockReferencePointResult = mock(ValidateTagResult.class);
-        when(mockReferencePointResult.getBestMatchTagSpec()).thenReturn(mockValidatorRules
-                .getByTagSpecId("test_satisfies"));
-
-        final ValidateTagResult mockTagResult = mock(ValidateTagResult.class);
-        final ValidatorProtos.ValidationResult.Builder validationBuilder = ValidatorProtos.ValidationResult.newBuilder();
-        validationBuilder.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-        when(mockReferencePointResult.getValidationResult()).thenReturn(validationBuilder);
-
-        when(mockTagResult.getValidationResult()).thenReturn(validationBuilder);
-
-        ParsedTagSpec tagSpec = mockValidatorRules.getByTagSpecId("test_satisfies_parent_head");
-        when(mockTagResult.getBestMatchTagSpec()).thenReturn(tagSpec);
-
-        final ReferencePointMatcher refMatch = mock(ReferencePointMatcher.class);
-        tagStack.setReferencePointMatcher(refMatch);
-        tagStack.updateFromTagResults(htmlTag, mockReferencePointResult, mockTagResult, mockValidatorRules, lineCol);
-
-
-        Assert.assertTrue(tagStack.hasAncestor("!DOCTYPE"));
-        verify(refMatch, times(1)).recordMatch(any(ParsedTagSpec.class));
-        Assert.assertEquals(tagStack.parentStackEntry().getNumChildren(), 0);
-        Assert.assertEquals(tagStack.parentStackEntry().getReferencePoint(), mockValidatorRules
-                .getByTagSpecId("test_satisfies"));
-        Assert.assertEquals(tagStack.parentStackEntry().getTagSpec(),
-                mockValidatorRules.getByTagSpecId("test_satisfies_parent_head"));
-
-        Assert.assertTrue(tagStack.parentStackEntry().getHasDescendantConstraintLists());
-        Assert.assertEquals(tagStack.allowedDescendantsList().size(), 1);
-        Assert.assertEquals(tagStack.allowedDescendantsList().get(0).getTagName(), "test_satisfies_parent_head");
-        Assert.assertEquals(tagStack.allowedDescendantsList().get(0).getAllowedTags().size(), 2);
-
-        Assert.assertEquals(tagStack.allowedDescendantsList().get(0).getAllowedTags().get(0), "A");
-        Assert.assertEquals(tagStack.allowedDescendantsList().get(0).getAllowedTags().get(1), "ABBR");
-        Assert.assertFalse(tagStack.isScriptTypeJsonChild());
-
-    }
-
-    @Test(expectedExceptions = TagValidationException.class, expectedExceptionsMessageRegExp = "Parent's reference point matcher is null")
-    public void testUpdateFromTagResultsRefParentNull() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        final Locator lineCol = new Locator() {
-            @Override
-            public String getPublicId() {
-                return null;
-            }
-
-            @Override
-            public String getSystemId() {
-                return null;
-            }
-
-            @Override
-            public int getLineNumber() {
-                return 23;
-            }
-
-            @Override
-            public int getColumnNumber() {
-                return 2;
-            }
-        };
-        mockValidatorRules = new ParsedValidatorRules(ValidatorProtos.HtmlFormat.Code.AMP, ampValidatorManager);
-        final ParsedHtmlTag htmlTag = mock(ParsedHtmlTag.class);
-        final ValidateTagResult mockReferencePointResult = mock(ValidateTagResult.class);
-        when(mockReferencePointResult.getBestMatchTagSpec()).thenReturn(mockValidatorRules
-                .getByTagSpecId("test_satisfies"));
-
-        final ValidateTagResult mockTagResult = mock(ValidateTagResult.class);
-        final ValidatorProtos.ValidationResult.Builder validationBuilder = ValidatorProtos.ValidationResult.newBuilder();
-        validationBuilder.setStatus(ValidatorProtos.ValidationResult.Status.PASS);
-
-        when(mockTagResult.getValidationResult()).thenReturn(validationBuilder);
-
-        final ParsedTagSpec tagSpec = mockValidatorRules.getByTagSpecId("test_satisfies_parent_head");
-        when(mockTagResult.getBestMatchTagSpec()).thenReturn(tagSpec);
-
-        tagStack.updateFromTagResults(htmlTag, mockReferencePointResult, mockTagResult, mockValidatorRules, lineCol);
-    }
-
-    @Test
-    public void testParentChildCount() throws TagValidationException {
-        final TagStack tagStack = new TagStack();
-        Assert.assertEquals(tagStack.parentChildCount(), 0);
-    }
-
-    private ParsedValidatorRules mockValidatorRules;
-
-    /** AMPValidatorManager object. */
-    private AMPValidatorManager ampValidatorManager;
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/UrlErrorInAttrAdapterTest.java b/validator/java/src/test/java/dev/amp/validator/UrlErrorInAttrAdapterTest.java
deleted file mode 100644
index 19d1cfaab42b3..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/UrlErrorInAttrAdapterTest.java
+++ /dev/null
@@ -1,175 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import org.mockito.ArgumentCaptor;
-import org.mockito.Mockito;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-import org.xml.sax.Locator;
-
-import java.util.List;
-
-/**
- * Tests for {@link UrlErrorInAttrAdapter}
- *
- * @author sphatak01
- */
-public class UrlErrorInAttrAdapterTest {
-
-    @Test
-    public void testMissingUrl() {
-        final String attrName = "attr";
-
-        final UrlErrorInAttrAdapter urlErrorInAttrAdapter = new UrlErrorInAttrAdapter(attrName);
-        final Context mockContext = Mockito.mock(Context.class);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecUrl("https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages");
-        tagSpecBuilder.setSpecName("spec1");
-
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-        urlErrorInAttrAdapter.missingUrl(mockContext, tagSpec, resultBuilder);
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.get(0), "attr");
-        Assert.assertEquals(params.get(1), "spec1");
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.MISSING_URL);
-
-    }
-
-    @Test
-    public void testInvalidUrl() {
-        final String attrName = "attr";
-
-        final UrlErrorInAttrAdapter urlErrorInAttrAdapter = new UrlErrorInAttrAdapter(attrName);
-        final Context mockContext = Mockito.mock(Context.class);
-
-        final String url = "https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages";
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecUrl("https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages");
-        tagSpecBuilder.setSpecName("spec1");
-
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-        urlErrorInAttrAdapter.invalidUrl(mockContext, url, tagSpec, resultBuilder);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.get(0), "attr");
-        Assert.assertEquals(params.get(1), "spec1");
-        Assert.assertEquals(params.get(2), url);
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.INVALID_URL);
-
-    }
-
-    @Test
-    public void testInvalidUrlProtocol() {
-        final String attrName = "attr";
-
-        final UrlErrorInAttrAdapter urlErrorInAttrAdapter = new UrlErrorInAttrAdapter(attrName);
-        final Context mockContext = Mockito.mock(Context.class);
-
-        final String protocol = "http";
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecUrl("https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages");
-        tagSpecBuilder.setSpecName("spec1");
-
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-        urlErrorInAttrAdapter.invalidUrlProtocol(mockContext, protocol, tagSpec, resultBuilder);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.get(0), "attr");
-        Assert.assertEquals(params.get(1), "spec1");
-        Assert.assertEquals(params.get(2), protocol);
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.INVALID_URL_PROTOCOL);
-
-    }
-
-    @Test
-    public void testDisallowedRelativeUrl() {
-        final String attrName = "attr";
-
-        final UrlErrorInAttrAdapter urlErrorInAttrAdapter = new UrlErrorInAttrAdapter(attrName);
-        final Context mockContext = Mockito.mock(Context.class);
-
-        final String url = "https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages";
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecUrl("https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages");
-        tagSpecBuilder.setSpecName("spec1");
-
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-        urlErrorInAttrAdapter.disallowedRelativeUrl(mockContext, url, tagSpec, resultBuilder);
-
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.any(Locator.class),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.get(0), "attr");
-        Assert.assertEquals(params.get(1), "spec1");
-        Assert.assertEquals(params.get(2), url);
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.DISALLOWED_RELATIVE_URL);
-
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/UrlErrorInStylesheetAdapterTest.java b/validator/java/src/test/java/dev/amp/validator/UrlErrorInStylesheetAdapterTest.java
deleted file mode 100644
index 6560c1499a646..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/UrlErrorInStylesheetAdapterTest.java
+++ /dev/null
@@ -1,175 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import org.mockito.ArgumentCaptor;
-import org.mockito.Mockito;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-import java.util.List;
-
-/**
- * Tests for {@link UrlErrorInStylesheetAdapter}
- *
- * @author sphatak01
- */
-public class UrlErrorInStylesheetAdapterTest {
-
-    @Test
-    public void testMissingUrl() {
-        int lineNumber = 23;
-        int colNumber = 45;
-
-        final UrlErrorInStylesheetAdapter urlErrorInStylesheetAdapter = new UrlErrorInStylesheetAdapter(lineNumber, colNumber);
-        final Context mockContext = Mockito.mock(Context.class);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecUrl("https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages");
-        tagSpecBuilder.setSpecName("spec1");
-
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-        urlErrorInStylesheetAdapter.missingUrl(mockContext, tagSpec, resultBuilder);
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.anyInt(),
-                        Mockito.anyInt(),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.get(0), "spec1");
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.CSS_SYNTAX_MISSING_URL);
-
-    }
-
-    @Test
-    public void testInvalidUrl() {
-        final int lineNumber = 23;
-        final int colNumber = 45;
-        final String url = "https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages";
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final UrlErrorInStylesheetAdapter urlErrorInStylesheetAdapter = new UrlErrorInStylesheetAdapter(lineNumber, colNumber);
-        final Context mockContext = Mockito.mock(Context.class);
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecUrl("https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages");
-        tagSpecBuilder.setSpecName("spec1");
-
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-        urlErrorInStylesheetAdapter.invalidUrl(mockContext, url, tagSpec, resultBuilder);
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.anyInt(),
-                        Mockito.anyInt(),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.get(0), "spec1");
-        Assert.assertEquals(params.get(1), url);
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_URL);
-
-    }
-
-    @Test
-    public void testInvalidUrlProtocol() {
-        final int lineNumber = 23;
-        final int colNumber = 45;
-        final String protocol = "https";
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final UrlErrorInStylesheetAdapter urlErrorInStylesheetAdapter = new UrlErrorInStylesheetAdapter(lineNumber, colNumber);
-        final Context mockContext = Mockito.mock(Context.class);
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecUrl("https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages");
-        tagSpecBuilder.setSpecName("spec1");
-
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-        urlErrorInStylesheetAdapter.invalidUrlProtocol(mockContext, protocol, tagSpec, resultBuilder);
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.anyInt(),
-                        Mockito.anyInt(),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.get(0), "spec1");
-        Assert.assertEquals(params.get(1), protocol);
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_URL_PROTOCOL);
-
-    }
-
-    @Test
-    public void testDisallowedRelativeUrl() {
-        final int lineNumber = 23;
-        final int colNumber = 45;
-        final String url = "https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages";
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final UrlErrorInStylesheetAdapter urlErrorInStylesheetAdapter = new UrlErrorInStylesheetAdapter(lineNumber, colNumber);
-        final Context mockContext = Mockito.mock(Context.class);
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-        tagSpecBuilder.setSpecUrl("https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages");
-        tagSpecBuilder.setSpecName("spec1");
-
-        final ValidatorProtos.TagSpec tagSpec = tagSpecBuilder.build();
-        final ValidatorProtos.ValidationResult.Builder resultBuilder = ValidatorProtos.ValidationResult.newBuilder();
-
-        urlErrorInStylesheetAdapter.disallowedRelativeUrl(mockContext, url, tagSpec, resultBuilder);
-        Mockito.verify(mockContext, Mockito.times(1))
-                .addError(errorCodeCapture.capture(),
-                        Mockito.anyInt(),
-                        Mockito.anyInt(),
-                        listCaptor.capture(),
-                        Mockito.anyString(),
-                        Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.get(0), "spec1");
-        Assert.assertEquals(params.get(1), url);
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_RELATIVE_URL);
-
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/ValidateTagResultTest.java b/validator/java/src/test/java/dev/amp/validator/ValidateTagResultTest.java
deleted file mode 100644
index b7ae54d2d50c9..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/ValidateTagResultTest.java
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator;
-
-import org.mockito.Mockito;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-/**
- * Test for {@link ValidateTagResult}
- *
- * @author sphatak01
- */
-public class ValidateTagResultTest {
-
-    @Test
-    public void testGettersSetters() {
-        final ValidatorProtos.ValidationResult.Builder validationResult = ValidatorProtos.ValidationResult.newBuilder();
-        final ParsedTagSpec mockParsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-
-        final ValidateTagResult validateTagResult = new ValidateTagResult(validationResult, mockParsedTagSpec);
-        Assert.assertEquals(validateTagResult.getBestMatchTagSpec(), mockParsedTagSpec);
-        Assert.assertEquals(validateTagResult.getValidationResult(), validationResult);
-
-        final ValidatorProtos.ValidationResult.Builder validationResult2 = ValidatorProtos.ValidationResult.newBuilder();
-        final ParsedTagSpec mockParsedTagSpec2 = Mockito.mock(ParsedTagSpec.class);
-
-        validateTagResult.setBestMatchTagSpec(mockParsedTagSpec2);
-        validateTagResult.setValidationResult(validationResult2);
-
-        Assert.assertEquals(validateTagResult.getBestMatchTagSpec(), mockParsedTagSpec2);
-        Assert.assertEquals(validateTagResult.getValidationResult(), validationResult2);
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/css/AtRuleTest.java b/validator/java/src/test/java/dev/amp/validator/css/AtRuleTest.java
deleted file mode 100644
index 5f9bd0cc4ff3f..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/css/AtRuleTest.java
+++ /dev/null
@@ -1,109 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.visitor.RuleVisitor;
-import org.mockito.Mockito;
-import org.mockito.invocation.InvocationOnMock;
-import org.mockito.stubbing.Answer;
-import org.testng.Assert;
-import org.testng.annotations.BeforeClass;
-import org.testng.annotations.Test;
-
-import java.util.ArrayList;
-import java.util.List;
-
-import static org.mockito.Mockito.doAnswer;
-
-/**
- * Test for {@link AtRule}
- *
- * @author GeorgeLuo
- */
-
-public class AtRuleTest {
-
-  @BeforeClass
-  public void init() {
-    canonicalizer = Mockito.mock(Canonicalizer.class);
-    atRule = new AtRule("@media");
-  }
-
-  @Test
-  public void testAccept() {
-
-    atRule = new AtRule("@media");
-
-    final List<Rule> rules = new ArrayList<>();
-    QualifiedRule qualifiedRule = new QualifiedRule();
-
-    rules.add(qualifiedRule);
-
-    final List<Declaration> declarations = new ArrayList<>();
-    Declaration declaration = new Declaration("background-image");
-    declarations.add(declaration);
-
-    atRule.setDeclarations(declarations);
-
-    final RuleVisitor ruleVisitor = Mockito.mock(RuleVisitor.class);
-    try {
-      doAnswer(new Answer<Void>() {
-        public Void answer(final InvocationOnMock invocation) {
-          final Object[] args = invocation.getArguments();
-          Assert.assertEquals(((AtRule) args[0]).getName(), "media");
-          return null;
-        }
-      }).when(ruleVisitor).visitAtRule(Mockito.any(AtRule.class));
-
-      doAnswer(new Answer<Void>() {
-        public Void answer(final InvocationOnMock invocation) {
-          final Object[] args = invocation.getArguments();
-          Assert.assertEquals(((Declaration) args[0]).getName(), "background-image");
-          return null;
-        }
-      }).when(ruleVisitor).visitDeclaration(Mockito.any(Declaration.class));
-
-      doAnswer(new Answer<Void>() {
-        public Void answer(final InvocationOnMock invocation) {
-          final Object[] args = invocation.getArguments();
-          Assert.assertEquals(((Declaration) args[0]).getName(), "background-image");
-          return null;
-        }
-      }).when(ruleVisitor).leaveDeclaration(Mockito.any(Declaration.class));
-
-      doAnswer(new Answer<Void>() {
-        public Void answer(final InvocationOnMock invocation) {
-          final Object[] args = invocation.getArguments();
-          Assert.assertEquals(((AtRule) args[0]).getName(), "media");
-          return null;
-        }
-      }).when(ruleVisitor).leaveAtRule(Mockito.any(AtRule.class));
-
-      atRule.accept(ruleVisitor);
-    } catch (CssValidationException e) {
-      e.printStackTrace();
-    }
-  }
-
-  private Canonicalizer canonicalizer;
-  private AtRule atRule;
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/css/CanonicalizerTest.java b/validator/java/src/test/java/dev/amp/validator/css/CanonicalizerTest.java
deleted file mode 100644
index ae1f2eb8d134a..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/css/CanonicalizerTest.java
+++ /dev/null
@@ -1,203 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.ValidatorProtos;
-import com.steadystate.css.parser.SACParserCSS3Constants;
-import com.steadystate.css.parser.Token;
-import dev.amp.validator.utils.CssSpecUtils;
-import org.testng.Assert;
-import org.testng.annotations.BeforeSuite;
-import org.testng.annotations.BeforeTest;
-import org.testng.annotations.Test;
-
-import java.io.IOException;
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.LinkedList;
-import java.util.List;
-import java.util.Map;
-
-/**
- * Test for {@link Canonicalizer}
- *
- * @author GeorgeLuo
- */
-
-public class CanonicalizerTest {
-
-  @BeforeSuite
-  public void init() {
-    defaultSpec = CssSpecUtils.BlockType.PARSE_AS_IGNORE;
-    atRuleSpec = new HashMap<>();
-
-    atRuleSpec.put("$DEFAULT", CssSpecUtils.BlockType.PARSE_AS_IGNORE);
-    atRuleSpec.put("media",CssSpecUtils.BlockType.PARSE_AS_RULES);
-    atRuleSpec.put("page", CssSpecUtils.BlockType.PARSE_AS_DECLARATIONS);
-  }
-
-  @BeforeTest
-  public void initTest() {
-    canonicalizer = new Canonicalizer(atRuleSpec, defaultSpec);
-  }
-
-  @Test
-  public void testParseAListOfRules() {
-    try {
-      final List<ErrorToken> cssErrors = new ArrayList<>();
-      List<Token> tokens = new LinkedList<>();
-      tokens.add(new Token(22, "amp-img"));
-      tokens.add(new Token(55, "{"));
-      tokens.add(new Token(1, ""));
-      tokens.add(new Token(56, "}"));
-      tokens.add(new Token(1, ""));
-      tokens.add(new Token(0, ""));
-      TokenStream tokenStream = new TokenStream(tokens);
-      tokenStream.consume();
-
-      List<Rule> rules = canonicalizer.parseAListOfRules(tokens, true, cssErrors);
-
-      Assert.assertEquals(rules.size(), 1);
-      Assert.assertEquals(rules.get(0).toString(), "QUALIFIED_RULE");
-
-    } catch (CssValidationException e) {
-      e.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testParseAListOfDeclarationsInvalidAtRule() {
-    try {
-      final List<ErrorToken> cssErrors = new ArrayList<>();
-      cssParser = new CssParser(MEDIA_RULE,
-        0, 0, cssErrors);
-      tokenList = cssParser.tokenize();
-
-      List<ErrorToken> errors = new ArrayList<>();
-      List<Declaration> declarations = canonicalizer.parseAListOfDeclarations(tokenList, errors);
-      Assert.assertEquals(declarations.size(), 0);
-      Assert.assertEquals(errors.size(), 1);
-      Assert.assertEquals(errors.get(0).getCode(), ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_AT_RULE);
-
-    } catch (CssValidationException | IOException e) {
-      e.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testParseADeclaration() {
-    List<ErrorToken> errors = new ArrayList<>();
-    List<Declaration> declarations = new ArrayList<>();
-
-    try {
-      final List<ErrorToken> cssErrors = new ArrayList<>();
-      cssParser = new CssParser(A_DECLARATION,
-        0, 0, cssErrors);
-      tokenList = cssParser.tokenize();
-
-      TokenStream tokenStream = new TokenStream(tokenList);
-      tokenStream.consume();
-      canonicalizer.parseADeclaration(tokenStream, declarations, errors);
-      Assert.assertEquals(declarations.size(), 1);
-      Assert.assertEquals(declarations.get(0).getName(), "color");
-    } catch (final IOException | CssValidationException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testConsumeAComponentValue() {
-    try {
-      List<com.steadystate.css.parser.Token> tokens = new LinkedList<>();
-      tokens.add(new com.steadystate.css.parser.Token(SACParserCSS3Constants.LBRACE, "{"));
-      tokens.add(new com.steadystate.css.parser.Token(SACParserCSS3Constants.IDENT, "width"));
-      tokens.add(new Token(SACParserCSS3Constants.COLON, ":"));
-      tokens.add(new Token(SACParserCSS3Constants.S, " "));
-      tokens.add(new Token(SACParserCSS3Constants.IDENT, "square"));
-      tokens.add(new Token(SACParserCSS3Constants.S, " "));
-      tokens.add(new Token(SACParserCSS3Constants.FUNCTION, "and"));
-      tokens.add(new Token(SACParserCSS3Constants.EOF, ""));
-      TokenStream tokenStream = new TokenStream(tokens);
-      tokenStream.consume();
-
-      List<com.steadystate.css.parser.Token> tokensEmpty = new LinkedList<>();
-      Assert.assertTrue(Canonicalizer.consumeAComponentValue(tokenStream, tokensEmpty, 3));
-      Assert.assertEquals(tokensEmpty.size(), 9);
-
-      Assert.assertFalse(Canonicalizer.consumeAComponentValue(tokenStream, tokensEmpty, 100000));
-    } catch (CssValidationException e) {
-      e.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testConsumeAFunction() {
-    try {
-      List<com.steadystate.css.parser.Token> tokens = new LinkedList<>();
-      tokens.add(new com.steadystate.css.parser.Token(SACParserCSS3Constants.FUNCTION, "and"));
-      tokens.add(new com.steadystate.css.parser.Token(SACParserCSS3Constants.EOF, ""));
-
-      TokenStream tokenStream = new TokenStream(tokens);
-      tokenStream.consume();
-
-      List<com.steadystate.css.parser.Token> tokensEmpty = new LinkedList<>();
-      Canonicalizer.consumeAComponentValue(tokenStream, tokensEmpty, 3);
-
-      Assert.assertEquals(tokensEmpty, tokens);
-
-      tokens = new LinkedList<>();
-      tokensEmpty = new LinkedList<>();
-      tokens.add(new com.steadystate.css.parser.Token(SACParserCSS3Constants.FUNCTION, "and"));
-      tokens.add(new com.steadystate.css.parser.Token(SACParserCSS3Constants.IDENT, "blue"));
-      tokens.add(new com.steadystate.css.parser.Token(SACParserCSS3Constants.EOF, ""));
-      tokenStream = new TokenStream(tokens);
-      tokenStream.consume();
-
-      Canonicalizer.consumeAComponentValue(tokenStream, tokensEmpty, 3);
-      Assert.assertEquals(tokensEmpty, tokens);
-
-    } catch (CssValidationException e) {
-      e.printStackTrace();
-    }
-  }
-
-  private CssSpecUtils.BlockType defaultSpec;
-  private Map<String, CssSpecUtils.BlockType> atRuleSpec;
-  private Canonicalizer canonicalizer;
-  private List<com.steadystate.css.parser.Token> tokenList;
-  private CssParser cssParser;
-
-  private static final String MEDIA_RULE = "@media (min-width: 500px) and (max-width: 600px) {\n"
-    + "    h1 {\n"
-    + "        color: fuchsia;\n"
-    + "        font-size: 12px;\n"
-    + "    }\n"
-    + "\n" + "    .desc:after {\n"
-    + "        content:\".\";\n"
-    + "    }\n"
-    + "}";
-  private static final String CSS_BODY = "        ul {\n"
-    + "            list-style: square url(());\n"
-    + "        }\n";
-  private static final String A_DECLARATION = "color: red;";
-
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/css/CssParserTest.java b/validator/java/src/test/java/dev/amp/validator/css/CssParserTest.java
deleted file mode 100644
index 5bb2fc1e5e517..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/css/CssParserTest.java
+++ /dev/null
@@ -1,136 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.ValidatorProtos;
-import com.steadystate.css.parser.Token;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-import java.io.IOException;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * Test for {@link CssParser}
- *
- * @author GeorgeLuo
- */
-
-public class CssParserTest {
-
-  @Test
-  public void testToCSSParseExceptionStrayTrailingBackslash() {
-    try {
-      final List<ErrorToken> cssErrors = new ArrayList<>();
-      CssParser cssParser = new CssParser(CSS_CONTENT_STRAY_TRAILING_BACKSLASH,
-        0, 0, cssErrors);
-      List<Token> tokenList = cssParser.tokenize();
-
-      Assert.assertEquals(cssParser.getErrors().size(), 1);
-      Assert.assertEquals(cssParser.getErrors().get(0).getCode(),
-        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_STRAY_TRAILING_BACKSLASH);
-
-    } catch (IOException e) {
-      e.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testToCSSParseExceptionUnterminatedString() {
-    try {
-      final List<ErrorToken> cssErrors = new ArrayList<>();
-      CssParser cssParser = new CssParser(CSS_CONTENT_UNTERMINATED_STRING,
-        0, 0, cssErrors);
-      List<Token> tokenList = cssParser.tokenize();
-
-      Assert.assertEquals(cssParser.getErrors().size(), 2);
-      Assert.assertEquals(cssParser.getErrors().get(0).getCode(),
-        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_UNTERMINATED_STRING);
-      Assert.assertEquals(cssParser.getErrors().get(1).getCode(),
-        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_UNTERMINATED_STRING);
-
-    } catch (IOException e) {
-      e.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testToCSSParseExceptionUnterminatedComment() {
-    try {
-      final List<ErrorToken> cssErrors = new ArrayList<>();
-      CssParser cssParser = new CssParser(CSS_CONTENT_UNTERMINATED_COMMENT,
-        0, 0, cssErrors);
-      List<Token> tokenList = cssParser.tokenize();
-
-      Assert.assertEquals(cssParser.getErrors().size(), 1);
-      Assert.assertEquals(cssParser.getErrors().get(0).getCode(),
-        ValidatorProtos.ValidationError.Code.CSS_SYNTAX_UNTERMINATED_COMMENT);
-
-    } catch (IOException e) {
-      e.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testTokenize() {
-    try {
-      final List<ErrorToken> cssErrors = new ArrayList<>();
-      CssParser cssParser = new CssParser(CSS_CONTENT,
-        0, 0, cssErrors);
-      List<Token> tokenList = cssParser.tokenize();
-
-      Assert.assertEquals(tokenList.size(), 35);
-      Assert.assertEquals(cssParser.getErrors().size(), 0);
-
-      Assert.assertEquals(tokenList.get(0).image, "@media");
-      Assert.assertEquals(tokenList.get(9).image, "and");
-      Assert.assertEquals(tokenList.get(19).image, ".");
-      Assert.assertEquals(tokenList.get(29).image, "\n    ");
-
-    } catch (IOException e) {
-      e.printStackTrace();
-    }
-  }
-
-  private static final String CSS_CONTENT = "@media (min-width: 500px) and (max-width: 600px) {\n"
-    + "    .desc:after {\n"
-    + "        content:\".\";\n"
-    + "    }\n"
-    + "}";
-
-  private static final String CSS_CONTENT_UNTERMINATED_COMMENT = "    <style amp-custom>\n"
-    + "        h1 { color: red; }\n"
-    + "        @page :first {\n"
-    + "            margin: 1in;\n"
-    + "        }/*uhbuhbuyb\n";
-
-  private static final String CSS_CONTENT_UNTERMINATED_STRING = "        ul {\"\n"
-    + "        }\n"
-    + "        ul {'\n"
-    + "        }\n";
-
-  private static final String CSS_CONTENT_STRAY_TRAILING_BACKSLASH = "        body {\n"
-    + "            background-color: white;\n"
-    + "            color: beige;\\\n"
-    + "        }";
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/css/CssParsingConfigTest.java b/validator/java/src/test/java/dev/amp/validator/css/CssParsingConfigTest.java
deleted file mode 100644
index c77dabdf16bff..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/css/CssParsingConfigTest.java
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.ValidatorProtos;
-import dev.amp.validator.utils.CssSpecUtils;
-import org.testng.Assert;
-import org.testng.annotations.BeforeTest;
-import org.testng.annotations.Test;
-
-import java.util.HashMap;
-import java.util.Map;
-
-/**
- * Test for {@link CssParsingConfig}
- *
- * @author GeorgeLuo
- */
-
-public class CssParsingConfigTest {
-
-  @BeforeTest
-  public void init() {
-    defaultSpec = CssSpecUtils.BlockType.PARSE_AS_IGNORE;
-    atRuleSpec = new HashMap<>();
-
-    atRuleSpec.put("font-face", CssSpecUtils.BlockType.PARSE_AS_DECLARATIONS);
-    atRuleSpec.put("keyframes", CssSpecUtils.BlockType.PARSE_AS_RULES);
-    atRuleSpec.put("media", CssSpecUtils.BlockType.PARSE_AS_RULES);
-    atRuleSpec.put("page", CssSpecUtils.BlockType.PARSE_AS_DECLARATIONS);
-    atRuleSpec.put("supports", CssSpecUtils.BlockType.PARSE_AS_RULES);
-  }
-
-  @Test
-  public void testComputeCssParsingConfig() {
-    final ValidatorProtos.CssSpec.Builder cssSpecBuilder = ValidatorProtos.CssSpec.newBuilder();
-
-    final ValidatorProtos.AtRuleSpec.Builder atRuleSpecBuilder1 = ValidatorProtos.AtRuleSpec.newBuilder();
-    atRuleSpecBuilder1.setName("media");
-
-    final ValidatorProtos.AtRuleSpec.Builder atRuleSpecBuilder2 = ValidatorProtos.AtRuleSpec.newBuilder();
-    atRuleSpecBuilder2.setName("page");
-
-    final ValidatorProtos.AtRuleSpec.Builder atRuleSpecBuilder3 = ValidatorProtos.AtRuleSpec.newBuilder();
-    atRuleSpecBuilder3.setName("$DEFAULT");
-
-    cssSpecBuilder.addAtRuleSpec(atRuleSpecBuilder1.build());
-    cssSpecBuilder.addAtRuleSpec(atRuleSpecBuilder2.build());
-    cssSpecBuilder.addAtRuleSpec(atRuleSpecBuilder3.build());
-
-    final CssParsingConfig cssParsingConfig = CssParsingConfig.computeCssParsingConfig();
-    Assert.assertEquals(cssParsingConfig.getAtRuleSpec().size(), 5);
-    Assert.assertEquals(cssParsingConfig.getAtRuleSpec(), atRuleSpec);
-    Assert.assertEquals(cssParsingConfig.getDefaultSpec(), defaultSpec);
-  }
-
-  private Map<String, CssSpecUtils.BlockType> atRuleSpec;
-  private CssSpecUtils.BlockType defaultSpec;
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/css/EOFTokenTest.java b/validator/java/src/test/java/dev/amp/validator/css/EOFTokenTest.java
deleted file mode 100644
index 44d665f65395d..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/css/EOFTokenTest.java
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-/**
- * Test for {@link EOFToken}
- *
- * @author GeorgeLuo
- */
-
-public class EOFTokenTest {
-
-    @Test
-    public void testGetTokenType() {
-        Token eofToken = new EOFToken();
-        Assert.assertEquals(eofToken.getTokenType(), TokenType.EOF_TOKEN);
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/css/ErrorTokenTest.java b/validator/java/src/test/java/dev/amp/validator/css/ErrorTokenTest.java
deleted file mode 100644
index 81b7adf24b703..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/css/ErrorTokenTest.java
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.ValidatorProtos;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * Test for {@link ErrorToken}
- *
- * @author GeorgeLuo
- */
-
-public class ErrorTokenTest {
-
-  @Test
-  public void testGetters() {
-    try {
-      final String param = "param";
-      final List<String> params = new ArrayList<>();
-      params.add(param);
-
-      final ErrorToken errorToken
-        = new ErrorToken(ValidatorProtos.ValidationError.Code.CSS_SYNTAX_UNTERMINATED_STRING, params);
-
-      Assert.assertEquals(errorToken.getParams(), params);
-      Assert.assertEquals(errorToken.getCode(), ValidatorProtos.ValidationError.Code.CSS_SYNTAX_UNTERMINATED_STRING);
-
-      Assert.assertEquals(errorToken.getTokenType(), TokenType.ERROR);
-
-    } catch (CssValidationException e) {
-      e.printStackTrace();
-    }
-  }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/css/ParsedCssUrlTest.java b/validator/java/src/test/java/dev/amp/validator/css/ParsedCssUrlTest.java
deleted file mode 100644
index 9f2fb8357d803..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/css/ParsedCssUrlTest.java
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-package dev.amp.validator.css;
-
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-/**
- * Test for {@link ParsedCssUrl}
- *
- * @author GeorgeLuo
- */
-
-public class ParsedCssUrlTest {
-
-    @Test
-    public void testGetAtRuleScope() {
-        ParsedCssUrl parsedCssUrl = new ParsedCssUrl();
-        Assert.assertEquals(parsedCssUrl.getAtRuleScope(), "");
-    }
-
-    @Test
-    public void testGetUtf8Url() {
-        ParsedCssUrl parsedCssUrl = new ParsedCssUrl();
-        parsedCssUrl.setUtf8Url("https://www.someurl.com");
-        Assert.assertEquals(parsedCssUrl.getUtf8Url(), "https://www.someurl.com");
-    }
-
-    @Test
-    public void testGetTokenType() {
-        ParsedCssUrl parsedCssUrl = new ParsedCssUrl();
-        Assert.assertEquals(parsedCssUrl.getTokenType(), TokenType.PARSED_CSS_URL);
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/css/QualifiedRuleTest.java b/validator/java/src/test/java/dev/amp/validator/css/QualifiedRuleTest.java
deleted file mode 100644
index 3eff942619dea..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/css/QualifiedRuleTest.java
+++ /dev/null
@@ -1,126 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.visitor.RuleVisitor;
-import org.mockito.Mockito;
-import org.mockito.invocation.InvocationOnMock;
-import org.mockito.stubbing.Answer;
-import org.testng.Assert;
-import org.testng.annotations.BeforeTest;
-import org.testng.annotations.Test;
-
-import java.util.ArrayList;
-import java.util.List;
-
-import static org.mockito.Mockito.doAnswer;
-
-/**
- * Test for {@link QualifiedRule}
- *
- * @author GeorgeLuo
- */
-
-public class QualifiedRuleTest {
-
-    @BeforeTest
-    public void init() {
-        declaration = new Declaration("background-image");
-        declaration.setLine(0);
-        declaration.setCol(1);
-
-        List<Declaration> declarations = new ArrayList<>();
-        declarations.add(declaration);
-
-        qualifiedRule = new QualifiedRule();
-        qualifiedRule.setDeclarations(declarations);
-
-        rules = new ArrayList<>();
-        rules.add(qualifiedRule);
-
-        prelude = new ArrayList<>();
-        prelude.add(new Declaration("h1"));
-
-    }
-
-    @Test
-    public void testAccept() {
-
-        final RuleVisitor ruleVisitor = Mockito.mock(RuleVisitor.class);
-        try {
-
-          doAnswer(new Answer<Void>() {
-            public Void answer(final InvocationOnMock invocation) {
-              final Object[] args = invocation.getArguments();
-              Assert.assertEquals(((QualifiedRule) args[0]).getDeclarations().get(0).getName(), "background-image");
-              return null;
-            }
-          }).when(ruleVisitor).visitQualifiedRule(qualifiedRule);
-
-          doAnswer(new Answer<Void>() {
-            public Void answer(final InvocationOnMock invocation) {
-              final Object[] args = invocation.getArguments();
-              Assert.assertEquals(((Declaration) args[0]).getName(), "background-image");
-              return null;
-            }
-          }).when(ruleVisitor).visitDeclaration(Mockito.any(Declaration.class));
-
-          doAnswer(new Answer<Void>() {
-            public Void answer(final InvocationOnMock invocation) {
-              final Object[] args = invocation.getArguments();
-              Assert.assertEquals(((Declaration) args[0]).getName(), "background-image");
-              return null;
-            }
-          }).when(ruleVisitor).leaveDeclaration(Mockito.any(Declaration.class));
-
-            qualifiedRule.accept(ruleVisitor);
-        } catch (CssValidationException e) {
-            e.printStackTrace();
-        }
-    }
-
-    @Test
-    public void testGetTokenType() {
-        Assert.assertEquals(qualifiedRule.getTokenType(), TokenType.QUALIFIED_RULE);
-    }
-
-    @Test
-    public void testSetRules() {
-        qualifiedRule.setRules(rules);
-        Assert.assertEquals(qualifiedRule.getRules(), rules);
-    }
-
-    @Test
-    public void testSetDeclarations() {
-        Assert.assertEquals(qualifiedRule.getDeclarations().get(0), declaration);
-    }
-
-    @Test
-    public void testRuleName() {
-        qualifiedRule.ruleName();
-    }
-
-    private QualifiedRule qualifiedRule;
-    private List<Rule> rules;
-    private Declaration declaration;
-    private List<Token> prelude;
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/css/StylesheetTest.java b/validator/java/src/test/java/dev/amp/validator/css/StylesheetTest.java
deleted file mode 100644
index 20a20443596b0..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/css/StylesheetTest.java
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import dev.amp.validator.visitor.UrlFunctionVisitor;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * Test for {@link Stylesheet}
- *
- * @author GeorgeLuo
- */
-
-public class StylesheetTest {
-
-  @Test
-  public void testAccept() {
-    try {
-      final Stylesheet stylesheet = new Stylesheet();
-      final List<ErrorToken> cssErrors = new ArrayList<>();
-
-      final List<ParsedCssUrl> parsedCssUrls = new ArrayList<>();
-
-      final ParsedCssUrl parsedCssUrl1 = new ParsedCssUrl();
-      parsedCssUrl1.setUtf8Url("https://www.someurl1.com");
-
-      parsedCssUrls.add(parsedCssUrl1);
-
-      final ParsedCssUrl parsedCssUrl2 = new ParsedCssUrl();
-      parsedCssUrl2.setUtf8Url("https://www.someurl2.com");
-
-      parsedCssUrls.add(parsedCssUrl2);
-
-      final UrlFunctionVisitor visitor = new UrlFunctionVisitor(parsedCssUrls, cssErrors);
-
-      Declaration declaration = new Declaration("background-image");
-      declaration.setLine(0);
-      declaration.setCol(1);
-      declaration.getValue().add(new EOFToken());
-
-      List<Declaration> declarations = new ArrayList<>();
-      declarations.add(declaration);
-
-      QualifiedRule qualifiedRule = new QualifiedRule();
-      qualifiedRule.setDeclarations(declarations);
-
-      List<Rule> rules = new ArrayList<>();
-      rules.add(qualifiedRule);
-
-      stylesheet.setRules(rules);
-      stylesheet.accept(visitor);
-
-    } catch (CssValidationException e) {
-      e.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testGetTokenType() {
-    final Stylesheet stylesheet = new Stylesheet();
-    Assert.assertEquals(stylesheet.getTokenType(), TokenType.STYLESHEET);
-  }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/css/TokenStreamTest.java b/validator/java/src/test/java/dev/amp/validator/css/TokenStreamTest.java
deleted file mode 100644
index 8c59792d25a44..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/css/TokenStreamTest.java
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.css;
-
-import com.steadystate.css.parser.SACParserCSS3Constants;
-import com.steadystate.css.parser.Token;
-import org.testng.Assert;
-import org.testng.annotations.BeforeTest;
-import org.testng.annotations.Test;
-
-import java.util.LinkedList;
-import java.util.List;
-
-/**
- * Test for {@link TokenStream}
- *
- * @author GeorgeLuo
- */
-
-public class TokenStreamTest {
-
-    @BeforeTest
-    public void init() throws Exception {
-        List<Token> tokens = new LinkedList<>();
-        tokens.add(new Token(SACParserCSS3Constants.S, " "));
-        tokens.add(new Token(SACParserCSS3Constants.IDENT, "square"));
-        tokens.add(new Token(SACParserCSS3Constants.EOF, ""));
-        tokenStream = new TokenStream(tokens);
-    }
-
-    @Test
-    public void testConsume() {
-        tokenStream.consume();
-        Token t = tokenStream.current();
-        Assert.assertEquals(t.kind, SACParserCSS3Constants.S);
-        Assert.assertEquals(t.image, " ");
-    }
-
-    @Test
-    public void testNext() {
-        Token t = tokenStream.next();
-        Assert.assertEquals(t.kind, SACParserCSS3Constants.IDENT);
-        Assert.assertEquals(t.image, "square");
-    }
-
-    @Test
-    public void testTokenAt() {
-        Token t = tokenStream.tokenAt(1);
-        Assert.assertEquals(t.kind, SACParserCSS3Constants.IDENT);
-        Assert.assertEquals(t.image, "square");
-    }
-
-    @Test
-    public void testReconsume() {
-        tokenStream.consume();
-        tokenStream.consume();
-        tokenStream.reconsume();
-        Token t = tokenStream.current();
-        Assert.assertEquals(t.kind, SACParserCSS3Constants.IDENT);
-        Assert.assertEquals(t.image, "square");
-    }
-
-    private TokenStream tokenStream;
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/css/TokenTest.java b/validator/java/src/test/java/dev/amp/validator/css/TokenTest.java
deleted file mode 100644
index e6def2f9151e0..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/css/TokenTest.java
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-package dev.amp.validator.css;
-
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-/**
- * Test for {@link Token}
- *
- * @author GeorgeLuo
- */
-
-public class TokenTest {
-
-    @Test
-    public void testGetTokenType() {
-        Token token = new Declaration("h1");
-        Assert.assertEquals(((Declaration) token).getTokenType(), TokenType.DECLARATION);
-    }
-
-    @Test
-    public void testSetLine() {
-        Declaration token = new Declaration("h1");
-        token.setLine(12);
-        Assert.assertEquals(token.getLine(), 12);
-    }
-
-    @Test
-    public void testSetCol() {
-        Declaration token = new Declaration("h1");
-        token.setCol(12);
-        Assert.assertEquals(token.getCol(), 12);
-    }
-
-    @Test
-    public void testGetValue() {
-        final Token token = new EOFToken();
-        Assert.assertEquals(token.getValue(), "EOF_TOKEN");
-    }
-
-    @Test
-    public void testTestToString() {
-        Token token = new Declaration("h1");
-        Assert.assertEquals(token.toString(), "DECLARATION");
-    }
-
-    private Token token;
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/parser/AMPHtmlParserTest.java b/validator/java/src/test/java/dev/amp/validator/parser/AMPHtmlParserTest.java
deleted file mode 100644
index e41f76ea01a3f..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/parser/AMPHtmlParserTest.java
+++ /dev/null
@@ -1,1076 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.parser;
-
-import dev.amp.validator.ValidatorProtos;
-import dev.amp.validator.ExitCondition;
-import org.testng.Assert;
-import org.testng.annotations.BeforeClass;
-import org.testng.annotations.Test;
-
-import javax.annotation.Nonnull;
-import java.io.BufferedReader;
-import java.io.IOException;
-import java.io.InputStream;
-import java.io.InputStreamReader;
-
-public class AMPHtmlParserTest {
-  @BeforeClass
-  public void init() throws Exception {
-    ampHtmlParser = new AMPHtmlParser();
-  }
-
-  //VALIDATION TAG
-// TODO - Tagchowder implicitly added html tag to the parent of head.
-//    @Test
-//    public void testMandatoryTagMissing() {
-//        try {
-//            String inputHtml =
-//                    readFile(
-//                            "test-cases/tags/testMandatoryTagMissing.html");
-//            final int maxNode = 10000;
-//            ValidatorProtos.ValidationResult result =
-//                    ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-//            Assert.assertEquals(result.getErrorsCount(), 3, "Expecting to have 3 error");
-//            Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.WRONG_PARENT_TAG);
-//            Assert.assertTrue(result.getErrors(1).getCode() == ValidatorProtos.ValidationError.Code.WRONG_PARENT_TAG);
-//            Assert.assertTrue(result.getErrors(2).getCode() == ValidatorProtos.ValidationError.Code.MANDATORY_TAG_MISSING);
-//        } catch (final IOException ex) {
-//            ex.printStackTrace();
-//        }
-//    }
-
-  @Test
-  public void testTagRequiredByMissing() {
-  }
-
-  @Test
-  public void getTagExcludedByTag() {
-  }
-
-  @Test
-  public void testDisallowedTag() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testDisallowedTag.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DISALLOWED_TAG);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testDisallowedScriptTag() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testDisallowedScriptTag.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DISALLOWED_SCRIPT_TAG);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testDuplicateUniqueTag() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testDuplicateUniqueTag.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DUPLICATE_UNIQUE_TAG);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testWrongParentTag() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testWrongParentTag.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.WRONG_PARENT_TAG);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testDisallowedTagAncestor() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testDisallowedTagAncestor.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DISALLOWED_TAG_ANCESTOR);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testMandatoryLastChildTag() {
-
-  }
-
-  @Test
-  public void testMandatoryTagAncestor() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testMandatoryTagAncestor.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.MANDATORY_TAG_ANCESTOR);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testMandatoryTagAncestorWithHint() {
-
-  }
-
-  @Test
-  public void testIncorrectNumChildTags() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testIncorrectNumChildTags.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.INCORRECT_NUM_CHILD_TAGS);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testIncorrectMinNumChildTag() {
-
-  }
-
-  @Test
-  public void testDisallowedChildTagName() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testDisallowedChildTagName.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DISALLOWED_CHILD_TAG_NAME);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testDisallowedFirstChildTagName() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testDisallowedFirstChildTagName.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DISALLOWED_FIRST_CHILD_TAG_NAME);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testChildTagDoesNotSatisfyReferencePoint() {
-
-  }
-
-  @Test
-  public void testTagNotAllowedToHaveSiblings() {
-
-  }
-
-  @Test
-  public void testReferencePointConflict() {
-
-  }
-
-  @Test
-  public void testChildTagDoesNotSatisfyReferencePointSingular() {
-
-  }
-
-  @Test
-  public void testBaseTagMustProceedAllUrls() {
-
-  }
-
-  @Test
-  public void testMaxParseNodesException() {
-//        try {
-//            String inputHtml =
-//                    readFile(
-//                            "test-cases/testPass1.html");
-//            final int maxNode = 2;
-//            ValidatorProtos.ValidationResult result =
-//                    ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-//            Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have max parse nodes error");
-//            //Assert.assertEquals(result.getErrors(0).getParams(0),
-//                    //"Maximum nodes reached parsing HTML");
-//        } catch (final IOException ex) {
-//            ex.printStackTrace();
-//        }
-  }
-
-  @Test
-  public void testMissingRequiredExtension() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testMissingRequiredExtension.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.MISSING_REQUIRED_EXTENSION);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testSpecifiedLayoutInvalid() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testSpecifiedLayoutInvalid.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.SPECIFIED_LAYOUT_INVALID);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testTagReferencePointConflict() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testTagReferencePointConflict.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 2, "Expecting to have 2 errors");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DISALLOWED_TAG_ANCESTOR);
-      Assert.assertTrue(result.getErrors(1).getCode() == ValidatorProtos.ValidationError.Code.TAG_REFERENCE_POINT_CONFLICT);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testDeprecatedTag() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testDeprecatedTag.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DEPRECATED_TAG);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testExtensionUnused() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testExtensionUnused.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.EXTENSION_UNUSED);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testNonWhitespaceCdataEncountered() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testNonWhitespaceCdataEncountered.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.NON_WHITESPACE_CDATA_ENCOUNTERED);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-
-  @Test
-  public void testMandatoryCdataMissingOrIncorrect() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testMandatoryCdataMissingOrIncorrect.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.MANDATORY_CDATA_MISSING_OR_INCORRECT);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testInvalidJsonCdata() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/tags/testInvalidJsonCdata.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.INVALID_JSON_CDATA);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  //VALIDATION ATTRIBUTES
-
-  @Test
-  public void testDisallowedAttr() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testDisallowedAttr.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 2, "Expecting to have 2 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR);
-      Assert.assertTrue(result.getErrors(1).getCode() == ValidatorProtos.ValidationError.Code.MANDATORY_ATTR_MISSING);
-      // TODO : write a containsError helper method
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testInvalidAttrValue() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testInvalidAttrValue.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  // TODO : waiting on TagChowder fix
-  @Test
-  public void testDuplicateAttribute() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testDuplicateAttribute.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-//            Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-//            Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DUPLICATE_ATTRIBUTE);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testMandatoryAttrMissing() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testMandatoryAttrMissing.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.MANDATORY_ATTR_MISSING);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testAttrMissingRequiredExtension() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testAttrMissingRequiredExtension.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.ATTR_MISSING_REQUIRED_EXTENSION);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  // VALIDATION TEMPLATE
-
-  @Test
-  public void testTemplateInAttrName() {
-    try {
-      //TODO - TagChowder is removing '{{ }}'.
-      String inputHtml =
-        readFile(
-          "test-cases/templates/testTemplateInAttrName.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR);
-      //Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.TEMPLATE_IN_ATTR_NAME);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testUnescapedTemplateInAttrValue() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/templates/testUnescapedTemplateInAttrValue.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.UNESCAPED_TEMPLATE_IN_ATTR_VALUE);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testTemplatePartialInAttrValue() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/templates/testTemplatePartialInAttrValue.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.TEMPLATE_PARTIAL_IN_ATTR_VALUE);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testMissingLayoutAttributes() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testMissingLayoutAttributes.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.MISSING_LAYOUT_ATTRIBUTES);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testAttrDisallowedBySpecifiedLayout() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testAttrDisallowedBySpecifiedLayout.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.ATTR_DISALLOWED_BY_SPECIFIED_LAYOUT);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testAttrDisallowedByImpliedLayout() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testAttrDisallowedByImpliedLayout.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.ATTR_DISALLOWED_BY_IMPLIED_LAYOUT);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testAttrValueRequiredByLayout() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testAttrValueRequiredByLayout.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.ATTR_VALUE_REQUIRED_BY_LAYOUT);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testImpliedLayoutInvalid() {
-//        try {
-//            String inputHtml =
-//                    readFile(
-//                            "test-cases/attributes/testImpliedLayoutInvalid.html");
-//            final int maxNode = 10000;
-//            ValidatorProtos.ValidationResult result =
-//                    ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-//            Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-//            Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.IMPLIED_LAYOUT_INVALID);
-//        } catch (final IOException ex) {
-//            ex.printStackTrace();
-//        }
-  }
-
-  @Test
-  public void testInconsistentUnitsForWidthAndHeight() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testInconsistentUnitsForWidthAndHeight.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.INCONSISTENT_UNITS_FOR_WIDTH_AND_HEIGHT);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testAttrRequiredButMissing() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testAttrRequiredButMissing.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.ATTR_REQUIRED_BUT_MISSING);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testDisallowedPropertyInAttrValue() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testDisallowedPropertyInAttrValue.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DISALLOWED_PROPERTY_IN_ATTR_VALUE);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testMissingUrl() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testMissingUrl.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.MISSING_URL);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testDisallowedRelativeUrl() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testDisallowedRelativeUrl.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DISALLOWED_RELATIVE_URL);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testInvalidUrlProtocol() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/attributes/testInvalidUrlProtocol.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.INVALID_URL_PROTOCOL);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-
-  // VALIDATION CSS
-
-  // TODO: debugging indicates the CSS is tokenized before the length check. Should validate length before.
-  @Test
-  public void testStylesheetTooLong() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testStylesheetTooLong.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.STYLESHEET_TOO_LONG);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error.");
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testInlineStyleTooLong() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testInlineStyleTooLong.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.INLINE_STYLE_TOO_LONG);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error.");
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSSyntaxUnterminatedComment() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSSyntaxUnterminatedComment.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error.");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_UNTERMINATED_COMMENT);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSUnterminatedString() {
-    try {
-      //TODO - Results add additional CSS_SYNTAX_INVALID_DECLARATION (should only return unterminated error)
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSSyntaxUnterminatedString.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 4, "Expecting to have 4 error.");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_UNTERMINATED_STRING);
-      Assert.assertTrue(result.getErrors(1).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_UNTERMINATED_STRING);
-      Assert.assertTrue(result.getErrors(2).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_DECLARATION);
-      Assert.assertTrue(result.getErrors(3).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_DECLARATION);
-
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSSyntaxStrayTrailingBackslash() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSSyntaxStrayTrailingBackslash.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 2, "Expecting to have 2 errors.");
-      Assert.assertTrue(result.getErrors(0).getCode()
-        == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_STRAY_TRAILING_BACKSLASH);
-      Assert.assertTrue(result.getErrors(1).getCode()
-        == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_DECLARATION);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSSyntaxInvalidDeclaration() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSSyntaxInvalidDeclaration.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error.");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_DECLARATION);
-
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSSyntaxIncompleteDeclaration() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSSyntaxIncompleteDeclaration.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error.");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INCOMPLETE_DECLARATION);
-
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSSyntaxDisallowedMediaType() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSSyntaxDisallowedMediaType.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error.");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_MEDIA_TYPE);
-
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSSyntaxDisallowedPropertyValue() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSSyntaxDisallowedPropertyValue.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error.");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE);
-
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSSyntaxInvalidAtRule() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSSyntaxInvalidAtRule.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 4, "Expecting to have 4 errors");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_AT_RULE);
-      Assert.assertTrue(result.getErrors(1).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_AT_RULE);
-      Assert.assertTrue(result.getErrors(2).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_AT_RULE);
-      Assert.assertTrue(result.getErrors(3).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_AT_RULE);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSSyntaxMalformedMediaQuery() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSSyntaxMalformedMediaQuery.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error.");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_MALFORMED_MEDIA_QUERY);
-
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSSyntaxDisallowedMediaFeature() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSSyntaxDisallowedMediaFeature.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error.");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_MEDIA_FEATURE);
-
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSSyntaxMissingURL() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSSyntaxMissingURL.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_MISSING_URL);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSSyntaxBadUrl() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSSyntaxBadUrl.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_BAD_URL);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSExcessivelyNested() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSExcessivelyNested.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_EXCESSIVELY_NESTED);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-//    @Test
-//    public void testCSSDisallowedRelativeURL() {
-//        try {
-//            String inputHtml =
-//                    readFile(
-//                            "test-cases/css/testCSSDisallowedRelativeURL.html");
-//            final int maxNode = 10000;
-//            ValidatorProtos.ValidationResult result =
-//                    ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-//            Assert.assertEquals(result.getErrorsCount(), 0, "Expecting to have 1 error");
-//            Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_DISALLOWED_RELATIVE_URL);
-//        } catch (final IOException ex) {
-//            ex.printStackTrace();
-//        }
-//    }
-
-  @Test
-  public void testCSSSyntaxInvalidUrlProtocol() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/css/testCSSSyntaxInvalidUrlProtocol.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_URL_PROTOCOL);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testCSSSyntaxInvalidUrl() {
-//        try {
-//            String inputHtml =
-//                    readFile(
-//                            "test-cases/css/testCSSSyntaxInvalidUrl.html");
-//            final int maxNode = 10000;
-//            ValidatorProtos.ValidationResult result =
-//                    ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-//            Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-//            Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.CSS_SYNTAX_INVALID_URL);
-//        } catch (final IOException ex) {
-//            ex.printStackTrace();
-//        }
-  }
-
-  // VALIDATION MISC
-
-  @Test
-  public void testWarningExtensionDeprecatedVersion() {
-    try {
-      String inputHtml =
-        readFile(
-          "test-cases/misc/testWarningExtensionDeprecatedVersion.html");
-      final int maxNode = 10000;
-      ValidatorProtos.ValidationResult result =
-        ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP4EMAIL, ExitCondition.FULL_PARSING, maxNode);
-      Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-      Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.WARNING_EXTENSION_DEPRECATED_VERSION);
-    } catch (final IOException ex) {
-      ex.printStackTrace();
-    }
-  }
-
-  // VALIDATION NON-AMP4EMAIL
-
-  @Test
-  public void testDuplicateDimension() {
-//        try {
-//            String inputHtml =
-//                    readFile(
-//                            "test-cases/attributes/testDuplicateDimension.html");
-//            final int maxNode = 10000;
-//            ValidatorProtos.ValidationResult result =
-//                    ampHtmlParser.parse(inputHtml, ValidatorProtos.HtmlFormat.Code.AMP, ExitCondition.FULL_PARSING, maxNode);
-//            Assert.assertEquals(result.getErrorsCount(), 1, "Expecting to have 1 error");
-//            Assert.assertTrue(result.getErrors(0).getCode() == ValidatorProtos.ValidationError.Code.DUPLICATE_DIMENSION);
-//        } catch (final IOException ex) {
-//            ex.printStackTrace();
-//        }
-  }
-
-  public static String readFile(@Nonnull final String filePath) throws IOException {
-    final StringBuilder sb = new StringBuilder();
-    final InputStream is =
-      Thread.currentThread().getContextClassLoader().getResourceAsStream(filePath);
-    try (BufferedReader br = new BufferedReader(new InputStreamReader(is))) {
-      String currentLine;
-      while ((currentLine = br.readLine()) != null) {
-        sb.append(currentLine).append("\n");
-      }
-    }
-    return sb.toString();
-  }
-
-  /**
-   * AMPHtmlParser instance.
-   */
-  private AMPHtmlParser ampHtmlParser;
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/utils/AttributeSpecUtilsTest.java b/validator/java/src/test/java/dev/amp/validator/utils/AttributeSpecUtilsTest.java
deleted file mode 100644
index 5995e32d2fbdf..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/utils/AttributeSpecUtilsTest.java
+++ /dev/null
@@ -1,407 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.utils;
-
-import dev.amp.validator.*;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.exception.TagValidationException;
-import org.mockito.ArgumentCaptor;
-import org.mockito.Mockito;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-import org.xml.sax.Attributes;
-import org.xml.sax.Locator;
-
-import java.io.IOException;
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.regex.Pattern;
-
-/**
- * Test for {@link AttributeSpecUtils}
- *
- * @author GeorgeLuo
- */
-
-public class AttributeSpecUtilsTest {
-
-  @Test
-  public void testIsUsedForTypeIdentifiers() {
-    final List<String> typeIdentifiers = new ArrayList<>();
-    final List<String> enabledBys = new ArrayList<>();
-    final List<String> disabledBys = new ArrayList<>();
-
-    typeIdentifiers.add("amp4email");
-    enabledBys.add("enablingId");
-    typeIdentifiers.add("transformed");
-    Assert.assertFalse(AttributeSpecUtils.isUsedForTypeIdentifiers(typeIdentifiers, enabledBys, disabledBys));
-
-    typeIdentifiers.add("enablingId");
-    Assert.assertTrue(AttributeSpecUtils.isUsedForTypeIdentifiers(typeIdentifiers, enabledBys, disabledBys));
-
-    enabledBys.clear();
-    typeIdentifiers.add("disablingId");
-    disabledBys.add("disablingId");
-    Assert.assertFalse(AttributeSpecUtils.isUsedForTypeIdentifiers(typeIdentifiers, enabledBys, disabledBys));
-
-    typeIdentifiers.clear();
-    Assert.assertTrue(AttributeSpecUtils.isUsedForTypeIdentifiers(typeIdentifiers, enabledBys, disabledBys));
-
-    enabledBys.clear();
-    disabledBys.clear();
-    Assert.assertTrue(AttributeSpecUtils.isUsedForTypeIdentifiers(typeIdentifiers, enabledBys, disabledBys));
-  }
-
-  // TODO : write assertions for mocks that touch notable objects
-  @Test
-  public void testValidateAttributes() {
-
-    // IMPLIED_LAYOUT_INVALID
-
-    final ValidatorProtos.AmpLayout.Builder ampLayoutBuilder = ValidatorProtos.AmpLayout.newBuilder();
-
-    ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-
-    tagSpecBuilder.setAmpLayout(ampLayoutBuilder.build());
-
-    ValidatorProtos.AttrSpec.Builder attrSpecBuilder = ValidatorProtos.AttrSpec.newBuilder();
-    attrSpecBuilder.setDeprecation("deprecationString");
-    List<ValidatorProtos.AttrSpec> attrSpecs = new ArrayList<>();
-    attrSpecs.add(attrSpecBuilder.build());
-
-    Map<String, ValidatorProtos.AttrSpec> attrsByName = new HashMap<>();
-    attrsByName.put("HTML", attrSpecBuilder.build());
-
-    ParsedTagSpec parsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-    Mockito.when(parsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-    Mockito.when(parsedTagSpec.getImplicitAttrspecs()).thenReturn(attrSpecs);
-    Mockito.when(parsedTagSpec.getAttrsByName()).thenReturn(attrsByName);
-
-    ParsedTagSpec bestMatchReferencePoint = Mockito.mock(ParsedTagSpec.class);
-
-    TagStack tagStack = Mockito.mock(TagStack.class);
-
-    ParsedAttrSpec parsedAttrSpec = Mockito.mock(ParsedAttrSpec.class);
-    Mockito.when(parsedAttrSpec.isUsedForTypeIdentifiers(Mockito.anyList())).thenReturn(true);
-    Mockito.when(parsedAttrSpec.getSpec()).thenReturn(attrSpecBuilder.build());
-
-    ParsedAttrSpecs parsedAttrSpecs = Mockito.mock(ParsedAttrSpecs.class);
-    Mockito.when(parsedAttrSpecs.getParsedAttrSpec("HTML", "htmlValue",
-      attrSpecBuilder.build())).thenReturn(parsedAttrSpec);
-
-    ParsedValidatorRules parsedValidatorRules = Mockito.mock(ParsedValidatorRules.class);
-    Mockito.when(parsedValidatorRules.getParsedAttrSpecs()).thenReturn(parsedAttrSpecs);
-
-    Context context = Mockito.mock(Context.class);
-    Mockito.when(context.getTagStack()).thenReturn(tagStack);
-    Mockito.when(context.getRules()).thenReturn(parsedValidatorRules);
-
-    Attributes attributes = Mockito.mock(Attributes.class);
-    Mockito.when(attributes.getLength()).thenReturn(1);
-    Mockito.when(attributes.getLocalName(0)).thenReturn("HTML");
-    Mockito.when(attributes.getValue(0)).thenReturn("htmlValue");
-
-
-    ParsedHtmlTag encounteredTag = Mockito.mock(ParsedHtmlTag.class);
-    Mockito.when(encounteredTag.upperName()).thenReturn("HTML");
-    Mockito.when(encounteredTag.attrs()).thenReturn(attributes);
-
-    ValidateTagResult result =
-      new ValidateTagResult(ValidatorProtos.ValidationResult.newBuilder(), null);
-
-    try {
-      AttributeSpecUtils.validateAttributes(parsedTagSpec, bestMatchReferencePoint, context, encounteredTag, result);
-    } catch (TagValidationException | IOException | CssValidationException e) {
-      e.printStackTrace();
-    }
-
-    ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-    ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-    ArgumentCaptor<ValidatorProtos.ValidationError.Code> warningCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-    Mockito.verify(context, Mockito.times(1)).addError(errorCodeCapture.capture(),
-      Mockito.any(Locator.class),
-      listCaptor.capture(),
-      Mockito.anyString(),
-      Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-    Mockito.verify(context, Mockito.times(1)).addWarning(warningCodeCapture.capture(),
-      Mockito.any(Locator.class),
-      listCaptor.capture(),
-      Mockito.anyString(),
-      Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-
-    Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.IMPLIED_LAYOUT_INVALID);
-    Assert.assertEquals(warningCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.DEPRECATED_ATTR);
-
-    // DISALLOWED_ATTR
-
-    tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-
-    attrSpecBuilder = ValidatorProtos.AttrSpec.newBuilder();
-//    attrSpecBuilder.setDeprecation("deprecationString");
-    attrSpecs = new ArrayList<>();
-    attrSpecs.add(attrSpecBuilder.build());
-
-    attrsByName = new HashMap<>();
-    attrsByName.put("HTML", attrSpecBuilder.build());
-
-    parsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-    Mockito.when(parsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-    Mockito.when(parsedTagSpec.getImplicitAttrspecs()).thenReturn(attrSpecs);
-    Mockito.when(parsedTagSpec.getAttrsByName()).thenReturn(attrsByName);
-
-    bestMatchReferencePoint = Mockito.mock(ParsedTagSpec.class);
-
-    tagStack = Mockito.mock(TagStack.class);
-
-    parsedAttrSpec = Mockito.mock(ParsedAttrSpec.class);
-    Mockito.when(parsedAttrSpec.isUsedForTypeIdentifiers(Mockito.anyList())).thenReturn(false);
-    Mockito.when(parsedAttrSpec.getSpec()).thenReturn(attrSpecBuilder.build());
-
-    parsedAttrSpecs = Mockito.mock(ParsedAttrSpecs.class);
-    Mockito.when(parsedAttrSpecs.getParsedAttrSpec("HTML", "htmlValue", attrSpecBuilder.build())).thenReturn(parsedAttrSpec);
-
-    parsedValidatorRules = Mockito.mock(ParsedValidatorRules.class);
-    Mockito.when(parsedValidatorRules.getParsedAttrSpecs()).thenReturn(parsedAttrSpecs);
-
-    context = Mockito.mock(Context.class);
-    Mockito.when(context.getTagStack()).thenReturn(tagStack);
-    Mockito.when(context.getRules()).thenReturn(parsedValidatorRules);
-
-    attributes = Mockito.mock(Attributes.class);
-    Mockito.when(attributes.getLength()).thenReturn(1);
-    Mockito.when(attributes.getLocalName(0)).thenReturn("HTML");
-    Mockito.when(attributes.getValue(0)).thenReturn("htmlValue");
-
-    encounteredTag = Mockito.mock(ParsedHtmlTag.class);
-    Mockito.when(encounteredTag.upperName()).thenReturn("HTML");
-    Mockito.when(encounteredTag.attrs()).thenReturn(attributes);
-
-    result =
-      new ValidateTagResult(ValidatorProtos.ValidationResult.newBuilder(), null);
-    try {
-      AttributeSpecUtils.validateAttributes(parsedTagSpec, bestMatchReferencePoint, context, encounteredTag, result);
-    } catch (TagValidationException | IOException | CssValidationException e) {
-      e.printStackTrace();
-    }
-
-    listCaptor = ArgumentCaptor.forClass(List.class);
-    errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-    Mockito.verify(context, Mockito.times(1)).addError(errorCodeCapture.capture(),
-      Mockito.any(Locator.class),
-      listCaptor.capture(),
-      Mockito.anyString(),
-      Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-    Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.DISALLOWED_ATTR);
-
-    // INVALID_ATTR_VALUE
-
-    tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-
-    attrSpecBuilder = ValidatorProtos.AttrSpec.newBuilder();
-    attrSpecBuilder.setBlacklistedValueRegex("");
-    attrSpecs = new ArrayList<>();
-    attrSpecs.add(attrSpecBuilder.build());
-
-    attrsByName = new HashMap<>();
-    attrsByName.put("HTML", attrSpecBuilder.build());
-
-    parsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-    Mockito.when(parsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-    Mockito.when(parsedTagSpec.getImplicitAttrspecs()).thenReturn(attrSpecs);
-    Mockito.when(parsedTagSpec.getAttrsByName()).thenReturn(attrsByName);
-
-    bestMatchReferencePoint = Mockito.mock(ParsedTagSpec.class);
-
-    tagStack = Mockito.mock(TagStack.class);
-
-    parsedAttrSpec = Mockito.mock(ParsedAttrSpec.class);
-    Mockito.when(parsedAttrSpec.isUsedForTypeIdentifiers(Mockito.anyList())).thenReturn(true);
-    Mockito.when(parsedAttrSpec.getSpec()).thenReturn(attrSpecBuilder.build());
-
-    parsedAttrSpecs = Mockito.mock(ParsedAttrSpecs.class);
-    Mockito.when(parsedAttrSpecs.getParsedAttrSpec("HTML", "htmlValue", attrSpecBuilder.build())).thenReturn(parsedAttrSpec);
-
-    parsedValidatorRules = Mockito.mock(ParsedValidatorRules.class);
-    Mockito.when(parsedValidatorRules.getParsedAttrSpecs()).thenReturn(parsedAttrSpecs);
-    Mockito.when(parsedValidatorRules.getPartialMatchCaseiRegex(Mockito.anyString())).thenReturn(Pattern.compile(""));
-
-    context = Mockito.mock(Context.class);
-    Mockito.when(context.getTagStack()).thenReturn(tagStack);
-    Mockito.when(context.getRules()).thenReturn(parsedValidatorRules);
-
-    attributes = Mockito.mock(Attributes.class);
-    Mockito.when(attributes.getLength()).thenReturn(1);
-    Mockito.when(attributes.getLocalName(0)).thenReturn("HTML");
-    Mockito.when(attributes.getValue(0)).thenReturn("htmlValue");
-
-    encounteredTag = Mockito.mock(ParsedHtmlTag.class);
-    Mockito.when(encounteredTag.upperName()).thenReturn("HTML");
-    Mockito.when(encounteredTag.attrs()).thenReturn(attributes);
-
-    result =
-      new ValidateTagResult(ValidatorProtos.ValidationResult.newBuilder(), null);
-
-    try {
-      AttributeSpecUtils.validateAttributes(parsedTagSpec, bestMatchReferencePoint, context, encounteredTag, result);
-    } catch (TagValidationException | IOException | CssValidationException e) {
-      e.printStackTrace();
-    }
-
-    listCaptor = ArgumentCaptor.forClass(List.class);
-    errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-    Mockito.verify(context, Mockito.times(1)).addError(errorCodeCapture.capture(),
-      Mockito.any(Locator.class),
-      listCaptor.capture(),
-      Mockito.anyString(),
-      Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-    Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.INVALID_ATTR_VALUE);
-
-    // BASE_TAG_MUST_PRECEED_ALL_URLS
-
-    tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-    tagSpecBuilder.setTagName("BASE");
-
-    attrSpecBuilder = ValidatorProtos.AttrSpec.newBuilder();
-    attrSpecs = new ArrayList<>();
-    attrSpecs.add(attrSpecBuilder.build());
-
-    attrsByName = new HashMap<>();
-    attrsByName.put("attr", attrSpecBuilder.build());
-    attrsByName.put("href", attrSpecBuilder.build());
-
-    parsedTagSpec = Mockito.mock(ParsedTagSpec.class);
-    Mockito.when(parsedTagSpec.getSpec()).thenReturn(tagSpecBuilder.build());
-    Mockito.when(parsedTagSpec.getImplicitAttrspecs()).thenReturn(attrSpecs);
-    Mockito.when(parsedTagSpec.getAttrsByName()).thenReturn(attrsByName);
-
-    bestMatchReferencePoint = Mockito.mock(ParsedTagSpec.class);
-
-    tagStack = Mockito.mock(TagStack.class);
-
-    parsedAttrSpec = Mockito.mock(ParsedAttrSpec.class);
-    Mockito.when(parsedAttrSpec.isUsedForTypeIdentifiers(Mockito.anyList())).thenReturn(true);
-    Mockito.when(parsedAttrSpec.getSpec()).thenReturn(attrSpecBuilder.build());
-
-    parsedAttrSpecs = Mockito.mock(ParsedAttrSpecs.class);
-    Mockito.when(parsedAttrSpecs.getParsedAttrSpec("attr", "attrValue", attrSpecBuilder.build())).thenReturn(parsedAttrSpec);
-    Mockito.when(parsedAttrSpecs.getParsedAttrSpec("href", "hrefValue", attrSpecBuilder.build())).thenReturn(parsedAttrSpec);
-
-    parsedValidatorRules = Mockito.mock(ParsedValidatorRules.class);
-    Mockito.when(parsedValidatorRules.getParsedAttrSpecs()).thenReturn(parsedAttrSpecs);
-    Mockito.when(parsedValidatorRules.getPartialMatchCaseiRegex(Mockito.anyString())).thenReturn(Pattern.compile(""));
-
-    context = Mockito.mock(Context.class);
-    Mockito.when(context.getTagStack()).thenReturn(tagStack);
-    Mockito.when(context.getRules()).thenReturn(parsedValidatorRules);
-    Mockito.when(context.hasSeenUrl()).thenReturn(true);
-
-    attributes = Mockito.mock(Attributes.class);
-    Mockito.when(attributes.getLength()).thenReturn(1);
-    Mockito.when(attributes.getLocalName(0)).thenReturn("href");
-    Mockito.when(attributes.getValue(0)).thenReturn("hrefValue");
-
-    encounteredTag = Mockito.mock(ParsedHtmlTag.class);
-    Mockito.when(encounteredTag.upperName()).thenReturn("BASE");
-    Mockito.when(encounteredTag.attrs()).thenReturn(attributes);
-
-    result =
-      new ValidateTagResult(ValidatorProtos.ValidationResult.newBuilder(), null);
-
-    try {
-      AttributeSpecUtils.validateAttributes(parsedTagSpec, bestMatchReferencePoint, context, encounteredTag, result);
-    } catch (TagValidationException | IOException | CssValidationException e) {
-      e.printStackTrace();
-    }
-
-    listCaptor = ArgumentCaptor.forClass(List.class);
-    errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-    Mockito.verify(context, Mockito.times(1)).addError(errorCodeCapture.capture(),
-      Mockito.any(Locator.class),
-      listCaptor.capture(),
-      Mockito.anyString(),
-      Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-    Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.BASE_TAG_MUST_PRECEED_ALL_URLS);
-  }
-
-  @Test
-  public void testValidateAttrRequiredExtensions() {
-  }
-
-  @Test
-  public void testValidateAttrDeclaration() {
-  }
-
-  @Test
-  public void testAttrValueHasTemplateSyntax() {
-  }
-
-  @Test
-  public void testValidateNonTemplateAttrValueAgainstSpec() {
-  }
-
-  @Test
-  public void testValidateAttrValueProperties() {
-  }
-
-  @Test
-  public void testValidateAttrValueUrl() {
-  }
-
-  @Test
-  public void testValidateUrlAndProtocol() {
-  }
-
-  @Test
-  public void testValidateLayout() {
-  }
-
-  @Test
-  public void testValidateAttributeInExtension() {
-  }
-
-  @Test
-  public void testGetExtensionNameAttribute() {
-  }
-
-  @Test
-  public void testValidateAttrNotFoundInSpec() {
-  }
-
-  @Test
-  public void testValidateAttrValueBelowTemplateTag() {
-  }
-
-  @Test
-  public void testAttrValueHasPartialsTemplateSyntax() {
-  }
-
-  @Test
-  public void testAttrValueHasUnescapedTemplateSyntax() {
-  }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/utils/CssSpecUtilsTest.java b/validator/java/src/test/java/dev/amp/validator/utils/CssSpecUtilsTest.java
deleted file mode 100644
index d982715efa77f..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/utils/CssSpecUtilsTest.java
+++ /dev/null
@@ -1,247 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.utils;
-
-import dev.amp.validator.ValidatorProtos;
-import com.steadystate.css.parser.SACParserCSS3Constants;
-import com.steadystate.css.parser.Token;
-import dev.amp.validator.css.AtRule;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.css.Declaration;
-import dev.amp.validator.css.ErrorToken;
-import dev.amp.validator.css.ParsedCssUrl;
-import dev.amp.validator.css.Stylesheet;
-import dev.amp.validator.visitor.RuleVisitor;
-import org.mockito.Mockito;
-import org.mockito.invocation.InvocationOnMock;
-import org.mockito.stubbing.Answer;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-import java.util.HashMap;
-import java.util.LinkedList;
-import java.util.List;
-import java.util.Map;
-import java.util.ArrayList;
-
-import static org.mockito.Mockito.doAnswer;
-
-/**
- * Test for {@link CssSpecUtils}
- *
- * @author GeorgeLuo
- */
-
-public class CssSpecUtilsTest {
-
-  @Test
-  public void testParseAStylesheet() {
-    final List<Token> tokens = new LinkedList<>();
-    tokens.add(new Token(75, "@media"));
-    tokens.add(new Token(1, " "));
-    tokens.add(new Token(22, "screen"));
-    tokens.add(new Token(55, "{"));
-    tokens.add(new Token(56, "}"));
-    tokens.add(new Token(56, "}"));
-    tokens.add(new Token(1, "\n"));
-    tokens.add(new Token(0, ""));
-
-    final Map<String, CssSpecUtils.BlockType> atRuleSpec = new HashMap<>();
-    atRuleSpec.put("$DEFAULT", CssSpecUtils.BlockType.PARSE_AS_IGNORE);
-    atRuleSpec.put("media", CssSpecUtils.BlockType.PARSE_AS_RULES);
-    atRuleSpec.put("page", CssSpecUtils.BlockType.PARSE_AS_DECLARATIONS);
-
-    final CssSpecUtils.BlockType defaultSpec = CssSpecUtils.BlockType.PARSE_AS_IGNORE;
-    final List<ErrorToken> errors = new ArrayList<>();
-
-    try {
-      final Stylesheet stylesheet = CssSpecUtils.parseAStylesheet(tokens, atRuleSpec, defaultSpec, errors);
-
-      final RuleVisitor ruleVisitor = Mockito.mock(RuleVisitor.class);
-
-      doAnswer(new Answer<Void>() {
-        public Void answer(final InvocationOnMock invocation) {
-          final Object[] args = invocation.getArguments();
-          Assert.assertEquals(((AtRule) args[0]).getName(), "media");
-          Assert.assertEquals(((AtRule) args[0]).getPrelude().size(), 3);
-          Assert.assertEquals(((AtRule) args[0]).getPrelude().get(0).toString(), " ");
-          Assert.assertEquals(((AtRule) args[0]).getPrelude().get(1).toString(), "screen");
-          Assert.assertEquals(((AtRule) args[0]).getPrelude().get(2).kind, 0);
-          return null;
-        }
-      }).when(ruleVisitor).visitAtRule(Mockito.any(AtRule.class));
-      stylesheet.accept(ruleVisitor);
-
-    } catch (CssValidationException e) {
-      e.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testExtractUrls() {
-
-    final List<Token> tokens = new LinkedList<>();
-    tokens.add(new Token(22, "@media"));
-    tokens.add(new Token(55, "screen"));
-    tokens.add(new Token(1, "\n"));
-    tokens.add(new Token(22, "background-image"));
-    tokens.add(new Token(61, ":"));
-    tokens.add(new Token(100, "https://www.somesite.com/image.jpg"));
-    tokens.add(new Token(60, ";"));
-    tokens.add(new Token(1, "\n"));
-    tokens.add(new Token(0, ""));
-
-
-    final Map<String, CssSpecUtils.BlockType> atRuleSpec = new HashMap<>();
-    atRuleSpec.put("$DEFAULT", CssSpecUtils.BlockType.PARSE_AS_IGNORE);
-    atRuleSpec.put("media", CssSpecUtils.BlockType.PARSE_AS_RULES);
-    atRuleSpec.put("page", CssSpecUtils.BlockType.PARSE_AS_DECLARATIONS);
-
-    final CssSpecUtils.BlockType defaultSpec = CssSpecUtils.BlockType.PARSE_AS_IGNORE;
-    final List<ErrorToken> errors = new ArrayList<>();
-    final List<ParsedCssUrl> parsedUrls = new ArrayList<>();
-
-    try {
-      final Stylesheet stylesheet = CssSpecUtils.parseAStylesheet(tokens, atRuleSpec, defaultSpec, errors);
-      CssSpecUtils.extractUrls(stylesheet, parsedUrls, errors);
-    } catch (CssValidationException e) {
-      e.printStackTrace();
-    }
-
-    Assert.assertEquals(parsedUrls.size(), 1);
-    Assert.assertEquals(parsedUrls.get(0).getUtf8Url(), "https://www.somesite.com/image.jpg");
-
-  }
-
-  @Test
-  public void testStripVendorPrefix() {
-    Assert.assertEquals(CssSpecUtils.stripVendorPrefix("-moz-keyframes"), "keyframes");
-    Assert.assertEquals(CssSpecUtils.stripVendorPrefix("-o-keyframes"), "keyframes");
-    Assert.assertEquals(CssSpecUtils.stripVendorPrefix("-webkit-keyframes"), "keyframes");
-    Assert.assertEquals(CssSpecUtils.stripVendorPrefix("-ms-keyframes"), "keyframes");
-  }
-
-  @Test
-  public void testStripMinMax() {
-    Assert.assertEquals(CssSpecUtils.stripMinMax("min-width"), "width");
-    Assert.assertEquals(CssSpecUtils.stripMinMax("max-width"), "width");
-  }
-
-  @Test
-  public void testAsciiMatch() {
-    final Token token = new Token(22, "@media");
-    Assert.assertTrue(CssSpecUtils.asciiMatch(token, "@media"));
-  }
-
-  @Test
-  public void testValidateKeyframesCss() {
-  }
-
-  @Test
-  public void testValidateAmp4AdsCss() {
-  }
-
-  @Test
-  public void testIsDeclarationValid() {
-    final ValidatorProtos.CssSpec.Builder cssSpecBuilder = ValidatorProtos.CssSpec.newBuilder();
-    cssSpecBuilder.addDeclaration("testName");
-    Assert.assertTrue(CssSpecUtils.isDeclarationValid(cssSpecBuilder.build(), "testName"));
-  }
-
-  @Test
-  public void testAllowedDeclarationsString() {
-    final ValidatorProtos.CssSpec.Builder cssSpecBuilder = ValidatorProtos.CssSpec.newBuilder();
-    cssSpecBuilder.addDeclaration("testName1");
-    cssSpecBuilder.addDeclaration("testName2");
-    Assert.assertEquals(CssSpecUtils.allowedDeclarationsString(cssSpecBuilder.build()),
-      "['testName1', 'testName2']");
-  }
-
-  @Test
-  public void testParseUrlToken() {
-    final List<Token> tokens = new LinkedList<>();
-    tokens.add(new Token(22, "@media"));
-    tokens.add(new Token(100, "https://www.someurl.com/image.jpg"));
-    tokens.add(new Token(0, ""));
-
-    final ParsedCssUrl parsedCssUrl = new ParsedCssUrl();
-
-    try {
-      CssSpecUtils.parseUrlToken(tokens, 1, parsedCssUrl);
-    } catch (CssValidationException e) {
-      e.printStackTrace();
-    }
-
-    Assert.assertEquals(parsedCssUrl.getUtf8Url(),
-      "https://www.someurl.com/image.jpg");
-  }
-
-  @Test
-  public void testParseUrlFunction() {
-    final List<Token> tokens = new LinkedList<>();
-    tokens.add(new Token(22, "square"));
-    tokens.add(new Token(1, "\n"));
-    tokens.add(new Token(SACParserCSS3Constants.FUNCTION, "url("));
-    tokens.add(new Token(SACParserCSS3Constants.STRING, "https://www.somesite.com/image.jpg"));
-    tokens.add(new Token(SACParserCSS3Constants.RROUND, ")"));
-    tokens.add(new Token(1, "\n"));
-    tokens.add(new Token(0, ""));
-
-    final ParsedCssUrl parsedCssUrl = new ParsedCssUrl();
-
-    try {
-      Assert.assertEquals(CssSpecUtils.parseUrlFunction(tokens, 2, parsedCssUrl), 5);
-      Assert.assertEquals(parsedCssUrl.getUtf8Url(), "https://www.somesite.com/image.jpg");
-    } catch (CssValidationException e) {
-      e.printStackTrace();
-    }
-  }
-
-  @Test
-  public void testParseInlineStyle() {
-    final List<Token> tokens = new LinkedList<>();
-    tokens.add(new Token(22, "position"));
-    tokens.add(new Token(61, ":"));
-    tokens.add(new Token(22, "10"));
-    tokens.add(new Token(60, ";"));
-    tokens.add(new Token(22, "color"));
-    tokens.add(new Token(61, ":"));
-    tokens.add(new Token(22, "blue"));
-    tokens.add(new Token(60, ";"));
-    tokens.add(new Token(0, ""));
-
-    final List<ErrorToken> errors = new ArrayList<>();
-
-    try {
-      List<Declaration> declarations = CssSpecUtils.parseInlineStyle(tokens, errors);
-      Assert.assertEquals(declarations.size(), 2);
-      Assert.assertEquals(declarations.get(0).getName(), "position");
-      Assert.assertEquals(declarations.get(0).getValue().get(0).image, "10");
-      Assert.assertEquals(declarations.get(0).getValue().get(1).kind, 0);
-      Assert.assertEquals(declarations.get(1).getName(), "color");
-      Assert.assertEquals(declarations.get(1).getValue().get(0).image, "blue");
-      Assert.assertEquals(declarations.get(1).getValue().get(1).kind, 0);
-    } catch (CssValidationException e) {
-      e.printStackTrace();
-    }
-  }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/utils/DispatchKeyUtilsTest.java b/validator/java/src/test/java/dev/amp/validator/utils/DispatchKeyUtilsTest.java
deleted file mode 100644
index b23be54a9bfdb..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/utils/DispatchKeyUtilsTest.java
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.utils;
-
-import dev.amp.validator.ValidatorProtos;
-import org.testng.Assert;
-import org.testng.TestException;
-import org.testng.annotations.Test;
-
-import static dev.amp.validator.ValidatorProtos.AttrSpec.DispatchKeyType;
-
-/**
- * Test for {@link DispatchKeyUtils}
- *
- * @author GeorgeLuo
- */
-
-public class DispatchKeyUtilsTest {
-
-  @Test
-  public void testMakeDispatchKey() {
-    Assert.assertEquals(DispatchKeyUtils.makeDispatchKey(DispatchKeyType.NAME_DISPATCH, "custom-element",
-      "amp-image-lightbox", ""), "custom-element");
-    Assert.assertEquals(DispatchKeyUtils.makeDispatchKey(DispatchKeyType.NAME_VALUE_DISPATCH, "custom-element",
-      "amp-image-lightbox", ""), "custom-element\u0000amp-image-lightbox");
-    Assert.assertEquals(DispatchKeyUtils.makeDispatchKey(DispatchKeyType.NAME_VALUE_PARENT_DISPATCH, "custom-element",
-      "amp-image-lightbox", ""), "custom-element\u0000amp-image-lightbox\u0000true");
-  }
-
-//  TODO: bazel does not like this test
-//  @Test(expectedExceptions = AssertionError.class)
-//  public void testMakeDispatchKeyNoneDispatch() {
-//    DispatchKeyUtils.makeDispatchKey(DispatchKeyType.NONE_DISPATCH, "custom-element",
-//      "amp-image-lightbox", "");
-//  }
-
-  @Test
-  public void testGetDispatchKeyForTagSpecOrNone() {
-    ValidatorProtos.AttrSpec.Builder attrSpecBuilder = ValidatorProtos.AttrSpec.newBuilder();
-    attrSpecBuilder.setDispatchKey(DispatchKeyType.NAME_DISPATCH);
-    attrSpecBuilder.setName("someAttr");
-
-    ValidatorProtos.TagSpec.Builder tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-    tagSpecBuilder.addAttrs(attrSpecBuilder.build());
-
-    Assert.assertEquals(DispatchKeyUtils.getDispatchKeyForTagSpecOrNone(tagSpecBuilder.build()), "someAttr");
-
-    attrSpecBuilder = ValidatorProtos.AttrSpec.newBuilder();
-    attrSpecBuilder.setDispatchKey(DispatchKeyType.NAME_VALUE_DISPATCH);
-    attrSpecBuilder.setName("someAttr");
-    attrSpecBuilder.addValueCasei("someValue");
-
-    tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-    tagSpecBuilder.addAttrs(attrSpecBuilder.build());
-
-    Assert.assertEquals(DispatchKeyUtils.getDispatchKeyForTagSpecOrNone(tagSpecBuilder.build()),
-      "someAttr\u0000someValue");
-
-    attrSpecBuilder = ValidatorProtos.AttrSpec.newBuilder();
-    attrSpecBuilder.setDispatchKey(DispatchKeyType.NAME_VALUE_PARENT_DISPATCH);
-    attrSpecBuilder.setName("someAttr");
-    attrSpecBuilder.addValueCasei("someValue");
-
-    tagSpecBuilder = ValidatorProtos.TagSpec.newBuilder();
-    tagSpecBuilder.addAttrs(attrSpecBuilder.build());
-    tagSpecBuilder.setMandatoryParent("mandatoryParent");
-
-    Assert.assertEquals(DispatchKeyUtils.getDispatchKeyForTagSpecOrNone(tagSpecBuilder.build()),
-      "someAttr\u0000someValue\u0000true");
-
-  }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/utils/ParseSrcSetUtilsTest.java b/validator/java/src/test/java/dev/amp/validator/utils/ParseSrcSetUtilsTest.java
deleted file mode 100644
index 58ce892fee015..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/utils/ParseSrcSetUtilsTest.java
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.utils;
-
-import org.testng.annotations.Test;
-
-/**
- * Test for {@link ParseSrcSetUtils}
- *
- * @author GeorgeLuo
- */
-
-public class ParseSrcSetUtilsTest {
-
-  @Test
-  public void testParseSrcset() {
-  }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/utils/TagSpecUtilsTest.java b/validator/java/src/test/java/dev/amp/validator/utils/TagSpecUtilsTest.java
deleted file mode 100644
index 76a71f43fb7c2..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/utils/TagSpecUtilsTest.java
+++ /dev/null
@@ -1,415 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Oath Inc..
- */
-package dev.amp.validator.utils;
-
-
-import dev.amp.validator.ValidatorProtos;
-import com.google.common.collect.ImmutableList;
-import com.google.common.collect.ImmutableMap;
-import dev.amp.validator.Context;
-import dev.amp.validator.ParsedHtmlTag;
-import dev.amp.validator.ParsedTagSpec;
-import dev.amp.validator.ParsedValidatorRules;
-import dev.amp.validator.RecordValidated;
-import dev.amp.validator.TagSpecDispatch;
-import dev.amp.validator.TagStack;
-import dev.amp.validator.ValidateTagResult;
-import dev.amp.validator.css.CssValidationException;
-import dev.amp.validator.exception.TagValidationException;
-import dev.amp.validator.exception.ValidatorException;
-import org.mockito.ArgumentCaptor;
-import org.mockito.Mockito;
-import org.testng.Assert;
-import org.testng.annotations.Test;
-import org.xml.sax.Attributes;
-import org.xml.sax.Locator;
-
-import java.io.IOException;
-import java.util.Collections;
-import java.util.List;
-
-/**
- * Tests for {@link TagSpecUtils}
- *
- * @author sphatak01
- */
-
-public class TagSpecUtilsTest {
-
-    @Test
-    public void testGetTagSpecUrl() {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder1 = ValidatorProtos.TagSpec.newBuilder().setSpecUrl("url1");
-
-
-        Assert.assertEquals(TagSpecUtils.getTagSpecUrl(tagSpecBuilder1.build()), "url1");
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder2 = ValidatorProtos.TagSpec.newBuilder()
-                .setExtensionSpec(ValidatorProtos.ExtensionSpec.newBuilder()
-                        .setName("extSpec2")
-                        .build());
-
-        Assert.assertEquals(TagSpecUtils.getTagSpecUrl(tagSpecBuilder2.build()), "https://amp.dev/documentation/components/extSpec2");
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder3 = ValidatorProtos.TagSpec.newBuilder().addRequiresExtension("ext3");
-
-        Assert.assertEquals(TagSpecUtils.getTagSpecUrl(tagSpecBuilder3.build()), "https://amp.dev/documentation/components/ext3");
-
-        Assert.assertEquals(TagSpecUtils.getTagSpecUrl(ValidatorProtos.TagSpec.getDefaultInstance()), "");
-    }
-
-    @Test
-    public void testGetTagSpecName() {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder1 = ValidatorProtos.TagSpec.newBuilder().setSpecName("spec1");
-
-        Assert.assertEquals(TagSpecUtils.getTagSpecName(tagSpecBuilder1.build()), "spec1");
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder2 = ValidatorProtos.TagSpec.newBuilder().setTagName("TAG1");
-
-        Assert.assertEquals(TagSpecUtils.getTagSpecName(tagSpecBuilder2.build()), "tag1");
-    }
-
-    @Test
-    public void testShouldRecordTagspecValidated() {
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder1 = ValidatorProtos.TagSpec.newBuilder().setMandatory(true);
-
-        Assert.assertEquals(TagSpecUtils.shouldRecordTagspecValidated(tagSpecBuilder1.build(), 2, ImmutableMap.of(2, true)),
-                RecordValidated.ALWAYS);
-
-        Assert.assertEquals(TagSpecUtils.shouldRecordTagspecValidated(tagSpecBuilder1.build(), 0, ImmutableMap.of(2, true)),
-                RecordValidated.ALWAYS);
-
-
-        Assert.assertEquals(TagSpecUtils.shouldRecordTagspecValidated(ValidatorProtos.TagSpec
-                        .getDefaultInstance(), 2, ImmutableMap.of(2, true)), RecordValidated.ALWAYS);
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder2 = ValidatorProtos.TagSpec.newBuilder().setUnique(true);
-
-        Assert.assertEquals(TagSpecUtils.shouldRecordTagspecValidated(tagSpecBuilder2.build(), 3, ImmutableMap.of(2, true)),
-                RecordValidated.IF_PASSING);
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder3 = ValidatorProtos.TagSpec.newBuilder().addRequires("req3");
-
-        Assert.assertEquals(TagSpecUtils.shouldRecordTagspecValidated(tagSpecBuilder3.build(), 3, ImmutableMap.of(2, true)),
-                RecordValidated.IF_PASSING);
-
-        final ValidatorProtos.TagSpec.Builder tagSpecBuilder4 = ValidatorProtos.TagSpec.newBuilder().setUniqueWarning(true);
-
-        Assert.assertEquals(TagSpecUtils.shouldRecordTagspecValidated(tagSpecBuilder4.build(), 3, ImmutableMap.of(2, true)),
-                RecordValidated.IF_PASSING);
-
-        Assert.assertEquals(TagSpecUtils.shouldRecordTagspecValidated(ValidatorProtos.TagSpec.getDefaultInstance(),
-                3, ImmutableMap.of(2, true)), RecordValidated.NEVER);
-    }
-
-    @Test
-    public void testValidateTag() throws TagValidationException, ValidatorException, IOException, CssValidationException {
-        final Context mockContext = Mockito.mock(Context.class);
-
-        Mockito.when(mockContext.getTypeIdentifiers()).thenReturn(Collections.emptyList());
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentTagName()).thenReturn("parent");
-
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final TagSpecDispatch mockDispatch = Mockito.mock(TagSpecDispatch.class);
-        Mockito.when(mockDispatch.allTagSpecs()).thenReturn(ImmutableList.of(0, 1, 2));
-        Mockito.when(mockDispatch.hasDispatchKeys()).thenReturn(true);
-
-        final ParsedTagSpec mockParsedTagSpec1 = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec1.getSpec()).thenReturn(ValidatorProtos.TagSpec.getDefaultInstance());
-        Mockito.when(mockParsedTagSpec1.isUsedForTypeIdentifiers(Mockito.anyListOf(String.class))).thenReturn(true);
-        Mockito.when(mockRules.getByTagSpecId(0)).thenReturn(mockParsedTagSpec1);
-        Mockito.when(mockRules.getByTagSpecId(2)).thenReturn(mockParsedTagSpec1);
-
-        final ParsedTagSpec mockParsedTagSpec2 = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec2.isUsedForTypeIdentifiers(Mockito.anyListOf(String.class))).thenReturn(false);
-        Mockito.when(mockParsedTagSpec2.getSpec()).thenReturn(ValidatorProtos.TagSpec.getDefaultInstance());
-        Mockito.when(mockRules.getByTagSpecId(1)).thenReturn(mockParsedTagSpec2);
-
-        Mockito.when(mockRules.dispatchForTagName(Mockito.anyString())).thenReturn(mockDispatch);
-
-        Mockito.when(mockRules.betterValidationResultThan(Mockito.any(ValidatorProtos.ValidationResult.Builder.class),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class))).thenReturn(true);
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final ParsedHtmlTag encounteredTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(encounteredTag.upperName()).thenReturn("HTML");
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(2);
-        Mockito.when(mockAttrs.getLocalName(0)).thenReturn("attr0");
-        Mockito.when(mockAttrs.getValue(0)).thenReturn("val0");
-        Mockito.when(mockAttrs.getLocalName(1)).thenReturn("attr1");
-        Mockito.when(mockAttrs.getValue(1)).thenReturn("val0");
-
-        Mockito.when(encounteredTag.attrs()).thenReturn(mockAttrs);
-
-        Mockito.when(mockDispatch.matchingDispatchKey("attr1", "val0", "parent"))
-            .thenReturn(ImmutableList.of(0, 1));
-
-
-        final ParsedTagSpec bestMatchReferencePoint = Mockito.mock(ParsedTagSpec.class);
-
-        final ValidateTagResult res = TagSpecUtils.validateTag(mockContext, encounteredTag, bestMatchReferencePoint);
-        Assert.assertEquals(res.getValidationResult().getStatus(), ValidatorProtos.ValidationResult.Status.PASS);
-        Assert.assertEquals(res.getValidationResult().getErrorsCount(), 0);
-    }
-
-    @Test
-    public void testValidateTagDisallowedTag() throws TagValidationException, ValidatorException, IOException, CssValidationException {
-        final Context mockContext = Mockito.mock(Context.class);
-
-        Mockito.when(mockContext.getTypeIdentifiers()).thenReturn(Collections.emptyList());
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentTagName()).thenReturn("parent");
-
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ParsedHtmlTag encounteredTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(encounteredTag.upperName()).thenReturn("FONT");
-        Mockito.when(encounteredTag.lowerName()).thenReturn("font");
-
-        final ParsedTagSpec bestMatchReferencePoint = Mockito.mock(ParsedTagSpec.class);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final ValidateTagResult res = TagSpecUtils.validateTag(mockContext, encounteredTag, bestMatchReferencePoint);
-
-        Mockito.verify(mockContext, Mockito.times(1)).addError(errorCodeCapture.capture(),
-                Mockito.any(Locator.class),
-                listCaptor.capture(),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.DISALLOWED_TAG);
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 1);
-        Assert.assertEquals(params.get(0), "font");
-
-        Assert.assertEquals(res.getValidationResult().getStatus(), ValidatorProtos.ValidationResult.Status.UNKNOWN);
-    }
-
-    @Test
-    public void testValidateTagDisallowedScriptTag() throws TagValidationException, ValidatorException, IOException, CssValidationException {
-        final Context mockContext = Mockito.mock(Context.class);
-
-        Mockito.when(mockContext.getTypeIdentifiers()).thenReturn(Collections.emptyList());
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentTagName()).thenReturn("parent");
-
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final TagSpecDispatch mockDispatch = Mockito.mock(TagSpecDispatch.class);
-        Mockito.when(mockDispatch.allTagSpecs()).thenReturn(Collections.emptyList());
-        Mockito.when(mockDispatch.hasDispatchKeys()).thenReturn(true);
-
-        final ParsedTagSpec mockParsedTagSpec1 = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec1.getSpec()).thenReturn(ValidatorProtos.TagSpec.getDefaultInstance());
-        Mockito.when(mockParsedTagSpec1.isUsedForTypeIdentifiers(Mockito.anyListOf(String.class))).thenReturn(false);
-        Mockito.when(mockRules.getByTagSpecId(0)).thenReturn(mockParsedTagSpec1);
-        Mockito.when(mockRules.getByTagSpecId(2)).thenReturn(mockParsedTagSpec1);
-
-        final ParsedTagSpec mockParsedTagSpec2 = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec2.isUsedForTypeIdentifiers(Mockito.anyListOf(String.class))).thenReturn(false);
-        Mockito.when(mockParsedTagSpec2.getSpec()).thenReturn(ValidatorProtos.TagSpec.getDefaultInstance());
-        Mockito.when(mockRules.getByTagSpecId(1)).thenReturn(mockParsedTagSpec2);
-
-        Mockito.when(mockRules.dispatchForTagName(Mockito.anyString())).thenReturn(mockDispatch);
-
-        Mockito.when(mockRules.betterValidationResultThan(Mockito.any(ValidatorProtos.ValidationResult.Builder.class),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class))).thenReturn(true);
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final ParsedHtmlTag encounteredTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(encounteredTag.upperName()).thenReturn("SCRIPT");
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(2);
-        Mockito.when(mockAttrs.getLocalName(0)).thenReturn("attr0");
-        Mockito.when(mockAttrs.getValue(0)).thenReturn("val0");
-        Mockito.when(mockAttrs.getLocalName(1)).thenReturn("attr1");
-        Mockito.when(mockAttrs.getValue(1)).thenReturn("val0");
-
-        Mockito.when(encounteredTag.attrs()).thenReturn(mockAttrs);
-
-        Mockito.when(mockDispatch.matchingDispatchKey("attr1", "val0", "parent"))
-                .thenReturn(ImmutableList.of(0, 1));
-
-
-        final ParsedTagSpec bestMatchReferencePoint = Mockito.mock(ParsedTagSpec.class);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final ValidateTagResult res = TagSpecUtils.validateTag(mockContext, encounteredTag, bestMatchReferencePoint);
-
-        Mockito.verify(mockContext, Mockito.times(1)).addError(errorCodeCapture.capture(),
-                Mockito.any(Locator.class),
-                listCaptor.capture(),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.DISALLOWED_SCRIPT_TAG);
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 0);
-
-        Assert.assertEquals(res.getValidationResult().getStatus(), ValidatorProtos.ValidationResult.Status.UNKNOWN);
-        Assert.assertEquals(res.getValidationResult().getErrorsCount(), 0);
-    }
-
-    @Test
-    public void testValidateTagGeneralDisallowedTag() throws TagValidationException, ValidatorException, IOException, CssValidationException {
-        final Context mockContext = Mockito.mock(Context.class);
-
-        Mockito.when(mockContext.getTypeIdentifiers()).thenReturn(Collections.emptyList());
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentTagName()).thenReturn("parent");
-
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final TagSpecDispatch mockDispatch = Mockito.mock(TagSpecDispatch.class);
-        Mockito.when(mockDispatch.allTagSpecs()).thenReturn(Collections.emptyList());
-        Mockito.when(mockDispatch.hasDispatchKeys()).thenReturn(true);
-
-        final ParsedTagSpec mockParsedTagSpec1 = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec1.getSpec()).thenReturn(ValidatorProtos.TagSpec.getDefaultInstance());
-        Mockito.when(mockParsedTagSpec1.isUsedForTypeIdentifiers(Mockito.anyListOf(String.class))).thenReturn(false);
-        Mockito.when(mockRules.getByTagSpecId(0)).thenReturn(mockParsedTagSpec1);
-        Mockito.when(mockRules.getByTagSpecId(2)).thenReturn(mockParsedTagSpec1);
-
-        final ParsedTagSpec mockParsedTagSpec2 = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec2.isUsedForTypeIdentifiers(Mockito.anyListOf(String.class))).thenReturn(false);
-        Mockito.when(mockParsedTagSpec2.getSpec()).thenReturn(ValidatorProtos.TagSpec.getDefaultInstance());
-        Mockito.when(mockRules.getByTagSpecId(1)).thenReturn(mockParsedTagSpec2);
-
-        Mockito.when(mockRules.dispatchForTagName(Mockito.anyString())).thenReturn(mockDispatch);
-
-        Mockito.when(mockRules.betterValidationResultThan(Mockito.any(ValidatorProtos.ValidationResult.Builder.class),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class))).thenReturn(true);
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final ParsedHtmlTag encounteredTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(encounteredTag.upperName()).thenReturn("HTML");
-        Mockito.when(encounteredTag.lowerName()).thenReturn("html");
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(2);
-        Mockito.when(mockAttrs.getLocalName(0)).thenReturn("attr0");
-        Mockito.when(mockAttrs.getValue(0)).thenReturn("val0");
-        Mockito.when(mockAttrs.getLocalName(1)).thenReturn("attr1");
-        Mockito.when(mockAttrs.getValue(1)).thenReturn("val0");
-
-        Mockito.when(encounteredTag.attrs()).thenReturn(mockAttrs);
-
-        Mockito.when(mockDispatch.matchingDispatchKey("attr1", "val0", "parent"))
-                .thenReturn(ImmutableList.of(0, 1));
-
-
-        final ParsedTagSpec bestMatchReferencePoint = Mockito.mock(ParsedTagSpec.class);
-
-        ArgumentCaptor<List> listCaptor = ArgumentCaptor.forClass(List.class);
-        ArgumentCaptor<ValidatorProtos.ValidationError.Code> errorCodeCapture = ArgumentCaptor.forClass(ValidatorProtos.ValidationError.Code.class);
-
-        final ValidateTagResult res = TagSpecUtils.validateTag(mockContext, encounteredTag, bestMatchReferencePoint);
-
-        Mockito.verify(mockContext, Mockito.times(1)).addError(errorCodeCapture.capture(),
-                Mockito.any(Locator.class),
-                listCaptor.capture(),
-                Mockito.anyString(),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class));
-
-        Assert.assertEquals(errorCodeCapture.getValue(), ValidatorProtos.ValidationError.Code.GENERAL_DISALLOWED_TAG);
-        final List<String> params = listCaptor.getValue();
-        Assert.assertEquals(params.size(), 1);
-        Assert.assertEquals(params.get(0), "html");
-
-        Assert.assertEquals(res.getValidationResult().getStatus(), ValidatorProtos.ValidationResult.Status.UNKNOWN);
-        Assert.assertEquals(res.getValidationResult().getErrorsCount(), 0);
-    }
-
-    @Test
-    public void testValidateTagBestAttempt() throws TagValidationException, ValidatorException, IOException, CssValidationException {
-        final Context mockContext = Mockito.mock(Context.class);
-
-        Mockito.when(mockContext.getTypeIdentifiers()).thenReturn(Collections.emptyList());
-
-        final TagStack mockTagStack = Mockito.mock(TagStack.class);
-        Mockito.when(mockTagStack.parentTagName()).thenReturn("parent");
-
-        Mockito.when(mockContext.getTagStack()).thenReturn(mockTagStack);
-
-        final ParsedValidatorRules mockRules = Mockito.mock(ParsedValidatorRules.class);
-        final TagSpecDispatch mockDispatch = Mockito.mock(TagSpecDispatch.class);
-        Mockito.when(mockDispatch.allTagSpecs()).thenReturn(ImmutableList.of(0, 1, 2));
-        Mockito.when(mockDispatch.hasDispatchKeys()).thenReturn(false);
-
-        final ParsedTagSpec mockParsedTagSpec1 = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec1.getSpec()).thenReturn(ValidatorProtos.TagSpec.getDefaultInstance());
-        Mockito.when(mockParsedTagSpec1.isUsedForTypeIdentifiers(Mockito.anyListOf(String.class))).thenReturn(true);
-        Mockito.when(mockRules.getByTagSpecId(0)).thenReturn(mockParsedTagSpec1);
-        Mockito.when(mockRules.getByTagSpecId(2)).thenReturn(mockParsedTagSpec1);
-
-        final ParsedTagSpec mockParsedTagSpec2 = Mockito.mock(ParsedTagSpec.class);
-        Mockito.when(mockParsedTagSpec2.isUsedForTypeIdentifiers(Mockito.anyListOf(String.class))).thenReturn(true);
-        Mockito.when(mockParsedTagSpec2.getSpec()).thenReturn(ValidatorProtos.TagSpec.getDefaultInstance());
-        Mockito.when(mockRules.getByTagSpecId(1)).thenReturn(mockParsedTagSpec2);
-
-        Mockito.when(mockRules.dispatchForTagName(Mockito.anyString())).thenReturn(mockDispatch);
-
-        Mockito.when(mockRules.betterValidationResultThan(Mockito.any(ValidatorProtos.ValidationResult.Builder.class),
-                Mockito.any(ValidatorProtos.ValidationResult.Builder.class))).thenReturn(true);
-        Mockito.when(mockContext.getRules()).thenReturn(mockRules);
-
-        final ParsedHtmlTag encounteredTag = Mockito.mock(ParsedHtmlTag.class);
-        Mockito.when(encounteredTag.upperName()).thenReturn("HTML");
-        Mockito.when(encounteredTag.lowerName()).thenReturn("html");
-
-        final Attributes mockAttrs = Mockito.mock(Attributes.class);
-        Mockito.when(mockAttrs.getLength()).thenReturn(2);
-        Mockito.when(mockAttrs.getLocalName(0)).thenReturn("attr0");
-        Mockito.when(mockAttrs.getValue(0)).thenReturn("val0");
-        Mockito.when(mockAttrs.getLocalName(1)).thenReturn("attr1");
-        Mockito.when(mockAttrs.getValue(1)).thenReturn("val0");
-
-        Mockito.when(encounteredTag.attrs()).thenReturn(mockAttrs);
-
-        Mockito.when(mockDispatch.matchingDispatchKey("attr1", "val0", "parent"))
-                .thenReturn(ImmutableList.of(0, 1));
-
-        final ParsedTagSpec bestMatchReferencePoint = Mockito.mock(ParsedTagSpec.class);
-
-        final ValidateTagResult res = TagSpecUtils.validateTag(mockContext, encounteredTag, bestMatchReferencePoint);
-
-        Assert.assertEquals(res.getValidationResult().getStatus(), ValidatorProtos.ValidationResult.Status.PASS);
-        Assert.assertEquals(res.getValidationResult().getErrorsCount(), 0);
-    }
-}
diff --git a/validator/java/src/test/java/dev/amp/validator/utils/UrlUtilsTest.java b/validator/java/src/test/java/dev/amp/validator/utils/UrlUtilsTest.java
deleted file mode 100644
index b21b0f6a329e7..0000000000000
--- a/validator/java/src/test/java/dev/amp/validator/utils/UrlUtilsTest.java
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- *
- * ====================================================================
- * 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.
- *  ====================================================================
- */
-
-/*
- * Changes to the original project are Copyright 2019, Verizon Media Inc..
- */
-
-package dev.amp.validator.utils;
-
-import org.testng.Assert;
-import org.testng.annotations.Test;
-
-/**
- * Test for {@link UrlUtils}
- *
- * @author GeorgeLuo
- */
-
-public class UrlUtilsTest {
-
-  @Test
-  public void testIsDataUrl() {
-    Assert.assertTrue(UrlUtils.isDataUrl("data://somedata.com"));
-    Assert.assertFalse(UrlUtils.isDataUrl("https://somenotdata.com"));
-    Assert.assertFalse(UrlUtils.isDataUrl("www.somenotdata.com"));
-  }
-}
diff --git a/validator/java/src/test/resources/test-cases/attributes/testAttrDisallowedByImpliedLayout.html b/validator/java/src/test/resources/test-cases/attributes/testAttrDisallowedByImpliedLayout.html
deleted file mode 100644
index 64b55e82b9aea..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testAttrDisallowedByImpliedLayout.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-     ATTR_DISALLOWED_BY_IMPLIED_LAYOUT
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<amp-img
-        src="https://ampimgs.com/img/amp.jpg"
-        width="auto"
-        height="610"
-        heights="610"
-        alt="an image"
-></amp-img>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/attributes/testAttrDisallowedBySpecifiedLayout.html b/validator/java/src/test/resources/test-cases/attributes/testAttrDisallowedBySpecifiedLayout.html
deleted file mode 100644
index 385c8063cd4f3..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testAttrDisallowedBySpecifiedLayout.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-     ATTR_DISALLOWED_BY_SPECIFIED_LAYOUT
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<amp-img
-        src="https://ampimgs.com/img/amp.jpg"
-        width="200"
-        height="610"
-        heights="610"
-        layout="FIXED"
-        alt="an image"
-></amp-img>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/attributes/testAttrMissingRequiredExtension.html b/validator/java/src/test/resources/test-cases/attributes/testAttrMissingRequiredExtension.html
deleted file mode 100644
index f6f181f172709..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testAttrMissingRequiredExtension.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
-     ATTR_MISSING_REQUIRED_EXTENSION
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <style amp-custom>
-        amp-ig {
-        }
-    </style>
-</head>
-<body>
-<textarea rows="4" cols="50" autoexpand>
-</textarea>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/attributes/testAttrRequiredButMissing.html b/validator/java/src/test/resources/test-cases/attributes/testAttrRequiredButMissing.html
deleted file mode 100644
index a70c2b1aef163..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testAttrRequiredButMissing.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
-     ATTR_REQUIRED_BUT_MISSING
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<h1>Welcome to the mobile web</h1>
-<ul>
-    <li> Nav item 1</li>
-    <li on="tap:sidebar1.close" role=button> Close</li>
-</ul>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/attributes/testAttrValueRequiredByLayout.html b/validator/java/src/test/resources/test-cases/attributes/testAttrValueRequiredByLayout.html
deleted file mode 100644
index 476cbc03cda98..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testAttrValueRequiredByLayout.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-     ATTR_VALUE_REQUIRED_BY_LAYOUT
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<amp-img
-        src="https://ampimgs.com/img/amp.jpg"
-        width="1080"
-        height="610"
-        layout="fixed-height"
-        alt="an image"
-></amp-img>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/attributes/testDisallowedAttr.html b/validator/java/src/test/resources/test-cases/attributes/testDisallowedAttr.html
deleted file mode 100644
index 50a073fc551b0..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testDisallowedAttr.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--
-     DISALLOWED_ATTR
-     INVALID_ATTR_VALUE
--->
-<!doctype html>
-<html amp4ads>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
diff --git a/validator/java/src/test/resources/test-cases/attributes/testDisallowedPropertyInAttrValue.html b/validator/java/src/test/resources/test-cases/attributes/testDisallowedPropertyInAttrValue.html
deleted file mode 100644
index 535ce28ff7b10..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testDisallowedPropertyInAttrValue.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!--
-  DISALLOWED_PROPERTY_IN_ATTR_VALUE
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-<h1 style="notvalid:blue;text-align:center;">This is a heading</h1>
-<p style="color:red;">This is a paragraph.</p>
-
-Test body.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/attributes/testDisallowedRelativeUrl.html b/validator/java/src/test/resources/test-cases/attributes/testDisallowedRelativeUrl.html
deleted file mode 100644
index 0e8e6100e2479..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testDisallowedRelativeUrl.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!--
-     DISALLOWED_RELATIVE_URL
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-
-</head>
-<body>
-<a href="rel/ative/url">Visit our HTML tutorial</a>
-Hello, AMP4EMAIL world.
-</body>
-</html>
diff --git a/validator/java/src/test/resources/test-cases/attributes/testDuplicateAttribute.html b/validator/java/src/test/resources/test-cases/attributes/testDuplicateAttribute.html
deleted file mode 100644
index bbcea5c74b3fb..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testDuplicateAttribute.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!--
-     DUPLICATE_ATTRIBUTE
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8" charset="utf-7">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <style amp-custom>
-        amp-ig {
-        }
-    </style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/attributes/testDuplicateDimension.html b/validator/java/src/test/resources/test-cases/attributes/testDuplicateDimension.html
deleted file mode 100644
index 3b2946e93e0ab..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testDuplicateDimension.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-     DUPLICATE_DIMENSION
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<amp-img src="https://images.com/img/amp.jpg"
-         width="1080"
-         height="610"
-         height="500"
-         layout="responsive"
-         alt="an image"></amp-img>
-Hello, AMP4EMAIL world.
-</body>
-</html>
diff --git a/validator/java/src/test/resources/test-cases/attributes/testImpliedLayoutInvalid.html b/validator/java/src/test/resources/test-cases/attributes/testImpliedLayoutInvalid.html
deleted file mode 100644
index f07a4f21f040d..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testImpliedLayoutInvalid.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!--
-     IMPLIED_LAYOUT_INVALID
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-<!--    <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>-->
-    <script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<!--<AMP-ANIM-->
-<!--        src="https://ampimgs.com/img/amp.jpg"-->
-<!--        width="1080"-->
-<!--        height="610"-->
-<!--        alt="an image"-->
-<!--&gt;</AMP-ANIM>-->
-<amp-timeago
-        width: 80%;
-        height: 80%;></amp-timeago>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/attributes/testInconsistentUnitsForWidthAndHeight.html b/validator/java/src/test/resources/test-cases/attributes/testInconsistentUnitsForWidthAndHeight.html
deleted file mode 100644
index 8089e42b70097..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testInconsistentUnitsForWidthAndHeight.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-     INCONSISTENT_UNITS_FOR_WIDTH_AND_HEIGHT
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<amp-img
-        src="https://ampimgs.com/img/amp.jpg"
-        width="200px"
-        height="610vw"
-        layout="responsive"
-        alt="an image"
-></amp-img>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/attributes/testInvalidAttrValue.html b/validator/java/src/test/resources/test-cases/attributes/testInvalidAttrValue.html
deleted file mode 100644
index 818cacc4ce8a8..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testInvalidAttrValue.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
-     INVALID_ATTR_VALUE
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <style amp-custom>
-        amp-ig {
-        }
-    </style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/attributes/testInvalidUrlProtocol.html b/validator/java/src/test/resources/test-cases/attributes/testInvalidUrlProtocol.html
deleted file mode 100644
index d96c3e9586403..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testInvalidUrlProtocol.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!--
-     INVALID_URL_PROTOCOL
--->
-<!doctype html>
-<html amp4email>
-
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-
-</head>
-<body>
-<a href="ftp://telat.com">Visit our HTML tutorial</a>
-Hello, AMP4EMAIL world.
-</body>
-</html>
diff --git a/validator/java/src/test/resources/test-cases/attributes/testMandatoryAttrMissing.html b/validator/java/src/test/resources/test-cases/attributes/testMandatoryAttrMissing.html
deleted file mode 100644
index 7a62163b8047f..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testMandatoryAttrMissing.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--
-     MANDATORY_ATTR_MISSING
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <style>
-    </style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/attributes/testMissingLayoutAttributes.html b/validator/java/src/test/resources/test-cases/attributes/testMissingLayoutAttributes.html
deleted file mode 100644
index 7c54c8613134f..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testMissingLayoutAttributes.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--
-     MISSING_LAYOUT_ATTRIBUTES
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<amp-img src="https://images.com/img/amp.jpg"></amp-img>
-Hello, AMP4EMAIL world.
-</body>
-</html>
diff --git a/validator/java/src/test/resources/test-cases/attributes/testMissingUrl.html b/validator/java/src/test/resources/test-cases/attributes/testMissingUrl.html
deleted file mode 100644
index c2a5eb3f8916d..0000000000000
--- a/validator/java/src/test/resources/test-cases/attributes/testMissingUrl.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!--
-     MISSING_URL
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-
-</head>
-<body>
-<a href="">Visit our HTML tutorial</a>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSDisallowedRelativeURL.html b/validator/java/src/test/resources/test-cases/css/testCSSDisallowedRelativeURL.html
deleted file mode 100644
index 57193d87cc17d..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSDisallowedRelativeURL.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-     CSS_SYNTAX_DISALLOWED_RELATIVE_URL
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        ul {
-            background-image: url('images/header-background.jpg');
-        }
-    </style>
-    <meta charset="utf-8">
-    <meta name="viewport1">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSExcessivelyNested.html b/validator/java/src/test/resources/test-cases/css/testCSSExcessivelyNested.html
deleted file mode 100644
index f6890f1de0da0..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSExcessivelyNested.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!--
-     CSS_EXCESSIVELY_NESTED
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        i{width:
-          {width:
-           {width:
-            {width:
-             {width:
-              {width:
-               {width:
-                {width:
-                 {width:
-                  {width:
-                   {width:
-                    {width:
-                     {width:
-                      {width:
-                       {width:
-                        {width:
-                         {width:
-                          {width:
-                           {width:
-                            {width:
-                             {width:
-                              {width:
-                               {width:
-                                {width:
-                                 {width:
-                                  {width:
-                                   {width:
-                                    {width:
-                                     {width:
-                                      {width:
-                                       {width:
-                                        {width:
-                                         {width:
-                                          {width:
-                                           {width:
-                                            {width:
-                                             {width:
-                                              {width:
-                                               {width:
-                                                {width:
-                                                 {width:
-                                                  {width:
-                                                   {width:
-                                                    {width:
-                                                     {width:
-                                                      {width:
-                                                       {width:
-                                                        {width:
-                                                         {width:
-                                                          {width:
-                                                           {width: {}</style>
-    <meta charset="utf-8">
-    <meta name="viewport1">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxBadUrl.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxBadUrl.html
deleted file mode 100644
index 77eabf0deb5a0..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxBadUrl.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-     CSS_SYNTAX_BAD_URL
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        ul {
-            list-style: square url(());
-        }
-    </style>
-    <meta charset="utf-8">
-    <meta name="viewport1">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxDisallowedMediaFeature.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxDisallowedMediaFeature.html
deleted file mode 100644
index 9de25582df717..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxDisallowedMediaFeature.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-  CSS_SYNTAX_DISALLOWED_MEDIA_FEATURE
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp-custom>
-        /* media queries are allowed */
-        @media only screen
-        and (min: 320px) {
-            body { font-size: 13px; }
-        }  </style>
-</head>
-<body>
-Test body.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxDisallowedMediaType.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxDisallowedMediaType.html
deleted file mode 100644
index 4c700285abfe6..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxDisallowedMediaType.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
-  CSS_SYNTAX_DISALLOWED_MEDIA_TYPE
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp-custom>
-        /* media queries are allowed */
-        @media ad {}
-    </style>
-</head>
-<body>
-Test body.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxDisallowedPropertyValue.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxDisallowedPropertyValue.html
deleted file mode 100644
index fc893b856979c..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxDisallowedPropertyValue.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!--
-  CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-<h1 style="position:blue;text-align:center;">This is a heading</h1>
-<p style="color:red;">This is a paragraph.</p>
-
-Test body.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxIncompleteDeclaration.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxIncompleteDeclaration.html
deleted file mode 100644
index 627d51cce7c23..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxIncompleteDeclaration.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-     CSS_SYNTAX_INVALID_DECLARATION
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        ul {
-        }
-        ul {d
-        }
-    </style>
-    <meta charset="utf-8">
-    <meta name="viewport1">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxInvalidAtRule.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxInvalidAtRule.html
deleted file mode 100644
index 3cc8d418a4cd9..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxInvalidAtRule.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!--
-  CSS_SYNTAX_INVALID_AT_RULE
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp-custom>
-        /* media queries are allowed */
-        @media screen {}
-
-        /* all other @ rules are banned */
-        @supports (display: flex) {}
-        @font-face {}
-        @keyframes slidein {}
-        @invalid {}
-    </style>
-</head>
-<body>
-Test body.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxInvalidDeclaration.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxInvalidDeclaration.html
deleted file mode 100644
index ca9ca2266440b..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxInvalidDeclaration.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-     CSS_SYNTAX_INVALID_DECLARATION
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        ul {
-        }
-        ul {%
-        }
-    </style>
-    <meta charset="utf-8">
-    <meta name="viewport1">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxInvalidURL.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxInvalidURL.html
deleted file mode 100644
index 90ed03d811379..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxInvalidURL.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-     CSS_SYNTAX_INVALID_URL
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        ul {
-            list-style: square url(https://www.e$edball.png);
-        }
-    </style>
-    <meta charset="utf-8">
-    <meta name="viewport1">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxInvalidUrlProtocol.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxInvalidUrlProtocol.html
deleted file mode 100644
index 3598235ea0b89..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxInvalidUrlProtocol.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-     CSS_SYNTAX_INVALID_URL_PROTOCOL
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        ul {
-            background-image: url('http://İnançEsasları.com/header-background.jpg');
-        }
-    </style>
-    <meta charset="utf-8">
-    <meta name="viewport1">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxMalformedMediaQuery.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxMalformedMediaQuery.html
deleted file mode 100644
index 5d9432e9a43bb..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxMalformedMediaQuery.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
-  CSS_SYNTAX_MALFORMED_MEDIA_QUERY
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp-custom>
-        /* media queries are allowed */
-        @media screen ((min-width:500px))
-    </style>
-</head>
-<body>
-Test body.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxMissingURL.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxMissingURL.html
deleted file mode 100644
index c5ca179e4627d..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxMissingURL.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-     CSS_SYNTAX_MISSING_URL
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        ul {
-            list-style: square url();
-        }
-    </style>
-    <meta charset="utf-8">
-    <meta name="viewport1">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxStrayTrailingBackslash.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxStrayTrailingBackslash.html
deleted file mode 100644
index 4cf562fe9cc1e..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxStrayTrailingBackslash.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-     CSS_SYNTAX_STRAY_TRAILING_BACKSLASH
-     "CSS syntax error in tag '...' - stray trailing backslash."
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        /* any custom styles go here. */
-        body {
-            background-color: white;
-            color: beige;\
-        }
-    </style>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxUnterminatedComment.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxUnterminatedComment.html
deleted file mode 100644
index 043e06c7dab15..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxUnterminatedComment.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-     CSS_SYNTAX_UNTERMINATED_COMMENT
-     "CSS syntax error in tag '...' - unterminated comment."
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        h1 { color: red; }
-        @page :first {
-            margin: 1in;
-        }/*uhbuhbuyb
-    </style>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxUnterminatedString.html b/validator/java/src/test/resources/test-cases/css/testCSSSyntaxUnterminatedString.html
deleted file mode 100644
index cefacfa9c8092..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCSSSyntaxUnterminatedString.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-     CSS_SYNTAX_UNTERMINATED_STRING
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        ul {"
-        }
-        ul {'
-        }
-    </style>
-    <meta charset="utf-8">
-    <meta name="viewport1">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testCdataViolatesBlacklist.html b/validator/java/src/test/resources/test-cases/css/testCdataViolatesBlacklist.html
deleted file mode 100644
index 30e9538e97b44..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testCdataViolatesBlacklist.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
-     CDATA_VIOLATES_BLACKLIST
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        /* any custom styles go here. */
-        body {
-            background-color: white;
-            color: beige !important;
-        }
-        amp-img {
-            border: 5px solid black;
-        }
-        amp-img.grey-placeholder {
-            background-color: grey;
-        }
-        @page :first {
-            margin: 1in;
-        }
-    </style>
-    <meta charset="utf-8">
-    <meta name="viewport1">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testInlineStyleTooLong.html b/validator/java/src/test/resources/test-cases/css/testInlineStyleTooLong.html
deleted file mode 100644
index 551c1ab7e4711..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testInlineStyleTooLong.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!--
-  INLINE_STYLE_TOO_LONG
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-<h1 style="color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;color:blue;text-align:center;">This is a heading</h1>
-<p style="color:red;">This is a paragraph.</p>
-
-Test body.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/css/testStylesheetTooLong.html b/validator/java/src/test/resources/test-cases/css/testStylesheetTooLong.html
deleted file mode 100644
index 283ba806e69df..0000000000000
--- a/validator/java/src/test/resources/test-cases/css/testStylesheetTooLong.html
+++ /dev/null
@@ -1,8667 +0,0 @@
-<!--
-  Copyright 2015 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.
--->
-<!--
-  Test Description:
-  Tests the CSS restrictions that exist for AMP4Email.
-  CSS_SYNTAX_INVALID_AT_RULE should be returned
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp-custom>
-        /* media queries are allowed */
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-        @media screen {}
-    </style>
-</head>
-<body>
-Test body.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/misc/testCSSFail.html b/validator/java/src/test/resources/test-cases/misc/testCSSFail.html
deleted file mode 100644
index f6a34c926e597..0000000000000
--- a/validator/java/src/test/resources/test-cases/misc/testCSSFail.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
-     testing blacklisted regex
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        /* any custom styles go here. */
-        body {
-            background-color: white;
-            color: beige;\
-        }
-        amp-img {
-            border: 5px solid black;
-        }
-        amp-img.grey-placeholder {
-            background-color: grey;
-        }
-        @page :first {
-            margin: 1in;zz
-        }
-    </style>
-    <meta charset="utf-8">
-    <meta name="viewport1">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/misc/testCSSFail2.html b/validator/java/src/test/resources/test-cases/misc/testCSSFail2.html
deleted file mode 100644
index 3cc8d418a4cd9..0000000000000
--- a/validator/java/src/test/resources/test-cases/misc/testCSSFail2.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!--
-  CSS_SYNTAX_INVALID_AT_RULE
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp-custom>
-        /* media queries are allowed */
-        @media screen {}
-
-        /* all other @ rules are banned */
-        @supports (display: flex) {}
-        @font-face {}
-        @keyframes slidein {}
-        @invalid {}
-    </style>
-</head>
-<body>
-Test body.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/misc/testCSSInlineFail.html b/validator/java/src/test/resources/test-cases/misc/testCSSInlineFail.html
deleted file mode 100644
index a4b484d6abd5c..0000000000000
--- a/validator/java/src/test/resources/test-cases/misc/testCSSInlineFail.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
-  Copyright 2015 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.
--->
-<!--
-  Test Description:
-  Tests the CSS restrictions that exist for AMP4Email.
-   should be returned
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-<p style=not_valid>This is a paragraph.</p>
-
-Test body.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/misc/testCSSInlinePass.html b/validator/java/src/test/resources/test-cases/misc/testCSSInlinePass.html
deleted file mode 100644
index 56cc57345cd6e..0000000000000
--- a/validator/java/src/test/resources/test-cases/misc/testCSSInlinePass.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!--
-  Copyright 2015 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.
--->
-<!--
-  Test Description:
-  Tests the CSS restrictions that exist for AMP4Email.
-  CSS_SYNTAX_INVALID_AT_RULE should be returned
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-<h1 style="color:blue;text-align:center;">This is a heading</h1>
-<p style="color:red;">This is a paragraph.</p>
-
-Test body.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/misc/testCSSPass.html b/validator/java/src/test/resources/test-cases/misc/testCSSPass.html
deleted file mode 100644
index 23481a6bba304..0000000000000
--- a/validator/java/src/test/resources/test-cases/misc/testCSSPass.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
-     testing blacklisted regex
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <style amp-custom>
-        /* any custom styles go here. */
-        body {
-            background-color: white;
-            color: beige;
-        }
-        amp-img {
-            border: 5px solid black;
-        }
-        amp-img.grey-placeholder {
-            background-color: grey;
-        }
-        @page :first {
-            margin: 1in;
-        }
-    </style>
-    <meta charset="utf-8">
-    <meta name="viewport1">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/misc/testWarningExtensionDeprecatedVersion.html b/validator/java/src/test/resources/test-cases/misc/testWarningExtensionDeprecatedVersion.html
deleted file mode 100644
index b727d6ef3b02e..0000000000000
--- a/validator/java/src/test/resources/test-cases/misc/testWarningExtensionDeprecatedVersion.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-     WARNING_EXTENSION_DEPRECATED_VERSION
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
-    <style amp-custom>
-        amp-ig {
-        }
-    </style>
-</head>
-<body>
-<template type="amp-mustache">
-</template>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/tags/testDeprecatedTag.html b/validator/java/src/test/resources/test-cases/tags/testDeprecatedTag.html
deleted file mode 100644
index c359bac0a36b4..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testDeprecatedTag.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!--
-     DEPRECATED_TAG
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <title>Hello, AMPs</title>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
diff --git a/validator/java/src/test/resources/test-cases/tags/testDisallowedChildTagName.html b/validator/java/src/test/resources/test-cases/tags/testDisallowedChildTagName.html
deleted file mode 100644
index 4a8f765cfcd28..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testDisallowedChildTagName.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-     DISALLOWED_CHILD_TAG_NAME
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
-    <nav id="document-navigation"
-         toolbar="(max-width: 641px)"
-         toolbar-target="nav-target">
-        <li>
-        </li>
-    </nav>
-</amp-sidebar></body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/tags/testDisallowedFirstChildTagName.html b/validator/java/src/test/resources/test-cases/tags/testDisallowedFirstChildTagName.html
deleted file mode 100644
index 99d6e269da5f4..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testDisallowedFirstChildTagName.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
-     DISALLOWED_FIRST_CHILD_TAG_NAME
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <script custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js" async></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<amp-accordion>
-    <section>
-        <h2>Section 1</h2>
-        <p>Content in section 1.</p>
-    </section>
-    <section>
-        <h2>Section 2</h2>
-        <div>Content in section 2.</div>
-    </section>
-    <section expanded>
-        <div>Section 1</div>
-        <h1>Section 2</h1>
-    </section>
-</amp-accordion>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/tags/testDisallowedScriptTag.html b/validator/java/src/test/resources/test-cases/tags/testDisallowedScriptTag.html
deleted file mode 100644
index bea424f5ac6e9..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testDisallowedScriptTag.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--
-     DISALLOWED_SCRIPT_TAG
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport1">
-    <script async src="https://my.js.com/script.js"></script>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/tags/testDisallowedTag.html b/validator/java/src/test/resources/test-cases/tags/testDisallowedTag.html
deleted file mode 100644
index d8e495b065098..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testDisallowedTag.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--
-     DISALLOWED_TAG
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-<not_a_tag></not_a_tag>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/tags/testDisallowedTagAncestor.html b/validator/java/src/test/resources/test-cases/tags/testDisallowedTagAncestor.html
deleted file mode 100644
index bbf63a01ba50f..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testDisallowedTagAncestor.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
-     DISALLOWED_TAG_ANCESTOR
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<template type="amp-mustache">
-    <template type="amp-mustache">
-    </template>
-</template>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/tags/testDuplicateUniqueTag.html b/validator/java/src/test/resources/test-cases/tags/testDuplicateUniqueTag.html
deleted file mode 100644
index c5c4622efee75..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testDuplicateUniqueTag.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--
-     DUPLICATE_UNIQUE_TAG
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/tags/testExtensionUnused.html b/validator/java/src/test/resources/test-cases/tags/testExtensionUnused.html
deleted file mode 100644
index fdf532a4444a8..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testExtensionUnused.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--
-     EXTENSION_UNUSED
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
-</html>
diff --git a/validator/java/src/test/resources/test-cases/tags/testIncorrectNumChildTags.html b/validator/java/src/test/resources/test-cases/tags/testIncorrectNumChildTags.html
deleted file mode 100644
index 8c6f2cbd14718..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testIncorrectNumChildTags.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!--
-     INCORRECT_NUM_CHILD_TAGS
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <script custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js" async></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<amp-accordion>
-    <section>
-        <h2>Section 1</h2>
-        <p>Content in section 1.</p>
-    </section>
-    <section>
-        <h2>Section 2</h2>
-        <div>Content in section 2.</div>
-    </section>
-    <section expanded>
-        <h2>Section 3</h2>
-    </section>
-</amp-accordion>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/tags/testInvalidJsonCdata.html b/validator/java/src/test/resources/test-cases/tags/testInvalidJsonCdata.html
deleted file mode 100644
index 5c05a4afca6e5..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testInvalidJsonCdata.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-     INVALID_JSON_CDATA
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
-</head>
-<body>
-
-<amp-state id="123">
-    <script type="application/json">{sometext}</script>
-</amp-state>
-</body>
-</html>
-
diff --git a/validator/java/src/test/resources/test-cases/tags/testMandatoryCdataMissingOrIncorrect.html b/validator/java/src/test/resources/test-cases/tags/testMandatoryCdataMissingOrIncorrect.html
deleted file mode 100644
index 9eaa57c0dd23c..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testMandatoryCdataMissingOrIncorrect.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!--
-  MANDATORY_CDATA_MISSING_OR_INCORRECT
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <style amp4email-boilerplate></style>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-Test body.
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/tags/testMandatoryTagAncestor.html b/validator/java/src/test/resources/test-cases/tags/testMandatoryTagAncestor.html
deleted file mode 100644
index 8396e81a08217..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testMandatoryTagAncestor.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!--
-     MANDATORY_TAG_ANCESTOR
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-</body>
-<template type="amp-mustache">
-</template>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/tags/testMandatoryTagMissing.html b/validator/java/src/test/resources/test-cases/tags/testMandatoryTagMissing.html
deleted file mode 100644
index 20d0326e1e163..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testMandatoryTagMissing.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!--
-     MANDATORY_TAG_MISSING
--->
-<!doctype html>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-Hello, AMP4EMAIL world.
-</body>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/tags/testMissingRequiredExtension.html b/validator/java/src/test/resources/test-cases/tags/testMissingRequiredExtension.html
deleted file mode 100644
index 7a651e2065ff4..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testMissingRequiredExtension.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!--
-     MISSING_REQUIRED_EXTENSION
--->
-<!doctype html>
-<html amp4email>
-<head>
-  <meta charset="utf-8">
-  <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<form>
-</form>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/tags/testNonWhitespaceCdataEncountered.html b/validator/java/src/test/resources/test-cases/tags/testNonWhitespaceCdataEncountered.html
deleted file mode 100644
index cd974314bcff8..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testNonWhitespaceCdataEncountered.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-     NON_WHITESPACE_CDATA_ENCOUNTERED
--->
-<!doctype html>
-<html amp4email>
-
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">ad</script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-
-</head>
-<body>
-<amp-carousel class="amp-carousel" height="250"
-              layout="fixed-height"
-              type="carousel">
-</amp-carousel>
-</body>
-</html>
diff --git a/validator/java/src/test/resources/test-cases/tags/testSpecifiedLayoutInvalid.html b/validator/java/src/test/resources/test-cases/tags/testSpecifiedLayoutInvalid.html
deleted file mode 100644
index 1d1e531496f0a..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testSpecifiedLayoutInvalid.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-     SPECIFIED_LAYOUT_INVALID
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<amp-img src="https://images.com/img/amp.jpg"
-         width="1080"
-         height="610"
-         layout="fluid"
-         alt="an image"></amp-img>
-Hello, AMP4EMAIL world.
-</body>
-</html>
diff --git a/validator/java/src/test/resources/test-cases/tags/testTagReferencePointConflict.html b/validator/java/src/test/resources/test-cases/tags/testTagReferencePointConflict.html
deleted file mode 100644
index 4c98b4ca7762d..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testTagReferencePointConflict.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!--
-     TAG_REFERENCE_POINT_CONFLICT
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
-    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
-    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <style amp-custom>
-        .radio-selector [option][selected] {
-            outline: none;
-        }
-        .radio-selector [option] {
-            display: flex;
-            align-items: center;
-        }
-        .radio-selector [option]:before {
-            transition: background 0.25s ease-in-out;
-            content: "";
-            display: inline-block;
-            width: 24px;
-            height: 24px;
-            margin: .5rem;
-            border-radius: 100%;
-            border: solid 1px #005AF0;
-        }
-        .radio-selector [option][selected]:before {
-            text-align: center;
-            content: "✓";
-            color: #fff;
-            background-color: #005AF0;
-        }
-    </style>
-</head>
-<body>
-<div>
-    <amp-selector layout="container" class="radio-selector">
-        <amp-selector></amp-selector>
-    </amp-selector>
-</div>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/tags/testWrongParentTag.html b/validator/java/src/test/resources/test-cases/tags/testWrongParentTag.html
deleted file mode 100644
index 676ea9737a6dd..0000000000000
--- a/validator/java/src/test/resources/test-cases/tags/testWrongParentTag.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--
-     WRONG_PARENT_TAG
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <style amp4email-boilerplate>body{visibility:hidden}</style>
-</head>
-<body>
-<style amp-custom></style>
-
-</body>
-</html>
diff --git a/validator/java/src/test/resources/test-cases/templates/testTemplateInAttrName.html b/validator/java/src/test/resources/test-cases/templates/testTemplateInAttrName.html
deleted file mode 100644
index f8902f8a5d73b..0000000000000
--- a/validator/java/src/test/resources/test-cases/templates/testTemplateInAttrName.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-     TEMPLATE_IN_ATTR_NAME
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
-    <style amp-custom>
-        amp-ig {
-        }
-    </style>
-</head>
-<body>
-<template type="amp-mustache">
-    <div {{attrName}}=something>
-    </div>
-</template>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/templates/testTemplatePartialInAttrValue.html b/validator/java/src/test/resources/test-cases/templates/testTemplatePartialInAttrValue.html
deleted file mode 100644
index 71447ab5ce5dc..0000000000000
--- a/validator/java/src/test/resources/test-cases/templates/testTemplatePartialInAttrValue.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-     TEMPLATE_PARTIAL_IN_ATTR_VALUE
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
-    <style amp-custom>
-        amp-ig {
-        }
-    </style>
-</head>
-<body>
-<template type="amp-mustache">
-    <p title="{{ > notallowed }}"></p>
-</template>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/test-cases/templates/testUnescapedTemplateInAttrValue.html b/validator/java/src/test/resources/test-cases/templates/testUnescapedTemplateInAttrValue.html
deleted file mode 100644
index b5bf07ec285f6..0000000000000
--- a/validator/java/src/test/resources/test-cases/templates/testUnescapedTemplateInAttrValue.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-     UNESCAPED_TEMPLATE_IN_ATTR_VALUE
--->
-<!doctype html>
-<html amp4email>
-<head>
-    <meta charset="utf-8">
-    <script async src="https://cdn.ampproject.org/v0.js"></script>  <style amp4email-boilerplate>body{visibility:hidden}</style>
-    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
-    <style amp-custom>
-        amp-ig {
-        }
-    </style>
-</head>
-<body>
-<template type="amp-mustache">
-    <div lang={{{language}}}>
-    </div>
-</template>
-</body>
-</html>
\ No newline at end of file
diff --git a/validator/java/src/test/resources/validator-all-test.protoascii b/validator/java/src/test/resources/validator-all-test.protoascii
deleted file mode 100644
index 1fb79c027aa20..0000000000000
--- a/validator/java/src/test/resources/validator-all-test.protoascii
+++ /dev/null
@@ -1,61 +0,0 @@
-tags: {
-  html_format: AMP4EMAIL
-  tag_name: "$REFERENCE_POINT"
-  spec_name: "test_satisfies"
-  satisfies: "amp-app-banner button[open-button]"
-  mandatory_alternatives: "alternative"
-  siblings_disallowed: true
-}
-
-descendant_tag_list: {
-      name: "satisfies-allowed-descendants"
-      tag: "A"
-      tag: "ABBR"
-}
-
-tags: {
-  html_format: AMP4EMAIL
-  tag_name: "$REFERENCE_POINT"
-  spec_name: "test_satisfies_parent_head"
-  descendant_tag_list: "satisfies-allowed-descendants"
-  attrs: {
-      name: "href"
-      mandatory: true
-      alternative_names: "href"
-      value_url: {
-        protocol: "https"
-      }
-      blacklisted_value_regex: "__amp_source_origin"
-    }
-    mark_descendants {
-        marker: AUTOSCROLL
-      }
-    siblings_disallowed: true
-    mandatory_last_child: true
-    named_id: STYLE_AMP_CUSTOM
-
-}
-
-tags: {
-  html_format: AMP4EMAIL
-  tag_name: "$REFERENCE_POINT"
-  spec_name: "SCRIPT"
-  attrs: {
-    name: "type"
-    mandatory: true
-    value_casei: "application/json"
-  }
-}
-
-tags: {
-  html_format: AMP4EMAIL
-  tag_name: "$REFERENCE_POINT"
-  spec_name: "test_parent"
-  satisfies: "amp-app-banner button[open-button]"
-  mandatory_alternatives: "alternative"
-  siblings_disallowed: true
-  child_tags: {
-      mandatory_num_child_tags: 1
-      first_child_tag_name_oneof: "AMP-AD"
-  }
-}
\ No newline at end of file
diff --git a/validator/chromeextension/.gitignore b/validator/js/chromeextension/.gitignore
similarity index 100%
rename from validator/chromeextension/.gitignore
rename to validator/js/chromeextension/.gitignore
diff --git a/validator/js/chromeextension/README.md b/validator/js/chromeextension/README.md
new file mode 100644
index 0000000000000..26c5f5061f02f
--- /dev/null
+++ b/validator/js/chromeextension/README.md
@@ -0,0 +1,33 @@
+<!---
+Copyright 2016 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.
+-->
+
+# AMP Validator Chrome Extension
+
+This is the source code to the publicly available [AMP Validator](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) Chrome extension.
+
+## Building the extension
+
+The following tools are required to build the extension:
+
+-   [Bower](https://bower.io/)
+-   [Polybuild](https://github.com/PolymerLabs/polybuild)
+
+Once these tools are installed, run `./build_extension.sh`.
+
+## Installing locally
+
+Once built this extension can be installed locally through Chrome's [Developer
+Mode](https://developer.chrome.com/extensions/faq#faq-dev-01)
diff --git a/validator/chromeextension/_locales/en/messages.json b/validator/js/chromeextension/_locales/en/messages.json
similarity index 89%
rename from validator/chromeextension/_locales/en/messages.json
rename to validator/js/chromeextension/_locales/en/messages.json
index 9314446ec09f5..e6c16ea29ae75 100644
--- a/validator/chromeextension/_locales/en/messages.json
+++ b/validator/js/chromeextension/_locales/en/messages.json
@@ -9,15 +9,19 @@
   },
   "pageFailsValidationTitle": {
     "message": "Invalid AMP",
-    "description": "Extension title stating that the page is not valid AMP HTML."
+    "description": "Extension title stating that the page is not valid AMPHTML."
   },
   "pageHasAmpAltTitle": {
     "message": "AMP Available",
-    "description": "Extension title stating that the page is not an AMP HTML page, but one is available."
+    "description": "Extension title stating that the page is not an AMPHTML page, but one is available."
+  },
+  "pageInDevModeTitle": {
+    "message": "AMP in Dev Mode",
+    "description": "Extension title stating that the page is an AMPHTML page set to Dev Mode."
   },
   "pageIsNotAmpTitle": {
     "message": "Is Not AMP",
-    "description": "Extension title stating that the page is not an AMP HTML page."
+    "description": "Extension title stating that the page is not an AMPHTML page."
   },
   "pageFromAmpCacheTitle": {
     "message": "From an AMP Cache",
@@ -25,7 +29,7 @@
   },
   "pagePassesValidationTitle": {
     "message": "Valid AMP",
-    "description": "Extension title stating that the page is valid AMP HTML."
+    "description": "Extension title stating that the page is valid AMPHTML."
   },
   "emptyResultsText": {
     "message": "None found.",
diff --git a/validator/chromeextension/amp-icon-128.png b/validator/js/chromeextension/amp-icon-128.png
similarity index 100%
rename from validator/chromeextension/amp-icon-128.png
rename to validator/js/chromeextension/amp-icon-128.png
diff --git a/validator/js/chromeextension/amp-link-128.png b/validator/js/chromeextension/amp-link-128.png
new file mode 100644
index 0000000000000..d0e3e484b7a8f
Binary files /dev/null and b/validator/js/chromeextension/amp-link-128.png differ
diff --git a/validator/js/chromeextension/amp-link-38.png b/validator/js/chromeextension/amp-link-38.png
new file mode 100644
index 0000000000000..9c2b0de1ac0ba
Binary files /dev/null and b/validator/js/chromeextension/amp-link-38.png differ
diff --git a/validator/chromeextension/background.html b/validator/js/chromeextension/background.html
similarity index 90%
rename from validator/chromeextension/background.html
rename to validator/js/chromeextension/background.html
index 995513050bf39..2a0d5dda6f10d 100644
--- a/validator/chromeextension/background.html
+++ b/validator/js/chromeextension/background.html
@@ -17,7 +17,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <script src="https://cdn.ampproject.org/v0/validator.js"></script>
+    <script src="https://cdn.ampproject.org/v0/validator_wasm.js"></script>
     <script src="background.js"></script>
   </head>
   <body></body>
diff --git a/validator/js/chromeextension/background.js b/validator/js/chromeextension/background.js
new file mode 100644
index 0000000000000..f08ef3fb2891f
--- /dev/null
+++ b/validator/js/chromeextension/background.js
@@ -0,0 +1,409 @@
+/**
+ * @license
+ * Copyright 2016 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.
+ */
+const globals = {};
+globals.ampCacheBgcolor = '#ffffff';
+globals.ampCacheIconPrefix = 'amp-link';
+globals.ampCacheTitle = chrome.i18n.getMessage('pageFromAmpCacheTitle');
+globals.devModeAmpBgcolor = '#fcba03';
+globals.devModeAmpIconPrefix = 'dev';
+globals.devModeAmpTitle = chrome.i18n.getMessage('pageInDevModeTitle');
+globals.invalidAmpBgcolor = '#f44336';
+globals.invalidAmpIconPrefix = 'invalid';
+globals.invalidAmpTitle = chrome.i18n.getMessage('pageFailsValidationTitle');
+globals.linkToAmpBgColor = '#ffffff';
+globals.linkToAmpIconPrefix = 'amp-link';
+globals.linkToAmpTitle = chrome.i18n.getMessage('pageHasAmpAltTitle');
+globals.tabToUrl = {};
+globals.userAgentHeader = 'X-AMP-Validator-UA';
+globals.validAmpBgcolor = '#ffd700';
+globals.validAmpIconPrefix = 'valid';
+globals.validAmpTitle = chrome.i18n.getMessage('pagePassesValidationTitle');
+globals.validatorNotPresentBadge = chrome.i18n.getMessage('validatorNotPresentBadge');
+globals.validatorNotPresentBgColor = '#b71c1c';
+globals.validatorNotPresentIconPrefix = 'validator-not-present';
+globals.validatorNotPresentPopup = 'popup-validator-not-present.build.html';
+globals.validatorNotPresentTitle = chrome.i18n.getMessage('validatorNotPresentTitle');
+globals.validatorPopup = 'popup-validator.build.html';
+
+/**
+ * Format a hex value (HTML colors such as #ffffff) as an RGBA.
+ *
+ * @param {string} hex
+ * @return {string} rgba
+ */
+function hex2rgba(hex) {
+  // Remove the '#' char if necessary.
+  if (hex.charAt(0) === '#') { hex = hex.slice(1); }
+  hex = hex.toUpperCase();
+  let hexAlpha = '0123456789ABCDEF', value = new Array(4), k = 0, int1, int2, i;
+  for (i = 0; i < 6; i += 2) {
+    int1 = hexAlpha.indexOf(hex.charAt(i));
+    int2 = hexAlpha.indexOf(hex.charAt(i + 1));
+    value[k] = (int1 * 16) + int2;
+    k += 1;
+  }
+  value[3] = 255;
+  return value;
+}
+
+/**
+ * Returns a dictionary of the number of errors and warnings that occur
+ * in the set of ValidationErrors.
+ *
+ * @param {Array<ValidationError>} errors Validation errors and/or warnings.
+ * @return {Object}
+ */
+function getErrorSeverityCounts(errors) {
+  let numErrors = 0;
+  let numWarnings = 0;
+  for (const error in errors) {
+    if (errors[error].severity == 'ERROR') {numErrors += 1;}
+    if (errors[error].severity == 'WARNING') {numWarnings += 1;}
+  }
+  return {'ERROR': numErrors, 'WARNING': numWarnings};
+}
+
+/**
+ * Returns the number of errors that occur in the set of ValidationErrors.
+ *
+ *
+ * @param {Array<ValidationError>} errors Validation errors and/or warnings.
+ * @return {number}
+ */
+function getNumberOfErrors(errors) {
+  return getErrorSeverityCounts(errors)['ERROR'];
+}
+
+/**
+ * Returns the number of warnings that occur in the set of ValidationErrors.
+ *
+ * @param {Array<ValidationError>} errors Validation errors and/or warnings.
+ * @return {number}
+ */
+function getNumberOfWarnings(errors) {
+  return getErrorSeverityCounts(errors)['WARNING'];
+}
+
+/**
+ * Inspects ValidationResult to discover if the document has only one
+ * error which states DEV_MODE_ONLY. See #24176 for more context.
+ *
+ * @param {!Object<!ValidationResult>} validationResult
+ * @return {boolean}
+ */
+function onlyErrorIsDevMode(validationResult) {
+  return ((validationResult.errors.length == 1) &&
+      (validationResult.errors[0].code == 'DEV_MODE_ONLY'));
+}
+
+/**
+ * Handles actions to be taken for pages that are on an AMP Cache.
+ *
+ * @param {integer} tabId ID of a tab.
+ * @param {string} ampHref The URL of the AMP page.
+ */
+function handleAmpCache(tabId, ampHref) {
+  updateTabStatus(
+      tabId, globals.ampCacheIconPrefix, globals.ampCacheTitle,
+      '' /*text*/, globals.ampCacheBgcolor);
+  chrome.browserAction.onClicked.addListener(
+      function loadAmpHref(tab) {
+        if (tab.id == tabId) {
+          chrome.browserAction.onClicked.removeListener(loadAmpHref);
+          chrome.tabs.sendMessage(tab.id,
+              {'loadAmp': true, 'ampHref': ampHref});
+        }
+      }
+  );
+}
+
+/**
+ * Handles actions to be taken for AMP pages that are in Dev Mode.
+ *
+ * @param {integer} tabId ID of a tab.
+ */
+function handleAmpDevMode(tabId) {
+  updateTabStatus(
+      tabId, globals.devModeAmpIconPrefix, globals.devModeAmpTitle,
+      '' /*text*/, globals.devModeAmpBgColor);
+  updateTabPopup(tabId);
+}
+
+/**
+ * Handles actions to be taken for AMP pages that fail validation.
+ *
+ * @param {integer} tabId ID of a tab.
+ * @param {!Object<!ValidationResult>} validationResult
+ */
+function handleAmpFail(tabId, validationResult) {
+  const numErrors = getNumberOfErrors(validationResult.errors);
+  updateTabStatus(
+      tabId, globals.invalidAmpIconPrefix, globals.invalidAmpTitle,
+      numErrors.toString(), globals.invalidAmpBgcolor);
+  updateTabPopup(tabId);
+}
+
+/**
+ * Handles actions to be taken for pages that have an AMP page available.
+ *
+ * @param {integer} tabId ID of a tab.
+ * @param {string} ampHref The URL of the AMP page.
+ */
+function handleAmpLink(tabId, ampHref) {
+  updateTabStatus(
+      tabId, globals.linkToAmpIconPrefix, globals.linkToAmpTitle,
+      '' /*text*/, globals.linkToAmpBgColor);
+  chrome.browserAction.onClicked.addListener(
+      function loadAmpHref(tab) {
+        if (tab.id == tabId) {
+          chrome.browserAction.onClicked.removeListener(loadAmpHref);
+          chrome.tabs.sendMessage(tab.id,
+              {'loadAmp': true, 'ampHref': ampHref});
+        }
+      }
+  );
+}
+
+/**
+ * Handles actions to be taken for AMP pages that pass validation.
+ *
+ * @param {integer} tabId ID of a tab.
+ * @param {!Object<!ValidationResult>} validationResult
+ */
+function handleAmpPass(tabId, validationResult) {
+  const numWarnings = getNumberOfWarnings(validationResult.errors);
+  updateTabStatus(
+      tabId, globals.validAmpIconPrefix, globals.validAmpTitle,
+      '' /*text*/, globals.validAmpBgcolor);
+  if (numWarnings > 0) {updateTabPopup(tabId);}
+}
+
+function handleValidatorNotPresent(tabId) {
+  updateTabStatus(tabId, globals.validatorNotPresentIconPrefix,
+      globals.validatorNotPresentTitle, globals.validatorNotPresentBadge,
+      globals.validatorNotPresentBgColor);
+  chrome.tabs.get(tabId, function(tab) {
+    if (!chrome.runtime.lastError) {
+      chrome.browserAction.setPopup({
+        tabId,
+        popup: globals.validatorNotPresentPopup,
+      });
+    }
+  });
+}
+
+/**
+ * Returns whether the url is forbidden for the extension to act on.
+ *
+ * @param {string} url The URL of a tab.
+ * @return {boolean}
+ */
+function isForbiddenUrl(url) {
+  return (url.startsWith('chrome://') || url.startsWith('view-source'));
+}
+
+/**
+ * Handles events for a specific tab and asks the tab's content_script to
+ * determine AMP details about the page's content.
+ *
+ * @param {Tab} tab The Tab which triggered the event.
+ */
+function updateTab(tab) {
+  if (!isForbiddenUrl(tab.url)) {
+    chrome.tabs.sendMessage(
+        tab.id, {'getAmpDetails': true}, function(response) {
+          if (response && response.fromAmpCache && response.ampHref) {
+            handleAmpCache(tab.id, response.ampHref);
+          } else if (response && response.isAmp) {
+            validateUrlFromTab(tab, response.userAgent);
+          } else if (response && !response.isAmp && response.ampHref) {
+            handleAmpLink(tab.id, response.ampHref);
+          }
+        }
+    );
+  }
+}
+
+/**
+ * Updates the tabId's extension popup.
+ *
+ * @param {number} tabId ID of a tab.
+ */
+function updateTabPopup(tabId) {
+  // Verify tab still exists
+  chrome.tabs.get(tabId, function(tab) {
+    if (!chrome.runtime.lastError) {
+      chrome.browserAction.setPopup(
+          {tabId, popup: globals.validatorPopup});
+    }
+  });
+}
+
+/**
+ * Updates the tabId's extension icon and badge.
+ *
+ * @param {number} tabId ID of a tab.
+ * @param {string} iconPrefix File name prefix of the icon to use.
+ * @param {string} title Title to display in extension icon hover.
+ * @param {string} text Text to display in badge.
+ * @param {string} color Background color for badge.
+ */
+function updateTabStatus(tabId, iconPrefix, title, text, color) {
+  // Verify tab still exists
+  chrome.tabs.get(tabId, function(tab) {
+    if (!chrome.runtime.lastError) {
+      chrome.browserAction.setIcon({
+        path: {
+          '19': iconPrefix + '-128.png',
+          '38': iconPrefix + '-38.png',
+        },
+        tabId,
+      });
+      if (title !== undefined)
+      {chrome.browserAction.setTitle({title, tabId});}
+      if (text !== undefined)
+      {chrome.browserAction.setBadgeText({text, tabId});}
+      if (color !== undefined)
+      {chrome.browserAction.setBadgeBackgroundColor(
+          {color: hex2rgba(color), tabId});}
+    }
+  });
+}
+
+/**
+ * Fetches the content of the tab's URL and validates it. Then updates the
+ * extension's icons with pass/fail.
+ *
+ * @param {Tab} tab The Tab which triggered the event.
+ * @param {userAgent} string Tab's current user agent.
+ */
+function validateUrlFromTab(tab, userAgent) {
+  // Verify amp and amp.validator are defined.
+  if (typeof amp === 'undefined' || typeof amp.validator === 'undefined') {
+    handleValidatorNotPresent(tab.id);
+    return;
+  }
+  const xhr = new XMLHttpRequest();
+  const url = tab.url.split('#')[0];
+  xhr.open('GET', url, true);
+
+  // We can't set the User-Agent header directly, but we can set this header
+  // and let the onBeforeSendHeaders handler rename it for us.
+  // Add the listener now. It'll be removed after the request is made.
+  // It's not possible to set filters on the listener to only capture our
+  // traffic, so this approach will interfere as little as possible with the
+  // 99.9% of requests which aren't for AMP validation.
+  chrome.webRequest.onBeforeSendHeaders.addListener(
+      updateSendHeadersUserAgent,
+      {urls: [url], types: ['xmlhttprequest'], tabId: -1},
+      ['requestHeaders', 'blocking']
+  );
+  // Add the temporary header to the request
+  xhr.setRequestHeader(globals.userAgentHeader, userAgent);
+
+  xhr.onreadystatechange = async function() {
+    if (xhr.readyState === 4) {
+      // The request is complete; remove our temporary listener.
+      chrome.webRequest.onBeforeSendHeaders.removeListener(
+          updateSendHeadersUserAgent);
+      const doc = xhr.responseText;
+      await amp.validator.init();
+      const validationResult = amp.validator.validateString(doc);
+      window.sessionStorage.setItem(url, JSON.stringify(validationResult));
+      if (validationResult.status == 'PASS') {
+        handleAmpPass(tab.id, validationResult);
+      } else if (onlyErrorIsDevMode(validationResult)) {
+        handleAmpDevMode(tab.id);
+      } else {
+        handleAmpFail(tab.id, validationResult);
+      }
+    }
+  };
+  xhr.send();
+}
+
+/**
+ * Event handler which gets called for onBeforeSendHeaders
+ * (developer.chrome.com/extensions/webRequest#event-onBeforeSendHeaders) and
+ * updates the User-Agent header to the value that's been specified.
+ *
+ * @param {!Object<OnBeforeSendHeadersDetails>} details Details object as
+ *   defined by Chrome.
+ * @return {Object<HttpHeaders>} Object with HttpHeaders value
+ *   (https://developer.chrome.com/extensions/webRequest#type-HttpHeaders)
+ */
+function updateSendHeadersUserAgent(details) {
+  let newUserAgent,
+      headers = details.requestHeaders;
+  // Using var instead of let keeps the index in scope for later
+  for (var i = 0; i < headers.length; i++) {
+    if (headers[i].name === globals.userAgentHeader) {
+      // Found a header with our internal User Agent Header
+      newUserAgent = headers[i].value;
+      break;
+    }
+  }
+  if (newUserAgent) {
+    // We previously found our UA header. Delete that by the index.
+    headers.splice(i, 1);
+    // And then update the actual User-Agent header
+    for (i = 0; i < headers.length; i++) {
+      if (headers[i].name == 'User-Agent') {
+        headers[i].value = newUserAgent;
+        break;
+      }
+    }
+    return {requestHeaders: headers};
+  }
+}
+
+/**
+ * Listen for a new tab being created.
+ */
+chrome.tabs.onCreated.addListener(function(tab) {
+  updateTab(tab);
+});
+
+/**
+ * Listen for a tab being changed.
+ */
+chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
+  globals.tabToUrl[tabId] = tab.url;
+  updateTab(tab);
+});
+
+/**
+ * Listen for a tab being removed.
+ */
+chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
+  window.sessionStorage.removeItem(globals.tabToUrl[tabId]);
+});
+
+/**
+ * Listen for a tab being replaced (due to prerendering or instant).
+ */
+chrome.tabs.onReplaced.addListener(function(addedTabId, removedTabId) {
+  window.sessionStorage.removeItem(globals.tabToUrl[removedTabId]);
+  chrome.tabs.get(addedTabId, function(tab) {
+    updateTab(tab);
+  });
+});
+
+/**
+ * Reload every hour to retrieve the most recent AMP Validator.
+ */
+window.setTimeout(() => { location.reload(); } , 60 * 60 * 1000);
diff --git a/validator/chromeextension/bower.json b/validator/js/chromeextension/bower.json
similarity index 100%
rename from validator/chromeextension/bower.json
rename to validator/js/chromeextension/bower.json
diff --git a/validator/chromeextension/build_extension.sh b/validator/js/chromeextension/build_extension.sh
similarity index 100%
rename from validator/chromeextension/build_extension.sh
rename to validator/js/chromeextension/build_extension.sh
diff --git a/validator/chromeextension/content_script.js b/validator/js/chromeextension/content_script.js
similarity index 92%
rename from validator/chromeextension/content_script.js
rename to validator/js/chromeextension/content_script.js
index e8da71c7f815b..92ea00f971415 100644
--- a/validator/chromeextension/content_script.js
+++ b/validator/js/chromeextension/content_script.js
@@ -53,13 +53,16 @@ function getAmpCacheHref() {
 
 /**
  * Determine if <link rel="amphtml" href="..."> exists in the page and
- * return the href's value if it does. Otherwise returns empty string.
+ * return the href's value iff it starts with http:// or https://.
+ * Otherwise returns empty string.
  *
  * @return {string}
  * @private
  */
 function getAmpHtmlLinkHref() {
   let ampHtmlLinkHref = '';
+  // URL must begin with http:// or https://
+  const validUrlPrefixRe = /^[\s\xa0]*https?:\/\//;
   const headLinks = document.head.getElementsByTagName('link');
   if (headLinks.length > 0) {
     for (const index in headLinks) {
@@ -67,7 +70,8 @@ function getAmpHtmlLinkHref() {
       if (link instanceof HTMLLinkElement &&
           link.hasAttribute('rel') &&
           globals.amphtmlRegex.test(link.getAttribute('rel')) &&
-          link.hasAttribute('href')) {
+          link.hasAttribute('href') &&
+          validUrlPrefixRe.test(link.getAttribute('href'))) {
         ampHtmlLinkHref = link.getAttribute('href');
         break;
       }
diff --git a/validator/js/chromeextension/dev-128.png b/validator/js/chromeextension/dev-128.png
new file mode 100644
index 0000000000000..9cbbc97112bcb
Binary files /dev/null and b/validator/js/chromeextension/dev-128.png differ
diff --git a/validator/js/chromeextension/dev-38.png b/validator/js/chromeextension/dev-38.png
new file mode 100644
index 0000000000000..f900dfe409c3b
Binary files /dev/null and b/validator/js/chromeextension/dev-38.png differ
diff --git a/validator/chromeextension/icon-128.png b/validator/js/chromeextension/icon-128.png
similarity index 100%
rename from validator/chromeextension/icon-128.png
rename to validator/js/chromeextension/icon-128.png
diff --git a/validator/chromeextension/icon-16.png b/validator/js/chromeextension/icon-16.png
similarity index 100%
rename from validator/chromeextension/icon-16.png
rename to validator/js/chromeextension/icon-16.png
diff --git a/validator/chromeextension/icon-48.png b/validator/js/chromeextension/icon-48.png
similarity index 100%
rename from validator/chromeextension/icon-48.png
rename to validator/js/chromeextension/icon-48.png
diff --git a/validator/chromeextension/icon-64.png b/validator/js/chromeextension/icon-64.png
similarity index 100%
rename from validator/chromeextension/icon-64.png
rename to validator/js/chromeextension/icon-64.png
diff --git a/validator/js/chromeextension/invalid-128.png b/validator/js/chromeextension/invalid-128.png
new file mode 100644
index 0000000000000..eb16ccd0e6ee2
Binary files /dev/null and b/validator/js/chromeextension/invalid-128.png differ
diff --git a/validator/js/chromeextension/invalid-38.png b/validator/js/chromeextension/invalid-38.png
new file mode 100644
index 0000000000000..16c6683f7d858
Binary files /dev/null and b/validator/js/chromeextension/invalid-38.png differ
diff --git a/validator/chromeextension/manifest.json b/validator/js/chromeextension/manifest.json
similarity index 87%
rename from validator/chromeextension/manifest.json
rename to validator/js/chromeextension/manifest.json
index de8f822b1bfaa..73e9eddf04d02 100644
--- a/validator/chromeextension/manifest.json
+++ b/validator/js/chromeextension/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "__MSG_extensionName__",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "default_locale": "en",
   "description": "__MSG_extensionDescription__",
   "icons": {
@@ -25,8 +25,8 @@
       "run_at": "document_start"
     }
   ],
-  "content_security_policy": "script-src 'self' https://cdn.ampproject.org; object-src 'self'",
-  "homepage_url": "https://www.ampproject.org",
+  "content_security_policy": "script-src 'self' https://cdn.ampproject.org 'wasm-eval'; object-src 'self'",
+  "homepage_url": "https://amp.dev",
   "permissions": [
     "tabs",
     "webRequest",
diff --git a/validator/js/chromeextension/no-amp-128.png b/validator/js/chromeextension/no-amp-128.png
new file mode 100644
index 0000000000000..e7ceac314069e
Binary files /dev/null and b/validator/js/chromeextension/no-amp-128.png differ
diff --git a/validator/js/chromeextension/no-amp-38.png b/validator/js/chromeextension/no-amp-38.png
new file mode 100644
index 0000000000000..687434fa804bb
Binary files /dev/null and b/validator/js/chromeextension/no-amp-38.png differ
diff --git a/validator/chromeextension/package_extension.sh b/validator/js/chromeextension/package_extension.sh
similarity index 100%
rename from validator/chromeextension/package_extension.sh
rename to validator/js/chromeextension/package_extension.sh
diff --git a/validator/chromeextension/polymer-extension-toolbar.html b/validator/js/chromeextension/polymer-extension-toolbar.html
similarity index 100%
rename from validator/chromeextension/polymer-extension-toolbar.html
rename to validator/js/chromeextension/polymer-extension-toolbar.html
diff --git a/validator/chromeextension/polymer.html b/validator/js/chromeextension/polymer.html
similarity index 100%
rename from validator/chromeextension/polymer.html
rename to validator/js/chromeextension/polymer.html
diff --git a/validator/chromeextension/popup-validator-not-present.html b/validator/js/chromeextension/popup-validator-not-present.html
similarity index 100%
rename from validator/chromeextension/popup-validator-not-present.html
rename to validator/js/chromeextension/popup-validator-not-present.html
diff --git a/validator/chromeextension/popup-validator.html b/validator/js/chromeextension/popup-validator.html
similarity index 89%
rename from validator/chromeextension/popup-validator.html
rename to validator/js/chromeextension/popup-validator.html
index 085bc45803679..827a4b117a6cf 100644
--- a/validator/chromeextension/popup-validator.html
+++ b/validator/js/chromeextension/popup-validator.html
@@ -19,7 +19,7 @@
     <script src="./bower_components/webcomponentsjs/CustomElements.min.js"></script>
     <link href="polymer.html" rel="import">
     <link href="polymer-extension-toolbar.html" rel="import">
-    <script src="https://cdn.ampproject.org/v0/validator.js"></script>
+    <script src="https://cdn.ampproject.org/v0/validator_wasm.js"></script>
     <style is="custom-style">
       body {
         background-color: #fff;
@@ -126,25 +126,27 @@
         </paper-listbox>
       </template>
       <script>
-        Polymer({
-          is: 'results-page',
-          getIssue: function(item) {
-            return amp.validator.renderErrorMessage(item);
-          },
-          hasResults: function(results) {
-            return results.length > 0;
-          },
-          properties: {
-            emptyResultsText: {
-              type: String,
-              value: chrome.i18n.getMessage("emptyResultsText"),
+        amp.validator.init().then(function() {
+          Polymer({
+            is: 'results-page',
+            getIssue: function(item) {
+              return amp.validator.renderErrorMessage(item);
             },
-            results: {
-              type: Array,
-              value: function() { return []; },
-              notify: true,
+            hasResults: function(results) {
+              return results.length > 0;
             },
-          },
+            properties: {
+              emptyResultsText: {
+                type: String,
+                value: chrome.i18n.getMessage("emptyResultsText"),
+              },
+              results: {
+                type: Array,
+                value: function() { return []; },
+                notify: true,
+              },
+            },
+          });
         });
       </script>
     </dom-module>
@@ -224,9 +226,11 @@
               xhr.open('GET', url, true);
               xhr.onreadystatechange = function() {
                 if (xhr.readyState === 4) {
-                  validationResult =
-                    amp.validator.validateString(xhr.responseText);
-                  processResult(validationResult, toolbar, content, url);
+                  amp.validator.init().then(function() {
+                    validationResult =
+                      amp.validator.validateString(xhr.responseText);
+                    processResult(validationResult, toolbar, content, url);
+                  });
                 }
               };
               xhr.send();
diff --git a/validator/chromeextension/promotional-440.png b/validator/js/chromeextension/promotional-440.png
similarity index 100%
rename from validator/chromeextension/promotional-440.png
rename to validator/js/chromeextension/promotional-440.png
diff --git a/validator/chromeextension/screenshot-chrome-1.png b/validator/js/chromeextension/screenshot-chrome-1.png
similarity index 100%
rename from validator/chromeextension/screenshot-chrome-1.png
rename to validator/js/chromeextension/screenshot-chrome-1.png
diff --git a/validator/chromeextension/screenshot-chrome-2.png b/validator/js/chromeextension/screenshot-chrome-2.png
similarity index 100%
rename from validator/chromeextension/screenshot-chrome-2.png
rename to validator/js/chromeextension/screenshot-chrome-2.png
diff --git a/validator/chromeextension/screenshot-opera-1.png b/validator/js/chromeextension/screenshot-opera-1.png
similarity index 100%
rename from validator/chromeextension/screenshot-opera-1.png
rename to validator/js/chromeextension/screenshot-opera-1.png
diff --git a/validator/chromeextension/screenshot-opera-2.png b/validator/js/chromeextension/screenshot-opera-2.png
similarity index 100%
rename from validator/chromeextension/screenshot-opera-2.png
rename to validator/js/chromeextension/screenshot-opera-2.png
diff --git a/validator/js/chromeextension/valid-128.png b/validator/js/chromeextension/valid-128.png
new file mode 100644
index 0000000000000..a1347275a83c3
Binary files /dev/null and b/validator/js/chromeextension/valid-128.png differ
diff --git a/validator/js/chromeextension/valid-38.png b/validator/js/chromeextension/valid-38.png
new file mode 100644
index 0000000000000..00ab7adf2dc9d
Binary files /dev/null and b/validator/js/chromeextension/valid-38.png differ
diff --git a/validator/chromeextension/validator-not-present-128.png b/validator/js/chromeextension/validator-not-present-128.png
similarity index 100%
rename from validator/chromeextension/validator-not-present-128.png
rename to validator/js/chromeextension/validator-not-present-128.png
diff --git a/validator/chromeextension/validator-not-present-38.png b/validator/js/chromeextension/validator-not-present-38.png
similarity index 100%
rename from validator/chromeextension/validator-not-present-38.png
rename to validator/js/chromeextension/validator-not-present-38.png
diff --git a/validator/engine/amp4ads-parse-css.js b/validator/js/engine/amp4ads-parse-css.js
similarity index 100%
rename from validator/engine/amp4ads-parse-css.js
rename to validator/js/engine/amp4ads-parse-css.js
diff --git a/validator/engine/amp4ads-parse-css_test.js b/validator/js/engine/amp4ads-parse-css_test.js
similarity index 100%
rename from validator/engine/amp4ads-parse-css_test.js
rename to validator/js/engine/amp4ads-parse-css_test.js
diff --git a/validator/engine/definitions.js b/validator/js/engine/definitions.js
similarity index 100%
rename from validator/engine/definitions.js
rename to validator/js/engine/definitions.js
diff --git a/validator/js/engine/htmlparser-interface.js b/validator/js/engine/htmlparser-interface.js
new file mode 100644
index 0000000000000..82853f75a1efb
--- /dev/null
+++ b/validator/js/engine/htmlparser-interface.js
@@ -0,0 +1,492 @@
+/**
+ * @license DEDUPE_ON_MINIFY
+ * Copyright 2015 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.
+ */
+
+goog.module('amp.htmlparser.interface');
+const googArray = goog.require('goog.array');
+
+/**
+ * @param {string} str The string to lower case.
+ * @return {string} The str in lower case format.
+ */
+const toLowerCase = function(str) {
+  // htmlparser heavily relies on the length of the strings, and
+  // unfortunately some characters change their length when
+  // lowercased; for instance, the Turkish İ has a length of 1, but
+  // when lower-cased, it has a length of 2. So, as a workaround we
+  // check that the length be the same as before lower-casing, and if
+  // not, we only lower-case the letters A-Z.
+  const lowerCased = str.toLowerCase();
+  if (lowerCased.length == str.length) {
+    return lowerCased;
+  }
+  return str.replace(/[A-Z]/g, function(ch) {
+    return String.fromCharCode(ch.charCodeAt(0) | 32);
+  });
+};
+exports.toLowerCase = toLowerCase;
+
+/**
+ * @param {string} str The string to upper case.
+ * @return {string} The str in upper case format.
+ */
+const toUpperCase = function(str) {
+  // htmlparser heavily relies on the length of the strings, and
+  // unfortunately some characters change their length when
+  // lowercased; for instance, the Turkish İ has a length of 1, but
+  // when lower-cased, it has a length of 2. So, as a workaround we
+  // check that the length be the same as before upper-casing, and if
+  // not, we only upper-case the letters A-Z.
+  const upperCased = str.toUpperCase();
+  if (upperCased.length == str.length) {
+    return upperCased;
+  }
+  return str.replace(/[a-z]/g, function(ch) {
+    return String.fromCharCode(ch.charCodeAt(0) & 223);
+  });
+};
+exports.toUpperCase = toUpperCase;
+
+/**
+ * Name/Value pair representing an HTML Tag attribute.
+ */
+const ParsedAttr = class {
+  constructor() {
+    /** @type {string} */
+    this.name = '';
+    /** @type {string} */
+    this.value = '';
+  }
+};
+exports.ParsedAttr = ParsedAttr;
+
+/**
+ * An Html parser makes method calls with ParsedHtmlTags as arguments.
+ */
+const ParsedHtmlTag = class {
+  /**
+   * @param {string} tagName
+   * @param {Array<string>=} opt_attrs Array of alternating (name, value) pairs.
+   */
+  constructor(tagName, opt_attrs) {
+    // Tag and Attribute names are case-insensitive. For error messages, we
+    // would like to use lower-case names as they read a little nicer. However,
+    // in validator environments where the parsing is done by the actual
+    // browser, the DOM API returns tag names in upper case. We stick with this
+    // convention for tag names, for performance, but convert to lower when
+    // producing error messages. Error messages aren't produced in latency
+    // sensitive contexts.
+    /** @type {!Array<string>} */
+    const attrs = opt_attrs || [];
+
+    /** @private @type {string} */
+    this.tagName_ = toUpperCase(tagName);
+    /** @private @type {!Array<!ParsedAttr>} */
+    this.attrs_ = [];
+    // Convert attribute names to lower case, not values, which are
+    // case-sensitive.
+    for (let i = 0; i < attrs.length; i += 2) {
+      const attr = new ParsedAttr();
+      attr.name = toLowerCase(attrs[i]);
+      attr.value = attrs[i + 1];
+      // Our html parser repeats the key as the value if there is no value. We
+      // replace the value with an empty string instead in this case.
+      if (attr.name === attr.value) {
+        attr.value = '';
+      }
+      this.attrs_.push(attr);
+    }
+    // Sort the attribute array by (lower case) name.
+    googArray.sort(this.attrs_, function(a, b) {
+      if (a.name > b.name) {
+        return 1;
+      }
+      if (a.name < b.name) {
+        return -1;
+      }
+      // No need to sub-sort by attr values, just names will do.
+      return 0;
+    });
+
+    // Lazily allocated map from attribute name to value.
+    /** @private @type {?Object<string, string>} */
+    this.attrsByKey_ = null;
+  }
+
+  /**
+   * Lower-case tag name
+   * @return {string}
+   */
+  lowerName() {
+    return toLowerCase(this.tagName_);
+  }
+
+  /**
+   * Upper-case tag name
+   * @return {string}
+   */
+  upperName() {
+    return this.tagName_;
+  }
+
+  /**
+   * Returns an array of attributes. Each attribute has two fields: name and
+   * value. Name is always lower-case, value is the case from the original
+   * document. Values are unescaped.
+   * @return {!Array<!ParsedAttr>}
+   */
+  attrs() {
+    return this.attrs_;
+  }
+
+  /**
+   * Returns an object mapping attribute name to attribute value. This is
+   * populated lazily, as it's not used for most tags.
+   * @return {Object<string, string>}
+   * */
+  attrsByKey() {
+    if (this.attrsByKey_ === null) {
+      this.attrsByKey_ = Object.create(null);
+      for (const attr of this.attrs()) {
+        this.attrsByKey_[attr.name] = attr.value;
+      }
+    }
+    return /** @type{Object<string, string>} */ (this.attrsByKey_);
+  }
+
+  /**
+   * Returns a duplicate attribute name if the tag contains two attributes
+   * named the same, but with different attribute values. Same attribute name
+   * AND value is OK. Returns null if there are no such duplicate attributes.
+   * @return {?string}
+   */
+  hasDuplicateAttrs() {
+    /** @type {string} */
+    let lastAttrName = '';
+    /** @type {string} */
+    let lastAttrValue = '';
+    for (const attr of this.attrs()) {
+      if (lastAttrName === attr.name && lastAttrValue !== attr.value) {
+        return attr.name;
+      }
+      lastAttrName = attr.name;
+      lastAttrValue = attr.value;
+    }
+    return null;
+  }
+
+  /**
+   * Removes duplicate attributes from the attribute list. This is consistent
+   * with HTML5 parsing error handling rules, only the first attribute with
+   * each attribute name is considered, the remainder are ignored.
+   */
+  dedupeAttrs() {
+    /** @type {!Array<!Object>} */
+    const newAttrs = [];
+    /** @type {string} */
+    let lastAttrName = '';
+    for (const attr of this.attrs_) {
+      if (lastAttrName !== attr.name) {
+        newAttrs.push(attr);
+      }
+      lastAttrName = attr.name;
+    }
+    this.attrs_ = newAttrs;
+  }
+
+  /**
+   * Returns the value of a given attribute name. If it does not exist then
+   * returns null.
+   * @param {string} name
+   * @return {?string}
+   * @private
+   */
+  getAttrValueOrNull_(name) {
+    return this.attrsByKey()[name] || null;
+  }
+
+  /**
+   * @return {boolean}
+   */
+  isEmpty() {
+    return this.tagName_.length === 0;
+  }
+
+  /**
+   * Gets the name attribute for an extension script tag.
+   * @return {string}
+   * @private
+   */
+  extensionScriptNameAttribute_() {
+    if (this.upperName() == 'SCRIPT') {
+      for (const attribute
+               of ['custom-element', 'custom-template', 'host-service']) {
+        if (attribute in this.attrsByKey()) {
+          return attribute;
+        }
+      }
+    }
+    return '';
+  }
+
+  /**
+   * Tests if this is an extension script tag.
+   * @return {boolean}
+   */
+  isExtensionScript() {
+    return !!this.extensionScriptNameAttribute_();
+  }
+
+  /**
+   * Tests if this is an AMP Cache domain.
+   * @param {string} src
+   * @return {boolean}
+   */
+  isAmpCacheDomain_(src) {
+    return src.startsWith('https://cdn.ampproject.org');
+  }
+
+  /**
+   * Tests if this is an async script tag.
+   * @return {boolean}
+   * @private
+   */
+  isAsyncScriptTag_() {
+    return this.upperName() == 'SCRIPT' && 'async' in this.attrsByKey() &&
+        'src' in this.attrsByKey();
+  }
+
+  /**
+   * Tests if this is the AMP runtime script tag.
+   * @return {boolean}
+   */
+  isAmpRuntimeScript() {
+    const src = this.getAttrValueOrNull_('src');
+    if (src === null) return false;
+    return this.isAsyncScriptTag_() && !this.isExtensionScript() &&
+        this.isAmpCacheDomain_(src) &&
+        (src.endsWith('/v0.js') || src.endsWith('/v0.mjs') ||
+         src.endsWith('/v0.mjs?f=sxg'));
+  }
+
+  /**
+   * Tests if this is the LTS version script tag.
+   * @return {boolean}
+   */
+  isLtsScriptTag() {
+    // Examples:
+    // https://cdn.ampproject.org/lts/v0.js
+    // https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js
+    const src = this.getAttrValueOrNull_('src');
+    if (src === null) return false;
+    const ltsScriptSrcRegex = new RegExp(
+        '^https://cdn\\.ampproject\\.org/lts/(v0|v0/amp-[a-z0-9-]*-[a-z0-9.]*)\\.js$',
+        'i');
+    return this.isAsyncScriptTag_() && ltsScriptSrcRegex.test(src);
+  }
+
+  /**
+   * Tests if this is the module version script tag.
+   * @return {boolean}
+   */
+  isModuleScriptTag() {
+    // Examples:
+    // https://cdn.ampproject.org/v0.mjs
+    // https://cdn.ampproject.org/v0/amp-ad-0.1.mjs
+    const type = this.getAttrValueOrNull_('type');
+    if (type === null) return false;
+    const src = this.getAttrValueOrNull_('src');
+    if (src === null) return false;
+    const moduleScriptSrcRegex = new RegExp(
+        '^https://cdn\\.ampproject\\.org/(v0|v0/amp-[a-z0-9-]*-[a-z0-9.]*)\\.mjs$',
+        'i');
+    return this.isAsyncScriptTag_() && (type == 'module') &&
+        moduleScriptSrcRegex.test(src);
+  }
+
+  /**
+   * Tests if this is the nomodule version script tag.
+   * @return {boolean}
+   */
+  isNomoduleScriptTag() {
+    // Examples:
+    // https://cdn.ampproject.org/v0.js
+    // https://cdn.ampproject.org/v0/amp-ad-0.1.js
+    const src = this.getAttrValueOrNull_('src');
+    if (src === null) return false;
+    const nomoduleScriptSrcRegex = new RegExp(
+        '^https://cdn\\.ampproject\\.org/(v0|v0/amp-[a-z0-9-]*-[a-z0-9.]*)\\.js$',
+        'i');
+    return this.isAsyncScriptTag_() && 'nomodule' in this.attrsByKey() &&
+        nomoduleScriptSrcRegex.test(src);
+  }
+
+  /**
+   * Tests if this is the module LTS version script tag.
+   * @return {boolean}
+   */
+  isModuleLtsScriptTag() {
+    // Examples:
+    // https://cdn.ampproject.org/lts/v0.mjs
+    // https://cdn.ampproject.org/lts/v0/amp-ad-0.1.mjs
+    const type = this.getAttrValueOrNull_('type');
+    if (type === null) return false;
+    const src = this.getAttrValueOrNull_('src');
+    if (src === null) return false;
+    const moduleLtsScriptSrcRegex = new RegExp(
+        '^https://cdn\\.ampproject\\.org/lts/(v0|v0/amp-[a-z0-9-]*-[a-z0-9.]*)\\.mjs$',
+        'i');
+    return this.isAsyncScriptTag_() && (type == 'module') &&
+        moduleLtsScriptSrcRegex.test(src);
+  }
+
+  /**
+   * Tests if this is the nomodule LTS version script tag.
+   * @return {boolean}
+   */
+  isNomoduleLtsScriptTag() {
+    // Examples:
+    // https://cdn.ampproject.org/lts/v0.js
+    // https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js
+    const src = this.getAttrValueOrNull_('src');
+    if (src === null) return false;
+    const nomoduleLtsScriptSrcRegex = new RegExp(
+        '^https://cdn\\.ampproject\\.org/lts/(v0|v0/amp-[a-z0-9-]*-[a-z0-9.]*)\\.js$',
+        'i');
+    return this.isAsyncScriptTag_() && 'nomodule' in this.attrsByKey() &&
+        nomoduleLtsScriptSrcRegex.test(src);
+  }
+};
+exports.ParsedHtmlTag = ParsedHtmlTag;
+
+
+/**
+ * An interface to the `htmlparser.HtmlParser` visitor, that gets
+ * called while the HTML is being parsed.
+ */
+const HtmlSaxHandler = class {
+  /**
+   * Handler called when the parser found a new tag.
+   * @param {!ParsedHtmlTag} tag
+   */
+  startTag(tag) {}
+
+  /**
+   * Handler called when the parser found a closing tag.
+   * @param {!ParsedHtmlTag} tag
+   */
+  endTag(tag) {}
+
+  /**
+   * Handler called when PCDATA is found.
+   * @param {string} text The PCDATA text found.
+   */
+  pcdata(text) {}
+
+  /**
+   * Handler called when RCDATA is found.
+   * @param {string} text The RCDATA text found.
+   */
+  rcdata(text) {}
+
+  /**
+   * Handler called when CDATA is found.
+   * @param {string} text The CDATA text found.
+   */
+  cdata(text) {}
+
+  /**
+   * Handler called when the parser is starting to parse the document.
+   */
+  startDoc() {}
+
+  /**
+   * Handler called when the parsing is done.
+   */
+  endDoc() {}
+
+  /**
+   * Callback for informing that the parser is manufacturing a <body> tag not
+   * actually found on the page. This will be followed by a startTag() with the
+   * actual body tag in question.
+   */
+  markManufacturedBody() {}
+
+  /**
+   * HTML5 defines how parsers treat documents with multiple body tags: they
+   * merge the attributes from the later ones into the first one. Therefore,
+   * just before the parser sends the endDoc event, it will also send this
+   * event which will provide the attributes from the effective body tag
+   * to the client (the handler).
+   */
+  effectiveBodyTag(attributes) {}
+};
+exports.HtmlSaxHandler = HtmlSaxHandler;
+
+
+/**
+ * An interface for determining the line/column information for SAX events that
+ * are being received by a `HtmlSaxHandler`. Please see
+ * the `HtmlSaxHandler#setDocLocator` method.
+ */
+const DocLocator = class {
+  constructor() {}
+
+  /**
+   * The current line in the HTML source from which the most recent SAX event
+   * was generated. This value is only sensible once an event has been
+   * generated, that is, in practice from within the context of the
+   * HtmlSaxHandler methods - e.g., startTag, pcdata, etc.
+   * @return {number} line The current line.
+   */
+  getLine() {}
+
+  /**
+   * The current column in the HTML source from which the most recent SAX event
+   * was generated. This value is only sensible once an event has been
+   * generated, that is, in practice from within the context of the
+   * HtmlSaxHandler methods - e.g., startTag, pcdata, etc.
+   * @return {number} line The current column.
+   */
+  getCol() {}
+
+  /**
+   * The size of the document in bytes.
+   * @return {number}.
+   */
+  getDocByteSize() {}
+};
+exports.DocLocator = DocLocator;
+
+
+/**
+ * Handler with a setDocLocator method in addition to the parser callbacks.
+ * @extends {HtmlSaxHandler}
+ */
+const HtmlSaxHandlerWithLocation = class extends HtmlSaxHandler {
+  constructor() {
+    super();
+  }
+
+  /**
+   * Called prior to parsing a document, that is, before `startTag`.
+   * @param {!DocLocator} locator A locator instance which
+   *   provides access to the line/column information while SAX events
+   *   are being received by the handler.
+   */
+  setDocLocator(locator) {}
+};
+exports.HtmlSaxHandlerWithLocation = HtmlSaxHandlerWithLocation;
diff --git a/validator/engine/htmlparser.js b/validator/js/engine/htmlparser.js
similarity index 97%
rename from validator/engine/htmlparser.js
rename to validator/js/engine/htmlparser.js
index cf9cd6c48c768..f98dde7970e2c 100644
--- a/validator/engine/htmlparser.js
+++ b/validator/js/engine/htmlparser.js
@@ -141,6 +141,24 @@ const TagRegion = {
   // We don't track the region after the closing body tag.
 };
 
+/**
+ * Computes the byte length, rather than character length, of a utf8 string.
+ * https://en.wikipedia.org/wiki/UTF-8
+ * @param {string} utf8Str
+ * @return {number}
+ */
+const byteLength = function byteLength(utf8Str) {
+  // To figure out which characters are multi-byte we can abuse
+  // encodeURIComponent which will escape those specific characters.
+  const multiByteEscapedChars = encodeURIComponent(utf8Str).match(/%[89ABab]/g);
+  if (multiByteEscapedChars === null) {
+    return utf8Str.length;
+  } else {
+    return utf8Str.length + multiByteEscapedChars.length;
+  }
+};
+exports.byteLength = byteLength;
+
 /**
  * This abstraction keeps track of which tags have been opened / closed as we
  * traverse the tags in the document. Closing tags is tricky:
@@ -1032,6 +1050,7 @@ const DocLocatorImpl = class extends parserInterface.DocLocator {
         ++currentCol;
       }
     }
+    this.docByteSize_ = byteLength(htmlText);
 
     // The current position in the htmlText.
     this.pos_ = 0;
@@ -1085,6 +1104,14 @@ const DocLocatorImpl = class extends parserInterface.DocLocator {
   getCol() {
     return this.col_;
   }
+
+  /**
+   * @inheritDoc
+   * @this {DocLocatorImpl}
+   */
+  getDocByteSize() {
+    return this.docByteSize_;
+  }
 };
 
 /**
diff --git a/validator/engine/htmlparser_test.js b/validator/js/engine/htmlparser_test.js
similarity index 100%
rename from validator/engine/htmlparser_test.js
rename to validator/js/engine/htmlparser_test.js
diff --git a/validator/engine/json-testutil.js b/validator/js/engine/json-testutil.js
similarity index 100%
rename from validator/engine/json-testutil.js
rename to validator/js/engine/json-testutil.js
diff --git a/validator/engine/keyframes-parse-css.js b/validator/js/engine/keyframes-parse-css.js
similarity index 100%
rename from validator/engine/keyframes-parse-css.js
rename to validator/js/engine/keyframes-parse-css.js
diff --git a/validator/engine/keyframes-parse-css_test.js b/validator/js/engine/keyframes-parse-css_test.js
similarity index 100%
rename from validator/engine/keyframes-parse-css_test.js
rename to validator/js/engine/keyframes-parse-css_test.js
diff --git a/validator/engine/parse-css.js b/validator/js/engine/parse-css.js
similarity index 99%
rename from validator/engine/parse-css.js
rename to validator/js/engine/parse-css.js
index 16d38d9342d29..8675513a548e9 100644
--- a/validator/engine/parse-css.js
+++ b/validator/js/engine/parse-css.js
@@ -353,7 +353,8 @@ const Declaration = class extends Rule {
 
   /**
    * For a declaration, if the first non-whitespace token is an identifier,
-   * returns its string value. Otherwise, returns the empty string.
+   * (including a number token type), returns its string value. Otherwise,
+   * returns the empty string.
    * @return {string}
    */
   firstIdent() {
@@ -364,11 +365,18 @@ const Declaration = class extends Rule {
       return /** @type {!tokenize_css.StringValuedToken} */ (this.value[0])
           .value;
     }
+    if (this.value[0].tokenType === tokenize_css.TokenType.NUMBER) {
+      return /** @type {!tokenize_css.NumberToken} */ (this.value[0]).repr;
+    }
     if (this.value.length >= 2 &&
-        (this.value[0].tokenType === tokenize_css.TokenType.WHITESPACE) &&
-        this.value[1].tokenType === tokenize_css.TokenType.IDENT) {
-      return /** @type {!tokenize_css.StringValuedToken} */ (this.value[1])
-          .value;
+        (this.value[0].tokenType === tokenize_css.TokenType.WHITESPACE)) {
+      if (this.value[1].tokenType === tokenize_css.TokenType.IDENT) {
+        return /** @type {!tokenize_css.StringValuedToken} */ (this.value[1])
+            .value;
+      }
+      if (this.value[1].tokenType === tokenize_css.TokenType.NUMBER) {
+        return /** @type {!tokenize_css.NumberToken} */ (this.value[1]).repr;
+      }
     }
     return '';
   }
@@ -1426,8 +1434,10 @@ const SelectorVisitor = class extends RuleVisitor {
     const tokenStream = new TokenStream(qualifiedRule.prelude);
     tokenStream.consume();
     const maybeSelector = parseASelectorsGroup(tokenStream);
-    if (maybeSelector instanceof tokenize_css.ErrorToken)
+    if (maybeSelector instanceof tokenize_css.ErrorToken) {
       this.errors_.push(maybeSelector);
+      return;
+    }
 
     /** @type {!Array<!Selector>} */
     const toVisit = [maybeSelector];
@@ -1841,6 +1851,8 @@ const PseudoSelector = class extends Selector {
     visitor.visitPseudoSelector(this);
   }
 };
+exports.PseudoSelector = PseudoSelector;
+
 /** @inheritDoc */
 PseudoSelector.prototype.toJSON = function() {
   const json = Selector.prototype.toJSON.call(this);
diff --git a/validator/engine/parse-css_test.js b/validator/js/engine/parse-css_test.js
similarity index 99%
rename from validator/engine/parse-css_test.js
rename to validator/js/engine/parse-css_test.js
index 3857de703152d..35afe0facc0d5 100644
--- a/validator/engine/parse-css_test.js
+++ b/validator/js/engine/parse-css_test.js
@@ -1857,6 +1857,19 @@ describe('css_selectors', () => {
         selector);
   });
 
+  it('records one selector parsing error', () => {
+    const css = '/*error*/ {}';
+    const errors = [];
+    const tokenlist = tokenize_css.tokenize(css, 1, 0, errors);
+    const sheet = parse_css.parseAStylesheet(
+        tokenlist, ampAtRuleParsingSpec, parse_css.BlockType.PARSE_AS_IGNORE,
+        errors);
+    assertStrictEqual(0, errors.length);
+    const visitor = new parse_css.SelectorVisitor(errors);
+    sheet.accept(visitor);
+    assertStrictEqual(1, errors.length);
+  });
+
   it('implements visitor pattern', () => {
     class CollectCombinatorNodes extends parse_css.SelectorVisitor {
       constructor() {
@@ -1884,6 +1897,7 @@ describe('css_selectors', () => {
         errors);
     const visitor = new CollectCombinatorNodes();
     sheet.accept(visitor);
+    assertStrictEqual(0, errors.length);
     assertStrictEqual(4, visitor.combinatorNodes.length);
     assertStrictEqual(
         'GENERAL_SIBLING', visitor.combinatorNodes[0].combinatorType);
diff --git a/validator/engine/parse-srcset.js b/validator/js/engine/parse-srcset.js
similarity index 85%
rename from validator/engine/parse-srcset.js
rename to validator/js/engine/parse-srcset.js
index 9b8b00545f28a..704a91ba4f9ae 100644
--- a/validator/engine/parse-srcset.js
+++ b/validator/js/engine/parse-srcset.js
@@ -69,14 +69,23 @@ const parseSrcset = function(srcset) {
   // more spaces + a non empty string containing no space or commas).
   // Doesn't capture the initial space.
   //
-  // \s*                       Match, but don't capture leading spaces
+  // \s*                       Match, but don't capture leading spaces.
   // (?:,\s*)?                 Optionally match comma and trailing space,
   //                           but don't capture comma.
   // ([^,\s]\S*[^,\s])         Match something like "google.com/favicon.ico"
-  //                           but not ",google.com/favicon.ico,"
+  //                           but not ",google.com/favicon.ico,".
   // \s*                       Match, but dont capture spaces.
-  // ([\d]+.?[\d]*[w|x])?      e.g. "5w" or "5x" or "10.2x"
-  // \s*                       Match, but don't capture space
+  // (                         Match the width or density descriptor...
+  //   [1-9]\d*[wx]            which is a non-zero integer followed by a w
+  //                           or an x ...
+  //   |                       or ...
+  //   [1-9]\d*\.\d+x          a decimal with its whole-number part greater
+  //                           than zero and followed by an x ...
+  //   |                       or ...
+  //   0\.\d*[1-9]\d*x         a decimal with its fractional part greater
+  //                           than zero and followed by an x ...
+  // )?                        and make it optional.
+  // \s*                       Match, but don't capture space.
   // (?:(,)\s*)?               Optionally match comma and trailing space,
   //                           capturing comma.
   const imageCandidateRegex = new RegExp(
@@ -84,7 +93,13 @@ const parseSrcset = function(srcset) {
           '(?:,\\s*)?' +
           '([^,\\s]\\S*[^,\\s])' +
           '\\s*' +
-          '([\\d]+.?[\\d]*[w|x])?' +
+          '(' +
+              '[1-9]\\d*[wx]' +
+              '|' +
+              '[1-9]\\d*\\.\\d+x' +
+              '|' +
+              '0\\.\\d*[1-9]\\d*x' +
+          ')?' +
           '\\s*' +
           '(?:(,)\\s*)?',
       'g');
diff --git a/validator/engine/parse-srcset_test.js b/validator/js/engine/parse-srcset_test.js
similarity index 87%
rename from validator/engine/parse-srcset_test.js
rename to validator/js/engine/parse-srcset_test.js
index da72d70fe1c6e..d133c88fdb16f 100644
--- a/validator/engine/parse-srcset_test.js
+++ b/validator/js/engine/parse-srcset_test.js
@@ -16,7 +16,7 @@
  *
  *  Credits:
  *    Original version of this file was derived from
- *    https://github.com/ampproject/amphtml/blob/master/test/unit/test-srcset.js
+ *    https://github.com/ampproject/amphtml/blob/main/test/unit/test-srcset.js
  */
 goog.module('parse_srcset.ParseSrcsetTest');
 
@@ -246,6 +246,21 @@ describe('Srcset parseSrcset', () => {
     expect(result.success).toBe(false);
   });
 
+  it('should reject width or pixel density that are zero', () => {
+    let result = parse_srcset.parseSrcset('image.png 0x');
+
+    expect(result.success).toBe(false);
+    result = parse_srcset.parseSrcset('image.png 1x, image2.png 0.0x');
+
+    expect(result.success).toBe(false);
+    result = parse_srcset.parseSrcset('image.png 0w');
+
+    expect(result.success).toBe(false);
+    result = parse_srcset.parseSrcset('image.png 1x, image2.png 000w');
+
+    expect(result.success).toBe(false);
+  });
+
   it('should reject empty srcsets', () => {
     let result = parse_srcset.parseSrcset('');
 
@@ -266,4 +281,28 @@ describe('Srcset parseSrcset', () => {
 
     expect(result.success).toBe(false);
   });
+
+  it('should reject decimal values for widths', () => {
+    let result = parse_srcset.parseSrcset('image.png 500.0w');
+
+    expect(result.success).toBe(false);
+    result = parse_srcset.parseSrcset('image.png 1.5w');
+
+    expect(result.success).toBe(false);
+    result = parse_srcset.parseSrcset('image.png 0.1w');
+
+    expect(result.success).toBe(false);
+  });
+
+  it('should reject pixel values or other invalid dimensions', () => {
+    let result = parse_srcset.parseSrcset('image.png 500px');
+
+    expect(result.success).toBe(false);
+    result = parse_srcset.parseSrcset('image.png 2 x');
+
+    expect(result.success).toBe(false);
+    result = parse_srcset.parseSrcset('image.png 1kw');
+
+    expect(result.success).toBe(false);
+  });
 });
diff --git a/validator/engine/parse-url.js b/validator/js/engine/parse-url.js
similarity index 98%
rename from validator/engine/parse-url.js
rename to validator/js/engine/parse-url.js
index 74697d6ca7ef4..52de81402e4fe 100644
--- a/validator/engine/parse-url.js
+++ b/validator/js/engine/parse-url.js
@@ -160,8 +160,6 @@ const URL = class {
     this.protocol = '';  // Guaranteed to be lower case.
     /** @type {string} */
     this.defaultProtocol = 'https';  // Must be set to a lower case value.
-    /** @type {string} */
-    this.schemeSpecificPart = '';
     /** @type {boolean} */
     this./*OK*/ startsWithDoubleSlash = false;
     // The hostname will be hex-unescaped and isValid will be set to false if
@@ -258,9 +256,6 @@ const URL = class {
 
     if (this.protocol != 'http' && this.protocol != 'https' &&
         this.protocol != 'ftp' && this.protocol != 'sftp') {
-      // For protocols like "foo:bar", we don't parse up the part after the
-      // protocol, we just record it, eg "bar".
-      this.schemeSpecificPart = unparsed;
       unparsed = '';
     }
     return unparsed;
diff --git a/validator/engine/parse-url_test.js b/validator/js/engine/parse-url_test.js
similarity index 99%
rename from validator/engine/parse-url_test.js
rename to validator/js/engine/parse-url_test.js
index 0f7a3446af121..6f6a1cc4167f6 100644
--- a/validator/engine/parse-url_test.js
+++ b/validator/js/engine/parse-url_test.js
@@ -94,8 +94,6 @@ describe('parse_url', () => {
     const url = new parse_url.URL(urlString);
     assertStrictEqual(true, url.hasProtocol);
     assertStrictEqual('whatsapp', url.protocol);
-    assertStrictEqual(
-        'i have no idea what this should contain', url.schemeSpecificPart);
   });
 
   it('parses basic login', () => {
diff --git a/validator/engine/tokenize-css.js b/validator/js/engine/tokenize-css.js
similarity index 100%
rename from validator/engine/tokenize-css.js
rename to validator/js/engine/tokenize-css.js
diff --git a/validator/engine/validator-in-browser.js b/validator/js/engine/validator-in-browser.js
similarity index 98%
rename from validator/engine/validator-in-browser.js
rename to validator/js/engine/validator-in-browser.js
index f96bb9b64f796..4a1ed88606547 100644
--- a/validator/engine/validator-in-browser.js
+++ b/validator/js/engine/validator-in-browser.js
@@ -80,7 +80,7 @@ goog.exportSymbol('amp.validator.validateInBrowser', validateInBrowser);
 /**
  * Validates a URL input, logging to the console the result.
  * Careful when modifying this; it's called from
- * https://github.com/ampproject/amphtml/blob/master/src/validator-integration.js
+ * https://github.com/ampproject/amphtml/blob/main/src/validator-integration.js
  *
  * WARNING: This is exported; interface changes may break downstream users like
  * https://www.npmjs.com/package/amphtml-validator and
diff --git a/validator/engine/validator.js b/validator/js/engine/validator.js
similarity index 87%
rename from validator/engine/validator.js
rename to validator/js/engine/validator.js
index f51b0cb3e3747..35cdec3b43b49 100644
--- a/validator/engine/validator.js
+++ b/validator/js/engine/validator.js
@@ -334,8 +334,8 @@ class ParsedAttrSpec {
 }
 
 /**
- * For creating error messages, we either find the specName in the tag spec or
- * fall back to the tagName.
+ * For uniquely identifying a tag spec, we either find the specName in the tag
+ * spec or fall back to the tagName.
  * @param {!generated.TagSpec} tagSpec generated.TagSpec instance from the
  *   validator.protoscii file.
  * @return {string}
@@ -346,6 +346,19 @@ function getTagSpecName(tagSpec) {
                                        tagSpec.tagName.toLowerCase();
 }
 
+/**
+ * For creating error messages, we either find the descriptiveName in the tag
+ * spec or fall back to the tagName.
+ * @param {!generated.TagSpec} tagSpec generated.TagSpec instance from the
+ *   validator.protoscii file.
+ * @return {string}
+ * @private
+ */
+function getTagDescriptiveName(tagSpec) {
+  return (tagSpec.descriptiveName !== null) ? tagSpec.descriptiveName :
+                                              tagSpec.tagName.toLowerCase();
+}
+
 /**
  * For creating error URLs, we either find the specUrl in the tag spec or fall
  * back to the extension spec URL if available.
@@ -453,6 +466,38 @@ class ParsedReferencePoints {
   }
 }
 
+/**
+ * Wrapper around DocSpec.
+ * @private
+ */
+class ParsedDocSpec {
+  /**
+   * @param {!generated.DocSpec} spec
+   */
+  constructor(spec) {
+    /**
+     * @type {!generated.DocSpec}
+     * @private
+     */
+    this.spec_ = spec;
+  }
+
+  /** @return {!generated.DocSpec} */
+  spec() {
+    return this.spec_;
+  }
+
+  /** @return {!Array<string>} */
+  disabledBy() {
+    return this.spec_.disabledBy;
+  }
+
+  /** @return {!Array<string>} */
+  enabledBy() {
+    return this.spec_.enabledBy;
+  }
+}
+
 /**
  * Wrapper around DocCssSpec.
  * @private
@@ -810,6 +855,35 @@ class ParsedTagSpec {
     sortAndUniquify(this.mandatoryOneofs_);
     sortAndUniquify(this.mandatoryAnyofs_);
     sortAndUniquify(this.mandatoryAttrIds_);
+
+    /**
+     * @type {!Array<string>}
+     * @private
+     */
+    this.dispatchKeys_ = [];
+    for (const attrName of Object.keys(this.attrsByName_)) {
+      const attrId = this.attrsByName_[attrName];
+      if (attrId < 0)  // negative attr ids are simple attrs (only name set).
+        continue;
+      const parsedAttrSpec = parsedAttrSpecs.getByAttrSpecId(attrId);
+      const attrSpec = parsedAttrSpec.getSpec();
+      if (attrSpec.dispatchKey !== null) {
+        const mandatoryParent =
+            tagSpec.mandatoryParent !== null ? tagSpec.mandatoryParent : '';
+        if (attrSpec.value.length > 0) {
+          this.dispatchKeys_.push(makeDispatchKey(
+              attrSpec.dispatchKey, attrName, attrSpec.value[0].toLowerCase(),
+              mandatoryParent));
+        } else if (attrSpec.valueCasei.length > 0) {
+          this.dispatchKeys_.push(makeDispatchKey(
+              attrSpec.dispatchKey, attrName, attrSpec.valueCasei[0],
+              mandatoryParent));
+        } else {
+          this.dispatchKeys_.push(makeDispatchKey(
+              attrSpec.dispatchKey, attrName, '', mandatoryParent));
+        }
+      }
+    }
   }
 
   /**
@@ -847,7 +921,7 @@ class ParsedTagSpec {
       }
       if (spec.name === 'type' && spec.valueCasei.length > 0) {
         for (const v of spec.valueCasei) {
-          if ('application/json' === v) {
+          if (('application/json' === v) || ('application/ld+json' === v)) {
             this.isTypeJson_ = true;
             break;
           }
@@ -945,6 +1019,23 @@ class ParsedTagSpec {
         typeIdentifiers, this.spec_.enabledBy, this.spec_.disabledBy);
   }
 
+  /**
+   * Returns an array (typically empty) of all unique dispatch keys for this
+   * tagspec. A dispatch key is a combination of attribute name, attribute
+   * value, and / or tag parent. If multiple TagSpecs have the same dispatch
+   * key, then the Tagwith the first instance of that dispatch key is used.
+   * When an encounttag matches this dispatch key, it is validated first
+   * against that first TagSpec in order to improve validation performance and
+   * error message selection. Not all TagSpecs have a dispatch key. If the
+   * attribute value is used (either value or value_casei), uses the first
+   * value from the protoascii.
+   * @return {!Array<string>}
+   */
+  GetDispatchKeys() {
+    return this.dispatchKeys_;
+  }
+
+
   /**
    * A TagSpec may specify other tags to be required as well, when that
    * tag is used. This accessor returns the IDs for the tagspecs that
@@ -1142,7 +1233,7 @@ class ChildTagMatcher {
             /* params */
             [
               encounteredTag.lowerName(),
-              getTagSpecName(this.parentSpec_),
+              getTagDescriptiveName(this.parentSpec_),
               allowedNames.toLowerCase(),
             ],
             getTagSpecUrl(this.parentSpec_), result);
@@ -1162,7 +1253,7 @@ class ChildTagMatcher {
             /* params */
             [
               encounteredTag.lowerName(),
-              getTagSpecName(this.parentSpec_),
+              getTagDescriptiveName(this.parentSpec_),
               allowedNames.toLowerCase(),
             ],
             getTagSpecUrl(this.parentSpec_), result);
@@ -1184,7 +1275,7 @@ class ChildTagMatcher {
           this.getLineCol(),
           /* params */
           [
-            getTagSpecName(this.parentSpec_),
+            getTagDescriptiveName(this.parentSpec_),
             expectedNumChildTags.toString(),
             context.getTagStack().parentChildCount().toString(),
           ],
@@ -1201,7 +1292,7 @@ class ChildTagMatcher {
           this.getLineCol(),
           /* params */
           [
-            getTagSpecName(this.parentSpec_),
+            getTagDescriptiveName(this.parentSpec_),
             expectedMinNumChildTags.toString(),
             context.getTagStack().parentChildCount().toString(),
           ],
@@ -1948,7 +2039,14 @@ class TagStack {
  */
 function isAtRuleValid(cssSpec, atRuleName) {
   for (const atRuleSpec of cssSpec.atRuleSpec) {
-    if (atRuleSpec.name === parse_css.stripVendorPrefix(atRuleName)) {
+    // "-moz-document" is specified in the list of allowed rules with an
+    // explicit vendor prefix. The idea here is that only this specific vendor
+    // prefix is allowed, not "-ms-document" or even "document". We first
+    // search the allowed list for the seen `at_rule_name` with stripped
+    // vendor prefix, then if not found, we search again without sripping the
+    // vendor prefix.
+    if (atRuleSpec.name === parse_css.stripVendorPrefix(atRuleName) ||
+        atRuleSpec.name === atRuleName) {
       return true;
     }
   }
@@ -2007,7 +2105,7 @@ class InvalidRuleVisitor extends parse_css.RuleVisitor {
       this.context.addError(
           generated.ValidationError.Code.CSS_SYNTAX_INVALID_AT_RULE,
           new LineCol(atRule.line, atRule.col),
-          /* params */[getTagSpecName(this.tagSpec), atRule.name],
+          /* params */[getTagDescriptiveName(this.tagSpec), atRule.name],
           /* url */ '', this.result);
     }
   }
@@ -2020,7 +2118,8 @@ class InvalidRuleVisitor extends parse_css.RuleVisitor {
         this.context.addError(
             generated.ValidationError.Code.CSS_SYNTAX_INVALID_PROPERTY_NOLIST,
             new LineCol(declaration.line, declaration.col),
-            /* params */[getTagSpecName(this.tagSpec), declaration.name],
+            /* params */
+            [getTagDescriptiveName(this.tagSpec), declaration.name],
             /* url */ '', this.result);
 
       } else {
@@ -2029,7 +2128,7 @@ class InvalidRuleVisitor extends parse_css.RuleVisitor {
             new LineCol(declaration.line, declaration.col),
             /* params */
             [
-              getTagSpecName(this.tagSpec),
+              getTagDescriptiveName(this.tagSpec),
               declaration.name,
               AllowedDeclarationsString(this.cssSpec),
             ],
@@ -2042,28 +2141,62 @@ class InvalidRuleVisitor extends parse_css.RuleVisitor {
 /** @private */
 class InvalidDeclVisitor extends parse_css.RuleVisitor {
   /**
-   * @param {!ParsedDocCssSpec} spec
+   * @param {!ParsedDocCssSpec} cssSpec
    * @param {!Context} context
+   * @param {string} tagDescriptiveName
    * @param {!generated.ValidationResult} result
    */
-  constructor(spec, context, result) {
+  constructor(cssSpec, context, tagDescriptiveName, result) {
     super();
     /** @type {!ParsedDocCssSpec} */
-    this.spec = spec;
+    this.cssSpec = cssSpec;
     /** @type {!Context} */
     this.context = context;
+    /** @type {string} */
+    this.tagDescriptiveName = tagDescriptiveName;
     /** @type {!generated.ValidationResult} */
     this.result = result;
   }
 
   /** @inheritDoc */
   visitDeclaration(declaration) {
-    if (!this.spec.cssDeclarationByName(declaration.name)) {
+    const cssDeclaration = this.cssSpec.cssDeclarationByName(declaration.name);
+    const firstIdent = declaration.firstIdent();
+    const lineCol = new LineCol(declaration.line, declaration.col);
+    if (!cssDeclaration) {
       this.context.addError(
           generated.ValidationError.Code.CSS_SYNTAX_INVALID_PROPERTY_NOLIST,
-          new LineCol(declaration.line, declaration.col),
-          ['style amp-custom', declaration.name], this.spec.spec().specUrl,
-          this.result);
+          lineCol, [this.tagDescriptiveName, declaration.name],
+          this.cssSpec.spec().specUrl, this.result);
+      // Don't emit additional errors for this declaration
+      return;
+    }
+    if (cssDeclaration.valueCasei.length > 0) {
+      let hasValidValue = false;
+      for (const value of cssDeclaration.valueCasei) {
+        if (firstIdent.toLowerCase() == value) {
+          hasValidValue = true;
+          break;
+        }
+      }
+      if (!hasValidValue) {
+        // Declaration value not allowed.
+        this.context.addError(
+            generated.ValidationError.Code.CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
+            lineCol, /* params */
+            [this.tagDescriptiveName, declaration.name, firstIdent],
+            this.cssSpec.spec().specUrl, this.result);
+      }
+    } else if (cssDeclaration.valueRegexCasei != null) {
+      const valueRegex = this.context.getRules().getFullMatchCaseiRegex(
+          /** @type {number} */ (cssDeclaration.valueRegexCasei));
+      if (!valueRegex.test(firstIdent)) {
+        this.context.addError(
+            generated.ValidationError.Code.CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
+            lineCol, /* params */
+            [this.tagDescriptiveName, declaration.name, firstIdent],
+            this.cssSpec.spec().specUrl, this.result);
+      }
     }
   }
 }
@@ -2086,6 +2219,7 @@ function GenCssParsingConfig() {
   ampAtRuleParsingSpec['media'] = parse_css.BlockType.PARSE_AS_RULES;
   ampAtRuleParsingSpec['page'] = parse_css.BlockType.PARSE_AS_DECLARATIONS;
   ampAtRuleParsingSpec['supports'] = parse_css.BlockType.PARSE_AS_RULES;
+  ampAtRuleParsingSpec['-moz-document'] = parse_css.BlockType.PARSE_AS_RULES;
   const config = {
     atRuleSpec: ampAtRuleParsingSpec,
     defaultSpec: parse_css.BlockType.PARSE_AS_IGNORE,
@@ -2122,6 +2256,35 @@ const SelectorSpecVisitor = class extends parse_css.SelectorVisitor {
     attrSelector.copyPosTo(errorToken);
     this.errorBuffer_.push(errorToken);
   }
+
+  /**
+   * @override
+   * @param {!parse_css.PseudoSelector} selector
+   */
+  visitPseudoSelector(selector) {
+    if (selector.isClass) {  // pseudo-class
+      for (const allowedPseudoClass of this.selectorSpec_.pseudoClass) {
+        if (allowedPseudoClass === '*' || allowedPseudoClass === selector.name)
+          return;
+      }
+      const errorToken = new tokenize_css.ErrorToken(
+          generated.ValidationError.Code.CSS_SYNTAX_DISALLOWED_PSEUDO_CLASS,
+          ['', selector.name]);
+      selector.copyPosTo(errorToken);
+      this.errorBuffer_.push(errorToken);
+    } else {  // pseudo-element
+      for (const allowedPseudoElement of this.selectorSpec_.pseudoElement) {
+        if (allowedPseudoElement === '*' ||
+            allowedPseudoElement === selector.name)
+          return;
+      }
+      const errorToken = new tokenize_css.ErrorToken(
+          generated.ValidationError.Code.CSS_SYNTAX_DISALLOWED_PSEUDO_ELEMENT,
+          ['', selector.name]);
+      selector.copyPosTo(errorToken);
+      this.errorBuffer_.push(errorToken);
+    }
+  }
 };
 
 /**
@@ -2177,7 +2340,7 @@ class CdataMatcher {
         context.addError(
             generated.ValidationError.Code.MANDATORY_CDATA_MISSING_OR_INCORRECT,
             context.getLineCol(),
-            /* params */[getTagSpecName(this.tagSpec_)],
+            /* params */[getTagDescriptiveName(this.tagSpec_)],
             getTagSpecUrl(this.tagSpec_), validationResult);
       }
       // We return early if the cdata has an exact match rule. The
@@ -2190,7 +2353,7 @@ class CdataMatcher {
         context.addError(
             generated.ValidationError.Code.MANDATORY_CDATA_MISSING_OR_INCORRECT,
             context.getLineCol(),
-            /* params */[getTagSpecName(this.tagSpec_)],
+            /* params */[getTagDescriptiveName(this.tagSpec_)],
             getTagSpecUrl(this.tagSpec_), validationResult);
         return;
       }
@@ -2204,7 +2367,7 @@ class CdataMatcher {
         context.addError(
             generated.ValidationError.Code.NON_WHITESPACE_CDATA_ENCOUNTERED,
             context.getLineCol(),
-            /* params */[getTagSpecName(this.tagSpec_)],
+            /* params */[getTagDescriptiveName(this.tagSpec_)],
             getTagSpecUrl(this.tagSpec_), validationResult);
       }
     }
@@ -2213,23 +2376,36 @@ class CdataMatcher {
     const maybeDocCssSpec = context.matchingDocCssSpec();
 
     /** @type {number} */
-    let adjustedCdataLength = byteLength(cdata);
+    let adjustedCdataLength = htmlparser.byteLength(cdata);
     if (maybeDocCssSpec !== null && !maybeDocCssSpec.spec().urlBytesIncluded) {
       adjustedCdataLength -= urlBytes;
     }
 
     // Max CDATA Byte Length, specific to this CDATA (not the document limit).
     if (cdataSpec.maxBytes !== -2 && adjustedCdataLength > cdataSpec.maxBytes) {
-      context.addError(
-          generated.ValidationError.Code.STYLESHEET_TOO_LONG,
-          context.getLineCol(),
-          /* params */
-          [
-            getTagSpecName(this.tagSpec_),
-            adjustedCdataLength.toString(),
-            cdataSpec.maxBytes.toString(),
-          ],
-          cdataSpec.maxBytesSpecUrl, validationResult);
+      if (this.tagSpec_.tagName == 'SCRIPT') {
+        context.addError(
+            generated.ValidationError.Code.INLINE_SCRIPT_TOO_LONG,
+            context.getLineCol(),
+            /* params */
+            [
+              adjustedCdataLength.toString(),
+              cdataSpec.maxBytes.toString(),
+            ],
+            cdataSpec.maxBytesSpecUrl, validationResult);
+
+      } else {
+        context.addError(
+            generated.ValidationError.Code.STYLESHEET_TOO_LONG,
+            context.getLineCol(),
+            /* params */
+            [
+              getTagDescriptiveName(this.tagSpec_),
+              adjustedCdataLength.toString(),
+              cdataSpec.maxBytes.toString(),
+            ],
+            cdataSpec.maxBytesSpecUrl, validationResult);
+      }
       return;
     }
 
@@ -2257,7 +2433,7 @@ class CdataMatcher {
             generated.ValidationError.Code.CDATA_VIOLATES_DENYLIST,
             context.getLineCol(),
             /* params */
-            [getTagSpecName(this.tagSpec_), denylist.errorMessage],
+            [getTagDescriptiveName(this.tagSpec_), denylist.errorMessage],
             getTagSpecUrl(this.tagSpec_), validationResult);
       }
     }
@@ -2381,7 +2557,7 @@ class CdataMatcher {
       // Override the first parameter with the name of this style tag.
       const {params} = errorToken;
       // Override the first parameter with the name of this style tag.
-      params[0] = getTagSpecName(this.tagSpec_);
+      params[0] = getTagDescriptiveName(this.tagSpec_);
       context.addError(
           errorToken.code, new LineCol(errorToken.line, errorToken.col), params,
           /* url */ '', validationResult);
@@ -2390,8 +2566,8 @@ class CdataMatcher {
       // Override the first parameter with the name of this style tag.
       const {params} = errorToken;
       // Override the first parameter with the name of this style tag.
-      params[0] = getTagSpecName(this.tagSpec_);
-      context.addError(
+      params[0] = getTagDescriptiveName(this.tagSpec_);
+      context.addWarning(
           errorToken.code, new LineCol(errorToken.line, errorToken.col), params,
           /* url */ '', validationResult);
     }
@@ -2403,11 +2579,10 @@ class CdataMatcher {
       parse_css.extractImportantDeclarations(stylesheet, important);
       for (const decl of important) {
         context.addError(
-            generated.ValidationError.Code.CDATA_VIOLATES_DENYLIST,
+            generated.ValidationError.Code.CSS_SYNTAX_DISALLOWED_IMPORTANT,
             new LineCol(decl.important_line, decl.important_col),
-            /* params */
-            [getTagSpecName(this.tagSpec_), 'CSS !important'],
-            getTagSpecUrl(this.tagSpec_), validationResult);
+            /* params */[], context.getRules().getStylesSpecUrl(),
+            validationResult);
       }
     }
 
@@ -2418,7 +2593,7 @@ class CdataMatcher {
       // but data URLs are always counted (or in other words, they aren't
       // considered URLs).
       if (!isDataUrl(url.utf8Url)) {
-        urlBytes += byteLength(url.utf8Url);
+        urlBytes += htmlparser.byteLength(url.utf8Url);
       }
       if (maybeDocCssSpec !== null) {
         const adapter = new UrlErrorInStylesheetAdapter(url.line, url.col);
@@ -2436,9 +2611,10 @@ class CdataMatcher {
 
     // Validate the allowed CSS declarations (eg: `background-color`)
     if (maybeDocCssSpec !== null &&
-        !maybeDocCssSpec.spec().allowAllDeclarationInStyleTag) {
-      const invalidDeclVisitor =
-          new InvalidDeclVisitor(maybeDocCssSpec, context, validationResult);
+        !maybeDocCssSpec.spec().allowAllDeclarationInStyle) {
+      const invalidDeclVisitor = new InvalidDeclVisitor(
+          maybeDocCssSpec, context, getTagDescriptiveName(this.tagSpec_),
+          validationResult);
       stylesheet.accept(invalidDeclVisitor);
     }
 
@@ -2529,7 +2705,7 @@ class ExtensionsContext {
         const error = new generated.ValidationError();
         error.severity = generated.ValidationError.Severity.ERROR;
         error.code = generated.ValidationError.Code.MISSING_REQUIRED_EXTENSION;
-        error.params = [getTagSpecName(tagSpec), requiredExtension];
+        error.params = [getTagDescriptiveName(tagSpec), requiredExtension];
         error.line = lineCol.getLine();
         error.col = lineCol.getCol();
         error.specUrl = getTagSpecUrl(tagSpec);
@@ -2628,86 +2804,19 @@ class ExtensionsContext {
   }
 }
 
-// If any script in the page uses LTS, all scripts must use LTS. This is used
-// to record when a script is seen and validate following script tags.
+// If any script in the page uses a specific release version, then all scripts
+// must use that specific release version. This is used to record the first
+// seen script tag and ensure all following script tags follow the convention
+// set by it.
 /** @enum {string} */
 const ScriptReleaseVersion = {
-  UNKNOWN: 'UNKNOWN',
-  STANDARD: 'STANDARD',
+  UNKNOWN: 'unknown',
+  STANDARD: 'standard',
   LTS: 'LTS',
+  MODULE_NOMODULE: 'module/nomodule',
+  MODULE_NOMODULE_LTS: 'module/nomodule LTS',
 };
 
-/**
- * Gets the name attribute for an extension script tag.
- * @param {!parserInterface.ParsedHtmlTag} tag
- * @return {string}
- */
-function ExtensionScriptNameAttribute(tag) {
-  if (tag.upperName() == 'SCRIPT') {
-    for (const attribute
-             of ['custom-element', 'custom-template', 'host-service']) {
-      if (attribute in tag.attrsByKey()) {
-        return attribute;
-      }
-    }
-  }
-  return '';
-}
-
-/**
- * Gets the extension name for an extension script tag.
- * @param {!parserInterface.ParsedHtmlTag} tag
- * @return {string}
- */
-function ExtensionScriptName(tag) {
-  const nameAttr = ExtensionScriptNameAttribute(tag);
-  if (nameAttr) {
-    // Extension script names are required to be in lowercase by the
-    // validator, so we don't need to lowercase them here.
-    return tag.attrsByKey()[nameAttr] || '';
-  }
-  return '';
-}
-
-/**
- * Tests if a tag is an extension script tag.
- * @param {!parserInterface.ParsedHtmlTag} tag
- * @return {boolean}
- */
-function IsExtensionScript(tag) {
-  return !!ExtensionScriptNameAttribute(tag);
-}
-
-/**
- * Tests if a tag is an async script tag.
- * @param {!parserInterface.ParsedHtmlTag} tag
- * @return {boolean}
- */
-function IsAsyncScriptTag(tag) {
-  return tag.upperName() == 'SCRIPT' && 'async' in tag.attrsByKey() &&
-      'src' in tag.attrsByKey();
-}
-
-/**
- * Tests if a tag is the AMP runtime script tag.
- * @param {!parserInterface.ParsedHtmlTag} tag
- * @return {boolean}
- */
-function IsAmpRuntimeScript(tag) {
-  const src = tag.attrsByKey()['src'] || '';
-  return IsAsyncScriptTag(tag) && !IsExtensionScript(tag) &&
-      src.startsWith('https://cdn.ampproject.org/') && src.endsWith('/v0.js');
-}
-
-/**
- * Tests if a URL is for the LTS version of a script.
- * @param {string} url
- * @return {boolean}
- */
-function IsLtsScriptUrl(url) {
-  return url.startsWith('https://cdn.ampproject.org/lts/');
-}
-
 /**
  * The Context keeps track of the line / column that the validator is
  * in, as well as the mandatory tag specs that have already been validated.
@@ -2840,6 +2949,14 @@ class Context {
     this.docLocator_ = locator;
   }
 
+  /**
+   * Returns the document size from the document locator.
+   * @return {number}
+   */
+  getDocByteSize() {
+    return this.docLocator_.getDocByteSize();
+  }
+
   /** @return {!LineCol} */
   getLineCol() {
     return new LineCol(this.docLocator_.getLine(), this.docLocator_.getCol());
@@ -2946,16 +3063,12 @@ class Context {
   /**
    * Record if this document contains a tag requesting the LTS runtime engine.
    * @param {!parserInterface.ParsedHtmlTag} parsedTag
-   * @param {!generated.ValidationResult} result
    * @private
    */
-  recordScriptReleaseVersionFromTagResult_(parsedTag, result) {
+  recordScriptReleaseVersionFromTagResult_(parsedTag) {
     if (this.getScriptReleaseVersion() === ScriptReleaseVersion.UNKNOWN &&
-        (IsExtensionScript(parsedTag) || IsAmpRuntimeScript(parsedTag))) {
-      const src = parsedTag.attrsByKey()['src'] || '';
-      this.scriptReleaseVersion_ = IsLtsScriptUrl(src) ?
-          ScriptReleaseVersion.LTS :
-          ScriptReleaseVersion.STANDARD;
+        (parsedTag.isExtensionScript() || parsedTag.isAmpRuntimeScript())) {
+      this.scriptReleaseVersion_ = getScriptReleaseVersion(parsedTag);
     }
   }
 
@@ -2984,8 +3097,7 @@ class Context {
     this.recordAttrRequiresExtension_(encounteredTag, tagResult);
     this.updateFromTagResult_(referencePointResult);
     this.updateFromTagResult_(tagResult);
-    this.recordScriptReleaseVersionFromTagResult_(
-        encounteredTag, tagResult.validationResult);
+    this.recordScriptReleaseVersionFromTagResult_(encounteredTag);
     this.addInlineStyleByteSize(tagResult.inlineStyleCssBytes);
   }
 
@@ -3146,6 +3258,37 @@ class Context {
     return this.typeIdentifiers_;
   }
 
+  /**
+   * Returns true iff `spec` should be used for the type identifiers recorded
+   * in this context, as seen in the document so far. If called before type
+   * identifiers have been recorded, will always return false.
+   * @param {!ParsedDocSpec} spec
+   * @return {boolean}
+   */
+  isDocSpecValidForTypeIdentifiers(spec) {
+    return isUsedForTypeIdentifiers(
+        this.getTypeIdentifiers(), spec.enabledBy(), spec.disabledBy());
+  }
+
+  /**
+   * Returns the first (there should be at most one) DocSpec which matches
+   * both the html format and type identifiers recorded so far in this
+   * context. If called before identifiers have been recorded, it may return
+   * an incorrect selection.
+   * @return {?ParsedDocSpec}
+   */
+  matchingDocSpec() {
+    // The specs are usually already filtered by HTML format, so this loop
+    // should be very short, often 1:
+    for (const spec of this.rules_.getDoc()) {
+      if (this.rules_.isDocSpecCorrectHtmlFormat_(spec.spec()) &&
+          this.isDocSpecValidForTypeIdentifiers(spec)) {
+        return spec;
+      }
+    }
+    return null;
+  }
+
   /**
    * Returns true iff `spec` should be used for the type identifiers recorded
    * in this context, as seen in the document so far. If called before type
@@ -3290,7 +3433,8 @@ class UrlErrorInStylesheetAdapter {
   missingUrl(context, tagSpec, result) {
     context.addError(
         generated.ValidationError.Code.CSS_SYNTAX_MISSING_URL, this.lineCol_,
-        /* params */[getTagSpecName(tagSpec)], getTagSpecUrl(tagSpec), result);
+        /* params */[getTagDescriptiveName(tagSpec)], getTagSpecUrl(tagSpec),
+        result);
   }
 
   /**
@@ -3302,8 +3446,8 @@ class UrlErrorInStylesheetAdapter {
   invalidUrl(context, url, tagSpec, result) {
     context.addError(
         generated.ValidationError.Code.CSS_SYNTAX_INVALID_URL, this.lineCol_,
-        /* params */[getTagSpecName(tagSpec), url], getTagSpecUrl(tagSpec),
-        result);
+        /* params */[getTagDescriptiveName(tagSpec), url],
+        getTagSpecUrl(tagSpec), result);
   }
 
   /**
@@ -3316,8 +3460,8 @@ class UrlErrorInStylesheetAdapter {
     context.addError(
         generated.ValidationError.Code.CSS_SYNTAX_INVALID_URL_PROTOCOL,
         this.lineCol_,
-        /* params */[getTagSpecName(tagSpec), protocol], getTagSpecUrl(tagSpec),
-        result);
+        /* params */[getTagDescriptiveName(tagSpec), protocol],
+        getTagSpecUrl(tagSpec), result);
   }
 
   /**
@@ -3330,8 +3474,8 @@ class UrlErrorInStylesheetAdapter {
     context.addError(
         generated.ValidationError.Code.CSS_SYNTAX_DISALLOWED_RELATIVE_URL,
         this.lineCol_,
-        /* params */[getTagSpecName(tagSpec), url], getTagSpecUrl(tagSpec),
-        result);
+        /* params */[getTagDescriptiveName(tagSpec), url],
+        getTagSpecUrl(tagSpec), result);
   }
 }
 
@@ -3352,7 +3496,7 @@ class UrlErrorInAttrAdapter {
   missingUrl(context, tagSpec, result) {
     context.addError(
         generated.ValidationError.Code.MISSING_URL, context.getLineCol(),
-        /* params */[this.attrName_, getTagSpecName(tagSpec)],
+        /* params */[this.attrName_, getTagDescriptiveName(tagSpec)],
         getTagSpecUrl(tagSpec), result);
   }
 
@@ -3365,7 +3509,7 @@ class UrlErrorInAttrAdapter {
   invalidUrl(context, url, tagSpec, result) {
     context.addError(
         generated.ValidationError.Code.INVALID_URL, context.getLineCol(),
-        /* params */[this.attrName_, getTagSpecName(tagSpec), url],
+        /* params */[this.attrName_, getTagDescriptiveName(tagSpec), url],
         getTagSpecUrl(tagSpec), result);
   }
 
@@ -3379,7 +3523,8 @@ class UrlErrorInAttrAdapter {
     context.addError(
         generated.ValidationError.Code.INVALID_URL_PROTOCOL,
         context.getLineCol(),
-        /* params */[this.attrName_, getTagSpecName(tagSpec), protocol],
+        /* params */
+        [this.attrName_, getTagDescriptiveName(tagSpec), protocol],
         getTagSpecUrl(tagSpec), result);
   }
 
@@ -3393,7 +3538,7 @@ class UrlErrorInAttrAdapter {
     context.addError(
         generated.ValidationError.Code.DISALLOWED_RELATIVE_URL,
         context.getLineCol(),
-        /* params */[this.attrName_, getTagSpecName(tagSpec), url],
+        /* params */[this.attrName_, getTagDescriptiveName(tagSpec), url],
         getTagSpecUrl(tagSpec), result);
   }
 }
@@ -3415,7 +3560,7 @@ function validateAttrValueUrl(parsedAttrSpec, context, attr, tagSpec, result) {
     if (attr.value === '') {
       context.addError(
           generated.ValidationError.Code.MISSING_URL, context.getLineCol(),
-          /* params */[attr.name, getTagSpecName(tagSpec)],
+          /* params */[attr.name, getTagDescriptiveName(tagSpec)],
           getTagSpecUrl(tagSpec), result);
       return;
     }
@@ -3428,12 +3573,13 @@ function validateAttrValueUrl(parsedAttrSpec, context, attr, tagSpec, result) {
           generated.ValidationError.Code.DUPLICATE_DIMENSION) {
         context.addError(
             parseResult.errorCode, context.getLineCol(),
-            /* params */[attr.name, getTagSpecName(tagSpec)],
+            /* params */[attr.name, getTagDescriptiveName(tagSpec)],
             getTagSpecUrl(tagSpec), result);
       } else {
         context.addError(
             parseResult.errorCode, context.getLineCol(),
-            /* params */[attr.name, getTagSpecName(tagSpec), attr.value],
+            /* params */
+            [attr.name, getTagDescriptiveName(tagSpec), attr.value],
             getTagSpecUrl(tagSpec), result);
       }
       return;
@@ -3447,7 +3593,7 @@ function validateAttrValueUrl(parsedAttrSpec, context, attr, tagSpec, result) {
   if (maybeUris.length === 0) {
     context.addError(
         generated.ValidationError.Code.MISSING_URL, context.getLineCol(),
-        /* params */[attr.name, getTagSpecName(tagSpec)],
+        /* params */[attr.name, getTagDescriptiveName(tagSpec)],
         getTagSpecUrl(tagSpec), result);
     return;
   }
@@ -3565,7 +3711,7 @@ function validateAttrValueProperties(
       context.addError(
           generated.ValidationError.Code.DISALLOWED_PROPERTY_IN_ATTR_VALUE,
           context.getLineCol(),
-          /* params */[name, attr.name, getTagSpecName(tagSpec)],
+          /* params */[name, attr.name, getTagDescriptiveName(tagSpec)],
           getTagSpecUrl(tagSpec), result);
       continue;
     }
@@ -3575,7 +3721,8 @@ function validateAttrValueProperties(
         context.addError(
             generated.ValidationError.Code.INVALID_PROPERTY_VALUE_IN_ATTR_VALUE,
             context.getLineCol(),
-            /* params */[name, attr.name, getTagSpecName(tagSpec), value],
+            /* params */
+            [name, attr.name, getTagDescriptiveName(tagSpec), value],
             getTagSpecUrl(tagSpec), result);
       }
     } else if (propertySpec.valueDouble !== null) {
@@ -3583,7 +3730,8 @@ function validateAttrValueProperties(
         context.addError(
             generated.ValidationError.Code.INVALID_PROPERTY_VALUE_IN_ATTR_VALUE,
             context.getLineCol(),
-            /* params */[name, attr.name, getTagSpecName(tagSpec), value],
+            /* params */
+            [name, attr.name, getTagDescriptiveName(tagSpec), value],
             getTagSpecUrl(tagSpec), result);
       }
     }
@@ -3595,7 +3743,7 @@ function validateAttrValueProperties(
         generated.ValidationError.Code
             .MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE,
         context.getLineCol(),
-        /* params */[name, attr.name, getTagSpecName(tagSpec)],
+        /* params */[name, attr.name, getTagDescriptiveName(tagSpec)],
         getTagSpecUrl(tagSpec), result);
   }
 }
@@ -3630,7 +3778,7 @@ function validateNonTemplateAttrValueAgainstSpec(
     requirement.errorIfUnsatisfied = populateError(
         generated.ValidationError.Severity.ERROR,
         generated.ValidationError.Code.VALUE_SET_MISMATCH, context.getLineCol(),
-        /* params */[attr.name, getTagSpecName(tagSpec)],
+        /* params */[attr.name, getTagDescriptiveName(tagSpec)],
         getTagSpecUrl(tagSpec));
     result.valueSetRequirements.push(requirement);
   }
@@ -3642,7 +3790,7 @@ function validateNonTemplateAttrValueAgainstSpec(
     }
     context.addError(
         generated.ValidationError.Code.INVALID_ATTR_VALUE, context.getLineCol(),
-        /* params */[attr.name, getTagSpecName(tagSpec), attr.value],
+        /* params */[attr.name, getTagDescriptiveName(tagSpec), attr.value],
         getTagSpecUrl(tagSpec), result);
   } else if (spec.valueCasei.length > 0) {
     for (const value of spec.valueCasei) {
@@ -3652,7 +3800,7 @@ function validateNonTemplateAttrValueAgainstSpec(
     }
     context.addError(
         generated.ValidationError.Code.INVALID_ATTR_VALUE, context.getLineCol(),
-        /* params */[attr.name, getTagSpecName(tagSpec), attr.value],
+        /* params */[attr.name, getTagDescriptiveName(tagSpec), attr.value],
         getTagSpecUrl(tagSpec), result);
   } else if (spec.valueRegex !== null || spec.valueRegexCasei !== null) {
     const valueRegex = (spec.valueRegex !== null) ?
@@ -3663,7 +3811,7 @@ function validateNonTemplateAttrValueAgainstSpec(
       context.addError(
           generated.ValidationError.Code.INVALID_ATTR_VALUE,
           context.getLineCol(),
-          /* params */[attr.name, getTagSpecName(tagSpec), attr.value],
+          /* params */[attr.name, getTagDescriptiveName(tagSpec), attr.value],
           getTagSpecUrl(tagSpec), result);
     }
   } else if (spec.valueUrl !== null) {
@@ -3703,6 +3851,13 @@ function getLayoutSizeDefinedClass() {
   return 'i-amphtml-layout-size-defined';
 }
 
+/**
+ * @return {string}
+ */
+function getLayoutAwaitingSizeClass() {
+  return "i-amphtml-layout-awaiting-size";
+}
+
 /**
  * @param {!generated.AmpLayout.Layout} layout
  * @return {boolean}
@@ -3718,6 +3873,14 @@ function isLayoutSizeDefined(layout) {
       layout === generated.AmpLayout.Layout.RESPONSIVE);
 }
 
+/**
+ * @param {!generated.AmpLayout.Layout} layout
+ * @return {boolean}
+ */
+function isLayoutAwaitingSize(layout) {
+  return layout === generated.AmpLayout.Layout.FLUID;
+}
+
 /**
  * @param {string} layout
  * @return {!generated.AmpLayout.Layout}
@@ -3726,8 +3889,9 @@ function parseLayout(layout) {
   if (layout === undefined) {
     return generated.AmpLayout.Layout.UNKNOWN;
   }
-  const normLayout = layout.toUpperCase().replace('-', '_');
-  const idx = generated.AmpLayout.Layout_NamesByIndex.indexOf(normLayout);
+  const idx = generated.AmpLayout.Layout_NamesByIndex.findIndex((name) => {
+    return name.toLowerCase().replace('_', '-') === layout;
+  });
   if (idx === -1) {
     return generated.AmpLayout.Layout.UNKNOWN;
   }
@@ -4014,7 +4178,7 @@ function validateParentTag(parsedTagSpec, context, validationResult) {
         generated.ValidationError.Code.WRONG_PARENT_TAG, context.getLineCol(),
         /* params */
         [
-          getTagSpecName(spec),
+          getTagDescriptiveName(spec),
           context.getTagStack().parentTagName().toLowerCase(),
           spec.mandatoryParent.toLowerCase(),
         ],
@@ -4125,7 +4289,7 @@ function validateRequiredExtensions(parsedTagSpec, context, validationResult) {
           generated.ValidationError.Code.MISSING_REQUIRED_EXTENSION,
           context.getLineCol(),
           /* params */
-          [getTagSpecName(parsedTagSpec.getSpec()), requiredExtension],
+          [getTagDescriptiveName(parsedTagSpec.getSpec()), requiredExtension],
           getTagSpecUrl(parsedTagSpec), validationResult);
     }
   }
@@ -4168,8 +4332,8 @@ function validateUniqueness(parsedTagSpec, context, validationResult) {
     context.addError(
         generated.ValidationError.Code.DUPLICATE_UNIQUE_TAG,
         context.getLineCol(),
-        /* params */[getTagSpecName(tagSpec)], getTagSpecUrl(parsedTagSpec),
-        validationResult);
+        /* params */[getTagDescriptiveName(tagSpec)],
+        getTagSpecUrl(parsedTagSpec), validationResult);
   }
 }
 
@@ -4195,7 +4359,7 @@ function checkForReferencePointCollision(
       context.getLineCol(),
       /* params */
       [
-        getTagSpecName(tagSpec.getSpec()),
+        getTagDescriptiveName(tagSpec.getSpec()),
         refPointSpec.getReferencePoints().parentTagSpecName(),
       ],
       refPointSpec.getReferencePoints().parentSpecUrl(), validationResult);
@@ -4218,7 +4382,7 @@ function validateAncestorTags(parsedTagSpec, context, validationResult) {
             context.getLineCol(),
             /* params */
             [
-              getTagSpecName(spec),
+              getTagDescriptiveName(spec),
               mandatoryAncestor.toLowerCase(),
               spec.mandatoryAncestorSuggestedAlternative.toLowerCase(),
             ],
@@ -4228,7 +4392,7 @@ function validateAncestorTags(parsedTagSpec, context, validationResult) {
             generated.ValidationError.Code.MANDATORY_TAG_ANCESTOR,
             context.getLineCol(),
             /* params */
-            [getTagSpecName(spec), mandatoryAncestor.toLowerCase()],
+            [getTagDescriptiveName(spec), mandatoryAncestor.toLowerCase()],
             getTagSpecUrl(spec), validationResult);
       }
       return;
@@ -4240,7 +4404,7 @@ function validateAncestorTags(parsedTagSpec, context, validationResult) {
           generated.ValidationError.Code.DISALLOWED_TAG_ANCESTOR,
           context.getLineCol(),
           /* params */
-          [getTagSpecName(spec), disallowedAncestor.toLowerCase()],
+          [getTagDescriptiveName(spec), disallowedAncestor.toLowerCase()],
           getTagSpecUrl(spec), validationResult);
       return;
     }
@@ -4290,14 +4454,18 @@ function validateSsrLayout(
       // i-amphtml-layout-size-defined
       validInternalClasses[getLayoutSizeDefinedClass()] = 0;
     }
+    if (isLayoutAwaitingSize(layout)) {
+      // i-amphtml-layout-awaiting-size
+      validInternalClasses[getLayoutAwaitingSizeClass()] = 0;
+    }
     const classes = classAttr.split(/[\s+]/);
-    for (const classValue of classes) {
-      if (googString./*OK*/ startsWith(classValue, 'i-amphtml-') &&
-          !(classValue in validInternalClasses)) {
+    for (const classToken of classes) {
+      if (googString./*OK*/ startsWith(classToken, 'i-amphtml-') &&
+          !(classToken in validInternalClasses)) {
         context.addError(
             generated.ValidationError.Code.INVALID_ATTR_VALUE,
             context.getLineCol(),
-            /* params */['class', getTagSpecName(spec), classAttr],
+            /* params */['class', getTagDescriptiveName(spec), classAttr],
             getTagSpecUrl(spec), result);
       }
     }
@@ -4315,7 +4483,7 @@ function validateSsrLayout(
           [
             ssrAttr,
             'i-amphtml-layout',
-            getTagSpecName(spec),
+            getTagDescriptiveName(spec),
             layoutName.toUpperCase(),
             layoutName,
           ],
@@ -4361,7 +4529,7 @@ function validateLayout(parsedTagSpec, context, encounteredTag, result) {
       inputLayout === generated.AmpLayout.Layout.UNKNOWN) {
     context.addError(
         generated.ValidationError.Code.INVALID_ATTR_VALUE, context.getLineCol(),
-        /* params */['layout', getTagSpecName(spec), layoutAttr],
+        /* params */['layout', getTagDescriptiveName(spec), layoutAttr],
         getTagSpecUrl(spec), result);
     return;
   }
@@ -4371,7 +4539,7 @@ function validateLayout(parsedTagSpec, context, encounteredTag, result) {
   if (!inputWidth.isValid) {
     context.addError(
         generated.ValidationError.Code.INVALID_ATTR_VALUE, context.getLineCol(),
-        /* params */['width', getTagSpecName(spec), widthAttr],
+        /* params */['width', getTagDescriptiveName(spec), widthAttr],
         getTagSpecUrl(spec), result);
     return;
   }
@@ -4381,7 +4549,7 @@ function validateLayout(parsedTagSpec, context, encounteredTag, result) {
   if (!inputHeight.isValid) {
     context.addError(
         generated.ValidationError.Code.INVALID_ATTR_VALUE, context.getLineCol(),
-        /* params */['height', getTagSpecName(spec), heightAttr],
+        /* params */['height', getTagDescriptiveName(spec), heightAttr],
         getTagSpecUrl(spec), result);
     return;
   }
@@ -4401,7 +4569,7 @@ function validateLayout(parsedTagSpec, context, encounteredTag, result) {
   if (height.isAuto && layout !== generated.AmpLayout.Layout.FLEX_ITEM) {
     context.addError(
         generated.ValidationError.Code.INVALID_ATTR_VALUE, context.getLineCol(),
-        /* params */['height', getTagSpecName(spec), heightAttr],
+        /* params */['height', getTagDescriptiveName(spec), heightAttr],
         getTagSpecUrl(spec), result);
     return;
   }
@@ -4425,12 +4593,13 @@ function validateLayout(parsedTagSpec, context, encounteredTag, result) {
       context.addError(
           generated.ValidationError.Code.MISSING_LAYOUT_ATTRIBUTES,
           context.getLineCol(),
-          /*params=*/[getTagSpecName(spec)], getTagSpecUrl(spec), result);
+          /*params=*/[getTagDescriptiveName(spec)], getTagSpecUrl(spec),
+          result);
       return;
     }
     context.addError(
         code, context.getLineCol(),
-        /* params */[layout, getTagSpecName(spec)], getTagSpecUrl(spec),
+        /* params */[layout, getTagDescriptiveName(spec)], getTagSpecUrl(spec),
         result);
     return;
   }
@@ -4443,8 +4612,8 @@ function validateLayout(parsedTagSpec, context, encounteredTag, result) {
     context.addError(
         generated.ValidationError.Code.MANDATORY_ATTR_MISSING,
         context.getLineCol(),
-        /* params */['height', getTagSpecName(spec)], getTagSpecUrl(spec),
-        result);
+        /* params */['height', getTagDescriptiveName(spec)],
+        getTagSpecUrl(spec), result);
     return;
   }
   // For FIXED_HEIGHT if width is set it must be auto.
@@ -4454,7 +4623,10 @@ function validateLayout(parsedTagSpec, context, encounteredTag, result) {
         generated.ValidationError.Code.ATTR_VALUE_REQUIRED_BY_LAYOUT,
         context.getLineCol(),
         /* params */
-        [widthAttr, 'width', getTagSpecName(spec), 'FIXED_HEIGHT', 'auto'],
+        [
+          widthAttr, 'width', getTagDescriptiveName(spec), 'FIXED_HEIGHT',
+          'auto'
+        ],
         getTagSpecUrl(spec), result);
     return;
   }
@@ -4466,14 +4638,14 @@ function validateLayout(parsedTagSpec, context, encounteredTag, result) {
       context.addError(
           generated.ValidationError.Code.MANDATORY_ATTR_MISSING,
           context.getLineCol(),
-          /* params */['width', getTagSpecName(spec)], getTagSpecUrl(spec),
-          result);
+          /* params */['width', getTagDescriptiveName(spec)],
+          getTagSpecUrl(spec), result);
       return;
     } else if (width.isAuto) {
       context.addError(
           generated.ValidationError.Code.INVALID_ATTR_VALUE,
           context.getLineCol(),
-          /* params */['width', getTagSpecName(spec), 'auto'],
+          /* params */['width', getTagDescriptiveName(spec), 'auto'],
           getTagSpecUrl(spec), result);
       return;
     }
@@ -4485,7 +4657,7 @@ function validateLayout(parsedTagSpec, context, encounteredTag, result) {
     context.addError(
         generated.ValidationError.Code.INCONSISTENT_UNITS_FOR_WIDTH_AND_HEIGHT,
         context.getLineCol(),
-        /* params */[getTagSpecName(spec), width.unit, height.unit],
+        /* params */[getTagDescriptiveName(spec), width.unit, height.unit],
         getTagSpecUrl(spec), result);
     return;
   }
@@ -4497,7 +4669,7 @@ function validateLayout(parsedTagSpec, context, encounteredTag, result) {
         generated.ValidationError.Code.ATTR_DISALLOWED_BY_SPECIFIED_LAYOUT;
     context.addError(
         code, context.getLineCol(),
-        /* params */['heights', getTagSpecName(spec), layout],
+        /* params */['heights', getTagDescriptiveName(spec), layout],
         getTagSpecUrl(spec), result);
     return;
   }
@@ -4535,12 +4707,14 @@ function validateAttrNotFoundInSpec(parsedTagSpec, context, attrName, result) {
     context.addError(
         generated.ValidationError.Code.TEMPLATE_IN_ATTR_NAME,
         context.getLineCol(),
-        /* params */[attrName, getTagSpecName(parsedTagSpec.getSpec())],
+        /* params */
+        [attrName, getTagDescriptiveName(parsedTagSpec.getSpec())],
         context.getRules().getTemplateSpecUrl(), result);
   } else {
     context.addError(
         generated.ValidationError.Code.DISALLOWED_ATTR, context.getLineCol(),
-        /* params */[attrName, getTagSpecName(parsedTagSpec.getSpec())],
+        /* params */
+        [attrName, getTagDescriptiveName(parsedTagSpec.getSpec())],
         getTagSpecUrl(parsedTagSpec), result);
   }
 }
@@ -4559,14 +4733,14 @@ function validateAttrValueBelowTemplateTag(
     context.addError(
         generated.ValidationError.Code.UNESCAPED_TEMPLATE_IN_ATTR_VALUE,
         context.getLineCol(),
-        /* params */[attr.name, getTagSpecName(spec), attr.value],
+        /* params */[attr.name, getTagDescriptiveName(spec), attr.value],
         context.getRules().getTemplateSpecUrl(), result);
   } else if (attrValueHasPartialsTemplateSyntax(attr.value)) {
     const spec = parsedTagSpec.getSpec();
     context.addError(
         generated.ValidationError.Code.TEMPLATE_PARTIAL_IN_ATTR_VALUE,
         context.getLineCol(),
-        /* params */[attr.name, getTagSpecName(spec), attr.value],
+        /* params */[attr.name, getTagDescriptiveName(spec), attr.value],
         context.getRules().getTemplateSpecUrl(), result);
   }
 }
@@ -4601,7 +4775,7 @@ function getExtensionNameAttribute(extensionSpec) {
  * @param {!generated.ValidationResult} result
  * @return {boolean}
  */
-function validateAttributeInExtension(tagSpec, context, attr, result) {
+function validateAttrInExtension(tagSpec, context, attr, result) {
   asserts.assert(tagSpec.extensionSpec !== null);
 
   const {extensionSpec} = tagSpec;
@@ -4620,7 +4794,7 @@ function validateAttributeInExtension(tagSpec, context, attr, result) {
     return true;
   } else if (attr.name === 'src') {
     const srcUrlRe =
-        /^https:\/\/cdn\.ampproject\.org(?:\/lts)?\/v0\/(amp-[a-z0-9-]*)-([a-z0-9.]*)\.js$/;
+        /^https:\/\/cdn\.ampproject\.org(?:\/lts)?\/v0\/(amp-[a-z0-9-]*)-([a-z0-9.]*)\.(?:m)?js(?:\?f=sxg)?$/;
     const reResult = srcUrlRe.exec(attr.value);
     // If the src URL matches this regex and the base name of the file matches
     // the extension, look to see if the version matches.
@@ -4640,42 +4814,107 @@ function validateAttributeInExtension(tagSpec, context, attr, result) {
     }
     context.addError(
         generated.ValidationError.Code.INVALID_ATTR_VALUE, context.getLineCol(),
-        /* params */[attr.name, getTagSpecName(tagSpec), attr.value],
+        /* params */[attr.name, getTagDescriptiveName(tagSpec), attr.value],
         getTagSpecUrl(tagSpec), result);
     return true;
   }
   return false;
 }
 
+/**
+ * Validates that the reserved `i-amphtml-` prefix is not used in a class
+ * token.
+ * @param {!parserInterface.ParsedAttr} attr
+ * @param {!generated.TagSpec} tagSpec
+ * @param {!Context} context
+ * @param {!generated.ValidationResult} result
+ */
+function validateClassAttr(attr, tagSpec, context, result) {
+  const re = /(^|[\t\n\f\r ])i-amphtml-/;
+  if (re.test(attr.value)) {
+    context.addError(
+        generated.ValidationError.Code.INVALID_ATTR_VALUE, context.getLineCol(),
+        /* params */[attr.name, getTagDescriptiveName(tagSpec), attr.value],
+        'https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/#disallowed-styles',
+        result);
+  }
+}
+
+/**
+ * @param {!parserInterface.ParsedHtmlTag} tag
+ * @return {!ScriptReleaseVersion}
+ */
+function getScriptReleaseVersion(tag) {
+  if (tag.isModuleLtsScriptTag() || tag.isNomoduleLtsScriptTag())
+    return ScriptReleaseVersion.MODULE_NOMODULE_LTS;
+  if (tag.isModuleScriptTag() || tag.isNomoduleScriptTag())
+    return ScriptReleaseVersion.MODULE_NOMODULE;
+  if (tag.isLtsScriptTag()) return ScriptReleaseVersion.LTS;
+  return ScriptReleaseVersion.STANDARD;
+}
+
 /**
  * Validates that LTS is used for either all script sources or none.
- * @param {!parserInterface.ParsedAttr} srcAttr
+ * @param {!parserInterface.ParsedHtmlTag} tag
  * @param {!generated.TagSpec} tagSpec
  * @param {!Context} context
  * @param {!generated.ValidationResult} result
  */
-function validateScriptSrcAttr(srcAttr, tagSpec, context, result) {
+function validateScriptSrcAttr(tag, tagSpec, context, result) {
   if (context.getScriptReleaseVersion() === ScriptReleaseVersion.UNKNOWN)
     return;
 
-  const scriptReleaseVersion = IsLtsScriptUrl(srcAttr.value) ?
-      ScriptReleaseVersion.LTS :
-      ScriptReleaseVersion.STANDARD;
+  const scriptReleaseVersion = getScriptReleaseVersion(tag);
 
   if (context.getScriptReleaseVersion() != scriptReleaseVersion) {
     const specName = tagSpec.extensionSpec !== null ?
         tagSpec.extensionSpec.name :
         tagSpec.specName;
-    context.addError(
-        scriptReleaseVersion == ScriptReleaseVersion.LTS ?
-            generated.ValidationError.Code.LTS_SCRIPT_AFTER_NON_LTS :
-            generated.ValidationError.Code.NON_LTS_SCRIPT_AFTER_LTS,
-        context.getLineCol(),
-        /*params=*/[specName],
 
-        'https://amp.dev/documentation/guides-and-tutorials/learn/spec/' +
-            'amphtml#required-markup',
-        result);
+    switch (context.getScriptReleaseVersion()) {
+      case ScriptReleaseVersion.LTS:
+        context.addError(
+            generated.ValidationError.Code.INCORRECT_SCRIPT_RELEASE_VERSION,
+            context.getLineCol(),
+            /*params=*/
+            [specName, scriptReleaseVersion, context.getScriptReleaseVersion()],
+            'https://amp.dev/documentation/guides-and-tutorials/learn/spec/' +
+                'amphtml#required-markup',
+            result);
+        break;
+      case ScriptReleaseVersion.MODULE_NOMODULE:
+        context.addError(
+            generated.ValidationError.Code.INCORRECT_SCRIPT_RELEASE_VERSION,
+            context.getLineCol(),
+            /*params=*/
+            [specName, scriptReleaseVersion, context.getScriptReleaseVersion()],
+            'https://amp.dev/documentation/guides-and-tutorials/learn/spec/' +
+                'amphtml#required-markup',
+            result);
+        break;
+      case ScriptReleaseVersion.MODULE_NOMODULE_LTS:
+        context.addError(
+            generated.ValidationError.Code.INCORRECT_SCRIPT_RELEASE_VERSION,
+            context.getLineCol(),
+            /*params=*/
+            [specName, scriptReleaseVersion, context.getScriptReleaseVersion()],
+            'https://amp.dev/documentation/guides-and-tutorials/learn/spec/' +
+                'amphtml#required-markup',
+            result);
+        break;
+      case ScriptReleaseVersion.STANDARD:
+        context.addError(
+            generated.ValidationError.Code.INCORRECT_SCRIPT_RELEASE_VERSION,
+            context.getLineCol(),
+            /*params=*/
+            [specName, scriptReleaseVersion, context.getScriptReleaseVersion()],
+            'https://amp.dev/documentation/guides-and-tutorials/learn/spec/' +
+                'amphtml#required-markup',
+            result);
+        break;
+      default:
+        break;
+    }
   }
 }
 
@@ -4691,7 +4930,7 @@ function validateScriptSrcAttr(srcAttr, tagSpec, context, result) {
 function validateAttrCss(
     parsedAttrSpec, context, tagSpec, attrName, attrValue, result) {
   /** @type {number} */
-  const attrByteLen = byteLength(attrValue);
+  const attrByteLen = htmlparser.byteLength(attrValue);
   // Track the number of CSS bytes. If this tagspec is selected as the best
   // match, this count will be added to the overall document inline style byte
   // count for determining if that byte count has been exceeded.
@@ -4720,7 +4959,7 @@ function validateAttrCss(
     // Override the first parameter with the name of this style tag.
     const {params} = errorToken;
     // Override the first parameter with the name of this style tag.
-    params[0] = getTagSpecName(tagSpec);
+    params[0] = getTagDescriptiveName(tagSpec);
     context.addError(
         errorToken.code, context.getLineCol(), params, /* url */ '',
         result.validationResult);
@@ -4732,30 +4971,30 @@ function validateAttrCss(
   }
 
   /** @type {?ParsedDocCssSpec} */
-  const maybeSpec = context.matchingDocCssSpec();
-  if (maybeSpec) {
+  const maybeDocCssSpec = context.matchingDocCssSpec();
+  if (maybeDocCssSpec !== null) {
     // Determine if we've exceeded the maximum bytes per inline style
     // requirements.
-    if (maybeSpec.spec().maxBytesPerInlineStyle >= 0 &&
-        attrByteLen > maybeSpec.spec().maxBytesPerInlineStyle) {
-      if (maybeSpec.spec().maxBytesIsWarning) {
+    if (maybeDocCssSpec.spec().maxBytesPerInlineStyle >= 0 &&
+        attrByteLen > maybeDocCssSpec.spec().maxBytesPerInlineStyle) {
+      if (maybeDocCssSpec.spec().maxBytesIsWarning) {
         context.addWarning(
             generated.ValidationError.Code.INLINE_STYLE_TOO_LONG,
             context.getLineCol(), /* params */
             [
-              getTagSpecName(tagSpec), attrByteLen.toString(),
-              maybeSpec.spec().maxBytesPerInlineStyle.toString()
+              getTagDescriptiveName(tagSpec), attrByteLen.toString(),
+              maybeDocCssSpec.spec().maxBytesPerInlineStyle.toString()
             ],
-            maybeSpec.spec().maxBytesSpecUrl, result.validationResult);
+            maybeDocCssSpec.spec().maxBytesSpecUrl, result.validationResult);
       } else {
         context.addError(
             generated.ValidationError.Code.INLINE_STYLE_TOO_LONG,
             context.getLineCol(), /* params */
             [
-              getTagSpecName(tagSpec), attrByteLen.toString(),
-              maybeSpec.spec().maxBytesPerInlineStyle.toString()
+              getTagDescriptiveName(tagSpec), attrByteLen.toString(),
+              maybeDocCssSpec.spec().maxBytesPerInlineStyle.toString()
             ],
-            maybeSpec.spec().maxBytesSpecUrl, result.validationResult);
+            maybeDocCssSpec.spec().maxBytesSpecUrl, result.validationResult);
       }
     }
 
@@ -4763,49 +5002,69 @@ function validateAttrCss(
     // in the allowed list for this DocCssSpec, and have allowed values if
     // relevant.
     for (const declaration of declarations) {
-      // Allowed declarations vary by context. SVG has its own set of CSS
-      // declarations not supported generally in HTML.
-      const cssDeclaration = parsedAttrSpec.getSpec().valueDocSvgCss === true ?
-          maybeSpec.cssDeclarationSvgByName(declaration.name) :
-          maybeSpec.cssDeclarationByName(declaration.name);
-      // If there is no matching declaration in the rules, then this
-      // declaration is not allowed.
-      if (cssDeclaration === null) {
+      const firstIdent = declaration.firstIdent();
+      // Validate declarations only when they are not all allowed.
+      if (!maybeDocCssSpec.spec().allowAllDeclarationInStyle) {
+        // Allowed declarations vary by context. SVG has its own set of CSS
+        // declarations not supported generally in HTML.
+        const cssDeclaration =
+            parsedAttrSpec.getSpec().valueDocSvgCss === true ?
+            maybeDocCssSpec.cssDeclarationSvgByName(declaration.name) :
+            maybeDocCssSpec.cssDeclarationByName(declaration.name);
+        // If there is no matching declaration in the rules, then this
+        // declaration is not allowed.
+        if (cssDeclaration === null) {
+          context.addError(
+              generated.ValidationError.Code.DISALLOWED_PROPERTY_IN_ATTR_VALUE,
+              context.getLineCol(), /* params */
+              [declaration.name, attrName, getTagDescriptiveName(tagSpec)],
+              context.getRules().getStylesSpecUrl(), result.validationResult);
+          // Don't emit additional errors for this declaration.
+          continue;
+        } else if (cssDeclaration.valueCasei.length > 0) {
+          let hasValidValue = false;
+          for (const value of cssDeclaration.valueCasei) {
+            if (firstIdent.toLowerCase() == value) {
+              hasValidValue = true;
+              break;
+            }
+          }
+          if (!hasValidValue) {
+            // Declaration value not allowed.
+            context.addError(
+                generated.ValidationError.Code
+                    .CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
+                context.getLineCol(), /* params */
+                [getTagDescriptiveName(tagSpec), declaration.name, firstIdent],
+                context.getRules().getStylesSpecUrl(), result.validationResult);
+          }
+        } else if (cssDeclaration.valueRegexCasei != null) {
+          const valueRegex = context.getRules().getFullMatchCaseiRegex(
+              /** @type {number} */ (cssDeclaration.valueRegexCasei));
+          if (!valueRegex.test(firstIdent)) {
+            context.addError(
+                generated.ValidationError.Code
+                    .CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
+                context.getLineCol(), /* params */
+                [getTagDescriptiveName(tagSpec), declaration.name, firstIdent],
+                context.getRules().getStylesSpecUrl(), result.validationResult);
+          }
+        }
+      }
+      if (declaration.name.indexOf('i-amphtml-') > -1) {
         context.addError(
             generated.ValidationError.Code.DISALLOWED_PROPERTY_IN_ATTR_VALUE,
             context.getLineCol(), /* params */
-            [declaration.name, attrName, getTagSpecName(tagSpec)],
+            [declaration.name, attrName, getTagDescriptiveName(tagSpec)],
             context.getRules().getStylesSpecUrl(), result.validationResult);
         // Don't emit additional errors for this declaration.
         continue;
-      } else if (cssDeclaration.valueCasei.length > 0) {
-        let hasValidValue = false;
-        const firstIdent = declaration.firstIdent();
-        for (const value of cssDeclaration.valueCasei) {
-          if (firstIdent.toLowerCase() == value) {
-            hasValidValue = true;
-            break;
-          }
-        }
-        if (!hasValidValue) {
-          // Declaration value not allowed.
-          context.addError(
-              generated.ValidationError.Code
-                  .CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
-              context.getLineCol(), /* params */
-              [getTagSpecName(tagSpec), declaration.name, firstIdent],
-              context.getRules().getStylesSpecUrl(), result.validationResult);
-        }
       }
-      if (!maybeSpec.spec().allowImportant) {
+      if (!maybeDocCssSpec.spec().allowImportant) {
         if (declaration.important)
-          // TODO(gregable): Use a more specific error message for
-          // `!important` errors.
           context.addError(
-              generated.ValidationError.Code.INVALID_ATTR_VALUE,
-              context.getLineCol(),
-              /* params */
-              [attrName, getTagSpecName(tagSpec), 'CSS !important'],
+              generated.ValidationError.Code.CSS_SYNTAX_DISALLOWED_IMPORTANT,
+              context.getLineCol(), /* params */[],
               context.getRules().getStylesSpecUrl(), result.validationResult);
       }
       /** @type {!Array<!tokenize_css.ErrorToken>} */
@@ -4817,7 +5076,7 @@ function validateAttrCss(
         // Override the first parameter with the name of the tag.
         /** @type {!Array<string>} */
         let params = errorToken.params;
-        params[0] = getTagSpecName(tagSpec);
+        params[0] = getTagDescriptiveName(tagSpec);
         context.addError(
             errorToken.code, context.getLineCol(), params, /* spec_url*/ '',
             result.validationResult);
@@ -4827,17 +5086,17 @@ function validateAttrCss(
         // Validate that the URL itself matches the spec.
         // Only image specs apply to inline styles. Fonts are only defined in
         // @font-face rules which we require a full stylesheet to define.
-        if (maybeSpec.spec().imageUrlSpec !== null) {
+        if (maybeDocCssSpec.spec().imageUrlSpec !== null) {
           const adapter = new UrlErrorInStylesheetAdapter(
               context.getLineCol().getLine(), context.getLineCol().getCol());
           validateUrlAndProtocol(
-              maybeSpec.imageUrlSpec(), adapter, context, url.utf8Url, tagSpec,
-              result.validationResult);
+              maybeDocCssSpec.imageUrlSpec(), adapter, context, url.utf8Url,
+              tagSpec, result.validationResult);
         }
         // Subtract off URL lengths from doc-level inline style bytes, if
         // specified by the DocCssSpec.
-        if (!maybeSpec.spec().urlBytesIncluded && !isDataUrl(url.utf8Url))
-          result.inlineStyleCssBytes -= byteLength(url.utf8Url);
+        if (!maybeDocCssSpec.spec().urlBytesIncluded && !isDataUrl(url.utf8Url))
+          result.inlineStyleCssBytes -= htmlparser.byteLength(url.utf8Url);
       }
     }
   }
@@ -4891,6 +5150,7 @@ function validateAttrDeclaration(
   const cssDeclarationByName = parsedAttrSpec.getCssDeclarationByName();
 
   for (const declaration of declarations) {
+    const firstIdent = declaration.firstIdent();
     const declarationName =
         parse_css.stripVendorPrefix(declaration.name.toLowerCase());
     if (!(declarationName in cssDeclarationByName)) {
@@ -4904,7 +5164,6 @@ function validateAttrDeclaration(
       const cssDeclaration = cssDeclarationByName[declarationName];
       if (cssDeclaration.valueCasei.length > 0) {
         let has_valid_value = false;
-        const firstIdent = declaration.firstIdent();
         for (const value of cssDeclaration.valueCasei) {
           if (firstIdent.toLowerCase() === value) {
             has_valid_value = true;
@@ -4920,6 +5179,17 @@ function validateAttrDeclaration(
               /* params */[tagSpecName, declaration.name, firstIdent],
               context.getRules().getStylesSpecUrl(), validationResult);
         }
+      } else if (cssDeclaration.valueRegexCasei != null) {
+        const valueRegex = context.getRules().getFullMatchCaseiRegex(
+            /** @type {number} */ (cssDeclaration.valueRegexCasei));
+        if (!valueRegex.test(firstIdent)) {
+          context.addError(
+              generated.ValidationError.Code
+                  .CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE,
+              context.getLineCol(), /* params */
+              /* params */[tagSpecName, declaration.name, firstIdent],
+              context.getRules().getStylesSpecUrl(), validationResult);
+        }
       }
     }
   }
@@ -4948,7 +5218,7 @@ function ShouldSuppressDevModeErrors(encounteredTag, context) {
  * Validates whether the attributes set on |encountered_tag| conform to this
  * tag specification. All mandatory attributes must appear. Only attributes
  * explicitly mentioned by this tag spec may appear.
- * Returns true iff the validation is successful.
+ * Sets result->validation_result.status to FAIL if unsuccessful.
  * @param {!ParsedTagSpec} parsedTagSpec
  * @param {?ParsedTagSpec} bestMatchReferencePoint
  * @param {!Context} context
@@ -4988,20 +5258,25 @@ function validateAttributes(
   // values. We skip over this array 2 at a time to iterate over the keys.
   const attrsByName = parsedTagSpec.getAttrsByName();
   for (const attr of encounteredTag.attrs()) {
-    // For transformed AMP, attributes `class` and `i-amphtml-layout` are
-    // handled within validateSsrLayout for non-sizer elements.
-    if (context.isTransformed() &&
-        encounteredTag.lowerName() !== 'i-amphtml-sizer' &&
-        (attr.name === 'class' || attr.name === 'i-amphtml-layout')) {
-      continue;
+    if (context.isTransformed()) {
+      // For transformed AMP, `i-amphtml-layout` is handled within
+      // validateSsrLayout, called by validateLayout above.
+      if (attr.name === 'i-amphtml-layout') {
+        continue;
+      }
+    } else if (attr.name === 'class') {
+      // For non-transformed AMP, `class` must not contain 'i-amphtml-'
+      // prefix.
+      validateClassAttr(attr, spec, context, result.validationResult);
     }
 
     // If |spec| is the runtime or an extension script, validate that LTS is
     // either used by all pages or no pages.
     if (attr.name == 'src' &&
-        (IsExtensionScript(encounteredTag) ||
-         IsAmpRuntimeScript(encounteredTag))) {
-      validateScriptSrcAttr(attr, spec, context, result.validationResult);
+        (encounteredTag.isExtensionScript() ||
+         encounteredTag.isAmpRuntimeScript())) {
+      validateScriptSrcAttr(
+          encounteredTag, spec, context, result.validationResult);
     }
 
     if (!(attr.name in attrsByName)) {
@@ -5028,7 +5303,7 @@ function validateAttributes(
       // this method.  For 'src', we also keep track whether we validated it
       // this way, (seen_src_attr), since it's a mandatory attr.
       if (spec.extensionSpec !== null &&
-          validateAttributeInExtension(
+          validateAttrInExtension(
               spec, context, attr, result.validationResult)) {
         if (attr.name === 'src') {
           seenExtensionSrcAttr = true;
@@ -5071,8 +5346,8 @@ function validateAttributes(
             context.getTypeIdentifiers())) {
       context.addError(
           generated.ValidationError.Code.DISALLOWED_ATTR, context.getLineCol(),
-          /* params */[attr.name, getTagSpecName(spec)], getTagSpecUrl(spec),
-          result.validationResult);
+          /* params */[attr.name, getTagDescriptiveName(spec)],
+          getTagSpecUrl(spec), result.validationResult);
       continue;
     }
     const attrSpec = parsedAttrSpec.getSpec();
@@ -5080,7 +5355,7 @@ function validateAttributes(
       context.addWarning(
           generated.ValidationError.Code.DEPRECATED_ATTR, context.getLineCol(),
           /* params */
-          [attr.name, getTagSpecName(spec), attrSpec.deprecation],
+          [attr.name, getTagDescriptiveName(spec), attrSpec.deprecation],
           attrSpec.deprecationUrl, result.validationResult);
       // Deprecation is only a warning, so we don't return.
     }
@@ -5093,8 +5368,8 @@ function validateAttributes(
           parsedAttrSpec, context, spec, attr.name, attr.value, result);
     } else if (attrSpec.cssDeclaration.length > 0) {
       validateAttrDeclaration(
-          parsedAttrSpec, context, getTagSpecName(spec), attr.name, attr.value,
-          result.validationResult);
+          parsedAttrSpec, context, getTagDescriptiveName(spec), attr.name,
+          attr.value, result.validationResult);
     }
     if (!hasTemplateAncestor || !attrValueHasTemplateSyntax(attr.value)) {
       validateNonTemplateAttrValueAgainstSpec(
@@ -5111,7 +5386,7 @@ function validateAttributes(
         context.addError(
             generated.ValidationError.Code.INVALID_ATTR_VALUE,
             context.getLineCol(),
-            /* params */[attr.name, getTagSpecName(spec), attr.value],
+            /* params */[attr.name, getTagDescriptiveName(spec), attr.value],
             getTagSpecUrl(spec), result.validationResult);
         continue;
       }
@@ -5139,7 +5414,7 @@ function validateAttributes(
             context.getLineCol(),
             /* params */
             [
-              getTagSpecName(spec),
+              getTagDescriptiveName(spec),
               context.getRules().getInternedString(mandatoryOneof),
             ],
             getTagSpecUrl(spec), result.validationResult);
@@ -5163,7 +5438,7 @@ function validateAttributes(
             /* params */
             [
               attr.name,
-              getTagSpecName(spec),
+              getTagDescriptiveName(spec),
             ],
             getTagSpecUrl(spec), result.validationResult);
         continue;
@@ -5201,7 +5476,7 @@ function validateAttributes(
           context.getLineCol(),
           /* params */
           [
-            getTagSpecName(spec),
+            getTagDescriptiveName(spec),
             context.getRules().getInternedString(mandatoryOneof),
           ],
           getTagSpecUrl(spec), result.validationResult);
@@ -5216,7 +5491,7 @@ function validateAttributes(
           context.getLineCol(),
           /* params */
           [
-            getTagSpecName(spec),
+            getTagDescriptiveName(spec),
             context.getRules().getInternedString(mandatoryAnyof),
           ],
           getTagSpecUrl(spec), result.validationResult);
@@ -5236,7 +5511,7 @@ function validateAttributes(
             [
               context.getRules().getParsedAttrSpecs().getNameByAttrSpecId(
                   attrId),
-              getTagSpecName(spec),
+              getTagDescriptiveName(spec),
               attrSpec.name,
             ],
             getTagSpecUrl(spec), result.validationResult);
@@ -5257,15 +5532,15 @@ function validateAttributes(
     context.addError(
         generated.ValidationError.Code.MANDATORY_ATTR_MISSING,
         context.getLineCol(),
-        /* params */[missingAttr, getTagSpecName(spec)], getTagSpecUrl(spec),
-        result.validationResult);
+        /* params */[missingAttr, getTagDescriptiveName(spec)],
+        getTagSpecUrl(spec), result.validationResult);
   }
   // Extension specs mandate the 'src' attribute.
   if (spec.extensionSpec !== null && !seenExtensionSrcAttr) {
     context.addError(
         generated.ValidationError.Code.MANDATORY_ATTR_MISSING,
         context.getLineCol(),
-        /* params */['src', getTagSpecName(spec)], getTagSpecUrl(spec),
+        /* params */['src', getTagDescriptiveName(spec)], getTagSpecUrl(spec),
         result.validationResult);
   }
 }
@@ -5464,7 +5739,7 @@ function validateTagAgainstSpec(
     if (tagSpec.deprecation !== null) {
       context.addWarning(
           generated.ValidationError.Code.DEPRECATED_TAG, context.getLineCol(),
-          /* params */[getTagSpecName(tagSpec), tagSpec.deprecation],
+          /* params */[getTagDescriptiveName(tagSpec), tagSpec.deprecation],
           tagSpec.deprecationUrl, attempt.validationResult);
     }
     if (tagSpec.uniqueWarning &&
@@ -5472,7 +5747,7 @@ function validateTagAgainstSpec(
       context.addWarning(
           generated.ValidationError.Code.DUPLICATE_UNIQUE_TAG_WARNING,
           context.getLineCol(),
-          /* params */[getTagSpecName(tagSpec)], getTagSpecUrl(tagSpec),
+          /* params */[getTagDescriptiveName(tagSpec)], getTagSpecUrl(tagSpec),
           attempt.validationResult);
     }
   }
@@ -5667,6 +5942,12 @@ class ParsedValidatorRules {
      * @private
      */
     this.tagSpecByTagName_ = Object.create(null);
+    /**
+     * Extension tagspec ids keyed by extension name
+     * @type {?Object<string, !Array<number>>}
+     * @private
+     */
+    this.extTagSpecIdsByExtName_ = Object.create(null);
     /**
      * Tag ids that are mandatory for a document to legally validate.
      * @type {!Array<number>}
@@ -5709,21 +5990,28 @@ class ParsedValidatorRules {
     this.typeIdentifiers_['\u26a14email'] = 0;
     this.typeIdentifiers_['\u26a1\ufe0f4email'] = 0;
     this.typeIdentifiers_['amp4email'] = 0;
-    this.typeIdentifiers_['actions'] = 0;
     this.typeIdentifiers_['transformed'] = 0;
     this.typeIdentifiers_['data-ampdevmode'] = 0;
     this.typeIdentifiers_['data-css-strict'] = 0;
 
     // For every tagspec that contains an ExtensionSpec, we add several
     // TagSpec fields corresponding to the data found in the ExtensionSpec.
+    // The addition of module/nomodule extensions happens in
+    // validator_gen_js.py and are built as proper JavaScript classes. They
+    // will also be expanded by this method.
     this.expandExtensionSpec_ = function() {
       const numTags = this.rules_.tags.length;
       for (let tagSpecId = 0; tagSpecId < numTags; ++tagSpecId) {
         let tagSpec = this.rules_.tags[tagSpecId];
         if (tagSpec.extensionSpec == null) continue;
+        let baseSpecName = tagSpec.extensionSpec.name;
+        if (tagSpec.extensionSpec.versionName !== null)
+          baseSpecName = tagSpec.extensionSpec.name + ' ' +
+              tagSpec.extensionSpec.versionName;
         if (tagSpec.specName === null)
-          tagSpec.specName =
-              tagSpec.extensionSpec.name + ' extension .js script';
+          tagSpec.specName = baseSpecName + ' extension script';
+        if (tagSpec.descriptiveName === null)
+          tagSpec.descriptiveName = tagSpec.specName;
         tagSpec.mandatoryParent = 'HEAD';
         if (tagSpec.extensionSpec.deprecatedAllowDuplicates)
           tagSpec.uniqueWarning = true;
@@ -5751,6 +6039,19 @@ class ParsedValidatorRules {
       return tagSpec.htmlFormat.indexOf(castedHtmlFormat) !== -1;
     };
 
+    /**
+     * Returns true if `spec` is usable for the HTML format these rules are
+     * built for.
+     * @type {function(!generated.DocSpec) : boolean}
+     * @private
+     */
+    this.isDocSpecCorrectHtmlFormat_ = function(docSpec) {
+      const castedHtmlFormat =
+          /** @type {!generated.HtmlFormat.Code} */ (
+              /** @type {*} */ (htmlFormat));
+      return docSpec.htmlFormat == castedHtmlFormat;
+    };
+
     /**
      * Returns true if `spec` is usable for the HTML format these rules are
      * built for.
@@ -5770,6 +6071,15 @@ class ParsedValidatorRules {
      */
     this.parsedAttrSpecs_ = new ParsedAttrSpecs(this.rules_);
 
+    /**
+     * @type {!Array<!ParsedDocSpec>}
+     * @private
+     */
+    this.parsedDoc_ = [];
+    for (const docSpec of this.rules_.doc) {
+      this.parsedDoc_.push(new ParsedDocSpec(docSpec));
+    }
+
     /**
      * @type {!Array<!ParsedDocCssSpec>}
      * @private
@@ -5794,6 +6104,11 @@ class ParsedValidatorRules {
       for (const otherTag of tag.alsoRequiresTagWarning) {
         this.tagSpecIdsToTrack_[otherTag] = true;
       }
+      const parsed = new ParsedTagSpec(
+          this.parsedAttrSpecs_,
+          shouldRecordTagspecValidated(tag, tagSpecId, this.tagSpecIdsToTrack_),
+          tag, tagSpecId);
+      this.parsedTagSpecById_[tagSpecId] = parsed;
       if (tag.tagName !== '$REFERENCE_POINT') {
         if (!(tag.tagName in this.tagSpecByTagName_)) {
           this.tagSpecByTagName_[tag.tagName] = new TagSpecDispatch();
@@ -5809,17 +6124,25 @@ class ParsedValidatorRules {
               /** @type {string} */ (tag.extensionSpec.name), '');
           tagnameDispatch.registerDispatchKey(dispatchKey, tagSpecId);
         } else {
-          const dispatchKey = this.rules_.dispatchKeyByTagSpecId[tagSpecId];
-          if (dispatchKey === undefined) {
-            tagnameDispatch.registerTagSpec(tagSpecId);
+          const dispatchKeys = parsed.GetDispatchKeys();
+          if (dispatchKeys.length > 0) {
+            for (const dispatchKey of dispatchKeys)
+              tagnameDispatch.registerDispatchKey(dispatchKey, tagSpecId);
           } else {
-            tagnameDispatch.registerDispatchKey(dispatchKey, tagSpecId);
+            tagnameDispatch.registerTagSpec(tagSpecId);
           }
         }
       }
       if (tag.mandatory) {
         this.mandatoryTagSpecs_.push(tagSpecId);
       }
+      if (tag.extensionSpec !== null) {
+        if (!(tag.extensionSpec.name in this.extTagSpecIdsByExtName_)) {
+          this.extTagSpecIdsByExtName_[tag.extensionSpec.name] = [tagSpecId];
+        } else {
+          this.extTagSpecIdsByExtName_[tag.extensionSpec.name].push(tagSpecId);
+        }
+      }
     }
 
     /**
@@ -5944,7 +6267,11 @@ class ParsedValidatorRules {
    */
   validateTypeIdentifiers(attrs, formatIdentifiers, context, validationResult) {
     let hasMandatoryTypeIdentifier = false;
-    const transformedValueRe = new RegExp(/^\w+;v=(\d+)$/);
+    let hasEmailTypeIdentifier = false;
+    let hasCssStrictTypeIdentifier = false;
+    // The named values should match up to `self` and AMP caches listed at
+    // https://cdn.ampproject.org/caches.json
+    const transformedValueRe = new RegExp(/^(bing|google|self);v=(\d+)$/);
     for (const attr of attrs) {
       // Verify this attribute is a type identifier. Other attributes are
       // validated in validateAttributes.
@@ -5959,20 +6286,18 @@ class ParsedValidatorRules {
             validationResult.typeIdentifier.push(typeIdentifier);
             context.recordTypeIdentifier(typeIdentifier);
           }
-          // The type identifier "actions" and "transformed" are not
-          // considered mandatory unlike other type identifiers.
-          if (typeIdentifier !== 'actions' &&
-              typeIdentifier !== 'transformed' &&
+          // The type identifier "transformed" is not considered mandatory
+          // unlike other type identifiers.
+          if (typeIdentifier !== 'transformed' &&
               typeIdentifier !== 'data-ampdevmode' &&
               typeIdentifier !== 'data-css-strict') {
             hasMandatoryTypeIdentifier = true;
           }
           // The type identifier "transformed" has restrictions on it's value.
-          // It must be \w+;v=\d+ (e.g. google;v=1).
           if ((typeIdentifier === 'transformed') && (attr.value !== '')) {
             const reResult = transformedValueRe.exec(attr.value);
             if (reResult !== null) {
-              validationResult.transformerVersion = parseInt(reResult[1], 10);
+              validationResult.transformerVersion = parseInt(reResult[2], 10);
             } else {
               context.addError(
                   generated.ValidationError.Code.INVALID_ATTR_VALUE,
@@ -5991,6 +6316,12 @@ class ParsedValidatorRules {
                 context.getLineCol(),
                 /*params=*/[], /*url*/ '', validationResult);
           }
+          if (typeIdentifier === 'amp4email') {
+            hasEmailTypeIdentifier = true;
+          }
+          if (typeIdentifier === 'data-css-strict') {
+            hasCssStrictTypeIdentifier = true;
+          }
         } else {
           context.addError(
               generated.ValidationError.Code.DISALLOWED_ATTR,
@@ -6001,8 +6332,17 @@ class ParsedValidatorRules {
         }
       }
     }
+    // If AMP Email format and not set to data-css-strict, then issue a
+    // warning that not having data-css-strict is deprecated. See b/179798751.
+    if (hasEmailTypeIdentifier && !hasCssStrictTypeIdentifier) {
+      context.addWarning(
+          generated.ValidationError.Code.AMP_EMAIL_MISSING_STRICT_CSS_ATTR,
+          context.getLineCol(), /*params=*/[],
+          'https://github.com/ampproject/amphtml/issues/32587',
+          validationResult);
+    }
     if (!hasMandatoryTypeIdentifier) {
-      // Missing mandatory type identifier (any AMP variant but "actions" or
+      // Missing mandatory type identifier (any AMP variant but
       // "transformed").
       context.addError(
           generated.ValidationError.Code.MANDATORY_ATTR_MISSING,
@@ -6042,19 +6382,6 @@ class ParsedValidatorRules {
             ],
             context, validationResult);
         break;
-      case 'ACTIONS':
-        this.validateTypeIdentifiers(
-            htmlTag.attrs(),
-            ['\u26a1', '\u26a1\ufe0f', 'amp', 'actions', 'data-ampdevmode'],
-            context, validationResult);
-        if (validationResult.typeIdentifier.indexOf('actions') === -1) {
-          context.addError(
-              generated.ValidationError.Code.MANDATORY_ATTR_MISSING,
-              context.getLineCol(),
-              /* params */['actions', 'html'],
-              /* url */ '', validationResult);
-        }
-        break;
       default:
         // fallthrough
     }
@@ -6197,12 +6524,28 @@ class ParsedValidatorRules {
         context.addError(
             generated.ValidationError.Code.MANDATORY_TAG_MISSING,
             context.getLineCol(),
-            /* params */[getTagSpecName(spec)], getTagSpecUrl(spec),
+            /* params */[getTagDescriptiveName(spec)], getTagSpecUrl(spec),
             validationResult);
       }
     }
   }
 
+  /**
+   * Returns true if one of the alternative tagspec ids has been validated.
+   * @param {!Context} context
+   * @param {?string} extName
+   * @return {boolean}
+   */
+  hasValidatedAlternativeTagSpec(context, extName) {
+    if (extName === null) return false;
+    for (const alternativeTagSpecId of this.extTagSpecIdsByExtName_[extName]) {
+      if (context.getTagspecsValidated().hasOwnProperty(alternativeTagSpecId)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   /**
    * Emits errors for tags that specify that another tag is also required or
    * a condition is required to be satisfied.
@@ -6210,7 +6553,7 @@ class ParsedValidatorRules {
    * @param {!Context} context
    * @param {!generated.ValidationResult} validationResult
    */
-  maybeEmitAlsoRequiresTagValidationErrors(context, validationResult) {
+  maybeEmitRequiresOrExcludesValidationErrors(context, validationResult) {
     /** @type {!Array<number>} */
     const tagspecsValidated =
         Object.keys(context.getTagspecsValidated()).map(Number);
@@ -6230,7 +6573,7 @@ class ParsedValidatorRules {
               /* params */
               [
                 context.getRules().getInternedString(condition),
-                getTagSpecName(parsedTagSpec.getSpec()),
+                getTagDescriptiveName(parsedTagSpec.getSpec()),
               ],
               getTagSpecUrl(parsedTagSpec), validationResult);
         }
@@ -6242,7 +6585,7 @@ class ParsedValidatorRules {
               context.getLineCol(),
               /* params */
               [
-                getTagSpecName(parsedTagSpec.getSpec()),
+                getTagDescriptiveName(parsedTagSpec.getSpec()),
                 context.getRules().getInternedString(condition),
               ],
               getTagSpecUrl(parsedTagSpec), validationResult);
@@ -6251,13 +6594,23 @@ class ParsedValidatorRules {
       for (const tagspecId of parsedTagSpec.getAlsoRequiresTagWarning()) {
         if (!context.getTagspecsValidated().hasOwnProperty(tagspecId)) {
           const alsoRequiresTagspec = this.getByTagSpecId(tagspecId);
+          // If there is an alternative tagspec for extension script tagspecs
+          // that has been validated, then move on to the next
+          // alsoRequiresTagWarning.
+          if (alsoRequiresTagspec.getSpec().extensionSpec !== null &&
+              alsoRequiresTagspec.getSpec().specName.endsWith(
+                  'extension script') &&
+              this.hasValidatedAlternativeTagSpec(
+                  context, alsoRequiresTagspec.getSpec().extensionSpec.name)) {
+            continue;
+          }
           context.addWarning(
               generated.ValidationError.Code.WARNING_TAG_REQUIRED_BY_MISSING,
               context.getLineCol(),
               /* params */
               [
-                getTagSpecName(alsoRequiresTagspec.getSpec()),
-                getTagSpecName(parsedTagSpec.getSpec()),
+                getTagDescriptiveName(alsoRequiresTagspec.getSpec()),
+                getTagDescriptiveName(parsedTagSpec.getSpec()),
               ],
               getTagSpecUrl(parsedTagSpec), validationResult);
         }
@@ -6308,6 +6661,27 @@ class ParsedValidatorRules {
     }
   }
 
+  /**
+   * Emits errors for doc size limitations across entire document.
+   * @param {!Context} context
+   * @param {!generated.ValidationResult} validationResult
+   */
+  maybeEmitDocSizeErrors(context, validationResult) {
+    const parsedDocSpec = context.matchingDocSpec();
+    if (parsedDocSpec !== null) {
+      const bytesUsed = context.getDocByteSize();
+      /** @type {!generated.DocSpec} */
+      const docSpec = parsedDocSpec.spec();
+      if (docSpec.maxBytes !== -2 && bytesUsed > docSpec.maxBytes) {
+        context.addError(
+            generated.ValidationError.Code.DOCUMENT_SIZE_LIMIT_EXCEEDED,
+            context.getLineCol(), /* params */
+            [docSpec.maxBytes.toString(), bytesUsed.toString()],
+            docSpec.maxBytesSpecUrl, validationResult);
+      }
+    }
+  }
+
   /**
    * Emits errors for css size limitations across entire document.
    * @param {!Context} context
@@ -6365,9 +6739,10 @@ class ParsedValidatorRules {
    */
   maybeEmitGlobalTagValidationErrors(context, validationResult) {
     this.maybeEmitMandatoryTagValidationErrors(context, validationResult);
-    this.maybeEmitAlsoRequiresTagValidationErrors(context, validationResult);
+    this.maybeEmitRequiresOrExcludesValidationErrors(context, validationResult);
     this.maybeEmitMandatoryAlternativesSatisfiedErrors(
         context, validationResult);
+    this.maybeEmitDocSizeErrors(context, validationResult);
     this.maybeEmitCssLengthSpecErrors(context, validationResult);
     this.maybeEmitValueSetMismatchErrors(context, validationResult);
   }
@@ -6377,18 +6752,7 @@ class ParsedValidatorRules {
    * @return {!ParsedTagSpec}
    */
   getByTagSpecId(id) {
-    let parsed = this.parsedTagSpecById_[id];
-    if (parsed !== undefined) {
-      return parsed;
-    }
-    const tag = this.rules_.tags[id];
-    asserts.assert(tag !== undefined);
-    parsed = new ParsedTagSpec(
-        this.parsedAttrSpecs_,
-        shouldRecordTagspecValidated(tag, id, this.tagSpecIdsToTrack_), tag,
-        id);
-    this.parsedTagSpecById_[id] = parsed;
-    return parsed;
+    return this.parsedTagSpecById_[id];
   }
 
   /**
@@ -6413,6 +6777,13 @@ class ParsedValidatorRules {
     return this.rules_.descendantTagList;
   }
 
+  /**
+   * @return {!Array<!ParsedDocSpec>}
+   */
+  getDoc() {
+    return this.parsedDoc_;
+  }
+
   /**
    * @return {!Array<!ParsedDocCssSpec>}
    */
@@ -6451,23 +6822,6 @@ function getParsedValidatorRules(htmlFormat) {
   return parsedValidatorRulesByFormat[htmlFormat];
 }
 
-/**
- * Computes the byte length, rather than character length, of a utf8 string.
- * https://en.wikipedia.org/wiki/UTF-8
- * @param {string} utf8Str
- * @return {number}
- */
-function byteLength(utf8Str) {
-  // To figure out which characters are multi-byte we can abuse
-  // encodeURIComponent which will escape those specific characters.
-  const multiByteEscapedChars = encodeURIComponent(utf8Str).match(/%[89ABab]/g);
-  if (multiByteEscapedChars === null) {
-    return utf8Str.length;
-  } else {
-    return utf8Str.length + multiByteEscapedChars.length;
-  }
-}
-
 /**
  * Validation Handler which accepts callbacks from HTML Parser
  */
@@ -6611,6 +6965,46 @@ const ValidationHandler =
     }
   }
 
+  /**
+   * Currently, the Javascript HTML parser considers Doctype to be another
+   * HTML tag, which is not technically accurate. We have special handling for
+   * doctype in Javascript which applies to all AMP formats, as this is strict
+   * handling for all HTML in general. Specifically "attributes" are not
+   * allowed, even things like `data-foo`.
+   * @param {!parserInterface.ParsedHtmlTag} encounteredTag
+   * @param {!Context} context
+   * @param {!generated.ValidationResult} validationResult
+   */
+  validateDocType(encounteredTag, context, validationResult) {
+    // <!doctype html> - OK
+    if (encounteredTag.attrs().length === 1 &&
+        encounteredTag.attrs()[0].name === 'html')
+      return;
+    // <!doctype html lang=...> OK
+    // This is technically invalid. The 'correct' way to do this is to emit
+    // the lang attribute on the `<html>` tag. However, we observe a number of
+    // websites incorrectly emitting `lang` as part of doctype, so this
+    // specific attribute is allowed to avoid breaking existing pages.
+    if (encounteredTag.attrs().length === 2) {
+      if (encounteredTag.attrs()[0].name === 'html' &&
+          encounteredTag.attrs()[1].name === 'lang')
+        return;
+      if (encounteredTag.attrs()[0].name === 'lang' &&
+          encounteredTag.attrs()[1].name === 'html')
+        return;
+    }
+    if (encounteredTag.attrs().length !== 1 ||
+        encounteredTag.attrs()[0].name !== 'html') {
+      this.context_.addError(
+          generated.ValidationError.Code.INVALID_DOCTYPE_HTML,
+          this.context_.getLineCol(),
+          /* params */[],
+          /* specUrl */ 'https://amp.dev/documentation/' +
+              'guides-and-tutorials/start/create/basic_markup/',
+          this.validationResult_);
+    }
+  }
+
   /**
    * Callback for a start HTML tag.
    * @param {!parserInterface.ParsedHtmlTag} encounteredTag
@@ -6621,6 +7015,14 @@ const ValidationHandler =
       this.context_.getRules().validateHtmlTag(
           encounteredTag, this.context_, this.validationResult_);
     }
+    if (encounteredTag.upperName() === '!DOCTYPE') {
+      this.validateDocType(
+          encounteredTag, this.context_, this.validationResult_);
+      // Even though validateDocType emits all necessary errors about the tag,
+      // we continue to process it further (validateTag and such) so that we
+      // can record the tag was present and record it as the root pseudo
+      // element for the document.
+    }
     /** @type {?string} */
     const maybeDuplicateAttrName = encounteredTag.hasDuplicateAttrs();
     if (maybeDuplicateAttrName !== null) {
@@ -6943,7 +7345,7 @@ function errorLine(filenameOrUrl, error) {
 /**
  * Renders the validation results into an array of human readable strings.
  * Careful when modifying this - it's called from
- * https://github.com/ampproject/amphtml/blob/master/test/integration/test-example-validation.js.
+ * https://github.com/ampproject/amphtml/blob/main/test/integration/test-example-validation.js.
  *
  * WARNING: This is exported; htmlparser changes may break downstream users
  * like https://www.npmjs.com/package/amphtml-validator and
diff --git a/validator/engine/validator_test.js b/validator/js/engine/validator_test.js
similarity index 88%
rename from validator/engine/validator_test.js
rename to validator/js/engine/validator_test.js
index f3ba8985bbbec..9bf895081f224 100644
--- a/validator/engine/validator_test.js
+++ b/validator/js/engine/validator_test.js
@@ -19,6 +19,7 @@ goog.module('amp.validator.ValidatorTest');
 const asserts = goog.require('goog.asserts');
 const createRules = goog.require('amp.validator.createRules');
 const generated = goog.require('amp.validator.protogenerated');
+const htmlparser = goog.require('amp.htmlparser');
 const uriUtils = goog.require('goog.uri.utils');
 const validator = goog.require('amp.validator');
 
@@ -159,10 +160,6 @@ const ValidatorTestCase = function(ampHtmlFile, opt_ampUrl) {
       this.ampHtmlFile.indexOf('/validator-amp4email-') != -1) {
     this.htmlFormat = 'AMP4EMAIL';
   }
-  if (this.ampHtmlFile.indexOf('actions_feature_tests/') != -1 ||
-      this.ampHtmlFile.indexOf('/validator-actions-') != -1) {
-    this.htmlFormat = 'ACTIONS';
-  }
   /**
    * If set to false, output will be generated without inlining the input
    * document.
@@ -292,7 +289,7 @@ ValidatorTestCase.prototype.run = function() {
   message += 'expected:\n' + this.expectedOutput + '\nsaw:\n' + observed;
   if (this.expectedOutputFile !== null) {
     message += '\n\nIf validator/' + absolutePathFor(this.expectedOutputFile) +
-        ' is incorrect, please run `gulp validator --update_tests` to ' +
+        ' is incorrect, please run `amp validator --update_tests` to ' +
         'regenerate it based on its corresponding .html file.';
   }
   asserts.fail(message);
@@ -387,7 +384,8 @@ describe('ValidatorOutput', () => {
 
   it('validate amp4email format', () => {
     const results = validator.validateString(
-        '<!doctype html><html ⚡4email><head><meta charset="utf-8">' +
+        '<!doctype html><html ⚡4email data-css-strict><head>' +
+            '<meta charset="utf-8">' +
             '<script async src="https://cdn.ampproject.org/v0.js"></script>' +
             '<style amp4email-boilerplate>body{visibility:hidden}</style>' +
             '</head><body>Hello, AMP4EMAIL world.</body></html>',
@@ -397,7 +395,8 @@ describe('ValidatorOutput', () => {
 
   it('validate amp4email format with error', () => {
     const results = validator.validateString(
-        '<!doctype html><html ⚡4email><head><meta charset="utf-8">' +
+        '<!doctype html><html ⚡4email data-css-strict><head>' +
+            '<meta charset="utf-8">' +
             '<script async src="https://cdn.ampproject.org/v0.js"></script>' +
             '</head><body>Hello, AMP4EMAIL world.</body></html>',
         'amp4email');
@@ -419,30 +418,6 @@ describe('ValidatorOutput', () => {
         'amp4ads');
     assertStrictEqual(results.status, 'PASS');
   });
-
-  it('validate actions format', () => {
-    const results = validator.validateString(
-        '<!doctype html><html ⚡ actions><head><meta charset="utf-8">' +
-            '<link rel="canonical" href="self.html" />' +
-            '<meta name="viewport" content="width=device-width,minimum-scale=1">' +
-            '<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><script async src="https://cdn.ampproject.org/v0.js">' +
-            '</script></head><body>Hello, AMP world.</body></html>',
-        'actions');
-    assertStrictEqual(results.status, 'PASS');
-  });
 });
 
 describe('ValidationResultTransformerVersion', () => {
@@ -460,6 +435,85 @@ describe('ValidationResultTransformerVersion', () => {
   });
 });
 
+describe('Validator.DocSizeAmpEmail', () => {
+  if (process.env['UPDATE_VALIDATOR_TEST'] === '1') {
+    return;
+  }
+  // Rather than encoding some really long body in testcases, which would be
+  // difficult to read/verify that the testcase is valid, we modify a valid
+  // testcase (amp4email_feature_tests/doc_size.html) designed for this
+  // purpose in code.
+
+  // We use a blob of length 20 (both bytes and chars) to make it easy to
+  // construct body of any length that we want.
+  const validBlob = '<b>Hello, World</b>\n';
+  assertStrictEqual(20, validBlob.length);
+
+  it('accepts 200000 bytes in the test document', () => {
+    const body = Array(9945).join(validBlob);
+    const test = new ValidatorTestCase('amp4email_feature_tests/doc_size.html');
+    test.ampHtmlFileContents =
+        test.ampHtmlFileContents.replace('replace_body', body);
+    assertStrictEqual(200000, htmlparser.byteLength(test.ampHtmlFileContents));
+    test.inlineOutput = false;
+    test.expectedOutput = 'PASS';
+    test.run();
+  });
+
+  it('will not accept 200001 bytes in the test document', () => {
+    const body = Array(9945).join(validBlob) + ' ';
+    const test = new ValidatorTestCase('amp4email_feature_tests/doc_size.html');
+    test.ampHtmlFileContents =
+        test.ampHtmlFileContents.replace('replace_body', body);
+    assertStrictEqual(200001, htmlparser.byteLength(test.ampHtmlFileContents));
+    test.inlineOutput = false;
+    test.expectedOutputFile = null;
+    test.expectedOutput = 'FAIL\n' +
+        'amp4email_feature_tests/doc_size.html:9977:6 ' +
+        'Document exceeded 200000 bytes limit. Actual size 200001 bytes. ' +
+        '(see https://amp.dev/documentation/guides-and-tutorials/learn/' +
+        'email-spec/amp-email-format/?format=email)';
+    test.run();
+  });
+});
+
+describe('Validator.ScriptLength', () => {
+  if (process.env['UPDATE_VALIDATOR_TEST'] === '1') {
+    return;
+  }
+  // This string is 10 bytes of inline script.
+  const inlineScriptBlob = 'alert(\'\');';
+  assertStrictEqual(10, inlineScriptBlob.length);
+
+  it('accepts 10000 bytes of inline style', () => {
+    const inlineScript = Array(1001).join(inlineScriptBlob);
+    assertStrictEqual(10000, inlineScript.length);
+    const test =
+        new ValidatorTestCase('feature_tests/inline_script_length.html');
+    test.inlineOutput = false;
+    test.ampHtmlFileContents =
+        test.ampHtmlFileContents.replace('replace_inline_script', inlineScript);
+    test.expectedOutput = 'PASS';
+    test.run();
+  });
+
+  it('will not accept 10010 bytes in inline script', () => {
+    const inlineScript = Array(1001).join(inlineScriptBlob) + ' ';
+    assertStrictEqual(10001, inlineScript.length);
+    const test =
+        new ValidatorTestCase('feature_tests/inline_script_length.html');
+    test.inlineOutput = false;
+    test.ampHtmlFileContents =
+        test.ampHtmlFileContents.replace('replace_inline_script', inlineScript);
+    test.expectedOutputFile = null;
+    test.expectedOutput = 'FAIL\n' +
+        'feature_tests/inline_script_length.html:35:2 The inline script ' +
+        'is 10001 bytes, which exceeds the limit of 10000 bytes. ' +
+        '(see https://amp.dev/documentation/components/amp-script/#faq)';
+    test.run();
+  });
+});
+
 describe('Validator.CssLength', () => {
   if (process.env['UPDATE_VALIDATOR_TEST'] === '1') {
     return;
@@ -471,7 +525,7 @@ describe('Validator.CssLength', () => {
 
   // We use a blob of length 10 (both bytes and chars) to make it easy to
   // construct stylesheets of any length that we want.
-  const validStyleBlob = 'h1 {a: b}\n';
+  const validStyleBlob = 'h1{top:0}\n';
   assertStrictEqual(10, validStyleBlob.length);
   const validInlineStyleBlob = '<b style=\'width:1px;\'></b>';
 
@@ -506,7 +560,7 @@ describe('Validator.CssLength', () => {
            'specified in tag \'style amp-custom\' is too long - document ' +
            'contains 75001 bytes whereas the limit is 75000 bytes. ' +
            '(see https://amp.dev/documentation/guides-and-tutorials/' +
-           'learn/spec/amphtml#maximum-size)';
+           'learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 
@@ -527,7 +581,7 @@ describe('Validator.CssLength', () => {
            'specified in tag \'style amp-custom\' is too long - document ' +
            'contains 75002 bytes whereas the limit is 75000 bytes. ' +
            '(see https://amp.dev/documentation/guides-and-tutorials/' +
-           'learn/spec/amphtml#maximum-size)';
+           'learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 
@@ -554,7 +608,7 @@ describe('Validator.CssLength', () => {
                .replace('replace_inline_style', inlineStyle);
        test.expectedOutputFile = null;
        test.expectedOutput =
-           'FAIL\nfeature_tests/css_length.html:36:6 The author stylesheet specified in tag \'style amp-custom\' and the combined inline styles is too large - document contains 75010 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size)';
+           'FAIL\nfeature_tests/css_length.html:36:6 The author stylesheet specified in tag \'style amp-custom\' and the combined inline styles is too large - document contains 75010 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 
@@ -570,130 +624,7 @@ describe('Validator.CssLength', () => {
                .replace('.replace_amp_custom {}', stylesheet)
                .replace('replace_inline_style', '<b style=display:block;></b>');
        test.expectedOutput =
-           'FAIL\nfeature_tests/css_length.html:7536:6 The author stylesheet specified in tag \'style amp-custom\' and the combined inline styles is too large - document contains 75014 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size)';
-       test.run();
-     });
-});
-
-describe('Validator.CssLengthAmpActions', () => {
-  if (process.env['UPDATE_VALIDATOR_TEST'] === '1') {
-    return;
-  }
-  // Rather than encoding some really long author stylesheets in
-  // testcases, which would be difficult to read/verify that the
-  // testcase is valid, we modify a valid testcase
-  // (feature_tests/css_length.html) designed for this purpose in code.
-
-  // We use a blob of length 10 (both bytes and chars) to make it easy to
-  // construct stylesheets of any length that we want.
-  const validStyleBlob = 'h1 {a: b}\n';
-  assertStrictEqual(10, validStyleBlob.length);
-  const validInlineStyleBlob = '<b style=\'width:1px;\'></b>';
-
-  it('accepts 75000 bytes in author stylesheet and 0 bytes in inline style',
-     () => {
-       const stylesheet = Array(7501).join(validStyleBlob);
-       assertStrictEqual(75000, stylesheet.length);
-       const test =
-           new ValidatorTestCase('actions_feature_tests/css_length.html');
-       test.inlineOutput = false;
-       test.ampHtmlFileContents =
-           test.ampHtmlFileContents
-               .replace('.replace_amp_custom {}', stylesheet)
-               .replace('replace_inline_style', '');
-       test.expectedOutput = 'PASS';
-       test.run();
-     });
-
-  it('will not accept 75001 bytes in author stylesheet and 0 bytes in ' +
-         'inline style',
-     () => {
-       const stylesheet = Array(7501).join(validStyleBlob) + ' ';
-       assertStrictEqual(75001, stylesheet.length);
-       const test =
-           new ValidatorTestCase('actions_feature_tests/css_length.html');
-       test.inlineOutput = false;
-       test.ampHtmlFileContents =
-           test.ampHtmlFileContents
-               .replace('.replace_amp_custom {}', stylesheet)
-               .replace('replace_inline_style', '');
-       test.expectedOutputFile = null;
-       test.expectedOutput = 'FAIL\n' +
-           'actions_feature_tests/css_length.html:28:2 The author stylesheet ' +
-           'specified in tag \'style amp-custom\' is too long - document ' +
-           'contains 75001 bytes whereas the limit is 75000 bytes. ' +
-           '(see https://amp.dev/documentation/guides-and-tutorials/' +
-           'learn/spec/amphtml#maximum-size)';
-       test.run();
-     });
-
-  it('knows utf8 and rejects file with 75002 bytes but 74999 characters ' +
-         'and 0 bytes in inline style',
-     () => {
-       const stylesheet = Array(7500).join(validStyleBlob) + 'h {a: 😺}';
-       assertStrictEqual(74999, stylesheet.length);  // character length
-       const test =
-           new ValidatorTestCase('actions_feature_tests/css_length.html');
-       test.inlineOutput = false;
-       test.ampHtmlFileContents =
-           test.ampHtmlFileContents
-               .replace('.replace_amp_custom {}', stylesheet)
-               .replace('replace_inline_style', '');
-       test.expectedOutputFile = null;
-       test.expectedOutput = 'FAIL\n' +
-           'actions_feature_tests/css_length.html:28:2 The author stylesheet ' +
-           'specified in tag \'style amp-custom\' is too long - document ' +
-           'contains 75002 bytes whereas the limit is 75000 bytes. ' +
-           '(see https://amp.dev/documentation/guides-and-tutorials/' +
-           'learn/spec/amphtml#maximum-size)';
-       test.run();
-     });
-
-  it('allows 0 bytes in author stylesheet and 75000 bytes in inline style',
-     () => {
-       const inlineStyle = Array(7501).join(validInlineStyleBlob);
-       const test =
-           new ValidatorTestCase('actions_feature_tests/css_length.html');
-       test.inlineOutput = false;
-       test.ampHtmlFileContents =
-           test.ampHtmlFileContents.replace('.replace_amp_custom {}', '')
-               .replace('replace_inline_style', inlineStyle);
-       test.expectedOutput = 'PASS';
-       test.run();
-     });
-
-  it('will not accept 0 bytes in author stylesheet and 75010 bytes in ' +
-         'inline style',
-     () => {
-       const inlineStyle = Array(7502).join(validInlineStyleBlob);
-       const test =
-           new ValidatorTestCase('actions_feature_tests/css_length.html');
-       test.inlineOutput = false;
-       test.ampHtmlFileContents =
-           test.ampHtmlFileContents.replace('.replace_amp_custom {}', '')
-               .replace('replace_inline_style', inlineStyle);
-       test.expectedOutputFile = null;
-       // TODO(gregable): This should not pass, as we have more than 75,000
-       // bytes of inline style.
-       test.expectedOutput = 'PASS';
-       test.run();
-     });
-
-  it('will not accept 75000 bytes in author stylesheet and 14 bytes in ' +
-         'inline style',
-     () => {
-       const stylesheet = Array(7501).join(validStyleBlob);
-       assertStrictEqual(75000, stylesheet.length);
-       const test =
-           new ValidatorTestCase('actions_feature_tests/css_length.html');
-       test.inlineOutput = false;
-       test.ampHtmlFileContents =
-           test.ampHtmlFileContents
-               .replace('.replace_amp_custom {}', stylesheet)
-               .replace('replace_inline_style', '<b style=display:block;></b>');
-       // TODO(gregable): This should not pass, as we have more than 75,000
-       // bytes of total style.
-       test.expectedOutput = 'PASS';
+           'FAIL\nfeature_tests/css_length.html:7536:6 The author stylesheet specified in tag \'style amp-custom\' and the combined inline styles is too large - document contains 75014 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 });
@@ -709,14 +640,14 @@ describe('Validator.CssLengthAmpEmail', () => {
 
   // We use a blob of length 10 (both bytes and chars) to make it easy to
   // construct stylesheets of any length that we want.
-  const validStyleBlob = 'h1 {a: b}\n';
+  const validStyleBlob = 'h1{top:0}\n';
   assertStrictEqual(10, validStyleBlob.length);
-  const validInlineStyleBlob = '<b style=\'width:1px;\'></b>';
+  const validInlineStyleBlob = '<b style="width:1px;"></b>';
 
   it('accepts 75000 bytes in author stylesheet and 0 bytes in inline style',
      () => {
        const stylesheet = Array(7501).join(validStyleBlob);
-       assertStrictEqual(75000, stylesheet.length);
+       assertStrictEqual(75000, htmlparser.byteLength(stylesheet));
        const test =
            new ValidatorTestCase('amp4email_feature_tests/css_length.html');
        test.inlineOutput = false;
@@ -724,7 +655,12 @@ describe('Validator.CssLengthAmpEmail', () => {
            test.ampHtmlFileContents
                .replace('.replace_amp_custom {}', stylesheet)
                .replace('replace_inline_style', '');
-       test.expectedOutput = 'PASS';
+       test.expectedOutput = 'PASS\n' +
+           'amp4email_feature_tests/css_length.html:23:0 Tag \'html\' ' +
+           'marked with attribute \'amp4email\' is missing the corresponding ' +
+           'attribute \'data-css-strict\' for enabling strict CSS ' +
+           'validation. This may become an error in the future. ' +
+           '(see https://github.com/ampproject/amphtml/issues/32587)';
        test.run();
      });
 
@@ -742,11 +678,16 @@ describe('Validator.CssLengthAmpEmail', () => {
                .replace('replace_inline_style', '');
        test.expectedOutputFile = null;
        test.expectedOutput = 'FAIL\n' +
+           'amp4email_feature_tests/css_length.html:23:0 Tag \'html\' ' +
+           'marked with attribute \'amp4email\' is missing the corresponding ' +
+           'attribute \'data-css-strict\' for enabling strict CSS ' +
+           'validation. This may become an error in the future. ' +
+           '(see https://github.com/ampproject/amphtml/issues/32587)\n' +
            'amp4email_feature_tests/css_length.html:28:2 The author stylesheet ' +
-           'specified in tag \'style amp-custom (AMP4EMAIL)\' is too long - document ' +
+           'specified in tag \'style amp-custom\' is too long - document ' +
            'contains 75001 bytes whereas the limit is 75000 bytes. ' +
            '(see https://amp.dev/documentation/guides-and-tutorials/' +
-           'learn/spec/amphtml#maximum-size)';
+           'learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 
@@ -764,12 +705,17 @@ describe('Validator.CssLengthAmpEmail', () => {
                .replace('replace_inline_style', '');
        test.expectedOutputFile = null;
        test.expectedOutput = 'FAIL\n' +
+           'amp4email_feature_tests/css_length.html:23:0 Tag \'html\' ' +
+           'marked with attribute \'amp4email\' is missing the corresponding ' +
+           'attribute \'data-css-strict\' for enabling strict CSS ' +
+           'validation. This may become an error in the future. ' +
+           '(see https://github.com/ampproject/amphtml/issues/32587)\n' +
            'amp4email_feature_tests/css_length.html:28:2 The author ' +
-           'stylesheet specified in tag \'style amp-custom (AMP4EMAIL)\' is ' +
+           'stylesheet specified in tag \'style amp-custom\' is ' +
            'too long - document contains 75002 bytes whereas the limit is ' +
            '75000 bytes. (see ' +
            'https://amp.dev/documentation/guides-and-tutorials/' +
-           'learn/spec/amphtml#maximum-size)';
+           'learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 
@@ -782,7 +728,12 @@ describe('Validator.CssLengthAmpEmail', () => {
        test.ampHtmlFileContents =
            test.ampHtmlFileContents.replace('.replace_amp_custom {}', '')
                .replace('replace_inline_style', inlineStyle);
-       test.expectedOutput = 'PASS';
+       test.expectedOutput = 'PASS\n' +
+           'amp4email_feature_tests/css_length.html:23:0 Tag \'html\' ' +
+           'marked with attribute \'amp4email\' is missing the corresponding ' +
+           'attribute \'data-css-strict\' for enabling strict CSS ' +
+           'validation. This may become an error in the future. ' +
+           '(see https://github.com/ampproject/amphtml/issues/32587)';
        test.run();
      });
 
@@ -797,14 +748,20 @@ describe('Validator.CssLengthAmpEmail', () => {
            test.ampHtmlFileContents.replace('.replace_amp_custom {}', '')
                .replace('replace_inline_style', inlineStyle);
        test.expectedOutputFile = null;
-       // TODO(gregable): This should not pass, as we have more than 75,000
-       // bytes of inline style.
+       // TODO(gregable): This should not pass for the case when there are more
+       // than 75,000 bytes of inline style.
        test.expectedOutput = 'PASS\n' +
-           'amp4email_feature_tests/css_length.html:34:6 The author stylesheet ' +
-           'specified in tag \'style amp-custom\' and the combined inline styles ' +
-           'is too large - document contains 75010 bytes whereas the limit is ' +
-           '75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/' +
-           'learn/spec/amphtml#maximum-size)';
+           'amp4email_feature_tests/css_length.html:23:0 Tag \'html\' ' +
+           'marked with attribute \'amp4email\' is missing the corresponding ' +
+           'attribute \'data-css-strict\' for enabling strict CSS ' +
+           'validation. This may become an error in the future. ' +
+           '(see https://github.com/ampproject/amphtml/issues/32587)\n' +
+           'amp4email_feature_tests/css_length.html:34:6 The author ' +
+           'stylesheet specified in tag \'style amp-custom\' and the ' +
+           'combined inline styles is too large - document contains 75010 ' +
+           'bytes whereas the limit is 75000 bytes. ' +
+           '(see https://amp.dev/documentation/guides-and-tutorials/learn/' +
+           'spec/amphtml/#maximum-size)';
        test.run();
      });
 
@@ -823,11 +780,16 @@ describe('Validator.CssLengthAmpEmail', () => {
        // TODO(gregable): This should not pass, as we have more than 75,000
        // bytes of total style.
        test.expectedOutput = 'PASS\n' +
+           'amp4email_feature_tests/css_length.html:23:0 Tag \'html\' ' +
+           'marked with attribute \'amp4email\' is missing the corresponding ' +
+           'attribute \'data-css-strict\' for enabling strict CSS ' +
+           'validation. This may become an error in the future. ' +
+           '(see https://github.com/ampproject/amphtml/issues/32587)\n' +
            'amp4email_feature_tests/css_length.html:7534:6 The author ' +
            'stylesheet specified in tag \'style amp-custom\' and the ' +
            'combined inline styles is too large - document contains 75014 ' +
            'bytes whereas the limit is 75000 bytes. (see https://amp.dev/' +
-           'documentation/guides-and-tutorials/learn/spec/amphtml' +
+           'documentation/guides-and-tutorials/learn/spec/amphtml/' +
            '#maximum-size)';
        test.run();
      });
@@ -848,7 +810,7 @@ describe('Validator.CssLengthWithUrls', () => {
 
   // We use a blob of length 10 (both bytes and chars) to make it easy to
   // construct stylesheets of any length that we want.
-  const validStyleBlob = 'h1 {a: b}\n';
+  const validStyleBlob = 'h1{top:0}\n';
   assertStrictEqual(10, validStyleBlob.length);
 
   it('will accept 75010 bytes in author stylesheet that includes an URL ' +
@@ -873,7 +835,7 @@ describe('Validator.CssLengthWithUrls', () => {
            'specified in tag \'style amp-custom\' is too long - document ' +
            'contains 75010 bytes whereas the limit is 75000 bytes. ' +
            '(see https://amp.dev/documentation/guides-and-tutorials/' +
-           'learn/spec/amphtml#maximum-size)';
+           'learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 
@@ -899,7 +861,7 @@ describe('Validator.CssLengthWithUrls', () => {
            'specified in tag \'style amp-custom\' is too long - document ' +
            'contains 75010 bytes whereas the limit is 75000 bytes. ' +
            '(see https://amp.dev/documentation/guides-and-tutorials/' +
-           'learn/spec/amphtml#maximum-size)';
+           'learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 
@@ -925,7 +887,7 @@ describe('Validator.CssLengthWithUrls', () => {
            'specified in tag \'style amp-custom\' is too long - document ' +
            'contains 75010 bytes whereas the limit is 75000 bytes. ' +
            '(see https://amp.dev/documentation/guides-and-tutorials/' +
-           'learn/spec/amphtml#maximum-size)';
+           'learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 
@@ -943,7 +905,7 @@ describe('Validator.CssLengthWithUrls', () => {
                .replace('replace_inline_style', inlineStyle);
        test.expectedOutputFile = null;
        test.expectedOutput = 'FAIL\n' +
-           'feature_tests/css_length.html:36:6 The author stylesheet specified in tag \'style amp-custom\' and the combined inline styles is too large - document contains 75009 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size)';
+           'feature_tests/css_length.html:36:6 The author stylesheet specified in tag \'style amp-custom\' and the combined inline styles is too large - document contains 75009 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 
@@ -961,7 +923,7 @@ describe('Validator.CssLengthWithUrls', () => {
                .replace('replace_inline_style', inlineStyle);
        test.expectedOutputFile = null;
        test.expectedOutput = 'FAIL\n' +
-           'feature_tests/css_length.html:36:6 The author stylesheet specified in tag \'style amp-custom\' and the combined inline styles is too large - document contains 75009 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size)';
+           'feature_tests/css_length.html:36:6 The author stylesheet specified in tag \'style amp-custom\' and the combined inline styles is too large - document contains 75009 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 });
@@ -978,7 +940,7 @@ describe('ValidatorTransformedAmp.CssLengthWithUrls', () => {
 
   // We use a blob of length 10 (both bytes and chars) to make it easy to
   // construct stylesheets of any length that we want.
-  const validStyleBlob = 'h1 {a: b}\n';
+  const validStyleBlob = 'h1{top:0}\n';
   assertStrictEqual(10, validStyleBlob.length);
 
   it('will accept 75010 bytes in author stylesheet that includes an URL ' +
@@ -1049,7 +1011,7 @@ describe('ValidatorTransformedAmp.CssLengthWithUrls', () => {
            'is too long - document contains 75010 bytes whereas the limit ' +
            'is 75000 bytes. ' +
            '(see https://amp.dev/documentation/guides-and-tutorials/' +
-           'learn/spec/amphtml#maximum-size)';
+           'learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 
@@ -1067,7 +1029,7 @@ describe('ValidatorTransformedAmp.CssLengthWithUrls', () => {
                .replace('replace_inline_style', inlineStyle);
        test.expectedOutputFile = null;
        test.expectedOutput = 'FAIL\n' +
-           'feature_tests/css_length.html:36:6 The author stylesheet specified in tag \'style amp-custom\' and the combined inline styles is too large - document contains 75009 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size)';
+           'feature_tests/css_length.html:36:6 The author stylesheet specified in tag \'style amp-custom\' and the combined inline styles is too large - document contains 75009 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 
@@ -1085,7 +1047,7 @@ describe('ValidatorTransformedAmp.CssLengthWithUrls', () => {
                .replace('replace_inline_style', inlineStyle);
        test.expectedOutputFile = null;
        test.expectedOutput = 'FAIL\n' +
-           'feature_tests/css_length.html:36:6 The author stylesheet specified in tag \'style amp-custom\' and the combined inline styles is too large - document contains 75009 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size)';
+           'feature_tests/css_length.html:36:6 The author stylesheet specified in tag \'style amp-custom\' and the combined inline styles is too large - document contains 75009 bytes whereas the limit is 75000 bytes. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size)';
        test.run();
      });
 });
@@ -1376,8 +1338,8 @@ function attrRuleShouldMakeSense(attrSpec, tagSpec, rules) {
   // dispatch_key
   if (attrSpec.dispatchKey !== null && attrSpec.dispatchKey) {
     it('mandatory must be true when dispatch_key is true', () => {
-      expect(attrSpec.mandatory).toBeDefined();
-      expect(attrSpec.mandatory).toBe(true);
+      expect(attrSpec.mandatory === true || attrSpec.mandatoryOneof !== null)
+          .toBe(true);
     });
   }
   // Value property names must be unique.
@@ -1439,7 +1401,6 @@ function typeIdentifiersShouldMakeSense(spec, specType, specName) {
     'amp': 0,
     'amp4ads': 0,
     'amp4email': 0,
-    'actions': 0,
     'transformed': 0,
     'data-css-strict': 0
   };
@@ -1561,7 +1522,8 @@ describe('ValidatorRulesMakeSense', () => {
         expect(specNameIsUnique.hasOwnProperty(tagSpec.specName)).toBe(false);
         specNameIsUnique[tagSpec.specName] = 0;
       } else if (tagSpec.extensionSpec !== null) {
-        const specName = tagSpec.extensionSpec.name + ' extension .js script';
+        const specName = tagSpec.extensionSpec.name + ' ' +
+            tagSpec.extensionSpec.versionName + ' extension script';
 
         expect(specNameIsUnique.hasOwnProperty(specName)).toBe(false);
         specNameIsUnique[specName] = 0;
@@ -1571,6 +1533,11 @@ describe('ValidatorRulesMakeSense', () => {
         tagWithoutSpecNameIsUnique[tagSpec.tagName] = 0;
       }
     });
+    it('reference points must set descriptive_name', () => {
+      if (tagSpec.tagName == '$REFERENCE_POINT') {
+        expect(tagSpec.descriptiveName !== null);
+      }
+    });
     if ((tagSpec.enabledBy.length > 0) || (tagSpec.disabledBy.length > 0)) {
       typeIdentifiersShouldMakeSense(tagSpec, 'tag_spec', tagSpecName);
     }
@@ -1586,9 +1553,9 @@ describe('ValidatorRulesMakeSense', () => {
         (tagSpec.htmlFormat.indexOf(generated.HtmlFormat.Code.AMP4ADS) !==
          -1)) {
       // AMP4ADS format lists approved extensions.
-      // https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/amp-a4a-format.md#amp-extensions-and-builtins
+      // https://github.com/ampproject/amphtml/blob/main/extensions/amp-a4a/amp-a4a-format.md#amp-extensions-and-builtins
       // Changes to the following map must be approved by the Ads Working
-      // Group, @wg-ads.
+      // Group, @wg-monetization.
       const approvedAmp4AdsExtensions = {
         'amp-accordion': ['0.1', 'latest'],
         'amp-ad-exit': ['0.1', 'latest'],
@@ -1628,7 +1595,7 @@ describe('ValidatorRulesMakeSense', () => {
           it(extension + ' has html_format either explicitly or implicitly' +
                  ' set for AMP4ADS but ' + extension + ' version ' + version +
                  ' is not approved for AMP4ADS. If this version is intended' +
-                 ' for AMP4ADS please get approval from @wg-ads and then' +
+                 ' for AMP4ADS please get approval from @wg-monetization and then' +
                  ' update this test. Otherwise remove the version for' +
                  ' AMP4ADS from the tagspec',
              () => {
@@ -1715,7 +1682,6 @@ describe('ValidatorRulesMakeSense', () => {
     }
 
     // attr_specs within tag.
-    let seenDispatchKey = false;
     const attrNameIsUnique = {};
     for (const attrSpecId of tagSpec.attrs) {
       if (attrSpecId < 0) {
@@ -1756,14 +1722,6 @@ describe('ValidatorRulesMakeSense', () => {
                  .toBe(true);
            });
       }
-      if (attrSpec.dispatchKey) {
-        it('tag_spec ' + tagSpecName +
-               ' can not have more than one dispatch_key',
-           () => {
-             expect(seenDispatchKey).toBe(false);
-             seenDispatchKey = true;
-           });
-      }
     }
 
     // generated.TagSpecs with an ExtensionSpec are extensions. We have a few
@@ -1811,7 +1769,7 @@ describe('ValidatorRulesMakeSense', () => {
            // it's sufficiently wrapped in private context inside the validator
            // that I don't see a way to call it.  For now just gold the current
            // index.
-           expect(tagSpec.attrLists[0]).toEqual(20);
+           expect(tagSpec.attrLists[0]).toEqual(15);
          });
     }
 
@@ -1880,6 +1838,7 @@ describe('ValidatorRulesMakeSense', () => {
               tagSpec.cdata.cdataRegex !== null ||
               tagSpec.cdata.mandatoryCdata !== null ||
               tagSpec.cdata.maxBytes === -1 ||
+              tagSpec.cdata.whitespaceOnly !== null ||
               tagSpec.cdata.cssSpec.validateKeyframes)
               .toBe(true);
         });
@@ -1894,6 +1853,7 @@ describe('ValidatorRulesMakeSense', () => {
         let hasTextPlain = false;
         let hasOctetStream = false;
         let hasCiphertext = false;
+        let hasAmpOnerror = false;
         for (const attrSpecId of tagSpec.attrs) {
           if (attrSpecId < 0) {
             continue;
@@ -1919,13 +1879,16 @@ describe('ValidatorRulesMakeSense', () => {
               }
             }
           }
+          if (attrSpec.name === 'amp-onerror') {
+            hasAmpOnerror = true;
+          }
         }
         it('script tags must have either a src attribute or type json, ' +
                'octet-stream (during SwG encryption), or text/plain',
            () => {
              expect(
                  hasSrc || hasJson || hasTextPlain ||
-                 (hasOctetStream && hasCiphertext))
+                 (hasOctetStream && hasCiphertext) || hasAmpOnerror)
                  .toBe(true);
            });
       }
diff --git a/validator/js/gulpjs/README.md b/validator/js/gulpjs/README.md
new file mode 100644
index 0000000000000..5764aab51778f
--- /dev/null
+++ b/validator/js/gulpjs/README.md
@@ -0,0 +1,72 @@
+# Gulp AMPHTML Validator
+
+A Gulp plugin for validating [AMPHTML files](https://ampproject.org) using the official [AMPHTML Validator](https://www.npmjs.com/package/amphtml-validator).
+
+## Installation
+
+Install package with npm and add it to your development dependencies:
+
+```sh
+npm install --save-dev gulp-amphtml-validator
+```
+
+## Usage
+
+```js
+const gulpAmpValidator = require('gulp-amphtml-validator');
+
+gulp.task('amphtml:validate', () => {
+  return (
+    gulp
+      .src('*.html')
+      // Validate the input and attach the validation result to the "amp" property
+      // of the file object.
+      .pipe(gulpAmpValidator.validate())
+      // Print the validation results to the console.
+      .pipe(gulpAmpValidator.format())
+      // Exit the process with error code (1) if an AMP validation error
+      // occurred.
+      .pipe(gulpAmpValidator.failAfterError())
+  );
+});
+```
+
+To treat warnings as errors, replace the last line of the validation closure with:
+
+```js
+// Exit the process with error code (1) if an AMP validation warning or
+// error occurred.
+.pipe(gulpAmpValidator.failAfterWarningOrError());
+```
+
+## Release Notes
+
+### 1.0.6
+
+-   Use fancy-log log.info (#30744)
+
+### 1.0.5
+
+-   Update repository location.
+
+### 1.0.4
+
+-   Update amphtml-validator dependency to 1.0.30, gulp to 4.0.2 and mocha to
+    7.0.1.
+
+### 1.0.3
+
+-   Remove engine section from pacakge.json to allow any version of gulpjs.
+
+### 1.0.2
+
+-   Add failAfterWarningOrError option
+-   Upgrade amphtml-validator version to 1.0.21
+
+### 1.0.1
+
+-   Upgrade amphtml-validator version to 1.0.18
+
+### 1.0.0
+
+-   initial release
diff --git a/validator/js/gulpjs/index.js b/validator/js/gulpjs/index.js
new file mode 100755
index 0000000000000..4508415dbcb45
--- /dev/null
+++ b/validator/js/gulpjs/index.js
@@ -0,0 +1,184 @@
+/**
+ * @license
+ * Copyright 2016 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 amphtmlValidator = require('amphtml-validator');
+const colors = require('kleur/colors');
+const through = require('through2');
+
+const PLUGIN_NAME = 'gulp-amphtml-validator';
+const PluginError = require('plugin-error');
+
+const STATUS_FAIL = 'FAIL';
+const STATUS_PASS = 'PASS';
+const STATUS_UNKNOWN = 'UNKNOWN';
+
+/**
+ * Validates AMP files and attaches the validation result to the file object.
+ *
+ * @param {?Object} validator - amphtml validator
+ * @return {!stream} gulp file stream
+ */
+module.exports.validate = function(validator) {
+
+  if (!validator) {
+    validator = amphtmlValidator;
+  }
+
+  function runValidation(file, encoding, callback) {
+    if (file.isNull()) {
+      return callback(null, file);
+    }
+    if (file.isStream()) {
+      this.emit('error', new PluginError(PLUGIN_NAME,
+          'Streams not supported!'));
+    }
+    if (file.isBuffer()) {
+      validator.getInstance()
+          .then(function(validatorInstance) {
+            const inputString = file.contents.toString();
+            file.ampValidationResult =
+                validatorInstance.validateString(inputString);
+            return callback(null, file);
+          })
+          .catch(function(err) {
+          // This happens if the validator download failed. We don't fail the
+          // build, but map the exception to an validation error instead. This
+          // makes it possible to configure via failAfterError whether this
+          // should fail the build or not.
+            console.log(colors.red(err.message));
+            file.ampValidationResult = {
+              status: STATUS_UNKNOWN,
+            };
+            return callback(null, file);
+          });
+    }
+  }
+  return through.obj(runValidation);
+};
+
+/**
+ * Formats and prints the validation results to the console.
+ *
+ * @param {?Object} logger - logger used for printing the results (optional)
+ * @return {!stream} gulp file stream
+ */
+module.exports.format = function(logger) {
+
+  const results = [];
+  if (!logger) {
+    logger = console.log;
+  }
+
+  function collectResults(file, encoding, callback) {
+    if (!file.isNull() && file.ampValidationResult) {
+      results.push(file);
+    }
+    return callback(null, file);
+  }
+
+  function formatResults(callback) {
+    logger.info('AMP Validation results:\n\n' +
+        results.map(printResult).join('\n'));
+    return callback();
+  }
+
+  function printResult(file) {
+    const validationResult = file.ampValidationResult;
+    let report = file.relative + ': ';
+    if (validationResult.status === STATUS_PASS) {
+      report += colors.green(validationResult.status);
+      report += '\nReview our \'publishing checklist\' to ensure '
+          + 'successful AMP document distribution. '
+          + 'See https://go.amp.dev/publishing-checklist';
+    } else if (validationResult.status === STATUS_UNKNOWN) {
+      report += colors.red(validationResult.status);
+    } else {
+      report += colors.red(validationResult.status);
+      for (let ii = 0; ii < validationResult.errors.length; ii++) {
+        const error = validationResult.errors[ii];
+        let msg = file.relative + ':' + error.line + ':' + error.col + ' ' +
+          colors.red(error.message);
+        if (error.specUrl) {
+          msg += ' (see ' + error.specUrl + ')';
+        }
+        report += '\n' + msg;
+      }
+    }
+    return report;
+  }
+
+  return through.obj(collectResults, formatResults);
+};
+
+/**
+ * Fail when the stream ends if for any AMP validation results,
+ * isFailure(ampValidationResult) returns true.
+ *
+ * @param {function(amphtmlValidator.ValidationResult): boolean} isFailure
+ * @return {!stream} gulp file stream
+ */
+function failAfter(isFailure) {
+  let failedFiles = 0;
+
+  function collectFailedFiles(file, encoding, callback) {
+    if (file.isNull() || !file.ampValidationResult) {
+      return callback(null, file);
+    }
+    if (isFailure(file.ampValidationResult)) {
+      failedFiles++;
+    }
+    return callback(null, file);
+  }
+
+  function failOnError(callback) {
+    if (failedFiles > 0) {
+      this.emit('error', new PluginError(PLUGIN_NAME,
+          '\nAMPHTML Validation failed for ' + failedFiles + ' files.'));
+    }
+    callback();
+  }
+
+  return through.obj(collectFailedFiles, failOnError);
+}
+
+/**
+ * Fail when the stream ends if any AMP validation error(s) occurred.
+ *
+ * @return {!stream} gulp file stream
+ */
+module.exports.failAfterError = function() {
+  return failAfter(function(ampValidationResult) {
+    return ampValidationResult.status === STATUS_FAIL ||
+        ampValidationResult.status === STATUS_UNKNOWN;
+  });
+};
+
+/**
+ * Fail when the stream ends if any AMP validation warning(s) or
+ * error(s) occurred.
+ *
+ * @return {!stream} gulp file stream
+ */
+module.exports.failAfterWarningOrError = function() {
+  return failAfter(function(ampValidationResult) {
+    return ampValidationResult.errors.length > 0 ||
+        ampValidationResult.status === STATUS_FAIL ||
+        ampValidationResult.status === STATUS_UNKNOWN;
+  });
+};
diff --git a/validator/js/gulpjs/package.json b/validator/js/gulpjs/package.json
new file mode 100644
index 0000000000000..929ace7ab9256
--- /dev/null
+++ b/validator/js/gulpjs/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "gulp-amphtml-validator",
+  "version": "1.0.6",
+  "description": "Gulp plugin for the official AMP HTML validator (www.ampproject.org)",
+  "keywords": [
+    "gulpplugin",
+    "AMP",
+    "validator",
+    "validate",
+    "AMP HTML",
+    "Accelerated Mobile Pages"
+  ],
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml/tree/main/validator/js/gulpjs"
+  },
+  "dependencies": {
+    "amphtml-validator": "1.0.35",
+    "through2": "4.0.2"
+  },
+  "devDependencies": {
+    "gulp": "4.0.2",
+    "mocha": "8.4.0"
+  },
+  "scripts": {
+    "test": " ./node_modules/mocha/bin/mocha",
+    "run-sample": " ./run_sample.sh"
+  }
+}
diff --git a/validator/gulpjs/run_sample.sh b/validator/js/gulpjs/run_sample.sh
similarity index 100%
rename from validator/gulpjs/run_sample.sh
rename to validator/js/gulpjs/run_sample.sh
diff --git a/validator/gulpjs/sample/gulpfile.js b/validator/js/gulpjs/sample/gulpfile.js
similarity index 100%
rename from validator/gulpjs/sample/gulpfile.js
rename to validator/js/gulpjs/sample/gulpfile.js
diff --git a/validator/gulpjs/test/validate.js b/validator/js/gulpjs/test/validate.js
similarity index 100%
rename from validator/gulpjs/test/validate.js
rename to validator/js/gulpjs/test/validate.js
diff --git a/validator/js/nodejs/README.md b/validator/js/nodejs/README.md
new file mode 100644
index 0000000000000..a32d7309a4d37
--- /dev/null
+++ b/validator/js/nodejs/README.md
@@ -0,0 +1,177 @@
+# amphtml-validator Node.js Package
+
+This package is published and available at
+https://www.npmjs.com/package/amphtml-validator.
+
+The source code is available at
+https://github.com/ampproject/amphtml/tree/main/validator/js/nodejs.
+
+## Command Line Tool
+
+The `amphtml-validator` command line tool is documented here:
+https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp#command-line-tool
+
+## Node.js API
+
+This API is new - feedback is especially welcome.
+
+To install, use `npm install amphtml-validator` in your project directory,
+or add `amphtml-validator` as a dependency to your package.json.
+
+You may save the following example into a file, e.g., `demo.js`.
+
+```js
+'use strict';
+var amphtmlValidator = require('amphtml-validator');
+
+amphtmlValidator.getInstance().then(function (validator) {
+  var result = validator.validateString('<html>Hello, world.</html>');
+  (result.status === 'PASS' ? console.log : console.error)(result.status);
+  for (var ii = 0; ii < result.errors.length; ii++) {
+    var error = result.errors[ii];
+    var msg =
+      'line ' + error.line + ', col ' + error.col + ': ' + error.message;
+    if (error.specUrl !== null) {
+      msg += ' (see ' + error.specUrl + ')';
+    }
+    (error.severity === 'ERROR' ? console.error : console.warn)(msg);
+  }
+});
+```
+
+Now try running it:
+
+```sh
+$ node demo.js
+FAIL
+line 1, col 0: The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+line 1, col 0: The parent tag of tag 'html ⚡ for top-level html' is '$root', but it can only be '!doctype'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml.html#required-markup)
+...
+```
+
+As expected, this emits errors because the provided string in the example, `<html>Hello, world.</html>` is not a valid AMP HTML document.
+
+The method `validateString` also takes a `htmlFormat` parameter which
+would allow applying the validator rules for `AMP4ADS` or `AMP4EMAIL` as well. `validateString(inputString, htmlFormat).
+
+```js
+/**
+ * Validates the provided inputString; the htmlFormat can be 'AMP' or
+ * 'AMP4ADS'; it defaults to 'AMP' if not specified.
+ * @param {string} inputString
+ * @param {string=} htmlFormat
+ * @return {!ValidationResult}
+ * @export
+ */
+```
+
+## Release Notes
+
+### 1.0.35
+
+-   Set default engine to the WebAssembly version validator, which is
+    `https://cdn.ampproject.org/v0/validator_wasm.js`.
+    [ampproject/amphtml #34213](https://github.com/ampproject/amphtml/pull/34213)
+
+### 1.0.34
+
+-   Updated `colors` dependency version (ampproject/amphtml #31656).
+
+### 1.0.33
+
+-   Update repository location.
+
+### 1.0.32
+
+-   Removal of AMP Actions format as it is deprecated.
+
+### 1.0.31
+
+-   Fix Node API on Node > 12
+
+### 1.0.30
+
+-   Remove engine section from pacakge.json to allow any version of nodejs.
+
+### 1.0.29
+
+-   Reintroduce node v8 support. Supports node v8, v10, v12 and v14.
+
+### 1.0.28
+
+-   Reintroduce node v10 support and introduce node v14 support.
+
+### 1.0.27
+
+-   Removed references to amp.validator.categorizeError.
+
+### 1.0.26
+
+-   Introduce node v12 support and remove node v10 support.
+
+### 1.0.25
+
+-   Broken release, removed.
+
+### 1.0.24
+
+-   Introduce node v10 support and remove node 8 support.
+
+### 1.0.23
+
+-   The amphtml-validator binary now requires the Node.js binary to be called node.
+    On systems where the Node.js binary is called nodejs, consider installing
+    the nodejs-legacy Debian package or better yet, NVM.
+
+### 1.0.22
+
+-   --html_format=AMP4EMAIL added.
+
+### 1.0.21
+
+-   --html_format=AMP4ADS is no longer experimental.
+
+### 1.0.20
+
+-   Better npm post-install for virtual machines, running debian over windows with SMB shared folder.
+
+### 1.0.19
+
+-   Set correct process exit status for old versions of Node.js (v0.10.25).
+
+### 1.0.18
+
+-   Small tweaks to this file and package.json.
+
+### 1.0.17
+
+-   If the amphtml-validator command is already patched up for Windows, leave it
+    alone instead of failing. Relevant if the package has been installed globally
+    and now we're performing a local install on top of it.
+
+### 1.0.16
+
+-   `npm install amphtml-validator` (local install) should now work on Windows,
+    for `require('amphtml-validator')`.
+
+### 1.0.15
+
+-   Added support for installing on Windows.
+    `npm install -g amphtml-validator` should now just work.
+
+### 1.0.13
+
+-   Added newInstance method, a simple API that's not async.
+
+### 1.0.12
+
+-   Added support for --user-agent option.
+
+### 1.0.11
+
+-   Added support for AMP4ADS (via --html_format command line flag) and
+    argument for validateString function in the API.
+
+### 1.0.10
+
+-   Fixed [#4246: amphtml-validator CLI fails on Mac OS X](https://github.com/ampproject/amphtml/issues/4246).
diff --git a/validator/nodejs/cli.js b/validator/js/nodejs/cli.js
similarity index 100%
rename from validator/nodejs/cli.js
rename to validator/js/nodejs/cli.js
diff --git a/validator/js/nodejs/index.js b/validator/js/nodejs/index.js
new file mode 100755
index 0000000000000..5021d6fa091e0
--- /dev/null
+++ b/validator/js/nodejs/index.js
@@ -0,0 +1,514 @@
+/**
+ * @license
+ * Copyright 2016 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 colors = require('colors/safe');
+const fs = require('fs');
+const http = require('http');
+const https = require('https');
+const path = require('path');
+const program = require('commander');
+const Promise = require('promise');
+const querystring = require('querystring');
+const url = require('url');
+const util = require('util');
+const vm = require('vm');
+
+const DEFAULT_USER_AGENT = 'amphtml-validator';
+
+/**
+ * Determines if str begins with prefix.
+ * @param {string} str
+ * @param {string} prefix
+ * @return {boolean}
+ */
+function hasPrefix(str, prefix) {
+  return str.indexOf(prefix) == 0;
+}
+
+/**
+ * Convenience function to detect whether an argument is a URL. If not,
+ * it may be a local file.
+ * @param {string} url
+ * @return {boolean}
+ */
+function isHttpOrHttpsUrl(url) {
+  return hasPrefix(url, 'http://') || hasPrefix(url, 'https://');
+}
+
+/**
+ * Creates a promise which reads from a file.
+ * @param {string} name
+ * @return {Promise<string>}
+ */
+function readFromFile(name) {
+  return new Promise(function(resolve, reject) {
+    fs.readFile(name, 'utf8', function(err, data) {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(data.trim());
+      }
+    });
+  });
+}
+
+/**
+ * Creates a promise which reads from a stream.
+ * @param {string} name
+ * @param {!stream.Readable} readable
+ * @return {Promise<string>}
+ */
+function readFromReadable(name, readable) {
+  return new Promise(function(resolve, reject) {
+    const chunks = [];
+    readable.setEncoding('utf8');
+    readable.on('data', function(chunk) {
+      chunks.push(chunk);
+    });
+    readable.on('end', function() {
+      resolve(chunks.join(''));
+    });
+    readable.on('error', function(error) {
+      reject(new Error('Could not read from ' + name + ' - ' + error.message));
+    });
+  });
+}
+
+/**
+ * Creates a promise which reads from standard input. Even though it would
+ * be easy to make a function that just returns the data, we return a promise
+ * for consistency with readFromUrl and readFromFile.
+ * @return {Promise<string>}
+ */
+function readFromStdin() {
+  return readFromReadable('stdin', process.stdin).then(function(data) {
+    process.stdin.resume();
+    return data;
+  });
+}
+
+/**
+ * Creates a promise which reads from a URL or more precisely, fetches
+ * the contents located at the URL by using the 'http' or 'https' module.
+ * Any HTTP status other than 200 is interpreted as an error.
+ * @param {string} url
+ * @param {string} userAgent
+ * @return {Promise<string>}
+ */
+function readFromUrl(url, userAgent) {
+  return new Promise(function(resolve, reject) {
+    const clientModule = hasPrefix(url, 'http://') ? http : https;
+    const req = clientModule.request(url, function(response) {
+      if (response.statusCode !== 200) {
+        // https://nodejs.org/api/http.html says: "[...] However, if
+        // you add a 'response' event handler, then you must consume
+        // the data from the response object, either by calling
+        // response.read() whenever there is a 'readable' event, or by
+        // adding a 'data' handler, or by calling the .resume()
+        // method."
+        response.resume();
+        reject(new Error(
+            'Unable to fetch ' + url + ' - HTTP Status ' +
+                   response.statusCode));
+      } else {
+        resolve(response);
+      }
+    });
+    req.setHeader('User-Agent', userAgent);
+    req.on('error', function(error) { // E.g., DNS resolution errors.
+      reject(
+          new Error('Unable to fetch ' + url + ' - ' + error.message));
+    });
+    req.end();
+  })
+      .then(readFromReadable.bind(null, url));
+}
+
+/**
+ * ValidationResult is the record computed by the validator for each
+ * document. It contains an overall status (PASS/FAIL) and the list of
+ * errors, if any. This class corresponds to the ValidationResult
+ * message in validator.proto in this directory.
+ * @export
+ * @constructor
+ */
+function ValidationResult() {
+  /**
+   * Possible values are 'UNKNOWN', 'PASS', and 'FAIL'.
+   * @type {string}
+   */
+  this.status = 'UNKNOWN';
+  /** @type {!Array<!ValidationError>} */
+  this.errors = [];
+}
+
+/**
+ * Each validation error describes a specific problem in a validated
+ * document. This class corresponds to the ValidationError message in
+ * validator.proto in this directory.
+ * @export
+ * @constructor
+ */
+function ValidationError() {
+  /**
+   * The severity of the error - possible values are 'UNKNOWN_SEVERITY',
+   * 'ERROR', and 'WARNING'.
+   */
+  this.severity = 'UNKNOWN_SEVERITY';
+  /**
+   * The line number at which the error was seen (1 is the first line).
+   */
+  this.line = 1;
+  /**
+   * The column number at which the error was seen (0 is the first column).
+   */
+  this.col = 0;
+  /**
+   * A human-readable error message for the validation error.
+   * If you find yourself trying to write a parser against this string
+   * to scrape out some detail, consider looking at the code and params
+   * fields below.
+   * @type {string}
+   */
+  this.message = '';
+  /**
+   * The spec URL is often added by the validator to provide additional
+   * context for the error. In a user interface this would be shown
+   * as a "Learn more" link.
+   * @type {string}
+   */
+  this.specUrl = null;
+  /**
+   * This field is only useful when scripting against the validator,
+   * it should not be displayed in a user interface as it adds nothing
+   * for humans to read over the message field (see above).
+   * Possible values are the codes listed in ValidationError.Code - see
+   * validator.proto. Examples: 'UNKNOWN_CODE', 'MANDATORY_TAG_MISSING',
+   * 'TAG_REQUIRED_BY_MISSING'. For each of these codes there is a
+   * format string in validator-main.protoascii (look for error_formats),
+   * which is used to assemble the message from the strings in params.
+   * @type {string}
+   */
+  this.code = 'UNKNOWN_CODE';
+  /**
+   * This field is only useful when scripting against the validator,
+   * it should not be displayed in a user interface as it adds nothing
+   * for humans to read over the message field (see above).
+   * @type {!Array<string>}
+   */
+  this.params = [];
+}
+
+/**
+ * The validator instance is a proxy object to a precompiled
+ * validator_wasm.js script - in practice the script was either downloaded
+ * from 'https://cdn.ampproject.org/v0/validator_wasm.js' or read from a
+ * local file.
+ * @param {string} scriptContents
+ * @throws {!Error}
+ * @constructor
+ */
+function Validator(scriptContents) {
+  // The 'sandbox' is a Javascript object (dictionary) which holds
+  // the results of evaluating the validatorJs / scriptContents, so
+  // basically, it holds functions, prototypes, etc. As a
+  // side-effect of evaluating, the VM will compile this code and
+  // it's worth holding onto it. Hence, this validate function is
+  // reached via 2 codepaths - either the sandbox came from the
+  // cache, precompiledByValidatorJs - or we just varructed it
+  // after downloading and evaluating the script. The API is fancier
+  // here, vm.Script / vm.createContext / vm.runInContext and all
+  // that, but it's quite similar to a Javascript eval.
+  this.sandbox = vm.createContext();
+  try {
+    new vm.Script(scriptContents).runInContext(this.sandbox);
+  } catch (error) {
+    throw new Error('Could not instantiate validator_wasm.js - ' +
+        error.message);
+  }
+}
+
+/**
+ * Initialize the validator.
+ * @return {Promise<undefined>!}
+ */
+Validator.prototype.init = function() {
+  if (this.sandbox.amp.validator.init) {
+    return this.sandbox.amp.validator.init();
+  } else {
+    return Promise.resolve(undefined);
+  }
+};
+
+/**
+ * Validates the provided inputString; the htmlFormat can be 'AMP' or
+ * 'AMP4ADS'; it defaults to 'AMP' if not specified.
+ * @param {string} inputString
+ * @param {string=} htmlFormat
+ * @return {!ValidationResult}
+ * @export
+ */
+Validator.prototype.validateString = function(inputString, htmlFormat) {
+  const internalResult =
+      this.sandbox.amp.validator.validateString(inputString, htmlFormat);
+  const result = new ValidationResult();
+  result.status = internalResult.status;
+  for (let ii = 0; ii < internalResult.errors.length; ii++) {
+    const internalError = internalResult.errors[ii];
+    const error = new ValidationError();
+    error.severity = internalError.severity;
+    error.line = internalError.line;
+    error.col = internalError.col;
+    error.message =
+        this.sandbox.amp.validator.renderErrorMessage(internalError);
+    error.specUrl = internalError.specUrl;
+    error.code = internalError.code;
+    error.params = internalError.params;
+    result.errors.push(error);
+  }
+  return result;
+};
+
+/**
+ * A global static map used by the getInstance function to avoid loading
+ * AMP Validators more than once.
+ * @type {!Object<string, Validator>}
+ */
+const instanceByValidatorJs = {};
+
+/**
+ * Provided a URL or a filename from which to fetch the validator_wasm.js
+ * file, fetches, instantiates, and caches the validator instance
+ * asynchronously.  If you prefer to implement your own fetching /
+ * caching logic, you may want to consider newInstance() instead,
+ * which is synchronous and much simpler.
+ *
+ * @param {string=} opt_validatorJs
+ * @param {string=} opt_userAgent
+ * @return {!Promise<Validator>}
+ * @export
+ */
+function getInstance(opt_validatorJs, opt_userAgent) {
+  const validatorJs =
+      opt_validatorJs || 'https://cdn.ampproject.org/v0/validator_wasm.js';
+  const userAgent = opt_userAgent || DEFAULT_USER_AGENT;
+  if (instanceByValidatorJs.hasOwnProperty(validatorJs)) {
+    return Promise.resolve(instanceByValidatorJs[validatorJs]);
+  }
+  const validatorJsPromise = isHttpOrHttpsUrl(validatorJs) ?
+    readFromUrl(validatorJs, userAgent) :
+    readFromFile(validatorJs);
+  return validatorJsPromise.then(function(scriptContents) {
+    let instance;
+    try {
+      instance = new Validator(scriptContents);
+    } catch (error) {
+      // It may be useful to cache errors and exceptions encountered
+      // here, but for now we don't do this for e.g. http errors when
+      // fetching the validator, so we shouldn't do it for syntax
+      // errors etc. either (which lead to the varructor throwing an error).
+      throw error;
+    }
+    instanceByValidatorJs[validatorJs] = instance;
+    return instance;
+  }).then(function(instance) {
+    return instance.init().then(() => instance);
+  });
+}
+exports.getInstance = getInstance;
+
+/**
+ * Provided the contents of the validator_wasm.js file, e.g. as downloaded from
+ * 'https://cdn.ampproject.org/v0/validator_wasm.js', returns a new validator
+ * instance. The tradeoff between this function and getInstance() is that this
+ * function is synchronous but requires the contents of the validator_wasm.js
+ * file as a parameter, while getInstance is asynchronous, fetches files
+ * from disk or the web, and caches them.
+ *
+ * @param {string} validatorJsContents
+ * @return {!Validator}
+ * @export
+ */
+function newInstance(validatorJsContents) {
+  return new Validator(validatorJsContents);
+}
+exports.newInstance = newInstance;
+
+// A note on emitting output to the console and process exit status:
+// Node.js prior to 0.11.8 did not support process.exitCode
+// (https://nodejs.org/api/process.html#process_process_exitcode), which
+// makes it difficult to emit output and errors from multiple callbacks
+// and set the appropriate exit code. We use the following workaround:
+// process.<<stream>>(<<some output>>, function() { process.exit(<<code>>); });
+// This will flush the appropriate stream (stdout or stderr) and then
+// exit with the provided code. For now, this makes the CLI work with
+// Node.js versions as old as v0.10.25.
+
+/**
+ * Logs a validation result to the console using process.stdout and
+ * process.stderr as is appropriate.
+ * @param {string} filename
+ * @param {!ValidationResult} validationResult
+ * @param {boolean} color
+ */
+function logValidationResult(filename, validationResult, color) {
+  if (validationResult.status === 'PASS') {
+    process.stdout.write(
+        filename + ': ' + (color ? colors.green('PASS') : 'PASS') + '\n');
+  }
+  for (let ii = 0; ii < validationResult.errors.length; ii++) {
+    const error = validationResult.errors[ii];
+    let msg = filename + ':' + error.line + ':' + error.col + ' ';
+    if (color) {
+      msg += (error.severity === 'ERROR' ? colors.red : colors.magenta)(
+          error.message);
+    } else {
+      msg += error.message;
+    }
+    if (error.specUrl) {
+      msg += ' (see ' + error.specUrl + ')';
+    }
+    // TODO(powdercloud): Should we distinguish error.severity === 'WARNING' ?
+    process.stderr.write(msg + '\n');
+  }
+}
+
+/**
+ * Main entry point into the command line tool.
+ */
+function main() {
+  program
+      .usage(
+          '[options] <fileOrUrlOrMinus...>\n\n' +
+          '  Validates the files or urls provided as arguments. If "-" is\n' +
+          '  specified, reads from stdin instead.')
+      .option(
+          '--validator_js <fileOrUrl>',
+          'The Validator Javascript.\n' +
+              '  Latest published version by default, or\n' +
+              '  dist/validator_minified.js (built with build.py)\n' +
+              '  for development.',
+          'https://cdn.ampproject.org/v0/validator_wasm.js')
+      .option(
+          '--user-agent <userAgent>', 'User agent string to use in requests.',
+          DEFAULT_USER_AGENT)
+      .option(
+          '--html_format <AMP|AMP4ADS|AMP4EMAIL>',
+          'The input format to be validated.\n' +
+              '  AMP by default.',
+          'AMP')
+      .option(
+          '--format <color|text|json>',
+          'How to format the output.\n' +
+              '  "color" displays errors/warnings/success in\n' +
+              '          red/orange/green.\n' +
+              '  "text"  avoids color (e.g., useful in terminals not\n' +
+              '          supporting color).\n' +
+              '  "json"  emits json corresponding to the ValidationResult\n' +
+              '          message in validator.proto.',
+          'color')
+      .parse(process.argv);
+  const opts = program.opts();
+  if (opts.length === 0) {
+    program.outputHelp();
+    process.exit(1);
+  }
+  if (opts.html_format !== 'AMP' && opts.html_format !== 'AMP4ADS' &&
+      opts.html_format !== 'AMP4EMAIL') {
+    process.stderr.write(
+        '--html_format must be set to "AMP", "AMP4ADS", or "AMP4EMAIL".\n',
+        function() {
+          process.exit(1);
+        });
+  }
+  if (opts.format !== 'color' && opts.format !== 'text' &&
+      opts.format !== 'json') {
+    process.stderr.write(
+        '--format must be set to "color", "text", or "json".\n', function() {
+          process.exit(1);
+        });
+  }
+  const inputs = [];
+  for (let ii = 0; ii < program.args.length; ii++) {
+    const item = program.args[ii];
+    if (item === '-') {
+      inputs.push(readFromStdin());
+    } else if (isHttpOrHttpsUrl(item)) {
+      inputs.push(readFromUrl(item, opts.userAgent));
+    } else {
+      inputs.push(readFromFile(item));
+    }
+  }
+  getInstance(opts.validator_js, opts.userAgent)
+      .then(function(validator) {
+        Promise.all(inputs)
+            .then(function(resolvedInputs) {
+              const jsonOut = {};
+              let hasError = false;
+              for (let ii = 0; ii < resolvedInputs.length; ii++) {
+                const validationResult = validator.validateString(
+                    resolvedInputs[ii], opts.html_format);
+                if (opts.format === 'json') {
+                  jsonOut[program.args[ii]] = validationResult;
+                } else {
+                  logValidationResult(
+                      program.args[ii], validationResult,
+                      opts.format === 'color' ? true : false);
+                }
+                if (validationResult.status !== 'PASS') {
+                  hasError = true;
+                }
+              }
+              if (opts.format === 'json') {
+                process.stdout.write(
+                    JSON.stringify(jsonOut) + '\n', function() {
+                      process.exit(hasError ? 1 : 0);
+                    });
+              } else if (hasError) {
+                process.stderr.write('', function() {
+                  process.exit(1);
+                });
+              } else {
+                process.stdout.write('', function() {
+                  process.exit(0);
+                });
+              }
+            })
+            .catch(function(error) {
+              process.stderr.write(
+                  (opts.format == 'color' ? colors.red(error.message) :
+                    error.message) +
+                      '\n',
+                  function() {
+                    process.exit(1);
+                  });
+            });
+      })
+      .catch(function(error) {
+        process.stderr.write(
+            (opts.format == 'color' ? colors.red(error.message) :
+              error.message) +
+                '\n',
+            function() {
+              process.exit(1);
+            });
+      });
+}
+
+exports.main = main;
diff --git a/validator/nodejs/index_test.js b/validator/js/nodejs/index_test.js
similarity index 76%
rename from validator/nodejs/index_test.js
rename to validator/js/nodejs/index_test.js
index 0c65dbee70528..11b940877fac6 100755
--- a/validator/nodejs/index_test.js
+++ b/validator/js/nodejs/index_test.js
@@ -30,7 +30,7 @@ const ampValidator = require('./index.js');
 
 it('deployed validator rejects the empty file', function(done) {
   // Note: This will fetch and use the validator from
-  // 'https://cdn.ampproject.org/v0/validator.js', since only one argument
+  // 'https://cdn.ampproject.org/v0/validator_wasm.js', since only one argument
   // is supplied to validateString.
   ampValidator.getInstance()
       .then(function(instance) {
@@ -46,12 +46,12 @@ it('deployed validator rejects the empty file', function(done) {
 });
 
 it('validator_minified.js was built (run build.py if this fails)', function() {
-  expect(fs.statSync('../dist/validator_minified.js').isFile()).toBe(true);
+  expect(fs.statSync('../../dist/validator_minified.js').isFile()).toBe(true);
 });
 
 it('built validator rejects the empty file', function(done) {
   // Note: This will use the validator that was built with build.py.
-  ampValidator.getInstance(/*validatorJs*/ '../dist/validator_minified.js')
+  ampValidator.getInstance(/*validatorJs*/ '../../dist/validator_minified.js')
       .then(function(instance) {
         const validationResult = instance.validateString('');
 
@@ -66,9 +66,11 @@ it('built validator rejects the empty file', function(done) {
 
 it('accepts the minimum valid AMP file', function(done) {
   // Note: This will use the validator that was built with build.py.
-  const mini = fs.readFileSync(
-      '../testdata/feature_tests/minimum_valid_amp.html', 'utf-8').trim();
-  ampValidator.getInstance(/*validatorJs*/ '../dist/validator_minified.js')
+  const mini =
+      fs.readFileSync(
+          '../../testdata/feature_tests/minimum_valid_amp.html', 'utf-8')
+        .trim();
+  ampValidator.getInstance(/*validatorJs*/ '../../dist/validator_minified.js')
       .then(function(instance) {
         const validationResult = instance.validateString(mini);
 
@@ -83,10 +85,12 @@ it('accepts the minimum valid AMP file', function(done) {
 
 it('accepts the minimum valid AMP4ADS file', function(done) {
   // Note: This will use the validator that was built with build.py.
-  const mini = fs.readFileSync(
-      '../testdata/amp4ads_feature_tests/min_valid_amp4ads.html', 'utf-8')
-      .trim();
-  ampValidator.getInstance(/*validatorJs*/ '../dist/validator_minified.js')
+  const mini =
+      fs.readFileSync(
+          '../../testdata/amp4ads_feature_tests/min_valid_amp4ads.html',
+          'utf-8')
+        .trim();
+  ampValidator.getInstance(/*validatorJs*/ '../../dist/validator_minified.js')
       .then(function(instance) {
         const validationResult = instance.validateString(mini, 'AMP4ADS');
 
@@ -112,15 +116,17 @@ function isErrorLine(line) {
 it('rejects a specific file that is known to have errors', function(done) {
   // Note: This will use the validator that was built with build.py.
   const severalErrorsHtml =
-      fs.readFileSync('../testdata/feature_tests/several_errors.html', 'utf-8')
-          .trim();
+      fs.readFileSync(
+          '../../testdata/feature_tests/several_errors.html', 'utf-8')
+        .trim();
   const severalErrorsOut =
-      fs.readFileSync('../testdata/feature_tests/several_errors.out', 'utf-8')
-          .split('\n')
-          .filter(isErrorLine)
-          .join('\n');
+      fs.readFileSync(
+          '../../testdata/feature_tests/several_errors.out', 'utf-8')
+        .split('\n')
+        .filter(isErrorLine)
+        .join('\n');
 
-  ampValidator.getInstance(/*validatorJs*/ '../dist/validator_minified.js')
+  ampValidator.getInstance(/*validatorJs*/ '../../dist/validator_minified.js')
       .then(function(instance) {
         const validationResult = instance.validateString(severalErrorsHtml);
 
@@ -149,7 +155,7 @@ it('rejects a specific file that is known to have errors', function(done) {
 
 it('handles syntax errors in validator file', function(done) {
   // Note: This points the library at a file that's not even Javascript.
-  ampValidator.getInstance(/*validatorJs*/ '../dist/validator.protoascii')
+  ampValidator.getInstance(/*validatorJs*/ '../../dist/validator.protoascii')
       .then(function(instance) {
         fail('We should not get here since this is not a good validator.');
         done();
@@ -157,24 +163,27 @@ it('handles syntax errors in validator file', function(done) {
       .catch(function(error) {
         expect(error.message)
             .toMatch(
-                /^Could not instantiate validator\.js -.*[Uu]nexpected token/);
+                /^Could not instantiate validator_wasm\.js -.*[Uu]nexpected token/);
         done();
       });
 });
 
 it('also works with newInstance', function() {
-  const mini = fs.readFileSync(
-      '../testdata/feature_tests/minimum_valid_amp.html', 'utf-8').trim();
+  const mini =
+      fs.readFileSync(
+          '../../testdata/feature_tests/minimum_valid_amp.html', 'utf-8')
+        .trim();
   const validatorJsContents =
-      fs.readFileSync('../dist/validator_minified.js', 'utf-8');
+      fs.readFileSync('../../dist/validator_minified.js', 'utf-8');
   const resultForMini =
       ampValidator.newInstance(validatorJsContents).validateString(mini);
 
   expect(resultForMini.status).toBe('PASS');
 
   const severalErrorsHtml =
-      fs.readFileSync('../testdata/feature_tests/several_errors.html', 'utf-8')
-          .trim();
+      fs.readFileSync(
+          '../../testdata/feature_tests/several_errors.html', 'utf-8')
+         .trim();
   const resultForSeveralErrors = ampValidator.newInstance(validatorJsContents)
       .validateString(severalErrorsHtml);
 
@@ -183,20 +192,22 @@ it('also works with newInstance', function() {
 
 it('emits text if --format=text is specified on command line', function(done) {
   const severalErrorsOut =
-      fs.readFileSync('../testdata/feature_tests/several_errors.out', 'utf-8')
-          .split('\n')
-          .filter(isErrorLine)
-          .splice(1) // trim 1st line
-          .join('\n');
+      fs.readFileSync(
+          '../../testdata/feature_tests/several_errors.out', 'utf-8')
+        .split('\n')
+        .filter(isErrorLine)
+        .splice(1)  // trim 1st line
+        .join('\n');
   execFile(
       process.execPath,
       [
-        '../nodejs/cli.js', '--format=text',
+        '../js/nodejs/cli.js',
+        '--format=text',
         '--validator_js=../dist/validator_minified.js',
         'feature_tests/several_errors.html',
         'feature_tests/minimum_valid_amp.html',
       ],
-      {'cwd': '../testdata'}, // Run inside the testdata dir to match paths.
+      {'cwd': '../../testdata'},  // Run inside the testdata dir to match paths.
       function(error, stdout, stderr) {
         expect(error).toBeDefined(); // At least one file had errors.
         expect(stderr).toBe(severalErrorsOut);
@@ -209,12 +220,13 @@ it('emits json if --format=json is specified on command line', function(done) {
   execFile(
       process.execPath,
       [
-        '../nodejs/cli.js', '--format=json',
+        '../js/nodejs/cli.js',
+        '--format=json',
         '--validator_js=../dist/validator_minified.js',
         'feature_tests/several_errors.html',
         'feature_tests/minimum_valid_amp.html',
       ],
-      {'cwd': '../testdata'}, // Run inside the testdata dir to match paths.
+      {'cwd': '../../testdata'},  // Run inside the testdata dir to match paths.
       function(error, stdout, stderr) {
         expect(error).toBeDefined(); // At least one file had errors
         expect(stderr).toBe(''); // entire json results will be on stdout
@@ -240,21 +252,23 @@ it('emits json if --format=json is specified on command line', function(done) {
 it('supports AMP4ADS with --html_format command line option', function(done) {
   const severalErrorsOut =
       fs.readFileSync(
-          '../testdata/amp4ads_feature_tests/style-amp-custom.out',
-          'utf-8')
+            '../../testdata/amp4ads_feature_tests/style-amp-custom.out',
+            'utf-8')
           .split('\n')
           .filter(isErrorLine)
-          .splice(1) // trim 1st line
+          .splice(1)  // trim 1st line
           .join('\n');
   execFile(
       process.execPath,
       [
-        '../nodejs/cli.js', '--format=text', '--html_format=AMP4ADS',
+        '../js/nodejs/cli.js',
+        '--format=text',
+        '--html_format=AMP4ADS',
         '--validator_js=../dist/validator_minified.js',
         'amp4ads_feature_tests/style-amp-custom.html',
         'amp4ads_feature_tests/min_valid_amp4ads.html',
       ],
-      {'cwd': '../testdata'}, // Run inside the testdata dir to match paths.
+      {'cwd': '../../testdata'},  // Run inside the testdata dir to match paths.
       function(error, stdout, stderr) {
         expect(error).toBeDefined(); // At least one file had errors.
         expect(stderr).toBe(severalErrorsOut);
diff --git a/validator/js/nodejs/package-lock.json b/validator/js/nodejs/package-lock.json
new file mode 100644
index 0000000000000..84cdae6020321
--- /dev/null
+++ b/validator/js/nodejs/package-lock.json
@@ -0,0 +1,135 @@
+{
+  "name": "amphtml-validator",
+  "version": "1.0.34",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA=="
+    },
+    "commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "jasmine": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-3.7.0.tgz",
+      "integrity": "sha512-wlzGQ+cIFzMEsI+wDqmOwvnjTvolLFwlcpYLCqSPPH0prOQaW3P+IzMhHYn934l1imNvw07oCyX+vGUv3wmtSQ==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.6",
+        "jasmine-core": "~3.7.0"
+      }
+    },
+    "jasmine-core": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.7.0.tgz",
+      "integrity": "sha512-jmeRIgxS/abz8afk9NKJ1yP7n93aZdRaHDWtTHJBlYu6fhbzvErjiO3mMlSSrJefVk1a+26JlABrHS2iBH8Azw==",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "promise": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz",
+      "integrity": "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==",
+      "requires": {
+        "asap": "~2.0.6"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    }
+  }
+}
diff --git a/validator/js/nodejs/package.json b/validator/js/nodejs/package.json
new file mode 100644
index 0000000000000..e0652c255e995
--- /dev/null
+++ b/validator/js/nodejs/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "amphtml-validator",
+  "version": "1.0.35",
+  "description": "Official validator for AMP HTML (www.ampproject.org)",
+  "keywords": [
+    "AMP",
+    "validator",
+    "validate",
+    "AMP HTML",
+    "Accelerated Mobile Pages"
+  ],
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml/tree/main/validator/js/nodejs/"
+  },
+  "bin": {
+    "amphtml-validator": "./cli.js"
+  },
+  "dependencies": {
+    "colors": "1.4.0",
+    "commander": "7.2.0",
+    "promise": "8.1.0"
+  },
+  "devDependencies": {
+    "jasmine": "3.7.0"
+  }
+}
diff --git a/validator/js/webui/.gcloudignore b/validator/js/webui/.gcloudignore
new file mode 100644
index 0000000000000..c965eb57bc9af
--- /dev/null
+++ b/validator/js/webui/.gcloudignore
@@ -0,0 +1 @@
+serve-standalone.go
diff --git a/validator/webui/.gitignore b/validator/js/webui/.gitignore
similarity index 100%
rename from validator/webui/.gitignore
rename to validator/js/webui/.gitignore
diff --git a/validator/webui/@polymer/amphtml-editor/amphtml-editor.html b/validator/js/webui/@polymer/amphtml-editor/amphtml-editor.html
similarity index 100%
rename from validator/webui/@polymer/amphtml-editor/amphtml-editor.html
rename to validator/js/webui/@polymer/amphtml-editor/amphtml-editor.html
diff --git a/validator/webui/@polymer/ampproject-toolbar/ampproject-toolbar.html b/validator/js/webui/@polymer/ampproject-toolbar/ampproject-toolbar.html
similarity index 92%
rename from validator/webui/@polymer/ampproject-toolbar/ampproject-toolbar.html
rename to validator/js/webui/@polymer/ampproject-toolbar/ampproject-toolbar.html
index b2f438ca7a358..7d5cd71505f94 100644
--- a/validator/webui/@polymer/ampproject-toolbar/ampproject-toolbar.html
+++ b/validator/js/webui/@polymer/ampproject-toolbar/ampproject-toolbar.html
@@ -21,7 +21,7 @@
   <style scope="ampproject-toolbar">
     paper-toolbar {
       --paper-toolbar-background: #fbfafb;
-      --paper-toolbar-color: #0379C4;
+      --paper-toolbar-color: #005af0;
       --paper-toolbar: { font-family: Roboto, verdana, arial, sans-serif; };
       --width: 100%
     }
@@ -35,14 +35,14 @@
       background-position: center left;
     }
     .ampproject-right {
-      color: #0379C4;
+      color: #005af0;
       margin: 10px 0;
     }
     .ampproject-link a:link,
     .ampproject-link a:visited,
     .ampproject-link a:hover,
     .ampproject-link a:active {
-      color: #0379C4;
+      color: #005af0;
       text-decoration: none;
       font-size: 14px;
       font-weight: 300;
@@ -58,14 +58,14 @@
     <paper-toolbar>
       <div class="ampproject-left ampproject-link">
         <a href="https://www.ampproject.org/"
-           target="_blank"><img style="height: 60px; width: 100px"
+           target="_blank"><img style="height: 60px; width: 175px"
                                 src="/logo-blue.svg"></a>
       </div>
       <div class="ampproject-right ampproject-link">
         <a href="https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp"
            target="_blank">HOWTO</a>
         &nbsp;&nbsp;&nbsp;
-        <a href="https://github.com/ampproject/amphtml/blob/master/validator/README.md"
+        <a href="https://github.com/ampproject/amphtml/blob/main/validator/README.md"
            target="_blank">GITHUB</a>
         &nbsp;&nbsp;&nbsp;
         <a href="https://www.google.com/policies/privacy/"
diff --git a/validator/webui/@polymer/webui-errorlist/webui-errorlist.html b/validator/js/webui/@polymer/webui-errorlist/webui-errorlist.html
similarity index 100%
rename from validator/webui/@polymer/webui-errorlist/webui-errorlist.html
rename to validator/js/webui/@polymer/webui-errorlist/webui-errorlist.html
diff --git a/validator/webui/@polymer/webui-mainpage/webui-mainpage.html b/validator/js/webui/@polymer/webui-mainpage/webui-mainpage.html
similarity index 79%
rename from validator/webui/@polymer/webui-mainpage/webui-mainpage.html
rename to validator/js/webui/@polymer/webui-mainpage/webui-mainpage.html
index 8804a9c062db3..51acb84a54cc0 100644
--- a/validator/webui/@polymer/webui-mainpage/webui-mainpage.html
+++ b/validator/js/webui/@polymer/webui-mainpage/webui-mainpage.html
@@ -69,7 +69,7 @@
       '     here and the AMP Validator will re-check your document on the fly.\n' +
       '-->\n' +
       '\x3C!doctype html>\n' +
-      '\x3Chtml ⚡4email>\n' +
+      '\x3Chtml ⚡4email data-css-strict>\n' +
       '\x3Chead>\n' +
       '  \x3Cmeta charset="utf-8">\n' +
       '  \x3Cscript async src="https://cdn.ampproject.org/v0.js">\x3C/script>\n' +
@@ -80,23 +80,6 @@
       '\x3C/body>\n' +
       '\x3C/html>\n';
 
-    var minimumValidActions =
-      '\x3C!--\n' +
-      '     This is the minimum valid AMP HTML actions document. Type away\n' +
-      '     here and the AMP Validator will re-check your document on the fly.\n' +
-      '-->\n' +
-      '\x3C!doctype html>\n' +
-      '\x3Chtml ⚡ actions>\n' +
-      '\x3Chead>\n' +
-      '  \x3Cmeta charset="utf-8">\n' +
-      '  \x3Clink rel="canonical" href="self.html">\n' +
-      '  \x3Cmeta name="viewport" content="width=device-width,minimum-scale=1">\n' +
-      '  \x3Cstyle 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}}\x3C/style>\x3Cnoscript>\x3Cstyle amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}\x3C/style>\x3C/noscript>\n' +
-      '  \x3Cscript async src="https://cdn.ampproject.org/v0.js">\x3C/script>\n' +
-      '\x3C/head>\n' +
-      '\x3Cbody>Hello, AMP world.\x3C/body>\n' +
-      '\x3C/html>\n';
-
     Polymer({
       is: 'webui-mainpage',
       ready: function() {
@@ -122,10 +105,34 @@
         // The listbox has the errors at the bottom of the screen.
         var listbox = this.$.errorListBox;
 
+        var isValidatorReady = false;
+
+        if (amp.validator.init) {
+          // The AMP validator contains an initializer which loads some
+          // resources asynchronously.
+          amp.validator.init().then(function() {
+            isValidatorReady = true;
+            // In most times, the initilization of AMP validator is slower than
+            // the code that fills the minimal valid AMP doc as the default
+            // value in the input box. The `refreshEditorAndErrors` call
+            // triggered by input box default value returns early because
+            // `isValidatorReady` is `false` at that time. We need to call
+            // `refreshEditorAndErrors` again here to ensure that the validator
+            // runs on the default value in the input box
+            refreshEditorAndErrors();
+          });
+        } else {
+          isValidatorReady = true;
+        }
+
         // When the editor contents change, trigger validation (with a delay)
         // and propagate the validation errors into the editor (as line
         // widgets) and the listbox below the editor as clickable errors.
         var refreshEditorAndErrors = function() {
+          if (!isValidatorReady) {
+            return ;
+          }
+
           // Clear the list of errors below the editor, and the inline
           // messages.
           listbox.clearErrors();
@@ -250,8 +257,7 @@
             params['htmlFormat'] = 'AMP4ADS';
             setLocationHashParams(params);
             if (editorValue === minimumValidAmp ||
-                editorValue === minimumValidAmp4Email ||
-                editorValue === minimumValidActions) {
+                editorValue === minimumValidAmp4Email) {
               editor.setEditorValue(minimumValidAmp4Ads);
             } else {
               refreshEditorAndErrors();
@@ -261,28 +267,15 @@
             params['htmlFormat'] = 'AMP4EMAIL';
             setLocationHashParams(params);
             if (editorValue === minimumValidAmp ||
-                editorValue === minimumValidAmp4Ads ||
-                editorValue === minimumValidActions) {
+              editorValue === minimumValidAmp4Ads) {
               editor.setEditorValue(minimumValidAmp4Email);
             } else {
               refreshEditorAndErrors();
             }
-          } else if (e.detail.htmlFormat === 'ACTIONS') {
-            var params = getLocationHashParams();
-            params['htmlFormat'] = 'ACTIONS';
-            setLocationHashParams(params);
-            if (editorValue === minimumValidAmp ||
-                editorValue === minimumValidAmp4Ads ||
-                editorValue === minimumValidAmp4Email) {
-              editor.setEditorValue(minimumValidActions);
-            } else {
-              refreshEditorAndErrors();
-            }
           } else {
             removeParamFromLocationHashParams('htmlFormat');
             if (editorValue === minimumValidAmp4Ads ||
-                editorValue === minimumValidAmp4Email ||
-                editorValue === minimumValidActions) {
+                editorValue === minimumValidAmp4Email) {
               editor.setEditorValue(minimumValidAmp);
             } else {
               refreshEditorAndErrors();
@@ -292,34 +285,34 @@
 
         // Interprets the parameters after the '#' in the URL.
         var params = getLocationHashParams();
-        // Extracts the code to be validated if sent as a query param.
-        const incomingDocStr = getIncomingDoc(params);
-        if (incomingDocStr) {
-          editor.setEditorValue(incomingDocStr);
-          const format = params['htmlFormat'] || 'AMP';
-          urlForm.setHtmlFormat(format)
-        }
+        const incomingHtmlFormat = params.hasOwnProperty('htmlFormat') && params['htmlFormat'];
 
-        // If #url=<url> was provided, load it, otherwise, start with the
-        // minimum valid AMP document.
-        else if (params.hasOwnProperty('url') && params['url']) {
-          this.$.urlForm.setURLAndValidate(params['url']);
-        } else if (params.hasOwnProperty('htmlFormat') &&
-                   params['htmlFormat'] === 'AMP4ADS' ) {
+        if (incomingHtmlFormat === 'AMP4ADS') {
           urlForm.setHtmlFormat('AMP4ADS');
-          editor.setEditorValue(minimumValidAmp4Ads);
-        } else if (params.hasOwnProperty('htmlFormat') &&
-                   params['htmlFormat'] === 'AMP4EMAIL' ) {
+        } else if (incomingHtmlFormat === 'AMP4EMAIL') {
           urlForm.setHtmlFormat('AMP4EMAIL');
-          editor.setEditorValue(minimumValidAmp4Email);
-        } else if (params.hasOwnProperty('htmlFormat') &&
-                   params['htmlFormat'] === 'ACTIONS' ) {
-          urlForm.setHtmlFormat('ACTIONS');
-          editor.setEditorValue(minimumValidActions);
         } else {
           urlForm.setHtmlFormat('AMP');
-          editor.setEditorValue(minimumValidAmp);
         }
+
+        const incomingDocStr = getIncomingDoc(params);
+        if (incomingDocStr) {
+          // Extract doc from query param
+          editor.setEditorValue(incomingDocStr);
+        } else if (params.hasOwnProperty('url') && params['url']) {
+          // Load doc fromm url
+          this.$.urlForm.setURLAndValidate(params['url']);
+        } else {
+          // Use minimal valid AMP doc
+          if (incomingHtmlFormat === 'AMP4ADS') {
+            editor.setEditorValue(minimumValidAmp4Ads);
+          } else if (incomingHtmlFormat === 'AMP4EMAIL') {
+            editor.setEditorValue(minimumValidAmp4Email);
+          } else {
+            editor.setEditorValue(minimumValidAmp);
+          }
+        }
+
       }
     });
   </script>
diff --git a/validator/webui/@polymer/webui-statusbar/webui-statusbar.html b/validator/js/webui/@polymer/webui-statusbar/webui-statusbar.html
similarity index 100%
rename from validator/webui/@polymer/webui-statusbar/webui-statusbar.html
rename to validator/js/webui/@polymer/webui-statusbar/webui-statusbar.html
diff --git a/validator/webui/@polymer/webui-urlform/webui-urlform.html b/validator/js/webui/@polymer/webui-urlform/webui-urlform.html
similarity index 98%
rename from validator/webui/@polymer/webui-urlform/webui-urlform.html
rename to validator/js/webui/@polymer/webui-urlform/webui-urlform.html
index 583ef6757e96a..5938d676572cc 100644
--- a/validator/webui/@polymer/webui-urlform/webui-urlform.html
+++ b/validator/js/webui/@polymer/webui-urlform/webui-urlform.html
@@ -59,7 +59,6 @@
             <paper-item htmlFormat="AMP">AMP</paper-item>
             <paper-item htmlFormat="AMP4ADS">AMP4ADS</paper-item>
             <paper-item htmlFormat="AMP4EMAIL">AMP4EMAIL</paper-item>
-            <paper-item htmlFormat="ACTIONS">ACTIONS</paper-item>
           </paper-listbox>
         </paper-dropdown-menu>
       </paper-material>
diff --git a/validator/js/webui/README.md b/validator/js/webui/README.md
new file mode 100644
index 0000000000000..cac68d2cd97af
--- /dev/null
+++ b/validator/js/webui/README.md
@@ -0,0 +1,59 @@
+<!---
+Copyright 2015 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.
+-->
+
+# Validator Web UI
+
+If you'd like to use the web UI, simply visit [validator.amp.dev](https://validator.amp.dev/).
+
+## Running your own Web UI
+
+In this directory, run
+
+```sh
+$ npm install
+$ go build serve-standalone.go
+$ ./serve-standalone
+```
+
+Then visit your own instance at `http://127.0.0.1:8765/`.
+
+If you'd like to run exactly the code that is running at
+[validator.amp.dev](https://validator.amp.dev/), that's an
+Appengine app - please refer to the instructions in serve.go.
+
+## Passing in documents from URL
+
+This tool will also accept a document passed in via the URL as part of the URL hash. It expects the format `#doc=<ENCODED_DOCUMENT>`. This allows users to construct an link that will auto-populate the tool with the incoming document.
+
+To use this feature you must first base64 encode the HTML string. Due to unicode problems with the native `btoa()` function, this tool expects the string to be encoded using the following [solution from mdn](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa#Unicode_strings):
+
+```js
+// ucs-2 string to base64 encoded ascii
+function utoa(str) {
+  return window.btoa(unescape(encodeURIComponent(str)));
+}
+```
+
+By default this tool will assume you want to validate an `AMPHTML` document. If you would like to validate another format you can chose one of the following:
+
+```http
+#htmlFormat=AMP4ADS
+#htmlFormat=AMP4EMAIL
+```
+
+If you wish to use both the `doc=` and `htmlFormat=` together make sure to include an `&` between the key-value pairs.
+
+Putting it all together allows you to create links like [this example.](https://validator.amp.dev/#htmlFormat=AMP4ADS&doc=PCFkb2N0eXBlIGh0bWw%2BCjxodG1sIOKaoTRhZHM%2BCjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLG1pbmltdW0tc2NhbGU9MSI%2BCiAgPHN0eWxlIGFtcDRhZHMtYm9pbGVycGxhdGU%2BYm9keXt2aXNpYmlsaXR5OmhpZGRlbn08L3N0eWxlPgogIDxzY3JpcHQgYXN5bmMgc3JjPSJodHRwczovL2Nkbi5hbXBwcm9qZWN0Lm9yZy9hbXA0YWRzLXYwLmpzIj48L3NjcmlwdD4KPC9oZWFkPgo8Ym9keT4KCTxhbXAtaW1nIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBzcmM9Imh0dHA6Ly9wbGFjZWtpdHRlbi5jb20vNTAwLzUwMCI%2BPC9hbXAtaW1nPgogIAk8aDE%2BQ2F0cyBhcmUgY29vbC48L2gxPgo8L2JvZHk%2BCjwvaHRtbD4)
diff --git a/validator/js/webui/amp_favicon.png b/validator/js/webui/amp_favicon.png
new file mode 100644
index 0000000000000..11daf1e2edd18
Binary files /dev/null and b/validator/js/webui/amp_favicon.png differ
diff --git a/validator/js/webui/app.yaml b/validator/js/webui/app.yaml
new file mode 100644
index 0000000000000..ca99ba369c6f1
--- /dev/null
+++ b/validator/js/webui/app.yaml
@@ -0,0 +1,28 @@
+runtime: go113
+
+main: ./main
+
+handlers:
+- url: /fetch
+  script: auto
+  secure: always
+
+- url: /$
+  static_files: index.html
+  upload: index\.html
+  secure: always
+
+- url: /legacy\.html$
+  static_files: legacy.html
+  upload: legacy\.html
+  secure: always
+
+- url: /amp_favicon.png$
+  static_files: amp_favicon.png
+  upload: amp_favicon\.png$
+  secure: always
+
+- url: /logo-blue.svg$
+  static_files: logo-blue.svg
+  upload: logo-blue\.svg$
+  secure: always
diff --git a/validator/webui/build.py b/validator/js/webui/build.py
similarity index 90%
rename from validator/webui/build.py
rename to validator/js/webui/build.py
index 1c80c95c7a6ad..876bf8735ab2a 100755
--- a/validator/webui/build.py
+++ b/validator/js/webui/build.py
@@ -72,14 +72,6 @@ def CheckPrereqs():
     if not os.path.exists(f):
       Die('%s not found. Must run in amp_validator source directory.' % f)
 
-  # Ensure that yarn is installed.
-  try:
-    subprocess.check_output(['yarn', '--version'])
-  except (subprocess.CalledProcessError, OSError):
-    Die('Yarn package manager not found. Run '
-        '"curl -o- -L https://yarnpkg.com/install.sh | bash" '
-        'or see https://yarnpkg.com/docs/install.')
-
 
 def SetupOutDir(out_dir):
   """Sets up a clean output directory.
@@ -98,14 +90,14 @@ def SetupOutDir(out_dir):
 
 
 def InstallNodeDependencies():
-  """Installs the dependencies using yarn."""
+  """Installs the dependencies using npm install."""
   logging.info('entering ...')
   # Install the project dependencies specified in package.json into
   # node_modules.
   logging.info('installing AMP Validator webui dependencies ...')
   subprocess.check_call(
-      ['yarn', 'install'],
-      stdout=(open(os.devnull, 'wb') if os.environ.get('TRAVIS') else sys.stdout))
+      ['npm', 'install', '--userconfig', '../../../.npmrc'],
+      stdout=(open(os.devnull, 'wb') if os.environ.get('CI') else sys.stdout))
   logging.info('... done')
 
 
@@ -150,6 +142,9 @@ def CreateWebuiAppengineDist(out_dir):
   f = open(os.path.join(webui_out, 'index.html'), 'wb')
   f.write(vulcanized_index_html)
   f.close()
+  f = open(os.path.join(webui_out, 'legacy.html'), 'wb')
+  f.write(vulcanized_index_html.replace(b'https://cdn.ampproject.org/v0/validator_wasm.js', b'https://cdn.ampproject.org/v0/validator.js', 1))
+  f.close()
   logging.info('... success')
 
 
@@ -157,7 +152,7 @@ def Main():
   """The main method, which executes all build steps and runs the tests."""
   logging.basicConfig(
       format='[[%(filename)s %(funcName)s]] - %(message)s',
-      level=(logging.ERROR if os.environ.get('TRAVIS') else logging.INFO))
+      level=(logging.ERROR if os.environ.get('CI') else logging.INFO))
   GetNodeJsCmd()
   CheckPrereqs()
   InstallNodeDependencies()
diff --git a/validator/js/webui/index.html b/validator/js/webui/index.html
new file mode 100644
index 0000000000000..ac09451fff4ee
--- /dev/null
+++ b/validator/js/webui/index.html
@@ -0,0 +1,57 @@
+<!--
+  Copyright 2016 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.
+-->
+<!doctype html>
+<head>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <title>The AMP Validator</title>
+  <meta charset="utf-8">
+  <link rel="shortcut icon" href="/amp_favicon.png">
+  <script src="webcomponents.js/webcomponents.min.js"></script>
+  <link rel="import" href="@polymer/paper-styles/demo-pages.html">
+  <link rel="import" href="@polymer/webui-mainpage/webui-mainpage.html">
+  <link rel="import" href="@polymer/polymer/polymer.html">
+  <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/nmoffdblmcmgeicmolmhobpoocbbmknc">
+  <script src="webui.js"></script>
+  <script src="https://cdn.ampproject.org/v0/validator_wasm.js"></script>
+  <style is="custom-style">
+    .ampproject-message { background-color: #FFF9C4; }
+    html, body {
+      height: 100%;
+      margin: 0px;
+      padding: 5px !important;
+    }
+  </style>
+  <style scope="iron-icon">
+    .ampproject-warning { color: #FF9800; }
+    .ampproject-error { color: #F44336; }
+  </style>
+  <meta name="description"
+        content="AMP HTML Project Web Validator. Tests AMP Documents for valid markup.">
+</head>
+<body unresolved>
+  <webui-mainpage></webui-mainpage>
+<script>
+if (location.href.match(/^https:\/\/validator.amp.dev\/.*/)) {
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  ga('create', 'UA-79737099-1', 'none');
+  ga('send', 'pageview');
+}
+</script>
+</body>
+</html>
diff --git a/validator/js/webui/logo-blue.svg b/validator/js/webui/logo-blue.svg
new file mode 100644
index 0000000000000..c663b4d266f73
--- /dev/null
+++ b/validator/js/webui/logo-blue.svg
@@ -0,0 +1,5 @@
+<svg width="175" height="60" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#005af0" fill-rule="evenodd">
+    <path d="M92.9377885 34.2654167h7.0715145l-2.3810097-7.015c-.153125-.445-.3340145-.97-.5409856-1.5741667-.2078125-.6033333-.413101-1.2566667-.6141827-1.96-.1884615.715-.3844952 1.3775-.5855769 1.9875-.2019231.6091667-.391226 1.1366667-.56875 1.5816667l-2.3810096 6.98zM109.569519 44.05875h-4.656009c-.521635 0-.950722-.1208333-1.288101-.3608333-.33738-.24-.572116-.5475-.701683-.9225l-1.527885-4.4658334h-9.8437497l-1.5287259 4.4658334c-.1177885.3275-.3491587.6241666-.6924279.8875-.3432692.2641666-.7639423.3958333-1.2620192.3958333h-4.6905048l10.021274-25.6166667h6.1477163L109.569519 44.05875zM130.561779 33.7364167c.219591.4808333.429086.9741666.631009 1.4783333.201082-.5166667.413943-1.0175.639424-1.5041667.224639-.4875.456009-.96.693269-1.4166666l6.644952-12.9541667c.118629-.2233333.240625-.3966667.364303-.5191667.124519-.1233333.264182-.2141666.417307-.2733333.153967-.0591667.328967-.0883333.524159-.0883333h5.26851v25.6h-5.294592V29.32475c0-.7141667.035337-1.4883333.10601-2.3208333l-6.857813 13.1691666c-.213702.4108334-.500601.7208334-.86238.9316667-.361778.2116667-.773197.3166667-1.235096.3166667h-.816947c-.461899 0-.873317-.105-1.235096-.3166667-.361779-.2108333-.648678-.5208333-.86238-.9316667l-6.893149-13.1866666c.047116.4108333.082452.8175.10601 1.2216666.023558.405.036178.7775.036178 1.1166667v14.7341667h-5.295433v-25.6H121.908534c.195192 0 .370192.0291666.524158.0883333.153967.0591667.29363.15.417308.2733333.124519.1225.245673.2958334.365144.5191667l6.66262 13.0058333c.23726.4466667.464423.91.684015 1.3908334M160.989904 31.0125833h3.127283c1.563222 0 2.688101-.3683333 3.375481-1.1075.68738-.7383333 1.030649-1.77 1.030649-3.0941666 0-.5858334-.088341-1.12-.265865-1.6-.178365-.4808334-.448438-.8941667-.808534-1.24-.361779-.345-.817788-.6125-1.36887-.8-.55024-.1875-1.205649-.2808334-1.962861-.2808334h-3.127283v8.1225zm0 4.4833334v8.5625h-6.00637V18.44175h9.133653c1.824039 0 3.390625.2141667 4.69976.6416667 1.308293.4275 2.386899 1.0166666 3.233293 1.7675.846395.75 1.472356 1.635 1.87452 2.6541666.403004 1.02.604086 2.1216667.604086 3.3058334 0 1.2775-.206971 2.4491666-.620913 3.5166666-.415625 1.0658334-1.049159 1.9808334-1.901443 2.7425-.853125.7616667-1.934254 1.3566667-3.243389 1.7841667-1.308293.4283333-2.857212.6416667-4.645914.6416667h-3.127283zM40.6737019 27.2526667L27.9676923 48.196h-2.3019231l2.2758414-13.6466667-7.0479568.01s-.0664663.0016667-.0984375.0016667c-.634375 0-1.1492788-.51-1.1492788-1.1383333 0-.27.2540865-.7266667.2540865-.7266667l12.6639423-20.9191667 2.340625.0091667-2.3330528 13.6683333L39.6556731 25.446s.0765625-.0016667.1127404-.0016667c.634375 0 1.1484375.5091667 1.1484375 1.1383334 0 .255-.1001202.4791666-.2439904.6691666l.0008413.0008334zM30.288125.00016667c-16.7276442 0-30.28846154 13.43166663-30.28846154 30.00000003 0 16.5683333 13.56081734 30 30.28846154 30 16.7284856 0 30.2884615-13.4316667 30.2884615-30 0-16.5683334-13.5599759-30.00000003-30.2884615-30.00000003z" />
+  </g>
+</svg>
diff --git a/validator/webui/serve.go b/validator/js/webui/main/serve.go
similarity index 90%
rename from validator/webui/serve.go
rename to validator/js/webui/main/serve.go
index 484b2f0d82d4c..861b9b484a90e 100644
--- a/validator/webui/serve.go
+++ b/validator/js/webui/main/serve.go
@@ -21,23 +21,18 @@
 // (2) Type 'goapp serve .' in the dist/webui_appengine directory.
 // (3) Point your web browser at http://localhost:8080/
 
-package webui
+package main
 
 import (
 	"encoding/json"
 	"fmt"
 	"io/ioutil"
+	"log"
 	"net/http"
 	"net/url"
-
-	"appengine"
-	"appengine/urlfetch"
+	"os"
 )
 
-func init() {
-	http.HandleFunc("/", handler)
-}
-
 func handler(w http.ResponseWriter, r *http.Request) {
 	if r.Method != "POST" ||
 		r.Header.Get("X-Requested-By") != "validator webui" {
@@ -50,8 +45,8 @@ func handler(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "Bad request.", http.StatusBadRequest)
 		return
 	}
-	ctx := appengine.NewContext(r)
-	client := urlfetch.Client(ctx)
+
+	client := &http.Client {}
 	req, err := http.NewRequest("GET", u.String(), nil)
 	if err != nil {
 		http.Error(w, fmt.Sprintf("Bad gateway (%v)", err.Error()),
@@ -88,3 +83,16 @@ func handler(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-type", "application/json")
 	w.Write(bytes)
 }
+
+func main() {
+	http.HandleFunc("/", handler)
+
+  port := os.Getenv("PORT")
+	if port == "" {
+		port = "8080"
+	}
+	addr := fmt.Sprintf(":%s", port)
+	log.Printf("listening on %s", addr)
+	log.Fatal(http.ListenAndServe(addr, nil))
+}
+
diff --git a/validator/js/webui/package-lock.json b/validator/js/webui/package-lock.json
new file mode 100644
index 0000000000000..8e0cfa7a2bd15
--- /dev/null
+++ b/validator/js/webui/package-lock.json
@@ -0,0 +1,1234 @@
+{
+  "name": "amp-validator-webui",
+  "version": "0.1.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@polymer/font-roboto": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/font-roboto/-/font-roboto-0.0.3.tgz",
+      "integrity": "sha1-nVjttmC77S1L0p07+bIcIL3dYYc="
+    },
+    "@polymer/iron-a11y-announcer": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-announcer/-/iron-a11y-announcer-0.0.3.tgz",
+      "integrity": "sha1-EmI9tMgJ630ATu5kWO8H57VQDnE=",
+      "requires": {
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-a11y-keys-behavior": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-keys-behavior/-/iron-a11y-keys-behavior-0.0.3.tgz",
+      "integrity": "sha1-gqnFNdAa6UyzPZwHGppUPrwgRMA=",
+      "requires": {
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-autogrow-textarea": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-autogrow-textarea/-/iron-autogrow-textarea-0.0.3.tgz",
+      "integrity": "sha1-8eoURDCfMWNP5FzPz+N2uD7P0oo=",
+      "requires": {
+        "@polymer/iron-behaviors": "^0.0.3",
+        "@polymer/iron-flex-layout": "^0.0.3",
+        "@polymer/iron-form-element-behavior": "^0.0.3",
+        "@polymer/iron-validatable-behavior": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-behaviors": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-behaviors/-/iron-behaviors-0.0.3.tgz",
+      "integrity": "sha1-AnSEiF3bkk+Z+oCD37qBDjnSZxs=",
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-checked-element-behavior": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-checked-element-behavior/-/iron-checked-element-behavior-0.0.3.tgz",
+      "integrity": "sha1-Hni2p2dRSVNQ1R2cqq9sD390vXo=",
+      "requires": {
+        "@polymer/iron-form-element-behavior": "^0.0.3",
+        "@polymer/iron-validatable-behavior": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-collapse": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-collapse/-/iron-collapse-0.0.3.tgz",
+      "integrity": "sha1-fgGkrHnOIB59YrwuNNTDbwiBL8I=",
+      "requires": {
+        "@polymer/iron-resizable-behavior": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-dropdown": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-dropdown/-/iron-dropdown-0.0.3.tgz",
+      "integrity": "sha1-reHGe4y5NGW2I18ysXVf7BuBR7I=",
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^0.0.3",
+        "@polymer/iron-behaviors": "^0.0.3",
+        "@polymer/iron-overlay-behavior": "^0.0.3",
+        "@polymer/iron-resizable-behavior": "^0.0.3",
+        "@polymer/neon-animation": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-fit-behavior": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-fit-behavior/-/iron-fit-behavior-0.0.3.tgz",
+      "integrity": "sha1-LYA5nk+r9LdeCBxfgSJO+b+pjUw=",
+      "requires": {
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-flex-layout": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-flex-layout/-/iron-flex-layout-0.0.3.tgz",
+      "integrity": "sha1-t9enMrHLrf5qqVAMoG9A0CV4uvc=",
+      "requires": {
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-form-element-behavior": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-form-element-behavior/-/iron-form-element-behavior-0.0.3.tgz",
+      "integrity": "sha1-NWSipR2Mz92kGT2UPV/QwSxGN1k=",
+      "requires": {
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-icon": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-icon/-/iron-icon-0.0.3.tgz",
+      "integrity": "sha1-4bFK/tStEQbthn1k7wH+Q/m05ec=",
+      "requires": {
+        "@polymer/iron-flex-layout": "^0.0.3",
+        "@polymer/iron-meta": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-icons": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-icons/-/iron-icons-0.0.3.tgz",
+      "integrity": "sha1-1nKrl5vc1N7YAn6N4j6MUdDH9MY=",
+      "requires": {
+        "@polymer/iron-icon": "^0.0.3",
+        "@polymer/iron-iconset-svg": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-iconset-svg": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-iconset-svg/-/iron-iconset-svg-0.0.3.tgz",
+      "integrity": "sha1-zUz/UjP4Bh4+DTSmUYC5qSCFhgo=",
+      "requires": {
+        "@polymer/iron-meta": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-input": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-input/-/iron-input-0.0.3.tgz",
+      "integrity": "sha1-5ByFh7JRqlEKJvKMqSOBqxRX33k=",
+      "requires": {
+        "@polymer/iron-validatable-behavior": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-menu-behavior": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-menu-behavior/-/iron-menu-behavior-0.0.3.tgz",
+      "integrity": "sha1-1kkaO00clzz/2AmXSdrRcfTXNpA=",
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^0.0.3",
+        "@polymer/iron-selector": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-meta": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-meta/-/iron-meta-0.0.3.tgz",
+      "integrity": "sha1-pM7IR5va7Gb/A3SaWRNvIf3gHXA=",
+      "requires": {
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-overlay-behavior": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-overlay-behavior/-/iron-overlay-behavior-0.0.3.tgz",
+      "integrity": "sha1-TFy7uRuSQLtvgkBAzpf2F/Xud1Y=",
+      "requires": {
+        "@polymer/iron-fit-behavior": "^0.0.3",
+        "@polymer/iron-resizable-behavior": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-resizable-behavior": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-resizable-behavior/-/iron-resizable-behavior-0.0.3.tgz",
+      "integrity": "sha1-IFRw+EBwZUkJo2C1M7ZZmy2AY1Q=",
+      "requires": {
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-selector": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-selector/-/iron-selector-0.0.3.tgz",
+      "integrity": "sha1-zeC7e5hF3bP238k62hR0Jszr37k=",
+      "requires": {
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/iron-validatable-behavior": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-validatable-behavior/-/iron-validatable-behavior-0.0.3.tgz",
+      "integrity": "sha1-Q4dHFz0rHTvBoIRYpV7THJtPGS8=",
+      "requires": {
+        "@polymer/iron-meta": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/neon-animation": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-0.0.3.tgz",
+      "integrity": "sha1-k+nuvN8CPHtC2afX9B+xk0tQCyI=",
+      "requires": {
+        "@polymer/iron-meta": "^0.0.3",
+        "@polymer/iron-resizable-behavior": "^0.0.3",
+        "@polymer/iron-selector": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2",
+        "web-animations-js": "2.1.3"
+      },
+      "dependencies": {
+        "web-animations-js": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.1.3.tgz",
+          "integrity": "sha1-+z/FakCi+4BIZjhvzxpBQmXEi0k="
+        }
+      }
+    },
+    "@polymer/paper-behaviors": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-behaviors/-/paper-behaviors-0.0.3.tgz",
+      "integrity": "sha1-eaObHcYsBnoXnvpwxPNOH7jemm8=",
+      "requires": {
+        "@polymer/iron-behaviors": "^0.0.3",
+        "@polymer/iron-checked-element-behavior": "^0.0.3",
+        "@polymer/paper-ripple": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/paper-button": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-button/-/paper-button-0.0.3.tgz",
+      "integrity": "sha1-X/aIMLhnMqgQi+Alm0tnPwqMwVY=",
+      "requires": {
+        "@polymer/iron-flex-layout": "^0.0.3",
+        "@polymer/paper-behaviors": "^0.0.3",
+        "@polymer/paper-material": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/paper-dropdown-menu": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-dropdown-menu/-/paper-dropdown-menu-0.0.3.tgz",
+      "integrity": "sha1-UfOgxTgvnujUWRBNvSHqwxaBJEw=",
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^0.0.3",
+        "@polymer/iron-form-element-behavior": "^0.0.3",
+        "@polymer/iron-icon": "^0.0.3",
+        "@polymer/iron-icons": "^0.0.3",
+        "@polymer/iron-validatable-behavior": "^0.0.3",
+        "@polymer/paper-input": "^0.0.3",
+        "@polymer/paper-menu-button": "^0.0.3",
+        "@polymer/paper-ripple": "^0.0.3",
+        "@polymer/paper-styles": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/paper-input": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-input/-/paper-input-0.0.3.tgz",
+      "integrity": "sha1-W7PvqQY9znhYaDnErrLrbPLGGKI=",
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^0.0.3",
+        "@polymer/iron-autogrow-textarea": "^0.0.3",
+        "@polymer/iron-behaviors": "^0.0.3",
+        "@polymer/iron-form-element-behavior": "^0.0.3",
+        "@polymer/iron-input": "^0.0.3",
+        "@polymer/paper-styles": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/paper-item": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-item/-/paper-item-0.0.3.tgz",
+      "integrity": "sha1-2yDR+Qrh9qOi9TRcHaQ0V/lqgA0=",
+      "requires": {
+        "@polymer/iron-behaviors": "^0.0.3",
+        "@polymer/iron-flex-layout": "^0.0.3",
+        "@polymer/paper-styles": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/paper-listbox": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-listbox/-/paper-listbox-0.0.3.tgz",
+      "integrity": "sha1-FFpo9BqP/rylpqjUdkDhE+D/pZE=",
+      "requires": {
+        "@polymer/iron-behaviors": "^0.0.3",
+        "@polymer/iron-collapse": "^0.0.3",
+        "@polymer/iron-menu-behavior": "^0.0.3",
+        "@polymer/paper-styles": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/paper-material": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-material/-/paper-material-0.0.3.tgz",
+      "integrity": "sha1-8V026b2nBcKWnHBWRzCmRsAsJsI=",
+      "requires": {
+        "@polymer/paper-styles": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/paper-menu-button": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-menu-button/-/paper-menu-button-0.0.3.tgz",
+      "integrity": "sha1-9B1sh7ermD0YX0TEyXM+RCJi+80=",
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^0.0.3",
+        "@polymer/iron-behaviors": "^0.0.3",
+        "@polymer/iron-dropdown": "^0.0.3",
+        "@polymer/neon-animation": "^0.0.3",
+        "@polymer/paper-material": "^0.0.3",
+        "@polymer/paper-styles": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/paper-ripple": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-ripple/-/paper-ripple-0.0.3.tgz",
+      "integrity": "sha1-K3IpR6hSglIzlnYGzV/PWQ632Ck=",
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/paper-styles": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-styles/-/paper-styles-0.0.3.tgz",
+      "integrity": "sha1-uEZqBHgH1vxjwk+nG0hsl1zHU3k=",
+      "requires": {
+        "@polymer/font-roboto": "^0.0.3",
+        "@polymer/iron-flex-layout": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/paper-toast": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-toast/-/paper-toast-0.0.3.tgz",
+      "integrity": "sha1-iNvLbyjNPc6dTshq58MaXkZmLvg=",
+      "requires": {
+        "@polymer/iron-a11y-announcer": "^0.0.3",
+        "@polymer/iron-overlay-behavior": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/paper-toolbar": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-toolbar/-/paper-toolbar-0.0.3.tgz",
+      "integrity": "sha1-1if7S0s/Vybz+dEyyhGBwuv2z9U=",
+      "requires": {
+        "@polymer/iron-flex-layout": "^0.0.3",
+        "@polymer/paper-styles": "^0.0.3",
+        "@polymer/polymer": "^1.2.5-npm-test.2"
+      }
+    },
+    "@polymer/polymer": {
+      "version": "1.2.5-npm-test.2",
+      "resolved": "https://registry.npmjs.org/@polymer/polymer/-/polymer-1.2.5-npm-test.2.tgz",
+      "integrity": "sha1-eTD1ZjwvaGkVRR0hHmY6qZl9czY=",
+      "requires": {
+        "webcomponents.js": "^0.7.20"
+      }
+    },
+    "@types/clone": {
+      "version": "0.1.30",
+      "resolved": "https://registry.npmjs.org/@types/clone/-/clone-0.1.30.tgz",
+      "integrity": "sha1-5zZWSMG0ITalnH1QQGN7O1yDthQ="
+    },
+    "@types/node": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-4.9.4.tgz",
+      "integrity": "sha512-nKoiCZ87x6+fs26bNHjy07AQt6f46nFEitGH0P9JmWbY6tEyum6LLfLf7SIsKFh4DnBWsyUM2gYhaQAt+aA0Sw=="
+    },
+    "@types/parse5": {
+      "version": "0.0.31",
+      "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-0.0.31.tgz",
+      "integrity": "sha1-6Cekk6RDsVbhtYKi5MO9wAQPLuc=",
+      "requires": {
+        "@types/node": "6.0.*"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "6.0.118",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.118.tgz",
+          "integrity": "sha512-N33cKXGSqhOYaPiT4xUGsYlPPDwFtQM/6QxJxuMXA/7BcySW+lkn2yigWP7vfs4daiL/7NJNU6DMCqg5N4B+xQ=="
+        }
+      }
+    },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
+    "acorn": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
+      "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
+    },
+    "acorn-jsx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
+      "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=",
+      "requires": {
+        "acorn": "^3.0.4"
+      }
+    },
+    "ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+      "optional": true
+    },
+    "ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+      "optional": true
+    },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      }
+    },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
+    "boxen": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-0.3.1.tgz",
+      "integrity": "sha1-p9iYJDrmIvertrtgTXQKdsalRhs=",
+      "optional": true,
+      "requires": {
+        "chalk": "^1.1.1",
+        "filled-array": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "repeating": "^2.0.0",
+        "string-width": "^1.0.1",
+        "widest-line": "^1.0.0"
+      }
+    },
+    "capture-stack-trace": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz",
+      "integrity": "sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==",
+      "optional": true
+    },
+    "chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "optional": true,
+      "requires": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      }
+    },
+    "clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
+    },
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+      "optional": true
+    },
+    "codemirror": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.15.2.tgz",
+      "integrity": "sha1-WLPccyxtENeq6Ab0x83VapuH/o8="
+    },
+    "configstore": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-2.1.0.tgz",
+      "integrity": "sha1-c3o6cDbpiGECqmCZ5HuzOrGroaE=",
+      "optional": true,
+      "requires": {
+        "dot-prop": "^3.0.0",
+        "graceful-fs": "^4.1.2",
+        "mkdirp": "^0.5.0",
+        "object-assign": "^4.0.1",
+        "os-tmpdir": "^1.0.0",
+        "osenv": "^0.1.0",
+        "uuid": "^2.0.1",
+        "write-file-atomic": "^1.1.2",
+        "xdg-basedir": "^2.0.0"
+      }
+    },
+    "core-js": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+      "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "optional": true
+    },
+    "create-error-class": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
+      "integrity": "sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=",
+      "optional": true,
+      "requires": {
+        "capture-stack-trace": "^1.0.0"
+      }
+    },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "optional": true
+    },
+    "deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
+    },
+    "doctrine": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
+      "integrity": "sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=",
+      "requires": {
+        "esutils": "^1.1.6",
+        "isarray": "0.0.1"
+      }
+    },
+    "dom5": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/dom5/-/dom5-1.3.6.tgz",
+      "integrity": "sha1-pwiKn8XzsI3J9u2kx6uuskGUXg0=",
+      "requires": {
+        "@types/clone": "^0.1.29",
+        "@types/node": "^4.0.30",
+        "@types/parse5": "^0.0.31",
+        "clone": "^1.0.2",
+        "parse5": "^1.4.1"
+      }
+    },
+    "dot-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-3.0.0.tgz",
+      "integrity": "sha1-G3CK8JSknJoOfbyteQq6U52sEXc=",
+      "optional": true,
+      "requires": {
+        "is-obj": "^1.0.0"
+      }
+    },
+    "duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=",
+      "optional": true,
+      "requires": {
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "optional": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "es6-promise": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-2.3.0.tgz",
+      "integrity": "sha1-lu258v2wGZWCKyY92KratnSBgbw="
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "optional": true
+    },
+    "escodegen": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
+      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
+      "requires": {
+        "esprima": "^4.0.1",
+        "estraverse": "^4.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+        },
+        "esutils": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+          "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
+        }
+      }
+    },
+    "espree": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.4.tgz",
+      "integrity": "sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==",
+      "requires": {
+        "acorn": "^5.5.0",
+        "acorn-jsx": "^3.0.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "5.7.4",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
+          "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg=="
+        }
+      }
+    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+    },
+    "estraverse": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-3.1.0.tgz",
+      "integrity": "sha1-FeKKRGuLgrxwDMyLlseK9NoNbLo="
+    },
+    "esutils": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz",
+      "integrity": "sha1-wBzKqa5LiXxtDD4hCuUvPHqEQ3U="
+    },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
+    },
+    "filled-array": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filled-array/-/filled-array-1.1.0.tgz",
+      "integrity": "sha1-w8T2xmO5I0WamqKZEtLQMfFQf4Q=",
+      "optional": true
+    },
+    "got": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/got/-/got-5.7.1.tgz",
+      "integrity": "sha1-X4FjWmHkplifGAVp6k44FoClHzU=",
+      "optional": true,
+      "requires": {
+        "create-error-class": "^3.0.1",
+        "duplexer2": "^0.1.4",
+        "is-redirect": "^1.0.0",
+        "is-retry-allowed": "^1.0.0",
+        "is-stream": "^1.0.0",
+        "lowercase-keys": "^1.0.0",
+        "node-status-codes": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "parse-json": "^2.1.0",
+        "pinkie-promise": "^2.0.0",
+        "read-all-stream": "^3.0.0",
+        "readable-stream": "^2.0.5",
+        "timed-out": "^3.0.0",
+        "unzip-response": "^1.0.2",
+        "url-parse-lax": "^1.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+      "optional": true
+    },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "optional": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "hydrolysis": {
+      "version": "1.25.0",
+      "resolved": "https://registry.npmjs.org/hydrolysis/-/hydrolysis-1.25.0.tgz",
+      "integrity": "sha1-pPsUo3oeA7DbUtiqpXxoInKhTYQ=",
+      "requires": {
+        "acorn": "^3.2.0",
+        "babel-polyfill": "^6.2.0",
+        "doctrine": "^0.7.0",
+        "dom5": "1.1.0",
+        "escodegen": "^1.7.0",
+        "espree": "^3.1.3",
+        "estraverse": "^3.1.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "dependencies": {
+        "dom5": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/dom5/-/dom5-1.1.0.tgz",
+          "integrity": "sha1-Ogx3AMCDq0xNJpOKeLDwxtzDd5Q=",
+          "requires": {
+            "parse5": "^1.4.1"
+          }
+        }
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "optional": true
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "optional": true
+    },
+    "ini": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
+      "optional": true
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "optional": true
+    },
+    "is-finite": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
+      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
+      "optional": true
+    },
+    "is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+      "optional": true,
+      "requires": {
+        "number-is-nan": "^1.0.0"
+      }
+    },
+    "is-npm": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
+      "integrity": "sha1-8vtjpl5JBbQGyGBydloaTceTufQ=",
+      "optional": true
+    },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
+      "optional": true
+    },
+    "is-redirect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
+      "integrity": "sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=",
+      "optional": true
+    },
+    "is-retry-allowed": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
+      "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==",
+      "optional": true
+    },
+    "is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
+      "optional": true
+    },
+    "isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+    },
+    "latest-version": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-2.0.0.tgz",
+      "integrity": "sha1-VvjWE5YghHuAF/jx9NeOIRMkFos=",
+      "optional": true,
+      "requires": {
+        "package-json": "^2.0.0"
+      }
+    },
+    "levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
+      "requires": {
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
+      }
+    },
+    "lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
+      "optional": true
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "optional": true
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "optional": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "node-status-codes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-status-codes/-/node-status-codes-1.0.0.tgz",
+      "integrity": "sha1-WuVUHQJGRdMqWPzdyc7s6nrjrC8=",
+      "optional": true
+    },
+    "nopt": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+      "requires": {
+        "abbrev": "1"
+      }
+    },
+    "number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+      "optional": true
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "optional": true
+    },
+    "optionator": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+      "requires": {
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.6",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "word-wrap": "~1.2.3"
+      }
+    },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+      "optional": true
+    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+      "optional": true
+    },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "optional": true,
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
+    "package-json": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-2.4.0.tgz",
+      "integrity": "sha1-DRW9Z9HLvduyyiIv8u24a8sxqLs=",
+      "optional": true,
+      "requires": {
+        "got": "^5.0.0",
+        "registry-auth-token": "^3.0.1",
+        "registry-url": "^3.0.3",
+        "semver": "^5.1.0"
+      }
+    },
+    "parse-json": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+      "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+      "optional": true,
+      "requires": {
+        "error-ex": "^1.2.0"
+      }
+    },
+    "parse5": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz",
+      "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ="
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+    },
+    "path-posix": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/path-posix/-/path-posix-1.0.0.tgz",
+      "integrity": "sha1-BrJhE/Vr6rBCVFojv6iAA8ysJg8="
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
+      "optional": true
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "optional": true,
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
+    "prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
+    },
+    "prepend-http": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
+      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
+      "optional": true
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "optional": true
+    },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "optional": true,
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      }
+    },
+    "read-all-stream": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz",
+      "integrity": "sha1-NcPhd/IHjveJ7kv6+kNzB06u9Po=",
+      "optional": true,
+      "requires": {
+        "pinkie-promise": "^2.0.0",
+        "readable-stream": "^2.0.0"
+      }
+    },
+    "readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "optional": true,
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "optional": true
+        }
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+      "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
+    },
+    "registry-auth-token": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz",
+      "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==",
+      "optional": true,
+      "requires": {
+        "rc": "^1.1.6",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "registry-url": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
+      "integrity": "sha1-PU74cPc93h138M+aOBQyRE4XSUI=",
+      "optional": true,
+      "requires": {
+        "rc": "^1.0.1"
+      }
+    },
+    "repeating": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
+      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
+      "optional": true,
+      "requires": {
+        "is-finite": "^1.0.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "optional": true
+    },
+    "semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "optional": true
+    },
+    "semver-diff": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.1.0.tgz",
+      "integrity": "sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=",
+      "optional": true,
+      "requires": {
+        "semver": "^5.0.3"
+      }
+    },
+    "slide": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
+      "integrity": "sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=",
+      "optional": true
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "optional": true
+    },
+    "string-width": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+      "optional": true,
+      "requires": {
+        "code-point-at": "^1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
+        "strip-ansi": "^3.0.0"
+      }
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "optional": true,
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "optional": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+      "optional": true
+    },
+    "supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+      "optional": true
+    },
+    "timed-out": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-3.1.3.tgz",
+      "integrity": "sha1-lYYL/MXHbCd/j4Mm/Q9bLiDrohc=",
+      "optional": true
+    },
+    "type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+      "requires": {
+        "prelude-ls": "~1.1.2"
+      }
+    },
+    "unzip-response": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-1.0.2.tgz",
+      "integrity": "sha1-uYTwh3/AqJwsdzzB73tbIytbBv4=",
+      "optional": true
+    },
+    "update-notifier": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-0.6.3.tgz",
+      "integrity": "sha1-d23sjaoT6WKjQeih2YNUMGtnrgg=",
+      "optional": true,
+      "requires": {
+        "boxen": "^0.3.1",
+        "chalk": "^1.0.0",
+        "configstore": "^2.0.0",
+        "is-npm": "^1.0.0",
+        "latest-version": "^2.0.0",
+        "semver-diff": "^2.0.0"
+      }
+    },
+    "url-parse-lax": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
+      "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
+      "optional": true,
+      "requires": {
+        "prepend-http": "^1.0.1"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "optional": true
+    },
+    "uuid": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
+      "integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=",
+      "optional": true
+    },
+    "vulcanize": {
+      "version": "1.14.8",
+      "resolved": "https://registry.npmjs.org/vulcanize/-/vulcanize-1.14.8.tgz",
+      "integrity": "sha1-PN1vgdm68sV5bd1tLSieRZdQhvc=",
+      "requires": {
+        "dom5": "^1.3.1",
+        "es6-promise": "^2.1.0",
+        "hydrolysis": "^1.19.1",
+        "nopt": "^3.0.1",
+        "path-posix": "^1.0.0",
+        "update-notifier": "^0.6.0"
+      }
+    },
+    "web-animations-js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.2.2.tgz",
+      "integrity": "sha1-fDqlOCxerecM0gaIDVajeGljBjg="
+    },
+    "webcomponents.js": {
+      "version": "0.7.22",
+      "resolved": "https://registry.npmjs.org/webcomponents.js/-/webcomponents.js-0.7.22.tgz",
+      "integrity": "sha1-EHt7P9MBYRAOjoXkAMMr7Rvyn+o="
+    },
+    "widest-line": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-1.0.0.tgz",
+      "integrity": "sha1-DAnIXCqUaD0Nfq+O4JfVZL8OEFw=",
+      "optional": true,
+      "requires": {
+        "string-width": "^1.0.1"
+      }
+    },
+    "word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
+    },
+    "write-file-atomic": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-1.3.4.tgz",
+      "integrity": "sha1-+Aek8LHZ6ROuekgRLmzDrxmRtF8=",
+      "optional": true,
+      "requires": {
+        "graceful-fs": "^4.1.11",
+        "imurmurhash": "^0.1.4",
+        "slide": "^1.1.5"
+      }
+    },
+    "xdg-basedir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz",
+      "integrity": "sha1-7byQPMOF/ARSPZZqM1UEtVBNG9I=",
+      "optional": true,
+      "requires": {
+        "os-homedir": "^1.0.0"
+      }
+    }
+  }
+}
diff --git a/validator/js/webui/package.json b/validator/js/webui/package.json
new file mode 100644
index 0000000000000..f302648bc10e9
--- /dev/null
+++ b/validator/js/webui/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "amp-validator-webui",
+  "version": "0.1.0",
+  "description": "Web UI for Validator for AMP HTML (www.ampproject.org)",
+  "author": "The AMP HTML Authors",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ampproject/amphtml.git"
+  },
+  "scripts": {
+    "preinstall": "node ../../../build-system/common/check-package-manager.js"
+  },
+  "dependencies": {
+    "@polymer/font-roboto": "0.0.3",
+    "@polymer/iron-a11y-announcer": "0.0.3",
+    "@polymer/iron-a11y-keys-behavior": "0.0.3",
+    "@polymer/iron-behaviors": "0.0.3",
+    "@polymer/iron-dropdown": "0.0.3",
+    "@polymer/iron-fit-behavior": "0.0.3",
+    "@polymer/iron-flex-layout": "0.0.3",
+    "@polymer/iron-form-element-behavior": "0.0.3",
+    "@polymer/iron-icon": "0.0.3",
+    "@polymer/iron-icons": "0.0.3",
+    "@polymer/iron-iconset-svg": "0.0.3",
+    "@polymer/iron-input": "0.0.3",
+    "@polymer/iron-menu-behavior": "0.0.3",
+    "@polymer/iron-meta": "0.0.3",
+    "@polymer/iron-overlay-behavior": "0.0.3",
+    "@polymer/iron-resizable-behavior": "0.0.3",
+    "@polymer/iron-selector": "0.0.3",
+    "@polymer/iron-validatable-behavior": "0.0.3",
+    "@polymer/neon-animation": "0.0.3",
+    "@polymer/paper-behaviors": "0.0.3",
+    "@polymer/paper-button": "0.0.3",
+    "@polymer/paper-dropdown-menu": "0.0.3",
+    "@polymer/paper-input": "0.0.3",
+    "@polymer/paper-item": "0.0.3",
+    "@polymer/paper-listbox": "0.0.3",
+    "@polymer/paper-material": "0.0.3",
+    "@polymer/paper-menu-button": "0.0.3",
+    "@polymer/paper-ripple": "0.0.3",
+    "@polymer/paper-styles": "0.0.3",
+    "@polymer/paper-toast": "0.0.3",
+    "@polymer/paper-toolbar": "0.0.3",
+    "@polymer/polymer": "1.2.5-npm-test.2",
+    "codemirror": "5.15.2",
+    "vulcanize": "1.14.8",
+    "webcomponents.js": "0.7.22",
+    "web-animations-js": "2.2.2"
+  }
+}
diff --git a/validator/webui/serve-standalone.go b/validator/js/webui/serve-standalone.go
similarity index 94%
rename from validator/webui/serve-standalone.go
rename to validator/js/webui/serve-standalone.go
index ebf82e721a428..35e645140db1d 100644
--- a/validator/webui/serve-standalone.go
+++ b/validator/js/webui/serve-standalone.go
@@ -53,7 +53,10 @@ func handler(w http.ResponseWriter, r *http.Request) {
 				return
 			}
 			w.Header().Set("Content-type", "text/html")
-			if *validator_js != "https://cdn.ampproject.org/v0/validator.js" {
+			if r.FormValue("experimental_wasm") == "1" {
+				bytes = []byte(strings.Replace(string(bytes),
+					"https://cdn.ampproject.org/v0/validator.js", "https://cdn.ampproject.org/v0/validator_wasm.js", -1))
+			} else if *validator_js != "https://cdn.ampproject.org/v0/validator.js" {
 				bytes = []byte(strings.Replace(string(bytes),
 					"https://cdn.ampproject.org/v0/validator.js", "/validator.js", -1))
 			}
@@ -84,6 +87,7 @@ func handler(w http.ResponseWriter, r *http.Request) {
 			}
 			w.Header().Set("Content-type", "text/javascript")
 			w.Write(bytes)
+			return
 		}
 		// Look up any other resources relative to node_modules or webui.
 		relative_path := r.RequestURI[1:] // Strip leading "/".
diff --git a/validator/webui/webui.js b/validator/js/webui/webui.js
similarity index 100%
rename from validator/webui/webui.js
rename to validator/js/webui/webui.js
diff --git a/validator/nodejs/README.md b/validator/nodejs/README.md
deleted file mode 100644
index 0671638e5c706..0000000000000
--- a/validator/nodejs/README.md
+++ /dev/null
@@ -1,141 +0,0 @@
-# amphtml-validator Node.js Package
-
-This package is published and available at
-https://www.npmjs.com/package/amphtml-validator.
-
-The source code is available at
-https://github.com/ampproject/amphtml/tree/master/validator/nodejs.
-
-## Command Line Tool
-
-The `amphtml-validator` command line tool is documented here:
-https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp#command-line-tool
-
-## Node.js API
-
-This API is new - feedback is especially welcome.
-
-To install, use `npm install amphtml-validator` in your project directory,
-or add `amphtml-validator` as a dependency to your package.json.
-
-You may save the following example into a file, e.g., `demo.js`.
-
-```js
-'use strict';
-var amphtmlValidator = require('amphtml-validator');
-
-amphtmlValidator.getInstance().then(function (validator) {
-  var result = validator.validateString('<html>Hello, world.</html>');
-  (result.status === 'PASS' ? console.log : console.error)(result.status);
-  for (var ii = 0; ii < result.errors.length; ii++) {
-    var error = result.errors[ii];
-    var msg =
-      'line ' + error.line + ', col ' + error.col + ': ' + error.message;
-    if (error.specUrl !== null) {
-      msg += ' (see ' + error.specUrl + ')';
-    }
-    (error.severity === 'ERROR' ? console.error : console.warn)(msg);
-  }
-});
-```
-
-Now try running it:
-
-```sh
-$ node demo.js
-FAIL
-line 1, col 0: The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
-line 1, col 0: The parent tag of tag 'html ⚡ for top-level html' is '$root', but it can only be '!doctype'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml.html#required-markup)
-...
-```
-
-As expected, this emits errors because the provided string in the example, `<html>Hello, world.</html>` is not a valid AMP HTML document.
-
-## Release Notes
-
-### 1.0.30
-
-- Remove engine section from pacakge.json to allow any version of nodejs.
-
-### 1.0.29
-
-- Reintroduce node v8 support. Supports node v8, v10, v12 and v14.
-
-### 1.0.28
-
-- Reintroduce node v10 support and introduce node v14 support.
-
-### 1.0.27
-
-- Removed references to amp.validator.categorizeError.
-
-### 1.0.26
-
-- Introduce node v12 support and remove node v10 support.
-
-### 1.0.25
-
-- Broken release, removed.
-
-### 1.0.24
-
-- Introduce node v10 support and remove node 8 support.
-
-### 1.0.23
-
-- The amphtml-validator binary now requires the Node.js binary to be called node.
-  On systems where the Node.js binary is called nodejs, consider installing
-  the nodejs-legacy Debian package or better yet, NVM.
-
-### 1.0.22
-
-- --html_format=AMP4EMAIL added.
-
-### 1.0.21
-
-- --html_format=AMP4ADS is no longer experimental.
-
-### 1.0.20
-
-- Better npm post-install for virtual machines, running debian over windows with SMB shared folder.
-
-### 1.0.19
-
-- Set correct process exit status for old versions of Node.js (v0.10.25).
-
-### 1.0.18
-
-- Small tweaks to this file and package.json.
-
-### 1.0.17
-
-- If the amphtml-validator command is already patched up for Windows, leave it
-  alone instead of failing. Relevant if the package has been installed globally
-  and now we're performing a local install on top of it.
-
-### 1.0.16
-
-- `npm install amphtml-validator` (local install) should now work on Windows,
-  for `require('amphtml-validator')`.
-
-### 1.0.15
-
-- Added support for installing on Windows.
-  `npm install -g amphtml-validator` should now just work.
-
-### 1.0.13
-
-- Added newInstance method, a simple API that's not async.
-
-### 1.0.12
-
-- Added support for --user-agent option.
-
-### 1.0.11
-
-- Added support for AMP4ADS (via --html_format command line flag) and
-  argument for validateString function in the API.
-
-### 1.0.10
-
-- Fixed [#4246: amphtml-validator CLI fails on Mac OS X](https://github.com/ampproject/amphtml/issues/4246).
diff --git a/validator/nodejs/index.js b/validator/nodejs/index.js
deleted file mode 100755
index 6797e018907cd..0000000000000
--- a/validator/nodejs/index.js
+++ /dev/null
@@ -1,500 +0,0 @@
-/**
- * @license
- * Copyright 2016 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 colors = require('colors/safe');
-const fs = require('fs');
-const http = require('http');
-const https = require('https');
-const path = require('path');
-const program = require('commander');
-const Promise = require('promise');
-const querystring = require('querystring');
-const url = require('url');
-const util = require('util');
-const vm = require('vm');
-
-const DEFAULT_USER_AGENT = 'amphtml-validator';
-
-/**
- * Determines if str begins with prefix.
- * @param {string} str
- * @param {string} prefix
- * @return {boolean}
- */
-function hasPrefix(str, prefix) {
-  return str.indexOf(prefix) == 0;
-}
-
-/**
- * Convenience function to detect whether an argument is a URL. If not,
- * it may be a local file.
- * @param {string} url
- * @return {boolean}
- */
-function isHttpOrHttpsUrl(url) {
-  return hasPrefix(url, 'http://') || hasPrefix(url, 'https://');
-}
-
-/**
- * Creates a promise which reads from a file.
- * @param {string} name
- * @return {Promise<string>}
- */
-function readFromFile(name) {
-  return new Promise(function(resolve, reject) {
-    fs.readFile(name, 'utf8', function(err, data) {
-      if (err) {
-        reject(err);
-      } else {
-        resolve(data.trim());
-      }
-    });
-  });
-}
-
-/**
- * Creates a promise which reads from a stream.
- * @param {string} name
- * @param {!stream.Readable} readable
- * @return {Promise<string>}
- */
-function readFromReadable(name, readable) {
-  return new Promise(function(resolve, reject) {
-    const chunks = [];
-    readable.setEncoding('utf8');
-    readable.on('data', function(chunk) {
-      chunks.push(chunk);
-    });
-    readable.on('end', function() {
-      resolve(chunks.join(''));
-    });
-    readable.on('error', function(error) {
-      reject(new Error('Could not read from ' + name + ' - ' + error.message));
-    });
-  });
-}
-
-/**
- * Creates a promise which reads from standard input. Even though it would
- * be easy to make a function that just returns the data, we return a promise
- * for consistency with readFromUrl and readFromFile.
- * @return {Promise<string>}
- */
-function readFromStdin() {
-  return readFromReadable('stdin', process.stdin).then(function(data) {
-    process.stdin.resume();
-    return data;
-  });
-}
-
-/**
- * Creates a promise which reads from a URL or more precisely, fetches
- * the contents located at the URL by using the 'http' or 'https' module.
- * Any HTTP status other than 200 is interpreted as an error.
- * @param {string} url
- * @param {string} userAgent
- * @return {Promise<string>}
- */
-function readFromUrl(url, userAgent) {
-  return new Promise(function(resolve, reject) {
-    const clientModule = hasPrefix(url, 'http://') ? http : https;
-    const req = clientModule.request(url, function(response) {
-      if (response.statusCode !== 200) {
-        // https://nodejs.org/api/http.html says: "[...] However, if
-        // you add a 'response' event handler, then you must consume
-        // the data from the response object, either by calling
-        // response.read() whenever there is a 'readable' event, or by
-        // adding a 'data' handler, or by calling the .resume()
-        // method."
-        response.resume();
-        reject(new Error(
-            'Unable to fetch ' + url + ' - HTTP Status ' +
-                   response.statusCode));
-      } else {
-        resolve(response);
-      }
-    });
-    req.setHeader('User-Agent', userAgent);
-    req.on('error', function(error) { // E.g., DNS resolution errors.
-      reject(
-          new Error('Unable to fetch ' + url + ' - ' + error.message));
-    });
-    req.end();
-  })
-      .then(readFromReadable.bind(null, url));
-}
-
-/**
- * ValidationResult is the record computed by the validator for each
- * document. It contains an overall status (PASS/FAIL) and the list of
- * errors, if any. This class corresponds to the ValidationResult
- * message in validator.proto in this directory.
- * @export
- * @constructor
- */
-function ValidationResult() {
-  /**
-   * Possible values are 'UNKNOWN', 'PASS', and 'FAIL'.
-   * @type {string}
-   */
-  this.status = 'UNKNOWN';
-  /** @type {!Array<!ValidationError>} */
-  this.errors = [];
-}
-
-/**
- * Each validation error describes a specific problem in a validated
- * document. This class corresponds to the ValidationError message in
- * validator.proto in this directory.
- * @export
- * @constructor
- */
-function ValidationError() {
-  /**
-   * The severity of the error - possible values are 'UNKNOWN_SEVERITY',
-   * 'ERROR', and 'WARNING'.
-   */
-  this.severity = 'UNKNOWN_SEVERITY';
-  /**
-   * The line number at which the error was seen (1 is the first line).
-   */
-  this.line = 1;
-  /**
-   * The column number at which the error was seen (0 is the first column).
-   */
-  this.col = 0;
-  /**
-   * A human-readable error message for the validation error.
-   * If you find yourself trying to write a parser against this string
-   * to scrape out some detail, consider looking at the code and params
-   * fields below.
-   * @type {string}
-   */
-  this.message = '';
-  /**
-   * The spec URL is often added by the validator to provide additional
-   * context for the error. In a user interface this would be shown
-   * as a "Learn more" link.
-   * @type {string}
-   */
-  this.specUrl = null;
-  /**
-   * This field is only useful when scripting against the validator,
-   * it should not be displayed in a user interface as it adds nothing
-   * for humans to read over the message field (see above).
-   * Possible values are the codes listed in ValidationError.Code - see
-   * validator.proto. Examples: 'UNKNOWN_CODE', 'MANDATORY_TAG_MISSING',
-   * 'TAG_REQUIRED_BY_MISSING'. For each of these codes there is a
-   * format string in validator-main.protoascii (look for error_formats),
-   * which is used to assemble the message from the strings in params.
-   * @type {string}
-   */
-  this.code = 'UNKNOWN_CODE';
-  /**
-   * This field is only useful when scripting against the validator,
-   * it should not be displayed in a user interface as it adds nothing
-   * for humans to read over the message field (see above).
-   * @type {!Array<string>}
-   */
-  this.params = [];
-}
-
-/**
- * The validator instance is a proxy object to a precompiled
- * validator.js script - in practice the script was either downloaded
- * from 'https://cdn.ampproject.org/v0/validator.js' or read from a
- * local file.
- * @param {string} scriptContents
- * @throws {!Error}
- * @constructor
- */
-function Validator(scriptContents) {
-  // The 'sandbox' is a Javascript object (dictionary) which holds
-  // the results of evaluating the validatorJs / scriptContents, so
-  // basically, it holds functions, prototypes, etc. As a
-  // side-effect of evaluating, the VM will compile this code and
-  // it's worth holding onto it. Hence, this validate function is
-  // reached via 2 codepaths - either the sandbox came from the
-  // cache, precompiledByValidatorJs - or we just varructed it
-  // after downloading and evaluating the script. The API is fancier
-  // here, vm.Script / vm.createContext / vm.runInContext and all
-  // that, but it's quite similar to a Javascript eval.
-  this.sandbox = vm.createContext();
-  try {
-    new vm.Script(scriptContents).runInContext(this.sandbox);
-  } catch (error) {
-    throw new Error('Could not instantiate validator.js - ' + error.message);
-  }
-}
-
-/**
- * Validates the provided inputString; the htmlFormat can be 'AMP' or
- * 'AMP4ADS'; it defaults to 'AMP' if not specified.
- * @param {string} inputString
- * @param {string=} htmlFormat
- * @return {!ValidationResult}
- * @export
- */
-Validator.prototype.validateString = function(inputString, htmlFormat) {
-  const internalResult =
-      this.sandbox.amp.validator.validateString(inputString, htmlFormat);
-  const result = new ValidationResult();
-  result.status = internalResult.status;
-  for (let ii = 0; ii < internalResult.errors.length; ii++) {
-    const internalError = internalResult.errors[ii];
-    const error = new ValidationError();
-    error.severity = internalError.severity;
-    error.line = internalError.line;
-    error.col = internalError.col;
-    error.message =
-        this.sandbox.amp.validator.renderErrorMessage(internalError);
-    error.specUrl = internalError.specUrl;
-    error.code = internalError.code;
-    error.params = internalError.params;
-    result.errors.push(error);
-  }
-  return result;
-};
-
-/**
- * A global static map used by the getInstance function to avoid loading
- * AMP Validators more than once.
- * @type {!Object<string, Validator>}
- */
-const instanceByValidatorJs = {};
-
-/**
- * Provided a URL or a filename from which to fetch the validator.js
- * file, fetches, instantiates, and caches the validator instance
- * asynchronously.  If you prefer to implement your own fetching /
- * caching logic, you may want to consider newInstance() instead,
- * which is synchronous and much simpler.
- *
- * @param {string=} opt_validatorJs
- * @param {string=} opt_userAgent
- * @return {!Promise<Validator>}
- * @export
- */
-function getInstance(opt_validatorJs, opt_userAgent) {
-  const validatorJs =
-      opt_validatorJs || 'https://cdn.ampproject.org/v0/validator.js';
-  const userAgent = opt_userAgent || DEFAULT_USER_AGENT;
-  if (instanceByValidatorJs.hasOwnProperty(validatorJs)) {
-    return Promise.resolve(instanceByValidatorJs[validatorJs]);
-  }
-  const validatorJsPromise = isHttpOrHttpsUrl(validatorJs) ?
-    readFromUrl(validatorJs, userAgent) :
-    readFromFile(validatorJs);
-  return validatorJsPromise.then(function(scriptContents) {
-    let instance;
-    try {
-      instance = new Validator(scriptContents);
-    } catch (error) {
-      // It may be useful to cache errors and exceptions encountered
-      // here, but for now we don't do this for e.g. http errors when
-      // fetching the validator, so we shouldn't do it for syntax
-      // errors etc. either (which lead to the varructor throwing an error).
-      throw error;
-    }
-    instanceByValidatorJs[validatorJs] = instance;
-    return instance;
-  });
-}
-exports.getInstance = getInstance;
-
-/**
- * Provided the contents of the validator.js file, e.g. as downloaded from
- * 'https://cdn.ampproject.org/v0/validator.js', returns a new validator
- * instance. The tradeoff between this function and getInstance() is that this
- * function is synchronous but requires the contents of the validator.js
- * file as a parameter, while getInstance is asynchronous, fetches files
- * from disk or the web, and caches them.
- *
- * @param {string} validatorJsContents
- * @return {!Validator}
- * @export
- */
-function newInstance(validatorJsContents) {
-  return new Validator(validatorJsContents);
-}
-exports.newInstance = newInstance;
-
-// A note on emitting output to the console and process exit status:
-// Node.js prior to 0.11.8 did not support process.exitCode
-// (https://nodejs.org/api/process.html#process_process_exitcode), which
-// makes it difficult to emit output and errors from multiple callbacks
-// and set the appropriate exit code. We use the following workaround:
-// process.<<stream>>(<<some output>>, function() { process.exit(<<code>>); });
-// This will flush the appropriate stream (stdout or stderr) and then
-// exit with the provided code. For now, this makes the CLI work with
-// Node.js versions as old as v0.10.25.
-
-/**
- * Logs a validation result to the console using process.stdout and
- * process.stderr as is appropriate.
- * @param {string} filename
- * @param {!ValidationResult} validationResult
- * @param {boolean} color
- */
-function logValidationResult(filename, validationResult, color) {
-  if (validationResult.status === 'PASS') {
-    process.stdout.write(
-        filename + ': ' + (color ? colors.green('PASS') : 'PASS') + '\n');
-  }
-  for (let ii = 0; ii < validationResult.errors.length; ii++) {
-    const error = validationResult.errors[ii];
-    let msg = filename + ':' + error.line + ':' + error.col + ' ';
-    if (color) {
-      msg += (error.severity === 'ERROR' ? colors.red : colors.magenta)(
-          error.message);
-    } else {
-      msg += error.message;
-    }
-    if (error.specUrl) {
-      msg += ' (see ' + error.specUrl + ')';
-    }
-    // TODO(powdercloud): Should we distinguish error.severity === 'WARNING' ?
-    process.stderr.write(msg + '\n');
-  }
-}
-
-/**
- * Main entry point into the command line tool.
- */
-function main() {
-  program
-      .usage(
-          '[options] <fileOrUrlOrMinus...>\n\n' +
-          '  Validates the files or urls provided as arguments. If "-" is\n' +
-          '  specified, reads from stdin instead.')
-      .option(
-          '--validator_js <fileOrUrl>',
-          'The Validator Javascript.\n' +
-              '  Latest published version by default, or\n' +
-              '  dist/validator_minified.js (built with build.py)\n' +
-              '  for development.',
-          'https://cdn.ampproject.org/v0/validator.js')
-      .option(
-          '--user-agent <userAgent>', 'User agent string to use in requests.',
-          DEFAULT_USER_AGENT)
-      .option(
-          '--html_format <AMP|AMP4ADS|AMP4EMAIL|ACTIONS>',
-          'The input format to be validated.\n' +
-              '  AMP by default.',
-          'AMP')
-      .option(
-          '--format <color|text|json>',
-          'How to format the output.\n' +
-              '  "color" displays errors/warnings/success in\n' +
-              '          red/orange/green.\n' +
-              '  "text"  avoids color (e.g., useful in terminals not\n' +
-              '          supporting color).\n' +
-              '  "json"  emits json corresponding to the ValidationResult\n' +
-              '          message in validator.proto.',
-          'color')
-      .parse(process.argv);
-  if (program.args.length === 0) {
-    program.outputHelp();
-    process.exit(1);
-  }
-  if (program.html_format !== 'AMP' && program.html_format !== 'AMP4ADS' &&
-      program.html_format !== 'AMP4EMAIL' &&
-      program.html_format !== 'ACTIONS') {
-    process.stderr.write(
-        '--html_format must be set to "AMP", "AMP4ADS", "AMP4EMAIL", or ' +
-            '"ACTIONS.\n',
-        function() {
-          process.exit(1);
-        });
-  }
-  if (program.format !== 'color' && program.format !== 'text' &&
-      program.format !== 'json') {
-    process.stderr.write(
-        '--format must be set to "color", "text", or "json".\n', function() {
-          process.exit(1);
-        });
-  }
-  const inputs = [];
-  for (let ii = 0; ii < program.args.length; ii++) {
-    const item = program.args[ii];
-    if (item === '-') {
-      inputs.push(readFromStdin());
-    } else if (isHttpOrHttpsUrl(item)) {
-      inputs.push(readFromUrl(item, program.userAgent));
-    } else {
-      inputs.push(readFromFile(item));
-    }
-  }
-  getInstance(program.validator_js, program.userAgent)
-      .then(function(validator) {
-        Promise.all(inputs)
-            .then(function(resolvedInputs) {
-              const jsonOut = {};
-              let hasError = false;
-              for (let ii = 0; ii < resolvedInputs.length; ii++) {
-                const validationResult = validator.validateString(
-                    resolvedInputs[ii], program.html_format);
-                if (program.format === 'json') {
-                  jsonOut[program.args[ii]] = validationResult;
-                } else {
-                  logValidationResult(
-                      program.args[ii], validationResult,
-                      program.format === 'color' ? true : false);
-                }
-                if (validationResult.status !== 'PASS') {
-                  hasError = true;
-                }
-              }
-              if (program.format === 'json') {
-                process.stdout.write(
-                    JSON.stringify(jsonOut) + '\n', function() {
-                      process.exit(hasError ? 1 : 0);
-                    });
-              } else if (hasError) {
-                process.stderr.write('', function() {
-                  process.exit(1);
-                });
-              } else {
-                process.stdout.write('', function() {
-                  process.exit(0);
-                });
-              }
-            })
-            .catch(function(error) {
-              process.stderr.write(
-                  (program.format == 'color' ? colors.red(error.message) :
-                    error.message) +
-                      '\n',
-                  function() {
-                    process.exit(1);
-                  });
-            });
-      })
-      .catch(function(error) {
-        process.stderr.write(
-            (program.format == 'color' ? colors.red(error.message) :
-              error.message) +
-                '\n',
-            function() {
-              process.exit(1);
-            });
-      });
-}
-
-exports.main = main;
diff --git a/validator/nodejs/package.json b/validator/nodejs/package.json
deleted file mode 100644
index 7a807f4332efe..0000000000000
--- a/validator/nodejs/package.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "name": "amphtml-validator",
-  "version": "1.0.31",
-  "description": "Official validator for AMP HTML (www.ampproject.org)",
-  "keywords": [
-    "AMP",
-    "validator",
-    "validate",
-    "AMP HTML",
-    "Accelerated Mobile Pages"
-  ],
-  "author": "The AMP HTML Authors",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ampproject/amphtml/tree/master/validator/nodejs/"
-  },
-  "bin": {
-    "amphtml-validator": "./cli.js"
-  },
-  "dependencies": {
-    "colors": "1.2.5",
-    "commander": "2.15.1",
-    "promise": "8.0.1"
-  },
-  "devDependencies": {
-    "jasmine": "3.5.0"
-  }
-}
diff --git a/validator/nodejs/yarn.lock b/validator/nodejs/yarn.lock
deleted file mode 100644
index cacd0c854a466..0000000000000
--- a/validator/nodejs/yarn.lock
+++ /dev/null
@@ -1,110 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-asap@~2.0.3:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
-
-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
-
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-colors@1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.2.5.tgz#89c7ad9a374bc030df8013241f68136ed8835afc"
-  integrity sha512-erNRLao/Y3Fv54qUa0LBB+//Uf3YwMUmdJinN20yMXm9zdKKqH9wt7R9IIVZ+K7ShzfpLV/Zg8+VyrBJYB4lpg==
-
-commander@2.15.1:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
-  integrity sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
-
-glob@^7.1.4:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
-
-jasmine-core@~3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-3.5.0.tgz#132c23e645af96d85c8bca13c8758b18429fc1e4"
-  integrity sha512-nCeAiw37MIMA9w9IXso7bRaLl+c/ef3wnxsoSAlYrzS+Ot0zTG6nU8G/cIfGkqpkjX2wNaIW9RFG0TwIFnG6bA==
-
-jasmine@3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-3.5.0.tgz#7101eabfd043a1fc82ac24e0ab6ec56081357f9e"
-  integrity sha512-DYypSryORqzsGoMazemIHUfMkXM7I7easFaxAvNM3Mr6Xz3Fy36TupTrAOxZWN8MVKEU5xECv22J4tUQf3uBzQ==
-  dependencies:
-    glob "^7.1.4"
-    jasmine-core "~3.5.0"
-
-minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-once@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
-  dependencies:
-    wrappy "1"
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-promise@8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.1.tgz#e45d68b00a17647b6da711bf85ed6ed47208f450"
-  integrity sha1-5F1osAoXZHttpxG/he1u1HII9FA=
-  dependencies:
-    asap "~2.0.3"
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
diff --git a/validator/package-lock.json b/validator/package-lock.json
new file mode 100644
index 0000000000000..66c30b2141d7f
--- /dev/null
+++ b/validator/package-lock.json
@@ -0,0 +1,498 @@
+{
+  "name": "amp-validator",
+  "version": "0.1.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "ansi-regex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "ci-info": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.6.0.tgz",
+      "integrity": "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==",
+      "dev": true
+    },
+    "cli-cursor": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
+      "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
+      "dev": true,
+      "requires": {
+        "restore-cursor": "^2.0.0"
+      }
+    },
+    "cli-spinners": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.0.tgz",
+      "integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==",
+      "dev": true
+    },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+      "dev": true
+    },
+    "clone-buffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/clone-buffer/-/clone-buffer-1.0.0.tgz",
+      "integrity": "sha1-4+JbIHrE5wGvch4staFnksrD3Fg=",
+      "dev": true
+    },
+    "clone-stats": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-1.0.0.tgz",
+      "integrity": "sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=",
+      "dev": true
+    },
+    "cloneable-readable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/cloneable-readable/-/cloneable-readable-1.1.3.tgz",
+      "integrity": "sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "process-nextick-args": "^2.0.0",
+        "readable-stream": "^2.3.5"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "dev": true
+    },
+    "defaults": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
+      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
+      "dev": true,
+      "requires": {
+        "clone": "^1.0.2"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+          "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
+          "dev": true
+        }
+      }
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "google-closure-compiler": {
+      "version": "20210505.0.0",
+      "resolved": "https://registry.npmjs.org/google-closure-compiler/-/google-closure-compiler-20210505.0.0.tgz",
+      "integrity": "sha512-moeYaj4S6YTdOOvjv1ZLdUld/2YXw7q1GqUUHJJd+rE/uViyesozg8yKQZWcB3tvurhb+qEvFFet8CYoeaQHng==",
+      "dev": true,
+      "requires": {
+        "chalk": "2.x",
+        "google-closure-compiler-java": "^20210505.0.0",
+        "google-closure-compiler-linux": "^20210505.0.0",
+        "google-closure-compiler-osx": "^20210505.0.0",
+        "google-closure-compiler-windows": "^20210505.0.0",
+        "minimist": "1.x",
+        "vinyl": "2.x",
+        "vinyl-sourcemaps-apply": "^0.2.0"
+      }
+    },
+    "google-closure-compiler-java": {
+      "version": "20210505.0.0",
+      "resolved": "https://registry.npmjs.org/google-closure-compiler-java/-/google-closure-compiler-java-20210505.0.0.tgz",
+      "integrity": "sha512-h+DfQAaaCLFmmtasOS8eyh0M4D+JInTJfEP4byV5R1cnMninpGGLHOG3PNgLLzkXkIO/fu4ILEcVzoGmgJEoMA==",
+      "dev": true
+    },
+    "google-closure-compiler-linux": {
+      "version": "20210505.0.0",
+      "resolved": "https://registry.npmjs.org/google-closure-compiler-linux/-/google-closure-compiler-linux-20210505.0.0.tgz",
+      "integrity": "sha512-ADN2kFfIR1NiR24kLYb4YkX4MeXDJaT5OfRQEkiuIdZMtd28oEkm80LxCGuC7ftKEixoMm3f9/OG01B4U+xsnA==",
+      "dev": true,
+      "optional": true
+    },
+    "google-closure-compiler-osx": {
+      "version": "20210505.0.0",
+      "resolved": "https://registry.npmjs.org/google-closure-compiler-osx/-/google-closure-compiler-osx-20210505.0.0.tgz",
+      "integrity": "sha512-JTwdh23aD2pwRU4QZjujxp/+rGfhex3utNWEdUDRMNpUGstUK7XPCDG8jNBtUpyuRiXFnpZa90qButqRgotQBA==",
+      "dev": true,
+      "optional": true
+    },
+    "google-closure-compiler-windows": {
+      "version": "20210505.0.0",
+      "resolved": "https://registry.npmjs.org/google-closure-compiler-windows/-/google-closure-compiler-windows-20210505.0.0.tgz",
+      "integrity": "sha512-bKTbg/f4ak72OggEMaH/7oExqOO9dS+TxwGhoovYOt/YaVR/8MDfGdxsOhqoiboiFwYysTPz8bwINjYQK6AwnA==",
+      "dev": true,
+      "optional": true
+    },
+    "google-closure-library": {
+      "version": "20210406.0.0",
+      "resolved": "https://registry.npmjs.org/google-closure-library/-/google-closure-library-20210406.0.0.tgz",
+      "integrity": "sha512-1lAC/KC9R2QM6nygniM0pRcGrv5bkCUrIZb2hXFxLtAkA+zRiVeWtRYpFWDHXXJzkavKjsn9upiffL4x/nmmVg==",
+      "dev": true
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+      "dev": true
+    },
+    "jasmine": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-3.7.0.tgz",
+      "integrity": "sha512-wlzGQ+cIFzMEsI+wDqmOwvnjTvolLFwlcpYLCqSPPH0prOQaW3P+IzMhHYn934l1imNvw07oCyX+vGUv3wmtSQ==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.6",
+        "jasmine-core": "~3.7.0"
+      }
+    },
+    "jasmine-console-reporter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jasmine-console-reporter/-/jasmine-console-reporter-3.1.0.tgz",
+      "integrity": "sha512-fNP6XlgkIyNvfr6JVMJudZL9qWNY2K7l934Ojj4k8J09/QXf4xYf2Mc7MUgcsDhqIb2zTkLd2LsBJWFvJz41/w==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "chalk": "^2.4.1",
+        "ci-info": "^1.4.0",
+        "node-emoji": "^1.8.1",
+        "ora": "^3.0.0",
+        "perfy": "^1.1.5"
+      }
+    },
+    "jasmine-core": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.7.1.tgz",
+      "integrity": "sha512-DH3oYDS/AUvvr22+xUBW62m1Xoy7tUlY1tsxKEJvl5JeJ7q8zd1K5bUwiOxdH+erj6l2vAMM3hV25Xs9/WrmuQ==",
+      "dev": true
+    },
+    "lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
+      "dev": true
+    },
+    "log-symbols": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
+      "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.0.1"
+      }
+    },
+    "mimic-fn": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
+      "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
+    "node-emoji": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
+      "dev": true,
+      "requires": {
+        "lodash.toarray": "^4.4.0"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "onetime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
+      "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
+      "dev": true,
+      "requires": {
+        "mimic-fn": "^1.0.0"
+      }
+    },
+    "ora": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz",
+      "integrity": "sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.2",
+        "cli-cursor": "^2.1.0",
+        "cli-spinners": "^2.0.0",
+        "log-symbols": "^2.2.0",
+        "strip-ansi": "^5.2.0",
+        "wcwidth": "^1.0.1"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "perfy": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/perfy/-/perfy-1.1.5.tgz",
+      "integrity": "sha512-/ieVBpMaPTJf83YTUl2TImsSwMEJ23qGP2w27pE6aX+NrB/ZRGqOnQZpl7J719yFwd+ebDiHguPNFeMSamyK7w==",
+      "dev": true
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dev": true,
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "remove-trailing-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
+      "dev": true
+    },
+    "replace-ext": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.1.tgz",
+      "integrity": "sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==",
+      "dev": true
+    },
+    "restore-cursor": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
+      "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
+      "dev": true,
+      "requires": {
+        "onetime": "^2.0.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
+      "dev": true
+    },
+    "source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^4.1.0"
+      }
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "vinyl": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.1.tgz",
+      "integrity": "sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.1",
+        "clone-buffer": "^1.0.0",
+        "clone-stats": "^1.0.0",
+        "cloneable-readable": "^1.0.0",
+        "remove-trailing-separator": "^1.0.1",
+        "replace-ext": "^1.0.0"
+      }
+    },
+    "vinyl-sourcemaps-apply": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz",
+      "integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=",
+      "dev": true,
+      "requires": {
+        "source-map": "^0.5.1"
+      }
+    },
+    "wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
+      "dev": true,
+      "requires": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    }
+  }
+}
diff --git a/validator/package.json b/validator/package.json
index cedabb6e32c6e..b41f842a75d29 100644
--- a/validator/package.json
+++ b/validator/package.json
@@ -12,14 +12,9 @@
     "preinstall": "node ../build-system/common/check-package-manager.js"
   },
   "devDependencies": {
-    "google-closure-compiler": "20200517.0.0",
-    "google-closure-library": "20200517.0.0",
-    "jasmine": "3.5.0"
-  },
-  "resolutions": {
-    "**/**/diff": "^4.0.0",
-    "**/**/debug": "^4.0.0",
-    "**/**/growl": "^1.10.0",
-    "**/**/minimist": "^1.2.3"
+    "google-closure-compiler": "20210505.0.0",
+    "google-closure-library": "20210406.0.0",
+    "jasmine": "3.7.0",
+    "jasmine-console-reporter": "3.1.0"
   }
 }
diff --git a/validator/testdata/actions_feature_tests/amp_bind.html b/validator/testdata/actions_feature_tests/amp_bind.html
deleted file mode 100644
index 1e244b2369e60..0000000000000
--- a/validator/testdata/actions_feature_tests/amp_bind.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
-  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.
--->
-<!--
-  Test Description:
-  Verifies amp-bind and amp-state rules for actions.
--->
-<!doctype html>
-<html ⚡ actions>
-<head>
-  <meta charset="utf-8">
-  <link rel="canonical" href="./regular-html-version.html">
-  <meta name="viewport" content="width=device-width">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-viewer-assistance" src="https://cdn.ampproject.org/v0/amp-viewer-assistance-0.1.js"></script>
-  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
-  <!-- Valid -->
-  <script id="amp-viewer-assistance" type="application/json">
-  {
-    "actionsOnGoogle" : {
-      "projectId": "0123456789"
-    }
-  }
-  </script>
-</head>
-<body>
-  <!-- Valid: Base Amp-state is valid -->
-  <amp-state id="test" src="www.example.com">
-    <script type="application/json">
-    {
-    "foo": {}
-    }
-    </script>
-  </amp-state>
-
-  <!-- Valid: More complex uses are valid -->
-  <amp-state id="test" src="www.example.com" data-amp-replace="CLIENT_ID CLIENT_ID(cid)"
-  crossorigin="amp-viewer-auth-token-via-post" credentials="123" overridable></amp-state>
-
-  <!-- Valid: Using [src] is valid-->
-  <amp-state id="test" [src]="{{example_url}}" crossorigin="amp-viewer-auth-token-via-post"></amp-state>
-
-  <!-- Valid: Credentials valid with [src] -->
-  <amp-state id="test" [src]="{{example_url}}" data-amp-replace="CLIENT_ID CLIENT_ID(cid)"
-  crossorigin="amp-viewer-auth-token-via-post" credentials="123" overridable></amp-state>
-</body>
-</html>
diff --git a/validator/testdata/actions_feature_tests/amp_bind.out b/validator/testdata/actions_feature_tests/amp_bind.out
deleted file mode 100644
index 83302aceb2350..0000000000000
--- a/validator/testdata/actions_feature_tests/amp_bind.out
+++ /dev/null
@@ -1,61 +0,0 @@
-PASS
-|  <!--
-|    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.
-|  -->
-|  <!--
-|    Test Description:
-|    Verifies amp-bind and amp-state rules for actions.
-|  -->
-|  <!doctype html>
-|  <html ⚡ actions>
-|  <head>
-|    <meta charset="utf-8">
-|    <link rel="canonical" href="./regular-html-version.html">
-|    <meta name="viewport" content="width=device-width">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <script async custom-element="amp-viewer-assistance" src="https://cdn.ampproject.org/v0/amp-viewer-assistance-0.1.js"></script>
-|    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
-|    <!-- Valid -->
-|    <script id="amp-viewer-assistance" type="application/json">
-|    {
-|      "actionsOnGoogle" : {
-|        "projectId": "0123456789"
-|      }
-|    }
-|    </script>
-|  </head>
-|  <body>
-|    <!-- Valid: Base Amp-state is valid -->
-|    <amp-state id="test" src="www.example.com">
-|      <script type="application/json">
-|      {
-|      "foo": {}
-|      }
-|      </script>
-|    </amp-state>
-|
-|    <!-- Valid: More complex uses are valid -->
-|    <amp-state id="test" src="www.example.com" data-amp-replace="CLIENT_ID CLIENT_ID(cid)"
-|    crossorigin="amp-viewer-auth-token-via-post" credentials="123" overridable></amp-state>
-|
-|    <!-- Valid: Using [src] is valid-->
-|    <amp-state id="test" [src]="{{example_url}}" crossorigin="amp-viewer-auth-token-via-post"></amp-state>
-|
-|    <!-- Valid: Credentials valid with [src] -->
-|    <amp-state id="test" [src]="{{example_url}}" data-amp-replace="CLIENT_ID CLIENT_ID(cid)"
-|    crossorigin="amp-viewer-auth-token-via-post" credentials="123" overridable></amp-state>
-|  </body>
-|  </html>
diff --git a/validator/testdata/actions_feature_tests/amp_form.html b/validator/testdata/actions_feature_tests/amp_form.html
deleted file mode 100644
index b24135cc43844..0000000000000
--- a/validator/testdata/actions_feature_tests/amp_form.html
+++ /dev/null
@@ -1,121 +0,0 @@
-<!--
-  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.
--->
-<!--
-  Test Description:
-  This tests form rules that are allowed in amp actions.
--->
-
-<!doctype html>
-<html ⚡ actions>
-<head>
-  <meta charset="utf-8">
-  <link rel="canonical" href="./regular-html-version.html">
-  <meta name="viewport" content="width=device-width">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-viewer-assistance" src="https://cdn.ampproject.org/v0/amp-viewer-assistance-0.1.js"></script>
-  <script async custom-element="amp-form"
-    src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
-  <!-- Valid -->
-  <script id="amp-viewer-assistance" type="application/json">
-  {
-    "actionsOnGoogle" : {
-      "projectId": "0123456789"
-    }
-  }
-  </script>
-</head>
-<body>
-  <!-- Valid: Example 1-->
-  <form method="post" action-xhr="https://example.com/subscribe" custom-validation-reporting="as-you-go" autocomplete>
-    <fieldset>
-      <label>
-        <span>Your name</span>
-        <input id="name" type="text" name="name" required>
-        <span visible-when-invalid="valueMissing" validation-for="name"></span>
-      </label>
-      <label>
-        <span>Your email</span>
-        <input type="email" name="email" required>
-      </label>
-      <input type="submit" value="Subscribe">
-    </fieldset>
-  </form>
-
-  <!-- Valid: Example 2 -->
-  <form method="post" action-xhr="https://example.com/subscribe" name="test"
-  crossorigin="amp-viewer-auth-token-via-post" custom-validation-reporting="as-you-go" autocomplete
-  verify-xhr="https://example.com/verify" enctype="test_enc">
-    <fieldset>
-      <label>
-        <span>Your name</span>
-        <input id="name" type="text" name="name" required>
-        <span visible-when-invalid="valueMissing" validation-for="name"></span>
-      </label>
-      <label>
-        <span>Your email</span>
-        <input type="email" name="email" required>
-      </label>
-      <input type="submit" value="Subscribe">
-    </fieldset>
-  </form>
-
-  <!-- Valid: Target attribute is allowed-->
-  <form method="post" action-xhr="https://example.com/subscribe" target="_blank"
-  crossorigin="amp-viewer-auth-token-via-post" custom-validation-reporting="as-you-go">
-    <fieldset>
-      <label>
-        <span>Your name</span>
-        <input id="name" type="text" name="name" required>
-        <span visible-when-invalid="valueMissing" validation-for="name"></span>
-      </label>
-      <label>
-        <span>Your email</span>
-        <input type="email" name="email" required>
-      </label>
-      <input type="submit" value="Subscribe">
-    </fieldset>
-  </form>
-
-  <!-- Invalid: Action xhr must be https -->
-  <form method="post" action-xhr="http://example.com/subscribe"
-  crossorigin="amp-viewer-auth-token-via-post" custom-validation-reporting="as-you-go" autocomplete>
-    <fieldset>
-      <label>
-        <span>Your name</span>
-        <input id="name" type="text" name="name" required>
-        <span visible-when-invalid="valueMissing" validation-for="name"></span>
-      </label>
-      <label>
-        <span>Your email</span>
-        <input type="email" name="email" required>
-      </label>
-      <input type="submit" value="Subscribe">
-    </fieldset>
-  </form>
-
-  <!-- Invalid: Missing action-xhr-->
-  <form method="post">
-    <fieldset>
-      <label>
-        <span>Your email</span>
-        <input type="email" name="email" required>
-      </label>
-      <input type="submit" value="Subscribe">
-    </fieldset>
-  </form>
-</body>
-</html>
diff --git a/validator/testdata/actions_feature_tests/amp_form.out b/validator/testdata/actions_feature_tests/amp_form.out
deleted file mode 100644
index 229aea57c0544..0000000000000
--- a/validator/testdata/actions_feature_tests/amp_form.out
+++ /dev/null
@@ -1,126 +0,0 @@
-FAIL
-|  <!--
-|    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.
-|  -->
-|  <!--
-|    Test Description:
-|    This tests form rules that are allowed in amp actions.
-|  -->
-|
-|  <!doctype html>
-|  <html ⚡ actions>
-|  <head>
-|    <meta charset="utf-8">
-|    <link rel="canonical" href="./regular-html-version.html">
-|    <meta name="viewport" content="width=device-width">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <script async custom-element="amp-viewer-assistance" src="https://cdn.ampproject.org/v0/amp-viewer-assistance-0.1.js"></script>
-|    <script async custom-element="amp-form"
-|      src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
-|    <!-- Valid -->
-|    <script id="amp-viewer-assistance" type="application/json">
-|    {
-|      "actionsOnGoogle" : {
-|        "projectId": "0123456789"
-|      }
-|    }
-|    </script>
-|  </head>
-|  <body>
-|    <!-- Valid: Example 1-->
-|    <form method="post" action-xhr="https://example.com/subscribe" custom-validation-reporting="as-you-go" autocomplete>
-|      <fieldset>
-|        <label>
-|          <span>Your name</span>
-|          <input id="name" type="text" name="name" required>
-|          <span visible-when-invalid="valueMissing" validation-for="name"></span>
-|        </label>
-|        <label>
-|          <span>Your email</span>
-|          <input type="email" name="email" required>
-|        </label>
-|        <input type="submit" value="Subscribe">
-|      </fieldset>
-|    </form>
-|
-|    <!-- Valid: Example 2 -->
-|    <form method="post" action-xhr="https://example.com/subscribe" name="test"
-|    crossorigin="amp-viewer-auth-token-via-post" custom-validation-reporting="as-you-go" autocomplete
-|    verify-xhr="https://example.com/verify" enctype="test_enc">
-|      <fieldset>
-|        <label>
-|          <span>Your name</span>
-|          <input id="name" type="text" name="name" required>
-|          <span visible-when-invalid="valueMissing" validation-for="name"></span>
-|        </label>
-|        <label>
-|          <span>Your email</span>
-|          <input type="email" name="email" required>
-|        </label>
-|        <input type="submit" value="Subscribe">
-|      </fieldset>
-|    </form>
-|
-|    <!-- Valid: Target attribute is allowed-->
-|    <form method="post" action-xhr="https://example.com/subscribe" target="_blank"
-|    crossorigin="amp-viewer-auth-token-via-post" custom-validation-reporting="as-you-go">
-|      <fieldset>
-|        <label>
-|          <span>Your name</span>
-|          <input id="name" type="text" name="name" required>
-|          <span visible-when-invalid="valueMissing" validation-for="name"></span>
-|        </label>
-|        <label>
-|          <span>Your email</span>
-|          <input type="email" name="email" required>
-|        </label>
-|        <input type="submit" value="Subscribe">
-|      </fieldset>
-|    </form>
-|
-|    <!-- Invalid: Action xhr must be https -->
-|    <form method="post" action-xhr="http://example.com/subscribe"
->>   ^~~~~~~~~
-actions_feature_tests/amp_form.html:94:2 Invalid URL protocol 'http:' for attribute 'action-xhr' in tag 'FORM [method=POST] (ACTIONS)'. (see https://amp.dev/documentation/components/amp-form)
-|    crossorigin="amp-viewer-auth-token-via-post" custom-validation-reporting="as-you-go" autocomplete>
-|      <fieldset>
-|        <label>
-|          <span>Your name</span>
-|          <input id="name" type="text" name="name" required>
-|          <span visible-when-invalid="valueMissing" validation-for="name"></span>
-|        </label>
-|        <label>
-|          <span>Your email</span>
-|          <input type="email" name="email" required>
-|        </label>
-|        <input type="submit" value="Subscribe">
-|      </fieldset>
-|    </form>
-|
-|    <!-- Invalid: Missing action-xhr-->
-|    <form method="post">
->>   ^~~~~~~~~
-actions_feature_tests/amp_form.html:111:2 The mandatory attribute 'action-xhr' is missing in tag 'FORM [method=POST] (ACTIONS)'. (see https://amp.dev/documentation/components/amp-form)
-|      <fieldset>
-|        <label>
-|          <span>Your email</span>
-|          <input type="email" name="email" required>
-|        </label>
-|        <input type="submit" value="Subscribe">
-|      </fieldset>
-|    </form>
-|  </body>
-|  </html>
diff --git a/validator/testdata/actions_feature_tests/amp_list.html b/validator/testdata/actions_feature_tests/amp_list.html
deleted file mode 100644
index fc8fe0396d479..0000000000000
--- a/validator/testdata/actions_feature_tests/amp_list.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--
-  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.
--->
-<!--
-  Test Description:
-  Tests Actions rules pertaining to AMP-LIST.
--->
-<!doctype html>
-<html ⚡ actions>
-<head>
-  <meta charset="utf-8">
-  <link rel="canonical" href="./regular-html-version.html">
-  <meta name="viewport" content="width=device-width">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-viewer-assistance" src="https://cdn.ampproject.org/v0/amp-viewer-assistance-0.1.js"></script>
-  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
-  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
-  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
-  <!-- Valid -->
-  <script id="amp-viewer-assistance" type="application/json">
-  {
-    "actionsOnGoogle" : {
-      "projectId": "0123456789"
-    }
-  }
-  </script>
-</head>
-<body>
-  <!-- Valid: Example 1-->
-  <amp-list width="auto" height="100" layout="fixed-height"
-    src="https://someserver.json">
-    <template type="amp-mustache">
-      <div class="url-entry">
-        <a href="https://somelink.com">{{blah}}</a>
-      </div>
-    </template>
-  </amp-list>
-
-  <!-- Valid: [src] is fine -->
-  <amp-list width="auto" height="100" layout="fixed-height"
-    [src]="{{src}}">
-    <template type="amp-mustache">
-      <div class="url-entry">
-        <a href="https://somelink.com">{{blah}}</a>
-      </div>
-    </template>
-  </amp-list>
-
-  <!-- Valid: Should allow crossorigin -->
-  <amp-list width="auto" height="100" layout="fixed-height"
-    src="https://someserver.json" crossorigin="amp-viewer-auth-token-via-post" credentials="123">
-    <template type="amp-mustache">
-      <div class="url-entry">
-        <a href="https://somelink.com">{{blah}}</a>
-      </div>
-    </template>
-  </amp-list>
-</body>
-</html>
-
diff --git a/validator/testdata/actions_feature_tests/amp_list.out b/validator/testdata/actions_feature_tests/amp_list.out
deleted file mode 100644
index ef3eccf5db994..0000000000000
--- a/validator/testdata/actions_feature_tests/amp_list.out
+++ /dev/null
@@ -1,75 +0,0 @@
-PASS
-|  <!--
-|    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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests Actions rules pertaining to AMP-LIST.
-|  -->
-|  <!doctype html>
-|  <html ⚡ actions>
-|  <head>
-|    <meta charset="utf-8">
-|    <link rel="canonical" href="./regular-html-version.html">
-|    <meta name="viewport" content="width=device-width">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <script async custom-element="amp-viewer-assistance" src="https://cdn.ampproject.org/v0/amp-viewer-assistance-0.1.js"></script>
-|    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
-|    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
-|    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
->>   ^~~~~~~~~
-actions_feature_tests/amp_list.html:31:2 The extension 'amp-mustache' is referenced at version '0.1' which is a deprecated version. Please use a more recent version of this extension. This may become an error in the future. (see https://amp.dev/documentation/components/amp-mustache)
-|    <!-- Valid -->
-|    <script id="amp-viewer-assistance" type="application/json">
-|    {
-|      "actionsOnGoogle" : {
-|        "projectId": "0123456789"
-|      }
-|    }
-|    </script>
-|  </head>
-|  <body>
-|    <!-- Valid: Example 1-->
-|    <amp-list width="auto" height="100" layout="fixed-height"
-|      src="https://someserver.json">
-|      <template type="amp-mustache">
-|        <div class="url-entry">
-|          <a href="https://somelink.com">{{blah}}</a>
-|        </div>
-|      </template>
-|    </amp-list>
-|
-|    <!-- Valid: [src] is fine -->
-|    <amp-list width="auto" height="100" layout="fixed-height"
-|      [src]="{{src}}">
-|      <template type="amp-mustache">
-|        <div class="url-entry">
-|          <a href="https://somelink.com">{{blah}}</a>
-|        </div>
-|      </template>
-|    </amp-list>
-|
-|    <!-- Valid: Should allow crossorigin -->
-|    <amp-list width="auto" height="100" layout="fixed-height"
-|      src="https://someserver.json" crossorigin="amp-viewer-auth-token-via-post" credentials="123">
-|      <template type="amp-mustache">
-|        <div class="url-entry">
-|          <a href="https://somelink.com">{{blah}}</a>
-|        </div>
-|      </template>
-|    </amp-list>
-|  </body>
-|  </html>
diff --git a/validator/testdata/actions_feature_tests/css_length.html b/validator/testdata/actions_feature_tests/css_length.html
deleted file mode 100644
index f0c0b9e8e5a0f..0000000000000
--- a/validator/testdata/actions_feature_tests/css_length.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--
-  Copyright 2020 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.
--->
-<!--
-  Test Description:
-  This testcase isn't run verbatim. The template string below is replaced by
-  the test harnesses with various lengths of valid CSS stylesheets. We use
-  this test to verify the max_byte_length rules for CSS author stylesheets.
--->
-<!doctype html>
-<html ⚡ actions>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <style amp-custom>.replace_amp_custom {}</style>
-  <link rel="canonical" href="./regular-html-version.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>
-</head>
-<body>
-  Hello, world.
-  replace_inline_style
-</body>
-</html>
diff --git a/validator/testdata/actions_feature_tests/css_length.out b/validator/testdata/actions_feature_tests/css_length.out
deleted file mode 100644
index f1a6e32578171..0000000000000
--- a/validator/testdata/actions_feature_tests/css_length.out
+++ /dev/null
@@ -1,37 +0,0 @@
-PASS
-|  <!--
-|    Copyright 2020 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.
-|  -->
-|  <!--
-|    Test Description:
-|    This testcase isn't run verbatim. The template string below is replaced by
-|    the test harnesses with various lengths of valid CSS stylesheets. We use
-|    this test to verify the max_byte_length rules for CSS author stylesheets.
-|  -->
-|  <!doctype html>
-|  <html ⚡ actions>
-|  <head>
-|    <meta charset="utf-8">
-|    <meta name="viewport" content="width=device-width,minimum-scale=1">
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <style amp-custom>.replace_amp_custom {}</style>
-|    <link rel="canonical" href="./regular-html-version.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>
-|  </head>
-|  <body>
-|    Hello, world.
-|    replace_inline_style
-|  </body>
-|  </html>
diff --git a/validator/testdata/actions_feature_tests/minimum_valid.html b/validator/testdata/actions_feature_tests/minimum_valid.html
deleted file mode 100644
index e2b6ffd2d4934..0000000000000
--- a/validator/testdata/actions_feature_tests/minimum_valid.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!--
-  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.
--->
-<!--
-  Test Description:
-  Verifies that type identifier `actions` is valid on an AMP actions document.
--->
-<!doctype html>
-<html ⚡ actions>
-<head>
-  <meta charset="utf-8">
-  <link rel="canonical" href="./regular-html-version.html">
-  <meta name="viewport" content="width=device-width">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-viewer-assistance" src="https://cdn.ampproject.org/v0/amp-viewer-assistance-0.1.js"></script>
-  <script id="amp-viewer-assistance" type="application/json">
-  {
-    "actionsOnGoogle" : {
-      "projectId": "0123456789"
-    }
-  }
-  </script>
-</head>
-<body>
-Hello, world.
-</body>
-</html>
diff --git a/validator/testdata/actions_feature_tests/minimum_valid.out b/validator/testdata/actions_feature_tests/minimum_valid.out
deleted file mode 100644
index 9c05b26184a13..0000000000000
--- a/validator/testdata/actions_feature_tests/minimum_valid.out
+++ /dev/null
@@ -1,41 +0,0 @@
-PASS
-|  <!--
-|    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.
-|  -->
-|  <!--
-|    Test Description:
-|    Verifies that type identifier `actions` is valid on an AMP actions document.
-|  -->
-|  <!doctype html>
-|  <html ⚡ actions>
-|  <head>
-|    <meta charset="utf-8">
-|    <link rel="canonical" href="./regular-html-version.html">
-|    <meta name="viewport" content="width=device-width">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|    <script async custom-element="amp-viewer-assistance" src="https://cdn.ampproject.org/v0/amp-viewer-assistance-0.1.js"></script>
-|    <script id="amp-viewer-assistance" type="application/json">
-|    {
-|      "actionsOnGoogle" : {
-|        "projectId": "0123456789"
-|      }
-|    }
-|    </script>
-|  </head>
-|  <body>
-|  Hello, world.
-|  </body>
-|  </html>
diff --git a/validator/testdata/actions_feature_tests/type_identifier_missing.html b/validator/testdata/actions_feature_tests/type_identifier_missing.html
deleted file mode 100644
index 275abc793c8ec..0000000000000
--- a/validator/testdata/actions_feature_tests/type_identifier_missing.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
-  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.
--->
-<!--
-  Test Description:
-  Verifies that type identifier `actions` is not required.
--->
-<!doctype html>
-<html ⚡>
-<head>
-  <meta charset="utf-8">
-  <link rel="canonical" href="./regular-html-version.html">
-  <meta name="viewport" content="width=device-width">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-Hello, world.
-</body>
-</html>
diff --git a/validator/testdata/actions_feature_tests/type_identifier_missing.out b/validator/testdata/actions_feature_tests/type_identifier_missing.out
deleted file mode 100644
index 43413c7b78304..0000000000000
--- a/validator/testdata/actions_feature_tests/type_identifier_missing.out
+++ /dev/null
@@ -1,35 +0,0 @@
-FAIL
-|  <!--
-|    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.
-|  -->
-|  <!--
-|    Test Description:
-|    Verifies that type identifier `actions` is not required.
-|  -->
-|  <!doctype html>
-|  <html ⚡>
->> ^~~~~~~~~
-actions_feature_tests/type_identifier_missing.html:21:0 The mandatory attribute 'actions' is missing in tag 'html'.
-|  <head>
-|    <meta charset="utf-8">
-|    <link rel="canonical" href="./regular-html-version.html">
-|    <meta name="viewport" content="width=device-width">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|  </head>
-|  <body>
-|  Hello, world.
-|  </body>
-|  </html>
diff --git a/validator/testdata/amp4ads_feature_tests/amp_actions.html b/validator/testdata/amp4ads_feature_tests/amp_actions.html
deleted file mode 100644
index 626899684c978..0000000000000
--- a/validator/testdata/amp4ads_feature_tests/amp_actions.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!--
-  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.
--->
-<!--
-  Test Description:
-  Verifies that type identifier `actions` is not valid on an AMP4ADS document.
--->
-<!doctype html>
-<html ⚡4ads actions>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <style amp4ads-boilerplate>body{visibility:hidden}</style>
-  <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
-</head>
-<body>Hello, world.</body>
-</html>
diff --git a/validator/testdata/amp4ads_feature_tests/amp_actions.out b/validator/testdata/amp4ads_feature_tests/amp_actions.out
deleted file mode 100644
index 625749bbad593..0000000000000
--- a/validator/testdata/amp4ads_feature_tests/amp_actions.out
+++ /dev/null
@@ -1,32 +0,0 @@
-FAIL
-|  <!--
-|    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.
-|  -->
-|  <!--
-|    Test Description:
-|    Verifies that type identifier `actions` is not valid on an AMP4ADS document.
-|  -->
-|  <!doctype html>
-|  <html ⚡4ads actions>
->> ^~~~~~~~~
-amp4ads_feature_tests/amp_actions.html:21:0 The attribute 'actions' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
-|  <head>
-|    <meta charset="utf-8">
-|    <meta name="viewport" content="width=device-width,minimum-scale=1">
-|    <style amp4ads-boilerplate>body{visibility:hidden}</style>
-|    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
-|  </head>
-|  <body>Hello, world.</body>
-|  </html>
diff --git a/validator/testdata/amp4ads_feature_tests/amp_form.out b/validator/testdata/amp4ads_feature_tests/amp_form.out
index 7c5fee19af67f..ccb11c01c383c 100644
--- a/validator/testdata/amp4ads_feature_tests/amp_form.out
+++ b/validator/testdata/amp4ads_feature_tests/amp_form.out
@@ -51,16 +51,16 @@ FAIL
 |    <form method="post" action-xhr="https://example.com/subscribe" target="_blank">
 |      <input type="image" name="image">
 >>     ^~~~~~~~~
-amp4ads_feature_tests/amp_form.html:51:4 The attribute 'type' in tag 'input' is set to the invalid value 'image'. (see https://amp.dev/documentation/components/amp-form)
+amp4ads_feature_tests/amp_form.html:51:4 The attribute 'type' in tag 'input' is set to the invalid value 'image'. (see https://amp.dev/documentation/components/amp-form/)
 |    </form>
 |    <!-- Invalid: input can not be type="file|password". -->
 |    <form method="post" action-xhr="https://example.com/subscribe" target="_blank">
 |      <input type="password" name="password">
 >>     ^~~~~~~~~
-amp4ads_feature_tests/amp_form.html:55:4 The attribute 'type' in tag 'input' is set to the invalid value 'password'. (see https://amp.dev/documentation/components/amp-form)
+amp4ads_feature_tests/amp_form.html:55:4 The attribute 'type' in tag 'input' is set to the invalid value 'password'. (see https://amp.dev/documentation/components/amp-form/)
 |      <input type="file" name="file">
 >>     ^~~~~~~~~
-amp4ads_feature_tests/amp_form.html:56:4 The attribute 'type' in tag 'input' is set to the invalid value 'file'. (see https://amp.dev/documentation/components/amp-form)
+amp4ads_feature_tests/amp_form.html:56:4 The attribute 'type' in tag 'input' is set to the invalid value 'file'. (see https://amp.dev/documentation/components/amp-form/)
 |      <input [type]="state.value" name="name">
 |      <div submitting>
 |        Submitting form...
diff --git a/validator/testdata/amp4ads_feature_tests/amp_selector.html b/validator/testdata/amp4ads_feature_tests/amp_selector.html
index 71703deff8c33..73e24d40f7ef5 100644
--- a/validator/testdata/amp4ads_feature_tests/amp_selector.html
+++ b/validator/testdata/amp4ads_feature_tests/amp_selector.html
@@ -35,6 +35,6 @@
     <option option="1">1</option>
     <option option="2">2</option>
     <option option="3" disabled>3</option>
-  </amp-selector> 
+  </amp-selector>
 </body>
 </html>
diff --git a/validator/testdata/amp4ads_feature_tests/amp_selector.out b/validator/testdata/amp4ads_feature_tests/amp_selector.out
index 77edda299058a..fb35ab0cc7ac9 100644
--- a/validator/testdata/amp4ads_feature_tests/amp_selector.out
+++ b/validator/testdata/amp4ads_feature_tests/amp_selector.out
@@ -36,6 +36,6 @@ PASS
 |      <option option="1">1</option>
 |      <option option="2">2</option>
 |      <option option="3" disabled>3</option>
-|    </amp-selector> 
+|    </amp-selector>
 |  </body>
 |  </html>
diff --git a/validator/testdata/amp4ads_feature_tests/amp_story_ad.html b/validator/testdata/amp4ads_feature_tests/amp_story_ad.html
index 5fc1f484268a0..f1ace3a4389b8 100644
--- a/validator/testdata/amp4ads_feature_tests/amp_story_ad.html
+++ b/validator/testdata/amp4ads_feature_tests/amp_story_ad.html
@@ -35,10 +35,10 @@
 
     <!-- Specifies where the attribution icon will be loaded from (optional). -->
     <meta name="amp4ads-vars-attribution-icon" content="https://placekitten.com/30/30">
-    
+
     <!-- Specifies where a click on attribution icon will land (optional). -->
     <meta name="amp4ads-vars-attribution-url" content="https://example.com">
-    
+
     <!-- Optional format for creatives to pass data to AMP runtime.  -->
     <meta name="amp4ads-vars-foo" content="bar">
 
diff --git a/validator/testdata/amp4ads_feature_tests/amp_story_ad.out b/validator/testdata/amp4ads_feature_tests/amp_story_ad.out
index 4b9c07c57a6ad..8bf5c8691ec6e 100644
--- a/validator/testdata/amp4ads_feature_tests/amp_story_ad.out
+++ b/validator/testdata/amp4ads_feature_tests/amp_story_ad.out
@@ -36,10 +36,10 @@ PASS
 |
 |      <!-- Specifies where the attribution icon will be loaded from (optional). -->
 |      <meta name="amp4ads-vars-attribution-icon" content="https://placekitten.com/30/30">
-|      
+|
 |      <!-- Specifies where a click on attribution icon will land (optional). -->
 |      <meta name="amp4ads-vars-attribution-url" content="https://example.com">
-|      
+|
 |      <!-- Optional format for creatives to pass data to AMP runtime.  -->
 |      <meta name="amp4ads-vars-foo" content="bar">
 |
@@ -53,4 +53,4 @@ PASS
 |    <body>
 |      <amp-img src="cats.jpg" layout="responsive" height="1280" width="720"></amp-img>
 |    </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/validator/testdata/amp4ads_feature_tests/amp_story_ad_errors.out b/validator/testdata/amp4ads_feature_tests/amp_story_ad_errors.out
index e58890a65eba2..53e9dcca7b897 100644
--- a/validator/testdata/amp4ads_feature_tests/amp_story_ad_errors.out
+++ b/validator/testdata/amp4ads_feature_tests/amp_story_ad_errors.out
@@ -28,30 +28,30 @@ FAIL
 |      <!-- Should fail as an invalid meta tag. -->
 |      <meta name="amp-cta" content="https://www.ampproject.org">
 >>     ^~~~~~~~~
-amp4ads_feature_tests/amp_story_ad_errors.html:28:4 The attribute 'name' in tag 'meta name= and content=' is set to the invalid value 'amp-cta'.
+amp4ads_feature_tests/amp_story_ad_errors.html:28:4 The attribute 'name' in tag 'meta' is set to the invalid value 'amp-cta'.
 |
 |      <!-- Should fail due to no `content=`. -->
 |      <meta name="amp-cta-type">
 >>     ^~~~~~~~~
-amp4ads_feature_tests/amp_story_ad_errors.html:31:4 The mandatory attribute 'content' is missing in tag 'meta name=amp-cta-type'.
+amp4ads_feature_tests/amp_story_ad_errors.html:31:4 The mandatory attribute 'content' is missing in tag 'meta'.
 |
 |      <!-- Should fail due to invalid content choice. -->
 |      <meta name="amp-cta-landing-page-type" content="GAME">
 >>     ^~~~~~~~~
-amp4ads_feature_tests/amp_story_ad_errors.html:34:4 The attribute 'content' in tag 'meta name=amp-cta-landing-page-type' is set to the invalid value 'GAME'.
+amp4ads_feature_tests/amp_story_ad_errors.html:34:4 The attribute 'content' in tag 'meta' is set to the invalid value 'GAME'.
 |
 |      <!-- Should fail due to no `content=`. -->
 |      <meta name="amp4ads-vars-foo">
 >>     ^~~~~~~~~
-amp4ads_feature_tests/amp_story_ad_errors.html:37:4 The mandatory attribute 'content' is missing in tag 'meta name=amp4ads-vars-*'.
+amp4ads_feature_tests/amp_story_ad_errors.html:37:4 The mandatory attribute 'content' is missing in tag 'meta'.
 |
 |      <!-- Should fail due unrecognized `name` -->
 |      <meta name="amp4ads-vars" content="bar">
 >>     ^~~~~~~~~
-amp4ads_feature_tests/amp_story_ad_errors.html:40:4 The attribute 'name' in tag 'meta name= and content=' is set to the invalid value 'amp4ads-vars'.
+amp4ads_feature_tests/amp_story_ad_errors.html:40:4 The attribute 'name' in tag 'meta' is set to the invalid value 'amp4ads-vars'.
 |      <meta name="amp4ads-vars-" content="bar">
 >>     ^~~~~~~~~
-amp4ads_feature_tests/amp_story_ad_errors.html:41:4 The attribute 'name' in tag 'meta name= and content=' is set to the invalid value 'amp4ads-vars-'.
+amp4ads_feature_tests/amp_story_ad_errors.html:41:4 The attribute 'name' in tag 'meta' is set to the invalid value 'amp4ads-vars-'.
 |
 |
 |      <style amp4ads-boilerplate>body{visibility:hidden}</style>
@@ -63,4 +63,4 @@ amp4ads_feature_tests/amp_story_ad_errors.html:41:4 The attribute 'name' in tag
 |    <body>
 |      <amp-img src="cats.jpg" layout="responsive" height="1280" width="720"></amp-img>
 |    </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/validator/testdata/amp4ads_feature_tests/css_i_amphtml.html b/validator/testdata/amp4ads_feature_tests/css_i_amphtml.html
new file mode 100644
index 0000000000000..6621d1bc7dbb2
--- /dev/null
+++ b/validator/testdata/amp4ads_feature_tests/css_i_amphtml.html
@@ -0,0 +1,39 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for excluded `i-amphtml` in the author stylesheet and inline style.
+-->
+<!doctype html>
+<html ⚡4ads>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <style amp4ads-boilerplate>body{visibility:hidden}</style>
+  <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
+  <style amp-custom>
+    i-amphtml-sizer { }
+    .i-amphtml-hidden { }
+    #i-amphtml-wrapper { }
+    .foo-i-amphtml { color: var(--i-amphtml-clr); }
+  </style>
+</head>
+<body>
+  Hello, world.
+  <div style="i-amphtml-hidden: none;"></div>
+  <div style="--i-amphtml-clr: #ccc;"></div>
+</body>
+</html>
diff --git a/validator/testdata/amp4ads_feature_tests/css_i_amphtml.out b/validator/testdata/amp4ads_feature_tests/css_i_amphtml.out
new file mode 100644
index 0000000000000..1e1c408415a43
--- /dev/null
+++ b/validator/testdata/amp4ads_feature_tests/css_i_amphtml.out
@@ -0,0 +1,48 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for excluded `i-amphtml` in the author stylesheet and inline style.
+|  -->
+|  <!doctype html>
+|  <html ⚡4ads>
+|  <head>
+|    <meta charset="utf-8">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <style amp4ads-boilerplate>body{visibility:hidden}</style>
+|    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
+|    <style amp-custom>
+>>   ^~~~~~~~~
+amp4ads_feature_tests/css_i_amphtml.html:27:2 The text inside tag 'style amp-custom' contains 'CSS i-amphtml- name prefix', which is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec/#css)
+|      i-amphtml-sizer { }
+|      .i-amphtml-hidden { }
+|      #i-amphtml-wrapper { }
+|      .foo-i-amphtml { color: var(--i-amphtml-clr); }
+|    </style>
+>> ^~~~~~~~~
+amp4ads_feature_tests/css_i_amphtml.html:32:0 CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
+|  </head>
+|  <body>
+|    Hello, world.
+|    <div style="i-amphtml-hidden: none;"></div>
+>>   ^~~~~~~~~
+amp4ads_feature_tests/css_i_amphtml.html:36:2 The property 'i-amphtml-hidden' in attribute 'style' in tag 'div' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|    <div style="--i-amphtml-clr: #ccc;"></div>
+>>   ^~~~~~~~~
+amp4ads_feature_tests/css_i_amphtml.html:37:2 The property '--i-amphtml-clr' in attribute 'style' in tag 'div' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  </body>
+|  </html>
diff --git a/validator/testdata/amp4ads_feature_tests/doctype.out b/validator/testdata/amp4ads_feature_tests/doctype.out
index d70c1127d01b9..e952d232dac6f 100644
--- a/validator/testdata/amp4ads_feature_tests/doctype.out
+++ b/validator/testdata/amp4ads_feature_tests/doctype.out
@@ -1,4 +1,4 @@
-PASS
+FAIL
 |  <!--
 |    Copyright 2019 The AMP HTML Authors. All Rights Reserved.
 |
@@ -19,6 +19,8 @@ PASS
 |    Only html attribute is allowed in <!doctype> declaration.
 |  -->
 |  <!doctype html data-foo id=doctype>
+>> ^~~~~~~~~
+amp4ads_feature_tests/doctype.html:20:0 Invalid or missing doctype declaration. Should be '!doctype html'. (see https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/)
 |  <html ⚡4ads>
 |  <head>
 |    <meta charset="utf-8">
diff --git a/validator/testdata/amp4ads_feature_tests/doctype.out.cpponly b/validator/testdata/amp4ads_feature_tests/doctype.out.cpponly
new file mode 100644
index 0000000000000..28866c4f130eb
--- /dev/null
+++ b/validator/testdata/amp4ads_feature_tests/doctype.out.cpponly
@@ -0,0 +1,32 @@
+FAIL
+|  <!--
+|    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.
+|  -->
+|  <!--
+|    Test Description:
+|    Only html attribute is allowed in <!doctype> declaration.
+|  -->
+|  <!doctype html data-foo id=doctype>
+>>           ^~~~~~~~~
+amp4ads_feature_tests/doctype.html:20:10 Invalid or missing doctype declaration. Should be '!doctype html'. (see https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/)
+|  <html ⚡4ads>
+|  <head>
+|    <meta charset="utf-8">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <style amp4ads-boilerplate>body{visibility:hidden}</style>
+|    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
+|  </head>
+|  <body>Hello, world.</body>
+|  </html>
diff --git a/validator/testdata/amp4ads_feature_tests/extensions.html b/validator/testdata/amp4ads_feature_tests/extensions.html
index d32c3fc678c76..c77ac1e38f9ce 100644
--- a/validator/testdata/amp4ads_feature_tests/extensions.html
+++ b/validator/testdata/amp4ads_feature_tests/extensions.html
@@ -121,4 +121,3 @@
      src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
 </head>
 <body></body></html>
-
diff --git a/validator/testdata/amp4ads_feature_tests/extensions.out b/validator/testdata/amp4ads_feature_tests/extensions.out
index 1929ae32276f6..f4bfb27725098 100644
--- a/validator/testdata/amp4ads_feature_tests/extensions.out
+++ b/validator/testdata/amp4ads_feature_tests/extensions.out
@@ -35,13 +35,13 @@ FAIL
 |    <!-- So many AMP extensions! -->
 |    <script async custom-element="amp-access"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:35:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:35:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
 |    <script async custom-element="amp-accordion"
 |       src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
 |    <script async custom-element="amp-ad"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:39:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:39:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
 |    <script async custom-element="amp-analytics"
 |       src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
@@ -53,29 +53,29 @@ amp4ads_feature_tests/extensions.html:39:2 Custom JavaScript is not allowed. (se
 |       src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
 |    <script async custom-element="amp-brid-player"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:49:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:49:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-brid-player-0.1.js"></script>
 |    <script async custom-element="amp-brightcove"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:51:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:51:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>
 |    <script async custom-element="amp-carousel"
 |       src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
 |    <script async custom-element="amp-dailymotion"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:55:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:55:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script>
 |    <script async custom-element="amp-dynamic-css-classes"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:57:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:57:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"></script>
 |    <script async custom-element="amp-experiment"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:59:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:59:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
 |    <script async custom-element="amp-facebook"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:61:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:61:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
 |    <script async custom-element="amp-fit-text"
 |       src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
@@ -85,97 +85,97 @@ amp4ads_feature_tests/extensions.html:61:2 Custom JavaScript is not allowed. (se
 |       src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
 |    <script async custom-element="amp-fx-flying-carpet"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:69:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:69:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>
 |    <script async custom-element="amp-iframe"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:71:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:71:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
 |    <script async custom-element="amp-image-lightbox"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:73:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:73:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
 |    <script async custom-element="amp-instagram"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:75:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:75:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
 |    <script async custom-element="amp-install-serviceworker"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:77:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:77:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>
 |    <script async custom-element="amp-jwplayer"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:79:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:79:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-jwplayer-0.1.js"></script>
 |    <script async custom-element="amp-kaltura-player"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:81:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:81:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-kaltura-player-0.1.js"></script>
 |    <script async custom-element="amp-lightbox"
 |       src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
 |    <script async custom-element="amp-list"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:85:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:85:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
 |    <script async custom-element="amp-live-list"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:87:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:87:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>
 |    <script async custom-element="amp-megaphone"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:89:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:89:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-megaphone-0.1.js"></script>
 |    <script async custom-element="amp-o2-player"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:91:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:91:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-o2-player-0.1.js"></script>
 |    <script async custom-element="amp-pinterest"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:93:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:93:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
 |    <script async custom-element="amp-reach-player"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:95:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:95:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-reach-player-0.1.js"></script>
 |    <script async custom-element="amp-selector"
 |       src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
 |    <script async custom-element="amp-sidebar"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:99:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:99:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
 |    <script async custom-element="amp-slides"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:101:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:101:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-slides-0.1.js"></script>
 |    <script async custom-element="amp-social-share"
 |       src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
 |    <script async custom-element="amp-soundcloud"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:105:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:105:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>
 |    <script async custom-element="amp-springboard-player"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:107:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:107:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js"></script>
 |    <script async custom-element="amp-sticky-ad"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:109:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:109:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-sticky-ad-0.1.js"></script>
 |    <script async custom-element="amp-twitter"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:111:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:111:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
 |    <script async custom-element="amp-user-notification"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:113:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:113:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
 |    <script async custom-element="amp-vimeo"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:115:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:115:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>
 |    <script async custom-element="amp-vine"
 >>   ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:117:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4ads_feature_tests/extensions.html:117:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |       src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
 |
 |    <script async custom-template="amp-mustache"
@@ -187,4 +187,4 @@ amp4ads_feature_tests/extensions.html:123:19 The extension 'amp-animation' was f
 >>                    ^~~~~~~~~
 amp4ads_feature_tests/extensions.html:123:19 The extension 'amp-lightbox' was found on this page, but is unused. Please remove this extension.
 >>                    ^~~~~~~~~
-amp4ads_feature_tests/extensions.html:123:19 The extension 'amp-mustache' was found on this page, but is unused. Please remove this extension.
\ No newline at end of file
+amp4ads_feature_tests/extensions.html:123:19 The extension 'amp-mustache' was found on this page, but is unused. Please remove this extension.
diff --git a/validator/testdata/amp4ads_feature_tests/script_release_versions.html b/validator/testdata/amp4ads_feature_tests/script_release_versions.html
new file mode 100644
index 0000000000000..200deeedb2319
--- /dev/null
+++ b/validator/testdata/amp4ads_feature_tests/script_release_versions.html
@@ -0,0 +1,47 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This test demonstrates that module/nomodule, modolue/nomodule LTS, and module
+  SXG script tags are not valid for AMP4ADS.
+-->
+<!doctype html>
+<html ⚡4ads transformed="google;v=1">
+<head>
+  <meta charset=utf-8>
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <style amp4ads-boilerplate>body{visibility:hidden}</style>
+
+  <!-- Invalid: AMP4ADS module-nomodule pair for AMP runtime script -->
+  <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+  <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+
+  <!-- Invalid: AMP4ADS module/nomodule pair for AMP4ADS runtime script -->
+  <script async crossorigin=anonymous src=https://cdn.ampproject.org/amp4ads-v0.mjs type=module></script>
+  <script async nomodule src=https://cdn.ampproject.org/amp4ads-v0.js></script>
+
+  <!-- Invalid: AMP4ADS module/nomodule pair for AMP extension script -->
+  <script async crossorigin=anonymous custom-element=amp-analytics src=https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs type=module></script>
+  <script async custom-element=amp-analytics nomodule src=https://cdn.ampproject.org/v0/amp-analytics-0.1.js></script>
+
+  <!-- Invalid: AMP4ADS module/nomodule LTS pair for AMP extension script -->
+  <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.mjs type=module></script>
+  <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.js></script>
+</head>
+<body>
+  Hello, world.
+</body>
+</html>
diff --git a/validator/testdata/amp4ads_feature_tests/script_release_versions.out b/validator/testdata/amp4ads_feature_tests/script_release_versions.out
new file mode 100644
index 0000000000000..6f4f64434ad2c
--- /dev/null
+++ b/validator/testdata/amp4ads_feature_tests/script_release_versions.out
@@ -0,0 +1,70 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This test demonstrates that module/nomodule, modolue/nomodule LTS, and module
+|    SXG script tags are not valid for AMP4ADS.
+|  -->
+|  <!doctype html>
+|  <html ⚡4ads transformed="google;v=1">
+>> ^~~~~~~~~
+amp4ads_feature_tests/script_release_versions.html:22:0 The attribute 'transformed' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|  <head>
+|    <meta charset=utf-8>
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <style amp4ads-boilerplate>body{visibility:hidden}</style>
+|
+|    <!-- Invalid: AMP4ADS module-nomodule pair for AMP runtime script -->
+|    <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+>>   ^~~~~~~~~
+amp4ads_feature_tests/script_release_versions.html:29:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
+|    <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+>>   ^~~~~~~~~
+amp4ads_feature_tests/script_release_versions.html:30:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
+|
+|    <!-- Invalid: AMP4ADS module/nomodule pair for AMP4ADS runtime script -->
+|    <script async crossorigin=anonymous src=https://cdn.ampproject.org/amp4ads-v0.mjs type=module></script>
+>>   ^~~~~~~~~
+amp4ads_feature_tests/script_release_versions.html:33:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
+|    <script async nomodule src=https://cdn.ampproject.org/amp4ads-v0.js></script>
+>>   ^~~~~~~~~
+amp4ads_feature_tests/script_release_versions.html:34:2 The attribute 'nomodule' may not appear in tag 'amphtml engine script'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+|
+|    <!-- Invalid: AMP4ADS module/nomodule pair for AMP extension script -->
+|    <script async crossorigin=anonymous custom-element=amp-analytics src=https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs type=module></script>
+>>   ^~~~~~~~~
+amp4ads_feature_tests/script_release_versions.html:37:2 The attribute 'type' in tag 'amp-analytics extension script' is set to the invalid value 'module'. (see https://amp.dev/documentation/components/amp-analytics)
+|    <script async custom-element=amp-analytics nomodule src=https://cdn.ampproject.org/v0/amp-analytics-0.1.js></script>
+>>   ^~~~~~~~~
+amp4ads_feature_tests/script_release_versions.html:38:2 The attribute 'nomodule' may not appear in tag 'amp-analytics extension script'. (see https://amp.dev/documentation/components/amp-analytics)
+|
+|    <!-- Invalid: AMP4ADS module/nomodule LTS pair for AMP extension script -->
+|    <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.mjs type=module></script>
+>>   ^~~~~~~~~
+amp4ads_feature_tests/script_release_versions.html:41:2 The script version for 'amp-audio' is a module/nomodule LTS version which mismatches with the first script on the page using the module/nomodule version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+>>   ^~~~~~~~~
+amp4ads_feature_tests/script_release_versions.html:41:2 The attribute 'type' in tag 'amp-audio extension script' is set to the invalid value 'module'. (see https://amp.dev/documentation/components/amp-audio)
+|    <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.js></script>
+>>   ^~~~~~~~~
+amp4ads_feature_tests/script_release_versions.html:42:2 The attribute 'nomodule' may not appear in tag 'amp-audio extension script'. (see https://amp.dev/documentation/components/amp-audio)
+>>   ^~~~~~~~~
+amp4ads_feature_tests/script_release_versions.html:42:2 The script version for 'amp-audio' is a module/nomodule LTS version which mismatches with the first script on the page using the module/nomodule version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|  </head>
+|  <body>
+|    Hello, world.
+|  </body>
+|  </html>
diff --git a/validator/testdata/amp4ads_feature_tests/style-amp-custom.out b/validator/testdata/amp4ads_feature_tests/style-amp-custom.out
index 2703d2dad43ee..749a2ebfdce12 100644
--- a/validator/testdata/amp4ads_feature_tests/style-amp-custom.out
+++ b/validator/testdata/amp4ads_feature_tests/style-amp-custom.out
@@ -56,7 +56,7 @@ FAIL
 |      .amp-animate .box {
 |        transition: background-color 2s;
 >>       ^~~~~~~~~
-amp4ads_feature_tests/style-amp-custom.html:56:6 CSS syntax error in tag 'style amp-custom (AMP4ADS)' - the property 'transition' is set to the disallowed value 'background-color'. Allowed values: ['opacity', 'transform'].
+amp4ads_feature_tests/style-amp-custom.html:56:6 CSS syntax error in tag 'style amp-custom' - the property 'transition' is set to the disallowed value 'background-color'. Allowed values: ['opacity', 'transform'].
 |      }
 |
 |      /* Valid. */
@@ -75,19 +75,19 @@ amp4ads_feature_tests/style-amp-custom.html:56:6 CSS syntax error in tag 'style
 |        from {
 |          margin-left:100%;
 >>         ^~~~~~~~~
-amp4ads_feature_tests/style-amp-custom.html:73:8 CSS syntax error in tag 'style amp-custom (AMP4ADS)' - the property 'margin-left' is disallowed within @keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
+amp4ads_feature_tests/style-amp-custom.html:73:8 CSS syntax error in tag 'style amp-custom' - the property 'margin-left' is disallowed within @keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
 |          width:300%
 >>         ^~~~~~~~~
-amp4ads_feature_tests/style-amp-custom.html:74:8 CSS syntax error in tag 'style amp-custom (AMP4ADS)' - the property 'width' is disallowed within @keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
+amp4ads_feature_tests/style-amp-custom.html:74:8 CSS syntax error in tag 'style amp-custom' - the property 'width' is disallowed within @keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
 |        }
 |
 |        to {
 |          margin-left:0%;
 >>         ^~~~~~~~~
-amp4ads_feature_tests/style-amp-custom.html:78:8 CSS syntax error in tag 'style amp-custom (AMP4ADS)' - the property 'margin-left' is disallowed within @keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
+amp4ads_feature_tests/style-amp-custom.html:78:8 CSS syntax error in tag 'style amp-custom' - the property 'margin-left' is disallowed within @keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
 |          width:100%;
 >>         ^~~~~~~~~
-amp4ads_feature_tests/style-amp-custom.html:79:8 CSS syntax error in tag 'style amp-custom (AMP4ADS)' - the property 'width' is disallowed within @keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
+amp4ads_feature_tests/style-amp-custom.html:79:8 CSS syntax error in tag 'style amp-custom' - the property 'width' is disallowed within @keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
 |        }
 |      }
 |
@@ -122,7 +122,7 @@ amp4ads_feature_tests/style-amp-custom.html:79:8 CSS syntax error in tag 'style
 |      .amp-animate .box {
 |        -moz-transition: background-color 2s;
 >>       ^~~~~~~~~
-amp4ads_feature_tests/style-amp-custom.html:112:6 CSS syntax error in tag 'style amp-custom (AMP4ADS)' - the property 'transition' is set to the disallowed value 'background-color'. Allowed values: ['opacity', 'transform'].
+amp4ads_feature_tests/style-amp-custom.html:112:6 CSS syntax error in tag 'style amp-custom' - the property 'transition' is set to the disallowed value 'background-color'. Allowed values: ['opacity', 'transform'].
 |      }
 |
 |      /* Valid. */
@@ -141,19 +141,19 @@ amp4ads_feature_tests/style-amp-custom.html:112:6 CSS syntax error in tag 'style
 |        from {
 |          margin-left:100%;
 >>         ^~~~~~~~~
-amp4ads_feature_tests/style-amp-custom.html:129:8 CSS syntax error in tag 'style amp-custom (AMP4ADS)' - the property 'margin-left' is disallowed within @-o-keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
+amp4ads_feature_tests/style-amp-custom.html:129:8 CSS syntax error in tag 'style amp-custom' - the property 'margin-left' is disallowed within @-o-keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
 |          width:300%
 >>         ^~~~~~~~~
-amp4ads_feature_tests/style-amp-custom.html:130:8 CSS syntax error in tag 'style amp-custom (AMP4ADS)' - the property 'width' is disallowed within @-o-keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
+amp4ads_feature_tests/style-amp-custom.html:130:8 CSS syntax error in tag 'style amp-custom' - the property 'width' is disallowed within @-o-keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
 |        }
 |
 |        to {
 |          margin-left:0%;
 >>         ^~~~~~~~~
-amp4ads_feature_tests/style-amp-custom.html:134:8 CSS syntax error in tag 'style amp-custom (AMP4ADS)' - the property 'margin-left' is disallowed within @-o-keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
+amp4ads_feature_tests/style-amp-custom.html:134:8 CSS syntax error in tag 'style amp-custom' - the property 'margin-left' is disallowed within @-o-keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
 |          width:100%;
 >>         ^~~~~~~~~
-amp4ads_feature_tests/style-amp-custom.html:135:8 CSS syntax error in tag 'style amp-custom (AMP4ADS)' - the property 'width' is disallowed within @-o-keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
+amp4ads_feature_tests/style-amp-custom.html:135:8 CSS syntax error in tag 'style amp-custom' - the property 'width' is disallowed within @-o-keyframes. Allowed properties: ['animation-timing-function', 'opacity', 'transform'].
 |        }
 |      }
 |    </style>
diff --git a/validator/testdata/amp4email_feature_tests/amp-accordion.html b/validator/testdata/amp4email_feature_tests/amp-accordion.html
new file mode 100644
index 0000000000000..7b308c418a7ea
--- /dev/null
+++ b/validator/testdata/amp4email_feature_tests/amp-accordion.html
@@ -0,0 +1,122 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  Tests the additional restrictions AMP4EMAIL sets on AMP-ACCORDION.
+-->
+<!doctype html>
+<html ⚡4email data-css-strict>
+<head>
+  <meta charset="utf-8">
+  <style amp4email-boilerplate>body{visibility:hidden}</style>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
+  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
+</head>
+<body>
+  <!-- a valid example -->
+  <amp-accordion>
+    <section>
+      <h2>Section 1</h2>
+      <p>Bunch of awesome content</p>
+    </section>
+    <section expanded>
+      <h2>Section 2</h2>
+      <div>Bunch of awesome content</div>
+    </section>
+    <section expanded>
+      <h2>Section 3</h2>
+      <amp-img src="/awesome.png" width="300" height="300"></amp-img>
+    </section>
+    <section>
+      <h2>Properly nested amp-accordion</h2>
+      <amp-accordion expand-single-section animate>
+        <section>
+          <h2>Nested section</h2>
+          <p>It's possible to nest amp-accordions.</p>
+        </section>
+      </amp-accordion>
+    </section>
+    <section>
+      <header>The header tag is supported as well.</header>
+      <p>Even more awesome.</p>
+    </section>
+    <section [data-expand]="">
+      <h2>Section with bound [data-expand] attribute</h2>
+      <amp-img src="/awesome.png" width="300" height="300"></amp-img>
+    </section>
+  </amp-accordion>
+
+  <!-- invalid example -->
+  <amp-accordion>
+    <amp-accordion> <!-- can't nest amp-accordion -->
+    </amp-accordion>
+    <p>Some paragraph of text that doesn't belong here.</p>
+    <section>
+      <div>header which isn't h1-h6.</div>
+      <div>a second child</div>
+      <div>a third child</div>
+    </section>
+  </amp-accordion>
+
+  <!-- accordion in email should not allow access-hide in section -->
+  <amp-accordion expand-single-section disable-session-states>
+    <section amp-access="NOT nwPlus" access-hide>
+        <h2 class="accordion-header">
+          Web-Abo
+          <span class="show-more">&#9207;</span>
+          <span class="show-less">&#9206;</span>
+        </h2>
+        <div>***</div>
+    </section>
+    <!-- access-hide attribute should not have non-empty value -->
+    <section amp-access="NOT nwPlus" access-hide="test">
+        <h2 class="accordion-header">
+          Tagespass
+          <span class="show-more">&#9207;</span>
+          <span class="show-less">&#9206;</span>
+        </h2>
+        <div>***</div>
+    </section>
+    <!-- LOGIN-Form -->
+    <section amp-access="NOT loggedIn" amp-access-hide>
+        <h2 class="accordion-header">
+          Login
+          <span class="show-more">&#9207;</span>
+          <span class="show-less">&#9206;</span>
+        </h2>
+        <form
+          id="loginform-overlay"
+          class="text-center"
+          method="post"
+          action-xhr="test"
+          target="_top"
+          on="submit:loading-spinner.show;submit-success:loginform.hide,loading-spinner.hide,logoutform.show"
+        >
+          <input
+            id="my_user"
+            type="text"
+            name="my_user"
+            maxlength="50"
+            size="20"
+            placeholder="Benutzername o. E-Mail"
+            required
+          />
+        </form>
+    </section>
+  </amp-accordion>
+</body>
+</html>
diff --git a/validator/testdata/amp4email_feature_tests/amp-accordion.out b/validator/testdata/amp4email_feature_tests/amp-accordion.out
new file mode 100644
index 0000000000000..22db26ef17af6
--- /dev/null
+++ b/validator/testdata/amp4email_feature_tests/amp-accordion.out
@@ -0,0 +1,145 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests the additional restrictions AMP4EMAIL sets on AMP-ACCORDION.
+|  -->
+|  <!doctype html>
+|  <html ⚡4email data-css-strict>
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp4email-boilerplate>body{visibility:hidden}</style>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
+|    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
+|  </head>
+|  <body>
+|    <!-- a valid example -->
+|    <amp-accordion>
+|      <section>
+|        <h2>Section 1</h2>
+|        <p>Bunch of awesome content</p>
+|      </section>
+|      <section expanded>
+|        <h2>Section 2</h2>
+|        <div>Bunch of awesome content</div>
+|      </section>
+|      <section expanded>
+|        <h2>Section 3</h2>
+|        <amp-img src="/awesome.png" width="300" height="300"></amp-img>
+>>       ^~~~~~~~~
+amp4email_feature_tests/amp-accordion.html:42:6 The relative URL '/awesome.png' for attribute 'src' in tag 'amp-img' is disallowed. (see https://amp.dev/documentation/components/amp-img/)
+|      </section>
+|      <section>
+|        <h2>Properly nested amp-accordion</h2>
+|        <amp-accordion expand-single-section animate>
+|          <section>
+|            <h2>Nested section</h2>
+|            <p>It's possible to nest amp-accordions.</p>
+|          </section>
+|        </amp-accordion>
+|      </section>
+|      <section>
+|        <header>The header tag is supported as well.</header>
+|        <p>Even more awesome.</p>
+|      </section>
+|      <section [data-expand]="">
+|        <h2>Section with bound [data-expand] attribute</h2>
+|        <amp-img src="/awesome.png" width="300" height="300"></amp-img>
+>>       ^~~~~~~~~
+amp4email_feature_tests/amp-accordion.html:59:6 The relative URL '/awesome.png' for attribute 'src' in tag 'amp-img' is disallowed. (see https://amp.dev/documentation/components/amp-img/)
+|      </section>
+|    </amp-accordion>
+|
+|    <!-- invalid example -->
+|    <amp-accordion>
+|      <amp-accordion> <!-- can't nest amp-accordion -->
+>>     ^~~~~~~~~
+amp4email_feature_tests/amp-accordion.html:65:4 Tag 'amp-accordion' is disallowed as child of tag 'amp-accordion'. Child tag must be one of ['section']. (see https://amp.dev/documentation/components/amp-accordion/)
+|      </amp-accordion>
+|      <p>Some paragraph of text that doesn't belong here.</p>
+>>     ^~~~~~~~~
+amp4email_feature_tests/amp-accordion.html:67:4 Tag 'p' is disallowed as child of tag 'amp-accordion'. Child tag must be one of ['section']. (see https://amp.dev/documentation/components/amp-accordion/)
+|      <section>
+>>     ^~~~~~~~~
+amp4email_feature_tests/amp-accordion.html:68:4 Tag 'amp-accordion > section' must have 2 child tags - saw 3 child tags.
+|        <div>header which isn't h1-h6.</div>
+>>       ^~~~~~~~~
+amp4email_feature_tests/amp-accordion.html:69:6 Tag 'div' is disallowed as first child of tag 'amp-accordion > section'. First child tag must be one of ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header'].
+|        <div>a second child</div>
+|        <div>a third child</div>
+|      </section>
+|    </amp-accordion>
+|
+|    <!-- accordion in email should not allow access-hide in section -->
+|    <amp-accordion expand-single-section disable-session-states>
+>>   ^~~~~~~~~
+amp4email_feature_tests/amp-accordion.html:76:2 The attribute 'disable-session-states' may not appear in tag 'amp-accordion'. (see https://amp.dev/documentation/components/amp-accordion/)
+|      <section amp-access="NOT nwPlus" access-hide>
+>>     ^~~~~~~~~
+amp4email_feature_tests/amp-accordion.html:77:4 The attribute 'access-hide' may not appear in tag 'amp-accordion > section'.
+|          <h2 class="accordion-header">
+|            Web-Abo
+|            <span class="show-more">&#9207;</span>
+|            <span class="show-less">&#9206;</span>
+|          </h2>
+|          <div>***</div>
+|      </section>
+|      <!-- access-hide attribute should not have non-empty value -->
+|      <section amp-access="NOT nwPlus" access-hide="test">
+>>     ^~~~~~~~~
+amp4email_feature_tests/amp-accordion.html:86:4 The attribute 'access-hide' may not appear in tag 'amp-accordion > section'.
+|          <h2 class="accordion-header">
+|            Tagespass
+|            <span class="show-more">&#9207;</span>
+|            <span class="show-less">&#9206;</span>
+|          </h2>
+|          <div>***</div>
+|      </section>
+|      <!-- LOGIN-Form -->
+|      <section amp-access="NOT loggedIn" amp-access-hide>
+|          <h2 class="accordion-header">
+|            Login
+|            <span class="show-more">&#9207;</span>
+|            <span class="show-less">&#9206;</span>
+|          </h2>
+|          <form
+>>         ^~~~~~~~~
+amp4email_feature_tests/amp-accordion.html:101:8 The relative URL 'test' for attribute 'action-xhr' in tag 'form' is disallowed. (see https://amp.dev/documentation/components/amp-form)
+>>         ^~~~~~~~~
+amp4email_feature_tests/amp-accordion.html:101:8 The attribute 'target' may not appear in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
+|            id="loginform-overlay"
+|            class="text-center"
+|            method="post"
+|            action-xhr="test"
+|            target="_top"
+|            on="submit:loading-spinner.show;submit-success:loginform.hide,loading-spinner.hide,logoutform.show"
+|          >
+|            <input
+|              id="my_user"
+|              type="text"
+|              name="my_user"
+|              maxlength="50"
+|              size="20"
+|              placeholder="Benutzername o. E-Mail"
+|              required
+|            />
+|          </form>
+|      </section>
+|    </amp-accordion>
+|  </body>
+|  </html>
diff --git a/validator/testdata/amp4email_feature_tests/amp-autocomplete.html b/validator/testdata/amp4email_feature_tests/amp-autocomplete.html
index 37100e282e29b..b715d35632701 100644
--- a/validator/testdata/amp4email_feature_tests/amp-autocomplete.html
+++ b/validator/testdata/amp4email_feature_tests/amp-autocomplete.html
@@ -19,7 +19,7 @@
 -->
 <!DOCTYPE html>
 <!-- "data-amp-autocomplete-opt-in" is disallowed by the validator -->
-<html ⚡4email data-amp-autocomplete-opt-in>
+<html ⚡4email data-amp-autocomplete-opt-in data-css-strict>
   <head>
     <meta charset="utf-8" />
     <style amp4email-boilerplate>
@@ -74,7 +74,7 @@
       highlight-user-entry
       inline
       min-characters="0"
-      max-entries="3"
+      max-items="3"
       submit-on-enter
       suggest-first
     >
diff --git a/validator/testdata/amp4email_feature_tests/amp-autocomplete.out b/validator/testdata/amp4email_feature_tests/amp-autocomplete.out
index 3479b7d318045..5d0c925e84249 100644
--- a/validator/testdata/amp4email_feature_tests/amp-autocomplete.out
+++ b/validator/testdata/amp4email_feature_tests/amp-autocomplete.out
@@ -20,9 +20,9 @@ FAIL
 |  -->
 |  <!DOCTYPE html>
 |  <!-- "data-amp-autocomplete-opt-in" is disallowed by the validator -->
-|  <html ⚡4email data-amp-autocomplete-opt-in>
+|  <html ⚡4email data-amp-autocomplete-opt-in data-css-strict>
 >> ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:22:0 The attribute 'data-amp-autocomplete-opt-in' in tag 'html' is set to the invalid value ''. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+amp4email_feature_tests/amp-autocomplete.html:22:0 The attribute 'data-amp-autocomplete-opt-in' in tag 'html' is set to the invalid value ''. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |    <head>
 |      <meta charset="utf-8" />
 |      <style amp4email-boilerplate>
@@ -77,7 +77,7 @@ amp4email_feature_tests/amp-autocomplete.html:22:0 The attribute 'data-amp-autoc
 |        highlight-user-entry
 |        inline
 |        min-characters="0"
-|        max-entries="3"
+|        max-items="3"
 |        submit-on-enter
 |        suggest-first
 |      >
@@ -87,11 +87,11 @@ amp4email_feature_tests/amp-autocomplete.html:22:0 The attribute 'data-amp-autoc
 |      <!-- Invalid: amp-component with static data -->
 |      <amp-autocomplete>
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:85:4 The mandatory attribute 'src' is missing in tag 'AMP-AUTOCOMPLETE (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp4email_feature_tests/amp-autocomplete.html:85:4 The mandatory attribute 'src' is missing in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
 |        <input />
 |        <script type="application/json">
 >>       ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:87:6 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+amp4email_feature_tests/amp-autocomplete.html:87:6 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |          {}
 |        </script>
 |      </amp-autocomplete>
@@ -99,7 +99,7 @@ amp4email_feature_tests/amp-autocomplete.html:87:6 Custom JavaScript is not allo
 |      <!-- Invalid: amp-component with filter attribute -->
 |      <amp-autocomplete
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:93:4 The attribute 'filter' may not appear in tag 'AMP-AUTOCOMPLETE (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp4email_feature_tests/amp-autocomplete.html:93:4 The attribute 'filter' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
 |        filter="prefix"
 |        src="https://data.com/articles.json?ref=CANONICAL_URL"
 |      >
@@ -109,7 +109,7 @@ amp4email_feature_tests/amp-autocomplete.html:93:4 The attribute 'filter' may no
 |      <!-- Invalid: amp-component with filter-value attribute -->
 |      <amp-autocomplete
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:101:4 The attribute 'filter-value' may not appear in tag 'AMP-AUTOCOMPLETE (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp4email_feature_tests/amp-autocomplete.html:101:4 The attribute 'filter-value' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
 |        filter-value="property"
 |        src="https://data.com/articles.json?ref=CANONICAL_URL"
 |      >
@@ -123,12 +123,12 @@ amp4email_feature_tests/amp-autocomplete.html:101:4 The attribute 'filter-value'
 |          <div>
 |            <amp-autocomplete
 >>           ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:113:10 The tag 'AMP-AUTOCOMPLETE (AMP4EMAIL)' may not appear as a descendant of tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp4email_feature_tests/amp-autocomplete.html:113:10 The tag 'amp-autocomplete' may not appear as a descendant of tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
 |              src="https://data.com/articles.json?ref=CANONICAL_URL"
 |            >
 |              <template type="amp-mustache" id="1234">
 >>             ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:116:12 The tag 'TEMPLATE (AMP4EMAIL)' may not appear as a descendant of tag 'template (amp4email)'. (see https://amp.dev/documentation/components/amp-mustache)
+amp4email_feature_tests/amp-autocomplete.html:116:12 The tag 'template' may not appear as a descendant of tag 'template (amp4email)'. (see https://amp.dev/documentation/components/amp-mustache)
 |                <div>
 |                  <a href="https://somelink.com">{{blah}}</a>
 |                </div>
@@ -144,12 +144,12 @@ amp4email_feature_tests/amp-autocomplete.html:116:12 The tag 'TEMPLATE (AMP4EMAI
 |          <div>
 |            <amp-state src="https://someserver.json">
 >>           ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:130:10 The tag 'amp-state (AMP4EMAIL)' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-bind)
+amp4email_feature_tests/amp-autocomplete.html:130:10 The tag 'amp-state' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-bind/)
 >>           ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:130:10 The tag 'amp-state (AMP4EMAIL)' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind)
+amp4email_feature_tests/amp-autocomplete.html:130:10 The tag 'amp-state' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind/)
 |              <script type="application/json">
 >>             ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:131:12 The tag 'amp-bind extension .json script' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind)
+amp4email_feature_tests/amp-autocomplete.html:131:12 The tag 'script' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind/)
 |                {}
 |              </script>
 |            </amp-state>
@@ -163,7 +163,7 @@ amp4email_feature_tests/amp-autocomplete.html:131:12 The tag 'amp-bind extension
 |          <div>
 |            <amp-autocomplete
 >>           ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:143:10 The tag 'AMP-AUTOCOMPLETE (AMP4EMAIL)' may not appear as a descendant of tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp4email_feature_tests/amp-autocomplete.html:143:10 The tag 'amp-autocomplete' may not appear as a descendant of tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
 |              src="https://data.com/articles.json?ref=CANONICAL_URL"
 |              template="1234"
 |            >
@@ -178,12 +178,12 @@ amp4email_feature_tests/amp-autocomplete.html:143:10 The tag 'AMP-AUTOCOMPLETE (
 |          <div>
 |            <amp-state id="123" src="https://someserver.json" template="1234">
 >>           ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:156:10 The tag 'amp-state (AMP4EMAIL)' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-bind)
+amp4email_feature_tests/amp-autocomplete.html:156:10 The tag 'amp-state' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-bind/)
 >>           ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:156:10 The tag 'amp-state (AMP4EMAIL)' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind)
+amp4email_feature_tests/amp-autocomplete.html:156:10 The tag 'amp-state' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind/)
 |              <script type="application/json">
 >>             ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:157:12 The tag 'amp-bind extension .json script' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind)
+amp4email_feature_tests/amp-autocomplete.html:157:12 The tag 'script' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind/)
 |                {}
 |              </script>
 |            </amp-state>
@@ -196,7 +196,7 @@ amp4email_feature_tests/amp-autocomplete.html:157:12 The tag 'amp-bind extension
 |        <div>
 |          <amp-autocomplete
 >>         ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:168:8 The tag 'AMP-AUTOCOMPLETE (AMP4EMAIL)' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp4email_feature_tests/amp-autocomplete.html:168:8 The tag 'amp-autocomplete' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-autocomplete)
 |            src="https://data.com/articles.json?ref=CANONICAL_URL"
 |            template="1234"
 |          >
@@ -207,48 +207,48 @@ amp4email_feature_tests/amp-autocomplete.html:168:8 The tag 'AMP-AUTOCOMPLETE (A
 |      <!-- Invalid: URLs cannot be empty. -->
 |      <amp-autocomplete src="">
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:177:4 Missing URL for attribute 'src' in tag 'AMP-AUTOCOMPLETE (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp4email_feature_tests/amp-autocomplete.html:177:4 Missing URL for attribute 'src' in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
 |        <input />
 |      </amp-autocomplete>
 |
 |      <!-- Invalid: The protocol can only be https -->
 |      <amp-autocomplete src="http://data.com/articles.json?ref=CANONICAL_URL">
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:182:4 Invalid URL protocol 'http:' for attribute 'src' in tag 'AMP-AUTOCOMPLETE (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp4email_feature_tests/amp-autocomplete.html:182:4 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
 |        <input />
 |      </amp-autocomplete>
 |
 |      <!-- Invalid: src of amp-autocomplete is not bindable -->
 |      <amp-autocomplete [src]="data">
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:187:4 The attribute '[src]' may not appear in tag 'AMP-AUTOCOMPLETE (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp4email_feature_tests/amp-autocomplete.html:187:4 The attribute '[src]' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
 |        <input />
 |      </amp-autocomplete>
 |
 |      <!-- Invalid: Mustache delimiters are disallowed in src -->
 |      <amp-autocomplete src="foo{{bar">
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:192:4 The relative URL 'foo{{bar' for attribute 'src' in tag 'AMP-AUTOCOMPLETE (AMP4EMAIL)' is disallowed. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp4email_feature_tests/amp-autocomplete.html:192:4 The relative URL 'foo{{bar' for attribute 'src' in tag 'amp-autocomplete' is disallowed. (see https://amp.dev/documentation/components/amp-autocomplete)
 |        <input />
 |      </amp-autocomplete>
 |
 |      <!-- Invalid: Mustache delimiters are disallowed in src -->
 |      <amp-autocomplete src="foo{{bar">
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:197:4 The relative URL 'foo{{bar' for attribute 'src' in tag 'AMP-AUTOCOMPLETE (AMP4EMAIL)' is disallowed. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp4email_feature_tests/amp-autocomplete.html:197:4 The relative URL 'foo{{bar' for attribute 'src' in tag 'amp-autocomplete' is disallowed. (see https://amp.dev/documentation/components/amp-autocomplete)
 |        <input />
 |      </amp-autocomplete>
 |
 |      <!-- Invalid: Mustache variables cannot be concatenated in href -->
 |      <amp-autocomplete src="http://data.com/articles.json?ref=CANONICAL_URL">
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:202:4 Invalid URL protocol 'http:' for attribute 'src' in tag 'AMP-AUTOCOMPLETE (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-autocomplete)
+amp4email_feature_tests/amp-autocomplete.html:202:4 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
 |        <input />
 |        <template type="amp-mustache">
 |          <a href="{{bar}}{{foo}}">disallowed</a>
 >>         ^~~~~~~~~
-amp4email_feature_tests/amp-autocomplete.html:205:8 The attribute 'href' in tag 'A (AMP4EMAIL)' is set to the invalid value '{{bar}}{{foo}}'.
+amp4email_feature_tests/amp-autocomplete.html:205:8 The attribute 'href' in tag 'a' is set to the invalid value '{{bar}}{{foo}}'.
 |        </template>
 |      </amp-autocomplete>
 |    </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/validator/testdata/amp4email_feature_tests/amp_actions.html b/validator/testdata/amp4email_feature_tests/amp_actions.html
deleted file mode 100644
index 8a326dc4ac988..0000000000000
--- a/validator/testdata/amp4email_feature_tests/amp_actions.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
-  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.
--->
-<!--
-  Test Description:
-  Verifies that type identifier `actions` is not valid on an AMP4EMAIL document.
--->
-<!doctype html>
-<html ⚡4email actions>
-<head>
-  <meta charset="utf-8">
-  <style amp4email-boilerplate>body{visibility:hidden}</style>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-Hello, world.
-</body>
-</html>
diff --git a/validator/testdata/amp4email_feature_tests/amp_actions.out b/validator/testdata/amp4email_feature_tests/amp_actions.out
deleted file mode 100644
index e86d60db1c60a..0000000000000
--- a/validator/testdata/amp4email_feature_tests/amp_actions.out
+++ /dev/null
@@ -1,33 +0,0 @@
-FAIL
-|  <!--
-|    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.
-|  -->
-|  <!--
-|    Test Description:
-|    Verifies that type identifier `actions` is not valid on an AMP4EMAIL document.
-|  -->
-|  <!doctype html>
-|  <html ⚡4email actions>
->> ^~~~~~~~~
-amp4email_feature_tests/amp_actions.html:21:0 The attribute 'actions' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
-|  <head>
-|    <meta charset="utf-8">
-|    <style amp4email-boilerplate>body{visibility:hidden}</style>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|  </head>
-|  <body>
-|  Hello, world.
-|  </body>
-|  </html>
diff --git a/validator/testdata/amp4email_feature_tests/amp_carousel.html b/validator/testdata/amp4email_feature_tests/amp_carousel.html
index dcf228142b5cc..46f4a47535e96 100644
--- a/validator/testdata/amp4email_feature_tests/amp_carousel.html
+++ b/validator/testdata/amp4email_feature_tests/amp_carousel.html
@@ -18,7 +18,7 @@
   Tests the additional restrictions AMP4EMAIL sets on AMP-CAROUSEL.
 -->
 <!doctype html>
-<html ⚡4email>
+<html ⚡4email data-css-strict>
 <head>
   <meta charset="utf-8">
   <style amp4email-boilerplate>body{visibility:hidden}</style>
diff --git a/validator/testdata/amp4email_feature_tests/amp_carousel.out b/validator/testdata/amp4email_feature_tests/amp_carousel.out
index 55cdc56dbef4c..11828f2779c05 100644
--- a/validator/testdata/amp4email_feature_tests/amp_carousel.out
+++ b/validator/testdata/amp4email_feature_tests/amp_carousel.out
@@ -19,7 +19,7 @@ FAIL
 |    Tests the additional restrictions AMP4EMAIL sets on AMP-CAROUSEL.
 |  -->
 |  <!doctype html>
-|  <html ⚡4email>
+|  <html ⚡4email data-css-strict>
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp4email-boilerplate>body{visibility:hidden}</style>
@@ -44,7 +44,7 @@ FAIL
 |  -->
 |  <amp-carousel
 >> ^~~~~~~~~
-amp4email_feature_tests/amp_carousel.html:44:0 The attribute 'arrows' may not appear in tag 'AMP-CAROUSEL'. (see https://amp.dev/documentation/components/amp-carousel)
+amp4email_feature_tests/amp_carousel.html:44:0 The attribute 'arrows' may not appear in tag 'amp-carousel'. (see https://amp.dev/documentation/components/amp-carousel/)
 |    arrows
 |    width="800" height="600"
 |    layout="responsive"
@@ -52,4 +52,4 @@ amp4email_feature_tests/amp_carousel.html:44:0 The attribute 'arrows' may not ap
 |  </amp-carousel>
 |
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/validator/testdata/amp4email_feature_tests/amp_form.html b/validator/testdata/amp4email_feature_tests/amp_form.html
index 032b516b302e4..5a6bb9afa5042 100644
--- a/validator/testdata/amp4email_feature_tests/amp_form.html
+++ b/validator/testdata/amp4email_feature_tests/amp_form.html
@@ -19,7 +19,7 @@
   allowed, like input[type=password].
 -->
 <!doctype html>
-<html ⚡4email>
+<html ⚡4email data-css-strict>
 <head>
   <meta charset="utf-8">
   <style amp4email-boilerplate>body{visibility:hidden}</style>
diff --git a/validator/testdata/amp4email_feature_tests/amp_form.out b/validator/testdata/amp4email_feature_tests/amp_form.out
index 7ef6825f69f86..bbc4581f64f8f 100644
--- a/validator/testdata/amp4email_feature_tests/amp_form.out
+++ b/validator/testdata/amp4email_feature_tests/amp_form.out
@@ -20,7 +20,7 @@ FAIL
 |    allowed, like input[type=password].
 |  -->
 |  <!doctype html>
-|  <html ⚡4email>
+|  <html ⚡4email data-css-strict>
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp4email-boilerplate>body{visibility:hidden}</style>
@@ -81,29 +81,29 @@ FAIL
 |    <!-- Invalid: only https protocol is supported. -->
 |    <form method="GET" action-xhr="http://someserver.com/endpoint">
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:81:2 Invalid URL protocol 'http:' for attribute 'action-xhr' in tag 'FORM [method=GET] (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:81:2 Invalid URL protocol 'http:' for attribute 'action-xhr' in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
 |      <input name="googlesearch">
 |      <input type="submit" value="OK">
 |    </form>
 |    <!-- Invalid: only absolute URL is allowed. -->
 |    <form method="GET" action-xhr="endpoint">
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:86:2 The relative URL 'endpoint' for attribute 'action-xhr' in tag 'FORM [method=GET] (AMP4EMAIL)' is disallowed. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:86:2 The relative URL 'endpoint' for attribute 'action-xhr' in tag 'form' is disallowed. (see https://amp.dev/documentation/components/amp-form)
 |      <input name="googlesearch">
 |      <input type="submit" value="OK">
 |    </form>
 |    <form method="POST" action-xhr="endpoint">
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:90:2 The relative URL 'endpoint' for attribute 'action-xhr' in tag 'FORM [method=POST] (AMP4EMAIL)' is disallowed. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:90:2 The relative URL 'endpoint' for attribute 'action-xhr' in tag 'form' is disallowed. (see https://amp.dev/documentation/components/amp-form)
 |      <input name="googlesearch">
 |      <input type="submit" value="OK">
 |    </form>
 |    <!-- Invalid: the action and target attributes are disallowed. -->
 |    <form method="GET"
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:95:2 The attribute 'action' may not appear in tag 'FORM [method=GET] (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:95:2 The attribute 'action' may not appear in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:95:2 The attribute 'target' may not appear in tag 'FORM [method=GET] (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:95:2 The attribute 'target' may not appear in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
 |      action="/components/amp-form/submit-form"
 |      target="_top">
 |      <div>
@@ -115,34 +115,34 @@ amp4email_feature_tests/amp_form.html:95:2 The attribute 'target' may not appear
 |    <form method="post" action-xhr="https://example.com/subscribe">
 |      <input type="image" name="image">
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:105:4 The attribute 'type' in tag 'input' is set to the invalid value 'image'. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:105:4 The attribute 'type' in tag 'input' is set to the invalid value 'image'. (see https://amp.dev/documentation/components/amp-form/)
 |    </form>
 |    <!-- Invalid: input can not be type="password" -->
 |    <form method="post" action-xhr="https://example.com/subscribe">
 |      <input type="password" name="password">
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:109:4 The attribute 'type' in tag 'input' is set to the invalid value 'password'. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:109:4 The attribute 'type' in tag 'input' is set to the invalid value 'password'. (see https://amp.dev/documentation/components/amp-form/)
 |      <input type="file" name="file">
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:110:4 The attribute 'type' in tag 'input' is set to the invalid value 'file'. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:110:4 The attribute 'type' in tag 'input' is set to the invalid value 'file'. (see https://amp.dev/documentation/components/amp-form/)
 |    </form>
 |    <!-- Invalid: invalid attribute xhr-verify -->
 |    <form method="post" action-xhr="https://example.com/subscribe"
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:113:2 The attribute 'xhr-verify' may not appear in tag 'FORM [method=POST] (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:113:2 The attribute 'xhr-verify' may not appear in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
 |      xhr-verify="https://example.com/subscribe">
 |    </form>
 |    <!-- Invalid: invalid attribute xhr-verify -->
 |    <form method="get" action-xhr="https://example.com/subscribe"
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:117:2 The attribute 'xhr-verify' may not appear in tag 'FORM [method=GET] (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:117:2 The attribute 'xhr-verify' may not appear in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
 |      xhr-verify="https://example.com/subscribe">
 |    </form>
 |    <!-- Invalid: amp-bind usage for type in input -->
 |    <form method="get" action-xhr="https://example.com/subscribe">
 |      <input [type]="state.type" name="name">
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:122:4 The attribute '[type]' may not appear in tag 'input'. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:122:4 The attribute '[type]' may not appear in tag 'input'. (see https://amp.dev/documentation/components/amp-form/)
 |    </form>
 |    <!-- Invalid: invalid usage of submitting attribute with nested template -->
 |    <form method="post" action-xhr="https://example.com/subscribe">
@@ -150,7 +150,7 @@ amp4email_feature_tests/amp_form.html:122:4 The attribute '[type]' may not appea
 |      <div submitting>
 |        <template type="amp-mustache">
 >>       ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:128:6 The tag 'TEMPLATE (AMP4EMAIL)' may not appear as a descendant of tag 'form div [submitting]'. (see https://amp.dev/documentation/components/amp-mustache)
+amp4email_feature_tests/amp_form.html:128:6 The tag 'template' may not appear as a descendant of tag 'form div [submitting]'. (see https://amp.dev/documentation/components/amp-mustache)
 |          Submitting... {{a}}
 |        </template>
 |      </div>
@@ -160,7 +160,7 @@ amp4email_feature_tests/amp_form.html:128:6 The tag 'TEMPLATE (AMP4EMAIL)' may n
 |      <input type="email" name="email">
 |      <div submitting template="abc">
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:136:4 The attribute 'template' may not appear in tag 'FORM DIV [submitting]'.
+amp4email_feature_tests/amp_form.html:136:4 The attribute 'template' may not appear in tag 'div'.
 |      </div>
 |    </form>
 |    <!-- Invalid: invalid template within a template -->
@@ -171,7 +171,7 @@ amp4email_feature_tests/amp_form.html:136:4 The attribute 'template' may not app
 |          {{a}}
 |          <template type="amp-mustache">
 >>         ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:145:8 The tag 'TEMPLATE (AMP4EMAIL)' may not appear as a descendant of tag 'template (amp4email)'. (see https://amp.dev/documentation/components/amp-mustache)
+amp4email_feature_tests/amp_form.html:145:8 The tag 'template' may not appear as a descendant of tag 'template (amp4email)'. (see https://amp.dev/documentation/components/amp-mustache)
 |            {{b}}
 |          </template>
 |        </template>
@@ -181,7 +181,7 @@ amp4email_feature_tests/amp_form.html:145:8 The tag 'TEMPLATE (AMP4EMAIL)' may n
 |    <template type="amp-mustache">
 |      <form method="GET"
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:153:4 The attribute 'action-xhr' in tag 'FORM [method=GET] (AMP4EMAIL)' is set to the invalid value '{{foo}}'. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:153:4 The attribute 'action-xhr' in tag 'form' is set to the invalid value '{{foo}}'. (see https://amp.dev/documentation/components/amp-form)
 |        action-xhr="{{foo}}">
 |        <div>
 |          <input name="googlesearch">
@@ -192,7 +192,7 @@ amp4email_feature_tests/amp_form.html:153:4 The attribute 'action-xhr' in tag 'F
 |    <template type="amp-mustache">
 |      <form method="GET"
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:162:4 The attribute 'action-xhr' in tag 'FORM [method=GET] (AMP4EMAIL)' is set to the invalid value '{{foo}}{{bar}}'. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:162:4 The attribute 'action-xhr' in tag 'form' is set to the invalid value '{{foo}}{{bar}}'. (see https://amp.dev/documentation/components/amp-form)
 |        action-xhr="{{foo}}{{bar}}">
 |        <div>
 |          <input name="googlesearch">
@@ -203,7 +203,7 @@ amp4email_feature_tests/amp_form.html:162:4 The attribute 'action-xhr' in tag 'F
 |    <template type="amp-mustache">
 |      <form method="GET"
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:171:4 The relative URL 'foo{{bar' for attribute 'action-xhr' in tag 'FORM [method=GET] (AMP4EMAIL)' is disallowed. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:171:4 The relative URL 'foo{{bar' for attribute 'action-xhr' in tag 'form' is disallowed. (see https://amp.dev/documentation/components/amp-form)
 |        action-xhr="foo{{bar">
 |        <div>
 |          <input name="googlesearch">
@@ -214,7 +214,7 @@ amp4email_feature_tests/amp_form.html:171:4 The relative URL 'foo{{bar' for attr
 |    <template type="amp-mustache">
 |      <form method="GET"
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:180:4 The relative URL 'foo}}bar' for attribute 'action-xhr' in tag 'FORM [method=GET] (AMP4EMAIL)' is disallowed. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:180:4 The relative URL 'foo}}bar' for attribute 'action-xhr' in tag 'form' is disallowed. (see https://amp.dev/documentation/components/amp-form)
 |        action-xhr="foo}}bar">
 |        <div>
 |          <input name="googlesearch">
@@ -225,7 +225,7 @@ amp4email_feature_tests/amp_form.html:180:4 The relative URL 'foo}}bar' for attr
 |    <template type="amp-mustache">
 |      <form method="GET"
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:189:4 The relative URL '{{' for attribute 'action-xhr' in tag 'FORM [method=GET] (AMP4EMAIL)' is disallowed. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:189:4 The relative URL '{{' for attribute 'action-xhr' in tag 'form' is disallowed. (see https://amp.dev/documentation/components/amp-form)
 |        action-xhr="{{">
 |        <div>
 |          <input name="googlesearch">
@@ -236,7 +236,7 @@ amp4email_feature_tests/amp_form.html:189:4 The relative URL '{{' for attribute
 |    <template type="amp-mustache">
 |      <form method="GET"
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:198:4 The relative URL '}}' for attribute 'action-xhr' in tag 'FORM [method=GET] (AMP4EMAIL)' is disallowed. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:198:4 The relative URL '}}' for attribute 'action-xhr' in tag 'form' is disallowed. (see https://amp.dev/documentation/components/amp-form)
 |        action-xhr="}}">
 |        <div>
 |          <input name="googlesearch">
@@ -247,12 +247,12 @@ amp4email_feature_tests/amp_form.html:198:4 The relative URL '}}' for attribute
 |    <!-- Invalid POST form with name. -->
 |    <form method="post" name="post-form" action-xhr="https://example.com/subscribe">
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:207:2 The attribute 'name' may not appear in tag 'FORM [method=POST] (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:207:2 The attribute 'name' may not appear in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
 |    </form>
 |    <!-- Invalid GET form with name. -->
 |    <form method="GET" name="get-form" action-xhr="https://someserver.com/endpoint">
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_form.html:210:2 The attribute 'name' may not appear in tag 'FORM [method=GET] (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-form)
+amp4email_feature_tests/amp_form.html:210:2 The attribute 'name' may not appear in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
 |    </form>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/validator/testdata/amp4email_feature_tests/amp_img.html b/validator/testdata/amp4email_feature_tests/amp_img.html
index e032bfb3d1c56..50f5528b49266 100644
--- a/validator/testdata/amp4email_feature_tests/amp_img.html
+++ b/validator/testdata/amp4email_feature_tests/amp_img.html
@@ -18,7 +18,7 @@
   Tests the additional restrictions AMP4EMAIL sets on AMP-IMG and AMP-ANIM.
 -->
 <!doctype html>
-<html ⚡4email>
+<html ⚡4email data-css-strict>
 <head>
   <meta charset="utf-8">
   <style amp4email-boilerplate>body{visibility:hidden}</style>
diff --git a/validator/testdata/amp4email_feature_tests/amp_img.out b/validator/testdata/amp4email_feature_tests/amp_img.out
index ce74a4b5a201f..d84be7b5063ac 100644
--- a/validator/testdata/amp4email_feature_tests/amp_img.out
+++ b/validator/testdata/amp4email_feature_tests/amp_img.out
@@ -19,14 +19,14 @@ FAIL
 |    Tests the additional restrictions AMP4EMAIL sets on AMP-IMG and AMP-ANIM.
 |  -->
 |  <!doctype html>
-|  <html ⚡4email>
+|  <html ⚡4email data-css-strict>
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp4email-boilerplate>body{visibility:hidden}</style>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_img.html:26:2 The attribute 'src' in tag 'amp-anim extension .js script (AMP4EMAIL)' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-form-0.1.js'. (see https://amp.dev/documentation/components/amp-anim)
+amp4email_feature_tests/amp_img.html:26:2 The attribute 'src' in tag 'amp-anim extension script (AMP4EMAIL)' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-form-0.1.js'. (see https://amp.dev/documentation/components/amp-anim)
 |    <script async custom-template="amp-mustache"
 |        src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
 |  </head>
@@ -34,30 +34,30 @@ amp4email_feature_tests/amp_img.html:26:2 The attribute 'src' in tag 'amp-anim e
 |    <!-- URLs must be absolute. -->
 |    <amp-img src="somelink.com">disallowed</amp-img>
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_img.html:32:2 Incomplete layout attributes specified for tag 'AMP-IMG (AMP4EMAIL)'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-img)
+amp4email_feature_tests/amp_img.html:32:2 Incomplete layout attributes specified for tag 'amp-img'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-img/)
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_img.html:32:2 The relative URL 'somelink.com' for attribute 'src' in tag 'AMP-IMG (AMP4EMAIL)' is disallowed. (see https://amp.dev/documentation/components/amp-img)
+amp4email_feature_tests/amp_img.html:32:2 The relative URL 'somelink.com' for attribute 'src' in tag 'amp-img' is disallowed. (see https://amp.dev/documentation/components/amp-img/)
 |
 |    <!-- URLs must be absolute. -->
 |    <amp-img srcset="somelink.com">disallowed</amp-img>
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_img.html:35:2 Incomplete layout attributes specified for tag 'AMP-IMG (AMP4EMAIL)'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-img)
+amp4email_feature_tests/amp_img.html:35:2 Incomplete layout attributes specified for tag 'amp-img'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-img/)
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_img.html:35:2 The attribute 'srcset' may not appear in tag 'AMP-IMG (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-img)
+amp4email_feature_tests/amp_img.html:35:2 The attribute 'srcset' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |
 |    <!-- The protocol can only be https -->
 |    <amp-img src="http://somelink.com">disallowed</amp-img>
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_img.html:38:2 Incomplete layout attributes specified for tag 'AMP-IMG (AMP4EMAIL)'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-img)
+amp4email_feature_tests/amp_img.html:38:2 Incomplete layout attributes specified for tag 'amp-img'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-img/)
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_img.html:38:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'AMP-IMG (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-img)
+amp4email_feature_tests/amp_img.html:38:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |
 |    <!-- href of anchor is not bindable. -->
 |    <amp-anim [src]="evil">disallowed</amp-anim>
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_img.html:41:2 Incomplete layout attributes specified for tag 'AMP-ANIM (AMP4EMAIL)'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-anim)
+amp4email_feature_tests/amp_img.html:41:2 Incomplete layout attributes specified for tag 'amp-anim'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-anim/)
 >>   ^~~~~~~~~
-amp4email_feature_tests/amp_img.html:41:2 The attribute '[src]' may not appear in tag 'AMP-ANIM (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-anim)
+amp4email_feature_tests/amp_img.html:41:2 The attribute '[src]' may not appear in tag 'amp-anim'. (see https://amp.dev/documentation/components/amp-anim/)
 |
 |
 |    <!-- This is allowed. -->
@@ -69,7 +69,7 @@ amp4email_feature_tests/amp_img.html:41:2 The attribute '[src]' may not appear i
 |    <template type="amp-mustache">
 |      <amp-anim width="1" height="1" src="{{foo}}{{bar}}">disallowed</amp-anim>
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_img.html:51:4 The attribute 'src' in tag 'AMP-ANIM (AMP4EMAIL)' is set to the invalid value '{{foo}}{{bar}}'. (see https://amp.dev/documentation/components/amp-anim)
+amp4email_feature_tests/amp_img.html:51:4 The attribute 'src' in tag 'amp-anim' is set to the invalid value '{{foo}}{{bar}}'. (see https://amp.dev/documentation/components/amp-anim/)
 |    </template>
 |
 |  </body>
diff --git a/validator/testdata/amp4email_feature_tests/amp_list.html b/validator/testdata/amp4email_feature_tests/amp_list.html
index 7153af4231d85..b552a6fd76907 100644
--- a/validator/testdata/amp4email_feature_tests/amp_list.html
+++ b/validator/testdata/amp4email_feature_tests/amp_list.html
@@ -18,7 +18,7 @@
   Tests the additional restrictions AMP4EMAIL sets on AMP-LIST.
 -->
 <!doctype html>
-<html ⚡4email>
+<html ⚡4email data-css-strict>
 <head>
   <meta charset="utf-8">
   <style amp4email-boilerplate>body{visibility:hidden}</style>
@@ -208,4 +208,3 @@
 
 </body>
 </html>
-
diff --git a/validator/testdata/amp4email_feature_tests/amp_list.out b/validator/testdata/amp4email_feature_tests/amp_list.out
index 05e6ce5e7bcaf..4084cbe25b0d9 100644
--- a/validator/testdata/amp4email_feature_tests/amp_list.out
+++ b/validator/testdata/amp4email_feature_tests/amp_list.out
@@ -19,7 +19,7 @@ FAIL
 |    Tests the additional restrictions AMP4EMAIL sets on AMP-LIST.
 |  -->
 |  <!doctype html>
-|  <html ⚡4email>
+|  <html ⚡4email data-css-strict>
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp4email-boilerplate>body{visibility:hidden}</style>
@@ -63,11 +63,11 @@ amp4email_feature_tests/amp_list.html:28:2 The extension 'amp-mustache' is refer
 |      <div>
 |        <amp-list width="auto" height="100" layout="fixed-height"
 >>       ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:61:6 The tag 'AMP-LIST (AMP4EMAIL)' may not appear as a descendant of tag 'amp-list'. (see https://amp.dev/documentation/components/amp-list)
+amp4email_feature_tests/amp_list.html:61:6 The tag 'amp-list' may not appear as a descendant of tag 'amp-list'. (see https://amp.dev/documentation/components/amp-list)
 |          src="https://someserver.json">
 |          <template type="amp-mustache" id="1234">
 >>         ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:63:8 The tag 'TEMPLATE (AMP4EMAIL)' may not appear as a descendant of tag 'template (amp4email)'. (see https://amp.dev/documentation/components/amp-mustache)
+amp4email_feature_tests/amp_list.html:63:8 The tag 'template' may not appear as a descendant of tag 'template (amp4email)'. (see https://amp.dev/documentation/components/amp-mustache)
 |            <div>
 |              <a href="https://somelink.com">{{blah}}</a>
 |            </div>
@@ -83,7 +83,7 @@ amp4email_feature_tests/amp_list.html:63:8 The tag 'TEMPLATE (AMP4EMAIL)' may no
 |      <div>
 |        <amp-state src="https://someserver.json">
 >>       ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:77:6 The tag 'amp-state (AMP4EMAIL)' may not appear as a descendant of tag 'amp-list'. (see https://amp.dev/documentation/components/amp-bind)
+amp4email_feature_tests/amp_list.html:77:6 The tag 'amp-state' may not appear as a descendant of tag 'amp-list'. (see https://amp.dev/documentation/components/amp-bind/)
 |          <script type="application/json">{}</script>
 |        </amp-state>
 |      </div>
@@ -99,7 +99,7 @@ amp4email_feature_tests/amp_list.html:77:6 The tag 'amp-state (AMP4EMAIL)' may n
 |      <div>
 |        <amp-list width="auto" height="100" layout="fixed-height"
 >>       ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:91:6 The tag 'AMP-LIST (AMP4EMAIL)' may not appear as a descendant of tag 'amp-list'. (see https://amp.dev/documentation/components/amp-list)
+amp4email_feature_tests/amp_list.html:91:6 The tag 'amp-list' may not appear as a descendant of tag 'amp-list'. (see https://amp.dev/documentation/components/amp-list)
 |          src="https://someserver.json" template="1234">
 |        </amp-list>
 |      </div>
@@ -112,7 +112,7 @@ amp4email_feature_tests/amp_list.html:91:6 The tag 'AMP-LIST (AMP4EMAIL)' may no
 |      <div>
 |        <amp-state id="123"
 >>       ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:102:6 The tag 'amp-state (AMP4EMAIL)' may not appear as a descendant of tag 'amp-list'. (see https://amp.dev/documentation/components/amp-bind)
+amp4email_feature_tests/amp_list.html:102:6 The tag 'amp-state' may not appear as a descendant of tag 'amp-list'. (see https://amp.dev/documentation/components/amp-bind/)
 |          src="https://someserver.json" template="1234">
 |          <script type="application/json">{}</script>
 |        </amp-state>
@@ -124,7 +124,7 @@ amp4email_feature_tests/amp_list.html:102:6 The tag 'amp-state (AMP4EMAIL)' may
 |    <div>
 |      <amp-list width="auto" height="100" layout="fixed-height"
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:112:4 The tag 'AMP-LIST (AMP4EMAIL)' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-list)
+amp4email_feature_tests/amp_list.html:112:4 The tag 'amp-list' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-list)
 |        src="https://someserver.json" template="1234">
 |      </amp-list>
 |    </div>
@@ -134,7 +134,7 @@ amp4email_feature_tests/amp_list.html:112:4 The tag 'AMP-LIST (AMP4EMAIL)' may n
 |    <div>
 |      <amp-state id="123"
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:120:4 The tag 'amp-state (AMP4EMAIL)' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-bind)
+amp4email_feature_tests/amp_list.html:120:4 The tag 'amp-state' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-bind/)
 |        src="https://someserver.json" template="1234">
 |        <script type="application/json">{}</script>
 |      </amp-state>
@@ -146,7 +146,7 @@ amp4email_feature_tests/amp_list.html:120:4 The tag 'amp-state (AMP4EMAIL)' may
 |  -->
 |  <amp-list width="auto" height="100" layout="fixed-height"
 >> ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:130:0 Missing URL for attribute 'src' in tag 'AMP-LIST (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-list)
+amp4email_feature_tests/amp_list.html:130:0 Missing URL for attribute 'src' in tag 'amp-list'. (see https://amp.dev/documentation/components/amp-list)
 |    src="">
 |    <template type="amp-mustache">
 |      <div>
@@ -156,7 +156,7 @@ amp4email_feature_tests/amp_list.html:130:0 Missing URL for attribute 'src' in t
 |
 |  <amp-state src="">
 >> ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:138:0 The attribute 'src' may not appear in tag 'amp-state (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-bind)
+amp4email_feature_tests/amp_list.html:138:0 The attribute 'src' may not appear in tag 'amp-state'. (see https://amp.dev/documentation/components/amp-bind/)
 |    <template type="amp-mustache">
 |      <div>
 |      </div>
@@ -168,7 +168,7 @@ amp4email_feature_tests/amp_list.html:138:0 The attribute 'src' may not appear i
 |  -->
 |  <amp-list width="auto" height="100" layout="fixed-height"
 >> ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:148:0 Invalid URL protocol 'http:' for attribute 'src' in tag 'AMP-LIST (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-list)
+amp4email_feature_tests/amp_list.html:148:0 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-list'. (see https://amp.dev/documentation/components/amp-list)
 |    src="http://somelink.com">
 |    <template type="amp-mustache">
 |      <div>
@@ -178,7 +178,7 @@ amp4email_feature_tests/amp_list.html:148:0 Invalid URL protocol 'http:' for att
 |
 |  <amp-state id="123"
 >> ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:156:0 The attribute 'src' may not appear in tag 'amp-state (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-bind)
+amp4email_feature_tests/amp_list.html:156:0 The attribute 'src' may not appear in tag 'amp-state'. (see https://amp.dev/documentation/components/amp-bind/)
 |    src="http://somelink.com">
 |    <template type="amp-mustache">
 |      <div>
@@ -192,7 +192,7 @@ amp4email_feature_tests/amp_list.html:156:0 The attribute 'src' may not appear i
 |  -->
 |  <amp-list width="auto" height="100" layout="fixed-height"
 >> ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:168:0 The attribute '[src]' may not appear in tag 'AMP-LIST (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-list)
+amp4email_feature_tests/amp_list.html:168:0 The attribute '[src]' may not appear in tag 'amp-list'. (see https://amp.dev/documentation/components/amp-list)
 |    [src]="evil">
 |    <template type="amp-mustache">
 |      <div>
@@ -202,7 +202,7 @@ amp4email_feature_tests/amp_list.html:168:0 The attribute '[src]' may not appear
 |
 |  <amp-state id="123" [src]="evil">
 >> ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:176:0 The attribute '[src]' may not appear in tag 'amp-state (AMP4EMAIL)'. (see https://amp.dev/documentation/components/amp-bind)
+amp4email_feature_tests/amp_list.html:176:0 The attribute '[src]' may not appear in tag 'amp-state'. (see https://amp.dev/documentation/components/amp-bind/)
 |    <script type="application/json">{}</script>
 |  </amp-state>
 |
@@ -211,7 +211,7 @@ amp4email_feature_tests/amp_list.html:176:0 The attribute '[src]' may not appear
 |  -->
 |  <amp-list width="auto" height="100" layout="fixed-height"
 >> ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:183:0 The relative URL 'foo{{bar' for attribute 'src' in tag 'AMP-LIST (AMP4EMAIL)' is disallowed. (see https://amp.dev/documentation/components/amp-list)
+amp4email_feature_tests/amp_list.html:183:0 The relative URL 'foo{{bar' for attribute 'src' in tag 'amp-list' is disallowed. (see https://amp.dev/documentation/components/amp-list)
 |    src="foo{{bar">
 |    <template type="amp-mustache">
 |      <div>
@@ -221,7 +221,7 @@ amp4email_feature_tests/amp_list.html:183:0 The relative URL 'foo{{bar' for attr
 |
 |  <amp-list width="auto" height="100" layout="fixed-height"
 >> ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:191:0 The relative URL 'foo}}bar' for attribute 'src' in tag 'AMP-LIST (AMP4EMAIL)' is disallowed. (see https://amp.dev/documentation/components/amp-list)
+amp4email_feature_tests/amp_list.html:191:0 The relative URL 'foo}}bar' for attribute 'src' in tag 'amp-list' is disallowed. (see https://amp.dev/documentation/components/amp-list)
 |    src="foo}}bar">
 |    <template type="amp-mustache">
 |      <div>
@@ -237,7 +237,7 @@ amp4email_feature_tests/amp_list.html:191:0 The relative URL 'foo}}bar' for attr
 |    <template type="amp-mustache">
 |      <a href="{{bar}}{{foo}}">disallowed</a>
 >>     ^~~~~~~~~
-amp4email_feature_tests/amp_list.html:205:4 The attribute 'href' in tag 'A (AMP4EMAIL)' is set to the invalid value '{{bar}}{{foo}}'.
+amp4email_feature_tests/amp_list.html:205:4 The attribute 'href' in tag 'a' is set to the invalid value '{{bar}}{{foo}}'.
 |    </template>
 |  </amp-list>
 |
diff --git a/validator/testdata/amp4email_feature_tests/anchor.html b/validator/testdata/amp4email_feature_tests/anchor.html
index 551520b018b79..7105f67e0f4c3 100644
--- a/validator/testdata/amp4email_feature_tests/anchor.html
+++ b/validator/testdata/amp4email_feature_tests/anchor.html
@@ -18,7 +18,7 @@
   Tests the additional restrictions AMP4EMAIL sets on 'A' tag.
 -->
 <!doctype html>
-<html ⚡4email>
+<html ⚡4email data-css-strict>
 <head>
   <meta charset="utf-8">
   <style amp4email-boilerplate>body{visibility:hidden}</style>
diff --git a/validator/testdata/amp4email_feature_tests/anchor.out b/validator/testdata/amp4email_feature_tests/anchor.out
index 5c5e85c80a6ec..b7600cf6ce040 100644
--- a/validator/testdata/amp4email_feature_tests/anchor.out
+++ b/validator/testdata/amp4email_feature_tests/anchor.out
@@ -19,7 +19,7 @@ FAIL
 |    Tests the additional restrictions AMP4EMAIL sets on 'A' tag.
 |  -->
 |  <!doctype html>
-|  <html ⚡4email>
+|  <html ⚡4email data-css-strict>
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp4email-boilerplate>body{visibility:hidden}</style>
@@ -29,23 +29,23 @@ FAIL
 |    <!-- URLs must be absolute. -->
 |    <a href="somelink.com">disallowed</a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:29:2 The relative URL 'somelink.com' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:29:2 The relative URL 'somelink.com' for attribute 'href' in tag 'a' is disallowed.
 |
 |    <!-- The protocol can only be http, https, mailto or tel. -->
 |    <a href="ftp://somelink.com">disallowed</a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:32:2 Invalid URL protocol 'ftp:' for attribute 'href' in tag 'A (AMP4EMAIL)'.
+amp4email_feature_tests/anchor.html:32:2 Invalid URL protocol 'ftp:' for attribute 'href' in tag 'a'.
 |
 |    <!-- href of anchor is not bindable. -->
 |    <a [href]="evil">disallowed</a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:35:2 The attribute '[href]' may not appear in tag 'A (AMP4EMAIL)'.
+amp4email_feature_tests/anchor.html:35:2 The attribute '[href]' may not appear in tag 'a'.
 |
 |
 |    <!-- This is allowed. -->
 |    <a href="{{allowed}}">allowed</a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:39:2 The relative URL '{{allowed}}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:39:2 The relative URL '{{allowed}}' for attribute 'href' in tag 'a' is disallowed.
 |
 |    <!--
 |      Mustache sections are not allowed in attribute values. This is currently only disallowed
@@ -56,13 +56,13 @@ amp4email_feature_tests/anchor.html:39:2 The relative URL '{{allowed}}' for attr
 |    <!-- These are disallowed -->
 |    <a href="{{#foo}}"></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:48:2 The relative URL '{{#foo}}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:48:2 The relative URL '{{#foo}}' for attribute 'href' in tag 'a' is disallowed.
 |    <a href="{{/foo}}"></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:49:2 The relative URL '{{/foo}}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:49:2 The relative URL '{{/foo}}' for attribute 'href' in tag 'a' is disallowed.
 |    <a href="{{^foo}}"></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:50:2 The relative URL '{{^foo}}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:50:2 The relative URL '{{^foo}}' for attribute 'href' in tag 'a' is disallowed.
 |
 |    <!--
 |      Mustache delimiters must be balanced. This is currently only disallowed
@@ -73,64 +73,64 @@ amp4email_feature_tests/anchor.html:50:2 The relative URL '{{^foo}}' for attribu
 |    <!-- These are disallowed -->
 |    <a href="{{disallowed"></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:59:2 The relative URL '{{disallowed' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:59:2 The relative URL '{{disallowed' for attribute 'href' in tag 'a' is disallowed.
 |    <a href="disallowed}}"></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:60:2 The relative URL 'disallowed}}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:60:2 The relative URL 'disallowed}}' for attribute 'href' in tag 'a' is disallowed.
 |    <a href="}}"></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:61:2 The relative URL '}}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:61:2 The relative URL '}}' for attribute 'href' in tag 'a' is disallowed.
 |    <a href="{{"></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:62:2 The relative URL '{{' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:62:2 The relative URL '{{' for attribute 'href' in tag 'a' is disallowed.
 |
 |    <a href="{{ "></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:64:2 The relative URL '{{ ' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:64:2 The relative URL '{{ ' for attribute 'href' in tag 'a' is disallowed.
 |    <a href=" {{"></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:65:2 The relative URL ' {{' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:65:2 The relative URL ' {{' for attribute 'href' in tag 'a' is disallowed.
 |    <a href=" }}"></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:66:2 The relative URL ' }}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:66:2 The relative URL ' }}' for attribute 'href' in tag 'a' is disallowed.
 |    <a href="}} "></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:67:2 The relative URL '}} ' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:67:2 The relative URL '}} ' for attribute 'href' in tag 'a' is disallowed.
 |
 |    <!-- A combination of mustache tags and text should not calculate href values. -->
 |    <a href="{{bar}}{{foo}}">disallowed</a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:70:2 The relative URL '{{bar}}{{foo}}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:70:2 The relative URL '{{bar}}{{foo}}' for attribute 'href' in tag 'a' is disallowed.
 |    <p id="{{bar}}{{foo}}">allowed</p>
 |
 |    <a href="bar{{foo}}">disallowed</a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:73:2 The relative URL 'bar{{foo}}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:73:2 The relative URL 'bar{{foo}}' for attribute 'href' in tag 'a' is disallowed.
 |    <p id="bar{{foo}}">allowed</p>
 |
 |
 |    <a href="{{foo}}bar">disallowed</a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:77:2 The relative URL '{{foo}}bar' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:77:2 The relative URL '{{foo}}bar' for attribute 'href' in tag 'a' is disallowed.
 |    <p id="{{foo}}bar">allowed</p>
 |
 |    <a href="{{foo}} bar">disallowed</a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:80:2 The relative URL '{{foo}} bar' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:80:2 The relative URL '{{foo}} bar' for attribute 'href' in tag 'a' is disallowed.
 |    <p id="{{foo}} bar">allowed</p>
 |
 |    <a href="bar {{foo}}">disallowed</a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:83:2 The relative URL 'bar {{foo}}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:83:2 The relative URL 'bar {{foo}}' for attribute 'href' in tag 'a' is disallowed.
 |
 |    <a href="{{foo}} ">disallowed</a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:85:2 The relative URL '{{foo}} ' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:85:2 The relative URL '{{foo}} ' for attribute 'href' in tag 'a' is disallowed.
 |    <p id="{{foo}} ">allowed</p>
 |
 |    <a href=" {{foo}}">disallowed</a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:88:2 The relative URL ' {{foo}}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:88:2 The relative URL ' {{foo}}' for attribute 'href' in tag 'a' is disallowed.
 |    <p id=" {{foo}}">allowed</p>
 |
 |    <!-- Mustache delimiters cannot appear in the middle of href's value. -->
@@ -138,10 +138,10 @@ amp4email_feature_tests/anchor.html:88:2 The relative URL ' {{foo}}' for attribu
 |    <!-- These are disallowed. -->
 |    <a href="foo}}bar"></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:94:2 The relative URL 'foo}}bar' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:94:2 The relative URL 'foo}}bar' for attribute 'href' in tag 'a' is disallowed.
 |    <a href="foo{{bar"></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:95:2 The relative URL 'foo{{bar' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:95:2 The relative URL 'foo{{bar' for attribute 'href' in tag 'a' is disallowed.
 |
 |    <!--
 |      All the requirements hold when quotation is
@@ -151,16 +151,16 @@ amp4email_feature_tests/anchor.html:95:2 The relative URL 'foo{{bar' for attribu
 |    <!-- These are disallowed. -->
 |    <a href={{bar}}{{foo}}></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:103:2 The relative URL '{{bar}}{{foo}}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:103:2 The relative URL '{{bar}}{{foo}}' for attribute 'href' in tag 'a' is disallowed.
 |    <a href=bar{{foo}}></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:104:2 The relative URL 'bar{{foo}}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:104:2 The relative URL 'bar{{foo}}' for attribute 'href' in tag 'a' is disallowed.
 |    <a href={{foo}}bar></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:105:2 The relative URL '{{foo}}bar' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:105:2 The relative URL '{{foo}}bar' for attribute 'href' in tag 'a' is disallowed.
 |    <a href={{#foo}}></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:106:2 The relative URL '{{#foo}}' for attribute 'href' in tag 'A (AMP4EMAIL)' is disallowed.
+amp4email_feature_tests/anchor.html:106:2 The relative URL '{{#foo}}' for attribute 'href' in tag 'a' is disallowed.
 |
 |    <!-- These are allowed. -->
 |    <a href="http://www.somelink.com">http allowed</a>
@@ -171,6 +171,6 @@ amp4email_feature_tests/anchor.html:106:2 The relative URL '{{#foo}}' for attrib
 |    <!-- 'name' attribute is deprecated. -->
 |    <a name="protocol"></a>
 >>   ^~~~~~~~~
-amp4email_feature_tests/anchor.html:115:2 The attribute 'name' may not appear in tag 'A (AMP4EMAIL)'.
+amp4email_feature_tests/anchor.html:115:2 The attribute 'name' may not appear in tag 'a'.
 |  </body>
 |  </html>
diff --git a/validator/testdata/amp4email_feature_tests/css.html b/validator/testdata/amp4email_feature_tests/css.html
index 83231e0f11ba8..d2a9142dd3a5e 100644
--- a/validator/testdata/amp4email_feature_tests/css.html
+++ b/validator/testdata/amp4email_feature_tests/css.html
@@ -37,6 +37,9 @@
     .a[otherwisevalid] {}
     .a:otherwiseinvalid {}
     .a::otherwiseinvalid {}
+
+    /* And vendor-prefixes are automatically expanded and allowed */
+    .a { -webkit-margin: 1px; }
   </style>
 </head>
 <body>
diff --git a/validator/testdata/amp4email_feature_tests/css.out b/validator/testdata/amp4email_feature_tests/css.out
index ffba57754c9ba..78dea9dd95a1f 100644
--- a/validator/testdata/amp4email_feature_tests/css.out
+++ b/validator/testdata/amp4email_feature_tests/css.out
@@ -20,6 +20,8 @@ FAIL
 |  -->
 |  <!doctype html>
 |  <html ⚡4email>
+>> ^~~~~~~~~
+amp4email_feature_tests/css.html:21:0 Tag 'html' marked with attribute 'amp4email' is missing the corresponding attribute 'data-css-strict' for enabling strict CSS validation. This may become an error in the future. (see https://github.com/ampproject/amphtml/issues/32587)
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp4email-boilerplate>body{visibility:hidden}</style>
@@ -31,21 +33,24 @@ FAIL
 |      /* all other @ rules are banned */
 |      @supports (display: flex) {}
 >>     ^~~~~~~~~
-amp4email_feature_tests/css.html:31:4 CSS syntax error in tag 'style amp-custom (AMP4EMAIL)' - saw invalid at rule '@supports'.
+amp4email_feature_tests/css.html:31:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@supports'.
 |      @font-face {}
 >>     ^~~~~~~~~
-amp4email_feature_tests/css.html:32:4 CSS syntax error in tag 'style amp-custom (AMP4EMAIL)' - saw invalid at rule '@font-face'.
+amp4email_feature_tests/css.html:32:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@font-face'.
 |      @keyframes slidein {}
 >>     ^~~~~~~~~
-amp4email_feature_tests/css.html:33:4 CSS syntax error in tag 'style amp-custom (AMP4EMAIL)' - saw invalid at rule '@keyframes'.
+amp4email_feature_tests/css.html:33:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@keyframes'.
 |      @invalid {}
 >>     ^~~~~~~~~
-amp4email_feature_tests/css.html:34:4 CSS syntax error in tag 'style amp-custom (AMP4EMAIL)' - saw invalid at rule '@invalid'.
+amp4email_feature_tests/css.html:34:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@invalid'.
 |
 |      /* Unless data-css-strict is specified, there are no rules specified on selelectors. */
 |      .a[otherwisevalid] {}
 |      .a:otherwiseinvalid {}
 |      .a::otherwiseinvalid {}
+|
+|      /* And vendor-prefixes are automatically expanded and allowed */
+|      .a { -webkit-margin: 1px; }
 |    </style>
 |  </head>
 |  <body>
diff --git a/validator/testdata/amp4email_feature_tests/css_declarations.html b/validator/testdata/amp4email_feature_tests/css_declarations.html
index 8e09852a02db2..add701e96fb5d 100644
--- a/validator/testdata/amp4email_feature_tests/css_declarations.html
+++ b/validator/testdata/amp4email_feature_tests/css_declarations.html
@@ -29,6 +29,9 @@
   <style amp-custom>
     /* These declarations don't all make sense, this tests their validity, not the CSS itself. */
     a {
+      -moz-appearance: foo;
+      -webkit-appearance: foo;
+      -webkit-tap-highlight-color: foo;
       align-content: foo;
       align-items: foo;
       align-self: foo;
@@ -43,6 +46,8 @@
       animation-play-state: foo;
       animation-timing-function: foo;
       animation: foo;
+      appearance: foo;
+      azimuth: foo;
       backface-visibility: foo;
       background-attachment: foo;
       background-blend-mode: foo;
@@ -101,6 +106,7 @@
       clip-path: foo;
       clip-rule: foo;
       clip: foo;
+      color-adjust: foo;
       color-interpolation-filters: foo;
       color-interpolation: foo;
       color-profile: foo;
@@ -123,6 +129,7 @@
       direction: foo;
       display: foo;
       dominant-baseline: foo;
+      elevation: foo;
       empty-cells: foo;
       enable-background: foo;
       fill-opacity: foo;
@@ -155,8 +162,10 @@
       font-variant-numeric: foo;
       font-variant-position: foo;
       font-variant: foo;
+      font-variation-settings: foo;
       font-weight: foo;
       font: foo;
+      gap: foo;
       glyph-orientation-horizontal: foo;
       glyph-orientation-vertical: foo;
       grid-area: foo;
@@ -180,9 +189,14 @@
       hanging-punctuation: foo;
       height: foo;
       hyphens: foo;
+      image-orientation: foo;
       image-rendering: foo;
+      image-resolution: foo;
+      inline-size: foo;
       isolation: foo;
       justify-content: foo;
+      justify-items: foo;
+      justify-self: foo;
       kerning: foo;
       left: foo;
       letter-spacing: foo;
@@ -210,6 +224,7 @@
       mix-blend-mode: foo;
       object-fit: foo;
       object-position: foo;
+      offset-distance: foo;
       opacity: foo;
       order: foo;
       orphans: foo;
@@ -230,17 +245,31 @@
       page-break-after: foo;
       page-break-before: foo;
       page-break-inside: foo;
+      pause: foo;
+      pause-after: foo;
+      pause-before: foo;
       perspective-origin: foo;
       perspective: foo;
+      pitch: foo;
+      pitch-range: foo;
+      place-items: foo;
       pointer-events: foo;
       /* position has special rules. Don't use `foo` */
       position: initial;
       quotes: foo;
       resize: foo;
+      richness: foo;
       right: foo;
+      row-gap: foo;
       shape-rendering: foo;
+      speak-header: foo;
+      speak-numeral: foo;
+      speak-punctuation: foo;
+      speak: foo;
+      speech-rate: foo;
       stop-color: foo;
       stop-opacity: foo;
+      stress: foo;
       stroke-dasharray: foo;
       stroke-dashoffset: foo;
       stroke-linecap: foo;
@@ -258,8 +287,13 @@
       text-decoration-color: foo;
       text-decoration-line: foo;
       text-decoration-skip-ink: foo;
+      text-decoration-skip: foo;
       text-decoration-style: foo;
       text-decoration: foo;
+      text-emphasis-color: foo;
+      text-emphasis-position: foo;
+      text-emphasis-style: foo;
+      text-emphasis: foo;
       text-fill-color: foo;
       text-indent: foo;
       text-justify: foo;
@@ -273,6 +307,7 @@
       text-transform: foo;
       text-underline-position: foo;
       top: foo;
+      transform-box: foo;
       transform-origin: foo;
       transform-style: foo;
       transform: foo;
@@ -285,6 +320,7 @@
       user-select: foo;
       vertical-align: foo;
       visibility: foo;
+      voice-family: foo;
       white-space: foo;
       widows: foo;
       width: foo;
@@ -293,19 +329,21 @@
       word-wrap: foo;
       writing-mode: foo;
       z-index: foo;
+      z-index: auto;
+      z-index: -1;
     }
     madeupdecls {
       amplitude: foo;
       barometric-pressure: foo;
       degrees-celsius: foo;
     }
-    vendorprefix {
-      -webkit-user-select: foo;
-    }
   </style>
 </head>
 <body>
 <!-- Test these declaration's validity inside inline style attributes: -->
+<b style="-moz-appearance: foo;"></b>
+<b style="-webkit-appearance: foo;"></b>
+<b style="-webkit-tap-highlight-color: foo;"></b>
 <b style='align-content: foo'></b>
 <b style='align-items: foo'></b>
 <b style='align-self: foo'></b>
@@ -320,6 +358,8 @@
 <b style='animation-play-state: foo'></b>
 <b style='animation-timing-function: foo'></b>
 <b style='animation: foo'></b>
+<b style='appearance: foo'></b>
+<b style='azimuth: foo'></b>
 <b style='backface-visibility: foo'></b>
 <b style='background-attachment: foo'></b>
 <b style='background-blend-mode: foo'></b>
@@ -378,6 +418,7 @@
 <b style='clip-path: foo'></b>
 <b style='clip-rule: foo'></b>
 <b style='clip: foo'></b>
+<b style='color-adjust: foo'></b>
 <b style='color-interpolation-filters: foo'></b>
 <b style='color-interpolation: foo'></b>
 <b style='color-profile: foo'></b>
@@ -396,15 +437,18 @@
 <b style='content: foo'></b>
 <b style='counter-increment: foo'></b>
 <b style='counter-reset: foo'></b>
+<b style='cursor: initial'></b>
 <b style='cursor: foo'></b>
 <b style='direction: foo'></b>
 <b style='display: foo'></b>
 <b style='dominant-baseline: foo'></b>
+<b style='elevation: foo'></b>
 <b style='empty-cells: foo'></b>
 <b style='enable-background: foo'></b>
 <b style='fill-opacity: foo'></b>
 <b style='fill-rule: foo'></b>
 <b style='fill: foo'></b>
+<b style='filter: blur(5px)'></b>
 <b style='filter: foo'></b>
 <b style='flex-basis: foo'></b>
 <b style='flex-direction: foo'></b>
@@ -432,6 +476,7 @@
 <b style='font-variant-numeric: foo'></b>
 <b style='font-variant-position: foo'></b>
 <b style='font-variant: foo'></b>
+<b style='font-variation-settings: foo'></b>
 <b style='font-weight: foo'></b>
 <b style='font: foo'></b>
 <b style='glyph-orientation-horizontal: foo'></b>
@@ -457,9 +502,14 @@
 <b style='hanging-punctuation: foo'></b>
 <b style='height: foo'></b>
 <b style='hyphens: foo'></b>
+<b style='image-orientation: foo'></b>
 <b style='image-rendering: foo'></b>
+<b style='image-resolution: foo'></b>
+<b style='inline-size: foo'></b>
 <b style='isolation: foo'></b>
 <b style='justify-content: foo'></b>
+<b style='justify-items: foo'></b>
+<b style='justify-self: foo'></b>
 <b style='kerning: foo'></b>
 <b style='left: foo'></b>
 <b style='letter-spacing: foo'></b>
@@ -487,6 +537,7 @@
 <b style='mix-blend-mode: foo'></b>
 <b style='object-fit: foo'></b>
 <b style='object-position: foo'></b>
+<b style='offset-distance: foo'></b>
 <b style='opacity: foo'></b>
 <b style='order: foo'></b>
 <b style='orphans: foo'></b>
@@ -507,17 +558,31 @@
 <b style='page-break-after: foo'></b>
 <b style='page-break-before: foo'></b>
 <b style='page-break-inside: foo'></b>
+<b style='pause: foo'></b>
+<b style='pause-after: foo'></b>
+<b style='pause-before: foo'></b>
 <b style='perspective-origin: foo'></b>
 <b style='perspective: foo'></b>
+<b style='pitch: foo'></b>
+<b style='pitch-range: foo'></b>
+<b style='place-items: foo'></b>
 <b style='pointer-events: foo'></b>
 <!-- position has special rules. Don't use `foo` -->
 <b style='position: initial'></b>
 <b style='quotes: foo'></b>
 <b style='resize: foo'></b>
+<b style='richness: foo'></b>
 <b style='right: foo'></b>
+<b style='row-gap: foo'></b>
 <b style='shape-rendering: foo'></b>
+<b style='speak-header: foo'></b>
+<b style='speak-numeral: foo'></b>
+<b style='speak-punctuation: foo'></b>
+<b style='speak: foo'></b>
+<b style='speech-rate: foo'></b>
 <b style='stop-color: foo'></b>
 <b style='stop-opacity: foo'></b>
+<b style='stress: foo'></b>
 <b style='stroke-dasharray: foo'></b>
 <b style='stroke-dashoffset: foo'></b>
 <b style='stroke-linecap: foo'></b>
@@ -535,8 +600,13 @@
 <b style='text-decoration-color: foo'></b>
 <b style='text-decoration-line: foo'></b>
 <b style='text-decoration-skip-ink: foo'></b>
+<b style='text-decoration-skip: foo'></b>
 <b style='text-decoration-style: foo'></b>
 <b style='text-decoration: foo'></b>
+<b style='text-emphasis-color: foo'></b>
+<b style='text-emphasis-position: foo'></b>
+<b style='text-emphasis-style: foo'></b>
+<b style='text-emphasis: foo'></b>
 <b style='text-fill-color: foo'></b>
 <b style='text-indent: foo'></b>
 <b style='text-justify: foo'></b>
@@ -550,18 +620,23 @@
 <b style='text-transform: foo'></b>
 <b style='text-underline-position: foo'></b>
 <b style='top: foo'></b>
+<b style='transform-box: foo'></b>
 <b style='transform-origin: foo'></b>
 <b style='transform-style: foo'></b>
 <b style='transform: foo'></b>
 <b style='transition-delay: foo'></b>
 <b style='transition-duration: foo'></b>
 <b style='transition-property: foo'></b>
+<b style='transition-property: opacity, transform'></b>
 <b style='transition-timing-function: foo'></b>
 <b style='transition: foo'></b>
+<b style='transition: opacity 4s ease-in-out 1s;'></b>
 <b style='unicode-bidi: foo'></b>
 <b style='user-select: foo'></b>
 <b style='vertical-align: foo'></b>
 <b style='visibility: foo'></b>
+<b style='visibility: hidden'></b>
+<b style='voice-family: foo'></b>
 <b style='white-space: foo'></b>
 <b style='widows: foo'></b>
 <b style='width: foo'></b>
@@ -570,11 +645,14 @@
 <b style='word-wrap: foo'></b>
 <b style='writing-mode: foo'></b>
 <b style='z-index: foo'></b>
+<b style='z-index: auto'></b>
+<b style='z-index: 0'></b>
+<b style='z-index: +1'></b>
+<b style='z-index: -10'></b>
+<b style='z-index: -1000'></b>
 <!-- Made-up decls -->
 <b style='amplitude: foo'></b>
 <b style='barometric-pressure: foo'></b>
 <b style='degrees-celsius: foo'></b>
-<!-- Vendor Prefix -->
-<b style="-webkit-user-select: foo;"></b>
 </body>
 </html>
diff --git a/validator/testdata/amp4email_feature_tests/css_declarations.out b/validator/testdata/amp4email_feature_tests/css_declarations.out
index 5f287e131b964..0490d3b8bb7cf 100644
--- a/validator/testdata/amp4email_feature_tests/css_declarations.out
+++ b/validator/testdata/amp4email_feature_tests/css_declarations.out
@@ -1,4 +1,4 @@
-FAIL
+PASS
 |  <!--
 |    Copyright 2020 The AMP HTML Authors. All Rights Reserved.
 |
@@ -23,6 +23,8 @@ FAIL
 |  -->
 |  <!doctype html>
 |  <html ⚡4email>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_declarations.html:24:0 Tag 'html' marked with attribute 'amp4email' is missing the corresponding attribute 'data-css-strict' for enabling strict CSS validation. This may become an error in the future. (see https://github.com/ampproject/amphtml/issues/32587)
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp4email-boilerplate>body{visibility:hidden}</style>
@@ -30,6 +32,9 @@ FAIL
 |    <style amp-custom>
 |      /* These declarations don't all make sense, this tests their validity, not the CSS itself. */
 |      a {
+|        -moz-appearance: foo;
+|        -webkit-appearance: foo;
+|        -webkit-tap-highlight-color: foo;
 |        align-content: foo;
 |        align-items: foo;
 |        align-self: foo;
@@ -44,6 +49,8 @@ FAIL
 |        animation-play-state: foo;
 |        animation-timing-function: foo;
 |        animation: foo;
+|        appearance: foo;
+|        azimuth: foo;
 |        backface-visibility: foo;
 |        background-attachment: foo;
 |        background-blend-mode: foo;
@@ -102,6 +109,7 @@ FAIL
 |        clip-path: foo;
 |        clip-rule: foo;
 |        clip: foo;
+|        color-adjust: foo;
 |        color-interpolation-filters: foo;
 |        color-interpolation: foo;
 |        color-profile: foo;
@@ -124,6 +132,7 @@ FAIL
 |        direction: foo;
 |        display: foo;
 |        dominant-baseline: foo;
+|        elevation: foo;
 |        empty-cells: foo;
 |        enable-background: foo;
 |        fill-opacity: foo;
@@ -156,8 +165,10 @@ FAIL
 |        font-variant-numeric: foo;
 |        font-variant-position: foo;
 |        font-variant: foo;
+|        font-variation-settings: foo;
 |        font-weight: foo;
 |        font: foo;
+|        gap: foo;
 |        glyph-orientation-horizontal: foo;
 |        glyph-orientation-vertical: foo;
 |        grid-area: foo;
@@ -181,9 +192,14 @@ FAIL
 |        hanging-punctuation: foo;
 |        height: foo;
 |        hyphens: foo;
+|        image-orientation: foo;
 |        image-rendering: foo;
+|        image-resolution: foo;
+|        inline-size: foo;
 |        isolation: foo;
 |        justify-content: foo;
+|        justify-items: foo;
+|        justify-self: foo;
 |        kerning: foo;
 |        left: foo;
 |        letter-spacing: foo;
@@ -211,6 +227,7 @@ FAIL
 |        mix-blend-mode: foo;
 |        object-fit: foo;
 |        object-position: foo;
+|        offset-distance: foo;
 |        opacity: foo;
 |        order: foo;
 |        orphans: foo;
@@ -231,17 +248,31 @@ FAIL
 |        page-break-after: foo;
 |        page-break-before: foo;
 |        page-break-inside: foo;
+|        pause: foo;
+|        pause-after: foo;
+|        pause-before: foo;
 |        perspective-origin: foo;
 |        perspective: foo;
+|        pitch: foo;
+|        pitch-range: foo;
+|        place-items: foo;
 |        pointer-events: foo;
 |        /* position has special rules. Don't use `foo` */
 |        position: initial;
 |        quotes: foo;
 |        resize: foo;
+|        richness: foo;
 |        right: foo;
+|        row-gap: foo;
 |        shape-rendering: foo;
+|        speak-header: foo;
+|        speak-numeral: foo;
+|        speak-punctuation: foo;
+|        speak: foo;
+|        speech-rate: foo;
 |        stop-color: foo;
 |        stop-opacity: foo;
+|        stress: foo;
 |        stroke-dasharray: foo;
 |        stroke-dashoffset: foo;
 |        stroke-linecap: foo;
@@ -259,8 +290,13 @@ FAIL
 |        text-decoration-color: foo;
 |        text-decoration-line: foo;
 |        text-decoration-skip-ink: foo;
+|        text-decoration-skip: foo;
 |        text-decoration-style: foo;
 |        text-decoration: foo;
+|        text-emphasis-color: foo;
+|        text-emphasis-position: foo;
+|        text-emphasis-style: foo;
+|        text-emphasis: foo;
 |        text-fill-color: foo;
 |        text-indent: foo;
 |        text-justify: foo;
@@ -274,6 +310,7 @@ FAIL
 |        text-transform: foo;
 |        text-underline-position: foo;
 |        top: foo;
+|        transform-box: foo;
 |        transform-origin: foo;
 |        transform-style: foo;
 |        transform: foo;
@@ -286,6 +323,7 @@ FAIL
 |        user-select: foo;
 |        vertical-align: foo;
 |        visibility: foo;
+|        voice-family: foo;
 |        white-space: foo;
 |        widows: foo;
 |        width: foo;
@@ -294,25 +332,25 @@ FAIL
 |        word-wrap: foo;
 |        writing-mode: foo;
 |        z-index: foo;
+|        z-index: auto;
+|        z-index: -1;
 |      }
 |      madeupdecls {
 |        amplitude: foo;
 |        barometric-pressure: foo;
 |        degrees-celsius: foo;
 |      }
-|      vendorprefix {
-|        -webkit-user-select: foo;
-|      }
 |    </style>
 |  </head>
 |  <body>
 |  <!-- Test these declaration's validity inside inline style attributes: -->
+|  <b style="-moz-appearance: foo;"></b>
+|  <b style="-webkit-appearance: foo;"></b>
+|  <b style="-webkit-tap-highlight-color: foo;"></b>
 |  <b style='align-content: foo'></b>
 |  <b style='align-items: foo'></b>
 |  <b style='align-self: foo'></b>
 |  <b style='alignment-baseline: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:312:0 The property 'alignment-baseline' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='all: foo'></b>
 |  <b style='animation-delay: foo'></b>
 |  <b style='animation-direction: foo'></b>
@@ -323,6 +361,8 @@ amp4email_feature_tests/css_declarations.html:312:0 The property 'alignment-base
 |  <b style='animation-play-state: foo'></b>
 |  <b style='animation-timing-function: foo'></b>
 |  <b style='animation: foo'></b>
+|  <b style='appearance: foo'></b>
+|  <b style='azimuth: foo'></b>
 |  <b style='backface-visibility: foo'></b>
 |  <b style='background-attachment: foo'></b>
 |  <b style='background-blend-mode: foo'></b>
@@ -335,8 +375,6 @@ amp4email_feature_tests/css_declarations.html:312:0 The property 'alignment-base
 |  <b style='background-size: foo'></b>
 |  <b style='background: foo'></b>
 |  <b style='baseline-shift: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:334:0 The property 'baseline-shift' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='border-bottom-color: foo'></b>
 |  <b style='border-bottom-left-radius: foo'></b>
 |  <b style='border-bottom-right-radius: foo'></b>
@@ -381,24 +419,13 @@ amp4email_feature_tests/css_declarations.html:334:0 The property 'baseline-shift
 |  <b style='caret-color: foo'></b>
 |  <b style='clear: foo'></b>
 |  <b style='clip-path: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:378:0 The property 'clip-path' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='clip-rule: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:379:0 The property 'clip-rule' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='clip: foo'></b>
+|  <b style='color-adjust: foo'></b>
 |  <b style='color-interpolation-filters: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:381:0 The property 'color-interpolation-filters' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='color-interpolation: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:382:0 The property 'color-interpolation' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='color-profile: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:383:0 The property 'color-profile' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='color-rendering: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:384:0 The property 'color-rendering' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='color: foo'></b>
 |  <b style='column-count: foo'></b>
 |  <b style='column-fill: foo'></b>
@@ -413,25 +440,18 @@ amp4email_feature_tests/css_declarations.html:384:0 The property 'color-renderin
 |  <b style='content: foo'></b>
 |  <b style='counter-increment: foo'></b>
 |  <b style='counter-reset: foo'></b>
+|  <b style='cursor: initial'></b>
 |  <b style='cursor: foo'></b>
 |  <b style='direction: foo'></b>
 |  <b style='display: foo'></b>
 |  <b style='dominant-baseline: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:402:0 The property 'dominant-baseline' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
+|  <b style='elevation: foo'></b>
 |  <b style='empty-cells: foo'></b>
 |  <b style='enable-background: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:404:0 The property 'enable-background' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='fill-opacity: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:405:0 The property 'fill-opacity' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='fill-rule: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:406:0 The property 'fill-rule' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='fill: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:407:0 The property 'fill' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
+|  <b style='filter: blur(5px)'></b>
 |  <b style='filter: foo'></b>
 |  <b style='flex-basis: foo'></b>
 |  <b style='flex-direction: foo'></b>
@@ -442,11 +462,7 @@ amp4email_feature_tests/css_declarations.html:407:0 The property 'fill' in attri
 |  <b style='flex: foo'></b>
 |  <b style='float: foo'></b>
 |  <b style='flood-color: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:417:0 The property 'flood-color' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='flood-opacity: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:418:0 The property 'flood-opacity' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='font-family: foo'></b>
 |  <b style='font-feature-settings: foo'></b>
 |  <b style='font-kerning: foo'></b>
@@ -463,14 +479,11 @@ amp4email_feature_tests/css_declarations.html:418:0 The property 'flood-opacity'
 |  <b style='font-variant-numeric: foo'></b>
 |  <b style='font-variant-position: foo'></b>
 |  <b style='font-variant: foo'></b>
+|  <b style='font-variation-settings: foo'></b>
 |  <b style='font-weight: foo'></b>
 |  <b style='font: foo'></b>
 |  <b style='glyph-orientation-horizontal: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:437:0 The property 'glyph-orientation-horizontal' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='glyph-orientation-vertical: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:438:0 The property 'glyph-orientation-vertical' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='grid-area: foo'></b>
 |  <b style='grid-auto-columns: foo'></b>
 |  <b style='grid-auto-flow: foo'></b>
@@ -492,17 +505,18 @@ amp4email_feature_tests/css_declarations.html:438:0 The property 'glyph-orientat
 |  <b style='hanging-punctuation: foo'></b>
 |  <b style='height: foo'></b>
 |  <b style='hyphens: foo'></b>
+|  <b style='image-orientation: foo'></b>
 |  <b style='image-rendering: foo'></b>
+|  <b style='image-resolution: foo'></b>
+|  <b style='inline-size: foo'></b>
 |  <b style='isolation: foo'></b>
 |  <b style='justify-content: foo'></b>
+|  <b style='justify-items: foo'></b>
+|  <b style='justify-self: foo'></b>
 |  <b style='kerning: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:463:0 The property 'kerning' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='left: foo'></b>
 |  <b style='letter-spacing: foo'></b>
 |  <b style='lighting-color: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:466:0 The property 'lighting-color' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='line-break: foo'></b>
 |  <b style='line-height: foo'></b>
 |  <b style='list-style-image: foo'></b>
@@ -515,20 +529,10 @@ amp4email_feature_tests/css_declarations.html:466:0 The property 'lighting-color
 |  <b style='margin-top: foo'></b>
 |  <b style='margin: foo'></b>
 |  <b style='marker-end: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:478:0 The property 'marker-end' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='marker-mid: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:479:0 The property 'marker-mid' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='marker-start: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:480:0 The property 'marker-start' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='marker: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:481:0 The property 'marker' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='mask: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:482:0 The property 'mask' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='max-height: foo'></b>
 |  <b style='max-width: foo'></b>
 |  <b style='min-height: foo'></b>
@@ -536,6 +540,7 @@ amp4email_feature_tests/css_declarations.html:482:0 The property 'mask' in attri
 |  <b style='mix-blend-mode: foo'></b>
 |  <b style='object-fit: foo'></b>
 |  <b style='object-position: foo'></b>
+|  <b style='offset-distance: foo'></b>
 |  <b style='opacity: foo'></b>
 |  <b style='order: foo'></b>
 |  <b style='orphans: foo'></b>
@@ -556,68 +561,61 @@ amp4email_feature_tests/css_declarations.html:482:0 The property 'mask' in attri
 |  <b style='page-break-after: foo'></b>
 |  <b style='page-break-before: foo'></b>
 |  <b style='page-break-inside: foo'></b>
+|  <b style='pause: foo'></b>
+|  <b style='pause-after: foo'></b>
+|  <b style='pause-before: foo'></b>
 |  <b style='perspective-origin: foo'></b>
 |  <b style='perspective: foo'></b>
+|  <b style='pitch: foo'></b>
+|  <b style='pitch-range: foo'></b>
+|  <b style='place-items: foo'></b>
 |  <b style='pointer-events: foo'></b>
 |  <!-- position has special rules. Don't use `foo` -->
 |  <b style='position: initial'></b>
 |  <b style='quotes: foo'></b>
 |  <b style='resize: foo'></b>
+|  <b style='richness: foo'></b>
 |  <b style='right: foo'></b>
+|  <b style='row-gap: foo'></b>
 |  <b style='shape-rendering: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:518:0 The property 'shape-rendering' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
+|  <b style='speak-header: foo'></b>
+|  <b style='speak-numeral: foo'></b>
+|  <b style='speak-punctuation: foo'></b>
+|  <b style='speak: foo'></b>
+|  <b style='speech-rate: foo'></b>
 |  <b style='stop-color: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:519:0 The property 'stop-color' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stop-opacity: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:520:0 The property 'stop-opacity' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
+|  <b style='stress: foo'></b>
 |  <b style='stroke-dasharray: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:521:0 The property 'stroke-dasharray' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke-dashoffset: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:522:0 The property 'stroke-dashoffset' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke-linecap: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:523:0 The property 'stroke-linecap' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke-linejoin: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:524:0 The property 'stroke-linejoin' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke-miterlimit: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:525:0 The property 'stroke-miterlimit' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke-opacity: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:526:0 The property 'stroke-opacity' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke-width: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:527:0 The property 'stroke-width' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:528:0 The property 'stroke' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='tab-size: foo'></b>
 |  <b style='table-layout: foo'></b>
 |  <b style='text-align-last: foo'></b>
 |  <b style='text-align: foo'></b>
 |  <b style='text-anchor: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:533:0 The property 'text-anchor' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='text-combine-upright: foo'></b>
 |  <b style='text-decoration-color: foo'></b>
 |  <b style='text-decoration-line: foo'></b>
 |  <b style='text-decoration-skip-ink: foo'></b>
+|  <b style='text-decoration-skip: foo'></b>
 |  <b style='text-decoration-style: foo'></b>
 |  <b style='text-decoration: foo'></b>
+|  <b style='text-emphasis-color: foo'></b>
+|  <b style='text-emphasis-position: foo'></b>
+|  <b style='text-emphasis-style: foo'></b>
+|  <b style='text-emphasis: foo'></b>
 |  <b style='text-fill-color: foo'></b>
 |  <b style='text-indent: foo'></b>
 |  <b style='text-justify: foo'></b>
 |  <b style='text-orientation: foo'></b>
 |  <b style='text-overflow: foo'></b>
 |  <b style='text-rendering: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:545:0 The property 'text-rendering' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='text-shadow: foo'></b>
 |  <b style='text-stroke-color: foo'></b>
 |  <b style='text-stroke-width: foo'></b>
@@ -625,18 +623,23 @@ amp4email_feature_tests/css_declarations.html:545:0 The property 'text-rendering
 |  <b style='text-transform: foo'></b>
 |  <b style='text-underline-position: foo'></b>
 |  <b style='top: foo'></b>
+|  <b style='transform-box: foo'></b>
 |  <b style='transform-origin: foo'></b>
 |  <b style='transform-style: foo'></b>
 |  <b style='transform: foo'></b>
 |  <b style='transition-delay: foo'></b>
 |  <b style='transition-duration: foo'></b>
 |  <b style='transition-property: foo'></b>
+|  <b style='transition-property: opacity, transform'></b>
 |  <b style='transition-timing-function: foo'></b>
 |  <b style='transition: foo'></b>
+|  <b style='transition: opacity 4s ease-in-out 1s;'></b>
 |  <b style='unicode-bidi: foo'></b>
 |  <b style='user-select: foo'></b>
 |  <b style='vertical-align: foo'></b>
 |  <b style='visibility: foo'></b>
+|  <b style='visibility: hidden'></b>
+|  <b style='voice-family: foo'></b>
 |  <b style='white-space: foo'></b>
 |  <b style='widows: foo'></b>
 |  <b style='width: foo'></b>
@@ -645,17 +648,14 @@ amp4email_feature_tests/css_declarations.html:545:0 The property 'text-rendering
 |  <b style='word-wrap: foo'></b>
 |  <b style='writing-mode: foo'></b>
 |  <b style='z-index: foo'></b>
+|  <b style='z-index: auto'></b>
+|  <b style='z-index: 0'></b>
+|  <b style='z-index: +1'></b>
+|  <b style='z-index: -10'></b>
+|  <b style='z-index: -1000'></b>
 |  <!-- Made-up decls -->
 |  <b style='amplitude: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:574:0 The property 'amplitude' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='barometric-pressure: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:575:0 The property 'barometric-pressure' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='degrees-celsius: foo'></b>
->> ^~~~~~~~~
-amp4email_feature_tests/css_declarations.html:576:0 The property 'degrees-celsius' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
-|  <!-- Vendor Prefix -->
-|  <b style="-webkit-user-select: foo;"></b>
 |  </body>
 |  </html>
diff --git a/validator/testdata/amp4email_feature_tests/css_i_amphtml.html b/validator/testdata/amp4email_feature_tests/css_i_amphtml.html
new file mode 100644
index 0000000000000..4424515780650
--- /dev/null
+++ b/validator/testdata/amp4email_feature_tests/css_i_amphtml.html
@@ -0,0 +1,38 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for excluded `i-amphtml` in the author stylesheet and inline style.
+-->
+<!doctype html>
+<html ⚡4email data-css-strict>
+<head>
+  <meta charset="utf-8">
+  <style amp4email-boilerplate>body{visibility:hidden}</style>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <style amp-custom>
+    i-amphtml-sizer {}
+    .i-amphtml-hidden {}
+    #i-amphtml-wrapper {}
+    .foo-i-amphtml { color: var(--i-amphtml-clr); }
+  </style>
+</head>
+<body>
+  Hello, world.
+  <div style="i-amphtml-hidden: none;"></div>
+  <div style="--i-amphtml-clr: #ccc;"></div>
+</body>
+</html>
diff --git a/validator/testdata/amp4email_feature_tests/css_i_amphtml.out b/validator/testdata/amp4email_feature_tests/css_i_amphtml.out
new file mode 100644
index 0000000000000..f4fcd01a7cdef
--- /dev/null
+++ b/validator/testdata/amp4email_feature_tests/css_i_amphtml.out
@@ -0,0 +1,47 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for excluded `i-amphtml` in the author stylesheet and inline style.
+|  -->
+|  <!doctype html>
+|  <html ⚡4email data-css-strict>
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp4email-boilerplate>body{visibility:hidden}</style>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <style amp-custom>
+>>   ^~~~~~~~~
+amp4email_feature_tests/css_i_amphtml.html:26:2 The text inside tag 'style amp-custom' contains 'CSS i-amphtml- name prefix', which is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|      i-amphtml-sizer {}
+|      .i-amphtml-hidden {}
+|      #i-amphtml-wrapper {}
+|      .foo-i-amphtml { color: var(--i-amphtml-clr); }
+|    </style>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_i_amphtml.html:31:0 CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
+|  </head>
+|  <body>
+|    Hello, world.
+|    <div style="i-amphtml-hidden: none;"></div>
+>>   ^~~~~~~~~
+amp4email_feature_tests/css_i_amphtml.html:35:2 The property 'i-amphtml-hidden' in attribute 'style' in tag 'div' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|    <div style="--i-amphtml-clr: #ccc;"></div>
+>>   ^~~~~~~~~
+amp4email_feature_tests/css_i_amphtml.html:36:2 The property '--i-amphtml-clr' in attribute 'style' in tag 'div' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  </body>
+|  </html>
diff --git a/validator/testdata/amp4email_feature_tests/css_length.out b/validator/testdata/amp4email_feature_tests/css_length.out
index 43782637e713a..2c67223d6d3f1 100644
--- a/validator/testdata/amp4email_feature_tests/css_length.out
+++ b/validator/testdata/amp4email_feature_tests/css_length.out
@@ -22,6 +22,8 @@ PASS
 |  -->
 |  <!doctype html>
 |  <html ⚡4email>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_length.html:23:0 Tag 'html' marked with attribute 'amp4email' is missing the corresponding attribute 'data-css-strict' for enabling strict CSS validation. This may become an error in the future. (see https://github.com/ampproject/amphtml/issues/32587)
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp4email-boilerplate>body{visibility:hidden}</style>
diff --git a/validator/testdata/amp4email_feature_tests/css_length_strict.html b/validator/testdata/amp4email_feature_tests/css_length_strict.html
new file mode 100644
index 0000000000000..db0b4fd04b0de
--- /dev/null
+++ b/validator/testdata/amp4email_feature_tests/css_length_strict.html
@@ -0,0 +1,34 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This testcase isn't run verbatim. The template string below is replaced by
+  the test harnesses with various lengths of valid CSS stylesheets. We use
+  this test to verify the max_byte_length rules for CSS author stylesheets.
+-->
+<!doctype html>
+<html ⚡4email data-css-strict>
+<head>
+  <meta charset="utf-8">
+  <style amp4email-boilerplate>body{visibility:hidden}</style>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <style amp-custom>.replace_amp_custom {}</style>
+</head>
+<body>
+  Hello, world.
+  replace_inline_style
+</body>
+</html>
diff --git a/validator/testdata/amp4email_feature_tests/css_length_strict.out b/validator/testdata/amp4email_feature_tests/css_length_strict.out
new file mode 100644
index 0000000000000..5b9c12e896a39
--- /dev/null
+++ b/validator/testdata/amp4email_feature_tests/css_length_strict.out
@@ -0,0 +1,35 @@
+PASS
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This testcase isn't run verbatim. The template string below is replaced by
+|    the test harnesses with various lengths of valid CSS stylesheets. We use
+|    this test to verify the max_byte_length rules for CSS author stylesheets.
+|  -->
+|  <!doctype html>
+|  <html ⚡4email data-css-strict>
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp4email-boilerplate>body{visibility:hidden}</style>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <style amp-custom>.replace_amp_custom {}</style>
+|  </head>
+|  <body>
+|    Hello, world.
+|    replace_inline_style
+|  </body>
+|  </html>
diff --git a/validator/testdata/amp4email_feature_tests/css_strict.html b/validator/testdata/amp4email_feature_tests/css_strict.html
index 19e4850cb560e..47b9d768c2efa 100644
--- a/validator/testdata/amp4email_feature_tests/css_strict.html
+++ b/validator/testdata/amp4email_feature_tests/css_strict.html
@@ -24,19 +24,349 @@
   <style amp4email-boilerplate>body{visibility:hidden}</style>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <style amp-custom>
-    /* media queries are allowed */
+    /* These declarations don't all make sense, this tests their validity, not the CSS itself. */
+    a {
+      -moz-appearance: foo;
+      -webkit-appearance: foo;
+      -webkit-tap-highlight-color: foo;
+      align-content: foo;
+      align-items: foo;
+      align-self: foo;
+      alignment-baseline: foo;
+      all: foo;
+      animation-delay: foo;
+      animation-direction: foo;
+      animation-duration: foo;
+      animation-fill-mode: foo;
+      animation-iteration-count: foo;
+      animation-name: foo;
+      animation-play-state: foo;
+      animation-timing-function: foo;
+      animation: foo;
+      appearance: foo;
+      azimuth: foo;
+      backface-visibility: foo;
+      background-attachment: foo;
+      background-blend-mode: foo;
+      background-clip: foo;
+      background-color: foo;
+      background-image: foo;
+      background-origin: foo;
+      background-position: foo;
+      background-repeat: foo;
+      background-size: foo;
+      background: foo;
+      baseline-shift: foo;
+      border-bottom-color: foo;
+      border-bottom-left-radius: foo;
+      border-bottom-right-radius: foo;
+      border-bottom-style: foo;
+      border-bottom-width: foo;
+      border-bottom: foo;
+      border-collapse: foo;
+      border-color: foo;
+      border-image-outset: foo;
+      border-image-repeat: foo;
+      border-image-slice: foo;
+      border-image-source: foo;
+      border-image-width: foo;
+      border-image: foo;
+      border-left-color: foo;
+      border-left-style: foo;
+      border-left-width: foo;
+      border-left: foo;
+      border-radius: foo;
+      border-right-color: foo;
+      border-right-style: foo;
+      border-right-width: foo;
+      border-right: foo;
+      border-spacing: foo;
+      border-style: foo;
+      border-top-color: foo;
+      border-top-left-radius: foo;
+      border-top-right-radius: foo;
+      border-top-style: foo;
+      border-top-width: foo;
+      border-top: foo;
+      border-width: foo;
+      border: foo;
+      bottom: foo;
+      box-decoration-break: foo;
+      box-shadow: foo;
+      box-sizing: foo;
+      break-after: foo;
+      break-before: foo;
+      break-inside: foo;
+      caption-side: foo;
+      caret-color: foo;
+      clear: foo;
+      clip-path: foo;
+      clip-rule: foo;
+      clip: foo;
+      color-adjust: foo;
+      color-interpolation-filters: foo;
+      color-interpolation: foo;
+      color-profile: foo;
+      color-rendering: foo;
+      color: foo;
+      column-count: foo;
+      column-fill: foo;
+      column-gap: foo;
+      column-rule-color: foo;
+      column-rule-style: foo;
+      column-rule-width: foo;
+      column-rule: foo;
+      column-span: foo;
+      column-width: foo;
+      columns: foo;
+      content: foo;
+      counter-increment: foo;
+      counter-reset: foo;
+      cursor: foo;
+      direction: foo;
+      display: foo;
+      dominant-baseline: foo;
+      elevation: foo;
+      empty-cells: foo;
+      enable-background: foo;
+      fill-opacity: foo;
+      fill-rule: foo;
+      fill: foo;
+      filter: foo;
+      flex-basis: foo;
+      flex-direction: foo;
+      flex-flow: foo;
+      flex-grow: foo;
+      flex-shrink: foo;
+      flex-wrap: foo;
+      flex: foo;
+      float: foo;
+      flood-color: foo;
+      flood-opacity: foo;
+      font-family: foo;
+      font-feature-settings: foo;
+      font-kerning: foo;
+      font-language-override: foo;
+      font-size-adjust: foo;
+      font-size: foo;
+      font-stretch: foo;
+      font-style: foo;
+      font-synthesis: foo;
+      font-variant-alternates: foo;
+      font-variant-caps: foo;
+      font-variant-east-asian: foo;
+      font-variant-ligatures: foo;
+      font-variant-numeric: foo;
+      font-variant-position: foo;
+      font-variant: foo;
+      font-variation-settings: foo;
+      font-weight: foo;
+      font: foo;
+      gap: foo;
+      glyph-orientation-horizontal: foo;
+      glyph-orientation-vertical: foo;
+      grid-area: foo;
+      grid-auto-columns: foo;
+      grid-auto-flow: foo;
+      grid-auto-rows: foo;
+      grid-column-end: foo;
+      grid-column-gap: foo;
+      grid-column-start: foo;
+      grid-column: foo;
+      grid-gap: foo;
+      grid-row-end: foo;
+      grid-row-gap: foo;
+      grid-row-start: foo;
+      grid-row: foo;
+      grid-template-areas: foo;
+      grid-template-columns: foo;
+      grid-template-rows: foo;
+      grid-template: foo;
+      grid: foo;
+      hanging-punctuation: foo;
+      height: foo;
+      hyphens: foo;
+      image-orientation: foo;
+      image-rendering: foo;
+      image-resolution: foo;
+      inline-size: foo;
+      isolation: foo;
+      justify-content: foo;
+      justify-items: foo;
+      justify-self: foo;
+      kerning: foo;
+      left: foo;
+      letter-spacing: foo;
+      lighting-color: foo;
+      line-break: foo;
+      line-height: foo;
+      list-style-image: foo;
+      list-style-position: foo;
+      list-style-type: foo;
+      list-style: foo;
+      margin-bottom: foo;
+      margin-left: foo;
+      margin-right: foo;
+      margin-top: foo;
+      margin: foo;
+      marker-end: foo;
+      marker-mid: foo;
+      marker-start: foo;
+      marker: foo;
+      mask: foo;
+      max-height: foo;
+      max-width: foo;
+      min-height: foo;
+      min-width: foo;
+      mix-blend-mode: foo;
+      object-fit: foo;
+      object-position: foo;
+      offset-distance: foo;
+      opacity: foo;
+      order: foo;
+      orphans: foo;
+      outline-color: foo;
+      outline-offset: foo;
+      outline-style: foo;
+      outline-width: foo;
+      outline: foo;
+      overflow-wrap: foo;
+      overflow-x: foo;
+      overflow-y: foo;
+      overflow: foo;
+      padding-bottom: foo;
+      padding-left: foo;
+      padding-right: foo;
+      padding-top: foo;
+      padding: foo;
+      page-break-after: foo;
+      page-break-before: foo;
+      page-break-inside: foo;
+      pause: foo;
+      pause-after: foo;
+      pause-before: foo;
+      perspective-origin: foo;
+      perspective: foo;
+      pitch: foo;
+      pitch-range: foo;
+      place-items: foo;
+      pointer-events: foo;
+      /* position has special rules. Don't use `foo` */
+      position: initial;
+      quotes: foo;
+      resize: foo;
+      richness: foo;
+      right: foo;
+      row-gap: foo;
+      shape-rendering: foo;
+      speak-header: foo;
+      speak-numeral: foo;
+      speak-punctuation: foo;
+      speak: foo;
+      speech-rate: foo;
+      stop-color: foo;
+      stop-opacity: foo;
+      stress: foo;
+      stroke-dasharray: foo;
+      stroke-dashoffset: foo;
+      stroke-linecap: foo;
+      stroke-linejoin: foo;
+      stroke-miterlimit: foo;
+      stroke-opacity: foo;
+      stroke-width: foo;
+      stroke: foo;
+      tab-size: foo;
+      table-layout: foo;
+      text-align-last: foo;
+      text-align: foo;
+      text-anchor: foo;
+      text-combine-upright: foo;
+      text-decoration-color: foo;
+      text-decoration-line: foo;
+      text-decoration-skip-ink: foo;
+      text-decoration-skip: foo;
+      text-decoration-style: foo;
+      text-decoration: foo;
+      text-emphasis-color: foo;
+      text-emphasis-position: foo;
+      text-emphasis-style: foo;
+      text-emphasis: foo;
+      text-fill-color: foo;
+      text-indent: foo;
+      text-justify: foo;
+      text-orientation: foo;
+      text-overflow: foo;
+      text-rendering: foo;
+      text-shadow: foo;
+      text-stroke-color: foo;
+      text-stroke-width: foo;
+      text-stroke: foo;
+      text-transform: foo;
+      text-underline-position: foo;
+      top: foo;
+      transform-box: foo;
+      transform-origin: foo;
+      transform-style: foo;
+      transform: foo;
+      transition-delay: foo;
+      transition-duration: foo;
+      transition-property: foo;
+      transition-timing-function: foo;
+      transition: foo;
+      unicode-bidi: foo;
+      user-select: foo;
+      vertical-align: foo;
+      visibility: foo;
+      voice-family: foo;
+      white-space: foo;
+      widows: foo;
+      width: foo;
+      word-break: foo;
+      word-spacing: foo;
+      word-wrap: foo;
+      writing-mode: foo;
+      z-index: foo;
+      z-index: auto;
+      z-index: -1;
+    }
+    madeupdecls {
+      amplitude: foo;
+      barometric-pressure: foo;
+      degrees-celsius: foo;
+    }
+    /* valid media queries */
+    @media all {}
     @media screen {}
+    @media (device-width: foo) {}
+    @media (hover: foo) {}
+    @media (max-device-width: foo) {}
+    @media (max-resolution: foo) {}
+    @media (max-width: foo) {}
+    @media (min-device-width: foo) {}
+    @media (min-resolution: foo) {}
+    @media (min-width: foo) {}
+    @media (orientation: foo) {}
+    @media (pointer: foo) {}
+    @media (resolution: foo) {}
+    @media (width: foo) {}
+
+    /* invalid media queries */
+    @media invalid {}
+    @media (invalid: foo) {}
 
     /* all other @ rules are banned */
     @supports (display: flex) {}
     @font-face {}
     @keyframes slidein {}
-    @invalid {}
+    @notvalid {}
+    @page {}
 
     /* Since data-css-strict is specified, we apply selector rules. */
-    .a[invalid] {}
-    .a:invalid {}
-    .a::invalid {}
+    .a[notvalid] {}
+    .a:notvalid {}
+    .a::notvalid {}
+    :notvalid {}
+    .a[id]:notvalid {}
 
     .a[active] {}
     .a[alt] {}
@@ -76,9 +406,373 @@
     .a[type] {}
     .a[value] {}
     .a[width] {}
+    .a:active {}
+    .a:checked {}
+    .a:default {}
+    .a:disabled {}
+    .a:empty {}
+    .a:enabled {}
+    .a:first-child {}
+    .a:first-of-type {}
+    .a:focus-within {}
+    .a:hover {}
+    .a:in-range {}
+    .a:indeterminate {}
+    .a:invalid {}
+    .a:last-child {}
+    .a:last-of-type {}
+    .a:not {}
+    .a:nth-child {}
+    .a:nth-last-child {}
+    .a:nth-last-of-type {}
+    .a:nth-of-type {}
+    .a:only-child {}
+    .a:only-of-type {}
+    .a:optional {}
+    .a:out-of-range {}
+    .a:read-only {}
+    .a:read-write {}
+    .a:required {}
+    .a:valid {}
+
+    /* Vendor prefixes are not automatically expanded */
+    .a { margin: 1px; }
+    .a { -webkit-margin: 1px; }
+
+    /* Three specific prefixes are explicitly allowlisted */
+    .a {
+      -moz-appearance: foo;
+      -webkit-appearance: foo;
+      -webkit-tap-highlight-color: foo;
+    }
+
+    /* Not all properties are automatically allowed */
+    .a { invalid: 1px; }
+
+    /* Some properties are allowed, but only certain values */
+    .a { position: absolute; }
+    .a { position: invalid; }
+    .a { z-index: -1; }
+    .a { z-index: invalid; }
+
+    /* Important is not allowed */
+    .a { color: red !important; }
   </style>
 </head>
 <body>
-Test body.
+<!-- Test these declaration's validity inside inline style attributes: -->
+<b style="-moz-appearance: foo;"></b>
+<b style="-webkit-appearance: foo;"></b>
+<b style="-webkit-tap-highlight-color: foo;"></b>
+<b style='align-content: foo'></b>
+<b style='align-items: foo'></b>
+<b style='align-self: foo'></b>
+<b style='alignment-baseline: foo'></b>
+<b style='all: foo'></b>
+<b style='animation-delay: foo'></b>
+<b style='animation-direction: foo'></b>
+<b style='animation-duration: foo'></b>
+<b style='animation-fill-mode: foo'></b>
+<b style='animation-iteration-count: foo'></b>
+<b style='animation-name: foo'></b>
+<b style='animation-play-state: foo'></b>
+<b style='animation-timing-function: foo'></b>
+<b style='animation: foo'></b>
+<b style='appearance: foo'></b>
+<b style='azimuth: foo'></b>
+<b style='backface-visibility: foo'></b>
+<b style='background-attachment: foo'></b>
+<b style='background-blend-mode: foo'></b>
+<b style='background-clip: foo'></b>
+<b style='background-color: foo'></b>
+<b style='background-image: foo'></b>
+<b style='background-origin: foo'></b>
+<b style='background-position: foo'></b>
+<b style='background-repeat: foo'></b>
+<b style='background-size: foo'></b>
+<b style='background: foo'></b>
+<b style='baseline-shift: foo'></b>
+<b style='border-bottom-color: foo'></b>
+<b style='border-bottom-left-radius: foo'></b>
+<b style='border-bottom-right-radius: foo'></b>
+<b style='border-bottom-style: foo'></b>
+<b style='border-bottom-width: foo'></b>
+<b style='border-bottom: foo'></b>
+<b style='border-collapse: foo'></b>
+<b style='border-color: foo'></b>
+<b style='border-image-outset: foo'></b>
+<b style='border-image-repeat: foo'></b>
+<b style='border-image-slice: foo'></b>
+<b style='border-image-source: foo'></b>
+<b style='border-image-width: foo'></b>
+<b style='border-image: foo'></b>
+<b style='border-left-color: foo'></b>
+<b style='border-left-style: foo'></b>
+<b style='border-left-width: foo'></b>
+<b style='border-left: foo'></b>
+<b style='border-radius: foo'></b>
+<b style='border-right-color: foo'></b>
+<b style='border-right-style: foo'></b>
+<b style='border-right-width: foo'></b>
+<b style='border-right: foo'></b>
+<b style='border-spacing: foo'></b>
+<b style='border-style: foo'></b>
+<b style='border-top-color: foo'></b>
+<b style='border-top-left-radius: foo'></b>
+<b style='border-top-right-radius: foo'></b>
+<b style='border-top-style: foo'></b>
+<b style='border-top-width: foo'></b>
+<b style='border-top: foo'></b>
+<b style='border-width: foo'></b>
+<b style='border: foo'></b>
+<b style='bottom: foo'></b>
+<b style='box-decoration-break: foo'></b>
+<b style='box-shadow: foo'></b>
+<b style='box-sizing: foo'></b>
+<b style='break-after: foo'></b>
+<b style='break-before: foo'></b>
+<b style='break-inside: foo'></b>
+<b style='caption-side: foo'></b>
+<b style='caret-color: foo'></b>
+<b style='clear: foo'></b>
+<b style='clip-path: foo'></b>
+<b style='clip-rule: foo'></b>
+<b style='clip: foo'></b>
+<b style='color-adjust: foo'></b>
+<b style='color-interpolation-filters: foo'></b>
+<b style='color-interpolation: foo'></b>
+<b style='color-profile: foo'></b>
+<b style='color-rendering: foo'></b>
+<b style='color: foo'></b>
+<b style='column-count: foo'></b>
+<b style='column-fill: foo'></b>
+<b style='column-gap: foo'></b>
+<b style='column-rule-color: foo'></b>
+<b style='column-rule-style: foo'></b>
+<b style='column-rule-width: foo'></b>
+<b style='column-rule: foo'></b>
+<b style='column-span: foo'></b>
+<b style='column-width: foo'></b>
+<b style='columns: foo'></b>
+<b style='content: foo'></b>
+<b style='counter-increment: foo'></b>
+<b style='counter-reset: foo'></b>
+<b style='cursor: initial'></b>
+<b style='cursor: foo'></b>
+<b style='direction: foo'></b>
+<b style='display: foo'></b>
+<b style='dominant-baseline: foo'></b>
+<b style='elevation: foo'></b>
+<b style='empty-cells: foo'></b>
+<b style='enable-background: foo'></b>
+<b style='fill-opacity: foo'></b>
+<b style='fill-rule: foo'></b>
+<b style='fill: foo'></b>
+<b style='filter: blur(5px)'></b>
+<b style='filter: foo'></b>
+<b style='flex-basis: foo'></b>
+<b style='flex-direction: foo'></b>
+<b style='flex-flow: foo'></b>
+<b style='flex-grow: foo'></b>
+<b style='flex-shrink: foo'></b>
+<b style='flex-wrap: foo'></b>
+<b style='flex: foo'></b>
+<b style='float: foo'></b>
+<b style='flood-color: foo'></b>
+<b style='flood-opacity: foo'></b>
+<b style='font-family: foo'></b>
+<b style='font-feature-settings: foo'></b>
+<b style='font-kerning: foo'></b>
+<b style='font-language-override: foo'></b>
+<b style='font-size-adjust: foo'></b>
+<b style='font-size: foo'></b>
+<b style='font-stretch: foo'></b>
+<b style='font-style: foo'></b>
+<b style='font-synthesis: foo'></b>
+<b style='font-variant-alternates: foo'></b>
+<b style='font-variant-caps: foo'></b>
+<b style='font-variant-east-asian: foo'></b>
+<b style='font-variant-ligatures: foo'></b>
+<b style='font-variant-numeric: foo'></b>
+<b style='font-variant-position: foo'></b>
+<b style='font-variant: foo'></b>
+<b style='font-variation-settings: foo'></b>
+<b style='font-weight: foo'></b>
+<b style='font: foo'></b>
+<b style='glyph-orientation-horizontal: foo'></b>
+<b style='glyph-orientation-vertical: foo'></b>
+<b style='grid-area: foo'></b>
+<b style='grid-auto-columns: foo'></b>
+<b style='grid-auto-flow: foo'></b>
+<b style='grid-auto-rows: foo'></b>
+<b style='grid-column-end: foo'></b>
+<b style='grid-column-gap: foo'></b>
+<b style='grid-column-start: foo'></b>
+<b style='grid-column: foo'></b>
+<b style='grid-gap: foo'></b>
+<b style='grid-row-end: foo'></b>
+<b style='grid-row-gap: foo'></b>
+<b style='grid-row-start: foo'></b>
+<b style='grid-row: foo'></b>
+<b style='grid-template-areas: foo'></b>
+<b style='grid-template-columns: foo'></b>
+<b style='grid-template-rows: foo'></b>
+<b style='grid-template: foo'></b>
+<b style='grid: foo'></b>
+<b style='hanging-punctuation: foo'></b>
+<b style='height: foo'></b>
+<b style='hyphens: foo'></b>
+<b style='image-orientation: foo'></b>
+<b style='image-rendering: foo'></b>
+<b style='image-resolution: foo'></b>
+<b style='inline-size: foo'></b>
+<b style='isolation: foo'></b>
+<b style='justify-content: foo'></b>
+<b style='justify-items: foo'></b>
+<b style='justify-self: foo'></b>
+<b style='kerning: foo'></b>
+<b style='left: foo'></b>
+<b style='letter-spacing: foo'></b>
+<b style='lighting-color: foo'></b>
+<b style='line-break: foo'></b>
+<b style='line-height: foo'></b>
+<b style='list-style-image: foo'></b>
+<b style='list-style-position: foo'></b>
+<b style='list-style-type: foo'></b>
+<b style='list-style: foo'></b>
+<b style='margin-bottom: foo'></b>
+<b style='margin-left: foo'></b>
+<b style='margin-right: foo'></b>
+<b style='margin-top: foo'></b>
+<b style='margin: foo'></b>
+<b style='marker-end: foo'></b>
+<b style='marker-mid: foo'></b>
+<b style='marker-start: foo'></b>
+<b style='marker: foo'></b>
+<b style='mask: foo'></b>
+<b style='max-height: foo'></b>
+<b style='max-width: foo'></b>
+<b style='min-height: foo'></b>
+<b style='min-width: foo'></b>
+<b style='mix-blend-mode: foo'></b>
+<b style='object-fit: foo'></b>
+<b style='object-position: foo'></b>
+<b style='offset-distance: foo'></b>
+<b style='opacity: foo'></b>
+<b style='order: foo'></b>
+<b style='orphans: foo'></b>
+<b style='outline-color: foo'></b>
+<b style='outline-offset: foo'></b>
+<b style='outline-style: foo'></b>
+<b style='outline-width: foo'></b>
+<b style='outline: foo'></b>
+<b style='overflow-wrap: foo'></b>
+<b style='overflow-x: foo'></b>
+<b style='overflow-y: foo'></b>
+<b style='overflow: foo'></b>
+<b style='padding-bottom: foo'></b>
+<b style='padding-left: foo'></b>
+<b style='padding-right: foo'></b>
+<b style='padding-top: foo'></b>
+<b style='padding: foo'></b>
+<b style='page-break-after: foo'></b>
+<b style='page-break-before: foo'></b>
+<b style='page-break-inside: foo'></b>
+<b style='pause: foo'></b>
+<b style='pause-after: foo'></b>
+<b style='pause-before: foo'></b>
+<b style='perspective-origin: foo'></b>
+<b style='perspective: foo'></b>
+<b style='pitch: foo'></b>
+<b style='pitch-range: foo'></b>
+<b style='place-items: foo'></b>
+<b style='pointer-events: foo'></b>
+<!-- position has special rules. Don't use `foo` -->
+<b style='position: initial'></b>
+<b style='quotes: foo'></b>
+<b style='resize: foo'></b>
+<b style='richness: foo'></b>
+<b style='right: foo'></b>
+<b style='row-gap: foo'></b>
+<b style='shape-rendering: foo'></b>
+<b style='speak-header: foo'></b>
+<b style='speak-numeral: foo'></b>
+<b style='speak-punctuation: foo'></b>
+<b style='speak: foo'></b>
+<b style='speech-rate: foo'></b>
+<b style='stop-color: foo'></b>
+<b style='stop-opacity: foo'></b>
+<b style='stress: foo'></b>
+<b style='stroke-dasharray: foo'></b>
+<b style='stroke-dashoffset: foo'></b>
+<b style='stroke-linecap: foo'></b>
+<b style='stroke-linejoin: foo'></b>
+<b style='stroke-miterlimit: foo'></b>
+<b style='stroke-opacity: foo'></b>
+<b style='stroke-width: foo'></b>
+<b style='stroke: foo'></b>
+<b style='tab-size: foo'></b>
+<b style='table-layout: foo'></b>
+<b style='text-align-last: foo'></b>
+<b style='text-align: foo'></b>
+<b style='text-anchor: foo'></b>
+<b style='text-combine-upright: foo'></b>
+<b style='text-decoration-color: foo'></b>
+<b style='text-decoration-line: foo'></b>
+<b style='text-decoration-skip-ink: foo'></b>
+<b style='text-decoration-skip: foo'></b>
+<b style='text-decoration-style: foo'></b>
+<b style='text-decoration: foo'></b>
+<b style='text-emphasis-color: foo'></b>
+<b style='text-emphasis-position: foo'></b>
+<b style='text-emphasis-style: foo'></b>
+<b style='text-emphasis: foo'></b>
+<b style='text-fill-color: foo'></b>
+<b style='text-indent: foo'></b>
+<b style='text-justify: foo'></b>
+<b style='text-orientation: foo'></b>
+<b style='text-overflow: foo'></b>
+<b style='text-rendering: foo'></b>
+<b style='text-shadow: foo'></b>
+<b style='text-stroke-color: foo'></b>
+<b style='text-stroke-width: foo'></b>
+<b style='text-stroke: foo'></b>
+<b style='text-transform: foo'></b>
+<b style='text-underline-position: foo'></b>
+<b style='top: foo'></b>
+<b style='transform-box: foo'></b>
+<b style='transform-origin: foo'></b>
+<b style='transform-style: foo'></b>
+<b style='transform: foo'></b>
+<b style='transition-delay: foo'></b>
+<b style='transition-duration: foo'></b>
+<b style='transition-property: foo'></b>
+<b style='transition-property: opacity, transform'></b>
+<b style='transition-timing-function: foo'></b>
+<b style='transition: foo'></b>
+<b style='transition: opacity 4s ease-in-out 1s;'></b>
+<b style='unicode-bidi: foo'></b>
+<b style='user-select: foo'></b>
+<b style='vertical-align: foo'></b>
+<b style='visibility: foo'></b>
+<b style='visibility: hidden'></b>
+<b style='voice-family: foo'></b>
+<b style='white-space: foo'></b>
+<b style='widows: foo'></b>
+<b style='width: foo'></b>
+<b style='word-break: foo'></b>
+<b style='word-spacing: foo'></b>
+<b style='word-wrap: foo'></b>
+<b style='writing-mode: foo'></b>
+<b style='z-index: foo'></b>
+<b style='z-index: auto'></b>
+<b style='z-index: 0'></b>
+<b style='z-index: +1'></b>
+<b style='z-index: -10'></b>
+<b style='z-index: -1000'></b>
+<!-- Made-up decls -->
+<b style='amplitude: foo'></b>
+<b style='barometric-pressure: foo'></b>
+<b style='degrees-celsius: foo'></b>
 </body>
 </html>
diff --git a/validator/testdata/amp4email_feature_tests/css_strict.out b/validator/testdata/amp4email_feature_tests/css_strict.out
index 9ca9533eb5440..1dbe7dec4aafe 100644
--- a/validator/testdata/amp4email_feature_tests/css_strict.out
+++ b/validator/testdata/amp4email_feature_tests/css_strict.out
@@ -25,29 +25,549 @@ FAIL
 |    <style amp4email-boilerplate>body{visibility:hidden}</style>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <style amp-custom>
-|      /* media queries are allowed */
+|      /* These declarations don't all make sense, this tests their validity, not the CSS itself. */
+|      a {
+|        -moz-appearance: foo;
+|        -webkit-appearance: foo;
+|        -webkit-tap-highlight-color: foo;
+|        align-content: foo;
+|        align-items: foo;
+|        align-self: foo;
+|        alignment-baseline: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:35:6 CSS syntax error in tag 'style amp-custom' - invalid property 'alignment-baseline'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        all: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:36:6 CSS syntax error in tag 'style amp-custom' - invalid property 'all'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        animation-delay: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:37:6 CSS syntax error in tag 'style amp-custom' - invalid property 'animation-delay'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        animation-direction: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:38:6 CSS syntax error in tag 'style amp-custom' - invalid property 'animation-direction'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        animation-duration: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:39:6 CSS syntax error in tag 'style amp-custom' - invalid property 'animation-duration'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        animation-fill-mode: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:40:6 CSS syntax error in tag 'style amp-custom' - invalid property 'animation-fill-mode'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        animation-iteration-count: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:41:6 CSS syntax error in tag 'style amp-custom' - invalid property 'animation-iteration-count'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        animation-name: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:42:6 CSS syntax error in tag 'style amp-custom' - invalid property 'animation-name'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        animation-play-state: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:43:6 CSS syntax error in tag 'style amp-custom' - invalid property 'animation-play-state'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        animation-timing-function: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:44:6 CSS syntax error in tag 'style amp-custom' - invalid property 'animation-timing-function'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        animation: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:45:6 CSS syntax error in tag 'style amp-custom' - invalid property 'animation'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        appearance: foo;
+|        azimuth: foo;
+|        backface-visibility: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:48:6 CSS syntax error in tag 'style amp-custom' - invalid property 'backface-visibility'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        background-attachment: foo;
+|        background-blend-mode: foo;
+|        background-clip: foo;
+|        background-color: foo;
+|        background-image: foo;
+|        background-origin: foo;
+|        background-position: foo;
+|        background-repeat: foo;
+|        background-size: foo;
+|        background: foo;
+|        baseline-shift: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:59:6 CSS syntax error in tag 'style amp-custom' - invalid property 'baseline-shift'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        border-bottom-color: foo;
+|        border-bottom-left-radius: foo;
+|        border-bottom-right-radius: foo;
+|        border-bottom-style: foo;
+|        border-bottom-width: foo;
+|        border-bottom: foo;
+|        border-collapse: foo;
+|        border-color: foo;
+|        border-image-outset: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:68:6 CSS syntax error in tag 'style amp-custom' - invalid property 'border-image-outset'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        border-image-repeat: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:69:6 CSS syntax error in tag 'style amp-custom' - invalid property 'border-image-repeat'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        border-image-slice: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:70:6 CSS syntax error in tag 'style amp-custom' - invalid property 'border-image-slice'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        border-image-source: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:71:6 CSS syntax error in tag 'style amp-custom' - invalid property 'border-image-source'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        border-image-width: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:72:6 CSS syntax error in tag 'style amp-custom' - invalid property 'border-image-width'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        border-image: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:73:6 CSS syntax error in tag 'style amp-custom' - invalid property 'border-image'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        border-left-color: foo;
+|        border-left-style: foo;
+|        border-left-width: foo;
+|        border-left: foo;
+|        border-radius: foo;
+|        border-right-color: foo;
+|        border-right-style: foo;
+|        border-right-width: foo;
+|        border-right: foo;
+|        border-spacing: foo;
+|        border-style: foo;
+|        border-top-color: foo;
+|        border-top-left-radius: foo;
+|        border-top-right-radius: foo;
+|        border-top-style: foo;
+|        border-top-width: foo;
+|        border-top: foo;
+|        border-width: foo;
+|        border: foo;
+|        bottom: foo;
+|        box-decoration-break: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:94:6 CSS syntax error in tag 'style amp-custom' - invalid property 'box-decoration-break'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        box-shadow: foo;
+|        box-sizing: foo;
+|        break-after: foo;
+|        break-before: foo;
+|        break-inside: foo;
+|        caption-side: foo;
+|        caret-color: foo;
+|        clear: foo;
+|        clip-path: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:103:6 CSS syntax error in tag 'style amp-custom' - invalid property 'clip-path'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        clip-rule: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:104:6 CSS syntax error in tag 'style amp-custom' - invalid property 'clip-rule'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        clip: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:105:6 CSS syntax error in tag 'style amp-custom' - invalid property 'clip'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        color-adjust: foo;
+|        color-interpolation-filters: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:107:6 CSS syntax error in tag 'style amp-custom' - invalid property 'color-interpolation-filters'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        color-interpolation: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:108:6 CSS syntax error in tag 'style amp-custom' - invalid property 'color-interpolation'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        color-profile: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:109:6 CSS syntax error in tag 'style amp-custom' - invalid property 'color-profile'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        color-rendering: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:110:6 CSS syntax error in tag 'style amp-custom' - invalid property 'color-rendering'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        color: foo;
+|        column-count: foo;
+|        column-fill: foo;
+|        column-gap: foo;
+|        column-rule-color: foo;
+|        column-rule-style: foo;
+|        column-rule-width: foo;
+|        column-rule: foo;
+|        column-span: foo;
+|        column-width: foo;
+|        columns: foo;
+|        content: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:122:6 CSS syntax error in tag 'style amp-custom' - invalid property 'content'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        counter-increment: foo;
+|        counter-reset: foo;
+|        cursor: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:125:6 CSS syntax error in tag 'style amp-custom' - the property 'cursor' is set to the disallowed value 'foo'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        direction: foo;
+|        display: foo;
+|        dominant-baseline: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:128:6 CSS syntax error in tag 'style amp-custom' - invalid property 'dominant-baseline'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        elevation: foo;
+|        empty-cells: foo;
+|        enable-background: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:131:6 CSS syntax error in tag 'style amp-custom' - invalid property 'enable-background'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        fill-opacity: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:132:6 CSS syntax error in tag 'style amp-custom' - invalid property 'fill-opacity'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        fill-rule: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:133:6 CSS syntax error in tag 'style amp-custom' - invalid property 'fill-rule'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        fill: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:134:6 CSS syntax error in tag 'style amp-custom' - invalid property 'fill'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        filter: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:135:6 CSS syntax error in tag 'style amp-custom' - the property 'filter' is set to the disallowed value 'foo'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        flex-basis: foo;
+|        flex-direction: foo;
+|        flex-flow: foo;
+|        flex-grow: foo;
+|        flex-shrink: foo;
+|        flex-wrap: foo;
+|        flex: foo;
+|        float: foo;
+|        flood-color: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:144:6 CSS syntax error in tag 'style amp-custom' - invalid property 'flood-color'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        flood-opacity: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:145:6 CSS syntax error in tag 'style amp-custom' - invalid property 'flood-opacity'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        font-family: foo;
+|        font-feature-settings: foo;
+|        font-kerning: foo;
+|        font-language-override: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:149:6 CSS syntax error in tag 'style amp-custom' - invalid property 'font-language-override'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        font-size-adjust: foo;
+|        font-size: foo;
+|        font-stretch: foo;
+|        font-style: foo;
+|        font-synthesis: foo;
+|        font-variant-alternates: foo;
+|        font-variant-caps: foo;
+|        font-variant-east-asian: foo;
+|        font-variant-ligatures: foo;
+|        font-variant-numeric: foo;
+|        font-variant-position: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:160:6 CSS syntax error in tag 'style amp-custom' - invalid property 'font-variant-position'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        font-variant: foo;
+|        font-variation-settings: foo;
+|        font-weight: foo;
+|        font: foo;
+|        gap: foo;
+|        glyph-orientation-horizontal: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:166:6 CSS syntax error in tag 'style amp-custom' - invalid property 'glyph-orientation-horizontal'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        glyph-orientation-vertical: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:167:6 CSS syntax error in tag 'style amp-custom' - invalid property 'glyph-orientation-vertical'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        grid-area: foo;
+|        grid-auto-columns: foo;
+|        grid-auto-flow: foo;
+|        grid-auto-rows: foo;
+|        grid-column-end: foo;
+|        grid-column-gap: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:173:6 CSS syntax error in tag 'style amp-custom' - invalid property 'grid-column-gap'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        grid-column-start: foo;
+|        grid-column: foo;
+|        grid-gap: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:176:6 CSS syntax error in tag 'style amp-custom' - invalid property 'grid-gap'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        grid-row-end: foo;
+|        grid-row-gap: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:178:6 CSS syntax error in tag 'style amp-custom' - invalid property 'grid-row-gap'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        grid-row-start: foo;
+|        grid-row: foo;
+|        grid-template-areas: foo;
+|        grid-template-columns: foo;
+|        grid-template-rows: foo;
+|        grid-template: foo;
+|        grid: foo;
+|        hanging-punctuation: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:186:6 CSS syntax error in tag 'style amp-custom' - invalid property 'hanging-punctuation'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        height: foo;
+|        hyphens: foo;
+|        image-orientation: foo;
+|        image-rendering: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:190:6 CSS syntax error in tag 'style amp-custom' - invalid property 'image-rendering'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        image-resolution: foo;
+|        inline-size: foo;
+|        isolation: foo;
+|        justify-content: foo;
+|        justify-items: foo;
+|        justify-self: foo;
+|        kerning: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:197:6 CSS syntax error in tag 'style amp-custom' - invalid property 'kerning'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        left: foo;
+|        letter-spacing: foo;
+|        lighting-color: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:200:6 CSS syntax error in tag 'style amp-custom' - invalid property 'lighting-color'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        line-break: foo;
+|        line-height: foo;
+|        list-style-image: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:203:6 CSS syntax error in tag 'style amp-custom' - invalid property 'list-style-image'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        list-style-position: foo;
+|        list-style-type: foo;
+|        list-style: foo;
+|        margin-bottom: foo;
+|        margin-left: foo;
+|        margin-right: foo;
+|        margin-top: foo;
+|        margin: foo;
+|        marker-end: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:212:6 CSS syntax error in tag 'style amp-custom' - invalid property 'marker-end'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        marker-mid: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:213:6 CSS syntax error in tag 'style amp-custom' - invalid property 'marker-mid'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        marker-start: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:214:6 CSS syntax error in tag 'style amp-custom' - invalid property 'marker-start'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        marker: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:215:6 CSS syntax error in tag 'style amp-custom' - invalid property 'marker'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        mask: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:216:6 CSS syntax error in tag 'style amp-custom' - invalid property 'mask'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        max-height: foo;
+|        max-width: foo;
+|        min-height: foo;
+|        min-width: foo;
+|        mix-blend-mode: foo;
+|        object-fit: foo;
+|        object-position: foo;
+|        offset-distance: foo;
+|        opacity: foo;
+|        order: foo;
+|        orphans: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:227:6 CSS syntax error in tag 'style amp-custom' - invalid property 'orphans'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        outline-color: foo;
+|        outline-offset: foo;
+|        outline-style: foo;
+|        outline-width: foo;
+|        outline: foo;
+|        overflow-wrap: foo;
+|        overflow-x: foo;
+|        overflow-y: foo;
+|        overflow: foo;
+|        padding-bottom: foo;
+|        padding-left: foo;
+|        padding-right: foo;
+|        padding-top: foo;
+|        padding: foo;
+|        page-break-after: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:242:6 CSS syntax error in tag 'style amp-custom' - invalid property 'page-break-after'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        page-break-before: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:243:6 CSS syntax error in tag 'style amp-custom' - invalid property 'page-break-before'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        page-break-inside: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:244:6 CSS syntax error in tag 'style amp-custom' - invalid property 'page-break-inside'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        pause: foo;
+|        pause-after: foo;
+|        pause-before: foo;
+|        perspective-origin: foo;
+|        perspective: foo;
+|        pitch: foo;
+|        pitch-range: foo;
+|        place-items: foo;
+|        pointer-events: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:253:6 CSS syntax error in tag 'style amp-custom' - invalid property 'pointer-events'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        /* position has special rules. Don't use `foo` */
+|        position: initial;
+|        quotes: foo;
+|        resize: foo;
+|        richness: foo;
+|        right: foo;
+|        row-gap: foo;
+|        shape-rendering: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:261:6 CSS syntax error in tag 'style amp-custom' - invalid property 'shape-rendering'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        speak-header: foo;
+|        speak-numeral: foo;
+|        speak-punctuation: foo;
+|        speak: foo;
+|        speech-rate: foo;
+|        stop-color: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:267:6 CSS syntax error in tag 'style amp-custom' - invalid property 'stop-color'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        stop-opacity: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:268:6 CSS syntax error in tag 'style amp-custom' - invalid property 'stop-opacity'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        stress: foo;
+|        stroke-dasharray: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:270:6 CSS syntax error in tag 'style amp-custom' - invalid property 'stroke-dasharray'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        stroke-dashoffset: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:271:6 CSS syntax error in tag 'style amp-custom' - invalid property 'stroke-dashoffset'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        stroke-linecap: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:272:6 CSS syntax error in tag 'style amp-custom' - invalid property 'stroke-linecap'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        stroke-linejoin: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:273:6 CSS syntax error in tag 'style amp-custom' - invalid property 'stroke-linejoin'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        stroke-miterlimit: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:274:6 CSS syntax error in tag 'style amp-custom' - invalid property 'stroke-miterlimit'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        stroke-opacity: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:275:6 CSS syntax error in tag 'style amp-custom' - invalid property 'stroke-opacity'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        stroke-width: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:276:6 CSS syntax error in tag 'style amp-custom' - invalid property 'stroke-width'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        stroke: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:277:6 CSS syntax error in tag 'style amp-custom' - invalid property 'stroke'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        tab-size: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:278:6 CSS syntax error in tag 'style amp-custom' - invalid property 'tab-size'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        table-layout: foo;
+|        text-align-last: foo;
+|        text-align: foo;
+|        text-anchor: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:282:6 CSS syntax error in tag 'style amp-custom' - invalid property 'text-anchor'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        text-combine-upright: foo;
+|        text-decoration-color: foo;
+|        text-decoration-line: foo;
+|        text-decoration-skip-ink: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:286:6 CSS syntax error in tag 'style amp-custom' - invalid property 'text-decoration-skip-ink'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        text-decoration-skip: foo;
+|        text-decoration-style: foo;
+|        text-decoration: foo;
+|        text-emphasis-color: foo;
+|        text-emphasis-position: foo;
+|        text-emphasis-style: foo;
+|        text-emphasis: foo;
+|        text-fill-color: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:294:6 CSS syntax error in tag 'style amp-custom' - invalid property 'text-fill-color'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        text-indent: foo;
+|        text-justify: foo;
+|        text-orientation: foo;
+|        text-overflow: foo;
+|        text-rendering: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:299:6 CSS syntax error in tag 'style amp-custom' - invalid property 'text-rendering'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        text-shadow: foo;
+|        text-stroke-color: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:301:6 CSS syntax error in tag 'style amp-custom' - invalid property 'text-stroke-color'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        text-stroke-width: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:302:6 CSS syntax error in tag 'style amp-custom' - invalid property 'text-stroke-width'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        text-stroke: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:303:6 CSS syntax error in tag 'style amp-custom' - invalid property 'text-stroke'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        text-transform: foo;
+|        text-underline-position: foo;
+|        top: foo;
+|        transform-box: foo;
+|        transform-origin: foo;
+|        transform-style: foo;
+|        transform: foo;
+|        transition-delay: foo;
+|        transition-duration: foo;
+|        transition-property: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:313:6 CSS syntax error in tag 'style amp-custom' - the property 'transition-property' is set to the disallowed value 'foo'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        transition-timing-function: foo;
+|        transition: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:315:6 CSS syntax error in tag 'style amp-custom' - the property 'transition' is set to the disallowed value 'foo'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        unicode-bidi: foo;
+|        user-select: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:317:6 CSS syntax error in tag 'style amp-custom' - invalid property 'user-select'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        vertical-align: foo;
+|        visibility: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:319:6 CSS syntax error in tag 'style amp-custom' - the property 'visibility' is set to the disallowed value 'foo'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        voice-family: foo;
+|        white-space: foo;
+|        widows: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:322:6 CSS syntax error in tag 'style amp-custom' - invalid property 'widows'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        width: foo;
+|        word-break: foo;
+|        word-spacing: foo;
+|        word-wrap: foo;
+|        writing-mode: foo;
+|        z-index: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:328:6 CSS syntax error in tag 'style amp-custom' - the property 'z-index' is set to the disallowed value 'foo'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        z-index: auto;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:329:6 CSS syntax error in tag 'style amp-custom' - the property 'z-index' is set to the disallowed value 'auto'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        z-index: -1;
+|      }
+|      madeupdecls {
+|        amplitude: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:333:6 CSS syntax error in tag 'style amp-custom' - invalid property 'amplitude'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        barometric-pressure: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:334:6 CSS syntax error in tag 'style amp-custom' - invalid property 'barometric-pressure'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|        degrees-celsius: foo;
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:335:6 CSS syntax error in tag 'style amp-custom' - invalid property 'degrees-celsius'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|      }
+|      /* valid media queries */
+|      @media all {}
 |      @media screen {}
+|      @media (device-width: foo) {}
+|      @media (hover: foo) {}
+|      @media (max-device-width: foo) {}
+|      @media (max-resolution: foo) {}
+|      @media (max-width: foo) {}
+|      @media (min-device-width: foo) {}
+|      @media (min-resolution: foo) {}
+|      @media (min-width: foo) {}
+|      @media (orientation: foo) {}
+|      @media (pointer: foo) {}
+|      @media (resolution: foo) {}
+|      @media (width: foo) {}
+|
+|      /* invalid media queries */
+|      @media invalid {}
+>>            ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:354:11 CSS syntax error in tag 'style amp-custom' - disallowed media type 'invalid'.
+|      @media (invalid: foo) {}
+>>             ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:355:12 CSS syntax error in tag 'style amp-custom' - disallowed media feature 'invalid'.
 |
 |      /* all other @ rules are banned */
 |      @supports (display: flex) {}
 >>     ^~~~~~~~~
-amp4email_feature_tests/css_strict.html:31:4 CSS syntax error in tag 'style amp-custom (css-strict)' - saw invalid at rule '@supports'.
+amp4email_feature_tests/css_strict.html:358:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@supports'.
 |      @font-face {}
 >>     ^~~~~~~~~
-amp4email_feature_tests/css_strict.html:32:4 CSS syntax error in tag 'style amp-custom (css-strict)' - saw invalid at rule '@font-face'.
+amp4email_feature_tests/css_strict.html:359:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@font-face'.
 |      @keyframes slidein {}
 >>     ^~~~~~~~~
-amp4email_feature_tests/css_strict.html:33:4 CSS syntax error in tag 'style amp-custom (css-strict)' - saw invalid at rule '@keyframes'.
-|      @invalid {}
+amp4email_feature_tests/css_strict.html:360:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@keyframes'.
+|      @notvalid {}
+>>     ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:361:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@notvalid'.
+|      @page {}
 >>     ^~~~~~~~~
-amp4email_feature_tests/css_strict.html:34:4 CSS syntax error in tag 'style amp-custom (css-strict)' - saw invalid at rule '@invalid'.
+amp4email_feature_tests/css_strict.html:362:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@page'.
 |
 |      /* Since data-css-strict is specified, we apply selector rules. */
-|      .a[invalid] {}
+|      .a[notvalid] {}
 >>       ^~~~~~~~~
-amp4email_feature_tests/css_strict.html:37:6 CSS error in tag 'style amp-custom (css-strict)' - disallowed attribute selector 'invalid'.
-|      .a:invalid {}
-|      .a::invalid {}
+amp4email_feature_tests/css_strict.html:365:6 CSS error in tag 'style amp-custom' - disallowed attribute selector 'notvalid'.
+|      .a:notvalid {}
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:366:6 CSS error in tag 'style amp-custom' - disallowed pseudo class 'notvalid'.
+|      .a::notvalid {}
+>>       ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:367:6 CSS error in tag 'style amp-custom' - disallowed pseudo element 'notvalid'.
+|      :notvalid {}
+>>     ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:368:4 CSS error in tag 'style amp-custom' - disallowed pseudo class 'notvalid'.
+|      .a[id]:notvalid {}
+>>           ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:369:10 CSS error in tag 'style amp-custom' - disallowed pseudo class 'notvalid'.
 |
 |      .a[active] {}
 |      .a[alt] {}
@@ -87,9 +607,561 @@ amp4email_feature_tests/css_strict.html:37:6 CSS error in tag 'style amp-custom
 |      .a[type] {}
 |      .a[value] {}
 |      .a[width] {}
+|      .a:active {}
+|      .a:checked {}
+|      .a:default {}
+|      .a:disabled {}
+|      .a:empty {}
+|      .a:enabled {}
+|      .a:first-child {}
+|      .a:first-of-type {}
+|      .a:focus-within {}
+|      .a:hover {}
+|      .a:in-range {}
+|      .a:indeterminate {}
+|      .a:invalid {}
+|      .a:last-child {}
+|      .a:last-of-type {}
+|      .a:not {}
+|      .a:nth-child {}
+|      .a:nth-last-child {}
+|      .a:nth-last-of-type {}
+|      .a:nth-of-type {}
+|      .a:only-child {}
+|      .a:only-of-type {}
+|      .a:optional {}
+|      .a:out-of-range {}
+|      .a:read-only {}
+|      .a:read-write {}
+|      .a:required {}
+|      .a:valid {}
+|
+|      /* Vendor prefixes are not automatically expanded */
+|      .a { margin: 1px; }
+|      .a { -webkit-margin: 1px; }
+>>          ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:440:9 CSS syntax error in tag 'style amp-custom' - invalid property '-webkit-margin'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|
+|      /* Three specific prefixes are explicitly allowlisted */
+|      .a {
+|        -moz-appearance: foo;
+|        -webkit-appearance: foo;
+|        -webkit-tap-highlight-color: foo;
+|      }
+|
+|      /* Not all properties are automatically allowed */
+|      .a { invalid: 1px; }
+>>          ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:450:9 CSS syntax error in tag 'style amp-custom' - invalid property 'invalid'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|
+|      /* Some properties are allowed, but only certain values */
+|      .a { position: absolute; }
+|      .a { position: invalid; }
+>>          ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:454:9 CSS syntax error in tag 'style amp-custom' - the property 'position' is set to the disallowed value 'invalid'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|      .a { z-index: -1; }
+|      .a { z-index: invalid; }
+>>          ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:456:9 CSS syntax error in tag 'style amp-custom' - the property 'z-index' is set to the disallowed value 'invalid'. (see https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css)
+|
+|      /* Important is not allowed */
+|      .a { color: red !important; }
+>>                     ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:459:20 Usage of the !important CSS qualifier is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
 |    </style>
 |  </head>
 |  <body>
-|  Test body.
+|  <!-- Test these declaration's validity inside inline style attributes: -->
+|  <b style="-moz-appearance: foo;"></b>
+|  <b style="-webkit-appearance: foo;"></b>
+|  <b style="-webkit-tap-highlight-color: foo;"></b>
+|  <b style='align-content: foo'></b>
+|  <b style='align-items: foo'></b>
+|  <b style='align-self: foo'></b>
+|  <b style='alignment-baseline: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:470:0 The property 'alignment-baseline' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='all: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:471:0 The property 'all' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='animation-delay: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:472:0 The property 'animation-delay' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='animation-direction: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:473:0 The property 'animation-direction' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='animation-duration: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:474:0 The property 'animation-duration' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='animation-fill-mode: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:475:0 The property 'animation-fill-mode' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='animation-iteration-count: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:476:0 The property 'animation-iteration-count' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='animation-name: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:477:0 The property 'animation-name' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='animation-play-state: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:478:0 The property 'animation-play-state' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='animation-timing-function: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:479:0 The property 'animation-timing-function' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='animation: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:480:0 The property 'animation' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='appearance: foo'></b>
+|  <b style='azimuth: foo'></b>
+|  <b style='backface-visibility: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:483:0 The property 'backface-visibility' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='background-attachment: foo'></b>
+|  <b style='background-blend-mode: foo'></b>
+|  <b style='background-clip: foo'></b>
+|  <b style='background-color: foo'></b>
+|  <b style='background-image: foo'></b>
+|  <b style='background-origin: foo'></b>
+|  <b style='background-position: foo'></b>
+|  <b style='background-repeat: foo'></b>
+|  <b style='background-size: foo'></b>
+|  <b style='background: foo'></b>
+|  <b style='baseline-shift: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:494:0 The property 'baseline-shift' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='border-bottom-color: foo'></b>
+|  <b style='border-bottom-left-radius: foo'></b>
+|  <b style='border-bottom-right-radius: foo'></b>
+|  <b style='border-bottom-style: foo'></b>
+|  <b style='border-bottom-width: foo'></b>
+|  <b style='border-bottom: foo'></b>
+|  <b style='border-collapse: foo'></b>
+|  <b style='border-color: foo'></b>
+|  <b style='border-image-outset: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:503:0 The property 'border-image-outset' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='border-image-repeat: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:504:0 The property 'border-image-repeat' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='border-image-slice: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:505:0 The property 'border-image-slice' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='border-image-source: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:506:0 The property 'border-image-source' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='border-image-width: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:507:0 The property 'border-image-width' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='border-image: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:508:0 The property 'border-image' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='border-left-color: foo'></b>
+|  <b style='border-left-style: foo'></b>
+|  <b style='border-left-width: foo'></b>
+|  <b style='border-left: foo'></b>
+|  <b style='border-radius: foo'></b>
+|  <b style='border-right-color: foo'></b>
+|  <b style='border-right-style: foo'></b>
+|  <b style='border-right-width: foo'></b>
+|  <b style='border-right: foo'></b>
+|  <b style='border-spacing: foo'></b>
+|  <b style='border-style: foo'></b>
+|  <b style='border-top-color: foo'></b>
+|  <b style='border-top-left-radius: foo'></b>
+|  <b style='border-top-right-radius: foo'></b>
+|  <b style='border-top-style: foo'></b>
+|  <b style='border-top-width: foo'></b>
+|  <b style='border-top: foo'></b>
+|  <b style='border-width: foo'></b>
+|  <b style='border: foo'></b>
+|  <b style='bottom: foo'></b>
+|  <b style='box-decoration-break: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:529:0 The property 'box-decoration-break' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='box-shadow: foo'></b>
+|  <b style='box-sizing: foo'></b>
+|  <b style='break-after: foo'></b>
+|  <b style='break-before: foo'></b>
+|  <b style='break-inside: foo'></b>
+|  <b style='caption-side: foo'></b>
+|  <b style='caret-color: foo'></b>
+|  <b style='clear: foo'></b>
+|  <b style='clip-path: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:538:0 The property 'clip-path' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='clip-rule: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:539:0 The property 'clip-rule' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='clip: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:540:0 The property 'clip' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='color-adjust: foo'></b>
+|  <b style='color-interpolation-filters: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:542:0 The property 'color-interpolation-filters' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='color-interpolation: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:543:0 The property 'color-interpolation' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='color-profile: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:544:0 The property 'color-profile' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='color-rendering: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:545:0 The property 'color-rendering' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='color: foo'></b>
+|  <b style='column-count: foo'></b>
+|  <b style='column-fill: foo'></b>
+|  <b style='column-gap: foo'></b>
+|  <b style='column-rule-color: foo'></b>
+|  <b style='column-rule-style: foo'></b>
+|  <b style='column-rule-width: foo'></b>
+|  <b style='column-rule: foo'></b>
+|  <b style='column-span: foo'></b>
+|  <b style='column-width: foo'></b>
+|  <b style='columns: foo'></b>
+|  <b style='content: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:557:0 The property 'content' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='counter-increment: foo'></b>
+|  <b style='counter-reset: foo'></b>
+|  <b style='cursor: initial'></b>
+|  <b style='cursor: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:561:0 CSS syntax error in tag 'b' - the property 'cursor' is set to the disallowed value 'foo'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='direction: foo'></b>
+|  <b style='display: foo'></b>
+|  <b style='dominant-baseline: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:564:0 The property 'dominant-baseline' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='elevation: foo'></b>
+|  <b style='empty-cells: foo'></b>
+|  <b style='enable-background: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:567:0 The property 'enable-background' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='fill-opacity: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:568:0 The property 'fill-opacity' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='fill-rule: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:569:0 The property 'fill-rule' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='fill: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:570:0 The property 'fill' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='filter: blur(5px)'></b>
+|  <b style='filter: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:572:0 CSS syntax error in tag 'b' - the property 'filter' is set to the disallowed value 'foo'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='flex-basis: foo'></b>
+|  <b style='flex-direction: foo'></b>
+|  <b style='flex-flow: foo'></b>
+|  <b style='flex-grow: foo'></b>
+|  <b style='flex-shrink: foo'></b>
+|  <b style='flex-wrap: foo'></b>
+|  <b style='flex: foo'></b>
+|  <b style='float: foo'></b>
+|  <b style='flood-color: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:581:0 The property 'flood-color' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='flood-opacity: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:582:0 The property 'flood-opacity' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='font-family: foo'></b>
+|  <b style='font-feature-settings: foo'></b>
+|  <b style='font-kerning: foo'></b>
+|  <b style='font-language-override: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:586:0 The property 'font-language-override' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='font-size-adjust: foo'></b>
+|  <b style='font-size: foo'></b>
+|  <b style='font-stretch: foo'></b>
+|  <b style='font-style: foo'></b>
+|  <b style='font-synthesis: foo'></b>
+|  <b style='font-variant-alternates: foo'></b>
+|  <b style='font-variant-caps: foo'></b>
+|  <b style='font-variant-east-asian: foo'></b>
+|  <b style='font-variant-ligatures: foo'></b>
+|  <b style='font-variant-numeric: foo'></b>
+|  <b style='font-variant-position: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:597:0 The property 'font-variant-position' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='font-variant: foo'></b>
+|  <b style='font-variation-settings: foo'></b>
+|  <b style='font-weight: foo'></b>
+|  <b style='font: foo'></b>
+|  <b style='glyph-orientation-horizontal: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:602:0 The property 'glyph-orientation-horizontal' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='glyph-orientation-vertical: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:603:0 The property 'glyph-orientation-vertical' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='grid-area: foo'></b>
+|  <b style='grid-auto-columns: foo'></b>
+|  <b style='grid-auto-flow: foo'></b>
+|  <b style='grid-auto-rows: foo'></b>
+|  <b style='grid-column-end: foo'></b>
+|  <b style='grid-column-gap: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:609:0 The property 'grid-column-gap' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='grid-column-start: foo'></b>
+|  <b style='grid-column: foo'></b>
+|  <b style='grid-gap: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:612:0 The property 'grid-gap' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='grid-row-end: foo'></b>
+|  <b style='grid-row-gap: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:614:0 The property 'grid-row-gap' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='grid-row-start: foo'></b>
+|  <b style='grid-row: foo'></b>
+|  <b style='grid-template-areas: foo'></b>
+|  <b style='grid-template-columns: foo'></b>
+|  <b style='grid-template-rows: foo'></b>
+|  <b style='grid-template: foo'></b>
+|  <b style='grid: foo'></b>
+|  <b style='hanging-punctuation: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:622:0 The property 'hanging-punctuation' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='height: foo'></b>
+|  <b style='hyphens: foo'></b>
+|  <b style='image-orientation: foo'></b>
+|  <b style='image-rendering: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:626:0 The property 'image-rendering' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='image-resolution: foo'></b>
+|  <b style='inline-size: foo'></b>
+|  <b style='isolation: foo'></b>
+|  <b style='justify-content: foo'></b>
+|  <b style='justify-items: foo'></b>
+|  <b style='justify-self: foo'></b>
+|  <b style='kerning: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:633:0 The property 'kerning' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='left: foo'></b>
+|  <b style='letter-spacing: foo'></b>
+|  <b style='lighting-color: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:636:0 The property 'lighting-color' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='line-break: foo'></b>
+|  <b style='line-height: foo'></b>
+|  <b style='list-style-image: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:639:0 The property 'list-style-image' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='list-style-position: foo'></b>
+|  <b style='list-style-type: foo'></b>
+|  <b style='list-style: foo'></b>
+|  <b style='margin-bottom: foo'></b>
+|  <b style='margin-left: foo'></b>
+|  <b style='margin-right: foo'></b>
+|  <b style='margin-top: foo'></b>
+|  <b style='margin: foo'></b>
+|  <b style='marker-end: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:648:0 The property 'marker-end' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='marker-mid: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:649:0 The property 'marker-mid' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='marker-start: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:650:0 The property 'marker-start' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='marker: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:651:0 The property 'marker' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='mask: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:652:0 The property 'mask' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='max-height: foo'></b>
+|  <b style='max-width: foo'></b>
+|  <b style='min-height: foo'></b>
+|  <b style='min-width: foo'></b>
+|  <b style='mix-blend-mode: foo'></b>
+|  <b style='object-fit: foo'></b>
+|  <b style='object-position: foo'></b>
+|  <b style='offset-distance: foo'></b>
+|  <b style='opacity: foo'></b>
+|  <b style='order: foo'></b>
+|  <b style='orphans: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:663:0 The property 'orphans' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='outline-color: foo'></b>
+|  <b style='outline-offset: foo'></b>
+|  <b style='outline-style: foo'></b>
+|  <b style='outline-width: foo'></b>
+|  <b style='outline: foo'></b>
+|  <b style='overflow-wrap: foo'></b>
+|  <b style='overflow-x: foo'></b>
+|  <b style='overflow-y: foo'></b>
+|  <b style='overflow: foo'></b>
+|  <b style='padding-bottom: foo'></b>
+|  <b style='padding-left: foo'></b>
+|  <b style='padding-right: foo'></b>
+|  <b style='padding-top: foo'></b>
+|  <b style='padding: foo'></b>
+|  <b style='page-break-after: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:678:0 The property 'page-break-after' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='page-break-before: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:679:0 The property 'page-break-before' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='page-break-inside: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:680:0 The property 'page-break-inside' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='pause: foo'></b>
+|  <b style='pause-after: foo'></b>
+|  <b style='pause-before: foo'></b>
+|  <b style='perspective-origin: foo'></b>
+|  <b style='perspective: foo'></b>
+|  <b style='pitch: foo'></b>
+|  <b style='pitch-range: foo'></b>
+|  <b style='place-items: foo'></b>
+|  <b style='pointer-events: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:689:0 The property 'pointer-events' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <!-- position has special rules. Don't use `foo` -->
+|  <b style='position: initial'></b>
+|  <b style='quotes: foo'></b>
+|  <b style='resize: foo'></b>
+|  <b style='richness: foo'></b>
+|  <b style='right: foo'></b>
+|  <b style='row-gap: foo'></b>
+|  <b style='shape-rendering: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:697:0 The property 'shape-rendering' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='speak-header: foo'></b>
+|  <b style='speak-numeral: foo'></b>
+|  <b style='speak-punctuation: foo'></b>
+|  <b style='speak: foo'></b>
+|  <b style='speech-rate: foo'></b>
+|  <b style='stop-color: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:703:0 The property 'stop-color' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='stop-opacity: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:704:0 The property 'stop-opacity' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='stress: foo'></b>
+|  <b style='stroke-dasharray: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:706:0 The property 'stroke-dasharray' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='stroke-dashoffset: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:707:0 The property 'stroke-dashoffset' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='stroke-linecap: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:708:0 The property 'stroke-linecap' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='stroke-linejoin: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:709:0 The property 'stroke-linejoin' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='stroke-miterlimit: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:710:0 The property 'stroke-miterlimit' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='stroke-opacity: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:711:0 The property 'stroke-opacity' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='stroke-width: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:712:0 The property 'stroke-width' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='stroke: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:713:0 The property 'stroke' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='tab-size: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:714:0 The property 'tab-size' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='table-layout: foo'></b>
+|  <b style='text-align-last: foo'></b>
+|  <b style='text-align: foo'></b>
+|  <b style='text-anchor: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:718:0 The property 'text-anchor' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='text-combine-upright: foo'></b>
+|  <b style='text-decoration-color: foo'></b>
+|  <b style='text-decoration-line: foo'></b>
+|  <b style='text-decoration-skip-ink: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:722:0 The property 'text-decoration-skip-ink' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='text-decoration-skip: foo'></b>
+|  <b style='text-decoration-style: foo'></b>
+|  <b style='text-decoration: foo'></b>
+|  <b style='text-emphasis-color: foo'></b>
+|  <b style='text-emphasis-position: foo'></b>
+|  <b style='text-emphasis-style: foo'></b>
+|  <b style='text-emphasis: foo'></b>
+|  <b style='text-fill-color: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:730:0 The property 'text-fill-color' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='text-indent: foo'></b>
+|  <b style='text-justify: foo'></b>
+|  <b style='text-orientation: foo'></b>
+|  <b style='text-overflow: foo'></b>
+|  <b style='text-rendering: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:735:0 The property 'text-rendering' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='text-shadow: foo'></b>
+|  <b style='text-stroke-color: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:737:0 The property 'text-stroke-color' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='text-stroke-width: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:738:0 The property 'text-stroke-width' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='text-stroke: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:739:0 The property 'text-stroke' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='text-transform: foo'></b>
+|  <b style='text-underline-position: foo'></b>
+|  <b style='top: foo'></b>
+|  <b style='transform-box: foo'></b>
+|  <b style='transform-origin: foo'></b>
+|  <b style='transform-style: foo'></b>
+|  <b style='transform: foo'></b>
+|  <b style='transition-delay: foo'></b>
+|  <b style='transition-duration: foo'></b>
+|  <b style='transition-property: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:749:0 CSS syntax error in tag 'b' - the property 'transition-property' is set to the disallowed value 'foo'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='transition-property: opacity, transform'></b>
+|  <b style='transition-timing-function: foo'></b>
+|  <b style='transition: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:752:0 CSS syntax error in tag 'b' - the property 'transition' is set to the disallowed value 'foo'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='transition: opacity 4s ease-in-out 1s;'></b>
+|  <b style='unicode-bidi: foo'></b>
+|  <b style='user-select: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:755:0 The property 'user-select' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='vertical-align: foo'></b>
+|  <b style='visibility: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:757:0 CSS syntax error in tag 'b' - the property 'visibility' is set to the disallowed value 'foo'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='visibility: hidden'></b>
+|  <b style='voice-family: foo'></b>
+|  <b style='white-space: foo'></b>
+|  <b style='widows: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:761:0 The property 'widows' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='width: foo'></b>
+|  <b style='word-break: foo'></b>
+|  <b style='word-spacing: foo'></b>
+|  <b style='word-wrap: foo'></b>
+|  <b style='writing-mode: foo'></b>
+|  <b style='z-index: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:767:0 CSS syntax error in tag 'b' - the property 'z-index' is set to the disallowed value 'foo'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='z-index: auto'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:768:0 CSS syntax error in tag 'b' - the property 'z-index' is set to the disallowed value 'auto'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='z-index: 0'></b>
+|  <b style='z-index: +1'></b>
+|  <b style='z-index: -10'></b>
+|  <b style='z-index: -1000'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:772:0 CSS syntax error in tag 'b' - the property 'z-index' is set to the disallowed value '-1000'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <!-- Made-up decls -->
+|  <b style='amplitude: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:774:0 The property 'amplitude' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='barometric-pressure: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:775:0 The property 'barometric-pressure' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  <b style='degrees-celsius: foo'></b>
+>> ^~~~~~~~~
+amp4email_feature_tests/css_strict.html:776:0 The property 'degrees-celsius' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
 |  </body>
 |  </html>
diff --git a/validator/testdata/amp4email_feature_tests/doc_size.html b/validator/testdata/amp4email_feature_tests/doc_size.html
new file mode 100644
index 0000000000000..87d071fb15e7b
--- /dev/null
+++ b/validator/testdata/amp4email_feature_tests/doc_size.html
@@ -0,0 +1,33 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This testcase isn't run verbatim. The template string below is replaced by
+  the test harnesses with various lengths of valid body content. We use
+  this test to verify the max_document_byte_length rules for AMP4EMAIL.
+-->
+<!doctype html>
+<html ⚡4email data-css-strict>
+<head>
+  <meta charset="utf-8">
+  <style amp4email-boilerplate>body{visibility:hidden}</style>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  Hello, World!
+  replace_body
+</body>
+</html>
diff --git a/validator/testdata/amp4email_feature_tests/doc_size.out b/validator/testdata/amp4email_feature_tests/doc_size.out
new file mode 100644
index 0000000000000..df6436c60cb7c
--- /dev/null
+++ b/validator/testdata/amp4email_feature_tests/doc_size.out
@@ -0,0 +1,34 @@
+PASS
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This testcase isn't run verbatim. The template string below is replaced by
+|    the test harnesses with various lengths of valid body content. We use
+|    this test to verify the max_document_byte_length rules for AMP4EMAIL.
+|  -->
+|  <!doctype html>
+|  <html ⚡4email data-css-strict>
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp4email-boilerplate>body{visibility:hidden}</style>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|    Hello, World!
+|    replace_body
+|  </body>
+|  </html>
diff --git a/validator/testdata/amp4email_feature_tests/min_valid_amp4email.html b/validator/testdata/amp4email_feature_tests/min_valid_amp4email.html
index 2b18d7175a46c..0d274908c62f2 100644
--- a/validator/testdata/amp4email_feature_tests/min_valid_amp4email.html
+++ b/validator/testdata/amp4email_feature_tests/min_valid_amp4email.html
@@ -19,7 +19,7 @@
   fields from the spec, but nothing else.
 -->
 <!doctype html>
-<html ⚡4email>
+<html ⚡4email data-css-strict>
 <head>
   <meta charset="utf-8">
   <style amp4email-boilerplate>body{visibility:hidden}</style>
diff --git a/validator/testdata/amp4email_feature_tests/min_valid_amp4email.out b/validator/testdata/amp4email_feature_tests/min_valid_amp4email.out
index b7d510eae33fd..80a375866264d 100644
--- a/validator/testdata/amp4email_feature_tests/min_valid_amp4email.out
+++ b/validator/testdata/amp4email_feature_tests/min_valid_amp4email.out
@@ -20,7 +20,7 @@ PASS
 |    fields from the spec, but nothing else.
 |  -->
 |  <!doctype html>
-|  <html ⚡4email>
+|  <html ⚡4email data-css-strict>
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp4email-boilerplate>body{visibility:hidden}</style>
diff --git a/validator/testdata/amp4email_feature_tests/min_valid_multiline_amp4email.html b/validator/testdata/amp4email_feature_tests/min_valid_multiline_amp4email.html
index be73a53a293d8..c5cb6096728cc 100644
--- a/validator/testdata/amp4email_feature_tests/min_valid_multiline_amp4email.html
+++ b/validator/testdata/amp4email_feature_tests/min_valid_multiline_amp4email.html
@@ -19,7 +19,7 @@
   fields from the spec, but nothing else.
 -->
 <!doctype html>
-<html ⚡4email>
+<html ⚡4email data-css-strict>
 <head>
   <meta charset="utf-8">
   <style amp4email-boilerplate>
diff --git a/validator/testdata/amp4email_feature_tests/min_valid_multiline_amp4email.out b/validator/testdata/amp4email_feature_tests/min_valid_multiline_amp4email.out
index 198d83eec683e..3be3a6ac1494f 100644
--- a/validator/testdata/amp4email_feature_tests/min_valid_multiline_amp4email.out
+++ b/validator/testdata/amp4email_feature_tests/min_valid_multiline_amp4email.out
@@ -20,7 +20,7 @@ PASS
 |    fields from the spec, but nothing else.
 |  -->
 |  <!doctype html>
-|  <html ⚡4email>
+|  <html ⚡4email data-css-strict>
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp4email-boilerplate>
diff --git a/validator/testdata/amp4email_feature_tests/no_latest_extensions.html b/validator/testdata/amp4email_feature_tests/no_latest_extensions.html
index 4c26c81fbdc7e..4d320056a8967 100644
--- a/validator/testdata/amp4email_feature_tests/no_latest_extensions.html
+++ b/validator/testdata/amp4email_feature_tests/no_latest_extensions.html
@@ -18,7 +18,7 @@
   This checks that "latest" versions of extensions are not valid.
 -->
 <!doctype html>
-<html ⚡4email>
+<html ⚡4email data-css-strict>
 <head>
   <meta charset="utf-8">
   <style amp4email-boilerplate>body{visibility:hidden}</style>
diff --git a/validator/testdata/amp4email_feature_tests/no_latest_extensions.out b/validator/testdata/amp4email_feature_tests/no_latest_extensions.out
index 2dfb3ebe0b30a..5cf8f32978bc6 100644
--- a/validator/testdata/amp4email_feature_tests/no_latest_extensions.out
+++ b/validator/testdata/amp4email_feature_tests/no_latest_extensions.out
@@ -19,7 +19,7 @@ FAIL
 |    This checks that "latest" versions of extensions are not valid.
 |  -->
 |  <!doctype html>
-|  <html ⚡4email>
+|  <html ⚡4email data-css-strict>
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp4email-boilerplate>body{visibility:hidden}</style>
@@ -29,7 +29,7 @@ FAIL
 amp4email_feature_tests/no_latest_extensions.html:26:2 The attribute 'src' in tag 'SCRIPT[custom-element=amp-accordion] (AMP4EMAIL)' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-accordion-latest.js'. (see https://amp.dev/documentation/components/amp-accordion)
 |    <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-latest.js"></script>
 >>   ^~~~~~~~~
-amp4email_feature_tests/no_latest_extensions.html:27:2 The attribute 'src' in tag 'amp-anim extension .js script (AMP4EMAIL)' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-anim-latest.js'. (see https://amp.dev/documentation/components/amp-anim)
+amp4email_feature_tests/no_latest_extensions.html:27:2 The attribute 'src' in tag 'amp-anim extension script (AMP4EMAIL)' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-anim-latest.js'. (see https://amp.dev/documentation/components/amp-anim)
 |    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-latest.js"></script>
 >>   ^~~~~~~~~
 amp4email_feature_tests/no_latest_extensions.html:28:2 The attribute 'src' in tag 'SCRIPT[custom-element=amp-bind] (AMP4EMAIL)' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-bind-latest.js'. (see https://amp.dev/documentation/components/amp-bind)
diff --git a/validator/testdata/amp4email_feature_tests/nonce_disallowed.html b/validator/testdata/amp4email_feature_tests/nonce_disallowed.html
index e1f25a6816f75..e093b2e2e16b0 100644
--- a/validator/testdata/amp4email_feature_tests/nonce_disallowed.html
+++ b/validator/testdata/amp4email_feature_tests/nonce_disallowed.html
@@ -19,7 +19,7 @@
     amp4email.
 -->
 <!doctype html>
-<html ⚡4email>
+<html ⚡4email data-css-strict>
 <head>
   <meta charset="utf-8">
   <style amp4email-boilerplate>body{visibility:hidden}</style>
diff --git a/validator/testdata/amp4email_feature_tests/nonce_disallowed.out b/validator/testdata/amp4email_feature_tests/nonce_disallowed.out
index 8e85308d7c1a4..61f72038c3da5 100644
--- a/validator/testdata/amp4email_feature_tests/nonce_disallowed.out
+++ b/validator/testdata/amp4email_feature_tests/nonce_disallowed.out
@@ -20,13 +20,13 @@ FAIL
 |      amp4email.
 |  -->
 |  <!doctype html>
-|  <html ⚡4email>
+|  <html ⚡4email data-css-strict>
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp4email-boilerplate>body{visibility:hidden}</style>
 |    <script async src="https://cdn.ampproject.org/v0.js" nonce="disallowed"></script>
 >>   ^~~~~~~~~
-amp4email_feature_tests/nonce_disallowed.html:26:2 The attribute 'nonce' may not appear in tag 'amphtml engine v0.js script [AMP4EMAIL,ACTIONS]'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+amp4email_feature_tests/nonce_disallowed.html:26:2 The attribute 'nonce' may not appear in tag 'amphtml engine script'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |  </head>
 |  <body>
 |  Hello, world.
diff --git a/validator/testdata/feature_tests/ads.html b/validator/testdata/feature_tests/ads.html
index 030286d6410e5..0e9b2f4b035e2 100644
--- a/validator/testdata/feature_tests/ads.html
+++ b/validator/testdata/feature_tests/ads.html
@@ -91,6 +91,7 @@
         <option>adhese</option>
         <option>adman</option>
         <option>admanmedia</option>
+        <option>adnuntius</option>
         <option>adplugg</option>
         <option>adreactor</option>
         <option>adsense</option>
@@ -119,7 +120,6 @@
         <option>criteo</option>
         <option>csa</option>
         <option>custom</option>
-        <option>eas</option>
         <option>distroscale</option>
         <option>dotandads</option>
         <option>doubleclick</option>
@@ -171,6 +171,7 @@
         <option>purch</option>
         <option>capirs</option>
         <option>relap</option>
+        <option>remixd</option>
         <option>revcontent</option>
         <option>rubicon</option>
         <option>sharethrough</option>
@@ -304,6 +305,20 @@ <h2>AdmanMedia</h2>
       data-id="8e916419">
   </amp-ad>
 
+  <h2>Adnuntius</h2>
+  <amp-ad width="300" height="250"
+          type="adnuntius"
+          data-au-id="00000000000dbf78"
+          data-user-id="12341234"
+          data-site-id="56785678"
+          data-floor-price='{"amount":1.213,"currency": "AUD"}'
+          data-kv='[{"colors": ["red", "blue"]}]'
+          data-c='["sport/golf", "news"]'
+          data-latitude="123.4567"
+          data-longitude="234.5678"
+          data-segments='["1234", "5678"]'>
+  </amp-ad>
+
   <h2>AdPlugg</h2>
   <amp-ad width="300" height="250"
       type="adplugg"
@@ -380,7 +395,7 @@ <h2>AdThrive 300x250 banner</h2>
       data-sizes="300x250">
   </amp-ad>
 
-  <h2>Ad Up Technology</h2>
+  <h2>AdUp Technology</h2>
   <amp-ad width="500" height="250"
       type="aduptech"
       layout="fixed"
@@ -596,13 +611,6 @@ <h2>Custom leaderboard with no slot specified</h2>
     </template>
   </amp-ad>
 
-  <h2>Cxense Display</h2>
-  <amp-ad width="240" height="65"
-      type="eas"
-      data-eas-domain="stage.emediate.eu"
-      data-eas-cu="3255">
-  </amp-ad>
-
   <h2>DistroScale</h2>
   <amp-ad width="300" height="600"
       type="distroscale"
@@ -642,6 +650,21 @@ <h2>Doubleclick with RTC config</h2>
       rtc-config="{foo: bar}">
   </amp-ad>
 
+  <h2>Doubleclick with block-rtc attribute</h2>
+  <amp-ad width="320" height="50"
+      type="doubleclick"
+      data-slot="/4119129/mobile_ad_banner"
+      block-rtc="gdpr"
+      rtc-config="{foo: bar}">
+  </amp-ad>
+
+  <h2>Doubleclick with always-serve-npa attribute</h2>
+  <amp-ad width="320" height="50"
+      type="doubleclick"
+      data-slot="/4119129/mobile_ad_banner"
+      always-serve-npa="gdpr">
+  </amp-ad>
+
   <h2>Doubleclick with JSON based parameters</h2>
   <amp-ad width="320" height="50"
       type="doubleclick"
@@ -1077,6 +1100,14 @@ <h2>Relap</h2>
       data-anchorid="i0xMMY1MoliiZWVl">
   </amp-ad>
 
+  <h2>Remixd</h2>
+  <amp-ad width="375" height="120"
+      type="remixd"
+      layout="responsive"
+      data-version="5"
+      data-url="https://www.remixd.com/player/test/amp/index.html">
+  </amp-ad>
+
   <h2>Revcontent Responsive Tag</h2>
   <amp-ad width="320" height="240"
       type="revcontent"
diff --git a/validator/testdata/feature_tests/ads.out b/validator/testdata/feature_tests/ads.out
index da04162196b87..e044f33ff65a0 100644
--- a/validator/testdata/feature_tests/ads.out
+++ b/validator/testdata/feature_tests/ads.out
@@ -92,6 +92,7 @@ PASS
 |          <option>adhese</option>
 |          <option>adman</option>
 |          <option>admanmedia</option>
+|          <option>adnuntius</option>
 |          <option>adplugg</option>
 |          <option>adreactor</option>
 |          <option>adsense</option>
@@ -120,7 +121,6 @@ PASS
 |          <option>criteo</option>
 |          <option>csa</option>
 |          <option>custom</option>
-|          <option>eas</option>
 |          <option>distroscale</option>
 |          <option>dotandads</option>
 |          <option>doubleclick</option>
@@ -172,6 +172,7 @@ PASS
 |          <option>purch</option>
 |          <option>capirs</option>
 |          <option>relap</option>
+|          <option>remixd</option>
 |          <option>revcontent</option>
 |          <option>rubicon</option>
 |          <option>sharethrough</option>
@@ -305,6 +306,20 @@ PASS
 |        data-id="8e916419">
 |    </amp-ad>
 |
+|    <h2>Adnuntius</h2>
+|    <amp-ad width="300" height="250"
+|            type="adnuntius"
+|            data-au-id="00000000000dbf78"
+|            data-user-id="12341234"
+|            data-site-id="56785678"
+|            data-floor-price='{"amount":1.213,"currency": "AUD"}'
+|            data-kv='[{"colors": ["red", "blue"]}]'
+|            data-c='["sport/golf", "news"]'
+|            data-latitude="123.4567"
+|            data-longitude="234.5678"
+|            data-segments='["1234", "5678"]'>
+|    </amp-ad>
+|
 |    <h2>AdPlugg</h2>
 |    <amp-ad width="300" height="250"
 |        type="adplugg"
@@ -381,7 +396,7 @@ PASS
 |        data-sizes="300x250">
 |    </amp-ad>
 |
-|    <h2>Ad Up Technology</h2>
+|    <h2>AdUp Technology</h2>
 |    <amp-ad width="500" height="250"
 |        type="aduptech"
 |        layout="fixed"
@@ -597,13 +612,6 @@ PASS
 |      </template>
 |    </amp-ad>
 |
-|    <h2>Cxense Display</h2>
-|    <amp-ad width="240" height="65"
-|        type="eas"
-|        data-eas-domain="stage.emediate.eu"
-|        data-eas-cu="3255">
-|    </amp-ad>
-|
 |    <h2>DistroScale</h2>
 |    <amp-ad width="300" height="600"
 |        type="distroscale"
@@ -643,6 +651,21 @@ PASS
 |        rtc-config="{foo: bar}">
 |    </amp-ad>
 |
+|    <h2>Doubleclick with block-rtc attribute</h2>
+|    <amp-ad width="320" height="50"
+|        type="doubleclick"
+|        data-slot="/4119129/mobile_ad_banner"
+|        block-rtc="gdpr"
+|        rtc-config="{foo: bar}">
+|    </amp-ad>
+|
+|    <h2>Doubleclick with always-serve-npa attribute</h2>
+|    <amp-ad width="320" height="50"
+|        type="doubleclick"
+|        data-slot="/4119129/mobile_ad_banner"
+|        always-serve-npa="gdpr">
+|    </amp-ad>
+|
 |    <h2>Doubleclick with JSON based parameters</h2>
 |    <amp-ad width="320" height="50"
 |        type="doubleclick"
@@ -1078,6 +1101,14 @@ PASS
 |        data-anchorid="i0xMMY1MoliiZWVl">
 |    </amp-ad>
 |
+|    <h2>Remixd</h2>
+|    <amp-ad width="375" height="120"
+|        type="remixd"
+|        layout="responsive"
+|        data-version="5"
+|        data-url="https://www.remixd.com/player/test/amp/index.html">
+|    </amp-ad>
+|
 |    <h2>Revcontent Responsive Tag</h2>
 |    <amp-ad width="320" height="240"
 |        type="revcontent"
diff --git a/validator/testdata/feature_tests/amp-action-macro.out b/validator/testdata/feature_tests/amp-action-macro.out
index daec4244ec26c..9424b5ee2b33e 100644
--- a/validator/testdata/feature_tests/amp-action-macro.out
+++ b/validator/testdata/feature_tests/amp-action-macro.out
@@ -46,13 +46,13 @@ FAIL
 |    <!-- Invalid, requires ID -->
 |    <amp-action-macro execute="amp-component.doSomething()">
 >>   ^~~~~~~~~
-feature_tests/amp-action-macro.html:46:2 The mandatory attribute 'id' is missing in tag 'amp-action-macro'. (see https://amp.dev/documentation/components/amp-action-macro)
+feature_tests/amp-action-macro.html:46:2 The mandatory attribute 'id' is missing in tag 'amp-action-macro'. (see https://amp.dev/documentation/components/amp-action-macro/)
 |    </amp-action-macro>
 |
 |    <!-- Invalid, requires execute -->
 |    <amp-action-macro id="action-macro-id">
 >>   ^~~~~~~~~
-feature_tests/amp-action-macro.html:50:2 The mandatory attribute 'execute' is missing in tag 'amp-action-macro'. (see https://amp.dev/documentation/components/amp-action-macro)
+feature_tests/amp-action-macro.html:50:2 The mandatory attribute 'execute' is missing in tag 'amp-action-macro'. (see https://amp.dev/documentation/components/amp-action-macro/)
 |    </amp-action-macro>
 |
 |  </body>
diff --git a/validator/testdata/feature_tests/amp-image-slider.out b/validator/testdata/feature_tests/amp-image-slider.out
index bfc51a61f1187..45b96c66bcb35 100644
--- a/validator/testdata/feature_tests/amp-image-slider.out
+++ b/validator/testdata/feature_tests/amp-image-slider.out
@@ -44,7 +44,7 @@ FAIL
 |    <!-- Invalid, requires at least 2 children -->
 |    <amp-image-slider tabindex="0" layout="responsive" width="200" height="100">
 >>   ^~~~~~~~~
-feature_tests/amp-image-slider.html:44:2 Tag 'amp-image-slider' must have a minimum of 2 child tags - saw 1 child tags. (see https://amp.dev/documentation/components/amp-image-slider)
+feature_tests/amp-image-slider.html:44:2 Tag 'amp-image-slider' must have a minimum of 2 child tags - saw 1 child tags. (see https://amp.dev/documentation/components/amp-image-slider/)
 |      <amp-img src="/1.jpg" layout="fill"></amp-img>
 |    </amp-image-slider>
 |
@@ -52,7 +52,7 @@ feature_tests/amp-image-slider.html:44:2 Tag 'amp-image-slider' must have a mini
 |    <amp-image-slider tabindex="0" layout="responsive" width="200" height="100">
 |      <span>BAD CONTENT</span>
 >>     ^~~~~~~~~
-feature_tests/amp-image-slider.html:50:4 Tag 'span' is disallowed as child of tag 'amp-image-slider'. Child tag must be one of ['amp-img', 'div']. (see https://amp.dev/documentation/components/amp-image-slider)
+feature_tests/amp-image-slider.html:50:4 Tag 'span' is disallowed as child of tag 'amp-image-slider'. Child tag must be one of ['amp-img', 'div']. (see https://amp.dev/documentation/components/amp-image-slider/)
 |      <amp-img src="/1.jpg" layout="fill"></amp-img>
 |      <amp-img src="/2.jpg" layout="fill"></amp-img>
 |      <div first class="red">BEFORE</div>
@@ -82,9 +82,9 @@ feature_tests/amp-image-slider.html:59:2 The attribute 'second' may not appear i
 |    <!-- Invalid, both initial-slider-position and step-size should not be more than 1 -->
 |    <amp-image-slider tabindex="0" layout="responsive" width="200" height="100" initial-slider-position="1.5" step-size="1.5">
 >>   ^~~~~~~~~
-feature_tests/amp-image-slider.html:74:2 The attribute 'initial-slider-position' in tag 'amp-image-slider' is set to the invalid value '1.5'. (see https://amp.dev/documentation/components/amp-image-slider)
+feature_tests/amp-image-slider.html:74:2 The attribute 'initial-slider-position' in tag 'amp-image-slider' is set to the invalid value '1.5'. (see https://amp.dev/documentation/components/amp-image-slider/)
 >>   ^~~~~~~~~
-feature_tests/amp-image-slider.html:74:2 The attribute 'step-size' in tag 'amp-image-slider' is set to the invalid value '1.5'. (see https://amp.dev/documentation/components/amp-image-slider)
+feature_tests/amp-image-slider.html:74:2 The attribute 'step-size' in tag 'amp-image-slider' is set to the invalid value '1.5'. (see https://amp.dev/documentation/components/amp-image-slider/)
 |      <amp-img src="/1.jpg" layout="fill"></amp-img>
 |      <amp-img src="/2.jpg" layout="fill"></amp-img>
 |    </amp-image-slider>
diff --git a/validator/testdata/feature_tests/amp_actions.html b/validator/testdata/feature_tests/amp_actions.html
deleted file mode 100644
index e3e2b2f3279c7..0000000000000
--- a/validator/testdata/feature_tests/amp_actions.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!--
-  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.
--->
-<!--
-  Test Description:
-  Verifies that type identifier `actions` is not valid on an AMP document.
-  Will become FAIL once publishers are ready.
--->
-<!doctype html>
-<html ⚡ actions>
-<head>
-  <meta charset="utf-8">
-  <link rel="canonical" href="./regular-html-version.html">
-  <meta name="viewport" content="width=device-width">
-  <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>
-  <script async src="https://cdn.ampproject.org/v0.js"></script>
-</head>
-<body>
-Hello, world.
-</body>
-</html>
diff --git a/validator/testdata/feature_tests/amp_actions.out b/validator/testdata/feature_tests/amp_actions.out
deleted file mode 100644
index ee7dba148285e..0000000000000
--- a/validator/testdata/feature_tests/amp_actions.out
+++ /dev/null
@@ -1,36 +0,0 @@
-FAIL
-|  <!--
-|    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.
-|  -->
-|  <!--
-|    Test Description:
-|    Verifies that type identifier `actions` is not valid on an AMP document.
-|    Will become FAIL once publishers are ready.
-|  -->
-|  <!doctype html>
-|  <html ⚡ actions>
->> ^~~~~~~~~
-feature_tests/amp_actions.html:22:0 The attribute 'actions' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
-|  <head>
-|    <meta charset="utf-8">
-|    <link rel="canonical" href="./regular-html-version.html">
-|    <meta name="viewport" content="width=device-width">
-|    <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>
-|    <script async src="https://cdn.ampproject.org/v0.js"></script>
-|  </head>
-|  <body>
-|  Hello, world.
-|  </body>
-|  </html>
diff --git a/validator/testdata/feature_tests/amp_geo.html b/validator/testdata/feature_tests/amp_geo.html
index eaa81aae88854..63a3d4a426856 100644
--- a/validator/testdata/feature_tests/amp_geo.html
+++ b/validator/testdata/feature_tests/amp_geo.html
@@ -34,4 +34,3 @@
   </amp-geo>
 </body>
 </html>
-
diff --git a/validator/testdata/feature_tests/amp_layouts.html b/validator/testdata/feature_tests/amp_layouts.html
index 0dc5e1cc24ad8..39a776d32d5e6 100644
--- a/validator/testdata/feature_tests/amp_layouts.html
+++ b/validator/testdata/feature_tests/amp_layouts.html
@@ -43,6 +43,12 @@
   <!-- valid: layout=fixed-height -->
   <amp-img layout="fixed-height" height="200"  src="itshappening.gif"></amp-img>
 
+  <!-- invalid: layout value must be lower case -->
+  <amp-img layout="FIXED-HEIGHT" height="200"  src="itshappening.gif"></amp-img>
+
+  <!-- invalid: layout value must use hyphen rather than underscore -->
+  <amp-img layout="fixed_height" height="200"  src="itshappening.gif"></amp-img>
+
   <!-- valid: layout=fixed-height, with width=auto -->
   <amp-img layout="fixed-height" height="200" width="auto"
            src="itshappening.gif"></amp-img>
diff --git a/validator/testdata/feature_tests/amp_layouts.out b/validator/testdata/feature_tests/amp_layouts.out
index f59102a56e0cb..543511107a938 100644
--- a/validator/testdata/feature_tests/amp_layouts.out
+++ b/validator/testdata/feature_tests/amp_layouts.out
@@ -41,11 +41,21 @@ FAIL
 |    <!-- invalid: layout=fixed - requires width/height -->
 |    <amp-img layout="fixed"  src="itshappening.gif"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:41:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/amp_layouts.html:41:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |
 |    <!-- valid: layout=fixed-height -->
 |    <amp-img layout="fixed-height" height="200"  src="itshappening.gif"></amp-img>
 |
+|    <!-- invalid: layout value must be lower case -->
+|    <amp-img layout="FIXED-HEIGHT" height="200"  src="itshappening.gif"></amp-img>
+>>   ^~~~~~~~~
+feature_tests/amp_layouts.html:47:2 The attribute 'layout' in tag 'amp-img' is set to the invalid value 'FIXED-HEIGHT'. (see https://amp.dev/documentation/components/amp-img/)
+|
+|    <!-- invalid: layout value must use hyphen rather than underscore -->
+|    <amp-img layout="fixed_height" height="200"  src="itshappening.gif"></amp-img>
+>>   ^~~~~~~~~
+feature_tests/amp_layouts.html:50:2 The attribute 'layout' in tag 'amp-img' is set to the invalid value 'fixed_height'. (see https://amp.dev/documentation/components/amp-img/)
+|
 |    <!-- valid: layout=fixed-height, with width=auto -->
 |    <amp-img layout="fixed-height" height="200" width="auto"
 |             src="itshappening.gif"></amp-img>
@@ -53,7 +63,7 @@ feature_tests/amp_layouts.html:41:2 The mandatory attribute 'height' is missing
 |    <!-- invalid: layout=fixed-height, prohibit width!=auto -->
 |    <amp-img layout="fixed-height" height="200" width="300"
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:51:2 Invalid value '300' for attribute 'width' in tag 'amp-img' - for layout 'FIXED_HEIGHT', set the attribute 'width' to value 'auto'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/amp_layouts.html:57:2 Invalid value '300' for attribute 'width' in tag 'amp-img' - for layout 'FIXED_HEIGHT', set the attribute 'width' to value 'auto'. (see https://amp.dev/documentation/components/amp-img/)
 |             src="itshappening.gif"></amp-img>
 |
 |    <!-- valid: layout=fixed-height - default with height -->
@@ -65,7 +75,7 @@ feature_tests/amp_layouts.html:51:2 Invalid value '300' for attribute 'width' in
 |    <!-- invalid: layout=fixed-height - requires height -->
 |    <amp-img layout="fixed-height" src="itshappening.gif"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:61:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/amp_layouts.html:67:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |
 |    <!-- valid: layout=responsive -->
 |    <amp-img layout="responsive" width="100" height="200"
@@ -82,7 +92,7 @@ feature_tests/amp_layouts.html:61:2 The mandatory attribute 'height' is missing
 |         for flex-item -->
 |    <amp-img layout="fill" width="50" height="auto"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:76:2 The attribute 'height' in tag 'amp-img' is set to the invalid value 'auto'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/amp_layouts.html:82:2 The attribute 'height' in tag 'amp-img' is set to the invalid value 'auto'. (see https://amp.dev/documentation/components/amp-img/)
 |
 |    <!-- valid: layout=flex-item -->
 |    <amp-img layout="flex-item" src="itshappening.gif"></amp-img>
@@ -104,12 +114,12 @@ feature_tests/amp_layouts.html:76:2 The attribute 'height' in tag 'amp-img' is s
 |      -->
 |    <amp-img layout="container" src="itshappening.gif"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:96:2 The specified layout 'CONTAINER' is not supported by tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/amp_layouts.html:102:2 The specified layout 'CONTAINER' is not supported by tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |
 |    <!-- invalid: layout=unknown -->
 |    <amp-img layout="unknown" src="itshappening.gif"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:99:2 The attribute 'layout' in tag 'amp-img' is set to the invalid value 'unknown'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/amp_layouts.html:105:2 The attribute 'layout' in tag 'amp-img' is set to the invalid value 'unknown'. (see https://amp.dev/documentation/components/amp-img/)
 |
 |    <!-- valid: should configure natural dimensions; default layout -->
 |    <amp-pixel src="https://www.example.com/make-my-visit-count"></amp-pixel>
@@ -141,19 +151,19 @@ feature_tests/amp_layouts.html:99:2 The attribute 'layout' in tag 'amp-img' is s
 |         support fixed-height layout. -->
 |    <amp-pixel src="https://www.example.com/make-my-visit-count"
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:129:2 The implied layout 'FIXED_HEIGHT' is not supported by tag 'amp-pixel'. (see https://amp.dev/documentation/components/amp-pixel)
+feature_tests/amp_layouts.html:135:2 The implied layout 'FIXED_HEIGHT' is not supported by tag 'amp-pixel'. (see https://amp.dev/documentation/components/amp-pixel/)
 |               width="auto" height="1px"></amp-pixel>
 |
 |    <!-- invalid: width=X. -->
 |    <amp-pixel src="https://www.example.com/make-my-visit-count"
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:133:2 The attribute 'width' in tag 'amp-pixel' is set to the invalid value 'X'. (see https://amp.dev/documentation/components/amp-pixel)
+feature_tests/amp_layouts.html:139:2 The attribute 'width' in tag 'amp-pixel' is set to the invalid value 'X'. (see https://amp.dev/documentation/components/amp-pixel/)
 |               width="X" height="1px"></amp-pixel>
 |
 |    <!-- invalid: height=X. -->
 |    <amp-pixel src="https://www.example.com/make-my-visit-count"
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:137:2 The attribute 'height' in tag 'amp-pixel' is set to the invalid value 'X'. (see https://amp.dev/documentation/components/amp-pixel)
+feature_tests/amp_layouts.html:143:2 The attribute 'height' in tag 'amp-pixel' is set to the invalid value 'X'. (see https://amp.dev/documentation/components/amp-pixel/)
 |               height="X" width="1px"></amp-pixel>
 |
 |    <!-- valid responsive layout with heights -->
@@ -167,33 +177,33 @@ feature_tests/amp_layouts.html:137:2 The attribute 'height' in tag 'amp-pixel' i
 |    <!-- invalid: can't have heights with specified layout fixed -->
 |    <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n" width=400 height=300 layout="fixed"
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:149:2 The attribute 'heights' in tag 'amp-img' is disallowed by specified layout 'FIXED'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/amp_layouts.html:155:2 The attribute 'heights' in tag 'amp-img' is disallowed by specified layout 'FIXED'. (see https://amp.dev/documentation/components/amp-img/)
 |             heights="(min-width:760px)  33%, (min-width:500px) 75%, 125%" ></amp-img>
 |
 |    <!-- invalid: can't have heights with implied layout fixed_height -->
 |    <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n" height=300
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:153:2 The attribute 'heights' in tag 'amp-img' is disallowed by implied layout 'FIXED_HEIGHT'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/amp_layouts.html:159:2 The attribute 'heights' in tag 'amp-img' is disallowed by implied layout 'FIXED_HEIGHT'. (see https://amp.dev/documentation/components/amp-img/)
 |             heights="(min-width:760px)  33%, (min-width:500px) 75%, 125%" ></amp-img>
 |    <!-- valid: intrinsic has height and width set with same units -->
 |    <amp-img src="img.png" height="30px" width="300px" layout="intrinsic"></amp-img>
 |    <!-- invalid: intrinsic has height and width set with different units -->
 |    <amp-img src="img.png" height="30px" width="300em" layout="intrinsic"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:158:2 Inconsistent units for width and height in tag 'amp-img' - width is specified in 'em' whereas height is specified in 'px'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/amp_layouts.html:164:2 Inconsistent units for width and height in tag 'amp-img' - width is specified in 'em' whereas height is specified in 'px'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- invalid: intrinsic height and width can not be auto -->
 |    <amp-img src="img.png" height="auto" width="300px" layout="intrinsic"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:160:2 The attribute 'height' in tag 'amp-img' is set to the invalid value 'auto'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/amp_layouts.html:166:2 The attribute 'height' in tag 'amp-img' is set to the invalid value 'auto'. (see https://amp.dev/documentation/components/amp-img/)
 |    <amp-img src="img.png" height="30px" width="auto" layout="intrinsic"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:161:2 The attribute 'width' in tag 'amp-img' is set to the invalid value 'auto'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/amp_layouts.html:167:2 The attribute 'width' in tag 'amp-img' is set to the invalid value 'auto'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- invalid: intrinsic height and width must be set -->
 |    <amp-img src="img.png" height="30px" layout="intrinsic"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:163:2 The mandatory attribute 'width' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/amp_layouts.html:169:2 The mandatory attribute 'width' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |    <amp-img src="img.png" width="300px" layout="intrinsic"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/amp_layouts.html:164:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/amp_layouts.html:170:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |  </body>
 |  </html>
diff --git a/validator/testdata/feature_tests/amp_meta_tags.out b/validator/testdata/feature_tests/amp_meta_tags.out
index 8693c395003cd..92e740dcecd82 100644
--- a/validator/testdata/feature_tests/amp_meta_tags.out
+++ b/validator/testdata/feature_tests/amp_meta_tags.out
@@ -39,10 +39,10 @@ FAIL
 |         AMP documents. This should produce an error. -->
 |    <meta name=amp-tag-does-not-exist content="...">
 >>   ^~~~~~~~~
-feature_tests/amp_meta_tags.html:39:2 The attribute 'name' in tag 'meta name= and content=' is set to the invalid value 'amp-tag-does-not-exist'.
+feature_tests/amp_meta_tags.html:39:2 The attribute 'name' in tag 'meta' is set to the invalid value 'amp-tag-does-not-exist'.
 |
 |  </head>
 |  <body>
 |  Hello, world.
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/validator/testdata/feature_tests/amp_rtc.out b/validator/testdata/feature_tests/amp_rtc.out
index 470fc06b3b4bf..e9427c27b7e63 100644
--- a/validator/testdata/feature_tests/amp_rtc.out
+++ b/validator/testdata/feature_tests/amp_rtc.out
@@ -44,7 +44,7 @@ FAIL
 |    <!-- Invalid: found in body, duplicate -->
 |    <script type="application/json" id="amp-rtc">
 >>   ^~~~~~~~~
-feature_tests/amp_rtc.html:44:2 The parent tag of tag 'script id=amp-rtc' is 'body', but it can only be 'head'.
+feature_tests/amp_rtc.html:44:2 The parent tag of tag 'script' is 'body', but it can only be 'head'.
 |    {
 |      "doubleclick": {
 |        "url": "https://pub.com/rtc-endpoint",
diff --git a/validator/testdata/feature_tests/aria.out b/validator/testdata/feature_tests/aria.out
index caf7997a4e548..00f78b4863b58 100644
--- a/validator/testdata/feature_tests/aria.out
+++ b/validator/testdata/feature_tests/aria.out
@@ -37,16 +37,16 @@ FAIL
 |    <!-- invalid: missing role -->
 |    <amp-img on="tap:lightbox" tabindex="1" layout="fill" src="img"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/aria.html:37:2 The attribute 'role' in tag 'amp-img' is missing or incorrect, but required by attribute 'on'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/aria.html:37:2 The attribute 'role' in tag 'amp-img' is missing or incorrect, but required by attribute 'on'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- invalid: missing tabindex -->
 |    <amp-img on="tap:lightbox" role="button" layout="fill" src="img"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/aria.html:39:2 The attribute 'tabindex' in tag 'amp-img' is missing or incorrect, but required by attribute 'on'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/aria.html:39:2 The attribute 'tabindex' in tag 'amp-img' is missing or incorrect, but required by attribute 'on'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- invalid: missing both role and tabindex -->
 |    <amp-img on="tap:lightbox" layout="fill" src="img"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/aria.html:41:2 The attribute 'role' in tag 'amp-img' is missing or incorrect, but required by attribute 'on'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/aria.html:41:2 The attribute 'role' in tag 'amp-img' is missing or incorrect, but required by attribute 'on'. (see https://amp.dev/documentation/components/amp-img/)
 >>   ^~~~~~~~~
-feature_tests/aria.html:41:2 The attribute 'tabindex' in tag 'amp-img' is missing or incorrect, but required by attribute 'on'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/aria.html:41:2 The attribute 'tabindex' in tag 'amp-img' is missing or incorrect, but required by attribute 'on'. (see https://amp.dev/documentation/components/amp-img/)
 |  </body>
 |  </html>
diff --git a/validator/testdata/feature_tests/article-json-ld.html b/validator/testdata/feature_tests/article-json-ld.html
index 71cb8e4b1df86..c5ff2735d4b83 100644
--- a/validator/testdata/feature_tests/article-json-ld.html
+++ b/validator/testdata/feature_tests/article-json-ld.html
@@ -47,26 +47,27 @@
         background-color: gray;
       }
     </style>
+
+    <!--
+        For the JSON-LD below, the document referenced in mainEntityOfPage
+        should be the same as the canonical link above.
+
+        Also, please be aware that some platforms that use AMP HTML have
+        further restrictions with regards to some schema components.
+
+        For example:
+
+          * The leader "image" referenced in the markup below must appear
+          somewhere on the AMP HTML document itself.
+
+          * The URL for that "image" must precisely match the src of the
+          amp-img tag.
+
+          * All marked-up URLs should be absolute.
+
+          * The "logo" dimensions must not exceed 600x60.
+    -->
     <script type="application/ld+json">
-        //
-        // The document referenced in mainEntityOfPage should be the same as the
-        // canonical link above.
-        //
-        // Also, please be aware that some platforms that use AMP HTML have
-        // further restrictions with regards to some schema components.
-        //
-        // For example:
-        //
-        //   * The leader "image" referenced in the markup below must appear
-        //   somewhere on the AMP HTML document itself.
-        //
-        //   * The URL for that "image" must precisely match the src of the
-        //   amp-img tag.
-        //
-        //   * All marked-up URLs should be absolute.
-        //
-        //   * The "logo" dimensions must not exceed 600x60.
-        //
       {
         "@context": "http://schema.org",
         "@type": "NewsArticle",
diff --git a/validator/testdata/feature_tests/article-json-ld.out b/validator/testdata/feature_tests/article-json-ld.out
index ca9829d227c1b..a980a841d0f7b 100644
--- a/validator/testdata/feature_tests/article-json-ld.out
+++ b/validator/testdata/feature_tests/article-json-ld.out
@@ -48,26 +48,27 @@ PASS
 |          background-color: gray;
 |        }
 |      </style>
+|
+|      <!--
+|          For the JSON-LD below, the document referenced in mainEntityOfPage
+|          should be the same as the canonical link above.
+|
+|          Also, please be aware that some platforms that use AMP HTML have
+|          further restrictions with regards to some schema components.
+|
+|          For example:
+|
+|            * The leader "image" referenced in the markup below must appear
+|            somewhere on the AMP HTML document itself.
+|
+|            * The URL for that "image" must precisely match the src of the
+|            amp-img tag.
+|
+|            * All marked-up URLs should be absolute.
+|
+|            * The "logo" dimensions must not exceed 600x60.
+|      -->
 |      <script type="application/ld+json">
-|          //
-|          // The document referenced in mainEntityOfPage should be the same as the
-|          // canonical link above.
-|          //
-|          // Also, please be aware that some platforms that use AMP HTML have
-|          // further restrictions with regards to some schema components.
-|          //
-|          // For example:
-|          //
-|          //   * The leader "image" referenced in the markup below must appear
-|          //   somewhere on the AMP HTML document itself.
-|          //
-|          //   * The URL for that "image" must precisely match the src of the
-|          //   amp-img tag.
-|          //
-|          //   * All marked-up URLs should be absolute.
-|          //
-|          //   * The "logo" dimensions must not exceed 600x60.
-|          //
 |        {
 |          "@context": "http://schema.org",
 |          "@type": "NewsArticle",
diff --git a/validator/testdata/feature_tests/article.html b/validator/testdata/feature_tests/article.html
index 93e1dd5f7ea55..00d278f3e1d88 100644
--- a/validator/testdata/feature_tests/article.html
+++ b/validator/testdata/feature_tests/article.html
@@ -233,6 +233,7 @@
   <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
   <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
   <script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js" data-amp-report-test="amp-app-banner.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
   <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>
   <meta name="apple-itunes-app" content="app-id=828256236, app-argument=medium://p/cb7f223fad86">
   <link rel="manifest" href="medium-manifest.json">
diff --git a/validator/testdata/feature_tests/article.out b/validator/testdata/feature_tests/article.out
index fb3369a38dbd4..fbdc9873eb4c5 100644
--- a/validator/testdata/feature_tests/article.out
+++ b/validator/testdata/feature_tests/article.out
@@ -234,6 +234,7 @@ FAIL
 |    <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
 |    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
 |    <script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js" data-amp-report-test="amp-app-banner.js"></script>
+|    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
 |    <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>
 |    <meta name="apple-itunes-app" content="app-id=828256236, app-argument=medium://p/cb7f223fad86">
 |    <link rel="manifest" href="medium-manifest.json">
@@ -287,7 +288,7 @@ FAIL
 |    -->
 |    <content>
 >>   ^~~~~~~~~
-feature_tests/article.html:287:2 The tag 'content' is disallowed.
+feature_tests/article.html:288:2 The tag 'content' is disallowed.
 |      <div class="slot-fallback">
 |        This is a slot fallback.
 |      </div>
@@ -499,5 +500,3 @@ feature_tests/article.html:287:2 The tag 'content' is disallowed.
 |    </footer>
 |  </body>
 |  </html>
->>       ^~~~~~~~~
-feature_tests/article.html:498:6 The tag 'amp-video extension .js script' is missing or incorrect, but required by 'amp-video'. This will soon be an error. (see https://amp.dev/documentation/components/amp-video)
diff --git a/validator/testdata/feature_tests/bad_viewport.out b/validator/testdata/feature_tests/bad_viewport.out
index 3101f076c46b0..18233ea00e586 100644
--- a/validator/testdata/feature_tests/bad_viewport.out
+++ b/validator/testdata/feature_tests/bad_viewport.out
@@ -25,9 +25,9 @@ FAIL
 |    -->
 |    <meta name="viewport" content="foo=bar">
 >>   ^~~~~~~~~
-feature_tests/bad_viewport.html:25:2 The property 'foo' in attribute 'content' in tag 'meta name=viewport' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/bad_viewport.html:25:2 The property 'foo' in attribute 'content' in tag 'meta name=viewport' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >>   ^~~~~~~~~
-feature_tests/bad_viewport.html:25:2 The property 'width' is missing from attribute 'content' in tag 'meta name=viewport'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/bad_viewport.html:25:2 The property 'width' is missing from attribute 'content' in tag 'meta name=viewport'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |  </head>
diff --git a/validator/testdata/feature_tests/comment_tags.out b/validator/testdata/feature_tests/comment_tags.out
index c9d8fb8486dee..7b4120f8da3e3 100644
--- a/validator/testdata/feature_tests/comment_tags.out
+++ b/validator/testdata/feature_tests/comment_tags.out
@@ -40,6 +40,6 @@ FAIL
 |         as closing the comment. -->
 |    <!-- --!><script></script>
 >>            ^~~~~~~~~
-feature_tests/comment_tags.html:40:11 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+feature_tests/comment_tags.html:40:11 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/validator/testdata/feature_tests/css-moz-document.html b/validator/testdata/feature_tests/css-moz-document.html
new file mode 100644
index 0000000000000..02f7530513dd6
--- /dev/null
+++ b/validator/testdata/feature_tests/css-moz-document.html
@@ -0,0 +1,40 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests usage of `@-moz-document` in the style tag CSS. See
+  https://github.com/ampproject/amphtml/issues/26406 for the original context.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
+  <style amp-custom>
+    /* Valid: */
+    @-moz-document url-prefix() {}
+    @-moz-document url-prefix(https://site.example) {}
+    /* Invalid: Only -moz- prefix supported */
+    @-ms-document url-prefix() {}
+    @document url-prefix() {}
+  </style>
+  <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>
+  <script src="https://cdn.ampproject.org/v0.js" async></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/validator/testdata/feature_tests/css-moz-document.out b/validator/testdata/feature_tests/css-moz-document.out
new file mode 100644
index 0000000000000..0a0b2db4e6dcf
--- /dev/null
+++ b/validator/testdata/feature_tests/css-moz-document.out
@@ -0,0 +1,45 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests usage of `@-moz-document` in the style tag CSS. See
+|    https://github.com/ampproject/amphtml/issues/26406 for the original context.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
+|    <style amp-custom>
+|      /* Valid: */
+|      @-moz-document url-prefix() {}
+|      @-moz-document url-prefix(https://site.example) {}
+|      /* Invalid: Only -moz- prefix supported */
+|      @-ms-document url-prefix() {}
+>>     ^~~~~~~~~
+feature_tests/css-moz-document.html:32:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@-ms-document'.
+|      @document url-prefix() {}
+>>     ^~~~~~~~~
+feature_tests/css-moz-document.html:33:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@document'.
+|    </style>
+|    <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>
+|    <script src="https://cdn.ampproject.org/v0.js" async></script>
+|  </head>
+|  <body>
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/css_declarations.out b/validator/testdata/feature_tests/css_declarations.out
index c2ec9b2d172f2..08e984a70eddc 100644
--- a/validator/testdata/feature_tests/css_declarations.out
+++ b/validator/testdata/feature_tests/css_declarations.out
@@ -1,4 +1,4 @@
-FAIL
+PASS
 |  <!--
 |    Copyright 2020 The AMP HTML Authors. All Rights Reserved.
 |
@@ -314,8 +314,6 @@ FAIL
 |  <b style='align-items: foo'></b>
 |  <b style='align-self: foo'></b>
 |  <b style='alignment-baseline: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:315:0 The property 'alignment-baseline' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='all: foo'></b>
 |  <b style='animation-delay: foo'></b>
 |  <b style='animation-direction: foo'></b>
@@ -338,8 +336,6 @@ feature_tests/css_declarations.html:315:0 The property 'alignment-baseline' in a
 |  <b style='background-size: foo'></b>
 |  <b style='background: foo'></b>
 |  <b style='baseline-shift: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:337:0 The property 'baseline-shift' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='border-bottom-color: foo'></b>
 |  <b style='border-bottom-left-radius: foo'></b>
 |  <b style='border-bottom-right-radius: foo'></b>
@@ -385,21 +381,11 @@ feature_tests/css_declarations.html:337:0 The property 'baseline-shift' in attri
 |  <b style='clear: foo'></b>
 |  <b style='clip-path: foo'></b>
 |  <b style='clip-rule: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:382:0 The property 'clip-rule' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='clip: foo'></b>
 |  <b style='color-interpolation-filters: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:384:0 The property 'color-interpolation-filters' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='color-interpolation: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:385:0 The property 'color-interpolation' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='color-profile: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:386:0 The property 'color-profile' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='color-rendering: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:387:0 The property 'color-rendering' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='color: foo'></b>
 |  <b style='column-count: foo'></b>
 |  <b style='column-fill: foo'></b>
@@ -418,21 +404,11 @@ feature_tests/css_declarations.html:387:0 The property 'color-rendering' in attr
 |  <b style='direction: foo'></b>
 |  <b style='display: foo'></b>
 |  <b style='dominant-baseline: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:405:0 The property 'dominant-baseline' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='empty-cells: foo'></b>
 |  <b style='enable-background: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:407:0 The property 'enable-background' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='fill-opacity: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:408:0 The property 'fill-opacity' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='fill-rule: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:409:0 The property 'fill-rule' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='fill: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:410:0 The property 'fill' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='filter: foo'></b>
 |  <b style='flex-basis: foo'></b>
 |  <b style='flex-direction: foo'></b>
@@ -443,11 +419,7 @@ feature_tests/css_declarations.html:410:0 The property 'fill' in attribute 'styl
 |  <b style='flex: foo'></b>
 |  <b style='float: foo'></b>
 |  <b style='flood-color: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:420:0 The property 'flood-color' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='flood-opacity: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:421:0 The property 'flood-opacity' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='font-family: foo'></b>
 |  <b style='font-feature-settings: foo'></b>
 |  <b style='font-kerning: foo'></b>
@@ -467,11 +439,7 @@ feature_tests/css_declarations.html:421:0 The property 'flood-opacity' in attrib
 |  <b style='font-weight: foo'></b>
 |  <b style='font: foo'></b>
 |  <b style='glyph-orientation-horizontal: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:440:0 The property 'glyph-orientation-horizontal' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='glyph-orientation-vertical: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:441:0 The property 'glyph-orientation-vertical' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='grid-area: foo'></b>
 |  <b style='grid-auto-columns: foo'></b>
 |  <b style='grid-auto-flow: foo'></b>
@@ -497,13 +465,9 @@ feature_tests/css_declarations.html:441:0 The property 'glyph-orientation-vertic
 |  <b style='isolation: foo'></b>
 |  <b style='justify-content: foo'></b>
 |  <b style='kerning: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:466:0 The property 'kerning' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='left: foo'></b>
 |  <b style='letter-spacing: foo'></b>
 |  <b style='lighting-color: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:469:0 The property 'lighting-color' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='line-break: foo'></b>
 |  <b style='line-height: foo'></b>
 |  <b style='list-style-image: foo'></b>
@@ -516,20 +480,10 @@ feature_tests/css_declarations.html:469:0 The property 'lighting-color' in attri
 |  <b style='margin-top: foo'></b>
 |  <b style='margin: foo'></b>
 |  <b style='marker-end: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:481:0 The property 'marker-end' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='marker-mid: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:482:0 The property 'marker-mid' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='marker-start: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:483:0 The property 'marker-start' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='marker: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:484:0 The property 'marker' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='mask: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:485:0 The property 'mask' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='max-height: foo'></b>
 |  <b style='max-width: foo'></b>
 |  <b style='min-height: foo'></b>
@@ -566,45 +520,21 @@ feature_tests/css_declarations.html:485:0 The property 'mask' in attribute 'styl
 |  <b style='resize: foo'></b>
 |  <b style='right: foo'></b>
 |  <b style='shape-rendering: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:521:0 The property 'shape-rendering' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stop-color: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:522:0 The property 'stop-color' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stop-opacity: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:523:0 The property 'stop-opacity' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke-dasharray: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:524:0 The property 'stroke-dasharray' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke-dashoffset: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:525:0 The property 'stroke-dashoffset' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke-linecap: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:526:0 The property 'stroke-linecap' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke-linejoin: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:527:0 The property 'stroke-linejoin' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke-miterlimit: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:528:0 The property 'stroke-miterlimit' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke-opacity: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:529:0 The property 'stroke-opacity' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke-width: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:530:0 The property 'stroke-width' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='stroke: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:531:0 The property 'stroke' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='tab-size: foo'></b>
 |  <b style='table-layout: foo'></b>
 |  <b style='text-align-last: foo'></b>
 |  <b style='text-align: foo'></b>
 |  <b style='text-anchor: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:536:0 The property 'text-anchor' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='text-combine-upright: foo'></b>
 |  <b style='text-decoration-color: foo'></b>
 |  <b style='text-decoration-line: foo'></b>
@@ -617,8 +547,6 @@ feature_tests/css_declarations.html:536:0 The property 'text-anchor' in attribut
 |  <b style='text-orientation: foo'></b>
 |  <b style='text-overflow: foo'></b>
 |  <b style='text-rendering: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:548:0 The property 'text-rendering' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='text-shadow: foo'></b>
 |  <b style='text-stroke-color: foo'></b>
 |  <b style='text-stroke-width: foo'></b>
@@ -648,14 +576,8 @@ feature_tests/css_declarations.html:548:0 The property 'text-rendering' in attri
 |  <b style='z-index: foo'></b>
 |  <!-- Made-up decls -->
 |  <b style='amplitude: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:577:0 The property 'amplitude' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='barometric-pressure: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:578:0 The property 'barometric-pressure' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <b style='degrees-celsius: foo'></b>
->> ^~~~~~~~~
-feature_tests/css_declarations.html:579:0 The property 'degrees-celsius' in attribute 'style' in tag 'b' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |  <!-- Vendor Prefix -->
 |  <b style="-webkit-user-select: foo;"></b>
 |
@@ -927,14 +849,8 @@ feature_tests/css_declarations.html:579:0 The property 'degrees-celsius' in attr
 |    <path style='z-index: foo'></path>
 |    <!-- Made-up decls -->
 |    <path style='amplitude: foo'></path>
->>   ^~~~~~~~~
-feature_tests/css_declarations.html:850:2 The property 'amplitude' in attribute 'style' in tag 'path' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |    <path style='barometric-pressure: foo'></path>
->>   ^~~~~~~~~
-feature_tests/css_declarations.html:851:2 The property 'barometric-pressure' in attribute 'style' in tag 'path' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |    <path style='degrees-celsius: foo'></path>
->>   ^~~~~~~~~
-feature_tests/css_declarations.html:852:2 The property 'degrees-celsius' in attribute 'style' in tag 'path' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |    <!-- Vendor Prefix -->
 |    <path style="-webkit-user-select: foo;"></b>
 |  </svg>
diff --git a/validator/testdata/feature_tests/css_i_amphtml.html b/validator/testdata/feature_tests/css_i_amphtml.html
new file mode 100644
index 0000000000000..4f958ecd2bc28
--- /dev/null
+++ b/validator/testdata/feature_tests/css_i_amphtml.html
@@ -0,0 +1,40 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests for excluded `i-amphtml` in the author stylesheet and inline style.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <style amp-custom>
+    i-amphtml-sizer {}
+    .i-amphtml-hidden {}
+    #i-amphtml-wrapper {}
+    .foo-i-amphtml { color: var(--i-amphtml-clr); }
+  </style>
+</head>
+<body>
+  Hello, world.
+  <div style="i-amphtml-hidden: none;"></div>
+  <div style="--i-amphtml-clr: #ccc;"></div>
+</body>
+</html>
diff --git a/validator/testdata/feature_tests/css_i_amphtml.out b/validator/testdata/feature_tests/css_i_amphtml.out
new file mode 100644
index 0000000000000..946b9f70b7345
--- /dev/null
+++ b/validator/testdata/feature_tests/css_i_amphtml.out
@@ -0,0 +1,47 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for excluded `i-amphtml` in the author stylesheet and inline style.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <style amp-custom>
+>>   ^~~~~~~~~
+feature_tests/css_i_amphtml.html:28:2 The text inside tag 'style amp-custom' contains 'CSS i-amphtml- name prefix', which is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
+|      i-amphtml-sizer {}
+|      .i-amphtml-hidden {}
+|      #i-amphtml-wrapper {}
+|      .foo-i-amphtml { color: var(--i-amphtml-clr); }
+|    </style>
+|  </head>
+|  <body>
+|    Hello, world.
+|    <div style="i-amphtml-hidden: none;"></div>
+>>   ^~~~~~~~~
+feature_tests/css_i_amphtml.html:37:2 The property 'i-amphtml-hidden' in attribute 'style' in tag 'div' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|    <div style="--i-amphtml-clr: #ccc;"></div>
+>>   ^~~~~~~~~
+feature_tests/css_i_amphtml.html:38:2 The property '--i-amphtml-clr' in attribute 'style' in tag 'div' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/custom_element_case.out b/validator/testdata/feature_tests/custom_element_case.out
index a71966cdddd5f..87471648a374a 100644
--- a/validator/testdata/feature_tests/custom_element_case.out
+++ b/validator/testdata/feature_tests/custom_element_case.out
@@ -30,7 +30,7 @@ FAIL
 |    <!-- Invalid: custom-element value is case-sensitive -->
 |    <script async custom-element='Amp-Analytics'
 >>   ^~~~~~~~~
-feature_tests/custom_element_case.html:30:2 The attribute 'custom-element' may not appear in tag 'amp-analytics extension .js script'. (see https://amp.dev/documentation/components/amp-analytics)
+feature_tests/custom_element_case.html:30:2 The attribute 'custom-element' may not appear in tag 'amp-analytics extension script'. (see https://amp.dev/documentation/components/amp-analytics)
 |       src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'></script>
 |
 |  </runhead>
diff --git a/validator/testdata/feature_tests/deprecation_warnings_and_errors.out b/validator/testdata/feature_tests/deprecation_warnings_and_errors.out
index 60ce76c186f88..96743d7f59564 100644
--- a/validator/testdata/feature_tests/deprecation_warnings_and_errors.out
+++ b/validator/testdata/feature_tests/deprecation_warnings_and_errors.out
@@ -29,10 +29,10 @@ FAIL
 |    <meta name="viewport" content="width=device-width,minimum-scale=1">
 |    <style>body {opacity: 0}</style>
 >>   ^~~~~~~~~
-feature_tests/deprecation_warnings_and_errors.html:29:2 The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/deprecation_warnings_and_errors.html:29:2 The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |    <noscript><style>body {opacity: 1}</style></noscript>
 >>             ^~~~~~~~~
-feature_tests/deprecation_warnings_and_errors.html:30:12 The parent tag of tag 'style amp-custom' is 'noscript', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/deprecation_warnings_and_errors.html:30:12 The parent tag of tag 'style amp-custom' is 'noscript', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |  </head>
 |  <body>
@@ -42,6 +42,6 @@ feature_tests/deprecation_warnings_and_errors.html:34:0 The tag 'disallowed-tag'
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-feature_tests/deprecation_warnings_and_errors.html:36:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/deprecation_warnings_and_errors.html:36:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >>       ^~~~~~~~~
-feature_tests/deprecation_warnings_and_errors.html:36:6 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/deprecation_warnings_and_errors.html:36:6 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
diff --git a/validator/testdata/feature_tests/doctype_lang.html b/validator/testdata/feature_tests/doctype_lang.html
new file mode 100644
index 0000000000000..46a3494599b27
--- /dev/null
+++ b/validator/testdata/feature_tests/doctype_lang.html
@@ -0,0 +1,33 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  This tests what the validator outputs if the doctype uses a lang attribute.
+  https://github.com/ampproject/amphtml/issues/25926
+-->
+<!doctype html lang=en>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+Hello, world.
+</body>
+</html>
diff --git a/validator/testdata/feature_tests/doctype_lang.out b/validator/testdata/feature_tests/doctype_lang.out
new file mode 100644
index 0000000000000..db942bbf77fc5
--- /dev/null
+++ b/validator/testdata/feature_tests/doctype_lang.out
@@ -0,0 +1,36 @@
+PASS
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This tests what the validator outputs if the doctype uses a lang attribute.
+|    https://github.com/ampproject/amphtml/issues/25926
+|  -->
+|  <!doctype html lang=en>
+>> ^~~~~~~~~
+feature_tests/doctype_lang.html:21:0 The attribute 'lang' in tag 'html !doctype' is deprecated - use 'html' instead. (see https://github.com/ampproject/amphtml/issues/25926)
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|  Hello, world.
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/doctype_lang.out.cpponly b/validator/testdata/feature_tests/doctype_lang.out.cpponly
new file mode 100644
index 0000000000000..251a907572b85
--- /dev/null
+++ b/validator/testdata/feature_tests/doctype_lang.out.cpponly
@@ -0,0 +1,34 @@
+PASS
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This tests what the validator outputs if the doctype uses a lang attribute.
+|    https://github.com/ampproject/amphtml/issues/25926
+|  -->
+|  <!doctype html lang=en>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|  Hello, world.
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/duplicate_attribute.html b/validator/testdata/feature_tests/duplicate_attribute.html
index 46e68dbab8e19..50f1501430bc6 100644
--- a/validator/testdata/feature_tests/duplicate_attribute.html
+++ b/validator/testdata/feature_tests/duplicate_attribute.html
@@ -38,8 +38,8 @@
    <amp-img src="a.png" width=600 width='100%' height=800></amp-img>
 
    <!-- Let's make sure the script type can't be overridden -->
-   <script type="application/ld+json" type="text/javascript"></script>
-   <script type="text/javascript" type="application/ld+json"></script>
+   <script type="application/ld+json" type="text/javascript">{}</script>
+   <script type="text/javascript" type="application/ld+json">{}</script>
 
 </body>
 </html>
diff --git a/validator/testdata/feature_tests/duplicate_attribute.out b/validator/testdata/feature_tests/duplicate_attribute.out
index 9053cc6480679..c324b777580a4 100644
--- a/validator/testdata/feature_tests/duplicate_attribute.out
+++ b/validator/testdata/feature_tests/duplicate_attribute.out
@@ -35,7 +35,7 @@ feature_tests/duplicate_attribute.html:30:2 The tag 'script' contains the attrib
 >>   ^~~~~~~~~
 feature_tests/duplicate_attribute.html:31:2 The tag 'script' contains the attribute 'custom-element' repeated multiple times.
 >>   ^~~~~~~~~
-feature_tests/duplicate_attribute.html:31:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+feature_tests/duplicate_attribute.html:31:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |
 |  </head>
 |  <body>
@@ -45,20 +45,20 @@ feature_tests/duplicate_attribute.html:31:2 Custom JavaScript is not allowed. (s
 >>    ^~~~~~~~~
 feature_tests/duplicate_attribute.html:37:3 The tag 'amp-img' contains the attribute 'width' repeated multiple times.
 >>    ^~~~~~~~~
-feature_tests/duplicate_attribute.html:37:3 The attribute 'width' in tag 'amp-img' is set to the invalid value '100%'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/duplicate_attribute.html:37:3 The attribute 'width' in tag 'amp-img' is set to the invalid value '100%'. (see https://amp.dev/documentation/components/amp-img/)
 |     <amp-img src="a.png" width=600 width='100%' height=800></amp-img>
 >>    ^~~~~~~~~
 feature_tests/duplicate_attribute.html:38:3 The tag 'amp-img' contains the attribute 'width' repeated multiple times.
 |
 |     <!-- Let's make sure the script type can't be overridden -->
-|     <script type="application/ld+json" type="text/javascript"></script>
+|     <script type="application/ld+json" type="text/javascript">{}</script>
 >>    ^~~~~~~~~
 feature_tests/duplicate_attribute.html:41:3 The tag 'script' contains the attribute 'type' repeated multiple times.
-|     <script type="text/javascript" type="application/ld+json"></script>
+|     <script type="text/javascript" type="application/ld+json">{}</script>
 >>    ^~~~~~~~~
 feature_tests/duplicate_attribute.html:42:3 The tag 'script' contains the attribute 'type' repeated multiple times.
 >>    ^~~~~~~~~
-feature_tests/duplicate_attribute.html:42:3 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+feature_tests/duplicate_attribute.html:42:3 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/validator/testdata/feature_tests/duplicate_attribute.out.cpponly b/validator/testdata/feature_tests/duplicate_attribute.out.cpponly
new file mode 100644
index 0000000000000..b521476a1cc2e
--- /dev/null
+++ b/validator/testdata/feature_tests/duplicate_attribute.out.cpponly
@@ -0,0 +1,64 @@
+FAIL
+|  <!--
+|    Copyright 2015 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This is the minimum valid AMP document; it includes all of the required
+|    fields from the spec, but nothing else.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <!-- These two duplicate a custom-element attribute used as a dispatch key -->
+|    <script async custom-element="amp-image-lightbox" custom-element="duplicate" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
+>>   ^~~~~~~~~
+feature_tests/duplicate_attribute.html:30:2 The tag 'script' contains the attribute 'custom-element' repeated multiple times.
+|    <script async custom-element="duplicate" custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
+>>   ^~~~~~~~~
+feature_tests/duplicate_attribute.html:31:2 The tag 'script' contains the attribute 'custom-element' repeated multiple times.
+>>   ^~~~~~~~~
+feature_tests/duplicate_attribute.html:31:2 The attribute 'custom-element' may not appear in tag 'amp-youtube v0.1 extension script'. (see https://amp.dev/documentation/components/amp-youtube)
+|
+|  </head>
+|  <body>
+|
+|     <!-- 600 width is legal given the implied layout, but 100% is not -->
+|     <amp-img src="a.png" width='100%' width=600 height=800></amp-img>
+>>    ^~~~~~~~~
+feature_tests/duplicate_attribute.html:37:3 The tag 'amp-img' contains the attribute 'width' repeated multiple times.
+>>    ^~~~~~~~~
+feature_tests/duplicate_attribute.html:37:3 The attribute 'width' in tag 'amp-img' is set to the invalid value '100%'. (see https://amp.dev/documentation/components/amp-img/)
+|     <amp-img src="a.png" width=600 width='100%' height=800></amp-img>
+>>    ^~~~~~~~~
+feature_tests/duplicate_attribute.html:38:3 The tag 'amp-img' contains the attribute 'width' repeated multiple times.
+|
+|     <!-- Let's make sure the script type can't be overridden -->
+|     <script type="application/ld+json" type="text/javascript">{}</script>
+>>    ^~~~~~~~~
+feature_tests/duplicate_attribute.html:41:3 The tag 'script' contains the attribute 'type' repeated multiple times.
+|     <script type="text/javascript" type="application/ld+json">{}</script>
+>>    ^~~~~~~~~
+feature_tests/duplicate_attribute.html:42:3 The tag 'script' contains the attribute 'type' repeated multiple times.
+>>    ^~~~~~~~~
+feature_tests/duplicate_attribute.html:42:3 The attribute 'type' in tag 'script type=application/ld+json' is set to the invalid value 'text/javascript'.
+|
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/duplicate_unique_tags_and_wrong_parents.out b/validator/testdata/feature_tests/duplicate_unique_tags_and_wrong_parents.out
index 6a0c1118b6e27..49af7b5cf7417 100644
--- a/validator/testdata/feature_tests/duplicate_unique_tags_and_wrong_parents.out
+++ b/validator/testdata/feature_tests/duplicate_unique_tags_and_wrong_parents.out
@@ -31,12 +31,12 @@ FAIL
 |    <!-- This tag is duplicate, but must be unique. -->
 |    <style amp-custom>a { second: style; }</style>
 >>   ^~~~~~~~~
-feature_tests/duplicate_unique_tags_and_wrong_parents.html:31:2 The tag 'style amp-custom' appears more than once in the document. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/duplicate_unique_tags_and_wrong_parents.html:31:2 The tag 'style amp-custom' appears more than once in the document. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |  </head>
 |  <body>
 |  <!-- Style isn't allowed inside body -->
 |  <style amp-custom>Wrong parent tag.</style>
 >> ^~~~~~~~~
-feature_tests/duplicate_unique_tags_and_wrong_parents.html:35:0 The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/duplicate_unique_tags_and_wrong_parents.html:35:0 The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |  </body>
 |  </html>
diff --git a/validator/testdata/feature_tests/empty.out b/validator/testdata/feature_tests/empty.out
index 8da04ca19fd8f..390ef6a0614f5 100644
--- a/validator/testdata/feature_tests/empty.out
+++ b/validator/testdata/feature_tests/empty.out
@@ -1,24 +1,24 @@
 FAIL
 |
 >> ^~~~~~~~~
-feature_tests/empty.html:1:0 The mandatory tag 'html doctype' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/empty.html:1:0 The mandatory tag 'html !doctype' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >> ^~~~~~~~~
-feature_tests/empty.html:1:0 The mandatory tag 'html' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/empty.html:1:0 The mandatory tag 'html' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >> ^~~~~~~~~
-feature_tests/empty.html:1:0 The mandatory tag 'head' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/empty.html:1:0 The mandatory tag 'head' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >> ^~~~~~~~~
-feature_tests/empty.html:1:0 The mandatory tag 'link rel=canonical' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/empty.html:1:0 The mandatory tag 'link rel=canonical' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >> ^~~~~~~~~
-feature_tests/empty.html:1:0 The mandatory tag 'meta charset=utf-8' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/empty.html:1:0 The mandatory tag 'meta charset=utf-8' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >> ^~~~~~~~~
-feature_tests/empty.html:1:0 The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/empty.html:1:0 The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >> ^~~~~~~~~
-feature_tests/empty.html:1:0 The mandatory tag 'body' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/empty.html:1:0 The mandatory tag 'body' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >> ^~~~~~~~~
-feature_tests/empty.html:1:0 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/empty.html:1:0 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >> ^~~~~~~~~
-feature_tests/empty.html:1:0 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/empty.html:1:0 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >> ^~~~~~~~~
-feature_tests/empty.html:1:0 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/empty.html:1:0 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >> ^~~~~~~~~
-feature_tests/empty.html:1:0 The mandatory tag 'amphtml engine v0.js script' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/empty.html:1:0 The mandatory tag 'amphtml engine script' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
diff --git a/validator/testdata/feature_tests/empty.out.cpponly b/validator/testdata/feature_tests/empty.out.cpponly
new file mode 100644
index 0000000000000..025e0cd298801
--- /dev/null
+++ b/validator/testdata/feature_tests/empty.out.cpponly
@@ -0,0 +1,24 @@
+FAIL
+|
+>> ^~~~~~~~~
+feature_tests/empty.html:1:0 The mandatory attribute '⚡' is missing in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+>> ^~~~~~~~~
+feature_tests/empty.html:1:0 The parent tag of tag 'html' is '$root', but it can only be '!doctype'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+>> ^~~~~~~~~
+feature_tests/empty.html:1:0 Tag or text which is only allowed inside the body section found outside of the body section.
+>> ^~~~~~~~~
+feature_tests/empty.html:1:0 The mandatory tag 'html !doctype' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+>> ^~~~~~~~~
+feature_tests/empty.html:1:0 The mandatory tag 'link rel=canonical' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+>> ^~~~~~~~~
+feature_tests/empty.html:1:0 The mandatory tag 'meta charset=utf-8' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+>> ^~~~~~~~~
+feature_tests/empty.html:1:0 The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+>> ^~~~~~~~~
+feature_tests/empty.html:1:0 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
+>> ^~~~~~~~~
+feature_tests/empty.html:1:0 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
+>> ^~~~~~~~~
+feature_tests/empty.html:1:0 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
+>> ^~~~~~~~~
+feature_tests/empty.html:1:0 The mandatory tag 'amphtml engine script' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
diff --git a/validator/testdata/feature_tests/error_and_unique.out b/validator/testdata/feature_tests/error_and_unique.out
index cc548fce355bb..738b6630ed3ff 100644
--- a/validator/testdata/feature_tests/error_and_unique.out
+++ b/validator/testdata/feature_tests/error_and_unique.out
@@ -32,7 +32,7 @@ FAIL
 |
 |    <style>.bar {}</style>
 >>   ^~~~~~~~~
-feature_tests/error_and_unique.html:32:2 The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/error_and_unique.html:32:2 The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |    <style amp-custom>.foo {}</style>
 |
 |  </head>
diff --git a/validator/testdata/feature_tests/everything.out b/validator/testdata/feature_tests/everything.out
index bb435b7826a55..3a66d2e1cc66d 100644
--- a/validator/testdata/feature_tests/everything.out
+++ b/validator/testdata/feature_tests/everything.out
@@ -466,4 +466,4 @@ PASS
 |    </div>
 |  </article>
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/validator/testdata/feature_tests/extensions.out b/validator/testdata/feature_tests/extensions.out
index a044ee60cbdbe..c23faac7ad0dc 100644
--- a/validator/testdata/feature_tests/extensions.out
+++ b/validator/testdata/feature_tests/extensions.out
@@ -42,10 +42,10 @@ FAIL
 |    <!-- Extension missing. Produces error. -->
 |    <amp-analytics type="googleanalytics">
 >>   ^~~~~~~~~
-feature_tests/extensions.html:42:2 The tag 'amp-analytics' requires including the 'amp-analytics' extension JavaScript. (see https://amp.dev/documentation/components/amp-analytics)
+feature_tests/extensions.html:42:2 The tag 'amp-analytics' requires including the 'amp-analytics' extension JavaScript. (see https://amp.dev/documentation/components/amp-analytics/)
 |      <script type="application/json">{}</script>
 >>     ^~~~~~~~~
-feature_tests/extensions.html:43:4 The tag 'amp-analytics extension .json script' requires including the 'amp-analytics' extension JavaScript. (see https://amp.dev/documentation/components/amp-analytics)
+feature_tests/extensions.html:43:4 The tag 'amp-analytics extension .json script' requires including the 'amp-analytics' extension JavaScript. (see https://amp.dev/documentation/components/amp-analytics/)
 |    </amp-analytics>
 |
 |  Hello, world.
diff --git a/validator/testdata/feature_tests/forms.html b/validator/testdata/feature_tests/forms.html
index adbc095e8d917..719d460e1fab6 100644
--- a/validator/testdata/feature_tests/forms.html
+++ b/validator/testdata/feature_tests/forms.html
@@ -125,6 +125,13 @@
   <form method="post" action-xhr="https://example/subscribe" target="_new">
     <input type="submit" value="Subscribe">
   </form>
+  <!-- Valid: input with form attribute can be outside the form. -->
+  <input form="my-form3" type="text" name="name">
+  <input form="my-form3" type="hidden" data-amp-replace="RANDOM">
+  <form id="my-form3" method="post" action-xhr="https://example-cdn.ampproject.org/subscribe" target="_blank">
+    <input type="submit" value="Subscribe">
+  </form>
+  <textarea name="comment"></textarea>
   <!-- Invalid: input, select, option and textarea must be children of form. -->
   <input type="text" name="name">
   <select name="language">
diff --git a/validator/testdata/feature_tests/forms.out b/validator/testdata/feature_tests/forms.out
index 2e862f125ce2b..efe96108006c1 100644
--- a/validator/testdata/feature_tests/forms.out
+++ b/validator/testdata/feature_tests/forms.out
@@ -105,7 +105,7 @@ FAIL
 |    <!-- Invalid: form action must be https. -->
 |    <form method="post" action-xhr="http://example.com/subscribe" target="_blank">
 >>   ^~~~~~~~~
-feature_tests/forms.html:105:2 Invalid URL protocol 'http:' for attribute 'action-xhr' in tag 'FORM [method=POST]'. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/forms.html:105:2 Invalid URL protocol 'http:' for attribute 'action-xhr' in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
 |      <input type="submit" value="Subscribe">
 |    </form>
 |    <!-- Invalid: form action must be a non-cdn link. -->
@@ -127,9 +127,16 @@ feature_tests/forms.html:105:2 Invalid URL protocol 'http:' for attribute 'actio
 |    <!-- Invalid: form target must be _blank or _top -->
 |    <form method="post" action-xhr="https://example/subscribe" target="_new">
 >>   ^~~~~~~~~
-feature_tests/forms.html:125:2 The attribute 'target' in tag 'FORM [method=POST]' is set to the invalid value '_new'. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/forms.html:125:2 The attribute 'target' in tag 'form' is set to the invalid value '_new'. (see https://amp.dev/documentation/components/amp-form)
 |      <input type="submit" value="Subscribe">
 |    </form>
+|    <!-- Valid: input with form attribute can be outside the form. -->
+|    <input form="my-form3" type="text" name="name">
+|    <input form="my-form3" type="hidden" data-amp-replace="RANDOM">
+|    <form id="my-form3" method="post" action-xhr="https://example-cdn.ampproject.org/subscribe" target="_blank">
+|      <input type="submit" value="Subscribe">
+|    </form>
+|    <textarea name="comment"></textarea>
 |    <!-- Invalid: input, select, option and textarea must be children of form. -->
 |    <input type="text" name="name">
 |    <select name="language">
@@ -140,7 +147,7 @@ feature_tests/forms.html:125:2 The attribute 'target' in tag 'FORM [method=POST]
 |    <form method="post" action-xhr="https://example.com/subscribe" target="_blank">
 |      <input type="image" name="image">
 >>     ^~~~~~~~~
-feature_tests/forms.html:136:4 The attribute 'type' in tag 'input' is set to the invalid value 'image'. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/forms.html:143:4 The attribute 'type' in tag 'input' is set to the invalid value 'image'. (see https://amp.dev/documentation/components/amp-form/)
 |    </form>
 |    <!-- Valid: input can be type="password" or type="file" in a post xhr form. -->
 |    <form method="post" action-xhr="https://example.com/subscribe" target="_blank">
@@ -151,39 +158,39 @@ feature_tests/forms.html:136:4 The attribute 'type' in tag 'input' is set to the
 |    <form method="get" action="https://example.com/subscribe" action-xhr="https://example.com/subscribe" target="_blank">
 |      <input type="password" name="password">
 >>     ^~~~~~~~~
-feature_tests/forms.html:145:4 The tag 'INPUT [type=password]' may only appear as a descendant of tag 'form [method=post]'. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/forms.html:152:4 The tag 'input' may only appear as a descendant of tag 'form [method=post]'. (see https://amp.dev/documentation/components/amp-form/)
 |    </form>
 |    <!-- Invalid: if validation-for is set on an element, then -->
 |    <!-- visible-when-invalid must also be set and vice versa. -->
 |    <form action="/foo" target="_blank">
 |      <div validation-for="bar"></div>
 >>     ^~~~~~~~~
-feature_tests/forms.html:150:4 The attribute 'visible-when-invalid' in tag 'div' is missing or incorrect, but required by attribute 'validation-for'.
+feature_tests/forms.html:157:4 The attribute 'visible-when-invalid' in tag 'div' is missing or incorrect, but required by attribute 'validation-for'.
 |      <div visibile-when-invalid="valueMissing"></div>
 >>     ^~~~~~~~~
-feature_tests/forms.html:151:4 The attribute 'visibile-when-invalid' may not appear in tag 'div'.
+feature_tests/forms.html:158:4 The attribute 'visibile-when-invalid' may not appear in tag 'div'.
 |    </form>
 |    <!-- Invalid: submit-success must be a div -->
 |    <form method="post" action-xhr="https://example.com/subscribe" target="_blank"
 |      custom-validation-reporting="as-you-go">
 |      <span submit-success><template type="amp-mustache">Success</template></span>
 >>     ^~~~~~~~~
-feature_tests/forms.html:156:4 The attribute 'submit-success' may not appear in tag 'span'.
+feature_tests/forms.html:163:4 The attribute 'submit-success' may not appear in tag 'span'.
 |    </form>
 |    <!-- Invalid: post implies action-xhr -->
 |    <form method="post" action="https://example.com/subscribe" target="_top">
 >>   ^~~~~~~~~
-feature_tests/forms.html:159:2 The attribute 'action' may not appear in tag 'FORM [method=POST]'. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/forms.html:166:2 The attribute 'action' may not appear in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
 |    </form>
 |    <!-- Invalid: get implies action -->
 |    <form method="get" action-xhr="https://example.com/subscribe" target="_top">
 >>   ^~~~~~~~~
-feature_tests/forms.html:162:2 The mandatory attribute 'action' is missing in tag 'FORM [method=GET]'. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/forms.html:169:2 The mandatory attribute 'action' is missing in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
 |    </form>
 |    <!-- Invalid: get implies action, default method is get -->
 |    <form action-xhr="https://example.com/subscribe" target="_top">
 >>   ^~~~~~~~~
-feature_tests/forms.html:165:2 The mandatory attribute 'action' is missing in tag 'FORM [method=GET]'. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/forms.html:172:2 The mandatory attribute 'action' is missing in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
 |    </form>
 |    <!-- Valid: inlined template, referenced template -->
 |    <template type="amp-mustache" id="submit_success_template">
@@ -204,22 +211,22 @@ feature_tests/forms.html:165:2 The mandatory attribute 'action' is missing in ta
 |      <div submitting template="submitting_template">
 |        <template type="amp-mustache">Submitting in inlined template</template>
 >>       ^~~~~~~~~
-feature_tests/forms.html:184:6 The tag 'template' may not appear as a descendant of tag 'form div [submitting][template]'. (see https://amp.dev/documentation/components/amp-mustache)
+feature_tests/forms.html:191:6 The tag 'template' may not appear as a descendant of tag 'form div [submitting][template]'. (see https://amp.dev/documentation/components/amp-mustache)
 |      </div>
 |      <div submit-success template="submit_success_template">
 |        <template type="amp-mustache">Success in inlined template</template>
 >>       ^~~~~~~~~
-feature_tests/forms.html:187:6 The tag 'template' may not appear as a descendant of tag 'form div [submit-success][template]'. (see https://amp.dev/documentation/components/amp-mustache)
+feature_tests/forms.html:194:6 The tag 'template' may not appear as a descendant of tag 'form div [submit-success][template]'. (see https://amp.dev/documentation/components/amp-mustache)
 |      </div>
 |      <div submit-error template="submit_error_template">
 |        <template type="amp-mustache">Error in inlined template</template>
 >>       ^~~~~~~~~
-feature_tests/forms.html:190:6 The tag 'template' may not appear as a descendant of tag 'form div [submit-error][template]'. (see https://amp.dev/documentation/components/amp-mustache)
+feature_tests/forms.html:197:6 The tag 'template' may not appear as a descendant of tag 'form div [submit-error][template]'. (see https://amp.dev/documentation/components/amp-mustache)
 |      </div>
 |      <div verify-error template="verify_error_template">
 |        <template type="amp-mustache">Verify in inlined template</template>
 >>       ^~~~~~~~~
-feature_tests/forms.html:193:6 The tag 'template' may not appear as a descendant of tag 'form div [verify-error][template]'. (see https://amp.dev/documentation/components/amp-mustache)
+feature_tests/forms.html:200:6 The tag 'template' may not appear as a descendant of tag 'form div [verify-error][template]'. (see https://amp.dev/documentation/components/amp-mustache)
 |      </div>
 |    </form>
 |    <!-- Valid: form with verify-xhr and input with no-verify-->
@@ -231,7 +238,7 @@ feature_tests/forms.html:193:6 The tag 'template' may not appear as a descendant
 |    <form method="post" action-xhr="https://example.com/subscribe" target="_blank">
 |      <input mask="L0L_0L0" type="tel">
 >>     ^~~~~~~~~
-feature_tests/forms.html:203:4 The tag 'input [mask] (custom mask)' requires including the 'amp-inputmask' extension JavaScript. (see https://amp.dev/documentation/components/amp-inputmask)
+feature_tests/forms.html:210:4 The tag 'input' requires including the 'amp-inputmask' extension JavaScript. (see https://amp.dev/documentation/components/amp-inputmask/)
 |    </form>
 |    <!-- Valid: textarea within form -->
 |    <form method="post" action-xhr="https://example.com/subscribe" target="_blank">
diff --git a/validator/testdata/feature_tests/incorrect_custom_style.out b/validator/testdata/feature_tests/incorrect_custom_style.out
index c9efbbb98184d..038689068da3f 100644
--- a/validator/testdata/feature_tests/incorrect_custom_style.out
+++ b/validator/testdata/feature_tests/incorrect_custom_style.out
@@ -34,16 +34,18 @@ feature_tests/incorrect_custom_style.html:29:4 CSS syntax error in tag 'style am
 |      foo.amp-class {}
 |      foo { b: red !important; }
 >>                  ^~~~~~~~~
-feature_tests/incorrect_custom_style.html:32:17 The text inside tag 'style amp-custom' contains 'CSS !important', which is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/incorrect_custom_style.html:32:17 Usage of the !important CSS qualifier is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
 |      foo { b: red ! important; }
 >>                  ^~~~~~~~~
-feature_tests/incorrect_custom_style.html:33:17 The text inside tag 'style amp-custom' contains 'CSS !important', which is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/incorrect_custom_style.html:33:17 Usage of the !important CSS qualifier is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
 |      /* This is ok though, since it's a comment: { b: red !important } */
 |
 |      @viewport (mumble mumble) { }
 >>     ^~~~~~~~~
 feature_tests/incorrect_custom_style.html:36:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@viewport'.
 |      @media (whatever) { @notallowednested }
+>>             ^~~~~~~~~
+feature_tests/incorrect_custom_style.html:37:12 CSS syntax error in tag 'style amp-custom' - disallowed media feature 'whatever'.
 >>                         ^~~~~~~~~
 feature_tests/incorrect_custom_style.html:37:24 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@notallowednested'.
 |
@@ -51,7 +53,7 @@ feature_tests/incorrect_custom_style.html:37:24 CSS syntax error in tag 'style a
 |      foo { background-image: url('') }  /* allowed for now */
 |      foo { background-image: url('invalid://invalid.com/1.jpg') }
 >>                             ^~~~~~~~~
-feature_tests/incorrect_custom_style.html:41:28 CSS syntax error in tag 'style amp-custom' - invalid url protocol 'invalid:'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/incorrect_custom_style.html:41:28 CSS syntax error in tag 'style amp-custom' - invalid url protocol 'invalid:'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |      foo { background-image: url('https://valid.com/1.jpg') }
 |      foo { background-image: url('http://valid.com/1.jpg') }
 |      foo { background-image: url('://valid.jpg') }
@@ -61,7 +63,7 @@ feature_tests/incorrect_custom_style.html:41:28 CSS syntax error in tag 'style a
 |      @font-face { src: url(''); } /* allowed for now */
 |      @font-face { src: url('invalid://invalid.com/1.ttf') }
 >>                       ^~~~~~~~~
-feature_tests/incorrect_custom_style.html:49:22 CSS syntax error in tag 'style amp-custom' - invalid url protocol 'invalid:'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/incorrect_custom_style.html:49:22 CSS syntax error in tag 'style amp-custom' - invalid url protocol 'invalid:'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |      @font-face { src: url('https://valid.com/1.ttf') }
 |      @font-face { src: url('http://valid.com/1.ttf') }
 |      @font-face { src: url('://valid.ttf') }
@@ -74,6 +76,6 @@ feature_tests/incorrect_custom_style.html:49:22 CSS syntax error in tag 'style a
 |    <!-- Invalid due to !important -->
 |    <b style="color: red !important"></div>
 >>   ^~~~~~~~~
-feature_tests/incorrect_custom_style.html:60:2 The attribute 'style' in tag 'b' is set to the invalid value 'CSS !important'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
+feature_tests/incorrect_custom_style.html:60:2 Usage of the !important CSS qualifier is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
 |  </body>
 |  </html>
diff --git a/validator/testdata/feature_tests/incorrect_mandatory_style.out b/validator/testdata/feature_tests/incorrect_mandatory_style.out
index bc71c3bdeaf1a..2ccb73586b11c 100644
--- a/validator/testdata/feature_tests/incorrect_mandatory_style.out
+++ b/validator/testdata/feature_tests/incorrect_mandatory_style.out
@@ -28,9 +28,9 @@ FAIL
 |    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
 |    <style amp-boilerplate>incorrect cdata</style><noscript><style amp-boilerplate>incorrect cdata</style></noscript>
 >>   ^~~~~~~~~
-feature_tests/incorrect_mandatory_style.html:28:2 The mandatory text inside tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/incorrect_mandatory_style.html:28:2 The mandatory text inside tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >>                                                           ^~~~~~~~~
-feature_tests/incorrect_mandatory_style.html:28:58 The mandatory text inside tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/incorrect_mandatory_style.html:28:58 The mandatory text inside tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |  </head>
 |  <body>
diff --git a/validator/testdata/feature_tests/inline_script_length.html b/validator/testdata/feature_tests/inline_script_length.html
new file mode 100644
index 0000000000000..8e1d5aec3ae6a
--- /dev/null
+++ b/validator/testdata/feature_tests/inline_script_length.html
@@ -0,0 +1,37 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This testcase isn't run verbatim. The template string below is replaced by
+  the test harnesses with various lengths of inline JavaScript. We use this
+  test to verify the max_byte_length rules for inline scripts.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
+  <link rel="canonical" href="./regular-html-version.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>
+</head>
+<body>
+  Hello, world.
+  <amp-script script=a layout=container></amp-script>
+  <script type=text/plain target=amp-script id=a>replace_inline_script</script>
+</body>
+</html>
diff --git a/validator/testdata/feature_tests/inline_script_length.out b/validator/testdata/feature_tests/inline_script_length.out
new file mode 100644
index 0000000000000..ecec00265f722
--- /dev/null
+++ b/validator/testdata/feature_tests/inline_script_length.out
@@ -0,0 +1,38 @@
+PASS
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This testcase isn't run verbatim. The template string below is replaced by
+|    the test harnesses with various lengths of inline JavaScript. We use this
+|    test to verify the max_byte_length rules for inline scripts.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
+|    <link rel="canonical" href="./regular-html-version.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>
+|  </head>
+|  <body>
+|    Hello, world.
+|    <amp-script script=a layout=container></amp-script>
+|    <script type=text/plain target=amp-script id=a>replace_inline_script</script>
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/inline_style.html b/validator/testdata/feature_tests/inline_style.html
index 5853e2a595ca2..1f4ea89fe575c 100644
--- a/validator/testdata/feature_tests/inline_style.html
+++ b/validator/testdata/feature_tests/inline_style.html
@@ -29,15 +29,20 @@
 <body>
   <!-- Valid -->
   <amp-img layout=fill src=lemur.png style="display:block; position:relative; width:100px;"></amp-img>
+
+  <!-- Valid: position:fixed is allowed since it is allowed in the style tag -->
+  <amp-img layout=fill src=lemur.png style="display: block; position: fixed; width: 100px;"></amp-img>
+
+  <!-- Valid: made up declaration is allowed since it is allowed in the style tag -->
+  <amp-img layout=fill src=lemur.png style="lemur: lemur;"></amp-img>
+
   <!-- Invalid: !important is not allowed -->
   <amp-img layout=fill src=lemur.png style="display:block !important; width:100px;"></amp-img>
   <amp-img layout=fill src=lemur.png style="display:block ! important; width:100px;"></amp-img>
-  <!-- Invalid: position:fixed is not allowed -->
-  <amp-img layout=fill src=lemur.png style="display: block; position: fixed; width: 100px;"></amp-img>
-  <!-- Invalid: made up declaration is not allowed -->
-  <amp-img layout=fill src=lemur.png style="lemur: lemur;"></amp-img>
+
   <!-- Invalid: attribute [style] is not allowed -->
   <amp-img layout=fill src=lemur.png style="display:block;" [style]="display:block;"></amp-img>
+
   <!-- Invalid: mailto protocol not allowed in URLs -->
   <b style="background-image: url('mailto:foo@bar.com')"></b>
 </body>
diff --git a/validator/testdata/feature_tests/inline_style.out b/validator/testdata/feature_tests/inline_style.out
index c2677233a269d..9244bee9260a0 100644
--- a/validator/testdata/feature_tests/inline_style.out
+++ b/validator/testdata/feature_tests/inline_style.out
@@ -30,28 +30,29 @@ FAIL
 |  <body>
 |    <!-- Valid -->
 |    <amp-img layout=fill src=lemur.png style="display:block; position:relative; width:100px;"></amp-img>
+|
+|    <!-- Valid: position:fixed is allowed since it is allowed in the style tag -->
+|    <amp-img layout=fill src=lemur.png style="display: block; position: fixed; width: 100px;"></amp-img>
+|
+|    <!-- Valid: made up declaration is allowed since it is allowed in the style tag -->
+|    <amp-img layout=fill src=lemur.png style="lemur: lemur;"></amp-img>
+|
 |    <!-- Invalid: !important is not allowed -->
 |    <amp-img layout=fill src=lemur.png style="display:block !important; width:100px;"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/inline_style.html:33:2 The attribute 'style' in tag 'amp-img' is set to the invalid value 'CSS !important'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
+feature_tests/inline_style.html:40:2 Usage of the !important CSS qualifier is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
 |    <amp-img layout=fill src=lemur.png style="display:block ! important; width:100px;"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/inline_style.html:34:2 The attribute 'style' in tag 'amp-img' is set to the invalid value 'CSS !important'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
-|    <!-- Invalid: position:fixed is not allowed -->
-|    <amp-img layout=fill src=lemur.png style="display: block; position: fixed; width: 100px;"></amp-img>
->>   ^~~~~~~~~
-feature_tests/inline_style.html:36:2 CSS syntax error in tag 'amp-img' - the property 'position' is set to the disallowed value 'fixed'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
-|    <!-- Invalid: made up declaration is not allowed -->
-|    <amp-img layout=fill src=lemur.png style="lemur: lemur;"></amp-img>
->>   ^~~~~~~~~
-feature_tests/inline_style.html:38:2 The property 'lemur' in attribute 'style' in tag 'amp-img' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
+feature_tests/inline_style.html:41:2 Usage of the !important CSS qualifier is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
+|
 |    <!-- Invalid: attribute [style] is not allowed -->
 |    <amp-img layout=fill src=lemur.png style="display:block;" [style]="display:block;"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/inline_style.html:40:2 The attribute '[style]' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/inline_style.html:44:2 The attribute '[style]' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
+|
 |    <!-- Invalid: mailto protocol not allowed in URLs -->
 |    <b style="background-image: url('mailto:foo@bar.com')"></b>
 >>   ^~~~~~~~~
-feature_tests/inline_style.html:42:2 CSS syntax error in tag 'b' - invalid url protocol 'mailto:'.
+feature_tests/inline_style.html:47:2 CSS syntax error in tag 'b' - invalid url protocol 'mailto:'.
 |  </body>
 |  </html>
diff --git a/validator/testdata/feature_tests/javascript_xss.out b/validator/testdata/feature_tests/javascript_xss.out
index ad73f316aeb39..598bc30e4dba7 100644
--- a/validator/testdata/feature_tests/javascript_xss.out
+++ b/validator/testdata/feature_tests/javascript_xss.out
@@ -27,15 +27,15 @@ FAIL
 |  <body>
 |    <a href="javascript:alert('boo')">Click here to see an important message.</a>
 >>   ^~~~~~~~~
-feature_tests/javascript_xss.html:27:2 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/javascript_xss.html:27:2 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="JavaScript:alert('boo')">It's CAse inSenSitive.</a>
 >>   ^~~~~~~~~
-feature_tests/javascript_xss.html:28:2 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/javascript_xss.html:28:2 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="vbscript:bar">vbscript is also dangerous</a>
 >>   ^~~~~~~~~
-feature_tests/javascript_xss.html:29:2 Invalid URL protocol 'vbscript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/javascript_xss.html:29:2 Invalid URL protocol 'vbscript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="data:baz">data urls have some risks</a>
 >>   ^~~~~~~~~
-feature_tests/javascript_xss.html:30:2 Invalid URL protocol 'data:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/javascript_xss.html:30:2 Invalid URL protocol 'data:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |  </body>
 |  </html>
diff --git a/validator/testdata/feature_tests/json-parsing-invalid.html b/validator/testdata/feature_tests/json-parsing-invalid.html
index 9b2d5714bb017..58dbc747b0554 100644
--- a/validator/testdata/feature_tests/json-parsing-invalid.html
+++ b/validator/testdata/feature_tests/json-parsing-invalid.html
@@ -78,6 +78,7 @@
     // This is comment
  "foo": "bar"}</script>
 </amp-state>
-</body>
+  <!-- Invalid: JSON-LD can not be parsed. -->
+  <script type="application/ld+json">lemur</script>
 </body>
 </html>
diff --git a/validator/testdata/feature_tests/json-parsing-invalid.out b/validator/testdata/feature_tests/json-parsing-invalid.out
index e585566807ee1..e2fa57d35fdc3 100644
--- a/validator/testdata/feature_tests/json-parsing-invalid.out
+++ b/validator/testdata/feature_tests/json-parsing-invalid.out
@@ -93,6 +93,9 @@ feature_tests/json-parsing-invalid.html:71:2 The script tag contains invalid JSO
 |      // This is comment
 |   "foo": "bar"}</script>
 |  </amp-state>
-|  </body>
+|    <!-- Invalid: JSON-LD can not be parsed. -->
+|    <script type="application/ld+json">lemur</script>
+>>   ^~~~~~~~~
+feature_tests/json-parsing-invalid.html:82:2 The script tag contains invalid JSON that cannot be parsed.
 |  </body>
 |  </html>
diff --git a/validator/testdata/feature_tests/json-parsing-invalid.out.cpponly b/validator/testdata/feature_tests/json-parsing-invalid.out.cpponly
new file mode 100644
index 0000000000000..558249d5249e0
--- /dev/null
+++ b/validator/testdata/feature_tests/json-parsing-invalid.out.cpponly
@@ -0,0 +1,101 @@
+PASS
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Test JSON parsing.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+|  </head>
+|  <body>
+|
+|  <!-- The JSON string contains a carriage return `\r` between `:` and `false` -->
+|  <amp-state id="td_amp_menu_state">
+|  <script type="application/json">
+|  {"visible": true,
+|   "display": "none",
+|   "background":
+|   red}
+>>  ^~~~~~~~~
+feature_tests/json-parsing-invalid.html:38:1 The script tag contains invalid JSON that cannot be parsed.
+|  </script>
+|  </amp-state>
+|
+|  <amp-state id="td_amp_menu_state">
+|  <script type="application/json">{"visible":
+|  # visibility hidden.
+>> ^~~~~~~~~
+feature_tests/json-parsing-invalid.html:44:0 The script tag contains invalid JSON that cannot be parsed.
+|  false}</script>
+|  </amp-state>
+|
+|  <amp-state id="td_amp_menu_state">
+|  <script type="application/json">{"visible":
+|                      False}</script>
+>>                     ^~~~~~~~~
+feature_tests/json-parsing-invalid.html:50:20 The script tag contains invalid JSON that cannot be parsed.
+|  </amp-state>
+|
+|  <amp-state id="td_amp_menu_state">
+|  <script type="application/json">{"visible":           hidden}</script>
+>>                                                       ^~~~~~~~~
+feature_tests/json-parsing-invalid.html:54:54 The script tag contains invalid JSON that cannot be parsed.
+|  </amp-state>
+|
+|  <amp-state id="td_amp_menu_state">
+|    <script type="application/json">ohmygod</script>
+>>                                   ^~~~~~~~~
+feature_tests/json-parsing-invalid.html:58:34 The script tag contains invalid JSON that cannot be parsed.
+|  </amp-state>
+|
+|  <amp-state id="td_amp_menu_state">
+|    <script type="application/json">
+|
+|
+|
+|
+|                 ohmygod</script>
+>>                ^~~~~~~~~
+feature_tests/json-parsing-invalid.html:67:15 The script tag contains invalid JSON that cannot be parsed.
+|  </amp-state>
+|
+|  <amp-state id="td_amp_menu_state">
+|    <script type="application/json">
+|
+|
+|
+|
+|  {"hello": "world",
+|
+|      // This is comment
+>>     ^~~~~~~~~
+feature_tests/json-parsing-invalid.html:78:4 The script tag contains invalid JSON that cannot be parsed.
+|   "foo": "bar"}</script>
+|  </amp-state>
+|    <!-- Invalid: JSON-LD can not be parsed. -->
+|    <script type="application/ld+json">lemur</script>
+>>                                      ^~~~~~~~~
+feature_tests/json-parsing-invalid.html:82:37 The script tag contains invalid JSON that cannot be parsed.
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/json-parsing.html b/validator/testdata/feature_tests/json-parsing.html
index 6585fefc58200..95a89d446e51a 100644
--- a/validator/testdata/feature_tests/json-parsing.html
+++ b/validator/testdata/feature_tests/json-parsing.html
@@ -29,10 +29,41 @@
 </head>
 <body>
 
-<!-- The JSON string contains a carriage return `\r` between `:` and `false` -->
+<!-- Valid: The JSON string contains a carriage return `\r` between `:` and `false` -->
 <amp-state id="td_amp_menu_state"><script type="application/json">
 {"visible":
 false}</script></amp-state>
 
+<!-- Valid: The JSON-LD can be parsed -->
+<script type="application/ld+json">
+{
+   "@context":"http://schema.org",
+   "@type":"Webpage",
+   "url":"https://amp.dev/ ",
+   "name":"amp.dev",
+   "headline":"AMP - a web component framework to easily create user-first web experiences",
+   "description":"Whether you are a publisher, e-commerce company, storyteller, advertiser or email sender, AMP makes it easy to create great experiences on the web. Use AMP to build websites, stories, ads and emails.",
+   "mainEntityOfPage":{
+      "@type":"WebPage",
+      "@id":"https://amp.dev"
+   },
+   "publisher":{
+      "@type":"Organization",
+      "name":"AMP Project",
+      "logo":{
+         "url":"https://amp.dev/static/img/icons/icon-512x512.png",
+         "width":512,
+         "height":512,
+         "@type":"ImageObject"
+      }
+   },
+   "image":{
+      "@type":"ImageObject",
+      "url":"https://amp.dev/static/img/sharing/default-600x314.png",
+      "width":600,
+      "height":314
+   }
+}
+</script>
 </body>
 </html>
diff --git a/validator/testdata/feature_tests/json-parsing.out b/validator/testdata/feature_tests/json-parsing.out
index 532af6cae0c04..7a2175517321a 100644
--- a/validator/testdata/feature_tests/json-parsing.out
+++ b/validator/testdata/feature_tests/json-parsing.out
@@ -30,10 +30,41 @@ PASS
 |  </head>
 |  <body>
 |
-|  <!-- The JSON string contains a carriage return `\r` between `:` and `false` -->
+|  <!-- Valid: The JSON string contains a carriage return `\r` between `:` and `false` -->
 |  <amp-state id="td_amp_menu_state"><script type="application/json">
 |  {"visible":
 |  false}</script></amp-state>
 |
+|  <!-- Valid: The JSON-LD can be parsed -->
+|  <script type="application/ld+json">
+|  {
+|     "@context":"http://schema.org",
+|     "@type":"Webpage",
+|     "url":"https://amp.dev/ ",
+|     "name":"amp.dev",
+|     "headline":"AMP - a web component framework to easily create user-first web experiences",
+|     "description":"Whether you are a publisher, e-commerce company, storyteller, advertiser or email sender, AMP makes it easy to create great experiences on the web. Use AMP to build websites, stories, ads and emails.",
+|     "mainEntityOfPage":{
+|        "@type":"WebPage",
+|        "@id":"https://amp.dev"
+|     },
+|     "publisher":{
+|        "@type":"Organization",
+|        "name":"AMP Project",
+|        "logo":{
+|           "url":"https://amp.dev/static/img/icons/icon-512x512.png",
+|           "width":512,
+|           "height":512,
+|           "@type":"ImageObject"
+|        }
+|     },
+|     "image":{
+|        "@type":"ImageObject",
+|        "url":"https://amp.dev/static/img/sharing/default-600x314.png",
+|        "width":600,
+|        "height":314
+|     }
+|  }
+|  </script>
 |  </body>
 |  </html>
diff --git a/validator/testdata/feature_tests/leaks.html b/validator/testdata/feature_tests/leaks.html
index 4db48576109f0..eef56ea6cb870 100644
--- a/validator/testdata/feature_tests/leaks.html
+++ b/validator/testdata/feature_tests/leaks.html
@@ -213,8 +213,8 @@
     <imageData style="behavior:url(#default#vml)" src="https://leaking.via/vml-line-imgdata-src" />
 </line>
 <vmlframe
-    xmlns="urn:schemas-microsoft-com:vml" 
-    style="behavior:url(#default#vml);position:absolute;width:100%;height:100%" 
+    xmlns="urn:schemas-microsoft-com:vml"
+    style="behavior:url(#default#vml);position:absolute;width:100%;height:100%"
     src="https://leaking.via/vmlframe-src#xss">
 </vmlframe>
 
diff --git a/validator/testdata/feature_tests/leaks.out b/validator/testdata/feature_tests/leaks.out
index e86f00fa3c574..2d8a707e0eb8b 100644
--- a/validator/testdata/feature_tests/leaks.out
+++ b/validator/testdata/feature_tests/leaks.out
@@ -24,13 +24,15 @@ FAIL
 |  -->
 |  <!doctype html SYSTEM "https://leaking.via/doctype">
 >> ^~~~~~~~~
-feature_tests/leaks.html:24:0 The attribute '"https://leaking.via/doctype"' may not appear in tag 'html doctype'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/leaks.html:24:0 Invalid or missing doctype declaration. Should be '!doctype html'. (see https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/)
 >> ^~~~~~~~~
-feature_tests/leaks.html:24:0 The attribute 'system' may not appear in tag 'html doctype'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/leaks.html:24:0 The attribute '"https://leaking.via/doctype"' may not appear in tag 'html !doctype'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+>> ^~~~~~~~~
+feature_tests/leaks.html:24:0 The attribute 'system' may not appear in tag 'html !doctype'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |
 |  <html ⚡ manifest="https://leaking.via/html-manifest">
 >> ^~~~~~~~~
-feature_tests/leaks.html:26:0 The attribute 'manifest' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/leaks.html:26:0 The attribute 'manifest' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |
 |
 |  <!-- AMP boilerplate which should not produce errors -->
@@ -63,33 +65,33 @@ feature_tests/leaks.html:45:4 CSS syntax error in tag 'style amp-custom' - saw i
 |  -->
 |  <meta http-equiv="refresh" content="10; url=http://leaking.via/meta-refresh">
 >> ^~~~~~~~~
-feature_tests/leaks.html:51:0 The attribute 'http-equiv' may not appear in tag 'meta name= and content='.
+feature_tests/leaks.html:51:0 The attribute 'http-equiv' may not appear in tag 'meta'.
 |
 |  <!--
 |  %CSP
 |  -->
 |  <meta http-equiv="Content-Security-Policy" content="script-src 'self'; report-uri http://leaking.via/meta-csp-report-uri">
 >> ^~~~~~~~~
-feature_tests/leaks.html:56:0 The attribute 'http-equiv' may not appear in tag 'meta name= and content='.
+feature_tests/leaks.html:56:0 The attribute 'http-equiv' may not appear in tag 'meta'.
 |  <meta http-equiv="Content-Security-Policy-Report-Only" content="script-src 'self'; report-uri http://leaking.via/meta-csp-report-uri-2">
 >> ^~~~~~~~~
-feature_tests/leaks.html:57:0 The attribute 'http-equiv' may not appear in tag 'meta name= and content='.
+feature_tests/leaks.html:57:0 The attribute 'http-equiv' may not appear in tag 'meta'.
 |
 |  <!--
 |  %Links
 |  -->
 |  <link rel="stylesheet" href="https://leaking.via/link-stylesheet" />
 >> ^~~~~~~~~
-feature_tests/leaks.html:62:0 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://leaking.via/link-stylesheet'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#custom-fonts)
+feature_tests/leaks.html:62:0 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://leaking.via/link-stylesheet'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#custom-fonts)
 |  <link rel="alternate stylesheet" href="https://leaking.via/link-alternate-stylesheet" />
 >> ^~~~~~~~~
-feature_tests/leaks.html:63:0 The attribute 'rel' in tag 'link rel=' is set to the invalid value 'alternate stylesheet'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags)
+feature_tests/leaks.html:63:0 The attribute 'rel' in tag 'link' is set to the invalid value 'alternate stylesheet'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags)
 |  <link rel="import" href="https://leaking.via/link-import" />
 >> ^~~~~~~~~
-feature_tests/leaks.html:64:0 The attribute 'rel' in tag 'link rel=' is set to the invalid value 'import'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags)
+feature_tests/leaks.html:64:0 The attribute 'rel' in tag 'link' is set to the invalid value 'import'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags)
 |  <link rel="subresource" href="https://leaking.via/link-subresource">
 >> ^~~~~~~~~
-feature_tests/leaks.html:65:0 The attribute 'rel' in tag 'link rel=' is set to the invalid value 'subresource'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags)
+feature_tests/leaks.html:65:0 The attribute 'rel' in tag 'link' is set to the invalid value 'subresource'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags)
 |
 |  <!--
 |  %MSIE Imports
@@ -121,42 +123,42 @@ feature_tests/leaks.html:80:8 The attribute 'background' may not appear in tag '
 |  -->
 |  <img src="https://leaking.via/img-src">
 >> ^~~~~~~~~
-feature_tests/leaks.html:87:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img)
+feature_tests/leaks.html:87:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
 |  <img dynsrc="https://leaking.via/img-dynsrc">
 >> ^~~~~~~~~
-feature_tests/leaks.html:88:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img)
+feature_tests/leaks.html:88:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
 |  <img lowsrc="https://leaking.via/img-lowsrc">
 >> ^~~~~~~~~
-feature_tests/leaks.html:89:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img)
+feature_tests/leaks.html:89:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
 |  <img src="data:image/svg+xml,<svg%20xmlns='%68ttp:%2f/www.w3.org/2000/svg'%20xmlns:xlink='%68ttp:%2f/www.w3.org/1999/xlink'><image%20xlink:hr%65f='%68ttp:%2f/leaking.via/svg-via-data'></image></svg>">
 >> ^~~~~~~~~
-feature_tests/leaks.html:90:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img)
+feature_tests/leaks.html:90:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
 |
 |  <image src="https://leaking.via/image-src"></image>
 >> ^~~~~~~~~
-feature_tests/leaks.html:92:0 The tag 'image' may only appear as a descendant of tag 'svg'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg)
+feature_tests/leaks.html:92:0 The tag 'image' may only appear as a descendant of tag 'svg'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg)
 |  <image href="https://leaking.via/image-href"></image>
 >> ^~~~~~~~~
-feature_tests/leaks.html:93:0 The tag 'image' may only appear as a descendant of tag 'svg'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg)
+feature_tests/leaks.html:93:0 The tag 'image' may only appear as a descendant of tag 'svg'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg)
 |
 |  <picture>
 >> ^~~~~~~~~
-feature_tests/leaks.html:95:0 The parent tag of tag 'picture' is 'body', but it can only be 'noscript'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/leaks.html:95:0 The parent tag of tag 'picture' is 'body', but it can only be 'noscript'. (see https://amp.dev/documentation/components/amp-img/)
 |      <source srcset="https://leaking.via/picture-source-srcset">
 |  </picture>
 |  <picture>
 >> ^~~~~~~~~
-feature_tests/leaks.html:98:0 The parent tag of tag 'picture' is 'body', but it can only be 'noscript'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/leaks.html:98:0 The parent tag of tag 'picture' is 'body', but it can only be 'noscript'. (see https://amp.dev/documentation/components/amp-img/)
 |      <img srcset="https://leaking.via/picture-img-srcset">
 >>     ^~~~~~~~~
-feature_tests/leaks.html:99:4 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img)
+feature_tests/leaks.html:99:4 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
 |  </picture>
 |  <img srcset=",,,,,https://leaking.via/img-srcset">
 >> ^~~~~~~~~
-feature_tests/leaks.html:101:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img)
+feature_tests/leaks.html:101:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
 |  <img src="#" longdesc="https://leaking.via/img-longdesc">
 >> ^~~~~~~~~
-feature_tests/leaks.html:102:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img)
+feature_tests/leaks.html:102:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
 |  <!-- longdesc works on Firefox but requires right-click, "View Description" -->
 |
 |  <!--
@@ -164,7 +166,7 @@ feature_tests/leaks.html:102:0 The tag 'img' may only appear as a descendant of
 |  -->
 |  <input type="image" src="https://leaking.via/input-src" name="test" value="test">
 >> ^~~~~~~~~
-feature_tests/leaks.html:108:0 The attribute 'src' may not appear in tag 'input'. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/leaks.html:108:0 The attribute 'src' may not appear in tag 'input'. (see https://amp.dev/documentation/components/amp-form/)
 |  <isindex src="https://leaking.via/isindex-src" type="image">
 >> ^~~~~~~~~
 feature_tests/leaks.html:109:0 The tag 'isindex' is disallowed.
@@ -173,11 +175,11 @@ feature_tests/leaks.html:109:0 The tag 'isindex' is disallowed.
 feature_tests/leaks.html:110:0 The tag 'isindex' is disallowed.
 |  <form id="test2"></form><isindex type="submit" formaction="https://leaking.via/isindex-formaction" form="test2"></isindex>
 >> ^~~~~~~~~
-feature_tests/leaks.html:111:0 The mandatory attribute 'action' is missing in tag 'FORM [method=GET]'. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/leaks.html:111:0 The mandatory attribute 'action' is missing in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
 >> ^~~~~~~~~
-feature_tests/leaks.html:111:0 The mandatory attribute 'target' is missing in tag 'FORM [method=GET]'. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/leaks.html:111:0 The mandatory attribute 'target' is missing in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
 >> ^~~~~~~~~
-feature_tests/leaks.html:111:0 The tag 'FORM [method=GET]' requires including the 'amp-form' extension JavaScript. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/leaks.html:111:0 The tag 'form' requires including the 'amp-form' extension JavaScript. (see https://amp.dev/documentation/components/amp-form)
 >>                         ^~~~~~~~~
 feature_tests/leaks.html:111:24 The tag 'isindex' is disallowed.
 |
@@ -189,25 +191,25 @@ feature_tests/leaks.html:111:24 The tag 'isindex' is disallowed.
 feature_tests/leaks.html:116:0 The tag 'bgsound' is disallowed.
 |  <video src="https://leaking.via/video-src">
 >> ^~~~~~~~~
-feature_tests/leaks.html:117:0 The tag 'video' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-video'? (see https://amp.dev/documentation/components/amp-video)
+feature_tests/leaks.html:117:0 The tag 'video' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-video'? (see https://amp.dev/documentation/components/amp-video/)
 |    <track kind="subtitles" label="English subtitles" src="https://leaking.via/track-src" srclang="en" default></track>
 |  </video>
 |  <video controls>
 >> ^~~~~~~~~
-feature_tests/leaks.html:120:0 The tag 'video' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-video'? (see https://amp.dev/documentation/components/amp-video)
+feature_tests/leaks.html:120:0 The tag 'video' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-video'? (see https://amp.dev/documentation/components/amp-video/)
 |    <source src="https://leaking.via/video-source-src" type="video/mp4">
 |  </video>
 |  <audio src="https://leaking.via/audio-src"></audio>
 >> ^~~~~~~~~
-feature_tests/leaks.html:123:0 The tag 'audio' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-audio'? (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/leaks.html:123:0 The tag 'audio' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-audio'? (see https://amp.dev/documentation/components/amp-audio/)
 |  <audio controls>
 >> ^~~~~~~~~
-feature_tests/leaks.html:124:0 The tag 'audio' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-audio'? (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/leaks.html:124:0 The tag 'audio' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-audio'? (see https://amp.dev/documentation/components/amp-audio/)
 |    <source src="https://leaking.via/audio-source-src" type="video/mp4">
 |  </audio>
 |  <video poster="https://leaking.via/video-poster" src="https://leaking.via/video-poster-2"></video>
 >> ^~~~~~~~~
-feature_tests/leaks.html:127:0 The tag 'video' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-video'? (see https://amp.dev/documentation/components/amp-video)
+feature_tests/leaks.html:127:0 The tag 'video' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-video'? (see https://amp.dev/documentation/components/amp-video/)
 |
 |  <!--
 |  %Object & Embed
@@ -258,16 +260,16 @@ feature_tests/leaks.html:145:4 The tag 'param' is disallowed.
 |  -->
 |  <script src="https://leaking.via/script-src"></script>
 >> ^~~~~~~~~
-feature_tests/leaks.html:152:0 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+feature_tests/leaks.html:152:0 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |  <svg><script href="https://leaking.via/svg-script-href"></script></svg>
 >>      ^~~~~~~~~
-feature_tests/leaks.html:153:5 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+feature_tests/leaks.html:153:5 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |  <svg><script xlink:href="https://leaking.via/svg-script-xlink-href"></script></svg>
 >>      ^~~~~~~~~
-feature_tests/leaks.html:154:5 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+feature_tests/leaks.html:154:5 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |  <script>
 >> ^~~~~~~~~
-feature_tests/leaks.html:155:0 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+feature_tests/leaks.html:155:0 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |  //# sourceMappingURL=https://leaking.via/javascript-source-map
 |  </script>
 |
@@ -276,25 +278,25 @@ feature_tests/leaks.html:155:0 Custom JavaScript is not allowed. (see https://ww
 |  -->
 |  <iframe src="https://leaking.via/iframe-src"></iframe>
 >> ^~~~~~~~~
-feature_tests/leaks.html:162:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/leaks.html:162:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
 |  <iframe src="data:image/svg+xml,<svg%20xmlns='%68ttp:%2f/www.w3.org/2000/svg'%20xmlns:xlink='%68ttp:%2f/www.w3.org/1999/xlink'><image%20xlink:hr%65f='%68ttps:%2f/leaking.via/svg-via-data'></image></svg>"></iframe>
 >> ^~~~~~~~~
-feature_tests/leaks.html:163:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/leaks.html:163:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
 |  <iframe srcdoc="<img src=https://leaking.via/iframe-srcdoc-img-src>"></iframe>
 >> ^~~~~~~~~
-feature_tests/leaks.html:164:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/leaks.html:164:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
 |  <iframe src="view-source:https://leaking.via/iframe-src-viewsource"></iframe>
 >> ^~~~~~~~~
-feature_tests/leaks.html:165:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/leaks.html:165:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
 |  <iframe src="javascript:'&lt;img src=https://leaking.via/iframe-javascript-src&gt;'"></iframe>
 >> ^~~~~~~~~
-feature_tests/leaks.html:166:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/leaks.html:166:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
 |  <iframe src="javascript:'&lt;iframe src=&quot;javascript:\&apos;&lt;img src=https://leaking.via/iframe-javascript-src-2&gt;\&apos;&quot;&gt;&lt;/iframe&gt;'"></iframe>
 >> ^~~~~~~~~
-feature_tests/leaks.html:167:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/leaks.html:167:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
 |  <iframe src="javascript:atob('PGltZyBzcmM9Imh0dHBzOi8vbGVha2luZy52aWEvaWZyYW1lLWphdmFzY3JpcHQtc3JjLTMiPg==')"></iframe>
 >> ^~~~~~~~~
-feature_tests/leaks.html:168:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/leaks.html:168:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
 |
 |  <!--
 |  %Menu
@@ -364,7 +366,7 @@ feature_tests/leaks.html:205:0 The attribute 'datasrc' may not appear in tag 'di
 |  -->
 |  <line xmlns="urn:schemas-microsoft-com:vml">
 >> ^~~~~~~~~
-feature_tests/leaks.html:210:0 The tag 'line' may only appear as a descendant of tag 'svg'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg)
+feature_tests/leaks.html:210:0 The tag 'line' may only appear as a descendant of tag 'svg'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg)
 |      <fill style="behavior:url(#default#vml)" src="https://leaking.via/vml-line-fill-src" />
 >>     ^~~~~~~~~
 feature_tests/leaks.html:211:4 The tag 'fill' is disallowed.
@@ -378,10 +380,10 @@ feature_tests/leaks.html:213:4 The tag 'imagedata' is disallowed.
 |  <vmlframe
 >> ^~~~~~~~~
 feature_tests/leaks.html:215:0 The tag 'vmlframe' is disallowed.
-|      xmlns="urn:schemas-microsoft-com:vml" 
-|      style="behavior:url(#default#vml);position:absolute;width:100%;height:100%" 
+|      xmlns="urn:schemas-microsoft-com:vml"
+|      style="behavior:url(#default#vml);position:absolute;width:100%;height:100%"
 |      src="https://leaking.via/vmlframe-src#xss">
 |  </vmlframe>
 |
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/validator/testdata/feature_tests/leaks.out.cpponly b/validator/testdata/feature_tests/leaks.out.cpponly
new file mode 100644
index 0000000000000..80be8157c244c
--- /dev/null
+++ b/validator/testdata/feature_tests/leaks.out.cpponly
@@ -0,0 +1,387 @@
+FAIL
+|  <!--
+|    Copyright 2018 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This tests a bunch of cases that might allow AMP pages to leak network
+|    requests during a browser prefetch from a search result page. These are
+|    cases that the validator considers not allowed.
+|
+|    All of these test cases should produce errors.
+|  -->
+|  <!doctype html SYSTEM "https://leaking.via/doctype">
+>>           ^~~~~~~~~
+feature_tests/leaks.html:24:10 Invalid or missing doctype declaration. Should be '!doctype html'. (see https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/)
+>>           ^~~~~~~~~
+feature_tests/leaks.html:24:10 The attribute 'system' may not appear in tag 'html !doctype'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+|
+|  <html ⚡ manifest="https://leaking.via/html-manifest">
+>> ^~~~~~~~~
+feature_tests/leaks.html:26:0 The attribute 'manifest' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+|
+|
+|  <!-- AMP boilerplate which should not produce errors -->
+|  <head>
+|  <meta charset="utf-8">
+|  <meta name="viewport" content="width=device-width,minimum-scale=1">
+|  <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  <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>
+|  <link rel=canonical href="self" />
+|
+|
+|  <base href="https://leaking.via/base-href/">
+>> ^~~~~~~~~
+feature_tests/leaks.html:38:0 The attribute 'href' in tag 'base' is set to the invalid value 'https://leaking.via/base-href/'.
+|
+|  <!--
+|  %CSS
+|  -->
+|  <style amp-custom>
+|      @import 'https://leaking.via/css-import-string';
+>>     ^~~~~~~~~
+feature_tests/leaks.html:44:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@import'.
+|      @import url(https://leaking.via/css-import-url);
+>>     ^~~~~~~~~
+feature_tests/leaks.html:45:4 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@import'.
+|  </style>
+|
+|  <!--
+|  %Redirects
+|  -->
+|  <meta http-equiv="refresh" content="10; url=http://leaking.via/meta-refresh">
+>> ^~~~~~~~~
+feature_tests/leaks.html:51:0 The attribute 'http-equiv' may not appear in tag 'meta'.
+|
+|  <!--
+|  %CSP
+|  -->
+|  <meta http-equiv="Content-Security-Policy" content="script-src 'self'; report-uri http://leaking.via/meta-csp-report-uri">
+>> ^~~~~~~~~
+feature_tests/leaks.html:56:0 The attribute 'http-equiv' may not appear in tag 'meta'.
+|  <meta http-equiv="Content-Security-Policy-Report-Only" content="script-src 'self'; report-uri http://leaking.via/meta-csp-report-uri-2">
+>> ^~~~~~~~~
+feature_tests/leaks.html:57:0 The attribute 'http-equiv' may not appear in tag 'meta'.
+|
+|  <!--
+|  %Links
+|  -->
+|  <link rel="stylesheet" href="https://leaking.via/link-stylesheet" />
+>> ^~~~~~~~~
+feature_tests/leaks.html:62:0 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://leaking.via/link-stylesheet'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#custom-fonts)
+|  <link rel="alternate stylesheet" href="https://leaking.via/link-alternate-stylesheet" />
+>> ^~~~~~~~~
+feature_tests/leaks.html:63:0 The attribute 'rel' in tag 'link' is set to the invalid value 'alternate stylesheet'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags)
+|  <link rel="import" href="https://leaking.via/link-import" />
+>> ^~~~~~~~~
+feature_tests/leaks.html:64:0 The attribute 'rel' in tag 'link' is set to the invalid value 'import'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags)
+|  <link rel="subresource" href="https://leaking.via/link-subresource">
+>> ^~~~~~~~~
+feature_tests/leaks.html:65:0 The attribute 'rel' in tag 'link' is set to the invalid value 'subresource'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags)
+|
+|  <!--
+|  %MSIE Imports
+|  -->
+|  <IMPORT namespace="myNS" implementation="https://leaking.via/import-implementation-2" /></IMPORT>
+>> ^~~~~~~~~
+feature_tests/leaks.html:70:0 Tag or text which is only allowed inside the body section found outside of the body section.
+>> ^~~~~~~~~
+feature_tests/leaks.html:70:0 The tag 'import' is disallowed.
+|
+|  </head>
+|  <body>
+|
+|  <!--
+|  %Table Background
+|  -->
+|  <table background="https://leaking.via/table-background">
+>> ^~~~~~~~~
+feature_tests/leaks.html:78:0 The attribute 'background' may not appear in tag 'table'.
+|      <tr>
+|          <td background="https://leaking.via/td-background"></td>
+>>         ^~~~~~~~~
+feature_tests/leaks.html:80:8 The attribute 'background' may not appear in tag 'td'.
+|      </tr>
+|  </table>
+|
+|  <!--
+|  %Images
+|  -->
+|  <img src="https://leaking.via/img-src">
+>> ^~~~~~~~~
+feature_tests/leaks.html:87:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
+|  <img dynsrc="https://leaking.via/img-dynsrc">
+>> ^~~~~~~~~
+feature_tests/leaks.html:88:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
+|  <img lowsrc="https://leaking.via/img-lowsrc">
+>> ^~~~~~~~~
+feature_tests/leaks.html:89:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
+|  <img src="data:image/svg+xml,<svg%20xmlns='%68ttp:%2f/www.w3.org/2000/svg'%20xmlns:xlink='%68ttp:%2f/www.w3.org/1999/xlink'><image%20xlink:hr%65f='%68ttp:%2f/leaking.via/svg-via-data'></image></svg>">
+>> ^~~~~~~~~
+feature_tests/leaks.html:90:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
+|
+|  <image src="https://leaking.via/image-src"></image>
+>> ^~~~~~~~~
+feature_tests/leaks.html:92:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
+|  <image href="https://leaking.via/image-href"></image>
+>> ^~~~~~~~~
+feature_tests/leaks.html:93:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
+|
+|  <picture>
+>> ^~~~~~~~~
+feature_tests/leaks.html:95:0 The parent tag of tag 'picture' is 'body', but it can only be 'noscript'. (see https://amp.dev/documentation/components/amp-img/)
+|      <source srcset="https://leaking.via/picture-source-srcset">
+|  </picture>
+|  <picture>
+>> ^~~~~~~~~
+feature_tests/leaks.html:98:0 The parent tag of tag 'picture' is 'body', but it can only be 'noscript'. (see https://amp.dev/documentation/components/amp-img/)
+|      <img srcset="https://leaking.via/picture-img-srcset">
+>>     ^~~~~~~~~
+feature_tests/leaks.html:99:4 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
+|  </picture>
+|  <img srcset=",,,,,https://leaking.via/img-srcset">
+>> ^~~~~~~~~
+feature_tests/leaks.html:101:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
+|  <img src="#" longdesc="https://leaking.via/img-longdesc">
+>> ^~~~~~~~~
+feature_tests/leaks.html:102:0 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
+|  <!-- longdesc works on Firefox but requires right-click, "View Description" -->
+|
+|  <!--
+|  %Forms
+|  -->
+|  <input type="image" src="https://leaking.via/input-src" name="test" value="test">
+>> ^~~~~~~~~
+feature_tests/leaks.html:108:0 The attribute 'src' may not appear in tag 'input'. (see https://amp.dev/documentation/components/amp-form/)
+|  <isindex src="https://leaking.via/isindex-src" type="image">
+>> ^~~~~~~~~
+feature_tests/leaks.html:109:0 The tag 'isindex' is disallowed.
+|  <isindex action="https://leaking.via/isindex-action"></isindex>
+>> ^~~~~~~~~
+feature_tests/leaks.html:110:0 The tag 'isindex' is disallowed.
+|  <form id="test2"></form><isindex type="submit" formaction="https://leaking.via/isindex-formaction" form="test2"></isindex>
+>> ^~~~~~~~~
+feature_tests/leaks.html:111:0 The mandatory attribute 'action' is missing in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
+>> ^~~~~~~~~
+feature_tests/leaks.html:111:0 The mandatory attribute 'target' is missing in tag 'form'. (see https://amp.dev/documentation/components/amp-form)
+>> ^~~~~~~~~
+feature_tests/leaks.html:111:0 The tag 'form' requires including the 'amp-form' extension JavaScript. (see https://amp.dev/documentation/components/amp-form)
+>>                         ^~~~~~~~~
+feature_tests/leaks.html:111:24 The tag 'isindex' is disallowed.
+|
+|  <!--
+|  %Media
+|  -->
+|  <bgsound src="https://leaking.via/bgsound-src"></bgsound>
+>> ^~~~~~~~~
+feature_tests/leaks.html:116:0 The tag 'bgsound' is disallowed.
+|  <video src="https://leaking.via/video-src">
+>> ^~~~~~~~~
+feature_tests/leaks.html:117:0 The tag 'video' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-video'? (see https://amp.dev/documentation/components/amp-video/)
+|    <track kind="subtitles" label="English subtitles" src="https://leaking.via/track-src" srclang="en" default></track>
+|  </video>
+|  <video controls>
+>> ^~~~~~~~~
+feature_tests/leaks.html:120:0 The tag 'video' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-video'? (see https://amp.dev/documentation/components/amp-video/)
+|    <source src="https://leaking.via/video-source-src" type="video/mp4">
+|  </video>
+|  <audio src="https://leaking.via/audio-src"></audio>
+>> ^~~~~~~~~
+feature_tests/leaks.html:123:0 The tag 'audio' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-audio'? (see https://amp.dev/documentation/components/amp-audio/)
+|  <audio controls>
+>> ^~~~~~~~~
+feature_tests/leaks.html:124:0 The tag 'audio' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-audio'? (see https://amp.dev/documentation/components/amp-audio/)
+|    <source src="https://leaking.via/audio-source-src" type="video/mp4">
+|  </audio>
+|  <video poster="https://leaking.via/video-poster" src="https://leaking.via/video-poster-2"></video>
+>> ^~~~~~~~~
+feature_tests/leaks.html:127:0 The tag 'video' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-video'? (see https://amp.dev/documentation/components/amp-video/)
+|
+|  <!--
+|  %Object & Embed
+|  -->
+|  <object data="https://leaking.via/object-data"></object>
+>> ^~~~~~~~~
+feature_tests/leaks.html:132:0 The tag 'object' is disallowed.
+|  <object type="text/x-scriptlet" data="https://leaking.via/object-data-x-scriptlet"></object>
+>> ^~~~~~~~~
+feature_tests/leaks.html:133:0 The tag 'object' is disallowed.
+|  <object movie="https://leaking.via/object-movie" type="application/x-shockwave-flash"></object>
+>> ^~~~~~~~~
+feature_tests/leaks.html:134:0 The tag 'object' is disallowed.
+|  <object movie="https://leaking.via/object-movie">
+>> ^~~~~~~~~
+feature_tests/leaks.html:135:0 The tag 'object' is disallowed.
+|      <param name="type" value="application/x-shockwave-flash"></param>
+>>     ^~~~~~~~~
+feature_tests/leaks.html:136:4 The tag 'param' is disallowed.
+|  </object>
+|  <object codebase="https://leaking.via/object-codebase"></object>
+>> ^~~~~~~~~
+feature_tests/leaks.html:138:0 The tag 'object' is disallowed.
+|  <embed src="https://leaking.via/embed-src"></embed>
+>> ^~~~~~~~~
+feature_tests/leaks.html:139:0 The tag 'embed' is disallowed.
+|  <embed code="https://leaking.via/embed-code"></embed>
+>> ^~~~~~~~~
+feature_tests/leaks.html:140:0 The tag 'embed' is disallowed.
+|  <object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
+>> ^~~~~~~~~
+feature_tests/leaks.html:141:0 The tag 'object' is disallowed.
+|      <param name="DataURL" value="https://leaking.via/object-param-dataurl">
+>>     ^~~~~~~~~
+feature_tests/leaks.html:142:4 The tag 'param' is disallowed.
+|  </object>
+|  <object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6">
+>> ^~~~~~~~~
+feature_tests/leaks.html:144:0 The tag 'object' is disallowed.
+|      <param name="URL" value="https://leaking.via/object-param-url">
+>>     ^~~~~~~~~
+feature_tests/leaks.html:145:4 The tag 'param' is disallowed.
+|  </object>
+|
+|
+|  <!--
+|  %Script
+|  -->
+|  <script src="https://leaking.via/script-src"></script>
+>> ^~~~~~~~~
+feature_tests/leaks.html:152:0 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
+|  <svg><script href="https://leaking.via/svg-script-href"></script></svg>
+>>      ^~~~~~~~~
+feature_tests/leaks.html:153:5 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
+|  <svg><script xlink:href="https://leaking.via/svg-script-xlink-href"></script></svg>
+>>      ^~~~~~~~~
+feature_tests/leaks.html:154:5 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
+|  <script>
+>> ^~~~~~~~~
+feature_tests/leaks.html:155:0 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
+|  //# sourceMappingURL=https://leaking.via/javascript-source-map
+|  </script>
+|
+|  <!--
+|  %Frames
+|  -->
+|  <iframe src="https://leaking.via/iframe-src"></iframe>
+>> ^~~~~~~~~
+feature_tests/leaks.html:162:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
+|  <iframe src="data:image/svg+xml,<svg%20xmlns='%68ttp:%2f/www.w3.org/2000/svg'%20xmlns:xlink='%68ttp:%2f/www.w3.org/1999/xlink'><image%20xlink:hr%65f='%68ttps:%2f/leaking.via/svg-via-data'></image></svg>"></iframe>
+>> ^~~~~~~~~
+feature_tests/leaks.html:163:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
+|  <iframe srcdoc="<img src=https://leaking.via/iframe-srcdoc-img-src>"></iframe>
+>> ^~~~~~~~~
+feature_tests/leaks.html:164:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
+|  <iframe src="view-source:https://leaking.via/iframe-src-viewsource"></iframe>
+>> ^~~~~~~~~
+feature_tests/leaks.html:165:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
+|  <iframe src="javascript:'&lt;img src=https://leaking.via/iframe-javascript-src&gt;'"></iframe>
+>> ^~~~~~~~~
+feature_tests/leaks.html:166:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
+|  <iframe src="javascript:'&lt;iframe src=&quot;javascript:\&apos;&lt;img src=https://leaking.via/iframe-javascript-src-2&gt;\&apos;&quot;&gt;&lt;/iframe&gt;'"></iframe>
+>> ^~~~~~~~~
+feature_tests/leaks.html:167:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
+|  <iframe src="javascript:atob('PGltZyBzcmM9Imh0dHBzOi8vbGVha2luZy52aWEvaWZyYW1lLWphdmFzY3JpcHQtc3JjLTMiPg==')"></iframe>
+>> ^~~~~~~~~
+feature_tests/leaks.html:168:0 The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe'? (see https://amp.dev/documentation/components/amp-iframe/)
+|
+|  <!--
+|  %Menu
+|  -->
+|  <p contextmenu="a">Right Click</p>
+>> ^~~~~~~~~
+feature_tests/leaks.html:173:0 The attribute 'contextmenu' may not appear in tag 'p'.
+|  <menu type="context" id="a">
+>> ^~~~~~~~~
+feature_tests/leaks.html:174:0 The tag 'menu' is disallowed.
+|      <menuitem label="a" icon="https://leaking.via/menuitem-icon"></menuitem>
+>>     ^~~~~~~~~
+feature_tests/leaks.html:175:4 The tag 'menuitem' is disallowed.
+|  </menu>
+|
+|
+|  <!--
+|  %Applet
+|  -->
+|  <applet code="Test" codebase="https://leaking.via/applet-codebase"></applet>
+>> ^~~~~~~~~
+feature_tests/leaks.html:182:0 The tag 'applet' is disallowed.
+|  <applet code="Test" archive="https://leaking.via/applet-archive"></applet>
+>> ^~~~~~~~~
+feature_tests/leaks.html:183:0 The tag 'applet' is disallowed.
+|  <applet code="Test" object="https://leaking.via/applet-object"></applet>
+>> ^~~~~~~~~
+feature_tests/leaks.html:184:0 The tag 'applet' is disallowed.
+|
+|  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+|      <image xmlns:xlink="http://www.w3.org/1999/xlink">
+|          <animate attributeName="xlink:href" begin="0s" from="#" to="https://leaking.via/svg-image-animate" />
+>>         ^~~~~~~~~
+feature_tests/leaks.html:188:8 The tag 'animate' is disallowed.
+|      </image>
+|  </svg>
+|
+|  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+|      <feImage xlink:href="https://leaking.via/svg-feimage" />
+>>     ^~~~~~~~~
+feature_tests/leaks.html:193:4 The tag 'feimage' is disallowed.
+|  </svg>
+|
+|  <!--
+|  %XSLT Stylesheets
+|  -->
+|  <?xml-stylesheet type="text/xsl" href="https://leaking.via/xslt-stylesheet" ?>
+|
+>>   ^~~~~~~~~
+feature_tests/leaks.html:200:2 The tag '<?' is disallowed.
+|  <!--
+|  %Data Islands
+|  -->
+|  <xml src="https://leaking.via/xml-src" id="xml"></xml>
+>> ^~~~~~~~~
+feature_tests/leaks.html:204:0 The tag 'xml' is disallowed.
+|  <div datasrc="#xml" datafld="$text" dataformatas="html"></div>
+>> ^~~~~~~~~
+feature_tests/leaks.html:205:0 The attribute 'datafld' may not appear in tag 'div'.
+>> ^~~~~~~~~
+feature_tests/leaks.html:205:0 The attribute 'dataformatas' may not appear in tag 'div'.
+>> ^~~~~~~~~
+feature_tests/leaks.html:205:0 The attribute 'datasrc' may not appear in tag 'div'.
+|
+|  <!--
+|  %VML
+|  -->
+|  <line xmlns="urn:schemas-microsoft-com:vml">
+>> ^~~~~~~~~
+feature_tests/leaks.html:210:0 The tag 'line' may only appear as a descendant of tag 'svg'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg)
+|      <fill style="behavior:url(#default#vml)" src="https://leaking.via/vml-line-fill-src" />
+>>     ^~~~~~~~~
+feature_tests/leaks.html:211:4 The tag 'fill' is disallowed.
+|      <stroke style="behavior:url(#default#vml)" src="https://leaking.via/vml-line-stroke-src" />
+>>     ^~~~~~~~~
+feature_tests/leaks.html:212:4 The tag 'stroke' is disallowed.
+|      <imageData style="behavior:url(#default#vml)" src="https://leaking.via/vml-line-imgdata-src" />
+>>     ^~~~~~~~~
+feature_tests/leaks.html:213:4 The tag 'imagedata' is disallowed.
+|  </line>
+|  <vmlframe
+>> ^~~~~~~~~
+feature_tests/leaks.html:215:0 The tag 'vmlframe' is disallowed.
+|      xmlns="urn:schemas-microsoft-com:vml"
+|      style="behavior:url(#default#vml);position:absolute;width:100%;height:100%"
+|      src="https://leaking.via/vmlframe-src#xss">
+|  </vmlframe>
+|
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/link_meta_values.out b/validator/testdata/feature_tests/link_meta_values.out
index 9b323a22ab9bc..83196135c272c 100644
--- a/validator/testdata/feature_tests/link_meta_values.out
+++ b/validator/testdata/feature_tests/link_meta_values.out
@@ -30,7 +30,7 @@ FAIL
 |    <link rel="manifest" href="foo">
 |    <link rel="manifest foo" href="foo">
 >>   ^~~~~~~~~
-feature_tests/link_meta_values.html:30:2 The attribute 'rel' in tag 'link rel=' is set to the invalid value 'manifest foo'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags)
+feature_tests/link_meta_values.html:30:2 The attribute 'rel' in tag 'link' is set to the invalid value 'manifest foo'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags)
 |    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
 |    <link rel="shortcut icon" type="a" href="b" sizes="c">
 |    <link rel="author" href="me">
@@ -38,10 +38,10 @@ feature_tests/link_meta_values.html:30:2 The attribute 'rel' in tag 'link rel='
 |
 |    <meta name="content-disposition" content="any">
 >>   ^~~~~~~~~
-feature_tests/link_meta_values.html:36:2 The attribute 'name' in tag 'meta name= and content=' is set to the invalid value 'content-disposition'.
+feature_tests/link_meta_values.html:36:2 The attribute 'name' in tag 'meta' is set to the invalid value 'content-disposition'.
 |    <meta name=viewport content=invalid>
 >>   ^~~~~~~~~
-feature_tests/link_meta_values.html:37:2 The property 'width' is missing from attribute 'content' in tag 'meta name=viewport'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/link_meta_values.html:37:2 The property 'width' is missing from attribute 'content' in tag 'meta name=viewport'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |    <link rel="unknown" href="foo">
 |
 |    <link rel="comment cite map" href="foo">
@@ -54,7 +54,7 @@ feature_tests/link_meta_values.html:37:2 The property 'width' is missing from at
 |    <!-- Invalid as we need some additional attributes e.g. "rel=canonical" -->
 |    <link href="foo">
 >>   ^~~~~~~~~
-feature_tests/link_meta_values.html:48:2 The mandatory attribute 'rel' is missing in tag 'link rel='. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags)
+feature_tests/link_meta_values.html:48:2 The mandatory attribute 'rel' is missing in tag 'link'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags)
 |  </head>
 |  <body>
 |  Hello, world.
diff --git a/validator/testdata/feature_tests/lts_extension_without_lts_runtime.html b/validator/testdata/feature_tests/lts_extension_without_lts_runtime.html
index 35260f95cbced..2605dde0f77f9 100644
--- a/validator/testdata/feature_tests/lts_extension_without_lts_runtime.html
+++ b/validator/testdata/feature_tests/lts_extension_without_lts_runtime.html
@@ -15,7 +15,6 @@
 -->
 <!--
   Test Description:
-
   This test demonstrates that an LTS version of an extension may not be used with the standard
   runtime.
 -->
@@ -30,11 +29,9 @@
   <!-- Valid: First script is non-LTS runtime -->
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <!-- Invalid: LTS extension is included. Produces error. -->
-  <script async custom-element='amp-ad'
-     src='https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js'></script>
+  <script async custom-element='amp-ad' src='https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js'></script>
   <!-- Valid: Non-LTS extension is included and used. No error or warning. -->
-  <script async custom-element='amp-font'
-     src='https://cdn.ampproject.org/v0/amp-font-0.1.js'></script>
+  <script async custom-element='amp-font' src='https://cdn.ampproject.org/v0/amp-font-0.1.js'></script>
 </head>
 <body>
   <amp-font
diff --git a/validator/testdata/feature_tests/lts_extension_without_lts_runtime.out b/validator/testdata/feature_tests/lts_extension_without_lts_runtime.out
index 18f3ad7b0ca66..1b3fa8017f7ee 100644
--- a/validator/testdata/feature_tests/lts_extension_without_lts_runtime.out
+++ b/validator/testdata/feature_tests/lts_extension_without_lts_runtime.out
@@ -16,7 +16,6 @@ FAIL
 |  -->
 |  <!--
 |    Test Description:
-|
 |    This test demonstrates that an LTS version of an extension may not be used with the standard
 |    runtime.
 |  -->
@@ -31,13 +30,11 @@ FAIL
 |    <!-- Valid: First script is non-LTS runtime -->
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <!-- Invalid: LTS extension is included. Produces error. -->
-|    <script async custom-element='amp-ad'
+|    <script async custom-element='amp-ad' src='https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js'></script>
 >>   ^~~~~~~~~
-feature_tests/lts_extension_without_lts_runtime.html:33:2 'amp-ad' must use the non-LTS version to correspond with the first script in the page, which does not use LTS. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
-|       src='https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js'></script>
+feature_tests/lts_extension_without_lts_runtime.html:32:2 The script version for 'amp-ad' is a LTS version which mismatches with the first script on the page using the standard version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
 |    <!-- Valid: Non-LTS extension is included and used. No error or warning. -->
-|    <script async custom-element='amp-font'
-|       src='https://cdn.ampproject.org/v0/amp-font-0.1.js'></script>
+|    <script async custom-element='amp-font' src='https://cdn.ampproject.org/v0/amp-font-0.1.js'></script>
 |  </head>
 |  <body>
 |    <amp-font
diff --git a/validator/testdata/feature_tests/lts_runtime_after_extension.html b/validator/testdata/feature_tests/lts_runtime_after_extension.html
index e04a16c80837d..86595ca13c6f1 100644
--- a/validator/testdata/feature_tests/lts_runtime_after_extension.html
+++ b/validator/testdata/feature_tests/lts_runtime_after_extension.html
@@ -15,7 +15,6 @@
 -->
 <!--
   Test Description:
-
   This test demonstrates that an LTS version of an extension may not be used with the standard
   runtime when the runtime is included after the extensions.
 -->
@@ -28,11 +27,9 @@
   <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>
 
   <!-- Valid: First script is an LTS extension. -->
-  <script async custom-element='amp-ad'
-     src='https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js'></script>
+  <script async custom-element='amp-ad' src='https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js'></script>
   <!-- Invalid: Non-LTS extension is included and used. Produces error. -->
-  <script async custom-element='amp-font'
-     src='https://cdn.ampproject.org/v0/amp-font-0.1.js'></script>
+  <script async custom-element='amp-font' src='https://cdn.ampproject.org/v0/amp-font-0.1.js'></script>
   <!-- Valid: LTS runtime is included at the end. -->
   <script async src="https://cdn.ampproject.org/lts/v0.js"></script>
 </head>
diff --git a/validator/testdata/feature_tests/lts_runtime_after_extension.out b/validator/testdata/feature_tests/lts_runtime_after_extension.out
index d9a095296e2dc..4b16b00a24bc7 100644
--- a/validator/testdata/feature_tests/lts_runtime_after_extension.out
+++ b/validator/testdata/feature_tests/lts_runtime_after_extension.out
@@ -16,7 +16,6 @@ FAIL
 |  -->
 |  <!--
 |    Test Description:
-|
 |    This test demonstrates that an LTS version of an extension may not be used with the standard
 |    runtime when the runtime is included after the extensions.
 |  -->
@@ -29,13 +28,11 @@ FAIL
 |    <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>
 |
 |    <!-- Valid: First script is an LTS extension. -->
-|    <script async custom-element='amp-ad'
-|       src='https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js'></script>
+|    <script async custom-element='amp-ad' src='https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js'></script>
 |    <!-- Invalid: Non-LTS extension is included and used. Produces error. -->
-|    <script async custom-element='amp-font'
+|    <script async custom-element='amp-font' src='https://cdn.ampproject.org/v0/amp-font-0.1.js'></script>
 >>   ^~~~~~~~~
-feature_tests/lts_runtime_after_extension.html:34:2 'amp-font' must use the LTS version to correspond with the first script in the page, which uses LTS. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
-|       src='https://cdn.ampproject.org/v0/amp-font-0.1.js'></script>
+feature_tests/lts_runtime_after_extension.html:32:2 The script version for 'amp-font' is a standard version which mismatches with the first script on the page using the LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
 |    <!-- Valid: LTS runtime is included at the end. -->
 |    <script async src="https://cdn.ampproject.org/lts/v0.js"></script>
 |  </head>
diff --git a/validator/testdata/feature_tests/lts_runtime_and_extensions.html b/validator/testdata/feature_tests/lts_runtime_and_extensions.html
index 6e48522b91580..034f5927374c2 100644
--- a/validator/testdata/feature_tests/lts_runtime_and_extensions.html
+++ b/validator/testdata/feature_tests/lts_runtime_and_extensions.html
@@ -15,7 +15,6 @@
 -->
 <!--
   Test Description:
-
   This test demonstrates that the standard version of an extension may not be used with the LTS
   runtime.
 -->
@@ -30,11 +29,9 @@
   <!-- Valid: First script is LTS runtime -->
   <script async src="https://cdn.ampproject.org/lts/v0.js"></script>
   <!-- Invalid: Non-LTS extension is included. Produces error. -->
-  <script async custom-element='amp-ad'
-     src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'></script>
+  <script async custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'></script>
   <!-- Valid: LTS extension is included and used. No error or warning. -->
-  <script async custom-element='amp-font'
-     src='https://cdn.ampproject.org/lts/v0/amp-font-0.1.js'></script>
+  <script async custom-element='amp-font' src='https://cdn.ampproject.org/lts/v0/amp-font-0.1.js'></script>
 </head>
 <body>
   <amp-font
diff --git a/validator/testdata/feature_tests/lts_runtime_and_extensions.out b/validator/testdata/feature_tests/lts_runtime_and_extensions.out
index 7fb77aed1c85f..012f194ccb50e 100644
--- a/validator/testdata/feature_tests/lts_runtime_and_extensions.out
+++ b/validator/testdata/feature_tests/lts_runtime_and_extensions.out
@@ -16,7 +16,6 @@ FAIL
 |  -->
 |  <!--
 |    Test Description:
-|
 |    This test demonstrates that the standard version of an extension may not be used with the LTS
 |    runtime.
 |  -->
@@ -31,13 +30,11 @@ FAIL
 |    <!-- Valid: First script is LTS runtime -->
 |    <script async src="https://cdn.ampproject.org/lts/v0.js"></script>
 |    <!-- Invalid: Non-LTS extension is included. Produces error. -->
-|    <script async custom-element='amp-ad'
+|    <script async custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'></script>
 >>   ^~~~~~~~~
-feature_tests/lts_runtime_and_extensions.html:33:2 'amp-ad' must use the LTS version to correspond with the first script in the page, which uses LTS. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
-|       src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'></script>
+feature_tests/lts_runtime_and_extensions.html:32:2 The script version for 'amp-ad' is a standard version which mismatches with the first script on the page using the LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
 |    <!-- Valid: LTS extension is included and used. No error or warning. -->
-|    <script async custom-element='amp-font'
-|       src='https://cdn.ampproject.org/lts/v0/amp-font-0.1.js'></script>
+|    <script async custom-element='amp-font' src='https://cdn.ampproject.org/lts/v0/amp-font-0.1.js'></script>
 |  </head>
 |  <body>
 |    <amp-font
diff --git a/validator/testdata/feature_tests/mandatory_dimensions.html b/validator/testdata/feature_tests/mandatory_dimensions.html
index 732ce3324a217..4229746de0cc3 100644
--- a/validator/testdata/feature_tests/mandatory_dimensions.html
+++ b/validator/testdata/feature_tests/mandatory_dimensions.html
@@ -17,7 +17,7 @@
   Test Description:
   This test validates the complex rules around mandatory dimensions for
   responsive amp custom elements. See
-  https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md.
+  https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md.
 -->
 <!doctype html>
 <html ⚡>
@@ -27,6 +27,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
 </head>
 <body>
 
diff --git a/validator/testdata/feature_tests/mandatory_dimensions.out b/validator/testdata/feature_tests/mandatory_dimensions.out
index f79e04c75a7b0..98ab56357295a 100644
--- a/validator/testdata/feature_tests/mandatory_dimensions.out
+++ b/validator/testdata/feature_tests/mandatory_dimensions.out
@@ -18,7 +18,7 @@ FAIL
 |    Test Description:
 |    This test validates the complex rules around mandatory dimensions for
 |    responsive amp custom elements. See
-|    https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md.
+|    https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md.
 |  -->
 |  <!doctype html>
 |  <html ⚡>
@@ -28,6 +28,7 @@ FAIL
 |    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
 |  </head>
 |  <body>
 |
@@ -71,18 +72,18 @@ FAIL
 |      <!-- amp-audio/pixel/lightbox have relaxed width/heigh constraints -->
 |      <amp-audio src="https://example.com/audio" layout="fixed" width="42"></amp-audio>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:71:4 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/mandatory_dimensions.html:72:4 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
 |      <amp-audio src="https://example.com/audio" layout="fixed"></amp-audio>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:72:4 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/mandatory_dimensions.html:73:4 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
 |      <amp-pixel src="https://example.com/pixel" layout="fixed" width="42"></amp-pixel>
 |      <amp-pixel src="https://example.com/pixel" layout="fixed"></amp-pixel>
 |      <amp-lightbox layout="nodisplay" width="42"></amp-lightbox>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:75:4 The tag 'amp-lightbox' requires including the 'amp-lightbox' extension JavaScript. (see https://amp.dev/documentation/components/amp-lightbox)
+feature_tests/mandatory_dimensions.html:76:4 The tag 'amp-lightbox' requires including the 'amp-lightbox' extension JavaScript. (see https://amp.dev/documentation/components/amp-lightbox)
 |      <amp-lightbox layout="nodisplay"></amp-lightbox>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:76:4 The tag 'amp-lightbox' requires including the 'amp-lightbox' extension JavaScript. (see https://amp.dev/documentation/components/amp-lightbox)
+feature_tests/mandatory_dimensions.html:77:4 The tag 'amp-lightbox' requires including the 'amp-lightbox' extension JavaScript. (see https://amp.dev/documentation/components/amp-lightbox)
 |
 |      <!-- src or srcset or both are all valid -->
 |      <amp-img width="42" height="42" src="img"></amp-img>
@@ -90,21 +91,21 @@ feature_tests/mandatory_dimensions.html:76:4 The tag 'amp-lightbox' requires inc
 |      <amp-img width="42" height="42" src="img" srcset="img 1x, img2 2x"></amp-img>
 |      <amp-anim width="42" height="42" src="anim"></amp-anim>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:82:4 The tag 'amp-anim' requires including the 'amp-anim' extension JavaScript. (see https://amp.dev/documentation/components/amp-anim)
+feature_tests/mandatory_dimensions.html:83:4 The tag 'amp-anim' requires including the 'amp-anim' extension JavaScript. (see https://amp.dev/documentation/components/amp-anim/)
 |      <amp-anim width="42" height="42" srcset="img 1x, img2 2x"></amp-anim>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:83:4 The tag 'amp-anim' requires including the 'amp-anim' extension JavaScript. (see https://amp.dev/documentation/components/amp-anim)
+feature_tests/mandatory_dimensions.html:84:4 The tag 'amp-anim' requires including the 'amp-anim' extension JavaScript. (see https://amp.dev/documentation/components/amp-anim/)
 |      <amp-anim width="42" height="42" src="anim" srcset="img 1x, img2 2x"></amp-anim>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:84:4 The tag 'amp-anim' requires including the 'amp-anim' extension JavaScript. (see https://amp.dev/documentation/components/amp-anim)
+feature_tests/mandatory_dimensions.html:85:4 The tag 'amp-anim' requires including the 'amp-anim' extension JavaScript. (see https://amp.dev/documentation/components/amp-anim/)
 |
 |      <!-- src optional -->
 |      <amp-audio src="https://example.com/audio"></amp-audio>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:87:4 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/mandatory_dimensions.html:88:4 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
 |      <amp-audio></amp-audio>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:88:4 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/mandatory_dimensions.html:89:4 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
 |      <amp-video width="42" height="42" src="https://example.com/video"></amp-video>
 |      <amp-video width="42" height="42"></amp-video>
 |      <amp-ad width="42" height="42" type="" src="https://example.com/ad"></amp-ad>
@@ -113,141 +114,139 @@ feature_tests/mandatory_dimensions.html:88:4 The tag 'amp-audio' requires includ
 |      <!-- src or srcdoc required -->
 |      <amp-iframe width="42" height="42" src="https://example.com/iframe"></amp-iframe>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:95:4 The tag 'amp-iframe' requires including the 'amp-iframe' extension JavaScript. (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/mandatory_dimensions.html:96:4 The tag 'amp-iframe' requires including the 'amp-iframe' extension JavaScript. (see https://amp.dev/documentation/components/amp-iframe)
 |      <amp-iframe width="42" height="42" srcdoc="<p>Hello, world!</p>"></amp-iframe>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:96:4 The tag 'amp-iframe' requires including the 'amp-iframe' extension JavaScript. (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/mandatory_dimensions.html:97:4 The tag 'amp-iframe' requires including the 'amp-iframe' extension JavaScript. (see https://amp.dev/documentation/components/amp-iframe)
 |      <amp-pixel src="https://example.com/pixel"></amp-pixel>
 |
 |      <!-- disallow a src or srcset -->
 |      <amp-fit-text height="42"></amp-fit-text>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:100:4 The tag 'amp-fit-text' requires including the 'amp-fit-text' extension JavaScript. (see https://amp.dev/documentation/components/amp-fit-text)
+feature_tests/mandatory_dimensions.html:101:4 The tag 'amp-fit-text' requires including the 'amp-fit-text' extension JavaScript. (see https://amp.dev/documentation/components/amp-fit-text)
 |      <amp-carousel height="42"></amp-carousel>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:101:4 The tag 'AMP-CAROUSEL' requires including the 'amp-carousel' extension JavaScript. (see https://amp.dev/documentation/components/amp-carousel)
+feature_tests/mandatory_dimensions.html:102:4 The tag 'amp-carousel' requires including the 'amp-carousel' extension JavaScript. (see https://amp.dev/documentation/components/amp-carousel/)
 |      <amp-youtube data-videoid="dQw4w9WgXcQ" height="42"></amp-youtube>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:102:4 The tag 'amp-youtube' requires including the 'amp-youtube' extension JavaScript. (see https://amp.dev/documentation/components/amp-youtube)
+feature_tests/mandatory_dimensions.html:103:4 The tag 'amp-youtube' requires including the 'amp-youtube' extension JavaScript. (see https://amp.dev/documentation/components/amp-youtube)
 |      <amp-twitter data-tweetid="" height="42"></amp-twitter>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:103:4 The tag 'amp-twitter' requires including the 'amp-twitter' extension JavaScript. (see https://amp.dev/documentation/components/amp-twitter)
+feature_tests/mandatory_dimensions.html:104:4 The tag 'amp-twitter' requires including the 'amp-twitter' extension JavaScript. (see https://amp.dev/documentation/components/amp-twitter)
 |      <amp-instagram data-shortcode="" height="42"></amp-instagram>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:104:4 The tag 'amp-instagram' requires including the 'amp-instagram' extension JavaScript. (see https://amp.dev/documentation/components/amp-instagram)
+feature_tests/mandatory_dimensions.html:105:4 The tag 'amp-instagram' requires including the 'amp-instagram' extension JavaScript. (see https://amp.dev/documentation/components/amp-instagram)
 |      <amp-lightbox layout="nodisplay"></amp-lightbox>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:105:4 The tag 'amp-lightbox' requires including the 'amp-lightbox' extension JavaScript. (see https://amp.dev/documentation/components/amp-lightbox)
+feature_tests/mandatory_dimensions.html:106:4 The tag 'amp-lightbox' requires including the 'amp-lightbox' extension JavaScript. (see https://amp.dev/documentation/components/amp-lightbox)
 |    <!-- /Valid Examples -->
 |
 |    <!-- Invalid Examples -->
 |      <!-- Container layout isn't supported by amp-img. -->
 |      <amp-img src="img" layout="container">
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:110:4 The specified layout 'CONTAINER' is not supported by tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/mandatory_dimensions.html:111:4 The specified layout 'CONTAINER' is not supported by tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |      <amp-img src="img" layout="container" width="42" height="42">
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:111:4 The specified layout 'CONTAINER' is not supported by tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/mandatory_dimensions.html:112:4 The specified layout 'CONTAINER' is not supported by tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |      <amp-img src="img">
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:112:4 Incomplete layout attributes specified for tag 'amp-img'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/mandatory_dimensions.html:113:4 Incomplete layout attributes specified for tag 'amp-img'. For example, provide attributes 'width' and 'height'. (see https://amp.dev/documentation/components/amp-img/)
 |
 |      <!-- Layout of responsive/fixed without width/height -->
 |      <amp-img src="img" layout="responsive">
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:115:4 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/mandatory_dimensions.html:116:4 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |      <amp-img src="img" layout="fixed">
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:116:4 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/mandatory_dimensions.html:117:4 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |      <amp-img src="img" layout="responsive" width="42">
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:117:4 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/mandatory_dimensions.html:118:4 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |      <amp-img src="img" layout="fixed" height="42">
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:118:4 The mandatory attribute 'width' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/mandatory_dimensions.html:119:4 The mandatory attribute 'width' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |      <amp-img src="img" layout="fixed" height="auto">
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:119:4 The attribute 'height' in tag 'amp-img' is set to the invalid value 'auto'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/mandatory_dimensions.html:120:4 The attribute 'height' in tag 'amp-img' is set to the invalid value 'auto'. (see https://amp.dev/documentation/components/amp-img/)
 |      <amp-img src="img" layout="fixed" width="auto" height="42">
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:120:4 The attribute 'width' in tag 'amp-img' is set to the invalid value 'auto'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/mandatory_dimensions.html:121:4 The attribute 'width' in tag 'amp-img' is set to the invalid value 'auto'. (see https://amp.dev/documentation/components/amp-img/)
 |
 |      <!-- Inconsistent units -->
 |      <amp-img src="img" layout="responsive" width="42px" height="42rem">
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:123:4 Inconsistent units for width and height in tag 'amp-img' - width is specified in 'px' whereas height is specified in 'rem'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/mandatory_dimensions.html:124:4 Inconsistent units for width and height in tag 'amp-img' - width is specified in 'px' whereas height is specified in 'rem'. (see https://amp.dev/documentation/components/amp-img/)
 |
 |      <!-- src or srcset or both are all valid -->
 |      <amp-img width="42" height="42"></amp-img>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:126:4 The mandatory attribute 'src' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/mandatory_dimensions.html:127:4 The mandatory attribute 'src' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |      <amp-anim width="42" height="42"></amp-anim>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:127:4 The mandatory attribute 'src' is missing in tag 'amp-anim'. (see https://amp.dev/documentation/components/amp-anim)
+feature_tests/mandatory_dimensions.html:128:4 The mandatory attribute 'src' is missing in tag 'amp-anim'. (see https://amp.dev/documentation/components/amp-anim/)
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:127:4 The tag 'amp-anim' requires including the 'amp-anim' extension JavaScript. (see https://amp.dev/documentation/components/amp-anim)
+feature_tests/mandatory_dimensions.html:128:4 The tag 'amp-anim' requires including the 'amp-anim' extension JavaScript. (see https://amp.dev/documentation/components/amp-anim/)
 |
 |      <!-- src optional -->
 |      <amp-audio srcset="img 1x, img2 2x"></amp-audio>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:130:4 The attribute 'srcset' may not appear in tag 'amp-audio'. (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/mandatory_dimensions.html:131:4 The attribute 'srcset' may not appear in tag 'amp-audio'. (see https://amp.dev/documentation/components/amp-audio/)
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:130:4 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/mandatory_dimensions.html:131:4 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
 |      <amp-ad height="42" type="" srcset="img 1x, img2 2x"></amp-ad>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:131:4 The attribute 'srcset' may not appear in tag 'amp-ad'. (see https://amp.dev/documentation/components/amp-ad)
+feature_tests/mandatory_dimensions.html:132:4 The attribute 'srcset' may not appear in tag 'amp-ad'. (see https://amp.dev/documentation/components/amp-ad/)
 |
 |      <!-- src or srcdoc required -->
 |      <amp-iframe height="42"></amp-iframe>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:134:4 The tag 'amp-iframe' is missing a mandatory attribute - pick one of ['src', 'srcdoc']. (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/mandatory_dimensions.html:135:4 The tag 'amp-iframe' is missing a mandatory attribute - pick one of ['src', 'srcdoc']. (see https://amp.dev/documentation/components/amp-iframe)
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:134:4 The tag 'amp-iframe' requires including the 'amp-iframe' extension JavaScript. (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/mandatory_dimensions.html:135:4 The tag 'amp-iframe' requires including the 'amp-iframe' extension JavaScript. (see https://amp.dev/documentation/components/amp-iframe)
 |      <amp-pixel></amp-pixel>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:135:4 The mandatory attribute 'src' is missing in tag 'amp-pixel'. (see https://amp.dev/documentation/components/amp-pixel)
+feature_tests/mandatory_dimensions.html:136:4 The mandatory attribute 'src' is missing in tag 'amp-pixel'. (see https://amp.dev/documentation/components/amp-pixel/)
 |
 |      <!-- disallow a src or srcset -->
 |      <amp-fit-text height="42" src="fit-text"></amp-fit-text>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:138:4 The attribute 'src' may not appear in tag 'amp-fit-text'. (see https://amp.dev/documentation/components/amp-fit-text)
+feature_tests/mandatory_dimensions.html:139:4 The attribute 'src' may not appear in tag 'amp-fit-text'. (see https://amp.dev/documentation/components/amp-fit-text)
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:138:4 The tag 'amp-fit-text' requires including the 'amp-fit-text' extension JavaScript. (see https://amp.dev/documentation/components/amp-fit-text)
+feature_tests/mandatory_dimensions.html:139:4 The tag 'amp-fit-text' requires including the 'amp-fit-text' extension JavaScript. (see https://amp.dev/documentation/components/amp-fit-text)
 |      <amp-carousel height="42" src="carousel"></amp-carousel>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:139:4 The attribute 'src' may not appear in tag 'AMP-CAROUSEL'. (see https://amp.dev/documentation/components/amp-carousel)
+feature_tests/mandatory_dimensions.html:140:4 The attribute 'src' may not appear in tag 'amp-carousel'. (see https://amp.dev/documentation/components/amp-carousel/)
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:139:4 The tag 'AMP-CAROUSEL' requires including the 'amp-carousel' extension JavaScript. (see https://amp.dev/documentation/components/amp-carousel)
+feature_tests/mandatory_dimensions.html:140:4 The tag 'amp-carousel' requires including the 'amp-carousel' extension JavaScript. (see https://amp.dev/documentation/components/amp-carousel/)
 |      <amp-youtube height="42" data-videoid="dQw4w9WgXcQ" srcset="img 1x, img2 2x"></amp-youtube>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:140:4 The attribute 'srcset' may not appear in tag 'amp-youtube'. (see https://amp.dev/documentation/components/amp-youtube)
+feature_tests/mandatory_dimensions.html:141:4 The attribute 'srcset' may not appear in tag 'amp-youtube'. (see https://amp.dev/documentation/components/amp-youtube)
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:140:4 The tag 'amp-youtube' requires including the 'amp-youtube' extension JavaScript. (see https://amp.dev/documentation/components/amp-youtube)
+feature_tests/mandatory_dimensions.html:141:4 The tag 'amp-youtube' requires including the 'amp-youtube' extension JavaScript. (see https://amp.dev/documentation/components/amp-youtube)
 |      <amp-twitter height="42" data-tweetid="" srcset="img 1x, img2 2x"></amp-twitter>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:141:4 The attribute 'srcset' may not appear in tag 'amp-twitter'. (see https://amp.dev/documentation/components/amp-twitter)
+feature_tests/mandatory_dimensions.html:142:4 The attribute 'srcset' may not appear in tag 'amp-twitter'. (see https://amp.dev/documentation/components/amp-twitter)
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:141:4 The tag 'amp-twitter' requires including the 'amp-twitter' extension JavaScript. (see https://amp.dev/documentation/components/amp-twitter)
+feature_tests/mandatory_dimensions.html:142:4 The tag 'amp-twitter' requires including the 'amp-twitter' extension JavaScript. (see https://amp.dev/documentation/components/amp-twitter)
 |      <amp-instagram height="42" data-shortcode="" srcset="img 1x, img2 2x"></amp-instagram>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:142:4 The attribute 'srcset' may not appear in tag 'amp-instagram'. (see https://amp.dev/documentation/components/amp-instagram)
+feature_tests/mandatory_dimensions.html:143:4 The attribute 'srcset' may not appear in tag 'amp-instagram'. (see https://amp.dev/documentation/components/amp-instagram)
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:142:4 The tag 'amp-instagram' requires including the 'amp-instagram' extension JavaScript. (see https://amp.dev/documentation/components/amp-instagram)
+feature_tests/mandatory_dimensions.html:143:4 The tag 'amp-instagram' requires including the 'amp-instagram' extension JavaScript. (see https://amp.dev/documentation/components/amp-instagram)
 |      <amp-lightbox layout="nodisplay" src="lightbox"></amp-lightbox>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:143:4 The attribute 'src' may not appear in tag 'amp-lightbox'. (see https://amp.dev/documentation/components/amp-lightbox)
+feature_tests/mandatory_dimensions.html:144:4 The attribute 'src' may not appear in tag 'amp-lightbox'. (see https://amp.dev/documentation/components/amp-lightbox)
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:143:4 The tag 'amp-lightbox' requires including the 'amp-lightbox' extension JavaScript. (see https://amp.dev/documentation/components/amp-lightbox)
+feature_tests/mandatory_dimensions.html:144:4 The tag 'amp-lightbox' requires including the 'amp-lightbox' extension JavaScript. (see https://amp.dev/documentation/components/amp-lightbox)
 |
 |      <!-- Not-allowlisted attributes -->
 |      <amp-img height="42" src="img" foo="bar"></amp-img>
 >>     ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:146:4 The attribute 'foo' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/mandatory_dimensions.html:147:4 The attribute 'foo' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- /Invalid Examples -->
 |
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:150:6 The tag 'amp-ad extension .js script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error. (see https://amp.dev/documentation/components/amp-ad)
->>       ^~~~~~~~~
-feature_tests/mandatory_dimensions.html:150:6 The tag 'amp-video extension .js script' is missing or incorrect, but required by 'amp-video'. This will soon be an error. (see https://amp.dev/documentation/components/amp-video)
\ No newline at end of file
+feature_tests/mandatory_dimensions.html:151:6 The tag 'amp-ad extension script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error. (see https://amp.dev/documentation/components/amp-ad/)
diff --git a/validator/testdata/feature_tests/manufactured_body_whitespace.out.cpponly b/validator/testdata/feature_tests/manufactured_body_whitespace.out.cpponly
new file mode 100644
index 0000000000000..875e7064464e7
--- /dev/null
+++ b/validator/testdata/feature_tests/manufactured_body_whitespace.out.cpponly
@@ -0,0 +1,49 @@
+FAIL
+|  <!--
+|    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.
+|  -->
+|  <!--
+|    Test Description:
+|    This contains a U+3000 IDEOGRAPHIC SPACE in the <head> element (before the
+|    <meta name="viewport">), which causes an implicit <body> tag to be
+|    manufactured.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+>>                                                          ^~~~~~~~~
+feature_tests/manufactured_body_whitespace.html:26:57 Tag or text which is only allowed inside the body section found outside of the body section.
+|  　<meta name="viewport" content="width=device-width">
+>>  ^~~~~~~~~
+feature_tests/manufactured_body_whitespace.html:27:1 The parent tag of tag 'meta name=viewport' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+|    <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>
+>>   ^~~~~~~~~
+feature_tests/manufactured_body_whitespace.html:28:2 The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
+>>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ^~~~~~~~~
+feature_tests/manufactured_body_whitespace.html:28:641 The tag 'noscript > style[amp-boilerplate]' may only appear as a descendant of tag 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+>>   ^~~~~~~~~
+feature_tests/manufactured_body_whitespace.html:29:2 The parent tag of tag 'amphtml engine script' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+|  </head>
+|  <body>
+|  Hello, world.
+|  </body>
+|  </html>
+>>       ^~~~~~~~~
+feature_tests/manufactured_body_whitespace.html:34:6 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
+>>       ^~~~~~~~~
+feature_tests/manufactured_body_whitespace.html:34:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
diff --git a/validator/testdata/feature_tests/media_queries.out b/validator/testdata/feature_tests/media_queries.out
index 761acb0995559..58de1e701a58e 100644
--- a/validator/testdata/feature_tests/media_queries.out
+++ b/validator/testdata/feature_tests/media_queries.out
@@ -29,22 +29,36 @@ PASS
 |    @media screen {}
 |    /* Invalid media type */
 |    @media holodeck {}
+>>          ^~~~~~~~~
+feature_tests/media_queries.html:30:9 CSS syntax error in tag 'style amp-custom' - disallowed media type 'holodeck'.
 |    /* Valid and Invalid media type */
 |    @media screen, holodeck {}
+>>                  ^~~~~~~~~
+feature_tests/media_queries.html:32:17 CSS syntax error in tag 'style amp-custom' - disallowed media type 'holodeck'.
 |    /* Valid variants of pixel-ratio feature */
 |    @media (-webkit-min-device-pixel-ratio:1.5) {}
 |    @media (min-device-pixel-ratio:1.5) {}
 |    @media (device-pixel-ratio:1.5) {}
 |    /* Invalid variants of pixel-ratio */
 |    @media (min-webkit-device-pixel-ratio:1.5) {}
+>>           ^~~~~~~~~
+feature_tests/media_queries.html:38:10 CSS syntax error in tag 'style amp-custom' - disallowed media feature 'min-webkit-device-pixel-ratio'.
 |    @media (min--webkit-device-pixel-ratio:1.5) {}
+>>           ^~~~~~~~~
+feature_tests/media_queries.html:39:10 CSS syntax error in tag 'style amp-custom' - disallowed media feature 'min--webkit-device-pixel-ratio'.
 |    /* Invalid media feature */
 |    @media (invalid-media-feature:1.5) {}
+>>           ^~~~~~~~~
+feature_tests/media_queries.html:41:10 CSS syntax error in tag 'style amp-custom' - disallowed media feature 'invalid-media-feature'.
 |    /* All together now, this is valid */
 |    @media only screen and (max-width: 800px) {}
 |    /* All together now, these are not */
 |    @media not holodeck and (max-width: 800px) {}
+>>              ^~~~~~~~~
+feature_tests/media_queries.html:45:13 CSS syntax error in tag 'style amp-custom' - disallowed media type 'holodeck'.
 |    @media screen and (-webkit-max-degrees-celsius: 14) {}
+>>                      ^~~~~~~~~
+feature_tests/media_queries.html:46:21 CSS syntax error in tag 'style amp-custom' - disallowed media feature '-webkit-max-degrees-celsius'.
 |    </style>
 |    <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>
 |    <script src="https://cdn.ampproject.org/v0.js" async></script>
diff --git a/validator/testdata/feature_tests/multiple_body_tags.out.cpponly b/validator/testdata/feature_tests/multiple_body_tags.out.cpponly
new file mode 100644
index 0000000000000..f1ba70080f823
--- /dev/null
+++ b/validator/testdata/feature_tests/multiple_body_tags.out.cpponly
@@ -0,0 +1,35 @@
+PASS
+|  <!--
+|    Copyright 2015 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests errors generated for multiple body tags. This is useful because
+|    body tags are treated special - the attributes from all of them are merged
+|    into the first one. However, for AMPHTML only a single BODY tag is allowed.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body class="foo">
+|    <body class="bar" style="background-color:red"></body>
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/multiple_body_tags_2.out.cpponly b/validator/testdata/feature_tests/multiple_body_tags_2.out.cpponly
new file mode 100644
index 0000000000000..a56c42952f6b5
--- /dev/null
+++ b/validator/testdata/feature_tests/multiple_body_tags_2.out.cpponly
@@ -0,0 +1,37 @@
+PASS
+|  <!--
+|    Copyright 2015 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests errors generated for multiple body tags. This is useful because
+|    body tags are treated special - the attributes from all of them are merged
+|    into the first one. However, for AMPHTML only a single BODY tag is allowed.
+|    In this second variant for the test we show that the error is emitted
+|    even if the attribute names and values of the two body tags agree.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body class="foo">
+|    <body class="foo"></body>
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/multiple_body_tags_3.out b/validator/testdata/feature_tests/multiple_body_tags_3.out
index 14bd8d06709f8..939af705cb1ab 100644
--- a/validator/testdata/feature_tests/multiple_body_tags_3.out
+++ b/validator/testdata/feature_tests/multiple_body_tags_3.out
@@ -37,12 +37,12 @@ feature_tests/multiple_body_tags_3.html:32:53 Tag or text which is only allowed
 feature_tests/multiple_body_tags_3.html:32:53 The tag 'BODY' appears more than once in the document.
 |    <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>
 >>   ^~~~~~~~~
-feature_tests/multiple_body_tags_3.html:33:2 The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/multiple_body_tags_3.html:33:2 The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 >>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ^~~~~~~~~
-feature_tests/multiple_body_tags_3.html:33:641 The tag 'noscript > style[amp-boilerplate]' may only appear as a descendant of tag 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/multiple_body_tags_3.html:33:641 The tag 'noscript > style[amp-boilerplate]' may only appear as a descendant of tag 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 >>   ^~~~~~~~~
-feature_tests/multiple_body_tags_3.html:34:2 The parent tag of tag 'amphtml engine v0.js script' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/multiple_body_tags_3.html:34:2 The parent tag of tag 'amphtml engine script' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |  </head>
 |  <body class="foo">
 |    <!-- You might think there's only one body in this doc, but this is
@@ -51,6 +51,6 @@ feature_tests/multiple_body_tags_3.html:34:2 The parent tag of tag 'amphtml engi
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-feature_tests/multiple_body_tags_3.html:41:6 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/multiple_body_tags_3.html:41:6 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >>       ^~~~~~~~~
-feature_tests/multiple_body_tags_3.html:41:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/multiple_body_tags_3.html:41:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
diff --git a/validator/testdata/feature_tests/multiple_body_tags_3.out.cpponly b/validator/testdata/feature_tests/multiple_body_tags_3.out.cpponly
new file mode 100644
index 0000000000000..44f60650985ab
--- /dev/null
+++ b/validator/testdata/feature_tests/multiple_body_tags_3.out.cpponly
@@ -0,0 +1,54 @@
+FAIL
+|  <!--
+|    Copyright 2015 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests errors generated for multiple body tags. This is useful because
+|    body tags are treated special - the attributes from all of them are merged
+|    into the first one. However, for AMPHTML only a single BODY tag is allowed.
+|    In this second variant for the test we show that multiple BODY tags are
+|    detected when the body is started by stray text in the head.
+|    In which case, the manufactured boy tag message also appears.
+|    This is important because otherwise the user might be confused.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport"
+|          content="width=device-width,minimum-scale=1">some stray text
+>>                                                      ^~~~~~~~~
+feature_tests/multiple_body_tags_3.html:32:53 Tag or text which is only allowed inside the body section found outside of the body section.
+|    <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>
+>>   ^~~~~~~~~
+feature_tests/multiple_body_tags_3.html:33:2 The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
+>>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ^~~~~~~~~
+feature_tests/multiple_body_tags_3.html:33:641 The tag 'noscript > style[amp-boilerplate]' may only appear as a descendant of tag 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+>>   ^~~~~~~~~
+feature_tests/multiple_body_tags_3.html:34:2 The parent tag of tag 'amphtml engine script' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+|  </head>
+|  <body class="foo">
+|    <!-- You might think there's only one body in this doc, but this is
+|         the body because "some stray text" above started the actual
+|         body so that counts as the first body tag. -->
+|  </body>
+|  </html>
+>>       ^~~~~~~~~
+feature_tests/multiple_body_tags_3.html:41:6 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
+>>       ^~~~~~~~~
+feature_tests/multiple_body_tags_3.html:41:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
diff --git a/validator/testdata/feature_tests/new_and_old_boilerplate_mixed.out b/validator/testdata/feature_tests/new_and_old_boilerplate_mixed.out
index 374402eee9e5f..6758497b68def 100644
--- a/validator/testdata/feature_tests/new_and_old_boilerplate_mixed.out
+++ b/validator/testdata/feature_tests/new_and_old_boilerplate_mixed.out
@@ -28,7 +28,7 @@ FAIL
 |    <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>body {opacity: 1}</style></noscript>
 >>             ^~~~~~~~~
-feature_tests/new_and_old_boilerplate_mixed.html:28:12 The parent tag of tag 'style amp-custom' is 'noscript', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/new_and_old_boilerplate_mixed.html:28:12 The parent tag of tag 'style amp-custom' is 'noscript', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |  </head>
 |  <body>
@@ -36,4 +36,4 @@ feature_tests/new_and_old_boilerplate_mixed.html:28:12 The parent tag of tag 'st
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-feature_tests/new_and_old_boilerplate_mixed.html:34:6 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/new_and_old_boilerplate_mixed.html:34:6 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
diff --git a/validator/testdata/feature_tests/new_and_old_boilerplate_mixed2.out b/validator/testdata/feature_tests/new_and_old_boilerplate_mixed2.out
index a7ed211ba6a5a..f10debe6656f2 100644
--- a/validator/testdata/feature_tests/new_and_old_boilerplate_mixed2.out
+++ b/validator/testdata/feature_tests/new_and_old_boilerplate_mixed2.out
@@ -28,7 +28,7 @@ FAIL
 |    <meta name="viewport" content="width=device-width,minimum-scale=1">
 |    <style>body {opacity: 0}</style>
 >>   ^~~~~~~~~
-feature_tests/new_and_old_boilerplate_mixed2.html:28:2 The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/new_and_old_boilerplate_mixed2.html:28:2 The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |    <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |  </head>
@@ -37,4 +37,4 @@ feature_tests/new_and_old_boilerplate_mixed2.html:28:2 The mandatory attribute '
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-feature_tests/new_and_old_boilerplate_mixed2.html:35:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/new_and_old_boilerplate_mixed2.html:35:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
diff --git a/validator/testdata/feature_tests/newline_attributes.html b/validator/testdata/feature_tests/newline_attributes.html
new file mode 100644
index 0000000000000..0d7d477cf30cd
--- /dev/null
+++ b/validator/testdata/feature_tests/newline_attributes.html
@@ -0,0 +1,44 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests that multiline attribute values are parsed and validated correctly.
+  TODO(amaltas): Currenlty this is broken. The first span should not pass
+  validation.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="self.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <!-- multiine, parsed and validated incorrectly. No validation is done.
+       This is a bug in validator and/or htmlparser.
+  -->
+  <span on="tap:AMP.setState({foo:
+    'bar'})">
+    Hello, World!
+  </span>
+  <!-- no newline, parsed and validated correctly.-->
+  <span on="tap:AMP.setState({foo: 'bar'})">
+    Hello, World!
+  </span>
+</body>
+</html>:w
diff --git a/validator/testdata/feature_tests/newline_attributes.out b/validator/testdata/feature_tests/newline_attributes.out
new file mode 100644
index 0000000000000..9b715e300d1cb
--- /dev/null
+++ b/validator/testdata/feature_tests/newline_attributes.out
@@ -0,0 +1,49 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests that multiline attribute values are parsed and validated correctly.
+|    TODO(amaltas): Currenlty this is broken. The first span should not pass
+|    validation.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="self.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|    <!-- multiine, parsed and validated incorrectly. No validation is done.
+|         This is a bug in validator and/or htmlparser.
+|    -->
+|    <span on="tap:AMP.setState({foo:
+|      'bar'})">
+|      Hello, World!
+|    </span>
+|    <!-- no newline, parsed and validated correctly.-->
+|    <span on="tap:AMP.setState({foo: 'bar'})">
+>>   ^~~~~~~~~
+feature_tests/newline_attributes.html:40:2 The attribute 'role' in tag 'span' is missing or incorrect, but required by attribute 'on'.
+>>   ^~~~~~~~~
+feature_tests/newline_attributes.html:40:2 The attribute 'tabindex' in tag 'span' is missing or incorrect, but required by attribute 'on'.
+|      Hello, World!
+|    </span>
+|  </body>
+|  </html>:w
diff --git a/validator/testdata/feature_tests/no_custom_js.out b/validator/testdata/feature_tests/no_custom_js.out
index 110a2261e2194..2651da0528bfb 100644
--- a/validator/testdata/feature_tests/no_custom_js.out
+++ b/validator/testdata/feature_tests/no_custom_js.out
@@ -28,14 +28,14 @@ FAIL
 |     <script async src="https://cdn.ampproject.org/v0.js"></script>
 |     <script async src="https://example.com/v0-not-allowed.js"></script>
 >>    ^~~~~~~~~
-feature_tests/no_custom_js.html:28:3 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+feature_tests/no_custom_js.html:28:3 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |     <script async custom-element="amp-foo" src="https://example.com/v0/not-allowed.js"></script>
 >>    ^~~~~~~~~
-feature_tests/no_custom_js.html:29:3 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+feature_tests/no_custom_js.html:29:3 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |   </head>
 |   <body>
 |    <script>alert('Hello World!')</script>
 >>   ^~~~~~~~~
-feature_tests/no_custom_js.html:32:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+feature_tests/no_custom_js.html:32:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |   </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/validator/testdata/feature_tests/noscript.out b/validator/testdata/feature_tests/noscript.out
index c5d3199ce9b6a..1ead63b5edfdc 100644
--- a/validator/testdata/feature_tests/noscript.out
+++ b/validator/testdata/feature_tests/noscript.out
@@ -51,36 +51,36 @@ FAIL
 |      <audio>
 |        <source>
 >>       ^~~~~~~~~
-feature_tests/noscript.html:51:6 The mandatory attribute 'src' is missing in tag 'audio > source'. (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/noscript.html:51:6 The mandatory attribute 'src' is missing in tag 'source'. (see https://amp.dev/documentation/components/amp-audio/)
 >>       ^~~~~~~~~
-feature_tests/noscript.html:51:6 The mandatory attribute 'type' is missing in tag 'audio > source'. (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/noscript.html:51:6 The mandatory attribute 'type' is missing in tag 'source'. (see https://amp.dev/documentation/components/amp-audio/)
 |      </audio>
 |    </noscript>
 |    <!-- Invalid: img must have src; alt, height and width are optional -->
 |    <noscript>
 |      <img alt="Iconic Lemurs">
 >>     ^~~~~~~~~
-feature_tests/noscript.html:56:4 The mandatory attribute 'src' is missing in tag 'img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/noscript.html:56:4 The mandatory attribute 'src' is missing in tag 'img'. (see https://amp.dev/documentation/components/amp-img/)
 |    </noscript>
 |    <!-- Invalid: audio must be in a noscript tag -->
 |    <audio controls>
 >>   ^~~~~~~~~
-feature_tests/noscript.html:59:2 The tag 'audio' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-audio'? (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/noscript.html:59:2 The tag 'audio' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-audio'? (see https://amp.dev/documentation/components/amp-audio/)
 |      <source src="https://example.com/howl-of-the-lemur.mp3" type="audio/mpeg">
 |    </audio>
 |    <!-- Invalid: img must be in a noscript tag -->
 |    <img alt="Iconic Lemurs" height="200" src="https://example.com/lemurs.png" width="80">
 >>   ^~~~~~~~~
-feature_tests/noscript.html:63:2 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img)
+feature_tests/noscript.html:63:2 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- Invalid: video must be in a noscript tag -->
 |    <video controls height="480" width="640">
 >>   ^~~~~~~~~
-feature_tests/noscript.html:65:2 The tag 'video' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-video'? (see https://amp.dev/documentation/components/amp-video)
+feature_tests/noscript.html:65:2 The tag 'video' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-video'? (see https://amp.dev/documentation/components/amp-video/)
 |      <source src="https://example.com/island-of-lemurs.mp4" type="video/mp4">
 |    </video>
 |    <!-- Invalid: nested noscript tags don't correctly parse. -->
 |    <noscript> <noscript> </noscript> </noscript>
 >>              ^~~~~~~~~
-feature_tests/noscript.html:69:13 The parent tag of tag 'noscript enclosure for boilerplate' is 'noscript', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/noscript.html:69:13 The parent tag of tag 'noscript enclosure for boilerplate' is 'noscript', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 |  </body>
 |  </html>
diff --git a/validator/testdata/feature_tests/not_amp.out b/validator/testdata/feature_tests/not_amp.out
index 2d529f52c9ffb..51bac9b38c5c1 100644
--- a/validator/testdata/feature_tests/not_amp.out
+++ b/validator/testdata/feature_tests/not_amp.out
@@ -30,14 +30,14 @@ feature_tests/not_amp.html:21:0 The mandatory attribute '⚡' is missing in tag
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-feature_tests/not_amp.html:28:6 The mandatory tag 'link rel=canonical' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/not_amp.html:28:6 The mandatory tag 'link rel=canonical' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >>       ^~~~~~~~~
-feature_tests/not_amp.html:28:6 The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/not_amp.html:28:6 The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >>       ^~~~~~~~~
-feature_tests/not_amp.html:28:6 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/not_amp.html:28:6 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >>       ^~~~~~~~~
-feature_tests/not_amp.html:28:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/not_amp.html:28:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >>       ^~~~~~~~~
-feature_tests/not_amp.html:28:6 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/not_amp.html:28:6 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >>       ^~~~~~~~~
-feature_tests/not_amp.html:28:6 The mandatory tag 'amphtml engine v0.js script' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/not_amp.html:28:6 The mandatory tag 'amphtml engine script' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
diff --git a/validator/testdata/feature_tests/old-boilerplate.out b/validator/testdata/feature_tests/old-boilerplate.out
index ab8dd3953d1d5..565309b600573 100644
--- a/validator/testdata/feature_tests/old-boilerplate.out
+++ b/validator/testdata/feature_tests/old-boilerplate.out
@@ -24,9 +24,9 @@ FAIL
 |    <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
 |    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
 >>   ^~~~~~~~~
-feature_tests/old-boilerplate.html:24:2 The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/old-boilerplate.html:24:2 The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 >>                                             ^~~~~~~~~
-feature_tests/old-boilerplate.html:24:44 The parent tag of tag 'style amp-custom' is 'noscript', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/old-boilerplate.html:24:44 The parent tag of tag 'style amp-custom' is 'noscript', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |  </head>
 |  <body>
@@ -39,6 +39,6 @@ feature_tests/old-boilerplate.html:24:44 The parent tag of tag 'style amp-custom
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-feature_tests/old-boilerplate.html:35:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/old-boilerplate.html:35:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >>       ^~~~~~~~~
-feature_tests/old-boilerplate.html:35:6 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/old-boilerplate.html:35:6 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
diff --git a/validator/testdata/feature_tests/parser.out b/validator/testdata/feature_tests/parser.out
index 0c82e08a1bd25..437c9735f0444 100644
--- a/validator/testdata/feature_tests/parser.out
+++ b/validator/testdata/feature_tests/parser.out
@@ -32,52 +32,52 @@ FAIL
 |    <!-- Strangely quoted attributes: -->
 |    <a href="foo.html""></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:32:2 The attribute '"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:32:2 The attribute '"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href='foo.html''></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:33:2 The attribute ''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:33:2 The attribute ''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href=""foo.html"></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:34:2 The attribute 'foo.html"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:34:2 The attribute 'foo.html"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href=''foo.html'></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:35:2 The attribute 'foo.html'' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:35:2 The attribute 'foo.html'' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href=""foo.html""></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:36:2 The attribute 'foo.html""' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:36:2 The attribute 'foo.html""' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href=''foo.html''></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:37:2 The attribute 'foo.html''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:37:2 The attribute 'foo.html''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a '></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:38:2 The attribute ''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:38:2 The attribute ''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a "></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:39:2 The attribute '"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:39:2 The attribute '"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href"foo.html"></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:40:2 The attribute 'href"foo.html"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:40:2 The attribute 'href"foo.html"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href'foo.html'></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:41:2 The attribute 'href'foo.html'' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:41:2 The attribute 'href'foo.html'' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href"foo.html""></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:42:2 The attribute 'href"foo.html""' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:42:2 The attribute 'href"foo.html""' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href'foo.html''></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:43:2 The attribute 'href'foo.html''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:43:2 The attribute 'href'foo.html''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href""foo.html"></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:44:2 The attribute 'href""foo.html"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:44:2 The attribute 'href""foo.html"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href''foo.html'></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:45:2 The attribute 'href''foo.html'' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:45:2 The attribute 'href''foo.html'' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href""foo.html""></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:46:2 The attribute 'href""foo.html""' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:46:2 The attribute 'href""foo.html""' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href''foo.html''></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:47:2 The attribute 'href''foo.html''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:47:2 The attribute 'href''foo.html''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |
 |    <!-- Attributes in closing tags: -->
 |    <a></a foo>
@@ -88,16 +88,16 @@ feature_tests/parser.html:47:2 The attribute 'href''foo.html''' may not appear i
 |    <!-- <, / as attributes: -->
 |    <a < ></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:56:2 The attribute '<' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:56:2 The attribute '<' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a / ></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:57:2 The attribute '/' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:57:2 The attribute '/' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a /a></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:58:2 The attribute '/a' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:58:2 The attribute '/a' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a /a ></a>
 >>   ^~~~~~~~~
-feature_tests/parser.html:59:2 The attribute '/a' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/parser.html:59:2 The attribute '/a' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |
 |    <!-- Tags that may be processing instructions: -->
 |    <?php ?>
diff --git a/validator/testdata/feature_tests/parser.out.cpponly b/validator/testdata/feature_tests/parser.out.cpponly
new file mode 100644
index 0000000000000..94677bf07a59d
--- /dev/null
+++ b/validator/testdata/feature_tests/parser.out.cpponly
@@ -0,0 +1,117 @@
+FAIL
+|  <!--
+|    Copyright 2015 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This runs some tests which exercise our HTML parser.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content=width=device-width,minimum-scale=1>
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|
+|    <!-- Strangely quoted attributes: -->
+|    <a href="foo.html""></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:32:2 The attribute '"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a href='foo.html''></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:33:2 The attribute ''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a href=""foo.html"></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:34:2 The attribute 'foo.html"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a href=''foo.html'></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:35:2 The attribute 'foo.html'' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a href=""foo.html""></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:36:2 The attribute 'foo.html""' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a href=''foo.html''></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:37:2 The attribute 'foo.html''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a '></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:38:2 The attribute ''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a "></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:39:2 The attribute '"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a href"foo.html"></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:40:2 The attribute 'href"foo.html"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a href'foo.html'></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:41:2 The attribute 'href'foo.html'' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a href"foo.html""></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:42:2 The attribute 'href"foo.html""' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a href'foo.html''></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:43:2 The attribute 'href'foo.html''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a href""foo.html"></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:44:2 The attribute 'href""foo.html"' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a href''foo.html'></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:45:2 The attribute 'href''foo.html'' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a href""foo.html""></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:46:2 The attribute 'href""foo.html""' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a href''foo.html''></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:47:2 The attribute 'href''foo.html''' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|
+|    <!-- Attributes in closing tags: -->
+|    <a></a foo>
+|    <a></a href>
+|    <a></a foo="foo.html">
+|    <a></a href="foo.html">
+|
+|    <!-- <, / as attributes: -->
+|    <a < ></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:56:2 The attribute '<' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a / ></a>
+|    <a /a></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:58:2 The attribute 'a' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|    <a /a ></a>
+>>   ^~~~~~~~~
+feature_tests/parser.html:59:2 The attribute 'a' may not appear in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
+|
+|    <!-- Tags that may be processing instructions: -->
+|    <?php ?>
+|    < ?php ?>
+>>     ^~~~~~~~~
+feature_tests/parser.html:63:4 The tag '<?' is disallowed.
+|    <?php echo 'Hello, World'; ?>
+|    <?php <span>Content</span> ?>
+>>     ^~~~~~~~~
+feature_tests/parser.html:65:4 The tag '<?' is disallowed.
+|    <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
+>>     ^~~~~~~~~
+feature_tests/parser.html:66:4 The tag '<?' is disallowed.
+|    < ?xml:namespace ?>
+>>     ^~~~~~~~~
+feature_tests/parser.html:67:4 The tag '<?' is disallowed.
+|
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/recipe-json-ld.html b/validator/testdata/feature_tests/recipe-json-ld.html
index f7b9b401b3846..19c16fff3b9f1 100644
--- a/validator/testdata/feature_tests/recipe-json-ld.html
+++ b/validator/testdata/feature_tests/recipe-json-ld.html
@@ -56,25 +56,27 @@
         background-color: gray;
       }
     </style>
+
+    <!--
+        For the JSON-LD below, the document referenced in mainEntityOfPage
+        should be the same as the canonical link above.
+
+        Also, please be aware that some platforms that use AMP HTML have
+        further restrictions with regards to some schema components.
+
+        For example:
+
+          * The leader "image" referenced in the markup below must appear
+          somewhere on the AMP HTML document itself.
+
+          * The URL for that "image" must precisely match the src of the
+          amp-img tag.
+
+          * All marked-up URLs should be absolute.
+
+          * The "logo" dimensions must not exceed 600x60.
+    -->
     <script type="application/ld+json">
-        //
-        // The document referenced in mainEntityOfPage should be the same as the
-        // canonical link above.
-        //
-        // Also, please be aware that some platforms that use AMP HTML have
-        // further restrictions with regards to some schema components.
-        //
-        // For example:
-        //
-        //   * The leader "image" referenced in the markup below must appear
-        //   somewhere on the AMP HTML document itself.
-        //
-        //   * The URL for that "image" must precisely match the src of the
-        //   amp-img tag.
-        //
-        //   * All marked-up URLs should be absolute.
-        //
-        //   * The "logo" dimensions must not exceed 600x60.
       {
         "@context": "http://schema.org/",
         "@type": "Recipe",
diff --git a/validator/testdata/feature_tests/recipe-json-ld.out b/validator/testdata/feature_tests/recipe-json-ld.out
index fe6debfb5ccb3..02ed68a6599e3 100644
--- a/validator/testdata/feature_tests/recipe-json-ld.out
+++ b/validator/testdata/feature_tests/recipe-json-ld.out
@@ -57,25 +57,27 @@ PASS
 |          background-color: gray;
 |        }
 |      </style>
+|
+|      <!--
+|          For the JSON-LD below, the document referenced in mainEntityOfPage
+|          should be the same as the canonical link above.
+|
+|          Also, please be aware that some platforms that use AMP HTML have
+|          further restrictions with regards to some schema components.
+|
+|          For example:
+|
+|            * The leader "image" referenced in the markup below must appear
+|            somewhere on the AMP HTML document itself.
+|
+|            * The URL for that "image" must precisely match the src of the
+|            amp-img tag.
+|
+|            * All marked-up URLs should be absolute.
+|
+|            * The "logo" dimensions must not exceed 600x60.
+|      -->
 |      <script type="application/ld+json">
-|          //
-|          // The document referenced in mainEntityOfPage should be the same as the
-|          // canonical link above.
-|          //
-|          // Also, please be aware that some platforms that use AMP HTML have
-|          // further restrictions with regards to some schema components.
-|          //
-|          // For example:
-|          //
-|          //   * The leader "image" referenced in the markup below must appear
-|          //   somewhere on the AMP HTML document itself.
-|          //
-|          //   * The URL for that "image" must precisely match the src of the
-|          //   amp-img tag.
-|          //
-|          //   * All marked-up URLs should be absolute.
-|          //
-|          //   * The "logo" dimensions must not exceed 600x60.
 |        {
 |          "@context": "http://schema.org/",
 |          "@type": "Recipe",
diff --git a/validator/testdata/feature_tests/regexps.out b/validator/testdata/feature_tests/regexps.out
index 5c8056fc25ace..1509d9da55425 100644
--- a/validator/testdata/feature_tests/regexps.out
+++ b/validator/testdata/feature_tests/regexps.out
@@ -27,7 +27,7 @@ FAIL
 |    <meta name="viewport" content="width=device-width,minimum-scale=1">
 |    <style>invalid body</style>
 >>   ^~~~~~~~~
-feature_tests/regexps.html:27:2 The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/regexps.html:27:2 The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |    <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |
@@ -38,13 +38,13 @@ feature_tests/regexps.html:27:2 The mandatory attribute 'amp-custom' is missing
 |    <script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-latest.js"> </script>
 |    <script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js?foobar"></script>
 >>   ^~~~~~~~~
-feature_tests/regexps.html:36:2 The attribute 'src' in tag 'amp-vine extension .js script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-vine-0.1.js?foobar'. (see https://amp.dev/documentation/components/amp-vine)
+feature_tests/regexps.html:36:2 The attribute 'src' in tag 'amp-vine extension script' is set to the invalid value 'https://cdn.ampproject.org/v0/amp-vine-0.1.js?foobar'. (see https://amp.dev/documentation/components/amp-vine)
 |    <script async custom-element="amp-vine" src="http://xss.com/https://cdn.ampproject.org/v0/amp-vine-0.1.js?foobar"></script>
 >>   ^~~~~~~~~
-feature_tests/regexps.html:37:2 The attribute 'src' in tag 'amp-vine extension .js script' is set to the invalid value 'http://xss.com/https://cdn.ampproject.org/v0/amp-vine-0.1.js?foobar'. (see https://amp.dev/documentation/components/amp-vine)
+feature_tests/regexps.html:37:2 The attribute 'src' in tag 'amp-vine extension script' is set to the invalid value 'http://xss.com/https://cdn.ampproject.org/v0/amp-vine-0.1.js?foobar'. (see https://amp.dev/documentation/components/amp-vine)
 |    <script async custom-element="amp-hulu" src="https://cdn.ampproject.org/v0/amp-hulu-latest.js"> Only whitespace is allowed here. </script>
 >>   ^~~~~~~~~
-feature_tests/regexps.html:38:2 The tag 'amp-hulu extension .js script' contains text, which is disallowed. (see https://amp.dev/documentation/components/amp-hulu)
+feature_tests/regexps.html:38:2 The tag 'amp-hulu extension script' contains text, which is disallowed. (see https://amp.dev/documentation/components/amp-hulu)
 |
 |    <!--
 |    href value_regex: "https://cdn\\.materialdesignicons\\.com/([0-9]+\\.?)+/css/materialdesignicons\\.min\\.css"
@@ -54,7 +54,7 @@ feature_tests/regexps.html:38:2 The tag 'amp-hulu extension .js script' contains
 |          href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
 |    <link rel="stylesheet" type="text/css"
 >>   ^~~~~~~~~
-feature_tests/regexps.html:46:2 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://cdn.materialdesignicons.com/2.0.46/css/.../materialdesignicons.min.css'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#custom-fonts)
+feature_tests/regexps.html:46:2 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://cdn.materialdesignicons.com/2.0.46/css/.../materialdesignicons.min.css'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#custom-fonts)
 |          href="https://cdn.materialdesignicons.com/2.0.46/css/.../materialdesignicons.min.css">
 |
 |    <!--
@@ -69,7 +69,7 @@ feature_tests/regexps.html:46:2 The attribute 'href' in tag 'link rel=stylesheet
 |          href="https://cloud.typography.com/6256354/724768/css/fonts.css">
 |    <link rel="stylesheet" type="text/css"
 >>   ^~~~~~~~~
-feature_tests/regexps.html:59:2 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'http://xss.com/https://fonts.googleapis.com/css?foobar'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#custom-fonts)
+feature_tests/regexps.html:59:2 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'http://xss.com/https://fonts.googleapis.com/css?foobar'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#custom-fonts)
 |          href="http://xss.com/https://fonts.googleapis.com/css?foobar">
 |
 |    <!--
@@ -81,7 +81,7 @@ feature_tests/regexps.html:59:2 The attribute 'href' in tag 'link rel=stylesheet
 |          href="https://use.typekit.net/oeg4hgb.css">
 |    <link rel="stylesheet" type="text/css"
 >>   ^~~~~~~~~
-feature_tests/regexps.html:69:2 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://use.typekit.net/css/oeg4hgb.css'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#custom-fonts)
+feature_tests/regexps.html:69:2 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://use.typekit.net/css/oeg4hgb.css'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#custom-fonts)
 |          href="https://use.typekit.net/css/oeg4hgb.css">
 |
 |    <!--
@@ -92,7 +92,7 @@ feature_tests/regexps.html:69:2 The attribute 'href' in tag 'link rel=stylesheet
 |          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 |    <link rel="stylesheet" type="text/css"
 >>   ^~~~~~~~~
-feature_tests/regexps.html:78:2 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://maxcdn.bootstrapcdn.com/font-awesome/../bootstrap/3.3.7/css/bootstrap.min.class'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#custom-fonts)
+feature_tests/regexps.html:78:2 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://maxcdn.bootstrapcdn.com/font-awesome/../bootstrap/3.3.7/css/bootstrap.min.class'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#custom-fonts)
 |          href="https://maxcdn.bootstrapcdn.com/font-awesome/../bootstrap/3.3.7/css/bootstrap.min.class">
 |    <!--
 |      New Font Awesome url format the first five are valid the last two are not.
@@ -108,7 +108,7 @@ feature_tests/regexps.html:78:2 The attribute 'href' in tag 'link rel=stylesheet
 |    <link href="https://use.fontawesome.com/releases/v5.0.8/css/other.css" rel="stylesheet">
 |    <link href="https://use.fontawesome.com/releases/v5.0.8/../css/solid.css" rel="stylesheet">
 >>   ^~~~~~~~~
-feature_tests/regexps.html:92:2 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://use.fontawesome.com/releases/v5.0.8/../css/solid.css'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#custom-fonts)
+feature_tests/regexps.html:92:2 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://use.fontawesome.com/releases/v5.0.8/../css/solid.css'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#custom-fonts)
 |    <!--
 |      Old Font Awesome url format. Valid.
 |    -->
@@ -123,13 +123,13 @@ feature_tests/regexps.html:92:2 The attribute 'href' in tag 'link rel=stylesheet
 |    <link rel="accessibility alternate archives">
 |    <link rel="import">
 >>   ^~~~~~~~~
-feature_tests/regexps.html:105:2 The attribute 'rel' in tag 'link rel=' is set to the invalid value 'import'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags)
+feature_tests/regexps.html:105:2 The attribute 'rel' in tag 'link' is set to the invalid value 'import'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags)
 |    <link rel="accessibility subresource">
 >>   ^~~~~~~~~
-feature_tests/regexps.html:106:2 The attribute 'rel' in tag 'link rel=' is set to the invalid value 'accessibility subresource'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags)
+feature_tests/regexps.html:106:2 The attribute 'rel' in tag 'link' is set to the invalid value 'accessibility subresource'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags)
 |    <link rel="manifest accessibility">
 >>   ^~~~~~~~~
-feature_tests/regexps.html:107:2 The attribute 'rel' in tag 'link rel=' is set to the invalid value 'manifest accessibility'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags)
+feature_tests/regexps.html:107:2 The attribute 'rel' in tag 'link' is set to the invalid value 'manifest accessibility'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags)
 |
 |    <!--
 |    name disallowed_value_regex: "(^|\\s)(viewport|content-disposition|revisit-after)($|\\s)"
@@ -139,10 +139,10 @@ feature_tests/regexps.html:107:2 The attribute 'rel' in tag 'link rel=' is set t
 |    <meta name="validcontent-disposition" content="">
 |    <meta name="content-disposition" content="">
 >>   ^~~~~~~~~
-feature_tests/regexps.html:115:2 The attribute 'name' in tag 'meta name= and content=' is set to the invalid value 'content-disposition'.
+feature_tests/regexps.html:115:2 The attribute 'name' in tag 'meta' is set to the invalid value 'content-disposition'.
 |    <meta name="invalid content-disposition" content="">
 >>   ^~~~~~~~~
-feature_tests/regexps.html:116:2 The attribute 'name' in tag 'meta name= and content=' is set to the invalid value 'invalid content-disposition'.
+feature_tests/regexps.html:116:2 The attribute 'name' in tag 'meta' is set to the invalid value 'invalid content-disposition'.
 |
 |    <!--
 |    css selector disallowed_value_regex: "(^|\\W)i-amphtml-"
@@ -150,7 +150,7 @@ feature_tests/regexps.html:116:2 The attribute 'name' in tag 'meta name= and con
 |    -->
 |    <style amp-custom>
 >>   ^~~~~~~~~
-feature_tests/regexps.html:122:2 The text inside tag 'style amp-custom' contains 'CSS i-amphtml- name prefix', which is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/regexps.html:122:2 The text inside tag 'style amp-custom' contains 'CSS i-amphtml- name prefix', which is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |      .comic-amp-font-loaded .comic-amp {
 |        font-family: 'Comic AMP', serif, sans-serif;
 |      }
@@ -170,10 +170,10 @@ feature_tests/regexps.html:122:2 The text inside tag 'style amp-custom' contains
 |    <div class="example-amp-font"></div>
 |    <div class="example-amp-font i-amphtml-hidden"></div>
 >>   ^~~~~~~~~
-feature_tests/regexps.html:140:2 The attribute 'class' in tag 'div' is set to the invalid value 'example-amp-font i-amphtml-hidden'.
+feature_tests/regexps.html:140:2 The attribute 'class' in tag 'div' is set to the invalid value 'example-amp-font i-amphtml-hidden'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/#disallowed-styles)
 |    <div class="i-amphtml-hidden example-amp-font"></div>
 >>   ^~~~~~~~~
-feature_tests/regexps.html:141:2 The attribute 'class' in tag 'div' is set to the invalid value 'i-amphtml-hidden example-amp-font'.
+feature_tests/regexps.html:141:2 The attribute 'class' in tag 'div' is set to the invalid value 'i-amphtml-hidden example-amp-font'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/#disallowed-styles)
 |
 |    <!--
 |    id disallowed_value_regex: lengthy, see protoascii
@@ -195,17 +195,17 @@ feature_tests/regexps.html:149:2 The attribute 'id' in tag 'div' is set to the i
 |    <input name="email" />
 |    <input name="innerHTML" />
 >>   ^~~~~~~~~
-feature_tests/regexps.html:157:2 The attribute 'name' in tag 'input' is set to the invalid value 'innerHTML'. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/regexps.html:157:2 The attribute 'name' in tag 'input' is set to the invalid value 'innerHTML'. (see https://amp.dev/documentation/components/amp-form/)
 |    <input name="__amp_source_origin" />
 >>   ^~~~~~~~~
-feature_tests/regexps.html:158:2 The attribute 'name' in tag 'input' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/regexps.html:158:2 The attribute 'name' in tag 'input' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-form/)
 |    <input name="webkitRequestFullscreen" />
 >>   ^~~~~~~~~
-feature_tests/regexps.html:159:2 The attribute 'name' in tag 'input' is set to the invalid value 'webkitRequestFullscreen'. (see https://amp.dev/documentation/components/amp-form)
+feature_tests/regexps.html:159:2 The attribute 'name' in tag 'input' is set to the invalid value 'webkitRequestFullscreen'. (see https://amp.dev/documentation/components/amp-form/)
 |
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-feature_tests/regexps.html:162:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/regexps.html:162:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >>       ^~~~~~~~~
 feature_tests/regexps.html:162:6 The extension 'amp-hulu' was found on this page, but is unused. Please remove this extension.
diff --git a/validator/testdata/feature_tests/review-json-ld.html b/validator/testdata/feature_tests/review-json-ld.html
index 6c5a045cda16e..961176385ca5d 100644
--- a/validator/testdata/feature_tests/review-json-ld.html
+++ b/validator/testdata/feature_tests/review-json-ld.html
@@ -56,26 +56,26 @@
         background-color: gray;
       }
     </style>
+    <!--
+        For the JSON-LD below, the document referenced in mainEntityOfPage
+        should be the same as the canonical link above.
+
+        Also, please be aware that some platforms that use AMP HTML have
+        further restrictions with regards to some schema components.
+
+        For example:
+
+          * The leader "image" referenced in the markup below must appear
+          somewhere on the AMP HTML document itself.
+
+          * The URL for that "image" must precisely match the src of the
+          amp-img tag.
+
+          * All marked-up URLs should be absolute.
+
+          * The "logo" dimensions must not exceed 600x60.
+    -->
     <script type="application/ld+json">
-        //
-        // The document referenced in mainEntityOfPage should be the same as the
-        // canonical link above.
-        //
-        // Also, please be aware that some platforms that use AMP HTML have
-        // further restrictions with regards to some schema components.
-        //
-        // For example:
-        //
-        //   * The leader "image" referenced in the markup below must appear
-        //   somewhere on the AMP HTML document itself.
-        //
-        //   * The URL for that "image" must precisely match the src of the
-        //   amp-img tag.
-        //
-        //   * All marked-up URLs should be absolute.
-        //
-        //   * The "logo" dimensions must not exceed 600x60.
-        //
       {
         "@context": "http://schema.org/",
         "@type": "Review",
diff --git a/validator/testdata/feature_tests/review-json-ld.out b/validator/testdata/feature_tests/review-json-ld.out
index f990f08b72765..c0877f4c4f430 100644
--- a/validator/testdata/feature_tests/review-json-ld.out
+++ b/validator/testdata/feature_tests/review-json-ld.out
@@ -57,26 +57,26 @@ PASS
 |          background-color: gray;
 |        }
 |      </style>
+|      <!--
+|          For the JSON-LD below, the document referenced in mainEntityOfPage
+|          should be the same as the canonical link above.
+|
+|          Also, please be aware that some platforms that use AMP HTML have
+|          further restrictions with regards to some schema components.
+|
+|          For example:
+|
+|            * The leader "image" referenced in the markup below must appear
+|            somewhere on the AMP HTML document itself.
+|
+|            * The URL for that "image" must precisely match the src of the
+|            amp-img tag.
+|
+|            * All marked-up URLs should be absolute.
+|
+|            * The "logo" dimensions must not exceed 600x60.
+|      -->
 |      <script type="application/ld+json">
-|          //
-|          // The document referenced in mainEntityOfPage should be the same as the
-|          // canonical link above.
-|          //
-|          // Also, please be aware that some platforms that use AMP HTML have
-|          // further restrictions with regards to some schema components.
-|          //
-|          // For example:
-|          //
-|          //   * The leader "image" referenced in the markup below must appear
-|          //   somewhere on the AMP HTML document itself.
-|          //
-|          //   * The URL for that "image" must precisely match the src of the
-|          //   amp-img tag.
-|          //
-|          //   * All marked-up URLs should be absolute.
-|          //
-|          //   * The "logo" dimensions must not exceed 600x60.
-|          //
 |        {
 |          "@context": "http://schema.org/",
 |          "@type": "Review",
diff --git a/validator/testdata/feature_tests/root_element_attributes.out b/validator/testdata/feature_tests/root_element_attributes.out
index 75f7fc7e0e14a..aae705ba4709e 100644
--- a/validator/testdata/feature_tests/root_element_attributes.out
+++ b/validator/testdata/feature_tests/root_element_attributes.out
@@ -18,11 +18,11 @@ FAIL
 |  <!doctype html>
 |  <html ⚡ allow-xhr-interception allow-viewer-render-template report-errors-to-viewer>
 >> ^~~~~~~~~
-feature_tests/root_element_attributes.html:18:0 The attribute 'allow-viewer-render-template' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/root_element_attributes.html:18:0 The attribute 'allow-viewer-render-template' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >> ^~~~~~~~~
-feature_tests/root_element_attributes.html:18:0 The attribute 'allow-xhr-interception' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/root_element_attributes.html:18:0 The attribute 'allow-xhr-interception' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >> ^~~~~~~~~
-feature_tests/root_element_attributes.html:18:0 The attribute 'report-errors-to-viewer' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/root_element_attributes.html:18:0 The attribute 'report-errors-to-viewer' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |  <head>
 |    <meta charset="utf-8">
 |    <link rel="canonical" href="./regular-html-version.html">
diff --git a/validator/testdata/feature_tests/runtime_in_body.out b/validator/testdata/feature_tests/runtime_in_body.out
index 97d6bcff732d9..9b11a46c03ce2 100644
--- a/validator/testdata/feature_tests/runtime_in_body.out
+++ b/validator/testdata/feature_tests/runtime_in_body.out
@@ -40,7 +40,7 @@ FAIL
 |
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 >>   ^~~~~~~~~
-feature_tests/runtime_in_body.html:40:2 The parent tag of tag 'amphtml engine v0.js script' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/runtime_in_body.html:40:2 The parent tag of tag 'amphtml engine script' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |
 |  </body>
 |  </html>
diff --git a/validator/testdata/feature_tests/script_amp_onerror_js.html b/validator/testdata/feature_tests/script_amp_onerror_js.html
new file mode 100644
index 0000000000000..832fd4a8826b5
--- /dev/null
+++ b/validator/testdata/feature_tests/script_amp_onerror_js.html
@@ -0,0 +1,35 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  This tests the validity of the script tag for early styling on fast failure
+  to load v0.js. See GitHub #22543.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <!-- Valid -->
+  <script amp-onerror>document.querySelector("script[src*='/v0.js']").onerror=function(){document.querySelector('style[amp-boilerplate]').textContent=''}</script>
+</head>
+<body>
+Hello, world.
+</body>
+</html>
diff --git a/validator/testdata/feature_tests/script_amp_onerror_js.out b/validator/testdata/feature_tests/script_amp_onerror_js.out
new file mode 100644
index 0000000000000..9610947237a83
--- /dev/null
+++ b/validator/testdata/feature_tests/script_amp_onerror_js.out
@@ -0,0 +1,36 @@
+PASS
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This tests the validity of the script tag for early styling on fast failure
+|    to load v0.js. See GitHub #22543.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <!-- Valid -->
+|    <script amp-onerror>document.querySelector("script[src*='/v0.js']").onerror=function(){document.querySelector('style[amp-boilerplate]').textContent=''}</script>
+|  </head>
+|  <body>
+|  Hello, world.
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/script_amp_onerror_js_fail.html b/validator/testdata/feature_tests/script_amp_onerror_js_fail.html
new file mode 100644
index 0000000000000..4b95591f03c7b
--- /dev/null
+++ b/validator/testdata/feature_tests/script_amp_onerror_js_fail.html
@@ -0,0 +1,35 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  This tests the validity of the script tag for early styling on fast failure
+  to load v0.js. See GitHub #22543.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <!-- Invalid: cdata does not match exactly -->
+  <script amp-onerror>document.querySelector("script[src*='/v0.js']").onerror=function(){document.querySelector('style[amp-boilerplate]').textContent=' '}</script>
+</head>
+<body>
+Hello, world.
+</body>
+</html>
diff --git a/validator/testdata/feature_tests/script_amp_onerror_js_fail.out b/validator/testdata/feature_tests/script_amp_onerror_js_fail.out
new file mode 100644
index 0000000000000..f19f48b13ec51
--- /dev/null
+++ b/validator/testdata/feature_tests/script_amp_onerror_js_fail.out
@@ -0,0 +1,38 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This tests the validity of the script tag for early styling on fast failure
+|    to load v0.js. See GitHub #22543.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <!-- Invalid: cdata does not match exactly -->
+|    <script amp-onerror>document.querySelector("script[src*='/v0.js']").onerror=function(){document.querySelector('style[amp-boilerplate]').textContent=' '}</script>
+>>   ^~~~~~~~~
+feature_tests/script_amp_onerror_js_fail.html:30:2 The mandatory text inside tag 'script amp-onerror' is missing or incorrect.
+|  </head>
+|  <body>
+|  Hello, world.
+|  </body>
+|  </html>
\ No newline at end of file
diff --git a/validator/testdata/feature_tests/several_errors.out b/validator/testdata/feature_tests/several_errors.out
index bd840eaaf3bf8..572878d0ff441 100644
--- a/validator/testdata/feature_tests/several_errors.out
+++ b/validator/testdata/feature_tests/several_errors.out
@@ -23,12 +23,12 @@ FAIL
 |  <head>
 |    <meta charset='pick-a-key'>
 >>   ^~~~~~~~~
-feature_tests/several_errors.html:23:2 The attribute 'charset' in tag 'meta charset=utf-8' is set to the invalid value 'pick-a-key'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/several_errors.html:23:2 The attribute 'charset' in tag 'meta charset=utf-8' is set to the invalid value 'pick-a-key'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |    <link rel='canonical' href='./regular-html-version.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>
 |    <script type='javascript'>
 >>   ^~~~~~~~~
-feature_tests/several_errors.html:26:2 Custom JavaScript is not allowed. (see https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed)
+feature_tests/several_errors.html:26:2 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
 |    // Let's go crazy. Uhm, no, hahaha.
 |    </script>
 |  </head>
@@ -36,27 +36,27 @@ feature_tests/several_errors.html:26:2 Custom JavaScript is not allowed. (see ht
 |    <table><tr><td>Tables are allowed</td></tr></table>
 |    <amp-img src=dimensions_are_missing.jpg layout="fixed"/>
 >>   ^~~~~~~~~
-feature_tests/several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- We don't allow percent as a size unit either. -->
 |    <amp-ad width=100% height=300>
 >>   ^~~~~~~~~
-feature_tests/several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see https://amp.dev/documentation/components/amp-ad)
+feature_tests/several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see https://amp.dev/documentation/components/amp-ad/)
 |      <!-- <script>document.write(…)</script> -->
 |    </amp-ad>
 |    <amp-ad width="42" height="42" made_up_attribute="oh hi"></amp-ad>
 >>   ^~~~~~~~~
-feature_tests/several_errors.html:37:2 The attribute 'made_up_attribute' may not appear in tag 'amp-ad'. (see https://amp.dev/documentation/components/amp-ad)
+feature_tests/several_errors.html:37:2 The attribute 'made_up_attribute' may not appear in tag 'amp-ad'. (see https://amp.dev/documentation/components/amp-ad/)
 |    <!-- When rendering errors for attribute values, we collapse whitespace -
 |         even whitespace that is originally encoded.-->
 |    <amp-ad width="42" height="foo&#13;&#10;bar  baz">
 >>   ^~~~~~~~~
-feature_tests/several_errors.html:40:2 The attribute 'height' in tag 'amp-ad' is set to the invalid value 'foo bar baz'. (see https://amp.dev/documentation/components/amp-ad)
+feature_tests/several_errors.html:40:2 The attribute 'height' in tag 'amp-ad' is set to the invalid value 'foo bar baz'. (see https://amp.dev/documentation/components/amp-ad/)
 |    </amp-ad>
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-feature_tests/several_errors.html:43:6 The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/several_errors.html:43:6 The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >>       ^~~~~~~~~
-feature_tests/several_errors.html:43:6 The tag 'amp-ad extension .js script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error. (see https://amp.dev/documentation/components/amp-ad)
+feature_tests/several_errors.html:43:6 The tag 'amp-ad extension script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error. (see https://amp.dev/documentation/components/amp-ad/)
 >>       ^~~~~~~~~
-feature_tests/several_errors.html:43:6 The mandatory tag 'amphtml engine v0.js script' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/several_errors.html:43:6 The mandatory tag 'amphtml engine script' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
diff --git a/validator/testdata/feature_tests/slash_attrs.out.cpponly b/validator/testdata/feature_tests/slash_attrs.out.cpponly
new file mode 100644
index 0000000000000..cf4727ea7b38d
--- /dev/null
+++ b/validator/testdata/feature_tests/slash_attrs.out.cpponly
@@ -0,0 +1,48 @@
+FAIL
+|  <!--
+|    Copyright 2015 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This is the minimum valid AMP document; it includes all of the required
+|    fields from the spec, but nothing else.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|
+|    <p data-this-is-fine="">
+|    <p data-\this-is-not="">
+>>   ^~~~~~~~~
+feature_tests/slash_attrs.html:33:2 The attribute 'data-\this-is-not' may not appear in tag 'p'.
+|    <p data-/this-is-not="">
+>>   ^~~~~~~~~
+feature_tests/slash_attrs.html:34:2 The attribute 'this-is-not' may not appear in tag 'p'.
+|    <p data-\this-is-not>
+>>   ^~~~~~~~~
+feature_tests/slash_attrs.html:35:2 The attribute 'data-\this-is-not' may not appear in tag 'p'.
+|    <p data-/this-is-not>
+>>   ^~~~~~~~~
+feature_tests/slash_attrs.html:36:2 The attribute 'this-is-not' may not appear in tag 'p'.
+|
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/spec_example.html b/validator/testdata/feature_tests/spec_example.html
index 540c7a75cfc7c..9f5fed6f5d6b6 100644
--- a/validator/testdata/feature_tests/spec_example.html
+++ b/validator/testdata/feature_tests/spec_example.html
@@ -16,7 +16,7 @@
 <!--
   Test Description:
   This is the sample document from the AMP spec.
-  https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md
+  https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md
 -->
 <!doctype html>
 <html ⚡>
diff --git a/validator/testdata/feature_tests/spec_example.out b/validator/testdata/feature_tests/spec_example.out
index 09795b334666f..12b723a74464f 100644
--- a/validator/testdata/feature_tests/spec_example.out
+++ b/validator/testdata/feature_tests/spec_example.out
@@ -17,7 +17,7 @@ PASS
 |  <!--
 |    Test Description:
 |    This is the sample document from the AMP spec.
-|    https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md
+|    https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md
 |  -->
 |  <!doctype html>
 |  <html ⚡>
@@ -59,4 +59,4 @@ PASS
 |    </body>
 |  </html>
 >>       ^~~~~~~~~
-feature_tests/spec_example.html:59:6 The tag 'amp-ad extension .js script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error. (see https://amp.dev/documentation/components/amp-ad)
+feature_tests/spec_example.html:59:6 The tag 'amp-ad extension script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error. (see https://amp.dev/documentation/components/amp-ad/)
diff --git a/validator/testdata/feature_tests/style_amp_keyframes_error.html b/validator/testdata/feature_tests/style_amp_keyframes_error.html
index 258a2d0c9bb9a..633633bb9c6ed 100644
--- a/validator/testdata/feature_tests/style_amp_keyframes_error.html
+++ b/validator/testdata/feature_tests/style_amp_keyframes_error.html
@@ -65,4 +65,3 @@
   </style>
 </body>
 </html>
-
diff --git a/validator/testdata/feature_tests/style_amp_keyframes_passing.html b/validator/testdata/feature_tests/style_amp_keyframes_passing.html
index df7d31139d111..fcb60c7411acf 100644
--- a/validator/testdata/feature_tests/style_amp_keyframes_passing.html
+++ b/validator/testdata/feature_tests/style_amp_keyframes_passing.html
@@ -95,4 +95,3 @@
   </style>
 </body>
 </html>
-
diff --git a/validator/testdata/feature_tests/style_in_body_error.html b/validator/testdata/feature_tests/style_in_body_error.html
index a6af455d61eae..3a4b2a24440b0 100644
--- a/validator/testdata/feature_tests/style_in_body_error.html
+++ b/validator/testdata/feature_tests/style_in_body_error.html
@@ -32,4 +32,3 @@
   <div></div>
 </body>
 </html>
-
diff --git a/validator/testdata/feature_tests/style_in_body_passing.html b/validator/testdata/feature_tests/style_in_body_passing.html
index 35a8d9c0e3efb..1c6ef786657fa 100644
--- a/validator/testdata/feature_tests/style_in_body_passing.html
+++ b/validator/testdata/feature_tests/style_in_body_passing.html
@@ -32,4 +32,3 @@
   <style amp-keyframes></style>
 </body>
 </html>
-
diff --git a/validator/testdata/feature_tests/style_tag.out b/validator/testdata/feature_tests/style_tag.out
index f721221cce059..6ebf93301e23f 100644
--- a/validator/testdata/feature_tests/style_tag.out
+++ b/validator/testdata/feature_tests/style_tag.out
@@ -30,12 +30,12 @@ FAIL
 |
 |    <style></style>
 >>   ^~~~~~~~~
-feature_tests/style_tag.html:30:2 The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/style_tag.html:30:2 The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |
 |  </head>
 |  <body>
 |    <style></style>
 >>   ^~~~~~~~~
-feature_tests/style_tag.html:34:2 The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/style_tag.html:34:2 The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |  </body>
 |  </html>
diff --git a/validator/testdata/feature_tests/stylesheet_in_body.out b/validator/testdata/feature_tests/stylesheet_in_body.out
index d7d9a850f392d..f8b981c591aba 100644
--- a/validator/testdata/feature_tests/stylesheet_in_body.out
+++ b/validator/testdata/feature_tests/stylesheet_in_body.out
@@ -41,7 +41,7 @@ FAIL
 |
 |    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 >>   ^~~~~~~~~
-feature_tests/stylesheet_in_body.html:41:2 The parent tag of tag 'link rel=stylesheet for fonts' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#custom-fonts)
+feature_tests/stylesheet_in_body.html:41:2 The parent tag of tag 'link rel=stylesheet for fonts' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#custom-fonts)
 |
 |  </body>
 |  </html>
diff --git a/validator/testdata/feature_tests/svg-filter-primitive-elements.html b/validator/testdata/feature_tests/svg-filter-primitive-elements.html
new file mode 100644
index 0000000000000..00b02178341d1
--- /dev/null
+++ b/validator/testdata/feature_tests/svg-filter-primitive-elements.html
@@ -0,0 +1,217 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  Tests SVG filter primitive elements.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="./regular-html-version.html">
+  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <!-- Valid: feBlend -->
+  <svg>
+    <defs>
+      <filter id="spotlight">
+        <feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
+            flood-color="green" flood-opacity="1"/>
+        <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
+      </filter>
+    </defs>
+  </svg>
+
+  <!-- Valid: feComponentTransfer -->
+  <svg>
+    <defs>
+      <filter id="identity" x="0" y="0" width="100%" height="100%">
+        <feComponentTransfer>
+          <feFuncR type="identity"></feFuncR>
+          <feFuncG type="identity"></feFuncG>
+          <feFuncB type="identity"></feFuncB>
+          <feFuncA type="identity"></feFuncA>
+        </feComponentTransfer>
+      </filter>
+      <filter id="table" x="0" y="0" width="100%" height="100%">
+        <feComponentTransfer>
+          <feFuncR type="table" tableValues="0 0 1 1"></feFuncR>
+          <feFuncG type="table" tableValues="1 1 0 0"></feFuncG>
+          <feFuncB type="table" tableValues="0 1 1 0"></feFuncB>
+        </feComponentTransfer>
+      </filter>
+      <filter id="linear" x="0" y="0" width="100%" height="100%">
+        <feComponentTransfer>
+          <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR>
+          <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG>
+          <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB>
+        </feComponentTransfer>
+      </filter>
+    </defs>
+  </svg>
+
+  <!-- Valid: feConvolveMatrix -->
+  <svg>
+    <defs>
+      <filter id="emboss">
+        <feConvolveMatrix
+            kernelMatrix="3 0 0
+                          0 0 0
+                          0 0 -3"/>
+      </filter>
+    </defs>
+    <image xlink:href="/foo.svg" x="0" y="0"
+        height="200" width="200" style="filter:url(#emboss);" />
+  </svg>
+
+  <!-- Valid: feDiffuseLighting -->
+  <svg>
+    <text text-anchor="middle" x="170" y="22">fePointLight</text>
+    <filter id="lightMe1">
+      <feDiffuseLighting in="SourceGraphic" result="light"
+          lighting-color="white">
+        <fePointLight x="150" y="60" z="20" />
+      </feDiffuseLighting>
+      <feComposite in="SourceGraphic" in2="light"
+                   operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+    </filter>
+    <circle cx="170" cy="80" r="50" fill="green"
+        filter="url(#lightMe1)" />
+  </svg>
+
+  <!-- Valid: feDisplacementMap -->
+  <svg>
+    <filter id="displacementFilter">
+      <feTurbulence type="turbulence" baseFrequency="0.05"
+          numOctaves="2" result="turbulence"/>
+      <feDisplacementMap in2="turbulence" in="SourceGraphic"
+          scale="50" xChannelSelector="R" yChannelSelector="G"/>
+    </filter>
+    <circle cx="100" cy="100" r="100"
+        style="filter: url(#displacementFilter)"/>
+  </svg>
+
+  <!-- Valid: feDropShadow -->
+  <svg>
+    <defs>
+      <filter id="shadow">
+        <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
+      </filter>
+    </defs>
+    <circle cx="5" cy="50%" r="4"
+        style="fill:pink; filter:url(#shadow);"/>
+  </svg>
+
+  <!-- Valid: feMorphology -->
+  <svg>
+    <filter id="erode">
+      <feMorphology operator="erode" radius="1"/>
+    </filter>
+    <filter id="dilate">
+      <feMorphology operator="dilate" radius="2"/>
+    </filter>
+    <text y="1em">Normal text</text>
+    <text id="thin" y="2em">Thinned text</text>
+    <text id="thick" y="3em">Fattened text</text>
+  </svg>
+
+  <!-- Valid: fePointLight -->
+  <svg>
+   <defs>
+      <filter id="spotlight">
+        <feSpecularLighting result="spotlight" specularConstant="1.5"
+            specularExponent="80" lighting-color="#FFF">
+          <fePointLight x="50" y="50" z="220"/>
+        </feSpecularLighting>
+        <feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic"
+            k1="0" k2="1" k3="1" k4="0"/>
+      </filter>
+    </defs>
+    <image xlink:href="/foo.png" x="10%" y="10%"
+        width="80%" height="80%" style="filter:url(#spotlight);"/>
+  </svg>
+
+  <!-- Valid: feSpecularLighting -->
+  <svg>
+    <filter id = "filter">
+      <feSpecularLighting result="specOut"
+          specularExponent="20" lighting-color="#bbbbbb">
+        <fePointLight x="50" y="75" z="200"/>
+      </feSpecularLighting>
+      <feComposite in="SourceGraphic" in2="specOut"
+          operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
+    </filter>
+    <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/>
+  </svg>
+
+  <!-- Valid: feSpotlight -->
+  <svg>
+    <defs>
+      <filter id="spotlight">
+        <feSpecularLighting result="spotlight" specularConstant="1.5"
+            specularExponent="4" lighting-color="#FFF">
+          <feSpotLight x="600" y="600" z="400" limitingConeAngle="5.5" />
+        </feSpecularLighting>
+        <feComposite in="SourceGraphic" in2="spotlight" operator="out"
+            k1="0" k2="1" k3="1" k4="0"/>
+      </filter>
+    </defs>
+    <image xlink:href="/foo.png" x="10%" y="10%"
+        width="80%" height="80%" style="filter:url(#spotlight);"/>
+  </svg>
+
+  <!-- Valid: feTile -->
+  <svg>
+    <defs>
+      <filter id="tile" x="0" y="0" width="100%" height="100%">
+        <feTile in="SourceGraphic" x="50" y="50"
+            width="100" height="100" />
+        <feTile/>
+      </filter>
+    </defs>
+    <image xlink:href="/foo.png"
+        x="10%" y="10%" width="80%" height="80%"
+        style="filter:url(#tile);"/>
+  </svg>
+
+  <!-- Valid: feTurbulence -->
+  <svg>
+    <filter id="displacementFilter">
+      <feTurbulence type="turbulence" baseFrequency="0.05"
+          numOctaves="2" result="turbulence"/>
+      <feDisplacementMap in2="turbulence" in="SourceGraphic"
+          scale="50" xChannelSelector="R" yChannelSelector="G"/>
+    </filter>
+    <circle cx="100" cy="100" r="100"
+        style="filter: url(#displacementFilter)"/>
+  </svg>
+
+  <!-- Invalid: feImage, due to potentially leaking during prefetch -->
+  <svg>
+    <defs>
+      <filter id="image">
+        <feImage xlink:href="/foo.png"/>
+      </filter>
+    </defs>
+    <rect x="10%" y="10%" width="80%" height="80%"
+        style="filter:url(#image);"/>
+  </svg>
+
+</body>
+</html>
diff --git a/validator/testdata/feature_tests/svg-filter-primitive-elements.out b/validator/testdata/feature_tests/svg-filter-primitive-elements.out
new file mode 100644
index 0000000000000..ac5c999a87d90
--- /dev/null
+++ b/validator/testdata/feature_tests/svg-filter-primitive-elements.out
@@ -0,0 +1,220 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests SVG filter primitive elements.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
+|    <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>
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|  </head>
+|  <body>
+|    <!-- Valid: feBlend -->
+|    <svg>
+|      <defs>
+|        <filter id="spotlight">
+|          <feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
+|              flood-color="green" flood-opacity="1"/>
+|          <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
+|        </filter>
+|      </defs>
+|    </svg>
+|
+|    <!-- Valid: feComponentTransfer -->
+|    <svg>
+|      <defs>
+|        <filter id="identity" x="0" y="0" width="100%" height="100%">
+|          <feComponentTransfer>
+|            <feFuncR type="identity"></feFuncR>
+|            <feFuncG type="identity"></feFuncG>
+|            <feFuncB type="identity"></feFuncB>
+|            <feFuncA type="identity"></feFuncA>
+|          </feComponentTransfer>
+|        </filter>
+|        <filter id="table" x="0" y="0" width="100%" height="100%">
+|          <feComponentTransfer>
+|            <feFuncR type="table" tableValues="0 0 1 1"></feFuncR>
+|            <feFuncG type="table" tableValues="1 1 0 0"></feFuncG>
+|            <feFuncB type="table" tableValues="0 1 1 0"></feFuncB>
+|          </feComponentTransfer>
+|        </filter>
+|        <filter id="linear" x="0" y="0" width="100%" height="100%">
+|          <feComponentTransfer>
+|            <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR>
+|            <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG>
+|            <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB>
+|          </feComponentTransfer>
+|        </filter>
+|      </defs>
+|    </svg>
+|
+|    <!-- Valid: feConvolveMatrix -->
+|    <svg>
+|      <defs>
+|        <filter id="emboss">
+|          <feConvolveMatrix
+|              kernelMatrix="3 0 0
+|                            0 0 0
+|                            0 0 -3"/>
+|        </filter>
+|      </defs>
+|      <image xlink:href="/foo.svg" x="0" y="0"
+|          height="200" width="200" style="filter:url(#emboss);" />
+|    </svg>
+|
+|    <!-- Valid: feDiffuseLighting -->
+|    <svg>
+|      <text text-anchor="middle" x="170" y="22">fePointLight</text>
+|      <filter id="lightMe1">
+|        <feDiffuseLighting in="SourceGraphic" result="light"
+|            lighting-color="white">
+|          <fePointLight x="150" y="60" z="20" />
+|        </feDiffuseLighting>
+|        <feComposite in="SourceGraphic" in2="light"
+|                     operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+|      </filter>
+|      <circle cx="170" cy="80" r="50" fill="green"
+|          filter="url(#lightMe1)" />
+|    </svg>
+|
+|    <!-- Valid: feDisplacementMap -->
+|    <svg>
+|      <filter id="displacementFilter">
+|        <feTurbulence type="turbulence" baseFrequency="0.05"
+|            numOctaves="2" result="turbulence"/>
+|        <feDisplacementMap in2="turbulence" in="SourceGraphic"
+|            scale="50" xChannelSelector="R" yChannelSelector="G"/>
+|      </filter>
+|      <circle cx="100" cy="100" r="100"
+|          style="filter: url(#displacementFilter)"/>
+|    </svg>
+|
+|    <!-- Valid: feDropShadow -->
+|    <svg>
+|      <defs>
+|        <filter id="shadow">
+|          <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
+|        </filter>
+|      </defs>
+|      <circle cx="5" cy="50%" r="4"
+|          style="fill:pink; filter:url(#shadow);"/>
+|    </svg>
+|
+|    <!-- Valid: feMorphology -->
+|    <svg>
+|      <filter id="erode">
+|        <feMorphology operator="erode" radius="1"/>
+|      </filter>
+|      <filter id="dilate">
+|        <feMorphology operator="dilate" radius="2"/>
+|      </filter>
+|      <text y="1em">Normal text</text>
+|      <text id="thin" y="2em">Thinned text</text>
+|      <text id="thick" y="3em">Fattened text</text>
+|    </svg>
+|
+|    <!-- Valid: fePointLight -->
+|    <svg>
+|     <defs>
+|        <filter id="spotlight">
+|          <feSpecularLighting result="spotlight" specularConstant="1.5"
+|              specularExponent="80" lighting-color="#FFF">
+|            <fePointLight x="50" y="50" z="220"/>
+|          </feSpecularLighting>
+|          <feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic"
+|              k1="0" k2="1" k3="1" k4="0"/>
+|        </filter>
+|      </defs>
+|      <image xlink:href="/foo.png" x="10%" y="10%"
+|          width="80%" height="80%" style="filter:url(#spotlight);"/>
+|    </svg>
+|
+|    <!-- Valid: feSpecularLighting -->
+|    <svg>
+|      <filter id = "filter">
+|        <feSpecularLighting result="specOut"
+|            specularExponent="20" lighting-color="#bbbbbb">
+|          <fePointLight x="50" y="75" z="200"/>
+|        </feSpecularLighting>
+|        <feComposite in="SourceGraphic" in2="specOut"
+|            operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
+|      </filter>
+|      <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/>
+|    </svg>
+|
+|    <!-- Valid: feSpotlight -->
+|    <svg>
+|      <defs>
+|        <filter id="spotlight">
+|          <feSpecularLighting result="spotlight" specularConstant="1.5"
+|              specularExponent="4" lighting-color="#FFF">
+|            <feSpotLight x="600" y="600" z="400" limitingConeAngle="5.5" />
+|          </feSpecularLighting>
+|          <feComposite in="SourceGraphic" in2="spotlight" operator="out"
+|              k1="0" k2="1" k3="1" k4="0"/>
+|        </filter>
+|      </defs>
+|      <image xlink:href="/foo.png" x="10%" y="10%"
+|          width="80%" height="80%" style="filter:url(#spotlight);"/>
+|    </svg>
+|
+|    <!-- Valid: feTile -->
+|    <svg>
+|      <defs>
+|        <filter id="tile" x="0" y="0" width="100%" height="100%">
+|          <feTile in="SourceGraphic" x="50" y="50"
+|              width="100" height="100" />
+|          <feTile/>
+|        </filter>
+|      </defs>
+|      <image xlink:href="/foo.png"
+|          x="10%" y="10%" width="80%" height="80%"
+|          style="filter:url(#tile);"/>
+|    </svg>
+|
+|    <!-- Valid: feTurbulence -->
+|    <svg>
+|      <filter id="displacementFilter">
+|        <feTurbulence type="turbulence" baseFrequency="0.05"
+|            numOctaves="2" result="turbulence"/>
+|        <feDisplacementMap in2="turbulence" in="SourceGraphic"
+|            scale="50" xChannelSelector="R" yChannelSelector="G"/>
+|      </filter>
+|      <circle cx="100" cy="100" r="100"
+|          style="filter: url(#displacementFilter)"/>
+|    </svg>
+|
+|    <!-- Invalid: feImage, due to potentially leaking during prefetch -->
+|    <svg>
+|      <defs>
+|        <filter id="image">
+|          <feImage xlink:href="/foo.png"/>
+>>         ^~~~~~~~~
+feature_tests/svg-filter-primitive-elements.html:209:8 The tag 'feimage' is disallowed.
+|        </filter>
+|      </defs>
+|      <rect x="10%" y="10%" width="80%" height="80%"
+|          style="filter:url(#image);"/>
+|    </svg>
+|
+|  </body>
+|  </html>
diff --git a/validator/testdata/feature_tests/svg.html b/validator/testdata/feature_tests/svg.html
index 451402e4a2431..634af5da1770d 100644
--- a/validator/testdata/feature_tests/svg.html
+++ b/validator/testdata/feature_tests/svg.html
@@ -93,11 +93,15 @@ <h2>SVG</h2>
     <g style="display: block; position: relative; -webkit-box-shadow: 4px 6px 6px 4px #ccc"/>
   </svg>
 
-  <!-- Invalid: these declarations are not allowed in style attributes. -->
+  <!-- Valid: these declarations are allowed since they are allowed in the style tag -->
   <svg>
     <g style="display: block; position: sticky;"/>
     <g style="DISPLAY:BLOCK;POSITION:STICKY;"/>
     <g style="foo:bar;"/>
+  </svg>
+
+  <!-- Invalid: these media queries are not allowed in style attributes. -->
+  <svg>
     <g style="@media only screen and (max-width: 600px)"/>
   </svg>
 
diff --git a/validator/testdata/feature_tests/svg.out b/validator/testdata/feature_tests/svg.out
index aeb063ca8040b..922237a401ae7 100644
--- a/validator/testdata/feature_tests/svg.out
+++ b/validator/testdata/feature_tests/svg.out
@@ -95,7 +95,7 @@ feature_tests/svg.html:82:6 The tag 'stop' contains the attribute 'offset' repea
 |    <!-- Invalid: xml:base present -->
 |    <svg xml:base="javascript:alert('hello world')">
 >>   ^~~~~~~~~
-feature_tests/svg.html:87:2 The attribute 'xml:base' may not appear in tag 'svg'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg)
+feature_tests/svg.html:87:2 The attribute 'xml:base' may not appear in tag 'svg'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg)
 |      <a href="#"><circle r="10"></a>
 |    </svg>
 |
@@ -104,20 +104,18 @@ feature_tests/svg.html:87:2 The attribute 'xml:base' may not appear in tag 'svg'
 |      <g style="display: block; position: relative; -webkit-box-shadow: 4px 6px 6px 4px #ccc"/>
 |    </svg>
 |
-|    <!-- Invalid: these declarations are not allowed in style attributes. -->
+|    <!-- Valid: these declarations are allowed since they are allowed in the style tag -->
 |    <svg>
 |      <g style="display: block; position: sticky;"/>
->>     ^~~~~~~~~
-feature_tests/svg.html:98:4 CSS syntax error in tag 'g' - the property 'position' is set to the disallowed value 'sticky'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |      <g style="DISPLAY:BLOCK;POSITION:STICKY;"/>
->>     ^~~~~~~~~
-feature_tests/svg.html:99:4 CSS syntax error in tag 'g' - the property 'POSITION' is set to the disallowed value 'STICKY'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
 |      <g style="foo:bar;"/>
->>     ^~~~~~~~~
-feature_tests/svg.html:100:4 The property 'foo' in attribute 'style' in tag 'g' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
+|    </svg>
+|
+|    <!-- Invalid: these media queries are not allowed in style attributes. -->
+|    <svg>
 |      <g style="@media only screen and (max-width: 600px)"/>
 >>     ^~~~~~~~~
-feature_tests/svg.html:101:4 CSS syntax error in tag 'g' - saw invalid at rule '@media'.
+feature_tests/svg.html:105:4 CSS syntax error in tag 'g' - saw invalid at rule '@media'.
 |    </svg>
 |
 |    <!-- Invalid: style tag isn't allowed. Note this is really testing the
@@ -125,7 +123,7 @@ feature_tests/svg.html:101:4 CSS syntax error in tag 'g' - saw invalid at rule '
 |    <svg>
 |      <style/>
 >>     ^~~~~~~~~
-feature_tests/svg.html:107:4 The parent tag of tag 'style amp-custom' is 'svg', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/svg.html:111:4 The parent tag of tag 'style amp-custom' is 'svg', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |    </svg>
 |  </body>
 |  </html>
diff --git a/validator/testdata/feature_tests/three_second_boilerplate.out b/validator/testdata/feature_tests/three_second_boilerplate.out
index d30cd161e1f10..b0424250f957d 100644
--- a/validator/testdata/feature_tests/three_second_boilerplate.out
+++ b/validator/testdata/feature_tests/three_second_boilerplate.out
@@ -27,7 +27,7 @@ FAIL
 |    <meta name="viewport" content="width=device-width,minimum-scale=1">
 |    <style amp-boilerplate>body{-webkit-animation:-amp-start 3s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 3s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 3s steps(1,end) 0s 1 normal both;animation:-amp-start 3s 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>
 >>   ^~~~~~~~~
-feature_tests/three_second_boilerplate.html:27:2 The mandatory text inside tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/three_second_boilerplate.html:27:2 The mandatory text inside tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |  </head>
 |  <body>
diff --git a/validator/testdata/feature_tests/track_tag.html b/validator/testdata/feature_tests/track_tag.html
index 9b157fcfb8c16..bc74449476002 100644
--- a/validator/testdata/feature_tests/track_tag.html
+++ b/validator/testdata/feature_tests/track_tag.html
@@ -32,6 +32,7 @@
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-latest.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
 </head>
 <body>
 
diff --git a/validator/testdata/feature_tests/track_tag.out b/validator/testdata/feature_tests/track_tag.out
index 6c2cce55ef788..6cb60dacb1073 100644
--- a/validator/testdata/feature_tests/track_tag.out
+++ b/validator/testdata/feature_tests/track_tag.out
@@ -33,6 +33,7 @@ FAIL
 |    <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>
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 |    <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-latest.js"></script>
+|    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
 |  </head>
 |  <body>
 |
@@ -48,29 +49,27 @@ FAIL
 |      <!-- Invalid: http URL -->
 |      <track src="http://example.com/track"></track>
 >>     ^~~~~~~~~
-feature_tests/track_tag.html:48:4 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-audio > track'.
+feature_tests/track_tag.html:49:4 Invalid URL protocol 'http:' for attribute 'src' in tag 'track'.
 |      <!-- Invalid: subtitles but no srclang -->
 |      <track src="https://example.com/track" kind="subtitles"></track>
 >>     ^~~~~~~~~
-feature_tests/track_tag.html:50:4 The mandatory attribute 'srclang' is missing in tag 'amp-audio > track[kind=subtitles]'.
+feature_tests/track_tag.html:51:4 The mandatory attribute 'srclang' is missing in tag 'track'.
 |    </amp-audio>
 |
 |    <!-- Invalid examples to make sure the error messages look right -->
 |    <noscript>
 |      <audio><track src="https://a.com/" kind="subtitles"></track></audio>
 >>            ^~~~~~~~~
-feature_tests/track_tag.html:55:11 The mandatory attribute 'srclang' is missing in tag 'audio > track[kind=subtitles]'.
+feature_tests/track_tag.html:56:11 The mandatory attribute 'srclang' is missing in tag 'track'.
 |      <video><track src="https://a.com/" kind="subtitles"></track></video>
 >>            ^~~~~~~~~
-feature_tests/track_tag.html:56:11 The mandatory attribute 'srclang' is missing in tag 'video > track[kind=subtitles]'.
+feature_tests/track_tag.html:57:11 The mandatory attribute 'srclang' is missing in tag 'track'.
 |    </noscript>
 |    <amp-video src="https://example.com/audio" layout="fixed" height=42 width=42>
 |      <track src="https://a.com/" kind="subtitles"></track>
 >>     ^~~~~~~~~
-feature_tests/track_tag.html:59:4 The mandatory attribute 'srclang' is missing in tag 'amp-video > track[kind=subtitles]'.
+feature_tests/track_tag.html:60:4 The mandatory attribute 'srclang' is missing in tag 'track'.
 |    </amp-video>
 |
 |  </body>
 |  </html>
->>       ^~~~~~~~~
-feature_tests/track_tag.html:63:6 The tag 'amp-video extension .js script' is missing or incorrect, but required by 'amp-video'. This will soon be an error. (see https://amp.dev/documentation/components/amp-video)
diff --git a/validator/testdata/feature_tests/unprintable_chars.out b/validator/testdata/feature_tests/unprintable_chars.out
index 1430cf629c008..c9654ddef35ce 100644
--- a/validator/testdata/feature_tests/unprintable_chars.out
+++ b/validator/testdata/feature_tests/unprintable_chars.out
@@ -3,7 +3,7 @@ FAIL
 >> ^~~~~~~~~
 feature_tests/unprintable_chars.html:1:0 The mandatory attribute '⚡' is missing in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
 >> ^~~~~~~~~
-feature_tests/unprintable_chars.html:1:0 The parent tag of tag 'html' is '$root', but it can only be '!doctype'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/unprintable_chars.html:1:0 The parent tag of tag 'html' is '$root', but it can only be '!doctype'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >> ^~~~~~~~~
 feature_tests/unprintable_chars.html:1:0 Tag or text which is only allowed inside the body section found outside of the body section.
 >> ^~~~~~~~~
@@ -40,29 +40,29 @@ feature_tests/unprintable_chars.html:1:0 The tag 'BODY' appears more than once i
 |  <head>
 |    <meta charset="utf-8">
 >>   ^~~~~~~~~
-feature_tests/unprintable_chars.html:32:2 The parent tag of tag 'meta charset=utf-8' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/unprintable_chars.html:32:2 The parent tag of tag 'meta charset=utf-8' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |    <link rel="canonical" href="./regular-html-version.html">
 >>   ^~~~~~~~~
-feature_tests/unprintable_chars.html:33:2 The parent tag of tag 'link rel=canonical' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/unprintable_chars.html:33:2 The parent tag of tag 'link rel=canonical' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |    <meta name="viewport" content="width=device-width,minimum-scale=1">
 >>   ^~~~~~~~~
-feature_tests/unprintable_chars.html:34:2 The parent tag of tag 'meta name=viewport' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/unprintable_chars.html:34:2 The parent tag of tag 'meta name=viewport' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |    <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>
 >>   ^~~~~~~~~
-feature_tests/unprintable_chars.html:35:2 The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+feature_tests/unprintable_chars.html:35:2 The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 >>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ^~~~~~~~~
-feature_tests/unprintable_chars.html:35:641 The tag 'noscript > style[amp-boilerplate]' may only appear as a descendant of tag 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/unprintable_chars.html:35:641 The tag 'noscript > style[amp-boilerplate]' may only appear as a descendant of tag 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
 >>   ^~~~~~~~~
-feature_tests/unprintable_chars.html:36:2 The parent tag of tag 'amphtml engine v0.js script' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/unprintable_chars.html:36:2 The parent tag of tag 'amphtml engine script' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |  </head>
 |  <body data-foo>
 |  Hello, world.
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-feature_tests/unprintable_chars.html:41:6 The mandatory tag 'html doctype' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/unprintable_chars.html:41:6 The mandatory tag 'html !doctype' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >>       ^~~~~~~~~
-feature_tests/unprintable_chars.html:41:6 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/unprintable_chars.html:41:6 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >>       ^~~~~~~~~
-feature_tests/unprintable_chars.html:41:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+feature_tests/unprintable_chars.html:41:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
diff --git a/validator/testdata/feature_tests/unprintable_chars.out.cpponly b/validator/testdata/feature_tests/unprintable_chars.out.cpponly
new file mode 100644
index 0000000000000..759e836330edb
--- /dev/null
+++ b/validator/testdata/feature_tests/unprintable_chars.out.cpponly
@@ -0,0 +1,64 @@
+FAIL
+|  <!--
+>> ^~~~~~~~~
+feature_tests/unprintable_chars.html:1:0 The parent tag of tag 'html' is '$root', but it can only be '!doctype'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+>> ^~~~~~~~~
+feature_tests/unprintable_chars.html:1:0 Tag or text which is only allowed inside the body section found outside of the body section.
+|    Copyright 2015 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.
+|  -->
+|  <!--
+|    Test Description:
+|    The first few bytes in this document are \xef\xbb\xbf\xef\xbb\xbf, which is
+|    also known as a byte-order-mark (BOM). These are not renderable bytes and
+|    many text viewers will not display them. However, they are also not
+|    whitespace.
+|
+|    An HTML5 compliant parser will open the <body> section immediately upon
+|    encountering non-whitespace text outside of the body section. This causes
+|    tags which appear to be in the document head to actually be placed in the
+|    document body. This creates very confusing errors which are hard to debug for
+|    most developers.
+|  -->
+|  <!doctype html>
+|  <html ⚡>
+|  <head>
+|    <meta charset="utf-8">
+>>   ^~~~~~~~~
+feature_tests/unprintable_chars.html:32:2 The parent tag of tag 'meta charset=utf-8' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+|    <link rel="canonical" href="./regular-html-version.html">
+>>   ^~~~~~~~~
+feature_tests/unprintable_chars.html:33:2 The parent tag of tag 'link rel=canonical' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+|    <meta name="viewport" content="width=device-width,minimum-scale=1">
+>>   ^~~~~~~~~
+feature_tests/unprintable_chars.html:34:2 The parent tag of tag 'meta name=viewport' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+|    <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>
+>>   ^~~~~~~~~
+feature_tests/unprintable_chars.html:35:2 The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
+>>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ^~~~~~~~~
+feature_tests/unprintable_chars.html:35:641 The tag 'noscript > style[amp-boilerplate]' may only appear as a descendant of tag 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+>>   ^~~~~~~~~
+feature_tests/unprintable_chars.html:36:2 The parent tag of tag 'amphtml engine script' is 'body', but it can only be 'head'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+|  </head>
+|  <body data-foo>
+|  Hello, world.
+|  </body>
+|  </html>
+>>       ^~~~~~~~~
+feature_tests/unprintable_chars.html:41:6 The mandatory tag 'html !doctype' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+>>       ^~~~~~~~~
+feature_tests/unprintable_chars.html:41:6 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
+>>       ^~~~~~~~~
+feature_tests/unprintable_chars.html:41:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
diff --git a/validator/testdata/feature_tests/urls.html b/validator/testdata/feature_tests/urls.html
index 96434a066410f..fe818e57678b0 100644
--- a/validator/testdata/feature_tests/urls.html
+++ b/validator/testdata/feature_tests/urls.html
@@ -26,6 +26,8 @@
   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
   <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>
   <script src="https://cdn.ampproject.org/v0.js" async></script>
+  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
 </head>
 <body>
   <a href="https://google.com/">Valid URL</a>
diff --git a/validator/testdata/feature_tests/urls.out b/validator/testdata/feature_tests/urls.out
index e56625471ff34..b2f0fa53065a3 100644
--- a/validator/testdata/feature_tests/urls.out
+++ b/validator/testdata/feature_tests/urls.out
@@ -25,10 +25,12 @@ FAIL
 |    <meta charset="utf-8">
 |    <link rel="canonical" href="javascript://llamas">
 >>   ^~~~~~~~~
-feature_tests/urls.html:25:2 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'link rel=canonical'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+feature_tests/urls.html:25:2 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'link rel=canonical'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
 |    <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>
 |    <script src="https://cdn.ampproject.org/v0.js" async></script>
+|    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
+|    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
 |  </head>
 |  <body>
 |    <a href="https://google.com/">Valid URL</a>
@@ -39,32 +41,32 @@ feature_tests/urls.html:25:2 Invalid URL protocol 'javascript:' for attribute 'h
 |    <a href="https://⚡">Valid URL</a>
 |    <a href="https://">Valid URL</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:37:2 Malformed URL 'https://' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:39:2 Malformed URL 'https://' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="HtTpS://Google.com/">Valid URL</a>
 |    <a href="javascript:alert('boo')">Invalid protocol</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:39:2 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:41:2 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="JavaScript:alert('boo')">Invalid protocol</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:40:2 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:42:2 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="javascript&colon;alert(1)">Invalid protocol</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:41:2 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:43:2 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="vbscript:bar">Invalid protocol</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:42:2 Invalid URL protocol 'vbscript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:44:2 Invalid URL protocol 'vbscript:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="data:baz">Invalid protocol</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:43:2 Invalid URL protocol 'data:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:45:2 Invalid URL protocol 'data:' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="ftp://google.com/">Valid protocol</a>
 |    <!-- invalid (javascript is not an allowed protocol: singluar src element) -->
 |    <amp-img srcset="javascript:alert(1)" layout="fill"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/urls.html:46:2 Invalid URL protocol 'javascript:' for attribute 'srcset' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/urls.html:48:2 Invalid URL protocol 'javascript:' for attribute 'srcset' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- invalid (javascript is not an allwoed protocol: second src element) -->
 |    <amp-img srcset="image-1.png 1x, javascript:alert(1)" layout="fill"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/urls.html:48:2 Multiple image candidates with the same width or pixel density found in attribute 'srcset' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/urls.html:50:2 Multiple image candidates with the same width or pixel density found in attribute 'srcset' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- valid -->
 |    <amp-img srcset="image-1x.png 1x, image-2x.png 2x" layout="fill"></amp-img>
 |    <!-- valid -->
@@ -74,23 +76,23 @@ feature_tests/urls.html:48:2 Multiple image candidates with the same width or pi
 |    <!-- invalid (javascript is not an allowed protocol: multi src element) -->
 |    <amp-img srcset="javascript:alert('boo') 1x, foo 2x" layout="fill"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/urls.html:56:2 Invalid URL protocol 'javascript:' for attribute 'srcset' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/urls.html:58:2 Invalid URL protocol 'javascript:' for attribute 'srcset' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- invalid (javascript is not an allowed protocol: case insensitive) -->
 |    <amp-img srcset="image-1x.png 1x, JavaScript:baz 2x" layout="fill"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/urls.html:58:2 Invalid URL protocol 'javascript:' for attribute 'srcset' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/urls.html:60:2 Invalid URL protocol 'javascript:' for attribute 'srcset' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- invalid (empty) -->
 |    <amp-img srcset="" layout="fill"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/urls.html:60:2 Missing URL for attribute 'srcset' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/urls.html:62:2 Missing URL for attribute 'srcset' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- invalid (duplicate pixel density) -->
 |    <amp-img srcset="image-1x.png 1x, image-2x.png 1x" layout="fill"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/urls.html:62:2 Multiple image candidates with the same width or pixel density found in attribute 'srcset' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/urls.html:64:2 Multiple image candidates with the same width or pixel density found in attribute 'srcset' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- invalid (URL has spaces that are not encoded) -->
 |    <amp-img srcset="image 1x.png 1x, image 2x.png 2x" layout="fill"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/urls.html:64:2 The attribute 'srcset' in tag 'amp-img' is set to the invalid value 'image 1x.png 1x, image 2x.png 2x'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/urls.html:66:2 The attribute 'srcset' in tag 'amp-img' is set to the invalid value 'image 1x.png 1x, image 2x.png 2x'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- valid (URL has encoded spaces) -->
 |    <amp-img srcset=", image%201x.png 1x, image%202x.png 2x" layout="fill"></amp-img>
 |    <a href="http://foobarbazexample.com\x10.com/">Interesting Case</a>
@@ -98,52 +100,52 @@ feature_tests/urls.html:64:2 The attribute 'srcset' in tag 'amp-img' is set to t
 |    <!-- Missing src -->
 |    <amp-ad src="" width="42" height="42" type=""></amp-ad>
 >>   ^~~~~~~~~
-feature_tests/urls.html:70:2 Missing URL for attribute 'src' in tag 'amp-ad'. (see https://amp.dev/documentation/components/amp-ad)
+feature_tests/urls.html:72:2 Missing URL for attribute 'src' in tag 'amp-ad'. (see https://amp.dev/documentation/components/amp-ad/)
 |    <amp-anim src="" width="42" height="42"></amp-anim>
 >>   ^~~~~~~~~
-feature_tests/urls.html:71:2 Missing URL for attribute 'src' in tag 'amp-anim'. (see https://amp.dev/documentation/components/amp-anim)
+feature_tests/urls.html:73:2 Missing URL for attribute 'src' in tag 'amp-anim'. (see https://amp.dev/documentation/components/amp-anim/)
 >>   ^~~~~~~~~
-feature_tests/urls.html:71:2 The tag 'amp-anim' requires including the 'amp-anim' extension JavaScript. (see https://amp.dev/documentation/components/amp-anim)
+feature_tests/urls.html:73:2 The tag 'amp-anim' requires including the 'amp-anim' extension JavaScript. (see https://amp.dev/documentation/components/amp-anim/)
 |    <amp-audio src="" layout="fixed" width="42"></amp-audio>
 >>   ^~~~~~~~~
-feature_tests/urls.html:72:2 Missing URL for attribute 'src' in tag 'amp-audio'. (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/urls.html:74:2 Missing URL for attribute 'src' in tag 'amp-audio'. (see https://amp.dev/documentation/components/amp-audio/)
 >>   ^~~~~~~~~
-feature_tests/urls.html:72:2 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/urls.html:74:2 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
 |    <amp-iframe src="" width="42" height="42"></amp-iframe>
 >>   ^~~~~~~~~
-feature_tests/urls.html:73:2 Missing URL for attribute 'src' in tag 'amp-iframe'. (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/urls.html:75:2 Missing URL for attribute 'src' in tag 'amp-iframe'. (see https://amp.dev/documentation/components/amp-iframe)
 >>   ^~~~~~~~~
-feature_tests/urls.html:73:2 The tag 'amp-iframe' requires including the 'amp-iframe' extension JavaScript. (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/urls.html:75:2 The tag 'amp-iframe' requires including the 'amp-iframe' extension JavaScript. (see https://amp.dev/documentation/components/amp-iframe)
 |    <amp-img src="" layout="responsive" width="42" height="42"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/urls.html:74:2 Missing URL for attribute 'src' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/urls.html:76:2 Missing URL for attribute 'src' in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |    <amp-pixel src="" layout="fixed" width="42"></amp-pixel>
 |    <amp-video src="" width="42" height="42"></amp-video>
 >>   ^~~~~~~~~
-feature_tests/urls.html:76:2 Missing URL for attribute 'src' in tag 'amp-video'. (see https://amp.dev/documentation/components/amp-video)
+feature_tests/urls.html:78:2 Missing URL for attribute 'src' in tag 'amp-video'. (see https://amp.dev/documentation/components/amp-video/)
 |    <!-- src contains only whitespace: regular space followed by non-breaking
 |         space followed by tab. -->
 |    <amp-ad src="  	" width="42" height="42" type=""></amp-ad>
 >>   ^~~~~~~~~
-feature_tests/urls.html:79:2 Missing URL for attribute 'src' in tag 'amp-ad'. (see https://amp.dev/documentation/components/amp-ad)
+feature_tests/urls.html:81:2 Missing URL for attribute 'src' in tag 'amp-ad'. (see https://amp.dev/documentation/components/amp-ad/)
 |    <!-- Invalid protocol -->
 |    <amp-ad src="http://amp-ad" width="42" height="42" type=""></amp-ad>
 >>   ^~~~~~~~~
-feature_tests/urls.html:81:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-ad'. (see https://amp.dev/documentation/components/amp-ad)
+feature_tests/urls.html:83:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-ad'. (see https://amp.dev/documentation/components/amp-ad/)
 |    <amp-iframe src="http://amp-iframe" width="42" height="42"></amp-iframe>
 >>   ^~~~~~~~~
-feature_tests/urls.html:82:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-iframe'. (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/urls.html:84:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-iframe'. (see https://amp.dev/documentation/components/amp-iframe)
 >>   ^~~~~~~~~
-feature_tests/urls.html:82:2 The tag 'amp-iframe' requires including the 'amp-iframe' extension JavaScript. (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/urls.html:84:2 The tag 'amp-iframe' requires including the 'amp-iframe' extension JavaScript. (see https://amp.dev/documentation/components/amp-iframe)
 |    <amp-pixel src="http://amp-pixel" layout="fixed" width="42"></amp-pixel>
 >>   ^~~~~~~~~
-feature_tests/urls.html:83:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-pixel'. (see https://amp.dev/documentation/components/amp-pixel)
+feature_tests/urls.html:85:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-pixel'. (see https://amp.dev/documentation/components/amp-pixel/)
 |    <amp-video src="http://amp-video" width="42" height="42"></amp-video>
 >>   ^~~~~~~~~
-feature_tests/urls.html:84:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-video'. (see https://amp.dev/documentation/components/amp-video)
+feature_tests/urls.html:86:2 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-video'. (see https://amp.dev/documentation/components/amp-video/)
 |    <a href=" j a v a s c r i p t :alert(1)">Invalid protocol</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:85:2 Invalid URL protocol 'j a v a s c r i p t :' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:87:2 Invalid URL protocol 'j a v a s c r i p t :' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |
 |    <!-- Valid ipv6 addresses -->
 |    <a href="https://[2001:0db8::85a3]/">Valid</a>
@@ -156,67 +158,63 @@ feature_tests/urls.html:85:2 Invalid URL protocol 'j a v a s c r i p t :' for at
 |    <!-- Invalid ipv6 addresses -->
 |    <a href="https://[2001:0db8:85a3]/">Invalid</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:96:2 Malformed URL 'https://[2001:0db8:85a3]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:98:2 Malformed URL 'https://[2001:0db8:85a3]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="https://[20012:0db8::85a3]/">Invalid</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:97:2 Malformed URL 'https://[20012:0db8::85a3]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:99:2 Malformed URL 'https://[20012:0db8::85a3]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="https://[200g:0db8:85a3]/">Invalid</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:98:2 Malformed URL 'https://[200g:0db8:85a3]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:100:2 Malformed URL 'https://[200g:0db8:85a3]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="https://[:::1]/">Invalid</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:99:2 Malformed URL 'https://[:::1]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:101:2 Malformed URL 'https://[:::1]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="https://[0:0:0:0:0:0:1]/">Invalid</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:100:2 Malformed URL 'https://[0:0:0:0:0:0:1]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:102:2 Malformed URL 'https://[0:0:0:0:0:0:1]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="https://[0:0:0:0:0:0:0:0:1]/">Invalid</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:101:2 Malformed URL 'https://[0:0:0:0:0:0:0:0:1]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:103:2 Malformed URL 'https://[0:0:0:0:0:0:0:0:1]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="https://[0:0:0:0:0:0:0:8.8.8.8]/">Invalid</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:102:2 Malformed URL 'https://[0:0:0:0:0:0:0:8.8.8.8]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:104:2 Malformed URL 'https://[0:0:0:0:0:0:0:8.8.8.8]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="https://[0:0:0:0:0:8.8.8.8]/">Invalid</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:103:2 Malformed URL 'https://[0:0:0:0:0:8.8.8.8]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:105:2 Malformed URL 'https://[0:0:0:0:0:8.8.8.8]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <a href="https://[0:0:0:0:0:8.8.8.8:1]/">Invalid</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:104:2 Malformed URL 'https://[0:0:0:0:0:8.8.8.8:1]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:106:2 Malformed URL 'https://[0:0:0:0:0:8.8.8.8:1]/' for attribute 'href' in tag 'a'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |
 |    <!-- __amp_source_origin is not an allowed value for URLs. -->
 |    <a href="__amp_source_origin">uhm, no</a>
 >>   ^~~~~~~~~
-feature_tests/urls.html:107:2 The attribute 'href' in tag 'a' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links)
+feature_tests/urls.html:109:2 The attribute 'href' in tag 'a' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links)
 |    <amp-ad src="__amp_source_origin" width="42" height="42" type=""></amp-ad>
 >>   ^~~~~~~~~
-feature_tests/urls.html:108:2 The attribute 'src' in tag 'amp-ad' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-ad)
+feature_tests/urls.html:110:2 The attribute 'src' in tag 'amp-ad' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-ad/)
 |    <amp-anim src="__amp_source_origin" width="42" height="42"></amp-anim>
 >>   ^~~~~~~~~
-feature_tests/urls.html:109:2 The attribute 'src' in tag 'amp-anim' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-anim)
+feature_tests/urls.html:111:2 The attribute 'src' in tag 'amp-anim' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-anim/)
 >>   ^~~~~~~~~
-feature_tests/urls.html:109:2 The tag 'amp-anim' requires including the 'amp-anim' extension JavaScript. (see https://amp.dev/documentation/components/amp-anim)
+feature_tests/urls.html:111:2 The tag 'amp-anim' requires including the 'amp-anim' extension JavaScript. (see https://amp.dev/documentation/components/amp-anim/)
 |    <amp-audio src="__amp_source_origin" layout="fixed" width="42"></amp-audio>
 >>   ^~~~~~~~~
-feature_tests/urls.html:110:2 The attribute 'src' in tag 'amp-audio' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/urls.html:112:2 The attribute 'src' in tag 'amp-audio' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-audio/)
 >>   ^~~~~~~~~
-feature_tests/urls.html:110:2 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio)
+feature_tests/urls.html:112:2 The tag 'amp-audio' requires including the 'amp-audio' extension JavaScript. (see https://amp.dev/documentation/components/amp-audio/)
 |    <amp-iframe src="__amp_source_origin" width="42" height="42"></amp-iframe>
 >>   ^~~~~~~~~
-feature_tests/urls.html:111:2 The attribute 'src' in tag 'amp-iframe' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/urls.html:113:2 The attribute 'src' in tag 'amp-iframe' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-iframe)
 >>   ^~~~~~~~~
-feature_tests/urls.html:111:2 The tag 'amp-iframe' requires including the 'amp-iframe' extension JavaScript. (see https://amp.dev/documentation/components/amp-iframe)
+feature_tests/urls.html:113:2 The tag 'amp-iframe' requires including the 'amp-iframe' extension JavaScript. (see https://amp.dev/documentation/components/amp-iframe)
 |    <amp-img src="__amp_source_origin" layout="responsive" width="42" height="42"></amp-img>
 >>   ^~~~~~~~~
-feature_tests/urls.html:112:2 The attribute 'src' in tag 'amp-img' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-img)
+feature_tests/urls.html:114:2 The attribute 'src' in tag 'amp-img' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-img/)
 |    <amp-pixel src="__amp_source_origin" layout="fixed" width="42"></amp-pixel>
 >>   ^~~~~~~~~
-feature_tests/urls.html:113:2 The attribute 'src' in tag 'amp-pixel' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-pixel)
+feature_tests/urls.html:115:2 The attribute 'src' in tag 'amp-pixel' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-pixel/)
 |    <amp-video src="__amp_source_origin" width="42" height="42"></amp-video>
 >>   ^~~~~~~~~
-feature_tests/urls.html:114:2 The attribute 'src' in tag 'amp-video' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-video)
+feature_tests/urls.html:116:2 The attribute 'src' in tag 'amp-video' is set to the invalid value '__amp_source_origin'. (see https://amp.dev/documentation/components/amp-video/)
 |    <amp-video src="%5f_amp_source%5forigin" width="42" height="42"></amp-video>
 |  </body>
 |  </html>
->>       ^~~~~~~~~
-feature_tests/urls.html:117:6 The tag 'amp-ad extension .js script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error. (see https://amp.dev/documentation/components/amp-ad)
->>       ^~~~~~~~~
-feature_tests/urls.html:117:6 The tag 'amp-video extension .js script' is missing or incorrect, but required by 'amp-video'. This will soon be an error. (see https://amp.dev/documentation/components/amp-video)
diff --git a/validator/testdata/feature_tests/video-json-ld.html b/validator/testdata/feature_tests/video-json-ld.html
index 152f0c2a7bade..75cd9ad44119d 100644
--- a/validator/testdata/feature_tests/video-json-ld.html
+++ b/validator/testdata/feature_tests/video-json-ld.html
@@ -47,26 +47,26 @@
         background-color: gray;
       }
     </style>
+    <!--
+        For the JSON-LD below, the document referenced in mainEntityOfPage
+        should be the same as the canonical link above.
+
+        Also, please be aware that some platforms that use AMP HTML have
+        further restrictions with regards to some schema components.
+
+        For example:
+
+          * The leader "image" referenced in the markup below must appear
+          somewhere on the AMP HTML document itself.
+
+          * The URL for that "image" must precisely match the src of the
+          amp-img tag.
+
+          * All marked-up URLs should be absolute.
+
+          * The "logo" dimensions must not exceed 600x60.
+    -->
     <script type="application/ld+json">
-        //
-        // The document referenced in mainEntityOfPage should be the same as the
-        // canonical link above.
-        //
-        // Also, please be aware that some platforms that use AMP HTML have
-        // further restrictions with regards to some schema components.
-        //
-        // For example:
-        //
-        //   * The leader "image" referenced in the markup below must appear
-        //   somewhere on the AMP HTML document itself.
-        //
-        //   * The URL for that "image" must precisely match the src of the
-        //   amp-img tag.
-        //
-        //   * All marked-up URLs should be absolute.
-        //
-        //   * The "logo" dimensions must not exceed 600x60.
-        //
       {
         "@context": "http://schema.org",
         "@type": "VideoObject",
diff --git a/validator/testdata/feature_tests/video-json-ld.out b/validator/testdata/feature_tests/video-json-ld.out
index 6535dd18c1cbd..b983ac35f70c9 100644
--- a/validator/testdata/feature_tests/video-json-ld.out
+++ b/validator/testdata/feature_tests/video-json-ld.out
@@ -48,26 +48,26 @@ PASS
 |          background-color: gray;
 |        }
 |      </style>
+|      <!--
+|          For the JSON-LD below, the document referenced in mainEntityOfPage
+|          should be the same as the canonical link above.
+|
+|          Also, please be aware that some platforms that use AMP HTML have
+|          further restrictions with regards to some schema components.
+|
+|          For example:
+|
+|            * The leader "image" referenced in the markup below must appear
+|            somewhere on the AMP HTML document itself.
+|
+|            * The URL for that "image" must precisely match the src of the
+|            amp-img tag.
+|
+|            * All marked-up URLs should be absolute.
+|
+|            * The "logo" dimensions must not exceed 600x60.
+|      -->
 |      <script type="application/ld+json">
-|          //
-|          // The document referenced in mainEntityOfPage should be the same as the
-|          // canonical link above.
-|          //
-|          // Also, please be aware that some platforms that use AMP HTML have
-|          // further restrictions with regards to some schema components.
-|          //
-|          // For example:
-|          //
-|          //   * The leader "image" referenced in the markup below must appear
-|          //   somewhere on the AMP HTML document itself.
-|          //
-|          //   * The URL for that "image" must precisely match the src of the
-|          //   amp-img tag.
-|          //
-|          //   * All marked-up URLs should be absolute.
-|          //
-|          //   * The "logo" dimensions must not exceed 600x60.
-|          //
 |        {
 |          "@context": "http://schema.org",
 |          "@type": "VideoObject",
diff --git a/validator/testdata/feature_tests/xlinkhref.out b/validator/testdata/feature_tests/xlinkhref.out
index b7f297fa08f25..d032c23de556f 100644
--- a/validator/testdata/feature_tests/xlinkhref.out
+++ b/validator/testdata/feature_tests/xlinkhref.out
@@ -35,7 +35,7 @@ FAIL
 |  <svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480">
 |    <image x=0 y=0 width=14 height=10 xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDE0IDE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjYuMSAoMjYzMTMpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkFNUCBMb2dvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFNUC1Mb2dvIiBmaWxsPSIjMDM3OUM0Ij4KICAgICAgICAgICAgPHBhdGggZD0iTTguNjU3ODE3LDAuMjE2MDYyIEw3LjY0NzI5Nyw1LjU4OTk2MiBMMTAuMDg1MzI3LDUuNTg5OTYyIEMxMC4xODg3ODcsNS41ODk5NjIgMTAuMjU2NDc3LDUuNjk4MzIyIDEwLjIxMTExNyw1Ljc5MTI4MiBMNi4yMzAyMTcsMTMuOTU4NTMyIEM2LjQ4MDQ2NywxMy45ODU2MjIgNi43MzQ1NjcsMTMuOTk5OTcyIDYuOTkyMDk3LDEzLjk5OTk3MiBDMTAuODUzNzE3LDEzLjk5OTk3MiAxMy45ODQxMTcsMTAuODY5NTcyIDEzLjk4NDExNyw3LjAwNzk1MiBDMTMuOTg0MTE3LDMuNzIwNDAyIDExLjcxNTA2NywwLjk2MzMxMiA4LjY1NzgxNywwLjIxNjA2MiIgaWQ9IkZpbGwtNCI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNNi40MjUzOTgsOC41Mjk5NDggTDMuOTg3MTU4LDguNTI5OTQ4IEMzLjg4MzY5OCw4LjUyOTk0OCAzLjgxNTkzOCw4LjQyMTU4OCAzLjg2MTI5OCw4LjMyODYyOCBMNy44ODU4MDgsMC4wNzI0NzggQzcuNTkxODA4LDAuMDM0OTU4IDcuMjkyMTM4LDAuMDE1NzA4IDYuOTg3ODQ4LDAuMDE1ODQ4IEMzLjE2ODIyOCwwLjAxODA4OCAwLjAyODAyOCwzLjEzNjMwOCAwLjAwMDE2OCw2Ljk1NTg1OCBDLTAuMDI0MTkyLDEwLjMwMzMyOCAyLjMwNDA3OCwxMy4xMTExNjggNS40Mjk3MTgsMTMuODI0NjA4IEw2LjQyNTM5OCw4LjUyOTk0OCBaIiBpZD0iRmlsbC0xIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K"/>
 >>   ^~~~~~~~~
-feature_tests/xlinkhref.html:35:2 The attribute 'xlink:href' in tag 'image' is set to the invalid value 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDE0IDE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjYuMSAoMjYzMTMpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkFNUCBMb2dvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFNUC1Mb2dvIiBmaWxsPSIjMDM3OUM0Ij4KICAgICAgICAgICAgPHBhdGggZD0iTTguNjU3ODE3LDAuMjE2MDYyIEw3LjY0NzI5Nyw1LjU4OTk2MiBMMTAuMDg1MzI3LDUuNTg5OTYyIEMxMC4xODg3ODcsNS41ODk5NjIgMTAuMjU2NDc3LDUuNjk4MzIyIDEwLjIxMTExNyw1Ljc5MTI4MiBMNi4yMzAyMTcsMTMuOTU4NTMyIEM2LjQ4MDQ2NywxMy45ODU2MjIgNi43MzQ1NjcsMTMuOTk5OTcyIDYuOTkyMDk3LDEzLjk5OTk3MiBDMTAuODUzNzE3LDEzLjk5OTk3MiAxMy45ODQxMTcsMTAuODY5NTcyIDEzLjk4NDExNyw3LjAwNzk1MiBDMTMuOTg0MTE3LDMuNzIwNDAyIDExLjcxNTA2NywwLjk2MzMxMiA4LjY1NzgxNywwLjIxNjA2MiIgaWQ9IkZpbGwtNCI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNNi40MjUzOTgsOC41Mjk5NDggTDMuOTg3MTU4LDguNTI5OTQ4IEMzLjg4MzY5OCw4LjUyOTk0OCAzLjgxNTkzOCw4LjQyMTU4OCAzLjg2MTI5OCw4LjMyODYyOCBMNy44ODU4MDgsMC4wNzI0NzggQzcuNTkxODA4LDAuMDM0OTU4IDcuMjkyMTM4LDAuMDE1NzA4IDYuOTg3ODQ4LDAuMDE1ODQ4IEMzLjE2ODIyOCwwLjAxODA4OCAwLjAyODAyOCwzLjEzNjMwOCAwLjAwMDE2OCw2Ljk1NTg1OCBDLTAuMDI0MTkyLDEwLjMwMzMyOCAyLjMwNDA3OCwxMy4xMTExNjggNS40Mjk3MTgsMTMuODI0NjA4IEw2LjQyNTM5OCw4LjUyOTk0OCBaIiBpZD0iRmlsbC0xIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg)
+feature_tests/xlinkhref.html:35:2 The attribute 'xlink:href' in tag 'image' is set to the invalid value 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDE0IDE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjYuMSAoMjYzMTMpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkFNUCBMb2dvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFNUC1Mb2dvIiBmaWxsPSIjMDM3OUM0Ij4KICAgICAgICAgICAgPHBhdGggZD0iTTguNjU3ODE3LDAuMjE2MDYyIEw3LjY0NzI5Nyw1LjU4OTk2MiBMMTAuMDg1MzI3LDUuNTg5OTYyIEMxMC4xODg3ODcsNS41ODk5NjIgMTAuMjU2NDc3LDUuNjk4MzIyIDEwLjIxMTExNyw1Ljc5MTI4MiBMNi4yMzAyMTcsMTMuOTU4NTMyIEM2LjQ4MDQ2NywxMy45ODU2MjIgNi43MzQ1NjcsMTMuOTk5OTcyIDYuOTkyMDk3LDEzLjk5OTk3MiBDMTAuODUzNzE3LDEzLjk5OTk3MiAxMy45ODQxMTcsMTAuODY5NTcyIDEzLjk4NDExNyw3LjAwNzk1MiBDMTMuOTg0MTE3LDMuNzIwNDAyIDExLjcxNTA2NywwLjk2MzMxMiA4LjY1NzgxNywwLjIxNjA2MiIgaWQ9IkZpbGwtNCI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNNi40MjUzOTgsOC41Mjk5NDggTDMuOTg3MTU4LDguNTI5OTQ4IEMzLjg4MzY5OCw4LjUyOTk0OCAzLjgxNTkzOCw4LjQyMTU4OCAzLjg2MTI5OCw4LjMyODYyOCBMNy44ODU4MDgsMC4wNzI0NzggQzcuNTkxODA4LDAuMDM0OTU4IDcuMjkyMTM4LDAuMDE1NzA4IDYuOTg3ODQ4LDAuMDE1ODQ4IEMzLjE2ODIyOCwwLjAxODA4OCAwLjAyODAyOCwzLjEzNjMwOCAwLjAwMDE2OCw2Ljk1NTg1OCBDLTAuMDI0MTkyLDEwLjMwMzMyOCAyLjMwNDA3OCwxMy4xMTExNjggNS40Mjk3MTgsMTMuODI0NjA4IEw2LjQyNTM5OCw4LjUyOTk0OCBaIiBpZD0iRmlsbC0xIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg)
 |  </svg>
 |
 |  <!-- Valid image/png in a data: url inside an svg image tag.
diff --git a/validator/testdata/transformed_feature_tests/amp-img.html b/validator/testdata/transformed_feature_tests/amp-img.html
new file mode 100644
index 0000000000000..25098649dd95a
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/amp-img.html
@@ -0,0 +1,69 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This tests that <img> is allowed as child tag for <amp-img>.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset="utf-8">
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name="viewport" content="width=device-width">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="canonical" href="./regular-html-version.html">
+</head>
+<body>
+  <!-- Valid: amp-img > img -->
+  <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="responsive" width="900" height="600" i-amphtml-ssr>
+    <img src="/img/canoe_900x600.jpg" alt="An image about canoeing" class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async">
+  </amp-img>
+
+  <!-- Valid: amp-img > img, lazy -->
+  <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="responsive" width="900" height="600" i-amphtml-ssr>
+    <img loading="lazy" src="/img/canoe_900x600.jpg" alt="An image about canoeing" class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async">
+  </amp-img>
+
+  <!-- Valid: amp-img[layout=intrinsic] > img -->
+  <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="intrinsic" width="900" height="600" i-amphtml-layout="intrinsic" i-amphtml-ssr>
+    <i-amphtml-sizer class="i-amphtml-sizer">
+      <img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;charset=utf-8,<svg height=&quot;600&quot; width=&quot;900&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;/>">
+    </i-amphtml-sizer>
+    <img src="/img/canoe_900x600.jpg" alt="An image about canoeing" class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async">
+  </amp-img>
+
+  <!-- Invalid: amp-img > img, missing i-amphtml-ssr attr -->
+  <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="responsive" width="900" height="600">
+    <img src="/img/canoe_900x600.jpg" alt="An image about canoeing" class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async">
+  </amp-img>
+
+  <!-- Invalid: amp-img > img, missing decoding attr -->
+  <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="responsive" width="900" height="600" i-amphtml-ssr>
+    <img src="/img/canoe_900x600.jpg" alt="An image about canoeing" class="i-amphtml-fill-content i-amphtml-replaced-content">
+  </amp-img>
+
+  <!-- Invalid: amp-img > img, missing class attr -->
+  <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="responsive" width="900" height="600" i-amphtml-ssr>
+    <img src="/img/canoe_900x600.jpg" alt="An image about canoeing" decoding="async">
+  </amp-img>
+
+  <!-- Valid: amp-img > img, blurry image placeholder -->
+  <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="responsive" width="900" height="600" i-amphtml-ssr>
+    <i-amphtml-sizer style=display:block;padding-top:58.6667%;></i-amphtml-sizer>
+    <img class=i-amphtml-blurry-placeholder placeholder src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' xmlns%3Axlink='http%3A//www.w3.org/1999/xlink' viewBox='0 0 9 7'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='.5'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' xlink%3Ahref='data%3Aimage/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAA4klEQVR4ARXBO04CURSA4f/OnHkpA4TRWGhFMg3oFlyCjTuwYRsULMEtuAgTGzUhttpZkagREwhEhwvjvI7x+8z0aqAHXYj3wA/gfpZz82yZXCakPYf8u0LspmGbGTxXaUfK21fJ7atltGiRHvn4cYOYXIl8RRSkVj5+Sv5JXvD7qWQrg2QW3BqWlDzOtuycGhSe3nOSdkmaeIjdKXfzjMNQGA1asF9wMXQ4G1Z0ogqxipuZYNyVkH4YsVg7FGuh73qcnAvecczqwSBL49AJI6a1QSolLJTexnB6bRC/4WUe8AdyJ1gLZ2JPFwAAAABJRU5ErkJggg=='%3E%3C/image%3E%3C/svg%3E">
+  </amp-img>
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/amp-img.out b/validator/testdata/transformed_feature_tests/amp-img.out
new file mode 100644
index 0000000000000..08663691fec47
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/amp-img.out
@@ -0,0 +1,76 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This tests that <img> is allowed as child tag for <amp-img>.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name="viewport" content="width=device-width">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <link rel="canonical" href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    <!-- Valid: amp-img > img -->
+|    <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="responsive" width="900" height="600" i-amphtml-ssr>
+|      <img src="/img/canoe_900x600.jpg" alt="An image about canoeing" class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async">
+|    </amp-img>
+|
+|    <!-- Valid: amp-img > img, lazy -->
+|    <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="responsive" width="900" height="600" i-amphtml-ssr>
+|      <img loading="lazy" src="/img/canoe_900x600.jpg" alt="An image about canoeing" class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async">
+|    </amp-img>
+|
+|    <!-- Valid: amp-img[layout=intrinsic] > img -->
+|    <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="intrinsic" width="900" height="600" i-amphtml-layout="intrinsic" i-amphtml-ssr>
+|      <i-amphtml-sizer class="i-amphtml-sizer">
+|        <img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;charset=utf-8,<svg height=&quot;600&quot; width=&quot;900&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;/>">
+|      </i-amphtml-sizer>
+|      <img src="/img/canoe_900x600.jpg" alt="An image about canoeing" class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async">
+|    </amp-img>
+|
+|    <!-- Invalid: amp-img > img, missing i-amphtml-ssr attr -->
+|    <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="responsive" width="900" height="600">
+|      <img src="/img/canoe_900x600.jpg" alt="An image about canoeing" class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async">
+>>     ^~~~~~~~~
+transformed_feature_tests/amp-img.html:50:4 The parent tag of tag 'img' is 'amp-img', but it can only be 'i-amphtml-sizer-intrinsic'.
+|    </amp-img>
+|
+|    <!-- Invalid: amp-img > img, missing decoding attr -->
+|    <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="responsive" width="900" height="600" i-amphtml-ssr>
+|      <img src="/img/canoe_900x600.jpg" alt="An image about canoeing" class="i-amphtml-fill-content i-amphtml-replaced-content">
+>>     ^~~~~~~~~
+transformed_feature_tests/amp-img.html:55:4 The mandatory attribute 'decoding' is missing in tag 'img'.
+|    </amp-img>
+|
+|    <!-- Invalid: amp-img > img, missing class attr -->
+|    <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="responsive" width="900" height="600" i-amphtml-ssr>
+|      <img src="/img/canoe_900x600.jpg" alt="An image about canoeing" decoding="async">
+>>     ^~~~~~~~~
+transformed_feature_tests/amp-img.html:60:4 The mandatory attribute 'class' is missing in tag 'img'.
+|    </amp-img>
+|
+|    <!-- Valid: amp-img > img, blurry image placeholder -->
+|    <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="responsive" width="900" height="600" i-amphtml-ssr>
+|      <i-amphtml-sizer style=display:block;padding-top:58.6667%;></i-amphtml-sizer>
+|      <img class=i-amphtml-blurry-placeholder placeholder src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' xmlns%3Axlink='http%3A//www.w3.org/1999/xlink' viewBox='0 0 9 7'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='.5'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' xlink%3Ahref='data%3Aimage/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAA4klEQVR4ARXBO04CURSA4f/OnHkpA4TRWGhFMg3oFlyCjTuwYRsULMEtuAgTGzUhttpZkagREwhEhwvjvI7x+8z0aqAHXYj3wA/gfpZz82yZXCakPYf8u0LspmGbGTxXaUfK21fJ7atltGiRHvn4cYOYXIl8RRSkVj5+Sv5JXvD7qWQrg2QW3BqWlDzOtuycGhSe3nOSdkmaeIjdKXfzjMNQGA1asF9wMXQ4G1Z0ogqxipuZYNyVkH4YsVg7FGuh73qcnAvecczqwSBL49AJI6a1QSolLJTexnB6bRC/4WUe8AdyJ1gLZ2JPFwAAAABJRU5ErkJggg=='%3E%3C/image%3E%3C/svg%3E">
+|    </amp-img>
+|  </body>
+|  </html>
diff --git a/validator/testdata/transformed_feature_tests/amp_boilerplate_missing.html b/validator/testdata/transformed_feature_tests/amp_boilerplate_missing.html
index dce7c6d449798..1c975d4fe8b85 100644
--- a/validator/testdata/transformed_feature_tests/amp_boilerplate_missing.html
+++ b/validator/testdata/transformed_feature_tests/amp_boilerplate_missing.html
@@ -19,7 +19,7 @@
    - boilerplate is not required.
 -->
 <!doctype html>
-<html ⚡ transformed>
+<html ⚡ transformed="self;v=1">
 <head>
   <meta charset="utf-8">
   <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
diff --git a/validator/testdata/transformed_feature_tests/amp_boilerplate_missing.out b/validator/testdata/transformed_feature_tests/amp_boilerplate_missing.out
index c7b158dd44594..e12021b4e78a9 100644
--- a/validator/testdata/transformed_feature_tests/amp_boilerplate_missing.out
+++ b/validator/testdata/transformed_feature_tests/amp_boilerplate_missing.out
@@ -20,7 +20,7 @@ PASS
 |     - boilerplate is not required.
 |  -->
 |  <!doctype html>
-|  <html ⚡ transformed>
+|  <html ⚡ transformed="self;v=1">
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
diff --git a/validator/testdata/transformed_feature_tests/blurry_image_placeholder.html b/validator/testdata/transformed_feature_tests/blurry_image_placeholder.html
new file mode 100644
index 0000000000000..22657a6f95d12
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/blurry_image_placeholder.html
@@ -0,0 +1,71 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  Test for blurry image transformer:
+   - <img> tag allowed as direct child of <amp-img>
+     - iff it has the following attributes:
+       - class with value of "i-amphtml-blurry-placeholder"
+       - placeholder
+       - src/srcset as a url with only data/http/https protocols
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset="utf-8">
+  <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],amp-share-tracking,form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
+/*# sourceURL=/css/amp.css*/</style>
+  <meta name="viewport" content="width=device-width">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="canonical" href="./regular-html-version.html">
+</head>
+<body>
+  <!-- Valid: as direct child of <amp-img> -->
+  <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+    <img class=i-amphtml-blurry-placeholder placeholder src="data:...">
+  </amp-img>
+
+  <!-- Invalid: missing class attribute as direct child of <amp-img> -->
+  <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+    <img placeholder src="data:...">
+  </amp-img>
+
+  <!-- Invalid: class attribute with invalid value as direct child of <amp-img> -->
+  <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+    <img class=blurry-placeholder placeholder src="data:...">
+  </amp-img>
+
+  <!-- Invalid: missing placeholder attribute as direct child of <amp-img> -->
+  <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+    <img class=i-amphtml-blurry-placeholder src="data:...">
+  </amp-img>
+
+  <!-- Invalid: placeholder attribute with invalid value as direct child of <amp-img> -->
+  <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+    <img class=i-amphtml-blurry-placeholder placeholder="blurry" src="data:...">
+  </amp-img>
+
+  <!-- Invalid: missing src attribute as direct child of <amp-img> -->
+  <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+    <img class=i-amphtml-blurry-placeholder placeholder>
+  </amp-img>
+
+  <!-- Invalid: src attribute with invalid protocol as direct child of <amp-img> -->
+  <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+    <img class=i-amphtml-blurry-placeholder placeholder src="ftp:...">
+  </amp-img>
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/blurry_image_placeholder.out b/validator/testdata/transformed_feature_tests/blurry_image_placeholder.out
new file mode 100644
index 0000000000000..e53223807a364
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/blurry_image_placeholder.out
@@ -0,0 +1,84 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    Test for blurry image transformer:
+|     - <img> tag allowed as direct child of <amp-img>
+|       - iff it has the following attributes:
+|         - class with value of "i-amphtml-blurry-placeholder"
+|         - placeholder
+|         - src/srcset as a url with only data/http/https protocols
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],amp-share-tracking,form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
+|  /*# sourceURL=/css/amp.css*/</style>
+|    <meta name="viewport" content="width=device-width">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <link rel="canonical" href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    <!-- Valid: as direct child of <amp-img> -->
+|    <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+|      <img class=i-amphtml-blurry-placeholder placeholder src="data:...">
+|    </amp-img>
+|
+|    <!-- Invalid: missing class attribute as direct child of <amp-img> -->
+|    <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+|      <img placeholder src="data:...">
+>>     ^~~~~~~~~
+transformed_feature_tests/blurry_image_placeholder.html:43:4 The mandatory attribute 'class' is missing in tag 'img'.
+|    </amp-img>
+|
+|    <!-- Invalid: class attribute with invalid value as direct child of <amp-img> -->
+|    <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+|      <img class=blurry-placeholder placeholder src="data:...">
+>>     ^~~~~~~~~
+transformed_feature_tests/blurry_image_placeholder.html:48:4 The attribute 'class' in tag 'img' is set to the invalid value 'blurry-placeholder'.
+|    </amp-img>
+|
+|    <!-- Invalid: missing placeholder attribute as direct child of <amp-img> -->
+|    <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+|      <img class=i-amphtml-blurry-placeholder src="data:...">
+>>     ^~~~~~~~~
+transformed_feature_tests/blurry_image_placeholder.html:53:4 The attribute 'class' in tag 'img' is set to the invalid value 'i-amphtml-blurry-placeholder'.
+|    </amp-img>
+|
+|    <!-- Invalid: placeholder attribute with invalid value as direct child of <amp-img> -->
+|    <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+|      <img class=i-amphtml-blurry-placeholder placeholder="blurry" src="data:...">
+>>     ^~~~~~~~~
+transformed_feature_tests/blurry_image_placeholder.html:58:4 The attribute 'placeholder' in tag 'img' is set to the invalid value 'blurry'.
+|    </amp-img>
+|
+|    <!-- Invalid: missing src attribute as direct child of <amp-img> -->
+|    <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+|      <img class=i-amphtml-blurry-placeholder placeholder>
+>>     ^~~~~~~~~
+transformed_feature_tests/blurry_image_placeholder.html:63:4 The mandatory attribute 'src' is missing in tag 'img'.
+|    </amp-img>
+|
+|    <!-- Invalid: src attribute with invalid protocol as direct child of <amp-img> -->
+|    <amp-img class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" height=30 i-amphtml-layout=fixed src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg width=40 i-amphtml-ssr>
+|      <img class=i-amphtml-blurry-placeholder placeholder src="ftp:...">
+>>     ^~~~~~~~~
+transformed_feature_tests/blurry_image_placeholder.html:68:4 Invalid URL protocol 'ftp:' for attribute 'src' in tag 'img'.
+|    </amp-img>
+|  </body>
+|  </html>
diff --git a/validator/testdata/transformed_feature_tests/first_script_lts.html b/validator/testdata/transformed_feature_tests/first_script_lts.html
new file mode 100644
index 0000000000000..e09d74592a6f8
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/first_script_lts.html
@@ -0,0 +1,54 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This test demonstrates that if the first script is a LTS version, all
+  following scripts must also be a LTS version.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset="utf-8">
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name="viewport" content="width=device-width">
+
+  <!-- Valid: first script is LTS version -->
+  <script async src=https://cdn.ampproject.org/lts/v0.js></script>
+
+  <!-- Valid: LTS version -->
+  <script async custom-element=amp-ad src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js></script>
+
+  <!-- Invalid: standard version -->
+  <script async custom-element=amp-analytics src=https://cdn.ampproject.org/v0/amp-analytics-0.1.js></script>
+
+  <!-- Invalid: module version -->
+  <script async crossorigin=anonymous custom-element=amp-anim src=https://cdn.ampproject.org/v0/amp-anim-0.1.mjs type=module></script>
+
+  <!-- Invalid: nomodule version -->
+  <script async custom-element=amp-anim nomodule src=https://cdn.ampproject.org/v0/amp-anim-0.1.js></script>
+
+  <!-- Invalid: module LTS version -->
+  <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.mjs type=module></script>
+
+  <!-- Invalid: nomodule LTS version -->
+  <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.js></script>
+
+  <link rel="canonical" href="./regular-html-version.html">
+</head>
+<body>
+  Hello, world.
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/first_script_lts.out b/validator/testdata/transformed_feature_tests/first_script_lts.out
new file mode 100644
index 0000000000000..d6b28db4c1a79
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/first_script_lts.out
@@ -0,0 +1,65 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This test demonstrates that if the first script is a LTS version, all
+|    following scripts must also be a LTS version.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name="viewport" content="width=device-width">
+|
+|    <!-- Valid: first script is LTS version -->
+|    <script async src=https://cdn.ampproject.org/lts/v0.js></script>
+|
+|    <!-- Valid: LTS version -->
+|    <script async custom-element=amp-ad src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js></script>
+|
+|    <!-- Invalid: standard version -->
+|    <script async custom-element=amp-analytics src=https://cdn.ampproject.org/v0/amp-analytics-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_lts.html:35:2 The script version for 'amp-analytics' is a standard version which mismatches with the first script on the page using the LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: module version -->
+|    <script async crossorigin=anonymous custom-element=amp-anim src=https://cdn.ampproject.org/v0/amp-anim-0.1.mjs type=module></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_lts.html:38:2 The script version for 'amp-anim' is a module/nomodule version which mismatches with the first script on the page using the LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: nomodule version -->
+|    <script async custom-element=amp-anim nomodule src=https://cdn.ampproject.org/v0/amp-anim-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_lts.html:41:2 The script version for 'amp-anim' is a module/nomodule version which mismatches with the first script on the page using the LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: module LTS version -->
+|    <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.mjs type=module></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_lts.html:44:2 The script version for 'amp-audio' is a module/nomodule LTS version which mismatches with the first script on the page using the LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: nomodule LTS version -->
+|    <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_lts.html:47:2 The script version for 'amp-audio' is a module/nomodule LTS version which mismatches with the first script on the page using the LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <link rel="canonical" href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    Hello, world.
+|  </body>
+|  </html>
diff --git a/validator/testdata/transformed_feature_tests/first_script_module.html b/validator/testdata/transformed_feature_tests/first_script_module.html
new file mode 100644
index 0000000000000..c40bcbb943eba
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/first_script_module.html
@@ -0,0 +1,57 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This test demonstrates that if the first script is a module version, all
+  following scripts must also be a module/nomodule version pair.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset="utf-8">
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name="viewport" content="width=device-width">
+
+  <!-- Valid: first script is a module version -->
+  <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+
+  <!-- Valid: nomodule version pair -->
+  <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+
+  <!-- Valid: module version pair -->
+  <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/v0/amp-ad-0.1.mjs type=module></script>
+
+  <!-- Valid: nomodule version pair -->
+  <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/v0/amp-ad-0.1.js></script>
+
+  <!-- Invalid: standard version -->
+  <script async custom-element=amp-analytics src=https://cdn.ampproject.org/v0/amp-analytics-0.1.js></script>
+
+  <!-- Invalid: LTS version -->
+  <script async custom-element=amp-anim src=https://cdn.ampproject.org/lts/v0/amp-anim-0.1.js></script>
+
+  <!-- Invalid: module LTS version -->
+  <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.mjs type=module></script>
+
+  <!-- Invalid: nomodule LTS version -->
+  <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.js></script>
+
+  <link rel="canonical" href="./regular-html-version.html">
+</head>
+<body>
+  Hello, world.
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/first_script_module.out b/validator/testdata/transformed_feature_tests/first_script_module.out
new file mode 100644
index 0000000000000..440b4335f73e0
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/first_script_module.out
@@ -0,0 +1,66 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This test demonstrates that if the first script is a module version, all
+|    following scripts must also be a module/nomodule version pair.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name="viewport" content="width=device-width">
+|
+|    <!-- Valid: first script is a module version -->
+|    <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+|
+|    <!-- Valid: nomodule version pair -->
+|    <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+|
+|    <!-- Valid: module version pair -->
+|    <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/v0/amp-ad-0.1.mjs type=module></script>
+|
+|    <!-- Valid: nomodule version pair -->
+|    <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/v0/amp-ad-0.1.js></script>
+|
+|    <!-- Invalid: standard version -->
+|    <script async custom-element=amp-analytics src=https://cdn.ampproject.org/v0/amp-analytics-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_module.html:41:2 The script version for 'amp-analytics' is a standard version which mismatches with the first script on the page using the module/nomodule version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: LTS version -->
+|    <script async custom-element=amp-anim src=https://cdn.ampproject.org/lts/v0/amp-anim-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_module.html:44:2 The script version for 'amp-anim' is a LTS version which mismatches with the first script on the page using the module/nomodule version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: module LTS version -->
+|    <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.mjs type=module></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_module.html:47:2 The script version for 'amp-audio' is a module/nomodule LTS version which mismatches with the first script on the page using the module/nomodule version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: nomodule LTS version -->
+|    <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_module.html:50:2 The script version for 'amp-audio' is a module/nomodule LTS version which mismatches with the first script on the page using the module/nomodule version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <link rel="canonical" href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    Hello, world.
+|  </body>
+|  </html>
diff --git a/validator/testdata/transformed_feature_tests/first_script_module_lts.html b/validator/testdata/transformed_feature_tests/first_script_module_lts.html
new file mode 100644
index 0000000000000..69e890ef57065
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/first_script_module_lts.html
@@ -0,0 +1,57 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This test demonstrates that if the first script is a module LTS version, all
+  following scripts must also be a module/nomodule LTS version pair.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset="utf-8">
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name="viewport" content="width=device-width">
+
+  <!-- Valid: first script is a module LTS version -->
+  <script async crossorigin=anonymous src=https://cdn.ampproject.org/lts/v0.mjs type=module></script>
+
+  <!-- Valid: nomodule LTS version pair -->
+  <script async nomodule src=https://cdn.ampproject.org/lts/v0.js></script>
+
+  <!-- Valid: module LTS version pair -->
+  <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.mjs type=module></script>
+
+  <!-- Valid: nomodule LTS version pair -->
+  <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js></script>
+
+  <!-- Invalid: standard version -->
+  <script async custom-element=amp-analytics src=https://cdn.ampproject.org/v0/amp-analytics-0.1.js></script>
+
+  <!-- Invalid: LTS version -->
+  <script async custom-element=amp-anim src=https://cdn.ampproject.org/lts/v0/amp-anim-0.1.js></script>
+
+  <!-- Invalid: module version -->
+  <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/v0/amp-audio-0.1.mjs type=module></script>
+
+  <!-- Invalid: nomodule version -->
+  <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/v0/amp-audio-0.1.js></script>
+
+  <link rel="canonical" href="./regular-html-version.html">
+</head>
+<body>
+  Hello, world.
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/first_script_module_lts.out b/validator/testdata/transformed_feature_tests/first_script_module_lts.out
new file mode 100644
index 0000000000000..e4b2642e1b86b
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/first_script_module_lts.out
@@ -0,0 +1,66 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This test demonstrates that if the first script is a module LTS version, all
+|    following scripts must also be a module/nomodule LTS version pair.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name="viewport" content="width=device-width">
+|
+|    <!-- Valid: first script is a module LTS version -->
+|    <script async crossorigin=anonymous src=https://cdn.ampproject.org/lts/v0.mjs type=module></script>
+|
+|    <!-- Valid: nomodule LTS version pair -->
+|    <script async nomodule src=https://cdn.ampproject.org/lts/v0.js></script>
+|
+|    <!-- Valid: module LTS version pair -->
+|    <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.mjs type=module></script>
+|
+|    <!-- Valid: nomodule LTS version pair -->
+|    <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js></script>
+|
+|    <!-- Invalid: standard version -->
+|    <script async custom-element=amp-analytics src=https://cdn.ampproject.org/v0/amp-analytics-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_module_lts.html:41:2 The script version for 'amp-analytics' is a standard version which mismatches with the first script on the page using the module/nomodule LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: LTS version -->
+|    <script async custom-element=amp-anim src=https://cdn.ampproject.org/lts/v0/amp-anim-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_module_lts.html:44:2 The script version for 'amp-anim' is a LTS version which mismatches with the first script on the page using the module/nomodule LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: module version -->
+|    <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/v0/amp-audio-0.1.mjs type=module></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_module_lts.html:47:2 The script version for 'amp-audio' is a module/nomodule version which mismatches with the first script on the page using the module/nomodule LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: nomodule version -->
+|    <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/v0/amp-audio-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_module_lts.html:50:2 The script version for 'amp-audio' is a module/nomodule version which mismatches with the first script on the page using the module/nomodule LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <link rel="canonical" href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    Hello, world.
+|  </body>
+|  </html>
diff --git a/validator/testdata/transformed_feature_tests/first_script_nomodule.html b/validator/testdata/transformed_feature_tests/first_script_nomodule.html
new file mode 100644
index 0000000000000..e7e9bc5f814d0
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/first_script_nomodule.html
@@ -0,0 +1,57 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This test demonstrates that if the first script is a nomodule version, all
+  following scripts must also be a module/nomodule version pair.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset="utf-8">
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name="viewport" content="width=device-width">
+
+  <!-- Valid: first script is nomodule version -->
+  <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+
+  <!-- Valid: module version pair -->
+  <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+
+  <!-- Valid: nomodule version pair -->
+  <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/v0/amp-ad-0.1.js></script>
+
+  <!-- Valid: module version pair -->
+  <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/v0/amp-ad-0.1.mjs type=module></script>
+
+  <!-- Invalid: standard version -->
+  <script async custom-element=amp-analytics src=https://cdn.ampproject.org/v0/amp-analytics-0.1.js></script>
+
+  <!-- Invalid: LTS version -->
+  <script async custom-element=amp-anim src=https://cdn.ampproject.org/lts/v0/amp-anim-0.1.js></script>
+
+  <!-- Invalid: module LTS version -->
+  <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.mjs type=module></script>
+
+  <!-- Invalid: nomodule LTS version -->
+  <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.js></script>
+
+  <link rel="canonical" href="./regular-html-version.html">
+</head>
+<body>
+  Hello, world.
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/first_script_nomodule.out b/validator/testdata/transformed_feature_tests/first_script_nomodule.out
new file mode 100644
index 0000000000000..38ba62b9058be
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/first_script_nomodule.out
@@ -0,0 +1,66 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This test demonstrates that if the first script is a nomodule version, all
+|    following scripts must also be a module/nomodule version pair.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name="viewport" content="width=device-width">
+|
+|    <!-- Valid: first script is nomodule version -->
+|    <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+|
+|    <!-- Valid: module version pair -->
+|    <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+|
+|    <!-- Valid: nomodule version pair -->
+|    <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/v0/amp-ad-0.1.js></script>
+|
+|    <!-- Valid: module version pair -->
+|    <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/v0/amp-ad-0.1.mjs type=module></script>
+|
+|    <!-- Invalid: standard version -->
+|    <script async custom-element=amp-analytics src=https://cdn.ampproject.org/v0/amp-analytics-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_nomodule.html:41:2 The script version for 'amp-analytics' is a standard version which mismatches with the first script on the page using the module/nomodule version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: LTS version -->
+|    <script async custom-element=amp-anim src=https://cdn.ampproject.org/lts/v0/amp-anim-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_nomodule.html:44:2 The script version for 'amp-anim' is a LTS version which mismatches with the first script on the page using the module/nomodule version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: module LTS version -->
+|    <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.mjs type=module></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_nomodule.html:47:2 The script version for 'amp-audio' is a module/nomodule LTS version which mismatches with the first script on the page using the module/nomodule version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: nomodule LTS version -->
+|    <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_nomodule.html:50:2 The script version for 'amp-audio' is a module/nomodule LTS version which mismatches with the first script on the page using the module/nomodule version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <link rel="canonical" href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    Hello, world.
+|  </body>
+|  </html>
diff --git a/validator/testdata/transformed_feature_tests/first_script_nomodule_lts.html b/validator/testdata/transformed_feature_tests/first_script_nomodule_lts.html
new file mode 100644
index 0000000000000..947c8c147f7bd
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/first_script_nomodule_lts.html
@@ -0,0 +1,57 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This test demonstrates that if the first script is a nomodule LTS version, all
+  following scripts must also be a module/nomodule LTS version pair.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset="utf-8">
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name="viewport" content="width=device-width">
+
+  <!-- Valid: first script a nomodule LTS version -->
+  <script async nomodule src=https://cdn.ampproject.org/lts/v0.js></script>
+
+  <!-- Valid module LTS version pair -->
+  <script async crossorigin=anonymous src=https://cdn.ampproject.org/lts/v0.mjs type=module></script>
+
+  <!-- Valid: nomodule LTS version pair -->
+  <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js></script>
+
+  <!-- Valid: module LTS version pair -->
+  <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.mjs type=module></script>
+
+  <!-- Invalid: standard version -->
+  <script async custom-element=amp-analytics src=https://cdn.ampproject.org/v0/amp-analytics-0.1.js></script>
+
+  <!-- Invalid: LTS version -->
+  <script async custom-element=amp-anim src=https://cdn.ampproject.org/lts/v0/amp-anim-0.1.js></script>
+
+  <!-- Invalid: module version -->
+  <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/v0/amp-audio-0.1.mjs type=module></script>
+
+  <!-- Invalid: nomodule version -->
+  <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/v0/amp-audio-0.1.js></script>
+
+  <link rel="canonical" href="./regular-html-version.html">
+</head>
+<body>
+  Hello, world.
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/first_script_nomodule_lts.out b/validator/testdata/transformed_feature_tests/first_script_nomodule_lts.out
new file mode 100644
index 0000000000000..61dcfcc93cf73
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/first_script_nomodule_lts.out
@@ -0,0 +1,66 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This test demonstrates that if the first script is a nomodule LTS version, all
+|    following scripts must also be a module/nomodule LTS version pair.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name="viewport" content="width=device-width">
+|
+|    <!-- Valid: first script a nomodule LTS version -->
+|    <script async nomodule src=https://cdn.ampproject.org/lts/v0.js></script>
+|
+|    <!-- Valid module LTS version pair -->
+|    <script async crossorigin=anonymous src=https://cdn.ampproject.org/lts/v0.mjs type=module></script>
+|
+|    <!-- Valid: nomodule LTS version pair -->
+|    <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js></script>
+|
+|    <!-- Valid: module LTS version pair -->
+|    <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.mjs type=module></script>
+|
+|    <!-- Invalid: standard version -->
+|    <script async custom-element=amp-analytics src=https://cdn.ampproject.org/v0/amp-analytics-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_nomodule_lts.html:41:2 The script version for 'amp-analytics' is a standard version which mismatches with the first script on the page using the module/nomodule LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: LTS version -->
+|    <script async custom-element=amp-anim src=https://cdn.ampproject.org/lts/v0/amp-anim-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_nomodule_lts.html:44:2 The script version for 'amp-anim' is a LTS version which mismatches with the first script on the page using the module/nomodule LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: module version -->
+|    <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/v0/amp-audio-0.1.mjs type=module></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_nomodule_lts.html:47:2 The script version for 'amp-audio' is a module/nomodule version which mismatches with the first script on the page using the module/nomodule LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: nomodule version -->
+|    <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/v0/amp-audio-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_nomodule_lts.html:50:2 The script version for 'amp-audio' is a module/nomodule version which mismatches with the first script on the page using the module/nomodule LTS version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <link rel="canonical" href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    Hello, world.
+|  </body>
+|  </html>
diff --git a/validator/testdata/transformed_feature_tests/first_script_standard.html b/validator/testdata/transformed_feature_tests/first_script_standard.html
new file mode 100644
index 0000000000000..f622fa497de6c
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/first_script_standard.html
@@ -0,0 +1,54 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This test demonstrates that if the first script is a standard version, all
+  following scripts must also be a standard version.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset="utf-8">
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name="viewport" content="width=device-width">
+
+  <!-- Valid: first script is a standard version -->
+  <script async src=https://cdn.ampproject.org/v0.js></script>
+
+  <!-- Valid: standard version -->
+  <script async custom-element=amp-ad src=https://cdn.ampproject.org/v0/amp-ad-0.1.js></script>
+
+  <!-- Invalid: LTS version -->
+  <script async custom-element=amp-analytics src=https://cdn.ampproject.org/lts/v0/amp-analytics-0.1.js></script>
+
+  <!-- Invalid: module version -->
+  <script async crossorigin=anonymous custom-element=amp-anim src=https://cdn.ampproject.org/v0/amp-anim-0.1.mjs type=module></script>
+
+  <!-- Invalid: nomodule version -->
+  <script async custom-element=amp-anim nomodule src=https://cdn.ampproject.org/v0/amp-anim-0.1.js></script>
+
+  <!-- Invalid: module LTS version -->
+  <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.mjs type=module></script>
+
+  <!-- Invalid: nomodule LTS version -->
+  <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.js></script>
+
+  <link rel="canonical" href="./regular-html-version.html">
+</head>
+<body>
+  Hello, world.
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/first_script_standard.out b/validator/testdata/transformed_feature_tests/first_script_standard.out
new file mode 100644
index 0000000000000..0efa6922674fd
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/first_script_standard.out
@@ -0,0 +1,65 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This test demonstrates that if the first script is a standard version, all
+|    following scripts must also be a standard version.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name="viewport" content="width=device-width">
+|
+|    <!-- Valid: first script is a standard version -->
+|    <script async src=https://cdn.ampproject.org/v0.js></script>
+|
+|    <!-- Valid: standard version -->
+|    <script async custom-element=amp-ad src=https://cdn.ampproject.org/v0/amp-ad-0.1.js></script>
+|
+|    <!-- Invalid: LTS version -->
+|    <script async custom-element=amp-analytics src=https://cdn.ampproject.org/lts/v0/amp-analytics-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_standard.html:35:2 The script version for 'amp-analytics' is a LTS version which mismatches with the first script on the page using the standard version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: module version -->
+|    <script async crossorigin=anonymous custom-element=amp-anim src=https://cdn.ampproject.org/v0/amp-anim-0.1.mjs type=module></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_standard.html:38:2 The script version for 'amp-anim' is a module/nomodule version which mismatches with the first script on the page using the standard version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: nomodule version -->
+|    <script async custom-element=amp-anim nomodule src=https://cdn.ampproject.org/v0/amp-anim-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_standard.html:41:2 The script version for 'amp-anim' is a module/nomodule version which mismatches with the first script on the page using the standard version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: module LTS version -->
+|    <script async crossorigin=anonymous custom-element=amp-audio src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.mjs type=module></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_standard.html:44:2 The script version for 'amp-audio' is a module/nomodule LTS version which mismatches with the first script on the page using the standard version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <!-- Invalid: nomodule LTS version -->
+|    <script async custom-element=amp-audio nomodule src=https://cdn.ampproject.org/lts/v0/amp-audio-0.1.js></script>
+>>   ^~~~~~~~~
+transformed_feature_tests/first_script_standard.html:47:2 The script version for 'amp-audio' is a module/nomodule LTS version which mismatches with the first script on the page using the standard version. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|
+|    <link rel="canonical" href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    Hello, world.
+|  </body>
+|  </html>
diff --git a/validator/testdata/transformed_feature_tests/i_amphtml_sizer_child.html b/validator/testdata/transformed_feature_tests/i_amphtml_sizer_child.html
index 5087c520d3938..b2173a0f9364c 100644
--- a/validator/testdata/transformed_feature_tests/i_amphtml_sizer_child.html
+++ b/validator/testdata/transformed_feature_tests/i_amphtml_sizer_child.html
@@ -43,10 +43,18 @@
      <amp-img placeholder="" src="/img/amp-video-iframe-sample-placeholder.jpg" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img>
    </amp-video-iframe>
 
-   <!-- Invalid: amp-video-iframe > div posing as i-amphtml-sizer -->
-   <amp-video-iframe id="myVideo" src="/amp-video-iframe-videojs.html" width="720" height="405" layout="responsive" autoplay="" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-     <div style="color:blue;"></div>
-     <amp-img placeholder="" src="/img/amp-video-iframe-sample-placeholder.jpg" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img>
-   </amp-video-iframe>
+  <!-- Valid: amp-image-slider > i-amphtml-sizer with aspect-ratio -->
+   <amp-image-slider width="300" height="200" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive" style="aspect-ratio:300/200;">
+     <i-amphtml-sizer i-amphtml-disable-ar style="display:block;padding-top:66.6667%;"></i-amphtml-sizer>
+     <amp-img src="/img/canoe_900x600_blur.jpg" alt="A blurry image about canoeing" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img>
+     <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img>
+   </amp-image-slider>
+
+  <!-- Valid: amp-image-slider > i-amphtml-sizer intrinsic with aspect-ratio -->
+   <amp-image-slider width="300" height="200" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic" style="aspect-ratio:300/200;">
+     <i-amphtml-sizer i-amphtml-disable-ar style="display:block;padding-top:66.6667%;"></i-amphtml-sizer>
+     <amp-img src="/img/canoe_900x600_blur.jpg" alt="A blurry image about canoeing" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img>
+     <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img>
+   </amp-image-slider>
 </body>
 </html>
diff --git a/validator/testdata/transformed_feature_tests/i_amphtml_sizer_child.out b/validator/testdata/transformed_feature_tests/i_amphtml_sizer_child.out
index 49182fce81911..0b18b1abafe10 100644
--- a/validator/testdata/transformed_feature_tests/i_amphtml_sizer_child.out
+++ b/validator/testdata/transformed_feature_tests/i_amphtml_sizer_child.out
@@ -1,4 +1,4 @@
-FAIL
+PASS
 |  <!--
 |    Copyright 2019 The AMP HTML Authors. All Rights Reserved.
 |
@@ -44,12 +44,18 @@ FAIL
 |       <amp-img placeholder="" src="/img/amp-video-iframe-sample-placeholder.jpg" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img>
 |     </amp-video-iframe>
 |
-|     <!-- Invalid: amp-video-iframe > div posing as i-amphtml-sizer -->
-|     <amp-video-iframe id="myVideo" src="/amp-video-iframe-videojs.html" width="720" height="405" layout="responsive" autoplay="" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-|       <div style="color:blue;"></div>
->>      ^~~~~~~~~
-transformed_feature_tests/i_amphtml_sizer_child.html:48:5 The tag 'div', a child tag of 'AMP-VIDEO-IFRAME with [placeholder] (transformed)', does not satisfy one of the acceptable reference points: AMP-VIDEO-IFRAME > [placeholder], AMP-VIDEO-IFRAME > I-AMPHTML-SIZER [style]. (see https://amp.dev/documentation/components/amp-video-iframe)
-|       <amp-img placeholder="" src="/img/amp-video-iframe-sample-placeholder.jpg" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img>
-|     </amp-video-iframe>
+|    <!-- Valid: amp-image-slider > i-amphtml-sizer with aspect-ratio -->
+|     <amp-image-slider width="300" height="200" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive" style="aspect-ratio:300/200;">
+|       <i-amphtml-sizer i-amphtml-disable-ar style="display:block;padding-top:66.6667%;"></i-amphtml-sizer>
+|       <amp-img src="/img/canoe_900x600_blur.jpg" alt="A blurry image about canoeing" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img>
+|       <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img>
+|     </amp-image-slider>
+|
+|    <!-- Valid: amp-image-slider > i-amphtml-sizer intrinsic with aspect-ratio -->
+|     <amp-image-slider width="300" height="200" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic" style="aspect-ratio:300/200;">
+|       <i-amphtml-sizer i-amphtml-disable-ar style="display:block;padding-top:66.6667%;"></i-amphtml-sizer>
+|       <amp-img src="/img/canoe_900x600_blur.jpg" alt="A blurry image about canoeing" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img>
+|       <amp-img src="/img/canoe_900x600.jpg" alt="An image about canoeing" layout="fill" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"></amp-img>
+|     </amp-image-slider>
 |  </body>
 |  </html>
diff --git a/validator/testdata/transformed_feature_tests/minimum_valid_amp.html b/validator/testdata/transformed_feature_tests/minimum_valid_amp.html
index 995742cc6cc39..ce5842b405751 100644
--- a/validator/testdata/transformed_feature_tests/minimum_valid_amp.html
+++ b/validator/testdata/transformed_feature_tests/minimum_valid_amp.html
@@ -22,7 +22,7 @@
 <html ⚡ transformed="google;v=1">
 <head>
   <meta charset="utf-8">
-  <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],amp-share-tracking,form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
+  <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
 /*# sourceURL=/css/amp.css*/</style>
   <meta name="viewport" content="width=device-width">
   <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/validator/testdata/transformed_feature_tests/minimum_valid_amp.out b/validator/testdata/transformed_feature_tests/minimum_valid_amp.out
index 303a712b0e1c5..f1bcd9eb25781 100644
--- a/validator/testdata/transformed_feature_tests/minimum_valid_amp.out
+++ b/validator/testdata/transformed_feature_tests/minimum_valid_amp.out
@@ -23,7 +23,7 @@ PASS
 |  <html ⚡ transformed="google;v=1">
 |  <head>
 |    <meta charset="utf-8">
-|    <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],amp-share-tracking,form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
+|    <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
 |  /*# sourceURL=/css/amp.css*/</style>
 |    <meta name="viewport" content="width=device-width">
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/validator/testdata/transformed_feature_tests/module_nomodule.html b/validator/testdata/transformed_feature_tests/module_nomodule.html
new file mode 100644
index 0000000000000..f508f16ab583b
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/module_nomodule.html
@@ -0,0 +1,43 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This test demonstrates that all scripts having a module and nomodule pairing
+  are considered valid.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset=utf-8>
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name=viewport content="width=device-width">
+  <link as=script crossorigin=anonymous href=https://cdn.ampproject.org/rtv/123456789012345/v0.mjs rel=modulepreload>
+
+  <!-- Valid: module/nomodule pair for AMP runtime script -->
+  <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+  <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+
+  <!-- Valid: module/nomodule pair for AMP extension script -->
+  <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/v0/amp-ad-0.1.mjs type=module></script>
+  <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/v0/amp-ad-0.1.js></script>
+
+  <link rel=canonical href="./regular-html-version.html">
+</head>
+<body>
+  Hello, world.
+  <amp-ad layout=nodisplay type></amp-ad>
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/module_nomodule.out b/validator/testdata/transformed_feature_tests/module_nomodule.out
new file mode 100644
index 0000000000000..e4a67dbb62a21
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/module_nomodule.out
@@ -0,0 +1,44 @@
+PASS
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This test demonstrates that all scripts having a module and nomodule pairing
+|    are considered valid.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset=utf-8>
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name=viewport content="width=device-width">
+|    <link as=script crossorigin=anonymous href=https://cdn.ampproject.org/rtv/123456789012345/v0.mjs rel=modulepreload>
+|
+|    <!-- Valid: module/nomodule pair for AMP runtime script -->
+|    <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+|    <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+|
+|    <!-- Valid: module/nomodule pair for AMP extension script -->
+|    <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/v0/amp-ad-0.1.mjs type=module></script>
+|    <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/v0/amp-ad-0.1.js></script>
+|
+|    <link rel=canonical href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    Hello, world.
+|    <amp-ad layout=nodisplay type></amp-ad>
+|  </body>
+|  </html>
diff --git a/validator/testdata/transformed_feature_tests/module_nomodule_lts.html b/validator/testdata/transformed_feature_tests/module_nomodule_lts.html
new file mode 100644
index 0000000000000..85cb08379a37c
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/module_nomodule_lts.html
@@ -0,0 +1,42 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This test demonstrates that all LTS scripts having a module and nomodule
+  pairing are considered valid.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset=utf-8>
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name=viewport content="width=device-width">
+
+  <!-- Valid: module/nomodule pair for AMP runtime LTS script -->
+  <script async crossorigin=anonymous src=https://cdn.ampproject.org/lts/v0.mjs type=module></script>
+  <script async nomodule src=https://cdn.ampproject.org/lts/v0.js></script>
+
+  <!-- Valid: module/nomodule pair for AMP extension script -->
+  <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.mjs type=module></script>
+  <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js></script>
+
+  <link rel=canonical href="./regular-html-version.html">
+</head>
+<body>
+  Hello, world.
+  <amp-ad layout=nodisplay type></amp-ad>
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/module_nomodule_lts.out b/validator/testdata/transformed_feature_tests/module_nomodule_lts.out
new file mode 100644
index 0000000000000..0acd67132f7c3
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/module_nomodule_lts.out
@@ -0,0 +1,43 @@
+PASS
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This test demonstrates that all LTS scripts having a module and nomodule
+|    pairing are considered valid.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset=utf-8>
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name=viewport content="width=device-width">
+|
+|    <!-- Valid: module/nomodule pair for AMP runtime LTS script -->
+|    <script async crossorigin=anonymous src=https://cdn.ampproject.org/lts/v0.mjs type=module></script>
+|    <script async nomodule src=https://cdn.ampproject.org/lts/v0.js></script>
+|
+|    <!-- Valid: module/nomodule pair for AMP extension script -->
+|    <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.mjs type=module></script>
+|    <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js></script>
+|
+|    <link rel=canonical href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    Hello, world.
+|    <amp-ad layout=nodisplay type></amp-ad>
+|  </body>
+|  </html>
diff --git a/validator/testdata/transformed_feature_tests/module_nomodule_lts_no_paired_module.html b/validator/testdata/transformed_feature_tests/module_nomodule_lts_no_paired_module.html
new file mode 100644
index 0000000000000..d26131c5c28f7
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/module_nomodule_lts_no_paired_module.html
@@ -0,0 +1,40 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This test demonstrates that all LTS scripts must have a module and nomodule
+  pairing when the first script is nomodule.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset=utf-8>
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name=viewport content="width=device-width">
+
+  <!-- Invalid: missing module pair for AMP runtime LTS script -->
+  <script async nomodule src=https://cdn.ampproject.org/lts/v0.js></script>
+
+  <!-- Invalid: missing module pair for AMP extension LTS script -->
+  <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js></script>
+
+  <link rel=canonical href="./regular-html-version.html">
+</head>
+<body>
+  Hello, world.
+  <amp-ad layout=nodisplay type></amp-ad>
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/module_nomodule_lts_no_paired_module.out b/validator/testdata/transformed_feature_tests/module_nomodule_lts_no_paired_module.out
new file mode 100644
index 0000000000000..b9e08e25f9f6e
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/module_nomodule_lts_no_paired_module.out
@@ -0,0 +1,45 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This test demonstrates that all LTS scripts must have a module and nomodule
+|    pairing when the first script is nomodule.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset=utf-8>
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name=viewport content="width=device-width">
+|
+|    <!-- Invalid: missing module pair for AMP runtime LTS script -->
+|    <script async nomodule src=https://cdn.ampproject.org/lts/v0.js></script>
+|
+|    <!-- Invalid: missing module pair for AMP extension LTS script -->
+|    <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js></script>
+|
+|    <link rel=canonical href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    Hello, world.
+|    <amp-ad layout=nodisplay type></amp-ad>
+|  </body>
+|  </html>
+>>       ^~~~~~~~~
+transformed_feature_tests/module_nomodule_lts_no_paired_module.html:40:6 The tag 'amphtml module LTS engine script' is missing or incorrect, but required by 'amphtml nomdule LTS engine script'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+>>       ^~~~~~~~~
+transformed_feature_tests/module_nomodule_lts_no_paired_module.html:40:6 The tag 'amp-ad module extension script' is missing or incorrect, but required by 'amp-ad nomodule extension script'. (see https://amp.dev/documentation/components/amp-ad)
diff --git a/validator/testdata/transformed_feature_tests/module_nomodule_lts_no_paired_nomodule.html b/validator/testdata/transformed_feature_tests/module_nomodule_lts_no_paired_nomodule.html
new file mode 100644
index 0000000000000..7ee63eae89071
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/module_nomodule_lts_no_paired_nomodule.html
@@ -0,0 +1,40 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This test demonstrates that all LTS scripts must have a module and nomodule
+  pairing when the first script is module.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset=utf-8>
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name=viewport content="width=device-width">
+
+  <!-- Invalid: missing nomodule pair for AMP runtime LTS script -->
+  <script async crossorigin=anonymous src=https://cdn.ampproject.org/lts/v0.mjs type=module></script>
+
+  <!-- Invalid: missing nomodule pair for AMP extension LTS script -->
+  <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.mjs type=module></script>
+
+  <link rel=canonical href="./regular-html-version.html">
+</head>
+<body>
+  Hello, world.
+  <amp-ad layout=nodisplay type></amp-ad>
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/module_nomodule_lts_no_paired_nomodule.out b/validator/testdata/transformed_feature_tests/module_nomodule_lts_no_paired_nomodule.out
new file mode 100644
index 0000000000000..3b17a2c67512f
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/module_nomodule_lts_no_paired_nomodule.out
@@ -0,0 +1,45 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This test demonstrates that all LTS scripts must have a module and nomodule
+|    pairing when the first script is module.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset=utf-8>
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name=viewport content="width=device-width">
+|
+|    <!-- Invalid: missing nomodule pair for AMP runtime LTS script -->
+|    <script async crossorigin=anonymous src=https://cdn.ampproject.org/lts/v0.mjs type=module></script>
+|
+|    <!-- Invalid: missing nomodule pair for AMP extension LTS script -->
+|    <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/lts/v0/amp-ad-0.1.mjs type=module></script>
+|
+|    <link rel=canonical href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    Hello, world.
+|    <amp-ad layout=nodisplay type></amp-ad>
+|  </body>
+|  </html>
+>>       ^~~~~~~~~
+transformed_feature_tests/module_nomodule_lts_no_paired_nomodule.html:40:6 The tag 'amphtml nomodule LTS engine script' is missing or incorrect, but required by 'amphtml module LTS engine script'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+>>       ^~~~~~~~~
+transformed_feature_tests/module_nomodule_lts_no_paired_nomodule.html:40:6 The tag 'amp-ad nomodule extension script' is missing or incorrect, but required by 'amp-ad module extension script'. (see https://amp.dev/documentation/components/amp-ad)
diff --git a/validator/testdata/transformed_feature_tests/module_nomodule_no_paired_module.html b/validator/testdata/transformed_feature_tests/module_nomodule_no_paired_module.html
new file mode 100644
index 0000000000000..857afc2c453a4
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/module_nomodule_no_paired_module.html
@@ -0,0 +1,40 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This test demonstrates that all scripts must have a module and nomodule
+  pairing when the first script is nomodule.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset=utf-8>
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name=viewport content="width=device-width">
+
+  <!-- Invalid: missing module pair for AMP runtime script -->
+  <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+
+  <!-- Invalid: missing module pair for AMP extension script -->
+  <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/v0/amp-ad-0.1.js></script>
+
+  <link rel=canonical href="./regular-html-version.html">
+</head>
+<body>
+  Hello, world.
+  <amp-ad layout=nodisplay type></amp-ad>
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/module_nomodule_no_paired_module.out b/validator/testdata/transformed_feature_tests/module_nomodule_no_paired_module.out
new file mode 100644
index 0000000000000..28126c475971e
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/module_nomodule_no_paired_module.out
@@ -0,0 +1,45 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This test demonstrates that all scripts must have a module and nomodule
+|    pairing when the first script is nomodule.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset=utf-8>
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name=viewport content="width=device-width">
+|
+|    <!-- Invalid: missing module pair for AMP runtime script -->
+|    <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+|
+|    <!-- Invalid: missing module pair for AMP extension script -->
+|    <script async custom-element=amp-ad nomodule src=https://cdn.ampproject.org/v0/amp-ad-0.1.js></script>
+|
+|    <link rel=canonical href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    Hello, world.
+|    <amp-ad layout=nodisplay type></amp-ad>
+|  </body>
+|  </html>
+>>       ^~~~~~~~~
+transformed_feature_tests/module_nomodule_no_paired_module.html:40:6 The tag 'amphtml module engine script' is missing or incorrect, but required by 'amphtml nomodule engine script'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+>>       ^~~~~~~~~
+transformed_feature_tests/module_nomodule_no_paired_module.html:40:6 The tag 'amp-ad module extension script' is missing or incorrect, but required by 'amp-ad nomodule extension script'. (see https://amp.dev/documentation/components/amp-ad)
diff --git a/validator/testdata/transformed_feature_tests/module_nomodule_no_paired_nomodule.html b/validator/testdata/transformed_feature_tests/module_nomodule_no_paired_nomodule.html
new file mode 100644
index 0000000000000..ff24c6677bb2d
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/module_nomodule_no_paired_nomodule.html
@@ -0,0 +1,40 @@
+<!--
+  Copyright 2020 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.
+-->
+<!--
+  Test Description:
+  This test demonstrates that all scripts must have a module and nomodule
+  pairing when the first script is module.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset=utf-8>
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name=viewport content="width=device-width">
+
+  <!-- Invalid: missing nomodule pair for AMP runtime script -->
+  <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+
+  <!-- Invalid: missing nomodule pair for AMP extension script -->
+  <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/v0/amp-ad-0.1.mjs type=module></script>
+
+  <link rel=canonical href="./regular-html-version.html">
+</head>
+<body>
+  Hello, world.
+  <amp-ad layout=nodisplay type></amp-ad>
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/module_nomodule_no_paired_nomodule.out b/validator/testdata/transformed_feature_tests/module_nomodule_no_paired_nomodule.out
new file mode 100644
index 0000000000000..9b41a9dcb6353
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/module_nomodule_no_paired_nomodule.out
@@ -0,0 +1,45 @@
+FAIL
+|  <!--
+|    Copyright 2020 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This test demonstrates that all scripts must have a module and nomodule
+|    pairing when the first script is module.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset=utf-8>
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name=viewport content="width=device-width">
+|
+|    <!-- Invalid: missing nomodule pair for AMP runtime script -->
+|    <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+|
+|    <!-- Invalid: missing nomodule pair for AMP extension script -->
+|    <script async crossorigin=anonymous custom-element=amp-ad src=https://cdn.ampproject.org/v0/amp-ad-0.1.mjs type=module></script>
+|
+|    <link rel=canonical href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    Hello, world.
+|    <amp-ad layout=nodisplay type></amp-ad>
+|  </body>
+|  </html>
+>>       ^~~~~~~~~
+transformed_feature_tests/module_nomodule_no_paired_nomodule.html:40:6 The tag 'amphtml nomodule engine script' is missing or incorrect, but required by 'amphtml module engine script'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
+>>       ^~~~~~~~~
+transformed_feature_tests/module_nomodule_no_paired_nomodule.html:40:6 The tag 'amp-ad nomodule extension script' is missing or incorrect, but required by 'amp-ad module extension script'. (see https://amp.dev/documentation/components/amp-ad)
diff --git a/validator/testdata/transformed_feature_tests/nonce_attribute.html b/validator/testdata/transformed_feature_tests/nonce_attribute.html
new file mode 100644
index 0000000000000..a6a224223092c
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/nonce_attribute.html
@@ -0,0 +1,39 @@
+<!--
+  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.
+-->
+<!--
+  Test Description:
+  Tests for the presence of allowed nonce attribute in transformed AMP.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset="utf-8">
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name="viewport" content="width=device-width">
+  <script async nonce src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-bind" nonce src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+  <style nonce 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>
+  <link rel="canonical" href="./regular-html-version.html">
+  <script nonce type=application/ld+json>{}</script>
+  <script id=amp-rtc nonce type=application/json>{}</script>
+</head>
+<body>
+  Hello, world.
+  <amp-state id=nonce>
+    <script nonce type=application/json>{}</script>
+  </amp-state>
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/nonce_attribute.out b/validator/testdata/transformed_feature_tests/nonce_attribute.out
new file mode 100644
index 0000000000000..1e6224b02b104
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/nonce_attribute.out
@@ -0,0 +1,40 @@
+PASS
+|  <!--
+|    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.
+|  -->
+|  <!--
+|    Test Description:
+|    Tests for the presence of allowed nonce attribute in transformed AMP.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name="viewport" content="width=device-width">
+|    <script async nonce src="https://cdn.ampproject.org/v0.js"></script>
+|    <script async custom-element="amp-bind" nonce src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+|    <style nonce 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>
+|    <link rel="canonical" href="./regular-html-version.html">
+|    <script nonce type=application/ld+json>{}</script>
+|    <script id=amp-rtc nonce type=application/json>{}</script>
+|  </head>
+|  <body>
+|    Hello, world.
+|    <amp-state id=nonce>
+|      <script nonce type=application/json>{}</script>
+|    </amp-state>
+|  </body>
+|  </html>
diff --git a/validator/testdata/transformed_feature_tests/nonce_attribute_error.html b/validator/testdata/transformed_feature_tests/nonce_attribute_error.html
deleted file mode 100644
index 9baef277466d2..0000000000000
--- a/validator/testdata/transformed_feature_tests/nonce_attribute_error.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
-  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.
--->
-<!--
-  Test Description:
-  Tests for the presence of disallowed nonce attribute in transformed AMP.
--->
-<!doctype html>
-<html ⚡ transformed="google;v=1">
-<head>
-  <meta charset="utf-8">
-  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
-  <meta name="viewport" content="width=device-width">
-  <script async nonce src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-bind" nonce src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
-  <style nonce 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>
-  <link rel="canonical" href="./regular-html-version.html">
-  <script nonce type=application/ld+json>{}</script>
-  <script id=amp-rtc nonce type=application/json>{}</script>
-</head>
-<body>
-  Hello, world.
-  <amp-state id=nonce>
-    <script nonce type=application/json>{}</script>
-  </amp-state>
-</body>
-</html>
diff --git a/validator/testdata/transformed_feature_tests/nonce_attribute_error.out b/validator/testdata/transformed_feature_tests/nonce_attribute_error.out
deleted file mode 100644
index 5922a3b1e09c9..0000000000000
--- a/validator/testdata/transformed_feature_tests/nonce_attribute_error.out
+++ /dev/null
@@ -1,52 +0,0 @@
-FAIL
-|  <!--
-|    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.
-|  -->
-|  <!--
-|    Test Description:
-|    Tests for the presence of disallowed nonce attribute in transformed AMP.
-|  -->
-|  <!doctype html>
-|  <html ⚡ transformed="google;v=1">
-|  <head>
-|    <meta charset="utf-8">
-|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
-|    <meta name="viewport" content="width=device-width">
-|    <script async nonce src="https://cdn.ampproject.org/v0.js"></script>
->>   ^~~~~~~~~
-transformed_feature_tests/nonce_attribute_error.html:26:2 The attribute 'nonce' may not appear in tag 'amphtml engine v0.js script'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
-|    <script async custom-element="amp-bind" nonce src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
->>   ^~~~~~~~~
-transformed_feature_tests/nonce_attribute_error.html:27:2 The attribute 'nonce' may not appear in tag 'amp-bind extension .js script'. (see https://amp.dev/documentation/components/amp-bind)
-|    <style nonce 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>
->>   ^~~~~~~~~
-transformed_feature_tests/nonce_attribute_error.html:28:2 The attribute 'nonce' may not appear in tag 'head > style[amp-boilerplate] (transformed)'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
-|    <link rel="canonical" href="./regular-html-version.html">
-|    <script nonce type=application/ld+json>{}</script>
->>   ^~~~~~~~~
-transformed_feature_tests/nonce_attribute_error.html:30:2 The attribute 'nonce' may not appear in tag 'script type=application/ld+json'.
-|    <script id=amp-rtc nonce type=application/json>{}</script>
->>   ^~~~~~~~~
-transformed_feature_tests/nonce_attribute_error.html:31:2 The attribute 'nonce' may not appear in tag 'script id=amp-rtc'.
-|  </head>
-|  <body>
-|    Hello, world.
-|    <amp-state id=nonce>
-|      <script nonce type=application/json>{}</script>
->>     ^~~~~~~~~
-transformed_feature_tests/nonce_attribute_error.html:36:4 The attribute 'nonce' may not appear in tag 'amp-bind extension .json script'. (see https://amp.dev/documentation/components/amp-bind)
-|    </amp-state>
-|  </body>
-|  </html>
diff --git a/validator/testdata/transformed_feature_tests/script_amp_onerror_js_mjs.html b/validator/testdata/transformed_feature_tests/script_amp_onerror_js_mjs.html
new file mode 100644
index 0000000000000..a59f03a011770
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/script_amp_onerror_js_mjs.html
@@ -0,0 +1,38 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  This tests the validity of the script tag for early styling on fast failure
+  to load v0.js or v0.mjs. See GitHub #22543.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset="utf-8">
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name="viewport" content="width=device-width">
+  <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+  <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+
+  <!-- Valid -->
+  <script amp-onerror>[].slice.call(document.querySelectorAll("script[src*='/v0.js'],script[src*='/v0.mjs']")).forEach(function(s){s.onerror=function(){document.querySelector('style[amp-boilerplate]').textContent=''}})</script>
+
+  <link rel="canonical" href="./regular-html-version.html">
+</head>
+<body>
+Hello, world.
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/script_amp_onerror_js_mjs.out b/validator/testdata/transformed_feature_tests/script_amp_onerror_js_mjs.out
new file mode 100644
index 0000000000000..baed3d97a9742
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/script_amp_onerror_js_mjs.out
@@ -0,0 +1,39 @@
+PASS
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This tests the validity of the script tag for early styling on fast failure
+|    to load v0.js or v0.mjs. See GitHub #22543.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name="viewport" content="width=device-width">
+|    <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+|    <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+|
+|    <!-- Valid -->
+|    <script amp-onerror>[].slice.call(document.querySelectorAll("script[src*='/v0.js'],script[src*='/v0.mjs']")).forEach(function(s){s.onerror=function(){document.querySelector('style[amp-boilerplate]').textContent=''}})</script>
+|
+|    <link rel="canonical" href="./regular-html-version.html">
+|  </head>
+|  <body>
+|  Hello, world.
+|  </body>
+|  </html>
\ No newline at end of file
diff --git a/validator/testdata/transformed_feature_tests/script_amp_onerror_js_mjs_fail.html b/validator/testdata/transformed_feature_tests/script_amp_onerror_js_mjs_fail.html
new file mode 100644
index 0000000000000..7b0e22e8f3a42
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/script_amp_onerror_js_mjs_fail.html
@@ -0,0 +1,38 @@
+<!--
+  Copyright 2021 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.
+-->
+<!--
+  Test Description:
+  This tests the validity of the script tag for early styling on fast failure
+  to load v0.js or v0.mjs. See GitHub #22543.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1">
+<head>
+  <meta charset="utf-8">
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name="viewport" content="width=device-width">
+  <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+  <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+
+  <!-- Invalid: cdata does not match exactly -->
+  <script amp-onerror>[].slice.call(document.querySelectorAll("script[src*='/v0.js'],script[src*='/v0.mjs']")).forEach(function(s){s.onerror=function(){document.querySelector('style[amp-boilerplate]').textContent=' '}})</script>
+
+  <link rel="canonical" href="./regular-html-version.html">
+</head>
+<body>
+Hello, world.
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/script_amp_onerror_js_mjs_fail.out b/validator/testdata/transformed_feature_tests/script_amp_onerror_js_mjs_fail.out
new file mode 100644
index 0000000000000..f59cebdc98569
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/script_amp_onerror_js_mjs_fail.out
@@ -0,0 +1,41 @@
+FAIL
+|  <!--
+|    Copyright 2021 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.
+|  -->
+|  <!--
+|    Test Description:
+|    This tests the validity of the script tag for early styling on fast failure
+|    to load v0.js or v0.mjs. See GitHub #22543.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1">
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name="viewport" content="width=device-width">
+|    <script async crossorigin=anonymous src=https://cdn.ampproject.org/v0.mjs type=module></script>
+|    <script async nomodule src=https://cdn.ampproject.org/v0.js></script>
+|
+|    <!-- Invalid: cdata does not match exactly -->
+|    <script amp-onerror>[].slice.call(document.querySelectorAll("script[src*='/v0.js'],script[src*='/v0.mjs']")).forEach(function(s){s.onerror=function(){document.querySelector('style[amp-boilerplate]').textContent=' '}})</script>
+>>   ^~~~~~~~~
+transformed_feature_tests/script_amp_onerror_js_mjs_fail.html:31:2 The mandatory text inside tag 'script amp-onerror' is missing or incorrect.
+|
+|    <link rel="canonical" href="./regular-html-version.html">
+|  </head>
+|  <body>
+|  Hello, world.
+|  </body>
+|  </html>
\ No newline at end of file
diff --git a/validator/testdata/transformed_feature_tests/server_side_rendering.html b/validator/testdata/transformed_feature_tests/server_side_rendering.html
index 2474671c572f3..c1270d7e50ef7 100644
--- a/validator/testdata/transformed_feature_tests/server_side_rendering.html
+++ b/validator/testdata/transformed_feature_tests/server_side_rendering.html
@@ -36,6 +36,11 @@
     <i-amphtml-sizer style=display:block;padding-top:171.4370%;></i-amphtml-sizer>
   </amp-img>
   <!-- Valid -->
+  <amp-img src="https://amp.dev/static/samples/img/amp.jpg" width="1080" height="610" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive" noloading="" i-amphtml-ssr>
+    <i-amphtml-sizer style="display:block;padding-top:56.4815%;"></i-amphtml-sizer>
+    <img class="i-amphtml-blurry-placeholder" placeholder="" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' xmlns%3Axlink='http%3A//www.w3.org/1999/xlink' viewBox='0 0 10 6'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='.5'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' xlink%3Ahref='data%3Aimage/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAA+ElEQVR4AQXBPS8DYQDA8f9z99xLm9x5uUQYDIaWayMq6WSRIgZB8AEaX0CMEkEMEt/B5BMwMDQ1dPQ6WEikvVWlSBon0d6r30/sVafS89ogSZJQEIJvVSVjmrhJzP1fj04QEgR9lPqDzuH+KpZt09J05jfLlAwNpzxBV8DSoks+N4bUrHEmcw5u3uH2zmN3Z4EzU1KpuDS8NlsbJX66vygry0U+v3zW12YxTIOnR4/t6hzNZhvf7zE6YnPTeEOdLswcn5xe4wzbtLwO2azOwdEFtpXh5fWDMIy4vHpGmLqbqkNFjPCdNO4jpSSKYlBUoigglQPEicE/wDBT/+m3qawAAAAASUVORK5CYII='%3E%3C/image%3E%3C/svg%3E" alt="">
+  </amp-img>
+  <!-- Valid -->
   <amp-img src="image.png" height="100" width="300" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
     <i-amphtml-sizer class="i-amphtml-sizer"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;charset=utf-8,<svg height=&quot;100&quot; width=&quot;300&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;/>"></i-amphtml-sizer>
   </amp-img>
@@ -61,8 +66,20 @@
     <img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;charset=utf-8,<svg height='100' width='300' xmlns='http://www.w3.org/2000/svg' version='1.1'/>">
     </i-amphtml-sizer>
   </amp-img>
+  <!-- Invalid i-amphtml-sizer > img  does not specify class -->
+  <amp-img src="image.png" height="100" width="300" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
+    <i-amphtml-sizer class="i-amphtml-sizer"><img alt="" aria-hidden="true" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9Ijc1IiB3aWR0aD0iNzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+"></i-amphtml-sizer>
+  </amp-img>
   <!-- Valid -->
   <amp-social-share class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" i-amphtml-layout=fixed style=width:60px;height:44px; type=test></amp-social-share>
+  <!-- Valid -->
+  <amp-img src=image.png class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" height=300 i-amphtml-layout=responsive layout=responsive width=400 style="aspect-ratio:400/300;">
+    <i-amphtml-sizer i-amphtml-disable-ar style=display:block;padding-top:171.4370%;></i-amphtml-sizer>
+  </amp-img>
+  <!-- Valid -->
+  <amp-img src="image.png" height="300" width="400" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic" style="aspect-ratio:400/300;">
+    <i-amphtml-sizer i-amphtml-disable-ar class="i-amphtml-sizer"><img class="i-amphtml-intrinsic-sizer" alt="" aria-hidden="true" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9Ijc1IiB3aWR0aD0iNzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+"></i-amphtml-sizer>
+  </amp-img>
   <!-- Invalid i-amphtml-layout attribute value does not match layout value -->
   <amp-img class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" height=2911 i-amphtml-layout=nodisplay layout=responsive src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg srcset="https://example-com.cdn.ampproject.org/i/s/example.com/lemur-wide.jpg 640w, https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg 320w" width=1698>
     <i-amphtml-sizer style=display:block;padding-top:171.4370%;></i-amphtml-sizer>
diff --git a/validator/testdata/transformed_feature_tests/server_side_rendering.out b/validator/testdata/transformed_feature_tests/server_side_rendering.out
index bf963dbb34111..93d8e5cdc64eb 100644
--- a/validator/testdata/transformed_feature_tests/server_side_rendering.out
+++ b/validator/testdata/transformed_feature_tests/server_side_rendering.out
@@ -37,6 +37,11 @@ FAIL
 |      <i-amphtml-sizer style=display:block;padding-top:171.4370%;></i-amphtml-sizer>
 |    </amp-img>
 |    <!-- Valid -->
+|    <amp-img src="https://amp.dev/static/samples/img/amp.jpg" width="1080" height="610" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive" noloading="" i-amphtml-ssr>
+|      <i-amphtml-sizer style="display:block;padding-top:56.4815%;"></i-amphtml-sizer>
+|      <img class="i-amphtml-blurry-placeholder" placeholder="" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' xmlns%3Axlink='http%3A//www.w3.org/1999/xlink' viewBox='0 0 10 6'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='.5'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' xlink%3Ahref='data%3Aimage/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAA+ElEQVR4AQXBPS8DYQDA8f9z99xLm9x5uUQYDIaWayMq6WSRIgZB8AEaX0CMEkEMEt/B5BMwMDQ1dPQ6WEikvVWlSBon0d6r30/sVafS89ogSZJQEIJvVSVjmrhJzP1fj04QEgR9lPqDzuH+KpZt09J05jfLlAwNpzxBV8DSoks+N4bUrHEmcw5u3uH2zmN3Z4EzU1KpuDS8NlsbJX66vygry0U+v3zW12YxTIOnR4/t6hzNZhvf7zE6YnPTeEOdLswcn5xe4wzbtLwO2azOwdEFtpXh5fWDMIy4vHpGmLqbqkNFjPCdNO4jpSSKYlBUoigglQPEicE/wDBT/+m3qawAAAAASUVORK5CYII='%3E%3C/image%3E%3C/svg%3E" alt="">
+|    </amp-img>
+|    <!-- Valid -->
 |    <amp-img src="image.png" height="100" width="300" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
 |      <i-amphtml-sizer class="i-amphtml-sizer"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;charset=utf-8,<svg height=&quot;100&quot; width=&quot;300&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;/>"></i-amphtml-sizer>
 |    </amp-img>
@@ -56,46 +61,60 @@ FAIL
 |    <amp-img src="image.png" height="100" width="300" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
 |      <i-amphtml-sizer class="i-amphtml-sizer"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="image.png"></i-amphtml-sizer>
 >>                                              ^~~~~~~~~
-transformed_feature_tests/server_side_rendering.html:56:45 The attribute 'src' in tag 'IMG-I-AMPHTML-INTRINSIC-SIZER' is set to the invalid value 'image.png'.
+transformed_feature_tests/server_side_rendering.html:61:45 The attribute 'src' in tag 'img' is set to the invalid value 'image.png'.
 |    </amp-img>
 |    <!-- Invalid intrinsic i-amphtml-sizer inside responsive sizer  -->
 |    <amp-img src="image.png" height="100" width="300" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
 |      <i-amphtml-sizer style=display:block;padding-top:171.4370%;>
 |      <img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;charset=utf-8,<svg height='100' width='300' xmlns='http://www.w3.org/2000/svg' version='1.1'/>">
 >>     ^~~~~~~~~
-transformed_feature_tests/server_side_rendering.html:61:4 The parent tag of tag 'IMG-I-AMPHTML-INTRINSIC-SIZER' is 'i-amphtml-sizer', but it can only be 'i-amphtml-sizer-intrinsic'.
+transformed_feature_tests/server_side_rendering.html:66:4 The parent tag of tag 'img' is 'i-amphtml-sizer', but it can only be 'i-amphtml-sizer-intrinsic'.
 |      </i-amphtml-sizer>
 |    </amp-img>
+|    <!-- Invalid i-amphtml-sizer > img  does not specify class -->
+|    <amp-img src="image.png" height="100" width="300" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic">
+|      <i-amphtml-sizer class="i-amphtml-sizer"><img alt="" aria-hidden="true" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9Ijc1IiB3aWR0aD0iNzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+"></i-amphtml-sizer>
+>>                                              ^~~~~~~~~
+transformed_feature_tests/server_side_rendering.html:71:45 The mandatory attribute 'class' is missing in tag 'img'.
+|    </amp-img>
 |    <!-- Valid -->
 |    <amp-social-share class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" i-amphtml-layout=fixed style=width:60px;height:44px; type=test></amp-social-share>
+|    <!-- Valid -->
+|    <amp-img src=image.png class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" height=300 i-amphtml-layout=responsive layout=responsive width=400 style="aspect-ratio:400/300;">
+|      <i-amphtml-sizer i-amphtml-disable-ar style=display:block;padding-top:171.4370%;></i-amphtml-sizer>
+|    </amp-img>
+|    <!-- Valid -->
+|    <amp-img src="image.png" height="300" width="400" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic" style="aspect-ratio:400/300;">
+|      <i-amphtml-sizer i-amphtml-disable-ar class="i-amphtml-sizer"><img class="i-amphtml-intrinsic-sizer" alt="" aria-hidden="true" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9Ijc1IiB3aWR0aD0iNzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+"></i-amphtml-sizer>
+|    </amp-img>
 |    <!-- Invalid i-amphtml-layout attribute value does not match layout value -->
 |    <amp-img class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" height=2911 i-amphtml-layout=nodisplay layout=responsive src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg srcset="https://example-com.cdn.ampproject.org/i/s/example.com/lemur-wide.jpg 640w, https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg 320w" width=1698>
 >>   ^~~~~~~~~
-transformed_feature_tests/server_side_rendering.html:67:2 Invalid value 'nodisplay' for attribute 'i-amphtml-layout' in tag 'amp-img' - for layout 'RESPONSIVE', set the attribute 'i-amphtml-layout' to value 'responsive'. (see https://amp.dev/documentation/components/amp-img)
+transformed_feature_tests/server_side_rendering.html:84:2 Invalid value 'nodisplay' for attribute 'i-amphtml-layout' in tag 'amp-img' - for layout 'RESPONSIVE', set the attribute 'i-amphtml-layout' to value 'responsive'. (see https://amp.dev/documentation/components/amp-img/)
 |      <i-amphtml-sizer style=display:block;padding-top:171.4370%;></i-amphtml-sizer>
 |    </amp-img>
 |    <!-- Invalid class attribute value due to not matching layout value -->
 |    <amp-img class="i-amphtml-layout-nodisplay i-amphtml-layout-size-defined" height=2911 i-amphtml-layout=responsive layout=responsive src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg srcset="https://example-com.cdn.ampproject.org/i/s/example.com/lemur-wide.jpg 640w, https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg 320w" width=1698>
 >>   ^~~~~~~~~
-transformed_feature_tests/server_side_rendering.html:71:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-nodisplay i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/components/amp-img)
+transformed_feature_tests/server_side_rendering.html:88:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-nodisplay i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/components/amp-img/)
 |      <i-amphtml-sizer style=display:block;padding-top:171.4370%;></i-amphtml-sizer>
 |    </amp-img>
 |    <!-- Invalid class attribute value due to layout not being size defined (spaces) -->
 |    <amp-img class="i-amphtml-layout-nodisplay i-amphtml-layout-size-defined" i-amphtml-layout=nodisplay layout=nodisplay></amp-img>
 >>   ^~~~~~~~~
-transformed_feature_tests/server_side_rendering.html:75:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-nodisplay i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/components/amp-img)
+transformed_feature_tests/server_side_rendering.html:92:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-nodisplay i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- Invalid class attribute value due to layout not being size defined (tabs) -->
 |    <amp-img class="i-amphtml-layout-nodisplay  i-amphtml-layout-size-defined" i-amphtml-layout=nodisplay layout=nodisplay></amp-img>
 >>   ^~~~~~~~~
-transformed_feature_tests/server_side_rendering.html:77:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-nodisplay i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/components/amp-img)
+transformed_feature_tests/server_side_rendering.html:94:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-nodisplay i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/components/amp-img/)
 |    <!-- Invalid i-amphtml-sizer due to css declarations -->
 |    <amp-img class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" height=2911 i-amphtml-layout=responsive layout=responsive src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg srcset="https://example-com.cdn.ampproject.org/i/s/example.com/lemur-wide.jpg 640w, https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg 320w" width=1698>
 |      <i-amphtml-sizer style=display:none;padding-bottom:171.4370%;></i-amphtml-sizer>
 >>     ^~~~~~~~~
-transformed_feature_tests/server_side_rendering.html:80:4 CSS syntax error in tag 'I-AMPHTML-SIZER-RESPONSIVE' - the property 'display' is set to the disallowed value 'none'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
+transformed_feature_tests/server_side_rendering.html:97:4 CSS syntax error in tag 'i-amphtml-sizer' - the property 'display' is set to the disallowed value 'none'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
 >>     ^~~~~~~~~
-transformed_feature_tests/server_side_rendering.html:80:4 The property 'padding-bottom' in attribute 'style' in tag 'I-AMPHTML-SIZER-RESPONSIVE' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages)
+transformed_feature_tests/server_side_rendering.html:97:4 The property 'padding-bottom' in attribute 'style' in tag 'i-amphtml-sizer' is disallowed. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/)
 |    </amp-img>
 |
 |  </body>
-|  </html>
\ No newline at end of file
+|  </html>
diff --git a/validator/testdata/transformed_feature_tests/style_amp_runtime_css.html b/validator/testdata/transformed_feature_tests/style_amp_runtime_css.html
index 2484108fc3886..ad131cde7ed0b 100644
--- a/validator/testdata/transformed_feature_tests/style_amp_runtime_css.html
+++ b/validator/testdata/transformed_feature_tests/style_amp_runtime_css.html
@@ -25,7 +25,7 @@
 <html ⚡ transformed="google;v=1">
 <head>
   <meta charset="utf-8">
-  <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],amp-share-tracking,form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
+  <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
 /*# sourceURL=/css/amp.css*/</style>
   <meta name="viewport" content="width=device-width">
   <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/validator/testdata/transformed_feature_tests/style_amp_runtime_css.out b/validator/testdata/transformed_feature_tests/style_amp_runtime_css.out
index 68eb9504f7a91..10017e0006ab6 100644
--- a/validator/testdata/transformed_feature_tests/style_amp_runtime_css.out
+++ b/validator/testdata/transformed_feature_tests/style_amp_runtime_css.out
@@ -26,7 +26,7 @@ PASS
 |  <html ⚡ transformed="google;v=1">
 |  <head>
 |    <meta charset="utf-8">
-|    <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],amp-share-tracking,form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
+|    <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
 |  /*# sourceURL=/css/amp.css*/</style>
 |    <meta name="viewport" content="width=device-width">
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/validator/testdata/transformed_feature_tests/transformed_attribute_value_malformed.html b/validator/testdata/transformed_feature_tests/transformed_attribute_value_malformed.html
index 18ae45b54264a..5c904bf555fbc 100644
--- a/validator/testdata/transformed_feature_tests/transformed_attribute_value_malformed.html
+++ b/validator/testdata/transformed_feature_tests/transformed_attribute_value_malformed.html
@@ -1,5 +1,5 @@
 <!--
-  Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+  Copyright 2020 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.
@@ -15,11 +15,11 @@
 -->
 <!--
   Test Description:
-  This is the minimum valid tranformed AMP document; it includes all of the
-  required fields from the spec, but nothing else.
+  This tests that the value of the transformed attribute catches malformed name. Only
+  `self` or AMP caches listed at https://cdn.ampproject.org/caches.json are valid.
 -->
 <!doctype html>
-<html ⚡ transformed="google;v=1..3">
+<html ⚡ transformed="foobar;v=1">
 <head>
   <meta charset="utf-8">
   <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
diff --git a/validator/testdata/transformed_feature_tests/transformed_attribute_value_malformed.out b/validator/testdata/transformed_feature_tests/transformed_attribute_value_malformed.out
index d6e317a032efc..21f2fa76125ed 100644
--- a/validator/testdata/transformed_feature_tests/transformed_attribute_value_malformed.out
+++ b/validator/testdata/transformed_feature_tests/transformed_attribute_value_malformed.out
@@ -1,6 +1,6 @@
 FAIL
 |  <!--
-|    Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+|    Copyright 2020 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.
@@ -16,13 +16,13 @@ FAIL
 |  -->
 |  <!--
 |    Test Description:
-|    This is the minimum valid tranformed AMP document; it includes all of the
-|    required fields from the spec, but nothing else.
+|    This tests that the value of the transformed attribute catches malformed name. Only
+|    `self` or AMP caches listed at https://cdn.ampproject.org/caches.json are valid.
 |  -->
 |  <!doctype html>
-|  <html ⚡ transformed="google;v=1..3">
+|  <html ⚡ transformed="foobar;v=1">
 >> ^~~~~~~~~
-transformed_feature_tests/transformed_attribute_value_malformed.html:22:0 The attribute 'transformed' in tag 'html' is set to the invalid value 'google;v=1..3'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+transformed_feature_tests/transformed_attribute_value_malformed.html:22:0 The attribute 'transformed' in tag 'html' is set to the invalid value 'foobar;v=1'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
 |  <head>
 |    <meta charset="utf-8">
 |    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
diff --git a/validator/testdata/transformed_feature_tests/transformed_attribute_value_version_malformed.html b/validator/testdata/transformed_feature_tests/transformed_attribute_value_version_malformed.html
new file mode 100644
index 0000000000000..01e046750c904
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/transformed_attribute_value_version_malformed.html
@@ -0,0 +1,32 @@
+<!--
+  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.
+-->
+<!--
+  Test Description:
+  This tests that the value of the transformed attribute catches malformed version numbers.
+-->
+<!doctype html>
+<html ⚡ transformed="google;v=1..3">
+<head>
+  <meta charset="utf-8">
+  <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+  <meta name="viewport" content="width=device-width">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="canonical" href="./regular-html-version.html">
+</head>
+<body>
+  Hello, world.
+</body>
+</html>
diff --git a/validator/testdata/transformed_feature_tests/transformed_attribute_value_version_malformed.out b/validator/testdata/transformed_feature_tests/transformed_attribute_value_version_malformed.out
new file mode 100644
index 0000000000000..3d429ff0c7ec7
--- /dev/null
+++ b/validator/testdata/transformed_feature_tests/transformed_attribute_value_version_malformed.out
@@ -0,0 +1,35 @@
+FAIL
+|  <!--
+|    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.
+|  -->
+|  <!--
+|    Test Description:
+|    This tests that the value of the transformed attribute catches malformed version numbers.
+|  -->
+|  <!doctype html>
+|  <html ⚡ transformed="google;v=1..3">
+>> ^~~~~~~~~
+transformed_feature_tests/transformed_attribute_value_version_malformed.html:21:0 The attribute 'transformed' in tag 'html' is set to the invalid value 'google;v=1..3'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+|  <head>
+|    <meta charset="utf-8">
+|    <style amp-runtime i-amphtml-version=123456789012345>.omitted-for-brevity{}</style>
+|    <meta name="viewport" content="width=device-width">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <link rel="canonical" href="./regular-html-version.html">
+|  </head>
+|  <body>
+|    Hello, world.
+|  </body>
+|  </html>
diff --git a/validator/testdata/transformed_feature_tests/transformed_but_not_identified_transformed.html b/validator/testdata/transformed_feature_tests/transformed_but_not_identified_transformed.html
index f76c6eed9c671..543077b7cd0b0 100644
--- a/validator/testdata/transformed_feature_tests/transformed_but_not_identified_transformed.html
+++ b/validator/testdata/transformed_feature_tests/transformed_but_not_identified_transformed.html
@@ -21,7 +21,7 @@
 <html ⚡ i-amphtml-layout i-amphtml-no-boilerplate>
 <head>
   <meta charset="utf-8">
-  <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],amp-share-tracking,form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
+  <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
 /*# sourceURL=/css/amp.css*/</style>
   <meta name="viewport" content="width=device-width">
   <script async src="https://cdn.ampproject.org/v0.js"></script>
diff --git a/validator/testdata/transformed_feature_tests/transformed_but_not_identified_transformed.out b/validator/testdata/transformed_feature_tests/transformed_but_not_identified_transformed.out
index 80007c8d48cbe..f72908d70346f 100644
--- a/validator/testdata/transformed_feature_tests/transformed_but_not_identified_transformed.out
+++ b/validator/testdata/transformed_feature_tests/transformed_but_not_identified_transformed.out
@@ -21,16 +21,16 @@ FAIL
 |  <!doctype html>
 |  <html ⚡ i-amphtml-layout i-amphtml-no-boilerplate>
 >> ^~~~~~~~~
-transformed_feature_tests/transformed_but_not_identified_transformed.html:21:0 The attribute 'i-amphtml-layout' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+transformed_feature_tests/transformed_but_not_identified_transformed.html:21:0 The attribute 'i-amphtml-layout' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 >> ^~~~~~~~~
-transformed_feature_tests/transformed_but_not_identified_transformed.html:21:0 The attribute 'i-amphtml-no-boilerplate' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
+transformed_feature_tests/transformed_but_not_identified_transformed.html:21:0 The attribute 'i-amphtml-no-boilerplate' may not appear in tag 'html'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
 |  <head>
 |    <meta charset="utf-8">
-|    <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],amp-share-tracking,form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
+|    <style amp-runtime i-amphtml-version=123456789012345>html{overflow-x:hidden!important}body,html{height:auto!important}html.i-amphtml-fie{height:100%!important;width:100%!important}body{margin:0!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}[hidden]{display:none!important}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y;touch-action:pan-y}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-webview>body{overflow-x:hidden!important;overflow-y:visible!important;min-height:100vh!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}html.i-amphtml-ios-embed-sd{overflow:hidden!important;position:static!important}html.i-amphtml-ios-embed-sd>body,html.i-amphtml-singledoc.i-amphtml-ios-embed-sd>body{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important}.i-amphtml-body-minheight>body{min-height:calc(100vh + 1px)}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{-webkit-transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][sizes]:not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic{display:inline-block;position:relative;max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]{display:block;position:relative}.i-amphtml-layout-fill,[layout=fill]:not(.i-amphtml-layout-fill){display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*{display:none}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder]{display:block}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-loader-line{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden!important;background-color:hsla(0,0%,59.2%,0.2);display:block}.i-amphtml-loader-moving-line{display:block;position:absolute;width:100%;height:100%!important;background-color:hsla(0,0%,59.2%,0.65);z-index:2}@-webkit-keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes i-amphtml-loader-line-moving{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.i-amphtml-loader-line.amp-active .i-amphtml-loader-moving-line{-webkit-animation:i-amphtml-loader-line-moving 4s ease infinite;animation:i-amphtml-loader-line-moving 4s ease infinite}.i-amphtml-loader{position:absolute;display:block;height:10px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;white-space:nowrap}.i-amphtml-loader.amp-active .i-amphtml-loader-dot{-webkit-animation:i-amphtml-loader-dots 2s infinite;animation:i-amphtml-loader-dots 2s infinite}.i-amphtml-loader-dot{position:relative;display:inline-block;height:10px;width:10px;margin:2px;border-radius:100%;background-color:rgba(0,0,0,0.3);box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);will-change:transform}.i-amphtml-loader .i-amphtml-loader-dot:first-child{-webkit-animation-delay:0s;animation-delay:0s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.i-amphtml-loader .i-amphtml-loader-dot:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}@keyframes i-amphtml-loader-dots{0%,to{-webkit-transform:scale(.7);transform:scale(.7);background-color:rgba(0,0,0,0.3)}50%{-webkit-transform:scale(.8);transform:scale(.8);background-color:rgba(0,0,0,0.5)}}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-instagram{padding:64px 0px 0px!important;background-color:#fff}amp-analytics,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}html.i-amphtml-fie>amp-analytics{position:initial!important}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}[visible-when-invalid]:not(.visible),amp-experiment,amp-live-list>[update],form [submit-error],form [submit-success],form [submitting]{display:none}.i-amphtml-jank-meter{position:fixed;background-color:rgba(232,72,95,0.5);bottom:0;right:0;color:#fff;font-size:16px;z-index:1000;padding:5px}amp-accordion{display:block!important}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}.i-amphtml-accordion-content,.i-amphtml-accordion-header,amp-accordion,amp-accordion>section{margin:0}.i-amphtml-accordion-header{cursor:pointer;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}amp-accordion>section>:last-child{display:none!important}amp-accordion>section[expanded]>:last-child{display:block!important}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-story-page,amp-story[standalone]{display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#fff!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .i-amphtml-loader{display:none!important}[amp-fx^=fly-in]{visibility:hidden}amp-addthis[data-widget-type=floating]{position:fixed!important;width:100%!important;height:50px;bottom:0}
 >>   ^~~~~~~~~
-transformed_feature_tests/transformed_but_not_identified_transformed.html:24:2 The attribute 'amp-runtime' may not appear in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+transformed_feature_tests/transformed_but_not_identified_transformed.html:24:2 The attribute 'amp-runtime' may not appear in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 >>   ^~~~~~~~~
-transformed_feature_tests/transformed_but_not_identified_transformed.html:24:2 The attribute 'i-amphtml-version' may not appear in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets)
+transformed_feature_tests/transformed_but_not_identified_transformed.html:24:2 The attribute 'i-amphtml-version' may not appear in tag 'style amp-custom'. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets)
 |  /*# sourceURL=/css/amp.css*/</style>
 |    <meta name="viewport" content="width=device-width">
 |    <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -39,9 +39,9 @@ transformed_feature_tests/transformed_but_not_identified_transformed.html:24:2 T
 |  <body>
 |    <amp-img class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" height=2911 i-amphtml-layout=responsive layout=responsive src=https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg srcset="https://example-com.cdn.ampproject.org/i/s/example.com/lemur-wide.jpg 640w, https://example-com.cdn.ampproject.org/i/s/example.com/lemur-narrow.jpg 320w" width=1698>
 >>   ^~~~~~~~~
-transformed_feature_tests/transformed_but_not_identified_transformed.html:31:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-responsive i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/components/amp-img)
+transformed_feature_tests/transformed_but_not_identified_transformed.html:31:2 The attribute 'class' in tag 'amp-img' is set to the invalid value 'i-amphtml-layout-responsive i-amphtml-layout-size-defined'. (see https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/#disallowed-styles)
 >>   ^~~~~~~~~
-transformed_feature_tests/transformed_but_not_identified_transformed.html:31:2 The attribute 'i-amphtml-layout' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img)
+transformed_feature_tests/transformed_but_not_identified_transformed.html:31:2 The attribute 'i-amphtml-layout' may not appear in tag 'amp-img'. (see https://amp.dev/documentation/components/amp-img/)
 |      <i-amphtml-sizer style=display:block;padding-top:171.4370%;></i-amphtml-sizer>
 >>     ^~~~~~~~~
 transformed_feature_tests/transformed_but_not_identified_transformed.html:32:4 The tag 'i-amphtml-sizer' is disallowed except in specific forms.
@@ -49,8 +49,8 @@ transformed_feature_tests/transformed_but_not_identified_transformed.html:32:4 T
 |  </body>
 |  </html>
 >>       ^~~~~~~~~
-transformed_feature_tests/transformed_but_not_identified_transformed.html:35:6 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+transformed_feature_tests/transformed_but_not_identified_transformed.html:35:6 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >>       ^~~~~~~~~
-transformed_feature_tests/transformed_but_not_identified_transformed.html:35:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+transformed_feature_tests/transformed_but_not_identified_transformed.html:35:6 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
 >>       ^~~~~~~~~
-transformed_feature_tests/transformed_but_not_identified_transformed.html:35:6 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites)
+transformed_feature_tests/transformed_but_not_identified_transformed.html:35:6 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites)
diff --git a/validator/validator-css.protoascii b/validator/validator-css.protoascii
index ce95210220462..23a6b3addb733 100644
--- a/validator/validator-css.protoascii
+++ b/validator/validator-css.protoascii
@@ -29,6 +29,7 @@ declaration_list {
   declaration: { name: "animation-name" }
   declaration: { name: "animation-play-state" }
   declaration: { name: "animation-timing-function" }
+  declaration: { name: "aspect-ratio" }
   declaration: { name: "backface-visibility" }
   declaration: { name: "background" }
   declaration: { name: "background-attachment" }
@@ -250,7 +251,10 @@ declaration_list {
   declaration: { name: "word-spacing" }
   declaration: { name: "word-wrap" }
   declaration: { name: "writing-mode" }
-  declaration: { name: "z-index" }
+  declaration: {
+     name: "z-index"
+     value_regex_casei: "auto|initial|inherit|[-+]?[0-9]+"
+  }
 }
 
 declaration_list {
@@ -297,8 +301,261 @@ declaration_list {
 }
 
 declaration_list {
-  name: "AMP_ONLY_DECLARATIONS"
-  declaration: { name: "clip-path" }
+  name: "EMAIL_SPECIFIC_DECLARATIONS"
+  # AMP4EMAIL supported properties:
+  # https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css/#supported-css-properties
+  declaration: { name: "-moz-appearance" }
+  declaration: { name: "-webkit-appearance" }
+  declaration: { name: "-webkit-tap-highlight-color" }
+  declaration: { name: "align-content" }
+  declaration: { name: "align-items" }
+  declaration: { name: "align-self" }
+  declaration: { name: "appearance" }
+  declaration: { name: "aspect-ratio" }
+  declaration: { name: "azimuth" }
+  declaration: { name: "background" }
+  declaration: { name: "background-attachment" }
+  declaration: { name: "background-blend-mode" }
+  declaration: { name: "background-clip" }
+  declaration: { name: "background-color" }
+  declaration: { name: "background-image" }
+  declaration: { name: "background-origin" }
+  declaration: { name: "background-position" }
+  declaration: { name: "background-repeat" }
+  declaration: { name: "background-size" }
+  declaration: { name: "border" }
+  declaration: { name: "border-bottom" }
+  declaration: { name: "border-bottom-color" }
+  declaration: { name: "border-bottom-left-radius" }
+  declaration: { name: "border-bottom-right-radius" }
+  declaration: { name: "border-bottom-style" }
+  declaration: { name: "border-bottom-width" }
+  declaration: { name: "border-collapse" }
+  declaration: { name: "border-color" }
+  declaration: { name: "border-left" }
+  declaration: { name: "border-left-color" }
+  declaration: { name: "border-left-style" }
+  declaration: { name: "border-left-width" }
+  declaration: { name: "border-radius" }
+  declaration: { name: "border-right" }
+  declaration: { name: "border-right-color" }
+  declaration: { name: "border-right-style" }
+  declaration: { name: "border-right-width" }
+  declaration: { name: "border-spacing" }
+  declaration: { name: "border-style" }
+  declaration: { name: "border-top" }
+  declaration: { name: "border-top-color" }
+  declaration: { name: "border-top-left-radius" }
+  declaration: { name: "border-top-right-radius" }
+  declaration: { name: "border-top-style" }
+  declaration: { name: "border-top-width" }
+  declaration: { name: "border-width" }
+  declaration: { name: "bottom" }
+  declaration: { name: "box-shadow" }
+  declaration: { name: "box-sizing" }
+  declaration: { name: "break-after" }
+  declaration: { name: "break-before" }
+  declaration: { name: "break-inside" }
+  declaration: { name: "caption-side" }
+  declaration: { name: "caret-color" }
+  declaration: { name: "clear" }
+  declaration: { name: "color" }
+  declaration: { name: "color-adjust" }
+  declaration: { name: "column-count" }
+  declaration: { name: "column-fill" }
+  declaration: { name: "column-gap" }
+  declaration: { name: "column-rule" }
+  declaration: { name: "column-rule-color" }
+  declaration: { name: "column-rule-style" }
+  declaration: { name: "column-rule-width" }
+  declaration: { name: "column-span" }
+  declaration: { name: "column-width" }
+  declaration: { name: "columns" }
+  declaration: { name: "counter-increment" }
+  declaration: { name: "counter-reset" }
+  declaration: {
+    name: "cursor"
+    value_casei: "initial"
+    value_casei: "pointer"
+  }
+  declaration: { name: "direction" }
+  declaration: { name: "display" }
+  declaration: { name: "elevation" }
+  declaration: { name: "empty-cells" }
+  declaration: {
+    name: "filter"
+    value_regex_casei: "^ *((blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|opacity|saturate|sepia)\\(([^() ]*|(rgb|rgba|hsl|hsla)\\([^()]*\\))( +([^() ]*|(rgb|rgba|hsl|hsla)\\([^()]*\\)))*\\) *)*$"
+  }
+  declaration: { name: "flex" }
+  declaration: { name: "flex-basis" }
+  declaration: { name: "flex-direction" }
+  declaration: { name: "flex-flow" }
+  declaration: { name: "flex-grow" }
+  declaration: { name: "flex-shrink" }
+  declaration: { name: "flex-wrap" }
+  declaration: { name: "float" }
+  declaration: { name: "font" }
+  declaration: { name: "font-family" }
+  declaration: { name: "font-feature-settings" }
+  declaration: { name: "font-kerning" }
+  declaration: { name: "font-size" }
+  declaration: { name: "font-size-adjust" }
+  declaration: { name: "font-stretch" }
+  declaration: { name: "font-style" }
+  declaration: { name: "font-synthesis" }
+  declaration: { name: "font-variant" }
+  declaration: { name: "font-variant-alternates" }
+  declaration: { name: "font-variant-caps" }
+  declaration: { name: "font-variant-east-asian" }
+  declaration: { name: "font-variant-ligatures" }
+  declaration: { name: "font-variant-numeric" }
+  declaration: { name: "font-variation-settings" }
+  declaration: { name: "font-weight" }
+  declaration: { name: "gap" }
+  declaration: { name: "grid" }
+  declaration: { name: "grid-area" }
+  declaration: { name: "grid-auto-columns" }
+  declaration: { name: "grid-auto-flow" }
+  declaration: { name: "grid-auto-rows" }
+  declaration: { name: "grid-column" }
+  declaration: { name: "grid-column-end" }
+  declaration: { name: "grid-column-start" }
+  declaration: { name: "grid-row" }
+  declaration: { name: "grid-row-end" }
+  declaration: { name: "grid-row-start" }
+  declaration: { name: "grid-template" }
+  declaration: { name: "grid-template-areas" }
+  declaration: { name: "grid-template-columns" }
+  declaration: { name: "grid-template-rows" }
+  declaration: { name: "height" }
+  declaration: { name: "hyphens" }
+  declaration: { name: "image-orientation" }
+  declaration: { name: "image-resolution" }
+  declaration: { name: "inline-size" }
+  declaration: { name: "isolation" }
+  declaration: { name: "justify-content" }
+  declaration: { name: "justify-items" }
+  declaration: { name: "justify-self" }
+  declaration: { name: "left" }
+  declaration: { name: "letter-spacing" }
+  declaration: { name: "line-break" }
+  declaration: { name: "line-height" }
+  declaration: { name: "list-style" }
+  declaration: { name: "list-style-position" }
+  declaration: { name: "list-style-type" }
+  declaration: { name: "margin" }
+  declaration: { name: "margin-bottom" }
+  declaration: { name: "margin-left" }
+  declaration: { name: "margin-right" }
+  declaration: { name: "margin-top" }
+  declaration: { name: "max-height" }
+  declaration: { name: "max-width" }
+  declaration: { name: "min-height" }
+  declaration: { name: "min-width" }
+  declaration: { name: "mix-blend-mode" }
+  declaration: { name: "object-fit" }
+  declaration: { name: "object-position" }
+  declaration: { name: "offset-distance" }
+  declaration: { name: "opacity" }
+  declaration: { name: "order" }
+  declaration: { name: "outline" }
+  declaration: { name: "outline-color" }
+  declaration: { name: "outline-offset" }
+  declaration: { name: "outline-style" }
+  declaration: { name: "outline-width" }
+  declaration: { name: "overflow" }
+  declaration: { name: "overflow-wrap" }
+  declaration: { name: "overflow-x" }
+  declaration: { name: "overflow-y" }
+  declaration: { name: "padding" }
+  declaration: { name: "padding-bottom" }
+  declaration: { name: "padding-left" }
+  declaration: { name: "padding-right" }
+  declaration: { name: "padding-top" }
+  declaration: { name: "pause" }
+  declaration: { name: "pause-after" }
+  declaration: { name: "pause-before" }
+  declaration: { name: "perspective" }
+  declaration: { name: "perspective-origin" }
+  declaration: { name: "pitch" }
+  declaration: { name: "pitch-range" }
+  declaration: { name: "place-items" }
+  # CSS property `position` with values `fixed` and `sticky` are not allowed.
+  # From https://www.w3schools.com/cssref/pr_class_position.asp
+  declaration: {
+    name: "position"
+    value_casei: "absolute"
+    value_casei: "inherit"
+    value_casei: "initial"
+    value_casei: "relative"
+    value_casei: "static"
+  }
+  declaration: { name: "quotes" }
+  declaration: { name: "resize" }
+  declaration: { name: "richness" }
+  declaration: { name: "right" }
+  declaration: { name: "row-gap" }
+  declaration: { name: "speak" }
+  declaration: { name: "speak-header" }
+  declaration: { name: "speak-numeral" }
+  declaration: { name: "speak-punctuation" }
+  declaration: { name: "speech-rate" }
+  declaration: { name: "stress" }
+  declaration: { name: "table-layout" }
+  declaration: { name: "text-align" }
+  declaration: { name: "text-align-last" }
+  declaration: { name: "text-combine-upright" }
+  declaration: { name: "text-decoration" }
+  declaration: { name: "text-decoration-color" }
+  declaration: { name: "text-decoration-line" }
+  declaration: { name: "text-decoration-skip" }
+  declaration: { name: "text-decoration-style" }
+  declaration: { name: "text-emphasis" }
+  declaration: { name: "text-emphasis-color" }
+  declaration: { name: "text-emphasis-position" }
+  declaration: { name: "text-emphasis-style" }
+  declaration: { name: "text-indent" }
+  declaration: { name: "text-justify" }
+  declaration: { name: "text-orientation" }
+  declaration: { name: "text-overflow" }
+  declaration: { name: "text-shadow" }
+  declaration: { name: "text-transform" }
+  declaration: { name: "text-underline-position" }
+  declaration: { name: "top" }
+  declaration: { name: "transform" }
+  declaration: { name: "transform-box" }
+  declaration: { name: "transform-origin" }
+  declaration: { name: "transform-style" }
+  declaration: {
+    name: "transition"
+    value_regex_casei: "^ *((initial|unset)|(((none|offset-distance|opacity|transform|visibility)( *(|-|\\+)([0-9]+|[0-9]*\\.[0-9]+)(e(|-|\\+)?[0-9]+)?(s|ms)( *(linear|(ease|ease-in|ease-out|ease-in-out|cubic-bezier\\( *(|-|\\+)([0-9]+|[0-9]*\\.[0-9]+)(e(|-|\\+)?[0-9]+)?(, *(|-|\\+)([0-9]+|[0-9]*\\.[0-9]+)(e(|-|\\+)?[0-9]+)?){3} *\\))|(step-start|step-end|steps\\( *(|-|\\+)[0-9]+(, *(jump-start|jump-end|jump-none|jump-both|start|end))? *\\)))( *(|-|\\+)([0-9]+|[0-9]*\\.[0-9]+)(e(|-|\\+)?[0-9]+)?(s|ms))?)?)?)(, *((none|offset-distance|opacity|transform|visibility)( *(|-|\\+)([0-9]+|[0-9]*\\.[0-9]+)(e(|-|\\+)?[0-9]+)?(s|ms)( *(linear|(ease|ease-in|ease-out|ease-in-out|cubic-bezier\\( *(|-|\\+)([0-9]+|[0-9]*\\.[0-9]+)(e(|-|\\+)?[0-9]+)?(, *(|-|\\+)([0-9]+|[0-9]*\\.[0-9]+)(e(|-|\\+)?[0-9]+)?){3} *\\))|(step-start|step-end|steps\\( *(|-|\\+)[0-9]+(, *(jump-start|jump-end|jump-none|jump-both|start|end))? *\\)))( *(|-|\\+)([0-9]+|[0-9]*\\.[0-9]+)(e(|-|\\+)?[0-9]+)?(s|ms))?)?)?))*)) *$"
+  }
+  declaration: { name: "transition-delay" }
+  declaration: { name: "transition-duration" }
+  declaration: {
+    name: "transition-property"
+    value_regex_casei: "^ *(initial|unset|(none|offset-distance|opacity|transform|visibility)(, *(none|offset-distance|opacity|transform|visibility))*) *$"
+  }
+  declaration: { name: "transition-timing-function" }
+  declaration: { name: "unicode-bidi" }
+  declaration: { name: "vertical-align" }
+  declaration: {
+    name: "visibility"
+    value_casei: "hidden"
+    value_casei: "initial"
+    value_casei: "visible"
+  }
+  declaration: { name: "voice-family" }
+  declaration: { name: "white-space" }
+  declaration: { name: "width" }
+  declaration: { name: "word-break" }
+  declaration: { name: "word-spacing" }
+  declaration: { name: "word-wrap" }
+  declaration: { name: "writing-mode" }
+  declaration: {
+    name: "z-index"
+    value_regex_casei: "([-+]?0)|([-+]?100)|([-+]?[1-9][0-9]?)"
+  }
 }
 
 # DocCSS rules for AMP for non-transformed documents.
@@ -306,19 +563,15 @@ css {
   html_format: AMP
   disabled_by: "transformed"
   spec_url:
-  "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets"
+  "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets"
 
   max_bytes: 75000
   max_bytes_per_inline_style: 1000
   max_bytes_spec_url:
-  "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size"
+  "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size"
   url_bytes_included: true
 
-  # This is a legacy requirement. Style tags support all declarations while
-  # style attributes limit the allowed declarations. Support for style
-  # attributes was added at a later date than style tags, and more validation
-  # requirements were able to be enforced at that time.
-  allow_all_declaration_in_style_tag: true
+  allow_all_declaration_in_style: true
   allow_important: false
   image_url_spec: {
     protocol: "https"
@@ -333,9 +586,6 @@ css {
     allow_empty: true
   }
   expand_vendor_prefixes: true
-  declaration_list: "BASIC_DECLARATIONS"
-  declaration_list_svg: "SVG_BASIC_DECLARATIONS"
-  declaration_list: "AMP_ONLY_DECLARATIONS"
 }
 
 # DocCss Rules for AMP transformed documents.
@@ -344,15 +594,15 @@ css {
 css {
   html_format: AMP
   enabled_by: "transformed"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets"
 
-  max_bytes: 75000
-  max_bytes_per_inline_style: 1000
+  max_bytes: 112500
+  max_bytes_per_inline_style: 1500
   max_bytes_spec_url:
-  "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size"
+  "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size"
   url_bytes_included: false
 
-  allow_all_declaration_in_style_tag: true
+  allow_all_declaration_in_style: true
   allow_important: false
   image_url_spec: {
     protocol: "https"
@@ -367,57 +617,20 @@ css {
     allow_empty: true
   }
   expand_vendor_prefixes: true
-  declaration_list: "BASIC_DECLARATIONS"
-  declaration_list_svg: "SVG_BASIC_DECLARATIONS"
-  declaration_list: "AMP_ONLY_DECLARATIONS"
-}
-
-# DocCss rules for ACTIONS
-css {
-  html_format: ACTIONS
-  spec_url:
-  "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets"
-
-  # Due to a bug, we allowed unlimited doc-level bytes for CSS in ACTIONS
-  # formats. To avoid breaking existing docs, this is temporarily allowed until
-  # we determine the next course of action.
-  # max_bytes: 75000
-  # max_bytes_per_inline_style: 1000
-  max_bytes_spec_url:
-  "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size"
-  url_bytes_included: true
-
-  allow_all_declaration_in_style_tag: true
-  allow_important: false
-  image_url_spec: {
-    protocol: "https"
-    protocol: "http"
-    protocol: "data"
-    allow_empty: true
-  }
-  font_url_spec: {
-    protocol: "https"
-    protocol: "http"
-    protocol: "data"
-    allow_empty: true
-  }
-  expand_vendor_prefixes: true
-  declaration_list: "BASIC_DECLARATIONS"
-  declaration_list_svg: "SVG_BASIC_DECLARATIONS"
 }
 
 # DocCss rules for AMP4ADS.
 css {
   html_format: AMP4ADS
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec#css"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec/#css"
 
   # AMP4ADS currently allows unlimited inline style, and only limits style in
   # the <style amp-custom> tag in the document head.
   # max_bytes: 20000
   # max_bytes_per_inline_style: 1000
-  max_bytes_spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec#css"
+  max_bytes_spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec/#css"
 
-  allow_all_declaration_in_style_tag: true
+  allow_all_declaration_in_style: true
   allow_important: false
   image_url_spec: {
     protocol: "https"
@@ -432,14 +645,13 @@ css {
     allow_empty: true
   }
   expand_vendor_prefixes: true
-  declaration_list: "BASIC_DECLARATIONS"
-  declaration_list_svg: "SVG_BASIC_DECLARATIONS"
 }
 
-# DocCss rules for AMP4EMAIL
+# DocCss rules for AMP4EMAIL, not data-css-strict
 css {
   html_format: AMP4EMAIL
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets"
+  disabled_by: "data-css-strict"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css"
 
   # Due to a bug, we allowed unlimited doc-level bytes for CSS in AMP4EMAIL
   # formats. To avoid breaking emails, this is temporarily set to a warning but
@@ -449,14 +661,10 @@ css {
   max_bytes_per_inline_style: 1000
 
   max_bytes_spec_url:
-  "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size"
+  "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size"
   url_bytes_included: true
 
-  # This is a legacy requirement. Style tags support all declarations while
-  # style attributes limit the allowed declarations. Support for style
-  # attributes was added at a later date than style tags, and more validation
-  # requirements were able to be enforced at that time.
-  allow_all_declaration_in_style_tag: true
+  allow_all_declaration_in_style: true
   allow_important: false
   image_url_spec: {
     protocol: "https"
@@ -466,6 +674,30 @@ css {
   declaration_list_svg: "SVG_BASIC_DECLARATIONS"
 }
 
+# DocCss rules for AMP4EMAIL, data-css-strict
+css {
+  html_format: AMP4EMAIL
+  enabled_by: "data-css-strict"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css"
+
+  max_bytes_is_warning: false
+  max_bytes: 75000
+  max_bytes_per_inline_style: 1000
+
+  # TODO(b/162314127): add maximum size documentation to the email spec
+  max_bytes_spec_url:
+  "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size"
+  url_bytes_included: true
+
+  allow_all_declaration_in_style: false
+  allow_important: false
+  image_url_spec: {
+    protocol: "https"
+  }
+  expand_vendor_prefixes: false
+  declaration_list: "EMAIL_SPECIFIC_DECLARATIONS"
+}
+
 # This variant of <style amp-custom> is designed to help developers see how
 # close they are to the byte limit, even if the page is passing. By changing
 # the attribute to <style amp-custom-length-check>, this tagspec will be used
@@ -477,9 +709,9 @@ tags: {  # <style amp-custom-length-check>, ALL FORMATS
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "STYLE"
   spec_name: "style amp-custom-length-check"
+  descriptive_name: "style amp-custom-length-check"
   unique: true
   mandatory_parent: "HEAD"
   attrs: {
@@ -499,11 +731,11 @@ tags: {  # <style amp-custom-length-check>, ALL FORMATS
   }
 }
 
-tags: {  # <style amp-custom>, [AMP, ACTIONS]
+tags: {  # <style amp-custom>, [AMP]
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "STYLE"
   spec_name: "style amp-custom"
+  descriptive_name: "style amp-custom"
   named_id: STYLE_AMP_CUSTOM
   unique: true
   mandatory_parent: "HEAD"
@@ -526,14 +758,92 @@ tags: {  # <style amp-custom>, [AMP, ACTIONS]
     doc_css_bytes: true
     max_bytes: 75000
     max_bytes_spec_url:
-    "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size"
+    "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size"
 
     css_spec: {
       at_rule_spec: { name: 'font-face' }
       at_rule_spec: { name: 'keyframes' }
-      at_rule_spec: { name: 'media' }
+      at_rule_spec: {
+         name: 'media'
+         media_query_spec: {
+           issues_as_error: false
+           type: 'all'
+           type: 'print'
+           type: 'screen'
+           type: 'speech'
+           type: 'tty'
+           type: 'tv'
+           type: 'projection'
+           type: 'handheld'
+           type: 'braille'
+           type: 'embossesd'
+           type: 'aural'
+           feature: 'any-hover'
+           feature: 'any-pointer'
+           feature: 'aspect-ratio'
+           feature: 'color'
+           feature: 'color-gamut'
+           feature: 'color-index'
+           feature: 'device-aspect-ratio'
+           feature: 'device-height'
+           feature: 'device-width'
+           feature: 'display-mode'
+           feature: 'forced-colors'
+           feature: 'grid'
+           feature: 'height'
+           feature: 'hover'
+           feature: 'inverted-colors'
+           feature: 'light-level'
+           feature: 'max-aspect-ratio'
+           feature: 'max-color-index'
+           feature: 'max-device-aspect-ratio'
+           feature: 'max-device-height'
+           feature: 'max-device-width'
+           feature: 'max-height'
+           feature: 'max-resolution'
+           feature: 'max-width'
+           feature: 'min-aspect-ratio'
+           feature: 'min-color-index'
+           feature: 'min-device-aspect-ratio'
+           feature: 'min-device-height'
+           feature: 'min-device-width'
+           feature: 'min-height'
+           feature: 'min-resolution'
+           feature: 'min-width'
+           feature: 'monochrome'
+           feature: 'orientation'
+           feature: 'overflow-block'
+           feature: 'overflow-inline'
+           feature: 'pointer'
+           feature: 'prefers-color-scheme'
+           feature: 'prefers-contrast'
+           feature: 'prefers-reduced-motion'
+           feature: 'prefers-reduced-transparency'
+           feature: 'resolution'
+           feature: 'scan'
+           feature: 'scripting'
+           feature: 'transform-3d'
+           feature: 'update'
+           feature: 'width'
+           # Other non-standard media types and features commonly seen:
+           type: '-sass-debug-info'
+           type: 'device-pixel-ratio'
+           type: 'device-pixel-ratio2'
+           feature: '--mod'
+           feature: '--md'
+           feature: 'device-pixel-ratio'
+           feature: 'device-pixel-ratio2'
+           feature: 'high-contrast'
+           feature: 'max-device-pixel-ratio'
+           feature: 'min-device-pixel-ratio'
+           feature: 'max-device-pixel-ratio2'
+           feature: 'min-device-pixel-ratio2'
+         }
+      }
       at_rule_spec: { name: 'page' }
       at_rule_spec: { name: 'supports' }
+      # https://github.com/ampproject/amphtml/issues/26406
+      at_rule_spec: { name: '-moz-document' }
     }
     disallowed_cdata_regex: {
       regex: "<!--"
@@ -546,13 +856,14 @@ tags: {  # <style amp-custom>, [AMP, ACTIONS]
       error_message: "CSS i-amphtml- name prefix"
     }
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets"
 }
 
 tags: {  # <style amp-custom>, AMP4ADS
   html_format: AMP4ADS
   tag_name: "STYLE"
   spec_name: "style amp-custom (AMP4ADS)"
+  descriptive_name: "style amp-custom"
   unique: true
   mandatory_parent: "HEAD"
   attr_lists: "nonce-attr"
@@ -574,7 +885,7 @@ tags: {  # <style amp-custom>, AMP4ADS
     doc_css_bytes: true
     max_bytes: 20000  # Smaller than AMP, which is 75,000.
     max_bytes_spec_url:
-    "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size"
+    "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size"
     css_spec: {
       at_rule_spec: { name: 'font-face' }
       at_rule_spec: { name: 'keyframes' }
@@ -607,7 +918,7 @@ tags: {  # <style amp-custom>, AMP4ADS
       error_message: "CSS i-amphtml- name prefix"
     }
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec#css"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec/#css"
 }
 
 tags: {  # <style amp-custom>, AMP4EMAIL, not data-css-strict
@@ -615,6 +926,7 @@ tags: {  # <style amp-custom>, AMP4EMAIL, not data-css-strict
   disabled_by: "data-css-strict"
   tag_name: "STYLE"
   spec_name: "style amp-custom (AMP4EMAIL)"
+  descriptive_name: "style amp-custom"
   unique: true
   mandatory_parent: "HEAD"
   attrs: {
@@ -631,12 +943,11 @@ tags: {  # <style amp-custom>, AMP4EMAIL, not data-css-strict
     name: "type"
     value_casei: "text/css"
   }
-  # TODO(b/68756045): Allowlist CSS properties allowed in Dynamic Mail.
   cdata: {
     doc_css_bytes: true
     max_bytes: 75000
     max_bytes_spec_url:
-    "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size"
+    "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size"
 
     css_spec: {
       at_rule_spec: {
@@ -646,6 +957,13 @@ tags: {  # <style amp-custom>, AMP4EMAIL, not data-css-strict
           type: 'all'
           type: 'screen'
           feature: 'device-width'
+          feature: 'hover'
+          feature: 'max-device-width'
+          feature: 'max-resolution'
+          feature: 'max-width'
+          feature: 'min-device-width'
+          feature: 'min-resolution'
+          feature: 'min-width'
           feature: 'orientation'
           feature: 'pointer'
           feature: 'resolution'
@@ -665,7 +983,7 @@ tags: {  # <style amp-custom>, AMP4EMAIL, not data-css-strict
       error_message: "CSS i-amphtml- name prefix"
     }
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css"
 }
 
 tags: {  # <style amp-custom>, AMP4EMAIL, data-css-strict
@@ -673,6 +991,7 @@ tags: {  # <style amp-custom>, AMP4EMAIL, data-css-strict
   enabled_by: "data-css-strict"
   tag_name: "STYLE"
   spec_name: "style amp-custom (css-strict)"
+  descriptive_name: "style amp-custom"
   unique: true
   mandatory_parent: "HEAD"
   attrs: {
@@ -689,12 +1008,11 @@ tags: {  # <style amp-custom>, AMP4EMAIL, data-css-strict
     name: "type"
     value_casei: "text/css"
   }
-  # TODO(b/68756045): Allowlist CSS properties allowed in Dynamic Mail.
   cdata: {
     doc_css_bytes: true
     max_bytes: 75000
     max_bytes_spec_url:
-    "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#maximum-size"
+    "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size"
 
     css_spec: {
       at_rule_spec: {
@@ -704,15 +1022,20 @@ tags: {  # <style amp-custom>, AMP4EMAIL, data-css-strict
           type: 'all'
           type: 'screen'
           feature: 'device-width'
+          feature: 'hover'
+          feature: 'max-device-width'
+          feature: 'max-resolution'
+          feature: 'max-width'
+          feature: 'min-device-width'
+          feature: 'min-resolution'
+          feature: 'min-width'
           feature: 'orientation'
           feature: 'pointer'
           feature: 'resolution'
           feature: 'width'
         }
       }
-      at_rule_spec: { name: 'page' }
       selector_spec: {
-        attribute_name: "foo"
         attribute_name: "active"
         attribute_name: "alt"
         attribute_name: "autocomplete"
@@ -751,6 +1074,35 @@ tags: {  # <style amp-custom>, AMP4EMAIL, data-css-strict
         attribute_name: "type"
         attribute_name: "value"
         attribute_name: "width"
+        pseudo_class: "active"
+        pseudo_class: "checked"
+        pseudo_class: "default"
+        pseudo_class: "disabled"
+        pseudo_class: "empty"
+        pseudo_class: "enabled"
+        pseudo_class: "first-child"
+        pseudo_class: "first-of-type"
+        pseudo_class: "focus"
+        pseudo_class: "focus-within"
+        pseudo_class: "hover"
+        pseudo_class: "in-range"
+        pseudo_class: "indeterminate"
+        pseudo_class: "invalid"
+        pseudo_class: "last-child"
+        pseudo_class: "last-of-type"
+        pseudo_class: "not"
+        pseudo_class: "nth-child"
+        pseudo_class: "nth-last-child"
+        pseudo_class: "nth-last-of-type"
+        pseudo_class: "nth-of-type"
+        pseudo_class: "only-child"
+        pseudo_class: "only-of-type"
+        pseudo_class: "optional"
+        pseudo_class: "out-of-range"
+        pseudo_class: "read-only"
+        pseudo_class: "read-write"
+        pseudo_class: "required"
+        pseudo_class: "valid"
       }
     }
     disallowed_cdata_regex: {
@@ -764,15 +1116,15 @@ tags: {  # <style amp-custom>, AMP4EMAIL, data-css-strict
       error_message: "CSS i-amphtml- name prefix"
     }
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-css"
 }
 
-tags: {  # `<style amp-boilerplate>`, [AMP, ACTIONS]
+tags: {  # `<style amp-boilerplate>`, [AMP]
   html_format: AMP
-  html_format: ACTIONS
   disabled_by: "transformed"
   tag_name: "STYLE"
   spec_name: "head > style[amp-boilerplate]"
+  descriptive_name: "head > style[amp-boilerplate]"
   mandatory: true
   unique: true
   mandatory_parent: "HEAD"
@@ -789,17 +1141,18 @@ tags: {  # `<style amp-boilerplate>`, [AMP, ACTIONS]
     # is required in the boilerplate. It was made by replacing ' ' with \\s+.
     cdata_regex: "\\s*body\\s*{\\s*-webkit-animation:\\s*-amp-start\\s+8s\\s+steps\\(1,\\s*end\\)\\s+0s\\s+1\\s+normal\\s+both;\\s*-moz-animation:\\s*-amp-start\\s+8s\\s+steps\\s*\\(1\\s*,\\s*end\\s*\\)\\s+0s\\s+1\\s+normal\\s+both;\\s*-ms-animation:\\s*-amp-start\\s+8s\\s+steps\\s*\\(1\\s*,\\s*end\\s*\\)\\s+0s\\s+1\\s+normal\\s+both;\\s*animation:\\s*-amp-start\\s+8s\\s+steps\\(1,\\s*end\\)\\s+0s\\s+1\\s+normal\\s+both;?\\s*}\\s*@-webkit-keyframes\\s+-amp-start\\s*{\\s*from\\s*{\\s*visibility:\\s*hidden;?\\s*}\\s*to\\s*{\\s*visibility:\\s*visible;?\\s*}\\s*}\\s*@-moz-keyframes\\s+-amp-start\\s*{\\s*from\\s*{\\s*visibility:\\s*hidden;?\\s*}\\s*to\\s*{\\s*visibility:\\s*visible;?\\s*}\\s*}\\s*@-ms-keyframes\\s+-amp-start\\s*{\\s*from\\s*{\\s*visibility:\\s*hidden;?\\s*}\\s*to\\s*{\\s*visibility:\\s*visible;?\\s*}\\s*}\\s*@-o-keyframes\\s+-amp-start\\s*{\\s*from\\s*{\\s*visibility:\\s*hidden;?\\s*}\\s*to\\s*{\\s*visibility:\\s*visible;?\\s*}\\s*}\\s*@keyframes\\s+-amp-start\\s*{\\s*from\\s*{\\s*visibility:\\s*hidden;?\\s*}\\s*to\\s*{\\s*visibility:\\s*visible;?\\s*}\\s*}\\s*"
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites"
 }
 
-tags: {  # `<style amp-boilerplate>`, transformed [AMP, ACTIONS]
+tags: {  # `<style amp-boilerplate>`, transformed [AMP]
   html_format: AMP
-  html_format: ACTIONS
   enabled_by: "transformed"
   tag_name: "STYLE"
   spec_name: "head > style[amp-boilerplate] (transformed)"
+  descriptive_name: "head > style[amp-boilerplate]"
   unique: true
   mandatory_parent: "HEAD"
+  attr_lists: "nonce-attr"
   attrs: {
     name: "amp-boilerplate"
     mandatory: true
@@ -812,13 +1165,14 @@ tags: {  # `<style amp-boilerplate>`, transformed [AMP, ACTIONS]
     # is required in the boilerplate. It was made by replacing ' ' with \\s+.
     cdata_regex: "\\s*body\\s*{\\s*-webkit-animation:\\s*-amp-start\\s+8s\\s+steps\\(1,\\s*end\\)\\s+0s\\s+1\\s+normal\\s+both;\\s*-moz-animation:\\s*-amp-start\\s+8s\\s+steps\\s*\\(1\\s*,\\s*end\\s*\\)\\s+0s\\s+1\\s+normal\\s+both;\\s*-ms-animation:\\s*-amp-start\\s+8s\\s+steps\\s*\\(1\\s*,\\s*end\\s*\\)\\s+0s\\s+1\\s+normal\\s+both;\\s*animation:\\s*-amp-start\\s+8s\\s+steps\\(1,\\s*end\\)\\s+0s\\s+1\\s+normal\\s+both;?\\s*}\\s*@-webkit-keyframes\\s+-amp-start\\s*{\\s*from\\s*{\\s*visibility:\\s*hidden;?\\s*}\\s*to\\s*{\\s*visibility:\\s*visible;?\\s*}\\s*}\\s*@-moz-keyframes\\s+-amp-start\\s*{\\s*from\\s*{\\s*visibility:\\s*hidden;?\\s*}\\s*to\\s*{\\s*visibility:\\s*visible;?\\s*}\\s*}\\s*@-ms-keyframes\\s+-amp-start\\s*{\\s*from\\s*{\\s*visibility:\\s*hidden;?\\s*}\\s*to\\s*{\\s*visibility:\\s*visible;?\\s*}\\s*}\\s*@-o-keyframes\\s+-amp-start\\s*{\\s*from\\s*{\\s*visibility:\\s*hidden;?\\s*}\\s*to\\s*{\\s*visibility:\\s*visible;?\\s*}\\s*}\\s*@keyframes\\s+-amp-start\\s*{\\s*from\\s*{\\s*visibility:\\s*hidden;?\\s*}\\s*to\\s*{\\s*visibility:\\s*visible;?\\s*}\\s*}\\s*"
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites"
 }
 
 tags: {  # `<style amp4ads-boilerplate>`, AMP4ADS
   html_format: AMP4ADS
   tag_name: "STYLE"
   spec_name: "head > style[amp4ads-boilerplate]"
+  descriptive_name: "head > style[amp4ads-boilerplate]"
   mandatory: true
   unique: true
   mandatory_parent: "HEAD"
@@ -836,13 +1190,14 @@ tags: {  # `<style amp4ads-boilerplate>`, AMP4ADS
     # pretty printing tools some latitude.
     cdata_regex: "\\s*body\\s*{\\s*visibility:\\s*hidden;?\\s*}\\s*"
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec?format=ads#boilerplate"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/a4a_spec/?format=ads#boilerplate"
 }
 
 tags: {  # `<style amp4email-boilerplate>`, AMP4EMAIL
   html_format: AMP4EMAIL
   tag_name: "STYLE"
   spec_name: "head > style[amp4email-boilerplate]"
+  descriptive_name: "head > style[amp4email-boilerplate]"
   mandatory: true
   unique: true
   mandatory_parent: "HEAD"
@@ -858,15 +1213,15 @@ tags: {  # `<style amp4email-boilerplate>`, AMP4EMAIL
     # is required in the boilerplate. It was made by replacing ' ' with \\s+.
     cdata_regex: "\\s*body\\s*{\\s*visibility:\\s*hidden;?\\s*}\\s*"
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/amp-email-format?format=email#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-format/?format=email#required-markup"
 }
 
-tags: {  # `<style amp-boilerplate>`, [AMP, ACTIONS]
+tags: {  # `<style amp-boilerplate>`, [AMP]
   html_format: AMP
-  html_format: ACTIONS
   disabled_by: "transformed"
   tag_name: "STYLE"
   spec_name: "noscript > style[amp-boilerplate]"
+  descriptive_name: "noscript > style[amp-boilerplate]"
   mandatory: true
   unique: true
   mandatory_parent: "NOSCRIPT"
@@ -882,18 +1237,19 @@ tags: {  # `<style amp-boilerplate>`, [AMP, ACTIONS]
     doc_css_bytes: false
     cdata_regex: "\\s*body\\s*{\\s*-webkit-animation:\\s*none;\\s*-moz-animation:\\s*none;\\s*-ms-animation:\\s*none;\\s*animation:\\s*none;?\\s*}\\s*"
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites"
 }
 
-tags: {  # `<style amp-boilerplate>`, transformed [AMP, ACTIONS]
+tags: {  # `<style amp-boilerplate>`, transformed [AMP]
   html_format: AMP
-  html_format: ACTIONS
   enabled_by: "transformed"
   tag_name: "STYLE"
   spec_name: "noscript > style[amp-boilerplate] (transformed)"
+  descriptive_name: "noscript > style[amp-boilerplate]"
   unique: true
   mandatory_parent: "NOSCRIPT"
   mandatory_ancestor: "HEAD"
+  attr_lists: "nonce-attr"
   attrs: {
     name: "amp-boilerplate"
     mandatory: true
@@ -904,15 +1260,15 @@ tags: {  # `<style amp-boilerplate>`, transformed [AMP, ACTIONS]
     doc_css_bytes: false
     cdata_regex: "\\s*body\\s*{\\s*-webkit-animation:\\s*none;\\s*-moz-animation:\\s*none;\\s*-ms-animation:\\s*none;\\s*animation:\\s*none;?\\s*}\\s*"
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites"
 }
 
-tags: {  # `<style amp-keyframes>`, [AMP, AMP4ADS, ACTIONS]
+tags: {  # `<style amp-keyframes>`, [AMP, AMP4ADS]
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "STYLE"
   spec_name: "style[amp-keyframes]"
+  descriptive_name: "style[amp-keyframes]"
   unique: true
   mandatory_parent: "BODY"
   mandatory_last_child: true
@@ -928,10 +1284,88 @@ tags: {  # `<style amp-keyframes>`, [AMP, AMP4ADS, ACTIONS]
     # to animation keyframes rules.
     doc_css_bytes: false
     max_bytes: 500000
-    max_bytes_spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#keyframes-stylesheet"
+    max_bytes_spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#keyframes-stylesheet"
     css_spec: {
       at_rule_spec: { name: 'keyframes' }
-      at_rule_spec: { name: 'media' }
+      at_rule_spec: {
+         name: 'media'
+         media_query_spec: {
+           issues_as_error: false
+           type: 'all'
+           type: 'print'
+           type: 'screen'
+           type: 'speech'
+           type: 'tty'
+           type: 'tv'
+           type: 'projection'
+           type: 'handheld'
+           type: 'braille'
+           type: 'embossesd'
+           type: 'aural'
+           feature: 'any-hover'
+           feature: 'any-pointer'
+           feature: 'aspect-ratio'
+           feature: 'color'
+           feature: 'color-gamut'
+           feature: 'color-index'
+           feature: 'device-aspect-ratio'
+           feature: 'device-height'
+           feature: 'device-width'
+           feature: 'display-mode'
+           feature: 'forced-colors'
+           feature: 'grid'
+           feature: 'height'
+           feature: 'hover'
+           feature: 'inverted-colors'
+           feature: 'light-level'
+           feature: 'monochrome'
+           feature: 'max-aspect-ratio'
+           feature: 'max-color-index'
+           feature: 'max-device-aspect-ratio'
+           feature: 'max-device-height'
+           feature: 'max-device-width'
+           feature: 'max-height'
+           feature: 'max-resolution'
+           feature: 'max-width'
+           feature: 'min-aspect-ratio'
+           feature: 'min-color-index'
+           feature: 'min-device-aspect-ratio'
+           feature: 'min-device-height'
+           feature: 'min-device-width'
+           feature: 'min-height'
+           feature: 'min-resolution'
+           feature: 'min-width'
+           feature: 'orientation'
+           feature: 'overflow-block'
+           feature: 'overflow-inline'
+           feature: 'pointer'
+           feature: 'prefers-color-scheme'
+           feature: 'prefers-contrast'
+           feature: 'prefers-reduced-motion'
+           feature: 'prefers-reduced-transparency'
+           feature: 'resolution'
+           feature: 'scan'
+           feature: 'scripting'
+           feature: 'transform-3d'
+           feature: 'update'
+           feature: 'width'
+           # Other non-standard media types and features commonly seen:
+           type: '-sass-debug-info'
+           type: 'device-pixel-ratio'
+           type: 'device-pixel-ratio2'
+           feature: '--mod'
+           feature: '--md'
+           feature: 'device-pixel-ratio'
+           feature: 'device-pixel-ratio2'
+           feature: 'high-contrast'
+           feature: 'aspect-ratio'
+           feature: 'max-device-pixel-ratio'
+           feature: 'min-device-pixel-ratio'
+           feature: 'max-device-pixel-ratio2'
+           feature: 'min-device-pixel-ratio2'
+         }
+      }
+
       at_rule_spec: { name: 'supports' }
       validate_keyframes: true
       declaration: "animation-timing-function"
@@ -948,9 +1382,11 @@ tags: {  # '<style amp-runtime>`, transformed AMP
   enabled_by: "transformed"
   tag_name: "STYLE"
   spec_name: "style[amp-runtime] (transformed)"
+  descriptive_name: "style[amp-runtime]"
   mandatory: true
   unique: true
   mandatory_parent: "HEAD"
+  attr_lists: "nonce-attr"
   attrs: {
     name: "amp-runtime"
     mandatory: true
@@ -962,5 +1398,5 @@ tags: {  # '<style amp-runtime>`, transformed AMP
     mandatory: true
     value_regex: "^\\d{15}|latest$"
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#stylesheets"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets"
 }
diff --git a/validator/validator-main.protoascii b/validator/validator-main.protoascii
index 94b203e4b2adf..5dfdecf715149 100644
--- a/validator/validator-main.protoascii
+++ b/validator/validator-main.protoascii
@@ -20,16 +20,16 @@
 # in production from crashing. This id is not relevant to validator.js
 # because thus far, engine (validator.js) and spec file
 # (validator-main.protoascii, etc) are always released together.
-min_validator_revision_required: 474
+min_validator_revision_required: 475
 
 # The spec file revision allows the validator engine to distinguish
 # newer versions of the spec file. This is currently a Google internal
 # mechanism, validator.js does not use this facility. However, any
 # change to this file (validator-main.js) requires updating this revision id.
-spec_file_revision: 1052
+spec_file_revision: 1188
 
-styles_spec_url: "https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages"
-script_spec_url: "https://www.ampproject.org/docs/troubleshooting/validation_errors#custom-javascript-is-not-allowed"
+styles_spec_url: "https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/"
+script_spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed"
 
 # Validator extensions.
 # =====================
@@ -41,12 +41,18 @@ script_spec_url: "https://www.ampproject.org/docs/troubleshooting/validation_err
 # Rules for AMP HTML
 # https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml
 
+doc: {
+  html_format: AMP4EMAIL
+  max_bytes: 200000
+  max_bytes_spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-format/?format=email"
+}
+
 tags: {
   html_format: AMP
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "!DOCTYPE"
   spec_name: "html doctype"
+  descriptive_name: "html !doctype"
   mandatory_parent: "$ROOT"
   mandatory: true
   unique: true
@@ -60,8 +66,10 @@ tags: {
   # on existing AMP documents.
   attrs: {
     name: "lang"
+    deprecation: "html"
+    deprecation_url: "https://github.com/ampproject/amphtml/issues/25926"
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
 }
 # AMP4ADS may need time to transition <!doctype> to using explicit attrs only.
 # Tracking in b/123227526 to merge into tagspec with spec name "html doctype".
@@ -69,6 +77,7 @@ tags: {
   html_format: AMP4ADS
   tag_name: "!DOCTYPE"
   spec_name: "html doctype (AMP4ADS)"
+  descriptive_name: "html !doctype"
   mandatory_parent: "$ROOT"
   mandatory: true
   unique: true
@@ -77,7 +86,7 @@ tags: {
     mandatory: true
     value: ""
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
 }
 
 # Below, we list the allowed elements in the order in which they are appear
@@ -90,7 +99,6 @@ tags: {  # HTML tag for non-transformed AMP.
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   disabled_by: "transformed"
   tag_name: "HTML"
   mandatory: true
@@ -104,11 +112,10 @@ tags: {  # HTML tag for non-transformed AMP.
     disallowed_value_regex: "false"
   }
   unique: true
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
 }
 tags: {  # HTML tag for transformed AMP.
   html_format: AMP
-  html_format: ACTIONS
   enabled_by: "transformed"
   tag_name: "HTML"
   spec_name: "html (transformed)"
@@ -123,7 +130,7 @@ tags: {  # HTML tag for transformed AMP.
     name: "i-amphtml-no-boilerplate"
     value: ""
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
 }
 
 # 4.2 Document metadata
@@ -132,18 +139,16 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "HEAD"
   mandatory: true
   mandatory_parent: "HTML"
   unique: true
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
 }
 # 4.2.2 The title element
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "TITLE"
   spec_name: "title"
   attrs: { name: "[text]" }
@@ -161,7 +166,6 @@ tags: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "BASE"
   unique: true
   mandatory_parent: "HEAD"
@@ -195,7 +199,6 @@ attr_lists: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "LINK"
   spec_name: "link rel="
   disallowed_ancestor: "TEMPLATE"
@@ -220,6 +223,7 @@ tags: {
         "components|"
         "import|"
         "manifest|"  # Handled separately below, has specific requirements.
+        "modulepreload|"  # Handled separately below, has specific requirements.
         "preload|"  # Handled separately below, has specific requirements.
         "serviceworker|"
         "stylesheet|"  # Handled separately below, has specific requirements.
@@ -231,13 +235,13 @@ tags: {
     # origins, not on the AMP Cache.
   }
   attr_lists: "common-link-attrs"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "LINK"
   spec_name: "link rel=canonical"
+  descriptive_name: "link rel=canonical"
   mandatory_parent: "HEAD"
   mandatory: true
   unique: true
@@ -257,7 +261,7 @@ tags: {
     dispatch_key: NAME_VALUE_DISPATCH
   }
   attr_lists: "common-link-attrs"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
 }
 # Allow <link rel="manifest" ...> but not <link rel="manifest foo" ...>
 tags: {
@@ -265,6 +269,7 @@ tags: {
   html_format: AMP4ADS
   tag_name: "LINK"
   spec_name: "link rel=manifest"
+  descriptive_name: "link rel=manifest"
   mandatory_parent: "HEAD"
   satisfies: "amp-app-banner data source"
   attrs: {
@@ -282,14 +287,43 @@ tags: {
     dispatch_key: NAME_VALUE_DISPATCH
   }
   attr_lists: "common-link-attrs"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
+}
+tags: {
+  html_format: AMP
+  tag_name: "LINK"
+  spec_name: "link rel=modulepreload"
+  descriptive_name: "link rel=modulepreload"
+  mandatory_parent: "HEAD"
+  attrs: {
+    name: "as"
+    mandatory: true
+    value: "script"
+  }
+  attrs: {
+    name: "crossorigin"
+    mandatory: true
+    value: "anonymous"
+  }
+  attrs: {
+    name: "href"
+    mandatory: true
+    value_regex: ".*\\.mjs$"
+  }
+  attrs: {
+    name: "rel"
+    mandatory: true
+    value_casei: "modulepreload"
+    dispatch_key: NAME_VALUE_DISPATCH
+  }
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "LINK"
   spec_name: "link rel=preload"
+  descriptive_name: "link rel=preload"
   disallowed_ancestor: "TEMPLATE"
   attrs: { name: "as" }
   attrs: { name: "href" }
@@ -299,16 +333,25 @@ tags: {
     value_casei: "preload"
     dispatch_key: NAME_VALUE_DISPATCH
   }
+  attrs: {
+    name: "imagesrcset"
+    value_url: {
+      protocol: "http"
+      protocol: "https"
+    }
+    disallowed_value_regex: "__amp_source_origin"
+  }
+  attrs: { name: "imagesizes" }
   attr_lists: "common-link-attrs"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # Allowlisted font providers
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "LINK"
   spec_name: "link rel=stylesheet for fonts"
+  descriptive_name: "link rel=stylesheet for fonts"
   named_id: LINK_FONT_STYLESHEET
   mandatory_parent: "HEAD"
   attr_lists: "nonce-attr"
@@ -327,9 +370,9 @@ tags: {
                  "https://fonts\\.googleapis\\.com/earlyaccess/.*\\.css|"
                  "https://maxcdn\\.bootstrapcdn\\.com/font-awesome/"
                  "([0-9]+\\.?)+/css/font-awesome\\.min\\.css(\\?.*)?|"
-                 "https://(use|pro)\\.fontawesome\\.com/releases/v([0-9]+\\.?)+"
+                 "https://(use|pro|kit)\\.fontawesome\\.com/releases/v([0-9]+\\.?)+"
                  "/css/[0-9a-zA-Z-]+\\.css|"
-                 "https://(use|pro)\\.fontawesome\\.com/[0-9a-zA-Z-]+\\.css|"
+                 "https://(use|pro|kit)\\.fontawesome\\.com/[0-9a-zA-Z-]+\\.css|"
                  "https://use\\.typekit\\.net/[\\w\\p{L}\\p{N}_]+\\.css"
   }
   attrs: { name: "integrity" }  # SRI attribute (https://www.w3.org/TR/SRI/)
@@ -344,15 +387,15 @@ tags: {
     name: "type"
     value_casei: "text/css"
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#custom-fonts"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#custom-fonts"
 }
 # itemprop=sameAs is allowed per schema.org, needs not be in head
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "LINK"
   spec_name: "link itemprop=sameAs"
+  descriptive_name: "link itemprop=sameAs"
   attrs: {
     name: "href"
     mandatory: true
@@ -364,15 +407,15 @@ tags: {
     dispatch_key: NAME_VALUE_DISPATCH
   }
   attr_lists: "common-link-attrs"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # rel= isn't mandatory when itemprop= is present.
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "LINK"
   spec_name: "link itemprop="
+  descriptive_name: "link itemprop="
   attrs: {
     name: "href"
     mandatory: true
@@ -382,15 +425,15 @@ tags: {
     mandatory: true
   }
   attr_lists: "common-link-attrs"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # rel= isn't mandatory when property= is present.
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "LINK"
   spec_name: "link property="
+  descriptive_name: "link property="
   attrs: {
     name: "href"
     mandatory: true
@@ -400,7 +443,7 @@ tags: {
     mandatory: true
   }
   attr_lists: "common-link-attrs"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # 4.2.5 the meta element
 # Charset must be utf8, and a specific viewport is required.
@@ -408,9 +451,9 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "META"
   spec_name: "meta charset=utf-8"
+  descriptive_name: "meta charset=utf-8"
   mandatory: true
   mandatory_parent: "HEAD"
   unique: true
@@ -420,14 +463,14 @@ tags: {
     mandatory: true
     value_casei: "utf-8"
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
 }
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "META"
   spec_name: "meta name=viewport"
+  descriptive_name: "meta name=viewport"
   mandatory: true
   mandatory_parent: "HEAD"
   unique: true
@@ -451,16 +494,16 @@ tags: {
     value: "viewport"
     dispatch_key: NAME_VALUE_DISPATCH
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
 }
 # This tag is a hack to tell IE 10 to use its modern rendering engine as opposed
 # to the IE8 engine. So it's explicitly allowed.
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "META"
   spec_name: "meta http-equiv=X-UA-Compatible"
+  descriptive_name: "meta http-equiv=X-UA-Compatible"
   mandatory_ancestor: "HEAD"
   attrs: {
     name: "content"
@@ -476,7 +519,7 @@ tags: {
     value_casei: "x-ua-compatible"
     dispatch_key: NAME_VALUE_DISPATCH
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # Tag specific to apple-itunes-app installs, see also <amp-app-banner>.
 tags: {
@@ -498,10 +541,10 @@ tags: {
     dispatch_key: NAME_VALUE_DISPATCH
   }
 
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # AMP & AMP4ADS metadata, name=amp-experiments-opt-in
-# https://github.com/lannka/amphtml/blob/master/tools/experiments/README.md
+# https://github.com/ampproject/amphtml/blob/main/tools/experiments/README.md
 tags: {
   html_format: AMP
   html_format: AMP4ADS
@@ -538,7 +581,7 @@ tags: {
     value_casei: "amp-3p-iframe-src"
     dispatch_key: NAME_VALUE_DISPATCH
   }
-  spec_url: "https://amp.dev/documentation/components/amp-ad"
+  spec_url: "https://amp.dev/documentation/components/amp-ad/"
 }
 # AMP metadata, name=amp-consent-blocking
 tags: {
@@ -702,7 +745,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "META"
   spec_name: "meta name= and content="
   attrs: { name: "content" }
@@ -730,7 +772,6 @@ tags: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "META"
   spec_name: "meta http-equiv=Content-Type"
   mandatory_ancestor: "HEAD"
@@ -745,13 +786,12 @@ tags: {
     value_casei: "content-type"
     dispatch_key: NAME_VALUE_DISPATCH
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # http-equiv content-language tag
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "META"
   spec_name: "meta http-equiv=content-language"
   mandatory_ancestor: "HEAD"
@@ -765,14 +805,13 @@ tags: {
     value_casei: "content-language"
     dispatch_key: NAME_VALUE_DISPATCH
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # http-equiv pics-label tag
 # https://www.w3.org/PICS/
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "META"
   spec_name: "meta http-equiv=pics-label"
   mandatory_ancestor: "HEAD"
@@ -786,14 +825,13 @@ tags: {
     value_casei: "pics-label"
     dispatch_key: NAME_VALUE_DISPATCH
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # http-equiv imagetoolbar tag
 # https://msdn.microsoft.com/en-us/library/ms532986(v=vs.85).aspx
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "META"
   spec_name: "meta http-equiv=imagetoolbar"
   mandatory_ancestor: "HEAD"
@@ -807,14 +845,13 @@ tags: {
     value_casei: "imagetoolbar"
     dispatch_key: NAME_VALUE_DISPATCH
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # http-equiv content-style-type
 # https://www.w3.org/TR/REC-html40/present/styles#h-14.2.1
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "META"
   spec_name: "meta http-equiv=Content-Style-Type"
   mandatory_ancestor: "HEAD"
@@ -829,14 +866,13 @@ tags: {
     value_casei: "content-style-type"
     dispatch_key: NAME_VALUE_DISPATCH
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # http-equiv content-script-type
 # https://www.w3.org/TR/html4/interact/scripts#h-18.2.2.1
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "META"
   spec_name: "meta http-equiv=Content-Script-Type"
   mandatory_ancestor: "HEAD"
@@ -851,13 +887,12 @@ tags: {
     value_casei: "content-script-type"
     dispatch_key: NAME_VALUE_DISPATCH
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # http-equiv origin-trial tag
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "META"
   spec_name: "meta http-equiv=origin-trial"
   mandatory_ancestor: "HEAD"
@@ -871,14 +906,13 @@ tags: {
     value_casei: "origin-trial"
     dispatch_key: NAME_VALUE_DISPATCH
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # http-equiv resource-type
 # http://www.metatags.info/meta_http_equiv_resource_type
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "META"
   spec_name: "meta http-equiv=resource-type"
   mandatory_ancestor: "HEAD"
@@ -892,7 +926,7 @@ tags: {
     value_casei: "resource-type"
     dispatch_key: NAME_VALUE_DISPATCH
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # http-equiv x-dns-prefetch-control
 # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control
@@ -913,7 +947,7 @@ tags: {
     value_casei: "x-dns-prefetch-control"
     dispatch_key: NAME_VALUE_DISPATCH
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags"
 }
 # AMP metadata, name=amp-ad-enable-refresh
 # Enables Refresh for amp-ad doubleclick Fast Fetch
@@ -938,7 +972,6 @@ tags: {
 # Enables AMP-to-AMP navigation
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "META"
   spec_name: "meta name=amp-to-amp-navigation"
   mandatory_parent: "HEAD"
@@ -1041,19 +1074,17 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "BODY"
   mandatory: true
   unique: true
   mandatory_parent: "HTML"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
 }
 # 4.3.2 The article element
 tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "ARTICLE"
 }
 # 4.3.3 The section element
@@ -1071,7 +1102,6 @@ attr_lists: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SECTION"
   disallowed_ancestor: "AMP-ACCORDION"
   attr_lists: "poool-access-attrs"
@@ -1087,7 +1117,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "NAV"
 }
 # 4.3.5 The aside element
@@ -1095,7 +1124,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "ASIDE"
 }
 # 4.3.6 The h1, h2, h3, h4, h5, and h6 elements
@@ -1103,7 +1131,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "H1"
   attrs: { name: "align" }
 }
@@ -1111,7 +1138,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "H2"
   attrs: { name: "align" }
 }
@@ -1119,7 +1145,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "H3"
   attrs: { name: "align" }
 }
@@ -1127,7 +1152,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "H4"
   attrs: { name: "align" }
 }
@@ -1135,7 +1159,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "H5"
   attrs: { name: "align" }
 }
@@ -1143,7 +1166,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "H6"
   attrs: { name: "align" }
 }
@@ -1152,7 +1174,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "HEADER"
 }
 # 4.3 7 The footer element
@@ -1160,7 +1181,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "FOOTER"
 }
 # 4.3 7 The address element
@@ -1168,7 +1188,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "ADDRESS"
 }
 
@@ -1178,7 +1197,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "P"
   attrs: { name: "align" }
 }
@@ -1187,7 +1205,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "HR"
 }
 # 4.4.3 The pre element
@@ -1195,7 +1212,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "PRE"
 }
 # 4.4.4 The blockquote element
@@ -1215,7 +1231,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "BLOCKQUOTE"
   attrs: { name: "align" }
   attr_lists: "cite-attr"
@@ -1225,7 +1240,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "OL"
   attrs: {
     name: "reversed"
@@ -1245,7 +1259,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "UL"
 }
 # 4.4.7 The li element
@@ -1253,7 +1266,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "LI"
   attrs: {
     name: "value"
@@ -1265,7 +1277,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DL"
 }
 # 4.4.9 The dt element
@@ -1273,7 +1284,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DT"
 }
 # 4.4.10 The dd element
@@ -1281,7 +1291,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DD"
 }
 # 4.4.11 The figure element
@@ -1289,7 +1298,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "FIGURE"
 }
 # 4.4.12 The figcaption element
@@ -1297,7 +1305,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "FIGCAPTION"
 }
 # 4.4.13 The div element
@@ -1305,7 +1312,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DIV"
   attrs: { name: "align" }
 }
@@ -1314,7 +1320,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "MAIN"
 }
 
@@ -1323,7 +1328,6 @@ tags: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "A"
   attrs: { name: "border" }  # Not valid html5 but commonly used and supported.
   attrs: { name: "download" }
@@ -1429,7 +1433,7 @@ tags: {
   attr_lists: "name-attr"
   # <amp-bind>
   attrs: { name: "[href]" }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#links"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#links"
 }
 # AMP4EMAIL restricts the use of mustache delimiters in href. The only allowed
 # protocols for href are http, https and mailto. Relative urls are disallowed.
@@ -1490,7 +1494,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "EM"
 }
 # 4.5.3 The strong element
@@ -1498,7 +1501,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "STRONG"
 }
 # 4.5.4 The small element
@@ -1506,7 +1508,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "SMALL"
 }
 # 4.5.5 The s element
@@ -1514,7 +1515,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "S"
 }
 # 4.5.6 The cite element
@@ -1522,7 +1522,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "CITE"
 }
 # 4.5.7 The q element
@@ -1530,7 +1529,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "Q"
   attr_lists: "cite-attr"
 }
@@ -1539,7 +1537,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DFN"
 }
 # 4.5.9 The abbr element
@@ -1547,7 +1544,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "ABBR"
 }
 # 4.5.10 The data element
@@ -1555,7 +1551,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DATA"
 }
 # 4.5.11 The time element
@@ -1563,7 +1558,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "TIME"
   attrs: {
     name: "datetime"
@@ -1578,7 +1572,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "CODE"
 }
 # 4.5.13 The var element
@@ -1586,7 +1579,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "VAR"
 }
 # 4.5.14 The samp element
@@ -1594,7 +1586,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "SAMP"
 }
 # 4.5.15 The kbd element
@@ -1602,7 +1593,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "KBD"
 }
 # 4.5.16 The sub and sup elements
@@ -1610,14 +1600,12 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "SUB"
 }
 tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "SUP"
 }
 # 4.5.17 The i element
@@ -1625,7 +1613,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "I"
 }
 # 4.5.18 The b element
@@ -1633,7 +1620,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "B"
 }
 # 4.5.19 The u element
@@ -1641,7 +1627,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "U"
 }
 # 4.5.20 The mark element
@@ -1649,7 +1634,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "MARK"
 }
 # 4.5.21 The ruby element
@@ -1657,7 +1641,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "RUBY"
 }
 # 4.5.22 The rb element
@@ -1665,7 +1648,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "RB"
 }
 # 4.5.23 The rt element
@@ -1673,14 +1655,12 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "RT"
 }
 # 4.5.24 The rtc element
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "RTC"
 }
 # 4.5.25 The rp element
@@ -1688,14 +1668,12 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "RP"
 }
 # 4.5.26 The bdi element
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "BDI"
 }
 # 4.5.27 The bdo element
@@ -1703,7 +1681,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "BDO"
   attrs: { name: "dir" }
 }
@@ -1712,7 +1689,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "SPAN"
 }
 # 4.5.29 The br element
@@ -1720,7 +1696,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "BR"
 }
 # 4.5.30 The wbr element
@@ -1728,7 +1703,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "WBR"
 }
 
@@ -1738,7 +1712,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "INS"
   # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins
   # These attributes have specific formatting, but as they are metadata
@@ -1752,7 +1725,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DEL"
   # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
   # These attributes have specific formatting, but as they are metadata
@@ -1764,14 +1736,16 @@ tags: {
 
 # 4.7 Embedded Content
 # AMP HTML allows embedded content only via its own tags (e.g. amp-img), with
-# the exception of tags inside of a <noscript> ancestor.
+# the exception of tags inside of a <noscript> or <amp-story-player> ancestor
+# and transformed amp-img.
 # 4.7.1 The img element
 tags: {
   html_format: AMP  # Disallowed in AMP4ADS because <noscript> is disallowed.
   tag_name: "IMG"
+  spec_name: "noscript > img"
+  descriptive_name: "img"
   mandatory_ancestor: "NOSCRIPT"
   mandatory_ancestor_suggested_alternative: "AMP-IMG"
-  spec_url: "https://amp.dev/documentation/components/amp-img"
   attrs: { name: "alt" }
   attrs: { name: "attribution" }
   attrs: { name: "border" }  # Not valid html5 but commonly used and supported.
@@ -1782,32 +1756,22 @@ tags: {
     value: "sync"
   }
   attrs: { name: "height" }  # Not valid html5 but commonly used and supported.
-  attrs: { name: "ismap" }
-  attrs: {
-    name: "longdesc"
-    value_url: {
-      protocol: "http"
-      protocol: "https"
-    }
-    disallowed_value_regex: "__amp_source_origin"
-  }
   attrs: { name: "importance" }  # Not yet part of the html spec
+  attrs: { name: "ismap" }
   attrs: { name: "intrinsicsize" }  # Not yet part of the html spec
   attrs: { name: "loading" }  # Not yet part of the html spec
   attrs: {
-    name: "src"
-    alternative_names: "srcset"
-    mandatory: true
+    name: "longdesc"
     value_url: {
-      protocol: "data"
-      protocol: "http" # For parity with amp-img's mandatory-src-or-srcset.
+      protocol: "http"
       protocol: "https"
-      allow_relative: true
     }
     disallowed_value_regex: "__amp_source_origin"
   }
   attrs: { name: "sizes" }
   attrs: { name: "width" }  # Not valid html5 but commonly used and supported.
+  attr_lists: "mandatory-src-or-srcset"
+  spec_url: "https://amp.dev/documentation/components/amp-img/"
 }
 # 4.7.2 The iframe element
 tags: {
@@ -1815,7 +1779,7 @@ tags: {
   tag_name: "IFRAME"
   mandatory_ancestor: "NOSCRIPT"
   mandatory_ancestor_suggested_alternative: "AMP-IFRAME"
-  spec_url: "https://amp.dev/documentation/components/amp-iframe"
+  spec_url: "https://amp.dev/documentation/components/amp-iframe/"
   attrs: {
     name: "frameborder"
     value: "0"
@@ -1869,7 +1833,7 @@ tags: {
   attrs: {
     name: "muted"
     deprecation: "autoplay"
-    deprecation_url: "https://amp.dev/documentation/components/amp-video"
+    deprecation_url: "https://amp.dev/documentation/components/amp-video/"
   }
   attrs: { name: "playsinline" }
   attrs: { name: "poster" }
@@ -1884,7 +1848,7 @@ tags: {
     disallowed_value_regex: "__amp_source_origin"
   }
   attrs: { name: "width" }
-  spec_url: "https://amp.dev/documentation/components/amp-video"
+  spec_url: "https://amp.dev/documentation/components/amp-video/"
 }
 # 4.7.7 The audio element
 # Only allowed in noscript tags. Otherwise use amp-audio.
@@ -1907,7 +1871,7 @@ tags: {
     }
     disallowed_value_regex: "__amp_source_origin"
   }
-  spec_url: "https://amp.dev/documentation/components/amp-audio"
+  spec_url: "https://amp.dev/documentation/components/amp-audio/"
 }
 # 4.7.7 The picture element
 # Only allowed in noscript tags which support img tags.
@@ -1915,7 +1879,7 @@ tags: {
   html_format: AMP
   tag_name: "PICTURE"
   mandatory_parent: "NOSCRIPT"
-  spec_url: "https://amp.dev/documentation/components/amp-img"
+  spec_url: "https://amp.dev/documentation/components/amp-img/"
 }
 # 4.7.8 The source element
 tags: {
@@ -1936,12 +1900,11 @@ tags: {
     disallowed_value_regex: "__amp_source_origin"
   }
   attrs: { name: "type" }
-  spec_url: "https://amp.dev/documentation/components/amp-img"
+  spec_url: "https://amp.dev/documentation/components/amp-img/"
 }
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SOURCE"
   spec_name: "amp-video > source"
   mandatory_parent: "AMP-VIDEO"
@@ -1958,12 +1921,11 @@ tags: {
   # <amp-bind>
   attrs: { name: "[src]" }
   attrs: { name: "[type]" }
-  spec_url: "https://amp.dev/documentation/components/amp-video"
+  spec_url: "https://amp.dev/documentation/components/amp-video/"
 }
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SOURCE"
   spec_name: "amp-audio > source"
   mandatory_parent: "AMP-AUDIO"
@@ -1980,12 +1942,11 @@ tags: {
   # <amp-bind>
   attrs: { name: "[src]" }
   attrs: { name: "[type]" }
-  spec_url: "https://amp.dev/documentation/components/amp-audio"
+  spec_url: "https://amp.dev/documentation/components/amp-audio/"
 }
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SOURCE"
   spec_name: "audio > source"
   mandatory_parent: "AUDIO"
@@ -2003,12 +1964,11 @@ tags: {
     name: "type"
     mandatory: true
   }
-  spec_url: "https://amp.dev/documentation/components/amp-audio"
+  spec_url: "https://amp.dev/documentation/components/amp-audio/"
 }
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SOURCE"
   spec_name: "video > source"
   mandatory_parent: "VIDEO"
@@ -2026,12 +1986,11 @@ tags: {
     name: "type"
     mandatory: true
   }
-  spec_url: "https://amp.dev/documentation/components/amp-video"
+  spec_url: "https://amp.dev/documentation/components/amp-video/"
 }
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "SOURCE"
   spec_name: "amp-ima-video > source"
   mandatory_parent: "AMP-IMA-VIDEO"
@@ -2110,7 +2069,6 @@ attr_lists: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "TRACK"
   spec_name: "audio > track"
   mandatory_parent: "AUDIO"
@@ -2119,7 +2077,6 @@ tags: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "TRACK"
   spec_name: "audio > track[kind=subtitles]"
   mandatory_parent: "AUDIO"
@@ -2128,7 +2085,6 @@ tags: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "TRACK"
   spec_name: "video > track"
   mandatory_parent: "VIDEO"
@@ -2137,7 +2093,6 @@ tags: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "TRACK"
   spec_name: "video > track[kind=subtitles]"
   mandatory_parent: "VIDEO"
@@ -2146,7 +2101,6 @@ tags: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "TRACK"
   spec_name: "amp-audio > track"
   mandatory_parent: "AMP-AUDIO"
@@ -2159,7 +2113,6 @@ tags: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "TRACK"
   spec_name: "amp-audio > track[kind=subtitles]"
   mandatory_parent: "AMP-AUDIO"
@@ -2172,7 +2125,6 @@ tags: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "TRACK"
   spec_name: "amp-video > track"
   mandatory_parent: "AMP-VIDEO"
@@ -2185,7 +2137,6 @@ tags: {
 tags: {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "TRACK"
   spec_name: "amp-video > track[kind=subtitles]"
   mandatory_parent: "AMP-VIDEO"
@@ -2216,877 +2167,11 @@ tags: {
   attrs: { name: "[src]" }
   attrs: { name: "[srclang]" }
   attr_lists: "track-attrs-subtitles"
-  spec_url: "https://amp.dev/documentation/components/amp-ima-video"
+  spec_url: "https://amp.dev/documentation/components/amp-ima-video/"
 }
 
-
 # 4.7.15 SVG
-# We allow some limited embedded SVG tags. We do not allow inline styles
-# or embedding any external resources.
-# Attribute lists: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
-attr_lists: {
-  name: "svg-conditional-processing-attributes"
-  attrs: { name: "requiredextensions" }
-  attrs: { name: "requiredfeatures" }
-  attrs: { name: "systemlanguage" }
-}
-attr_lists: {
-  name: "svg-core-attributes"
-  attrs: { name: "xml:lang" }
-  attrs: { name: "xml:space" }
-  attrs: { name: "xmlns" }
-  attrs: { name: "xmlns:xlink" }
-}
-attr_lists: {
-  name: "svg-filter-primitive-attributes"
-  attrs: { name: "height" }
-  attrs: { name: "result" }
-  attrs: { name: "width" }
-  attrs: { name: "x" }
-  attrs: { name: "y" }
-}
-attr_lists: {
-  name: "svg-presentation-attributes"
-  attrs: { name: "alignment-baseline" }
-  attrs: { name: "baseline-shift" }
-  attrs: { name: "clip" }
-  attrs: { name: "clip-path" }
-  attrs: { name: "clip-rule" }
-  attrs: { name: "color" }
-  attrs: { name: "color-interpolation" }
-  attrs: { name: "color-interpolation-filters" }
-  attrs: { name: "color-profile" }
-  attrs: { name: "color-rendering" }
-  attrs: { name: "cursor" }
-  attrs: { name: "direction" }
-  attrs: { name: "display" }
-  attrs: { name: "dominant-baseline" }
-  attrs: { name: "enable-background" }
-  attrs: { name: "fill" }
-  attrs: { name: "fill-opacity" }
-  attrs: { name: "fill-rule" }
-  attrs: { name: "filter" }
-  attrs: { name: "flood-color" }
-  attrs: { name: "flood-opacity" }
-  attrs: { name: "focusable" }
-  attrs: { name: "font-family" }
-  attrs: { name: "font-size" }
-  attrs: { name: "font-size-adjust" }
-  attrs: { name: "font-stretch" }
-  attrs: { name: "font-style" }
-  attrs: { name: "font-variant" }
-  attrs: { name: "font-weight" }
-  attrs: { name: "glyph-orientation-horizontal" }
-  attrs: { name: "glyph-orientation-vertical" }
-  attrs: { name: "image-rendering" }
-  attrs: { name: "kerning" }
-  attrs: { name: "letter-spacing" }
-  attrs: { name: "lighting-color" }
-  attrs: { name: "marker-end" }
-  attrs: { name: "marker-mid" }
-  attrs: { name: "marker-start" }
-  attrs: { name: "mask" }
-  attrs: { name: "opacity" }
-  attrs: { name: "overflow" }
-  attrs: { name: "pointer-events" }
-  attrs: { name: "shape-rendering" }
-  attrs: { name: "stop-color" }
-  attrs: { name: "stop-opacity" }
-  attrs: { name: "stroke" }
-  attrs: { name: "stroke-dasharray" }
-  attrs: { name: "stroke-dashoffset" }
-  attrs: { name: "stroke-linecap" }
-  attrs: { name: "stroke-linejoin" }
-  attrs: { name: "stroke-miterlimit" }
-  attrs: { name: "stroke-opacity" }
-  attrs: { name: "stroke-width" }
-  attrs: { name: "text-anchor" }
-  attrs: { name: "text-decoration" }
-  attrs: { name: "text-rendering" }
-  attrs: { name: "unicode-bidi" }
-  attrs: { name: "vector-effect" }
-  attrs: { name: "visibility" }
-  attrs: { name: "word-spacing" }
-  attrs: { name: "writing-mode" }
-}
-attr_lists: {
-  name: "svg-transfer-function-attributes"
-  attrs: { name: "amplitude" }
-  attrs: { name: "exponent" }
-  attrs: { name: "intercept" }
-  attrs: { name: "offset" }
-  attrs: { name: "slope" }
-  attrs: { name: "table" }
-  attrs: { name: "tablevalues" }
-}
-attr_lists: {
-  name: "svg-xlink-attributes"
-  attrs: { name: "xlink:actuate" }
-  attrs: { name: "xlink:arcrole" }
-  attrs: {
-    name: "xlink:href"
-    # xlink:href is deprecated since SVG2 in favor of href.
-    alternative_names: "href"
-    value_url: {
-      protocol: "http"
-      protocol: "https"
-      allow_empty: false
-    }
-  }
-  attrs: { name: "xlink:role" }
-  attrs: { name: "xlink:show" }
-  attrs: { name: "xlink:title" }
-  attrs: { name: "xlink:type" }
-}
-# Style attributes are broadly disallowed, but specifically allowed
-# within SVG as SVG are commonly generated by tools.
-attr_lists: {
-  name: "svg-style-attr"
-  attrs: {
-    name: "style"
-    # `style` attribute value validated against Document Level CSS rules defined
-    # in validator-css.protoascii.
-    value_doc_svg_css: true
-  }
-}
-
-# Basics
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "G"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "transform" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "GLYPH"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "arabic-form" }
-  attrs: { name: "d" }
-  attrs: { name: "glyph-name" }
-  attrs: { name: "horiz-adv-x" }
-  attrs: { name: "orientation" }
-  attrs: { name: "unicode" }
-  attrs: { name: "vert-adv-y" }
-  attrs: { name: "vert-origin-x" }
-  attrs: { name: "vert-origin-y" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "GLYPHREF"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "dx" }
-  attrs: { name: "dy" }
-  attrs: { name: "format" }
-  attrs: { name: "glyphref" }
-  attrs: { name: "x" }
-  attrs: { name: "y" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  attr_lists: "svg-xlink-attributes"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "IMAGE"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "height" }
-  attrs: { name: "preserveaspectratio" }
-  attrs: { name: "transform" }
-  attrs: { name: "width" }
-  attrs: { name: "x" }
-  attrs: { name: "xlink:actuate" }
-  attrs: { name: "xlink:arcrole" }
-  attrs: {
-    name: "xlink:href"
-    # xlink:href is deprecated since SVG2 in favor of href.
-    alternative_names: "href"
-    value_url: {
-      protocol: "data"
-      protocol: "http"
-      protocol: "https"
-      allow_empty: false
-    }
-    # Inline SVGs execute in a different context and can affect page elements.
-    disallowed_value_regex: "(^|\\s)data:image\\/svg\\+xml"
-  }
-  attrs: { name: "xlink:role" }
-  attrs: { name: "xlink:show" }
-  attrs: { name: "xlink:title" }
-  attrs: { name: "xlink:type" }
-  attrs: { name: "y" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "MARKER"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "markerheight" }
-  attrs: { name: "markerunits" }
-  attrs: { name: "markerwidth" }
-  attrs: { name: "orient" }
-  attrs: { name: "preserveaspectratio" }
-  attrs: { name: "refx" }
-  attrs: { name: "refy" }
-  attrs: { name: "transform" }
-  attrs: { name: "viewbox" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "METADATA"
-  mandatory_ancestor: "SVG"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "PATH"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "d" }
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "pathlength" }
-  attrs: { name: "sketch:type" }
-  attrs: { name: "transform" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "SOLIDCOLOR"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "solid-color" }
-  attrs: { name: "solid-opacity" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "SVG"
-  attrs: { name: "contentscripttype" }
-  attrs: { name: "contentstyletype" }
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "height" }
-  attrs: { name: "preserveaspectratio" }
-  attrs: {
-    name: "version"
-    value: "1.0"
-    value: "1.1"
-  }
-  attrs: { name: "viewbox" }
-  attrs: { name: "width" }
-  attrs: { name: "x" }
-  attrs: { name: "y" }
-  attrs: { name: "zoomandpan" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "SWITCH"
-  mandatory_ancestor: "SVG"
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "VIEW"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "preserveaspectratio" }
-  attrs: { name: "viewbox" }
-  attrs: { name: "viewtarget" }
-  attrs: { name: "zoomandpan" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-# Shapes
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "CIRCLE"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "cx" }
-  attrs: { name: "cy" }
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "r" }
-  attrs: { name: "sketch:type" }
-  attrs: { name: "transform" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "ELLIPSE"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "cx" }
-  attrs: { name: "cy" }
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "rx" }
-  attrs: { name: "ry" }
-  attrs: { name: "sketch:type" }
-  attrs: { name: "transform" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "LINE"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "sketch:type" }
-  attrs: { name: "transform" }
-  attrs: { name: "x1" }
-  attrs: { name: "x2" }
-  attrs: { name: "y1" }
-  attrs: { name: "y2" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "POLYGON"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "points" }
-  attrs: { name: "sketch:type" }
-  attrs: { name: "transform" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "POLYLINE"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "points" }
-  attrs: { name: "sketch:type" }
-  attrs: { name: "transform" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "RECT"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "height" }
-  attrs: { name: "rx" }
-  attrs: { name: "ry" }
-  attrs: { name: "sketch:type" }
-  attrs: { name: "transform" }
-  attrs: { name: "width" }
-  attrs: { name: "x" }
-  attrs: { name: "y" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-# Text
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "TEXT"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "dx" }
-  attrs: { name: "dy" }
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "lengthadjust" }
-  attrs: { name: "rotate" }
-  attrs: { name: "text-anchor" }
-  attrs: { name: "textlength" }
-  attrs: { name: "transform" }
-  attrs: { name: "x" }
-  attrs: { name: "y" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "TEXTPATH"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "method" }
-  attrs: { name: "spacing" }
-  attrs: { name: "startoffset" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  attr_lists: "svg-xlink-attributes"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "TREF"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  attr_lists: "svg-xlink-attributes"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "TSPAN"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "dx" }
-  attrs: { name: "dy" }
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "lengthadjust" }
-  attrs: { name: "rotate" }
-  attrs: { name: "textlength" }
-  attrs: { name: "x" }
-  attrs: { name: "y" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-# Rendering
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "CLIPPATH"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "clippathunits" }
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "transform" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "FILTER"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "filterres" }
-  attrs: { name: "filterunits" }
-  attrs: { name: "height" }
-  attrs: { name: "primitiveunits" }
-  attrs: { name: "width" }
-  attrs: { name: "x" }
-  attrs: { name: "y" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  attr_lists: "svg-xlink-attributes"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "HKERN"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "g1" }
-  attrs: { name: "g2" }
-  attrs: { name: "k" }
-  attrs: { name: "u1" }
-  attrs: { name: "u2" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "LINEARGRADIENT"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "gradienttransform" }
-  attrs: { name: "gradientunits" }
-  attrs: { name: "spreadmethod" }
-  attrs: { name: "x1" }
-  attrs: { name: "x2" }
-  attrs: { name: "y1" }
-  attrs: { name: "y2" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  attr_lists: "svg-xlink-attributes"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "MASK"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "height" }
-  attrs: { name: "maskcontentunits" }
-  attrs: { name: "maskunits" }
-  attrs: { name: "width" }
-  attrs: { name: "x" }
-  attrs: { name: "y" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "PATTERN"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "height" }
-  attrs: { name: "patterncontentunits" }
-  attrs: { name: "patterntransform" }
-  attrs: { name: "patternunits" }
-  attrs: { name: "preserveaspectratio" }
-  attrs: { name: "viewbox" }
-  attrs: { name: "width" }
-  attrs: { name: "x" }
-  attrs: { name: "y" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  attr_lists: "svg-xlink-attributes"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "RADIALGRADIENT"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "cx" }
-  attrs: { name: "cy" }
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "fr" }
-  attrs: { name: "fx" }
-  attrs: { name: "fy" }
-  attrs: { name: "gradienttransform" }
-  attrs: { name: "gradientunits" }
-  attrs: { name: "r" }
-  attrs: { name: "spreadmethod" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  attr_lists: "svg-xlink-attributes"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "STOP"
-  spec_name: "lineargradient > stop"
-  mandatory_ancestor: "LINEARGRADIENT"
-  attrs: { name: "offset" }
-  attrs: { name: "stop-color" }
-  attrs: { name: "stop-opacity" }
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "STOP"
-  spec_name: "radialgradient > stop"
-  mandatory_ancestor: "RADIALGRADIENT"
-  attrs: { name: "offset" }
-  attrs: { name: "stop-color" }
-  attrs: { name: "stop-opacity" }
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "VKERN"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "g1" }
-  attrs: { name: "g2" }
-  attrs: { name: "k" }
-  attrs: { name: "u1" }
-  attrs: { name: "u2" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-# Special
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "DEFS"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "transform" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "SYMBOL"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "height" }
-  attrs: { name: "preserveaspectratio" }
-  attrs: { name: "viewbox" }
-  attrs: { name: "width" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "USE"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "externalresourcesrequired" }
-  attrs: { name: "height" }
-  attrs: { name: "transform" }
-  attrs: { name: "width" }
-  attrs: { name: "x" }
-  attrs: { name: "y" }
-  attr_lists: "svg-conditional-processing-attributes"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  attr_lists: "svg-xlink-attributes"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-# Filters
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "FECOLORMATRIX"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "in" }
-  attrs: { name: "type" }
-  attrs: { name: "values" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-filter-primitive-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "FECOMPOSITE"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "in" }
-  attrs: { name: "in2" }
-  attrs: { name: "k1" }
-  attrs: { name: "k2" }
-  attrs: { name: "k3" }
-  attrs: { name: "k4" }
-  attrs: { name: "operator" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-filter-primitive-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "FEFLOOD"
-  mandatory_ancestor: "SVG"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-filter-primitive-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "FEGAUSSIANBLUR"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "edgemode" }
-  attrs: { name: "in" }
-  attrs: { name: "stddeviation" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-filter-primitive-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "FEMERGE"
-  mandatory_ancestor: "SVG"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-filter-primitive-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "FEMERGENODE"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "in" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "FEOFFSET"
-  mandatory_ancestor: "SVG"
-  attrs: { name: "dx" }
-  attrs: { name: "dy" }
-  attrs: { name: "in" }
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-filter-primitive-attributes"
-  attr_lists: "svg-presentation-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-# ARIA
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "DESC"
-  mandatory_ancestor: "SVG"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
-tags: {
-  html_format: AMP
-  html_format: AMP4ADS
-  html_format: ACTIONS
-  tag_name: "TITLE"
-  spec_name: "svg title"
-  mandatory_ancestor: "SVG"
-  attr_lists: "svg-core-attributes"
-  attr_lists: "svg-style-attr"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#svg"
-}
+# See validator-svg.protoascii.
 
 # 4.8 Links
 # Links are a concept, rather than a tag. See tagspecs for "LINK", "A", etc.
@@ -3100,7 +2185,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "TABLE"
   attrs: { name: "align" }  # Not valid html5 but commonly used and supported.
   attrs: { name: "bgcolor" }  # Not valid html5 but commonly used and supported.
@@ -3122,7 +2206,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "CAPTION"
 }
 # 4.9.3 The colgroup element
@@ -3130,7 +2213,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "COLGROUP"
   attrs: { name: "span" }
 }
@@ -3139,7 +2221,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "COL"
   attrs: { name: "span" }
 }
@@ -3148,7 +2229,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "TBODY"
 }
 # 4.9.6 The thead element
@@ -3156,7 +2236,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "THEAD"
 }
 # 4.9.7 The tfoot element
@@ -3164,7 +2243,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "TFOOT"
 }
 # 4.9.8 The tr element
@@ -3172,7 +2250,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "TR"
   # These attributes are not supported in HTML5, but are widely supported and
   # commonly found.
@@ -3186,7 +2263,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "TD"
   attrs: { name: "align" }  # Not valid html5 but commonly used and supported.
   attrs: { name: "bgcolor" }  # Not valid html5 but commonly used and supported.
@@ -3202,7 +2278,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "TH"
   attrs: { name: "abbr" }
   attrs: { name: "align" }  # Not valid html5 but commonly used and supported.
@@ -3227,7 +2302,6 @@ tags: {
 tags {  # <form method=GET ...>
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "FORM"
   spec_name: "FORM [method=GET]"
   requires_extension: "amp-form"
@@ -3332,66 +2406,6 @@ tags {  # <form method=POST ...>
   }
   attr_lists: "form-name-attr"
 }
-# ACTIONS <form method=POST ...> for POST identity token
-tags: {  # <form method=POST ...>
-  html_format: ACTIONS
-  tag_name: "FORM"
-  spec_name: "FORM [method=POST] (ACTIONS)"
-  requires_extension: "amp-form"
-  disallowed_ancestor: "AMP-APP-BANNER"
-  attrs: { name: "accept" }
-  attrs: { name: "accept-charset" }
-  # For method=POST forms, we require `action-xhr` and disallow `action`.
-  attrs: {
-    name: "action-xhr"
-    mandatory: true
-    value_url: {
-      protocol: "https"
-      allow_relative: false
-    }
-    disallowed_value_regex: "__amp_source_origin|"
-        "{{|}}"    # Mustache is disallowed in action-xhr.
-  }
-  attrs: { name: "autocomplete" }
-  attrs: {
-    name: "crossorigin"
-    value: "amp-viewer-auth-token-via-post"
-    trigger: {
-      also_requires_attr: "action-xhr"
-    }
-  }
-  attrs: {
-    name: "custom-validation-reporting"
-    value: "as-you-go"
-    value: "interact-and-submit"
-    value: "show-all-on-submit"
-    value: "show-first-on-submit"
-  }
-  attrs: { name: "enctype" }
-  attrs: {
-    name: "method"
-    mandatory: true
-    value_casei: "post"
-    dispatch_key: NAME_VALUE_DISPATCH
-  }
-  attrs: { name: "novalidate" }
-  # The target attribute has no effect, and should not be in POST forms.
-  # However, in the past it was required, so disallowing it would break many
-  # pages. See: https://github.com/ampproject/amphtml/issues/5607
-  attrs: {
-    name: "target"
-    value_casei: "_blank"
-    value_casei: "_top"
-  }
-  attrs: {
-    name: "verify-xhr"
-    value_url: {
-      protocol: "https"
-    }
-    disallowed_value_regex: "__amp_source_origin"
-  }
-  attr_lists: "form-name-attr"
-}
 # AMP4EMAIL allows action-xhr and disallows action attribute. It also disallows
 # the use of mustache templates in action-xhr. The only allowed
 # protocol for action-xhr is https. Relative urls are disallowed. It also
@@ -3429,6 +2443,7 @@ tags {  # <form method=GET ...>
     value_casei: "get"
   }
   attrs: { name: "novalidate" }
+  attrs: { name: "xssi-prefix" }
 }
 tags {  # <form method=POST ...>
   html_format: AMP4EMAIL
@@ -3464,12 +2479,12 @@ tags {  # <form method=POST ...>
     dispatch_key: NAME_VALUE_DISPATCH
   }
   attrs: { name: "novalidate" }
+  attrs: { name: "xssi-prefix" }
 }
 # Will add verify state template if requested by users
 tags {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "DIV"
   spec_name: "FORM DIV [verify-error]"
   mandatory_ancestor: "FORM"
@@ -3482,7 +2497,6 @@ tags {
 tags {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "DIV"
   spec_name: "FORM DIV [verify-error][template]"
   mandatory_ancestor: "FORM"
@@ -3500,7 +2514,6 @@ tags {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DIV"
   spec_name: "FORM DIV [submitting]"
   mandatory_ancestor: "FORM"
@@ -3513,7 +2526,6 @@ tags {
 tags {
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   # AMP4EMAIL is omitted. There is additional latency in rendering A4E
   # templates, which reduces the time available to render the template during
   # the submitting state.
@@ -3534,7 +2546,6 @@ tags {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DIV"
   spec_name: "FORM DIV [submit-success]"
   mandatory_ancestor: "FORM"
@@ -3548,7 +2559,6 @@ tags {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DIV"
   spec_name: "FORM DIV [submit-success][template]"
   mandatory_ancestor: "FORM"
@@ -3566,7 +2576,6 @@ tags {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DIV"
   spec_name: "FORM DIV [submit-error]"
   mandatory_ancestor: "FORM"
@@ -3580,7 +2589,6 @@ tags {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DIV"
   spec_name: "FORM DIV [submit-error][template]"
   mandatory_ancestor: "FORM"
@@ -3605,6 +2613,7 @@ attr_lists: {
   }
   attrs: { name: "checked" }
   attrs: { name: "disabled" }
+  attrs: { name: "form" }
   attrs: { name: "height" }
   attrs: {
     disabled_by: "amp4email"
@@ -3612,11 +2621,7 @@ attr_lists: {
   }
   attrs: {
     disabled_by: "amp4email"
-    name: "list"
-  }
-  attrs: { 
-    disabled_by: "amp4email"
-    name: "enterkeyhint"
+    name: "list"
   }
   attrs: {
     disabled_by: "amp4email"
@@ -3682,10 +2687,9 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "LABEL"
   attrs: { name: "for" }
-  spec_url: "https://amp.dev/documentation/components/amp-form"
+  spec_url: "https://amp.dev/documentation/components/amp-form/"
 }
 # 4.10.5 The input element.
 # The input tag is also defined by extensions/amp-inputmask/validator-amp-inputmask.protoascii
@@ -3693,7 +2697,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "INPUT"
   attrs: {
     disabled_by: "amp4email"
@@ -3714,7 +2717,7 @@ tags: {
   }
   attr_lists: "input-common-attr"
   attr_lists: "name-attr"
-  spec_url: "https://amp.dev/documentation/components/amp-form"
+  spec_url: "https://amp.dev/documentation/components/amp-form/"
 }
 tags: {
   html_format: AMP
@@ -3738,7 +2741,7 @@ tags: {
   attr_lists: "input-common-attr"
   attr_lists: "name-attr"
   mandatory_ancestor: "FORM [method=POST]"
-  spec_url: "https://amp.dev/documentation/components/amp-form"
+  spec_url: "https://amp.dev/documentation/components/amp-form/"
 }
 tags: {
   html_format: AMP
@@ -3757,14 +2760,13 @@ tags: {
   attr_lists: "input-common-attr"
   attr_lists: "name-attr"
   mandatory_ancestor: "FORM [method=POST]"
-  spec_url: "https://amp.dev/documentation/components/amp-form"
+  spec_url: "https://amp.dev/documentation/components/amp-form/"
 }
 # 4.10.6 The button element
 tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "BUTTON"
   attrs: {
     name: "disabled"
@@ -3819,7 +2821,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "SELECT"
   attrs: {
     disabled_by: "amp4email"
@@ -3844,23 +2845,21 @@ tags: {
   attrs: { name: "[required]" }
   attrs: { name: "[size]" }
   attr_lists: "name-attr"
-  spec_url: "https://amp.dev/documentation/components/amp-form"
+  spec_url: "https://amp.dev/documentation/components/amp-form/"
 }
 # 4.10.8 The datalist element
 tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DATALIST"
-  spec_url: "https://amp.dev/documentation/components/amp-form"
+  spec_url: "https://amp.dev/documentation/components/amp-form/"
 }
 # 4.10.9 The optgroup element
 tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "OPTGROUP"
   mandatory_parent: "SELECT"
   attrs: { name: "disabled" }
@@ -3868,14 +2867,13 @@ tags: {
   # <amp-bind>
   attrs: { name: "[disabled]" }
   attrs: { name: "[label]" }
-  spec_url: "https://amp.dev/documentation/components/amp-form"
+  spec_url: "https://amp.dev/documentation/components/amp-form/"
 }
 # 4.10.10 The option element
 tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "OPTION"
   attrs: { name: "disabled" }
   attrs: { name: "label" }
@@ -3886,14 +2884,13 @@ tags: {
   attrs: { name: "[label]" }
   attrs: { name: "[selected]" }
   attrs: { name: "[value]" }
-  spec_url: "https://amp.dev/documentation/components/amp-form"
+  spec_url: "https://amp.dev/documentation/components/amp-form/"
 }
 # 4.10.11 The textarea element
 tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "TEXTAREA"
   attrs: { name: "autocomplete" }
   attrs: {
@@ -3963,14 +2960,13 @@ tags: {
   attrs: { name: "[spellcheck]" }
   attrs: { name: "[wrap]" }
   attr_lists: "name-attr"
-  spec_url: "https://amp.dev/documentation/components/amp-form"
+  spec_url: "https://amp.dev/documentation/components/amp-form/"
 }
 # 4.10.13 The output element
 tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "OUTPUT"
   attrs: { name: "for" }
   attrs: { name: "form" }
@@ -3981,7 +2977,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "PROGRESS"
   attrs: { name: "max" }
   attrs: { name: "value" }
@@ -3991,7 +2986,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "METER"
   attrs: { name: "high" }
   attrs: { name: "low" }
@@ -4005,7 +2999,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "FIELDSET"
   attrs: { name: "disabled" }
   # <amp-bind>
@@ -4017,7 +3010,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "LEGEND"
 }
 
@@ -4027,7 +3019,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "DETAILS"
   attrs: {
     name: "open"
@@ -4040,7 +3031,6 @@ tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "SUMMARY"
   mandatory_parent: "DETAILS"
 }
@@ -4052,11 +3042,11 @@ tags: {
 # Note that the type TEXT/PLAIN description is define in
 # validator-amp-mustache.protoascii.
 
-# The three tagspecs below all handle the runtime engine v0.js script. They
+# The three tagspecs below all handle the runtime engine script. They
 # enforce that exactly one runtime script must be included. This tagspec is
 # for the standard runtime, while the one below it is an identical spec but for
 # the LTS runtime, with the only difference being the src attribute. The third
-# is the corresponding spec for AMP4EMAIL and ACTIONS.
+# is the corresponding spec for AMP4EMAIL.
 attr_lists: {
   name: "amphtml-engine-attrs"
   attrs: {
@@ -4073,11 +3063,52 @@ attr_lists: {
     value_casei: "text/javascript"
   }
 }
+attr_lists: {
+  name: "amphtml-module-engine-attrs"
+  attrs: {
+    name: "async"
+    mandatory: true
+    value: ""
+  }
+  attrs: {
+    name: "crossorigin"
+    mandatory: true
+    value: "anonymous"
+  }
+  attrs: {
+    name: "type"
+    mandatory: true
+    value_casei: "module"
+    dispatch_key: NAME_VALUE_DISPATCH
+  }
+}
+attr_lists: {
+  name: "amphtml-nomodule-engine-attrs"
+  attrs: {
+    name: "async"
+    mandatory: true
+    value: ""
+  }
+  attrs: {
+    name: "crossorigin"
+    value: "anonymous"
+  }
+  attrs: {
+    name: "nomodule"
+    mandatory: true
+    value: ""
+  }
+  attrs: {
+    name: "type"
+    value_casei: "text/javascript"
+  }
+}
 tags: {
   html_format: AMP
   tag_name: "SCRIPT"
-  spec_name: "amphtml engine v0.js script"
-  mandatory_alternatives: "amphtml engine v0.js script"
+  spec_name: "amphtml engine script"
+  descriptive_name: "amphtml engine script"
+  mandatory_alternatives: "amphtml engine script"
   unique: true
   mandatory_parent: "HEAD"
   attr_lists: "nonce-attr"
@@ -4094,13 +3125,14 @@ tags: {
       error_message: "contents"
     }
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
 }
 tags: {
   html_format: AMP
   tag_name: "SCRIPT"
-  spec_name: "amphtml engine v0.js lts script"
-  mandatory_alternatives: "amphtml engine v0.js script"
+  spec_name: "amphtml engine script (LTS)"
+  descriptive_name: "amphtml engine script"
+  mandatory_alternatives: "amphtml engine script"
   unique: true
   mandatory_parent: "HEAD"
   attr_lists: "nonce-attr"
@@ -4117,13 +3149,113 @@ tags: {
       error_message: "contents"
     }
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
+}
+tags: {
+  html_format: AMP
+  enabled_by: "transformed"
+  tag_name: "SCRIPT"
+  spec_name: "amphtml module engine script"
+  descriptive_name: "amphtml module engine script"
+  mandatory_alternatives: "amphtml engine script"
+  unique: true
+  mandatory_parent: "HEAD"
+  satisfies: "amphtml module engine script"
+  requires: "amphtml nomodule engine script"
+  attr_lists: "nonce-attr"
+  attr_lists: "amphtml-module-engine-attrs"
+  attrs: {
+    name: "src"
+    mandatory: true
+    value: "https://cdn.ampproject.org/v0.mjs"
+    dispatch_key: NAME_VALUE_DISPATCH
+  }
+  cdata: {
+    whitespace_only: true
+  }
+  # TODO(b/167681900): update spec_url to cover these script release versions
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
+}
+tags: {
+  html_format: AMP
+  enabled_by: "transformed"
+  tag_name: "SCRIPT"
+  spec_name: "amphtml nomodule engine script"
+  descriptive_name: "amphtml nomodule engine script"
+  mandatory_alternatives: "amphtml engine script"
+  unique: true
+  mandatory_parent: "HEAD"
+  satisfies: "amphtml nomodule engine script"
+  requires: "amphtml module engine script"
+  attr_lists: "nonce-attr"
+  attr_lists: "amphtml-nomodule-engine-attrs"
+  attrs: {
+    name: "src"
+    mandatory: true
+    value: "https://cdn.ampproject.org/v0.js"
+    dispatch_key: NAME_VALUE_DISPATCH
+  }
+  cdata: {
+    whitespace_only: true
+  }
+  # TODO(b/167681900): update spec_url to cover these script release versions
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
+}
+tags: {
+  html_format: AMP
+  enabled_by: "transformed"
+  tag_name: "SCRIPT"
+  spec_name: "amphtml module LTS engine script"
+  descriptive_name: "amphtml module LTS engine script"
+  mandatory_alternatives: "amphtml engine script"
+  unique: true
+  mandatory_parent: "HEAD"
+  satisfies: "amphtml module LTS engine script"
+  requires: "amphtml nomodule LTS engine script"
+  attr_lists: "nonce-attr"
+  attr_lists: "amphtml-module-engine-attrs"
+  attrs: {
+    name: "src"
+    mandatory: true
+    value: "https://cdn.ampproject.org/lts/v0.mjs"
+    dispatch_key: NAME_VALUE_DISPATCH
+  }
+  cdata: {
+    whitespace_only: true
+  }
+  # TODO(b/167681900): update spec_url to cover these script release versions
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
+}
+tags: {
+  html_format: AMP
+  enabled_by: "transformed"
+  tag_name: "SCRIPT"
+  spec_name: "amphtml nomodule LTS engine script"
+  descriptive_name: "amphtml nomdule LTS engine script"
+  mandatory_alternatives: "amphtml engine script"
+  unique: true
+  mandatory_parent: "HEAD"
+  satisfies: "amphtml nomodule LTS engine script"
+  requires: "amphtml module LTS engine script"
+  attr_lists: "nonce-attr"
+  attr_lists: "amphtml-nomodule-engine-attrs"
+  attrs: {
+    name: "src"
+    mandatory: true
+    value: "https://cdn.ampproject.org/lts/v0.js"
+    dispatch_key: NAME_VALUE_DISPATCH
+  }
+  cdata: {
+    whitespace_only: true
+  }
+  # TODO(b/167681900): update spec_url to cover these script release versions
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
 }
 tags: {
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "SCRIPT"
-  spec_name: "amphtml engine v0.js script [AMP4EMAIL,ACTIONS]"
+  spec_name: "amphtml engine script [AMP4EMAIL]"
+  descriptive_name: "amphtml engine script"
   mandatory: true
   unique: true
   mandatory_parent: "HEAD"
@@ -4141,12 +3273,13 @@ tags: {
       error_message: "contents"
     }
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
 }
 tags: {
   html_format: AMP4ADS
   tag_name: "SCRIPT"
-  spec_name: "amp4ads engine amp4ads-v0.js script"
+  spec_name: "amp4ads engine script"
+  descriptive_name: "amphtml engine script"
   mandatory: true
   unique: true
   mandatory_parent: "HEAD"
@@ -4164,16 +3297,16 @@ tags: {
       error_message: "contents"
     }
   }
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
 }
 # JSON Linked Data
 tags: {
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   spec_name: "script type=application/ld+json"
+  descriptive_name: "script type=application/ld+json"
   attr_lists: "nonce-attr"
   attrs: {
     name: "type"
@@ -4191,7 +3324,6 @@ tags: {
 # AMP RTC (Real Time Config)
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   spec_name: "script id=amp-rtc"
   unique: true
@@ -4218,9 +3350,9 @@ tags: {
 # AMP IMA VIDEO
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SCRIPT"
   spec_name: "amp-ima-video > script[type=application/json]"
+  descriptive_name: "script type=application/ld+json"
   mandatory_parent: "AMP-IMA-VIDEO"
   attrs: {
     name: "type"
@@ -4235,28 +3367,66 @@ tags: {
     }
   }
 }
+# Enables early styling on fast failure to load v0.js or v0.mjs. See GitHub #22543.
+tags: {
+  html_format: AMP
+  enabled_by: "transformed"
+  tag_name: "SCRIPT"
+  spec_name: "script amp-onerror (v0.js or v0.mjs)"
+  descriptive_name: "script amp-onerror"
+  unique: true
+  mandatory_parent: "HEAD"
+  attrs: {
+    name: "amp-onerror"
+    value: ""
+    mandatory: true
+    dispatch_key: NAME_VALUE_DISPATCH
+  }
+  cdata: {
+    mandatory_cdata: "[].slice.call(document.querySelectorAll(\"script[src*='/v0.js'],script[src*='/v0.mjs']\")).forEach(function(s){s.onerror=function(){document.querySelector('style[amp-boilerplate]').textContent=''}})"
+  }
+}
+# Enables early styling on fast failure to load v0.js. See GitHub #22543.
+tags: {
+  html_format: AMP
+  tag_name: "SCRIPT"
+  spec_name: "script amp-onerror (v0.js)"
+  descriptive_name: "script amp-onerror"
+  unique: true
+  mandatory_parent: "HEAD"
+  attrs: {
+    name: "amp-onerror"
+    value: ""
+    mandatory: true
+    dispatch_key: NAME_VALUE_DISPATCH
+  }
+  cdata: {
+    mandatory_cdata: "document.querySelector(\"script[src*='/v0.js']\").onerror=function(){document.querySelector('style[amp-boilerplate]').textContent=''}"
+  }
+}
+
 # Specific script tags for custom elements and runtime imports.
 # 4.11.2 The noscript element
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   disabled_by: "transformed"
   tag_name: "NOSCRIPT"
   spec_name: "noscript enclosure for boilerplate"
+  descriptive_name: "noscript enclosure for boilerplate"
   mandatory: true
   unique: true
   mandatory_parent: "HEAD"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   enabled_by: "transformed"
   tag_name: "NOSCRIPT"
   spec_name: "noscript enclosure for boilerplate (transformed)"
+  descriptive_name: "noscript enclosure for boilerplate"
   unique: true
   mandatory_parent: "HEAD"
-  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate?format=websites"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/?format=websites"
 }
 # We allow noscript in the body to contain tags otherwise disallowed by AMP.
 tags: {
@@ -4270,66 +3440,54 @@ tags: {
 # 4.11.3 The template element
 # See extensions/amp-mustache/validator-amp-mustache.protoascii.
 
-# 11 Obsolute features
+# 11 Obsolete features
 # 11.2 Non-conforming features
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "ACRONYM"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "BIG"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "CENTER"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "DIR"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "HGROUP"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "LISTING"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "MULTICOL"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "NEXTID"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "NOBR"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SPACER"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "STRIKE"
 }
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "TT"
 }
 
@@ -4339,7 +3497,6 @@ tags: {
 # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   tag_name: "SLOT"
   attr_lists: "name-attr"
 }
@@ -4452,13 +3609,50 @@ attr_lists: {
 tags: {  # <amp-img>
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "AMP-IMG"
   attrs: { name: "alt" }
   attrs: { name: "attribution" }
+  attrs: { name: "crossorigin" }
+  attrs: { name: "object-fit" }
+  attrs: { name: "object-position" }
+  attrs: { name: "placeholder" }
+  attrs: { name: "referrerpolicy" }
+  # <amp-bind>
+  attrs: { name: "[alt]" }
+  attrs: { name: "[attribution]" }
+  attrs: { name: "[src]" }
+  attrs: { name: "[srcset]" }
+  attr_lists: "extended-amp-global"
+  attr_lists: "lightboxable-elements"
+  attr_lists: "mandatory-src-or-srcset"
+  spec_url: "https://amp.dev/documentation/components/amp-img/"
+  amp_layout: {
+    supported_layouts: FILL
+    supported_layouts: FIXED
+    supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
+    supported_layouts: INTRINSIC
+    supported_layouts: NODISPLAY
+    supported_layouts: RESPONSIVE
+  }
+}
+# A duplicate of amp-img, but requires i-amphtml-ssr flag.
+tags: {  # <amp-img i-amphtml-ssr>
+  html_format: AMP
+  enabled_by: "transformed"
+  tag_name: "AMP-IMG"
+  spec_name: "amp-img (transformed)"
+  attrs: {
+    dispatch_key: NAME_DISPATCH
+    name: "i-amphtml-ssr"
+    mandatory: true
+  }
+  attrs: { name: "alt" }
+  attrs: { name: "attribution" }
   attrs: { name: "object-fit" }
   attrs: { name: "object-position" }
   attrs: { name: "placeholder" }
+  attrs: { name: "referrerpolicy" }
   # <amp-bind>
   attrs: { name: "[alt]" }
   attrs: { name: "[attribution]" }
@@ -4467,7 +3661,7 @@ tags: {  # <amp-img>
   attr_lists: "extended-amp-global"
   attr_lists: "lightboxable-elements"
   attr_lists: "mandatory-src-or-srcset"
-  spec_url: "https://amp.dev/documentation/components/amp-img"
+  spec_url: "https://amp.dev/documentation/components/amp-img/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
@@ -4492,12 +3686,13 @@ tags: {  # <amp-img>
   # <amp-bind>
   attrs: { name: "[alt]" }
   attrs: { name: "[attribution]" }
-  spec_url: "https://amp.dev/documentation/components/amp-img"
+  spec_url: "https://amp.dev/documentation/components/amp-img/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT
     supported_layouts: FLEX_ITEM
+    supported_layouts: INTRINSIC
     supported_layouts: NODISPLAY
     supported_layouts: RESPONSIVE
   }
@@ -4506,10 +3701,9 @@ tags: {  # <amp-layout>
   html_format: AMP
   html_format: AMP4ADS
   html_format: AMP4EMAIL
-  html_format: ACTIONS
   tag_name: "AMP-LAYOUT"
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-layout"
+  spec_url: "https://amp.dev/documentation/components/amp-layout/"
   amp_layout: {
     supported_layouts: FILL
     supported_layouts: FIXED
@@ -4524,7 +3718,6 @@ tags: {  # <amp-layout>
 tags: {  # <amp-pixel>
   html_format: AMP
   html_format: AMP4ADS
-  html_format: ACTIONS
   tag_name: "AMP-PIXEL"
   attrs: { name: "allow-ssr-img" }
   attrs: {
@@ -4542,7 +3735,7 @@ tags: {  # <amp-pixel>
     disallowed_value_regex: "__amp_source_origin"
   }
   attr_lists: "extended-amp-global"
-  spec_url: "https://amp.dev/documentation/components/amp-pixel"
+  spec_url: "https://amp.dev/documentation/components/amp-pixel/"
   amp_layout {
     defines_default_height: true
     defines_default_width: true
@@ -4554,7 +3747,6 @@ tags: {  # <amp-pixel>
 # Transformed AMP specific tags.
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   enabled_by: "transformed"
   tag_name: "I-AMPHTML-SIZER"
   spec_name: "I-AMPHTML-SIZER-RESPONSIVE"
@@ -4570,11 +3762,14 @@ tags: {
     }
     css_declaration: { name: "padding-top" }
   }
+  attrs: {
+    name: "i-amphtml-disable-ar"
+    value: ""
+  }
 }
 
 tags: {
   html_format: AMP
-  html_format: ACTIONS
   enabled_by: "transformed"
   tag_name: "I-AMPHTML-SIZER"
   spec_name: "I-AMPHTML-SIZER-INTRINSIC"
@@ -4585,6 +3780,10 @@ tags: {
     mandatory: true
     dispatch_key: NAME_DISPATCH
   }
+  attrs: {
+    name: "i-amphtml-disable-ar"
+    value: ""
+  }
 }
 
 tags: {
@@ -4603,6 +3802,11 @@ tags: {
     value: "true"
     mandatory: true
   }
+  attrs: {
+    name: "class"
+    value: "i-amphtml-intrinsic-sizer"
+    mandatory: true
+  }
   attrs: {
     name: "role"
     value: "presentation"
@@ -4614,6 +3818,69 @@ tags: {
     mandatory: true
   }
 }
+tags: {
+  html_format: AMP
+  enabled_by: "transformed"
+  tag_name: "IMG"
+  spec_name: "amp-img > img (transformed)"
+  # Ideally we'd be able to use regular amp-img parent, but runtime currently
+  # requires an i-amphtml-ssr attribute on the amp-img. We could do away with
+  # that, though.
+  mandatory_parent: "amp-img (transformed)"
+  attrs: { name: "alt" }
+  attrs: { name: "attribution" }
+  attrs: { name: "height" }
+  attrs: { name: "object-fit" }
+  attrs: { name: "object-position" }
+  attrs: { name: "referrerpolicy" }
+  attrs: { name: "sizes" }
+  attrs: { name: "title" }
+  attrs: { name: "width" }
+  attr_lists: "mandatory-src-or-srcset"
+  # SSR requires these explicit attributes
+  attrs: {
+    name: "class"
+    value_regex: "i-amphtml-fill-content\\s+i-amphtml-replaced-content|"
+        "i-amphtml-replaced-content\\s+i-amphtml-fill-content"
+    mandatory: true
+  }
+  attrs: {
+    name: "decoding"
+    value: "async"
+    mandatory: true
+  }
+  attrs: {
+    name: "loading"
+    value: "lazy"
+    value: "eager"
+  }
+}
+tags: {
+  html_format: AMP
+  enabled_by: "transformed"
+  tag_name: "IMG"
+  spec_name: "amp-img > img[placeholder] (transformed)"
+  mandatory_parent: "amp-img (transformed)"
+  attrs: { name: "alt" }
+  attrs: { name: "attribution" }
+  attrs: {
+    name: "class"
+    value: "i-amphtml-blurry-placeholder"
+    mandatory: true
+  }
+  attrs: { name: "object-fit" }
+  attrs: { name: "object-position" }
+  attrs: {
+    name: "placeholder"
+    value: ""
+    mandatory: true
+    dispatch_key: NAME_DISPATCH
+  }
+  attrs: { name: "referrerpolicy" }
+  attrs: { name: "sizes" }
+  attrs: { name: "title" }
+  attr_lists: "mandatory-src-or-srcset"
+}
 
 # AMP Layout attributes: implied for TagSpecs with amp_layout field
 # set. Note that while these attributes are defined as optional here,
@@ -4643,13 +3910,11 @@ attr_lists: {
   name: "nonce-attr"
   attrs: {
     disabled_by: "amp4email"
-    disabled_by: "transformed"
     name: "nonce"
   }
 }
 
-# AMP Extension attributes. These attributes are used in every AMP
-# extension script tag
+# AMP Extension attributes.
 attr_lists: {
   name: "common-extension-attrs"
   attrs: {
@@ -4662,7 +3927,6 @@ attr_lists: {
     value: "anonymous"
   }
   attrs: {
-    disabled_by: "transformed"
     disabled_by: "amp4email"
     name: "nonce"
   }
@@ -5455,12 +4719,11 @@ attr_lists: {
   # 3.2.5 HTML5 Global attributes.
   attrs: { name: "accesskey" }
   attrs: {
-    # attribute "class" for transformed is handled within the Validator engine.
-    # If this changes, please be sure to also update:
-    # amp-experiment 1.0 implementation.
-    disabled_by: "transformed"
     name: "class"
-    disallowed_value_regex: "(^|\\W)i-amphtml-"
+    # attribute "class" is handled within the Validator engine, since we need to
+    # handle transformed and non-transformed cases while still allowing "class"
+    # attribute generically.
+    # disallowed_value_regex: "(^|[\t\n\f\r ])i-amphtml-"
   }
   attrs: { name: "dir" }
   attrs: { name: "draggable" }
@@ -5755,6 +5018,12 @@ attr_lists: {
     name: "subscriptions-service"
     requires_extension: "amp-subscriptions"
   }
+  # amp-subscriptions-google specific attributes, see
+  # https://amp.dev/documentation/components/amp-subscriptions-google
+  attrs: {
+    name: "subscriptions-google-rtc"
+    requires_extension: "amp-subscriptions-google"
+  }
   # amp-next-page specific attributes, see
   # https://amp.dev/documentation/components/amp-next-page
   attrs: {
@@ -5804,6 +5073,11 @@ attr_lists: {
   attrs: { name: "[class]" }
   attrs: { name: "[hidden]" }
   attrs: { name: "[text]" }
+  attrs: {
+    enabled_by: "transformed"
+    name: "i-amphtml-binding"
+    value: ""
+  }
   # <amp-sidebar>
   attrs: {
     name: "autoscroll"
@@ -5836,99 +5110,101 @@ error_specificity { code: WARNING_EXTENSION_UNUSED specificity: 16 }
 error_specificity { code: WARNING_EXTENSION_DEPRECATED_VERSION specificity: 17 }
 error_specificity { code: NON_LTS_SCRIPT_AFTER_LTS specificity: 18 }
 error_specificity { code: LTS_SCRIPT_AFTER_NON_LTS specificity: 19 }
-error_specificity { code: DISALLOWED_TAG specificity: 20 }
-error_specificity { code: DISALLOWED_ATTR specificity: 21 }
-error_specificity { code: INVALID_ATTR_VALUE specificity: 22 }
-error_specificity { code: DUPLICATE_ATTRIBUTE specificity: 23 }
-error_specificity { code: ATTR_VALUE_REQUIRED_BY_LAYOUT specificity: 24 }
-error_specificity { code: MANDATORY_ATTR_MISSING specificity: 25 }
-error_specificity { code: MANDATORY_ONEOF_ATTR_MISSING specificity: 26 }
-error_specificity { code: MANDATORY_ANYOF_ATTR_MISSING specificity: 27 }
-error_specificity { code: ATTR_REQUIRED_BUT_MISSING specificity: 28 }
-error_specificity { code: DUPLICATE_UNIQUE_TAG specificity: 29 }
-error_specificity { code: DUPLICATE_UNIQUE_TAG_WARNING specificity: 30 }
-error_specificity { code: STYLESHEET_TOO_LONG specificity: 31 }
-error_specificity { code: STYLESHEET_AND_INLINE_STYLE_TOO_LONG specificity: 32 }
-error_specificity { code: INLINE_STYLE_TOO_LONG specificity: 33 }
-error_specificity { code: CSS_SYNTAX_INVALID_AT_RULE specificity: 34 }
+error_specificity { code: INCORRECT_SCRIPT_RELEASE_VERSION specificity: 20 }
+error_specificity { code: DISALLOWED_TAG specificity: 21 }
+error_specificity { code: DISALLOWED_ATTR specificity: 22 }
+error_specificity { code: INVALID_ATTR_VALUE specificity: 23 }
+error_specificity { code: DUPLICATE_ATTRIBUTE specificity: 24 }
+error_specificity { code: ATTR_VALUE_REQUIRED_BY_LAYOUT specificity: 25 }
+error_specificity { code: MANDATORY_ATTR_MISSING specificity: 26 }
+error_specificity { code: MANDATORY_ONEOF_ATTR_MISSING specificity: 27 }
+error_specificity { code: MANDATORY_ANYOF_ATTR_MISSING specificity: 28 }
+error_specificity { code: ATTR_REQUIRED_BUT_MISSING specificity: 29 }
+error_specificity { code: DUPLICATE_UNIQUE_TAG specificity: 30 }
+error_specificity { code: DUPLICATE_UNIQUE_TAG_WARNING specificity: 31 }
+error_specificity { code: STYLESHEET_TOO_LONG specificity: 32 }
+error_specificity { code: STYLESHEET_AND_INLINE_STYLE_TOO_LONG specificity: 33 }
+error_specificity { code: INLINE_STYLE_TOO_LONG specificity: 34 }
+error_specificity { code: INLINE_SCRIPT_TOO_LONG specificity: 35 }
+error_specificity { code: CSS_SYNTAX_INVALID_AT_RULE specificity: 36 }
 error_specificity {
-  code: MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE specificity: 35
-}
-error_specificity { code: INVALID_PROPERTY_VALUE_IN_ATTR_VALUE specificity: 36 }
-error_specificity { code: DISALLOWED_PROPERTY_IN_ATTR_VALUE specificity: 37 }
-error_specificity { code: MUTUALLY_EXCLUSIVE_ATTRS specificity: 38 }
-error_specificity { code: UNESCAPED_TEMPLATE_IN_ATTR_VALUE specificity: 39 }
-error_specificity { code: TEMPLATE_PARTIAL_IN_ATTR_VALUE specificity: 40 }
-error_specificity { code: TEMPLATE_IN_ATTR_NAME specificity: 41 }
+  code: MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE specificity: 37
+}
+error_specificity { code: INVALID_PROPERTY_VALUE_IN_ATTR_VALUE specificity: 38 }
+error_specificity { code: DISALLOWED_PROPERTY_IN_ATTR_VALUE specificity: 39 }
+error_specificity { code: MUTUALLY_EXCLUSIVE_ATTRS specificity: 40 }
+error_specificity { code: UNESCAPED_TEMPLATE_IN_ATTR_VALUE specificity: 41 }
+error_specificity { code: TEMPLATE_PARTIAL_IN_ATTR_VALUE specificity: 42 }
+error_specificity { code: TEMPLATE_IN_ATTR_NAME specificity: 43 }
 error_specificity {
-  code: INCONSISTENT_UNITS_FOR_WIDTH_AND_HEIGHT specificity: 42
-}
-error_specificity { code: MISSING_LAYOUT_ATTRIBUTES specificity: 43 }
-error_specificity { code: IMPLIED_LAYOUT_INVALID specificity: 44 }
-error_specificity { code: SPECIFIED_LAYOUT_INVALID specificity: 45 }
-error_specificity { code: ATTR_DISALLOWED_BY_IMPLIED_LAYOUT specificity: 46 }
-error_specificity { code: ATTR_DISALLOWED_BY_SPECIFIED_LAYOUT specificity: 47 }
-error_specificity { code: DUPLICATE_DIMENSION specificity: 48 }
-error_specificity { code: DISALLOWED_RELATIVE_URL specificity: 49 }
-error_specificity { code: MISSING_URL specificity: 50 }
-error_specificity { code: DISALLOWED_DOMAIN specificity: 51 }
-error_specificity { code: INVALID_URL_PROTOCOL specificity: 52 }
-error_specificity { code: INVALID_URL specificity: 53 }
-error_specificity { code: DISALLOWED_STYLE_ATTR specificity: 54 }
-error_specificity { code: CSS_SYNTAX_STRAY_TRAILING_BACKSLASH specificity: 55 }
-error_specificity { code: CSS_SYNTAX_UNTERMINATED_COMMENT specificity: 56 }
-error_specificity { code: CSS_SYNTAX_UNTERMINATED_STRING specificity: 57 }
-error_specificity { code: CSS_SYNTAX_BAD_URL specificity: 58 }
+  code: INCONSISTENT_UNITS_FOR_WIDTH_AND_HEIGHT specificity: 44
+}
+error_specificity { code: MISSING_LAYOUT_ATTRIBUTES specificity: 45 }
+error_specificity { code: IMPLIED_LAYOUT_INVALID specificity: 46 }
+error_specificity { code: SPECIFIED_LAYOUT_INVALID specificity: 47 }
+error_specificity { code: ATTR_DISALLOWED_BY_IMPLIED_LAYOUT specificity: 48 }
+error_specificity { code: ATTR_DISALLOWED_BY_SPECIFIED_LAYOUT specificity: 49 }
+error_specificity { code: DUPLICATE_DIMENSION specificity: 50 }
+error_specificity { code: DISALLOWED_RELATIVE_URL specificity: 51 }
+error_specificity { code: MISSING_URL specificity: 52 }
+error_specificity { code: DISALLOWED_DOMAIN specificity: 53 }
+error_specificity { code: INVALID_URL_PROTOCOL specificity: 54 }
+error_specificity { code: INVALID_URL specificity: 55 }
+error_specificity { code: DISALLOWED_STYLE_ATTR specificity: 56 }
+error_specificity { code: CSS_SYNTAX_STRAY_TRAILING_BACKSLASH specificity: 57 }
+error_specificity { code: CSS_SYNTAX_UNTERMINATED_COMMENT specificity: 58 }
+error_specificity { code: CSS_SYNTAX_UNTERMINATED_STRING specificity: 59 }
+error_specificity { code: CSS_SYNTAX_BAD_URL specificity: 60 }
 error_specificity {
-  code: CSS_SYNTAX_EOF_IN_PRELUDE_OF_QUALIFIED_RULE specificity: 59
+  code: CSS_SYNTAX_EOF_IN_PRELUDE_OF_QUALIFIED_RULE specificity: 61
 }
-error_specificity { code: CSS_SYNTAX_INVALID_DECLARATION specificity: 60 }
-error_specificity { code: CSS_SYNTAX_INCOMPLETE_DECLARATION specificity: 61 }
-error_specificity { code: CSS_SYNTAX_ERROR_IN_PSEUDO_SELECTOR specificity: 62 }
-error_specificity { code: CSS_SYNTAX_MISSING_SELECTOR specificity: 63 }
-error_specificity { code: CSS_SYNTAX_NOT_A_SELECTOR_START specificity: 64 }
+error_specificity { code: CSS_SYNTAX_INVALID_DECLARATION specificity: 62 }
+error_specificity { code: CSS_SYNTAX_INCOMPLETE_DECLARATION specificity: 63 }
+error_specificity { code: CSS_SYNTAX_ERROR_IN_PSEUDO_SELECTOR specificity: 64 }
+error_specificity { code: CSS_SYNTAX_MISSING_SELECTOR specificity: 65 }
+error_specificity { code: CSS_SYNTAX_NOT_A_SELECTOR_START specificity: 66 }
 error_specificity {
-  code: CSS_SYNTAX_UNPARSED_INPUT_REMAINS_IN_SELECTOR specificity: 65
-}
-error_specificity { code: CSS_SYNTAX_MISSING_URL specificity: 66 }
-error_specificity { code: CSS_SYNTAX_DISALLOWED_DOMAIN specificity: 67 }
-error_specificity { code: CSS_SYNTAX_INVALID_URL specificity: 68 }
-error_specificity { code: CSS_SYNTAX_INVALID_URL_PROTOCOL specificity: 69 }
-error_specificity { code: CSS_SYNTAX_DISALLOWED_RELATIVE_URL specificity: 70 }
-error_specificity { code: INCORRECT_NUM_CHILD_TAGS specificity: 71 }
-error_specificity { code: DISALLOWED_CHILD_TAG_NAME specificity: 72 }
-error_specificity { code: DISALLOWED_FIRST_CHILD_TAG_NAME specificity: 73 }
-error_specificity { code: CSS_SYNTAX_INVALID_ATTR_SELECTOR specificity: 74 }
+  code: CSS_SYNTAX_UNPARSED_INPUT_REMAINS_IN_SELECTOR specificity: 67
+}
+error_specificity { code: CSS_SYNTAX_MISSING_URL specificity: 68 }
+error_specificity { code: CSS_SYNTAX_DISALLOWED_DOMAIN specificity: 69 }
+error_specificity { code: CSS_SYNTAX_INVALID_URL specificity: 70 }
+error_specificity { code: CSS_SYNTAX_INVALID_URL_PROTOCOL specificity: 71 }
+error_specificity { code: CSS_SYNTAX_DISALLOWED_RELATIVE_URL specificity: 72 }
+error_specificity { code: INCORRECT_NUM_CHILD_TAGS specificity: 73 }
+error_specificity { code: DISALLOWED_CHILD_TAG_NAME specificity: 74 }
+error_specificity { code: DISALLOWED_FIRST_CHILD_TAG_NAME specificity: 75 }
+error_specificity { code: CSS_SYNTAX_INVALID_ATTR_SELECTOR specificity: 76 }
 error_specificity {
-  code: CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT specificity: 75
+  code: CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT specificity: 77
 }
-error_specificity { code: MANDATORY_REFERENCE_POINT_MISSING specificity: 76 }
-error_specificity { code: DUPLICATE_REFERENCE_POINT specificity: 77 }
-error_specificity { code: TAG_REFERENCE_POINT_CONFLICT specificity: 78 }
+error_specificity { code: MANDATORY_REFERENCE_POINT_MISSING specificity: 78 }
+error_specificity { code: DUPLICATE_REFERENCE_POINT specificity: 79 }
+error_specificity { code: TAG_REFERENCE_POINT_CONFLICT specificity: 80 }
 error_specificity {
   code: CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT_SINGULAR
-  specificity: 79
+  specificity: 81
 }
-error_specificity { code: CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE specificity: 80 }
+error_specificity { code: CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE specificity: 82 }
 error_specificity {
   code: CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE_WITH_HINT
-  specificity: 81
+  specificity: 83
 }
 error_specificity {
   code: CSS_SYNTAX_PROPERTY_DISALLOWED_WITHIN_AT_RULE
-  specificity: 82
+  specificity: 84
 }
 error_specificity {
   code: CSS_SYNTAX_PROPERTY_DISALLOWED_TOGETHER_WITH
-  specificity: 83
+  specificity: 85
 }
 error_specificity {
   code: CSS_SYNTAX_PROPERTY_REQUIRES_QUALIFICATION
-  specificity: 84
+  specificity: 86
 }
 error_specificity {
   code: BASE_TAG_MUST_PRECEED_ALL_URLS
-  specificity: 85
+  specificity: 87
 }
 error_specificity { code: DISALLOWED_SCRIPT_TAG specificity: 102 }
 error_specificity { code: GENERAL_DISALLOWED_TAG specificity: 103 }
@@ -5983,27 +5259,30 @@ error_specificity {
   code: CSS_SYNTAX_DISALLOWED_PSEUDO_ELEMENT
   specificity: 122
 }
-
 error_specificity {
-  code: INVALID_UTF8
+  code: CSS_SYNTAX_DISALLOWED_IMPORTANT
   specificity: 123
 }
 error_specificity {
-  code: CSS_EXCESSIVELY_NESTED
+  code: INVALID_UTF8
   specificity: 124
 }
 error_specificity {
-  code: DOCUMENT_SIZE_LIMIT_EXCEEDED
+  code: CSS_EXCESSIVELY_NESTED
   specificity: 125
 }
 error_specificity {
-  code: VALUE_SET_MISMATCH
+  code: DOCUMENT_SIZE_LIMIT_EXCEEDED
   specificity: 126
 }
 error_specificity {
-  code: INVALID_DOCTYPE_HTML
+  code: VALUE_SET_MISMATCH
   specificity: 127
 }
+error_specificity {
+  code: INVALID_DOCTYPE_HTML
+  specificity: 128
+}
 error_specificity {
   code: DEV_MODE_ONLY
   # This should always trump any other error. It is asserting
@@ -6019,8 +5298,7 @@ error_formats {
 }
 error_formats {
   code: INVALID_DOCTYPE_HTML
-  format: "Invalid or missing doctype declaration. Should be <!doctype html>. "
-          "See https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/"
+  format: "Invalid or missing doctype declaration. Should be '!doctype html'."
 }
 error_formats {
   code: MANDATORY_TAG_MISSING
@@ -6055,7 +5333,11 @@ error_formats {
           "deprecated version. Please use a more recent version of this "
           "extension. This may become an error in the future."
 }
-
+error_formats {
+  code: INCORRECT_SCRIPT_RELEASE_VERSION
+  format: "The script version for '%1' is a %2 version which mismatches "
+          "with the first script on the page using the %3 version."
+}
 error_formats {
   code: NON_LTS_SCRIPT_AFTER_LTS
   format: "'%1' must use the LTS version to correspond with the first script "
@@ -6066,7 +5348,6 @@ error_formats {
   format: "'%1' must use the non-LTS version to correspond with the first "
           "script in the page, which does not use LTS."
 }
-
 error_formats {
   code: ATTR_REQUIRED_BUT_MISSING
   format: "The attribute '%1' in tag '%2' is missing or incorrect, but "
@@ -6145,6 +5426,10 @@ error_formats {
   format: "The inline style specified in tag '%1' is too long - it "
           "contains %2 bytes whereas the limit is %3 bytes."
 }
+error_formats {
+  code: INLINE_SCRIPT_TOO_LONG
+  format: "The inline script is %1 bytes, which exceeds the limit of %2 bytes."
+}
 error_formats {
   code: MANDATORY_CDATA_MISSING_OR_INCORRECT
   format: "The mandatory text inside tag '%1' is missing or incorrect."
@@ -6457,6 +5742,10 @@ error_formats {
   format: "CSS syntax error in tag '%1' - the property '%2' is set "
           "to the disallowed value '%3'. Allowed values: %4."
 }
+error_formats {
+  code: CSS_SYNTAX_DISALLOWED_IMPORTANT
+  format: "Usage of the !important CSS qualifier is not allowed."
+}
 error_formats {
   code: CSS_SYNTAX_PROPERTY_DISALLOWED_WITHIN_AT_RULE
   format: "CSS syntax error in tag '%1' - the property '%2' is disallowed "
@@ -6514,3 +5803,9 @@ error_formats {
   format: "Tag 'html' marked with attribute 'data-ampdevmode'. Validator "
           "will suppress errors regarding any other tag with this attribute."
 }
+error_formats {
+  code: AMP_EMAIL_MISSING_STRICT_CSS_ATTR
+  format: "Tag 'html' marked with attribute 'amp4email' is missing the "
+          "corresponding attribute 'data-css-strict' for enabling strict "
+          "CSS validation. This may become an error in the future."
+}
diff --git a/validator/validator-svg.protoascii b/validator/validator-svg.protoascii
new file mode 100644
index 0000000000000..f1b0b4b28b5ad
--- /dev/null
+++ b/validator/validator-svg.protoascii
@@ -0,0 +1,1069 @@
+#
+# Copyright 2021 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.
+#
+
+# 4.7.15 SVG
+# We allow some limited embedded SVG tags. We do not allow inline styles
+# or embedding any external resources.
+
+# Attribute lists: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
+attr_lists: {
+  name: "svg-conditional-processing-attributes"
+  attrs: { name: "requiredextensions" }
+  attrs: { name: "requiredfeatures" }
+  attrs: { name: "systemlanguage" }
+}
+attr_lists: {
+  name: "svg-core-attributes"
+  attrs: { name: "xml:lang" }
+  attrs: { name: "xml:space" }
+  attrs: { name: "xmlns" }
+  attrs: { name: "xmlns:xlink" }
+}
+attr_lists: {
+  name: "svg-filter-primitive-attributes"
+  attrs: { name: "height" }
+  attrs: { name: "result" }
+  attrs: { name: "width" }
+  attrs: { name: "x" }
+  attrs: { name: "y" }
+}
+attr_lists: {
+  name: "svg-presentation-attributes"
+  attrs: { name: "alignment-baseline" }
+  attrs: { name: "baseline-shift" }
+  attrs: { name: "clip" }
+  attrs: { name: "clip-path" }
+  attrs: { name: "clip-rule" }
+  attrs: { name: "color" }
+  attrs: { name: "color-interpolation" }
+  attrs: { name: "color-interpolation-filters" }
+  attrs: { name: "color-profile" }
+  attrs: { name: "color-rendering" }
+  attrs: { name: "cursor" }
+  attrs: { name: "direction" }
+  attrs: { name: "display" }
+  attrs: { name: "dominant-baseline" }
+  attrs: { name: "enable-background" }
+  attrs: { name: "fill" }
+  attrs: { name: "fill-opacity" }
+  attrs: { name: "fill-rule" }
+  attrs: { name: "filter" }
+  attrs: { name: "flood-color" }
+  attrs: { name: "flood-opacity" }
+  attrs: { name: "focusable" }
+  attrs: { name: "font-family" }
+  attrs: { name: "font-size" }
+  attrs: { name: "font-size-adjust" }
+  attrs: { name: "font-stretch" }
+  attrs: { name: "font-style" }
+  attrs: { name: "font-variant" }
+  attrs: { name: "font-weight" }
+  attrs: { name: "glyph-orientation-horizontal" }
+  attrs: { name: "glyph-orientation-vertical" }
+  attrs: { name: "image-rendering" }
+  attrs: { name: "kerning" }
+  attrs: { name: "letter-spacing" }
+  attrs: { name: "lighting-color" }
+  attrs: { name: "marker-end" }
+  attrs: { name: "marker-mid" }
+  attrs: { name: "marker-start" }
+  attrs: { name: "mask" }
+  attrs: { name: "opacity" }
+  attrs: { name: "overflow" }
+  attrs: { name: "pointer-events" }
+  attrs: { name: "shape-rendering" }
+  attrs: { name: "stop-color" }
+  attrs: { name: "stop-opacity" }
+  attrs: { name: "stroke" }
+  attrs: { name: "stroke-dasharray" }
+  attrs: { name: "stroke-dashoffset" }
+  attrs: { name: "stroke-linecap" }
+  attrs: { name: "stroke-linejoin" }
+  attrs: { name: "stroke-miterlimit" }
+  attrs: { name: "stroke-opacity" }
+  attrs: { name: "stroke-width" }
+  attrs: { name: "text-anchor" }
+  attrs: { name: "text-decoration" }
+  attrs: { name: "text-rendering" }
+  attrs: { name: "unicode-bidi" }
+  attrs: { name: "vector-effect" }
+  attrs: { name: "visibility" }
+  attrs: { name: "word-spacing" }
+  attrs: { name: "writing-mode" }
+}
+attr_lists: {
+  name: "svg-transfer-function-attributes"
+  attrs: { name: "amplitude" }
+  attrs: { name: "exponent" }
+  attrs: { name: "intercept" }
+  attrs: { name: "offset" }
+  attrs: { name: "slope" }
+  attrs: { name: "table" }
+  attrs: { name: "tablevalues" }
+  attrs: { name: "type" }
+}
+attr_lists: {
+  name: "svg-xlink-attributes"
+  attrs: { name: "xlink:actuate" }
+  attrs: { name: "xlink:arcrole" }
+  attrs: {
+    name: "xlink:href"
+    # xlink:href is deprecated since SVG2 in favor of href.
+    alternative_names: "href"
+    value_url: {
+      protocol: "http"
+      protocol: "https"
+      allow_empty: false
+    }
+  }
+  attrs: { name: "xlink:role" }
+  attrs: { name: "xlink:show" }
+  attrs: { name: "xlink:title" }
+  attrs: { name: "xlink:type" }
+}
+# Style attributes are broadly disallowed, but specifically allowed
+# within SVG as SVG are commonly generated by tools.
+attr_lists: {
+  name: "svg-style-attr"
+  attrs: {
+    name: "style"
+    # `style` attribute value validated against Document Level CSS rules defined
+    # in validator-css.protoascii.
+    value_doc_svg_css: true
+  }
+}
+
+# Basics
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "G"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "transform" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "GLYPH"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "arabic-form" }
+  attrs: { name: "d" }
+  attrs: { name: "glyph-name" }
+  attrs: { name: "horiz-adv-x" }
+  attrs: { name: "orientation" }
+  attrs: { name: "unicode" }
+  attrs: { name: "vert-adv-y" }
+  attrs: { name: "vert-origin-x" }
+  attrs: { name: "vert-origin-y" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "GLYPHREF"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "dx" }
+  attrs: { name: "dy" }
+  attrs: { name: "format" }
+  attrs: { name: "glyphref" }
+  attrs: { name: "x" }
+  attrs: { name: "y" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  attr_lists: "svg-xlink-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "IMAGE"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "height" }
+  attrs: { name: "preserveaspectratio" }
+  attrs: { name: "transform" }
+  attrs: { name: "width" }
+  attrs: { name: "x" }
+  attrs: { name: "xlink:actuate" }
+  attrs: { name: "xlink:arcrole" }
+  attrs: {
+    name: "xlink:href"
+    # xlink:href is deprecated since SVG2 in favor of href.
+    alternative_names: "href"
+    value_url: {
+      protocol: "data"
+      protocol: "http"
+      protocol: "https"
+      allow_empty: false
+    }
+    # Inline SVGs execute in a different context and can affect page elements.
+    disallowed_value_regex: "(^|\\s)data:image\\/svg\\+xml"
+  }
+  attrs: { name: "xlink:role" }
+  attrs: { name: "xlink:show" }
+  attrs: { name: "xlink:title" }
+  attrs: { name: "xlink:type" }
+  attrs: { name: "y" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "MARKER"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "markerheight" }
+  attrs: { name: "markerunits" }
+  attrs: { name: "markerwidth" }
+  attrs: { name: "orient" }
+  attrs: { name: "preserveaspectratio" }
+  attrs: { name: "refx" }
+  attrs: { name: "refy" }
+  attrs: { name: "transform" }
+  attrs: { name: "viewbox" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "METADATA"
+  mandatory_ancestor: "SVG"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "PATH"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "d" }
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "pathlength" }
+  attrs: { name: "sketch:type" }
+  attrs: { name: "transform" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "SOLIDCOLOR"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "solid-color" }
+  attrs: { name: "solid-opacity" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "SVG"
+  attrs: { name: "contentscripttype" }
+  attrs: { name: "contentstyletype" }
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "height" }
+  attrs: { name: "preserveaspectratio" }
+  attrs: {
+    name: "version"
+    value: "1.0"
+    value: "1.1"
+  }
+  attrs: { name: "viewbox" }
+  attrs: { name: "width" }
+  attrs: { name: "x" }
+  attrs: { name: "y" }
+  attrs: { name: "zoomandpan" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "SWITCH"
+  mandatory_ancestor: "SVG"
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "VIEW"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "preserveaspectratio" }
+  attrs: { name: "viewbox" }
+  attrs: { name: "viewtarget" }
+  attrs: { name: "zoomandpan" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+# Shapes
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "CIRCLE"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "cx" }
+  attrs: { name: "cy" }
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "r" }
+  attrs: { name: "sketch:type" }
+  attrs: { name: "transform" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "ELLIPSE"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "cx" }
+  attrs: { name: "cy" }
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "rx" }
+  attrs: { name: "ry" }
+  attrs: { name: "sketch:type" }
+  attrs: { name: "transform" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "LINE"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "sketch:type" }
+  attrs: { name: "transform" }
+  attrs: { name: "x1" }
+  attrs: { name: "x2" }
+  attrs: { name: "y1" }
+  attrs: { name: "y2" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "POLYGON"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "points" }
+  attrs: { name: "sketch:type" }
+  attrs: { name: "transform" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "POLYLINE"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "points" }
+  attrs: { name: "sketch:type" }
+  attrs: { name: "transform" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "RECT"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "height" }
+  attrs: { name: "rx" }
+  attrs: { name: "ry" }
+  attrs: { name: "sketch:type" }
+  attrs: { name: "transform" }
+  attrs: { name: "width" }
+  attrs: { name: "x" }
+  attrs: { name: "y" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+# Text
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "TEXT"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "dx" }
+  attrs: { name: "dy" }
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "lengthadjust" }
+  attrs: { name: "rotate" }
+  attrs: { name: "text-anchor" }
+  attrs: { name: "textlength" }
+  attrs: { name: "transform" }
+  attrs: { name: "x" }
+  attrs: { name: "y" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "TEXTPATH"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "method" }
+  attrs: { name: "spacing" }
+  attrs: { name: "startoffset" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  attr_lists: "svg-xlink-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "TREF"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  attr_lists: "svg-xlink-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "TSPAN"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "dx" }
+  attrs: { name: "dy" }
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "lengthadjust" }
+  attrs: { name: "rotate" }
+  attrs: { name: "textlength" }
+  attrs: { name: "x" }
+  attrs: { name: "y" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+# Rendering
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "CLIPPATH"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "clippathunits" }
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "transform" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FILTER"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "filterres" }
+  attrs: { name: "filterunits" }
+  attrs: { name: "height" }
+  attrs: { name: "primitiveunits" }
+  attrs: { name: "width" }
+  attrs: { name: "x" }
+  attrs: { name: "y" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  attr_lists: "svg-xlink-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "HKERN"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "g1" }
+  attrs: { name: "g2" }
+  attrs: { name: "k" }
+  attrs: { name: "u1" }
+  attrs: { name: "u2" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "LINEARGRADIENT"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "gradienttransform" }
+  attrs: { name: "gradientunits" }
+  attrs: { name: "spreadmethod" }
+  attrs: { name: "x1" }
+  attrs: { name: "x2" }
+  attrs: { name: "y1" }
+  attrs: { name: "y2" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  attr_lists: "svg-xlink-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "MASK"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "height" }
+  attrs: { name: "maskcontentunits" }
+  attrs: { name: "maskunits" }
+  attrs: { name: "width" }
+  attrs: { name: "x" }
+  attrs: { name: "y" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "PATTERN"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "height" }
+  attrs: { name: "patterncontentunits" }
+  attrs: { name: "patterntransform" }
+  attrs: { name: "patternunits" }
+  attrs: { name: "preserveaspectratio" }
+  attrs: { name: "viewbox" }
+  attrs: { name: "width" }
+  attrs: { name: "x" }
+  attrs: { name: "y" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  attr_lists: "svg-xlink-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "RADIALGRADIENT"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "cx" }
+  attrs: { name: "cy" }
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "fr" }
+  attrs: { name: "fx" }
+  attrs: { name: "fy" }
+  attrs: { name: "gradienttransform" }
+  attrs: { name: "gradientunits" }
+  attrs: { name: "r" }
+  attrs: { name: "spreadmethod" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  attr_lists: "svg-xlink-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "STOP"
+  spec_name: "lineargradient > stop"
+  mandatory_ancestor: "LINEARGRADIENT"
+  attrs: { name: "offset" }
+  attrs: { name: "stop-color" }
+  attrs: { name: "stop-opacity" }
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "STOP"
+  spec_name: "radialgradient > stop"
+  mandatory_ancestor: "RADIALGRADIENT"
+  attrs: { name: "offset" }
+  attrs: { name: "stop-color" }
+  attrs: { name: "stop-opacity" }
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "VKERN"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "g1" }
+  attrs: { name: "g2" }
+  attrs: { name: "k" }
+  attrs: { name: "u1" }
+  attrs: { name: "u2" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+# Special
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "DEFS"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "transform" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "SYMBOL"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "height" }
+  attrs: { name: "preserveaspectratio" }
+  attrs: { name: "viewbox" }
+  attrs: { name: "width" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "USE"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "externalresourcesrequired" }
+  attrs: { name: "height" }
+  attrs: { name: "transform" }
+  attrs: { name: "width" }
+  attrs: { name: "x" }
+  attrs: { name: "y" }
+  attr_lists: "svg-conditional-processing-attributes"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  attr_lists: "svg-xlink-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+# Filters
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEBLEND"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "in" }
+  attrs: { name: "in2" }
+  attrs: { name: "mode" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FECOLORMATRIX"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "in" }
+  attrs: { name: "type" }
+  attrs: { name: "values" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FECOMPONENTTRANSFER"
+  mandatory_ancestor: "SVG"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FECOMPOSITE"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "in" }
+  attrs: { name: "in2" }
+  attrs: { name: "k1" }
+  attrs: { name: "k2" }
+  attrs: { name: "k3" }
+  attrs: { name: "k4" }
+  attrs: { name: "operator" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FECONVOLVEMATRIX"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "bias" }
+  attrs: { name: "divisor" }
+  attrs: { name: "edgemode" }
+  attrs: { name: "in" }
+  attrs: { name: "kernelmatrix" }
+  attrs: { name: "kernelunitlength" }
+  attrs: { name: "order" }
+  attrs: { name: "preservealpha" }
+  attrs: { name: "targetx" }
+  attrs: { name: "targety" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEDIFFUSELIGHTING"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "diffuseconstant" }
+  attrs: { name: "in" }
+  attrs: { name: "kernelunitlength" }
+  attrs: { name: "surfacescale" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEDISPLACEMENTMAP"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "in" }
+  attrs: { name: "in2" }
+  attrs: { name: "scale" }
+  attrs: { name: "xchannelselector" }
+  attrs: { name: "ychannelselector" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEDISTANTLIGHT"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "azimuth" }
+  attrs: { name: "elevation" }
+  attr_lists: "svg-core-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEDROPSHADOW"
+  mandatory_ancestor: "SVG"
+  mandatory_parent: "FILTER"
+  attrs: { name: "dx" }
+  attrs: { name: "dy" }
+  attrs: { name: "stddeviation" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEFLOOD"
+  mandatory_ancestor: "SVG"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEFUNCA"
+  mandatory_ancestor: "SVG"
+  mandatory_parent: "FECOMPONENTTRANSFER"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-transfer-function-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEFUNCB"
+  mandatory_ancestor: "SVG"
+  mandatory_parent: "FECOMPONENTTRANSFER"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-transfer-function-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEFUNCG"
+  mandatory_ancestor: "SVG"
+  mandatory_parent: "FECOMPONENTTRANSFER"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-transfer-function-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEFUNCR"
+  mandatory_ancestor: "SVG"
+  mandatory_parent: "FECOMPONENTTRANSFER"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-transfer-function-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEGAUSSIANBLUR"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "edgemode" }
+  attrs: { name: "in" }
+  attrs: { name: "stddeviation" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEMERGE"
+  mandatory_ancestor: "SVG"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEMERGENODE"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "in" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEMORPHOLOGY"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "in" }
+  attrs: { name: "operator" }
+  attrs: { name: "radius" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEOFFSET"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "dx" }
+  attrs: { name: "dy" }
+  attrs: { name: "in" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FEPOINTLIGHT"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "x" }
+  attrs: { name: "y" }
+  attrs: { name: "z" }
+  attr_lists: "svg-core-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FESPECULARLIGHTING"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "in" }
+  attrs: { name: "kernelunitlength" }
+  attrs: { name: "specularconstant" }
+  attrs: { name: "specularexponent" }
+  attrs: { name: "surfacescale" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FESPOTLIGHT"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "limitingconeangle" }
+  attrs: { name: "pointsatx" }
+  attrs: { name: "pointsaty" }
+  attrs: { name: "pointsatz" }
+  attrs: { name: "specularexponent" }
+  attrs: { name: "x" }
+  attrs: { name: "y" }
+  attrs: { name: "z" }
+  attr_lists: "svg-core-attributes"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FETILE"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "in" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "FETURBULENCE"
+  mandatory_ancestor: "SVG"
+  attrs: { name: "basefrequency" }
+  attrs: { name: "numoctaves" }
+  attrs: { name: "seed" }
+  attrs: { name: "stitchtiles" }
+  attrs: { name: "type" }
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-filter-primitive-attributes"
+  attr_lists: "svg-presentation-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+# ARIA
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "DESC"
+  mandatory_ancestor: "SVG"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
+tags: {
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "TITLE"
+  spec_name: "svg title"
+  mandatory_ancestor: "SVG"
+  attr_lists: "svg-core-attributes"
+  attr_lists: "svg-style-attr"
+  spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#svg"
+}
diff --git a/validator/validator.pb.go b/validator/validator.pb.go
index ff8e8c4d52f48..a6a754f952463 100644
--- a/validator/validator.pb.go
+++ b/validator/validator.pb.go
@@ -1,24 +1,46 @@
+//
+// Copyright 2015 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.
+//
+
 // Code generated by protoc-gen-go. DO NOT EDIT.
-// source: validator/validator.proto
+// versions:
+// 	protoc-gen-go v1.26.0
+// 	protoc        v3.16.0
+// source: validator.proto
+
+// Package defines Validator protobuffers. This is a package comment required by
+// Golint for validator.pb.go, but Golint still fails with an error "Package
+// amp_validator (defined in [validator.pb.go]) should have a package comment".
+// This happens because protoc adds an extra line after the comment. Ignore the
+// error.
 
 package amp_validator
 
 import (
-	fmt "fmt"
-	proto "github.com/golang/protobuf/proto"
-	math "math"
+	protoreflect "google.golang.org/protobuf/reflect/protoreflect"
+	protoimpl "google.golang.org/protobuf/runtime/protoimpl"
+	reflect "reflect"
+	sync "sync"
 )
 
-// Reference imports to suppress errors if they are not otherwise used.
-var _ = proto.Marshal
-var _ = fmt.Errorf
-var _ = math.Inf
-
-// This is a compile-time assertion to ensure that this generated file
-// is compatible with the proto package it is being compiled against.
-// A compilation error at this line likely means your copy of the
-// proto package needs to be updated.
-const _ = proto.ProtoPackageIsVersion2 // please upgrade the proto package
+const (
+	// Verify that this generated code is sufficiently up-to-date.
+	_ = protoimpl.EnforceVersion(20 - protoimpl.MinVersion)
+	// Verify that runtime/protoimpl is sufficiently up-to-date.
+	_ = protoimpl.EnforceVersion(protoimpl.MaxVersion - 20)
+)
 
 // These two fields specify that values from one AttrSpec refer to values from
 // another AttrSpec elsewhere on the page; validator will verify the
@@ -33,22 +55,24 @@ const _ = proto.ProtoPackageIsVersion2 // please upgrade the proto package
 type AttrSpec_ValueSet int32
 
 const (
-	AttrSpec_UNKNOWN_VALUESET AttrSpec_ValueSet = 0
-	AttrSpec_TEMPLATE_IDS     AttrSpec_ValueSet = 1
-	AttrSpec_AMP_SCRIPT_IDS   AttrSpec_ValueSet = 2
+	AttrSpec_UNKNOWN_VALUESET AttrSpec_ValueSet = 0 // Never used
+	AttrSpec_TEMPLATE_IDS     AttrSpec_ValueSet = 1 // <template id> values
+	AttrSpec_AMP_SCRIPT_IDS   AttrSpec_ValueSet = 2 // <script id> values, referenced by <amp-script>
 )
 
-var AttrSpec_ValueSet_name = map[int32]string{
-	0: "UNKNOWN_VALUESET",
-	1: "TEMPLATE_IDS",
-	2: "AMP_SCRIPT_IDS",
-}
-
-var AttrSpec_ValueSet_value = map[string]int32{
-	"UNKNOWN_VALUESET": 0,
-	"TEMPLATE_IDS":     1,
-	"AMP_SCRIPT_IDS":   2,
-}
+// Enum value maps for AttrSpec_ValueSet.
+var (
+	AttrSpec_ValueSet_name = map[int32]string{
+		0: "UNKNOWN_VALUESET",
+		1: "TEMPLATE_IDS",
+		2: "AMP_SCRIPT_IDS",
+	}
+	AttrSpec_ValueSet_value = map[string]int32{
+		"UNKNOWN_VALUESET": 0,
+		"TEMPLATE_IDS":     1,
+		"AMP_SCRIPT_IDS":   2,
+	}
+)
 
 func (x AttrSpec_ValueSet) Enum() *AttrSpec_ValueSet {
 	p := new(AttrSpec_ValueSet)
@@ -57,20 +81,34 @@ func (x AttrSpec_ValueSet) Enum() *AttrSpec_ValueSet {
 }
 
 func (x AttrSpec_ValueSet) String() string {
-	return proto.EnumName(AttrSpec_ValueSet_name, int32(x))
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
+}
+
+func (AttrSpec_ValueSet) Descriptor() protoreflect.EnumDescriptor {
+	return file_validator_proto_enumTypes[0].Descriptor()
 }
 
-func (x *AttrSpec_ValueSet) UnmarshalJSON(data []byte) error {
-	value, err := proto.UnmarshalJSONEnum(AttrSpec_ValueSet_value, data, "AttrSpec_ValueSet")
+func (AttrSpec_ValueSet) Type() protoreflect.EnumType {
+	return &file_validator_proto_enumTypes[0]
+}
+
+func (x AttrSpec_ValueSet) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
+}
+
+// Deprecated: Do not use.
+func (x *AttrSpec_ValueSet) UnmarshalJSON(b []byte) error {
+	num, err := protoimpl.X.UnmarshalJSONEnum(x.Descriptor(), b)
 	if err != nil {
 		return err
 	}
-	*x = AttrSpec_ValueSet(value)
+	*x = AttrSpec_ValueSet(num)
 	return nil
 }
 
+// Deprecated: Use AttrSpec_ValueSet.Descriptor instead.
 func (AttrSpec_ValueSet) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{5, 0}
+	return file_validator_proto_rawDescGZIP(), []int{5, 0}
 }
 
 type AttrSpec_DispatchKeyType int32
@@ -86,19 +124,21 @@ const (
 	AttrSpec_NAME_VALUE_PARENT_DISPATCH AttrSpec_DispatchKeyType = 3
 )
 
-var AttrSpec_DispatchKeyType_name = map[int32]string{
-	0: "NONE_DISPATCH",
-	1: "NAME_DISPATCH",
-	2: "NAME_VALUE_DISPATCH",
-	3: "NAME_VALUE_PARENT_DISPATCH",
-}
-
-var AttrSpec_DispatchKeyType_value = map[string]int32{
-	"NONE_DISPATCH":              0,
-	"NAME_DISPATCH":              1,
-	"NAME_VALUE_DISPATCH":        2,
-	"NAME_VALUE_PARENT_DISPATCH": 3,
-}
+// Enum value maps for AttrSpec_DispatchKeyType.
+var (
+	AttrSpec_DispatchKeyType_name = map[int32]string{
+		0: "NONE_DISPATCH",
+		1: "NAME_DISPATCH",
+		2: "NAME_VALUE_DISPATCH",
+		3: "NAME_VALUE_PARENT_DISPATCH",
+	}
+	AttrSpec_DispatchKeyType_value = map[string]int32{
+		"NONE_DISPATCH":              0,
+		"NAME_DISPATCH":              1,
+		"NAME_VALUE_DISPATCH":        2,
+		"NAME_VALUE_PARENT_DISPATCH": 3,
+	}
+)
 
 func (x AttrSpec_DispatchKeyType) Enum() *AttrSpec_DispatchKeyType {
 	p := new(AttrSpec_DispatchKeyType)
@@ -107,63 +147,79 @@ func (x AttrSpec_DispatchKeyType) Enum() *AttrSpec_DispatchKeyType {
 }
 
 func (x AttrSpec_DispatchKeyType) String() string {
-	return proto.EnumName(AttrSpec_DispatchKeyType_name, int32(x))
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
+}
+
+func (AttrSpec_DispatchKeyType) Descriptor() protoreflect.EnumDescriptor {
+	return file_validator_proto_enumTypes[1].Descriptor()
 }
 
-func (x *AttrSpec_DispatchKeyType) UnmarshalJSON(data []byte) error {
-	value, err := proto.UnmarshalJSONEnum(AttrSpec_DispatchKeyType_value, data, "AttrSpec_DispatchKeyType")
+func (AttrSpec_DispatchKeyType) Type() protoreflect.EnumType {
+	return &file_validator_proto_enumTypes[1]
+}
+
+func (x AttrSpec_DispatchKeyType) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
+}
+
+// Deprecated: Do not use.
+func (x *AttrSpec_DispatchKeyType) UnmarshalJSON(b []byte) error {
+	num, err := protoimpl.X.UnmarshalJSONEnum(x.Descriptor(), b)
 	if err != nil {
 		return err
 	}
-	*x = AttrSpec_DispatchKeyType(value)
+	*x = AttrSpec_DispatchKeyType(num)
 	return nil
 }
 
+// Deprecated: Use AttrSpec_DispatchKeyType.Descriptor instead.
 func (AttrSpec_DispatchKeyType) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{5, 1}
+	return file_validator_proto_rawDescGZIP(), []int{5, 1}
 }
 
 // NEXT AVAILABLE TAG: 10
 type AmpLayout_Layout int32
 
 const (
-	AmpLayout_UNKNOWN      AmpLayout_Layout = 0
-	AmpLayout_NODISPLAY    AmpLayout_Layout = 1
-	AmpLayout_FIXED        AmpLayout_Layout = 2
-	AmpLayout_FIXED_HEIGHT AmpLayout_Layout = 3
-	AmpLayout_RESPONSIVE   AmpLayout_Layout = 4
 	AmpLayout_CONTAINER    AmpLayout_Layout = 5
 	AmpLayout_FILL         AmpLayout_Layout = 6
+	AmpLayout_FIXED        AmpLayout_Layout = 2
+	AmpLayout_FIXED_HEIGHT AmpLayout_Layout = 3
 	AmpLayout_FLEX_ITEM    AmpLayout_Layout = 7
 	AmpLayout_FLUID        AmpLayout_Layout = 8
 	AmpLayout_INTRINSIC    AmpLayout_Layout = 9
+	AmpLayout_NODISPLAY    AmpLayout_Layout = 1
+	AmpLayout_RESPONSIVE   AmpLayout_Layout = 4
+	AmpLayout_UNKNOWN      AmpLayout_Layout = 0
 )
 
-var AmpLayout_Layout_name = map[int32]string{
-	0: "UNKNOWN",
-	1: "NODISPLAY",
-	2: "FIXED",
-	3: "FIXED_HEIGHT",
-	4: "RESPONSIVE",
-	5: "CONTAINER",
-	6: "FILL",
-	7: "FLEX_ITEM",
-	8: "FLUID",
-	9: "INTRINSIC",
-}
-
-var AmpLayout_Layout_value = map[string]int32{
-	"UNKNOWN":      0,
-	"NODISPLAY":    1,
-	"FIXED":        2,
-	"FIXED_HEIGHT": 3,
-	"RESPONSIVE":   4,
-	"CONTAINER":    5,
-	"FILL":         6,
-	"FLEX_ITEM":    7,
-	"FLUID":        8,
-	"INTRINSIC":    9,
-}
+// Enum value maps for AmpLayout_Layout.
+var (
+	AmpLayout_Layout_name = map[int32]string{
+		5: "CONTAINER",
+		6: "FILL",
+		2: "FIXED",
+		3: "FIXED_HEIGHT",
+		7: "FLEX_ITEM",
+		8: "FLUID",
+		9: "INTRINSIC",
+		1: "NODISPLAY",
+		4: "RESPONSIVE",
+		0: "UNKNOWN",
+	}
+	AmpLayout_Layout_value = map[string]int32{
+		"CONTAINER":    5,
+		"FILL":         6,
+		"FIXED":        2,
+		"FIXED_HEIGHT": 3,
+		"FLEX_ITEM":    7,
+		"FLUID":        8,
+		"INTRINSIC":    9,
+		"NODISPLAY":    1,
+		"RESPONSIVE":   4,
+		"UNKNOWN":      0,
+	}
+)
 
 func (x AmpLayout_Layout) Enum() *AmpLayout_Layout {
 	p := new(AmpLayout_Layout)
@@ -172,20 +228,34 @@ func (x AmpLayout_Layout) Enum() *AmpLayout_Layout {
 }
 
 func (x AmpLayout_Layout) String() string {
-	return proto.EnumName(AmpLayout_Layout_name, int32(x))
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
 }
 
-func (x *AmpLayout_Layout) UnmarshalJSON(data []byte) error {
-	value, err := proto.UnmarshalJSONEnum(AmpLayout_Layout_value, data, "AmpLayout_Layout")
+func (AmpLayout_Layout) Descriptor() protoreflect.EnumDescriptor {
+	return file_validator_proto_enumTypes[2].Descriptor()
+}
+
+func (AmpLayout_Layout) Type() protoreflect.EnumType {
+	return &file_validator_proto_enumTypes[2]
+}
+
+func (x AmpLayout_Layout) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
+}
+
+// Deprecated: Do not use.
+func (x *AmpLayout_Layout) UnmarshalJSON(b []byte) error {
+	num, err := protoimpl.X.UnmarshalJSONEnum(x.Descriptor(), b)
 	if err != nil {
 		return err
 	}
-	*x = AmpLayout_Layout(value)
+	*x = AmpLayout_Layout(num)
 	return nil
 }
 
+// Deprecated: Use AmpLayout_Layout.Descriptor instead.
 func (AmpLayout_Layout) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{15, 0}
+	return file_validator_proto_rawDescGZIP(), []int{15, 0}
 }
 
 // NEXT AVAILABLE TAG: 2
@@ -194,19 +264,21 @@ type AncestorMarker_Marker int32
 const (
 	AncestorMarker_UNKNOWN AncestorMarker_Marker = 0
 	// Set by <amp-sidebar> tags to allow autoscroll attributes on descendants.
-	// See https://github.com/ampproject/amphtml/20524 for more context.
+	// See https://github.com/ampproject/amphtml/pull/20524 for more context.
 	AncestorMarker_AUTOSCROLL AncestorMarker_Marker = 1
 )
 
-var AncestorMarker_Marker_name = map[int32]string{
-	0: "UNKNOWN",
-	1: "AUTOSCROLL",
-}
-
-var AncestorMarker_Marker_value = map[string]int32{
-	"UNKNOWN":    0,
-	"AUTOSCROLL": 1,
-}
+// Enum value maps for AncestorMarker_Marker.
+var (
+	AncestorMarker_Marker_name = map[int32]string{
+		0: "UNKNOWN",
+		1: "AUTOSCROLL",
+	}
+	AncestorMarker_Marker_value = map[string]int32{
+		"UNKNOWN":    0,
+		"AUTOSCROLL": 1,
+	}
+)
 
 func (x AncestorMarker_Marker) Enum() *AncestorMarker_Marker {
 	p := new(AncestorMarker_Marker)
@@ -215,20 +287,34 @@ func (x AncestorMarker_Marker) Enum() *AncestorMarker_Marker {
 }
 
 func (x AncestorMarker_Marker) String() string {
-	return proto.EnumName(AncestorMarker_Marker_name, int32(x))
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
 }
 
-func (x *AncestorMarker_Marker) UnmarshalJSON(data []byte) error {
-	value, err := proto.UnmarshalJSONEnum(AncestorMarker_Marker_value, data, "AncestorMarker_Marker")
+func (AncestorMarker_Marker) Descriptor() protoreflect.EnumDescriptor {
+	return file_validator_proto_enumTypes[3].Descriptor()
+}
+
+func (AncestorMarker_Marker) Type() protoreflect.EnumType {
+	return &file_validator_proto_enumTypes[3]
+}
+
+func (x AncestorMarker_Marker) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
+}
+
+// Deprecated: Do not use.
+func (x *AncestorMarker_Marker) UnmarshalJSON(b []byte) error {
+	num, err := protoimpl.X.UnmarshalJSONEnum(x.Descriptor(), b)
 	if err != nil {
 		return err
 	}
-	*x = AncestorMarker_Marker(value)
+	*x = AncestorMarker_Marker(num)
 	return nil
 }
 
+// Deprecated: Use AncestorMarker_Marker.Descriptor instead.
 func (AncestorMarker_Marker) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{16, 0}
+	return file_validator_proto_rawDescGZIP(), []int{16, 0}
 }
 
 // Most extensions are custom-elements. For custom-template extensions, this
@@ -243,19 +329,21 @@ const (
 	ExtensionSpec_HOST_SERVICE    ExtensionSpec_ExtensionType = 3
 )
 
-var ExtensionSpec_ExtensionType_name = map[int32]string{
-	0: "UNKNOWN",
-	1: "CUSTOM_ELEMENT",
-	2: "CUSTOM_TEMPLATE",
-	3: "HOST_SERVICE",
-}
-
-var ExtensionSpec_ExtensionType_value = map[string]int32{
-	"UNKNOWN":         0,
-	"CUSTOM_ELEMENT":  1,
-	"CUSTOM_TEMPLATE": 2,
-	"HOST_SERVICE":    3,
-}
+// Enum value maps for ExtensionSpec_ExtensionType.
+var (
+	ExtensionSpec_ExtensionType_name = map[int32]string{
+		0: "UNKNOWN",
+		1: "CUSTOM_ELEMENT",
+		2: "CUSTOM_TEMPLATE",
+		3: "HOST_SERVICE",
+	}
+	ExtensionSpec_ExtensionType_value = map[string]int32{
+		"UNKNOWN":         0,
+		"CUSTOM_ELEMENT":  1,
+		"CUSTOM_TEMPLATE": 2,
+		"HOST_SERVICE":    3,
+	}
+)
 
 func (x ExtensionSpec_ExtensionType) Enum() *ExtensionSpec_ExtensionType {
 	p := new(ExtensionSpec_ExtensionType)
@@ -264,20 +352,34 @@ func (x ExtensionSpec_ExtensionType) Enum() *ExtensionSpec_ExtensionType {
 }
 
 func (x ExtensionSpec_ExtensionType) String() string {
-	return proto.EnumName(ExtensionSpec_ExtensionType_name, int32(x))
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
+}
+
+func (ExtensionSpec_ExtensionType) Descriptor() protoreflect.EnumDescriptor {
+	return file_validator_proto_enumTypes[4].Descriptor()
+}
+
+func (ExtensionSpec_ExtensionType) Type() protoreflect.EnumType {
+	return &file_validator_proto_enumTypes[4]
+}
+
+func (x ExtensionSpec_ExtensionType) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
 }
 
-func (x *ExtensionSpec_ExtensionType) UnmarshalJSON(data []byte) error {
-	value, err := proto.UnmarshalJSONEnum(ExtensionSpec_ExtensionType_value, data, "ExtensionSpec_ExtensionType")
+// Deprecated: Do not use.
+func (x *ExtensionSpec_ExtensionType) UnmarshalJSON(b []byte) error {
+	num, err := protoimpl.X.UnmarshalJSONEnum(x.Descriptor(), b)
 	if err != nil {
 		return err
 	}
-	*x = ExtensionSpec_ExtensionType(value)
+	*x = ExtensionSpec_ExtensionType(num)
 	return nil
 }
 
+// Deprecated: Use ExtensionSpec_ExtensionType.Descriptor instead.
 func (ExtensionSpec_ExtensionType) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{19, 0}
+	return file_validator_proto_rawDescGZIP(), []int{19, 0}
 }
 
 // TagSpec.requires_extension will be set to the new extension's name on one
@@ -308,17 +410,19 @@ const (
 	ExtensionSpec_NONE ExtensionSpec_ExtensionUsageRequirement = 3
 )
 
-var ExtensionSpec_ExtensionUsageRequirement_name = map[int32]string{
-	1: "ERROR",
-	2: "EXEMPTED",
-	3: "NONE",
-}
-
-var ExtensionSpec_ExtensionUsageRequirement_value = map[string]int32{
-	"ERROR":    1,
-	"EXEMPTED": 2,
-	"NONE":     3,
-}
+// Enum value maps for ExtensionSpec_ExtensionUsageRequirement.
+var (
+	ExtensionSpec_ExtensionUsageRequirement_name = map[int32]string{
+		1: "ERROR",
+		2: "EXEMPTED",
+		3: "NONE",
+	}
+	ExtensionSpec_ExtensionUsageRequirement_value = map[string]int32{
+		"ERROR":    1,
+		"EXEMPTED": 2,
+		"NONE":     3,
+	}
+)
 
 func (x ExtensionSpec_ExtensionUsageRequirement) Enum() *ExtensionSpec_ExtensionUsageRequirement {
 	p := new(ExtensionSpec_ExtensionUsageRequirement)
@@ -327,51 +431,64 @@ func (x ExtensionSpec_ExtensionUsageRequirement) Enum() *ExtensionSpec_Extension
 }
 
 func (x ExtensionSpec_ExtensionUsageRequirement) String() string {
-	return proto.EnumName(ExtensionSpec_ExtensionUsageRequirement_name, int32(x))
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
+}
+
+func (ExtensionSpec_ExtensionUsageRequirement) Descriptor() protoreflect.EnumDescriptor {
+	return file_validator_proto_enumTypes[5].Descriptor()
 }
 
-func (x *ExtensionSpec_ExtensionUsageRequirement) UnmarshalJSON(data []byte) error {
-	value, err := proto.UnmarshalJSONEnum(ExtensionSpec_ExtensionUsageRequirement_value, data, "ExtensionSpec_ExtensionUsageRequirement")
+func (ExtensionSpec_ExtensionUsageRequirement) Type() protoreflect.EnumType {
+	return &file_validator_proto_enumTypes[5]
+}
+
+func (x ExtensionSpec_ExtensionUsageRequirement) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
+}
+
+// Deprecated: Do not use.
+func (x *ExtensionSpec_ExtensionUsageRequirement) UnmarshalJSON(b []byte) error {
+	num, err := protoimpl.X.UnmarshalJSONEnum(x.Descriptor(), b)
 	if err != nil {
 		return err
 	}
-	*x = ExtensionSpec_ExtensionUsageRequirement(value)
+	*x = ExtensionSpec_ExtensionUsageRequirement(num)
 	return nil
 }
 
+// Deprecated: Use ExtensionSpec_ExtensionUsageRequirement.Descriptor instead.
 func (ExtensionSpec_ExtensionUsageRequirement) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{19, 1}
+	return file_validator_proto_rawDescGZIP(), []int{19, 1}
 }
 
 // NEXT AVAILABLE TAG: 6
 type HtmlFormat_Code int32
 
 const (
-	HtmlFormat_UNKNOWN_CODE HtmlFormat_Code = 0
+	HtmlFormat_UNKNOWN_CODE HtmlFormat_Code = 0 // Never used
 	HtmlFormat_AMP          HtmlFormat_Code = 1
 	HtmlFormat_AMP4ADS      HtmlFormat_Code = 2
 	HtmlFormat_AMP4EMAIL    HtmlFormat_Code = 3
-	HtmlFormat_ACTIONS      HtmlFormat_Code = 5
-	HtmlFormat_EXPERIMENTAL HtmlFormat_Code = 4
+	HtmlFormat_EXPERIMENTAL HtmlFormat_Code = 4 // Currently unused
 )
 
-var HtmlFormat_Code_name = map[int32]string{
-	0: "UNKNOWN_CODE",
-	1: "AMP",
-	2: "AMP4ADS",
-	3: "AMP4EMAIL",
-	5: "ACTIONS",
-	4: "EXPERIMENTAL",
-}
-
-var HtmlFormat_Code_value = map[string]int32{
-	"UNKNOWN_CODE": 0,
-	"AMP":          1,
-	"AMP4ADS":      2,
-	"AMP4EMAIL":    3,
-	"ACTIONS":      5,
-	"EXPERIMENTAL": 4,
-}
+// Enum value maps for HtmlFormat_Code.
+var (
+	HtmlFormat_Code_name = map[int32]string{
+		0: "UNKNOWN_CODE",
+		1: "AMP",
+		2: "AMP4ADS",
+		3: "AMP4EMAIL",
+		4: "EXPERIMENTAL",
+	}
+	HtmlFormat_Code_value = map[string]int32{
+		"UNKNOWN_CODE": 0,
+		"AMP":          1,
+		"AMP4ADS":      2,
+		"AMP4EMAIL":    3,
+		"EXPERIMENTAL": 4,
+	}
+)
 
 func (x HtmlFormat_Code) Enum() *HtmlFormat_Code {
 	p := new(HtmlFormat_Code)
@@ -380,20 +497,34 @@ func (x HtmlFormat_Code) Enum() *HtmlFormat_Code {
 }
 
 func (x HtmlFormat_Code) String() string {
-	return proto.EnumName(HtmlFormat_Code_name, int32(x))
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
+}
+
+func (HtmlFormat_Code) Descriptor() protoreflect.EnumDescriptor {
+	return file_validator_proto_enumTypes[6].Descriptor()
+}
+
+func (HtmlFormat_Code) Type() protoreflect.EnumType {
+	return &file_validator_proto_enumTypes[6]
+}
+
+func (x HtmlFormat_Code) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
 }
 
-func (x *HtmlFormat_Code) UnmarshalJSON(data []byte) error {
-	value, err := proto.UnmarshalJSONEnum(HtmlFormat_Code_value, data, "HtmlFormat_Code")
+// Deprecated: Do not use.
+func (x *HtmlFormat_Code) UnmarshalJSON(b []byte) error {
+	num, err := protoimpl.X.UnmarshalJSONEnum(x.Descriptor(), b)
 	if err != nil {
 		return err
 	}
-	*x = HtmlFormat_Code(value)
+	*x = HtmlFormat_Code(num)
 	return nil
 }
 
+// Deprecated: Use HtmlFormat_Code.Descriptor instead.
 func (HtmlFormat_Code) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{20, 0}
+	return file_validator_proto_rawDescGZIP(), []int{20, 0}
 }
 
 // NamedId's are used to uniquely identify specific TagSpecs in the
@@ -410,17 +541,19 @@ const (
 	TagSpec_STYLE_AMP_CUSTOM     TagSpec_NamedId = 2
 )
 
-var TagSpec_NamedId_name = map[int32]string{
-	0: "NOT_SET",
-	1: "LINK_FONT_STYLESHEET",
-	2: "STYLE_AMP_CUSTOM",
-}
-
-var TagSpec_NamedId_value = map[string]int32{
-	"NOT_SET":              0,
-	"LINK_FONT_STYLESHEET": 1,
-	"STYLE_AMP_CUSTOM":     2,
-}
+// Enum value maps for TagSpec_NamedId.
+var (
+	TagSpec_NamedId_name = map[int32]string{
+		0: "NOT_SET",
+		1: "LINK_FONT_STYLESHEET",
+		2: "STYLE_AMP_CUSTOM",
+	}
+	TagSpec_NamedId_value = map[string]int32{
+		"NOT_SET":              0,
+		"LINK_FONT_STYLESHEET": 1,
+		"STYLE_AMP_CUSTOM":     2,
+	}
+)
 
 func (x TagSpec_NamedId) Enum() *TagSpec_NamedId {
 	p := new(TagSpec_NamedId)
@@ -429,20 +562,34 @@ func (x TagSpec_NamedId) Enum() *TagSpec_NamedId {
 }
 
 func (x TagSpec_NamedId) String() string {
-	return proto.EnumName(TagSpec_NamedId_name, int32(x))
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
+}
+
+func (TagSpec_NamedId) Descriptor() protoreflect.EnumDescriptor {
+	return file_validator_proto_enumTypes[7].Descriptor()
 }
 
-func (x *TagSpec_NamedId) UnmarshalJSON(data []byte) error {
-	value, err := proto.UnmarshalJSONEnum(TagSpec_NamedId_value, data, "TagSpec_NamedId")
+func (TagSpec_NamedId) Type() protoreflect.EnumType {
+	return &file_validator_proto_enumTypes[7]
+}
+
+func (x TagSpec_NamedId) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
+}
+
+// Deprecated: Do not use.
+func (x *TagSpec_NamedId) UnmarshalJSON(b []byte) error {
+	num, err := protoimpl.X.UnmarshalJSONEnum(x.Descriptor(), b)
 	if err != nil {
 		return err
 	}
-	*x = TagSpec_NamedId(value)
+	*x = TagSpec_NamedId(num)
 	return nil
 }
 
+// Deprecated: Use TagSpec_NamedId.Descriptor instead.
 func (TagSpec_NamedId) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{21, 0}
+	return file_validator_proto_rawDescGZIP(), []int{21, 0}
 }
 
 type ErrorCategory_Code int32
@@ -451,13 +598,15 @@ const (
 	ErrorCategory_UNKNOWN ErrorCategory_Code = 0
 )
 
-var ErrorCategory_Code_name = map[int32]string{
-	0: "UNKNOWN",
-}
-
-var ErrorCategory_Code_value = map[string]int32{
-	"UNKNOWN": 0,
-}
+// Enum value maps for ErrorCategory_Code.
+var (
+	ErrorCategory_Code_name = map[int32]string{
+		0: "UNKNOWN",
+	}
+	ErrorCategory_Code_value = map[string]int32{
+		"UNKNOWN": 0,
+	}
+)
 
 func (x ErrorCategory_Code) Enum() *ErrorCategory_Code {
 	p := new(ErrorCategory_Code)
@@ -466,20 +615,34 @@ func (x ErrorCategory_Code) Enum() *ErrorCategory_Code {
 }
 
 func (x ErrorCategory_Code) String() string {
-	return proto.EnumName(ErrorCategory_Code_name, int32(x))
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
+}
+
+func (ErrorCategory_Code) Descriptor() protoreflect.EnumDescriptor {
+	return file_validator_proto_enumTypes[8].Descriptor()
+}
+
+func (ErrorCategory_Code) Type() protoreflect.EnumType {
+	return &file_validator_proto_enumTypes[8]
 }
 
-func (x *ErrorCategory_Code) UnmarshalJSON(data []byte) error {
-	value, err := proto.UnmarshalJSONEnum(ErrorCategory_Code_value, data, "ErrorCategory_Code")
+func (x ErrorCategory_Code) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
+}
+
+// Deprecated: Do not use.
+func (x *ErrorCategory_Code) UnmarshalJSON(b []byte) error {
+	num, err := protoimpl.X.UnmarshalJSONEnum(x.Descriptor(), b)
 	if err != nil {
 		return err
 	}
-	*x = ErrorCategory_Code(value)
+	*x = ErrorCategory_Code(num)
 	return nil
 }
 
+// Deprecated: Use ErrorCategory_Code.Descriptor instead.
 func (ErrorCategory_Code) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{24, 0}
+	return file_validator_proto_rawDescGZIP(), []int{25, 0}
 }
 
 // NEXT AVAILABLE TAG: 5
@@ -490,20 +653,22 @@ const (
 	// A document with at least one error of this severity fails validation.
 	ValidationError_ERROR ValidationError_Severity = 1
 	// A document may have warnings and still pass validation.
-	ValidationError_WARNING ValidationError_Severity = 4
+	ValidationError_WARNING ValidationError_Severity = 4 // DO NOT REASSIGN the previously used values 2, 3.
 )
 
-var ValidationError_Severity_name = map[int32]string{
-	0: "UNKNOWN_SEVERITY",
-	1: "ERROR",
-	4: "WARNING",
-}
-
-var ValidationError_Severity_value = map[string]int32{
-	"UNKNOWN_SEVERITY": 0,
-	"ERROR":            1,
-	"WARNING":          4,
-}
+// Enum value maps for ValidationError_Severity.
+var (
+	ValidationError_Severity_name = map[int32]string{
+		0: "UNKNOWN_SEVERITY",
+		1: "ERROR",
+		4: "WARNING",
+	}
+	ValidationError_Severity_value = map[string]int32{
+		"UNKNOWN_SEVERITY": 0,
+		"ERROR":            1,
+		"WARNING":          4,
+	}
+)
 
 func (x ValidationError_Severity) Enum() *ValidationError_Severity {
 	p := new(ValidationError_Severity)
@@ -512,23 +677,37 @@ func (x ValidationError_Severity) Enum() *ValidationError_Severity {
 }
 
 func (x ValidationError_Severity) String() string {
-	return proto.EnumName(ValidationError_Severity_name, int32(x))
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
+}
+
+func (ValidationError_Severity) Descriptor() protoreflect.EnumDescriptor {
+	return file_validator_proto_enumTypes[9].Descriptor()
+}
+
+func (ValidationError_Severity) Type() protoreflect.EnumType {
+	return &file_validator_proto_enumTypes[9]
 }
 
-func (x *ValidationError_Severity) UnmarshalJSON(data []byte) error {
-	value, err := proto.UnmarshalJSONEnum(ValidationError_Severity_value, data, "ValidationError_Severity")
+func (x ValidationError_Severity) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
+}
+
+// Deprecated: Do not use.
+func (x *ValidationError_Severity) UnmarshalJSON(b []byte) error {
+	num, err := protoimpl.X.UnmarshalJSONEnum(x.Descriptor(), b)
 	if err != nil {
 		return err
 	}
-	*x = ValidationError_Severity(value)
+	*x = ValidationError_Severity(num)
 	return nil
 }
 
+// Deprecated: Use ValidationError_Severity.Descriptor instead.
 func (ValidationError_Severity) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{25, 0}
+	return file_validator_proto_rawDescGZIP(), []int{26, 0}
 }
 
-// NEXT AVAILABLE TAG: 117
+// NEXT AVAILABLE TAG: 121
 type ValidationError_Code int32
 
 const (
@@ -543,6 +722,7 @@ const (
 	ValidationError_WARNING_EXTENSION_DEPRECATED_VERSION                ValidationError_Code = 80
 	ValidationError_NON_LTS_SCRIPT_AFTER_LTS                            ValidationError_Code = 112
 	ValidationError_LTS_SCRIPT_AFTER_NON_LTS                            ValidationError_Code = 113
+	ValidationError_INCORRECT_SCRIPT_RELEASE_VERSION                    ValidationError_Code = 119
 	ValidationError_ATTR_REQUIRED_BUT_MISSING                           ValidationError_Code = 61
 	ValidationError_DISALLOWED_TAG                                      ValidationError_Code = 2
 	ValidationError_GENERAL_DISALLOWED_TAG                              ValidationError_Code = 51
@@ -565,6 +745,7 @@ const (
 	ValidationError_STYLESHEET_TOO_LONG                                 ValidationError_Code = 50
 	ValidationError_STYLESHEET_AND_INLINE_STYLE_TOO_LONG                ValidationError_Code = 102
 	ValidationError_INLINE_STYLE_TOO_LONG                               ValidationError_Code = 103
+	ValidationError_INLINE_SCRIPT_TOO_LONG                              ValidationError_Code = 118
 	ValidationError_MANDATORY_CDATA_MISSING_OR_INCORRECT                ValidationError_Code = 9
 	ValidationError_CDATA_VIOLATES_DENYLIST                             ValidationError_Code = 30
 	ValidationError_NON_WHITESPACE_CDATA_ENCOUNTERED                    ValidationError_Code = 82
@@ -609,6 +790,7 @@ const (
 	ValidationError_INVALID_UTF8                                                 ValidationError_Code = 96
 	ValidationError_DOCUMENT_SIZE_LIMIT_EXCEEDED                                 ValidationError_Code = 108
 	ValidationError_DEV_MODE_ONLY                                                ValidationError_Code = 109
+	ValidationError_AMP_EMAIL_MISSING_STRICT_CSS_ATTR                            ValidationError_Code = 120
 	ValidationError_VALUE_SET_MISMATCH                                           ValidationError_Code = 110
 	ValidationError_CSS_SYNTAX_INVALID_AT_RULE                                   ValidationError_Code = 29
 	ValidationError_CSS_SYNTAX_STRAY_TRAILING_BACKSLASH                          ValidationError_Code = 38
@@ -640,6 +822,7 @@ const (
 	ValidationError_CSS_SYNTAX_DISALLOWED_PSEUDO_CLASS                           ValidationError_Code = 115
 	ValidationError_CSS_SYNTAX_DISALLOWED_PSEUDO_ELEMENT                         ValidationError_Code = 116
 	ValidationError_CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE                         ValidationError_Code = 71
+	ValidationError_CSS_SYNTAX_DISALLOWED_IMPORTANT                              ValidationError_Code = 117
 	ValidationError_CSS_EXCESSIVELY_NESTED                                       ValidationError_Code = 107
 	// The following codes are currently used only by A4A CSS validation.
 	ValidationError_CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE_WITH_HINT ValidationError_Code = 72
@@ -648,235 +831,245 @@ const (
 	ValidationError_CSS_SYNTAX_PROPERTY_REQUIRES_QUALIFICATION     ValidationError_Code = 75
 )
 
-var ValidationError_Code_name = map[int32]string{
-	0:   "UNKNOWN_CODE",
-	111: "INVALID_DOCTYPE_HTML",
-	1:   "MANDATORY_TAG_MISSING",
-	24:  "TAG_REQUIRED_BY_MISSING",
-	76:  "WARNING_TAG_REQUIRED_BY_MISSING",
-	101: "TAG_EXCLUDED_BY_TAG",
-	79:  "WARNING_EXTENSION_UNUSED",
-	84:  "EXTENSION_UNUSED",
-	80:  "WARNING_EXTENSION_DEPRECATED_VERSION",
-	112: "NON_LTS_SCRIPT_AFTER_LTS",
-	113: "LTS_SCRIPT_AFTER_NON_LTS",
-	61:  "ATTR_REQUIRED_BUT_MISSING",
-	2:   "DISALLOWED_TAG",
-	51:  "GENERAL_DISALLOWED_TAG",
-	88:  "DISALLOWED_SCRIPT_TAG",
-	3:   "DISALLOWED_ATTR",
-	81:  "DISALLOWED_STYLE_ATTR",
-	4:   "INVALID_ATTR_VALUE",
-	94:  "DUPLICATE_ATTRIBUTE",
-	27:  "ATTR_VALUE_REQUIRED_BY_LAYOUT",
-	105: "MISSING_LAYOUT_ATTRIBUTES",
-	22:  "IMPLIED_LAYOUT_INVALID",
-	26:  "SPECIFIED_LAYOUT_INVALID",
-	5:   "MANDATORY_ATTR_MISSING",
-	28:  "MANDATORY_ONEOF_ATTR_MISSING",
-	104: "MANDATORY_ANYOF_ATTR_MISSING",
-	60:  "DUPLICATE_DIMENSION",
-	6:   "DUPLICATE_UNIQUE_TAG",
-	77:  "DUPLICATE_UNIQUE_TAG_WARNING",
-	7:   "WRONG_PARENT_TAG",
-	50:  "STYLESHEET_TOO_LONG",
-	102: "STYLESHEET_AND_INLINE_STYLE_TOO_LONG",
-	103: "INLINE_STYLE_TOO_LONG",
-	9:   "MANDATORY_CDATA_MISSING_OR_INCORRECT",
-	30:  "CDATA_VIOLATES_DENYLIST",
-	82:  "NON_WHITESPACE_CDATA_ENCOUNTERED",
-	106: "INVALID_JSON_CDATA",
-	11:  "DEPRECATED_ATTR",
-	12:  "DEPRECATED_TAG",
-	14:  "MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE",
-	15:  "INVALID_PROPERTY_VALUE_IN_ATTR_VALUE",
-	35:  "MISSING_URL",
-	36:  "INVALID_URL",
-	37:  "INVALID_URL_PROTOCOL",
-	62:  "DISALLOWED_DOMAIN",
-	49:  "DISALLOWED_RELATIVE_URL",
-	16:  "DISALLOWED_PROPERTY_IN_ATTR_VALUE",
-	17:  "MUTUALLY_EXCLUSIVE_ATTRS",
-	18:  "UNESCAPED_TEMPLATE_IN_ATTR_VALUE",
-	19:  "TEMPLATE_PARTIAL_IN_ATTR_VALUE",
-	20:  "TEMPLATE_IN_ATTR_NAME",
-	21:  "INCONSISTENT_UNITS_FOR_WIDTH_AND_HEIGHT",
-	23:  "DISALLOWED_TAG_ANCESTOR",
-	89:  "MANDATORY_LAST_CHILD_TAG",
-	31:  "MANDATORY_TAG_ANCESTOR",
-	32:  "MANDATORY_TAG_ANCESTOR_WITH_HINT",
-	33:  "ATTR_DISALLOWED_BY_IMPLIED_LAYOUT",
-	34:  "ATTR_DISALLOWED_BY_SPECIFIED_LAYOUT",
-	56:  "INCORRECT_NUM_CHILD_TAGS",
-	85:  "INCORRECT_MIN_NUM_CHILD_TAGS",
-	57:  "DISALLOWED_CHILD_TAG_NAME",
-	58:  "DISALLOWED_FIRST_CHILD_TAG_NAME",
-	64:  "DISALLOWED_MANUFACTURED_BODY",
-	66:  "CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT",
-	67:  "MANDATORY_REFERENCE_POINT_MISSING",
-	68:  "DUPLICATE_REFERENCE_POINT",
-	87:  "TAG_NOT_ALLOWED_TO_HAVE_SIBLINGS",
-	69:  "TAG_REFERENCE_POINT_CONFLICT",
-	70:  "CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT_SINGULAR",
-	78:  "BASE_TAG_MUST_PRECEED_ALL_URLS",
-	83:  "MISSING_REQUIRED_EXTENSION",
-	97:  "ATTR_MISSING_REQUIRED_EXTENSION",
-	86:  "DOCUMENT_TOO_COMPLEX",
-	96:  "INVALID_UTF8",
-	108: "DOCUMENT_SIZE_LIMIT_EXCEEDED",
-	109: "DEV_MODE_ONLY",
-	110: "VALUE_SET_MISMATCH",
-	29:  "CSS_SYNTAX_INVALID_AT_RULE",
-	38:  "CSS_SYNTAX_STRAY_TRAILING_BACKSLASH",
-	39:  "CSS_SYNTAX_UNTERMINATED_COMMENT",
-	40:  "CSS_SYNTAX_UNTERMINATED_STRING",
-	41:  "CSS_SYNTAX_BAD_URL",
-	42:  "CSS_SYNTAX_EOF_IN_PRELUDE_OF_QUALIFIED_RULE",
-	43:  "CSS_SYNTAX_INVALID_DECLARATION",
-	44:  "CSS_SYNTAX_INCOMPLETE_DECLARATION",
-	45:  "CSS_SYNTAX_ERROR_IN_PSEUDO_SELECTOR",
-	46:  "CSS_SYNTAX_MISSING_SELECTOR",
-	47:  "CSS_SYNTAX_NOT_A_SELECTOR_START",
-	48:  "CSS_SYNTAX_UNPARSED_INPUT_REMAINS_IN_SELECTOR",
-	52:  "CSS_SYNTAX_MISSING_URL",
-	53:  "CSS_SYNTAX_INVALID_URL",
-	54:  "CSS_SYNTAX_INVALID_URL_PROTOCOL",
-	63:  "CSS_SYNTAX_DISALLOWED_DOMAIN",
-	55:  "CSS_SYNTAX_DISALLOWED_RELATIVE_URL",
-	59:  "CSS_SYNTAX_INVALID_ATTR_SELECTOR",
-	90:  "CSS_SYNTAX_INVALID_PROPERTY",
-	95:  "CSS_SYNTAX_INVALID_PROPERTY_NOLIST",
-	91:  "CSS_SYNTAX_QUALIFIED_RULE_HAS_NO_DECLARATIONS",
-	92:  "CSS_SYNTAX_DISALLOWED_QUALIFIED_RULE_MUST_BE_INSIDE_KEYFRAME",
-	93:  "CSS_SYNTAX_DISALLOWED_KEYFRAME_INSIDE_KEYFRAME",
-	98:  "CSS_SYNTAX_MALFORMED_MEDIA_QUERY",
-	99:  "CSS_SYNTAX_DISALLOWED_MEDIA_TYPE",
-	100: "CSS_SYNTAX_DISALLOWED_MEDIA_FEATURE",
-	114: "CSS_SYNTAX_DISALLOWED_ATTR_SELECTOR",
-	115: "CSS_SYNTAX_DISALLOWED_PSEUDO_CLASS",
-	116: "CSS_SYNTAX_DISALLOWED_PSEUDO_ELEMENT",
-	71:  "CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE",
-	107: "CSS_EXCESSIVELY_NESTED",
-	72:  "CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE_WITH_HINT",
-	73:  "CSS_SYNTAX_PROPERTY_DISALLOWED_WITHIN_AT_RULE",
-	74:  "CSS_SYNTAX_PROPERTY_DISALLOWED_TOGETHER_WITH",
-	75:  "CSS_SYNTAX_PROPERTY_REQUIRES_QUALIFICATION",
-}
-
-var ValidationError_Code_value = map[string]int32{
-	"UNKNOWN_CODE":                                                 0,
-	"INVALID_DOCTYPE_HTML":                                         111,
-	"MANDATORY_TAG_MISSING":                                        1,
-	"TAG_REQUIRED_BY_MISSING":                                      24,
-	"WARNING_TAG_REQUIRED_BY_MISSING":                              76,
-	"TAG_EXCLUDED_BY_TAG":                                          101,
-	"WARNING_EXTENSION_UNUSED":                                     79,
-	"EXTENSION_UNUSED":                                             84,
-	"WARNING_EXTENSION_DEPRECATED_VERSION":                         80,
-	"NON_LTS_SCRIPT_AFTER_LTS":                                     112,
-	"LTS_SCRIPT_AFTER_NON_LTS":                                     113,
-	"ATTR_REQUIRED_BUT_MISSING":                                    61,
-	"DISALLOWED_TAG":                                               2,
-	"GENERAL_DISALLOWED_TAG":                                       51,
-	"DISALLOWED_SCRIPT_TAG":                                        88,
-	"DISALLOWED_ATTR":                                              3,
-	"DISALLOWED_STYLE_ATTR":                                        81,
-	"INVALID_ATTR_VALUE":                                           4,
-	"DUPLICATE_ATTRIBUTE":                                          94,
-	"ATTR_VALUE_REQUIRED_BY_LAYOUT":                                27,
-	"MISSING_LAYOUT_ATTRIBUTES":                                    105,
-	"IMPLIED_LAYOUT_INVALID":                                       22,
-	"SPECIFIED_LAYOUT_INVALID":                                     26,
-	"MANDATORY_ATTR_MISSING":                                       5,
-	"MANDATORY_ONEOF_ATTR_MISSING":                                 28,
-	"MANDATORY_ANYOF_ATTR_MISSING":                                 104,
-	"DUPLICATE_DIMENSION":                                          60,
-	"DUPLICATE_UNIQUE_TAG":                                         6,
-	"DUPLICATE_UNIQUE_TAG_WARNING":                                 77,
-	"WRONG_PARENT_TAG":                                             7,
-	"STYLESHEET_TOO_LONG":                                          50,
-	"STYLESHEET_AND_INLINE_STYLE_TOO_LONG":                         102,
-	"INLINE_STYLE_TOO_LONG":                                        103,
-	"MANDATORY_CDATA_MISSING_OR_INCORRECT":                         9,
-	"CDATA_VIOLATES_DENYLIST":                                      30,
-	"NON_WHITESPACE_CDATA_ENCOUNTERED":                             82,
-	"INVALID_JSON_CDATA":                                           106,
-	"DEPRECATED_ATTR":                                              11,
-	"DEPRECATED_TAG":                                               12,
-	"MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE":                   14,
-	"INVALID_PROPERTY_VALUE_IN_ATTR_VALUE":                         15,
-	"MISSING_URL":                                                  35,
-	"INVALID_URL":                                                  36,
-	"INVALID_URL_PROTOCOL":                                         37,
-	"DISALLOWED_DOMAIN":                                            62,
-	"DISALLOWED_RELATIVE_URL":                                      49,
-	"DISALLOWED_PROPERTY_IN_ATTR_VALUE":                            16,
-	"MUTUALLY_EXCLUSIVE_ATTRS":                                     17,
-	"UNESCAPED_TEMPLATE_IN_ATTR_VALUE":                             18,
-	"TEMPLATE_PARTIAL_IN_ATTR_VALUE":                               19,
-	"TEMPLATE_IN_ATTR_NAME":                                        20,
-	"INCONSISTENT_UNITS_FOR_WIDTH_AND_HEIGHT":                      21,
-	"DISALLOWED_TAG_ANCESTOR":                                      23,
-	"MANDATORY_LAST_CHILD_TAG":                                     89,
-	"MANDATORY_TAG_ANCESTOR":                                       31,
-	"MANDATORY_TAG_ANCESTOR_WITH_HINT":                             32,
-	"ATTR_DISALLOWED_BY_IMPLIED_LAYOUT":                            33,
-	"ATTR_DISALLOWED_BY_SPECIFIED_LAYOUT":                          34,
-	"INCORRECT_NUM_CHILD_TAGS":                                     56,
-	"INCORRECT_MIN_NUM_CHILD_TAGS":                                 85,
-	"DISALLOWED_CHILD_TAG_NAME":                                    57,
-	"DISALLOWED_FIRST_CHILD_TAG_NAME":                              58,
-	"DISALLOWED_MANUFACTURED_BODY":                                 64,
-	"CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT":                   66,
-	"MANDATORY_REFERENCE_POINT_MISSING":                            67,
-	"DUPLICATE_REFERENCE_POINT":                                    68,
-	"TAG_NOT_ALLOWED_TO_HAVE_SIBLINGS":                             87,
-	"TAG_REFERENCE_POINT_CONFLICT":                                 69,
-	"CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT_SINGULAR":          70,
-	"BASE_TAG_MUST_PRECEED_ALL_URLS":                               78,
-	"MISSING_REQUIRED_EXTENSION":                                   83,
-	"ATTR_MISSING_REQUIRED_EXTENSION":                              97,
-	"DOCUMENT_TOO_COMPLEX":                                         86,
-	"INVALID_UTF8":                                                 96,
-	"DOCUMENT_SIZE_LIMIT_EXCEEDED":                                 108,
-	"DEV_MODE_ONLY":                                                109,
-	"VALUE_SET_MISMATCH":                                           110,
-	"CSS_SYNTAX_INVALID_AT_RULE":                                   29,
-	"CSS_SYNTAX_STRAY_TRAILING_BACKSLASH":                          38,
-	"CSS_SYNTAX_UNTERMINATED_COMMENT":                              39,
-	"CSS_SYNTAX_UNTERMINATED_STRING":                               40,
-	"CSS_SYNTAX_BAD_URL":                                           41,
-	"CSS_SYNTAX_EOF_IN_PRELUDE_OF_QUALIFIED_RULE":                  42,
-	"CSS_SYNTAX_INVALID_DECLARATION":                               43,
-	"CSS_SYNTAX_INCOMPLETE_DECLARATION":                            44,
-	"CSS_SYNTAX_ERROR_IN_PSEUDO_SELECTOR":                          45,
-	"CSS_SYNTAX_MISSING_SELECTOR":                                  46,
-	"CSS_SYNTAX_NOT_A_SELECTOR_START":                              47,
-	"CSS_SYNTAX_UNPARSED_INPUT_REMAINS_IN_SELECTOR":                48,
-	"CSS_SYNTAX_MISSING_URL":                                       52,
-	"CSS_SYNTAX_INVALID_URL":                                       53,
-	"CSS_SYNTAX_INVALID_URL_PROTOCOL":                              54,
-	"CSS_SYNTAX_DISALLOWED_DOMAIN":                                 63,
-	"CSS_SYNTAX_DISALLOWED_RELATIVE_URL":                           55,
-	"CSS_SYNTAX_INVALID_ATTR_SELECTOR":                             59,
-	"CSS_SYNTAX_INVALID_PROPERTY":                                  90,
-	"CSS_SYNTAX_INVALID_PROPERTY_NOLIST":                           95,
-	"CSS_SYNTAX_QUALIFIED_RULE_HAS_NO_DECLARATIONS":                91,
-	"CSS_SYNTAX_DISALLOWED_QUALIFIED_RULE_MUST_BE_INSIDE_KEYFRAME": 92,
-	"CSS_SYNTAX_DISALLOWED_KEYFRAME_INSIDE_KEYFRAME":               93,
-	"CSS_SYNTAX_MALFORMED_MEDIA_QUERY":                             98,
-	"CSS_SYNTAX_DISALLOWED_MEDIA_TYPE":                             99,
-	"CSS_SYNTAX_DISALLOWED_MEDIA_FEATURE":                          100,
-	"CSS_SYNTAX_DISALLOWED_ATTR_SELECTOR":                          114,
-	"CSS_SYNTAX_DISALLOWED_PSEUDO_CLASS":                           115,
-	"CSS_SYNTAX_DISALLOWED_PSEUDO_ELEMENT":                         116,
-	"CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE":                         71,
-	"CSS_EXCESSIVELY_NESTED":                                       107,
-	"CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE_WITH_HINT":               72,
-	"CSS_SYNTAX_PROPERTY_DISALLOWED_WITHIN_AT_RULE":                73,
-	"CSS_SYNTAX_PROPERTY_DISALLOWED_TOGETHER_WITH":                 74,
-	"CSS_SYNTAX_PROPERTY_REQUIRES_QUALIFICATION":                   75,
-}
+// Enum value maps for ValidationError_Code.
+var (
+	ValidationError_Code_name = map[int32]string{
+		0:   "UNKNOWN_CODE",
+		111: "INVALID_DOCTYPE_HTML",
+		1:   "MANDATORY_TAG_MISSING",
+		24:  "TAG_REQUIRED_BY_MISSING",
+		76:  "WARNING_TAG_REQUIRED_BY_MISSING",
+		101: "TAG_EXCLUDED_BY_TAG",
+		79:  "WARNING_EXTENSION_UNUSED",
+		84:  "EXTENSION_UNUSED",
+		80:  "WARNING_EXTENSION_DEPRECATED_VERSION",
+		112: "NON_LTS_SCRIPT_AFTER_LTS",
+		113: "LTS_SCRIPT_AFTER_NON_LTS",
+		119: "INCORRECT_SCRIPT_RELEASE_VERSION",
+		61:  "ATTR_REQUIRED_BUT_MISSING",
+		2:   "DISALLOWED_TAG",
+		51:  "GENERAL_DISALLOWED_TAG",
+		88:  "DISALLOWED_SCRIPT_TAG",
+		3:   "DISALLOWED_ATTR",
+		81:  "DISALLOWED_STYLE_ATTR",
+		4:   "INVALID_ATTR_VALUE",
+		94:  "DUPLICATE_ATTRIBUTE",
+		27:  "ATTR_VALUE_REQUIRED_BY_LAYOUT",
+		105: "MISSING_LAYOUT_ATTRIBUTES",
+		22:  "IMPLIED_LAYOUT_INVALID",
+		26:  "SPECIFIED_LAYOUT_INVALID",
+		5:   "MANDATORY_ATTR_MISSING",
+		28:  "MANDATORY_ONEOF_ATTR_MISSING",
+		104: "MANDATORY_ANYOF_ATTR_MISSING",
+		60:  "DUPLICATE_DIMENSION",
+		6:   "DUPLICATE_UNIQUE_TAG",
+		77:  "DUPLICATE_UNIQUE_TAG_WARNING",
+		7:   "WRONG_PARENT_TAG",
+		50:  "STYLESHEET_TOO_LONG",
+		102: "STYLESHEET_AND_INLINE_STYLE_TOO_LONG",
+		103: "INLINE_STYLE_TOO_LONG",
+		118: "INLINE_SCRIPT_TOO_LONG",
+		9:   "MANDATORY_CDATA_MISSING_OR_INCORRECT",
+		30:  "CDATA_VIOLATES_DENYLIST",
+		82:  "NON_WHITESPACE_CDATA_ENCOUNTERED",
+		106: "INVALID_JSON_CDATA",
+		11:  "DEPRECATED_ATTR",
+		12:  "DEPRECATED_TAG",
+		14:  "MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE",
+		15:  "INVALID_PROPERTY_VALUE_IN_ATTR_VALUE",
+		35:  "MISSING_URL",
+		36:  "INVALID_URL",
+		37:  "INVALID_URL_PROTOCOL",
+		62:  "DISALLOWED_DOMAIN",
+		49:  "DISALLOWED_RELATIVE_URL",
+		16:  "DISALLOWED_PROPERTY_IN_ATTR_VALUE",
+		17:  "MUTUALLY_EXCLUSIVE_ATTRS",
+		18:  "UNESCAPED_TEMPLATE_IN_ATTR_VALUE",
+		19:  "TEMPLATE_PARTIAL_IN_ATTR_VALUE",
+		20:  "TEMPLATE_IN_ATTR_NAME",
+		21:  "INCONSISTENT_UNITS_FOR_WIDTH_AND_HEIGHT",
+		23:  "DISALLOWED_TAG_ANCESTOR",
+		89:  "MANDATORY_LAST_CHILD_TAG",
+		31:  "MANDATORY_TAG_ANCESTOR",
+		32:  "MANDATORY_TAG_ANCESTOR_WITH_HINT",
+		33:  "ATTR_DISALLOWED_BY_IMPLIED_LAYOUT",
+		34:  "ATTR_DISALLOWED_BY_SPECIFIED_LAYOUT",
+		56:  "INCORRECT_NUM_CHILD_TAGS",
+		85:  "INCORRECT_MIN_NUM_CHILD_TAGS",
+		57:  "DISALLOWED_CHILD_TAG_NAME",
+		58:  "DISALLOWED_FIRST_CHILD_TAG_NAME",
+		64:  "DISALLOWED_MANUFACTURED_BODY",
+		66:  "CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT",
+		67:  "MANDATORY_REFERENCE_POINT_MISSING",
+		68:  "DUPLICATE_REFERENCE_POINT",
+		87:  "TAG_NOT_ALLOWED_TO_HAVE_SIBLINGS",
+		69:  "TAG_REFERENCE_POINT_CONFLICT",
+		70:  "CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT_SINGULAR",
+		78:  "BASE_TAG_MUST_PRECEED_ALL_URLS",
+		83:  "MISSING_REQUIRED_EXTENSION",
+		97:  "ATTR_MISSING_REQUIRED_EXTENSION",
+		86:  "DOCUMENT_TOO_COMPLEX",
+		96:  "INVALID_UTF8",
+		108: "DOCUMENT_SIZE_LIMIT_EXCEEDED",
+		109: "DEV_MODE_ONLY",
+		120: "AMP_EMAIL_MISSING_STRICT_CSS_ATTR",
+		110: "VALUE_SET_MISMATCH",
+		29:  "CSS_SYNTAX_INVALID_AT_RULE",
+		38:  "CSS_SYNTAX_STRAY_TRAILING_BACKSLASH",
+		39:  "CSS_SYNTAX_UNTERMINATED_COMMENT",
+		40:  "CSS_SYNTAX_UNTERMINATED_STRING",
+		41:  "CSS_SYNTAX_BAD_URL",
+		42:  "CSS_SYNTAX_EOF_IN_PRELUDE_OF_QUALIFIED_RULE",
+		43:  "CSS_SYNTAX_INVALID_DECLARATION",
+		44:  "CSS_SYNTAX_INCOMPLETE_DECLARATION",
+		45:  "CSS_SYNTAX_ERROR_IN_PSEUDO_SELECTOR",
+		46:  "CSS_SYNTAX_MISSING_SELECTOR",
+		47:  "CSS_SYNTAX_NOT_A_SELECTOR_START",
+		48:  "CSS_SYNTAX_UNPARSED_INPUT_REMAINS_IN_SELECTOR",
+		52:  "CSS_SYNTAX_MISSING_URL",
+		53:  "CSS_SYNTAX_INVALID_URL",
+		54:  "CSS_SYNTAX_INVALID_URL_PROTOCOL",
+		63:  "CSS_SYNTAX_DISALLOWED_DOMAIN",
+		55:  "CSS_SYNTAX_DISALLOWED_RELATIVE_URL",
+		59:  "CSS_SYNTAX_INVALID_ATTR_SELECTOR",
+		90:  "CSS_SYNTAX_INVALID_PROPERTY",
+		95:  "CSS_SYNTAX_INVALID_PROPERTY_NOLIST",
+		91:  "CSS_SYNTAX_QUALIFIED_RULE_HAS_NO_DECLARATIONS",
+		92:  "CSS_SYNTAX_DISALLOWED_QUALIFIED_RULE_MUST_BE_INSIDE_KEYFRAME",
+		93:  "CSS_SYNTAX_DISALLOWED_KEYFRAME_INSIDE_KEYFRAME",
+		98:  "CSS_SYNTAX_MALFORMED_MEDIA_QUERY",
+		99:  "CSS_SYNTAX_DISALLOWED_MEDIA_TYPE",
+		100: "CSS_SYNTAX_DISALLOWED_MEDIA_FEATURE",
+		114: "CSS_SYNTAX_DISALLOWED_ATTR_SELECTOR",
+		115: "CSS_SYNTAX_DISALLOWED_PSEUDO_CLASS",
+		116: "CSS_SYNTAX_DISALLOWED_PSEUDO_ELEMENT",
+		71:  "CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE",
+		117: "CSS_SYNTAX_DISALLOWED_IMPORTANT",
+		107: "CSS_EXCESSIVELY_NESTED",
+		72:  "CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE_WITH_HINT",
+		73:  "CSS_SYNTAX_PROPERTY_DISALLOWED_WITHIN_AT_RULE",
+		74:  "CSS_SYNTAX_PROPERTY_DISALLOWED_TOGETHER_WITH",
+		75:  "CSS_SYNTAX_PROPERTY_REQUIRES_QUALIFICATION",
+	}
+	ValidationError_Code_value = map[string]int32{
+		"UNKNOWN_CODE":                                                 0,
+		"INVALID_DOCTYPE_HTML":                                         111,
+		"MANDATORY_TAG_MISSING":                                        1,
+		"TAG_REQUIRED_BY_MISSING":                                      24,
+		"WARNING_TAG_REQUIRED_BY_MISSING":                              76,
+		"TAG_EXCLUDED_BY_TAG":                                          101,
+		"WARNING_EXTENSION_UNUSED":                                     79,
+		"EXTENSION_UNUSED":                                             84,
+		"WARNING_EXTENSION_DEPRECATED_VERSION":                         80,
+		"NON_LTS_SCRIPT_AFTER_LTS":                                     112,
+		"LTS_SCRIPT_AFTER_NON_LTS":                                     113,
+		"INCORRECT_SCRIPT_RELEASE_VERSION":                             119,
+		"ATTR_REQUIRED_BUT_MISSING":                                    61,
+		"DISALLOWED_TAG":                                               2,
+		"GENERAL_DISALLOWED_TAG":                                       51,
+		"DISALLOWED_SCRIPT_TAG":                                        88,
+		"DISALLOWED_ATTR":                                              3,
+		"DISALLOWED_STYLE_ATTR":                                        81,
+		"INVALID_ATTR_VALUE":                                           4,
+		"DUPLICATE_ATTRIBUTE":                                          94,
+		"ATTR_VALUE_REQUIRED_BY_LAYOUT":                                27,
+		"MISSING_LAYOUT_ATTRIBUTES":                                    105,
+		"IMPLIED_LAYOUT_INVALID":                                       22,
+		"SPECIFIED_LAYOUT_INVALID":                                     26,
+		"MANDATORY_ATTR_MISSING":                                       5,
+		"MANDATORY_ONEOF_ATTR_MISSING":                                 28,
+		"MANDATORY_ANYOF_ATTR_MISSING":                                 104,
+		"DUPLICATE_DIMENSION":                                          60,
+		"DUPLICATE_UNIQUE_TAG":                                         6,
+		"DUPLICATE_UNIQUE_TAG_WARNING":                                 77,
+		"WRONG_PARENT_TAG":                                             7,
+		"STYLESHEET_TOO_LONG":                                          50,
+		"STYLESHEET_AND_INLINE_STYLE_TOO_LONG":                         102,
+		"INLINE_STYLE_TOO_LONG":                                        103,
+		"INLINE_SCRIPT_TOO_LONG":                                       118,
+		"MANDATORY_CDATA_MISSING_OR_INCORRECT":                         9,
+		"CDATA_VIOLATES_DENYLIST":                                      30,
+		"NON_WHITESPACE_CDATA_ENCOUNTERED":                             82,
+		"INVALID_JSON_CDATA":                                           106,
+		"DEPRECATED_ATTR":                                              11,
+		"DEPRECATED_TAG":                                               12,
+		"MANDATORY_PROPERTY_MISSING_FROM_ATTR_VALUE":                   14,
+		"INVALID_PROPERTY_VALUE_IN_ATTR_VALUE":                         15,
+		"MISSING_URL":                                                  35,
+		"INVALID_URL":                                                  36,
+		"INVALID_URL_PROTOCOL":                                         37,
+		"DISALLOWED_DOMAIN":                                            62,
+		"DISALLOWED_RELATIVE_URL":                                      49,
+		"DISALLOWED_PROPERTY_IN_ATTR_VALUE":                            16,
+		"MUTUALLY_EXCLUSIVE_ATTRS":                                     17,
+		"UNESCAPED_TEMPLATE_IN_ATTR_VALUE":                             18,
+		"TEMPLATE_PARTIAL_IN_ATTR_VALUE":                               19,
+		"TEMPLATE_IN_ATTR_NAME":                                        20,
+		"INCONSISTENT_UNITS_FOR_WIDTH_AND_HEIGHT":                      21,
+		"DISALLOWED_TAG_ANCESTOR":                                      23,
+		"MANDATORY_LAST_CHILD_TAG":                                     89,
+		"MANDATORY_TAG_ANCESTOR":                                       31,
+		"MANDATORY_TAG_ANCESTOR_WITH_HINT":                             32,
+		"ATTR_DISALLOWED_BY_IMPLIED_LAYOUT":                            33,
+		"ATTR_DISALLOWED_BY_SPECIFIED_LAYOUT":                          34,
+		"INCORRECT_NUM_CHILD_TAGS":                                     56,
+		"INCORRECT_MIN_NUM_CHILD_TAGS":                                 85,
+		"DISALLOWED_CHILD_TAG_NAME":                                    57,
+		"DISALLOWED_FIRST_CHILD_TAG_NAME":                              58,
+		"DISALLOWED_MANUFACTURED_BODY":                                 64,
+		"CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT":                   66,
+		"MANDATORY_REFERENCE_POINT_MISSING":                            67,
+		"DUPLICATE_REFERENCE_POINT":                                    68,
+		"TAG_NOT_ALLOWED_TO_HAVE_SIBLINGS":                             87,
+		"TAG_REFERENCE_POINT_CONFLICT":                                 69,
+		"CHILD_TAG_DOES_NOT_SATISFY_REFERENCE_POINT_SINGULAR":          70,
+		"BASE_TAG_MUST_PRECEED_ALL_URLS":                               78,
+		"MISSING_REQUIRED_EXTENSION":                                   83,
+		"ATTR_MISSING_REQUIRED_EXTENSION":                              97,
+		"DOCUMENT_TOO_COMPLEX":                                         86,
+		"INVALID_UTF8":                                                 96,
+		"DOCUMENT_SIZE_LIMIT_EXCEEDED":                                 108,
+		"DEV_MODE_ONLY":                                                109,
+		"AMP_EMAIL_MISSING_STRICT_CSS_ATTR":                            120,
+		"VALUE_SET_MISMATCH":                                           110,
+		"CSS_SYNTAX_INVALID_AT_RULE":                                   29,
+		"CSS_SYNTAX_STRAY_TRAILING_BACKSLASH":                          38,
+		"CSS_SYNTAX_UNTERMINATED_COMMENT":                              39,
+		"CSS_SYNTAX_UNTERMINATED_STRING":                               40,
+		"CSS_SYNTAX_BAD_URL":                                           41,
+		"CSS_SYNTAX_EOF_IN_PRELUDE_OF_QUALIFIED_RULE":                  42,
+		"CSS_SYNTAX_INVALID_DECLARATION":                               43,
+		"CSS_SYNTAX_INCOMPLETE_DECLARATION":                            44,
+		"CSS_SYNTAX_ERROR_IN_PSEUDO_SELECTOR":                          45,
+		"CSS_SYNTAX_MISSING_SELECTOR":                                  46,
+		"CSS_SYNTAX_NOT_A_SELECTOR_START":                              47,
+		"CSS_SYNTAX_UNPARSED_INPUT_REMAINS_IN_SELECTOR":                48,
+		"CSS_SYNTAX_MISSING_URL":                                       52,
+		"CSS_SYNTAX_INVALID_URL":                                       53,
+		"CSS_SYNTAX_INVALID_URL_PROTOCOL":                              54,
+		"CSS_SYNTAX_DISALLOWED_DOMAIN":                                 63,
+		"CSS_SYNTAX_DISALLOWED_RELATIVE_URL":                           55,
+		"CSS_SYNTAX_INVALID_ATTR_SELECTOR":                             59,
+		"CSS_SYNTAX_INVALID_PROPERTY":                                  90,
+		"CSS_SYNTAX_INVALID_PROPERTY_NOLIST":                           95,
+		"CSS_SYNTAX_QUALIFIED_RULE_HAS_NO_DECLARATIONS":                91,
+		"CSS_SYNTAX_DISALLOWED_QUALIFIED_RULE_MUST_BE_INSIDE_KEYFRAME": 92,
+		"CSS_SYNTAX_DISALLOWED_KEYFRAME_INSIDE_KEYFRAME":               93,
+		"CSS_SYNTAX_MALFORMED_MEDIA_QUERY":                             98,
+		"CSS_SYNTAX_DISALLOWED_MEDIA_TYPE":                             99,
+		"CSS_SYNTAX_DISALLOWED_MEDIA_FEATURE":                          100,
+		"CSS_SYNTAX_DISALLOWED_ATTR_SELECTOR":                          114,
+		"CSS_SYNTAX_DISALLOWED_PSEUDO_CLASS":                           115,
+		"CSS_SYNTAX_DISALLOWED_PSEUDO_ELEMENT":                         116,
+		"CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE":                         71,
+		"CSS_SYNTAX_DISALLOWED_IMPORTANT":                              117,
+		"CSS_EXCESSIVELY_NESTED":                                       107,
+		"CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE_WITH_HINT":               72,
+		"CSS_SYNTAX_PROPERTY_DISALLOWED_WITHIN_AT_RULE":                73,
+		"CSS_SYNTAX_PROPERTY_DISALLOWED_TOGETHER_WITH":                 74,
+		"CSS_SYNTAX_PROPERTY_REQUIRES_QUALIFICATION":                   75,
+	}
+)
 
 func (x ValidationError_Code) Enum() *ValidationError_Code {
 	p := new(ValidationError_Code)
@@ -885,20 +1078,34 @@ func (x ValidationError_Code) Enum() *ValidationError_Code {
 }
 
 func (x ValidationError_Code) String() string {
-	return proto.EnumName(ValidationError_Code_name, int32(x))
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
 }
 
-func (x *ValidationError_Code) UnmarshalJSON(data []byte) error {
-	value, err := proto.UnmarshalJSONEnum(ValidationError_Code_value, data, "ValidationError_Code")
+func (ValidationError_Code) Descriptor() protoreflect.EnumDescriptor {
+	return file_validator_proto_enumTypes[10].Descriptor()
+}
+
+func (ValidationError_Code) Type() protoreflect.EnumType {
+	return &file_validator_proto_enumTypes[10]
+}
+
+func (x ValidationError_Code) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
+}
+
+// Deprecated: Do not use.
+func (x *ValidationError_Code) UnmarshalJSON(b []byte) error {
+	num, err := protoimpl.X.UnmarshalJSONEnum(x.Descriptor(), b)
 	if err != nil {
 		return err
 	}
-	*x = ValidationError_Code(value)
+	*x = ValidationError_Code(num)
 	return nil
 }
 
+// Deprecated: Use ValidationError_Code.Descriptor instead.
 func (ValidationError_Code) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{25, 1}
+	return file_validator_proto_rawDescGZIP(), []int{26, 1}
 }
 
 // NEXT AVAILABLE TAG: 3
@@ -910,17 +1117,19 @@ const (
 	ValidationResult_FAIL    ValidationResult_Status = 2
 )
 
-var ValidationResult_Status_name = map[int32]string{
-	0: "UNKNOWN",
-	1: "PASS",
-	2: "FAIL",
-}
-
-var ValidationResult_Status_value = map[string]int32{
-	"UNKNOWN": 0,
-	"PASS":    1,
-	"FAIL":    2,
-}
+// Enum value maps for ValidationResult_Status.
+var (
+	ValidationResult_Status_name = map[int32]string{
+		0: "UNKNOWN",
+		1: "PASS",
+		2: "FAIL",
+	}
+	ValidationResult_Status_value = map[string]int32{
+		"UNKNOWN": 0,
+		"PASS":    1,
+		"FAIL":    2,
+	}
+)
 
 func (x ValidationResult_Status) Enum() *ValidationResult_Status {
 	p := new(ValidationResult_Status)
@@ -929,20 +1138,34 @@ func (x ValidationResult_Status) Enum() *ValidationResult_Status {
 }
 
 func (x ValidationResult_Status) String() string {
-	return proto.EnumName(ValidationResult_Status_name, int32(x))
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
 }
 
-func (x *ValidationResult_Status) UnmarshalJSON(data []byte) error {
-	value, err := proto.UnmarshalJSONEnum(ValidationResult_Status_value, data, "ValidationResult_Status")
+func (ValidationResult_Status) Descriptor() protoreflect.EnumDescriptor {
+	return file_validator_proto_enumTypes[11].Descriptor()
+}
+
+func (ValidationResult_Status) Type() protoreflect.EnumType {
+	return &file_validator_proto_enumTypes[11]
+}
+
+func (x ValidationResult_Status) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
+}
+
+// Deprecated: Do not use.
+func (x *ValidationResult_Status) UnmarshalJSON(b []byte) error {
+	num, err := protoimpl.X.UnmarshalJSONEnum(x.Descriptor(), b)
 	if err != nil {
 		return err
 	}
-	*x = ValidationResult_Status(value)
+	*x = ValidationResult_Status(num)
 	return nil
 }
 
+// Deprecated: Use ValidationResult_Status.Descriptor instead.
 func (ValidationResult_Status) EnumDescriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{30, 0}
+	return file_validator_proto_rawDescGZIP(), []int{31, 0}
 }
 
 // Used for validating attributes that require another attribute for some
@@ -950,52 +1173,60 @@ func (ValidationResult_Status) EnumDescriptor() ([]byte, []int) {
 // E.g. attr name: "on" if_value_regex: "tap:.*" also_require_attr: "role"
 // NEXT AVAILABLE TAG: 3
 type AttrTriggerSpec struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// If set, attribute's value must match to also require attribute(s).
 	// If not set, attribute automatically also require attribute(s).
-	IfValueRegex *string `protobuf:"bytes,1,opt,name=if_value_regex,json=ifValueRegex" json:"if_value_regex,omitempty"`
+	IfValueRegex *string `protobuf:"bytes,1,opt,name=if_value_regex,json=ifValueRegex" json:"if_value_regex,omitempty"` // case sensitive
 	// If set, other attributes - identified by their name string - must
 	// be present as well.
-	AlsoRequiresAttr     []string `protobuf:"bytes,2,rep,name=also_requires_attr,json=alsoRequiresAttr" json:"also_requires_attr,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	AlsoRequiresAttr []string `protobuf:"bytes,2,rep,name=also_requires_attr,json=alsoRequiresAttr" json:"also_requires_attr,omitempty"`
 }
 
-func (m *AttrTriggerSpec) Reset()         { *m = AttrTriggerSpec{} }
-func (m *AttrTriggerSpec) String() string { return proto.CompactTextString(m) }
-func (*AttrTriggerSpec) ProtoMessage()    {}
-func (*AttrTriggerSpec) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{0}
+func (x *AttrTriggerSpec) Reset() {
+	*x = AttrTriggerSpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[0]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
 
-func (m *AttrTriggerSpec) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_AttrTriggerSpec.Unmarshal(m, b)
-}
-func (m *AttrTriggerSpec) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_AttrTriggerSpec.Marshal(b, m, deterministic)
-}
-func (m *AttrTriggerSpec) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_AttrTriggerSpec.Merge(m, src)
+func (x *AttrTriggerSpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *AttrTriggerSpec) XXX_Size() int {
-	return xxx_messageInfo_AttrTriggerSpec.Size(m)
-}
-func (m *AttrTriggerSpec) XXX_DiscardUnknown() {
-	xxx_messageInfo_AttrTriggerSpec.DiscardUnknown(m)
+
+func (*AttrTriggerSpec) ProtoMessage() {}
+
+func (x *AttrTriggerSpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[0]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_AttrTriggerSpec proto.InternalMessageInfo
+// Deprecated: Use AttrTriggerSpec.ProtoReflect.Descriptor instead.
+func (*AttrTriggerSpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{0}
+}
 
-func (m *AttrTriggerSpec) GetIfValueRegex() string {
-	if m != nil && m.IfValueRegex != nil {
-		return *m.IfValueRegex
+func (x *AttrTriggerSpec) GetIfValueRegex() string {
+	if x != nil && x.IfValueRegex != nil {
+		return *x.IfValueRegex
 	}
 	return ""
 }
 
-func (m *AttrTriggerSpec) GetAlsoRequiresAttr() []string {
-	if m != nil {
-		return m.AlsoRequiresAttr
+func (x *AttrTriggerSpec) GetAlsoRequiresAttr() []string {
+	if x != nil {
+		return x.AlsoRequiresAttr
 	}
 	return nil
 }
@@ -1005,106 +1236,122 @@ func (m *AttrTriggerSpec) GetAlsoRequiresAttr() []string {
 // https://drafts.csswg.org/css-device-adapt/#parsing-algorithm
 // NEXT AVAILABLE TAG: 5
 type PropertySpec struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// Must be lowercase, and will be matched case-insensitively.
 	Name      *string `protobuf:"bytes,1,opt,name=name" json:"name,omitempty"`
 	Mandatory *bool   `protobuf:"varint,2,opt,name=mandatory" json:"mandatory,omitempty"`
 	// Must be lowercase, and will be matched case-insensitively.
-	Value                *string  `protobuf:"bytes,3,opt,name=value" json:"value,omitempty"`
-	ValueDouble          *float64 `protobuf:"fixed64,4,opt,name=value_double,json=valueDouble" json:"value_double,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	Value       *string  `protobuf:"bytes,3,opt,name=value" json:"value,omitempty"`
+	ValueDouble *float64 `protobuf:"fixed64,4,opt,name=value_double,json=valueDouble" json:"value_double,omitempty"` // } end oneof
 }
 
-func (m *PropertySpec) Reset()         { *m = PropertySpec{} }
-func (m *PropertySpec) String() string { return proto.CompactTextString(m) }
-func (*PropertySpec) ProtoMessage()    {}
-func (*PropertySpec) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{1}
+func (x *PropertySpec) Reset() {
+	*x = PropertySpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[1]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
 
-func (m *PropertySpec) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_PropertySpec.Unmarshal(m, b)
-}
-func (m *PropertySpec) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_PropertySpec.Marshal(b, m, deterministic)
-}
-func (m *PropertySpec) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_PropertySpec.Merge(m, src)
-}
-func (m *PropertySpec) XXX_Size() int {
-	return xxx_messageInfo_PropertySpec.Size(m)
+func (x *PropertySpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *PropertySpec) XXX_DiscardUnknown() {
-	xxx_messageInfo_PropertySpec.DiscardUnknown(m)
+
+func (*PropertySpec) ProtoMessage() {}
+
+func (x *PropertySpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[1]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_PropertySpec proto.InternalMessageInfo
+// Deprecated: Use PropertySpec.ProtoReflect.Descriptor instead.
+func (*PropertySpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{1}
+}
 
-func (m *PropertySpec) GetName() string {
-	if m != nil && m.Name != nil {
-		return *m.Name
+func (x *PropertySpec) GetName() string {
+	if x != nil && x.Name != nil {
+		return *x.Name
 	}
 	return ""
 }
 
-func (m *PropertySpec) GetMandatory() bool {
-	if m != nil && m.Mandatory != nil {
-		return *m.Mandatory
+func (x *PropertySpec) GetMandatory() bool {
+	if x != nil && x.Mandatory != nil {
+		return *x.Mandatory
 	}
 	return false
 }
 
-func (m *PropertySpec) GetValue() string {
-	if m != nil && m.Value != nil {
-		return *m.Value
+func (x *PropertySpec) GetValue() string {
+	if x != nil && x.Value != nil {
+		return *x.Value
 	}
 	return ""
 }
 
-func (m *PropertySpec) GetValueDouble() float64 {
-	if m != nil && m.ValueDouble != nil {
-		return *m.ValueDouble
+func (x *PropertySpec) GetValueDouble() float64 {
+	if x != nil && x.ValueDouble != nil {
+		return *x.ValueDouble
 	}
 	return 0
 }
 
 // NEXT AVAILABLE TAG: 2
 type PropertySpecList struct {
-	Properties           []*PropertySpec `protobuf:"bytes,1,rep,name=properties" json:"properties,omitempty"`
-	XXX_NoUnkeyedLiteral struct{}        `json:"-"`
-	XXX_unrecognized     []byte          `json:"-"`
-	XXX_sizecache        int32           `json:"-"`
-}
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
 
-func (m *PropertySpecList) Reset()         { *m = PropertySpecList{} }
-func (m *PropertySpecList) String() string { return proto.CompactTextString(m) }
-func (*PropertySpecList) ProtoMessage()    {}
-func (*PropertySpecList) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{2}
+	Properties []*PropertySpec `protobuf:"bytes,1,rep,name=properties" json:"properties,omitempty"`
 }
 
-func (m *PropertySpecList) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_PropertySpecList.Unmarshal(m, b)
-}
-func (m *PropertySpecList) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_PropertySpecList.Marshal(b, m, deterministic)
-}
-func (m *PropertySpecList) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_PropertySpecList.Merge(m, src)
+func (x *PropertySpecList) Reset() {
+	*x = PropertySpecList{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[2]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *PropertySpecList) XXX_Size() int {
-	return xxx_messageInfo_PropertySpecList.Size(m)
+
+func (x *PropertySpecList) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *PropertySpecList) XXX_DiscardUnknown() {
-	xxx_messageInfo_PropertySpecList.DiscardUnknown(m)
+
+func (*PropertySpecList) ProtoMessage() {}
+
+func (x *PropertySpecList) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[2]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_PropertySpecList proto.InternalMessageInfo
+// Deprecated: Use PropertySpecList.ProtoReflect.Descriptor instead.
+func (*PropertySpecList) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{2}
+}
 
-func (m *PropertySpecList) GetProperties() []*PropertySpec {
-	if m != nil {
-		return m.Properties
+func (x *PropertySpecList) GetProperties() []*PropertySpec {
+	if x != nil {
+		return x.Properties
 	}
 	return nil
 }
@@ -1112,121 +1359,154 @@ func (m *PropertySpecList) GetProperties() []*PropertySpec {
 // Used for validating urls in attribute values (such as href/src/srcset).
 // NEXT AVAILABLE TAG: 5
 type UrlSpec struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// protocol must be in lowercase (e.g. "javascript" not "JavaScript").
 	Protocol      []string `protobuf:"bytes,1,rep,name=protocol" json:"protocol,omitempty"`
 	AllowRelative *bool    `protobuf:"varint,2,opt,name=allow_relative,json=allowRelative,def=1" json:"allow_relative,omitempty"`
 	// Whether the empty string '' is allowed for this URL value.
-	AllowEmpty           *bool    `protobuf:"varint,3,opt,name=allow_empty,json=allowEmpty,def=0" json:"allow_empty,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	AllowEmpty *bool `protobuf:"varint,3,opt,name=allow_empty,json=allowEmpty,def=0" json:"allow_empty,omitempty"`
 }
 
-func (m *UrlSpec) Reset()         { *m = UrlSpec{} }
-func (m *UrlSpec) String() string { return proto.CompactTextString(m) }
-func (*UrlSpec) ProtoMessage()    {}
-func (*UrlSpec) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{3}
-}
+// Default values for UrlSpec fields.
+const (
+	Default_UrlSpec_AllowRelative = bool(true)
+	Default_UrlSpec_AllowEmpty    = bool(false)
+)
 
-func (m *UrlSpec) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_UrlSpec.Unmarshal(m, b)
-}
-func (m *UrlSpec) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_UrlSpec.Marshal(b, m, deterministic)
-}
-func (m *UrlSpec) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_UrlSpec.Merge(m, src)
-}
-func (m *UrlSpec) XXX_Size() int {
-	return xxx_messageInfo_UrlSpec.Size(m)
+func (x *UrlSpec) Reset() {
+	*x = UrlSpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[3]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *UrlSpec) XXX_DiscardUnknown() {
-	xxx_messageInfo_UrlSpec.DiscardUnknown(m)
+
+func (x *UrlSpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
 
-var xxx_messageInfo_UrlSpec proto.InternalMessageInfo
+func (*UrlSpec) ProtoMessage() {}
+
+func (x *UrlSpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[3]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
 
-const Default_UrlSpec_AllowRelative bool = true
-const Default_UrlSpec_AllowEmpty bool = false
+// Deprecated: Use UrlSpec.ProtoReflect.Descriptor instead.
+func (*UrlSpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{3}
+}
 
-func (m *UrlSpec) GetProtocol() []string {
-	if m != nil {
-		return m.Protocol
+func (x *UrlSpec) GetProtocol() []string {
+	if x != nil {
+		return x.Protocol
 	}
 	return nil
 }
 
-func (m *UrlSpec) GetAllowRelative() bool {
-	if m != nil && m.AllowRelative != nil {
-		return *m.AllowRelative
+func (x *UrlSpec) GetAllowRelative() bool {
+	if x != nil && x.AllowRelative != nil {
+		return *x.AllowRelative
 	}
 	return Default_UrlSpec_AllowRelative
 }
 
-func (m *UrlSpec) GetAllowEmpty() bool {
-	if m != nil && m.AllowEmpty != nil {
-		return *m.AllowEmpty
+func (x *UrlSpec) GetAllowEmpty() bool {
+	if x != nil && x.AllowEmpty != nil {
+		return *x.AllowEmpty
 	}
 	return Default_UrlSpec_AllowEmpty
 }
 
-// NEXT AVAILABLE TAG: 3
+// NEXT AVAILABLE TAG: 4
 type CssDeclaration struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// The name of the declaration (e.g. display). Use lower-case attribute names
 	// only.
 	Name *string `protobuf:"bytes,1,opt,name=name" json:"name,omitempty"`
+	// This would be a oneof, but this file only uses features in protobuf 2.5.0.
+	// begin oneof {
 	// The valid values of the declaration (e.g. block).
-	ValueCasei           []string `protobuf:"bytes,2,rep,name=value_casei,json=valueCasei" json:"value_casei,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	ValueCasei      []string `protobuf:"bytes,2,rep,name=value_casei,json=valueCasei" json:"value_casei,omitempty"`
+	ValueRegexCasei *string  `protobuf:"bytes,3,opt,name=value_regex_casei,json=valueRegexCasei" json:"value_regex_casei,omitempty"` // } end oneof
 }
 
-func (m *CssDeclaration) Reset()         { *m = CssDeclaration{} }
-func (m *CssDeclaration) String() string { return proto.CompactTextString(m) }
-func (*CssDeclaration) ProtoMessage()    {}
-func (*CssDeclaration) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{4}
+func (x *CssDeclaration) Reset() {
+	*x = CssDeclaration{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[4]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
 
-func (m *CssDeclaration) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_CssDeclaration.Unmarshal(m, b)
-}
-func (m *CssDeclaration) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_CssDeclaration.Marshal(b, m, deterministic)
-}
-func (m *CssDeclaration) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_CssDeclaration.Merge(m, src)
+func (x *CssDeclaration) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *CssDeclaration) XXX_Size() int {
-	return xxx_messageInfo_CssDeclaration.Size(m)
-}
-func (m *CssDeclaration) XXX_DiscardUnknown() {
-	xxx_messageInfo_CssDeclaration.DiscardUnknown(m)
+
+func (*CssDeclaration) ProtoMessage() {}
+
+func (x *CssDeclaration) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[4]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_CssDeclaration proto.InternalMessageInfo
+// Deprecated: Use CssDeclaration.ProtoReflect.Descriptor instead.
+func (*CssDeclaration) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{4}
+}
 
-func (m *CssDeclaration) GetName() string {
-	if m != nil && m.Name != nil {
-		return *m.Name
+func (x *CssDeclaration) GetName() string {
+	if x != nil && x.Name != nil {
+		return *x.Name
 	}
 	return ""
 }
 
-func (m *CssDeclaration) GetValueCasei() []string {
-	if m != nil {
-		return m.ValueCasei
+func (x *CssDeclaration) GetValueCasei() []string {
+	if x != nil {
+		return x.ValueCasei
 	}
 	return nil
 }
 
+func (x *CssDeclaration) GetValueRegexCasei() string {
+	if x != nil && x.ValueRegexCasei != nil {
+		return *x.ValueRegexCasei
+	}
+	return ""
+}
+
 // Attributes that are not covered by at least one of these specs are
 // disallowed. Within a given context (e.g., for a given TagSpec),
 // names are unique.
 // NEXT AVAILABLE TAG: 29
 type AttrSpec struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// If provided, the Type Identifier(s) that either enable or disable
 	// this AttrSpec. If a Type Identifier is in enabled_by then this
 	// AttrSpec will be used in validating parsed documents with that Type
@@ -1251,10 +1531,10 @@ type AttrSpec struct {
 	// e.g. mandatory_oneof: "['foo', 'bar']"
 	MandatoryAnyof *string `protobuf:"bytes,21,opt,name=mandatory_anyof,json=mandatoryAnyof" json:"mandatory_anyof,omitempty"`
 	// The attribute value must be equal to the value in this field.
-	Value           []string `protobuf:"bytes,4,rep,name=value" json:"value,omitempty"`
-	ValueCasei      []string `protobuf:"bytes,18,rep,name=value_casei,json=valueCasei" json:"value_casei,omitempty"`
-	ValueRegex      *string  `protobuf:"bytes,15,opt,name=value_regex,json=valueRegex" json:"value_regex,omitempty"`
-	ValueRegexCasei *string  `protobuf:"bytes,5,opt,name=value_regex_casei,json=valueRegexCasei" json:"value_regex_casei,omitempty"`
+	Value           []string `protobuf:"bytes,4,rep,name=value" json:"value,omitempty"`                                              // case sensitive
+	ValueCasei      []string `protobuf:"bytes,18,rep,name=value_casei,json=valueCasei" json:"value_casei,omitempty"`                 // case insensitive
+	ValueRegex      *string  `protobuf:"bytes,15,opt,name=value_regex,json=valueRegex" json:"value_regex,omitempty"`                 // case sensitive
+	ValueRegexCasei *string  `protobuf:"bytes,5,opt,name=value_regex_casei,json=valueRegexCasei" json:"value_regex_casei,omitempty"` // case insensitive
 	ValueUrl        *UrlSpec `protobuf:"bytes,14,opt,name=value_url,json=valueUrl" json:"value_url,omitempty"`
 	// validates against a list of properties (see PropertySpec).
 	ValueProperties *PropertySpecList `protobuf:"bytes,11,opt,name=value_properties,json=valueProperties" json:"value_properties,omitempty"`
@@ -1263,7 +1543,7 @@ type AttrSpec struct {
 	// `value_doc_css` is set, only non-SVG css is applied. If `value_doc_css_svg`
 	// is set, SVG-specific CSS rules are also allowed for this attribute value.
 	ValueDocCss    *bool              `protobuf:"varint,27,opt,name=value_doc_css,json=valueDocCss" json:"value_doc_css,omitempty"`
-	ValueDocSvgCss *bool              `protobuf:"varint,28,opt,name=value_doc_svg_css,json=valueDocSvgCss" json:"value_doc_svg_css,omitempty"`
+	ValueDocSvgCss *bool              `protobuf:"varint,28,opt,name=value_doc_svg_css,json=valueDocSvgCss" json:"value_doc_svg_css,omitempty"` // } end oneof
 	AddValueToSet  *AttrSpec_ValueSet `protobuf:"varint,25,opt,name=add_value_to_set,json=addValueToSet,enum=amp.validator.AttrSpec_ValueSet" json:"add_value_to_set,omitempty"`
 	ValueOneofSet  *AttrSpec_ValueSet `protobuf:"varint,26,opt,name=value_oneof_set,json=valueOneofSet,enum=amp.validator.AttrSpec_ValueSet" json:"value_oneof_set,omitempty"`
 	Trigger        *AttrTriggerSpec   `protobuf:"bytes,16,opt,name=trigger" json:"trigger,omitempty"`
@@ -1292,218 +1572,225 @@ type AttrSpec struct {
 	RequiresExtension []string `protobuf:"bytes,19,rep,name=requires_extension,json=requiresExtension" json:"requires_extension,omitempty"`
 	// If set, this attr is invalid unless the current tag has an ancestor
 	// tag which set one or more of the required markers.
-	RequiresAncestor     *AncestorMarker `protobuf:"bytes,22,opt,name=requires_ancestor,json=requiresAncestor" json:"requires_ancestor,omitempty"`
-	XXX_NoUnkeyedLiteral struct{}        `json:"-"`
-	XXX_unrecognized     []byte          `json:"-"`
-	XXX_sizecache        int32           `json:"-"`
+	RequiresAncestor *AncestorMarker `protobuf:"bytes,22,opt,name=requires_ancestor,json=requiresAncestor" json:"requires_ancestor,omitempty"`
 }
 
-func (m *AttrSpec) Reset()         { *m = AttrSpec{} }
-func (m *AttrSpec) String() string { return proto.CompactTextString(m) }
-func (*AttrSpec) ProtoMessage()    {}
-func (*AttrSpec) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{5}
-}
+// Default values for AttrSpec fields.
+const (
+	Default_AttrSpec_DispatchKey = AttrSpec_NONE_DISPATCH
+	Default_AttrSpec_Implicit    = bool(false)
+)
 
-func (m *AttrSpec) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_AttrSpec.Unmarshal(m, b)
-}
-func (m *AttrSpec) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_AttrSpec.Marshal(b, m, deterministic)
-}
-func (m *AttrSpec) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_AttrSpec.Merge(m, src)
-}
-func (m *AttrSpec) XXX_Size() int {
-	return xxx_messageInfo_AttrSpec.Size(m)
+func (x *AttrSpec) Reset() {
+	*x = AttrSpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[5]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *AttrSpec) XXX_DiscardUnknown() {
-	xxx_messageInfo_AttrSpec.DiscardUnknown(m)
+
+func (x *AttrSpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
 
-var xxx_messageInfo_AttrSpec proto.InternalMessageInfo
+func (*AttrSpec) ProtoMessage() {}
 
-const Default_AttrSpec_DispatchKey AttrSpec_DispatchKeyType = AttrSpec_NONE_DISPATCH
-const Default_AttrSpec_Implicit bool = false
+func (x *AttrSpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[5]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use AttrSpec.ProtoReflect.Descriptor instead.
+func (*AttrSpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{5}
+}
 
-func (m *AttrSpec) GetEnabledBy() []string {
-	if m != nil {
-		return m.EnabledBy
+func (x *AttrSpec) GetEnabledBy() []string {
+	if x != nil {
+		return x.EnabledBy
 	}
 	return nil
 }
 
-func (m *AttrSpec) GetDisabledBy() []string {
-	if m != nil {
-		return m.DisabledBy
+func (x *AttrSpec) GetDisabledBy() []string {
+	if x != nil {
+		return x.DisabledBy
 	}
 	return nil
 }
 
-func (m *AttrSpec) GetName() string {
-	if m != nil && m.Name != nil {
-		return *m.Name
+func (x *AttrSpec) GetName() string {
+	if x != nil && x.Name != nil {
+		return *x.Name
 	}
 	return ""
 }
 
-func (m *AttrSpec) GetAlternativeNames() []string {
-	if m != nil {
-		return m.AlternativeNames
+func (x *AttrSpec) GetAlternativeNames() []string {
+	if x != nil {
+		return x.AlternativeNames
 	}
 	return nil
 }
 
-func (m *AttrSpec) GetMandatory() bool {
-	if m != nil && m.Mandatory != nil {
-		return *m.Mandatory
+func (x *AttrSpec) GetMandatory() bool {
+	if x != nil && x.Mandatory != nil {
+		return *x.Mandatory
 	}
 	return false
 }
 
-func (m *AttrSpec) GetMandatoryOneof() string {
-	if m != nil && m.MandatoryOneof != nil {
-		return *m.MandatoryOneof
+func (x *AttrSpec) GetMandatoryOneof() string {
+	if x != nil && x.MandatoryOneof != nil {
+		return *x.MandatoryOneof
 	}
 	return ""
 }
 
-func (m *AttrSpec) GetMandatoryAnyof() string {
-	if m != nil && m.MandatoryAnyof != nil {
-		return *m.MandatoryAnyof
+func (x *AttrSpec) GetMandatoryAnyof() string {
+	if x != nil && x.MandatoryAnyof != nil {
+		return *x.MandatoryAnyof
 	}
 	return ""
 }
 
-func (m *AttrSpec) GetValue() []string {
-	if m != nil {
-		return m.Value
+func (x *AttrSpec) GetValue() []string {
+	if x != nil {
+		return x.Value
 	}
 	return nil
 }
 
-func (m *AttrSpec) GetValueCasei() []string {
-	if m != nil {
-		return m.ValueCasei
+func (x *AttrSpec) GetValueCasei() []string {
+	if x != nil {
+		return x.ValueCasei
 	}
 	return nil
 }
 
-func (m *AttrSpec) GetValueRegex() string {
-	if m != nil && m.ValueRegex != nil {
-		return *m.ValueRegex
+func (x *AttrSpec) GetValueRegex() string {
+	if x != nil && x.ValueRegex != nil {
+		return *x.ValueRegex
 	}
 	return ""
 }
 
-func (m *AttrSpec) GetValueRegexCasei() string {
-	if m != nil && m.ValueRegexCasei != nil {
-		return *m.ValueRegexCasei
+func (x *AttrSpec) GetValueRegexCasei() string {
+	if x != nil && x.ValueRegexCasei != nil {
+		return *x.ValueRegexCasei
 	}
 	return ""
 }
 
-func (m *AttrSpec) GetValueUrl() *UrlSpec {
-	if m != nil {
-		return m.ValueUrl
+func (x *AttrSpec) GetValueUrl() *UrlSpec {
+	if x != nil {
+		return x.ValueUrl
 	}
 	return nil
 }
 
-func (m *AttrSpec) GetValueProperties() *PropertySpecList {
-	if m != nil {
-		return m.ValueProperties
+func (x *AttrSpec) GetValueProperties() *PropertySpecList {
+	if x != nil {
+		return x.ValueProperties
 	}
 	return nil
 }
 
-func (m *AttrSpec) GetValueDocCss() bool {
-	if m != nil && m.ValueDocCss != nil {
-		return *m.ValueDocCss
+func (x *AttrSpec) GetValueDocCss() bool {
+	if x != nil && x.ValueDocCss != nil {
+		return *x.ValueDocCss
 	}
 	return false
 }
 
-func (m *AttrSpec) GetValueDocSvgCss() bool {
-	if m != nil && m.ValueDocSvgCss != nil {
-		return *m.ValueDocSvgCss
+func (x *AttrSpec) GetValueDocSvgCss() bool {
+	if x != nil && x.ValueDocSvgCss != nil {
+		return *x.ValueDocSvgCss
 	}
 	return false
 }
 
-func (m *AttrSpec) GetAddValueToSet() AttrSpec_ValueSet {
-	if m != nil && m.AddValueToSet != nil {
-		return *m.AddValueToSet
+func (x *AttrSpec) GetAddValueToSet() AttrSpec_ValueSet {
+	if x != nil && x.AddValueToSet != nil {
+		return *x.AddValueToSet
 	}
 	return AttrSpec_UNKNOWN_VALUESET
 }
 
-func (m *AttrSpec) GetValueOneofSet() AttrSpec_ValueSet {
-	if m != nil && m.ValueOneofSet != nil {
-		return *m.ValueOneofSet
+func (x *AttrSpec) GetValueOneofSet() AttrSpec_ValueSet {
+	if x != nil && x.ValueOneofSet != nil {
+		return *x.ValueOneofSet
 	}
 	return AttrSpec_UNKNOWN_VALUESET
 }
 
-func (m *AttrSpec) GetTrigger() *AttrTriggerSpec {
-	if m != nil {
-		return m.Trigger
+func (x *AttrSpec) GetTrigger() *AttrTriggerSpec {
+	if x != nil {
+		return x.Trigger
 	}
 	return nil
 }
 
-func (m *AttrSpec) GetDisallowedValueRegex() string {
-	if m != nil && m.DisallowedValueRegex != nil {
-		return *m.DisallowedValueRegex
+func (x *AttrSpec) GetDisallowedValueRegex() string {
+	if x != nil && x.DisallowedValueRegex != nil {
+		return *x.DisallowedValueRegex
 	}
 	return ""
 }
 
-func (m *AttrSpec) GetDeprecation() string {
-	if m != nil && m.Deprecation != nil {
-		return *m.Deprecation
+func (x *AttrSpec) GetDeprecation() string {
+	if x != nil && x.Deprecation != nil {
+		return *x.Deprecation
 	}
 	return ""
 }
 
-func (m *AttrSpec) GetDeprecationUrl() string {
-	if m != nil && m.DeprecationUrl != nil {
-		return *m.DeprecationUrl
+func (x *AttrSpec) GetDeprecationUrl() string {
+	if x != nil && x.DeprecationUrl != nil {
+		return *x.DeprecationUrl
 	}
 	return ""
 }
 
-func (m *AttrSpec) GetCssDeclaration() []*CssDeclaration {
-	if m != nil {
-		return m.CssDeclaration
+func (x *AttrSpec) GetCssDeclaration() []*CssDeclaration {
+	if x != nil {
+		return x.CssDeclaration
 	}
 	return nil
 }
 
-func (m *AttrSpec) GetDispatchKey() AttrSpec_DispatchKeyType {
-	if m != nil && m.DispatchKey != nil {
-		return *m.DispatchKey
+func (x *AttrSpec) GetDispatchKey() AttrSpec_DispatchKeyType {
+	if x != nil && x.DispatchKey != nil {
+		return *x.DispatchKey
 	}
 	return Default_AttrSpec_DispatchKey
 }
 
-func (m *AttrSpec) GetImplicit() bool {
-	if m != nil && m.Implicit != nil {
-		return *m.Implicit
+func (x *AttrSpec) GetImplicit() bool {
+	if x != nil && x.Implicit != nil {
+		return *x.Implicit
 	}
 	return Default_AttrSpec_Implicit
 }
 
-func (m *AttrSpec) GetRequiresExtension() []string {
-	if m != nil {
-		return m.RequiresExtension
+func (x *AttrSpec) GetRequiresExtension() []string {
+	if x != nil {
+		return x.RequiresExtension
 	}
 	return nil
 }
 
-func (m *AttrSpec) GetRequiresAncestor() *AncestorMarker {
-	if m != nil {
-		return m.RequiresAncestor
+func (x *AttrSpec) GetRequiresAncestor() *AncestorMarker {
+	if x != nil {
+		return x.RequiresAncestor
 	}
 	return nil
 }
@@ -1512,48 +1799,56 @@ func (m *AttrSpec) GetRequiresAncestor() *AncestorMarker {
 // (see the attr_lists map in ValidatorRules).
 // NEXT AVAILABLE TAG: 3
 type AttrList struct {
-	Name                 *string     `protobuf:"bytes,1,opt,name=name" json:"name,omitempty"`
-	Attrs                []*AttrSpec `protobuf:"bytes,2,rep,name=attrs" json:"attrs,omitempty"`
-	XXX_NoUnkeyedLiteral struct{}    `json:"-"`
-	XXX_unrecognized     []byte      `json:"-"`
-	XXX_sizecache        int32       `json:"-"`
-}
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
 
-func (m *AttrList) Reset()         { *m = AttrList{} }
-func (m *AttrList) String() string { return proto.CompactTextString(m) }
-func (*AttrList) ProtoMessage()    {}
-func (*AttrList) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{6}
+	Name  *string     `protobuf:"bytes,1,opt,name=name" json:"name,omitempty"`
+	Attrs []*AttrSpec `protobuf:"bytes,2,rep,name=attrs" json:"attrs,omitempty"`
 }
 
-func (m *AttrList) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_AttrList.Unmarshal(m, b)
-}
-func (m *AttrList) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_AttrList.Marshal(b, m, deterministic)
-}
-func (m *AttrList) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_AttrList.Merge(m, src)
+func (x *AttrList) Reset() {
+	*x = AttrList{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[6]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *AttrList) XXX_Size() int {
-	return xxx_messageInfo_AttrList.Size(m)
+
+func (x *AttrList) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *AttrList) XXX_DiscardUnknown() {
-	xxx_messageInfo_AttrList.DiscardUnknown(m)
+
+func (*AttrList) ProtoMessage() {}
+
+func (x *AttrList) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[6]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_AttrList proto.InternalMessageInfo
+// Deprecated: Use AttrList.ProtoReflect.Descriptor instead.
+func (*AttrList) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{6}
+}
 
-func (m *AttrList) GetName() string {
-	if m != nil && m.Name != nil {
-		return *m.Name
+func (x *AttrList) GetName() string {
+	if x != nil && x.Name != nil {
+		return *x.Name
 	}
 	return ""
 }
 
-func (m *AttrList) GetAttrs() []*AttrSpec {
-	if m != nil {
-		return m.Attrs
+func (x *AttrList) GetAttrs() []*AttrSpec {
+	if x != nil {
+		return x.Attrs
 	}
 	return nil
 }
@@ -1562,48 +1857,56 @@ func (m *AttrList) GetAttrs() []*AttrSpec {
 // great-grandchildren, etc).
 // NEXT AVAILABLE TAG: 3
 type DescendantTagList struct {
-	Name                 *string  `protobuf:"bytes,1,opt,name=name" json:"name,omitempty"`
-	Tag                  []string `protobuf:"bytes,2,rep,name=tag" json:"tag,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
-}
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
 
-func (m *DescendantTagList) Reset()         { *m = DescendantTagList{} }
-func (m *DescendantTagList) String() string { return proto.CompactTextString(m) }
-func (*DescendantTagList) ProtoMessage()    {}
-func (*DescendantTagList) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{7}
+	Name *string  `protobuf:"bytes,1,opt,name=name" json:"name,omitempty"`
+	Tag  []string `protobuf:"bytes,2,rep,name=tag" json:"tag,omitempty"`
 }
 
-func (m *DescendantTagList) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_DescendantTagList.Unmarshal(m, b)
-}
-func (m *DescendantTagList) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_DescendantTagList.Marshal(b, m, deterministic)
-}
-func (m *DescendantTagList) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_DescendantTagList.Merge(m, src)
+func (x *DescendantTagList) Reset() {
+	*x = DescendantTagList{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[7]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *DescendantTagList) XXX_Size() int {
-	return xxx_messageInfo_DescendantTagList.Size(m)
+
+func (x *DescendantTagList) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *DescendantTagList) XXX_DiscardUnknown() {
-	xxx_messageInfo_DescendantTagList.DiscardUnknown(m)
+
+func (*DescendantTagList) ProtoMessage() {}
+
+func (x *DescendantTagList) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[7]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_DescendantTagList proto.InternalMessageInfo
+// Deprecated: Use DescendantTagList.ProtoReflect.Descriptor instead.
+func (*DescendantTagList) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{7}
+}
 
-func (m *DescendantTagList) GetName() string {
-	if m != nil && m.Name != nil {
-		return *m.Name
+func (x *DescendantTagList) GetName() string {
+	if x != nil && x.Name != nil {
+		return *x.Name
 	}
 	return ""
 }
 
-func (m *DescendantTagList) GetTag() []string {
-	if m != nil {
-		return m.Tag
+func (x *DescendantTagList) GetTag() []string {
+	if x != nil {
+		return x.Tag
 	}
 	return nil
 }
@@ -1612,48 +1915,56 @@ func (m *DescendantTagList) GetTag() []string {
 // unique key.
 // NEXT AVAILABLE TAG: 3
 type DeclarationList struct {
-	Name                 *string           `protobuf:"bytes,1,opt,name=name" json:"name,omitempty"`
-	Declaration          []*CssDeclaration `protobuf:"bytes,2,rep,name=declaration" json:"declaration,omitempty"`
-	XXX_NoUnkeyedLiteral struct{}          `json:"-"`
-	XXX_unrecognized     []byte            `json:"-"`
-	XXX_sizecache        int32             `json:"-"`
-}
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
 
-func (m *DeclarationList) Reset()         { *m = DeclarationList{} }
-func (m *DeclarationList) String() string { return proto.CompactTextString(m) }
-func (*DeclarationList) ProtoMessage()    {}
-func (*DeclarationList) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{8}
+	Name        *string           `protobuf:"bytes,1,opt,name=name" json:"name,omitempty"`
+	Declaration []*CssDeclaration `protobuf:"bytes,2,rep,name=declaration" json:"declaration,omitempty"`
 }
 
-func (m *DeclarationList) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_DeclarationList.Unmarshal(m, b)
-}
-func (m *DeclarationList) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_DeclarationList.Marshal(b, m, deterministic)
-}
-func (m *DeclarationList) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_DeclarationList.Merge(m, src)
+func (x *DeclarationList) Reset() {
+	*x = DeclarationList{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[8]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *DeclarationList) XXX_Size() int {
-	return xxx_messageInfo_DeclarationList.Size(m)
+
+func (x *DeclarationList) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *DeclarationList) XXX_DiscardUnknown() {
-	xxx_messageInfo_DeclarationList.DiscardUnknown(m)
+
+func (*DeclarationList) ProtoMessage() {}
+
+func (x *DeclarationList) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[8]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_DeclarationList proto.InternalMessageInfo
+// Deprecated: Use DeclarationList.ProtoReflect.Descriptor instead.
+func (*DeclarationList) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{8}
+}
 
-func (m *DeclarationList) GetName() string {
-	if m != nil && m.Name != nil {
-		return *m.Name
+func (x *DeclarationList) GetName() string {
+	if x != nil && x.Name != nil {
+		return *x.Name
 	}
 	return ""
 }
 
-func (m *DeclarationList) GetDeclaration() []*CssDeclaration {
-	if m != nil {
-		return m.Declaration
+func (x *DeclarationList) GetDeclaration() []*CssDeclaration {
+	if x != nil {
+		return x.Declaration
 	}
 	return nil
 }
@@ -1662,49 +1973,57 @@ func (m *DeclarationList) GetDeclaration() []*CssDeclaration {
 // fail.
 // NEXT AVAILABLE TAG: 3
 type DisallowedCDataRegex struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// Syntax is partial match, use ^ and $ if you want global match.
-	Regex                *string  `protobuf:"bytes,1,opt,name=regex" json:"regex,omitempty"`
-	ErrorMessage         *string  `protobuf:"bytes,2,opt,name=error_message,json=errorMessage" json:"error_message,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	Regex        *string `protobuf:"bytes,1,opt,name=regex" json:"regex,omitempty"`
+	ErrorMessage *string `protobuf:"bytes,2,opt,name=error_message,json=errorMessage" json:"error_message,omitempty"`
 }
 
-func (m *DisallowedCDataRegex) Reset()         { *m = DisallowedCDataRegex{} }
-func (m *DisallowedCDataRegex) String() string { return proto.CompactTextString(m) }
-func (*DisallowedCDataRegex) ProtoMessage()    {}
-func (*DisallowedCDataRegex) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{9}
+func (x *DisallowedCDataRegex) Reset() {
+	*x = DisallowedCDataRegex{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[9]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
 
-func (m *DisallowedCDataRegex) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_DisallowedCDataRegex.Unmarshal(m, b)
+func (x *DisallowedCDataRegex) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *DisallowedCDataRegex) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_DisallowedCDataRegex.Marshal(b, m, deterministic)
-}
-func (m *DisallowedCDataRegex) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_DisallowedCDataRegex.Merge(m, src)
-}
-func (m *DisallowedCDataRegex) XXX_Size() int {
-	return xxx_messageInfo_DisallowedCDataRegex.Size(m)
-}
-func (m *DisallowedCDataRegex) XXX_DiscardUnknown() {
-	xxx_messageInfo_DisallowedCDataRegex.DiscardUnknown(m)
+
+func (*DisallowedCDataRegex) ProtoMessage() {}
+
+func (x *DisallowedCDataRegex) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[9]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_DisallowedCDataRegex proto.InternalMessageInfo
+// Deprecated: Use DisallowedCDataRegex.ProtoReflect.Descriptor instead.
+func (*DisallowedCDataRegex) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{9}
+}
 
-func (m *DisallowedCDataRegex) GetRegex() string {
-	if m != nil && m.Regex != nil {
-		return *m.Regex
+func (x *DisallowedCDataRegex) GetRegex() string {
+	if x != nil && x.Regex != nil {
+		return *x.Regex
 	}
 	return ""
 }
 
-func (m *DisallowedCDataRegex) GetErrorMessage() string {
-	if m != nil && m.ErrorMessage != nil {
-		return *m.ErrorMessage
+func (x *DisallowedCDataRegex) GetErrorMessage() string {
+	if x != nil && x.ErrorMessage != nil {
+		return *x.ErrorMessage
 	}
 	return ""
 }
@@ -1712,62 +2031,73 @@ func (m *DisallowedCDataRegex) GetErrorMessage() string {
 // This spec is used when parsing a media query inside a CSS @media rule.
 // NEXT AVAILABLE TAG: 5
 type MediaQuerySpec struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// If issues_as_error is true, then parsing errors and invalid
 	// types / features will be treated as validator errors, otherwise warnings.
 	IssuesAsError *bool `protobuf:"varint,1,opt,name=issues_as_error,json=issuesAsError,def=0" json:"issues_as_error,omitempty"`
 	// These are the media query types and features allowed within the stylesheet.
 	// http://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax
-	Type                 []string `protobuf:"bytes,2,rep,name=type" json:"type,omitempty"`
-	Feature              []string `protobuf:"bytes,3,rep,name=feature" json:"feature,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	Type    []string `protobuf:"bytes,2,rep,name=type" json:"type,omitempty"`
+	Feature []string `protobuf:"bytes,3,rep,name=feature" json:"feature,omitempty"`
 }
 
-func (m *MediaQuerySpec) Reset()         { *m = MediaQuerySpec{} }
-func (m *MediaQuerySpec) String() string { return proto.CompactTextString(m) }
-func (*MediaQuerySpec) ProtoMessage()    {}
-func (*MediaQuerySpec) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{10}
-}
+// Default values for MediaQuerySpec fields.
+const (
+	Default_MediaQuerySpec_IssuesAsError = bool(false)
+)
 
-func (m *MediaQuerySpec) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_MediaQuerySpec.Unmarshal(m, b)
-}
-func (m *MediaQuerySpec) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_MediaQuerySpec.Marshal(b, m, deterministic)
-}
-func (m *MediaQuerySpec) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_MediaQuerySpec.Merge(m, src)
-}
-func (m *MediaQuerySpec) XXX_Size() int {
-	return xxx_messageInfo_MediaQuerySpec.Size(m)
+func (x *MediaQuerySpec) Reset() {
+	*x = MediaQuerySpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[10]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *MediaQuerySpec) XXX_DiscardUnknown() {
-	xxx_messageInfo_MediaQuerySpec.DiscardUnknown(m)
+
+func (x *MediaQuerySpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
 
-var xxx_messageInfo_MediaQuerySpec proto.InternalMessageInfo
+func (*MediaQuerySpec) ProtoMessage() {}
+
+func (x *MediaQuerySpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[10]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
 
-const Default_MediaQuerySpec_IssuesAsError bool = false
+// Deprecated: Use MediaQuerySpec.ProtoReflect.Descriptor instead.
+func (*MediaQuerySpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{10}
+}
 
-func (m *MediaQuerySpec) GetIssuesAsError() bool {
-	if m != nil && m.IssuesAsError != nil {
-		return *m.IssuesAsError
+func (x *MediaQuerySpec) GetIssuesAsError() bool {
+	if x != nil && x.IssuesAsError != nil {
+		return *x.IssuesAsError
 	}
 	return Default_MediaQuerySpec_IssuesAsError
 }
 
-func (m *MediaQuerySpec) GetType() []string {
-	if m != nil {
-		return m.Type
+func (x *MediaQuerySpec) GetType() []string {
+	if x != nil {
+		return x.Type
 	}
 	return nil
 }
 
-func (m *MediaQuerySpec) GetFeature() []string {
-	if m != nil {
-		return m.Feature
+func (x *MediaQuerySpec) GetFeature() []string {
+	if x != nil {
+		return x.Feature
 	}
 	return nil
 }
@@ -1777,60 +2107,68 @@ func (m *MediaQuerySpec) GetFeature() []string {
 // provided, the selector groups are unconstrained.
 // NEXT AVAILABLE TAG: 4
 type SelectorSpec struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// Allowed attribute selector names. For example `foo` in the selector
 	// `.a[foo=bar]`.
 	AttributeName []string `protobuf:"bytes,1,rep,name=attribute_name,json=attributeName" json:"attribute_name,omitempty"`
 	// Allowed pseudo class names. For example `checked` in `.a:checked`.
 	PseudoClass []string `protobuf:"bytes,2,rep,name=pseudo_class,json=pseudoClass" json:"pseudo_class,omitempty"`
 	// Allowed pseudo element names. For example `before` in `.a::before`.
-	PseudoElement        []string `protobuf:"bytes,3,rep,name=pseudo_element,json=pseudoElement" json:"pseudo_element,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	PseudoElement []string `protobuf:"bytes,3,rep,name=pseudo_element,json=pseudoElement" json:"pseudo_element,omitempty"`
 }
 
-func (m *SelectorSpec) Reset()         { *m = SelectorSpec{} }
-func (m *SelectorSpec) String() string { return proto.CompactTextString(m) }
-func (*SelectorSpec) ProtoMessage()    {}
-func (*SelectorSpec) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{11}
+func (x *SelectorSpec) Reset() {
+	*x = SelectorSpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[11]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
 
-func (m *SelectorSpec) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_SelectorSpec.Unmarshal(m, b)
-}
-func (m *SelectorSpec) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_SelectorSpec.Marshal(b, m, deterministic)
-}
-func (m *SelectorSpec) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_SelectorSpec.Merge(m, src)
+func (x *SelectorSpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *SelectorSpec) XXX_Size() int {
-	return xxx_messageInfo_SelectorSpec.Size(m)
-}
-func (m *SelectorSpec) XXX_DiscardUnknown() {
-	xxx_messageInfo_SelectorSpec.DiscardUnknown(m)
+
+func (*SelectorSpec) ProtoMessage() {}
+
+func (x *SelectorSpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[11]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_SelectorSpec proto.InternalMessageInfo
+// Deprecated: Use SelectorSpec.ProtoReflect.Descriptor instead.
+func (*SelectorSpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{11}
+}
 
-func (m *SelectorSpec) GetAttributeName() []string {
-	if m != nil {
-		return m.AttributeName
+func (x *SelectorSpec) GetAttributeName() []string {
+	if x != nil {
+		return x.AttributeName
 	}
 	return nil
 }
 
-func (m *SelectorSpec) GetPseudoClass() []string {
-	if m != nil {
-		return m.PseudoClass
+func (x *SelectorSpec) GetPseudoClass() []string {
+	if x != nil {
+		return x.PseudoClass
 	}
 	return nil
 }
 
-func (m *SelectorSpec) GetPseudoElement() []string {
-	if m != nil {
-		return m.PseudoElement
+func (x *SelectorSpec) GetPseudoElement() []string {
+	if x != nil {
+		return x.PseudoElement
 	}
 	return nil
 }
@@ -1840,59 +2178,71 @@ func (m *SelectorSpec) GetPseudoElement() []string {
 // validation rule.
 // NEXT AVAILABLE TAG: 4
 type AtRuleSpec struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// Name of the AT rule to parse. Do not include the '@' symbol (e.g. '@media'
 	// should be encoded as 'media'.
 	Name *string `protobuf:"bytes,1,opt,name=name" json:"name,omitempty"`
 	// A MediaQuerySpec may only be set for an AtRuleSpec with the name
 	// "media". If not set, media queries will be left unparsed, so no errors or
 	// warnings about them will be reported.
-	MediaQuerySpec       *MediaQuerySpec `protobuf:"bytes,3,opt,name=media_query_spec,json=mediaQuerySpec" json:"media_query_spec,omitempty"`
-	XXX_NoUnkeyedLiteral struct{}        `json:"-"`
-	XXX_unrecognized     []byte          `json:"-"`
-	XXX_sizecache        int32           `json:"-"`
+	MediaQuerySpec *MediaQuerySpec `protobuf:"bytes,3,opt,name=media_query_spec,json=mediaQuerySpec" json:"media_query_spec,omitempty"`
 }
 
-func (m *AtRuleSpec) Reset()         { *m = AtRuleSpec{} }
-func (m *AtRuleSpec) String() string { return proto.CompactTextString(m) }
-func (*AtRuleSpec) ProtoMessage()    {}
-func (*AtRuleSpec) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{12}
+func (x *AtRuleSpec) Reset() {
+	*x = AtRuleSpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[12]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
 
-func (m *AtRuleSpec) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_AtRuleSpec.Unmarshal(m, b)
-}
-func (m *AtRuleSpec) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_AtRuleSpec.Marshal(b, m, deterministic)
-}
-func (m *AtRuleSpec) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_AtRuleSpec.Merge(m, src)
-}
-func (m *AtRuleSpec) XXX_Size() int {
-	return xxx_messageInfo_AtRuleSpec.Size(m)
+func (x *AtRuleSpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *AtRuleSpec) XXX_DiscardUnknown() {
-	xxx_messageInfo_AtRuleSpec.DiscardUnknown(m)
+
+func (*AtRuleSpec) ProtoMessage() {}
+
+func (x *AtRuleSpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[12]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_AtRuleSpec proto.InternalMessageInfo
+// Deprecated: Use AtRuleSpec.ProtoReflect.Descriptor instead.
+func (*AtRuleSpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{12}
+}
 
-func (m *AtRuleSpec) GetName() string {
-	if m != nil && m.Name != nil {
-		return *m.Name
+func (x *AtRuleSpec) GetName() string {
+	if x != nil && x.Name != nil {
+		return *x.Name
 	}
 	return ""
 }
 
-func (m *AtRuleSpec) GetMediaQuerySpec() *MediaQuerySpec {
-	if m != nil {
-		return m.MediaQuerySpec
+func (x *AtRuleSpec) GetMediaQuerySpec() *MediaQuerySpec {
+	if x != nil {
+		return x.MediaQuerySpec
 	}
 	return nil
 }
 
 // NEXT AVAILABLE TAG: 10
 type CssSpec struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// Spec for how to parse CSS AT rules, one per AT rule. Must not contain
 	// duplicate names, and must contain at least one entry for the default.
 	AtRuleSpec []*AtRuleSpec `protobuf:"bytes,1,rep,name=at_rule_spec,json=atRuleSpec" json:"at_rule_spec,omitempty"`
@@ -1907,84 +2257,95 @@ type CssSpec struct {
 	// If fase, declarations tagged with `!important` are considered errors.
 	// Most AMP stylesheets disallow `!important` to reserve this override
 	// for AMP's own styles.
-	AllowImportant       *bool         `protobuf:"varint,8,opt,name=allow_important,json=allowImportant,def=0" json:"allow_important,omitempty"`
-	SelectorSpec         *SelectorSpec `protobuf:"bytes,9,opt,name=selector_spec,json=selectorSpec" json:"selector_spec,omitempty"`
-	XXX_NoUnkeyedLiteral struct{}      `json:"-"`
-	XXX_unrecognized     []byte        `json:"-"`
-	XXX_sizecache        int32         `json:"-"`
+	AllowImportant *bool         `protobuf:"varint,8,opt,name=allow_important,json=allowImportant,def=0" json:"allow_important,omitempty"`
+	SelectorSpec   *SelectorSpec `protobuf:"bytes,9,opt,name=selector_spec,json=selectorSpec" json:"selector_spec,omitempty"`
 }
 
-func (m *CssSpec) Reset()         { *m = CssSpec{} }
-func (m *CssSpec) String() string { return proto.CompactTextString(m) }
-func (*CssSpec) ProtoMessage()    {}
-func (*CssSpec) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{13}
-}
+// Default values for CssSpec fields.
+const (
+	Default_CssSpec_AllowImportant = bool(false)
+)
 
-func (m *CssSpec) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_CssSpec.Unmarshal(m, b)
-}
-func (m *CssSpec) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_CssSpec.Marshal(b, m, deterministic)
-}
-func (m *CssSpec) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_CssSpec.Merge(m, src)
-}
-func (m *CssSpec) XXX_Size() int {
-	return xxx_messageInfo_CssSpec.Size(m)
+func (x *CssSpec) Reset() {
+	*x = CssSpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[13]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *CssSpec) XXX_DiscardUnknown() {
-	xxx_messageInfo_CssSpec.DiscardUnknown(m)
+
+func (x *CssSpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
 
-var xxx_messageInfo_CssSpec proto.InternalMessageInfo
+func (*CssSpec) ProtoMessage() {}
+
+func (x *CssSpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[13]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
 
-const Default_CssSpec_AllowImportant bool = false
+// Deprecated: Use CssSpec.ProtoReflect.Descriptor instead.
+func (*CssSpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{13}
+}
 
-func (m *CssSpec) GetAtRuleSpec() []*AtRuleSpec {
-	if m != nil {
-		return m.AtRuleSpec
+func (x *CssSpec) GetAtRuleSpec() []*AtRuleSpec {
+	if x != nil {
+		return x.AtRuleSpec
 	}
 	return nil
 }
 
-func (m *CssSpec) GetValidateAmp4Ads() bool {
-	if m != nil && m.ValidateAmp4Ads != nil {
-		return *m.ValidateAmp4Ads
+func (x *CssSpec) GetValidateAmp4Ads() bool {
+	if x != nil && x.ValidateAmp4Ads != nil {
+		return *x.ValidateAmp4Ads
 	}
 	return false
 }
 
-func (m *CssSpec) GetValidateKeyframes() bool {
-	if m != nil && m.ValidateKeyframes != nil {
-		return *m.ValidateKeyframes
+func (x *CssSpec) GetValidateKeyframes() bool {
+	if x != nil && x.ValidateKeyframes != nil {
+		return *x.ValidateKeyframes
 	}
 	return false
 }
 
-func (m *CssSpec) GetDeclaration() []string {
-	if m != nil {
-		return m.Declaration
+func (x *CssSpec) GetDeclaration() []string {
+	if x != nil {
+		return x.Declaration
 	}
 	return nil
 }
 
-func (m *CssSpec) GetAllowImportant() bool {
-	if m != nil && m.AllowImportant != nil {
-		return *m.AllowImportant
+func (x *CssSpec) GetAllowImportant() bool {
+	if x != nil && x.AllowImportant != nil {
+		return *x.AllowImportant
 	}
 	return Default_CssSpec_AllowImportant
 }
 
-func (m *CssSpec) GetSelectorSpec() *SelectorSpec {
-	if m != nil {
-		return m.SelectorSpec
+func (x *CssSpec) GetSelectorSpec() *SelectorSpec {
+	if x != nil {
+		return x.SelectorSpec
 	}
 	return nil
 }
 
 // NEXT AVAILABLE TAG: 12
 type CdataSpec struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// If set, the cdata contents cannot be greater than this length, in bytes. A
 	// value of -2 (default) indicates that there is no limit (unlimited). A value
 	// of -1 will always cause validation failure on match. -1 is used to
@@ -2003,96 +2364,103 @@ type CdataSpec struct {
 	CssSpec *CssSpec `protobuf:"bytes,7,opt,name=css_spec,json=cssSpec" json:"css_spec,omitempty"`
 	// If set to true, then only whitespace may be in the cdata contents.
 	// This is useful for script tags that reference extensions etc.
-	WhitespaceOnly *bool `protobuf:"varint,8,opt,name=whitespace_only,json=whitespaceOnly" json:"whitespace_only,omitempty"`
+	WhitespaceOnly *bool `protobuf:"varint,8,opt,name=whitespace_only,json=whitespaceOnly" json:"whitespace_only,omitempty"` // } end oneof
 	// If any of these regexes match, then this cdata spec does not validate.
 	DisallowedCdataRegex []*DisallowedCDataRegex `protobuf:"bytes,4,rep,name=disallowed_cdata_regex,json=disallowedCdataRegex" json:"disallowed_cdata_regex,omitempty"`
 	// If true, the contents of this tag's CDATA text will be counted against the
 	// document level DocCssSpec CSS lengths.
-	DocCssBytes          *bool    `protobuf:"varint,11,opt,name=doc_css_bytes,json=docCssBytes" json:"doc_css_bytes,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	DocCssBytes *bool `protobuf:"varint,11,opt,name=doc_css_bytes,json=docCssBytes" json:"doc_css_bytes,omitempty"`
 }
 
-func (m *CdataSpec) Reset()         { *m = CdataSpec{} }
-func (m *CdataSpec) String() string { return proto.CompactTextString(m) }
-func (*CdataSpec) ProtoMessage()    {}
-func (*CdataSpec) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{14}
-}
+// Default values for CdataSpec fields.
+const (
+	Default_CdataSpec_MaxBytes = int32(-2)
+)
 
-func (m *CdataSpec) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_CdataSpec.Unmarshal(m, b)
-}
-func (m *CdataSpec) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_CdataSpec.Marshal(b, m, deterministic)
-}
-func (m *CdataSpec) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_CdataSpec.Merge(m, src)
-}
-func (m *CdataSpec) XXX_Size() int {
-	return xxx_messageInfo_CdataSpec.Size(m)
+func (x *CdataSpec) Reset() {
+	*x = CdataSpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[14]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *CdataSpec) XXX_DiscardUnknown() {
-	xxx_messageInfo_CdataSpec.DiscardUnknown(m)
+
+func (x *CdataSpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
 
-var xxx_messageInfo_CdataSpec proto.InternalMessageInfo
+func (*CdataSpec) ProtoMessage() {}
 
-const Default_CdataSpec_MaxBytes int32 = -2
+func (x *CdataSpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[14]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use CdataSpec.ProtoReflect.Descriptor instead.
+func (*CdataSpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{14}
+}
 
-func (m *CdataSpec) GetMaxBytes() int32 {
-	if m != nil && m.MaxBytes != nil {
-		return *m.MaxBytes
+func (x *CdataSpec) GetMaxBytes() int32 {
+	if x != nil && x.MaxBytes != nil {
+		return *x.MaxBytes
 	}
 	return Default_CdataSpec_MaxBytes
 }
 
-func (m *CdataSpec) GetMaxBytesSpecUrl() string {
-	if m != nil && m.MaxBytesSpecUrl != nil {
-		return *m.MaxBytesSpecUrl
+func (x *CdataSpec) GetMaxBytesSpecUrl() string {
+	if x != nil && x.MaxBytesSpecUrl != nil {
+		return *x.MaxBytesSpecUrl
 	}
 	return ""
 }
 
-func (m *CdataSpec) GetMandatoryCdata() string {
-	if m != nil && m.MandatoryCdata != nil {
-		return *m.MandatoryCdata
+func (x *CdataSpec) GetMandatoryCdata() string {
+	if x != nil && x.MandatoryCdata != nil {
+		return *x.MandatoryCdata
 	}
 	return ""
 }
 
-func (m *CdataSpec) GetCdataRegex() string {
-	if m != nil && m.CdataRegex != nil {
-		return *m.CdataRegex
+func (x *CdataSpec) GetCdataRegex() string {
+	if x != nil && x.CdataRegex != nil {
+		return *x.CdataRegex
 	}
 	return ""
 }
 
-func (m *CdataSpec) GetCssSpec() *CssSpec {
-	if m != nil {
-		return m.CssSpec
+func (x *CdataSpec) GetCssSpec() *CssSpec {
+	if x != nil {
+		return x.CssSpec
 	}
 	return nil
 }
 
-func (m *CdataSpec) GetWhitespaceOnly() bool {
-	if m != nil && m.WhitespaceOnly != nil {
-		return *m.WhitespaceOnly
+func (x *CdataSpec) GetWhitespaceOnly() bool {
+	if x != nil && x.WhitespaceOnly != nil {
+		return *x.WhitespaceOnly
 	}
 	return false
 }
 
-func (m *CdataSpec) GetDisallowedCdataRegex() []*DisallowedCDataRegex {
-	if m != nil {
-		return m.DisallowedCdataRegex
+func (x *CdataSpec) GetDisallowedCdataRegex() []*DisallowedCDataRegex {
+	if x != nil {
+		return x.DisallowedCdataRegex
 	}
 	return nil
 }
 
-func (m *CdataSpec) GetDocCssBytes() bool {
-	if m != nil && m.DocCssBytes != nil {
-		return *m.DocCssBytes
+func (x *CdataSpec) GetDocCssBytes() bool {
+	if x != nil && x.DocCssBytes != nil {
+		return *x.DocCssBytes
 	}
 	return false
 }
@@ -2100,7 +2468,7 @@ func (m *CdataSpec) GetDocCssBytes() bool {
 // Specifies which AMP Layouts are supported by a given element.
 // For the purpose of the validator, this specifies which
 // values for layout, height, and width attributes are allowed. Also see
-// https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md
+// https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md
 // TODO(johannes): Make the error messages around layouts better. This
 // may require revamping the documentation for elements and/or the above spec,
 // so that a user gets more clearly informed about which layouts are
@@ -2108,60 +2476,68 @@ func (m *CdataSpec) GetDocCssBytes() bool {
 // attributes are not set, etc.
 // NEXT AVAILABLE TAG: 4
 type AmpLayout struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// Specifies which layouts are supported by this element.
 	SupportedLayouts []AmpLayout_Layout `protobuf:"varint,1,rep,name=supported_layouts,json=supportedLayouts,enum=amp.validator.AmpLayout_Layout" json:"supported_layouts,omitempty"`
 	// Specifies whether this element has default dimensions. This corresponds
 	// to being allowlisted in naturalDimensions_ in
-	// https://github.com/ampproject/amphtml/blob/master/src/layout.js.
-	DefinesDefaultWidth  *bool    `protobuf:"varint,2,opt,name=defines_default_width,json=definesDefaultWidth" json:"defines_default_width,omitempty"`
-	DefinesDefaultHeight *bool    `protobuf:"varint,3,opt,name=defines_default_height,json=definesDefaultHeight" json:"defines_default_height,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	// https://github.com/ampproject/amphtml/blob/main/src/layout.js.
+	DefinesDefaultWidth  *bool `protobuf:"varint,2,opt,name=defines_default_width,json=definesDefaultWidth" json:"defines_default_width,omitempty"`
+	DefinesDefaultHeight *bool `protobuf:"varint,3,opt,name=defines_default_height,json=definesDefaultHeight" json:"defines_default_height,omitempty"`
 }
 
-func (m *AmpLayout) Reset()         { *m = AmpLayout{} }
-func (m *AmpLayout) String() string { return proto.CompactTextString(m) }
-func (*AmpLayout) ProtoMessage()    {}
-func (*AmpLayout) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{15}
+func (x *AmpLayout) Reset() {
+	*x = AmpLayout{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[15]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
 
-func (m *AmpLayout) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_AmpLayout.Unmarshal(m, b)
-}
-func (m *AmpLayout) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_AmpLayout.Marshal(b, m, deterministic)
-}
-func (m *AmpLayout) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_AmpLayout.Merge(m, src)
+func (x *AmpLayout) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *AmpLayout) XXX_Size() int {
-	return xxx_messageInfo_AmpLayout.Size(m)
-}
-func (m *AmpLayout) XXX_DiscardUnknown() {
-	xxx_messageInfo_AmpLayout.DiscardUnknown(m)
+
+func (*AmpLayout) ProtoMessage() {}
+
+func (x *AmpLayout) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[15]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_AmpLayout proto.InternalMessageInfo
+// Deprecated: Use AmpLayout.ProtoReflect.Descriptor instead.
+func (*AmpLayout) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{15}
+}
 
-func (m *AmpLayout) GetSupportedLayouts() []AmpLayout_Layout {
-	if m != nil {
-		return m.SupportedLayouts
+func (x *AmpLayout) GetSupportedLayouts() []AmpLayout_Layout {
+	if x != nil {
+		return x.SupportedLayouts
 	}
 	return nil
 }
 
-func (m *AmpLayout) GetDefinesDefaultWidth() bool {
-	if m != nil && m.DefinesDefaultWidth != nil {
-		return *m.DefinesDefaultWidth
+func (x *AmpLayout) GetDefinesDefaultWidth() bool {
+	if x != nil && x.DefinesDefaultWidth != nil {
+		return *x.DefinesDefaultWidth
 	}
 	return false
 }
 
-func (m *AmpLayout) GetDefinesDefaultHeight() bool {
-	if m != nil && m.DefinesDefaultHeight != nil {
-		return *m.DefinesDefaultHeight
+func (x *AmpLayout) GetDefinesDefaultHeight() bool {
+	if x != nil && x.DefinesDefaultHeight != nil {
+		return *x.DefinesDefaultHeight
 	}
 	return false
 }
@@ -2172,40 +2548,48 @@ func (m *AmpLayout) GetDefinesDefaultHeight() bool {
 // triggered by the presence of a specific AncestorMarker on the stack.
 // NEXT AVAILABLE TAG: 2
 type AncestorMarker struct {
-	Marker               []AncestorMarker_Marker `protobuf:"varint,1,rep,name=marker,enum=amp.validator.AncestorMarker_Marker" json:"marker,omitempty"`
-	XXX_NoUnkeyedLiteral struct{}                `json:"-"`
-	XXX_unrecognized     []byte                  `json:"-"`
-	XXX_sizecache        int32                   `json:"-"`
-}
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
 
-func (m *AncestorMarker) Reset()         { *m = AncestorMarker{} }
-func (m *AncestorMarker) String() string { return proto.CompactTextString(m) }
-func (*AncestorMarker) ProtoMessage()    {}
-func (*AncestorMarker) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{16}
+	Marker []AncestorMarker_Marker `protobuf:"varint,1,rep,name=marker,enum=amp.validator.AncestorMarker_Marker" json:"marker,omitempty"`
 }
 
-func (m *AncestorMarker) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_AncestorMarker.Unmarshal(m, b)
-}
-func (m *AncestorMarker) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_AncestorMarker.Marshal(b, m, deterministic)
-}
-func (m *AncestorMarker) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_AncestorMarker.Merge(m, src)
+func (x *AncestorMarker) Reset() {
+	*x = AncestorMarker{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[16]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *AncestorMarker) XXX_Size() int {
-	return xxx_messageInfo_AncestorMarker.Size(m)
+
+func (x *AncestorMarker) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *AncestorMarker) XXX_DiscardUnknown() {
-	xxx_messageInfo_AncestorMarker.DiscardUnknown(m)
+
+func (*AncestorMarker) ProtoMessage() {}
+
+func (x *AncestorMarker) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[16]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_AncestorMarker proto.InternalMessageInfo
+// Deprecated: Use AncestorMarker.ProtoReflect.Descriptor instead.
+func (*AncestorMarker) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{16}
+}
 
-func (m *AncestorMarker) GetMarker() []AncestorMarker_Marker {
-	if m != nil {
-		return m.Marker
+func (x *AncestorMarker) GetMarker() []AncestorMarker_Marker {
+	if x != nil {
+		return x.Marker
 	}
 	return nil
 }
@@ -2222,6 +2606,10 @@ func (m *AncestorMarker) GetMarker() []AncestorMarker_Marker {
 // reasonable error regardless if a child tag was misplaced.
 // NEXT AVAILABLE TAG: 5
 type ChildTagSpec struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// Unless set to -1 (the default), the parent tag must have exactly
 	// |mandatory_num_child_tags| immediate child tags.
 	MandatoryNumChildTags *int32 `protobuf:"varint,1,opt,name=mandatory_num_child_tags,json=mandatoryNumChildTags,def=-1" json:"mandatory_num_child_tags,omitempty"`
@@ -2233,64 +2621,71 @@ type ChildTagSpec struct {
 	ChildTagNameOneof []string `protobuf:"bytes,3,rep,name=child_tag_name_oneof,json=childTagNameOneof" json:"child_tag_name_oneof,omitempty"`
 	// Unless set to -1 (the default), the parent tag must have a minimum of
 	// |mandatory_min_num_child_tags| immediate child tags.
-	MandatoryMinNumChildTags *int32   `protobuf:"varint,4,opt,name=mandatory_min_num_child_tags,json=mandatoryMinNumChildTags,def=-1" json:"mandatory_min_num_child_tags,omitempty"`
-	XXX_NoUnkeyedLiteral     struct{} `json:"-"`
-	XXX_unrecognized         []byte   `json:"-"`
-	XXX_sizecache            int32    `json:"-"`
+	MandatoryMinNumChildTags *int32 `protobuf:"varint,4,opt,name=mandatory_min_num_child_tags,json=mandatoryMinNumChildTags,def=-1" json:"mandatory_min_num_child_tags,omitempty"`
 }
 
-func (m *ChildTagSpec) Reset()         { *m = ChildTagSpec{} }
-func (m *ChildTagSpec) String() string { return proto.CompactTextString(m) }
-func (*ChildTagSpec) ProtoMessage()    {}
-func (*ChildTagSpec) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{17}
-}
+// Default values for ChildTagSpec fields.
+const (
+	Default_ChildTagSpec_MandatoryNumChildTags    = int32(-1)
+	Default_ChildTagSpec_MandatoryMinNumChildTags = int32(-1)
+)
 
-func (m *ChildTagSpec) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_ChildTagSpec.Unmarshal(m, b)
-}
-func (m *ChildTagSpec) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_ChildTagSpec.Marshal(b, m, deterministic)
-}
-func (m *ChildTagSpec) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_ChildTagSpec.Merge(m, src)
-}
-func (m *ChildTagSpec) XXX_Size() int {
-	return xxx_messageInfo_ChildTagSpec.Size(m)
+func (x *ChildTagSpec) Reset() {
+	*x = ChildTagSpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[17]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *ChildTagSpec) XXX_DiscardUnknown() {
-	xxx_messageInfo_ChildTagSpec.DiscardUnknown(m)
+
+func (x *ChildTagSpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
 
-var xxx_messageInfo_ChildTagSpec proto.InternalMessageInfo
+func (*ChildTagSpec) ProtoMessage() {}
+
+func (x *ChildTagSpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[17]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
 
-const Default_ChildTagSpec_MandatoryNumChildTags int32 = -1
-const Default_ChildTagSpec_MandatoryMinNumChildTags int32 = -1
+// Deprecated: Use ChildTagSpec.ProtoReflect.Descriptor instead.
+func (*ChildTagSpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{17}
+}
 
-func (m *ChildTagSpec) GetMandatoryNumChildTags() int32 {
-	if m != nil && m.MandatoryNumChildTags != nil {
-		return *m.MandatoryNumChildTags
+func (x *ChildTagSpec) GetMandatoryNumChildTags() int32 {
+	if x != nil && x.MandatoryNumChildTags != nil {
+		return *x.MandatoryNumChildTags
 	}
 	return Default_ChildTagSpec_MandatoryNumChildTags
 }
 
-func (m *ChildTagSpec) GetFirstChildTagNameOneof() []string {
-	if m != nil {
-		return m.FirstChildTagNameOneof
+func (x *ChildTagSpec) GetFirstChildTagNameOneof() []string {
+	if x != nil {
+		return x.FirstChildTagNameOneof
 	}
 	return nil
 }
 
-func (m *ChildTagSpec) GetChildTagNameOneof() []string {
-	if m != nil {
-		return m.ChildTagNameOneof
+func (x *ChildTagSpec) GetChildTagNameOneof() []string {
+	if x != nil {
+		return x.ChildTagNameOneof
 	}
 	return nil
 }
 
-func (m *ChildTagSpec) GetMandatoryMinNumChildTags() int32 {
-	if m != nil && m.MandatoryMinNumChildTags != nil {
-		return *m.MandatoryMinNumChildTags
+func (x *ChildTagSpec) GetMandatoryMinNumChildTags() int32 {
+	if x != nil && x.MandatoryMinNumChildTags != nil {
+		return *x.MandatoryMinNumChildTags
 	}
 	return Default_ChildTagSpec_MandatoryMinNumChildTags
 }
@@ -2318,6 +2713,10 @@ func (m *ChildTagSpec) GetMandatoryMinNumChildTags() int32 {
 // the amp-live-list specification for an example.
 // NEXT AVAILABLE TAG: 4
 type ReferencePoint struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// A tag spec identified by its TagSpec::spec_name which specifies how
 	// a specific functionality for the parent tag is assigned.
 	TagSpecName *string `protobuf:"bytes,1,opt,name=tag_spec_name,json=tagSpecName" json:"tag_spec_name,omitempty"`
@@ -2326,68 +2725,81 @@ type ReferencePoint struct {
 	Mandatory *bool `protobuf:"varint,2,opt,name=mandatory" json:"mandatory,omitempty"`
 	// At most one of the child tags of the parent defining this
 	// reference point must match it.
-	Unique               *bool    `protobuf:"varint,3,opt,name=unique" json:"unique,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	Unique *bool `protobuf:"varint,3,opt,name=unique" json:"unique,omitempty"`
 }
 
-func (m *ReferencePoint) Reset()         { *m = ReferencePoint{} }
-func (m *ReferencePoint) String() string { return proto.CompactTextString(m) }
-func (*ReferencePoint) ProtoMessage()    {}
-func (*ReferencePoint) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{18}
+func (x *ReferencePoint) Reset() {
+	*x = ReferencePoint{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[18]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
 
-func (m *ReferencePoint) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_ReferencePoint.Unmarshal(m, b)
-}
-func (m *ReferencePoint) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_ReferencePoint.Marshal(b, m, deterministic)
-}
-func (m *ReferencePoint) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_ReferencePoint.Merge(m, src)
+func (x *ReferencePoint) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *ReferencePoint) XXX_Size() int {
-	return xxx_messageInfo_ReferencePoint.Size(m)
-}
-func (m *ReferencePoint) XXX_DiscardUnknown() {
-	xxx_messageInfo_ReferencePoint.DiscardUnknown(m)
+
+func (*ReferencePoint) ProtoMessage() {}
+
+func (x *ReferencePoint) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[18]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_ReferencePoint proto.InternalMessageInfo
+// Deprecated: Use ReferencePoint.ProtoReflect.Descriptor instead.
+func (*ReferencePoint) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{18}
+}
 
-func (m *ReferencePoint) GetTagSpecName() string {
-	if m != nil && m.TagSpecName != nil {
-		return *m.TagSpecName
+func (x *ReferencePoint) GetTagSpecName() string {
+	if x != nil && x.TagSpecName != nil {
+		return *x.TagSpecName
 	}
 	return ""
 }
 
-func (m *ReferencePoint) GetMandatory() bool {
-	if m != nil && m.Mandatory != nil {
-		return *m.Mandatory
+func (x *ReferencePoint) GetMandatory() bool {
+	if x != nil && x.Mandatory != nil {
+		return *x.Mandatory
 	}
 	return false
 }
 
-func (m *ReferencePoint) GetUnique() bool {
-	if m != nil && m.Unique != nil {
-		return *m.Unique
+func (x *ReferencePoint) GetUnique() bool {
+	if x != nil && x.Unique != nil {
+		return *x.Unique
 	}
 	return false
 }
 
 // Specs specific to AMP Extensions. This is a field within TagSpec that
 // replaces the standard tagspec list of attributes, requirements, etc.
-// NEXT AVAILABLE TAG: 9
+// NEXT AVAILABLE TAG: 10
 type ExtensionSpec struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// e.g. "amp-video". This is used both as the attribute value for the
 	// 'custom-element' attribute value as well as part of the 'src' attribute
 	// value.
 	Name *string `protobuf:"bytes,1,opt,name=name" json:"name,omitempty"`
 	// e.g. "0.1", "1.0", "latest".
 	Version []string `protobuf:"bytes,2,rep,name=version" json:"version,omitempty"`
+	// If multiple TagSpecs for the same extension exist, separated by version,
+	// specify a version_name string to disambiguate their spec_names. For
+	// example, "v1.0" or "v0.1-0.2". This string will become part of the name
+	// used for referring to this extension in validator error messages.
+	VersionName *string `protobuf:"bytes,9,opt,name=version_name,json=versionName" json:"version_name,omitempty"`
 	// deprecated_version must be a strict subset of version. If the version
 	// matches a deprecated_version, validation will emit a warning.
 	DeprecatedVersion []string                     `protobuf:"bytes,3,rep,name=deprecated_version,json=deprecatedVersion" json:"deprecated_version,omitempty"`
@@ -2396,78 +2808,92 @@ type ExtensionSpec struct {
 	// once, so those tags are exempted from the multiple inclusion ban.
 	DeprecatedAllowDuplicates *bool                                    `protobuf:"varint,6,opt,name=deprecated_allow_duplicates,json=deprecatedAllowDuplicates,def=0" json:"deprecated_allow_duplicates,omitempty"`
 	RequiresUsage             *ExtensionSpec_ExtensionUsageRequirement `protobuf:"varint,7,opt,name=requires_usage,json=requiresUsage,enum=amp.validator.ExtensionSpec_ExtensionUsageRequirement,def=1" json:"requires_usage,omitempty"`
-	XXX_NoUnkeyedLiteral      struct{}                                 `json:"-"`
-	XXX_unrecognized          []byte                                   `json:"-"`
-	XXX_sizecache             int32                                    `json:"-"`
 }
 
-func (m *ExtensionSpec) Reset()         { *m = ExtensionSpec{} }
-func (m *ExtensionSpec) String() string { return proto.CompactTextString(m) }
-func (*ExtensionSpec) ProtoMessage()    {}
-func (*ExtensionSpec) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{19}
-}
+// Default values for ExtensionSpec fields.
+const (
+	Default_ExtensionSpec_ExtensionType             = ExtensionSpec_CUSTOM_ELEMENT
+	Default_ExtensionSpec_DeprecatedAllowDuplicates = bool(false)
+	Default_ExtensionSpec_RequiresUsage             = ExtensionSpec_ERROR
+)
 
-func (m *ExtensionSpec) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_ExtensionSpec.Unmarshal(m, b)
-}
-func (m *ExtensionSpec) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_ExtensionSpec.Marshal(b, m, deterministic)
-}
-func (m *ExtensionSpec) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_ExtensionSpec.Merge(m, src)
-}
-func (m *ExtensionSpec) XXX_Size() int {
-	return xxx_messageInfo_ExtensionSpec.Size(m)
+func (x *ExtensionSpec) Reset() {
+	*x = ExtensionSpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[19]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *ExtensionSpec) XXX_DiscardUnknown() {
-	xxx_messageInfo_ExtensionSpec.DiscardUnknown(m)
+
+func (x *ExtensionSpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
 
-var xxx_messageInfo_ExtensionSpec proto.InternalMessageInfo
+func (*ExtensionSpec) ProtoMessage() {}
+
+func (x *ExtensionSpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[19]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
 
-const Default_ExtensionSpec_ExtensionType ExtensionSpec_ExtensionType = ExtensionSpec_CUSTOM_ELEMENT
-const Default_ExtensionSpec_DeprecatedAllowDuplicates bool = false
-const Default_ExtensionSpec_RequiresUsage ExtensionSpec_ExtensionUsageRequirement = ExtensionSpec_ERROR
+// Deprecated: Use ExtensionSpec.ProtoReflect.Descriptor instead.
+func (*ExtensionSpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{19}
+}
 
-func (m *ExtensionSpec) GetName() string {
-	if m != nil && m.Name != nil {
-		return *m.Name
+func (x *ExtensionSpec) GetName() string {
+	if x != nil && x.Name != nil {
+		return *x.Name
 	}
 	return ""
 }
 
-func (m *ExtensionSpec) GetVersion() []string {
-	if m != nil {
-		return m.Version
+func (x *ExtensionSpec) GetVersion() []string {
+	if x != nil {
+		return x.Version
 	}
 	return nil
 }
 
-func (m *ExtensionSpec) GetDeprecatedVersion() []string {
-	if m != nil {
-		return m.DeprecatedVersion
+func (x *ExtensionSpec) GetVersionName() string {
+	if x != nil && x.VersionName != nil {
+		return *x.VersionName
+	}
+	return ""
+}
+
+func (x *ExtensionSpec) GetDeprecatedVersion() []string {
+	if x != nil {
+		return x.DeprecatedVersion
 	}
 	return nil
 }
 
-func (m *ExtensionSpec) GetExtensionType() ExtensionSpec_ExtensionType {
-	if m != nil && m.ExtensionType != nil {
-		return *m.ExtensionType
+func (x *ExtensionSpec) GetExtensionType() ExtensionSpec_ExtensionType {
+	if x != nil && x.ExtensionType != nil {
+		return *x.ExtensionType
 	}
 	return Default_ExtensionSpec_ExtensionType
 }
 
-func (m *ExtensionSpec) GetDeprecatedAllowDuplicates() bool {
-	if m != nil && m.DeprecatedAllowDuplicates != nil {
-		return *m.DeprecatedAllowDuplicates
+func (x *ExtensionSpec) GetDeprecatedAllowDuplicates() bool {
+	if x != nil && x.DeprecatedAllowDuplicates != nil {
+		return *x.DeprecatedAllowDuplicates
 	}
 	return Default_ExtensionSpec_DeprecatedAllowDuplicates
 }
 
-func (m *ExtensionSpec) GetRequiresUsage() ExtensionSpec_ExtensionUsageRequirement {
-	if m != nil && m.RequiresUsage != nil {
-		return *m.RequiresUsage
+func (x *ExtensionSpec) GetRequiresUsage() ExtensionSpec_ExtensionUsageRequirement {
+	if x != nil && x.RequiresUsage != nil {
+		return *x.RequiresUsage
 	}
 	return Default_ExtensionSpec_RequiresUsage
 }
@@ -2477,42 +2903,53 @@ func (m *ExtensionSpec) GetRequiresUsage() ExtensionSpec_ExtensionUsageRequireme
 // with Request.HtmlFormat in
 // github.com/ampproject/amppackager/transformer/request/request.proto.
 type HtmlFormat struct {
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
 }
 
-func (m *HtmlFormat) Reset()         { *m = HtmlFormat{} }
-func (m *HtmlFormat) String() string { return proto.CompactTextString(m) }
-func (*HtmlFormat) ProtoMessage()    {}
-func (*HtmlFormat) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{20}
+func (x *HtmlFormat) Reset() {
+	*x = HtmlFormat{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[20]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
 
-func (m *HtmlFormat) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_HtmlFormat.Unmarshal(m, b)
-}
-func (m *HtmlFormat) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_HtmlFormat.Marshal(b, m, deterministic)
-}
-func (m *HtmlFormat) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_HtmlFormat.Merge(m, src)
-}
-func (m *HtmlFormat) XXX_Size() int {
-	return xxx_messageInfo_HtmlFormat.Size(m)
+func (x *HtmlFormat) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *HtmlFormat) XXX_DiscardUnknown() {
-	xxx_messageInfo_HtmlFormat.DiscardUnknown(m)
+
+func (*HtmlFormat) ProtoMessage() {}
+
+func (x *HtmlFormat) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[20]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_HtmlFormat proto.InternalMessageInfo
+// Deprecated: Use HtmlFormat.ProtoReflect.Descriptor instead.
+func (*HtmlFormat) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{20}
+}
 
 // Tags that are not covered by at least one of these specs are disallowed.
 // Some tags are mandatory. Note that the tag name is not unique, that is,
 // there can be multiple tag specs covering the same name, e.g., for
 // multiple meta tags (with different attributes).
-// NEXT AVAILABLE TAG: 39
+// NEXT AVAILABLE TAG: 40
 type TagSpec struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// The html_format field tells the validator for which html formats
 	// (ie: (<html ⚡> vs <html a4⚡>) this HTML TagSpec is allowed to validate.
 	// The repeated field is not allowed to be empty, it must have at least one
@@ -2534,11 +2971,18 @@ type TagSpec struct {
 	//       tag_name.
 	TagName *string `protobuf:"bytes,1,opt,name=tag_name,json=tagName" json:"tag_name,omitempty"`
 	// If provided, the spec_name must be unique within the validator
-	// rules. It will be used with preference over the tag_name in
-	// parameters for error messages and other usages that require or
-	// benefit from a unique identifier.
-	SpecName *string          `protobuf:"bytes,2,opt,name=spec_name,json=specName" json:"spec_name,omitempty"`
-	NamedId  *TagSpec_NamedId `protobuf:"varint,33,opt,name=named_id,json=namedId,enum=amp.validator.TagSpec_NamedId,def=0" json:"named_id,omitempty"`
+	// rules. This string forms a a unique id for this TagSpec. If not set, the
+	// tag_name field is used as the unique id. This string is not used in error
+	// messages, see descriptive_name for that.
+	SpecName *string `protobuf:"bytes,2,opt,name=spec_name,json=specName" json:"spec_name,omitempty"`
+	// If `tag_name` is not a sufficient descriptor for error messages having to
+	// do with this tag spec, provide a `descriptive_name` value, which if present
+	// will be used in place of `tag_name`. Typically `descriptive_name` should
+	// include the tag_name in it, and should avoid using < and > in case
+	// downstream libraries of the validator fail to properly HTML escape rendered
+	// error strings.
+	DescriptiveName *string          `protobuf:"bytes,39,opt,name=descriptive_name,json=descriptiveName" json:"descriptive_name,omitempty"`
+	NamedId         *TagSpec_NamedId `protobuf:"varint,33,opt,name=named_id,json=namedId,enum=amp.validator.TagSpec_NamedId,def=0" json:"named_id,omitempty"`
 	// If provided, this is a SCRIPT tag defining an amp custom element
 	// extension. The other fields, such as expected attributes, will be
 	// validated by the extension spec rules.
@@ -2630,291 +3074,408 @@ type TagSpec struct {
 	// If set, specifies which AMP Layouts are supported by this element.
 	AmpLayout *AmpLayout `protobuf:"bytes,11,opt,name=amp_layout,json=ampLayout" json:"amp_layout,omitempty"`
 	// If set, triggers related validation rules for descendants of this tag.
-	MarkDescendants      *AncestorMarker `protobuf:"bytes,38,opt,name=mark_descendants,json=markDescendants" json:"mark_descendants,omitempty"`
-	XXX_NoUnkeyedLiteral struct{}        `json:"-"`
-	XXX_unrecognized     []byte          `json:"-"`
-	XXX_sizecache        int32           `json:"-"`
+	MarkDescendants *AncestorMarker `protobuf:"bytes,38,opt,name=mark_descendants,json=markDescendants" json:"mark_descendants,omitempty"`
 }
 
-func (m *TagSpec) Reset()         { *m = TagSpec{} }
-func (m *TagSpec) String() string { return proto.CompactTextString(m) }
-func (*TagSpec) ProtoMessage()    {}
-func (*TagSpec) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{21}
-}
+// Default values for TagSpec fields.
+const (
+	Default_TagSpec_NamedId            = TagSpec_NOT_SET
+	Default_TagSpec_ExplicitAttrsOnly  = bool(false)
+	Default_TagSpec_SiblingsDisallowed = bool(false)
+	Default_TagSpec_MandatoryLastChild = bool(false)
+)
 
-func (m *TagSpec) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_TagSpec.Unmarshal(m, b)
-}
-func (m *TagSpec) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_TagSpec.Marshal(b, m, deterministic)
-}
-func (m *TagSpec) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_TagSpec.Merge(m, src)
-}
-func (m *TagSpec) XXX_Size() int {
-	return xxx_messageInfo_TagSpec.Size(m)
+func (x *TagSpec) Reset() {
+	*x = TagSpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[21]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *TagSpec) XXX_DiscardUnknown() {
-	xxx_messageInfo_TagSpec.DiscardUnknown(m)
+
+func (x *TagSpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
 
-var xxx_messageInfo_TagSpec proto.InternalMessageInfo
+func (*TagSpec) ProtoMessage() {}
+
+func (x *TagSpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[21]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
 
-const Default_TagSpec_NamedId TagSpec_NamedId = TagSpec_NOT_SET
-const Default_TagSpec_ExplicitAttrsOnly bool = false
-const Default_TagSpec_SiblingsDisallowed bool = false
-const Default_TagSpec_MandatoryLastChild bool = false
+// Deprecated: Use TagSpec.ProtoReflect.Descriptor instead.
+func (*TagSpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{21}
+}
 
-func (m *TagSpec) GetHtmlFormat() []HtmlFormat_Code {
-	if m != nil {
-		return m.HtmlFormat
+func (x *TagSpec) GetHtmlFormat() []HtmlFormat_Code {
+	if x != nil {
+		return x.HtmlFormat
 	}
 	return nil
 }
 
-func (m *TagSpec) GetEnabledBy() []string {
-	if m != nil {
-		return m.EnabledBy
+func (x *TagSpec) GetEnabledBy() []string {
+	if x != nil {
+		return x.EnabledBy
 	}
 	return nil
 }
 
-func (m *TagSpec) GetDisabledBy() []string {
-	if m != nil {
-		return m.DisabledBy
+func (x *TagSpec) GetDisabledBy() []string {
+	if x != nil {
+		return x.DisabledBy
 	}
 	return nil
 }
 
-func (m *TagSpec) GetTagName() string {
-	if m != nil && m.TagName != nil {
-		return *m.TagName
+func (x *TagSpec) GetTagName() string {
+	if x != nil && x.TagName != nil {
+		return *x.TagName
 	}
 	return ""
 }
 
-func (m *TagSpec) GetSpecName() string {
-	if m != nil && m.SpecName != nil {
-		return *m.SpecName
+func (x *TagSpec) GetSpecName() string {
+	if x != nil && x.SpecName != nil {
+		return *x.SpecName
 	}
 	return ""
 }
 
-func (m *TagSpec) GetNamedId() TagSpec_NamedId {
-	if m != nil && m.NamedId != nil {
-		return *m.NamedId
+func (x *TagSpec) GetDescriptiveName() string {
+	if x != nil && x.DescriptiveName != nil {
+		return *x.DescriptiveName
+	}
+	return ""
+}
+
+func (x *TagSpec) GetNamedId() TagSpec_NamedId {
+	if x != nil && x.NamedId != nil {
+		return *x.NamedId
 	}
 	return Default_TagSpec_NamedId
 }
 
-func (m *TagSpec) GetExtensionSpec() *ExtensionSpec {
-	if m != nil {
-		return m.ExtensionSpec
+func (x *TagSpec) GetExtensionSpec() *ExtensionSpec {
+	if x != nil {
+		return x.ExtensionSpec
 	}
 	return nil
 }
 
-func (m *TagSpec) GetRequiresExtension() []string {
-	if m != nil {
-		return m.RequiresExtension
+func (x *TagSpec) GetRequiresExtension() []string {
+	if x != nil {
+		return x.RequiresExtension
 	}
 	return nil
 }
 
-func (m *TagSpec) GetMandatory() bool {
-	if m != nil && m.Mandatory != nil {
-		return *m.Mandatory
+func (x *TagSpec) GetMandatory() bool {
+	if x != nil && x.Mandatory != nil {
+		return *x.Mandatory
 	}
 	return false
 }
 
-func (m *TagSpec) GetMandatoryAlternatives() string {
-	if m != nil && m.MandatoryAlternatives != nil {
-		return *m.MandatoryAlternatives
+func (x *TagSpec) GetMandatoryAlternatives() string {
+	if x != nil && x.MandatoryAlternatives != nil {
+		return *x.MandatoryAlternatives
 	}
 	return ""
 }
 
-func (m *TagSpec) GetUnique() bool {
-	if m != nil && m.Unique != nil {
-		return *m.Unique
+func (x *TagSpec) GetUnique() bool {
+	if x != nil && x.Unique != nil {
+		return *x.Unique
 	}
 	return false
 }
 
-func (m *TagSpec) GetUniqueWarning() bool {
-	if m != nil && m.UniqueWarning != nil {
-		return *m.UniqueWarning
+func (x *TagSpec) GetUniqueWarning() bool {
+	if x != nil && x.UniqueWarning != nil {
+		return *x.UniqueWarning
 	}
 	return false
 }
 
-func (m *TagSpec) GetMandatoryParent() string {
-	if m != nil && m.MandatoryParent != nil {
-		return *m.MandatoryParent
+func (x *TagSpec) GetMandatoryParent() string {
+	if x != nil && x.MandatoryParent != nil {
+		return *x.MandatoryParent
 	}
 	return ""
 }
 
-func (m *TagSpec) GetMandatoryAncestor() string {
-	if m != nil && m.MandatoryAncestor != nil {
-		return *m.MandatoryAncestor
+func (x *TagSpec) GetMandatoryAncestor() string {
+	if x != nil && x.MandatoryAncestor != nil {
+		return *x.MandatoryAncestor
 	}
 	return ""
 }
 
-func (m *TagSpec) GetMandatoryAncestorSuggestedAlternative() string {
-	if m != nil && m.MandatoryAncestorSuggestedAlternative != nil {
-		return *m.MandatoryAncestorSuggestedAlternative
+func (x *TagSpec) GetMandatoryAncestorSuggestedAlternative() string {
+	if x != nil && x.MandatoryAncestorSuggestedAlternative != nil {
+		return *x.MandatoryAncestorSuggestedAlternative
 	}
 	return ""
 }
 
-func (m *TagSpec) GetDisallowedAncestor() []string {
-	if m != nil {
-		return m.DisallowedAncestor
+func (x *TagSpec) GetDisallowedAncestor() []string {
+	if x != nil {
+		return x.DisallowedAncestor
 	}
 	return nil
 }
 
-func (m *TagSpec) GetDescendantTagList() string {
-	if m != nil && m.DescendantTagList != nil {
-		return *m.DescendantTagList
+func (x *TagSpec) GetDescendantTagList() string {
+	if x != nil && x.DescendantTagList != nil {
+		return *x.DescendantTagList
 	}
 	return ""
 }
 
-func (m *TagSpec) GetAlsoRequiresTagWarning() []string {
-	if m != nil {
-		return m.AlsoRequiresTagWarning
+func (x *TagSpec) GetAlsoRequiresTagWarning() []string {
+	if x != nil {
+		return x.AlsoRequiresTagWarning
 	}
 	return nil
 }
 
-func (m *TagSpec) GetSatisfies() []string {
-	if m != nil {
-		return m.Satisfies
+func (x *TagSpec) GetSatisfies() []string {
+	if x != nil {
+		return x.Satisfies
 	}
 	return nil
 }
 
-func (m *TagSpec) GetRequires() []string {
-	if m != nil {
-		return m.Requires
+func (x *TagSpec) GetRequires() []string {
+	if x != nil {
+		return x.Requires
 	}
 	return nil
 }
 
-func (m *TagSpec) GetExcludes() []string {
-	if m != nil {
-		return m.Excludes
+func (x *TagSpec) GetExcludes() []string {
+	if x != nil {
+		return x.Excludes
 	}
 	return nil
 }
 
-func (m *TagSpec) GetDeprecation() string {
-	if m != nil && m.Deprecation != nil {
-		return *m.Deprecation
+func (x *TagSpec) GetDeprecation() string {
+	if x != nil && x.Deprecation != nil {
+		return *x.Deprecation
 	}
 	return ""
 }
 
-func (m *TagSpec) GetDeprecationUrl() string {
-	if m != nil && m.DeprecationUrl != nil {
-		return *m.DeprecationUrl
+func (x *TagSpec) GetDeprecationUrl() string {
+	if x != nil && x.DeprecationUrl != nil {
+		return *x.DeprecationUrl
 	}
 	return ""
 }
 
-func (m *TagSpec) GetExplicitAttrsOnly() bool {
-	if m != nil && m.ExplicitAttrsOnly != nil {
-		return *m.ExplicitAttrsOnly
+func (x *TagSpec) GetExplicitAttrsOnly() bool {
+	if x != nil && x.ExplicitAttrsOnly != nil {
+		return *x.ExplicitAttrsOnly
 	}
 	return Default_TagSpec_ExplicitAttrsOnly
 }
 
-func (m *TagSpec) GetAttrs() []*AttrSpec {
-	if m != nil {
-		return m.Attrs
+func (x *TagSpec) GetAttrs() []*AttrSpec {
+	if x != nil {
+		return x.Attrs
 	}
 	return nil
 }
 
-func (m *TagSpec) GetAttrLists() []string {
-	if m != nil {
-		return m.AttrLists
+func (x *TagSpec) GetAttrLists() []string {
+	if x != nil {
+		return x.AttrLists
 	}
 	return nil
 }
 
-func (m *TagSpec) GetCdata() *CdataSpec {
-	if m != nil {
-		return m.Cdata
+func (x *TagSpec) GetCdata() *CdataSpec {
+	if x != nil {
+		return x.Cdata
 	}
 	return nil
 }
 
-func (m *TagSpec) GetChildTags() *ChildTagSpec {
-	if m != nil {
-		return m.ChildTags
+func (x *TagSpec) GetChildTags() *ChildTagSpec {
+	if x != nil {
+		return x.ChildTags
 	}
 	return nil
 }
 
-func (m *TagSpec) GetSiblingsDisallowed() bool {
-	if m != nil && m.SiblingsDisallowed != nil {
-		return *m.SiblingsDisallowed
+func (x *TagSpec) GetSiblingsDisallowed() bool {
+	if x != nil && x.SiblingsDisallowed != nil {
+		return *x.SiblingsDisallowed
 	}
 	return Default_TagSpec_SiblingsDisallowed
 }
 
-func (m *TagSpec) GetMandatoryLastChild() bool {
-	if m != nil && m.MandatoryLastChild != nil {
-		return *m.MandatoryLastChild
+func (x *TagSpec) GetMandatoryLastChild() bool {
+	if x != nil && x.MandatoryLastChild != nil {
+		return *x.MandatoryLastChild
 	}
 	return Default_TagSpec_MandatoryLastChild
 }
 
-func (m *TagSpec) GetReferencePoints() []*ReferencePoint {
-	if m != nil {
-		return m.ReferencePoints
+func (x *TagSpec) GetReferencePoints() []*ReferencePoint {
+	if x != nil {
+		return x.ReferencePoints
 	}
 	return nil
 }
 
-func (m *TagSpec) GetSpecUrl() string {
-	if m != nil && m.SpecUrl != nil {
-		return *m.SpecUrl
+func (x *TagSpec) GetSpecUrl() string {
+	if x != nil && x.SpecUrl != nil {
+		return *x.SpecUrl
 	}
 	return ""
 }
 
-func (m *TagSpec) GetAmpLayout() *AmpLayout {
-	if m != nil {
-		return m.AmpLayout
+func (x *TagSpec) GetAmpLayout() *AmpLayout {
+	if x != nil {
+		return x.AmpLayout
+	}
+	return nil
+}
+
+func (x *TagSpec) GetMarkDescendants() *AncestorMarker {
+	if x != nil {
+		return x.MarkDescendants
+	}
+	return nil
+}
+
+// Exactly one DocSpec will match each AMP document. This spec defines some
+// default rules for the entire document scoped by it's HtmlFormat and any
+// Type Identifiers.
+// NEXT AVAILABLE TAG: 6
+type DocSpec struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
+	// The html_format field tells the validator for which html formats
+	// (ie: (<html ⚡> vs <html a4⚡>) this DocSpec is defined for.
+	HtmlFormat []HtmlFormat_Code `protobuf:"varint,1,rep,name=html_format,json=htmlFormat,enum=amp.validator.HtmlFormat_Code" json:"html_format,omitempty"`
+	// If a Type Identifier is in enabled_by then this DocSpec will be used
+	// in validating parsed documents with that Type Identifier. If a Type
+	// Identifier is in disabled_by then this DocSpec will not be used in
+	// validating parsed documents with that Type Identifier. An DocSpec can
+	// not have both enabled_by and disabled_by set.
+	EnabledBy  []string `protobuf:"bytes,2,rep,name=enabled_by,json=enabledBy" json:"enabled_by,omitempty"`
+	DisabledBy []string `protobuf:"bytes,3,rep,name=disabled_by,json=disabledBy" json:"disabled_by,omitempty"`
+	// If set, the entire document's content cannot be greater than this length,
+	// in bytes. A value of -2 (default) indicates that there is no limit
+	// (unlimited).
+	MaxBytes *int32 `protobuf:"varint,4,opt,name=max_bytes,json=maxBytes,def=-2" json:"max_bytes,omitempty"`
+	// If provided, a URL linking to a section / sentence in the AMP HTML spec.
+	MaxBytesSpecUrl *string `protobuf:"bytes,5,opt,name=max_bytes_spec_url,json=maxBytesSpecUrl" json:"max_bytes_spec_url,omitempty"`
+}
+
+// Default values for DocSpec fields.
+const (
+	Default_DocSpec_MaxBytes = int32(-2)
+)
+
+func (x *DocSpec) Reset() {
+	*x = DocSpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[22]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
+}
+
+func (x *DocSpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
+}
+
+func (*DocSpec) ProtoMessage() {}
+
+func (x *DocSpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[22]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use DocSpec.ProtoReflect.Descriptor instead.
+func (*DocSpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{22}
+}
+
+func (x *DocSpec) GetHtmlFormat() []HtmlFormat_Code {
+	if x != nil {
+		return x.HtmlFormat
+	}
+	return nil
+}
+
+func (x *DocSpec) GetEnabledBy() []string {
+	if x != nil {
+		return x.EnabledBy
 	}
 	return nil
 }
 
-func (m *TagSpec) GetMarkDescendants() *AncestorMarker {
-	if m != nil {
-		return m.MarkDescendants
+func (x *DocSpec) GetDisabledBy() []string {
+	if x != nil {
+		return x.DisabledBy
 	}
 	return nil
 }
 
+func (x *DocSpec) GetMaxBytes() int32 {
+	if x != nil && x.MaxBytes != nil {
+		return *x.MaxBytes
+	}
+	return Default_DocSpec_MaxBytes
+}
+
+func (x *DocSpec) GetMaxBytesSpecUrl() string {
+	if x != nil && x.MaxBytesSpecUrl != nil {
+		return *x.MaxBytesSpecUrl
+	}
+	return ""
+}
+
 // Exactly one DocCssSpec will match each AMP document. This spec defines the
 // default css rules for style attributes and publisher style tags across the
 // entire document. Rules for specific tags may be overridden by those tags.
 // NEXT AVAILABLE TAG: 20
 type DocCssSpec struct {
-	// The html_format field tells the val:idator for which html formats
-	// (ie: (<html ⚡> vs <html a4⚡>) this CssLengthSpec is defined for.
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
+	// The html_format field tells the validator for which html formats
+	// (ie: (<html ⚡> vs <html a4⚡>) this DocCssSpec is defined for.
 	HtmlFormat []HtmlFormat_Code `protobuf:"varint,1,rep,name=html_format,json=htmlFormat,enum=amp.validator.HtmlFormat_Code" json:"html_format,omitempty"`
 	// If a Type Identifier is in enabled_by then this DocCssSpec will be used
 	// in validating parsed documents with that Type Identifier. If a Type
-	// identifier is in disabled_by then this DocCssSpec will not be used in
+	// Identifier is in disabled_by then this DocCssSpec will not be used in
 	// validating parsed documents;: with that Type Identifier. An DocCssSpec can
 	// not have both enabled_by and disabled_by set.
 	EnabledBy  []string `protobuf:"bytes,2,rep,name=enabled_by,json=enabledBy" json:"enabled_by,omitempty"`
@@ -2941,11 +3502,9 @@ type DocCssSpec struct {
 	UrlBytesIncluded *bool `protobuf:"varint,7,opt,name=url_bytes_included,json=urlBytesIncluded,def=1" json:"url_bytes_included,omitempty"`
 	// If provided, a URL linking to a section / sentence in the AMP HTML spec.
 	MaxBytesSpecUrl *string `protobuf:"bytes,8,opt,name=max_bytes_spec_url,json=maxBytesSpecUrl" json:"max_bytes_spec_url,omitempty"`
-	// Declaration allow-lists were added when style attribute validation was
-	// implementented. Therefore older style tags do not enforce an allow list
-	// of declarations. If true, all declarations are allowed in style tags,
-	// regardless of the contents of the `declaration` list.
-	AllowAllDeclarationInStyleTag *bool `protobuf:"varint,10,opt,name=allow_all_declaration_in_style_tag,json=allowAllDeclarationInStyleTag,def=0" json:"allow_all_declaration_in_style_tag,omitempty"`
+	// If true, all declarations are allowed in style tags and inline style
+	// attributes, regardless of the contents of the `declaration` list.
+	AllowAllDeclarationInStyle *bool `protobuf:"varint,10,opt,name=allow_all_declaration_in_style,json=allowAllDeclarationInStyle,def=0" json:"allow_all_declaration_in_style,omitempty"`
 	// If true, all variants of declarations that are vendor prefixes are allowed.
 	// for example, if `gradient` is an allowed declaration and this is true, then
 	// `-webkit-gradient` is also an allowed declaration.
@@ -2966,174 +3525,185 @@ type DocCssSpec struct {
 	// If false, declarations tagged with `!important` are considered errors.
 	// Most AMP stylesheets disallow `!important` to reserve this override
 	// for AMP's own styles.
-	AllowImportant       *bool    `protobuf:"varint,17,opt,name=allow_important,json=allowImportant,def=0" json:"allow_important,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	AllowImportant *bool `protobuf:"varint,17,opt,name=allow_important,json=allowImportant,def=0" json:"allow_important,omitempty"`
 }
 
-func (m *DocCssSpec) Reset()         { *m = DocCssSpec{} }
-func (m *DocCssSpec) String() string { return proto.CompactTextString(m) }
-func (*DocCssSpec) ProtoMessage()    {}
-func (*DocCssSpec) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{22}
-}
+// Default values for DocCssSpec fields.
+const (
+	Default_DocCssSpec_MaxBytesIsWarning          = bool(false)
+	Default_DocCssSpec_MaxBytes                   = int32(-2)
+	Default_DocCssSpec_MaxBytesPerInlineStyle     = int32(-1)
+	Default_DocCssSpec_UrlBytesIncluded           = bool(true)
+	Default_DocCssSpec_AllowAllDeclarationInStyle = bool(false)
+	Default_DocCssSpec_AllowImportant             = bool(false)
+)
 
-func (m *DocCssSpec) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_DocCssSpec.Unmarshal(m, b)
-}
-func (m *DocCssSpec) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_DocCssSpec.Marshal(b, m, deterministic)
-}
-func (m *DocCssSpec) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_DocCssSpec.Merge(m, src)
-}
-func (m *DocCssSpec) XXX_Size() int {
-	return xxx_messageInfo_DocCssSpec.Size(m)
+func (x *DocCssSpec) Reset() {
+	*x = DocCssSpec{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[23]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *DocCssSpec) XXX_DiscardUnknown() {
-	xxx_messageInfo_DocCssSpec.DiscardUnknown(m)
+
+func (x *DocCssSpec) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
 
-var xxx_messageInfo_DocCssSpec proto.InternalMessageInfo
+func (*DocCssSpec) ProtoMessage() {}
+
+func (x *DocCssSpec) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[23]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
 
-const Default_DocCssSpec_MaxBytesIsWarning bool = false
-const Default_DocCssSpec_MaxBytes int32 = -2
-const Default_DocCssSpec_MaxBytesPerInlineStyle int32 = -1
-const Default_DocCssSpec_UrlBytesIncluded bool = true
-const Default_DocCssSpec_AllowAllDeclarationInStyleTag bool = false
-const Default_DocCssSpec_AllowImportant bool = false
+// Deprecated: Use DocCssSpec.ProtoReflect.Descriptor instead.
+func (*DocCssSpec) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{23}
+}
 
-func (m *DocCssSpec) GetHtmlFormat() []HtmlFormat_Code {
-	if m != nil {
-		return m.HtmlFormat
+func (x *DocCssSpec) GetHtmlFormat() []HtmlFormat_Code {
+	if x != nil {
+		return x.HtmlFormat
 	}
 	return nil
 }
 
-func (m *DocCssSpec) GetEnabledBy() []string {
-	if m != nil {
-		return m.EnabledBy
+func (x *DocCssSpec) GetEnabledBy() []string {
+	if x != nil {
+		return x.EnabledBy
 	}
 	return nil
 }
 
-func (m *DocCssSpec) GetDisabledBy() []string {
-	if m != nil {
-		return m.DisabledBy
+func (x *DocCssSpec) GetDisabledBy() []string {
+	if x != nil {
+		return x.DisabledBy
 	}
 	return nil
 }
 
-func (m *DocCssSpec) GetSpecUrl() string {
-	if m != nil && m.SpecUrl != nil {
-		return *m.SpecUrl
+func (x *DocCssSpec) GetSpecUrl() string {
+	if x != nil && x.SpecUrl != nil {
+		return *x.SpecUrl
 	}
 	return ""
 }
 
-func (m *DocCssSpec) GetMaxBytesIsWarning() bool {
-	if m != nil && m.MaxBytesIsWarning != nil {
-		return *m.MaxBytesIsWarning
+func (x *DocCssSpec) GetMaxBytesIsWarning() bool {
+	if x != nil && x.MaxBytesIsWarning != nil {
+		return *x.MaxBytesIsWarning
 	}
 	return Default_DocCssSpec_MaxBytesIsWarning
 }
 
-func (m *DocCssSpec) GetMaxBytes() int32 {
-	if m != nil && m.MaxBytes != nil {
-		return *m.MaxBytes
+func (x *DocCssSpec) GetMaxBytes() int32 {
+	if x != nil && x.MaxBytes != nil {
+		return *x.MaxBytes
 	}
 	return Default_DocCssSpec_MaxBytes
 }
 
-func (m *DocCssSpec) GetMaxBytesPerInlineStyle() int32 {
-	if m != nil && m.MaxBytesPerInlineStyle != nil {
-		return *m.MaxBytesPerInlineStyle
+func (x *DocCssSpec) GetMaxBytesPerInlineStyle() int32 {
+	if x != nil && x.MaxBytesPerInlineStyle != nil {
+		return *x.MaxBytesPerInlineStyle
 	}
 	return Default_DocCssSpec_MaxBytesPerInlineStyle
 }
 
-func (m *DocCssSpec) GetUrlBytesIncluded() bool {
-	if m != nil && m.UrlBytesIncluded != nil {
-		return *m.UrlBytesIncluded
+func (x *DocCssSpec) GetUrlBytesIncluded() bool {
+	if x != nil && x.UrlBytesIncluded != nil {
+		return *x.UrlBytesIncluded
 	}
 	return Default_DocCssSpec_UrlBytesIncluded
 }
 
-func (m *DocCssSpec) GetMaxBytesSpecUrl() string {
-	if m != nil && m.MaxBytesSpecUrl != nil {
-		return *m.MaxBytesSpecUrl
+func (x *DocCssSpec) GetMaxBytesSpecUrl() string {
+	if x != nil && x.MaxBytesSpecUrl != nil {
+		return *x.MaxBytesSpecUrl
 	}
 	return ""
 }
 
-func (m *DocCssSpec) GetAllowAllDeclarationInStyleTag() bool {
-	if m != nil && m.AllowAllDeclarationInStyleTag != nil {
-		return *m.AllowAllDeclarationInStyleTag
+func (x *DocCssSpec) GetAllowAllDeclarationInStyle() bool {
+	if x != nil && x.AllowAllDeclarationInStyle != nil {
+		return *x.AllowAllDeclarationInStyle
 	}
-	return Default_DocCssSpec_AllowAllDeclarationInStyleTag
+	return Default_DocCssSpec_AllowAllDeclarationInStyle
 }
 
-func (m *DocCssSpec) GetExpandVendorPrefixes() bool {
-	if m != nil && m.ExpandVendorPrefixes != nil {
-		return *m.ExpandVendorPrefixes
+func (x *DocCssSpec) GetExpandVendorPrefixes() bool {
+	if x != nil && x.ExpandVendorPrefixes != nil {
+		return *x.ExpandVendorPrefixes
 	}
 	return false
 }
 
-func (m *DocCssSpec) GetDeclaration() []*CssDeclaration {
-	if m != nil {
-		return m.Declaration
+func (x *DocCssSpec) GetDeclaration() []*CssDeclaration {
+	if x != nil {
+		return x.Declaration
 	}
 	return nil
 }
 
-func (m *DocCssSpec) GetDeclarationSvg() []*CssDeclaration {
-	if m != nil {
-		return m.DeclarationSvg
+func (x *DocCssSpec) GetDeclarationSvg() []*CssDeclaration {
+	if x != nil {
+		return x.DeclarationSvg
 	}
 	return nil
 }
 
-func (m *DocCssSpec) GetDeclarationList() []string {
-	if m != nil {
-		return m.DeclarationList
+func (x *DocCssSpec) GetDeclarationList() []string {
+	if x != nil {
+		return x.DeclarationList
 	}
 	return nil
 }
 
-func (m *DocCssSpec) GetDeclarationListSvg() []string {
-	if m != nil {
-		return m.DeclarationListSvg
+func (x *DocCssSpec) GetDeclarationListSvg() []string {
+	if x != nil {
+		return x.DeclarationListSvg
 	}
 	return nil
 }
 
-func (m *DocCssSpec) GetImageUrlSpec() *UrlSpec {
-	if m != nil {
-		return m.ImageUrlSpec
+func (x *DocCssSpec) GetImageUrlSpec() *UrlSpec {
+	if x != nil {
+		return x.ImageUrlSpec
 	}
 	return nil
 }
 
-func (m *DocCssSpec) GetFontUrlSpec() *UrlSpec {
-	if m != nil {
-		return m.FontUrlSpec
+func (x *DocCssSpec) GetFontUrlSpec() *UrlSpec {
+	if x != nil {
+		return x.FontUrlSpec
 	}
 	return nil
 }
 
-func (m *DocCssSpec) GetAllowImportant() bool {
-	if m != nil && m.AllowImportant != nil {
-		return *m.AllowImportant
+func (x *DocCssSpec) GetAllowImportant() bool {
+	if x != nil && x.AllowImportant != nil {
+		return *x.AllowImportant
 	}
 	return Default_DocCssSpec_AllowImportant
 }
 
 // Top level message - start reading here.
 // The validator knows about a set of tag specifications.
-// NEXT AVAILABLE TAG: 21
+// NEXT AVAILABLE TAG: 22
 type ValidatorRules struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	Tags      []*TagSpec  `protobuf:"bytes,1,rep,name=tags" json:"tags,omitempty"`
 	AttrLists []*AttrList `protobuf:"bytes,7,rep,name=attr_lists,json=attrLists" json:"attr_lists,omitempty"`
 	// The min file revision for validator.cc which can digest this file.
@@ -3145,124 +3715,141 @@ type ValidatorRules struct {
 	// Spec URL for information about styles and amp-custom stylesheet
 	StylesSpecUrl *string `protobuf:"bytes,15,opt,name=styles_spec_url,json=stylesSpecUrl" json:"styles_spec_url,omitempty"`
 	// Spec URL for information about script tags.
-	ScriptSpecUrl        *string              `protobuf:"bytes,17,opt,name=script_spec_url,json=scriptSpecUrl" json:"script_spec_url,omitempty"`
-	ErrorFormats         []*ErrorFormat       `protobuf:"bytes,9,rep,name=error_formats,json=errorFormats" json:"error_formats,omitempty"`
-	ErrorSpecificity     []*ErrorSpecificity  `protobuf:"bytes,13,rep,name=error_specificity,json=errorSpecificity" json:"error_specificity,omitempty"`
-	DescendantTagList    []*DescendantTagList `protobuf:"bytes,16,rep,name=descendant_tag_list,json=descendantTagList" json:"descendant_tag_list,omitempty"`
-	Css                  []*DocCssSpec        `protobuf:"bytes,19,rep,name=css" json:"css,omitempty"`
-	DeclarationList      []*DeclarationList   `protobuf:"bytes,20,rep,name=declaration_list,json=declarationList" json:"declaration_list,omitempty"`
-	XXX_NoUnkeyedLiteral struct{}             `json:"-"`
-	XXX_unrecognized     []byte               `json:"-"`
-	XXX_sizecache        int32                `json:"-"`
-}
-
-func (m *ValidatorRules) Reset()         { *m = ValidatorRules{} }
-func (m *ValidatorRules) String() string { return proto.CompactTextString(m) }
-func (*ValidatorRules) ProtoMessage()    {}
-func (*ValidatorRules) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{23}
-}
+	ScriptSpecUrl     *string              `protobuf:"bytes,17,opt,name=script_spec_url,json=scriptSpecUrl" json:"script_spec_url,omitempty"`
+	ErrorFormats      []*ErrorFormat       `protobuf:"bytes,9,rep,name=error_formats,json=errorFormats" json:"error_formats,omitempty"`
+	ErrorSpecificity  []*ErrorSpecificity  `protobuf:"bytes,13,rep,name=error_specificity,json=errorSpecificity" json:"error_specificity,omitempty"`
+	DescendantTagList []*DescendantTagList `protobuf:"bytes,16,rep,name=descendant_tag_list,json=descendantTagList" json:"descendant_tag_list,omitempty"`
+	// The DocSpec rules are scoped by the document's HtmlFormat and Type
+	// Identifiers and defined within each DocSpec.
+	Doc             []*DocSpec         `protobuf:"bytes,21,rep,name=doc" json:"doc,omitempty"`
+	Css             []*DocCssSpec      `protobuf:"bytes,19,rep,name=css" json:"css,omitempty"`
+	DeclarationList []*DeclarationList `protobuf:"bytes,20,rep,name=declaration_list,json=declarationList" json:"declaration_list,omitempty"`
+}
+
+// Default values for ValidatorRules fields.
+const (
+	Default_ValidatorRules_SpecFileRevision = int32(-1)
+)
 
-func (m *ValidatorRules) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_ValidatorRules.Unmarshal(m, b)
-}
-func (m *ValidatorRules) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_ValidatorRules.Marshal(b, m, deterministic)
-}
-func (m *ValidatorRules) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_ValidatorRules.Merge(m, src)
-}
-func (m *ValidatorRules) XXX_Size() int {
-	return xxx_messageInfo_ValidatorRules.Size(m)
+func (x *ValidatorRules) Reset() {
+	*x = ValidatorRules{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[24]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *ValidatorRules) XXX_DiscardUnknown() {
-	xxx_messageInfo_ValidatorRules.DiscardUnknown(m)
+
+func (x *ValidatorRules) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
 
-var xxx_messageInfo_ValidatorRules proto.InternalMessageInfo
+func (*ValidatorRules) ProtoMessage() {}
+
+func (x *ValidatorRules) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[24]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
 
-const Default_ValidatorRules_SpecFileRevision int32 = -1
+// Deprecated: Use ValidatorRules.ProtoReflect.Descriptor instead.
+func (*ValidatorRules) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{24}
+}
 
-func (m *ValidatorRules) GetTags() []*TagSpec {
-	if m != nil {
-		return m.Tags
+func (x *ValidatorRules) GetTags() []*TagSpec {
+	if x != nil {
+		return x.Tags
 	}
 	return nil
 }
 
-func (m *ValidatorRules) GetAttrLists() []*AttrList {
-	if m != nil {
-		return m.AttrLists
+func (x *ValidatorRules) GetAttrLists() []*AttrList {
+	if x != nil {
+		return x.AttrLists
 	}
 	return nil
 }
 
-func (m *ValidatorRules) GetMinValidatorRevisionRequired() int32 {
-	if m != nil && m.MinValidatorRevisionRequired != nil {
-		return *m.MinValidatorRevisionRequired
+func (x *ValidatorRules) GetMinValidatorRevisionRequired() int32 {
+	if x != nil && x.MinValidatorRevisionRequired != nil {
+		return *x.MinValidatorRevisionRequired
 	}
 	return 0
 }
 
-func (m *ValidatorRules) GetSpecFileRevision() int32 {
-	if m != nil && m.SpecFileRevision != nil {
-		return *m.SpecFileRevision
+func (x *ValidatorRules) GetSpecFileRevision() int32 {
+	if x != nil && x.SpecFileRevision != nil {
+		return *x.SpecFileRevision
 	}
 	return Default_ValidatorRules_SpecFileRevision
 }
 
-func (m *ValidatorRules) GetTemplateSpecUrl() string {
-	if m != nil && m.TemplateSpecUrl != nil {
-		return *m.TemplateSpecUrl
+func (x *ValidatorRules) GetTemplateSpecUrl() string {
+	if x != nil && x.TemplateSpecUrl != nil {
+		return *x.TemplateSpecUrl
 	}
 	return ""
 }
 
-func (m *ValidatorRules) GetStylesSpecUrl() string {
-	if m != nil && m.StylesSpecUrl != nil {
-		return *m.StylesSpecUrl
+func (x *ValidatorRules) GetStylesSpecUrl() string {
+	if x != nil && x.StylesSpecUrl != nil {
+		return *x.StylesSpecUrl
 	}
 	return ""
 }
 
-func (m *ValidatorRules) GetScriptSpecUrl() string {
-	if m != nil && m.ScriptSpecUrl != nil {
-		return *m.ScriptSpecUrl
+func (x *ValidatorRules) GetScriptSpecUrl() string {
+	if x != nil && x.ScriptSpecUrl != nil {
+		return *x.ScriptSpecUrl
 	}
 	return ""
 }
 
-func (m *ValidatorRules) GetErrorFormats() []*ErrorFormat {
-	if m != nil {
-		return m.ErrorFormats
+func (x *ValidatorRules) GetErrorFormats() []*ErrorFormat {
+	if x != nil {
+		return x.ErrorFormats
+	}
+	return nil
+}
+
+func (x *ValidatorRules) GetErrorSpecificity() []*ErrorSpecificity {
+	if x != nil {
+		return x.ErrorSpecificity
 	}
 	return nil
 }
 
-func (m *ValidatorRules) GetErrorSpecificity() []*ErrorSpecificity {
-	if m != nil {
-		return m.ErrorSpecificity
+func (x *ValidatorRules) GetDescendantTagList() []*DescendantTagList {
+	if x != nil {
+		return x.DescendantTagList
 	}
 	return nil
 }
 
-func (m *ValidatorRules) GetDescendantTagList() []*DescendantTagList {
-	if m != nil {
-		return m.DescendantTagList
+func (x *ValidatorRules) GetDoc() []*DocSpec {
+	if x != nil {
+		return x.Doc
 	}
 	return nil
 }
 
-func (m *ValidatorRules) GetCss() []*DocCssSpec {
-	if m != nil {
-		return m.Css
+func (x *ValidatorRules) GetCss() []*DocCssSpec {
+	if x != nil {
+		return x.Css
 	}
 	return nil
 }
 
-func (m *ValidatorRules) GetDeclarationList() []*DeclarationList {
-	if m != nil {
-		return m.DeclarationList
+func (x *ValidatorRules) GetDeclarationList() []*DeclarationList {
+	if x != nil {
+		return x.DeclarationList
 	}
 	return nil
 }
@@ -3272,35 +3859,42 @@ func (m *ValidatorRules) GetDeclarationList() []*DeclarationList {
 // on this in new code.
 // TODO(#25188): Remove ErrorCategory completely.
 type ErrorCategory struct {
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
 }
 
-func (m *ErrorCategory) Reset()         { *m = ErrorCategory{} }
-func (m *ErrorCategory) String() string { return proto.CompactTextString(m) }
-func (*ErrorCategory) ProtoMessage()    {}
-func (*ErrorCategory) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{24}
+func (x *ErrorCategory) Reset() {
+	*x = ErrorCategory{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[25]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
 
-func (m *ErrorCategory) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_ErrorCategory.Unmarshal(m, b)
-}
-func (m *ErrorCategory) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_ErrorCategory.Marshal(b, m, deterministic)
-}
-func (m *ErrorCategory) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_ErrorCategory.Merge(m, src)
-}
-func (m *ErrorCategory) XXX_Size() int {
-	return xxx_messageInfo_ErrorCategory.Size(m)
+func (x *ErrorCategory) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *ErrorCategory) XXX_DiscardUnknown() {
-	xxx_messageInfo_ErrorCategory.DiscardUnknown(m)
+
+func (*ErrorCategory) ProtoMessage() {}
+
+func (x *ErrorCategory) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[25]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_ErrorCategory proto.InternalMessageInfo
+// Deprecated: Use ErrorCategory.ProtoReflect.Descriptor instead.
+func (*ErrorCategory) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{25}
+}
 
 // We record validation errors in a structured form, so that they can be
 // worked with in code - e.g., to provide translated messages.
@@ -3311,6 +3905,10 @@ var xxx_messageInfo_ErrorCategory proto.InternalMessageInfo
 // in C++, Java, and for templates used in some frontends.
 // NEXT AVAILABLE TAG: 10
 type ValidationError struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	Severity *ValidationError_Severity `protobuf:"varint,6,opt,name=severity,enum=amp.validator.ValidationError_Severity,def=1" json:"severity,omitempty"`
 	Code     *ValidationError_Code     `protobuf:"varint,1,opt,name=code,enum=amp.validator.ValidationError_Code" json:"code,omitempty"`
 	Line     *int32                    `protobuf:"varint,2,opt,name=line,def=1" json:"line,omitempty"`
@@ -3324,92 +3922,99 @@ type ValidationError struct {
 	// will be set and contain the value found for that attribute. This is used
 	// in tests to match specific errors to specific tags in the test cases. It
 	// is not a rendered value.
-	DataAmpReportTestValue *string  `protobuf:"bytes,9,opt,name=data_amp_report_test_value,json=dataAmpReportTestValue" json:"data_amp_report_test_value,omitempty"`
-	XXX_NoUnkeyedLiteral   struct{} `json:"-"`
-	XXX_unrecognized       []byte   `json:"-"`
-	XXX_sizecache          int32    `json:"-"`
+	DataAmpReportTestValue *string `protobuf:"bytes,9,opt,name=data_amp_report_test_value,json=dataAmpReportTestValue" json:"data_amp_report_test_value,omitempty"`
 }
 
-func (m *ValidationError) Reset()         { *m = ValidationError{} }
-func (m *ValidationError) String() string { return proto.CompactTextString(m) }
-func (*ValidationError) ProtoMessage()    {}
-func (*ValidationError) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{25}
-}
+// Default values for ValidationError fields.
+const (
+	Default_ValidationError_Severity = ValidationError_ERROR
+	Default_ValidationError_Line     = int32(1)
+)
 
-func (m *ValidationError) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_ValidationError.Unmarshal(m, b)
-}
-func (m *ValidationError) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_ValidationError.Marshal(b, m, deterministic)
-}
-func (m *ValidationError) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_ValidationError.Merge(m, src)
-}
-func (m *ValidationError) XXX_Size() int {
-	return xxx_messageInfo_ValidationError.Size(m)
+func (x *ValidationError) Reset() {
+	*x = ValidationError{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[26]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *ValidationError) XXX_DiscardUnknown() {
-	xxx_messageInfo_ValidationError.DiscardUnknown(m)
+
+func (x *ValidationError) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
 
-var xxx_messageInfo_ValidationError proto.InternalMessageInfo
+func (*ValidationError) ProtoMessage() {}
+
+func (x *ValidationError) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[26]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
 
-const Default_ValidationError_Severity ValidationError_Severity = ValidationError_ERROR
-const Default_ValidationError_Line int32 = 1
+// Deprecated: Use ValidationError.ProtoReflect.Descriptor instead.
+func (*ValidationError) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{26}
+}
 
-func (m *ValidationError) GetSeverity() ValidationError_Severity {
-	if m != nil && m.Severity != nil {
-		return *m.Severity
+func (x *ValidationError) GetSeverity() ValidationError_Severity {
+	if x != nil && x.Severity != nil {
+		return *x.Severity
 	}
 	return Default_ValidationError_Severity
 }
 
-func (m *ValidationError) GetCode() ValidationError_Code {
-	if m != nil && m.Code != nil {
-		return *m.Code
+func (x *ValidationError) GetCode() ValidationError_Code {
+	if x != nil && x.Code != nil {
+		return *x.Code
 	}
 	return ValidationError_UNKNOWN_CODE
 }
 
-func (m *ValidationError) GetLine() int32 {
-	if m != nil && m.Line != nil {
-		return *m.Line
+func (x *ValidationError) GetLine() int32 {
+	if x != nil && x.Line != nil {
+		return *x.Line
 	}
 	return Default_ValidationError_Line
 }
 
-func (m *ValidationError) GetCol() int32 {
-	if m != nil && m.Col != nil {
-		return *m.Col
+func (x *ValidationError) GetCol() int32 {
+	if x != nil && x.Col != nil {
+		return *x.Col
 	}
 	return 0
 }
 
-func (m *ValidationError) GetSpecUrl() string {
-	if m != nil && m.SpecUrl != nil {
-		return *m.SpecUrl
+func (x *ValidationError) GetSpecUrl() string {
+	if x != nil && x.SpecUrl != nil {
+		return *x.SpecUrl
 	}
 	return ""
 }
 
-func (m *ValidationError) GetParams() []string {
-	if m != nil {
-		return m.Params
+func (x *ValidationError) GetParams() []string {
+	if x != nil {
+		return x.Params
 	}
 	return nil
 }
 
-func (m *ValidationError) GetCategory() ErrorCategory_Code {
-	if m != nil && m.Category != nil {
-		return *m.Category
+func (x *ValidationError) GetCategory() ErrorCategory_Code {
+	if x != nil && x.Category != nil {
+		return *x.Category
 	}
 	return ErrorCategory_UNKNOWN
 }
 
-func (m *ValidationError) GetDataAmpReportTestValue() string {
-	if m != nil && m.DataAmpReportTestValue != nil {
-		return *m.DataAmpReportTestValue
+func (x *ValidationError) GetDataAmpReportTestValue() string {
+	if x != nil && x.DataAmpReportTestValue != nil {
+		return *x.DataAmpReportTestValue
 	}
 	return ""
 }
@@ -3419,96 +4024,112 @@ func (m *ValidationError) GetDataAmpReportTestValue() string {
 // specific, ie: more helpful, preferred.
 // NEXT AVAILABLE TAG: 3
 type ErrorSpecificity struct {
-	Code                 *ValidationError_Code `protobuf:"varint,1,opt,name=code,enum=amp.validator.ValidationError_Code" json:"code,omitempty"`
-	Specificity          *int32                `protobuf:"varint,2,opt,name=specificity" json:"specificity,omitempty"`
-	XXX_NoUnkeyedLiteral struct{}              `json:"-"`
-	XXX_unrecognized     []byte                `json:"-"`
-	XXX_sizecache        int32                 `json:"-"`
-}
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
 
-func (m *ErrorSpecificity) Reset()         { *m = ErrorSpecificity{} }
-func (m *ErrorSpecificity) String() string { return proto.CompactTextString(m) }
-func (*ErrorSpecificity) ProtoMessage()    {}
-func (*ErrorSpecificity) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{26}
+	Code        *ValidationError_Code `protobuf:"varint,1,opt,name=code,enum=amp.validator.ValidationError_Code" json:"code,omitempty"`
+	Specificity *int32                `protobuf:"varint,2,opt,name=specificity" json:"specificity,omitempty"`
 }
 
-func (m *ErrorSpecificity) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_ErrorSpecificity.Unmarshal(m, b)
-}
-func (m *ErrorSpecificity) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_ErrorSpecificity.Marshal(b, m, deterministic)
-}
-func (m *ErrorSpecificity) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_ErrorSpecificity.Merge(m, src)
+func (x *ErrorSpecificity) Reset() {
+	*x = ErrorSpecificity{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[27]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *ErrorSpecificity) XXX_Size() int {
-	return xxx_messageInfo_ErrorSpecificity.Size(m)
+
+func (x *ErrorSpecificity) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *ErrorSpecificity) XXX_DiscardUnknown() {
-	xxx_messageInfo_ErrorSpecificity.DiscardUnknown(m)
+
+func (*ErrorSpecificity) ProtoMessage() {}
+
+func (x *ErrorSpecificity) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[27]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_ErrorSpecificity proto.InternalMessageInfo
+// Deprecated: Use ErrorSpecificity.ProtoReflect.Descriptor instead.
+func (*ErrorSpecificity) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{27}
+}
 
-func (m *ErrorSpecificity) GetCode() ValidationError_Code {
-	if m != nil && m.Code != nil {
-		return *m.Code
+func (x *ErrorSpecificity) GetCode() ValidationError_Code {
+	if x != nil && x.Code != nil {
+		return *x.Code
 	}
 	return ValidationError_UNKNOWN_CODE
 }
 
-func (m *ErrorSpecificity) GetSpecificity() int32 {
-	if m != nil && m.Specificity != nil {
-		return *m.Specificity
+func (x *ErrorSpecificity) GetSpecificity() int32 {
+	if x != nil && x.Specificity != nil {
+		return *x.Specificity
 	}
 	return 0
 }
 
 // NEXT AVAILABLE TAG: 3
 type ErrorFormat struct {
-	Code                 *ValidationError_Code `protobuf:"varint,1,opt,name=code,enum=amp.validator.ValidationError_Code" json:"code,omitempty"`
-	Format               *string               `protobuf:"bytes,2,opt,name=format" json:"format,omitempty"`
-	XXX_NoUnkeyedLiteral struct{}              `json:"-"`
-	XXX_unrecognized     []byte                `json:"-"`
-	XXX_sizecache        int32                 `json:"-"`
-}
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
 
-func (m *ErrorFormat) Reset()         { *m = ErrorFormat{} }
-func (m *ErrorFormat) String() string { return proto.CompactTextString(m) }
-func (*ErrorFormat) ProtoMessage()    {}
-func (*ErrorFormat) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{27}
+	Code   *ValidationError_Code `protobuf:"varint,1,opt,name=code,enum=amp.validator.ValidationError_Code" json:"code,omitempty"`
+	Format *string               `protobuf:"bytes,2,opt,name=format" json:"format,omitempty"`
 }
 
-func (m *ErrorFormat) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_ErrorFormat.Unmarshal(m, b)
-}
-func (m *ErrorFormat) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_ErrorFormat.Marshal(b, m, deterministic)
-}
-func (m *ErrorFormat) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_ErrorFormat.Merge(m, src)
+func (x *ErrorFormat) Reset() {
+	*x = ErrorFormat{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[28]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *ErrorFormat) XXX_Size() int {
-	return xxx_messageInfo_ErrorFormat.Size(m)
+
+func (x *ErrorFormat) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *ErrorFormat) XXX_DiscardUnknown() {
-	xxx_messageInfo_ErrorFormat.DiscardUnknown(m)
+
+func (*ErrorFormat) ProtoMessage() {}
+
+func (x *ErrorFormat) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[28]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_ErrorFormat proto.InternalMessageInfo
+// Deprecated: Use ErrorFormat.ProtoReflect.Descriptor instead.
+func (*ErrorFormat) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{28}
+}
 
-func (m *ErrorFormat) GetCode() ValidationError_Code {
-	if m != nil && m.Code != nil {
-		return *m.Code
+func (x *ErrorFormat) GetCode() ValidationError_Code {
+	if x != nil && x.Code != nil {
+		return *x.Code
 	}
 	return ValidationError_UNKNOWN_CODE
 }
 
-func (m *ErrorFormat) GetFormat() string {
-	if m != nil && m.Format != nil {
-		return *m.Format
+func (x *ErrorFormat) GetFormat() string {
+	if x != nil && x.Format != nil {
+		return *x.Format
 	}
 	return ""
 }
@@ -3517,50 +4138,58 @@ func (m *ErrorFormat) GetFormat() string {
 // document (i.e. AttrSpec.add_value_to_set).
 // NEXT AVAILABLE TAG: 3
 type ValueSetProvision struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// The collection to add the attribute value to.
 	Set *AttrSpec_ValueSet `protobuf:"varint,1,opt,name=set,enum=amp.validator.AttrSpec_ValueSet" json:"set,omitempty"`
 	// The value of the attribute itself.
-	Value                *string  `protobuf:"bytes,2,opt,name=value" json:"value,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
+	Value *string `protobuf:"bytes,2,opt,name=value" json:"value,omitempty"`
 }
 
-func (m *ValueSetProvision) Reset()         { *m = ValueSetProvision{} }
-func (m *ValueSetProvision) String() string { return proto.CompactTextString(m) }
-func (*ValueSetProvision) ProtoMessage()    {}
-func (*ValueSetProvision) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{28}
+func (x *ValueSetProvision) Reset() {
+	*x = ValueSetProvision{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[29]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
 
-func (m *ValueSetProvision) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_ValueSetProvision.Unmarshal(m, b)
-}
-func (m *ValueSetProvision) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_ValueSetProvision.Marshal(b, m, deterministic)
-}
-func (m *ValueSetProvision) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_ValueSetProvision.Merge(m, src)
-}
-func (m *ValueSetProvision) XXX_Size() int {
-	return xxx_messageInfo_ValueSetProvision.Size(m)
+func (x *ValueSetProvision) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *ValueSetProvision) XXX_DiscardUnknown() {
-	xxx_messageInfo_ValueSetProvision.DiscardUnknown(m)
+
+func (*ValueSetProvision) ProtoMessage() {}
+
+func (x *ValueSetProvision) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[29]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_ValueSetProvision proto.InternalMessageInfo
+// Deprecated: Use ValueSetProvision.ProtoReflect.Descriptor instead.
+func (*ValueSetProvision) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{29}
+}
 
-func (m *ValueSetProvision) GetSet() AttrSpec_ValueSet {
-	if m != nil && m.Set != nil {
-		return *m.Set
+func (x *ValueSetProvision) GetSet() AttrSpec_ValueSet {
+	if x != nil && x.Set != nil {
+		return *x.Set
 	}
 	return AttrSpec_UNKNOWN_VALUESET
 }
 
-func (m *ValueSetProvision) GetValue() string {
-	if m != nil && m.Value != nil {
-		return *m.Value
+func (x *ValueSetProvision) GetValue() string {
+	if x != nil && x.Value != nil {
+		return *x.Value
 	}
 	return ""
 }
@@ -3572,51 +4201,59 @@ func (m *ValueSetProvision) GetValue() string {
 // alongside) requirements.
 // NEXT AVAILABLE TAG: 3
 type ValueSetRequirement struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
 	// The provision that is required.
 	Provision *ValueSetProvision `protobuf:"bytes,1,opt,name=provision" json:"provision,omitempty"`
 	// The error that will appear if the requirement is not met. This includes the
 	// line/col of the attribute that makes the requirement.
-	ErrorIfUnsatisfied   *ValidationError `protobuf:"bytes,2,opt,name=error_if_unsatisfied,json=errorIfUnsatisfied" json:"error_if_unsatisfied,omitempty"`
-	XXX_NoUnkeyedLiteral struct{}         `json:"-"`
-	XXX_unrecognized     []byte           `json:"-"`
-	XXX_sizecache        int32            `json:"-"`
+	ErrorIfUnsatisfied *ValidationError `protobuf:"bytes,2,opt,name=error_if_unsatisfied,json=errorIfUnsatisfied" json:"error_if_unsatisfied,omitempty"`
 }
 
-func (m *ValueSetRequirement) Reset()         { *m = ValueSetRequirement{} }
-func (m *ValueSetRequirement) String() string { return proto.CompactTextString(m) }
-func (*ValueSetRequirement) ProtoMessage()    {}
-func (*ValueSetRequirement) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{29}
+func (x *ValueSetRequirement) Reset() {
+	*x = ValueSetRequirement{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[30]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
 
-func (m *ValueSetRequirement) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_ValueSetRequirement.Unmarshal(m, b)
+func (x *ValueSetRequirement) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
-func (m *ValueSetRequirement) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_ValueSetRequirement.Marshal(b, m, deterministic)
-}
-func (m *ValueSetRequirement) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_ValueSetRequirement.Merge(m, src)
-}
-func (m *ValueSetRequirement) XXX_Size() int {
-	return xxx_messageInfo_ValueSetRequirement.Size(m)
-}
-func (m *ValueSetRequirement) XXX_DiscardUnknown() {
-	xxx_messageInfo_ValueSetRequirement.DiscardUnknown(m)
+
+func (*ValueSetRequirement) ProtoMessage() {}
+
+func (x *ValueSetRequirement) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[30]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
 }
 
-var xxx_messageInfo_ValueSetRequirement proto.InternalMessageInfo
+// Deprecated: Use ValueSetRequirement.ProtoReflect.Descriptor instead.
+func (*ValueSetRequirement) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{30}
+}
 
-func (m *ValueSetRequirement) GetProvision() *ValueSetProvision {
-	if m != nil {
-		return m.Provision
+func (x *ValueSetRequirement) GetProvision() *ValueSetProvision {
+	if x != nil {
+		return x.Provision
 	}
 	return nil
 }
 
-func (m *ValueSetRequirement) GetErrorIfUnsatisfied() *ValidationError {
-	if m != nil {
-		return m.ErrorIfUnsatisfied
+func (x *ValueSetRequirement) GetErrorIfUnsatisfied() *ValidationError {
+	if x != nil {
+		return x.ErrorIfUnsatisfied
 	}
 	return nil
 }
@@ -3625,10 +4262,16 @@ func (m *ValueSetRequirement) GetErrorIfUnsatisfied() *ValidationError {
 // in validator.h). To render such a proto see RenderValidationResult.
 // NEXT AVAILABLE TAG: 9
 type ValidationResult struct {
-	Status            *ValidationResult_Status `protobuf:"varint,2,opt,name=status,enum=amp.validator.ValidationResult_Status" json:"status,omitempty"`
-	Errors            []*ValidationError       `protobuf:"bytes,1,rep,name=errors" json:"errors,omitempty"`
-	ValidatorRevision *int32                   `protobuf:"varint,3,opt,name=validator_revision,json=validatorRevision,def=-1" json:"validator_revision,omitempty"`
-	SpecFileRevision  *int32                   `protobuf:"varint,4,opt,name=spec_file_revision,json=specFileRevision,def=-1" json:"spec_file_revision,omitempty"`
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
+	Status *ValidationResult_Status `protobuf:"varint,2,opt,name=status,enum=amp.validator.ValidationResult_Status" json:"status,omitempty"`
+	Errors []*ValidationError       `protobuf:"bytes,1,rep,name=errors" json:"errors,omitempty"`
+	// The following field is deprecated and can return any value. Do not depend
+	// on this.
+	ValidatorRevision *int32 `protobuf:"varint,3,opt,name=validator_revision,json=validatorRevision,def=-1" json:"validator_revision,omitempty"`
+	SpecFileRevision  *int32 `protobuf:"varint,4,opt,name=spec_file_revision,json=specFileRevision,def=-1" json:"spec_file_revision,omitempty"`
 	// If the AMP document is a transformed AMP document, then this is the
 	// version of the transformers that were used to transform it. If the document
 	// is not transformed, then the transformer_version's value will be 0.
@@ -3649,534 +4292,1514 @@ type ValidationResult struct {
 	// If the TagSpec is selected, these will be added to the final set of
 	// requirements.
 	ValueSetRequirements []*ValueSetRequirement `protobuf:"bytes,8,rep,name=value_set_requirements,json=valueSetRequirements" json:"value_set_requirements,omitempty"`
-	XXX_NoUnkeyedLiteral struct{}               `json:"-"`
-	XXX_unrecognized     []byte                 `json:"-"`
-	XXX_sizecache        int32                  `json:"-"`
 }
 
-func (m *ValidationResult) Reset()         { *m = ValidationResult{} }
-func (m *ValidationResult) String() string { return proto.CompactTextString(m) }
-func (*ValidationResult) ProtoMessage()    {}
-func (*ValidationResult) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{30}
-}
+// Default values for ValidationResult fields.
+const (
+	Default_ValidationResult_ValidatorRevision  = int32(-1)
+	Default_ValidationResult_SpecFileRevision   = int32(-1)
+	Default_ValidationResult_TransformerVersion = int32(0)
+)
 
-func (m *ValidationResult) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_ValidationResult.Unmarshal(m, b)
-}
-func (m *ValidationResult) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_ValidationResult.Marshal(b, m, deterministic)
-}
-func (m *ValidationResult) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_ValidationResult.Merge(m, src)
-}
-func (m *ValidationResult) XXX_Size() int {
-	return xxx_messageInfo_ValidationResult.Size(m)
+func (x *ValidationResult) Reset() {
+	*x = ValidationResult{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_validator_proto_msgTypes[31]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
 }
-func (m *ValidationResult) XXX_DiscardUnknown() {
-	xxx_messageInfo_ValidationResult.DiscardUnknown(m)
+
+func (x *ValidationResult) String() string {
+	return protoimpl.X.MessageStringOf(x)
 }
 
-var xxx_messageInfo_ValidationResult proto.InternalMessageInfo
+func (*ValidationResult) ProtoMessage() {}
+
+func (x *ValidationResult) ProtoReflect() protoreflect.Message {
+	mi := &file_validator_proto_msgTypes[31]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
 
-const Default_ValidationResult_ValidatorRevision int32 = -1
-const Default_ValidationResult_SpecFileRevision int32 = -1
-const Default_ValidationResult_TransformerVersion int32 = 0
+// Deprecated: Use ValidationResult.ProtoReflect.Descriptor instead.
+func (*ValidationResult) Descriptor() ([]byte, []int) {
+	return file_validator_proto_rawDescGZIP(), []int{31}
+}
 
-func (m *ValidationResult) GetStatus() ValidationResult_Status {
-	if m != nil && m.Status != nil {
-		return *m.Status
+func (x *ValidationResult) GetStatus() ValidationResult_Status {
+	if x != nil && x.Status != nil {
+		return *x.Status
 	}
 	return ValidationResult_UNKNOWN
 }
 
-func (m *ValidationResult) GetErrors() []*ValidationError {
-	if m != nil {
-		return m.Errors
+func (x *ValidationResult) GetErrors() []*ValidationError {
+	if x != nil {
+		return x.Errors
 	}
 	return nil
 }
 
-func (m *ValidationResult) GetValidatorRevision() int32 {
-	if m != nil && m.ValidatorRevision != nil {
-		return *m.ValidatorRevision
+func (x *ValidationResult) GetValidatorRevision() int32 {
+	if x != nil && x.ValidatorRevision != nil {
+		return *x.ValidatorRevision
 	}
 	return Default_ValidationResult_ValidatorRevision
 }
 
-func (m *ValidationResult) GetSpecFileRevision() int32 {
-	if m != nil && m.SpecFileRevision != nil {
-		return *m.SpecFileRevision
+func (x *ValidationResult) GetSpecFileRevision() int32 {
+	if x != nil && x.SpecFileRevision != nil {
+		return *x.SpecFileRevision
 	}
 	return Default_ValidationResult_SpecFileRevision
 }
 
-func (m *ValidationResult) GetTransformerVersion() int32 {
-	if m != nil && m.TransformerVersion != nil {
-		return *m.TransformerVersion
+func (x *ValidationResult) GetTransformerVersion() int32 {
+	if x != nil && x.TransformerVersion != nil {
+		return *x.TransformerVersion
 	}
 	return Default_ValidationResult_TransformerVersion
 }
 
-func (m *ValidationResult) GetTypeIdentifier() []string {
-	if m != nil {
-		return m.TypeIdentifier
+func (x *ValidationResult) GetTypeIdentifier() []string {
+	if x != nil {
+		return x.TypeIdentifier
 	}
 	return nil
 }
 
-func (m *ValidationResult) GetValueSetProvisions() []*ValueSetProvision {
-	if m != nil {
-		return m.ValueSetProvisions
+func (x *ValidationResult) GetValueSetProvisions() []*ValueSetProvision {
+	if x != nil {
+		return x.ValueSetProvisions
 	}
 	return nil
 }
 
-func (m *ValidationResult) GetValueSetRequirements() []*ValueSetRequirement {
-	if m != nil {
-		return m.ValueSetRequirements
+func (x *ValidationResult) GetValueSetRequirements() []*ValueSetRequirement {
+	if x != nil {
+		return x.ValueSetRequirements
 	}
 	return nil
 }
 
-// Information about the validator returned by ValidatorFactory
-// (see validator.h).
-// NEXT AVAILABLE TAG: 4
-type ValidatorInfo struct {
-	// Path from which the spec file was loaded.
-	RulesPath *string `protobuf:"bytes,1,opt,name=rules_path,json=rulesPath" json:"rules_path,omitempty"`
-	// The file revision of validator.cc.
-	ValidatorRevision *int32 `protobuf:"varint,2,opt,name=validator_revision,json=validatorRevision,def=-1" json:"validator_revision,omitempty"`
-	// The file revision of the spec file (validator.protoascii).
-	SpecFileRevision     *int32   `protobuf:"varint,3,opt,name=spec_file_revision,json=specFileRevision,def=-1" json:"spec_file_revision,omitempty"`
-	XXX_NoUnkeyedLiteral struct{} `json:"-"`
-	XXX_unrecognized     []byte   `json:"-"`
-	XXX_sizecache        int32    `json:"-"`
-}
-
-func (m *ValidatorInfo) Reset()         { *m = ValidatorInfo{} }
-func (m *ValidatorInfo) String() string { return proto.CompactTextString(m) }
-func (*ValidatorInfo) ProtoMessage()    {}
-func (*ValidatorInfo) Descriptor() ([]byte, []int) {
-	return fileDescriptor_bf1c6ec7c0d80dd5, []int{31}
-}
-
-func (m *ValidatorInfo) XXX_Unmarshal(b []byte) error {
-	return xxx_messageInfo_ValidatorInfo.Unmarshal(m, b)
-}
-func (m *ValidatorInfo) XXX_Marshal(b []byte, deterministic bool) ([]byte, error) {
-	return xxx_messageInfo_ValidatorInfo.Marshal(b, m, deterministic)
-}
-func (m *ValidatorInfo) XXX_Merge(src proto.Message) {
-	xxx_messageInfo_ValidatorInfo.Merge(m, src)
-}
-func (m *ValidatorInfo) XXX_Size() int {
-	return xxx_messageInfo_ValidatorInfo.Size(m)
-}
-func (m *ValidatorInfo) XXX_DiscardUnknown() {
-	xxx_messageInfo_ValidatorInfo.DiscardUnknown(m)
-}
-
-var xxx_messageInfo_ValidatorInfo proto.InternalMessageInfo
-
-const Default_ValidatorInfo_ValidatorRevision int32 = -1
-const Default_ValidatorInfo_SpecFileRevision int32 = -1
-
-func (m *ValidatorInfo) GetRulesPath() string {
-	if m != nil && m.RulesPath != nil {
-		return *m.RulesPath
-	}
-	return ""
-}
+var File_validator_proto protoreflect.FileDescriptor
+
+var file_validator_proto_rawDesc = []byte{
+	0x0a, 0x0f, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x70, 0x72, 0x6f, 0x74,
+	0x6f, 0x12, 0x0d, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72,
+	0x22, 0x65, 0x0a, 0x0f, 0x41, 0x74, 0x74, 0x72, 0x54, 0x72, 0x69, 0x67, 0x67, 0x65, 0x72, 0x53,
+	0x70, 0x65, 0x63, 0x12, 0x24, 0x0a, 0x0e, 0x69, 0x66, 0x5f, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x5f,
+	0x72, 0x65, 0x67, 0x65, 0x78, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0c, 0x69, 0x66, 0x56,
+	0x61, 0x6c, 0x75, 0x65, 0x52, 0x65, 0x67, 0x65, 0x78, 0x12, 0x2c, 0x0a, 0x12, 0x61, 0x6c, 0x73,
+	0x6f, 0x5f, 0x72, 0x65, 0x71, 0x75, 0x69, 0x72, 0x65, 0x73, 0x5f, 0x61, 0x74, 0x74, 0x72, 0x18,
+	0x02, 0x20, 0x03, 0x28, 0x09, 0x52, 0x10, 0x61, 0x6c, 0x73, 0x6f, 0x52, 0x65, 0x71, 0x75, 0x69,
+	0x72, 0x65, 0x73, 0x41, 0x74, 0x74, 0x72, 0x22, 0x79, 0x0a, 0x0c, 0x50, 0x72, 0x6f, 0x70, 0x65,
+	0x72, 0x74, 0x79, 0x53, 0x70, 0x65, 0x63, 0x12, 0x12, 0x0a, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x18,
+	0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x12, 0x1c, 0x0a, 0x09, 0x6d,
+	0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x18, 0x02, 0x20, 0x01, 0x28, 0x08, 0x52, 0x09,
+	0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x12, 0x14, 0x0a, 0x05, 0x76, 0x61, 0x6c,
+	0x75, 0x65, 0x18, 0x03, 0x20, 0x01, 0x28, 0x09, 0x52, 0x05, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x12,
+	0x21, 0x0a, 0x0c, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x5f, 0x64, 0x6f, 0x75, 0x62, 0x6c, 0x65, 0x18,
+	0x04, 0x20, 0x01, 0x28, 0x01, 0x52, 0x0b, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x44, 0x6f, 0x75, 0x62,
+	0x6c, 0x65, 0x22, 0x4f, 0x0a, 0x10, 0x50, 0x72, 0x6f, 0x70, 0x65, 0x72, 0x74, 0x79, 0x53, 0x70,
+	0x65, 0x63, 0x4c, 0x69, 0x73, 0x74, 0x12, 0x3b, 0x0a, 0x0a, 0x70, 0x72, 0x6f, 0x70, 0x65, 0x72,
+	0x74, 0x69, 0x65, 0x73, 0x18, 0x01, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x1b, 0x2e, 0x61, 0x6d, 0x70,
+	0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x50, 0x72, 0x6f, 0x70, 0x65,
+	0x72, 0x74, 0x79, 0x53, 0x70, 0x65, 0x63, 0x52, 0x0a, 0x70, 0x72, 0x6f, 0x70, 0x65, 0x72, 0x74,
+	0x69, 0x65, 0x73, 0x22, 0x7a, 0x0a, 0x07, 0x55, 0x72, 0x6c, 0x53, 0x70, 0x65, 0x63, 0x12, 0x1a,
+	0x0a, 0x08, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x63, 0x6f, 0x6c, 0x18, 0x01, 0x20, 0x03, 0x28, 0x09,
+	0x52, 0x08, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x63, 0x6f, 0x6c, 0x12, 0x2b, 0x0a, 0x0e, 0x61, 0x6c,
+	0x6c, 0x6f, 0x77, 0x5f, 0x72, 0x65, 0x6c, 0x61, 0x74, 0x69, 0x76, 0x65, 0x18, 0x02, 0x20, 0x01,
+	0x28, 0x08, 0x3a, 0x04, 0x74, 0x72, 0x75, 0x65, 0x52, 0x0d, 0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x52,
+	0x65, 0x6c, 0x61, 0x74, 0x69, 0x76, 0x65, 0x12, 0x26, 0x0a, 0x0b, 0x61, 0x6c, 0x6c, 0x6f, 0x77,
+	0x5f, 0x65, 0x6d, 0x70, 0x74, 0x79, 0x18, 0x03, 0x20, 0x01, 0x28, 0x08, 0x3a, 0x05, 0x66, 0x61,
+	0x6c, 0x73, 0x65, 0x52, 0x0a, 0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x45, 0x6d, 0x70, 0x74, 0x79, 0x22,
+	0x71, 0x0a, 0x0e, 0x43, 0x73, 0x73, 0x44, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f,
+	0x6e, 0x12, 0x12, 0x0a, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52,
+	0x04, 0x6e, 0x61, 0x6d, 0x65, 0x12, 0x1f, 0x0a, 0x0b, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x5f, 0x63,
+	0x61, 0x73, 0x65, 0x69, 0x18, 0x02, 0x20, 0x03, 0x28, 0x09, 0x52, 0x0a, 0x76, 0x61, 0x6c, 0x75,
+	0x65, 0x43, 0x61, 0x73, 0x65, 0x69, 0x12, 0x2a, 0x0a, 0x11, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x5f,
+	0x72, 0x65, 0x67, 0x65, 0x78, 0x5f, 0x63, 0x61, 0x73, 0x65, 0x69, 0x18, 0x03, 0x20, 0x01, 0x28,
+	0x09, 0x52, 0x0f, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x52, 0x65, 0x67, 0x65, 0x78, 0x43, 0x61, 0x73,
+	0x65, 0x69, 0x22, 0x9a, 0x0b, 0x0a, 0x08, 0x41, 0x74, 0x74, 0x72, 0x53, 0x70, 0x65, 0x63, 0x12,
+	0x1d, 0x0a, 0x0a, 0x65, 0x6e, 0x61, 0x62, 0x6c, 0x65, 0x64, 0x5f, 0x62, 0x79, 0x18, 0x17, 0x20,
+	0x03, 0x28, 0x09, 0x52, 0x09, 0x65, 0x6e, 0x61, 0x62, 0x6c, 0x65, 0x64, 0x42, 0x79, 0x12, 0x1f,
+	0x0a, 0x0b, 0x64, 0x69, 0x73, 0x61, 0x62, 0x6c, 0x65, 0x64, 0x5f, 0x62, 0x79, 0x18, 0x18, 0x20,
+	0x03, 0x28, 0x09, 0x52, 0x0a, 0x64, 0x69, 0x73, 0x61, 0x62, 0x6c, 0x65, 0x64, 0x42, 0x79, 0x12,
+	0x12, 0x0a, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x04, 0x6e,
+	0x61, 0x6d, 0x65, 0x12, 0x2b, 0x0a, 0x11, 0x61, 0x6c, 0x74, 0x65, 0x72, 0x6e, 0x61, 0x74, 0x69,
+	0x76, 0x65, 0x5f, 0x6e, 0x61, 0x6d, 0x65, 0x73, 0x18, 0x02, 0x20, 0x03, 0x28, 0x09, 0x52, 0x10,
+	0x61, 0x6c, 0x74, 0x65, 0x72, 0x6e, 0x61, 0x74, 0x69, 0x76, 0x65, 0x4e, 0x61, 0x6d, 0x65, 0x73,
+	0x12, 0x1c, 0x0a, 0x09, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x18, 0x03, 0x20,
+	0x01, 0x28, 0x08, 0x52, 0x09, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x12, 0x27,
+	0x0a, 0x0f, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x5f, 0x6f, 0x6e, 0x65, 0x6f,
+	0x66, 0x18, 0x0c, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0e, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f,
+	0x72, 0x79, 0x4f, 0x6e, 0x65, 0x6f, 0x66, 0x12, 0x27, 0x0a, 0x0f, 0x6d, 0x61, 0x6e, 0x64, 0x61,
+	0x74, 0x6f, 0x72, 0x79, 0x5f, 0x61, 0x6e, 0x79, 0x6f, 0x66, 0x18, 0x15, 0x20, 0x01, 0x28, 0x09,
+	0x52, 0x0e, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x41, 0x6e, 0x79, 0x6f, 0x66,
+	0x12, 0x14, 0x0a, 0x05, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x18, 0x04, 0x20, 0x03, 0x28, 0x09, 0x52,
+	0x05, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x12, 0x1f, 0x0a, 0x0b, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x5f,
+	0x63, 0x61, 0x73, 0x65, 0x69, 0x18, 0x12, 0x20, 0x03, 0x28, 0x09, 0x52, 0x0a, 0x76, 0x61, 0x6c,
+	0x75, 0x65, 0x43, 0x61, 0x73, 0x65, 0x69, 0x12, 0x1f, 0x0a, 0x0b, 0x76, 0x61, 0x6c, 0x75, 0x65,
+	0x5f, 0x72, 0x65, 0x67, 0x65, 0x78, 0x18, 0x0f, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0a, 0x76, 0x61,
+	0x6c, 0x75, 0x65, 0x52, 0x65, 0x67, 0x65, 0x78, 0x12, 0x2a, 0x0a, 0x11, 0x76, 0x61, 0x6c, 0x75,
+	0x65, 0x5f, 0x72, 0x65, 0x67, 0x65, 0x78, 0x5f, 0x63, 0x61, 0x73, 0x65, 0x69, 0x18, 0x05, 0x20,
+	0x01, 0x28, 0x09, 0x52, 0x0f, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x52, 0x65, 0x67, 0x65, 0x78, 0x43,
+	0x61, 0x73, 0x65, 0x69, 0x12, 0x33, 0x0a, 0x09, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x5f, 0x75, 0x72,
+	0x6c, 0x18, 0x0e, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x16, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61,
+	0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x55, 0x72, 0x6c, 0x53, 0x70, 0x65, 0x63, 0x52,
+	0x08, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x55, 0x72, 0x6c, 0x12, 0x4a, 0x0a, 0x10, 0x76, 0x61, 0x6c,
+	0x75, 0x65, 0x5f, 0x70, 0x72, 0x6f, 0x70, 0x65, 0x72, 0x74, 0x69, 0x65, 0x73, 0x18, 0x0b, 0x20,
+	0x01, 0x28, 0x0b, 0x32, 0x1f, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61,
+	0x74, 0x6f, 0x72, 0x2e, 0x50, 0x72, 0x6f, 0x70, 0x65, 0x72, 0x74, 0x79, 0x53, 0x70, 0x65, 0x63,
+	0x4c, 0x69, 0x73, 0x74, 0x52, 0x0f, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x50, 0x72, 0x6f, 0x70, 0x65,
+	0x72, 0x74, 0x69, 0x65, 0x73, 0x12, 0x22, 0x0a, 0x0d, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x5f, 0x64,
+	0x6f, 0x63, 0x5f, 0x63, 0x73, 0x73, 0x18, 0x1b, 0x20, 0x01, 0x28, 0x08, 0x52, 0x0b, 0x76, 0x61,
+	0x6c, 0x75, 0x65, 0x44, 0x6f, 0x63, 0x43, 0x73, 0x73, 0x12, 0x29, 0x0a, 0x11, 0x76, 0x61, 0x6c,
+	0x75, 0x65, 0x5f, 0x64, 0x6f, 0x63, 0x5f, 0x73, 0x76, 0x67, 0x5f, 0x63, 0x73, 0x73, 0x18, 0x1c,
+	0x20, 0x01, 0x28, 0x08, 0x52, 0x0e, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x44, 0x6f, 0x63, 0x53, 0x76,
+	0x67, 0x43, 0x73, 0x73, 0x12, 0x49, 0x0a, 0x10, 0x61, 0x64, 0x64, 0x5f, 0x76, 0x61, 0x6c, 0x75,
+	0x65, 0x5f, 0x74, 0x6f, 0x5f, 0x73, 0x65, 0x74, 0x18, 0x19, 0x20, 0x01, 0x28, 0x0e, 0x32, 0x20,
+	0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x41,
+	0x74, 0x74, 0x72, 0x53, 0x70, 0x65, 0x63, 0x2e, 0x56, 0x61, 0x6c, 0x75, 0x65, 0x53, 0x65, 0x74,
+	0x52, 0x0d, 0x61, 0x64, 0x64, 0x56, 0x61, 0x6c, 0x75, 0x65, 0x54, 0x6f, 0x53, 0x65, 0x74, 0x12,
+	0x48, 0x0a, 0x0f, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x5f, 0x6f, 0x6e, 0x65, 0x6f, 0x66, 0x5f, 0x73,
+	0x65, 0x74, 0x18, 0x1a, 0x20, 0x01, 0x28, 0x0e, 0x32, 0x20, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76,
+	0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x41, 0x74, 0x74, 0x72, 0x53, 0x70, 0x65,
+	0x63, 0x2e, 0x56, 0x61, 0x6c, 0x75, 0x65, 0x53, 0x65, 0x74, 0x52, 0x0d, 0x76, 0x61, 0x6c, 0x75,
+	0x65, 0x4f, 0x6e, 0x65, 0x6f, 0x66, 0x53, 0x65, 0x74, 0x12, 0x38, 0x0a, 0x07, 0x74, 0x72, 0x69,
+	0x67, 0x67, 0x65, 0x72, 0x18, 0x10, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x1e, 0x2e, 0x61, 0x6d, 0x70,
+	0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x41, 0x74, 0x74, 0x72, 0x54,
+	0x72, 0x69, 0x67, 0x67, 0x65, 0x72, 0x53, 0x70, 0x65, 0x63, 0x52, 0x07, 0x74, 0x72, 0x69, 0x67,
+	0x67, 0x65, 0x72, 0x12, 0x34, 0x0a, 0x16, 0x64, 0x69, 0x73, 0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x65,
+	0x64, 0x5f, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x5f, 0x72, 0x65, 0x67, 0x65, 0x78, 0x18, 0x06, 0x20,
+	0x01, 0x28, 0x09, 0x52, 0x14, 0x64, 0x69, 0x73, 0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x65, 0x64, 0x56,
+	0x61, 0x6c, 0x75, 0x65, 0x52, 0x65, 0x67, 0x65, 0x78, 0x12, 0x20, 0x0a, 0x0b, 0x64, 0x65, 0x70,
+	0x72, 0x65, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x18, 0x07, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0b,
+	0x64, 0x65, 0x70, 0x72, 0x65, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x12, 0x27, 0x0a, 0x0f, 0x64,
+	0x65, 0x70, 0x72, 0x65, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x5f, 0x75, 0x72, 0x6c, 0x18, 0x08,
+	0x20, 0x01, 0x28, 0x09, 0x52, 0x0e, 0x64, 0x65, 0x70, 0x72, 0x65, 0x63, 0x61, 0x74, 0x69, 0x6f,
+	0x6e, 0x55, 0x72, 0x6c, 0x12, 0x46, 0x0a, 0x0f, 0x63, 0x73, 0x73, 0x5f, 0x64, 0x65, 0x63, 0x6c,
+	0x61, 0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x18, 0x14, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x1d, 0x2e,
+	0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x43, 0x73,
+	0x73, 0x44, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x52, 0x0e, 0x63, 0x73,
+	0x73, 0x44, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x12, 0x59, 0x0a, 0x0c,
+	0x64, 0x69, 0x73, 0x70, 0x61, 0x74, 0x63, 0x68, 0x5f, 0x6b, 0x65, 0x79, 0x18, 0x0d, 0x20, 0x01,
+	0x28, 0x0e, 0x32, 0x27, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74,
+	0x6f, 0x72, 0x2e, 0x41, 0x74, 0x74, 0x72, 0x53, 0x70, 0x65, 0x63, 0x2e, 0x44, 0x69, 0x73, 0x70,
+	0x61, 0x74, 0x63, 0x68, 0x4b, 0x65, 0x79, 0x54, 0x79, 0x70, 0x65, 0x3a, 0x0d, 0x4e, 0x4f, 0x4e,
+	0x45, 0x5f, 0x44, 0x49, 0x53, 0x50, 0x41, 0x54, 0x43, 0x48, 0x52, 0x0b, 0x64, 0x69, 0x73, 0x70,
+	0x61, 0x74, 0x63, 0x68, 0x4b, 0x65, 0x79, 0x12, 0x21, 0x0a, 0x08, 0x69, 0x6d, 0x70, 0x6c, 0x69,
+	0x63, 0x69, 0x74, 0x18, 0x11, 0x20, 0x01, 0x28, 0x08, 0x3a, 0x05, 0x66, 0x61, 0x6c, 0x73, 0x65,
+	0x52, 0x08, 0x69, 0x6d, 0x70, 0x6c, 0x69, 0x63, 0x69, 0x74, 0x12, 0x2d, 0x0a, 0x12, 0x72, 0x65,
+	0x71, 0x75, 0x69, 0x72, 0x65, 0x73, 0x5f, 0x65, 0x78, 0x74, 0x65, 0x6e, 0x73, 0x69, 0x6f, 0x6e,
+	0x18, 0x13, 0x20, 0x03, 0x28, 0x09, 0x52, 0x11, 0x72, 0x65, 0x71, 0x75, 0x69, 0x72, 0x65, 0x73,
+	0x45, 0x78, 0x74, 0x65, 0x6e, 0x73, 0x69, 0x6f, 0x6e, 0x12, 0x4a, 0x0a, 0x11, 0x72, 0x65, 0x71,
+	0x75, 0x69, 0x72, 0x65, 0x73, 0x5f, 0x61, 0x6e, 0x63, 0x65, 0x73, 0x74, 0x6f, 0x72, 0x18, 0x16,
+	0x20, 0x01, 0x28, 0x0b, 0x32, 0x1d, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64,
+	0x61, 0x74, 0x6f, 0x72, 0x2e, 0x41, 0x6e, 0x63, 0x65, 0x73, 0x74, 0x6f, 0x72, 0x4d, 0x61, 0x72,
+	0x6b, 0x65, 0x72, 0x52, 0x10, 0x72, 0x65, 0x71, 0x75, 0x69, 0x72, 0x65, 0x73, 0x41, 0x6e, 0x63,
+	0x65, 0x73, 0x74, 0x6f, 0x72, 0x22, 0x46, 0x0a, 0x08, 0x56, 0x61, 0x6c, 0x75, 0x65, 0x53, 0x65,
+	0x74, 0x12, 0x14, 0x0a, 0x10, 0x55, 0x4e, 0x4b, 0x4e, 0x4f, 0x57, 0x4e, 0x5f, 0x56, 0x41, 0x4c,
+	0x55, 0x45, 0x53, 0x45, 0x54, 0x10, 0x00, 0x12, 0x10, 0x0a, 0x0c, 0x54, 0x45, 0x4d, 0x50, 0x4c,
+	0x41, 0x54, 0x45, 0x5f, 0x49, 0x44, 0x53, 0x10, 0x01, 0x12, 0x12, 0x0a, 0x0e, 0x41, 0x4d, 0x50,
+	0x5f, 0x53, 0x43, 0x52, 0x49, 0x50, 0x54, 0x5f, 0x49, 0x44, 0x53, 0x10, 0x02, 0x22, 0x70, 0x0a,
+	0x0f, 0x44, 0x69, 0x73, 0x70, 0x61, 0x74, 0x63, 0x68, 0x4b, 0x65, 0x79, 0x54, 0x79, 0x70, 0x65,
+	0x12, 0x11, 0x0a, 0x0d, 0x4e, 0x4f, 0x4e, 0x45, 0x5f, 0x44, 0x49, 0x53, 0x50, 0x41, 0x54, 0x43,
+	0x48, 0x10, 0x00, 0x12, 0x11, 0x0a, 0x0d, 0x4e, 0x41, 0x4d, 0x45, 0x5f, 0x44, 0x49, 0x53, 0x50,
+	0x41, 0x54, 0x43, 0x48, 0x10, 0x01, 0x12, 0x17, 0x0a, 0x13, 0x4e, 0x41, 0x4d, 0x45, 0x5f, 0x56,
+	0x41, 0x4c, 0x55, 0x45, 0x5f, 0x44, 0x49, 0x53, 0x50, 0x41, 0x54, 0x43, 0x48, 0x10, 0x02, 0x12,
+	0x1e, 0x0a, 0x1a, 0x4e, 0x41, 0x4d, 0x45, 0x5f, 0x56, 0x41, 0x4c, 0x55, 0x45, 0x5f, 0x50, 0x41,
+	0x52, 0x45, 0x4e, 0x54, 0x5f, 0x44, 0x49, 0x53, 0x50, 0x41, 0x54, 0x43, 0x48, 0x10, 0x03, 0x22,
+	0x4d, 0x0a, 0x08, 0x41, 0x74, 0x74, 0x72, 0x4c, 0x69, 0x73, 0x74, 0x12, 0x12, 0x0a, 0x04, 0x6e,
+	0x61, 0x6d, 0x65, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x12,
+	0x2d, 0x0a, 0x05, 0x61, 0x74, 0x74, 0x72, 0x73, 0x18, 0x02, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x17,
+	0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x41,
+	0x74, 0x74, 0x72, 0x53, 0x70, 0x65, 0x63, 0x52, 0x05, 0x61, 0x74, 0x74, 0x72, 0x73, 0x22, 0x39,
+	0x0a, 0x11, 0x44, 0x65, 0x73, 0x63, 0x65, 0x6e, 0x64, 0x61, 0x6e, 0x74, 0x54, 0x61, 0x67, 0x4c,
+	0x69, 0x73, 0x74, 0x12, 0x12, 0x0a, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x18, 0x01, 0x20, 0x01, 0x28,
+	0x09, 0x52, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x12, 0x10, 0x0a, 0x03, 0x74, 0x61, 0x67, 0x18, 0x02,
+	0x20, 0x03, 0x28, 0x09, 0x52, 0x03, 0x74, 0x61, 0x67, 0x22, 0x66, 0x0a, 0x0f, 0x44, 0x65, 0x63,
+	0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x4c, 0x69, 0x73, 0x74, 0x12, 0x12, 0x0a, 0x04,
+	0x6e, 0x61, 0x6d, 0x65, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x04, 0x6e, 0x61, 0x6d, 0x65,
+	0x12, 0x3f, 0x0a, 0x0b, 0x64, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x18,
+	0x02, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x1d, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69,
+	0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x43, 0x73, 0x73, 0x44, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61,
+	0x74, 0x69, 0x6f, 0x6e, 0x52, 0x0b, 0x64, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f,
+	0x6e, 0x22, 0x51, 0x0a, 0x14, 0x44, 0x69, 0x73, 0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x65, 0x64, 0x43,
+	0x44, 0x61, 0x74, 0x61, 0x52, 0x65, 0x67, 0x65, 0x78, 0x12, 0x14, 0x0a, 0x05, 0x72, 0x65, 0x67,
+	0x65, 0x78, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x05, 0x72, 0x65, 0x67, 0x65, 0x78, 0x12,
+	0x23, 0x0a, 0x0d, 0x65, 0x72, 0x72, 0x6f, 0x72, 0x5f, 0x6d, 0x65, 0x73, 0x73, 0x61, 0x67, 0x65,
+	0x18, 0x02, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0c, 0x65, 0x72, 0x72, 0x6f, 0x72, 0x4d, 0x65, 0x73,
+	0x73, 0x61, 0x67, 0x65, 0x22, 0x6d, 0x0a, 0x0e, 0x4d, 0x65, 0x64, 0x69, 0x61, 0x51, 0x75, 0x65,
+	0x72, 0x79, 0x53, 0x70, 0x65, 0x63, 0x12, 0x2d, 0x0a, 0x0f, 0x69, 0x73, 0x73, 0x75, 0x65, 0x73,
+	0x5f, 0x61, 0x73, 0x5f, 0x65, 0x72, 0x72, 0x6f, 0x72, 0x18, 0x01, 0x20, 0x01, 0x28, 0x08, 0x3a,
+	0x05, 0x66, 0x61, 0x6c, 0x73, 0x65, 0x52, 0x0d, 0x69, 0x73, 0x73, 0x75, 0x65, 0x73, 0x41, 0x73,
+	0x45, 0x72, 0x72, 0x6f, 0x72, 0x12, 0x12, 0x0a, 0x04, 0x74, 0x79, 0x70, 0x65, 0x18, 0x02, 0x20,
+	0x03, 0x28, 0x09, 0x52, 0x04, 0x74, 0x79, 0x70, 0x65, 0x12, 0x18, 0x0a, 0x07, 0x66, 0x65, 0x61,
+	0x74, 0x75, 0x72, 0x65, 0x18, 0x03, 0x20, 0x03, 0x28, 0x09, 0x52, 0x07, 0x66, 0x65, 0x61, 0x74,
+	0x75, 0x72, 0x65, 0x22, 0x7f, 0x0a, 0x0c, 0x53, 0x65, 0x6c, 0x65, 0x63, 0x74, 0x6f, 0x72, 0x53,
+	0x70, 0x65, 0x63, 0x12, 0x25, 0x0a, 0x0e, 0x61, 0x74, 0x74, 0x72, 0x69, 0x62, 0x75, 0x74, 0x65,
+	0x5f, 0x6e, 0x61, 0x6d, 0x65, 0x18, 0x01, 0x20, 0x03, 0x28, 0x09, 0x52, 0x0d, 0x61, 0x74, 0x74,
+	0x72, 0x69, 0x62, 0x75, 0x74, 0x65, 0x4e, 0x61, 0x6d, 0x65, 0x12, 0x21, 0x0a, 0x0c, 0x70, 0x73,
+	0x65, 0x75, 0x64, 0x6f, 0x5f, 0x63, 0x6c, 0x61, 0x73, 0x73, 0x18, 0x02, 0x20, 0x03, 0x28, 0x09,
+	0x52, 0x0b, 0x70, 0x73, 0x65, 0x75, 0x64, 0x6f, 0x43, 0x6c, 0x61, 0x73, 0x73, 0x12, 0x25, 0x0a,
+	0x0e, 0x70, 0x73, 0x65, 0x75, 0x64, 0x6f, 0x5f, 0x65, 0x6c, 0x65, 0x6d, 0x65, 0x6e, 0x74, 0x18,
+	0x03, 0x20, 0x03, 0x28, 0x09, 0x52, 0x0d, 0x70, 0x73, 0x65, 0x75, 0x64, 0x6f, 0x45, 0x6c, 0x65,
+	0x6d, 0x65, 0x6e, 0x74, 0x22, 0x69, 0x0a, 0x0a, 0x41, 0x74, 0x52, 0x75, 0x6c, 0x65, 0x53, 0x70,
+	0x65, 0x63, 0x12, 0x12, 0x0a, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09,
+	0x52, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x12, 0x47, 0x0a, 0x10, 0x6d, 0x65, 0x64, 0x69, 0x61, 0x5f,
+	0x71, 0x75, 0x65, 0x72, 0x79, 0x5f, 0x73, 0x70, 0x65, 0x63, 0x18, 0x03, 0x20, 0x01, 0x28, 0x0b,
+	0x32, 0x1d, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72,
+	0x2e, 0x4d, 0x65, 0x64, 0x69, 0x61, 0x51, 0x75, 0x65, 0x72, 0x79, 0x53, 0x70, 0x65, 0x63, 0x52,
+	0x0e, 0x6d, 0x65, 0x64, 0x69, 0x61, 0x51, 0x75, 0x65, 0x72, 0x79, 0x53, 0x70, 0x65, 0x63, 0x22,
+	0xb4, 0x02, 0x0a, 0x07, 0x43, 0x73, 0x73, 0x53, 0x70, 0x65, 0x63, 0x12, 0x3b, 0x0a, 0x0c, 0x61,
+	0x74, 0x5f, 0x72, 0x75, 0x6c, 0x65, 0x5f, 0x73, 0x70, 0x65, 0x63, 0x18, 0x01, 0x20, 0x03, 0x28,
+	0x0b, 0x32, 0x19, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f,
+	0x72, 0x2e, 0x41, 0x74, 0x52, 0x75, 0x6c, 0x65, 0x53, 0x70, 0x65, 0x63, 0x52, 0x0a, 0x61, 0x74,
+	0x52, 0x75, 0x6c, 0x65, 0x53, 0x70, 0x65, 0x63, 0x12, 0x29, 0x0a, 0x10, 0x76, 0x61, 0x6c, 0x69,
+	0x64, 0x61, 0x74, 0x65, 0x5f, 0x61, 0x6d, 0x70, 0x34, 0x61, 0x64, 0x73, 0x18, 0x05, 0x20, 0x01,
+	0x28, 0x08, 0x52, 0x0f, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x65, 0x41, 0x6d, 0x70, 0x34,
+	0x61, 0x64, 0x73, 0x12, 0x2d, 0x0a, 0x12, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x65, 0x5f,
+	0x6b, 0x65, 0x79, 0x66, 0x72, 0x61, 0x6d, 0x65, 0x73, 0x18, 0x06, 0x20, 0x01, 0x28, 0x08, 0x52,
+	0x11, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x65, 0x4b, 0x65, 0x79, 0x66, 0x72, 0x61, 0x6d,
+	0x65, 0x73, 0x12, 0x20, 0x0a, 0x0b, 0x64, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f,
+	0x6e, 0x18, 0x07, 0x20, 0x03, 0x28, 0x09, 0x52, 0x0b, 0x64, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61,
+	0x74, 0x69, 0x6f, 0x6e, 0x12, 0x2e, 0x0a, 0x0f, 0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x5f, 0x69, 0x6d,
+	0x70, 0x6f, 0x72, 0x74, 0x61, 0x6e, 0x74, 0x18, 0x08, 0x20, 0x01, 0x28, 0x08, 0x3a, 0x05, 0x66,
+	0x61, 0x6c, 0x73, 0x65, 0x52, 0x0e, 0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x49, 0x6d, 0x70, 0x6f, 0x72,
+	0x74, 0x61, 0x6e, 0x74, 0x12, 0x40, 0x0a, 0x0d, 0x73, 0x65, 0x6c, 0x65, 0x63, 0x74, 0x6f, 0x72,
+	0x5f, 0x73, 0x70, 0x65, 0x63, 0x18, 0x09, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x1b, 0x2e, 0x61, 0x6d,
+	0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x53, 0x65, 0x6c, 0x65,
+	0x63, 0x74, 0x6f, 0x72, 0x53, 0x70, 0x65, 0x63, 0x52, 0x0c, 0x73, 0x65, 0x6c, 0x65, 0x63, 0x74,
+	0x6f, 0x72, 0x53, 0x70, 0x65, 0x63, 0x22, 0xfe, 0x02, 0x0a, 0x09, 0x43, 0x64, 0x61, 0x74, 0x61,
+	0x53, 0x70, 0x65, 0x63, 0x12, 0x1f, 0x0a, 0x09, 0x6d, 0x61, 0x78, 0x5f, 0x62, 0x79, 0x74, 0x65,
+	0x73, 0x18, 0x01, 0x20, 0x01, 0x28, 0x05, 0x3a, 0x02, 0x2d, 0x32, 0x52, 0x08, 0x6d, 0x61, 0x78,
+	0x42, 0x79, 0x74, 0x65, 0x73, 0x12, 0x2b, 0x0a, 0x12, 0x6d, 0x61, 0x78, 0x5f, 0x62, 0x79, 0x74,
+	0x65, 0x73, 0x5f, 0x73, 0x70, 0x65, 0x63, 0x5f, 0x75, 0x72, 0x6c, 0x18, 0x02, 0x20, 0x01, 0x28,
+	0x09, 0x52, 0x0f, 0x6d, 0x61, 0x78, 0x42, 0x79, 0x74, 0x65, 0x73, 0x53, 0x70, 0x65, 0x63, 0x55,
+	0x72, 0x6c, 0x12, 0x27, 0x0a, 0x0f, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x5f,
+	0x63, 0x64, 0x61, 0x74, 0x61, 0x18, 0x03, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0e, 0x6d, 0x61, 0x6e,
+	0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x43, 0x64, 0x61, 0x74, 0x61, 0x12, 0x1f, 0x0a, 0x0b, 0x63,
+	0x64, 0x61, 0x74, 0x61, 0x5f, 0x72, 0x65, 0x67, 0x65, 0x78, 0x18, 0x06, 0x20, 0x01, 0x28, 0x09,
+	0x52, 0x0a, 0x63, 0x64, 0x61, 0x74, 0x61, 0x52, 0x65, 0x67, 0x65, 0x78, 0x12, 0x31, 0x0a, 0x08,
+	0x63, 0x73, 0x73, 0x5f, 0x73, 0x70, 0x65, 0x63, 0x18, 0x07, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x16,
+	0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x43,
+	0x73, 0x73, 0x53, 0x70, 0x65, 0x63, 0x52, 0x07, 0x63, 0x73, 0x73, 0x53, 0x70, 0x65, 0x63, 0x12,
+	0x27, 0x0a, 0x0f, 0x77, 0x68, 0x69, 0x74, 0x65, 0x73, 0x70, 0x61, 0x63, 0x65, 0x5f, 0x6f, 0x6e,
+	0x6c, 0x79, 0x18, 0x08, 0x20, 0x01, 0x28, 0x08, 0x52, 0x0e, 0x77, 0x68, 0x69, 0x74, 0x65, 0x73,
+	0x70, 0x61, 0x63, 0x65, 0x4f, 0x6e, 0x6c, 0x79, 0x12, 0x59, 0x0a, 0x16, 0x64, 0x69, 0x73, 0x61,
+	0x6c, 0x6c, 0x6f, 0x77, 0x65, 0x64, 0x5f, 0x63, 0x64, 0x61, 0x74, 0x61, 0x5f, 0x72, 0x65, 0x67,
+	0x65, 0x78, 0x18, 0x04, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x23, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76,
+	0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x44, 0x69, 0x73, 0x61, 0x6c, 0x6c, 0x6f,
+	0x77, 0x65, 0x64, 0x43, 0x44, 0x61, 0x74, 0x61, 0x52, 0x65, 0x67, 0x65, 0x78, 0x52, 0x14, 0x64,
+	0x69, 0x73, 0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x65, 0x64, 0x43, 0x64, 0x61, 0x74, 0x61, 0x52, 0x65,
+	0x67, 0x65, 0x78, 0x12, 0x22, 0x0a, 0x0d, 0x64, 0x6f, 0x63, 0x5f, 0x63, 0x73, 0x73, 0x5f, 0x62,
+	0x79, 0x74, 0x65, 0x73, 0x18, 0x0b, 0x20, 0x01, 0x28, 0x08, 0x52, 0x0b, 0x64, 0x6f, 0x63, 0x43,
+	0x73, 0x73, 0x42, 0x79, 0x74, 0x65, 0x73, 0x22, 0xd9, 0x02, 0x0a, 0x09, 0x41, 0x6d, 0x70, 0x4c,
+	0x61, 0x79, 0x6f, 0x75, 0x74, 0x12, 0x4c, 0x0a, 0x11, 0x73, 0x75, 0x70, 0x70, 0x6f, 0x72, 0x74,
+	0x65, 0x64, 0x5f, 0x6c, 0x61, 0x79, 0x6f, 0x75, 0x74, 0x73, 0x18, 0x01, 0x20, 0x03, 0x28, 0x0e,
+	0x32, 0x1f, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72,
+	0x2e, 0x41, 0x6d, 0x70, 0x4c, 0x61, 0x79, 0x6f, 0x75, 0x74, 0x2e, 0x4c, 0x61, 0x79, 0x6f, 0x75,
+	0x74, 0x52, 0x10, 0x73, 0x75, 0x70, 0x70, 0x6f, 0x72, 0x74, 0x65, 0x64, 0x4c, 0x61, 0x79, 0x6f,
+	0x75, 0x74, 0x73, 0x12, 0x32, 0x0a, 0x15, 0x64, 0x65, 0x66, 0x69, 0x6e, 0x65, 0x73, 0x5f, 0x64,
+	0x65, 0x66, 0x61, 0x75, 0x6c, 0x74, 0x5f, 0x77, 0x69, 0x64, 0x74, 0x68, 0x18, 0x02, 0x20, 0x01,
+	0x28, 0x08, 0x52, 0x13, 0x64, 0x65, 0x66, 0x69, 0x6e, 0x65, 0x73, 0x44, 0x65, 0x66, 0x61, 0x75,
+	0x6c, 0x74, 0x57, 0x69, 0x64, 0x74, 0x68, 0x12, 0x34, 0x0a, 0x16, 0x64, 0x65, 0x66, 0x69, 0x6e,
+	0x65, 0x73, 0x5f, 0x64, 0x65, 0x66, 0x61, 0x75, 0x6c, 0x74, 0x5f, 0x68, 0x65, 0x69, 0x67, 0x68,
+	0x74, 0x18, 0x03, 0x20, 0x01, 0x28, 0x08, 0x52, 0x14, 0x64, 0x65, 0x66, 0x69, 0x6e, 0x65, 0x73,
+	0x44, 0x65, 0x66, 0x61, 0x75, 0x6c, 0x74, 0x48, 0x65, 0x69, 0x67, 0x68, 0x74, 0x22, 0x93, 0x01,
+	0x0a, 0x06, 0x4c, 0x61, 0x79, 0x6f, 0x75, 0x74, 0x12, 0x0d, 0x0a, 0x09, 0x43, 0x4f, 0x4e, 0x54,
+	0x41, 0x49, 0x4e, 0x45, 0x52, 0x10, 0x05, 0x12, 0x08, 0x0a, 0x04, 0x46, 0x49, 0x4c, 0x4c, 0x10,
+	0x06, 0x12, 0x09, 0x0a, 0x05, 0x46, 0x49, 0x58, 0x45, 0x44, 0x10, 0x02, 0x12, 0x10, 0x0a, 0x0c,
+	0x46, 0x49, 0x58, 0x45, 0x44, 0x5f, 0x48, 0x45, 0x49, 0x47, 0x48, 0x54, 0x10, 0x03, 0x12, 0x0d,
+	0x0a, 0x09, 0x46, 0x4c, 0x45, 0x58, 0x5f, 0x49, 0x54, 0x45, 0x4d, 0x10, 0x07, 0x12, 0x09, 0x0a,
+	0x05, 0x46, 0x4c, 0x55, 0x49, 0x44, 0x10, 0x08, 0x12, 0x0d, 0x0a, 0x09, 0x49, 0x4e, 0x54, 0x52,
+	0x49, 0x4e, 0x53, 0x49, 0x43, 0x10, 0x09, 0x12, 0x0d, 0x0a, 0x09, 0x4e, 0x4f, 0x44, 0x49, 0x53,
+	0x50, 0x4c, 0x41, 0x59, 0x10, 0x01, 0x12, 0x0e, 0x0a, 0x0a, 0x52, 0x45, 0x53, 0x50, 0x4f, 0x4e,
+	0x53, 0x49, 0x56, 0x45, 0x10, 0x04, 0x12, 0x0b, 0x0a, 0x07, 0x55, 0x4e, 0x4b, 0x4e, 0x4f, 0x57,
+	0x4e, 0x10, 0x00, 0x22, 0x75, 0x0a, 0x0e, 0x41, 0x6e, 0x63, 0x65, 0x73, 0x74, 0x6f, 0x72, 0x4d,
+	0x61, 0x72, 0x6b, 0x65, 0x72, 0x12, 0x3c, 0x0a, 0x06, 0x6d, 0x61, 0x72, 0x6b, 0x65, 0x72, 0x18,
+	0x01, 0x20, 0x03, 0x28, 0x0e, 0x32, 0x24, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69,
+	0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x41, 0x6e, 0x63, 0x65, 0x73, 0x74, 0x6f, 0x72, 0x4d, 0x61,
+	0x72, 0x6b, 0x65, 0x72, 0x2e, 0x4d, 0x61, 0x72, 0x6b, 0x65, 0x72, 0x52, 0x06, 0x6d, 0x61, 0x72,
+	0x6b, 0x65, 0x72, 0x22, 0x25, 0x0a, 0x06, 0x4d, 0x61, 0x72, 0x6b, 0x65, 0x72, 0x12, 0x0b, 0x0a,
+	0x07, 0x55, 0x4e, 0x4b, 0x4e, 0x4f, 0x57, 0x4e, 0x10, 0x00, 0x12, 0x0e, 0x0a, 0x0a, 0x41, 0x55,
+	0x54, 0x4f, 0x53, 0x43, 0x52, 0x4f, 0x4c, 0x4c, 0x10, 0x01, 0x22, 0xfc, 0x01, 0x0a, 0x0c, 0x43,
+	0x68, 0x69, 0x6c, 0x64, 0x54, 0x61, 0x67, 0x53, 0x70, 0x65, 0x63, 0x12, 0x3b, 0x0a, 0x18, 0x6d,
+	0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x5f, 0x6e, 0x75, 0x6d, 0x5f, 0x63, 0x68, 0x69,
+	0x6c, 0x64, 0x5f, 0x74, 0x61, 0x67, 0x73, 0x18, 0x01, 0x20, 0x01, 0x28, 0x05, 0x3a, 0x02, 0x2d,
+	0x31, 0x52, 0x15, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x4e, 0x75, 0x6d, 0x43,
+	0x68, 0x69, 0x6c, 0x64, 0x54, 0x61, 0x67, 0x73, 0x12, 0x3a, 0x0a, 0x1a, 0x66, 0x69, 0x72, 0x73,
+	0x74, 0x5f, 0x63, 0x68, 0x69, 0x6c, 0x64, 0x5f, 0x74, 0x61, 0x67, 0x5f, 0x6e, 0x61, 0x6d, 0x65,
+	0x5f, 0x6f, 0x6e, 0x65, 0x6f, 0x66, 0x18, 0x02, 0x20, 0x03, 0x28, 0x09, 0x52, 0x16, 0x66, 0x69,
+	0x72, 0x73, 0x74, 0x43, 0x68, 0x69, 0x6c, 0x64, 0x54, 0x61, 0x67, 0x4e, 0x61, 0x6d, 0x65, 0x4f,
+	0x6e, 0x65, 0x6f, 0x66, 0x12, 0x2f, 0x0a, 0x14, 0x63, 0x68, 0x69, 0x6c, 0x64, 0x5f, 0x74, 0x61,
+	0x67, 0x5f, 0x6e, 0x61, 0x6d, 0x65, 0x5f, 0x6f, 0x6e, 0x65, 0x6f, 0x66, 0x18, 0x03, 0x20, 0x03,
+	0x28, 0x09, 0x52, 0x11, 0x63, 0x68, 0x69, 0x6c, 0x64, 0x54, 0x61, 0x67, 0x4e, 0x61, 0x6d, 0x65,
+	0x4f, 0x6e, 0x65, 0x6f, 0x66, 0x12, 0x42, 0x0a, 0x1c, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f,
+	0x72, 0x79, 0x5f, 0x6d, 0x69, 0x6e, 0x5f, 0x6e, 0x75, 0x6d, 0x5f, 0x63, 0x68, 0x69, 0x6c, 0x64,
+	0x5f, 0x74, 0x61, 0x67, 0x73, 0x18, 0x04, 0x20, 0x01, 0x28, 0x05, 0x3a, 0x02, 0x2d, 0x31, 0x52,
+	0x18, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x4d, 0x69, 0x6e, 0x4e, 0x75, 0x6d,
+	0x43, 0x68, 0x69, 0x6c, 0x64, 0x54, 0x61, 0x67, 0x73, 0x22, 0x6a, 0x0a, 0x0e, 0x52, 0x65, 0x66,
+	0x65, 0x72, 0x65, 0x6e, 0x63, 0x65, 0x50, 0x6f, 0x69, 0x6e, 0x74, 0x12, 0x22, 0x0a, 0x0d, 0x74,
+	0x61, 0x67, 0x5f, 0x73, 0x70, 0x65, 0x63, 0x5f, 0x6e, 0x61, 0x6d, 0x65, 0x18, 0x01, 0x20, 0x01,
+	0x28, 0x09, 0x52, 0x0b, 0x74, 0x61, 0x67, 0x53, 0x70, 0x65, 0x63, 0x4e, 0x61, 0x6d, 0x65, 0x12,
+	0x1c, 0x0a, 0x09, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x18, 0x02, 0x20, 0x01,
+	0x28, 0x08, 0x52, 0x09, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x12, 0x16, 0x0a,
+	0x06, 0x75, 0x6e, 0x69, 0x71, 0x75, 0x65, 0x18, 0x03, 0x20, 0x01, 0x28, 0x08, 0x52, 0x06, 0x75,
+	0x6e, 0x69, 0x71, 0x75, 0x65, 0x22, 0xb8, 0x04, 0x0a, 0x0d, 0x45, 0x78, 0x74, 0x65, 0x6e, 0x73,
+	0x69, 0x6f, 0x6e, 0x53, 0x70, 0x65, 0x63, 0x12, 0x12, 0x0a, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x18,
+	0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x04, 0x6e, 0x61, 0x6d, 0x65, 0x12, 0x18, 0x0a, 0x07, 0x76,
+	0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x18, 0x02, 0x20, 0x03, 0x28, 0x09, 0x52, 0x07, 0x76, 0x65,
+	0x72, 0x73, 0x69, 0x6f, 0x6e, 0x12, 0x21, 0x0a, 0x0c, 0x76, 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e,
+	0x5f, 0x6e, 0x61, 0x6d, 0x65, 0x18, 0x09, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0b, 0x76, 0x65, 0x72,
+	0x73, 0x69, 0x6f, 0x6e, 0x4e, 0x61, 0x6d, 0x65, 0x12, 0x2d, 0x0a, 0x12, 0x64, 0x65, 0x70, 0x72,
+	0x65, 0x63, 0x61, 0x74, 0x65, 0x64, 0x5f, 0x76, 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x18, 0x03,
+	0x20, 0x03, 0x28, 0x09, 0x52, 0x11, 0x64, 0x65, 0x70, 0x72, 0x65, 0x63, 0x61, 0x74, 0x65, 0x64,
+	0x56, 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x12, 0x61, 0x0a, 0x0e, 0x65, 0x78, 0x74, 0x65, 0x6e,
+	0x73, 0x69, 0x6f, 0x6e, 0x5f, 0x74, 0x79, 0x70, 0x65, 0x18, 0x08, 0x20, 0x01, 0x28, 0x0e, 0x32,
+	0x2a, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e,
+	0x45, 0x78, 0x74, 0x65, 0x6e, 0x73, 0x69, 0x6f, 0x6e, 0x53, 0x70, 0x65, 0x63, 0x2e, 0x45, 0x78,
+	0x74, 0x65, 0x6e, 0x73, 0x69, 0x6f, 0x6e, 0x54, 0x79, 0x70, 0x65, 0x3a, 0x0e, 0x43, 0x55, 0x53,
+	0x54, 0x4f, 0x4d, 0x5f, 0x45, 0x4c, 0x45, 0x4d, 0x45, 0x4e, 0x54, 0x52, 0x0d, 0x65, 0x78, 0x74,
+	0x65, 0x6e, 0x73, 0x69, 0x6f, 0x6e, 0x54, 0x79, 0x70, 0x65, 0x12, 0x45, 0x0a, 0x1b, 0x64, 0x65,
+	0x70, 0x72, 0x65, 0x63, 0x61, 0x74, 0x65, 0x64, 0x5f, 0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x5f, 0x64,
+	0x75, 0x70, 0x6c, 0x69, 0x63, 0x61, 0x74, 0x65, 0x73, 0x18, 0x06, 0x20, 0x01, 0x28, 0x08, 0x3a,
+	0x05, 0x66, 0x61, 0x6c, 0x73, 0x65, 0x52, 0x19, 0x64, 0x65, 0x70, 0x72, 0x65, 0x63, 0x61, 0x74,
+	0x65, 0x64, 0x41, 0x6c, 0x6c, 0x6f, 0x77, 0x44, 0x75, 0x70, 0x6c, 0x69, 0x63, 0x61, 0x74, 0x65,
+	0x73, 0x12, 0x64, 0x0a, 0x0e, 0x72, 0x65, 0x71, 0x75, 0x69, 0x72, 0x65, 0x73, 0x5f, 0x75, 0x73,
+	0x61, 0x67, 0x65, 0x18, 0x07, 0x20, 0x01, 0x28, 0x0e, 0x32, 0x36, 0x2e, 0x61, 0x6d, 0x70, 0x2e,
+	0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x45, 0x78, 0x74, 0x65, 0x6e, 0x73,
+	0x69, 0x6f, 0x6e, 0x53, 0x70, 0x65, 0x63, 0x2e, 0x45, 0x78, 0x74, 0x65, 0x6e, 0x73, 0x69, 0x6f,
+	0x6e, 0x55, 0x73, 0x61, 0x67, 0x65, 0x52, 0x65, 0x71, 0x75, 0x69, 0x72, 0x65, 0x6d, 0x65, 0x6e,
+	0x74, 0x3a, 0x05, 0x45, 0x52, 0x52, 0x4f, 0x52, 0x52, 0x0d, 0x72, 0x65, 0x71, 0x75, 0x69, 0x72,
+	0x65, 0x73, 0x55, 0x73, 0x61, 0x67, 0x65, 0x22, 0x57, 0x0a, 0x0d, 0x45, 0x78, 0x74, 0x65, 0x6e,
+	0x73, 0x69, 0x6f, 0x6e, 0x54, 0x79, 0x70, 0x65, 0x12, 0x0b, 0x0a, 0x07, 0x55, 0x4e, 0x4b, 0x4e,
+	0x4f, 0x57, 0x4e, 0x10, 0x00, 0x12, 0x12, 0x0a, 0x0e, 0x43, 0x55, 0x53, 0x54, 0x4f, 0x4d, 0x5f,
+	0x45, 0x4c, 0x45, 0x4d, 0x45, 0x4e, 0x54, 0x10, 0x01, 0x12, 0x13, 0x0a, 0x0f, 0x43, 0x55, 0x53,
+	0x54, 0x4f, 0x4d, 0x5f, 0x54, 0x45, 0x4d, 0x50, 0x4c, 0x41, 0x54, 0x45, 0x10, 0x02, 0x12, 0x10,
+	0x0a, 0x0c, 0x48, 0x4f, 0x53, 0x54, 0x5f, 0x53, 0x45, 0x52, 0x56, 0x49, 0x43, 0x45, 0x10, 0x03,
+	0x22, 0x3e, 0x0a, 0x19, 0x45, 0x78, 0x74, 0x65, 0x6e, 0x73, 0x69, 0x6f, 0x6e, 0x55, 0x73, 0x61,
+	0x67, 0x65, 0x52, 0x65, 0x71, 0x75, 0x69, 0x72, 0x65, 0x6d, 0x65, 0x6e, 0x74, 0x12, 0x09, 0x0a,
+	0x05, 0x45, 0x52, 0x52, 0x4f, 0x52, 0x10, 0x01, 0x12, 0x0c, 0x0a, 0x08, 0x45, 0x58, 0x45, 0x4d,
+	0x50, 0x54, 0x45, 0x44, 0x10, 0x02, 0x12, 0x08, 0x0a, 0x04, 0x4e, 0x4f, 0x4e, 0x45, 0x10, 0x03,
+	0x22, 0x5d, 0x0a, 0x0a, 0x48, 0x74, 0x6d, 0x6c, 0x46, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x22, 0x4f,
+	0x0a, 0x04, 0x43, 0x6f, 0x64, 0x65, 0x12, 0x10, 0x0a, 0x0c, 0x55, 0x4e, 0x4b, 0x4e, 0x4f, 0x57,
+	0x4e, 0x5f, 0x43, 0x4f, 0x44, 0x45, 0x10, 0x00, 0x12, 0x07, 0x0a, 0x03, 0x41, 0x4d, 0x50, 0x10,
+	0x01, 0x12, 0x0b, 0x0a, 0x07, 0x41, 0x4d, 0x50, 0x34, 0x41, 0x44, 0x53, 0x10, 0x02, 0x12, 0x0d,
+	0x0a, 0x09, 0x41, 0x4d, 0x50, 0x34, 0x45, 0x4d, 0x41, 0x49, 0x4c, 0x10, 0x03, 0x12, 0x10, 0x0a,
+	0x0c, 0x45, 0x58, 0x50, 0x45, 0x52, 0x49, 0x4d, 0x45, 0x4e, 0x54, 0x41, 0x4c, 0x10, 0x04, 0x22,
+	0xbb, 0x0d, 0x0a, 0x07, 0x54, 0x61, 0x67, 0x53, 0x70, 0x65, 0x63, 0x12, 0x3f, 0x0a, 0x0b, 0x68,
+	0x74, 0x6d, 0x6c, 0x5f, 0x66, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x18, 0x15, 0x20, 0x03, 0x28, 0x0e,
+	0x32, 0x1e, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72,
+	0x2e, 0x48, 0x74, 0x6d, 0x6c, 0x46, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x2e, 0x43, 0x6f, 0x64, 0x65,
+	0x52, 0x0a, 0x68, 0x74, 0x6d, 0x6c, 0x46, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x12, 0x1d, 0x0a, 0x0a,
+	0x65, 0x6e, 0x61, 0x62, 0x6c, 0x65, 0x64, 0x5f, 0x62, 0x79, 0x18, 0x23, 0x20, 0x03, 0x28, 0x09,
+	0x52, 0x09, 0x65, 0x6e, 0x61, 0x62, 0x6c, 0x65, 0x64, 0x42, 0x79, 0x12, 0x1f, 0x0a, 0x0b, 0x64,
+	0x69, 0x73, 0x61, 0x62, 0x6c, 0x65, 0x64, 0x5f, 0x62, 0x79, 0x18, 0x24, 0x20, 0x03, 0x28, 0x09,
+	0x52, 0x0a, 0x64, 0x69, 0x73, 0x61, 0x62, 0x6c, 0x65, 0x64, 0x42, 0x79, 0x12, 0x19, 0x0a, 0x08,
+	0x74, 0x61, 0x67, 0x5f, 0x6e, 0x61, 0x6d, 0x65, 0x18, 0x01, 0x20, 0x01, 0x28, 0x09, 0x52, 0x07,
+	0x74, 0x61, 0x67, 0x4e, 0x61, 0x6d, 0x65, 0x12, 0x1b, 0x0a, 0x09, 0x73, 0x70, 0x65, 0x63, 0x5f,
+	0x6e, 0x61, 0x6d, 0x65, 0x18, 0x02, 0x20, 0x01, 0x28, 0x09, 0x52, 0x08, 0x73, 0x70, 0x65, 0x63,
+	0x4e, 0x61, 0x6d, 0x65, 0x12, 0x29, 0x0a, 0x10, 0x64, 0x65, 0x73, 0x63, 0x72, 0x69, 0x70, 0x74,
+	0x69, 0x76, 0x65, 0x5f, 0x6e, 0x61, 0x6d, 0x65, 0x18, 0x27, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0f,
+	0x64, 0x65, 0x73, 0x63, 0x72, 0x69, 0x70, 0x74, 0x69, 0x76, 0x65, 0x4e, 0x61, 0x6d, 0x65, 0x12,
+	0x42, 0x0a, 0x08, 0x6e, 0x61, 0x6d, 0x65, 0x64, 0x5f, 0x69, 0x64, 0x18, 0x21, 0x20, 0x01, 0x28,
+	0x0e, 0x32, 0x1e, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f,
+	0x72, 0x2e, 0x54, 0x61, 0x67, 0x53, 0x70, 0x65, 0x63, 0x2e, 0x4e, 0x61, 0x6d, 0x65, 0x64, 0x49,
+	0x64, 0x3a, 0x07, 0x4e, 0x4f, 0x54, 0x5f, 0x53, 0x45, 0x54, 0x52, 0x07, 0x6e, 0x61, 0x6d, 0x65,
+	0x64, 0x49, 0x64, 0x12, 0x43, 0x0a, 0x0e, 0x65, 0x78, 0x74, 0x65, 0x6e, 0x73, 0x69, 0x6f, 0x6e,
+	0x5f, 0x73, 0x70, 0x65, 0x63, 0x18, 0x1b, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x1c, 0x2e, 0x61, 0x6d,
+	0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x45, 0x78, 0x74, 0x65,
+	0x6e, 0x73, 0x69, 0x6f, 0x6e, 0x53, 0x70, 0x65, 0x63, 0x52, 0x0d, 0x65, 0x78, 0x74, 0x65, 0x6e,
+	0x73, 0x69, 0x6f, 0x6e, 0x53, 0x70, 0x65, 0x63, 0x12, 0x2d, 0x0a, 0x12, 0x72, 0x65, 0x71, 0x75,
+	0x69, 0x72, 0x65, 0x73, 0x5f, 0x65, 0x78, 0x74, 0x65, 0x6e, 0x73, 0x69, 0x6f, 0x6e, 0x18, 0x1c,
+	0x20, 0x03, 0x28, 0x09, 0x52, 0x11, 0x72, 0x65, 0x71, 0x75, 0x69, 0x72, 0x65, 0x73, 0x45, 0x78,
+	0x74, 0x65, 0x6e, 0x73, 0x69, 0x6f, 0x6e, 0x12, 0x1c, 0x0a, 0x09, 0x6d, 0x61, 0x6e, 0x64, 0x61,
+	0x74, 0x6f, 0x72, 0x79, 0x18, 0x03, 0x20, 0x01, 0x28, 0x08, 0x52, 0x09, 0x6d, 0x61, 0x6e, 0x64,
+	0x61, 0x74, 0x6f, 0x72, 0x79, 0x12, 0x35, 0x0a, 0x16, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f,
+	0x72, 0x79, 0x5f, 0x61, 0x6c, 0x74, 0x65, 0x72, 0x6e, 0x61, 0x74, 0x69, 0x76, 0x65, 0x73, 0x18,
+	0x04, 0x20, 0x01, 0x28, 0x09, 0x52, 0x15, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79,
+	0x41, 0x6c, 0x74, 0x65, 0x72, 0x6e, 0x61, 0x74, 0x69, 0x76, 0x65, 0x73, 0x12, 0x16, 0x0a, 0x06,
+	0x75, 0x6e, 0x69, 0x71, 0x75, 0x65, 0x18, 0x05, 0x20, 0x01, 0x28, 0x08, 0x52, 0x06, 0x75, 0x6e,
+	0x69, 0x71, 0x75, 0x65, 0x12, 0x25, 0x0a, 0x0e, 0x75, 0x6e, 0x69, 0x71, 0x75, 0x65, 0x5f, 0x77,
+	0x61, 0x72, 0x6e, 0x69, 0x6e, 0x67, 0x18, 0x19, 0x20, 0x01, 0x28, 0x08, 0x52, 0x0d, 0x75, 0x6e,
+	0x69, 0x71, 0x75, 0x65, 0x57, 0x61, 0x72, 0x6e, 0x69, 0x6e, 0x67, 0x12, 0x29, 0x0a, 0x10, 0x6d,
+	0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x5f, 0x70, 0x61, 0x72, 0x65, 0x6e, 0x74, 0x18,
+	0x06, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0f, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79,
+	0x50, 0x61, 0x72, 0x65, 0x6e, 0x74, 0x12, 0x2d, 0x0a, 0x12, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74,
+	0x6f, 0x72, 0x79, 0x5f, 0x61, 0x6e, 0x63, 0x65, 0x73, 0x74, 0x6f, 0x72, 0x18, 0x0f, 0x20, 0x01,
+	0x28, 0x09, 0x52, 0x11, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x79, 0x41, 0x6e, 0x63,
+	0x65, 0x73, 0x74, 0x6f, 0x72, 0x12, 0x57, 0x0a, 0x28, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f,
+	0x72, 0x79, 0x5f, 0x61, 0x6e, 0x63, 0x65, 0x73, 0x74, 0x6f, 0x72, 0x5f, 0x73, 0x75, 0x67, 0x67,
+	0x65, 0x73, 0x74, 0x65, 0x64, 0x5f, 0x61, 0x6c, 0x74, 0x65, 0x72, 0x6e, 0x61, 0x74, 0x69, 0x76,
+	0x65, 0x18, 0x10, 0x20, 0x01, 0x28, 0x09, 0x52, 0x25, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f,
+	0x72, 0x79, 0x41, 0x6e, 0x63, 0x65, 0x73, 0x74, 0x6f, 0x72, 0x53, 0x75, 0x67, 0x67, 0x65, 0x73,
+	0x74, 0x65, 0x64, 0x41, 0x6c, 0x74, 0x65, 0x72, 0x6e, 0x61, 0x74, 0x69, 0x76, 0x65, 0x12, 0x2f,
+	0x0a, 0x13, 0x64, 0x69, 0x73, 0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x65, 0x64, 0x5f, 0x61, 0x6e, 0x63,
+	0x65, 0x73, 0x74, 0x6f, 0x72, 0x18, 0x0d, 0x20, 0x03, 0x28, 0x09, 0x52, 0x12, 0x64, 0x69, 0x73,
+	0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x65, 0x64, 0x41, 0x6e, 0x63, 0x65, 0x73, 0x74, 0x6f, 0x72, 0x12,
+	0x2e, 0x0a, 0x13, 0x64, 0x65, 0x73, 0x63, 0x65, 0x6e, 0x64, 0x61, 0x6e, 0x74, 0x5f, 0x74, 0x61,
+	0x67, 0x5f, 0x6c, 0x69, 0x73, 0x74, 0x18, 0x1d, 0x20, 0x01, 0x28, 0x09, 0x52, 0x11, 0x64, 0x65,
+	0x73, 0x63, 0x65, 0x6e, 0x64, 0x61, 0x6e, 0x74, 0x54, 0x61, 0x67, 0x4c, 0x69, 0x73, 0x74, 0x12,
+	0x39, 0x0a, 0x19, 0x61, 0x6c, 0x73, 0x6f, 0x5f, 0x72, 0x65, 0x71, 0x75, 0x69, 0x72, 0x65, 0x73,
+	0x5f, 0x74, 0x61, 0x67, 0x5f, 0x77, 0x61, 0x72, 0x6e, 0x69, 0x6e, 0x67, 0x18, 0x16, 0x20, 0x03,
+	0x28, 0x09, 0x52, 0x16, 0x61, 0x6c, 0x73, 0x6f, 0x52, 0x65, 0x71, 0x75, 0x69, 0x72, 0x65, 0x73,
+	0x54, 0x61, 0x67, 0x57, 0x61, 0x72, 0x6e, 0x69, 0x6e, 0x67, 0x12, 0x1c, 0x0a, 0x09, 0x73, 0x61,
+	0x74, 0x69, 0x73, 0x66, 0x69, 0x65, 0x73, 0x18, 0x17, 0x20, 0x03, 0x28, 0x09, 0x52, 0x09, 0x73,
+	0x61, 0x74, 0x69, 0x73, 0x66, 0x69, 0x65, 0x73, 0x12, 0x1a, 0x0a, 0x08, 0x72, 0x65, 0x71, 0x75,
+	0x69, 0x72, 0x65, 0x73, 0x18, 0x18, 0x20, 0x03, 0x28, 0x09, 0x52, 0x08, 0x72, 0x65, 0x71, 0x75,
+	0x69, 0x72, 0x65, 0x73, 0x12, 0x1a, 0x0a, 0x08, 0x65, 0x78, 0x63, 0x6c, 0x75, 0x64, 0x65, 0x73,
+	0x18, 0x20, 0x20, 0x03, 0x28, 0x09, 0x52, 0x08, 0x65, 0x78, 0x63, 0x6c, 0x75, 0x64, 0x65, 0x73,
+	0x12, 0x20, 0x0a, 0x0b, 0x64, 0x65, 0x70, 0x72, 0x65, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x18,
+	0x11, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0b, 0x64, 0x65, 0x70, 0x72, 0x65, 0x63, 0x61, 0x74, 0x69,
+	0x6f, 0x6e, 0x12, 0x27, 0x0a, 0x0f, 0x64, 0x65, 0x70, 0x72, 0x65, 0x63, 0x61, 0x74, 0x69, 0x6f,
+	0x6e, 0x5f, 0x75, 0x72, 0x6c, 0x18, 0x12, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0e, 0x64, 0x65, 0x70,
+	0x72, 0x65, 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x55, 0x72, 0x6c, 0x12, 0x35, 0x0a, 0x13, 0x65,
+	0x78, 0x70, 0x6c, 0x69, 0x63, 0x69, 0x74, 0x5f, 0x61, 0x74, 0x74, 0x72, 0x73, 0x5f, 0x6f, 0x6e,
+	0x6c, 0x79, 0x18, 0x22, 0x20, 0x01, 0x28, 0x08, 0x3a, 0x05, 0x66, 0x61, 0x6c, 0x73, 0x65, 0x52,
+	0x11, 0x65, 0x78, 0x70, 0x6c, 0x69, 0x63, 0x69, 0x74, 0x41, 0x74, 0x74, 0x72, 0x73, 0x4f, 0x6e,
+	0x6c, 0x79, 0x12, 0x2d, 0x0a, 0x05, 0x61, 0x74, 0x74, 0x72, 0x73, 0x18, 0x07, 0x20, 0x03, 0x28,
+	0x0b, 0x32, 0x17, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f,
+	0x72, 0x2e, 0x41, 0x74, 0x74, 0x72, 0x53, 0x70, 0x65, 0x63, 0x52, 0x05, 0x61, 0x74, 0x74, 0x72,
+	0x73, 0x12, 0x1d, 0x0a, 0x0a, 0x61, 0x74, 0x74, 0x72, 0x5f, 0x6c, 0x69, 0x73, 0x74, 0x73, 0x18,
+	0x08, 0x20, 0x03, 0x28, 0x09, 0x52, 0x09, 0x61, 0x74, 0x74, 0x72, 0x4c, 0x69, 0x73, 0x74, 0x73,
+	0x12, 0x2e, 0x0a, 0x05, 0x63, 0x64, 0x61, 0x74, 0x61, 0x18, 0x0c, 0x20, 0x01, 0x28, 0x0b, 0x32,
+	0x18, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e,
+	0x43, 0x64, 0x61, 0x74, 0x61, 0x53, 0x70, 0x65, 0x63, 0x52, 0x05, 0x63, 0x64, 0x61, 0x74, 0x61,
+	0x12, 0x3a, 0x0a, 0x0a, 0x63, 0x68, 0x69, 0x6c, 0x64, 0x5f, 0x74, 0x61, 0x67, 0x73, 0x18, 0x13,
+	0x20, 0x01, 0x28, 0x0b, 0x32, 0x1b, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64,
+	0x61, 0x74, 0x6f, 0x72, 0x2e, 0x43, 0x68, 0x69, 0x6c, 0x64, 0x54, 0x61, 0x67, 0x53, 0x70, 0x65,
+	0x63, 0x52, 0x09, 0x63, 0x68, 0x69, 0x6c, 0x64, 0x54, 0x61, 0x67, 0x73, 0x12, 0x36, 0x0a, 0x13,
+	0x73, 0x69, 0x62, 0x6c, 0x69, 0x6e, 0x67, 0x73, 0x5f, 0x64, 0x69, 0x73, 0x61, 0x6c, 0x6c, 0x6f,
+	0x77, 0x65, 0x64, 0x18, 0x1e, 0x20, 0x01, 0x28, 0x08, 0x3a, 0x05, 0x66, 0x61, 0x6c, 0x73, 0x65,
+	0x52, 0x12, 0x73, 0x69, 0x62, 0x6c, 0x69, 0x6e, 0x67, 0x73, 0x44, 0x69, 0x73, 0x61, 0x6c, 0x6c,
+	0x6f, 0x77, 0x65, 0x64, 0x12, 0x37, 0x0a, 0x14, 0x6d, 0x61, 0x6e, 0x64, 0x61, 0x74, 0x6f, 0x72,
+	0x79, 0x5f, 0x6c, 0x61, 0x73, 0x74, 0x5f, 0x63, 0x68, 0x69, 0x6c, 0x64, 0x18, 0x1f, 0x20, 0x01,
+	0x28, 0x08, 0x3a, 0x05, 0x66, 0x61, 0x6c, 0x73, 0x65, 0x52, 0x12, 0x6d, 0x61, 0x6e, 0x64, 0x61,
+	0x74, 0x6f, 0x72, 0x79, 0x4c, 0x61, 0x73, 0x74, 0x43, 0x68, 0x69, 0x6c, 0x64, 0x12, 0x48, 0x0a,
+	0x10, 0x72, 0x65, 0x66, 0x65, 0x72, 0x65, 0x6e, 0x63, 0x65, 0x5f, 0x70, 0x6f, 0x69, 0x6e, 0x74,
+	0x73, 0x18, 0x14, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x1d, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61,
+	0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x52, 0x65, 0x66, 0x65, 0x72, 0x65, 0x6e, 0x63,
+	0x65, 0x50, 0x6f, 0x69, 0x6e, 0x74, 0x52, 0x0f, 0x72, 0x65, 0x66, 0x65, 0x72, 0x65, 0x6e, 0x63,
+	0x65, 0x50, 0x6f, 0x69, 0x6e, 0x74, 0x73, 0x12, 0x19, 0x0a, 0x08, 0x73, 0x70, 0x65, 0x63, 0x5f,
+	0x75, 0x72, 0x6c, 0x18, 0x0a, 0x20, 0x01, 0x28, 0x09, 0x52, 0x07, 0x73, 0x70, 0x65, 0x63, 0x55,
+	0x72, 0x6c, 0x12, 0x37, 0x0a, 0x0a, 0x61, 0x6d, 0x70, 0x5f, 0x6c, 0x61, 0x79, 0x6f, 0x75, 0x74,
+	0x18, 0x0b, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x18, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c,
+	0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x41, 0x6d, 0x70, 0x4c, 0x61, 0x79, 0x6f, 0x75, 0x74,
+	0x52, 0x09, 0x61, 0x6d, 0x70, 0x4c, 0x61, 0x79, 0x6f, 0x75, 0x74, 0x12, 0x48, 0x0a, 0x10, 0x6d,
+	0x61, 0x72, 0x6b, 0x5f, 0x64, 0x65, 0x73, 0x63, 0x65, 0x6e, 0x64, 0x61, 0x6e, 0x74, 0x73, 0x18,
+	0x26, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x1d, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69,
+	0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x41, 0x6e, 0x63, 0x65, 0x73, 0x74, 0x6f, 0x72, 0x4d, 0x61,
+	0x72, 0x6b, 0x65, 0x72, 0x52, 0x0f, 0x6d, 0x61, 0x72, 0x6b, 0x44, 0x65, 0x73, 0x63, 0x65, 0x6e,
+	0x64, 0x61, 0x6e, 0x74, 0x73, 0x22, 0x46, 0x0a, 0x07, 0x4e, 0x61, 0x6d, 0x65, 0x64, 0x49, 0x64,
+	0x12, 0x0b, 0x0a, 0x07, 0x4e, 0x4f, 0x54, 0x5f, 0x53, 0x45, 0x54, 0x10, 0x00, 0x12, 0x18, 0x0a,
+	0x14, 0x4c, 0x49, 0x4e, 0x4b, 0x5f, 0x46, 0x4f, 0x4e, 0x54, 0x5f, 0x53, 0x54, 0x59, 0x4c, 0x45,
+	0x53, 0x48, 0x45, 0x45, 0x54, 0x10, 0x01, 0x12, 0x14, 0x0a, 0x10, 0x53, 0x54, 0x59, 0x4c, 0x45,
+	0x5f, 0x41, 0x4d, 0x50, 0x5f, 0x43, 0x55, 0x53, 0x54, 0x4f, 0x4d, 0x10, 0x02, 0x22, 0xd8, 0x01,
+	0x0a, 0x07, 0x44, 0x6f, 0x63, 0x53, 0x70, 0x65, 0x63, 0x12, 0x3f, 0x0a, 0x0b, 0x68, 0x74, 0x6d,
+	0x6c, 0x5f, 0x66, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x18, 0x01, 0x20, 0x03, 0x28, 0x0e, 0x32, 0x1e,
+	0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x48,
+	0x74, 0x6d, 0x6c, 0x46, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x2e, 0x43, 0x6f, 0x64, 0x65, 0x52, 0x0a,
+	0x68, 0x74, 0x6d, 0x6c, 0x46, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x12, 0x1d, 0x0a, 0x0a, 0x65, 0x6e,
+	0x61, 0x62, 0x6c, 0x65, 0x64, 0x5f, 0x62, 0x79, 0x18, 0x02, 0x20, 0x03, 0x28, 0x09, 0x52, 0x09,
+	0x65, 0x6e, 0x61, 0x62, 0x6c, 0x65, 0x64, 0x42, 0x79, 0x12, 0x1f, 0x0a, 0x0b, 0x64, 0x69, 0x73,
+	0x61, 0x62, 0x6c, 0x65, 0x64, 0x5f, 0x62, 0x79, 0x18, 0x03, 0x20, 0x03, 0x28, 0x09, 0x52, 0x0a,
+	0x64, 0x69, 0x73, 0x61, 0x62, 0x6c, 0x65, 0x64, 0x42, 0x79, 0x12, 0x1f, 0x0a, 0x09, 0x6d, 0x61,
+	0x78, 0x5f, 0x62, 0x79, 0x74, 0x65, 0x73, 0x18, 0x04, 0x20, 0x01, 0x28, 0x05, 0x3a, 0x02, 0x2d,
+	0x32, 0x52, 0x08, 0x6d, 0x61, 0x78, 0x42, 0x79, 0x74, 0x65, 0x73, 0x12, 0x2b, 0x0a, 0x12, 0x6d,
+	0x61, 0x78, 0x5f, 0x62, 0x79, 0x74, 0x65, 0x73, 0x5f, 0x73, 0x70, 0x65, 0x63, 0x5f, 0x75, 0x72,
+	0x6c, 0x18, 0x05, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0f, 0x6d, 0x61, 0x78, 0x42, 0x79, 0x74, 0x65,
+	0x73, 0x53, 0x70, 0x65, 0x63, 0x55, 0x72, 0x6c, 0x22, 0xb3, 0x07, 0x0a, 0x0a, 0x44, 0x6f, 0x63,
+	0x43, 0x73, 0x73, 0x53, 0x70, 0x65, 0x63, 0x12, 0x3f, 0x0a, 0x0b, 0x68, 0x74, 0x6d, 0x6c, 0x5f,
+	0x66, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x18, 0x01, 0x20, 0x03, 0x28, 0x0e, 0x32, 0x1e, 0x2e, 0x61,
+	0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x48, 0x74, 0x6d,
+	0x6c, 0x46, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x2e, 0x43, 0x6f, 0x64, 0x65, 0x52, 0x0a, 0x68, 0x74,
+	0x6d, 0x6c, 0x46, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x12, 0x1d, 0x0a, 0x0a, 0x65, 0x6e, 0x61, 0x62,
+	0x6c, 0x65, 0x64, 0x5f, 0x62, 0x79, 0x18, 0x02, 0x20, 0x03, 0x28, 0x09, 0x52, 0x09, 0x65, 0x6e,
+	0x61, 0x62, 0x6c, 0x65, 0x64, 0x42, 0x79, 0x12, 0x1f, 0x0a, 0x0b, 0x64, 0x69, 0x73, 0x61, 0x62,
+	0x6c, 0x65, 0x64, 0x5f, 0x62, 0x79, 0x18, 0x03, 0x20, 0x03, 0x28, 0x09, 0x52, 0x0a, 0x64, 0x69,
+	0x73, 0x61, 0x62, 0x6c, 0x65, 0x64, 0x42, 0x79, 0x12, 0x19, 0x0a, 0x08, 0x73, 0x70, 0x65, 0x63,
+	0x5f, 0x75, 0x72, 0x6c, 0x18, 0x04, 0x20, 0x01, 0x28, 0x09, 0x52, 0x07, 0x73, 0x70, 0x65, 0x63,
+	0x55, 0x72, 0x6c, 0x12, 0x36, 0x0a, 0x14, 0x6d, 0x61, 0x78, 0x5f, 0x62, 0x79, 0x74, 0x65, 0x73,
+	0x5f, 0x69, 0x73, 0x5f, 0x77, 0x61, 0x72, 0x6e, 0x69, 0x6e, 0x67, 0x18, 0x12, 0x20, 0x01, 0x28,
+	0x08, 0x3a, 0x05, 0x66, 0x61, 0x6c, 0x73, 0x65, 0x52, 0x11, 0x6d, 0x61, 0x78, 0x42, 0x79, 0x74,
+	0x65, 0x73, 0x49, 0x73, 0x57, 0x61, 0x72, 0x6e, 0x69, 0x6e, 0x67, 0x12, 0x1f, 0x0a, 0x09, 0x6d,
+	0x61, 0x78, 0x5f, 0x62, 0x79, 0x74, 0x65, 0x73, 0x18, 0x05, 0x20, 0x01, 0x28, 0x05, 0x3a, 0x02,
+	0x2d, 0x32, 0x52, 0x08, 0x6d, 0x61, 0x78, 0x42, 0x79, 0x74, 0x65, 0x73, 0x12, 0x3e, 0x0a, 0x1a,
+	0x6d, 0x61, 0x78, 0x5f, 0x62, 0x79, 0x74, 0x65, 0x73, 0x5f, 0x70, 0x65, 0x72, 0x5f, 0x69, 0x6e,
+	0x6c, 0x69, 0x6e, 0x65, 0x5f, 0x73, 0x74, 0x79, 0x6c, 0x65, 0x18, 0x06, 0x20, 0x01, 0x28, 0x05,
+	0x3a, 0x02, 0x2d, 0x31, 0x52, 0x16, 0x6d, 0x61, 0x78, 0x42, 0x79, 0x74, 0x65, 0x73, 0x50, 0x65,
+	0x72, 0x49, 0x6e, 0x6c, 0x69, 0x6e, 0x65, 0x53, 0x74, 0x79, 0x6c, 0x65, 0x12, 0x32, 0x0a, 0x12,
+	0x75, 0x72, 0x6c, 0x5f, 0x62, 0x79, 0x74, 0x65, 0x73, 0x5f, 0x69, 0x6e, 0x63, 0x6c, 0x75, 0x64,
+	0x65, 0x64, 0x18, 0x07, 0x20, 0x01, 0x28, 0x08, 0x3a, 0x04, 0x74, 0x72, 0x75, 0x65, 0x52, 0x10,
+	0x75, 0x72, 0x6c, 0x42, 0x79, 0x74, 0x65, 0x73, 0x49, 0x6e, 0x63, 0x6c, 0x75, 0x64, 0x65, 0x64,
+	0x12, 0x2b, 0x0a, 0x12, 0x6d, 0x61, 0x78, 0x5f, 0x62, 0x79, 0x74, 0x65, 0x73, 0x5f, 0x73, 0x70,
+	0x65, 0x63, 0x5f, 0x75, 0x72, 0x6c, 0x18, 0x08, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0f, 0x6d, 0x61,
+	0x78, 0x42, 0x79, 0x74, 0x65, 0x73, 0x53, 0x70, 0x65, 0x63, 0x55, 0x72, 0x6c, 0x12, 0x49, 0x0a,
+	0x1e, 0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x5f, 0x61, 0x6c, 0x6c, 0x5f, 0x64, 0x65, 0x63, 0x6c, 0x61,
+	0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x5f, 0x69, 0x6e, 0x5f, 0x73, 0x74, 0x79, 0x6c, 0x65, 0x18,
+	0x0a, 0x20, 0x01, 0x28, 0x08, 0x3a, 0x05, 0x66, 0x61, 0x6c, 0x73, 0x65, 0x52, 0x1a, 0x61, 0x6c,
+	0x6c, 0x6f, 0x77, 0x41, 0x6c, 0x6c, 0x44, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f,
+	0x6e, 0x49, 0x6e, 0x53, 0x74, 0x79, 0x6c, 0x65, 0x12, 0x34, 0x0a, 0x16, 0x65, 0x78, 0x70, 0x61,
+	0x6e, 0x64, 0x5f, 0x76, 0x65, 0x6e, 0x64, 0x6f, 0x72, 0x5f, 0x70, 0x72, 0x65, 0x66, 0x69, 0x78,
+	0x65, 0x73, 0x18, 0x13, 0x20, 0x01, 0x28, 0x08, 0x52, 0x14, 0x65, 0x78, 0x70, 0x61, 0x6e, 0x64,
+	0x56, 0x65, 0x6e, 0x64, 0x6f, 0x72, 0x50, 0x72, 0x65, 0x66, 0x69, 0x78, 0x65, 0x73, 0x12, 0x3f,
+	0x0a, 0x0b, 0x64, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x18, 0x0b, 0x20,
+	0x03, 0x28, 0x0b, 0x32, 0x1d, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61,
+	0x74, 0x6f, 0x72, 0x2e, 0x43, 0x73, 0x73, 0x44, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69,
+	0x6f, 0x6e, 0x52, 0x0b, 0x64, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x12,
+	0x46, 0x0a, 0x0f, 0x64, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x5f, 0x73,
+	0x76, 0x67, 0x18, 0x0c, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x1d, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76,
+	0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x43, 0x73, 0x73, 0x44, 0x65, 0x63, 0x6c,
+	0x61, 0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x52, 0x0e, 0x64, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61,
+	0x74, 0x69, 0x6f, 0x6e, 0x53, 0x76, 0x67, 0x12, 0x29, 0x0a, 0x10, 0x64, 0x65, 0x63, 0x6c, 0x61,
+	0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x5f, 0x6c, 0x69, 0x73, 0x74, 0x18, 0x0d, 0x20, 0x03, 0x28,
+	0x09, 0x52, 0x0f, 0x64, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x4c, 0x69,
+	0x73, 0x74, 0x12, 0x30, 0x0a, 0x14, 0x64, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f,
+	0x6e, 0x5f, 0x6c, 0x69, 0x73, 0x74, 0x5f, 0x73, 0x76, 0x67, 0x18, 0x0e, 0x20, 0x03, 0x28, 0x09,
+	0x52, 0x12, 0x64, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x4c, 0x69, 0x73,
+	0x74, 0x53, 0x76, 0x67, 0x12, 0x3c, 0x0a, 0x0e, 0x69, 0x6d, 0x61, 0x67, 0x65, 0x5f, 0x75, 0x72,
+	0x6c, 0x5f, 0x73, 0x70, 0x65, 0x63, 0x18, 0x0f, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x16, 0x2e, 0x61,
+	0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x55, 0x72, 0x6c,
+	0x53, 0x70, 0x65, 0x63, 0x52, 0x0c, 0x69, 0x6d, 0x61, 0x67, 0x65, 0x55, 0x72, 0x6c, 0x53, 0x70,
+	0x65, 0x63, 0x12, 0x3a, 0x0a, 0x0d, 0x66, 0x6f, 0x6e, 0x74, 0x5f, 0x75, 0x72, 0x6c, 0x5f, 0x73,
+	0x70, 0x65, 0x63, 0x18, 0x10, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x16, 0x2e, 0x61, 0x6d, 0x70, 0x2e,
+	0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x55, 0x72, 0x6c, 0x53, 0x70, 0x65,
+	0x63, 0x52, 0x0b, 0x66, 0x6f, 0x6e, 0x74, 0x55, 0x72, 0x6c, 0x53, 0x70, 0x65, 0x63, 0x12, 0x2e,
+	0x0a, 0x0f, 0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x5f, 0x69, 0x6d, 0x70, 0x6f, 0x72, 0x74, 0x61, 0x6e,
+	0x74, 0x18, 0x11, 0x20, 0x01, 0x28, 0x08, 0x3a, 0x05, 0x66, 0x61, 0x6c, 0x73, 0x65, 0x52, 0x0e,
+	0x61, 0x6c, 0x6c, 0x6f, 0x77, 0x49, 0x6d, 0x70, 0x6f, 0x72, 0x74, 0x61, 0x6e, 0x74, 0x22, 0xec,
+	0x05, 0x0a, 0x0e, 0x56, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x52, 0x75, 0x6c, 0x65,
+	0x73, 0x12, 0x2a, 0x0a, 0x04, 0x74, 0x61, 0x67, 0x73, 0x18, 0x01, 0x20, 0x03, 0x28, 0x0b, 0x32,
+	0x16, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e,
+	0x54, 0x61, 0x67, 0x53, 0x70, 0x65, 0x63, 0x52, 0x04, 0x74, 0x61, 0x67, 0x73, 0x12, 0x36, 0x0a,
+	0x0a, 0x61, 0x74, 0x74, 0x72, 0x5f, 0x6c, 0x69, 0x73, 0x74, 0x73, 0x18, 0x07, 0x20, 0x03, 0x28,
+	0x0b, 0x32, 0x17, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f,
+	0x72, 0x2e, 0x41, 0x74, 0x74, 0x72, 0x4c, 0x69, 0x73, 0x74, 0x52, 0x09, 0x61, 0x74, 0x74, 0x72,
+	0x4c, 0x69, 0x73, 0x74, 0x73, 0x12, 0x45, 0x0a, 0x1f, 0x6d, 0x69, 0x6e, 0x5f, 0x76, 0x61, 0x6c,
+	0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x5f, 0x72, 0x65, 0x76, 0x69, 0x73, 0x69, 0x6f, 0x6e, 0x5f,
+	0x72, 0x65, 0x71, 0x75, 0x69, 0x72, 0x65, 0x64, 0x18, 0x04, 0x20, 0x01, 0x28, 0x05, 0x52, 0x1c,
+	0x6d, 0x69, 0x6e, 0x56, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x52, 0x65, 0x76, 0x69,
+	0x73, 0x69, 0x6f, 0x6e, 0x52, 0x65, 0x71, 0x75, 0x69, 0x72, 0x65, 0x64, 0x12, 0x30, 0x0a, 0x12,
+	0x73, 0x70, 0x65, 0x63, 0x5f, 0x66, 0x69, 0x6c, 0x65, 0x5f, 0x72, 0x65, 0x76, 0x69, 0x73, 0x69,
+	0x6f, 0x6e, 0x18, 0x06, 0x20, 0x01, 0x28, 0x05, 0x3a, 0x02, 0x2d, 0x31, 0x52, 0x10, 0x73, 0x70,
+	0x65, 0x63, 0x46, 0x69, 0x6c, 0x65, 0x52, 0x65, 0x76, 0x69, 0x73, 0x69, 0x6f, 0x6e, 0x12, 0x2a,
+	0x0a, 0x11, 0x74, 0x65, 0x6d, 0x70, 0x6c, 0x61, 0x74, 0x65, 0x5f, 0x73, 0x70, 0x65, 0x63, 0x5f,
+	0x75, 0x72, 0x6c, 0x18, 0x08, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0f, 0x74, 0x65, 0x6d, 0x70, 0x6c,
+	0x61, 0x74, 0x65, 0x53, 0x70, 0x65, 0x63, 0x55, 0x72, 0x6c, 0x12, 0x26, 0x0a, 0x0f, 0x73, 0x74,
+	0x79, 0x6c, 0x65, 0x73, 0x5f, 0x73, 0x70, 0x65, 0x63, 0x5f, 0x75, 0x72, 0x6c, 0x18, 0x0f, 0x20,
+	0x01, 0x28, 0x09, 0x52, 0x0d, 0x73, 0x74, 0x79, 0x6c, 0x65, 0x73, 0x53, 0x70, 0x65, 0x63, 0x55,
+	0x72, 0x6c, 0x12, 0x26, 0x0a, 0x0f, 0x73, 0x63, 0x72, 0x69, 0x70, 0x74, 0x5f, 0x73, 0x70, 0x65,
+	0x63, 0x5f, 0x75, 0x72, 0x6c, 0x18, 0x11, 0x20, 0x01, 0x28, 0x09, 0x52, 0x0d, 0x73, 0x63, 0x72,
+	0x69, 0x70, 0x74, 0x53, 0x70, 0x65, 0x63, 0x55, 0x72, 0x6c, 0x12, 0x3f, 0x0a, 0x0d, 0x65, 0x72,
+	0x72, 0x6f, 0x72, 0x5f, 0x66, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x73, 0x18, 0x09, 0x20, 0x03, 0x28,
+	0x0b, 0x32, 0x1a, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f,
+	0x72, 0x2e, 0x45, 0x72, 0x72, 0x6f, 0x72, 0x46, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x52, 0x0c, 0x65,
+	0x72, 0x72, 0x6f, 0x72, 0x46, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x73, 0x12, 0x4c, 0x0a, 0x11, 0x65,
+	0x72, 0x72, 0x6f, 0x72, 0x5f, 0x73, 0x70, 0x65, 0x63, 0x69, 0x66, 0x69, 0x63, 0x69, 0x74, 0x79,
+	0x18, 0x0d, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x1f, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c,
+	0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x45, 0x72, 0x72, 0x6f, 0x72, 0x53, 0x70, 0x65, 0x63,
+	0x69, 0x66, 0x69, 0x63, 0x69, 0x74, 0x79, 0x52, 0x10, 0x65, 0x72, 0x72, 0x6f, 0x72, 0x53, 0x70,
+	0x65, 0x63, 0x69, 0x66, 0x69, 0x63, 0x69, 0x74, 0x79, 0x12, 0x50, 0x0a, 0x13, 0x64, 0x65, 0x73,
+	0x63, 0x65, 0x6e, 0x64, 0x61, 0x6e, 0x74, 0x5f, 0x74, 0x61, 0x67, 0x5f, 0x6c, 0x69, 0x73, 0x74,
+	0x18, 0x10, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x20, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c,
+	0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x44, 0x65, 0x73, 0x63, 0x65, 0x6e, 0x64, 0x61, 0x6e,
+	0x74, 0x54, 0x61, 0x67, 0x4c, 0x69, 0x73, 0x74, 0x52, 0x11, 0x64, 0x65, 0x73, 0x63, 0x65, 0x6e,
+	0x64, 0x61, 0x6e, 0x74, 0x54, 0x61, 0x67, 0x4c, 0x69, 0x73, 0x74, 0x12, 0x28, 0x0a, 0x03, 0x64,
+	0x6f, 0x63, 0x18, 0x15, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x16, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76,
+	0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x44, 0x6f, 0x63, 0x53, 0x70, 0x65, 0x63,
+	0x52, 0x03, 0x64, 0x6f, 0x63, 0x12, 0x2b, 0x0a, 0x03, 0x63, 0x73, 0x73, 0x18, 0x13, 0x20, 0x03,
+	0x28, 0x0b, 0x32, 0x19, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74,
+	0x6f, 0x72, 0x2e, 0x44, 0x6f, 0x63, 0x43, 0x73, 0x73, 0x53, 0x70, 0x65, 0x63, 0x52, 0x03, 0x63,
+	0x73, 0x73, 0x12, 0x49, 0x0a, 0x10, 0x64, 0x65, 0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f,
+	0x6e, 0x5f, 0x6c, 0x69, 0x73, 0x74, 0x18, 0x14, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x1e, 0x2e, 0x61,
+	0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x44, 0x65, 0x63,
+	0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x4c, 0x69, 0x73, 0x74, 0x52, 0x0f, 0x64, 0x65,
+	0x63, 0x6c, 0x61, 0x72, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x4c, 0x69, 0x73, 0x74, 0x22, 0x24, 0x0a,
+	0x0d, 0x45, 0x72, 0x72, 0x6f, 0x72, 0x43, 0x61, 0x74, 0x65, 0x67, 0x6f, 0x72, 0x79, 0x22, 0x13,
+	0x0a, 0x04, 0x43, 0x6f, 0x64, 0x65, 0x12, 0x0b, 0x0a, 0x07, 0x55, 0x4e, 0x4b, 0x4e, 0x4f, 0x57,
+	0x4e, 0x10, 0x00, 0x22, 0x8b, 0x22, 0x0a, 0x0f, 0x56, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x69,
+	0x6f, 0x6e, 0x45, 0x72, 0x72, 0x6f, 0x72, 0x12, 0x4a, 0x0a, 0x08, 0x73, 0x65, 0x76, 0x65, 0x72,
+	0x69, 0x74, 0x79, 0x18, 0x06, 0x20, 0x01, 0x28, 0x0e, 0x32, 0x27, 0x2e, 0x61, 0x6d, 0x70, 0x2e,
+	0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x56, 0x61, 0x6c, 0x69, 0x64, 0x61,
+	0x74, 0x69, 0x6f, 0x6e, 0x45, 0x72, 0x72, 0x6f, 0x72, 0x2e, 0x53, 0x65, 0x76, 0x65, 0x72, 0x69,
+	0x74, 0x79, 0x3a, 0x05, 0x45, 0x52, 0x52, 0x4f, 0x52, 0x52, 0x08, 0x73, 0x65, 0x76, 0x65, 0x72,
+	0x69, 0x74, 0x79, 0x12, 0x37, 0x0a, 0x04, 0x63, 0x6f, 0x64, 0x65, 0x18, 0x01, 0x20, 0x01, 0x28,
+	0x0e, 0x32, 0x23, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f,
+	0x72, 0x2e, 0x56, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x45, 0x72, 0x72, 0x6f,
+	0x72, 0x2e, 0x43, 0x6f, 0x64, 0x65, 0x52, 0x04, 0x63, 0x6f, 0x64, 0x65, 0x12, 0x15, 0x0a, 0x04,
+	0x6c, 0x69, 0x6e, 0x65, 0x18, 0x02, 0x20, 0x01, 0x28, 0x05, 0x3a, 0x01, 0x31, 0x52, 0x04, 0x6c,
+	0x69, 0x6e, 0x65, 0x12, 0x10, 0x0a, 0x03, 0x63, 0x6f, 0x6c, 0x18, 0x03, 0x20, 0x01, 0x28, 0x05,
+	0x52, 0x03, 0x63, 0x6f, 0x6c, 0x12, 0x19, 0x0a, 0x08, 0x73, 0x70, 0x65, 0x63, 0x5f, 0x75, 0x72,
+	0x6c, 0x18, 0x05, 0x20, 0x01, 0x28, 0x09, 0x52, 0x07, 0x73, 0x70, 0x65, 0x63, 0x55, 0x72, 0x6c,
+	0x12, 0x16, 0x0a, 0x06, 0x70, 0x61, 0x72, 0x61, 0x6d, 0x73, 0x18, 0x07, 0x20, 0x03, 0x28, 0x09,
+	0x52, 0x06, 0x70, 0x61, 0x72, 0x61, 0x6d, 0x73, 0x12, 0x3d, 0x0a, 0x08, 0x63, 0x61, 0x74, 0x65,
+	0x67, 0x6f, 0x72, 0x79, 0x18, 0x08, 0x20, 0x01, 0x28, 0x0e, 0x32, 0x21, 0x2e, 0x61, 0x6d, 0x70,
+	0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x45, 0x72, 0x72, 0x6f, 0x72,
+	0x43, 0x61, 0x74, 0x65, 0x67, 0x6f, 0x72, 0x79, 0x2e, 0x43, 0x6f, 0x64, 0x65, 0x52, 0x08, 0x63,
+	0x61, 0x74, 0x65, 0x67, 0x6f, 0x72, 0x79, 0x12, 0x3a, 0x0a, 0x1a, 0x64, 0x61, 0x74, 0x61, 0x5f,
+	0x61, 0x6d, 0x70, 0x5f, 0x72, 0x65, 0x70, 0x6f, 0x72, 0x74, 0x5f, 0x74, 0x65, 0x73, 0x74, 0x5f,
+	0x76, 0x61, 0x6c, 0x75, 0x65, 0x18, 0x09, 0x20, 0x01, 0x28, 0x09, 0x52, 0x16, 0x64, 0x61, 0x74,
+	0x61, 0x41, 0x6d, 0x70, 0x52, 0x65, 0x70, 0x6f, 0x72, 0x74, 0x54, 0x65, 0x73, 0x74, 0x56, 0x61,
+	0x6c, 0x75, 0x65, 0x22, 0x38, 0x0a, 0x08, 0x53, 0x65, 0x76, 0x65, 0x72, 0x69, 0x74, 0x79, 0x12,
+	0x14, 0x0a, 0x10, 0x55, 0x4e, 0x4b, 0x4e, 0x4f, 0x57, 0x4e, 0x5f, 0x53, 0x45, 0x56, 0x45, 0x52,
+	0x49, 0x54, 0x59, 0x10, 0x00, 0x12, 0x09, 0x0a, 0x05, 0x45, 0x52, 0x52, 0x4f, 0x52, 0x10, 0x01,
+	0x12, 0x0b, 0x0a, 0x07, 0x57, 0x41, 0x52, 0x4e, 0x49, 0x4e, 0x47, 0x10, 0x04, 0x22, 0xe1, 0x1e,
+	0x0a, 0x04, 0x43, 0x6f, 0x64, 0x65, 0x12, 0x10, 0x0a, 0x0c, 0x55, 0x4e, 0x4b, 0x4e, 0x4f, 0x57,
+	0x4e, 0x5f, 0x43, 0x4f, 0x44, 0x45, 0x10, 0x00, 0x12, 0x18, 0x0a, 0x14, 0x49, 0x4e, 0x56, 0x41,
+	0x4c, 0x49, 0x44, 0x5f, 0x44, 0x4f, 0x43, 0x54, 0x59, 0x50, 0x45, 0x5f, 0x48, 0x54, 0x4d, 0x4c,
+	0x10, 0x6f, 0x12, 0x19, 0x0a, 0x15, 0x4d, 0x41, 0x4e, 0x44, 0x41, 0x54, 0x4f, 0x52, 0x59, 0x5f,
+	0x54, 0x41, 0x47, 0x5f, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e, 0x47, 0x10, 0x01, 0x12, 0x1b, 0x0a,
+	0x17, 0x54, 0x41, 0x47, 0x5f, 0x52, 0x45, 0x51, 0x55, 0x49, 0x52, 0x45, 0x44, 0x5f, 0x42, 0x59,
+	0x5f, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e, 0x47, 0x10, 0x18, 0x12, 0x23, 0x0a, 0x1f, 0x57, 0x41,
+	0x52, 0x4e, 0x49, 0x4e, 0x47, 0x5f, 0x54, 0x41, 0x47, 0x5f, 0x52, 0x45, 0x51, 0x55, 0x49, 0x52,
+	0x45, 0x44, 0x5f, 0x42, 0x59, 0x5f, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e, 0x47, 0x10, 0x4c, 0x12,
+	0x17, 0x0a, 0x13, 0x54, 0x41, 0x47, 0x5f, 0x45, 0x58, 0x43, 0x4c, 0x55, 0x44, 0x45, 0x44, 0x5f,
+	0x42, 0x59, 0x5f, 0x54, 0x41, 0x47, 0x10, 0x65, 0x12, 0x1c, 0x0a, 0x18, 0x57, 0x41, 0x52, 0x4e,
+	0x49, 0x4e, 0x47, 0x5f, 0x45, 0x58, 0x54, 0x45, 0x4e, 0x53, 0x49, 0x4f, 0x4e, 0x5f, 0x55, 0x4e,
+	0x55, 0x53, 0x45, 0x44, 0x10, 0x4f, 0x12, 0x14, 0x0a, 0x10, 0x45, 0x58, 0x54, 0x45, 0x4e, 0x53,
+	0x49, 0x4f, 0x4e, 0x5f, 0x55, 0x4e, 0x55, 0x53, 0x45, 0x44, 0x10, 0x54, 0x12, 0x28, 0x0a, 0x24,
+	0x57, 0x41, 0x52, 0x4e, 0x49, 0x4e, 0x47, 0x5f, 0x45, 0x58, 0x54, 0x45, 0x4e, 0x53, 0x49, 0x4f,
+	0x4e, 0x5f, 0x44, 0x45, 0x50, 0x52, 0x45, 0x43, 0x41, 0x54, 0x45, 0x44, 0x5f, 0x56, 0x45, 0x52,
+	0x53, 0x49, 0x4f, 0x4e, 0x10, 0x50, 0x12, 0x1c, 0x0a, 0x18, 0x4e, 0x4f, 0x4e, 0x5f, 0x4c, 0x54,
+	0x53, 0x5f, 0x53, 0x43, 0x52, 0x49, 0x50, 0x54, 0x5f, 0x41, 0x46, 0x54, 0x45, 0x52, 0x5f, 0x4c,
+	0x54, 0x53, 0x10, 0x70, 0x12, 0x1c, 0x0a, 0x18, 0x4c, 0x54, 0x53, 0x5f, 0x53, 0x43, 0x52, 0x49,
+	0x50, 0x54, 0x5f, 0x41, 0x46, 0x54, 0x45, 0x52, 0x5f, 0x4e, 0x4f, 0x4e, 0x5f, 0x4c, 0x54, 0x53,
+	0x10, 0x71, 0x12, 0x24, 0x0a, 0x20, 0x49, 0x4e, 0x43, 0x4f, 0x52, 0x52, 0x45, 0x43, 0x54, 0x5f,
+	0x53, 0x43, 0x52, 0x49, 0x50, 0x54, 0x5f, 0x52, 0x45, 0x4c, 0x45, 0x41, 0x53, 0x45, 0x5f, 0x56,
+	0x45, 0x52, 0x53, 0x49, 0x4f, 0x4e, 0x10, 0x77, 0x12, 0x1d, 0x0a, 0x19, 0x41, 0x54, 0x54, 0x52,
+	0x5f, 0x52, 0x45, 0x51, 0x55, 0x49, 0x52, 0x45, 0x44, 0x5f, 0x42, 0x55, 0x54, 0x5f, 0x4d, 0x49,
+	0x53, 0x53, 0x49, 0x4e, 0x47, 0x10, 0x3d, 0x12, 0x12, 0x0a, 0x0e, 0x44, 0x49, 0x53, 0x41, 0x4c,
+	0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x54, 0x41, 0x47, 0x10, 0x02, 0x12, 0x1a, 0x0a, 0x16, 0x47,
+	0x45, 0x4e, 0x45, 0x52, 0x41, 0x4c, 0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45,
+	0x44, 0x5f, 0x54, 0x41, 0x47, 0x10, 0x33, 0x12, 0x19, 0x0a, 0x15, 0x44, 0x49, 0x53, 0x41, 0x4c,
+	0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x53, 0x43, 0x52, 0x49, 0x50, 0x54, 0x5f, 0x54, 0x41, 0x47,
+	0x10, 0x58, 0x12, 0x13, 0x0a, 0x0f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44,
+	0x5f, 0x41, 0x54, 0x54, 0x52, 0x10, 0x03, 0x12, 0x19, 0x0a, 0x15, 0x44, 0x49, 0x53, 0x41, 0x4c,
+	0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x53, 0x54, 0x59, 0x4c, 0x45, 0x5f, 0x41, 0x54, 0x54, 0x52,
+	0x10, 0x51, 0x12, 0x16, 0x0a, 0x12, 0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49, 0x44, 0x5f, 0x41, 0x54,
+	0x54, 0x52, 0x5f, 0x56, 0x41, 0x4c, 0x55, 0x45, 0x10, 0x04, 0x12, 0x17, 0x0a, 0x13, 0x44, 0x55,
+	0x50, 0x4c, 0x49, 0x43, 0x41, 0x54, 0x45, 0x5f, 0x41, 0x54, 0x54, 0x52, 0x49, 0x42, 0x55, 0x54,
+	0x45, 0x10, 0x5e, 0x12, 0x21, 0x0a, 0x1d, 0x41, 0x54, 0x54, 0x52, 0x5f, 0x56, 0x41, 0x4c, 0x55,
+	0x45, 0x5f, 0x52, 0x45, 0x51, 0x55, 0x49, 0x52, 0x45, 0x44, 0x5f, 0x42, 0x59, 0x5f, 0x4c, 0x41,
+	0x59, 0x4f, 0x55, 0x54, 0x10, 0x1b, 0x12, 0x1d, 0x0a, 0x19, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e,
+	0x47, 0x5f, 0x4c, 0x41, 0x59, 0x4f, 0x55, 0x54, 0x5f, 0x41, 0x54, 0x54, 0x52, 0x49, 0x42, 0x55,
+	0x54, 0x45, 0x53, 0x10, 0x69, 0x12, 0x1a, 0x0a, 0x16, 0x49, 0x4d, 0x50, 0x4c, 0x49, 0x45, 0x44,
+	0x5f, 0x4c, 0x41, 0x59, 0x4f, 0x55, 0x54, 0x5f, 0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49, 0x44, 0x10,
+	0x16, 0x12, 0x1c, 0x0a, 0x18, 0x53, 0x50, 0x45, 0x43, 0x49, 0x46, 0x49, 0x45, 0x44, 0x5f, 0x4c,
+	0x41, 0x59, 0x4f, 0x55, 0x54, 0x5f, 0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49, 0x44, 0x10, 0x1a, 0x12,
+	0x1a, 0x0a, 0x16, 0x4d, 0x41, 0x4e, 0x44, 0x41, 0x54, 0x4f, 0x52, 0x59, 0x5f, 0x41, 0x54, 0x54,
+	0x52, 0x5f, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e, 0x47, 0x10, 0x05, 0x12, 0x20, 0x0a, 0x1c, 0x4d,
+	0x41, 0x4e, 0x44, 0x41, 0x54, 0x4f, 0x52, 0x59, 0x5f, 0x4f, 0x4e, 0x45, 0x4f, 0x46, 0x5f, 0x41,
+	0x54, 0x54, 0x52, 0x5f, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e, 0x47, 0x10, 0x1c, 0x12, 0x20, 0x0a,
+	0x1c, 0x4d, 0x41, 0x4e, 0x44, 0x41, 0x54, 0x4f, 0x52, 0x59, 0x5f, 0x41, 0x4e, 0x59, 0x4f, 0x46,
+	0x5f, 0x41, 0x54, 0x54, 0x52, 0x5f, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e, 0x47, 0x10, 0x68, 0x12,
+	0x17, 0x0a, 0x13, 0x44, 0x55, 0x50, 0x4c, 0x49, 0x43, 0x41, 0x54, 0x45, 0x5f, 0x44, 0x49, 0x4d,
+	0x45, 0x4e, 0x53, 0x49, 0x4f, 0x4e, 0x10, 0x3c, 0x12, 0x18, 0x0a, 0x14, 0x44, 0x55, 0x50, 0x4c,
+	0x49, 0x43, 0x41, 0x54, 0x45, 0x5f, 0x55, 0x4e, 0x49, 0x51, 0x55, 0x45, 0x5f, 0x54, 0x41, 0x47,
+	0x10, 0x06, 0x12, 0x20, 0x0a, 0x1c, 0x44, 0x55, 0x50, 0x4c, 0x49, 0x43, 0x41, 0x54, 0x45, 0x5f,
+	0x55, 0x4e, 0x49, 0x51, 0x55, 0x45, 0x5f, 0x54, 0x41, 0x47, 0x5f, 0x57, 0x41, 0x52, 0x4e, 0x49,
+	0x4e, 0x47, 0x10, 0x4d, 0x12, 0x14, 0x0a, 0x10, 0x57, 0x52, 0x4f, 0x4e, 0x47, 0x5f, 0x50, 0x41,
+	0x52, 0x45, 0x4e, 0x54, 0x5f, 0x54, 0x41, 0x47, 0x10, 0x07, 0x12, 0x17, 0x0a, 0x13, 0x53, 0x54,
+	0x59, 0x4c, 0x45, 0x53, 0x48, 0x45, 0x45, 0x54, 0x5f, 0x54, 0x4f, 0x4f, 0x5f, 0x4c, 0x4f, 0x4e,
+	0x47, 0x10, 0x32, 0x12, 0x28, 0x0a, 0x24, 0x53, 0x54, 0x59, 0x4c, 0x45, 0x53, 0x48, 0x45, 0x45,
+	0x54, 0x5f, 0x41, 0x4e, 0x44, 0x5f, 0x49, 0x4e, 0x4c, 0x49, 0x4e, 0x45, 0x5f, 0x53, 0x54, 0x59,
+	0x4c, 0x45, 0x5f, 0x54, 0x4f, 0x4f, 0x5f, 0x4c, 0x4f, 0x4e, 0x47, 0x10, 0x66, 0x12, 0x19, 0x0a,
+	0x15, 0x49, 0x4e, 0x4c, 0x49, 0x4e, 0x45, 0x5f, 0x53, 0x54, 0x59, 0x4c, 0x45, 0x5f, 0x54, 0x4f,
+	0x4f, 0x5f, 0x4c, 0x4f, 0x4e, 0x47, 0x10, 0x67, 0x12, 0x1a, 0x0a, 0x16, 0x49, 0x4e, 0x4c, 0x49,
+	0x4e, 0x45, 0x5f, 0x53, 0x43, 0x52, 0x49, 0x50, 0x54, 0x5f, 0x54, 0x4f, 0x4f, 0x5f, 0x4c, 0x4f,
+	0x4e, 0x47, 0x10, 0x76, 0x12, 0x28, 0x0a, 0x24, 0x4d, 0x41, 0x4e, 0x44, 0x41, 0x54, 0x4f, 0x52,
+	0x59, 0x5f, 0x43, 0x44, 0x41, 0x54, 0x41, 0x5f, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e, 0x47, 0x5f,
+	0x4f, 0x52, 0x5f, 0x49, 0x4e, 0x43, 0x4f, 0x52, 0x52, 0x45, 0x43, 0x54, 0x10, 0x09, 0x12, 0x1b,
+	0x0a, 0x17, 0x43, 0x44, 0x41, 0x54, 0x41, 0x5f, 0x56, 0x49, 0x4f, 0x4c, 0x41, 0x54, 0x45, 0x53,
+	0x5f, 0x44, 0x45, 0x4e, 0x59, 0x4c, 0x49, 0x53, 0x54, 0x10, 0x1e, 0x12, 0x24, 0x0a, 0x20, 0x4e,
+	0x4f, 0x4e, 0x5f, 0x57, 0x48, 0x49, 0x54, 0x45, 0x53, 0x50, 0x41, 0x43, 0x45, 0x5f, 0x43, 0x44,
+	0x41, 0x54, 0x41, 0x5f, 0x45, 0x4e, 0x43, 0x4f, 0x55, 0x4e, 0x54, 0x45, 0x52, 0x45, 0x44, 0x10,
+	0x52, 0x12, 0x16, 0x0a, 0x12, 0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49, 0x44, 0x5f, 0x4a, 0x53, 0x4f,
+	0x4e, 0x5f, 0x43, 0x44, 0x41, 0x54, 0x41, 0x10, 0x6a, 0x12, 0x13, 0x0a, 0x0f, 0x44, 0x45, 0x50,
+	0x52, 0x45, 0x43, 0x41, 0x54, 0x45, 0x44, 0x5f, 0x41, 0x54, 0x54, 0x52, 0x10, 0x0b, 0x12, 0x12,
+	0x0a, 0x0e, 0x44, 0x45, 0x50, 0x52, 0x45, 0x43, 0x41, 0x54, 0x45, 0x44, 0x5f, 0x54, 0x41, 0x47,
+	0x10, 0x0c, 0x12, 0x2e, 0x0a, 0x2a, 0x4d, 0x41, 0x4e, 0x44, 0x41, 0x54, 0x4f, 0x52, 0x59, 0x5f,
+	0x50, 0x52, 0x4f, 0x50, 0x45, 0x52, 0x54, 0x59, 0x5f, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e, 0x47,
+	0x5f, 0x46, 0x52, 0x4f, 0x4d, 0x5f, 0x41, 0x54, 0x54, 0x52, 0x5f, 0x56, 0x41, 0x4c, 0x55, 0x45,
+	0x10, 0x0e, 0x12, 0x28, 0x0a, 0x24, 0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49, 0x44, 0x5f, 0x50, 0x52,
+	0x4f, 0x50, 0x45, 0x52, 0x54, 0x59, 0x5f, 0x56, 0x41, 0x4c, 0x55, 0x45, 0x5f, 0x49, 0x4e, 0x5f,
+	0x41, 0x54, 0x54, 0x52, 0x5f, 0x56, 0x41, 0x4c, 0x55, 0x45, 0x10, 0x0f, 0x12, 0x0f, 0x0a, 0x0b,
+	0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e, 0x47, 0x5f, 0x55, 0x52, 0x4c, 0x10, 0x23, 0x12, 0x0f, 0x0a,
+	0x0b, 0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49, 0x44, 0x5f, 0x55, 0x52, 0x4c, 0x10, 0x24, 0x12, 0x18,
+	0x0a, 0x14, 0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49, 0x44, 0x5f, 0x55, 0x52, 0x4c, 0x5f, 0x50, 0x52,
+	0x4f, 0x54, 0x4f, 0x43, 0x4f, 0x4c, 0x10, 0x25, 0x12, 0x15, 0x0a, 0x11, 0x44, 0x49, 0x53, 0x41,
+	0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x44, 0x4f, 0x4d, 0x41, 0x49, 0x4e, 0x10, 0x3e, 0x12,
+	0x1b, 0x0a, 0x17, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x52, 0x45,
+	0x4c, 0x41, 0x54, 0x49, 0x56, 0x45, 0x5f, 0x55, 0x52, 0x4c, 0x10, 0x31, 0x12, 0x25, 0x0a, 0x21,
+	0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x50, 0x52, 0x4f, 0x50, 0x45,
+	0x52, 0x54, 0x59, 0x5f, 0x49, 0x4e, 0x5f, 0x41, 0x54, 0x54, 0x52, 0x5f, 0x56, 0x41, 0x4c, 0x55,
+	0x45, 0x10, 0x10, 0x12, 0x1c, 0x0a, 0x18, 0x4d, 0x55, 0x54, 0x55, 0x41, 0x4c, 0x4c, 0x59, 0x5f,
+	0x45, 0x58, 0x43, 0x4c, 0x55, 0x53, 0x49, 0x56, 0x45, 0x5f, 0x41, 0x54, 0x54, 0x52, 0x53, 0x10,
+	0x11, 0x12, 0x24, 0x0a, 0x20, 0x55, 0x4e, 0x45, 0x53, 0x43, 0x41, 0x50, 0x45, 0x44, 0x5f, 0x54,
+	0x45, 0x4d, 0x50, 0x4c, 0x41, 0x54, 0x45, 0x5f, 0x49, 0x4e, 0x5f, 0x41, 0x54, 0x54, 0x52, 0x5f,
+	0x56, 0x41, 0x4c, 0x55, 0x45, 0x10, 0x12, 0x12, 0x22, 0x0a, 0x1e, 0x54, 0x45, 0x4d, 0x50, 0x4c,
+	0x41, 0x54, 0x45, 0x5f, 0x50, 0x41, 0x52, 0x54, 0x49, 0x41, 0x4c, 0x5f, 0x49, 0x4e, 0x5f, 0x41,
+	0x54, 0x54, 0x52, 0x5f, 0x56, 0x41, 0x4c, 0x55, 0x45, 0x10, 0x13, 0x12, 0x19, 0x0a, 0x15, 0x54,
+	0x45, 0x4d, 0x50, 0x4c, 0x41, 0x54, 0x45, 0x5f, 0x49, 0x4e, 0x5f, 0x41, 0x54, 0x54, 0x52, 0x5f,
+	0x4e, 0x41, 0x4d, 0x45, 0x10, 0x14, 0x12, 0x2b, 0x0a, 0x27, 0x49, 0x4e, 0x43, 0x4f, 0x4e, 0x53,
+	0x49, 0x53, 0x54, 0x45, 0x4e, 0x54, 0x5f, 0x55, 0x4e, 0x49, 0x54, 0x53, 0x5f, 0x46, 0x4f, 0x52,
+	0x5f, 0x57, 0x49, 0x44, 0x54, 0x48, 0x5f, 0x41, 0x4e, 0x44, 0x5f, 0x48, 0x45, 0x49, 0x47, 0x48,
+	0x54, 0x10, 0x15, 0x12, 0x1b, 0x0a, 0x17, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45,
+	0x44, 0x5f, 0x54, 0x41, 0x47, 0x5f, 0x41, 0x4e, 0x43, 0x45, 0x53, 0x54, 0x4f, 0x52, 0x10, 0x17,
+	0x12, 0x1c, 0x0a, 0x18, 0x4d, 0x41, 0x4e, 0x44, 0x41, 0x54, 0x4f, 0x52, 0x59, 0x5f, 0x4c, 0x41,
+	0x53, 0x54, 0x5f, 0x43, 0x48, 0x49, 0x4c, 0x44, 0x5f, 0x54, 0x41, 0x47, 0x10, 0x59, 0x12, 0x1a,
+	0x0a, 0x16, 0x4d, 0x41, 0x4e, 0x44, 0x41, 0x54, 0x4f, 0x52, 0x59, 0x5f, 0x54, 0x41, 0x47, 0x5f,
+	0x41, 0x4e, 0x43, 0x45, 0x53, 0x54, 0x4f, 0x52, 0x10, 0x1f, 0x12, 0x24, 0x0a, 0x20, 0x4d, 0x41,
+	0x4e, 0x44, 0x41, 0x54, 0x4f, 0x52, 0x59, 0x5f, 0x54, 0x41, 0x47, 0x5f, 0x41, 0x4e, 0x43, 0x45,
+	0x53, 0x54, 0x4f, 0x52, 0x5f, 0x57, 0x49, 0x54, 0x48, 0x5f, 0x48, 0x49, 0x4e, 0x54, 0x10, 0x20,
+	0x12, 0x25, 0x0a, 0x21, 0x41, 0x54, 0x54, 0x52, 0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f,
+	0x57, 0x45, 0x44, 0x5f, 0x42, 0x59, 0x5f, 0x49, 0x4d, 0x50, 0x4c, 0x49, 0x45, 0x44, 0x5f, 0x4c,
+	0x41, 0x59, 0x4f, 0x55, 0x54, 0x10, 0x21, 0x12, 0x27, 0x0a, 0x23, 0x41, 0x54, 0x54, 0x52, 0x5f,
+	0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x42, 0x59, 0x5f, 0x53, 0x50,
+	0x45, 0x43, 0x49, 0x46, 0x49, 0x45, 0x44, 0x5f, 0x4c, 0x41, 0x59, 0x4f, 0x55, 0x54, 0x10, 0x22,
+	0x12, 0x1c, 0x0a, 0x18, 0x49, 0x4e, 0x43, 0x4f, 0x52, 0x52, 0x45, 0x43, 0x54, 0x5f, 0x4e, 0x55,
+	0x4d, 0x5f, 0x43, 0x48, 0x49, 0x4c, 0x44, 0x5f, 0x54, 0x41, 0x47, 0x53, 0x10, 0x38, 0x12, 0x20,
+	0x0a, 0x1c, 0x49, 0x4e, 0x43, 0x4f, 0x52, 0x52, 0x45, 0x43, 0x54, 0x5f, 0x4d, 0x49, 0x4e, 0x5f,
+	0x4e, 0x55, 0x4d, 0x5f, 0x43, 0x48, 0x49, 0x4c, 0x44, 0x5f, 0x54, 0x41, 0x47, 0x53, 0x10, 0x55,
+	0x12, 0x1d, 0x0a, 0x19, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x43,
+	0x48, 0x49, 0x4c, 0x44, 0x5f, 0x54, 0x41, 0x47, 0x5f, 0x4e, 0x41, 0x4d, 0x45, 0x10, 0x39, 0x12,
+	0x23, 0x0a, 0x1f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x46, 0x49,
+	0x52, 0x53, 0x54, 0x5f, 0x43, 0x48, 0x49, 0x4c, 0x44, 0x5f, 0x54, 0x41, 0x47, 0x5f, 0x4e, 0x41,
+	0x4d, 0x45, 0x10, 0x3a, 0x12, 0x20, 0x0a, 0x1c, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57,
+	0x45, 0x44, 0x5f, 0x4d, 0x41, 0x4e, 0x55, 0x46, 0x41, 0x43, 0x54, 0x55, 0x52, 0x45, 0x44, 0x5f,
+	0x42, 0x4f, 0x44, 0x59, 0x10, 0x40, 0x12, 0x2e, 0x0a, 0x2a, 0x43, 0x48, 0x49, 0x4c, 0x44, 0x5f,
+	0x54, 0x41, 0x47, 0x5f, 0x44, 0x4f, 0x45, 0x53, 0x5f, 0x4e, 0x4f, 0x54, 0x5f, 0x53, 0x41, 0x54,
+	0x49, 0x53, 0x46, 0x59, 0x5f, 0x52, 0x45, 0x46, 0x45, 0x52, 0x45, 0x4e, 0x43, 0x45, 0x5f, 0x50,
+	0x4f, 0x49, 0x4e, 0x54, 0x10, 0x42, 0x12, 0x25, 0x0a, 0x21, 0x4d, 0x41, 0x4e, 0x44, 0x41, 0x54,
+	0x4f, 0x52, 0x59, 0x5f, 0x52, 0x45, 0x46, 0x45, 0x52, 0x45, 0x4e, 0x43, 0x45, 0x5f, 0x50, 0x4f,
+	0x49, 0x4e, 0x54, 0x5f, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e, 0x47, 0x10, 0x43, 0x12, 0x1d, 0x0a,
+	0x19, 0x44, 0x55, 0x50, 0x4c, 0x49, 0x43, 0x41, 0x54, 0x45, 0x5f, 0x52, 0x45, 0x46, 0x45, 0x52,
+	0x45, 0x4e, 0x43, 0x45, 0x5f, 0x50, 0x4f, 0x49, 0x4e, 0x54, 0x10, 0x44, 0x12, 0x24, 0x0a, 0x20,
+	0x54, 0x41, 0x47, 0x5f, 0x4e, 0x4f, 0x54, 0x5f, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f,
+	0x54, 0x4f, 0x5f, 0x48, 0x41, 0x56, 0x45, 0x5f, 0x53, 0x49, 0x42, 0x4c, 0x49, 0x4e, 0x47, 0x53,
+	0x10, 0x57, 0x12, 0x20, 0x0a, 0x1c, 0x54, 0x41, 0x47, 0x5f, 0x52, 0x45, 0x46, 0x45, 0x52, 0x45,
+	0x4e, 0x43, 0x45, 0x5f, 0x50, 0x4f, 0x49, 0x4e, 0x54, 0x5f, 0x43, 0x4f, 0x4e, 0x46, 0x4c, 0x49,
+	0x43, 0x54, 0x10, 0x45, 0x12, 0x37, 0x0a, 0x33, 0x43, 0x48, 0x49, 0x4c, 0x44, 0x5f, 0x54, 0x41,
+	0x47, 0x5f, 0x44, 0x4f, 0x45, 0x53, 0x5f, 0x4e, 0x4f, 0x54, 0x5f, 0x53, 0x41, 0x54, 0x49, 0x53,
+	0x46, 0x59, 0x5f, 0x52, 0x45, 0x46, 0x45, 0x52, 0x45, 0x4e, 0x43, 0x45, 0x5f, 0x50, 0x4f, 0x49,
+	0x4e, 0x54, 0x5f, 0x53, 0x49, 0x4e, 0x47, 0x55, 0x4c, 0x41, 0x52, 0x10, 0x46, 0x12, 0x22, 0x0a,
+	0x1e, 0x42, 0x41, 0x53, 0x45, 0x5f, 0x54, 0x41, 0x47, 0x5f, 0x4d, 0x55, 0x53, 0x54, 0x5f, 0x50,
+	0x52, 0x45, 0x43, 0x45, 0x45, 0x44, 0x5f, 0x41, 0x4c, 0x4c, 0x5f, 0x55, 0x52, 0x4c, 0x53, 0x10,
+	0x4e, 0x12, 0x1e, 0x0a, 0x1a, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e, 0x47, 0x5f, 0x52, 0x45, 0x51,
+	0x55, 0x49, 0x52, 0x45, 0x44, 0x5f, 0x45, 0x58, 0x54, 0x45, 0x4e, 0x53, 0x49, 0x4f, 0x4e, 0x10,
+	0x53, 0x12, 0x23, 0x0a, 0x1f, 0x41, 0x54, 0x54, 0x52, 0x5f, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e,
+	0x47, 0x5f, 0x52, 0x45, 0x51, 0x55, 0x49, 0x52, 0x45, 0x44, 0x5f, 0x45, 0x58, 0x54, 0x45, 0x4e,
+	0x53, 0x49, 0x4f, 0x4e, 0x10, 0x61, 0x12, 0x18, 0x0a, 0x14, 0x44, 0x4f, 0x43, 0x55, 0x4d, 0x45,
+	0x4e, 0x54, 0x5f, 0x54, 0x4f, 0x4f, 0x5f, 0x43, 0x4f, 0x4d, 0x50, 0x4c, 0x45, 0x58, 0x10, 0x56,
+	0x12, 0x10, 0x0a, 0x0c, 0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49, 0x44, 0x5f, 0x55, 0x54, 0x46, 0x38,
+	0x10, 0x60, 0x12, 0x20, 0x0a, 0x1c, 0x44, 0x4f, 0x43, 0x55, 0x4d, 0x45, 0x4e, 0x54, 0x5f, 0x53,
+	0x49, 0x5a, 0x45, 0x5f, 0x4c, 0x49, 0x4d, 0x49, 0x54, 0x5f, 0x45, 0x58, 0x43, 0x45, 0x45, 0x44,
+	0x45, 0x44, 0x10, 0x6c, 0x12, 0x11, 0x0a, 0x0d, 0x44, 0x45, 0x56, 0x5f, 0x4d, 0x4f, 0x44, 0x45,
+	0x5f, 0x4f, 0x4e, 0x4c, 0x59, 0x10, 0x6d, 0x12, 0x25, 0x0a, 0x21, 0x41, 0x4d, 0x50, 0x5f, 0x45,
+	0x4d, 0x41, 0x49, 0x4c, 0x5f, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e, 0x47, 0x5f, 0x53, 0x54, 0x52,
+	0x49, 0x43, 0x54, 0x5f, 0x43, 0x53, 0x53, 0x5f, 0x41, 0x54, 0x54, 0x52, 0x10, 0x78, 0x12, 0x16,
+	0x0a, 0x12, 0x56, 0x41, 0x4c, 0x55, 0x45, 0x5f, 0x53, 0x45, 0x54, 0x5f, 0x4d, 0x49, 0x53, 0x4d,
+	0x41, 0x54, 0x43, 0x48, 0x10, 0x6e, 0x12, 0x1e, 0x0a, 0x1a, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59,
+	0x4e, 0x54, 0x41, 0x58, 0x5f, 0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49, 0x44, 0x5f, 0x41, 0x54, 0x5f,
+	0x52, 0x55, 0x4c, 0x45, 0x10, 0x1d, 0x12, 0x27, 0x0a, 0x23, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59,
+	0x4e, 0x54, 0x41, 0x58, 0x5f, 0x53, 0x54, 0x52, 0x41, 0x59, 0x5f, 0x54, 0x52, 0x41, 0x49, 0x4c,
+	0x49, 0x4e, 0x47, 0x5f, 0x42, 0x41, 0x43, 0x4b, 0x53, 0x4c, 0x41, 0x53, 0x48, 0x10, 0x26, 0x12,
+	0x23, 0x0a, 0x1f, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x55, 0x4e,
+	0x54, 0x45, 0x52, 0x4d, 0x49, 0x4e, 0x41, 0x54, 0x45, 0x44, 0x5f, 0x43, 0x4f, 0x4d, 0x4d, 0x45,
+	0x4e, 0x54, 0x10, 0x27, 0x12, 0x22, 0x0a, 0x1e, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54,
+	0x41, 0x58, 0x5f, 0x55, 0x4e, 0x54, 0x45, 0x52, 0x4d, 0x49, 0x4e, 0x41, 0x54, 0x45, 0x44, 0x5f,
+	0x53, 0x54, 0x52, 0x49, 0x4e, 0x47, 0x10, 0x28, 0x12, 0x16, 0x0a, 0x12, 0x43, 0x53, 0x53, 0x5f,
+	0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x42, 0x41, 0x44, 0x5f, 0x55, 0x52, 0x4c, 0x10, 0x29,
+	0x12, 0x2f, 0x0a, 0x2b, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x45,
+	0x4f, 0x46, 0x5f, 0x49, 0x4e, 0x5f, 0x50, 0x52, 0x45, 0x4c, 0x55, 0x44, 0x45, 0x5f, 0x4f, 0x46,
+	0x5f, 0x51, 0x55, 0x41, 0x4c, 0x49, 0x46, 0x49, 0x45, 0x44, 0x5f, 0x52, 0x55, 0x4c, 0x45, 0x10,
+	0x2a, 0x12, 0x22, 0x0a, 0x1e, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f,
+	0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49, 0x44, 0x5f, 0x44, 0x45, 0x43, 0x4c, 0x41, 0x52, 0x41, 0x54,
+	0x49, 0x4f, 0x4e, 0x10, 0x2b, 0x12, 0x25, 0x0a, 0x21, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e,
+	0x54, 0x41, 0x58, 0x5f, 0x49, 0x4e, 0x43, 0x4f, 0x4d, 0x50, 0x4c, 0x45, 0x54, 0x45, 0x5f, 0x44,
+	0x45, 0x43, 0x4c, 0x41, 0x52, 0x41, 0x54, 0x49, 0x4f, 0x4e, 0x10, 0x2c, 0x12, 0x27, 0x0a, 0x23,
+	0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x45, 0x52, 0x52, 0x4f, 0x52,
+	0x5f, 0x49, 0x4e, 0x5f, 0x50, 0x53, 0x45, 0x55, 0x44, 0x4f, 0x5f, 0x53, 0x45, 0x4c, 0x45, 0x43,
+	0x54, 0x4f, 0x52, 0x10, 0x2d, 0x12, 0x1f, 0x0a, 0x1b, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e,
+	0x54, 0x41, 0x58, 0x5f, 0x4d, 0x49, 0x53, 0x53, 0x49, 0x4e, 0x47, 0x5f, 0x53, 0x45, 0x4c, 0x45,
+	0x43, 0x54, 0x4f, 0x52, 0x10, 0x2e, 0x12, 0x23, 0x0a, 0x1f, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59,
+	0x4e, 0x54, 0x41, 0x58, 0x5f, 0x4e, 0x4f, 0x54, 0x5f, 0x41, 0x5f, 0x53, 0x45, 0x4c, 0x45, 0x43,
+	0x54, 0x4f, 0x52, 0x5f, 0x53, 0x54, 0x41, 0x52, 0x54, 0x10, 0x2f, 0x12, 0x31, 0x0a, 0x2d, 0x43,
+	0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x55, 0x4e, 0x50, 0x41, 0x52, 0x53,
+	0x45, 0x44, 0x5f, 0x49, 0x4e, 0x50, 0x55, 0x54, 0x5f, 0x52, 0x45, 0x4d, 0x41, 0x49, 0x4e, 0x53,
+	0x5f, 0x49, 0x4e, 0x5f, 0x53, 0x45, 0x4c, 0x45, 0x43, 0x54, 0x4f, 0x52, 0x10, 0x30, 0x12, 0x1a,
+	0x0a, 0x16, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x4d, 0x49, 0x53,
+	0x53, 0x49, 0x4e, 0x47, 0x5f, 0x55, 0x52, 0x4c, 0x10, 0x34, 0x12, 0x1a, 0x0a, 0x16, 0x43, 0x53,
+	0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49, 0x44,
+	0x5f, 0x55, 0x52, 0x4c, 0x10, 0x35, 0x12, 0x23, 0x0a, 0x1f, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59,
+	0x4e, 0x54, 0x41, 0x58, 0x5f, 0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49, 0x44, 0x5f, 0x55, 0x52, 0x4c,
+	0x5f, 0x50, 0x52, 0x4f, 0x54, 0x4f, 0x43, 0x4f, 0x4c, 0x10, 0x36, 0x12, 0x20, 0x0a, 0x1c, 0x43,
+	0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c,
+	0x4f, 0x57, 0x45, 0x44, 0x5f, 0x44, 0x4f, 0x4d, 0x41, 0x49, 0x4e, 0x10, 0x3f, 0x12, 0x26, 0x0a,
+	0x22, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x44, 0x49, 0x53, 0x41,
+	0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x52, 0x45, 0x4c, 0x41, 0x54, 0x49, 0x56, 0x45, 0x5f,
+	0x55, 0x52, 0x4c, 0x10, 0x37, 0x12, 0x24, 0x0a, 0x20, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e,
+	0x54, 0x41, 0x58, 0x5f, 0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49, 0x44, 0x5f, 0x41, 0x54, 0x54, 0x52,
+	0x5f, 0x53, 0x45, 0x4c, 0x45, 0x43, 0x54, 0x4f, 0x52, 0x10, 0x3b, 0x12, 0x1f, 0x0a, 0x1b, 0x43,
+	0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x49, 0x4e, 0x56, 0x41, 0x4c, 0x49,
+	0x44, 0x5f, 0x50, 0x52, 0x4f, 0x50, 0x45, 0x52, 0x54, 0x59, 0x10, 0x5a, 0x12, 0x26, 0x0a, 0x22,
+	0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x49, 0x4e, 0x56, 0x41, 0x4c,
+	0x49, 0x44, 0x5f, 0x50, 0x52, 0x4f, 0x50, 0x45, 0x52, 0x54, 0x59, 0x5f, 0x4e, 0x4f, 0x4c, 0x49,
+	0x53, 0x54, 0x10, 0x5f, 0x12, 0x31, 0x0a, 0x2d, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54,
+	0x41, 0x58, 0x5f, 0x51, 0x55, 0x41, 0x4c, 0x49, 0x46, 0x49, 0x45, 0x44, 0x5f, 0x52, 0x55, 0x4c,
+	0x45, 0x5f, 0x48, 0x41, 0x53, 0x5f, 0x4e, 0x4f, 0x5f, 0x44, 0x45, 0x43, 0x4c, 0x41, 0x52, 0x41,
+	0x54, 0x49, 0x4f, 0x4e, 0x53, 0x10, 0x5b, 0x12, 0x40, 0x0a, 0x3c, 0x43, 0x53, 0x53, 0x5f, 0x53,
+	0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44,
+	0x5f, 0x51, 0x55, 0x41, 0x4c, 0x49, 0x46, 0x49, 0x45, 0x44, 0x5f, 0x52, 0x55, 0x4c, 0x45, 0x5f,
+	0x4d, 0x55, 0x53, 0x54, 0x5f, 0x42, 0x45, 0x5f, 0x49, 0x4e, 0x53, 0x49, 0x44, 0x45, 0x5f, 0x4b,
+	0x45, 0x59, 0x46, 0x52, 0x41, 0x4d, 0x45, 0x10, 0x5c, 0x12, 0x32, 0x0a, 0x2e, 0x43, 0x53, 0x53,
+	0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57,
+	0x45, 0x44, 0x5f, 0x4b, 0x45, 0x59, 0x46, 0x52, 0x41, 0x4d, 0x45, 0x5f, 0x49, 0x4e, 0x53, 0x49,
+	0x44, 0x45, 0x5f, 0x4b, 0x45, 0x59, 0x46, 0x52, 0x41, 0x4d, 0x45, 0x10, 0x5d, 0x12, 0x24, 0x0a,
+	0x20, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x4d, 0x41, 0x4c, 0x46,
+	0x4f, 0x52, 0x4d, 0x45, 0x44, 0x5f, 0x4d, 0x45, 0x44, 0x49, 0x41, 0x5f, 0x51, 0x55, 0x45, 0x52,
+	0x59, 0x10, 0x62, 0x12, 0x24, 0x0a, 0x20, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41,
+	0x58, 0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x4d, 0x45, 0x44,
+	0x49, 0x41, 0x5f, 0x54, 0x59, 0x50, 0x45, 0x10, 0x63, 0x12, 0x27, 0x0a, 0x23, 0x43, 0x53, 0x53,
+	0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57,
+	0x45, 0x44, 0x5f, 0x4d, 0x45, 0x44, 0x49, 0x41, 0x5f, 0x46, 0x45, 0x41, 0x54, 0x55, 0x52, 0x45,
+	0x10, 0x64, 0x12, 0x27, 0x0a, 0x23, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58,
+	0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x41, 0x54, 0x54, 0x52,
+	0x5f, 0x53, 0x45, 0x4c, 0x45, 0x43, 0x54, 0x4f, 0x52, 0x10, 0x72, 0x12, 0x26, 0x0a, 0x22, 0x43,
+	0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c,
+	0x4f, 0x57, 0x45, 0x44, 0x5f, 0x50, 0x53, 0x45, 0x55, 0x44, 0x4f, 0x5f, 0x43, 0x4c, 0x41, 0x53,
+	0x53, 0x10, 0x73, 0x12, 0x28, 0x0a, 0x24, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41,
+	0x58, 0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x50, 0x53, 0x45,
+	0x55, 0x44, 0x4f, 0x5f, 0x45, 0x4c, 0x45, 0x4d, 0x45, 0x4e, 0x54, 0x10, 0x74, 0x12, 0x28, 0x0a,
+	0x24, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x44, 0x49, 0x53, 0x41,
+	0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x50, 0x52, 0x4f, 0x50, 0x45, 0x52, 0x54, 0x59, 0x5f,
+	0x56, 0x41, 0x4c, 0x55, 0x45, 0x10, 0x47, 0x12, 0x23, 0x0a, 0x1f, 0x43, 0x53, 0x53, 0x5f, 0x53,
+	0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44,
+	0x5f, 0x49, 0x4d, 0x50, 0x4f, 0x52, 0x54, 0x41, 0x4e, 0x54, 0x10, 0x75, 0x12, 0x1a, 0x0a, 0x16,
+	0x43, 0x53, 0x53, 0x5f, 0x45, 0x58, 0x43, 0x45, 0x53, 0x53, 0x49, 0x56, 0x45, 0x4c, 0x59, 0x5f,
+	0x4e, 0x45, 0x53, 0x54, 0x45, 0x44, 0x10, 0x6b, 0x12, 0x32, 0x0a, 0x2e, 0x43, 0x53, 0x53, 0x5f,
+	0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45,
+	0x44, 0x5f, 0x50, 0x52, 0x4f, 0x50, 0x45, 0x52, 0x54, 0x59, 0x5f, 0x56, 0x41, 0x4c, 0x55, 0x45,
+	0x5f, 0x57, 0x49, 0x54, 0x48, 0x5f, 0x48, 0x49, 0x4e, 0x54, 0x10, 0x48, 0x12, 0x31, 0x0a, 0x2d,
+	0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x50, 0x52, 0x4f, 0x50, 0x45,
+	0x52, 0x54, 0x59, 0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45, 0x44, 0x5f, 0x57,
+	0x49, 0x54, 0x48, 0x49, 0x4e, 0x5f, 0x41, 0x54, 0x5f, 0x52, 0x55, 0x4c, 0x45, 0x10, 0x49, 0x12,
+	0x30, 0x0a, 0x2c, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f, 0x50, 0x52,
+	0x4f, 0x50, 0x45, 0x52, 0x54, 0x59, 0x5f, 0x44, 0x49, 0x53, 0x41, 0x4c, 0x4c, 0x4f, 0x57, 0x45,
+	0x44, 0x5f, 0x54, 0x4f, 0x47, 0x45, 0x54, 0x48, 0x45, 0x52, 0x5f, 0x57, 0x49, 0x54, 0x48, 0x10,
+	0x4a, 0x12, 0x2e, 0x0a, 0x2a, 0x43, 0x53, 0x53, 0x5f, 0x53, 0x59, 0x4e, 0x54, 0x41, 0x58, 0x5f,
+	0x50, 0x52, 0x4f, 0x50, 0x45, 0x52, 0x54, 0x59, 0x5f, 0x52, 0x45, 0x51, 0x55, 0x49, 0x52, 0x45,
+	0x53, 0x5f, 0x51, 0x55, 0x41, 0x4c, 0x49, 0x46, 0x49, 0x43, 0x41, 0x54, 0x49, 0x4f, 0x4e, 0x10,
+	0x4b, 0x22, 0x6d, 0x0a, 0x10, 0x45, 0x72, 0x72, 0x6f, 0x72, 0x53, 0x70, 0x65, 0x63, 0x69, 0x66,
+	0x69, 0x63, 0x69, 0x74, 0x79, 0x12, 0x37, 0x0a, 0x04, 0x63, 0x6f, 0x64, 0x65, 0x18, 0x01, 0x20,
+	0x01, 0x28, 0x0e, 0x32, 0x23, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61,
+	0x74, 0x6f, 0x72, 0x2e, 0x56, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x45, 0x72,
+	0x72, 0x6f, 0x72, 0x2e, 0x43, 0x6f, 0x64, 0x65, 0x52, 0x04, 0x63, 0x6f, 0x64, 0x65, 0x12, 0x20,
+	0x0a, 0x0b, 0x73, 0x70, 0x65, 0x63, 0x69, 0x66, 0x69, 0x63, 0x69, 0x74, 0x79, 0x18, 0x02, 0x20,
+	0x01, 0x28, 0x05, 0x52, 0x0b, 0x73, 0x70, 0x65, 0x63, 0x69, 0x66, 0x69, 0x63, 0x69, 0x74, 0x79,
+	0x22, 0x5e, 0x0a, 0x0b, 0x45, 0x72, 0x72, 0x6f, 0x72, 0x46, 0x6f, 0x72, 0x6d, 0x61, 0x74, 0x12,
+	0x37, 0x0a, 0x04, 0x63, 0x6f, 0x64, 0x65, 0x18, 0x01, 0x20, 0x01, 0x28, 0x0e, 0x32, 0x23, 0x2e,
+	0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x56, 0x61,
+	0x6c, 0x69, 0x64, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x45, 0x72, 0x72, 0x6f, 0x72, 0x2e, 0x43, 0x6f,
+	0x64, 0x65, 0x52, 0x04, 0x63, 0x6f, 0x64, 0x65, 0x12, 0x16, 0x0a, 0x06, 0x66, 0x6f, 0x72, 0x6d,
+	0x61, 0x74, 0x18, 0x02, 0x20, 0x01, 0x28, 0x09, 0x52, 0x06, 0x66, 0x6f, 0x72, 0x6d, 0x61, 0x74,
+	0x22, 0x5d, 0x0a, 0x11, 0x56, 0x61, 0x6c, 0x75, 0x65, 0x53, 0x65, 0x74, 0x50, 0x72, 0x6f, 0x76,
+	0x69, 0x73, 0x69, 0x6f, 0x6e, 0x12, 0x32, 0x0a, 0x03, 0x73, 0x65, 0x74, 0x18, 0x01, 0x20, 0x01,
+	0x28, 0x0e, 0x32, 0x20, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74,
+	0x6f, 0x72, 0x2e, 0x41, 0x74, 0x74, 0x72, 0x53, 0x70, 0x65, 0x63, 0x2e, 0x56, 0x61, 0x6c, 0x75,
+	0x65, 0x53, 0x65, 0x74, 0x52, 0x03, 0x73, 0x65, 0x74, 0x12, 0x14, 0x0a, 0x05, 0x76, 0x61, 0x6c,
+	0x75, 0x65, 0x18, 0x02, 0x20, 0x01, 0x28, 0x09, 0x52, 0x05, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x22,
+	0xa7, 0x01, 0x0a, 0x13, 0x56, 0x61, 0x6c, 0x75, 0x65, 0x53, 0x65, 0x74, 0x52, 0x65, 0x71, 0x75,
+	0x69, 0x72, 0x65, 0x6d, 0x65, 0x6e, 0x74, 0x12, 0x3e, 0x0a, 0x09, 0x70, 0x72, 0x6f, 0x76, 0x69,
+	0x73, 0x69, 0x6f, 0x6e, 0x18, 0x01, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x20, 0x2e, 0x61, 0x6d, 0x70,
+	0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x56, 0x61, 0x6c, 0x75, 0x65,
+	0x53, 0x65, 0x74, 0x50, 0x72, 0x6f, 0x76, 0x69, 0x73, 0x69, 0x6f, 0x6e, 0x52, 0x09, 0x70, 0x72,
+	0x6f, 0x76, 0x69, 0x73, 0x69, 0x6f, 0x6e, 0x12, 0x50, 0x0a, 0x14, 0x65, 0x72, 0x72, 0x6f, 0x72,
+	0x5f, 0x69, 0x66, 0x5f, 0x75, 0x6e, 0x73, 0x61, 0x74, 0x69, 0x73, 0x66, 0x69, 0x65, 0x64, 0x18,
+	0x02, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x1e, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69,
+	0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x56, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x69, 0x6f, 0x6e,
+	0x45, 0x72, 0x72, 0x6f, 0x72, 0x52, 0x12, 0x65, 0x72, 0x72, 0x6f, 0x72, 0x49, 0x66, 0x55, 0x6e,
+	0x73, 0x61, 0x74, 0x69, 0x73, 0x66, 0x69, 0x65, 0x64, 0x22, 0xa5, 0x04, 0x0a, 0x10, 0x56, 0x61,
+	0x6c, 0x69, 0x64, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x52, 0x65, 0x73, 0x75, 0x6c, 0x74, 0x12, 0x3e,
+	0x0a, 0x06, 0x73, 0x74, 0x61, 0x74, 0x75, 0x73, 0x18, 0x02, 0x20, 0x01, 0x28, 0x0e, 0x32, 0x26,
+	0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x56,
+	0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x52, 0x65, 0x73, 0x75, 0x6c, 0x74, 0x2e,
+	0x53, 0x74, 0x61, 0x74, 0x75, 0x73, 0x52, 0x06, 0x73, 0x74, 0x61, 0x74, 0x75, 0x73, 0x12, 0x36,
+	0x0a, 0x06, 0x65, 0x72, 0x72, 0x6f, 0x72, 0x73, 0x18, 0x01, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x1e,
+	0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x56,
+	0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x45, 0x72, 0x72, 0x6f, 0x72, 0x52, 0x06,
+	0x65, 0x72, 0x72, 0x6f, 0x72, 0x73, 0x12, 0x31, 0x0a, 0x12, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61,
+	0x74, 0x6f, 0x72, 0x5f, 0x72, 0x65, 0x76, 0x69, 0x73, 0x69, 0x6f, 0x6e, 0x18, 0x03, 0x20, 0x01,
+	0x28, 0x05, 0x3a, 0x02, 0x2d, 0x31, 0x52, 0x11, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f,
+	0x72, 0x52, 0x65, 0x76, 0x69, 0x73, 0x69, 0x6f, 0x6e, 0x12, 0x30, 0x0a, 0x12, 0x73, 0x70, 0x65,
+	0x63, 0x5f, 0x66, 0x69, 0x6c, 0x65, 0x5f, 0x72, 0x65, 0x76, 0x69, 0x73, 0x69, 0x6f, 0x6e, 0x18,
+	0x04, 0x20, 0x01, 0x28, 0x05, 0x3a, 0x02, 0x2d, 0x31, 0x52, 0x10, 0x73, 0x70, 0x65, 0x63, 0x46,
+	0x69, 0x6c, 0x65, 0x52, 0x65, 0x76, 0x69, 0x73, 0x69, 0x6f, 0x6e, 0x12, 0x32, 0x0a, 0x13, 0x74,
+	0x72, 0x61, 0x6e, 0x73, 0x66, 0x6f, 0x72, 0x6d, 0x65, 0x72, 0x5f, 0x76, 0x65, 0x72, 0x73, 0x69,
+	0x6f, 0x6e, 0x18, 0x06, 0x20, 0x01, 0x28, 0x05, 0x3a, 0x01, 0x30, 0x52, 0x12, 0x74, 0x72, 0x61,
+	0x6e, 0x73, 0x66, 0x6f, 0x72, 0x6d, 0x65, 0x72, 0x56, 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x12,
+	0x27, 0x0a, 0x0f, 0x74, 0x79, 0x70, 0x65, 0x5f, 0x69, 0x64, 0x65, 0x6e, 0x74, 0x69, 0x66, 0x69,
+	0x65, 0x72, 0x18, 0x05, 0x20, 0x03, 0x28, 0x09, 0x52, 0x0e, 0x74, 0x79, 0x70, 0x65, 0x49, 0x64,
+	0x65, 0x6e, 0x74, 0x69, 0x66, 0x69, 0x65, 0x72, 0x12, 0x52, 0x0a, 0x14, 0x76, 0x61, 0x6c, 0x75,
+	0x65, 0x5f, 0x73, 0x65, 0x74, 0x5f, 0x70, 0x72, 0x6f, 0x76, 0x69, 0x73, 0x69, 0x6f, 0x6e, 0x73,
+	0x18, 0x07, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x20, 0x2e, 0x61, 0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c,
+	0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x56, 0x61, 0x6c, 0x75, 0x65, 0x53, 0x65, 0x74, 0x50,
+	0x72, 0x6f, 0x76, 0x69, 0x73, 0x69, 0x6f, 0x6e, 0x52, 0x12, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x53,
+	0x65, 0x74, 0x50, 0x72, 0x6f, 0x76, 0x69, 0x73, 0x69, 0x6f, 0x6e, 0x73, 0x12, 0x58, 0x0a, 0x16,
+	0x76, 0x61, 0x6c, 0x75, 0x65, 0x5f, 0x73, 0x65, 0x74, 0x5f, 0x72, 0x65, 0x71, 0x75, 0x69, 0x72,
+	0x65, 0x6d, 0x65, 0x6e, 0x74, 0x73, 0x18, 0x08, 0x20, 0x03, 0x28, 0x0b, 0x32, 0x22, 0x2e, 0x61,
+	0x6d, 0x70, 0x2e, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72, 0x2e, 0x56, 0x61, 0x6c,
+	0x75, 0x65, 0x53, 0x65, 0x74, 0x52, 0x65, 0x71, 0x75, 0x69, 0x72, 0x65, 0x6d, 0x65, 0x6e, 0x74,
+	0x52, 0x14, 0x76, 0x61, 0x6c, 0x75, 0x65, 0x53, 0x65, 0x74, 0x52, 0x65, 0x71, 0x75, 0x69, 0x72,
+	0x65, 0x6d, 0x65, 0x6e, 0x74, 0x73, 0x22, 0x29, 0x0a, 0x06, 0x53, 0x74, 0x61, 0x74, 0x75, 0x73,
+	0x12, 0x0b, 0x0a, 0x07, 0x55, 0x4e, 0x4b, 0x4e, 0x4f, 0x57, 0x4e, 0x10, 0x00, 0x12, 0x08, 0x0a,
+	0x04, 0x50, 0x41, 0x53, 0x53, 0x10, 0x01, 0x12, 0x08, 0x0a, 0x04, 0x46, 0x41, 0x49, 0x4c, 0x10,
+	0x02, 0x42, 0x21, 0x5a, 0x1f, 0x2e, 0x2f, 0x76, 0x61, 0x6c, 0x69, 0x64, 0x61, 0x74, 0x6f, 0x72,
+	0x2e, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x3b, 0x61, 0x6d, 0x70, 0x5f, 0x76, 0x61, 0x6c, 0x69, 0x64,
+	0x61, 0x74, 0x6f, 0x72,
+}
+
+var (
+	file_validator_proto_rawDescOnce sync.Once
+	file_validator_proto_rawDescData = file_validator_proto_rawDesc
+)
 
-func (m *ValidatorInfo) GetValidatorRevision() int32 {
-	if m != nil && m.ValidatorRevision != nil {
-		return *m.ValidatorRevision
-	}
-	return Default_ValidatorInfo_ValidatorRevision
-}
-
-func (m *ValidatorInfo) GetSpecFileRevision() int32 {
-	if m != nil && m.SpecFileRevision != nil {
-		return *m.SpecFileRevision
-	}
-	return Default_ValidatorInfo_SpecFileRevision
-}
-
-func init() {
-	proto.RegisterEnum("amp.validator.AttrSpec_ValueSet", AttrSpec_ValueSet_name, AttrSpec_ValueSet_value)
-	proto.RegisterEnum("amp.validator.AttrSpec_DispatchKeyType", AttrSpec_DispatchKeyType_name, AttrSpec_DispatchKeyType_value)
-	proto.RegisterEnum("amp.validator.AmpLayout_Layout", AmpLayout_Layout_name, AmpLayout_Layout_value)
-	proto.RegisterEnum("amp.validator.AncestorMarker_Marker", AncestorMarker_Marker_name, AncestorMarker_Marker_value)
-	proto.RegisterEnum("amp.validator.ExtensionSpec_ExtensionType", ExtensionSpec_ExtensionType_name, ExtensionSpec_ExtensionType_value)
-	proto.RegisterEnum("amp.validator.ExtensionSpec_ExtensionUsageRequirement", ExtensionSpec_ExtensionUsageRequirement_name, ExtensionSpec_ExtensionUsageRequirement_value)
-	proto.RegisterEnum("amp.validator.HtmlFormat_Code", HtmlFormat_Code_name, HtmlFormat_Code_value)
-	proto.RegisterEnum("amp.validator.TagSpec_NamedId", TagSpec_NamedId_name, TagSpec_NamedId_value)
-	proto.RegisterEnum("amp.validator.ErrorCategory_Code", ErrorCategory_Code_name, ErrorCategory_Code_value)
-	proto.RegisterEnum("amp.validator.ValidationError_Severity", ValidationError_Severity_name, ValidationError_Severity_value)
-	proto.RegisterEnum("amp.validator.ValidationError_Code", ValidationError_Code_name, ValidationError_Code_value)
-	proto.RegisterEnum("amp.validator.ValidationResult_Status", ValidationResult_Status_name, ValidationResult_Status_value)
-	proto.RegisterType((*AttrTriggerSpec)(nil), "amp.validator.AttrTriggerSpec")
-	proto.RegisterType((*PropertySpec)(nil), "amp.validator.PropertySpec")
-	proto.RegisterType((*PropertySpecList)(nil), "amp.validator.PropertySpecList")
-	proto.RegisterType((*UrlSpec)(nil), "amp.validator.UrlSpec")
-	proto.RegisterType((*CssDeclaration)(nil), "amp.validator.CssDeclaration")
-	proto.RegisterType((*AttrSpec)(nil), "amp.validator.AttrSpec")
-	proto.RegisterType((*AttrList)(nil), "amp.validator.AttrList")
-	proto.RegisterType((*DescendantTagList)(nil), "amp.validator.DescendantTagList")
-	proto.RegisterType((*DeclarationList)(nil), "amp.validator.DeclarationList")
-	proto.RegisterType((*DisallowedCDataRegex)(nil), "amp.validator.DisallowedCDataRegex")
-	proto.RegisterType((*MediaQuerySpec)(nil), "amp.validator.MediaQuerySpec")
-	proto.RegisterType((*SelectorSpec)(nil), "amp.validator.SelectorSpec")
-	proto.RegisterType((*AtRuleSpec)(nil), "amp.validator.AtRuleSpec")
-	proto.RegisterType((*CssSpec)(nil), "amp.validator.CssSpec")
-	proto.RegisterType((*CdataSpec)(nil), "amp.validator.CdataSpec")
-	proto.RegisterType((*AmpLayout)(nil), "amp.validator.AmpLayout")
-	proto.RegisterType((*AncestorMarker)(nil), "amp.validator.AncestorMarker")
-	proto.RegisterType((*ChildTagSpec)(nil), "amp.validator.ChildTagSpec")
-	proto.RegisterType((*ReferencePoint)(nil), "amp.validator.ReferencePoint")
-	proto.RegisterType((*ExtensionSpec)(nil), "amp.validator.ExtensionSpec")
-	proto.RegisterType((*HtmlFormat)(nil), "amp.validator.HtmlFormat")
-	proto.RegisterType((*TagSpec)(nil), "amp.validator.TagSpec")
-	proto.RegisterType((*DocCssSpec)(nil), "amp.validator.DocCssSpec")
-	proto.RegisterType((*ValidatorRules)(nil), "amp.validator.ValidatorRules")
-	proto.RegisterType((*ErrorCategory)(nil), "amp.validator.ErrorCategory")
-	proto.RegisterType((*ValidationError)(nil), "amp.validator.ValidationError")
-	proto.RegisterType((*ErrorSpecificity)(nil), "amp.validator.ErrorSpecificity")
-	proto.RegisterType((*ErrorFormat)(nil), "amp.validator.ErrorFormat")
-	proto.RegisterType((*ValueSetProvision)(nil), "amp.validator.ValueSetProvision")
-	proto.RegisterType((*ValueSetRequirement)(nil), "amp.validator.ValueSetRequirement")
-	proto.RegisterType((*ValidationResult)(nil), "amp.validator.ValidationResult")
-	proto.RegisterType((*ValidatorInfo)(nil), "amp.validator.ValidatorInfo")
-}
-
-func init() { proto.RegisterFile("validator.proto", fileDescriptor_bf1c6ec7c0d80dd5) }
-
-var fileDescriptor_bf1c6ec7c0d80dd5 = []byte{
-	// 5181 bytes of a gzipped FileDescriptorProto
-	0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0xff, 0xa4, 0x7b, 0xdd, 0x76, 0x1b, 0x47,
-	0x72, 0xbf, 0xf9, 0x0d, 0x16, 0x49, 0x70, 0xd8, 0xa4, 0x68, 0xe8, 0x9b, 0x1a, 0xcb, 0x96, 0x6c,
-	0xad, 0x69, 0x5b, 0xeb, 0xb5, 0xbd, 0x5a, 0xaf, 0xbd, 0x43, 0xa0, 0x21, 0x8e, 0x35, 0x98, 0x81,
-	0x7a, 0x06, 0x94, 0xb8, 0xff, 0xdd, 0xed, 0xff, 0x08, 0x68, 0x52, 0xb3, 0xc6, 0x97, 0x67, 0x06,
-	0xb2, 0x98, 0x9b, 0xbc, 0x42, 0xce, 0xd9, 0x93, 0x9b, 0xdc, 0xe7, 0xe4, 0x05, 0x72, 0x95, 0xcb,
-	0xbc, 0x42, 0xae, 0xf2, 0x2e, 0x49, 0x4e, 0x4e, 0x75, 0xcf, 0x17, 0x06, 0xa0, 0xa4, 0xdd, 0x5c,
-	0x89, 0x53, 0xf5, 0xab, 0xee, 0xea, 0xea, 0xea, 0xaa, 0xea, 0x6a, 0x08, 0xb6, 0x5f, 0xf9, 0xfd,
-	0xa0, 0xe7, 0xc7, 0xa3, 0xf0, 0x70, 0x1c, 0x8e, 0xe2, 0x11, 0xd9, 0xf2, 0x07, 0xe3, 0xc3, 0x8c,
-	0xa8, 0x0b, 0xd8, 0x36, 0xe2, 0x38, 0xf4, 0xc2, 0xe0, 0xfc, 0x5c, 0x84, 0xee, 0x58, 0x74, 0xc9,
-	0x5d, 0xa8, 0x06, 0x67, 0xfc, 0x95, 0xdf, 0x9f, 0x08, 0x1e, 0x8a, 0x73, 0xf1, 0xba, 0xb6, 0x70,
-	0xb0, 0x70, 0x7f, 0x9d, 0x6d, 0x06, 0x67, 0x27, 0x48, 0x64, 0x48, 0x23, 0xbf, 0x00, 0xe2, 0xf7,
-	0xa3, 0x11, 0x0f, 0xc5, 0x4f, 0x93, 0x20, 0x14, 0x11, 0xf7, 0xe3, 0x38, 0xac, 0x2d, 0x1e, 0x2c,
-	0xdd, 0x5f, 0x67, 0x1a, 0x72, 0x58, 0xc2, 0xc0, 0xe1, 0xf5, 0x0b, 0xd8, 0x6c, 0x87, 0xa3, 0xb1,
-	0x08, 0xe3, 0x0b, 0x39, 0x07, 0x81, 0xe5, 0xa1, 0x3f, 0x10, 0xc9, 0xc8, 0xf2, 0x6f, 0x72, 0x03,
-	0xd6, 0x07, 0xfe, 0x50, 0xaa, 0x75, 0x51, 0x5b, 0x3c, 0x58, 0xb8, 0x5f, 0x61, 0x39, 0x81, 0xec,
-	0xc1, 0x8a, 0x54, 0xa9, 0xb6, 0x24, 0x45, 0xd4, 0x07, 0xb9, 0x03, 0x9b, 0x4a, 0xd1, 0xde, 0x68,
-	0xf2, 0xa2, 0x2f, 0x6a, 0xcb, 0x07, 0x0b, 0xf7, 0x17, 0xd8, 0x86, 0xa4, 0x35, 0x24, 0x49, 0x77,
-	0x40, 0x2b, 0x4e, 0x6d, 0x05, 0x51, 0x4c, 0x7e, 0x03, 0x30, 0x56, 0xb4, 0x40, 0x44, 0xb5, 0x85,
-	0x83, 0xa5, 0xfb, 0x1b, 0x0f, 0xaf, 0x1f, 0x4e, 0x59, 0xe6, 0xb0, 0x28, 0xc4, 0x0a, 0x70, 0xfd,
-	0xef, 0x60, 0xad, 0x13, 0xf6, 0xe5, 0x32, 0xae, 0x41, 0x45, 0x5a, 0xb5, 0x3b, 0xea, 0xcb, 0x51,
-	0xd6, 0x59, 0xf6, 0x4d, 0x1e, 0x40, 0xd5, 0xef, 0xf7, 0x47, 0x3f, 0xf3, 0x50, 0xf4, 0xfd, 0x38,
-	0x78, 0x25, 0xd4, 0x9a, 0x1e, 0x2d, 0xc7, 0xe1, 0x44, 0xb0, 0x2d, 0xc9, 0x63, 0x09, 0x8b, 0x7c,
-	0x04, 0x1b, 0x0a, 0x2c, 0x06, 0xe3, 0xf8, 0x42, 0xae, 0xb1, 0xf2, 0x68, 0xe5, 0xcc, 0xef, 0x47,
-	0x82, 0x81, 0xe4, 0x50, 0x64, 0xe8, 0x14, 0xaa, 0xf5, 0x28, 0x6a, 0x88, 0x6e, 0xdf, 0x0f, 0xfd,
-	0x38, 0x18, 0x0d, 0xe7, 0x5a, 0xf2, 0x36, 0x28, 0x0b, 0xf0, 0xae, 0x1f, 0x89, 0x20, 0xd9, 0x14,
-	0x90, 0xa4, 0x3a, 0x52, 0xf4, 0x7f, 0xda, 0x80, 0x0a, 0xee, 0x8b, 0x5c, 0xc4, 0x4d, 0x00, 0x31,
-	0xf4, 0x5f, 0xf4, 0x45, 0x8f, 0xbf, 0xb8, 0xa8, 0xbd, 0x2f, 0xc1, 0xeb, 0x09, 0xe5, 0xe8, 0x02,
-	0x07, 0xeb, 0x05, 0x51, 0xc6, 0xaf, 0xa9, 0xc1, 0x52, 0xd2, 0xd1, 0xc5, 0x5c, 0x0d, 0x1e, 0xc0,
-	0x8e, 0xdf, 0x8f, 0x45, 0x38, 0x94, 0xcb, 0xe3, 0x48, 0x8b, 0x72, 0xe7, 0xc8, 0x18, 0x36, 0xd2,
-	0xa7, 0x37, 0x7e, 0xa9, 0xbc, 0xf1, 0xf7, 0x60, 0x3b, 0xfb, 0xe0, 0xa3, 0xa1, 0x18, 0x9d, 0xd5,
-	0x36, 0xe5, 0x4c, 0xd5, 0x8c, 0xec, 0x20, 0x75, 0x1a, 0xe8, 0x0f, 0x2f, 0x46, 0x67, 0xb5, 0x2b,
-	0x25, 0xa0, 0x81, 0xd4, 0xdc, 0x95, 0x96, 0xa5, 0x42, 0x89, 0x2b, 0x95, 0x8c, 0x46, 0xca, 0x46,
-	0xcb, 0x01, 0xea, 0x50, 0x6c, 0xcb, 0xb1, 0x15, 0x40, 0x1d, 0x89, 0x4f, 0x60, 0xa7, 0x00, 0x48,
-	0xc6, 0x59, 0x91, 0xb0, 0xed, 0x1c, 0xa6, 0x06, 0xfb, 0x25, 0xac, 0x2b, 0xec, 0x24, 0xec, 0xd7,
-	0xaa, 0x07, 0x0b, 0xf7, 0x37, 0x1e, 0xee, 0x97, 0x1c, 0x30, 0x71, 0x32, 0x56, 0x91, 0xc0, 0x4e,
-	0xd8, 0x27, 0x3f, 0x80, 0xa6, 0x84, 0x0a, 0xce, 0xbb, 0x21, 0x65, 0x6f, 0xbf, 0xc1, 0x79, 0xd1,
-	0xe3, 0x13, 0x05, 0xda, 0x99, 0x1c, 0xd1, 0x61, 0x2b, 0x3d, 0x39, 0x5d, 0xde, 0x8d, 0xa2, 0xda,
-	0x75, 0x69, 0xf8, 0xf4, 0xe8, 0x74, 0xeb, 0x51, 0x44, 0x3e, 0x4e, 0x17, 0x84, 0x98, 0xe8, 0xd5,
-	0xb9, 0xc4, 0xdd, 0x90, 0xb8, 0x6a, 0x8a, 0x73, 0x5f, 0x9d, 0x23, 0xd4, 0x04, 0xcd, 0xef, 0xf5,
-	0x92, 0xa8, 0x11, 0x8f, 0x78, 0x24, 0xe2, 0xda, 0xd5, 0x83, 0x85, 0xfb, 0xd5, 0x87, 0x07, 0x25,
-	0xd5, 0x52, 0xbf, 0x3b, 0x94, 0xc1, 0xc4, 0x15, 0x31, 0xdb, 0xf2, 0x7b, 0x3d, 0xf9, 0xe1, 0x8d,
-	0x5c, 0x11, 0x93, 0x63, 0x50, 0xca, 0xaa, 0xcd, 0x96, 0x23, 0x5d, 0x7b, 0xd7, 0x91, 0xa4, 0xa0,
-	0x74, 0x07, 0x1c, 0xe9, 0x1b, 0x58, 0x8b, 0x55, 0x60, 0xab, 0x69, 0xd2, 0x4c, 0xb7, 0xe6, 0x8c,
-	0x50, 0x08, 0x7d, 0x2c, 0x85, 0x93, 0x2f, 0x61, 0x1f, 0x3d, 0x1c, 0x0f, 0x9e, 0xe8, 0x4d, 0xc5,
-	0xc2, 0x55, 0xb9, 0x9f, 0x7b, 0x39, 0xb7, 0x10, 0x13, 0x0f, 0x60, 0xa3, 0x27, 0xc6, 0xa1, 0xe8,
-	0xca, 0xa3, 0x59, 0x5b, 0x93, 0xd0, 0x22, 0x09, 0x7d, 0xb4, 0xf0, 0x29, 0x37, 0xbf, 0xa2, 0x7c,
-	0xb4, 0x40, 0xc6, 0xad, 0x6e, 0xc2, 0x76, 0x37, 0x8a, 0x78, 0x2f, 0x3f, 0xe9, 0xb5, 0x3d, 0x19,
-	0xa6, 0x6e, 0x96, 0x96, 0x30, 0x1d, 0x0e, 0x58, 0xb5, 0x3b, 0x1d, 0x1e, 0x4e, 0x61, 0xb3, 0x17,
-	0x44, 0x63, 0x3f, 0xee, 0xbe, 0xe4, 0x3f, 0x8a, 0x8b, 0xda, 0x96, 0xb4, 0xe4, 0xbd, 0xcb, 0x2c,
-	0xd9, 0x48, 0xb0, 0x4f, 0xc4, 0x85, 0x77, 0x31, 0x16, 0x8f, 0xb6, 0x6c, 0xc7, 0xa6, 0xbc, 0x61,
-	0xba, 0x6d, 0xc3, 0xab, 0x1f, 0xb3, 0x8d, 0x5e, 0xce, 0x27, 0x77, 0xa0, 0x12, 0x0c, 0xc6, 0xfd,
-	0xa0, 0x1b, 0xc4, 0xb5, 0x9d, 0x62, 0xc0, 0xca, 0xc8, 0xe4, 0x53, 0x20, 0x59, 0x7e, 0x10, 0xaf,
-	0x63, 0x31, 0x8c, 0x70, 0x21, 0xbb, 0xf2, 0x68, 0xed, 0xa4, 0x1c, 0x9a, 0x32, 0xc8, 0x0f, 0xb0,
-	0x93, 0xa7, 0x93, 0x61, 0x57, 0x44, 0xf1, 0x28, 0xac, 0xed, 0xcb, 0x9d, 0x2b, 0x2f, 0xdb, 0x48,
-	0xd8, 0x2d, 0x3f, 0xfc, 0x51, 0x84, 0x4c, 0x4b, 0xe5, 0x52, 0xba, 0xde, 0x84, 0x4a, 0xea, 0x16,
-	0x64, 0x0f, 0xb4, 0x8e, 0xfd, 0xc4, 0x76, 0x9e, 0xd9, 0xfc, 0xc4, 0xb0, 0x3a, 0xd4, 0xa5, 0x9e,
-	0xf6, 0x1e, 0xd1, 0x60, 0xd3, 0xa3, 0xad, 0xb6, 0x65, 0x78, 0x94, 0x9b, 0x0d, 0x57, 0x5b, 0x20,
-	0x04, 0xaa, 0x46, 0xab, 0xcd, 0xdd, 0x3a, 0x33, 0xdb, 0x9e, 0xa4, 0x2d, 0xea, 0x63, 0xd8, 0x2e,
-	0x19, 0x85, 0xec, 0xc0, 0xb4, 0x59, 0xb4, 0xf7, 0x24, 0xc9, 0x68, 0x15, 0x48, 0x0b, 0xe4, 0x7d,
-	0xd8, 0x95, 0x24, 0x39, 0x63, 0xce, 0x58, 0x24, 0xb7, 0xe0, 0x5a, 0x81, 0xd1, 0x36, 0x18, 0xb5,
-	0xbd, 0x9c, 0xbf, 0xa4, 0xb7, 0x54, 0x6c, 0x96, 0x89, 0x6a, 0x5e, 0x6c, 0xfd, 0x14, 0x56, 0x30,
-	0xd7, 0xaa, 0x78, 0xba, 0xf1, 0xf0, 0xfd, 0x4b, 0xf6, 0x92, 0x29, 0x94, 0xfe, 0x6b, 0xd8, 0x69,
-	0x88, 0xa8, 0x2b, 0x86, 0x3d, 0x7f, 0x18, 0x7b, 0xfe, 0xf9, 0xa5, 0xe3, 0x6a, 0xb0, 0x14, 0xfb,
-	0xe7, 0x49, 0x94, 0xc6, 0x3f, 0xf5, 0x33, 0xd8, 0x2e, 0xf8, 0xd2, 0xa5, 0x82, 0xdf, 0xa3, 0xdb,
-	0xe7, 0x7e, 0xba, 0xf8, 0x2e, 0x7e, 0x5a, 0x94, 0xd0, 0x9f, 0xc2, 0x5e, 0x23, 0x3b, 0x4f, 0xf5,
-	0x86, 0x1f, 0xfb, 0xea, 0x3c, 0xed, 0xc1, 0x4a, 0xb1, 0x00, 0x51, 0x1f, 0xe4, 0x03, 0xd8, 0x12,
-	0x61, 0x38, 0x0a, 0xf9, 0x40, 0x44, 0x91, 0x7f, 0xae, 0xf2, 0xea, 0x3a, 0xdb, 0x94, 0xc4, 0x96,
-	0xa2, 0xe9, 0x03, 0xa8, 0xb6, 0x44, 0x2f, 0xf0, 0x9f, 0x4e, 0x44, 0xa8, 0x4a, 0x8e, 0x4f, 0x61,
-	0x3b, 0x88, 0xa2, 0x09, 0xba, 0x56, 0xc4, 0x25, 0x56, 0x0e, 0x9b, 0x79, 0xed, 0x96, 0xe2, 0x1a,
-	0x11, 0x45, 0x1e, 0x2e, 0x34, 0xbe, 0x18, 0x8b, 0xc4, 0x1c, 0xf2, 0x6f, 0x52, 0x83, 0xb5, 0x33,
-	0xe1, 0xc7, 0x93, 0x10, 0xab, 0x10, 0x24, 0xa7, 0x9f, 0xfa, 0xdf, 0xc3, 0xa6, 0x2b, 0xfa, 0xa2,
-	0x1b, 0x8f, 0x54, 0x4e, 0xfd, 0x10, 0xaa, 0x68, 0xfd, 0xe0, 0xc5, 0x24, 0x56, 0xd9, 0x2f, 0x29,
-	0x0f, 0xb6, 0x32, 0x2a, 0xa6, 0x3e, 0x2c, 0x5f, 0xc6, 0x91, 0x98, 0xf4, 0x46, 0xbc, 0xdb, 0xf7,
-	0xa3, 0x34, 0x43, 0x6e, 0x28, 0x5a, 0x1d, 0x49, 0x38, 0x52, 0x02, 0x11, 0x7d, 0x31, 0x10, 0xc3,
-	0x38, 0x99, 0x7a, 0x4b, 0x51, 0xa9, 0x22, 0xea, 0x01, 0x80, 0x11, 0xb3, 0x49, 0x5f, 0x5c, 0x5a,
-	0x5e, 0x3d, 0x06, 0x6d, 0x80, 0x16, 0xe1, 0x3f, 0xa1, 0x49, 0x78, 0x34, 0x16, 0x5d, 0x99, 0x6c,
-	0x67, 0xb7, 0x6a, 0xda, 0x70, 0xac, 0x3a, 0x98, 0xfa, 0xd6, 0xff, 0x75, 0x11, 0xd6, 0xea, 0x51,
-	0x24, 0x27, 0xfa, 0x0d, 0x6c, 0xfa, 0x31, 0x0f, 0x27, 0x7d, 0xa1, 0x06, 0x54, 0xa5, 0xd4, 0xd5,
-	0x19, 0x97, 0x4c, 0x35, 0x63, 0xe0, 0xe7, 0x5a, 0x7e, 0x2c, 0xd3, 0x19, 0x62, 0x04, 0xf7, 0x07,
-	0xe3, 0x2f, 0xfd, 0x5e, 0x24, 0xd3, 0x65, 0x85, 0xa5, 0x55, 0xab, 0x30, 0x14, 0x19, 0x03, 0x49,
-	0x06, 0xfd, 0x51, 0x5c, 0x9c, 0x85, 0xb2, 0xa0, 0x58, 0x95, 0xe0, 0x9d, 0x94, 0xf3, 0x24, 0x65,
-	0xa8, 0x40, 0x9c, 0x7b, 0xe4, 0x9a, 0x32, 0x6b, 0x81, 0x44, 0x0e, 0x61, 0x5b, 0x15, 0x5c, 0xc1,
-	0x60, 0x3c, 0x0a, 0x63, 0x7f, 0x18, 0xcb, 0x40, 0x9c, 0x79, 0x83, 0xaa, 0xdd, 0xcc, 0x94, 0x49,
-	0x7e, 0x07, 0x5b, 0x51, 0xb2, 0xc1, 0x6a, 0xa5, 0xeb, 0xd2, 0x74, 0xe5, 0xa2, 0xb1, 0xe8, 0x04,
-	0x6c, 0x33, 0x2a, 0x7c, 0xe9, 0xff, 0xb3, 0x08, 0xeb, 0xf5, 0x9e, 0x1f, 0xfb, 0x72, 0xed, 0xb7,
-	0xb1, 0xe6, 0x79, 0xcd, 0x5f, 0x5c, 0xc4, 0xb2, 0x00, 0x5d, 0xb8, 0xbf, 0xf2, 0x68, 0xf1, 0xd3,
-	0x87, 0xac, 0x32, 0xf0, 0x5f, 0x1f, 0x21, 0x8d, 0x3c, 0x00, 0x92, 0x01, 0xe4, 0x8c, 0x32, 0x59,
-	0x28, 0x57, 0xdf, 0x4e, 0x51, 0x38, 0x14, 0x66, 0x8b, 0xa9, 0xd2, 0xa7, 0x8b, 0x93, 0x24, 0x65,
-	0x72, 0x5e, 0xfa, 0xc8, 0xa9, 0xb1, 0x86, 0x91, 0xec, 0xa9, 0x64, 0x06, 0x92, 0xa4, 0x8e, 0xdc,
-	0x17, 0x50, 0xc1, 0xbc, 0x23, 0x97, 0xb8, 0x36, 0xb7, 0x2c, 0x49, 0xb6, 0x9e, 0xad, 0x75, 0x13,
-	0x1f, 0xb8, 0x07, 0xdb, 0x3f, 0xbf, 0x0c, 0x62, 0x11, 0x8d, 0xfd, 0x2e, 0x26, 0xed, 0xfe, 0x85,
-	0x32, 0x25, 0xab, 0xe6, 0x64, 0x67, 0xd8, 0xbf, 0x20, 0xa7, 0x53, 0x49, 0xb5, 0xa8, 0xc7, 0xb2,
-	0x74, 0x9b, 0x0f, 0x4a, 0x33, 0xcd, 0x8b, 0x09, 0xc5, 0xcc, 0x5b, 0xcf, 0xd5, 0xd6, 0x61, 0x2b,
-	0xa9, 0x63, 0x12, 0x93, 0x6e, 0xa8, 0x6a, 0xa6, 0x27, 0x0b, 0x19, 0x69, 0x2b, 0xfd, 0x3f, 0x17,
-	0x61, 0xdd, 0x18, 0x8c, 0x2d, 0xff, 0x62, 0x34, 0x89, 0x89, 0x05, 0x3b, 0xd1, 0x64, 0x8c, 0xdb,
-	0x2b, 0x7a, 0xbc, 0x2f, 0x69, 0xea, 0x26, 0x50, 0x9d, 0x29, 0xa6, 0x32, 0xa1, 0x43, 0xf5, 0x0f,
-	0xd3, 0x32, 0x49, 0x45, 0x88, 0xc8, 0x43, 0xb8, 0xd2, 0x13, 0x67, 0xc1, 0x50, 0x60, 0xca, 0x3e,
-	0xf3, 0x27, 0xfd, 0x98, 0xff, 0x1c, 0xf4, 0xe2, 0x97, 0xc9, 0x3d, 0x66, 0x37, 0x61, 0x36, 0x14,
-	0xef, 0x19, 0xb2, 0x64, 0x8d, 0x51, 0x92, 0x79, 0x29, 0x82, 0xf3, 0x97, 0x71, 0x52, 0x03, 0xef,
-	0x4d, 0x0b, 0x1d, 0x4b, 0x9e, 0xfe, 0x97, 0x05, 0x58, 0x4d, 0x96, 0xb0, 0x01, 0x6b, 0x49, 0x5a,
-	0xd3, 0xde, 0x23, 0x5b, 0xb0, 0x6e, 0x3b, 0x98, 0x45, 0x2c, 0xe3, 0x54, 0x5b, 0x20, 0xeb, 0xb0,
-	0xd2, 0x34, 0x9f, 0xd3, 0x86, 0xb6, 0x88, 0x79, 0x4e, 0xfe, 0xc9, 0x8f, 0xa9, 0xf9, 0xf8, 0xd8,
-	0xd3, 0x96, 0x48, 0x15, 0x80, 0x51, 0xb7, 0xed, 0xd8, 0xae, 0x79, 0x42, 0xb5, 0x65, 0x94, 0xad,
-	0x3b, 0xb6, 0x67, 0x98, 0x36, 0x65, 0xda, 0x0a, 0xa9, 0xc0, 0x72, 0xd3, 0xb4, 0x2c, 0x6d, 0x15,
-	0x19, 0x4d, 0x8b, 0x3e, 0xe7, 0xa6, 0x47, 0x5b, 0xda, 0x9a, 0x1c, 0xd4, 0xea, 0x98, 0x0d, 0xad,
-	0x82, 0x1c, 0xd3, 0xf6, 0x98, 0x69, 0xbb, 0x66, 0x5d, 0x5b, 0xd7, 0x27, 0x50, 0x9d, 0xce, 0xc8,
-	0xe4, 0x5b, 0x58, 0x1d, 0xc8, 0xbf, 0x12, 0xa3, 0xde, 0x7d, 0x63, 0x02, 0x3f, 0x4c, 0xf2, 0x78,
-	0x22, 0xa3, 0x7f, 0x08, 0xab, 0xc9, 0x38, 0x53, 0x8b, 0xac, 0x02, 0x18, 0x1d, 0xcf, 0x71, 0xeb,
-	0xcc, 0xb1, 0x2c, 0x6d, 0x41, 0xff, 0xaf, 0x05, 0xd8, 0xac, 0xbf, 0x0c, 0xfa, 0x3d, 0xcf, 0x3f,
-	0x4f, 0xe2, 0x51, 0x2d, 0x3f, 0x08, 0xc3, 0xc9, 0x80, 0x77, 0x91, 0xcb, 0x63, 0xff, 0x3c, 0x3f,
-	0x65, 0x5f, 0xb0, 0x2b, 0x19, 0xc6, 0x9e, 0x0c, 0x52, 0xf9, 0x88, 0x3c, 0x82, 0x6b, 0x67, 0x41,
-	0x18, 0xc5, 0xb9, 0x90, 0x0c, 0xdd, 0xc9, 0xa5, 0x43, 0xc5, 0xe6, 0x7d, 0x89, 0x48, 0x65, 0x30,
-	0x88, 0xab, 0xcb, 0xc7, 0x67, 0xb0, 0x37, 0x57, 0x4a, 0x05, 0xeb, 0x9d, 0xee, 0x8c, 0xc0, 0x11,
-	0xdc, 0xc8, 0x35, 0x1d, 0x04, 0xc3, 0xb2, 0xb6, 0xcb, 0x99, 0xb6, 0xf9, 0x8a, 0x5a, 0xc1, 0xb0,
-	0xa8, 0xb0, 0xfe, 0x67, 0xa8, 0x32, 0x71, 0x26, 0x42, 0x31, 0xec, 0x8a, 0xf6, 0x28, 0x18, 0xc6,
-	0x78, 0x0e, 0x50, 0x01, 0x19, 0x2f, 0x0a, 0x19, 0x60, 0x23, 0x56, 0xf6, 0xb1, 0xdf, 0x7e, 0xcf,
-	0xde, 0x87, 0xd5, 0xc9, 0x30, 0xf8, 0x29, 0xb9, 0x68, 0x57, 0x58, 0xf2, 0xa5, 0xff, 0xe3, 0x32,
-	0x6c, 0x65, 0x95, 0xda, 0xa5, 0x49, 0xa6, 0x06, 0x6b, 0xaf, 0x44, 0x18, 0xa5, 0x65, 0xc0, 0x3a,
-	0x4b, 0x3f, 0x31, 0x82, 0xa7, 0x25, 0x2e, 0x56, 0xd4, 0x09, 0x28, 0x31, 0x4f, 0xce, 0x39, 0x49,
-	0xe0, 0x3e, 0x54, 0xb3, 0x82, 0x91, 0xcb, 0x44, 0x5c, 0x91, 0x95, 0xeb, 0x27, 0x25, 0x37, 0x9a,
-	0x52, 0x29, 0xff, 0x92, 0xc5, 0x6b, 0xb5, 0xde, 0x71, 0x3d, 0xa7, 0xc5, 0xa9, 0x45, 0x5b, 0xd4,
-	0xf6, 0xd8, 0x96, 0x28, 0xb2, 0x09, 0x85, 0xeb, 0x05, 0x8d, 0x54, 0x36, 0xe8, 0x4d, 0xb0, 0x72,
-	0xf5, 0xe3, 0x34, 0xb9, 0xa4, 0xe9, 0xe0, 0x6a, 0x8e, 0x34, 0x10, 0xd8, 0xc8, 0x70, 0xa4, 0x07,
-	0xd5, 0xac, 0x68, 0x9d, 0xc8, 0x7a, 0x64, 0x4d, 0x6a, 0xfa, 0xd5, 0xbb, 0x69, 0xda, 0x41, 0x91,
-	0xa4, 0x57, 0x82, 0x99, 0xfc, 0xd1, 0x0a, 0x65, 0xcc, 0x61, 0x6c, 0x2b, 0x1d, 0x54, 0x02, 0xf4,
-	0x67, 0x05, 0xeb, 0x4b, 0xed, 0xa7, 0xce, 0x05, 0x81, 0xd2, 0x5a, 0xb5, 0x05, 0xb2, 0x0b, 0xdb,
-	0x09, 0x2d, 0xad, 0x72, 0x55, 0x2c, 0x38, 0x76, 0x5c, 0x8f, 0xbb, 0x94, 0x9d, 0x98, 0x75, 0xaa,
-	0x2d, 0xe9, 0xdf, 0xc1, 0xd5, 0x4b, 0x75, 0xc1, 0x03, 0x2f, 0xb5, 0xd1, 0x16, 0xc8, 0x26, 0x54,
-	0xe8, 0x73, 0xda, 0x6a, 0x7b, 0x32, 0xa6, 0x54, 0x60, 0x19, 0x4b, 0x60, 0x6d, 0x49, 0xff, 0x33,
-	0xc0, 0x71, 0x3c, 0xe8, 0x37, 0x47, 0xe1, 0xc0, 0x8f, 0xf5, 0x3f, 0xc0, 0x72, 0x7d, 0xd4, 0xc3,
-	0x5a, 0x72, 0x33, 0xad, 0xb8, 0xeb, 0x4e, 0x83, 0x6a, 0xef, 0x91, 0x35, 0x58, 0x32, 0x5a, 0x6d,
-	0x6d, 0x01, 0x15, 0x37, 0x5a, 0xed, 0x2f, 0x0d, 0xac, 0xae, 0x31, 0x8c, 0xe0, 0x07, 0x6d, 0x19,
-	0xa6, 0xa5, 0x2d, 0x49, 0x5e, 0xdd, 0x33, 0x1d, 0xdb, 0xd5, 0x56, 0x70, 0x0c, 0xfa, 0xbc, 0x4d,
-	0x99, 0x89, 0x0b, 0x32, 0x2c, 0x6d, 0x59, 0xff, 0x87, 0x2d, 0x58, 0x4b, 0x4f, 0xfa, 0xf7, 0xb0,
-	0xf1, 0x32, 0x1e, 0xf4, 0xf9, 0x99, 0x9c, 0xb8, 0x76, 0x45, 0x06, 0x99, 0xf2, 0xfd, 0x2e, 0xd7,
-	0xec, 0x10, 0xd5, 0x62, 0xf0, 0x32, 0x23, 0x94, 0xda, 0x1e, 0x1f, 0xbc, 0xa5, 0xed, 0x71, 0x77,
-	0xa6, 0xed, 0x71, 0x15, 0x2a, 0xe9, 0x59, 0x4f, 0x8e, 0xc0, 0x5a, 0xac, 0x0e, 0x38, 0xb9, 0x0e,
-	0xeb, 0xf9, 0x09, 0x54, 0x29, 0xbb, 0x12, 0xa5, 0xc7, 0xef, 0x08, 0x2a, 0x48, 0xef, 0xf1, 0xa0,
-	0x57, 0xbb, 0x23, 0x3d, 0xa5, 0xac, 0x75, 0xb2, 0xc4, 0x43, 0x84, 0xf7, 0xcc, 0xde, 0xa3, 0x35,
-	0xdb, 0xc1, 0x1d, 0xf3, 0xd8, 0xda, 0x50, 0x51, 0x48, 0xbd, 0x78, 0x3a, 0x64, 0xae, 0xbe, 0x2e,
-	0x73, 0xf5, 0x8d, 0x37, 0xf9, 0x5c, 0xc1, 0xff, 0x93, 0x82, 0x78, 0xde, 0xe5, 0xec, 0xc6, 0x65,
-	0x97, 0xb3, 0x37, 0x77, 0x69, 0x7e, 0x05, 0xfb, 0x85, 0xe6, 0x4b, 0xde, 0xe1, 0x51, 0x81, 0x6c,
-	0xbd, 0x10, 0x72, 0x8d, 0x02, 0xb3, 0x10, 0x6d, 0x56, 0x8a, 0xd1, 0x06, 0xab, 0x5e, 0xf5, 0x17,
-	0xff, 0xd9, 0x0f, 0x87, 0xc1, 0xf0, 0x5c, 0x36, 0x13, 0x2a, 0x6c, 0x4b, 0x51, 0x9f, 0x29, 0x22,
-	0x56, 0x90, 0xf9, 0xac, 0x63, 0x3f, 0xc4, 0xf2, 0x78, 0x35, 0x2d, 0x91, 0x12, 0x7a, 0x5b, 0x92,
-	0x71, 0xb5, 0xc5, 0xee, 0x50, 0x72, 0xb9, 0x54, 0x4d, 0x9c, 0x9d, 0x42, 0x83, 0x48, 0x31, 0xc8,
-	0x33, 0xb8, 0x3f, 0x0b, 0xe7, 0xd1, 0xe4, 0xfc, 0x5c, 0x44, 0x2a, 0x5c, 0x64, 0xab, 0x90, 0xbd,
-	0x85, 0x75, 0xf6, 0xe1, 0xcc, 0x20, 0x6e, 0x8a, 0x2e, 0x2c, 0x99, 0x7c, 0x06, 0xbb, 0x85, 0x22,
-	0x28, 0x53, 0x64, 0x4b, 0x9a, 0x9d, 0xe4, 0xac, 0x4c, 0x93, 0x43, 0xd8, 0xed, 0x65, 0xf7, 0x37,
-	0x99, 0x5e, 0xfa, 0x41, 0x14, 0xd7, 0x6e, 0x2a, 0xcd, 0x7b, 0x33, 0x57, 0xbb, 0x5f, 0xc3, 0xd5,
-	0xe9, 0xc6, 0x2c, 0x8a, 0xa4, 0x56, 0xdc, 0x57, 0x49, 0xac, 0xd8, 0x9f, 0xf5, 0xfc, 0xf3, 0xd4,
-	0x9c, 0x37, 0x60, 0x3d, 0xf2, 0xe3, 0x20, 0x3a, 0x0b, 0x44, 0x94, 0x36, 0x02, 0x33, 0x02, 0xb9,
-	0x06, 0x95, 0x74, 0xcc, 0xa4, 0x0b, 0x98, 0x7d, 0x23, 0x4f, 0xbc, 0xee, 0xf6, 0x27, 0x3d, 0x11,
-	0xd5, 0x0e, 0x14, 0x2f, 0xfd, 0x2e, 0x77, 0x45, 0x76, 0xde, 0xa9, 0x2b, 0x42, 0xe6, 0x76, 0x45,
-	0x7e, 0x05, 0xbb, 0xe2, 0xb5, 0xea, 0x2d, 0xc8, 0x7e, 0x73, 0xa4, 0xca, 0x4d, 0xbd, 0x18, 0xaa,
-	0x77, 0x52, 0x04, 0x5e, 0x84, 0x23, 0x59, 0x78, 0x66, 0x37, 0xe6, 0xb5, 0x77, 0xb9, 0x31, 0x63,
-	0x64, 0xc0, 0x3f, 0xa4, 0x9d, 0xa3, 0x5a, 0x45, 0xd9, 0xc1, 0x4f, 0xae, 0xe4, 0x11, 0x39, 0x84,
-	0x15, 0x55, 0x62, 0x6f, 0xca, 0x33, 0x57, 0x2b, 0xd7, 0xc7, 0x69, 0x8d, 0xcf, 0x14, 0x8c, 0x3c,
-	0x02, 0x28, 0xe4, 0xf5, 0xdd, 0xb9, 0xf7, 0x86, 0x62, 0x11, 0xc3, 0xd6, 0xbb, 0x59, 0x49, 0xf2,
-	0x15, 0xec, 0x46, 0xc1, 0x8b, 0x7e, 0x30, 0x3c, 0x8f, 0x78, 0xee, 0x1b, 0xb5, 0x5b, 0xc5, 0x05,
-	0x93, 0x14, 0x91, 0xd7, 0xcb, 0xe4, 0x6b, 0xd8, 0xcb, 0xdd, 0xb7, 0xef, 0xa7, 0x35, 0x4d, 0xed,
-	0xf6, 0x94, 0x60, 0x06, 0xb1, 0xfc, 0xa4, 0xa6, 0x21, 0xc7, 0xa0, 0x85, 0x69, 0x49, 0xc1, 0xc7,
-	0x58, 0x53, 0x44, 0x97, 0x34, 0x9e, 0xa6, 0x2b, 0x0f, 0xb6, 0x1d, 0x4e, 0x7d, 0x47, 0x18, 0x1f,
-	0xb3, 0x6b, 0x0b, 0xa8, 0xf8, 0x18, 0x25, 0xd7, 0x95, 0xaf, 0x01, 0xfc, 0xc1, 0x38, 0xa9, 0xba,
-	0x93, 0x0e, 0x66, 0xed, 0xb2, 0xa2, 0x9b, 0xad, 0xfb, 0x59, 0xd1, 0x7e, 0x8c, 0xe7, 0x3d, 0xfc,
-	0x91, 0xe7, 0x5e, 0x1f, 0xd5, 0x3e, 0x7a, 0x97, 0xfe, 0xd0, 0x36, 0x8a, 0xe5, 0x6d, 0x90, 0x48,
-	0x6f, 0xc2, 0x5a, 0x12, 0x5e, 0x31, 0xe9, 0x24, 0x01, 0x56, 0x7b, 0x8f, 0xd4, 0x60, 0xcf, 0x32,
-	0xed, 0x27, 0xbc, 0xe9, 0xd8, 0x1e, 0x77, 0xbd, 0x53, 0x8b, 0xba, 0xc7, 0x94, 0x62, 0x3e, 0xdd,
-	0x03, 0x4d, 0x7e, 0x73, 0xa3, 0xd5, 0xe6, 0x2a, 0xb3, 0x6a, 0x8b, 0xfa, 0xbf, 0xad, 0x01, 0xa8,
-	0x6e, 0xe9, 0xbc, 0xac, 0xb4, 0xf0, 0x7f, 0xcc, 0x4a, 0x8b, 0x6f, 0xc9, 0x4a, 0x4b, 0xf3, 0xb2,
-	0x52, 0x66, 0xf5, 0xe5, 0x69, 0xab, 0x7f, 0x85, 0x3e, 0x91, 0xde, 0x28, 0x83, 0x28, 0x8b, 0x09,
-	0x64, 0xea, 0xf4, 0xa4, 0x57, 0x4b, 0x33, 0x4a, 0xa3, 0xc2, 0xd4, 0x55, 0x75, 0x65, 0xce, 0x55,
-	0xf5, 0x3b, 0xb8, 0x96, 0x0f, 0x3c, 0x16, 0x21, 0x0f, 0x86, 0xfd, 0x60, 0x28, 0x78, 0x14, 0x5f,
-	0xf4, 0x85, 0x8c, 0xc7, 0xaa, 0x90, 0xdd, 0x4f, 0x25, 0xda, 0x22, 0x34, 0x25, 0xc4, 0x45, 0x04,
-	0x79, 0x08, 0x64, 0x12, 0xf6, 0x53, 0xc5, 0x86, 0x32, 0x6c, 0xf4, 0x64, 0x15, 0x95, 0xbe, 0x96,
-	0x68, 0x93, 0xb0, 0xaf, 0xb4, 0x4a, 0xb8, 0x97, 0x5c, 0x8f, 0x2b, 0xf3, 0xaf, 0xc7, 0x6d, 0xd0,
-	0x55, 0x79, 0xe7, 0xf7, 0xfb, 0xc5, 0x96, 0x2a, 0x0f, 0x86, 0x4a, 0x49, 0x3c, 0x9a, 0xd2, 0x49,
-	0x33, 0x3b, 0xdc, 0x94, 0x02, 0x46, 0xbf, 0x5f, 0x68, 0x5a, 0x99, 0x43, 0xa9, 0xaf, 0xe7, 0x9f,
-	0xe3, 0xdd, 0x4d, 0xbc, 0x1e, 0xfb, 0x43, 0xac, 0x64, 0x87, 0xbd, 0x51, 0xc8, 0xc7, 0xa1, 0x38,
-	0x0b, 0x5e, 0x0b, 0x75, 0xbe, 0x2b, 0x6c, 0x4f, 0x71, 0x4f, 0x24, 0xb3, 0x9d, 0xf0, 0xca, 0x8d,
-	0xb2, 0x8d, 0xbf, 0xb6, 0x51, 0x46, 0x9a, 0x18, 0x28, 0x73, 0xf5, 0xa3, 0x57, 0xe7, 0xb5, 0xcd,
-	0x77, 0xea, 0x0a, 0x17, 0xa4, 0xdc, 0x57, 0x32, 0x6f, 0x16, 0xc7, 0x91, 0x09, 0x45, 0x65, 0xa0,
-	0xe2, 0xf8, 0x32, 0x9d, 0x7c, 0x0e, 0x7b, 0x65, 0xa8, 0x9c, 0xb7, 0x9a, 0x24, 0xac, 0x69, 0x38,
-	0x0e, 0xfe, 0x2d, 0x54, 0x83, 0x81, 0x7f, 0x2e, 0x9f, 0x36, 0x54, 0x71, 0xb2, 0xfd, 0xc6, 0xf7,
-	0x8d, 0x4d, 0x89, 0x4e, 0x9f, 0xd4, 0x1e, 0xc1, 0xd6, 0xd9, 0x68, 0x18, 0xe7, 0xc2, 0xda, 0x1b,
-	0x85, 0x37, 0x10, 0x9c, 0xca, 0xce, 0x69, 0xea, 0xec, 0xbc, 0xa1, 0xa9, 0xa3, 0xff, 0xfb, 0x0a,
-	0x54, 0x4f, 0xd2, 0x21, 0xd9, 0xa4, 0x2f, 0x22, 0xf2, 0x09, 0x2c, 0x27, 0x97, 0xc5, 0xa5, 0x39,
-	0xb3, 0xa6, 0x11, 0x5a, 0x62, 0xc8, 0x57, 0x53, 0x79, 0xe2, 0xf2, 0xdc, 0x22, 0x1f, 0x60, 0x0a,
-	0x09, 0x84, 0xc2, 0x6d, 0xbc, 0xf0, 0x65, 0x20, 0x1e, 0x8a, 0x57, 0x81, 0x2c, 0xe5, 0x92, 0x7c,
-	0xda, 0x53, 0xb7, 0x3f, 0x76, 0x63, 0x10, 0x0c, 0x73, 0xfd, 0x12, 0x50, 0x92, 0xb7, 0x7b, 0xe4,
-	0x73, 0x20, 0xd2, 0xf1, 0xcf, 0x82, 0xbe, 0xc8, 0x86, 0x28, 0x1c, 0x37, 0x0d, 0xb9, 0xcd, 0xa0,
-	0x2f, 0x52, 0x49, 0xf2, 0x09, 0xec, 0xc4, 0x62, 0x30, 0xee, 0xfb, 0xb1, 0x98, 0x39, 0x33, 0x29,
-	0x23, 0x3d, 0x33, 0x1f, 0xc1, 0xb6, 0x3c, 0x1a, 0x85, 0xd3, 0xa5, 0x8a, 0xa5, 0x2d, 0x45, 0x2e,
-	0xe2, 0xba, 0x61, 0x30, 0x8e, 0x73, 0xdc, 0x4e, 0x82, 0x93, 0xe4, 0x14, 0xf7, 0x7d, 0xda, 0xb5,
-	0x55, 0xa1, 0x31, 0xaa, 0xad, 0x4b, 0x7b, 0x5d, 0x2b, 0x57, 0xac, 0x88, 0x51, 0xb1, 0x30, 0xe9,
-	0xe8, 0xaa, 0x8f, 0x88, 0x58, 0xb0, 0xa3, 0x06, 0xc0, 0x79, 0x82, 0x33, 0xcc, 0xf0, 0x17, 0xd2,
-	0x69, 0x67, 0x5f, 0xbf, 0xe4, 0x20, 0x6e, 0x0e, 0x63, 0x9a, 0x28, 0x51, 0x48, 0x7b, 0x7e, 0x55,
-	0xa5, 0xc9, 0xf1, 0xca, 0x0f, 0x4d, 0x33, 0xfd, 0xf3, 0x79, 0x75, 0xd7, 0x03, 0x58, 0xea, 0x46,
-	0x91, 0x7c, 0xdc, 0x98, 0xed, 0x80, 0xe6, 0x29, 0x82, 0x21, 0x8a, 0x98, 0x73, 0x0e, 0xa0, 0x4a,
-	0xb3, 0xb7, 0x66, 0xe6, 0x9e, 0x3a, 0x60, 0x33, 0x07, 0x54, 0xbf, 0x0b, 0x5b, 0x72, 0xbd, 0x75,
-	0x3f, 0x16, 0xe7, 0xa3, 0xf0, 0x42, 0xdf, 0x4d, 0xee, 0x60, 0xc5, 0x1b, 0xa2, 0xfe, 0xdf, 0x07,
-	0xb0, 0x9d, 0xb8, 0x52, 0x30, 0x1a, 0xaa, 0x16, 0xf7, 0x0f, 0x50, 0x89, 0xc4, 0x2b, 0x11, 0xa2,
-	0x21, 0x57, 0xe7, 0xbe, 0x0b, 0x95, 0x24, 0x0e, 0xdd, 0x04, 0x9e, 0x5e, 0x52, 0x33, 0x79, 0xf2,
-	0x35, 0x2c, 0x77, 0x47, 0x3d, 0x75, 0x13, 0xaa, 0xce, 0x74, 0xf2, 0xca, 0xe3, 0xc8, 0xb4, 0x27,
-	0x05, 0xc8, 0x15, 0x58, 0xc6, 0x4c, 0x20, 0xaf, 0x49, 0x2b, 0x8f, 0x16, 0xbe, 0x60, 0xf2, 0x93,
-	0x68, 0xb0, 0xd4, 0x1d, 0xf5, 0xe5, 0x3d, 0x63, 0x85, 0xe1, 0x9f, 0x53, 0x99, 0x6d, 0x65, 0x3a,
-	0xb3, 0xed, 0xc3, 0xea, 0xd8, 0x0f, 0xfd, 0x41, 0x94, 0x74, 0x7a, 0x93, 0x2f, 0xf2, 0x5b, 0xa8,
-	0x74, 0x13, 0xab, 0x24, 0xed, 0x83, 0x3b, 0xf3, 0x3c, 0x25, 0xb5, 0x9c, 0x52, 0x2b, 0x13, 0x21,
-	0x8f, 0xe0, 0x9a, 0xec, 0x51, 0x62, 0xad, 0x12, 0x0a, 0x0c, 0x1a, 0x3c, 0x16, 0x51, 0xac, 0x9e,
-	0x03, 0x65, 0x03, 0x78, 0x9d, 0xed, 0x23, 0xc2, 0x18, 0x8c, 0x99, 0xe4, 0x7b, 0x22, 0x8a, 0xe5,
-	0xab, 0x93, 0xfe, 0x0d, 0x54, 0x52, 0x63, 0x15, 0x9f, 0x9f, 0x5c, 0x7a, 0x42, 0x99, 0xe9, 0x9d,
-	0x6a, 0xef, 0x15, 0xef, 0xd6, 0x1b, 0xb0, 0xf6, 0xcc, 0x60, 0xb6, 0x69, 0x3f, 0xd6, 0x96, 0xf5,
-	0xff, 0xb8, 0x79, 0xe9, 0x1d, 0xba, 0x06, 0x7b, 0xa6, 0x7d, 0x62, 0x58, 0x66, 0x83, 0x37, 0x9c,
-	0xba, 0x77, 0xda, 0xa6, 0xfc, 0xd8, 0x6b, 0x59, 0xda, 0x88, 0x5c, 0x85, 0x2b, 0x2d, 0xc3, 0x6e,
-	0x18, 0x9e, 0xc3, 0x4e, 0xb9, 0x67, 0x3c, 0xe6, 0x2d, 0xd3, 0x75, 0x71, 0xbc, 0x05, 0x72, 0x1d,
-	0xde, 0x47, 0x02, 0xa3, 0x4f, 0x3b, 0x26, 0xa3, 0x0d, 0x7e, 0x74, 0x9a, 0x31, 0x6b, 0xe4, 0x03,
-	0xb8, 0x9d, 0xcc, 0xcc, 0x2f, 0x03, 0x59, 0xe4, 0x7d, 0xd8, 0x45, 0x26, 0x7d, 0x5e, 0xb7, 0x3a,
-	0x0d, 0xc5, 0xf4, 0x8c, 0xc7, 0x9a, 0x20, 0x37, 0xa0, 0x96, 0x4a, 0xd3, 0xe7, 0x1e, 0xb5, 0x5d,
-	0xd3, 0xb1, 0x79, 0xc7, 0xee, 0xb8, 0xb4, 0xa1, 0x39, 0xb8, 0xec, 0x19, 0xaa, 0x47, 0xee, 0xc3,
-	0xdd, 0x59, 0x99, 0x06, 0x6d, 0x33, 0x5a, 0x37, 0x3c, 0xda, 0xe0, 0x27, 0x94, 0x21, 0x49, 0x6b,
-	0xe3, 0xe8, 0xb6, 0x63, 0x73, 0xcb, 0x73, 0xd3, 0x17, 0x39, 0xa3, 0xe9, 0x51, 0x86, 0x04, 0x6d,
-	0x8c, 0xdc, 0x19, 0x4e, 0x02, 0xd7, 0x7e, 0x22, 0x37, 0xe1, 0xaa, 0xe1, 0x79, 0xac, 0xb0, 0xa0,
-	0x8e, 0x97, 0xad, 0xe8, 0xb7, 0x84, 0x40, 0xb5, 0x61, 0xba, 0x86, 0x65, 0x39, 0xcf, 0x68, 0x43,
-	0x2e, 0x66, 0x91, 0x5c, 0x83, 0xfd, 0xc7, 0xd4, 0xa6, 0xcc, 0xb0, 0x78, 0x89, 0xf7, 0x4b, 0x34,
-	0x6f, 0x81, 0x96, 0xcc, 0x89, 0xac, 0xe7, 0x64, 0x17, 0xb6, 0x0b, 0x2c, 0x9c, 0x54, 0x5b, 0x2a,
-	0xe3, 0x55, 0xd9, 0x88, 0xac, 0xa7, 0x64, 0x1f, 0x48, 0xba, 0x87, 0x52, 0x43, 0xf9, 0x0a, 0xa8,
-	0x2d, 0xa3, 0x91, 0x1b, 0x9d, 0xb6, 0x65, 0xa2, 0x15, 0x24, 0xc7, 0x3c, 0xea, 0x78, 0x54, 0xfb,
-	0x13, 0xb9, 0x03, 0x37, 0x73, 0xe0, 0xd4, 0x0e, 0x59, 0xc6, 0xa9, 0xd3, 0xf1, 0xb4, 0xeb, 0xb8,
-	0xda, 0x64, 0x6d, 0x09, 0x2d, 0x1f, 0xc0, 0xd5, 0x02, 0x5c, 0x99, 0xd9, 0x6a, 0x5b, 0x26, 0x6d,
-	0xa4, 0xec, 0x44, 0x03, 0x6d, 0x1f, 0xcd, 0xe8, 0xb6, 0x69, 0xdd, 0x6c, 0xce, 0xe1, 0x5e, 0x43,
-	0xc9, 0xdc, 0xad, 0xa4, 0x16, 0xa9, 0x0d, 0x57, 0xc8, 0x01, 0xdc, 0xc8, 0x79, 0x8e, 0x4d, 0x9d,
-	0xe6, 0x34, 0xe2, 0xc6, 0x34, 0xc2, 0xb0, 0x4f, 0xcb, 0x88, 0x97, 0xd3, 0x8b, 0x6e, 0x98, 0x2d,
-	0xe5, 0x0e, 0xda, 0xb7, 0xe8, 0xe9, 0x39, 0xa3, 0x63, 0x9b, 0x4f, 0x3b, 0x54, 0xda, 0x7b, 0x15,
-	0x07, 0x9d, 0xc7, 0xe1, 0xe9, 0x01, 0x6a, 0xa1, 0xdf, 0x3d, 0x63, 0x8e, 0xfd, 0x38, 0x7d, 0x5a,
-	0x45, 0xb9, 0x35, 0x9c, 0x2a, 0x2f, 0xe7, 0xb9, 0xe7, 0x38, 0xdc, 0x72, 0xec, 0xc7, 0xda, 0x43,
-	0x74, 0xc8, 0x02, 0xc3, 0xb0, 0x1b, 0xdc, 0xb4, 0x2d, 0xd3, 0xa6, 0xc9, 0xb6, 0x65, 0xc8, 0x33,
-	0xdc, 0xd5, 0xf9, 0xac, 0x73, 0x1c, 0x24, 0x5f, 0x6a, 0xbd, 0x61, 0x78, 0x46, 0xba, 0x4a, 0xee,
-	0x30, 0x6e, 0xda, 0x75, 0x87, 0x31, 0x5a, 0xf7, 0xb4, 0x75, 0x3c, 0x8e, 0x8a, 0x7f, 0x62, 0x3a,
-	0x96, 0xe1, 0x51, 0x97, 0x37, 0xa8, 0x7d, 0x6a, 0x99, 0xae, 0xa7, 0xdd, 0x22, 0x77, 0xe1, 0x00,
-	0x7d, 0xf8, 0xd9, 0xb1, 0xe9, 0x51, 0xb7, 0x6d, 0xd4, 0x69, 0x32, 0x16, 0xb5, 0xeb, 0x4e, 0xc7,
-	0xf6, 0x28, 0xa3, 0x0d, 0x8d, 0x15, 0x5d, 0xe8, 0x07, 0xd7, 0xb1, 0x15, 0x46, 0xfb, 0xb3, 0x74,
-	0xc5, 0xfc, 0x20, 0x49, 0x7f, 0xdb, 0x90, 0xae, 0x9e, 0x13, 0xd1, 0x16, 0x9b, 0xe4, 0x10, 0x3e,
-	0xc9, 0xb5, 0x6d, 0x33, 0xa7, 0x4d, 0x99, 0x97, 0x1d, 0x78, 0xde, 0x64, 0x4e, 0xab, 0xe8, 0x9b,
-	0x55, 0x5c, 0x5d, 0x3a, 0x61, 0x86, 0x56, 0xee, 0x68, 0xda, 0x45, 0xe4, 0x36, 0xd9, 0x86, 0x8d,
-	0x74, 0x98, 0x0e, 0xb3, 0xb4, 0x0f, 0x90, 0x90, 0x8a, 0x22, 0xe1, 0x6e, 0x31, 0x86, 0x75, 0x98,
-	0x85, 0xe3, 0x79, 0x4e, 0xdd, 0xb1, 0xb4, 0x0f, 0xc9, 0x15, 0xd8, 0x29, 0x1c, 0x9a, 0x86, 0xd3,
-	0x32, 0x4c, 0x5b, 0xfb, 0x0e, 0x0d, 0x56, 0x20, 0x33, 0x6a, 0x19, 0x9e, 0x79, 0x42, 0xe5, 0x68,
-	0x5f, 0x90, 0x0f, 0xe1, 0x4e, 0x81, 0x99, 0x29, 0x37, 0xad, 0x96, 0x86, 0x5e, 0xde, 0xea, 0x78,
-	0x1d, 0xc3, 0xb2, 0x4e, 0x55, 0x18, 0x73, 0x71, 0x08, 0x84, 0xb8, 0xda, 0x0e, 0x5a, 0xbd, 0x63,
-	0x53, 0xb7, 0x6e, 0xb4, 0xd1, 0x42, 0xd9, 0x4f, 0x02, 0xa6, 0xc6, 0x20, 0x44, 0x87, 0x5b, 0x19,
-	0xaf, 0x6d, 0x30, 0xcf, 0x34, 0xac, 0x12, 0x66, 0x17, 0x3d, 0x64, 0x46, 0xde, 0x36, 0x5a, 0x54,
-	0xdb, 0x23, 0x0f, 0xe0, 0x1e, 0xba, 0x81, 0xed, 0x9a, 0xae, 0x87, 0x5e, 0xd9, 0xb1, 0x4d, 0xcf,
-	0xe5, 0x4d, 0x87, 0xf1, 0x67, 0x66, 0xc3, 0x3b, 0x96, 0x8e, 0x97, 0x3c, 0xd0, 0x5c, 0x29, 0xad,
-	0x19, 0xdd, 0xdb, 0xb0, 0xeb, 0xd4, 0xf5, 0x1c, 0xa6, 0xbd, 0x2f, 0x17, 0x93, 0xed, 0x9e, 0x65,
-	0xb8, 0x1e, 0xaf, 0x1f, 0x9b, 0x96, 0xda, 0xdb, 0xd3, 0xe9, 0x23, 0x3b, 0x25, 0x79, 0x1b, 0x17,
-	0x3a, 0x9f, 0xc7, 0x9f, 0x99, 0xde, 0x31, 0x3f, 0x36, 0x6d, 0x4f, 0x3b, 0x40, 0x9b, 0x4a, 0xc5,
-	0x0b, 0x1a, 0x1c, 0x9d, 0xf2, 0xe9, 0x08, 0xa2, 0xdd, 0x21, 0xf7, 0xe0, 0x83, 0x39, 0xb0, 0x72,
-	0x30, 0xd1, 0x74, 0xd4, 0x37, 0x3b, 0x00, 0xdc, 0xee, 0xb4, 0x72, 0x75, 0x5d, 0xed, 0x1b, 0x3c,
-	0xcf, 0x39, 0xb7, 0x65, 0xda, 0x65, 0x44, 0x07, 0xa3, 0x5b, 0x61, 0x8e, 0x8c, 0xa5, 0x0c, 0xfb,
-	0x6b, 0x4c, 0x61, 0x05, 0x76, 0xd3, 0x64, 0x45, 0x83, 0x28, 0xd0, 0x23, 0x19, 0x35, 0x72, 0x50,
-	0xcb, 0xb0, 0x3b, 0x4d, 0xa3, 0xee, 0x75, 0x64, 0x20, 0x75, 0x1a, 0xa7, 0xda, 0xef, 0xf0, 0x4c,
-	0xe4, 0x52, 0x0d, 0x87, 0xba, 0x5c, 0x36, 0x05, 0x0c, 0xcf, 0x74, 0x9b, 0xa7, 0x9c, 0xd1, 0x26,
-	0x65, 0xd4, 0xae, 0x53, 0xde, 0x76, 0xd0, 0x4a, 0x47, 0x68, 0xa5, 0xdc, 0x96, 0x25, 0x76, 0x16,
-	0xe1, 0xea, 0x52, 0xf9, 0x2c, 0x5c, 0x95, 0x47, 0x69, 0xe0, 0x8e, 0x48, 0x2d, 0x1d, 0x8f, 0x67,
-	0xbb, 0xed, 0xf0, 0x63, 0xe3, 0x84, 0x72, 0xd7, 0x3c, 0xb2, 0x4c, 0xfb, 0xb1, 0xab, 0x3d, 0x43,
-	0xed, 0x55, 0x76, 0x9e, 0x9e, 0xa5, 0xee, 0xd8, 0x4d, 0xcb, 0xac, 0x7b, 0x1a, 0x25, 0x5f, 0xc3,
-	0x2f, 0xdf, 0x5d, 0x7b, 0x8e, 0xba, 0x75, 0x2c, 0x83, 0x69, 0x4d, 0xf4, 0xea, 0x23, 0xc3, 0x55,
-	0x21, 0xb4, 0xd5, 0x71, 0x3d, 0x8e, 0xa1, 0x82, 0x62, 0xf8, 0xb0, 0x2c, 0x3c, 0x63, 0xae, 0x66,
-	0x93, 0x5b, 0x70, 0x2d, 0x3d, 0xd4, 0x59, 0xfa, 0xc9, 0x72, 0xb7, 0xe6, 0xe2, 0x0e, 0x14, 0xe3,
-	0xfa, 0x3c, 0x90, 0x2f, 0x23, 0xba, 0x53, 0xef, 0xb4, 0x64, 0x44, 0x76, 0x1c, 0x5e, 0x77, 0x5a,
-	0x6d, 0x8b, 0x3e, 0xd7, 0x4e, 0xb0, 0xce, 0xc9, 0x22, 0x82, 0xd7, 0xfc, 0x46, 0xfb, 0xff, 0x72,
-	0xb7, 0x52, 0xac, 0x6b, 0xfe, 0x9e, 0x72, 0xcb, 0x6c, 0x99, 0x1e, 0x9e, 0x5c, 0x4a, 0x1b, 0xb4,
-	0xa1, 0xf5, 0xc9, 0x0e, 0x6c, 0x35, 0xe8, 0x09, 0x6f, 0x39, 0x0d, 0xca, 0x1d, 0xdb, 0x3a, 0xd5,
-	0x06, 0x18, 0x15, 0x55, 0x4c, 0x72, 0xa9, 0xdc, 0x80, 0x96, 0xfc, 0x39, 0xcd, 0x10, 0xb5, 0xaf,
-	0xbb, 0x2e, 0x77, 0x4f, 0x6d, 0xcf, 0x78, 0xce, 0xf3, 0xdc, 0xcb, 0x59, 0xc7, 0xa2, 0xda, 0x4d,
-	0xf4, 0xe3, 0x02, 0xdf, 0xf5, 0x98, 0x71, 0xca, 0x3d, 0x66, 0x98, 0x68, 0x7c, 0x7e, 0x64, 0xd4,
-	0x9f, 0xb8, 0x96, 0xe1, 0x1e, 0x6b, 0x1f, 0xe1, 0x32, 0x0b, 0x40, 0x19, 0x8e, 0x5b, 0xa6, 0x2d,
-	0xc3, 0x6a, 0xdd, 0x69, 0xc9, 0x57, 0x97, 0x7b, 0x68, 0xcf, 0xcb, 0x40, 0xae, 0xc7, 0xd0, 0x27,
-	0xee, 0xa3, 0xa6, 0x05, 0xcc, 0x91, 0xa1, 0x42, 0xe3, 0xc7, 0xe4, 0x33, 0x78, 0x50, 0xa0, 0x63,
-	0x42, 0x35, 0x6d, 0xdc, 0x0f, 0xac, 0xba, 0xb8, 0xd3, 0xe4, 0x4f, 0x3b, 0x86, 0xa5, 0xce, 0x96,
-	0x54, 0xfd, 0x93, 0xd2, 0x64, 0x59, 0x69, 0x48, 0xeb, 0x96, 0xc1, 0x0c, 0x0f, 0xed, 0xfe, 0x00,
-	0xfd, 0x74, 0x0a, 0xa3, 0xec, 0x8e, 0xe9, 0xb6, 0x00, 0xfb, 0x45, 0xc9, 0x0a, 0xb2, 0x30, 0x95,
-	0xb3, 0xbb, 0xb4, 0xd3, 0x70, 0xb8, 0x4b, 0x2d, 0x5a, 0xc7, 0x18, 0xf2, 0x29, 0xb9, 0x0d, 0xd7,
-	0x0b, 0xc0, 0x74, 0xcb, 0x33, 0xc0, 0x61, 0xc9, 0x4c, 0xd2, 0xb3, 0x33, 0x36, 0x77, 0x3d, 0x83,
-	0x79, 0xda, 0x67, 0xe4, 0x0b, 0xf8, 0x74, 0xca, 0x4c, 0x6d, 0x83, 0xb9, 0x14, 0x33, 0x6f, 0xbb,
-	0xe3, 0x71, 0x46, 0x31, 0xf4, 0xbb, 0x38, 0x7f, 0x36, 0xee, 0xe7, 0x18, 0xd8, 0xe6, 0x4c, 0x8c,
-	0x96, 0xfb, 0xb2, 0xc4, 0x2b, 0x26, 0x9c, 0x5f, 0x95, 0xf4, 0x99, 0x9b, 0x7b, 0xbe, 0x42, 0x8f,
-	0x2b, 0x80, 0x66, 0xd3, 0xd0, 0xf7, 0xe4, 0x23, 0xd0, 0xe7, 0x23, 0xa6, 0x32, 0xd2, 0xd7, 0x78,
-	0xa2, 0xe7, 0xba, 0x9b, 0xc7, 0xf2, 0xc5, 0xfc, 0xa6, 0x64, 0xc5, 0x72, 0x72, 0xd5, 0x7e, 0x5f,
-	0x9a, 0x6e, 0x26, 0xfb, 0xda, 0x8e, 0xac, 0x18, 0x78, 0xc9, 0x90, 0xd3, 0x1e, 0xc2, 0x8f, 0x0d,
-	0x8c, 0x03, 0xc5, 0x9d, 0x76, 0xb5, 0xff, 0x47, 0x7e, 0x07, 0xdf, 0xce, 0x5f, 0x49, 0x49, 0x5a,
-	0x86, 0x83, 0x23, 0x4c, 0x64, 0xae, 0xd9, 0xa0, 0xfc, 0x09, 0x3d, 0x6d, 0x32, 0x8c, 0xa6, 0x7f,
-	0x20, 0x0f, 0xe1, 0x70, 0xfe, 0x08, 0x29, 0x66, 0x46, 0xe6, 0x8f, 0x25, 0xbb, 0xb4, 0x0c, 0xab,
-	0xe9, 0xb0, 0x16, 0xc6, 0x62, 0xda, 0x30, 0x0d, 0xfe, 0xb4, 0x43, 0xd9, 0xa9, 0xf6, 0xa2, 0x84,
-	0x2a, 0x86, 0x6c, 0x09, 0xc3, 0x2b, 0x8f, 0xd6, 0x2d, 0x39, 0xeb, 0x0c, 0xaa, 0x49, 0x0d, 0x0c,
-	0xed, 0x5a, 0xef, 0x72, 0xe0, 0xf4, 0x7e, 0x84, 0x97, 0xef, 0x6e, 0x72, 0x00, 0xea, 0x96, 0xe1,
-	0xba, 0x5a, 0x84, 0x95, 0xd0, 0x1b, 0x71, 0xe9, 0xf3, 0x6b, 0xfc, 0x06, 0xe4, 0x54, 0x05, 0xa5,
-	0x3d, 0x4e, 0x9d, 0x17, 0xa3, 0x9b, 0x8b, 0x75, 0x89, 0x75, 0xca, 0x6d, 0xea, 0x7a, 0xb4, 0xa1,
-	0xfd, 0x78, 0xb9, 0xa5, 0x4b, 0x75, 0x58, 0x9e, 0xbf, 0x8f, 0x4b, 0x2e, 0x91, 0x01, 0x0b, 0xc2,
-	0x88, 0x96, 0xe5, 0x89, 0x0a, 0x24, 0x26, 0xf9, 0x1c, 0x7e, 0xf1, 0x16, 0x11, 0xcf, 0x79, 0x4c,
-	0xbd, 0x63, 0xaa, 0x2a, 0x05, 0xed, 0x07, 0x99, 0x2e, 0xe7, 0x48, 0x24, 0xa1, 0xdf, 0x4d, 0x7d,
-	0xa9, 0xae, 0xe2, 0xcb, 0x13, 0x7d, 0x00, 0x5a, 0xb9, 0x2b, 0xf3, 0xb7, 0xf7, 0x0c, 0x0e, 0x60,
-	0xa3, 0xd8, 0x04, 0x92, 0xad, 0x03, 0x56, 0x24, 0xe9, 0x7f, 0x82, 0x8d, 0x42, 0x27, 0xe9, 0x6f,
-	0x9f, 0x69, 0x1f, 0x56, 0x93, 0x56, 0xbe, 0x7a, 0xc6, 0x4d, 0xbe, 0xf4, 0x3f, 0xc2, 0x4e, 0xfa,
-	0xeb, 0xd2, 0x76, 0x38, 0x4a, 0xda, 0x6b, 0x0f, 0x61, 0x29, 0x12, 0x71, 0x32, 0xc9, 0xdb, 0x7f,
-	0xac, 0x8c, 0xe0, 0xfc, 0xb7, 0xe8, 0x8b, 0x85, 0xff, 0xd6, 0xa0, 0xff, 0xcb, 0x02, 0xec, 0x66,
-	0xb8, 0xc2, 0x7b, 0xfc, 0x77, 0xb0, 0x3e, 0x4e, 0xa7, 0x93, 0xf3, 0xcc, 0xf6, 0xaa, 0x66, 0xd4,
-	0x62, 0xb9, 0x08, 0x69, 0xc3, 0x9e, 0xea, 0xa1, 0x05, 0x67, 0x7c, 0x32, 0x4c, 0x9f, 0xf6, 0x7a,
-	0x72, 0xf2, 0xd9, 0xd6, 0x53, 0xc9, 0x2e, 0x8c, 0x48, 0x59, 0xf3, 0xac, 0x93, 0x4b, 0xea, 0xff,
-	0xbc, 0x0c, 0x5a, 0x8e, 0x63, 0x22, 0x9a, 0xf4, 0x51, 0xcd, 0xd5, 0x28, 0xf6, 0xe3, 0x49, 0x24,
-	0x07, 0xae, 0x3e, 0xfc, 0xe8, 0xd2, 0x81, 0x95, 0xc0, 0xa1, 0x2b, 0xd1, 0x2c, 0x91, 0x22, 0x5f,
-	0xc1, 0xaa, 0x9c, 0x2a, 0x6d, 0xc3, 0xbe, 0x4d, 0xb1, 0x04, 0x4d, 0xbe, 0xc8, 0x7e, 0x25, 0x58,
-	0x68, 0xaa, 0xaa, 0x1e, 0x92, 0xec, 0x88, 0xee, 0xbc, 0x2a, 0x37, 0x53, 0x2f, 0x69, 0xa2, 0x2e,
-	0xbf, 0xa1, 0x89, 0xfa, 0x10, 0x76, 0xe3, 0xd0, 0x1f, 0x46, 0xe8, 0x09, 0x22, 0xcc, 0x7e, 0xc9,
-	0xa2, 0xfa, 0xae, 0x0b, 0x9f, 0x33, 0x52, 0xe0, 0xa6, 0xbf, 0x66, 0xb9, 0x07, 0xdb, 0xf1, 0xc5,
-	0x58, 0xf0, 0xa0, 0x27, 0x86, 0x71, 0x70, 0x16, 0x88, 0xb0, 0xb6, 0x22, 0x3b, 0x55, 0x55, 0x24,
-	0x9b, 0x19, 0x95, 0x30, 0xd8, 0x53, 0x3f, 0x36, 0x8f, 0x44, 0xcc, 0xb3, 0x7d, 0x4b, 0x9b, 0xcb,
-	0x6f, 0xdf, 0x6b, 0xf2, 0xaa, 0x4c, 0x8a, 0xc8, 0x73, 0xd8, 0xcf, 0xc7, 0x0c, 0x73, 0x6f, 0x52,
-	0x4f, 0x9b, 0x1b, 0x0f, 0xf5, 0x4b, 0x46, 0x2d, 0x38, 0x1e, 0xdb, 0x7b, 0x35, 0x4b, 0x8c, 0xf4,
-	0x8f, 0x61, 0x55, 0xed, 0xdc, 0xf4, 0xaf, 0x51, 0x2a, 0xb0, 0xdc, 0xc6, 0x70, 0xb9, 0x20, 0x7f,
-	0x49, 0x66, 0x98, 0x96, 0xb6, 0xa8, 0xff, 0x65, 0x01, 0xb6, 0xb2, 0x56, 0xb6, 0x39, 0x3c, 0x1b,
-	0x91, 0x9b, 0x00, 0xe1, 0xa4, 0x2f, 0x22, 0x3e, 0xf6, 0xe3, 0x97, 0xc9, 0x2f, 0x28, 0xd6, 0x25,
-	0xa5, 0xed, 0xc7, 0x2f, 0x2f, 0xd9, 0xcb, 0xc5, 0xbf, 0x7e, 0x2f, 0x97, 0x2e, 0xdf, 0xcb, 0xff,
-	0x0d, 0x00, 0x00, 0xff, 0xff, 0x15, 0x53, 0x44, 0xa9, 0x1e, 0x35, 0x00, 0x00,
+func file_validator_proto_rawDescGZIP() []byte {
+	file_validator_proto_rawDescOnce.Do(func() {
+		file_validator_proto_rawDescData = protoimpl.X.CompressGZIP(file_validator_proto_rawDescData)
+	})
+	return file_validator_proto_rawDescData
+}
+
+var file_validator_proto_enumTypes = make([]protoimpl.EnumInfo, 12)
+var file_validator_proto_msgTypes = make([]protoimpl.MessageInfo, 32)
+var file_validator_proto_goTypes = []interface{}{
+	(AttrSpec_ValueSet)(0),                       // 0: amp.validator.AttrSpec.ValueSet
+	(AttrSpec_DispatchKeyType)(0),                // 1: amp.validator.AttrSpec.DispatchKeyType
+	(AmpLayout_Layout)(0),                        // 2: amp.validator.AmpLayout.Layout
+	(AncestorMarker_Marker)(0),                   // 3: amp.validator.AncestorMarker.Marker
+	(ExtensionSpec_ExtensionType)(0),             // 4: amp.validator.ExtensionSpec.ExtensionType
+	(ExtensionSpec_ExtensionUsageRequirement)(0), // 5: amp.validator.ExtensionSpec.ExtensionUsageRequirement
+	(HtmlFormat_Code)(0),                         // 6: amp.validator.HtmlFormat.Code
+	(TagSpec_NamedId)(0),                         // 7: amp.validator.TagSpec.NamedId
+	(ErrorCategory_Code)(0),                      // 8: amp.validator.ErrorCategory.Code
+	(ValidationError_Severity)(0),                // 9: amp.validator.ValidationError.Severity
+	(ValidationError_Code)(0),                    // 10: amp.validator.ValidationError.Code
+	(ValidationResult_Status)(0),                 // 11: amp.validator.ValidationResult.Status
+	(*AttrTriggerSpec)(nil),                      // 12: amp.validator.AttrTriggerSpec
+	(*PropertySpec)(nil),                         // 13: amp.validator.PropertySpec
+	(*PropertySpecList)(nil),                     // 14: amp.validator.PropertySpecList
+	(*UrlSpec)(nil),                              // 15: amp.validator.UrlSpec
+	(*CssDeclaration)(nil),                       // 16: amp.validator.CssDeclaration
+	(*AttrSpec)(nil),                             // 17: amp.validator.AttrSpec
+	(*AttrList)(nil),                             // 18: amp.validator.AttrList
+	(*DescendantTagList)(nil),                    // 19: amp.validator.DescendantTagList
+	(*DeclarationList)(nil),                      // 20: amp.validator.DeclarationList
+	(*DisallowedCDataRegex)(nil),                 // 21: amp.validator.DisallowedCDataRegex
+	(*MediaQuerySpec)(nil),                       // 22: amp.validator.MediaQuerySpec
+	(*SelectorSpec)(nil),                         // 23: amp.validator.SelectorSpec
+	(*AtRuleSpec)(nil),                           // 24: amp.validator.AtRuleSpec
+	(*CssSpec)(nil),                              // 25: amp.validator.CssSpec
+	(*CdataSpec)(nil),                            // 26: amp.validator.CdataSpec
+	(*AmpLayout)(nil),                            // 27: amp.validator.AmpLayout
+	(*AncestorMarker)(nil),                       // 28: amp.validator.AncestorMarker
+	(*ChildTagSpec)(nil),                         // 29: amp.validator.ChildTagSpec
+	(*ReferencePoint)(nil),                       // 30: amp.validator.ReferencePoint
+	(*ExtensionSpec)(nil),                        // 31: amp.validator.ExtensionSpec
+	(*HtmlFormat)(nil),                           // 32: amp.validator.HtmlFormat
+	(*TagSpec)(nil),                              // 33: amp.validator.TagSpec
+	(*DocSpec)(nil),                              // 34: amp.validator.DocSpec
+	(*DocCssSpec)(nil),                           // 35: amp.validator.DocCssSpec
+	(*ValidatorRules)(nil),                       // 36: amp.validator.ValidatorRules
+	(*ErrorCategory)(nil),                        // 37: amp.validator.ErrorCategory
+	(*ValidationError)(nil),                      // 38: amp.validator.ValidationError
+	(*ErrorSpecificity)(nil),                     // 39: amp.validator.ErrorSpecificity
+	(*ErrorFormat)(nil),                          // 40: amp.validator.ErrorFormat
+	(*ValueSetProvision)(nil),                    // 41: amp.validator.ValueSetProvision
+	(*ValueSetRequirement)(nil),                  // 42: amp.validator.ValueSetRequirement
+	(*ValidationResult)(nil),                     // 43: amp.validator.ValidationResult
+}
+var file_validator_proto_depIdxs = []int32{
+	13, // 0: amp.validator.PropertySpecList.properties:type_name -> amp.validator.PropertySpec
+	15, // 1: amp.validator.AttrSpec.value_url:type_name -> amp.validator.UrlSpec
+	14, // 2: amp.validator.AttrSpec.value_properties:type_name -> amp.validator.PropertySpecList
+	0,  // 3: amp.validator.AttrSpec.add_value_to_set:type_name -> amp.validator.AttrSpec.ValueSet
+	0,  // 4: amp.validator.AttrSpec.value_oneof_set:type_name -> amp.validator.AttrSpec.ValueSet
+	12, // 5: amp.validator.AttrSpec.trigger:type_name -> amp.validator.AttrTriggerSpec
+	16, // 6: amp.validator.AttrSpec.css_declaration:type_name -> amp.validator.CssDeclaration
+	1,  // 7: amp.validator.AttrSpec.dispatch_key:type_name -> amp.validator.AttrSpec.DispatchKeyType
+	28, // 8: amp.validator.AttrSpec.requires_ancestor:type_name -> amp.validator.AncestorMarker
+	17, // 9: amp.validator.AttrList.attrs:type_name -> amp.validator.AttrSpec
+	16, // 10: amp.validator.DeclarationList.declaration:type_name -> amp.validator.CssDeclaration
+	22, // 11: amp.validator.AtRuleSpec.media_query_spec:type_name -> amp.validator.MediaQuerySpec
+	24, // 12: amp.validator.CssSpec.at_rule_spec:type_name -> amp.validator.AtRuleSpec
+	23, // 13: amp.validator.CssSpec.selector_spec:type_name -> amp.validator.SelectorSpec
+	25, // 14: amp.validator.CdataSpec.css_spec:type_name -> amp.validator.CssSpec
+	21, // 15: amp.validator.CdataSpec.disallowed_cdata_regex:type_name -> amp.validator.DisallowedCDataRegex
+	2,  // 16: amp.validator.AmpLayout.supported_layouts:type_name -> amp.validator.AmpLayout.Layout
+	3,  // 17: amp.validator.AncestorMarker.marker:type_name -> amp.validator.AncestorMarker.Marker
+	4,  // 18: amp.validator.ExtensionSpec.extension_type:type_name -> amp.validator.ExtensionSpec.ExtensionType
+	5,  // 19: amp.validator.ExtensionSpec.requires_usage:type_name -> amp.validator.ExtensionSpec.ExtensionUsageRequirement
+	6,  // 20: amp.validator.TagSpec.html_format:type_name -> amp.validator.HtmlFormat.Code
+	7,  // 21: amp.validator.TagSpec.named_id:type_name -> amp.validator.TagSpec.NamedId
+	31, // 22: amp.validator.TagSpec.extension_spec:type_name -> amp.validator.ExtensionSpec
+	17, // 23: amp.validator.TagSpec.attrs:type_name -> amp.validator.AttrSpec
+	26, // 24: amp.validator.TagSpec.cdata:type_name -> amp.validator.CdataSpec
+	29, // 25: amp.validator.TagSpec.child_tags:type_name -> amp.validator.ChildTagSpec
+	30, // 26: amp.validator.TagSpec.reference_points:type_name -> amp.validator.ReferencePoint
+	27, // 27: amp.validator.TagSpec.amp_layout:type_name -> amp.validator.AmpLayout
+	28, // 28: amp.validator.TagSpec.mark_descendants:type_name -> amp.validator.AncestorMarker
+	6,  // 29: amp.validator.DocSpec.html_format:type_name -> amp.validator.HtmlFormat.Code
+	6,  // 30: amp.validator.DocCssSpec.html_format:type_name -> amp.validator.HtmlFormat.Code
+	16, // 31: amp.validator.DocCssSpec.declaration:type_name -> amp.validator.CssDeclaration
+	16, // 32: amp.validator.DocCssSpec.declaration_svg:type_name -> amp.validator.CssDeclaration
+	15, // 33: amp.validator.DocCssSpec.image_url_spec:type_name -> amp.validator.UrlSpec
+	15, // 34: amp.validator.DocCssSpec.font_url_spec:type_name -> amp.validator.UrlSpec
+	33, // 35: amp.validator.ValidatorRules.tags:type_name -> amp.validator.TagSpec
+	18, // 36: amp.validator.ValidatorRules.attr_lists:type_name -> amp.validator.AttrList
+	40, // 37: amp.validator.ValidatorRules.error_formats:type_name -> amp.validator.ErrorFormat
+	39, // 38: amp.validator.ValidatorRules.error_specificity:type_name -> amp.validator.ErrorSpecificity
+	19, // 39: amp.validator.ValidatorRules.descendant_tag_list:type_name -> amp.validator.DescendantTagList
+	34, // 40: amp.validator.ValidatorRules.doc:type_name -> amp.validator.DocSpec
+	35, // 41: amp.validator.ValidatorRules.css:type_name -> amp.validator.DocCssSpec
+	20, // 42: amp.validator.ValidatorRules.declaration_list:type_name -> amp.validator.DeclarationList
+	9,  // 43: amp.validator.ValidationError.severity:type_name -> amp.validator.ValidationError.Severity
+	10, // 44: amp.validator.ValidationError.code:type_name -> amp.validator.ValidationError.Code
+	8,  // 45: amp.validator.ValidationError.category:type_name -> amp.validator.ErrorCategory.Code
+	10, // 46: amp.validator.ErrorSpecificity.code:type_name -> amp.validator.ValidationError.Code
+	10, // 47: amp.validator.ErrorFormat.code:type_name -> amp.validator.ValidationError.Code
+	0,  // 48: amp.validator.ValueSetProvision.set:type_name -> amp.validator.AttrSpec.ValueSet
+	41, // 49: amp.validator.ValueSetRequirement.provision:type_name -> amp.validator.ValueSetProvision
+	38, // 50: amp.validator.ValueSetRequirement.error_if_unsatisfied:type_name -> amp.validator.ValidationError
+	11, // 51: amp.validator.ValidationResult.status:type_name -> amp.validator.ValidationResult.Status
+	38, // 52: amp.validator.ValidationResult.errors:type_name -> amp.validator.ValidationError
+	41, // 53: amp.validator.ValidationResult.value_set_provisions:type_name -> amp.validator.ValueSetProvision
+	42, // 54: amp.validator.ValidationResult.value_set_requirements:type_name -> amp.validator.ValueSetRequirement
+	55, // [55:55] is the sub-list for method output_type
+	55, // [55:55] is the sub-list for method input_type
+	55, // [55:55] is the sub-list for extension type_name
+	55, // [55:55] is the sub-list for extension extendee
+	0,  // [0:55] is the sub-list for field type_name
+}
+
+func init() { file_validator_proto_init() }
+func file_validator_proto_init() {
+	if File_validator_proto != nil {
+		return
+	}
+	if !protoimpl.UnsafeEnabled {
+		file_validator_proto_msgTypes[0].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*AttrTriggerSpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[1].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*PropertySpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[2].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*PropertySpecList); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[3].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*UrlSpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[4].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*CssDeclaration); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[5].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*AttrSpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[6].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*AttrList); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[7].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*DescendantTagList); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[8].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*DeclarationList); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[9].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*DisallowedCDataRegex); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[10].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*MediaQuerySpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[11].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*SelectorSpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[12].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*AtRuleSpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[13].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*CssSpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[14].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*CdataSpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[15].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*AmpLayout); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[16].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*AncestorMarker); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[17].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*ChildTagSpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[18].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*ReferencePoint); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[19].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*ExtensionSpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[20].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*HtmlFormat); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[21].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*TagSpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[22].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*DocSpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[23].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*DocCssSpec); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[24].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*ValidatorRules); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[25].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*ErrorCategory); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[26].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*ValidationError); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[27].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*ErrorSpecificity); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[28].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*ErrorFormat); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[29].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*ValueSetProvision); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[30].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*ValueSetRequirement); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+		file_validator_proto_msgTypes[31].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*ValidationResult); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+	}
+	type x struct{}
+	out := protoimpl.TypeBuilder{
+		File: protoimpl.DescBuilder{
+			GoPackagePath: reflect.TypeOf(x{}).PkgPath(),
+			RawDescriptor: file_validator_proto_rawDesc,
+			NumEnums:      12,
+			NumMessages:   32,
+			NumExtensions: 0,
+			NumServices:   0,
+		},
+		GoTypes:           file_validator_proto_goTypes,
+		DependencyIndexes: file_validator_proto_depIdxs,
+		EnumInfos:         file_validator_proto_enumTypes,
+		MessageInfos:      file_validator_proto_msgTypes,
+	}.Build()
+	File_validator_proto = out.File
+	file_validator_proto_rawDesc = nil
+	file_validator_proto_goTypes = nil
+	file_validator_proto_depIdxs = nil
 }
-
diff --git a/validator/validator.proto b/validator/validator.proto
index 358d97a444d30..bc47c57f3356c 100644
--- a/validator/validator.proto
+++ b/validator/validator.proto
@@ -15,6 +15,14 @@
 //
 syntax = "proto2";
 
+// TODO(b/188065554) Deprecate automatic generation of validator.pb.go.
+option go_package = "./validator.proto;amp_validator";
+
+// Package defines Validator protobuffers. This is a package comment required by
+// Golint for validator.pb.go, but Golint still fails with an error "Package
+// amp_validator (defined in [validator.pb.go]) should have a package comment".
+// This happens because protoc adds an extra line after the comment. Ignore the
+// error.
 package amp.validator;
 
 // Used for validating attributes that require another attribute for some
@@ -67,13 +75,18 @@ message UrlSpec {
   // reserved 4;
 }
 
-// NEXT AVAILABLE TAG: 3
+// NEXT AVAILABLE TAG: 4
 message CssDeclaration {
   // The name of the declaration (e.g. display). Use lower-case attribute names
   // only.
   optional string name = 1;
+
+  // This would be a oneof, but this file only uses features in protobuf 2.5.0.
+  // begin oneof {
   // The valid values of the declaration (e.g. block).
   repeated string value_casei = 2;
+  optional string value_regex_casei = 3;
+  // } end oneof
 }
 
 // Attributes that are not covered by at least one of these specs are
@@ -342,7 +355,7 @@ message CdataSpec {
 // Specifies which AMP Layouts are supported by a given element.
 // For the purpose of the validator, this specifies which
 // values for layout, height, and width attributes are allowed. Also see
-// https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md
+// https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md
 // TODO(johannes): Make the error messages around layouts better. This
 // may require revamping the documentation for elements and/or the above spec,
 // so that a user gets more clearly informed about which layouts are
@@ -352,22 +365,22 @@ message CdataSpec {
 message AmpLayout {
   // NEXT AVAILABLE TAG: 10
   enum Layout {
-    UNKNOWN = 0;
-    NODISPLAY = 1;
-    FIXED = 2;
-    FIXED_HEIGHT = 3;
-    RESPONSIVE = 4;
     CONTAINER = 5;
     FILL = 6;
+    FIXED = 2;
+    FIXED_HEIGHT = 3;
     FLEX_ITEM = 7;
     FLUID = 8;
     INTRINSIC = 9;
+    NODISPLAY = 1;
+    RESPONSIVE = 4;
+    UNKNOWN = 0;
   }
   // Specifies which layouts are supported by this element.
   repeated Layout supported_layouts = 1;
   // Specifies whether this element has default dimensions. This corresponds
   // to being allowlisted in naturalDimensions_ in
-  // https://github.com/ampproject/amphtml/blob/master/src/layout.js.
+  // https://github.com/ampproject/amphtml/blob/main/src/layout.js.
   optional bool defines_default_width = 2;
   optional bool defines_default_height = 3;
 }
@@ -450,7 +463,7 @@ message ReferencePoint {
 
 // Specs specific to AMP Extensions. This is a field within TagSpec that
 // replaces the standard tagspec list of attributes, requirements, etc.
-// NEXT AVAILABLE TAG: 9
+// NEXT AVAILABLE TAG: 10
 message ExtensionSpec {
   // e.g. "amp-video". This is used both as the attribute value for the
   // 'custom-element' attribute value as well as part of the 'src' attribute
@@ -458,6 +471,11 @@ message ExtensionSpec {
   optional string name = 1;
   // e.g. "0.1", "1.0", "latest".
   repeated string version = 2;
+  // If multiple TagSpecs for the same extension exist, separated by version,
+  // specify a version_name string to disambiguate their spec_names. For
+  // example, "v1.0" or "v0.1-0.2". This string will become part of the name
+  // used for referring to this extension in validator error messages.
+  optional string version_name = 9;
   // deprecated_version must be a strict subset of version. If the version
   // matches a deprecated_version, validation will emit a warning.
   repeated string deprecated_version = 3;
@@ -519,16 +537,18 @@ message HtmlFormat {
     AMP = 1;
     AMP4ADS = 2;
     AMP4EMAIL = 3;
-    ACTIONS = 5;
     EXPERIMENTAL = 4;  // Currently unused
   }
+
+  // Deprecated fields, do not reuse.
+  // reserved 5;
 }
 
 // Tags that are not covered by at least one of these specs are disallowed.
 // Some tags are mandatory. Note that the tag name is not unique, that is,
 // there can be multiple tag specs covering the same name, e.g., for
 // multiple meta tags (with different attributes).
-// NEXT AVAILABLE TAG: 39
+// NEXT AVAILABLE TAG: 40
 message TagSpec {
   // The html_format field tells the validator for which html formats
   // (ie: (<html ⚡> vs <html a4⚡>) this HTML TagSpec is allowed to validate.
@@ -554,11 +574,19 @@ message TagSpec {
   optional string tag_name = 1;
 
   // If provided, the spec_name must be unique within the validator
-  // rules. It will be used with preference over the tag_name in
-  // parameters for error messages and other usages that require or
-  // benefit from a unique identifier.
+  // rules. This string forms a a unique id for this TagSpec. If not set, the
+  // tag_name field is used as the unique id. This string is not used in error
+  // messages, see descriptive_name for that.
   optional string spec_name = 2;
 
+  // If `tag_name` is not a sufficient descriptor for error messages having to
+  // do with this tag spec, provide a `descriptive_name` value, which if present
+  // will be used in place of `tag_name`. Typically `descriptive_name` should
+  // include the tag_name in it, and should avoid using < and > in case
+  // downstream libraries of the validator fail to properly HTML escape rendered
+  // error strings.
+  optional string descriptive_name = 39;
+
   // NamedId's are used to uniquely identify specific TagSpecs in the
   // validator rules in a stable manner. Most TagSpecs have no set NamedId.
   // If a TagSpec has a NamedId it must be unique. In other words, no two
@@ -684,17 +712,40 @@ message TagSpec {
   // reserved 14, 26;
 }
 
+// Exactly one DocSpec will match each AMP document. This spec defines some
+// default rules for the entire document scoped by it's HtmlFormat and any
+// Type Identifiers.
+// NEXT AVAILABLE TAG: 6
+message DocSpec {
+  // The html_format field tells the validator for which html formats
+  // (ie: (<html ⚡> vs <html a4⚡>) this DocSpec is defined for.
+  repeated HtmlFormat.Code html_format = 1;
+  // If a Type Identifier is in enabled_by then this DocSpec will be used
+  // in validating parsed documents with that Type Identifier. If a Type
+  // Identifier is in disabled_by then this DocSpec will not be used in
+  // validating parsed documents with that Type Identifier. An DocSpec can
+  // not have both enabled_by and disabled_by set.
+  repeated string enabled_by = 2;
+  repeated string disabled_by = 3;
+  // If set, the entire document's content cannot be greater than this length,
+  // in bytes. A value of -2 (default) indicates that there is no limit
+  // (unlimited).
+  optional int32 max_bytes = 4 [default = -2];
+  // If provided, a URL linking to a section / sentence in the AMP HTML spec.
+  optional string max_bytes_spec_url = 5;
+}
+
 // Exactly one DocCssSpec will match each AMP document. This spec defines the
 // default css rules for style attributes and publisher style tags across the
 // entire document. Rules for specific tags may be overridden by those tags.
 // NEXT AVAILABLE TAG: 20
 message DocCssSpec {
-  // The html_format field tells the val:idator for which html formats
-  // (ie: (<html ⚡> vs <html a4⚡>) this CssLengthSpec is defined for.
+  // The html_format field tells the validator for which html formats
+  // (ie: (<html ⚡> vs <html a4⚡>) this DocCssSpec is defined for.
   repeated HtmlFormat.Code html_format = 1;
   // If a Type Identifier is in enabled_by then this DocCssSpec will be used
   // in validating parsed documents with that Type Identifier. If a Type
-  // identifier is in disabled_by then this DocCssSpec will not be used in
+  // Identifier is in disabled_by then this DocCssSpec will not be used in
   // validating parsed documents;: with that Type Identifier. An DocCssSpec can
   // not have both enabled_by and disabled_by set.
   repeated string enabled_by = 2;
@@ -723,11 +774,9 @@ message DocCssSpec {
   // If provided, a URL linking to a section / sentence in the AMP HTML spec.
   optional string max_bytes_spec_url = 8;
 
-  // Declaration allow-lists were added when style attribute validation was
-  // implementented. Therefore older style tags do not enforce an allow list
-  // of declarations. If true, all declarations are allowed in style tags,
-  // regardless of the contents of the `declaration` list.
-  optional bool allow_all_declaration_in_style_tag = 10 [default = false];
+  // If true, all declarations are allowed in style tags and inline style
+  // attributes, regardless of the contents of the `declaration` list.
+  optional bool allow_all_declaration_in_style = 10 [default = false];
   // If true, all variants of declarations that are vendor prefixes are allowed.
   // for example, if `gradient` is an allowed declaration and this is true, then
   // `-webkit-gradient` is also an allowed declaration.
@@ -753,7 +802,7 @@ message DocCssSpec {
 
 // Top level message - start reading here.
 // The validator knows about a set of tag specifications.
-// NEXT AVAILABLE TAG: 21
+// NEXT AVAILABLE TAG: 22
 message ValidatorRules {
   repeated TagSpec tags = 1;
   repeated AttrList attr_lists = 7;
@@ -776,6 +825,9 @@ message ValidatorRules {
 
   repeated DescendantTagList descendant_tag_list = 16;
 
+  // The DocSpec rules are scoped by the document's HtmlFormat and Type
+  // Identifiers and defined within each DocSpec.
+  repeated DocSpec doc = 21;
   repeated DocCssSpec css = 19;
   repeated DeclarationList declaration_list = 20;
 
@@ -810,7 +862,7 @@ message ValidationError {
     // DO NOT REASSIGN the previously used values 2, 3.
   }
   optional Severity severity = 6 [default = ERROR];
-  // NEXT AVAILABLE TAG: 117
+  // NEXT AVAILABLE TAG: 121
   enum Code {
     UNKNOWN_CODE = 0;
     INVALID_DOCTYPE_HTML = 111;
@@ -823,6 +875,7 @@ message ValidationError {
     WARNING_EXTENSION_DEPRECATED_VERSION = 80;
     NON_LTS_SCRIPT_AFTER_LTS = 112;
     LTS_SCRIPT_AFTER_NON_LTS = 113;
+    INCORRECT_SCRIPT_RELEASE_VERSION = 119;
     ATTR_REQUIRED_BUT_MISSING = 61;
     DISALLOWED_TAG = 2;
     GENERAL_DISALLOWED_TAG = 51;
@@ -845,6 +898,7 @@ message ValidationError {
     STYLESHEET_TOO_LONG = 50;
     STYLESHEET_AND_INLINE_STYLE_TOO_LONG = 102;
     INLINE_STYLE_TOO_LONG = 103;
+    INLINE_SCRIPT_TOO_LONG = 118;
     MANDATORY_CDATA_MISSING_OR_INCORRECT = 9;
     CDATA_VIOLATES_DENYLIST = 30;
     NON_WHITESPACE_CDATA_ENCOUNTERED = 82;
@@ -889,6 +943,7 @@ message ValidationError {
     INVALID_UTF8 = 96;
     DOCUMENT_SIZE_LIMIT_EXCEEDED = 108;
     DEV_MODE_ONLY = 109;
+    AMP_EMAIL_MISSING_STRICT_CSS_ATTR = 120;
     VALUE_SET_MISMATCH = 110;
 
     CSS_SYNTAX_INVALID_AT_RULE = 29;
@@ -921,6 +976,7 @@ message ValidationError {
     CSS_SYNTAX_DISALLOWED_PSEUDO_CLASS = 115;
     CSS_SYNTAX_DISALLOWED_PSEUDO_ELEMENT = 116;
     CSS_SYNTAX_DISALLOWED_PROPERTY_VALUE = 71;
+    CSS_SYNTAX_DISALLOWED_IMPORTANT = 117;
     CSS_EXCESSIVELY_NESTED = 107;
 
     // The following codes are currently used only by A4A CSS validation.
@@ -1001,6 +1057,8 @@ message ValidationResult {
   }
   optional Status status = 2;
   repeated ValidationError errors = 1;
+  // The following field is deprecated and can return any value. Do not depend
+  // on this.
   optional int32 validator_revision = 3 [default = -1];
   optional int32 spec_file_revision = 4 [default = -1];
   // If the AMP document is a transformed AMP document, then this is the
@@ -1024,15 +1082,3 @@ message ValidationResult {
   // requirements.
   repeated ValueSetRequirement value_set_requirements = 8;
 }
-
-// Information about the validator returned by ValidatorFactory
-// (see validator.h).
-// NEXT AVAILABLE TAG: 4
-message ValidatorInfo {
-  // Path from which the spec file was loaded.
-  optional string rules_path = 1;
-  // The file revision of validator.cc.
-  optional int32 validator_revision = 2 [default = -1];
-  // The file revision of the spec file (validator.protoascii).
-  optional int32 spec_file_revision = 3 [default = -1];
-}
diff --git a/validator/validator_gen.py b/validator/validator_gen.py
deleted file mode 100644
index 39d97cfeb79ef..0000000000000
--- a/validator/validator_gen.py
+++ /dev/null
@@ -1,290 +0,0 @@
-#
-# Copyright 2015 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.
-#
-
-"""Generates validator-generated.js.
-
-This script reads validator.protoascii and reflects over its contents
-to generate Javascript. This Javascript consists of Closure-style
-classes and enums, as well as a createRules function which
-instantiates the data structures specified in validator.protoascii -
-the validator rules.
-
-From a Javascript perspective, this approach looks elaborate - you may
-wonder why we're not just writing Javascript directly, or why we're
-not encoding our rules in JSON or YAML or even, gasp, XML? Besides the
-additional type safety that we gain from our approach, it allows us to
-share the rule specifications, error codes, etc. between multiple
-validator implemenations, including an implementation in C++. This
-makes it much easier to keep otherwise likely divergent behavior in
-sync.
-"""
-
-import os
-
-
-def UnderscoreToCamelCase(under_score):
-  """Helper function which converts under_score names to camelCase.
-
-  In proto buffers, fields have under_scores. In Javascript, fields
-  have camelCase.
-  Args:
-    under_score: A name, segmented by under_scores.
-  Returns:
-    A name, segmented as camelCase.
-  """
-  segments = under_score.split('_')
-  return '%s%s' % (segments[0], ''.join([s.title() for s in segments[1:]]))
-
-
-def FindDescriptors(validator_pb2, msg_desc_by_name, enum_desc_by_name):
-  """Finds the message and enum descriptors in the file.
-
-  This method finds the message and enum descriptors from a file descriptor;
-  it will visit the top-level messages, and within those the enums.
-
-  Args:
-    validator_pb2: The proto2 Python module generated from validator.proto.
-    msg_desc_by_name: A map of message descriptors, keyed by full_name.
-    enum_desc_by_name: A map of enum descriptors, keyed by full name.
-  """
-  for msg_type in list(validator_pb2.DESCRIPTOR.message_types_by_name.values()):
-    msg_desc_by_name[msg_type.full_name] = msg_type
-    for enum_type in msg_type.enum_types:
-      enum_desc_by_name[enum_type.full_name] = enum_type
-
-
-def FieldTypeFor(descriptor, field_desc):
-  """Returns the Javascript type for a given field descriptor.
-
-  Args:
-    descriptor: The descriptor module from the protobuf package, e.g.
-        google.protobuf.descriptor.
-    field_desc: A field descriptor for a particular field in a message.
-  Returns:
-    The Javascript type for the given field descriptor.
-  """
-  element_type = {
-      descriptor.FieldDescriptor.TYPE_DOUBLE: lambda: 'number',
-      descriptor.FieldDescriptor.TYPE_INT32: lambda: 'number',
-      descriptor.FieldDescriptor.TYPE_BOOL: lambda: 'boolean',
-      descriptor.FieldDescriptor.TYPE_STRING: lambda: 'string',
-      descriptor.FieldDescriptor.TYPE_ENUM: (
-          lambda: field_desc.enum_type.full_name),
-      descriptor.FieldDescriptor.TYPE_MESSAGE: (
-          lambda: field_desc.message_type.full_name),
-      }[field_desc.type]()
-  if field_desc.label == descriptor.FieldDescriptor.LABEL_REPEATED:
-    return '!Array<!%s>' % element_type
-  else:
-    return element_type
-
-
-def NonRepeatedValueToString(descriptor, field_desc, value):
-  """For a non-repeated field, renders the value as a Javascript literal.
-
-  Helper function for ValueToString.
-
-  Args:
-    descriptor: The descriptor module from the protobuf package, e.g.
-        google.protobuf.descriptor.
-    field_desc: The type descriptor for the field value to be rendered.
-    value: The value of the non-repeated field to be rendered.
-  Returns:
-    A Javascript literal for the provided non-repeated value.
-  """
-  if field_desc.type == descriptor.FieldDescriptor.TYPE_STRING:
-    escaped = ('' + value).encode('unicode-escape')
-    return "'%s'" % escaped.decode().replace("'", "\\'")
-  if field_desc.type == descriptor.FieldDescriptor.TYPE_BOOL:
-    if value:
-      return 'true'
-    return 'false'
-  if field_desc.type == descriptor.FieldDescriptor.TYPE_ENUM:
-    enum_value_name = field_desc.enum_type.values_by_number[value].name
-    return '%s.%s' % (field_desc.enum_type.full_name, enum_value_name)
-  if value is None:
-    return 'null'
-  return str(value)
-
-
-def ValueToString(descriptor, field_desc, value):
-  """Renders a field value as a Javascript literal.
-
-  Args:
-    descriptor: The descriptor module from the protobuf package, e.g.
-        google.protobuf.descriptor.
-    field_desc: The type descriptor for the field value to be rendered.
-    value: The value of the field to be rendered.
-  Returns:
-    A Javascript literal for the provided value.
-  """
-  if field_desc.label == descriptor.FieldDescriptor.LABEL_REPEATED:
-    if value:
-      return '[%s]' % ', '.join([NonRepeatedValueToString(descriptor,
-                                                          field_desc, s)
-                                 for s in value])
-    return '[]'
-  return NonRepeatedValueToString(descriptor, field_desc, value)
-
-
-def PrintClassFor(descriptor, msg_desc, out):
-  """Prints a Javascript class for the given proto message.
-
-  This method emits a Javascript class (Closure-style) for the given
-  proto message to sys.stdout.
-
-  Args:
-    descriptor: The descriptor module from the protobuf package, e.g.
-        google.protobuf.descriptor.
-    msg_desc: The descriptor for a particular message type.
-    out: a list of lines to output (without the newline characters), to
-        which this function will append.
-  """
-  # TODO(johannes): Should we provide access to the default values?
-  # Those are given in field.default_value for each field.
-  out.append('/**')
-  out.append(' * @constructor')
-  if (msg_desc.name == 'ValidationResult' or
-      msg_desc.name == 'ValidationError'):
-    out.append(' * @export')
-  out.append(' */')
-  out.append('%s = function() {' % msg_desc.full_name)
-  for field in msg_desc.fields:
-    if field.label == descriptor.FieldDescriptor.LABEL_REPEATED:
-      out.append('  /** @export {%s} */' % FieldTypeFor(descriptor, field))
-      out.append('  this.%s = [];'  % UnderscoreToCamelCase(field.name))
-    else:
-      out.append('  /** @export {?%s} */' % FieldTypeFor(descriptor, field))
-      out.append('  this.%s = null;' % UnderscoreToCamelCase(field.name))
-  out.append('};')
-  out.append('')
-
-
-def PrintEnumFor(enum_desc, out):
-  """Prints a Javascript enum for the given enum descriptor.
-
-  Args:
-    enum_desc: The descriptor for a particular enum type.
-    out: a list of lines to output (without the newline characters), to
-        which this function will append.
-  """
-  out.append('/**')
-  out.append(' * @enum {string}')
-  out.append(' */')
-  out.append('%s = {' % enum_desc.full_name)
-  out.append(',\n'.join(["  %s: '%s'" % (v.name, v.name)
-                         for v in enum_desc.values]))
-  out.append('};')
-  out.append('')
-
-
-def PrintObject(descriptor, msg, this_id, out):
-  """Prints an object, by recursively constructing it.
-
-  This routine emits Javascript which will construct an object modeling
-  the provided message (in practice the ValidatorRules message).
-  It references the classes and enums enitted by PrintClassFor and PrintEnumFor.
-
-  Args:
-    descriptor: The descriptor module from the protobuf package, e.g.
-        google.protobuf.descriptor.
-    msg: A protocol message instance.
-    this_id: The id for the object being printed (all variables have the form
-        o_${num} with ${num} being increasing integers
-    out: a list of lines to output (without the newline characters), to
-        which this function will append.
-  Returns:
-    The next object id, that is, next variable available for creating objects.
-  """
-  out.append('  var o_%d = new %s();' % (this_id, msg.DESCRIPTOR.full_name))
-  next_id = this_id + 1
-  for (field_desc, field_val) in msg.ListFields():
-    if field_desc.type == descriptor.FieldDescriptor.TYPE_MESSAGE:
-      if field_desc.label == descriptor.FieldDescriptor.LABEL_REPEATED:
-        for val in field_val:
-          field_id = next_id
-          next_id = PrintObject(descriptor, val, field_id, out)
-          out.append('  o_%d.%s.push(o_%d);' % (
-              this_id, UnderscoreToCamelCase(field_desc.name), field_id))
-      else:
-        field_id = next_id
-        next_id = PrintObject(descriptor, field_val, field_id, out)
-        out.append('  o_%d.%s = o_%d;' % (
-            this_id, UnderscoreToCamelCase(field_desc.name), field_id))
-    else:
-      out.append('  o_%d.%s = %s;' % (
-          this_id, UnderscoreToCamelCase(field_desc.name),
-          ValueToString(descriptor, field_desc, field_val)))
-  return next_id
-
-
-def GenerateValidatorGeneratedJs(specfile, validator_pb2, text_format,
-                                 descriptor, out):
-  """Main method for the code generator.
-
-  This method reads the specfile and emits Javascript to sys.stdout.
-
-  Args:
-    specfile: Path to validator.protoascii, the specfile to generate
-        Javascript from.
-    validator_pb2: The proto2 Python module generated from validator.proto.
-    text_format: The text_format module from the protobuf package, e.g.
-        google.protobuf.text_format.
-    descriptor: The descriptor module from the protobuf package, e.g.
-        google.protobuf.descriptor.
-    out: a list of lines to output (without the newline characters), to
-        which this function will append.
-  """
-  # First, find the descriptors and enums and generate Javascript
-  # classes and enums.
-  msg_desc_by_name = {}
-  enum_desc_by_name = {}
-  FindDescriptors(validator_pb2, msg_desc_by_name, enum_desc_by_name)
-
-  rules_obj = '%s.RULES' % validator_pb2.DESCRIPTOR.package
-  all_names = [rules_obj] + list(msg_desc_by_name.keys()) + list(enum_desc_by_name.keys())
-  all_names.sort()
-
-  out.append('//')
-  out.append('// Generated by %s - do not edit.'  % os.path.basename(__file__))
-  out.append('//')
-  out.append('')
-  for name in all_names:
-    out.append("goog.provide('%s');" % name)
-  out.append('')
-
-  for name in all_names:
-    if name in msg_desc_by_name:
-      PrintClassFor(descriptor, msg_desc_by_name[name], out)
-    elif name in enum_desc_by_name:
-      PrintEnumFor(enum_desc_by_name[name], out)
-
-  # Read the rules file, validator.protoascii by parsing it as a text
-  # message of type ValidatorRules.
-  rules = validator_pb2.ValidatorRules()
-  text_format.Merge(open(specfile).read(), rules)
-  out.append('/**')
-  out.append(' * @return {!%s}' % rules.DESCRIPTOR.full_name)
-  out.append(' */')
-  out.append('function createRules() {')
-  PrintObject(descriptor, rules, 0, out)
-  out.append('  return o_0;')
-  out.append('}')
-  out.append('')
-  out.append('/**')
-  out.append(' * @type {!%s}' % rules.DESCRIPTOR.full_name)
-  out.append(' */')
-  out.append('%s = createRules();' % rules_obj)
diff --git a/validator/validator_gen_js.py b/validator/validator_gen_js.py
index 41274a126404f..7e12b30febe1e 100644
--- a/validator/validator_gen_js.py
+++ b/validator/validator_gen_js.py
@@ -31,10 +31,16 @@
 sync.
 """
 
+import copy
 import hashlib
 import json
 import os
 
+# If true, then script versions for module and nomdule are allowed
+# in AMP documents. This gating should be temporary and removed
+# after necessary transformers are in place. See b/173803451.
+ALLOW_MODULE_NOMODULE = True
+
 
 def UnderscoreToCamelCase(under_score):
   """Helper function which converts under_score names to camelCase.
@@ -366,8 +372,7 @@ def ValueToString(descriptor, field_desc, value):
 ATTR_LIST_NAME_REFERENCE_FIELD = ['amp.validator.TagSpec.attr_lists']
 
 # These fields contain messages in the .protoascii, but we replace
-# them with message ids, which are numbers. Thus far we do this for
-# the AttrSpecs.
+# them with message ids, which are numbers.
 SYNTHETIC_REFERENCE_FIELD = [
     'amp.validator.AttrList.attrs',
     'amp.validator.AttrSpec.disallowed_value_regex',
@@ -377,6 +382,7 @@ def ValueToString(descriptor, field_desc, value):
     'amp.validator.AttrSpec.value_regex_casei',
     'amp.validator.AttrTriggerSpec.if_value_regex',
     'amp.validator.CdataSpec.cdata_regex',
+    'amp.validator.CssDeclaration.value_regex_casei',
     'amp.validator.TagSpec.attrs',
     'amp.validator.TagSpec.mandatory_alternatives',
     'amp.validator.TagSpec.requires',
@@ -450,8 +456,6 @@ def PrintClassFor(descriptor, msg_desc, out):
     out.Line('/** @type {?number} */')
     out.Line('this.combinedDenyListedCdataRegex = null;')
   if msg_desc.full_name == 'amp.validator.ValidatorRules':
-    out.Line('/** @type {!Array<!string>} */')
-    out.Line('this.dispatchKeyByTagSpecId = Array(tags.length);')
     out.Line('/** @type {!Array<!string>} */')
     out.Line('this.internedStrings = [];')
     out.Line('/** @type {!Array<!AttrSpec>} */')
@@ -675,38 +679,6 @@ def PrintObject(descriptor, msg, registry, out):
               registry.InternString(combined_disallowed_cdata_regex)))
 
 
-def DispatchKeyForTagSpecOrNone(tag_spec):
-  """For a provided tag_spec, generates its dispatch key.
-
-  If the value (or value_casei) is used, uses the first value from the
-  protoascii.
-
-  Args:
-    tag_spec: an instance of type validator_pb2.TagSpec.
-
-  Returns:
-    a string indicating the dispatch key, or None.
-  """
-  for attr in tag_spec.attrs:
-    if attr.dispatch_key != attr.NONE_DISPATCH:
-      mandatory_parent = tag_spec.mandatory_parent or ''
-      attr_name = attr.name
-      if attr.dispatch_key == attr.NAME_DISPATCH:
-        return '%s' % attr_name
-      attr_value = None
-      if attr.value_casei:
-        attr_value = attr.value_casei[0]
-      elif attr.value:
-        attr_value = attr.value[0].lower()
-      assert attr_value is not None
-
-      if attr.dispatch_key == attr.NAME_VALUE_DISPATCH:
-        return '%s\\0%s' % (attr_name, attr_value)
-      if attr.dispatch_key == attr.NAME_VALUE_PARENT_DISPATCH:
-        return '%s\\0%s\\0%s' % (attr_name, attr_value, mandatory_parent)
-  return None
-
-
 # When importing the protocol buffer javascript module, we do so as
 # protoGenerated.foo();
 def ImportModuleName(module_name):
@@ -808,6 +780,68 @@ def GenerateValidatorGeneratedJs(specfile, validator_pb2, generate_proto_only,
       del rules.tags[:]
       rules.tags.extend(filtered_rules)
 
+    # TODO(b/173803451): allow module/nomodule tagspecs.
+    # Add module/nomodule tagspecs for AMP ExtensionSpec tagspecs.
+    if ALLOW_MODULE_NOMODULE:
+      additional_tagspecs = []
+      for t in rules.tags:
+        if t.extension_spec and t.extension_spec.name:
+          if validator_pb2.HtmlFormat.Code.Value('AMP') in t.html_format:
+            tagspec = copy.deepcopy(t)
+            # Reset html_format to AMP
+            del tagspec.html_format[:]
+            tagspec.html_format.extend(
+                [validator_pb2.HtmlFormat.Code.Value('AMP')])
+            # Reset enabled_by to transformed
+            del tagspec.enabled_by[:]
+            tagspec.enabled_by.extend(['transformed'])
+
+            # Generate needed attr specs
+            crossorigin_attrspec = validator_pb2.AttrSpec()
+            crossorigin_attrspec.name = 'crossorigin'
+            crossorigin_attrspec.value.extend(['anonymous'])
+            crossorigin_attrspec.mandatory = True
+            nomodule_attrspec = validator_pb2.AttrSpec()
+            nomodule_attrspec.name = 'nomodule'
+            nomodule_attrspec.value.extend([''])
+            nomodule_attrspec.mandatory = True
+            type_attrspec = validator_pb2.AttrSpec()
+            type_attrspec.name = 'type'
+            type_attrspec.value.extend(['module'])
+            type_attrspec.mandatory = True
+            type_attrspec.dispatch_key = type_attrspec.NAME_VALUE_DISPATCH
+
+            # Create module and nomodule extension tagspecs with spec_names
+            module_tagspec = copy.deepcopy(tagspec)
+            base_spec_name = module_tagspec.extension_spec.name
+            if module_tagspec.extension_spec.version_name:
+              base_spec_name = (
+                  module_tagspec.extension_spec.name + ' ' +
+                  module_tagspec.extension_spec.version_name)
+            module_tagspec.spec_name = base_spec_name + (' module extension '
+                                                         'script')
+            nomodule_tagspec = copy.deepcopy(tagspec)
+            nomodule_tagspec.spec_name = base_spec_name + (' nomodule extension'
+                                                           ' script')
+
+            # Module extension specifics
+            # Add requires/satisfies pair for module/nomodule
+            module_tagspec.requires.extend([nomodule_tagspec.spec_name])
+            module_tagspec.satisfies.extend([module_tagspec.spec_name])
+            # Add attr specs
+            module_tagspec.attrs.extend([crossorigin_attrspec, type_attrspec])
+
+            # Nomodule extension specifics
+            # Add requires/satisfies pair for module/nomodule
+            nomodule_tagspec.requires.extend([module_tagspec.spec_name])
+            nomodule_tagspec.satisfies.extend([nomodule_tagspec.spec_name])
+            # Add attr specs
+            nomodule_tagspec.attrs.extend([nomodule_attrspec])
+
+            # Add tag specs
+            additional_tagspecs.extend([module_tagspec, nomodule_tagspec])
+      rules.tags.extend(additional_tagspecs)
+
     registry = MessageRegistry()
 
     # Register the tagspecs so they have ids 0 - rules.tags.length. This means
@@ -833,15 +867,6 @@ def GenerateValidatorGeneratedJs(specfile, validator_pb2, generate_proto_only,
     # We use this below to reference the variable holding the rules instance.
     rules_reference = registry.MessageReferenceForKey(MessageKey(rules))
 
-    # Add the dispatchKeyByTagSpecId array, for those tag specs that have
-    # a dispatch key.
-    for tag_spec in rules.tags:
-      tag_spec_id = registry.MessageIdForTagSpecName(TagSpecName(tag_spec))
-      dispatch_key = DispatchKeyForTagSpecOrNone(tag_spec)
-      if dispatch_key:
-        out.Line('%s.dispatchKeyByTagSpecId[%d]="%s";' %
-                 (rules_reference, tag_spec_id, dispatch_key))
-
     # Create a mapping from attr spec ids to AttrSpec instances, deduping the
     # AttrSpecs. Then sort by these ids, so now we get a dense array starting
     # with the attr that has attr spec id 0 - number of attr specs.
diff --git a/validator/webui/README.md b/validator/webui/README.md
deleted file mode 100644
index b1cefd5b1341f..0000000000000
--- a/validator/webui/README.md
+++ /dev/null
@@ -1,60 +0,0 @@
-<!---
-Copyright 2015 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.
--->
-
-# Validator Web UI
-
-If you'd like to use the web UI, simply visit [validator.amp.dev](https://validator.amp.dev/).
-
-## Running your own Web UI
-
-In this directory, run
-
-```sh
-$ npm install
-$ go build serve-standalone.go
-$ ./serve-standalone
-```
-
-Then visit your own instance at `http://127.0.0.1:8765/`.
-
-If you'd like to run exactly the code that is running at
-[validator.amp.dev](https://validator.amp.dev/), that's an
-Appengine app - please refer to the instructions in serve.go.
-
-## Passing in documents from URL
-
-This tool will also accept a document passed in via the URL as part of the URL hash. It expects the format `#doc=<ENCODED_DOCUMENT>`. This allows users to construct an link that will auto-populate the tool with the incoming document.
-
-To use this feature you must first base64 encode the HTML string. Due to unicode problems with the native `btoa()` function, this tool expects the string to be encoded using the following [solution from mdn](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa#Unicode_strings):
-
-```js
-// ucs-2 string to base64 encoded ascii
-function utoa(str) {
-  return window.btoa(unescape(encodeURIComponent(str)));
-}
-```
-
-By default this tool will assume you want to validate an `AMPHTML` document. If you would like to validate another format you can chose one of the following:
-
-```http
-#htmlFormat=AMP4ADS
-#htmlFormat=AMP4EMAIL
-#htmlFormat=ACTIONS
-```
-
-If you wish to use both the `doc=` and `htmlFormat=` together make sure to include an `&` between the key-value pairs.
-
-Putting it all together allows you to create links like [this example.](https://validator.amp.dev/#htmlFormat=AMP4ADS&doc=PCFkb2N0eXBlIGh0bWw%2BCjxodG1sIOKaoTRhZHM%2BCjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLG1pbmltdW0tc2NhbGU9MSI%2BCiAgPHN0eWxlIGFtcDRhZHMtYm9pbGVycGxhdGU%2BYm9keXt2aXNpYmlsaXR5OmhpZGRlbn08L3N0eWxlPgogIDxzY3JpcHQgYXN5bmMgc3JjPSJodHRwczovL2Nkbi5hbXBwcm9qZWN0Lm9yZy9hbXA0YWRzLXYwLmpzIj48L3NjcmlwdD4KPC9oZWFkPgo8Ym9keT4KCTxhbXAtaW1nIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBzcmM9Imh0dHA6Ly9wbGFjZWtpdHRlbi5jb20vNTAwLzUwMCI%2BPC9hbXAtaW1nPgogIAk8aDE%2BQ2F0cyBhcmUgY29vbC48L2gxPgo8L2JvZHk%2BCjwvaHRtbD4)
diff --git a/validator/webui/amp_favicon.png b/validator/webui/amp_favicon.png
deleted file mode 100644
index a43306c3a6cf6..0000000000000
Binary files a/validator/webui/amp_favicon.png and /dev/null differ
diff --git a/validator/webui/app.yaml b/validator/webui/app.yaml
deleted file mode 100644
index 27da7d12c446b..0000000000000
--- a/validator/webui/app.yaml
+++ /dev/null
@@ -1,25 +0,0 @@
-runtime: googlelegacy
-api_version: go1
-
-handlers:
-- url: /fetch
-  script: _go_app
-  secure: always
-
-- url: /$
-  static_files: index.html
-  upload: index.html
-  secure: always
-
-- url: /amp_favicon.png$
-  static_files: amp_favicon.png
-  upload: amp_favicon\.png$
-  secure: always
-
-- url: /logo-blue.svg$
-  static_files: logo-blue.svg
-  upload: logo-blue\.svg$
-  secure: always
-
-skip_files:
-  serve-standalone.go
diff --git a/validator/webui/index.html b/validator/webui/index.html
deleted file mode 100644
index d5194dc47e8dc..0000000000000
--- a/validator/webui/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!--
-  Copyright 2016 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.
--->
-<!doctype html>
-<head>
-  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-  <title>The AMP Validator</title>
-  <meta charset="utf-8">
-  <link rel="shortcut icon" href="/amp_favicon.png">
-  <script src="webcomponents.js/webcomponents.min.js"></script>
-  <link rel="import" href="@polymer/paper-styles/demo-pages.html">
-  <link rel="import" href="@polymer/webui-mainpage/webui-mainpage.html">
-  <link rel="import" href="@polymer/polymer/polymer.html">
-  <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/nmoffdblmcmgeicmolmhobpoocbbmknc">
-  <script src="webui.js"></script>
-  <script src="https://cdn.ampproject.org/v0/validator.js"></script>
-  <style is="custom-style">
-    .ampproject-message { background-color: #FFF9C4; }
-    html, body {
-      height: 100%;
-      margin: 0px;
-      padding: 0px 5px !important;
-    }
-  </style>
-  <style scope="iron-icon">
-    .ampproject-warning { color: #FF9800; }
-    .ampproject-error { color: #F44336; }
-  </style>
-  <meta name="description"
-        content="AMP HTML Project Web Validator. Tests Accelerated Mobile Pages for valid markup.">
-</head>
-<body unresolved>
-  <webui-mainpage></webui-mainpage>
-<script>
-if (location.href.match(/^https:\/\/validator.amp.dev\/.*/)) {
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-  ga('create', 'UA-79737099-1', 'none');
-  ga('send', 'pageview');
-}
-</script>
-</body>
-</html>
diff --git a/validator/webui/logo-blue.svg b/validator/webui/logo-blue.svg
deleted file mode 100644
index e09a51fa8750c..0000000000000
--- a/validator/webui/logo-blue.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="175px" height="60px" viewBox="0 0 175 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>AMP-Brand-Blue</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="amp-logo-internal-site" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="AMP-Brand-Blue" fill="#0379C4">
-            <g id="Updated">
-                <path d="M92.9377885,34.2654167 L100.009303,34.2654167 L97.6282933,27.2504167 C97.4751683,26.8054167 97.2942788,26.2804167 97.0873077,25.67625 C96.8794952,25.0729167 96.6742067,24.4195833 96.473125,23.71625 C96.2846635,24.43125 96.0886298,25.09375 95.8875481,25.70375 C95.685625,26.3129167 95.4963221,26.8404167 95.3187981,27.2854167 L92.9377885,34.2654167 Z M109.569519,44.05875 L104.91351,44.05875 C104.391875,44.05875 103.962788,43.9379167 103.625409,43.6979167 C103.288029,43.4579167 103.053293,43.1504167 102.923726,42.7754167 L101.395841,38.3095833 L91.5520913,38.3095833 L90.0233654,42.7754167 C89.9055769,43.1029167 89.6742067,43.3995833 89.3309375,43.6629167 C88.9876683,43.9270833 88.5669952,44.05875 88.0689183,44.05875 L83.3784135,44.05875 L93.3996875,18.4420833 L99.5474038,18.4420833 L109.569519,44.05875 Z" id="Fill-1"></path>
-                <path d="M130.561779,33.7364167 C130.78137,34.21725 130.990865,34.7105833 131.192788,35.21475 C131.39387,34.6980833 131.606731,34.19725 131.832212,33.7105833 C132.056851,33.2230833 132.288221,32.7505833 132.525481,32.2939167 L139.170433,19.33975 C139.289062,19.1164167 139.411058,18.9430833 139.534736,18.8205833 C139.659255,18.69725 139.798918,18.6064167 139.952043,18.54725 C140.10601,18.4880833 140.28101,18.4589167 140.476202,18.4589167 L141.161058,18.4589167 L145.744712,18.4589167 L145.744712,44.0589167 L140.45012,44.0589167 L140.45012,29.32475 C140.45012,28.6105833 140.485457,27.8364167 140.55613,27.0039167 L133.698317,40.1730833 C133.484615,40.5839167 133.197716,40.8939167 132.835937,41.10475 C132.474159,41.3164167 132.06274,41.4214167 131.600841,41.4214167 L130.783894,41.4214167 C130.321995,41.4214167 129.910577,41.3164167 129.548798,41.10475 C129.187019,40.8939167 128.90012,40.5839167 128.686418,40.1730833 L121.793269,26.9864167 C121.840385,27.39725 121.875721,27.8039167 121.899279,28.2080833 C121.922837,28.6130833 121.935457,28.9855833 121.935457,29.32475 L121.935457,44.0589167 L116.640024,44.0589167 L116.640024,18.4589167 L121.224519,18.4589167 L121.908534,18.4589167 C122.103726,18.4589167 122.278726,18.4880833 122.432692,18.54725 C122.586659,18.6064167 122.726322,18.69725 122.85,18.8205833 C122.974519,18.9430833 123.095673,19.1164167 123.215144,19.33975 L129.877764,32.3455833 C130.115024,32.79225 130.342187,33.2555833 130.561779,33.7364167" id="Fill-3"></path>
-                <path d="M160.989904,31.0125833 L164.117187,31.0125833 C165.680409,31.0125833 166.805288,30.64425 167.492668,29.9050833 C168.180048,29.16675 168.523317,28.1350833 168.523317,26.8109167 C168.523317,26.2250833 168.434976,25.6909167 168.257452,25.2109167 C168.079087,24.7300833 167.809014,24.31675 167.448918,23.9709167 C167.087139,23.6259167 166.63113,23.3584167 166.080048,23.1709167 C165.529808,22.9834167 164.874399,22.8900833 164.117187,22.8900833 L160.989904,22.8900833 L160.989904,31.0125833 Z M160.989904,35.4959167 L160.989904,44.0584167 L154.983534,44.0584167 L154.983534,18.44175 L164.117187,18.44175 C165.941226,18.44175 167.507812,18.6559167 168.816947,19.0834167 C170.12524,19.5109167 171.203846,20.1000833 172.05024,20.8509167 C172.896635,21.6009167 173.522596,22.4859167 173.92476,23.5050833 C174.327764,24.5250833 174.528846,25.62675 174.528846,26.8109167 C174.528846,28.0884167 174.321875,29.2600833 173.907933,30.3275833 C173.492308,31.3934167 172.858774,32.3084167 172.00649,33.0700833 C171.153365,33.83175 170.072236,34.42675 168.763101,34.85425 C167.454808,35.2825833 165.905889,35.4959167 164.117187,35.4959167 L160.989904,35.4959167 Z" id="Fill-5"></path>
-                <path d="M40.6737019,27.2526667 L27.9676923,48.196 L25.6657692,48.196 L27.9416106,34.5493333 L20.8936538,34.5593333 C20.8936538,34.5593333 20.8271875,34.561 20.7952163,34.561 C20.1608413,34.561 19.6459375,34.051 19.6459375,33.4226667 C19.6459375,33.1526667 19.900024,32.696 19.900024,32.696 L32.5639663,11.7768333 L34.9045913,11.786 L32.5715385,25.4543333 L39.6556731,25.446 C39.6556731,25.446 39.7322356,25.4443333 39.7684135,25.4443333 C40.4027885,25.4443333 40.916851,25.9535 40.916851,26.5826667 C40.916851,26.8376667 40.8167308,27.0618333 40.6728606,27.2518333 L40.6737019,27.2526667 Z M30.288125,0.000166666667 C13.5604808,0.000166666667 -0.000336538462,13.4318333 -0.000336538462,30.0001667 C-0.000336538462,46.5685 13.5604808,60.0001667 30.288125,60.0001667 C47.0166106,60.0001667 60.5765865,46.5685 60.5765865,30.0001667 C60.5765865,13.4318333 47.0166106,0.000166666667 30.288125,0.000166666667 L30.288125,0.000166666667 Z" id="Fill-7"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/validator/webui/package.json b/validator/webui/package.json
deleted file mode 100644
index f1a69705df159..0000000000000
--- a/validator/webui/package.json
+++ /dev/null
@@ -1,52 +0,0 @@
-{
-  "name": "amp-validator-webui",
-  "version": "0.1.0",
-  "description": "Web UI for Validator for AMP HTML (www.ampproject.org)",
-  "author": "The AMP HTML Authors",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ampproject/amphtml.git"
-  },
-  "scripts": {
-    "preinstall": "node ../../build-system/common/check-package-manager.js"
-  },
-  "dependencies": {
-    "@polymer/font-roboto": "0.0.3",
-    "@polymer/iron-a11y-announcer": "0.0.3",
-    "@polymer/iron-a11y-keys-behavior": "0.0.3",
-    "@polymer/iron-behaviors": "0.0.3",
-    "@polymer/iron-dropdown": "0.0.3",
-    "@polymer/iron-fit-behavior": "0.0.3",
-    "@polymer/iron-flex-layout": "0.0.3",
-    "@polymer/iron-form-element-behavior": "0.0.3",
-    "@polymer/iron-icon": "0.0.3",
-    "@polymer/iron-icons": "0.0.3",
-    "@polymer/iron-iconset-svg": "0.0.3",
-    "@polymer/iron-input": "0.0.3",
-    "@polymer/iron-menu-behavior": "0.0.3",
-    "@polymer/iron-meta": "0.0.3",
-    "@polymer/iron-overlay-behavior": "0.0.3",
-    "@polymer/iron-resizable-behavior": "0.0.3",
-    "@polymer/iron-selector": "0.0.3",
-    "@polymer/iron-validatable-behavior": "0.0.3",
-    "@polymer/neon-animation": "0.0.3",
-    "@polymer/paper-behaviors": "0.0.3",
-    "@polymer/paper-button": "0.0.3",
-    "@polymer/paper-dropdown-menu": "0.0.3",
-    "@polymer/paper-input": "0.0.3",
-    "@polymer/paper-item": "0.0.3",
-    "@polymer/paper-listbox": "0.0.3",
-    "@polymer/paper-material": "0.0.3",
-    "@polymer/paper-menu-button": "0.0.3",
-    "@polymer/paper-ripple": "0.0.3",
-    "@polymer/paper-styles": "0.0.3",
-    "@polymer/paper-toast": "0.0.3",
-    "@polymer/paper-toolbar": "0.0.3",
-    "@polymer/polymer": "1.2.5-npm-test.2",
-    "codemirror": "5.15.2",
-    "vulcanize": "1.14.8",
-    "webcomponents.js": "^0.7.22",
-    "web-animations-js": "2.2.2"
-  }
-}
diff --git a/validator/webui/yarn.lock b/validator/webui/yarn.lock
deleted file mode 100644
index 5eef28cbca483..0000000000000
--- a/validator/webui/yarn.lock
+++ /dev/null
@@ -1,1073 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@polymer/font-roboto@0.0.3", "@polymer/font-roboto@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/font-roboto/-/font-roboto-0.0.3.tgz#9d58edb660bbed2d4bd29d3bf9b21c20bddd6187"
-  integrity sha1-nVjttmC77S1L0p07+bIcIL3dYYc=
-
-"@polymer/iron-a11y-announcer@0.0.3", "@polymer/iron-a11y-announcer@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-a11y-announcer/-/iron-a11y-announcer-0.0.3.tgz#12623db4c809eb7d004eee6458ef07e7b5500e71"
-  integrity sha1-EmI9tMgJ630ATu5kWO8H57VQDnE=
-  dependencies:
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-a11y-keys-behavior@0.0.3", "@polymer/iron-a11y-keys-behavior@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-a11y-keys-behavior/-/iron-a11y-keys-behavior-0.0.3.tgz#82a9c535d01ae94cb33d9c071a9a543ebc2044c0"
-  integrity sha1-gqnFNdAa6UyzPZwHGppUPrwgRMA=
-  dependencies:
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-autogrow-textarea@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-autogrow-textarea/-/iron-autogrow-textarea-0.0.3.tgz#f1ea1444309f31634fe45ccfcfe376b83ecfd28a"
-  integrity sha1-8eoURDCfMWNP5FzPz+N2uD7P0oo=
-  dependencies:
-    "@polymer/iron-behaviors" "^0.0.3"
-    "@polymer/iron-flex-layout" "^0.0.3"
-    "@polymer/iron-form-element-behavior" "^0.0.3"
-    "@polymer/iron-validatable-behavior" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-behaviors@0.0.3", "@polymer/iron-behaviors@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-behaviors/-/iron-behaviors-0.0.3.tgz#027484885ddb924f99fa8083dfba810e39d2671b"
-  integrity sha1-AnSEiF3bkk+Z+oCD37qBDjnSZxs=
-  dependencies:
-    "@polymer/iron-a11y-keys-behavior" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-checked-element-behavior@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-checked-element-behavior/-/iron-checked-element-behavior-0.0.3.tgz#1e78b6a76751495350d51d9caaaf6c0f7f74bd7a"
-  integrity sha1-Hni2p2dRSVNQ1R2cqq9sD390vXo=
-  dependencies:
-    "@polymer/iron-form-element-behavior" "^0.0.3"
-    "@polymer/iron-validatable-behavior" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-collapse@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-collapse/-/iron-collapse-0.0.3.tgz#7e01a4ac79ce201e7d62bc2e34d4c36f08812fc2"
-  integrity sha1-fgGkrHnOIB59YrwuNNTDbwiBL8I=
-  dependencies:
-    "@polymer/iron-resizable-behavior" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-dropdown@0.0.3", "@polymer/iron-dropdown@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-dropdown/-/iron-dropdown-0.0.3.tgz#ade1c67b8cb93465b6235f32b1755fec1b8147b2"
-  integrity sha1-reHGe4y5NGW2I18ysXVf7BuBR7I=
-  dependencies:
-    "@polymer/iron-a11y-keys-behavior" "^0.0.3"
-    "@polymer/iron-behaviors" "^0.0.3"
-    "@polymer/iron-overlay-behavior" "^0.0.3"
-    "@polymer/iron-resizable-behavior" "^0.0.3"
-    "@polymer/neon-animation" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-fit-behavior@0.0.3", "@polymer/iron-fit-behavior@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-fit-behavior/-/iron-fit-behavior-0.0.3.tgz#2d80399e4fabf4b75e081c5f81224ef9bfa98d4c"
-  integrity sha1-LYA5nk+r9LdeCBxfgSJO+b+pjUw=
-  dependencies:
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-flex-layout@0.0.3", "@polymer/iron-flex-layout@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-flex-layout/-/iron-flex-layout-0.0.3.tgz#b7d7a732b1cbadfe6aa9500ca06f40d02578baf7"
-  integrity sha1-t9enMrHLrf5qqVAMoG9A0CV4uvc=
-  dependencies:
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-form-element-behavior@0.0.3", "@polymer/iron-form-element-behavior@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-form-element-behavior/-/iron-form-element-behavior-0.0.3.tgz#3564a2a51d8ccfdda4193d943d5fd0c12c463759"
-  integrity sha1-NWSipR2Mz92kGT2UPV/QwSxGN1k=
-  dependencies:
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-icon@0.0.3", "@polymer/iron-icon@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-icon/-/iron-icon-0.0.3.tgz#e1b14afed4ad1106ed867d64ef01fe43f9b4e5e7"
-  integrity sha1-4bFK/tStEQbthn1k7wH+Q/m05ec=
-  dependencies:
-    "@polymer/iron-flex-layout" "^0.0.3"
-    "@polymer/iron-meta" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-icons@0.0.3", "@polymer/iron-icons@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-icons/-/iron-icons-0.0.3.tgz#d672ab979bdcd4ded8027e8de23e8c51d0c7f4c6"
-  integrity sha1-1nKrl5vc1N7YAn6N4j6MUdDH9MY=
-  dependencies:
-    "@polymer/iron-icon" "^0.0.3"
-    "@polymer/iron-iconset-svg" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-iconset-svg@0.0.3", "@polymer/iron-iconset-svg@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-iconset-svg/-/iron-iconset-svg-0.0.3.tgz#cd4cff5233f8061e3e0d34a65180b9a92085860a"
-  integrity sha1-zUz/UjP4Bh4+DTSmUYC5qSCFhgo=
-  dependencies:
-    "@polymer/iron-meta" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-input@0.0.3", "@polymer/iron-input@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-input/-/iron-input-0.0.3.tgz#e41c8587b251aa510a26f28ca92381ab1457df79"
-  integrity sha1-5ByFh7JRqlEKJvKMqSOBqxRX33k=
-  dependencies:
-    "@polymer/iron-validatable-behavior" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-menu-behavior@0.0.3", "@polymer/iron-menu-behavior@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-menu-behavior/-/iron-menu-behavior-0.0.3.tgz#d6491a3b4d1c973cffd8099749dad171f4d73690"
-  integrity sha1-1kkaO00clzz/2AmXSdrRcfTXNpA=
-  dependencies:
-    "@polymer/iron-a11y-keys-behavior" "^0.0.3"
-    "@polymer/iron-selector" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-meta@0.0.3", "@polymer/iron-meta@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-meta/-/iron-meta-0.0.3.tgz#a4cec8479bdaec66ff03749a59136f21fde01d70"
-  integrity sha1-pM7IR5va7Gb/A3SaWRNvIf3gHXA=
-  dependencies:
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-overlay-behavior@0.0.3", "@polymer/iron-overlay-behavior@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-overlay-behavior/-/iron-overlay-behavior-0.0.3.tgz#4c5cbbb91b9240bb6f824040ce97f617f5ee7756"
-  integrity sha1-TFy7uRuSQLtvgkBAzpf2F/Xud1Y=
-  dependencies:
-    "@polymer/iron-fit-behavior" "^0.0.3"
-    "@polymer/iron-resizable-behavior" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-resizable-behavior@0.0.3", "@polymer/iron-resizable-behavior@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-resizable-behavior/-/iron-resizable-behavior-0.0.3.tgz#205470f84070654909a360b533b6599b2d806354"
-  integrity sha1-IFRw+EBwZUkJo2C1M7ZZmy2AY1Q=
-  dependencies:
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-selector@0.0.3", "@polymer/iron-selector@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-selector/-/iron-selector-0.0.3.tgz#cde0bb7b9845ddb3f6dfc93ada147426ccebdfb9"
-  integrity sha1-zeC7e5hF3bP238k62hR0Jszr37k=
-  dependencies:
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/iron-validatable-behavior@0.0.3", "@polymer/iron-validatable-behavior@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-validatable-behavior/-/iron-validatable-behavior-0.0.3.tgz#438747173d2b1d3bc1a08458a55ed31c9b4f192f"
-  integrity sha1-Q4dHFz0rHTvBoIRYpV7THJtPGS8=
-  dependencies:
-    "@polymer/iron-meta" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/neon-animation@0.0.3", "@polymer/neon-animation@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/neon-animation/-/neon-animation-0.0.3.tgz#93e9eebcdf023c7b42d9a7d7f41fb1934b500b22"
-  integrity sha1-k+nuvN8CPHtC2afX9B+xk0tQCyI=
-  dependencies:
-    "@polymer/iron-meta" "^0.0.3"
-    "@polymer/iron-resizable-behavior" "^0.0.3"
-    "@polymer/iron-selector" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-    web-animations-js "2.1.3"
-
-"@polymer/paper-behaviors@0.0.3", "@polymer/paper-behaviors@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-behaviors/-/paper-behaviors-0.0.3.tgz#79a39b1dc62c067a179efa70c4f34e1fb8de9a6f"
-  integrity sha1-eaObHcYsBnoXnvpwxPNOH7jemm8=
-  dependencies:
-    "@polymer/iron-behaviors" "^0.0.3"
-    "@polymer/iron-checked-element-behavior" "^0.0.3"
-    "@polymer/paper-ripple" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/paper-button@0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-button/-/paper-button-0.0.3.tgz#5ff68830b86732a8108be0259b4b673f0a8cc156"
-  integrity sha1-X/aIMLhnMqgQi+Alm0tnPwqMwVY=
-  dependencies:
-    "@polymer/iron-flex-layout" "^0.0.3"
-    "@polymer/paper-behaviors" "^0.0.3"
-    "@polymer/paper-material" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/paper-dropdown-menu@0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-dropdown-menu/-/paper-dropdown-menu-0.0.3.tgz#51f3a0c5382f9ee8d459104dbd21eac31681244c"
-  integrity sha1-UfOgxTgvnujUWRBNvSHqwxaBJEw=
-  dependencies:
-    "@polymer/iron-a11y-keys-behavior" "^0.0.3"
-    "@polymer/iron-form-element-behavior" "^0.0.3"
-    "@polymer/iron-icon" "^0.0.3"
-    "@polymer/iron-icons" "^0.0.3"
-    "@polymer/iron-validatable-behavior" "^0.0.3"
-    "@polymer/paper-input" "^0.0.3"
-    "@polymer/paper-menu-button" "^0.0.3"
-    "@polymer/paper-ripple" "^0.0.3"
-    "@polymer/paper-styles" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/paper-input@0.0.3", "@polymer/paper-input@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-input/-/paper-input-0.0.3.tgz#5bb3efa9063dce78586839c4aeb2eb6cf2c618a2"
-  integrity sha1-W7PvqQY9znhYaDnErrLrbPLGGKI=
-  dependencies:
-    "@polymer/iron-a11y-keys-behavior" "^0.0.3"
-    "@polymer/iron-autogrow-textarea" "^0.0.3"
-    "@polymer/iron-behaviors" "^0.0.3"
-    "@polymer/iron-form-element-behavior" "^0.0.3"
-    "@polymer/iron-input" "^0.0.3"
-    "@polymer/paper-styles" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/paper-item@0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-item/-/paper-item-0.0.3.tgz#db20d1f90ae1f6a3a2f5345c1da43457f96a800d"
-  integrity sha1-2yDR+Qrh9qOi9TRcHaQ0V/lqgA0=
-  dependencies:
-    "@polymer/iron-behaviors" "^0.0.3"
-    "@polymer/iron-flex-layout" "^0.0.3"
-    "@polymer/paper-styles" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/paper-listbox@0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-listbox/-/paper-listbox-0.0.3.tgz#145a68f41a8ffebca5a6a8d47640e113e0ffa591"
-  integrity sha1-FFpo9BqP/rylpqjUdkDhE+D/pZE=
-  dependencies:
-    "@polymer/iron-behaviors" "^0.0.3"
-    "@polymer/iron-collapse" "^0.0.3"
-    "@polymer/iron-menu-behavior" "^0.0.3"
-    "@polymer/paper-styles" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/paper-material@0.0.3", "@polymer/paper-material@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-material/-/paper-material-0.0.3.tgz#f15d36e9bda705c2969c70564730a646c02c26c2"
-  integrity sha1-8V026b2nBcKWnHBWRzCmRsAsJsI=
-  dependencies:
-    "@polymer/paper-styles" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/paper-menu-button@0.0.3", "@polymer/paper-menu-button@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-menu-button/-/paper-menu-button-0.0.3.tgz#f41d6c87b7ab983d185f44c4c9733e442262fbcd"
-  integrity sha1-9B1sh7ermD0YX0TEyXM+RCJi+80=
-  dependencies:
-    "@polymer/iron-a11y-keys-behavior" "^0.0.3"
-    "@polymer/iron-behaviors" "^0.0.3"
-    "@polymer/iron-dropdown" "^0.0.3"
-    "@polymer/neon-animation" "^0.0.3"
-    "@polymer/paper-material" "^0.0.3"
-    "@polymer/paper-styles" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/paper-ripple@0.0.3", "@polymer/paper-ripple@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-ripple/-/paper-ripple-0.0.3.tgz#2b722947a852825233967606cd5fcf590eb7d829"
-  integrity sha1-K3IpR6hSglIzlnYGzV/PWQ632Ck=
-  dependencies:
-    "@polymer/iron-a11y-keys-behavior" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/paper-styles@0.0.3", "@polymer/paper-styles@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-styles/-/paper-styles-0.0.3.tgz#b8466a047807d6fc63c24fa71b486c975cc75379"
-  integrity sha1-uEZqBHgH1vxjwk+nG0hsl1zHU3k=
-  dependencies:
-    "@polymer/font-roboto" "^0.0.3"
-    "@polymer/iron-flex-layout" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/paper-toast@0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-toast/-/paper-toast-0.0.3.tgz#88dbcb6f28cd3dce9d4ec86ae7c31a5e46662ef8"
-  integrity sha1-iNvLbyjNPc6dTshq58MaXkZmLvg=
-  dependencies:
-    "@polymer/iron-a11y-announcer" "^0.0.3"
-    "@polymer/iron-overlay-behavior" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/paper-toolbar@0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-toolbar/-/paper-toolbar-0.0.3.tgz#d627fb4b4b3f5726f3f9d132ca1181c2ebf6cfd5"
-  integrity sha1-1if7S0s/Vybz+dEyyhGBwuv2z9U=
-  dependencies:
-    "@polymer/iron-flex-layout" "^0.0.3"
-    "@polymer/paper-styles" "^0.0.3"
-    "@polymer/polymer" "^1.2.5-npm-test.2"
-
-"@polymer/polymer@1.2.5-npm-test.2", "@polymer/polymer@^1.2.5-npm-test.2":
-  version "1.2.5-npm-test.2"
-  resolved "https://registry.yarnpkg.com/@polymer/polymer/-/polymer-1.2.5-npm-test.2.tgz#7930f5663c2f686915451d211e663aa9997d7336"
-  integrity sha1-eTD1ZjwvaGkVRR0hHmY6qZl9czY=
-  dependencies:
-    webcomponents.js "^0.7.20"
-
-"@types/clone@^0.1.29":
-  version "0.1.30"
-  resolved "https://registry.yarnpkg.com/@types/clone/-/clone-0.1.30.tgz#e7365648c1b42136a59c7d5040637b3b5c83b614"
-  integrity sha1-5zZWSMG0ITalnH1QQGN7O1yDthQ=
-
-"@types/node@6.0.*":
-  version "6.0.111"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.111.tgz#85f880a1bab78d395a5de9bcb5319e73a0c31400"
-  integrity sha512-DoWK5a544Jcr6C1qBadalyj3gQT5V9B87qFBb+uOOq1Id309Lbe10zwsCGCURZEOBoS/pOsmbDN4FnD4sOwJaw==
-
-"@types/node@^4.0.30":
-  version "4.2.23"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-4.2.23.tgz#9241f00d64eb91084f68367746ef10d5fb2f2fc4"
-  integrity sha512-U6IchCNLRyswc9p6G6lxWlbE+KwAhZp6mGo6MD2yWpmFomhYmetK+c98OpKyvphNn04CU3aXeJrXdOqbXVTS/w==
-
-"@types/parse5@^0.0.31":
-  version "0.0.31"
-  resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-0.0.31.tgz#e827a493a443b156e1b582a2e4c3bdc0040f2ee7"
-  integrity sha1-6Cekk6RDsVbhtYKi5MO9wAQPLuc=
-  dependencies:
-    "@types/node" "6.0.*"
-
-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
-
-acorn-jsx@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
-  integrity sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=
-  dependencies:
-    acorn "^3.0.4"
-
-acorn@^3.0.4, acorn@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
-  integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
-
-acorn@^5.5.0:
-  version "5.5.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
-  integrity sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==
-
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
-  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
-
-ansi-styles@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
-  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
-
-babel-polyfill@^6.2.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
-  integrity sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=
-  dependencies:
-    babel-runtime "^6.26.0"
-    core-js "^2.5.0"
-    regenerator-runtime "^0.10.5"
-
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
-boxen@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-0.3.1.tgz#a7d898243ae622f7abb6bb604d740a76c6a5461b"
-  integrity sha1-p9iYJDrmIvertrtgTXQKdsalRhs=
-  dependencies:
-    chalk "^1.1.1"
-    filled-array "^1.0.0"
-    object-assign "^4.0.1"
-    repeating "^2.0.0"
-    string-width "^1.0.1"
-    widest-line "^1.0.0"
-
-capture-stack-trace@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
-  integrity sha1-Sm+gc5nCa7pH8LJJa00PtAjFVQ0=
-
-chalk@^1.0.0, chalk@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
-  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
-  dependencies:
-    ansi-styles "^2.2.1"
-    escape-string-regexp "^1.0.2"
-    has-ansi "^2.0.0"
-    strip-ansi "^3.0.0"
-    supports-color "^2.0.0"
-
-clone@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
-  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
-
-code-point-at@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
-  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
-
-codemirror@5.15.2:
-  version "5.15.2"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.15.2.tgz#58b3dc732c6d10d7aae806f4c7cdd56a9b87fe8f"
-  integrity sha1-WLPccyxtENeq6Ab0x83VapuH/o8=
-
-configstore@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/configstore/-/configstore-2.1.0.tgz#737a3a7036e9886102aa6099e47bb33ab1aba1a1"
-  integrity sha1-c3o6cDbpiGECqmCZ5HuzOrGroaE=
-  dependencies:
-    dot-prop "^3.0.0"
-    graceful-fs "^4.1.2"
-    mkdirp "^0.5.0"
-    object-assign "^4.0.1"
-    os-tmpdir "^1.0.0"
-    osenv "^0.1.0"
-    uuid "^2.0.1"
-    write-file-atomic "^1.1.2"
-    xdg-basedir "^2.0.0"
-
-core-js@^2.4.0, core-js@^2.5.0:
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.6.tgz#0fe6d45bf3cac3ac364a9d72de7576f4eb221b9d"
-  integrity sha512-lQUVfQi0aLix2xpyjrrJEvfuYCqPc/HwmTKsC/VNf8q0zsjX7SQZtp4+oRONN5Tsur9GDETPjj+Ub2iDiGZfSQ==
-
-core-util-is@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
-create-error-class@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
-  integrity sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=
-  dependencies:
-    capture-stack-trace "^1.0.0"
-
-deep-extend@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.5.1.tgz#b894a9dd90d3023fbf1c55a394fb858eb2066f1f"
-  integrity sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==
-
-deep-is@~0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
-  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
-
-doctrine@^0.7.0:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-0.7.2.tgz#7cb860359ba3be90e040b26b729ce4bfa654c523"
-  integrity sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=
-  dependencies:
-    esutils "^1.1.6"
-    isarray "0.0.1"
-
-dom5@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/dom5/-/dom5-1.1.0.tgz#3a0c7700c083ab4c4d26938a78b0f0c6dcc37794"
-  integrity sha1-Ogx3AMCDq0xNJpOKeLDwxtzDd5Q=
-  dependencies:
-    parse5 "^1.4.1"
-
-dom5@^1.3.1:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/dom5/-/dom5-1.3.6.tgz#a7088a9fc5f3b08dc9f6eda4c7abaeb241945e0d"
-  integrity sha1-pwiKn8XzsI3J9u2kx6uuskGUXg0=
-  dependencies:
-    "@types/clone" "^0.1.29"
-    "@types/node" "^4.0.30"
-    "@types/parse5" "^0.0.31"
-    clone "^1.0.2"
-    parse5 "^1.4.1"
-
-dot-prop@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
-  integrity sha1-G3CK8JSknJoOfbyteQq6U52sEXc=
-  dependencies:
-    is-obj "^1.0.0"
-
-duplexer2@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
-  integrity sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=
-  dependencies:
-    readable-stream "^2.0.2"
-
-error-ex@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
-  integrity sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=
-  dependencies:
-    is-arrayish "^0.2.1"
-
-es6-promise@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-2.3.0.tgz#96edb9f2fdb01995822b263dd8aadab6748181bc"
-  integrity sha1-lu258v2wGZWCKyY92KratnSBgbw=
-
-escape-string-regexp@^1.0.2:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-escodegen@^1.7.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.1.tgz#dbae17ef96c8e4bedb1356f4504fa4cc2f7cb7e2"
-  integrity sha512-6hTjO1NAWkHnDk3OqQ4YrCuwwmGHL9S3nPlzBOUG/R44rda3wLNrfvQ5fkSGjyhHFKM7ALPKcKGrwvCLe0lC7Q==
-  dependencies:
-    esprima "^3.1.3"
-    estraverse "^4.2.0"
-    esutils "^2.0.2"
-    optionator "^0.8.1"
-  optionalDependencies:
-    source-map "~0.6.1"
-
-espree@^3.1.3:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
-  integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
-  dependencies:
-    acorn "^5.5.0"
-    acorn-jsx "^3.0.0"
-
-esprima@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
-  integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=
-
-estraverse@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-3.1.0.tgz#15e28a446b8b82bc700ccc8b96c78af4da0d6cba"
-  integrity sha1-FeKKRGuLgrxwDMyLlseK9NoNbLo=
-
-estraverse@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
-  integrity sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=
-
-esutils@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-1.1.6.tgz#c01ccaa9ae4b897c6d0c3e210ae52f3c7a844375"
-  integrity sha1-wBzKqa5LiXxtDD4hCuUvPHqEQ3U=
-
-esutils@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
-  integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
-
-fast-levenshtein@~2.0.4:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
-  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
-
-filled-array@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/filled-array/-/filled-array-1.1.0.tgz#c3c4f6c663b923459a9aa29912d2d031f1507f84"
-  integrity sha1-w8T2xmO5I0WamqKZEtLQMfFQf4Q=
-
-got@^5.0.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/got/-/got-5.7.1.tgz#5f81635a61e4a6589f180569ea4e381680a51f35"
-  integrity sha1-X4FjWmHkplifGAVp6k44FoClHzU=
-  dependencies:
-    create-error-class "^3.0.1"
-    duplexer2 "^0.1.4"
-    is-redirect "^1.0.0"
-    is-retry-allowed "^1.0.0"
-    is-stream "^1.0.0"
-    lowercase-keys "^1.0.0"
-    node-status-codes "^1.0.0"
-    object-assign "^4.0.1"
-    parse-json "^2.1.0"
-    pinkie-promise "^2.0.0"
-    read-all-stream "^3.0.0"
-    readable-stream "^2.0.5"
-    timed-out "^3.0.0"
-    unzip-response "^1.0.2"
-    url-parse-lax "^1.0.0"
-
-graceful-fs@^4.1.11, graceful-fs@^4.1.2:
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
-  integrity sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=
-
-has-ansi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
-  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
-  dependencies:
-    ansi-regex "^2.0.0"
-
-hydrolysis@^1.19.1:
-  version "1.25.0"
-  resolved "https://registry.yarnpkg.com/hydrolysis/-/hydrolysis-1.25.0.tgz#a4fb14a37a1e03b0db52d8aaa57c682272a14d84"
-  integrity sha1-pPsUo3oeA7DbUtiqpXxoInKhTYQ=
-  dependencies:
-    acorn "^3.2.0"
-    babel-polyfill "^6.2.0"
-    doctrine "^0.7.0"
-    dom5 "1.1.0"
-    escodegen "^1.7.0"
-    espree "^3.1.3"
-    estraverse "^3.1.0"
-    path-is-absolute "^1.0.0"
-
-imurmurhash@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
-  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
-
-inherits@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
-
-ini@~1.3.0:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
-  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
-
-is-arrayish@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
-  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
-
-is-finite@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
-  integrity sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=
-  dependencies:
-    number-is-nan "^1.0.0"
-
-is-fullwidth-code-point@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
-  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
-  dependencies:
-    number-is-nan "^1.0.0"
-
-is-npm@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
-  integrity sha1-8vtjpl5JBbQGyGBydloaTceTufQ=
-
-is-obj@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
-  integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
-
-is-redirect@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
-  integrity sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=
-
-is-retry-allowed@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
-  integrity sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=
-
-is-stream@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
-
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
-
-isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
-
-latest-version@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-2.0.0.tgz#56f8d6139620847b8017f8f1f4d78e211324168b"
-  integrity sha1-VvjWE5YghHuAF/jx9NeOIRMkFos=
-  dependencies:
-    package-json "^2.0.0"
-
-levn@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
-  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
-  dependencies:
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-
-lowercase-keys@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
-  integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
-
-minimist@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
-  integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
-
-minimist@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
-  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
-
-mkdirp@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
-  integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
-  dependencies:
-    minimist "0.0.8"
-
-node-status-codes@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"
-  integrity sha1-WuVUHQJGRdMqWPzdyc7s6nrjrC8=
-
-nopt@^3.0.1:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
-  integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
-  dependencies:
-    abbrev "1"
-
-number-is-nan@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
-  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
-
-object-assign@^4.0.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
-optionator@^0.8.1:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
-  integrity sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=
-  dependencies:
-    deep-is "~0.1.3"
-    fast-levenshtein "~2.0.4"
-    levn "~0.3.0"
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-    wordwrap "~1.0.0"
-
-os-homedir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
-
-os-tmpdir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
-  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
-
-osenv@^0.1.0:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
-  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
-  dependencies:
-    os-homedir "^1.0.0"
-    os-tmpdir "^1.0.0"
-
-package-json@^2.0.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/package-json/-/package-json-2.4.0.tgz#0d15bd67d1cbbddbb2ca222ff2edb86bcb31a8bb"
-  integrity sha1-DRW9Z9HLvduyyiIv8u24a8sxqLs=
-  dependencies:
-    got "^5.0.0"
-    registry-auth-token "^3.0.1"
-    registry-url "^3.0.3"
-    semver "^5.1.0"
-
-parse-json@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
-  integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
-  dependencies:
-    error-ex "^1.2.0"
-
-parse5@^1.4.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
-  integrity sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-path-posix@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/path-posix/-/path-posix-1.0.0.tgz#06b26113f56beab042545a23bfa88003ccac260f"
-  integrity sha1-BrJhE/Vr6rBCVFojv6iAA8ysJg8=
-
-pinkie-promise@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
-  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
-  dependencies:
-    pinkie "^2.0.0"
-
-pinkie@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
-  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
-
-prelude-ls@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
-  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
-
-prepend-http@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
-  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
-
-process-nextick-args@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
-  integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==
-
-rc@^1.0.1, rc@^1.1.6:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.7.tgz#8a10ca30d588d00464360372b890d06dacd02297"
-  integrity sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==
-  dependencies:
-    deep-extend "^0.5.1"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
-read-all-stream@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa"
-  integrity sha1-NcPhd/IHjveJ7kv6+kNzB06u9Po=
-  dependencies:
-    pinkie-promise "^2.0.0"
-    readable-stream "^2.0.0"
-
-readable-stream@^2.0.0, readable-stream@^2.0.2, readable-stream@^2.0.5:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
-  integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
-regenerator-runtime@^0.10.5:
-  version "0.10.5"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
-  integrity sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=
-
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
-registry-auth-token@^3.0.1:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.2.tgz#851fd49038eecb586911115af845260eec983f20"
-  integrity sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==
-  dependencies:
-    rc "^1.1.6"
-    safe-buffer "^5.0.1"
-
-registry-url@^3.0.3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-3.1.0.tgz#3d4ef870f73dde1d77f0cf9a381432444e174942"
-  integrity sha1-PU74cPc93h138M+aOBQyRE4XSUI=
-  dependencies:
-    rc "^1.0.1"
-
-repeating@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
-  integrity sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=
-  dependencies:
-    is-finite "^1.0.0"
-
-safe-buffer@^5.0.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
-  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-
-semver-diff@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
-  integrity sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=
-  dependencies:
-    semver "^5.0.3"
-
-semver@^5.0.3, semver@^5.1.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
-  integrity sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==
-
-slide@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
-  integrity sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=
-
-source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-string-width@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
-  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
-  dependencies:
-    code-point-at "^1.0.0"
-    is-fullwidth-code-point "^1.0.0"
-    strip-ansi "^3.0.0"
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
-strip-ansi@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
-  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
-  dependencies:
-    ansi-regex "^2.0.0"
-
-strip-json-comments@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
-  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
-
-supports-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
-  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
-
-timed-out@^3.0.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-3.1.3.tgz#95860bfcc5c76c277f8f8326fd0f5b2e20eba217"
-  integrity sha1-lYYL/MXHbCd/j4Mm/Q9bLiDrohc=
-
-type-check@~0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
-  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
-  dependencies:
-    prelude-ls "~1.1.2"
-
-unzip-response@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-1.0.2.tgz#b984f0877fc0a89c2c773cc1ef7b5b232b5b06fe"
-  integrity sha1-uYTwh3/AqJwsdzzB73tbIytbBv4=
-
-update-notifier@^0.6.0:
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-0.6.3.tgz#776dec8daa13e962a341e8a1d98354306b67ae08"
-  integrity sha1-d23sjaoT6WKjQeih2YNUMGtnrgg=
-  dependencies:
-    boxen "^0.3.1"
-    chalk "^1.0.0"
-    configstore "^2.0.0"
-    is-npm "^1.0.0"
-    latest-version "^2.0.0"
-    semver-diff "^2.0.0"
-
-url-parse-lax@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
-  integrity sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=
-  dependencies:
-    prepend-http "^1.0.1"
-
-util-deprecate@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
-
-uuid@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
-  integrity sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=
-
-vulcanize@1.14.8:
-  version "1.14.8"
-  resolved "https://registry.yarnpkg.com/vulcanize/-/vulcanize-1.14.8.tgz#3cdd6f81d9baf2c5796ddd6d2d289e45975086f7"
-  integrity sha1-PN1vgdm68sV5bd1tLSieRZdQhvc=
-  dependencies:
-    dom5 "^1.3.1"
-    es6-promise "^2.1.0"
-    hydrolysis "^1.19.1"
-    nopt "^3.0.1"
-    path-posix "^1.0.0"
-  optionalDependencies:
-    update-notifier "^0.6.0"
-
-web-animations-js@2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/web-animations-js/-/web-animations-js-2.1.3.tgz#fb3fc56a40a2fb804866386fcf1a414265c48b49"
-  integrity sha1-+z/FakCi+4BIZjhvzxpBQmXEi0k=
-
-web-animations-js@2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/web-animations-js/-/web-animations-js-2.2.2.tgz#7c3aa5382c5eade70cd206880d56a37869630638"
-  integrity sha1-fDqlOCxerecM0gaIDVajeGljBjg=
-
-webcomponents.js@^0.7.20, webcomponents.js@^0.7.22:
-  version "0.7.24"
-  resolved "https://registry.yarnpkg.com/webcomponents.js/-/webcomponents.js-0.7.24.tgz#2116fbfa1468ec416a7befdaa333e1d118f69c04"
-  integrity sha1-IRb7+hRo7EFqe+/aozPh0Rj2nAQ=
-
-widest-line@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-1.0.0.tgz#0c09c85c2a94683d0d7eaf8ee097d564bf0e105c"
-  integrity sha1-DAnIXCqUaD0Nfq+O4JfVZL8OEFw=
-  dependencies:
-    string-width "^1.0.1"
-
-wordwrap@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
-
-write-file-atomic@^1.1.2:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.3.4.tgz#f807a4f0b1d9e913ae7a48112e6cc3af1991b45f"
-  integrity sha1-+Aek8LHZ6ROuekgRLmzDrxmRtF8=
-  dependencies:
-    graceful-fs "^4.1.11"
-    imurmurhash "^0.1.4"
-    slide "^1.1.5"
-
-xdg-basedir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-2.0.0.tgz#edbc903cc385fc04523d966a335504b5504d1bd2"
-  integrity sha1-7byQPMOF/ARSPZZqM1UEtVBNG9I=
-  dependencies:
-    os-homedir "^1.0.0"
diff --git a/validator/yarn.lock b/validator/yarn.lock
deleted file mode 100644
index 99c2452c35423..0000000000000
--- a/validator/yarn.lock
+++ /dev/null
@@ -1,309 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
-
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-chalk@2.x:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-clone-buffer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
-  integrity sha1-4+JbIHrE5wGvch4staFnksrD3Fg=
-
-clone-stats@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
-  integrity sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=
-
-clone@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
-  integrity sha1-0hfR6WERjjrJpLi7oyhVU79kfNs=
-
-cloneable-readable@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.1.2.tgz#d591dee4a8f8bc15da43ce97dceeba13d43e2a65"
-  integrity sha512-Bq6+4t+lbM8vhTs/Bef5c5AdEMtapp/iFb6+s4/Hh9MVTt8OLKH7ZOOZSCT+Ys7hsHvqv0GuMPJ1lnQJVHvxpg==
-  dependencies:
-    inherits "^2.0.1"
-    process-nextick-args "^2.0.0"
-    readable-stream "^2.3.5"
-
-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-core-util-is@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
-debug@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
-  dependencies:
-    ms "^2.1.1"
-
-diff@^4.0.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
-  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
-
-escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
-
-glob@^7.1.4:
-  version "7.1.4"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
-  integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-google-closure-compiler-java@^20200517.0.0:
-  version "20200517.0.0"
-  resolved "https://registry.yarnpkg.com/google-closure-compiler-java/-/google-closure-compiler-java-20200517.0.0.tgz#778370c22273c9085f4cf959ce063f8f112c02ac"
-  integrity sha512-JVZBiyyXwcYi6Yc3lO6dF2hMLJA4OzPm4/mgsem/tF1vk2HsWTnL3GTaBsPB2ENVZp0hoqsd4KgpPiG9ssNWxw==
-
-google-closure-compiler-js@^20200517.0.0:
-  version "20200517.0.0"
-  resolved "https://registry.yarnpkg.com/google-closure-compiler-js/-/google-closure-compiler-js-20200517.0.0.tgz#9cb0861f764073d1c4d3b7453b74073ccb1ecfb1"
-  integrity sha512-dz6dOUHx5nhdIqMRXacAYS8aJfLvw4IKxGg28Hq/zeeDPHlX3P3iBK20NgFDfT8zdushThymtMqChSy7C5eyfA==
-
-google-closure-compiler-linux@^20200517.0.0:
-  version "20200517.0.0"
-  resolved "https://registry.yarnpkg.com/google-closure-compiler-linux/-/google-closure-compiler-linux-20200517.0.0.tgz#2b9ecb634130060174aff5c52329a694ea4be68b"
-  integrity sha512-S5xPh6TtP+ESzZrmQLcDDqtZAsCVTbdI4VS98wQlN6IMZTd94nAnOCg9mrxQNAgop2t4sdsv/KuH0BGPUWEZ+w==
-
-google-closure-compiler-osx@^20200517.0.0:
-  version "20200517.0.0"
-  resolved "https://registry.yarnpkg.com/google-closure-compiler-osx/-/google-closure-compiler-osx-20200517.0.0.tgz#9394e9a2fd97e3729fc3bd2abcffff6aab2cfcaa"
-  integrity sha512-FWIcsKqLllLjdOBZd7azijVaObydgRd0obVNi63eUfC5MX6T4qxKumGCyor2UCNY6by2ESz+PlGqCFzFhZ6b2g==
-
-google-closure-compiler-windows@^20200517.0.0:
-  version "20200517.0.0"
-  resolved "https://registry.yarnpkg.com/google-closure-compiler-windows/-/google-closure-compiler-windows-20200517.0.0.tgz#c5cdde438c29458666a83358567b12072924ed6c"
-  integrity sha512-UXhjRGwS8deTkRla/riyVq3psscgMuw78lepEPtq5NgbumgJzY2+IQP9q+4MVOfJW58Rv0JUWKAFOnBBSZWcAQ==
-
-google-closure-compiler@20200517.0.0:
-  version "20200517.0.0"
-  resolved "https://registry.yarnpkg.com/google-closure-compiler/-/google-closure-compiler-20200517.0.0.tgz#6c47f99fc1be59bd4f9e23c5a8f2e66d64b54143"
-  integrity sha512-80W9zBS9Ajk1T5InWCfsoPohDmo5T1AAyw1rHh5+dgb/jPgwC65KhY+oJozTncf+/7tyQHJXozTARwhSlBUcMg==
-  dependencies:
-    chalk "2.x"
-    google-closure-compiler-java "^20200517.0.0"
-    google-closure-compiler-js "^20200517.0.0"
-    minimist "1.x"
-    vinyl "2.x"
-    vinyl-sourcemaps-apply "^0.2.0"
-  optionalDependencies:
-    google-closure-compiler-linux "^20200517.0.0"
-    google-closure-compiler-osx "^20200517.0.0"
-    google-closure-compiler-windows "^20200517.0.0"
-
-google-closure-library@20200517.0.0:
-  version "20200517.0.0"
-  resolved "https://registry.yarnpkg.com/google-closure-library/-/google-closure-library-20200517.0.0.tgz#0439cba16ac287091a9e83aad524869ffc0c8099"
-  integrity sha512-nvCPKvfUbZfJuguAEH5JIJYAhaPKhsqzQ7Ss+anwiMbVEY5st0PcTn2TvU1vzhCv8SdknZysObTDHP1zbREMOQ==
-
-growl@^1.10.0:
-  version "1.10.5"
-  resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
-  integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
-
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2, inherits@^2.0.1, inherits@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
-
-isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
-
-jasmine-core@~3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-3.5.0.tgz#132c23e645af96d85c8bca13c8758b18429fc1e4"
-  integrity sha512-nCeAiw37MIMA9w9IXso7bRaLl+c/ef3wnxsoSAlYrzS+Ot0zTG6nU8G/cIfGkqpkjX2wNaIW9RFG0TwIFnG6bA==
-
-jasmine@3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-3.5.0.tgz#7101eabfd043a1fc82ac24e0ab6ec56081357f9e"
-  integrity sha512-DYypSryORqzsGoMazemIHUfMkXM7I7easFaxAvNM3Mr6Xz3Fy36TupTrAOxZWN8MVKEU5xECv22J4tUQf3uBzQ==
-  dependencies:
-    glob "^7.1.4"
-    jasmine-core "~3.5.0"
-
-minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-minimist@1.x, minimist@^1.2.3:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
-
-ms@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
-
-once@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
-  dependencies:
-    wrappy "1"
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
-  integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==
-
-readable-stream@^2.3.5:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
-  integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
-remove-trailing-separator@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
-  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
-
-replace-ext@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
-  integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
-
-safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
-  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-
-source-map@^0.5.1:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
-  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
-supports-color@^5.3.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
-util-deprecate@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
-
-vinyl-sourcemaps-apply@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz#ab6549d61d172c2b1b87be5c508d239c8ef87705"
-  integrity sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=
-  dependencies:
-    source-map "^0.5.1"
-
-vinyl@2.x:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.2.0.tgz#d85b07da96e458d25b2ffe19fece9f2caa13ed86"
-  integrity sha512-MBH+yP0kC/GQ5GwBqrTPTzEfiiLjta7hTtvQtbxBgTeSXsmKQRQecjibMbxIXzVT3Y9KJK+drOz1/k+vsu8Nkg==
-  dependencies:
-    clone "^2.1.1"
-    clone-buffer "^1.0.0"
-    clone-stats "^1.0.0"
-    cloneable-readable "^1.0.0"
-    remove-trailing-separator "^1.0.1"
-    replace-ext "^1.0.0"
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
diff --git a/yarn.lock b/yarn.lock
index 4784bb6bcc856..e69de29bb2d1d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1,18535 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@ampproject/animations@0.2.2":
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/@ampproject/animations/-/animations-0.2.2.tgz#61006ba765fbad4e5a2649fe7d53e1e5748a3731"
-  integrity sha512-Ukegl+czEVP2S6Xd48d8vR/yL1bXd2A2ccUDztW29vVOC7XrJjKSa3bIqecYckuUI+mBfJtzHJKzN6rkscz3jw==
-
-"@ampproject/filesize@4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@ampproject/filesize/-/filesize-4.2.0.tgz#d3fae7c878a55c8bfe35f34ab7a13bd41130502b"
-  integrity sha512-Esy8zDHYuXxOjYPkOm7JC6yVs38SAVvWDUq8jMYWVJDi3+cltTdmWyPNB8vDjjKitXfKx6n9bQoeW0hvQ9sH3g==
-  dependencies:
-    "@kristoferbaxter/async" "1.0.0"
-    bytes "3.1.0"
-    fast-glob "3.2.2"
-    kleur "3.0.3"
-    mri "1.1.5"
-
-"@ampproject/remapping@0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-0.2.0.tgz#07290a5c0f5eac8a4c33d38aa0d15a3416db432e"
-  integrity sha512-a4EztS9/GOVQjX5Ol+Iz33TFhaXvYBF7aB6D8+Qz0/SCIxOm3UNRhGZiwcCuJ8/Ifc6NCogp3S48kc5hFxRpUw==
-  dependencies:
-    "@jridgewell/resolve-uri" "1.0.0"
-    sourcemap-codec "1.4.8"
-
-"@ampproject/toolbox-cache-url@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@ampproject/toolbox-cache-url/-/toolbox-cache-url-2.3.0.tgz#64647f1e91b8b32e84d00491efc6ad0efe4521af"
-  integrity sha512-7+m5EamFZ4VwOCyeTgsemQmxn6WPGy3nAwd9Lc1d0cn1HjBZXR0DFj/B3FkN/zz+8oFtPQX8SFojuCsWml42tA==
-  dependencies:
-    punycode "2.1.1"
-    url-parse "1.4.7"
-
-"@ampproject/viewer-messaging@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@ampproject/viewer-messaging/-/viewer-messaging-1.1.0.tgz#404f92c5754bac61014ed2272dd5e87174b9af84"
-  integrity sha512-SoR1dGl2Pl8eJlyGCU/9Gz/orOggmW/13wUh7NnuGvDYqLdlhnRBzvEGqEAlq/fQKel9ZM6RNtu85Jw8WC3K2Q==
-
-"@ampproject/worker-dom@0.25.0":
-  version "0.25.0"
-  resolved "https://registry.yarnpkg.com/@ampproject/worker-dom/-/worker-dom-0.25.0.tgz#c6f2e14806e1a3d063725c07bef8c29dd07d66dd"
-  integrity sha512-/m4UEQU37MCNO1ac1kxerh21pSpjkUQSaE1PFUp/FakxWSmJ+IFY84VWoRWR4vqHZw3fahJnQqXqH3gA8vU4rg==
-
-"@ava/babel-plugin-throws-helper@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@ava/babel-plugin-throws-helper/-/babel-plugin-throws-helper-4.0.0.tgz#8f5b45b7a0a79c6f4032de2101e0c221847efb62"
-  integrity sha512-3diBLIVBPPh3j4+hb5lo0I1D+S/O/VDJPI4Y502apBxmwEqjyXG4gTSPFUlm41sSZeZzMarT/Gzovw9kV7An0w==
-
-"@ava/babel-preset-stage-4@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@ava/babel-preset-stage-4/-/babel-preset-stage-4-4.0.0.tgz#9be5a59ead170062e228bb6ffd2b29f0489424fd"
-  integrity sha512-lZEV1ZANzfzSYBU6WHSErsy7jLPbD1iIgAboASPMcKo7woVni5/5IKWeT0RxC8rY802MFktur3OKEw2JY1Tv2w==
-  dependencies:
-    "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
-    "@babel/plugin-proposal-dynamic-import" "^7.5.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
-    "@babel/plugin-transform-dotall-regex" "^7.4.4"
-    "@babel/plugin-transform-modules-commonjs" "^7.5.0"
-
-"@ava/babel-preset-transform-test-files@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@ava/babel-preset-transform-test-files/-/babel-preset-transform-test-files-6.0.0.tgz#639e8929d2cdc8863c1f16020ce644c525723cd4"
-  integrity sha512-8eKhFzZp7Qcq1VLfoC75ggGT8nQs9q8fIxltU47yCB7Wi7Y8Qf6oqY1Bm0z04fIec24vEgr0ENhDHEOUGVDqnA==
-  dependencies:
-    "@ava/babel-plugin-throws-helper" "^4.0.0"
-    babel-plugin-espower "^3.0.1"
-
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
-  integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==
-  dependencies:
-    "@babel/highlight" "^7.0.0"
-
-"@babel/code-frame@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.1.tgz#d5481c5095daa1c57e16e54c6f9198443afb49ff"
-  integrity sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==
-  dependencies:
-    "@babel/highlight" "^7.10.1"
-
-"@babel/code-frame@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
-  integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==
-  dependencies:
-    "@babel/highlight" "^7.8.3"
-
-"@babel/compat-data@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.10.1.tgz#b1085ffe72cd17bf2c0ee790fc09f9626011b2db"
-  integrity sha512-CHvCj7So7iCkGKPRFUfryXIkU2gSBw7VSZFYLsqVhrS47269VK2Hfi9S/YcublPMW8k1u2bQBlbDruoQEm4fgw==
-  dependencies:
-    browserslist "^4.12.0"
-    invariant "^2.2.4"
-    semver "^5.5.0"
-
-"@babel/core@7.10.2":
-  version "7.10.2"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.10.2.tgz#bd6786046668a925ac2bd2fd95b579b92a23b36a"
-  integrity sha512-KQmV9yguEjQsXqyOUGKjS4+3K8/DlOCE2pZcq4augdQmtTy5iv5EHtmMSJ7V4c1BIPjuwtZYqYLCq9Ga+hGBRQ==
-  dependencies:
-    "@babel/code-frame" "^7.10.1"
-    "@babel/generator" "^7.10.2"
-    "@babel/helper-module-transforms" "^7.10.1"
-    "@babel/helpers" "^7.10.1"
-    "@babel/parser" "^7.10.2"
-    "@babel/template" "^7.10.1"
-    "@babel/traverse" "^7.10.1"
-    "@babel/types" "^7.10.2"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.1"
-    json5 "^2.1.2"
-    lodash "^4.17.13"
-    resolve "^1.3.2"
-    semver "^5.4.1"
-    source-map "^0.5.0"
-
-"@babel/core@^7.1.0", "@babel/core@^7.6.0":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.2.tgz#069a776e8d5e9eefff76236bc8845566bd31dd91"
-  integrity sha512-l8zto/fuoZIbncm+01p8zPSDZu/VuuJhAfA7d/AbzM09WR7iVhavvfNDYCNpo1VvLk6E6xgAoP9P+/EMJHuRkQ==
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.6.2"
-    "@babel/helpers" "^7.6.2"
-    "@babel/parser" "^7.6.2"
-    "@babel/template" "^7.6.0"
-    "@babel/traverse" "^7.6.2"
-    "@babel/types" "^7.6.0"
-    convert-source-map "^1.1.0"
-    debug "^4.1.0"
-    json5 "^2.1.0"
-    lodash "^4.17.13"
-    resolve "^1.3.2"
-    semver "^5.4.1"
-    source-map "^0.5.0"
-
-"@babel/core@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.10.1.tgz#2a0ad0ea693601820defebad2140206503d89af3"
-  integrity sha512-u8XiZ6sMXW/gPmoP5ijonSUln4unazG291X0XAQ5h0s8qnAFr6BRRZGUEK+jtRWdmB0NTJQt7Uga25q8GetIIg==
-  dependencies:
-    "@babel/code-frame" "^7.10.1"
-    "@babel/generator" "^7.10.1"
-    "@babel/helper-module-transforms" "^7.10.1"
-    "@babel/helpers" "^7.10.1"
-    "@babel/parser" "^7.10.1"
-    "@babel/template" "^7.10.1"
-    "@babel/traverse" "^7.10.1"
-    "@babel/types" "^7.10.1"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.1"
-    json5 "^2.1.2"
-    lodash "^4.17.13"
-    resolve "^1.3.2"
-    semver "^5.4.1"
-    source-map "^0.5.0"
-
-"@babel/core@^7.7.5":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.7.tgz#ee155d2e12300bcc0cff6a8ad46f2af5063803e9"
-  integrity sha512-jlSjuj/7z138NLZALxVgrx13AOtqip42ATZP7+kYl53GvDV6+4dCek1mVUo8z8c8Xnw/mx2q3d9HWh3griuesQ==
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.7.7"
-    "@babel/helpers" "^7.7.4"
-    "@babel/parser" "^7.7.7"
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    json5 "^2.1.0"
-    lodash "^4.17.13"
-    resolve "^1.3.2"
-    semver "^5.4.1"
-    source-map "^0.5.0"
-
-"@babel/generator@^7.0.0", "@babel/generator@^7.4.0", "@babel/generator@^7.6.0", "@babel/generator@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.6.2.tgz#dac8a3c2df118334c2a29ff3446da1636a8f8c03"
-  integrity sha512-j8iHaIW4gGPnViaIHI7e9t/Hl8qLjERI6DcV9kEpAIDJsAOrcnXqRS7t+QbhL76pwbtqP+QCQLL0z1CyVmtjjQ==
-  dependencies:
-    "@babel/types" "^7.6.0"
-    jsesc "^2.5.1"
-    lodash "^4.17.13"
-    source-map "^0.5.0"
-
-"@babel/generator@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.10.1.tgz#4d14458e539bcb04ffe34124143f5c489f2dbca9"
-  integrity sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==
-  dependencies:
-    "@babel/types" "^7.10.1"
-    jsesc "^2.5.1"
-    lodash "^4.17.13"
-    source-map "^0.5.0"
-
-"@babel/generator@^7.10.2":
-  version "7.10.2"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.10.2.tgz#0fa5b5b2389db8bfdfcc3492b551ee20f5dd69a9"
-  integrity sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==
-  dependencies:
-    "@babel/types" "^7.10.2"
-    jsesc "^2.5.1"
-    lodash "^4.17.13"
-    source-map "^0.5.0"
-
-"@babel/generator@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
-  integrity sha512-m5qo2WgdOJeyYngKImbkyQrnUN1mPceaG5BV+G0E3gWsa4l/jCSryWJdM2x8OuGAOyh+3d5pVYfZWCiNFtynxg==
-  dependencies:
-    "@babel/types" "^7.7.4"
-    jsesc "^2.5.1"
-    lodash "^4.17.13"
-    source-map "^0.5.0"
-
-"@babel/generator@^7.7.7":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.7.tgz#859ac733c44c74148e1a72980a64ec84b85f4f45"
-  integrity sha512-/AOIBpHh/JU1l0ZFS4kiRCBnLi6OTHzh0RPk3h9isBxkkqELtQNFi1Vr/tiG9p1yfoUdKVwISuXWQR+hwwM4VQ==
-  dependencies:
-    "@babel/types" "^7.7.4"
-    jsesc "^2.5.1"
-    lodash "^4.17.13"
-    source-map "^0.5.0"
-
-"@babel/generator@^7.8.6":
-  version "7.8.7"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.7.tgz#870b3cf7984f5297998152af625c4f3e341400f7"
-  integrity sha512-DQwjiKJqH4C3qGiyQCAExJHoZssn49JTMJgZ8SANGgVFdkupcUhLOdkAeoC6kmHZCPfoDG5M0b6cFlSN5wW7Ew==
-  dependencies:
-    "@babel/types" "^7.8.7"
-    jsesc "^2.5.1"
-    lodash "^4.17.13"
-    source-map "^0.5.0"
-
-"@babel/generator@^7.9.6":
-  version "7.9.6"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.6.tgz#5408c82ac5de98cda0d77d8124e99fa1f2170a43"
-  integrity sha512-+htwWKJbH2bL72HRluF8zumBxzuX0ZZUFl3JLNyoUjM/Ho8wnVpPXM6aUz8cfKDqQ/h7zHqKt4xzJteUosckqQ==
-  dependencies:
-    "@babel/types" "^7.9.6"
-    jsesc "^2.5.1"
-    lodash "^4.17.13"
-    source-map "^0.5.0"
-
-"@babel/helper-annotate-as-pure@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
-  integrity sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==
-  dependencies:
-    "@babel/types" "^7.0.0"
-
-"@babel/helper-annotate-as-pure@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.1.tgz#f6d08acc6f70bbd59b436262553fb2e259a1a268"
-  integrity sha512-ewp3rvJEwLaHgyWGe4wQssC2vjks3E80WiUe2BpMb0KhreTjMROCbxXcEovTrbeGVdQct5VjQfrv9EgC+xMzCw==
-  dependencies:
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-annotate-as-pure@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
-  integrity sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.1.tgz#0ec7d9be8174934532661f87783eb18d72290059"
-  integrity sha512-cQpVq48EkYxUU0xozpGCLla3wlkdRRqLWu1ksFMXA9CM5KQmyyRpSEsYXbao7JUkOw/tAaYKCaYyZq6HOFYtyw==
-  dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.10.1"
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-builder-react-jsx-experimental@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.10.1.tgz#9a7d58ad184d3ac3bafb1a452cec2bad7e4a0bc8"
-  integrity sha512-irQJ8kpQUV3JasXPSFQ+LCCtJSc5ceZrPFVj6TElR6XCHssi3jV8ch3odIrNtjJFRZZVbrOEfJMI79TPU/h1pQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.1"
-    "@babel/helper-module-imports" "^7.10.1"
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-builder-react-jsx@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.1.tgz#a327f0cf983af5554701b1215de54a019f09b532"
-  integrity sha512-KXzzpyWhXgzjXIlJU1ZjIXzUPdej1suE6vzqgImZ/cpAsR/CC8gUcX4EWRmDfWz/cs6HOCPMBIJ3nKoXt3BFuw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.1"
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-compilation-targets@^7.10.2":
-  version "7.10.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.2.tgz#a17d9723b6e2c750299d2a14d4637c76936d8285"
-  integrity sha512-hYgOhF4To2UTB4LTaZepN/4Pl9LD4gfbJx8A34mqoluT8TLbof1mhUlYuNWTEebONa8+UlCC4X0TEXu7AOUyGA==
-  dependencies:
-    "@babel/compat-data" "^7.10.1"
-    browserslist "^4.12.0"
-    invariant "^2.2.4"
-    levenary "^1.1.1"
-    semver "^5.5.0"
-
-"@babel/helper-create-class-features-plugin@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.1.tgz#6d8a45aafe492378d0e6fc0b33e5dea132eae21c"
-  integrity sha512-bwhdehBJZt84HuPUcP1HaTLuc/EywVS8rc3FgsEPDcivg+DCW+SHuLHVkYOmcBA1ZfI+Z/oZjQc/+bPmIO7uAA==
-  dependencies:
-    "@babel/helper-function-name" "^7.10.1"
-    "@babel/helper-member-expression-to-functions" "^7.10.1"
-    "@babel/helper-optimise-call-expression" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/helper-replace-supers" "^7.10.1"
-    "@babel/helper-split-export-declaration" "^7.10.1"
-
-"@babel/helper-create-regexp-features-plugin@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.1.tgz#1b8feeab1594cbcfbf3ab5a3bbcabac0468efdbd"
-  integrity sha512-Rx4rHS0pVuJn5pJOqaqcZR4XSgeF9G/pO/79t+4r7380tXFJdzImFnxMU19f83wjSrmKHq6myrM10pFHTGzkUA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.1"
-    "@babel/helper-regex" "^7.10.1"
-    regexpu-core "^4.7.0"
-
-"@babel/helper-create-regexp-features-plugin@^7.8.3":
-  version "7.8.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.6.tgz#7fa040c97fb8aebe1247a5c645330c32d083066b"
-  integrity sha512-bPyujWfsHhV/ztUkwGHz/RPV1T1TDEsSZDsN42JPehndA+p1KKTh3npvTadux0ZhCrytx9tvjpWNowKby3tM6A==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.8.3"
-    "@babel/helper-regex" "^7.8.3"
-    regexpu-core "^4.6.0"
-
-"@babel/helper-define-map@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.10.1.tgz#5e69ee8308648470dd7900d159c044c10285221d"
-  integrity sha512-+5odWpX+OnvkD0Zmq7panrMuAGQBu6aPUgvMzuMGo4R+jUOvealEj2hiqI6WhxgKrTpFoFj0+VdsuA8KDxHBDg==
-  dependencies:
-    "@babel/helper-function-name" "^7.10.1"
-    "@babel/types" "^7.10.1"
-    lodash "^4.17.13"
-
-"@babel/helper-explode-assignable-expression@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.10.1.tgz#e9d76305ee1162ca467357ae25df94f179af2b7e"
-  integrity sha512-vcUJ3cDjLjvkKzt6rHrl767FeE7pMEYfPanq5L16GRtrXIoznc0HykNW2aEYkcnP76P0isoqJ34dDMFZwzEpJg==
-  dependencies:
-    "@babel/traverse" "^7.10.1"
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-fixtures@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-fixtures/-/helper-fixtures-7.10.1.tgz#601e7fe2d4fa994b06538384500329d30e21ff89"
-  integrity sha512-JK5Vp8SlT/CXEIxFz9bkUXaOxmLjsLZtzjemhl7IDJ7wJ0octs9juTcRkeklWj9+KvT9xsLjITCPedeDd18rFg==
-  dependencies:
-    lodash "^4.17.13"
-    semver "^5.3.0"
-
-"@babel/helper-function-name@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz#a0ceb01685f73355d4360c1247f582bfafc8ff53"
-  integrity sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.0.0"
-    "@babel/template" "^7.1.0"
-    "@babel/types" "^7.0.0"
-
-"@babel/helper-function-name@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz#92bd63829bfc9215aca9d9defa85f56b539454f4"
-  integrity sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.10.1"
-    "@babel/template" "^7.10.1"
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-function-name@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e"
-  integrity sha512-AnkGIdiBhEuiwdoMnKm7jfPfqItZhgRaZfMg1XX3bS25INOnLPjPG1Ppnajh8eqgt5kPJnfqrRHqFqmjKDZLzQ==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.7.4"
-    "@babel/template" "^7.7.4"
-    "@babel/types" "^7.7.4"
-
-"@babel/helper-function-name@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz#eeeb665a01b1f11068e9fb86ad56a1cb1a824cca"
-  integrity sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.8.3"
-    "@babel/template" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-function-name@^7.9.5":
-  version "7.9.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz#2b53820d35275120e1874a82e5aabe1376920a5c"
-  integrity sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.8.3"
-    "@babel/template" "^7.8.3"
-    "@babel/types" "^7.9.5"
-
-"@babel/helper-get-function-arity@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3"
-  integrity sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==
-  dependencies:
-    "@babel/types" "^7.0.0"
-
-"@babel/helper-get-function-arity@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz#7303390a81ba7cb59613895a192b93850e373f7d"
-  integrity sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==
-  dependencies:
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-get-function-arity@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0"
-  integrity sha512-QTGKEdCkjgzgfJ3bAyRwF4yyT3pg+vDgan8DSivq1eS0gwi+KGKE5x8kRcbeFTb/673mkO5SN1IZfmCfA5o+EA==
-  dependencies:
-    "@babel/types" "^7.7.4"
-
-"@babel/helper-get-function-arity@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
-  integrity sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-hoist-variables@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.1.tgz#7e77c82e5dcae1ebf123174c385aaadbf787d077"
-  integrity sha512-vLm5srkU8rI6X3+aQ1rQJyfjvCBLXP8cAGeuw04zeAM2ItKb1e7pmVmLyHb4sDaAYnLL13RHOZPLEtcGZ5xvjg==
-  dependencies:
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-member-expression-to-functions@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.1.tgz#432967fd7e12a4afef66c4687d4ca22bc0456f15"
-  integrity sha512-u7XLXeM2n50gb6PWJ9hoO5oO7JFPaZtrh35t8RqKLT1jFKj9IWeD1zrcrYp1q1qiZTdEarfDWfTIP8nGsu0h5g==
-  dependencies:
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-module-imports@7.10.1", "@babel/helper-module-imports@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.1.tgz#dd331bd45bccc566ce77004e9d05fe17add13876"
-  integrity sha512-SFxgwYmZ3HZPyZwJRiVNLRHWuW2OgE5k2nrVs6D9Iv4PPnXVffuEHy83Sfx/l4SqF+5kyJXjAyUmrG7tNm+qVg==
-  dependencies:
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-module-imports@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
-  integrity sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==
-  dependencies:
-    "@babel/types" "^7.0.0"
-
-"@babel/helper-module-transforms@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.10.1.tgz#24e2f08ee6832c60b157bb0936c86bef7210c622"
-  integrity sha512-RLHRCAzyJe7Q7sF4oy2cB+kRnU4wDZY/H2xJFGof+M+SJEGhZsb+GFj5j1AD8NiSaVBJ+Pf0/WObiXu/zxWpFg==
-  dependencies:
-    "@babel/helper-module-imports" "^7.10.1"
-    "@babel/helper-replace-supers" "^7.10.1"
-    "@babel/helper-simple-access" "^7.10.1"
-    "@babel/helper-split-export-declaration" "^7.10.1"
-    "@babel/template" "^7.10.1"
-    "@babel/types" "^7.10.1"
-    lodash "^4.17.13"
-
-"@babel/helper-module-transforms@^7.4.4":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.5.5.tgz#f84ff8a09038dcbca1fd4355661a500937165b4a"
-  integrity sha512-jBeCvETKuJqeiaCdyaheF40aXnnU1+wkSiUs/IQg3tB85up1LyL8x77ClY8qJpuRJUcXQo+ZtdNESmZl4j56Pw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/helper-simple-access" "^7.1.0"
-    "@babel/helper-split-export-declaration" "^7.4.4"
-    "@babel/template" "^7.4.4"
-    "@babel/types" "^7.5.5"
-    lodash "^4.17.13"
-
-"@babel/helper-optimise-call-expression@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.1.tgz#b4a1f2561870ce1247ceddb02a3860fa96d72543"
-  integrity sha512-a0DjNS1prnBsoKx83dP2falChcs7p3i8VMzdrSbfLhuQra/2ENC4sbri34dz/rWmDADsmF1q5GbfaXydh0Jbjg==
-  dependencies:
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-plugin-test-runner@7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-test-runner/-/helper-plugin-test-runner-7.10.1.tgz#a763e9a9373293f1970c870eff7ee907e24096ad"
-  integrity sha512-sYbeJco4D1hVzF3xscMKjnXoZwxvXGRUNGMfEeMQfDvrOMo155Uk29uWbyzlkj/4ZGHRPuNIt1ogr++k+hLH9Q==
-  dependencies:
-    "@babel/helper-transform-fixture-test-runner" "^7.10.1"
-
-"@babel/helper-plugin-utils@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
-  integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
-
-"@babel/helper-plugin-utils@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.1.tgz#ec5a5cf0eec925b66c60580328b122c01230a127"
-  integrity sha512-fvoGeXt0bJc7VMWZGCAEBEMo/HAjW2mP8apF5eXK0wSqwLAVHAISCWRoLMBMUs2kqeaG77jltVqu4Hn8Egl3nA==
-
-"@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
-  integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
-
-"@babel/helper-regex@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.1.tgz#021cf1a7ba99822f993222a001cc3fec83255b96"
-  integrity sha512-7isHr19RsIJWWLLFn21ubFt223PjQyg1HY7CZEMRr820HttHPpVvrsIN3bUOo44DEfFV4kBXO7Abbn9KTUZV7g==
-  dependencies:
-    lodash "^4.17.13"
-
-"@babel/helper-regex@^7.4.4":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
-  integrity sha512-CkCYQLkfkiugbRDO8eZn6lRuR8kzZoGXCg3149iTk5se7g6qykSpy3+hELSwquhu+TgHn8nkLiBwHvNX8Hofcw==
-  dependencies:
-    lodash "^4.17.13"
-
-"@babel/helper-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.8.3.tgz#139772607d51b93f23effe72105b319d2a4c6965"
-  integrity sha512-BWt0QtYv/cg/NecOAZMdcn/waj/5P26DR4mVLXfFtDokSR6fyuG0Pj+e2FqtSME+MqED1khnSMulkmGl8qWiUQ==
-  dependencies:
-    lodash "^4.17.13"
-
-"@babel/helper-remap-async-to-generator@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.1.0.tgz#361d80821b6f38da75bd3f0785ece20a88c5fe7f"
-  integrity sha512-3fOK0L+Fdlg8S5al8u/hWE6vhufGSn0bN09xm2LXMy//REAF8kDCrYoOBKYmA8m5Nom+sV9LyLCwrFynA8/slg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.0.0"
-    "@babel/helper-wrap-function" "^7.1.0"
-    "@babel/template" "^7.1.0"
-    "@babel/traverse" "^7.1.0"
-    "@babel/types" "^7.0.0"
-
-"@babel/helper-remap-async-to-generator@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.10.1.tgz#bad6aaa4ff39ce8d4b82ccaae0bfe0f7dbb5f432"
-  integrity sha512-RfX1P8HqsfgmJ6CwaXGKMAqbYdlleqglvVtht0HGPMSsy2V6MqLlOJVF/0Qyb/m2ZCi2z3q3+s6Pv7R/dQuZ6A==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.1"
-    "@babel/helper-wrap-function" "^7.10.1"
-    "@babel/template" "^7.10.1"
-    "@babel/traverse" "^7.10.1"
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-replace-supers@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.1.tgz#ec6859d20c5d8087f6a2dc4e014db7228975f13d"
-  integrity sha512-SOwJzEfpuQwInzzQJGjGaiG578UYmyi2Xw668klPWV5n07B73S0a9btjLk/52Mlcxa+5AdIYqws1KyXRfMoB7A==
-  dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.10.1"
-    "@babel/helper-optimise-call-expression" "^7.10.1"
-    "@babel/traverse" "^7.10.1"
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-simple-access@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz#65eeb954c8c245beaa4e859da6188f39d71e585c"
-  integrity sha512-Vk+78hNjRbsiu49zAPALxTb+JUQCz1aolpd8osOF16BGnLtseD21nbHgLPGUwrXEurZgiCOUmvs3ExTu4F5x6w==
-  dependencies:
-    "@babel/template" "^7.1.0"
-    "@babel/types" "^7.0.0"
-
-"@babel/helper-simple-access@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.10.1.tgz#08fb7e22ace9eb8326f7e3920a1c2052f13d851e"
-  integrity sha512-VSWpWzRzn9VtgMJBIWTZ+GP107kZdQ4YplJlCmIrjoLVSi/0upixezHCDG8kpPVTBJpKfxTH01wDhh+jS2zKbw==
-  dependencies:
-    "@babel/template" "^7.10.1"
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-split-export-declaration@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz#c6f4be1cbc15e3a868e4c64a17d5d31d754da35f"
-  integrity sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==
-  dependencies:
-    "@babel/types" "^7.10.1"
-
-"@babel/helper-split-export-declaration@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz#ff94894a340be78f53f06af038b205c49d993677"
-  integrity sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==
-  dependencies:
-    "@babel/types" "^7.4.4"
-
-"@babel/helper-split-export-declaration@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8"
-  integrity sha512-guAg1SXFcVr04Guk9eq0S4/rWS++sbmyqosJzVs8+1fH5NI+ZcmkaSkc7dmtAFbHFva6yRJnjW3yAcGxjueDug==
-  dependencies:
-    "@babel/types" "^7.7.4"
-
-"@babel/helper-split-export-declaration@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
-  integrity sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-transform-fixture-test-runner@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-transform-fixture-test-runner/-/helper-transform-fixture-test-runner-7.10.1.tgz#caee457f327c2105a326c8bcb95da8e998502298"
-  integrity sha512-klZ/efjYnyWx0LZcCJsphlfzOHXITGwnIGACv5vApu6cXSkf1yFEDfSlh66tsYlYAz5hzSdtN4Sxxb/+ildKyA==
-  dependencies:
-    "@babel/code-frame" "^7.10.1"
-    "@babel/core" "^7.10.1"
-    "@babel/helper-fixtures" "^7.10.1"
-    "@babel/polyfill" "^7.10.1"
-    babel-check-duplicated-nodes "^1.0.0"
-    jest "^24.8.0"
-    jest-diff "^24.8.0"
-    lodash "^4.17.13"
-    resolve "^1.3.2"
-    source-map "^0.5.0"
-
-"@babel/helper-validator-identifier@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz#5770b0c1a826c4f53f5ede5e153163e0318e94b5"
-  integrity sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==
-
-"@babel/helper-validator-identifier@^7.9.5":
-  version "7.9.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80"
-  integrity sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==
-
-"@babel/helper-wrap-function@^7.1.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa"
-  integrity sha512-o9fP1BZLLSrYlxYEYyl2aS+Flun5gtjTIG8iln+XuEzQTs0PLagAGSXUcqruJwD5fM48jzIEggCKpIfWTcR7pQ==
-  dependencies:
-    "@babel/helper-function-name" "^7.1.0"
-    "@babel/template" "^7.1.0"
-    "@babel/traverse" "^7.1.0"
-    "@babel/types" "^7.2.0"
-
-"@babel/helper-wrap-function@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.10.1.tgz#956d1310d6696257a7afd47e4c42dfda5dfcedc9"
-  integrity sha512-C0MzRGteVDn+H32/ZgbAv5r56f2o1fZSA/rj/TYo8JEJNHg+9BdSmKBUND0shxWRztWhjlT2cvHYuynpPsVJwQ==
-  dependencies:
-    "@babel/helper-function-name" "^7.10.1"
-    "@babel/template" "^7.10.1"
-    "@babel/traverse" "^7.10.1"
-    "@babel/types" "^7.10.1"
-
-"@babel/helpers@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.10.1.tgz#a6827b7cb975c9d9cef5fd61d919f60d8844a973"
-  integrity sha512-muQNHF+IdU6wGgkaJyhhEmI54MOZBKsFfsXFhboz1ybwJ1Kl7IHlbm2a++4jwrmY5UYsgitt5lfqo1wMFcHmyw==
-  dependencies:
-    "@babel/template" "^7.10.1"
-    "@babel/traverse" "^7.10.1"
-    "@babel/types" "^7.10.1"
-
-"@babel/helpers@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.6.2.tgz#681ffe489ea4dcc55f23ce469e58e59c1c045153"
-  integrity sha512-3/bAUL8zZxYs1cdX2ilEE0WobqbCmKWr/889lf2SS0PpDcpEIY8pb1CCyz0pEcX3pEb+MCbks1jIokz2xLtGTA==
-  dependencies:
-    "@babel/template" "^7.6.0"
-    "@babel/traverse" "^7.6.2"
-    "@babel/types" "^7.6.0"
-
-"@babel/helpers@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.7.4.tgz#62c215b9e6c712dadc15a9a0dcab76c92a940302"
-  integrity sha512-ak5NGZGJ6LV85Q1Zc9gn2n+ayXOizryhjSUBTdu5ih1tlVCJeuQENzc4ItyCVhINVXvIT/ZQ4mheGIsfBkpskg==
-  dependencies:
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
-
-"@babel/highlight@^7.0.0":
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540"
-  integrity sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^4.0.0"
-
-"@babel/highlight@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.1.tgz#841d098ba613ba1a427a2b383d79e35552c38ae0"
-  integrity sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.10.1"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
-"@babel/highlight@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.8.3.tgz#28f173d04223eaaa59bc1d439a3836e6d1265797"
-  integrity sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^4.0.0"
-
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.6.0", "@babel/parser@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.2.tgz#205e9c95e16ba3b8b96090677a67c9d6075b70a1"
-  integrity sha512-mdFqWrSPCmikBoaBYMuBulzTIKuXVPtEISFbRRVNwMWpCms/hmE2kRq0bblUHaNRKrjRlmVbx1sDHmjmRgD2Xg==
-
-"@babel/parser@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.1.tgz#2e142c27ca58aa2c7b119d09269b702c8bbad28c"
-  integrity sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==
-
-"@babel/parser@^7.10.2":
-  version "7.10.2"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.2.tgz#871807f10442b92ff97e4783b9b54f6a0ca812d0"
-  integrity sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==
-
-"@babel/parser@^7.7.0":
-  version "7.8.8"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.8.tgz#4c3b7ce36db37e0629be1f0d50a571d2f86f6cd4"
-  integrity sha512-mO5GWzBPsPf6865iIbzNE0AvkKF3NE+2S3eRUpE+FE07BOAkXh6G+GW/Pj01hhXjve1WScbaIO4UlY1JKeqCcA==
-
-"@babel/parser@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.4.tgz#75ab2d7110c2cf2fa949959afb05fa346d2231bb"
-  integrity sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g==
-
-"@babel/parser@^7.7.5", "@babel/parser@^7.7.7":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.7.tgz#1b886595419cf92d811316d5b715a53ff38b4937"
-  integrity sha512-WtTZMZAZLbeymhkd/sEaPD8IQyGAhmuTuvTzLiCFM7iXiVdY0gc0IaI+cW0fh1BnSMbJSzXX6/fHllgHKwHhXw==
-
-"@babel/parser@^7.8.6":
-  version "7.8.7"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.7.tgz#7b8facf95d25fef9534aad51c4ffecde1a61e26a"
-  integrity sha512-9JWls8WilDXFGxs0phaXAZgpxTZhSk/yOYH2hTHC0X1yC7Z78IJfvR1vJ+rmJKq3I35td2XzXzN6ZLYlna+r/A==
-
-"@babel/parser@^7.9.6":
-  version "7.9.6"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.6.tgz#3b1bbb30dabe600cd72db58720998376ff653bc7"
-  integrity sha512-AoeIEJn8vt+d/6+PXDRPaksYhnlbMIiejioBZvvMQsOjW/JYK6k/0dKnvvP3EhK5GfMBWDPtrxRtegWdAcdq9Q==
-
-"@babel/plugin-proposal-async-generator-functions@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.1.tgz#6911af5ba2e615c4ff3c497fe2f47b35bf6d7e55"
-  integrity sha512-vzZE12ZTdB336POZjmpblWfNNRpMSua45EYnRigE2XsZxcXcIyly2ixnTJasJE4Zq3U7t2d8rRF7XRUuzHxbOw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/helper-remap-async-to-generator" "^7.10.1"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
-
-"@babel/plugin-proposal-async-generator-functions@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
-  integrity sha512-+Dfo/SCQqrwx48ptLVGLdE39YtWRuKc/Y9I5Fy0P1DDBB9lsAHpjcEJQt+4IifuSOSTLBKJObJqMvaO1pIE8LQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-remap-async-to-generator" "^7.1.0"
-    "@babel/plugin-syntax-async-generators" "^7.2.0"
-
-"@babel/plugin-proposal-class-properties@7.10.1", "@babel/plugin-proposal-class-properties@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.1.tgz#046bc7f6550bb08d9bd1d4f060f5f5a4f1087e01"
-  integrity sha512-sqdGWgoXlnOdgMXU+9MbhzwFRgxVLeiGBqTrnuS7LC2IBU31wSsESbTUreT2O418obpfPdGUR2GbEufZF1bpqw==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-proposal-dynamic-import@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.1.tgz#e36979dc1dc3b73f6d6816fc4951da2363488ef0"
-  integrity sha512-Cpc2yUVHTEGPlmiQzXj026kqwjEQAD9I4ZC16uzdbgWgitg/UHKHLffKNCQZ5+y8jpIZPJcKcwsr2HwPh+w3XA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
-
-"@babel/plugin-proposal-dynamic-import@^7.5.0":
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.5.0.tgz#e532202db4838723691b10a67b8ce509e397c506"
-  integrity sha512-x/iMjggsKTFHYC6g11PL7Qy58IK8H5zqfm9e6hu4z1iH2IRyAp9u9dL80zA6R76yFovETFLKz2VJIC2iIPBuFw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
-
-"@babel/plugin-proposal-json-strings@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.1.tgz#b1e691ee24c651b5a5e32213222b2379734aff09"
-  integrity sha512-m8r5BmV+ZLpWPtMY2mOKN7wre6HIO4gfIiV+eOmsnZABNenrt/kzYBwrh+KOfgumSWpnlGs5F70J8afYMSJMBg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
-
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.1.tgz#02dca21673842ff2fe763ac253777f235e9bbf78"
-  integrity sha512-56cI/uHYgL2C8HVuHOuvVowihhX0sxb3nnfVRzUeVHTWmRHTZrKuAh/OBIMggGU/S1g/1D2CRCXqP+3u7vX7iA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
-
-"@babel/plugin-proposal-numeric-separator@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.1.tgz#a9a38bc34f78bdfd981e791c27c6fdcec478c123"
-  integrity sha512-jjfym4N9HtCiNfyyLAVD8WqPYeHUrw4ihxuAynWj6zzp2gf9Ey2f7ImhFm6ikB3CLf5Z/zmcJDri6B4+9j9RsA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.1"
-
-"@babel/plugin-proposal-object-rest-spread@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.10.1.tgz#cba44908ac9f142650b4a65b8aa06bf3478d5fb6"
-  integrity sha512-Z+Qri55KiQkHh7Fc4BW6o+QBuTagbOp9txE+4U1i79u9oWlf2npkiDx+Rf3iK3lbcHBuNy9UOkwuR5wOMH3LIQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-    "@babel/plugin-transform-parameters" "^7.10.1"
-
-"@babel/plugin-proposal-optional-catch-binding@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.1.tgz#c9f86d99305f9fa531b568ff5ab8c964b8b223d2"
-  integrity sha512-VqExgeE62YBqI3ogkGoOJp1R6u12DFZjqwJhqtKc2o5m1YTUuUWnos7bZQFBhwkxIFpWYJ7uB75U7VAPPiKETA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
-
-"@babel/plugin-proposal-optional-catch-binding@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.2.0.tgz#135d81edb68a081e55e56ec48541ece8065c38f5"
-  integrity sha512-mgYj3jCcxug6KUcX4OBoOJz3CMrwRfQELPQ5560F70YQUBZB7uac9fqaWamKR1iWUzGiK2t0ygzjTScZnVz75g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
-
-"@babel/plugin-proposal-optional-chaining@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.1.tgz#15f5d6d22708629451a91be28f8facc55b0e818c"
-  integrity sha512-dqQj475q8+/avvok72CF3AOSV/SGEcH29zT5hhohqqvvZ2+boQoOr7iGldBG5YXTO2qgCgc2B3WvVLUdbeMlGA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
-
-"@babel/plugin-proposal-private-methods@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.1.tgz#ed85e8058ab0fe309c3f448e5e1b73ca89cdb598"
-  integrity sha512-RZecFFJjDiQ2z6maFprLgrdnm0OzoC23Mx89xf1CcEsxmHuzuXOdniEuI+S3v7vjQG4F5sa6YtUp+19sZuSxHg==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-proposal-unicode-property-regex@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.1.tgz#dc04feb25e2dd70c12b05d680190e138fa2c0c6f"
-  integrity sha512-JjfngYRvwmPwmnbRZyNiPFI8zxCZb8euzbCG/LxyKdeTb59tVciKo9GK9bi6JYKInk1H11Dq9j/zRqIH4KigfQ==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-proposal-unicode-property-regex@^7.4.4":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.6.2.tgz#05413762894f41bfe42b9a5e80919bd575dcc802"
-  integrity sha512-NxHETdmpeSCtiatMRYWVJo7266rrvAC3DTeG5exQBIH/fMIUK7ejDNznBbn3HQl/o9peymRRg7Yqkx6PdUXmMw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-regex" "^7.4.4"
-    regexpu-core "^4.6.0"
-
-"@babel/plugin-syntax-async-generators@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.2.0.tgz#69e1f0db34c6f5a0cf7e2b3323bf159a76c8cb7f"
-  integrity sha512-1ZrIRBv2t0GSlcwVoQ6VgSLpLgiN/FVQUzt9znxo7v2Ov4jJrs8RY8tv0wvDmFN3qIdMKWrmMMW6yZ0G19MfGg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-
-"@babel/plugin-syntax-async-generators@^7.8.0", "@babel/plugin-syntax-async-generators@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
-  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-bigint@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
-  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-class-properties@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.1.tgz#d5bc0645913df5b17ad7eda0fa2308330bde34c5"
-  integrity sha512-Gf2Yx/iRs1JREDtVZ56OrjjgFHCaldpTnuy9BHla10qyVT3YkIIGEtoDWhyop0ksu1GvNjHIoYRBqm3zoR1jyQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-syntax-class-properties@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.8.3.tgz#6cb933a8872c8d359bfde69bbeaae5162fd1e8f7"
-  integrity sha512-UcAyQWg2bAN647Q+O811tG9MrJ38Z10jjhQdKNAL8fsyPzE3cCN/uT+f55cFVY4aGO4jqJAvmqsuY3GQDwAoXg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-syntax-dynamic-import@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
-  integrity sha512-mVxuJ0YroI/h/tbFTPGZR8cv6ai+STMKNBq0f8hFxsxWjl94qqhsb+wXbpNMDPU3cfR1TIsVFzU3nXyZMqyK4w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-
-"@babel/plugin-syntax-dynamic-import@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
-  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-json-strings@^7.8.0", "@babel/plugin-syntax-json-strings@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
-  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-jsx@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.1.tgz#0ae371134a42b91d5418feb3c8c8d43e1565d2da"
-  integrity sha512-+OxyOArpVFXQeXKLO9o+r2I4dIoVoy6+Uu0vKELrlweDM3QJADZj+Z+5ERansZqIZBcLj42vHnDI8Rz9BnRIuQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.8.3.tgz#3995d7d7ffff432f6ddc742b47e730c054599897"
-  integrity sha512-Zpg2Sgc++37kuFl6ppq2Q7Awc6E6AIW671x5PY8E/f7MCIyPPGK/EoeZXvvY3P42exZ3Q4/t3YOzP/HiN79jDg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
-  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-numeric-separator@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.1.tgz#25761ee7410bc8cf97327ba741ee94e4a61b7d99"
-  integrity sha512-uTd0OsHrpe3tH5gRPTxG8Voh99/WCU78vIm5NMRYPAqC8lR4vajt6KkCAknCHrx24vkPdd/05yfdGSB4EIY2mg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-syntax-numeric-separator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.8.3.tgz#0e3fb63e09bea1b11e96467271c8308007e7c41f"
-  integrity sha512-H7dCMAdN83PcCmqmkHB5dtp+Xa9a6LKSvA2hiFBC/5alSHxM5VgWZXFqDi0YFe8XNGT6iCa+z4V4zSt/PdZ7Dw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-syntax-object-rest-spread@^7.0.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
-  integrity sha512-t0JKGgqk2We+9may3t0xDdmneaXmyxq0xieYcKHxIsrJO64n1OiMWNUtc5gQK1PA0NpdCRrtZp4z+IUaKugrSA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-
-"@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
-  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-optional-catch-binding@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.2.0.tgz#a94013d6eda8908dfe6a477e7f9eda85656ecf5c"
-  integrity sha512-bDe4xKNhb0LI7IvZHiA13kff0KEfaGX/Hv4lMA9+7TEc63hMNvfKo6ZFpXhKuEp+II/q35Gc4NoMeDZyaUbj9w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-
-"@babel/plugin-syntax-optional-catch-binding@^7.8.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
-  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-optional-chaining@^7.8.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
-  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-top-level-await@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.10.1.tgz#8b8733f8c57397b3eaa47ddba8841586dcaef362"
-  integrity sha512-hgA5RYkmZm8FTFT3yu2N9Bx7yVVOKYT6yEdXXo6j2JTm0wNxgqaGeQVaSHRjhfnQbX91DtjFB6McRFSlcJH3xQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-arrow-functions@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.1.tgz#cb5ee3a36f0863c06ead0b409b4cc43a889b295b"
-  integrity sha512-6AZHgFJKP3DJX0eCNJj01RpytUa3SOGawIxweHkNX2L6PYikOZmoh5B0d7hIHaIgveMjX990IAa/xK7jRTN8OA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-async-to-generator@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.1.tgz#e5153eb1a3e028f79194ed8a7a4bf55f862b2062"
-  integrity sha512-XCgYjJ8TY2slj6SReBUyamJn3k2JLUIiiR5b6t1mNCMSvv7yx+jJpaewakikp0uWFQSF7ChPPoe3dHmXLpISkg==
-  dependencies:
-    "@babel/helper-module-imports" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/helper-remap-async-to-generator" "^7.10.1"
-
-"@babel/plugin-transform-block-scoped-functions@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.1.tgz#146856e756d54b20fff14b819456b3e01820b85d"
-  integrity sha512-B7K15Xp8lv0sOJrdVAoukKlxP9N59HS48V1J3U/JGj+Ad+MHq+am6xJVs85AgXrQn4LV8vaYFOB+pr/yIuzW8Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-block-scoping@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.10.1.tgz#47092d89ca345811451cd0dc5d91605982705d5e"
-  integrity sha512-8bpWG6TtF5akdhIm/uWTyjHqENpy13Fx8chg7pFH875aNLwX8JxIxqm08gmAT+Whe6AOmaTeLPe7dpLbXt+xUw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-    lodash "^4.17.13"
-
-"@babel/plugin-transform-classes@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.10.1.tgz#6e11dd6c4dfae70f540480a4702477ed766d733f"
-  integrity sha512-P9V0YIh+ln/B3RStPoXpEQ/CoAxQIhRSUn7aXqQ+FZJ2u8+oCtjIXR3+X0vsSD8zv+mb56K7wZW1XiDTDGiDRQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.1"
-    "@babel/helper-define-map" "^7.10.1"
-    "@babel/helper-function-name" "^7.10.1"
-    "@babel/helper-optimise-call-expression" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/helper-replace-supers" "^7.10.1"
-    "@babel/helper-split-export-declaration" "^7.10.1"
-    globals "^11.1.0"
-
-"@babel/plugin-transform-computed-properties@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.1.tgz#59aa399064429d64dce5cf76ef9b90b7245ebd07"
-  integrity sha512-mqSrGjp3IefMsXIenBfGcPXxJxweQe2hEIwMQvjtiDQ9b1IBvDUjkAtV/HMXX47/vXf14qDNedXsIiNd1FmkaQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-destructuring@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.1.tgz#abd58e51337815ca3a22a336b85f62b998e71907"
-  integrity sha512-V/nUc4yGWG71OhaTH705pU8ZSdM6c1KmmLP8ys59oOYbT7RpMYAR3MsVOt6OHL0WzG7BlTU076va9fjJyYzJMA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-dotall-regex@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.1.tgz#920b9fec2d78bb57ebb64a644d5c2ba67cc104ee"
-  integrity sha512-19VIMsD1dp02RvduFUmfzj8uknaO3uiHHF0s3E1OHnVsNj8oge8EQ5RzHRbJjGSetRnkEuBYO7TG1M5kKjGLOA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-dotall-regex@^7.4.4":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.6.2.tgz#44abb948b88f0199a627024e1508acaf8dc9b2f9"
-  integrity sha512-KGKT9aqKV+9YMZSkowzYoYEiHqgaDhGmPNZlZxX6UeHC4z30nC1J9IrZuGqbYFB1jaIGdv91ujpze0exiVK8bA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-regex" "^7.4.4"
-    regexpu-core "^4.6.0"
-
-"@babel/plugin-transform-duplicate-keys@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.1.tgz#c900a793beb096bc9d4d0a9d0cde19518ffc83b9"
-  integrity sha512-wIEpkX4QvX8Mo9W6XF3EdGttrIPZWozHfEaDTU0WJD/TDnXMvdDh30mzUl/9qWhnf7naicYartcEfUghTCSNpA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-exponentiation-operator@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.1.tgz#279c3116756a60dd6e6f5e488ba7957db9c59eb3"
-  integrity sha512-lr/przdAbpEA2BUzRvjXdEDLrArGRRPwbaF9rvayuHRvdQ7lUTTkZnhZrJ4LE2jvgMRFF4f0YuPQ20vhiPYxtA==
-  dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-for-of@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.1.tgz#ff01119784eb0ee32258e8646157ba2501fcfda5"
-  integrity sha512-US8KCuxfQcn0LwSCMWMma8M2R5mAjJGsmoCBVwlMygvmDUMkTCykc84IqN1M7t+agSfOmLYTInLCHJM+RUoz+w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-function-name@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.1.tgz#4ed46fd6e1d8fde2a2ec7b03c66d853d2c92427d"
-  integrity sha512-//bsKsKFBJfGd65qSNNh1exBy5Y9gD9ZN+DvrJ8f7HXr4avE5POW6zB7Rj6VnqHV33+0vXWUwJT0wSHubiAQkw==
-  dependencies:
-    "@babel/helper-function-name" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-literals@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.1.tgz#5794f8da82846b22e4e6631ea1658bce708eb46a"
-  integrity sha512-qi0+5qgevz1NHLZroObRm5A+8JJtibb7vdcPQF1KQE12+Y/xxl8coJ+TpPW9iRq+Mhw/NKLjm+5SHtAHCC7lAw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-member-expression-literals@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.1.tgz#90347cba31bca6f394b3f7bd95d2bbfd9fce2f39"
-  integrity sha512-UmaWhDokOFT2GcgU6MkHC11i0NQcL63iqeufXWfRy6pUOGYeCGEKhvfFO6Vz70UfYJYHwveg62GS83Rvpxn+NA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-modules-amd@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.1.tgz#65950e8e05797ebd2fe532b96e19fc5482a1d52a"
-  integrity sha512-31+hnWSFRI4/ACFr1qkboBbrTxoBIzj7qA69qlq8HY8p7+YCzkCT6/TvQ1a4B0z27VeWtAeJd6pr5G04dc1iHw==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
-"@babel/plugin-transform-modules-commonjs@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.1.tgz#d5ff4b4413ed97ffded99961056e1fb980fb9301"
-  integrity sha512-AQG4fc3KOah0vdITwt7Gi6hD9BtQP/8bhem7OjbaMoRNCH5Djx42O2vYMfau7QnAzQCa+RJnhJBmFFMGpQEzrg==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/helper-simple-access" "^7.10.1"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
-"@babel/plugin-transform-modules-commonjs@^7.5.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.6.0.tgz#39dfe957de4420445f1fcf88b68a2e4aa4515486"
-  integrity sha512-Ma93Ix95PNSEngqomy5LSBMAQvYKVe3dy+JlVJSHEXZR5ASL9lQBedMiCyVtmTLraIDVRE3ZjTZvmXXD2Ozw3g==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.4.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-simple-access" "^7.1.0"
-    babel-plugin-dynamic-import-node "^2.3.0"
-
-"@babel/plugin-transform-modules-systemjs@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.1.tgz#9962e4b0ac6aaf2e20431ada3d8ec72082cbffb6"
-  integrity sha512-ewNKcj1TQZDL3YnO85qh9zo1YF1CHgmSTlRQgHqe63oTrMI85cthKtZjAiZSsSNjPQ5NCaYo5QkbYqEw1ZBgZA==
-  dependencies:
-    "@babel/helper-hoist-variables" "^7.10.1"
-    "@babel/helper-module-transforms" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
-"@babel/plugin-transform-modules-umd@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.1.tgz#ea080911ffc6eb21840a5197a39ede4ee67b1595"
-  integrity sha512-EIuiRNMd6GB6ulcYlETnYYfgv4AxqrswghmBRQbWLHZxN4s7mupxzglnHqk9ZiUpDI4eRWewedJJNj67PWOXKA==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-named-capturing-groups-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.8.3.tgz#a2a72bffa202ac0e2d0506afd0939c5ecbc48c6c"
-  integrity sha512-f+tF/8UVPU86TrCb06JoPWIdDpTNSGGcAtaD9mLP0aYGA0OS0j7j7DHJR0GTFrUZPUU6loZhbsVZgTh0N+Qdnw==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
-
-"@babel/plugin-transform-new-target@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.1.tgz#6ee41a5e648da7632e22b6fb54012e87f612f324"
-  integrity sha512-MBlzPc1nJvbmO9rPr1fQwXOM2iGut+JC92ku6PbiJMMK7SnQc1rytgpopveE3Evn47gzvGYeCdgfCDbZo0ecUw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-object-super@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.1.tgz#2e3016b0adbf262983bf0d5121d676a5ed9c4fde"
-  integrity sha512-WnnStUDN5GL+wGQrJylrnnVlFhFmeArINIR9gjhSeYyvroGhBrSAXYg/RHsnfzmsa+onJrTJrEClPzgNmmQ4Gw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/helper-replace-supers" "^7.10.1"
-
-"@babel/plugin-transform-parameters@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.1.tgz#b25938a3c5fae0354144a720b07b32766f683ddd"
-  integrity sha512-tJ1T0n6g4dXMsL45YsSzzSDZCxiHXAQp/qHrucOq5gEHncTA3xDxnd5+sZcoQp+N1ZbieAaB8r/VUCG0gqseOg==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-property-literals@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.1.tgz#cffc7315219230ed81dc53e4625bf86815b6050d"
-  integrity sha512-Kr6+mgag8auNrgEpbfIWzdXYOvqDHZOF0+Bx2xh4H2EDNwcbRb9lY6nkZg8oSjsX+DH9Ebxm9hOqtKW+gRDeNA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-react-constant-elements@7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.10.1.tgz#c7f117a54657cba3f9d32012e050fc89982df9e1"
-  integrity sha512-V4os6bkWt/jbrzfyVcZn2ZpuHZkvj3vyBU0U/dtS8SZuMS7Rfx5oknTrtfyXJ2/QZk8gX7Yls5Z921ItNpE30Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-react-jsx@7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.1.tgz#91f544248ba131486decb5d9806da6a6e19a2896"
-  integrity sha512-MBVworWiSRBap3Vs39eHt+6pJuLUAaK4oxGc8g+wY+vuSJvLiEQjW1LSTqKb8OUPtDvHCkdPhk7d6sjC19xyFw==
-  dependencies:
-    "@babel/helper-builder-react-jsx" "^7.10.1"
-    "@babel/helper-builder-react-jsx-experimental" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/plugin-syntax-jsx" "^7.10.1"
-
-"@babel/plugin-transform-regenerator@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.1.tgz#10e175cbe7bdb63cc9b39f9b3f823c5c7c5c5490"
-  integrity sha512-B3+Y2prScgJ2Bh/2l9LJxKbb8C8kRfsG4AdPT+n7ixBHIxJaIG8bi8tgjxUMege1+WqSJ+7gu1YeoMVO3gPWzw==
-  dependencies:
-    regenerator-transform "^0.14.2"
-
-"@babel/plugin-transform-reserved-words@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.1.tgz#0fc1027312b4d1c3276a57890c8ae3bcc0b64a86"
-  integrity sha512-qN1OMoE2nuqSPmpTqEM7OvJ1FkMEV+BjVeZZm9V9mq/x1JLKQ4pcv8riZJMNN3u2AUGl0ouOMjRr2siecvHqUQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-shorthand-properties@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.1.tgz#e8b54f238a1ccbae482c4dce946180ae7b3143f3"
-  integrity sha512-AR0E/lZMfLstScFwztApGeyTHJ5u3JUKMjneqRItWeEqDdHWZwAOKycvQNCasCK/3r5YXsuNG25funcJDu7Y2g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-spread@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.10.1.tgz#0c6d618a0c4461a274418460a28c9ccf5239a7c8"
-  integrity sha512-8wTPym6edIrClW8FI2IoaePB91ETOtg36dOkj3bYcNe7aDMN2FXEoUa+WrmPc4xa1u2PQK46fUX2aCb+zo9rfw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-sticky-regex@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.1.tgz#90fc89b7526228bed9842cff3588270a7a393b00"
-  integrity sha512-j17ojftKjrL7ufX8ajKvwRilwqTok4q+BjkknmQw9VNHnItTyMP5anPFzxFJdCQs7clLcWpCV3ma+6qZWLnGMA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/helper-regex" "^7.10.1"
-
-"@babel/plugin-transform-template-literals@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.1.tgz#914c7b7f4752c570ea00553b4284dad8070e8628"
-  integrity sha512-t7B/3MQf5M1T9hPCRG28DNGZUuxAuDqLYS03rJrIk2prj/UV7Z6FOneijhQhnv/Xa039vidXeVbvjK2SK5f7Gg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-typeof-symbol@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.1.tgz#60c0239b69965d166b80a84de7315c1bc7e0bb0e"
-  integrity sha512-qX8KZcmbvA23zDi+lk9s6hC1FM7jgLHYIjuLgULgc8QtYnmB3tAVIYkNoKRQ75qWBeyzcoMoK8ZQmogGtC/w0g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-unicode-escapes@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.1.tgz#add0f8483dab60570d9e03cecef6c023aa8c9940"
-  integrity sha512-zZ0Poh/yy1d4jeDWpx/mNwbKJVwUYJX73q+gyh4bwtG0/iUlzdEu0sLMda8yuDFS6LBQlT/ST1SJAR6zYwXWgw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/plugin-transform-unicode-regex@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.1.tgz#6b58f2aea7b68df37ac5025d9c88752443a6b43f"
-  integrity sha512-Y/2a2W299k0VIUdbqYm9X2qS6fE0CUBhhiPpimK6byy7OJ/kORLlIX+J6UrjgNu5awvs62k+6RSslxhcvVw2Tw==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-
-"@babel/polyfill@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.10.1.tgz#d56d4c8be8dd6ec4dce2649474e9b707089f739f"
-  integrity sha512-TviueJ4PBW5p48ra8IMtLXVkDucrlOZAIZ+EXqS3Ot4eukHbWiqcn7DcqpA1k5PcKtmJ4Xl9xwdv6yQvvcA+3g==
-  dependencies:
-    core-js "^2.6.5"
-    regenerator-runtime "^0.13.4"
-
-"@babel/preset-env@7.10.2":
-  version "7.10.2"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.10.2.tgz#715930f2cf8573b0928005ee562bed52fb65fdfb"
-  integrity sha512-MjqhX0RZaEgK/KueRzh+3yPSk30oqDKJ5HP5tqTSB1e2gzGS3PLy7K0BIpnp78+0anFuSwOeuCf1zZO7RzRvEA==
-  dependencies:
-    "@babel/compat-data" "^7.10.1"
-    "@babel/helper-compilation-targets" "^7.10.2"
-    "@babel/helper-module-imports" "^7.10.1"
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/plugin-proposal-async-generator-functions" "^7.10.1"
-    "@babel/plugin-proposal-class-properties" "^7.10.1"
-    "@babel/plugin-proposal-dynamic-import" "^7.10.1"
-    "@babel/plugin-proposal-json-strings" "^7.10.1"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.1"
-    "@babel/plugin-proposal-numeric-separator" "^7.10.1"
-    "@babel/plugin-proposal-object-rest-spread" "^7.10.1"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.10.1"
-    "@babel/plugin-proposal-optional-chaining" "^7.10.1"
-    "@babel/plugin-proposal-private-methods" "^7.10.1"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.10.1"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
-    "@babel/plugin-syntax-class-properties" "^7.10.1"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.1"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
-    "@babel/plugin-syntax-top-level-await" "^7.10.1"
-    "@babel/plugin-transform-arrow-functions" "^7.10.1"
-    "@babel/plugin-transform-async-to-generator" "^7.10.1"
-    "@babel/plugin-transform-block-scoped-functions" "^7.10.1"
-    "@babel/plugin-transform-block-scoping" "^7.10.1"
-    "@babel/plugin-transform-classes" "^7.10.1"
-    "@babel/plugin-transform-computed-properties" "^7.10.1"
-    "@babel/plugin-transform-destructuring" "^7.10.1"
-    "@babel/plugin-transform-dotall-regex" "^7.10.1"
-    "@babel/plugin-transform-duplicate-keys" "^7.10.1"
-    "@babel/plugin-transform-exponentiation-operator" "^7.10.1"
-    "@babel/plugin-transform-for-of" "^7.10.1"
-    "@babel/plugin-transform-function-name" "^7.10.1"
-    "@babel/plugin-transform-literals" "^7.10.1"
-    "@babel/plugin-transform-member-expression-literals" "^7.10.1"
-    "@babel/plugin-transform-modules-amd" "^7.10.1"
-    "@babel/plugin-transform-modules-commonjs" "^7.10.1"
-    "@babel/plugin-transform-modules-systemjs" "^7.10.1"
-    "@babel/plugin-transform-modules-umd" "^7.10.1"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.8.3"
-    "@babel/plugin-transform-new-target" "^7.10.1"
-    "@babel/plugin-transform-object-super" "^7.10.1"
-    "@babel/plugin-transform-parameters" "^7.10.1"
-    "@babel/plugin-transform-property-literals" "^7.10.1"
-    "@babel/plugin-transform-regenerator" "^7.10.1"
-    "@babel/plugin-transform-reserved-words" "^7.10.1"
-    "@babel/plugin-transform-shorthand-properties" "^7.10.1"
-    "@babel/plugin-transform-spread" "^7.10.1"
-    "@babel/plugin-transform-sticky-regex" "^7.10.1"
-    "@babel/plugin-transform-template-literals" "^7.10.1"
-    "@babel/plugin-transform-typeof-symbol" "^7.10.1"
-    "@babel/plugin-transform-unicode-escapes" "^7.10.1"
-    "@babel/plugin-transform-unicode-regex" "^7.10.1"
-    "@babel/preset-modules" "^0.1.3"
-    "@babel/types" "^7.10.2"
-    browserslist "^4.12.0"
-    core-js-compat "^3.6.2"
-    invariant "^2.2.2"
-    levenary "^1.1.1"
-    semver "^5.5.0"
-
-"@babel/preset-modules@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.3.tgz#13242b53b5ef8c883c3cf7dddd55b36ce80fbc72"
-  integrity sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
-    "@babel/plugin-transform-dotall-regex" "^7.4.4"
-    "@babel/types" "^7.4.4"
-    esutils "^2.0.2"
-
-"@babel/runtime-corejs3@^7.8.3":
-  version "7.8.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.8.7.tgz#8209d9dff2f33aa2616cb319c83fe159ffb07b8c"
-  integrity sha512-sc7A+H4I8kTd7S61dgB9RomXu/C+F4IrRr4Ytze4dnfx7AXEpCrejSNpjx7vq6y/Bak9S6Kbk65a/WgMLtg43Q==
-  dependencies:
-    core-js-pure "^3.0.0"
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@^7.8.4":
-  version "7.8.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.7.tgz#8fefce9802db54881ba59f90bb28719b4996324d"
-  integrity sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
-  integrity sha512-5AEH2EXD8euCk446b7edmgFdub/qfH1SN6Nii3+fyXP807QRx9Q73A2N5hNwRRslC2H9sNzaFhsPubkS4L8oNQ==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.6.0"
-    "@babel/types" "^7.6.0"
-
-"@babel/template@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.1.tgz#e167154a94cb5f14b28dc58f5356d2162f539811"
-  integrity sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==
-  dependencies:
-    "@babel/code-frame" "^7.10.1"
-    "@babel/parser" "^7.10.1"
-    "@babel/types" "^7.10.1"
-
-"@babel/template@^7.3.3", "@babel/template@^7.8.3":
-  version "7.8.6"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
-  integrity sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==
-  dependencies:
-    "@babel/code-frame" "^7.8.3"
-    "@babel/parser" "^7.8.6"
-    "@babel/types" "^7.8.6"
-
-"@babel/template@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
-  integrity sha512-qUzihgVPguAzXCK7WXw8pqs6cEwi54s3E+HrejlkuWO6ivMKx9hZl3Y2fSXp9i5HgyWmj7RKP+ulaYnKM4yYxw==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.7.4"
-    "@babel/types" "^7.7.4"
-
-"@babel/traverse@^7.0.0":
-  version "7.9.6"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.6.tgz#5540d7577697bf619cc57b92aa0f1c231a94f442"
-  integrity sha512-b3rAHSjbxy6VEAvlxM8OV/0X4XrG72zoxme6q1MOoe2vd0bEc+TwayhuC1+Dfgqh1QEG+pj7atQqvUprHIccsg==
-  dependencies:
-    "@babel/code-frame" "^7.8.3"
-    "@babel/generator" "^7.9.6"
-    "@babel/helper-function-name" "^7.9.5"
-    "@babel/helper-split-export-declaration" "^7.8.3"
-    "@babel/parser" "^7.9.6"
-    "@babel/types" "^7.9.6"
-    debug "^4.1.0"
-    globals "^11.1.0"
-    lodash "^4.17.13"
-
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.6.2.tgz#b0e2bfd401d339ce0e6c05690206d1e11502ce2c"
-  integrity sha512-8fRE76xNwNttVEF2TwxJDGBLWthUkHWSldmfuBzVRmEDWOtu4XdINTgN7TDWzuLg4bbeIMLvfMFD9we5YcWkRQ==
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.6.2"
-    "@babel/helper-function-name" "^7.1.0"
-    "@babel/helper-split-export-declaration" "^7.4.4"
-    "@babel/parser" "^7.6.2"
-    "@babel/types" "^7.6.0"
-    debug "^4.1.0"
-    globals "^11.1.0"
-    lodash "^4.17.13"
-
-"@babel/traverse@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.10.1.tgz#bbcef3031e4152a6c0b50147f4958df54ca0dd27"
-  integrity sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==
-  dependencies:
-    "@babel/code-frame" "^7.10.1"
-    "@babel/generator" "^7.10.1"
-    "@babel/helper-function-name" "^7.10.1"
-    "@babel/helper-split-export-declaration" "^7.10.1"
-    "@babel/parser" "^7.10.1"
-    "@babel/types" "^7.10.1"
-    debug "^4.1.0"
-    globals "^11.1.0"
-    lodash "^4.17.13"
-
-"@babel/traverse@^7.7.0":
-  version "7.8.6"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.6.tgz#acfe0c64e1cd991b3e32eae813a6eb564954b5ff"
-  integrity sha512-2B8l0db/DPi8iinITKuo7cbPznLCEk0kCxDoB9/N6gGNg/gxOXiR/IcymAFPiBwk5w6TtQ27w4wpElgp9btR9A==
-  dependencies:
-    "@babel/code-frame" "^7.8.3"
-    "@babel/generator" "^7.8.6"
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/helper-split-export-declaration" "^7.8.3"
-    "@babel/parser" "^7.8.6"
-    "@babel/types" "^7.8.6"
-    debug "^4.1.0"
-    globals "^11.1.0"
-    lodash "^4.17.13"
-
-"@babel/traverse@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558"
-  integrity sha512-P1L58hQyupn8+ezVA2z5KBm4/Zr4lCC8dwKCMYzsa5jFMDMQAzaBNy9W5VjB+KAmBjb40U7a/H6ao+Xo+9saIw==
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.7.4"
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/helper-split-export-declaration" "^7.7.4"
-    "@babel/parser" "^7.7.4"
-    "@babel/types" "^7.7.4"
-    debug "^4.1.0"
-    globals "^11.1.0"
-    lodash "^4.17.13"
-
-"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.5.5", "@babel/types@^7.6.0":
-  version "7.6.1"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.6.1.tgz#53abf3308add3ac2a2884d539151c57c4b3ac648"
-  integrity sha512-X7gdiuaCmA0uRjCmRtYJNAVCc/q+5xSgsfKJHqMN4iNLILX39677fJE1O40arPMh0TTtS9ItH67yre6c7k6t0g==
-  dependencies:
-    esutils "^2.0.2"
-    lodash "^4.17.13"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.1.tgz#6886724d31c8022160a7db895e6731ca33483921"
-  integrity sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.10.1"
-    lodash "^4.17.13"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.10.2":
-  version "7.10.2"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.2.tgz#30283be31cad0dbf6fb00bd40641ca0ea675172d"
-  integrity sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.10.1"
-    lodash "^4.17.13"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.3.3", "@babel/types@^7.9.6":
-  version "7.9.6"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.6.tgz#2c5502b427251e9de1bd2dff95add646d95cc9f7"
-  integrity sha512-qxXzvBO//jO9ZnoasKF1uJzHd2+M6Q2ZPIVfnFps8JJvXy0ZBbwbNOmE6SGIY5XOY6d1Bo5lb9d9RJ8nv3WSeA==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.9.5"
-    lodash "^4.17.13"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.7.0", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.8.7":
-  version "7.8.7"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.7.tgz#1fc9729e1acbb2337d5b6977a63979b4819f5d1d"
-  integrity sha512-k2TreEHxFA4CjGkL+GYjRyx35W0Mr7DP5+9q6WMkyKXB+904bYmG40syjMFV0oLlhhFCwWl0vA0DyzTDkwAiJw==
-  dependencies:
-    esutils "^2.0.2"
-    lodash "^4.17.13"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.7.2":
-  version "7.7.2"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.2.tgz#550b82e5571dcd174af576e23f0adba7ffc683f7"
-  integrity sha512-YTf6PXoh3+eZgRCBzzP25Bugd2ngmpQVrk7kXX0i5N9BO7TFBtIgZYs7WtxtOGs8e6A4ZI7ECkbBCEHeXocvOA==
-  dependencies:
-    esutils "^2.0.2"
-    lodash "^4.17.13"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193"
-  integrity sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==
-  dependencies:
-    esutils "^2.0.2"
-    lodash "^4.17.13"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.9.5":
-  version "7.9.5"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444"
-  integrity sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.9.5"
-    lodash "^4.17.13"
-    to-fast-properties "^2.0.0"
-
-"@bcoe/v8-coverage@^0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
-  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
-
-"@cnakazawa/watch@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
-  integrity sha512-r5160ogAvGyHsal38Kux7YYtodEKOj89RGb28ht1jh3SJb08VwRwAKKJL0bGb04Zd/3r9FL3BFIc3bBidYffCA==
-  dependencies:
-    exec-sh "^0.3.2"
-    minimist "^1.2.0"
-
-"@concordance/react@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@concordance/react/-/react-2.0.0.tgz#aef913f27474c53731f4fd79cc2f54897de90fde"
-  integrity sha512-huLSkUuM2/P+U0uy2WwlKuixMsTODD8p4JVQBI4VKeopkiN0C7M3N9XYVawb4M+4spN5RrO/eLhk7KoQX6nsfA==
-  dependencies:
-    arrify "^1.0.1"
-
-"@gulp-sourcemaps/identity-map@1.X":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz#1e6fe5d8027b1f285dc0d31762f566bccd73d5a9"
-  integrity sha512-ciiioYMLdo16ShmfHBXJBOFm3xPC4AuwO4xeRpFeHz7WK9PYsWCmigagG2XyzZpubK4a3qNKoUBDhbzHfa50LQ==
-  dependencies:
-    acorn "^5.0.3"
-    css "^2.2.1"
-    normalize-path "^2.1.1"
-    source-map "^0.6.0"
-    through2 "^2.0.3"
-
-"@gulp-sourcemaps/map-sources@1.X":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/map-sources/-/map-sources-1.0.0.tgz#890ae7c5d8c877f6d384860215ace9d7ec945bda"
-  integrity sha1-iQrnxdjId/bThIYCFazp1+yUW9o=
-  dependencies:
-    normalize-path "^2.0.1"
-    through2 "^2.0.3"
-
-"@istanbuljs/load-nyc-config@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz#10602de5570baea82f8afbfa2630b24e7a8cfe5b"
-  integrity sha512-ZR0rq/f/E4f4XcgnDvtMWXCUJpi8eO0rssVhmztsZqLIEFA9UUP9zmpE0VxlM+kv/E1ul2I876Fwil2ayptDVg==
-  dependencies:
-    camelcase "^5.3.1"
-    find-up "^4.1.0"
-    js-yaml "^3.13.1"
-    resolve-from "^5.0.0"
-
-"@istanbuljs/schema@^0.1.2":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
-  integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
-
-"@jest/console@^24.7.1", "@jest/console@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
-  integrity sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==
-  dependencies:
-    "@jest/source-map" "^24.9.0"
-    chalk "^2.0.1"
-    slash "^2.0.0"
-
-"@jest/console@^26.0.1":
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-26.0.1.tgz#62b3b2fa8990f3cbffbef695c42ae9ddbc8f4b39"
-  integrity sha512-9t1KUe/93coV1rBSxMmBAOIK3/HVpwxArCA1CxskKyRiv6o8J70V8C/V3OJminVCTa2M0hQI9AWRd5wxu2dAHw==
-  dependencies:
-    "@jest/types" "^26.0.1"
-    chalk "^4.0.0"
-    jest-message-util "^26.0.1"
-    jest-util "^26.0.1"
-    slash "^3.0.0"
-
-"@jest/core@26.0.1":
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-26.0.1.tgz#aa538d52497dfab56735efb00e506be83d841fae"
-  integrity sha512-Xq3eqYnxsG9SjDC+WLeIgf7/8KU6rddBxH+SCt18gEpOhAGYC/Mq+YbtlNcIdwjnnT+wDseXSbU0e5X84Y4jTQ==
-  dependencies:
-    "@jest/console" "^26.0.1"
-    "@jest/reporters" "^26.0.1"
-    "@jest/test-result" "^26.0.1"
-    "@jest/transform" "^26.0.1"
-    "@jest/types" "^26.0.1"
-    ansi-escapes "^4.2.1"
-    chalk "^4.0.0"
-    exit "^0.1.2"
-    graceful-fs "^4.2.4"
-    jest-changed-files "^26.0.1"
-    jest-config "^26.0.1"
-    jest-haste-map "^26.0.1"
-    jest-message-util "^26.0.1"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.0.1"
-    jest-resolve-dependencies "^26.0.1"
-    jest-runner "^26.0.1"
-    jest-runtime "^26.0.1"
-    jest-snapshot "^26.0.1"
-    jest-util "^26.0.1"
-    jest-validate "^26.0.1"
-    jest-watcher "^26.0.1"
-    micromatch "^4.0.2"
-    p-each-series "^2.1.0"
-    rimraf "^3.0.0"
-    slash "^3.0.0"
-    strip-ansi "^6.0.0"
-
-"@jest/core@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.9.0.tgz#2ceccd0b93181f9c4850e74f2a9ad43d351369c4"
-  integrity sha512-Fogg3s4wlAr1VX7q+rhV9RVnUv5tD7VuWfYy1+whMiWUrvl7U3QJSJyWcDio9Lq2prqYsZaeTv2Rz24pWGkJ2A==
-  dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/reporters" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.1"
-    exit "^0.1.2"
-    graceful-fs "^4.1.15"
-    jest-changed-files "^24.9.0"
-    jest-config "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-resolve-dependencies "^24.9.0"
-    jest-runner "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    jest-watcher "^24.9.0"
-    micromatch "^3.1.10"
-    p-each-series "^1.0.0"
-    realpath-native "^1.1.0"
-    rimraf "^2.5.4"
-    slash "^2.0.0"
-    strip-ansi "^5.0.0"
-
-"@jest/environment@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.9.0.tgz#21e3afa2d65c0586cbd6cbefe208bafade44ab18"
-  integrity sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==
-  dependencies:
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
-
-"@jest/environment@^26.0.1":
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-26.0.1.tgz#82f519bba71959be9b483675ee89de8c8f72a5c8"
-  integrity sha512-xBDxPe8/nx251u0VJ2dFAFz2H23Y98qdIaNwnMK6dFQr05jc+Ne/2np73lOAx+5mSBO/yuQldRrQOf6hP1h92g==
-  dependencies:
-    "@jest/fake-timers" "^26.0.1"
-    "@jest/types" "^26.0.1"
-    jest-mock "^26.0.1"
-
-"@jest/fake-timers@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
-  integrity sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==
-  dependencies:
-    "@jest/types" "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-mock "^24.9.0"
-
-"@jest/fake-timers@^26.0.1":
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-26.0.1.tgz#f7aeff13b9f387e9d0cac9a8de3bba538d19d796"
-  integrity sha512-Oj/kCBnTKhm7CR+OJSjZty6N1bRDr9pgiYQr4wY221azLz5PHi08x/U+9+QpceAYOWheauLP8MhtSVFrqXQfhg==
-  dependencies:
-    "@jest/types" "^26.0.1"
-    "@sinonjs/fake-timers" "^6.0.1"
-    jest-message-util "^26.0.1"
-    jest-mock "^26.0.1"
-    jest-util "^26.0.1"
-
-"@jest/globals@^26.0.1":
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-26.0.1.tgz#3f67b508a7ce62b6e6efc536f3d18ec9deb19a9c"
-  integrity sha512-iuucxOYB7BRCvT+TYBzUqUNuxFX1hqaR6G6IcGgEqkJ5x4htNKo1r7jk1ji9Zj8ZMiMw0oB5NaA7k5Tx6MVssA==
-  dependencies:
-    "@jest/environment" "^26.0.1"
-    "@jest/types" "^26.0.1"
-    expect "^26.0.1"
-
-"@jest/reporters@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.9.0.tgz#86660eff8e2b9661d042a8e98a028b8d631a5b43"
-  integrity sha512-mu4X0yjaHrffOsWmVLzitKmmmWSQ3GGuefgNscUSWNiUNcEOSEQk9k3pERKEQVBb0Cnn88+UESIsZEMH3o88Gw==
-  dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
-    exit "^0.1.2"
-    glob "^7.1.2"
-    istanbul-lib-coverage "^2.0.2"
-    istanbul-lib-instrument "^3.0.1"
-    istanbul-lib-report "^2.0.4"
-    istanbul-lib-source-maps "^3.0.1"
-    istanbul-reports "^2.2.6"
-    jest-haste-map "^24.9.0"
-    jest-resolve "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.6.0"
-    node-notifier "^5.4.2"
-    slash "^2.0.0"
-    source-map "^0.6.0"
-    string-length "^2.0.0"
-
-"@jest/reporters@^26.0.1":
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-26.0.1.tgz#14ae00e7a93e498cec35b0c00ab21c375d9b078f"
-  integrity sha512-NWWy9KwRtE1iyG/m7huiFVF9YsYv/e+mbflKRV84WDoJfBqUrNRyDbL/vFxQcYLl8IRqI4P3MgPn386x76Gf2g==
-  dependencies:
-    "@bcoe/v8-coverage" "^0.2.3"
-    "@jest/console" "^26.0.1"
-    "@jest/test-result" "^26.0.1"
-    "@jest/transform" "^26.0.1"
-    "@jest/types" "^26.0.1"
-    chalk "^4.0.0"
-    collect-v8-coverage "^1.0.0"
-    exit "^0.1.2"
-    glob "^7.1.2"
-    graceful-fs "^4.2.4"
-    istanbul-lib-coverage "^3.0.0"
-    istanbul-lib-instrument "^4.0.0"
-    istanbul-lib-report "^3.0.0"
-    istanbul-lib-source-maps "^4.0.0"
-    istanbul-reports "^3.0.2"
-    jest-haste-map "^26.0.1"
-    jest-resolve "^26.0.1"
-    jest-util "^26.0.1"
-    jest-worker "^26.0.0"
-    slash "^3.0.0"
-    source-map "^0.6.0"
-    string-length "^4.0.1"
-    terminal-link "^2.0.0"
-    v8-to-istanbul "^4.1.3"
-  optionalDependencies:
-    node-notifier "^7.0.0"
-
-"@jest/source-map@^24.3.0", "@jest/source-map@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
-  integrity sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==
-  dependencies:
-    callsites "^3.0.0"
-    graceful-fs "^4.1.15"
-    source-map "^0.6.0"
-
-"@jest/source-map@^26.0.0":
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.0.0.tgz#fd7706484a7d3faf7792ae29783933bbf48a4749"
-  integrity sha512-S2Z+Aj/7KOSU2TfW0dyzBze7xr95bkm5YXNUqqCek+HE0VbNNSNzrRwfIi5lf7wvzDTSS0/ib8XQ1krFNyYgbQ==
-  dependencies:
-    callsites "^3.0.0"
-    graceful-fs "^4.2.4"
-    source-map "^0.6.0"
-
-"@jest/test-result@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
-  integrity sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==
-  dependencies:
-    "@jest/console" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-
-"@jest/test-result@^26.0.1":
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-26.0.1.tgz#1ffdc1ba4bc289919e54b9414b74c9c2f7b2b718"
-  integrity sha512-oKwHvOI73ICSYRPe8WwyYPTtiuOAkLSbY8/MfWF3qDEd/sa8EDyZzin3BaXTqufir/O/Gzea4E8Zl14XU4Mlyg==
-  dependencies:
-    "@jest/console" "^26.0.1"
-    "@jest/types" "^26.0.1"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    collect-v8-coverage "^1.0.0"
-
-"@jest/test-sequencer@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz#f8f334f35b625a4f2f355f2fe7e6036dad2e6b31"
-  integrity sha512-6qqsU4o0kW1dvA95qfNog8v8gkRN9ph6Lz7r96IvZpHdNipP2cBcb07J1Z45mz/VIS01OHJ3pY8T5fUY38tg4A==
-  dependencies:
-    "@jest/test-result" "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-runner "^24.9.0"
-    jest-runtime "^24.9.0"
-
-"@jest/test-sequencer@^26.0.1":
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-26.0.1.tgz#b0563424728f3fe9e75d1442b9ae4c11da73f090"
-  integrity sha512-ssga8XlwfP8YjbDcmVhwNlrmblddMfgUeAkWIXts1V22equp2GMIHxm7cyeD5Q/B0ZgKPK/tngt45sH99yLLGg==
-  dependencies:
-    "@jest/test-result" "^26.0.1"
-    graceful-fs "^4.2.4"
-    jest-haste-map "^26.0.1"
-    jest-runner "^26.0.1"
-    jest-runtime "^26.0.1"
-
-"@jest/transform@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
-  integrity sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@jest/types" "^24.9.0"
-    babel-plugin-istanbul "^5.1.0"
-    chalk "^2.0.1"
-    convert-source-map "^1.4.0"
-    fast-json-stable-stringify "^2.0.0"
-    graceful-fs "^4.1.15"
-    jest-haste-map "^24.9.0"
-    jest-regex-util "^24.9.0"
-    jest-util "^24.9.0"
-    micromatch "^3.1.10"
-    pirates "^4.0.1"
-    realpath-native "^1.1.0"
-    slash "^2.0.0"
-    source-map "^0.6.1"
-    write-file-atomic "2.4.1"
-
-"@jest/transform@^26.0.1":
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.0.1.tgz#0e3ecbb34a11cd4b2080ed0a9c4856cf0ceb0639"
-  integrity sha512-pPRkVkAQ91drKGbzCfDOoHN838+FSbYaEAvBXvKuWeeRRUD8FjwXkqfUNUZL6Ke48aA/1cqq/Ni7kVMCoqagWA==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@jest/types" "^26.0.1"
-    babel-plugin-istanbul "^6.0.0"
-    chalk "^4.0.0"
-    convert-source-map "^1.4.0"
-    fast-json-stable-stringify "^2.0.0"
-    graceful-fs "^4.2.4"
-    jest-haste-map "^26.0.1"
-    jest-regex-util "^26.0.0"
-    jest-util "^26.0.1"
-    micromatch "^4.0.2"
-    pirates "^4.0.1"
-    slash "^3.0.0"
-    source-map "^0.6.1"
-    write-file-atomic "^3.0.0"
-
-"@jest/types@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
-  integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
-  dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^1.1.1"
-    "@types/yargs" "^13.0.0"
-
-"@jest/types@^26.0.1":
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.0.1.tgz#b78333fbd113fa7aec8d39de24f88de8686dac67"
-  integrity sha512-IbtjvqI9+eS1qFnOIEL7ggWmT+iK/U+Vde9cGWtYb/b6XgKb3X44ZAe/z9YZzoAAZ/E92m0DqrilF934IGNnQA==
-  dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^1.1.1"
-    "@types/yargs" "^15.0.0"
-    chalk "^4.0.0"
-
-"@jridgewell/resolve-uri@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-1.0.0.tgz#3fdf5798f0b49e90155896f6291df186eac06c83"
-  integrity sha512-9oLAnygRMi8Q5QkYEU4XWK04B+nuoXoxjRvRxgjuChkLZFBja0YPSgdZ7dZtwhncLBcQe/I/E+fLuk5qxcYVJA==
-
-"@kristoferbaxter/async@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@kristoferbaxter/async/-/async-1.0.0.tgz#33c8e8c6b055f15f4ee8a711b9594336a6fb1671"
-  integrity sha512-CAQQQ8mUUBKI2P7stYojHwHb+ShdFN8SrC90/96V4m2XlDSctXAA+5PD5CqCICs0o5c/83cYJCeub+FSetKLrw==
-
-"@nodelib/fs.scandir@2.1.2":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.2.tgz#1f981cd5b83e85cfdeb386fc693d4baab392fa54"
-  integrity sha512-wrIBsjA5pl13f0RN4Zx4FNWmU71lv03meGKnqRUoCyan17s4V3WL92f3w3AIuWbNnpcrQyFBU5qMavJoB8d27w==
-  dependencies:
-    "@nodelib/fs.stat" "2.0.2"
-    run-parallel "^1.1.9"
-
-"@nodelib/fs.scandir@2.1.3":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
-  integrity sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==
-  dependencies:
-    "@nodelib/fs.stat" "2.0.3"
-    run-parallel "^1.1.9"
-
-"@nodelib/fs.stat@2.0.2", "@nodelib/fs.stat@^2.0.1":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.2.tgz#2762aea8fe78ea256860182dcb52d61ee4b8fda6"
-  integrity sha512-z8+wGWV2dgUhLqrtRYa03yDx4HWMvXKi1z8g3m2JyxAx8F7xk74asqPk5LAETjqDSGLFML/6CDl0+yFunSYicw==
-
-"@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3"
-  integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==
-
-"@nodelib/fs.walk@^1.2.1":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.3.tgz#a555dc256acaf00c62b0db29529028dd4d4cb141"
-  integrity sha512-l6t8xEhfK9Sa4YO5mIRdau7XSOADfmh3jCr0evNHdY+HNkW6xuQhgMH7D73VV6WpZOagrW0UludvMTiifiwTfA==
-  dependencies:
-    "@nodelib/fs.scandir" "2.1.2"
-    fastq "^1.6.0"
-
-"@nodelib/fs.walk@^1.2.3":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz#011b9202a70a6366e436ca5c065844528ab04976"
-  integrity sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==
-  dependencies:
-    "@nodelib/fs.scandir" "2.1.3"
-    fastq "^1.6.0"
-
-"@npmcli/move-file@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.0.1.tgz#de103070dac0f48ce49cf6693c23af59c0f70464"
-  integrity sha512-Uv6h1sT+0DrblvIrolFtbvM1FgWm+/sy4B3pvLp67Zys+thcukzS5ekn7HsZFGpWP4Q3fYJCljbWQE/XivMRLw==
-  dependencies:
-    mkdirp "^1.0.4"
-
-"@renovate/pep440@0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@renovate/pep440/-/pep440-0.4.1.tgz#0b0d2c30547f3ecc6ac0083cd7afd15db04979be"
-  integrity sha512-UJR4qqM5l1b84iXd9SS8nPOFfxCWDgL3uOhhYwb15DgC1j8wf5ZLoyTcVUhnCLXG770c999PNLJEUl4wRscvhQ==
-  dependencies:
-    xregexp "4.2.0"
-
-"@sindresorhus/is@2.1.1":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-2.1.1.tgz#ceff6a28a5b4867c2dd4a1ba513de278ccbe8bb1"
-  integrity sha512-/aPsuoj/1Dw/kzhkgz+ES6TxG0zfTMGLwuK2ZG00k/iJzYHTLCE8mVU8EPqEOp/lmxPoq1C1C9RYToRKb2KEfg==
-
-"@sindresorhus/is@^0.14.0":
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
-  integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==
-
-"@sinonjs/commons@^1":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.6.0.tgz#ec7670432ae9c8eb710400d112c201a362d83393"
-  integrity sha512-w4/WHG7C4WWFyE5geCieFJF6MZkbW4VAriol5KlmQXpAQdxvV0p26sqNZOW6Qyw6Y0l9K4g+cHvvczR2sEEpqg==
-  dependencies:
-    type-detect "4.0.8"
-
-"@sinonjs/commons@^1.6.0", "@sinonjs/commons@^1.7.0":
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.0.tgz#f90ffc52a2e519f018b13b6c4da03cbff36ebed6"
-  integrity sha512-qbk9AP+cZUsKdW1GJsBpxPKFmCJ0T8swwzVje3qFd+AkQb74Q/tiuzrdfFg8AD2g5HH/XbE/I8Uc1KYHVYWfhg==
-  dependencies:
-    type-detect "4.0.8"
-
-"@sinonjs/commons@^1.7.2":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.2.tgz#505f55c74e0272b43f6c52d81946bed7058fc0e2"
-  integrity sha512-+DUO6pnp3udV/v2VfUWgaY5BIE1IfT7lLfeDzPVeMT1XKkaAp9LgSI9x5RtrFQoZ9Oi0PgXQQHPaoKu7dCjVxw==
-  dependencies:
-    type-detect "4.0.8"
-
-"@sinonjs/fake-timers@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-6.0.0.tgz#b64b0faadfdd01a6dcf0c4dcdb78438d86fa7dbf"
-  integrity sha512-atR1J/jRXvQAb47gfzSK8zavXy7BcpnYq21ALon0U99etu99vsir0trzIO3wpeLtW+LLVY6X7EkfVTbjGSH8Ww==
-  dependencies:
-    "@sinonjs/commons" "^1.7.0"
-
-"@sinonjs/fake-timers@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz#293674fccb3262ac782c7aadfdeca86b10c75c40"
-  integrity sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==
-  dependencies:
-    "@sinonjs/commons" "^1.7.0"
-
-"@sinonjs/formatio@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/formatio/-/formatio-4.0.1.tgz#50ac1da0c3eaea117ca258b06f4f88a471668bdb"
-  integrity sha512-asIdlLFrla/WZybhm0C8eEzaDNNrzymiTqHMeJl6zPW2881l3uuVRpm0QlRQEjqYWv6CcKMGYME3LbrLJsORBw==
-  dependencies:
-    "@sinonjs/commons" "^1"
-    "@sinonjs/samsam" "^4.2.0"
-
-"@sinonjs/formatio@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/formatio/-/formatio-5.0.1.tgz#f13e713cb3313b1ab965901b01b0828ea6b77089"
-  integrity sha512-KaiQ5pBf1MpS09MuA0kp6KBQt2JUOQycqVG1NZXvzeaXe5LGFqAKueIS0bw4w0P9r7KuBSVdUk5QjXsUdu2CxQ==
-  dependencies:
-    "@sinonjs/commons" "^1"
-    "@sinonjs/samsam" "^5.0.2"
-
-"@sinonjs/samsam@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-4.2.0.tgz#64a9994331cc3da0a0d7cc06cae44faa09cb5f2c"
-  integrity sha512-yG7QbUz38ZPIegfuSMEcbOo0kkLGmPa8a0Qlz4dk7+cXYALDScWjIZzAm/u2+Frh+bcdZF6wZJZwwuJjY0WAjA==
-  dependencies:
-    "@sinonjs/commons" "^1.6.0"
-    array-from "^2.1.1"
-    lodash.get "^4.4.2"
-
-"@sinonjs/samsam@^5.0.2", "@sinonjs/samsam@^5.0.3":
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-5.0.3.tgz#86f21bdb3d52480faf0892a480c9906aa5a52938"
-  integrity sha512-QucHkc2uMJ0pFGjJUDP3F9dq5dx8QIaqISl9QgwLOh6P9yv877uONPGXh/OH/0zmM3tW1JjuJltAZV2l7zU+uQ==
-  dependencies:
-    "@sinonjs/commons" "^1.6.0"
-    lodash.get "^4.4.2"
-    type-detect "^4.0.8"
-
-"@sinonjs/text-encoding@^0.7.1":
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5"
-  integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==
-
-"@snyk/lodash@4.17.15-patch":
-  version "4.17.15-patch"
-  resolved "https://registry.yarnpkg.com/@snyk/lodash/-/lodash-4.17.15-patch.tgz#fb61af14b75d10a20015b40af5d0423944af89dc"
-  integrity sha512-e4+t34bGyjjRnwXwI14hqye9J/nRbG9iwaqTgXWHskm5qC+iK0UrjgYdWXiHJCf3Plbpr+1rpW+4LPzZnCGMhQ==
-
-"@snyk/ruby-semver@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@snyk/ruby-semver/-/ruby-semver-2.2.0.tgz#dfb2f11c52e52f8273ec8750e9327db7c84e679c"
-  integrity sha512-FqUayoVjcyCsQFYPm3DcaCKdFR4xmapUkCGY+bcNBs3jqCUw687PoP9CPQ1Jvtaw5YpfBNl/62jyntsWCeciuA==
-  dependencies:
-    "@snyk/lodash" "4.17.15-patch"
-
-"@szmarczak/http-timer@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
-  integrity sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==
-  dependencies:
-    defer-to-connect "^1.0.1"
-
-"@tootallnate/once@1":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.0.0.tgz#9c13c2574c92d4503b005feca8f2e16cc1611506"
-  integrity sha512-KYyTT/T6ALPkIRd2Ge080X/BsXvy9O0hcWTtMWkPvwAwF99+vn6Dv4GzrFT/Nn1LePr+FFDbRXXlqmsy9lw2zA==
-
-"@types/babel__core@^7.1.0":
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.3.tgz#e441ea7df63cd080dfcd02ab199e6d16a735fc30"
-  integrity sha512-8fBo0UR2CcwWxeX7WIIgJ7lXjasFxoYgRnFHUj+hRvKkpiBJbxhdAPTCY6/ZKM0uxANFVzt4yObSLuTiTnazDA==
-  dependencies:
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
-    "@types/babel__generator" "*"
-    "@types/babel__template" "*"
-    "@types/babel__traverse" "*"
-
-"@types/babel__core@^7.1.7":
-  version "7.1.7"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.7.tgz#1dacad8840364a57c98d0dd4855c6dd3752c6b89"
-  integrity sha512-RL62NqSFPCDK2FM1pSDH0scHpJvsXtZNiYlMB73DgPBaG1E38ZYVL+ei5EkWRbr+KC4YNiAUNBnRj+bgwpgjMw==
-  dependencies:
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
-    "@types/babel__generator" "*"
-    "@types/babel__template" "*"
-    "@types/babel__traverse" "*"
-
-"@types/babel__generator@*":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.0.tgz#f1ec1c104d1bb463556ecb724018ab788d0c172a"
-  integrity sha512-c1mZUu4up5cp9KROs/QAw0gTeHrw/x7m52LcnvMxxOZ03DmLwPV0MlGmlgzV3cnSdjhJOZsj7E7FHeioai+egw==
-  dependencies:
-    "@babel/types" "^7.0.0"
-
-"@types/babel__template@*":
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.0.2.tgz#4ff63d6b52eddac1de7b975a5223ed32ecea9307"
-  integrity sha512-/K6zCpeW7Imzgab2bLkLEbz0+1JlFSrUMdw7KoIIu+IUdu51GWaBZpd3y1VXGVXzynvGa4DaIaxNZHiON3GXUg==
-  dependencies:
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
-
-"@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
-  version "7.0.7"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.0.7.tgz#2496e9ff56196cc1429c72034e07eab6121b6f3f"
-  integrity sha512-CeBpmX1J8kWLcDEnI3Cl2Eo6RfbGvzUctA+CjZUhOKDFbLfcr7fc4usEqLNWetrlJd7RhAkyYe2czXop4fICpw==
-  dependencies:
-    "@babel/types" "^7.3.0"
-
-"@types/color-name@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
-  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
-
-"@types/events@*":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
-  integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
-
-"@types/glob@^7.1.1":
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
-  integrity sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==
-  dependencies:
-    "@types/events" "*"
-    "@types/minimatch" "*"
-    "@types/node" "*"
-
-"@types/graceful-fs@^4.1.2":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.3.tgz#039af35fe26bec35003e8d86d2ee9c586354348f"
-  integrity sha512-AiHRaEB50LQg0pZmm659vNBb9f4SJ0qrAnteuzhSeAUcJKxoYgEnprg/83kppCnc2zvtCKbdZry1a5pVY3lOTQ==
-  dependencies:
-    "@types/node" "*"
-
-"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
-  integrity sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==
-
-"@types/istanbul-lib-report@*":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz#e5471e7fa33c61358dd38426189c037a58433b8c"
-  integrity sha512-3BUTyMzbZa2DtDI2BkERNC6jJw2Mr2Y0oGI7mRxYNBPxppbtEK1F66u3bKwU2g+wxwWI7PAoRpJnOY1grJqzHg==
-  dependencies:
-    "@types/istanbul-lib-coverage" "*"
-
-"@types/istanbul-reports@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
-  integrity sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==
-  dependencies:
-    "@types/istanbul-lib-coverage" "*"
-    "@types/istanbul-lib-report" "*"
-
-"@types/minimatch@*":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
-  integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
-
-"@types/minimist@1.2.0", "@types/minimist@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.0.tgz#69a23a3ad29caf0097f06eda59b361ee2f0639f6"
-  integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=
-
-"@types/node@*":
-  version "12.7.9"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.7.9.tgz#da0210f91096aa67138cf5afd04c4d629f8a406a"
-  integrity sha512-P57oKTJ/vYivL2BCfxCC5tQjlS8qW31pbOL6qt99Yrjm95YdHgNZwjrTTjMBh+C2/y6PXIX4oz253+jUzxKKfQ==
-
-"@types/normalize-package-data@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
-  integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
-
-"@types/prettier@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.0.0.tgz#dc85454b953178cc6043df5208b9e949b54a3bc4"
-  integrity sha512-/rM+sWiuOZ5dvuVzV37sUuklsbg+JPOP8d+nNFlo2ZtfpzPiPvh1/gc8liWOLBqe+sR+ZM7guPaIcTt6UZTo7Q==
-
-"@types/q@^1.5.1":
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
-  integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
-
-"@types/redis@^2.8.14":
-  version "2.8.21"
-  resolved "https://registry.yarnpkg.com/@types/redis/-/redis-2.8.21.tgz#4bd4a56747ee57156e50a4389ece0f79f1dfeac6"
-  integrity sha512-EcqWrhXnzlo2z7AwZG3jEuwGcs/QZoab1lBbOHRfV/ezzVrczpkFrCoQorWp3dvp7pfOJtAryxBFou0zQFYpDQ==
-  dependencies:
-    "@types/node" "*"
-
-"@types/stack-utils@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
-  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
-
-"@types/yargs-parser@*":
-  version "13.1.0"
-  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
-  integrity sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==
-
-"@types/yargs@^13.0.0":
-  version "13.0.3"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.3.tgz#76482af3981d4412d65371a318f992d33464a380"
-  integrity sha512-K8/LfZq2duW33XW/tFwEAfnZlqIfVsoyRB3kfXdPXYhl0nfM8mmh7GS0jg7WrX2Dgq/0Ha/pR1PaR+BvmWwjiQ==
-  dependencies:
-    "@types/yargs-parser" "*"
-
-"@types/yargs@^15.0.0":
-  version "15.0.4"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.4.tgz#7e5d0f8ca25e9d5849f2ea443cf7c402decd8299"
-  integrity sha512-9T1auFmbPZoxHz0enUFlUuKRy3it01R+hlggyVUMtnCTQRunsQYifnSGb8hET4Xo8yiC0o0r1paW3ud5+rbURg==
-  dependencies:
-    "@types/yargs-parser" "*"
-
-"@yarnpkg/lockfile@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
-  integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
-
-JSONSelect@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/JSONSelect/-/JSONSelect-0.4.0.tgz#a08edcc67eb3fcbe99ed630855344a0cf282bb8d"
-  integrity sha1-oI7cxn6z/L6Z7WMIVTRKDPKCu40=
-
-JSONStream@^1.0.3:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
-  integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
-  dependencies:
-    jsonparse "^1.2.0"
-    through ">=2.2.7 <3"
-
-"JSV@>= 4.0.x", JSV@^4.0.x:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/JSV/-/JSV-4.0.2.tgz#d077f6825571f82132f9dffaed587b4029feff57"
-  integrity sha1-0Hf2glVx+CEy+d/67Vh7QCn+/1c=
-
-abab@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.2.tgz#a2fba1b122c69a85caa02d10f9270c7219709a9d"
-  integrity sha512-2scffjvioEmNz0OyDSLGWDfKCVwaKc6l9Pm9kOIREU13ClXZvHpg/nRL5xyjSSSLhOnXqft2HpsAzNEEA8cFFg==
-
-abab@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
-  integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==
-
-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
-
-abbrev@1.0.x:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
-  integrity sha1-kbR5JYinc4wl813W9jdSovh3YTU=
-
-accepts@~1.2.12, accepts@~1.2.13:
-  version "1.2.13"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.2.13.tgz#e5f1f3928c6d95fd96558c36ec3d9d0de4a6ecea"
-  integrity sha1-5fHzkoxtlf2WVYw27D2dDeSm7Oo=
-  dependencies:
-    mime-types "~2.1.6"
-    negotiator "0.5.3"
-
-accepts@~1.3.0, accepts@~1.3.4, accepts@~1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
-  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
-  dependencies:
-    mime-types "~2.1.24"
-    negotiator "0.6.2"
-
-acorn-globals@6.0.0, acorn-globals@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
-  integrity sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==
-  dependencies:
-    acorn "^7.1.1"
-    acorn-walk "^7.1.1"
-
-acorn-globals@^4.1.0:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
-  integrity sha512-clfQEh21R+D0leSbUdWf3OcfqyaCSAQ8Ryq00bofSekfr9W8u1jyYZo6ir0xu9Gtcf7BjcHJpnbZH7JOCpP60A==
-  dependencies:
-    acorn "^6.0.1"
-    acorn-walk "^6.0.1"
-
-acorn-jsx@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.2.tgz#84b68ea44b373c4f8686023a551f61a21b7c4a4f"
-  integrity sha512-tiNTrP1MP0QrChmD2DdupCr6HWSFeKVw5d/dHTu4Y7rkAkRhU/Dt7dphAfIUyxtHpl/eBVip5uTNSpQJHylpAw==
-
-acorn-jsx@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
-  integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
-
-acorn-node@^1.2.0, acorn-node@^1.3.0, acorn-node@^1.5.2, acorn-node@^1.6.1:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
-  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
-  dependencies:
-    acorn "^7.0.0"
-    acorn-walk "^7.0.0"
-    xtend "^4.0.2"
-
-acorn-walk@^6.0.1:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
-  integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
-
-acorn-walk@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.0.0.tgz#c8ba6f0f1aac4b0a9e32d1f0af12be769528f36b"
-  integrity sha512-7Bv1We7ZGuU79zZbb6rRqcpxo3OY+zrdtloZWoyD8fmGX+FeXRjE+iuGkZjSXLVovLzrsvMGMy0EkwA0E0umxg==
-
-acorn-walk@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.1.1.tgz#345f0dffad5c735e7373d2fec9a1023e6a44b83e"
-  integrity sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==
-
-acorn@5.X, acorn@^5.0.3, acorn@^5.5.3:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
-  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
-
-acorn@^6.0.1:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.3.0.tgz#0087509119ffa4fc0a0041d1e93a417e68cb856e"
-  integrity sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==
-
-acorn@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c"
-  integrity sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==
-
-acorn@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
-  integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
-
-active-x-obfuscator@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/active-x-obfuscator/-/active-x-obfuscator-0.0.1.tgz#089b89b37145ff1d9ec74af6530be5526cae1f1a"
-  integrity sha1-CJuJs3FF/x2ex0r2UwvlUmyuHxo=
-  dependencies:
-    zeparser "0.0.5"
-
-adm-zip@~0.4.3:
-  version "0.4.13"
-  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.13.tgz#597e2f8cc3672151e1307d3e95cddbc75672314a"
-  integrity sha512-fERNJX8sOXfel6qCBCMPvZLzENBEhZTzKqg6vrOW5pvoEaQuJhRU4ndTAh6lHOxn1I6jnz2NHra56ZODM751uw==
-
-after@0.8.2, after@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
-  integrity sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=
-
-agent-base@5:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
-  integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
-
-agent-base@6:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.0.tgz#5d0101f19bbfaed39980b22ae866de153b93f09a"
-  integrity sha512-j1Q7cSCqN+AwrmDd+pzgqc0/NpC655x2bUf5ZjRIO77DcNBFmh+OgRNzF6OKdCC9RSCb19fGd99+bhXFdkRNqw==
-  dependencies:
-    debug "4"
-
-agent-base@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
-  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
-  dependencies:
-    es6-promisify "^5.0.0"
-
-aggregate-error@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.0.0.tgz#5b5a3c95e9095f311c9ab16c19fb4f3527cd3f79"
-  integrity sha512-yKD9kEoJIR+2IFqhMwayIBgheLYbB3PS2OBhWae1L/ODTd/JF/30cW0bc9TqzRL3k4U41Dieu3BF4I29p8xesA==
-  dependencies:
-    clean-stack "^2.0.0"
-    indent-string "^3.2.0"
-
-airbnb-prop-types@^2.10.0, airbnb-prop-types@^2.8.1:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz#5287820043af1eb469f5b0af0d6f70da6c52aaef"
-  integrity sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA==
-  dependencies:
-    array.prototype.find "^2.1.0"
-    function.prototype.name "^1.1.1"
-    has "^1.0.3"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object.assign "^4.1.0"
-    object.entries "^1.1.0"
-    prop-types "^15.7.2"
-    prop-types-exact "^1.2.0"
-    react-is "^16.9.0"
-
-ajv@^6.10.0, ajv@^6.10.2, ajv@^6.5.5:
-  version "6.10.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.2.tgz#d3cea04d6b017b2894ad69040fec8b623eb4bd52"
-  integrity sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==
-  dependencies:
-    fast-deep-equal "^2.0.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
-
-alphanum-sort@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
-  integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
-
-amdefine@>=0.0.4:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
-  integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
-
-amphtml-validator@1.0.31:
-  version "1.0.31"
-  resolved "https://registry.yarnpkg.com/amphtml-validator/-/amphtml-validator-1.0.31.tgz#cf926ad4bbefd720b4cbeef6221f794f35849ac6"
-  integrity sha512-GEVZeUJqm2ssLLrERi3Zeyk6TEQlvMGRxKqkgQMt2IvyYiGEWLbwp5K6UfX6cD9aCc1xqbk9n+rDBi4HZv3uOQ==
-  dependencies:
-    colors "1.2.5"
-    commander "2.15.1"
-    promise "8.0.1"
-
-ansi-align@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
-  integrity sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==
-  dependencies:
-    string-width "^3.0.0"
-
-ansi-colors@1.1.0, ansi-colors@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-1.1.0.tgz#6374b4dd5d4718ff3ce27a671a3b1cad077132a9"
-  integrity sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==
-  dependencies:
-    ansi-wrap "^0.1.0"
-
-ansi-colors@4.1.1, ansi-colors@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
-
-ansi-colors@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-2.0.5.tgz#5da37825fef3e75f3bda47f760d64bfd10e15e10"
-  integrity sha512-yAdfUZ+c2wetVNIFsNRn44THW+Lty6S5TwMpUfLA/UaGhiXbBv/F8E60/1hMLd0cnF/CDoWH8vzVaI5bAcHCjw==
-
-ansi-cyan@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-cyan/-/ansi-cyan-0.1.1.tgz#538ae528af8982f28ae30d86f2f17456d2609873"
-  integrity sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-escapes@^3.0.0, ansi-escapes@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
-  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
-
-ansi-escapes@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.2.1.tgz#4dccdb846c3eee10f6d64dea66273eab90c37228"
-  integrity sha512-Cg3ymMAdN10wOk/VYfLV7KCQyv7EDirJ64500sU7n9UlmioEtDuU5Gd+hj73hXSU/ex7tHJSssmyftDdkMLO8Q==
-  dependencies:
-    type-fest "^0.5.2"
-
-ansi-gray@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251"
-  integrity sha1-KWLPVOyXksSFEKPetSRDaGHvclE=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-red@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
-  integrity sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-regex@^0.2.0, ansi-regex@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-0.2.1.tgz#0d8e946967a3d8143f93e24e298525fc1b2235f9"
-  integrity sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=
-
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
-  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
-
-ansi-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
-  integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
-
-ansi-regex@^4.0.0, ansi-regex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
-  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
-
-ansi-regex@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
-  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
-
-ansi-styles@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.1.0.tgz#eaecbf66cd706882760b2f4691582b8f55d7a7de"
-  integrity sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94=
-
-ansi-styles@^2.1.0, ansi-styles@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
-  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
-
-ansi-styles@^3.2.0, ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
-ansi-styles@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.0.tgz#5681f0dcf7ae5880a7841d8831c4724ed9cc0172"
-  integrity sha512-7kFQgnEaMdRtwf6uSfUnVr9gSGC7faurn+J/Mv90/W+iTtN0405/nLdopfMWwchyxhbGYl6TC4Sccn9TUkGAgg==
-  dependencies:
-    "@types/color-name" "^1.1.1"
-    color-convert "^2.0.1"
-
-ansi-styles@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.1.0.tgz#d3ba8047b818293eaaa7978321dd61bff9842cfc"
-  integrity sha512-Qts4KCLKG+waHc9C4m07weIY8qyeixoS0h6RnbsNVD6Fw+pEZGW3vTyObL3WXpE09Mq4Oi7/lBEyLmOiLtlYWQ==
-  dependencies:
-    color-convert "^2.0.1"
-
-ansi-styles@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178"
-  integrity sha1-yxAt8cVvUSPquLZ817mAJ6AnkXg=
-
-ansi-wrap@0.1.0, ansi-wrap@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
-  integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
-
-any-promise@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
-  integrity sha1-q8av7tzqUugJzcA3au0845Y10X8=
-
-anymatch@^1.3.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
-  integrity sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==
-  dependencies:
-    micromatch "^2.1.5"
-    normalize-path "^2.0.0"
-
-anymatch@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
-  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
-  dependencies:
-    micromatch "^3.1.4"
-    normalize-path "^2.1.1"
-
-anymatch@^3.0.3, anymatch@~3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
-  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
-  dependencies:
-    normalize-path "^3.0.0"
-    picomatch "^2.0.4"
-
-aphrodite@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/aphrodite/-/aphrodite-1.2.5.tgz#8358c36c80bb03aee9b97165aaa70186225b4983"
-  integrity sha1-g1jDbIC7A67puXFlqqcBhiJbSYM=
-  dependencies:
-    asap "^2.0.3"
-    inline-style-prefixer "^3.0.1"
-    string-hash "^1.1.3"
-
-append-buffer@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/append-buffer/-/append-buffer-1.0.2.tgz#d8220cf466081525efea50614f3de6514dfa58f1"
-  integrity sha1-2CIM9GYIFSXv6lBhTz3mUU36WPE=
-  dependencies:
-    buffer-equal "^1.0.0"
-
-append-field@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/append-field/-/append-field-1.0.0.tgz#1e3440e915f0b1203d23748e78edd7b9b5b43e56"
-  integrity sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY=
-
-aproba@^1.0.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
-  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
-
-archy@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/archy/-/archy-1.0.0.tgz#f9c8c13757cc1dd7bc379ac77b2c62a5c2868c40"
-  integrity sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=
-
-are-we-there-yet@~1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
-  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^2.0.6"
-
-argparse@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
-  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
-  dependencies:
-    sprintf-js "~1.0.2"
-
-argv@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/argv/-/argv-0.0.2.tgz#ecbd16f8949b157183711b1bda334f37840185ab"
-  integrity sha1-7L0W+JSbFXGDcRsb2jNPN4QBhas=
-
-arr-diff@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-1.1.0.tgz#687c32758163588fef7de7b36fabe495eb1a399a"
-  integrity sha1-aHwydYFjWI/vfeezb6vklesaOZo=
-  dependencies:
-    arr-flatten "^1.0.1"
-    array-slice "^0.2.3"
-
-arr-diff@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
-  integrity sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=
-  dependencies:
-    arr-flatten "^1.0.1"
-
-arr-diff@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
-  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
-
-arr-filter@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/arr-filter/-/arr-filter-1.1.2.tgz#43fdddd091e8ef11aa4c45d9cdc18e2dff1711ee"
-  integrity sha1-Q/3d0JHo7xGqTEXZzcGOLf8XEe4=
-  dependencies:
-    make-iterator "^1.0.0"
-
-arr-flatten@^1.0.1, arr-flatten@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
-  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
-
-arr-map@^2.0.0, arr-map@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/arr-map/-/arr-map-2.0.2.tgz#3a77345ffc1cf35e2a91825601f9e58f2e24cac4"
-  integrity sha1-Onc0X/wc814qkYJWAfnljy4kysQ=
-  dependencies:
-    make-iterator "^1.0.0"
-
-arr-union@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-2.1.0.tgz#20f9eab5ec70f5c7d215b1077b1c39161d292c7d"
-  integrity sha1-IPnqtexw9cfSFbEHexw5Fh0pLH0=
-
-arr-union@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
-  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
-
-array-each@^1.0.0, array-each@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/array-each/-/array-each-1.0.1.tgz#a794af0c05ab1752846ee753a1f211a05ba0c44f"
-  integrity sha1-p5SvDAWrF1KEbudTofIRoFugxE8=
-
-array-equal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
-  integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
-
-array-filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
-
-array-find-index@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
-  integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
-
-array-flatten@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
-  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
-
-array-flatten@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
-  integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
-
-array-from@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195"
-  integrity sha1-z+nYwmYoudxa7MYqn12PHzUsEZU=
-
-array-includes@^3.0.3, array-includes@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.1.tgz#cdd67e6852bdf9c1215460786732255ed2459348"
-  integrity sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0"
-    is-string "^1.0.5"
-
-array-initial@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/array-initial/-/array-initial-1.1.0.tgz#2fa74b26739371c3947bd7a7adc73be334b3d795"
-  integrity sha1-L6dLJnOTccOUe9enrcc74zSz15U=
-  dependencies:
-    array-slice "^1.0.0"
-    is-number "^4.0.0"
-
-array-last@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/array-last/-/array-last-1.3.0.tgz#7aa77073fec565ddab2493f5f88185f404a9d336"
-  integrity sha512-eOCut5rXlI6aCOS7Z7kCplKRKyiFQ6dHFBem4PwlwKeNFk2/XxTrhRh5T9PyaEWGy/NHTZWbY+nsZlNFJu9rYg==
-  dependencies:
-    is-number "^4.0.0"
-
-array-slice@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
-  integrity sha1-3Tz7gO15c6dRF82sabC5nshhhvU=
-
-array-slice@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-1.1.0.tgz#e368ea15f89bc7069f7ffb89aec3a6c7d4ac22d4"
-  integrity sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==
-
-array-sort@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-sort/-/array-sort-1.0.0.tgz#e4c05356453f56f53512a7d1d6123f2c54c0a88a"
-  integrity sha512-ihLeJkonmdiAsD7vpgN3CRcx2J2S0TiYW+IS/5zHBI7mKUq3ySvBdzzBfD236ubDBQFiiyG3SWCPc+msQ9KoYg==
-  dependencies:
-    default-compare "^1.0.0"
-    get-value "^2.0.6"
-    kind-of "^5.0.2"
-
-array-union@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
-  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
-  dependencies:
-    array-uniq "^1.0.1"
-
-array-union@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
-  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
-
-array-uniq@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
-  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
-
-array-uniq@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-2.1.0.tgz#46603d5e28e79bfd02b046fcc1d77c6820bd8e98"
-  integrity sha512-bdHxtev7FN6+MXI1YFW0Q8mQ8dTJc2S8AMfju+ZR77pbg2yAdVyDlwkaUI7Har0LyOMRFPHrJ9lYdyjZZswdlQ==
-
-array-unique@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
-  integrity sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=
-
-array-unique@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
-  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
-
-array.prototype.find@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.1.0.tgz#630f2eaf70a39e608ac3573e45cf8ccd0ede9ad7"
-  integrity sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.13.0"
-
-array.prototype.flat@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz#0de82b426b0318dbfdb940089e38b043d37f6c7b"
-  integrity sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-array.prototype.flatmap@^1.2.1:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz#1c13f84a178566042dd63de4414440db9222e443"
-  integrity sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-
-array.prototype.map@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.map/-/array.prototype.map-1.0.2.tgz#9a4159f416458a23e9483078de1106b2ef68f8ec"
-  integrity sha512-Az3OYxgsa1g7xDYp86l0nnN4bcmuEITGe1rbdEBVkrqkzMgDcbdQ2R7r41pNzti+4NMces3H8gMmuioZUilLgw==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    es-array-method-boxes-properly "^1.0.0"
-    is-string "^1.0.4"
-
-arraybuffer.slice@~0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
-  integrity sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==
-
-arrify@^1.0.0, arrify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
-  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
-
-arrify@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
-  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
-
-asap@^2.0.3, asap@~2.0.3:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
-
-asn1.js@^4.0.0:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
-  integrity sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==
-  dependencies:
-    bn.js "^4.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-
-asn1@~0.2.3:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
-  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
-  dependencies:
-    safer-buffer "~2.1.0"
-
-assert-plus@1.0.0, assert-plus@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
-  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
-
-assert@^1.4.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/assert/-/assert-1.5.0.tgz#55c109aaf6e0aefdb3dc4b71240c70bf574b18eb"
-  integrity sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==
-  dependencies:
-    object-assign "^4.1.1"
-    util "0.10.3"
-
-assertion-error@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
-  integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
-
-assign-symbols@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
-  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
-
-ast-replace@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/ast-replace/-/ast-replace-1.1.3.tgz#b9fc248a63fdc67a2656bef6f65d4c1d014d9a8d"
-  integrity sha1-ufwkimP9xnomVr729l1MHQFNmo0=
-  dependencies:
-    ast-test "^1.1.1"
-    ast-types "^0.6.12"
-    is-function "^1.0.1"
-
-ast-test@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ast-test/-/ast-test-1.1.1.tgz#f025cbf40da7073a5d1024423df7e43c2ad2dcc0"
-  integrity sha1-8CXL9A2nBzpdECRCPffkPCrS3MA=
-  dependencies:
-    ast-types "^0.6.14"
-
-ast-types@^0.6.12, ast-types@^0.6.14:
-  version "0.6.16"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.6.16.tgz#04205b72eddd195a8feaa081f11d0294a24ded93"
-  integrity sha1-BCBbcu3dGVqP6qCB8R0ClKJN7ZM=
-
-astral-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
-  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
-
-async-done@^1.2.0, async-done@^1.2.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/async-done/-/async-done-1.3.2.tgz#5e15aa729962a4b07414f528a88cdf18e0b290a2"
-  integrity sha512-uYkTP8dw2og1tu1nmza1n1CMW0qb8gWWlwqMmLb7MhBVs4BXrFziT6HXUd+/RlRA/i4H9AkofYloUbs1fwMqlw==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.2"
-    process-nextick-args "^2.0.0"
-    stream-exhaust "^1.0.1"
-
-async-each@^1.0.0, async-each@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
-  integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
-
-async-limiter@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
-  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
-
-async-settle@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/async-settle/-/async-settle-1.0.0.tgz#1d0a914bb02575bec8a8f3a74e5080f72b2c0c6b"
-  integrity sha1-HQqRS7Aldb7IqPOnTlCA9yssDGs=
-  dependencies:
-    async-done "^1.2.2"
-
-async@1.x:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
-  integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
-
-async@^2.1.2:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
-  dependencies:
-    lodash "^4.17.14"
-
-async@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"
-  integrity sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==
-
-async@~0.2.9:
-  version "0.2.10"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
-  integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
-
-asynckit@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
-  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
-
-at-least-node@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
-  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
-
-atob@2.1.2, atob@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
-  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
-
-autoprefixer@9.8.0:
-  version "9.8.0"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.0.tgz#68e2d2bef7ba4c3a65436f662d0a56a741e56511"
-  integrity sha512-D96ZiIHXbDmU02dBaemyAg53ez+6F5yZmapmgKcjm35yEe1uVDYI8hGW3VYoGRaG290ZFf91YxHrR518vC0u/A==
-  dependencies:
-    browserslist "^4.12.0"
-    caniuse-lite "^1.0.30001061"
-    chalk "^2.4.2"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^7.0.30"
-    postcss-value-parser "^4.1.0"
-
-ava@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/ava/-/ava-2.4.0.tgz#a3bd8b0e01d8826004c91de375eb2313ba5237c3"
-  integrity sha512-CQWtzZZZeU2g4StojRv6MO9RIRi4sLxGSB9+3C3hv0ttUEG1tkJLTLyrBQeFS4WEeK12Z4ovE3f2iPVhSy8elA==
-  dependencies:
-    "@ava/babel-preset-stage-4" "^4.0.0"
-    "@ava/babel-preset-transform-test-files" "^6.0.0"
-    "@babel/core" "^7.6.0"
-    "@babel/generator" "^7.6.0"
-    "@concordance/react" "^2.0.0"
-    ansi-escapes "^4.2.1"
-    ansi-styles "^4.1.0"
-    arr-flatten "^1.1.0"
-    array-union "^2.1.0"
-    array-uniq "^2.1.0"
-    arrify "^2.0.1"
-    bluebird "^3.5.5"
-    chalk "^2.4.2"
-    chokidar "^3.0.2"
-    chunkd "^1.0.0"
-    ci-parallel-vars "^1.0.0"
-    clean-stack "^2.2.0"
-    clean-yaml-object "^0.1.0"
-    cli-cursor "^3.1.0"
-    cli-truncate "^2.0.0"
-    code-excerpt "^2.1.1"
-    common-path-prefix "^1.0.0"
-    concordance "^4.0.0"
-    convert-source-map "^1.6.0"
-    currently-unhandled "^0.4.1"
-    debug "^4.1.1"
-    del "^4.1.1"
-    dot-prop "^5.1.0"
-    emittery "^0.4.1"
-    empower-core "^1.2.0"
-    equal-length "^1.0.0"
-    escape-string-regexp "^2.0.0"
-    esm "^3.2.25"
-    figures "^3.0.0"
-    find-up "^4.1.0"
-    get-port "^5.0.0"
-    globby "^10.0.1"
-    ignore-by-default "^1.0.0"
-    import-local "^3.0.2"
-    indent-string "^4.0.0"
-    is-ci "^2.0.0"
-    is-error "^2.2.2"
-    is-observable "^2.0.0"
-    is-plain-object "^3.0.0"
-    is-promise "^2.1.0"
-    lodash "^4.17.15"
-    loud-rejection "^2.1.0"
-    make-dir "^3.0.0"
-    matcher "^2.0.0"
-    md5-hex "^3.0.1"
-    meow "^5.0.0"
-    micromatch "^4.0.2"
-    ms "^2.1.2"
-    observable-to-promise "^1.0.0"
-    ora "^3.4.0"
-    package-hash "^4.0.0"
-    pkg-conf "^3.1.0"
-    plur "^3.1.1"
-    pretty-ms "^5.0.0"
-    require-precompiled "^0.1.0"
-    resolve-cwd "^3.0.0"
-    slash "^3.0.0"
-    source-map-support "^0.5.13"
-    stack-utils "^1.0.2"
-    strip-ansi "^5.2.0"
-    strip-bom-buf "^2.0.0"
-    supertap "^1.0.0"
-    supports-color "^7.0.0"
-    trim-off-newlines "^1.0.1"
-    trim-right "^1.0.1"
-    unique-temp-dir "^1.0.0"
-    update-notifier "^3.0.1"
-    write-file-atomic "^3.0.0"
-
-aws-sdk@2.686.0:
-  version "2.686.0"
-  resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.686.0.tgz#c58c3874eff4c76c763d137df617e87971321eb7"
-  integrity sha512-QhYhJ5y8tUG5SlmY3CSf9RBaa3EFbta28oarOyiwceHKmY80cMCafRI1YypT6CVDx/q91dbnSNQfWhs0cZPbBQ==
-  dependencies:
-    buffer "4.9.1"
-    events "1.1.1"
-    ieee754 "1.1.13"
-    jmespath "0.15.0"
-    querystring "0.2.0"
-    sax "1.2.1"
-    url "0.10.3"
-    uuid "3.3.2"
-    xml2js "0.4.19"
-
-aws-sign2@~0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
-  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
-
-aws4@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
-  integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
-
-azure-devops-node-api@10.1.1:
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/azure-devops-node-api/-/azure-devops-node-api-10.1.1.tgz#9016d8935316fff260f5f8fafd81d0caff90a19e"
-  integrity sha512-P4Hyrh/+Nzc2KXQk73z72/GsenSWIH5o8uiyELqykJYs9TWTVCxVwghoR7lPeiY6QVoXkq2S2KtvAgi5fyjl9w==
-  dependencies:
-    tunnel "0.0.6"
-    typed-rest-client "^1.7.3"
-    underscore "1.8.3"
-
-babel-check-duplicated-nodes@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/babel-check-duplicated-nodes/-/babel-check-duplicated-nodes-1.0.0.tgz#a0b9fc7796abb0b69cf5f6f3f91d0f8d06e2aeeb"
-  integrity sha512-luUr6B28RzichAHdhCaGY6z53sm4+PAxzSedNlhZ9LtdW9txpR3G2Y5983iOnBosky88V08LeaUiDB/NR7vWvQ==
-
-babel-code-frame@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
-  integrity sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=
-  dependencies:
-    chalk "^1.1.3"
-    esutils "^2.0.2"
-    js-tokens "^3.0.2"
-
-babel-eslint@10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
-  integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.7.0"
-    "@babel/traverse" "^7.7.0"
-    "@babel/types" "^7.7.0"
-    eslint-visitor-keys "^1.0.0"
-    resolve "^1.12.0"
-
-babel-jest@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
-  integrity sha512-ntuddfyiN+EhMw58PTNL1ph4C9rECiQXjI4nMMBKBaNjXvqLdkXpPRcMSr4iyBrJg/+wz9brFUD6RhOAT6r4Iw==
-  dependencies:
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/babel__core" "^7.1.0"
-    babel-plugin-istanbul "^5.1.0"
-    babel-preset-jest "^24.9.0"
-    chalk "^2.4.2"
-    slash "^2.0.0"
-
-babel-jest@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.0.1.tgz#450139ce4b6c17174b136425bda91885c397bc46"
-  integrity sha512-Z4GGmSNQ8pX3WS1O+6v3fo41YItJJZsVxG5gIQ+HuB/iuAQBJxMTHTwz292vuYws1LnHfwSRgoqI+nxdy/pcvw==
-  dependencies:
-    "@jest/transform" "^26.0.1"
-    "@jest/types" "^26.0.1"
-    "@types/babel__core" "^7.1.7"
-    babel-plugin-istanbul "^6.0.0"
-    babel-preset-jest "^26.0.0"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    slash "^3.0.0"
-
-babel-messages@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
-  integrity sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=
-  dependencies:
-    babel-runtime "^6.22.0"
-
-babel-plugin-dynamic-import-node@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
-  integrity sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==
-  dependencies:
-    object.assign "^4.1.0"
-
-babel-plugin-dynamic-import-node@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
-  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
-  dependencies:
-    object.assign "^4.1.0"
-
-babel-plugin-espower@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-espower/-/babel-plugin-espower-3.0.1.tgz#180db17126f88e754105b8b5216d21e520a6bd4e"
-  integrity sha512-Ms49U7VIAtQ/TtcqRbD6UBmJBUCSxiC3+zPc+eGqxKUIFO1lTshyEDRUjhoAbd2rWfwYf3cZ62oXozrd8W6J0A==
-  dependencies:
-    "@babel/generator" "^7.0.0"
-    "@babel/parser" "^7.0.0"
-    call-matcher "^1.0.0"
-    core-js "^2.0.0"
-    espower-location-detector "^1.0.0"
-    espurify "^1.6.0"
-    estraverse "^4.1.1"
-
-babel-plugin-filter-imports@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-filter-imports/-/babel-plugin-filter-imports-4.0.0.tgz#068f8da15236a96a9602c36dc6f4a6eeca70a4f4"
-  integrity sha512-jDLlxI8QnfKd7PtieH6pl4tZJzymzfCDCPGdTq/grgbiYAikwDPp/oL0IlFJn0HQjLpcLkyYhPKkUVneRESw5w==
-  dependencies:
-    "@babel/types" "^7.7.2"
-    lodash "^4.17.15"
-
-babel-plugin-istanbul@6.0.0, babel-plugin-istanbul@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
-  integrity sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@istanbuljs/load-nyc-config" "^1.0.0"
-    "@istanbuljs/schema" "^0.1.2"
-    istanbul-lib-instrument "^4.0.0"
-    test-exclude "^6.0.0"
-
-babel-plugin-istanbul@^5.1.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
-  integrity sha512-5LphC0USA8t4i1zCtjbbNb6jJj/9+X6P37Qfirc/70EQ34xKlMW+a1RHGwxGI+SwWpNwZ27HqvzAobeqaXwiZw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    find-up "^3.0.0"
-    istanbul-lib-instrument "^3.3.0"
-    test-exclude "^5.2.3"
-
-babel-plugin-jest-hoist@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz#4f837091eb407e01447c8843cbec546d0002d756"
-  integrity sha512-2EMA2P8Vp7lG0RAzr4HXqtYwacfMErOuv1U3wrvxHX6rD1sV6xS3WXG3r8TRQ2r6w8OhvSdWt+z41hQNwNm3Xw==
-  dependencies:
-    "@types/babel__traverse" "^7.0.6"
-
-babel-plugin-jest-hoist@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.0.0.tgz#fd1d35f95cf8849fc65cb01b5e58aedd710b34a8"
-  integrity sha512-+AuoehOrjt9irZL7DOt2+4ZaTM6dlu1s5TTS46JBa0/qem4dy7VNW3tMb96qeEqcIh20LD73TVNtmVEeymTG7w==
-  dependencies:
-    "@babel/template" "^7.3.3"
-    "@babel/types" "^7.3.3"
-    "@types/babel__traverse" "^7.0.6"
-
-babel-plugin-minify-replace@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-minify-replace/-/babel-plugin-minify-replace-0.5.0.tgz#d3e2c9946c9096c070efc96761ce288ec5c3f71c"
-  integrity sha512-aXZiaqWDNUbyNNNpWs/8NyST+oU7QTpK7J9zFEFSA0eOmtUNMU3fczlTTTlnCxHmq/jYNFEmkkSG3DDBtW3Y4Q==
-
-babel-plugin-transform-es2015-modules-commonjs@6.26.2:
-  version "6.26.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
-  integrity sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==
-  dependencies:
-    babel-plugin-transform-strict-mode "^6.24.1"
-    babel-runtime "^6.26.0"
-    babel-template "^6.26.0"
-    babel-types "^6.26.0"
-
-babel-plugin-transform-strict-mode@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
-  integrity sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-types "^6.24.1"
-
-babel-preset-current-node-syntax@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-0.1.2.tgz#fb4a4c51fe38ca60fede1dc74ab35eb843cb41d6"
-  integrity sha512-u/8cS+dEiK1SFILbOC8/rUI3ml9lboKuuMvZ/4aQnQmhecQAgPw5ew066C1ObnEAUmlx7dv/s2z52psWEtLNiw==
-  dependencies:
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-bigint" "^7.8.3"
-    "@babel/plugin-syntax-class-properties" "^7.8.3"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-
-babel-preset-jest@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc"
-  integrity sha512-izTUuhE4TMfTRPF92fFwD2QfdXaZW08qvWTFCI51V8rW5x00UuPgc3ajRoWofXOuxjfcOM5zzSYsQS3H8KGCAg==
-  dependencies:
-    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
-    babel-plugin-jest-hoist "^24.9.0"
-
-babel-preset-jest@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-26.0.0.tgz#1eac82f513ad36c4db2e9263d7c485c825b1faa6"
-  integrity sha512-9ce+DatAa31DpR4Uir8g4Ahxs5K4W4L8refzt+qHWQANb6LhGcAEfIFgLUwk67oya2cCUd6t4eUMtO/z64ocNw==
-  dependencies:
-    babel-plugin-jest-hoist "^26.0.0"
-    babel-preset-current-node-syntax "^0.1.2"
-
-babel-runtime@^6.22.0, babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
-babel-template@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
-  integrity sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=
-  dependencies:
-    babel-runtime "^6.26.0"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    lodash "^4.17.4"
-
-babel-traverse@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
-  integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=
-  dependencies:
-    babel-code-frame "^6.26.0"
-    babel-messages "^6.23.0"
-    babel-runtime "^6.26.0"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-    debug "^2.6.8"
-    globals "^9.18.0"
-    invariant "^2.2.2"
-    lodash "^4.17.4"
-
-babel-types@^6.24.1, babel-types@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
-  integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
-  dependencies:
-    babel-runtime "^6.26.0"
-    esutils "^2.0.2"
-    lodash "^4.17.4"
-    to-fast-properties "^1.0.3"
-
-babelify@10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/babelify/-/babelify-10.0.0.tgz#fe73b1a22583f06680d8d072e25a1e0d1d1d7fb5"
-  integrity sha512-X40FaxyH7t3X+JFAKvb1H9wooWKLRCi8pg3m8poqtdZaIng+bjzp9RvKQCvRjF9isHiPkXspbbXT/zwXLtwgwg==
-
-babylon@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
-  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
-
-bach@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/bach/-/bach-1.2.0.tgz#4b3ce96bf27134f79a1b414a51c14e34c3bd9880"
-  integrity sha1-Szzpa/JxNPeaG0FKUcFONMO9mIA=
-  dependencies:
-    arr-filter "^1.1.1"
-    arr-flatten "^1.0.1"
-    arr-map "^2.0.0"
-    array-each "^1.0.0"
-    array-initial "^1.0.0"
-    array-last "^1.1.1"
-    async-done "^1.2.2"
-    async-settle "^1.0.0"
-    now-and-later "^2.0.0"
-
-backo2@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
-  integrity sha1-MasayLEpNjRj41s+u2n038+6eUc=
-
-backslash@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/backslash/-/backslash-0.2.0.tgz#6c3c1fce7e7e714ccfc10fd74f0f73410677375f"
-  integrity sha1-bDwfzn5+cUzPwQ/XTw9zQQZ3N18=
-
-baconipsum@0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/baconipsum/-/baconipsum-0.1.2.tgz#b2e765b4a8048623f462cea9b412c9078c991b6f"
-  integrity sha1-sudltKgEhiP0Ys6ptBLJB4yZG28=
-
-bail@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
-  integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
-
-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
-
-base62@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/base62/-/base62-2.0.1.tgz#729cfe179ed34c61e4a489490105b44ce4ea1197"
-  integrity sha512-4t4WQK7mdbcWzqEBiq6tfo2qDCeIZGXvjifJZyxHIVcjQkZJxpFtu/pa2Va69OouCkg6izZ08hKnPxroeDyzew==
-
-base64-arraybuffer@0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
-  integrity sha1-c5JncZI7Whl0etZmqlzUv5xunOg=
-
-base64-js@^1.0.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
-  integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
-
-base64-url@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/base64-url/-/base64-url-1.2.1.tgz#199fd661702a0e7b7dcae6e0698bb089c52f6d78"
-  integrity sha1-GZ/WYXAqDnt9yubgaYuwicUvbXg=
-
-base64id@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/base64id/-/base64id-0.1.0.tgz#02ce0fdeee0cef4f40080e1e73e834f0b1bfce3f"
-  integrity sha1-As4P3u4M709ACA4ec+g08LG/zj8=
-
-base64id@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/base64id/-/base64id-2.0.0.tgz#2770ac6bc47d312af97a8bf9a634342e0cd25cb6"
-  integrity sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==
-
-base@^0.11.1:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
-  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
-  dependencies:
-    cache-base "^1.0.1"
-    class-utils "^0.3.5"
-    component-emitter "^1.2.1"
-    define-property "^1.0.0"
-    isobject "^3.0.1"
-    mixin-deep "^1.2.0"
-    pascalcase "^0.1.1"
-
-basic-auth-connect@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz#fdb0b43962ca7b40456a7c2bb48fe173da2d2122"
-  integrity sha1-/bC0OWLKe0BFanwrtI/hc9otISI=
-
-basic-auth@~1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-1.0.4.tgz#030935b01de7c9b94a824b29f3fccb750d3a5290"
-  integrity sha1-Awk1sB3nyblKgksp8/zLdQ06UpA=
-
-basic-auth@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-2.0.1.tgz#b998279bf47ce38344b4f3cf916d4679bbf51e3a"
-  integrity sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==
-  dependencies:
-    safe-buffer "5.1.2"
-
-batch@0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
-  integrity sha1-PzQU84AyF0O/wQQvmoP/HVgk1GQ=
-
-batch@0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
-  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
-
-bcrypt-pbkdf@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
-  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
-  dependencies:
-    tweetnacl "^0.14.3"
-
-better-assert@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
-  integrity sha1-QIZrnhueC1W0gYlDEeaPr/rrxSI=
-  dependencies:
-    callsite "1.0.0"
-
-binary-extensions@^1.0.0:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
-  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
-
-binary-extensions@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.0.0.tgz#23c0df14f6a88077f5f986c0d167ec03c3d5537c"
-  integrity sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==
-
-bl@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.2.tgz#a160911717103c07410cef63ef51b397c025af9c"
-  integrity sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==
-  dependencies:
-    readable-stream "^2.3.5"
-    safe-buffer "^5.1.1"
-
-blob@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.5.tgz#d680eeef25f8cd91ad533f5b01eed48e64caf683"
-  integrity sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==
-
-bluebird@^3.5.0, bluebird@^3.5.5:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.0.tgz#56a6a886e03f6ae577cffedeb524f8f2450293cf"
-  integrity sha512-aBQ1FxIa7kSWCcmKHlcHFlT2jt6J/l4FzC7KcPELkOJOsPOb/bccdhmIrKDfXhwFrmc7vDoDrrepFvGqjyXGJg==
-
-blueimp-md5@^2.10.0:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.12.0.tgz#be7367938a889dec3ffbb71138617c117e9c130a"
-  integrity sha512-zo+HIdIhzojv6F1siQPqPFROyVy7C50KzHv/k/Iz+BtvtVzSHXiMXOpq2wCfNkeBqdCv+V8XOV96tsEt2W/3rQ==
-
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
-  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
-
-body-parser@1.19.0, body-parser@^1.19.0:
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
-  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
-  dependencies:
-    bytes "3.1.0"
-    content-type "~1.0.4"
-    debug "2.6.9"
-    depd "~1.1.2"
-    http-errors "1.7.2"
-    iconv-lite "0.4.24"
-    on-finished "~2.3.0"
-    qs "6.7.0"
-    raw-body "2.4.0"
-    type-is "~1.6.17"
-
-body-parser@~1.13.3:
-  version "1.13.3"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.13.3.tgz#c08cf330c3358e151016a05746f13f029c97fa97"
-  integrity sha1-wIzzMMM1jhUQFqBXRvE/ApyX+pc=
-  dependencies:
-    bytes "2.1.0"
-    content-type "~1.0.1"
-    debug "~2.2.0"
-    depd "~1.0.1"
-    http-errors "~1.3.1"
-    iconv-lite "0.4.11"
-    on-finished "~2.3.0"
-    qs "4.0.0"
-    raw-body "~2.1.2"
-    type-is "~1.6.6"
-
-body@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/body/-/body-5.1.0.tgz#e4ba0ce410a46936323367609ecb4e6553125069"
-  integrity sha1-5LoM5BCkaTYyM2dgnstOZVMSUGk=
-  dependencies:
-    continuable-cache "^0.3.1"
-    error "^7.0.0"
-    raw-body "~1.1.0"
-    safe-json-parse "~1.0.1"
-
-boolbase@^1.0.0, boolbase@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
-  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
-
-boolean@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/boolean/-/boolean-3.0.1.tgz#35ecf2b4a2ee191b0b44986f14eb5f052a5cbb4f"
-  integrity sha512-HRZPIjPcbwAVQvOTxR4YE3o8Xs98NqbbL1iEZDCz7CL8ql0Lt5iOyJFxfnAB0oFs8Oh02F/lLlg30Mexv46LjA==
-
-bowser@^1.7.3:
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.4.tgz#890c58a2813a9d3243704334fa81b96a5c150c9a"
-  integrity sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==
-
-boxen@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-3.2.0.tgz#fbdff0de93636ab4450886b6ff45b92d098f45eb"
-  integrity sha512-cU4J/+NodM3IHdSL2yN8bqYqnmlBTidDR4RC7nJs61ZmtGz8VZzM3HLQX0zY5mrSmPtR3xWwsq2jOUQqFZN8+A==
-  dependencies:
-    ansi-align "^3.0.0"
-    camelcase "^5.3.1"
-    chalk "^2.4.2"
-    cli-boxes "^2.2.0"
-    string-width "^3.0.0"
-    term-size "^1.2.0"
-    type-fest "^0.3.0"
-    widest-line "^2.0.0"
-
-brace-expansion@^1.0.0, brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-braces@^1.8.2:
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
-  integrity sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=
-  dependencies:
-    expand-range "^1.8.1"
-    preserve "^0.2.0"
-    repeat-element "^1.1.2"
-
-braces@^2.3.1, braces@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
-  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
-  dependencies:
-    arr-flatten "^1.1.0"
-    array-unique "^0.3.2"
-    extend-shallow "^2.0.1"
-    fill-range "^4.0.0"
-    isobject "^3.0.1"
-    repeat-element "^1.1.2"
-    snapdragon "^0.8.1"
-    snapdragon-node "^2.0.1"
-    split-string "^3.0.2"
-    to-regex "^3.0.1"
-
-braces@^3.0.1, braces@^3.0.2, braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
-  dependencies:
-    fill-range "^7.0.1"
-
-brcast@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/brcast/-/brcast-2.0.2.tgz#2db16de44140e418dc37fab10beec0369e78dcef"
-  integrity sha512-Tfn5JSE7hrUlFcOoaLzVvkbgIemIorMIyoMr3TgvszWW7jFt2C9PdeMLtysYD9RU0MmU17b69+XJG1eRY2OBRg==
-
-brorand@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
-  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
-
-browser-pack@^6.0.1:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/browser-pack/-/browser-pack-6.1.0.tgz#c34ba10d0b9ce162b5af227c7131c92c2ecd5774"
-  integrity sha512-erYug8XoqzU3IfcU8fUgyHqyOXqIE4tUTTQ+7mqUjQlvnXkOO6OlT9c/ZoJVHYoAaqGxr09CN53G7XIsO4KtWA==
-  dependencies:
-    JSONStream "^1.0.3"
-    combine-source-map "~0.8.0"
-    defined "^1.0.0"
-    safe-buffer "^5.1.1"
-    through2 "^2.0.0"
-    umd "^3.0.0"
-
-browser-process-hrtime@^0.1.2:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz#616f00faef1df7ec1b5bf9cfe2bdc3170f26c7b4"
-  integrity sha512-bRFnI4NnjO6cnyLmOV/7PVoDEMJChlcfN0z4s1YMBY989/SvlfMI1lgCnkFUs53e9gQF+w7qu7XdllSTiSl8Aw==
-
-browser-process-hrtime@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
-  integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
-
-browser-resolve@^1.11.0, browser-resolve@^1.11.3, browser-resolve@^1.7.0:
-  version "1.11.3"
-  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
-  integrity sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==
-  dependencies:
-    resolve "1.1.7"
-
-browser-stdout@1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
-  integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
-
-browserify-aes@^1.0.0, browserify-aes@^1.0.4:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
-  integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==
-  dependencies:
-    buffer-xor "^1.0.3"
-    cipher-base "^1.0.0"
-    create-hash "^1.1.0"
-    evp_bytestokey "^1.0.3"
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-browserify-cipher@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
-  integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==
-  dependencies:
-    browserify-aes "^1.0.4"
-    browserify-des "^1.0.0"
-    evp_bytestokey "^1.0.0"
-
-browserify-des@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
-  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
-  dependencies:
-    cipher-base "^1.0.1"
-    des.js "^1.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
-
-browserify-persist-fs@1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/browserify-persist-fs/-/browserify-persist-fs-1.2.2.tgz#f38f4a1aa5f6cdea750f386567c2d5d04512e8f1"
-  integrity sha512-t3gCLq24to3tLkl0Dw3unbIKmCeeUJgdulnqbZHIy8w10WLSh2HvjHAk4hGFuOXPaVfm+5A4qywxGTI0eVXY4A==
-  dependencies:
-    after "^0.8.2"
-    mkdirp "^0.5.1"
-    xtend "^4.0.1"
-
-browserify-rsa@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
-  integrity sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=
-  dependencies:
-    bn.js "^4.1.0"
-    randombytes "^2.0.1"
-
-browserify-sign@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
-  integrity sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=
-  dependencies:
-    bn.js "^4.1.1"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.2"
-    elliptic "^6.0.0"
-    inherits "^2.0.1"
-    parse-asn1 "^5.0.0"
-
-browserify-zlib@~0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
-  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
-  dependencies:
-    pako "~1.0.5"
-
-browserify@16.5.1:
-  version "16.5.1"
-  resolved "https://registry.yarnpkg.com/browserify/-/browserify-16.5.1.tgz#3c13c97436802930d5c3ae28658ddc33bfd37dc2"
-  integrity sha512-EQX0h59Pp+0GtSRb5rL6OTfrttlzv+uyaUVlK6GX3w11SQ0jKPKyjC/54RhPR2ib2KmfcELM06e8FxcI5XNU2A==
-  dependencies:
-    JSONStream "^1.0.3"
-    assert "^1.4.0"
-    browser-pack "^6.0.1"
-    browser-resolve "^1.11.0"
-    browserify-zlib "~0.2.0"
-    buffer "~5.2.1"
-    cached-path-relative "^1.0.0"
-    concat-stream "^1.6.0"
-    console-browserify "^1.1.0"
-    constants-browserify "~1.0.0"
-    crypto-browserify "^3.0.0"
-    defined "^1.0.0"
-    deps-sort "^2.0.0"
-    domain-browser "^1.2.0"
-    duplexer2 "~0.1.2"
-    events "^2.0.0"
-    glob "^7.1.0"
-    has "^1.0.0"
-    htmlescape "^1.1.0"
-    https-browserify "^1.0.0"
-    inherits "~2.0.1"
-    insert-module-globals "^7.0.0"
-    labeled-stream-splicer "^2.0.0"
-    mkdirp-classic "^0.5.2"
-    module-deps "^6.0.0"
-    os-browserify "~0.3.0"
-    parents "^1.0.1"
-    path-browserify "~0.0.0"
-    process "~0.11.0"
-    punycode "^1.3.2"
-    querystring-es3 "~0.2.0"
-    read-only-stream "^2.0.0"
-    readable-stream "^2.0.2"
-    resolve "^1.1.4"
-    shasum "^1.0.0"
-    shell-quote "^1.6.1"
-    stream-browserify "^2.0.0"
-    stream-http "^3.0.0"
-    string_decoder "^1.1.1"
-    subarg "^1.0.0"
-    syntax-error "^1.1.1"
-    through2 "^2.0.0"
-    timers-browserify "^1.0.1"
-    tty-browserify "0.0.1"
-    url "~0.11.0"
-    util "~0.10.1"
-    vm-browserify "^1.0.0"
-    xtend "^4.0.0"
-
-browserify@^16.1.0:
-  version "16.5.0"
-  resolved "https://registry.yarnpkg.com/browserify/-/browserify-16.5.0.tgz#a1c2bc0431bec11fd29151941582e3f645ede881"
-  integrity sha512-6bfI3cl76YLAnCZ75AGu/XPOsqUhRyc0F/olGIJeCxtfxF2HvPKEcmjU9M8oAPxl4uBY1U7Nry33Q6koV3f2iw==
-  dependencies:
-    JSONStream "^1.0.3"
-    assert "^1.4.0"
-    browser-pack "^6.0.1"
-    browser-resolve "^1.11.0"
-    browserify-zlib "~0.2.0"
-    buffer "^5.0.2"
-    cached-path-relative "^1.0.0"
-    concat-stream "^1.6.0"
-    console-browserify "^1.1.0"
-    constants-browserify "~1.0.0"
-    crypto-browserify "^3.0.0"
-    defined "^1.0.0"
-    deps-sort "^2.0.0"
-    domain-browser "^1.2.0"
-    duplexer2 "~0.1.2"
-    events "^2.0.0"
-    glob "^7.1.0"
-    has "^1.0.0"
-    htmlescape "^1.1.0"
-    https-browserify "^1.0.0"
-    inherits "~2.0.1"
-    insert-module-globals "^7.0.0"
-    labeled-stream-splicer "^2.0.0"
-    mkdirp "^0.5.0"
-    module-deps "^6.0.0"
-    os-browserify "~0.3.0"
-    parents "^1.0.1"
-    path-browserify "~0.0.0"
-    process "~0.11.0"
-    punycode "^1.3.2"
-    querystring-es3 "~0.2.0"
-    read-only-stream "^2.0.0"
-    readable-stream "^2.0.2"
-    resolve "^1.1.4"
-    shasum "^1.0.0"
-    shell-quote "^1.6.1"
-    stream-browserify "^2.0.0"
-    stream-http "^3.0.0"
-    string_decoder "^1.1.1"
-    subarg "^1.0.0"
-    syntax-error "^1.1.1"
-    through2 "^2.0.0"
-    timers-browserify "^1.0.1"
-    tty-browserify "0.0.1"
-    url "~0.11.0"
-    util "~0.10.1"
-    vm-browserify "^1.0.0"
-    xtend "^4.0.0"
-
-browserslist@^4.0.0, browserslist@^4.8.3:
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.9.1.tgz#01ffb9ca31a1aef7678128fc6a2253316aa7287c"
-  integrity sha512-Q0DnKq20End3raFulq6Vfp1ecB9fh8yUNV55s8sekaDDeqBaCtWlRHCUdaWyUeSSBJM7IbM6HcsyaeYqgeDhnw==
-  dependencies:
-    caniuse-lite "^1.0.30001030"
-    electron-to-chromium "^1.3.363"
-    node-releases "^1.1.50"
-
-browserslist@^4.12.0:
-  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.0.tgz#06c6d5715a1ede6c51fc39ff67fd647f740b656d"
-  integrity sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==
-  dependencies:
-    caniuse-lite "^1.0.30001043"
-    electron-to-chromium "^1.3.413"
-    node-releases "^1.1.53"
-    pkg-up "^2.0.0"
-
-bser@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.0.tgz#65fc784bf7f87c009b973c12db6546902fa9c7b5"
-  integrity sha512-8zsjWrQkkBoLK6uxASk1nJ2SKv97ltiGDo6A3wA0/yRPz+CwmEyDo0hUrhIuukG2JHpAl3bvFIixw2/3Hi0DOg==
-  dependencies:
-    node-int64 "^0.4.0"
-
-buffer-equal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-equal/-/buffer-equal-1.0.0.tgz#59616b498304d556abd466966b22eeda3eca5fbe"
-  integrity sha1-WWFrSYME1Var1GaWayLu2j7KX74=
-
-buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
-
-buffer-xor@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
-  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
-
-buffer@4.9.1:
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
-  integrity sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-    isarray "^1.0.0"
-
-buffer@^5.0.2:
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.4.3.tgz#3fbc9c69eb713d323e3fc1a895eee0710c072115"
-  integrity sha512-zvj65TkFeIt3i6aj5bIvJDzjjQQGs4o/sNoezg1F1kYap9Nu2jcUdpwzRSJTHMMzG0H7bZkn4rNQpImhuxWX2A==
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-
-buffer@~5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.1.tgz#dd57fa0f109ac59c602479044dca7b8b3d0b71d6"
-  integrity sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-
-builtin-status-codes@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
-  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
-
-builtins@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
-  integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
-
-bunyan@1.8.12:
-  version "1.8.12"
-  resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.12.tgz#f150f0f6748abdd72aeae84f04403be2ef113797"
-  integrity sha1-8VDw9nSKvdcq6uhPBEA74u8RN5c=
-  optionalDependencies:
-    dtrace-provider "~0.8"
-    moment "^2.10.6"
-    mv "~2"
-    safe-json-stringify "~1"
-
-busboy@^0.2.11:
-  version "0.2.14"
-  resolved "https://registry.yarnpkg.com/busboy/-/busboy-0.2.14.tgz#6c2a622efcf47c57bbbe1e2a9c37ad36c7925453"
-  integrity sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=
-  dependencies:
-    dicer "0.2.5"
-    readable-stream "1.1.x"
-
-bytes@1:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-1.0.0.tgz#3569ede8ba34315fab99c3e92cb04c7220de1fa8"
-  integrity sha1-NWnt6Lo0MV+rmcPpLLBMciDeH6g=
-
-bytes@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.1.0.tgz#ac93c410e2ffc9cc7cf4b464b38289067f5e47b4"
-  integrity sha1-rJPEEOL/ycx89LRks4KJBn9eR7Q=
-
-bytes@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339"
-  integrity sha1-fZcZb51br39pNeJZhVSe3SpsIzk=
-
-bytes@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
-  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
-
-cacache@15.0.4:
-  version "15.0.4"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.0.4.tgz#b2c23cf4ac4f5ead004fb15a0efb0a20340741f1"
-  integrity sha512-YlnKQqTbD/6iyoJvEY3KJftjrdBYroCbxxYXzhOzsFLWlp6KX4BOlEf4mTx0cMUfVaTS3ENL2QtDWeRYoGLkkw==
-  dependencies:
-    "@npmcli/move-file" "^1.0.1"
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    glob "^7.1.4"
-    infer-owner "^1.0.4"
-    lru-cache "^5.1.1"
-    minipass "^3.1.1"
-    minipass-collect "^1.0.2"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.2"
-    mkdirp "^1.0.3"
-    p-map "^4.0.0"
-    promise-inflight "^1.0.1"
-    rimraf "^3.0.2"
-    ssri "^8.0.0"
-    tar "^6.0.2"
-    unique-filename "^1.1.1"
-
-cache-base@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
-  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
-  dependencies:
-    collection-visit "^1.0.0"
-    component-emitter "^1.2.1"
-    get-value "^2.0.6"
-    has-value "^1.0.0"
-    isobject "^3.0.1"
-    set-value "^2.0.0"
-    to-object-path "^0.3.0"
-    union-value "^1.0.0"
-    unset-value "^1.0.0"
-
-cacheable-request@^6.0.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-6.1.0.tgz#20ffb8bd162ba4be11e9567d823db651052ca912"
-  integrity sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==
-  dependencies:
-    clone-response "^1.0.2"
-    get-stream "^5.1.0"
-    http-cache-semantics "^4.0.0"
-    keyv "^3.0.0"
-    lowercase-keys "^2.0.0"
-    normalize-url "^4.1.0"
-    responselike "^1.0.2"
-
-cached-path-relative@^1.0.0, cached-path-relative@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/cached-path-relative/-/cached-path-relative-1.0.2.tgz#a13df4196d26776220cc3356eb147a52dba2c6db"
-  integrity sha512-5r2GqsoEb4qMTTN9J+WzXfjov+hjxT+j3u5K+kIVNIwAd99DLCJE9pBIMP1qVeybV6JiijL385Oz0DcYxfbOIg==
-
-call-matcher@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/call-matcher/-/call-matcher-1.1.0.tgz#23b2c1bc7a8394c8be28609d77ddbd5786680432"
-  integrity sha512-IoQLeNwwf9KTNbtSA7aEBb1yfDbdnzwjCetjkC8io5oGeOmK2CBNdg0xr+tadRYKO0p7uQyZzvon0kXlZbvGrw==
-  dependencies:
-    core-js "^2.0.0"
-    deep-equal "^1.0.0"
-    espurify "^1.6.0"
-    estraverse "^4.0.0"
-
-call-signature@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/call-signature/-/call-signature-0.0.2.tgz#a84abc825a55ef4cb2b028bd74e205a65b9a4996"
-  integrity sha1-qEq8glpV70yysCi9dOIFpluaSZY=
-
-caller-callsite@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
-  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
-  dependencies:
-    callsites "^2.0.0"
-
-caller-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
-  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
-  dependencies:
-    caller-callsite "^2.0.0"
-
-callsite@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
-  integrity sha1-KAOY5dZkvXQDi28JBRU+borxvCA=
-
-callsites@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
-  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
-
-callsites@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
-  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
-
-camel-case@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
-  integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
-  dependencies:
-    no-case "^2.2.0"
-    upper-case "^1.1.1"
-
-camelcase-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
-  integrity sha1-MIvur/3ygRkFHvodkyITyRuPkuc=
-  dependencies:
-    camelcase "^2.0.0"
-    map-obj "^1.0.0"
-
-camelcase-keys@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-4.2.0.tgz#a2aa5fb1af688758259c32c141426d78923b9b77"
-  integrity sha1-oqpfsa9oh1glnDLBQUJteJI7m3c=
-  dependencies:
-    camelcase "^4.1.0"
-    map-obj "^2.0.0"
-    quick-lru "^1.0.0"
-
-camelcase-keys@^6.2.2:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
-  integrity sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==
-  dependencies:
-    camelcase "^5.3.1"
-    map-obj "^4.0.0"
-    quick-lru "^4.0.1"
-
-camelcase@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
-  integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=
-
-camelcase@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
-  integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
-
-camelcase@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
-  integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
-
-camelcase@^5.0.0, camelcase@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-
-camelcase@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
-  integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
-
-caniuse-api@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
-  integrity sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-lite "^1.0.0"
-    lodash.memoize "^4.1.2"
-    lodash.uniq "^4.5.0"
-
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001030:
-  version "1.0.30001033"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001033.tgz#60c328fb56860de60f9a2cb419c31fb80587cba0"
-  integrity sha512-8Ibzxee6ibc5q88cM1usPsMpJOG5CTq0s/dKOmlekPbDGKt+UrnOOTPSjQz3kVo6yL7N4SB5xd+FGLHQmbzh6A==
-
-caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001061:
-  version "1.0.30001062"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001062.tgz#d814b648338504b315222ace6f1a533d9a55e390"
-  integrity sha512-ei9ZqeOnN7edDrb24QfJ0OZicpEbsWxv7WusOiQGz/f2SfvBgHHbOEwBJ8HKGVSyx8Z6ndPjxzR6m0NQq+0bfw==
-
-capture-exit@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
-  integrity sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==
-  dependencies:
-    rsvp "^4.8.4"
-
-caseless@~0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
-  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
-
-ccount@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.5.tgz#ac82a944905a65ce204eb03023157edf29425c17"
-  integrity sha512-MOli1W+nfbPLlKEhInaxhRdp7KVLFxLN5ykwzHgLsLI3H3gs5jjFAK4Eoj3OzzcxCtumDaI8onoVDeQyWaNTkw==
-
-chai-as-promised@7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/chai-as-promised/-/chai-as-promised-7.1.1.tgz#08645d825deb8696ee61725dbf590c012eb00ca0"
-  integrity sha512-azL6xMoi+uxu6z4rhWQ1jbdUhOMhis2PvscD/xjLqNMkv3BPPp2JyyuTHOrf9BOosGpNQ11v6BKv/g57RXbiaA==
-  dependencies:
-    check-error "^1.0.2"
-
-chai@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-4.2.0.tgz#760aa72cf20e3795e84b12877ce0e83737aa29e5"
-  integrity sha512-XQU3bhBukrOsQCuwZndwGcCVQHyZi53fQ6Ys1Fym7E4olpIqqZZhhoFJoaKVvV17lWQoXYwgWN2nF5crA8J2jw==
-  dependencies:
-    assertion-error "^1.1.0"
-    check-error "^1.0.2"
-    deep-eql "^3.0.1"
-    get-func-name "^2.0.0"
-    pathval "^1.1.0"
-    type-detect "^4.0.5"
-
-chalk@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.1.tgz#509afb67066e7499f7eb3535c77445772ae2d019"
-  integrity sha1-UJr7ZwZudJn36zU1x3RFdyri0Bk=
-  dependencies:
-    ansi-styles "^2.1.0"
-    escape-string-regexp "^1.0.2"
-    has-ansi "^2.0.0"
-    strip-ansi "^3.0.0"
-    supports-color "^2.0.0"
-
-chalk@2.4.2, chalk@2.x, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-chalk@4.0.0, chalk@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.0.0.tgz#6e98081ed2d17faab615eb52ac66ec1fe6209e72"
-  integrity sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
-chalk@^0.5.0, chalk@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.5.1.tgz#663b3a648b68b55d04690d49167aa837858f2174"
-  integrity sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=
-  dependencies:
-    ansi-styles "^1.1.0"
-    escape-string-regexp "^1.0.0"
-    has-ansi "^0.1.0"
-    strip-ansi "^0.3.0"
-    supports-color "^0.2.0"
-
-chalk@^1.0.0, chalk@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
-  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
-  dependencies:
-    ansi-styles "^2.2.1"
-    escape-string-regexp "^1.0.2"
-    has-ansi "^2.0.0"
-    strip-ansi "^3.0.0"
-    supports-color "^2.0.0"
-
-chalk@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
-  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
-chalk@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f"
-  integrity sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8=
-  dependencies:
-    ansi-styles "~1.0.0"
-    has-color "~0.1.0"
-    strip-ansi "~0.1.0"
-
-changelog-filename-regex@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/changelog-filename-regex/-/changelog-filename-regex-2.0.1.tgz#88944bd89a076fc572c0ab6b4a4f2bc2572ac02d"
-  integrity sha512-DZdyJpCprw8V3jp8V2x13nAA05Yy/IN+Prowj+0mrAHNENYkuMtNI4u5m449TTjPqShIslQSEuXee+Jtkn4m+g==
-
-char-regex@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
-  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
-
-character-entities-html4@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.4.tgz#0e64b0a3753ddbf1fdc044c5fd01d0199a02e125"
-  integrity sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==
-
-character-entities-legacy@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
-  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
-
-character-entities@^1.0.0:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
-  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
-
-character-reference-invalid@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
-  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
-
-chardet@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
-  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
-
-check-error@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
-  integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=
-
-cheerio@^1.0.0-rc.3:
-  version "1.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.3.tgz#094636d425b2e9c0f4eb91a46c05630c9a1a8bf6"
-  integrity sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==
-  dependencies:
-    css-select "~1.2.0"
-    dom-serializer "~0.1.1"
-    entities "~1.1.1"
-    htmlparser2 "^3.9.1"
-    lodash "^4.15.0"
-    parse5 "^3.0.1"
-
-chokidar@3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.1.tgz#c84e5b3d18d9a4d77558fef466b1bf16bbeb3450"
-  integrity sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==
-  dependencies:
-    anymatch "~3.1.1"
-    braces "~3.0.2"
-    glob-parent "~5.1.0"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.3.0"
-  optionalDependencies:
-    fsevents "~2.1.2"
-
-chokidar@^1.0.1:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
-  integrity sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=
-  dependencies:
-    anymatch "^1.3.0"
-    async-each "^1.0.0"
-    glob-parent "^2.0.0"
-    inherits "^2.0.1"
-    is-binary-path "^1.0.0"
-    is-glob "^2.0.0"
-    path-is-absolute "^1.0.0"
-    readdirp "^2.0.0"
-  optionalDependencies:
-    fsevents "^1.0.0"
-
-chokidar@^2.0.0, chokidar@^2.1.1:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
-  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
-  dependencies:
-    anymatch "^2.0.0"
-    async-each "^1.0.1"
-    braces "^2.3.2"
-    glob-parent "^3.1.0"
-    inherits "^2.0.3"
-    is-binary-path "^1.0.0"
-    is-glob "^4.0.0"
-    normalize-path "^3.0.0"
-    path-is-absolute "^1.0.0"
-    readdirp "^2.2.1"
-    upath "^1.1.1"
-  optionalDependencies:
-    fsevents "^1.2.7"
-
-chokidar@^3.0.0, chokidar@^3.0.2:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.2.1.tgz#4634772a1924512d990d4505957bf3a510611387"
-  integrity sha512-/j5PPkb5Feyps9e+jo07jUZGvkB5Aj953NrI4s8xSVScrAo/RHeILrtdb4uzR7N6aaFFxxJ+gt8mA8HfNpw76w==
-  dependencies:
-    anymatch "~3.1.1"
-    braces "~3.0.2"
-    glob-parent "~5.1.0"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.1.3"
-  optionalDependencies:
-    fsevents "~2.1.0"
-
-chownr@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
-  integrity sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==
-
-chownr@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
-  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
-
-chunkd@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/chunkd/-/chunkd-1.0.0.tgz#4ead4a3704bcce510c4bb4d4a8be30c557836dd1"
-  integrity sha512-xx3Pb5VF9QaqCotolyZ1ywFBgyuJmu6+9dLiqBxgelEse9Xsr3yUlpoX3O4Oh11M00GT2kYMsRByTKIMJW2Lkg==
-
-ci-info@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
-  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
-
-ci-parallel-vars@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/ci-parallel-vars/-/ci-parallel-vars-1.0.0.tgz#af97729ed1c7381911ca37bcea263d62638701b3"
-  integrity sha512-u6dx20FBXm+apMi+5x7UVm6EH7BL1gc4XrcnQewjcB7HWRcor/V5qWc3RG2HwpgDJ26gIi2DSEu3B7sXynAw/g==
-
-cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
-  integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-cjson@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/cjson/-/cjson-0.3.0.tgz#e6439b90703d312ff6e2224097bea92ce3d02a14"
-  integrity sha1-5kObkHA9MS/24iJAl76pLOPQKhQ=
-  dependencies:
-    jsonlint "1.6.0"
-
-class-utils@^0.3.5:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
-  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
-  dependencies:
-    arr-union "^3.1.0"
-    define-property "^0.2.5"
-    isobject "^3.0.0"
-    static-extend "^0.1.1"
-
-clean-css@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
-  integrity sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==
-  dependencies:
-    source-map "~0.6.0"
-
-clean-git-ref@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/clean-git-ref/-/clean-git-ref-2.0.1.tgz#dcc0ca093b90e527e67adb5a5e55b1af6816dcd9"
-  integrity sha512-bLSptAy2P0s6hU4PzuIMKmMJJSE6gLXGH1cntDu7bWJUksvuM+7ReOK61mozULErYvP6a15rnYl0zFDef+pyPw==
-
-clean-stack@^2.0.0, clean-stack@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
-  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
-
-clean-yaml-object@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/clean-yaml-object/-/clean-yaml-object-0.1.0.tgz#63fb110dc2ce1a84dc21f6d9334876d010ae8b68"
-  integrity sha1-Y/sRDcLOGoTcIfbZM0h20BCui2g=
-
-cli-boxes@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.0.tgz#538ecae8f9c6ca508e3c3c95b453fe93cb4c168d"
-  integrity sha512-gpaBrMAizVEANOpfZp/EEUixTXDyGt7DFzdK5hU+UbWt/J0lB0w20ncZj59Z9a93xHb9u12zF5BS6i9RKbtg4w==
-
-cli-cursor@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
-  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
-  dependencies:
-    restore-cursor "^2.0.0"
-
-cli-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
-  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
-  dependencies:
-    restore-cursor "^3.1.0"
-
-cli-highlight@2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/cli-highlight/-/cli-highlight-2.1.4.tgz#098cb642cf17f42adc1c1145e07f960ec4d7522b"
-  integrity sha512-s7Zofobm20qriqDoU9sXptQx0t2R9PEgac92mENNm7xaEe1hn71IIMsXMK+6encA6WRCWWxIGQbipr3q998tlQ==
-  dependencies:
-    chalk "^3.0.0"
-    highlight.js "^9.6.0"
-    mz "^2.4.0"
-    parse5 "^5.1.1"
-    parse5-htmlparser2-tree-adapter "^5.1.1"
-    yargs "^15.0.0"
-
-cli-spinners@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.2.0.tgz#e8b988d9206c692302d8ee834e7a85c0144d8f77"
-  integrity sha512-tgU3fKwzYjiLEQgPMD9Jt+JjHVL9kW93FiIMX/l7rivvOD4/LL0Mf7gda3+4U2KJBloybwgj5KEoQgGRioMiKQ==
-
-cli-truncate@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-2.0.0.tgz#68ff6aaa53b203b52ad89b8b1a80f1f61ad1e1d5"
-  integrity sha512-C4hp+8GCIFVsUUiXcw+ce+7wexVWImw8rQrgMBFsqerx9LvvcGlwm6sMjQYAEmV/Xb87xc1b5Ttx505MSpZVqg==
-  dependencies:
-    slice-ansi "^2.1.0"
-    string-width "^4.1.0"
-
-cli-width@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
-  integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
-
-cliui@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
-  integrity sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=
-  dependencies:
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-    wrap-ansi "^2.0.0"
-
-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
-  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
-  dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
-
-cliui@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
-  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-    wrap-ansi "^6.2.0"
-
-clone-buffer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
-  integrity sha1-4+JbIHrE5wGvch4staFnksrD3Fg=
-
-clone-response@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
-  integrity sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=
-  dependencies:
-    mimic-response "^1.0.0"
-
-clone-stats@^0.0.1, clone-stats@~0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-0.0.1.tgz#b88f94a82cf38b8791d58046ea4029ad88ca99d1"
-  integrity sha1-uI+UqCzzi4eR1YBG6kAprYjKmdE=
-
-clone-stats@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
-  integrity sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=
-
-clone@^1.0.0, clone@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
-  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
-
-clone@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
-  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
-
-cloneable-readable@^1.0.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.1.3.tgz#120a00cb053bfb63a222e709f9683ea2e11d8cec"
-  integrity sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==
-  dependencies:
-    inherits "^2.0.1"
-    process-nextick-args "^2.0.0"
-    readable-stream "^2.3.5"
-
-co@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
-  integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
-
-coa@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
-  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
-  dependencies:
-    "@types/q" "^1.5.1"
-    chalk "^2.4.1"
-    q "^1.1.2"
-
-code-excerpt@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/code-excerpt/-/code-excerpt-2.1.1.tgz#5fe3057bfbb71a5f300f659ef2cc0a47651ba77c"
-  integrity sha512-tJLhH3EpFm/1x7heIW0hemXJTUU5EWl2V0EIX558jp05Mt1U6DVryCgkp3l37cxqs+DNbNgxG43SkwJXpQ14Jw==
-  dependencies:
-    convert-to-spaces "^1.0.1"
-
-code-point-at@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
-  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
-
-codecov@3.7.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/codecov/-/codecov-3.7.0.tgz#4a09939cde24447a43f36d068e8b4e0188dc3f27"
-  integrity sha512-uIixKofG099NbUDyzRk1HdGtaG8O+PBUAg3wfmjwXw2+ek+PZp+puRvbTohqrVfuudaezivJHFgTtSC3M8MXww==
-  dependencies:
-    argv "0.0.2"
-    ignore-walk "3.0.3"
-    js-yaml "3.13.1"
-    teeny-request "6.0.1"
-    urlgrey "0.4.4"
-
-collapse-white-space@^1.0.2:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
-  integrity sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==
-
-collect-v8-coverage@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
-  integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
-
-collection-map@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/collection-map/-/collection-map-1.0.0.tgz#aea0f06f8d26c780c2b75494385544b2255af18c"
-  integrity sha1-rqDwb40mx4DCt1SUOFVEsiVa8Yw=
-  dependencies:
-    arr-map "^2.0.2"
-    for-own "^1.0.0"
-    make-iterator "^1.0.0"
-
-collection-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
-  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
-  dependencies:
-    map-visit "^1.0.0"
-    object-visit "^1.0.0"
-
-color-convert@^1.9.0, color-convert@^1.9.1:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-convert@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
-  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
-  dependencies:
-    color-name "~1.1.4"
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-color-name@^1.0.0, color-name@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
-color-string@^1.5.2:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
-  integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color-support@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
-  integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
-
-color@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
-  integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
-  dependencies:
-    color-convert "^1.9.1"
-    color-string "^1.5.2"
-
-colors@0.5.x:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-0.5.1.tgz#7d0023eaeb154e8ee9fce75dcb923d0ed1667774"
-  integrity sha1-fQAj6usVTo7p/Oddy5I9DtFmd3Q=
-
-colors@0.x.x, colors@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.2.tgz#2423fe6678ac0c5dae8852e5d0e5be08c997abcc"
-  integrity sha1-JCP+ZnisDF2uiFLl0OW+CMmXq8w=
-
-colors@1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.2.5.tgz#89c7ad9a374bc030df8013241f68136ed8835afc"
-  integrity sha512-erNRLao/Y3Fv54qUa0LBB+//Uf3YwMUmdJinN20yMXm9zdKKqH9wt7R9IIVZ+K7ShzfpLV/Zg8+VyrBJYB4lpg==
-
-colors@^1.1.0, colors@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
-  integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
-
-combine-source-map@^0.8.0, combine-source-map@~0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/combine-source-map/-/combine-source-map-0.8.0.tgz#a58d0df042c186fcf822a8e8015f5450d2d79a8b"
-  integrity sha1-pY0N8ELBhvz4IqjoAV9UUNLXmos=
-  dependencies:
-    convert-source-map "~1.1.0"
-    inline-source-map "~0.6.0"
-    lodash.memoize "~3.0.3"
-    source-map "~0.5.3"
-
-combined-stream@^1.0.6, combined-stream@~1.0.6:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
-  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
-  dependencies:
-    delayed-stream "~1.0.0"
-
-commander@2.15.1:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
-  integrity sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==
-
-commander@5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
-  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
-
-commander@^2.19.0, commander@^2.20.0, commander@~2.20.0:
-  version "2.20.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.1.tgz#3863ce3ca92d0831dcf2a102f5fb4b5926afd0f9"
-  integrity sha512-cCuLsMhJeWQ/ZpsFTbE765kvVfoeSddc4nU3up4fV+fDBcfUXnbITJ+JzhkdjzOqhURjZgujxaioam4RM9yGUg==
-
-commander@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-5.0.0.tgz#dbf1909b49e5044f8fdaf0adc809f0c0722bdfd0"
-  integrity sha512-JrDGPAKjMGSP1G0DUoaceEJ3DZgAfr/q6X7FVk4+U5KxUSKviYGM2k6zWkfyyBHy5rAtzgYJFa1ro2O9PtoxwQ==
-
-commander@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781"
-  integrity sha1-0SG7roYNmZKj1Re6lvVliOR8Z4E=
-
-comment-parser@^0.7.4:
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-0.7.4.tgz#f5eb83cbae323cae6533c057f41d52692361c83a"
-  integrity sha512-Nnl77/mt6sj1BiYSVMeMWzvD0183F2MFOJyFRmZHimUVDYS9J40AvXpiFA7RpU5pQH+HkvYc0dnsHpwW2xmbyQ==
-
-common-path-prefix@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/common-path-prefix/-/common-path-prefix-1.0.0.tgz#cd52f6f0712e0baab97d6f9732874f22f47752c0"
-  integrity sha1-zVL28HEuC6q5fW+XModPIvR3UsA=
-
-component-bind@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
-  integrity sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=
-
-component-emitter@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
-  integrity sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=
-
-component-emitter@^1.2.1, component-emitter@~1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
-  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
-
-component-inherit@0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
-  integrity sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=
-
-compressible@~2.0.5:
-  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.17.tgz#6e8c108a16ad58384a977f3a482ca20bff2f38c1"
-  integrity sha512-BGHeLCK1GV7j1bSmQQAi26X+GgWcTjLr/0tzSvMCl3LH1w1IJ4PFSPoV5316b30cneTziC+B1a+3OjoSUcQYmw==
-  dependencies:
-    mime-db ">= 1.40.0 < 2"
-
-compression@~1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/compression/-/compression-1.5.2.tgz#b03b8d86e6f8ad29683cba8df91ddc6ffc77b395"
-  integrity sha1-sDuNhub4rSloPLqN+R3cb/x3s5U=
-  dependencies:
-    accepts "~1.2.12"
-    bytes "2.1.0"
-    compressible "~2.0.5"
-    debug "~2.2.0"
-    on-headers "~1.0.0"
-    vary "~1.0.1"
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-concat-stream@^1.4.6, concat-stream@^1.5.2, concat-stream@^1.6.0, concat-stream@^1.6.1, concat-stream@~1.6.0:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
-  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
-  dependencies:
-    buffer-from "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
-
-concordance@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/concordance/-/concordance-4.0.0.tgz#5932fdee397d129bdbc3a1885fbe69839b1b7e15"
-  integrity sha512-l0RFuB8RLfCS0Pt2Id39/oCPykE01pyxgAFypWTlaGRgvLkZrtczZ8atEHpTeEIW+zYWXTBuA9cCSeEOScxReQ==
-  dependencies:
-    date-time "^2.1.0"
-    esutils "^2.0.2"
-    fast-diff "^1.1.2"
-    js-string-escape "^1.0.1"
-    lodash.clonedeep "^4.5.0"
-    lodash.flattendeep "^4.4.0"
-    lodash.islength "^4.0.1"
-    lodash.merge "^4.6.1"
-    md5-hex "^2.0.0"
-    semver "^5.5.1"
-    well-known-symbols "^2.0.0"
-
-configstore@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/configstore/-/configstore-4.0.0.tgz#5933311e95d3687efb592c528b922d9262d227e7"
-  integrity sha512-CmquAXFBocrzaSM8mtGPMM/HiWmyIpr4CcJl/rgY2uCObZ/S7cKU0silxslqJejl+t/T9HS8E0PUNQD81JGUEQ==
-  dependencies:
-    dot-prop "^4.1.0"
-    graceful-fs "^4.1.2"
-    make-dir "^1.0.0"
-    unique-string "^1.0.0"
-    write-file-atomic "^2.0.0"
-    xdg-basedir "^3.0.0"
-
-connect-header@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/connect-header/-/connect-header-0.0.5.tgz#168b70a1770d6625ceaf35549f02fd0d7f14535b"
-  integrity sha1-FotwoXcNZiXOrzVUnwL9DX8UU1s=
-
-connect-livereload@^0.6.0:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/connect-livereload/-/connect-livereload-0.6.1.tgz#1ac0c8bb9d9cfd5b28b629987a56a9239db9baaa"
-  integrity sha512-3R0kMOdL7CjJpU66fzAkCe6HNtd3AavCS4m+uW4KtJjrdGPT0SQEZieAYd+cm+lJoBznNQ4lqipYWkhBMgk00g==
-
-connect-timeout@~1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/connect-timeout/-/connect-timeout-1.6.2.tgz#de9a5ec61e33a12b6edaab7b5f062e98c599b88e"
-  integrity sha1-3ppexh4zoStu2qt7XwYumMWZuI4=
-  dependencies:
-    debug "~2.2.0"
-    http-errors "~1.3.1"
-    ms "0.7.1"
-    on-headers "~1.0.0"
-
-connect@^2.29.2:
-  version "2.30.2"
-  resolved "https://registry.yarnpkg.com/connect/-/connect-2.30.2.tgz#8da9bcbe8a054d3d318d74dfec903b5c39a1b609"
-  integrity sha1-jam8vooFTT0xjXTf7JA7XDmhtgk=
-  dependencies:
-    basic-auth-connect "1.0.0"
-    body-parser "~1.13.3"
-    bytes "2.1.0"
-    compression "~1.5.2"
-    connect-timeout "~1.6.2"
-    content-type "~1.0.1"
-    cookie "0.1.3"
-    cookie-parser "~1.3.5"
-    cookie-signature "1.0.6"
-    csurf "~1.8.3"
-    debug "~2.2.0"
-    depd "~1.0.1"
-    errorhandler "~1.4.2"
-    express-session "~1.11.3"
-    finalhandler "0.4.0"
-    fresh "0.3.0"
-    http-errors "~1.3.1"
-    method-override "~2.3.5"
-    morgan "~1.6.1"
-    multiparty "3.3.2"
-    on-headers "~1.0.0"
-    parseurl "~1.3.0"
-    pause "0.1.0"
-    qs "4.0.0"
-    response-time "~2.3.1"
-    serve-favicon "~2.3.0"
-    serve-index "~1.7.2"
-    serve-static "~1.10.0"
-    type-is "~1.6.6"
-    utils-merge "1.0.0"
-    vhost "~3.0.1"
-
-connect@^3.6.6, connect@^3.7.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/connect/-/connect-3.7.0.tgz#5d49348910caa5e07a01800b030d0c35f20484f8"
-  integrity sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==
-  dependencies:
-    debug "2.6.9"
-    finalhandler "1.1.2"
-    parseurl "~1.3.3"
-    utils-merge "1.0.1"
-
-console-browserify@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
-  integrity sha1-8CQcRXMKn8YyOyBtvzjtx0HQuxA=
-  dependencies:
-    date-now "^0.1.4"
-
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
-
-consolidated-events@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/consolidated-events/-/consolidated-events-1.1.1.tgz#25395465b35e531395418b7bbecb5ecaf198d179"
-  integrity sha1-JTlUZbNeUxOVQYt7vsteyvGY0Xk=
-
-constants-browserify@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
-  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
-
-content-disposition@0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
-  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
-  dependencies:
-    safe-buffer "5.1.2"
-
-content-type@~1.0.1, content-type@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
-  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
-
-continuable-cache@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/continuable-cache/-/continuable-cache-0.3.1.tgz#bd727a7faed77e71ff3985ac93351a912733ad0f"
-  integrity sha1-vXJ6f67XfnH/OYWskzUakSczrQ8=
-
-conventional-commits-detector@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/conventional-commits-detector/-/conventional-commits-detector-1.0.2.tgz#de5dacafa7b9ba45dbe7eccfec46a32e742964f4"
-  integrity sha512-7DwYW+4i2Ne2HKxsSpOkc6jne28vnPB7Y8bS3li7DJcUj7V5IoYQPobvN+Xsg71NGLBuFuHndnCfdtisGA0EQw==
-  dependencies:
-    arrify "^1.0.0"
-    git-raw-commits "^2.0.0"
-    meow "^5.0.0"
-    through2-concurrent "^2.0.0"
-
-convert-source-map@1.X, convert-source-map@^1.1.0, convert-source-map@^1.1.3, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
-  integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
-  dependencies:
-    safe-buffer "~5.1.1"
-
-convert-source-map@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
-  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
-  dependencies:
-    safe-buffer "~5.1.1"
-
-convert-source-map@~1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"
-  integrity sha1-SCnId+n+SbMWHzvzZziI4gRpmGA=
-
-convert-to-spaces@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/convert-to-spaces/-/convert-to-spaces-1.0.2.tgz#7e3e48bbe6d997b1417ddca2868204b4d3d85715"
-  integrity sha1-fj5Iu+bZl7FBfdyihoIEtNPYVxU=
-
-cookie-parser@~1.3.5:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/cookie-parser/-/cookie-parser-1.3.5.tgz#9d755570fb5d17890771227a02314d9be7cf8356"
-  integrity sha1-nXVVcPtdF4kHcSJ6AjFNm+fPg1Y=
-  dependencies:
-    cookie "0.1.3"
-    cookie-signature "1.0.6"
-
-cookie-signature@1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
-  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
-
-cookie@0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.1.3.tgz#e734a5c1417fce472d5aef82c381cabb64d1a435"
-  integrity sha1-5zSlwUF/zkctWu+Cw4HKu2TRpDU=
-
-cookie@0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
-  integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
-
-cookie@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
-  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
-
-copy-descriptor@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
-  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
-
-copy-props@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/copy-props/-/copy-props-2.0.4.tgz#93bb1cadfafd31da5bb8a9d4b41f471ec3a72dfe"
-  integrity sha512-7cjuUME+p+S3HZlbllgsn2CDwS+5eCCX16qBgNC4jgSTf49qR1VKy/Zhl400m0IQXl/bPGEVqncgUUMjrr4s8A==
-  dependencies:
-    each-props "^1.3.0"
-    is-plain-object "^2.0.1"
-
-core-js-compat@^3.6.2:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.4.tgz#938476569ebb6cda80d339bcf199fae4f16fff17"
-  integrity sha512-zAa3IZPvsJ0slViBQ2z+vgyyTuhd3MFn1rBQjZSKVEgB0UMYhUkCj9jJUVPgGTGqWvsBVmfnruXgTcNyTlEiSA==
-  dependencies:
-    browserslist "^4.8.3"
-    semver "7.0.0"
-
-core-js-pure@^3.0.0:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.4.tgz#4bf1ba866e25814f149d4e9aaa08c36173506e3a"
-  integrity sha512-epIhRLkXdgv32xIUFaaAry2wdxZYBi6bgM7cB136dzzXXa+dFyRLTZeLUJxnd8ShrmyVXBub63n2NHo2JAt8Cw==
-
-core-js@^1.0.0:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
-  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
-
-core-js@^2.0.0, core-js@^2.4.0, core-js@^2.6.5:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
-  integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
-
-core-js@^3.0.0:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.4.1.tgz#76dd6828412900ab27c8ce0b22e6114d7ce21b18"
-  integrity sha512-KX/dnuY/J8FtEwbnrzmAjUYgLqtk+cxM86hfG60LGiW3MmltIc2yAmDgBgEkfm0blZhUrdr1Zd84J2Y14mLxzg==
-
-core-js@^3.6.4:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
-  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
-
-core-util-is@1.0.2, core-util-is@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
-cosmiconfig@^5.0.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
-  integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
-  dependencies:
-    import-fresh "^2.0.0"
-    is-directory "^0.3.1"
-    js-yaml "^3.13.1"
-    parse-json "^4.0.0"
-
-crc@3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/crc/-/crc-3.3.0.tgz#fa622e1bc388bf257309082d6b65200ce67090ba"
-  integrity sha1-+mIuG8OIvyVzCQgta2UgDOZwkLo=
-
-create-ecdh@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
-  integrity sha512-GbEHQPMOswGpKXM9kCWVrremUcBmjteUaQ01T9rkKCPDXfUHX0IoP9LpHYo2NPFampa4e+/pFDc3jQdxrxQLaw==
-  dependencies:
-    bn.js "^4.1.0"
-    elliptic "^6.0.0"
-
-create-hash@^1.1.0, create-hash@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
-  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
-  dependencies:
-    cipher-base "^1.0.1"
-    inherits "^2.0.1"
-    md5.js "^1.3.4"
-    ripemd160 "^2.0.1"
-    sha.js "^2.4.0"
-
-create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
-  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
-  dependencies:
-    cipher-base "^1.0.3"
-    create-hash "^1.1.0"
-    inherits "^2.0.1"
-    ripemd160 "^2.0.0"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
-cross-spawn@^5.0.1:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
-  integrity sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=
-  dependencies:
-    lru-cache "^4.0.1"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
-cross-spawn@^6.0.0, cross-spawn@^6.0.5:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
-  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
-  dependencies:
-    nice-try "^1.0.4"
-    path-key "^2.0.1"
-    semver "^5.5.0"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
-cross-spawn@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
-  integrity sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==
-  dependencies:
-    path-key "^3.1.0"
-    shebang-command "^2.0.0"
-    which "^2.0.1"
-
-cross-spawn@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.2.tgz#d0d7dcfa74e89115c7619f4f721a94e1fdb716d6"
-  integrity sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==
-  dependencies:
-    path-key "^3.1.0"
-    shebang-command "^2.0.0"
-    which "^2.0.1"
-
-crypto-browserify@^3.0.0:
-  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
-  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
-  dependencies:
-    browserify-cipher "^1.0.0"
-    browserify-sign "^4.0.0"
-    create-ecdh "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.0"
-    diffie-hellman "^5.0.0"
-    inherits "^2.0.1"
-    pbkdf2 "^3.0.3"
-    public-encrypt "^4.0.0"
-    randombytes "^2.0.0"
-    randomfill "^1.0.3"
-
-crypto-random-string@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
-  integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
-
-crypto-random-string@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
-  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
-
-csrf@~3.0.0:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/csrf/-/csrf-3.0.6.tgz#b61120ddceeafc91e76ed5313bb5c0b2667b710a"
-  integrity sha1-thEg3c7q/JHnbtUxO7XAsmZ7cQo=
-  dependencies:
-    rndm "1.2.0"
-    tsscmp "1.0.5"
-    uid-safe "2.1.4"
-
-css-color-names@0.0.4, css-color-names@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
-  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
-
-css-declaration-sorter@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz#c198940f63a76d7e36c1e71018b001721054cb22"
-  integrity sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==
-  dependencies:
-    postcss "^7.0.1"
-    timsort "^0.3.0"
-
-css-in-js-utils@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
-  integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
-  dependencies:
-    hyphenate-style-name "^1.0.2"
-    isobject "^3.0.1"
-
-css-select-base-adapter@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
-  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
-
-css-select@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
-  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
-  dependencies:
-    boolbase "^1.0.0"
-    css-what "^3.2.1"
-    domutils "^1.7.0"
-    nth-check "^1.0.2"
-
-css-select@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
-  integrity sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=
-  dependencies:
-    boolbase "~1.0.0"
-    css-what "2.1"
-    domutils "1.5.1"
-    nth-check "~1.0.1"
-
-css-tree@1.0.0-alpha.37:
-  version "1.0.0-alpha.37"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
-  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
-  dependencies:
-    mdn-data "2.0.4"
-    source-map "^0.6.1"
-
-css-what@2.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
-  integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
-
-css-what@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1"
-  integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==
-
-css@2.X, css@^2.2.1:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
-  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
-  dependencies:
-    inherits "^2.0.3"
-    source-map "^0.6.1"
-    source-map-resolve "^0.5.2"
-    urix "^0.1.0"
-
-cssesc@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
-  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
-
-cssnano-preset-default@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
-  integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==
-  dependencies:
-    css-declaration-sorter "^4.0.1"
-    cssnano-util-raw-cache "^4.0.1"
-    postcss "^7.0.0"
-    postcss-calc "^7.0.1"
-    postcss-colormin "^4.0.3"
-    postcss-convert-values "^4.0.1"
-    postcss-discard-comments "^4.0.2"
-    postcss-discard-duplicates "^4.0.2"
-    postcss-discard-empty "^4.0.1"
-    postcss-discard-overridden "^4.0.1"
-    postcss-merge-longhand "^4.0.11"
-    postcss-merge-rules "^4.0.3"
-    postcss-minify-font-values "^4.0.2"
-    postcss-minify-gradients "^4.0.2"
-    postcss-minify-params "^4.0.2"
-    postcss-minify-selectors "^4.0.2"
-    postcss-normalize-charset "^4.0.1"
-    postcss-normalize-display-values "^4.0.2"
-    postcss-normalize-positions "^4.0.2"
-    postcss-normalize-repeat-style "^4.0.2"
-    postcss-normalize-string "^4.0.2"
-    postcss-normalize-timing-functions "^4.0.2"
-    postcss-normalize-unicode "^4.0.1"
-    postcss-normalize-url "^4.0.1"
-    postcss-normalize-whitespace "^4.0.2"
-    postcss-ordered-values "^4.1.2"
-    postcss-reduce-initial "^4.0.3"
-    postcss-reduce-transforms "^4.0.2"
-    postcss-svgo "^4.0.2"
-    postcss-unique-selectors "^4.0.1"
-
-cssnano-util-get-arguments@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz#ed3a08299f21d75741b20f3b81f194ed49cc150f"
-  integrity sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=
-
-cssnano-util-get-match@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz#c0e4ca07f5386bb17ec5e52250b4f5961365156d"
-  integrity sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=
-
-cssnano-util-raw-cache@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz#b26d5fd5f72a11dfe7a7846fb4c67260f96bf282"
-  integrity sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==
-  dependencies:
-    postcss "^7.0.0"
-
-cssnano-util-same-parent@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
-  integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
-
-cssnano@4.1.10:
-  version "4.1.10"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
-  integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
-  dependencies:
-    cosmiconfig "^5.0.0"
-    cssnano-preset-default "^4.0.7"
-    is-resolvable "^1.0.0"
-    postcss "^7.0.0"
-
-csso@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.2.tgz#e5f81ab3a56b8eefb7f0092ce7279329f454de3d"
-  integrity sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==
-  dependencies:
-    css-tree "1.0.0-alpha.37"
-
-cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@~0.3.6:
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
-  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
-
-cssom@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
-  integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
-
-cssstyle@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.4.0.tgz#9d31328229d3c565c61e586b02041a28fccdccf1"
-  integrity sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==
-  dependencies:
-    cssom "0.3.x"
-
-cssstyle@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.2.0.tgz#e4c44debccd6b7911ed617a4395e5754bba59992"
-  integrity sha512-sEb3XFPx3jNnCAMtqrXPDeSgQr+jojtCeNf8cvMNMh1cG970+lljssvQDzPq6lmmJu2Vhqood/gtEomBiHOGnA==
-  dependencies:
-    cssom "~0.3.6"
-
-csurf@~1.8.3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/csurf/-/csurf-1.8.3.tgz#23f2a13bf1d8fce1d0c996588394442cba86a56a"
-  integrity sha1-I/KhO/HY/OHQyZZYg5RELLqGpWo=
-  dependencies:
-    cookie "0.1.3"
-    cookie-signature "1.0.6"
-    csrf "~3.0.0"
-    http-errors "~1.3.1"
-
-currently-unhandled@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
-  integrity sha1-mI3zP+qxke95mmE2nddsF635V+o=
-  dependencies:
-    array-find-index "^1.0.1"
-
-custom-event@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
-  integrity sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=
-
-d@1, d@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
-  integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
-  dependencies:
-    es5-ext "^0.10.50"
-    type "^1.0.1"
-
-dargs@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc"
-  integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==
-
-dash-ast@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/dash-ast/-/dash-ast-1.0.0.tgz#12029ba5fb2f8aa6f0a861795b23c1b4b6c27d37"
-  integrity sha512-Vy4dx7gquTeMcQR/hDkYLGUnwVil6vk4FOOct+djUnHOUWt+zJPJAaRIXaAFkPXtJjvlY7o3rfRu0/3hpnwoUA==
-
-dashdash@^1.12.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
-  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
-  dependencies:
-    assert-plus "^1.0.0"
-
-data-urls@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.1.0.tgz#15ee0582baa5e22bb59c77140da8f9c76963bbfe"
-  integrity sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==
-  dependencies:
-    abab "^2.0.0"
-    whatwg-mimetype "^2.2.0"
-    whatwg-url "^7.0.0"
-
-data-urls@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
-  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
-  dependencies:
-    abab "^2.0.3"
-    whatwg-mimetype "^2.3.0"
-    whatwg-url "^8.0.0"
-
-date-format@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/date-format/-/date-format-2.1.0.tgz#31d5b5ea211cf5fd764cd38baf9d033df7e125cf"
-  integrity sha512-bYQuGLeFxhkxNOF3rcMtiZxvCBAquGzZm6oWA1oZ0g2THUzivaRhv8uOhdr19LmoobSOLoIAxeUK2RdbM8IFTA==
-
-date-format@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/date-format/-/date-format-3.0.0.tgz#eb8780365c7d2b1511078fb491e6479780f3ad95"
-  integrity sha512-eyTcpKOcamdhWJXj56DpQMo1ylSQpcGtGKXcU0Tb97+K56/CF5amAqqqNj0+KvA0iw2ynxtHWFsPDSClCxe48w==
-
-date-now@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
-  integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
-
-date-time@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/date-time/-/date-time-2.1.0.tgz#0286d1b4c769633b3ca13e1e62558d2dbdc2eba2"
-  integrity sha512-/9+C44X7lot0IeiyfgJmETtRMhBidBYM2QFFIkGa0U1k+hSyY87Nw7PY3eDqpvCBm7I3WCSfPeZskW/YYq6m4g==
-  dependencies:
-    time-zone "^1.0.0"
-
-dateformat@^1.0.7-1.2.3:
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-1.0.12.tgz#9f124b67594c937ff706932e4a642cca8dbbfee9"
-  integrity sha1-nxJLZ1lMk3/3BpMuSmQsyo27/uk=
-  dependencies:
-    get-stdin "^4.0.1"
-    meow "^3.3.0"
-
-debounce@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
-  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
-
-debug-fabulous@1.X:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/debug-fabulous/-/debug-fabulous-1.1.0.tgz#af8a08632465224ef4174a9f06308c3c2a1ebc8e"
-  integrity sha512-GZqvGIgKNlUnHUPQhepnUZFIMoi3dgZKQBzKDeL2g7oJF9SNAji/AAu36dusFUas0O+pae74lNeoIPHqXWDkLg==
-  dependencies:
-    debug "3.X"
-    memoizee "0.4.X"
-    object-assign "4.X"
-
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
-  dependencies:
-    ms "2.0.0"
-
-debug@3.2.6, debug@3.X, debug@^3.0.0, debug@^3.1.0, debug@^3.2.6:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
-  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
-  dependencies:
-    ms "^2.1.1"
-
-debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@~4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
-  dependencies:
-    ms "^2.1.1"
-
-debug@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.0.tgz#373687bffa678b38b1cd91f861b63850035ddc87"
-  integrity sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==
-  dependencies:
-    ms "^2.1.1"
-
-debug@~2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
-  integrity sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=
-  dependencies:
-    ms "0.7.1"
-
-debug@~3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
-  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
-  dependencies:
-    ms "2.0.0"
-
-decamelize-keys@^1.0.0, decamelize-keys@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
-  integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=
-  dependencies:
-    decamelize "^1.1.0"
-    map-obj "^1.0.0"
-
-decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
-
-decimal.js@^10.2.0:
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.0.tgz#39466113a9e036111d02f82489b5fd6b0b5ed231"
-  integrity sha512-vDPw+rDgn3bZe1+F/pyEwb1oMG2XTlRVgAa6B4KccTEpYgF8w6eQllVbQcfIJnZyvzFtFpxnpGtx8dd7DJp/Rw==
-
-decode-uri-component@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
-  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
-
-decompress-response@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-3.3.0.tgz#80a4dd323748384bfa248083622aedec982adff3"
-  integrity sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=
-  dependencies:
-    mimic-response "^1.0.0"
-
-deep-eql@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
-  integrity sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==
-  dependencies:
-    type-detect "^4.0.0"
-
-deep-equal@*, deep-equal@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.0.tgz#3103cdf8ab6d32cf4a8df7865458f2b8d33f3745"
-  integrity sha512-ZbfWJq/wN1Z273o7mUSjILYqehAktR2NVoSrOukDkU9kg2v/Uv89yU4Cvz8seJeAmtN5oqiefKq8FPuXOboqLw==
-  dependencies:
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.1"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.2.0"
-
-deep-extend@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
-  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
-
-deep-is@^0.1.3, deep-is@~0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
-  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
-
-deepmerge@4.2.2, deepmerge@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
-  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
-
-deepmerge@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
-  integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
-
-default-compare@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f"
-  integrity sha512-QWfXlM0EkAbqOCbD/6HjdwT19j7WCkMyiRhWilc4H9/5h/RzTF9gv5LYh1+CmDV5d1rki6KAWLtQale0xt20eQ==
-  dependencies:
-    kind-of "^5.0.2"
-
-default-resolution@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/default-resolution/-/default-resolution-2.0.0.tgz#bcb82baa72ad79b426a76732f1a81ad6df26d684"
-  integrity sha1-vLgrqnKtebQmp2cy8aga1t8m1oQ=
-
-defaults@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
-  integrity sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=
-  dependencies:
-    clone "^1.0.2"
-
-defer-to-connect@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.0.2.tgz#4bae758a314b034ae33902b5aac25a8dd6a8633e"
-  integrity sha512-k09hcQcTDY+cwgiwa6PYKLm3jlagNzQ+RSvhjzESOGOx+MNOuXkxTfEvPrO1IOQ81tArCFYQgi631clB70RpQw==
-
-define-properties@^1.1.2, define-properties@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
-  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
-  dependencies:
-    object-keys "^1.0.12"
-
-define-property@^0.2.5:
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
-  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
-  dependencies:
-    is-descriptor "^0.1.0"
-
-define-property@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
-  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
-  dependencies:
-    is-descriptor "^1.0.0"
-
-define-property@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
-  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
-  dependencies:
-    is-descriptor "^1.0.2"
-    isobject "^3.0.1"
-
-defined@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
-  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
-
-del@5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/del/-/del-5.1.0.tgz#d9487c94e367410e6eff2925ee58c0c84a75b3a7"
-  integrity sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==
-  dependencies:
-    globby "^10.0.1"
-    graceful-fs "^4.2.2"
-    is-glob "^4.0.1"
-    is-path-cwd "^2.2.0"
-    is-path-inside "^3.0.1"
-    p-map "^3.0.0"
-    rimraf "^3.0.0"
-    slash "^3.0.0"
-
-del@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
-  integrity sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
-  dependencies:
-    "@types/glob" "^7.1.1"
-    globby "^6.1.0"
-    is-path-cwd "^2.0.0"
-    is-path-in-cwd "^2.0.0"
-    p-map "^2.0.0"
-    pify "^4.0.1"
-    rimraf "^2.6.3"
-
-delay@4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/delay/-/delay-4.3.0.tgz#efeebfb8f545579cb396b3a722443ec96d14c50e"
-  integrity sha512-Lwaf3zVFDMBop1yDuFZ19F9WyGcZcGacsbdlZtWjQmM50tOcMntm1njF/Nb/Vjij3KaSvCF+sEYGKrrjObu2NA==
-
-delayed-stream@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
-  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
-
-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
-  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
-
-denque@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/denque/-/denque-1.4.1.tgz#6744ff7641c148c3f8a69c307e51235c1f4a37cf"
-  integrity sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ==
-
-depd@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.0.1.tgz#80aec64c9d6d97e65cc2a9caa93c0aa6abf73aaa"
-  integrity sha1-gK7GTJ1tl+ZcwqnKqTwKpqv3Oqo=
-
-depd@~1.1.0, depd@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
-  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
-
-depd@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
-  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
-
-deps-sort@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/deps-sort/-/deps-sort-2.0.0.tgz#091724902e84658260eb910748cccd1af6e21fb5"
-  integrity sha1-CRckkC6EZYJg65EHSMzNGvbiH7U=
-  dependencies:
-    JSONStream "^1.0.3"
-    shasum "^1.0.0"
-    subarg "^1.0.0"
-    through2 "^2.0.0"
-
-derequire@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/derequire/-/derequire-2.1.1.tgz#342527ff5a460d4dd6745085e4091a4697a6803c"
-  integrity sha512-5hGVgKAEGhSGZM02abtkwDzqEOXun1dP9Ocw0yh7Pz7j70k4SNk7WURm93YyHbs2PcieRyX8m4ta1glGakw84Q==
-  dependencies:
-    acorn "^7.1.1"
-    concat-stream "^1.4.6"
-    escope "^3.6.0"
-    through2 "^2.0.0"
-    yargs "^15.3.1"
-
-des.js@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
-  integrity sha1-wHTS4qpqipoH29YfmhXCzYPsjsw=
-  dependencies:
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-
-destroy@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
-  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
-
-detect-file@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
-  integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
-
-detect-indent@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
-  integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
-
-detect-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
-
-detect-newline@2.X, detect-newline@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
-  integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
-
-detect-newline@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
-  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
-
-detect-node@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
-  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
-
-detective@^5.0.2:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
-  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
-  dependencies:
-    acorn-node "^1.6.1"
-    defined "^1.0.0"
-    minimist "^1.1.1"
-
-di@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c"
-  integrity sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=
-
-dicer@0.2.5:
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/dicer/-/dicer-0.2.5.tgz#5996c086bb33218c812c090bddc09cd12facb70f"
-  integrity sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=
-  dependencies:
-    readable-stream "1.1.x"
-    streamsearch "0.1.2"
-
-diff-sequences@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
-  integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
-
-diff-sequences@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.0.0.tgz#0760059a5c287637b842bd7085311db7060e88a6"
-  integrity sha512-JC/eHYEC3aSS0vZGjuoc4vHA0yAQTzhQQldXMeMF+JlxLGJlCO38Gma82NV9gk1jGFz8mDzUMeaKXvjRRdJ2dg==
-
-diff@4.0.2, diff@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
-  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
-
-diffie-hellman@^5.0.0:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
-  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
-  dependencies:
-    bn.js "^4.1.0"
-    miller-rabin "^4.0.0"
-    randombytes "^2.0.0"
-
-dir-glob@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
-  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
-  dependencies:
-    path-type "^4.0.0"
-
-direction@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/direction/-/direction-1.0.3.tgz#5030e1e091e923904067d015dbaafd08f4d27d26"
-  integrity sha512-8bHRqMt4w/kND19KBksE4NOJo+gIOPuiZfxQvbd6xikfKbuNBYBdLIw0hA/4lWzBaDpwpW+Olmg1BjD9+0LU2w==
-
-discontinuous-range@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
-  integrity sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=
-
-doctrine@3.0.0, doctrine@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
-  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
-  dependencies:
-    esutils "^2.0.2"
-
-doctrine@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
-  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
-  dependencies:
-    esutils "^2.0.2"
-
-dom-serialize@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"
-  integrity sha1-ViromZ9Evl6jB29UGdzVnrQ6yVs=
-  dependencies:
-    custom-event "~1.0.0"
-    ent "~2.2.0"
-    extend "^3.0.0"
-    void-elements "^2.0.0"
-
-dom-serializer@0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
-  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
-  dependencies:
-    domelementtype "^2.0.1"
-    entities "^2.0.0"
-
-dom-serializer@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"
-  integrity sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==
-  dependencies:
-    domelementtype "^1.3.0"
-    entities "^1.1.1"
-
-domain-browser@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
-  integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
-
-domelementtype@1, domelementtype@^1.3.0, domelementtype@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
-  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
-
-domelementtype@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
-  integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
-
-domexception@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
-  integrity sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==
-  dependencies:
-    webidl-conversions "^4.0.2"
-
-domexception@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
-  integrity sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==
-  dependencies:
-    webidl-conversions "^5.0.0"
-
-domhandler@^2.3.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
-  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
-  dependencies:
-    domelementtype "1"
-
-dompurify@2.0.7:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.0.7.tgz#f8266ad38fe1602fb5b3222f31eedbf5c16c4fd5"
-  integrity sha512-S3O0lk6rFJtO01ZTzMollCOGg+WAtCwS3U5E2WSDY/x/sy7q70RjEC4Dmrih5/UqzLLB9XoKJ8KqwBxaNvBu4A==
-
-domutils@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
-  integrity sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
-domutils@^1.5.1, domutils@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
-  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
-dot-prop@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
-  integrity sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==
-  dependencies:
-    is-obj "^1.0.0"
-
-dot-prop@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.1.0.tgz#bdd8c986a77b83e3fca524e53786df916cabbd8a"
-  integrity sha512-n1oC6NBF+KM9oVXtjmen4Yo7HyAVWV2UUl50dCYJdw2924K6dX9bf9TTTWaKtYlRn0FEtxG27KS80ayVLixxJA==
-  dependencies:
-    is-obj "^2.0.0"
-
-dot-prop@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb"
-  integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==
-  dependencies:
-    is-obj "^2.0.0"
-
-dtrace-provider@~0.8:
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/dtrace-provider/-/dtrace-provider-0.8.8.tgz#2996d5490c37e1347be263b423ed7b297fb0d97e"
-  integrity sha512-b7Z7cNtHPhH9EJhNNbbeqTcXB8LGFFZhq1PGgEvpeHlzd36bhbdTWoE/Ba/YguqpBSlAPKnARWhVlhunCMwfxg==
-  dependencies:
-    nan "^2.14.0"
-
-duplexer2@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
-  integrity sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=
-  dependencies:
-    readable-stream "~1.1.9"
-
-duplexer2@^0.1.2, duplexer2@~0.1.0, duplexer2@~0.1.2:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
-  integrity sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=
-  dependencies:
-    readable-stream "^2.0.2"
-
-duplexer3@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
-  integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
-
-duplexer@^0.1.1, duplexer@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
-  integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
-
-duplexify@^3.5.0, duplexify@^3.6.0:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
-  integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
-  dependencies:
-    end-of-stream "^1.0.0"
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-    stream-shift "^1.0.0"
-
-duplexify@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-4.1.1.tgz#7027dc374f157b122a8ae08c2d3ea4d2d953aa61"
-  integrity sha512-DY3xVEmVHTv1wSzKNbwoU6nVjzI369Y6sPoqfYr0/xlx3IdX2n94xIszTcjPO8W8ZIv0Wb0PXNcjuZyT4wiICA==
-  dependencies:
-    end-of-stream "^1.4.1"
-    inherits "^2.0.3"
-    readable-stream "^3.1.1"
-    stream-shift "^1.0.0"
-
-each-props@^1.3.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/each-props/-/each-props-1.3.2.tgz#ea45a414d16dd5cfa419b1a81720d5ca06892333"
-  integrity sha512-vV0Hem3zAGkJAyU7JSjixeU66rwdynTAa1vofCrSA5fEln+m67Az9CcnkVD776/fsN/UjIWmBDoNRS6t6G9RfA==
-  dependencies:
-    is-plain-object "^2.0.1"
-    object.defaults "^1.1.0"
-
-ebnf-parser@0.1.10:
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/ebnf-parser/-/ebnf-parser-0.1.10.tgz#cd1f6ba477c5638c40c97ed9b572db5bab5d8331"
-  integrity sha1-zR9rpHfFY4xAyX7ZtXLbW6tdgzE=
-
-ecc-jsbn@~0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
-  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
-  dependencies:
-    jsbn "~0.1.0"
-    safer-buffer "^2.1.0"
-
-edge-launcher@1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/edge-launcher/-/edge-launcher-1.2.2.tgz#eb40aafbd067a6ea76efffab0647bcd5509b37b2"
-  integrity sha1-60Cq+9Bnpup27/+rBke81VCbN7I=
-
-ee-first@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
-  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
-
-electron-to-chromium@^1.3.363:
-  version "1.3.372"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.372.tgz#fb61b6dfe06f3278a384d084ebef75d463ec7580"
-  integrity sha512-77a4jYC52OdisHM+Tne7dgWEvQT1FoNu/jYl279pP88ZtG4ZRIPyhQwAKxj6C2rzsyC1OwsOds9JlZtNncSz6g==
-
-electron-to-chromium@^1.3.413:
-  version "1.3.446"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.446.tgz#12c336bc858e04d6b614a488f32f2dd89561601f"
-  integrity sha512-CLQaFuvkKqR9FD2G3cJrr1fV7DRMXiAKWLP2F8cxtvvtzAS7Tubt0kF47/m+uE61kiT+I7ZEn7HqLnmWdOhmuA==
-
-elliptic@^6.0.0:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.1.tgz#c380f5f909bf1b9b4428d028cd18d3b0efd6b52b"
-  integrity sha512-xvJINNLbTeWQjrl6X+7eQCrIy/YPv5XCpKW6kB5mKvtnGILoLDcySuwomfdzt0BMdLNVnuRNTuzKNHj0bva1Cg==
-  dependencies:
-    bn.js "^4.4.0"
-    brorand "^1.0.1"
-    hash.js "^1.0.0"
-    hmac-drbg "^1.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.0"
-
-email-addresses@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/email-addresses/-/email-addresses-3.1.0.tgz#cabf7e085cbdb63008a70319a74e6136188812fb"
-  integrity sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==
-
-emittery@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.4.1.tgz#abe9d3297389ba424ac87e53d1c701962ce7433d"
-  integrity sha512-r4eRSeStEGf6M5SKdrQhhLK5bOwOBxQhIE3YSTnZE3GpKiLfnnhE+tPtrJE79+eDJgm39BM6LSoI8SCx4HbwlQ==
-
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
-  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
-
-emoji-regex@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
-  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
-
-empower-core@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/empower-core/-/empower-core-1.2.0.tgz#ce3fb2484d5187fa29c23fba8344b0b2fdf5601c"
-  integrity sha512-g6+K6Geyc1o6FdXs9HwrXleCFan7d66G5xSCfSF7x1mJDCes6t0om9lFQG3zOrzh3Bkb/45N0cZ5Gqsf7YrzGQ==
-  dependencies:
-    call-signature "0.0.2"
-    core-js "^2.0.0"
-
-encodeurl@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
-  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
-
-encoding@^0.1.11:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
-  integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
-  dependencies:
-    iconv-lite "~0.4.13"
-
-end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
-  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
-  dependencies:
-    once "^1.4.0"
-
-engine.io-client@~3.4.0:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.4.2.tgz#4fb2ef2b1fe1d3aa1c621c6a8d87f1fc55426b50"
-  integrity sha512-AWjc1Xg06a6UPFOBAzJf48W1UR/qKYmv/ubgSCumo9GXgvL/xGIvo05dXoBL+2NTLMipDI7in8xK61C17L25xg==
-  dependencies:
-    component-emitter "~1.3.0"
-    component-inherit "0.0.3"
-    debug "~4.1.0"
-    engine.io-parser "~2.2.0"
-    has-cors "1.1.0"
-    indexof "0.0.1"
-    parseqs "0.0.5"
-    parseuri "0.0.5"
-    ws "~6.1.0"
-    xmlhttprequest-ssl "~1.5.4"
-    yeast "0.1.2"
-
-engine.io-parser@~2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.2.0.tgz#312c4894f57d52a02b420868da7b5c1c84af80ed"
-  integrity sha512-6I3qD9iUxotsC5HEMuuGsKA0cXerGz+4uGcXQEkfBidgKf0amsjrrtwcbwK/nzpZBxclXlV7gGl9dgWvu4LF6w==
-  dependencies:
-    after "0.8.2"
-    arraybuffer.slice "~0.0.7"
-    base64-arraybuffer "0.1.5"
-    blob "0.0.5"
-    has-binary2 "~1.0.2"
-
-engine.io@~3.4.0:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.4.1.tgz#a61cbc13fa0cb27d9453fd079a29ee980564b069"
-  integrity sha512-8MfIfF1/IIfxuc2gv5K+XlFZczw/BpTvqBdl0E2fBLkYQp4miv4LuDTVtYt4yMyaIFLEr4vtaSgV4mjvll8Crw==
-  dependencies:
-    accepts "~1.3.4"
-    base64id "2.0.0"
-    cookie "0.3.1"
-    debug "~4.1.0"
-    engine.io-parser "~2.2.0"
-    ws "^7.1.2"
-
-ent@~2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
-  integrity sha1-6WQhkyWiHQX0RGai9obtbOX13R0=
-
-entities@^1.1.1, entities@~1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
-  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
-
-entities@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
-  integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
-
-entities@~2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.2.tgz#ac74db0bba8d33808bbf36809c3a5c3683531436"
-  integrity sha512-dmD3AvJQBUjKpcNkoqr+x+IF0SdRtPz9Vk0uTy4yWqga9ibB6s4v++QFWNohjiUGoMlF552ZvNyXDxz5iW0qmw==
-
-env-paths@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
-  integrity sha512-6u0VYSCo/OW6IoD5WCLLy9JUGARbamfSavcNXry/eu8aHVFei6CD3Sw+VGX5alea1i9pgPHW0mbu6Xj0uBh7gA==
-
-envify@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/envify/-/envify-4.1.0.tgz#f39ad3db9d6801b4e6b478b61028d3f0b6819f7e"
-  integrity sha512-IKRVVoAYr4pIx4yIWNsz9mOsboxlNXiu7TNBnem/K/uTHdkyzXWDzHCK7UTolqBbgaBz0tQHsD3YNls0uIIjiw==
-  dependencies:
-    esprima "^4.0.0"
-    through "~2.3.4"
-
-enzyme-adapter-preact-pure@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-preact-pure/-/enzyme-adapter-preact-pure-2.2.0.tgz#8f6791d1f6500fa013a9d35cb2eecd44eedd6503"
-  integrity sha512-wb483yuBIk5CV+E9ardATYQxVywwWRo+Z3IaIECGTOLjWQYiv9NMSJGp0qXPKGp/zj9qS9yP1/qHEE4k9sEeYA==
-  dependencies:
-    array.prototype.flatmap "^1.2.1"
-    preact-render-to-string "^4.1.0"
-
-enzyme-shallow-equal@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.1.tgz#7afe03db3801c9b76de8440694096412a8d9d49e"
-  integrity sha512-hGA3i1so8OrYOZSM9whlkNmVHOicJpsjgTzC+wn2JMJXhq1oO4kA4bJ5MsfzSIcC71aLDKzJ6gZpIxrqt3QTAQ==
-  dependencies:
-    has "^1.0.3"
-    object-is "^1.0.2"
-
-enzyme@3.11.0:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28"
-  integrity sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==
-  dependencies:
-    array.prototype.flat "^1.2.3"
-    cheerio "^1.0.0-rc.3"
-    enzyme-shallow-equal "^1.0.1"
-    function.prototype.name "^1.1.2"
-    has "^1.0.3"
-    html-element-map "^1.2.0"
-    is-boolean-object "^1.0.1"
-    is-callable "^1.1.5"
-    is-number-object "^1.0.4"
-    is-regex "^1.0.5"
-    is-string "^1.0.5"
-    is-subset "^0.1.1"
-    lodash.escape "^4.0.1"
-    lodash.isequal "^4.5.0"
-    object-inspect "^1.7.0"
-    object-is "^1.0.2"
-    object.assign "^4.1.0"
-    object.entries "^1.1.1"
-    object.values "^1.1.1"
-    raf "^3.4.1"
-    rst-selector-parser "^2.2.3"
-    string.prototype.trim "^1.2.1"
-
-equal-length@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/equal-length/-/equal-length-1.0.1.tgz#21ca112d48ab24b4e1e7ffc0e5339d31fdfc274c"
-  integrity sha1-IcoRLUirJLTh5//A5TOdMf38J0w=
-
-error-ex@^1.2.0, error-ex@^1.3.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
-  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
-  dependencies:
-    is-arrayish "^0.2.1"
-
-error@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/error/-/error-7.2.0.tgz#80c989885635b41df9309d145834a4f125ae2245"
-  integrity sha512-M6t3j3Vt3uDicrViMP5fLq2AeADNrCVFD8Oj4Qt2MHsX0mPYG7D5XdnEfSdRpaHQzjAJ19wu+I1mw9rQYMTAPg==
-  dependencies:
-    string-template "~0.2.1"
-
-errorhandler@~1.4.2:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/errorhandler/-/errorhandler-1.4.3.tgz#b7b70ed8f359e9db88092f2d20c0f831420ad83f"
-  integrity sha1-t7cO2PNZ6duICS8tIMD4MUIK2D8=
-  dependencies:
-    accepts "~1.3.0"
-    escape-html "~1.0.3"
-
-es-abstract@^1.12.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2:
-  version "1.17.4"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.4.tgz#e3aedf19706b20e7c2594c35fc0d57605a79e184"
-  integrity sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.1.5"
-    is-regex "^1.0.5"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimleft "^2.1.1"
-    string.prototype.trimright "^2.1.1"
-
-es-abstract@^1.13.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.15.0.tgz#8884928ec7e40a79e3c9bc812d37d10c8b24cc57"
-  integrity sha512-bhkEqWJ2t2lMeaJDuk7okMkJWI/yqgH/EoGwpcvv0XW9RWQsRspI4wt6xuyuvMvvQE3gg/D9HXppgk21w78GyQ==
-  dependencies:
-    es-to-primitive "^1.2.0"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.0"
-    is-callable "^1.1.4"
-    is-regex "^1.0.4"
-    object-inspect "^1.6.0"
-    object-keys "^1.1.1"
-    string.prototype.trimleft "^2.1.0"
-    string.prototype.trimright "^2.1.0"
-
-es-abstract@^1.17.0:
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.0.tgz#f42a517d0036a5591dbb2c463591dc8bb50309b1"
-  integrity sha512-yYkE07YF+6SIBmg1MsJ9dlub5L48Ek7X0qz+c/CPCHS9EBXfESorzng4cJQjJW5/pB6vDF41u7F8vUhLVDqIug==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.1.5"
-    is-regex "^1.0.5"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimleft "^2.1.1"
-    string.prototype.trimright "^2.1.1"
-
-es-abstract@^1.17.4:
-  version "1.17.5"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9"
-  integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.1.5"
-    is-regex "^1.0.5"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimleft "^2.1.1"
-    string.prototype.trimright "^2.1.1"
-
-es-array-method-boxes-properly@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
-  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
-
-es-get-iterator@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
-  dependencies:
-    es-abstract "^1.17.4"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
-es-to-primitive@^1.2.0, es-to-primitive@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
-  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
-  dependencies:
-    is-callable "^1.1.4"
-    is-date-object "^1.0.1"
-    is-symbol "^1.0.2"
-
-es5-ext@^0.10.35, es5-ext@^0.10.45, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@^0.10.51, es5-ext@~0.10.14, es5-ext@~0.10.2, es5-ext@~0.10.46:
-  version "0.10.51"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.51.tgz#ed2d7d9d48a12df86e0299287e93a09ff478842f"
-  integrity sha512-oRpWzM2WcLHVKpnrcyB7OW8j/s67Ba04JCm0WnNv3RiABSvs7mrQlutB8DBv793gKcp0XENR8Il8WxGTlZ73gQ==
-  dependencies:
-    es6-iterator "~2.0.3"
-    es6-symbol "~3.1.1"
-    next-tick "^1.0.0"
-
-es6-error@^4.0.1, es6-error@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
-  integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==
-
-es6-iterator@^2.0.1, es6-iterator@^2.0.3, es6-iterator@~2.0.1, es6-iterator@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
-  integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
-  dependencies:
-    d "1"
-    es5-ext "^0.10.35"
-    es6-symbol "^3.1.1"
-
-es6-map@^0.1.3:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.5.tgz#9136e0503dcc06a301690f0bb14ff4e364e949f0"
-  integrity sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=
-  dependencies:
-    d "1"
-    es5-ext "~0.10.14"
-    es6-iterator "~2.0.1"
-    es6-set "~0.1.5"
-    es6-symbol "~3.1.1"
-    event-emitter "~0.3.5"
-
-es6-promise@^4.0.3:
-  version "4.2.8"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
-  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
-
-es6-promisify@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
-  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
-  dependencies:
-    es6-promise "^4.0.3"
-
-es6-set@~0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
-  integrity sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=
-  dependencies:
-    d "1"
-    es5-ext "~0.10.14"
-    es6-iterator "~2.0.1"
-    es6-symbol "3.1.1"
-    event-emitter "~0.3.5"
-
-es6-symbol@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
-  integrity sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=
-  dependencies:
-    d "1"
-    es5-ext "~0.10.14"
-
-es6-symbol@^3.1.1, es6-symbol@~3.1.1:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.2.tgz#859fdd34f32e905ff06d752e7171ddd4444a7ed1"
-  integrity sha512-/ZypxQsArlv+KHpGvng52/Iz8by3EQPxhmbuz8yFG89N/caTFBSbcXONDw0aMjy827gQg26XAjP4uXFvnfINmQ==
-  dependencies:
-    d "^1.0.1"
-    es5-ext "^0.10.51"
-
-es6-weak-map@^2.0.1, es6-weak-map@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.3.tgz#b6da1f16cc2cc0d9be43e6bdbfc5e7dfcdf31d53"
-  integrity sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==
-  dependencies:
-    d "1"
-    es5-ext "^0.10.46"
-    es6-iterator "^2.0.3"
-    es6-symbol "^3.1.1"
-
-escape-html@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.2.tgz#d77d32fa98e38c2f41ae85e9278e0e0e6ba1022c"
-  integrity sha1-130y+pjjjC9BroXpJ44ODmuhAiw=
-
-escape-html@~1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
-  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
-
-escape-string-regexp@1.0.5, escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-escape-string-regexp@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
-  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
-
-escodegen@1.14.2:
-  version "1.14.2"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.2.tgz#14ab71bf5026c2aa08173afba22c6f3173284a84"
-  integrity sha512-InuOIiKk8wwuOFg6x9BQXbzjrQhtyXh46K9bqVTPzSo2FnyMBaYGBMC6PhQy7yxxil9vIedFBweQBMK74/7o8A==
-  dependencies:
-    esprima "^4.0.1"
-    estraverse "^4.2.0"
-    esutils "^2.0.2"
-    optionator "^0.8.1"
-  optionalDependencies:
-    source-map "~0.6.1"
-
-escodegen@1.3.x:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.3.3.tgz#f024016f5a88e046fd12005055e939802e6c5f23"
-  integrity sha1-8CQBb1qI4Eb9EgBQVek5gC5sXyM=
-  dependencies:
-    esprima "~1.1.1"
-    estraverse "~1.5.0"
-    esutils "~1.0.0"
-  optionalDependencies:
-    source-map "~0.1.33"
-
-escodegen@1.8.x:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.8.1.tgz#5a5b53af4693110bebb0867aa3430dd3b70a1018"
-  integrity sha1-WltTr0aTEQvrsIZ6o0MN07cKEBg=
-  dependencies:
-    esprima "^2.7.1"
-    estraverse "^1.9.1"
-    esutils "^2.0.2"
-    optionator "^0.8.1"
-  optionalDependencies:
-    source-map "~0.2.0"
-
-escodegen@^1.14.1:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.1.tgz#ba01d0c8278b5e95a9a45350142026659027a457"
-  integrity sha512-Bmt7NcRySdIfNPfU2ZoXDrrXsG9ZjvDxcAlMfDUgRBjLOWTuIACXPBFJH7Z+cLb40JeQco5toikyc9t9P8E9SQ==
-  dependencies:
-    esprima "^4.0.1"
-    estraverse "^4.2.0"
-    esutils "^2.0.2"
-    optionator "^0.8.1"
-  optionalDependencies:
-    source-map "~0.6.1"
-
-escodegen@^1.9.1:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.12.0.tgz#f763daf840af172bb3a2b6dd7219c0e17f7ff541"
-  integrity sha512-TuA+EhsanGcme5T3R0L80u4t8CpbXQjegRmf7+FPTJrtCTErXFeelblRgHQa1FofEzqYYJmJ/OqjTwREp9qgmg==
-  dependencies:
-    esprima "^3.1.3"
-    estraverse "^4.2.0"
-    esutils "^2.0.2"
-    optionator "^0.8.1"
-  optionalDependencies:
-    source-map "~0.6.1"
-
-escope@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
-  integrity sha1-4Bl16BJ4GhY6ba392AOY3GTIicM=
-  dependencies:
-    es6-map "^0.1.3"
-    es6-weak-map "^2.0.1"
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
-
-eslint-config-prettier@6.11.0:
-  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz#f6d2238c1290d01c859a8b5c1f7d352a0b0da8b1"
-  integrity sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==
-  dependencies:
-    get-stdin "^6.0.0"
-
-eslint-plugin-chai-expect@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-chai-expect/-/eslint-plugin-chai-expect-2.1.0.tgz#9dd1d8e5a80543fdec956f6aef7f83f2241ca92b"
-  integrity sha512-rd0/4mjMV6c3i0o4DKkWI4uaFN9DK707kW+/fDphaDI6HVgxXnhML9Xgt5vHnTXmSSnDhupuCFBgsEAEpchXmQ==
-
-eslint-plugin-eslint-plugin@2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-eslint-plugin/-/eslint-plugin-eslint-plugin-2.2.2.tgz#12c20be154ab8b37497bbc6159d87c14f9d4a863"
-  integrity sha512-JlDG/Bzel1Fl+qbDyP52AaMpgBF7GE3bhlQCWae8MTbwnDvFViCaAyHp8lOvmCOVzHozGalcS3QsuvAX+bOR0w==
-
-eslint-plugin-google-camelcase@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-google-camelcase/-/eslint-plugin-google-camelcase-0.0.2.tgz#0c27555e4782073442d034a3db1f214ee0b37401"
-  integrity sha1-DCdVXkeCBzRC0DSj2x8hTuCzdAE=
-
-eslint-plugin-jasmine@4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jasmine/-/eslint-plugin-jasmine-4.1.1.tgz#afdf8ca6a91e85041d9e0fb650af446874bf8852"
-  integrity sha512-uS7kvt7RPUB/gLDwhJ/Ax0APrmkj7In8VJWkiZLYHafz2Ix74mMRJx82YZZ3zHRa/YOuTL+ig6dW/aKwdNzUuw==
-
-eslint-plugin-jsdoc@25.2.1:
-  version "25.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-25.2.1.tgz#f4d1d6e3f4e78dc549ffd3bbb28dacdbd390bda9"
-  integrity sha512-xVf6asIk/Rp4NmX392K72002Dj8GdPW5dKWYu/tzT86H+Yi3Djeee0VF3Y94Wcj7xTH08C3hGpmtJJdtWnMiqQ==
-  dependencies:
-    comment-parser "^0.7.4"
-    debug "^4.1.1"
-    jsdoctypeparser "^6.1.0"
-    lodash "^4.17.15"
-    regextras "^0.7.1"
-    semver "^6.3.0"
-    spdx-expression-parse "^3.0.0"
-
-eslint-plugin-local@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-local/-/eslint-plugin-local-1.0.0.tgz#f0c07011c95fec42bfb4d909debb6ea035f3b2a4"
-  integrity sha1-8MBwEclf7EK/tNkJ3rtuoDXzsqQ=
-
-eslint-plugin-notice@0.9.10:
-  version "0.9.10"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-notice/-/eslint-plugin-notice-0.9.10.tgz#89cf6377bf1c004a219c4e541321ea9125b408c8"
-  integrity sha512-rF79EuqdJKu9hhTmwUkNeSvLmmq03m/NXq/NHwUENHbdJ0wtoyOjxZBhW4QCug8v5xYE6cGe3AWkGqSIe9KUbQ==
-  dependencies:
-    find-root "^1.1.0"
-    lodash "^4.17.15"
-    metric-lcs "^0.1.2"
-
-eslint-plugin-prettier@3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.3.tgz#ae116a0fc0e598fdae48743a4430903de5b4e6ca"
-  integrity sha512-+HG5jmu/dN3ZV3T6eCD7a4BlAySdN7mLIbJYo0z1cFQuI+r2DiTJEFeF68ots93PsnrMxbzIZ2S/ieX+mkrBeQ==
-  dependencies:
-    prettier-linter-helpers "^1.0.0"
-
-eslint-plugin-react-hooks@4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.4.tgz#aed33b4254a41b045818cacb047b81e6df27fa58"
-  integrity sha512-equAdEIsUETLFNCmmCkiCGq6rkSK5MoJhXFPFYeUebcjKgBmWWcgVOqZyQC8Bv1BwVCnTq9tBxgJFgAJTWoJtA==
-
-eslint-plugin-react@7.20.0:
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.20.0.tgz#f98712f0a5e57dfd3e5542ef0604b8739cd47be3"
-  integrity sha512-rqe1abd0vxMjmbPngo4NaYxTcR3Y4Hrmc/jg4T+sYz63yqlmJRknpEQfmWY+eDWPuMmix6iUIK+mv0zExjeLgA==
-  dependencies:
-    array-includes "^3.1.1"
-    doctrine "^2.1.0"
-    has "^1.0.3"
-    jsx-ast-utils "^2.2.3"
-    object.entries "^1.1.1"
-    object.fromentries "^2.0.2"
-    object.values "^1.1.1"
-    prop-types "^15.7.2"
-    resolve "^1.15.1"
-    string.prototype.matchall "^4.0.2"
-    xregexp "^4.3.0"
-
-eslint-plugin-sort-imports-es6-autofix@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-sort-imports-es6-autofix/-/eslint-plugin-sort-imports-es6-autofix-0.5.0.tgz#dabae09a457eac6e95c52d8edd7855f576d014b6"
-  integrity sha512-KEX2Uz6bAs67jDYiH/OT1xz1E7AzIJJOIRg1F7OnFAfUVlpws3ldSZj5oZySRHfoVkWqDX9GGExYxckdLrWhwg==
-  dependencies:
-    eslint "^6.2.2"
-
-eslint-plugin-sort-requires@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-sort-requires/-/eslint-plugin-sort-requires-2.1.0.tgz#3efad948dc83798219e809f54067c40e55444861"
-  integrity sha1-PvrZSNyDeYIZ6An1QGfEDlVESGE=
-
-eslint-scope@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.0.0.tgz#e87c8887c73e8d1ec84f1ca591645c358bfc8fb9"
-  integrity sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==
-  dependencies:
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
-
-eslint-utils@^1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.2.tgz#166a5180ef6ab7eb462f162fd0e6f2463d7309ab"
-  integrity sha512-eAZS2sEUMlIeCjBeubdj45dmBHQwPHWyBcT1VSYB7o9x9WRRqKxyUoiXlRjyAwzN7YEzHJlYg0NmzDRWx6GP4Q==
-  dependencies:
-    eslint-visitor-keys "^1.0.0"
-
-eslint-utils@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.0.0.tgz#7be1cc70f27a72a76cd14aa698bcabed6890e1cd"
-  integrity sha512-0HCPuJv+7Wv1bACm8y5/ECVfYdfsAm9xmVb7saeFlxjPYALefjhbYoCkBjPdPzGH8wWyTpAez82Fh3VKYEZ8OA==
-  dependencies:
-    eslint-visitor-keys "^1.1.0"
-
-eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
-  integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
-
-eslint@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.0.0.tgz#c35dfd04a4372110bd78c69a8d79864273919a08"
-  integrity sha512-qY1cwdOxMONHJfGqw52UOpZDeqXy8xmD0u8CT6jIstil72jkhURC704W8CFyTPDPllz4z4lu0Ql1+07PG/XdIg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    ajv "^6.10.0"
-    chalk "^4.0.0"
-    cross-spawn "^7.0.2"
-    debug "^4.0.1"
-    doctrine "^3.0.0"
-    eslint-scope "^5.0.0"
-    eslint-utils "^2.0.0"
-    eslint-visitor-keys "^1.1.0"
-    espree "^7.0.0"
-    esquery "^1.2.0"
-    esutils "^2.0.2"
-    file-entry-cache "^5.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^5.0.0"
-    globals "^12.1.0"
-    ignore "^4.0.6"
-    import-fresh "^3.0.0"
-    imurmurhash "^0.1.4"
-    inquirer "^7.0.0"
-    is-glob "^4.0.0"
-    js-yaml "^3.13.1"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
-    lodash "^4.17.14"
-    minimatch "^3.0.4"
-    natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    progress "^2.0.0"
-    regexpp "^3.1.0"
-    semver "^7.2.1"
-    strip-ansi "^6.0.0"
-    strip-json-comments "^3.1.0"
-    table "^5.2.3"
-    text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
-
-eslint@^6.0.0, eslint@^6.2.2:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.5.1.tgz#828e4c469697d43bb586144be152198b91e96ed6"
-  integrity sha512-32h99BoLYStT1iq1v2P9uwpyznQ4M2jRiFB6acitKz52Gqn+vPaMDUTB1bYi1WN4Nquj2w+t+bimYUG83DC55A==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    ajv "^6.10.0"
-    chalk "^2.1.0"
-    cross-spawn "^6.0.5"
-    debug "^4.0.1"
-    doctrine "^3.0.0"
-    eslint-scope "^5.0.0"
-    eslint-utils "^1.4.2"
-    eslint-visitor-keys "^1.1.0"
-    espree "^6.1.1"
-    esquery "^1.0.1"
-    esutils "^2.0.2"
-    file-entry-cache "^5.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^5.0.0"
-    globals "^11.7.0"
-    ignore "^4.0.6"
-    import-fresh "^3.0.0"
-    imurmurhash "^0.1.4"
-    inquirer "^6.4.1"
-    is-glob "^4.0.0"
-    js-yaml "^3.13.1"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.3.0"
-    lodash "^4.17.14"
-    minimatch "^3.0.4"
-    mkdirp "^0.5.1"
-    natural-compare "^1.4.0"
-    optionator "^0.8.2"
-    progress "^2.0.0"
-    regexpp "^2.0.1"
-    semver "^6.1.2"
-    strip-ansi "^5.2.0"
-    strip-json-comments "^3.0.1"
-    table "^5.2.3"
-    text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
-
-esm@^3.2.25:
-  version "3.2.25"
-  resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
-  integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
-
-espower-location-detector@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/espower-location-detector/-/espower-location-detector-1.0.0.tgz#a17b7ecc59d30e179e2bef73fb4137704cb331b5"
-  integrity sha1-oXt+zFnTDheeK+9z+0E3cEyzMbU=
-  dependencies:
-    is-url "^1.2.1"
-    path-is-absolute "^1.0.0"
-    source-map "^0.5.0"
-    xtend "^4.0.0"
-
-espree@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-6.1.1.tgz#7f80e5f7257fc47db450022d723e356daeb1e5de"
-  integrity sha512-EYbr8XZUhWbYCqQRW0duU5LxzL5bETN6AjKBGy1302qqzPaCH10QbRg3Wvco79Z8x9WbiE8HYB4e75xl6qUYvQ==
-  dependencies:
-    acorn "^7.0.0"
-    acorn-jsx "^5.0.2"
-    eslint-visitor-keys "^1.1.0"
-
-espree@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-7.0.0.tgz#8a7a60f218e69f120a842dc24c5a88aa7748a74e"
-  integrity sha512-/r2XEx5Mw4pgKdyb7GNLQNsu++asx/dltf/CI8RFi9oGHxmQFgvLbc5Op4U6i8Oaj+kdslhJtVlEZeAqH5qOTw==
-  dependencies:
-    acorn "^7.1.1"
-    acorn-jsx "^5.2.0"
-    eslint-visitor-keys "^1.1.0"
-
-esprima@1.1.x, esprima@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-1.1.1.tgz#5b6f1547f4d102e670e140c509be6771d6aeb549"
-  integrity sha1-W28VR/TRAuZw4UDFCb5ncdautUk=
-
-esprima@2.7.x, esprima@^2.1, esprima@^2.7.1:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
-  integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=
-
-esprima@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
-  integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=
-
-esprima@^4.0.0, esprima@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
-  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
-
-espurify@^1.6.0:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/espurify/-/espurify-1.8.1.tgz#5746c6c1ab42d302de10bd1d5bf7f0e8c0515056"
-  integrity sha512-ZDko6eY/o+D/gHCWyHTU85mKDgYcS4FJj7S+YD6WIInm7GQ6AnOjmcL4+buFV/JOztVLELi/7MmuGU5NHta0Mg==
-  dependencies:
-    core-js "^2.0.0"
-
-esquery@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
-  integrity sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==
-  dependencies:
-    estraverse "^4.0.0"
-
-esquery@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
-  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
-  dependencies:
-    estraverse "^5.1.0"
-
-esrecurse@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
-  integrity sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==
-  dependencies:
-    estraverse "^4.1.0"
-
-estraverse@^1.9.1:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44"
-  integrity sha1-r2fy3JIlgkFZUJJgkaQAXSnJu0Q=
-
-estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
-  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
-
-estraverse@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.1.0.tgz#374309d39fd935ae500e7b92e8a6b4c720e59642"
-  integrity sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==
-
-estraverse@~1.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.5.1.tgz#867a3e8e58a9f84618afb6c2ddbcd916b7cbaf71"
-  integrity sha1-hno+jlip+EYYr7bC3bzZFrfLr3E=
-
-esutils@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
-  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
-
-esutils@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-1.0.0.tgz#8151d358e20c8acc7fb745e7472c0025fe496570"
-  integrity sha1-gVHTWOIMisx/t0XnRywAJf5JZXA=
-
-etag@~1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
-  integrity sha1-A9MLX2fdbmMtKUXTDWZScxo01dg=
-
-etag@~1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
-  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
-
-event-emitter@^0.3.5, event-emitter@~0.3.5:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
-  integrity sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=
-  dependencies:
-    d "1"
-    es5-ext "~0.10.14"
-
-event-stream@4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/event-stream/-/event-stream-4.0.1.tgz#4092808ec995d0dd75ea4580c1df6a74db2cde65"
-  integrity sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==
-  dependencies:
-    duplexer "^0.1.1"
-    from "^0.1.7"
-    map-stream "0.0.7"
-    pause-stream "^0.0.11"
-    split "^1.0.1"
-    stream-combiner "^0.2.2"
-    through "^2.3.8"
-
-eventemitter3@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
-  integrity sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==
-
-events@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
-  integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
-
-events@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-2.1.0.tgz#2a9a1e18e6106e0e812aa9ebd4a819b3c29c0ba5"
-  integrity sha512-3Zmiobend8P9DjmKAty0Era4jV8oJ0yGYe2nJJAxgymF9+N8F2m0hhZiMoWtcfepExzNKZumFU3ksdQbInGWCg==
-
-evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
-  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
-  dependencies:
-    md5.js "^1.3.4"
-    safe-buffer "^5.1.1"
-
-exec-sh@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.2.tgz#6738de2eb7c8e671d0366aea0b0db8c6f7d7391b"
-  integrity sha512-9sLAvzhI5nc8TpuQUh4ahMdCrWT00wPWz7j47/emR5+2qEfoZP5zzUXvx+vdx+H6ohhnsYC31iX04QLYJK8zTg==
-
-execa@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
-  integrity sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=
-  dependencies:
-    cross-spawn "^5.0.1"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
-execa@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
-  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^4.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
-execa@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-3.2.0.tgz#18326b79c7ab7fbd6610fd900c1b9e95fa48f90a"
-  integrity sha512-kJJfVbI/lZE1PZYDI5VPxp8zXPO9rtxOkhpZ0jMKha56AI9y2gGVC6bkukStQf0ka5Rh15BA5m7cCCH4jmHqkw==
-  dependencies:
-    cross-spawn "^7.0.0"
-    get-stream "^5.0.0"
-    human-signals "^1.1.1"
-    is-stream "^2.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^4.0.0"
-    onetime "^5.1.0"
-    p-finally "^2.0.0"
-    signal-exit "^3.0.2"
-    strip-final-newline "^2.0.0"
-
-execa@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.0.tgz#7f37d6ec17f09e6b8fc53288611695b6d12b9daf"
-  integrity sha512-JbDUxwV3BoT5ZVXQrSVbAiaXhXUkIwvbhPIwZ0N13kX+5yCzOhUNdocxB/UQRuYOHRYYwAxKYwJYc0T4D12pDA==
-  dependencies:
-    cross-spawn "^7.0.0"
-    get-stream "^5.0.0"
-    human-signals "^1.1.1"
-    is-stream "^2.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^4.0.0"
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
-    strip-final-newline "^2.0.0"
-
-exit@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
-  integrity sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=
-
-expand-brackets@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
-  integrity sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=
-  dependencies:
-    is-posix-bracket "^0.1.0"
-
-expand-brackets@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
-  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
-  dependencies:
-    debug "^2.3.3"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    posix-character-classes "^0.1.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-expand-range@^1.8.1:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
-  integrity sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=
-  dependencies:
-    fill-range "^2.1.0"
-
-expand-tilde@^2.0.0, expand-tilde@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
-  integrity sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=
-  dependencies:
-    homedir-polyfill "^1.0.1"
-
-expect@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-24.9.0.tgz#b75165b4817074fa4a157794f46fe9f1ba15b6ca"
-  integrity sha512-wvVAx8XIol3Z5m9zvZXiyZOQ+sRJqNTIm6sGjdWlaZIeupQGO3WbYI+15D/AmEwZywL6wtJkbAbJtzkOfBuR0Q==
-  dependencies:
-    "@jest/types" "^24.9.0"
-    ansi-styles "^3.2.0"
-    jest-get-type "^24.9.0"
-    jest-matcher-utils "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-regex-util "^24.9.0"
-
-expect@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-26.0.1.tgz#18697b9611a7e2725e20ba3ceadda49bc9865421"
-  integrity sha512-QcCy4nygHeqmbw564YxNbHTJlXh47dVID2BUP52cZFpLU9zHViMFK6h07cC1wf7GYCTIigTdAXhVua8Yl1FkKg==
-  dependencies:
-    "@jest/types" "^26.0.1"
-    ansi-styles "^4.0.0"
-    jest-get-type "^26.0.0"
-    jest-matcher-utils "^26.0.1"
-    jest-message-util "^26.0.1"
-    jest-regex-util "^26.0.0"
-
-express-session@~1.11.3:
-  version "1.11.3"
-  resolved "https://registry.yarnpkg.com/express-session/-/express-session-1.11.3.tgz#5cc98f3f5ff84ed835f91cbf0aabd0c7107400af"
-  integrity sha1-XMmPP1/4Ttg1+Ry/CqvQxxB0AK8=
-  dependencies:
-    cookie "0.1.3"
-    cookie-signature "1.0.6"
-    crc "3.3.0"
-    debug "~2.2.0"
-    depd "~1.0.1"
-    on-headers "~1.0.0"
-    parseurl "~1.3.0"
-    uid-safe "~2.0.0"
-    utils-merge "1.0.0"
-
-express@4.17.1:
-  version "4.17.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
-  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
-  dependencies:
-    accepts "~1.3.7"
-    array-flatten "1.1.1"
-    body-parser "1.19.0"
-    content-disposition "0.5.3"
-    content-type "~1.0.4"
-    cookie "0.4.0"
-    cookie-signature "1.0.6"
-    debug "2.6.9"
-    depd "~1.1.2"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    finalhandler "~1.1.2"
-    fresh "0.5.2"
-    merge-descriptors "1.0.1"
-    methods "~1.1.2"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    path-to-regexp "0.1.7"
-    proxy-addr "~2.0.5"
-    qs "6.7.0"
-    range-parser "~1.2.1"
-    safe-buffer "5.1.2"
-    send "0.17.1"
-    serve-static "1.14.1"
-    setprototypeof "1.1.1"
-    statuses "~1.5.0"
-    type-is "~1.6.18"
-    utils-merge "1.0.1"
-    vary "~1.1.2"
-
-extend-shallow@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-1.1.4.tgz#19d6bf94dfc09d76ba711f39b872d21ff4dd9071"
-  integrity sha1-Gda/lN/AnXa6cR85uHLSH/TdkHE=
-  dependencies:
-    kind-of "^1.1.0"
-
-extend-shallow@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
-  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
-  dependencies:
-    is-extendable "^0.1.0"
-
-extend-shallow@^3.0.0, extend-shallow@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
-  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
-  dependencies:
-    assign-symbols "^1.0.0"
-    is-extendable "^1.0.1"
-
-extend@^3.0.0, extend@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
-  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
-
-external-editor@^3.0.3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
-  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
-  dependencies:
-    chardet "^0.7.0"
-    iconv-lite "^0.4.24"
-    tmp "^0.0.33"
-
-extglob@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
-  integrity sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=
-  dependencies:
-    is-extglob "^1.0.0"
-
-extglob@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
-  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
-  dependencies:
-    array-unique "^0.3.2"
-    define-property "^1.0.0"
-    expand-brackets "^2.1.4"
-    extend-shallow "^2.0.1"
-    fragment-cache "^0.2.1"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-extsprintf@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
-  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
-
-extsprintf@^1.2.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
-  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
-
-fancy-log@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.2.tgz#f41125e3d84f2e7d89a43d06d958c8f78be16be1"
-  integrity sha1-9BEl49hPLn2JpD0G2VjI94vha+E=
-  dependencies:
-    ansi-gray "^0.1.1"
-    color-support "^1.1.3"
-    time-stamp "^1.0.0"
-
-fancy-log@1.3.3, fancy-log@^1.3.2, fancy-log@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.3.tgz#dbc19154f558690150a23953a0adbd035be45fc7"
-  integrity sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==
-  dependencies:
-    ansi-gray "^0.1.1"
-    color-support "^1.1.3"
-    parse-node-version "^1.0.0"
-    time-stamp "^1.0.0"
-
-fast-deep-equal@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
-  integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
-
-fast-diff@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
-  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
-
-fast-glob@3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.2.tgz#ade1a9d91148965d4bf7c51f72e1ca662d32e63d"
-  integrity sha512-UDV82o4uQyljznxwMxyVRJgZZt3O5wENYojjzbaGEGZgeOxkLFf+V4cnUD+krzb2F72E18RhamkMZ7AdeggF7A==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.0"
-    merge2 "^1.3.0"
-    micromatch "^4.0.2"
-    picomatch "^2.2.1"
-
-fast-glob@^3.0.3:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.0.4.tgz#d484a41005cb6faeb399b951fd1bd70ddaebb602"
-  integrity sha512-wkIbV6qg37xTJwqSsdnIphL1e+LaGz4AIQqr00mIubMaEhv1/HEmJ0uuCGZRNRUkZZmOB5mJKO0ZUTVq+SxMQg==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.1"
-    "@nodelib/fs.walk" "^1.2.1"
-    glob-parent "^5.0.0"
-    is-glob "^4.0.1"
-    merge2 "^1.2.3"
-    micromatch "^4.0.2"
-
-fast-glob@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.1.1.tgz#87ee30e9e9f3eb40d6f254a7997655da753d7c82"
-  integrity sha512-nTCREpBY8w8r+boyFYAx21iL6faSsQynliPHM4Uf56SbkyohCNxpVPEH9xrF5TXKy+IsjkPUHDKiUkzBVRXn9g==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.0"
-    merge2 "^1.3.0"
-    micromatch "^4.0.2"
-
-fast-json-stable-stringify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
-  integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
-
-fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.4:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
-  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
-
-fast-safe-stringify@2.0.7:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.0.7.tgz#124aa885899261f68aedb42a7c080de9da608743"
-  integrity sha512-Utm6CdzT+6xsDk2m8S6uL8VHxNwI6Jub+e9NYTcAms28T84pTa25GJQV9j0CY0N1rM8hK4x6grpF2BQf+2qwVA==
-
-fastq@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.6.0.tgz#4ec8a38f4ac25f21492673adb7eae9cfef47d1c2"
-  integrity sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==
-  dependencies:
-    reusify "^1.0.0"
-
-faye-websocket@~0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
-  integrity sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=
-  dependencies:
-    websocket-driver ">=0.5.1"
-
-fb-watchman@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
-  integrity sha1-VOmr99+i8mzZsWNsWIwa/AXeXVg=
-  dependencies:
-    bser "^2.0.0"
-
-fbjs@^0.8.4:
-  version "0.8.17"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
-  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.18"
-
-fetch-mock@9.10.1:
-  version "9.10.1"
-  resolved "https://registry.yarnpkg.com/fetch-mock/-/fetch-mock-9.10.1.tgz#1f0a7a3795490956bf4cfd5fa6ff912bc4dc71d3"
-  integrity sha512-pTSLpg/Z9LvoqTRu8S9Aeyu4wsyNHLcqON6F5iw1nLHkSOZ+snKgkijwtOVtVsgNzyiZCq9NHRwGxPRpLwth7A==
-  dependencies:
-    babel-runtime "^6.26.0"
-    core-js "^3.0.0"
-    debug "^4.1.1"
-    glob-to-regexp "^0.4.0"
-    is-subset "^0.1.1"
-    lodash.isequal "^4.5.0"
-    path-to-regexp "^2.2.1"
-    querystring "^0.2.0"
-    whatwg-url "^6.5.0"
-
-figures@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
-  integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-figures@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-3.0.0.tgz#756275c964646163cc6f9197c7a0295dbfd04de9"
-  integrity sha512-HKri+WoWoUgr83pehn/SIgLOMZ9nAWC6dcGj26RY2R4F50u4+RTUz0RCrUlOV3nKRAICW1UGzyb+kcX2qK1S/g==
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-file-entry-cache@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
-  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
-  dependencies:
-    flat-cache "^2.0.1"
-
-file-type@^7.6.0:
-  version "7.7.1"
-  resolved "https://registry.yarnpkg.com/file-type/-/file-type-7.7.1.tgz#91c2f5edb8ce70688b9b68a90d931bbb6cb21f65"
-  integrity sha512-bTrKkzzZI6wH+NXhyD3SOXtb2zXTw2SbwI2RxUlRcXVsnN7jNL5hJzVQLYv7FOQhxFkK4XWdAflEaWFpaLLWpQ==
-
-filename-regex@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
-  integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
-
-fill-range@^2.1.0:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565"
-  integrity sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==
-  dependencies:
-    is-number "^2.1.0"
-    isobject "^2.0.0"
-    randomatic "^3.0.0"
-    repeat-element "^1.1.2"
-    repeat-string "^1.5.2"
-
-fill-range@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
-  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-    to-regex-range "^2.1.0"
-
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
-  dependencies:
-    to-regex-range "^5.0.1"
-
-finalhandler@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.4.0.tgz#965a52d9e8d05d2b857548541fb89b53a2497d9b"
-  integrity sha1-llpS2ejQXSuFdUhUH7ibU6JJfZs=
-  dependencies:
-    debug "~2.2.0"
-    escape-html "1.0.2"
-    on-finished "~2.3.0"
-    unpipe "~1.0.0"
-
-finalhandler@1.1.2, finalhandler@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
-  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
-  dependencies:
-    debug "2.6.9"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    statuses "~1.5.0"
-    unpipe "~1.0.0"
-
-find-root@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
-  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
-
-find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
-  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
-  dependencies:
-    locate-path "^5.0.0"
-    path-exists "^4.0.0"
-
-find-up@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
-  integrity sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=
-  dependencies:
-    path-exists "^2.0.0"
-    pinkie-promise "^2.0.0"
-
-find-up@^2.0.0, find-up@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
-  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
-  dependencies:
-    locate-path "^2.0.0"
-
-find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
-  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
-  dependencies:
-    locate-path "^3.0.0"
-
-findup-sync@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-2.0.0.tgz#9326b1488c22d1a6088650a86901b2d9a90a2cbc"
-  integrity sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=
-  dependencies:
-    detect-file "^1.0.0"
-    is-glob "^3.1.0"
-    micromatch "^3.0.4"
-    resolve-dir "^1.0.1"
-
-findup-sync@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-3.0.0.tgz#17b108f9ee512dfb7a5c7f3c8b27ea9e1a9c08d1"
-  integrity sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==
-  dependencies:
-    detect-file "^1.0.0"
-    is-glob "^4.0.0"
-    micromatch "^3.0.4"
-    resolve-dir "^1.0.1"
-
-fined@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fined/-/fined-1.2.0.tgz#d00beccf1aa2b475d16d423b0238b713a2c4a37b"
-  integrity sha512-ZYDqPLGxDkDhDZBjZBb+oD1+j0rA4E0pXY50eplAAOPg2N/gUBSSk5IM1/QhPfyVo19lJ+CvXpqfvk+b2p/8Ng==
-  dependencies:
-    expand-tilde "^2.0.2"
-    is-plain-object "^2.0.3"
-    object.defaults "^1.1.0"
-    object.pick "^1.2.0"
-    parse-filepath "^1.0.1"
-
-first-chunk-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-2.0.0.tgz#1bdecdb8e083c0664b91945581577a43a9f31d70"
-  integrity sha1-G97NuOCDwGZLkZRVgVd6Q6nzHXA=
-  dependencies:
-    readable-stream "^2.0.2"
-
-flagged-respawn@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-1.0.1.tgz#e7de6f1279ddd9ca9aac8a5971d618606b3aab41"
-  integrity sha512-lNaHNVymajmk0OJMBn8fVUAU1BtDeKIqKoVhk4xAALB57aALg6b4W0MfJ/cUE0g9YBXy5XhSlPIpYIJ7HaY/3Q==
-
-flat-cache@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
-  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
-  dependencies:
-    flatted "^2.0.0"
-    rimraf "2.6.3"
-    write "1.0.3"
-
-flat@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/flat/-/flat-4.1.0.tgz#090bec8b05e39cba309747f1d588f04dbaf98db2"
-  integrity sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw==
-  dependencies:
-    is-buffer "~2.0.3"
-
-flatted@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
-  integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
-
-flatted@^2.0.1, flatted@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
-  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
-
-flush-write-stream@^1.0.2:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
-  integrity sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==
-  dependencies:
-    inherits "^2.0.3"
-    readable-stream "^2.3.6"
-
-follow-redirects@^1.0.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.9.0.tgz#8d5bcdc65b7108fe1508649c79c12d732dcedb4f"
-  integrity sha512-CRcPzsSIbXyVDl0QI01muNDu69S8trU4jArW9LpOt2WtC6LyUJetcIrmfHsRBx7/Jb6GHJUiuqyYxPooFfNt6A==
-  dependencies:
-    debug "^3.0.0"
-
-for-in@^1.0.1, for-in@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
-  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
-
-for-own@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
-  integrity sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=
-  dependencies:
-    for-in "^1.0.1"
-
-for-own@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
-  integrity sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=
-  dependencies:
-    for-in "^1.0.1"
-
-forever-agent@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
-  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
-
-fork-stream@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/fork-stream/-/fork-stream-0.0.4.tgz#db849fce77f6708a5f8f386ae533a0907b54ae70"
-  integrity sha1-24Sfznf2cIpfjzhq5TOgkHtUrnA=
-
-form-data@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
-  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "^1.0.6"
-    mime-types "^2.1.12"
-
-formidable@1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/formidable/-/formidable-1.2.2.tgz#bf69aea2972982675f00865342b982986f6b8dd9"
-  integrity sha512-V8gLm+41I/8kguQ4/o1D3RIHRmhYFG4pnNyonvua+40rqcEmT4+V71yaZ3B457xbbgCsCfjSPi65u/W6vK1U5Q==
-
-forwarded@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
-  integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
-
-fragment-cache@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
-  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
-  dependencies:
-    map-cache "^0.2.2"
-
-fresh@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
-  integrity sha1-ZR+DjiJCTnVm3hYdg1jKoZn4PU8=
-
-fresh@0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
-  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
-
-from@^0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
-  integrity sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=
-
-fs-extra@9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.0.tgz#b6afc31036e247b2466dc99c29ae797d5d4580a3"
-  integrity sha512-pmEYSk3vYsG/bF651KPUXZ+hvjpgWYw/Gc7W9NFUe3ZVLczKKWIij3IKpOrQcdw4TILtibFslZ0UmR8Vvzig4g==
-  dependencies:
-    at-least-node "^1.0.0"
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^1.0.0"
-
-fs-extra@9.0.1:
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
-  integrity sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==
-  dependencies:
-    at-least-node "^1.0.0"
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^1.0.0"
-
-fs-extra@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
-  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
-fs-minipass@^1.2.5:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
-  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
-  dependencies:
-    minipass "^2.6.0"
-
-fs-minipass@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
-  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
-  dependencies:
-    minipass "^3.0.0"
-
-fs-mkdirp-stream@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-mkdirp-stream/-/fs-mkdirp-stream-1.0.0.tgz#0b7815fc3201c6a69e14db98ce098c16935259eb"
-  integrity sha1-C3gV/DIBxqaeFNuYzgmMFpNSWes=
-  dependencies:
-    graceful-fs "^4.1.11"
-    through2 "^2.0.3"
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
-
-fsevents@^1.0.0, fsevents@^1.2.7:
-  version "1.2.9"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.9.tgz#3f5ed66583ccd6f400b5a00db6f7e861363e388f"
-  integrity sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==
-  dependencies:
-    nan "^2.12.1"
-    node-pre-gyp "^0.12.0"
-
-fsevents@^2.1.2, fsevents@~2.1.2:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
-  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
-
-fsevents@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.0.tgz#ce1a5f9ac71c6d75278b0c5bd236d7dfece4cbaa"
-  integrity sha512-+iXhW3LuDQsno8dOIrCIT/CBjeBWuP7PXe8w9shnj9Lebny/Gx1ZjVBYwexLz36Ri2jKuXMNpV6CYNh8lHHgrQ==
-
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
-
-function.prototype.name@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.1.tgz#6d252350803085abc2ad423d4fe3be2f9cbda392"
-  integrity sha512-e1NzkiJuw6xqVH7YSdiW/qDHebcmMhPNe6w+4ZYYEg0VA+LaLzx37RimbPLuonHhYGFGPx1ME2nSi74JiaCr/Q==
-  dependencies:
-    define-properties "^1.1.3"
-    function-bind "^1.1.1"
-    functions-have-names "^1.1.1"
-    is-callable "^1.1.4"
-
-function.prototype.name@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.2.tgz#5cdf79d7c05db401591dfde83e3b70c5123e9a45"
-  integrity sha512-C8A+LlHBJjB2AdcRPorc5JvJ5VUoWlXdEHLOJdCI7kjHEtGTpHQUiqMvCIKUwIsGwZX2jZJy761AXsn356bJQg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    functions-have-names "^1.2.0"
-
-functional-red-black-tree@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
-  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
-
-functions-have-names@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.1.1.tgz#79d35927f07b8e7103d819fed475b64ccf7225ea"
-  integrity sha512-U0kNHUoxwPNPWOJaMG7Z00d4a/qZVrFtzWJRaK8V9goaVOCXBSQSJpt3MYGNtkScKEBKovxLjnNdC9MlXwo5Pw==
-
-functions-have-names@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.1.tgz#a981ac397fa0c9964551402cdc5533d7a4d52f91"
-  integrity sha512-j48B/ZI7VKs3sgeI2cZp7WXWmZXu7Iq5pl5/vptV5N2mq+DGFuS/ulaDjtaoLpYzuD6u8UgrUKHfgo7fDTSiBA==
-
-fuse.js@6.0.4:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.0.4.tgz#9f5af976f836247ad5d2c338090d6ce13cf9a4d2"
-  integrity sha512-XAeQaT+DV8dxqohN911+Qzkb4iMzTzae04mdb9/XSQbMjbsFasQxe0+UwM+3UWP+8vO7svz1Rj0KuQw6xJ45Ww==
-
-gauge@~2.7.3:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
-  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
-  dependencies:
-    aproba "^1.0.3"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.0"
-    object-assign "^4.1.0"
-    signal-exit "^3.0.0"
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-    wide-align "^1.1.0"
-
-gensync@^1.0.0-beta.1:
-  version "1.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
-  integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
-
-get-assigned-identifiers@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/get-assigned-identifiers/-/get-assigned-identifiers-1.2.0.tgz#6dbf411de648cbaf8d9169ebb0d2d576191e2ff1"
-  integrity sha512-mBBwmeGTrxEMO4pMaaf/uUEFHnYtwr8FTe8Y/mer4rcV/bye0qGm6pw1bGZFGStxC5O76c5ZAVBGnqHmOaJpdQ==
-
-get-caller-file@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
-  integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
-
-get-caller-file@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
-  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
-
-get-func-name@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
-  integrity sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=
-
-get-port@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/get-port/-/get-port-5.0.0.tgz#aa22b6b86fd926dd7884de3e23332c9f70c031a6"
-  integrity sha512-imzMU0FjsZqNa6BqOjbbW6w5BivHIuQKopjpPqcnx0AVHJQKCxK1O+Ab3OrVXhrekqfVMjwA9ZYu062R+KcIsQ==
-  dependencies:
-    type-fest "^0.3.0"
-
-get-stdin@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
-  integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
-
-get-stdin@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
-  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
-
-get-stream@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
-  integrity sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=
-
-get-stream@^4.0.0, get-stream@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
-  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
-  dependencies:
-    pump "^3.0.0"
-
-get-stream@^5.0.0, get-stream@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.1.0.tgz#01203cdc92597f9b909067c3e656cc1f4d3c4dc9"
-  integrity sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==
-  dependencies:
-    pump "^3.0.0"
-
-get-value@^2.0.3, get-value@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
-  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
-
-getpass@^0.1.1:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
-  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
-  dependencies:
-    assert-plus "^1.0.0"
-
-git-raw-commits@^2.0.0:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-2.0.7.tgz#02e9357727a9755efa8e14dd5e59b381c29068fb"
-  integrity sha512-SkwrTqrDxw8y0G1uGJ9Zw13F7qu3LF8V4BifyDeiJCxSnjRGZD9SaoMiMqUvvXMXh6S3sOQ1DsBN7L2fMUZW/g==
-  dependencies:
-    dargs "^7.0.0"
-    lodash.template "^4.0.2"
-    meow "^7.0.0"
-    split2 "^2.0.0"
-    through2 "^3.0.0"
-
-github-url-from-git@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/github-url-from-git/-/github-url-from-git-1.5.0.tgz#f985fedcc0a9aa579dc88d7aff068d55cc6251a0"
-  integrity sha1-+YX+3MCpqledyI16/waNVcxiUaA=
-
-glob-base@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
-  integrity sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=
-  dependencies:
-    glob-parent "^2.0.0"
-    is-glob "^2.0.0"
-
-glob-parent@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
-  integrity sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=
-  dependencies:
-    is-glob "^2.0.0"
-
-glob-parent@^3.0.1, glob-parent@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
-  integrity sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=
-  dependencies:
-    is-glob "^3.1.0"
-    path-dirname "^1.0.0"
-
-glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.0.tgz#5f4c1d1e748d30cd73ad2944b3577a81b081e8c2"
-  integrity sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==
-  dependencies:
-    is-glob "^4.0.1"
-
-glob-stream@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/glob-stream/-/glob-stream-6.1.0.tgz#7045c99413b3eb94888d83ab46d0b404cc7bdde4"
-  integrity sha1-cEXJlBOz65SIjYOrRtC0BMx73eQ=
-  dependencies:
-    extend "^3.0.0"
-    glob "^7.1.1"
-    glob-parent "^3.1.0"
-    is-negated-glob "^1.0.0"
-    ordered-read-streams "^1.0.0"
-    pumpify "^1.3.5"
-    readable-stream "^2.1.5"
-    remove-trailing-separator "^1.0.1"
-    to-absolute-glob "^2.0.0"
-    unique-stream "^2.0.2"
-
-glob-to-regexp@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
-  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
-
-glob-watcher@^5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/glob-watcher/-/glob-watcher-5.0.3.tgz#88a8abf1c4d131eb93928994bc4a593c2e5dd626"
-  integrity sha512-8tWsULNEPHKQ2MR4zXuzSmqbdyV5PtwwCaWSGQ1WwHsJ07ilNeN1JB8ntxhckbnpSHaf9dXFUHzIWvm1I13dsg==
-  dependencies:
-    anymatch "^2.0.0"
-    async-done "^1.2.0"
-    chokidar "^2.0.0"
-    is-negated-glob "^1.0.0"
-    just-debounce "^1.0.0"
-    object.defaults "^1.1.0"
-
-glob@7.1.6, glob@^7.1.4, glob@^7.1.6:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@^5.0.15, glob@^5.0.6:
-  version "5.0.15"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
-  integrity sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=
-  dependencies:
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "2 || 3"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@^6.0.1:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
-  integrity sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=
-  dependencies:
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "2 || 3"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@^7.0.3, glob@^7.1.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3:
-  version "7.1.4"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
-  integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-global-agent@2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/global-agent/-/global-agent-2.1.8.tgz#99d153662b2c04cbc1199ffbc081a3aa656ac50f"
-  integrity sha512-VpBe/rhY6Rw2VDOTszAMNambg+4Qv8j0yiTNDYEXXXxkUNGWLHp8A3ztK4YDBbFNcWF4rgsec6/5gPyryya/+A==
-  dependencies:
-    boolean "^3.0.0"
-    core-js "^3.6.4"
-    es6-error "^4.1.1"
-    matcher "^2.1.0"
-    roarr "^2.15.2"
-    semver "^7.1.2"
-    serialize-error "^5.0.0"
-
-global-cache@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/global-cache/-/global-cache-1.2.1.tgz#39ca020d3dd7b3f0934c52b75363f8d53312c16d"
-  integrity sha512-EOeUaup5DgWKlCMhA9YFqNRIlZwoxt731jCh47WBV9fQqHgXhr3Fa55hfgIUqilIcPsfdNKN7LHjrNY+Km40KA==
-  dependencies:
-    define-properties "^1.1.2"
-    is-symbol "^1.0.1"
-
-global-dirs@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
-  integrity sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=
-  dependencies:
-    ini "^1.3.4"
-
-global-modules@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
-  integrity sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==
-  dependencies:
-    global-prefix "^1.0.1"
-    is-windows "^1.0.1"
-    resolve-dir "^1.0.0"
-
-global-prefix@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe"
-  integrity sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=
-  dependencies:
-    expand-tilde "^2.0.2"
-    homedir-polyfill "^1.0.1"
-    ini "^1.3.4"
-    is-windows "^1.0.1"
-    which "^1.2.14"
-
-globals@^11.1.0, globals@^11.7.0:
-  version "11.12.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
-  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
-
-globals@^12.1.0:
-  version "12.3.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-12.3.0.tgz#1e564ee5c4dded2ab098b0f88f24702a3c56be13"
-  integrity sha512-wAfjdLgFsPZsklLJvOBUBmzYE8/CwhEqSBEMRXA3qxIiNtyqvjYurAtIfDh6chlEPUfmTY3MnZh5Hfh4q0UlIw==
-  dependencies:
-    type-fest "^0.8.1"
-
-globals@^9.18.0:
-  version "9.18.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
-  integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
-
-globalthis@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.1.tgz#40116f5d9c071f9e8fb0037654df1ab3a83b7ef9"
-  integrity sha512-mJPRTc/P39NH/iNG4mXa9aIhNymaQikTrnspeCa2ZuJ+mH2QN/rXwtX3XwKrHqWgUQFbNZKtHM105aHzJalElw==
-  dependencies:
-    define-properties "^1.1.3"
-
-globby@11.0.1:
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.1.tgz#9a2bf107a068f3ffeabc49ad702c79ede8cfd357"
-  integrity sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==
-  dependencies:
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.1.1"
-    ignore "^5.1.4"
-    merge2 "^1.3.0"
-    slash "^3.0.0"
-
-globby@^10.0.1:
-  version "10.0.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.1.tgz#4782c34cb75dd683351335c5829cc3420e606b22"
-  integrity sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==
-  dependencies:
-    "@types/glob" "^7.1.1"
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.0.3"
-    glob "^7.1.3"
-    ignore "^5.1.1"
-    merge2 "^1.2.3"
-    slash "^3.0.0"
-
-globby@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
-  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
-  dependencies:
-    array-union "^1.0.1"
-    glob "^7.0.3"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-
-glogg@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/glogg/-/glogg-1.0.2.tgz#2d7dd702beda22eb3bffadf880696da6d846313f"
-  integrity sha512-5mwUoSuBk44Y4EshyiqcH95ZntbDdTQqA3QYSrxmzj28Ai0vXBGMH1ApSANH14j2sIRtqCEyg6PfsuP7ElOEDA==
-  dependencies:
-    sparkles "^1.0.0"
-
-google-closure-compiler-java@^20200517.0.0:
-  version "20200517.0.0"
-  resolved "https://registry.yarnpkg.com/google-closure-compiler-java/-/google-closure-compiler-java-20200517.0.0.tgz#778370c22273c9085f4cf959ce063f8f112c02ac"
-  integrity sha512-JVZBiyyXwcYi6Yc3lO6dF2hMLJA4OzPm4/mgsem/tF1vk2HsWTnL3GTaBsPB2ENVZp0hoqsd4KgpPiG9ssNWxw==
-
-google-closure-compiler-js@^20200517.0.0:
-  version "20200517.0.0"
-  resolved "https://registry.yarnpkg.com/google-closure-compiler-js/-/google-closure-compiler-js-20200517.0.0.tgz#9cb0861f764073d1c4d3b7453b74073ccb1ecfb1"
-  integrity sha512-dz6dOUHx5nhdIqMRXacAYS8aJfLvw4IKxGg28Hq/zeeDPHlX3P3iBK20NgFDfT8zdushThymtMqChSy7C5eyfA==
-
-google-closure-compiler-linux@^20200517.0.0:
-  version "20200517.0.0"
-  resolved "https://registry.yarnpkg.com/google-closure-compiler-linux/-/google-closure-compiler-linux-20200517.0.0.tgz#2b9ecb634130060174aff5c52329a694ea4be68b"
-  integrity sha512-S5xPh6TtP+ESzZrmQLcDDqtZAsCVTbdI4VS98wQlN6IMZTd94nAnOCg9mrxQNAgop2t4sdsv/KuH0BGPUWEZ+w==
-
-google-closure-compiler-osx@^20200517.0.0:
-  version "20200517.0.0"
-  resolved "https://registry.yarnpkg.com/google-closure-compiler-osx/-/google-closure-compiler-osx-20200517.0.0.tgz#9394e9a2fd97e3729fc3bd2abcffff6aab2cfcaa"
-  integrity sha512-FWIcsKqLllLjdOBZd7azijVaObydgRd0obVNi63eUfC5MX6T4qxKumGCyor2UCNY6by2ESz+PlGqCFzFhZ6b2g==
-
-google-closure-compiler-windows@^20200517.0.0:
-  version "20200517.0.0"
-  resolved "https://registry.yarnpkg.com/google-closure-compiler-windows/-/google-closure-compiler-windows-20200517.0.0.tgz#c5cdde438c29458666a83358567b12072924ed6c"
-  integrity sha512-UXhjRGwS8deTkRla/riyVq3psscgMuw78lepEPtq5NgbumgJzY2+IQP9q+4MVOfJW58Rv0JUWKAFOnBBSZWcAQ==
-
-google-closure-compiler@20200517.0.0:
-  version "20200517.0.0"
-  resolved "https://registry.yarnpkg.com/google-closure-compiler/-/google-closure-compiler-20200517.0.0.tgz#6c47f99fc1be59bd4f9e23c5a8f2e66d64b54143"
-  integrity sha512-80W9zBS9Ajk1T5InWCfsoPohDmo5T1AAyw1rHh5+dgb/jPgwC65KhY+oJozTncf+/7tyQHJXozTARwhSlBUcMg==
-  dependencies:
-    chalk "2.x"
-    google-closure-compiler-java "^20200517.0.0"
-    google-closure-compiler-js "^20200517.0.0"
-    minimist "1.x"
-    vinyl "2.x"
-    vinyl-sourcemaps-apply "^0.2.0"
-  optionalDependencies:
-    google-closure-compiler-linux "^20200517.0.0"
-    google-closure-compiler-osx "^20200517.0.0"
-    google-closure-compiler-windows "^20200517.0.0"
-
-got@9.6.0, got@^9.6.0:
-  version "9.6.0"
-  resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
-  integrity sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==
-  dependencies:
-    "@sindresorhus/is" "^0.14.0"
-    "@szmarczak/http-timer" "^1.1.2"
-    cacheable-request "^6.0.0"
-    decompress-response "^3.3.0"
-    duplexer3 "^0.1.4"
-    get-stream "^4.1.0"
-    lowercase-keys "^1.0.1"
-    mimic-response "^1.0.1"
-    p-cancelable "^1.0.0"
-    to-readable-stream "^1.0.0"
-    url-parse-lax "^3.0.0"
-
-graceful-fs@4.X, graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
-  integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
-
-graceful-fs@^3.0.6:
-  version "3.0.12"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-3.0.12.tgz#0034947ce9ed695ec8ab0b854bc919e82b1ffaef"
-  integrity sha512-J55gaCS4iTTJfTXIxSVw3EMQckcqkpdRv3IR7gu6sq0+tbC363Zx6KH/SEwXASK9JRbhyZmVjJEVJIOxYsB3Qg==
-  dependencies:
-    natives "^1.1.3"
-
-graceful-fs@^4.2.4:
-  version "4.2.4"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
-  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
-
-growl@1.10.5:
-  version "1.10.5"
-  resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
-  integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
-
-growly@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
-  integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
-
-gulp-append-prepend@1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/gulp-append-prepend/-/gulp-append-prepend-1.0.8.tgz#f44efc6b667d784d4b7d932931ff6d072a7d24cd"
-  integrity sha512-dmlju9nEC4PRBdfwaGsTrDQCx/7hVyPfbBNJ8rNSIrY7O4fdiPb2ei7N0mxXcxrsxA/BftTGMEdRZrSH8g9cfg==
-  dependencies:
-    plugin-error "^1.0.1"
-    read-file "^0.2.0"
-    through2 "^2.0.1"
-
-gulp-ava@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/gulp-ava/-/gulp-ava-3.0.0.tgz#a690860285d98f6b3fc7b6815d3108f0e6580e8a"
-  integrity sha512-Z9cv3mvNxf5KH3EV+wFuWEihxc2PpBFN2UGk9dPayMMi4KGgs1DpZ0PLryFKbEu8hIFS4gxuFAyPlh8Mjsnlsg==
-  dependencies:
-    ava "^2.4.0"
-    dargs "^7.0.0"
-    execa "^3.0.0"
-    fancy-log "^1.3.3"
-    plugin-error "^1.0.1"
-    resolve-cwd "^3.0.0"
-    through2 "^3.0.0"
-
-gulp-babel@8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/gulp-babel/-/gulp-babel-8.0.0.tgz#e0da96f4f2ec4a88dd3a3030f476e38ab2126d87"
-  integrity sha512-oomaIqDXxFkg7lbpBou/gnUkX51/Y/M2ZfSjL2hdqXTAlSWZcgZtd2o0cOH0r/eE8LWD0+Q/PsLsr2DKOoqToQ==
-  dependencies:
-    plugin-error "^1.0.1"
-    replace-ext "^1.0.0"
-    through2 "^2.0.0"
-    vinyl-sourcemaps-apply "^0.2.0"
-
-gulp-cli@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/gulp-cli/-/gulp-cli-2.2.0.tgz#5533126eeb7fe415a7e3e84a297d334d5cf70ebc"
-  integrity sha512-rGs3bVYHdyJpLqR0TUBnlcZ1O5O++Zs4bA0ajm+zr3WFCfiSLjGwoCBqFs18wzN+ZxahT9DkOK5nDf26iDsWjA==
-  dependencies:
-    ansi-colors "^1.0.1"
-    archy "^1.0.0"
-    array-sort "^1.0.0"
-    color-support "^1.1.3"
-    concat-stream "^1.6.0"
-    copy-props "^2.0.1"
-    fancy-log "^1.3.2"
-    gulplog "^1.0.0"
-    interpret "^1.1.0"
-    isobject "^3.0.1"
-    liftoff "^3.1.0"
-    matchdep "^2.0.0"
-    mute-stdout "^1.0.0"
-    pretty-hrtime "^1.0.0"
-    replace-homedir "^1.0.0"
-    semver-greatest-satisfied-range "^1.1.0"
-    v8flags "^3.0.1"
-    yargs "^7.1.0"
-
-gulp-connect@5.7.0:
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/gulp-connect/-/gulp-connect-5.7.0.tgz#7e925f5e4c34ebfedf9f318576966e8fe8840d5a"
-  integrity sha512-8tRcC6wgXMLakpPw9M7GRJIhxkYdgZsXwn7n56BA2bQYGLR9NOPhMzx7js+qYDy6vhNkbApGKURjAw1FjY4pNA==
-  dependencies:
-    ansi-colors "^2.0.5"
-    connect "^3.6.6"
-    connect-livereload "^0.6.0"
-    fancy-log "^1.3.2"
-    map-stream "^0.0.7"
-    send "^0.16.2"
-    serve-index "^1.9.1"
-    serve-static "^1.13.2"
-    tiny-lr "^1.1.1"
-
-gulp-debounce@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/gulp-debounce/-/gulp-debounce-1.0.2.tgz#0b943e812973e3003f980d88fc0d77e7996d9db9"
-  integrity sha1-C5Q+gSlz4wA/mA2I/A1355ltnbk=
-  dependencies:
-    through "^2.3.8"
-
-gulp-eslint-if-fixed@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gulp-eslint-if-fixed/-/gulp-eslint-if-fixed-1.0.0.tgz#ebad1f2a92e2c6ed793b01daaf0081dcaaca0e26"
-  integrity sha1-660fKpLixu15OwHarwCB3KrKDiY=
-  dependencies:
-    gulp-if "^2.0.0"
-
-gulp-eslint@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/gulp-eslint/-/gulp-eslint-6.0.0.tgz#7d402bb45f8a67652b868277011812057370a832"
-  integrity sha512-dCVPSh1sA+UVhn7JSQt7KEb4An2sQNbOdB3PA8UCfxsoPlAKjJHxYHGXdXC7eb+V1FAnilSFFqslPrq037l1ig==
-  dependencies:
-    eslint "^6.0.0"
-    fancy-log "^1.3.2"
-    plugin-error "^1.0.1"
-
-gulp-file@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/gulp-file/-/gulp-file-0.4.0.tgz#451356a2ac5089c6db91a0444252a0543657006b"
-  integrity sha1-RRNWoqxQicbbkaBEQlKgVDZXAGs=
-  dependencies:
-    through2 "^0.4.1"
-    vinyl "^2.1.0"
-
-gulp-help@chmontgomery/gulp-help#gulp4:
-  version "4.0.0"
-  resolved "https://codeload.github.com/chmontgomery/gulp-help/tar.gz/194e80e0545ff6af5d10eeba7e224d0da71eb8d3"
-  dependencies:
-    chalk "1.1.1"
-    object-assign "4.0.1"
-
-gulp-if@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/gulp-if/-/gulp-if-3.0.0.tgz#6c3e7edc8bafadc34f2ebecb314bf43324ba1e40"
-  integrity sha512-fCUEngzNiEZEK2YuPm+sdMpO6ukb8+/qzbGfJBXyNOXz85bCG7yBI+pPSl+N90d7gnLvMsarthsAImx0qy7BAw==
-  dependencies:
-    gulp-match "^1.1.0"
-    ternary-stream "^3.0.0"
-    through2 "^3.0.1"
-
-gulp-if@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/gulp-if/-/gulp-if-2.0.2.tgz#a497b7e7573005041caa2bc8b7dda3c80444d629"
-  integrity sha1-pJe351cwBQQcqivIt92jyARE1ik=
-  dependencies:
-    gulp-match "^1.0.3"
-    ternary-stream "^2.0.1"
-    through2 "^2.0.1"
-
-gulp-istanbul@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/gulp-istanbul/-/gulp-istanbul-1.1.3.tgz#669a21516adb2540de798be26faee843ade8f20f"
-  integrity sha512-uMLSdqPDnBAV/B9rNyOgVMgrVC1tPbe+5GH6P13UOyxbRDT/w4sKYHWftPMA8j9om+NFvfeRlqpDXL2fixFWNA==
-  dependencies:
-    istanbul "^0.4.0"
-    istanbul-threshold-checker "^0.2.1"
-    lodash "^4.0.0"
-    plugin-error "^0.1.2"
-    through2 "^2.0.0"
-    vinyl-sourcemaps-apply "^0.2.1"
-
-gulp-jsonlint@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/gulp-jsonlint/-/gulp-jsonlint-1.3.2.tgz#d7d5bb76466ad445ab150cda603738ce5e531b51"
-  integrity sha512-770G/GqhmIFwpgbNfvi5JnAcNBwvmOOTn+rhLelP6Y5YIDBsxWQEqboYaXfdscpKHEnIUu1NDJS51T+lyiHC6w==
-  dependencies:
-    ansi-colors "^4.1.1"
-    fancy-log "^1.3.3"
-    jsonlint "1.6.3"
-    map-stream "0.0.7"
-    plugin-error "1.0.1"
-    through2 "^3.0.1"
-
-gulp-jsonminify@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/gulp-jsonminify/-/gulp-jsonminify-1.1.0.tgz#3b3c787f252ab42bbd7f355c7629665357e88d1a"
-  integrity sha512-nkqH5aRajfCGD8HB2yN+QSEQG0SMEpS7UyOp3HS966Og4DqUX0y8sPF5SU8uSsGLLLXbnHwyHbDkxauYO/pSpQ==
-  dependencies:
-    jsonminify "~0.2.3"
-    plugin-error "^0.1.2"
-    through2 "~0.6.5"
-
-gulp-match@^1.0.3, gulp-match@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/gulp-match/-/gulp-match-1.1.0.tgz#552b7080fc006ee752c90563f9fec9d61aafdf4f"
-  integrity sha512-DlyVxa1Gj24DitY2OjEsS+X6tDpretuxD6wTfhXE/Rw2hweqc1f6D/XtsJmoiCwLWfXgR87W9ozEityPCVzGtQ==
-  dependencies:
-    minimatch "^3.0.3"
-
-gulp-nop@0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/gulp-nop/-/gulp-nop-0.0.3.tgz#e9ecd8b994d55817ab5ce16ba18f614d7810ecbe"
-  integrity sha1-6ezYuZTVWBerXOFroY9hTXgQ7L4=
-  dependencies:
-    gulp-util "~2.2.14"
-    through "~2.3.4"
-
-gulp-prettier@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/gulp-prettier/-/gulp-prettier-3.0.0.tgz#21c7de272fc7528168af6086e8edae6a645168a8"
-  integrity sha512-vZFyC1F+7EjuI2WDUOcbPt9o3ZjdqjFMjr8a9Yk2K8EmNhP1w6X01QAkv5Ym3dsHCBsBA4AEFcYds2vOTSgx0A==
-  dependencies:
-    plugin-error "^1.0.1"
-    prettier "^2.0.0"
-    through2 "^3.0.0"
-
-gulp-regexp-sourcemaps@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/gulp-regexp-sourcemaps/-/gulp-regexp-sourcemaps-1.0.1.tgz#a8812244852c10950683a948e1c0dad0b1249979"
-  integrity sha1-qIEiRIUsEJUGg6lI4cDa0LEkmXk=
-  dependencies:
-    regexp-sourcemaps "^1.0.0"
-    through2 "^0.6.3"
-    vinyl-sourcemaps-apply "^0.1.4"
-
-gulp-rename@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/gulp-rename/-/gulp-rename-2.0.0.tgz#9bbc3962b0c0f52fc67cd5eaff6c223ec5b9cf6c"
-  integrity sha512-97Vba4KBzbYmR5VBs9mWmK+HwIf5mj+/zioxfZhOKeXtx5ZjBk57KFlePf5nxq9QsTtFl0ejnHE3zTC9MHXqyQ==
-
-gulp-sourcemaps@2.6.5:
-  version "2.6.5"
-  resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.5.tgz#a3f002d87346d2c0f3aec36af7eb873f23de8ae6"
-  integrity sha512-SYLBRzPTew8T5Suh2U8jCSDKY+4NARua4aqjj8HOysBh2tSgT9u4jc1FYirAdPx1akUxxDeK++fqw6Jg0LkQRg==
-  dependencies:
-    "@gulp-sourcemaps/identity-map" "1.X"
-    "@gulp-sourcemaps/map-sources" "1.X"
-    acorn "5.X"
-    convert-source-map "1.X"
-    css "2.X"
-    debug-fabulous "1.X"
-    detect-newline "2.X"
-    graceful-fs "4.X"
-    source-map "~0.6.0"
-    strip-bom-string "1.X"
-    through2 "2.X"
-
-gulp-util@~2.2.14:
-  version "2.2.20"
-  resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-2.2.20.tgz#d7146e5728910bd8f047a6b0b1e549bc22dbd64c"
-  integrity sha1-1xRuVyiRC9jwR6awseVJvCLb1kw=
-  dependencies:
-    chalk "^0.5.0"
-    dateformat "^1.0.7-1.2.3"
-    lodash._reinterpolate "^2.4.1"
-    lodash.template "^2.4.1"
-    minimist "^0.2.0"
-    multipipe "^0.1.0"
-    through2 "^0.5.0"
-    vinyl "^0.2.1"
-
-gulp-watch@5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/gulp-watch/-/gulp-watch-5.0.1.tgz#83d378752f5bfb46da023e73c17ed1da7066215d"
-  integrity sha512-HnTSBdzAOFIT4wmXYPDUn783TaYAq9bpaN05vuZNP5eni3z3aRx0NAKbjhhMYtcq76x4R1wf4oORDGdlrEjuog==
-  dependencies:
-    ansi-colors "1.1.0"
-    anymatch "^1.3.0"
-    chokidar "^2.0.0"
-    fancy-log "1.3.2"
-    glob-parent "^3.0.1"
-    object-assign "^4.1.0"
-    path-is-absolute "^1.0.1"
-    plugin-error "1.0.1"
-    readable-stream "^2.2.2"
-    slash "^1.0.0"
-    vinyl "^2.1.0"
-    vinyl-file "^2.0.0"
-
-gulp@4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/gulp/-/gulp-4.0.2.tgz#543651070fd0f6ab0a0650c6a3e6ff5a7cb09caa"
-  integrity sha512-dvEs27SCZt2ibF29xYgmnwwCYZxdxhQ/+LFWlbAW8y7jt68L/65402Lz3+CKy0Ov4rOs+NERmDq7YlZaDqUIfA==
-  dependencies:
-    glob-watcher "^5.0.3"
-    gulp-cli "^2.2.0"
-    undertaker "^1.2.1"
-    vinyl-fs "^3.0.0"
-
-gulplog@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gulplog/-/gulplog-1.0.0.tgz#e28c4d45d05ecbbed818363ce8f9c5926229ffe5"
-  integrity sha1-4oxNRdBey77YGDY86PnFkmIp/+U=
-  dependencies:
-    glogg "^1.0.0"
-
-gzip-size@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
-  integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==
-  dependencies:
-    duplexer "^0.1.1"
-    pify "^4.0.1"
-
-handlebars@4.7.6:
-  version "4.7.6"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.6.tgz#d4c05c1baf90e9945f77aa68a7a219aa4a7df74e"
-  integrity sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==
-  dependencies:
-    minimist "^1.2.5"
-    neo-async "^2.6.0"
-    source-map "^0.6.1"
-    wordwrap "^1.0.0"
-  optionalDependencies:
-    uglify-js "^3.1.4"
-
-handlebars@^4.0.1:
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
-  integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
-  dependencies:
-    neo-async "^2.6.0"
-    optimist "^0.6.1"
-    source-map "^0.6.1"
-  optionalDependencies:
-    uglify-js "^3.1.4"
-
-handlebars@^4.1.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.4.2.tgz#8810a9821a9d6d52cb2f57d326d6ce7c3dfe741d"
-  integrity sha512-cIv17+GhL8pHHnRJzGu2wwcthL5sb8uDKBHvZ2Dtu5s1YNt0ljbzKbamnc+gr69y7bzwQiBdr5+hOpRd5pnOdg==
-  dependencies:
-    neo-async "^2.6.0"
-    optimist "^0.6.1"
-    source-map "^0.6.1"
-  optionalDependencies:
-    uglify-js "^3.1.4"
-
-handy-redis@1.8.3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/handy-redis/-/handy-redis-1.8.3.tgz#3c0a5b1ff40f8ff01bb7c06ce3e0d29871fe4c4d"
-  integrity sha512-TMC47NAaKuUC5jDMlCLNvNDIiNhyUO/ONEM7Xsbv3kiTwR9E1hsx7zctPH4fEoSKvro2gPs8bBb4+Nwscigz2A==
-  dependencies:
-    "@types/redis" "^2.8.14"
-    redis "^3.0.2"
-
-har-schema@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
-  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
-
-har-validator@~5.1.0, har-validator@~5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
-  integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==
-  dependencies:
-    ajv "^6.5.5"
-    har-schema "^2.0.0"
-
-hard-rejection@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
-  integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
-
-has-ansi@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-0.1.0.tgz#84f265aae8c0e6a88a12d7022894b7568894c62e"
-  integrity sha1-hPJlqujA5qiKEtcCKJS3VoiUxi4=
-  dependencies:
-    ansi-regex "^0.2.0"
-
-has-ansi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
-  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
-  dependencies:
-    ansi-regex "^2.0.0"
-
-has-binary2@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.3.tgz#7776ac627f3ea77250cfc332dab7ddf5e4f5d11d"
-  integrity sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==
-  dependencies:
-    isarray "2.0.1"
-
-has-color@~0.1.0:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/has-color/-/has-color-0.1.7.tgz#67144a5260c34fc3cca677d041daf52fe7b78b2f"
-  integrity sha1-ZxRKUmDDT8PMpnfQQdr1L+e3iy8=
-
-has-cors@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
-  integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=
-
-has-flag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
-  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
-
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-has-flag@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
-  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
-
-has-symbols@^1.0.0, has-symbols@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
-  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
-
-has-unicode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
-
-has-value@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
-  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
-  dependencies:
-    get-value "^2.0.3"
-    has-values "^0.1.4"
-    isobject "^2.0.0"
-
-has-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
-  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
-  dependencies:
-    get-value "^2.0.6"
-    has-values "^1.0.0"
-    isobject "^3.0.0"
-
-has-values@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
-  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
-
-has-values@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
-  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
-  dependencies:
-    is-number "^3.0.0"
-    kind-of "^4.0.0"
-
-has-yarn@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-2.1.0.tgz#137e11354a7b5bf11aa5cb649cf0c6f3ff2b2e77"
-  integrity sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==
-
-has@^1.0.0, has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
-  dependencies:
-    function-bind "^1.1.1"
-
-hash-base@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
-  integrity sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
-  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
-  dependencies:
-    inherits "^2.0.3"
-    minimalistic-assert "^1.0.1"
-
-hasha@5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/hasha/-/hasha-5.2.0.tgz#33094d1f69c40a4a6ac7be53d5fe3ff95a269e0c"
-  integrity sha512-2W+jKdQbAdSIrggA8Q35Br8qKadTrqCTC8+XZvBWepKDK6m9XkX6Iz1a2yh2KP01kzAR/dpuMeUnocoLYDcskw==
-  dependencies:
-    is-stream "^2.0.0"
-    type-fest "^0.8.0"
-
-hasha@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/hasha/-/hasha-5.1.0.tgz#dd05ccdfcfe7dab626247ce2a58efe461922f4ca"
-  integrity sha512-OFPDWmzPN1l7atOV1TgBVmNtBxaIysToK6Ve9DK+vT6pYuklw/nPNT+HJbZi0KDcI6vWB+9tgvZ5YD7fA3CXcA==
-  dependencies:
-    is-stream "^2.0.0"
-    type-fest "^0.8.0"
-
-hat@^0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/hat/-/hat-0.0.3.tgz#bb014a9e64b3788aed8005917413d4ff3d502d8a"
-  integrity sha1-uwFKnmSzeIrtgAWRdBPU/z1QLYo=
-
-he@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
-  integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
-
-he@1.2.0, he@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-
-hex-color-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
-  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
-
-highlight.js@^9.6.0:
-  version "9.15.10"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2"
-  integrity sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw==
-
-hmac-drbg@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
-  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
-  dependencies:
-    hash.js "^1.0.3"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.1"
-
-hoist-non-react-statics@^2.3.1:
-  version "2.5.5"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
-  integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
-
-hoist-non-react-statics@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
-  integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
-  dependencies:
-    react-is "^16.7.0"
-
-homedir-polyfill@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
-  integrity sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==
-  dependencies:
-    parse-passwd "^1.0.0"
-
-hosted-git-info@^2.1.4:
-  version "2.8.4"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.4.tgz#44119abaf4bc64692a16ace34700fed9c03e2546"
-  integrity sha512-pzXIvANXEFrc5oFFXRMkbLPQ2rXRoDERwDLyrcUxGhaZhgP54BBSl9Oheh7Vv0T090cszWBxPjkQQ5Sq1PbBRQ==
-
-hsl-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
-  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
-
-hsla-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
-  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
-
-html-comment-regex@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
-  integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
-
-html-element-map@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.2.0.tgz#dfbb09efe882806af63d990cf6db37993f099f22"
-  integrity sha512-0uXq8HsuG1v2TmQ8QkIhzbrqeskE4kn52Q18QJ9iAA/SnHoEKXWiUxHQtclRsCFWEUD2So34X+0+pZZu862nnw==
-  dependencies:
-    array-filter "^1.0.0"
-
-html-encoding-sniffer@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
-  integrity sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==
-  dependencies:
-    whatwg-encoding "^1.0.1"
-
-html-encoding-sniffer@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
-  integrity sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==
-  dependencies:
-    whatwg-encoding "^1.0.5"
-
-html-escaper@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
-  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
-
-html-minifier@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-4.0.0.tgz#cca9aad8bce1175e02e17a8c33e46d8988889f56"
-  integrity sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==
-  dependencies:
-    camel-case "^3.0.0"
-    clean-css "^4.2.1"
-    commander "^2.19.0"
-    he "^1.2.0"
-    param-case "^2.1.1"
-    relateurl "^0.2.7"
-    uglify-js "^3.5.1"
-
-htmlescape@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/htmlescape/-/htmlescape-1.1.1.tgz#3a03edc2214bca3b66424a3e7959349509cb0351"
-  integrity sha1-OgPtwiFLyjtmQko+eVk0lQnLA1E=
-
-htmlparser2@^3.9.1, htmlparser2@^3.9.2:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
-  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
-  dependencies:
-    domelementtype "^1.3.1"
-    domhandler "^2.3.0"
-    domutils "^1.5.1"
-    entities "^1.1.1"
-    inherits "^2.0.1"
-    readable-stream "^3.1.1"
-
-http-cache-semantics@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.0.3.tgz#495704773277eeef6e43f9ab2c2c7d259dda25c5"
-  integrity sha512-TcIMG3qeVLgDr1TEd2XvHaTnMPwYQUQMIBLy+5pLSDKYFc7UIqj39w8EGzZkaxoLv/l2K8HaI0t5AVA+YYgUew==
-
-http-errors@1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
-  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
-http-errors@~1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.3.1.tgz#197e22cdebd4198585e8694ef6786197b91ed942"
-  integrity sha1-GX4izevUGYWF6GlO9nhhl7ke2UI=
-  dependencies:
-    inherits "~2.0.1"
-    statuses "1"
-
-http-errors@~1.6.2:
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
-  integrity sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.0"
-    statuses ">= 1.4.0 < 2"
-
-http-errors@~1.7.2:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
-  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.4"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
-"http-parser-js@>=0.4.0 <0.4.11":
-  version "0.4.10"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.10.tgz#92c9c1374c35085f75db359ec56cc257cbb93fa4"
-  integrity sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=
-
-http-proxy-agent@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
-  integrity sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==
-  dependencies:
-    "@tootallnate/once" "1"
-    agent-base "6"
-    debug "4"
-
-http-proxy@^0.10:
-  version "0.10.4"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-0.10.4.tgz#14ba0ceaa2197f89fa30dea9e7b09e19cd93c22f"
-  integrity sha1-FLoM6qIZf4n6MN6p57CeGc2Twi8=
-  dependencies:
-    colors "0.x.x"
-    optimist "0.6.x"
-    pkginfo "0.3.x"
-    utile "~0.2.1"
-
-http-proxy@^1.18.1:
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
-  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
-  dependencies:
-    eventemitter3 "^4.0.0"
-    follow-redirects "^1.0.0"
-    requires-port "^1.0.0"
-
-http-signature@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
-  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
-  dependencies:
-    assert-plus "^1.0.0"
-    jsprim "^1.2.2"
-    sshpk "^1.7.0"
-
-https-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
-  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
-
-https-proxy-agent@^2.2.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.2.tgz#271ea8e90f836ac9f119daccd39c19ff7dfb0793"
-  integrity sha512-c8Ndjc9Bkpfx/vCJueCPy0jlP4ccCCSNDp8xwCZzPjKJUm+B+u9WX2x98Qx4n1PiMNTWo3D7KK5ifNV/yJyRzg==
-  dependencies:
-    agent-base "^4.3.0"
-    debug "^3.1.0"
-
-https-proxy-agent@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz#702b71fb5520a132a66de1f67541d9e62154d82b"
-  integrity sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==
-  dependencies:
-    agent-base "5"
-    debug "4"
-
-human-signals@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
-  integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
-
-hyphenate-style-name@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
-  integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
-
-i@0.3.x:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/i/-/i-0.3.6.tgz#d96c92732076f072711b6b10fd7d4f65ad8ee23d"
-  integrity sha1-2WyScyB28HJxG2sQ/X1PZa2O4j0=
-
-iconv-lite@0.4.11:
-  version "0.4.11"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.11.tgz#2ecb42fd294744922209a2e7c404dac8793d8ade"
-  integrity sha1-LstC/SlHRJIiCaLnxATayHk9it4=
-
-iconv-lite@0.4.13:
-  version "0.4.13"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
-  integrity sha1-H4irpKsLFQjoMSrMOTRfNumS4vI=
-
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
-  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
-ieee754@1.1.13, ieee754@^1.1.4:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
-  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
-
-ignore-by-default@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
-  integrity sha1-SMptcvbGo68Aqa1K5odr44ieKwk=
-
-ignore-walk@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
-  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
-  dependencies:
-    minimatch "^3.0.4"
-
-ignore-walk@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.2.tgz#99d83a246c196ea5c93ef9315ad7b0819c35069b"
-  integrity sha512-EXyErtpHbn75ZTsOADsfx6J/FPo6/5cjev46PXrcTpd8z3BoRkXgYu9/JVqrI7tusjmwCZutGeRJeU0Wo1e4Cw==
-  dependencies:
-    minimatch "^3.0.4"
-
-ignore@5.1.8:
-  version "5.1.8"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
-  integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
-
-ignore@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
-  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
-
-ignore@^5.1.1, ignore@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.4.tgz#84b7b3dbe64552b6ef0eca99f6743dbec6d97adf"
-  integrity sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==
-
-immediate@~3.0.5:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
-  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
-
-import-fresh@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
-  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
-  dependencies:
-    caller-path "^2.0.0"
-    resolve-from "^3.0.0"
-
-import-fresh@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.1.0.tgz#6d33fa1dcef6df930fae003446f33415af905118"
-  integrity sha512-PpuksHKGt8rXfWEr9m9EHIpgyyaltBy8+eF6GJM0QCAxMgxCfucMF3mjecK2QsJr0amJW7gTqh5/wht0z2UhEQ==
-  dependencies:
-    parent-module "^1.0.0"
-    resolve-from "^4.0.0"
-
-import-lazy@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
-  integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
-
-import-local@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
-  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
-  dependencies:
-    pkg-dir "^3.0.0"
-    resolve-cwd "^2.0.0"
-
-import-local@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
-  integrity sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==
-  dependencies:
-    pkg-dir "^4.2.0"
-    resolve-cwd "^3.0.0"
-
-imurmurhash@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
-  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
-
-indent-string@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
-  integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=
-  dependencies:
-    repeating "^2.0.0"
-
-indent-string@^3.0.0, indent-string@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
-  integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
-
-indent-string@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
-  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
-
-indexes-of@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
-  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
-
-indexof@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
-  integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
-
-infer-owner@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
-  integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-inherits@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
-  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
-
-inherits@2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
-
-ini@1.3.5, ini@^1.3.4, ini@~1.3.0:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
-  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
-
-inline-source-map@~0.6.0:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/inline-source-map/-/inline-source-map-0.6.2.tgz#f9393471c18a79d1724f863fa38b586370ade2a5"
-  integrity sha1-+Tk0ccGKedFyT4Y/o4tYY3Ct4qU=
-  dependencies:
-    source-map "~0.5.3"
-
-inline-style-prefixer@^3.0.1:
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz#8551b8e5b4d573244e66a34b04f7d32076a2b534"
-  integrity sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=
-  dependencies:
-    bowser "^1.7.3"
-    css-in-js-utils "^2.0.0"
-
-inquirer@^6.4.1:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.2.tgz#ad50942375d036d327ff528c08bd5fab089928ca"
-  integrity sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==
-  dependencies:
-    ansi-escapes "^3.2.0"
-    chalk "^2.4.2"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^3.0.3"
-    figures "^2.0.0"
-    lodash "^4.17.12"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rxjs "^6.4.0"
-    string-width "^2.1.0"
-    strip-ansi "^5.1.0"
-    through "^2.3.6"
-
-inquirer@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.0.0.tgz#9e2b032dde77da1db5db804758b8fea3a970519a"
-  integrity sha512-rSdC7zelHdRQFkWnhsMu2+2SO41mpv2oF2zy4tMhmiLWkcKbOAs87fWAJhVXttKVwhdZvymvnuM95EyEXg2/tQ==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^2.4.2"
-    cli-cursor "^3.1.0"
-    cli-width "^2.0.0"
-    external-editor "^3.0.3"
-    figures "^3.0.0"
-    lodash "^4.17.15"
-    mute-stream "0.0.8"
-    run-async "^2.2.0"
-    rxjs "^6.4.0"
-    string-width "^4.1.0"
-    strip-ansi "^5.1.0"
-    through "^2.3.6"
-
-insert-module-globals@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/insert-module-globals/-/insert-module-globals-7.2.0.tgz#ec87e5b42728479e327bd5c5c71611ddfb4752ba"
-  integrity sha512-VE6NlW+WGn2/AeOMd496AHFYmE7eLKkUY6Ty31k4og5vmA3Fjuwe9v6ifH6Xx/Hz27QvdoMoviw1/pqWRB09Sw==
-  dependencies:
-    JSONStream "^1.0.3"
-    acorn-node "^1.5.2"
-    combine-source-map "^0.8.0"
-    concat-stream "^1.6.1"
-    is-buffer "^1.1.0"
-    path-is-absolute "^1.0.1"
-    process "~0.11.0"
-    through2 "^2.0.0"
-    undeclared-identifiers "^1.1.2"
-    xtend "^4.0.0"
-
-internal-slot@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.2.tgz#9c2e9fb3cd8e5e4256c6f45fe310067fcfa378a3"
-  integrity sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==
-  dependencies:
-    es-abstract "^1.17.0-next.1"
-    has "^1.0.3"
-    side-channel "^1.0.2"
-
-interpret@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
-  integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
-
-intersection-observer@0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.10.0.tgz#4d11d63c1ff67e21e62987be24d55218da1a1a69"
-  integrity sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==
-
-invariant@^2.2.2, invariant@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
-invert-kv@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
-  integrity sha1-EEqOSqym09jNFXqO+L+rLXo//bY=
-
-ip@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
-  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
-
-ip-regex@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
-  integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
-
-ipaddr.js@1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
-  integrity sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==
-
-irregular-plurals@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/irregular-plurals/-/irregular-plurals-2.0.0.tgz#39d40f05b00f656d0b7fa471230dd3b714af2872"
-  integrity sha512-Y75zBYLkh0lJ9qxeHlMjQ7bSbyiSqNW/UOPWDmzC7cXskL1hekSITh1Oc6JV0XCWWZ9DE8VYSB71xocLk3gmGw==
-
-is-absolute-url@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
-  integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
-
-is-absolute-url@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
-  integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
-
-is-absolute@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-1.0.0.tgz#395e1ae84b11f26ad1795e73c17378e48a301576"
-  integrity sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==
-  dependencies:
-    is-relative "^1.0.0"
-    is-windows "^1.0.1"
-
-is-accessor-descriptor@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
-  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-accessor-descriptor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
-  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
-  dependencies:
-    kind-of "^6.0.0"
-
-is-alphabetical@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
-  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
-
-is-alphanumeric@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz#4a9cef71daf4c001c1d81d63d140cf53fd6889f4"
-  integrity sha1-Spzvcdr0wAHB2B1j0UDPU/1oifQ=
-
-is-alphanumerical@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
-  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
-  dependencies:
-    is-alphabetical "^1.0.0"
-    is-decimal "^1.0.0"
-
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
-is-arrayish@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
-  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
-
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
-
-is-binary-path@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
-  integrity sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=
-  dependencies:
-    binary-extensions "^1.0.0"
-
-is-binary-path@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
-  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
-  dependencies:
-    binary-extensions "^2.0.0"
-
-is-boolean-object@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
-
-is-buffer@^1.1.0, is-buffer@^1.1.4, is-buffer@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
-  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
-
-is-buffer@~2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
-  integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
-
-is-callable@^1.1.4, is-callable@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
-  integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
-
-is-ci@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
-  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
-  dependencies:
-    ci-info "^2.0.0"
-
-is-color-stop@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
-  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
-  dependencies:
-    css-color-names "^0.0.4"
-    hex-color-regex "^1.1.0"
-    hsl-regex "^1.0.0"
-    hsla-regex "^1.0.0"
-    rgb-regex "^1.0.1"
-    rgba-regex "^1.0.0"
-
-is-data-descriptor@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
-  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-data-descriptor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
-  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
-  dependencies:
-    kind-of "^6.0.0"
-
-is-date-object@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
-  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
-
-is-decimal@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
-  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
-
-is-descriptor@^0.1.0:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
-  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
-  dependencies:
-    is-accessor-descriptor "^0.1.6"
-    is-data-descriptor "^0.1.4"
-    kind-of "^5.0.0"
-
-is-descriptor@^1.0.0, is-descriptor@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
-  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
-  dependencies:
-    is-accessor-descriptor "^1.0.0"
-    is-data-descriptor "^1.0.0"
-    kind-of "^6.0.2"
-
-is-directory@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
-  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
-
-is-dotfile@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
-  integrity sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=
-
-is-equal-shallow@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
-  integrity sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=
-  dependencies:
-    is-primitive "^2.0.0"
-
-is-error@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/is-error/-/is-error-2.2.2.tgz#c10ade187b3c93510c5470a5567833ee25649843"
-  integrity sha512-IOQqts/aHWbiisY5DuPJQ0gcbvaLFCa7fBa9xoLfxBZvQ+ZI/Zh9xoI7Gk+G64N0FdK4AbibytHht2tWgpJWLg==
-
-is-extendable@^0.1.0, is-extendable@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
-  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
-
-is-extendable@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
-  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
-  dependencies:
-    is-plain-object "^2.0.4"
-
-is-extglob@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
-  integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=
-
-is-extglob@^2.1.0, is-extglob@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
-
-is-finite@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
-  integrity sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=
-  dependencies:
-    number-is-nan "^1.0.0"
-
-is-fullwidth-code-point@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
-  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
-  dependencies:
-    number-is-nan "^1.0.0"
-
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
-
-is-fullwidth-code-point@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
-  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
-
-is-function@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
-  integrity sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=
-
-is-generator-fn@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
-  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
-
-is-glob@^2.0.0, is-glob@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
-  integrity sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=
-  dependencies:
-    is-extglob "^1.0.0"
-
-is-glob@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
-  integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
-  dependencies:
-    is-extglob "^2.1.0"
-
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
-  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
-  dependencies:
-    is-extglob "^2.1.1"
-
-is-hexadecimal@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
-  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
-
-is-installed-globally@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
-  integrity sha1-Df2Y9akRFxbdU13aZJL2e/PSWoA=
-  dependencies:
-    global-dirs "^0.1.0"
-    is-path-inside "^1.0.0"
-
-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
-is-negated-glob@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-negated-glob/-/is-negated-glob-1.0.0.tgz#6910bca5da8c95e784b5751b976cf5a10fee36d2"
-  integrity sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=
-
-is-npm@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-3.0.0.tgz#ec9147bfb629c43f494cf67936a961edec7e8053"
-  integrity sha512-wsigDr1Kkschp2opC4G3yA6r9EgVA6NjRpWzIi9axXqeIaAATPRJc4uLujXe3Nd9uO8KoDyA4MD6aZSeXTADhA==
-
-is-number-object@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
-is-number@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
-  integrity sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-number@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
-  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-number@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
-  integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
-
-is-number@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
-  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
-
-is-obj@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
-  integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
-
-is-obj@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
-  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
-
-is-observable@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-2.0.0.tgz#327af1e8cdea9cd717f95911b87c5d34301721a6"
-  integrity sha512-fhBZv3eFKUbyHXZ1oHujdo2tZ+CNbdpdzzlENgCGZUC8keoGxUew2jYFLYcUB4qo7LDD03o4KK11m/QYD7kEjg==
-
-is-path-cwd@^2.0.0, is-path-cwd@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
-  integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
-
-is-path-in-cwd@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz#bfe2dca26c69f397265a4009963602935a053acb"
-  integrity sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==
-  dependencies:
-    is-path-inside "^2.1.0"
-
-is-path-inside@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
-  integrity sha1-jvW33lBDej/cprToZe96pVy0gDY=
-  dependencies:
-    path-is-inside "^1.0.1"
-
-is-path-inside@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-2.1.0.tgz#7c9810587d659a40d27bcdb4d5616eab059494b2"
-  integrity sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==
-  dependencies:
-    path-is-inside "^1.0.2"
-
-is-path-inside@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.2.tgz#f5220fc82a3e233757291dddc9c5877f2a1f3017"
-  integrity sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==
-
-is-plain-obj@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
-  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
-
-is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
-  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
-  dependencies:
-    isobject "^3.0.1"
-
-is-plain-object@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.0.tgz#47bfc5da1b5d50d64110806c199359482e75a928"
-  integrity sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg==
-  dependencies:
-    isobject "^4.0.0"
-
-is-posix-bracket@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
-  integrity sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=
-
-is-potential-custom-element-name@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz#0c52e54bcca391bb2c494b21e8626d7336c6e397"
-  integrity sha1-DFLlS8yjkbssSUsh6GJtczbG45c=
-
-is-primitive@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
-  integrity sha1-IHurkWOEmcB7Kt8kCkGochADRXU=
-
-is-promise@^2.1, is-promise@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
-  integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
-
-is-regex@^1.0.4, is-regex@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
-  integrity sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==
-  dependencies:
-    has "^1.0.3"
-
-is-relative-url@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-relative-url/-/is-relative-url-3.0.0.tgz#f623c8e26baa5bd3742b3b7ec074f50f3b45b3f3"
-  integrity sha512-U1iSYRlY2GIMGuZx7gezlB5dp1Kheaym7zKzO1PV06mOihiWTXejLwm4poEJysPyXF+HtK/BEd0DVlcCh30pEA==
-  dependencies:
-    is-absolute-url "^3.0.0"
-
-is-relative@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d"
-  integrity sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==
-  dependencies:
-    is-unc-path "^1.0.0"
-
-is-resolvable@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
-  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
-
-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
-
-is-stream@^1.0.1, is-stream@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
-
-is-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
-  integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
-
-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
-is-subset@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
-  integrity sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY=
-
-is-svg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
-  integrity sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==
-  dependencies:
-    html-comment-regex "^1.1.0"
-
-is-symbol@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
-  integrity sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==
-  dependencies:
-    has-symbols "^1.0.0"
-
-is-symbol@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
-  integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
-  dependencies:
-    has-symbols "^1.0.1"
-
-is-touch-device@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-touch-device/-/is-touch-device-1.0.1.tgz#9a2fd59f689e9a9bf6ae9a86924c4ba805a42eab"
-  integrity sha512-LAYzo9kMT1b2p19L/1ATGt2XcSilnzNlyvq6c0pbPRVisLbAPpLqr53tIJS00kvrTkj0HtR8U7+u8X0yR8lPSw==
-
-is-typedarray@^1.0.0, is-typedarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
-  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
-
-is-unc-path@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-1.0.0.tgz#d731e8898ed090a12c352ad2eaed5095ad322c9d"
-  integrity sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==
-  dependencies:
-    unc-path-regex "^0.1.2"
-
-is-url@^1.2.1, is-url@^1.2.2:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
-  integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
-
-is-utf8@^0.2.0, is-utf8@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
-  integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
-
-is-valid-glob@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-valid-glob/-/is-valid-glob-1.0.0.tgz#29bf3eff701be2d4d315dbacc39bc39fe8f601aa"
-  integrity sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao=
-
-is-whitespace-character@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
-  integrity sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==
-
-is-windows@^1.0.1, is-windows@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
-  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
-
-is-word-character@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.4.tgz#ce0e73216f98599060592f62ff31354ddbeb0230"
-  integrity sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==
-
-is-wsl@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
-  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
-
-is-wsl@^2.1.0, is-wsl@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.1.1.tgz#4a1c152d429df3d441669498e2486d3596ebaf1d"
-  integrity sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==
-
-is-yarn-global@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
-  integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==
-
-is2@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is2/-/is2-2.0.1.tgz#8ac355644840921ce435d94f05d3a94634d3481a"
-  integrity sha512-+WaJvnaA7aJySz2q/8sLjMb2Mw14KTplHmSwcSpZ/fWJPkUmqw3YTzSWbPJ7OAwRvdYTWF2Wg+yYJ1AdP5Z8CA==
-  dependencies:
-    deep-is "^0.1.3"
-    ip-regex "^2.1.0"
-    is-url "^1.2.2"
-
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
-
-isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
-
-isarray@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.1.tgz#a37d94ed9cda2d59865c9f76fe596ee1f338741e"
-  integrity sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=
-
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
-isbinaryfile@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
-  integrity sha512-ORrEy+SNVqUhrCaal4hA4fBzhggQQ+BaLntyPOdoEiwlKZW9BZiJXjg3RMiruE4tPEI3pyVPpySHQF/dKWperg==
-
-isemail@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/isemail/-/isemail-3.2.0.tgz#59310a021931a9fb06bbb51e155ce0b3f236832c"
-  integrity sha512-zKqkK+O+dGqevc93KNsbZ/TqTUFd46MwWjYOoMrjIMZ51eU7DtQG3Wmd9SQQT7i7RVnuTPEiYEWHU3MSbxC1Tg==
-  dependencies:
-    punycode "2.x.x"
-
-isexe@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
-  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
-
-isobject@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
-  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
-  dependencies:
-    isarray "1.0.0"
-
-isobject@^3.0.0, isobject@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
-  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
-
-isobject@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
-  integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==
-
-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
-  dependencies:
-    node-fetch "^1.0.1"
-    whatwg-fetch ">=0.10.0"
-
-isstream@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
-  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
-
-istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
-  integrity sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==
-
-istanbul-lib-coverage@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
-  integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
-
-istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz#a5f63d91f0bbc0c3e479ef4c5de027335ec6d630"
-  integrity sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==
-  dependencies:
-    "@babel/generator" "^7.4.0"
-    "@babel/parser" "^7.4.3"
-    "@babel/template" "^7.4.0"
-    "@babel/traverse" "^7.4.3"
-    "@babel/types" "^7.4.0"
-    istanbul-lib-coverage "^2.0.5"
-    semver "^6.0.0"
-
-istanbul-lib-instrument@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.0.tgz#53321a7970f076262fd3292c8f9b2e4ac544aae1"
-  integrity sha512-Nm4wVHdo7ZXSG30KjZ2Wl5SU/Bw7bDx1PdaiIFzEStdjs0H12mOTncn1GVYuqQSaZxpg87VGBRsVRPGD2cD1AQ==
-  dependencies:
-    "@babel/core" "^7.7.5"
-    "@babel/parser" "^7.7.5"
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@istanbuljs/schema" "^0.1.2"
-    istanbul-lib-coverage "^3.0.0"
-    semver "^6.3.0"
-
-istanbul-lib-report@^2.0.4:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz#5a8113cd746d43c4889eba36ab10e7d50c9b4f33"
-  integrity sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==
-  dependencies:
-    istanbul-lib-coverage "^2.0.5"
-    make-dir "^2.1.0"
-    supports-color "^6.1.0"
-
-istanbul-lib-report@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
-  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
-  dependencies:
-    istanbul-lib-coverage "^3.0.0"
-    make-dir "^3.0.0"
-    supports-color "^7.1.0"
-
-istanbul-lib-source-maps@^3.0.1, istanbul-lib-source-maps@^3.0.6:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz#284997c48211752ec486253da97e3879defba8c8"
-  integrity sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==
-  dependencies:
-    debug "^4.1.1"
-    istanbul-lib-coverage "^2.0.5"
-    make-dir "^2.1.0"
-    rimraf "^2.6.3"
-    source-map "^0.6.1"
-
-istanbul-lib-source-maps@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz#75743ce6d96bb86dc7ee4352cf6366a23f0b1ad9"
-  integrity sha512-c16LpFRkR8vQXyHZ5nLpY35JZtzj1PQY1iZmesUbf1FZHbIupcWfjgOXBY9YHkLEQ6puz1u4Dgj6qmU/DisrZg==
-  dependencies:
-    debug "^4.1.1"
-    istanbul-lib-coverage "^3.0.0"
-    source-map "^0.6.1"
-
-istanbul-reports@^2.2.6:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.6.tgz#7b4f2660d82b29303a8fe6091f8ca4bf058da1af"
-  integrity sha512-SKi4rnMyLBKe0Jy2uUdx28h8oG7ph2PPuQPvIAh31d+Ci+lSiEu4C+h3oBPuJ9+mPKhOyW0M8gY4U5NM1WLeXA==
-  dependencies:
-    handlebars "^4.1.2"
-
-istanbul-reports@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.2.tgz#d593210e5000683750cb09fc0644e4b6e27fd53b"
-  integrity sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==
-  dependencies:
-    html-escaper "^2.0.0"
-    istanbul-lib-report "^3.0.0"
-
-istanbul-threshold-checker@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/istanbul-threshold-checker/-/istanbul-threshold-checker-0.2.1.tgz#c5dc94e8f2cc5cd3ffd335452f84b553c4248331"
-  integrity sha1-xdyU6PLMXNP/0zVFL4S1U8QkgzE=
-  dependencies:
-    istanbul "~0.4.5"
-    lodash "~4.17.2"
-
-istanbul@^0.4.0, istanbul@~0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/istanbul/-/istanbul-0.4.5.tgz#65c7d73d4c4da84d4f3ac310b918fb0b8033733b"
-  integrity sha1-ZcfXPUxNqE1POsMQuRj7C4Azczs=
-  dependencies:
-    abbrev "1.0.x"
-    async "1.x"
-    escodegen "1.8.x"
-    esprima "2.7.x"
-    glob "^5.0.15"
-    handlebars "^4.0.1"
-    js-yaml "3.x"
-    mkdirp "0.5.x"
-    nopt "3.x"
-    once "1.x"
-    resolve "1.1.x"
-    supports-color "^3.1.0"
-    which "^1.1.1"
-    wordwrap "^1.0.0"
-
-iterate-iterator@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/iterate-iterator/-/iterate-iterator-1.0.1.tgz#1693a768c1ddd79c969051459453f082fe82e9f6"
-  integrity sha512-3Q6tudGN05kbkDQDI4CqjaBf4qf85w6W6GnuZDtUVYwKgtC1q8yxYX7CZed7N+tLzQqS6roujWvszf13T+n9aw==
-
-iterate-value@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/iterate-value/-/iterate-value-1.0.2.tgz#935115bd37d006a52046535ebc8d07e9c9337f57"
-  integrity sha512-A6fMAio4D2ot2r/TYzr4yUWrmwNdsN5xL7+HUiyACE4DXm+q8HtPcnFTp+NnW3k4N05tZ7FVYFFb2CR13NxyHQ==
-  dependencies:
-    es-get-iterator "^1.0.2"
-    iterate-iterator "^1.0.1"
-
-jest-changed-files@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
-  integrity sha512-6aTWpe2mHF0DhL28WjdkO8LyGjs3zItPET4bMSeXU6T3ub4FPMw+mcOcbdGXQOAfmLcxofD23/5Bl9Z4AkFwqg==
-  dependencies:
-    "@jest/types" "^24.9.0"
-    execa "^1.0.0"
-    throat "^4.0.0"
-
-jest-changed-files@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.0.1.tgz#1334630c6a1ad75784120f39c3aa9278e59f349f"
-  integrity sha512-q8LP9Sint17HaE2LjxQXL+oYWW/WeeXMPE2+Op9X3mY8IEGFVc14xRxFjUuXUbcPAlDLhtWdIEt59GdQbn76Hw==
-  dependencies:
-    "@jest/types" "^26.0.1"
-    execa "^4.0.0"
-    throat "^5.0.0"
-
-jest-cli@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.9.0.tgz#ad2de62d07472d419c6abc301fc432b98b10d2af"
-  integrity sha512-+VLRKyitT3BWoMeSUIHRxV/2g8y9gw91Jh5z2UmXZzkZKpbC08CSehVxgHUwTpy+HwGcns/tqafQDJW7imYvGg==
-  dependencies:
-    "@jest/core" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
-    exit "^0.1.2"
-    import-local "^2.0.0"
-    is-ci "^2.0.0"
-    jest-config "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    prompts "^2.0.1"
-    realpath-native "^1.1.0"
-    yargs "^13.3.0"
-
-jest-config@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.9.0.tgz#fb1bbc60c73a46af03590719efa4825e6e4dd1b5"
-  integrity sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@jest/test-sequencer" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    babel-jest "^24.9.0"
-    chalk "^2.0.1"
-    glob "^7.1.1"
-    jest-environment-jsdom "^24.9.0"
-    jest-environment-node "^24.9.0"
-    jest-get-type "^24.9.0"
-    jest-jasmine2 "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    micromatch "^3.1.10"
-    pretty-format "^24.9.0"
-    realpath-native "^1.1.0"
-
-jest-config@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-26.0.1.tgz#096a3d4150afadf719d1fab00e9a6fb2d6d67507"
-  integrity sha512-9mWKx2L1LFgOXlDsC4YSeavnblN6A4CPfXFiobq+YYLaBMymA/SczN7xYTSmLaEYHZOcB98UdoN4m5uNt6tztg==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@jest/test-sequencer" "^26.0.1"
-    "@jest/types" "^26.0.1"
-    babel-jest "^26.0.1"
-    chalk "^4.0.0"
-    deepmerge "^4.2.2"
-    glob "^7.1.1"
-    graceful-fs "^4.2.4"
-    jest-environment-jsdom "^26.0.1"
-    jest-environment-node "^26.0.1"
-    jest-get-type "^26.0.0"
-    jest-jasmine2 "^26.0.1"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.0.1"
-    jest-util "^26.0.1"
-    jest-validate "^26.0.1"
-    micromatch "^4.0.2"
-    pretty-format "^26.0.1"
-
-jest-diff@^24.8.0, jest-diff@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
-  integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
-  dependencies:
-    chalk "^2.0.1"
-    diff-sequences "^24.9.0"
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
-
-jest-diff@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.0.1.tgz#c44ab3cdd5977d466de69c46929e0e57f89aa1de"
-  integrity sha512-odTcHyl5X+U+QsczJmOjWw5tPvww+y9Yim5xzqxVl/R1j4z71+fHW4g8qu1ugMmKdFdxw+AtQgs5mupPnzcIBQ==
-  dependencies:
-    chalk "^4.0.0"
-    diff-sequences "^26.0.0"
-    jest-get-type "^26.0.0"
-    pretty-format "^26.0.1"
-
-jest-docblock@^24.3.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
-  integrity sha512-F1DjdpDMJMA1cN6He0FNYNZlo3yYmOtRUnktrT9Q37njYzC5WEaDdmbynIgy0L/IvXvvgsG8OsqhLPXTpfmZAA==
-  dependencies:
-    detect-newline "^2.1.0"
-
-jest-docblock@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
-  integrity sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==
-  dependencies:
-    detect-newline "^3.0.0"
-
-jest-dot-reporter@1.0.12:
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/jest-dot-reporter/-/jest-dot-reporter-1.0.12.tgz#7ace8d8a111779e409ef9cfcfcf702e2e7bd2f97"
-  integrity sha512-pY9+z6z+jaKx0XYdlXq3xJGqLXgzrjZFSv94XQXAwY5sk1Tb5SubbbWnpdXWKGWLNEiCyk78QLuWMQH7gv6Ahw==
-  dependencies:
-    chalk "2.4.2"
-    moment "2.24.0"
-    progress "2.0.3"
-
-jest-each@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.9.0.tgz#eb2da602e2a610898dbc5f1f6df3ba86b55f8b05"
-  integrity sha512-ONi0R4BvW45cw8s2Lrx8YgbeXL1oCQ/wIDwmsM3CqM/nlblNCPmnC3IPQlMbRFZu3wKdQ2U8BqM6lh3LJ5Bsog==
-  dependencies:
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
-    jest-get-type "^24.9.0"
-    jest-util "^24.9.0"
-    pretty-format "^24.9.0"
-
-jest-each@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-26.0.1.tgz#633083061619302fc90dd8f58350f9d77d67be04"
-  integrity sha512-OTgJlwXCAR8NIWaXFL5DBbeS4QIYPuNASkzSwMCJO+ywo9BEa6TqkaSWsfR7VdbMLdgYJqSfQcIyjJCNwl5n4Q==
-  dependencies:
-    "@jest/types" "^26.0.1"
-    chalk "^4.0.0"
-    jest-get-type "^26.0.0"
-    jest-util "^26.0.1"
-    pretty-format "^26.0.1"
-
-jest-environment-jsdom@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
-  integrity sha512-Zv9FV9NBRzLuALXjvRijO2351DRQeLYXtpD4xNvfoVFw21IOKNhZAEUKcbiEtjTkm2GsJ3boMVgkaR7rN8qetA==
-  dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-util "^24.9.0"
-    jsdom "^11.5.1"
-
-jest-environment-jsdom@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.0.1.tgz#217690852e5bdd7c846a4e3b50c8ffd441dfd249"
-  integrity sha512-u88NJa3aptz2Xix2pFhihRBAatwZHWwSiRLBDBQE1cdJvDjPvv7ZGA0NQBxWwDDn7D0g1uHqxM8aGgfA9Bx49g==
-  dependencies:
-    "@jest/environment" "^26.0.1"
-    "@jest/fake-timers" "^26.0.1"
-    "@jest/types" "^26.0.1"
-    jest-mock "^26.0.1"
-    jest-util "^26.0.1"
-    jsdom "^16.2.2"
-
-jest-environment-node@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.9.0.tgz#333d2d2796f9687f2aeebf0742b519f33c1cbfd3"
-  integrity sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==
-  dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-util "^24.9.0"
-
-jest-environment-node@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-26.0.1.tgz#584a9ff623124ff6eeb49e0131b5f7612b310b13"
-  integrity sha512-4FRBWcSn5yVo0KtNav7+5NH5Z/tEgDLp7VRQVS5tCouWORxj+nI+1tOLutM07Zb2Qi7ja+HEDoOUkjBSWZg/IQ==
-  dependencies:
-    "@jest/environment" "^26.0.1"
-    "@jest/fake-timers" "^26.0.1"
-    "@jest/types" "^26.0.1"
-    jest-mock "^26.0.1"
-    jest-util "^26.0.1"
-
-jest-get-type@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
-  integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
-
-jest-get-type@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.0.0.tgz#381e986a718998dbfafcd5ec05934be538db4039"
-  integrity sha512-zRc1OAPnnws1EVfykXOj19zo2EMw5Hi6HLbFCSjpuJiXtOWAYIjNsHVSbpQ8bDX7L5BGYGI8m+HmKdjHYFF0kg==
-
-jest-haste-map@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
-  integrity sha512-kfVFmsuWui2Sj1Rp1AJ4D9HqJwE4uwTlS/vO+eRUaMmd54BFpli2XhMQnPC2k4cHFVbB2Q2C+jtI1AGLgEnCjQ==
-  dependencies:
-    "@jest/types" "^24.9.0"
-    anymatch "^2.0.0"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.1.15"
-    invariant "^2.2.4"
-    jest-serializer "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.9.0"
-    micromatch "^3.1.10"
-    sane "^4.0.3"
-    walker "^1.0.7"
-  optionalDependencies:
-    fsevents "^1.2.7"
-
-jest-haste-map@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.0.1.tgz#40dcc03c43ac94d25b8618075804d09cd5d49de7"
-  integrity sha512-J9kBl/EdjmDsvyv7CiyKY5+DsTvVOScenprz/fGqfLg/pm1gdjbwwQ98nW0t+OIt+f+5nAVaElvn/6wP5KO7KA==
-  dependencies:
-    "@jest/types" "^26.0.1"
-    "@types/graceful-fs" "^4.1.2"
-    anymatch "^3.0.3"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.2.4"
-    jest-serializer "^26.0.0"
-    jest-util "^26.0.1"
-    jest-worker "^26.0.0"
-    micromatch "^4.0.2"
-    sane "^4.0.3"
-    walker "^1.0.7"
-    which "^2.0.2"
-  optionalDependencies:
-    fsevents "^2.1.2"
-
-jest-jasmine2@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz#1f7b1bd3242c1774e62acabb3646d96afc3be6a0"
-  integrity sha512-Cq7vkAgaYKp+PsX+2/JbTarrk0DmNhsEtqBXNwUHkdlbrTBLtMJINADf2mf5FkowNsq8evbPc07/qFO0AdKTzw==
-  dependencies:
-    "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
-    co "^4.6.0"
-    expect "^24.9.0"
-    is-generator-fn "^2.0.0"
-    jest-each "^24.9.0"
-    jest-matcher-utils "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    pretty-format "^24.9.0"
-    throat "^4.0.0"
-
-jest-jasmine2@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.0.1.tgz#947c40ee816636ba23112af3206d6fa7b23c1c1c"
-  integrity sha512-ILaRyiWxiXOJ+RWTKupzQWwnPaeXPIoLS5uW41h18varJzd9/7I0QJGqg69fhTT1ev9JpSSo9QtalriUN0oqOg==
-  dependencies:
-    "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^26.0.1"
-    "@jest/source-map" "^26.0.0"
-    "@jest/test-result" "^26.0.1"
-    "@jest/types" "^26.0.1"
-    chalk "^4.0.0"
-    co "^4.6.0"
-    expect "^26.0.1"
-    is-generator-fn "^2.0.0"
-    jest-each "^26.0.1"
-    jest-matcher-utils "^26.0.1"
-    jest-message-util "^26.0.1"
-    jest-runtime "^26.0.1"
-    jest-snapshot "^26.0.1"
-    jest-util "^26.0.1"
-    pretty-format "^26.0.1"
-    throat "^5.0.0"
-
-jest-leak-detector@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz#b665dea7c77100c5c4f7dfcb153b65cf07dcf96a"
-  integrity sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==
-  dependencies:
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
-
-jest-leak-detector@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-26.0.1.tgz#79b19ab3f41170e0a78eb8fa754a116d3447fb8c"
-  integrity sha512-93FR8tJhaYIWrWsbmVN1pQ9ZNlbgRpfvrnw5LmgLRX0ckOJ8ut/I35CL7awi2ecq6Ca4lL59bEK9hr7nqoHWPA==
-  dependencies:
-    jest-get-type "^26.0.0"
-    pretty-format "^26.0.1"
-
-jest-matcher-utils@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
-  integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
-  dependencies:
-    chalk "^2.0.1"
-    jest-diff "^24.9.0"
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
-
-jest-matcher-utils@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.0.1.tgz#12e1fc386fe4f14678f4cc8dbd5ba75a58092911"
-  integrity sha512-PUMlsLth0Azen8Q2WFTwnSkGh2JZ8FYuwijC8NR47vXKpsrKmA1wWvgcj1CquuVfcYiDEdj985u5Wmg7COEARw==
-  dependencies:
-    chalk "^4.0.0"
-    jest-diff "^26.0.1"
-    jest-get-type "^26.0.0"
-    pretty-format "^26.0.1"
-
-jest-message-util@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
-  integrity sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/stack-utils" "^1.0.1"
-    chalk "^2.0.1"
-    micromatch "^3.1.10"
-    slash "^2.0.0"
-    stack-utils "^1.0.1"
-
-jest-message-util@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.0.1.tgz#07af1b42fc450b4cc8e90e4c9cef11b33ce9b0ac"
-  integrity sha512-CbK8uQREZ8umUfo8+zgIfEt+W7HAHjQCoRaNs4WxKGhAYBGwEyvxuK81FXa7VeB9pwDEXeeKOB2qcsNVCAvB7Q==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@jest/types" "^26.0.1"
-    "@types/stack-utils" "^1.0.1"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    micromatch "^4.0.2"
-    slash "^3.0.0"
-    stack-utils "^2.0.2"
-
-jest-mock@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
-  integrity sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==
-  dependencies:
-    "@jest/types" "^24.9.0"
-
-jest-mock@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.0.1.tgz#7fd1517ed4955397cf1620a771dc2d61fad8fd40"
-  integrity sha512-MpYTBqycuPYSY6xKJognV7Ja46/TeRbAZept987Zp+tuJvMN0YBWyyhG9mXyYQaU3SBI0TUlSaO5L3p49agw7Q==
-  dependencies:
-    "@jest/types" "^26.0.1"
-
-jest-pnp-resolver@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
-  integrity sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ==
-
-jest-regex-util@^24.3.0, jest-regex-util@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
-  integrity sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==
-
-jest-regex-util@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
-  integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
-
-jest-resolve-dependencies@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz#ad055198959c4cfba8a4f066c673a3f0786507ab"
-  integrity sha512-Fm7b6AlWnYhT0BXy4hXpactHIqER7erNgIsIozDXWl5dVm+k8XdGVe1oTg1JyaFnOxarMEbax3wyRJqGP2Pq+g==
-  dependencies:
-    "@jest/types" "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-snapshot "^24.9.0"
-
-jest-resolve-dependencies@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-26.0.1.tgz#607ba7ccc32151d185a477cff45bf33bce417f0b"
-  integrity sha512-9d5/RS/ft0vB/qy7jct/qAhzJsr6fRQJyGAFigK3XD4hf9kIbEH5gks4t4Z7kyMRhowU6HWm/o8ILqhaHdSqLw==
-  dependencies:
-    "@jest/types" "^26.0.1"
-    jest-regex-util "^26.0.0"
-    jest-snapshot "^26.0.1"
-
-jest-resolve@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.9.0.tgz#dff04c7687af34c4dd7e524892d9cf77e5d17321"
-  integrity sha512-TaLeLVL1l08YFZAt3zaPtjiVvyy4oSA6CRe+0AFPPVX3Q/VI0giIWWoAvoS5L96vj9Dqxj4fB5p2qrHCmTU/MQ==
-  dependencies:
-    "@jest/types" "^24.9.0"
-    browser-resolve "^1.11.3"
-    chalk "^2.0.1"
-    jest-pnp-resolver "^1.2.1"
-    realpath-native "^1.1.0"
-
-jest-resolve@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.0.1.tgz#21d1ee06f9ea270a343a8893051aeed940cde736"
-  integrity sha512-6jWxk0IKZkPIVTvq6s72RH735P8f9eCJW3IM5CX/SJFeKq1p2cZx0U49wf/SdMlhaB/anann5J2nCJj6HrbezQ==
-  dependencies:
-    "@jest/types" "^26.0.1"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    jest-pnp-resolver "^1.2.1"
-    jest-util "^26.0.1"
-    read-pkg-up "^7.0.1"
-    resolve "^1.17.0"
-    slash "^3.0.0"
-
-jest-runner@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.9.0.tgz#574fafdbd54455c2b34b4bdf4365a23857fcdf42"
-  integrity sha512-KksJQyI3/0mhcfspnxxEOBueGrd5E4vV7ADQLT9ESaCzz02WnbdbKWIf5Mkaucoaj7obQckYPVX6JJhgUcoWWg==
-  dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.4.2"
-    exit "^0.1.2"
-    graceful-fs "^4.1.15"
-    jest-config "^24.9.0"
-    jest-docblock "^24.3.0"
-    jest-haste-map "^24.9.0"
-    jest-jasmine2 "^24.9.0"
-    jest-leak-detector "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-resolve "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.6.0"
-    source-map-support "^0.5.6"
-    throat "^4.0.0"
-
-jest-runner@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-26.0.1.tgz#ea03584b7ae4bacfb7e533d680a575a49ae35d50"
-  integrity sha512-CApm0g81b49Znm4cZekYQK67zY7kkB4umOlI2Dx5CwKAzdgw75EN+ozBHRvxBzwo1ZLYZ07TFxkaPm+1t4d8jA==
-  dependencies:
-    "@jest/console" "^26.0.1"
-    "@jest/environment" "^26.0.1"
-    "@jest/test-result" "^26.0.1"
-    "@jest/types" "^26.0.1"
-    chalk "^4.0.0"
-    exit "^0.1.2"
-    graceful-fs "^4.2.4"
-    jest-config "^26.0.1"
-    jest-docblock "^26.0.0"
-    jest-haste-map "^26.0.1"
-    jest-jasmine2 "^26.0.1"
-    jest-leak-detector "^26.0.1"
-    jest-message-util "^26.0.1"
-    jest-resolve "^26.0.1"
-    jest-runtime "^26.0.1"
-    jest-util "^26.0.1"
-    jest-worker "^26.0.0"
-    source-map-support "^0.5.6"
-    throat "^5.0.0"
-
-jest-runtime@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.9.0.tgz#9f14583af6a4f7314a6a9d9f0226e1a781c8e4ac"
-  integrity sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==
-  dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/environment" "^24.9.0"
-    "@jest/source-map" "^24.3.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/yargs" "^13.0.0"
-    chalk "^2.0.1"
-    exit "^0.1.2"
-    glob "^7.1.3"
-    graceful-fs "^4.1.15"
-    jest-config "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    realpath-native "^1.1.0"
-    slash "^2.0.0"
-    strip-bom "^3.0.0"
-    yargs "^13.3.0"
-
-jest-runtime@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-26.0.1.tgz#a121a6321235987d294168e282d52b364d7d3f89"
-  integrity sha512-Ci2QhYFmANg5qaXWf78T2Pfo6GtmIBn2rRaLnklRyEucmPccmCKvS9JPljcmtVamsdMmkyNkVFb9pBTD6si9Lw==
-  dependencies:
-    "@jest/console" "^26.0.1"
-    "@jest/environment" "^26.0.1"
-    "@jest/fake-timers" "^26.0.1"
-    "@jest/globals" "^26.0.1"
-    "@jest/source-map" "^26.0.0"
-    "@jest/test-result" "^26.0.1"
-    "@jest/transform" "^26.0.1"
-    "@jest/types" "^26.0.1"
-    "@types/yargs" "^15.0.0"
-    chalk "^4.0.0"
-    collect-v8-coverage "^1.0.0"
-    exit "^0.1.2"
-    glob "^7.1.3"
-    graceful-fs "^4.2.4"
-    jest-config "^26.0.1"
-    jest-haste-map "^26.0.1"
-    jest-message-util "^26.0.1"
-    jest-mock "^26.0.1"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.0.1"
-    jest-snapshot "^26.0.1"
-    jest-util "^26.0.1"
-    jest-validate "^26.0.1"
-    slash "^3.0.0"
-    strip-bom "^4.0.0"
-    yargs "^15.3.1"
-
-jest-serializer@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
-  integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
-
-jest-serializer@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.0.0.tgz#f6c521ddb976943b93e662c0d4d79245abec72a3"
-  integrity sha512-sQGXLdEGWFAE4wIJ2ZaIDb+ikETlUirEOBsLXdoBbeLhTHkZUJwgk3+M8eyFizhM6le43PDCCKPA1hzkSDo4cQ==
-  dependencies:
-    graceful-fs "^4.2.4"
-
-jest-silent-reporter@0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/jest-silent-reporter/-/jest-silent-reporter-0.2.1.tgz#554dd62b800989cdbcfba22bf30a1c0db6ad289c"
-  integrity sha512-nEO3oOFHtEXFjlRCbJOlvEWA7ZHyyyvMsU4WHuAhinYBOI4PiX1EIbsZfQZ/cxHcYliHBU9zY8bPxMPdBGksYw==
-  dependencies:
-    chalk "^2.3.1"
-    jest-util "^24.0.0"
-
-jest-snapshot@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba"
-  integrity sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==
-  dependencies:
-    "@babel/types" "^7.0.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
-    expect "^24.9.0"
-    jest-diff "^24.9.0"
-    jest-get-type "^24.9.0"
-    jest-matcher-utils "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-resolve "^24.9.0"
-    mkdirp "^0.5.1"
-    natural-compare "^1.4.0"
-    pretty-format "^24.9.0"
-    semver "^6.2.0"
-
-jest-snapshot@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-26.0.1.tgz#1baa942bd83d47b837a84af7fcf5fd4a236da399"
-  integrity sha512-jxd+cF7+LL+a80qh6TAnTLUZHyQoWwEHSUFJjkw35u3Gx+BZUNuXhYvDqHXr62UQPnWo2P6fvQlLjsU93UKyxA==
-  dependencies:
-    "@babel/types" "^7.0.0"
-    "@jest/types" "^26.0.1"
-    "@types/prettier" "^2.0.0"
-    chalk "^4.0.0"
-    expect "^26.0.1"
-    graceful-fs "^4.2.4"
-    jest-diff "^26.0.1"
-    jest-get-type "^26.0.0"
-    jest-matcher-utils "^26.0.1"
-    jest-message-util "^26.0.1"
-    jest-resolve "^26.0.1"
-    make-dir "^3.0.0"
-    natural-compare "^1.4.0"
-    pretty-format "^26.0.1"
-    semver "^7.3.2"
-
-jest-util@^24.0.0, jest-util@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
-  integrity sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==
-  dependencies:
-    "@jest/console" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/source-map" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    callsites "^3.0.0"
-    chalk "^2.0.1"
-    graceful-fs "^4.1.15"
-    is-ci "^2.0.0"
-    mkdirp "^0.5.1"
-    slash "^2.0.0"
-    source-map "^0.6.0"
-
-jest-util@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.0.1.tgz#72c4c51177b695fdd795ca072a6f94e3d7cef00a"
-  integrity sha512-byQ3n7ad1BO/WyFkYvlWQHTsomB6GIewBh8tlGtusiylAlaxQ1UpS0XYH0ngOyhZuHVLN79Qvl6/pMiDMSSG1g==
-  dependencies:
-    "@jest/types" "^26.0.1"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    is-ci "^2.0.0"
-    make-dir "^3.0.0"
-
-jest-validate@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab"
-  integrity sha512-HPIt6C5ACwiqSiwi+OfSSHbK8sG7akG8eATl+IPKaeIjtPOeBUd/g3J7DghugzxrGjI93qS/+RPKe1H6PqvhRQ==
-  dependencies:
-    "@jest/types" "^24.9.0"
-    camelcase "^5.3.1"
-    chalk "^2.0.1"
-    jest-get-type "^24.9.0"
-    leven "^3.1.0"
-    pretty-format "^24.9.0"
-
-jest-validate@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-26.0.1.tgz#a62987e1da5b7f724130f904725e22f4e5b2e23c"
-  integrity sha512-u0xRc+rbmov/VqXnX3DlkxD74rHI/CfS5xaV2VpeaVySjbb1JioNVOyly5b56q2l9ZKe7bVG5qWmjfctkQb0bA==
-  dependencies:
-    "@jest/types" "^26.0.1"
-    camelcase "^6.0.0"
-    chalk "^4.0.0"
-    jest-get-type "^26.0.0"
-    leven "^3.1.0"
-    pretty-format "^26.0.1"
-
-jest-watcher@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.9.0.tgz#4b56e5d1ceff005f5b88e528dc9afc8dd4ed2b3b"
-  integrity sha512-+/fLOfKPXXYJDYlks62/4R4GoT+GU1tYZed99JSCOsmzkkF7727RqKrjNAxtfO4YpGv11wybgRvCjR73lK2GZw==
-  dependencies:
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/yargs" "^13.0.0"
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.1"
-    jest-util "^24.9.0"
-    string-length "^2.0.0"
-
-jest-watcher@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-26.0.1.tgz#5b5e3ebbdf10c240e22a98af66d645631afda770"
-  integrity sha512-pdZPydsS8475f89kGswaNsN3rhP6lnC3/QDCppP7bg1L9JQz7oU9Mb/5xPETk1RHDCWeqmVC47M4K5RR7ejxFw==
-  dependencies:
-    "@jest/test-result" "^26.0.1"
-    "@jest/types" "^26.0.1"
-    ansi-escapes "^4.2.1"
-    chalk "^4.0.0"
-    jest-util "^26.0.1"
-    string-length "^4.0.1"
-
-jest-worker@^24.6.0, jest-worker@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
-  integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
-  dependencies:
-    merge-stream "^2.0.0"
-    supports-color "^6.1.0"
-
-jest-worker@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.0.0.tgz#4920c7714f0a96c6412464718d0c58a3df3fb066"
-  integrity sha512-pPaYa2+JnwmiZjK9x7p9BoZht+47ecFCDFA/CJxspHzeDvQcfVBLWzCiWyo+EGrSiQMWZtCFo9iSvMZnAAo8vw==
-  dependencies:
-    merge-stream "^2.0.0"
-    supports-color "^7.0.0"
-
-jest@^24.8.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-24.9.0.tgz#987d290c05a08b52c56188c1002e368edb007171"
-  integrity sha512-YvkBL1Zm7d2B1+h5fHEOdyjCG+sGMz4f8D86/0HiqJ6MB4MnDc8FgP5vdWsGnemOQro7lnYo8UakZ3+5A0jxGw==
-  dependencies:
-    import-local "^2.0.0"
-    jest-cli "^24.9.0"
-
-jison-lex@0.3.x:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/jison-lex/-/jison-lex-0.3.4.tgz#81ca28d84f84499dfa8c594dcde3d8a3f26ec7a5"
-  integrity sha1-gcoo2E+ESZ36jFlNzePYo/Jux6U=
-  dependencies:
-    lex-parser "0.1.x"
-    nomnom "1.5.2"
-
-jison@0.4.18:
-  version "0.4.18"
-  resolved "https://registry.yarnpkg.com/jison/-/jison-0.4.18.tgz#c68a6a54bfe7028fa40bcfc6cc8bbd9ed291f502"
-  integrity sha512-FKkCiJvozgC7VTHhMJ00a0/IApSxhlGsFIshLW6trWJ8ONX2TQJBBz6DlcO1Gffy4w9LT+uL+PA+CVnUSJMF7w==
-  dependencies:
-    JSONSelect "0.4.0"
-    cjson "0.3.0"
-    ebnf-parser "0.1.10"
-    escodegen "1.3.x"
-    esprima "1.1.x"
-    jison-lex "0.3.x"
-    lex-parser "~0.1.3"
-    nomnom "1.5.2"
-
-jmespath@0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217"
-  integrity sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=
-
-js-string-escape@^1.0.0, js-string-escape@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
-  integrity sha1-4mJbrbwNZ8dTPp7cEGjFh65BN+8=
-
-"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
-  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
-
-js-tokens@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
-  integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
-
-js-yaml@3.13.1, js-yaml@3.x, js-yaml@^3.10.0, js-yaml@^3.13.1, js-yaml@^3.4.2:
-  version "3.13.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
-  integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
-js-yaml@3.14.0:
-  version "3.14.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
-  integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
-jsbn@~0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
-  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
-
-jsdoctypeparser@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jsdoctypeparser/-/jsdoctypeparser-6.1.0.tgz#acfb936c26300d98f1405cb03e20b06748e512a8"
-  integrity sha512-UCQBZ3xCUBv/PLfwKAJhp6jmGOSLFNKzrotXGNgbKhWvz27wPsCsVeP7gIcHPElQw2agBmynAitXqhxR58XAmA==
-
-jsdom@16.2.2, jsdom@^16.2.2:
-  version "16.2.2"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.2.2.tgz#76f2f7541646beb46a938f5dc476b88705bedf2b"
-  integrity sha512-pDFQbcYtKBHxRaP55zGXCJWgFHkDAYbKcsXEK/3Icu9nKYZkutUXfLBwbD+09XDutkYSHcgfQLZ0qvpAAm9mvg==
-  dependencies:
-    abab "^2.0.3"
-    acorn "^7.1.1"
-    acorn-globals "^6.0.0"
-    cssom "^0.4.4"
-    cssstyle "^2.2.0"
-    data-urls "^2.0.0"
-    decimal.js "^10.2.0"
-    domexception "^2.0.1"
-    escodegen "^1.14.1"
-    html-encoding-sniffer "^2.0.1"
-    is-potential-custom-element-name "^1.0.0"
-    nwsapi "^2.2.0"
-    parse5 "5.1.1"
-    request "^2.88.2"
-    request-promise-native "^1.0.8"
-    saxes "^5.0.0"
-    symbol-tree "^3.2.4"
-    tough-cookie "^3.0.1"
-    w3c-hr-time "^1.0.2"
-    w3c-xmlserializer "^2.0.0"
-    webidl-conversions "^6.0.0"
-    whatwg-encoding "^1.0.5"
-    whatwg-mimetype "^2.3.0"
-    whatwg-url "^8.0.0"
-    ws "^7.2.3"
-    xml-name-validator "^3.0.0"
-
-jsdom@^11.5.1:
-  version "11.12.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
-  integrity sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==
-  dependencies:
-    abab "^2.0.0"
-    acorn "^5.5.3"
-    acorn-globals "^4.1.0"
-    array-equal "^1.0.0"
-    cssom ">= 0.3.2 < 0.4.0"
-    cssstyle "^1.0.0"
-    data-urls "^1.0.0"
-    domexception "^1.0.1"
-    escodegen "^1.9.1"
-    html-encoding-sniffer "^1.0.2"
-    left-pad "^1.3.0"
-    nwsapi "^2.0.7"
-    parse5 "4.0.0"
-    pn "^1.1.0"
-    request "^2.87.0"
-    request-promise-native "^1.0.5"
-    sax "^1.2.4"
-    symbol-tree "^3.2.2"
-    tough-cookie "^2.3.4"
-    w3c-hr-time "^1.0.1"
-    webidl-conversions "^4.0.2"
-    whatwg-encoding "^1.0.3"
-    whatwg-mimetype "^2.1.0"
-    whatwg-url "^6.4.1"
-    ws "^5.2.0"
-    xml-name-validator "^3.0.0"
-
-jsesc@^2.5.1:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
-  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
-
-jsesc@~0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
-  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
-
-json-buffer@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898"
-  integrity sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=
-
-json-dup-key-validator@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-dup-key-validator/-/json-dup-key-validator-1.0.2.tgz#4e5e1c32c93ede16a8424d28162e5e183b5d8ee5"
-  integrity sha1-Tl4cMsk+3haoQk0oFi5eGDtdjuU=
-  dependencies:
-    backslash "^0.2.0"
-
-json-parse-better-errors@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
-  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
-
-json-schema-traverse@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
-  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
-
-json-schema@0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
-  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
-
-json-stable-stringify-without-jsonify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
-  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
-
-json-stable-stringify@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
-  integrity sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=
-  dependencies:
-    jsonify "~0.0.0"
-
-json-stable-stringify@~0.0.0:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-0.0.1.tgz#611c23e814db375527df851193db59dd2af27f45"
-  integrity sha1-YRwj6BTbN1Un34URk9tZ3Sryf0U=
-  dependencies:
-    jsonify "~0.0.0"
-
-json-stringify-pretty-compact@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz#e77c419f52ff00c45a31f07f4c820c2433143885"
-  integrity sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ==
-
-json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
-  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
-
-json5@2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
-  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
-  dependencies:
-    minimist "^1.2.5"
-
-json5@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6"
-  integrity sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==
-  dependencies:
-    minimist "^1.2.0"
-
-json5@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.2.tgz#43ef1f0af9835dd624751a6b7fa48874fb2d608e"
-  integrity sha512-MoUOQ4WdiN3yxhm7NEVJSJrieAo5hNSLQ5sj05OTRHPL9HOBy8u4Bu88jsC1jvqAdN+E1bJmsUcZH+1HQxliqQ==
-  dependencies:
-    minimist "^1.2.5"
-
-jsonfile@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
-  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-jsonfile@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.0.1.tgz#98966cba214378c8c84b82e085907b40bf614179"
-  integrity sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==
-  dependencies:
-    universalify "^1.0.0"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-jsonify@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
-  integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
-
-jsonlint@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/jsonlint/-/jsonlint-1.6.0.tgz#88aa46bc289a7ac93bb46cae2d58a187a9bb494a"
-  integrity sha1-iKpGvCiaesk7tGyuLVihh6m7SUo=
-  dependencies:
-    JSV ">= 4.0.x"
-    nomnom ">= 1.5.x"
-
-jsonlint@1.6.3:
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/jsonlint/-/jsonlint-1.6.3.tgz#cb5e31efc0b78291d0d862fbef05900adf212988"
-  integrity sha512-jMVTMzP+7gU/IyC6hvKyWpUU8tmTkK5b3BPNuMI9U8Sit+YAWLlZwB6Y6YrdCxfg2kNz05p3XY3Bmm4m26Nv3A==
-  dependencies:
-    JSV "^4.0.x"
-    nomnom "^1.5.x"
-
-jsonminify@~0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/jsonminify/-/jsonminify-0.2.3.tgz#4b842c8a3fe5d6aa48b2f8f95a1cf9a80c019d8e"
-  integrity sha1-S4Qsij/l1qpIsvj5Whz5qAwBnY4=
-
-jsonparse@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
-  integrity sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=
-
-jsprim@^1.2.2:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
-  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
-  dependencies:
-    assert-plus "1.0.0"
-    extsprintf "1.3.0"
-    json-schema "0.2.3"
-    verror "1.10.0"
-
-jsx-ast-utils@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz#8a9364e402448a3ce7f14d357738310d9248054f"
-  integrity sha512-EdIHFMm+1BPynpKOpdPqiOsvnIrInRGJD7bzPZdPkjitQEqpdpUuFpq4T0npZFKTiB3RhWFdGN+oqOJIdhDhQA==
-  dependencies:
-    array-includes "^3.0.3"
-    object.assign "^4.1.0"
-
-jszip@^3.1.5:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.2.2.tgz#b143816df7e106a9597a94c77493385adca5bd1d"
-  integrity sha512-NmKajvAFQpbg3taXQXr/ccS2wcucR1AZ+NtyWp2Nq7HHVsXhcJFR8p0Baf32C2yVvBylFWVeKf+WI2AnvlPhpA==
-  dependencies:
-    lie "~3.3.0"
-    pako "~1.0.2"
-    readable-stream "~2.3.6"
-    set-immediate-shim "~1.0.1"
-
-just-debounce@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/just-debounce/-/just-debounce-1.0.0.tgz#87fccfaeffc0b68cd19d55f6722943f929ea35ea"
-  integrity sha1-h/zPrv/AtozRnVX2cilD+SnqNeo=
-
-just-extend@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-4.0.2.tgz#f3f47f7dfca0f989c55410a7ebc8854b07108afc"
-  integrity sha512-FrLwOgm+iXrPV+5zDU6Jqu4gCRXbWEQg2O3SKONsWE4w7AXFRkryS53bpWdaL9cNol+AmR3AEYz6kn+o0fCPnw==
-
-karma-browserify@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/karma-browserify/-/karma-browserify-7.0.0.tgz#60f443f991ecfbbfb5737a9fd76e73b8b6eb9a57"
-  integrity sha512-SLgh1dmF2eZEj3glrmTD2CMJRGZwEiKA6k2hBr2+2JDC4JMU1dlsvBKpV66Lvi/tbj3H9qA+Vl/FdIcfPRrJpA==
-  dependencies:
-    convert-source-map "^1.1.3"
-    hat "^0.0.3"
-    js-string-escape "^1.0.0"
-    lodash "^4.17.14"
-    minimatch "^3.0.0"
-    os-shim "^0.1.3"
-
-karma-chai@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/karma-chai/-/karma-chai-0.1.0.tgz#bee5ad40400517811ae34bb945f762909108b79a"
-  integrity sha1-vuWtQEAFF4Ea40u5RfdikJEIt5o=
-
-karma-chrome-launcher@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-3.1.0.tgz#805a586799a4d05f4e54f72a204979f3f3066738"
-  integrity sha512-3dPs/n7vgz1rxxtynpzZTvb9y/GIaW8xjAwcIGttLbycqoFtI7yo1NGnQi6oFTherRE+GIhCAHZC4vEqWGhNvg==
-  dependencies:
-    which "^1.2.1"
-
-karma-coverage-istanbul-reporter@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-3.0.3.tgz#f3b5303553aadc8e681d40d360dfdc19bc7e9fe9"
-  integrity sha512-wE4VFhG/QZv2Y4CdAYWDbMmcAHeS926ZIji4z+FkB2aF/EposRb6DP6G5ncT/wXhqUfAb/d7kZrNKPonbvsATw==
-  dependencies:
-    istanbul-lib-coverage "^3.0.0"
-    istanbul-lib-report "^3.0.0"
-    istanbul-lib-source-maps "^3.0.6"
-    istanbul-reports "^3.0.2"
-    minimatch "^3.0.4"
-
-karma-edge-launcher@0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/karma-edge-launcher/-/karma-edge-launcher-0.4.2.tgz#3d9529b09b13c909c5f3ceee12d00e7f9a989b3d"
-  integrity sha512-YAJZb1fmRcxNhMIWYsjLuxwODBjh2cSHgTW/jkVmdpGguJjLbs9ZgIK/tEJsMQcBLUkO+yO4LBbqYxqgGW2HIw==
-  dependencies:
-    edge-launcher "1.2.2"
-
-karma-firefox-launcher@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/karma-firefox-launcher/-/karma-firefox-launcher-1.3.0.tgz#ebcbb1d1ddfada6be900eb8fae25bcf2dcdc8171"
-  integrity sha512-Fi7xPhwrRgr+94BnHX0F5dCl1miIW4RHnzjIGxF8GaIEp7rNqX7LSi7ok63VXs3PS/5MQaQMhGxw+bvD+pibBQ==
-  dependencies:
-    is-wsl "^2.1.0"
-
-karma-fixture@0.2.6:
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/karma-fixture/-/karma-fixture-0.2.6.tgz#971cea8c216d73f07043964cb73f10e0830018ef"
-  integrity sha1-lxzqjCFtc/BwQ5ZMtz8Q4IMAGO8=
-
-karma-html2js-preprocessor@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/karma-html2js-preprocessor/-/karma-html2js-preprocessor-1.1.0.tgz#fc09edf04bbe2bb6eee9ba1968f826b7388020bd"
-  integrity sha1-/Ant8Eu+K7bu6boZaPgmtziAIL0=
-
-karma-ie-launcher@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/karma-ie-launcher/-/karma-ie-launcher-1.0.0.tgz#497986842c490190346cd89f5494ca9830c6d59c"
-  integrity sha1-SXmGhCxJAZA0bNifVJTKmDDG1Zw=
-  dependencies:
-    lodash "^4.6.1"
-
-karma-mocha-reporter@2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/karma-mocha-reporter/-/karma-mocha-reporter-2.2.5.tgz#15120095e8ed819186e47a0b012f3cd741895560"
-  integrity sha1-FRIAlejtgZGG5HoLAS8810GJVWA=
-  dependencies:
-    chalk "^2.1.0"
-    log-symbols "^2.1.0"
-    strip-ansi "^4.0.0"
-
-karma-mocha@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/karma-mocha/-/karma-mocha-2.0.1.tgz#4b0254a18dfee71bdbe6188d9a6861bf86b0cd7d"
-  integrity sha512-Tzd5HBjm8his2OA4bouAsATYEpZrp9vC7z5E5j4C5Of5Rrs1jY67RAwXNcVmd/Bnk1wgvQRou0zGVLey44G4tQ==
-  dependencies:
-    minimist "^1.2.3"
-
-karma-safari-launcher@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/karma-safari-launcher/-/karma-safari-launcher-1.0.0.tgz#96982a2cc47d066aae71c553babb28319115a2ce"
-  integrity sha1-lpgqLMR9BmquccVTursoMZEVos4=
-
-karma-sauce-launcher@2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/karma-sauce-launcher/-/karma-sauce-launcher-2.0.2.tgz#dbf98e70d86bf287b03a537cf637eb7aefa975c3"
-  integrity sha512-jLUFaJhHMcKpxFWUesyWYihzM5FvQiJsDwGcCtKeOy2lsWhkVw0V0Byqb1d+wU6myU1mribBtsIcub23HS4kWA==
-  dependencies:
-    sauce-connect-launcher "^1.2.4"
-    saucelabs "^1.5.0"
-    selenium-webdriver "^4.0.0-alpha.1"
-
-karma-simple-reporter@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/karma-simple-reporter/-/karma-simple-reporter-2.0.0.tgz#9530f571dc46e79d149a1df3b0cdde14503b5152"
-  integrity sha1-lTD1cdxG550Umh3zsM3eFFA7UVI=
-  dependencies:
-    colors "^0.6.2"
-    karma "^0.12.36"
-
-karma-sinon-chai@2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/karma-sinon-chai/-/karma-sinon-chai-2.0.2.tgz#e28c109b989973abafc28a7c9f09ef24a05e07c2"
-  integrity sha512-SDgh6V0CUd+7ruL1d3yG6lFzmJNGRNQuEuCYXLaorruNP9nwQfA7hpsp4clx4CbOo5Gsajh3qUOT7CrVStUKMw==
-
-karma-source-map-support@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/karma-source-map-support/-/karma-source-map-support-1.4.0.tgz#58526ceccf7e8730e56effd97a4de8d712ac0d6b"
-  integrity sha512-RsBECncGO17KAoJCYXjv+ckIz+Ii9NCi+9enk+rq6XC81ezYkb4/RHE6CTXdA7IOJqoF3wcaLfVG0CPmE5ca6A==
-  dependencies:
-    source-map-support "^0.5.5"
-
-karma-super-dots-reporter@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/karma-super-dots-reporter/-/karma-super-dots-reporter-0.2.0.tgz#71c3ac8ee0b7353ef2234fe43815f740d254544a"
-  integrity sha512-JNzEV7vqIa3GrKcES+kBKYarFCtY/IraYBhUfsTIy0QWn4JzmV8x0jCED9PLqEfJVYrNC0hPBAH13wnlKkPGTQ==
-  dependencies:
-    chalk "^0.5.1"
-    log-symbols "^1.0.1"
-
-karma@5.0.9:
-  version "5.0.9"
-  resolved "https://registry.yarnpkg.com/karma/-/karma-5.0.9.tgz#11a119b0c763a806fdc471b40c594a2240b5ca13"
-  integrity sha512-dUA5z7Lo7G4FRSe1ZAXqOINEEWxmCjDBbfRBmU/wYlSMwxUQJP/tEEP90yJt3Uqo03s9rCgVnxtlfq+uDhxSPg==
-  dependencies:
-    body-parser "^1.19.0"
-    braces "^3.0.2"
-    chokidar "^3.0.0"
-    colors "^1.4.0"
-    connect "^3.7.0"
-    di "^0.0.1"
-    dom-serialize "^2.2.1"
-    flatted "^2.0.2"
-    glob "^7.1.6"
-    graceful-fs "^4.2.4"
-    http-proxy "^1.18.1"
-    isbinaryfile "^4.0.6"
-    lodash "^4.17.15"
-    log4js "^6.2.1"
-    mime "^2.4.5"
-    minimatch "^3.0.4"
-    qjobs "^1.2.0"
-    range-parser "^1.2.1"
-    rimraf "^3.0.2"
-    socket.io "^2.3.0"
-    source-map "^0.6.1"
-    tmp "0.2.1"
-    ua-parser-js "0.7.21"
-    yargs "^15.3.1"
-
-karma@^0.12.36:
-  version "0.12.37"
-  resolved "https://registry.yarnpkg.com/karma/-/karma-0.12.37.tgz#1a9f7fdeccd69de2e835e04edbac2ecd3fa645e4"
-  integrity sha1-Gp9/3szWneLoNeBO26wuzT+mReQ=
-  dependencies:
-    chokidar "^1.0.1"
-    colors "^1.1.0"
-    connect "^2.29.2"
-    di "^0.0.1"
-    glob "^5.0.6"
-    graceful-fs "^3.0.6"
-    http-proxy "^0.10"
-    lodash "^3.8.0"
-    log4js "^0.6.25"
-    mime "^1.3.4"
-    minimatch "^2.0.7"
-    optimist "^0.6.1"
-    q "^1.4.1"
-    rimraf "^2.3.3"
-    socket.io "0.9.16"
-    source-map "^0.4.2"
-    useragent "^2.1.6"
-
-keyv@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
-  integrity sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==
-  dependencies:
-    json-buffer "3.0.0"
-
-kind-of@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44"
-  integrity sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=
-
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
-  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
-  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^5.0.0, kind-of@^5.0.2:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
-  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
-
-kind-of@^6.0.0, kind-of@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
-  integrity sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==
-
-kind-of@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
-  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
-
-kleur@3.0.3, kleur@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
-  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
-
-labeled-stream-splicer@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/labeled-stream-splicer/-/labeled-stream-splicer-2.0.2.tgz#42a41a16abcd46fd046306cf4f2c3576fffb1c21"
-  integrity sha512-Ca4LSXFFZUjPScRaqOcFxneA0VpKZr4MMYCljyQr4LIewTLb3Y0IUTIsnBBsVubIeEfxeSZpSjSsRM8APEQaAw==
-  dependencies:
-    inherits "^2.0.1"
-    stream-splicer "^2.0.0"
-
-last-run@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/last-run/-/last-run-1.1.1.tgz#45b96942c17b1c79c772198259ba943bebf8ca5b"
-  integrity sha1-RblpQsF7HHnHchmCWbqUO+v4yls=
-  dependencies:
-    default-resolution "^2.0.0"
-    es6-weak-map "^2.0.1"
-
-later@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/later/-/later-1.2.0.tgz#f2cf6c4dd7956dd2f520adf0329836e9876bad0f"
-  integrity sha1-8s9sTdeVbdL1IK3wMpg26YdrrQ8=
-
-latest-version@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
-  integrity sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==
-  dependencies:
-    package-json "^6.3.0"
-
-lazypipe@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/lazypipe/-/lazypipe-1.0.2.tgz#b66f64ed7fd8b04869f1f1bcb795dbbaa80e418c"
-  integrity sha512-CrU+NYdFHW8ElaeXCWz5IbmetiYVYq1fOCmpdAeZ8L+khbv1e7EnshyjlKqkO+pJbVPrsJQnHbVxEiLujG6qhQ==
-  dependencies:
-    stream-combiner "*"
-
-lazystream@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-1.0.0.tgz#f6995fe0f820392f61396be89462407bb77168e4"
-  integrity sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=
-  dependencies:
-    readable-stream "^2.0.5"
-
-lcid@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
-  integrity sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=
-  dependencies:
-    invert-kv "^1.0.0"
-
-lead@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/lead/-/lead-1.0.0.tgz#6f14f99a37be3a9dd784f5495690e5903466ee42"
-  integrity sha1-bxT5mje+Op3XhPVJVpDlkDRm7kI=
-  dependencies:
-    flush-write-stream "^1.0.2"
-
-left-pad@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
-  integrity sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==
-
-leven@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
-  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
-
-levenary@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
-  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
-  dependencies:
-    leven "^3.1.0"
-
-levn@^0.3.0, levn@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
-  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
-  dependencies:
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-
-levn@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
-  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
-  dependencies:
-    prelude-ls "^1.2.1"
-    type-check "~0.4.0"
-
-lex-parser@0.1.x, lex-parser@~0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/lex-parser/-/lex-parser-0.1.4.tgz#64c4f025f17fd53bfb45763faeb16f015a747550"
-  integrity sha1-ZMTwJfF/1Tv7RXY/rrFvAVp0dVA=
-
-lie@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
-  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
-  dependencies:
-    immediate "~3.0.5"
-
-liftoff@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/liftoff/-/liftoff-3.1.0.tgz#c9ba6081f908670607ee79062d700df062c52ed3"
-  integrity sha512-DlIPlJUkCV0Ips2zf2pJP0unEoT1kwYhiiPUGF3s/jtxTCjziNLoiVVh+jqWOWeFi6mmwQ5fNxvAUyPad4Dfog==
-  dependencies:
-    extend "^3.0.0"
-    findup-sync "^3.0.0"
-    fined "^1.0.1"
-    flagged-respawn "^1.0.0"
-    is-plain-object "^2.0.4"
-    object.map "^1.0.0"
-    rechoir "^0.6.2"
-    resolve "^1.1.7"
-
-lines-and-columns@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
-  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
-
-link-check@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/link-check/-/link-check-4.5.0.tgz#d0755fb50a86f889c19544acde40a306171c306d"
-  integrity sha512-7PWHakA/+O5uaZ9yD290fiG2PUK9weoHAMgtoH3VPllL8ukYHe1YEbwgK9jjnUSE7Xa3zgT41mg+7TnZAPLxkQ==
-  dependencies:
-    is-relative-url "^3.0.0"
-    isemail "^3.2.0"
-    ms "^2.1.2"
-    request "^2.88.2"
-
-linkify-it@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
-  integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
-  dependencies:
-    uc.micro "^1.0.1"
-
-linkify-markdown@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/linkify-markdown/-/linkify-markdown-1.0.0.tgz#127c0b0df8ae11f3e095cd77e06c37a3027761c5"
-  integrity sha512-Je1EExVw56B9PJuxhuIgAA6NKugHo1P7MHbwIsiw0O0GddNLBqCDUzpCX6JKGw52tK6Udoud6S+97WhUn9H+Gw==
-  dependencies:
-    chalk "^2.3.1"
-    file-type "^7.6.0"
-    meow "^4.0.0"
-    mime-types "^2.1.18"
-    read-chunk "^2.1.0"
-    remark "^9.0.0"
-    remark-github "^7.0.3"
-    to-vfile "^2.2.0"
-
-list-imports-exports@0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/list-imports-exports/-/list-imports-exports-0.1.2.tgz#04e9ede8ede6c60788ed5921c07f647c5d71c985"
-  integrity sha512-2P6aZ0Ew8bWTT+JNTeylwyOAPavKnS1SagrXGegou5qrWkLMRgxGy5VweSbo5386MpYt647I0GWM8y8+etTTBw==
-  dependencies:
-    "@babel/parser" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@babel/types" "^7.0.0"
-
-livereload-js@^2.3.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/livereload-js/-/livereload-js-2.4.0.tgz#447c31cf1ea9ab52fc20db615c5ddf678f78009c"
-  integrity sha512-XPQH8Z2GDP/Hwz2PCDrh2mth4yFejwA1OZ/81Ti3LgKyhDcEjsSsqFWZojHG0va/duGd+WyosY7eXLDoOyqcPw==
-
-load-json-file@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
-  integrity sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^2.2.0"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-    strip-bom "^2.0.0"
-
-load-json-file@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
-  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^4.0.0"
-    pify "^3.0.0"
-    strip-bom "^3.0.0"
-
-load-json-file@^5.2.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-5.3.0.tgz#4d3c1e01fa1c03ea78a60ac7af932c9ce53403f3"
-  integrity sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==
-  dependencies:
-    graceful-fs "^4.1.15"
-    parse-json "^4.0.0"
-    pify "^4.0.1"
-    strip-bom "^3.0.0"
-    type-fest "^0.3.0"
-
-locate-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
-  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
-  dependencies:
-    p-locate "^2.0.0"
-    path-exists "^3.0.0"
-
-locate-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
-  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
-  dependencies:
-    p-locate "^3.0.0"
-    path-exists "^3.0.0"
-
-locate-path@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
-  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
-  dependencies:
-    p-locate "^4.1.0"
-
-lodash._escapehtmlchar@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash._escapehtmlchar/-/lodash._escapehtmlchar-2.4.1.tgz#df67c3bb6b7e8e1e831ab48bfa0795b92afe899d"
-  integrity sha1-32fDu2t+jh6DGrSL+geVuSr+iZ0=
-  dependencies:
-    lodash._htmlescapes "~2.4.1"
-
-lodash._escapestringchar@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash._escapestringchar/-/lodash._escapestringchar-2.4.1.tgz#ecfe22618a2ade50bfeea43937e51df66f0edb72"
-  integrity sha1-7P4iYYoq3lC/7qQ5N+Ud9m8O23I=
-
-lodash._htmlescapes@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash._htmlescapes/-/lodash._htmlescapes-2.4.1.tgz#32d14bf0844b6de6f8b62a051b4f67c228b624cb"
-  integrity sha1-MtFL8IRLbeb4tioFG09nwii2JMs=
-
-lodash._isnative@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash._isnative/-/lodash._isnative-2.4.1.tgz#3ea6404b784a7be836c7b57580e1cdf79b14832c"
-  integrity sha1-PqZAS3hKe+g2x7V1gOHN95sUgyw=
-
-lodash._objecttypes@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz#7c0b7f69d98a1f76529f890b0cdb1b4dfec11c11"
-  integrity sha1-fAt/admKH3ZSn4kLDNsbTf7BHBE=
-
-lodash._reinterpolate@^2.4.1, lodash._reinterpolate@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-2.4.1.tgz#4f1227aa5a8711fc632f5b07a1f4607aab8b3222"
-  integrity sha1-TxInqlqHEfxjL1sHofRgequLMiI=
-
-lodash._reinterpolate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
-  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
-
-lodash._reunescapedhtml@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash._reunescapedhtml/-/lodash._reunescapedhtml-2.4.1.tgz#747c4fc40103eb3bb8a0976e571f7a2659e93ba7"
-  integrity sha1-dHxPxAED6zu4oJduVx96JlnpO6c=
-  dependencies:
-    lodash._htmlescapes "~2.4.1"
-    lodash.keys "~2.4.1"
-
-lodash._shimkeys@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash._shimkeys/-/lodash._shimkeys-2.4.1.tgz#6e9cc9666ff081f0b5a6c978b83e242e6949d203"
-  integrity sha1-bpzJZm/wgfC1psl4uD4kLmlJ0gM=
-  dependencies:
-    lodash._objecttypes "~2.4.1"
-
-lodash.clonedeep@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
-  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
-
-lodash.defaults@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-2.4.1.tgz#a7e8885f05e68851144b6e12a8f3678026bc4c54"
-  integrity sha1-p+iIXwXmiFEUS24SqPNngCa8TFQ=
-  dependencies:
-    lodash._objecttypes "~2.4.1"
-    lodash.keys "~2.4.1"
-
-lodash.escape@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
-  integrity sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=
-
-lodash.escape@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-2.4.1.tgz#2ce12c5e084db0a57dda5e5d1eeeb9f5d175a3b4"
-  integrity sha1-LOEsXghNsKV92l5dHu659dF1o7Q=
-  dependencies:
-    lodash._escapehtmlchar "~2.4.1"
-    lodash._reunescapedhtml "~2.4.1"
-    lodash.keys "~2.4.1"
-
-lodash.flattendeep@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
-  integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=
-
-lodash.get@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
-  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
-
-lodash.isequal@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
-  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
-
-lodash.islength@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.islength/-/lodash.islength-4.0.1.tgz#4e9868d452575d750affd358c979543dc20ed577"
-  integrity sha1-Tpho1FJXXXUK/9NYyXlUPcIO1Xc=
-
-lodash.isobject@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-2.4.1.tgz#5a2e47fe69953f1ee631a7eba1fe64d2d06558f5"
-  integrity sha1-Wi5H/mmVPx7mMafrof5k0tBlWPU=
-  dependencies:
-    lodash._objecttypes "~2.4.1"
-
-lodash.keys@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-2.4.1.tgz#48dea46df8ff7632b10d706b8acb26591e2b3727"
-  integrity sha1-SN6kbfj/djKxDXBrissmWR4rNyc=
-  dependencies:
-    lodash._isnative "~2.4.1"
-    lodash._shimkeys "~2.4.1"
-    lodash.isobject "~2.4.1"
-
-lodash.memoize@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
-  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
-
-lodash.memoize@~3.0.3:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
-  integrity sha1-LcvSwofLwKVcxCMovQxzYVDVPj8=
-
-lodash.merge@^4.6.1:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
-  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
-
-lodash.sortby@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
-  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
-
-lodash.template@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-2.4.1.tgz#9e611007edf629129a974ab3c48b817b3e1cf20d"
-  integrity sha1-nmEQB+32KRKal0qzxIuBez4c8g0=
-  dependencies:
-    lodash._escapestringchar "~2.4.1"
-    lodash._reinterpolate "~2.4.1"
-    lodash.defaults "~2.4.1"
-    lodash.escape "~2.4.1"
-    lodash.keys "~2.4.1"
-    lodash.templatesettings "~2.4.1"
-    lodash.values "~2.4.1"
-
-lodash.template@^4.0.2:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
-  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-    lodash.templatesettings "^4.0.0"
-
-lodash.templatesettings@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
-  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-
-lodash.templatesettings@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-2.4.1.tgz#ea76c75d11eb86d4dbe89a83893bb861929ac699"
-  integrity sha1-6nbHXRHrhtTb6JqDiTu4YZKaxpk=
-  dependencies:
-    lodash._reinterpolate "~2.4.1"
-    lodash.escape "~2.4.1"
-
-lodash.toarray@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
-  integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
-
-lodash.uniq@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
-  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
-
-lodash.values@~2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-2.4.1.tgz#abf514436b3cb705001627978cbcf30b1280eea4"
-  integrity sha1-q/UUQ2s8twUAFieXjLzzCxKA7qQ=
-  dependencies:
-    lodash.keys "~2.4.1"
-
-lodash@4.17.15, lodash@^4.0.0, lodash@^4.1.1, lodash@^4.15.0, lodash@^4.16.6, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.6.1, lodash@~4.17.2:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
-lodash@^3.8.0:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
-  integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=
-
-log-symbols@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
-  integrity sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==
-  dependencies:
-    chalk "^2.4.2"
-
-log-symbols@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
-  integrity sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=
-  dependencies:
-    chalk "^1.0.0"
-
-log-symbols@^2.1.0, log-symbols@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
-  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
-  dependencies:
-    chalk "^2.0.1"
-
-log4js@^0.6.25:
-  version "0.6.38"
-  resolved "https://registry.yarnpkg.com/log4js/-/log4js-0.6.38.tgz#2c494116695d6fb25480943d3fc872e662a522fd"
-  integrity sha1-LElBFmldb7JUgJQ9P8hy5mKlIv0=
-  dependencies:
-    readable-stream "~1.0.2"
-    semver "~4.3.3"
-
-log4js@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/log4js/-/log4js-6.2.1.tgz#fc23a3bf287f40f5b48259958e5e0ed30d558eeb"
-  integrity sha512-7n+Oqxxz7VcQJhIlqhcYZBTpbcQ7XsR0MUIfJkx/n3VUjkAS4iUr+4UJlhxf28RvP9PMGQXbgTUhLApnu0XXgA==
-  dependencies:
-    date-format "^3.0.0"
-    debug "^4.1.1"
-    flatted "^2.0.1"
-    rfdc "^1.1.4"
-    streamroller "^2.2.4"
-
-lolex@5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/lolex/-/lolex-5.1.2.tgz#953694d098ce7c07bc5ed6d0e42bc6c0c6d5a367"
-  integrity sha512-h4hmjAvHTmd+25JSwrtTIuwbKdwg5NzZVRMLn9saij4SZaepCrTCxPr35H/3bjwfMJtN+t3CX8672UIkglz28A==
-  dependencies:
-    "@sinonjs/commons" "^1.7.0"
-
-longest-streak@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
-  integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==
-
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
-  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
-  dependencies:
-    js-tokens "^3.0.0 || ^4.0.0"
-
-loud-rejection@^1.0.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
-  integrity sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=
-  dependencies:
-    currently-unhandled "^0.4.1"
-    signal-exit "^3.0.0"
-
-loud-rejection@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-2.2.0.tgz#4255eb6e9c74045b0edc021fa7397ab655a8517c"
-  integrity sha512-S0FayMXku80toa5sZ6Ro4C+s+EtFDCsyJNG/AzFMfX3AxD5Si4dZsgzm/kKnbOxHl5Cv8jBlno8+3XYIh2pNjQ==
-  dependencies:
-    currently-unhandled "^0.4.1"
-    signal-exit "^3.0.2"
-
-lower-case@^1.1.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
-  integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
-
-lowercase-keys@^1.0.0, lowercase-keys@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
-  integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
-
-lowercase-keys@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
-  integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
-
-lru-cache@4.1.x, lru-cache@^4.0.1:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
-  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
-  dependencies:
-    pseudomap "^1.0.2"
-    yallist "^2.1.2"
-
-lru-cache@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
-  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
-  dependencies:
-    yallist "^3.0.2"
-
-lru-queue@0.1:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3"
-  integrity sha1-Jzi9nw089PhEkMVzbEhpmsYyzaM=
-  dependencies:
-    es5-ext "~0.10.2"
-
-luxon@1.24.1:
-  version "1.24.1"
-  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.24.1.tgz#a8383266131ed4eaed4b5f430f96f3695403a52a"
-  integrity sha512-CgnIMKAWT0ghcuWFfCWBnWGOddM0zu6c4wZAWmD0NN7MZTnro0+833DF6tJep+xlxRPg4KtsYEHYLfTMBQKwYg==
-
-make-dir@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
-  integrity sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==
-  dependencies:
-    pify "^3.0.0"
-
-make-dir@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
-  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
-  dependencies:
-    pify "^4.0.1"
-    semver "^5.6.0"
-
-make-dir@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.0.0.tgz#1b5f39f6b9270ed33f9f054c5c0f84304989f801"
-  integrity sha512-grNJDhb8b1Jm1qeqW5R/O63wUo4UXo2v2HMic6YT9i/HBlF93S8jkMgH7yugvY9ABDShH4VZMn8I+U8+fCNegw==
-  dependencies:
-    semver "^6.0.0"
-
-make-iterator@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/make-iterator/-/make-iterator-1.0.1.tgz#29b33f312aa8f547c4a5e490f56afcec99133ad6"
-  integrity sha512-pxiuXh0iVEq7VM7KMIhs5gxsfxCux2URptUQaXo4iZZJxBAzTPOLE2BumO5dbfVYq/hBJFBR/a1mFDmOx5AGmw==
-  dependencies:
-    kind-of "^6.0.2"
-
-makeerror@1.0.x:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
-  integrity sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=
-  dependencies:
-    tmpl "1.0.x"
-
-map-cache@^0.2.0, map-cache@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
-  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
-
-map-obj@^1.0.0, map-obj@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
-  integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
-
-map-obj@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
-  integrity sha1-plzSkIepJZi4eRJXpSPgISIqwfk=
-
-map-obj@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.1.0.tgz#b91221b542734b9f14256c0132c897c5d7256fd5"
-  integrity sha512-glc9y00wgtwcDmp7GaE/0b0OnxpNJsVf3ael/An6Fe2Q51LLwN1er6sdomLRzz5h0+yMpiYLhWYF5R7HeqVd4g==
-
-map-stream@0.0.7, map-stream@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.0.7.tgz#8a1f07896d82b10926bd3744a2420009f88974a8"
-  integrity sha1-ih8HiW2CsQkmvTdEokIACfiJdKg=
-
-map-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
-  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
-  dependencies:
-    object-visit "^1.0.0"
-
-markdown-escapes@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
-  integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
-
-markdown-it@10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-10.0.0.tgz#abfc64f141b1722d663402044e43927f1f50a8dc"
-  integrity sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==
-  dependencies:
-    argparse "^1.0.7"
-    entities "~2.0.0"
-    linkify-it "^2.0.0"
-    mdurl "^1.0.1"
-    uc.micro "^1.0.5"
-
-markdown-link-check@3.8.1:
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/markdown-link-check/-/markdown-link-check-3.8.1.tgz#526cdf27fdac2c88fc98687bbc0ebb0928452a14"
-  integrity sha512-R6k8ytdJZePDAdb8NT0NvrNvu6n25IwLPIoJ4guHWC5yqyTlnUpRT7j3XE4ioBXwqOhG/LlUcuckD621kZkl4w==
-  dependencies:
-    async "^3.2.0"
-    chalk "^4.0.0"
-    commander "^5.0.0"
-    link-check "^4.5.0"
-    lodash "^4.17.15"
-    markdown-link-extractor "^1.2.3"
-    progress "^2.0.3"
-    request "^2.88.2"
-
-markdown-link-extractor@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/markdown-link-extractor/-/markdown-link-extractor-1.2.3.tgz#926b9b4cf5ea2a0ce1328603fe676c4e602e7679"
-  integrity sha512-BGgBPPNjRpwKzkMxuY5YG2ntPmSL8UMnGiYxRR/9etK3ABLv9SsKHt70PUxv6MaBSC3TnpRsvcIOmnCFWvjcRA==
-  dependencies:
-    marked "^0.8.2"
-
-markdown-table@1.1.3, markdown-table@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60"
-  integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==
-
-marked@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.2.tgz#4faad28d26ede351a7a1aaa5fec67915c869e355"
-  integrity sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw==
-
-matchdep@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/matchdep/-/matchdep-2.0.0.tgz#c6f34834a0d8dbc3b37c27ee8bbcb27c7775582e"
-  integrity sha1-xvNINKDY28OzfCfui7yyfHd1WC4=
-  dependencies:
-    findup-sync "^2.0.0"
-    micromatch "^3.0.4"
-    resolve "^1.4.0"
-    stack-trace "0.0.10"
-
-matcher@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/matcher/-/matcher-2.0.0.tgz#85fe38d97670dbd2a46590cf099401e2ffb4755c"
-  integrity sha512-nlmfSlgHBFx36j/Pl/KQPbIaqE8Zf0TqmSMjsuddHDg6PMSVgmyW9HpkLs0o0M1n2GIZ/S2BZBLIww/xjhiGng==
-  dependencies:
-    escape-string-regexp "^2.0.0"
-
-matcher@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/matcher/-/matcher-2.1.0.tgz#64e1041c15b993e23b786f93320a7474bf833c28"
-  integrity sha512-o+nZr+vtJtgPNklyeUKkkH42OsK8WAfdgaJE2FNxcjLPg+5QbeEoT6vRj8Xq/iv18JlQ9cmKsEu0b94ixWf1YQ==
-  dependencies:
-    escape-string-regexp "^2.0.0"
-
-math-random@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
-  integrity sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==
-
-md5-hex@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/md5-hex/-/md5-hex-2.0.0.tgz#d0588e9f1c74954492ecd24ac0ac6ce997d92e33"
-  integrity sha1-0FiOnxx0lUSS7NJKwKxs6ZfZLjM=
-  dependencies:
-    md5-o-matic "^0.1.1"
-
-md5-hex@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/md5-hex/-/md5-hex-3.0.1.tgz#be3741b510591434b2784d79e556eefc2c9a8e5c"
-  integrity sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==
-  dependencies:
-    blueimp-md5 "^2.10.0"
-
-md5-o-matic@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/md5-o-matic/-/md5-o-matic-0.1.1.tgz#822bccd65e117c514fab176b25945d54100a03c3"
-  integrity sha1-givM1l4RfFFPqxdrJZRdVBAKA8M=
-
-md5.js@^1.3.4:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
-  integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
-
-mdast-util-compact@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-1.0.4.tgz#d531bb7667b5123abf20859be086c4d06c894593"
-  integrity sha512-3YDMQHI5vRiS2uygEFYaqckibpJtKq5Sj2c8JioeOQBU6INpKbdWzfyLqFFnDwEcEnRFIdMsguzs5pC1Jp4Isg==
-  dependencies:
-    unist-util-visit "^1.1.0"
-
-mdast-util-to-string@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527"
-  integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==
-
-mdn-data@2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
-  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
-
-mdurl@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
-  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
-
-media-typer@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
-  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
-
-memoizee@0.4.X:
-  version "0.4.14"
-  resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.14.tgz#07a00f204699f9a95c2d9e77218271c7cd610d57"
-  integrity sha512-/SWFvWegAIYAO4NQMpcX+gcra0yEZu4OntmUdrBaWrJncxOqAziGFlHxc7yjKVK2uu3lpPW27P27wkR82wA8mg==
-  dependencies:
-    d "1"
-    es5-ext "^0.10.45"
-    es6-weak-map "^2.0.2"
-    event-emitter "^0.3.5"
-    is-promise "^2.1"
-    lru-queue "0.1"
-    next-tick "1"
-    timers-ext "^0.1.5"
-
-meow@^3.3.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
-  integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=
-  dependencies:
-    camelcase-keys "^2.0.0"
-    decamelize "^1.1.2"
-    loud-rejection "^1.0.0"
-    map-obj "^1.0.1"
-    minimist "^1.1.3"
-    normalize-package-data "^2.3.4"
-    object-assign "^4.0.1"
-    read-pkg-up "^1.0.1"
-    redent "^1.0.0"
-    trim-newlines "^1.0.0"
-
-meow@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-4.0.1.tgz#d48598f6f4b1472f35bf6317a95945ace347f975"
-  integrity sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==
-  dependencies:
-    camelcase-keys "^4.0.0"
-    decamelize-keys "^1.0.0"
-    loud-rejection "^1.0.0"
-    minimist "^1.1.3"
-    minimist-options "^3.0.1"
-    normalize-package-data "^2.3.4"
-    read-pkg-up "^3.0.0"
-    redent "^2.0.0"
-    trim-newlines "^2.0.0"
-
-meow@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-5.0.0.tgz#dfc73d63a9afc714a5e371760eb5c88b91078aa4"
-  integrity sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==
-  dependencies:
-    camelcase-keys "^4.0.0"
-    decamelize-keys "^1.0.0"
-    loud-rejection "^1.0.0"
-    minimist-options "^3.0.1"
-    normalize-package-data "^2.3.4"
-    read-pkg-up "^3.0.0"
-    redent "^2.0.0"
-    trim-newlines "^2.0.0"
-    yargs-parser "^10.0.0"
-
-meow@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-7.0.1.tgz#1ed4a0a50b3844b451369c48362eb0515f04c1dc"
-  integrity sha512-tBKIQqVrAHqwit0vfuFPY3LlzJYkEOFyKa3bPgxzNl6q/RtN8KQ+ALYEASYuFayzSAsjlhXj/JZ10rH85Q6TUw==
-  dependencies:
-    "@types/minimist" "^1.2.0"
-    arrify "^2.0.1"
-    camelcase "^6.0.0"
-    camelcase-keys "^6.2.2"
-    decamelize-keys "^1.1.0"
-    hard-rejection "^2.1.0"
-    minimist-options "^4.0.2"
-    normalize-package-data "^2.5.0"
-    read-pkg-up "^7.0.1"
-    redent "^3.0.0"
-    trim-newlines "^3.0.0"
-    type-fest "^0.13.1"
-    yargs-parser "^18.1.3"
-
-merge-descriptors@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
-  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
-
-merge-stream@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
-  integrity sha1-QEEgLVCKNCugAXQAjfDCUbjBNeE=
-  dependencies:
-    readable-stream "^2.0.1"
-
-merge-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
-  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
-
-merge2@^1.2.3, merge2@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.3.0.tgz#5b366ee83b2f1582c48f87e47cf1a9352103ca81"
-  integrity sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==
-
-method-override@~2.3.5:
-  version "2.3.10"
-  resolved "https://registry.yarnpkg.com/method-override/-/method-override-2.3.10.tgz#e3daf8d5dee10dd2dce7d4ae88d62bbee77476b4"
-  integrity sha1-49r41d7hDdLc59SuiNYrvud0drQ=
-  dependencies:
-    debug "2.6.9"
-    methods "~1.1.2"
-    parseurl "~1.3.2"
-    vary "~1.1.2"
-
-methods@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
-  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
-
-metric-lcs@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/metric-lcs/-/metric-lcs-0.1.2.tgz#87913f149410e39c7c5a19037512814eaf155e11"
-  integrity sha512-+TZ5dUDPKPJaU/rscTzxyN8ZkX7eAVLAiQU/e+YINleXPv03SCmJShaMT1If1liTH8OcmWXZs0CmzCBRBLcMpA==
-
-micromatch@^2.1.5:
-  version "2.3.11"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
-  integrity sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=
-  dependencies:
-    arr-diff "^2.0.0"
-    array-unique "^0.2.1"
-    braces "^1.8.2"
-    expand-brackets "^0.1.4"
-    extglob "^0.3.1"
-    filename-regex "^2.0.0"
-    is-extglob "^1.0.0"
-    is-glob "^2.0.1"
-    kind-of "^3.0.2"
-    normalize-path "^2.0.1"
-    object.omit "^2.0.0"
-    parse-glob "^3.0.4"
-    regex-cache "^0.4.2"
-
-micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
-  version "3.1.10"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
-  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    braces "^2.3.1"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    extglob "^2.0.4"
-    fragment-cache "^0.2.1"
-    kind-of "^6.0.2"
-    nanomatch "^1.2.9"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.2"
-
-micromatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
-  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
-  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.0.5"
-
-miller-rabin@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
-  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
-  dependencies:
-    bn.js "^4.0.0"
-    brorand "^1.0.1"
-
-mime-db@1.40.0:
-  version "1.40.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32"
-  integrity sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==
-
-mime-db@1.44.0:
-  version "1.44.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
-  integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
-
-"mime-db@>= 1.40.0 < 2":
-  version "1.42.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.42.0.tgz#3e252907b4c7adb906597b4b65636272cf9e7bac"
-  integrity sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ==
-
-mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.6, mime-types@~2.1.9:
-  version "2.1.24"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
-  integrity sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==
-  dependencies:
-    mime-db "1.40.0"
-
-mime-types@^2.1.18:
-  version "2.1.27"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
-  integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
-  dependencies:
-    mime-db "1.44.0"
-
-mime@1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
-  integrity sha1-EV+eO2s9rylZmDyzjxSaLUDrXVM=
-
-mime@1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
-  integrity sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==
-
-mime@1.6.0, mime@^1.3.4:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
-  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
-
-mime@^2.4.5:
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.5.tgz#d8de2ecb92982dedbb6541c9b6841d7f218ea009"
-  integrity sha512-3hQhEUF027BuxZjQA3s7rIv/7VCQPa27hN9u9g87sEkWaKwQPuXOkVKtOeiyUrnWqTDiOs8Ed2rwg733mB0R5w==
-
-mimic-fn@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
-  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
-
-mimic-fn@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
-  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
-
-mimic-response@^1.0.0, mimic-response@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
-  integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
-
-min-indent@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
-  integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
-
-minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
-  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
-
-minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
-  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
-
-"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-minimatch@^2.0.7:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-2.0.10.tgz#8d087c39c6b38c001b97fca7ce6d0e1e80afbac7"
-  integrity sha1-jQh8OcazjAAbl/ynzm0OHoCvusc=
-  dependencies:
-    brace-expansion "^1.0.0"
-
-minimist-options@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-3.0.2.tgz#fba4c8191339e13ecf4d61beb03f070103f3d954"
-  integrity sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==
-  dependencies:
-    arrify "^1.0.1"
-    is-plain-obj "^1.1.0"
-
-minimist-options@^4.0.2:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
-  integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
-  dependencies:
-    arrify "^1.0.1"
-    is-plain-obj "^1.1.0"
-    kind-of "^6.0.3"
-
-minimist@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
-  integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
-
-minimist@1.2.5, minimist@^1.2.3, minimist@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
-
-minimist@1.x, minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
-  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
-
-minimist@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.2.0.tgz#4dffe525dae2b864c66c2e23c6271d7afdecefce"
-  integrity sha1-Tf/lJdriuGTGbC4jxicdev3s784=
-
-minimist@~0.0.1:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
-  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
-
-minipass-collect@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
-  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-flush@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
-  integrity sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-pipeline@^1.2.2:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.3.tgz#55f7839307d74859d6e8ada9c3ebe72cec216a34"
-  integrity sha512-cFOknTvng5vqnwOpDsZTWhNll6Jf8o2x+/diplafmxpuIymAjzoOolZG0VvQf3V2HgqzJNhnuKHYp2BqDgz8IQ==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
-  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
-minipass@^3.0.0, minipass@^3.1.1:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
-  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
-  dependencies:
-    yallist "^4.0.0"
-
-minizlib@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
-  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
-  dependencies:
-    minipass "^2.9.0"
-
-minizlib@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.0.tgz#fd52c645301ef09a63a2c209697c294c6ce02cf3"
-  integrity sha512-EzTZN/fjSvifSX0SlqUERCN39o6T40AMarPbv0MrarSFtIITCBh7bi+dU8nxGFHuqs9jdIAeoYoKuQAAASsPPA==
-  dependencies:
-    minipass "^3.0.0"
-    yallist "^4.0.0"
-
-mixin-deep@^1.2.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
-  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
-  dependencies:
-    for-in "^1.0.2"
-    is-extendable "^1.0.1"
-
-mkdirp-classic@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.2.tgz#54c441ce4c96cd7790e10b41a87aa51068ecab2b"
-  integrity sha512-ejdnDQcR75gwknmMw/tx02AuRs8jCtqFoFqDZMjiNxsu85sRIJVXDKHuLYvUUPRBUtV2FpSZa9bL1BUa3BdR2g==
-
-mkdirp@0.5.x, mkdirp@0.x.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
-  integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
-  dependencies:
-    minimist "0.0.8"
-
-mkdirp@^1.0.3, mkdirp@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
-mocha-silent-reporter@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/mocha-silent-reporter/-/mocha-silent-reporter-1.0.0.tgz#f1f2fcafa4e2eaee989ac6cd00b76b8204f890bb"
-  integrity sha1-8fL8r6Ti6u6YmsbNALdrggT4kLs=
-  dependencies:
-    chalk "^0.5.1"
-
-mocha@8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/mocha/-/mocha-8.0.1.tgz#fe01f0530362df271aa8f99510447bc38b88d8ed"
-  integrity sha512-vefaXfdYI8+Yo8nPZQQi0QO2o+5q9UIMX1jZ1XMmK3+4+CQjc7+B0hPdUeglXiTlr8IHMVRo63IhO9Mzt6fxOg==
-  dependencies:
-    ansi-colors "4.1.1"
-    browser-stdout "1.3.1"
-    chokidar "3.3.1"
-    debug "3.2.6"
-    diff "4.0.2"
-    escape-string-regexp "1.0.5"
-    find-up "4.1.0"
-    glob "7.1.6"
-    growl "1.10.5"
-    he "1.2.0"
-    js-yaml "3.13.1"
-    log-symbols "3.0.0"
-    minimatch "3.0.4"
-    ms "2.1.2"
-    object.assign "4.1.0"
-    promise.allsettled "1.0.2"
-    serialize-javascript "3.0.0"
-    strip-json-comments "3.0.1"
-    supports-color "7.1.0"
-    which "2.0.2"
-    wide-align "1.1.3"
-    workerpool "6.0.0"
-    yargs "13.3.2"
-    yargs-parser "13.1.2"
-    yargs-unparser "1.6.0"
-
-module-deps@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/module-deps/-/module-deps-6.2.1.tgz#cfe558784060e926824f474b4e647287837cda50"
-  integrity sha512-UnEn6Ah36Tu4jFiBbJVUtt0h+iXqxpLqDvPS8nllbw5RZFmNJ1+Mz5BjYnM9ieH80zyxHkARGLnMIHlPK5bu6A==
-  dependencies:
-    JSONStream "^1.0.3"
-    browser-resolve "^1.7.0"
-    cached-path-relative "^1.0.2"
-    concat-stream "~1.6.0"
-    defined "^1.0.0"
-    detective "^5.0.2"
-    duplexer2 "^0.1.2"
-    inherits "^2.0.1"
-    parents "^1.0.0"
-    readable-stream "^2.0.2"
-    resolve "^1.4.0"
-    stream-combiner2 "^1.1.1"
-    subarg "^1.0.0"
-    through2 "^2.0.0"
-    xtend "^4.0.0"
-
-moment-timezone@0.5.31:
-  version "0.5.31"
-  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.31.tgz#9c40d8c5026f0c7ab46eda3d63e49c155148de05"
-  integrity sha512-+GgHNg8xRhMXfEbv81iDtrVeTcWt0kWmTEY1XQK14dICTXnWJnT0dxdlPspwqF3keKMVPXwayEsk1DI0AA/jdA==
-  dependencies:
-    moment ">= 2.9.0"
-
-moment@2.24.0, moment@>=1.6.0:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
-  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
-
-moment@2.25.3:
-  version "2.25.3"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.25.3.tgz#252ff41319cf41e47761a1a88cab30edfe9808c0"
-  integrity sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg==
-
-"moment@>= 2.9.0", moment@^2.10.6:
-  version "2.26.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.26.0.tgz#5e1f82c6bafca6e83e808b30c8705eed0dcbd39a"
-  integrity sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw==
-
-moo@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"
-  integrity sha512-I1mnb5xn4fO80BH9BLcF0yLypy2UKl+Cb01Fu0hJRkJjlCRtxZMWkTdAtDd5ZqCOxtCkhmRwyI57vWT+1iZ67w==
-
-morgan@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7"
-  integrity sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==
-  dependencies:
-    basic-auth "~2.0.1"
-    debug "2.6.9"
-    depd "~2.0.0"
-    on-finished "~2.3.0"
-    on-headers "~1.0.2"
-
-morgan@~1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.6.1.tgz#5fd818398c6819cba28a7cd6664f292fe1c0bbf2"
-  integrity sha1-X9gYOYxoGcuiinzWZk8pL+HAu/I=
-  dependencies:
-    basic-auth "~1.0.3"
-    debug "~2.2.0"
-    depd "~1.0.1"
-    on-finished "~2.3.0"
-    on-headers "~1.0.0"
-
-mri@1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.5.tgz#ce21dba2c69f74a9b7cf8a1ec62307e089e223e0"
-  integrity sha512-d2RKzMD4JNyHMbnbWnznPaa8vbdlq/4pNZ3IgdaGrVbBhebBsGUUE/6qorTMYNS6TwuH3ilfOlD2bf4Igh8CKg==
-
-ms@0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
-  integrity sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=
-
-ms@0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
-  integrity sha1-riXPJRKziFodldfwN4aNhDESR2U=
-
-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
-  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
-
-ms@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
-  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
-
-ms@2.1.2, ms@^2.1.1, ms@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
-
-multer@1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/multer/-/multer-1.4.2.tgz#2f1f4d12dbaeeba74cb37e623f234bf4d3d2057a"
-  integrity sha512-xY8pX7V+ybyUpbYMxtjM9KAiD9ixtg5/JkeKUTD6xilfDv0vzzOFcCp4Ljb1UU3tSOM3VTZtKo63OmzOrGi3Cg==
-  dependencies:
-    append-field "^1.0.0"
-    busboy "^0.2.11"
-    concat-stream "^1.5.2"
-    mkdirp "^0.5.1"
-    object-assign "^4.1.1"
-    on-finished "^2.3.0"
-    type-is "^1.6.4"
-    xtend "^4.0.0"
-
-multiparty@3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/multiparty/-/multiparty-3.3.2.tgz#35de6804dc19643e5249f3d3e3bdc6c8ce301d3f"
-  integrity sha1-Nd5oBNwZZD5SSfPT473GyM4wHT8=
-  dependencies:
-    readable-stream "~1.1.9"
-    stream-counter "~0.2.0"
-
-multipipe@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/multipipe/-/multipipe-0.1.2.tgz#2a8f2ddf70eed564dff2d57f1e1a137d9f05078b"
-  integrity sha1-Ko8t33Du1WTf8tV/HhoTfZ8FB4s=
-  dependencies:
-    duplexer2 "0.0.2"
-
-mute-stdout@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mute-stdout/-/mute-stdout-1.0.1.tgz#acb0300eb4de23a7ddeec014e3e96044b3472331"
-  integrity sha512-kDcwXR4PS7caBpuRYYBUz9iVixUk3anO3f5OYFiIPwK/20vCzKCHyKoulbiDY1S53zD2bxUpxN/IJ+TnXjfvxg==
-
-mute-stream@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
-  integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
-
-mute-stream@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
-  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
-
-mv@~2:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/mv/-/mv-2.1.1.tgz#ae6ce0d6f6d5e0a4f7d893798d03c1ea9559b6a2"
-  integrity sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI=
-  dependencies:
-    mkdirp "~0.5.1"
-    ncp "~2.0.0"
-    rimraf "~2.4.0"
-
-mz@^2.4.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
-  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
-  dependencies:
-    any-promise "^1.0.0"
-    object-assign "^4.0.1"
-    thenify-all "^1.0.0"
-
-nan@^2.12.1:
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
-  integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
-
-nan@^2.14.0, nan@^2.14.1:
-  version "2.14.1"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
-  integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
-
-nan@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-1.0.0.tgz#ae24f8850818d662fcab5acf7f3b95bfaa2ccf38"
-  integrity sha1-riT4hQgY1mL8q1rPfzuVv6oszzg=
-
-nanoid@^2.1.0:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
-  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
-
-nanomatch@^1.2.9:
-  version "1.2.13"
-  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
-  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    fragment-cache "^0.2.1"
-    is-windows "^1.0.2"
-    kind-of "^6.0.2"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-natives@^1.1.3:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/natives/-/natives-1.1.6.tgz#a603b4a498ab77173612b9ea1acdec4d980f00bb"
-  integrity sha512-6+TDFewD4yxY14ptjKaS63GVdtKiES1pTPyxn9Jb0rBqPMZ7VcCiooEhPNsr+mqHtMGxa/5c/HhcC4uPEUw/nA==
-
-natural-compare@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
-  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
-
-ncp@0.4.x:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/ncp/-/ncp-0.4.2.tgz#abcc6cbd3ec2ed2a729ff6e7c1fa8f01784a8574"
-  integrity sha1-q8xsvT7C7Spyn/bnwfqPAXhKhXQ=
-
-ncp@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
-  integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=
-
-nearley@^2.7.10:
-  version "2.19.1"
-  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.19.1.tgz#4af4006e16645ff800e9f993c3af039857d9dbdc"
-  integrity sha512-xq47GIUGXxU9vQg7g/y1o1xuKnkO7ev4nRWqftmQrLkfnE/FjRqDaGOUakM8XHPn/6pW3bGjU2wgoJyId90rqg==
-  dependencies:
-    commander "^2.19.0"
-    moo "^0.5.0"
-    railroad-diagrams "^1.0.0"
-    randexp "0.4.6"
-    semver "^5.4.1"
-
-needle@^2.2.1:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.0.tgz#6833e74975c444642590e15a750288c5f939b57c"
-  integrity sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
-negotiator@0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.5.3.tgz#269d5c476810ec92edbe7b6c2f28316384f9a7e8"
-  integrity sha1-Jp1cR2gQ7JLtvntsLygxY4T5p+g=
-
-negotiator@0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
-  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
-
-neo-async@^2.6.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
-  integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
-
-next-tick@1, next-tick@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
-  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
-
-nice-try@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
-  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
-
-nise@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/nise/-/nise-4.0.1.tgz#16c1b893e8ac4e3958dcab5cc174c07c8ff42cdc"
-  integrity sha512-10PKL272rqg80o2RsWcTT6X9cDYqJ4kXqPTf8yCXPc9hbphZSDmbiG5FqUNeR5nouKCQMM24ld45kgYnBdx2rw==
-  dependencies:
-    "@sinonjs/commons" "^1.7.0"
-    "@sinonjs/fake-timers" "^6.0.0"
-    "@sinonjs/formatio" "^4.0.1"
-    "@sinonjs/text-encoding" "^0.7.1"
-    just-extend "^4.0.2"
-    path-to-regexp "^1.7.0"
-
-no-case@^2.2.0:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
-  integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
-  dependencies:
-    lower-case "^1.1.1"
-
-node-emoji@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
-  integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
-  dependencies:
-    lodash.toarray "^4.4.0"
-
-node-fetch@^1.0.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
-  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
-
-node-fetch@^2.2.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
-  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
-
-node-gyp@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-6.1.0.tgz#64e31c61a4695ad304c1d5b82cf6b7c79cc79f3f"
-  integrity sha512-h4A2zDlOujeeaaTx06r4Vy+8MZ1679lU+wbCKDS4ZtvY2A37DESo37oejIw0mtmR3+rvNwts5B6Kpt1KrNYdNw==
-  dependencies:
-    env-paths "^2.2.0"
-    glob "^7.1.4"
-    graceful-fs "^4.2.2"
-    mkdirp "^0.5.1"
-    nopt "^4.0.1"
-    npmlog "^4.1.2"
-    request "^2.88.0"
-    rimraf "^2.6.3"
-    semver "^5.7.1"
-    tar "^4.4.12"
-    which "^1.3.1"
-
-node-html-parser@1.2.19:
-  version "1.2.19"
-  resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-1.2.19.tgz#2cb14ce7981dfe2c0f5af53cf8654a3d49cded7d"
-  integrity sha512-MQvBz+qk7SbqNPp0c7hR0F8lRTPXK5n2tww4eFmXf+cXp5hZHtL5rJHlAWlcjzRep+T5Pd5lz3lqFgN7IFYEiw==
-  dependencies:
-    he "1.1.1"
-
-node-int64@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
-  integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
-
-node-modules-regexp@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
-  integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
-
-node-notifier@^5.4.2:
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.3.tgz#cb72daf94c93904098e28b9c590fd866e464bd50"
-  integrity sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==
-  dependencies:
-    growly "^1.3.0"
-    is-wsl "^1.1.0"
-    semver "^5.5.0"
-    shellwords "^0.1.1"
-    which "^1.3.0"
-
-node-notifier@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-7.0.0.tgz#513bc42f2aa3a49fce1980a7ff375957c71f718a"
-  integrity sha512-y8ThJESxsHcak81PGpzWwQKxzk+5YtP3IxR8AYdpXQ1IB6FmcVzFdZXrkPin49F/DKUCfeeiziB8ptY9npzGuA==
-  dependencies:
-    growly "^1.3.0"
-    is-wsl "^2.1.1"
-    semver "^7.2.1"
-    shellwords "^0.1.1"
-    uuid "^7.0.3"
-    which "^2.0.2"
-
-node-pre-gyp@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz#39ba4bb1439da030295f899e3b520b7785766149"
-  integrity sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4"
-
-node-releases@^1.1.50:
-  version "1.1.51"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.51.tgz#70d0e054221343d2966006bfbd4d98622cc00bd0"
-  integrity sha512-1eQEs6HFYY1kMXQPOLzCf7HdjReErmvn85tZESMczdCNVWP3Y7URYLBAyYynuI7yef1zj4HN5q+oB2x67QU0lw==
-  dependencies:
-    semver "^6.3.0"
-
-node-releases@^1.1.53:
-  version "1.1.53"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
-  integrity sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==
-
-nomnom@1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.5.2.tgz#f4345448a853cfbd5c0d26320f2477ab0526fe2f"
-  integrity sha1-9DRUSKhTz71cDSYyDyR3qwUm/i8=
-  dependencies:
-    colors "0.5.x"
-    underscore "1.1.x"
-
-"nomnom@>= 1.5.x", nomnom@^1.5.x:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.8.1.tgz#2151f722472ba79e50a76fc125bb8c8f2e4dc2a7"
-  integrity sha1-IVH3Ikcrp55Qp2/BJbuMjy5Nwqc=
-  dependencies:
-    chalk "~0.4.0"
-    underscore "~1.6.0"
-
-nopt@3.x:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
-  integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
-  dependencies:
-    abbrev "1"
-
-nopt@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
-  integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=
-  dependencies:
-    abbrev "1"
-    osenv "^0.1.4"
-
-normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
-  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
-  dependencies:
-    hosted-git-info "^2.1.4"
-    resolve "^1.10.0"
-    semver "2 || 3 || 4 || 5"
-    validate-npm-package-license "^3.0.1"
-
-normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
-  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
-  dependencies:
-    remove-trailing-separator "^1.0.1"
-
-normalize-path@^3.0.0, normalize-path@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
-  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
-
-normalize-range@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
-  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
-
-normalize-url@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
-  integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
-
-normalize-url@^4.1.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
-  integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
-
-now-and-later@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/now-and-later/-/now-and-later-2.0.1.tgz#8e579c8685764a7cc02cb680380e94f43ccb1f7c"
-  integrity sha512-KGvQ0cB70AQfg107Xvs/Fbu+dGmZoTRJp2TaPwcwQm3/7PteUyN2BCgk8KBMPGBUXZdVwyWS8fDCGFygBm19UQ==
-  dependencies:
-    once "^1.3.2"
-
-npm-bundled@^1.0.1:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd"
-  integrity sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==
-
-npm-exact-versions@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/npm-exact-versions/-/npm-exact-versions-0.0.5.tgz#84d965b53dd6239bcbfb10e6dc8e1089ece464aa"
-  integrity sha512-hQdoipu0T3MhKe1T0UwqVZsW7vn1bdcX8621OR1Fv57d/pW/qWf1MVoIxXK7ZzOB1hxnwCH6jDSXDtHyixMNTg==
-  dependencies:
-    semver "5.5.1"
-
-npm-packlist@^1.1.6:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.4.tgz#866224233850ac534b63d1a6e76050092b5d2f44"
-  integrity sha512-zTLo8UcVYtDU3gdeaFu2Xu0n0EvelfHDGuqtNIn5RO7yQj4H1TqNdBc/yZjxnWA0PVB8D3Woyp0i5B43JwQ6Vw==
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
-
-npm-run-path@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
-  integrity sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=
-  dependencies:
-    path-key "^2.0.0"
-
-npm-run-path@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.0.tgz#d644ec1bd0569187d2a52909971023a0a58e8438"
-  integrity sha512-8eyAOAH+bYXFPSnNnKr3J+yoybe8O87Is5rtAQ8qRczJz1ajcsjg8l2oZqP+Ppx15Ii3S1vUTjQN2h4YO2tWWQ==
-  dependencies:
-    path-key "^3.0.0"
-
-npmlog@^4.0.2, npmlog@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
-  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
-  dependencies:
-    are-we-there-yet "~1.1.2"
-    console-control-strings "~1.1.0"
-    gauge "~2.7.3"
-    set-blocking "~2.0.0"
-
-nth-check@^1.0.2, nth-check@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
-  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
-  dependencies:
-    boolbase "~1.0.0"
-
-num2fraction@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
-  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
-
-number-is-nan@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
-  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
-
-nwsapi@^2.0.7:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.1.4.tgz#e006a878db23636f8e8a67d33ca0e4edf61a842f"
-  integrity sha512-iGfd9Y6SFdTNldEy2L0GUhcarIutFmk+MPWIn9dmj8NMIup03G08uUF2KGbbmv/Ux4RT0VZJoP/sVbWA6d/VIw==
-
-nwsapi@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
-  integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
-
-oauth-sign@~0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
-  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
-
-object-assign@4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.0.1.tgz#99504456c3598b5cad4fc59c26e8a9bb107fe0bd"
-  integrity sha1-mVBEVsNZi1ytT8WcJuipuxB/4L0=
-
-object-assign@4.X, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
-object-component@0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
-  integrity sha1-8MaapQ78lbhmwYb0AKM3acsvEpE=
-
-object-copy@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
-  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
-  dependencies:
-    copy-descriptor "^0.1.0"
-    define-property "^0.2.5"
-    kind-of "^3.0.3"
-
-object-inspect@^1.6.0, object-inspect@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
-  integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
-
-object-is@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
-  integrity sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=
-
-object-is@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.2.tgz#6b80eb84fe451498f65007982f035a5b445edec4"
-  integrity sha512-Epah+btZd5wrrfjkJZq1AOB9O6OxUQto45hzFd7lXGrpHPGE0W1k+426yrZV+k6NJOzLNNW/nVsmZdIWsAqoOQ==
-
-object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
-  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
-
-object-keys@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-0.4.0.tgz#28a6aae7428dd2c3a92f3d95f21335dd204e0336"
-  integrity sha1-KKaq50KN0sOpLz2V8hM13SBOAzY=
-
-object-visit@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
-  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
-  dependencies:
-    isobject "^3.0.0"
-
-object.assign@4.1.0, object.assign@^4.0.4, object.assign@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
-  integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
-  dependencies:
-    define-properties "^1.1.2"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.0"
-    object-keys "^1.0.11"
-
-object.defaults@^1.0.0, object.defaults@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/object.defaults/-/object.defaults-1.1.0.tgz#3a7f868334b407dea06da16d88d5cd29e435fecf"
-  integrity sha1-On+GgzS0B96gbaFtiNXNKeQ1/s8=
-  dependencies:
-    array-each "^1.0.1"
-    array-slice "^1.0.0"
-    for-own "^1.0.0"
-    isobject "^3.0.0"
-
-object.entries@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519"
-  integrity sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.12.0"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-
-object.entries@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.1.tgz#ee1cf04153de02bb093fec33683900f57ce5399b"
-  integrity sha512-ilqR7BgdyZetJutmDPfXCDffGa0/Yzl2ivVNpbx/g4UeWrCdRnFDUBrKJGLhGieRHDATnyZXWBeCb29k9CJysQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-
-object.fromentries@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.2.tgz#4a09c9b9bb3843dd0f89acdb517a794d4f355ac9"
-  integrity sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-
-object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
-  integrity sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-object.map@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object.map/-/object.map-1.0.1.tgz#cf83e59dc8fcc0ad5f4250e1f78b3b81bd801d37"
-  integrity sha1-z4Plncj8wK1fQlDh94s7gb2AHTc=
-  dependencies:
-    for-own "^1.0.0"
-    make-iterator "^1.0.0"
-
-object.omit@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
-  integrity sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=
-  dependencies:
-    for-own "^0.1.4"
-    is-extendable "^0.1.1"
-
-object.pick@^1.2.0, object.pick@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
-  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
-  dependencies:
-    isobject "^3.0.1"
-
-object.reduce@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object.reduce/-/object.reduce-1.0.1.tgz#6fe348f2ac7fa0f95ca621226599096825bb03ad"
-  integrity sha1-b+NI8qx/oPlcpiEiZZkJaCW7A60=
-  dependencies:
-    for-own "^1.0.0"
-    make-iterator "^1.0.0"
-
-object.values@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.0.tgz#bf6810ef5da3e5325790eaaa2be213ea84624da9"
-  integrity sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.12.0"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-
-object.values@^1.1.0, object.values@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
-  integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-
-observable-to-promise@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/observable-to-promise/-/observable-to-promise-1.0.0.tgz#37e136f16a15385ac063411ada0e1202bfff58f4"
-  integrity sha512-cqnGUrNsE6vdVDTPAX9/WeVzwy/z37vdxupdQXU8vgTXRFH72KCZiZga8aca2ulRPIeem8W3vW9rQHBwfIl2WA==
-  dependencies:
-    is-observable "^2.0.0"
-    symbol-observable "^1.0.4"
-
-on-finished@^2.3.0, on-finished@~2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
-  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
-  dependencies:
-    ee-first "1.1.1"
-
-on-headers@~1.0.0, on-headers@~1.0.1, on-headers@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
-  integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
-
-once@1.x, once@^1.3.0, once@^1.3.1, once@^1.3.2, once@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
-  dependencies:
-    wrappy "1"
-
-onetime@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
-  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
-  dependencies:
-    mimic-fn "^1.0.0"
-
-onetime@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.0.tgz#fff0f3c91617fe62bb50189636e99ac8a6df7be5"
-  integrity sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==
-  dependencies:
-    mimic-fn "^2.1.0"
-
-opn@5.5.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
-  integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
-  dependencies:
-    is-wsl "^1.1.0"
-
-optimist@0.6.x, optimist@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
-  integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
-  dependencies:
-    minimist "~0.0.1"
-    wordwrap "~0.0.2"
-
-optionator@^0.8.1, optionator@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
-  integrity sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=
-  dependencies:
-    deep-is "~0.1.3"
-    fast-levenshtein "~2.0.4"
-    levn "~0.3.0"
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-    wordwrap "~1.0.0"
-
-optionator@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
-  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
-  dependencies:
-    deep-is "^0.1.3"
-    fast-levenshtein "^2.0.6"
-    levn "^0.4.1"
-    prelude-ls "^1.2.1"
-    type-check "^0.4.0"
-    word-wrap "^1.2.3"
-
-options@>=0.0.5:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
-  integrity sha1-7CLTEoBrtT5zF3Pnza788cZDEo8=
-
-ora@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/ora/-/ora-3.4.0.tgz#bf0752491059a3ef3ed4c85097531de9fdbcd318"
-  integrity sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==
-  dependencies:
-    chalk "^2.4.2"
-    cli-cursor "^2.1.0"
-    cli-spinners "^2.0.0"
-    log-symbols "^2.2.0"
-    strip-ansi "^5.2.0"
-    wcwidth "^1.0.1"
-
-ordered-read-streams@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/ordered-read-streams/-/ordered-read-streams-1.0.1.tgz#77c0cb37c41525d64166d990ffad7ec6a0e1363e"
-  integrity sha1-d8DLN8QVJdZBZtmQ/61+xqDhNj4=
-  dependencies:
-    readable-stream "^2.0.1"
-
-os-browserify@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
-  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
-
-os-homedir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
-
-os-locale@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
-  integrity sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=
-  dependencies:
-    lcid "^1.0.0"
-
-os-shim@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/os-shim/-/os-shim-0.1.3.tgz#6b62c3791cf7909ea35ed46e17658bb417cb3917"
-  integrity sha1-a2LDeRz3kJ6jXtRuF2WLtBfLORc=
-
-os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
-  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
-
-osenv@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
-  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
-  dependencies:
-    os-homedir "^1.0.0"
-    os-tmpdir "^1.0.0"
-
-outpipe@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/outpipe/-/outpipe-1.1.1.tgz#50cf8616365e87e031e29a5ec9339a3da4725fa2"
-  integrity sha1-UM+GFjZeh+Ax4ppeyTOaPaRyX6I=
-  dependencies:
-    shell-quote "^1.4.2"
-
-p-all@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/p-all/-/p-all-2.1.0.tgz#91419be56b7dee8fe4c5db875d55e0da084244a0"
-  integrity sha512-HbZxz5FONzz/z2gJfk6bFca0BCiSRF8jU3yCsWOen/vR6lZjfPOu/e7L3uFzTW1i0H8TlC3vqQstEJPQL4/uLA==
-  dependencies:
-    p-map "^2.0.0"
-
-p-cancelable@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
-  integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==
-
-p-each-series@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
-  integrity sha1-kw89Et0fUOdDRFeiLNbwSsatf3E=
-  dependencies:
-    p-reduce "^1.0.0"
-
-p-each-series@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.1.0.tgz#961c8dd3f195ea96c747e636b262b800a6b1af48"
-  integrity sha512-ZuRs1miPT4HrjFa+9fRfOFXxGJfORgelKV9f9nNOWw2gl6gVsRaVDOQP0+MI0G0wGKns1Yacsu0GjOFbTK0JFQ==
-
-p-finally@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
-  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
-
-p-finally@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-2.0.1.tgz#bd6fcaa9c559a096b680806f4d657b3f0f240561"
-  integrity sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==
-
-p-limit@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
-  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
-  dependencies:
-    p-try "^1.0.0"
-
-p-limit@^2.0.0, p-limit@^2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.1.tgz#aa07a788cc3151c939b5131f63570f0dd2009537"
-  integrity sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==
-  dependencies:
-    p-try "^2.0.0"
-
-p-locate@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
-  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
-  dependencies:
-    p-limit "^1.1.0"
-
-p-locate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
-  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
-  dependencies:
-    p-limit "^2.0.0"
-
-p-locate@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
-  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
-  dependencies:
-    p-limit "^2.2.0"
-
-p-map@4.0.0, p-map@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
-  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
-  dependencies:
-    aggregate-error "^3.0.0"
-
-p-map@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
-  integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
-
-p-map@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-3.0.0.tgz#d704d9af8a2ba684e2600d9a215983d4141a979d"
-  integrity sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==
-  dependencies:
-    aggregate-error "^3.0.0"
-
-p-reduce@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
-  integrity sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=
-
-p-try@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
-  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
-
-p-try@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
-  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
-
-package-hash@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/package-hash/-/package-hash-4.0.0.tgz#3537f654665ec3cc38827387fc904c163c54f506"
-  integrity sha512-whdkPIooSu/bASggZ96BWVvZTRMOFxnyUG5PnTSGKoJE2gd5mbVNmR2Nj20QFzxYYgAXpoqC+AiXzl+UMRh7zQ==
-  dependencies:
-    graceful-fs "^4.1.15"
-    hasha "^5.0.0"
-    lodash.flattendeep "^4.4.0"
-    release-zalgo "^1.0.0"
-
-package-json@^6.3.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/package-json/-/package-json-6.5.0.tgz#6feedaca35e75725876d0b0e64974697fed145b0"
-  integrity sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==
-  dependencies:
-    got "^9.6.0"
-    registry-auth-token "^4.0.0"
-    registry-url "^5.0.0"
-    semver "^6.2.0"
-
-pako@~1.0.2, pako@~1.0.5:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
-  integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
-
-param-case@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
-  integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
-  dependencies:
-    no-case "^2.2.0"
-
-parent-module@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
-  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
-  dependencies:
-    callsites "^3.0.0"
-
-parents@^1.0.0, parents@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parents/-/parents-1.0.1.tgz#fedd4d2bf193a77745fe71e371d73c3307d9c751"
-  integrity sha1-/t1NK/GTp3dF/nHjcdc8MwfZx1E=
-  dependencies:
-    path-platform "~0.11.15"
-
-parse-asn1@^5.0.0:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.5.tgz#003271343da58dc94cace494faef3d2147ecea0e"
-  integrity sha512-jkMYn1dcJqF6d5CpU689bq7w/b5ALS9ROVSpQDPrZsqqesUJii9qutvoT5ltGedNXMO2e16YUWIghG9KxaViTQ==
-  dependencies:
-    asn1.js "^4.0.0"
-    browserify-aes "^1.0.0"
-    create-hash "^1.1.0"
-    evp_bytestokey "^1.0.0"
-    pbkdf2 "^3.0.3"
-    safe-buffer "^5.1.1"
-
-parse-diff@0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/parse-diff/-/parse-diff-0.7.0.tgz#f11128d3aa02381b46ebc8320b470c2c327e67dc"
-  integrity sha512-88ar4IU2Fx+KgiyvVul0Y+YprMArTgLscO0nEKaEvWvhzRSSYefdf1M9PUmpx1pu5crUoVl2QNDMqjxfCeKptQ==
-
-parse-entities@^1.0.2, parse-entities@^1.1.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50"
-  integrity sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==
-  dependencies:
-    character-entities "^1.0.0"
-    character-entities-legacy "^1.0.0"
-    character-reference-invalid "^1.0.0"
-    is-alphanumerical "^1.0.0"
-    is-decimal "^1.0.0"
-    is-hexadecimal "^1.0.0"
-
-parse-filepath@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/parse-filepath/-/parse-filepath-1.0.2.tgz#a632127f53aaf3d15876f5872f3ffac763d6c891"
-  integrity sha1-pjISf1Oq89FYdvWHLz/6x2PWyJE=
-  dependencies:
-    is-absolute "^1.0.0"
-    map-cache "^0.2.0"
-    path-root "^0.1.1"
-
-parse-glob@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
-  integrity sha1-ssN2z7EfNVE7rdFz7wu246OIORw=
-  dependencies:
-    glob-base "^0.3.0"
-    is-dotfile "^1.0.0"
-    is-extglob "^1.0.0"
-    is-glob "^2.0.0"
-
-parse-json@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
-  integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
-  dependencies:
-    error-ex "^1.2.0"
-
-parse-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
-  dependencies:
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-
-parse-json@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.0.0.tgz#73e5114c986d143efa3712d4ea24db9a4266f60f"
-  integrity sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-    lines-and-columns "^1.1.6"
-
-parse-link-header@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parse-link-header/-/parse-link-header-1.0.1.tgz#bedfe0d2118aeb84be75e7b025419ec8a61140a7"
-  integrity sha1-vt/g0hGK64S+deewJUGeyKYRQKc=
-  dependencies:
-    xtend "~4.0.1"
-
-parse-ms@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-2.1.0.tgz#348565a753d4391fa524029956b172cb7753097d"
-  integrity sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA==
-
-parse-node-version@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
-  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
-
-parse-passwd@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
-  integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=
-
-parse5-htmlparser2-tree-adapter@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-5.1.1.tgz#e8c743d4e92194d5293ecde2b08be31e67461cbc"
-  integrity sha512-CF+TKjXqoqyDwHqBhFQ+3l5t83xYi6fVT1tQNg+Ye0JRLnTxWvIroCjEp1A0k4lneHNBGnICUf0cfYVYGEazqw==
-  dependencies:
-    parse5 "^5.1.1"
-
-parse5@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
-  integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
-
-parse5@5.1.1, parse5@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
-  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
-
-parse5@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
-  integrity sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==
-  dependencies:
-    "@types/node" "*"
-
-parseqs@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
-  integrity sha1-1SCKNzjkZ2bikbouoXNoSSGouJ0=
-  dependencies:
-    better-assert "~1.0.0"
-
-parseuri@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.5.tgz#80204a50d4dbb779bfdc6ebe2778d90e4bce320a"
-  integrity sha1-gCBKUNTbt3m/3G6+J3jZDkvOMgo=
-  dependencies:
-    better-assert "~1.0.0"
-
-parseurl@~1.3.0, parseurl@~1.3.1, parseurl@~1.3.2, parseurl@~1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
-  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
-
-pascalcase@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
-  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
-
-path-browserify@~0.0.0:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
-  integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
-
-path-dirname@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
-  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
-
-path-exists@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
-  integrity sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=
-  dependencies:
-    pinkie-promise "^2.0.0"
-
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
-
-path-exists@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
-  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
-
-path-is-absolute@^1.0.0, path-is-absolute@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-path-is-inside@^1.0.1, path-is-inside@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
-  integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
-
-path-key@^2.0.0, path-key@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
-  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
-
-path-key@^3.0.0, path-key@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.0.tgz#99a10d870a803bdd5ee6f0470e58dfcd2f9a54d3"
-  integrity sha512-8cChqz0RP6SHJkMt48FW0A7+qUOn+OsnOsVtzI59tZ8m+5bCSk7hzwET0pulwOM2YMn9J1efb07KB9l9f30SGg==
-
-path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
-
-path-platform@~0.11.15:
-  version "0.11.15"
-  resolved "https://registry.yarnpkg.com/path-platform/-/path-platform-0.11.15.tgz#e864217f74c36850f0852b78dc7bf7d4a5721bf2"
-  integrity sha1-6GQhf3TDaFDwhSt43Hv31KVyG/I=
-
-path-root-regex@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/path-root-regex/-/path-root-regex-0.1.2.tgz#bfccdc8df5b12dc52c8b43ec38d18d72c04ba96d"
-  integrity sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=
-
-path-root@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/path-root/-/path-root-0.1.1.tgz#9a4a6814cac1c0cd73360a95f32083c8ea4745b7"
-  integrity sha1-mkpoFMrBwM1zNgqV8yCDyOpHRbc=
-  dependencies:
-    path-root-regex "^0.1.0"
-
-path-to-regexp@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
-
-path-to-regexp@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
-  integrity sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=
-  dependencies:
-    isarray "0.0.1"
-
-path-to-regexp@^2.2.1:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.4.0.tgz#35ce7f333d5616f1c1e1bfe266c3aba2e5b2e704"
-  integrity sha512-G6zHoVqC6GGTQkZwF4lkuEyMbVOjoBKAEybQUypI1WTkqinCOrq2x6U2+phkJ1XsEMTy4LjtwPI7HW+NVrRR2w==
-
-path-type@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
-  integrity sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=
-  dependencies:
-    graceful-fs "^4.1.2"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-
-path-type@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
-  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
-  dependencies:
-    pify "^3.0.0"
-
-path-type@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
-  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
-
-pathval@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
-  integrity sha1-uULm1L3mUwBe9rcTYd74cn0GReA=
-
-pause-stream@^0.0.11:
-  version "0.0.11"
-  resolved "https://registry.yarnpkg.com/pause-stream/-/pause-stream-0.0.11.tgz#fe5a34b0cbce12b5aa6a2b403ee2e73b602f1445"
-  integrity sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=
-  dependencies:
-    through "~2.3"
-
-pause@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/pause/-/pause-0.1.0.tgz#ebc8a4a8619ff0b8a81ac1513c3434ff469fdb74"
-  integrity sha1-68ikqGGf8LioGsFRPDQ0/0af23Q=
-
-pbkdf2@^3.0.3:
-  version "3.0.17"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
-  integrity sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==
-  dependencies:
-    create-hash "^1.1.2"
-    create-hmac "^1.1.4"
-    ripemd160 "^2.0.1"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
-performance-now@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
-  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
-
-picomatch@^2.0.4, picomatch@^2.0.5:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.0.7.tgz#514169d8c7cd0bdbeecc8a2609e34a7163de69f6"
-  integrity sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==
-
-picomatch@^2.0.7, picomatch@^2.2.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
-  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
-
-pify@^2.0.0, pify@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
-  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
-
-pify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
-  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
-
-pify@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
-  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
-
-pinkie-promise@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
-  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
-  dependencies:
-    pinkie "^2.0.0"
-
-pinkie@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
-  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
-
-pirates@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
-  integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==
-  dependencies:
-    node-modules-regexp "^1.0.0"
-
-pkg-conf@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/pkg-conf/-/pkg-conf-3.1.0.tgz#d9f9c75ea1bae0e77938cde045b276dac7cc69ae"
-  integrity sha512-m0OTbR/5VPNPqO1ph6Fqbj7Hv6QU7gR/tQW40ZqrL1rjgCU85W6C1bJn0BItuJqnR98PWzw7Z8hHeChD1WrgdQ==
-  dependencies:
-    find-up "^3.0.0"
-    load-json-file "^5.2.0"
-
-pkg-dir@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
-  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
-  dependencies:
-    find-up "^3.0.0"
-
-pkg-dir@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
-  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
-  dependencies:
-    find-up "^4.0.0"
-
-pkg-up@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
-  integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
-  dependencies:
-    find-up "^2.1.0"
-
-pkginfo@0.3.x:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.3.1.tgz#5b29f6a81f70717142e09e765bbeab97b4f81e21"
-  integrity sha1-Wyn2qB9wcXFC4J52W76rl7T4HiE=
-
-plugin-error@1.0.1, plugin-error@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c"
-  integrity sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==
-  dependencies:
-    ansi-colors "^1.0.1"
-    arr-diff "^4.0.0"
-    arr-union "^3.1.0"
-    extend-shallow "^3.0.2"
-
-plugin-error@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-0.1.2.tgz#3b9bb3335ccf00f425e07437e19276967da47ace"
-  integrity sha1-O5uzM1zPAPQl4HQ34ZJ2ln2kes4=
-  dependencies:
-    ansi-cyan "^0.1.1"
-    ansi-red "^0.1.1"
-    arr-diff "^1.0.1"
-    arr-union "^2.0.1"
-    extend-shallow "^1.1.2"
-
-plur@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/plur/-/plur-3.1.1.tgz#60267967866a8d811504fe58f2faaba237546a5b"
-  integrity sha512-t1Ax8KUvV3FFII8ltczPn2tJdjqbd1sIzu6t4JL7nQ3EyeL/lTrj5PWKb06ic5/6XYDr65rQ4uzQEGN70/6X5w==
-  dependencies:
-    irregular-plurals "^2.0.0"
-
-pn@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
-  integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
-
-policyfile@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/policyfile/-/policyfile-0.0.4.tgz#d6b82ead98ae79ebe228e2daf5903311ec982e4d"
-  integrity sha1-1rgurZiueeviKOLa9ZAzEeyYLk0=
-
-posix-character-classes@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
-  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
-
-postcss-calc@^7.0.1:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.2.tgz#504efcd008ca0273120568b0792b16cdcde8aac1"
-  integrity sha512-rofZFHUg6ZIrvRwPeFktv06GdbDYLcGqh9EwiMutZg+a0oePCCw1zHOEiji6LCpyRcjTREtPASuUqeAvYlEVvQ==
-  dependencies:
-    postcss "^7.0.27"
-    postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.0.2"
-
-postcss-colormin@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
-  integrity sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==
-  dependencies:
-    browserslist "^4.0.0"
-    color "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-convert-values@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz#ca3813ed4da0f812f9d43703584e449ebe189a7f"
-  integrity sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-discard-comments@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
-  integrity sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-duplicates@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz#3fe133cd3c82282e550fc9b239176a9207b784eb"
-  integrity sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-empty@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz#c8c951e9f73ed9428019458444a02ad90bb9f765"
-  integrity sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-overridden@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz#652aef8a96726f029f5e3e00146ee7a4e755ff57"
-  integrity sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-import@12.0.1:
-  version "12.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-12.0.1.tgz#cf8c7ab0b5ccab5649024536e565f841928b7153"
-  integrity sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==
-  dependencies:
-    postcss "^7.0.1"
-    postcss-value-parser "^3.2.3"
-    read-cache "^1.0.0"
-    resolve "^1.1.7"
-
-postcss-merge-longhand@^4.0.11:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
-  integrity sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==
-  dependencies:
-    css-color-names "0.0.4"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    stylehacks "^4.0.0"
-
-postcss-merge-rules@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
-  integrity sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-api "^3.0.0"
-    cssnano-util-same-parent "^4.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-    vendors "^1.0.0"
-
-postcss-minify-font-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
-  integrity sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-minify-gradients@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471"
-  integrity sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    is-color-stop "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-minify-params@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874"
-  integrity sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    browserslist "^4.0.0"
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    uniqs "^2.0.0"
-
-postcss-minify-selectors@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
-  integrity sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-
-postcss-normalize-charset@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
-  integrity sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-normalize-display-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a"
-  integrity sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-positions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f"
-  integrity sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-repeat-style@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c"
-  integrity sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-string@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c"
-  integrity sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==
-  dependencies:
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-timing-functions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9"
-  integrity sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-unicode@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz#841bd48fdcf3019ad4baa7493a3d363b52ae1cfb"
-  integrity sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==
-  dependencies:
-    browserslist "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-url@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz#10e437f86bc7c7e58f7b9652ed878daaa95faae1"
-  integrity sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==
-  dependencies:
-    is-absolute-url "^2.0.0"
-    normalize-url "^3.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-whitespace@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82"
-  integrity sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-ordered-values@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
-  integrity sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-reduce-initial@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
-  integrity sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-api "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-
-postcss-reduce-transforms@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
-  integrity sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-selector-parser@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz#b310f5c4c0fdaf76f94902bbaa30db6aa84f5270"
-  integrity sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==
-  dependencies:
-    dot-prop "^5.2.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-selector-parser@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
-  integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
-  dependencies:
-    cssesc "^3.0.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-svgo@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
-  integrity sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==
-  dependencies:
-    is-svg "^3.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    svgo "^1.0.0"
-
-postcss-unique-selectors@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz#9446911f3289bfd64c6d680f073c03b1f9ee4bac"
-  integrity sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    postcss "^7.0.0"
-    uniqs "^2.0.0"
-
-postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-
-postcss-value-parser@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz#651ff4593aa9eda8d5d0d66593a2417aeaeb325d"
-  integrity sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==
-
-postcss-value-parser@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
-  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
-
-postcss@7.0.32:
-  version "7.0.32"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
-  integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.27:
-  version "7.0.27"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.27.tgz#cc67cdc6b0daa375105b7c424a85567345fc54d9"
-  integrity sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
-postcss@^7.0.30:
-  version "7.0.30"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.30.tgz#cc9378beffe46a02cbc4506a0477d05fcea9a8e2"
-  integrity sha512-nu/0m+NtIzoubO+xdAlwZl/u5S5vi/y6BCsoL8D+8IxsD3XvBS8X4YEADNIVXKVuQvduiucnRv+vPIqj56EGMQ==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
-posthtml-parser@^0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.4.2.tgz#a132bbdf0cd4bc199d34f322f5c1599385d7c6c1"
-  integrity sha512-BUIorsYJTvS9UhXxPTzupIztOMVNPa/HtAm9KHni9z6qEfiJ1bpOBL5DfUOL9XAc3XkLIEzBzpph+Zbm4AdRAg==
-  dependencies:
-    htmlparser2 "^3.9.2"
-
-posthtml-render@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/posthtml-render/-/posthtml-render-1.2.2.tgz#f554a19ed40d40e2bfc160826b0a91d4a23656cd"
-  integrity sha512-MbIXTWwAfJ9qET6Zl29UNwJcDJEEz9Zkr5oDhiujitJa7YBJwEpbkX2cmuklCDxubTMoRWpid3q8DrSyGnUUzQ==
-
-posthtml@0.13.0:
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/posthtml/-/posthtml-0.13.0.tgz#164e9be086d32da795c6ee26e4f8f0a931e2d8d8"
-  integrity sha512-g9KDiHUJZrzeGUfzpSLJ51K/tJrl+QS/zrEEv2MoIyFZyWVGCHDNQva2MVsy4Oqy4jIFRFjNW4oFjMardOqmKQ==
-  dependencies:
-    posthtml-parser "^0.4.2"
-    posthtml-render "^1.2.2"
-
-preact-render-to-string@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-4.1.0.tgz#70d98a8385cb86558366c558aad7311ebecb881d"
-  integrity sha512-FlFBJRxo8z4cp6VsDmeYjIEx4ZK2clFJnKIvIj8K1IQCRm7ZgJ/SZ1+BotT86/Nc+V1pNtFabHoUi6gpjx5Pug==
-  dependencies:
-    pretty-format "^3.8.0"
-
-preact@10.2.1:
-  version "10.2.1"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.2.1.tgz#b30eb4cdc455499ee2ff82e0fa1a16fc8e20f3a4"
-  integrity sha512-BUNvmQcVtNElku7mYHexIiM5JlGNSW2BY9O2t9xk1NqA43O8wbE0cah6PAlvT7PBHvyDRJ5TAj5Fewdi9DqLoQ==
-
-prelude-ls@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
-  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
-
-prelude-ls@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
-  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
-
-prepend-http@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
-  integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
-
-preserve@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
-  integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
-
-prettier-linter-helpers@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
-  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
-  dependencies:
-    fast-diff "^1.1.2"
-
-prettier@2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
-  integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
-
-prettier@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.1.tgz#3f00ac71263be34684b2b2c8d7e7f63737592dac"
-  integrity sha512-piXGBcY1zoFOG0MvHpNE5reAGseLmaCRifQ/fmfF49BcYkInEs/naD/unxGNAeOKFA5+JxVrPyMvMlpzcd20UA==
-
-pretty-bytes@5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
-  integrity sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==
-
-pretty-format@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
-  integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
-  dependencies:
-    "@jest/types" "^24.9.0"
-    ansi-regex "^4.0.0"
-    ansi-styles "^3.2.0"
-    react-is "^16.8.4"
-
-pretty-format@^26.0.1:
-  version "26.0.1"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.0.1.tgz#a4fe54fe428ad2fd3413ca6bbd1ec8c2e277e197"
-  integrity sha512-SWxz6MbupT3ZSlL0Po4WF/KujhQaVehijR2blyRDCzk9e45EaYMVhMBn49fnRuHxtkSpXTes1GxNpVmH86Bxfw==
-  dependencies:
-    "@jest/types" "^26.0.1"
-    ansi-regex "^5.0.0"
-    ansi-styles "^4.0.0"
-    react-is "^16.12.0"
-
-pretty-format@^3.8.0:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
-  integrity sha1-v77VbV6ad2ZF9LH/eqGjrE+jw4U=
-
-pretty-hrtime@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
-  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
-
-pretty-ms@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-5.0.0.tgz#6133a8f55804b208e4728f6aa7bf01085e951e24"
-  integrity sha512-94VRYjL9k33RzfKiGokPBPpsmloBYSf5Ri+Pq19zlsEcUKFob+admeXr5eFDRuPjFmEOcjJvPGdillYOJyvZ7Q==
-  dependencies:
-    parse-ms "^2.1.0"
-
-private@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
-  integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
-
-process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
-
-process@~0.11.0:
-  version "0.11.10"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
-  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
-
-progress@2.0.3, progress@^2.0.0, progress@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
-  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
-
-promise-inflight@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
-  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
-
-promise-pjs@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/promise-pjs/-/promise-pjs-1.1.3.tgz#c004936f110c66d3d116f82b181bd6a197e080d1"
-  integrity sha1-wASTbxEMZtPRFvgrGBvWoZfggNE=
-
-promise-pjs@1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/promise-pjs/-/promise-pjs-1.1.4.tgz#69a69cb43fb2e58811a53a43e3eff8a216b5eabc"
-  integrity sha512-OyH4v6sheTi8DPVixLuV2oSpXjiY89pbhRLVJIs1xotO4iWnADX4xxMdqWzIUba4WJ71AnOMmb0WpLbu0lX4bA==
-
-promise.allsettled@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/promise.allsettled/-/promise.allsettled-1.0.2.tgz#d66f78fbb600e83e863d893e98b3d4376a9c47c9"
-  integrity sha512-UpcYW5S1RaNKT6pd+s9jp9K9rlQge1UXKskec0j6Mmuq7UJCvlS2J2/s/yuPN8ehftf9HXMxWlKiPbGGUzpoRg==
-  dependencies:
-    array.prototype.map "^1.0.1"
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-    iterate-value "^1.0.0"
-
-promise@8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.1.tgz#e45d68b00a17647b6da711bf85ed6ed47208f450"
-  integrity sha1-5F1osAoXZHttpxG/he1u1HII9FA=
-  dependencies:
-    asap "~2.0.3"
-
-promise@^7.1.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
-  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
-  dependencies:
-    asap "~2.0.3"
-
-prompts@^2.0.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.2.1.tgz#f901dd2a2dfee080359c0e20059b24188d75ad35"
-  integrity sha512-VObPvJiWPhpZI6C5m60XOzTfnYg/xc/an+r9VYymj9WJW3B/DIH+REzjpAACPf8brwPeP+7vz3bIim3S+AaMjw==
-  dependencies:
-    kleur "^3.0.3"
-    sisteransi "^1.0.3"
-
-prop-types-exact@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/prop-types-exact/-/prop-types-exact-1.2.0.tgz#825d6be46094663848237e3925a98c6e944e9869"
-  integrity sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==
-  dependencies:
-    has "^1.0.3"
-    object.assign "^4.1.0"
-    reflect.ownkeys "^0.2.0"
-
-prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
-  version "15.7.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
-  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.8.1"
-
-proxy-addr@~2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
-  integrity sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==
-  dependencies:
-    forwarded "~0.1.2"
-    ipaddr.js "1.9.0"
-
-pseudomap@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
-  integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
-
-psl@^1.1.24, psl@^1.1.28:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.4.0.tgz#5dd26156cdb69fa1fdb8ab1991667d3f80ced7c2"
-  integrity sha512-HZzqCGPecFLyoRj5HLfuDSKYTJkAfB5thKBIkRHtGjWwY7p1dAyveIbXIq4tO0KYfDF2tHqPUgY9SDnGm00uFw==
-
-public-encrypt@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
-  integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==
-  dependencies:
-    bn.js "^4.1.0"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    parse-asn1 "^5.0.0"
-    randombytes "^2.0.1"
-    safe-buffer "^5.1.2"
-
-pump@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
-  integrity sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-pump@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
-  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-pumpify@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-2.0.1.tgz#abfc7b5a621307c728b551decbbefb51f0e4aa1e"
-  integrity sha512-m7KOje7jZxrmutanlkS1daj1dS6z6BgslzOXmcSEpIlCxM3VJH7lG5QLeck/6hgF6F4crFf01UtQmNsJfweTAw==
-  dependencies:
-    duplexify "^4.1.1"
-    inherits "^2.0.3"
-    pump "^3.0.0"
-
-pumpify@^1.3.5:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
-  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
-  dependencies:
-    duplexify "^3.6.0"
-    inherits "^2.0.3"
-    pump "^2.0.0"
-
-punycode@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
-  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
-
-punycode@2.1.1, punycode@2.x.x, punycode@^2.1.0, punycode@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
-  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
-
-punycode@^1.3.2, punycode@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
-  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
-
-q@^1.1.2, q@^1.4.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
-  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
-
-qjobs@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.2.0.tgz#c45e9c61800bd087ef88d7e256423bdd49e5d071"
-  integrity sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==
-
-qs@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-4.0.0.tgz#c31d9b74ec27df75e543a86c78728ed8d4623607"
-  integrity sha1-wx2bdOwn33XlQ6hseHKO2NRiNgc=
-
-qs@6.7.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
-  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
-
-qs@^6.4.0:
-  version "6.9.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.0.tgz#d1297e2a049c53119cb49cca366adbbacc80b409"
-  integrity sha512-27RP4UotQORTpmNQDX8BHPukOnBP3p1uUJY5UnDhaJB+rMt9iMsok724XL+UHU23bEFOHRMQ2ZhI99qOWUMGFA==
-
-qs@^6.9.1:
-  version "6.9.4"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"
-  integrity sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==
-
-qs@~6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
-  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
-
-querystring-es3@~0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
-  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
-
-querystring@0.2.0, querystring@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
-  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
-
-querystringify@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
-  integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
-
-quick-lru@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
-  integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=
-
-quick-lru@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
-  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
-
-raf@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
-  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
-  dependencies:
-    performance-now "^2.1.0"
-
-railroad-diagrams@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
-  integrity sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=
-
-randexp@0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"
-  integrity sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==
-  dependencies:
-    discontinuous-range "1.0.0"
-    ret "~0.1.10"
-
-random-bytes@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/random-bytes/-/random-bytes-1.0.0.tgz#4f68a1dc0ae58bd3fb95848c30324db75d64360b"
-  integrity sha1-T2ih3Arli9P7lYSMMDJNt11kNgs=
-
-randomatic@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
-  integrity sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==
-  dependencies:
-    is-number "^4.0.0"
-    kind-of "^6.0.0"
-    math-random "^1.0.1"
-
-randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
-  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
-  dependencies:
-    safe-buffer "^5.1.0"
-
-randomfill@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
-  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
-  dependencies:
-    randombytes "^2.0.5"
-    safe-buffer "^5.1.0"
-
-range-parser@^1.2.1, range-parser@~1.2.0, range-parser@~1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
-  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
-
-range-parser@~1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.0.3.tgz#6872823535c692e2c2a0103826afd82c2e0ff175"
-  integrity sha1-aHKCNTXGkuLCoBA4Jq/YLC4P8XU=
-
-raw-body@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
-  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
-  dependencies:
-    bytes "3.1.0"
-    http-errors "1.7.2"
-    iconv-lite "0.4.24"
-    unpipe "1.0.0"
-
-raw-body@~1.1.0:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-1.1.7.tgz#1d027c2bfa116acc6623bca8f00016572a87d425"
-  integrity sha1-HQJ8K/oRasxmI7yo8AAWVyqH1CU=
-  dependencies:
-    bytes "1"
-    string_decoder "0.10"
-
-raw-body@~2.1.2:
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.1.7.tgz#adfeace2e4fb3098058014d08c072dcc59758774"
-  integrity sha1-rf6s4uT7MJgFgBTQjActzFl1h3Q=
-  dependencies:
-    bytes "2.4.0"
-    iconv-lite "0.4.13"
-    unpipe "1.0.0"
-
-rc@^1.2.7, rc@^1.2.8:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
-  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
-  dependencies:
-    deep-extend "^0.6.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
-re2@1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/re2/-/re2-1.14.0.tgz#727076590acfe868cf04e115a3a3f6c373ddd63b"
-  integrity sha512-TYogJmzni8zNVaw4gNOVORRTUaggLZwnMhJoTD0POKeACEoCxTWa9BAYehRnh3S1JUXIMEfcEUa7piiGEn71Zg==
-  dependencies:
-    nan "^2.14.1"
-    node-gyp "^6.1.0"
-
-react-addons-shallow-compare@15.6.2, react-addons-shallow-compare@^15.5.2:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.6.2.tgz#198a00b91fc37623db64a28fd17b596ba362702f"
-  integrity sha1-GYoAuR/DdiPbZKKP0XtZa6NicC8=
-  dependencies:
-    fbjs "^0.8.4"
-    object-assign "^4.1.0"
-
-react-dates@15.5.3:
-  version "15.5.3"
-  resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-15.5.3.tgz#e0d40b8c029bec3efb916c5b64c1b5272f40bcb6"
-  integrity sha512-tH/2fTMkiak/3EgfTeNMXyqVGLYZyO9vdGh3EtVBCjvzh0e5xS8NVhREM408aetkJfWpSSqA23TrEOdMf+ZQtA==
-  dependencies:
-    airbnb-prop-types "^2.8.1"
-    consolidated-events "^1.1.0"
-    is-touch-device "^1.0.1"
-    lodash "^4.1.1"
-    object.assign "^4.0.4"
-    object.values "^1.0.4"
-    prop-types "^15.5.10"
-    react-addons-shallow-compare "^15.5.2"
-    react-moment-proptypes "^1.5.0"
-    react-portal "^4.1.0"
-    react-with-styles "=2.2.0"
-    react-with-styles-interface-css "^3.0.0"
-
-react-dom@16.13.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
-  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
-
-react-externs@0.13.6:
-  version "0.13.6"
-  resolved "https://registry.yarnpkg.com/react-externs/-/react-externs-0.13.6.tgz#75ccab88e9c8a6a9d0ae2647c368af8d94bd0160"
-  integrity sha1-dcyriOnIpqnQriZHw2ivjZS9AWA=
-
-react-is@^16.12.0:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
-react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
-  version "16.10.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.1.tgz#0612786bf19df406502d935494f0450b40b8294f"
-  integrity sha512-BXUMf9sIOPXXZWqr7+c5SeOKJykyVr2u0UDzEf4LNGc6taGkQe1A9DFD07umCIXz45RLr9oAAwZbAJ0Pkknfaw==
-
-react-moment-proptypes@^1.5.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/react-moment-proptypes/-/react-moment-proptypes-1.7.0.tgz#89881479840a76c13574a86e3bb214c4ba564e7a"
-  integrity sha512-ZbOn/P4u469WEGAw5hgkS/E+g1YZqdves2BjYsLluJobzUZCtManhjHiZKjniBVT7MSHM6D/iKtRVzlXVv3ikA==
-  dependencies:
-    moment ">=1.6.0"
-
-react-portal@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.2.0.tgz#5400831cdb0ae64dccb8128121cf076089ab1afd"
-  integrity sha512-Zf+vGQ/VEAb5XAy+muKEn48yhdCNYPZaB1BWg1xc8sAZWD8pXTgPtQT4ihBdmWzsfCq8p8/kqf0GWydSBqc+Eg==
-  dependencies:
-    prop-types "^15.5.8"
-
-react-with-direction@1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/react-with-direction/-/react-with-direction-1.3.1.tgz#9fd414564f0ffe6947e5ff176f6132dd83f8b8df"
-  integrity sha512-aGcM21ZzhqeXFvDCfPj0rVNYuaVXfTz5D3Rbn0QMz/unZe+CCiLHthrjQWO7s6qdfXORgYFtmS7OVsRgSk5LXQ==
-  dependencies:
-    airbnb-prop-types "^2.10.0"
-    brcast "^2.0.2"
-    deepmerge "^1.5.2"
-    direction "^1.0.2"
-    hoist-non-react-statics "^3.3.0"
-    object.assign "^4.1.0"
-    object.values "^1.0.4"
-    prop-types "^15.6.2"
-
-react-with-styles-interface-css@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-with-styles-interface-css/-/react-with-styles-interface-css-3.0.0.tgz#ebb000c23f75567f25af6792ab7a29089d798fda"
-  integrity sha512-SsjJrabqVa7PedwCC/P7lseXnHHxD1H5GHBNt4lDxVHhQhAhlb6PVYR/dcH7JWOzv1nH5LRKOdqI9A5OIZ27bQ==
-  dependencies:
-    aphrodite "^1.2.5"
-    array-flatten "^2.1.1"
-    global-cache "^1.2.1"
-
-react-with-styles@=2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/react-with-styles/-/react-with-styles-2.2.0.tgz#c85352d9e5951824b259bf9fad11dbcf74a15571"
-  integrity sha1-yFNS2eWVGCSyWb+frRHbz3ShVXE=
-  dependencies:
-    deepmerge "^1.5.2"
-    global-cache "^1.2.1"
-    hoist-non-react-statics "^2.3.1"
-    prop-types "^15.6.0"
-
-react@16.13.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
-  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-
-read-cache@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
-  integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
-  dependencies:
-    pify "^2.3.0"
-
-read-chunk@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-2.1.0.tgz#6a04c0928005ed9d42e1a6ac5600e19cbc7ff655"
-  integrity sha1-agTAkoAF7Z1C4aasVgDhnLx/9lU=
-  dependencies:
-    pify "^3.0.0"
-    safe-buffer "^5.1.1"
-
-read-file@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/read-file/-/read-file-0.2.0.tgz#70c6baf8842ec7d1540f981fd0e6aed4c81bd545"
-  integrity sha1-cMa6+IQux9FUD5gf0Oau1Mgb1UU=
-
-read-only-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/read-only-stream/-/read-only-stream-2.0.0.tgz#2724fd6a8113d73764ac288d4386270c1dbf17f0"
-  integrity sha1-JyT9aoET1zdkrCiNQ4YnDB2/F/A=
-  dependencies:
-    readable-stream "^2.0.2"
-
-read-pkg-up@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
-  integrity sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=
-  dependencies:
-    find-up "^1.0.0"
-    read-pkg "^1.0.0"
-
-read-pkg-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
-  integrity sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=
-  dependencies:
-    find-up "^2.0.0"
-    read-pkg "^3.0.0"
-
-read-pkg-up@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"
-  integrity sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==
-  dependencies:
-    find-up "^3.0.0"
-    read-pkg "^3.0.0"
-
-read-pkg-up@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
-  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
-  dependencies:
-    find-up "^4.1.0"
-    read-pkg "^5.2.0"
-    type-fest "^0.8.1"
-
-read-pkg@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
-  integrity sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=
-  dependencies:
-    load-json-file "^1.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^1.0.0"
-
-read-pkg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
-  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
-  dependencies:
-    load-json-file "^4.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^3.0.0"
-
-read-pkg@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
-  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
-  dependencies:
-    "@types/normalize-package-data" "^2.4.0"
-    normalize-package-data "^2.5.0"
-    parse-json "^5.0.0"
-    type-fest "^0.6.0"
-
-readable-stream@1.1.x, readable-stream@~1.1.8, readable-stream@~1.1.9:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
-  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
-"readable-stream@2 || 3", readable-stream@^3.0.6, readable-stream@^3.1.1:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
-  integrity sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
-"readable-stream@>=1.0.33-1 <1.1.0-0", readable-stream@~1.0.17, readable-stream@~1.0.2:
-  version "1.0.34"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
-  integrity sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
-readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
-  integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
-readdirp@^2.0.0, readdirp@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
-  integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
-  dependencies:
-    graceful-fs "^4.1.11"
-    micromatch "^3.1.10"
-    readable-stream "^2.0.2"
-
-readdirp@~3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.1.3.tgz#d6e011ed5b9240a92f08651eeb40f7942ceb6cc1"
-  integrity sha512-ZOsfTGkjO2kqeR5Mzr5RYDbTGYneSkdNKX2fOX2P5jF7vMrd/GNnIAUtDldeHHumHUCQ3V05YfWUdxMPAsRu9Q==
-  dependencies:
-    picomatch "^2.0.4"
-
-readdirp@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17"
-  integrity sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==
-  dependencies:
-    picomatch "^2.0.7"
-
-realpath-native@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
-  integrity sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==
-  dependencies:
-    util.promisify "^1.0.0"
-
-rechoir@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
-  integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
-  dependencies:
-    resolve "^1.1.6"
-
-redent@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
-  integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=
-  dependencies:
-    indent-string "^2.1.0"
-    strip-indent "^1.0.1"
-
-redent@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
-  integrity sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=
-  dependencies:
-    indent-string "^3.0.0"
-    strip-indent "^2.0.0"
-
-redent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
-  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
-  dependencies:
-    indent-string "^4.0.0"
-    strip-indent "^3.0.0"
-
-redis-commands@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/redis-commands/-/redis-commands-1.5.0.tgz#80d2e20698fe688f227127ff9e5164a7dd17e785"
-  integrity sha512-6KxamqpZ468MeQC3bkWmCB1fp56XL64D4Kf0zJSwDZbVLLm7KFkoIcHrgRvQ+sk8dnhySs7+yBg94yIkAK7aJg==
-
-redis-errors@^1.0.0, redis-errors@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/redis-errors/-/redis-errors-1.2.0.tgz#eb62d2adb15e4eaf4610c04afe1529384250abad"
-  integrity sha1-62LSrbFeTq9GEMBK/hUpOEJQq60=
-
-redis-parser@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/redis-parser/-/redis-parser-3.0.0.tgz#b66d828cdcafe6b4b8a428a7def4c6bcac31c8b4"
-  integrity sha1-tm2CjNyv5rS4pCin3vTGvKwxyLQ=
-  dependencies:
-    redis-errors "^1.0.0"
-
-redis@0.7.3:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/redis/-/redis-0.7.3.tgz#ee57b7a44d25ec1594e44365d8165fa7d1d4811a"
-  integrity sha1-7le3pE0l7BWU5ENl2BZfp9HUgRo=
-
-redis@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/redis/-/redis-3.0.2.tgz#bd47067b8a4a3e6a2e556e57f71cc82c7360150a"
-  integrity sha512-PNhLCrjU6vKVuMOyFu7oSP296mwBkcE6lrAjruBYG5LgdSqtRBoVQIylrMyVZD/lkF24RSNNatzvYag6HRBHjQ==
-  dependencies:
-    denque "^1.4.1"
-    redis-commands "^1.5.0"
-    redis-errors "^1.2.0"
-    redis-parser "^3.0.0"
-
-reflect.ownkeys@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
-  integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=
-
-regenerate-unicode-properties@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
-  integrity sha512-LGZzkgtLY79GeXLm8Dp0BVLdQlWICzBnJz/ipWUgo59qBaZ+BHtq51P2q1uVZlppMuUAT37SDk39qUbjTWB7bA==
-  dependencies:
-    regenerate "^1.4.0"
-
-regenerate-unicode-properties@^8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
-  integrity sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==
-  dependencies:
-    regenerate "^1.4.0"
-
-regenerate@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
-  integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
-
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
-regenerator-runtime@^0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.4.tgz#e96bf612a3362d12bb69f7e8f74ffeab25c7ac91"
-  integrity sha512-plpwicqEzfEyTQohIKktWigcLzmNStMGwbOUbykx51/29Z3JOGYldaaNGK7ngNXV+UcoqvIMmloZ48Sr74sd+g==
-
-regenerator-transform@^0.14.2:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.2.tgz#949d9d87468ff88d5a7e4734ebb994a892de1ff2"
-  integrity sha512-V4+lGplCM/ikqi5/mkkpJ06e9Bujq1NFmNLvsCs56zg3ZbzrnUzAtizZ24TXxtRX/W2jcdScwQCnbL0CICTFkQ==
-  dependencies:
-    "@babel/runtime" "^7.8.4"
-    private "^0.1.8"
-
-regex-cache@^0.4.2:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
-  integrity sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==
-  dependencies:
-    is-equal-shallow "^0.1.3"
-
-regex-not@^1.0.0, regex-not@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
-  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
-  dependencies:
-    extend-shallow "^3.0.2"
-    safe-regex "^1.1.0"
-
-regexp-sourcemaps@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/regexp-sourcemaps/-/regexp-sourcemaps-1.0.1.tgz#49a59e736501e17019a0d1f535df8b5b9197a262"
-  integrity sha1-SaWec2UB4XAZoNH1Nd+LW5GXomI=
-  dependencies:
-    source-map "^0.4.2"
-
-regexp.escape@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/regexp.escape/-/regexp.escape-1.1.0.tgz#521924caaf35b1c01c5bce7ab72914b79101c967"
-  integrity sha512-KVeSRSGxG1oQn9Op7tkDaYo5MRacMciqL5cHzCsvChvFOCtyxLMplXe9p+Z3ItGMLAONUTtnHe+yEyYDDntdxA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0"
-    function-bind "^1.1.1"
-
-regexp.prototype.flags@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.2.0.tgz#6b30724e306a27833eeb171b66ac8890ba37e41c"
-  integrity sha512-ztaw4M1VqgMwl9HlPpOuiYgItcHlunW0He2fE6eNfT6E/CF2FtYi9ofOYe4mKntstYk0Fyh/rDRBdS3AnxjlrA==
-  dependencies:
-    define-properties "^1.1.2"
-
-regexp.prototype.flags@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-regexpp@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
-  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
-
-regexpp@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
-  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
-
-regexpu-core@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.6.0.tgz#2037c18b327cfce8a6fea2a4ec441f2432afb8b6"
-  integrity sha512-YlVaefl8P5BnFYOITTNzDvan1ulLOiXJzCNZxduTIosN17b87h3bvG9yHMoHaRuo88H4mQ06Aodj5VtYGGGiTg==
-  dependencies:
-    regenerate "^1.4.0"
-    regenerate-unicode-properties "^8.1.0"
-    regjsgen "^0.5.0"
-    regjsparser "^0.6.0"
-    unicode-match-property-ecmascript "^1.0.4"
-    unicode-match-property-value-ecmascript "^1.1.0"
-
-regexpu-core@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
-  integrity sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==
-  dependencies:
-    regenerate "^1.4.0"
-    regenerate-unicode-properties "^8.2.0"
-    regjsgen "^0.5.1"
-    regjsparser "^0.6.4"
-    unicode-match-property-ecmascript "^1.0.4"
-    unicode-match-property-value-ecmascript "^1.2.0"
-
-regextras@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/regextras/-/regextras-0.7.1.tgz#be95719d5f43f9ef0b9fa07ad89b7c606995a3b2"
-  integrity sha512-9YXf6xtW+qzQ+hcMQXx95MOvfqXFgsKDZodX3qZB0x2n5Z94ioetIITsBtvJbiOyxa/6s9AtyweBLCdPmPko/w==
-
-registry-auth-token@4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.1.1.tgz#40a33be1e82539460f94328b0f7f0f84c16d9479"
-  integrity sha512-9bKS7nTl9+/A1s7tnPeGrUpRcVY+LUh7bfFgzpndALdPfXQBfQV77rQVtqgUV3ti4vc/Ik81Ex8UJDWDQ12zQA==
-  dependencies:
-    rc "^1.2.8"
-
-registry-auth-token@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.0.0.tgz#30e55961eec77379da551ea5c4cf43cbf03522be"
-  integrity sha512-lpQkHxd9UL6tb3k/aHAVfnVtn+Bcs9ob5InuFLLEDqSqeq+AljB8GZW9xY0x7F+xYwEcjKe07nyoxzEYz6yvkw==
-  dependencies:
-    rc "^1.2.8"
-    safe-buffer "^5.0.1"
-
-registry-url@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-5.1.0.tgz#e98334b50d5434b81136b44ec638d9c2009c5009"
-  integrity sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==
-  dependencies:
-    rc "^1.2.8"
-
-regjsgen@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.1.tgz#48f0bf1a5ea205196929c0d9798b42d1ed98443c"
-  integrity sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg==
-
-regjsgen@^0.5.1:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
-  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
-
-regjsparser@^0.6.0:
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.3.tgz#74192c5805d35e9f5ebe3c1fb5b40d40a8a38460"
-  integrity sha512-8uZvYbnfAtEm9Ab8NTb3hdLwL4g/LQzEYP7Xs27T96abJCCE2d6r3cPZPQEsLKy0vRSGVNG+/zVGtLr86HQduA==
-  dependencies:
-    jsesc "~0.5.0"
-
-regjsparser@^0.6.4:
-  version "0.6.4"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.4.tgz#a769f8684308401a66e9b529d2436ff4d0666272"
-  integrity sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==
-  dependencies:
-    jsesc "~0.5.0"
-
-relateurl@^0.2.7:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
-  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
-
-release-zalgo@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/release-zalgo/-/release-zalgo-1.0.0.tgz#09700b7e5074329739330e535c5a90fb67851730"
-  integrity sha1-CXALflB0Mpc5Mw5TXFqQ+2eFFzA=
-  dependencies:
-    es6-error "^4.0.1"
-
-remark-github@^7.0.3:
-  version "7.0.7"
-  resolved "https://registry.yarnpkg.com/remark-github/-/remark-github-7.0.7.tgz#432b030f63e32dd9e9921ccc6ca8afd45c839458"
-  integrity sha512-1E29BTyPDUNkTfb2ZdDSrat6ULn/2QjV38X2IRcwc0E2tXswawW4fscDz8SN7aorFc9gnO/Ko0xBVlu0RcG0SA==
-  dependencies:
-    is-alphabetical "^1.0.0"
-    is-decimal "^1.0.0"
-    is-hexadecimal "^1.0.0"
-    mdast-util-to-string "^1.0.1"
-    unist-util-visit "^1.0.0"
-
-remark-parse@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-5.0.0.tgz#4c077f9e499044d1d5c13f80d7a98cf7b9285d95"
-  integrity sha512-b3iXszZLH1TLoyUzrATcTQUZrwNl1rE70rVdSruJFlDaJ9z5aMkhrG43Pp68OgfHndL/ADz6V69Zow8cTQu+JA==
-  dependencies:
-    collapse-white-space "^1.0.2"
-    is-alphabetical "^1.0.0"
-    is-decimal "^1.0.0"
-    is-whitespace-character "^1.0.0"
-    is-word-character "^1.0.0"
-    markdown-escapes "^1.0.0"
-    parse-entities "^1.1.0"
-    repeat-string "^1.5.4"
-    state-toggle "^1.0.0"
-    trim "0.0.1"
-    trim-trailing-lines "^1.0.0"
-    unherit "^1.0.4"
-    unist-util-remove-position "^1.0.0"
-    vfile-location "^2.0.0"
-    xtend "^4.0.1"
-
-remark-stringify@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-5.0.0.tgz#336d3a4d4a6a3390d933eeba62e8de4bd280afba"
-  integrity sha512-Ws5MdA69ftqQ/yhRF9XhVV29mhxbfGhbz0Rx5bQH+oJcNhhSM6nCu1EpLod+DjrFGrU0BMPs+czVmJZU7xiS7w==
-  dependencies:
-    ccount "^1.0.0"
-    is-alphanumeric "^1.0.0"
-    is-decimal "^1.0.0"
-    is-whitespace-character "^1.0.0"
-    longest-streak "^2.0.1"
-    markdown-escapes "^1.0.0"
-    markdown-table "^1.1.0"
-    mdast-util-compact "^1.0.0"
-    parse-entities "^1.0.2"
-    repeat-string "^1.5.4"
-    state-toggle "^1.0.0"
-    stringify-entities "^1.0.1"
-    unherit "^1.0.4"
-    xtend "^4.0.1"
-
-remark@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/remark/-/remark-9.0.0.tgz#c5cfa8ec535c73a67c4b0f12bfdbd3a67d8b2f60"
-  integrity sha512-amw8rGdD5lHbMEakiEsllmkdBP+/KpjW/PRK6NSGPZKCQowh0BT4IWXDAkRMyG3SB9dKPXWMviFjNusXzXNn3A==
-  dependencies:
-    remark-parse "^5.0.0"
-    remark-stringify "^5.0.0"
-    unified "^6.0.0"
-
-remove-bom-buffer@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz#c2bf1e377520d324f623892e33c10cac2c252b53"
-  integrity sha512-8v2rWhaakv18qcvNeli2mZ/TMTL2nEyAKRvzo1WtnZBl15SHyEhrCu2/xKlJyUFKHiHgfXIyuY6g2dObJJycXQ==
-  dependencies:
-    is-buffer "^1.1.5"
-    is-utf8 "^0.2.1"
-
-remove-bom-stream@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/remove-bom-stream/-/remove-bom-stream-1.2.0.tgz#05f1a593f16e42e1fb90ebf59de8e569525f9523"
-  integrity sha1-BfGlk/FuQuH7kOv1nejlaVJflSM=
-  dependencies:
-    remove-bom-buffer "^3.0.0"
-    safe-buffer "^5.1.0"
-    through2 "^2.0.3"
-
-remove-trailing-separator@^1.0.1, remove-trailing-separator@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
-  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
-
-renovate@21.6.3:
-  version "21.6.3"
-  resolved "https://registry.yarnpkg.com/renovate/-/renovate-21.6.3.tgz#ee06f00316d941f9ff5cc89c60eba9fda5c69b6a"
-  integrity sha512-WNrBiCLN0h56WG9Lt/ihabe1ruXVYapqzBQWaSmIouSdfmCbEknBTZfOKTDsOp6oShOQGF2aBcEk04fGXsZkhQ==
-  dependencies:
-    "@renovate/pep440" "0.4.1"
-    "@sindresorhus/is" "2.1.1"
-    "@snyk/ruby-semver" "2.2.0"
-    "@yarnpkg/lockfile" "1.1.0"
-    aws-sdk "2.686.0"
-    azure-devops-node-api "10.1.1"
-    bunyan "1.8.12"
-    cacache "15.0.4"
-    chalk "4.0.0"
-    changelog-filename-regex "2.0.1"
-    clean-git-ref "2.0.1"
-    commander "5.1.0"
-    conventional-commits-detector "1.0.2"
-    deepmerge "4.2.2"
-    delay "4.3.0"
-    detect-indent "6.0.0"
-    email-addresses "3.1.0"
-    fast-safe-stringify "2.0.7"
-    find-up "4.1.0"
-    fs-extra "9.0.1"
-    github-url-from-git "1.5.0"
-    global-agent "2.1.8"
-    got "9.6.0"
-    handlebars "4.7.6"
-    handy-redis "1.8.3"
-    hasha "5.2.0"
-    ignore "5.1.8"
-    ini "1.3.5"
-    js-yaml "3.14.0"
-    json-dup-key-validator "1.0.2"
-    json-stringify-pretty-compact "2.0.0"
-    json5 "2.1.3"
-    later "1.2.0"
-    linkify-markdown "1.0.0"
-    lodash "4.17.15"
-    luxon "1.24.1"
-    markdown-it "10.0.0"
-    markdown-table "1.1.3"
-    minimatch "3.0.4"
-    moment "2.25.3"
-    moment-timezone "0.5.31"
-    node-emoji "1.10.0"
-    node-html-parser "1.2.19"
-    p-all "2.1.0"
-    p-map "4.0.0"
-    parse-diff "0.7.0"
-    parse-link-header "1.0.1"
-    registry-auth-token "4.1.1"
-    semver "7.3.2"
-    semver-stable "3.0.0"
-    semver-utils "1.1.4"
-    shlex "2.0.2"
-    shortid "2.2.15"
-    simple-git "1.132.0"
-    slugify "1.4.0"
-    toml "3.0.0"
-    traverse "0.6.6"
-    upath "1.2.0"
-    validate-npm-package-name "3.0.0"
-    www-authenticate "0.6.2"
-    xmldoc "1.1.2"
-    yawn-yaml "1.5.0"
-  optionalDependencies:
-    re2 "1.14.0"
-
-repeat-element@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
-  integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
-
-repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
-  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
-
-repeating@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
-  integrity sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=
-  dependencies:
-    is-finite "^1.0.0"
-
-replace-ext@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
-  integrity sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=
-
-replace-ext@1.0.0, replace-ext@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
-  integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
-
-replace-homedir@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/replace-homedir/-/replace-homedir-1.0.0.tgz#e87f6d513b928dde808260c12be7fec6ff6e798c"
-  integrity sha1-6H9tUTuSjd6AgmDBK+f+xv9ueYw=
-  dependencies:
-    homedir-polyfill "^1.0.1"
-    is-absolute "^1.0.0"
-    remove-trailing-separator "^1.1.0"
-
-request-promise-core@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.2.tgz#339f6aababcafdb31c799ff158700336301d3346"
-  integrity sha512-UHYyq1MO8GsefGEt7EprS8UrXsm1TxEvFUX1IMTuSLU2Rh7fTIdFtl8xD7JiEYiWU2dl+NYAjCTksTehQUxPag==
-  dependencies:
-    lodash "^4.17.11"
-
-request-promise-core@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.3.tgz#e9a3c081b51380dfea677336061fea879a829ee9"
-  integrity sha512-QIs2+ArIGQVp5ZYbWD5ZLCY29D5CfWizP8eWnm8FoGD1TX61veauETVQbrV60662V0oFBkrDOuaBI8XgtuyYAQ==
-  dependencies:
-    lodash "^4.17.15"
-
-request-promise-native@^1.0.5:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.7.tgz#a49868a624bdea5069f1251d0a836e0d89aa2c59"
-  integrity sha512-rIMnbBdgNViL37nZ1b3L/VfPOpSi0TqVDQPAvO6U14lMzOLrt5nilxCQqtDKhZeDiW0/hkCXGoQjhgJd/tCh6w==
-  dependencies:
-    request-promise-core "1.1.2"
-    stealthy-require "^1.1.1"
-    tough-cookie "^2.3.3"
-
-request-promise-native@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.8.tgz#a455b960b826e44e2bf8999af64dff2bfe58cb36"
-  integrity sha512-dapwLGqkHtwL5AEbfenuzjTYg35Jd6KPytsC2/TLkVMz8rm+tNt72MGUWT1RP/aYawMpN6HqbNGBQaRcBtjQMQ==
-  dependencies:
-    request-promise-core "1.1.3"
-    stealthy-require "^1.1.1"
-    tough-cookie "^2.3.3"
-
-request-promise@4.2.5:
-  version "4.2.5"
-  resolved "https://registry.yarnpkg.com/request-promise/-/request-promise-4.2.5.tgz#186222c59ae512f3497dfe4d75a9c8461bd0053c"
-  integrity sha512-ZgnepCykFdmpq86fKGwqntyTiUrHycALuGggpyCZwMvGaZWgxW6yagT0FHkgo5LzYvOaCNvxYwWYIjevSH1EDg==
-  dependencies:
-    bluebird "^3.5.0"
-    request-promise-core "1.1.3"
-    stealthy-require "^1.1.1"
-    tough-cookie "^2.3.3"
-
-request@2.88.2, request@^2.88.0, request@^2.88.2:
-  version "2.88.2"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
-  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.8.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.6"
-    extend "~3.0.2"
-    forever-agent "~0.6.1"
-    form-data "~2.3.2"
-    har-validator "~5.1.3"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.19"
-    oauth-sign "~0.9.0"
-    performance-now "^2.1.0"
-    qs "~6.5.2"
-    safe-buffer "^5.1.2"
-    tough-cookie "~2.5.0"
-    tunnel-agent "^0.6.0"
-    uuid "^3.3.2"
-
-request@^2.87.0:
-  version "2.88.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
-  integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.8.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.6"
-    extend "~3.0.2"
-    forever-agent "~0.6.1"
-    form-data "~2.3.2"
-    har-validator "~5.1.0"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.19"
-    oauth-sign "~0.9.0"
-    performance-now "^2.1.0"
-    qs "~6.5.2"
-    safe-buffer "^5.1.2"
-    tough-cookie "~2.4.3"
-    tunnel-agent "^0.6.0"
-    uuid "^3.3.2"
-
-require-directory@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
-
-require-hijack@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/require-hijack/-/require-hijack-1.2.1.tgz#ccdbf8391870b1806722b086e6cc1ab26a44f15f"
-  integrity sha1-zNv4ORhwsYBnIrCG5swasmpE8V8=
-  dependencies:
-    require-middleware "~1.0.0"
-
-require-main-filename@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
-  integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
-
-require-main-filename@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
-  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
-
-require-middleware@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/require-middleware/-/require-middleware-1.0.0.tgz#9071eeaeb5e4a632cd342447754e5a14b1dfa372"
-  integrity sha1-kHHurrXkpjLNNCRHdU5aFLHfo3I=
-
-require-precompiled@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/require-precompiled/-/require-precompiled-0.1.0.tgz#5a1b52eb70ebed43eb982e974c85ab59571e56fa"
-  integrity sha1-WhtS63Dr7UPrmC6XTIWrWVceVvo=
-
-requires-port@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
-  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
-
-resolve-cwd@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
-  integrity sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=
-  dependencies:
-    resolve-from "^3.0.0"
-
-resolve-cwd@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
-  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
-  dependencies:
-    resolve-from "^5.0.0"
-
-resolve-dir@^1.0.0, resolve-dir@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
-  integrity sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=
-  dependencies:
-    expand-tilde "^2.0.0"
-    global-modules "^1.0.0"
-
-resolve-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
-  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
-
-resolve-from@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
-  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
-
-resolve-from@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
-  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
-
-resolve-options@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/resolve-options/-/resolve-options-1.1.0.tgz#32bb9e39c06d67338dc9378c0d6d6074566ad131"
-  integrity sha1-MrueOcBtZzONyTeMDW1gdFZq0TE=
-  dependencies:
-    value-or-function "^3.0.0"
-
-resolve-url@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
-  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
-
-resolve@1.1.7, resolve@1.1.x:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
-  integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
-
-resolve@^1.1.4, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.4.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
-  integrity sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==
-  dependencies:
-    path-parse "^1.0.6"
-
-resolve@^1.15.1:
-  version "1.15.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.1.tgz#27bdcdeffeaf2d6244b95bb0f9f4b4653451f3e8"
-  integrity sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==
-  dependencies:
-    path-parse "^1.0.6"
-
-resolve@^1.17.0:
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
-  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
-  dependencies:
-    path-parse "^1.0.6"
-
-response-time@~2.3.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/response-time/-/response-time-2.3.2.tgz#ffa71bab952d62f7c1d49b7434355fbc68dffc5a"
-  integrity sha1-/6cbq5UtYvfB1Jt0NDVfvGjf/Fo=
-  dependencies:
-    depd "~1.1.0"
-    on-headers "~1.0.1"
-
-responselike@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
-  integrity sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=
-  dependencies:
-    lowercase-keys "^1.0.0"
-
-restore-cursor@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
-  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
-  dependencies:
-    onetime "^2.0.0"
-    signal-exit "^3.0.2"
-
-restore-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
-  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
-  dependencies:
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
-
-ret@~0.1.10:
-  version "0.1.15"
-  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
-  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
-
-reusify@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
-  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
-
-rfdc@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.1.4.tgz#ba72cc1367a0ccd9cf81a870b3b58bd3ad07f8c2"
-  integrity sha512-5C9HXdzK8EAqN7JDif30jqsBzavB7wLpaubisuQIGHWf2gUXSpzy6ArX/+Da8RjFpagWsCn+pIgxTMAmKw9Zug==
-
-rgb-regex@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
-  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
-
-rgba-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
-  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
-
-rimraf@2.6.3:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
-  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
-  dependencies:
-    glob "^7.1.3"
-
-rimraf@2.x.x, rimraf@^2.3.3, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  dependencies:
-    glob "^7.1.3"
-
-rimraf@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.0.tgz#614176d4b3010b75e5c390eb0ee96f6dc0cebb9b"
-  integrity sha512-NDGVxTsjqfunkds7CqsOiEnxln4Bo7Nddl3XhS4pXg5OzwkLqJ971ZVAAnB+DDLnF76N+VnDEiBHaVV8I06SUg==
-  dependencies:
-    glob "^7.1.3"
-
-rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
-rimraf@~2.4.0:
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da"
-  integrity sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto=
-  dependencies:
-    glob "^6.0.1"
-
-ripemd160@^2.0.0, ripemd160@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
-  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-
-rndm@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/rndm/-/rndm-1.2.0.tgz#f33fe9cfb52bbfd520aa18323bc65db110a1b76c"
-  integrity sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w=
-
-roarr@^2.15.2:
-  version "2.15.3"
-  resolved "https://registry.yarnpkg.com/roarr/-/roarr-2.15.3.tgz#65248a291a15af3ebfd767cbf7e44cb402d1d836"
-  integrity sha512-AEjYvmAhlyxOeB9OqPUzQCo3kuAkNfuDk/HqWbZdFsqDFpapkTjiw+p4svNEoRLvuqNTxqfL+s+gtD4eDgZ+CA==
-  dependencies:
-    boolean "^3.0.0"
-    detect-node "^2.0.4"
-    globalthis "^1.0.1"
-    json-stringify-safe "^5.0.1"
-    semver-compare "^1.0.0"
-    sprintf-js "^1.1.2"
-
-rocambole@0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/rocambole/-/rocambole-0.7.0.tgz#f6c79505517dc42b6fb840842b8b953b0f968585"
-  integrity sha1-9seVBVF9xCtvuECEK4uVOw+WhYU=
-  dependencies:
-    esprima "^2.1"
-
-rst-selector-parser@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
-  integrity sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=
-  dependencies:
-    lodash.flattendeep "^4.4.0"
-    nearley "^2.7.10"
-
-rsvp@^4.8.4:
-  version "4.8.5"
-  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
-  integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
-
-run-async@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
-  integrity sha1-A3GrSuC91yDUFm19/aZP96RFpsA=
-  dependencies:
-    is-promise "^2.1.0"
-
-run-parallel@^1.1.9:
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
-  integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==
-
-rxjs@^6.4.0:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.3.tgz#510e26317f4db91a7eb1de77d9dd9ba0a4899a3a"
-  integrity sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==
-  dependencies:
-    tslib "^1.9.0"
-
-safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
-  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-
-safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
-  integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
-
-safe-json-parse@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/safe-json-parse/-/safe-json-parse-1.0.1.tgz#3e76723e38dfdda13c9b1d29a1e07ffee4b30b57"
-  integrity sha1-PnZyPjjf3aE8mx0poeB//uSzC1c=
-
-safe-json-stringify@~1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/safe-json-stringify/-/safe-json-stringify-1.2.0.tgz#356e44bc98f1f93ce45df14bcd7c01cda86e0afd"
-  integrity sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg==
-
-safe-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
-  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
-  dependencies:
-    ret "~0.1.10"
-
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
-  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-
-sane@^4.0.3:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
-  integrity sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==
-  dependencies:
-    "@cnakazawa/watch" "^1.0.3"
-    anymatch "^2.0.0"
-    capture-exit "^2.0.0"
-    exec-sh "^0.3.2"
-    execa "^1.0.0"
-    fb-watchman "^2.0.0"
-    micromatch "^3.1.4"
-    minimist "^1.1.1"
-    walker "~1.0.5"
-
-sauce-connect-launcher@^1.2.4:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/sauce-connect-launcher/-/sauce-connect-launcher-1.2.7.tgz#c7f8b3d4eb354d07a9922b4cd67356f527192556"
-  integrity sha512-v07+QhFrxgz3seMFuRSonu3gW1s6DbcLQlFhjsRrmKUauzPbbudHdnn91WYgEwhoZVdPNzeZpAEJwcQyd9xnTA==
-  dependencies:
-    adm-zip "~0.4.3"
-    async "^2.1.2"
-    https-proxy-agent "^2.2.1"
-    lodash "^4.16.6"
-    rimraf "^2.5.4"
-
-saucelabs@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.5.0.tgz#9405a73c360d449b232839919a86c396d379fd9d"
-  integrity sha512-jlX3FGdWvYf4Q3LFfFWS1QvPg3IGCGWxIc8QBFdPTbpTJnt/v17FHXYVAn7C8sHf1yUXo2c7yIM0isDryfYtHQ==
-  dependencies:
-    https-proxy-agent "^2.2.1"
-
-sax@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
-  integrity sha1-e45lYZCyKOgaZq6nSEgNgozS03o=
-
-sax@>=0.6.0, sax@^1.2.1, sax@^1.2.4, sax@~1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
-  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
-
-saxes@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.0.tgz#b7d30284d7583a5ca6ad0248b56d8889da53788b"
-  integrity sha512-LXTZygxhf8lfwKaTP/8N9CsVdjTlea3teze4lL6u37ivbgGbV0GGMuNtS/I9rnD/HC2/txUM7Df4S2LVl1qhiA==
-  dependencies:
-    xmlchars "^2.2.0"
-
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-selenium-webdriver@^4.0.0-alpha.1:
-  version "4.0.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.5.tgz#e4683b3dbf827d70df09a7e43bf02ebad20fa7c1"
-  integrity sha512-hktl3DSrhzM59yLhWzDGHIX9o56DvA+cVK7Dw6FcJR6qQ4CGzkaHeXQPcdrslkWMTeq0Ci9AmCxq0EMOvm2Rkg==
-  dependencies:
-    jszip "^3.1.5"
-    rimraf "^2.6.3"
-    tmp "0.0.30"
-    xml2js "^0.4.19"
-
-semver-compare@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
-  integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
-
-semver-diff@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
-  integrity sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=
-  dependencies:
-    semver "^5.0.3"
-
-semver-greatest-satisfied-range@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/semver-greatest-satisfied-range/-/semver-greatest-satisfied-range-1.1.0.tgz#13e8c2658ab9691cb0cd71093240280d36f77a5b"
-  integrity sha1-E+jCZYq5aRywzXEJMkAoDTb3els=
-  dependencies:
-    sver-compat "^1.5.0"
-
-semver-stable@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/semver-stable/-/semver-stable-3.0.0.tgz#6e783a40ea6483ac0aa4ee05ddeb272f451f01ac"
-  integrity sha512-lolq9k0lqdnZ0C4+QJvrPBWiAHGhLaVSMTPJajn527ptOHAcZnEhj0n2r6ALnryNiRKPO9AIO9iBI3ZSheHCaw==
-  dependencies:
-    semver "^6.3.0"
-
-semver-utils@1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/semver-utils/-/semver-utils-1.1.4.tgz#cf0405e669a57488913909fc1c3f29bf2a4871e2"
-  integrity sha512-EjnoLE5OGmDAVV/8YDoN5KiajNadjzIp9BAHOhYeQHt7j0UWxjmgsx4YD48wp4Ue1Qogq38F1GNUJNqF1kKKxA==
-
-"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.1:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
-semver@5.5.1:
-  version "5.5.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477"
-  integrity sha512-PqpAxfrEhlSUWge8dwIp4tZnQ25DIOthpiaHNIthsjEFQD6EvqUKUDM7L8O2rShkFccYo1VjJR0coWfNkCubRw==
-
-semver@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
-  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
-
-semver@7.3.2, semver@^7.1.2, semver@^7.2.1, semver@^7.3.2:
-  version "7.3.2"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
-  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
-
-semver@^6.0.0, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-
-semver@~4.3.3:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
-  integrity sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=
-
-send@0.13.2:
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.13.2.tgz#765e7607c8055452bba6f0b052595350986036de"
-  integrity sha1-dl52B8gFVFK7pvCwUllTUJhgNt4=
-  dependencies:
-    debug "~2.2.0"
-    depd "~1.1.0"
-    destroy "~1.0.4"
-    escape-html "~1.0.3"
-    etag "~1.7.0"
-    fresh "0.3.0"
-    http-errors "~1.3.1"
-    mime "1.3.4"
-    ms "0.7.1"
-    on-finished "~2.3.0"
-    range-parser "~1.0.3"
-    statuses "~1.2.1"
-
-send@0.17.1:
-  version "0.17.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
-  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
-  dependencies:
-    debug "2.6.9"
-    depd "~1.1.2"
-    destroy "~1.0.4"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "~1.7.2"
-    mime "1.6.0"
-    ms "2.1.1"
-    on-finished "~2.3.0"
-    range-parser "~1.2.1"
-    statuses "~1.5.0"
-
-send@^0.16.2:
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
-  integrity sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==
-  dependencies:
-    debug "2.6.9"
-    depd "~1.1.2"
-    destroy "~1.0.4"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "~1.6.2"
-    mime "1.4.1"
-    ms "2.0.0"
-    on-finished "~2.3.0"
-    range-parser "~1.2.0"
-    statuses "~1.4.0"
-
-serialize-error@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-2.1.0.tgz#50b679d5635cdf84667bdc8e59af4e5b81d5f60a"
-  integrity sha1-ULZ51WNc34Rme9yOWa9OW4HV9go=
-
-serialize-error@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-5.0.0.tgz#a7ebbcdb03a5d71a6ed8461ffe0fc1a1afed62ac"
-  integrity sha512-/VtpuyzYf82mHYTtI4QKtwHa79vAdU5OQpNPAmE/0UDdlGT0ZxHwC+J6gXkw29wwoVI8fMPsfcVHOwXtUQYYQA==
-  dependencies:
-    type-fest "^0.8.0"
-
-serialize-javascript@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.0.0.tgz#492e489a2d77b7b804ad391a5f5d97870952548e"
-  integrity sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw==
-
-serve-favicon@~2.3.0:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/serve-favicon/-/serve-favicon-2.3.2.tgz#dd419e268de012ab72b319d337f2105013f9381f"
-  integrity sha1-3UGeJo3gEqtysxnTN/IQUBP5OB8=
-  dependencies:
-    etag "~1.7.0"
-    fresh "0.3.0"
-    ms "0.7.2"
-    parseurl "~1.3.1"
-
-serve-index@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
-  integrity sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=
-  dependencies:
-    accepts "~1.3.4"
-    batch "0.6.1"
-    debug "2.6.9"
-    escape-html "~1.0.3"
-    http-errors "~1.6.2"
-    mime-types "~2.1.17"
-    parseurl "~1.3.2"
-
-serve-index@~1.7.2:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.7.3.tgz#7a057fc6ee28dc63f64566e5fa57b111a86aecd2"
-  integrity sha1-egV/xu4o3GP2RWbl+lexEahq7NI=
-  dependencies:
-    accepts "~1.2.13"
-    batch "0.5.3"
-    debug "~2.2.0"
-    escape-html "~1.0.3"
-    http-errors "~1.3.1"
-    mime-types "~2.1.9"
-    parseurl "~1.3.1"
-
-serve-static@1.14.1, serve-static@^1.13.2:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
-  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
-  dependencies:
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    parseurl "~1.3.3"
-    send "0.17.1"
-
-serve-static@~1.10.0:
-  version "1.10.3"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.10.3.tgz#ce5a6ecd3101fed5ec09827dac22a9c29bfb0535"
-  integrity sha1-zlpuzTEB/tXsCYJ9rCKpwpv7BTU=
-  dependencies:
-    escape-html "~1.0.3"
-    parseurl "~1.3.1"
-    send "0.13.2"
-
-set-blocking@^2.0.0, set-blocking@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
-
-set-immediate-shim@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
-  integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
-
-set-value@^2.0.0, set-value@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
-  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-extendable "^0.1.1"
-    is-plain-object "^2.0.3"
-    split-string "^3.0.1"
-
-setimmediate@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
-
-setprototypeof@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
-  integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
-
-setprototypeof@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
-  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
-
-sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
-  version "2.4.11"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
-  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-shasum@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/shasum/-/shasum-1.0.2.tgz#e7012310d8f417f4deb5712150e5678b87ae565f"
-  integrity sha1-5wEjENj0F/TetXEhUOVni4euVl8=
-  dependencies:
-    json-stable-stringify "~0.0.0"
-    sha.js "~2.4.4"
-
-shebang-command@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
-  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
-  dependencies:
-    shebang-regex "^1.0.0"
-
-shebang-command@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
-  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
-  dependencies:
-    shebang-regex "^3.0.0"
-
-shebang-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
-  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
-
-shebang-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
-  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
-
-shell-quote@^1.4.2, shell-quote@^1.6.1:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
-  integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
-
-shellwords@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
-  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
-
-shlex@2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/shlex/-/shlex-2.0.2.tgz#debf51a145f1df9e7cb7cce04340ccb45120092d"
-  integrity sha512-i4p9nNXgBTILspHwZlBCNsZzwuVWW8SFx5dyIONrjL0R+AbMOPbg7ndqgGfjYivkYRTtZMKqIT8HT+QyOhPQWA==
-
-shortid@2.2.15:
-  version "2.2.15"
-  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
-  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
-  dependencies:
-    nanoid "^2.1.0"
-
-side-channel@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
-  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
-  dependencies:
-    es-abstract "^1.17.0-next.1"
-    object-inspect "^1.7.0"
-
-signal-exit@^3.0.0, signal-exit@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
-  integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
-
-simple-concat@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.0.tgz#7344cbb8b6e26fb27d66b2fc86f9f6d5997521c6"
-  integrity sha1-c0TLuLbib7J9ZrL8hvn21Zl1IcY=
-
-simple-git@1.132.0:
-  version "1.132.0"
-  resolved "https://registry.yarnpkg.com/simple-git/-/simple-git-1.132.0.tgz#53ac4c5ec9e74e37c2fd461e23309f22fcdf09b1"
-  integrity sha512-xauHm1YqCTom1sC9eOjfq3/9RKiUA9iPnxBbrY2DdL8l4ADMu0jjM5l5lphQP5YWNqAL2aXC/OeuQ76vHtW5fg==
-  dependencies:
-    debug "^4.0.1"
-
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
-  dependencies:
-    is-arrayish "^0.3.1"
-
-sinon-chai@3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/sinon-chai/-/sinon-chai-3.5.0.tgz#c9a78304b0e15befe57ef68e8a85a00553f5c60e"
-  integrity sha512-IifbusYiQBpUxxFJkR3wTU68xzBN0+bxCScEaKMjBvAQERg6FnTTc1F17rseLb1tjmkJ23730AXpFI0c47FgAg==
-
-sinon@9.0.2:
-  version "9.0.2"
-  resolved "https://registry.yarnpkg.com/sinon/-/sinon-9.0.2.tgz#b9017e24633f4b1c98dfb6e784a5f0509f5fd85d"
-  integrity sha512-0uF8Q/QHkizNUmbK3LRFqx5cpTttEVXudywY9Uwzy8bTfZUhljZ7ARzSxnRHWYWtVTeh4Cw+tTb3iU21FQVO9A==
-  dependencies:
-    "@sinonjs/commons" "^1.7.2"
-    "@sinonjs/fake-timers" "^6.0.1"
-    "@sinonjs/formatio" "^5.0.1"
-    "@sinonjs/samsam" "^5.0.3"
-    diff "^4.0.2"
-    nise "^4.0.1"
-    supports-color "^7.1.0"
-
-sisteransi@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.3.tgz#98168d62b79e3a5e758e27ae63c4a053d748f4eb"
-  integrity sha512-SbEG75TzH8G7eVXFSN5f9EExILKfly7SUvVY5DhhYLvfhKqhDFY0OzevWa/zwak0RLRfWS5AvfMWpd9gJvr5Yg==
-
-slash@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
-  integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
-
-slash@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
-  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
-
-slash@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
-  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
-
-sleep-promise@8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/sleep-promise/-/sleep-promise-8.0.1.tgz#8d795a27ea23953df6b52b91081e5e22665993c5"
-  integrity sha1-jXlaJ+ojlT32tSuRCB5eImZZk8U=
-
-slice-ansi@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
-  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
-  dependencies:
-    ansi-styles "^3.2.0"
-    astral-regex "^1.0.0"
-    is-fullwidth-code-point "^2.0.0"
-
-slugify@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.4.0.tgz#c9557c653c54b0c7f7a8e786ef3431add676d2cb"
-  integrity sha512-FtLNsMGBSRB/0JOE2A0fxlqjI6fJsgHGS13iTuVT28kViI4JjUiNqp/vyis0ZXYcMnpR3fzGNkv+6vRlI2GwdQ==
-
-snapdragon-node@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
-  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
-  dependencies:
-    define-property "^1.0.0"
-    isobject "^3.0.0"
-    snapdragon-util "^3.0.1"
-
-snapdragon-util@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
-  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
-  dependencies:
-    kind-of "^3.2.0"
-
-snapdragon@^0.8.1:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
-  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
-  dependencies:
-    base "^0.11.1"
-    debug "^2.2.0"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    map-cache "^0.2.2"
-    source-map "^0.5.6"
-    source-map-resolve "^0.5.0"
-    use "^3.1.0"
-
-socket.io-adapter@~1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz#2a805e8a14d6372124dd9159ad4502f8cb07f06b"
-  integrity sha1-KoBeihTWNyEk3ZFZrUUC+MsH8Gs=
-
-socket.io-client@0.9.16:
-  version "0.9.16"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-0.9.16.tgz#4da7515c5e773041d1b423970415bcc430f35fc6"
-  integrity sha1-TadRXF53MEHRtCOXBBW8xDDzX8Y=
-  dependencies:
-    active-x-obfuscator "0.0.1"
-    uglify-js "1.2.5"
-    ws "0.4.x"
-    xmlhttprequest "1.4.2"
-
-socket.io-client@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.3.0.tgz#14d5ba2e00b9bcd145ae443ab96b3f86cbcc1bb4"
-  integrity sha512-cEQQf24gET3rfhxZ2jJ5xzAOo/xhZwK+mOqtGRg5IowZsMgwvHwnf/mCRapAAkadhM26y+iydgwsXGObBB5ZdA==
-  dependencies:
-    backo2 "1.0.2"
-    base64-arraybuffer "0.1.5"
-    component-bind "1.0.0"
-    component-emitter "1.2.1"
-    debug "~4.1.0"
-    engine.io-client "~3.4.0"
-    has-binary2 "~1.0.2"
-    has-cors "1.1.0"
-    indexof "0.0.1"
-    object-component "0.0.3"
-    parseqs "0.0.5"
-    parseuri "0.0.5"
-    socket.io-parser "~3.3.0"
-    to-array "0.1.4"
-
-socket.io-parser@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.3.0.tgz#2b52a96a509fdf31440ba40fed6094c7d4f1262f"
-  integrity sha512-hczmV6bDgdaEbVqhAeVMM/jfUfzuEZHsQg6eOmLgJht6G3mPKMxYm75w2+qhAQZ+4X+1+ATZ+QFKeOZD5riHng==
-  dependencies:
-    component-emitter "1.2.1"
-    debug "~3.1.0"
-    isarray "2.0.1"
-
-socket.io-parser@~3.4.0:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.4.1.tgz#b06af838302975837eab2dc980037da24054d64a"
-  integrity sha512-11hMgzL+WCLWf1uFtHSNvliI++tcRUWdoeYuwIl+Axvwy9z2gQM+7nJyN3STj1tLj5JyIUH8/gpDGxzAlDdi0A==
-  dependencies:
-    component-emitter "1.2.1"
-    debug "~4.1.0"
-    isarray "2.0.1"
-
-socket.io@0.9.16:
-  version "0.9.16"
-  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-0.9.16.tgz#3bab0444e49b55fbbc157424dbd41aa375a51a76"
-  integrity sha1-O6sEROSbVfu8FXQk29Qao3WlGnY=
-  dependencies:
-    base64id "0.1.0"
-    policyfile "0.0.4"
-    socket.io-client "0.9.16"
-  optionalDependencies:
-    redis "0.7.3"
-
-socket.io@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-2.3.0.tgz#cd762ed6a4faeca59bc1f3e243c0969311eb73fb"
-  integrity sha512-2A892lrj0GcgR/9Qk81EaY2gYhCBxurV0PfmmESO6p27QPrUK1J3zdns+5QPqvUYK2q657nSj0guoIil9+7eFg==
-  dependencies:
-    debug "~4.1.0"
-    engine.io "~3.4.0"
-    has-binary2 "~1.0.2"
-    socket.io-adapter "~1.1.0"
-    socket.io-client "2.3.0"
-    socket.io-parser "~3.4.0"
-
-source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
-  integrity sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==
-  dependencies:
-    atob "^2.1.1"
-    decode-uri-component "^0.2.0"
-    resolve-url "^0.2.1"
-    source-map-url "^0.4.0"
-    urix "^0.1.0"
-
-source-map-support@^0.5.13, source-map-support@^0.5.5, source-map-support@^0.5.6, source-map-support@~0.5.10, source-map-support@~0.5.12:
-  version "0.5.13"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
-  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
-source-map-url@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
-  integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
-
-source-map@^0.1.39, source-map@~0.1.33:
-  version "0.1.43"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
-  integrity sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=
-  dependencies:
-    amdefine ">=0.0.4"
-
-source-map@^0.4.2:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
-  integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
-  dependencies:
-    amdefine ">=0.0.4"
-
-source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.6, source-map@~0.5.3:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
-  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
-
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-source-map@^0.7.3:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
-  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-
-source-map@~0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
-  integrity sha1-2rc/vPwrqBm03gO9b26qSBZLP50=
-  dependencies:
-    amdefine ">=0.0.4"
-
-sourcemap-codec@1.4.8:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
-  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
-
-sparkles@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.1.tgz#008db65edce6c50eec0c5e228e1945061dd0437c"
-  integrity sha512-dSO0DDYUahUt/0/pD/Is3VIm5TGJjludZ0HVymmhYF6eNA53PVLhnUk0znSYbH8IYBuJdCE+1luR22jNLMaQdw==
-
-spdx-correct@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
-  integrity sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==
-  dependencies:
-    spdx-expression-parse "^3.0.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-exceptions@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz#2ea450aee74f2a89bfb94519c07fcd6f41322977"
-  integrity sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==
-
-spdx-expression-parse@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
-  integrity sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==
-  dependencies:
-    spdx-exceptions "^2.1.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-license-ids@^3.0.0:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654"
-  integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==
-
-split-string@^3.0.1, split-string@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
-  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
-  dependencies:
-    extend-shallow "^3.0.0"
-
-split2@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/split2/-/split2-2.2.0.tgz#186b2575bcf83e85b7d18465756238ee4ee42493"
-  integrity sha512-RAb22TG39LhI31MbreBgIuKiIKhVsawfTgEGqKHTK87aG+ul/PB8Sqoi3I7kVdRWiCfrKxK3uo4/YUkpNvhPbw==
-  dependencies:
-    through2 "^2.0.2"
-
-split@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
-  integrity sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==
-  dependencies:
-    through "2"
-
-sprintf-js@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.2.tgz#da1765262bf8c0f571749f2ad6c26300207ae673"
-  integrity sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==
-
-sprintf-js@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
-  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
-
-sshpk@^1.7.0:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
-  integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
-  dependencies:
-    asn1 "~0.2.3"
-    assert-plus "^1.0.0"
-    bcrypt-pbkdf "^1.0.0"
-    dashdash "^1.12.0"
-    ecc-jsbn "~0.1.1"
-    getpass "^0.1.1"
-    jsbn "~0.1.0"
-    safer-buffer "^2.0.2"
-    tweetnacl "~0.14.0"
-
-ssri@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.0.tgz#79ca74e21f8ceaeddfcb4b90143c458b8d988808"
-  integrity sha512-aq/pz989nxVYwn16Tsbj1TqFpD5LLrQxHf5zaHuieFV+R0Bbr4y8qUsOA45hXT/N4/9UNXTarBjnjVmjSOVaAA==
-  dependencies:
-    minipass "^3.1.1"
-
-stable@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
-  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
-
-stack-trace@0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
-  integrity sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=
-
-stack-utils@^1.0.1, stack-utils@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
-  integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
-
-stack-utils@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.2.tgz#5cf48b4557becb4638d0bc4f21d23f5d19586593"
-  integrity sha512-0H7QK2ECz3fyZMzQ8rH0j2ykpfbnd20BFtfg/SqVC2+sCTtcw0aDTGB7dk+de4U4uUeuz6nOtJcrkFFLG1B0Rg==
-  dependencies:
-    escape-string-regexp "^2.0.0"
-
-state-toggle@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
-  integrity sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==
-
-static-extend@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
-  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
-  dependencies:
-    define-property "^0.2.5"
-    object-copy "^0.1.0"
-
-statuses@1, "statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
-  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
-
-statuses@~1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.2.1.tgz#dded45cc18256d51ed40aec142489d5c61026d28"
-  integrity sha1-3e1FzBglbVHtQK7BQkidXGECbSg=
-
-statuses@~1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
-  integrity sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==
-
-stealthy-require@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
-  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
-
-stream-browserify@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
-  integrity sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==
-  dependencies:
-    inherits "~2.0.1"
-    readable-stream "^2.0.2"
-
-stream-combiner2@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/stream-combiner2/-/stream-combiner2-1.1.1.tgz#fb4d8a1420ea362764e21ad4780397bebcb41cbe"
-  integrity sha1-+02KFCDqNidk4hrUeAOXvry0HL4=
-  dependencies:
-    duplexer2 "~0.1.0"
-    readable-stream "^2.0.2"
-
-stream-combiner@*, stream-combiner@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/stream-combiner/-/stream-combiner-0.2.2.tgz#aec8cbac177b56b6f4fa479ced8c1912cee52858"
-  integrity sha1-rsjLrBd7Vrb0+kec7YwZEs7lKFg=
-  dependencies:
-    duplexer "~0.1.1"
-    through "~2.3.4"
-
-stream-counter@~0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/stream-counter/-/stream-counter-0.2.0.tgz#ded266556319c8b0e222812b9cf3b26fa7d947de"
-  integrity sha1-3tJmVWMZyLDiIoErnPOyb6fZR94=
-  dependencies:
-    readable-stream "~1.1.8"
-
-stream-events@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/stream-events/-/stream-events-1.0.5.tgz#bbc898ec4df33a4902d892333d47da9bf1c406d5"
-  integrity sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==
-  dependencies:
-    stubs "^3.0.0"
-
-stream-exhaust@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/stream-exhaust/-/stream-exhaust-1.0.2.tgz#acdac8da59ef2bc1e17a2c0ccf6c320d120e555d"
-  integrity sha512-b/qaq/GlBK5xaq1yrK9/zFcyRSTNxmcZwFLGSTG0mXgZl/4Z6GgiyYOXOvY7N3eEvFRAG1bkDRz5EPGSvPYQlw==
-
-stream-http@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-3.1.0.tgz#22fb33fe9b4056b4eccf58bd8f400c4b993ffe57"
-  integrity sha512-cuB6RgO7BqC4FBYzmnvhob5Do3wIdIsXAgGycHJnW+981gHqoYcYz9lqjJrk8WXRddbwPuqPYRl+bag6mYv4lw==
-  dependencies:
-    builtin-status-codes "^3.0.0"
-    inherits "^2.0.1"
-    readable-stream "^3.0.6"
-    xtend "^4.0.0"
-
-stream-shift@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
-  integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
-
-stream-splicer@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/stream-splicer/-/stream-splicer-2.0.1.tgz#0b13b7ee2b5ac7e0609a7463d83899589a363fcd"
-  integrity sha512-Xizh4/NPuYSyAXyT7g8IvdJ9HJpxIGL9PjyhtywCZvvP0OPIdqyrr4dMikeuvY8xahpdKEBlBTySe583totajg==
-  dependencies:
-    inherits "^2.0.1"
-    readable-stream "^2.0.2"
-
-streamroller@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/streamroller/-/streamroller-2.2.4.tgz#c198ced42db94086a6193608187ce80a5f2b0e53"
-  integrity sha512-OG79qm3AujAM9ImoqgWEY1xG4HX+Lw+yY6qZj9R1K2mhF5bEmQ849wvrb+4vt4jLMLzwXttJlQbOdPOQVRv7DQ==
-  dependencies:
-    date-format "^2.1.0"
-    debug "^4.1.1"
-    fs-extra "^8.1.0"
-
-streamsearch@0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-0.1.2.tgz#808b9d0e56fc273d809ba57338e929919a1a9f1a"
-  integrity sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo=
-
-string-hash@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
-  integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
-
-string-length@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
-  integrity sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=
-  dependencies:
-    astral-regex "^1.0.0"
-    strip-ansi "^4.0.0"
-
-string-length@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.1.tgz#4a973bf31ef77c4edbceadd6af2611996985f8a1"
-  integrity sha512-PKyXUd0LK0ePjSOnWn34V2uD6acUWev9uy0Ft05k0E8xRW+SKcA0F7eMr7h5xlzfn+4O3N+55rduYyet3Jk+jw==
-  dependencies:
-    char-regex "^1.0.2"
-    strip-ansi "^6.0.0"
-
-string-template@~0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
-  integrity sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=
-
-string-width@^1.0.1, string-width@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
-  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
-  dependencies:
-    code-point-at "^1.0.0"
-    is-fullwidth-code-point "^1.0.0"
-    strip-ansi "^3.0.0"
-
-"string-width@^1.0.2 || 2", string-width@^2.1.0, string-width@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
-  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
-  dependencies:
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^4.0.0"
-
-string-width@^3.0.0, string-width@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
-  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
-string-width@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.1.0.tgz#ba846d1daa97c3c596155308063e075ed1c99aff"
-  integrity sha512-NrX+1dVVh+6Y9dnQ19pR0pP4FiEIlUvdTGn8pw6CKTNq5sgib2nIhmUNT5TAmhWmvKr3WcxBcP3E8nWezuipuQ==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^5.2.0"
-
-string-width@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
-  integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.0"
-
-string.prototype.matchall@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz#48bb510326fb9fdeb6a33ceaa81a6ea04ef7648e"
-  integrity sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0"
-    has-symbols "^1.0.1"
-    internal-slot "^1.0.2"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.2"
-
-string.prototype.trim@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.1.tgz#141233dff32c82bfad80684d7e5f0869ee0fb782"
-  integrity sha512-MjGFEeqixw47dAMFMtgUro/I0+wNqZB5GKXGt1fFr24u3TzDXCPu7J9Buppzoe3r/LqkSDLDDJzE15RGWDGAVw==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-
-string.prototype.trimleft@^2.1.0, string.prototype.trimleft@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74"
-  integrity sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==
-  dependencies:
-    define-properties "^1.1.3"
-    function-bind "^1.1.1"
-
-string.prototype.trimright@^2.1.0, string.prototype.trimright@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz#440314b15996c866ce8a0341894d45186200c5d9"
-  integrity sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==
-  dependencies:
-    define-properties "^1.1.3"
-    function-bind "^1.1.1"
-
-string_decoder@0.10, string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
-  integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
-
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
-stringify-entities@^1.0.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-1.3.2.tgz#a98417e5471fd227b3e45d3db1861c11caf668f7"
-  integrity sha512-nrBAQClJAPN2p+uGCVJRPIPakKeKWZ9GtBCmormE7pWOSlHat7+x5A8gx85M7HM5Dt0BP3pP5RhVW77WdbJJ3A==
-  dependencies:
-    character-entities-html4 "^1.0.0"
-    character-entities-legacy "^1.0.0"
-    is-alphanumerical "^1.0.0"
-    is-hexadecimal "^1.0.0"
-
-strip-ansi@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.3.0.tgz#25f48ea22ca79187f3174a4db8759347bb126220"
-  integrity sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=
-  dependencies:
-    ansi-regex "^0.2.1"
-
-strip-ansi@^3.0.0, strip-ansi@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
-  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
-  dependencies:
-    ansi-regex "^2.0.0"
-
-strip-ansi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
-  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
-  dependencies:
-    ansi-regex "^3.0.0"
-
-strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
-
-strip-ansi@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
-  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
-  dependencies:
-    ansi-regex "^5.0.0"
-
-strip-ansi@~0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.1.1.tgz#39e8a98d044d150660abe4a6808acf70bb7bc991"
-  integrity sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE=
-
-strip-bom-buf@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom-buf/-/strip-bom-buf-2.0.0.tgz#ff9c223937f8e7154b77e9de9bde094186885c15"
-  integrity sha512-gLFNHucd6gzb8jMsl5QmZ3QgnUJmp7qn4uUSHNwEXumAp7YizoGYw19ZUVfuq4aBOQUtyn2k8X/CwzWB73W2lQ==
-  dependencies:
-    is-utf8 "^0.2.1"
-
-strip-bom-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom-stream/-/strip-bom-stream-2.0.0.tgz#f87db5ef2613f6968aa545abfe1ec728b6a829ca"
-  integrity sha1-+H217yYT9paKpUWr/h7HKLaoKco=
-  dependencies:
-    first-chunk-stream "^2.0.0"
-    strip-bom "^2.0.0"
-
-strip-bom-string@1.X:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
-  integrity sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=
-
-strip-bom@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
-  integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=
-  dependencies:
-    is-utf8 "^0.2.0"
-
-strip-bom@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
-  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
-
-strip-bom@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
-  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
-
-strip-eof@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
-  integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
-
-strip-final-newline@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
-  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
-
-strip-indent@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
-  integrity sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=
-  dependencies:
-    get-stdin "^4.0.1"
-
-strip-indent@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
-  integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
-
-strip-indent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
-  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
-  dependencies:
-    min-indent "^1.0.0"
-
-strip-json-comments@3.0.1, strip-json-comments@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
-  integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
-
-strip-json-comments@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.0.tgz#7638d31422129ecf4457440009fba03f9f9ac180"
-  integrity sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==
-
-strip-json-comments@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
-  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
-
-stubs@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/stubs/-/stubs-3.0.0.tgz#e8d2ba1fa9c90570303c030b6900f7d5f89abe5b"
-  integrity sha1-6NK6H6nJBXAwPAMLaQD31fiavls=
-
-stylehacks@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
-  integrity sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==
-  dependencies:
-    browserslist "^4.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-
-subarg@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
-  integrity sha1-9izxdYHplrSPyWVpn1TAauJouNI=
-  dependencies:
-    minimist "^1.1.0"
-
-supertap@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/supertap/-/supertap-1.0.0.tgz#bd9751c7fafd68c68cf8222a29892206a119fa9e"
-  integrity sha512-HZJ3geIMPgVwKk2VsmO5YHqnnJYl6bV5A9JW2uzqV43WmpgliNEYbuvukfor7URpaqpxuw3CfZ3ONdVbZjCgIA==
-  dependencies:
-    arrify "^1.0.1"
-    indent-string "^3.2.0"
-    js-yaml "^3.10.0"
-    serialize-error "^2.1.0"
-    strip-ansi "^4.0.0"
-
-supports-color@7.1.0, supports-color@^7.0.0, supports-color@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
-  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
-  dependencies:
-    has-flag "^4.0.0"
-
-supports-color@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-0.2.0.tgz#d92de2694eb3f67323973d7ae3d8b55b4c22190a"
-  integrity sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=
-
-supports-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
-  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
-
-supports-color@^3.1.0:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
-  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
-  dependencies:
-    has-flag "^1.0.0"
-
-supports-color@^5.3.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
-supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
-  dependencies:
-    has-flag "^3.0.0"
-
-supports-hyperlinks@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.1.0.tgz#f663df252af5f37c5d49bbd7eeefa9e0b9e59e47"
-  integrity sha512-zoE5/e+dnEijk6ASB6/qrK+oYdm2do1hjoLWrqUC/8WEIW1gbxFcKuBof7sW8ArN6e+AYvsE8HBGiVRWL/F5CA==
-  dependencies:
-    has-flag "^4.0.0"
-    supports-color "^7.0.0"
-
-sver-compat@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/sver-compat/-/sver-compat-1.5.0.tgz#3cf87dfeb4d07b4a3f14827bc186b3fd0c645cd8"
-  integrity sha1-PPh9/rTQe0o/FIJ7wYaz/QxkXNg=
-  dependencies:
-    es6-iterator "^2.0.1"
-    es6-symbol "^3.1.1"
-
-svgo@^1.0.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
-  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
-  dependencies:
-    chalk "^2.4.1"
-    coa "^2.0.2"
-    css-select "^2.0.0"
-    css-select-base-adapter "^0.1.1"
-    css-tree "1.0.0-alpha.37"
-    csso "^4.0.2"
-    js-yaml "^3.13.1"
-    mkdirp "~0.5.1"
-    object.values "^1.1.0"
-    sax "~1.2.4"
-    stable "^0.1.8"
-    unquote "~1.1.1"
-    util.promisify "~1.0.0"
-
-symbol-observable@^1.0.4:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
-  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
-
-symbol-tree@^3.2.2, symbol-tree@^3.2.4:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
-  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
-
-syntax-error@^1.1.1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/syntax-error/-/syntax-error-1.4.0.tgz#2d9d4ff5c064acb711594a3e3b95054ad51d907c"
-  integrity sha512-YPPlu67mdnHGTup2A8ff7BC2Pjq0e0Yp/IyTFN03zWO0RcK07uLcbi7C2KpGR2FvWbaB0+bfE27a+sBKebSo7w==
-  dependencies:
-    acorn-node "^1.2.0"
-
-table@^5.2.3:
-  version "5.4.6"
-  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
-  integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
-  dependencies:
-    ajv "^6.10.2"
-    lodash "^4.17.14"
-    slice-ansi "^2.1.0"
-    string-width "^3.0.0"
-
-tar@^4, tar@^4.4.12:
-  version "4.4.13"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
-  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
-  dependencies:
-    chownr "^1.1.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.8.6"
-    minizlib "^1.2.1"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.3"
-
-tar@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.2.tgz#5df17813468a6264ff14f766886c622b84ae2f39"
-  integrity sha512-Glo3jkRtPcvpDlAs/0+hozav78yoXKFr+c4wgw62NNMO3oo4AaJdCo21Uu7lcwr55h39W2XD1LMERc64wtbItg==
-  dependencies:
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    minipass "^3.0.0"
-    minizlib "^2.1.0"
-    mkdirp "^1.0.3"
-    yallist "^4.0.0"
-
-tcp-port-used@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/tcp-port-used/-/tcp-port-used-1.0.1.tgz#46061078e2d38c73979a2c2c12b5a674e6689d70"
-  integrity sha512-rwi5xJeU6utXoEIiMvVBMc9eJ2/ofzB+7nLOdnZuFTmNCLqRiQh2sMG9MqCxHU/69VC/Fwp5dV9306Qd54ll1Q==
-  dependencies:
-    debug "4.1.0"
-    is2 "2.0.1"
-
-teeny-request@6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/teeny-request/-/teeny-request-6.0.1.tgz#9b1f512cef152945827ba7e34f62523a4ce2c5b0"
-  integrity sha512-TAK0c9a00ELOqLrZ49cFxvPVogMUFaWY8dUsQc/0CuQPGF+BOxOQzXfE413BAk2kLomwNplvdtMpeaeGWmoc2g==
-  dependencies:
-    http-proxy-agent "^4.0.0"
-    https-proxy-agent "^4.0.0"
-    node-fetch "^2.2.0"
-    stream-events "^1.0.5"
-    uuid "^3.3.2"
-
-temp-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
-  integrity sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==
-
-tempy@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.5.0.tgz#2785c89df39fcc4d1714fc554813225e1581d70b"
-  integrity sha512-VEY96x7gbIRfsxqsafy2l5yVxxp3PhwAGoWMyC2D2Zt5DmEv+2tGiPOrquNRpf21hhGnKLVEsuqleqiZmKG/qw==
-  dependencies:
-    is-stream "^2.0.0"
-    temp-dir "^2.0.0"
-    type-fest "^0.12.0"
-    unique-string "^2.0.0"
-
-term-size@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
-  integrity sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=
-  dependencies:
-    execa "^0.7.0"
-
-terminal-link@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
-  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    supports-hyperlinks "^2.0.0"
-
-ternary-stream@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ternary-stream/-/ternary-stream-2.1.1.tgz#4ad64b98668d796a085af2c493885a435a8a8bfc"
-  integrity sha512-j6ei9hxSoyGlqTmoMjOm+QNvUKDOIY6bNl4Uh1lhBvl6yjPW2iLqxDUYyfDPZknQ4KdRziFl+ec99iT4l7g0cw==
-  dependencies:
-    duplexify "^3.5.0"
-    fork-stream "^0.0.4"
-    merge-stream "^1.0.0"
-    through2 "^2.0.1"
-
-ternary-stream@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ternary-stream/-/ternary-stream-3.0.0.tgz#7951930ea9e823924d956f03d516151a2d516253"
-  integrity sha512-oIzdi+UL/JdktkT+7KU5tSIQjj8pbShj3OASuvDEhm0NT5lppsm7aXWAmAq4/QMaBIyfuEcNLbAQA+HpaISobQ==
-  dependencies:
-    duplexify "^4.1.1"
-    fork-stream "^0.0.4"
-    merge-stream "^2.0.0"
-    through2 "^3.0.1"
-
-terser@4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.7.0.tgz#15852cf1a08e3256a80428e865a2fa893ffba006"
-  integrity sha512-Lfb0RiZcjRDXCC3OSHJpEkxJ9Qeqs6mp2v4jf2MHfy8vGERmVDuvjXdd/EnP5Deme5F2yBRBymKmKHCBg2echw==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
-
-terser@^3.7.5:
-  version "3.17.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2"
-  integrity sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==
-  dependencies:
-    commander "^2.19.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.10"
-
-test-exclude@^5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0"
-  integrity sha512-M+oxtseCFO3EDtAaGH7iiej3CBkzXqFMbzqYAACdzKui4eZA+pq3tZEwChvOdNfa7xxy8BfbmgJSIr43cC/+2g==
-  dependencies:
-    glob "^7.1.3"
-    minimatch "^3.0.4"
-    read-pkg-up "^4.0.0"
-    require-main-filename "^2.0.0"
-
-test-exclude@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
-  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
-  dependencies:
-    "@istanbuljs/schema" "^0.1.2"
-    glob "^7.1.4"
-    minimatch "^3.0.4"
-
-text-table@0.2.0, text-table@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
-  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
-
-thenify-all@^1.0.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
-  integrity sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=
-  dependencies:
-    thenify ">= 3.1.0 < 4"
-
-"thenify@>= 3.1.0 < 4":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.0.tgz#e69e38a1babe969b0108207978b9f62b88604839"
-  integrity sha1-5p44obq+lpsBCCB5eLn2K4hgSDk=
-  dependencies:
-    any-promise "^1.0.0"
-
-throat@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
-  integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=
-
-throat@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
-  integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
-
-through2-concurrent@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/through2-concurrent/-/through2-concurrent-2.0.0.tgz#c9dd2c146504ec9962dbc86a5168b63d662669fa"
-  integrity sha512-R5/jLkfMvdmDD+seLwN7vB+mhbqzWop5fAjx5IX8/yQq7VhBhzDmhXgaHAOnhnWkCpRMM7gToYHycB0CS/pd+A==
-  dependencies:
-    through2 "^2.0.0"
-
-through2-filter@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/through2-filter/-/through2-filter-3.0.0.tgz#700e786df2367c2c88cd8aa5be4cf9c1e7831254"
-  integrity sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==
-  dependencies:
-    through2 "~2.0.0"
-    xtend "~4.0.0"
-
-through2@2.X, through2@^2.0.0, through2@^2.0.1, through2@^2.0.2, through2@^2.0.3, through2@~2.0.0:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
-  dependencies:
-    readable-stream "~2.3.6"
-    xtend "~4.0.1"
-
-through2@3.0.1, through2@^3.0.0, through2@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-3.0.1.tgz#39276e713c3302edf9e388dd9c812dd3b825bd5a"
-  integrity sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==
-  dependencies:
-    readable-stream "2 || 3"
-
-through2@^0.4.1:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-0.4.2.tgz#dbf5866031151ec8352bb6c4db64a2292a840b9b"
-  integrity sha1-2/WGYDEVHsg1K7bE22SiKSqEC5s=
-  dependencies:
-    readable-stream "~1.0.17"
-    xtend "~2.1.1"
-
-through2@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-0.5.1.tgz#dfdd012eb9c700e2323fd334f38ac622ab372da7"
-  integrity sha1-390BLrnHAOIyP9M084rGIqs3Lac=
-  dependencies:
-    readable-stream "~1.0.17"
-    xtend "~3.0.0"
-
-through2@^0.6.3, through2@~0.6.5:
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-0.6.5.tgz#41ab9c67b29d57209071410e1d7a7a968cd3ad48"
-  integrity sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=
-  dependencies:
-    readable-stream ">=1.0.33-1 <1.1.0-0"
-    xtend ">=4.0.0 <4.1.0-0"
-
-through@2, "through@>=2.2.7 <3", through@^2.3.6, through@^2.3.8, through@~2.3, through@~2.3.4:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
-
-time-stamp@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
-  integrity sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=
-
-time-zone@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/time-zone/-/time-zone-1.0.0.tgz#99c5bf55958966af6d06d83bdf3800dc82faec5d"
-  integrity sha1-mcW/VZWJZq9tBtg73zgA3IL67F0=
-
-timers-browserify@^1.0.1:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-1.4.2.tgz#c9c58b575be8407375cb5e2462dacee74359f41d"
-  integrity sha1-ycWLV1voQHN1y14kYtrO50NZ9B0=
-  dependencies:
-    process "~0.11.0"
-
-timers-ext@^0.1.5:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/timers-ext/-/timers-ext-0.1.7.tgz#6f57ad8578e07a3fb9f91d9387d65647555e25c6"
-  integrity sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==
-  dependencies:
-    es5-ext "~0.10.46"
-    next-tick "1"
-
-timsort@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
-  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
-
-tiny-lr@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/tiny-lr/-/tiny-lr-1.1.1.tgz#9fa547412f238fedb068ee295af8b682c98b2aab"
-  integrity sha512-44yhA3tsaRoMOjQQ+5v5mVdqef+kH6Qze9jTpqtVufgYjYt08zyZAwNwwVBj3i1rJMnR52IxOW0LK0vBzgAkuA==
-  dependencies:
-    body "^5.1.0"
-    debug "^3.1.0"
-    faye-websocket "~0.10.0"
-    livereload-js "^2.3.0"
-    object-assign "^4.1.0"
-    qs "^6.4.0"
-
-tinycolor@0.x:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/tinycolor/-/tinycolor-0.0.1.tgz#320b5a52d83abb5978d81a3e887d4aefb15a6164"
-  integrity sha1-MgtaUtg6u1l42Bo+iH1K77FaYWQ=
-
-tmp@0.0.30:
-  version "0.0.30"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"
-  integrity sha1-ckGdSovn1s51FI/YsyTlk6cRwu0=
-  dependencies:
-    os-tmpdir "~1.0.1"
-
-tmp@0.0.x, tmp@^0.0.33:
-  version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
-  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
-  dependencies:
-    os-tmpdir "~1.0.2"
-
-tmp@0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
-  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
-  dependencies:
-    rimraf "^3.0.0"
-
-tmpl@1.0.x:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
-  integrity sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=
-
-to-absolute-glob@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz#1865f43d9e74b0822db9f145b78cff7d0f7c849b"
-  integrity sha1-GGX0PZ50sIItufFFt4z/fQ98hJs=
-  dependencies:
-    is-absolute "^1.0.0"
-    is-negated-glob "^1.0.0"
-
-to-array@0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
-  integrity sha1-F+bBH3PdTz10zaek/zI46a2b+JA=
-
-to-fast-properties@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
-  integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
-
-to-fast-properties@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
-  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
-
-to-object-path@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
-  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
-  dependencies:
-    kind-of "^3.0.2"
-
-to-readable-stream@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/to-readable-stream/-/to-readable-stream-1.0.0.tgz#ce0aa0c2f3df6adf852efb404a783e77c0475771"
-  integrity sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==
-
-to-regex-range@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
-  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
-  dependencies:
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-
-to-regex-range@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
-  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
-  dependencies:
-    is-number "^7.0.0"
-
-to-regex@^3.0.1, to-regex@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
-  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
-  dependencies:
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    regex-not "^1.0.2"
-    safe-regex "^1.1.0"
-
-to-through@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/to-through/-/to-through-2.0.0.tgz#fc92adaba072647bc0b67d6b03664aa195093af6"
-  integrity sha1-/JKtq6ByZHvAtn1rA2ZKoZUJOvY=
-  dependencies:
-    through2 "^2.0.3"
-
-to-vfile@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/to-vfile/-/to-vfile-2.2.0.tgz#342d1705e6df526d569b1fc8bfa29f1f36d6c416"
-  integrity sha512-saGC8/lWdGrEoBMLUtgzhRHWAkQMP8gdldA3MOAUhBwTGEb1RSMVcflHGSx4ZJsdEZ9o1qDBCPp47LCPrbZWow==
-  dependencies:
-    is-buffer "^1.1.4"
-    vfile "^2.0.0"
-    x-is-function "^1.0.4"
-
-toidentifier@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
-  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
-
-toml@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/toml/-/toml-3.0.0.tgz#342160f1af1904ec9d204d03a5d61222d762c5ee"
-  integrity sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==
-
-topological-sort@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/topological-sort/-/topological-sort-0.3.0.tgz#3ca539982c71a13f0a7b3be2ad4ae4dd437a1e3b"
-  integrity sha512-BmO2t72jjJ3B9PZC3LTHyojgNynOKEvWG4GiYqyfSMUjtO6+yZK0oozlMYVA+tC6YvS3NZh4OPx6QaolEYOg6A==
-
-tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
-  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
-  dependencies:
-    psl "^1.1.28"
-    punycode "^2.1.1"
-
-tough-cookie@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2"
-  integrity sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==
-  dependencies:
-    ip-regex "^2.1.0"
-    psl "^1.1.28"
-    punycode "^2.1.1"
-
-tough-cookie@~2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
-  integrity sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==
-  dependencies:
-    psl "^1.1.24"
-    punycode "^1.4.1"
-
-tr46@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
-  integrity sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=
-  dependencies:
-    punycode "^2.1.0"
-
-tr46@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.0.tgz#a85da3f8511231357b347caa686abb3dfb150634"
-  integrity sha512-LrErSqfhdUw73AC/eXV2fEmNkvgSYxfm5lvxnLvuVgoVDknvD28Pa5FeDGc8RuVouDxUD3GnHHFv7xnBp7As5w==
-  dependencies:
-    punycode "^2.1.1"
-
-traverse@0.6.6:
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
-  integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=
-
-trim-newlines@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
-  integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
-
-trim-newlines@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
-  integrity sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA=
-
-trim-newlines@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.0.tgz#79726304a6a898aa8373427298d54c2ee8b1cb30"
-  integrity sha512-C4+gOpvmxaSMKuEf9Qc134F1ZuOHVXKRbtEflf4NTtuuJDEIJ9p5PXsalL8SkeRw+qit1Mo+yuvMPAKwWg/1hA==
-
-trim-off-newlines@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
-  integrity sha1-n5up2e+odkw4dpi8v+sshI8RrbM=
-
-trim-right@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
-  integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=
-
-trim-trailing-lines@^1.0.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.3.tgz#7f0739881ff76657b7776e10874128004b625a94"
-  integrity sha512-4ku0mmjXifQcTVfYDfR5lpgV7zVqPg6zV9rdZmwOPqq0+Zq19xDqEgagqVbc4pOOShbncuAOIs59R3+3gcF3ZA==
-
-trim@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
-  integrity sha1-WFhUf2spB1fulczMZm+1AITEYN0=
-
-trough@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
-  integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
-
-tsickle@0.38.1:
-  version "0.38.1"
-  resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.38.1.tgz#30762db759d40c435943093b6972c7f2efb384ef"
-  integrity sha512-4xZfvC6+etRu6ivKCNqMOd1FqcY/m6JY3Y+yr5+Xw+i751ciwrWINi6x/3l1ekcODH9GZhlf0ny2LpzWxnjWYA==
-
-tslib@^1.9.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
-  integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
-
-tsscmp@1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.5.tgz#7dc4a33af71581ab4337da91d85ca5427ebd9a97"
-  integrity sha1-fcSjOvcVgatDN9qR2FylQn69mpc=
-
-tty-browserify@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.1.tgz#3f05251ee17904dfd0677546670db9651682b811"
-  integrity sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==
-
-tunnel-agent@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
-  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
-  dependencies:
-    safe-buffer "^5.0.1"
-
-tunnel@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/tunnel/-/tunnel-0.0.6.tgz#72f1314b34a5b192db012324df2cc587ca47f92c"
-  integrity sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==
-
-tweetnacl@^0.14.3, tweetnacl@~0.14.0:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
-  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
-
-type-check@^0.4.0, type-check@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
-  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
-  dependencies:
-    prelude-ls "^1.2.1"
-
-type-check@~0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
-  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
-  dependencies:
-    prelude-ls "~1.1.2"
-
-type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.5, type-detect@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
-  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
-
-type-fest@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.12.0.tgz#f57a27ab81c68d136a51fd71467eff94157fa1ee"
-  integrity sha512-53RyidyjvkGpnWPMF9bQgFtWp+Sl8O2Rp13VavmJgfAP9WWG6q6TkrKU8iyJdnwnfgHI6k2hTlgqH4aSdjoTbg==
-
-type-fest@^0.13.1:
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
-  integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
-
-type-fest@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
-  integrity sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==
-
-type-fest@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.5.2.tgz#d6ef42a0356c6cd45f49485c3b6281fc148e48a2"
-  integrity sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw==
-
-type-fest@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
-  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
-
-type-fest@^0.8.0, type-fest@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
-  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
-
-type-is@^1.6.4, type-is@~1.6.17, type-is@~1.6.18, type-is@~1.6.6:
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
-  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
-  dependencies:
-    media-typer "0.3.0"
-    mime-types "~2.1.24"
-
-type@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
-  integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
-
-typed-rest-client@^1.7.3:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/typed-rest-client/-/typed-rest-client-1.7.3.tgz#1beb263b86b14d34596f6127c6172dd5fd652e7b"
-  integrity sha512-CwTpx/TkRHGZoHkJhBcp4X8K3/WtlzSHVQR0OIFnt10j4tgy4ypgq/SrrgVpA1s6tAL49Q6J3R5C0Cgfh2ddqA==
-  dependencies:
-    qs "^6.9.1"
-    tunnel "0.0.6"
-    underscore "1.8.3"
-
-typedarray-to-buffer@^3.1.5:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
-  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
-  dependencies:
-    is-typedarray "^1.0.0"
-
-typedarray@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
-  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
-
-typescript@3.9.5:
-  version "3.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36"
-  integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==
-
-ua-parser-js@0.7.21:
-  version "0.7.21"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
-  integrity sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==
-
-ua-parser-js@^0.7.18:
-  version "0.7.20"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098"
-  integrity sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==
-
-uc.micro@^1.0.1, uc.micro@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
-  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
-
-uglify-js@1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-1.2.5.tgz#b542c2c76f78efb34b200b20177634330ff702b6"
-  integrity sha1-tULCx29477NLIAsgF3Y0Mw/3ArY=
-
-uglify-js@^3.1.4, uglify-js@^3.5.1:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.0.tgz#704681345c53a8b2079fb6cec294b05ead242ff5"
-  integrity sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==
-  dependencies:
-    commander "~2.20.0"
-    source-map "~0.6.1"
-
-uglifyify@5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/uglifyify/-/uglifyify-5.0.2.tgz#7d0269885e09faa963208a9ec6721afcaf45fc50"
-  integrity sha512-NcSk6pgoC+IgwZZ2tVLVHq+VNKSvLPlLkF5oUiHPVOJI0s/OlSVYEGXG9PCAH0hcyFZLyvt4KBdPAQBRlVDn1Q==
-  dependencies:
-    convert-source-map "~1.1.0"
-    minimatch "^3.0.2"
-    terser "^3.7.5"
-    through "~2.3.4"
-    xtend "^4.0.1"
-
-uid-safe@2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/uid-safe/-/uid-safe-2.1.4.tgz#3ad6f38368c6d4c8c75ec17623fb79aa1d071d81"
-  integrity sha1-Otbzg2jG1MjHXsF2I/t5qh0HHYE=
-  dependencies:
-    random-bytes "~1.0.0"
-
-uid-safe@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/uid-safe/-/uid-safe-2.0.0.tgz#a7f3c6ca64a1f6a5d04ec0ef3e4c3d5367317137"
-  integrity sha1-p/PGymSh9qXQTsDvPkw9U2cxcTc=
-  dependencies:
-    base64-url "1.2.1"
-
-uid2@0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/uid2/-/uid2-0.0.3.tgz#483126e11774df2f71b8b639dcd799c376162b82"
-  integrity sha1-SDEm4Rd03y9xuLY53NeZw3YWK4I=
-
-umd@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/umd/-/umd-3.0.3.tgz#aa9fe653c42b9097678489c01000acb69f0b26cf"
-  integrity sha512-4IcGSufhFshvLNcMCV80UnQVlZ5pMOC8mvNPForqwA4+lzYQuetTESLDQkeLmihq8bRcnpbQa48Wb8Lh16/xow==
-
-unc-path-regex@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
-  integrity sha1-5z3T17DXxe2G+6xrCufYxqadUPo=
-
-undeclared-identifiers@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/undeclared-identifiers/-/undeclared-identifiers-1.1.3.tgz#9254c1d37bdac0ac2b52de4b6722792d2a91e30f"
-  integrity sha512-pJOW4nxjlmfwKApE4zvxLScM/njmwj/DiUBv7EabwE4O8kRUy+HIwxQtZLBPll/jx1LJyBcqNfB3/cpv9EZwOw==
-  dependencies:
-    acorn-node "^1.3.0"
-    dash-ast "^1.0.0"
-    get-assigned-identifiers "^1.2.0"
-    simple-concat "^1.0.0"
-    xtend "^4.0.1"
-
-underscore@1.1.x:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.1.7.tgz#40bab84bad19d230096e8d6ef628bff055d83db0"
-  integrity sha1-QLq4S60Z0jAJbo1u9ii/8FXYPbA=
-
-underscore@1.8.3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022"
-  integrity sha1-Tz+1OxBuYJf8+ctBCfKl6b36UCI=
-
-underscore@~1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8"
-  integrity sha1-izixDKze9jM3uLJOT/htRa6lKag=
-
-undertaker-registry@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/undertaker-registry/-/undertaker-registry-1.0.1.tgz#5e4bda308e4a8a2ae584f9b9a4359a499825cc50"
-  integrity sha1-XkvaMI5KiirlhPm5pDWaSZglzFA=
-
-undertaker@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/undertaker/-/undertaker-1.2.1.tgz#701662ff8ce358715324dfd492a4f036055dfe4b"
-  integrity sha512-71WxIzDkgYk9ZS+spIB8iZXchFhAdEo2YU8xYqBYJ39DIUIqziK78ftm26eecoIY49X0J2MLhG4hr18Yp6/CMA==
-  dependencies:
-    arr-flatten "^1.0.1"
-    arr-map "^2.0.0"
-    bach "^1.0.0"
-    collection-map "^1.0.0"
-    es6-weak-map "^2.0.1"
-    last-run "^1.1.0"
-    object.defaults "^1.0.0"
-    object.reduce "^1.0.0"
-    undertaker-registry "^1.0.0"
-
-unherit@^1.0.4:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
-  integrity sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==
-  dependencies:
-    inherits "^2.0.0"
-    xtend "^4.0.0"
-
-unicode-canonical-property-names-ecmascript@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
-  integrity sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==
-
-unicode-match-property-ecmascript@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz#8ed2a32569961bce9227d09cd3ffbb8fed5f020c"
-  integrity sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==
-  dependencies:
-    unicode-canonical-property-names-ecmascript "^1.0.4"
-    unicode-property-aliases-ecmascript "^1.0.4"
-
-unicode-match-property-value-ecmascript@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz#5b4b426e08d13a80365e0d657ac7a6c1ec46a277"
-  integrity sha512-hDTHvaBk3RmFzvSl0UVrUmC3PuW9wKVnpoUDYH0JDkSIovzw+J5viQmeYHxVSBptubnr7PbH2e0fnpDRQnQl5g==
-
-unicode-match-property-value-ecmascript@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
-  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
-
-unicode-property-aliases-ecmascript@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz#a9cc6cc7ce63a0a3023fc99e341b94431d405a57"
-  integrity sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw==
-
-unified@^6.0.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba"
-  integrity sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==
-  dependencies:
-    bail "^1.0.0"
-    extend "^3.0.0"
-    is-plain-obj "^1.1.0"
-    trough "^1.0.0"
-    vfile "^2.0.0"
-    x-is-string "^0.1.0"
-
-union-value@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
-  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
-  dependencies:
-    arr-union "^3.1.0"
-    get-value "^2.0.6"
-    is-extendable "^0.1.1"
-    set-value "^2.0.1"
-
-uniq@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
-  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
-
-uniqs@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
-  integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
-
-unique-filename@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
-  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
-  dependencies:
-    unique-slug "^2.0.0"
-
-unique-slug@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.2.tgz#baabce91083fc64e945b0f3ad613e264f7cd4e6c"
-  integrity sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==
-  dependencies:
-    imurmurhash "^0.1.4"
-
-unique-stream@^2.0.2:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-2.3.1.tgz#c65d110e9a4adf9a6c5948b28053d9a8d04cbeac"
-  integrity sha512-2nY4TnBE70yoxHkDli7DMazpWiP7xMdCYqU2nBRO0UB+ZpEkGsSija7MvmvnZFUeC+mrgiUfcHSr3LmRFIg4+A==
-  dependencies:
-    json-stable-stringify-without-jsonify "^1.0.1"
-    through2-filter "^3.0.0"
-
-unique-string@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
-  integrity sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=
-  dependencies:
-    crypto-random-string "^1.0.0"
-
-unique-string@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
-  integrity sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==
-  dependencies:
-    crypto-random-string "^2.0.0"
-
-unique-temp-dir@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unique-temp-dir/-/unique-temp-dir-1.0.0.tgz#6dce95b2681ca003eebfb304a415f9cbabcc5385"
-  integrity sha1-bc6VsmgcoAPuv7MEpBX5y6vMU4U=
-  dependencies:
-    mkdirp "^0.5.1"
-    os-tmpdir "^1.0.1"
-    uid2 "0.0.3"
-
-unist-util-is@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-3.0.0.tgz#d9e84381c2468e82629e4a5be9d7d05a2dd324cd"
-  integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
-
-unist-util-remove-position@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz#ec037348b6102c897703eee6d0294ca4755a2020"
-  integrity sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==
-  dependencies:
-    unist-util-visit "^1.1.0"
-
-unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
-  integrity sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==
-
-unist-util-visit-parents@^2.0.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz#25e43e55312166f3348cae6743588781d112c1e9"
-  integrity sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==
-  dependencies:
-    unist-util-is "^3.0.0"
-
-unist-util-visit@^1.0.0, unist-util-visit@^1.1.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
-  integrity sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==
-  dependencies:
-    unist-util-visit-parents "^2.0.0"
-
-universalify@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
-
-universalify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
-  integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
-
-unpipe@1.0.0, unpipe@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
-  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
-
-unquote@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
-  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
-
-unset-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
-  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
-  dependencies:
-    has-value "^0.3.1"
-    isobject "^3.0.0"
-
-upath@1.2.0, upath@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
-  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
-
-update-notifier@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-3.0.1.tgz#78ecb68b915e2fd1be9f767f6e298ce87b736250"
-  integrity sha512-grrmrB6Zb8DUiyDIaeRTBCkgISYUgETNe7NglEbVsrLWXeESnlCSP50WfRSj/GmzMPl6Uchj24S/p80nP/ZQrQ==
-  dependencies:
-    boxen "^3.0.0"
-    chalk "^2.0.1"
-    configstore "^4.0.0"
-    has-yarn "^2.1.0"
-    import-lazy "^2.1.0"
-    is-ci "^2.0.0"
-    is-installed-globally "^0.1.0"
-    is-npm "^3.0.0"
-    is-yarn-global "^0.3.0"
-    latest-version "^5.0.0"
-    semver-diff "^2.0.0"
-    xdg-basedir "^3.0.0"
-
-upper-case@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
-  integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
-
-uri-js@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
-  integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
-  dependencies:
-    punycode "^2.1.0"
-
-urix@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
-  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
-
-url-parse-lax@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c"
-  integrity sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=
-  dependencies:
-    prepend-http "^2.0.0"
-
-url-parse@1.4.7:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
-  integrity sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==
-  dependencies:
-    querystringify "^2.1.1"
-    requires-port "^1.0.0"
-
-url@0.10.3:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
-  integrity sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=
-  dependencies:
-    punycode "1.3.2"
-    querystring "0.2.0"
-
-url@~0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
-  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
-  dependencies:
-    punycode "1.3.2"
-    querystring "0.2.0"
-
-urlgrey@0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/urlgrey/-/urlgrey-0.4.4.tgz#892fe95960805e85519f1cd4389f2cb4cbb7652f"
-  integrity sha1-iS/pWWCAXoVRnxzUOJ8stMu3ZS8=
-
-use@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
-  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
-
-useragent@^2.1.6:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.3.0.tgz#217f943ad540cb2128658ab23fc960f6a88c9972"
-  integrity sha512-4AoH4pxuSvHCjqLO04sU6U/uE65BYza8l/KKBS0b0hnUPWi+cQ2BpeTEwejCSx9SPV5/U03nniDTrWx5NrmKdw==
-  dependencies:
-    lru-cache "4.1.x"
-    tmp "0.0.x"
-
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
-
-util.promisify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
-  integrity sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==
-  dependencies:
-    define-properties "^1.1.2"
-    object.getownpropertydescriptors "^2.0.3"
-
-util.promisify@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
-  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.2"
-    has-symbols "^1.0.1"
-    object.getownpropertydescriptors "^2.1.0"
-
-util@0.10.3:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
-  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
-  dependencies:
-    inherits "2.0.1"
-
-util@~0.10.1:
-  version "0.10.4"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
-  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
-  dependencies:
-    inherits "2.0.3"
-
-utile@~0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/utile/-/utile-0.2.1.tgz#930c88e99098d6220834c356cbd9a770522d90d7"
-  integrity sha1-kwyI6ZCY1iIINMNWy9mncFItkNc=
-  dependencies:
-    async "~0.2.9"
-    deep-equal "*"
-    i "0.3.x"
-    mkdirp "0.x.x"
-    ncp "0.4.x"
-    rimraf "2.x.x"
-
-utils-merge@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
-  integrity sha1-ApT7kiu5N1FTVBxPcJYjHyh8ivg=
-
-utils-merge@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
-  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
-
-uuid@3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
-  integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
-
-uuid@^3.3.2:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
-  integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==
-
-uuid@^7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
-  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
-
-v8-compile-cache@^2.0.3:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
-  integrity sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==
-
-v8-to-istanbul@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-4.1.3.tgz#22fe35709a64955f49a08a7c7c959f6520ad6f20"
-  integrity sha512-sAjOC+Kki6aJVbUOXJbcR0MnbfjvBzwKZazEJymA2IX49uoOdEdk+4fBq5cXgYgiyKtAyrrJNtBZdOeDIF+Fng==
-  dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.1"
-    convert-source-map "^1.6.0"
-    source-map "^0.7.3"
-
-v8flags@^3.0.1:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-3.1.3.tgz#fc9dc23521ca20c5433f81cc4eb9b3033bb105d8"
-  integrity sha512-amh9CCg3ZxkzQ48Mhcb8iX7xpAfYJgePHxWMQCBWECpOSqJUXgY26ncA61UTV0BkPqfhcy6mzwCIoP4ygxpW8w==
-  dependencies:
-    homedir-polyfill "^1.0.1"
-
-validate-npm-package-license@^3.0.1:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
-  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
-  dependencies:
-    spdx-correct "^3.0.0"
-    spdx-expression-parse "^3.0.0"
-
-validate-npm-package-name@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz#5fa912d81eb7d0c74afc140de7317f0ca7df437e"
-  integrity sha1-X6kS2B630MdK/BQN5zF/DKffQ34=
-  dependencies:
-    builtins "^1.0.3"
-
-value-or-function@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-3.0.0.tgz#1c243a50b595c1be54a754bfece8563b9ff8d813"
-  integrity sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM=
-
-vary@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.0.1.tgz#99e4981566a286118dfb2b817357df7993376d10"
-  integrity sha1-meSYFWaihhGN+yuBc1ffeZM3bRA=
-
-vary@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
-  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
-
-vendors@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
-  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
-
-verror@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
-  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
-  dependencies:
-    assert-plus "^1.0.0"
-    core-util-is "1.0.2"
-    extsprintf "^1.2.0"
-
-vfile-location@^2.0.0:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.6.tgz#8a274f39411b8719ea5728802e10d9e0dff1519e"
-  integrity sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==
-
-vfile-message@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.1.1.tgz#5833ae078a1dfa2d96e9647886cd32993ab313e1"
-  integrity sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==
-  dependencies:
-    unist-util-stringify-position "^1.1.1"
-
-vfile@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/vfile/-/vfile-2.3.0.tgz#e62d8e72b20e83c324bc6c67278ee272488bf84a"
-  integrity sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==
-  dependencies:
-    is-buffer "^1.1.4"
-    replace-ext "1.0.0"
-    unist-util-stringify-position "^1.0.0"
-    vfile-message "^1.0.0"
-
-vhost@~3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/vhost/-/vhost-3.0.2.tgz#2fb1decd4c466aa88b0f9341af33dc1aff2478d5"
-  integrity sha1-L7HezUxGaqiLD5NBrzPcGv8keNU=
-
-vinyl-buffer@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/vinyl-buffer/-/vinyl-buffer-1.0.1.tgz#96c1a3479b8c5392542c612029013b5b27f88bbf"
-  integrity sha1-lsGjR5uMU5JULGEgKQE7Wyf4i78=
-  dependencies:
-    bl "^1.2.1"
-    through2 "^2.0.3"
-
-vinyl-file@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/vinyl-file/-/vinyl-file-2.0.0.tgz#a7ebf5ffbefda1b7d18d140fcb07b223efb6751a"
-  integrity sha1-p+v1/779obfRjRQPyweyI++2dRo=
-  dependencies:
-    graceful-fs "^4.1.2"
-    pify "^2.3.0"
-    pinkie-promise "^2.0.0"
-    strip-bom "^2.0.0"
-    strip-bom-stream "^2.0.0"
-    vinyl "^1.1.0"
-
-vinyl-fs@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/vinyl-fs/-/vinyl-fs-3.0.3.tgz#c85849405f67428feabbbd5c5dbdd64f47d31bc7"
-  integrity sha512-vIu34EkyNyJxmP0jscNzWBSygh7VWhqun6RmqVfXePrOwi9lhvRs//dOaGOTRUQr4tx7/zd26Tk5WeSVZitgng==
-  dependencies:
-    fs-mkdirp-stream "^1.0.0"
-    glob-stream "^6.1.0"
-    graceful-fs "^4.0.0"
-    is-valid-glob "^1.0.0"
-    lazystream "^1.0.0"
-    lead "^1.0.0"
-    object.assign "^4.0.4"
-    pumpify "^1.3.5"
-    readable-stream "^2.3.3"
-    remove-bom-buffer "^3.0.0"
-    remove-bom-stream "^1.2.0"
-    resolve-options "^1.1.0"
-    through2 "^2.0.0"
-    to-through "^2.0.0"
-    value-or-function "^3.0.0"
-    vinyl "^2.0.0"
-    vinyl-sourcemap "^1.1.0"
-
-vinyl-source-stream@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/vinyl-source-stream/-/vinyl-source-stream-2.0.0.tgz#f38a5afb9dd1e93b65d550469ac6182ac4f54b8e"
-  integrity sha1-84pa+53R6Ttl1VBGmsYYKsT1S44=
-  dependencies:
-    through2 "^2.0.3"
-    vinyl "^2.1.0"
-
-vinyl-sourcemap@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz#92a800593a38703a8cdb11d8b300ad4be63b3e16"
-  integrity sha1-kqgAWTo4cDqM2xHYswCtS+Y7PhY=
-  dependencies:
-    append-buffer "^1.0.2"
-    convert-source-map "^1.5.0"
-    graceful-fs "^4.1.6"
-    normalize-path "^2.1.1"
-    now-and-later "^2.0.0"
-    remove-bom-buffer "^3.0.0"
-    vinyl "^2.0.0"
-
-vinyl-sourcemaps-apply@0.2.1, vinyl-sourcemaps-apply@^0.2.0, vinyl-sourcemaps-apply@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz#ab6549d61d172c2b1b87be5c508d239c8ef87705"
-  integrity sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=
-  dependencies:
-    source-map "^0.5.1"
-
-vinyl-sourcemaps-apply@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.1.4.tgz#c5fcbd43e2f238423c2dc98bddd6f79b72bc345b"
-  integrity sha1-xfy9Q+LyOEI8LcmL3db3m3K8NFs=
-  dependencies:
-    source-map "^0.1.39"
-
-vinyl@2.x, vinyl@^2.0.0, vinyl@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.2.0.tgz#d85b07da96e458d25b2ffe19fece9f2caa13ed86"
-  integrity sha512-MBH+yP0kC/GQ5GwBqrTPTzEfiiLjta7hTtvQtbxBgTeSXsmKQRQecjibMbxIXzVT3Y9KJK+drOz1/k+vsu8Nkg==
-  dependencies:
-    clone "^2.1.1"
-    clone-buffer "^1.0.0"
-    clone-stats "^1.0.0"
-    cloneable-readable "^1.0.0"
-    remove-trailing-separator "^1.0.1"
-    replace-ext "^1.0.0"
-
-vinyl@^0.2.1:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.2.3.tgz#bca938209582ec5a49ad538a00fa1f125e513252"
-  integrity sha1-vKk4IJWC7FpJrVOKAPofEl5RMlI=
-  dependencies:
-    clone-stats "~0.0.1"
-
-vinyl@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-1.2.0.tgz#5c88036cf565e5df05558bfc911f8656df218884"
-  integrity sha1-XIgDbPVl5d8FVYv8kR+GVt8hiIQ=
-  dependencies:
-    clone "^1.0.0"
-    clone-stats "^0.0.1"
-    replace-ext "0.0.1"
-
-vm-browserify@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
-  integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==
-
-void-elements@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
-  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
-
-w3c-hr-time@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
-  integrity sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=
-  dependencies:
-    browser-process-hrtime "^0.1.2"
-
-w3c-hr-time@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
-  integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
-  dependencies:
-    browser-process-hrtime "^1.0.0"
-
-w3c-xmlserializer@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a"
-  integrity sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==
-  dependencies:
-    xml-name-validator "^3.0.0"
-
-walker@^1.0.7, walker@~1.0.5:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
-  integrity sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=
-  dependencies:
-    makeerror "1.0.x"
-
-watchify@3.11.1:
-  version "3.11.1"
-  resolved "https://registry.yarnpkg.com/watchify/-/watchify-3.11.1.tgz#8e4665871fff1ef64c0430d1a2c9d084d9721881"
-  integrity sha512-WwnUClyFNRMB2NIiHgJU9RQPQNqVeFk7OmZaWf5dC5EnNa0Mgr7imBydbaJ7tGTuPM2hz1Cb4uiBvK9NVxMfog==
-  dependencies:
-    anymatch "^2.0.0"
-    browserify "^16.1.0"
-    chokidar "^2.1.1"
-    defined "^1.0.0"
-    outpipe "^1.1.0"
-    through2 "^2.0.0"
-    xtend "^4.0.0"
-
-wcwidth@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
-  integrity sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=
-  dependencies:
-    defaults "^1.0.3"
-
-web-activities@1.13.0:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/web-activities/-/web-activities-1.13.0.tgz#18b839adfd4da86d57fe8bd4eae0d7873c814ecb"
-  integrity sha512-i43/by42gizG3KD+TlmQ7YbfbuVW64LLZZQuZZOBusj/ehce5Gup11wbptsRQr+y4/hQJOp9SxVs4fw1+22KiQ==
-  dependencies:
-    promise-pjs "1.1.3"
-
-web-animations-js@2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/web-animations-js/-/web-animations-js-2.3.1.tgz#3a6d9bc15196377a90f8e2803fa5262165b04510"
-  integrity sha1-Om2bwVGWN3qQ+OKAP6UmIWWwRRA=
-
-webidl-conversions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
-  integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
-
-webidl-conversions@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
-  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
-
-webidl-conversions@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.0.0.tgz#ff41d921371f43e772dba311b146ab6c0ef0ead4"
-  integrity sha512-jTZAeJnc6D+yAOjygbJOs33kVQIk5H6fj9SFDOhIKjsf9HiAzL/c+tAJsc8ASWafvhNkH+wJZms47pmajkhatA==
-
-websocket-driver@>=0.5.1:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.3.tgz#a2d4e0d4f4f116f1e6297eba58b05d430100e9f9"
-  integrity sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==
-  dependencies:
-    http-parser-js ">=0.4.0 <0.4.11"
-    safe-buffer ">=5.1.0"
-    websocket-extensions ">=0.1.1"
-
-websocket-extensions@>=0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
-  integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
-
-well-known-symbols@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/well-known-symbols/-/well-known-symbols-2.0.0.tgz#e9c7c07dbd132b7b84212c8174391ec1f9871ba5"
-  integrity sha512-ZMjC3ho+KXo0BfJb7JgtQ5IBuvnShdlACNkKkdsqBmYw3bPAaJfPeYUo6tLUaT5tG/Gkh7xkpBhKRQ9e7pyg9Q==
-
-whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
-  integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
-  dependencies:
-    iconv-lite "0.4.24"
-
-whatwg-fetch@>=0.10.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
-  integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
-
-whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
-  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
-
-whatwg-url@^6.4.1, whatwg-url@^6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
-  integrity sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==
-  dependencies:
-    lodash.sortby "^4.7.0"
-    tr46 "^1.0.1"
-    webidl-conversions "^4.0.2"
-
-whatwg-url@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.0.0.tgz#fde926fa54a599f3adf82dff25a9f7be02dc6edd"
-  integrity sha512-37GeVSIJ3kn1JgKyjiYNmSLP1yzbpb29jdmwBSgkD9h40/hyrR/OifpVUndji3tmwGgD8qpw7iQu3RSbCrBpsQ==
-  dependencies:
-    lodash.sortby "^4.7.0"
-    tr46 "^1.0.1"
-    webidl-conversions "^4.0.2"
-
-whatwg-url@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.0.0.tgz#37f256cb746398e19b107bd6ef820b4ae2d15871"
-  integrity sha512-41ou2Dugpij8/LPO5Pq64K5q++MnRCBpEHvQr26/mArEKTkCV5aoXIqyhuYtE0pkqScXwhf2JP57rkRTYM29lQ==
-  dependencies:
-    lodash.sortby "^4.7.0"
-    tr46 "^2.0.0"
-    webidl-conversions "^5.0.0"
-
-which-module@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
-  integrity sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=
-
-which-module@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
-  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
-
-which@2.0.2, which@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
-  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
-  dependencies:
-    isexe "^2.0.0"
-
-which@^1.1.1, which@^1.2.1, which@^1.2.14, which@^1.2.9, which@^1.3.0, which@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
-  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
-  dependencies:
-    isexe "^2.0.0"
-
-which@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-2.0.1.tgz#f1cf94d07a8e571b6ff006aeb91d0300c47ef0a4"
-  integrity sha512-N7GBZOTswtB9lkQBZA4+zAXrjEIWAUOB93AvzUiudRzRxhUdLURQ7D/gAIMY1gatT/LTbmbcv8SiYazy3eYB7w==
-  dependencies:
-    isexe "^2.0.0"
-
-wide-align@1.1.3, wide-align@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
-  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
-  dependencies:
-    string-width "^1.0.2 || 2"
-
-widest-line@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-2.0.1.tgz#7438764730ec7ef4381ce4df82fb98a53142a3fc"
-  integrity sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==
-  dependencies:
-    string-width "^2.1.1"
-
-word-wrap@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
-  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
-
-wordwrap@^1.0.0, wordwrap@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
-
-wordwrap@~0.0.2:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
-  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
-
-workerpool@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.0.0.tgz#85aad67fa1a2c8ef9386a1b43539900f61d03d58"
-  integrity sha512-fU2OcNA/GVAJLLyKUoHkAgIhKb0JoCpSjLC/G2vYKxUjVmQwGbRVeoPJ1a8U4pnVofz4AQV5Y/NEw8oKqxEBtA==
-
-wrap-ansi@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
-  integrity sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=
-  dependencies:
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
-  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
-  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
-
-wrap-ansi@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
-  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
-
-write-file-atomic@2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.1.tgz#d0b05463c188ae804396fd5ab2a370062af87529"
-  integrity sha512-TGHFeZEZMnv+gBFRfjAcxL5bPHrsGKtnb4qsFAws7/vlh+QfwAaySIw4AXP9ZskTTh5GWu3FLuJhsWVdiJPGvg==
-  dependencies:
-    graceful-fs "^4.1.11"
-    imurmurhash "^0.1.4"
-    signal-exit "^3.0.2"
-
-write-file-atomic@^2.0.0:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.3.tgz#1fd2e9ae1df3e75b8d8c367443c692d4ca81f481"
-  integrity sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==
-  dependencies:
-    graceful-fs "^4.1.11"
-    imurmurhash "^0.1.4"
-    signal-exit "^3.0.2"
-
-write-file-atomic@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.0.tgz#1b64dbbf77cb58fd09056963d63e62667ab4fb21"
-  integrity sha512-EIgkf60l2oWsffja2Sf2AL384dx328c0B+cIYPTQq5q2rOYuDV00/iPFBOUiDKKwKMOhkymH8AidPaRvzfxY+Q==
-  dependencies:
-    imurmurhash "^0.1.4"
-    is-typedarray "^1.0.0"
-    signal-exit "^3.0.2"
-    typedarray-to-buffer "^3.1.5"
-
-write@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
-  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
-  dependencies:
-    mkdirp "^0.5.1"
-
-ws@0.4.x:
-  version "0.4.32"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-0.4.32.tgz#787a6154414f3c99ed83c5772153b20feb0cec32"
-  integrity sha1-eHphVEFPPJntg8V3IVOyD+sM7DI=
-  dependencies:
-    commander "~2.1.0"
-    nan "~1.0.0"
-    options ">=0.0.5"
-    tinycolor "0.x"
-
-ws@^5.2.0:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.2.tgz#dffef14866b8e8dc9133582514d1befaf96e980f"
-  integrity sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==
-  dependencies:
-    async-limiter "~1.0.0"
-
-ws@^7.1.2:
-  version "7.3.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.3.0.tgz#4b2f7f219b3d3737bc1a2fbf145d825b94d38ffd"
-  integrity sha512-iFtXzngZVXPGgpTlP1rBqsUK82p9tKqsWRPg5L56egiljujJT3vGAYnHANvFxBieXrTFavhzhxW52jnaWV+w2w==
-
-ws@^7.2.3:
-  version "7.2.3"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.2.3.tgz#a5411e1fb04d5ed0efee76d26d5c46d830c39b46"
-  integrity sha512-HTDl9G9hbkNDk98naoR/cHDws7+EyYMOdL1BmjsZXRUjf7d+MficC4B7HLUPlSiho0vg+CWKrGIt/VJBd1xunQ==
-
-ws@~6.1.0:
-  version "6.1.4"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.1.4.tgz#5b5c8800afab925e94ccb29d153c8d02c1776ef9"
-  integrity sha512-eqZfL+NE/YQc1/ZynhojeV8q+H050oR8AZ2uIev7RU10svA9ZnJUddHcOUZTJLinZ9yEfdA2kSATS2qZK5fhJA==
-  dependencies:
-    async-limiter "~1.0.0"
-
-www-authenticate@0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/www-authenticate/-/www-authenticate-0.6.2.tgz#b7a7d487bdc5a8b423a4d8fd5f9c661adde50ebf"
-  integrity sha1-t6fUh73FqLQjpNj9X5xmGt3lDr8=
-
-x-is-function@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/x-is-function/-/x-is-function-1.0.4.tgz#5d294dc3d268cbdd062580e0c5df77a391d1fa1e"
-  integrity sha1-XSlNw9Joy90GJYDgxd93o5HR+h4=
-
-x-is-string@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
-  integrity sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=
-
-xdg-basedir@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
-  integrity sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=
-
-xml-name-validator@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
-  integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
-
-xml2js@0.4.19:
-  version "0.4.19"
-  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
-  integrity sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==
-  dependencies:
-    sax ">=0.6.0"
-    xmlbuilder "~9.0.1"
-
-xml2js@^0.4.19:
-  version "0.4.22"
-  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.22.tgz#4fa2d846ec803237de86f30aa9b5f70b6600de02"
-  integrity sha512-MWTbxAQqclRSTnehWWe5nMKzI3VmJ8ltiJEco8akcC6j3miOhjjfzKum5sId+CWhfxdOs/1xauYr8/ZDBtQiRw==
-  dependencies:
-    sax ">=0.6.0"
-    util.promisify "~1.0.0"
-    xmlbuilder "~11.0.0"
-
-xmlbuilder@~11.0.0:
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz#be9bae1c8a046e76b31127726347d0ad7002beb3"
-  integrity sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==
-
-xmlbuilder@~9.0.1:
-  version "9.0.7"
-  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
-  integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=
-
-xmlchars@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
-  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
-
-xmldoc@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/xmldoc/-/xmldoc-1.1.2.tgz#6666e029fe25470d599cd30e23ff0d1ed50466d7"
-  integrity sha512-ruPC/fyPNck2BD1dpz0AZZyrEwMOrWTO5lDdIXS91rs3wtm4j+T8Rp2o+zoOYkkAxJTZRPOSnOGei1egoRmKMQ==
-  dependencies:
-    sax "^1.2.1"
-
-xmlhttprequest-ssl@~1.5.4:
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
-  integrity sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=
-
-xmlhttprequest@1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.4.2.tgz#01453a1d9bed1e8f172f6495bbf4c8c426321500"
-  integrity sha1-AUU6HZvtHo8XL2SVu/TIxCYyFQA=
-
-xregexp@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.2.0.tgz#33f09542b0d7cabed46728eeacac4d5bd764ccf5"
-  integrity sha512-IyMa7SVe9FyT4WbQVW3b95mTLVceHhLEezQ02+QMvmIqDnKTxk0MLWIQPSW2MXAr1zQb+9yvwYhcyQULneh3wA==
-
-xregexp@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.3.0.tgz#7e92e73d9174a99a59743f67a4ce879a04b5ae50"
-  integrity sha512-7jXDIFXh5yJ/orPn4SXjuVrWWoi4Cr8jfV1eHv9CixKSbU+jY4mxfrBwAuDvupPNKpMUY+FeIqsVw/JLT9+B8g==
-  dependencies:
-    "@babel/runtime-corejs3" "^7.8.3"
-
-"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.0, xtend@~4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
-  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
-
-xtend@~2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-2.1.2.tgz#6efecc2a4dad8e6962c4901b337ce7ba87b5d28b"
-  integrity sha1-bv7MKk2tjmlixJAbM3znuoe10os=
-  dependencies:
-    object-keys "~0.4.0"
-
-xtend@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-3.0.0.tgz#5cce7407baf642cba7becda568111c493f59665a"
-  integrity sha1-XM50B7r2Qsunvs2laBEcST9ZZlo=
-
-y18n@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
-  integrity sha1-bRX7qITAhnnA136I53WegR4H+kE=
-
-y18n@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
-  integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
-
-yallist@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
-  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
-
-yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
-  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
-
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
-  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
-
-yaml-js@^0.1.3:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/yaml-js/-/yaml-js-0.1.5.tgz#a01369010b3558d8aaed2394615dfd0780fd8fac"
-  integrity sha1-oBNpAQs1WNiq7SOUYV39B4D9j6w=
-
-yargs-parser@13.1.2, yargs-parser@^13.1.2:
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
-  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs-parser@^10.0.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
-  integrity sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==
-  dependencies:
-    camelcase "^4.1.0"
-
-yargs-parser@^13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
-  integrity sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs-parser@^16.1.0:
-  version "16.1.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-16.1.0.tgz#73747d53ae187e7b8dbe333f95714c76ea00ecf1"
-  integrity sha512-H/V41UNZQPkUMIT5h5hiwg4QKIY1RPvoBV4XcjUbRM8Bk2oKqqyZ0DIEbTFZB0XjbtSPG8SAa/0DxCQmiRgzKg==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs-parser@^18.1.1:
-  version "18.1.2"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.2.tgz#2f482bea2136dbde0861683abea7756d30b504f1"
-  integrity sha512-hlIPNR3IzC1YuL1c2UwwDKpXlNFBqD1Fswwh1khz5+d8Cq/8yc/Mn0i+rQXduu8hcrFKvO7Eryk+09NecTQAAQ==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs-parser@^18.1.3:
-  version "18.1.3"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
-  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs-parser@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
-  integrity sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=
-  dependencies:
-    camelcase "^3.0.0"
-
-yargs-unparser@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/yargs-unparser/-/yargs-unparser-1.6.0.tgz#ef25c2c769ff6bd09e4b0f9d7c605fb27846ea9f"
-  integrity sha512-W9tKgmSn0DpSatfri0nx52Joq5hVXgeLiqR/5G0sZNDoLZFOr/xjBUDcShCOGNsBnEMNo1KAMBkTej1Hm62HTw==
-  dependencies:
-    flat "^4.1.0"
-    lodash "^4.17.15"
-    yargs "^13.3.0"
-
-yargs@13.3.2:
-  version "13.3.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
-  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
-  dependencies:
-    cliui "^5.0.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^13.1.2"
-
-yargs@^13.3.0:
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
-  integrity sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==
-  dependencies:
-    cliui "^5.0.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^13.1.1"
-
-yargs@^15.0.0:
-  version "15.0.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.0.2.tgz#4248bf218ef050385c4f7e14ebdf425653d13bd3"
-  integrity sha512-GH/X/hYt+x5hOat4LMnCqMd8r5Cv78heOMIJn1hr7QPPBqfeC6p89Y78+WB9yGDvfpCvgasfmWLzNzEioOUD9Q==
-  dependencies:
-    cliui "^6.0.0"
-    decamelize "^1.2.0"
-    find-up "^4.1.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^4.2.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^16.1.0"
-
-yargs@^15.3.1:
-  version "15.3.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.3.1.tgz#9505b472763963e54afe60148ad27a330818e98b"
-  integrity sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA==
-  dependencies:
-    cliui "^6.0.0"
-    decamelize "^1.2.0"
-    find-up "^4.1.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^4.2.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^18.1.1"
-
-yargs@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
-  integrity sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=
-  dependencies:
-    camelcase "^3.0.0"
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
-    get-caller-file "^1.0.1"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^1.0.2"
-    which-module "^1.0.0"
-    y18n "^3.2.1"
-    yargs-parser "^5.0.0"
-
-yawn-yaml@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/yawn-yaml/-/yawn-yaml-1.5.0.tgz#95fba7544d5375fce3dc84514f12218ed0d2ebcb"
-  integrity sha512-sH2zX9K1QiWhWh9U19pye660qlzrEAd5c4ebw/6lqz17LZw7xYi7nqXlBoVLVtc2FZFXDKiJIsvVcKGYbLVyFQ==
-  dependencies:
-    js-yaml "^3.4.2"
-    lodash "^4.17.11"
-    yaml-js "^0.1.3"
-
-yeast@0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
-  integrity sha1-AI4G2AlDIMNy28L47XagymyKxBk=
-
-zeparser@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/zeparser/-/zeparser-0.0.5.tgz#03726561bc268f2e5444f54c665b7fd4a8c029e2"
-  integrity sha1-A3JlYbwmjy5URPVMZlt/1KjAKeI=